@koobiq/components 17.4.0 → 17.5.0

package/link/link-tokens.scss

@@ -0,0 +1,67 @@
+.kbq-link {
+    --kbq-link-size-state-focused-outline-offset: 0px;
+    --kbq-link-size-state-focused-outline-width: 2px;
+    --kbq-link-size-compact-content-padding: 2px;
+    --kbq-link-size-normal-content-padding: 2px;
+    --kbq-link-size-big-content-padding: 4px;
+    --kbq-link-font-compact-font-size: 12px;
+    --kbq-link-font-compact-line-height: 16px;
+    --kbq-link-font-compact-letter-spacing: normal;
+    --kbq-link-font-compact-font-weight: normal;
+    --kbq-link-font-compact-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-link-font-compact-text-transform: null;
+    --kbq-link-font-compact-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-link-font-normal-font-size: 14px;
+    --kbq-link-font-normal-line-height: 20px;
+    --kbq-link-font-normal-letter-spacing: -0.006em;
+    --kbq-link-font-normal-font-weight: normal;
+    --kbq-link-font-normal-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-link-font-normal-text-transform: null;
+    --kbq-link-font-normal-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-link-font-big-font-size: 16px;
+    --kbq-link-font-big-line-height: 24px;
+    --kbq-link-font-big-letter-spacing: -0.011em;
+    --kbq-link-font-big-font-weight: normal;
+    --kbq-link-font-big-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-link-font-big-text-transform: null;
+    --kbq-link-font-big-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-link-text: hsla(216, 100%, 50%, 100%);
+    --kbq-link-border-bottom: hsla(216, 100%, 85%, 100%);
+    --kbq-link-state-visited-text: hsla(277, 72%, 45%, 100%);
+    --kbq-link-state-visited-border-bottom: hsla(277, 72%, 80%, 100%);
+    --kbq-link-state-visited-hover-text: hsla(277, 72%, 40%, 100%);
+    --kbq-link-state-visited-hover-border-bottom: hsla(277, 72%, 80%, 100%);
+    --kbq-link-state-visited-active-text: hsla(277, 72%, 35%, 100%);
+    --kbq-link-state-visited-active-border-bottom: hsla(277, 72%, 80%, 100%);
+    --kbq-link-state-hover-text: hsla(216, 100%, 45%, 100%);
+    --kbq-link-state-hover-border-bottom: hsla(216, 100%, 85%, 100%);
+    --kbq-link-state-active-text: hsla(216, 100%, 40%, 100%);
+    --kbq-link-state-active-border-bottom: hsla(216, 100%, 85%, 100%);
+    --kbq-link-state-focused-outline: hsla(216, 100%, 60%, 100%);
+    --kbq-link-state-disabled-text: hsla(229, 15%, 15%, 32%);
+    --kbq-link-state-disabled-border-bottom: hsla(229, 15%, 15%, 32%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-link-text: hsla(216, 100%, 65%, 100%);
+    --kbq-link-border-bottom: hsla(216, 100%, 27%, 100%);
+    --kbq-link-state-visited-text: hsla(277, 72%, 50%, 100%);
+    --kbq-link-state-visited-border-bottom: hsla(277, 72%, 30%, 100%);
+    --kbq-link-state-visited-hover-text: hsla(277, 72%, 55%, 100%);
+    --kbq-link-state-visited-hover-border-bottom: hsla(277, 72%, 30%, 100%);
+    --kbq-link-state-visited-active-text: hsla(277, 72%, 60%, 100%);
+    --kbq-link-state-visited-active-border-bottom: hsla(277, 72%, 30%, 100%);
+    --kbq-link-state-hover-text: hsla(216, 100%, 65%, 100%);
+    --kbq-link-state-hover-border-bottom: hsla(216, 100%, 27%, 100%);
+    --kbq-link-state-active-text: hsla(216, 100%, 70%, 100%);
+    --kbq-link-state-active-border-bottom: hsla(216, 100%, 27%, 100%);
+    --kbq-link-state-focused-outline: hsla(216, 100%, 60%, 100%);
+    --kbq-link-state-disabled-text: hsla(229, 15%, 40%, 100%);
+    --kbq-link-state-disabled-border-bottom: hsla(229, 15%, 50%, 32%);
+}

package/markdown/markdown.scss

@@ -22,6 +22,12 @@ $tokens: meta.module-variables(tokens) !default;
         .kbq-markdown__h#{$i} {
             margin-top: kbq-css-variable(markdown-h#{$i}-size-margin-top);
             margin-bottom: kbq-css-variable(markdown-h#{$i}-size-margin-bottom);
+
+            @for $i from 1 through 6 {
+                & + .kbq-markdown__h#{$i} {
+                    margin-top: 0;
+                }
+            }
         }
     }
 

package/modal/modal-ref.class.d.ts

@@ -4,9 +4,9 @@ import { KbqModalComponent } from './modal.component';
  * API class that public to users to handle the modal instance.
  * KbqModalRef is aim to avoid accessing to the modal instance directly by users.
  */
-export declare abstract class KbqModalRef<C = any, R = any> {
+export declare abstract class KbqModalRef<C = any, R = unknown> {
     abstract afterOpen: Observable<void>;
-    abstract afterClose: Observable<R>;
+    abstract afterClose: Observable<R | undefined>;
     abstract open(): void;
     abstract close(result?: R): void;
     abstract destroy(result?: R): void;

package/modal/modal.component.d.ts

@@ -47,7 +47,7 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     kbqMaskStyle: object;
     kbqBodyStyle: object;
     kbqAfterOpen: EventEmitter<void>;
-    kbqAfterClose: EventEmitter<R>;
+    kbqAfterClose: EventEmitter<R | undefined>;
     kbqOkText: string;
     kbqOkType: KbqComponentColors;
     kbqRestoreFocus: boolean;
@@ -70,7 +70,7 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     modalAnimationClassMap: object;
     transformOrigin: string;
     get afterOpen(): Observable<void>;
-    get afterClose(): Observable<R>;
+    get afterClose(): Observable<R | undefined>;
     get okText(): string;
     get cancelText(): string;
     get hidden(): boolean;

package/modal/modal.service.d.ts

@@ -1,16 +1,20 @@
 import { Overlay } from '@angular/cdk/overlay';
+import { InjectionToken, Injector } from '@angular/core';
 import { Observable } from 'rxjs';
 import { KbqModalControlService } from './modal-control.service';
 import { KbqModalRef } from './modal-ref.class';
 import { KbqModalComponent } from './modal.component';
 import { ConfirmType, IModalOptionsForService } from './modal.type';
 import * as i0 from "@angular/core";
+/** Injection token that can be used to access the data that was passed in to a modal. */
+export declare const KBQ_MODAL_DATA: InjectionToken<unknown>;
 export declare class ModalBuilderForService {
     private readonly overlay;
     readonly options: IModalOptionsForService;
+    private readonly injector;
     private modalRef;
     private overlayRef;
-    constructor(overlay: Overlay, options?: IModalOptionsForService);
+    constructor(overlay: Overlay, options: IModalOptionsForService, injector: Injector);
     getInstance(): KbqModalComponent | null;
     destroyModal(): void;
     private changeProps;
@@ -19,15 +23,16 @@ export declare class ModalBuilderForService {
 export declare class KbqModalService {
     private readonly overlay;
     private readonly modalControl;
+    private injector;
     get openModals(): KbqModalRef[];
     get afterAllClose(): Observable<void>;
-    constructor(overlay: Overlay, modalControl: KbqModalControlService);
+    constructor(overlay: Overlay, modalControl: KbqModalControlService, injector: Injector);
     closeAll(): void;
-    create<C, R>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
-    confirm<C, R>(options?: IModalOptionsForService<C>, confirmType?: ConfirmType): KbqModalRef<C, R>;
-    open<C, R>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
-    success<C, R>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
-    delete<C, R>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
+    create<C, R = unknown>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
+    confirm<C, R = unknown>(options?: IModalOptionsForService<C>, confirmType?: ConfirmType): KbqModalRef<C, R>;
+    open<C, R = unknown>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
+    success<C, R = unknown>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
+    delete<C, R = unknown>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<KbqModalService>;
 }

package/modal/modal.type.d.ts

@@ -19,6 +19,7 @@ export interface ModalOptions<C = any, R = any> {
     kbqTitle?: string | TemplateRef<{}>;
     kbqContent?: string | TemplateRef<{}> | Type<C>;
     kbqComponent?: Type<C>;
+    /** deprecated. Use field data and KBQ_MODAL_DATA */
     kbqComponentParams?: any;
     kbqClosable?: boolean;
     kbqMask?: boolean;
@@ -38,6 +39,8 @@ export interface ModalOptions<C = any, R = any> {
     kbqCancelText?: string;
     kbqCancelLoading?: boolean;
     kbqOnCancel?: EventEmitter<C> | OnClickCallback<C>;
+    /** Data being injected into the child component. */
+    data?: any;
 }
 export interface IModalOptionsForService<T = any> extends ModalOptions<T> {
     kbqOnOk?: OnClickCallback<T>;

package/navbar/navbar-item.component.d.ts

@@ -1,7 +1,5 @@
 import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
-import { Directionality } from '@angular/cdk/bidi';
-import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, NgZone, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, NgZone, OnDestroy, TemplateRef } from '@angular/core';
 import { IFocusableOption } from '@koobiq/cdk/a11y';
 import { KbqButton, KbqButtonCssStyler } from '@koobiq/components/button';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
@@ -128,13 +126,13 @@ export declare class KbqNavbarItem extends KbqTooltipTrigger implements AfterCon
     get showVerticalDropDownAngle(): boolean;
     get showHorizontalDropDownAngle(): boolean;
     get hasCroppedText(): boolean;
-    constructor(rectangleElement: KbqNavbarRectangleElement, navbarFocusableItem: KbqNavbarFocusableItem, changeDetectorRef: ChangeDetectorRef, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, focusMonitor: FocusMonitor, direction: Directionality, dropdownTrigger: KbqDropdownTrigger, bento: KbqNavbarBento);
+    constructor(rectangleElement: KbqNavbarRectangleElement, navbarFocusableItem: KbqNavbarFocusableItem, changeDetectorRef: ChangeDetectorRef, dropdownTrigger: KbqDropdownTrigger, bento: KbqNavbarBento);
     ngAfterContentInit(): void;
     updateTooltip(): void;
     getTitleWidth(): number;
     onKeyDown($event: KeyboardEvent): void;
     private updateCollapsedState;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarItem, [null, null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarItem, [null, null, null, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarItem, "kbq-navbar-item, [kbq-navbar-item]", ["kbqNavbarItem"], { "collapsedText": { "alias": "collapsedText"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "collapsable": { "alias": "collapsable"; "required": false; }; }, {}, ["title", "icon"], ["[kbq-icon]", "kbq-navbar-title, [kbq-navbar-title]", "*"], false, never>;
 }
 export declare class KbqNavbarToggle extends KbqTooltipTrigger implements OnDestroy {
@@ -146,12 +144,12 @@ export declare class KbqNavbarToggle extends KbqTooltipTrigger implements OnDest
     set content(content: string | TemplateRef<any>);
     get disabled(): boolean;
     protected modifier: TooltipModifier;
-    constructor(navbar: KbqVerticalNavbar, changeDetectorRef: ChangeDetectorRef, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, focusMonitor: FocusMonitor, direction: Directionality, document: any);
+    constructor(navbar: KbqVerticalNavbar, changeDetectorRef: ChangeDetectorRef, document: any);
     onKeydown($event: KeyboardEvent): void;
     ngOnDestroy(): void;
     toggle: () => void;
     private getWindow;
     private windowToggleHandler;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarToggle, [null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarToggle, [null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarToggle, "kbq-navbar-toggle", never, { "content": { "alias": "kbqCollapsedTooltip"; "required": false; }; }, {}, ["customIcon"], ["[kbq-icon]", "kbq-navbar-title"], false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "17.4.0",
+    "version": "17.5.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -19,17 +19,17 @@
     "bugs": {
         "url": "https://github.com/koobiq/angular-components/issues"
     },
-    "homepage": "https://github.com/koobiq/angular-components/blob/master/README.md",
+    "homepage": "https://github.com/koobiq/angular-components#readme",
     "peerDependencies": {
         "@angular/cdk": "^17.0.0",
         "@angular/forms": "^17.0.0",
-        "@koobiq/cdk": "17.4.0",
-        "@koobiq/angular-moment-adapter": "17.4.0",
-        "@koobiq/angular-luxon-adapter": "17.4.0",
+        "@koobiq/cdk": "17.5.0",
+        "@koobiq/angular-moment-adapter": "17.5.0",
+        "@koobiq/angular-luxon-adapter": "17.5.0",
         "@koobiq/date-formatter": "^3.1.2",
         "@koobiq/icons": "^7.1.0",
-        "@koobiq/tokens-builder": "3.4.0",
-        "@koobiq/design-tokens": "3.4.0",
+        "@koobiq/tokens-builder": "3.5.0",
+        "@koobiq/design-tokens": "3.5.0",
         "marked": "^9.0.0",
         "overlayscrollbars": "^2.2.0",
         "ngx-highlightjs": "^10.0.0"

package/popover/popover-confirm.component.d.ts

@@ -1,6 +1,4 @@
-import { Directionality } from '@angular/cdk/bidi';
-import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
-import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, ViewContainerRef } from '@angular/core';
+import { EventEmitter, InjectionToken } from '@angular/core';
 import { Subject } from 'rxjs';
 import { KbqPopoverComponent, KbqPopoverTrigger } from './popover.component';
 import * as i0 from "@angular/core";
@@ -10,7 +8,6 @@ export declare class KbqPopoverConfirmComponent extends KbqPopoverComponent {
     onConfirm: Subject<void>;
     confirmButtonText: string;
     confirmText: string;
-    constructor(changeDetectorRef: ChangeDetectorRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverConfirmComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqPopoverConfirmComponent, "kbq-popover-confirm-component", never, {}, {}, never, never, false, never>;
 }
@@ -22,10 +19,10 @@ export declare class KbqPopoverConfirmTrigger extends KbqPopoverTrigger {
     get confirmButtonText(): string;
     set confirmButtonText(value: string);
     private _confirmButtonText;
-    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, confirmText: string, confirmButtonText: string);
+    constructor(confirmText: string, confirmButtonText: string);
     updateData(): void;
     setupButtonEvents(): void;
     getOverlayHandleComponentType(): typeof KbqPopoverConfirmComponent;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverConfirmTrigger, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverConfirmTrigger, [{ optional: true; }, { optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverConfirmTrigger, "[kbqPopoverConfirm]", ["kbqPopoverConfirm"], { "confirmText": { "alias": "kbqPopoverConfirmText"; "required": false; }; "confirmButtonText": { "alias": "kbqPopoverConfirmButtonText"; "required": false; }; }, { "confirm": "confirm"; }, never, never, false, never>;
 }

package/popover/popover.component.d.ts

@@ -1,6 +1,5 @@
-import { Directionality } from '@angular/cdk/bidi';
-import { CdkScrollable, Overlay, OverlayConfig, ScrollDispatcher, ScrollStrategy } from '@angular/cdk/overlay';
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, TemplateRef, Type, ViewContainerRef } from '@angular/core';
+import { CdkScrollable, Overlay, OverlayConfig, ScrollStrategy } from '@angular/cdk/overlay';
+import { AfterContentInit, AfterViewInit, ElementRef, EventEmitter, InjectionToken, TemplateRef, Type } from '@angular/core';
 import { KbqComponentColors, KbqPopUp, KbqPopUpTrigger, PopUpPlacements, PopUpSizes } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 export declare class KbqPopoverComponent extends KbqPopUp implements AfterViewInit {
@@ -14,7 +13,6 @@ export declare class KbqPopoverComponent extends KbqPopUp implements AfterViewIn
     private readonly destroyRef;
     isContentTopOverflow: boolean;
     isContentBottomOverflow: boolean;
-    constructor(changeDetectorRef: ChangeDetectorRef);
     ngAfterViewInit(): void;
     onContentChange(): void;
     checkContentOverflow(contentElement: HTMLElement): void;
@@ -36,6 +34,7 @@ export declare const KBQ_POPOVER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
 /** Creates an error to be thrown if the user supplied an invalid popover position. */
 export declare function getKbqPopoverInvalidPositionError(position: string): Error;
 export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> implements AfterContentInit {
+    protected scrollStrategy: () => ScrollStrategy;
     get popoverVisible(): boolean;
     set popoverVisible(value: boolean);
     get popoverPlacement(): PopUpPlacements;
@@ -80,7 +79,6 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     visibleChange: EventEmitter<boolean>;
     protected originSelector: string;
     protected get overlayConfig(): OverlayConfig;
-    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality);
     ngAfterContentInit(): void;
     updateData(): void;
     /** Updates the position of the current popover. */
@@ -89,6 +87,6 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     updateClassMap(newPlacement?: string): void;
     closingActionsForClick(): import("rxjs").Observable<MouseEvent>[];
     closingActions(): import("rxjs").Observable<void | MouseEvent | CdkScrollable>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverTrigger, [null, null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverTrigger, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "popoverVisible": { "alias": "kbqPopoverVisible"; "required": false; }; "popoverPlacement": { "alias": "kbqPopoverPlacement"; "required": false; }; "popoverPlacementPriority": { "alias": "kbqPopoverPlacementPriority"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "header": { "alias": "kbqPopoverHeader"; "required": false; }; "content": { "alias": "kbqPopoverContent"; "required": false; }; "footer": { "alias": "kbqPopoverFooter"; "required": false; }; "disabled": { "alias": "kbqPopoverDisabled"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "size": { "alias": "kbqPopoverSize"; "required": false; }; "customClass": { "alias": "kbqPopoverClass"; "required": false; }; "hasCloseButton": { "alias": "hasCloseButton"; "required": false; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, false, never>;
 }