From e43b3f5c60702268288620afef59c74d79cdf8fd Mon Sep 17 00:00:00 2001 From: prashanthr6383 <168108000+prashanthr6383@users.noreply.github.com> Date: Tue, 23 Jul 2024 20:17:01 +0530 Subject: [PATCH 01/11] 2711 - Table text input error style update init --- stencil-workspace/src/components.d.ts | 5 +++ .../modus-table-cell-editor.scss | 7 +++++ .../modus-table-cell-editor.tsx | 11 ++++++- .../modus-text-input.spec.tsx | 30 +++++++++++------- .../modus-text-input/modus-text-input.tsx | 31 +++++++++++++------ 5 files changed, 61 insertions(+), 23 deletions(-) diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts index 702994fbc..909d9ce41 100644 --- a/stencil-workspace/src/components.d.ts +++ b/stencil-workspace/src/components.d.ts @@ -2695,6 +2695,7 @@ declare global { }; interface HTMLModusTextInputElementEventMap { "valueChange": string; + "valueError": string; } interface HTMLModusTextInputElement extends Components.ModusTextInput, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusTextInputElement, ev: ModusTextInputCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -4517,6 +4518,10 @@ declare namespace LocalJSX { * An event that fires on input value change. */ "onValueChange"?: (event: ModusTextInputCustomEvent) => void; + /** + * An event that fires on input value error. + */ + "onValueError"?: (event: ModusTextInputCustomEvent) => void; /** * (optional) The input's pattern HTML attribute. */ diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss index e00c18425..d1d6ced63 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss @@ -39,6 +39,13 @@ table.density-compact { justify-content: center; } + +.editor::part(table-inputs) { + align-items: center; + display: flex; + justify-content: center; +} + .editor::part(input-container) { border: 2px solid var(--modus-input-border-active-color, #217cbb); border-radius: unset; diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx index f15af5213..e46874857 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx @@ -167,7 +167,16 @@ export class ModusTableCellEditor { onBlur={this.handleBlur} onKeyDown={this.handleKeyDown} autoFocusInput - size="large"> + size="large" + onValueError={(e: CustomEvent) => { + if (e.detail) { + this.errorMessage = e.detail; + this.showErrorTooltip(); + } else { + this.errorMessage = ''; + this.hideErrorTooltip(); + } + }}> ); } 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 index 9355e1a53..2590c7576 100644 --- 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 @@ -10,10 +10,11 @@ describe('modus-text-input', () => { expect(page.root).toEqualHtml(` -
-
+
+
+
@@ -28,10 +29,11 @@ describe('modus-text-input', () => { expect(page.root).toEqualHtml(` -
-
+
+
+
@@ -46,10 +48,11 @@ describe('modus-text-input', () => { expect(page.root).toEqualHtml(` -
-
+
+
+
@@ -64,10 +67,11 @@ describe('modus-text-input', () => { expect(page.root).toEqualHtml(` -
-
+
+
+
@@ -82,10 +86,11 @@ describe('modus-text-input', () => { expect(page.root).toEqualHtml(` -
-
+
+
+
@@ -100,10 +105,11 @@ describe('modus-text-input', () => { expect(page.root).toEqualHtml(` -
-
+
+
+
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 index c06631569..a68861c3c 100644 --- a/stencil-workspace/src/components/modus-text-input/modus-text-input.tsx +++ b/stencil-workspace/src/components/modus-text-input/modus-text-input.tsx @@ -99,6 +99,9 @@ export class ModusTextInput { /** An event that fires on input value change. */ @Event() valueChange: EventEmitter; + /** An event that fires on input value error. */ + @Event() valueError: EventEmitter; + private inputId = generateElementId() + '_text_input'; classBySize: Map = new Map([ @@ -134,6 +137,12 @@ export class ModusTextInput { this.value = value; this.valueChange.emit(value); + + if (this.errorText) { + this.valueError.emit(this.errorText); + } else { + this.valueError.emit(null); + } } handleTogglePasswordKeyDown(event: KeyboardEvent): void { @@ -198,7 +207,7 @@ export class ModusTextInput { }; return ( -
+
{this.label || this.required ? (
{this.label ? : null} @@ -211,7 +220,7 @@ export class ModusTextInput { this.size )}`} onClick={() => this.textInput.focus()} - part="input-container"> + part={`input-container ${this.errorText ? 'error' : this.validText ? 'valid' : ''}`}> {this.includeSearchIcon ? : null} )}
- {this.errorText ? ( - - ) : this.validText ? ( - - ) : null} +
+ {this.errorText ? ( + + ) : this.validText ? ( + + ) : null} +
); } From 6e4093c682c2d1895c8c1e4056f7853cdd4df89c Mon Sep 17 00:00:00 2001 From: prashanthr6383 <168108000+prashanthr6383@users.noreply.github.com> Date: Wed, 24 Jul 2024 13:43:43 +0530 Subject: [PATCH 02/11] 2722 - number fire event on error input and table error msg style update --- stencil-workspace/src/components.d.ts | 5 ++++ .../modus-number-input/modus-number-input.tsx | 27 ++++++++++++++----- .../modus-table-cell-editor.tsx | 11 +++++++- 3 files changed, 35 insertions(+), 8 deletions(-) diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts index 702994fbc..1f50d81d2 100644 --- a/stencil-workspace/src/components.d.ts +++ b/stencil-workspace/src/components.d.ts @@ -2414,6 +2414,7 @@ declare global { }; interface HTMLModusNumberInputElementEventMap { "valueChange": string; + "valueError": string; } interface HTMLModusNumberInputElement extends Components.ModusNumberInput, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusNumberInputElement, ev: ModusNumberInputCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -3917,6 +3918,10 @@ declare namespace LocalJSX { * An event that fires on input value change. */ "onValueChange"?: (event: ModusNumberInputCustomEvent) => void; + /** + * An event that fires on input value error. + */ + "onValueError"?: (event: ModusNumberInputCustomEvent) => void; /** * (optional) The input's placeholder text. */ 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 index 652260989..a25414d0e 100644 --- a/stencil-workspace/src/components/modus-number-input/modus-number-input.tsx +++ b/stencil-workspace/src/components/modus-number-input/modus-number-input.tsx @@ -56,6 +56,9 @@ export class ModusNumberInput { /** An event that fires on input value change. */ @Event() valueChange: EventEmitter; + /** An event that fires on input value error. */ + @Event() valueError: EventEmitter; + private inputId = generateElementId() + '_number-input'; classBySize: Map = new Map([ @@ -67,6 +70,12 @@ export class ModusNumberInput { handleOnInput(): void { this.value = this.numberInput.value; this.valueChange.emit(this.value); + + if (this.errorText) { + this.valueError.emit(this.errorText); + } else { + this.valueError.emit(null); + } } /** Focus the input. */ @@ -114,7 +123,7 @@ export class ModusNumberInput { }; return ( -
+
{this.label || this.required ? (
{this.label ? : null} @@ -122,7 +131,9 @@ export class ModusNumberInput { {this.helperText ? : null}
) : null} -
+
- {this.errorText ? ( - - ) : this.validText ? ( - - ) : null} +
+ {this.errorText ? ( + + ) : this.validText ? ( + + ) : null} +
); } diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx index f15af5213..4dddf1606 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx @@ -154,7 +154,16 @@ export class ModusTableCellEditor { size="large" onBlur={this.handleBlur} onValueChange={(e: CustomEvent) => (this.editedValue = e.detail)} - onKeyDown={(e) => handleArrowKeys(e, this.handleKeyDown)}> + onKeyDown={(e) => handleArrowKeys(e, this.handleKeyDown)} + onValueError={(e: CustomEvent) => { + if (e.detail) { + this.errorMessage = e.detail; + this.showErrorTooltip(); + } else { + this.errorMessage = ''; + this.hideErrorTooltip(); + } + }}> ); } From 3be87ce669f92fdfdaa4af8bfc4febf86894f1bf Mon Sep 17 00:00:00 2001 From: prashanthr6383 <168108000+prashanthr6383@users.noreply.github.com> Date: Wed, 24 Jul 2024 13:51:20 +0530 Subject: [PATCH 03/11] 2722 - number input test file update --- .../modus-number-input/modus-number-input.spec.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) 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 index 206bfd7db..56a467659 100644 --- 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,10 +10,11 @@ describe('modus-number-input', () => { expect(page.root).toEqualHtml(` -
-
+
+
+
From 63dde46299c57387b0151f6a241b6ff1c3205505 Mon Sep 17 00:00:00 2001 From: prashanthr6383 <168108000+prashanthr6383@users.noreply.github.com> Date: Wed, 24 Jul 2024 16:53:46 +0530 Subject: [PATCH 04/11] 2725 - select input error style update --- stencil-workspace/src/components.d.ts | 5 +++++ .../modus-select/modus-select.spec.ts | 5 +++-- .../components/modus-select/modus-select.tsx | 20 ++++++++++++++++--- .../modus-table-cell-editor.scss | 6 ++++++ .../modus-table-cell-editor.tsx | 9 +++++++++ 5 files changed, 40 insertions(+), 5 deletions(-) diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts index d11dcb91c..fa20e97ac 100644 --- a/stencil-workspace/src/components.d.ts +++ b/stencil-workspace/src/components.d.ts @@ -2472,6 +2472,7 @@ declare global { }; interface HTMLModusSelectElementEventMap { "valueChange": unknown; + "valueError": string; "inputBlur": FocusEvent; } interface HTMLModusSelectElement extends Components.ModusSelect, HTMLStencilElement { @@ -4062,6 +4063,10 @@ declare namespace LocalJSX { * An event that fires on input value change. */ "onValueChange"?: (event: ModusSelectCustomEvent) => void; + /** + * An event that fires on input value error. + */ + "onValueError"?: (event: ModusSelectCustomEvent) => void; /** * The options for the dropdown list. */ diff --git a/stencil-workspace/src/components/modus-select/modus-select.spec.ts b/stencil-workspace/src/components/modus-select/modus-select.spec.ts index ea8bdf50c..b56e7d912 100644 --- a/stencil-workspace/src/components/modus-select/modus-select.spec.ts +++ b/stencil-workspace/src/components/modus-select/modus-select.spec.ts @@ -13,12 +13,13 @@ describe('modus-select', () => {
- - +
diff --git a/stencil-workspace/src/components/modus-select/modus-select.tsx b/stencil-workspace/src/components/modus-select/modus-select.tsx index 1be634c64..6a112a4cd 100644 --- a/stencil-workspace/src/components/modus-select/modus-select.tsx +++ b/stencil-workspace/src/components/modus-select/modus-select.tsx @@ -46,11 +46,17 @@ export class ModusSelect { @Watch('value') handleValueChange(newValue: unknown): void { this.internalValue = newValue; + if (this.errorText) { + this.valueError.emit(this.errorText); + } } /** An event that fires on input value change. */ @Event() valueChange: EventEmitter; + /** An event that fires on input value error. */ + @Event() valueError: EventEmitter; + /** An event that fires on input blur. */ @Event() inputBlur: EventEmitter; @@ -74,10 +80,16 @@ export class ModusSelect { connectedCallback(): void { this.internalValue = this.value; + if (this.errorText) { + this.valueError.emit(this.errorText); + } } handleOptionSelect(option: unknown): void { this.valueChange.emit(option); + if (this.errorText) { + this.valueError.emit(this.errorText); + } } handleSelectChange(event: Event): void { @@ -126,9 +138,9 @@ export class ModusSelect { return (
{this.renderLabel()} - + - {this.renderSubText()} +
+ {this.renderSubText()} +
); diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss index d1d6ced63..10b24b1fe 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss @@ -58,6 +58,12 @@ table.density-compact { z-index: 99; } +.editor::part(select-input error) { + border: 2px solid var(--modus-input-validation-error-color, #da212c); + border-radius: unset; + z-index: 99; +} + .error-tooltip { background-color: var(--modus-input-validation-error-color, #da212c); border-radius: 2px; diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx index 886d90758..ffb8ea1d1 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx @@ -225,6 +225,15 @@ export class ModusTableCellEditor { } else { this.editedValue = detail[valueKey]; } + }} + onValueError={(e: CustomEvent) => { + if (e.detail) { + this.errorMessage = e.detail; + this.showErrorTooltip(); + } else { + this.errorMessage = ''; + this.hideErrorTooltip(); + } }}>
); From 4f59669662aaabd069211c0b86f8037c9bc1fc07 Mon Sep 17 00:00:00 2001 From: prashanthr6383 <168108000+prashanthr6383@users.noreply.github.com> Date: Thu, 25 Jul 2024 16:05:31 +0530 Subject: [PATCH 05/11] 2727 - autocomplete error message style update --- stencil-workspace/src/components.d.ts | 5 +++++ .../modus-autocomplete.spec.ts | 8 ++++---- .../modus-autocomplete/modus-autocomplete.tsx | 17 ++++++++++++++++- .../modus-table-cell-editor.tsx | 9 +++++++++ 4 files changed, 34 insertions(+), 5 deletions(-) diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts index fa20e97ac..8a2dc1789 100644 --- a/stencil-workspace/src/components.d.ts +++ b/stencil-workspace/src/components.d.ts @@ -2044,6 +2044,7 @@ declare global { interface HTMLModusAutocompleteElementEventMap { "optionSelected": string; "valueChange": string; + "valueError": string; "selectionsChanged": string[]; } interface HTMLModusAutocompleteElement extends Components.ModusAutocomplete, HTMLStencilElement { @@ -3053,6 +3054,10 @@ declare namespace LocalJSX { * An event that fires when the input value changes. Emits the value string. */ "onValueChange"?: (event: ModusAutocompleteCustomEvent) => void; + /** + * An event that fires on input value error. + */ + "onValueError"?: (event: ModusAutocompleteCustomEvent) => void; /** * The autocomplete's options. */ diff --git a/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.spec.ts b/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.spec.ts index cea7f92f6..a8f681eff 100644 --- a/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.spec.ts +++ b/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.spec.ts @@ -18,9 +18,9 @@ describe('modus-autocomplete', () => { - +
-
+
    @@ -54,9 +54,9 @@ describe('modus-autocomplete', () => { - +
    -
    +
      diff --git a/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.tsx b/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.tsx index 14531fa64..856aa46e7 100644 --- a/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.tsx +++ b/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.tsx @@ -110,6 +110,9 @@ export class ModusAutocomplete { this.updateVisibleOptions(this.value); this.updateVisibleCustomOptions(this.value); } + if (this.errorText) { + this.valueError.emit(this.errorText); + } } /** An event that fires when a dropdown option is selected. Emits the option id. */ @@ -118,6 +121,9 @@ export class ModusAutocomplete { /** An event that fires when the input value changes. Emits the value string. */ @Event() valueChange: EventEmitter; + /** An event that fires on input value error. */ + @Event() valueError: EventEmitter; + /** An event that fires when an option is selected/removed. Emits the option ids. */ @Event() selectionsChanged: EventEmitter; @@ -293,6 +299,9 @@ export class ModusAutocomplete { this.updateVisibleCustomOptions(search); this.value = search; this.valueChange.emit(search); + if (this.errorText) { + this.valueError.emit(this.errorText); + } }; handleCloseClick(chipValue: ModusAutocompleteOption) { @@ -315,6 +324,9 @@ export class ModusAutocomplete { event.stopPropagation(); this.disableFiltering = !this.disableCloseOnSelect; this.handleSearchChange(event.detail); + if (this.errorText) { + this.valueError.emit(this.errorText); + } }; updateVisibleCustomOptions = (search = '') => { @@ -399,6 +411,7 @@ export class ModusAutocomplete { aria-autocomplete="list" aria-controls={this.listId} aria-expanded={this.displayOptions()} + part={`input-container ${this.errorText ? 'error' : ''}`} /> ); @@ -464,7 +477,9 @@ export class ModusAutocomplete { ))} {this.TextInput()}
      -
      {this.errorText ? : null}
      +
      + {this.errorText ? : null} +
      diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx index ffb8ea1d1..112507295 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx @@ -304,6 +304,15 @@ export class ModusTableCellEditor { this.editedValue = selectedDetail; } }} + onValueError={(e: CustomEvent) => { + if (e.detail) { + this.errorMessage = e.detail; + this.showErrorTooltip(); + } else { + this.errorMessage = ''; + this.hideErrorTooltip(); + } + }} value={selectedOption}>
      ); From ac8790c49bd9a9280211823900093ef21152e137 Mon Sep 17 00:00:00 2001 From: prashanthr6383 <168108000+prashanthr6383@users.noreply.github.com> Date: Tue, 6 Aug 2024 15:59:05 +0530 Subject: [PATCH 06/11] 2711 - adding e2e test cases --- .../modus-autocomplete.e2e.ts | 16 +++++++++++ .../modus-number-input.e2e.ts | 13 +++++++++ .../modus-select/modus-select.e2e.ts | 27 +++++++++++++++++++ .../modus-text-input/modus-text-input.e2e.ts | 13 +++++++++ 4 files changed, 69 insertions(+) diff --git a/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.e2e.ts b/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.e2e.ts index 71bc125e3..5d939b409 100644 --- a/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.e2e.ts +++ b/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.e2e.ts @@ -958,4 +958,20 @@ describe('modus-autocomplete', () => { expect(element).toBeDefined(); expect(element).not.toHaveAttribute('aria-label'); }); + + it('emits valueError event if error message is present', async () => { + const page = await newE2EPage(); + + await page.setContent(''); + const valueError = await page.spyOnEvent('valueError'); + const autocomplete = await page.find('modus-autocomplete >>> div.autocomplete'); + + autocomplete.setProperty('errorText', 'Error message'); + await page.waitForChanges(); + + const textInput = await page.find('modus-autocomplete >>> modus-text-input'); + await textInput.click(); + await textInput.type('apple', { delay: 20 }); + expect(valueError).toHaveReceivedEvent(); + }); }); diff --git a/stencil-workspace/src/components/modus-number-input/modus-number-input.e2e.ts b/stencil-workspace/src/components/modus-number-input/modus-number-input.e2e.ts index 9035316a3..8355bb7a4 100644 --- a/stencil-workspace/src/components/modus-number-input/modus-number-input.e2e.ts +++ b/stencil-workspace/src/components/modus-number-input/modus-number-input.e2e.ts @@ -237,4 +237,17 @@ describe('modus-number-input', () => { expect(await element.getProperty('value')).toEqual('2'); }); + + it('emits valueError event if error message is present', async () => { + const page = await newE2EPage(); + + await page.setContent(''); + const valueError = await page.spyOnEvent('valueError'); + const numberInput = await page.find('modus-number-input >>> input'); + + numberInput.setProperty('errorText', 'Error message'); + await page.waitForChanges(); + await numberInput.type('1', { delay: 20 }); + expect(valueError).toHaveReceivedEvent(); + }); }); diff --git a/stencil-workspace/src/components/modus-select/modus-select.e2e.ts b/stencil-workspace/src/components/modus-select/modus-select.e2e.ts index 06f857e42..b614b227e 100644 --- a/stencil-workspace/src/components/modus-select/modus-select.e2e.ts +++ b/stencil-workspace/src/components/modus-select/modus-select.e2e.ts @@ -177,4 +177,31 @@ describe('modus-select', () => { expect(element).toBeDefined(); expect(element).not.toHaveAttribute('aria-label'); }); + + it('emits valueError event if error message is present', async () => { + const page = await newE2EPage(); + + await page.setContent(''); + const valueError = await page.spyOnEvent('valueError'); + const select = await page.find('modus-select'); + + const options = [ + { value: '1', label: 'Option 1' }, + { value: '2', label: 'Option 2' }, + ]; + select.setProperty('options', options); + select.setProperty('optionsDisplayProp', 'display'); + select.setProperty('errorText', 'Error message'); + await page.waitForChanges(); + + const selectElement = await page.find('modus-select >>> select'); + await selectElement.focus(); + await page.waitForChanges(); + + await page.keyboard.press('ArrowDown'); + await page.keyboard.press('Enter'); + await page.waitForChanges(); + + expect(valueError).toHaveReceivedEvent(); + }); }); diff --git a/stencil-workspace/src/components/modus-text-input/modus-text-input.e2e.ts b/stencil-workspace/src/components/modus-text-input/modus-text-input.e2e.ts index a291eeb46..56aec0d78 100644 --- a/stencil-workspace/src/components/modus-text-input/modus-text-input.e2e.ts +++ b/stencil-workspace/src/components/modus-text-input/modus-text-input.e2e.ts @@ -323,4 +323,17 @@ describe('modus-text-input', () => { expect(element).toBeDefined(); expect(element).not.toHaveAttribute('aria-label'); }); + + it('emits valueError event if error message is present', async () => { + const page = await newE2EPage(); + + await page.setContent(''); + const valueError = await page.spyOnEvent('valueError'); + const textInput = await page.find('modus-text-input >>> input'); + + textInput.setProperty('errorText', 'Error message'); + await page.waitForChanges(); + await textInput.type('test', { delay: 20 }); + expect(valueError).toHaveReceivedEvent(); + }); }); From 47eacc8b1f19647d2836609c12936f8bb93c3a2a Mon Sep 17 00:00:00 2001 From: prashanthr6383 <168108000+prashanthr6383@users.noreply.github.com> Date: Tue, 20 Aug 2024 16:22:57 +0530 Subject: [PATCH 07/11] 2711 - table cellValueChange event and text input validation --- stencil-workspace/src/components.d.ts | 20 +++ .../modus-table-cell-editor.tsx | 45 ++++-- .../modus-table-cell-main.tsx | 19 ++- stencil-workspace/src/index.html | 131 ++++++++++++++++++ 4 files changed, 202 insertions(+), 13 deletions(-) diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts index 8a2dc1789..e573be95c 100644 --- a/stencil-workspace/src/components.d.ts +++ b/stencil-workspace/src/components.d.ts @@ -1325,7 +1325,9 @@ export namespace Components { interface ModusTableCellEditor { "args": ModusTableCellEditorArgs; "dataType": string; + "errorText": string; "keyDown": (e: KeyboardEvent, newValue: string) => void; + "onValueChange": (newValue: string) => void; "type": string; "value": unknown; "valueChange": (newValue: string) => void; @@ -1945,6 +1947,10 @@ export interface ModusTableCustomEvent extends CustomEvent { detail: T; target: HTMLModusTableElement; } +export interface ModusTableCellMainCustomEvent extends CustomEvent { + detail: T; + target: HTMLModusTableCellMainElement; +} export interface ModusTableRowActionsCustomEvent extends CustomEvent { detail: T; target: HTMLModusTableRowActionsElement; @@ -2617,7 +2623,18 @@ declare global { prototype: HTMLModusTableCellEditorElement; new (): HTMLModusTableCellEditorElement; }; + interface HTMLModusTableCellMainElementEventMap { + "cellValueChanged": TableCellEdited; + } interface HTMLModusTableCellMainElement extends Components.ModusTableCellMain, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLModusTableCellMainElement, ev: ModusTableCellMainCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLModusTableCellMainElement, ev: ModusTableCellMainCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(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; @@ -4393,7 +4410,9 @@ declare namespace LocalJSX { interface ModusTableCellEditor { "args"?: ModusTableCellEditorArgs; "dataType"?: string; + "errorText"?: string; "keyDown"?: (e: KeyboardEvent, newValue: string) => void; + "onValueChange"?: (newValue: string) => void; "type"?: string; "value"?: unknown; "valueChange"?: (newValue: string) => void; @@ -4402,6 +4421,7 @@ declare namespace LocalJSX { "cell"?: Cell; "context"?: TableContext; "hasRowsExpandable"?: boolean; + "onCellValueChanged"?: (event: ModusTableCellMainCustomEvent) => void; "valueChange"?: (props: TableCellEdited) => void; } interface ModusTableColumnsVisibility { diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx index 112507295..90342202c 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx @@ -27,10 +27,12 @@ import { createPopper, Instance } from '@popperjs/core'; export class ModusTableCellEditor { @Prop() args: ModusTableCellEditorArgs; @Prop() dataType: string; + @Prop() errorText: string; @Prop() value: unknown; @Prop() type: string; @Prop() valueChange: (newValue: string) => void; @Prop() keyDown: (e: KeyboardEvent, newValue: string) => void; + @Prop() onValueChange: (newValue: string) => void; @State() errorMessage: string; @@ -47,6 +49,7 @@ export class ModusTableCellEditor { if (this.inputElement['focusInput']) { this.inputElement['focusInput'](); } + this.updateErrorMessage(this.errorText); this.createErrorTooltip(); } @@ -66,6 +69,14 @@ export class ModusTableCellEditor { } } + @State() errorMessages: string; + + // @Listen('cellValueChanged', { target: 'document' }) + // handleCellValueChanged(event: CustomEvent) { + // const errorText = event.detail.row.errorText; + // this.updateErrorMessage(errorText); + // } + handleBlur: () => void = () => { this.valueChange(this.editedValue as string); this.destroyErrorTooltip(); @@ -76,8 +87,26 @@ export class ModusTableCellEditor { }; handleError = (e: CustomEvent) => { - this.errorMessage = e.detail; - this.showErrorTooltip(); + this.updateErrorMessage(e.detail); + }; + + private updateErrorMessage(errorText: string): void { + this.errorMessage = errorText || ''; + if (this.errorMessage) { + this.showErrorTooltip(); + } else { + this.hideErrorTooltip(); + } + } + + handleTextInputChange = (e: CustomEvent) => { + this.editedValue = e.detail; + this.onValueChange(this.editedValue as string); + if (this.errorMessage) { + this.showErrorTooltip(); + } else { + this.hideErrorTooltip(); + } }; getDefaultProps = (ariaLabel) => ({ @@ -172,20 +201,12 @@ export class ModusTableCellEditor { ) => (this.editedValue = e.detail)} + onValueChange={this.handleTextInputChange} onBlur={this.handleBlur} onKeyDown={this.handleKeyDown} autoFocusInput size="large" - onValueError={(e: CustomEvent) => { - if (e.detail) { - this.errorMessage = e.detail; - this.showErrorTooltip(); - } else { - this.errorMessage = ''; - this.hideErrorTooltip(); - } - }}> + errorText={this.errorText}> ); } diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx index 722d54ade..555f4c2d2 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx @@ -7,7 +7,9 @@ import { Component, Prop, Method, - h, // eslint-disable-line @typescript-eslint/no-unused-vars + h, + Event, + EventEmitter, // 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'; @@ -46,6 +48,8 @@ export class ModusTableCellMain { else this.cellEl.classList.remove('edit-mode'); } + @Event() cellValueChanged: EventEmitter; + private cellEl: HTMLElement; private onCellClick: (e: MouseEvent) => void = (e) => this.handleCellClick(e); private onCellKeyDown: (e: KeyboardEvent) => void = (e: KeyboardEvent) => this.handleCellKeydown(e); @@ -144,6 +148,17 @@ 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({ @@ -233,10 +248,12 @@ export class ModusTableCellMain { 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/index.html b/stencil-workspace/src/index.html index 77729b596..afe41d079 100644 --- a/stencil-workspace/src/index.html +++ b/stencil-workspace/src/index.html @@ -18,6 +18,137 @@
      + +
      + +
      +
      From 4143dd3a1db8d19c4305c2e11daf2b56e2a1a587 Mon Sep 17 00:00:00 2001 From: prashanthr6383 <168108000+prashanthr6383@users.noreply.github.com> Date: Wed, 28 Aug 2024 12:40:22 +0530 Subject: [PATCH 08/11] 2711 - removing test code --- stencil-workspace/src/index.html | 131 ------------------------------- 1 file changed, 131 deletions(-) diff --git a/stencil-workspace/src/index.html b/stencil-workspace/src/index.html index afe41d079..77729b596 100644 --- a/stencil-workspace/src/index.html +++ b/stencil-workspace/src/index.html @@ -18,137 +18,6 @@
      - -
      - -
      -
      From 80345b9d1fd239c61e4c1ff1af119d83394adbd7 Mon Sep 17 00:00:00 2001 From: prashanthr6383 <168108000+prashanthr6383@users.noreply.github.com> Date: Wed, 28 Aug 2024 13:05:54 +0530 Subject: [PATCH 09/11] 2711- revert cell editor --- stencil-workspace/src/components.d.ts | 13 ++-- .../modus-table-cell-editor.tsx | 67 ++----------------- .../modus-text-input/modus-text-input.tsx | 2 +- 3 files changed, 15 insertions(+), 67 deletions(-) diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts index 93ab9a199..c3904e497 100644 --- a/stencil-workspace/src/components.d.ts +++ b/stencil-workspace/src/components.d.ts @@ -1325,9 +1325,7 @@ export namespace Components { interface ModusTableCellEditor { "args": ModusTableCellEditorArgs; "dataType": string; - "errorText": string; "keyDown": (e: KeyboardEvent, newValue: string) => void; - "onValueChange": (newValue: string) => void; "type": string; "value": unknown; "valueChange": (newValue: string) => void; @@ -1745,6 +1743,10 @@ export namespace Components { * (optional) Disable usage of `tab` key to focus elements inside a tree view. Use `Arrow Up/Down` for focussing a tree item and `Shift + Arrow Right` for focussing a checkbox inside the item. */ "disableTabbing": boolean; + /** + * (optional) Sets draggable state to be true to all the children + */ + "enableReordering": boolean; /** * (optional) Set expanded tree items */ @@ -2050,6 +2052,7 @@ declare global { interface HTMLModusAutocompleteElementEventMap { "optionSelected": string; "valueChange": string | string[]; + "valueError": string; "selectionsChanged": string[]; } interface HTMLModusAutocompleteElement extends Components.ModusAutocomplete, HTMLStencilElement { @@ -4411,9 +4414,7 @@ declare namespace LocalJSX { interface ModusTableCellEditor { "args"?: ModusTableCellEditorArgs; "dataType"?: string; - "errorText"?: string; "keyDown"?: (e: KeyboardEvent, newValue: string) => void; - "onValueChange"?: (newValue: string) => void; "type"?: string; "value"?: unknown; "valueChange"?: (newValue: string) => void; @@ -4842,6 +4843,10 @@ declare namespace LocalJSX { * (optional) Disable usage of `tab` key to focus elements inside a tree view. Use `Arrow Up/Down` for focussing a tree item and `Shift + Arrow Right` for focussing a checkbox inside the item. */ "disableTabbing"?: boolean; + /** + * (optional) Sets draggable state to be true to all the children + */ + "enableReordering"?: boolean; /** * (optional) Set expanded tree items */ diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx index 90342202c..f15af5213 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx @@ -27,12 +27,10 @@ import { createPopper, Instance } from '@popperjs/core'; export class ModusTableCellEditor { @Prop() args: ModusTableCellEditorArgs; @Prop() dataType: string; - @Prop() errorText: string; @Prop() value: unknown; @Prop() type: string; @Prop() valueChange: (newValue: string) => void; @Prop() keyDown: (e: KeyboardEvent, newValue: string) => void; - @Prop() onValueChange: (newValue: string) => void; @State() errorMessage: string; @@ -49,7 +47,6 @@ export class ModusTableCellEditor { if (this.inputElement['focusInput']) { this.inputElement['focusInput'](); } - this.updateErrorMessage(this.errorText); this.createErrorTooltip(); } @@ -69,14 +66,6 @@ export class ModusTableCellEditor { } } - @State() errorMessages: string; - - // @Listen('cellValueChanged', { target: 'document' }) - // handleCellValueChanged(event: CustomEvent) { - // const errorText = event.detail.row.errorText; - // this.updateErrorMessage(errorText); - // } - handleBlur: () => void = () => { this.valueChange(this.editedValue as string); this.destroyErrorTooltip(); @@ -87,26 +76,8 @@ export class ModusTableCellEditor { }; handleError = (e: CustomEvent) => { - this.updateErrorMessage(e.detail); - }; - - private updateErrorMessage(errorText: string): void { - this.errorMessage = errorText || ''; - if (this.errorMessage) { - this.showErrorTooltip(); - } else { - this.hideErrorTooltip(); - } - } - - handleTextInputChange = (e: CustomEvent) => { - this.editedValue = e.detail; - this.onValueChange(this.editedValue as string); - if (this.errorMessage) { - this.showErrorTooltip(); - } else { - this.hideErrorTooltip(); - } + this.errorMessage = e.detail; + this.showErrorTooltip(); }; getDefaultProps = (ariaLabel) => ({ @@ -183,16 +154,7 @@ export class ModusTableCellEditor { size="large" onBlur={this.handleBlur} onValueChange={(e: CustomEvent) => (this.editedValue = e.detail)} - onKeyDown={(e) => handleArrowKeys(e, this.handleKeyDown)} - onValueError={(e: CustomEvent) => { - if (e.detail) { - this.errorMessage = e.detail; - this.showErrorTooltip(); - } else { - this.errorMessage = ''; - this.hideErrorTooltip(); - } - }}> + onKeyDown={(e) => handleArrowKeys(e, this.handleKeyDown)}> ); } @@ -201,12 +163,11 @@ export class ModusTableCellEditor { ) => (this.editedValue = e.detail)} onBlur={this.handleBlur} onKeyDown={this.handleKeyDown} autoFocusInput - size="large" - errorText={this.errorText}> + size="large"> ); } @@ -246,15 +207,6 @@ export class ModusTableCellEditor { } else { this.editedValue = detail[valueKey]; } - }} - onValueError={(e: CustomEvent) => { - if (e.detail) { - this.errorMessage = e.detail; - this.showErrorTooltip(); - } else { - this.errorMessage = ''; - this.hideErrorTooltip(); - } }}>
      ); @@ -325,15 +277,6 @@ export class ModusTableCellEditor { this.editedValue = selectedDetail; } }} - onValueError={(e: CustomEvent) => { - if (e.detail) { - this.errorMessage = e.detail; - this.showErrorTooltip(); - } else { - this.errorMessage = ''; - this.hideErrorTooltip(); - } - }} value={selectedOption}>
      ); 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 index a68861c3c..2dedd5f34 100644 --- a/stencil-workspace/src/components/modus-text-input/modus-text-input.tsx +++ b/stencil-workspace/src/components/modus-text-input/modus-text-input.tsx @@ -207,7 +207,7 @@ export class ModusTextInput { }; return ( -
      +
      {this.label || this.required ? (
      {this.label ? : null} From 9870581de1ef42dc2d318ec1744f2ec28eae034b Mon Sep 17 00:00:00 2001 From: prashanthr6383 <168108000+prashanthr6383@users.noreply.github.com> Date: Wed, 28 Aug 2024 13:08:55 +0530 Subject: [PATCH 10/11] 2711 - revert part text input --- .../modus-table-cell-editor.scss | 13 ------------- .../modus-text-input/modus-text-input.spec.tsx | 12 ++++++------ 2 files changed, 6 insertions(+), 19 deletions(-) diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss index 10b24b1fe..e00c18425 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss @@ -39,13 +39,6 @@ table.density-compact { justify-content: center; } - -.editor::part(table-inputs) { - align-items: center; - display: flex; - justify-content: center; -} - .editor::part(input-container) { border: 2px solid var(--modus-input-border-active-color, #217cbb); border-radius: unset; @@ -58,12 +51,6 @@ table.density-compact { z-index: 99; } -.editor::part(select-input error) { - border: 2px solid var(--modus-input-validation-error-color, #da212c); - border-radius: unset; - z-index: 99; -} - .error-tooltip { background-color: var(--modus-input-validation-error-color, #da212c); border-radius: 2px; 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 index 2590c7576..1af0ca918 100644 --- 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 @@ -10,7 +10,7 @@ describe('modus-text-input', () => { expect(page.root).toEqualHtml(` -
      +
      @@ -29,7 +29,7 @@ describe('modus-text-input', () => { expect(page.root).toEqualHtml(` -
      +
      @@ -48,7 +48,7 @@ describe('modus-text-input', () => { expect(page.root).toEqualHtml(` -
      +
      @@ -67,7 +67,7 @@ describe('modus-text-input', () => { expect(page.root).toEqualHtml(` -
      +
      @@ -86,7 +86,7 @@ describe('modus-text-input', () => { expect(page.root).toEqualHtml(` -
      +
      @@ -105,7 +105,7 @@ describe('modus-text-input', () => { expect(page.root).toEqualHtml(` -
      +
      From 41cbe99b996a3261718c47607b6fbd9fa1b04e40 Mon Sep 17 00:00:00 2001 From: prashanthr6383 <168108000+prashanthr6383@users.noreply.github.com> Date: Wed, 28 Aug 2024 13:42:03 +0530 Subject: [PATCH 11/11] revert - part prop and table main --- stencil-workspace/src/components.d.ts | 16 ---------------- .../modus-autocomplete.spec.ts | 4 ++-- .../modus-autocomplete/modus-autocomplete.tsx | 5 +---- .../modus-number-input.spec.tsx | 3 +-- .../modus-number-input/modus-number-input.tsx | 14 ++++++-------- .../modus-select/modus-select.spec.ts | 5 ++--- .../components/modus-select/modus-select.tsx | 8 +++----- .../modus-table-cell-main.tsx | 19 +------------------ .../modus-text-input.spec.tsx | 6 ------ .../modus-text-input/modus-text-input.tsx | 18 ++++++++---------- 10 files changed, 24 insertions(+), 74 deletions(-) diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts index c3904e497..1946b5d2d 100644 --- a/stencil-workspace/src/components.d.ts +++ b/stencil-workspace/src/components.d.ts @@ -1949,10 +1949,6 @@ export interface ModusTableCustomEvent extends CustomEvent { detail: T; target: HTMLModusTableElement; } -export interface ModusTableCellMainCustomEvent extends CustomEvent { - detail: T; - target: HTMLModusTableCellMainElement; -} export interface ModusTableRowActionsCustomEvent extends CustomEvent { 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(type: K, listener: (this: HTMLModusTableCellMainElement, ev: ModusTableCellMainCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLModusTableCellMainElement, ev: ModusTableCellMainCustomEvent) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(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; "context"?: TableContext; "hasRowsExpandable"?: boolean; - "onCellValueChanged"?: (event: ModusTableCellMainCustomEvent) => 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 index 004798ea2..29a4fdf84 100644 --- 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', () => {
      -
      +
        @@ -56,7 +56,7 @@ describe('modus-autocomplete', () => {
        -
        +
          diff --git a/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.tsx b/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.tsx index 6d473ac37..a32df25fa 100644 --- 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()}
          -
          - {this.errorText ? : null} -
          +
          {this.errorText ? : null}
          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 index 56a467659..43d63337c 100644 --- 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(` -
          +
          -
          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 index a25414d0e..3146d62e6 100644 --- 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 ( -
          +
          {this.label || this.required ? (
          {this.label ? : null} @@ -155,13 +155,11 @@ export class ModusNumberInput { type="number" value={this.value}>
          -
          - {this.errorText ? ( - - ) : this.validText ? ( - - ) : null} -
          + {this.errorText ? ( + + ) : this.validText ? ( + + ) : null}
          ); } diff --git a/stencil-workspace/src/components/modus-select/modus-select.spec.ts b/stencil-workspace/src/components/modus-select/modus-select.spec.ts index b56e7d912..cb9d2abb9 100644 --- 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', () => {
          - - -
          diff --git a/stencil-workspace/src/components/modus-select/modus-select.tsx b/stencil-workspace/src/components/modus-select/modus-select.tsx index 6a112a4cd..a090d213a 100644 --- 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 (
          {this.renderLabel()} - + -
          - {this.renderSubText()} -
          + {this.renderSubText()}
          ); diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx index 555f4c2d2..722d54ade 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx +++ b/stencil-workspace/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; - 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 { 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 index 1af0ca918..9f62fbdd6 100644 --- 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', () => {
          -
          @@ -33,7 +32,6 @@ describe('modus-text-input', () => {
          -
          @@ -52,7 +50,6 @@ describe('modus-text-input', () => {
          -
          @@ -71,7 +68,6 @@ describe('modus-text-input', () => {
          -
          @@ -90,7 +86,6 @@ describe('modus-text-input', () => {
          -
          @@ -109,7 +104,6 @@ describe('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 index 2dedd5f34..a070e6ba8 100644 --- 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 { )}
          -
          - {this.errorText ? ( - - ) : this.validText ? ( - - ) : null} -
          + {this.errorText ? ( + + ) : this.validText ? ( + + ) : null}
          ); }