@koobiq/components 16.0.0-beta.1

package/button/_button-theme.scss

@@ -0,0 +1,180 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin _icon($left-icon, $right-icon) {
+    .kbq-icon {
+        color: $left-icon;
+
+        &.kbq-icon_left {
+            color: $left-icon;
+        }
+
+        &.kbq-icon_right {
+            color: $right-icon;
+        }
+    }
+}
+
+@mixin kbq-filled-button($params) {
+    border-color: map.get($params, border);
+    color: map.get($params, foreground);
+    background: map.get($params, background);
+
+    @include _icon(map.get($params, left-icon), map.get($params, right-icon));
+
+    &:hover:not([disabled]),
+    &.kbq-hover:not([disabled]) {
+        background: map.get($params, states_hover_background);
+    }
+
+    &:active:not([disabled]),
+    &.kbq-active:not([disabled]) {
+        background: map.get($params, states_active_background);
+    }
+
+    &.kbq-disabled,
+    &[disabled] {
+        color: map.get($params, states_disabled_foreground);
+        background: map.get($params, states_disabled_background);
+
+        @include _icon(map.get($params, states_disabled_left-icon), map.get($params, states_disabled_left-icon));
+    }
+}
+
+@mixin kbq-outline-button($params) {
+    border-color: map.get($params, border);
+    color: map.get($params, foreground);
+    background: map.get($params, background);
+
+    @include _icon(map.get($params, left-icon), map.get($params, right-icon));
+
+    &:hover:not([disabled]),
+    &.kbq-hover:not([disabled]) {
+        background: map.get($params, states_hover_background);
+    }
+
+    &:active:not([disabled]),
+    &.kbq-active:not([disabled]) {
+        background: map.get($params, states_active_background);
+    }
+
+    &.kbq-disabled,
+    &[disabled] {
+        border-color: map.get($params, states_disabled_border);
+        color: map.get($params, states_disabled_foreground);
+
+        @include _icon(map.get($params, states_disabled_left-icon), map.get($params, states_disabled_left-icon));
+    }
+}
+
+@mixin kbq-transparent-button($params) {
+    border-color: map.get($params, border);
+    color: map.get($params, foreground);
+    background: map.get($params, background);
+
+    @include _icon(map.get($params, left-icon), map.get($params, right-icon));
+
+    &:hover:not([disabled]),
+    &.kbq-hover:not([disabled]) {
+        background: map.get($params, states_hover_background);
+    }
+
+    &:active:not([disabled]),
+    &.kbq-active:not([disabled]) {
+        background: map.get($params, states_active_background);
+    }
+
+    &.kbq-disabled,
+    &[disabled] {
+        border-color: map.get($params, states_disabled_border);
+        color: map.get($params, states_disabled_foreground);
+
+        @include _icon(map.get($params, states_disabled_left-icon), map.get($params, states_disabled_left-icon));
+    }
+}
+
+@mixin kbq-button-theme($theme) {
+    $primary: map.get($theme, theme);
+    $background: map.get($theme, background);
+
+    $button: map.get(map.get($theme, components), button);
+
+    .kbq-button-overlay {
+        display: none;
+    }
+
+    .kbq-button,
+    .kbq-button-icon {
+        -webkit-font-smoothing: antialiased;
+
+        &.kbq-button_filled {
+            &.kbq-contrast {
+                $filled-contrast: map.get(map.get($button, filled), contrast-fade-off);
+
+                @include kbq-filled-button($filled-contrast);
+            }
+
+            &.kbq-contrast-fade {
+                $filled-fade-contrast: map.get(map.get($button, filled), contrast-fade-on);
+
+                @include kbq-filled-button($filled-fade-contrast);
+            }
+        }
+
+        &.kbq-button_outline {
+            &.kbq-theme-fade {
+                $outline-theme-fade-on: map.get(map.get($button, outline), theme-fade-on);
+
+                @include kbq-outline-button($outline-theme-fade-on);
+            }
+
+            &.kbq-contrast-fade {
+                $outline-contrast-fade-on: map.get(map.get($button, outline), contrast-fade-on);
+
+                @include kbq-outline-button($outline-contrast-fade-on);
+
+            }
+        }
+
+        &.kbq-button_transparent {
+            &.kbq-theme {
+                $transparent-theme: map.get(map.get($button, transparent), theme);
+
+                @include kbq-transparent-button($transparent-theme);
+            }
+
+            &.kbq-contrast {
+                $transparent-contrast: map.get(map.get($button, transparent), contrast);
+
+                @include kbq-transparent-button($transparent-contrast);
+            }
+        }
+
+        &.kbq-button_filled,
+        &.kbq-button_outline,
+        &.kbq-button_transparent {
+            &.cdk-keyboard-focused {
+                border-color: map.get(map.get($theme, states), focused-color);
+            }
+        }
+    }
+}
+
+@mixin kbq-button-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .kbq-button,
+    .kbq-button-icon {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, button-font-default));
+    }
+
+    .kbq-button-icon.kbq-button-wrapper {
+        .kbq-icon {
+            line-height: kbq-line-height($config, body);
+        }
+    }
+}
+

package/button/button.component.d.ts

@@ -0,0 +1,58 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { ChangeDetectorRef, ElementRef, OnDestroy, Renderer2, QueryList, AfterContentInit } from '@angular/core';
+import { CanColor, CanDisable, CanColorCtor, HasTabIndexCtor } from '@koobiq/components/core';
+import { KbqIcon } from '@koobiq/components/icon';
+import * as i0 from "@angular/core";
+export declare enum KbqButtonStyles {
+    Filled = "filled",
+    Outline = "outline",
+    Transparent = "transparent"
+}
+export declare const leftIconClassName = "kbq-icon_left";
+export declare const rightIconClassName = "kbq-icon_right";
+export declare const buttonLeftIconClassName = "kbq-button-icon_left";
+export declare const buttonRightIconClassName = "kbq-button-icon_right";
+export declare const getNodesWithoutComments: (nodes: NodeList) => Node[];
+export declare class KbqButtonCssStyler implements AfterContentInit {
+    private renderer;
+    private cdr;
+    icons: QueryList<KbqIcon>;
+    nativeElement: HTMLElement;
+    isIconButton: boolean;
+    constructor(elementRef: ElementRef, renderer: Renderer2, cdr: ChangeDetectorRef);
+    ngAfterContentInit(): void;
+    updateClassModifierForIcons(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonCssStyler, [null, null, { skipSelf: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonCssStyler, "[kbq-button]", never, {}, {}, ["icons"], never, false, never>;
+}
+/** @docs-private */
+export declare class KbqButtonBase {
+    elementRef: ElementRef;
+    constructor(elementRef: ElementRef);
+}
+/** @docs-private */
+export declare const KbqButtonMixinBase: HasTabIndexCtor & CanColorCtor & typeof KbqButtonBase;
+export declare class KbqButton extends KbqButtonMixinBase implements OnDestroy, CanDisable, CanColor {
+    private focusMonitor;
+    private styler;
+    hasFocus: boolean;
+    get kbqStyle(): string;
+    set kbqStyle(value: string | KbqButtonStyles);
+    private _kbqStyle;
+    get disabled(): any;
+    set disabled(value: any);
+    private _disabled;
+    constructor(elementRef: ElementRef, focusMonitor: FocusMonitor, styler: KbqButtonCssStyler);
+    ngOnDestroy(): void;
+    onFocus($event: any): void;
+    onBlur(): void;
+    getHostElement(): any;
+    focus(): void;
+    focusViaKeyboard(): void;
+    haltDisabledEvents(event: Event): void;
+    projectContentChanged(): void;
+    private runFocusMonitor;
+    private stopFocusMonitor;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqButton, "[kbq-button]", never, { "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], false, never>;
+}

package/button/button.module.d.ts

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

package/button/button.scss

@@ -0,0 +1,59 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use 'button-base' as *;
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-button {
+    @extend %kbq-button-base;
+
+    padding-left: calc(
+        var(--kbq-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding)) +
+        4px
+    );
+    padding-right: calc(
+        var(--kbq-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding)) +
+        4px
+    );
+
+    &.kbq-button-icon_left {
+        padding-left: var(--kbq-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding));
+    }
+
+    &.kbq-button-icon_right {
+        padding-right: var(--kbq-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding));
+    }
+}
+
+.kbq-light-button {
+    @extend %kbq-button-base;
+}
+
+.kbq-button-icon {
+    @extend %kbq-button-base;
+
+    padding-left: calc(
+        var(--kbq-button-icon-size-horizontal-padding, map.get($tokens, button-icon-size-horizontal-padding)) -
+        var(--kbq-button-size-border-width, map.get($tokens, button-size-border-width))
+    );
+
+    padding-right: calc(
+        var(--kbq-button-icon-size-horizontal-padding, map.get($tokens, button-icon-size-horizontal-padding)) -
+        var(--kbq-button-size-border-width, map.get($tokens, button-size-border-width))
+    );
+}
+
+.kbq-button-overlay {
+    position: absolute;
+
+    top: -#{map.get($tokens, button-size-border-width)};
+    left: -#{map.get($tokens, button-size-border-width)};
+    right: -#{map.get($tokens, button-size-border-width)};
+    bottom: -#{map.get($tokens, button-size-border-width)};
+
+    border-radius: inherit;
+}

package/button/index.d.ts

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

package/button/public-api.d.ts

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

package/button-toggle/_button-toggle-theme.scss

@@ -0,0 +1,92 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+@mixin kbq-button-toggle-color($state) {
+    & .kbq-button-overlay {
+        background: map.get($state, background);
+        border-color: map.get($state, background);
+    }
+
+    & .kbq-icon {
+        color: map.get($state, icon);
+    }
+}
+
+@mixin kbq-button-toggle-theme($theme) {
+    $button-toggle-group: map.get(map.get(map.get($theme, components), button-toggle), button-toggle-group);
+    $button-toggle: map.get(map.get(map.get($theme, components), button-toggle), button-toggle);
+    $states: map.get($button-toggle, states);
+
+    .kbq-button-toggle-group {
+        background: map.get($button-toggle-group, background);
+        border-color:  map.get($button-toggle-group, border);
+
+        .kbq-button-toggle {
+            & > .kbq-button,
+            & > .kbq-icon-button {
+                color: map.get($button-toggle, color);
+                border-color: map.get($button-toggle-group, background);
+                background: inherit;
+
+                & .kbq-icon {
+                    color: map.get($button-toggle, icon);
+                }
+
+                .kbq-button-overlay {
+                    background-color: unset;
+                }
+
+                &:hover:not([disabled], .kbq-active) {
+                    @include kbq-button-toggle-color(map.get($states, hover));
+                }
+
+                &:active:not([disabled], .kbq-active) {
+                    @include kbq-button-toggle-color(map.get($states, active));
+                }
+
+                &.kbq-active {
+                    $state: map.get($states, pressed);
+
+                    background: map.get($state, background);
+                    border-color: map.get($state, background);
+
+                    & .kbq-icon {
+                        color: map.get($state, icon);
+                    }
+                }
+
+                &.kbq-disabled,
+                &[disabled] {
+                    opacity: map.get(map.get($states, disabled), opacity);
+                }
+
+                &.cdk-keyboard-focused {
+                    box-shadow: unset;
+                }
+            }
+
+            &.cdk-keyboard-focused {
+                box-shadow: 0 0 0 2px map-get(map-get($theme, states), focused-color);
+            }
+        }
+    }
+}
+
+@mixin kbq-button-toggle-typography($config) {
+    .kbq-button-toggle {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, button-toggle-font-default));
+
+        > .kbq-button,
+        > .kbq-icon-button {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, button-toggle-font-default));
+        }
+    }
+}
+

package/button-toggle/button-toggle.component.d.ts

@@ -0,0 +1,145 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit, QueryList } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { KbqButton } from '@koobiq/components/button';
+import { KbqIcon } from '@koobiq/components/icon';
+import * as i0 from "@angular/core";
+/** Acceptable types for a button toggle. */
+export type ToggleType = 'checkbox' | 'radio';
+/**
+ * Provider Expression that allows kbq-button-toggle-group to register as a ControlValueAccessor.
+ * This allows it to support [(ngModel)].
+ * @docs-private
+ */
+export declare const KBQ_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR: any;
+/** Change event object emitted by MсButtonToggle. */
+export declare class KbqButtonToggleChange {
+    /** The MсButtonToggle that emits the event. */
+    source: KbqButtonToggle;
+    /** The value assigned to the MсButtonToggle. */
+    value: any;
+    constructor(
+    /** The MсButtonToggle that emits the event. */
+    source: KbqButtonToggle, 
+    /** The value assigned to the MсButtonToggle. */
+    value: any);
+}
+/** Exclusive selection button toggle group that behaves like a radio-button group. */
+export declare class KbqButtonToggleGroup implements ControlValueAccessor, OnInit, AfterContentInit {
+    private _changeDetector;
+    /** Whether the toggle group is vertical. */
+    get vertical(): boolean;
+    set vertical(value: boolean);
+    /** Value of the toggle group. */
+    get value(): any;
+    set value(newValue: any);
+    /** Selected button toggles in the group. */
+    get selected(): any;
+    /** Whether multiple button toggles can be selected. */
+    get multiple(): boolean;
+    set multiple(value: boolean);
+    /** Child button toggle buttons. */
+    buttonToggles: QueryList<KbqButtonToggle>;
+    /** Whether multiple button toggle group is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /**
+     * Event that emits whenever the value of the group changes.
+     * Used to facilitate two-way data binding.
+     * @docs-private
+     */
+    readonly valueChange: EventEmitter<any>;
+    /** Event emitted when the group's value changes. */
+    readonly change: EventEmitter<KbqButtonToggleChange>;
+    private _vertical;
+    private _multiple;
+    private _disabled;
+    private selectionModel;
+    /**
+     * Reference to the raw value that the consumer tried to assign. The real
+     * value will exclude any values from this one that don't correspond to a
+     * toggle. Useful for the cases where the value is assigned before the toggles
+     * have been initialized or at the same that they're being swapped out.
+     */
+    private rawValue;
+    constructor(_changeDetector: ChangeDetectorRef);
+    /**
+     * The method to be called in order to update ngModel.
+     * Now `ngModel` binding is not supported in multiple selection mode.
+     */
+    controlValueAccessorChangeFn: (value: any) => void;
+    /** onTouch function registered via registerOnTouch (ControlValueAccessor). */
+    onTouched: () => any;
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    /**
+     * Sets the model value. Implemented as part of ControlValueAccessor.
+     * @param value Value to be set to the model.
+     */
+    writeValue(value: any): void;
+    registerOnChange(fn: (value: any) => void): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    /** Dispatch change event with current selection and group value. */
+    emitChangeEvent(): void;
+    /**
+     * Syncs a button toggle's selected state with the model value.
+     * @param toggle Toggle to be synced.
+     * @param select Whether the toggle should be selected.
+     * @param isUserInput Whether the change was a result of a user interaction.
+     */
+    syncButtonToggle(toggle: KbqButtonToggle, select: boolean, isUserInput?: boolean): void;
+    /** Checks whether a button toggle is selected. */
+    isSelected(toggle: KbqButtonToggle): boolean;
+    /** Determines whether a button toggle should be checked on init. */
+    isPrechecked(toggle: KbqButtonToggle): boolean;
+    /** Updates the selection state of the toggles in the group based on a value. */
+    private setSelectionByValue;
+    /** Clears the selected toggles. */
+    private clearSelection;
+    /** Selects a value if there's a toggle that corresponds to it. */
+    private selectValue;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonToggleGroup, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonToggleGroup, "kbq-button-toggle-group", ["mcButtonToggleGroup"], { "vertical": { "alias": "vertical"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["buttonToggles"], never, false, never>;
+}
+/** Single button inside of a toggle group. */
+export declare class KbqButtonToggle implements OnInit, AfterContentInit, OnDestroy {
+    buttonToggleGroup: KbqButtonToggleGroup;
+    private changeDetectorRef;
+    private focusMonitor;
+    private element;
+    icons: QueryList<KbqIcon>;
+    /** Whether the button is checked. */
+    get checked(): boolean;
+    set checked(value: boolean);
+    type: ToggleType;
+    iconType: string;
+    mcButton: KbqButton;
+    /** KbqButtonToggleGroup reads this to assign its own value. */
+    value: any;
+    /** Tabindex for the toggle. */
+    tabIndex: number | null;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /** Event emitted when the group value changes. */
+    readonly change: EventEmitter<KbqButtonToggleChange>;
+    private isSingleSelector;
+    private _checked;
+    private _disabled;
+    constructor(buttonToggleGroup: KbqButtonToggleGroup, changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor, element: ElementRef);
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    /** Focuses the button. */
+    focus(): void;
+    /** Checks the button toggle due to an interaction with the underlying native button. */
+    onToggleClick(): void;
+    /**
+     * Marks the button toggle as needing checking for change detection.
+     * This method is exposed because the parent button toggle group will directly
+     * update bound properties of the radio button.
+     */
+    markForCheck(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonToggle, [{ optional: true; }, null, null, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqButtonToggle, "kbq-button-toggle", ["mcButtonToggle"], { "checked": { "alias": "checked"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; }, ["icons"], ["*"], false, never>;
+}

package/button-toggle/button-toggle.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./button-toggle.component";
+import * as i2 from "@koobiq/components/core";
+import * as i3 from "@koobiq/components/button";
+import * as i4 from "@koobiq/components/title";
+export declare class KbqButtonToggleModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonToggleModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqButtonToggleModule, [typeof i1.KbqButtonToggleGroup, typeof i1.KbqButtonToggle], [typeof i2.KbqCommonModule, typeof i3.KbqButtonModule, typeof i4.KbqTitleModule], [typeof i2.KbqCommonModule, typeof i1.KbqButtonToggleGroup, typeof i1.KbqButtonToggle]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqButtonToggleModule>;
+}