@koobiq/components 17.3.0 → 17.4.0

package/markdown/markdown.scss

@@ -20,7 +20,6 @@ $tokens: meta.module-variables(tokens) !default;
     // h1, h2, h3, h4, h5, h6
     @for $i from 1 through 6 {
         .kbq-markdown__h#{$i} {
-            max-width: kbq-css-variable(markdown-h#{$i}-size-max-width);
             margin-top: kbq-css-variable(markdown-h#{$i}-size-margin-top);
             margin-bottom: kbq-css-variable(markdown-h#{$i}-size-margin-bottom);
         }
@@ -38,14 +37,12 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .kbq-markdown__p {
-        max-width: kbq-css-variable(markdown-p-size-max-width);
         margin-top: kbq-css-variable(markdown-p-size-margin-top);
         margin-bottom: kbq-css-variable(markdown-p-size-margin-bottom);
     }
 
     .kbq-markdown__ul,
     .kbq-markdown__ol {
-        max-width: kbq-css-variable(markdown-list-size-max-width);
         margin-top: kbq-css-variable(markdown-list-size-margin-top);
         margin-bottom: kbq-css-variable(markdown-list-size-margin-bottom);
 
@@ -93,7 +90,6 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .kbq-markdown__blockquote {
-        max-width: kbq-css-variable(markdown-blockquote-size-max-width);
         margin-top: kbq-css-variable(markdown-blockquote-size-margin-top);
         margin-left: 0;
         margin-bottom: kbq-css-variable(markdown-blockquote-size-margin-bottom);
@@ -129,12 +125,11 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .kbq-markdown__p > .kbq-markdown__code {
-        max-width: kbq-css-variable(markdown-code-size-max-width);
         padding: kbq-css-variable(markdown-code-size-inline-padding);
     }
 
     .kbq-markdown__img {
-        max-width: kbq-css-variable(markdown-image-size-max-width);
+        max-width: 100%;
         margin-top: kbq-css-variable(markdown-image-size-margin-top);
         margin-bottom: kbq-css-variable(markdown-image-size-margin-bottom);
 
@@ -197,3 +192,7 @@ $tokens: meta.module-variables(tokens) !default;
         }
     }
 }
+
+.docs-live-example.kbq-markdown {
+    margin-bottom: 128px;
+}

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

@@ -4,7 +4,7 @@ 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<T = any, R = any> {
+export declare abstract class KbqModalRef<C = any, R = any> {
     abstract afterOpen: Observable<void>;
     abstract afterClose: Observable<R>;
     abstract open(): void;
@@ -20,7 +20,7 @@ export declare abstract class KbqModalRef<T = any, R = any> {
      * Note: this method may return undefined if the Component has not ready yet.
      * (it only available after Modal's ngOnInit)
      */
-    abstract getContentComponent(): T;
+    abstract getContentComponent(): C;
     /**
      * Get the dom element of this Modal
      */

package/modal/modal.service.d.ts

@@ -6,7 +6,8 @@ import { KbqModalComponent } from './modal.component';
 import { ConfirmType, IModalOptionsForService } from './modal.type';
 import * as i0 from "@angular/core";
 export declare class ModalBuilderForService {
-    private overlay;
+    private readonly overlay;
+    readonly options: IModalOptionsForService;
     private modalRef;
     private overlayRef;
     constructor(overlay: Overlay, options?: IModalOptionsForService);
@@ -16,18 +17,17 @@ export declare class ModalBuilderForService {
     private createModal;
 }
 export declare class KbqModalService {
-    private overlay;
-    private modalControl;
+    private readonly overlay;
+    private readonly modalControl;
     get openModals(): KbqModalRef[];
     get afterAllClose(): Observable<void>;
     constructor(overlay: Overlay, modalControl: KbqModalControlService);
     closeAll(): void;
-    create<T>(options?: IModalOptionsForService<T>): KbqModalRef<T>;
-    confirm<T>(options?: IModalOptionsForService<T>, confirmType?: ConfirmType): KbqModalRef<T>;
-    open<T>(options?: IModalOptionsForService<T>): KbqModalRef<T>;
-    success<T>(options?: IModalOptionsForService<T>): KbqModalRef<T>;
-    delete<T>(options?: IModalOptionsForService<T>): KbqModalRef<T>;
-    private simpleConfirm;
+    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>;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<KbqModalService>;
 }

package/modal/modal.type.d.ts

@@ -8,7 +8,7 @@ export declare enum ModalSize {
     Medium = "medium",
     Large = "large"
 }
-export interface ModalOptions<T = any, R = any> {
+export interface ModalOptions<C = any, R = any> {
     kbqModalType?: ModalType;
     kbqVisible?: boolean;
     kbqWidth?: number | string;
@@ -17,15 +17,15 @@ export interface ModalOptions<T = any, R = any> {
     kbqClassName?: string;
     kbqStyle?: object;
     kbqTitle?: string | TemplateRef<{}>;
-    kbqContent?: string | TemplateRef<{}> | Type<T>;
-    kbqComponent?: Type<T>;
+    kbqContent?: string | TemplateRef<{}> | Type<C>;
+    kbqComponent?: Type<C>;
     kbqComponentParams?: any;
     kbqClosable?: boolean;
     kbqMask?: boolean;
     kbqMaskClosable?: boolean;
     kbqMaskStyle?: object;
     kbqBodyStyle?: object;
-    kbqFooter?: string | TemplateRef<{}> | IModalButtonOptions<T>[];
+    kbqFooter?: string | TemplateRef<{}> | IModalButtonOptions<C>[];
     kbqGetContainer?: HTMLElement | OverlayRef | (() => HTMLElement | OverlayRef) | null;
     kbqAfterOpen?: EventEmitter<void>;
     kbqAfterClose?: EventEmitter<R>;
@@ -34,10 +34,10 @@ export interface ModalOptions<T = any, R = any> {
     kbqOkText?: string;
     kbqOkType?: string;
     kbqOkLoading?: boolean;
-    kbqOnOk?: EventEmitter<T> | OnClickCallback<T>;
+    kbqOnOk?: EventEmitter<C> | OnClickCallback<C>;
     kbqCancelText?: string;
     kbqCancelLoading?: boolean;
-    kbqOnCancel?: EventEmitter<T> | OnClickCallback<T>;
+    kbqOnCancel?: EventEmitter<C> | OnClickCallback<C>;
 }
 export interface IModalOptionsForService<T = any> extends ModalOptions<T> {
     kbqOnOk?: OnClickCallback<T>;

package/navbar/_navbar-theme.scss

@@ -91,7 +91,7 @@
     }
 
     .kbq-navbar-divider {
-        background: kbq-css-variable(line-contrast-fade, map.get($theme, line, contrast-fade));
+        background: kbq-css-variable(line-contrast-less, map.get($theme, line, contrast-less));
     }
 }
 
@@ -106,7 +106,7 @@ button {
 
 @mixin kbq-navbar-typography($config) {
     .kbq-navbar-title {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, text-normal-medium);
     }
 
     .kbq-navbar-brand {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "17.3.0",
+    "version": "17.4.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -8,8 +8,12 @@
     },
     "keywords": [
         "angular",
-        "koobiq",
-        "components"
+        "component",
+        "service",
+        "directive",
+        "development",
+        "kit",
+        "koobiq"
     ],
     "license": "MIT",
     "bugs": {
@@ -19,13 +23,13 @@
     "peerDependencies": {
         "@angular/cdk": "^17.0.0",
         "@angular/forms": "^17.0.0",
-        "@koobiq/cdk": "17.3.0",
-        "@koobiq/angular-moment-adapter": "17.3.0",
-        "@koobiq/angular-luxon-adapter": "17.3.0",
+        "@koobiq/cdk": "17.4.0",
+        "@koobiq/angular-moment-adapter": "17.4.0",
+        "@koobiq/angular-luxon-adapter": "17.4.0",
         "@koobiq/date-formatter": "^3.1.2",
         "@koobiq/icons": "^7.1.0",
-        "@koobiq/tokens-builder": "3.3.1",
-        "@koobiq/design-tokens": "3.3.1",
+        "@koobiq/tokens-builder": "3.4.0",
+        "@koobiq/design-tokens": "3.4.0",
         "marked": "^9.0.0",
         "overlayscrollbars": "^2.2.0",
         "ngx-highlightjs": "^10.0.0"

package/popover/_popover-theme.scss

@@ -6,6 +6,7 @@
 
 @mixin kbq-popover-theme($theme) {
     $popover: map.get(map.get($theme, components), popover);
+    $background: map.get($theme, background);
 
     .kbq-popover {
         box-shadow: kbq-css-variable(popover-container-box-shadow, map.get($popover, container, box-shadow));
@@ -20,6 +21,10 @@
         background: kbq-css-variable(popover-container-background, map.get($popover, container, background));
     }
 
+    .kbq-popover__close {
+        background-color: map.get($background, overlay-inverse);
+    }
+
     .kbq-popover__header {
         color: kbq-css-variable(popover-header-text-color, map.get($popover, header, text));
     }

package/popover/popover.component.d.ts

@@ -1,16 +1,26 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { CdkScrollable, Overlay, OverlayConfig, ScrollDispatcher, ScrollStrategy } from '@angular/cdk/overlay';
-import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, TemplateRef, Type, ViewContainerRef } from '@angular/core';
-import { KbqPopUp, KbqPopUpTrigger, PopUpPlacements, PopUpSizes } from '@koobiq/components/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, TemplateRef, Type, ViewContainerRef } 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 {
+export declare class KbqPopoverComponent extends KbqPopUp implements AfterViewInit {
     prefix: string;
     header: string | TemplateRef<any>;
     footer: string | TemplateRef<any>;
     isTrapFocus: boolean;
+    hasCloseButton: boolean;
+    popoverContent: ElementRef<HTMLDivElement>;
+    private debounceTime;
+    private readonly destroyRef;
+    isContentTopOverflow: boolean;
+    isContentBottomOverflow: boolean;
     constructor(changeDetectorRef: ChangeDetectorRef);
+    ngAfterViewInit(): void;
+    onContentChange(): void;
+    checkContentOverflow(contentElement: HTMLElement): void;
     updateClassMap(placement: string, customClass: string, size: PopUpSizes): void;
     updateTrapFocus(isTrapFocus: boolean): void;
+    protected readonly componentColors: typeof KbqComponentColors;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqPopoverComponent, "kbq-popover-component", never, {}, {}, never, never, false, never>;
 }
@@ -53,6 +63,9 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     private _size;
     get customClass(): string;
     set customClass(value: string);
+    get hasCloseButton(): boolean;
+    set hasCloseButton(value: boolean);
+    private _hasCloseButton;
     /**
      * Controls the behavior of closing the component on scroll.
      * The default value is `false`.
@@ -77,5 +90,5 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     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 ɵ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; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, false, 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>;
 }

package/popover/popover.module.d.ts

@@ -5,8 +5,10 @@ import * as i3 from "@angular/common";
 import * as i4 from "@angular/cdk/overlay";
 import * as i5 from "@koobiq/components/button";
 import * as i6 from "@angular/cdk/a11y";
+import * as i7 from "@koobiq/components/icon";
+import * as i8 from "@angular/cdk/observers";
 export declare class KbqPopoverModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqPopoverModule, [typeof i1.KbqPopoverComponent, typeof i1.KbqPopoverTrigger, typeof i2.KbqPopoverConfirmComponent, typeof i2.KbqPopoverConfirmTrigger], [typeof i3.CommonModule, typeof i4.OverlayModule, typeof i5.KbqButtonModule, typeof i6.A11yModule], [typeof i1.KbqPopoverComponent, typeof i1.KbqPopoverTrigger, typeof i2.KbqPopoverConfirmComponent, typeof i2.KbqPopoverConfirmTrigger]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqPopoverModule, [typeof i1.KbqPopoverComponent, typeof i1.KbqPopoverTrigger, typeof i2.KbqPopoverConfirmComponent, typeof i2.KbqPopoverConfirmTrigger], [typeof i3.CommonModule, typeof i4.OverlayModule, typeof i5.KbqButtonModule, typeof i6.A11yModule, typeof i7.KbqIconModule, typeof i8.CdkObserveContent], [typeof i1.KbqPopoverComponent, typeof i1.KbqPopoverTrigger, typeof i2.KbqPopoverConfirmComponent, typeof i2.KbqPopoverConfirmTrigger]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqPopoverModule>;
 }

package/popover/popover.scss

@@ -69,6 +69,18 @@ $trigger-margin: 9px;
     }
 }
 
+.kbq-popover__content .kbq-popover__close-container {
+    display: flex;
+    justify-content: flex-end;
+    height: 0;
+
+    .kbq-popover__close {
+        top: auto;
+        right: auto;
+        transform: translateY(-50%) translateX(50%);
+    }
+}
+
 .kbq-popover__header {
     display: flex;
     align-items: center;
@@ -83,11 +95,23 @@ $trigger-margin: 9px;
     }
 }
 
+.kbq-popover__header_top-overflow {
+    box-shadow: 0 9px 8px -12px rgba(138, 143, 168, 1);
+}
+
+.kbq-popover__header_with-close-button {
+    padding-right: kbq-css-variable(size-4xl);
+}
+
 .kbq-popover__footer {
     padding: kbq-css-variable(popover-size-footer-padding-vertical)
         kbq-css-variable(popover-size-footer-padding-horizontal);
 }
 
+.kbq-popover__footer_bottom-overflow {
+    box-shadow: 0 -9px 8px -12px rgba(138, 143, 168, 1);
+}
+
 .kbq-popover__arrow {
     position: absolute;
 
@@ -103,3 +127,11 @@ $arrow-offset: calc(($arrow-size - 1px) / -2);
 $arrow-padding: calc(18px - $trigger-margin);
 
 @include pop-up.popup-arrow-positions(kbq-popover, $arrow-offset, $arrow-padding);
+
+.kbq-popover__close {
+    position: absolute;
+    z-index: 2;
+    top: kbq-css-variable(size-s);
+    right: kbq-css-variable(size-s);
+    border-radius: kbq-css-variable(button-size-border-radius);
+}