From 7dc0a7e5ff4a90b1edb64954033512d47b4fda15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Matta?= Date: Wed, 4 Sep 2024 09:55:18 +0200 Subject: [PATCH] Add support for resizable columns for CpsTable and CpsTreeTable components (#402) * Add support for resizable columns in table and treetable * Remove cypress component test files * Update docs generator tsconfig to ignore spec files, regenerate docs --- .../src/app/api-data/cps-table.json | 16 ++++ .../src/app/api-data/cps-tree-table.json | 16 ++++ .../table-page/table-page.component.html | 21 +++-- .../pages/table-page/table-page.component.ts | 2 + .../tree-table-page.component.html | 33 ++++++-- .../tree-table-page.component.ts | 4 +- .../cps-autocomplete.component.cy.ts | 83 ------------------- .../cps-button-toggle.component.cy.ts | 7 -- .../cps-button/cps-button.component.cy.ts | 7 -- .../cps-checkbox/cps-checkbox.component.cy.ts | 7 -- .../cps-chip/cps-chip.component.cy.ts | 7 -- .../cps-datepicker.component.cy.ts | 7 -- .../cps-divider/cps-divider.component.cy.ts | 7 -- .../cps-expansion-panel.component.cy.ts | 10 --- .../cps-file-upload.component.cy.ts | 7 -- .../cps-icon/cps-icon.component.cy.ts | 7 -- .../cps-info-circle.component.cy.ts | 7 -- .../cps-input/cps-input.component.cy.ts | 7 -- .../cps-loader/cps-loader.component.cy.ts | 7 -- .../cps-menu/cps-menu.component.cy.ts | 7 -- .../cps-paginator.component.cy.ts | 7 -- .../cps-progress-circular.component.cy.ts | 7 -- .../cps-progress-linear.component.cy.ts | 7 -- .../cps-radio-button.component.cy.ts | 7 -- .../cps-radio-group.component.cy.ts | 7 -- .../cps-radio/cps-radio.component.cy.ts | 7 -- .../cps-scheduler.component.cy.ts | 7 -- .../cps-select/cps-select.component.cy.ts | 7 -- .../cps-sidebar-menu.component.cy.ts | 7 -- .../cps-switch/cps-switch.component.cy.ts | 7 -- .../cps-tab-group.component.cy.ts | 45 ---------- .../cps-tab/cps-tab.component.cy.ts | 31 ------- .../cps-table/cps-table.component.cy.ts | 7 -- .../cps-table/cps-table.component.html | 41 +++++++-- .../cps-table/cps-table.component.scss | 4 + .../cps-table/cps-table.component.ts | 17 ++++ .../cps-table-column-resizable.directive.ts | 20 +++++ .../cps-tag/cps-tag.component.cy.ts | 7 -- .../cps-textarea/cps-textarea.component.cy.ts | 7 -- .../cps-timepicker.component.cy.ts | 7 -- .../cps-tree-autocomplete.component.cy.ts | 7 -- .../cps-tree-select.component.cy.ts | 7 -- .../cps-tree-table.component.cy.ts | 7 -- .../cps-tree-table.component.html | 34 ++++++-- .../cps-tree-table.component.scss | 10 ++- .../cps-tree-table.component.ts | 20 +++++ ...s-tree-table-column-resizable.directive.ts | 20 +++++ projects/cps-ui-kit/src/public-api.ts | 2 + tsconfig.generator.json | 6 +- 49 files changed, 231 insertions(+), 407 deletions(-) delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-checkbox/cps-checkbox.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-datepicker/cps-datepicker.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-divider/cps-divider.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-expansion-panel/cps-expansion-panel.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-info-circle/cps-info-circle.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-loader/cps-loader.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-paginator/cps-paginator.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-progress-circular/cps-progress-circular.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-button/cps-radio-button.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio/cps-radio.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-scheduler/cps-scheduler.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab/cps-tab.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.cy.ts create mode 100644 projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-column-resizable.directive.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-tag/cps-tag.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-textarea/cps-textarea.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-timepicker/cps-timepicker.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-tree-select/cps-tree-select.component.cy.ts delete mode 100644 projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.cy.ts create mode 100644 projects/cps-ui-kit/src/lib/components/cps-tree-table/directives/cps-tree-table-column-resizable.directive.ts diff --git a/projects/composition/src/app/api-data/cps-table.json b/projects/composition/src/app/api-data/cps-table.json index 241444d5..0474946d 100644 --- a/projects/composition/src/app/api-data/cps-table.json +++ b/projects/composition/src/app/api-data/cps-table.json @@ -563,6 +563,22 @@ "type": "any[]", "default": "[]", "description": "An array of objects to display." + }, + { + "name": "resizableColumns", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "Determines whether columns are resizable.\nIn case of using a custom template for columns, it is also needed to add cpsTColResizable directive to th elements." + }, + { + "name": "columnResizeMode", + "optional": false, + "readonly": false, + "type": "\"expand\" | \"fit\"", + "default": "fit", + "description": "Determines how the columns are resized. It can be 'fit' (total width of the table stays the same) or 'expand' (total width of the table changes when resizing columns).\nNote: This setting only takes effect if 'resizableColumns' is true." } ] }, diff --git a/projects/composition/src/app/api-data/cps-tree-table.json b/projects/composition/src/app/api-data/cps-tree-table.json index 539acc11..45bcb753 100644 --- a/projects/composition/src/app/api-data/cps-tree-table.json +++ b/projects/composition/src/app/api-data/cps-tree-table.json @@ -547,6 +547,22 @@ "type": "any[]", "default": "[]", "description": "An array of objects to display." + }, + { + "name": "resizableColumns", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "Determines whether columns are resizable.\nIn case of using a custom template for columns, it is also needed to add cpsTTColResizable directive to th elements." + }, + { + "name": "columnResizeMode", + "optional": false, + "readonly": false, + "type": "\"expand\" | \"fit\"", + "default": "fit", + "description": "Determines how the columns are resized. It can be 'fit' (total width of the table stays the same) or 'expand' (total width of the table changes when resizing columns).\nNote: This setting only takes effect if 'resizableColumns' is true." } ] }, diff --git a/projects/composition/src/app/pages/table-page/table-page.component.html b/projects/composition/src/app/pages/table-page/table-page.component.html index 59b80ef7..f162b0bc 100644 --- a/projects/composition/src/app/pages/table-page/table-page.component.html +++ b/projects/composition/src/app/pages/table-page/table-page.component.html @@ -47,8 +47,9 @@ [virtualScroll]="true" [showColumnsToggleBtn]="true" scrollHeight="500px" - toolbarTitle="Sortable table with virtual scroller, global filter, internal columns toggle and with column filtering enabled" - [filterableByColumns]="true"> + toolbarTitle="Sortable table with resizable columns, virtual scroller, global filter, internal columns toggle and with column filtering enabled" + [filterableByColumns]="true" + [resizableColumns]="true"> @@ -63,18 +64,20 @@ (editRowBtnClicked)="onEditRowButtonClicked($event)" (actionBtnClicked)="onActionBtnClicked()" (dataReloadBtnClicked)="onReloadBtnClicked()" - toolbarTitle="Table with draggable rows, rows menus, action and data reload buttons. Each row menu has a 'Remove' button, which is currently {{ + toolbarTitle="Table with resizable columns (expand mode), draggable rows, rows menus, action and data reload buttons. Each row menu has a 'Remove' button, which is currently {{ isRemoveBtnVisible ? 'visible' : 'hidden' }}" actionBtnTitle="{{ isRemoveBtnVisible ? 'Hide' : 'Show' - }} Remove buttons"> + }} Remove buttons" + [resizableColumns]="true" + [columnResizeMode]="'expand'"> - A - B - C - D - E + A + B + C + D + E diff --git a/projects/composition/src/app/pages/table-page/table-page.component.ts b/projects/composition/src/app/pages/table-page/table-page.component.ts index 69f3c79d..389e52eb 100644 --- a/projects/composition/src/app/pages/table-page/table-page.component.ts +++ b/projects/composition/src/app/pages/table-page/table-page.component.ts @@ -5,6 +5,7 @@ import { CpsTableComponent, CpsTableColumnFilterDirective, CpsTableColumnSortableDirective, + CpsTableColumnResizableDirective, CpsTableHeaderSelectableDirective, CpsTabGroupComponent, CpsTabComponent, @@ -29,6 +30,7 @@ import ComponentData from '../../api-data/cps-table.json'; CpsTableColumnSortableDirective, CpsTableColumnFilterDirective, CpsTableHeaderSelectableDirective, + CpsTableColumnResizableDirective, CpsTabGroupComponent, CpsTabComponent, CpsButtonToggleComponent, diff --git a/projects/composition/src/app/pages/tree-table-page/tree-table-page.component.html b/projects/composition/src/app/pages/tree-table-page/tree-table-page.component.html index e916a6e6..58eeed8a 100644 --- a/projects/composition/src/app/pages/tree-table-page/tree-table-page.component.html +++ b/projects/composition/src/app/pages/tree-table-page/tree-table-page.component.html @@ -11,30 +11,43 @@ [paginator]="true" [scrollable]="false" sortMode="multiple" - toolbarTitle="Tree table with a paginator, multiple sorting and individual filtering"> + [resizableColumns]="true" + [columnResizeMode]="'expand'" + toolbarTitle="Tree table with a paginator, resizable columns, multiple sorting and individual filtering"> - + Name - + Size + filterType="date" + cpsTTColResizable> Modified + filterType="boolean" + cpsTTColResizable> Encrypted + filterType="category" + cpsTTColResizable> Importance @@ -62,8 +75,14 @@ [virtualScroll]="true" [showColumnsToggleBtn]="true" [filterableByColumns]="true" + [resizableColumns]="true" scrollHeight="500px" - toolbarTitle="Sortable tree table with virtual scroller, global filter, internal columns toggle and with column filtering enabled"> + toolbarTitle="Sortable tree table with resizable columns, virtual scroller, global filter, internal columns toggle and with column filtering enabled"> + + + + + diff --git a/projects/composition/src/app/pages/tree-table-page/tree-table-page.component.ts b/projects/composition/src/app/pages/tree-table-page/tree-table-page.component.ts index fa394763..151dbf62 100644 --- a/projects/composition/src/app/pages/tree-table-page/tree-table-page.component.ts +++ b/projects/composition/src/app/pages/tree-table-page/tree-table-page.component.ts @@ -13,7 +13,8 @@ import { CpsTreeTableHeaderSelectableDirective, CpsButtonToggleOption, CpsTreeTableSize, - CpsMenuItem + CpsMenuItem, + CpsTreeTableColumnResizableDirective } from 'cps-ui-kit'; import ComponentData from '../../api-data/cps-tree-table.json'; @@ -30,6 +31,7 @@ import { ComponentDocsViewerComponent } from '../../components/component-docs-vi CpsTreeTableColumnSortableDirective, CpsTreeTableColumnFilterDirective, CpsTreeTableHeaderSelectableDirective, + CpsTreeTableColumnResizableDirective, CpsTabGroupComponent, CpsTabComponent, CpsButtonToggleComponent, diff --git a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.cy.ts deleted file mode 100644 index 1bbf7e1b..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.cy.ts +++ /dev/null @@ -1,83 +0,0 @@ -import { CpsAutocompleteComponent } from './cps-autocomplete.component'; - -describe('CpsAutocompleteComponent', () => { - const options = [ - { name: 'New York', data: { code: 'NY' } }, - { name: 'Prague', data: { code: 'PRG' }, info: 'Prague info' }, - { name: 'Capetown', data: { code: 'CPT' }, info: 'Capetown info' }, - { name: 'Rome', data: { code: 'RM' } }, - { name: 'London', data: { code: 'LDN' }, info: 'London info' }, - { name: 'Istanbul', data: { code: 'IST' } }, - { name: 'Paris', data: { code: 'PRS' } }, - { name: 'Tokyo', data: { code: 'TOK' } }, - { name: 'Oslo', data: { code: 'OSL' }, info: 'Oslo info' }, - { name: 'Berlin', data: { code: 'BER' } } - ]; - - const config = { - componentProperties: { - options, - optionLabel: 'name' - } - }; - - // Cypress.on('uncaught:exception', (_err, runnable) => { - // return false; - // }); - - it('should mount', () => { - cy.mount(CpsAutocompleteComponent); - }); - - it('should display the correct placeholder text', () => { - const placeholder = 'Select a city'; - cy.mount(CpsAutocompleteComponent, { - componentProperties: { - ...config.componentProperties, - placeholder - } - }); - cy.get('.cps-autocomplete-box-input').should( - 'have.attr', - 'placeholder', - placeholder - ); - }); - - // it('should open dropdown and select first option', () => { - // cy.mount(CpsAutocompleteComponent, config).then(() => { - // cy.get('[data-cy-id=cps-autocomplete]').click(); - // cy.get('[data-cy-id=cps-autocomplete-options]').should( - // 'have.length', - // options.length - // ); - // cy.get('[data-cy-id=cps-autocomplete-options]').first().click(); - // cy.get('.single-item-selection span').should( - // 'have.text', - // options[0].name - // ); - // }); - // }); - - // it('should display chips when multiple options are selected', () => { - // cy.mount(CpsAutocompleteComponent, { - // componentProperties: { - // ...config.componentProperties, - // multiple: true, - // chips: true - // } - // }); - // cy.get('[data-cy-id=cps-autocomplete]').click(); - // cy.get('[data-cy-id=cps-autocomplete-options]').first().click(); - // cy.get('[data-cy-id=cps-autocomplete-options]').eq(1).click(); - // cy.get('cps-chip').should('have.length', 2); - // }); - - // it('should scroll to previously selected value when opened again', () => { - // cy.mount(CpsAutocompleteComponent, config); - // cy.get('[data-cy-id=cps-autocomplete]').click(); - // cy.get('[data-cy-id=cps-autocomplete-options]').last().click(); - // cy.get('[data-cy-id=cps-autocomplete]').click(); - // cy.get('[data-cy-id=cps-autocomplete-options]').last().should('be.visible'); - // }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.cy.ts deleted file mode 100644 index 959f5840..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsButtonToggleComponent } from './cps-button-toggle.component'; - -describe('CpsButtonToggleComponent', () => { - it('should mount', () => { - cy.mount(CpsButtonToggleComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.cy.ts deleted file mode 100644 index 06084d40..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsButtonComponent } from './cps-button.component'; - -describe('CpsButtonComponent', () => { - it('should mount', () => { - cy.mount(CpsButtonComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-checkbox/cps-checkbox.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-checkbox/cps-checkbox.component.cy.ts deleted file mode 100644 index 3f67b5d7..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-checkbox/cps-checkbox.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsCheckboxComponent } from './cps-checkbox.component'; - -describe('CpsCheckboxComponent', () => { - it('should mount', () => { - cy.mount(CpsCheckboxComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.cy.ts deleted file mode 100644 index 22f38269..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsChipComponent } from './cps-chip.component'; - -describe('CpsChipComponent', () => { - it('should mount', () => { - cy.mount(CpsChipComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-datepicker/cps-datepicker.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-datepicker/cps-datepicker.component.cy.ts deleted file mode 100644 index a59a2df5..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-datepicker/cps-datepicker.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsDatepickerComponent } from './cps-datepicker.component'; - -describe('CpsDatepickerComponent', () => { - it('should mount', () => { - cy.mount(CpsDatepickerComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-divider/cps-divider.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-divider/cps-divider.component.cy.ts deleted file mode 100644 index 17a70b7a..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-divider/cps-divider.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsDividerComponent } from './cps-divider.component'; - -describe('CpsDividerComponent', () => { - it('should mount', () => { - cy.mount(CpsDividerComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-expansion-panel/cps-expansion-panel.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-expansion-panel/cps-expansion-panel.component.cy.ts deleted file mode 100644 index 4121b225..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-expansion-panel/cps-expansion-panel.component.cy.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { CpsExpansionPanelComponent } from './cps-expansion-panel.component'; - -describe('CpsExpansionPanelComponent', () => { - it('should mount', () => { - cy.mount(CpsExpansionPanelComponent, { - imports: [BrowserAnimationsModule] - }); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.cy.ts deleted file mode 100644 index 19f0ebbb..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsFileUploadComponent } from './cps-file-upload.component'; - -describe('CpsFileUploadComponent', () => { - it('should mount', () => { - cy.mount(CpsFileUploadComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.cy.ts deleted file mode 100644 index 0f56046f..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsIconComponent } from './cps-icon.component'; - -describe('CpsIconComponent', () => { - it('should mount', () => { - cy.mount(CpsIconComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-info-circle/cps-info-circle.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-info-circle/cps-info-circle.component.cy.ts deleted file mode 100644 index 220ce308..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-info-circle/cps-info-circle.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsInfoCircleComponent } from './cps-info-circle.component'; - -describe('CpsInfoCircleComponent', () => { - it('should mount', () => { - cy.mount(CpsInfoCircleComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.cy.ts deleted file mode 100644 index ba744ac8..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsInputComponent } from './cps-input.component'; - -describe('CpsIconComponent', () => { - it('should mount', () => { - cy.mount(CpsInputComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-loader/cps-loader.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-loader/cps-loader.component.cy.ts deleted file mode 100644 index 12c0fd15..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-loader/cps-loader.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsLoaderComponent } from './cps-loader.component'; - -describe('CpsLoaderComponent', () => { - it('should mount', () => { - cy.mount(CpsLoaderComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.cy.ts deleted file mode 100644 index 31f7f530..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsMenuComponent } from './cps-menu.component'; - -describe('CpsMenuComponent', () => { - it('should mount', () => { - cy.mount(CpsMenuComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-paginator/cps-paginator.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-paginator/cps-paginator.component.cy.ts deleted file mode 100644 index c3f6739f..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-paginator/cps-paginator.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsPaginatorComponent } from './cps-paginator.component'; - -describe('CpsPaginatorComponent', () => { - it('should mount', () => { - cy.mount(CpsPaginatorComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-progress-circular/cps-progress-circular.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-progress-circular/cps-progress-circular.component.cy.ts deleted file mode 100644 index 9937c576..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-progress-circular/cps-progress-circular.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsProgressCircularComponent } from './cps-progress-circular.component'; - -describe('CpsProgressCircularComponent', () => { - it('should mount', () => { - cy.mount(CpsProgressCircularComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.cy.ts deleted file mode 100644 index a56b48b6..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsProgressLinearComponent } from './cps-progress-linear.component'; - -describe('CpsProgressLinearComponent', () => { - it('should mount', () => { - cy.mount(CpsProgressLinearComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-button/cps-radio-button.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-button/cps-radio-button.component.cy.ts deleted file mode 100644 index eda38ec2..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-button/cps-radio-button.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsRadioButtonComponent } from './cps-radio-button.component'; - -describe('CpsRadioButtonComponent', () => { - it('should mount', () => { - cy.mount(CpsRadioButtonComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.cy.ts deleted file mode 100644 index 83b8ba88..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsRadioGroupComponent } from './cps-radio-group.component'; - -describe('CpsRadioGroupComponent', () => { - it('should mount', () => { - cy.mount(CpsRadioGroupComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio/cps-radio.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio/cps-radio.component.cy.ts deleted file mode 100644 index a02e1a8d..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio/cps-radio.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsRadioComponent } from './cps-radio.component'; - -describe('CpsRadioComponent', () => { - it('should mount', () => { - cy.mount(CpsRadioComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-scheduler/cps-scheduler.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-scheduler/cps-scheduler.component.cy.ts deleted file mode 100644 index 8e2d2dc8..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-scheduler/cps-scheduler.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsSchedulerComponent } from './cps-scheduler.component'; - -describe('CpsSchedulerComponent', () => { - it('should mount', () => { - cy.mount(CpsSchedulerComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.cy.ts deleted file mode 100644 index acd065a9..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsSelectComponent } from './cps-select.component'; - -describe('CpsSelectComponent', () => { - it('should mount', () => { - cy.mount(CpsSelectComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.cy.ts deleted file mode 100644 index 8d28c024..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsSidebarMenuComponent } from './cps-sidebar-menu.component'; - -describe('CpsSidebarMenuComponent', () => { - it('should mount', () => { - cy.mount(CpsSidebarMenuComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.cy.ts deleted file mode 100644 index 2e015f2e..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-switch/cps-switch.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsSwitchComponent } from './cps-switch.component'; - -describe('CpsSwitchComponent', () => { - it('should mount', () => { - cy.mount(CpsSwitchComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.cy.ts deleted file mode 100644 index f7c3e6c2..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.cy.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { Component } from '@angular/core'; -import { getTestBed } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { CpsTabGroupComponent } from './cps-tab-group.component'; -import { CpsTabComponent } from './cps-tab/cps-tab.component'; - -@Component({ - template: ` - - -
This is content for Tab 1
- - -
This is content for Tab 2
- - - ` -}) -export class MockTabGroupComponent {} - -describe('CpsTabGroupComponent', () => { - beforeEach(() => { - getTestBed().resetTestingModule(); - }); - - it('should create and select first tab by default', () => { - cy.mount(MockTabGroupComponent, { - imports: [CpsTabGroupComponent, CpsTabComponent, NoopAnimationsModule] - }); - cy.get('li').should('have.length', 2); - cy.get('li.active a').should('contain.text', 'Tab 1'); - cy.get('#tab-content-1').should('be.visible'); - cy.get('#tab-content-2').should('not.exist'); - }); - - it('should switch tabs on click', () => { - cy.mount(MockTabGroupComponent, { - imports: [CpsTabGroupComponent, CpsTabComponent, NoopAnimationsModule] - }); - cy.get('li').eq(1).click(); - cy.get('li.active a').should('contain.text', 'Tab 2'); - cy.get('#tab-content-2').should('be.visible'); - cy.get('#tab-content-1').should('not.exist'); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab/cps-tab.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab/cps-tab.component.cy.ts deleted file mode 100644 index 75bd61de..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab/cps-tab.component.cy.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { getTestBed } from '@angular/core/testing'; -import { CpsIconComponent } from 'projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component'; -import { CpsTabComponent } from './cps-tab.component'; - -describe('CpsTabComponent', () => { - beforeEach(() => { - getTestBed().resetTestingModule(); - }); - - it('should create', () => { - cy.mount( - ` - -
This is the test content
- - `, - { - imports: [CpsTabComponent, CommonModule, CpsIconComponent] - } - ).then(() => { - cy.get('cps-tab').should('not.contain.text', 'Test Tab'); - cy.get('[label="Test Tab"]').should('exist'); - cy.get('#test-content').should('exist'); - cy.get('#test-content').should( - 'contain.text', - 'This is the test content' - ); - }); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.cy.ts deleted file mode 100644 index 7e446f89..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsTableComponent } from './cps-table.component'; - -describe('CpsTableComponent', () => { - it('should mount', () => { - cy.mount(CpsTableComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.html b/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.html index 5e56a7e4..e0656ebe 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.html +++ b/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.html @@ -35,6 +35,8 @@ [sortMode]="sortMode" [exportFilename]="exportFilename" [csvSeparator]="csvSeparator" + [resizableColumns]="resizableColumns" + [columnResizeMode]="columnResizeMode" (onPage)="onPageChange($event)" (onLazyLoad)="onLazyLoaded($event)" (sortFunction)="onSortFunction($event)" @@ -184,9 +186,21 @@ - - - + + + @@ -210,13 +224,17 @@ (autoColumnFilterType ? (data | cpsTableDetectFilterType: col[colFieldName]) : 'text') - "> + " + cpsTColResizable + [cpsTColResizableDisabled]="!resizableColumns"> {{ col[colHeaderName] }} } @else { + [cpsTColSortable]="col[colFieldName]" + cpsTColResizable + [cpsTColResizableDisabled]="!resizableColumns"> {{ col[colHeaderName] }} } @@ -231,20 +249,27 @@ (autoColumnFilterType ? (data | cpsTableDetectFilterType: col[colFieldName]) : 'text') - "> + " + cpsTColResizable + [cpsTColResizableDisabled]="!resizableColumns"> {{ col[colHeaderName] }} } @else { - + {{ col[colHeaderName] }} } + cpsTColResizable + [cpsTColResizableDisabled]="!resizableColumns"> diff --git a/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.scss b/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.scss index 76c14a5a..2587d88f 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.scss +++ b/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.scss @@ -39,6 +39,10 @@ $tbar-normal-height: 72px; } .p-datatable { position: relative; + + .p-column-resizer-helper { + background: $color-calm; + } } .p-datatable.p-datatable-gridlines .p-datatable-header { diff --git a/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.ts b/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.ts index 64f3f3fe..94b69ce0 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.ts +++ b/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.ts @@ -31,6 +31,7 @@ import { convertSize } from '../../utils/internal/size-utils'; import { isEqual } from 'lodash-es'; import { CpsTableColumnFilterDirective } from './directives/cps-table-column-filter.directive'; import { CpsTableDetectFilterTypePipe } from './pipes/cps-table-detect-filter-type.pipe'; +import { CpsTableColumnResizableDirective } from './directives/cps-table-column-resizable.directive'; // import jsPDF from 'jspdf'; // import 'jspdf-autotable'; @@ -85,6 +86,7 @@ export type CpsTableSortMode = 'single' | 'multiple'; TableRowMenuComponent, CpsTableColumnSortableDirective, CpsTableColumnFilterDirective, + CpsTableColumnResizableDirective, CpsTableDetectFilterTypePipe ], templateUrl: './cps-table.component.html', @@ -531,6 +533,21 @@ export class CpsTableComponent implements OnInit, AfterViewChecked, OnChanges { return this._data; } + /** + * Determines whether columns are resizable. + * In case of using a custom template for columns, it is also needed to add cpsTColResizable directive to th elements. + * @group Props + */ + @Input() resizableColumns = false; + + /** + * Determines how the columns are resized. It can be 'fit' (total width of the table stays the same) or 'expand' (total width of the table changes when resizing columns). + * Note: This setting only takes effect if 'resizableColumns' is true. + * + * @group Props + */ + @Input() columnResizeMode: 'fit' | 'expand' = 'fit'; + /** * Callback to invoke on selection changed. Returns selected rows. * @param {any[]} any[] - selected rows. diff --git a/projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-column-resizable.directive.ts b/projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-column-resizable.directive.ts new file mode 100644 index 00000000..8d1d8d72 --- /dev/null +++ b/projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-column-resizable.directive.ts @@ -0,0 +1,20 @@ +import { Directive, Input } from '@angular/core'; +import { ResizableColumn } from 'primeng/table'; + +/** + * CpsTableColumnResizableDirective is a directive to enable column resizing in a table. + * @group Directives + */ +@Directive({ + standalone: true, + selector: '[cpsTColResizable]' +}) +export class CpsTableColumnResizableDirective extends ResizableColumn { + /** + * Whether the column resizing should be disabled. + * @group Props + */ + @Input('cpsTColResizableDisabled') override pResizableColumnDisabled: + | boolean + | undefined; +} diff --git a/projects/cps-ui-kit/src/lib/components/cps-tag/cps-tag.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-tag/cps-tag.component.cy.ts deleted file mode 100644 index bf62300d..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-tag/cps-tag.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsTagComponent } from './cps-tag.component'; - -describe('CpsTagComponent', () => { - it('should mount', () => { - cy.mount(CpsTagComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-textarea/cps-textarea.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-textarea/cps-textarea.component.cy.ts deleted file mode 100644 index 4418d1f9..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-textarea/cps-textarea.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsTextareaComponent } from './cps-textarea.component'; - -describe('CpsTextareaComponent', () => { - it('should mount', () => { - cy.mount(CpsTextareaComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-timepicker/cps-timepicker.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-timepicker/cps-timepicker.component.cy.ts deleted file mode 100644 index 08f2567e..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-timepicker/cps-timepicker.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsTimepickerComponent } from './cps-timepicker.component'; - -describe('CpsTimepickerComponent', () => { - it('should mount', () => { - cy.mount(CpsTimepickerComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.cy.ts deleted file mode 100644 index 5c38e25b..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsTreeAutocompleteComponent } from './cps-tree-autocomplete.component'; - -describe('CpsTreeAutocompleteComponent', () => { - it('should mount', () => { - cy.mount(CpsTreeAutocompleteComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-tree-select/cps-tree-select.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-tree-select/cps-tree-select.component.cy.ts deleted file mode 100644 index 60a48dfa..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-tree-select/cps-tree-select.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsTreeSelectComponent } from './cps-tree-select.component'; - -describe('CpsTreeSelectComponent', () => { - it('should mount', () => { - cy.mount(CpsTreeSelectComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.cy.ts b/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.cy.ts deleted file mode 100644 index 01677b23..00000000 --- a/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.cy.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CpsTreeTableComponent } from './cps-tree-table.component'; - -describe('CpsTreeTableComponent', () => { - it('should mount', () => { - cy.mount(CpsTreeTableComponent); - }); -}); diff --git a/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.html b/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.html index cb562094..757cf0f6 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.html +++ b/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.html @@ -38,6 +38,8 @@ [first]="first" [totalRecords]="totalRecords" [resetPageOnSort]="resetPageOnSort" + [resizableColumns]="resizableColumns" + [columnResizeMode]="columnResizeMode" currentPageReportTemplate="{first} - {last} of {totalRecords}" (onPage)="onPageChange($event)" (onSort)="onSort($event)" @@ -48,6 +50,11 @@ (onNodeCollapse)="onNodeCollapsed($event)" (onNodeSelect)="onNodeSelected($event)" (onNodeUnselect)="onNodeUnselected($event)"> + @if (colgroupTemplate) { + + + + } @@ -176,7 +183,11 @@ - + + " + cpsTTColResizable + [cpsTTColResizableDisabled]="!resizableColumns"> {{ col[colHeaderName] }} } @else { + [cpsTTColSortable]="col[colFieldName]" + cpsTTColResizable + [cpsTTColResizableDisabled]="!resizableColumns"> {{ col[colHeaderName] }} } @@ -219,11 +234,16 @@ (autoColumnFilterType ? (data | cpsTTDetectFilterType: col[colFieldName]) : 'text') - "> + " + cpsTTColResizable + [cpsTTColResizableDisabled]="!resizableColumns"> {{ col[colHeaderName] }} } @else { - + {{ col[colHeaderName] }} } @@ -231,7 +251,9 @@ + *ngIf="showRowMenu && (showRowRemoveButton || showRowEditButton)" + cpsTTColResizable + [cpsTTColResizableDisabled]="!resizableColumns"> diff --git a/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.scss b/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.scss index d3709b1a..d913e9db 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.scss +++ b/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.scss @@ -589,7 +589,7 @@ $tbar-normal-height: 72px; cursor: auto; } .p-treetable .p-column-resizer-helper { - background: #3b82f6; + background: $color-calm; } .p-treetable .p-treetable-loading-overlay { @@ -744,7 +744,10 @@ $tbar-normal-height: 72px; color: $body-text-color; border: 2px solid $checkbox-border-color; border-radius: 2px; - transition: background-color 0.2s, color 0.2s, border-color 0.2s, + transition: + background-color 0.2s, + color 0.2s, + border-color 0.2s, box-shadow 0.2s; } @@ -834,7 +837,8 @@ $tbar-normal-height: 72px; box-sizing: border-box; position: relative; flex-shrink: 0; - transition: border-color 90ms cubic-bezier(0, 0, 0.2, 0.1), + transition: + border-color 90ms cubic-bezier(0, 0, 0.2, 0.1), background-color 90ms cubic-bezier(0, 0, 0.2, 0.1); margin-right: 8px; opacity: 0; diff --git a/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts b/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts index 065359b7..ae61e02a 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts +++ b/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts @@ -49,6 +49,7 @@ import { CpsTreetableRowTogglerDirective } from './directives/cps-tree-table-row import { Subscription, fromEvent } from 'rxjs'; import { CpsTreeTableColumnFilterDirective } from './directives/cps-tree-table-column-filter.directive'; import { CpsTreeTableDetectFilterTypePipe } from './pipes/cps-tree-table-detect-filter-type.pipe'; +import { CpsTreeTableColumnResizableDirective } from './directives/cps-tree-table-column-resizable.directive'; export function treeTableFactory(tableComponent: CpsTreeTableComponent) { return tableComponent.primengTreeTable; @@ -99,6 +100,7 @@ export type CpsTreeTableSortMode = 'single' | 'multiple'; CpsTreeTableHeaderSelectableDirective, CpsTreeTableRowSelectableDirective, CpsTreetableRowTogglerDirective, + CpsTreeTableColumnResizableDirective, TreeTableUnsortDirective, TableRowMenuComponent, CpsTreeTableDetectFilterTypePipe @@ -544,6 +546,21 @@ export class CpsTreeTableComponent return this._data; } + /** + * Determines whether columns are resizable. + * In case of using a custom template for columns, it is also needed to add cpsTTColResizable directive to th elements. + * @group Props + */ + @Input() resizableColumns = false; + + /** + * Determines how the columns are resized. It can be 'fit' (total width of the table stays the same) or 'expand' (total width of the table changes when resizing columns). + * Note: This setting only takes effect if 'resizableColumns' is true. + * + * @group Props + */ + @Input() columnResizeMode: 'fit' | 'expand' = 'fit'; + /** * Callback to invoke on selected rows change. * @param {any[]} any[] - selected rows. @@ -668,6 +685,9 @@ export class CpsTreeTableComponent @ContentChild('body', { static: false }) public bodyTemplate!: TemplateRef; + @ContentChild('colgroup', { static: false }) + public colgroupTemplate?: TemplateRef; + @ViewChild('primengTreeTable', { static: true }) primengTreeTable!: TreeTable; diff --git a/projects/cps-ui-kit/src/lib/components/cps-tree-table/directives/cps-tree-table-column-resizable.directive.ts b/projects/cps-ui-kit/src/lib/components/cps-tree-table/directives/cps-tree-table-column-resizable.directive.ts new file mode 100644 index 00000000..3f3c7a4e --- /dev/null +++ b/projects/cps-ui-kit/src/lib/components/cps-tree-table/directives/cps-tree-table-column-resizable.directive.ts @@ -0,0 +1,20 @@ +import { Directive, Input } from '@angular/core'; +import { TTResizableColumn } from 'primeng/treetable'; + +/** + * CpsTreeTableColumnResizableDirective is a directive to enable column resizing in a treetable. + * @group Directives + */ +@Directive({ + standalone: true, + selector: '[cpsTTColResizable]' +}) +export class CpsTreeTableColumnResizableDirective extends TTResizableColumn { + /** + * Whether the column resizing should be disabled. + * @group Props + */ + @Input('cpsTTColResizableDisabled') override ttResizableColumnDisabled: + | boolean + | undefined; +} diff --git a/projects/cps-ui-kit/src/public-api.ts b/projects/cps-ui-kit/src/public-api.ts index 1a6817d6..0141399e 100644 --- a/projects/cps-ui-kit/src/public-api.ts +++ b/projects/cps-ui-kit/src/public-api.ts @@ -16,6 +16,7 @@ export * from './lib/components/cps-radio-group/cps-radio-group.component'; export * from './lib/components/cps-table/cps-table.component'; export * from './lib/components/cps-table/directives/cps-table-column-sortable.directive'; export * from './lib/components/cps-table/directives/cps-table-column-filter.directive'; +export * from './lib/components/cps-table/directives/cps-table-column-resizable.directive'; export * from './lib/components/cps-table/directives/cps-table-header-selectable.directive'; export * from './lib/components/cps-table/directives/cps-table-row-selectable.directive'; export * from './lib/components/cps-table/cps-column-filter-types'; @@ -23,6 +24,7 @@ export * from './lib/components/cps-table/pipes/cps-table-detect-filter-type.pip export * from './lib/components/cps-tree-table/cps-tree-table.component'; export * from './lib/components/cps-tree-table/directives/cps-tree-table-column-sortable.directive'; export * from './lib/components/cps-tree-table/directives/cps-tree-table-column-filter.directive'; +export * from './lib/components/cps-tree-table/directives/cps-tree-table-column-resizable.directive'; export * from './lib/components/cps-tree-table/directives/cps-tree-table-row-toggler.directive'; export * from './lib/components/cps-tree-table/directives/cps-tree-table-header-selectable.directive'; export * from './lib/components/cps-tree-table/directives/cps-tree-table-row-selectable.directive'; diff --git a/tsconfig.generator.json b/tsconfig.generator.json index 0d4103b2..787c98ae 100644 --- a/tsconfig.generator.json +++ b/tsconfig.generator.json @@ -3,5 +3,9 @@ "compilerOptions": { "skipLibCheck": true }, - "exclude": ["projects/composition/**", "./node_modules/**"] + "exclude": [ + "projects/composition/**", + "./node_modules/**", + "projects/cps-ui-kit/**/*.spec.ts" + ] }