mis-crystal-design-system 18.1.7-signal-16 → 18.1.7-signal-16-test

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.
@@ -440,19 +440,6 @@ class TableComponent {
440
440
  });
441
441
  this.expandedMap.set(newExpandedMap);
442
442
  }
443
- // ngAfterViewInit() {
444
- // if (this.tableConfig().paginationConfig) {
445
- // let height = this.tableConfig().height;
446
- // // Handle percentage values - don't subtract 56px for percentages
447
- // if (typeof height === 'string' && height.includes('%')) {
448
- // this.renderer.setStyle(this.table.nativeElement, "height", height);
449
- // } else {
450
- // // Handle pixel values - subtract 56px for pagination
451
- // let pixelHeight = parseInt(height.toString().replace('px', '')) || 0;
452
- // this.renderer.setStyle(this.table.nativeElement, "height", pixelHeight - 56 + "px");
453
- // }
454
- // }
455
- // }
456
443
  ngAfterViewInit() {
457
444
  const config = this.tableConfig();
458
445
  if (!config?.paginationConfig)
@@ -958,7 +945,7 @@ class SubTableComponent {
958
945
  } if (rf & 2) {
959
946
  let _t;
960
947
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.table = _t.first);
961
- } }, inputs: { config: [1, "config"], tableData: [1, "tableData"] }, decls: 7, vars: 12, consts: [["table", ""], ["id", "main-container", 2, "border", "2px solid red", 3, "ngStyle"], ["id", "table-container", 2, "border", "2px solid yellow"], ["id", "col-headers-container", "style", " border: 2px solid blue;", 3, "ngStyle", 4, "ngIf"], ["itemSize", "50", "id", "data-container", 3, "minBufferPx", "maxBufferPx"], ["class", "row-wrapper", 3, "ngStyle", 4, "cdkVirtualFor", "cdkVirtualForOf"], ["id", "col-headers-container", 2, "border", "2px solid blue", 3, "ngStyle"], ["class", "col-header", 3, "style", "ngStyle", "click", 4, "ngFor", "ngForOf"], [1, "col-header", 3, "click", "ngStyle"], ["class", "col-header-text", 4, "ngIf"], [4, "ngIf"], [1, "col-header-text"], ["customTableCell", "", 3, "customComponent", "data"], [1, "row-wrapper", 3, "ngStyle"], [1, "t-row"], ["class", "t-col-container", 3, "ngStyle", "click", 4, "ngFor", "ngForOf"], [1, "t-col-container", 3, "click", "ngStyle"], [1, "t-col", 3, "ngStyle"], ["class", "t-col-text", 3, "ngStyle", 4, "ngIf"], [1, "t-col-text", 3, "ngStyle"]], template: function SubTableComponent_Template(rf, ctx) { if (rf & 1) {
948
+ } }, inputs: { config: [1, "config"], tableData: [1, "tableData"] }, decls: 7, vars: 12, consts: [["table", ""], ["id", "main-container", 3, "ngStyle"], ["id", "table-container"], ["id", "col-headers-container", 3, "ngStyle", 4, "ngIf"], ["itemSize", "50", "id", "data-container", 3, "minBufferPx", "maxBufferPx"], ["class", "row-wrapper", 3, "ngStyle", 4, "cdkVirtualFor", "cdkVirtualForOf"], ["id", "col-headers-container", 3, "ngStyle"], ["class", "col-header", 3, "style", "ngStyle", "click", 4, "ngFor", "ngForOf"], [1, "col-header", 3, "click", "ngStyle"], ["class", "col-header-text", 4, "ngIf"], [4, "ngIf"], [1, "col-header-text"], ["customTableCell", "", 3, "customComponent", "data"], [1, "row-wrapper", 3, "ngStyle"], [1, "t-row"], ["class", "t-col-container", 3, "ngStyle", "click", 4, "ngFor", "ngForOf"], [1, "t-col-container", 3, "click", "ngStyle"], [1, "t-col", 3, "ngStyle"], ["class", "t-col-text", 3, "ngStyle", 4, "ngIf"], [1, "t-col-text", 3, "ngStyle"]], template: function SubTableComponent_Template(rf, ctx) { if (rf & 1) {
962
949
  i0.ɵɵelementStart(0, "div", 1)(1, "div", 2, 0);
963
950
  i0.ɵɵtemplate(3, SubTableComponent_div_3_Template, 2, 6, "div", 3);
964
951
  i0.ɵɵelementStart(4, "div")(5, "cdk-virtual-scroll-viewport", 4);
@@ -972,12 +959,12 @@ class SubTableComponent {
972
959
  i0.ɵɵstyleProp("overflow", "overlay")("height", ctx.config().dataContainerMaxHeight || "400px");
973
960
  i0.ɵɵproperty("minBufferPx", ctx.config().dataContainerMaxHeight || "400")("maxBufferPx", ctx.config().dataContainerMaxHeight + 200 || "600");
974
961
  i0.ɵɵadvance();
975
- i0.ɵɵproperty("cdkVirtualForOf", ctx.tableData);
962
+ i0.ɵɵproperty("cdkVirtualForOf", ctx.tableData());
976
963
  } }, dependencies: [i1.NgForOf, i1.NgIf, i1.NgStyle, i2.CdkFixedSizeVirtualScroll, i2.CdkVirtualForOf, i2.CdkVirtualScrollViewport, CustomTableCellDirective], styles: ["#main-container[_ngcontent-%COMP%]{font-family:Lato,sans-serif}#table-container[_ngcontent-%COMP%]{height:inherit}#col-headers-container[_ngcontent-%COMP%]{display:flex;background-color:var(--bg-primary, #FFFFFF);height:36px;border-bottom:1px solid var(--border-primary, #E0E0E0)}#data-container[_ngcontent-%COMP%]{overflow:scroll;width:100%}#data-container[_ngcontent-%COMP%]::-webkit-scrollbar{width:8px}#data-container[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:var(--text-tertiary, #929DAB)}.col-header[_ngcontent-%COMP%]{height:100%;width:160px;display:flex;align-items:center;padding:0 16px}.col-header-text[_ngcontent-%COMP%]{font-style:normal;font-weight:700;font-size:14px;line-height:20px;display:flex;align-items:center;letter-spacing:.25px;margin:0}.t-row[_ngcontent-%COMP%]{display:flex;align-items:center;height:36px;width:100%;border-bottom:1px solid var(--border-primary, #E0E0E0)}.t-row[_ngcontent-%COMP%]:hover{background-color:var(--brand-success-lightest, #F1FFF3)}.t-col-container[_ngcontent-%COMP%]{padding:0 16px;height:100%}.t-col[_ngcontent-%COMP%]{display:flex;align-items:center;height:100%}.t-col-text[_ngcontent-%COMP%]{font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:flex;align-items:center;letter-spacing:.2px;margin:0}"] }); }
977
964
  }
978
965
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SubTableComponent, [{
979
966
  type: Component,
980
- args: [{ selector: "sub-table", template: "<div\n id=\"main-container\"\n style=\" border: 2px solid red;\"\n [ngStyle]=\"{\n height: getContainerHeight(),\n width: getContainerWidth()\n }\"\n>\n <div id=\"table-container\" style=\" border: 2px solid yellow;\" #table>\n <div\n id=\"col-headers-container\"\n *ngIf=\"!!config().showHeader\"\n style=\" border: 2px solid blue;\"\n [ngStyle]=\"{\n height: getColHeadersRowHeight(),\n 'border-top': getColHeadersRowBorderTop(),\n 'border-bottom': getColHeadersRowBorderBottom()\n }\"\n >\n <div\n class=\"col-header\"\n (click)=\"colHeader?.action ? colHeader?.action(colHeader) : null\"\n *ngFor=\"let colHeader of config()?.colHeaderConfig\"\n [style]=\"colHeader?.style\"\n [ngStyle]=\"{\n width: colHeader?.style?.width || '',\n cursor: colHeader.action ? 'pointer' : 'default',\n 'justify-content': colHeader?.style?.justifyContent\n ? colHeader?.style?.justifyContent\n : colHeader.type === 'number'\n ? 'flex-end'\n : 'space-between'\n }\"\n >\n <p *ngIf=\"colHeader?.type !== 'custom'\" class=\"col-header-text\">\n {{ colHeader?.data || \" \" }}\n </p>\n <ng-template\n *ngIf=\"colHeader?.type === 'custom'\"\n customTableCell\n [customComponent]=\"colHeader?.componentRef\"\n [data]=\"colHeader.data\"\n ></ng-template>\n </div>\n </div>\n <div>\n <cdk-virtual-scroll-viewport\n [minBufferPx]=\"config().dataContainerMaxHeight || '400'\"\n [maxBufferPx]=\"config().dataContainerMaxHeight + 200 || '600'\"\n [style.overflow]=\"'overlay'\"\n [style.height]=\"config().dataContainerMaxHeight || '400px'\"\n itemSize=\"50\"\n id=\"data-container\"\n >\n <div\n class=\"row-wrapper\"\n *cdkVirtualFor=\"let row of tableData; let i = index\"\n [ngStyle]=\"{\n backgroundColor: i % 2 === 0 ? '#FAFAFA' : null\n }\"\n >\n <div class=\"t-row\">\n <div\n (click)=\"config()?.colConfig[i]?.action ? config()?.colConfig[i]?.action(col) : null\"\n *ngFor=\"let col of row; let i = index\"\n [ngStyle]=\"{\n width: config()?.colConfig[i]?.style?.width || config()?.colHeaderConfig[i]?.style?.width || ''\n }\"\n class=\"t-col-container\"\n >\n <div\n class=\"t-col\"\n [style]=\"config().colConfig[i]?.style\"\n [ngStyle]=\"{\n width: '100%',\n cursor: config().colConfig[i].action ? 'pointer' : 'default',\n 'justify-content': config().colConfig[i]?.style?.justifyContent\n ? config().colConfig[i]?.style?.justifyContent\n : config().colConfig[i].type === 'number'\n ? 'flex-end'\n : 'space-between'\n }\"\n >\n <p\n *ngIf=\"config().colConfig[i].type !== 'custom'\"\n [ngStyle]=\"{\n color: config()?.colConfig[i]?.style?.color ? config()?.colConfig[i]?.style?.color : ''\n }\"\n class=\"t-col-text\"\n >\n {{ col }}\n </p>\n <ng-template\n *ngIf=\"config().colConfig[i].type === 'custom'\"\n [customComponent]=\"config().colConfig[i].componentRef\"\n [data]=\"col\"\n customTableCell\n ></ng-template>\n </div>\n </div>\n </div>\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n </div>\n</div>\n", styles: ["#main-container{font-family:Lato,sans-serif}#table-container{height:inherit}#col-headers-container{display:flex;background-color:var(--bg-primary, #FFFFFF);height:36px;border-bottom:1px solid var(--border-primary, #E0E0E0)}#data-container{overflow:scroll;width:100%}#data-container::-webkit-scrollbar{width:8px}#data-container::-webkit-scrollbar-thumb{background:var(--text-tertiary, #929DAB)}.col-header{height:100%;width:160px;display:flex;align-items:center;padding:0 16px}.col-header-text{font-style:normal;font-weight:700;font-size:14px;line-height:20px;display:flex;align-items:center;letter-spacing:.25px;margin:0}.t-row{display:flex;align-items:center;height:36px;width:100%;border-bottom:1px solid var(--border-primary, #E0E0E0)}.t-row:hover{background-color:var(--brand-success-lightest, #F1FFF3)}.t-col-container{padding:0 16px;height:100%}.t-col{display:flex;align-items:center;height:100%}.t-col-text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:flex;align-items:center;letter-spacing:.2px;margin:0}\n"] }]
967
+ args: [{ selector: "sub-table", template: "<div\n id=\"main-container\"\n [ngStyle]=\"{\n height: getContainerHeight(),\n width: getContainerWidth()\n }\"\n>\n <div id=\"table-container\" #table>\n <div\n id=\"col-headers-container\"\n *ngIf=\"!!config().showHeader\"\n [ngStyle]=\"{\n height: getColHeadersRowHeight(),\n 'border-top': getColHeadersRowBorderTop(),\n 'border-bottom': getColHeadersRowBorderBottom()\n }\"\n >\n <div\n class=\"col-header\"\n (click)=\"colHeader?.action ? colHeader?.action(colHeader) : null\"\n *ngFor=\"let colHeader of config()?.colHeaderConfig\"\n [style]=\"colHeader?.style\"\n [ngStyle]=\"{\n width: colHeader?.style?.width || '',\n cursor: colHeader.action ? 'pointer' : 'default',\n 'justify-content': colHeader?.style?.justifyContent\n ? colHeader?.style?.justifyContent\n : colHeader.type === 'number'\n ? 'flex-end'\n : 'space-between'\n }\"\n >\n <p *ngIf=\"colHeader?.type !== 'custom'\" class=\"col-header-text\">\n {{ colHeader?.data || \" \" }}\n </p>\n <ng-template\n *ngIf=\"colHeader?.type === 'custom'\"\n customTableCell\n [customComponent]=\"colHeader?.componentRef\"\n [data]=\"colHeader.data\"\n ></ng-template>\n </div>\n </div>\n <div>\n <cdk-virtual-scroll-viewport\n [minBufferPx]=\"config().dataContainerMaxHeight || '400'\"\n [maxBufferPx]=\"config().dataContainerMaxHeight + 200 || '600'\"\n [style.overflow]=\"'overlay'\"\n [style.height]=\"config().dataContainerMaxHeight || '400px'\"\n itemSize=\"50\"\n id=\"data-container\"\n >\n \n <div\n class=\"row-wrapper\"\n *cdkVirtualFor=\"let row of tableData(); let i = index\"\n [ngStyle]=\"{\n backgroundColor: i % 2 === 0 ? '#FAFAFA' : null,\n }\"\n >\n <div class=\"t-row\">\n <div\n (click)=\"config()?.colConfig[i]?.action ? config()?.colConfig[i]?.action(col) : null\"\n *ngFor=\"let col of row; let i = index\"\n [ngStyle]=\"{\n width: config()?.colConfig[i]?.style?.width || config()?.colHeaderConfig[i]?.style?.width || ''\n }\"\n class=\"t-col-container\"\n >\n <div\n class=\"t-col\"\n [style]=\"config().colConfig[i]?.style\"\n [ngStyle]=\"{\n width: '100%',\n cursor: config().colConfig[i].action ? 'pointer' : 'default',\n 'justify-content': config().colConfig[i]?.style?.justifyContent\n ? config().colConfig[i]?.style?.justifyContent\n : config().colConfig[i].type === 'number'\n ? 'flex-end'\n : 'space-between'\n }\"\n >\n <p\n *ngIf=\"config().colConfig[i].type !== 'custom'\"\n [ngStyle]=\"{\n color: config()?.colConfig[i]?.style?.color ? config()?.colConfig[i]?.style?.color : ''\n }\"\n class=\"t-col-text\"\n >\n {{ col }}\n </p>\n <ng-template\n *ngIf=\"config().colConfig[i].type === 'custom'\"\n [customComponent]=\"config().colConfig[i].componentRef\"\n [data]=\"col\"\n customTableCell\n ></ng-template>\n </div>\n </div>\n </div>\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n </div>\n</div>\n", styles: ["#main-container{font-family:Lato,sans-serif}#table-container{height:inherit}#col-headers-container{display:flex;background-color:var(--bg-primary, #FFFFFF);height:36px;border-bottom:1px solid var(--border-primary, #E0E0E0)}#data-container{overflow:scroll;width:100%}#data-container::-webkit-scrollbar{width:8px}#data-container::-webkit-scrollbar-thumb{background:var(--text-tertiary, #929DAB)}.col-header{height:100%;width:160px;display:flex;align-items:center;padding:0 16px}.col-header-text{font-style:normal;font-weight:700;font-size:14px;line-height:20px;display:flex;align-items:center;letter-spacing:.25px;margin:0}.t-row{display:flex;align-items:center;height:36px;width:100%;border-bottom:1px solid var(--border-primary, #E0E0E0)}.t-row:hover{background-color:var(--brand-success-lightest, #F1FFF3)}.t-col-container{padding:0 16px;height:100%}.t-col{display:flex;align-items:center;height:100%}.t-col-text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:flex;align-items:center;letter-spacing:.2px;margin:0}\n"] }]
981
968
  }], () => [{ type: i0.Renderer2 }], { table: [{
982
969
  type: ViewChild,
983
970
  args: ["table"]