diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts index 73d542b03..1bfd226e1 100644 --- a/packages/ketchup/src/components.d.ts +++ b/packages/ketchup/src/components.d.ts @@ -1216,6 +1216,11 @@ export namespace Components { * @returns List of props as object, each key will be a prop. */ "getProps": (descriptions?: boolean) => Promise; + /** + * When set,will be shown a label on the chips + * @default null + */ + "label": string; /** * This method is used to trigger a new render of the component. */ @@ -7186,6 +7191,11 @@ declare namespace LocalJSX { * @default false */ "enableInput"?: boolean; + /** + * When set,will be shown a label on the chips + * @default null + */ + "label"?: string; /** * Triggered when a chip loses focus. */ diff --git a/packages/ketchup/src/components/kup-chip/kup-chip.scss b/packages/ketchup/src/components/kup-chip/kup-chip.scss index 42bd6c47d..c50e32fd1 100644 --- a/packages/ketchup/src/components/kup-chip/kup-chip.scss +++ b/packages/ketchup/src/components/kup-chip/kup-chip.scss @@ -16,6 +16,4 @@ * @prop --kup-chip-text-color-rgb: Sets text color RGB values of the component (used for shaders). */ -:host { - display: block; -} +@import url('./styles/kup-chip-main.scss'); diff --git a/packages/ketchup/src/components/kup-chip/kup-chip.tsx b/packages/ketchup/src/components/kup-chip/kup-chip.tsx index 59ede2489..eb1e27e3c 100644 --- a/packages/ketchup/src/components/kup-chip/kup-chip.tsx +++ b/packages/ketchup/src/components/kup-chip/kup-chip.tsx @@ -95,6 +95,11 @@ export class KupChip { */ @Prop() displayMode: ItemsDisplayMode = ItemsDisplayMode.DESCRIPTION; + /** + * When set,will be shown a label on the chips + * @default null + */ + @Prop() label: string = null; /*-------------------------------------------------*/ /* I n t e r n a l V a r i a b l e s */ /*-------------------------------------------------*/ @@ -452,6 +457,11 @@ export class KupChip { )}
+ {this.label ? ( +
+ +
+ ) : null} {this.data?.length > 0 ? : null}
diff --git a/packages/ketchup/src/components/kup-chip/readme.md b/packages/ketchup/src/components/kup-chip/readme.md index 1e512c1e6..51ed9f27e 100644 --- a/packages/ketchup/src/components/kup-chip/readme.md +++ b/packages/ketchup/src/components/kup-chip/readme.md @@ -11,6 +11,7 @@ | `data` | -- | List of elements. | `KupChipNode[]` | `[]` | | `displayMode` | `display-mode` | When enabled, the chip's text will display both the id and description. | `ItemsDisplayMode.CODE \| ItemsDisplayMode.CODE_AND_DESC \| ItemsDisplayMode.CODE_AND_DESC_ALIAS \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESC_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | | `enableInput` | `enable-input` | When enabled, it's possible to add items to the chip's dataset through an input slot (kup-autocomplete, kup-combobox, kup-text-field). | `boolean` | `false` | +| `label` | `label` | When set,will be shown a label on the chips | `string` | `null` | | `sizing` | `sizing` | Sets the size of the chip | `FChipSize.MEDIUM \| FChipSize.SMALL` | `FChipSize.SMALL` | | `styling` | `styling` | Sets the style of the chip | `FChipStyling.OUTLINED \| FChipStyling.RAISED` | `FChipStyling.RAISED` | | `type` | `type` | The type of chip. Available types: input, filter, choice or empty for default. | `FChipType.CHOICE \| FChipType.FILTER \| FChipType.INPUT \| FChipType.STANDARD` | `FChipType.STANDARD` | diff --git a/packages/ketchup/src/components/kup-chip/styles/kup-chip-main.scss b/packages/ketchup/src/components/kup-chip/styles/kup-chip-main.scss new file mode 100644 index 000000000..e6bb3ae1b --- /dev/null +++ b/packages/ketchup/src/components/kup-chip/styles/kup-chip-main.scss @@ -0,0 +1,7 @@ +:host { + display: block; +} + +.mdc-text-field__label-container { + padding-bottom: 4px; +} diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx index b101bed56..fd4f93ade 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx @@ -1388,7 +1388,6 @@ export class KupInputPanel { currentValue: string ) { const configCMandACP = CMBandACPAdapter(currentValue, fieldLabel, []); - if (rawOptions) { configCMandACP.data['kup-list'].data = this.#optionsTreeComboAdapter(rawOptions, currentValue); @@ -1785,7 +1784,6 @@ export class KupInputPanel { cell.shape === FCellShapes.MULTI_AUTOCOMPLETE ? cell.slotData.data['kup-list'] : cell.data?.data?.['kup-list']; - if (kupListData) { kupListData.data = filteredRows?.length ? this.#optionsTreeComboAdapter( diff --git a/packages/ketchup/src/f-components/f-cell/f-cell.tsx b/packages/ketchup/src/f-components/f-cell/f-cell.tsx index c9be92538..cdb0f2abf 100644 --- a/packages/ketchup/src/f-components/f-cell/f-cell.tsx +++ b/packages/ketchup/src/f-components/f-cell/f-cell.tsx @@ -783,13 +783,14 @@ function setEditableCell( ); case FCellTypes.FILE_UPLOAD: return ; - case FCellTypes.MULTI_AUTOCOMPLETE: + case FCellTypes.MULTI_AUTOCOMPLETE: { return ( ); + } case FCellTypes.MULTI_COMBOBOX: return (