@bravobit/bb-foundation 0.53.0 → 0.53.2

package/elements/lib/elements.inject.d.ts

@@ -1 +1,3 @@
 export declare function injectAcceptString(): string;
+export declare function injectMaxFileSize(): number;
+export declare function injectMaxTotalFileSize(): number;

package/elements/lib/elements.interfaces.d.ts

@@ -35,5 +35,7 @@ export interface ElementsConfig {
     errors?: ElementsError;
     defaultDisplayUnit?: ElementsDisplayUnit;
     allowedFileTypes?: string[];
+    maxFileSize?: number;
+    maxTotalFileSize?: number;
 }
 export type ElementsDisplayUnit = 'rem' | 'px';

package/elements/lib/elements.module.d.ts

@@ -30,9 +30,10 @@ import * as i26 from "./date-picker/date-picker.component";
 import * as i27 from "./color-slider/color-slider.component";
 import * as i28 from "./color-picker/color-picker.component";
 import * as i29 from "./image-control/image-control.component";
+import * as i30 from "./pincode-control/pincode-control.component";
 export declare class ElementsModule {
     static forRoot(config?: ElementsConfig): ModuleWithProviders<ElementsModule>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElementsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ElementsModule, never, [typeof i1.BbFormError, typeof i2.BbFormSubmit, typeof i3.BbFormSubmitter, typeof i4.BbInput, typeof i5.BbImageUpload, typeof i6.BbExtraErrorControls, typeof i7.BbFileDrop, typeof i8.ColorPickerDirective, typeof i9.BbFileSize, typeof i10.BbFileImage, typeof i11.BbRelativeTime, typeof i12.BbDate, typeof i13.BbButton, typeof i13.BbAnchor, typeof i14.BbSpinner, typeof i15.BbIcon, typeof i16.BbFormControl, typeof i17.BbFormGroup, typeof i18.BbCheckbox, typeof i19.BbCheckboxGroup, typeof i20.BbRadioGroup, typeof i21.BbRadioButton, typeof i22.BbAvatar, typeof i23.BbMultiFileControl, typeof i24.BbFilePicker, typeof i25.BbImagePicker, typeof i26.BbDatePicker, typeof i27.BbColorSlider, typeof i28.BbColorPicker, typeof i29.BbImageControl], [typeof i1.BbFormError, typeof i2.BbFormSubmit, typeof i3.BbFormSubmitter, typeof i4.BbInput, typeof i5.BbImageUpload, typeof i6.BbExtraErrorControls, typeof i7.BbFileDrop, typeof i8.ColorPickerDirective, typeof i9.BbFileSize, typeof i10.BbFileImage, typeof i11.BbRelativeTime, typeof i12.BbDate, typeof i13.BbButton, typeof i13.BbAnchor, typeof i14.BbSpinner, typeof i15.BbIcon, typeof i16.BbFormControl, typeof i17.BbFormGroup, typeof i18.BbCheckbox, typeof i19.BbCheckboxGroup, typeof i20.BbRadioGroup, typeof i21.BbRadioButton, typeof i22.BbAvatar, typeof i23.BbMultiFileControl, typeof i24.BbFilePicker, typeof i25.BbImagePicker, typeof i26.BbDatePicker, typeof i27.BbColorSlider, typeof i28.BbColorPicker, typeof i29.BbImageControl]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ElementsModule, never, [typeof i1.BbFormError, typeof i2.BbFormSubmit, typeof i3.BbFormSubmitter, typeof i4.BbInput, typeof i5.BbImageUpload, typeof i6.BbExtraErrorControls, typeof i7.BbFileDrop, typeof i8.ColorPickerDirective, typeof i9.BbFileSize, typeof i10.BbFileImage, typeof i11.BbRelativeTime, typeof i12.BbDate, typeof i13.BbButton, typeof i13.BbAnchor, typeof i14.BbSpinner, typeof i15.BbIcon, typeof i16.BbFormControl, typeof i17.BbFormGroup, typeof i18.BbCheckbox, typeof i19.BbCheckboxGroup, typeof i20.BbRadioGroup, typeof i21.BbRadioButton, typeof i22.BbAvatar, typeof i23.BbMultiFileControl, typeof i24.BbFilePicker, typeof i25.BbImagePicker, typeof i26.BbDatePicker, typeof i27.BbColorSlider, typeof i28.BbColorPicker, typeof i29.BbImageControl, typeof i30.BbPincodeControl], [typeof i1.BbFormError, typeof i2.BbFormSubmit, typeof i3.BbFormSubmitter, typeof i4.BbInput, typeof i5.BbImageUpload, typeof i6.BbExtraErrorControls, typeof i7.BbFileDrop, typeof i8.ColorPickerDirective, typeof i9.BbFileSize, typeof i10.BbFileImage, typeof i11.BbRelativeTime, typeof i12.BbDate, typeof i13.BbButton, typeof i13.BbAnchor, typeof i14.BbSpinner, typeof i15.BbIcon, typeof i16.BbFormControl, typeof i17.BbFormGroup, typeof i18.BbCheckbox, typeof i19.BbCheckboxGroup, typeof i20.BbRadioGroup, typeof i21.BbRadioButton, typeof i22.BbAvatar, typeof i23.BbMultiFileControl, typeof i24.BbFilePicker, typeof i25.BbImagePicker, typeof i26.BbDatePicker, typeof i27.BbColorSlider, typeof i28.BbColorPicker, typeof i29.BbImageControl, typeof i30.BbPincodeControl]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ElementsModule>;
 }

package/elements/lib/file-picker/file-picker.component.d.ts

@@ -9,6 +9,7 @@ export declare class BbFilePicker implements ControlValueAccessor {
     label: string | TemplateRef<any> | null;
     hint: string | TemplateRef<any> | null;
     accept: string;
+    maxFileSize: number;
     showImages: boolean;
     grouped: boolean;
     required: boolean;
@@ -36,11 +37,19 @@ export declare class BbFilePicker implements ControlValueAccessor {
     } | null): void;
     validate({ value }: FormControl<File>): {
         invalidFileType: boolean;
+        maxFileSize?: undefined;
+    } | {
+        maxFileSize: {
+            maxSize: string;
+        };
+        invalidFileType?: undefined;
     };
     saveFile(files: File[]): void;
     private getFilesFromEvent;
     static ɵfac: i0.ɵɵFactoryDeclaration<BbFilePicker, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BbFilePicker, "bb-file-picker", never, { "label": { "alias": "label"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "showImages": { "alias": "showImages"; "required": false; }; "grouped": { "alias": "grouped"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hideErrors": { "alias": "hideErrors"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; }, ["extraTemplate"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BbFilePicker, "bb-file-picker", never, { "label": { "alias": "label"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; }; "showImages": { "alias": "showImages"; "required": false; }; "grouped": { "alias": "grouped"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hideErrors": { "alias": "hideErrors"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; }, ["extraTemplate"], never, true, never>;
+    static ngAcceptInputType_maxFileSize: unknown;
+    static ngAcceptInputType_showImages: unknown;
     static ngAcceptInputType_grouped: unknown;
     static ngAcceptInputType_required: unknown;
     static ngAcceptInputType_disabled: unknown;

package/elements/lib/multi-file-control/multi-file-control.component.d.ts

@@ -9,6 +9,8 @@ export declare class BbMultiFileControl implements ControlValueAccessor {
     label: string | TemplateRef<any> | null;
     hint: string | TemplateRef<any> | null;
     accept: string;
+    maxFileSize: number;
+    maxTotalFileSize: number;
     grouped: boolean;
     required: boolean;
     disabled: boolean;
@@ -40,13 +42,29 @@ export declare class BbMultiFileControl implements ControlValueAccessor {
         token: string;
         data?: any;
     } | null): void;
-    validate({ value }: FormControl<File[]>): {
+    validate(control: FormControl<File[]>): {
         invalidFiles: Record<number, boolean>;
+        maxFileSize?: undefined;
+        maxTotalFileSize?: undefined;
+    } | {
+        maxFileSize: {
+            maxSize: string;
+        };
+        invalidFiles?: undefined;
+        maxTotalFileSize?: undefined;
+    } | {
+        maxTotalFileSize: {
+            max: string;
+            current: string;
+        };
+        invalidFiles?: undefined;
+        maxFileSize?: undefined;
     };
     addFiles(files: File[]): void;
-    private isFileLike;
     static ɵfac: i0.ɵɵFactoryDeclaration<BbMultiFileControl, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BbMultiFileControl, "bb-multi-file-control", never, { "label": { "alias": "label"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "grouped": { "alias": "grouped"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hideErrors": { "alias": "hideErrors"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, { "delete": "delete"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BbMultiFileControl, "bb-multi-file-control", never, { "label": { "alias": "label"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; }; "maxTotalFileSize": { "alias": "maxTotalFileSize"; "required": false; }; "grouped": { "alias": "grouped"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hideErrors": { "alias": "hideErrors"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, { "delete": "delete"; }, never, never, true, never>;
+    static ngAcceptInputType_maxFileSize: unknown;
+    static ngAcceptInputType_maxTotalFileSize: unknown;
     static ngAcceptInputType_grouped: unknown;
     static ngAcceptInputType_required: unknown;
     static ngAcceptInputType_disabled: unknown;

package/elements/lib/pincode-control/pincode-control.component.d.ts

@@ -0,0 +1,65 @@
+import { ElementRef, EventEmitter, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { ControlValueAccessor, FormControl, Validator } from '@angular/forms';
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare class BbPincodeControl implements OnInit, OnDestroy, ControlValueAccessor, Validator {
+    private readonly _platform;
+    private readonly _changeDetectorRef;
+    htmlInputElementRef: ElementRef<HTMLInputElement>;
+    label: string | TemplateRef<any> | null;
+    hint: string | TemplateRef<any> | null;
+    placeholder: string | null;
+    autoFocus: boolean;
+    required: boolean;
+    readonly: boolean;
+    grouped: boolean;
+    digits: number;
+    get value(): string | null;
+    valueChange: EventEmitter<string>;
+    set value(value: string | null);
+    data$: Observable<{
+        items?: {
+            index: number;
+            value: string;
+            active: boolean;
+        }[];
+    }>;
+    control: FormControl<string>;
+    error: boolean;
+    onTouchedCallback: () => void;
+    onChangeCallback: (_: string | null) => void;
+    private _subscription;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    writeValue(value: string | null): void;
+    registerOnChange(method: (_: string | null) => void): void;
+    registerOnTouched(method: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    onErrorChange(error: {
+        token: string;
+        data?: any;
+    } | null): void;
+    validate(control: FormControl): {
+        maxlength: {
+            actualLength: any;
+            requiredLength: number;
+        };
+        minlength?: undefined;
+    } | {
+        minlength: {
+            actualLength: any;
+            requiredLength: number;
+        };
+        maxlength?: undefined;
+    };
+    private setData;
+    private handleValueChanges;
+    private handleAutoFocus;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BbPincodeControl, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BbPincodeControl, "bb-pincode-control", never, { "label": { "alias": "label"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "required": { "alias": "required"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "grouped": { "alias": "grouped"; "required": false; }; "digits": { "alias": "digits"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+    static ngAcceptInputType_autoFocus: unknown;
+    static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_readonly: unknown;
+    static ngAcceptInputType_grouped: unknown;
+    static ngAcceptInputType_digits: unknown;
+}

package/elements/lib/pipes/file-size.pipe.d.ts

@@ -2,7 +2,6 @@ import { PipeTransform } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class BbFileSize implements PipeTransform {
     transform(value: number): string;
-    private format;
     static ɵfac: i0.ɵɵFactoryDeclaration<BbFileSize, never>;
     static ɵpipe: i0.ɵɵPipeDeclaration<BbFileSize, "bbFileSize", true>;
 }

package/elements/public_api.d.ts

@@ -28,6 +28,7 @@ export * from './lib/date-picker/date-picker.component';
 export * from './lib/color-slider/color-slider.component';
 export * from './lib/color-picker/color-picker.component';
 export * from './lib/image-control/image-control.component';
+export * from './lib/pincode-control/pincode-control.component';
 export * from './lib/elements.inject';
 export * from './lib/elements.interfaces';
 export * from './lib/elements.config';

package/fesm2022/bravobit-bb-foundation-elements.mjs

@@ -12,12 +12,13 @@ import { BbTemplate } from '@bravobit/bb-foundation/utils';
 import * as i1$1 from '@angular/cdk/platform';
 import { Platform } from '@angular/cdk/platform';
 import * as i2 from '@bravobit/bb-foundation';
-import { Files, clamp, hsvToHex, hexToHsv, Exif, FileLoader, parseDate } from '@bravobit/bb-foundation';
+import { Files, clamp, hsvToHex, hexToHsv, formatFileSize, Exif, FileLoader, parseDate, isValidFileType, isValidFileSize, isFileLike } from '@bravobit/bb-foundation';
 import { Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import * as i3 from '@angular/platform-browser';
 import { trigger, transition, style, animate } from '@angular/animations';
 import { TooltipDirective } from '@bravobit/bb-foundation/tooltip';
+import { getControlValue } from '@bravobit/bb-foundation/rxjs';
 
 class BbFormSubmit {
     _host;
@@ -775,18 +776,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
 
 class BbFileSize {
     transform(value) {
-        return this.format(value);
+        return formatFileSize(value);
     }
-    format = (value, decimals = 2) => {
-        if (value === 0) {
-            return '0 Bytes';
-        }
-        const k = 1024;
-        const dm = decimals < 0 ? 0 : decimals;
-        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-        const index = Math.floor(Math.log(value) / Math.log(k));
-        return parseFloat((value / Math.pow(k, index)).toFixed(dm)) + ' ' + sizes[index];
-    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: BbFileSize, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
     static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.6", ngImport: i0, type: BbFileSize, isStandalone: true, name: "bbFileSize" });
 }
@@ -1702,6 +1693,14 @@ function injectAcceptString() {
         ? null
         : allowedFileTypes.join(',');
 }
+function injectMaxFileSize() {
+    const config = inject(ELEMENTS_CONFIG, { optional: true });
+    return config?.maxFileSize ?? Number.MAX_SAFE_INTEGER;
+}
+function injectMaxTotalFileSize() {
+    const config = inject(ELEMENTS_CONFIG, { optional: true });
+    return config?.maxTotalFileSize ?? Number.MAX_SAFE_INTEGER;
+}
 
 let nextUniqueId$2 = 0;
 class BbMultiFileControl {
@@ -1716,6 +1715,8 @@ class BbMultiFileControl {
     label = null;
     hint = null;
     accept = injectAcceptString();
+    maxFileSize = injectMaxFileSize();
+    maxTotalFileSize = injectMaxTotalFileSize();
     grouped = false;
     required = false;
     disabled = false;
@@ -1764,19 +1765,32 @@ class BbMultiFileControl {
     onErrorChange(error) {
         this.error = !!error;
     }
-    validate({ value }) {
-        const regexString = (this.accept ?? '*')
-            .replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')
-            .replace(/,/g, '|');
-        const mimeTypeRegex = new RegExp(regexString);
-        const errors = (value ?? []).reduce((previous, current, index) => {
-            const isValid = this.isFileLike(current) && mimeTypeRegex.test(current?.type);
-            if (isValid) {
+    validate(control) {
+        const value = control?.value ?? [];
+        const errors = value.reduce((previous, current, index) => {
+            if (isValidFileType(current, this.accept)) {
                 return previous;
             }
             return { ...previous, [index]: true };
         }, {});
-        return Object.keys(errors)?.length > 0 ? { invalidFiles: errors } : null;
+        if (Object.keys(errors)?.length > 0) {
+            return { invalidFiles: errors };
+        }
+        for (const file of value) {
+            if (!isValidFileSize(file, this.maxFileSize)) {
+                return { maxFileSize: { maxSize: formatFileSize(this.maxFileSize) } };
+            }
+        }
+        const totalSize = value.reduce((previous, current) => previous + (current?.size ?? 0), 0);
+        if (totalSize > this.maxTotalFileSize) {
+            return {
+                maxTotalFileSize: {
+                    max: formatFileSize(this.maxTotalFileSize),
+                    current: formatFileSize(totalSize)
+                }
+            };
+        }
+        return null;
     }
     addFiles(files) {
         if (this.disabled) {
@@ -1784,19 +1798,15 @@ class BbMultiFileControl {
         }
         for (let index = 0; index < files?.length; index++) {
             const file = files?.[index] ?? null;
-            if (!this.isFileLike(file)) {
+            if (!isFileLike(file)) {
                 continue;
             }
             this.value.push(file);
         }
         this.onChangeCallback?.(this.value);
     }
-    isFileLike(input) {
-        return 'File' in window && input instanceof File
-            || 'Blob' in window && input instanceof Blob;
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: BbMultiFileControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: BbMultiFileControl, isStandalone: true, selector: "bb-multi-file-control", inputs: { label: "label", hint: "hint", accept: "accept", grouped: ["grouped", "grouped", booleanAttribute], required: ["required", "required", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], hideErrors: ["hideErrors", "hideErrors", booleanAttribute], items: "items" }, outputs: { delete: "delete" }, host: { properties: { "class.required": "required", "class.disabled": "disabled", "class.grouped": "grouped", "class.error": "error" }, classAttribute: "bb-multi-file-control" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: BbMultiFileControl, isStandalone: true, selector: "bb-multi-file-control", inputs: { label: "label", hint: "hint", accept: "accept", maxFileSize: ["maxFileSize", "maxFileSize", numberAttribute], maxTotalFileSize: ["maxTotalFileSize", "maxTotalFileSize", numberAttribute], grouped: ["grouped", "grouped", booleanAttribute], required: ["required", "required", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], hideErrors: ["hideErrors", "hideErrors", booleanAttribute], items: "items" }, outputs: { delete: "delete" }, host: { properties: { "class.required": "required", "class.disabled": "disabled", "class.grouped": "grouped", "class.error": "error" }, classAttribute: "bb-multi-file-control" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbMultiFileControl), multi: true },
             { provide: NG_VALIDATORS, useExisting: BbMultiFileControl, multi: true }
         ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: "<!-- The label of the input. -->\n@if (label; as labelContent) {\n    <label [for]=\"labelId\"\n           class=\"bb-multi-file-control-label\">\n        <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n    </label>\n}\n\n<input #fileInput\n       [id]=\"labelId\"\n       [accept]=\"accept\"\n       [disabled]=\"disabled\"\n       (change)=\"onFileChange($event)\"\n       class=\"bb-multi-file-control-input\"\n       type=\"file\"\n       tabindex=\"-1\"\n       multiple>\n\n<div [bbFileDropDisabled]=\"disabled\"\n     (bbFileDrop)=\"addFiles($event)\"\n     class=\"bb-multi-file-control-container\">\n    @if (showList) {\n        <ul class=\"bb-multi-file-control-list\">\n            @for (item of items; track item?.id) {\n                <li class=\"bb-multi-file-control-item\">\n                    <i class=\"bb-multi-file-control-icon attach-horizontal\"></i>\n                    <a [href]=\"item?.url\"\n                       target=\"_blank\"\n                       rel=\"noopener\"\n                       class=\"bb-multi-file-control-item-content\">{{ item?.label }}</a>\n                    @if (!disabled && delete?.observed) {\n                        <button (click)=\"delete?.emit(item)\"\n                                type=\"button\"\n                                class=\"bb-multi-file-control-item-button\">\n                            <i class=\"bb-multi-file-control-icon clear\"></i>\n                        </button>\n                    }\n                </li>\n            }\n            @for (file of value; track $index) {\n                <li class=\"bb-multi-file-control-item\">\n                    <i class=\"bb-multi-file-control-icon attach-horizontal\"></i>\n                    <button (click)=\"downloadFile(file)\"\n                            class=\"bb-multi-file-control-item-content\"\n                            type=\"button\">\n                        {{ file?.name }}\n                    </button>\n                    @if (!disabled) {\n                        <button (click)=\"deleteFile($index)\"\n                                type=\"button\"\n                                class=\"bb-multi-file-control-item-button\">\n                            <i class=\"bb-multi-file-control-icon clear\"></i>\n                        </button>\n                    }\n                </li>\n            }\n        </ul>\n    } @else if (!disabled) {\n        <i class=\"bb-multi-file-control-icon attach-vertical\"></i>\n        <p [bb-localize-string]=\"'multi-file-control.choose_file_text' | bbLocalize\"\n           class=\"bb-multi-file-control-empty\">\n            <label *bbLocalizeTemplate=\"'label'\"\n                   [for]=\"labelId\">{{ 'multi-file-control.choose_file' | bbLocalize }}</label>\n        </p>\n    }\n    @if (!disabled) {\n        <button (click)=\"openFileDialog()\"\n                type=\"button\"\n                class=\"primary small bb-multi-file-control-button\"\n                bb-button>\n            <i class=\"bb-multi-file-control-icon add\" suffix></i>\n            {{ 'multi-file-control.choose_file' | bbLocalize }}\n        </button>\n    }\n</div>\n\n@if (!hideErrors) {\n    <bb-form-error (errorChange)=\"onErrorChange($event)\"></bb-form-error>\n}\n\n<!-- The file picker hint. -->\n@if (hint; as hintContent) {\n    <p class=\"bb-multi-file-control-hint\">\n        <ng-template [bbTemplate]=\"hintContent\">{{ hintContent }}</ng-template>\n    </p>\n}\n", styles: [".bb-multi-file-control{display:block;line-height:normal}.bb-multi-file-control.grouped{margin-bottom:1.5rem}.bb-multi-file-control.required>.bb-multi-file-control-label:after{content:\"*\";font-size:.75rem;vertical-align:top;color:var(--bb-form-label-required-color)}.bb-multi-file-control-container.is-hovered{border-color:var(--bb-multi-file-control-focus-border-color);box-shadow:0 .375rem .375rem -.375rem #0000001a,var(--bb-multi-file-control-box-shadow)}.bb-multi-file-control.disabled>.bb-multi-file-control-container{cursor:default;box-shadow:none;color:var(--bb-control-disabled-color);background-color:var(--bb-control-disabled-background-color)}.bb-multi-file-control.error>.bb-multi-file-control-label{color:var(--bb-control-error-color)}.bb-multi-file-control.error>.bb-multi-file-control-hint{display:none}.bb-multi-file-control.error>.bb-multi-file-control-container{border:1px solid var(--bb-control-error-border-color);background-color:var(--bb-control-error-background-color)}.bb-multi-file-control-label{display:block;margin-bottom:.25rem;color:var(--bb-form-label-color);font-size:var(--bb-form-label-font-size);font-weight:var(--bb-form-label-font-weight)}.bb-multi-file-control-input{opacity:0;z-index:-1;width:.1px;height:.1px;overflow:hidden;position:absolute}.bb-multi-file-control-container{width:100%;display:flex;color:#111;padding:.5rem;overflow:hidden;min-height:7.5rem;align-items:center;border-radius:.5rem;flex-direction:column;justify-content:center;background-color:#fff;transition-duration:.25s;transition-property:background-color,box-shadow;transition-timing-function:cubic-bezier(0,0,.2,1);border:1px solid var(--bb-multi-file-control-border-color);box-shadow:0 .375rem .375rem -.375rem #0000001a}.bb-multi-file-control-button{margin-top:.5rem}.bb-multi-file-control-list{flex:1;width:100%;overflow:hidden}.bb-multi-file-control-empty{flex:1;width:100%;color:#758795;display:block;font-weight:400;line-height:1.5;text-align:center;font-size:.875rem}.bb-multi-file-control-empty>label{cursor:pointer;display:inline;font-size:inherit;font-weight:inherit;text-decoration:underline;color:var(--bb-multi-file-control-color)}.bb-multi-file-control-item{height:2rem;display:flex;max-width:100%;overflow:hidden;align-items:center;white-space:nowrap;border-radius:.5rem;text-overflow:ellipsis;padding:0 .25rem 0 .5rem;background-color:#edf4fd;border:1px solid var(--bb-multi-file-control-border-color)}.bb-multi-file-control-item:not(:last-child){margin-bottom:.25rem}.bb-multi-file-control-item-content{flex:1;padding:0;border:none;max-width:100%;margin:0 .5rem;overflow:hidden;appearance:none;text-align:left;font-weight:400;font-size:.875rem;white-space:nowrap;text-decoration:none;text-overflow:ellipsis;background-color:transparent}.bb-multi-file-control-item-content,.bb-multi-file-control-item-content:visited{color:#0a305c}.bb-multi-file-control-item-content:hover,.bb-multi-file-control-item-content:focus{text-decoration:underline}.bb-multi-file-control-item-button{padding:0;width:1.5rem;display:flex;height:1.5rem;align-items:center;border-radius:.25rem;justify-content:center;border:1px solid hsl(0,73%,25%);background-color:#b51c1c}.bb-multi-file-control-item-button:hover,.bb-multi-file-control-item-button:focus{background-color:#a81a1a}.bb-multi-file-control-item-button:active{background-color:#9a1818}.bb-multi-file-control-hint{display:block;line-height:1.5;margin-top:.25rem;font-size:.8125rem;color:#758795}.bb-multi-file-control-icon{width:1.25rem;height:1.25rem;display:inline-flex;background-size:contain;background-repeat:no-repeat;background-position:center center}.bb-multi-file-control-icon.add{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" fill=\"%23fff\" viewBox=\"0 0 24 24\"%3E%3Cpath d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"/%3E%3C/svg%3E')}.bb-multi-file-control-icon.attach-vertical{width:1.5rem;height:1.5rem;margin-bottom:.5rem;background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" fill=\"%23758795\" viewBox=\"0 0 24 24\"%3E%3Cpath d=\"M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z\"/%3E%3C/svg%3E')}.bb-multi-file-control-icon.attach-horizontal{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"%3E%3Cpath d=\"M2 12.5C2 9.46 4.46 7 7.5 7H18c2.21 0 4 1.79 4 4s-1.79 4-4 4H9.5C8.12 15 7 13.88 7 12.5S8.12 10 9.5 10H17v2H9.41c-.55 0-.55 1 0 1H18c1.1 0 2-.9 2-2s-.9-2-2-2H7.5C5.57 9 4 10.57 4 12.5S5.57 16 7.5 16H17v2H7.5C4.46 18 2 15.54 2 12.5z\"/%3E%3C/svg%3E')}.bb-multi-file-control-icon.clear{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" fill=\"%23fff\" viewBox=\"0 0 24 24\"%3E%3Cpath d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/%3E%3C/svg%3E')}\n"], dependencies: [{ kind: "component", type: BbFormError, selector: "bb-form-error", inputs: ["control"], outputs: ["errorChange"] }, { kind: "directive", type: BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }, { kind: "component", type: BbButton, selector: "button[bb-button]", inputs: ["disabled", "loading"], exportAs: ["bbButton"] }, { kind: "pipe", type: BbLocalize, name: "bbLocalize" }, { kind: "directive", type: BbLocalizeTemplate, selector: "ng-template[bbLocalizeTemplate]", inputs: ["bbLocalizeTemplate"] }, { kind: "component", type: BbLocalizeString, selector: "[bb-localize-string]", inputs: ["substitutions", "bb-localize-string"] }, { kind: "directive", type: BbFileDrop, selector: "[bbFileDrop]", inputs: ["bbFileDropDisabled"], outputs: ["bbFileDrop"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -1822,6 +1832,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                 type: Input
             }], accept: [{
                 type: Input
+            }], maxFileSize: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], maxTotalFileSize: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], grouped: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -1851,6 +1867,7 @@ class BbFilePicker {
     label = null;
     hint = null;
     accept = injectAcceptString();
+    maxFileSize = injectMaxFileSize();
     showImages = true;
     grouped = false;
     required = false;
@@ -1916,12 +1933,13 @@ class BbFilePicker {
         if (value === null || value === undefined) {
             return null;
         }
-        const regexString = (this.accept ?? '*')
-            .replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')
-            .replace(/,/g, '|');
-        const mimeTypeRegex = new RegExp(regexString);
-        const isNotValid = (typeof File === 'undefined') || !(value instanceof File) || !mimeTypeRegex.test(value?.type);
-        return isNotValid && { invalidFileType: true };
+        if (!isValidFileType(value, this.accept)) {
+            return { invalidFileType: true };
+        }
+        if (!isValidFileSize(value, this.maxFileSize)) {
+            return { maxFileSize: { maxSize: formatFileSize(this.maxFileSize) } };
+        }
+        return null;
     }
     saveFile(files) {
         const file = files?.[0] ?? null;
@@ -1939,7 +1957,7 @@ class BbFilePicker {
         return Array.from(element.files);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: BbFilePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: BbFilePicker, isStandalone: true, selector: "bb-file-picker", inputs: { label: "label", hint: "hint", accept: "accept", showImages: "showImages", grouped: ["grouped", "grouped", booleanAttribute], required: ["required", "required", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], hideErrors: ["hideErrors", "hideErrors", booleanAttribute], value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.required": "required", "class.disabled": "disabled", "class.grouped": "grouped", "class.error": "error" }, classAttribute: "bb-file-picker" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: BbFilePicker, isStandalone: true, selector: "bb-file-picker", inputs: { label: "label", hint: "hint", accept: "accept", maxFileSize: ["maxFileSize", "maxFileSize", numberAttribute], showImages: ["showImages", "showImages", booleanAttribute], grouped: ["grouped", "grouped", booleanAttribute], required: ["required", "required", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], hideErrors: ["hideErrors", "hideErrors", booleanAttribute], value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.required": "required", "class.disabled": "disabled", "class.grouped": "grouped", "class.error": "error" }, classAttribute: "bb-file-picker" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BbFilePicker),
@@ -2004,8 +2022,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                 type: Input
             }], accept: [{
                 type: Input
+            }], maxFileSize: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], showImages: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], grouped: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -2569,6 +2591,161 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                 type: Output
             }] } });
 
+class BbPincodeControl {
+    // Dependencies.
+    _platform = inject(Platform);
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    // Views.
+    htmlInputElementRef;
+    // Inputs.
+    label = null;
+    hint = null;
+    placeholder = null;
+    autoFocus = false;
+    required = false;
+    readonly = false;
+    grouped = false;
+    digits = 6;
+    get value() {
+        return this.control?.value;
+    }
+    valueChange = new EventEmitter();
+    set value(value) {
+        this.control?.setValue(value);
+        this.valueChange.emit(value);
+    }
+    // Data.
+    data$;
+    // State.
+    control = new FormControl(null);
+    error = false;
+    // Callbacks.
+    onTouchedCallback = () => ({});
+    onChangeCallback = () => ({});
+    // Subscriptions.
+    _subscription = new Subscription();
+    ngOnInit() {
+        this.setData();
+        this.handleValueChanges();
+        this.handleAutoFocus();
+    }
+    ngOnDestroy() {
+        this._subscription?.unsubscribe();
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(method) {
+        this.onChangeCallback = method;
+    }
+    registerOnTouched(method) {
+        this.onTouchedCallback = method;
+    }
+    setDisabledState(isDisabled) {
+        isDisabled
+            ? this.control?.disable()
+            : this.control?.enable();
+        this._changeDetectorRef.markForCheck();
+    }
+    onErrorChange(error) {
+        this.error = !!error;
+    }
+    validate(control) {
+        const value = control?.value;
+        if (value === null || value === undefined) {
+            return null;
+        }
+        if (value?.length > this.digits) {
+            return {
+                maxlength: {
+                    actualLength: value?.length ?? 0,
+                    requiredLength: this.digits ?? 0
+                }
+            };
+        }
+        if (value?.length < this.digits) {
+            return {
+                minlength: {
+                    actualLength: value?.length ?? 0,
+                    requiredLength: this.digits ?? 0
+                }
+            };
+        }
+        return null;
+    }
+    setData() {
+        this.data$ = getControlValue(this.control).pipe(map(value => value ?? ''), map(value => {
+            const items = Array(this.digits)
+                .fill(0)
+                .map((_, index, array) => ({
+                index: index,
+                value: value?.[index] ?? '',
+                active: Math.min(array?.length - 1, value?.length) === index
+            }));
+            return { items };
+        }));
+    }
+    handleValueChanges() {
+        const subscription = this.control.valueChanges.pipe(distinctUntilChanged()).subscribe(() => {
+            this.valueChange.emit(this.value);
+            this.onChangeCallback(this.value);
+        });
+        this._subscription.add(subscription);
+    }
+    handleAutoFocus() {
+        if (!this.autoFocus || !this._platform.isBrowser) {
+            return;
+        }
+        setTimeout(() => this.htmlInputElementRef?.nativeElement?.focus?.(), 0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: BbPincodeControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: BbPincodeControl, isStandalone: true, selector: "bb-pincode-control", inputs: { label: "label", hint: "hint", placeholder: "placeholder", autoFocus: ["autoFocus", "autoFocus", booleanAttribute], required: ["required", "required", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], grouped: ["grouped", "grouped", booleanAttribute], digits: ["digits", "digits", numberAttribute], value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.required": "required", "class.readonly": "readonly", "class.grouped": "grouped", "class.error": "error" }, classAttribute: "bb-pincode-control" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbPincodeControl), multi: true },
+            { provide: NG_VALIDATORS, useExisting: BbPincodeControl, multi: true }
+        ], viewQueries: [{ propertyName: "htmlInputElementRef", first: true, predicate: ["htmlInputElement"], descendants: true, static: true }], ngImport: i0, template: "<!-- The label of the input. -->\n@if (label; as labelContent) {\n    <label class=\"bb-pincode-control-label\">\n        <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n    </label>\n}\n\n<input #htmlInputElement\n       [formControl]=\"control\"\n       [minlength]=\"digits\"\n       [maxlength]=\"digits\"\n       [readonly]=\"readonly\"\n       inputmode=\"numeric\"\n       tabindex=\"-1\"\n       autocomplete=\"off\"\n       class=\"bb-pincode-control-element\"\n       type=\"text\">\n\n@if (data$ | async; as data) {\n    <div class=\"bb-pincode-control-container\">\n        @for (item of data?.items; track item?.index) {\n            <div [class.active]=\"item?.active\"\n                 [class.has-value]=\"!!item?.value\"\n                 [attr.data-placeholder]=\"placeholder\"\n                 (click)=\"htmlInputElement?.focus()\"\n                 class=\"bb-pincode-control-cell\">\n                {{ item?.value }}\n            </div>\n        }\n    </div>\n}\n\n<bb-form-error (errorChange)=\"onErrorChange($event)\"></bb-form-error>\n\n<!-- The file picker hint. -->\n@if (hint; as hintContent) {\n    <p class=\"bb-pincode-control-hint\">\n        <ng-template [bbTemplate]=\"hintContent\">{{ hintContent }}</ng-template>\n    </p>\n}\n", styles: [".bb-pincode-control{display:block;line-height:normal}.bb-pincode-control.grouped{margin-bottom:1.5rem}.bb-pincode-control.required>.bb-pincode-control-label:after{content:\"*\";color:#c23934;font-size:.75rem;vertical-align:top}.bb-pincode-control.error>.bb-pincode-control-label{color:var(--bb-control-error-color)}.bb-pincode-control.error>.bb-pincode-control-hint{display:none}.bb-pincode-control.error>.bb-pincode-control-container>.bb-pincode-control-cell{border:1px solid var(--bb-control-error-border-color);background-color:var(--bb-control-error-background-color)}.bb-pincode-control.error>.bb-pincode-control-container>.bb-pincode-control-cell:not(.has-value):before{color:var(--bb-control-error-placeholder-color)}.bb-pincode-control.error>.bb-pincode-control-element:not(:disabled):not(:read-only):focus+.bb-pincode-control-container>.bb-pincode-control-cell.active{box-shadow:var(--bb-control-error-box-shadow)}.bb-pincode-control-element:not(:disabled):read-only+.bb-pincode-control-container>.bb-pincode-control-cell{cursor:default;box-shadow:none;border-style:dotted;border-color:#bdc4c9;background-color:transparent}.bb-pincode-control-element:disabled+.bb-pincode-control-container>.bb-pincode-control-cell{cursor:default;box-shadow:none;pointer-events:none;color:var(--bb-control-disabled-color);background-color:var(--bb-control-disabled-background-color)}.bb-pincode-control-element{opacity:0;z-index:-1;width:.1px;height:.1px;overflow:hidden;position:absolute}.bb-pincode-control-element:not(:disabled):not(:read-only):focus+.bb-pincode-control-container>.bb-pincode-control-cell.active{box-shadow:var(--bb-form-control-focus-box-shadow);border-color:var(--bb-form-control-focus-border-color)}.bb-pincode-control-element:not(:disabled):not(:read-only):focus+.bb-pincode-control-container>.bb-pincode-control-cell.active:not(.has-value):after{top:50%;content:\"|\";position:absolute;text-align:center;transform:translate(-25%) translateY(-50%);animation:bbCursorBlink .8s step-end infinite}.bb-pincode-control-container{display:flex;gap:.75rem;align-items:center}.bb-pincode-control-cell{flex:1;cursor:text;height:3rem;display:flex;font-size:1rem;-webkit-user-select:none;user-select:none;text-align:center;position:relative;align-items:center;justify-content:center;color:var(--text-color);box-shadow:var(--bb-form-control-box-shadow);border:1px solid var(--bb-form-control-border-color);background-color:var(--bb-form-control-background-color);border-radius:var(--bb-form-control-border-radius, .5rem);transition:background-color .25s cubic-bezier(0,0,.2,1),box-shadow .25s cubic-bezier(0,0,.2,1)}.bb-pincode-control-cell:not(.has-value):before{top:0;bottom:0;left:.25rem;right:.25rem;display:block;max-width:100%;overflow:hidden;line-height:3rem;position:absolute;text-align:center;white-space:nowrap;vertical-align:middle;text-overflow:ellipsis;color:#d1d1d1;content:attr(data-placeholder)}.bb-pincode-control-label{color:#525252;display:block;font-weight:400;font-size:.875rem;margin-bottom:.25rem}.bb-pincode-control-hint{display:block;line-height:1.5;margin-top:.25rem;font-size:.8125rem;color:#758795}@keyframes bbCursorBlink{0%{opacity:1}50%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }, { kind: "component", type: BbFormError, selector: "bb-form-error", inputs: ["control"], outputs: ["errorChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: BbPincodeControl, decorators: [{
+            type: Component,
+            args: [{ selector: 'bb-pincode-control', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbPincodeControl), multi: true },
+                        { provide: NG_VALIDATORS, useExisting: BbPincodeControl, multi: true }
+                    ], host: {
+                        'class': 'bb-pincode-control',
+                        '[class.required]': 'required',
+                        '[class.readonly]': 'readonly',
+                        '[class.grouped]': 'grouped',
+                        '[class.error]': 'error'
+                    }, imports: [ReactiveFormsModule, BbTemplate, BbFormError, AsyncPipe], template: "<!-- The label of the input. -->\n@if (label; as labelContent) {\n    <label class=\"bb-pincode-control-label\">\n        <ng-template [bbTemplate]=\"labelContent\">{{ labelContent }}</ng-template>\n    </label>\n}\n\n<input #htmlInputElement\n       [formControl]=\"control\"\n       [minlength]=\"digits\"\n       [maxlength]=\"digits\"\n       [readonly]=\"readonly\"\n       inputmode=\"numeric\"\n       tabindex=\"-1\"\n       autocomplete=\"off\"\n       class=\"bb-pincode-control-element\"\n       type=\"text\">\n\n@if (data$ | async; as data) {\n    <div class=\"bb-pincode-control-container\">\n        @for (item of data?.items; track item?.index) {\n            <div [class.active]=\"item?.active\"\n                 [class.has-value]=\"!!item?.value\"\n                 [attr.data-placeholder]=\"placeholder\"\n                 (click)=\"htmlInputElement?.focus()\"\n                 class=\"bb-pincode-control-cell\">\n                {{ item?.value }}\n            </div>\n        }\n    </div>\n}\n\n<bb-form-error (errorChange)=\"onErrorChange($event)\"></bb-form-error>\n\n<!-- The file picker hint. -->\n@if (hint; as hintContent) {\n    <p class=\"bb-pincode-control-hint\">\n        <ng-template [bbTemplate]=\"hintContent\">{{ hintContent }}</ng-template>\n    </p>\n}\n", styles: [".bb-pincode-control{display:block;line-height:normal}.bb-pincode-control.grouped{margin-bottom:1.5rem}.bb-pincode-control.required>.bb-pincode-control-label:after{content:\"*\";color:#c23934;font-size:.75rem;vertical-align:top}.bb-pincode-control.error>.bb-pincode-control-label{color:var(--bb-control-error-color)}.bb-pincode-control.error>.bb-pincode-control-hint{display:none}.bb-pincode-control.error>.bb-pincode-control-container>.bb-pincode-control-cell{border:1px solid var(--bb-control-error-border-color);background-color:var(--bb-control-error-background-color)}.bb-pincode-control.error>.bb-pincode-control-container>.bb-pincode-control-cell:not(.has-value):before{color:var(--bb-control-error-placeholder-color)}.bb-pincode-control.error>.bb-pincode-control-element:not(:disabled):not(:read-only):focus+.bb-pincode-control-container>.bb-pincode-control-cell.active{box-shadow:var(--bb-control-error-box-shadow)}.bb-pincode-control-element:not(:disabled):read-only+.bb-pincode-control-container>.bb-pincode-control-cell{cursor:default;box-shadow:none;border-style:dotted;border-color:#bdc4c9;background-color:transparent}.bb-pincode-control-element:disabled+.bb-pincode-control-container>.bb-pincode-control-cell{cursor:default;box-shadow:none;pointer-events:none;color:var(--bb-control-disabled-color);background-color:var(--bb-control-disabled-background-color)}.bb-pincode-control-element{opacity:0;z-index:-1;width:.1px;height:.1px;overflow:hidden;position:absolute}.bb-pincode-control-element:not(:disabled):not(:read-only):focus+.bb-pincode-control-container>.bb-pincode-control-cell.active{box-shadow:var(--bb-form-control-focus-box-shadow);border-color:var(--bb-form-control-focus-border-color)}.bb-pincode-control-element:not(:disabled):not(:read-only):focus+.bb-pincode-control-container>.bb-pincode-control-cell.active:not(.has-value):after{top:50%;content:\"|\";position:absolute;text-align:center;transform:translate(-25%) translateY(-50%);animation:bbCursorBlink .8s step-end infinite}.bb-pincode-control-container{display:flex;gap:.75rem;align-items:center}.bb-pincode-control-cell{flex:1;cursor:text;height:3rem;display:flex;font-size:1rem;-webkit-user-select:none;user-select:none;text-align:center;position:relative;align-items:center;justify-content:center;color:var(--text-color);box-shadow:var(--bb-form-control-box-shadow);border:1px solid var(--bb-form-control-border-color);background-color:var(--bb-form-control-background-color);border-radius:var(--bb-form-control-border-radius, .5rem);transition:background-color .25s cubic-bezier(0,0,.2,1),box-shadow .25s cubic-bezier(0,0,.2,1)}.bb-pincode-control-cell:not(.has-value):before{top:0;bottom:0;left:.25rem;right:.25rem;display:block;max-width:100%;overflow:hidden;line-height:3rem;position:absolute;text-align:center;white-space:nowrap;vertical-align:middle;text-overflow:ellipsis;color:#d1d1d1;content:attr(data-placeholder)}.bb-pincode-control-label{color:#525252;display:block;font-weight:400;font-size:.875rem;margin-bottom:.25rem}.bb-pincode-control-hint{display:block;line-height:1.5;margin-top:.25rem;font-size:.8125rem;color:#758795}@keyframes bbCursorBlink{0%{opacity:1}50%{opacity:0}to{opacity:1}}\n"] }]
+        }], propDecorators: { htmlInputElementRef: [{
+                type: ViewChild,
+                args: ['htmlInputElement', { static: true }]
+            }], label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], autoFocus: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], readonly: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], grouped: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], digits: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
 function provideElementsConfig(config) {
     const providers = [
         { provide: ELEMENTS_CONFIG, useValue: config },
@@ -2587,6 +2764,7 @@ function provideElementsConfig(config) {
                 min: ({ min }) => ({ token: 'form-control-errors.min', data: { min } }),
                 max: ({ max }) => ({ token: 'form-control-errors.max', data: { max } }),
                 maxFileSize: ({ maxSize }) => ({ token: 'form-control-errors.maxFileSize', data: { maxSize } }),
+                maxTotalFileSize: ({ max, current }) => ({ token: 'form-control-errors.maxTotalFileSize', data: { max, current } }),
                 minDate: ({ date }) => ({ token: 'form-control-errors.minDate', data: { date } }),
                 maxDate: ({ date }) => ({ token: 'form-control-errors.maxDate', data: { date } }),
                 invalidDate: () => 'form-control-errors.invalidDate',
@@ -2654,7 +2832,8 @@ const IMPORTS_EXPORTS = [
     BbDatePicker,
     BbColorSlider,
     BbColorPicker,
-    BbImageControl
+    BbImageControl,
+    BbPincodeControl
 ];
 class ElementsModule {
     static forRoot(config) {
@@ -2699,7 +2878,8 @@ class ElementsModule {
             BbDatePicker,
             BbColorSlider,
             BbColorPicker,
-            BbImageControl], exports: [
+            BbImageControl,
+            BbPincodeControl], exports: [
             // Directives.
             BbFormError,
             BbFormSubmit,
@@ -2732,9 +2912,11 @@ class ElementsModule {
             BbDatePicker,
             BbColorSlider,
             BbColorPicker,
-            BbImageControl] });
+            BbImageControl,
+            BbPincodeControl] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ElementsModule, imports: [BbMultiFileControl,
-            BbDatePicker] });
+            BbDatePicker,
+            BbPincodeControl] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: ElementsModule, decorators: [{
             type: NgModule,
@@ -2748,5 +2930,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BbAnchor, BbAvatar, BbButton, BbCheckbox, BbCheckboxGroup, BbColorPicker, BbColorSlider, BbDate, BbDatePicker, BbExtraErrorControls, BbFileDataUrl, BbFileDrop, BbFileImage, BbFilePicker, BbFileSize, BbFormControl, BbFormError, BbFormGroup, BbFormSubmit, BbFormSubmitter, BbIcon, BbImageControl, BbImagePicker, BbImageUpload, BbInput, BbMultiFileControl, BbRadioButton, BbRadioGroup, BbRelativeTime, BbSpinner, ColorPickerDirective, ELEMENTS_CONFIG, ELEMENTS_ERRORS, ELEMENTS_ICONS, ElementsModule, injectAcceptString, provideElementsConfig };
+export { BbAnchor, BbAvatar, BbButton, BbCheckbox, BbCheckboxGroup, BbColorPicker, BbColorSlider, BbDate, BbDatePicker, BbExtraErrorControls, BbFileDataUrl, BbFileDrop, BbFileImage, BbFilePicker, BbFileSize, BbFormControl, BbFormError, BbFormGroup, BbFormSubmit, BbFormSubmitter, BbIcon, BbImageControl, BbImagePicker, BbImageUpload, BbInput, BbMultiFileControl, BbPincodeControl, BbRadioButton, BbRadioGroup, BbRelativeTime, BbSpinner, ColorPickerDirective, ELEMENTS_CONFIG, ELEMENTS_ERRORS, ELEMENTS_ICONS, ElementsModule, injectAcceptString, injectMaxFileSize, injectMaxTotalFileSize, provideElementsConfig };
 //# sourceMappingURL=bravobit-bb-foundation-elements.mjs.map