@koobiq/components 17.0.0-rc.9 → 17.0.0

package/README.md

@@ -1,5 +1,4 @@
-Koobiq
-=======
+# Koobiq
 
 The sources for this package are in the main [Koobiq](#) repo.
 

package/alert/_alert-theme.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-alert-style($component, $type, $style-name) {
     $style: map.get($component, $type, $style-name);
 

package/alert/alert.component.d.ts

@@ -1,4 +1,5 @@
 import { AfterContentInit } from '@angular/core';
+import { KbqButton } from '@koobiq/components/button';
 import { KbqIcon, KbqIconItem } from '@koobiq/components/icon';
 import * as i0 from "@angular/core";
 export declare enum KbqAlertStyles {
@@ -27,6 +28,7 @@ export declare class KbqAlertControl {
 export declare class KbqAlert implements AfterContentInit {
     iconItem: KbqIconItem;
     icon: KbqIcon;
+    button: KbqButton;
     title: KbqAlertTitle;
     control: KbqAlertControl;
     closeButton: KbqAlertCloseButton;
@@ -38,5 +40,5 @@ export declare class KbqAlert implements AfterContentInit {
     get isColored(): boolean;
     ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAlert, 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>;
+    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", "button", "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

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-alert {
     display: flex;
 
@@ -25,17 +24,14 @@
 .kbq-alert.kbq-alert_normal {
     border-radius: kbq-css-variable(alert-size-normal-container-border-radius);
 
-    padding:
-        kbq-css-variable(alert-size-normal-container-padding-top)
+    padding: kbq-css-variable(alert-size-normal-container-padding-top)
         kbq-css-variable(alert-size-normal-container-padding-right)
         kbq-css-variable(alert-size-normal-container-padding-bottom)
         kbq-css-variable(alert-size-normal-container-padding-left);
 
     & .kbq-alert__icon {
-        margin:
-            kbq-css-variable(alert-size-normal-no-title-icon-margin-top)
-            kbq-css-variable(alert-size-normal-icon-margin-right)
-            kbq-css-variable(alert-size-normal-icon-margin-bottom)
+        margin: kbq-css-variable(alert-size-normal-no-title-icon-margin-top)
+            kbq-css-variable(alert-size-normal-icon-margin-right) kbq-css-variable(alert-size-normal-icon-margin-bottom)
             kbq-css-variable(alert-size-normal-icon-margin-left);
 
         &.kbq-alert__icon_title {
@@ -49,8 +45,7 @@
     }
 
     & .kbq-alert__content {
-        padding:
-            kbq-css-variable(alert-size-normal-content-padding-top)
+        padding: kbq-css-variable(alert-size-normal-content-padding-top)
             kbq-css-variable(alert-size-normal-content-padding-right)
             kbq-css-variable(alert-size-normal-content-padding-bottom)
             kbq-css-variable(alert-size-normal-content-padding-left);
@@ -63,6 +58,10 @@
     & .kbq-alert__button-stack {
         padding-top: kbq-css-variable(alert-size-normal-button-stack-padding-top);
         padding-bottom: kbq-css-variable(alert-size-normal-button-stack-padding-bottom);
+
+        &_has-button {
+            padding-top: 12px;
+        }
     }
 
     & .kbq-alert__close-button {
@@ -74,14 +73,12 @@
 .kbq-alert.kbq-alert_compact {
     border-radius: kbq-css-variable(alert-size-compact-container-border-radius);
 
-    padding:
-        kbq-css-variable(alert-size-compact-container-padding-top)
+    padding: kbq-css-variable(alert-size-compact-container-padding-top)
         kbq-css-variable(alert-size-compact-container-padding-right)
         kbq-css-variable(alert-size-compact-container-padding-bottom)
         kbq-css-variable(alert-size-compact-container-padding-left);
 
     & .kbq-alert__icon {
-
         margin-top: kbq-css-variable(alert-size-compact-no-title-icon-margin-top);
         margin-right: kbq-css-variable(alert-size-compact-icon-margin-right);
 
@@ -98,8 +95,7 @@
     }
 
     & .kbq-alert__content {
-        padding:
-            kbq-css-variable(alert-size-compact-content-padding-top)
+        padding: kbq-css-variable(alert-size-compact-content-padding-top)
             kbq-css-variable(alert-size-compact-content-padding-right)
             kbq-css-variable(alert-size-compact-content-padding-bottom)
             kbq-css-variable(alert-size-compact-content-padding-left);
@@ -112,6 +108,10 @@
     & .kbq-alert__button-stack {
         padding-top: kbq-css-variable(alert-size-compact-button-stack-padding-top);
         padding-bottom: kbq-css-variable(alert-size-compact-button-stack-padding-bottom);
+
+        &_has-button {
+            padding-top: 12px;
+        }
     }
 
     & .kbq-alert__close-button {

package/alert/public-api.d.ts

@@ -1,2 +1,2 @@
-export * from './alert.module';
 export * from './alert.component';
+export * from './alert.module';

package/autocomplete/_autocomplete-theme.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/theming/theming';
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-autocomplete-theme($theme) {
     $select-panel: map.get(map.get($theme, components), select-panel);
 

package/autocomplete/autocomplete.scss

@@ -3,14 +3,13 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-autocomplete-panel {
     visibility: hidden;
 
     position: relative;
 
     overflow: hidden auto;
-    -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile
+    -webkit-overflow-scrolling: touch; // for momentum scroll on mobile
 
     margin-top: -1px;
 
@@ -34,10 +33,8 @@
     }
 
     .kbq-autocomplete-panel-above & {
-        border-radius:
-            kbq-css-variable(autocomplete-size-panel-border-radius)
-            kbq-css-variable(autocomplete-size-panel-border-radius)
-            0 0;
+        border-radius: kbq-css-variable(autocomplete-size-panel-border-radius)
+            kbq-css-variable(autocomplete-size-panel-border-radius) 0 0;
     }
 
     // We need to offset horizontal dividers by their height, because

package/autocomplete/public-api.d.ts

@@ -1,4 +1,4 @@
+export * from './autocomplete-origin.directive';
+export * from './autocomplete-trigger.directive';
 export * from './autocomplete.component';
 export * from './autocomplete.module';
-export * from './autocomplete-trigger.directive';
-export * from './autocomplete-origin.directive';

package/badge/_badge-theme.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-badge-style($component, $type, $sub-type, $style-name) {
     $style: map.get($component, $type, $sub-type, $style-name);
 
@@ -22,7 +21,7 @@
     @if $type == filled {
         border: transparent;
     } @else {
-        border-color: map.get($component, border);
+        border-color: kbq-css-variable(badge-#{$type}-#{$sub-type}-#{$style-name}-border, map.get($style, border));
     }
 }
 

package/badge/badge.component.scss

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-badge {
     display: inline-flex;
     flex-direction: row;

package/badge/public-api.d.ts

@@ -1,2 +1,2 @@
-export * from './badge.module';
 export * from './badge.component';
+export * from './badge.module';

package/button/_button-base.scss

@@ -5,7 +5,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 %kbq-button-base {
     @include button.kbq-button-reset();
 

package/button/_button-theme.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin _icon($left-icon, $right-icon) {
     .kbq-icon {
         color: $left-icon;
@@ -45,7 +44,8 @@
     &.kbq-disabled {
         color: kbq-css-variable(#{$base-path}-states-disabled-foreground, map.get($style, states-disabled-foreground));
         background: kbq-css-variable(
-            #{$base-path}-states-disabled-background, map.get($style, states-disabled-background)
+            #{$base-path}-states-disabled-background,
+            map.get($style, states-disabled-background)
         );
 
         @include _icon(
@@ -100,7 +100,9 @@
         &.kbq-button_outline,
         &.kbq-button_transparent {
             &.cdk-keyboard-focused {
-                border-color: map.get(map.get($theme, states), focused-color);
+                $focused-color: map.get($theme, states, focused-color);
+                outline: 1px solid $focused-color;
+                border-color: $focused-color;
             }
         }
     }

package/button/button.component.d.ts

@@ -1,6 +1,6 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { ChangeDetectorRef, ElementRef, OnDestroy, Renderer2, QueryList, AfterContentInit } from '@angular/core';
-import { CanColor, CanDisable, CanColorCtor, HasTabIndexCtor, KbqTitleTextRef } from '@koobiq/components/core';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, OnDestroy, QueryList, Renderer2 } from '@angular/core';
+import { CanColor, CanColorCtor, CanDisable, HasTabIndexCtor, KbqTitleTextRef } from '@koobiq/components/core';
 import { KbqIcon } from '@koobiq/components/icon';
 import * as i0 from "@angular/core";
 export declare enum KbqButtonStyles {

package/button/button.scss

@@ -6,7 +6,6 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-button {

package/button/public-api.d.ts

@@ -1,2 +1,2 @@
-export * from './button.module';
 export * from './button.component';
+export * from './button.module';

package/button-toggle/_button-toggle-theme.scss

@@ -5,7 +5,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-button-toggle-state($component, $state-name) {
     $state: map.get($component, $state-name);
 
@@ -23,7 +22,8 @@
 
     .kbq-button-toggle-group {
         background: kbq-css-variable(
-            button-toggle-container-background, map.get($button-toggle, container, background)
+            button-toggle-container-background,
+            map.get($button-toggle, container, background)
         );
 
         .kbq-button-toggle {
@@ -74,4 +74,3 @@
         @include kbq-typography-css-variables(button-toggle, item);
     }
 }
-

package/button-toggle/button-toggle.scss

@@ -6,7 +6,6 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-button-toggle-group {
@@ -19,8 +18,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     border-radius: kbq-css-variable(button-toggle-size-container-border-radius);
 
-    padding:
-        kbq-css-variable(button-toggle-size-container-padding-vertical)
+    padding: kbq-css-variable(button-toggle-size-container-padding-vertical)
         kbq-css-variable(button-toggle-size-container-padding-horizontal);
 
     .kbq-button-toggle {
@@ -41,13 +39,11 @@ $tokens: meta.module-variables(tokens) !default;
         > .kbq-button-icon {
             border-radius: kbq-css-variable(button-toggle-size-item-border-radius);
 
-            padding:
-                calc(var(--kbq-button-toggle-size-item-padding-vertical, $padding-vertical) - $outline-width)
+            padding: calc(var(--kbq-button-toggle-size-item-padding-vertical, $padding-vertical) - $outline-width)
                 calc(var(--kbq-button-toggle-size-item-padding-horizontal, $padding-horizontal) - $outline-width);
 
             & .kbq-button-wrapper {
                 width: 100%;
-
             }
 
             .kbq-button-toggle-wrapper {
@@ -77,7 +73,6 @@ $tokens: meta.module-variables(tokens) !default;
     }
 }
 
-/* stylelint-disable no-descending-specificity */
 .kbq-button-toggle_vertical {
     flex-direction: column;
 
@@ -92,5 +87,3 @@ $tokens: meta.module-variables(tokens) !default;
         }
     }
 }
-
-/* stylelint-enable no-descending-specificity */

package/button-toggle/public-api.d.ts

@@ -1,2 +1,2 @@
-export * from './button-toggle.module';
 export * from './button-toggle.component';
+export * from './button-toggle.module';

package/card/_card-theme.scss

@@ -2,7 +2,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-card-style($component, $style-name) {
     $style: map.get($component, $style-name);
 

package/card/card.component.d.ts

@@ -1,5 +1,5 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { ElementRef, OnDestroy, EventEmitter } from '@angular/core';
+import { ElementRef, EventEmitter, OnDestroy } from '@angular/core';
 import { CanColorCtor } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 /** @docs-private */

package/card/card.component.scss

@@ -5,7 +5,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-card {
     position: relative;
     box-sizing: border-box;
@@ -23,7 +22,7 @@
         width: kbq-css-variable(card-size-vertical-line);
         style: solid;
         color: transparent;
-    };
+    }
 
     & .kbq-card__overlay {
         @include layout.kbq-fill;

package/card/public-api.d.ts

@@ -1,2 +1,2 @@
-export * from './card.module';
 export * from './card.component';
+export * from './card.module';

package/checkbox/_checkbox-theme.scss

@@ -4,8 +4,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
-/* stylelint-disable no-descending-specificity */
 @mixin kbq-checkbox-color($component, $style-name) {
     $style: map.get($component, $style-name);
     $base: checkbox-#{$style-name};
@@ -14,19 +12,17 @@
         border-color: kbq-css-variable(#{$base}-default-border, map.get($style, default, border));
 
         background-color: kbq-css-variable(#{$base}-default-background, map.get($style, default, background));
-    }
-
-    .kbq-checkbox-label {
-        color: kbq-css-variable(#{$base}-default-text, map.get($style, default, text));
-    }
 
-    .kbq-checkbox__frame {
         & .kbq-checkbox-checkmark,
         & .kbq-checkbox-mixedmark {
             color: kbq-css-variable(#{$base}-default-color, map.get($style, default, color));
         }
     }
 
+    .kbq-checkbox-label {
+        color: kbq-css-variable(#{$base}-default-text, map.get($style, default, text));
+    }
+
     & .kbq-hint .kbq-hint__text {
         color: kbq-css-variable(#{$base}-default-caption, map.get($style, default, caption));
     }
@@ -57,7 +53,9 @@
                 border-color: kbq-css-variable(#{$base}-hover-border, map.get($style, checked-hover, border));
 
                 background-color: kbq-css-variable(
-                    #{$base}-hover-background, map.get($style, checked-hover, background));
+                    #{$base}-hover-background,
+                    map.get($style, checked-hover, background)
+                );
             }
         }
 
@@ -65,7 +63,9 @@
             + .kbq-checkbox__frame {
                 border-color: kbq-css-variable(#{$base}-focused-border, map.get($style, checked-focused, border));
                 background-color: kbq-css-variable(
-                    #{$base}-focused-background, map.get($style, checked-focused, background));
+                    #{$base}-focused-background,
+                    map.get($style, checked-focused, background)
+                );
                 outline: kbq-css-variable(#{$base}-focused-outline, map.get($style, checked-focused, outline));
             }
         }
@@ -99,7 +99,6 @@
         }
     }
 }
-/* stylelint-enable no-descending-specificity */
 
 @mixin kbq-checkbox-theme($theme) {
     $checkbox: map.get(map.get($theme, components), checkbox);

package/checkbox/checkbox.scss

@@ -7,10 +7,8 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
-
 .kbq-checkbox-checkmark,
 .kbq-checkbox-mixedmark {
     display: none;
@@ -51,10 +49,10 @@ $tokens: meta.module-variables(tokens) !default;
 
     padding-left: calc(
         var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width)) +
-        var(
-            --kbq-checkbox-size-normal-horizontal-content-padding,
-            map.get($tokens, checkbox-size-normal-horizontal-content-padding)
-        )
+            var(
+                --kbq-checkbox-size-normal-horizontal-content-padding,
+                map.get($tokens, checkbox-size-normal-horizontal-content-padding)
+            )
     );
 
     vertical-align: top;
@@ -112,13 +110,12 @@ $tokens: meta.module-variables(tokens) !default;
 
 .kbq-checkbox.kbq-checkbox_big {
     & .kbq-checkbox__layout {
-
         padding-left: calc(
             var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width)) +
-            var(
-                --kbq-checkbox-size-normal-horizontal-content-padding,
-                map.get($tokens, checkbox-size-normal-horizontal-content-padding)
-            )
+                var(
+                    --kbq-checkbox-size-normal-horizontal-content-padding,
+                    map.get($tokens, checkbox-size-normal-horizontal-content-padding)
+                )
         );
     }
 
@@ -154,18 +151,15 @@ $tokens: meta.module-variables(tokens) !default;
     }
 }
 
-/* stylelint-disable no-descending-specificity */
 .kbq-checkbox_label-before {
     .kbq-checkbox__layout {
-
         padding-left: 0;
         padding-right: calc(
-            var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width))
-            +
-            var(
-                --kbq-checkbox-size-normal-horizontal-content-padding,
-                map.get($tokens, checkbox-size-normal-horizontal-content-padding)
-            )
+            var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width)) +
+                var(
+                    --kbq-checkbox-size-normal-horizontal-content-padding,
+                    map.get($tokens, checkbox-size-normal-horizontal-content-padding)
+                )
         );
     }
 

package/code-block/README.md

@@ -2,32 +2,35 @@
 
 ## API
 
-| Property               | Description                                                                                                                                                                              | Type                  | Default |
-|------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------|---------|
-| kbqPlacement            | Место для показа относительно элемента, к которому он привязан. Возможные значения: top, bottom, left, right                                                                             | string                | bottom  |
-| kbqTrigger              | Триггер для показа Возможные значения: hover, manual, click, focus                                                                                                                       | string                | hover   |
-| kbqVisible              | Ручное управление показом, используется только при kbqTrigger="manual"                                                                                                             | boolean               | false   |
-| kbqPopoverHeader        | Содержимое шапки Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости.      | string | ng-template  | –       |
-| kbqPopoverContent       | Содержимое компонента Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости. | string | ng-template  | –       |
-| kbqPopoverFooter        | Содержимое подвала Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости.    | string | ng-template  | –       |
-| kbqPopoverDisabled      | Флаг для запрета показа                                                                                                                                                                  | boolean               | false   |
-| kbqPopoverClass         | Добавление своих классов                                                                                                                                                                 | string | string[]     | –       |
-| kbqVisibleChange        | Callback на изменение видимости компонента                                                                                                                                               | EventEmitter<boolean> | –       |
+| Property           | Description                                                                                                                                                                           | Type                  | Default     |     |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | --- |
+| kbqPlacement       | Место для показа относительно элемента, к которому он привязан. Возможные значения: top, bottom, left, right                                                                          | string                | bottom      |     |
+| kbqTrigger         | Триггер для показа Возможные значения: hover, manual, click, focus                                                                                                                    | string                | hover       |     |
+| kbqVisible         | Ручное управление показом, используется только при kbqTrigger="manual"                                                                                                                | boolean               | false       |     |
+| kbqPopoverHeader   | Содержимое шапки Обрати внимание: если используешь строку, то используй аккуратно, желательно предварительно сделать escape строки, чтобы избежать потенциальной XSS уязвимости.      | string                | ng-template | –   |
+| kbqPopoverContent  | Содержимое компонента Обрати внимание: если используешь строку, то используй аккуратно, желательно предварительно сделать escape строки, чтобы избежать потенциальной XSS уязвимости. | string                | ng-template | –   |
+| kbqPopoverFooter   | Содержимое подвала Обрати внимание: если используешь строку, то используй аккуратно, желательно предварительно сделать escape строки, чтобы избежать потенциальной XSS уязвимости.    | string                | ng-template | –   |
+| kbqPopoverDisabled | Флаг для запрета показа                                                                                                                                                               | boolean               | false       |     |
+| kbqPopoverClass    | Добавление своих классов                                                                                                                                                              | string                | string[]    | –   |
+| kbqVisibleChange   | Callback на изменение видимости компонента                                                                                                                                            | EventEmitter<boolean> | –           |     |
 
 ## Example
 
 <!-- cspell:ignore Э́йяфьядлайё̀кюдль, Эйяфьядлайёкюдль -->
+
 ```html
 <ng-template #customContent>
-    Э́йяфьядлайё̀кюдль — шестой по величине ледник Исландии. Расположен на юге Исландии в 125 км к востоку от Рейкьявика. Под этим ледником находится одноимённый вулкан конической формы.
+    Э́йяфьядлайё̀кюдль — шестой по величине ледник Исландии. Расположен на юге Исландии в 125 км к востоку от Рейкьявика.
+    Под этим ледником находится одноимённый вулкан конической формы.
 </ng-template>
- 
+
 <button
     kbqPopover
     [kbqTrigger]="'hover'"
     [kbqPlacement]="'top'"
     [kbqPopoverHeader]="'Это header'"
-    [kbqPopoverContent]="customContent">
+    [kbqPopoverContent]="customContent"
+>
     Найти Эйяфьядлайёкюдль
 </button>
 ```