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

package/autocomplete/autocomplete.scss

@@ -6,9 +6,6 @@
 
 $tokens: meta.module-variables(tokens) !default;
 
-.kbq-autocomplete-trigger {
-    text-overflow: ellipsis;
-}
 
 .kbq-autocomplete-panel {
     visibility: hidden;

package/button/_button-theme.scss

@@ -44,12 +44,14 @@
     }
 }
 
-@mixin kbq-outline-button($params) {
+@mixin kbq-outline-button($params, $include-icons: true) {
     border-color: map.get($params, border);
     color: map.get($params, foreground);
     background: map.get($params, background);
 
-    @include _icon(map.get($params, left-icon), map.get($params, right-icon));
+    @if $include-icons {
+        @include _icon(map.get($params, left-icon), map.get($params, right-icon));
+    }
 
     &:hover:not([disabled]),
     &.kbq-hover:not([disabled]) {
@@ -130,13 +132,6 @@
 
                 @include kbq-outline-button($outline-theme-fade-on);
             }
-
-            &.kbq-contrast-fade {
-                $outline-contrast-fade-on: map.get(map.get($button, outline), contrast-fade-on);
-
-                @include kbq-outline-button($outline-contrast-fade-on);
-
-            }
         }
 
         &.kbq-button_transparent {
@@ -161,6 +156,22 @@
             }
         }
     }
+
+    .kbq-button_outline {
+        $outline-contrast-fade-on: map.get(map.get($button, outline), contrast-fade-on);
+
+        &.kbq-button {
+            &.kbq-contrast-fade {
+                @include kbq-outline-button($outline-contrast-fade-on);
+            }
+        }
+
+        &.kbq-button-icon {
+            &.kbq-contrast-fade {
+                @include kbq-outline-button($outline-contrast-fade-on, $include-icons: false);
+            }
+        }
+    }
 }
 
 @mixin kbq-button-typography($config) {

package/button/button.scss

@@ -11,13 +11,16 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-button {
     @extend %kbq-button-base;
 
+    // base padding + compensation (4px) - border-width (2px)
     padding-left: calc(
         var(--kbq-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding)) +
-        4px
+        4px -
+        var(--kbq-button-size-border-width, map.get($tokens, button-size-border-width))
     );
     padding-right: calc(
         var(--kbq-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding)) +
-        4px
+        4px -
+        var(--kbq-button-size-border-width, map.get($tokens, button-size-border-width))
     );
 
     &.kbq-button-icon_left {

package/core/common-behaviors/color.d.ts

@@ -1,7 +1,7 @@
 import { ElementRef } from '@angular/core';
 import { AbstractConstructor, Constructor } from './constructor';
 export interface CanColor {
-    color: KbqComponentColors | ThemePalette;
+    color: KbqComponentColors | ThemePalette | string;
 }
 /** @docs-private */
 export type CanColorCtor = Constructor<CanColor> & AbstractConstructor<CanColor>;

package/core/forms/_forms-theme.scss

@@ -25,10 +25,10 @@
     $tokens: map.get($config, tokens);
 
     .kbq-form__label {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, forms-font-default-label));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, forms-font-label));
     }
 
-    .kbq-form__legend {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, forms-font-default-legend));
-    }
+    //.kbq-form__legend {
+    //    @include kbq-typography-level-to-styles($config, map.get($tokens, forms-font-default-legend));
+    //}
 }

package/core/forms/_forms.scss

@@ -20,10 +20,8 @@
     .kbq-form-horizontal {
         $config: kbq-typography-config($tokens);
 
-        $line-height: kbq-line-height($config, body);
-
+        $line-height: kbq-line-height($config, map.get($tokens, forms-font-label));
         $form-field-size-height: map.get($tokens, form-field-size-height);
-
         $label-padding-top: calc(($form-field-size-height - $line-height) / 2);
 
         & .kbq-form-row_margin {

package/core/option/_option-theme.scss

@@ -4,33 +4,52 @@
 @use '../styles/typography/typography-utils' as *;
 
 
-@mixin kbq-option-theme($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
+@mixin kbq-option($state) {
+    background: map.get($state, container-background);
+
+    .kbq-option-text {
+        color: map.get($state, text);
+    }
+
+    .kbq-icon {
+        color: map.get($state, icon);
+    }
 
-    $primary: map.get($theme, theme);
+    .kbq-option-action .kbq-icon {
+        color: map.get($state, icon-button);
+    }
+
+    .kbq-option-caption {
+        color: map.get($state, caption);
+    }
+}
+
+@mixin kbq-option-theme($theme) {
+    $list-item: map.get(map.get($theme, components), list-item);
 
     .kbq-option {
-        color: map.get($foreground, text);
+        @include kbq-option(map.get($list-item, default));
 
-        &:hover:not(.kbq-disabled) {
-            .kbq-option-overlay {
-                background: map.get($background, overlay-hover);
-            }
+        &:hover:not(.kbq-disabled):not([disabled]) {
+            @include kbq-option(map.get($list-item, hover));
         }
 
+        &.kbq-focused,
         &.kbq-active {
-            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-option(map.get($list-item, selected));
 
-        &.kbq-disabled {
-            background: transparent;
+            &:hover:not(.kbq-disabled):not([disabled]) {
+                @include kbq-option(map.get($list-item, selected-hover));
+            }
+        }
 
-            color: map.get($foreground, text-disabled);
+        &.kbq-disabled,
+        &[disabled] {
+            @include kbq-option(map.get($list-item, disabled));
         }
     }
 }
@@ -39,6 +58,10 @@
     $tokens: map.get($config, tokens);
 
     .kbq-option {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, option-font-default));
+        @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/core/option/action.scss

@@ -1,5 +1,5 @@
 .kbq-option-action {
-    box-sizing: unset;
+    box-sizing: border-box;
 
     position: relative;
 
@@ -10,9 +10,8 @@
 
     margin-right: -2px;
 
-    //width 28px for total width 32px (left border + right border);
-    width: 28px;
-    height: 100%;
+    width: 24px;
+    height: 24px;
 
     cursor: pointer;
 

package/core/option/option.scss

@@ -1,62 +1,17 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../styles/tokens';
+@use '../styles/common';
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-option {
-    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));
-
-    border: var(--kbq-option-size-border-width, map.get($tokens, option-size-border-width)) solid transparent;
-
-    cursor: pointer;
-
-    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));
-
-    -webkit-tap-highlight-color: transparent;
-
-    &.kbq-disabled {
-        cursor: default;
-    }
-
-    & .kbq-pseudo-checkbox {
-        margin-right: 8px;
-    }
-
-    & .kbq-option-overlay {
-        position: absolute;
-
-        top: calc(-1 * var(--kbq-option-size-border-width, #{map.get($tokens, option-size-border-width)}));
-        left: calc(-1 * var(--kbq-option-size-border-width, #{map.get($tokens, option-size-border-width)}));
-        right: calc(-1 * var(--kbq-option-size-border-width, #{map.get($tokens, option-size-border-width)}));
-        bottom: calc(-1 * var(--kbq-option-size-border-width, #{map.get($tokens, option-size-border-width)}));
-
-        pointer-events: none;
-        border-radius: inherit;
-    }
+    @include common.kbq-list-item-base();
 }
 
 .kbq-option-text {
-    display: inline-block;
-    flex-grow: 1;
+    @include common.kbq-list-text();
 
-    overflow: hidden;
-
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    &:not(.kbq-disabled):not([disabled]) {
+        cursor: pointer;
+    }
 }

package/core/styles/_koobiq-theme.scss

@@ -30,6 +30,7 @@
 @use '../../progress-bar/progress-bar-theme' as *;
 @use '../../progress-spinner/progress-spinner-theme' as *;
 @use '../../radio/radio-theme' as *;
+@use '../../risk-level/risk-level-theme' as *;
 @use '../../select/select-theme' as *;
 @use '../../sidepanel/sidepanel-theme' as *;
 @use '../../splitter/splitter-theme' as *;
@@ -86,6 +87,7 @@
     @include kbq-progress-spinner-theme($theme);
     @include kbq-pseudo-checkbox-theme($theme);
     @include kbq-radio-theme($theme);
+    @include kbq-risk-level-theme($theme);
     @include kbq-scrollbar-theme($theme);
     @include kbq-select-theme($theme);
     @include kbq-sidepanel-theme($theme);
@@ -136,6 +138,7 @@
     @include kbq-progress-bar-typography($config);
     @include kbq-progress-spinner-typography($config);
     @include kbq-radio-typography($config);
+    @include kbq-risk-level-typography($config);
     @include kbq-select-typography($config);
     @include kbq-sidepanel-typography($config);
     @include kbq-tabs-typography($config);

package/core/styles/common/_list.scss

@@ -1,3 +1,9 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../tokens';
+
+
 // This mixin will ensure that lines that overflow the container will hide the overflow and
 // truncate neatly with an ellipsis.
 @mixin kbq-truncate-line() {
@@ -41,6 +47,123 @@
     user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
 }
 
+@mixin kbq-list-text() {
+    $tokens: meta.module-variables(tokens) !default;
+
+    @include kbq-line-wrapper-base();
+    display: inline-block;
+
+    @include kbq-truncate-line();
+
+    padding-top: var(--kbq-list-size-text-padding-vertical, map.get($tokens, list-size-text-padding-vertical));
+    padding-bottom: var(--kbq-list-size-text-padding-vertical, map.get($tokens, list-size-text-padding-vertical));
+}
+
+// This mixin provides all list-item styles, changing font size and height based on whether the list is in dense mode.
+@mixin kbq-list-item-base() {
+    $tokens: meta.module-variables(tokens) !default;
+
+    $outline-width: map.get($tokens, list-size-container-focus-outline-width);
+
+    $padding-vertical: map.get($tokens, list-size-container-padding-vertical);
+    $padding-left: map.get($tokens, list-size-container-padding-left);
+    $padding-right: map.get($tokens, list-size-container-padding-right);
+
+    position: relative;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    box-sizing: border-box;
+
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+
+    min-height: 32px;
+
+    gap: var(
+        --kbq-list-size-container-content-gap-horizontal, map.get($tokens, list-size-container-content-gap-horizontal)
+    );
+
+    border-width: var(--kbq-list-size-container-focus-outline-width, $outline-width);
+    border-style: solid;
+    border-color: transparent;
+
+    padding:
+        calc(
+            var(--kbq-list-size-container-padding-vertical, $padding-vertical) -
+            var(--kbq-list-size-container-focus-outline-width, $outline-width)
+        )
+        calc(
+            var(--kbq-list-size-container-padding-right, $padding-right) -
+            var(--kbq-list-size-container-focus-outline-width, $outline-width)
+        )
+        calc(
+            var(--kbq-list-size-container-padding-vertical, $padding-vertical) -
+            var(--kbq-list-size-container-focus-outline-width, $outline-width)
+        )
+        calc(
+            var(--kbq-list-size-container-padding-left, $padding-left) -
+            var(--kbq-list-size-container-focus-outline-width, $outline-width)
+        );
+
+    .kbq-list-text {
+        @include kbq-list-text();
+    }
+
+    .kbq-list-option-caption {
+        padding-top: var(
+            --kbq-list-size-container-content-gap-vertical,
+            map.get($tokens, list-size-container-content-gap-vertical)
+        );
+    }
+}
+
+@mixin kbq-list-header-base() {
+    $tokens: meta.module-variables(tokens) !default;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    box-sizing: border-box;
+
+    min-height: 32px;
+
+    padding:
+        var(--kbq-list-size-header-padding-top, map.get($tokens, list-size-header-padding-top))
+        var(--kbq-list-size-header-padding-horizontal, map.get($tokens, list-size-header-padding-horizontal))
+        var(--kbq-list-size-header-padding-bottom, map.get($tokens, list-size-header-padding-bottom))
+        var(--kbq-list-size-header-padding-horizontal, map.get($tokens, list-size-header-padding-horizontal));
+
+    .kbq-list-text {
+        @include kbq-list-text();
+    }
+}
+
+@mixin kbq-list-subheading-base() {
+    $tokens: meta.module-variables(tokens) !default;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    box-sizing: border-box;
+
+    min-height: 32px;
+
+    padding:
+        var(--kbq-list-size-subheading-padding-top, map.get($tokens, list-size-subheading-padding-top))
+        var(--kbq-list-size-subheading-padding-horizontal, map.get($tokens, list-size-subheading-padding-horizontal))
+        var(--kbq-list-size-subheading-padding-bottom, map.get($tokens, list-size-subheading-padding-bottom))
+        var(--kbq-list-size-subheading-padding-horizontal, map.get($tokens, list-size-subheading-padding-horizontal));
+
+    .kbq-list-text {
+        @include kbq-list-text();
+    }
+}
+
 .kbq-no-select {
     @include kbq-no-select;
 }

package/core/styles/common/_select.scss

@@ -0,0 +1,218 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../common/vendor-prefixes';
+@use '../tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
+%kbq-select-base {
+    box-sizing: border-box;
+
+    display: inline-block;
+
+    width: 100%;
+
+    outline: none;
+
+    .kbq-select__matcher {
+        display: flex;
+        align-items: center;
+
+        width: 100%;
+
+        overflow: hidden;
+
+        white-space: nowrap;
+
+        // todo
+        & > span {
+            flex: 1;
+            overflow: hidden;
+        }
+    }
+
+    $border-width: map.get($tokens, form-field-size-border-width);
+
+    .kbq-select__trigger {
+        display: flex;
+        box-sizing: border-box;
+        position: relative;
+
+        cursor: pointer;
+
+        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)
+        );
+
+        & .kbq-select__matcher {
+            $padding-vertical: map.get($tokens, select-size-single-padding-vertical);
+
+            padding:
+                calc(
+                    var(--kbq-select-size-single-padding-vertical, #{$padding-vertical}) -
+                    var(--kbq-form-field-size-border-width, #{$border-width})
+                )
+                calc(
+                    var(--kbq-select-size-single-padding-right, #{map.get($tokens, select-size-single-padding-right)}) -
+                    var(--kbq-form-field-size-border-width, #{$border-width})
+                )
+                calc(
+                    var(--kbq-select-size-single-padding-vertical, #{$padding-vertical}) -
+                    var(--kbq-form-field-size-border-width, #{$border-width})
+                )
+                calc(
+                    var(--kbq-select-size-single-padding-left, #{map.get($tokens, select-size-single-padding-left)}) -
+                    var(--kbq-form-field-size-border-width, #{$border-width})
+                );
+        }
+    }
+
+    .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) {
+        & .kbq-select__matcher {
+            padding-left: calc(
+                var(--kbq-select-size-multiple-padding-left, #{map.get($tokens, select-size-multiple-padding-left)}) -
+                var(--kbq-form-field-size-border-width, #{$border-width})
+            );
+
+            .kbq-select__match-container {
+                display: flex;
+            }
+        }
+    }
+
+    .kbq-select__match-container {
+        width: 100%;
+
+        text-overflow: ellipsis;
+        overflow: hidden;
+
+        & .kbq-select__match-hidden-text {
+            flex: 0 0 70px;
+            align-self: center;
+            padding-left: 4px;
+            padding-right: var(
+                --kbq-select-size-multiple-content-gap, #{map.get($tokens, select-size-multiple-content-gap)}
+            );
+
+            text-align: right;
+        }
+    }
+
+    .kbq-select__match-list {
+        display: flex;
+        flex-wrap: wrap;
+        overflow: hidden;
+
+        $padding-vertical: map.get($tokens, select-size-multiple-padding-vertical);
+
+        max-height: calc(
+            var(--kbq-form-field-size-height, map.get($tokens, form-field-size-height)) -
+            (var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) * 2)
+        );
+
+        height: calc(
+            var(--kbq-form-field-size-height, map.get($tokens, form-field-size-height)) -
+            (var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) * 2)
+        );
+
+        gap: var(
+            --kbq-select-size-multiple-content-gap, #{map.get($tokens, select-size-multiple-content-gap)}
+        );
+
+        margin-right: var(
+            --kbq-select-size-multiple-content-gap, #{map.get($tokens, select-size-multiple-content-gap)}
+        );
+    }
+
+    .kbq-select__arrow-wrapper {
+        display: flex;
+        align-self: center;
+
+        padding: 4px;
+
+        // 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%);
+        }
+    }
+
+    .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__search-container {
+        border-bottom: {
+            width: 1px;
+            style: solid;
+        }
+    }
+
+    &.kbq-disabled {
+        & .kbq-select__trigger {
+            @include vendor-prefixes.user-select(none);
+
+            cursor: default;
+        }
+    }
+}
+
+%kbq-select-panel {
+    min-width: 100%; // prevents some animation twitching and test inconsistencies in IE11
+
+    overflow: hidden;
+
+    border-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;
+    }
+}
+
+%kbq-select-content {
+    max-height: var(--kbq-select-panel-size-max-height, map.get($tokens, select-panel-size-max-height));
+    padding: 4px 0;
+    overflow: hidden auto;
+}
+
+%kbq-select-footer {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+
+    min-height: 40px;
+
+    border-top-width: 1px;
+    border-top-style: solid;
+
+    padding: map.get($tokens, size-xxs) map.get($tokens, size-m);
+}