diff --git a/packages/ketchup/src/assets/snackbar.js b/packages/ketchup/src/assets/snackbar.js index d2e711d914..0efc23265a 100644 --- a/packages/ketchup/src/assets/snackbar.js +++ b/packages/ketchup/src/assets/snackbar.js @@ -2,7 +2,8 @@ const bottomButton = document.getElementById('bottom'); const topButton = document.getElementById('top'); const snackbar = document.getElementById('snackbar'); const props = { - text: 'This is a snackbar demo', + header: 'This is a snackbar title', + text: 'This is a snackbar text', actionButton: { label: 'Action', styling: 'flat' }, closeButton: true, timeout: 2000, diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts index 51abc05493..397490d01b 100644 --- a/packages/ketchup/src/components.d.ts +++ b/packages/ketchup/src/components.d.ts @@ -3313,6 +3313,11 @@ export namespace Components { * @returns List of props as object, each key will be a prop. */ "getProps": (descriptions?: boolean) => Promise; + /** + * Sets the textual content of the snackbar. + * @default '' + */ + "header": string; /** * Hides the snackbar. */ @@ -7863,6 +7868,11 @@ declare namespace LocalJSX { * @see https://ketchup.smeup.com/ketchup-showcase/#/customization */ "customStyle"?: string; + /** + * Sets the textual content of the snackbar. + * @default '' + */ + "header"?: string; /** * Triggered when action button is clicked. */ diff --git a/packages/ketchup/src/components/kup-accordion/readme.md b/packages/ketchup/src/components/kup-accordion/readme.md index 7b43021632..e7e4e18a7f 100644 --- a/packages/ketchup/src/components/kup-accordion/readme.md +++ b/packages/ketchup/src/components/kup-accordion/readme.md @@ -5,11 +5,12 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | -------------- | --------------------------------------------------------------- | ------------------ | ------- | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | Data of the accordion. | `KupAccordionData` | `null` | -| `ripple` | `ripple` | When enabled displays Material's ripple effect on item headers. | `boolean` | `true` | +| Property | Attribute | Description | Type | Default | +| ------------- | -------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | --------------------------- | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | Data of the accordion. | `KupAccordionData` | `null` | +| `ripple` | `ripple` | When enabled displays Material's ripple effect on item headers. | `boolean` | `false` | +| `sizing` | `sizing` | Sets the type of the button | `KupComponentSizing.LARGE \| KupComponentSizing.MAX \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.MEDIUM` | ## Events diff --git a/packages/ketchup/src/components/kup-combobox/styles/kup-combobox-classes.scss b/packages/ketchup/src/components/kup-combobox/styles/kup-combobox-classes.scss index 90bb0de1df..91481d5b0f 100644 --- a/packages/ketchup/src/components/kup-combobox/styles/kup-combobox-classes.scss +++ b/packages/ketchup/src/components/kup-combobox/styles/kup-combobox-classes.scss @@ -42,3 +42,23 @@ --kup-textfield-primary-color: var(--kup-warning-color); --kup-textfield-primary-color-rgb: var(--kup-warning-color-rgb); } + +:host(.page-selector), +:host(.rows-selector) { + .f-text-field { + .mdc-text-field { + border-bottom: none !important; + width: max-content !important; + } + .mdc-text-field-container { + flex-direction: row !important; + .mdc-text-field__label-container { + white-space: nowrap; + @include kup-body-compact-01; + } + } + .mdc-text-field-helper-line { + display: none; + } + } +} diff --git a/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx b/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx index 5559887b9a..0facb1eaa8 100644 --- a/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx +++ b/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx @@ -66,6 +66,7 @@ import { import { GenericObject, KupComponent, + KupComponentSizing, KupEventPayload, } from '../../types/GenericTypes'; import { identify, getProps, setProps } from '../../utils/utils'; @@ -587,7 +588,7 @@ export class KupDataTable { /** * When set to true it activates the global filter. */ - @Prop() globalFilter: boolean = false; + @Prop() globalFilter: boolean = true; /** * The value of the global filter. */ @@ -651,7 +652,7 @@ export class KupDataTable { /** * Sets the position of the paginator. Available positions: top, bottom or both. */ - @Prop() paginatorPos: PaginatorPos = PaginatorPos.TOP; + @Prop() paginatorPos: PaginatorPos = PaginatorPos.BOTTOM; /** * Sets the possibility to remove the selected column. */ @@ -5668,7 +5669,9 @@ export class KupDataTable { )}
-
+
{paginatorTop}
+
{groupChips}
+
{this.globalFilter ? (
) : null} - {paginatorTop} -
-
{groupChips}
-
+ {this.insertMode !== '' && + this.selectedRows.length > 0 ? ( + { + this.kupSave.emit({ + comp: this, + id: this.rootElement.id, + selectedRows: this.selectedRows, + }); + }} + styling={FButtonStyling.FLAT} + sizing={KupComponentSizing.MEDIUM} + title="Save" + wrapperClass="save-button" + > + ) : null} + {this.showDeleteButton && + this.selectedRows.length > 0 ? ( + { + this.#rowsDelete(); + }} + styling={FButtonStyling.FLAT} + sizing={KupComponentSizing.MEDIUM} + title="Delete selected rows" + wrapperClass="delete-button" + > + ) : null} + {this.showHistoryButton ? ( + { + this.kupHistory.emit({ + comp: this, + id: this.rootElement.id, + selectedRows: this.selectedRows, + }); + }} + styling={FButtonStyling.FLAT} + sizing={KupComponentSizing.MEDIUM} + title="History" + wrapperClass="history-button" + > + ) : null} {this.insertMode !== '' ? ( { if (this.insertMode === 'form') { this.#rowInsertForm(); @@ -5749,54 +5795,12 @@ export class KupDataTable { await this.refresh(true); } }} - styling={FButtonStyling.OUTLINED} + sizing={KupComponentSizing.MEDIUM} + styling={FButtonStyling.RAISED} title="Insert row" wrapperClass="insert-button" > ) : null} - {this.insertMode !== '' && - this.selectedRows.length > 0 ? ( - { - this.kupSave.emit({ - comp: this, - id: this.rootElement.id, - selectedRows: this.selectedRows, - }); - }} - styling={FButtonStyling.OUTLINED} - title="Save" - wrapperClass="save-button" - > - ) : null} - {this.showDeleteButton && - this.selectedRows.length > 0 ? ( - { - this.#rowsDelete(); - }} - styling={FButtonStyling.OUTLINED} - title="Delete selected rows" - wrapperClass="delete-button" - > - ) : null} - {this.showHistoryButton ? ( - { - this.kupHistory.emit({ - comp: this, - id: this.rootElement.id, - selectedRows: this.selectedRows, - }); - }} - styling={FButtonStyling.OUTLINED} - title="History" - wrapperClass="history-button" - > - ) : null}