@brickclay-org/ui 0.0.70 → 0.0.72
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.
|
@@ -3505,12 +3505,19 @@ class BkGrid {
|
|
|
3505
3505
|
getBadge(row, column) {
|
|
3506
3506
|
return column.badges?.find(b => b.label === this.getCellValue(row, column));
|
|
3507
3507
|
}
|
|
3508
|
+
getIcons(row, column) {
|
|
3509
|
+
if (!column.icons)
|
|
3510
|
+
return [];
|
|
3511
|
+
return typeof column.icons === 'function'
|
|
3512
|
+
? column.icons(row)
|
|
3513
|
+
: column.icons;
|
|
3514
|
+
}
|
|
3508
3515
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3509
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkGrid, 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 @if(col.badges){\r\n @let badge = getBadge(row, col);\r\n @if (badge) {\r\n <bk-badge [label]=\"badge.label\" [variant]=\"badge.variant\"\r\n [size]=\"badge.size\" [color]=\"badge.color\" [dot]=\"badge.dot\"\r\n [customClass]=\"badge.customClass\"></bk-badge>\r\n }\r\n\r\n }\r\n @else if (col.icons) {\r\n <div class=\"flex gap-2\">\r\n @for (icon of col.icons; track $index) {\r\n <img [src]=\"icon.url\" class=\"size-4 cursor-pointer\" [bkTooltip]=\"icon.toolTipLabel || []\" [bkTooltipPosition]=\"icon.tooltipPosition || 'top'\" />\r\n }\r\n </div>\r\n }\r\n @else {\r\n {{ getCellValue(row, col) }}\r\n }\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 <!-- appTooltip=\"{{ action.tooltip }}\"\r\n appTooltipPosition=\"top\" -->\r\n @for (action of actions; track action.name) {\r\n @if (action.hasPermission) {\r\n <button\r\n bkTooltip=\"{{ action.tooltip }}\"\r\n bkTooltipPosition=\"top\"\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$1.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i2$1.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$1.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$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: BkBadge, selector: "bk-badge", inputs: ["label", "variant", "color", "size", "dot", "removable", "customClass"], outputs: ["clicked"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition"] }] });
|
|
3516
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkGrid, 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 @if(col.badges){\r\n @let badge = getBadge(row, col);\r\n @if (badge) {\r\n <bk-badge [label]=\"badge.label\" [variant]=\"badge.variant\"\r\n [size]=\"badge.size\" [color]=\"badge.color\" [dot]=\"badge.dot\"\r\n [customClass]=\"badge.customClass\"></bk-badge>\r\n }\r\n\r\n }\r\n @else if (col.icons) {\r\n @let iconsList = getIcons(row, col);\r\n <div class=\"flex justify-center items-center gap-2\">\r\n @for (icon of iconsList; track $index) {\r\n <img [src]=\"icon.url\" class=\"size-4 cursor-pointer\" [bkTooltip]=\"icon.toolTipLabel || []\" [bkTooltipPosition]=\"icon.tooltipPosition || 'top'\" />\r\n }\r\n </div>\r\n }\r\n @else {\r\n {{ getCellValue(row, col) }}\r\n }\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 <!-- appTooltip=\"{{ action.tooltip }}\"\r\n appTooltipPosition=\"top\" -->\r\n @for (action of actions; track action.name) {\r\n @if (action.hasPermission) {\r\n <button\r\n bkTooltip=\"{{ action.tooltip }}\"\r\n bkTooltipPosition=\"top\"\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$1.ɵɵCdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i2$1.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$1.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$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: BkBadge, selector: "bk-badge", inputs: ["label", "variant", "color", "size", "dot", "removable", "customClass"], outputs: ["clicked"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition"] }] });
|
|
3510
3517
|
}
|
|
3511
3518
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkGrid, decorators: [{
|
|
3512
3519
|
type: Component,
|
|
3513
|
-
args: [{ selector: 'bk-grid', standalone: true, imports: [CommonModule, DragDropModule, ScrollingModule, BkBadge, BKTooltipDirective], 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 @if(col.badges){\r\n @let badge = getBadge(row, col);\r\n @if (badge) {\r\n <bk-badge [label]=\"badge.label\" [variant]=\"badge.variant\"\r\n [size]=\"badge.size\" [color]=\"badge.color\" [dot]=\"badge.dot\"\r\n [customClass]=\"badge.customClass\"></bk-badge>\r\n }\r\n\r\n }\r\n @else if (col.icons) {\r\n <div class=\"flex gap-2\">\r\n @for (icon of
|
|
3520
|
+
args: [{ selector: 'bk-grid', standalone: true, imports: [CommonModule, DragDropModule, ScrollingModule, BkBadge, BKTooltipDirective], 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 @if(col.badges){\r\n @let badge = getBadge(row, col);\r\n @if (badge) {\r\n <bk-badge [label]=\"badge.label\" [variant]=\"badge.variant\"\r\n [size]=\"badge.size\" [color]=\"badge.color\" [dot]=\"badge.dot\"\r\n [customClass]=\"badge.customClass\"></bk-badge>\r\n }\r\n\r\n }\r\n @else if (col.icons) {\r\n @let iconsList = getIcons(row, col);\r\n <div class=\"flex justify-center items-center gap-2\">\r\n @for (icon of iconsList; track $index) {\r\n <img [src]=\"icon.url\" class=\"size-4 cursor-pointer\" [bkTooltip]=\"icon.toolTipLabel || []\" [bkTooltipPosition]=\"icon.tooltipPosition || 'top'\" />\r\n }\r\n </div>\r\n }\r\n @else {\r\n {{ getCellValue(row, col) }}\r\n }\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 <!-- appTooltip=\"{{ action.tooltip }}\"\r\n appTooltipPosition=\"top\" -->\r\n @for (action of actions; track action.name) {\r\n @if (action.hasPermission) {\r\n <button\r\n bkTooltip=\"{{ action.tooltip }}\"\r\n bkTooltipPosition=\"top\"\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"] }]
|
|
3514
3521
|
}], propDecorators: { draggable: [{
|
|
3515
3522
|
type: Input
|
|
3516
3523
|
}], columns: [{
|
|
@@ -7095,11 +7102,11 @@ class BkFileCard {
|
|
|
7095
7102
|
this.remove.emit(this.id);
|
|
7096
7103
|
}
|
|
7097
7104
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkFileCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7098
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkFileCard, isStandalone: true, selector: "bk-file-card", inputs: { id: "id", state: "state", fileName: "fileName", fileSize: "fileSize", progress: "progress", errorMessage: "errorMessage" }, outputs: { remove: "remove" }, ngImport: i0, template: "\r\n <div\r\n class=\"file-uploader\"\r\n [ngClass]=\"{\r\n 'file-uploader--uploading': state === 'uploading',\r\n 'file-uploader--uploaded': state === 'uploaded',\r\n 'file-uploader--failed': state === 'failed'\r\n }\">\r\n <!-- Icon Section -->\r\n <div class=\"file-uploader__icon-container\">\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-uploader__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]=\"state === 'uploading' ? '#C7E2FF' : state === 'uploaded' ? '#C7E2FF' : '#FECACA'\"/>\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]=\"state === 'uploading' ? '#E5F3FF' : state === 'uploaded' ? '#E5F3FF' : '#FEE2E2'\"\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]=\"state === 'uploading' ? '#1434CB' : state === 'uploaded' ? '#1434CB' : '#EF4444'\"\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 </div>\r\n\r\n <!-- Content Section -->\r\n <div class=\"file-uploader__content\">\r\n <!-- Row 1: File Info + Delete -->\r\n <div class=\"file-uploader__row-1\">\r\n <div class=\"file-uploader__file-info\">\r\n <!-- Uploading State -->\r\n\r\n @if (state === 'uploading' || state === 'uploaded') {\r\n <ng-container>\r\n <span class=\"file-uploader__file-name\">{{ fileName }}</span>\r\n <span class=\"file-uploader__file-size\">{{ fileSize }}</span>\r\n </ng-container>\r\n }\r\n\r\n @if(state === 'failed'){\r\n <!-- Failed State -->\r\n <ng-container>\r\n <p class=\"file-uploader__error-message\">{{ errorMessage }}</p>\r\n <span class=\"file-uploader__file-name file-uploader__file-name--failed\">{{ fileName }}</span>\r\n <p class=\"file-uploader__error-message\">Try again</p>\r\n </ng-container>\r\n }\r\n </div>\r\n
|
|
7105
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkFileCard, isStandalone: true, selector: "bk-file-card", inputs: { id: "id", state: "state", fileName: "fileName", fileSize: "fileSize", progress: "progress", errorMessage: "errorMessage" }, outputs: { remove: "remove" }, ngImport: i0, template: "\r\n <div\r\n class=\"file-uploader\"\r\n [ngClass]=\"{\r\n 'file-uploader--uploading': state === 'uploading',\r\n 'file-uploader--uploaded': state === 'uploaded',\r\n 'file-uploader--failed': state === 'failed'\r\n }\">\r\n <!-- Icon Section -->\r\n <div class=\"file-uploader__icon-container\">\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-uploader__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]=\"state === 'uploading' ? '#C7E2FF' : state === 'uploaded' ? '#C7E2FF' : '#FECACA'\"/>\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]=\"state === 'uploading' ? '#E5F3FF' : state === 'uploaded' ? '#E5F3FF' : '#FEE2E2'\"\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]=\"state === 'uploading' ? '#1434CB' : state === 'uploaded' ? '#1434CB' : '#EF4444'\"\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 </div>\r\n\r\n <!-- Content Section -->\r\n <div class=\"file-uploader__content\">\r\n <!-- Row 1: File Info + Delete -->\r\n <div class=\"file-uploader__row-1\">\r\n <div class=\"file-uploader__file-info\">\r\n <!-- Uploading State -->\r\n\r\n @if (state === 'uploading' || state === 'uploaded') {\r\n <ng-container>\r\n <span class=\"file-uploader__file-name\">{{ fileName }}</span>\r\n <span class=\"file-uploader__file-size\">{{ fileSize }}</span>\r\n </ng-container>\r\n }\r\n\r\n @if(state === 'failed'){\r\n <!-- Failed State -->\r\n <ng-container>\r\n <p class=\"file-uploader__error-message\">{{ errorMessage }}</p>\r\n <span class=\"file-uploader__file-name file-uploader__file-name--failed\">{{ fileName }}</span>\r\n <p class=\"file-uploader__error-message\">Try again</p>\r\n </ng-container>\r\n }\r\n </div>\r\n <img\r\n src=\"../../assets/icons/bin-gray.svg\"\r\n alt=\"Delete\"\r\n bkTooltip=\"Delete\"\r\n bkTooltipPosition=\"left\"\r\n class=\"file-uploader__delete-icon\"\r\n (click)=\"onRemove()\"\r\n >\r\n </div>\r\n\r\n <!-- Row 2: Progress Bar + Percentage -->\r\n <div class=\"file-uploader__row-2\">\r\n @if (state === 'uploading') {\r\n <!-- Uploading State -->\r\n <ng-container>\r\n <div class=\"file-uploader__progress-bar\">\r\n <div\r\n class=\"file-uploader__progress-fill\"\r\n [style.width.%]=\"progress\"></div>\r\n </div>\r\n <span class=\"file-uploader__progress-text\">{{ progress }}%</span>\r\n </ng-container>\r\n }\r\n @if(state === 'uploaded'){\r\n <!-- Uploaded State -->\r\n <ng-container>\r\n <div class=\"file-uploader__progress-bar\">\r\n <div class=\"file-uploader__progress-fill file-uploader__progress-fill--complete\"></div>\r\n </div>\r\n <img src=\"../../assets/icons/check-green.svg\" alt=\"\" class=\"file-uploader__checkmark\">\r\n </ng-container>\r\n }\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n", styles: [".file-uploader{@apply p-4 flex gap-4 border rounded-lg border-transparent bg-[white];}.file-uploader--uploading{@apply border-[#EFEFF1];}.file-uploader--uploaded{@apply border-[#1434CB];}.file-uploader--failed{@apply border-[#FDA4A8] bg-[#FFF1F1];}.file-uploader__icon-container,.file-uploader__icon{@apply flex-shrink-0;}.file-uploader__content{@apply flex flex-col flex-1 gap-0;}.file-uploader__row-1{@apply flex items-start justify-between;}.file-uploader__file-info{@apply flex flex-col;}.file-uploader__file-name{@apply font-medium text-sm text-[#1B223A];}.file-uploader__file-name--failed{@apply text-[#B41E32] font-normal mb-1;}.file-uploader__file-size{@apply text-[#1B223A] font-normal text-sm;}.file-uploader__row-2{@apply flex justify-between items-center gap-3 mt-1;}.file-uploader--failed .file-uploader__row-2{@apply mt-0;}.file-uploader__progress-bar{@apply flex-1 h-2 bg-[#EFEFF1] rounded-full overflow-hidden;}.file-uploader__progress-fill{@apply h-full bg-[#1336EF] transition-all duration-300 rounded-full;}.file-uploader__progress-fill--complete{@apply bg-[#22973F];}.file-uploader__progress-text{@apply text-sm text-[#6B7080] font-medium;}.file-uploader__checkmark{@apply flex-shrink-0 size-[14px];}.file-uploader__error-message{@apply text-[#B41E32] font-medium text-sm;}.file-uploader__delete-icon{@apply flex-shrink-0 cursor-pointer size-5;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: BKTooltipDirective, selector: "[bkTooltip]", inputs: ["bkTooltip", "bkTooltipPosition"] }] });
|
|
7099
7106
|
}
|
|
7100
7107
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkFileCard, decorators: [{
|
|
7101
7108
|
type: Component,
|
|
7102
|
-
args: [{ imports: [CommonModule, BKTooltipDirective], selector: 'bk-file-card', standalone: true, template: "\r\n <div\r\n class=\"file-uploader\"\r\n [ngClass]=\"{\r\n 'file-uploader--uploading': state === 'uploading',\r\n 'file-uploader--uploaded': state === 'uploaded',\r\n 'file-uploader--failed': state === 'failed'\r\n }\">\r\n <!-- Icon Section -->\r\n <div class=\"file-uploader__icon-container\">\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-uploader__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]=\"state === 'uploading' ? '#C7E2FF' : state === 'uploaded' ? '#C7E2FF' : '#FECACA'\"/>\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]=\"state === 'uploading' ? '#E5F3FF' : state === 'uploaded' ? '#E5F3FF' : '#FEE2E2'\"\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]=\"state === 'uploading' ? '#1434CB' : state === 'uploaded' ? '#1434CB' : '#EF4444'\"\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 </div>\r\n\r\n <!-- Content Section -->\r\n <div class=\"file-uploader__content\">\r\n <!-- Row 1: File Info + Delete -->\r\n <div class=\"file-uploader__row-1\">\r\n <div class=\"file-uploader__file-info\">\r\n <!-- Uploading State -->\r\n\r\n @if (state === 'uploading' || state === 'uploaded') {\r\n <ng-container>\r\n <span class=\"file-uploader__file-name\">{{ fileName }}</span>\r\n <span class=\"file-uploader__file-size\">{{ fileSize }}</span>\r\n </ng-container>\r\n }\r\n\r\n @if(state === 'failed'){\r\n <!-- Failed State -->\r\n <ng-container>\r\n <p class=\"file-uploader__error-message\">{{ errorMessage }}</p>\r\n <span class=\"file-uploader__file-name file-uploader__file-name--failed\">{{ fileName }}</span>\r\n <p class=\"file-uploader__error-message\">Try again</p>\r\n </ng-container>\r\n }\r\n </div>\r\n
|
|
7109
|
+
args: [{ imports: [CommonModule, BKTooltipDirective], selector: 'bk-file-card', standalone: true, template: "\r\n <div\r\n class=\"file-uploader\"\r\n [ngClass]=\"{\r\n 'file-uploader--uploading': state === 'uploading',\r\n 'file-uploader--uploaded': state === 'uploaded',\r\n 'file-uploader--failed': state === 'failed'\r\n }\">\r\n <!-- Icon Section -->\r\n <div class=\"file-uploader__icon-container\">\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-uploader__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]=\"state === 'uploading' ? '#C7E2FF' : state === 'uploaded' ? '#C7E2FF' : '#FECACA'\"/>\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]=\"state === 'uploading' ? '#E5F3FF' : state === 'uploaded' ? '#E5F3FF' : '#FEE2E2'\"\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]=\"state === 'uploading' ? '#1434CB' : state === 'uploaded' ? '#1434CB' : '#EF4444'\"\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 </div>\r\n\r\n <!-- Content Section -->\r\n <div class=\"file-uploader__content\">\r\n <!-- Row 1: File Info + Delete -->\r\n <div class=\"file-uploader__row-1\">\r\n <div class=\"file-uploader__file-info\">\r\n <!-- Uploading State -->\r\n\r\n @if (state === 'uploading' || state === 'uploaded') {\r\n <ng-container>\r\n <span class=\"file-uploader__file-name\">{{ fileName }}</span>\r\n <span class=\"file-uploader__file-size\">{{ fileSize }}</span>\r\n </ng-container>\r\n }\r\n\r\n @if(state === 'failed'){\r\n <!-- Failed State -->\r\n <ng-container>\r\n <p class=\"file-uploader__error-message\">{{ errorMessage }}</p>\r\n <span class=\"file-uploader__file-name file-uploader__file-name--failed\">{{ fileName }}</span>\r\n <p class=\"file-uploader__error-message\">Try again</p>\r\n </ng-container>\r\n }\r\n </div>\r\n <img\r\n src=\"../../assets/icons/bin-gray.svg\"\r\n alt=\"Delete\"\r\n bkTooltip=\"Delete\"\r\n bkTooltipPosition=\"left\"\r\n class=\"file-uploader__delete-icon\"\r\n (click)=\"onRemove()\"\r\n >\r\n </div>\r\n\r\n <!-- Row 2: Progress Bar + Percentage -->\r\n <div class=\"file-uploader__row-2\">\r\n @if (state === 'uploading') {\r\n <!-- Uploading State -->\r\n <ng-container>\r\n <div class=\"file-uploader__progress-bar\">\r\n <div\r\n class=\"file-uploader__progress-fill\"\r\n [style.width.%]=\"progress\"></div>\r\n </div>\r\n <span class=\"file-uploader__progress-text\">{{ progress }}%</span>\r\n </ng-container>\r\n }\r\n @if(state === 'uploaded'){\r\n <!-- Uploaded State -->\r\n <ng-container>\r\n <div class=\"file-uploader__progress-bar\">\r\n <div class=\"file-uploader__progress-fill file-uploader__progress-fill--complete\"></div>\r\n </div>\r\n <img src=\"../../assets/icons/check-green.svg\" alt=\"\" class=\"file-uploader__checkmark\">\r\n </ng-container>\r\n }\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n", styles: [".file-uploader{@apply p-4 flex gap-4 border rounded-lg border-transparent bg-[white];}.file-uploader--uploading{@apply border-[#EFEFF1];}.file-uploader--uploaded{@apply border-[#1434CB];}.file-uploader--failed{@apply border-[#FDA4A8] bg-[#FFF1F1];}.file-uploader__icon-container,.file-uploader__icon{@apply flex-shrink-0;}.file-uploader__content{@apply flex flex-col flex-1 gap-0;}.file-uploader__row-1{@apply flex items-start justify-between;}.file-uploader__file-info{@apply flex flex-col;}.file-uploader__file-name{@apply font-medium text-sm text-[#1B223A];}.file-uploader__file-name--failed{@apply text-[#B41E32] font-normal mb-1;}.file-uploader__file-size{@apply text-[#1B223A] font-normal text-sm;}.file-uploader__row-2{@apply flex justify-between items-center gap-3 mt-1;}.file-uploader--failed .file-uploader__row-2{@apply mt-0;}.file-uploader__progress-bar{@apply flex-1 h-2 bg-[#EFEFF1] rounded-full overflow-hidden;}.file-uploader__progress-fill{@apply h-full bg-[#1336EF] transition-all duration-300 rounded-full;}.file-uploader__progress-fill--complete{@apply bg-[#22973F];}.file-uploader__progress-text{@apply text-sm text-[#6B7080] font-medium;}.file-uploader__checkmark{@apply flex-shrink-0 size-[14px];}.file-uploader__error-message{@apply text-[#B41E32] font-medium text-sm;}.file-uploader__delete-icon{@apply flex-shrink-0 cursor-pointer size-5;}\n"] }]
|
|
7103
7110
|
}], ctorParameters: () => [], propDecorators: { id: [{
|
|
7104
7111
|
type: Input
|
|
7105
7112
|
}], state: [{
|