@koobiq/components 17.2.0 → 17.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "17.2.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.2.0",
-        "@koobiq/angular-moment-adapter": "17.2.0",
-        "@koobiq/angular-luxon-adapter": "17.2.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"
@@ -76,12 +80,6 @@
             "esm": "./esm2022/badge/koobiq-components-badge.mjs",
             "default": "./fesm2022/koobiq-components-badge.mjs"
         },
-        "./checkbox": {
-            "types": "./checkbox/index.d.ts",
-            "esm2022": "./esm2022/checkbox/koobiq-components-checkbox.mjs",
-            "esm": "./esm2022/checkbox/koobiq-components-checkbox.mjs",
-            "default": "./fesm2022/koobiq-components-checkbox.mjs"
-        },
         "./button": {
             "types": "./button/index.d.ts",
             "esm2022": "./esm2022/button/koobiq-components-button.mjs",
@@ -94,6 +92,12 @@
             "esm": "./esm2022/button-toggle/koobiq-components-button-toggle.mjs",
             "default": "./fesm2022/koobiq-components-button-toggle.mjs"
         },
+        "./checkbox": {
+            "types": "./checkbox/index.d.ts",
+            "esm2022": "./esm2022/checkbox/koobiq-components-checkbox.mjs",
+            "esm": "./esm2022/checkbox/koobiq-components-checkbox.mjs",
+            "default": "./fesm2022/koobiq-components-checkbox.mjs"
+        },
         "./code-block": {
             "types": "./code-block/index.d.ts",
             "esm2022": "./esm2022/code-block/koobiq-components-code-block.mjs",

package/popover/_popover-theme.scss

@@ -6,9 +6,10 @@
 
 @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-ontainer-box-shadow, map.get($popover, container, box-shadow));
+        box-shadow: kbq-css-variable(popover-container-box-shadow, map.get($popover, container, box-shadow));
     }
 
     .kbq-popover__container {
@@ -16,16 +17,20 @@
     }
 
     .kbq-popover__arrow {
-        box-shadow: kbq-css-variable(popover-ontainer-box-shadow, map.get($popover, container, box-shadow));
+        box-shadow: kbq-css-variable(popover-container-box-shadow, map.get($popover, container, box-shadow));
         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, map.get($popover, header, text));
+        color: kbq-css-variable(popover-header-text-color, map.get($popover, header, text));
     }
 
     .kbq-popover__content {
-        color: kbq-css-variable(popover-content-text, map.get($popover, content, text));
+        color: kbq-css-variable(popover-content-text-color, map.get($popover, content, text));
     }
 }
 

package/popover/popover.component.d.ts

@@ -1,16 +1,26 @@
 import { Directionality } from '@angular/cdk/bidi';
-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 { CdkScrollable, Overlay, OverlayConfig, ScrollDispatcher, ScrollStrategy } from '@angular/cdk/overlay';
+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>;
 }
@@ -25,7 +35,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> {
+export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> implements AfterContentInit {
     get popoverVisible(): boolean;
     set popoverVisible(value: boolean);
     get popoverPlacement(): PopUpPlacements;
@@ -53,12 +63,15 @@ 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`.
      * Use CloseScrollStrategy as alternative
      */
-    get closeOnScroll(): boolean;
+    get closeOnScroll(): boolean | null;
     set closeOnScroll(value: boolean);
     private _closeOnScroll;
     get hasClickTrigger(): boolean;
@@ -68,13 +81,14 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     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. */
     updatePosition(reapplyPosition?: boolean): void;
     getOverlayHandleComponentType(): Type<KbqPopoverComponent>;
     updateClassMap(newPlacement?: string): void;
     closingActionsForClick(): import("rxjs").Observable<MouseEvent>[];
-    closingActions(): import("rxjs").Observable<void | MouseEvent | import("@angular/cdk/scrolling").CdkScrollable>;
+    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);
+}