@koobiq/components 16.0.0-beta.1

package/button-toggle/button-toggle.scss

@@ -0,0 +1,163 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/common';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-button-toggle-group {
+    box-sizing: border-box;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: map.get($tokens, size-3xs);
+
+    border-width: var(
+        --kbq-button-toggle-group-size-border-width,
+        map.get($tokens, button-toggle-group-size-border-width)
+    );
+    border-radius: var(
+        --kbq-button-toggle-group-size-border-radius,
+        map.get($tokens, button-toggle-group-size-border-radius)
+    );
+    border-style: solid;
+    padding: var(
+        --kbq-button-toggle-group-size-padding,
+        map.get($tokens, button-toggle-group-size-padding)
+    );
+
+    .kbq-button-toggle {
+        display: flex;
+        overflow: hidden;
+        justify-content: flex-start;
+
+        border-radius: var(
+            --kbq-button-toggle-size-border-radius,
+            map.get($tokens, button-toggle-size-border-radius)
+        );
+
+        > .kbq-button,
+        > .kbq-button-icon {
+            border: none;
+            border-width: var(
+                --kbq-button-toggle-size-border-width,
+                map.get($tokens, button-toggle-size-border-width)
+            );
+            border-radius: var(
+                --kbq-button-toggle-size-border-radius,
+                map.get($tokens, button-toggle-size-border-radius)
+            );
+            min-width: var(
+                --kbq-button-toggle-size-min-width,
+                map.get($tokens, button-toggle-size-min-width)
+            );
+            padding-left: var(
+                --kbq-button-toggle-size-horizontal-padding,
+                map.get($tokens, button-toggle-size-horizontal-padding)
+            );
+            padding-right: var(
+                --kbq-button-toggle-size-horizontal-padding,
+                map.get($tokens, button-toggle-size-horizontal-padding)
+            );
+
+            & .kbq-button-wrapper {
+                width: 100%;
+            }
+
+            .kbq-button-toggle-wrapper {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+                display: inline-block;
+                width: 100%;
+
+                .kbq-icon {
+                    line-height: 20px;
+                    vertical-align: baseline;
+                }
+            }
+        }
+
+        &.kbq-button-toggle-icon-text {
+            > .kbq-button,
+            > .kbq-button-icon {
+                padding-left: var(
+                    --kbq-button-toggle-size-left-icon-padding,
+                    map.get($tokens, button-toggle-size-left-icon-padding)
+                );
+
+                & .kbq-icon {
+                    margin-right: map.get($tokens, size-xxs);
+                }
+            }
+        }
+
+        &[disabled] {
+            outline: 0;
+        }
+    }
+
+    &:not(.kbq-button-toggle_vertical) {
+        height: 32px;
+
+        .kbq-button-toggle {
+            > .kbq-button,
+            > .kbq-button-icon {
+                height: 28px;
+                min-height: 28px;
+            }
+
+            &.kbq-button-toggle-icon {
+                width: var(
+                    --kbq-button-icon-toggle-size-width,
+                    map.get($tokens, icon-button-toggle-size-width)
+                );
+
+                > .kbq-button,
+                > .kbq-button-icon {
+                    width: var(
+                        --kbq-button-icon-toggle-size-width,
+                        map.get($tokens, icon-button-toggle-size-width)
+                    );
+                }
+            }
+        }
+    }
+}
+
+/* stylelint-disable no-descending-specificity */
+.kbq-button-toggle_vertical {
+    flex-direction: column;
+
+    .kbq-button-toggle + .kbq-button-toggle {
+        border-left: none;
+        border-right: none;
+    }
+
+    .kbq-button-toggle {
+        width: 100%;
+
+        > .kbq-button,
+        > .kbq-button-icon {
+            width: 100%;
+            border-width: var(
+                --kbq-button-toggle-size-border-width,
+                map.get($tokens, button-toggle-size-border-width)
+            );
+
+            border-radius: var(
+                --kbq-button-toggle-size-border-radius,
+                map.get($tokens, button-toggle-size-border-radius)
+            );
+        }
+    }
+}
+
+/* stylelint-enable no-descending-specificity */
+
+.kbq-button-toggle-standalone {
+    box-shadow: none;
+}

package/button-toggle/index.d.ts

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

package/button-toggle/public-api.d.ts

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

package/card/_card-theme.scss

@@ -0,0 +1,61 @@
+@use 'sass:map';
+
+
+@mixin kbq-card-type($card) {
+    box-shadow:
+        inset -1px 0 0 0 map.get($card, shadow),
+        inset 0 1px 0 0 map.get($card, shadow),
+        inset 0 -1px 0 0 map.get($card, shadow);
+
+    background-color: map.get($card, background);
+
+    border-left-color: map.get($card, vertical-line);
+}
+
+@mixin kbq-card-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $card: map.get(map.get($theme, components), card);
+    $popup: map.get(map.get($theme, components), popup);
+
+    $is-dark: map.get($theme, is-dark);
+
+    .kbq-card {
+        color: map.get($foreground, text);
+
+        &.kbq-card_error {
+            @include kbq-card-type(map.get($card, error));
+        }
+
+        &.kbq-card_warning {
+            @include kbq-card-type(map.get($card, warning));
+        }
+
+        &.kbq-card_success {
+            @include kbq-card-type(map.get($card, success));
+        }
+
+        &.kbq-card_info {
+            @include kbq-card-type(map.get($card, info));
+        }
+
+        &.kbq-card_white {
+            background-color: map.get($popup, background);
+        }
+
+        &.kbq-selected {
+            background-color: map.get(map.get($theme, states), selected-color);
+        }
+
+        &:not(.kbq-card_readonly):hover {
+            .kbq-card__overlay {
+                background: map.get($background, overlay-hover);
+            }
+        }
+
+        &.cdk-keyboard-focused {
+            box-shadow: 0 0 0 2px map.get(map.get($theme, states), focused-color);
+        }
+    }
+}

package/card/card.component.d.ts

@@ -0,0 +1,28 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { ElementRef, OnDestroy, EventEmitter } from '@angular/core';
+import { CanColorCtor } from '@koobiq/components/core';
+import * as i0 from "@angular/core";
+/** @docs-private */
+export declare class KbqCardBase {
+    elementRef: ElementRef;
+    constructor(elementRef: ElementRef);
+}
+/** @docs-private */
+export declare const KbqCardBaseMixin: CanColorCtor & typeof KbqCardBase;
+export declare class KbqCard extends KbqCardBaseMixin implements OnDestroy {
+    private _focusMonitor;
+    readonly: boolean;
+    selected: boolean;
+    selectedChange: EventEmitter<boolean>;
+    get tabIndex(): number | null;
+    set tabIndex(value: number | null);
+    private _tabIndex;
+    constructor(elementRef: ElementRef, _focusMonitor: FocusMonitor);
+    ngOnDestroy(): void;
+    focus(): void;
+    onClick($event: MouseEvent): void;
+    onKeyDown($event: KeyboardEvent): void;
+    private get hostElement();
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqCard, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCard, "kbq-card", never, { "color": { "alias": "color"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "selectedChange": "selectedChange"; }, never, ["*"], false, never>;
+}

package/card/card.component.scss

@@ -0,0 +1,40 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/common/layout';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-card {
+    position: relative;
+    box-sizing: border-box;
+
+    display: flex;
+    flex-direction: column;
+
+    cursor: pointer;
+
+    &:focus {
+        outline: none;
+    }
+
+    border-left: {
+        width: var(--kbq-card-size-vertical-line, map.get($tokens, card-size-vertical-line));
+        style: solid;
+        color: transparent;
+    };
+
+    & .kbq-card__overlay {
+        @include layout.kbq-fill;
+        pointer-events: none;
+
+        background: transparent;
+    }
+
+    &.kbq-card_readonly {
+        cursor: auto;
+    }
+}

package/card/card.module.d.ts

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

package/card/index.d.ts

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

package/card/public-api.d.ts

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

package/checkbox/README.md

@@ -0,0 +1 @@
+Please see the official documentation at https://github.com/positive-js/mosaic

package/checkbox/_checkbox-theme.scss

@@ -0,0 +1,120 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+/* stylelint-disable no-descending-specificity */
+@mixin kbq-checkbox-state($state) {
+    .kbq-checkbox__frame {
+        border-color: map.get($state, border);
+
+        background-color: map.get($state, background);
+    }
+}
+
+@mixin kbq-checkbox-color($checkbox) {
+    $default: map.get($checkbox, default);
+    @include kbq-checkbox-state($default);
+
+    .kbq-checkbox__frame {
+        & .kbq-checkbox-checkmark,
+        & .kbq-checkbox-mixedmark {
+            color: map.get($default, color);
+        }
+    }
+
+    &:hover,
+    &.kbq-hover {
+        @include kbq-checkbox-state(map.get($checkbox, hover));
+    }
+
+    &.kbq-checked,
+    &.kbq-indeterminate {
+        @include kbq-checkbox-state(map.get($checkbox, checked));
+    }
+
+    &.kbq-checked:not(.kbq-disabled),
+    &.kbq-indeterminate:not(.kbq-disabled) {
+        &:hover,
+        &.kbq-hover {
+            @include kbq-checkbox-state(map.get($checkbox, checked-hover));
+        }
+
+        & .kbq-checkbox-input.cdk-keyboard-focused {
+            + .kbq-checkbox__frame {
+                $checked-focused: map.get($checkbox, checked-focused);
+
+                border-color: map.get($checked-focused, border);
+                background-color: map.get($checked-focused, background);
+                outline: map.get($checked-focused, outline);
+            }
+        }
+    }
+
+    & .kbq-checkbox-input.cdk-keyboard-focused {
+        + .kbq-checkbox__frame {
+            $focused: map.get($checkbox, focused);
+
+            border-color: map.get($focused, border);
+            background-color: map.get($focused, background);
+            outline: map.get($focused, outline);
+        }
+    }
+
+    &.kbq-disabled {
+        $disabled: map.get($checkbox, disabled);
+
+        .kbq-checkbox__frame {
+            border-color: map.get($disabled, border);
+            background-color: map.get($disabled, background);
+
+            & .kbq-checkbox-checkmark,
+            & .kbq-checkbox-mixedmark {
+                color: map.get($disabled, color);
+            }
+        }
+    }
+}
+/* stylelint-enable no-descending-specificity */
+
+@mixin kbq-checkbox-theme($theme) {
+    $foreground: map.get($theme, foreground);
+
+    $checkbox: map.get(map.get($theme, components), checkbox);
+
+    $checkbox-theme: map.get($checkbox, theme);
+    $checkbox-error: map.get($checkbox, error);
+
+    .kbq-checkbox {
+        color: map.get($foreground, contrast);
+
+        @include kbq-checkbox-color($checkbox-theme);
+
+        &.kbq-error {
+            color: map.get($foreground, contrast);
+
+            @include kbq-checkbox-color($checkbox-error);
+        }
+    }
+}
+
+@mixin kbq-checkbox-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .kbq-checkbox {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, checkbox-font-normal-label));
+
+        & .kbq-hint {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, checkbox-font-normal-caption));
+        }
+    }
+
+    .kbq-checkbox.kbq-checkbox_big {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, checkbox-font-big-label));
+
+        & .kbq-hint {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, checkbox-font-big-caption));
+        }
+    }
+}

package/checkbox/checkbox-config.d.ts

@@ -0,0 +1,13 @@
+import { InjectionToken } from '@angular/core';
+/**
+ * Checkbox click action when user click on input element.
+ * noop: Do not toggle checked or indeterminate.
+ * check: Only toggle checked status, ignore indeterminate.
+ * check-indeterminate: Toggle checked status, set indeterminate to false. Default behavior.
+ * undefined: Same as `check-indeterminate`.
+ */
+export type KbqCheckboxClickAction = 'noop' | 'check' | 'check-indeterminate' | undefined;
+/**
+ * Injection token that can be used to specify the checkbox click behavior.
+ */
+export declare const KBQ_CHECKBOX_CLICK_ACTION: InjectionToken<KbqCheckboxClickAction>;

package/checkbox/checkbox-module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./checkbox";
+import * as i2 from "./checkbox-required-validator";
+import * as i3 from "@angular/common";
+export declare class KbqCheckboxModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqCheckboxModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqCheckboxModule, [typeof i1.KbqCheckbox, typeof i2.KbqCheckboxRequiredValidator], [typeof i3.CommonModule], [typeof i1.KbqCheckbox, typeof i2.KbqCheckboxRequiredValidator]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqCheckboxModule>;
+}

package/checkbox/checkbox-required-validator.d.ts

@@ -0,0 +1,13 @@
+import { Provider } from '@angular/core';
+import { CheckboxRequiredValidator } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare const KBQ_CHECKBOX_REQUIRED_VALIDATOR: Provider;
+/**
+ * Validator for koobiq checkbox's required attribute in template-driven checkbox.
+ * Current CheckboxRequiredValidator only work with `input type=checkbox` and does not
+ * work with `kbq-checkbox`.
+ */
+export declare class KbqCheckboxRequiredValidator extends CheckboxRequiredValidator {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqCheckboxRequiredValidator, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqCheckboxRequiredValidator, "kbq-checkbox[required][formControlName],             kbq-checkbox[required][formControl], kbq-checkbox[required][ngModel]", never, {}, {}, never, never, false, never>;
+}

package/checkbox/checkbox.d.ts

@@ -0,0 +1,133 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { CanColor, CanColorCtor, CanDisable, CanDisableCtor, HasTabIndex, HasTabIndexCtor } from '@koobiq/components/core';
+import { KbqCheckboxClickAction } from './checkbox-config';
+import * as i0 from "@angular/core";
+/**
+ * Provider Expression that allows kbq-checkbox to register as a ControlValueAccessor.
+ * This allows it to support [(ngModel)].
+ * @docs-private
+ */
+export declare const KBQ_CHECKBOX_CONTROL_VALUE_ACCESSOR: any;
+/**
+ * Represents the different states that require custom transitions between them.
+ * @docs-private
+ */
+export declare enum TransitionCheckState {
+    /** The initial state of the component before any user interaction. */
+    Init = 0,
+    /** The state representing the component when it's becoming checked. */
+    Checked = 1,
+    /** The state representing the component when it's becoming unchecked. */
+    Unchecked = 2,
+    /** The state representing the component when it's becoming indeterminate. */
+    Indeterminate = 3
+}
+/** Change event object emitted by KbqCheckbox. */
+export declare class KbqCheckboxChange {
+    /** The source KbqCheckbox of the event. */
+    source: KbqCheckbox;
+    /** The new `checked` value of the checkbox. */
+    checked: boolean;
+}
+/** @docs-private */
+export declare class KbqCheckboxBase {
+    elementRef: ElementRef;
+    constructor(elementRef: ElementRef);
+}
+/** @docs-private */
+export declare const KbqCheckboxMixinBase: HasTabIndexCtor & CanColorCtor & CanDisableCtor & typeof KbqCheckboxBase;
+/**
+ * A mosaic checkbox component. Supports all of the functionality of an HTML5 checkbox,
+ * and exposes a similar API. A KbqCheckbox can be either checked, unchecked, indeterminate, or
+ * disabled. Note that all additional accessibility attributes are taken care of by the component,
+ * so there is no need to provide them yourself. However, if you want to omit a label and still
+ * have the checkbox be accessible, you may supply an [aria-label] input.
+ */
+export declare class KbqCheckbox extends KbqCheckboxMixinBase implements ControlValueAccessor, AfterViewInit, OnDestroy, CanColor, CanDisable, HasTabIndex {
+    private changeDetectorRef;
+    private focusMonitor;
+    private clickAction;
+    big: boolean;
+    /** A unique id for the checkbox input. If none is supplied, it will be auto-generated. */
+    id: string;
+    /** Whether the label should appear after or before the checkbox. Defaults to 'after' */
+    labelPosition: 'before' | 'after';
+    /** Name value will be applied to the input element if present */
+    name: string | null;
+    /** Event emitted when the checkbox's `checked` value changes. */
+    readonly change: EventEmitter<KbqCheckboxChange>;
+    /** Event emitted when the checkbox's `indeterminate` value changes. */
+    readonly indeterminateChange: EventEmitter<boolean>;
+    /** The value attribute of the native input element */
+    value: string;
+    /** The native `<input type="checkbox">` element */
+    inputElement: ElementRef;
+    /** Returns the unique id for the visual hidden input. */
+    get inputId(): string;
+    /** Whether the checkbox is required. */
+    get required(): boolean;
+    set required(value: boolean);
+    private _required;
+    /**
+     * Whether the checkbox is checked.
+     */
+    get checked(): boolean;
+    set checked(value: boolean);
+    private _checked;
+    /**
+     * Whether the checkbox is disabled. This fully overrides the implementation provided by
+     * mixinDisabled, but the mixin is still required because mixinTabIndex requires it.
+     */
+    get disabled(): any;
+    set disabled(value: any);
+    private _disabled;
+    /**
+     * Whether the checkbox is indeterminate. This is also known as "mixed" mode and can be used to
+     * represent a checkbox with three states, e.g. a checkbox that represents a nested list of
+     * checkable items. Note that whenever checkbox is manually clicked, indeterminate is immediately
+     * set to false.
+     */
+    get indeterminate(): boolean;
+    set indeterminate(value: boolean);
+    private _indeterminate;
+    private uniqueId;
+    private currentAnimationClass;
+    private currentCheckState;
+    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor, clickAction: KbqCheckboxClickAction);
+    /**
+     * Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor.
+     * @docs-private
+     */
+    onTouched: () => any;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /** Method being called whenever the label text changes. */
+    onLabelTextChange(): void;
+    writeValue(value: any): void;
+    registerOnChange(fn: (value: any) => void): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    getAriaChecked(): 'true' | 'false' | 'mixed';
+    /** Toggles the `checked` state of the checkbox. */
+    toggle(): void;
+    /**
+     * Event handler for checkbox input element.
+     * Toggles checked state if element is not disabled.
+     * Do not toggle on (change) event since IE doesn't fire change event when
+     *   indeterminate checkbox is clicked.
+     * @param event Input click event
+     */
+    onInputClick(event: Event): void;
+    /** Focuses the checkbox. */
+    focus(): void;
+    onInteractionEvent(event: Event): void;
+    private controlValueAccessorChangeFn;
+    private transitionCheckState;
+    private emitChangeEvent;
+    /** Function is called whenever the focus changes for the input element. */
+    private onInputFocusChange;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqCheckbox, [null, null, null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCheckbox, "kbq-checkbox", ["mcCheckbox"], { "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "big": { "alias": "big"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*", "kbq-hint"], false, never>;
+}