revert - part prop and table main

trimble-oss · Aug 28, 2024 · 41cbe99 · 41cbe99
1 parent 9870581
commit 41cbe99
Show file tree

Hide file tree

Showing 10 changed files with 24 additions and 74 deletions.
diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts
@@ -1949,10 +1949,6 @@ export interface ModusTableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLModusTableElement;
 }
-export interface ModusTableCellMainCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLModusTableCellMainElement;
-}
 export interface ModusTableRowActionsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLModusTableRowActionsElement;
@@ -2625,18 +2621,7 @@ declare global {
         prototype: HTMLModusTableCellEditorElement;
         new (): HTMLModusTableCellEditorElement;
     };
-    interface HTMLModusTableCellMainElementEventMap {
-        "cellValueChanged": TableCellEdited;
-    }
     interface HTMLModusTableCellMainElement extends Components.ModusTableCellMain, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLModusTableCellMainElementEventMap>(type: K, listener: (this: HTMLModusTableCellMainElement, ev: ModusTableCellMainCustomEvent<HTMLModusTableCellMainElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLModusTableCellMainElementEventMap>(type: K, listener: (this: HTMLModusTableCellMainElement, ev: ModusTableCellMainCustomEvent<HTMLModusTableCellMainElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLModusTableCellMainElement: {
         prototype: HTMLModusTableCellMainElement;
@@ -4423,7 +4408,6 @@ declare namespace LocalJSX {
         "cell"?: Cell<unknown, unknown>;
         "context"?: TableContext;
         "hasRowsExpandable"?: boolean;
-        "onCellValueChanged"?: (event: ModusTableCellMainCustomEvent<TableCellEdited>) => void;
         "valueChange"?: (props: TableCellEdited) => void;
     }
     interface ModusTableColumnsVisibility {

diff --git a/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.spec.ts b/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.spec.ts
@@ -20,7 +20,7 @@ describe('modus-autocomplete', () => {
             </svg>
             <modus-text-input aria-autocomplete="list" aria-controls="${listId}" class="input" role="combobox" autocomplete="off" size="medium" type="search"  value=""></modus-text-input>
           </div>
-          <div class="error" part="sub-text"></div>
+          <div class="error"></div>
           <div class="options-container" style="max-height: 300px; z-index: 1; overflow-y: auto;">
             <ul aria-label="options" id="${listId}" role="listbox"></ul>
           </div>
@@ -56,7 +56,7 @@ describe('modus-autocomplete', () => {
             </svg>
             <modus-text-input aria-autocomplete="list" aria-controls="${listId}" class="input" role="combobox" autocomplete="off" size="medium" type="search"  value=""></modus-text-input>
           </div>
-          <div class="error" part="sub-text"></div>
+          <div class="error"></div>
           <div class="options-container" style="max-height: 300px; z-index: 1; overflow-y: auto;">
             <ul aria-label="options" id="${listId}" role="listbox"></ul>
           </div>

diff --git a/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.tsx b/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.tsx
@@ -435,7 +435,6 @@ export class ModusAutocomplete {
       aria-autocomplete="list"
       aria-controls={this.listId}
       aria-expanded={this.displayOptions()}
-      part={`input-container ${this.errorText ? 'error' : ''}`}
     />
   );
 
@@ -501,9 +500,7 @@ export class ModusAutocomplete {
           ))}
           {this.TextInput()}
         </div>
-        <div class={'error'} part="sub-text">
-          {this.errorText ? <label class="sub-text error">{this.errorText}</label> : null}
-        </div>
+        <div class={'error'}>{this.errorText ? <label class="sub-text error">{this.errorText}</label> : null}</div>
         <div
           class="options-container"
           style={{ maxHeight: this.dropdownMaxHeight, zIndex: this.dropdownZIndex, overflowY: 'auto' }}>

diff --git a/stencil-workspace/src/components/modus-number-input/modus-number-input.spec.tsx b/stencil-workspace/src/components/modus-number-input/modus-number-input.spec.tsx
@@ -10,11 +10,10 @@ describe('modus-number-input', () => {
     expect(page.root).toEqualHtml(`
       <modus-number-input>
         <mock:shadow-root>
-          <div class="modus-number-input" part="table-inputs">
+          <div class="modus-number-input">
             <div class="input-container medium" part="input-container ">
               <input class="text-align-left" id="mwc_id_0_number-input" tabindex="0" type="number">
             </div>
-            <div class="sub-text" part="sub-text"></div>
           </div>
         </mock:shadow-root>
       </modus-number-input>

diff --git a/stencil-workspace/src/components/modus-number-input/modus-number-input.tsx b/stencil-workspace/src/components/modus-number-input/modus-number-input.tsx
@@ -123,7 +123,7 @@ export class ModusNumberInput {
     };
 
     return (
-      <div class={buildContainerClassNames()} part="table-inputs">
+      <div class={buildContainerClassNames()}>
         {this.label || this.required ? (
           <div class="label-container">
             {this.label ? <label htmlFor={this.inputId}>{this.label}</label> : null}
@@ -155,13 +155,11 @@ export class ModusNumberInput {
             type="number"
             value={this.value}></input>
         </div>
-        <div class="sub-text" part="sub-text">
-          {this.errorText ? (
-            <label class="sub-text error">{this.errorText}</label>
-          ) : this.validText ? (
-            <label class="sub-text valid">{this.validText}</label>
-          ) : null}
-        </div>
+        {this.errorText ? (
+          <label class="sub-text error">{this.errorText}</label>
+        ) : this.validText ? (
+          <label class="sub-text valid">{this.validText}</label>
+        ) : null}
       </div>
     );
   }

diff --git a/stencil-workspace/src/components/modus-select/modus-select.spec.ts b/stencil-workspace/src/components/modus-select/modus-select.spec.ts
@@ -13,13 +13,12 @@ describe('modus-select', () => {
       <modus-select>
         <mock:shadow-root>
           <div>
-            <span class="input-container" part="table-inputs">
-            <select class="medium" id="mwc_id_0_select" part="input select-input ">
+            <span class="input-container">
+            <select class="medium" id="mwc_id_0_select" part="input ">
               <option disabled="" selected="" value="">
                 Please Select
               </option>
             </select>
-            <div class="sub-text" part="sub-text"></div>
             </span>
           </div>
         </mock:shadow-root>

diff --git a/stencil-workspace/src/components/modus-select/modus-select.tsx b/stencil-workspace/src/components/modus-select/modus-select.tsx
@@ -138,9 +138,9 @@ export class ModusSelect {
     return (
       <div class={this.disabled ? 'disabled' : undefined}>
         {this.renderLabel()}
-        <span class="input-container" part="table-inputs">
+        <span class="input-container">
           <select
-            part={`input select-input ${this.errorText ? 'error' : this.validText ? 'valid' : ''}`}
+            part={`input ${this.errorText ? 'error' : this.validText ? 'valid' : ''}`}
             ref={(el) => (this.selectInput = el)}
             disabled={this.disabled}
             id={this.selectId}
@@ -157,9 +157,7 @@ export class ModusSelect {
             </option>
             {this.renderOptions()}
           </select>
-          <div class="sub-text" part="sub-text">
-            {this.renderSubText()}
-          </div>
+          {this.renderSubText()}
         </span>
       </div>
     );

diff --git a/...ace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx b/...ace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx
@@ -7,9 +7,7 @@ import {
   Component,
   Prop,
   Method,
-  h,
-  Event,
-  EventEmitter, // eslint-disable-line @typescript-eslint/no-unused-vars
+  h, // eslint-disable-line @typescript-eslint/no-unused-vars
 } from '@stencil/core';
 import { Cell } from '@tanstack/table-core';
 import { ModusTableCellBadge, ModusTableCellEditorArgs, ModusTableCellLink } from '../../../models/modus-table.models';
@@ -48,8 +46,6 @@ export class ModusTableCellMain {
     else this.cellEl.classList.remove('edit-mode');
   }
 
-  @Event() cellValueChanged: EventEmitter<TableCellEdited>;
-
   private cellEl: HTMLElement;
   private onCellClick: (e: MouseEvent) => void = (e) => this.handleCellClick(e);
   private onCellKeyDown: (e: KeyboardEvent) => void = (e: KeyboardEvent) => this.handleCellKeydown(e);
@@ -148,17 +144,6 @@ export class ModusTableCellMain {
     }
   };
 
-  handleCellEditValuesChange(newValue: string, oldValue: string) {
-    const changeDetails: TableCellEdited = {
-      row: this.cell.row,
-      accessorKey: this.cell.column.columnDef[this.accessorKey],
-      newValue,
-      oldValue,
-    };
-
-    this.cellValueChanged.emit(changeDetails);
-  }
-
   handleCellEditorValueChange(newValue: string, oldValue: string) {
     if (this.editMode && newValue !== oldValue && this.valueChange) {
       this.valueChange({
@@ -248,12 +233,10 @@ export class ModusTableCellMain {
           <modus-table-cell-editor
             data-type={this.cell.column.columnDef[COLUMN_DEF_DATATYPE_KEY]}
             value={this.cell.getValue()}
-            error-text={(this.cell.row as any).original.errorText}
             type={this.getEditorType()}
             args={this.getEditorArgs()}
             valueChange={(newVal: string) => this.handleCellEditorValueChange(newVal, valueString)}
             keyDown={(event: KeyboardEvent, newVal: string) => this.handleCellEditorKeyDown(event, newVal, valueString)}
-            onValueChange={(newVal: string) => this.handleCellEditValuesChange(newVal, valueString)}
           />
         ) : (
           this.renderCellValue()

diff --git a/stencil-workspace/src/components/modus-text-input/modus-text-input.spec.tsx b/stencil-workspace/src/components/modus-text-input/modus-text-input.spec.tsx
@@ -14,7 +14,6 @@ describe('modus-text-input', () => {
             <div class="input-container medium" part="input-container ">
               <input class="text-align-left" id="mwc_id_0_text_input" type="text" tabindex="0">
             </div>
-            <div class="sub-text" part="sub-text"></div>
           </div>
         </mock:shadow-root>
       </modus-text-input>
@@ -33,7 +32,6 @@ describe('modus-text-input', () => {
             <div class="input-container medium" part="input-container ">
               <input class="text-align-left" id="mwc_id_1_text_input" tabindex="0" type="password">
             </div>
-            <div class="sub-text" part="sub-text"></div>
           </div>
         </mock:shadow-root>
       </modus-text-input>
@@ -52,7 +50,6 @@ describe('modus-text-input', () => {
                 <div class="input-container medium" part="input-container ">
                 <input class="text-align-left" id="mwc_id_2_text_input" tabindex="0" autocapitalize="words" type="text">
                 </div>
-                <div class="sub-text" part="sub-text"></div>
             </div>
         </mock:shadow-root>
       </modus-text-input>
@@ -71,7 +68,6 @@ describe('modus-text-input', () => {
                 <div class="input-container medium" part="input-container ">
                 <input class="text-align-left" id="mwc_id_3_text_input" tabindex="0" autocorrect="on" type="text">
                 </div>
-                <div class="sub-text" part="sub-text"></div>
             </div>
         </mock:shadow-root>
       </modus-text-input>
@@ -90,7 +86,6 @@ describe('modus-text-input', () => {
                 <div class="input-container medium" part="input-container ">
                 <input class="text-align-left" id="mwc_id_4_text_input" tabindex="0" enterkeyhint="done" type="text">
                 </div>
-                <div class="sub-text" part="sub-text"></div>
             </div>
         </mock:shadow-root>
       </modus-text-input>
@@ -109,7 +104,6 @@ describe('modus-text-input', () => {
                 <div class="input-container medium" part="input-container ">
                 <input class="text-align-left" id="mwc_id_5_text_input" tabindex="0" spellcheck type="text">
                 </div>
-                <div class="sub-text" part="sub-text"></div>
             </div>
         </mock:shadow-root>
       </modus-text-input>

diff --git a/stencil-workspace/src/components/modus-text-input/modus-text-input.tsx b/stencil-workspace/src/components/modus-text-input/modus-text-input.tsx
@@ -271,16 +271,14 @@ export class ModusTextInput {
             </span>
           )}
         </div>
-        <div class="sub-text" part="sub-text">
-          {this.errorText ? (
-            <label class="sub-text error">
-              {this.includeErrorIcon ? <IconError size={iconSize} /> : null}
-              {this.errorText}
-            </label>
-          ) : this.validText ? (
-            <label class="sub-text valid">{this.validText}</label>
-          ) : null}
-        </div>
+        {this.errorText ? (
+          <label class="sub-text error">
+            {this.includeErrorIcon ? <IconError size={iconSize} /> : null}
+            {this.errorText}
+          </label>
+        ) : this.validText ? (
+          <label class="sub-text valid">{this.validText}</label>
+        ) : null}
       </div>
     );
   }