@koobiq/components 16.0.0-beta.1

package/link/_link-theme.scss

@@ -0,0 +1,178 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin kbq-link($foreground, $link, $tokens) {
+    display: inline-block;
+
+    color: map.get($link, text);
+    text-decoration: none;
+    cursor: pointer;
+
+    transition: color ease-out 300ms;
+
+    &:focus {
+        outline: none;
+    }
+
+    /* stylelint-disable no-descending-specificity */
+    &:hover {
+        color: map.get($link, state-hover-text);
+        transition: color 0ms;
+
+        &.kbq-text-only,
+        &.kbq-text-with-icon .kbq-link__text {
+            border-bottom-color: map.get($link, state-hover-border-bottom);
+        }
+
+        & .kbq-icon {
+            color: map.get($link, state-hover-text);
+        }
+    }
+
+    &:active {
+        color: map.get($link, state-active-text);
+
+        &.kbq-text-only,
+        &.kbq-text-with-icon .kbq-link__text {
+            border-bottom-color: map.get($link, state-active-border-bottom);
+        }
+    }
+
+    &.cdk-keyboard-focused {
+        outline: map.get($link, state-focused-outline) solid map.get($link, link-size-state-focused-outline-width);
+
+        outline-offset: map.get($link, link-size-state-focused-outline-offset);
+    }
+
+    & .kbq-icon {
+        color: inherit;
+    }
+
+    &.kbq-text-only,
+    &.kbq-text-with-icon .kbq-link__text {
+        border-bottom-style: solid;
+        border-bottom-width: 1px;
+        border-bottom-color: map.get($link, border-bottom);
+    }
+
+    &.kbq-text-with-icon .kbq-link__text {
+        &:not(:first-child) {
+            margin-left: map.get($tokens, link-size-normal-content-padding);
+        }
+
+        &:not(:last-child) {
+            margin-right: map.get($tokens, link-size-normal-content-padding);
+        }
+    }
+
+    &.kbq-link_pseudo {
+        display: inline;
+
+        &.kbq-text-only,
+        &.kbq-text-with-icon .kbq-link__text {
+            border-bottom: none !important;
+        }
+    }
+
+    &.kbq-link_no-underline {
+        &.kbq-text-only,
+        &.kbq-text-with-icon .kbq-link__text {
+            border-bottom-color: transparent;
+        }
+    }
+
+    &.kbq-link_big {
+        &.kbq-text-with-icon .kbq-link__text {
+            &:not(:first-child) {
+                margin-left: map.get($tokens, link-size-big-content-padding);
+            }
+
+            &:not(:last-child) {
+                margin-right: map.get($tokens, link-size-big-content-padding);
+            }
+        }
+    }
+
+    &[disabled] {
+        color: map.get($foreground, text-disabled);
+
+        cursor: default;
+        pointer-events: none;
+
+        &.kbq-text-only,
+        &.kbq-text-with-icon .kbq-link__text {
+            border-bottom-color: map.get($link, border-bottom);
+        }
+
+        & .kbq-icon {
+            color: map.get($foreground, text-disabled);
+        }
+        /* stylelint-enable no-descending-specificity */
+    }
+}
+
+@mixin kbq-link-theme($theme) {
+    $foreground: map.get($theme, foreground);
+
+    $link: map.get(map.get($theme, components), link);
+
+    $tokens: map.get($theme, tokens);
+
+    .kbq-link:not(.kbq-link_use-visited) {
+        &:visited {
+            color: map.get($link, text);
+        }
+
+        @include kbq-link($foreground, $link, $tokens);
+    }
+
+    .kbq-link.kbq-link_use-visited {
+        &:visited {
+            color: map.get($link, state-visited-text);
+
+            &.kbq-text-only,
+            &.kbq-text-with-icon .kbq-link__text {
+                border-bottom-color: map.get($link, state-visited-border-bottom);
+            }
+
+            & .kbq-icon {
+                color: map.get($link, state-visited-text);
+            }
+        }
+
+        @include kbq-link($foreground, $link, $tokens);
+    }
+
+    @media print {
+        .kbq-link_print:not([disabled]) {
+            color: map.get($foreground, text);
+
+            &.kbq-text-only,
+            &.kbq-text-with-icon .kbq-link__text {
+                border-bottom: none;
+            }
+
+            &::after {
+                color: map.get($foreground, text);
+
+                content: ":\a" attr(print);
+                white-space: pre;
+            }
+        }
+    }
+}
+
+@mixin kbq-link-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .kbq-link {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, link-font-normal));
+    }
+
+    .kbq-link.kbq-link_big {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, link-font-big));
+    }
+}

package/link/index.d.ts

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

package/link/link.component.d.ts

@@ -0,0 +1,47 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { ElementRef, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { CanDisable, CanDisableCtor, HasTabIndex, HasTabIndexCtor } from '@koobiq/components/core';
+import { KbqIcon } from '@koobiq/components/icon';
+import * as i0 from "@angular/core";
+/** @docs-private */
+export declare class KbqLinkBase {
+}
+/** @docs-private */
+export declare const KbqLinkMixinBase: HasTabIndexCtor & CanDisableCtor & typeof KbqLinkBase;
+export declare const baseURLRegex: RegExp;
+export declare class KbqLink extends KbqLinkMixinBase implements OnDestroy, HasTabIndex, CanDisable {
+    private elementRef;
+    private focusMonitor;
+    private changeDetector;
+    get disabled(): any;
+    set disabled(value: any);
+    private _disabled;
+    get pseudo(): any;
+    set pseudo(value: any);
+    private _pseudo;
+    get noUnderline(): any;
+    set noUnderline(value: any);
+    private _noUnderline;
+    get caption(): any;
+    set caption(value: any);
+    private _caption;
+    get big(): any;
+    set big(value: any);
+    private _big;
+    get useVisited(): any;
+    set useVisited(value: any);
+    private _useVisited;
+    get hasIcon(): boolean;
+    set print(value: any);
+    private _print;
+    printMode: boolean;
+    printUrl: string;
+    icon: KbqIcon;
+    constructor(elementRef: ElementRef, focusMonitor: FocusMonitor, changeDetector: ChangeDetectorRef);
+    ngOnDestroy(): void;
+    focus(): void;
+    getHostElement(): any;
+    private updatePrintUrl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqLink, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqLink, "[kbq-link]", ["mcLink"], { "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "pseudo": { "alias": "pseudo"; "required": false; }; "noUnderline": { "alias": "noUnderline"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "big": { "alias": "big"; "required": false; }; "useVisited": { "alias": "useVisited"; "required": false; }; "print": { "alias": "print"; "required": false; }; }, {}, ["icon"], never, false, never>;
+}

package/link/link.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./link.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/cdk/a11y";
+export declare class KbqLinkModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqLinkModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqLinkModule, [typeof i1.KbqLink], [typeof i2.CommonModule, typeof i3.A11yModule], [typeof i1.KbqLink]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqLinkModule>;
+}

package/link/public-api.d.ts

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

package/list/_list-base.scss

@@ -0,0 +1,54 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/common/list';
+
+@use '../core/styles/tokens';
+
+@use '../core/styles/common';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+// This mixin provides all list-item styles, changing font size and height based on whether the list is in dense mode.
+@mixin kbq-list-item-base() {
+    position: relative;
+
+    display: flex;
+    align-items: center;
+
+    box-sizing: border-box;
+    height: var(--kbq-list-size-item-height, map.get($tokens, list-size-item-height));
+
+    border: 2px solid transparent;
+
+    padding-left: var(--kbq-list-size-horizontal-padding, map.get($tokens, list-size-horizontal-padding));
+
+    .kbq-list-text {
+        @include list.kbq-line-wrapper-base();
+
+        padding-right: var(--kbq-list-size-horizontal-padding, map.get($tokens, list-size-horizontal-padding));
+        display: inline-block;
+        @include common.kbq-truncate-line();
+    }
+
+    .kbq-divider {
+        position: absolute;
+
+        bottom: 0;
+        left: 0;
+
+        width: 100%;
+
+        margin: 0;
+
+        [dir='rtl'] & {
+            margin-left: auto;
+            margin-right: 0;
+        }
+
+        &.kbq-divider_inset {
+            position: absolute; // necessary to override card styles
+        }
+    }
+}

package/list/_list-theme.scss

@@ -0,0 +1,47 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin kbq-list-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    .kbq-list-item,
+    .kbq-list-option {
+        color: map.get($foreground, text);
+    }
+
+    .kbq-list-option {
+        outline: none;
+
+        &:hover {
+            background: map.get($background, overlay-hover);
+        }
+
+        &.kbq-focused {
+            border-color: map.get(map.get($theme, states), focused-color);
+        }
+
+        &.kbq-selected {
+            background: map.get(map.get($theme, states), selected-color);
+        }
+
+        &.kbq-disabled,
+        &[disabled] {
+            background: transparent;
+
+            color: map.get($foreground, text-disabled);
+        }
+    }
+}
+
+@mixin kbq-list-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .kbq-list-item,
+    .kbq-list-option {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-item));
+    }
+}

package/list/index.d.ts

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

package/list/list-selection.component.d.ts

@@ -0,0 +1,172 @@
+import { Clipboard } from '@angular/cdk/clipboard';
+import { SelectionModel } from '@angular/cdk/collections';
+import { AfterContentInit, ElementRef, EventEmitter, QueryList, ChangeDetectorRef, OnDestroy, OnInit, NgZone } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { FocusKeyManager, IFocusableOption } from '@koobiq/cdk/a11y';
+import { CanDisable, CanDisableCtor, HasTabIndexCtor, HasTabIndex, MultipleMode, KbqOptgroup, KbqOptionActionComponent, KbqTitleTextRef } from '@koobiq/components/core';
+import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
+import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
+import { Observable, Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+export interface KbqOptionEvent {
+    option: KbqListOption;
+}
+export declare const KBQ_SELECTION_LIST_VALUE_ACCESSOR: any;
+export declare class KbqListSelectionChange {
+    source: KbqListSelection;
+    option: KbqListOption;
+    constructor(source: KbqListSelection, option: KbqListOption);
+}
+export declare class KbqListSelectAllEvent<T> {
+    source: KbqListSelection;
+    options: T[];
+    constructor(source: KbqListSelection, options: T[]);
+}
+export declare class KbqListCopyEvent<T> {
+    source: KbqListSelection;
+    option: T;
+    constructor(source: KbqListSelection, option: T);
+}
+/** @docs-private */
+export declare class KbqListSelectionBase {
+    elementRef: ElementRef;
+    constructor(elementRef: ElementRef);
+}
+/** @docs-private */
+export declare const KbqListSelectionMixinBase: CanDisableCtor & HasTabIndexCtor & typeof KbqListSelectionBase;
+export declare class KbqListSelection extends KbqListSelectionMixinBase implements CanDisable, HasTabIndex, AfterContentInit, ControlValueAccessor {
+    private changeDetectorRef;
+    private clipboard;
+    keyManager: FocusKeyManager<KbqListOption>;
+    options: QueryList<KbqListOption>;
+    readonly onSelectAll: EventEmitter<KbqListSelectAllEvent<KbqListOption>>;
+    readonly onCopy: EventEmitter<KbqListCopyEvent<KbqListOption>>;
+    get autoSelect(): boolean;
+    set autoSelect(value: boolean);
+    private _autoSelect;
+    get noUnselectLast(): boolean;
+    set noUnselectLast(value: boolean);
+    private _noUnselectLast;
+    multipleMode: MultipleMode | null;
+    get multiple(): boolean;
+    horizontal: boolean;
+    get tabIndex(): any;
+    set tabIndex(value: any);
+    private _tabIndex;
+    userTabIndex: number | null;
+    get showCheckbox(): boolean;
+    readonly selectionChange: EventEmitter<KbqListSelectionChange>;
+    selectionModel: SelectionModel<KbqListOption>;
+    get optionFocusChanges(): Observable<KbqOptionEvent>;
+    get optionBlurChanges(): Observable<KbqOptionEvent>;
+    _value: string[] | null;
+    /** Emits whenever the component is destroyed. */
+    private readonly destroyed;
+    private optionFocusSubscription;
+    private optionBlurSubscription;
+    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, multiple: MultipleMode, clipboard: Clipboard);
+    /**
+     * Function used for comparing an option against the selected value when determining which
+     * options should appear as selected. The first argument is the value of an options. The second
+     * one is a value from the selected value. A boolean must be returned.
+     */
+    compareWith: (o1: any, o2: any) => boolean;
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    focus(): void;
+    blur(): void;
+    selectAll(): void;
+    deselectAll(): void;
+    updateScrollSize(): void;
+    setSelectedOptionsByClick(option: KbqListOption, shiftKey: boolean, ctrlKey: boolean): void;
+    setSelectedOptionsByKey(option: KbqListOption, shiftKey: boolean, ctrlKey: boolean): void;
+    selectActiveOptions(): void;
+    writeValue(values: string[]): void;
+    registerOnChange(fn: (value: any) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    getSelectedOptionValues(): string[];
+    toggleFocusedOption(): void;
+    canDeselectLast(listOption: KbqListOption): boolean;
+    getHeight(): number;
+    onTouched: () => void;
+    removeOptionFromList(option: KbqListOption): void;
+    onKeyDown(event: KeyboardEvent): void;
+    reportValueChange(): void;
+    emitChangeEvent(option: KbqListOption): void;
+    protected updateTabIndex(): void;
+    private onCopyDefaultHandler;
+    private resetOptions;
+    private dropSubscriptions;
+    private listenToOptionsFocus;
+    /** Checks whether any of the options is focused. */
+    private hasFocusedOption;
+    private getOptionByValue;
+    private setOptionsFromValues;
+    /**
+     * 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 options.
+     */
+    private isValidIndex;
+    private getOptionIndex;
+    private onChange;
+    private selectAllOptions;
+    private copyActiveOption;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqListSelection, [null, null, { attribute: "multiple"; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqListSelection, "kbq-list-selection", ["mcListSelection"], { "disabled": { "alias": "disabled"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "noUnselectLast": { "alias": "noUnselectLast"; "required": false; }; "horizontal": { "alias": "horizontal"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; }, { "onSelectAll": "onSelectAll"; "onCopy": "onCopy"; "selectionChange": "selectionChange"; }, ["options"], ["*"], false, never>;
+}
+/**
+ * Component for list-options of selection-list. Each list-option can automatically
+ * generate a checkbox and can put current item into the selectionModel of selection-list
+ * if the current item is selected.
+ */
+export declare class KbqListOption implements OnDestroy, OnInit, IFocusableOption, KbqTitleTextRef {
+    private elementRef;
+    private changeDetector;
+    private ngZone;
+    listSelection: KbqListSelection;
+    readonly group: KbqOptgroup;
+    hasFocus: boolean;
+    preventBlur: boolean;
+    readonly onFocus: Subject<KbqOptionEvent>;
+    readonly onBlur: Subject<KbqOptionEvent>;
+    actionButton: KbqOptionActionComponent;
+    tooltipTrigger: KbqTooltipTrigger;
+    dropdownTrigger: KbqDropdownTrigger;
+    text: ElementRef;
+    textElement: ElementRef;
+    checkboxPosition: 'before' | 'after';
+    /**
+     * This is set to true after the first OnChanges cycle so we don't clear the value of `selected`
+     * in the first cycle.
+     */
+    private inputsInitialized;
+    get value(): any;
+    set value(newValue: any);
+    private _value;
+    get disabled(): any;
+    set disabled(value: any);
+    private _disabled;
+    get showCheckbox(): any;
+    set showCheckbox(value: any);
+    private _showCheckbox;
+    get selected(): boolean;
+    set selected(value: boolean);
+    private _selected;
+    get tabIndex(): any;
+    constructor(elementRef: ElementRef<HTMLElement>, changeDetector: ChangeDetectorRef, ngZone: NgZone, listSelection: KbqListSelection, group: KbqOptgroup);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    toggle(): void;
+    getLabel(): any;
+    setSelected(selected: boolean): void;
+    getHeight(): number;
+    handleClick($event: any): void;
+    onKeydown($event: any): void;
+    focus(): void;
+    blur(): void;
+    getHostElement(): HTMLElement;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqListOption, [null, null, null, null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqListOption, "kbq-list-option", ["mcListOption"], { "checkboxPosition": { "alias": "checkboxPosition"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, {}, ["actionButton", "tooltipTrigger", "dropdownTrigger"], ["[kbq-icon]", "*", "kbq-option-action"], false, never>;
+}

package/list/list.component.d.ts

@@ -0,0 +1,18 @@
+import { AfterContentInit, ElementRef, QueryList } from '@angular/core';
+import { KbqLine } from '@koobiq/components/core';
+import * as i0 from "@angular/core";
+export declare class KbqList {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqList, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqList, "kbq-list", never, {}, {}, never, ["*"], false, never>;
+}
+export declare class KbqListItem implements AfterContentInit {
+    private elementRef;
+    lines: QueryList<KbqLine>;
+    constructor(elementRef: ElementRef);
+    ngAfterContentInit(): void;
+    handleFocus(): void;
+    handleBlur(): void;
+    getHostElement(): HTMLElement;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqListItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqListItem, "kbq-list-item, a[kbq-list-item]", never, {}, {}, ["lines"], ["[kbq-list-icon], [mcListIcon]", "[kbq-line], [mcLine]", "*"], false, never>;
+}

package/list/list.module.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./list.component";
+import * as i2 from "./list-selection.component";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/cdk/a11y";
+import * as i5 from "@koobiq/components/core";
+export declare class KbqListModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqListModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqListModule, [typeof i1.KbqList, typeof i2.KbqListSelection, typeof i1.KbqListItem, typeof i2.KbqListOption], [typeof i3.CommonModule, typeof i4.A11yModule, typeof i5.KbqPseudoCheckboxModule, typeof i5.KbqLineModule, typeof i5.KbqOptionModule], [typeof i1.KbqList, typeof i2.KbqListSelection, typeof i1.KbqListItem, typeof i2.KbqListOption, typeof i5.KbqOptionModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqListModule>;
+}

package/list/list.scss

@@ -0,0 +1,52 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use 'list-base';
+@use '../core/styles/common/list';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-list,
+.kbq-list-selection {
+    display: block;
+
+    outline: none;
+}
+
+.kbq-list-item,
+.kbq-list-option {
+    @include list.kbq-no-select;
+
+    @include list-base.kbq-list-item-base();
+
+    &.kbq-progress:after {
+        top: -2px;
+        right: -2px;
+        bottom: -2px;
+        left: -2px;
+    }
+
+    & .kbq-pseudo-checkbox,
+    & .kbq-icon {
+        margin-right: var(--kbq-list-size-icon-right-margin, map.get($tokens, list-size-icon-right-margin));
+    }
+
+    & .kbq-option-action {
+        display: none;
+    }
+
+    &:not([disabled]):hover,
+    &:not([disabled]).kbq-focused,
+    &:not([disabled]).kbq-action-button-focused {
+        & .kbq-option-action {
+            display: flex;
+        }
+    }
+}
+
+.kbq-list-option:not([disabled]):not(.kbq-disabled){
+    cursor: pointer;
+}

package/list/public-api.d.ts

@@ -0,0 +1,3 @@
+export * from './list.module';
+export * from './list.component';
+export * from './list-selection.component';

package/loader-overlay/_loader-overlay-theme.scss

@@ -0,0 +1,34 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin kbq-loader-overlay-theme($theme) {
+    $loader-overlay: map.get(map.get($theme, components), loader-overlay);
+
+    .kbq-loader-overlay {
+        background: map.get($loader-overlay, background);
+    }
+
+    .kbq-loader-overlay-text {
+        color: map.get($loader-overlay, text);
+    }
+
+    .kbq-loader-overlay-caption {
+        color: map.get($loader-overlay, caption);
+    }
+}
+
+@mixin kbq-loader-overlay-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .kbq-loader-overlay-text {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-text));
+    }
+
+    .kbq-loader-overlay-caption {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-caption));
+    }
+}
+

package/loader-overlay/index.d.ts

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