Merge pull request #2546 from apuliasoft/LS25000976

LS25000976: Posizionamento label AML
smeup · Mar 3, 2025 · cebafff · cebafff
2 parents cd54f17 + 51ef3e2
commit cebafff
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 8 deletions.
diff --git 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<GenericObject>;
+        /**
+          * 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
@@ -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
@@ -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 {
                     )}
                 </style>
                 <div id={componentWrapperId}>
+                    {this.label ? (
+                        <div class="mdc-text-field__label-container">
+                            <label>{this.label}</label>
+                        </div>
+                    ) : null}
                     {this.data?.length > 0 ? <FChip {...props} /> : null}
                     <slot name="field"></slot>
                 </div>

diff --git 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
@@ -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
@@ -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
@@ -783,13 +783,14 @@ function setEditableCell(
             );
         case FCellTypes.FILE_UPLOAD:
             return <kup-file-upload {...cell.data} />;
-        case FCellTypes.MULTI_AUTOCOMPLETE:
+        case FCellTypes.MULTI_AUTOCOMPLETE: {
             return (
                 <kup-chip
                     displayMode={
                         cell.data.displayMode ?? ItemsDisplayMode.DESCRIPTION
                     }
                     {...cell.data}
+                    label={cell.slotData?.label ?? ''}
                     type={FChipType.INPUT}
                     enableInput={true}
                     onKup-chip-change={(
@@ -818,13 +819,18 @@ function setEditableCell(
                                 FCellEvents.ICON_CLICK
                             )
                         }
-                        showDropDownIcon={false}
-                        {...cell.slotData}
+                        data={cell.slotData?.data}
+                        initialValue={cell.slotData?.initialValue}
+                        showDropDownIcon={cell.slotData?.showDropDownIcon}
+                        style={cell.slotData?.style}
+                        disabled={cell.slotData?.disabled}
+                        id={cell.slotData?.id}
                         error={cell.data.error}
                         showMarker={cell.tooltip ?? false}
                     ></kup-autocomplete>
                 </kup-chip>
             );
+        }
         case FCellTypes.MULTI_COMBOBOX:
             return (
                 <kup-chip