Table: Datepicker, AutoComplete, Select Cell Editor

stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.scss

@@ -31,7 +31,8 @@
   .chips-container {
     align-items: center;
     background-color: $modus-autocomplete-bg;
-    border: $rem-1px solid $modus-autocomplete-container-border-color;
+    border: var(--modus-autocomplete-border, #{$rem-1px solid $modus-autocomplete-container-border-color});
+    border-bottom-color: $modus-autocomplete-container-bottom-line-color;
     border-radius: 4px;
     box-sizing: border-box;
     display: flex;
@@ -59,6 +60,8 @@
       height: auto !important;
       position: relative;
 
+      --input-font-size: var(--modus-autocomplete-font-size, #{12px});
+
       &::part(input-container) {
         border: none !important;
         box-shadow: none;
@@ -163,6 +166,7 @@
 }
 
 .autocomplete .chips-container:focus-within {
-  border-color: $modus-autocomplete-container-border-active-color;
-  box-shadow: 0 0 0 1px $modus-autocomplete-container-border-active-color;
+  border: var(--modus-autocomplete-border-active, #{$rem-1px solid $modus-autocomplete-container-border-active-color});
+  box-shadow: 0 0 0 1px
+    var(--modus-autocomplete-border-active, #{$rem-1px solid $modus-autocomplete-container-border-active-color});
 }

stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.vars.scss

@@ -5,6 +5,7 @@ $modus-autocomplete-options-border-active-color: var(--modus-list-item-border-co
 $modus-autocomplete-no-results-message-color: var(--modus-autocomplete-no-results-message-color, #252a2e) !default;
 $modus-autocomplete-no-results-subtext-color: var(--modus-autocomplete-no-results-subtext-color, #252a2e) !default;
 $modus-autocomplete-container-border-color: var(--modus-input-border-bottom-color, #6a6e79) !default;
+$modus-autocomplete-container-bottom-line-color: var(--modus-input-bottom-line-color, #6a6e79) !default;
 $modus-autocomplete-container-border-active-color: var(--modus-input-border-active-line-color, #217cbb) !default;
 $modus-autocomplete-bg: var(--modus-autocomplete-bg, #fff) !default;
 $modus-autocomplete-label-color: var(--modus-autocomplete-label-color, #464b52) !default;

stencil-workspace/src/components/modus-date-input/modus-date-input.scss

@@ -95,8 +95,8 @@
     }
 
     &:focus-within {
-      border-color: $modus-input-bottom-line-active-color;
-      box-shadow: 0 0 0 1px $modus-input-bottom-line-active-color;
+      border-color: var(--modus-input-border-color, #{$rem-1px solid $modus-input-bottom-line-active-color});
+      box-shadow: 0 0 0 1px var(--modus-input-border-color, #{$rem-1px solid $modus-input-bottom-line-active-color});
 
       svg.icon-calendar path {
         fill: $modus-input-bottom-line-active-color;

stencil-workspace/src/components/modus-number-input/modus-number-input.scss

@@ -58,8 +58,8 @@
     }
 
     &:focus-within {
-      border-color: $modus-input-bottom-line-active-color;
-      box-shadow: 0 0 0 1px $modus-input-bottom-line-active-color;
+      border-color: var(--modus-input-border-color, #{$rem-1px solid $modus-input-bottom-line-active-color});
+      box-shadow: 0 0 0 1px var(--modus-input-border-color, #{$rem-1px solid $modus-input-bottom-line-active-color});
     }
 
     &.error {

stencil-workspace/src/components/modus-select/modus-select.scss

@@ -62,8 +62,8 @@
       }
 
       &:focus-within {
-        border-color: $modus-input-bottom-line-active-color;
-        box-shadow: 0 0 0 1px $modus-input-bottom-line-active-color;
+        border-color: var(--modus-input-border-color, #{$rem-1px solid $modus-input-bottom-line-active-color});
+        box-shadow: 0 0 0 1px var(--modus-input-border-color, #{$rem-1px solid $modus-input-bottom-line-active-color});
       }
 
       &.large {

stencil-workspace/src/components/modus-table/models/modus-table.models.ts

@@ -16,9 +16,14 @@ import {
   COLUMN_DEF_DATATYPE_INTEGER,
   COLUMN_DEF_DATATYPE_LINK,
   COLUMN_DEF_DATATYPE_TEXT,
-  CELL_EDIT_TYPE_DROPDOWN,
   COLUMN_DEF_DATATYPE_BADGE,
+  CELL_EDIT_TYPE_SELECT,
+  CELL_EDIT_TYPE_DATE,
+  CELL_EDIT_TYPE_AUTOCOMPLETE,
+  CELL_EDIT_TYPE_INT,
+  CELL_EDIT_TYPE_TEXT,
 } from '../modus-table.constants';
+import { ModusAutocompleteOption } from '../../modus-autocomplete/modus-autocomplete';
 
 export type ModusTableRowData = RowData;
 export type ModusTableSortingState = SortingState;
@@ -37,12 +42,23 @@ export type ModusTableColumnDataType =
   | typeof COLUMN_DEF_DATATYPE_BADGE;
 // | typeof COLUMN_DEF_DATATYPE_DATE;
 
-export type ModusTableCellEditorType = typeof CELL_EDIT_TYPE_DROPDOWN;
-// typeof CELL_EDIT_TYPE_AUTOCOMPLETE |
+export type ModusTableCellEditorType =
+  | typeof CELL_EDIT_TYPE_SELECT
+  | typeof CELL_EDIT_TYPE_TEXT
+  | typeof CELL_EDIT_TYPE_INT
+  | typeof CELL_EDIT_TYPE_AUTOCOMPLETE
+  | typeof CELL_EDIT_TYPE_DATE;
 
 export type ModusTableCellDateEditorArgs = { format: string };
-export type ModusTableCellDropdownEditorArgs = { options: unknown[] };
-export type ModusTableCellEditorArgs = ModusTableCellDropdownEditorArgs | ModusTableCellDateEditorArgs;
+export type ModusTableCellSelectEditorArgs = { options: unknown[]; optionsDisplayProp?: string };
+export type ModusTableCellAutocompleteEditorArgs = {
+  options: ModusAutocompleteOption[];
+  noResultsFoundText: string;
+  noResultsFoundSubtext: string;
+  showNoResultsFoundMessage: boolean;
+  showOptionsOnFocus: boolean;
+};
+export type ModusTableCellEditorArgs = ModusTableCellSelectEditorArgs | ModusTableCellDateEditorArgs;
 
 export type ModusTableSortingFunction<TData extends RowData> = SortingFnOption<TData> | 'sortForHyperlink' | 'sortForBadge';
 

stencil-workspace/src/components/modus-table/modus-table.constants.ts

@@ -22,14 +22,14 @@ export const COLUMN_DEF_DATATYPE_BADGE = 'badge';
 
 export const CELL_EDIT_TYPE_TEXT = COLUMN_DEF_DATATYPE_TEXT;
 export const CELL_EDIT_TYPE_INT = COLUMN_DEF_DATATYPE_INTEGER;
-export const CELL_EDIT_TYPE_DROPDOWN = 'dropdown';
+export const CELL_EDIT_TYPE_SELECT = 'select';
 export const CELL_EDIT_TYPE_AUTOCOMPLETE = 'autocomplete';
 export const CELL_EDIT_TYPE_DATE = COLUMN_DEF_DATATYPE_DATE;
 
 export const ALLOWED_CELL_EDIT_TYPES = [
   CELL_EDIT_TYPE_TEXT,
   CELL_EDIT_TYPE_INT,
-  CELL_EDIT_TYPE_DROPDOWN,
+  CELL_EDIT_TYPE_SELECT,
   CELL_EDIT_TYPE_AUTOCOMPLETE,
   CELL_EDIT_TYPE_DATE,
 ];

stencil-workspace/src/components/modus-table/modus-table.tsx

@@ -86,6 +86,10 @@
 export class ModusTable {
   @Element() element: HTMLElement;
 
+  @Prop() editableCellId: string[] = [];
+  @Watch('editableCellId') onEditableCellIdsChange(newVal: string[]) {
+    console.log('editableCellIds', newVal);
+  }
   /** (Required) To display headers in the table. */
   @Prop({ mutable: true }) columns!: ModusTableColumn<unknown>[];
   @Watch('columns') onColumnsChange(newVal: ModusTableColumn<unknown>[]) {
@@ -373,6 +377,7 @@
     this.setTableState(initialTableState);
     this.onRowsExpandableChange(this.rowsExpandable);
     this.initializeTable();
+    console.log('editableCellId232s', this.editableCellId);
   }
 
   componentWillRender(): void {

stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss

@@ -1,3 +1,10 @@
+:host {
+  --modus-autocomplete-border: none;
+  --modus-autocomplete-border-active: none;
+  --modus-autocomplete-font-size: 14px;
+  --modus-input-border-color: none;
+}
+
 .editor::part(input-container),
 .editor::part(input) {
   border: none !important;
@@ -17,3 +24,8 @@ table.density-compact {
     height: calc($rem-24px - $rem-4px) !important;
   }
 }
+
+.autocomplete-container {
+  margin-left: 4px;
+  margin-top: 5px;
+}

stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx

@@ -4,16 +4,17 @@
   KEYBOARD_ENTER,
   CELL_EDIT_TYPE_AUTOCOMPLETE,
   CELL_EDIT_TYPE_DATE,
-  CELL_EDIT_TYPE_DROPDOWN,
+  CELL_EDIT_TYPE_SELECT,
   CELL_EDIT_TYPE_TEXT,
   CELL_EDIT_TYPE_INT,
   KEYBOARD_UP,
   KEYBOARD_DOWN,
 } from '../../../modus-table.constants';
 
 import {
+  ModusTableCellAutocompleteEditorArgs,
   ModusTableCellDateEditorArgs,
-  ModusTableCellDropdownEditorArgs,
+  ModusTableCellSelectEditorArgs,
   ModusTableCellEditorArgs,
 } from '../../../models/modus-table.models';
 import { ModusDateInputEventDetails } from '../../../../modus-date-input/utils/modus-date-input.models';
@@ -25,28 +26,40 @@
 })
 export class ModusTableCellEditor {
   @Prop() args: ModusTableCellEditorArgs;
-  @Prop() value: string;
+  @Prop() dataType: string;
+  @Prop() value: any;
   @Prop() type: string;
   @Prop() valueChange: (newValue: string) => void;
   @Prop() keyDown: (e: KeyboardEvent, newValue: string) => void;
 
-  private editedValue: string;
+  private editedValue: any;
   private inputElement: HTMLElement;
+  private outsideClickListener: (event: any) => void;
 
   connectedCallback(): void {
     this.editedValue = this.value;
   }
 
   componentDidLoad(): void {
     if (this.inputElement['focusInput']) this.inputElement['focusInput']();
+
+    this.outsideClickListener = (event) => {
+      if (!this.inputElement.contains(event.target)) {
+        this.handleBlur();
+      }
+    };
+    if (this.type == 'date') document.addEventListener('click', this.outsideClickListener);
+  }
+  disconnectedCallback(): void {
+    document.removeEventListener('click', this.outsideClickListener);
   }
 
   handleBlur: () => void = () => {
-    this.valueChange(this.editedValue);
+    this.valueChange(this.editedValue as string);
   };
 
   handleKeyDown: (e: KeyboardEvent) => void = (e) => {
-    this.keyDown(e, this.editedValue);
+    this.keyDown(e, this.editedValue as string);
   };
 
   getDefaultProps = (ariaLabel) => ({
@@ -88,10 +101,12 @@
     );
   }
 
-  renderDropdownInput(): JSX.Element[] {
+  renderSelectInput(): JSX.Element[] {
     const valueKey = 'display';
-    const options = (this.args as ModusTableCellDropdownEditorArgs)?.options || [];
-    const selectedOption = options.find((option) => option[valueKey] === this.value);
+    const args = this.args as ModusTableCellSelectEditorArgs;
+    const options = args?.options || [];
+    const optionsDisplayProp = args?.optionsDisplayProp || valueKey;
+    const selectedOption = options.find((option) => option[optionsDisplayProp] === this.value) as any;
 
     function handleEnter(e: KeyboardEvent, callback: (e: KeyboardEvent) => void) {
       const code = e.key.toLowerCase();
@@ -105,13 +120,20 @@
         <modus-select
           {...this.getDefaultProps('Select input')}
           value={selectedOption}
-          options-display-prop="display"
+          options-display-prop={optionsDisplayProp}
           size="large"
           options={options}
           onInputBlur={this.handleBlur}
           onKeyDown={(e) => handleEnter(e, this.handleKeyDown)}
           onValueChange={(e: CustomEvent<unknown>) => {
-            this.editedValue = e.detail[valueKey];
+            if (this.dataType === 'badge') {
+              const { display, ...restProps } = e.detail as any;
+              this.editedValue = { ...restProps, text: display };
+            } else if (this.dataType === 'link') {
+              this.editedValue = e.detail;
+            } else {
+              this.editedValue = e.detail[valueKey];
+            }
           }}></modus-select>
       </div>
     );
@@ -121,45 +143,72 @@
     const valueKey = 'value';
     const format = (this.args as ModusTableCellDateEditorArgs)?.format;
     return (
-      <modus-date-picker>
+      <modus-date-picker onBlur={this.handleBlur} onClick={(e: MouseEvent) => e.stopPropagation()}>
         <modus-date-input
           {...this.getDefaultProps('Date input')}
           format={format}
           size="large"
           show-calendar-icon="true"
           value={this.value}
-          onClick={(e: MouseEvent) => e.stopPropagation()}
-          onValueChange={(e: CustomEvent<ModusDateInputEventDetails>) =>
-            (this.editedValue = e.detail[valueKey])
-          }></modus-date-input>
+          onValueChange={(e: CustomEvent<ModusDateInputEventDetails>) => {
+            this.editedValue = e.detail[valueKey];
+          }}></modus-date-input>
       </modus-date-picker>
     );
   }
 
   renderAutocompleteInput(): JSX.Element[] {
-    const options = ((this.args as ModusTableCellDropdownEditorArgs)?.options || []) as ModusAutocompleteOption[] | string[];
+    let options, selectedOption;
+    const args = this.args as ModusTableCellAutocompleteEditorArgs;
+    // const { noResultsFoundText, noResultsFoundSubtext, showNoResultsFoundMessage, showOptionsOnFocus } = args;
+    if (this.dataType === 'badge') {
+      options = args?.options.map((option: any) => option.text) as ModusAutocompleteOption[] | string[];
+      selectedOption = this.value['text'];
+    } else if (this.dataType === 'link') {
+      options = args?.options.map((option: any) => option.display) as ModusAutocompleteOption[] | string[];
+      selectedOption = this.value['display'];
+    } else {
+      options = (args?.options || []) as ModusAutocompleteOption[] | string[];
+      selectedOption = this.editedValue;
+    }
     return (
-      <modus-autocomplete
-        {...this.getDefaultProps('Autocomplete input')}
-        include-search-icon="false"
-        size="large"
-        // onClick={(e: MouseEvent) => e.stopPropagation()}
-        options={options}
-        // onInputBlur={this.handleBlur}
-        onOptionSelected={(e: CustomEvent<string>) => {
-          this.editedValue = e.detail;
-          this.valueChange(this.editedValue);
-        }}
-        // value={selectedOption}
-        // onKeyDown={(e) => e.stopPropagation()}
-      ></modus-autocomplete>
+      <div class="autocomplete-container">
+        <modus-autocomplete
+          {...this.getDefaultProps('Autocomplete input')}
+          include-search-icon="false"
+          size="medium"
+          //onClick={(e: MouseEvent) => e.stopPropagation()}
+          options={options}
+          onBlur={this.handleBlur}
+          onKeyDown={(e) => e.stopPropagation()}
+          onOptionSelected={(e: CustomEvent<string>) => {
+            if (this.dataType === 'badge') {
+              args?.options.map((option: any) => {
+                if (option.text == e.detail) {
+                  this.editedValue = option;
+                }
+              });
+            } else if (this.dataType === 'link') {
+              args?.options.map((option: any) => {
+                if (option.display == e.detail) {
+                  this.editedValue = option;
+                }
+              });
+            } else {
+              this.editedValue = e.detail;
+            }
+          }}
+          value={selectedOption}
+          // onKeyDown={(e) => e.stopPropagation()}
+        ></modus-autocomplete>
+      </div>
     );
   }
 
   renderEditor(): JSX.Element[] {
     switch (this.type) {
-      case CELL_EDIT_TYPE_DROPDOWN:
-        return this.renderDropdownInput();
+      case CELL_EDIT_TYPE_SELECT:
+        return this.renderSelectInput();
       case CELL_EDIT_TYPE_AUTOCOMPLETE:
         return this.renderAutocompleteInput();
       case CELL_EDIT_TYPE_DATE:

stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/readme.md

@@ -7,13 +7,14 @@
 
 ## Properties
 
-| Property      | Attribute | Description | Type                                             | Default     |
-| ------------- | --------- | ----------- | ------------------------------------------------ | ----------- |
-| `args`        | --        |             | `{ format: string; } \| { options: unknown[]; }` | `undefined` |
-| `keyDown`     | --        |             | `(e: KeyboardEvent, newValue: string) => void`   | `undefined` |
-| `type`        | `type`    |             | `string`                                         | `undefined` |
-| `value`       | `value`   |             | `string`                                         | `undefined` |
-| `valueChange` | --        |             | `(newValue: string) => void`                     | `undefined` |
+| Property      | Attribute   | Description | Type                                                                          | Default     |
+| ------------- | ----------- | ----------- | ----------------------------------------------------------------------------- | ----------- |
+| `args`        | --          |             | `{ format: string; } \| { options: unknown[]; optionsDisplayProp?: string; }` | `undefined` |
+| `dataType`    | `data-type` |             | `string`                                                                      | `undefined` |
+| `keyDown`     | --          |             | `(e: KeyboardEvent, newValue: string) => void`                                | `undefined` |
+| `type`        | `type`      |             | `string`                                                                      | `undefined` |
+| `value`       | `value`     |             | `any`                                                                         | `undefined` |
+| `valueChange` | --          |             | `(newValue: string) => void`                                                  | `undefined` |
 
 
 ## Dependencies