@koobiq/components 16.0.0-beta.1 → 16.0.0-beta.11

package/icon/_icon-theme.scss

@@ -12,7 +12,7 @@
     $error: map.get($icon, error);
     $success: map.get($icon, success);
 
-    .kbq-icon {
+    .kbq-icon:not(.kbq-icon-button, .kbq-icon-item) {
         &.kbq-theme {
             color: map.get($theme, color);
         }
@@ -32,236 +32,5 @@
         &.kbq-success {
             color: map.get($success, color);
         }
-
-        &[disabled],
-        &.kbq-disabled {
-            cursor: default;
-        }
-    }
-}
-
-@mixin kbq-icon-item-theme($themeObj) {
-    $icon-item: map.get(map.get($themeObj, components), icon-item);
-
-    $theme: map.get($icon-item, theme);
-    $contrast: map.get($icon-item, contrast);
-    $fade-contrast: map.get($icon-item, fade-contrast);
-    $error: map.get($icon-item, error);
-    $success: map.get($icon-item, success);
-
-    .kbq-icon-item {
-        &.kbq-theme {
-            color: map.get($theme, color);
-            background: map.get($theme, background);
-        }
-
-        &.kbq-contrast {
-            color: map.get($contrast, color);
-            background: map.get($contrast, background);
-        }
-
-        &.kbq-contrast-fade {
-            color: map.get($fade-contrast, color);
-            background: map.get($fade-contrast, background);
-        }
-
-        &.kbq-error {
-            color: map.get($error, color);
-            background: map.get($error, background);
-        }
-
-        &.kbq-success {
-            color: map.get($success, color);
-            background: map.get($success, background);
-        }
-
-        &[disabled],
-        &.kbq-disabled {
-            cursor: default;
-        }
-    }
-}
-
-@mixin kbq-icon-button-theme($themeObj) {
-    $icon-button: map.get(map.get($themeObj, components), icon-button);
-
-    $theme: map.get($icon-button, theme);
-    $contrast: map.get($icon-button, contrast);
-    $fade-contrast: map.get($icon-button, fade-contrast);
-    $error: map.get($icon-button, error);
-    $success: map.get($icon-button, success);
-
-    .kbq-icon_button {
-        &.kbq-theme {
-            &:active,
-            &.kbq-active {
-                color: map.get($theme, state-active);
-            }
-
-            &:not([disabled], .kbq-disabled):hover {
-                color: map.get($theme, state-hover);
-            }
-
-            &[disabled],
-            &.kbq-disabled {
-                color: map.get($theme, state-disabled);
-            }
-        }
-
-        &.kbq-contrast {
-            &:active,
-            &.kbq-active {
-                color: map.get($contrast, state-active);
-            }
-
-            &:not([disabled], .kbq-disabled):hover {
-                color: map.get($contrast, state-hover);
-            }
-
-            &[disabled],
-            &.kbq-disabled {
-                color: map.get($contrast, state-disabled);
-            }
-        }
-
-        &.kbq-contrast-fade {
-            &:active,
-            &.kbq-active {
-                color: map.get($fade-contrast, state-active);
-            }
-
-            &:not([disabled], .kbq-disabled):hover {
-                color: map.get($fade-contrast, state-hover);
-            }
-
-            &[disabled],
-            &.kbq-disabled {
-                color: map.get($fade-contrast, state-disabled);
-            }
-        }
-
-        &.kbq-error {
-            &:active,
-            &.kbq-active {
-                color: map.get($error, state-active);
-            }
-
-            &:not([disabled], .kbq-disabled):hover {
-                color: map.get($error, state-hover);
-            }
-
-            &[disabled],
-            &.kbq-disabled {
-                color: map.get($error, state-disabled);
-            }
-        }
-
-        &.kbq-success {
-            &:active,
-            &.kbq-active {
-                color: map.get($success, state-active);
-            }
-
-            &:not([disabled], .kbq-disabled):hover {
-                color: map.get($success, state-hover);
-            }
-
-            &[disabled],
-            &.kbq-disabled {
-                color: map.get($success, state-disabled);
-            }
-        }
-    }
-
-    .kbq-icon.kbq-icon_button {
-        &.kbq-theme {
-            &:active,
-            &.kbq-active {
-                color: map.get($theme, state-active);
-            }
-
-            &:not([disabled], .kbq-disabled):hover {
-                color: map.get($theme, state-hover);
-            }
-
-            &[disabled],
-            &.kbq-disabled {
-                color: map.get($theme, state-disabled);
-            }
-        }
-
-        &.kbq-contrast {
-            &:active,
-            &.kbq-active {
-                color: map.get($contrast, state-active);
-            }
-
-            &:not([disabled], .kbq-disabled):hover {
-                color: map.get($contrast, state-hover);
-            }
-
-            &[disabled],
-            &.kbq-disabled {
-                color: map.get($contrast, state-disabled);
-            }
-        }
-
-        &.kbq-contrast-fade {
-            &:active,
-            &.kbq-active {
-                color: map.get($fade-contrast, state-active);
-            }
-
-            &:not([disabled], .kbq-disabled):hover {
-                color: map.get($fade-contrast, state-hover);
-            }
-
-            &[disabled],
-            &.kbq-disabled {
-                color: map.get($fade-contrast, state-disabled);
-            }
-        }
-
-        &.kbq-error {
-            &:active,
-            &.kbq-active {
-                color: map.get($error, state-active);
-            }
-
-            &:not([disabled], .kbq-disabled):hover {
-                color: map.get($error, state-hover);
-            }
-
-            &[disabled],
-            &.kbq-disabled {
-                color: map.get($error, state-disabled);
-            }
-        }
-
-        &.kbq-success {
-            &:active,
-            &.kbq-active {
-                color: map.get($success, state-active);
-            }
-
-            &:not([disabled],.kbq-disabled):hover {
-                color: map.get($success, state-hover);
-            }
-
-            &[disabled],
-            &.kbq-disabled {
-                color: map.get($success, state-disabled);
-            }
-        }
-
-        &:focus {
-            outline: none;
-        }
-
-        &.cdk-keyboard-focused {
-            box-shadow:
-                inset 0 0 0 1px map.get(map.get($themeObj, states), focused-color),
-                0 0 0 1px map.get(map.get($themeObj, states), focused-color);
-        }
     }
 }

package/icon/icon-button.component.d.ts

@@ -0,0 +1,22 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { ChangeDetectorRef, ElementRef, OnDestroy } from '@angular/core';
+import { CanColor, KbqFormFieldRef } from '@koobiq/components/core';
+import { KbqIcon } from './icon.component';
+import * as i0 from "@angular/core";
+export declare class KbqIconButton extends KbqIcon implements OnDestroy, CanColor {
+    protected changeDetectorRef: ChangeDetectorRef;
+    private focusMonitor;
+    small: boolean;
+    get tabindex(): any;
+    set tabindex(value: any);
+    private _tabindex;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    constructor(elementRef: ElementRef, iconName: string, formField: KbqFormFieldRef, changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor);
+    ngOnDestroy(): void;
+    private runFocusMonitor;
+    private stopFocusMonitor;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqIconButton, [null, { attribute: "kbq-icon-button"; }, { optional: true; }, null, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIconButton, "[kbq-icon-button]", never, { "color": { "alias": "color"; "required": false; }; "small": { "alias": "small"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], false, never>;
+}

package/icon/icon-button.scss

@@ -0,0 +1,33 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
+.kbq-icon-button {
+    &:not(.kbq-disabled) {
+        cursor: pointer;
+    }
+
+    padding:
+        var(--kbq-icon-button-size-small-vertical-padding, map-get($tokens, icon-button-size-small-vertical-padding))
+        var(
+            --kbq-icon-button-size-small-horizontal-padding,
+            map-get($tokens, icon-button-size-small-horizontal-padding)
+        );
+
+    &.kbq-icon-button_small {
+        padding:
+            var(
+                --kbq-icon-button-size-normal-vertical-padding,
+                map-get($tokens, icon-button-size-normal-vertical-padding)
+            )
+            var(
+                --kbq-icon-button-size-normal-horizontal-padding,
+                map-get($tokens, icon-button-size-normal-horizontal-padding)
+            );
+    }
+}

package/icon/icon-item.component.d.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectorRef, ElementRef } from '@angular/core';
+import { CanColor, KbqFormFieldRef } from '@koobiq/components/core';
+import { KbqIcon } from './icon.component';
+import * as i0 from "@angular/core";
+export declare class KbqIconItem extends KbqIcon implements CanColor {
+    protected changeDetectorRef: ChangeDetectorRef;
+    constructor(elementRef: ElementRef, iconName: string, formField: KbqFormFieldRef, changeDetectorRef: ChangeDetectorRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqIconItem, [null, { attribute: "kbq-icon-item"; }, { optional: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIconItem, "[kbq-icon-item]", never, { "color": { "alias": "color"; "required": false; }; }, {}, never, ["*"], false, never>;
+}

package/icon/icon-item.scss

@@ -0,0 +1,18 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
+.kbq-icon-item {
+    box-sizing: border-box;
+
+    border-radius: 50%;
+
+    padding:
+        var(--kbq-icon-item-size-vertical-padding, map-get($tokens, icon-item-size-vertical-padding))
+        var(--kbq-icon-item-size-horizontal-padding, map-get($tokens, icon-item-size-horizontal-padding));
+}

package/icon/icon.component.d.ts

@@ -1,5 +1,4 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { AfterContentInit, ChangeDetectorRef, ElementRef, OnDestroy } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, ElementRef } from '@angular/core';
 import { CanColor, CanColorCtor, KbqFormFieldRef } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 /** @docs-private */
@@ -22,26 +21,3 @@ export declare class KbqIcon extends KbqIconMixinBase implements CanColor, After
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqIcon, [null, { attribute: "kbq-icon"; }, { optional: true; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqIcon, "[kbq-icon]", never, { "color": { "alias": "color"; "required": false; }; "small": { "alias": "small"; "required": false; }; "autoColor": { "alias": "autoColor"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
-export declare class KbqIconButton extends KbqIcon implements OnDestroy, CanColor {
-    protected changeDetectorRef: ChangeDetectorRef;
-    private focusMonitor;
-    small: boolean;
-    get tabindex(): any;
-    set tabindex(value: any);
-    private _tabindex;
-    get disabled(): boolean;
-    set disabled(value: boolean);
-    private _disabled;
-    constructor(elementRef: ElementRef, iconName: string, formField: KbqFormFieldRef, changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor);
-    ngOnDestroy(): void;
-    private runFocusMonitor;
-    private stopFocusMonitor;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqIconButton, [null, { attribute: "kbq-icon-button"; }, { optional: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIconButton, "[kbq-icon-button]", never, { "color": { "alias": "color"; "required": false; }; "small": { "alias": "small"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], false, never>;
-}
-export declare class KbqIconItem extends KbqIcon implements CanColor {
-    protected changeDetectorRef: ChangeDetectorRef;
-    constructor(elementRef: ElementRef, iconName: string, formField: KbqFormFieldRef, changeDetectorRef: ChangeDetectorRef);
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqIconItem, [null, { attribute: "kbq-icon-item"; }, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIconItem, "[kbq-icon-item]", never, { "color": { "alias": "color"; "required": false; }; }, {}, never, ["*"], false, never>;
-}

package/icon/icon.module.d.ts

@@ -1,10 +1,12 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./icon.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/cdk/a11y";
-import * as i4 from "@angular/cdk/platform";
+import * as i2 from "./icon-button.component";
+import * as i3 from "./icon-item.component";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/cdk/a11y";
+import * as i6 from "@angular/cdk/platform";
 export declare class KbqIconModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqIconModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqIconModule, [typeof i1.KbqIcon, typeof i1.KbqIconButton, typeof i1.KbqIconItem], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.KbqIcon, typeof i1.KbqIconButton, typeof i1.KbqIconItem]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqIconModule, [typeof i1.KbqIcon, typeof i2.KbqIconButton, typeof i3.KbqIconItem], [typeof i4.CommonModule, typeof i5.A11yModule, typeof i6.PlatformModule], [typeof i1.KbqIcon, typeof i2.KbqIconButton, typeof i3.KbqIconItem]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqIconModule>;
 }

package/icon/icon.scss

@@ -7,47 +7,6 @@
 $tokens: meta.module-variables(tokens) !default;
 
 
-@mixin kbq-icon-size($padding, $line-height, $font-size) {
-    padding: $padding;
-    line-height: $line-height;
-    font-size: $font-size;
-}
-
-.kbq-icon_button {
-    &:not(.kbq-disabled) {
-        cursor: pointer;
-    }
-
-    padding:
-        var(--kbq-icon-button-size-small-vertical-padding, map-get($tokens, icon-button-size-small-vertical-padding))
-        var(
-            --kbq-icon-button-size-small-horizontal-padding,
-            map-get($tokens, icon-button-size-small-horizontal-padding)
-        );
-
-    &.kbq-icon-button_small {
-        padding:
-            var(
-                --kbq-icon-button-size-normal-vertical-padding,
-                map-get($tokens, icon-button-size-normal-vertical-padding)
-            )
-            var(
-                --kbq-icon-button-size-normal-horizontal-padding,
-                map-get($tokens, icon-button-size-normal-horizontal-padding)
-            );
-    }
-}
-
-.kbq-icon-item {
-    box-sizing: border-box;
-
-    border-radius: 50%;
-
-    padding:
-        var(--kbq-icon-item-size-vertical-padding, map-get($tokens, icon-item-size-vertical-padding))
-        var(--kbq-icon-item-size-horizontal-padding, map-get($tokens, icon-item-size-horizontal-padding));
-}
-
 .kbq-icon-rotate_90 {
     transform: rotate(90deg);
 }

package/icon/public-api.d.ts

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

package/input/_input-theme.scss

@@ -7,7 +7,8 @@
 @mixin kbq-input-typography($config) {
     $tokens: map.get($config, tokens);
 
-    .kbq-input {
+    .kbq-input,
+    .kbq-input.kbq-input-password::placeholder {
         @include kbq-typography-level-to-styles($config, map.get($tokens, input-font-text));
     }
 }

package/input/input-number.d.ts

@@ -1,5 +1,7 @@
-import { ElementRef } from '@angular/core';
-import { NgControl } from '@angular/forms';
+import { ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { KbqLocaleService } from '@koobiq/components/core';
+import { KbqFormFieldControl } from '@koobiq/components/form-field';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare const BIG_STEP = 10;
@@ -10,24 +12,73 @@ export declare function isInt(value: string): boolean;
 export declare function isDigit(value: string): boolean;
 export declare function getPrecision(value: number): number;
 export declare function add(value1: number, value2: number): number;
-export declare class KbqNumberInput {
+export declare const KBQ_NUMBER_INPUT_VALUE_ACCESSOR: any;
+export declare class KbqNumberInput implements KbqFormFieldControl<any>, ControlValueAccessor, OnDestroy {
     private elementRef;
-    private ngControl;
+    private readonly renderer;
+    private localeService;
+    /** Emits when the value changes (either due to user input or programmatic change). */
+    valueChange: EventEmitter<number | null>;
+    /** Emits when the disabled state has changed */
+    disabledChange: EventEmitter<boolean>;
+    readonly stateChanges: Subject<void>;
+    id: string;
+    placeholder: string;
+    empty: boolean;
+    required: boolean;
+    errorState: boolean;
+    controlType?: string | undefined;
     bigStep: number;
     step: number;
     min: number;
     max: number;
-    value: any;
+    withThousandSeparator: boolean;
+    /**
+     * Include thousand separator from custom index. For example, it will be useful in tables.
+     */
+    startFormattingFrom?: number;
+    get value(): number | null;
+    set value(value: number | null);
+    private _value;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
     focused: boolean;
-    readonly stateChanges: Subject<void>;
     get nativeElement(): HTMLInputElement;
-    constructor(elementRef: ElementRef, ngControl: NgControl, step: string, bigStep: string, min: string, max: string);
+    get viewValue(): string;
+    get ngControl(): any;
+    private control;
+    private readonly allNumberLocaleConfigs;
+    private numberLocaleConfig;
+    private valueFromPaste;
+    private localeSubscription;
+    constructor(elementRef: ElementRef, renderer: Renderer2, step: string, bigStep: string, min: string, max: string, localeService: KbqLocaleService);
+    ngOnDestroy(): void;
+    onContainerClick(): void;
+    focus(): void;
+    writeValue(value: number | null): void;
+    registerOnChange(fn: (value: any) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
     focusChanged(isFocused: boolean): void;
+    onTouched: () => void;
     onKeyDown(event: KeyboardEvent): void;
-    onPaste(event: any): void;
+    onInput(event: InputEvent): void;
+    onPaste(event: ClipboardEvent): void;
     stepUp(step: number): void;
     stepDown(step: number): void;
+    private cvaOnChange;
+    private setViewValue;
     private viewToModelUpdate;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNumberInput, [null, { optional: true; self: true; }, { attribute: "step"; }, { attribute: "big-step"; }, { attribute: "min"; }, { attribute: "max"; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNumberInput, "input[mcInput][type=\"number\"]", ["mcNumericalInput"], { "bigStep": { "alias": "bigStep"; "required": false; }; "step": { "alias": "step"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; }, {}, never, never, false, never>;
+    private formatViewValue;
+    private formatNumber;
+    private createLocalizedNumberFromParts;
+    /**
+     * Method that returns a string representation of a number without localized separators
+     */
+    private normalizeNumber;
+    private updateLocaleParams;
+    private checkAndNormalizeLocalizedNumber;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNumberInput, [null, null, { attribute: "step"; }, { attribute: "big-step"; }, { attribute: "min"; }, { attribute: "max"; }, { optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNumberInput, "input[kbqInput][type=\"number\"]", ["kbqNumericalInput"], { "bigStep": { "alias": "bigStep"; "required": false; }; "step": { "alias": "step"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "withThousandSeparator": { "alias": "withThousandSeparator"; "required": false; }; "startFormattingFrom": { "alias": "startFormattingFrom"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, false, never>;
 }

package/input/input-password.d.ts

@@ -88,5 +88,5 @@ export declare class KbqInputPassword extends KbqInputMixinBase implements KbqFo
     /** Checks whether the input is invalid based on the native validation. */
     protected isBadInput(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqInputPassword, [null, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqInputPassword, "input[mcInputPassword]", ["mcInputPassword"], { "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqInputPassword, "input[kbqInputPassword]", ["kbqInputPassword"], { "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, false, never>;
 }

package/input/input.d.ts

@@ -109,9 +109,9 @@ export declare class KbqInput extends KbqInputMixinBase implements KbqFormFieldC
     /** Checks whether the input is invalid based on the native validation. */
     protected isBadInput(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqInput, [null, { optional: true; self: true; }, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqInput, "input[mcInput]", ["mcInput"], { "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "required": { "alias": "required"; "required": false; }; "type": { "alias": "type"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqInput, "input[kbqInput]", ["kbqInput"], { "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "required": { "alias": "required"; "required": false; }; "type": { "alias": "type"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, false, never>;
 }
 export declare class KbqInputMono {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqInputMono, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqInputMono, "input[mcInputMonospace]", ["KbqInputMonospace"], {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqInputMono, "input[kbqInputMonospace]", ["KbqInputMonospace"], {}, {}, never, never, false, never>;
 }

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"] {