@koobiq/components 16.0.0-beta.1

package/timezone/public-api.d.ts

@@ -0,0 +1,6 @@
+export * from './timezone-option.component';
+export * from './timezone-option.directive';
+export * from './timezone-select.component';
+export * from './timezone.models';
+export * from './timezone.module';
+export * from './timezone.utils';

package/timezone/timezone-option.component.d.ts

@@ -0,0 +1,15 @@
+import { ElementRef } from '@angular/core';
+import { KbqOption } from '@koobiq/components/core';
+import { KbqTimezoneZone } from './timezone.models';
+import * as i0 from "@angular/core";
+export declare class KbqTimezoneOption extends KbqOption {
+    tooltipContentWrapper: ElementRef<HTMLElement>;
+    tooltipContent: ElementRef<HTMLElement>;
+    highlightText: string;
+    get timezone(): KbqTimezoneZone;
+    set timezone(zone: KbqTimezoneZone);
+    private _timezone;
+    get viewValue(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimezoneOption, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTimezoneOption, "kbq-timezone-option", ["mcTimezoneOption"], { "highlightText": { "alias": "highlightText"; "required": false; }; "timezone": { "alias": "timezone"; "required": false; }; }, {}, never, never, false, never>;
+}

package/timezone/timezone-option.component.scss

@@ -0,0 +1,35 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-timezone-option.kbq-option {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+
+    padding: var(--kbq-timezone-option-size-padding, map.get($tokens, timezone-option-size-padding));
+    column-gap: var(--kbq-timezone-option-size-column-gap, map.get($tokens, timezone-option-size-column-gap));
+}
+
+.kbq-timezone-option__label {
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+    flex: 1;
+    min-width: 0;
+}
+
+.kbq-timezone-option__cities {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    max-height: var(--kbq-timezone-option-size-max-height, map.get($tokens, timezone-option-size-max-height));
+    overflow: hidden;
+}
+
+.kbq-select__panel .kbq-timezone-option {
+    height: var(--kbq-timezone-option-size-height, map.get($tokens, timezone-option-size-height));
+}

package/timezone/timezone-option.directive.d.ts

@@ -0,0 +1,20 @@
+import { Directionality } from '@angular/cdk/bidi';
+import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
+import { AfterViewInit, ElementRef, NgZone, OnDestroy, ViewContainerRef, ChangeDetectorRef } from '@angular/core';
+import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
+import { KbqTimezoneOption } from './timezone-option.component';
+import * as i0 from "@angular/core";
+export declare const TOOLTIP_VISIBLE_ROWS_COUNT = 3;
+export declare class KbqTimezoneOptionTooltip extends KbqTooltipTrigger implements AfterViewInit, OnDestroy {
+    private changeDetectorRef;
+    private option;
+    private resizeObserver;
+    constructor(changeDetectorRef: ChangeDetectorRef, option: KbqTimezoneOption, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    private checkTooltipDisabled;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimezoneOptionTooltip, [null, null, null, null, null, null, null, null, { optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTimezoneOptionTooltip, "kbq-timezone-option", never, {}, {}, never, never, false, never>;
+}

package/timezone/timezone-select.component.d.ts

@@ -0,0 +1,14 @@
+import { KbqCleaner } from '@koobiq/components/form-field';
+import { KbqSelect, KbqSelectSearch } from '@koobiq/components/select';
+import * as i0 from "@angular/core";
+export declare class KbqTimezoneSelectTrigger {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimezoneSelectTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTimezoneSelectTrigger, "kbq-timezone-select-trigger", never, {}, {}, never, never, false, never>;
+}
+export declare class KbqTimezoneSelect extends KbqSelect {
+    customTrigger: KbqTimezoneSelectTrigger;
+    cleaner: KbqCleaner;
+    search: KbqSelectSearch;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimezoneSelect, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTimezoneSelect, "kbq-timezone-select", ["mcTimezoneSelect"], {}, {}, ["customTrigger", "cleaner", "search"], ["kbq-timezone-select-trigger", "kbq-cleaner", "[mcSelectSearch]", "[kbq-select-search-empty-result]", "*"], false, never>;
+}

package/timezone/timezone.models.d.ts

@@ -0,0 +1,16 @@
+export interface KbqTimezoneZone {
+    id: string;
+    offset: string;
+    city: string;
+    countryCode: string;
+    countryName: string;
+    cities: string;
+}
+export interface KbqTimezoneGroup {
+    countryName: string;
+    countryCode: string;
+    zones: KbqTimezoneZone[];
+}
+export interface KbqTimezonesByCountry {
+    [countryName: string]: KbqTimezoneZone[];
+}

package/timezone/timezone.module.d.ts

@@ -0,0 +1,19 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./utc-offset.pipe";
+import * as i2 from "./cities-by-filter.pipe";
+import * as i3 from "./timezone-select.component";
+import * as i4 from "./timezone-option.component";
+import * as i5 from "./timezone-option.directive";
+import * as i6 from "@angular/common";
+import * as i7 from "@angular/cdk/overlay";
+import * as i8 from "@koobiq/components/form-field";
+import * as i9 from "@koobiq/components/core";
+import * as i10 from "@koobiq/components/select";
+import * as i11 from "@koobiq/components/icon";
+import * as i12 from "@koobiq/components/tags";
+import * as i13 from "@koobiq/components/tooltip";
+export declare class KbqTimezoneModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimezoneModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTimezoneModule, [typeof i1.UtcOffsetPipe, typeof i2.CitiesByFilterPipe, typeof i3.KbqTimezoneSelect, typeof i4.KbqTimezoneOption, typeof i5.KbqTimezoneOptionTooltip, typeof i3.KbqTimezoneSelectTrigger], [typeof i6.CommonModule, typeof i7.OverlayModule, typeof i8.KbqFormFieldModule, typeof i9.KbqOptionModule, typeof i10.KbqSelectModule, typeof i11.KbqIconModule, typeof i12.KbqTagsModule, typeof i13.KbqToolTipModule, typeof i9.KbqHighlightModule], [typeof i3.KbqTimezoneSelect, typeof i4.KbqTimezoneOption, typeof i5.KbqTimezoneOptionTooltip, typeof i3.KbqTimezoneSelectTrigger]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqTimezoneModule>;
+}

package/timezone/timezone.utils.d.ts

@@ -0,0 +1,18 @@
+import { KbqTimezoneZone, KbqTimezoneGroup } from './timezone.models';
+/**
+ * Convert string timezone offset (formatted offset) to number (minutes)
+ */
+export declare function parseOffset(offset: string): number;
+/**
+ * Grouping timezones by countries
+ */
+export declare function getZonesGroupedByCountry(data: KbqTimezoneZone[], otherCountriesLabel?: string, priorityCountry?: string): KbqTimezoneGroup[];
+export declare function offsetFormatter(value: string): string;
+/**
+ * Comparator for timezone sorting. Sort by offset and country name
+ */
+export declare function timezonesSortComparator(first: KbqTimezoneZone, second: KbqTimezoneZone): number;
+/**
+ * Filtering timezone cities by search string
+ */
+export declare function filterCitiesBySearchString(cities: string, searchPattern?: string): string;

package/timezone/utc-offset.pipe.d.ts

@@ -0,0 +1,7 @@
+import { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class UtcOffsetPipe implements PipeTransform {
+    transform(value: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UtcOffsetPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<UtcOffsetPipe, "utcOffset", false>;
+}

package/title/index.d.ts

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

package/title/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './title.module';
+export * from './title.directive';

package/title/title.directive.d.ts

@@ -0,0 +1,31 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { Directionality } from '@angular/cdk/bidi';
+import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
+import { AfterViewInit, ElementRef, NgZone, ViewContainerRef } from '@angular/core';
+import { KbqTitleTextRef } from '@koobiq/components/core';
+import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare class KbqTitleDirective extends KbqTooltipTrigger implements AfterViewInit {
+    private focusMonitor;
+    private componentInstance?;
+    get isOverflown(): boolean;
+    get viewValue(): string;
+    get parent(): HTMLElement;
+    get child(): HTMLElement;
+    readonly resizeStream: Subject<Event>;
+    private readonly debounceInterval;
+    private resizeSubscription;
+    private mutationSubscription;
+    private focusMonitorSubscription;
+    private childContainer;
+    private parentContainer;
+    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, focusMonitor: FocusMonitor, scrollStrategy: any, direction: Directionality, componentInstance?: KbqTitleTextRef | undefined);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    handleElementEnter(): void;
+    hideTooltip(): void;
+    private createMutationObserver;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTitleDirective, [null, null, null, null, null, null, null, { optional: true; }, { optional: true; host: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTitleDirective, "[kbq-title]", ["mcTitle"], {}, {}, ["childContainer", "parentContainer"], never, false, never>;
+}

package/title/title.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./title.directive";
+import * as i2 from "@koobiq/components/tooltip";
+export declare class KbqTitleModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTitleModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTitleModule, [typeof i1.KbqTitleDirective], [typeof i2.KbqToolTipModule], [typeof i1.KbqTitleDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqTitleModule>;
+}

package/toast/_toast-theme.scss

@@ -0,0 +1,61 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin kbq-toast-theme($theme) {
+    $foreground: map.get($theme, foreground);
+
+    $toast: map.get(map.get($theme, components), toast);
+
+    .kbq-toast {
+        &.kbq-toast_info .kbq-toast__icon {
+            color: map.get($toast, icon_info);
+        }
+
+        &.kbq-toast_success .kbq-toast__icon {
+            color: map.get($toast, icon_success);
+        }
+
+        &.kbq-toast_warning .kbq-toast__icon {
+            color: map.get($toast, icon_warning);
+        }
+
+        &.kbq-toast_error .kbq-toast__icon {
+            color: map.get($toast, icon_error);
+        }
+    }
+
+    .kbq-toast__wrapper {
+        border-color: map.get($toast, border);
+
+        background: map.get($toast, background);
+
+        box-shadow: map.get($toast, shadow);
+    }
+
+    .kbq-toast__title {
+        color: map.get($toast, text);
+    }
+
+    .kbq-toast__caption {
+        color: map.get($toast, text-caption);
+    }
+}
+
+@mixin kbq-toast-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .kbq-toast {
+        @include kbq-typography-level-to-styles($config, body);
+    }
+
+    .kbq-toast__title {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, toast-font-title));
+    }
+
+    .kbq-toast__caption {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, toast-font-caption));
+    }
+}

package/toast/index.d.ts

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

package/toast/public-api.d.ts

@@ -0,0 +1,5 @@
+export * from './toast.service';
+export * from './toast.module';
+export * from './toast.type';
+export * from './toast.component';
+export * from './toast-container.component';

package/toast/toast-animations.d.ts

@@ -0,0 +1,4 @@
+import { AnimationTriggerMetadata } from '@angular/animations';
+export declare const mcToastAnimations: {
+    readonly toastState: AnimationTriggerMetadata;
+};

package/toast/toast-container.component.d.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectorRef, ComponentRef, EmbeddedViewRef, Injector, TemplateRef, ViewContainerRef, ViewRef } from '@angular/core';
+import { KbqToastData } from './toast.type';
+import * as i0 from "@angular/core";
+export declare class KbqToastContainerComponent {
+    private injector;
+    private changeDetectorRef;
+    viewContainer: ViewContainerRef;
+    constructor(injector: Injector, changeDetectorRef: ChangeDetectorRef);
+    createToast<C>(data: KbqToastData, componentType: any, onTop: boolean): ComponentRef<C>;
+    createTemplate<C>(data: KbqToastData, template: TemplateRef<any>, onTop: boolean): EmbeddedViewRef<C>;
+    remove(viewRef: ViewRef): void;
+    getInjector(data: KbqToastData): Injector;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastContainerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqToastContainerComponent, "kbq-toast-container", never, {}, {}, never, never, false, never>;
+}

package/toast/toast-container.component.scss

@@ -0,0 +1,23 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+@use '../core/styles/variables';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
+.kbq-toast-container {
+    display: flex;
+    flex-direction: column;
+
+    gap: var(--kbq-toast-size-gap, map.get($tokens, toast-size-gap));
+}
+
+.cdk-overlay-container {
+    .kbq-toast-overlay,
+    .kbq-toast-overlay ~ *:not(.kbq-modal-overlay, .kbq-sidepanel-overlay, .cdk-overlay-backdrop) {
+        z-index: variables.$z-index-notification;
+    }
+}

package/toast/toast.component.d.ts

@@ -0,0 +1,35 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { ElementRef, OnDestroy } from '@angular/core';
+import { ThemePalette } from '@koobiq/components/core';
+import { BehaviorSubject } from 'rxjs';
+import { KbqToastService } from './toast.service';
+import { KbqToastData } from './toast.type';
+import * as i0 from "@angular/core";
+export declare class KbqToastComponent implements OnDestroy {
+    readonly data: KbqToastData;
+    readonly service: KbqToastService;
+    elementRef: ElementRef;
+    private focusMonitor;
+    themePalette: typeof ThemePalette;
+    animationState: string;
+    readonly hovered: BehaviorSubject<boolean>;
+    readonly focused: BehaviorSubject<boolean>;
+    id: number;
+    ttl: any;
+    delay: any;
+    $implicit: any;
+    get toastStyle(): {
+        [x: string]: boolean;
+    };
+    get hasDismiss(): boolean;
+    get isFocusedOrHovered(): boolean;
+    private destroyed;
+    constructor(data: KbqToastData, service: KbqToastService, elementRef: ElementRef, focusMonitor: FocusMonitor);
+    ngOnDestroy(): void;
+    close(): void;
+    isTemplateRef(value: any): boolean;
+    private runFocusMonitor;
+    private stopFocusMonitor;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqToastComponent, "kbq-toast", never, {}, {}, never, never, false, never>;
+}

package/toast/toast.component.scss

@@ -0,0 +1,76 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/variables' as *;
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-toast {
+    box-sizing: border-box;
+
+    z-index: $z-index-toast;
+
+    max-height: 200px;
+    height: auto;
+}
+
+.kbq-toast__wrapper {
+    box-sizing: border-box;
+
+    display: flex;
+    flex: 1 1 auto;
+
+    width: var(--kbq-toast-size-width, map.get($tokens, toast-size-width));
+
+    padding-right: var(--kbq-toast-size-padding-right, map.get($tokens, toast-size-padding-right));
+    padding-left: var(--kbq-toast-size-padding-left, map.get($tokens, toast-size-padding-left));
+
+    border-width: var(--kbq-toast-size-border-width, map.get($tokens, toast-size-border-width));
+    border-style: solid;
+    border-radius: var(--kbq-toast-size-border-radius, map.get($tokens, toast-size-border-radius));
+}
+
+.kbq-toast__icon-container {
+    padding-right: var(--kbq-toast-size-icon-margin, map.get($tokens, toast-size-icon-margin));
+
+    padding-top: var(--kbq-toast-size-padding-vertical, map.get($tokens, toast-size-padding-vertical));
+    padding-bottom: var(--kbq-toast-size-padding-vertical, map.get($tokens, toast-size-padding-vertical));
+}
+
+.kbq-toast__container {
+    width: 100%;
+
+    padding-top: var(--kbq-toast-size-padding-vertical, map.get($tokens, toast-size-padding-vertical));
+    padding-bottom: var(--kbq-toast-size-padding-vertical, map.get($tokens, toast-size-padding-vertical));
+}
+
+.kbq-toast__title {
+    & > p {
+        margin: 0;
+    }
+}
+
+.kbq-toast__content {
+    display: flex;
+    flex-direction: column;
+}
+
+.kbq-toast__actions {
+    margin-top: var(--kbq-toast-size-actionbar-margin, map.get($tokens, toast-size-actionbar-margin));
+
+    & > * {
+        margin-right: var(--kbq-toast-size-actionbar-gap, map.get($tokens, toast-size-actionbar-gap));
+    }
+}
+
+.kbq-toast__close {
+    float: right;
+
+    width: var(--kbq-toast-size-close-button-width, map.get($tokens, toast-size-close-button-width));
+    height: var(--kbq-toast-size-close-button-width, map.get($tokens, toast-size-close-button-width));
+
+    margin: -6px -8px -6px 8px;
+}

package/toast/toast.module.d.ts

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./toast.component";
+import * as i2 from "./toast-container.component";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/cdk/overlay";
+import * as i5 from "@angular/cdk/a11y";
+import * as i6 from "@koobiq/components/icon";
+import * as i7 from "@koobiq/components/button";
+export declare class KbqToastModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqToastModule, [typeof i1.KbqToastComponent, typeof i2.KbqToastContainerComponent], [typeof i3.CommonModule, typeof i4.OverlayModule, typeof i5.A11yModule, typeof i6.KbqIconModule, typeof i7.KbqButtonModule], never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqToastModule>;
+}

package/toast/toast.service.d.ts

@@ -0,0 +1,51 @@
+import { Overlay } from '@angular/cdk/overlay';
+import { Injector, ComponentRef, TemplateRef, EmbeddedViewRef, InjectionToken } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { KbqToastComponent } from './toast.component';
+import { KbqToastData, KbqToastConfig } from './toast.type';
+import * as i0 from "@angular/core";
+export declare const KBQ_TOAST_FACTORY: InjectionToken<unknown>;
+export declare const defaultToastConfig: KbqToastConfig;
+export declare class KbqToastService<T extends KbqToastComponent = KbqToastComponent> {
+    private overlay;
+    private injector;
+    private toastFactory;
+    private toastConfig;
+    get toasts(): ComponentRef<T>[];
+    get templates(): EmbeddedViewRef<T>[];
+    readonly hovered: BehaviorSubject<boolean>;
+    readonly focused: BehaviorSubject<boolean>;
+    private containerInstance;
+    private overlayRef;
+    private portal;
+    private toastsDict;
+    private templatesDict;
+    constructor(overlay: Overlay, injector: Injector, toastFactory: any, toastConfig: KbqToastConfig);
+    show(data: KbqToastData, duration?: number, onTop?: boolean): {
+        ref: ComponentRef<T>;
+        id: number;
+    };
+    showTemplate(data: KbqToastData, template: TemplateRef<any>, duration?: number, onTop?: boolean): {
+        ref: EmbeddedViewRef<T>;
+        id: number;
+    };
+    hide(id: number): void;
+    hideTemplate(id: number): void;
+    private detachOverlay;
+    private processToasts;
+    private updateTTLAfterDelete;
+    private addRemoveTimer;
+    private prepareContainer;
+    private createOverlay;
+    private getPositionStrategy;
+    private getTopCenter;
+    private getTopLeft;
+    private getTopRight;
+    private getBottomCenter;
+    private getBottomLeft;
+    private getBottomRight;
+    private getCenter;
+    private getGlobalOverlayPosition;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastService<any>, [null, null, null, { optional: true; }]>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KbqToastService<any>>;
+}

package/toast/toast.type.d.ts

@@ -0,0 +1,27 @@
+import { TemplateRef, InjectionToken } from '@angular/core';
+export type KbqToastStyle = 'default' | 'confirm' | 'custom' | 'success' | 'error' | 'warning' | 'info';
+export declare enum KbqToastPosition {
+    TOP_RIGHT = "top-right",
+    TOP_LEFT = "top-left",
+    TOP_CENTER = "top-center",
+    BOTTOM_RIGHT = "bottom-right",
+    BOTTOM_LEFT = "bottom-left",
+    BOTTOM_CENTER = "bottom-center",
+    CENTER = "center"
+}
+export declare class KbqToastData {
+    style: KbqToastStyle;
+    title: string | TemplateRef<any>;
+    icon?: TemplateRef<any>;
+    caption?: string | TemplateRef<any>;
+    content?: string | TemplateRef<any>;
+    actions?: TemplateRef<any>;
+    hasDismiss?: boolean;
+}
+export interface KbqToastConfig {
+    position: KbqToastPosition;
+    duration: number;
+    delay: number;
+    onTop: boolean;
+}
+export declare const KBQ_TOAST_CONFIG: InjectionToken<unknown>;

package/toggle/_toggle-theme.scss

@@ -0,0 +1,98 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/theming/theming' as *;
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin kbq-toggle-state($state) {
+    .kbq-toggle-bar {
+        border-color: map.get($state, border);
+        background: map.get($state, background);
+    }
+
+    .kbq-toggle__circle {
+        background: map.get($state, circle-background);
+    }
+}
+
+@mixin kbq-toggle-focused-state($state) {
+    & .kbq-toggle-bar {
+        border-color: map.get($state, focus-outline);
+        box-shadow: 0 0 0 1px map.get($state, focus-outline);
+    }
+}
+
+@mixin kbq-toggle-color($toggle) {
+    @include kbq-toggle-state(map.get($toggle, default));
+
+    &:hover {
+        @include kbq-toggle-state(map.get($toggle, hover));
+    }
+
+    &.kbq-active {
+        @include kbq-toggle-state(map.get($toggle, checked));
+    }
+
+    &.kbq-active:hover {
+        @include kbq-toggle-state(map.get($toggle, checked-hover));
+    }
+
+    &.cdk-keyboard-focused {
+        $focused: map.get($toggle, focused);
+
+        @include kbq-toggle-state($focused);
+        @include kbq-toggle-focused-state($focused);
+    }
+
+    &.kbq-active.cdk-keyboard-focused {
+        $checked-focused: map.get($toggle, checked-focused);
+
+        @include kbq-toggle-state($checked-focused);
+        @include kbq-toggle-focused-state($checked-focused);
+    }
+
+    &.kbq-disabled,
+    &.kbq-active.kbq-disabled {
+        @include kbq-toggle-state(map.get($toggle, disabled));
+    }
+}
+
+@mixin kbq-toggle-theme($theme) {
+    $foreground: map.get($theme, foreground);
+
+    $toggle: map.get(map.get($theme, components), toggle);
+
+    $toggle-theme: map.get($toggle, theme);
+    $toggle-error: map.get($toggle, error);
+
+    .kbq-toggle {
+        color: map.get($foreground, text);
+
+        @include kbq-toggle-color($toggle-theme);
+
+        &.kbq-error {
+            @include kbq-toggle-color($toggle-error);
+        }
+    }
+}
+
+@mixin kbq-toggle-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .kbq-toggle:not(.kbq-toggle_big) {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, toggle-font-normal-label));
+
+        & .kbq-hint {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, toggle-font-normal-caption));
+        }
+    }
+
+    .kbq-toggle.kbq-toggle_big {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, toggle-font-big-label));
+
+        & .kbq-hint {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, toggle-font-big-caption));
+        }
+    }
+}

package/toggle/index.d.ts

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

package/toggle/public-api.d.ts

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