@koobiq/components 16.0.0-beta.1

package/form-field/form-field.scss

@@ -0,0 +1,143 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/forms/forms';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+/* stylelint-disable no-descending-specificity */
+
+.kbq-form-field {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+
+    .kbq-form-field__container {
+        box-sizing: border-box;
+    }
+
+    .kbq-form-field:not(.kbq-form-field-type-textarea) {
+        height: var(--kbq-form-field-size-height, map.get($tokens, form-field-size-height));
+    }
+
+    &,
+    .kbq-input,
+    .kbq-textarea {
+        border-radius: var(--kbq-form-field-size-border-radius, map.get($tokens, form-field-size-border-radius));
+    }
+
+    &:hover {
+        z-index: 1;
+    }
+
+    &.kbq-focused {
+        z-index: 2;
+    }
+
+    &.kbq-form-field_without-borders .kbq-form-field__container {
+        border-color: transparent;
+        box-shadow: none;
+    }
+
+    &.kbq-form-field_has-prefix {
+        .kbq-input {
+            padding-left: calc(
+                var(--kbq-form-field-size-icon-size, map.get($tokens, form-field-size-icon-size)) +
+                var(--kbq-form-field-size-icon-margin-left, map.get($tokens, form-field-size-icon-margin-left)) +
+                var(--kbq-form-field-size-icon-margin-right, map.get($tokens, form-field-size-icon-margin-right))
+            );
+        }
+    }
+
+    &.kbq-form-field_has-password-toggle,
+    &.kbq-form-field_has-cleaner,
+    &.kbq-form-field_has-stepper,
+    &.kbq-form-field_has-suffix {
+        .kbq-input {
+            padding-right: calc(
+                var(--kbq-form-field-size-icon-button-size, map.get($tokens, form-field-size-icon-button-size)) +
+                var(
+                    --kbq-form-field-size-icon-button-margin-left,
+                    map.get($tokens, form-field-size-icon-button-margin-left)
+                ) +
+                var(
+                    --kbq-form-field-size-icon-button-margin-right,
+                    map.get($tokens, form-field-size-icon-button-margin-right)
+                )
+            );
+        }
+    }
+}
+
+.kbq-form-field__container {
+    position: relative;
+
+    border-width: var(--kbq-form-field-size-border-width, map.get($tokens, form-field-size-border-width));
+    border-style: solid;
+    border-color: transparent;
+    border-radius: var(--kbq-form-field-size-border-radius, map.get($tokens, form-field-size-border-radius));
+}
+
+.kbq-form-field__prefix,
+.kbq-form-field__suffix {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 32px;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+.kbq-form-field__prefix {
+    left: 0;
+}
+
+.kbq-form-field__suffix {
+    right: 0;
+}
+
+.kbq-form-field__cleaner,
+.kbq-password-toggle,
+.kbq-stepper {
+    position: absolute;
+
+    top: 0;
+    bottom: 0;
+    right: 0;
+}
+
+.kbq-stepper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    width: var(--kbq-form-field-size-button-width, map.get($tokens, form-field-size-button-width));
+
+    .kbq-stepper-step-up,
+    .kbq-stepper-step-down {
+        cursor: pointer;
+        width: var(--kbq-form-field-size-button-width, map.get($tokens, form-field-size-button-width));
+        text-align: center;
+    }
+
+    .kbq-stepper-step-up {
+        transform: scaleY(-1);
+    }
+}
+
+.kbq-form-field__hint {
+    display: flex;
+    flex-direction: column;
+    margin-top: var(--kbq-form-field-hint-size-margin-top, map.get($tokens, form-field-hint-size-margin-top));
+
+    gap: var(--kbq-form-field-hint-size-gap, map.get($tokens, form-field-hint-size-gap));
+}
+
+/* stylelint-enable no-descending-specificity */

package/form-field/hint.d.ts

@@ -0,0 +1,17 @@
+import { ElementRef } from '@angular/core';
+import { CanColorCtor } from '@koobiq/components/core';
+import * as i0 from "@angular/core";
+/** @docs-private */
+export declare class KbqHintBase {
+    elementRef: ElementRef;
+    constructor(elementRef: ElementRef);
+}
+/** @docs-private */
+export declare const KbqHintMixinBase: CanColorCtor & typeof KbqHintBase;
+export declare class KbqHint extends KbqHintMixinBase {
+    id: string;
+    fillTextOff: boolean;
+    constructor(elementRef: ElementRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqHint, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqHint, "kbq-hint", ["mcHint"], { "color": { "alias": "color"; "required": false; }; "id": { "alias": "id"; "required": false; }; "fillTextOff": { "alias": "fillTextOff"; "required": false; }; }, {}, never, ["[kbq-icon]", "*"], false, never>;
+}

package/form-field/hint.scss

@@ -0,0 +1,15 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-hint {
+    display: block;
+
+    & .kbq-icon {
+        margin-right: var(--kbq-hint-size-content-padding, map-get($tokens, hint-size-content-padding));
+    }
+}

package/form-field/index.d.ts

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

package/form-field/password-hint.d.ts

@@ -0,0 +1,40 @@
+import { AfterContentInit, ChangeDetectorRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare enum PasswordRules {
+    Length = 0,
+    UpperLatin = 1,
+    LowerLatin = 2,
+    Digit = 3,
+    LatinAndSpecialSymbols = 4,
+    Custom = 5
+}
+export declare const regExpPasswordValidator: {
+    2: RegExp;
+    1: RegExp;
+    3: RegExp;
+    4: RegExp;
+};
+export declare class KbqPasswordHint implements AfterContentInit {
+    private changeDetectorRef;
+    private formField;
+    id: string;
+    rule: PasswordRules | any;
+    min: number;
+    max: number;
+    regex: RegExp | null;
+    hasError: boolean;
+    checked: boolean;
+    get icon(): string;
+    private checkRule;
+    private get control();
+    private lastControlValue;
+    constructor(changeDetectorRef: ChangeDetectorRef, formField: any);
+    ngAfterContentInit(): void;
+    private checkValue;
+    private checkLengthRule;
+    private checkRegexRule;
+    private checkSpecialSymbolsRegexRule;
+    private isValueChanged;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPasswordHint, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPasswordHint, "kbq-password-hint", never, { "id": { "alias": "id"; "required": false; }; "rule": { "alias": "rule"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "regex": { "alias": "regex"; "required": false; }; }, {}, never, ["*"], false, never>;
+}

package/form-field/password-hint.scss

@@ -0,0 +1,11 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-password-hint {
+    display: block;
+}

package/form-field/password-toggle.d.ts

@@ -0,0 +1,18 @@
+import { Directionality } from '@angular/cdk/bidi';
+import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
+import { ElementRef, NgZone, TemplateRef, ViewContainerRef } from '@angular/core';
+import { KbqFormFieldRef } from '@koobiq/components/core';
+import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
+import * as i0 from "@angular/core";
+export declare class KbqPasswordToggle extends KbqTooltipTrigger {
+    private formField;
+    get content(): string | TemplateRef<any>;
+    set content(content: string | TemplateRef<any>);
+    mcTooltipHidden: string | TemplateRef<any>;
+    get hidden(): boolean;
+    get icon(): string;
+    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, formField: KbqFormFieldRef);
+    toggle(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPasswordToggle, [null, null, null, null, null, null, { optional: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPasswordToggle, "kbq-password-toggle", ["mcPasswordToggle"], { "content": { "alias": "mcTooltipNotHidden"; "required": false; }; "mcTooltipHidden": { "alias": "mcTooltipHidden"; "required": false; }; }, {}, never, never, false, never>;
+}

package/form-field/password-toggle.scss

@@ -0,0 +1,29 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
+.kbq-password-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: var(--kbq-form-field-size-icon-button-size, map.get($tokens, form-field-size-icon-button-size));
+    margin-right: var(
+        --kbq-form-field-size-icon-button-margin-right,
+        map.get($tokens, form-field-size-icon-button-margin-right)
+    );
+    height: 100%;
+
+    &::-moz-focus-inner {
+        border: 0;
+    }
+
+    &:focus {
+        outline: none;
+    }
+}

package/form-field/prefix.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class KbqPrefix {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPrefix, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPrefix, "[mcPrefix]", never, {}, {}, never, never, false, never>;
+}

package/form-field/public-api.d.ts

@@ -0,0 +1,12 @@
+export * from './form-field.module';
+export * from './form-field';
+export * from './form-field-control';
+export * from './form-field-errors';
+export * from './hint';
+export * from './password-hint';
+export * from './password-toggle';
+export * from './suffix';
+export * from './prefix';
+export * from './cleaner';
+export * from './stepper';
+export * from './validate.directive';

package/form-field/stepper.d.ts

@@ -0,0 +1,11 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class KbqStepper {
+    readonly stepUp: EventEmitter<void>;
+    readonly stepDown: EventEmitter<void>;
+    connectTo(numberInput: any): void;
+    onStepUp($event: MouseEvent): void;
+    onStepDown($event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqStepper, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqStepper, "kbq-stepper", never, {}, { "stepUp": "stepUp"; "stepDown": "stepDown"; }, never, never, false, never>;
+}

package/form-field/stepper.scss

@@ -0,0 +1,33 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
+.kbq-stepper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    width: var(--kbq-form-field-size-icon-button-size, map.get($tokens, form-field-size-icon-button-size));
+    margin-right: var(
+        --kbq-form-field-size-icon-button-margin-right,
+        map.get($tokens, form-field-size-icon-button-margin-right)
+    );
+    height: 100%;
+
+    .kbq-stepper-step-up,
+    .kbq-stepper-step-down {
+        cursor: pointer;
+        width: var(--kbq-form-field-size-button-width, map.get($tokens, form-field-size-button-width));
+        text-align: center;
+    }
+
+    .kbq-stepper-step-up {
+        transform: scaleY(-1);
+    }
+}

package/form-field/suffix.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class KbqSuffix {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSuffix, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSuffix, "[mcSuffix]", never, {}, {}, never, never, false, never>;
+}

package/form-field/validate.directive.d.ts

@@ -0,0 +1,33 @@
+import { AfterContentInit, ChangeDetectorRef } from '@angular/core';
+import { AbstractControl, FormGroupDirective, NgControl, NgForm, Validator, ValidatorFn } from '@angular/forms';
+import { KbqValidationOptions } from '@koobiq/components/core';
+import { KbqFormFieldControl } from './form-field-control';
+import * as i0 from "@angular/core";
+export declare class KbqValidateDirective implements AfterContentInit {
+    private formFieldControl;
+    rawValidators: Validator[];
+    private ngControl;
+    private parentForm;
+    private parentFormGroup;
+    private mcValidation;
+    private cdr;
+    get isNgModel(): boolean;
+    get isFormControlName(): boolean;
+    get isFormControl(): boolean;
+    get validationControl(): any;
+    get parent(): NgForm;
+    get hasNotSubmittedParent(): boolean;
+    constructor(formFieldControl: KbqFormFieldControl<any>, rawValidators: Validator[], ngControl: NgControl, parentForm: NgForm, parentFormGroup: FormGroupDirective, mcValidation: KbqValidationOptions, cdr: ChangeDetectorRef);
+    ngAfterContentInit(): void;
+    setValidState(control: AbstractControl, validator: ValidatorFn): void;
+    /** This function do next:
+     * - run validation on submitting parent form
+     * - prevent validation in required validator if form doesn't submitted
+     * - if control has focus validation will be prevented
+     */
+    setMosaicValidation(): void;
+    setMosaicValidationForModelControl(): void;
+    setMosaicValidationForFormControl(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqValidateDirective, [null, { optional: true; self: true; }, { optional: true; self: true; }, { optional: true; }, { optional: true; }, { optional: true; }, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqValidateDirective, "        input[mcInput],        input[mcInputPassword],        input[mcTimepicker],        input[mcDatepicker],        textarea[mcTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", ["KbqValidate"], {}, {}, never, never, false, never>;
+}

package/icon/_icon-theme.scss

@@ -0,0 +1,267 @@
+@use 'sass:map';
+
+@use '../core/styles/theming/theming' as *;
+
+
+@mixin kbq-icon-theme($themeObj) {
+    $icon: map.get(map.get($themeObj, components), icon);
+
+    $theme: map.get($icon, theme);
+    $contrast: map.get($icon, contrast);
+    $fade-contrast: map.get($icon, fade-contrast);
+    $error: map.get($icon, error);
+    $success: map.get($icon, success);
+
+    .kbq-icon {
+        &.kbq-theme {
+            color: map.get($theme, color);
+        }
+
+        &.kbq-contrast {
+            color: map.get($contrast, color);
+        }
+
+        &.kbq-contrast-fade {
+            color: map.get($fade-contrast, color);
+        }
+
+        &.kbq-error {
+            color: map.get($error, color);
+        }
+
+        &.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);
+        }
+    }
+}