@brickclay-org/ui 0.0.21 → 0.0.23
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.
- package/fesm2022/brickclay-org-ui.mjs +38 -18
- package/fesm2022/brickclay-org-ui.mjs.map +1 -1
- package/index.d.ts +5 -1
- package/package.json +1 -1
- package/src/lib/badge/badge.css +0 -10
- package/src/lib/checkbox/checkbox.css +8 -8
- package/src/lib/grid/components/grid/grid.css +105 -0
- package/src/lib/pill/pill.css +0 -2
- package/src/lib/radio/radio.css +15 -15
- package/src/lib/toggle/toggle.css +17 -0
- package/src/lib/ui-button/ui-button.css +22 -22
|
@@ -2308,7 +2308,7 @@ class ToggleComponent {
|
|
|
2308
2308
|
useExisting: forwardRef(() => ToggleComponent),
|
|
2309
2309
|
multi: true
|
|
2310
2310
|
}
|
|
2311
|
-
], ngImport: i0, template: "<div class=\"inline-flex items-center gap-2 cursor-pointer\" (click)=\"toggle()\">\r\n <button\r\n type=\"button\"\r\n role=\"switch\"\r\n [attr.aria-checked]=\"isChecked\"\r\n [disabled]=\"disabled\"\r\n class=\"toggle-base\"\r\n [ngClass]=\"toggleClass\"\r\n [class.toggle-on]=\"isChecked\"\r\n [class.toggle-off]=\"!isChecked\"\r\n [class.toggle-disabled]=\"disabled\"\r\n >\r\n <span\r\n class=\"toggle-knob\"\r\n [class.knob-on]=\"isChecked\"\r\n [class.knob-off]=\"!isChecked\"\r\n ></span>\r\n </button>\r\n @if (label){\r\n <span class=\"text-sm font-medium text-[#1B223A] select-none\" [class.opacity-70]=\"disabled\">\r\n {{ label }}\r\n </span>\r\n }\r\n</div>\r\n", styles: [".toggle-base{@apply relative inline-flex items-center rounded-full transition-colors duration-200 ease-in-out border-2 border-transparent;@apply focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1336EF] focus-visible:ring-offset-2;}.toggle-off{@apply bg-[#BBBDC5] hover:bg-[#A1A3AE];}.toggle-on{@apply bg-[#22973F] hover:bg-[#1E7735];}.toggle-disabled{@apply bg-[#D6D7DC] hover:bg-[#D6D7DC] cursor-not-allowed;}.toggle-knob{@apply pointer-events-none inline-block transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out;}.toggle-sm{@apply w-7;}.toggle-sm .toggle-knob{@apply h-3 w-3;}.toggle-sm .knob-on{@apply translate-x-3;}.toggle-sm .knob-off{@apply translate-x-0;}.toggle-md{@apply w-9;}.toggle-md .toggle-knob{@apply h-4 w-4;}.toggle-md .knob-on{@apply translate-x-4;}.toggle-md .knob-off{@apply translate-x-0;}.toggle-lg{@apply w-11;}.toggle-lg .toggle-knob{@apply h-5 w-5;}.toggle-lg .knob-on{@apply translate-x-5;}.toggle-lg .knob-off{@apply translate-x-0;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2311
|
+
], ngImport: i0, template: "<div class=\"inline-flex items-center gap-2 cursor-pointer\" (click)=\"toggle()\">\r\n <button\r\n type=\"button\"\r\n role=\"switch\"\r\n [attr.aria-checked]=\"isChecked\"\r\n [disabled]=\"disabled\"\r\n class=\"toggle-base\"\r\n [ngClass]=\"toggleClass\"\r\n [class.toggle-on]=\"isChecked\"\r\n [class.toggle-off]=\"!isChecked\"\r\n [class.toggle-disabled]=\"disabled\"\r\n >\r\n <span\r\n class=\"toggle-knob\"\r\n [class.knob-on]=\"isChecked\"\r\n [class.knob-off]=\"!isChecked\"\r\n ></span>\r\n </button>\r\n @if (label){\r\n <span class=\"text-sm font-medium text-[#1B223A] select-none\" [class.opacity-70]=\"disabled\">\r\n {{ label }}\r\n </span>\r\n }\r\n</div>\r\n", styles: [".toggle-base{@apply relative inline-flex items-center rounded-full transition-colors duration-200 ease-in-out border-2 border-transparent;@apply focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1336EF] focus-visible:ring-offset-2;}.toggle-off{@apply bg-[#BBBDC5] hover:bg-[#A1A3AE];}.toggle-on{@apply bg-[#22973F] hover:bg-[#1E7735];}.toggle-disabled{@apply bg-[#D6D7DC] hover:bg-[#D6D7DC] cursor-not-allowed;}.toggle-knob{@apply pointer-events-none inline-block transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out;}.toggle-sm{@apply w-7;}.toggle-sm .toggle-knob{@apply h-3 w-3;}.toggle-sm .knob-on{@apply translate-x-3;}.toggle-sm .knob-off{@apply translate-x-0;}.toggle-md{@apply w-9;}.toggle-md .toggle-knob{@apply h-4 w-4;}.toggle-md .knob-on{@apply translate-x-4;}.toggle-md .knob-off{@apply translate-x-0;}.toggle-lg{@apply w-11;}.toggle-lg .toggle-knob{@apply h-5 w-5;}.toggle-lg .knob-on{@apply translate-x-5;}.toggle-lg .knob-off{@apply translate-x-0;}.simulate-hover.toggle-off{@apply bg-[#A1A3AE];}.simulate-hover.toggle-on{@apply bg-[#1E7735];}.simulate-focus{@apply ring-2 ring-[#1336EF] ring-offset-2;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2312
2312
|
}
|
|
2313
2313
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
2314
2314
|
type: Component,
|
|
@@ -2318,7 +2318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2318
2318
|
useExisting: forwardRef(() => ToggleComponent),
|
|
2319
2319
|
multi: true
|
|
2320
2320
|
}
|
|
2321
|
-
], template: "<div class=\"inline-flex items-center gap-2 cursor-pointer\" (click)=\"toggle()\">\r\n <button\r\n type=\"button\"\r\n role=\"switch\"\r\n [attr.aria-checked]=\"isChecked\"\r\n [disabled]=\"disabled\"\r\n class=\"toggle-base\"\r\n [ngClass]=\"toggleClass\"\r\n [class.toggle-on]=\"isChecked\"\r\n [class.toggle-off]=\"!isChecked\"\r\n [class.toggle-disabled]=\"disabled\"\r\n >\r\n <span\r\n class=\"toggle-knob\"\r\n [class.knob-on]=\"isChecked\"\r\n [class.knob-off]=\"!isChecked\"\r\n ></span>\r\n </button>\r\n @if (label){\r\n <span class=\"text-sm font-medium text-[#1B223A] select-none\" [class.opacity-70]=\"disabled\">\r\n {{ label }}\r\n </span>\r\n }\r\n</div>\r\n", styles: [".toggle-base{@apply relative inline-flex items-center rounded-full transition-colors duration-200 ease-in-out border-2 border-transparent;@apply focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1336EF] focus-visible:ring-offset-2;}.toggle-off{@apply bg-[#BBBDC5] hover:bg-[#A1A3AE];}.toggle-on{@apply bg-[#22973F] hover:bg-[#1E7735];}.toggle-disabled{@apply bg-[#D6D7DC] hover:bg-[#D6D7DC] cursor-not-allowed;}.toggle-knob{@apply pointer-events-none inline-block transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out;}.toggle-sm{@apply w-7;}.toggle-sm .toggle-knob{@apply h-3 w-3;}.toggle-sm .knob-on{@apply translate-x-3;}.toggle-sm .knob-off{@apply translate-x-0;}.toggle-md{@apply w-9;}.toggle-md .toggle-knob{@apply h-4 w-4;}.toggle-md .knob-on{@apply translate-x-4;}.toggle-md .knob-off{@apply translate-x-0;}.toggle-lg{@apply w-11;}.toggle-lg .toggle-knob{@apply h-5 w-5;}.toggle-lg .knob-on{@apply translate-x-5;}.toggle-lg .knob-off{@apply translate-x-0;}\n"] }]
|
|
2321
|
+
], template: "<div class=\"inline-flex items-center gap-2 cursor-pointer\" (click)=\"toggle()\">\r\n <button\r\n type=\"button\"\r\n role=\"switch\"\r\n [attr.aria-checked]=\"isChecked\"\r\n [disabled]=\"disabled\"\r\n class=\"toggle-base\"\r\n [ngClass]=\"toggleClass\"\r\n [class.toggle-on]=\"isChecked\"\r\n [class.toggle-off]=\"!isChecked\"\r\n [class.toggle-disabled]=\"disabled\"\r\n >\r\n <span\r\n class=\"toggle-knob\"\r\n [class.knob-on]=\"isChecked\"\r\n [class.knob-off]=\"!isChecked\"\r\n ></span>\r\n </button>\r\n @if (label){\r\n <span class=\"text-sm font-medium text-[#1B223A] select-none\" [class.opacity-70]=\"disabled\">\r\n {{ label }}\r\n </span>\r\n }\r\n</div>\r\n", styles: [".toggle-base{@apply relative inline-flex items-center rounded-full transition-colors duration-200 ease-in-out border-2 border-transparent;@apply focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1336EF] focus-visible:ring-offset-2;}.toggle-off{@apply bg-[#BBBDC5] hover:bg-[#A1A3AE];}.toggle-on{@apply bg-[#22973F] hover:bg-[#1E7735];}.toggle-disabled{@apply bg-[#D6D7DC] hover:bg-[#D6D7DC] cursor-not-allowed;}.toggle-knob{@apply pointer-events-none inline-block transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out;}.toggle-sm{@apply w-7;}.toggle-sm .toggle-knob{@apply h-3 w-3;}.toggle-sm .knob-on{@apply translate-x-3;}.toggle-sm .knob-off{@apply translate-x-0;}.toggle-md{@apply w-9;}.toggle-md .toggle-knob{@apply h-4 w-4;}.toggle-md .knob-on{@apply translate-x-4;}.toggle-md .knob-off{@apply translate-x-0;}.toggle-lg{@apply w-11;}.toggle-lg .toggle-knob{@apply h-5 w-5;}.toggle-lg .knob-on{@apply translate-x-5;}.toggle-lg .knob-off{@apply translate-x-0;}.simulate-hover.toggle-off{@apply bg-[#A1A3AE];}.simulate-hover.toggle-on{@apply bg-[#1E7735];}.simulate-focus{@apply ring-2 ring-[#1336EF] ring-offset-2;}\n"] }]
|
|
2322
2322
|
}], propDecorators: { label: [{
|
|
2323
2323
|
type: Input
|
|
2324
2324
|
}], disabled: [{
|
|
@@ -2371,7 +2371,7 @@ class CheckboxComponent {
|
|
|
2371
2371
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
2372
2372
|
multi: true
|
|
2373
2373
|
}
|
|
2374
|
-
], ngImport: i0, template: "<div\r\n class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n (click)=\"toggle()\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"$event.preventDefault(); toggle()\"\r\n tabindex=\"0\"\r\n [attr.aria-disabled]=\"disabled\">\r\n <div\r\n class=\"relative flex items-center justify-center border-2 transition-all duration-200 ease-in-out rounded group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2\"\r\n [ngClass]=\"[\r\n checkboxClass,\r\n isChecked && !disabled ? 'bg-black border-black' : '',\r\n !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\r\n disabled && isChecked ? 'bg-gray-300 border-gray-300' : '',\r\n disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',\r\n disabled ? 'cursor-not-allowed' : ''\r\n ]\"\r\n >\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"3.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class=\"text-white pointer-events-none transition-opacity duration-200\"\r\n [class.opacity-0]=\"!isChecked\"\r\n [class.opacity-100]=\"isChecked\"\r\n >\r\n <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n </svg>\r\n </div>\r\n@if(label){\r\n <span\r\n [ngClass]=\"disabled ? 'text-gray-400' : ''\"\r\n class=\"font-medium text-xs text-[#1B223A] select-none {{labelClass}}\"\r\n >\r\n {{ label }}\r\n </span>\r\n}\r\n</div>\r\n", styles: [".xsm{@apply size-[14px];}.sm{@apply size-[16px];}.md{@apply size-[18px];}.lg{@apply size-[20px];}.xsm svg{@apply size-[10.5px];}.sm svg{@apply size-[12px];}.md svg{@apply size-[13.5px];}.lg svg{@apply size-[14px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2374
|
+
], ngImport: i0, template: "<div\r\n class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n (click)=\"toggle()\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"$event.preventDefault(); toggle()\"\r\n tabindex=\"0\"\r\n [attr.aria-disabled]=\"disabled\">\r\n <div\r\n class=\"relative flex items-center justify-center border-2 transition-all duration-200 ease-in-out rounded group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2 checkbox\"\r\n [ngClass]=\"[\r\n checkboxClass,\r\n isChecked && !disabled ? 'bg-black border-black' : '',\r\n !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\r\n disabled && isChecked ? 'bg-gray-300 border-gray-300' : '',\r\n disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',\r\n disabled ? 'cursor-not-allowed' : ''\r\n ]\"\r\n >\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"3.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class=\"text-white pointer-events-none transition-opacity duration-200\"\r\n [class.opacity-0]=\"!isChecked\"\r\n [class.opacity-100]=\"isChecked\"\r\n >\r\n <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n </svg>\r\n </div>\r\n@if(label){\r\n <span\r\n [ngClass]=\"disabled ? 'text-gray-400' : ''\"\r\n class=\"font-medium text-xs text-[#1B223A] select-none {{labelClass}}\"\r\n >\r\n {{ label }}\r\n </span>\r\n}\r\n</div>\r\n", styles: [".checkbox.xsm{@apply size-[14px];}.checkbox.sm{@apply size-[16px];}.checkbox.md{@apply size-[18px];}.checkbox.lg{@apply size-[20px];}.checkbox.xsm svg{@apply size-[10.5px];}.checkbox.sm svg{@apply size-[12px];}.checkbox.md svg{@apply size-[13.5px];}.checkbox.lg svg{@apply size-[14px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2375
2375
|
}
|
|
2376
2376
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
2377
2377
|
type: Component,
|
|
@@ -2381,7 +2381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2381
2381
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
2382
2382
|
multi: true
|
|
2383
2383
|
}
|
|
2384
|
-
], template: "<div\r\n class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n (click)=\"toggle()\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"$event.preventDefault(); toggle()\"\r\n tabindex=\"0\"\r\n [attr.aria-disabled]=\"disabled\">\r\n <div\r\n class=\"relative flex items-center justify-center border-2 transition-all duration-200 ease-in-out rounded group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2\"\r\n [ngClass]=\"[\r\n checkboxClass,\r\n isChecked && !disabled ? 'bg-black border-black' : '',\r\n !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\r\n disabled && isChecked ? 'bg-gray-300 border-gray-300' : '',\r\n disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',\r\n disabled ? 'cursor-not-allowed' : ''\r\n ]\"\r\n >\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"3.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class=\"text-white pointer-events-none transition-opacity duration-200\"\r\n [class.opacity-0]=\"!isChecked\"\r\n [class.opacity-100]=\"isChecked\"\r\n >\r\n <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n </svg>\r\n </div>\r\n@if(label){\r\n <span\r\n [ngClass]=\"disabled ? 'text-gray-400' : ''\"\r\n class=\"font-medium text-xs text-[#1B223A] select-none {{labelClass}}\"\r\n >\r\n {{ label }}\r\n </span>\r\n}\r\n</div>\r\n", styles: [".xsm{@apply size-[14px];}.sm{@apply size-[16px];}.md{@apply size-[18px];}.lg{@apply size-[20px];}.xsm svg{@apply size-[10.5px];}.sm svg{@apply size-[12px];}.md svg{@apply size-[13.5px];}.lg svg{@apply size-[14px];}\n"] }]
|
|
2384
|
+
], template: "<div\r\n class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n (click)=\"toggle()\"\r\n (keydown.enter)=\"toggle()\"\r\n (keydown.space)=\"$event.preventDefault(); toggle()\"\r\n tabindex=\"0\"\r\n [attr.aria-disabled]=\"disabled\">\r\n <div\r\n class=\"relative flex items-center justify-center border-2 transition-all duration-200 ease-in-out rounded group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2 checkbox\"\r\n [ngClass]=\"[\r\n checkboxClass,\r\n isChecked && !disabled ? 'bg-black border-black' : '',\r\n !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\r\n disabled && isChecked ? 'bg-gray-300 border-gray-300' : '',\r\n disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',\r\n disabled ? 'cursor-not-allowed' : ''\r\n ]\"\r\n >\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"3.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class=\"text-white pointer-events-none transition-opacity duration-200\"\r\n [class.opacity-0]=\"!isChecked\"\r\n [class.opacity-100]=\"isChecked\"\r\n >\r\n <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n </svg>\r\n </div>\r\n@if(label){\r\n <span\r\n [ngClass]=\"disabled ? 'text-gray-400' : ''\"\r\n class=\"font-medium text-xs text-[#1B223A] select-none {{labelClass}}\"\r\n >\r\n {{ label }}\r\n </span>\r\n}\r\n</div>\r\n", styles: [".checkbox.xsm{@apply size-[14px];}.checkbox.sm{@apply size-[16px];}.checkbox.md{@apply size-[18px];}.checkbox.lg{@apply size-[20px];}.checkbox.xsm svg{@apply size-[10.5px];}.checkbox.sm svg{@apply size-[12px];}.checkbox.md svg{@apply size-[13.5px];}.checkbox.lg svg{@apply size-[14px];}\n"] }]
|
|
2385
2385
|
}], propDecorators: { checkboxClass: [{
|
|
2386
2386
|
type: Input
|
|
2387
2387
|
}], label: [{
|
|
@@ -2435,9 +2435,9 @@ class RadioComponent {
|
|
|
2435
2435
|
{
|
|
2436
2436
|
provide: NG_VALUE_ACCESSOR,
|
|
2437
2437
|
useExisting: forwardRef(() => RadioComponent),
|
|
2438
|
-
multi: true
|
|
2439
|
-
}
|
|
2440
|
-
], ngImport: i0, template: "<div\r\n class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n (click)=\"select()\"\r\n (keydown.enter)=\"select()\"\r\n (keydown.space)=\"$event.preventDefault(); select()\"\r\n tabindex=\"0\"\r\n [attr.aria-disabled]=\"disabled\">\r\n\r\n <div\r\n class=\"relative flex items-center justify-center rounded-full border-2 transition-all duration-200 flex-shrink-0
|
|
2438
|
+
multi: true,
|
|
2439
|
+
},
|
|
2440
|
+
], ngImport: i0, template: "<div\r\n class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n (click)=\"select()\"\r\n (keydown.enter)=\"select()\"\r\n (keydown.space)=\"$event.preventDefault(); select()\"\r\n tabindex=\"0\"\r\n [attr.aria-disabled]=\"disabled\">\r\n\r\n <div\r\n class=\"relative flex items-center justify-center rounded-full border-2 transition-all duration-200 flex-shrink-0 group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2 radio\"\r\n [ngClass]=\"[\r\n radioClass,\r\n !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\r\n\r\n variant === 'dot' && isChecked && !disabled ? 'border-black bg-white' : '',\r\n\r\n variant === 'tick' && isChecked && !disabled ? 'bg-black border-black' : '',\r\n\r\n disabled && isChecked && variant === 'tick' ? 'bg-gray-300 border-gray-300' : '',\r\n disabled && isChecked && variant === 'dot' ? 'border-gray-300 bg-gray-50' : '',\r\n disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',\r\n disabled ? 'cursor-not-allowed' : ''\r\n ]\"\r\n >\r\n@if(variant === 'dot'){\r\n <span\r\n class=\"rounded-full bg-black transition-transform duration-200 transform dot\"\r\n [class.scale-0]=\"!isChecked\"\r\n [class.scale-100]=\"isChecked\"\r\n [class.bg-gray-400]=\"disabled\"\r\n ></span>\r\n}\r\n @if (variant === 'tick'){\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"3.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class=\"text-white pointer-events-none transition-opacity duration-200 tick\"\r\n [class.opacity-0]=\"!isChecked\"\r\n [class.opacity-100]=\"isChecked\"\r\n\r\n >\r\n <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n </svg>\r\n }\r\n </div>\r\n\r\n @if(label) {\r\n <span class=\"font-medium text-xs text-[#1B223A] select-none {{labelClass}}\"\r\n [ngClass]=\"disabled ? 'text-gray-400' : ''\">\r\n {{ label }}\r\n </span>\r\n }\r\n</div>\r\n", styles: [".radio.xsm{@apply size-[14px];}.radio.sm{@apply size-[16px];}.radio.md{@apply size-[18px];}.radio.lg{@apply size-[19px];}.radio.xsm .dot{@apply size-[6px];}.radio.sm .dot{@apply size-[8px];}.radio.md .dot{@apply size-[10px];}.radio.lg .dot{@apply size-[11px];}.radio.xsm .tick{@apply size-[9px];}.radio.sm .tick{@apply size-[10px];}.radio.md .tick{@apply size-[12px];}.radio.lg .tick{@apply size-[14px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
2441
2441
|
}
|
|
2442
2442
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RadioComponent, decorators: [{
|
|
2443
2443
|
type: Component,
|
|
@@ -2445,9 +2445,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2445
2445
|
{
|
|
2446
2446
|
provide: NG_VALUE_ACCESSOR,
|
|
2447
2447
|
useExisting: forwardRef(() => RadioComponent),
|
|
2448
|
-
multi: true
|
|
2449
|
-
}
|
|
2450
|
-
], template: "<div\r\n class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n (click)=\"select()\"\r\n (keydown.enter)=\"select()\"\r\n (keydown.space)=\"$event.preventDefault(); select()\"\r\n tabindex=\"0\"\r\n [attr.aria-disabled]=\"disabled\">\r\n\r\n <div\r\n class=\"relative flex items-center justify-center rounded-full border-2 transition-all duration-200 flex-shrink-0
|
|
2448
|
+
multi: true,
|
|
2449
|
+
},
|
|
2450
|
+
], template: "<div\r\n class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n (click)=\"select()\"\r\n (keydown.enter)=\"select()\"\r\n (keydown.space)=\"$event.preventDefault(); select()\"\r\n tabindex=\"0\"\r\n [attr.aria-disabled]=\"disabled\">\r\n\r\n <div\r\n class=\"relative flex items-center justify-center rounded-full border-2 transition-all duration-200 flex-shrink-0 group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2 radio\"\r\n [ngClass]=\"[\r\n radioClass,\r\n !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\r\n\r\n variant === 'dot' && isChecked && !disabled ? 'border-black bg-white' : '',\r\n\r\n variant === 'tick' && isChecked && !disabled ? 'bg-black border-black' : '',\r\n\r\n disabled && isChecked && variant === 'tick' ? 'bg-gray-300 border-gray-300' : '',\r\n disabled && isChecked && variant === 'dot' ? 'border-gray-300 bg-gray-50' : '',\r\n disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',\r\n disabled ? 'cursor-not-allowed' : ''\r\n ]\"\r\n >\r\n@if(variant === 'dot'){\r\n <span\r\n class=\"rounded-full bg-black transition-transform duration-200 transform dot\"\r\n [class.scale-0]=\"!isChecked\"\r\n [class.scale-100]=\"isChecked\"\r\n [class.bg-gray-400]=\"disabled\"\r\n ></span>\r\n}\r\n @if (variant === 'tick'){\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"3.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class=\"text-white pointer-events-none transition-opacity duration-200 tick\"\r\n [class.opacity-0]=\"!isChecked\"\r\n [class.opacity-100]=\"isChecked\"\r\n\r\n >\r\n <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n </svg>\r\n }\r\n </div>\r\n\r\n @if(label) {\r\n <span class=\"font-medium text-xs text-[#1B223A] select-none {{labelClass}}\"\r\n [ngClass]=\"disabled ? 'text-gray-400' : ''\">\r\n {{ label }}\r\n </span>\r\n }\r\n</div>\r\n", styles: [".radio.xsm{@apply size-[14px];}.radio.sm{@apply size-[16px];}.radio.md{@apply size-[18px];}.radio.lg{@apply size-[19px];}.radio.xsm .dot{@apply size-[6px];}.radio.sm .dot{@apply size-[8px];}.radio.md .dot{@apply size-[10px];}.radio.lg .dot{@apply size-[11px];}.radio.xsm .tick{@apply size-[9px];}.radio.sm .tick{@apply size-[10px];}.radio.md .tick{@apply size-[12px];}.radio.lg .tick{@apply size-[14px];}\n"] }]
|
|
2451
2451
|
}], propDecorators: { radioClass: [{
|
|
2452
2452
|
type: Input
|
|
2453
2453
|
}], label: [{
|
|
@@ -2533,11 +2533,11 @@ class BadgeComponent {
|
|
|
2533
2533
|
this.clicked.emit(this.label);
|
|
2534
2534
|
}
|
|
2535
2535
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2536
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BadgeComponent, isStandalone: true, selector: "bk-badge", inputs: { label: "label", variant: "variant", color: "color", size: "size", dot: "dot", removable: "removable", customClass: "customClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<span [className]=\"containerClasses\">\r\n\r\n @if (dot === 'left') {\r\n <span class=\"dot\"></span>\r\n }\r\n\r\n <span>{{ label }}</span>\r\n\r\n @if (dot === 'right') {\r\n <span class=\"dot\"></span>\r\n }\r\n\r\n @if (removable) {\r\n <button\r\n (click)=\"onRemove($event)\"\r\n class=\"badge-close\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n </svg>\r\n</button>\r\n }\r\n</span>\r\n", styles: [".badge{@apply inline-flex items-center justify-center font-medium border transition-colors duration-200 cursor-default gap-1.5 rounded-[4px];}.
|
|
2536
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BadgeComponent, isStandalone: true, selector: "bk-badge", inputs: { label: "label", variant: "variant", color: "color", size: "size", dot: "dot", removable: "removable", customClass: "customClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<span [className]=\"containerClasses\">\r\n\r\n @if (dot === 'left') {\r\n <span class=\"dot\"></span>\r\n }\r\n\r\n <span>{{ label }}</span>\r\n\r\n @if (dot === 'right') {\r\n <span class=\"dot\"></span>\r\n }\r\n\r\n @if (removable) {\r\n <button\r\n (click)=\"onRemove($event)\"\r\n class=\"badge-close\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n </svg>\r\n</button>\r\n }\r\n</span>\r\n", styles: [".badge{@apply inline-flex items-center justify-center font-medium border transition-colors duration-200 cursor-default gap-1.5 rounded-[4px];}.badge-xsm{@apply px-2 py-0.5 text-[10px] leading-[14px];}.badge-sm{@apply px-2 py-0.5 text-xs leading-[18px];}.badge-md{@apply px-2 py-0.5 text-sm;}.badge-lg{@apply px-3 py-1 text-sm;}.dot{@apply rounded-full size-1.5 flex-shrink-0 flex-grow-0 bg-current;}.badge-close{@apply flex items-center justify-center rounded-full text-inherit transition-colors;}.badge-xsm .badge-close,.badge-sm .badge-close{@apply w-3 h-3;}.badge-md .badge-close,.badge-lg .badge-close{@apply w-3.5 h-3.5;}.Gray-Solid{@apply bg-[#6B7080] border-[#6B7080] text-white;}.Primary-Solid{@apply bg-[#294FFF] border-[#294FFF] text-white;}.Error-Solid{@apply bg-[#FA727A] border-[#FA727A] text-[#4C0513];}.Warning-Solid{@apply bg-[#FA9E3A] border-[#FA9E3A] text-[#461C04];}.Success-Solid{@apply bg-[#57D175] border-[#57D175] text-[#461C04];}.Success-Solid .dot{@apply bg-[#082B13];}.Purple-Solid{@apply bg-[#CE8EF2] border-[#CE8EF2] text-[#461C04];}.Cyan-Solid{@apply bg-[#3FC2F1] border-[#3FC2F1] text-[#461C04];}.Gray-Light{@apply bg-[#F4F4F6] border-transparent text-[#363C51];}.Primary-Light{@apply bg-[#E5F3FF] border-transparent text-[#1434CB];}.Error-Light{@apply bg-[#FFF1F1] border-transparent text-[#CB1432];}.Warning-Light{@apply bg-[#FFEED7] border-transparent text-[#A04C02];}.Success-Light{@apply bg-[#F1FCF3] border-transparent text-[#1E7735];}.Purple-Light{@apply bg-[#F6EAFD] border-transparent text-[#9130C0];}.Cyan-Light{@apply bg-[#F1FAFE] border-transparent text-[#096E9B];}.Gray-Outline{@apply bg-[#F4F4F6] border-[#BBBDC5] text-[#363C51];}.Primary-Outline{@apply bg-[#E5F3FF] border-[#3F71FF] text-[#1434CB];}.Error-Outline{@apply bg-[#FFF1F1] border-[#FA727A] text-[#CB1432];}.Warning-Outline{@apply bg-[#FFEED7] border-[#FBAE58] text-[#A04C02];}.Success-Outline{@apply bg-[#F1FCF3] border-[#57D175] text-[#1E7735];}.Purple-Outline{@apply bg-[#F6EAFD] border-[#CE8EF2] text-[#9130C0];}.Cyan-Outline{@apply bg-[#F1FAFE] border-[#3FC2F1] text-[#096E9B];}.Gray-Transparent{@apply bg-transparent border-[#BBBDC5] text-[#363C51];}.Primary-Transparent{@apply bg-transparent border-[#3F71FF] text-[#1434CB];}.Error-Transparent{@apply bg-transparent border-[#FA727A] text-[#CB1432];}.Warning-Transparent{@apply bg-transparent border-[#FBAE58] text-[#A04C02];}.Success-Transparent{@apply bg-transparent border-[#57D175] text-[#1E7735];}.Purple-Transparent{@apply bg-transparent border-[#CE8EF2] text-[#9130C0];}.Cyan-Transparent{@apply bg-transparent border-[#3FC2F1] text-[#096E9B];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
2537
2537
|
}
|
|
2538
2538
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
2539
2539
|
type: Component,
|
|
2540
|
-
args: [{ selector: 'bk-badge', standalone: true, imports: [CommonModule], template: "<span [className]=\"containerClasses\">\r\n\r\n @if (dot === 'left') {\r\n <span class=\"dot\"></span>\r\n }\r\n\r\n <span>{{ label }}</span>\r\n\r\n @if (dot === 'right') {\r\n <span class=\"dot\"></span>\r\n }\r\n\r\n @if (removable) {\r\n <button\r\n (click)=\"onRemove($event)\"\r\n class=\"badge-close\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n </svg>\r\n</button>\r\n }\r\n</span>\r\n", styles: [".badge{@apply inline-flex items-center justify-center font-medium border transition-colors duration-200 cursor-default gap-1.5 rounded-[4px];}.
|
|
2540
|
+
args: [{ selector: 'bk-badge', standalone: true, imports: [CommonModule], template: "<span [className]=\"containerClasses\">\r\n\r\n @if (dot === 'left') {\r\n <span class=\"dot\"></span>\r\n }\r\n\r\n <span>{{ label }}</span>\r\n\r\n @if (dot === 'right') {\r\n <span class=\"dot\"></span>\r\n }\r\n\r\n @if (removable) {\r\n <button\r\n (click)=\"onRemove($event)\"\r\n class=\"badge-close\"> <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n </svg>\r\n</button>\r\n }\r\n</span>\r\n", styles: [".badge{@apply inline-flex items-center justify-center font-medium border transition-colors duration-200 cursor-default gap-1.5 rounded-[4px];}.badge-xsm{@apply px-2 py-0.5 text-[10px] leading-[14px];}.badge-sm{@apply px-2 py-0.5 text-xs leading-[18px];}.badge-md{@apply px-2 py-0.5 text-sm;}.badge-lg{@apply px-3 py-1 text-sm;}.dot{@apply rounded-full size-1.5 flex-shrink-0 flex-grow-0 bg-current;}.badge-close{@apply flex items-center justify-center rounded-full text-inherit transition-colors;}.badge-xsm .badge-close,.badge-sm .badge-close{@apply w-3 h-3;}.badge-md .badge-close,.badge-lg .badge-close{@apply w-3.5 h-3.5;}.Gray-Solid{@apply bg-[#6B7080] border-[#6B7080] text-white;}.Primary-Solid{@apply bg-[#294FFF] border-[#294FFF] text-white;}.Error-Solid{@apply bg-[#FA727A] border-[#FA727A] text-[#4C0513];}.Warning-Solid{@apply bg-[#FA9E3A] border-[#FA9E3A] text-[#461C04];}.Success-Solid{@apply bg-[#57D175] border-[#57D175] text-[#461C04];}.Success-Solid .dot{@apply bg-[#082B13];}.Purple-Solid{@apply bg-[#CE8EF2] border-[#CE8EF2] text-[#461C04];}.Cyan-Solid{@apply bg-[#3FC2F1] border-[#3FC2F1] text-[#461C04];}.Gray-Light{@apply bg-[#F4F4F6] border-transparent text-[#363C51];}.Primary-Light{@apply bg-[#E5F3FF] border-transparent text-[#1434CB];}.Error-Light{@apply bg-[#FFF1F1] border-transparent text-[#CB1432];}.Warning-Light{@apply bg-[#FFEED7] border-transparent text-[#A04C02];}.Success-Light{@apply bg-[#F1FCF3] border-transparent text-[#1E7735];}.Purple-Light{@apply bg-[#F6EAFD] border-transparent text-[#9130C0];}.Cyan-Light{@apply bg-[#F1FAFE] border-transparent text-[#096E9B];}.Gray-Outline{@apply bg-[#F4F4F6] border-[#BBBDC5] text-[#363C51];}.Primary-Outline{@apply bg-[#E5F3FF] border-[#3F71FF] text-[#1434CB];}.Error-Outline{@apply bg-[#FFF1F1] border-[#FA727A] text-[#CB1432];}.Warning-Outline{@apply bg-[#FFEED7] border-[#FBAE58] text-[#A04C02];}.Success-Outline{@apply bg-[#F1FCF3] border-[#57D175] text-[#1E7735];}.Purple-Outline{@apply bg-[#F6EAFD] border-[#CE8EF2] text-[#9130C0];}.Cyan-Outline{@apply bg-[#F1FAFE] border-[#3FC2F1] text-[#096E9B];}.Gray-Transparent{@apply bg-transparent border-[#BBBDC5] text-[#363C51];}.Primary-Transparent{@apply bg-transparent border-[#3F71FF] text-[#1434CB];}.Error-Transparent{@apply bg-transparent border-[#FA727A] text-[#CB1432];}.Warning-Transparent{@apply bg-transparent border-[#FBAE58] text-[#A04C02];}.Success-Transparent{@apply bg-transparent border-[#57D175] text-[#1E7735];}.Purple-Transparent{@apply bg-transparent border-[#CE8EF2] text-[#9130C0];}.Cyan-Transparent{@apply bg-transparent border-[#3FC2F1] text-[#096E9B];}\n"] }]
|
|
2541
2541
|
}], propDecorators: { label: [{
|
|
2542
2542
|
type: Input
|
|
2543
2543
|
}], variant: [{
|
|
@@ -2611,11 +2611,11 @@ class UiButton {
|
|
|
2611
2611
|
return `btn ${variantClass} ${this.size} ${this.buttonClass}`;
|
|
2612
2612
|
}
|
|
2613
2613
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UiButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2614
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: UiButton, isStandalone: true, selector: "bk-button", inputs: { variant: "variant", size: "size", label: "label", leftIcon: "leftIcon", rightIcon: "rightIcon", iconAlt: "iconAlt", type: "type", loading: "loading", disabled: "disabled", buttonClass: "buttonClass", textClass: "textClass", spinnerClass: "spinnerClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\r\n [attr.type]=\"type\"\r\n [class]=\"buttonClasses\"\r\n [disabled]=\"disabled || loading\"\r\n (click)=\"onClick($event)\"\r\n>\r\n @if (leftIcon) {\r\n <img [src]=\"leftIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n }\r\n\r\n @if (label) {\r\n <span [class]=\"textClass\">\r\n {{ label }}\r\n </span>\r\n }\r\n @if (loading) {\r\n <span [class]=\"spinnerClass\" class=\"spinner\"></span>\r\n }\r\n\r\n\r\n @if (rightIcon) {\r\n <img [src]=\"rightIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n }\r\n\r\n</button>\r\n", styles: [".btn{@apply border rounded transition-colors duration-200 cursor-pointer;}.btn-primary{@apply font-medium flex justify-center gap-2 items-center bg-black text-white focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#242424];}.btn-primary.xxl{@apply gap-3;}.btn-secondary{@apply font-medium flex justify-center gap-2 items-center bg-white text-[#6B7080] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.xxsm{@apply px-2 py-1 text-xs leading-[18px];}.xsm{@apply px-3 py-2 text-xs leading-[18px];}.sm{@apply px-[14px] py-2 text-sm;}.md{@apply px-4 py-2.5 text-sm;}.lg{@apply px-[18px] py-2.5 text-base;}.xl{@apply px-5 py-3 text-base;}.xxl{@apply px-7 py-4 text-lg leading-[26px];}.xxsm .icon{@apply size-[11px];}.xsm .icon{@apply size-[15px];}.sm .icon,.md .icon,.lg .icon,.xl .icon{@apply size-4;}.xxl .icon{@apply size-5;}.spinner{@apply shrink-0 border-t-transparent rounded-full animate-spin border-current;}.xxsm .spinner{@apply size-[14px] border-[1.5px];}.xsm .spinner,.sm .spinner,.md .spinner,.lg .spinner,.xl .spinner{@apply size-[15px] border-[1.5px];}.xxl .spinner{@apply size-[24px] border-[2.34px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
2614
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: UiButton, isStandalone: true, selector: "bk-button", inputs: { variant: "variant", size: "size", label: "label", leftIcon: "leftIcon", rightIcon: "rightIcon", iconAlt: "iconAlt", type: "type", loading: "loading", disabled: "disabled", buttonClass: "buttonClass", textClass: "textClass", spinnerClass: "spinnerClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\r\n [attr.type]=\"type\"\r\n [class]=\"buttonClasses\"\r\n [disabled]=\"disabled || loading\"\r\n (click)=\"onClick($event)\"\r\n>\r\n @if (leftIcon) {\r\n <img [src]=\"leftIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n }\r\n\r\n @if (label) {\r\n <span [class]=\"textClass\">\r\n {{ label }}\r\n </span>\r\n }\r\n @if (loading) {\r\n <span [class]=\"spinnerClass\" class=\"spinner\"></span>\r\n }\r\n\r\n\r\n @if (rightIcon) {\r\n <img [src]=\"rightIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n }\r\n\r\n</button>\r\n", styles: [".btn{@apply border rounded transition-colors duration-200 cursor-pointer;}.btn-primary{@apply font-medium flex justify-center gap-2 items-center bg-black text-white focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#242424];}.btn-primary.xxl{@apply gap-3;}.btn-secondary{@apply font-medium flex justify-center gap-2 items-center bg-white text-[#6B7080] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.btn.xxsm{@apply px-2 py-1 text-xs leading-[18px];}.btn.xsm{@apply px-3 py-2 text-xs leading-[18px];}.btn.sm{@apply px-[14px] py-2 text-sm;}.btn.md{@apply px-4 py-2.5 text-sm;}.btn.lg{@apply px-[18px] py-2.5 text-base;}.btn.xl{@apply px-5 py-3 text-base;}.btn.xxl{@apply px-7 py-4 text-lg leading-[26px];}.btn.xxsm .icon{@apply size-[11px];}.btn.xsm .icon{@apply size-[15px];}.btn.sm .icon,.btn.md .icon,.btn.lg .icon,.btn.xl .icon{@apply size-4;}.btn.xxl .icon{@apply size-5;}.btn.spinner{@apply shrink-0 border-t-transparent rounded-full animate-spin border-current;}.btn.xxsm .spinner{@apply size-[14px] border-[1.5px];}.btn.xsm .spinner,.btn.sm .spinner,.btn.md .spinner,.btn.lg .spinner,.btn.xl .spinner{@apply size-[15px] border-[1.5px];}.btn.xxl .spinner{@apply size-[24px] border-[2.34px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
2615
2615
|
}
|
|
2616
2616
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UiButton, decorators: [{
|
|
2617
2617
|
type: Component,
|
|
2618
|
-
args: [{ selector: 'bk-button', standalone: true, imports: [CommonModule], template: "<button\r\n [attr.type]=\"type\"\r\n [class]=\"buttonClasses\"\r\n [disabled]=\"disabled || loading\"\r\n (click)=\"onClick($event)\"\r\n>\r\n @if (leftIcon) {\r\n <img [src]=\"leftIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n }\r\n\r\n @if (label) {\r\n <span [class]=\"textClass\">\r\n {{ label }}\r\n </span>\r\n }\r\n @if (loading) {\r\n <span [class]=\"spinnerClass\" class=\"spinner\"></span>\r\n }\r\n\r\n\r\n @if (rightIcon) {\r\n <img [src]=\"rightIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n }\r\n\r\n</button>\r\n", styles: [".btn{@apply border rounded transition-colors duration-200 cursor-pointer;}.btn-primary{@apply font-medium flex justify-center gap-2 items-center bg-black text-white focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#242424];}.btn-primary.xxl{@apply gap-3;}.btn-secondary{@apply font-medium flex justify-center gap-2 items-center bg-white text-[#6B7080] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.xxsm{@apply px-2 py-1 text-xs leading-[18px];}.xsm{@apply px-3 py-2 text-xs leading-[18px];}.sm{@apply px-[14px] py-2 text-sm;}.md{@apply px-4 py-2.5 text-sm;}.lg{@apply px-[18px] py-2.5 text-base;}.xl{@apply px-5 py-3 text-base;}.xxl{@apply px-7 py-4 text-lg leading-[26px];}.xxsm .icon{@apply size-[11px];}.xsm .icon{@apply size-[15px];}.sm .icon,.md .icon,.lg .icon,.xl .icon{@apply size-4;}.xxl .icon{@apply size-5;}.spinner{@apply shrink-0 border-t-transparent rounded-full animate-spin border-current;}.xxsm .spinner{@apply size-[14px] border-[1.5px];}.xsm .spinner,.sm .spinner,.md .spinner,.lg .spinner,.xl .spinner{@apply size-[15px] border-[1.5px];}.xxl .spinner{@apply size-[24px] border-[2.34px];}\n"] }]
|
|
2618
|
+
args: [{ selector: 'bk-button', standalone: true, imports: [CommonModule], template: "<button\r\n [attr.type]=\"type\"\r\n [class]=\"buttonClasses\"\r\n [disabled]=\"disabled || loading\"\r\n (click)=\"onClick($event)\"\r\n>\r\n @if (leftIcon) {\r\n <img [src]=\"leftIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n }\r\n\r\n @if (label) {\r\n <span [class]=\"textClass\">\r\n {{ label }}\r\n </span>\r\n }\r\n @if (loading) {\r\n <span [class]=\"spinnerClass\" class=\"spinner\"></span>\r\n }\r\n\r\n\r\n @if (rightIcon) {\r\n <img [src]=\"rightIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n }\r\n\r\n</button>\r\n", styles: [".btn{@apply border rounded transition-colors duration-200 cursor-pointer;}.btn-primary{@apply font-medium flex justify-center gap-2 items-center bg-black text-white focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#242424];}.btn-primary.xxl{@apply gap-3;}.btn-secondary{@apply font-medium flex justify-center gap-2 items-center bg-white text-[#6B7080] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.btn.xxsm{@apply px-2 py-1 text-xs leading-[18px];}.btn.xsm{@apply px-3 py-2 text-xs leading-[18px];}.btn.sm{@apply px-[14px] py-2 text-sm;}.btn.md{@apply px-4 py-2.5 text-sm;}.btn.lg{@apply px-[18px] py-2.5 text-base;}.btn.xl{@apply px-5 py-3 text-base;}.btn.xxl{@apply px-7 py-4 text-lg leading-[26px];}.btn.xxsm .icon{@apply size-[11px];}.btn.xsm .icon{@apply size-[15px];}.btn.sm .icon,.btn.md .icon,.btn.lg .icon,.btn.xl .icon{@apply size-4;}.btn.xxl .icon{@apply size-5;}.btn.spinner{@apply shrink-0 border-t-transparent rounded-full animate-spin border-current;}.btn.xxsm .spinner{@apply size-[14px] border-[1.5px];}.btn.xsm .spinner,.btn.sm .spinner,.btn.md .spinner,.btn.lg .spinner,.btn.xl .spinner{@apply size-[15px] border-[1.5px];}.btn.xxl .spinner{@apply size-[24px] border-[2.34px];}\n"] }]
|
|
2619
2619
|
}], propDecorators: { variant: [{
|
|
2620
2620
|
type: Input
|
|
2621
2621
|
}], size: [{
|
|
@@ -2766,6 +2766,10 @@ class Textarea {
|
|
|
2766
2766
|
errorMessage = '';
|
|
2767
2767
|
trimWhiteSpaces = false;
|
|
2768
2768
|
eventType = 'input';
|
|
2769
|
+
input = new EventEmitter();
|
|
2770
|
+
change = new EventEmitter();
|
|
2771
|
+
blur = new EventEmitter();
|
|
2772
|
+
focus = new EventEmitter();
|
|
2769
2773
|
value = '';
|
|
2770
2774
|
isDisabled = false;
|
|
2771
2775
|
// --- ControlValueAccessor ---
|
|
@@ -2796,7 +2800,6 @@ class Textarea {
|
|
|
2796
2800
|
return this.control?.errors;
|
|
2797
2801
|
}
|
|
2798
2802
|
get showError() {
|
|
2799
|
-
debugger;
|
|
2800
2803
|
if (this.hasError)
|
|
2801
2804
|
return true;
|
|
2802
2805
|
if (!this.control)
|
|
@@ -2833,6 +2836,15 @@ class Textarea {
|
|
|
2833
2836
|
// Always mark as touched on blur/focus
|
|
2834
2837
|
if (event.type === 'blur' || event.type === 'focus')
|
|
2835
2838
|
this.onTouched();
|
|
2839
|
+
// ---- Emit component outputs ----
|
|
2840
|
+
if (event.type === 'input')
|
|
2841
|
+
this.input.emit(event);
|
|
2842
|
+
if (event.type === 'change')
|
|
2843
|
+
this.change.emit(event);
|
|
2844
|
+
if (event.type === 'blur')
|
|
2845
|
+
this.blur.emit(event);
|
|
2846
|
+
if (event.type === 'focus')
|
|
2847
|
+
this.focus.emit(event);
|
|
2836
2848
|
}
|
|
2837
2849
|
writeValue(value) {
|
|
2838
2850
|
this.value = value ?? '';
|
|
@@ -2847,7 +2859,7 @@ class Textarea {
|
|
|
2847
2859
|
this.isDisabled = isDisabled;
|
|
2848
2860
|
}
|
|
2849
2861
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Textarea, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2850
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Textarea, isStandalone: true, selector: "bk-textarea", inputs: { name: "name", id: "id", label: "label", placeholder: "placeholder", rows: "rows", hint: "hint", required: "required", maxLength: "maxLength", hasError: "hasError", errorMessage: "errorMessage", trimWhiteSpaces: "trimWhiteSpaces", eventType: "eventType" }, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5 w-full\">\r\n\r\n @if (label) {\r\n <label\r\n class=\"text-sm font-medium text-[#141414] block\" [attr.for]=\"effectiveId\">\r\n {{ label }}\r\n @if (required) {\r\n <span class=\"text-[#E7000B] ml-0.5\">*</span>\r\n }\r\n </label>\r\n }\r\n\r\n <div class=\"relative\">\r\n <textarea\r\n [id]=\"effectiveId\"\r\n [attr.name]=\"name\"\r\n [value]=\"value\"\r\n (input)=\"handleEvent($event)\"\r\n (change)=\"handleEvent($event)\"\r\n (blur)=\"handleEvent($event)\"\r\n (focus)=\"handleEvent($event)\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"isDisabled\"\r\n [attr.maxlength]=\"maxLength\"\r\n rows=\"{{rows}}\"\r\n class=\"\r\n w-full\r\n px-3 py-2.5\r\n text-sm\r\n border border-[#E3E3E7] rounded-[4px]\r\n outline-none\r\n transition-colors duration-200\r\n bg-white resize-y\r\n placeholder:text-[#6B7080]\r\n \"\r\n [ngClass]=\"{\r\n 'border-[#FA727A] text-[#141414]': hasError && !isDisabled,\r\n\r\n 'focus:border-[#6B7080] text-[#141414]': !hasError && !isDisabled,\r\n\r\n 'bg-[#F4F4F6] text-[#A1A3AE] border-[#E3E3E7] cursor-not-allowed': isDisabled\r\n }\"\r\n ></textarea>\r\n </div>\r\n\r\n <div class=\"flex justify-between items-start font-normal text-sm\">\r\n\r\n <div class=\"flex-1\">\r\n @if (showError) {\r\n <span class=\"text-[#F34050]\">\r\n {{ errorMessage }}\r\n </span>\r\n } @else if (hint) {\r\n <span class=\"text-[#868997]\">\r\n {{ hint }}\r\n </span>\r\n }\r\n </div>\r\n\r\n @if (maxLength) {\r\n <div\r\n class=\"text-[#868997] tabular-nums flex-shrink-0\"\r\n >\r\n {{ value.length }}/{{ maxLength }}\r\n </div>\r\n }\r\n\r\n\r\n </div>\r\n\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
2862
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Textarea, isStandalone: true, selector: "bk-textarea", inputs: { name: "name", id: "id", label: "label", placeholder: "placeholder", rows: "rows", hint: "hint", required: "required", maxLength: "maxLength", hasError: "hasError", errorMessage: "errorMessage", trimWhiteSpaces: "trimWhiteSpaces", eventType: "eventType" }, outputs: { input: "input", change: "change", blur: "blur", focus: "focus" }, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5 w-full\">\r\n\r\n @if (label) {\r\n <label\r\n class=\"text-sm font-medium text-[#141414] block\" [attr.for]=\"effectiveId\">\r\n {{ label }}\r\n @if (required) {\r\n <span class=\"text-[#E7000B] ml-0.5\">*</span>\r\n }\r\n </label>\r\n }\r\n\r\n <div class=\"relative\">\r\n <textarea\r\n [id]=\"effectiveId\"\r\n [attr.name]=\"name\"\r\n [value]=\"value\"\r\n (input)=\"handleEvent($event)\"\r\n (change)=\"handleEvent($event)\"\r\n (blur)=\"handleEvent($event)\"\r\n (focus)=\"handleEvent($event)\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"isDisabled\"\r\n [attr.maxlength]=\"maxLength\"\r\n rows=\"{{rows}}\"\r\n class=\"\r\n w-full\r\n px-3 py-2.5\r\n text-sm\r\n border border-[#E3E3E7] rounded-[4px]\r\n outline-none\r\n transition-colors duration-200\r\n bg-white resize-y\r\n placeholder:text-[#6B7080]\r\n \"\r\n [ngClass]=\"{\r\n 'border-[#FA727A] text-[#141414]': hasError && !isDisabled,\r\n\r\n 'focus:border-[#6B7080] text-[#141414]': !hasError && !isDisabled,\r\n\r\n 'bg-[#F4F4F6] text-[#A1A3AE] border-[#E3E3E7] cursor-not-allowed': isDisabled\r\n }\"\r\n ></textarea>\r\n </div>\r\n\r\n <div class=\"flex justify-between items-start font-normal text-sm\">\r\n\r\n <div class=\"flex-1\">\r\n @if (showError) {\r\n <span class=\"text-[#F34050]\">\r\n {{ errorMessage }}\r\n </span>\r\n } @else if (hint) {\r\n <span class=\"text-[#868997]\">\r\n {{ hint }}\r\n </span>\r\n }\r\n </div>\r\n\r\n @if (maxLength) {\r\n <div\r\n class=\"text-[#868997] tabular-nums flex-shrink-0\"\r\n >\r\n {{ value.length }}/{{ maxLength }}\r\n </div>\r\n }\r\n\r\n\r\n </div>\r\n\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
2851
2863
|
}
|
|
2852
2864
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Textarea, decorators: [{
|
|
2853
2865
|
type: Component,
|
|
@@ -2880,6 +2892,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2880
2892
|
type: Input
|
|
2881
2893
|
}], eventType: [{
|
|
2882
2894
|
type: Input
|
|
2895
|
+
}], input: [{
|
|
2896
|
+
type: Output
|
|
2897
|
+
}], change: [{
|
|
2898
|
+
type: Output
|
|
2899
|
+
}], blur: [{
|
|
2900
|
+
type: Output
|
|
2901
|
+
}], focus: [{
|
|
2902
|
+
type: Output
|
|
2883
2903
|
}] } });
|
|
2884
2904
|
|
|
2885
2905
|
class GridComponent {
|
|
@@ -2981,11 +3001,11 @@ class GridComponent {
|
|
|
2981
3001
|
});
|
|
2982
3002
|
}
|
|
2983
3003
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2984
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: GridComponent, isStandalone: true, selector: "bk-grid", inputs: { draggable: "draggable", columns: "columns", result: "result", actions: "actions" }, outputs: { actionClick: "actionClick", sortChange: "sortChange", dragDropChange: "dragDropChange" }, viewQueries: [{ propertyName: "tableScrollContainer", first: true, predicate: ["tableScrollContainer"], descendants: true }], ngImport: i0, template: "<div\r\n #tableScrollContainer\r\n cdkScrollable\r\n class=\"h-[calc(100vh-260px)] overflow-y-auto\">\r\n\r\n <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n\r\n <!-- ================= HEADER ================= -->\r\n <thead>\r\n <tr>\r\n @for (col of columns; track col.header;let i=$index;) {\r\n @if (isColumnVisible(col)) {\r\n <th\r\n class=\"table-header sticky top-0 cursor-pointer\"\r\n [class.action-sticky]=\"col.sticky\"\r\n [class.z-10]=\"col.sticky\"\r\n [ngClass]=\"col.headerClass\"\r\n [ngClass]=\"col.cellClass\"\r\n (click)=\"sort(col,i)\"\r\n >\r\n <span class=\"flex items-center gap-1\"\r\n [ngClass]=\"sortColumn === col.field\r\n ? (sortDirection === 'asc' ? 'asc' : 'desc')\r\n : ''\">\r\n {{ col.header }}\r\n @if (col.sortable) {\r\n <span class=\"sort-icon\"></span>\r\n }\r\n </span>\r\n </th>\r\n }\r\n }\r\n\r\n @if (actions.length) {\r\n <th class=\"table-header sticky top-0 action-sticky z-10 !bg-[#FBFBFC] w-20\">\r\n Action\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <!-- ================= BODY ================= -->\r\n <tbody\r\n cdkDropList\r\n [cdkDropListDisabled]=\"!draggable\"\r\n [cdkDropListData]=\"result || []\"\r\n (cdkDropListDropped)=\"dropList($event)\">\r\n\r\n @for (row of result; track row; let rowIndex = $index) {\r\n <tr\r\n cdkDrag\r\n cdkDragLockAxis=\"y\"\r\n [cdkDragDisabled]=\"!draggable\"\r\n (cdkDragStarted)=\"onDragStart($event)\"\r\n (cdkDragMoved)=\"onDragMoved($event)\"\r\n class=\"\" [ngClass]=\"{ 'cursor-move ': draggable }\">\r\n\r\n @for (col of columns; track col.header; let colIndex = $index) {\r\n @if (isColumnVisible(col)) {\r\n <td class=\"table-cell text-nowrap\" [ngClass]=\"col.cellClass\">\r\n @if (draggable && colIndex === firstVisibleColumnIndex) {\r\n <span cdkDragHandle class=\"mr-2 text-gray-400\" [ngClass]=\"{ 'cursor-move': draggable }\">\u2630</span>\r\n }\r\n {{ getCellValue(row, col) }}\r\n </td>\r\n }\r\n }\r\n\r\n @if (actions.length) {\r\n <td class=\"table-cell action-sticky text-center\">\r\n <div class=\"flex items-center justify-center gap-1.5\">\r\n @for (action of actions; track action.name) {\r\n @if (action.hasPermission) {\r\n <!-- appTooltip=\"{{ action.tooltip }}\"\r\n appTooltipPosition=\"top\" -->\r\n <button\r\n class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA]\"\r\n (click)=\"emitAction(action, row)\"\r\n\r\n >\r\n <img\r\n [src]=\"action.icon\"\r\n width=\"14\"\r\n height=\"14\"\r\n alt=\"action-icon\"\r\n />\r\n </button>\r\n }\r\n }\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n</div>\r\n", styles: [".cdk-drag-preview{display:table;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: ScrollingModule }] });
|
|
3004
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: GridComponent, isStandalone: true, selector: "bk-grid", inputs: { draggable: "draggable", columns: "columns", result: "result", actions: "actions" }, outputs: { actionClick: "actionClick", sortChange: "sortChange", dragDropChange: "dragDropChange" }, viewQueries: [{ propertyName: "tableScrollContainer", first: true, predicate: ["tableScrollContainer"], descendants: true }], ngImport: i0, template: "<div\r\n #tableScrollContainer\r\n cdkScrollable\r\n class=\"h-[calc(100vh-260px)] overflow-y-auto\">\r\n\r\n <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n\r\n <!-- ================= HEADER ================= -->\r\n <thead>\r\n <tr>\r\n @for (col of columns; track col.header;let i=$index;) {\r\n @if (isColumnVisible(col)) {\r\n <th\r\n class=\"grid-header sticky top-0 cursor-pointer\"\r\n [class.action-sticky]=\"col.sticky\"\r\n [class.z-10]=\"col.sticky\"\r\n [ngClass]=\"col.headerClass\"\r\n [ngClass]=\"col.cellClass\"\r\n (click)=\"sort(col,i)\"\r\n >\r\n <span class=\"flex items-center gap-1\"\r\n [ngClass]=\"sortColumn === col.field\r\n ? (sortDirection === 'asc' ? 'grid-asc' : 'grid-desc')\r\n : ''\">\r\n {{ col.header }}\r\n @if (col.sortable) {\r\n <span class=\"grid-sort-icon\"></span>\r\n }\r\n </span>\r\n </th>\r\n }\r\n }\r\n\r\n @if (actions.length) {\r\n <th class=\"grid-header sticky top-0 action-sticky z-10 !bg-[#FBFBFC] w-20\">\r\n Action\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <!-- ================= BODY ================= -->\r\n <tbody\r\n cdkDropList\r\n [cdkDropListDisabled]=\"!draggable\"\r\n [cdkDropListData]=\"result || []\"\r\n (cdkDropListDropped)=\"dropList($event)\">\r\n\r\n @for (row of result; track row; let rowIndex = $index) {\r\n <tr\r\n cdkDrag\r\n cdkDragLockAxis=\"y\"\r\n [cdkDragDisabled]=\"!draggable\"\r\n (cdkDragStarted)=\"onDragStart($event)\"\r\n (cdkDragMoved)=\"onDragMoved($event)\"\r\n class=\"\" [ngClass]=\"{ 'cursor-move ': draggable }\">\r\n\r\n @for (col of columns; track col.header; let colIndex = $index) {\r\n @if (isColumnVisible(col)) {\r\n <td class=\"grid-cell text-nowrap\" [ngClass]=\"col.cellClass\">\r\n @if (draggable && colIndex === firstVisibleColumnIndex) {\r\n <span cdkDragHandle class=\"mr-2 text-gray-400\" [ngClass]=\"{ 'cursor-move': draggable }\">\u2630</span>\r\n }\r\n {{ getCellValue(row, col) }}\r\n </td>\r\n }\r\n }\r\n\r\n @if (actions.length) {\r\n <td class=\"grid-cell action-sticky text-center\">\r\n <div class=\"flex items-center justify-center gap-1.5\">\r\n @for (action of actions; track action.name) {\r\n @if (action.hasPermission) {\r\n <!-- appTooltip=\"{{ action.tooltip }}\"\r\n appTooltipPosition=\"top\" -->\r\n <button\r\n class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA]\"\r\n (click)=\"emitAction(action, row)\"\r\n\r\n >\r\n <img\r\n [src]=\"action.icon\"\r\n width=\"14\"\r\n height=\"14\"\r\n alt=\"action-icon\"\r\n />\r\n </button>\r\n }\r\n }\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n</div>\r\n", styles: [".grid-header{@apply bg-[#FBFBFC] text-xs text-[#60646C] leading-5 font-semibold capitalize px-4 py-2 whitespace-nowrap;}.grid-cell{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 border border-[#EBEDF3] border-b-0;}.grid-cell:last-child{@apply border-e-0;}.grid-cell:first-child,.grid-first-cell{@apply border-s-0;}.grid-last-cell{@apply border-e-0;}.grid-action-sticky{@apply sticky bg-white right-[.1px] z-[1px];}.grid-action-sticky:before{@apply absolute top-0 bottom-0 left-[-8px] w-2;content:\"\";background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent)}.grid-required{@apply font-medium text-sm leading-normal after:content-[\"*\"] after:text-[#C10007] after:ms-0.5;}.grid-sort{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;line-height:1}.grid-sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:.875rem;width:.875rem;gap:.125rem;line-height:1}.grid-sort-icon:before{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-sort-icon:after{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3e%3c/svg%3e\")}.cdk-drag-preview{display:table;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: ScrollingModule }] });
|
|
2985
3005
|
}
|
|
2986
3006
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GridComponent, decorators: [{
|
|
2987
3007
|
type: Component,
|
|
2988
|
-
args: [{ selector: 'bk-grid', standalone: true, imports: [CommonModule, DragDropModule, ScrollingModule], template: "<div\r\n #tableScrollContainer\r\n cdkScrollable\r\n class=\"h-[calc(100vh-260px)] overflow-y-auto\">\r\n\r\n <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n\r\n <!-- ================= HEADER ================= -->\r\n <thead>\r\n <tr>\r\n @for (col of columns; track col.header;let i=$index;) {\r\n @if (isColumnVisible(col)) {\r\n <th\r\n class=\"
|
|
3008
|
+
args: [{ selector: 'bk-grid', standalone: true, imports: [CommonModule, DragDropModule, ScrollingModule], template: "<div\r\n #tableScrollContainer\r\n cdkScrollable\r\n class=\"h-[calc(100vh-260px)] overflow-y-auto\">\r\n\r\n <table class=\"min-w-full text-sm text-left text-gray-800 table-auto border-collapse\">\r\n\r\n <!-- ================= HEADER ================= -->\r\n <thead>\r\n <tr>\r\n @for (col of columns; track col.header;let i=$index;) {\r\n @if (isColumnVisible(col)) {\r\n <th\r\n class=\"grid-header sticky top-0 cursor-pointer\"\r\n [class.action-sticky]=\"col.sticky\"\r\n [class.z-10]=\"col.sticky\"\r\n [ngClass]=\"col.headerClass\"\r\n [ngClass]=\"col.cellClass\"\r\n (click)=\"sort(col,i)\"\r\n >\r\n <span class=\"flex items-center gap-1\"\r\n [ngClass]=\"sortColumn === col.field\r\n ? (sortDirection === 'asc' ? 'grid-asc' : 'grid-desc')\r\n : ''\">\r\n {{ col.header }}\r\n @if (col.sortable) {\r\n <span class=\"grid-sort-icon\"></span>\r\n }\r\n </span>\r\n </th>\r\n }\r\n }\r\n\r\n @if (actions.length) {\r\n <th class=\"grid-header sticky top-0 action-sticky z-10 !bg-[#FBFBFC] w-20\">\r\n Action\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <!-- ================= BODY ================= -->\r\n <tbody\r\n cdkDropList\r\n [cdkDropListDisabled]=\"!draggable\"\r\n [cdkDropListData]=\"result || []\"\r\n (cdkDropListDropped)=\"dropList($event)\">\r\n\r\n @for (row of result; track row; let rowIndex = $index) {\r\n <tr\r\n cdkDrag\r\n cdkDragLockAxis=\"y\"\r\n [cdkDragDisabled]=\"!draggable\"\r\n (cdkDragStarted)=\"onDragStart($event)\"\r\n (cdkDragMoved)=\"onDragMoved($event)\"\r\n class=\"\" [ngClass]=\"{ 'cursor-move ': draggable }\">\r\n\r\n @for (col of columns; track col.header; let colIndex = $index) {\r\n @if (isColumnVisible(col)) {\r\n <td class=\"grid-cell text-nowrap\" [ngClass]=\"col.cellClass\">\r\n @if (draggable && colIndex === firstVisibleColumnIndex) {\r\n <span cdkDragHandle class=\"mr-2 text-gray-400\" [ngClass]=\"{ 'cursor-move': draggable }\">\u2630</span>\r\n }\r\n {{ getCellValue(row, col) }}\r\n </td>\r\n }\r\n }\r\n\r\n @if (actions.length) {\r\n <td class=\"grid-cell action-sticky text-center\">\r\n <div class=\"flex items-center justify-center gap-1.5\">\r\n @for (action of actions; track action.name) {\r\n @if (action.hasPermission) {\r\n <!-- appTooltip=\"{{ action.tooltip }}\"\r\n appTooltipPosition=\"top\" -->\r\n <button\r\n class=\"size-6 flex items-center justify-center rounded hover:bg-[#F8F8FA]\"\r\n (click)=\"emitAction(action, row)\"\r\n\r\n >\r\n <img\r\n [src]=\"action.icon\"\r\n width=\"14\"\r\n height=\"14\"\r\n alt=\"action-icon\"\r\n />\r\n </button>\r\n }\r\n }\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n</div>\r\n", styles: [".grid-header{@apply bg-[#FBFBFC] text-xs text-[#60646C] leading-5 font-semibold capitalize px-4 py-2 whitespace-nowrap;}.grid-cell{@apply text-[#15191E] text-[13px] font-medium leading-4 px-4 py-2 border border-[#EBEDF3] border-b-0;}.grid-cell:last-child{@apply border-e-0;}.grid-cell:first-child,.grid-first-cell{@apply border-s-0;}.grid-last-cell{@apply border-e-0;}.grid-action-sticky{@apply sticky bg-white right-[.1px] z-[1px];}.grid-action-sticky:before{@apply absolute top-0 bottom-0 left-[-8px] w-2;content:\"\";background-image:linear-gradient(to left,rgba(0,0,0,.05),transparent)}.grid-required{@apply font-medium text-sm leading-normal after:content-[\"*\"] after:text-[#C10007] after:ms-0.5;}.grid-sort{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;line-height:1}.grid-sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:.875rem;width:.875rem;gap:.125rem;line-height:1}.grid-sort-icon:before{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-sort-icon:after{display:inline-block;content:\"\";height:.3rem;width:.54rem;background-repeat:no-repeat;background-position:center;background-size:cover;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3e%3c/svg%3e\")}.grid-asc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C4CADA'/%3e%3c/svg%3e\")}.grid-desc>.grid-sort-icon:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3e%3cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3e%3c/svg%3e\")}.cdk-drag-preview{display:table;width:100%;background:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.4;background-color:#f3f4f6}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
|
|
2989
3009
|
}], propDecorators: { draggable: [{
|
|
2990
3010
|
type: Input
|
|
2991
3011
|
}], columns: [{
|