@koobiq/components 17.0.0-rc.1 → 17.0.0-rc.3

package/alert/_alert-theme.scss

@@ -4,46 +4,81 @@
 @use '../core/styles/typography/typography-utils' as *;
 
 
-@mixin kbq-alert-theme($alert) {
-    background-color: map.get($alert, background);
-    border-color: map.get($alert, border);
+@mixin kbq-alert-default($style) {
+    background: map.get($style, background);
 
-    .kbq-icon.kbq-alert__icon {
-        color: map.get($alert, icon);
+    .kbq-alert__title {
+        color: map.get($style, title);
+    }
+
+    .kbq-alert__text {
+        color: map.get($style, text);
+    }
+}
+
+@mixin kbq-alert-colored($style) {
+    background: map.get($style, background);
+
+    .kbq-alert__title {
+        color: map.get($style, title);
+    }
+
+    .kbq-alert__text {
+        color: map.get($style, text);
     }
 }
 
 @mixin kbq-alert-theme($theme) {
     $alert: map.get(map.get($theme, components), alert);
 
-    $alert-contrast: map.get($alert, contrast);
-    $alert-error: map.get($alert, error);
+    $default: map.get($alert, default);
+    $colored: map.get($alert, colored);
 
     .kbq-alert__close:focus {
         outline: none;
     }
 
-    .kbq-alert {
-        background: map.get($alert-contrast, background);
+    .kbq-alert.kbq-alert_default {
+        &.kbq-alert_contrast {
+            @include kbq-alert-default(map.get($default, contrast));
+        }
 
-        & .kbq-alert__title {
-            color: map.get($alert-contrast, title);
+        &.kbq-alert_error {
+            @include kbq-alert-default(map.get($default, error));
         }
 
-        & .kbq-alert__text {
-            color: map.get($alert-contrast, text);
+        &.kbq-alert_warning {
+            @include kbq-alert-default(map.get($default, warning));
+        }
+
+        &.kbq-alert_success {
+            @include kbq-alert-default(map.get($default, success));
+        }
+
+        &.kbq-alert_theme {
+            @include kbq-alert-default(map.get($default, theme));
         }
     }
 
-    .kbq-alert.kbq-alert_error {
-        background: map.get($alert-error, background);
+    .kbq-alert.kbq-alert_colored {
+        &.kbq-alert_contrast {
+            @include kbq-alert-colored(map.get($colored, contrast));
+        }
+
+        &.kbq-alert_error {
+            @include kbq-alert-colored(map.get($colored, error));
+        }
+
+        &.kbq-alert_warning {
+            @include kbq-alert-colored(map.get($colored, warning));
+        }
 
-        & .kbq-alert__title {
-            color: map.get($alert-error, title);
+        &.kbq-alert_success {
+            @include kbq-alert-colored(map.get($colored, success));
         }
 
-        & .kbq-alert__text {
-            color: map.get($alert-error, text);
+        &.kbq-alert_theme {
+            @include kbq-alert-colored(map.get($colored, theme));
         }
     }
 }
@@ -57,5 +92,9 @@
         .kbq-alert__title {
             @include kbq-typography-level-to-styles($config, map.get($tokens, alert-font-title));
         }
+
+        &.kbq-alert_compact .kbq-alert__title {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, alert-font-title-compact));
+        }
     }
 }

package/alert/alert.component.d.ts

@@ -1,5 +1,17 @@
-import { KbqIconItem } from '@koobiq/components/icon';
+import { AfterContentInit } from '@angular/core';
+import { KbqIcon, KbqIconItem } from '@koobiq/components/icon';
 import * as i0 from "@angular/core";
+export declare enum KbqAlertStyles {
+    Default = "default",
+    Colored = "colored"
+}
+export declare enum KbqAlertColors {
+    Contrast = "contrast",
+    Error = "error",
+    Warning = "warning",
+    Success = "success",
+    Theme = "theme"
+}
 export declare class KbqAlertTitle {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAlertTitle, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAlertTitle, "[kbq-alert-title]", never, {}, {}, never, never, false, never>;
@@ -12,11 +24,19 @@ export declare class KbqAlertControl {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAlertControl, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAlertControl, "[kbq-alert-control]", never, {}, {}, never, never, false, never>;
 }
-export declare class KbqAlert {
+export declare class KbqAlert implements AfterContentInit {
     iconItem: KbqIconItem;
+    icon: KbqIcon;
     title: KbqAlertTitle;
     control: KbqAlertControl;
     closeButton: KbqAlertCloseButton;
+    compact: boolean;
+    alertStyle: KbqAlertStyles | string;
+    get alertColor(): string;
+    set alertColor(value: string | KbqAlertColors);
+    private _alertColor;
+    get isColored(): boolean;
+    ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAlert, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAlert, "kbq-alert", never, {}, {}, ["iconItem", "title", "control", "closeButton"], ["[kbq-icon-item]", "[kbq-alert-title]", "*", "[kbq-alert-control]", "[kbq-alert-close-button]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAlert, "kbq-alert", never, { "compact": { "alias": "compact"; "required": false; }; "alertStyle": { "alias": "alertStyle"; "required": false; }; "alertColor": { "alias": "alertColor"; "required": false; }; }, {}, ["iconItem", "icon", "title", "control", "closeButton"], ["[kbq-icon-item],[kbq-icon]", "[kbq-alert-title]", "*", "[kbq-alert-control]", "[kbq-alert-close-button]"], false, never>;
 }

package/alert/alert.component.scss

@@ -9,73 +9,198 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-alert {
     display: flex;
 
-    border-radius: var(--kbq-alert-size-container-border-radius, map.get($tokens, alert-size-container-border-radius));
+    width: 492px;
 
-    min-width: var(--kbq-alert-size-container-min-width, map.get($tokens, alert-size-container-min-width));
-    min-height: calc(
-        var(--kbq-alert-size-container-min-height, map.get($tokens, alert-size-container-min-height)) -
-        (var(--kbq-alert-size-container-padding-vertical, map.get($tokens, alert-size-container-padding-vertical)) * 2)
-    );
-
-    padding:
-        var(--kbq-alert-size-container-padding-vertical, map.get($tokens, alert-size-container-padding-vertical))
-        var(--kbq-alert-size-container-padding-horizontal, map.get($tokens, alert-size-container-padding-horizontal));
+    & .kbq-alert__content_title {
+        margin-bottom: map.get($tokens, size-xxs);
+    }
 }
 
-.kbq-alert__icon {
-    margin-right: var(
-        --kbq-alert-size-container-content-gap-horizontal,
-        map.get($tokens, alert-size-container-content-gap-horizontal)
-    );
-}
+.kbq-alert__content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
 
-.kbq-alert__title {
-    margin-bottom: var(
-        --kbq-alert-size-container-content-gap-vertical,
-        map.get($tokens, alert-size-container-content-gap-vertical)
-    );
+    justify-content: center;
 }
 
-.kbq-alert__controls {
-    margin-top: var(
-        --kbq-alert-size-container-content-gap-vertical,
-        map.get($tokens, alert-size-container-content-gap-vertical)
+.kbq-alert.kbq-alert_normal {
+    border-radius: var(
+        --kbq-alert-size-normal-container-border-radius,
+        map.get($tokens, alert-size-normal-container-border-radius)
     );
 
-    padding-top: var(
-        --kbq-alert-size-button-stack-content-padding-top,
-        map.get($tokens, alert-size-button-stack-padding-top)
-    );
+    padding:
+        var(
+            --kbq-alert-size-normal-container-padding-top,
+            map.get($tokens, alert-size-normal-container-padding-top)
+        )
+        var(
+            --kbq-alert-size-normal-container-padding-right,
+            map.get($tokens, alert-size-normal-container-padding-right)
+        )
+        var(
+            --kbq-alert-size-normal-container-padding-bottom,
+            map.get($tokens, alert-size-normal-container-padding-bottom)
+        )
+        var(
+            --kbq-alert-size-normal-container-padding-left,
+            map.get($tokens, alert-size-normal-container-padding-left)
+        );
+
+    & .kbq-alert__icon {
+        margin:
+            var(--kbq-alert-size-normal-icon-margin-top, map.get($tokens, alert-size-normal-icon-margin-top))
+            var(--kbq-alert-size-normal-icon-margin-right, map.get($tokens, alert-size-normal-icon-margin-right))
+            var(--kbq-alert-size-normal-icon-margin-bottom, map.get($tokens, alert-size-normal-icon-margin-bottom))
+            var(--kbq-alert-size-normal-icon-margin-left, map.get($tokens, alert-size-normal-icon-margin-left));
+
+        &.kbq-alert__icon_title .kbq-icon {
+            margin-top: var(
+                --kbq-alert-size-normal-icon-margin-addon-title,
+                map.get($tokens, alert-size-normal-icon-margin-addon-title)
+            );
+        }
+    }
 
-    & .kbq-button {
-        margin-right: var(
-            --kbq-alert-size-button-stack-content-content-gap-horizontal,
-            map.get($tokens, alert-size-button-stack-content-gap-horizontal)
+    & .kbq-alert__content {
+        padding:
+            var(
+                --kbq-alert-size-normal-content-padding-top,
+                map.get($tokens, alert-size-normal-content-padding-top)
+            )
+            var(
+                --kbq-alert-size-normal-content-padding-right,
+                map.get($tokens, alert-size-normal-content-padding-right)
+            )
+            var(
+                --kbq-alert-size-normal-content-padding-bottom,
+                map.get($tokens, alert-size-normal-content-padding-bottom)
+            )
+            var(
+                --kbq-alert-size-normal-content-padding-left,
+                map.get($tokens, alert-size-normal-content-padding-left)
+            );
+    }
+
+    & .kbq-alert__title {
+        margin-bottom: var(
+            --kbq-alert-size-normal-title-margin-bottom,
+            map.get($tokens, alert-size-normal-title-margin-bottom)
         );
     }
 
-    & .kbq-link {
-        margin-right: 16px;
+    & .kbq-alert__button-stack {
+        padding-top: var(
+            --kbq-alert-size-normal-button-stack-padding-top,
+            map.get($tokens, alert-size-normal-button-stack-padding-top)
+        );
+
+        padding-bottom: var(
+            --kbq-alert-size-normal-button-stack-padding-bottom,
+            map.get($tokens, alert-size-normal-button-stack-padding-bottom)
+        );
     }
-}
 
-.kbq-alert__content {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
+    & .kbq-alert__close-button {
+        margin-top: var(
+            --kbq-alert-size-normal-close-button-margin-top,
+            map.get($tokens, alert-size-normal-close-button-margin-top)
+        );
 
-    justify-content: center;
+        margin-left: var(
+            --kbq-alert-size-normal-close-button-margin-left,
+            map.get($tokens, alert-size-normal-close-button-margin-left)
+        );
+    }
 }
 
-.kbq-alert__close-button {
-    margin-left: var(
-        --kbq-alert-size-container-content-gap-horizontal,
-        map.get($tokens, alert-size-container-content-gap-horizontal)
+.kbq-alert.kbq-alert_compact {
+    border-radius: var(
+        --kbq-alert-size-compact-container-border-radius,
+        map.get($tokens, alert-size-compact-container-border-radius)
     );
-}
 
-.kbq-alert_dismissible .kbq-alert__close-button {
-    margin-top: var(--kbq-alert-size-close-button-margin-top, map.get($tokens, alert-size-close-button-margin-top));
-    margin-right:
-        var(--kbq-alert-size-close-button-margin-right, map.get($tokens, alert-size-close-button-margin-right));
+    padding:
+        var(
+            --kbq-alert-size-compact-container-padding-top,
+            map.get($tokens, alert-size-compact-container-padding-top)
+        )
+        var(
+            --kbq-alert-size-compact-container-padding-right,
+            map.get($tokens, alert-size-compact-container-padding-right)
+        )
+        var(
+            --kbq-alert-size-compact-container-padding-bottom,
+            map.get($tokens, alert-size-compact-container-padding-bottom)
+        )
+        var(
+            --kbq-alert-size-compact-container-padding-left,
+            map.get($tokens, alert-size-compact-container-padding-left)
+        );
+
+    & .kbq-alert__icon {
+        margin-top: var(--kbq-alert-size-compact-icon-margin-top, map.get($tokens, alert-size-compact-icon-margin-top));
+
+        margin-right:
+            var(--kbq-alert-size-compact-icon-margin-right, map.get($tokens, alert-size-compact-icon-margin-right));
+
+        &.kbq-alert__icon_title .kbq-icon {
+            margin-top: var(
+                --kbq-alert-size-compact-icon-margin-addon-title,
+                map.get($tokens, alert-size-compact-icon-margin-addon-title)
+            );
+        }
+    }
+
+    & .kbq-alert__content {
+        padding:
+            var(
+                --kbq-alert-size-compact-content-padding-top,
+                map.get($tokens, alert-size-compact-content-padding-top)
+            )
+            var(
+                --kbq-alert-size-compact-content-padding-right,
+                map.get($tokens, alert-size-compact-content-padding-right)
+            )
+            var(
+                --kbq-alert-size-compact-content-padding-bottom,
+                map.get($tokens, alert-size-compact-content-padding-bottom)
+            )
+            var(
+                --kbq-alert-size-compact-content-padding-left,
+                map.get($tokens, alert-size-compact-content-padding-left)
+            );
+    }
+
+    & .kbq-alert__title {
+        margin-bottom: var(
+            --kbq-alert-size-compact-title-margin-bottom,
+            map.get($tokens, alert-size-compact-title-margin-bottom)
+        );
+    }
+
+    & .kbq-alert__button-stack {
+        padding-top: var(
+            --kbq-alert-size-compact-button-stack-padding-top,
+            map.get($tokens, alert-size-compact-button-stack-padding-top)
+        );
+
+        padding-bottom: var(
+            --kbq-alert-size-compact-button-stack-padding-bottom,
+            map.get($tokens, alert-size-compact-button-stack-padding-bottom)
+        );
+    }
+
+    & .kbq-alert__close-button {
+        margin-top: var(
+            --kbq-alert-size-compact-close-button-margin-top,
+            map.get($tokens, alert-size-compact-close-button-margin-top)
+        );
+
+        margin-left: var(
+            --kbq-alert-size-compact-close-button-margin-left,
+            map.get($tokens, alert-size-compact-close-button-margin-left)
+        );
+    }
 }

package/core/locales/formatters.d.ts

@@ -17,6 +17,22 @@ export declare const enUSFormattersData: {
             fractionSeparator: string;
         };
     };
+    sizeUnits: {
+        defaultUnitSystem: string;
+        defaultPrecision: number;
+        unitSystems: {
+            SI: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+            IEC: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+        };
+    };
 };
 export declare const esLAFormattersData: {
     formatters: {
@@ -37,6 +53,22 @@ export declare const esLAFormattersData: {
             fractionSeparator: string;
         };
     };
+    sizeUnits: {
+        defaultUnitSystem: string;
+        defaultPrecision: number;
+        unitSystems: {
+            SI: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+            IEC: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+        };
+    };
 };
 export declare const faIRFormattersData: {
     formatters: {
@@ -58,6 +90,22 @@ export declare const faIRFormattersData: {
             fractionSeparator: string;
         };
     };
+    sizeUnits: {
+        defaultUnitSystem: string;
+        defaultPrecision: number;
+        unitSystems: {
+            SI: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+            IEC: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+        };
+    };
 };
 export declare const ptBRFormattersData: {
     formatters: {
@@ -78,6 +126,22 @@ export declare const ptBRFormattersData: {
             fractionSeparator: string;
         };
     };
+    sizeUnits: {
+        defaultUnitSystem: string;
+        defaultPrecision: number;
+        unitSystems: {
+            SI: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+            IEC: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+        };
+    };
 };
 export declare const ruRUFormattersData: {
     formatters: {
@@ -99,6 +163,22 @@ export declare const ruRUFormattersData: {
             startFormattingFrom: number;
         };
     };
+    sizeUnits: {
+        defaultUnitSystem: string;
+        defaultPrecision: number;
+        unitSystems: {
+            SI: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+            IEC: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+        };
+    };
 };
 export declare const zhCNFormattersData: {
     formatters: {
@@ -118,4 +198,20 @@ export declare const zhCNFormattersData: {
             fractionSeparator: string;
         };
     };
+    sizeUnits: {
+        defaultUnitSystem: string;
+        defaultPrecision: number;
+        unitSystems: {
+            SI: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+            IEC: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+        };
+    };
 };

package/core/locales/locale-service.d.ts

@@ -27,6 +27,22 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 fractionSeparator: string;
             };
         };
+        sizeUnits: {
+            defaultUnitSystem: string;
+            defaultPrecision: number;
+            unitSystems: {
+                SI: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+                IEC: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+            };
+        };
         select: {
             hiddenItemsText: string;
         };
@@ -76,6 +92,22 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 fractionSeparator: string;
             };
         };
+        sizeUnits: {
+            defaultUnitSystem: string;
+            defaultPrecision: number;
+            unitSystems: {
+                SI: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+                IEC: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+            };
+        };
         select: {
             hiddenItemsText: string;
         };
@@ -125,6 +157,22 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 fractionSeparator: string;
             };
         };
+        sizeUnits: {
+            defaultUnitSystem: string;
+            defaultPrecision: number;
+            unitSystems: {
+                SI: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+                IEC: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+            };
+        };
         select: {
             hiddenItemsText: string;
         };
@@ -174,6 +222,22 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 fractionSeparator: string;
             };
         };
+        sizeUnits: {
+            defaultUnitSystem: string;
+            defaultPrecision: number;
+            unitSystems: {
+                SI: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+                IEC: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+            };
+        };
         select: {
             hiddenItemsText: string;
         };
@@ -224,6 +288,22 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 startFormattingFrom: number;
             };
         };
+        sizeUnits: {
+            defaultUnitSystem: string;
+            defaultPrecision: number;
+            unitSystems: {
+                SI: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+                IEC: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+            };
+        };
         select: {
             hiddenItemsText: string;
         };
@@ -275,6 +355,22 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 fractionSeparator: string;
             };
         };
+        sizeUnits: {
+            defaultUnitSystem: string;
+            defaultPrecision: number;
+            unitSystems: {
+                SI: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+                IEC: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+            };
+        };
         select: {
             hiddenItemsText: string;
         };

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

@@ -33,12 +33,13 @@ export declare abstract class KbqPopUpTrigger<T> {
     protected overlayRef: OverlayRef | null;
     protected portal: ComponentPortal<T>;
     protected instance: any | null;
-    protected listeners: Map<string, EventListenerOrEventListenerObject>;
+    protected listeners: Map<string, EventListener>;
     protected closingActionsSubscription: Subscription;
     protected readonly availablePositions: {
         [key: string]: ConnectionPositionPair;
     };
     protected readonly destroyed: Subject<void>;
+    protected triggerName: string;
     protected constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction?: Directionality | undefined);
     abstract updateClassMap(newPlacement?: string): void;
     abstract updateData(): void;
@@ -63,6 +64,7 @@ export declare abstract class KbqPopUpTrigger<T> {
     protected getPriorityPlacementStrategy(value: string | string[]): ConnectionPositionPair[];
     protected getPrioritizedPositions(): ConnectionPositionPair[];
     protected clearListeners(): void;
+    private createListener;
     private addEventListener;
     private removeEventListener;
     private subscribeOnClosingActions;