@bravobit/bb-foundation 0.53.0 → 0.53.1

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 } 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 (this.isValidFileType(current)) {
                 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 (!this.isValidFileSize(file)) {
+                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.maxFileSize),
+                    current: formatFileSize(totalSize)
+                }
+            };
+        }
+        return null;
     }
     addFiles(files) {
         if (this.disabled) {
@@ -1791,12 +1805,31 @@ class BbMultiFileControl {
         }
         this.onChangeCallback?.(this.value);
     }
+    isValidFileSize(file) {
+        if (!this.isFileLike(file)) {
+            return false;
+        }
+        return file?.size <= this.maxFileSize;
+    }
+    isValidFileType(file) {
+        if (!this.isFileLike(file)) {
+            return false;
+        }
+        if (this.accept === null || this.accept === undefined) {
+            return true;
+        }
+        const regexString = this.accept
+            .replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')
+            .replace(/,/g, '|');
+        const mimeTypeRegex = new RegExp(regexString);
+        return mimeTypeRegex.test(file?.type);
+    }
     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 +1855,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 +1890,7 @@ class BbFilePicker {
     label = null;
     hint = null;
     accept = injectAcceptString();
+    maxFileSize = injectMaxFileSize();
     showImages = true;
     grouped = false;
     required = false;
@@ -1916,12 +1956,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 (!this.isValidFileType(value)) {
+            return { invalidFileType: true };
+        }
+        if (!this.isValidFileSize(value)) {
+            return { maxFileSize: { maxSize: formatFileSize(this.maxFileSize) } };
+        }
+        return null;
     }
     saveFile(files) {
         const file = files?.[0] ?? null;
@@ -1938,8 +1979,31 @@ class BbFilePicker {
         }
         return Array.from(element.files);
     }
+    isValidFileType(file) {
+        if (!this.isFileLike(file)) {
+            return false;
+        }
+        if (this.accept === null || this.accept === undefined) {
+            return true;
+        }
+        const regexString = this.accept
+            .replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')
+            .replace(/,/g, '|');
+        const mimeTypeRegex = new RegExp(regexString);
+        return mimeTypeRegex.test(file?.type);
+    }
+    isValidFileSize(file) {
+        if (!this.isFileLike(file)) {
+            return false;
+        }
+        return file?.size <= this.maxFileSize;
+    }
+    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: 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 +2068,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 +2637,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 +2810,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 +2878,8 @@ const IMPORTS_EXPORTS = [
     BbDatePicker,
     BbColorSlider,
     BbColorPicker,
-    BbImageControl
+    BbImageControl,
+    BbPincodeControl
 ];
 class ElementsModule {
     static forRoot(config) {
@@ -2699,7 +2924,8 @@ class ElementsModule {
             BbDatePicker,
             BbColorSlider,
             BbColorPicker,
-            BbImageControl], exports: [
+            BbImageControl,
+            BbPincodeControl], exports: [
             // Directives.
             BbFormError,
             BbFormSubmit,
@@ -2732,9 +2958,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 +2976,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