@koobiq/components 16.0.0-beta.2 → 16.0.0-beta.5

package/form-field/_form-field-theme.scss

@@ -103,10 +103,10 @@
     $tokens: map.get($config, tokens);
 
     .kbq-form-field {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, form-field-font-label));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, form-field-font-text));
     }
 
-    .kbq-form-field__hint > .kbq-hint {
+    .kbq-form-field__hint > .kbq-hint .kbq-hint__text {
         @include kbq-typography-level-to-styles($config, map.get($tokens, form-field-hint-font-text));
     }
 }

package/input/input.scss

@@ -14,6 +14,8 @@ $tokens: meta.module-variables(tokens) !default;
     display: inline-block;
     box-sizing: border-box;
 
+    text-overflow: ellipsis;
+
     width: 100%;
     min-height: calc(
         var(--kbq-form-field-size-height, map.get($tokens, form-field-size-height)) -
@@ -25,7 +27,7 @@ $tokens: meta.module-variables(tokens) !default;
             var(--kbq-input-size-padding-vertical, map.get($tokens, input-size-padding-vertical)) -
             var(--kbq-form-field-size-border-width, map.get($tokens, form-field-size-border-width))
         )
-        var(--kbq-input-size-padding-horizontal, map.get($tokens, input-size-padding-horizontal));;
+        var(--kbq-input-size-padding-horizontal, map.get($tokens, input-size-padding-horizontal));
 }
 
 input.kbq-input[type="number"] {

package/link/_link-theme.scss

@@ -5,7 +5,7 @@
 
 
 @mixin kbq-link($foreground, $link, $tokens) {
-    display: inline-block;
+    display: inline;
 
     color: map.get($link, text);
     text-decoration: none;
@@ -69,8 +69,6 @@
     }
 
     &.kbq-link_pseudo {
-        display: inline;
-
         &.kbq-text-only,
         &.kbq-text-with-icon .kbq-link__text {
             border-bottom: none !important;

package/list/_list-theme.scss

@@ -4,35 +4,51 @@
 @use '../core/styles/typography/typography-utils' as *;
 
 
-@mixin kbq-list-theme($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
+@mixin kbq-list-item($state) {
+    background: map.get($state, container-background);
 
-    .kbq-list-item,
-    .kbq-list-option {
-        color: map.get($foreground, text);
+    .kbq-list-text {
+        color: map.get($state, text);
+    }
+
+    .kbq-icon {
+        color: map.get($state, icon);
+    }
+
+    .kbq-option-action .kbq-icon {
+        color: map.get($state, icon-button);
+    }
+
+    .kbq-list-option-caption {
+        color: map.get($state, caption);
     }
+}
+
+@mixin kbq-list-theme($theme) {
+    $list-item: map.get(map.get($theme, components), list-item);
 
     .kbq-list-option {
-        outline: none;
+        @include kbq-list-item(map.get($list-item, default));
 
-        &:hover {
-            background: map.get($background, overlay-hover);
+        &:hover:not(.kbq-disabled):not([disabled]) {
+            @include kbq-list-item(map.get($list-item, hover));
         }
 
         &.kbq-focused {
-            border-color: map.get(map.get($theme, states), focused-color);
+            border-color: map.get(map.get($list-item, focused), focus-outline);
         }
 
         &.kbq-selected {
-            background: map.get(map.get($theme, states), selected-color);
+            @include kbq-list-item(map.get($list-item, selected));
+
+            &:hover:not(.kbq-disabled):not([disabled]) {
+                @include kbq-list-item(map.get($list-item, selected-hover));
+            }
         }
 
         &.kbq-disabled,
         &[disabled] {
-            background: transparent;
-
-            color: map.get($foreground, text-disabled);
+            @include kbq-list-item(map.get($list-item, disabled));
         }
     }
 }
@@ -42,6 +58,10 @@
 
     .kbq-list-item,
     .kbq-list-option {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-item));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-text));
+    }
+
+    .kbq-list-option-caption {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-caption));
     }
 }

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

@@ -116,6 +116,10 @@ export declare class KbqListSelection extends KbqListSelectionMixinBase implemen
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqListSelection, [null, null, { attribute: "multiple"; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqListSelection, "kbq-list-selection", ["mcListSelection"], { "disabled": { "alias": "disabled"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "noUnselectLast": { "alias": "noUnselectLast"; "required": false; }; "horizontal": { "alias": "horizontal"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; }, { "onSelectAll": "onSelectAll"; "onCopy": "onCopy"; "selectionChange": "selectionChange"; }, ["options"], ["*"], false, never>;
 }
+export declare class KbqListOptionCaption {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqListOptionCaption, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqListOptionCaption, "[kbq-list-option-caption]", never, {}, {}, never, never, false, never>;
+}
 /**
  * Component for list-options of selection-list. Each list-option can automatically
  * generate a checkbox and can put current item into the selectionModel of selection-list
@@ -168,5 +172,5 @@ export declare class KbqListOption implements OnDestroy, OnInit, IFocusableOptio
     blur(): void;
     getHostElement(): HTMLElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqListOption, [null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqListOption, "kbq-list-option", ["mcListOption"], { "checkboxPosition": { "alias": "checkboxPosition"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, {}, ["actionButton", "tooltipTrigger", "dropdownTrigger"], ["[kbq-icon]", "*", "kbq-option-action"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqListOption, "kbq-list-option", ["kbqListOption"], { "checkboxPosition": { "alias": "checkboxPosition"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, {}, ["actionButton", "tooltipTrigger", "dropdownTrigger"], ["[kbq-icon]", "*", "[kbq-list-option-caption]", "kbq-option-action"], false, never>;
 }

package/list/list.module.d.ts

@@ -6,6 +6,6 @@ import * as i4 from "@angular/cdk/a11y";
 import * as i5 from "@koobiq/components/core";
 export declare class KbqListModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqListModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqListModule, [typeof i1.KbqList, typeof i2.KbqListSelection, typeof i1.KbqListItem, typeof i2.KbqListOption], [typeof i3.CommonModule, typeof i4.A11yModule, typeof i5.KbqPseudoCheckboxModule, typeof i5.KbqLineModule, typeof i5.KbqOptionModule], [typeof i1.KbqList, typeof i2.KbqListSelection, typeof i1.KbqListItem, typeof i2.KbqListOption, typeof i5.KbqOptionModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqListModule, [typeof i1.KbqList, typeof i2.KbqListSelection, typeof i1.KbqListItem, typeof i2.KbqListOption, typeof i2.KbqListOptionCaption], [typeof i3.CommonModule, typeof i4.A11yModule, typeof i5.KbqPseudoCheckboxModule, typeof i5.KbqLineModule, typeof i5.KbqOptionModule], [typeof i1.KbqList, typeof i2.KbqListSelection, typeof i1.KbqListItem, typeof i2.KbqListOption, typeof i2.KbqListOptionCaption, typeof i5.KbqOptionModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqListModule>;
 }

package/list/list.scss

@@ -1,7 +1,6 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use 'list-base';
 @use '../core/styles/common/list';
 
 @use '../core/styles/tokens';
@@ -20,18 +19,10 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-list-option {
     @include list.kbq-no-select;
 
-    @include list-base.kbq-list-item-base();
+    @include list.kbq-list-item-base();
 
-    &.kbq-progress:after {
-        top: -2px;
-        right: -2px;
-        bottom: -2px;
-        left: -2px;
-    }
-
-    & .kbq-pseudo-checkbox,
-    & .kbq-icon {
-        margin-right: var(--kbq-list-size-icon-right-margin, map.get($tokens, list-size-icon-right-margin));
+    &:not(.kbq-disabled):not([disabled]) {
+        cursor: pointer;
     }
 
     & .kbq-option-action {

package/loader-overlay/_loader-overlay-theme.scss

@@ -7,28 +7,60 @@
 @mixin kbq-loader-overlay-theme($theme) {
     $loader-overlay: map.get(map.get($theme, components), loader-overlay);
 
-    .kbq-loader-overlay {
-        background: map.get($loader-overlay, background);
-    }
+    .kbq-loader-overlay_filled {
+        $filled: map.get($loader-overlay, filled);
+
+        &.kbq-loader-overlay {
+            background: map.get($filled, background);
+        }
 
-    .kbq-loader-overlay-text {
-        color: map.get($loader-overlay, text);
+        & .kbq-loader-overlay-text {
+            color: map.get($filled, text);
+        }
+
+        & .kbq-loader-overlay-caption {
+            color: map.get($filled, caption);
+        }
     }
 
-    .kbq-loader-overlay-caption {
-        color: map.get($loader-overlay, caption);
+    .kbq-loader-overlay_transparent {
+        $transparent: map.get($loader-overlay, transparent);
+
+        &.kbq-loader-overlay {
+            background: map.get($transparent, background);
+        }
+
+        & .kbq-loader-overlay-text {
+            color: map.get($transparent, text);
+        }
+
+        & .kbq-loader-overlay-caption {
+            color: map.get($transparent, caption);
+        }
     }
 }
 
 @mixin kbq-loader-overlay-typography($config) {
     $tokens: map.get($config, tokens);
 
-    .kbq-loader-overlay-text {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-text));
+    .kbq-loader-overlay_big {
+        & .kbq-loader-overlay-text {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-big-text));
+        }
+
+        & .kbq-loader-overlay-caption {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-big-caption));
+        }
     }
 
-    .kbq-loader-overlay-caption {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-caption));
+    .kbq-loader-overlay_compact {
+        & .kbq-loader-overlay-text {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-compact-text));
+        }
+
+        & .kbq-loader-overlay-caption {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-compact-caption));
+        }
     }
 }
 

package/loader-overlay/loader-overlay.component.d.ts

@@ -15,20 +15,21 @@ export declare class KbqLoaderOverlayCaption {
 export declare class KbqLoaderOverlay implements OnInit, OnDestroy {
     private elementRef;
     private renderer;
-    private fixedTop;
     text: string;
     caption: string;
+    compact: boolean;
+    transparent: boolean;
     get isExternalIndicator(): boolean;
     get isExternalText(): boolean;
     get isExternalCaption(): boolean;
-    get isFixedTop(): boolean;
     get isEmpty(): boolean;
+    get spinnerSize(): string;
     externalIndicator: KbqLoaderOverlayIndicator | null;
     externalText: KbqLoaderOverlayText | null;
     externalCaption: KbqLoaderOverlayCaption | null;
-    constructor(elementRef: ElementRef, renderer: Renderer2, fixedTop: string | null);
+    constructor(elementRef: ElementRef, renderer: Renderer2);
     ngOnInit(): void;
     ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqLoaderOverlay, [null, null, { attribute: "fixed-top"; optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqLoaderOverlay, "kbq-loader-overlay", never, { "text": { "alias": "text"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; }, {}, ["externalIndicator", "externalText", "externalCaption"], ["[kbq-loader-overlay-indicator]", "[kbq-loader-overlay-text]", "[kbq-loader-overlay-caption]"], false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqLoaderOverlay, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqLoaderOverlay, "kbq-loader-overlay", never, { "text": { "alias": "text"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "transparent": { "alias": "transparent"; "required": false; }; }, {}, ["externalIndicator", "externalText", "externalCaption"], ["[kbq-loader-overlay-indicator]", "[kbq-loader-overlay-text]", "[kbq-loader-overlay-caption]"], false, never>;
 }

package/loader-overlay/loader-overlay.scss

@@ -10,6 +10,13 @@ $tokens: meta.module-variables(tokens) !default;
     position: relative;
 }
 
+.kbq-loader-overlay-text,
+.kbq-loader-overlay-caption {
+    max-width: 90%;
+
+    text-align: center;
+}
+
 .kbq-loader-overlay {
     position: absolute;
 
@@ -34,31 +41,55 @@ $tokens: meta.module-variables(tokens) !default;
         max-width: 80%;
     }
 
-    &.kbq-loader-overlay_fixed-top {
-        justify-content: unset;
-
-        & .kbq-loader-overlay__container {
-            margin-top: map.get($tokens, loader-overlay-size-fixed-top-padding);
+    &.kbq-loader-overlay_big {
+        padding-left: var(
+            --kbq-loader-overlay-size-big-overlay-padding-horizontal,
+            map.get($tokens, loader-overlay-size-big-overlay-padding-horizontal)
+        );
+
+        padding-right: var(
+            --kbq-loader-overlay-size-big-overlay-padding-horizontal,
+            map.get($tokens, loader-overlay-size-big-overlay-padding-horizontal)
+        );
+
+        & .kbq-progress-spinner {
+            margin-bottom: var(
+                --kbq-loader-overlay-size-big-loader-margin-bottom,
+                map.get($tokens, loader-overlay-size-big-loader-margin-bottom)
+            );
         }
-    }
 
-    &.kbq-loader-overlay_center:not(.kbq-loader-overlay_empty) .kbq-loader-overlay__container {
-        transform: translateY(map.get($tokens, loader-overlay-size-center-optical-compensation));
+        & .kbq-loader-overlay-text {
+            margin-bottom: var(
+                --kbq-loader-overlay-size-big-content-content-gap-vertical,
+                map.get($tokens, loader-overlay-size-big-content-content-gap-vertical)
+            );
+        }
     }
-}
-
-.kbq-loader-overlay-text {
-    margin-top: map.get($tokens, size-s);
 
-    max-width: map.get($tokens, loader-overlay-size-text-max-width);
-
-    text-align: center;
-}
-
-.kbq-loader-overlay-caption {
-    margin-top: map.get($tokens, size-3xs);
-
-    max-width: map.get($tokens, loader-overlay-size-text-max-width);
+    &.kbq-loader-overlay_compact {
+        padding-left: var(
+            --kbq-loader-overlay-size-compact-overlay-padding-horizontal,
+            map.get($tokens, loader-overlay-size-compact-overlay-padding-horizontal)
+        );
+
+        padding-right: var(
+            --kbq-loader-overlay-size-compact-overlay-padding-horizontal,
+            map.get($tokens, loader-overlay-size-compact-overlay-padding-horizontal)
+        );
+
+        & .kbq-progress-spinner {
+            margin-bottom: var(
+                --kbq-loader-overlay-size-compact-loader-margin-bottom,
+                map.get($tokens, loader-overlay-size-compact-loader-margin-bottom)
+            );
+        }
 
-    text-align: center;
+        & .kbq-loader-overlay-text {
+            margin-bottom: var(
+                --kbq-loader-overlay-size-compact-content-content-gap-vertical,
+                map.get($tokens, loader-overlay-size-compact-content-content-gap-vertical)
+            );
+        }
+    }
 }

package/modal/_modal-confirm.scss

@@ -8,7 +8,7 @@ $tokens: meta.module-variables(tokens) !default;
 
 .kbq-confirm {
     .kbq-modal-header {
-        display: none;
+
     }
 
     .kbq-modal-close {
@@ -16,38 +16,30 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .kbq-modal-body {
-        padding: var(--kbq-modal-confirm-size-padding, map.get($tokens, modal-confirm-size-padding));
-    }
+        padding-right: var(
+            --kbq-modal-size-content-padding-horizontal, map.get($tokens, modal-size-content-padding-horizontal)
+        );
 
-    // TODO
-    &-body-wrapper {
-        //.clearfix()
-        zoom: 1;
+        padding-left: var(
+            --kbq-modal-size-content-padding-horizontal, map.get($tokens, modal-size-content-padding-horizontal)
+        );
 
-        &:before,
-        &:after {
-            content: "";
-            display: table;
-        }
-
-        &:after {
-            clear: both;
-        }
+        padding-bottom: var(
+            --kbq-modal-size-content-padding-bottom, map.get($tokens, modal-size-content-padding-bottom)
+        );
     }
 
-    &-body {
-        .kbq-confirm-title {
-            display: block;
-            overflow: auto;
-        }
-    }
+    .kbq-confirm-footer {
+        display: flex;
 
-    .kbq-confirm-btns {
-        border-radius: var(--kbq-modal-footer-size-border-radius, map.get($tokens, modal-footer-size-border-radius));
-        text-align: right;
+        padding:
+            var(--kbq-modal-size-footer-padding-top, map.get($tokens, modal-size-footer-padding-top))
+            var(--kbq-modal-size-footer-padding-horizontal, map.get($tokens, modal-size-footer-padding-horizontalt))
+            var(--kbq-modal-size-footer-padding-bottom, map.get($tokens, modal-size-footer-padding-bottom))
+            var(--kbq-modal-size-footer-padding-horizontal, map.get($tokens, modal-size-footer-padding-horizontal));
 
-        button + button, button:only-child {
-            margin: 16px;
-        }
+        gap: var(
+            --kbq-modal-size-footer-content-gap-horizontal, map.get($tokens, modal-size-footer-content-gap-horizontal)
+        );
     }
 }

package/modal/_modal-theme.scss

@@ -11,9 +11,11 @@
     $background: map.get($theme, background);
 
     $modal: map.get(map.get($theme, components), modal);
-    $popup: map.get(map.get($theme, components), popup);
 
     .kbq-modal {
+        background: map.get($modal, container-background);
+        box-shadow: map.get($modal, container-box-shadow);
+
         .kbq-modal-content {
             // У модалки должен быть фон background. Чтобы поповеры и дропдауны было видно поверх модалки
             background-color: map.get($background, background);
@@ -26,9 +28,6 @@
         }
 
         .kbq-modal-header {
-            border-bottom-width: var(--kbq-modal-size-border-width, map.get($tokens, modal-size-border-width));
-            border-bottom-style: solid;
-            border-bottom-color: map.get($modal, header-border);
         }
 
         .kbq-modal-header.kbq-modal-body_top-overflow {
@@ -40,51 +39,22 @@
         }
 
         .kbq-modal-footer {
-            border-top-width: var(--kbq-modal-size-border-width, map.get($tokens, modal-size-border-width));
-            border-top-style: solid;
-            border-top-color: map.get($modal, footer-border);
-
-            background-color: map.get($popup, footer-background);
-        }
-
-        .kbq-modal-close {
-            border: var(--kbq-modal-size-border-width, map.get($tokens, modal-size-border-width)) solid transparent;
-
-            &:hover {
-                .kbq-button-overlay {
-                    background: map.get($background, overlay-hover);
-                }
-
-                .kbq-icon {
-                    color: inherit;
-                }
-            }
         }
     }
 
     .kbq-modal-mask {
         background-color: map.get($modal, background-mask);
     }
-
-    .kbq-confirm {
-        .kbq-confirm-btns {
-            border-top-width: var(--kbq-modal-size-border-width, map.get($tokens, modal-size-border-width));
-            border-top-style: solid;
-            border-top-color: map.get($modal, footer-border);
-
-            background-color: map.get($popup, footer-background);
-        }
-    }
 }
 
 @mixin kbq-modal-typography($config) {
     $tokens: map.get($config, tokens);
 
     .kbq-modal-title {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, modal-header-font-default));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, modal-font-header));
     }
 
     .kbq-modal-body {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, modal-body-font-default));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, modal-font-content));
     }
 }

package/modal/modal.component.d.ts

@@ -1,6 +1,6 @@
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { AfterViewInit, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, QueryList, Renderer2, SimpleChanges, TemplateRef, Type, ViewContainerRef } from '@angular/core';
-import { ThemePalette } from '@koobiq/components/core';
+import { KbqComponentColors } from '@koobiq/components/core';
 import { Observable } from 'rxjs';
 import { KbqModalControlService } from './modal-control.service';
 import { KbqModalRef } from './modal-ref.class';
@@ -16,7 +16,7 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     private modalControl;
     private changeDetector;
     private document;
-    themePalette: typeof ThemePalette;
+    componentColors: typeof KbqComponentColors;
     mcModalType: ModalType;
     mcComponent: Type<T>;
     mcContent: string | TemplateRef<{}> | Type<T>;
@@ -48,7 +48,7 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     mcAfterOpen: EventEmitter<void>;
     mcAfterClose: EventEmitter<R>;
     mcOkText: string;
-    mcOkType: string;
+    mcOkType: KbqComponentColors;
     mcRestoreFocus: boolean;
     get mcOkLoading(): boolean;
     set mcOkLoading(value: boolean);
@@ -63,8 +63,6 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     bodyContainer: ViewContainerRef;
     autoFocusedButtons: QueryList<ElementRef>;
     modalBody: ElementRef;
-    isTopOverflow: boolean;
-    isBottomOverflow: boolean;
     maskAnimationClassMap: object;
     modalAnimationClassMap: object;
     transformOrigin: string;
@@ -83,7 +81,6 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    checkOverflow(): void;
     open(): void;
     close(result?: R): void;
     destroy(result?: R): void;