@koobiq/components 18.31.0 → 18.33.0

package/file-upload/_file-upload-theme.scss

@@ -227,6 +227,11 @@
 }
 
 @mixin kbq-file-upload-typography() {
+    .kbq-file-upload {
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
+    }
+
+    // @TODO: remove when redesign applied, use default font (#DS-3858)
     .kbq-single-file-upload {
         & .file-item__text-wrapper,
         & .dropzone__text {
@@ -239,6 +244,7 @@
             @include tokens.kbq-typography-level-to-styles-css-variables(typography, subheading);
         }
 
+        // @TODO: remove when redesign applied, use default font (#DS-3858)
         .multiple__caption {
             &,
             .kbq-link {
@@ -246,14 +252,17 @@
             }
         }
 
+        // @TODO: remove when redesign applied, use default font (#DS-3858)
         .kbq-file-multiple-uploaded__header {
             @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
 
+        // @TODO: remove when redesign applied, use default font (#DS-3858)
         .multiple__uploaded-item {
             @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
 
+        // @TODO: remove when redesign applied, use default font (#DS-3858)
         .kbq-file-upload {
             .kbq-list-item,
             .kbq-list-option {

package/file-upload/multiple-file-upload.component.d.ts

@@ -57,7 +57,7 @@ export declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase im
     protected readonly customFileIcon: TemplateRef<HTMLElement>;
     /** @docs-private */
     readonly input: ElementRef<HTMLInputElement>;
-    private readonly listSelection;
+    private readonly listSelection?;
     private readonly fileSizeHeaderCell;
     /** @docs-private */
     protected readonly hint: QueryList<TemplateRef<any>>;

package/filter-bar/filter-bar.d.ts

@@ -51,6 +51,8 @@ export declare class KbqFilterBar {
     /** Whether the current filter is disabled */
     get isDisabled(): boolean;
     private savedFilter;
+    /** Event that emits whenever the filter is reset. */
+    readonly onResetFilter: BehaviorSubject<boolean>;
     /** all changes */
     readonly changes: BehaviorSubject<void>;
     /** internal filter changes */

package/filter-bar/filter-bar.types.d.ts

@@ -88,6 +88,8 @@ export interface KbqPipe {
     value: unknown | null;
     search?: boolean;
     selectAll?: boolean;
+    openOnAdd?: boolean;
+    openOnReset?: boolean;
     /**
      * This is special logic that unselect all items when all selected because "all selected = nothing selected".
      * Default is true
@@ -101,8 +103,6 @@ export interface KbqPipe {
 }
 export interface KbqPipeData<V> extends KbqPipe {
     value: V | null;
-    search?: boolean;
-    openOnAdd?: boolean;
 }
 export interface KbqPipeTemplate extends Omit<KbqPipe, 'value'> {
     values?: unknown[];

package/form-field/_fiedset-theme.scss

@@ -0,0 +1,13 @@
+@use './form-field-theme';
+@use './form-field';
+
+@mixin kbq-fieldset-theme {
+    .kbq-form-field__hint {
+        @include form-field-theme.kbq-form-field-hint-theme();
+        @include form-field-theme.kbq-form-field-hint-typography();
+
+        &:empty {
+            margin-top: 0;
+        }
+    }
+}

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

@@ -1,6 +1,19 @@
-@use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/tokens';
 
-@mixin kbq-form-field-state($state-name) {
+@mixin kbq-form-field-hint-theme {
+    > .kbq-hint:not(.kbq-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning, .kbq-error) {
+        color: var(--kbq-form-field-hint-text);
+    }
+}
+
+@mixin kbq-form-field-hint-typography {
+    > .kbq-hint:not(.kbq-password-hint, .kbq-reactive-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning)
+        .kbq-hint__text {
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact);
+    }
+}
+
+@mixin _kbq-form-field-state($state-name) {
     .kbq-form-field__container {
         border-color: var(--kbq-form-field-#{$state-name}-border-color);
         background-color: var(--kbq-form-field-#{$state-name}-background);
@@ -27,7 +40,7 @@
 
 @mixin kbq-form-field-theme() {
     .kbq-form-field {
-        @include kbq-form-field-state(default);
+        @include _kbq-form-field-state(default);
 
         & .kbq-input {
             //https://css-tricks.com/almanac/selectors/a/autofill/
@@ -44,7 +57,7 @@
         &.kbq-form-field_invalid,
         // Invalid by `KbqValidateDirective`
         &.kbq-form-field_has-validate-directive.ng-invalid {
-            @include kbq-form-field-state(states-error);
+            @include _kbq-form-field-state(states-error);
         }
 
         &.kbq-form-field-type-input,
@@ -55,7 +68,7 @@
         &.kbq-form-field-type-tag-list,
         &.kbq-form-field-type-select.cdk-keyboard-focused {
             &.cdk-focused {
-                @include kbq-form-field-state(states-focused);
+                @include _kbq-form-field-state(states-focused);
 
                 & .kbq-form-field__container {
                     box-shadow: 0 0 0.1px 1px var(--kbq-form-field-states-focused-focus-outline);
@@ -66,16 +79,21 @@
             &.kbq-form-field_invalid,
             // Invalid by `KbqValidateDirective`
             &.kbq-form-field_has-validate-directive.ng-invalid {
-                @include kbq-form-field-state(states-error);
+                @include _kbq-form-field-state(states-error);
 
                 &.cdk-focused .kbq-form-field__container {
                     box-shadow: 0 0 0.1px 1px var(--kbq-form-field-states-error-focused-focus-outline);
                 }
+
+                & .kbq-icon.kbq-empty {
+                    color: var(--kbq-form-field-states-error-text);
+                    -webkit-text-fill-color: var(--kbq-form-field-states-error-text);
+                }
             }
         }
 
         &.kbq-disabled {
-            @include kbq-form-field-state(states-disabled);
+            @include _kbq-form-field-state(states-disabled);
 
             .kbq-icon.kbq-empty {
                 color: var(--kbq-form-field-states-disabled-text);
@@ -91,19 +109,17 @@
         }
 
         .kbq-form-field__hint {
-            & > .kbq-hint:not(.kbq-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning, .kbq-error) {
-                color: var(--kbq-form-field-hint-text);
-            }
+            @include kbq-form-field-hint-theme();
         }
     }
 }
 
 @mixin kbq-form-field-typography() {
     .kbq-form-field {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
 
-        .kbq-form-field__hint > .kbq-hint:not(.kbq-password-hint) .kbq-hint__text {
-            @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
+        .kbq-form-field__hint {
+            @include kbq-form-field-hint-typography();
         }
     }
 }

package/form-field/_hint-theme.scss

@@ -1,7 +1,6 @@
-@use '../core/styles/theming/theming' as *;
-@use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/tokens';
 
-@mixin kbq-hint-color($type, $style-name) {
+@mixin _kbq-hint-color($type, $style-name) {
     color: var(--kbq-hint-#{$type}-#{$style-name}-text);
 
     & .kbq-icon.kbq-empty {
@@ -12,47 +11,47 @@
 @mixin kbq-hint-theme() {
     .kbq-hint {
         &.kbq-contrast-fade {
-            @include kbq-hint-color(fill-text-on, fade-contrast);
+            @include _kbq-hint-color(fill-text-on, fade-contrast);
         }
 
         &.kbq-success {
-            @include kbq-hint-color(fill-text-on, success);
+            @include _kbq-hint-color(fill-text-on, success);
         }
 
         &.kbq-warning {
-            @include kbq-hint-color(fill-text-on, warning);
+            @include _kbq-hint-color(fill-text-on, warning);
         }
 
         &.kbq-error {
-            @include kbq-hint-color(fill-text-on, error);
+            @include _kbq-hint-color(fill-text-on, error);
         }
-    }
 
-    .kbq-hint.kbq-hint_fill-text-off {
-        &.kbq-contrast-fade {
-            @include kbq-hint-color(fill-text-off, fade-contrast);
-        }
+        &.kbq-hint_fill-text-off {
+            &.kbq-contrast-fade {
+                @include _kbq-hint-color(fill-text-off, fade-contrast);
+            }
 
-        &.kbq-success {
-            @include kbq-hint-color(fill-text-off, success);
-        }
+            &.kbq-success {
+                @include _kbq-hint-color(fill-text-off, success);
+            }
 
-        &.kbq-warning {
-            @include kbq-hint-color(fill-text-off, warning);
-        }
+            &.kbq-warning {
+                @include _kbq-hint-color(fill-text-off, warning);
+            }
 
-        &.kbq-error {
-            @include kbq-hint-color(fill-text-off, error);
+            &.kbq-error {
+                @include _kbq-hint-color(fill-text-off, error);
+            }
         }
     }
 }
 
 @mixin kbq-hint-typography() {
     .kbq-hint .kbq-hint__text {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
 
     .kbq-hint.kbq-hint_compact .kbq-hint__text {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact);
     }
 }

package/form-field/cleaner.d.ts

@@ -1,5 +1,9 @@
 import * as i0 from "@angular/core";
+/**
+ * Element to be placed in end of the form field.
+ * Resets form control by click.
+ */
 export declare class KbqCleaner {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCleaner, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCleaner, "kbq-cleaner", ["kbqCleaner"], {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCleaner, "kbq-cleaner", ["kbqCleaner"], {}, {}, never, never, true, never>;
 }

package/form-field/cleaner.scss

@@ -3,9 +3,6 @@
     align-items: center;
     justify-content: center;
 
-    width: var(--kbq-form-field-size-icon-button-size);
-    margin-right: var(--kbq-form-field-size-icon-button-margin-right);
+    width: var(--kbq-form-field-size-addon-width);
     height: 100%;
-
-    cursor: pointer;
 }

package/form-field/error.d.ts

@@ -0,0 +1,8 @@
+import { KbqHint } from './hint';
+import * as i0 from "@angular/core";
+/** Error text to be shown below the form field control. */
+export declare class KbqError extends KbqHint {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqError, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqError, "kbq-error", ["kbqError"], {}, {}, never, ["[kbq-icon]", "*"], true, never>;
+}

package/form-field/fieldset-tokens.scss

@@ -0,0 +1,5 @@
+.kbq-fieldset {
+    --kbq-fieldset-legend-margin: var(--kbq-size-s);
+    --kbq-form-field-hint-size-margin-top: var(--kbq-size-xs);
+    --kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary);
+}

package/form-field/fieldset.d.ts

@@ -0,0 +1,27 @@
+import { Signal } from '@angular/core';
+import * as i0 from "@angular/core";
+/** Directive for marking an element as legend of `KbqFieldset` */
+export declare class KbqLegend {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqLegend, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqLegend, "[kbqLegend]", never, {}, {}, never, never, true, never>;
+}
+/** Directive for marking elements as items inside `KbqFieldset` */
+export declare class KbqFieldsetItem {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqFieldsetItem, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqFieldsetItem, "[kbqFieldsetItem]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * A group of form-fields and related controls.
+ * Container component emulating the native `fieldset` element.
+ */
+export declare class KbqFieldset {
+    private readonly legend;
+    /**
+     * Computes the aria-label from the inner text of the legend element.
+     * Used to enhance accessibility by labeling the group.
+     * @docs-private
+     */
+    protected readonly ariaLabel: Signal<string | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqFieldset, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqFieldset, "kbq-fieldset", never, {}, {}, ["legend"], ["[kbqLegend]", "*", "kbq-error", "kbq-hint, kbq-password-hint, kbq-reactive-password-hint"], true, never>;
+}

package/form-field/fieldset.scss

@@ -0,0 +1,93 @@
+@use './form-field-theme';
+@use './form-field';
+@use './fiedset-theme';
+
+.kbq-fieldset {
+    display: flex;
+    flex-direction: column;
+
+    .kbq-legend {
+        margin-bottom: var(--kbq-fieldset-legend-margin);
+    }
+
+    .kbq-form-field__hint {
+        @include form-field.kbq-form-field-hint-geometry();
+
+        &:empty {
+            margin-top: 0;
+        }
+    }
+
+    .kbq-form-field {
+        // set selector specifity to 0 , so focused state will override z-index
+        :where(&.kbq-form-field_invalid, &.kbq-form-field_has-validate-directive.ng-invalid) {
+            z-index: 2;
+        }
+
+        // Keep form-field__container and parent heights in sync (zoom-safe)
+        .kbq-form-field__container {
+            height: 100%;
+        }
+
+        &:first-child:not(:last-child) {
+            .kbq-form-field__container,
+            .kbq-form-field__container .kbq-input {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+        }
+
+        &:not(:first-child):not(:last-child) {
+            --kbq-form-field-size-border-radius: 0;
+
+            .kbq-form-field__container {
+                border-radius: 0;
+            }
+        }
+
+        &:last-child:not(:first-child) {
+            .kbq-form-field__container,
+            .kbq-form-field__container .kbq-input {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+        }
+
+        &:not(:first-child) {
+            margin-left: calc(var(--kbq-size-border-width) * -1);
+        }
+    }
+
+    @include fiedset-theme.kbq-fieldset-theme();
+}
+
+.kbq-fieldset__container {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+
+    > .kbq-fieldset-item {
+        &.cdk-focused,
+        &.kbq-focused {
+            z-index: 3;
+        }
+
+        &:first-child:not(:last-child) {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        &:not(:first-child):not(:last-child) {
+            border-radius: 0;
+        }
+
+        &:last-child:not(:first-child) {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+
+        &:not(:first-child) {
+            margin-left: calc(var(--kbq-size-border-width) * -1);
+        }
+    }
+}

package/form-field/form-field-control.d.ts

@@ -1,6 +1,6 @@
 import { NgControl } from '@angular/forms';
 import { Observable } from 'rxjs';
-/** An interface which allows a control to work inside of a `MсFormField`. */
+/** An interface which allows a control to work inside of a `KbqFormField`. */
 export declare abstract class KbqFormFieldControl<T> {
     /** The value of the control. */
     value: T | null;

package/form-field/form-field-tokens.scss

@@ -1,15 +1,25 @@
 .kbq-form-field {
     --kbq-form-field-size-height: var(--kbq-size-3xl);
-    --kbq-form-field-size-border-width: 1px;
+
+    --kbq-form-field-size-border-width: var(--kbq-size-border-width);
     --kbq-form-field-size-border-radius: var(--kbq-size-border-radius);
+
     --kbq-form-field-size-icon-size: var(--kbq-size-l);
     --kbq-form-field-size-icon-margin-left: var(--kbq-size-s);
     --kbq-form-field-size-icon-margin-right: var(--kbq-size-s);
     --kbq-form-field-size-icon-button-size: var(--kbq-size-xxl);
-    --kbq-form-field-size-icon-button-margin-right: var(--kbq-size-xxs);
     --kbq-form-field-size-icon-button-margin-left: var(--kbq-size-xxs);
-    --kbq-form-field-hint-size-margin-top: var(--kbq-size-xxs);
+
+    --kbq-form-field-hint-size-margin-top: var(--kbq-size-xs);
     --kbq-form-field-hint-size-gap: var(--kbq-size-s);
+
+    --kbq-form-field-size-container-vertical-padding: calc(var(--kbq-size-xs) - var(--kbq-size-border-width));
+    --kbq-form-field-size-container-left-padding: calc(var(--kbq-size-xs) - var(--kbq-size-border-width));
+    --kbq-form-field-size-container-right-padding: calc(var(--kbq-size-xs) - var(--kbq-size-border-width));
+    --kbq-form-field-size-infix-left-padding: var(--kbq-size-xs);
+    --kbq-form-field-size-infix-right-padding: var(--kbq-size-xxs);
+
+    --kbq-form-field-size-addon-width: 28px;
     /* THEME TOKENS */
     --kbq-form-field-default-border-color: var(--kbq-line-contrast-fade);
     --kbq-form-field-default-background: var(--kbq-background-bg);