@brickclay-org/ui 0.0.64 → 0.0.66
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5793,7 +5793,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
5793
5793
|
type: Input
|
|
5794
5794
|
}] } });
|
|
5795
5795
|
|
|
5796
|
-
class
|
|
5796
|
+
class BkAvatarUploader {
|
|
5797
5797
|
// ---------- Display inputs ----------
|
|
5798
5798
|
src = null;
|
|
5799
5799
|
alt = 'Avatar';
|
|
@@ -5999,31 +5999,31 @@ class BkAvatarProfile {
|
|
|
5999
5999
|
}
|
|
6000
6000
|
return (parts[0][0] + parts.at(-1)[0]).toUpperCase();
|
|
6001
6001
|
}
|
|
6002
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type:
|
|
6003
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type:
|
|
6002
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkAvatarUploader, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6003
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkAvatarUploader, isStandalone: true, selector: "bk-avatar-uploader", inputs: { src: "src", alt: "alt", name: "name", size: "size", fallback: "fallback", editable: "editable", accept: "accept", maxFileSizeKB: "maxFileSizeKB", uploadLabel: "uploadLabel", hint: "hint", loading: "loading", removable: "removable", label: "label", required: "required", hasError: "hasError", errorMessage: "errorMessage", disabled: "disabled" }, outputs: { fileSelected: "fileSelected", removed: "removed", fileError: "fileError" }, providers: [
|
|
6004
6004
|
{
|
|
6005
6005
|
provide: NG_VALUE_ACCESSOR,
|
|
6006
|
-
useExisting: forwardRef(() =>
|
|
6006
|
+
useExisting: forwardRef(() => BkAvatarUploader),
|
|
6007
6007
|
multi: true
|
|
6008
6008
|
},
|
|
6009
6009
|
{
|
|
6010
6010
|
provide: NG_VALIDATORS,
|
|
6011
|
-
useExisting: forwardRef(() =>
|
|
6011
|
+
useExisting: forwardRef(() => BkAvatarUploader),
|
|
6012
6012
|
multi: true
|
|
6013
6013
|
}
|
|
6014
6014
|
], usesOnChanges: true, ngImport: i0, template: "<div class=\"avatar-profile-container\" [ngClass]=\"sizeClasses\">\r\n @if (label) {\r\n <label class=\"avatar-profile-label\">\r\n {{ label }}\r\n @if (required) {\r\n <span class=\"avatar-profile-label-required\">*</span>\r\n }\r\n </label>\r\n }\r\n\r\n <div class=\"flex gap-4 justify-end\">\r\n <div\r\n [ngClass]=\"containerClasses\"\r\n [bkTooltip]=\"name\"\r\n [bkTooltipPosition]=\"'top'\"\r\n >\r\n\r\n <!-- Loading overlay -->\r\n @if (loading) {\r\n <div class=\"absolute inset-0 flex items-center justify-center z-10 rounded-full bg-white/60\">\r\n <div class=\"w-5 h-5 border-2 border-[#141414] border-t-transparent rounded-full animate-spin\"></div>\r\n </div>\r\n }\r\n\r\n @if (corrupted) {\r\n <!-- Corrupted file indicator -->\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M19.3517 7.61665L15.3929 4.05375C14.2651 3.03868 13.7012 2.53114 13.0092 2.26562L13 5.00011C13 7.35713 13 8.53564 13.7322 9.26787C14.4645 10.0001 15.643 10.0001 18 10.0001H21.5801C21.2175 9.29588 20.5684 8.71164 19.3517 7.61665Z\" fill=\"#DC3545\"/>\r\n <path d=\"M14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2.72548 20.3823 2.44924 19.8327 2.27818 19.1149C2.15904 18.6149 2.09948 18.3649 2.21429 18.0728C2.32911 17.7806 2.58217 17.6119 3.08829 17.2745L3.71429 16.8571C4.49285 16.3381 5.50715 16.3381 6.28571 16.8571C7.3238 17.5492 8.6762 17.5492 9.71429 16.8571C10.4929 16.3381 11.5071 16.3381 12.2857 16.8571C13.3238 17.5492 14.6762 17.5492 15.7143 16.8571C16.4929 16.3381 17.5071 16.3381 18.2857 16.8571C19.3238 17.5492 20.6762 17.5492 21.7143 16.8571C21.8241 16.7839 21.9705 16.8681 21.965 17C21.8873 18.8723 21.6366 20.0203 20.8284 20.8284C19.6569 22 17.7712 22 14 22Z\" fill=\"#DC3545\"/>\r\n <path d=\"M2 10C2 6.22876 2 4.34315 3.17157 3.17157C4.34315 2 6.23869 2 10.0298 2C10.6358 2 11.1214 2 11.53 2.01666C11.5166 2.09659 11.5095 2.17813 11.5092 2.26057L11.5 5.09497C11.4999 6.19207 11.4998 7.16164 11.6049 7.94316C11.7188 8.79028 11.9803 9.63726 12.6716 10.3285C13.3628 11.0198 14.2098 11.2813 15.0569 11.3952C15.8385 11.5003 16.808 11.5002 17.9051 11.5001L18 11.5001H21.9934V12.3273C21.9973 12.5399 21.8912 12.7392 21.7143 12.8571C20.6762 13.5492 19.3238 13.5492 18.2857 12.8571C17.5071 12.3381 16.4929 12.3381 15.7143 12.8571C14.6762 13.5492 13.3238 13.5492 12.2857 12.8571C11.5071 12.3381 10.4929 12.3381 9.71429 12.8571C8.6762 13.5492 7.3238 13.5492 6.28571 12.8571C5.50715 12.3381 4.49285 12.3381 3.71429 12.8571L3.5547 12.9635C2.87033 13.4198 2.52814 13.6479 2.26407 13.5066C2 13.3653 2 12.954 2 12.1315V10Z\" fill=\"#DC3545\"/>\r\n </svg>\r\n }\r\n\r\n @else if (displaySrc && !imageLoadFailed) {\r\n <img\r\n [src]=\"displaySrc\"\r\n [alt]=\"alt\"\r\n class=\"avatar-img\"\r\n (error)=\"onImageError()\"\r\n />\r\n }\r\n\r\n @else if (fallback === 'camera') {\r\n <svg class=\"placeholder-icon\" width=\"23\" height=\"24\" viewBox=\"0 0 23 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M18.3843 4.66667C17.6726 4.66667 17.0193 4.25833 16.6926 3.62833L15.8526 1.93667C15.316 0.875 13.916 0 12.726 0H10.0543C8.85264 0 7.45264 0.875 6.91598 1.93667L6.07598 3.62833C5.74931 4.25833 5.09598 4.66667 4.38431 4.66667C1.85264 4.66667 -0.154023 6.80167 0.00931005 9.32167L0.615977 18.9583C0.755977 21.3617 2.05098 23.3333 5.27098 23.3333H17.4976C20.7176 23.3333 22.001 21.3617 22.1526 18.9583L22.7593 9.32167C22.9226 6.80167 20.916 4.66667 18.3843 4.66667ZM9.63431 6.125H13.1343C13.6126 6.125 14.0093 6.52167 14.0093 7C14.0093 7.47833 13.6126 7.875 13.1343 7.875H9.63431C9.15598 7.875 8.75931 7.47833 8.75931 7C8.75931 6.52167 9.15598 6.125 9.63431 6.125ZM11.3843 18.8067C9.21431 18.8067 7.44098 17.045 7.44098 14.8633C7.44098 12.6817 9.20264 10.92 11.3843 10.92C13.566 10.92 15.3276 12.6817 15.3276 14.8633C15.3276 17.045 13.5543 18.8067 11.3843 18.8067Z\" fill=\"#6B7080\"/>\r\n </svg>\r\n }\r\n\r\n @else if (showInitials) {\r\n <span class=\"avatar-text\">\r\n {{ initials }}\r\n </span>\r\n }\r\n\r\n @else {\r\n <svg class=\"placeholder-icon\" viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" > <g clip-path=\"url(#clip0)\"> <path d=\"M16 16c3.682 0 6.667-2.985 6.667-6.667S19.682 2.667 16 2.667 9.333 5.651 9.333 9.333 12.318 16 16 16Z\" stroke=\"#363C51\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> <path d=\"M27.453 29.333C27.453 24.173 22.32 20 16 20S4.547 24.173 4.547 29.333\" stroke=\"#363C51\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> </g> <defs> <clipPath id=\"clip0\"> <rect width=\"32\" height=\"32\" fill=\"white\" /> </clipPath> </defs> </svg>\r\n }\r\n\r\n <!-- Remove badge -->\r\n @if (showRemoveButton) {\r\n <button\r\n type=\"button\"\r\n class=\"remove-badge\"\r\n (click)=\"onRemove()\"\r\n aria-label=\"Remove avatar\"\r\n >\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"#6B7080\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n </svg>\r\n </button>\r\n }\r\n\r\n </div>\r\n <div class=\"flex flex-col gap-2 justify-end items-start\">\r\n @if (editable) {\r\n <label class=\"upload-button cursor-pointer\">\r\n {{ uploadLabel }}\r\n <input\r\n type=\"file\"\r\n class=\"hidden\"\r\n [accept]=\"accept\"\r\n [disabled]=\"disabled\"\r\n (change)=\"onFileSelected($event)\"\r\n />\r\n </label>\r\n }\r\n @if (!hasError && hint) {\r\n <p class=\"profile-size\">{{ hint }}</p>\r\n }\r\n @if (hasError && errorMessage) {\r\n <p class=\"avatar-profile-error\">{{ errorMessage }}</p>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".avatar-profile-container{@apply flex flex-col gap-1.5;}.avatar-profile-label{@apply text-sm font-medium text-[#141414];}.avatar-profile-label-required{@apply text-[#E7000B] ml-0.5;}.avatar-profile-error{@apply text-xs text-[#E7000B] font-normal;}.avatar-profile{@apply relative inline-flex items-center justify-center rounded-full flex-shrink-0 select-none shadow-lg transition-all duration-200 border-[3px] border-white bg-[#F9FAFA];}.avatar-profile .avatar-img{@apply w-full h-full object-cover rounded-full;}.upload-button{@apply font-medium text-[#6B7080] border border-[#E3E3E7] rounded shadow-sm;}.sm .upload-button{@apply text-[12px] leading-[18px] px-2 py-3;}.md .upload-button{@apply text-[14px] leading-[20px] px-[10px] py-2.5;}.lg .upload-button{@apply text-[16px] leading-[24px] px-[18px] py-2.5;}.xl .upload-button{@apply text-[16px] leading-[24px] px-5 py-3;}.profile-size{@apply font-medium text-[#6B7080];}.sm .profile-size{@apply text-[10px] leading-[14px];}.md .profile-size{@apply text-[12px] leading-[18px];}.lg .profile-size{@apply text-[14px] leading-[20px];}.xl .profile-size{@apply text-[16px] leading-[24px];}.avatar-profile.sm .avatar-text{@apply font-medium text-[30px] leading-[38px];}.avatar-profile.md .avatar-text{@apply font-medium text-[36px] leading-[44px];}.avatar-profile.lg .avatar-text{@apply font-medium text-[45px] leading-[55px];}.avatar-profile.xl .avatar-text{@apply font-medium text-[60px] leading-[72px];}.avatar-profile{@apply font-medium text-[#6B7080];}.avatar-profile.sm{@apply size-[72px] text-sm;}.avatar-profile.md{@apply size-[96px] text-base;}.avatar-profile.lg{@apply size-[120px] text-[18px] leading-[26px];}.avatar-profile.xl{@apply size-[160px] text-xl;}.avatar-profile.sm .placeholder-icon{@apply size-[28px];}.avatar-profile.md .placeholder-icon{@apply size-[42px];}.avatar-profile.lg .placeholder-icon{@apply size-[52px];}.avatar-profile.xl .placeholder-icon{@apply size-[65px];}.avatar-profile.corrupted{@apply border-[3px] border-[#E7000B];}.avatar-profile .corrupted-icon{@apply text-[#E7000B];}.avatar-profile.sm .corrupted-icon{@apply size-[28px];}.avatar-profile.md .corrupted-icon{@apply size-[42px];}.avatar-profile.lg .corrupted-icon{@apply size-[52px];}.avatar-profile.xl .corrupted-icon{@apply size-[65px];}.remove-badge{@apply absolute top-0 right-0 w-5 h-5 bg-white rounded-full shadow-md flex items-center justify-center cursor-pointer hover:bg-gray-50 transition z-20 border-0 p-0;}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition"] }] });
|
|
6015
6015
|
}
|
|
6016
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type:
|
|
6016
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkAvatarUploader, decorators: [{
|
|
6017
6017
|
type: Component,
|
|
6018
|
-
args: [{ selector: 'bk-avatar-
|
|
6018
|
+
args: [{ selector: 'bk-avatar-uploader', imports: [NgClass, CommonModule, BKTooltipDirective], standalone: true, providers: [
|
|
6019
6019
|
{
|
|
6020
6020
|
provide: NG_VALUE_ACCESSOR,
|
|
6021
|
-
useExisting: forwardRef(() =>
|
|
6021
|
+
useExisting: forwardRef(() => BkAvatarUploader),
|
|
6022
6022
|
multi: true
|
|
6023
6023
|
},
|
|
6024
6024
|
{
|
|
6025
6025
|
provide: NG_VALIDATORS,
|
|
6026
|
-
useExisting: forwardRef(() =>
|
|
6026
|
+
useExisting: forwardRef(() => BkAvatarUploader),
|
|
6027
6027
|
multi: true
|
|
6028
6028
|
}
|
|
6029
6029
|
], template: "<div class=\"avatar-profile-container\" [ngClass]=\"sizeClasses\">\r\n @if (label) {\r\n <label class=\"avatar-profile-label\">\r\n {{ label }}\r\n @if (required) {\r\n <span class=\"avatar-profile-label-required\">*</span>\r\n }\r\n </label>\r\n }\r\n\r\n <div class=\"flex gap-4 justify-end\">\r\n <div\r\n [ngClass]=\"containerClasses\"\r\n [bkTooltip]=\"name\"\r\n [bkTooltipPosition]=\"'top'\"\r\n >\r\n\r\n <!-- Loading overlay -->\r\n @if (loading) {\r\n <div class=\"absolute inset-0 flex items-center justify-center z-10 rounded-full bg-white/60\">\r\n <div class=\"w-5 h-5 border-2 border-[#141414] border-t-transparent rounded-full animate-spin\"></div>\r\n </div>\r\n }\r\n\r\n @if (corrupted) {\r\n <!-- Corrupted file indicator -->\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M19.3517 7.61665L15.3929 4.05375C14.2651 3.03868 13.7012 2.53114 13.0092 2.26562L13 5.00011C13 7.35713 13 8.53564 13.7322 9.26787C14.4645 10.0001 15.643 10.0001 18 10.0001H21.5801C21.2175 9.29588 20.5684 8.71164 19.3517 7.61665Z\" fill=\"#DC3545\"/>\r\n <path d=\"M14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2.72548 20.3823 2.44924 19.8327 2.27818 19.1149C2.15904 18.6149 2.09948 18.3649 2.21429 18.0728C2.32911 17.7806 2.58217 17.6119 3.08829 17.2745L3.71429 16.8571C4.49285 16.3381 5.50715 16.3381 6.28571 16.8571C7.3238 17.5492 8.6762 17.5492 9.71429 16.8571C10.4929 16.3381 11.5071 16.3381 12.2857 16.8571C13.3238 17.5492 14.6762 17.5492 15.7143 16.8571C16.4929 16.3381 17.5071 16.3381 18.2857 16.8571C19.3238 17.5492 20.6762 17.5492 21.7143 16.8571C21.8241 16.7839 21.9705 16.8681 21.965 17C21.8873 18.8723 21.6366 20.0203 20.8284 20.8284C19.6569 22 17.7712 22 14 22Z\" fill=\"#DC3545\"/>\r\n <path d=\"M2 10C2 6.22876 2 4.34315 3.17157 3.17157C4.34315 2 6.23869 2 10.0298 2C10.6358 2 11.1214 2 11.53 2.01666C11.5166 2.09659 11.5095 2.17813 11.5092 2.26057L11.5 5.09497C11.4999 6.19207 11.4998 7.16164 11.6049 7.94316C11.7188 8.79028 11.9803 9.63726 12.6716 10.3285C13.3628 11.0198 14.2098 11.2813 15.0569 11.3952C15.8385 11.5003 16.808 11.5002 17.9051 11.5001L18 11.5001H21.9934V12.3273C21.9973 12.5399 21.8912 12.7392 21.7143 12.8571C20.6762 13.5492 19.3238 13.5492 18.2857 12.8571C17.5071 12.3381 16.4929 12.3381 15.7143 12.8571C14.6762 13.5492 13.3238 13.5492 12.2857 12.8571C11.5071 12.3381 10.4929 12.3381 9.71429 12.8571C8.6762 13.5492 7.3238 13.5492 6.28571 12.8571C5.50715 12.3381 4.49285 12.3381 3.71429 12.8571L3.5547 12.9635C2.87033 13.4198 2.52814 13.6479 2.26407 13.5066C2 13.3653 2 12.954 2 12.1315V10Z\" fill=\"#DC3545\"/>\r\n </svg>\r\n }\r\n\r\n @else if (displaySrc && !imageLoadFailed) {\r\n <img\r\n [src]=\"displaySrc\"\r\n [alt]=\"alt\"\r\n class=\"avatar-img\"\r\n (error)=\"onImageError()\"\r\n />\r\n }\r\n\r\n @else if (fallback === 'camera') {\r\n <svg class=\"placeholder-icon\" width=\"23\" height=\"24\" viewBox=\"0 0 23 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M18.3843 4.66667C17.6726 4.66667 17.0193 4.25833 16.6926 3.62833L15.8526 1.93667C15.316 0.875 13.916 0 12.726 0H10.0543C8.85264 0 7.45264 0.875 6.91598 1.93667L6.07598 3.62833C5.74931 4.25833 5.09598 4.66667 4.38431 4.66667C1.85264 4.66667 -0.154023 6.80167 0.00931005 9.32167L0.615977 18.9583C0.755977 21.3617 2.05098 23.3333 5.27098 23.3333H17.4976C20.7176 23.3333 22.001 21.3617 22.1526 18.9583L22.7593 9.32167C22.9226 6.80167 20.916 4.66667 18.3843 4.66667ZM9.63431 6.125H13.1343C13.6126 6.125 14.0093 6.52167 14.0093 7C14.0093 7.47833 13.6126 7.875 13.1343 7.875H9.63431C9.15598 7.875 8.75931 7.47833 8.75931 7C8.75931 6.52167 9.15598 6.125 9.63431 6.125ZM11.3843 18.8067C9.21431 18.8067 7.44098 17.045 7.44098 14.8633C7.44098 12.6817 9.20264 10.92 11.3843 10.92C13.566 10.92 15.3276 12.6817 15.3276 14.8633C15.3276 17.045 13.5543 18.8067 11.3843 18.8067Z\" fill=\"#6B7080\"/>\r\n </svg>\r\n }\r\n\r\n @else if (showInitials) {\r\n <span class=\"avatar-text\">\r\n {{ initials }}\r\n </span>\r\n }\r\n\r\n @else {\r\n <svg class=\"placeholder-icon\" viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" > <g clip-path=\"url(#clip0)\"> <path d=\"M16 16c3.682 0 6.667-2.985 6.667-6.667S19.682 2.667 16 2.667 9.333 5.651 9.333 9.333 12.318 16 16 16Z\" stroke=\"#363C51\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> <path d=\"M27.453 29.333C27.453 24.173 22.32 20 16 20S4.547 24.173 4.547 29.333\" stroke=\"#363C51\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /> </g> <defs> <clipPath id=\"clip0\"> <rect width=\"32\" height=\"32\" fill=\"white\" /> </clipPath> </defs> </svg>\r\n }\r\n\r\n <!-- Remove badge -->\r\n @if (showRemoveButton) {\r\n <button\r\n type=\"button\"\r\n class=\"remove-badge\"\r\n (click)=\"onRemove()\"\r\n aria-label=\"Remove avatar\"\r\n >\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"#6B7080\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n </svg>\r\n </button>\r\n }\r\n\r\n </div>\r\n <div class=\"flex flex-col gap-2 justify-end items-start\">\r\n @if (editable) {\r\n <label class=\"upload-button cursor-pointer\">\r\n {{ uploadLabel }}\r\n <input\r\n type=\"file\"\r\n class=\"hidden\"\r\n [accept]=\"accept\"\r\n [disabled]=\"disabled\"\r\n (change)=\"onFileSelected($event)\"\r\n />\r\n </label>\r\n }\r\n @if (!hasError && hint) {\r\n <p class=\"profile-size\">{{ hint }}</p>\r\n }\r\n @if (hasError && errorMessage) {\r\n <p class=\"avatar-profile-error\">{{ errorMessage }}</p>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".avatar-profile-container{@apply flex flex-col gap-1.5;}.avatar-profile-label{@apply text-sm font-medium text-[#141414];}.avatar-profile-label-required{@apply text-[#E7000B] ml-0.5;}.avatar-profile-error{@apply text-xs text-[#E7000B] font-normal;}.avatar-profile{@apply relative inline-flex items-center justify-center rounded-full flex-shrink-0 select-none shadow-lg transition-all duration-200 border-[3px] border-white bg-[#F9FAFA];}.avatar-profile .avatar-img{@apply w-full h-full object-cover rounded-full;}.upload-button{@apply font-medium text-[#6B7080] border border-[#E3E3E7] rounded shadow-sm;}.sm .upload-button{@apply text-[12px] leading-[18px] px-2 py-3;}.md .upload-button{@apply text-[14px] leading-[20px] px-[10px] py-2.5;}.lg .upload-button{@apply text-[16px] leading-[24px] px-[18px] py-2.5;}.xl .upload-button{@apply text-[16px] leading-[24px] px-5 py-3;}.profile-size{@apply font-medium text-[#6B7080];}.sm .profile-size{@apply text-[10px] leading-[14px];}.md .profile-size{@apply text-[12px] leading-[18px];}.lg .profile-size{@apply text-[14px] leading-[20px];}.xl .profile-size{@apply text-[16px] leading-[24px];}.avatar-profile.sm .avatar-text{@apply font-medium text-[30px] leading-[38px];}.avatar-profile.md .avatar-text{@apply font-medium text-[36px] leading-[44px];}.avatar-profile.lg .avatar-text{@apply font-medium text-[45px] leading-[55px];}.avatar-profile.xl .avatar-text{@apply font-medium text-[60px] leading-[72px];}.avatar-profile{@apply font-medium text-[#6B7080];}.avatar-profile.sm{@apply size-[72px] text-sm;}.avatar-profile.md{@apply size-[96px] text-base;}.avatar-profile.lg{@apply size-[120px] text-[18px] leading-[26px];}.avatar-profile.xl{@apply size-[160px] text-xl;}.avatar-profile.sm .placeholder-icon{@apply size-[28px];}.avatar-profile.md .placeholder-icon{@apply size-[42px];}.avatar-profile.lg .placeholder-icon{@apply size-[52px];}.avatar-profile.xl .placeholder-icon{@apply size-[65px];}.avatar-profile.corrupted{@apply border-[3px] border-[#E7000B];}.avatar-profile .corrupted-icon{@apply text-[#E7000B];}.avatar-profile.sm .corrupted-icon{@apply size-[28px];}.avatar-profile.md .corrupted-icon{@apply size-[42px];}.avatar-profile.lg .corrupted-icon{@apply size-[52px];}.avatar-profile.xl .corrupted-icon{@apply size-[65px];}.remove-badge{@apply absolute top-0 right-0 w-5 h-5 bg-white rounded-full shadow-md flex items-center justify-center cursor-pointer hover:bg-gray-50 transition z-20 border-0 p-0;}\n"] }]
|
|
@@ -6514,7 +6514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
6514
6514
|
args: [{ selector: 'bk-toastr', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<!-- Toast Container \u2013 fixed overlay -->\r\n<div class=\"toast-container\" [attr.data-position]=\"position$ | async\">\r\n\r\n @for (toast of (toasts$ | async) ?? []; track toast.id) {\r\n <div\r\n class=\"toast-item\"\r\n [attr.data-severity]=\"toast.severity\"\r\n [class.toast-enter]=\"!toast.leaving\"\r\n [class.toast-leave]=\"toast.leaving\">\r\n\r\n <!-- \u2500\u2500 Icon \u2500\u2500 -->\r\n @if (toast.icon) {\r\n <svg class=\"toast-icon shrink-0\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g [attr.clip-path]=\"'url(#clip_' + toast.id + ')'\">\r\n <path\r\n d=\"M10.0001 13.3334V10M10.0001 6.66671H10.0084M18.3334 10C18.3334 5.39767 14.6025 1.66671 10.0001 1.66671C5.39771 1.66671 1.66675 5.39767 1.66675 10C1.66675 14.6024 5.39771 18.3334 10.0001 18.3334C14.6025 18.3334 18.3334 14.6024 18.3334 10Z\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath [attr.id]=\"'clip_' + toast.id\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n }\r\n\r\n <!-- \u2500\u2500 Content \u2500\u2500 -->\r\n <div class=\"flex-1 min-w-0\">\r\n <p class=\"toast-summary\">{{ toast.summary }}</p>\r\n @if (toast.detail) {\r\n <p class=\"toast-detail\">{{ toast.detail }}</p>\r\n }\r\n </div>\r\n\r\n <!-- \u2500\u2500 Action button \u2500\u2500 -->\r\n @if (toast.actionLabel) {\r\n <button type=\"button\" class=\"toast-action\" (click)=\"onAction($event, toast)\">\r\n {{ toast.actionLabel }}\r\n </button>\r\n }\r\n\r\n <!-- \u2500\u2500 Close button \u2500\u2500 -->\r\n <button type=\"button\" class=\"toast-close\" (click)=\"onClose($event, toast.id)\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M10.625 0.625L0.625 10.625M0.625 0.625L10.625 10.625\"\r\n stroke-width=\"1.25\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n </div>\r\n }\r\n\r\n</div>\r\n", styles: [".toast-container{@apply fixed flex flex-col gap-3 max-w-[100vw-2rem];z-index:2147483647!important;pointer-events:none}.toast-container[data-position=top-right]{@apply top-4 right-4;}.toast-container[data-position=top-left]{@apply top-4 left-4;}.toast-container[data-position=top-center]{@apply top-4 left-1/2 -translate-x-1/2;}.toast-container[data-position=bottom-right]{@apply bottom-4 right-4;}.toast-container[data-position=bottom-left]{@apply bottom-4 left-4;}.toast-container[data-position=bottom-center]{@apply bottom-4 left-1/2 -translate-x-1/2;}.toast-item{@apply flex items-center justify-start gap-3 py-2 px-4 rounded-lg border;box-shadow:0 4px 12px #00000014,0 1px 3px #0000000f;pointer-events:auto}.toast-item[data-severity=info]{@apply bg-[#E5F3FF] border-[#E5F3FF];}.toast-item[data-severity=info] .toast-icon path{stroke:#1434cb}.toast-item[data-severity=info] .toast-summary{@apply text-[#0D227F];}.toast-item[data-severity=info] .toast-action{@apply bg-[#1434CB] text-white border border-[#1434CB];}.toast-item[data-severity=info] .toast-close path{stroke:#2563eb}.toast-item[data-severity=default]{@apply bg-white border-gray-200;}.toast-item[data-severity=default] .toast-icon path{stroke:#6b7080}.toast-item[data-severity=default] .toast-summary{@apply text-[#363C51];}.toast-item[data-severity=default] .toast-action{@apply bg-[#A1A3AE] text-white;}.toast-item[data-severity=default] .toast-close path{stroke:#6b7080}.toast-item[data-severity=error]{@apply bg-[#FFF1F1] border-[#FFF1F1];}.toast-item[data-severity=error] .toast-icon path{stroke:#cb1432}.toast-item[data-severity=error] .toast-summary{@apply text-[#B41E32];}.toast-item[data-severity=error] .toast-action{@apply bg-[#CB1432] text-white;}.toast-item[data-severity=error] .toast-close path{stroke:#cb1432}.toast-item[data-severity=warn]{@apply bg-[#FFEED7] border-[#FFEED7];}.toast-item[data-severity=warn] .toast-icon path{stroke:#f97c00}.toast-item[data-severity=warn] .toast-summary{@apply text-[#A04C02];}.toast-item[data-severity=warn] .toast-action{@apply bg-[#CC6401] text-white;}.toast-item[data-severity=warn] .toast-close path{stroke:#f97c00}.toast-item[data-severity=success]{@apply bg-[#F1FCF3] border-[#F1FCF3];}.toast-item[data-severity=success] .toast-icon path{stroke:#22973f}.toast-item[data-severity=success] .toast-summary{@apply text-[#1E7735];}.toast-item[data-severity=success] .toast-action{@apply bg-[#22973F] text-white;}.toast-item[data-severity=success] .toast-action:hover{@apply bg-green-800;}.toast-item[data-severity=success] .toast-close path{stroke:#22973f}.toast-summary{@apply text-sm font-medium;}.toast-action{@apply shrink-0 py-1 px-2 text-xs font-medium leading-[18px] rounded-lg cursor-pointer border-none transition-colors;pointer-events:auto}.toast-close{@apply shrink-0 p-1 rounded cursor-pointer border-none bg-transparent transition-opacity;pointer-events:auto;position:relative;z-index:1}.toast-close:hover{@apply opacity-60;}.toast-close svg{display:block;pointer-events:none}.toast-close *{cursor:pointer}.toast-enter{animation:toastIn .3s ease-out forwards}.toast-leave{animation:toastOut .3s ease-in forwards}@keyframes toastIn{0%{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-10px) scale(.96)}}\n"] }]
|
|
6515
6515
|
}] });
|
|
6516
6516
|
|
|
6517
|
-
class
|
|
6517
|
+
class BkAvatar {
|
|
6518
6518
|
cdr;
|
|
6519
6519
|
constructor(cdr) {
|
|
6520
6520
|
this.cdr = cdr;
|
|
@@ -6616,21 +6616,21 @@ class BkUiAvatar {
|
|
|
6616
6616
|
}
|
|
6617
6617
|
return (parts[0][0] + parts.at(-1)[0]).toUpperCase();
|
|
6618
6618
|
}
|
|
6619
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type:
|
|
6620
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type:
|
|
6619
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkAvatar, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6620
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkAvatar, isStandalone: true, selector: "bk-avatar", inputs: { src: "src", alt: "alt", name: "name", size: "size", variant: "variant", fallback: "fallback", dot: "dot", dotPosition: "dotPosition" }, outputs: { imageLoadError: "imageLoadError" }, providers: [
|
|
6621
6621
|
{
|
|
6622
6622
|
provide: NG_VALUE_ACCESSOR,
|
|
6623
|
-
useExisting: forwardRef(() =>
|
|
6623
|
+
useExisting: forwardRef(() => BkAvatar),
|
|
6624
6624
|
multi: true
|
|
6625
6625
|
}
|
|
6626
6626
|
], usesOnChanges: true, ngImport: i0, template: "<div\r\n [ngClass]=\"containerClasses\"\r\n [bkTooltip]=\"name\"\r\n [bkTooltipPosition]=\"'top'\"\r\n>\r\n\r\n @if (showImage) {\r\n <img\r\n [src]=\"src\"\r\n [alt]=\"alt\"\r\n class=\"avatar-img\"\r\n (error)=\"onImageError()\"\r\n />\r\n }\r\n\r\n @else if (showInitials) {\r\n <span class=\"avatar-text\">\r\n {{ initials }}\r\n </span>\r\n }\r\n\r\n @else {\r\n <svg\r\n class=\"placeholder-icon\"\r\n viewBox=\"0 0 32 32\"\r\n fill=\"none\"\r\n aria-hidden=\"true\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n d=\"M16 16c3.682 0 6.667-2.985 6.667-6.667S19.682 2.667 16 2.667 9.333 5.651 9.333 9.333 12.318 16 16 16Z\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M27.453 29.333C27.453 24.173 22.32 20 16 20S4.547 24.173 4.547 29.333\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n }\r\n\r\n @if (dot !== 'none') {\r\n <span [ngClass]=\"dotClasses\"></span>\r\n }\r\n\r\n</div>\r\n", styles: [".avatar{@apply relative inline-flex items-center justify-center rounded-full flex-shrink-0 select-none transition-all duration-200;}.avatar-img{@apply w-full h-full object-cover rounded-full;}.avatar-text{@apply font-medium;}.avatar.xsm{@apply size-6 text-[10px] leading-[14px];}.avatar.sm{@apply size-8 text-sm;}.avatar.md{@apply size-10 text-base;}.avatar.lg{@apply size-12 text-[18px] leading-[26px];}.avatar.xl{@apply size-14 text-xl;}.avatar.xxl{@apply size-16 text-xl;}.avatar.xsm .placeholder-icon{@apply size-4;}.avatar.sm .placeholder-icon{@apply size-5;}.avatar.md .placeholder-icon{@apply size-6;}.avatar.lg .placeholder-icon{@apply size-7;}.avatar.xl .placeholder-icon,.avatar.xxl .placeholder-icon{@apply size-8;}.avatar-dot{@apply absolute rounded-full block box-content border-[1.5px] border-white;}.avatar.xsm .avatar-dot{@apply size-1;}.avatar.sm .avatar-dot{@apply size-1.5;}.avatar.md .avatar-dot{@apply size-2.5;}.avatar.lg .avatar-dot{@apply size-3;}.avatar.xl .avatar-dot{@apply size-[14px];}.avatar.xxl .avatar-dot{@apply size-4;}.avatar .active{@apply bg-[#22973F];}.avatar .inactive{@apply bg-gray-300;}.avatar .notification{@apply bg-[#2E90FA];}.avatar .none{@apply hidden;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6627
6627
|
}
|
|
6628
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type:
|
|
6628
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkAvatar, decorators: [{
|
|
6629
6629
|
type: Component,
|
|
6630
|
-
args: [{ selector: 'bk-
|
|
6630
|
+
args: [{ selector: 'bk-avatar', standalone: true, imports: [CommonModule, BKTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
6631
6631
|
{
|
|
6632
6632
|
provide: NG_VALUE_ACCESSOR,
|
|
6633
|
-
useExisting: forwardRef(() =>
|
|
6633
|
+
useExisting: forwardRef(() => BkAvatar),
|
|
6634
6634
|
multi: true
|
|
6635
6635
|
}
|
|
6636
6636
|
], template: "<div\r\n [ngClass]=\"containerClasses\"\r\n [bkTooltip]=\"name\"\r\n [bkTooltipPosition]=\"'top'\"\r\n>\r\n\r\n @if (showImage) {\r\n <img\r\n [src]=\"src\"\r\n [alt]=\"alt\"\r\n class=\"avatar-img\"\r\n (error)=\"onImageError()\"\r\n />\r\n }\r\n\r\n @else if (showInitials) {\r\n <span class=\"avatar-text\">\r\n {{ initials }}\r\n </span>\r\n }\r\n\r\n @else {\r\n <svg\r\n class=\"placeholder-icon\"\r\n viewBox=\"0 0 32 32\"\r\n fill=\"none\"\r\n aria-hidden=\"true\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n d=\"M16 16c3.682 0 6.667-2.985 6.667-6.667S19.682 2.667 16 2.667 9.333 5.651 9.333 9.333 12.318 16 16 16Z\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M27.453 29.333C27.453 24.173 22.32 20 16 20S4.547 24.173 4.547 29.333\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n }\r\n\r\n @if (dot !== 'none') {\r\n <span [ngClass]=\"dotClasses\"></span>\r\n }\r\n\r\n</div>\r\n", styles: [".avatar{@apply relative inline-flex items-center justify-center rounded-full flex-shrink-0 select-none transition-all duration-200;}.avatar-img{@apply w-full h-full object-cover rounded-full;}.avatar-text{@apply font-medium;}.avatar.xsm{@apply size-6 text-[10px] leading-[14px];}.avatar.sm{@apply size-8 text-sm;}.avatar.md{@apply size-10 text-base;}.avatar.lg{@apply size-12 text-[18px] leading-[26px];}.avatar.xl{@apply size-14 text-xl;}.avatar.xxl{@apply size-16 text-xl;}.avatar.xsm .placeholder-icon{@apply size-4;}.avatar.sm .placeholder-icon{@apply size-5;}.avatar.md .placeholder-icon{@apply size-6;}.avatar.lg .placeholder-icon{@apply size-7;}.avatar.xl .placeholder-icon,.avatar.xxl .placeholder-icon{@apply size-8;}.avatar-dot{@apply absolute rounded-full block box-content border-[1.5px] border-white;}.avatar.xsm .avatar-dot{@apply size-1;}.avatar.sm .avatar-dot{@apply size-1.5;}.avatar.md .avatar-dot{@apply size-2.5;}.avatar.lg .avatar-dot{@apply size-3;}.avatar.xl .avatar-dot{@apply size-[14px];}.avatar.xxl .avatar-dot{@apply size-4;}.avatar .active{@apply bg-[#22973F];}.avatar .inactive{@apply bg-gray-300;}.avatar .notification{@apply bg-[#2E90FA];}.avatar .none{@apply hidden;}\n"] }]
|
|
@@ -6742,65 +6742,113 @@ class BkColumnSelect {
|
|
|
6742
6742
|
columnFilterService;
|
|
6743
6743
|
searchable = false;
|
|
6744
6744
|
cacheKey;
|
|
6745
|
-
columns;
|
|
6745
|
+
columns = [];
|
|
6746
6746
|
isOpened = false;
|
|
6747
|
-
formBoxRef;
|
|
6748
|
-
change = new EventEmitter();
|
|
6749
6747
|
isOpenedChange = new EventEmitter();
|
|
6748
|
+
formBoxRef;
|
|
6749
|
+
/** Value bound via ngModel – only updated when user ticks/unticks a checkbox, never on search. */
|
|
6750
6750
|
columnsFilterList = [];
|
|
6751
6751
|
search = '';
|
|
6752
|
+
onChangeCallback = () => { };
|
|
6753
|
+
onTouchedCallback = () => { };
|
|
6752
6754
|
constructor(columnFilterService) {
|
|
6753
6755
|
this.columnFilterService = columnFilterService;
|
|
6754
6756
|
}
|
|
6755
|
-
|
|
6756
|
-
|
|
6757
|
+
writeValue(value) {
|
|
6758
|
+
const isEmpty = !value || !Array.isArray(value) || value.length === 0;
|
|
6759
|
+
if (isEmpty && this.shouldLoadFromService()) {
|
|
6760
|
+
this.loadColumnsFilterListFromService();
|
|
6761
|
+
}
|
|
6762
|
+
else {
|
|
6763
|
+
this.columnsFilterList = Array.isArray(value) ? value : [];
|
|
6764
|
+
}
|
|
6757
6765
|
}
|
|
6758
6766
|
ngOnChanges(changes) {
|
|
6759
|
-
|
|
6760
|
-
|
|
6767
|
+
const columnsChanged = changes['columns'] && !changes['columns'].firstChange;
|
|
6768
|
+
const cacheKeyChanged = changes['cacheKey'] && !changes['cacheKey'].firstChange;
|
|
6769
|
+
if ((columnsChanged || cacheKeyChanged) && this.columnsFilterList.length === 0 && this.shouldLoadFromService()) {
|
|
6770
|
+
this.loadColumnsFilterListFromService();
|
|
6761
6771
|
}
|
|
6762
6772
|
}
|
|
6763
|
-
|
|
6773
|
+
shouldLoadFromService() {
|
|
6774
|
+
return !!this.cacheKey && !!this.columns?.length;
|
|
6775
|
+
}
|
|
6776
|
+
loadColumnsFilterListFromService() {
|
|
6764
6777
|
this.columnsFilterList = this.columnFilterService.getColumnsFilterList(this.cacheKey, this.columns);
|
|
6765
|
-
this.
|
|
6778
|
+
this.onChangeCallback(this.columnsFilterList);
|
|
6779
|
+
}
|
|
6780
|
+
registerOnChange(fn) {
|
|
6781
|
+
this.onChangeCallback = fn;
|
|
6782
|
+
}
|
|
6783
|
+
registerOnTouched(fn) {
|
|
6784
|
+
this.onTouchedCallback = fn;
|
|
6785
|
+
}
|
|
6786
|
+
setDisabledState(isDisabled) {
|
|
6787
|
+
// Optional: disable button/dropdown when control is disabled
|
|
6766
6788
|
}
|
|
6767
6789
|
filterButtonClicked(event) {
|
|
6768
6790
|
event.stopPropagation();
|
|
6769
|
-
|
|
6791
|
+
const willOpen = !this.isOpened;
|
|
6792
|
+
if (!willOpen) {
|
|
6793
|
+
this.clearSearch();
|
|
6794
|
+
this.onTouchedCallback();
|
|
6795
|
+
}
|
|
6796
|
+
this.isOpenedChange.emit(willOpen);
|
|
6770
6797
|
}
|
|
6771
|
-
|
|
6798
|
+
/** Called only on checkbox tick/untick – not on search. Emits via CVA so ngModel updates. */
|
|
6799
|
+
onChangeColumnFilter() {
|
|
6772
6800
|
this.columnFilterService.updateColumnFilterList(this.cacheKey, this.columnsFilterList);
|
|
6773
|
-
this.
|
|
6801
|
+
this.onChangeCallback(this.columnsFilterList);
|
|
6802
|
+
this.onTouchedCallback();
|
|
6803
|
+
}
|
|
6804
|
+
clearSearch() {
|
|
6805
|
+
this.search = '';
|
|
6806
|
+
}
|
|
6807
|
+
closeDropdown() {
|
|
6808
|
+
this.clearSearch();
|
|
6809
|
+
this.onTouchedCallback();
|
|
6810
|
+
this.isOpened = false;
|
|
6811
|
+
this.isOpenedChange.emit(this.isOpened);
|
|
6774
6812
|
}
|
|
6775
6813
|
onClick(event) {
|
|
6776
|
-
|
|
6777
|
-
|
|
6778
|
-
|
|
6779
|
-
|
|
6814
|
+
if (!this.isOpened) {
|
|
6815
|
+
return;
|
|
6816
|
+
}
|
|
6817
|
+
const formBox = this.formBoxRef?.nativeElement;
|
|
6818
|
+
if (formBox && formBox.contains(event.target)) {
|
|
6819
|
+
return;
|
|
6780
6820
|
}
|
|
6781
|
-
// Check if the click target is .ng-value-icon
|
|
6782
6821
|
if (event.target instanceof HTMLElement &&
|
|
6783
6822
|
event.target.classList.contains('ng-value-icon')) {
|
|
6784
|
-
// Do nothing if click is on .ng-value-icon
|
|
6785
6823
|
return;
|
|
6786
6824
|
}
|
|
6787
|
-
|
|
6788
|
-
|
|
6789
|
-
|
|
6790
|
-
// Close the popup if the click is not on the button
|
|
6791
|
-
this.isOpened = false;
|
|
6792
|
-
this.isOpenedChange.emit(this.isOpened);
|
|
6825
|
+
if (event.target instanceof HTMLElement &&
|
|
6826
|
+
event.target.closest('.btn-light-primary-custom')) {
|
|
6827
|
+
return;
|
|
6793
6828
|
}
|
|
6829
|
+
this.closeDropdown();
|
|
6794
6830
|
}
|
|
6795
6831
|
get list() {
|
|
6796
6832
|
return this.columnsFilterList.filter((x) => x.columnName.toLowerCase().includes(this.search.toLowerCase()));
|
|
6797
6833
|
}
|
|
6798
6834
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkColumnSelect, deps: [{ token: BkColumnFilterService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6799
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkColumnSelect, isStandalone: true, selector: "bk-column-select", inputs: { searchable: "searchable", cacheKey: "cacheKey", columns: "columns", isOpened: "isOpened" }, outputs: {
|
|
6835
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkColumnSelect, isStandalone: true, selector: "bk-column-select", inputs: { searchable: "searchable", cacheKey: "cacheKey", columns: "columns", isOpened: "isOpened" }, outputs: { isOpenedChange: "isOpenedChange" }, host: { listeners: { "document:click": "onClick($event)" } }, providers: [
|
|
6836
|
+
{
|
|
6837
|
+
provide: NG_VALUE_ACCESSOR,
|
|
6838
|
+
useExisting: forwardRef(() => BkColumnSelect),
|
|
6839
|
+
multi: true,
|
|
6840
|
+
},
|
|
6841
|
+
], viewQueries: [{ propertyName: "formBoxRef", first: true, predicate: ["formBox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\r\n\r\n <bk-button [size]=\"'xsm'\" [variant]=\"'secondary'\" [leftIcon]=\"'../../../../assets/icons/columns-black.svg'\"\r\n (click)=\"filterButtonClicked($event)\" [label]=\"'Columns'\" [buttonClass]=\"'!text-black'\"></bk-button>\r\n\r\n <!-- Dropdown Box -->\r\n @if(isOpened){\r\n\r\n <div #formBox\r\n class=\"absolute right-0 mt-2 w-[178px] bg-white border border-[#EFEFF1] rounded-xl shadow-xl p-3 pe-1 z-[9999]\">\r\n @if(searchable){\r\n <bk-input [id]=\"'search-input-1'\" [name]=\"'search-input-1'\"\r\n [iconSrc]=\"'../../../../assets/icons/search-input.svg'\" type=\"text\" [(ngModel)]=\"search\"\r\n placeholder=\"Search\"></bk-input>\r\n }\r\n <div class=\"flex flex-col gap-0.5 max-h-[360px] overflow-y-auto\">\r\n @for (column of list; track column.columnName; let i = $index) {\r\n <div class=\"flex items-center gap-2 px-3 py-2\">\r\n <bk-checkbox id=\"columnsFilterList-{{column.columnName}}\" checkboxClass=\"sm\" [(ngModel)]=\"column.selected\"\r\n (change)=\"onChangeColumnFilter()\">\r\n\r\n </bk-checkbox>\r\n\r\n\r\n\r\n <label class=\"text-xs cursor-pointer text-[#141414] select-none truncate font-medium\"\r\n for=\"columnsFilterList-{{column.columnName}}\">\r\n {{column.columnName}}\r\n </label>\r\n </div>\r\n }\r\n @if(!list.length){\r\n <p class=\"column-select-option-empty\">No items found</p>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n\r\n", styles: [".column-select-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BkButton, selector: "bk-button", inputs: ["variant", "size", "label", "leftIcon", "rightIcon", "iconAlt", "type", "loading", "disabled", "buttonClass", "textClass", "spinnerClass"], outputs: ["clicked"] }, { kind: "component", type: BkCheckbox, selector: "bk-checkbox", inputs: ["checkboxClass", "label", "labelClass", "disabled"], outputs: ["change"] }, { kind: "component", type: BkInput, selector: "bk-input", inputs: ["id", "name", "mask", "autoComplete", "label", "placeholder", "hint", "required", "type", "value", "hasError", "showErrorIcon", "errorMessage", "disabled", "tabIndex", "readOnly", "autoCapitalize", "inputMode", "iconSrc", "iconAlt", "showIcon", "phone", "countryCode", "countryOptions", "iconOrientation", "password", "showPassword", "pattern", "max", "min", "step", "maxlength", "minlength"], outputs: ["input", "change", "focus", "blur", "clicked"] }] });
|
|
6800
6842
|
}
|
|
6801
6843
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkColumnSelect, decorators: [{
|
|
6802
6844
|
type: Component,
|
|
6803
|
-
args: [{ selector: 'bk-column-select', imports: [FormsModule, BkButton, BkCheckbox, BkInput], standalone: true,
|
|
6845
|
+
args: [{ selector: 'bk-column-select', imports: [FormsModule, BkButton, BkCheckbox, BkInput], standalone: true, providers: [
|
|
6846
|
+
{
|
|
6847
|
+
provide: NG_VALUE_ACCESSOR,
|
|
6848
|
+
useExisting: forwardRef(() => BkColumnSelect),
|
|
6849
|
+
multi: true,
|
|
6850
|
+
},
|
|
6851
|
+
], template: "<div class=\"relative\">\r\n\r\n <bk-button [size]=\"'xsm'\" [variant]=\"'secondary'\" [leftIcon]=\"'../../../../assets/icons/columns-black.svg'\"\r\n (click)=\"filterButtonClicked($event)\" [label]=\"'Columns'\" [buttonClass]=\"'!text-black'\"></bk-button>\r\n\r\n <!-- Dropdown Box -->\r\n @if(isOpened){\r\n\r\n <div #formBox\r\n class=\"absolute right-0 mt-2 w-[178px] bg-white border border-[#EFEFF1] rounded-xl shadow-xl p-3 pe-1 z-[9999]\">\r\n @if(searchable){\r\n <bk-input [id]=\"'search-input-1'\" [name]=\"'search-input-1'\"\r\n [iconSrc]=\"'../../../../assets/icons/search-input.svg'\" type=\"text\" [(ngModel)]=\"search\"\r\n placeholder=\"Search\"></bk-input>\r\n }\r\n <div class=\"flex flex-col gap-0.5 max-h-[360px] overflow-y-auto\">\r\n @for (column of list; track column.columnName; let i = $index) {\r\n <div class=\"flex items-center gap-2 px-3 py-2\">\r\n <bk-checkbox id=\"columnsFilterList-{{column.columnName}}\" checkboxClass=\"sm\" [(ngModel)]=\"column.selected\"\r\n (change)=\"onChangeColumnFilter()\">\r\n\r\n </bk-checkbox>\r\n\r\n\r\n\r\n <label class=\"text-xs cursor-pointer text-[#141414] select-none truncate font-medium\"\r\n for=\"columnsFilterList-{{column.columnName}}\">\r\n {{column.columnName}}\r\n </label>\r\n </div>\r\n }\r\n @if(!list.length){\r\n <p class=\"column-select-option-empty\">No items found</p>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n\r\n", styles: [".column-select-option-empty{@apply px-3 py-2 text-gray-400 cursor-default text-sm;}\n"] }]
|
|
6804
6852
|
}], ctorParameters: () => [{ type: BkColumnFilterService }], propDecorators: { searchable: [{
|
|
6805
6853
|
type: Input
|
|
6806
6854
|
}], cacheKey: [{
|
|
@@ -6809,13 +6857,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
6809
6857
|
type: Input
|
|
6810
6858
|
}], isOpened: [{
|
|
6811
6859
|
type: Input
|
|
6860
|
+
}], isOpenedChange: [{
|
|
6861
|
+
type: Output
|
|
6812
6862
|
}], formBoxRef: [{
|
|
6813
6863
|
type: ViewChild,
|
|
6814
6864
|
args: ['formBox']
|
|
6815
|
-
}], change: [{
|
|
6816
|
-
type: Output
|
|
6817
|
-
}], isOpenedChange: [{
|
|
6818
|
-
type: Output
|
|
6819
6865
|
}], onClick: [{
|
|
6820
6866
|
type: HostListener,
|
|
6821
6867
|
args: ['document:click', ['$event']]
|
|
@@ -6830,5 +6876,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
6830
6876
|
* Generated bundle index. Do not edit.
|
|
6831
6877
|
*/
|
|
6832
6878
|
|
|
6833
|
-
export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG,
|
|
6879
|
+
export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatar, BkAvatarUploader, BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, CalendarSelection, ColumnFilterOption, getDialogBackdropAnimation, getDialogPanelAnimation };
|
|
6834
6880
|
//# sourceMappingURL=brickclay-org-ui.mjs.map
|