@koobiq/components 16.0.0-beta.1

package/tabs/tabs.module.d.ts

@@ -0,0 +1,21 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./tab-group.component";
+import * as i2 from "./tab-label.directive";
+import * as i3 from "./tab.component";
+import * as i4 from "./tab-label-wrapper.directive";
+import * as i5 from "./tab-nav-bar/tab-nav-bar";
+import * as i6 from "./tab-body.component";
+import * as i7 from "./tab-header.component";
+import * as i8 from "./tab-content.directive";
+import * as i9 from "@angular/common";
+import * as i10 from "@angular/cdk/portal";
+import * as i11 from "@angular/cdk/a11y";
+import * as i12 from "@angular/cdk/scrolling";
+import * as i13 from "@koobiq/components/core";
+import * as i14 from "@koobiq/components/icon";
+import * as i15 from "@koobiq/components/tooltip";
+export declare class KbqTabsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTabsModule, [typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i4.KbqTabLabelWrapper, typeof i5.KbqTabNav, typeof i5.KbqTabLink, typeof i6.KbqTabBody, typeof i6.KbqTabBodyPortal, typeof i7.KbqTabHeader, typeof i8.KbqTabContent, typeof i1.KbqOldTabsCssStyler, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler], [typeof i9.CommonModule, typeof i10.PortalModule, typeof i11.A11yModule, typeof i12.CdkScrollableModule, typeof i13.KbqCommonModule, typeof i14.KbqIconModule, typeof i15.KbqToolTipModule], [typeof i13.KbqCommonModule, typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i5.KbqTabNav, typeof i5.KbqTabLink, typeof i8.KbqTabContent, typeof i1.KbqOldTabsCssStyler, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqTabsModule>;
+}

package/tags/_tag-theme.scss

@@ -0,0 +1,100 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/theming/theming' as *;
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin kbq-tag-state($state) {
+    background: map.get($state, background);
+
+    & .kbq-icon {
+        color: map.get($state, icon);
+    }
+
+    & .kbq-tag__text {
+        color: map.get($state, text);
+    }
+}
+
+@mixin kbq-tag-color($tag) {
+    $default: map.get($tag, default);
+
+    @include kbq-tag-state($default);
+
+    &:hover,
+    &.kbq-hovered {
+        $hover: map.get($tag, hover);
+
+        @include kbq-tag-state($hover);
+    }
+
+    &.kbq-focused {
+        $focus: map.get($tag, focus);
+
+        @include kbq-tag-state($focus);
+
+        box-shadow: inset 0 0 0 1px map.get($focus, outline), 0 0 0 1px map.get($focus, outline);
+    }
+
+    &.kbq-disabled {
+        $disabled: map.get($tag, disabled);
+
+        @include kbq-tag-state($disabled);
+    }
+}
+
+@mixin kbq-tag-theme($theme) {
+    $tag: map.get(map.get($theme, components), tag);
+
+    .kbq-tag {
+        &.kbq-theme {
+            @include kbq-tag-color(map.get($tag, theme-fade-on));
+        }
+
+        &.kbq-contrast {
+            @include kbq-tag-color(map.get($tag, contrast-fade-on));
+        }
+
+        &.kbq-error {
+            @include kbq-tag-color(map.get($tag, error-fade-on));
+        }
+
+        //&.kbq-disabled {
+        //    color: map.get($foreground, text-disabled);
+        //
+        //    border-color: transparent;
+        //
+        //    background-color: map.get($background, background-disabled);
+        //}
+    }
+
+    //.kbq-tag-input {
+    //    color: map.get($foreground, text);
+    //
+    //    &::placeholder {
+    //        color: map.get($foreground, text-disabled);
+    //    }
+    //
+    //    &::-ms-input-placeholder {
+    //        color: map.get($foreground, text-disabled);
+    //    }
+    //
+    //    &::-webkit-input-placeholder {
+    //        color: map.get($foreground, text-disabled);
+    //    }
+    //}
+}
+
+@mixin kbq-tag-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .kbq-tag {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, tag-font-default));
+    }
+
+    .kbq-tag-input {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, tag-input-font-default));
+    }
+}
+

package/tags/index.d.ts

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

package/tags/public-api.d.ts

@@ -0,0 +1,5 @@
+export * from './tag.module';
+export * from './tag.component';
+export * from './tag-list.component';
+export * from './tag-input';
+export * from './tag-default-options';

package/tags/tag-default-options.d.ts

@@ -0,0 +1,8 @@
+import { InjectionToken } from '@angular/core';
+/** Default options, for the chips module, that can be overridden. */
+export interface KbqTagsDefaultOptions {
+    /** The list of key codes that will trigger a chipEnd event. */
+    separatorKeyCodes: number[];
+}
+/** Injection token to be used to override the default options for the chips module. */
+export declare const KBQ_TAGS_DEFAULT_OPTIONS: InjectionToken<KbqTagsDefaultOptions>;

package/tags/tag-input.d.ts

@@ -0,0 +1,87 @@
+import { ElementRef, EventEmitter, OnChanges, Renderer2 } from '@angular/core';
+import { NgControl } from '@angular/forms';
+import { KbqTrim } from '@koobiq/components/form-field';
+import { KbqTagsDefaultOptions } from './tag-default-options';
+import { KbqTagList } from './tag-list.component';
+import { KbqTagTextControl } from './tag-text-control';
+import * as i0 from "@angular/core";
+/** Represents an input event on a `mcTagInput`. */
+export interface KbqTagInputEvent {
+    /** The native `<input>` element that the event is being fired for. */
+    input: HTMLInputElement;
+    /** The value of the input. */
+    value: string;
+}
+export interface KbqTagSeparator {
+    symbol: RegExp;
+    key: string;
+}
+/**
+ * Directive that adds tag-specific behaviors to an input element inside `<kbq-form-field>`.
+ * May be placed inside or outside of an `<kbq-tag-list>`.
+ */
+export declare class KbqTagInput implements KbqTagTextControl, OnChanges {
+    private elementRef;
+    private renderer;
+    private defaultOptions;
+    private trimDirective;
+    ngControl: NgControl;
+    /** Whether the control is focused. */
+    focused: boolean;
+    /**
+     * The list of key codes that will trigger a tagEnd event.
+     *
+     * Defaults to `[ENTER]`.
+     */
+    set separatorKeyCodes(value: number[]);
+    private _separatorKeyCodes;
+    get separators(): KbqTagSeparator[];
+    private _separators;
+    /** Emitted when a tag is to be added. */
+    tagEnd: EventEmitter<KbqTagInputEvent>;
+    /** The input's placeholder text. */
+    placeholder: string;
+    /** Unique id for the input. */
+    id: string;
+    /** Register input for tag list */
+    set tagList(value: KbqTagList);
+    private _tagList;
+    /**
+     * Whether or not the tagEnd event will be emitted when the input is blurred.
+     */
+    get addOnBlur(): boolean;
+    set addOnBlur(value: boolean);
+    private _addOnBlur;
+    /** Whether the input is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    /** Whether the input is empty. */
+    get empty(): boolean;
+    countOfSymbolsForUpdateWidth: number;
+    private oneSymbolWidth;
+    /** The native input element to which this directive is attached. */
+    private inputElement;
+    constructor(elementRef: ElementRef<HTMLInputElement>, renderer: Renderer2, defaultOptions: KbqTagsDefaultOptions, trimDirective: KbqTrim, ngControl: NgControl);
+    ngOnChanges(): void;
+    onKeydown(event: KeyboardEvent): void;
+    /** Checks to see if the blur should emit the (tagEnd) event. */
+    blur(): void;
+    triggerValidation(): void;
+    /** Checks to see if the (tagEnd) event needs to be emitted. */
+    emitTagEnd(): void;
+    onInput(): void;
+    onPaste($event: ClipboardEvent): void;
+    updateInputWidth(): void;
+    onFocus(): void;
+    /** Focuses the input. */
+    focus(): void;
+    private trimValue;
+    private getSeparatorByKeyCode;
+    private hasControl;
+    private setDefaultInputWidth;
+    /** Checks whether a keycode is one of the configured separators. */
+    private isSeparatorKey;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagInput, [null, null, null, { optional: true; self: true; }, { optional: true; self: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagInput, "input[mcTagInputFor]", ["mcTagInput", "mcTagInputFor"], { "separatorKeyCodes": { "alias": "mcTagInputSeparatorKeyCodes"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tagList": { "alias": "mcTagInputFor"; "required": false; }; "addOnBlur": { "alias": "mcTagInputAddOnBlur"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "tagEnd": "mcTagInputTokenEnd"; }, never, never, false, never>;
+}

package/tags/tag-list.component.d.ts

@@ -0,0 +1,246 @@
+import { Directionality } from '@angular/cdk/bidi';
+import { SelectionModel } from '@angular/cdk/collections';
+import { AfterContentInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, OnDestroy, OnInit, QueryList } from '@angular/core';
+import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
+import { FocusKeyManager } from '@koobiq/cdk/a11y';
+import { CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher } from '@koobiq/components/core';
+import { KbqCleaner, KbqFormFieldControl } from '@koobiq/components/form-field';
+import { Observable, Subject } from 'rxjs';
+import { KbqTagTextControl } from './tag-text-control';
+import { KbqTag, KbqTagEvent, KbqTagSelectionChange } from './tag.component';
+import * as i0 from "@angular/core";
+/** @docs-private */
+export declare class KbqTagListBase {
+    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 KbqTagListMixinBase: CanUpdateErrorStateCtor & typeof KbqTagListBase;
+/** Change event object that is emitted when the tag list value has changed. */
+export declare class KbqTagListChange {
+    source: KbqTagList;
+    value: any;
+    constructor(source: KbqTagList, value: any);
+}
+export declare class KbqTagList extends KbqTagListMixinBase implements KbqFormFieldControl<any>, ControlValueAccessor, AfterContentInit, DoCheck, OnInit, OnDestroy, CanUpdateErrorState {
+    protected elementRef: ElementRef<HTMLElement>;
+    private changeDetectorRef;
+    private dir;
+    readonly controlType: string;
+    /** Combined stream of all of the child tags' selection change events. */
+    get tagSelectionChanges(): Observable<KbqTagSelectionChange>;
+    /** Combined stream of all of the child tags' focus change events. */
+    get tagFocusChanges(): Observable<KbqTagEvent>;
+    /** Combined stream of all of the child tags' blur change events. */
+    get tagBlurChanges(): Observable<KbqTagEvent>;
+    /** Combined stream of all of the child tags' remove change events. */
+    get tagRemoveChanges(): Observable<KbqTagEvent>;
+    /** The array of selected tags inside tag list. */
+    get selected(): KbqTag[] | KbqTag;
+    get canShowCleaner(): boolean;
+    /** Whether the user should be allowed to select multiple tags. */
+    get multiple(): boolean;
+    set multiple(value: boolean);
+    /**
+     * A function to compare the option values with the selected values. The first argument
+     * is a value from an option. The second is a value from the selection. A boolean
+     * should be returned.
+     */
+    get compareWith(): (o1: any, o2: any) => boolean;
+    set compareWith(fn: (o1: any, o2: any) => boolean);
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    get value(): any;
+    set value(value: any);
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    get id(): string;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    get required(): boolean;
+    set required(value: boolean);
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    get placeholder(): string;
+    set placeholder(value: string);
+    /** Whether any tags or the mcTagInput inside of this tag-list has focus. */
+    get focused(): boolean;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    get empty(): boolean;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    get shouldLabelFloat(): boolean;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /**
+     * Whether or not this tag list is selectable. When a tag list is not selectable,
+     * the selected states for all the tags inside the tag list are always ignored.
+     */
+    get selectable(): boolean;
+    set selectable(value: boolean);
+    get tabIndex(): number;
+    set tabIndex(value: number);
+    private _tabIndex;
+    /**
+     * Event that emits whenever the raw value of the tag-list changes. This is here primarily
+     * to facilitate the two-way binding for the `value` input.
+     * @docs-private
+     */
+    readonly valueChange: EventEmitter<any>;
+    uid: string;
+    /**
+     * User defined tab index.
+     * When it is not null, use user defined tab index. Otherwise use tabIndex
+     */
+    userTabIndex: number | null;
+    keyManager: FocusKeyManager<KbqTag>;
+    selectionModel: SelectionModel<KbqTag>;
+    tagChanges: EventEmitter<any>;
+    /** An object used to control when error messages are shown. */
+    errorStateMatcher: ErrorStateMatcher;
+    /** Orientation of the tag list. */
+    orientation: 'horizontal' | 'vertical';
+    /** Event emitted when the selected tag list value has been changed by the user. */
+    readonly change: EventEmitter<KbqTagListChange>;
+    cleaner: KbqCleaner;
+    /** The tag components contained within this tag list. */
+    tags: QueryList<KbqTag>;
+    private _value;
+    private _required;
+    private _placeholder;
+    private _disabled;
+    private _selectable;
+    /** The tag input to add more tags */
+    private tagInput;
+    private _multiple;
+    /**
+     * When a tag is destroyed, we store the index of the destroyed tag until the tags
+     * query list notifies about the update. This is necessary because we cannot determine an
+     * appropriate tag that should receive focus until the array of tags updated completely.
+     */
+    private lastDestroyedTagIndex;
+    /** Subject that emits when the component has been destroyed. */
+    private destroyed;
+    /** Subscription to focus changes in the tags. */
+    private tagFocusSubscription;
+    /** Subscription to blur changes in the tags. */
+    private tagBlurSubscription;
+    /** Subscription to selection changes in tags. */
+    private tagSelectionSubscription;
+    /** Subscription to remove changes in tags. */
+    private tagRemoveSubscription;
+    constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, defaultErrorStateMatcher: ErrorStateMatcher, dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, ngControl: NgControl);
+    ngAfterContentInit(): void;
+    ngOnInit(): void;
+    ngDoCheck(): void;
+    ngOnDestroy(): void;
+    onTouched: () => void;
+    onChange: (value: any) => void;
+    /** Associates an HTML input element with this tag list. */
+    registerInput(inputElement: KbqTagTextControl): void;
+    writeValue(value: any): void;
+    registerOnChange(fn: (value: any) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     * @docs-private
+     */
+    onContainerClick(event: MouseEvent): void;
+    /**
+     * Focuses the first non-disabled tag in this tag list, or the associated input when there
+     * are no eligible tags.
+     */
+    focus(): void;
+    /** Attempt to focus an input if we have one. */
+    focusInput(): void;
+    /**
+     * Pass events to the keyboard manager. Available here for tests.
+     */
+    keydown(event: KeyboardEvent): void;
+    setSelectionByValue(value: any, isUserInput?: boolean): void;
+    /** When blurred, mark the field as touched when focus moved outside the tag list. */
+    blur(): void;
+    /** Mark the field as touched */
+    markAsTouched(): void;
+    /**
+     * Check the tab index as you should not be allowed to focus an empty list.
+     */
+    protected updateTabIndex(): void;
+    /**
+     * If the amount of tags changed, we need to update the
+     * key manager state and focus the next closest tag.
+     */
+    protected updateFocusForDestroyedTags(): void;
+    private _compareWith;
+    /**
+     * Utility to ensure all indexes are valid.
+     *
+     * @param index The index to be checked.
+     * @returns True if the index is valid for our list of tags.
+     */
+    private isValidIndex;
+    private isInputEmpty;
+    /**
+     * Finds and selects the tag based on its value.
+     * @returns Tag that has the corresponding value.
+     */
+    private selectValue;
+    private initializeSelection;
+    /**
+     * Deselects every tag in the list.
+     * @param skip Tag that should not be deselected.
+     */
+    private clearSelection;
+    /**
+     * Sorts the model values, ensuring that they keep the same
+     * order that they have in the panel.
+     */
+    private sortValues;
+    /** Emits change event to set the model value. */
+    private propagateChanges;
+    private propagateTagsChanges;
+    private resetTags;
+    private dropSubscriptions;
+    /** Listens to user-generated selection events on each tag. */
+    private listenToTagsSelection;
+    /** Listens to user-generated selection events on each tag. */
+    private listenToTagsFocus;
+    private listenToTagsRemoved;
+    /** Checks whether an event comes from inside a tag element. */
+    private originatesFromTag;
+    /** Checks whether any of the tags is focused. */
+    private hasFocusedTag;
+    /** Syncs the list's disabled state with the individual tags. */
+    private syncTagsDisabledState;
+    /** Revalidate control. */
+    private revalidate;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagList, [null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTagList, "kbq-tag-list", ["mcTagList"], { "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["cleaner", "tags"], ["*", "kbq-cleaner"], false, never>;
+}

package/tags/tag-list.scss

@@ -0,0 +1,66 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-tag-list {
+    display: flex;
+    flex-direction: row;
+
+    box-sizing: border-box;
+}
+
+.kbq-tag-input {
+    border: none;
+    outline: none;
+    background: transparent;
+
+    min-height: 22px;
+}
+
+.kbq-tags-list__list-container {
+    display: flex;
+    flex-wrap: wrap;
+    flex: 1 1 100%;
+
+    box-sizing: border-box;
+
+    min-width: 0;
+
+    gap: var(--kbq-tag-list-size-content-gap, map.get($tokens, tag-list-size-content-gap));
+
+    & .kbq-tag-input {
+        max-width: 100%;
+
+        flex: 1 1 auto;
+
+        margin-left: var(--kbq-tag-input-size-content-gap, map.get($tokens, tag-input-size-content-gap));
+    }
+}
+
+.kbq-tags-list__cleaner {
+    & .kbq-cleaner {
+        max-height: 24px;
+    }
+}
+
+.kbq-form-field-type-tag-list {
+    & .kbq-form-field__container {
+        padding-top: calc(
+            var(--kbq-tag-input-size-padding-vertical, map.get($tokens, tag-input-size-padding-vertical)) -
+            var(--kbq-form-field-size-border-width, map.get($tokens, form-field-size-border-width))
+        );
+
+        padding-bottom: calc(
+            var(--kbq-tag-input-size-padding-vertical, map.get($tokens, tag-input-size-padding-vertical)) -
+            var(--kbq-form-field-size-border-width, map.get($tokens, form-field-size-border-width))
+        );
+
+        padding-left: var(
+            --kbq-tag-input-size-padding-left, map.get($tokens, tag-input-size-padding-left)
+        );
+    }
+}

package/tags/tag-text-control.d.ts

@@ -0,0 +1,10 @@
+/** Interface for a text control that is used to drive interaction with a kbq-tag-list. */
+import { NgControl } from '@angular/forms';
+export interface KbqTagTextControl {
+    id: string;
+    placeholder: string;
+    focused: boolean;
+    empty: boolean;
+    ngControl?: NgControl;
+    focus(): void;
+}