@brickclay-org/ui 0.1.59 → 0.1.60

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.
@@ -7718,11 +7718,11 @@ class BkToastr {
7718
7718
  t.actionCallback?.();
7719
7719
  }
7720
7720
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkToastr, deps: [], target: i0.ɵɵFactoryTarget.Component });
7721
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkToastr, isStandalone: true, selector: "bk-toastr", ngImport: i0, 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=\"toast-content 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-[#C84144] border-[#FFF1F1];}.toast-item[data-severity=error] .toast-icon path{stroke:#fff}.toast-item[data-severity=error] .toast-summary{@apply text-white;}.toast-item[data-severity=error] .toast-detail{@apply text-gray-200;}.toast-item[data-severity=error] .toast-action{@apply bg-white text-[#CB1432];}.toast-item[data-severity=error] .toast-close path{stroke:#fff}.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}@media (max-width: 425px){.toast-container{width:calc(100vw - 2rem);max-width:100%}.toast-container[data-position=top-center],.toast-container[data-position=bottom-center]{left:50%!important;right:auto!important;transform:translate(-50%)!important;align-items:center}.toast-item{display:grid;grid-template-areas:\"icon action close\" \"content content content\";grid-template-columns:auto 1fr auto;align-items:center;row-gap:6px}.toast-icon{grid-area:icon}.toast-content{grid-area:content}.toast-action{grid-area:action;justify-self:end}.toast-close{grid-area:close}}.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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
7721
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkToastr, isStandalone: true, selector: "bk-toastr", ngImport: i0, 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=\"toast-content 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-[#1434CB] border-[#E5F3FF];}.toast-item[data-severity=info] .toast-icon path{stroke:#fff}.toast-item[data-severity=info] .toast-summary{@apply text-white;}.toast-item[data-severity=info] .toast-detail{@apply text-gray-200 text-xs;}.toast-item[data-severity=info] .toast-action{@apply bg-white text-[#1434CB] border border-[#1434CB];}.toast-item[data-severity=info] .toast-close path{stroke:#fff}.toast-item[data-severity=default]{@apply bg-black border-gray-200;}.toast-item[data-severity=default] .toast-icon path{stroke:#fff}.toast-item[data-severity=default] .toast-summary{@apply text-white;}.toast-item[data-severity=default] .toast-action{@apply bg-white text-black;}.toast-item[data-severity=default] .toast-close path{stroke:#fff}.toast-item[data-severity=error]{@apply bg-[#C84144] border-[#FFF1F1];}.toast-item[data-severity=error] .toast-icon path{stroke:#fff}.toast-item[data-severity=error] .toast-summary{@apply text-white;}.toast-item[data-severity=error] .toast-detail{@apply text-gray-200 text-xs;}.toast-item[data-severity=error] .toast-action{@apply bg-white text-[#CB1432];}.toast-item[data-severity=error] .toast-close path{stroke:#fff}.toast-item[data-severity=warn]{@apply bg-[#CC6401] border-[#FFEED7];}.toast-item[data-severity=warn] .toast-icon path{stroke:#fff}.toast-item[data-severity=warn] .toast-summary{@apply text-white;}.toast-item[data-severity=warn] .toast-action{@apply bg-white text-[#CC6401];}.toast-item[data-severity=warn] .toast-close path{stroke:#fff}.toast-item[data-severity=success]{@apply bg-[#1E7735] border-[#F1FCF3];}.toast-item[data-severity=success] .toast-icon path{stroke:#fff}.toast-item[data-severity=success] .toast-summary{@apply text-white;}.toast-item[data-severity=success] .toast-action{@apply bg-white text-[#22973F];}.toast-item[data-severity=success] .toast-action:hover{@apply bg-[#22973F];}.toast-item[data-severity=success] .toast-close path{stroke:#fff}.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}@media (max-width: 425px){.toast-container{width:calc(100vw - 2rem);max-width:100%}.toast-container[data-position=top-center],.toast-container[data-position=bottom-center]{left:50%!important;right:auto!important;transform:translate(-50%)!important;align-items:center}.toast-item{display:grid;grid-template-areas:\"icon action close\" \"content content content\";grid-template-columns:auto 1fr auto;align-items:center;row-gap:6px}.toast-icon{grid-area:icon}.toast-content{grid-area:content}.toast-action{grid-area:action;justify-self:end}.toast-close{grid-area:close}}.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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
7722
7722
  }
7723
7723
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkToastr, decorators: [{
7724
7724
  type: Component,
7725
- 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=\"toast-content 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-[#C84144] border-[#FFF1F1];}.toast-item[data-severity=error] .toast-icon path{stroke:#fff}.toast-item[data-severity=error] .toast-summary{@apply text-white;}.toast-item[data-severity=error] .toast-detail{@apply text-gray-200;}.toast-item[data-severity=error] .toast-action{@apply bg-white text-[#CB1432];}.toast-item[data-severity=error] .toast-close path{stroke:#fff}.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}@media (max-width: 425px){.toast-container{width:calc(100vw - 2rem);max-width:100%}.toast-container[data-position=top-center],.toast-container[data-position=bottom-center]{left:50%!important;right:auto!important;transform:translate(-50%)!important;align-items:center}.toast-item{display:grid;grid-template-areas:\"icon action close\" \"content content content\";grid-template-columns:auto 1fr auto;align-items:center;row-gap:6px}.toast-icon{grid-area:icon}.toast-content{grid-area:content}.toast-action{grid-area:action;justify-self:end}.toast-close{grid-area:close}}.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"] }]
7725
+ 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=\"toast-content 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-[#1434CB] border-[#E5F3FF];}.toast-item[data-severity=info] .toast-icon path{stroke:#fff}.toast-item[data-severity=info] .toast-summary{@apply text-white;}.toast-item[data-severity=info] .toast-detail{@apply text-gray-200 text-xs;}.toast-item[data-severity=info] .toast-action{@apply bg-white text-[#1434CB] border border-[#1434CB];}.toast-item[data-severity=info] .toast-close path{stroke:#fff}.toast-item[data-severity=default]{@apply bg-black border-gray-200;}.toast-item[data-severity=default] .toast-icon path{stroke:#fff}.toast-item[data-severity=default] .toast-summary{@apply text-white;}.toast-item[data-severity=default] .toast-action{@apply bg-white text-black;}.toast-item[data-severity=default] .toast-close path{stroke:#fff}.toast-item[data-severity=error]{@apply bg-[#C84144] border-[#FFF1F1];}.toast-item[data-severity=error] .toast-icon path{stroke:#fff}.toast-item[data-severity=error] .toast-summary{@apply text-white;}.toast-item[data-severity=error] .toast-detail{@apply text-gray-200 text-xs;}.toast-item[data-severity=error] .toast-action{@apply bg-white text-[#CB1432];}.toast-item[data-severity=error] .toast-close path{stroke:#fff}.toast-item[data-severity=warn]{@apply bg-[#CC6401] border-[#FFEED7];}.toast-item[data-severity=warn] .toast-icon path{stroke:#fff}.toast-item[data-severity=warn] .toast-summary{@apply text-white;}.toast-item[data-severity=warn] .toast-action{@apply bg-white text-[#CC6401];}.toast-item[data-severity=warn] .toast-close path{stroke:#fff}.toast-item[data-severity=success]{@apply bg-[#1E7735] border-[#F1FCF3];}.toast-item[data-severity=success] .toast-icon path{stroke:#fff}.toast-item[data-severity=success] .toast-summary{@apply text-white;}.toast-item[data-severity=success] .toast-action{@apply bg-white text-[#22973F];}.toast-item[data-severity=success] .toast-action:hover{@apply bg-[#22973F];}.toast-item[data-severity=success] .toast-close path{stroke:#fff}.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}@media (max-width: 425px){.toast-container{width:calc(100vw - 2rem);max-width:100%}.toast-container[data-position=top-center],.toast-container[data-position=bottom-center]{left:50%!important;right:auto!important;transform:translate(-50%)!important;align-items:center}.toast-item{display:grid;grid-template-areas:\"icon action close\" \"content content content\";grid-template-columns:auto 1fr auto;align-items:center;row-gap:6px}.toast-icon{grid-area:icon}.toast-content{grid-area:content}.toast-action{grid-area:action;justify-self:end}.toast-close{grid-area:close}}.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"] }]
7726
7726
  }] });
7727
7727
 
7728
7728
  class BkAvatar {
@@ -8274,7 +8274,7 @@ class BkFilePicker {
8274
8274
  useExisting: forwardRef(() => BkFilePicker),
8275
8275
  multi: true,
8276
8276
  },
8277
- ], viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"file-picker-wrapper\">\n <input\n #fileInput\n type=\"file\"\n [id]=\"id\"\n [name]=\"name\"\n [accept]=\"accept\"\n [multiple]=\"multi\"\n [disabled]=\"disable\"\n [required]=\"required\"\n class=\"file-picker__input\"\n (cancel)=\"onCancel()\"\n (change)=\"onFileChange($event)\"\n />\n\n <div\n class=\"file-picker\"\n [ngClass]=\"{\n 'file-picker--default': pickerState === 'default',\n 'file-picker--active': pickerState === 'active',\n 'file-picker--disabled': pickerState === 'disabled',\n 'file-picker-has-error': hasError\n }\"\n (click)=\"onContainerClick()\"\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop($event)\"\n role=\"button\"\n [attr.aria-disabled]=\"disable\"\n tabindex=\"0\"\n>\n <svg\n width=\"48\"\n height=\"48\"\n viewBox=\"0 0 48 48\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"file-picker__icon\">\n <rect\n x=\"3.57007\"\n y=\"3.56995\"\n width=\"40\"\n height=\"40\"\n rx=\"20\"\n [attr.fill]=\"pickerState === 'active' ? '#C7E2FF' : pickerState === 'disabled' ? '#F4F4F6' : '#F4F4F6'\"/>\n <rect\n x=\"3.57007\"\n y=\"3.56995\"\n width=\"40\"\n height=\"40\"\n rx=\"20\"\n [attr.stroke]=\"pickerState === 'active' ? '#E5F3FF' : pickerState === 'disabled' ? '#F9FAFA' : '#F9FAFA'\"\n stroke-width=\"7.14\"/>\n <g clip-path=\"url(#clip0_1_149094)\">\n <path\n d=\"M23.5702 20.2366V23.5699M23.5702 26.9032H23.5785M31.9035 23.5699C31.9035 28.1723 28.1725 31.9032 23.5702 31.9032C18.9678 31.9032 15.2368 28.1723 15.2368 23.5699C15.2368 18.9675 18.9678 15.2366 23.5702 15.2366C28.1725 15.2366 31.9035 18.9675 31.9035 23.5699Z\"\n [attr.stroke]=\"pickerState === 'active' ? '#1434CB' : pickerState === 'disabled' ? '#868997' : '#868997'\"\n stroke-width=\"1.66667\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_1_149094\">\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13.5701 13.5699)\"/>\n </clipPath>\n </defs>\n </svg>\n <p\n class=\"file-picker__text-primary\"\n [ngClass]=\"{\n 'file-picker__text-primary--default': pickerState === 'default',\n 'file-picker__text-primary--active': pickerState === 'active',\n 'file-picker__text-primary--disabled': pickerState === 'disabled'\n }\">\n <span\n [ngClass]=\"{\n 'file-picker__text-primary-bold--default': pickerState === 'default',\n 'file-picker__text-primary-bold--active': pickerState === 'active',\n 'file-picker__text-primary-bold--disabled': pickerState === 'disabled'\n }\">Click to upload</span>{{draggable ? ' or drag and drop' : '' }}\n </p>\n <p\n class=\"file-picker__text-secondary\"\n [ngClass]=\"{\n 'file-picker__text-secondary--default': pickerState === 'default',\n 'file-picker__text-secondary--active': pickerState === 'active',\n 'file-picker__text-secondary--disabled': pickerState === 'disabled'\n }\">{{description}}</p>\n </div>\n\n @if (hasError) {\n @if (errorMessage) {\n <p class=\"file-picker-error\">{{ errorMessage }}</p>\n }\n }\n</div>\n", styles: [".file-picker-wrapper{@apply relative w-full;}.file-picker__input{@apply absolute opacity-0 w-0 h-0 overflow-hidden pointer-events-none;}.file-picker{@apply py-4 px-6 inline-flex flex-col justify-center items-center rounded-lg cursor-pointer transition-all duration-200 w-full relative;}.file-picker-has-error{@apply border-[#d11e14];}.file-picker-error{@apply text-xs text-[#E7000B] font-normal;}.file-picker--default{@apply border border-[#E5F3FF] bg-white;}.file-picker--active{@apply border border-[#E5F3FF] bg-[#F4FAFF];}.file-picker--disabled{@apply border border-[#D6D7DC] bg-[#F4F4F6] opacity-60 cursor-not-allowed;}.file-picker__icon{@apply mb-3;}.file-picker__text-primary{@apply font-normal text-sm tracking-normal mb-1;}.file-picker__text-primary--default,.file-picker__text-primary--active{@apply text-[#1B223A];}.file-picker__text-primary--disabled{@apply text-[#A1A3AE];}.file-picker__text-primary-bold--default,.file-picker__text-primary-bold--active{@apply font-medium text-[#102BA5];}.file-picker__text-primary-bold--disabled{@apply font-medium text-[#A1A3AE];}.file-picker__text-secondary{@apply font-normal text-xs leading-[18px];}.file-picker__text-secondary--default,.file-picker__text-secondary--active{@apply text-[#6B7080];}.file-picker__text-secondary--disabled{@apply text-[#A1A3AE];}.file-picker__file-item{@apply p-4 border border-[#EFEFF1] rounded-lg bg-white flex items-start justify-between mb-1;}.file-picker__file-content{@apply flex gap-4;}.file-picker__file-info-title{@apply font-medium text-sm text-[#1B223A];}.file-picker__file-info-size{@apply text-[#1B223A] font-normal text-sm;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
8277
+ ], viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"file-picker-wrapper\">\r\n <input\r\n #fileInput\r\n type=\"file\"\r\n [id]=\"id\"\r\n [name]=\"name\"\r\n [accept]=\"accept\"\r\n [multiple]=\"multi\"\r\n [disabled]=\"disable\"\r\n [required]=\"required\"\r\n class=\"file-picker__input\"\r\n (cancel)=\"onCancel()\"\r\n (change)=\"onFileChange($event)\"\r\n />\r\n\r\n <div\r\n class=\"file-picker\"\r\n [ngClass]=\"{\r\n 'file-picker--default': pickerState === 'default',\r\n 'file-picker--active': pickerState === 'active',\r\n 'file-picker--disabled': pickerState === 'disabled',\r\n 'file-picker-has-error': hasError\r\n }\"\r\n (click)=\"onContainerClick()\"\r\n (dragover)=\"onDragOver($event)\"\r\n (drop)=\"onDrop($event)\"\r\n role=\"button\"\r\n [attr.aria-disabled]=\"disable\"\r\n tabindex=\"0\"\r\n>\r\n <svg\r\n width=\"48\"\r\n height=\"48\"\r\n viewBox=\"0 0 48 48\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"file-picker__icon\">\r\n <rect\r\n x=\"3.57007\"\r\n y=\"3.56995\"\r\n width=\"40\"\r\n height=\"40\"\r\n rx=\"20\"\r\n [attr.fill]=\"pickerState === 'active' ? '#C7E2FF' : pickerState === 'disabled' ? '#F4F4F6' : '#F4F4F6'\"/>\r\n <rect\r\n x=\"3.57007\"\r\n y=\"3.56995\"\r\n width=\"40\"\r\n height=\"40\"\r\n rx=\"20\"\r\n [attr.stroke]=\"pickerState === 'active' ? '#E5F3FF' : pickerState === 'disabled' ? '#F9FAFA' : '#F9FAFA'\"\r\n stroke-width=\"7.14\"/>\r\n <g clip-path=\"url(#clip0_1_149094)\">\r\n <path\r\n d=\"M23.5702 20.2366V23.5699M23.5702 26.9032H23.5785M31.9035 23.5699C31.9035 28.1723 28.1725 31.9032 23.5702 31.9032C18.9678 31.9032 15.2368 28.1723 15.2368 23.5699C15.2368 18.9675 18.9678 15.2366 23.5702 15.2366C28.1725 15.2366 31.9035 18.9675 31.9035 23.5699Z\"\r\n [attr.stroke]=\"pickerState === 'active' ? '#1434CB' : pickerState === 'disabled' ? '#868997' : '#868997'\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1_149094\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13.5701 13.5699)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <p\r\n class=\"file-picker__text-primary\"\r\n [ngClass]=\"{\r\n 'file-picker__text-primary--default': pickerState === 'default',\r\n 'file-picker__text-primary--active': pickerState === 'active',\r\n 'file-picker__text-primary--disabled': pickerState === 'disabled'\r\n }\">\r\n <span\r\n [ngClass]=\"{\r\n 'file-picker__text-primary-bold--default': pickerState === 'default',\r\n 'file-picker__text-primary-bold--active': pickerState === 'active',\r\n 'file-picker__text-primary-bold--disabled': pickerState === 'disabled'\r\n }\">Click to upload</span>{{draggable ? ' or drag and drop' : '' }}\r\n </p>\r\n <p\r\n class=\"file-picker__text-secondary\"\r\n [ngClass]=\"{\r\n 'file-picker__text-secondary--default': pickerState === 'default',\r\n 'file-picker__text-secondary--active': pickerState === 'active',\r\n 'file-picker__text-secondary--disabled': pickerState === 'disabled'\r\n }\">{{description}}</p>\r\n </div>\r\n\r\n @if (hasError) {\r\n @if (errorMessage) {\r\n <p class=\"file-picker-error\">{{ errorMessage }}</p>\r\n }\r\n }\r\n</div>\r\n", styles: [".file-picker-wrapper{@apply relative w-full;}.file-picker__input{@apply absolute opacity-0 w-0 h-0 overflow-hidden pointer-events-none;}.file-picker{@apply py-4 px-6 inline-flex flex-col justify-center items-center rounded-lg cursor-pointer transition-all duration-200 w-full relative;}.file-picker-has-error{@apply border-[#d11e14];}.file-picker-error{@apply text-xs text-[#E7000B] font-normal;}.file-picker--default{@apply border border-[#E5F3FF] bg-white;}.file-picker--active{@apply border border-[#E5F3FF] bg-[#F4FAFF];}.file-picker--disabled{@apply border border-[#D6D7DC] bg-[#F4F4F6] opacity-60 cursor-not-allowed;}.file-picker__icon{@apply mb-3;}.file-picker__text-primary{@apply font-normal text-sm tracking-normal mb-1;}.file-picker__text-primary--default,.file-picker__text-primary--active{@apply text-[#1B223A];}.file-picker__text-primary--disabled{@apply text-[#A1A3AE];}.file-picker__text-primary-bold--default,.file-picker__text-primary-bold--active{@apply font-medium text-[#102BA5];}.file-picker__text-primary-bold--disabled{@apply font-medium text-[#A1A3AE];}.file-picker__text-secondary{@apply font-normal text-xs leading-[18px];}.file-picker__text-secondary--default,.file-picker__text-secondary--active{@apply text-[#6B7080];}.file-picker__text-secondary--disabled{@apply text-[#A1A3AE];}.file-picker__file-item{@apply p-4 border border-[#EFEFF1] rounded-lg bg-white flex items-start justify-between mb-1;}.file-picker__file-content{@apply flex gap-4;}.file-picker__file-info-title{@apply font-medium text-sm text-[#1B223A];}.file-picker__file-info-size{@apply text-[#1B223A] font-normal text-sm;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
8278
8278
  }
8279
8279
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkFilePicker, decorators: [{
8280
8280
  type: Component,
@@ -8289,7 +8289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
8289
8289
  useExisting: forwardRef(() => BkFilePicker),
8290
8290
  multi: true,
8291
8291
  },
8292
- ], template: "<div class=\"file-picker-wrapper\">\n <input\n #fileInput\n type=\"file\"\n [id]=\"id\"\n [name]=\"name\"\n [accept]=\"accept\"\n [multiple]=\"multi\"\n [disabled]=\"disable\"\n [required]=\"required\"\n class=\"file-picker__input\"\n (cancel)=\"onCancel()\"\n (change)=\"onFileChange($event)\"\n />\n\n <div\n class=\"file-picker\"\n [ngClass]=\"{\n 'file-picker--default': pickerState === 'default',\n 'file-picker--active': pickerState === 'active',\n 'file-picker--disabled': pickerState === 'disabled',\n 'file-picker-has-error': hasError\n }\"\n (click)=\"onContainerClick()\"\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop($event)\"\n role=\"button\"\n [attr.aria-disabled]=\"disable\"\n tabindex=\"0\"\n>\n <svg\n width=\"48\"\n height=\"48\"\n viewBox=\"0 0 48 48\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"file-picker__icon\">\n <rect\n x=\"3.57007\"\n y=\"3.56995\"\n width=\"40\"\n height=\"40\"\n rx=\"20\"\n [attr.fill]=\"pickerState === 'active' ? '#C7E2FF' : pickerState === 'disabled' ? '#F4F4F6' : '#F4F4F6'\"/>\n <rect\n x=\"3.57007\"\n y=\"3.56995\"\n width=\"40\"\n height=\"40\"\n rx=\"20\"\n [attr.stroke]=\"pickerState === 'active' ? '#E5F3FF' : pickerState === 'disabled' ? '#F9FAFA' : '#F9FAFA'\"\n stroke-width=\"7.14\"/>\n <g clip-path=\"url(#clip0_1_149094)\">\n <path\n d=\"M23.5702 20.2366V23.5699M23.5702 26.9032H23.5785M31.9035 23.5699C31.9035 28.1723 28.1725 31.9032 23.5702 31.9032C18.9678 31.9032 15.2368 28.1723 15.2368 23.5699C15.2368 18.9675 18.9678 15.2366 23.5702 15.2366C28.1725 15.2366 31.9035 18.9675 31.9035 23.5699Z\"\n [attr.stroke]=\"pickerState === 'active' ? '#1434CB' : pickerState === 'disabled' ? '#868997' : '#868997'\"\n stroke-width=\"1.66667\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_1_149094\">\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13.5701 13.5699)\"/>\n </clipPath>\n </defs>\n </svg>\n <p\n class=\"file-picker__text-primary\"\n [ngClass]=\"{\n 'file-picker__text-primary--default': pickerState === 'default',\n 'file-picker__text-primary--active': pickerState === 'active',\n 'file-picker__text-primary--disabled': pickerState === 'disabled'\n }\">\n <span\n [ngClass]=\"{\n 'file-picker__text-primary-bold--default': pickerState === 'default',\n 'file-picker__text-primary-bold--active': pickerState === 'active',\n 'file-picker__text-primary-bold--disabled': pickerState === 'disabled'\n }\">Click to upload</span>{{draggable ? ' or drag and drop' : '' }}\n </p>\n <p\n class=\"file-picker__text-secondary\"\n [ngClass]=\"{\n 'file-picker__text-secondary--default': pickerState === 'default',\n 'file-picker__text-secondary--active': pickerState === 'active',\n 'file-picker__text-secondary--disabled': pickerState === 'disabled'\n }\">{{description}}</p>\n </div>\n\n @if (hasError) {\n @if (errorMessage) {\n <p class=\"file-picker-error\">{{ errorMessage }}</p>\n }\n }\n</div>\n", styles: [".file-picker-wrapper{@apply relative w-full;}.file-picker__input{@apply absolute opacity-0 w-0 h-0 overflow-hidden pointer-events-none;}.file-picker{@apply py-4 px-6 inline-flex flex-col justify-center items-center rounded-lg cursor-pointer transition-all duration-200 w-full relative;}.file-picker-has-error{@apply border-[#d11e14];}.file-picker-error{@apply text-xs text-[#E7000B] font-normal;}.file-picker--default{@apply border border-[#E5F3FF] bg-white;}.file-picker--active{@apply border border-[#E5F3FF] bg-[#F4FAFF];}.file-picker--disabled{@apply border border-[#D6D7DC] bg-[#F4F4F6] opacity-60 cursor-not-allowed;}.file-picker__icon{@apply mb-3;}.file-picker__text-primary{@apply font-normal text-sm tracking-normal mb-1;}.file-picker__text-primary--default,.file-picker__text-primary--active{@apply text-[#1B223A];}.file-picker__text-primary--disabled{@apply text-[#A1A3AE];}.file-picker__text-primary-bold--default,.file-picker__text-primary-bold--active{@apply font-medium text-[#102BA5];}.file-picker__text-primary-bold--disabled{@apply font-medium text-[#A1A3AE];}.file-picker__text-secondary{@apply font-normal text-xs leading-[18px];}.file-picker__text-secondary--default,.file-picker__text-secondary--active{@apply text-[#6B7080];}.file-picker__text-secondary--disabled{@apply text-[#A1A3AE];}.file-picker__file-item{@apply p-4 border border-[#EFEFF1] rounded-lg bg-white flex items-start justify-between mb-1;}.file-picker__file-content{@apply flex gap-4;}.file-picker__file-info-title{@apply font-medium text-sm text-[#1B223A];}.file-picker__file-info-size{@apply text-[#1B223A] font-normal text-sm;}\n"] }]
8292
+ ], template: "<div class=\"file-picker-wrapper\">\r\n <input\r\n #fileInput\r\n type=\"file\"\r\n [id]=\"id\"\r\n [name]=\"name\"\r\n [accept]=\"accept\"\r\n [multiple]=\"multi\"\r\n [disabled]=\"disable\"\r\n [required]=\"required\"\r\n class=\"file-picker__input\"\r\n (cancel)=\"onCancel()\"\r\n (change)=\"onFileChange($event)\"\r\n />\r\n\r\n <div\r\n class=\"file-picker\"\r\n [ngClass]=\"{\r\n 'file-picker--default': pickerState === 'default',\r\n 'file-picker--active': pickerState === 'active',\r\n 'file-picker--disabled': pickerState === 'disabled',\r\n 'file-picker-has-error': hasError\r\n }\"\r\n (click)=\"onContainerClick()\"\r\n (dragover)=\"onDragOver($event)\"\r\n (drop)=\"onDrop($event)\"\r\n role=\"button\"\r\n [attr.aria-disabled]=\"disable\"\r\n tabindex=\"0\"\r\n>\r\n <svg\r\n width=\"48\"\r\n height=\"48\"\r\n viewBox=\"0 0 48 48\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"file-picker__icon\">\r\n <rect\r\n x=\"3.57007\"\r\n y=\"3.56995\"\r\n width=\"40\"\r\n height=\"40\"\r\n rx=\"20\"\r\n [attr.fill]=\"pickerState === 'active' ? '#C7E2FF' : pickerState === 'disabled' ? '#F4F4F6' : '#F4F4F6'\"/>\r\n <rect\r\n x=\"3.57007\"\r\n y=\"3.56995\"\r\n width=\"40\"\r\n height=\"40\"\r\n rx=\"20\"\r\n [attr.stroke]=\"pickerState === 'active' ? '#E5F3FF' : pickerState === 'disabled' ? '#F9FAFA' : '#F9FAFA'\"\r\n stroke-width=\"7.14\"/>\r\n <g clip-path=\"url(#clip0_1_149094)\">\r\n <path\r\n d=\"M23.5702 20.2366V23.5699M23.5702 26.9032H23.5785M31.9035 23.5699C31.9035 28.1723 28.1725 31.9032 23.5702 31.9032C18.9678 31.9032 15.2368 28.1723 15.2368 23.5699C15.2368 18.9675 18.9678 15.2366 23.5702 15.2366C28.1725 15.2366 31.9035 18.9675 31.9035 23.5699Z\"\r\n [attr.stroke]=\"pickerState === 'active' ? '#1434CB' : pickerState === 'disabled' ? '#868997' : '#868997'\"\r\n stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1_149094\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13.5701 13.5699)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <p\r\n class=\"file-picker__text-primary\"\r\n [ngClass]=\"{\r\n 'file-picker__text-primary--default': pickerState === 'default',\r\n 'file-picker__text-primary--active': pickerState === 'active',\r\n 'file-picker__text-primary--disabled': pickerState === 'disabled'\r\n }\">\r\n <span\r\n [ngClass]=\"{\r\n 'file-picker__text-primary-bold--default': pickerState === 'default',\r\n 'file-picker__text-primary-bold--active': pickerState === 'active',\r\n 'file-picker__text-primary-bold--disabled': pickerState === 'disabled'\r\n }\">Click to upload</span>{{draggable ? ' or drag and drop' : '' }}\r\n </p>\r\n <p\r\n class=\"file-picker__text-secondary\"\r\n [ngClass]=\"{\r\n 'file-picker__text-secondary--default': pickerState === 'default',\r\n 'file-picker__text-secondary--active': pickerState === 'active',\r\n 'file-picker__text-secondary--disabled': pickerState === 'disabled'\r\n }\">{{description}}</p>\r\n </div>\r\n\r\n @if (hasError) {\r\n @if (errorMessage) {\r\n <p class=\"file-picker-error\">{{ errorMessage }}</p>\r\n }\r\n }\r\n</div>\r\n", styles: [".file-picker-wrapper{@apply relative w-full;}.file-picker__input{@apply absolute opacity-0 w-0 h-0 overflow-hidden pointer-events-none;}.file-picker{@apply py-4 px-6 inline-flex flex-col justify-center items-center rounded-lg cursor-pointer transition-all duration-200 w-full relative;}.file-picker-has-error{@apply border-[#d11e14];}.file-picker-error{@apply text-xs text-[#E7000B] font-normal;}.file-picker--default{@apply border border-[#E5F3FF] bg-white;}.file-picker--active{@apply border border-[#E5F3FF] bg-[#F4FAFF];}.file-picker--disabled{@apply border border-[#D6D7DC] bg-[#F4F4F6] opacity-60 cursor-not-allowed;}.file-picker__icon{@apply mb-3;}.file-picker__text-primary{@apply font-normal text-sm tracking-normal mb-1;}.file-picker__text-primary--default,.file-picker__text-primary--active{@apply text-[#1B223A];}.file-picker__text-primary--disabled{@apply text-[#A1A3AE];}.file-picker__text-primary-bold--default,.file-picker__text-primary-bold--active{@apply font-medium text-[#102BA5];}.file-picker__text-primary-bold--disabled{@apply font-medium text-[#A1A3AE];}.file-picker__text-secondary{@apply font-normal text-xs leading-[18px];}.file-picker__text-secondary--default,.file-picker__text-secondary--active{@apply text-[#6B7080];}.file-picker__text-secondary--disabled{@apply text-[#A1A3AE];}.file-picker__file-item{@apply p-4 border border-[#EFEFF1] rounded-lg bg-white flex items-start justify-between mb-1;}.file-picker__file-content{@apply flex gap-4;}.file-picker__file-info-title{@apply font-medium text-sm text-[#1B223A];}.file-picker__file-info-size{@apply text-[#1B223A] font-normal text-sm;}\n"] }]
8293
8293
  }], propDecorators: { id: [{
8294
8294
  type: Input
8295
8295
  }], name: [{