@koobiq/components 16.0.0-beta.6 → 16.0.0-beta.8

package/core/locales/en-US.d.ts

@@ -1,5 +1,5 @@
 export declare const enUSLocaleData: {
-    en: {
+    'en-US': {
         select: {
             hiddenItemsText: string;
         };
@@ -7,5 +7,23 @@ export declare const enUSLocaleData: {
             placeholder: string;
             dateInput: string;
         };
+        formatters: {
+            number: {
+                rounding: {
+                    separator: string;
+                    groupSeparator: string;
+                    thousand: string;
+                    million: string;
+                    billion: string;
+                    trillion: string;
+                };
+            };
+        };
+        input: {
+            number: {
+                groupSeparator: string[];
+                fractionSeparator: string;
+            };
+        };
     };
 };

package/core/locales/es-LA.d.ts

@@ -3,5 +3,32 @@ export declare const esLALocaleData: {
         select: {
             hiddenItemsText: string;
         };
+        datepicker: {
+            placeholder: string;
+        };
+        timepicker: {
+            placeholder: {
+                full: string;
+                short: string;
+            };
+        };
+        formatters: {
+            number: {
+                rounding: {
+                    separator: string;
+                    groupSeparator: string;
+                    thousand: string;
+                    million: string;
+                    billion: string;
+                    trillion: string;
+                };
+            };
+        };
+        input: {
+            number: {
+                groupSeparator: string[];
+                fractionSeparator: string;
+            };
+        };
     };
 };

package/core/locales/fa-IR.d.ts

@@ -3,5 +3,33 @@ export declare const faIRLocaleData: {
         select: {
             hiddenItemsText: string;
         };
+        datepicker: {
+            placeholder: string;
+        };
+        timepicker: {
+            placeholder: {
+                full: string;
+                short: string;
+            };
+        };
+        formatters: {
+            number: {
+                rounding: {
+                    separator: string;
+                    groupSeparator: string;
+                    thousand: string;
+                    million: string;
+                    billion: string;
+                    trillion: string;
+                    rtl: boolean;
+                };
+            };
+        };
+        input: {
+            number: {
+                groupSeparator: string[];
+                fractionSeparator: string;
+            };
+        };
     };
 };

package/core/locales/locale-service.d.ts

@@ -2,29 +2,137 @@ import { InjectionToken } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare const KBQ_LOCALE_ID: InjectionToken<string>;
-export declare const KBQ_DEFAULT_LOCALE_ID = "ru";
+export declare const KBQ_DEFAULT_LOCALE_ID = "ru-RU";
 export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
     'zh-CN': {
         select: {
             hiddenItemsText: string;
         };
+        datepicker: {
+            placeholder: string;
+        };
+        timepicker: {
+            placeholder: {
+                full: string;
+                short: string;
+            };
+        };
+        formatters: {
+            number: {
+                rounding: {
+                    separator: string;
+                    groupSeparator: string;
+                    tenThousand: string;
+                    oneHundredMillions: string;
+                    trillion: string;
+                };
+            };
+        };
+        input: {
+            number: {
+                groupSeparator: string[];
+                fractionSeparator: string;
+            };
+        };
     };
     'pt-BR': {
         select: {
             hiddenItemsText: string;
         };
+        datepicker: {
+            placeholder: string;
+        };
+        timepicker: {
+            placeholder: {
+                full: string;
+                short: string;
+            };
+        };
+        formatters: {
+            number: {
+                rounding: {
+                    separator: string;
+                    groupSeparator: string;
+                    thousand: string;
+                    million: string;
+                    billion: string;
+                    trillion: string;
+                };
+            };
+        };
+        input: {
+            number: {
+                groupSeparator: string[];
+                fractionSeparator: string;
+            };
+        };
     };
     'fa-IR': {
         select: {
             hiddenItemsText: string;
         };
+        datepicker: {
+            placeholder: string;
+        };
+        timepicker: {
+            placeholder: {
+                full: string;
+                short: string;
+            };
+        };
+        formatters: {
+            number: {
+                rounding: {
+                    separator: string;
+                    groupSeparator: string;
+                    thousand: string;
+                    million: string;
+                    billion: string;
+                    trillion: string;
+                    rtl: boolean;
+                };
+            };
+        };
+        input: {
+            number: {
+                groupSeparator: string[];
+                fractionSeparator: string;
+            };
+        };
     };
     'es-LA': {
         select: {
             hiddenItemsText: string;
         };
+        datepicker: {
+            placeholder: string;
+        };
+        timepicker: {
+            placeholder: {
+                full: string;
+                short: string;
+            };
+        };
+        formatters: {
+            number: {
+                rounding: {
+                    separator: string;
+                    groupSeparator: string;
+                    thousand: string;
+                    million: string;
+                    billion: string;
+                    trillion: string;
+                };
+            };
+        };
+        input: {
+            number: {
+                groupSeparator: string[];
+                fractionSeparator: string;
+            };
+        };
     };
-    en: {
+    'en-US': {
         select: {
             hiddenItemsText: string;
         };
@@ -32,8 +140,26 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
             placeholder: string;
             dateInput: string;
         };
+        formatters: {
+            number: {
+                rounding: {
+                    separator: string;
+                    groupSeparator: string;
+                    thousand: string;
+                    million: string;
+                    billion: string;
+                    trillion: string;
+                };
+            };
+        };
+        input: {
+            number: {
+                groupSeparator: string[];
+                fractionSeparator: string;
+            };
+        };
     };
-    ru: {
+    'ru-RU': {
         select: {
             hiddenItemsText: string;
         };
@@ -41,6 +167,25 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
             placeholder: string;
             dateInput: string;
         };
+        formatters: {
+            number: {
+                rounding: {
+                    separator: string;
+                    groupSeparator: string;
+                    thousand: string;
+                    million: string;
+                    billion: string;
+                    trillion: string;
+                };
+            };
+        };
+        input: {
+            number: {
+                groupSeparator: string[];
+                fractionSeparator: string;
+                startFormattingFrom: number;
+            };
+        };
     };
     items: {
         id: string;

package/core/locales/pt-BR.d.ts

@@ -3,5 +3,32 @@ export declare const ptBRLocaleData: {
         select: {
             hiddenItemsText: string;
         };
+        datepicker: {
+            placeholder: string;
+        };
+        timepicker: {
+            placeholder: {
+                full: string;
+                short: string;
+            };
+        };
+        formatters: {
+            number: {
+                rounding: {
+                    separator: string;
+                    groupSeparator: string;
+                    thousand: string;
+                    million: string;
+                    billion: string;
+                    trillion: string;
+                };
+            };
+        };
+        input: {
+            number: {
+                groupSeparator: string[];
+                fractionSeparator: string;
+            };
+        };
     };
 };

package/core/locales/ru-RU.d.ts

@@ -1,5 +1,5 @@
 export declare const ruRULocaleData: {
-    ru: {
+    'ru-RU': {
         select: {
             hiddenItemsText: string;
         };
@@ -7,5 +7,24 @@ export declare const ruRULocaleData: {
             placeholder: string;
             dateInput: string;
         };
+        formatters: {
+            number: {
+                rounding: {
+                    separator: string;
+                    groupSeparator: string;
+                    thousand: string;
+                    million: string;
+                    billion: string;
+                    trillion: string;
+                };
+            };
+        };
+        input: {
+            number: {
+                groupSeparator: string[];
+                fractionSeparator: string;
+                startFormattingFrom: number;
+            };
+        };
     };
 };

package/core/locales/zh-CN.d.ts

@@ -3,5 +3,31 @@ export declare const znCNLocaleData: {
         select: {
             hiddenItemsText: string;
         };
+        datepicker: {
+            placeholder: string;
+        };
+        timepicker: {
+            placeholder: {
+                full: string;
+                short: string;
+            };
+        };
+        formatters: {
+            number: {
+                rounding: {
+                    separator: string;
+                    groupSeparator: string;
+                    tenThousand: string;
+                    oneHundredMillions: string;
+                    trillion: string;
+                };
+            };
+        };
+        input: {
+            number: {
+                groupSeparator: string[];
+                fractionSeparator: string;
+            };
+        };
     };
 };

package/core/option/_optgroup-theme.scss

@@ -8,7 +8,7 @@
     $foreground: map.get($theme, foreground);
 
     .kbq-optgroup-label {
-        color: map.get($foreground, text);
+        color: map.get($foreground, contrast);
     }
 
     .kbq-disabled .kbq-optgroup-label {

package/core/option/_option-theme.scss

@@ -30,7 +30,7 @@
     .kbq-option {
         @include kbq-option(map.get($list-item, default));
 
-        &:hover:not(.kbq-disabled):not([disabled]) {
+        &:hover:not(.kbq-disabled) {
             @include kbq-option(map.get($list-item, hover));
         }
 
@@ -42,7 +42,7 @@
         &.kbq-selected {
             @include kbq-option(map.get($list-item, selected));
 
-            &:hover:not(.kbq-disabled):not([disabled]) {
+            &:hover:not(.kbq-disabled) {
                 @include kbq-option(map.get($list-item, selected-hover));
             }
         }

package/core/option/action.d.ts

@@ -40,5 +40,5 @@ export declare class KbqOptionActionComponent extends KbqOptionActionMixinBase i
     onKeyDown($event: any): void;
     private preventShowingTooltip;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOptionActionComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqOptionActionComponent, "kbq-option-action", ["mcOptionAction"], { "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["customIcon"], ["[kbq-icon]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqOptionActionComponent, "kbq-option-action", ["kbqOptionAction"], { "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["customIcon"], ["[kbq-icon]"], false, never>;
 }

package/core/option/optgroup.d.ts

@@ -12,5 +12,5 @@ export declare class KbqOptgroup extends KbqOptgroupMixinBase implements CanDisa
     /** Unique id for the underlying label. */
     labelId: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOptgroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqOptgroup, "kbq-optgroup", ["mcOptgroup"], { "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; }, {}, never, ["kbq-option, kbq-list-option, kbq-timezone-option, ng-container"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqOptgroup, "kbq-optgroup", ["kbqOptgroup"], { "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; }, {}, never, ["kbq-option, kbq-list-option, kbq-timezone-option, ng-container"], false, never>;
 }

package/core/option/option.d.ts

@@ -4,10 +4,10 @@ import { KbqTitleTextRef } from '../title';
 import { KbqOptgroup } from './optgroup';
 import * as i0 from "@angular/core";
 /** Event object emitted by KbqOption when selected or deselected. */
-export declare class KbqOptionSelectionChange {
-    source: KbqOption;
+export declare class KbqOptionSelectionChange<T = KbqOption> {
+    source: T;
     isUserInput: boolean;
-    constructor(source: KbqOption, isUserInput?: boolean);
+    constructor(source: T, isUserInput?: boolean);
 }
 /**
  * Describes a parent component that manages a list of options.
@@ -17,14 +17,45 @@ export declare class KbqOptionSelectionChange {
 export interface KbqOptionParentComponent {
     multiple?: boolean;
 }
+/**
+ * Handler that will update scroll position of elements inside overlay
+ */
+export interface KeyboardNavigationHandler {
+    /** Scrolls the active option into view. */
+    scrollActiveOptionIntoView(): void;
+}
 /**
  * Injection token used to provide the parent component to options.
  */
 export declare const KBQ_OPTION_PARENT_COMPONENT: InjectionToken<KbqOptionParentComponent>;
+export declare abstract class KbqOptionBase {
+    value: any;
+    abstract get viewValue(): string;
+    abstract get disabled(): boolean;
+    abstract set disabled(value: any);
+    abstract readonly onSelectionChange: EventEmitter<KbqOptionSelectionChange<any>>;
+    abstract select(): void;
+    abstract deselect(): void;
+    /** Emits the selection change event. */
+    protected emitSelectionChangeEvent(isUserInput?: boolean): void;
+}
+export declare class KbqVirtualOption extends KbqOptionBase {
+    value: any;
+    private _disabled;
+    get disabled(): any;
+    set disabled(value: any);
+    get selected(): boolean;
+    private _selected;
+    get viewValue(): string;
+    readonly onSelectionChange: EventEmitter<KbqOptionSelectionChange<KbqVirtualOption>>;
+    constructor(value: any, _disabled?: boolean);
+    select(): void;
+    deselect(): void;
+}
 /**
  * Single option inside of a `<kbq-select>` element.
  */
-export declare class KbqOption implements AfterViewChecked, OnDestroy, KbqTitleTextRef {
+export declare class KbqOption extends KbqOptionBase implements AfterViewChecked, OnDestroy, KbqTitleTextRef {
     private readonly element;
     private readonly changeDetectorRef;
     private readonly parent;
@@ -36,7 +67,7 @@ export declare class KbqOption implements AfterViewChecked, OnDestroy, KbqTitleT
     set showCheckbox(value: boolean | undefined);
     private _showCheckbox;
     /** Event emitted when the option is selected or deselected. */
-    readonly onSelectionChange: EventEmitter<KbqOptionSelectionChange>;
+    readonly onSelectionChange: EventEmitter<KbqOptionSelectionChange<KbqOption>>;
     /** Emits when the state of the option changes and any parents have to be notified. */
     readonly stateChanges: Subject<void>;
     /**
@@ -92,10 +123,8 @@ export declare class KbqOption implements AfterViewChecked, OnDestroy, KbqTitleT
     selectViaInteraction(): void;
     getTabIndex(): string;
     getHostElement(): HTMLElement;
-    /** Emits the selection change event. */
-    private emitSelectionChangeEvent;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOption, [null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqOption, "kbq-option", ["mcOption"], { "value": { "alias": "value"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "onSelectionChange": "onSelectionChange"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqOption, "kbq-option", ["kbqOption"], { "value": { "alias": "value"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "onSelectionChange": "onSelectionChange"; }, never, ["*"], false, never>;
 }
 /**
  * Counts the amount of option group labels that precede the specified option.

package/core/option/option.scss

@@ -6,12 +6,12 @@
 
 .kbq-option {
     @include common.kbq-list-item-base();
+
+    &:not(.kbq-disabled) {
+        cursor: pointer;
+    }
 }
 
 .kbq-option-text {
     @include common.kbq-list-text();
-
-    &:not(.kbq-disabled):not([disabled]) {
-        cursor: pointer;
-    }
 }

package/core/overlay/overlay-position-map.d.ts

@@ -1,4 +1,5 @@
-import { ConnectionPositionPair } from '@angular/cdk/overlay';
+import { ConnectionPositionPair, Overlay, ScrollStrategy } from '@angular/cdk/overlay';
+import { InjectionToken } from '@angular/core';
 export declare const POSITION_MAP: {
     [key: string]: ConnectionPositionPair;
 };
@@ -32,3 +33,8 @@ export declare const POSITION_PRIORITY_STRATEGY: {
 export declare const POSITION_TO_CSS_MAP: {
     [key: string]: string;
 };
+export declare const KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER: <T>(token: InjectionToken<T>, factory: (overlay: Overlay) => () => ScrollStrategy) => {
+    provide: InjectionToken<T>;
+    deps: (typeof Overlay)[];
+    useFactory: (overlay: Overlay) => () => ScrollStrategy;
+};

package/core/pop-up/constants.d.ts

@@ -20,7 +20,8 @@ export declare enum PopUpVisibility {
 export declare enum PopUpTriggers {
     Click = "click",
     Focus = "focus",
-    Hover = "hover"
+    Hover = "hover",
+    Keydown = "keydown"
 }
 export declare enum PopUpSizes {
     Small = "small",

package/core/public-api.d.ts

@@ -16,6 +16,7 @@ export * from './selection/index';
 export * from './locales/index';
 export * from './title/index';
 export * from './services/measure-scrollbar.service';
+export * from './services/theme.service';
 export * from './utils/index';
 export * from './validation/index';
 export * from './version';

package/core/select/constants.d.ts

@@ -14,10 +14,10 @@ export declare const SELECT_PANEL_VIEWPORT_PADDING = 8;
 /** Injection token that determines the scroll handling while a select is open. */
 export declare const KBQ_SELECT_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
 /** @docs-private */
-export declare function mcSelectScrollStrategyProviderFactory(overlay: Overlay): () => RepositionScrollStrategy;
+export declare function kbqSelectScrollStrategyProviderFactory(overlay: Overlay): () => RepositionScrollStrategy;
 /** @docs-private */
 export declare const KBQ_SELECT_SCROLL_STRATEGY_PROVIDER: {
     provide: InjectionToken<() => ScrollStrategy>;
     deps: (typeof Overlay)[];
-    useFactory: typeof mcSelectScrollStrategyProviderFactory;
+    useFactory: typeof kbqSelectScrollStrategyProviderFactory;
 };

package/core/services/theme.service.d.ts

@@ -0,0 +1,23 @@
+import { Renderer2, RendererFactory2 } from '@angular/core';
+import { BehaviorSubject, Subscription } from 'rxjs';
+import * as i0 from "@angular/core";
+export interface KbqTheme {
+    name: string;
+    className: string;
+    selected: boolean;
+}
+export declare const KbqDefaultThemes: KbqTheme[];
+export declare class ThemeService<T extends KbqTheme | null = KbqTheme> {
+    private rendererFactory;
+    current: BehaviorSubject<T>;
+    themes: T[];
+    protected renderer: Renderer2;
+    protected subscription: Subscription;
+    constructor(rendererFactory: RendererFactory2);
+    setThemes(items: T[]): void;
+    setTheme(value: T | number): void;
+    getTheme(): T;
+    protected update: ([prev, current]: T[]) => void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ThemeService<any>, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ThemeService<any>>;
+}

package/core/styles/_koobiq-theme.scss

@@ -10,12 +10,14 @@
 @use '../../autocomplete/autocomplete-theme' as *;
 @use '../../badge/badge-theme' as *;
 @use '../../button/button-theme' as *;
+@use '../../button-toggle/button-toggle-theme' as *;
 @use '../../card/card-theme' as *;
 @use '../../checkbox/checkbox-theme' as *;
 @use '../../code-block/code-block-theme' as *;
 @use '../../datepicker/datepicker-theme' as *;
 @use '../../divider/divider-theme' as *;
 @use '../../dropdown/dropdown-theme' as *;
+@use '../../file-upload/file-upload-theme' as *;
 @use '../../form-field/form-field-theme' as *;
 @use '../../form-field/hint-theme' as *;
 @use '../../icon/icon-theme' as *;
@@ -59,6 +61,7 @@
     @include kbq-autocomplete-theme($theme);
     @include kbq-badge-theme($theme);
     @include kbq-button-theme($theme);
+    @include kbq-button-toggle-theme($theme);
     @include kbq-card-theme($theme);
     @include kbq-checkbox-theme($theme);
     @include kbq-code-block-theme($theme);
@@ -67,6 +70,7 @@
     @include kbq-divider-theme($theme);
     @include kbq-dropdown-theme($theme);
     @include kbq-form-field-theme($theme);
+    @include kbq-file-upload-theme($theme);
     @include kbq-hint-theme($theme);
     @include kbq-forms-theme($theme);
     @include kbq-highlight-theme($theme);
@@ -118,6 +122,7 @@
     @include kbq-alert-typography($config);
     @include kbq-badge-typography($config);
     @include kbq-button-typography($config);
+    @include kbq-button-toggle-typography($config);
     @include kbq-checkbox-typography($config);
     @include kbq-code-block-typography($config);
     @include kbq-datepicker-typography($config);
@@ -125,6 +130,7 @@
     @include kbq-dl-typography($config);
     @include kbq-form-field-typography($config);
     @include kbq-hint-typography($config);
+    @include kbq-file-upload-typography($config);
     @include kbq-forms-typography($config);
     @include kbq-input-typography($config);
     @include kbq-link-typography($config);

package/core/styles/_variables.scss

@@ -7,3 +7,4 @@ $z-index-picker: 1050;
 $z-index-dropdown: 1050;
 $z-index-tooltip: 1060;
 $z-index-toast: 1070;
+$z-index-loader-overlay: 1000;