@koobiq/components 16.0.0-beta.1

package/icon/icon.component.d.ts

@@ -0,0 +1,47 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, OnDestroy } from '@angular/core';
+import { CanColor, CanColorCtor, KbqFormFieldRef } from '@koobiq/components/core';
+import * as i0 from "@angular/core";
+/** @docs-private */
+export declare class KbqIconBase {
+    elementRef: ElementRef;
+    constructor(elementRef: ElementRef);
+}
+/** @docs-private */
+export declare const KbqIconMixinBase: CanColorCtor & typeof KbqIconBase;
+export declare class KbqIcon extends KbqIconMixinBase implements CanColor, AfterContentInit {
+    protected formField: KbqFormFieldRef;
+    protected changeDetectorRef: ChangeDetectorRef;
+    small: boolean;
+    autoColor: boolean;
+    hasError: boolean;
+    constructor(elementRef: ElementRef, iconName: string, formField: KbqFormFieldRef, changeDetectorRef: ChangeDetectorRef);
+    getHostElement(): any;
+    ngAfterContentInit(): void;
+    private updateState;
+    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

@@ -0,0 +1,10 @@
+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";
+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 ɵinj: i0.ɵɵInjectorDeclaration<KbqIconModule>;
+}

package/icon/icon.scss

@@ -0,0 +1,73 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$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);
+}
+
+.kbq-icon-rotate_180 {
+    transform: rotate(180deg);
+}
+
+.kbq-icon-rotate_270 {
+    transform: rotate(270deg);
+}
+
+.kbq-icon-flip-h {
+    transform: scaleY(-1);
+}
+
+.kbq-icon-flip-v {
+    transform: scaleX(-1);
+}
+
+.kbq-icon-flip-vh {
+    transform: scale(-1);
+}

package/icon/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/icon/public-api.d.ts

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

package/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/input/_input-theme.scss

@@ -0,0 +1,13 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin kbq-input-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .kbq-input {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, input-font-text));
+    }
+}

package/input/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/input/input-errors.d.ts

@@ -0,0 +1 @@
+export declare function getKbqInputUnsupportedTypeError(inputType: string): Error;

package/input/input-number-validators.d.ts

@@ -0,0 +1,35 @@
+import { OnChanges, Provider, SimpleChanges } from '@angular/core';
+import { AbstractControl, ValidationErrors, Validator } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare const MIN_VALIDATOR: Provider;
+/**
+ * A directive which installs the MinValidator for any `formControlName`,
+ * `formControl`, or control with `ngModel` that also has a `min` attribute.
+ */
+export declare class MinValidator implements Validator, OnChanges {
+    min: number;
+    private validator;
+    private onChange;
+    ngOnChanges(changes: SimpleChanges): void;
+    validate(c: AbstractControl): ValidationErrors | null;
+    registerOnValidatorChange(fn: () => void): void;
+    private createValidator;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MinValidator, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MinValidator, "[min][formControlName],[min][formControl],[min][ngModel]", never, { "min": { "alias": "min"; "required": false; }; }, {}, never, never, false, never>;
+}
+export declare const MAX_VALIDATOR: Provider;
+/**
+ * A directive which installs the MaxValidator for any `formControlName`,
+ * `formControl`, or control with `ngModel` that also has a `min` attribute.
+ */
+export declare class MaxValidator implements Validator, OnChanges {
+    max: number | string;
+    private validator;
+    private onChange;
+    ngOnChanges(changes: SimpleChanges): void;
+    validate(c: AbstractControl): ValidationErrors | null;
+    registerOnValidatorChange(fn: () => void): void;
+    private createValidator;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MaxValidator, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MaxValidator, "[max][formControlName],[max][formControl],[max][ngModel]", never, { "max": { "alias": "max"; "required": false; }; }, {}, never, never, false, never>;
+}

package/input/input-number.d.ts

@@ -0,0 +1,33 @@
+import { ElementRef } from '@angular/core';
+import { NgControl } from '@angular/forms';
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare const BIG_STEP = 10;
+export declare const SMALL_STEP = 1;
+export declare function normalizeSplitter(value: string): string;
+export declare function isFloat(value: string): boolean;
+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 {
+    private elementRef;
+    private ngControl;
+    bigStep: number;
+    step: number;
+    min: number;
+    max: number;
+    value: any;
+    focused: boolean;
+    readonly stateChanges: Subject<void>;
+    get nativeElement(): HTMLInputElement;
+    constructor(elementRef: ElementRef, ngControl: NgControl, step: string, bigStep: string, min: string, max: string);
+    focusChanged(isFocused: boolean): void;
+    onKeyDown(event: KeyboardEvent): void;
+    onPaste(event: any): void;
+    stepUp(step: number): void;
+    stepDown(step: number): void;
+    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>;
+}

package/input/input-password.d.ts

@@ -0,0 +1,92 @@
+import { DoCheck, ElementRef, OnChanges, OnDestroy } from '@angular/core';
+import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
+import { CanUpdateErrorState, ErrorStateMatcher } from '@koobiq/components/core';
+import { KbqFormFieldControl } from '@koobiq/components/form-field';
+import { Subject } from 'rxjs';
+import { KbqInputMixinBase } from './input';
+import * as i0 from "@angular/core";
+export declare class KbqInputPassword extends KbqInputMixinBase implements KbqFormFieldControl<any>, OnChanges, OnDestroy, DoCheck, CanUpdateErrorState, OnChanges {
+    protected elementRef: ElementRef;
+    /** An object used to control when error messages are shown. */
+    errorStateMatcher: ErrorStateMatcher;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    focused: boolean;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    readonly stateChanges: Subject<any>;
+    readonly checkRule: Subject<void>;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    controlType: string;
+    elementType: string;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    placeholder: string;
+    protected uid: string;
+    protected previousNativeValue: any;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    get id(): string;
+    set id(value: string);
+    private _id;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    get required(): boolean;
+    set required(value: boolean);
+    private _required;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    get value(): string;
+    set value(value: string);
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    get empty(): boolean;
+    private _inputValueAccessor;
+    constructor(elementRef: ElementRef, ngControl: NgControl, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, inputValueAccessor: any);
+    ngOnChanges(): void;
+    ngOnDestroy(): void;
+    ngDoCheck(): void;
+    checkRules(): void;
+    toggleType(): void;
+    /** Focuses the input. */
+    focus(): void;
+    onBlur(): void;
+    /** Callback for the cases where the focused state of the input changes. */
+    focusChanged(isFocused: boolean): void;
+    onInput(): void;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    onContainerClick(): void;
+    /** Does some manual dirty checking on the native input `value` property. */
+    protected dirtyCheckNativeValue(): void;
+    /** 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>;
+}

package/input/input-value-accessor.d.ts

@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+export declare const KBQ_INPUT_VALUE_ACCESSOR: InjectionToken<{
+    value: any;
+}>;

package/input/input.d.ts

@@ -0,0 +1,117 @@
+import { DoCheck, ElementRef, OnChanges, OnDestroy } from '@angular/core';
+import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
+import { CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher } from '@koobiq/components/core';
+import { KbqFormFieldControl } from '@koobiq/components/form-field';
+import { Subject } from 'rxjs';
+import { KbqNumberInput } from './input-number';
+import * as i0 from "@angular/core";
+/** @docs-private */
+export declare class KbqInputBase {
+    defaultErrorStateMatcher: ErrorStateMatcher;
+    parentForm: NgForm;
+    parentFormGroup: FormGroupDirective;
+    ngControl: NgControl;
+    /**
+     * Emits whenever the component state changes and should cause the parent
+     * form-field to update. Implemented as part of `KbqFormFieldControl`.
+     * @docs-private
+     */
+    readonly stateChanges: Subject<void>;
+    constructor(defaultErrorStateMatcher: ErrorStateMatcher, parentForm: NgForm, parentFormGroup: FormGroupDirective, ngControl: NgControl);
+}
+/** @docs-private */
+export declare const KbqInputMixinBase: CanUpdateErrorStateCtor & typeof KbqInputBase;
+export declare class KbqInput extends KbqInputMixinBase implements KbqFormFieldControl<any>, OnChanges, OnDestroy, DoCheck, CanUpdateErrorState, OnChanges {
+    protected elementRef: ElementRef;
+    numberInput: KbqNumberInput;
+    /** An object used to control when error messages are shown. */
+    errorStateMatcher: ErrorStateMatcher;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    focused: boolean;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    readonly stateChanges: Subject<void>;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    controlType: string;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    placeholder: string;
+    protected uid: string;
+    protected previousNativeValue: any;
+    protected neverEmptyInputTypes: string[];
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    get id(): string;
+    set id(value: string);
+    private _id;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    get required(): boolean;
+    set required(value: boolean);
+    private _required;
+    /** Input type of the element. */
+    get type(): string;
+    set type(value: string);
+    private _type;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    get value(): string;
+    set value(value: string);
+    private inputValueAccessor;
+    constructor(elementRef: ElementRef, ngControl: NgControl, numberInput: KbqNumberInput, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, inputValueAccessor: any);
+    ngOnChanges(): void;
+    ngOnDestroy(): void;
+    ngDoCheck(): void;
+    /** Focuses the input. */
+    focus(): void;
+    onBlur(): void;
+    /** Callback for the cases where the focused state of the input changes. */
+    focusChanged(isFocused: boolean): void;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    get empty(): boolean;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    onContainerClick(): void;
+    /** Does some manual dirty checking on the native input `value` property. */
+    protected dirtyCheckNativeValue(): void;
+    /** Make sure the input is a supported type. */
+    protected validateType(): void;
+    /** Checks whether the input type is one of the types that are never empty. */
+    protected isNeverEmpty(): boolean;
+    /** 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>;
+}
+export declare class KbqInputMono {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqInputMono, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqInputMono, "input[mcInputMonospace]", ["KbqInputMonospace"], {}, {}, never, never, false, never>;
+}

package/input/input.module.d.ts

@@ -0,0 +1,15 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./input";
+import * as i2 from "./input-number";
+import * as i3 from "./input-password";
+import * as i4 from "./input-number-validators";
+import * as i5 from "@angular/common";
+import * as i6 from "@angular/cdk/a11y";
+import * as i7 from "@koobiq/components/core";
+import * as i8 from "@angular/forms";
+import * as i9 from "@koobiq/components/icon";
+export declare class KbqInputModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqInputModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqInputModule, [typeof i1.KbqInput, typeof i2.KbqNumberInput, typeof i3.KbqInputPassword, typeof i1.KbqInputMono, typeof i4.MinValidator, typeof i4.MaxValidator], [typeof i5.CommonModule, typeof i6.A11yModule, typeof i7.KbqCommonModule, typeof i8.FormsModule, typeof i9.KbqIconModule], [typeof i1.KbqInput, typeof i2.KbqNumberInput, typeof i3.KbqInputPassword, typeof i1.KbqInputMono, typeof i4.MinValidator, typeof i4.MaxValidator]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqInputModule>;
+}

package/input/input.scss

@@ -0,0 +1,48 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/common/input';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-input {
+    @include input.kbq-reset-input();
+
+    display: inline-block;
+    box-sizing: border-box;
+
+    width: 100%;
+    min-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)
+    );
+
+    padding:
+        calc(
+            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));;
+}
+
+input.kbq-input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+input.kbq-input[type="number"]::-webkit-inner-spin-button,
+input.kbq-input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+}
+
+/* remove default red border for HTML5 validation invalid fields in Firefox */
+input.kbq-input:invalid {
+    box-shadow: unset;
+}
+
+/* overwrite default placeholder opacity in Firefox */
+input.kbq-input::placeholder {
+    opacity: 1;
+}

package/input/public-api.d.ts

@@ -0,0 +1,6 @@
+export * from './input.module';
+export * from './input';
+export * from './input-number';
+export * from './input-password';
+export * from './input-value-accessor';
+export * from './input-number-validators';