@koobiq/components 18.3.0 → 18.4.0

package/code-block/_code-block-theme.scss

@@ -41,7 +41,7 @@
 
     &.kbq-code-block_header-with-shadow {
         & .kbq-tab-header {
-            box-shadow: var(--kbq-#{$base}-header-shadow);
+            box-shadow: var(--kbq-#{$base}-header-scroll-shadow);
         }
     }
 

package/code-block/actionbar.component.d.ts

@@ -1,10 +1,13 @@
-import { AfterViewInit, EventEmitter } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, EventEmitter } from '@angular/core';
+import { KbqLocaleService } from '@koobiq/components/core';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import { KbqCodeBlockConfiguration, KbqCodeFile } from './code-block.types';
 import * as i0 from "@angular/core";
 export declare class KbqActionBarComponent implements AfterViewInit {
+    private changeDetectorRef;
+    protected configuration?: KbqCodeBlockConfiguration | undefined;
+    protected localeService?: KbqLocaleService | undefined;
     copyTooltip: KbqTooltipTrigger;
-    config: KbqCodeBlockConfiguration;
     codeFiles: KbqCodeFile[];
     selectedTabIndex: number;
     multiLine: boolean;
@@ -15,8 +18,15 @@ export declare class KbqActionBarComponent implements AfterViewInit {
     copyCode: EventEmitter<void>;
     openExternalSystem: EventEmitter<void>;
     copyTooltipText: string;
+    /**
+     * @docs-private
+     */
+    config: KbqCodeBlockConfiguration;
+    constructor(changeDetectorRef: ChangeDetectorRef, configuration?: KbqCodeBlockConfiguration | undefined, localeService?: KbqLocaleService | undefined);
     ngAfterViewInit(): void;
     onCopy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqActionBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqActionBarComponent, "kbq-actionbar-block", never, { "config": { "alias": "config"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "selectedTabIndex": { "alias": "selectedTabIndex"; "required": false; }; "multiLine": { "alias": "multiLine"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; "canLoad": { "alias": "canLoad"; "required": false; }; }, { "toggleSoftWrap": "toggleSoftWrap"; "downloadCode": "downloadCode"; "copyCode": "copyCode"; "openExternalSystem": "openExternalSystem"; }, never, never, false, never>;
+    private updateLocaleParams;
+    private initDefaultParams;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqActionBarComponent, [null, { optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqActionBarComponent, "kbq-actionbar-block", never, { "codeFiles": { "alias": "codeFiles"; "required": false; }; "selectedTabIndex": { "alias": "selectedTabIndex"; "required": false; }; "multiLine": { "alias": "multiLine"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; "canLoad": { "alias": "canLoad"; "required": false; }; }, { "toggleSoftWrap": "toggleSoftWrap"; "downloadCode": "downloadCode"; "copyCode": "copyCode"; "openExternalSystem": "openExternalSystem"; }, never, never, false, never>;
 }

package/code-block/code-block-tokens.scss

@@ -137,7 +137,7 @@
     --kbq-code-block-filled-container-background: var(--kbq-background-bg-secondary);
     --kbq-code-block-filled-container-border-color: transparent;
     --kbq-code-block-filled-header-background: var(--kbq-background-bg-secondary);
-    --kbq-code-block-filled-header-shadow: var(--kbq-shadow-overflow-compact-bottom);
+    --kbq-code-block-filled-header-scroll-shadow: var(--kbq-shadow-overflow-normal-bottom);
     --kbq-code-block-filled-actionbar-fade-gradient: linear-gradient(
         90deg,
         transparent,
@@ -154,7 +154,7 @@
     --kbq-code-block-outline-container-background: var(--kbq-background-card);
     --kbq-code-block-outline-container-border-color: var(--kbq-line-contrast-less);
     --kbq-code-block-outline-header-background: var(--kbq-background-card);
-    --kbq-code-block-outline-header-shadow: var(--kbq-shadow-overflow-compact-bottom);
+    --kbq-code-block-outline-header-scroll-shadow: var(--kbq-shadow-overflow-normal-bottom);
     --kbq-code-block-outline-actionbar-fade-gradient: linear-gradient(90deg, transparent, var(--kbq-background-card));
     --kbq-code-block-outline-actionbar-background: var(--kbq-background-card);
     --kbq-code-block-outline-collapse-expanded-background: transparent;
@@ -273,7 +273,7 @@
     --kbq-code-block-filled-container-background: var(--kbq-background-bg-secondary);
     --kbq-code-block-filled-container-border-color: var(--kbq-line-contrast-less);
     --kbq-code-block-filled-header-background: var(--kbq-background-bg-secondary);
-    --kbq-code-block-filled-header-shadow: var(--kbq-shadow-overflow-compact-bottom);
+    --kbq-code-block-filled-header-scroll-shadow: var(--kbq-shadow-overflow-normal-bottom);
     --kbq-code-block-filled-actionbar-fade-gradient: linear-gradient(
         90deg,
         transparent,
@@ -290,7 +290,7 @@
     --kbq-code-block-outline-container-background: var(--kbq-background-card);
     --kbq-code-block-outline-container-border-color: transparent;
     --kbq-code-block-outline-header-background: var(--kbq-background-card);
-    --kbq-code-block-outline-header-shadow: var(--kbq-shadow-overflow-compact-bottom);
+    --kbq-code-block-outline-header-scroll-shadow: var(--kbq-shadow-overflow-normal-bottom);
     --kbq-code-block-outline-actionbar-fade-gradient: linear-gradient(90deg, transparent, var(--kbq-background-card));
     --kbq-code-block-outline-actionbar-background: var(--kbq-background-card);
     --kbq-code-block-outline-collapse-expanded-background: transparent;

package/code-block/code-block.component.d.ts

@@ -1,6 +1,7 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { Clipboard } from '@angular/cdk/clipboard';
-import { AfterViewInit, ChangeDetectorRef, ElementRef, InjectionToken, OnDestroy, Renderer2 } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, Renderer2 } from '@angular/core';
+import { KbqLocaleService } from '@koobiq/components/core';
 import { KbqTabChangeEvent, KbqTabGroup } from '@koobiq/components/tabs';
 import { Subject } from 'rxjs';
 import { KbqCodeBlockConfiguration, KbqCodeFile } from './code-block.types';
@@ -25,24 +26,14 @@ export declare const LANGUAGES_EXTENSIONS: {
     xml: string;
     json: string;
 };
-export declare const KBQ_CODE_BLOCK_CONFIGURATION: InjectionToken<any>;
-export declare const KBQ_CODE_BLOCK_DEFAULT_CONFIGURATION: {
-    softWrapOnTooltip: string;
-    softWrapOffTooltip: string;
-    downloadTooltip: string;
-    copiedTooltip: string;
-    copyTooltip: string;
-    viewAllText: string;
-    viewLessText: string;
-    openExternalSystemTooltip: string;
-};
 export declare class KbqCodeBlockComponent implements AfterViewInit, OnDestroy {
     private elementRef;
     private changeDetectorRef;
     private clipboard;
     private renderer;
     private focusMonitor;
-    config: KbqCodeBlockConfiguration;
+    protected configuration?: KbqCodeBlockConfiguration | undefined;
+    protected localeService?: KbqLocaleService | undefined;
     tabGroup: KbqTabGroup;
     lineNumbers: boolean;
     filled: boolean;
@@ -64,13 +55,17 @@ export declare class KbqCodeBlockComponent implements AfterViewInit, OnDestroy {
      * @docs-private
      */
     actionbarHidden?: boolean;
+    /**
+     * @docs-private
+     */
+    config: KbqCodeBlockConfiguration;
     readonly resizeStream: Subject<Event>;
     readonly currentCodeBlock: Subject<HTMLElement>;
     private readonly resizeDebounceInterval;
     private resizeSubscription;
     private codeBlockSubscription;
     private hoverSubscription;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, clipboard: Clipboard, renderer: Renderer2, focusMonitor: FocusMonitor, config: KbqCodeBlockConfiguration);
+    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, clipboard: Clipboard, renderer: Renderer2, focusMonitor: FocusMonitor, configuration?: KbqCodeBlockConfiguration | undefined, localeService?: KbqLocaleService | undefined);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     updateHeader: () => void;
@@ -90,9 +85,11 @@ export declare class KbqCodeBlockComponent implements AfterViewInit, OnDestroy {
     showActionBarIfNecessary(): void;
     /** @docs-private */
     hideActionBarIfNoHeader(event?: FocusEvent | null): void;
+    private updateLocaleParams;
+    private initDefaultParams;
     private updateMultiline;
     private getFullFileName;
     private subscribeToHover;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqCodeBlockComponent, [null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqCodeBlockComponent, [null, null, null, null, null, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqCodeBlockComponent, "kbq-code-block", ["kbqCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; }; "filled": { "alias": "filled"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; "canLoad": { "alias": "canLoad"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; }, {}, never, never, false, never>;
 }

package/code-block/code-block.types.d.ts

@@ -1,3 +1,15 @@
+import { InjectionToken } from '@angular/core';
+export declare const KBQ_CODE_BLOCK_CONFIGURATION: InjectionToken<any>;
+export declare const KBQ_CODE_BLOCK_DEFAULT_CONFIGURATION: {
+    softWrapOnTooltip: string;
+    softWrapOffTooltip: string;
+    downloadTooltip: string;
+    copiedTooltip: string;
+    copyTooltip: string;
+    viewAllText: string;
+    viewLessText: string;
+    openExternalSystemTooltip: string;
+};
 export interface KbqCodeBlockConfiguration {
     softWrapOnTooltip: string;
     softWrapOffTooltip: string;

package/core/common-behaviors/color.d.ts

@@ -27,7 +27,7 @@ export declare enum KbqComponentColors {
     Warning = "warning",
     Success = "success",
     Default = "contrast",
-    Empty = ""
+    Empty = "empty"
 }
 /** Mixin to augment a directive with a `color` property. */
 export declare function mixinColor<T extends AbstractConstructor<HasElementRef>>(base: T, defaultColor?: KbqComponentColors | ThemePalette): CanColorCtor & T;

package/core/forms/validators.d.ts

@@ -84,3 +84,24 @@ export declare class PasswordValidators {
      */
     static minSpecial(min: number): ValidatorFn;
 }
+/** Provides a set of validators for file-related form controls. */
+export declare class FileValidators {
+    /**
+     * Validator that checks if the file size is less than or equal to the provided `maxSize`.
+     *
+     * @param maxSize - The maximum allowed file size in bytes.
+     *
+     * @returns A ValidatorFn function that checks the file size.
+     *
+     * ## Usage:
+     *
+     * ```typescript
+     * const control = new FormControl(null, [FileValidators.maxFileSize(1024 * 1024)]); // 1MB
+     * control.setValue(FILE_LESS_OR_EQUAL_THAN_1MB);
+     * console.log(control.errors); // null
+     * control.setValue(FILE_MORE_THAN_1MB);
+     * console.log(control.errors); // {maxFileSize: { max: 1048576, actual: FILE_MORE_THAN_1MB.size }}
+     * ```
+     */
+    static maxFileSize(maxSize: number): ValidatorFn;
+}

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

@@ -29,4 +29,17 @@ export declare const enUSLocaleData: {
             };
         };
     };
+    codeBlock: {
+        softWrapOnTooltip: string;
+        softWrapOffTooltip: string;
+        downloadTooltip: string;
+        copiedTooltip: string;
+        copyTooltip: string;
+        viewAllText: string;
+        viewLessText: string;
+        openExternalSystemTooltip: string;
+    };
+    timezone: {
+        searchPlaceholder: string;
+    };
 };

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

@@ -28,4 +28,17 @@ export declare const esLALocaleData: {
             };
         };
     };
+    codeBlock: {
+        softWrapOnTooltip: string;
+        softWrapOffTooltip: string;
+        downloadTooltip: string;
+        copiedTooltip: string;
+        copyTooltip: string;
+        viewAllText: string;
+        viewLessText: string;
+        openExternalSystemTooltip: string;
+    };
+    timezone: {
+        searchPlaceholder: string;
+    };
 };

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

@@ -28,4 +28,17 @@ export declare const faIRLocaleData: {
             };
         };
     };
+    codeBlock: {
+        softWrapOnTooltip: string;
+        softWrapOffTooltip: string;
+        downloadTooltip: string;
+        copiedTooltip: string;
+        copyTooltip: string;
+        viewAllText: string;
+        viewLessText: string;
+        openExternalSystemTooltip: string;
+    };
+    timezone: {
+        searchPlaceholder: string;
+    };
 };

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

@@ -73,6 +73,19 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 };
             };
         };
+        codeBlock: {
+            softWrapOnTooltip: string;
+            softWrapOffTooltip: string;
+            downloadTooltip: string;
+            copiedTooltip: string;
+            copyTooltip: string;
+            viewAllText: string;
+            viewLessText: string;
+            openExternalSystemTooltip: string;
+        };
+        timezone: {
+            searchPlaceholder: string;
+        };
     };
     'zh-CN': {
         formatters: {
@@ -137,6 +150,19 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 };
             };
         };
+        codeBlock: {
+            softWrapOnTooltip: string;
+            softWrapOffTooltip: string;
+            downloadTooltip: string;
+            copiedTooltip: string;
+            copyTooltip: string;
+            viewAllText: string;
+            viewLessText: string;
+            openExternalSystemTooltip: string;
+        };
+        timezone: {
+            searchPlaceholder: string;
+        };
     };
     'es-LA': {
         formatters: {
@@ -202,6 +228,19 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 };
             };
         };
+        codeBlock: {
+            softWrapOnTooltip: string;
+            softWrapOffTooltip: string;
+            downloadTooltip: string;
+            copiedTooltip: string;
+            copyTooltip: string;
+            viewAllText: string;
+            viewLessText: string;
+            openExternalSystemTooltip: string;
+        };
+        timezone: {
+            searchPlaceholder: string;
+        };
     };
     'pt-BR': {
         formatters: {
@@ -267,6 +306,19 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 };
             };
         };
+        codeBlock: {
+            softWrapOnTooltip: string;
+            softWrapOffTooltip: string;
+            downloadTooltip: string;
+            copiedTooltip: string;
+            copyTooltip: string;
+            viewAllText: string;
+            viewLessText: string;
+            openExternalSystemTooltip: string;
+        };
+        timezone: {
+            searchPlaceholder: string;
+        };
     };
     'ru-RU': {
         formatters: {
@@ -334,6 +386,19 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 };
             };
         };
+        codeBlock: {
+            softWrapOnTooltip: string;
+            softWrapOffTooltip: string;
+            downloadTooltip: string;
+            copiedTooltip: string;
+            copyTooltip: string;
+            viewAllText: string;
+            viewLessText: string;
+            openExternalSystemTooltip: string;
+        };
+        timezone: {
+            searchPlaceholder: string;
+        };
     };
     'fa-IR': {
         formatters: {
@@ -400,6 +465,19 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 };
             };
         };
+        codeBlock: {
+            softWrapOnTooltip: string;
+            softWrapOffTooltip: string;
+            downloadTooltip: string;
+            copiedTooltip: string;
+            copyTooltip: string;
+            viewAllText: string;
+            viewLessText: string;
+            openExternalSystemTooltip: string;
+        };
+        timezone: {
+            searchPlaceholder: string;
+        };
     };
 };
 export declare const KBQ_LOCALE_DATA: InjectionToken<any>;

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

@@ -28,4 +28,17 @@ export declare const ptBRLocaleData: {
             };
         };
     };
+    codeBlock: {
+        softWrapOnTooltip: string;
+        softWrapOffTooltip: string;
+        downloadTooltip: string;
+        copiedTooltip: string;
+        copyTooltip: string;
+        viewAllText: string;
+        viewLessText: string;
+        openExternalSystemTooltip: string;
+    };
+    timezone: {
+        searchPlaceholder: string;
+    };
 };

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

@@ -29,4 +29,17 @@ export declare const ruRULocaleData: {
             };
         };
     };
+    codeBlock: {
+        softWrapOnTooltip: string;
+        softWrapOffTooltip: string;
+        downloadTooltip: string;
+        copiedTooltip: string;
+        copyTooltip: string;
+        viewAllText: string;
+        viewLessText: string;
+        openExternalSystemTooltip: string;
+    };
+    timezone: {
+        searchPlaceholder: string;
+    };
 };

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

@@ -28,4 +28,17 @@ export declare const zhCNLocaleData: {
             };
         };
     };
+    codeBlock: {
+        softWrapOnTooltip: string;
+        softWrapOffTooltip: string;
+        downloadTooltip: string;
+        copiedTooltip: string;
+        copyTooltip: string;
+        viewAllText: string;
+        viewLessText: string;
+        openExternalSystemTooltip: string;
+    };
+    timezone: {
+        searchPlaceholder: string;
+    };
 };

package/core/select/common.d.ts

@@ -20,6 +20,8 @@ export declare class KbqSelectSearch implements AfterContentInit, OnDestroy {
     isSearchChanged: boolean;
     get ngControl(): any;
     constructor(formField: KbqFormFieldRef);
+    setPlaceholder(value: string): void;
+    hasPlaceholder(): boolean;
     focus(): void;
     reset(): void;
     value(): any;

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

@@ -16,11 +16,11 @@ export declare enum KbqThemeSelector {
      * This is the standard theme that is applied
      * when the application is first loaded if nothing else provided
      */
-    Default = "kbq-theme-light",
+    Default = "kbq-light",
     /**
      * This theme is used to provide a darker visual experience, often preferred in low-light environments.
      */
-    Dark = "kbq-theme-dark"
+    Dark = "kbq-dark"
 }
 export declare const KbqDefaultThemes: KbqTheme[];
 export declare class ThemeService<T extends KbqTheme | null = KbqTheme> implements OnDestroy {

package/core/styles/theming/_components-theming.scss

@@ -969,7 +969,7 @@
 
     $modal: (
         container-background: map.get($tokens, 'modal-#{$scheme}-container-background'),
-        container-box-shadow: map.get($tokens, 'modal-#{$scheme}-container-box-shadow'),
+        container-box-shadow: map.get($tokens, 'modal-#{$scheme}-container-shadow'),
         close-button: map.get($tokens, 'modal-#{$scheme}-close-button-color'),
         header: map.get($tokens, 'modal-#{$scheme}-header-text-color'),
         content: map.get($tokens, 'modal-#{$scheme}-content-text-color'),

package/datepicker/_datepicker-theme.scss

@@ -8,7 +8,7 @@
 @mixin kbq-datepicker-theme() {
     .kbq-datepicker__content {
         background: var(--kbq-datepicker-container-background);
-        box-shadow: var(--kbq-datepicker-container-box-shadow);
+        box-shadow: var(--kbq-datepicker-container-shadow);
     }
 
     .kbq-calendar__table-header {

package/datepicker/datepicker-tokens.scss

@@ -22,7 +22,7 @@
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {
     --kbq-datepicker-container-background: var(--kbq-background-card);
-    --kbq-datepicker-container-box-shadow: var(--kbq-shadow-popup);
+    --kbq-datepicker-container-shadow: var(--kbq-shadow-popup);
     --kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);
     --kbq-datepicker-header-divider: var(--kbq-line-contrast-less);
     --kbq-datepicker-grid-cell-default-background: transparent;
@@ -40,7 +40,7 @@
 
 :where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
     --kbq-datepicker-container-background: var(--kbq-background-card);
-    --kbq-datepicker-container-box-shadow: var(--kbq-shadow-popup);
+    --kbq-datepicker-container-shadow: var(--kbq-shadow-popup);
     --kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);
     --kbq-datepicker-header-divider: var(--kbq-line-contrast-less);
     --kbq-datepicker-grid-cell-default-background: transparent;

package/dropdown/_dropdown-theme.scss

@@ -16,7 +16,7 @@
 
 @mixin kbq-dropdown-theme() {
     .kbq-dropdown__panel {
-        box-shadow: var(--kbq-dropdown-container-box-shadow);
+        box-shadow: var(--kbq-dropdown-container-shadow);
         background: var(--kbq-dropdown-container-background);
     }
 

package/dropdown/dropdown-tokens.scss

@@ -50,7 +50,7 @@
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {
     --kbq-dropdown-container-background: var(--kbq-background-card);
-    --kbq-dropdown-container-box-shadow: var(--kbq-shadow-popup);
+    --kbq-dropdown-container-shadow: var(--kbq-shadow-popup);
     --kbq-list-default-container-background: transparent;
     --kbq-list-default-text-color: var(--kbq-foreground-contrast);
     --kbq-list-default-icon-color: var(--kbq-icon-contrast);