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

package/risk-level/risk-level.component.scss

@@ -0,0 +1,26 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
+.kbq-risk-level {
+    box-sizing: border-box;
+
+    display: inline-flex;
+    text-align: center;
+
+    border-style: solid;
+
+    padding:
+        var(--kbq-risk-level-size-padding-vertical, map.get($tokens, risk-level-size-padding-vertical))
+        var(--kbq-risk-level-size-padding-horizontal, map.get($tokens, risk-level-size-padding-horizontal));
+
+    border: {
+        width: var(--kbq-risk-level-size-border-width, map.get($tokens, risk-level-size-border-width));
+        radius: var(--kbq-risk-level-size-border-radius, map.get($tokens, risk-level-size-border-radius));
+    }
+}

package/risk-level/risk-level.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./risk-level.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/cdk/a11y";
+import * as i4 from "@angular/cdk/platform";
+export declare class KbqRiskLevelModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqRiskLevelModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqRiskLevelModule, [typeof i1.KbqRiskLevel], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.KbqRiskLevel]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqRiskLevelModule>;
+}

package/select/_select-theme.scss

@@ -26,11 +26,19 @@
     }
 
     .kbq-select__placeholder {
+        text-overflow: ellipsis;
+
         color: map.get($foreground, text-disabled);
     }
 
     .kbq-select__panel {
         @include popup-params($theme);
+
+        & .kbq-select__footer {
+            $popup: map.get(map.get($theme, components), popup);
+
+            border-color: map.get($popup, border);
+        }
     }
 
     .kbq-select__search-container {

package/select/select.scss

@@ -1,7 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/common/vendor-prefixes';
+@use '../core/styles/common/select' as *;
 
 @use '../core/styles/tokens';
 
@@ -9,199 +9,22 @@
 $tokens: meta.module-variables(tokens) !default;
 
 
-.kbq-select__matcher {
-    display: flex;
-    align-items: center;
-
-    width: 100%;
-
-    overflow: hidden;
-
-    white-space: nowrap;
-
-    & > span {
-        flex: 1;
-        overflow: hidden;
-    }
-}
-
-.kbq-select__match-container {
-    width: 100%;
-
-    text-overflow: ellipsis;
-    overflow: hidden;
-
-    & .kbq-select__match-hidden-text {
-        flex: 0 0 70px;
-        align-self: center;
-        padding: 0 8px;
-
-        text-align: right;
-    }
-}
-
 .kbq-select {
-    box-sizing: border-box;
-
-    display: inline-block;
-
-    width: 100%;
-
-    outline: none;
-
-    & .kbq-select__trigger {
-        display: flex;
-        box-sizing: border-box;
-        position: relative;
-
-        height: calc(
-            var(--kbq-form-field-size-height, map.get($tokens, form-field-size-height)) -
-            (var(--kbq-form-field-size-border-width, map.get($tokens, form-field-size-border-width)) * 2)
-        );
-
-        cursor: pointer;
-
-        & .kbq-select__matcher {
-            padding-left: calc(
-                var(--kbq-select-size-left-padding, #{map.get($tokens, select-size-left-padding)}) -
-                var(--kbq-form-field-size-border-width, #{map.get($tokens, form-field-size-border-width)})
-            );
-            padding-right: calc(
-                var(--kbq-select-size-right-padding, #{map.get($tokens, select-size-right-padding)}) -
-                var(--kbq-form-field-size-border-width, #{map.get($tokens, form-field-size-border-width)})
-            );
-        }
-
-        &.kbq-select__trigger_multiple {
-            .kbq-select__matcher {
-                .kbq-select__match-container {
-                    display: flex;
-                }
-
-                $select-size-left-padding-multiple: map.get($tokens, select-size-left-padding-multiple);
-                $form-field-size-border-width: map.get($tokens, form-field-size-border-width);
-
-                padding-left: calc(
-                    var(--kbq-select-size-left-padding-multiple, #{$select-size-left-padding-multiple}) -
-                    var(--kbq-form-field-size-border-width, #{$form-field-size-border-width})
-                );
-
-                & .kbq-tag.kbq-disabled .kbq-tag__text {
-                    margin-right: 7px;
-                }
-            }
-        }
-    }
-
-    &.kbq-disabled {
-        & .kbq-select__trigger {
-            @include vendor-prefixes.user-select(none);
-
-            cursor: default;
-        }
-    }
-}
-
-.kbq-select__no-options-message {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    box-sizing: border-box;
-
-    position: relative;
-
-    max-width: 100%;
-    height: var(--kbq-option-size-height, map.get($tokens, option-size-height));
-
-    cursor: default;
-    outline: none;
-
-    padding-left: var(--kbq-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
-    padding-right: var(--kbq-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
-
-    border: var(--kbq-option-size-border-width, map.get($tokens, option-size-border-width)) solid transparent;
-}
-
-.kbq-select__match-list {
-    display: flex;
-    flex-wrap: wrap;
-    overflow: hidden;
-
-    max-height: calc(
-        var(--kbq-form-field-size-height, map.get($tokens, form-field-size-height)) - 4px
-    );
-
-    height: calc(
-        var(--kbq-form-field-size-height, map.get($tokens, form-field-size-height)) - 4px
-    );
-
-    & .kbq-tag {
-        margin-right: 4px;
-    }
-}
-
-.kbq-select__arrow-wrapper {
-    display: flex;
-    align-self: center;
-
-    // When used in a box or standard appearance form-field the arrow should be shifted up 50%.
-    .kbq-form-field-appearance-fill &,
-    .kbq-form-field-appearance-standard & {
-        transform: translateY(-50%);
-    }
-
-    // When used in a outline form-field the arrow should be shifted up 25%.
-    .kbq-form-field-appearance-outline & {
-        transform: translateY(-25%);
-    }
+    @extend %kbq-select-base;
 }
 
 .kbq-select__panel {
-    min-width: 100%; // prevents some animation twitching and test inconsistencies in IE11
-    max-width: var(--kbq-select-panel-size-max-width, map.get($tokens, select-panel-size-max-width));
-
-    overflow: hidden;
-
-    border: {
-        width: var(--kbq-select-panel-size-border-width, map.get($tokens, select-panel-size-border-width));
-        style: solid;
-    }
-
-    border-bottom-left-radius: var(
-        --kbq-select-panel-size-border-radius, map.get($tokens, select-panel-size-border-radius)
-    );
-    border-bottom-right-radius: var(
-        --kbq-select-panel-size-border-radius, map.get($tokens, select-panel-size-border-radius)
-    );
-
-    // Override optgroup and option to scale based on font-size of the trigger.
-    .kbq-optgroup-label,
-    .kbq-option {
-        font-size: inherit;
-        line-height: var(--kbq-option-size-height, map.get($tokens, option-size-height));
-        height: var(--kbq-option-size-height, map.get($tokens, option-size-height));
-    }
+    @extend %kbq-select-panel;
 
     & .kbq-select__footer {
-        display: flex;
-        align-items: center;
-        box-sizing: border-box;
-        padding: map.get($tokens, size-xxs) map.get($tokens, size-m);
-        border-top-width: 1px;
-        border-top-style: solid;
-        min-height: var(
-            --kbq-list-size-footer-min-height,
-            map.get($tokens, list-size-footer-min-height)
-        );
+        @extend %kbq-select-footer;
     }
 }
 
 .kbq-select__content {
-    max-height: var(--kbq-select-panel-size-max-height, map.get($tokens, select-panel-size-max-height));
-    padding: var(--kbq-select-panel-size-vertical-padding, map.get($tokens, select-panel-size-vertical-padding)) 0;
-    overflow: hidden auto;
+    @extend %kbq-select-content;
 
-    & .cdk-virtual-scroll-viewport {
+    &:not(:has(> .kbq-select__no-options-message)) .cdk-virtual-scroll-viewport {
         max-height: calc(
             var(--kbq-select-panel-size-max-height, map.get($tokens, select-panel-size-max-height))
         );
@@ -213,10 +36,3 @@ $tokens: meta.module-variables(tokens) !default;
         cursor: pointer;
     }
 }
-
-.kbq-select__search-container {
-    border-bottom: {
-        width: 1px;
-        style: solid;
-    }
-}

package/sidepanel/_sidepanel-theme.scss

@@ -5,63 +5,28 @@
 
 
 @mixin kbq-sidepanel-theme($theme) {
-    $background: map.get($theme, background);
-
     $sidepanel: map.get(map.get($theme, components), sidepanel);
-    $popup: map.get(map.get($theme, components), popup);
 
     .kbq-sidepanel-content {
-        background-color: map.get($background, background);
+        background-color: map.get($sidepanel, background);
     }
 
     .kbq-sidepanel-container_shadowed {
-        &.kbq-sidepanel-container_right {
-            .kbq-sidepanel-content {
-                box-shadow: 0 0 0 1px map.get($sidepanel, border), -6px 0 12px 0 rgba(0, 0, 0, 0.24);
-            }
-        }
-
-        &.kbq-sidepanel-container_left {
-            .kbq-sidepanel-content {
-                box-shadow: 0 0 0 1px map.get($sidepanel, border), 6px 0 12px 0 rgba(0, 0, 0, 0.24);
-            }
-        }
-
-        &.kbq-sidepanel-container_bottom {
-            .kbq-sidepanel-content {
-                box-shadow: 0 0 0 1px map.get($sidepanel, border), 0 -6px 12px 0 rgba(0, 0, 0, 0.24);
-            }
-        }
-
-        &.kbq-sidepanel-container_top {
-            .kbq-sidepanel-content {
-                box-shadow: 0 0 0 1px map.get($sidepanel, border), 0 6px 12px 0 rgba(0, 0, 0, 0.24);
-            }
+        .kbq-sidepanel-content {
+            box-shadow: map.get($sidepanel, box-shadow);
         }
     }
-
-    .kbq-sidepanel-header {
-        border-bottom: 1px solid map.get($sidepanel, header-border);
-    }
-
-    .kbq-sidepanel-footer {
-        border-top: 1px solid map.get($sidepanel, footer-border);
-        background-color: map.get($popup, footer-background);
-    }
 }
 
 @mixin kbq-sidepanel-typography($config) {
     $tokens: map.get($config, tokens);
 
     .kbq-sidepanel-title {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, sidepanel-header-font-default));
-    }
-
-    .kbq-sidepanel-container {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, sidepanel-font-default));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, sidepanel-font-header));
     }
 
+    .kbq-sidepanel-container,
     .kbq-sidepanel-footer {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, sidepanel-footer-font-default));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, sidepanel-font-content));
     }
 }

package/sidepanel/sidepanel-directives.d.ts

@@ -1,5 +1,4 @@
 import { ElementRef, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { ThemePalette } from '@koobiq/components/core';
 import { KbqSidepanelRef } from './sidepanel-ref';
 import { KbqSidepanelService } from './sidepanel.service';
 import * as i0 from "@angular/core";
@@ -22,7 +21,6 @@ export declare class KbqSidepanelClose implements OnInit, OnChanges {
  * Header of a sidepanel.
  */
 export declare class KbqSidepanelHeader {
-    themePalette: typeof ThemePalette;
     closeable: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidepanelHeader, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqSidepanelHeader, "kbq-sidepanel-header", never, { "closeable": { "alias": "closeable"; "required": false; }; }, {}, never, ["*"], false, never>;

package/sidepanel/sidepanel.scss

@@ -39,18 +39,18 @@ $tokens: meta.module-variables(tokens) !default;
         top: 0;
 
         &.kbq-sidepanel_small {
-            width: var(--kbq-sidepanel-size-small, map.get($tokens, sidepanel-size-small));
-            max-width: var(--kbq-sidepanel-size-small, map.get($tokens, sidepanel-size-small));
+            width: var(--kbq-sidepanel-size-small-width, map.get($tokens, sidepanel-size-small-width));
+            max-width: var(--kbq-sidepanel-size-small-width, map.get($tokens, sidepanel-size-small-width));
         }
 
         &.kbq-sidepanel_medium {
-            width: var(--kbq-sidepanel-size-medium, map.get($tokens, sidepanel-size-medium));
-            max-width: var(--kbq-sidepanel-size-medium, map.get($tokens, sidepanel-size-medium));
+            width: var(--kbq-sidepanel-size-medium-width, map.get($tokens, sidepanel-size-medium-width));
+            max-width: var(--kbq-sidepanel-size-medium-width, map.get($tokens, sidepanel-size-medium-width));
         }
 
         &.kbq-sidepanel_large {
-            width: var(--kbq-sidepanel-size-large, map.get($tokens, sidepanel-size-large));
-            max-width: var(--kbq-sidepanel-size-large, map.get($tokens, sidepanel-size-large));
+            width: var(--kbq-sidepanel-size-large-width, map.get($tokens, sidepanel-size-large-width));
+            max-width: var(--kbq-sidepanel-size-large-width, map.get($tokens, sidepanel-size-large-width));
         }
 
         .kbq-sidepanel-indent {
@@ -107,15 +107,6 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-sidepanel-indent {
     display: flex;
     flex: 0 0 auto;
-
-    .kbq-sidepanel-close {
-        width: 100%;
-        height: 100%;
-
-        @include common.kbq-button-reset();
-        background: transparent;
-        padding: 0;
-    }
 }
 /* stylelint-enable */
 
@@ -136,20 +127,15 @@ $tokens: meta.module-variables(tokens) !default;
     flex-flow: row nowrap;
     flex: 0 0 auto;
 
-    height: var(--kbq-sidepanel-header-size-height, map.get($tokens, sidepanel-header-size-height));
+    padding:
+        var(--kbq-sidepanel-size-header-padding-vertical, map.get($tokens, sidepanel-size-header-padding-vertical))
+        var(--kbq-sidepanel-size-header-padding-right, map.get($tokens, sidepanel-size-header-padding-right))
+        var(--kbq-sidepanel-size-header-padding-vertical, map.get($tokens, sidepanel-size-header-padding-vertical))
+        var(--kbq-sidepanel-size-header-padding-left, map.get($tokens, sidepanel-size-header-padding-left));
 
     .kbq-sidepanel-close {
-        @include common.kbq-button-reset();
-
-        margin-right: 2px;
-
-        height: calc(
-            var(--kbq-sidepanel-header-size-height, map.get($tokens, sidepanel-header-size-height)) -
-            (var(--kbq-size-border-width, map.get($tokens, size-border-width) * 2))
-        );
-        width: calc(
-            var(--kbq-sidepanel-header-size-height, map.get($tokens, sidepanel-header-size-height)) -
-            (var(--kbq-size-border-width, map.get($tokens, size-border-width) * 2))
+        margin-left: var(
+            --kbq-sidepanel-size-close-button-margin-left, map.get($tokens, sidepanel-size-close-button-margin-left)
         );
     }
 }
@@ -158,8 +144,6 @@ $tokens: meta.module-variables(tokens) !default;
     flex: 1;
 
     @include common.kbq-truncate-line();
-
-    padding: var(--kbq-sidepanel-header-size-padding, map.get($tokens, sidepanel-header-size-padding));
 }
 
 .kbq-sidepanel-body {
@@ -168,6 +152,18 @@ $tokens: meta.module-variables(tokens) !default;
     flex: 1;
     flex-direction: column;
     min-height: 0;
+
+    padding-right: var(
+        --kbq-sidepanel-size-content-padding-horizontal, map.get($tokens, sidepanel-size-content-padding-horizontal)
+    );
+
+    padding-left: var(
+        --kbq-sidepanel-size-content-padding-horizontal, map.get($tokens, sidepanel-size-content-padding-horizontal)
+    );
+
+    padding-bottom: var(
+        --kbq-sidepanel-size-content-padding-bottom, map.get($tokens, sidepanel-size-content-padding-bottom)
+    );
 }
 
 .kbq-sidepanel-footer {
@@ -178,9 +174,10 @@ $tokens: meta.module-variables(tokens) !default;
     flex-flow: row nowrap;
     flex: 0 0 auto;
 
-    height: var(--kbq-sidepanel-footer-size-height, map.get($tokens, sidepanel-footer-size-height));
-
-    padding: var(--kbq-sidepanel-footer-size-padding, map.get($tokens, sidepanel-footer-size-padding));
+    padding:
+        var(--kbq-sidepanel-size-footer-padding-top, map.get($tokens, sidepanel-size-footer-padding-top))
+        var(--kbq-sidepanel-size-footer-padding-horizontal, map.get($tokens, sidepanel-size-footer-padding-horizontal))
+        var(--kbq-sidepanel-size-footer-padding-bottom, map.get($tokens, sidepanel-size-footer-padding-bottom));
 
     .kbq-sidepanel-actions {
         display: flex;
@@ -195,9 +192,10 @@ $tokens: meta.module-variables(tokens) !default;
         &[align="right"] {
             justify-content: flex-end;
         }
-    }
 
-    button + button {
-        margin-left: 16px;
+        gap: var(
+            --kbq-sidepanel-size-footer-content-gap-horizontal,
+            map.get($tokens, sidepanel-size-footer-content-gap-horizontal)
+        );
     }
 }