@koobiq/components 17.0.0-beta.1 → 17.0.0-rc.1

package/autocomplete/autocomplete-trigger.directive.d.ts

@@ -67,6 +67,12 @@ export declare class KbqAutocompleteTrigger implements AfterViewInit, ControlVal
      */
     get autocompleteDisabled(): boolean;
     set autocompleteDisabled(value: boolean);
+    /**
+     * Event handler for input blur events.
+     * Determines whether the blur event is triggered outside the specific target
+     * @returns A boolean indicating if the blur event happened outside the target element
+     */
+    onInputBlur: (event: FocusEvent) => boolean;
     private _autocompleteDisabled;
     private overlayAttached;
     private overlayRef;
@@ -153,5 +159,5 @@ export declare class KbqAutocompleteTrigger implements AfterViewInit, ControlVal
     private resetActiveItem;
     private canOpen;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAutocompleteTrigger, [null, null, null, null, null, null, { optional: true; }, { optional: true; host: true; }, { optional: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAutocompleteTrigger, "input[kbqAutocomplete], textarea[kbqAutocomplete]", ["kbqAutocompleteTrigger"], { "autocomplete": { "alias": "kbqAutocomplete"; "required": false; }; "connectedTo": { "alias": "kbqAutocompleteConnectedTo"; "required": false; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; }; "autocompleteDisabled": { "alias": "kbqAutocompleteDisabled"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAutocompleteTrigger, "input[kbqAutocomplete], textarea[kbqAutocomplete]", ["kbqAutocompleteTrigger"], { "autocomplete": { "alias": "kbqAutocomplete"; "required": false; }; "connectedTo": { "alias": "kbqAutocompleteConnectedTo"; "required": false; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; }; "autocompleteDisabled": { "alias": "kbqAutocompleteDisabled"; "required": false; }; "onInputBlur": { "alias": "kbqAutocompleteOnBlur"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -57,6 +57,10 @@ $tokens: meta.module-variables(tokens) !default;
                     @include kbq-button-toggle-color(map.get($button, disabled));
                 }
 
+                &.kbq-disabled.kbq-selected {
+                    @include kbq-button-toggle-color(map.get($button, selected-disabled));
+                }
+
                 &.cdk-keyboard-focused {
                     border-color: map.get($button, focused);
                 }

package/checkbox/checkbox.scss

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/visually-hidden';
 @use '../core/styles/common/layout';
-@use '../core/styles/variables';
 
 @use '../core/styles/tokens';
 

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

@@ -6,6 +6,7 @@
 
 
 @mixin kbq-code-block-style($style) {
+    $header: map.get($style, header);
     $container: map.get($style, container);
     $actionbar: map.get($style, actionbar);
     $collapse: map.get($style, collapse);
@@ -18,8 +19,14 @@
         background: map.get($header, background) !important;
     }
 
-    &:not(.kbq-code-block_no-header) .kbq-code-block__code {
-        box-shadow: map.get($container, shadow);
+    & .kbq-code-block-actionbar {
+        background: map.get($actionbar, background);
+    }
+
+    &.kbq-code-block_header-with-shadow {
+        & .kbq-tab-header {
+            box-shadow: map.get($header, shadow);
+        }
     }
 
     &.kbq-code-block_no-header {
@@ -30,11 +37,13 @@
         }
     }
 
-    & .kbq-code-block-actionbar {
-        background: map.get($actionbar, background);
+    .kbq-code-block__show-more {
+        .bg-wrapper {
+            background: map.get($collapse, button-expand-background);
+            opacity: 90%;
+        }
     }
 
-
     & .kbq-code-block__show-more_expanded {
         background: map.get($collapse, expanded-background);
     }
@@ -310,7 +319,7 @@
             }
 
             &-ln-n {
-                color: map.get($code-block, line-numbers-color);
+                color: map.get($hljs, line-numbers-color);
             }
 
             &-line-numbers {
@@ -332,9 +341,6 @@
                 border-bottom-color: transparent;
             }
         }
-
-        .kbq-code-block__show-more {
-        }
     }
 
     .kbq-code-block-actionbar {

package/code-block/actionbar.component.scss

@@ -13,7 +13,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     position: absolute;
 
-    top: 0;
+    top: -1px;
     right: 0;
 
     padding:

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

@@ -53,6 +53,7 @@ export declare class KbqCodeBlockComponent implements OnDestroy {
     copied: boolean;
     viewAll: boolean;
     multiLine: boolean;
+    isTopOverflow: boolean;
     readonly resizeStream: Subject<Event>;
     private readonly resizeDebounceInterval;
     private resizeSubscription;
@@ -67,6 +68,8 @@ export declare class KbqCodeBlockComponent implements OnDestroy {
     onHighlighted(): void;
     getMaxHeight(): string;
     onSelectTab($event: KbqTabChangeEvent): void;
+    checkOverflow(currentCodeContentElement: HTMLElement): void;
+    onShowMoreClick(currentCodeContentElement: HTMLPreElement): void;
     private updateMultiline;
     private getFullFileName;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCodeBlockComponent, [null, null, null, null, { optional: true; }]>;

package/code-block/code-block.scss

@@ -28,17 +28,17 @@ $tokens: meta.module-variables(tokens) !default;
 
     .kbq-tab-header {
         // 4 buttons + margin
-        margin-right: calc(32 * 4) + 24px;
+        $buttons-margin: calc(32 * 4) + 24px;
 
         padding:
             var(
                 --kbq-code-block-size-header-padding-vertical,
                 map.get($tokens, code-block-size-header-padding-vertical)
             )
-            var(
+            calc(var(
                 --kbq-code-block-size-header-padding-right,
                 map.get($tokens, code-block-size-header-padding-right)
-            )
+            ) + $buttons-margin)
             var(
                 --kbq-code-block-size-header-padding-vertical,
                 map.get($tokens, code-block-size-header-padding-vertical)
@@ -121,6 +121,12 @@ $tokens: meta.module-variables(tokens) !default;
         }
     }
 
+    &:not(:has(.kbq-code-block__show-more)) {
+        .kbq-code-block__code {
+            overflow-y: auto;
+        }
+    }
+
     pre {
         margin: 0;
     }
@@ -140,7 +146,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     &.kbq-code-block__code_view-all {
         max-height: unset;
-        overflow-y: unset;
+        overflow-y: auto;
     }
 
     &.kbq-code-block__code_soft-wrap {
@@ -198,5 +204,9 @@ $tokens: meta.module-variables(tokens) !default;
             map.get($tokens, code-block-size-collapse-expanded-padding-bottom)
         );
     }
+
+    .bg-wrapper {
+        border-radius: var(--kbq-button-size-border-radius, map.get($tokens, button-size-border-radius));
+    }
 }
 /* stylelint-enable no-descending-specificity */

package/core/datetime/date-adapter.d.ts

@@ -1,5 +1,5 @@
 import { InjectionToken } from '@angular/core';
-import { DateAdapter as BaseDateAdapter } from '@mosaic-design/date-adapter';
+import { DateAdapter as BaseDateAdapter } from '@koobiq/date-adapter';
 import { BehaviorSubject, Observable } from 'rxjs';
 /** InjectionToken for datepicker that can be used to override default locale code. */
 export declare const KBQ_DATE_LOCALE: InjectionToken<string>;

package/core/datetime/date-formats.d.ts

@@ -1,4 +1,4 @@
 import { InjectionToken } from '@angular/core';
-import { DateFormats } from '@mosaic-design/date-adapter';
+import { DateFormats } from '@koobiq/date-adapter';
 export declare const KBQ_DATE_FORMATS: InjectionToken<DateFormats>;
 export type KbqDateFormats = DateFormats;

package/core/formatters/date/formatter.d.ts

@@ -1,5 +1,5 @@
-import { DateAdapter } from '@mosaic-design/date-adapter';
-import { DateFormatter as BaseDateFormatter } from '@mosaic-design/date-formatter';
+import { DateAdapter } from '@koobiq/date-adapter';
+import { DateFormatter as BaseDateFormatter } from '@koobiq/date-formatter';
 import * as i0 from "@angular/core";
 export declare class DateFormatter<D> extends BaseDateFormatter<D> {
     readonly adapter: DateAdapter<D>;

package/core/formatters/date/formatter.pipe.d.ts

@@ -1,5 +1,5 @@
 import { PipeTransform } from '@angular/core';
-import { DateTimeOptions } from '@mosaic-design/date-formatter';
+import { DateTimeOptions } from '@koobiq/date-formatter';
 import { DateAdapter } from '../../datetime';
 import { DateFormatter } from './formatter';
 import * as i0 from "@angular/core";

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

@@ -1,28 +1,31 @@
 export declare const enUSLocaleData: {
-    'en-US': {
-        select: {
-            hiddenItemsText: string;
-        };
-        datepicker: {
-            placeholder: string;
-            dateInput: string;
+    select: {
+        hiddenItemsText: string;
+    };
+    datepicker: {
+        placeholder: string;
+        dateInput: string;
+    };
+    timepicker: {
+        placeholder: {
+            full: string;
+            short: string;
         };
-        formatters: {
-            number: {
-                rounding: {
-                    separator: string;
-                    groupSeparator: string;
-                    thousand: string;
-                    million: string;
-                    billion: string;
-                    trillion: string;
-                };
-            };
+    };
+    fileUpload: {
+        single: {
+            captionText: string;
+            browseLink: string;
         };
-        input: {
-            number: {
-                groupSeparator: string[];
-                fractionSeparator: string;
+        multiple: {
+            captionText: string;
+            captionTextWhenSelected: string;
+            captionTextForCompactSize: string;
+            browseLink: string;
+            title: string;
+            gridHeaders: {
+                file: string;
+                size: string;
             };
         };
     };

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

@@ -1,33 +1,30 @@
 export declare const esLALocaleData: {
-    'es-LA': {
-        select: {
-            hiddenItemsText: string;
-        };
-        datepicker: {
-            placeholder: string;
-        };
-        timepicker: {
-            placeholder: {
-                full: string;
-                short: string;
-            };
+    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;
-                };
-            };
+    };
+    fileUpload: {
+        single: {
+            captionText: string;
+            browseLink: string;
         };
-        input: {
-            number: {
-                groupSeparator: string[];
-                fractionSeparator: string;
+        multiple: {
+            captionText: string;
+            captionTextWhenSelected: string;
+            captionTextForCompactSize: string;
+            browseLink: string;
+            title: string;
+            gridHeaders: {
+                file: string;
+                size: string;
             };
         };
     };

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

@@ -1,34 +1,30 @@
 export declare const faIRLocaleData: {
-    'fa-IR': {
-        select: {
-            hiddenItemsText: string;
-        };
-        datepicker: {
-            placeholder: string;
-        };
-        timepicker: {
-            placeholder: {
-                full: string;
-                short: string;
-            };
+    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;
-                };
-            };
+    };
+    fileUpload: {
+        single: {
+            captionText: string;
+            browseLink: string;
         };
-        input: {
-            number: {
-                groupSeparator: string[];
-                fractionSeparator: string;
+        multiple: {
+            captionText: string;
+            captionTextWhenSelected: string;
+            captionTextForCompactSize: string;
+            browseLink: string;
+            title: string;
+            gridHeaders: {
+                file: string;
+                size: string;
             };
         };
     };

package/core/locales/formatters.d.ts

@@ -0,0 +1,121 @@
+export declare const enUSFormattersData: {
+    formatters: {
+        number: {
+            rounding: {
+                separator: string;
+                groupSeparator: string;
+                thousand: string;
+                million: string;
+                billion: string;
+                trillion: string;
+            };
+        };
+    };
+    input: {
+        number: {
+            groupSeparator: string[];
+            fractionSeparator: string;
+        };
+    };
+};
+export declare const esLAFormattersData: {
+    formatters: {
+        number: {
+            rounding: {
+                separator: string;
+                groupSeparator: string;
+                thousand: string;
+                million: string;
+                billion: string;
+                trillion: string;
+            };
+        };
+    };
+    input: {
+        number: {
+            groupSeparator: string[];
+            fractionSeparator: string;
+        };
+    };
+};
+export declare const faIRFormattersData: {
+    formatters: {
+        number: {
+            rounding: {
+                separator: string;
+                groupSeparator: string;
+                thousand: string;
+                million: string;
+                billion: string;
+                trillion: string;
+                rtl: boolean;
+            };
+        };
+    };
+    input: {
+        number: {
+            groupSeparator: string[];
+            fractionSeparator: string;
+        };
+    };
+};
+export declare const ptBRFormattersData: {
+    formatters: {
+        number: {
+            rounding: {
+                separator: string;
+                groupSeparator: string;
+                thousand: string;
+                million: string;
+                billion: string;
+                trillion: string;
+            };
+        };
+    };
+    input: {
+        number: {
+            groupSeparator: string[];
+            fractionSeparator: string;
+        };
+    };
+};
+export declare const ruRUFormattersData: {
+    formatters: {
+        number: {
+            rounding: {
+                separator: string;
+                groupSeparator: string;
+                thousand: string;
+                million: string;
+                billion: string;
+                trillion: string;
+            };
+        };
+    };
+    input: {
+        number: {
+            groupSeparator: string[];
+            fractionSeparator: string;
+            startFormattingFrom: number;
+        };
+    };
+};
+export declare const zhCNFormattersData: {
+    formatters: {
+        number: {
+            rounding: {
+                separator: string;
+                groupSeparator: string;
+                tenThousand: string;
+                oneHundredMillions: string;
+                trillion: string;
+            };
+        };
+    };
+    input: {
+        number: {
+            groupSeparator: string[];
+            fractionSeparator: string;
+        };
+    };
+};

package/core/locales/index.d.ts

@@ -1,2 +1,9 @@
+export * from './en-US';
+export * from './es-LA';
+export * from './fa-IR';
+export * from './pt-BR';
+export * from './ru-RU';
+export * from './zh-CN';
 export * from './locale-service';
 export * from './locale-service.module';
+export * from './formatters';