From 572c75223c7243f86f63e928f8ab88f89f4640cd Mon Sep 17 00:00:00 2001 From: prashanthr6383 <168108000+prashanthr6383@users.noreply.github.com> Date: Thu, 20 Jun 2024 19:17:09 +0530 Subject: [PATCH 01/24] Table : updated styling of inline editing error messages (date-picker) (#2615) * 2542 - table date input error styling init * 2542 - updated styling for error tooltip * 2542 - updated styles cell --- stencil-workspace/src/components.d.ts | 5 ++ .../modus-date-input.spec.tsx | 4 +- .../modus-date-input/modus-date-input.tsx | 10 ++- .../src/components/modus-date-input/readme.md | 7 +- .../modus-date-picker.spec.tsx | 2 +- .../modus-date-picker/modus-date-picker.tsx | 2 +- .../components/modus-table/modus-table.scss | 2 +- .../modus-table-cell-editor.scss | 42 +++++++++- .../modus-table-cell-editor.tsx | 79 ++++++++++++++++++- 9 files changed, 138 insertions(+), 15 deletions(-) diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts index 34d4dc178..256f2fbda 100644 --- a/stencil-workspace/src/components.d.ts +++ b/stencil-workspace/src/components.d.ts @@ -2149,6 +2149,7 @@ declare global { "calendarIconClicked": ModusDateInputEventDetails; "dateInputBlur": ModusDateInputEventDetails; "valueChange": ModusDateInputEventDetails; + "valueError": string; } interface HTMLModusDateInputElement extends Components.ModusDateInput, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusDateInputElement, ev: ModusDateInputCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -3384,6 +3385,10 @@ declare namespace LocalJSX { * An event that fires on input value change. */ "onValueChange"?: (event: ModusDateInputCustomEvent) => void; + /** + * An event that fires on value error. + */ + "onValueError"?: (event: ModusDateInputCustomEvent) => void; /** * (optional) The input's placeholder text. */ diff --git a/stencil-workspace/src/components/modus-date-input/modus-date-input.spec.tsx b/stencil-workspace/src/components/modus-date-input/modus-date-input.spec.tsx index 84b4025df..1ecbec16c 100644 --- a/stencil-workspace/src/components/modus-date-input/modus-date-input.spec.tsx +++ b/stencil-workspace/src/components/modus-date-input/modus-date-input.spec.tsx @@ -18,10 +18,10 @@ describe('modus-date-input', () => { Single Date -
+
-
+
`); diff --git a/stencil-workspace/src/components/modus-date-input/modus-date-input.tsx b/stencil-workspace/src/components/modus-date-input/modus-date-input.tsx index 4987a71a6..4359ed918 100644 --- a/stencil-workspace/src/components/modus-date-input/modus-date-input.tsx +++ b/stencil-workspace/src/components/modus-date-input/modus-date-input.tsx @@ -133,6 +133,8 @@ export class ModusDateInput { /** An event that fires on input value change. */ @Event() valueChange: EventEmitter; + /** An event that fires on value error.*/ + @Event() valueError: EventEmitter; private classBySize: Map = new Map([ ['medium', 'medium'], @@ -269,11 +271,13 @@ export class ModusDateInput { if (!inputString) { if (this.required) { this.errorText = 'Required'; + this.valueError.emit(this.errorText); } else { this.clearValidation(); } } else if (!this.value) { this.errorText = 'Invalid date'; + this.valueError.emit(this.errorText); } else { this.validateMinMax(); } @@ -287,9 +291,11 @@ export class ModusDateInput { if (min && min > value) { min.setUTCDate(min.getDate() - 1); this.errorText = `Select a date after ${this._formatter.formatDisplayString(min.toISOString())}`; + this.valueError.emit(this.errorText); } else if (max && max < value) { max.setUTCDate(max.getDate() + 1); this.errorText = `Select a date before ${this._formatter.formatDisplayString(max.toISOString())}`; + this.valueError.emit(this.errorText); } else { this.clearValidation(); } @@ -310,7 +316,7 @@ export class ModusDateInput { class={`input-container ${this.errorText ? 'error' : this.validText ? 'valid' : ''} ${this.classBySize.get( this.size )}`} - part="input-container"> + part={`input-container ${this.errorText ? 'error' : this.validText ? 'valid' : ''}`}> )}
-
+
{this.errorText ? ( ) : this.validText ? ( diff --git a/stencil-workspace/src/components/modus-date-input/readme.md b/stencil-workspace/src/components/modus-date-input/readme.md index 9b28cf2c8..c050aaf94 100644 --- a/stencil-workspace/src/components/modus-date-input/readme.md +++ b/stencil-workspace/src/components/modus-date-input/readme.md @@ -39,6 +39,7 @@ | `calendarIconClicked` | An event that fires on calendar icon click. | `CustomEvent` | | `dateInputBlur` | An event that fires on input value out of focus. | `CustomEvent` | | `valueChange` | An event that fires on input value change. | `CustomEvent` | +| `valueError` | An event that fires on value error. | `CustomEvent` | ## Methods @@ -66,9 +67,9 @@ Type: `Promise` ## Shadow Parts -| Part | Description | -| ------------------- | ----------- | -| `"input-container"` | | +| Part | Description | +| ------------ | ----------- | +| `"sub-text"` | | ## Dependencies diff --git a/stencil-workspace/src/components/modus-date-picker/modus-date-picker.spec.tsx b/stencil-workspace/src/components/modus-date-picker/modus-date-picker.spec.tsx index 13407376e..2f1c50a8b 100644 --- a/stencil-workspace/src/components/modus-date-picker/modus-date-picker.spec.tsx +++ b/stencil-workspace/src/components/modus-date-picker/modus-date-picker.spec.tsx @@ -19,7 +19,7 @@ describe('modus-date-picker', () => { Date range:
-
+
diff --git a/stencil-workspace/src/components/modus-date-picker/modus-date-picker.tsx b/stencil-workspace/src/components/modus-date-picker/modus-date-picker.tsx index 91e0f9024..d38c1bbb9 100644 --- a/stencil-workspace/src/components/modus-date-picker/modus-date-picker.tsx +++ b/stencil-workspace/src/components/modus-date-picker/modus-date-picker.tsx @@ -338,7 +338,7 @@ export class ModusDatePicker { return (
{this.label ?
{this.label ? : null}
: null} -
+
this.handleSlotChange()}>
diff --git a/stencil-workspace/src/components/modus-table/modus-table.scss b/stencil-workspace/src/components/modus-table/modus-table.scss index 2ed2298dc..54bc0d51d 100644 --- a/stencil-workspace/src/components/modus-table/modus-table.scss +++ b/stencil-workspace/src/components/modus-table/modus-table.scss @@ -270,7 +270,7 @@ table { } &.edit-mode { - border: $rem-2px $modus-table-cell-border-color solid; + // border: $rem-2px $modus-table-cell-border-color solid; box-sizing: border-box; padding: 0; 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 854525cee..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 @@ -7,8 +7,7 @@ .editor::part(input-container), .editor::part(input) { - border: none !important; - height: calc($rem-48px - $rem-4px) !important; + height: calc($rem-48px - $rem-1px) !important; } table.density-comfortable { @@ -29,3 +28,42 @@ table.density-compact { margin-left: 4px; margin-top: 5px; } + +.editor::part(sub-text) { + display: none; +} + +.date-picker-container::part(date-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; + z-index: 99; +} + +.editor::part(input-container 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; + color: #fff; + display: none; + font-family: $primary-font; + font-size: 12px; + font-weight: $font-weight-semi-bold; + letter-spacing: 0.005em; + line-height: 15px; + max-width: 200px; + padding: 5px 8px; + text-align: left; + word-wrap: break-word; + z-index: 10; +} 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 ef543f206..e35ac683c 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 @@ -1,5 +1,5 @@ // eslint-disable-next-line -import { Host, JSX, Component, Prop, h, Listen } from '@stencil/core'; +import { Host, JSX, Component, Prop, h, Listen, State } from '@stencil/core'; import { KEYBOARD_ENTER, CELL_EDIT_TYPE_AUTOCOMPLETE, @@ -18,6 +18,7 @@ import { ModusTableCellEditorArgs, } from '../../../models/modus-table.models'; import { ModusDateInputEventDetails } from '../../../../modus-date-input/utils/modus-date-input.models'; +import { createPopper, Instance } from '@popperjs/core'; @Component({ tag: 'modus-table-cell-editor', @@ -31,8 +32,12 @@ export class ModusTableCellEditor { @Prop() valueChange: (newValue: string) => void; @Prop() keyDown: (e: KeyboardEvent, newValue: string) => void; + @State() errorMessage: string; + private editedValue: unknown; private inputElement: HTMLElement; + private errorTooltip: HTMLElement; + private popperInstance: Instance; connectedCallback(): void { this.editedValue = this.value; @@ -42,6 +47,11 @@ export class ModusTableCellEditor { if (this.inputElement['focusInput']) { this.inputElement['focusInput'](); } + this.createErrorTooltip(); + } + + disconnectedCallback(): void { + this.destroyErrorTooltip(); } @Listen('click', { target: 'document' }) @@ -58,18 +68,76 @@ export class ModusTableCellEditor { handleBlur: () => void = () => { this.valueChange(this.editedValue as string); + this.destroyErrorTooltip(); }; handleKeyDown: (e: KeyboardEvent) => void = (e) => { this.keyDown(e, this.editedValue as string); }; + handleError = (e: CustomEvent) => { + this.errorMessage = e.detail; + this.showErrorTooltip(); + }; + getDefaultProps = (ariaLabel) => ({ 'aria-label': ariaLabel, class: 'editor', ref: (ref) => (this.inputElement = ref), }); + createErrorTooltip(): void { + if (!this.errorTooltip) { + this.errorTooltip = document.createElement('div'); + this.errorTooltip.className = 'error-tooltip'; + this.inputElement.getRootNode().appendChild(this.errorTooltip); // Append to the same parent element as input + this.popperInstance = createPopper(this.inputElement, this.errorTooltip, { + placement: 'bottom-start', + modifiers: [ + { + name: 'offset', + options: { + offset: [-0.5, 0], // Offset from the element + }, + }, + { + name: 'preventOverflow', + options: { + boundary: 'viewport', // Prevents tooltip from overflowing the viewport + }, + }, + ], + }); + } + } + + showErrorTooltip(): void { + if (this.errorTooltip) { + this.errorTooltip.innerText = this.errorMessage; + this.errorTooltip.style.display = 'block'; + if (this.popperInstance) { + this.popperInstance.update(); + } + } + } + + hideErrorTooltip(): void { + if (this.errorTooltip) { + this.errorTooltip.style.display = 'none'; + } + } + + destroyErrorTooltip(): void { + if (this.popperInstance) { + this.popperInstance.destroy(); + this.popperInstance = null; + } + if (this.errorTooltip) { + this.errorTooltip.remove(); + this.errorTooltip = null; + } + } + renderNumberInput(): JSX.Element[] { function handleArrowKeys(e: KeyboardEvent, callback: (e: KeyboardEvent) => void) { const code = e.key.toLowerCase(); @@ -146,7 +214,10 @@ export class ModusTableCellEditor { const valueKey = 'value'; const format = (this.args as ModusTableCellDateEditorArgs)?.format; return ( - e.stopPropagation()}> + e.stopPropagation()} + class="date-picker-container"> ) => { this.editedValue = e.detail[valueKey]; - }}> + this.hideErrorTooltip(); + }} + onValueError={(e: CustomEvent) => this.handleError(e)}> ); } From 55d193030e491a06666a41f0a2850979ed296528 Mon Sep 17 00:00:00 2001 From: prashanthr6383 <168108000+prashanthr6383@users.noreply.github.com> Date: Thu, 20 Jun 2024 19:28:28 +0530 Subject: [PATCH 02/24] Table: API for handling cell edit (#2568) * Table - Api to select and edit cell * 2541 - Update storybook for getCellEditable Api * 2541 - readme autogenerate fix * 2541- Updated naming for api --- stencil-workspace/src/components.d.ts | 14 ++++++++++ .../components/modus-table/modus-table.tsx | 28 +++++++++++++++++++ .../modus-table-cell-main.tsx | 26 +++++++++++++++++ .../cell/modus-table-cell-main/readme.md | 20 +++++++++++++ .../src/components/modus-table/readme.md | 17 +++++++++++ .../modus-table-storybook-docs.mdx | 1 + 6 files changed, 106 insertions(+) diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts index 256f2fbda..7f208d8e1 100644 --- a/stencil-workspace/src/components.d.ts +++ b/stencil-workspace/src/components.d.ts @@ -1226,6 +1226,13 @@ export namespace Components { * @returns : Column data as Array or empty array. */ "getColumnData": (accessorKey: string) => Promise; + /** + * Returns whether a cell is editable based on row index and column ID. + * @param rowIndex The index of the row. + * @param columnId The ID of the column. + * @returns Boolean indicating if the cell is editable. + */ + "getEditableCell": (rowIndex: string, columnId: string) => Promise; /** * (Optional) To enable row hover in table. */ @@ -1310,6 +1317,13 @@ export namespace Components { interface ModusTableCellMain { "cell": Cell; "context": TableContext; + /** + * Returns whether a cell is editable based on row index and column ID. + * @param rowIndex The index of the row. + * @param columnId The ID of the column. + * @returns Boolean indicating if the cell is editable. + */ + "handleCellEdit": (rowIndex: string, columnId: string) => Promise; "hasRowsExpandable": boolean; "valueChange": (props: TableCellEdited) => void; } diff --git a/stencil-workspace/src/components/modus-table/modus-table.tsx b/stencil-workspace/src/components/modus-table/modus-table.tsx index fa77d9782..81fba9616 100644 --- a/stencil-workspace/src/components/modus-table/modus-table.tsx +++ b/stencil-workspace/src/components/modus-table/modus-table.tsx @@ -335,6 +335,7 @@ export class ModusTable { }; @State() tableCore: ModusTableCore; + @State() cells: HTMLModusTableCellMainElement[] = []; classByDensity: Map = new Map([ ['relaxed', 'density-relaxed'], @@ -351,6 +352,11 @@ export class ModusTable { private onKeyDown = (event: KeyboardEvent) => this.handleKeyDown(event); private onMouseUp = () => this.handleDrop(); + /** Updates the cells state by querying the shadow DOM for modus-table-cell-main elements.*/ + private updateCells() { + this.cells = Array.from(this.element.shadowRoot.querySelectorAll('modus-table-cell-main')); + } + componentWillLoad(): void { this._id = this.element.id || `modus-table-${createGuid()}`; this.columns = this.columns?.map((column) => ({ @@ -398,6 +404,28 @@ export class ModusTable { return rowData; } + /** + * Returns whether a cell is editable based on row index and column ID. + * @param rowIndex The index of the row. + * @param columnId The ID of the column. + * @returns Boolean indicating if the cell is editable. + */ + @Method() + async getEditableCell(rowIndex: string, columnId: string): Promise { + this.updateCells(); + + // Find the specific cell to edit + const cellToEdit = this.cells.find( + (cell) => cell.cell.row.index.toString() === rowIndex && cell.cell.column.id === columnId + ); + + if (!cellToEdit) { + return; + } + + await cellToEdit.handleCellEdit(rowIndex, columnId); + } + /** * Toggle the table column visibility * @param columnId Column id 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 e61d8c2d7..403945f52 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 @@ -6,6 +6,7 @@ import { Watch, Component, Prop, + Method, h, // eslint-disable-line @typescript-eslint/no-unused-vars } from '@stencil/core'; import { Cell } from '@tanstack/table-core'; @@ -95,6 +96,31 @@ export class ModusTableCellMain { } }; + /** + * Returns whether a cell is editable based on row index and column ID. + * @param rowIndex The index of the row. + * @param columnId The ID of the column. + * @returns Boolean indicating if the cell is editable. + */ + @Method() + async handleCellEdit(rowIndex: string, columnId: string): Promise { + const tableInstance = this.cell.getContext().table; + const row = tableInstance.getRowModel().rows[rowIndex]; + + if (!row) return; + + const cell = row.getAllCells().find((cell) => cell.column.id === columnId); + if (!cell) return; + + // Focus on the cell element + const cellElement = this.el.querySelector(`[data-cell-id="${rowIndex}-${columnId}"]`) as HTMLElement; + if (cellElement) { + cellElement.focus(); + } + + this.editMode = true; + } + handleCellBlur = (event: FocusEvent) => { if (!this.el.contains(event.relatedTarget as HTMLElement)) { this.editMode = false; diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/readme.md b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/readme.md index 8a75263c6..3f06f7ba5 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/readme.md +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/readme.md @@ -15,6 +15,26 @@ | `valueChange` | -- | | `(props: TableCellEdited) => void` | `undefined` | +## Methods + +### `handleCellEdit(rowIndex: string, columnId: string) => Promise` + +Returns whether a cell is editable based on row index and column ID. + +#### Parameters + +| Name | Type | Description | +| ---------- | -------- | --------------------- | +| `rowIndex` | `string` | The index of the row. | +| `columnId` | `string` | The ID of the column. | + +#### Returns + +Type: `Promise` + +Boolean indicating if the cell is editable. + + ## Dependencies ### Used by diff --git a/stencil-workspace/src/components/modus-table/readme.md b/stencil-workspace/src/components/modus-table/readme.md index eae245b38..4f9aeff9a 100644 --- a/stencil-workspace/src/components/modus-table/readme.md +++ b/stencil-workspace/src/components/modus-table/readme.md @@ -71,6 +71,23 @@ Type: `Promise` : Column data as Array or empty array. +### `getEditableCell(rowIndex: string, columnId: string) => Promise` + +Returns whether a cell is editable based on row index and column ID. + +#### Parameters + +| Name | Type | Description | +| ---------- | -------- | --------------------- | +| `rowIndex` | `string` | The index of the row. | +| `columnId` | `string` | The ID of the column. | + +#### Returns + +Type: `Promise` + +Boolean indicating if the cell is editable. + ### `toggleColumnVisibility(columnId: string, show: boolean) => Promise` Toggle the table column visibility diff --git a/stencil-workspace/storybook/stories/components/modus-table/modus-table-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-table/modus-table-storybook-docs.mdx index 2df719cf9..259076da9 100644 --- a/stencil-workspace/storybook/stories/components/modus-table/modus-table-storybook-docs.mdx +++ b/stencil-workspace/storybook/stories/components/modus-table/modus-table-storybook-docs.mdx @@ -852,6 +852,7 @@ Users can use this to provide custom elements. | ------------------------ | ----------------------------------------- | ----------------------------------- | -------------------- | | `getColumnData` | Gets data of a perticular column. | `accessorKey: string` | `Promise` | | `toggleColumnVisibility` | Decides the Data table column visibility. | `columnId: string`, `show: boolean` | `Promise` | +| `getEditableCell` | Handle the editability of a specific cell.| `rowIndex: string`, `columnId: string` | `Promise` | ### Text Wrapping From 6c3b3c8d3e4f51a14a65383449c44ecbde155edf Mon Sep 17 00:00:00 2001 From: ElishaSamPeterPrabhu <122255626+ElishaSamPeterPrabhu@users.noreply.github.com> Date: Thu, 20 Jun 2024 19:54:10 +0530 Subject: [PATCH 03/24] Update Button Borderless secondary color in themes (#2620) * Update themes * Update modus-button.vars.scss --------- Co-authored-by: coliff --- .../src/components/modus-button/modus-button.vars.scss | 2 +- stencil-workspace/src/global/themes.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/stencil-workspace/src/components/modus-button/modus-button.vars.scss b/stencil-workspace/src/components/modus-button/modus-button.vars.scss index 8e6464ba5..aa2683d47 100644 --- a/stencil-workspace/src/components/modus-button/modus-button.vars.scss +++ b/stencil-workspace/src/components/modus-button/modus-button.vars.scss @@ -47,7 +47,7 @@ $btn-outline-active: ( // Default Borderless $modus-btn-borderless-bg: var(--modus-btn-text-primary-bg, transparent) !default; $modus-btn-borderless-color: var(--modus-btn-text-primary-color, #0063a3) !default; -$modus-btn-borderless-secondary-color: var(--modus-btn-borderless-secondary-color, #0000) !default; +$modus-btn-borderless-secondary-color: var(--modus-btn-borderless-secondary-color, #000) !default; // Hover $btn-borderless-hover: ( diff --git a/stencil-workspace/src/global/themes.scss b/stencil-workspace/src/global/themes.scss index d31260ef7..80fccec71 100644 --- a/stencil-workspace/src/global/themes.scss +++ b/stencil-workspace/src/global/themes.scss @@ -165,7 +165,7 @@ --modus-btn-icon-only-secondary-hover-color: var(--modus-trimble-gray); --modus-btn-icon-only-secondary-active-bg: var(--modus-gray-1); --modus-btn-icon-only-secondary-active-color: var(--modus-trimble-gray); - --modus-btn-borderless-secondary-color: (var(--modus-black)); + --modus-btn-borderless-secondary-color: var(--modus-black); --modus-btn-borderless-secondary-hover-bg: var(--modus-gray-0); // Tertiary @@ -535,7 +535,7 @@ --modus-btn-icon-only-secondary-hover-color: var(--modus-white); --modus-btn-icon-only-secondary-active-bg: var(--modus-gray-6); --modus-btn-icon-only-secondary-active-color: var(--modus-white); - --modus-btn-borderless-secondary-color: (var(--modus-white)); + --modus-btn-borderless-secondary-color: var(--modus-white); --modus-btn-borderless-secondary-hover-bg: #32363b; // Tertiary From 7fca8d94f6dd7b671d11a8686ecc31c12a00fd88 Mon Sep 17 00:00:00 2001 From: Christian Oliff Date: Thu, 20 Jun 2024 23:45:07 +0900 Subject: [PATCH 04/24] Release v0.32.0 (#2621) --- stencil-workspace/package-lock.json | 4 ++-- stencil-workspace/package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/stencil-workspace/package-lock.json b/stencil-workspace/package-lock.json index a37f22405..efe4d729b 100644 --- a/stencil-workspace/package-lock.json +++ b/stencil-workspace/package-lock.json @@ -1,12 +1,12 @@ { "name": "@trimble-oss/modus-web-components", - "version": "0.31.1", + "version": "0.32.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@trimble-oss/modus-web-components", - "version": "0.31.1", + "version": "0.32.0", "license": "MIT", "dependencies": { "@popperjs/core": "^2.11.8", diff --git a/stencil-workspace/package.json b/stencil-workspace/package.json index e28f2d6dc..a8d92fd60 100644 --- a/stencil-workspace/package.json +++ b/stencil-workspace/package.json @@ -1,6 +1,6 @@ { "name": "@trimble-oss/modus-web-components", - "version": "0.31.1", + "version": "0.32.0", "description": "Trimble Modus Web Component Library", "homepage": "https://modus-web-components.trimble.com/", "bugs": { From a72a4024e398584b882d53353e189bb15f2de0f9 Mon Sep 17 00:00:00 2001 From: Christian Oliff Date: Fri, 21 Jun 2024 00:36:05 +0900 Subject: [PATCH 05/24] Release v0.32.0 - ng & React (#2622) --- .../modus-angular-components/package-lock.json | 18 +++++++++--------- .../modus-angular-components/package.json | 4 ++-- .../modus-angular-components/package-lock.json | 18 +++++++++--------- .../modus-angular-components/package.json | 4 ++-- .../modus-angular-components/package-lock.json | 18 +++++++++--------- .../modus-angular-components/package.json | 4 ++-- .../modus-angular-components/package-lock.json | 18 +++++++++--------- .../modus-angular-components/package.json | 4 ++-- react-workspace/react-17/package-lock.json | 18 +++++++++--------- react-workspace/react-17/package.json | 4 ++-- react-workspace/react-18/package-lock.json | 18 +++++++++--------- react-workspace/react-18/package.json | 4 ++-- 12 files changed, 66 insertions(+), 66 deletions(-) diff --git a/angular-workspace/ng14/projects/trimble-oss/modus-angular-components/package-lock.json b/angular-workspace/ng14/projects/trimble-oss/modus-angular-components/package-lock.json index 13d09d85d..709e9ac88 100644 --- a/angular-workspace/ng14/projects/trimble-oss/modus-angular-components/package-lock.json +++ b/angular-workspace/ng14/projects/trimble-oss/modus-angular-components/package-lock.json @@ -1,12 +1,12 @@ { "name": "@trimble-oss/modus-angular-components", - "version": "0.31.1-ng14", + "version": "0.32.0-ng14", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@trimble-oss/modus-angular-components", - "version": "0.31.1-ng14", + "version": "0.32.0-ng14", "license": "MIT", "dependencies": { "tslib": "^2.5.3" @@ -17,7 +17,7 @@ "peerDependencies": { "@angular/common": "^14.1.1", "@angular/core": "^14.1.1", - "@trimble-oss/modus-web-components": "0.31.1" + "@trimble-oss/modus-web-components": "0.32.0" } }, "node_modules/@angular/common": { @@ -89,9 +89,9 @@ } }, "node_modules/@trimble-oss/modus-web-components": { - "version": "0.31.1", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.31.1.tgz", - "integrity": "sha512-pbU2/IUjkRPbgd3ZM7PattGOJjDCNMPxlv9OqOCFy8uwDKRSUjaWe09jE0KswXktsX3gfEcVodnkpNMSkB0j8g==", + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.32.0.tgz", + "integrity": "sha512-zlrATNcSaYrVqGdQYkObSXy/IQXiYTcouiLtX5ylnInqDabog9KYnxnr1fAjBYteiYYWCe1ElIBj1kEXwphe5w==", "peer": true, "dependencies": { "@popperjs/core": "^2.11.8", @@ -165,9 +165,9 @@ "peer": true }, "@trimble-oss/modus-web-components": { - "version": "0.31.1", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.31.1.tgz", - "integrity": "sha512-pbU2/IUjkRPbgd3ZM7PattGOJjDCNMPxlv9OqOCFy8uwDKRSUjaWe09jE0KswXktsX3gfEcVodnkpNMSkB0j8g==", + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.32.0.tgz", + "integrity": "sha512-zlrATNcSaYrVqGdQYkObSXy/IQXiYTcouiLtX5ylnInqDabog9KYnxnr1fAjBYteiYYWCe1ElIBj1kEXwphe5w==", "peer": true, "requires": { "@popperjs/core": "^2.11.8", diff --git a/angular-workspace/ng14/projects/trimble-oss/modus-angular-components/package.json b/angular-workspace/ng14/projects/trimble-oss/modus-angular-components/package.json index 40480f3d0..2ada1e95e 100644 --- a/angular-workspace/ng14/projects/trimble-oss/modus-angular-components/package.json +++ b/angular-workspace/ng14/projects/trimble-oss/modus-angular-components/package.json @@ -1,6 +1,6 @@ { "name": "@trimble-oss/modus-angular-components", - "version": "0.31.1-ng14", + "version": "0.32.0-ng14", "license": "MIT", "description": "Trimble Modus Angular Components Library", "homepage": "https://modus-web-components.trimble.com/", @@ -14,7 +14,7 @@ "peerDependencies": { "@angular/common": "^14.1.1", "@angular/core": "^14.1.1", - "@trimble-oss/modus-web-components": "0.31.1" + "@trimble-oss/modus-web-components": "0.32.0" }, "dependencies": { "tslib": "^2.5.3" diff --git a/angular-workspace/ng15/projects/trimble-oss/modus-angular-components/package-lock.json b/angular-workspace/ng15/projects/trimble-oss/modus-angular-components/package-lock.json index a60c33418..377d7f64d 100644 --- a/angular-workspace/ng15/projects/trimble-oss/modus-angular-components/package-lock.json +++ b/angular-workspace/ng15/projects/trimble-oss/modus-angular-components/package-lock.json @@ -1,12 +1,12 @@ { "name": "@trimble-oss/modus-angular-components", - "version": "0.31.1-ng15", + "version": "0.32.0-ng15", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@trimble-oss/modus-angular-components", - "version": "0.31.1-ng15", + "version": "0.32.0-ng15", "license": "MIT", "dependencies": { "tslib": "^2.5.3" @@ -17,7 +17,7 @@ "peerDependencies": { "@angular/common": "^15.2.9", "@angular/core": "^15.2.9", - "@trimble-oss/modus-web-components": "0.31.1" + "@trimble-oss/modus-web-components": "0.32.0" } }, "node_modules/@angular/common": { @@ -89,9 +89,9 @@ } }, "node_modules/@trimble-oss/modus-web-components": { - "version": "0.31.1", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.31.1.tgz", - "integrity": "sha512-pbU2/IUjkRPbgd3ZM7PattGOJjDCNMPxlv9OqOCFy8uwDKRSUjaWe09jE0KswXktsX3gfEcVodnkpNMSkB0j8g==", + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.32.0.tgz", + "integrity": "sha512-zlrATNcSaYrVqGdQYkObSXy/IQXiYTcouiLtX5ylnInqDabog9KYnxnr1fAjBYteiYYWCe1ElIBj1kEXwphe5w==", "peer": true, "dependencies": { "@popperjs/core": "^2.11.8", @@ -165,9 +165,9 @@ "peer": true }, "@trimble-oss/modus-web-components": { - "version": "0.31.1", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.31.1.tgz", - "integrity": "sha512-pbU2/IUjkRPbgd3ZM7PattGOJjDCNMPxlv9OqOCFy8uwDKRSUjaWe09jE0KswXktsX3gfEcVodnkpNMSkB0j8g==", + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.32.0.tgz", + "integrity": "sha512-zlrATNcSaYrVqGdQYkObSXy/IQXiYTcouiLtX5ylnInqDabog9KYnxnr1fAjBYteiYYWCe1ElIBj1kEXwphe5w==", "peer": true, "requires": { "@popperjs/core": "^2.11.8", diff --git a/angular-workspace/ng15/projects/trimble-oss/modus-angular-components/package.json b/angular-workspace/ng15/projects/trimble-oss/modus-angular-components/package.json index 5a12d9c6d..eb0659ea6 100644 --- a/angular-workspace/ng15/projects/trimble-oss/modus-angular-components/package.json +++ b/angular-workspace/ng15/projects/trimble-oss/modus-angular-components/package.json @@ -1,6 +1,6 @@ { "name": "@trimble-oss/modus-angular-components", - "version": "0.31.1-ng15", + "version": "0.32.0-ng15", "license": "MIT", "description": "Trimble Modus Angular Components Library", "homepage": "https://modus-web-components.trimble.com/", @@ -14,7 +14,7 @@ "peerDependencies": { "@angular/common": "^15.2.9", "@angular/core": "^15.2.9", - "@trimble-oss/modus-web-components": "0.31.1" + "@trimble-oss/modus-web-components": "0.32.0" }, "dependencies": { "tslib": "^2.5.3" diff --git a/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/package-lock.json b/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/package-lock.json index 9098128ef..de6be70ba 100644 --- a/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/package-lock.json +++ b/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/package-lock.json @@ -1,12 +1,12 @@ { "name": "@trimble-oss/modus-angular-components", - "version": "0.31.1-ng16", + "version": "0.32.0-ng16", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@trimble-oss/modus-angular-components", - "version": "0.31.1-ng16", + "version": "0.32.0-ng16", "license": "MIT", "dependencies": { "tslib": "^2.5.3" @@ -17,7 +17,7 @@ "peerDependencies": { "@angular/common": "^16.1.7", "@angular/core": "^16.1.7", - "@trimble-oss/modus-web-components": "0.31.1" + "@trimble-oss/modus-web-components": "0.32.0" } }, "node_modules/@angular/common": { @@ -89,9 +89,9 @@ } }, "node_modules/@trimble-oss/modus-web-components": { - "version": "0.31.1", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.31.1.tgz", - "integrity": "sha512-pbU2/IUjkRPbgd3ZM7PattGOJjDCNMPxlv9OqOCFy8uwDKRSUjaWe09jE0KswXktsX3gfEcVodnkpNMSkB0j8g==", + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.32.0.tgz", + "integrity": "sha512-zlrATNcSaYrVqGdQYkObSXy/IQXiYTcouiLtX5ylnInqDabog9KYnxnr1fAjBYteiYYWCe1ElIBj1kEXwphe5w==", "peer": true, "dependencies": { "@popperjs/core": "^2.11.8", @@ -165,9 +165,9 @@ "peer": true }, "@trimble-oss/modus-web-components": { - "version": "0.31.1", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.31.1.tgz", - "integrity": "sha512-pbU2/IUjkRPbgd3ZM7PattGOJjDCNMPxlv9OqOCFy8uwDKRSUjaWe09jE0KswXktsX3gfEcVodnkpNMSkB0j8g==", + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.32.0.tgz", + "integrity": "sha512-zlrATNcSaYrVqGdQYkObSXy/IQXiYTcouiLtX5ylnInqDabog9KYnxnr1fAjBYteiYYWCe1ElIBj1kEXwphe5w==", "peer": true, "requires": { "@popperjs/core": "^2.11.8", diff --git a/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/package.json b/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/package.json index d7f8d3774..61f59de3c 100644 --- a/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/package.json +++ b/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/package.json @@ -1,6 +1,6 @@ { "name": "@trimble-oss/modus-angular-components", - "version": "0.31.1-ng16", + "version": "0.32.0-ng16", "license": "MIT", "description": "Trimble Modus Angular Components Library", "homepage": "https://modus-web-components.trimble.com/", @@ -14,7 +14,7 @@ "peerDependencies": { "@angular/common": "^16.1.7", "@angular/core": "^16.1.7", - "@trimble-oss/modus-web-components": "0.31.1" + "@trimble-oss/modus-web-components": "0.32.0" }, "dependencies": { "tslib": "^2.5.3" diff --git a/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/package-lock.json b/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/package-lock.json index 12a3b3f5b..09e8b4b56 100644 --- a/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/package-lock.json +++ b/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/package-lock.json @@ -1,12 +1,12 @@ { "name": "@trimble-oss/modus-angular-components", - "version": "0.31.1-ng17", + "version": "0.32.0-ng17", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@trimble-oss/modus-angular-components", - "version": "0.31.1-ng17", + "version": "0.32.0-ng17", "license": "MIT", "dependencies": { "tslib": "^2.5.3" @@ -17,7 +17,7 @@ "peerDependencies": { "@angular/common": "^17.2.2", "@angular/core": "^17.2.2", - "@trimble-oss/modus-web-components": "0.31.1" + "@trimble-oss/modus-web-components": "0.32.0" } }, "node_modules/@angular/common": { @@ -89,9 +89,9 @@ } }, "node_modules/@trimble-oss/modus-web-components": { - "version": "0.31.1", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.31.1.tgz", - "integrity": "sha512-pbU2/IUjkRPbgd3ZM7PattGOJjDCNMPxlv9OqOCFy8uwDKRSUjaWe09jE0KswXktsX3gfEcVodnkpNMSkB0j8g==", + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.32.0.tgz", + "integrity": "sha512-zlrATNcSaYrVqGdQYkObSXy/IQXiYTcouiLtX5ylnInqDabog9KYnxnr1fAjBYteiYYWCe1ElIBj1kEXwphe5w==", "peer": true, "dependencies": { "@popperjs/core": "^2.11.8", @@ -162,9 +162,9 @@ "peer": true }, "@trimble-oss/modus-web-components": { - "version": "0.31.1", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.31.1.tgz", - "integrity": "sha512-pbU2/IUjkRPbgd3ZM7PattGOJjDCNMPxlv9OqOCFy8uwDKRSUjaWe09jE0KswXktsX3gfEcVodnkpNMSkB0j8g==", + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.32.0.tgz", + "integrity": "sha512-zlrATNcSaYrVqGdQYkObSXy/IQXiYTcouiLtX5ylnInqDabog9KYnxnr1fAjBYteiYYWCe1ElIBj1kEXwphe5w==", "peer": true, "requires": { "@popperjs/core": "^2.11.8", diff --git a/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/package.json b/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/package.json index 0ad1825e5..d9075606f 100644 --- a/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/package.json +++ b/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/package.json @@ -1,6 +1,6 @@ { "name": "@trimble-oss/modus-angular-components", - "version": "0.31.1-ng17", + "version": "0.32.0-ng17", "license": "MIT", "description": "Trimble Modus Angular Components Library", "homepage": "https://modus-web-components.trimble.com/", @@ -14,7 +14,7 @@ "peerDependencies": { "@angular/common": "^17.2.2", "@angular/core": "^17.2.2", - "@trimble-oss/modus-web-components": "0.31.1" + "@trimble-oss/modus-web-components": "0.32.0" }, "dependencies": { "tslib": "^2.5.3" diff --git a/react-workspace/react-17/package-lock.json b/react-workspace/react-17/package-lock.json index ff70fdc25..8929dd0c0 100644 --- a/react-workspace/react-17/package-lock.json +++ b/react-workspace/react-17/package-lock.json @@ -1,15 +1,15 @@ { "name": "@trimble-oss/modus-react-components", - "version": "0.31.1-react17", + "version": "0.32.0-react17", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@trimble-oss/modus-react-components", - "version": "0.31.1-react17", + "version": "0.32.0-react17", "license": "MIT", "dependencies": { - "@trimble-oss/modus-web-components": "0.31.1" + "@trimble-oss/modus-web-components": "0.32.0" }, "devDependencies": { "@types/jest": "23.3.9", @@ -1066,9 +1066,9 @@ } }, "node_modules/@trimble-oss/modus-web-components": { - "version": "0.31.1", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.31.1.tgz", - "integrity": "sha512-pbU2/IUjkRPbgd3ZM7PattGOJjDCNMPxlv9OqOCFy8uwDKRSUjaWe09jE0KswXktsX3gfEcVodnkpNMSkB0j8g==", + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.32.0.tgz", + "integrity": "sha512-zlrATNcSaYrVqGdQYkObSXy/IQXiYTcouiLtX5ylnInqDabog9KYnxnr1fAjBYteiYYWCe1ElIBj1kEXwphe5w==", "dependencies": { "@popperjs/core": "^2.11.8", "@stencil/core": "^4.12.4", @@ -4980,9 +4980,9 @@ "integrity": "sha512-mPBodDGVL+fl6d90wUREepHa/7lhsghg2A3vFpakEhrhtbIlgNAZiMr7ccTgak5qbHqF14Fwy+W1yFWQt+WmYQ==" }, "@trimble-oss/modus-web-components": { - "version": "0.31.1", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.31.1.tgz", - "integrity": "sha512-pbU2/IUjkRPbgd3ZM7PattGOJjDCNMPxlv9OqOCFy8uwDKRSUjaWe09jE0KswXktsX3gfEcVodnkpNMSkB0j8g==", + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.32.0.tgz", + "integrity": "sha512-zlrATNcSaYrVqGdQYkObSXy/IQXiYTcouiLtX5ylnInqDabog9KYnxnr1fAjBYteiYYWCe1ElIBj1kEXwphe5w==", "requires": { "@popperjs/core": "^2.11.8", "@stencil/core": "^4.12.4", diff --git a/react-workspace/react-17/package.json b/react-workspace/react-17/package.json index 822efac0e..3540a74df 100644 --- a/react-workspace/react-17/package.json +++ b/react-workspace/react-17/package.json @@ -1,6 +1,6 @@ { "name": "@trimble-oss/modus-react-components", - "version": "0.31.1-react17", + "version": "0.32.0-react17", "description": "Trimble Modus React Component Library", "homepage": "https://modus-web-components.trimble.com/", "bugs": { @@ -33,7 +33,7 @@ ] }, "dependencies": { - "@trimble-oss/modus-web-components": "0.31.1" + "@trimble-oss/modus-web-components": "0.32.0" }, "devDependencies": { "@types/jest": "23.3.9", diff --git a/react-workspace/react-18/package-lock.json b/react-workspace/react-18/package-lock.json index 73cc8bef1..8f1b21f9d 100644 --- a/react-workspace/react-18/package-lock.json +++ b/react-workspace/react-18/package-lock.json @@ -1,15 +1,15 @@ { "name": "@trimble-oss/modus-react-components", - "version": "0.31.1-react18", + "version": "0.32.0-react18", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@trimble-oss/modus-react-components", - "version": "0.31.1-react18", + "version": "0.32.0-react18", "license": "MIT", "dependencies": { - "@trimble-oss/modus-web-components": "0.31.1" + "@trimble-oss/modus-web-components": "0.32.0" }, "devDependencies": { "@types/jest": "23.3.14", @@ -1066,9 +1066,9 @@ } }, "node_modules/@trimble-oss/modus-web-components": { - "version": "0.31.1", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.31.1.tgz", - "integrity": "sha512-pbU2/IUjkRPbgd3ZM7PattGOJjDCNMPxlv9OqOCFy8uwDKRSUjaWe09jE0KswXktsX3gfEcVodnkpNMSkB0j8g==", + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.32.0.tgz", + "integrity": "sha512-zlrATNcSaYrVqGdQYkObSXy/IQXiYTcouiLtX5ylnInqDabog9KYnxnr1fAjBYteiYYWCe1ElIBj1kEXwphe5w==", "dependencies": { "@popperjs/core": "^2.11.8", "@stencil/core": "^4.12.4", @@ -4968,9 +4968,9 @@ "integrity": "sha512-mPBodDGVL+fl6d90wUREepHa/7lhsghg2A3vFpakEhrhtbIlgNAZiMr7ccTgak5qbHqF14Fwy+W1yFWQt+WmYQ==" }, "@trimble-oss/modus-web-components": { - "version": "0.31.1", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.31.1.tgz", - "integrity": "sha512-pbU2/IUjkRPbgd3ZM7PattGOJjDCNMPxlv9OqOCFy8uwDKRSUjaWe09jE0KswXktsX3gfEcVodnkpNMSkB0j8g==", + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.32.0.tgz", + "integrity": "sha512-zlrATNcSaYrVqGdQYkObSXy/IQXiYTcouiLtX5ylnInqDabog9KYnxnr1fAjBYteiYYWCe1ElIBj1kEXwphe5w==", "requires": { "@popperjs/core": "^2.11.8", "@stencil/core": "^4.12.4", diff --git a/react-workspace/react-18/package.json b/react-workspace/react-18/package.json index 04907780f..e3781179f 100644 --- a/react-workspace/react-18/package.json +++ b/react-workspace/react-18/package.json @@ -1,6 +1,6 @@ { "name": "@trimble-oss/modus-react-components", - "version": "0.31.1-react18", + "version": "0.32.0-react18", "description": "Trimble Modus React Component Library", "homepage": "https://modus-web-components.trimble.com/", "bugs": { @@ -33,7 +33,7 @@ ] }, "dependencies": { - "@trimble-oss/modus-web-components": "0.31.1" + "@trimble-oss/modus-web-components": "0.32.0" }, "devDependencies": { "@types/jest": "23.3.14", From 0520244780ee01f3865146044b8728fc606b81a7 Mon Sep 17 00:00:00 2001 From: Christian Oliff Date: Mon, 24 Jun 2024 16:49:35 +0900 Subject: [PATCH 06/24] Textarea: readonly state CSS fix (#2631) - Add readonly state CSS - Remove unused icons CSS --- .../modus-textarea-input.scss | 93 +------------------ 1 file changed, 2 insertions(+), 91 deletions(-) diff --git a/stencil-workspace/src/components/modus-textarea-input/modus-textarea-input.scss b/stencil-workspace/src/components/modus-textarea-input/modus-textarea-input.scss index d83880c2b..158b70b99 100644 --- a/stencil-workspace/src/components/modus-textarea-input/modus-textarea-input.scss +++ b/stencil-workspace/src/components/modus-textarea-input/modus-textarea-input.scss @@ -46,14 +46,6 @@ position: relative; width: 100%; - svg { - padding: 0 $rem-6px; - - path { - fill: $modus-input-helper-icon-color; - } - } - textarea { background-color: transparent; border: none; @@ -67,43 +59,11 @@ resize: vertical; width: 100%; - &.has-left-icon { - padding-left: 0; - } - - &.has-right-icon { - padding-right: 0; - } - - &.text-align-right { - text-align: right; - } - &::placeholder { color: $modus-input-hint-text-color; } } - .icons { - align-items: center; - color: $modus-input-helper-icon-color; - cursor: pointer; - display: flex; - font-size: $rem-16px; - height: 100%; - justify-content: center; - width: 2rem; - - &.clear { - cursor: pointer; - min-height: 1.5rem; - - &:hover svg path { - opacity: 0.75; - } - } - } - &:hover { cursor: text; } @@ -133,7 +93,7 @@ } } - .input-container:has(input[readonly]) { + .input-container:has(textarea[readonly]) { background-color: $modus-input-readonly-bg; border-color: transparent; } @@ -172,56 +132,7 @@ .input-container { background-color: $modus-input-disabled-bg; - border: $rem-1px solid $modus-input-disabled-border-color; - border-color: transparent; - - svg path { - fill: $modus-input-disabled-color; - } - - .icons { - background-color: $modus-input-disabled-bg; - cursor: default; - - &.clear { - visibility: hidden; - } - } - - input { - background-color: transparent; - border-radius: 0; - color: $modus-input-disabled-color; - height: 100%; - } + border: $rem-1px solid transparent; } } - - .toggle-password { - svg.visibility, - svg.visibility-off { - display: none; - } - } - - input { - background-position: right calc(0.375em + 0.1875rem) center; - background-repeat: no-repeat; - background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); - padding-right: calc(1.5em + 0.75rem); - } - - input[type='password'] + .toggle-password > svg.visibility { - display: inline; - } - - input[type='text'] + .toggle-password > svg.visibility-off { - display: inline; - } - - input[type='search']::-webkit-search-cancel-button, - input[type='search']::-webkit-search-decoration { - -webkit-appearance: none; - appearance: none; - } } From b97e869e6b5082b154aabf37874cf2d8f8dd90f3 Mon Sep 17 00:00:00 2001 From: Christian Oliff Date: Mon, 24 Jun 2024 22:54:29 +0900 Subject: [PATCH 07/24] Badge: Primary badge (Dark Mode) color change to `#171c1e` (#2639) Change from `#fff` to `#171c1e` --- stencil-workspace/src/global/themes.scss | 3 ++ .../modus-badge-storybook-docs.mdx | 5 +- .../modus-badge/modus-badge.stories.tsx | 49 ++++--------------- 3 files changed, 14 insertions(+), 43 deletions(-) diff --git a/stencil-workspace/src/global/themes.scss b/stencil-workspace/src/global/themes.scss index 80fccec71..1421dadc6 100644 --- a/stencil-workspace/src/global/themes.scss +++ b/stencil-workspace/src/global/themes.scss @@ -493,6 +493,9 @@ --modus-alert-danger-border-color: var(--modus-danger); --modus-alert-warning-border-color: var(--modus-warning); + // Badge Primary + --modus-badge-primary-color: #171c1e; + // Text only Badge --modus-badge-text-dark: var(--modus-gray-light); diff --git a/stencil-workspace/storybook/stories/components/modus-badge/modus-badge-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-badge/modus-badge-storybook-docs.mdx index 5add76be9..35295f360 100644 --- a/stencil-workspace/storybook/stories/components/modus-badge/modus-badge-storybook-docs.mdx +++ b/stencil-workspace/storybook/stories/components/modus-badge/modus-badge-storybook-docs.mdx @@ -114,10 +114,7 @@ This component utilizes the slot element, allowing you to render your own HTML i color The color of the badge string - - 'danger', 'dark', 'primary', 'secondary', 'success', 'tertiary', - 'warning' - + 'danger', 'dark', 'primary', 'secondary', 'success', 'tertiary', 'warning' 'primary' diff --git a/stencil-workspace/storybook/stories/components/modus-badge/modus-badge.stories.tsx b/stencil-workspace/storybook/stories/components/modus-badge/modus-badge.stories.tsx index cc23b07b9..4921dc294 100644 --- a/stencil-workspace/storybook/stories/components/modus-badge/modus-badge.stories.tsx +++ b/stencil-workspace/storybook/stories/components/modus-badge/modus-badge.stories.tsx @@ -14,15 +14,7 @@ export default { }, color: { control: { - options: [ - 'danger', - 'dark', - 'primary', - 'secondary', - 'success', - 'tertiary', - 'warning', - ], + options: ['danger', 'dark', 'primary', 'secondary', 'success', 'tertiary', 'warning'], type: 'select', }, description: 'The color of the badge', @@ -68,16 +60,9 @@ export default { }; // TODO - Figure how to work with slots. -export const Default = ({ ariaLabel, color, size, type }) => - html` - - Default - - `; +export const Default = ({ ariaLabel, color, size, type }) => html` + Default +`; Default.args = { ariaLabel: '', color: 'primary', @@ -85,16 +70,9 @@ Default.args = { type: 'default', }; -export const Counter = ({ ariaLabel, color, size, type }) => - html` - - 12 - - `; +export const Counter = ({ ariaLabel, color, size, type }) => html` + 12 +`; Counter.args = { ariaLabel: '', color: 'primary', @@ -102,14 +80,7 @@ Counter.args = { type: 'counter', }; -export const Text = ({ ariaLabel, color, size, type }) => - html` - - Text - - `; +export const Text = ({ ariaLabel, color, size, type }) => html` + Text +`; Text.args = { ariaLabel: '', color: 'primary', size: 'medium', type: 'text' }; From f7695a82a31aaf06f869c29455e1dc240f83fbcd Mon Sep 17 00:00:00 2001 From: ElishaSamPeterPrabhu <122255626+ElishaSamPeterPrabhu@users.noreply.github.com> Date: Mon, 24 Jun 2024 19:38:48 +0530 Subject: [PATCH 08/24] BreadCrumb: Add handling of event "crumbClick" (#2638) --- .../components/modus-breadcrumb/modus-breadcrumb.stories.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/stencil-workspace/storybook/stories/components/modus-breadcrumb/modus-breadcrumb.stories.tsx b/stencil-workspace/storybook/stories/components/modus-breadcrumb/modus-breadcrumb.stories.tsx index a5d958b87..68fc565f9 100644 --- a/stencil-workspace/storybook/stories/components/modus-breadcrumb/modus-breadcrumb.stories.tsx +++ b/stencil-workspace/storybook/stories/components/modus-breadcrumb/modus-breadcrumb.stories.tsx @@ -19,6 +19,11 @@ export default { inlineStories: false, page: docs, }, + actions: { + handles: [ + 'crumbClick', + ], + }, controls: { disabled: false, expanded: true, From ec327ae2f6d0402fe68487a4ef3eb97b61661607 Mon Sep 17 00:00:00 2001 From: ElishaSamPeterPrabhu <122255626+ElishaSamPeterPrabhu@users.noreply.github.com> Date: Tue, 25 Jun 2024 14:18:50 +0530 Subject: [PATCH 09/24] AutoComplete: Cleanup StoryBook examples (#2641) --- .../modus-autocomplete-storybook-docs.mdx | 137 +++++++++++++----- .../modus-autocomplete.stories.tsx | 9 +- 2 files changed, 105 insertions(+), 41 deletions(-) diff --git a/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete-storybook-docs.mdx index a984bf180..42cf01bc9 100644 --- a/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete-storybook-docs.mdx +++ b/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete-storybook-docs.mdx @@ -24,9 +24,9 @@ from a set of choices. When the user enters text into the input field, a list of -### With Chip +### Multiple Selection - + ### With Custom Option @@ -40,32 +40,91 @@ from a set of choices. When the user enters text into the input field, a list of - - + + -
  • -
    The Git Guru
    -
    Lead DevOps Engineer
    -
    • -
  • -
    Bob the Builder
    -
    Senior Construction Engineer
    -
    • +
  • +
    The Git Guru
    +
    Lead DevOps Engineer
    +
    • +
  • +
    Bob the Builder
    +
    Senior Construction Engineer
    +
    • ``` @@ -86,6 +145,7 @@ The `optionSelected` event emits the `id` of the selected `ModusAutocompleteOpti To pass custom markup as an option for the Autocomplete component, you must add the option as a child slot to the `` element. The `
  • ` element passed as the slot must contain two data properties: + - `data-search-value`: This is the value that will be used to filter the option while the user types into the search input. - `data-id`: This is the value that will be emitted when the option is clicked on. @@ -100,28 +160,29 @@ interface ModusAutocompleteOption { ### Properties -| Property | Attribute | Description | Type | Default | -| --------------------------- | ------------------------------- | ------------------------------------------------- | --------------------------------------- | --------------------------------------------- | -| `ariaLabel` | `aria-label` | The autocomplete's aria label. | `string` | `undefined` | -| `clearable` | `clearable` | Whether the input has a clear button. | `boolean` | `false` | -| `disabled` | `disabled` | Whether the input is disabled. | `boolean` | `undefined` | -| `dropdownMaxHeight` | `dropdown-max-height` | The autocomplete's dropdown's max height. | `string` | `'300px'` | -| `dropdownZIndex` | `dropdown-z-index` | The autocomplete's dropdown z-index. | `string` | `'1'` | -| `disableCloseOnSelect` | `disable-close-on-select` | Whether the autocomplete's options always display on select. | `boolean` | `false` | -| `errorText` | `error-text` | The autocomplete's error text. | `string` | `undefined` | -| `includeSearchIcon` | `include-search-icon` | Whether the search icon is included. | `boolean` | `true` | -| `label` | `label` | The autocomplete's label. | `string` | `undefined` | -| `multiple` | `multiple` | When enabled, multiple options can be selected in the component. And selected options are shown as chips in the input. | `boolean` | `false` | -| `noResultsFoundSubtext` | `no-results-found-subtext` | The autocomplete's no results sub-text. | `string` | `'Check spelling or try a different keyword'` | -| `noResultsFoundText` | `no-results-found-text` | The autocomplete's no results text. | `string` | `'No results found'` | -| `options` | -- | The autocomplete's options. | `ModusAutocompleteOption[] | string[]` | `undefined` | -| `placeholder` | `placeholder` | The autocomplete's input placeholder. | `string` | `undefined` | -| `readOnly` | `read-only` | Whether the autocomplete is read-only. | `boolean` | `undefined` | -| `required` | `required` | Whether the autocomplete is required. | `boolean` | `undefined` | -| `showNoResultsFoundMessage` | `show-no-results-found-message` | Whether to show the no results found message. | `boolean` | `true` | -| `showOptionsOnFocus` | `show-options-on-focus` | Whether to show autocomplete's options when focus | `boolean` | `false` | -| `size` | `size` | The autocomplete's size. | `"large" | "medium"` | `'medium'` | -| `value` | `value` | The autocomplete's search value. | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| --------------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | -------------------------- | --------------------------------------------- | ----------- | +| `ariaLabel` | `aria-label` | The autocomplete's aria label. | `string` | `undefined` | +| `clearable` | `clearable` | Whether the input has a clear button. | `boolean` | `false` | +| `disabled` | `disabled` | Whether the input is disabled. | `boolean` | `undefined` | +| `dropdownMaxHeight` | `dropdown-max-height` | The autocomplete's dropdown's max height. | `string` | `'300px'` | +| `dropdownZIndex` | `dropdown-z-index` | The autocomplete's dropdown z-index. | `string` | `'1'` | +| `disableCloseOnSelect` | `disable-close-on-select` | Whether the autocomplete's options always display on select. | `boolean` | `false` | +| `errorText` | `error-text` | The autocomplete's error text. | `string` | `undefined` | +| `includeSearchIcon` | `include-search-icon` | Whether the search icon is included. | `boolean` | `true` | +| `label` | `label` | The autocomplete's label. | `string` | `undefined` | +| `multiple` | `multiple` | When enabled, multiple options can be selected in the component. And selected options are shown as chips in the input. | `boolean` | `false` | +| `noResultsFoundSubtext` | `no-results-found-subtext` | The autocomplete's no results sub-text. | `string` | `'Check spelling or try a different keyword'` | +| `noResultsFoundText` | `no-results-found-text` | The autocomplete's no results text. | `string` | `'No results found'` | +| `options` | -- | The autocomplete's options. | `ModusAutocompleteOption[] | string[]` | `undefined` | +| `placeholder` | `placeholder` | The autocomplete's input placeholder. | `string` | `undefined` | +| `readOnly` | `read-only` | Whether the autocomplete is read-only. | `boolean` | `undefined` | +| `required` | `required` | Whether the autocomplete is required. | `boolean` | `undefined` | +| `showNoResultsFoundMessage` | `show-no-results-found-message` | Whether to show the no results found message. | `boolean` | `true` | +| `showOptionsOnFocus` | `show-options-on-focus` | Whether to show autocomplete's options when focus | `boolean` | `false` | +| `size` | `size` | The autocomplete's size. | `"large" | "medium"` | `'medium'` | +| `value` | `value` | The autocomplete's search value. | `string` | `undefined` | + ### Events | Event | Description | Type | diff --git a/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete.stories.tsx b/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete.stories.tsx index b0a988156..8bcc137f4 100644 --- a/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete.stories.tsx +++ b/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete.stories.tsx @@ -216,7 +216,10 @@ const Template = ({
    • `; -const defaultOptions = ['Apple', 'Banana', 'Orange']; +const defaultOptions = [ + 'Apple', 'Banana', 'Orange', 'Mango', 'Pineapple', 'Grapes', 'Watermelon', 'Strawberry', 'Blueberry', 'Raspberry', + 'Blackberry', 'Cherry', 'Peach', 'Pear', 'Plum', 'Kiwi', 'Lemon', 'Lime', 'Papaya', 'Passion Fruit' +]; const defaultArgs = { ariaLabel: 'autocomplete', @@ -247,8 +250,8 @@ Default.args = defaultArgs; export const WithOption = Template.bind({}); WithOption.args = { ...defaultArgs, label: 'Autocomplete using option model' }; -export const WithChips = Template.bind({}); -WithChips.args = { ...defaultArgs, label: 'Autocomplete using chips', multiple: true }; +export const MultipleSelection = Template.bind({}); +MultipleSelection.args = { ...defaultArgs, label: 'Autocomplete with multiple selection', multiple: true }; export const WithCustomOption = ({ ariaLabel, From 430b0eb927c8aa00e52336ace21f0fc46e01003b Mon Sep 17 00:00:00 2001 From: prashanthr6383 <168108000+prashanthr6383@users.noreply.github.com> Date: Wed, 26 Jun 2024 17:30:04 +0530 Subject: [PATCH 10/24] AutoComplete: size property update for storybook (#2643) * 2200 - auto complete size property storybook update * Revert "2200 - auto complete size property storybook update" This reverts commit 1a5ee879134addd205ef0f00add2d4b7b90d9850. * 2200 - autocomplete size property and merge conflicts fix --- .../modus-autocomplete/modus-autocomplete-storybook-docs.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete-storybook-docs.mdx index 42cf01bc9..e2489d437 100644 --- a/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete-storybook-docs.mdx +++ b/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete-storybook-docs.mdx @@ -180,7 +180,7 @@ interface ModusAutocompleteOption { | `required` | `required` | Whether the autocomplete is required. | `boolean` | `undefined` | | `showNoResultsFoundMessage` | `show-no-results-found-message` | Whether to show the no results found message. | `boolean` | `true` | | `showOptionsOnFocus` | `show-options-on-focus` | Whether to show autocomplete's options when focus | `boolean` | `false` | -| `size` | `size` | The autocomplete's size. | `"large" | "medium"` | `'medium'` | +| `size` | `size` | The autocomplete's size. | `"large" \| "medium"` | `'medium'` | | `value` | `value` | The autocomplete's search value. | `string` | `undefined` | ### Events From 7bf0a431d198a4978612d94df3719646a5058b19 Mon Sep 17 00:00:00 2001 From: Sanket8793 <98008242+Sanket8793@users.noreply.github.com> Date: Wed, 26 Jun 2024 19:51:27 +0530 Subject: [PATCH 11/24] Text Input: Show the error icon before the error text in Modus Text Input (#2640) Show the error icon before the error text in Modus Text Input --- stencil-workspace/src/components.d.ts | 8 ++++++++ .../components/modus-text-input/modus-text-input.scss | 5 +++++ .../components/modus-text-input/modus-text-input.tsx | 9 ++++++++- .../modus-text-input-storybook-docs.mdx | 1 + .../modus-text-input/modus-text-input.stories.tsx | 11 +++++++++++ 5 files changed, 33 insertions(+), 1 deletion(-) diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts index 7f208d8e1..800b71f70 100644 --- a/stencil-workspace/src/components.d.ts +++ b/stencil-workspace/src/components.d.ts @@ -1423,6 +1423,10 @@ export namespace Components { * (optional) The input's helper text displayed below the input. */ "helperText": string; + /** + * (optional) Whether the error icon is included. + */ + "includeErrorIcon": boolean; /** * (optional) Whether the password text toggle icon is included. */ @@ -4438,6 +4442,10 @@ declare namespace LocalJSX { * (optional) The input's helper text displayed below the input. */ "helperText"?: string; + /** + * (optional) Whether the error icon is included. + */ + "includeErrorIcon"?: boolean; /** * (optional) Whether the password text toggle icon is included. */ diff --git a/stencil-workspace/src/components/modus-text-input/modus-text-input.scss b/stencil-workspace/src/components/modus-text-input/modus-text-input.scss index 08a4ae500..2178885d7 100644 --- a/stencil-workspace/src/components/modus-text-input/modus-text-input.scss +++ b/stencil-workspace/src/components/modus-text-input/modus-text-input.scss @@ -147,6 +147,11 @@ &.error { color: $modus-input-validation-error-color; + display: inline-flex; + + svg { + margin-right: 0.25rem; + } } &.valid { 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 bc02293ef..c06631569 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 @@ -5,6 +5,7 @@ import { IconClose } from '../../icons/svgs/icon-close'; import { IconVisibilityOff } from '../../icons/svgs/icon-visibility-off'; import { generateElementId } from '../../utils/utils'; import { IconVisibilityOn } from '../../icons/generated-icons/IconVisibilityOn'; +import { IconError } from '../../icons/svgs/icon-error'; @Component({ tag: 'modus-text-input', @@ -42,6 +43,9 @@ export class ModusTextInput { /** (optional) The input's helper text displayed below the input. */ @Prop() helperText: string; + /** (optional) Whether the error icon is included. */ + @Prop() includeErrorIcon: boolean; + /** (optional) Whether the search icon is included. */ @Prop() includeSearchIcon: boolean; @@ -259,7 +263,10 @@ export class ModusTextInput { )}
    {this.errorText ? ( - + ) : this.validText ? ( ) : null} diff --git a/stencil-workspace/storybook/stories/components/modus-text-input/modus-text-input-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-text-input/modus-text-input-storybook-docs.mdx index 704c58e17..2a16271e3 100644 --- a/stencil-workspace/storybook/stories/components/modus-text-input/modus-text-input-storybook-docs.mdx +++ b/stencil-workspace/storybook/stories/components/modus-text-input/modus-text-input-storybook-docs.mdx @@ -82,6 +82,7 @@ This component is compatible with Angular reactive forms. This can be achieved t | `enterkeyhint` | `enterkeyhint` | (optional) Which action label to present for the enter key on virtual keyboards. | `"enter", "done", "go", "next", "previous", "search", "send"` | `undefined` | | `errorText` | `error-text` | (optional) The input's error state text. | `string` | `undefined` | | `helperText` | `helper-text` | (optional) The input's helper text displayed below the input. | `string` | `undefined` | +| `includeErrorIcon` | `include-error-icon` | (optional) Whether the error icon is included. | `boolean` | `undefined` | | `includePasswordTextToggle` | `include-password-text-toggle` | (optional) Whether the password text toggle icon is included. | `boolean` | `true` | | `includeSearchIcon` | `include-search-icon` | (optional) Whether the search icon is included. | `boolean` | `undefined` | | `inputmode` | `inputmode` | (optional) The input's inputmode. | `"decimal", "email", "numeric", "search", "tel", "text", "url"` | `undefined` | diff --git a/stencil-workspace/storybook/stories/components/modus-text-input/modus-text-input.stories.tsx b/stencil-workspace/storybook/stories/components/modus-text-input/modus-text-input.stories.tsx index 542044a89..55f6fea17 100644 --- a/stencil-workspace/storybook/stories/components/modus-text-input/modus-text-input.stories.tsx +++ b/stencil-workspace/storybook/stories/components/modus-text-input/modus-text-input.stories.tsx @@ -104,6 +104,14 @@ export default { type: { summary: 'string' }, }, }, + includeErrorIcon: { + name: 'include-error-icon', + description: 'Whether to include the error icon', + table: { + defaultValue: { summary: false }, + type: { summary: 'boolean' }, + }, + }, includePasswordTextToggle: { name: 'include-password-text-toggle', description: 'Whether the password text toggle icon is included', @@ -277,6 +285,7 @@ const Template = ({ enterkeyhint, errorText, helperText, + includeErrorIcon, includePasswordTextToggle, includeSearchIcon, inputmode, @@ -306,6 +315,7 @@ const Template = ({ enterkeyhint=${enterkeyhint} error-text=${errorText} helper-text=${helperText} + include-error-icon=${includeErrorIcon} include-password-text-toggle=${includePasswordTextToggle} include-search-icon=${includeSearchIcon} inputmode=${inputmode} @@ -337,6 +347,7 @@ Default.args = { enterkeyhint: undefined, errorText: '', helperText: '', + includeErrorIcon: false, includePasswordTextToggle: true, includeSearchIcon: false, inputmode: '', From 512e900f45496bdadbfb269d93f783f5d90d3333 Mon Sep 17 00:00:00 2001 From: ElishaSamPeterPrabhu <122255626+ElishaSamPeterPrabhu@users.noreply.github.com> Date: Wed, 26 Jun 2024 20:03:38 +0530 Subject: [PATCH 12/24] Navbar: Add handling of event "profileMenuSignOutClick" (#2636) --- .../stories/components/modus-navbar/modus-navbar.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stencil-workspace/storybook/stories/components/modus-navbar/modus-navbar.stories.tsx b/stencil-workspace/storybook/stories/components/modus-navbar/modus-navbar.stories.tsx index dab63eeca..7e3dd3daf 100644 --- a/stencil-workspace/storybook/stories/components/modus-navbar/modus-navbar.stories.tsx +++ b/stencil-workspace/storybook/stories/components/modus-navbar/modus-navbar.stories.tsx @@ -82,7 +82,7 @@ export default { }, parameters: { actions: { - handles: ['searchMenuClick', 'buttonClick', 'productLogoClick', 'helpOpen'], + handles: ['searchMenuClick', 'buttonClick', 'productLogoClick', 'helpOpen', 'profileMenuSignOutClick'], }, controls: { expanded: true, sort: 'requiredFirst' }, docs: { From e2957f582369690b59466e103ba7c250f61e85b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20Sol=C3=A9?= <134067425+leosole-trimble@users.noreply.github.com> Date: Thu, 27 Jun 2024 00:23:06 -0300 Subject: [PATCH 13/24] Content Tree: Emit an event when items are reordered by a drag and drop (#2645) --- stencil-workspace/src/components.d.ts | 6 +- .../modus-content-tree.e2e.ts | 24 ++ .../modus-tree-view/modus-tree-view.tsx | 3 + .../modus-tree-view/readme.md | 7 +- .../modus-content-tree-storybook-docs.mdx | 274 +++++------------- .../modus-content-tree.stories.tsx | 186 +++--------- 6 files changed, 155 insertions(+), 345 deletions(-) diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts index 800b71f70..9f1bb5424 100644 --- a/stencil-workspace/src/components.d.ts +++ b/stencil-workspace/src/components.d.ts @@ -26,8 +26,8 @@ import { TableCellEdited, TableContext } from "./components/modus-table/models/t import { Tab } from "./components/modus-tabs/modus-tabs"; import { ModusTimePickerEventDetails } from "./components/modus-time-picker/modus-time-picker.models"; import { ModusToolTipPlacement } from "./components/modus-tooltip/modus-tooltip.models"; +import { TreeViewItemInfo, TreeViewItemOptions } from "./components/modus-content-tree/modus-content-tree.types"; import { ModusActionBarOptions as ModusActionBarOptions1 } from "./components/modus-action-bar/modus-action-bar"; -import { TreeViewItemOptions } from "./components/modus-content-tree/modus-content-tree.types"; export { ModusActionBarOptions } from "./components/modus-action-bar/modus-action-bar"; export { ModusAutocompleteOption } from "./components/modus-autocomplete/modus-autocomplete"; export { BadgeProperties } from "./components/modus-badge/modus-badge"; @@ -49,8 +49,8 @@ export { TableCellEdited, TableContext } from "./components/modus-table/models/t export { Tab } from "./components/modus-tabs/modus-tabs"; export { ModusTimePickerEventDetails } from "./components/modus-time-picker/modus-time-picker.models"; export { ModusToolTipPlacement } from "./components/modus-tooltip/modus-tooltip.models"; +export { TreeViewItemInfo, TreeViewItemOptions } from "./components/modus-content-tree/modus-content-tree.types"; export { ModusActionBarOptions as ModusActionBarOptions1 } from "./components/modus-action-bar/modus-action-bar"; -export { TreeViewItemOptions } from "./components/modus-content-tree/modus-content-tree.types"; export namespace Components { interface ModusAccordion { /** @@ -2757,6 +2757,7 @@ declare global { new (): HTMLModusTooltipElement; }; interface HTMLModusTreeViewElementEventMap { + "itemDrop": { [key: string]: TreeViewItemInfo }; "itemActionClick": any; } interface HTMLModusTreeViewElement extends Components.ModusTreeView, HTMLStencilElement { @@ -4774,6 +4775,7 @@ declare namespace LocalJSX { * Fired when an action is clicked within any tree item. Includes both the `actionId` and `nodeId` of the action and item, respectively. */ "onItemActionClick"?: (event: ModusTreeViewCustomEvent) => void; + "onItemDrop"?: (event: ModusTreeViewCustomEvent<{ [key: string]: TreeViewItemInfo }>) => void; /** * (optional) Set selected tree items */ diff --git a/stencil-workspace/src/components/modus-content-tree/modus-content-tree.e2e.ts b/stencil-workspace/src/components/modus-content-tree/modus-content-tree.e2e.ts index f3ce9a4a7..4500248e2 100644 --- a/stencil-workspace/src/components/modus-content-tree/modus-content-tree.e2e.ts +++ b/stencil-workspace/src/components/modus-content-tree/modus-content-tree.e2e.ts @@ -426,6 +426,30 @@ describe('modus-tree-view-item', () => { expect(checkboxClick).toHaveReceivedEvent(); }); + it('emits itemDrop event', async () => { + const page = await newE2EPage(); + + await page.setContent(` + + + + + `); + + const itemDropEvent = await page.spyOnEvent('itemDrop'); + const dragIcon = await page.find("modus-tree-view-item[node-id='1'] >>> .drag-icon"); + + expect(dragIcon).toBeTruthy(); + + await dragIcon.press('Enter'); + await dragIcon.press('ArrowDown'); + await dragIcon.press('Enter'); + + await page.waitForChanges(); + + expect(itemDropEvent).toHaveReceivedEvent(); + }); + it('should open action bar and select an option', async () => { const page = await newE2EPage(); await page.setContent(` diff --git a/stencil-workspace/src/components/modus-content-tree/modus-tree-view/modus-tree-view.tsx b/stencil-workspace/src/components/modus-content-tree/modus-tree-view/modus-tree-view.tsx index 0a8fbd256..d06c7cf90 100644 --- a/stencil-workspace/src/components/modus-content-tree/modus-tree-view/modus-tree-view.tsx +++ b/stencil-workspace/src/components/modus-content-tree/modus-tree-view/modus-tree-view.tsx @@ -52,6 +52,8 @@ export class ModusTreeView { @State() isDraggingWithKeyboard: boolean; + @Event() itemDrop: EventEmitter<{ [key: string]: TreeViewItemInfo }>; + private currentItem: TreeViewItemInfo; private focusItem: string; @@ -255,6 +257,7 @@ export class ModusTreeView { const insertElement = this.items[this.itemDragState.itemId].element as unknown as HTMLElement; insertAtParent.insertBefore(insertElement, insertBefore); + this.itemDrop.emit(this.items); } } diff --git a/stencil-workspace/src/components/modus-content-tree/modus-tree-view/readme.md b/stencil-workspace/src/components/modus-content-tree/modus-tree-view/readme.md index a1c0d2d07..83e366494 100644 --- a/stencil-workspace/src/components/modus-content-tree/modus-tree-view/readme.md +++ b/stencil-workspace/src/components/modus-content-tree/modus-tree-view/readme.md @@ -22,9 +22,10 @@ ## Events -| Event | Description | Type | -| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | -| `itemActionClick` | Fired when an action is clicked within any tree item. Includes both the `actionId` and `nodeId` of the action and item, respectively. | `CustomEvent` | +| Event | Description | Type | +| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | +| `itemActionClick` | Fired when an action is clicked within any tree item. Includes both the `actionId` and `nodeId` of the action and item, respectively. | `CustomEvent` | +| `itemDrop` | | `CustomEvent<{ [key: string]: TreeViewItemInfo; }>` | ---------------------------------------------- diff --git a/stencil-workspace/storybook/stories/components/modus-content-tree/modus-content-tree-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-content-tree/modus-content-tree-storybook-docs.mdx index 59f45238d..f85b3d424 100644 --- a/stencil-workspace/storybook/stories/components/modus-content-tree/modus-content-tree-storybook-docs.mdx +++ b/stencil-workspace/storybook/stories/components/modus-content-tree/modus-content-tree-storybook-docs.mdx @@ -33,45 +33,21 @@ It is located on the left side of the screen and cannot be combined with Side Na size="" class="hydrated"> - - - - + + + + - + - + - + - + ``` @@ -82,33 +58,14 @@ It is located on the left side of the screen and cannot be combined with Side Na ```html - + - - - - + + + + ``` @@ -129,45 +86,21 @@ It is located on the left side of the screen and cannot be combined with Side Na size="condensed" class="hydrated"> - - - - + + + + - + - + - + - + ``` @@ -187,45 +120,21 @@ It is located on the left side of the screen and cannot be combined with Side Na selected-items="false" size="condensed"> - - - - + + + + - + - + - + - + ``` @@ -245,45 +154,21 @@ It is located on the left side of the screen and cannot be combined with Side Na size="" class="hydrated"> - - - - + + + + - + - + - + - + ``` @@ -594,15 +479,8 @@ It is located on the left side of the screen and cannot be combined with Side Na ```html -
    - +
    +
    Inbox
    @@ -634,10 +512,7 @@ It is located on the left side of the screen and cannot be combined with Side Na let items = new Map(); container.querySelectorAll('modus-tree-view-item').forEach((element) => { - items.set( - element.nodeId, - element.querySelector("div[slot='label']").innerHTML - ); + items.set(element.nodeId, element.querySelector("div[slot='label']").innerHTML); }); root.expandedItems = Array.from(items.keys()); @@ -653,14 +528,11 @@ It is located on the left side of the screen and cannot be combined with Side Na }) .map(([key, value]) => key); const getParents = (e) => { - if (e.parentNode && e.parentNode.nodeId) - return [e.parentNode, ...getParents(e.parentNode)]; + if (e.parentNode && e.parentNode.nodeId) return [e.parentNode, ...getParents(e.parentNode)]; return []; }; items.forEach((value, key) => { - const element = container.querySelector( - "modus-tree-view-item[node-id='" + key + "']" - ); + const element = container.querySelector("modus-tree-view-item[node-id='" + key + "']"); element.expanded = true; if (searchResult.includes(key)) { element.querySelector("div[slot='label']").style.color = '#0063a3'; @@ -675,9 +547,7 @@ It is located on the left side of the screen and cannot be combined with Side Na }); } else { items.forEach((value, key) => { - const element = container.querySelector( - "modus-tree-view-item[node-id='" + key + "']" - ); + const element = container.querySelector("modus-tree-view-item[node-id='" + key + "']"); element.querySelector("div[slot='label']").style.color = ''; element.style.display = 'block'; element.expanded = false; @@ -727,38 +597,38 @@ Every item and the elements such as drag icon, expand & collapse icon and the ch ### Keyboard Navigation -| Key | Description | -| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Arrow Left | Collapses the item | -| Arrow Right | Expands the item | -| Arrow Up | Moves to the previous focusable item and focus moves to a child if the current or previous parent item is expanded | -| Arrow Down | Moves to the next focusable item and focus moves to a child if the current or next parent item is expanded | -| Ctrl + click | If `multi-selection` is true, it performs multiple selection on the clicked items | +| Key | Description | +| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Arrow Left | Collapses the item | +| Arrow Right | Expands the item | +| Arrow Up | Moves to the previous focusable item and focus moves to a child if the current or previous parent item is expanded | +| Arrow Down | Moves to the next focusable item and focus moves to a child if the current or next parent item is expanded | +| Ctrl + click | If `multi-selection` is true, it performs multiple selection on the clicked items | | Enter | Using Tab key if the focus is set on an item, pressing `Enter` key will select it and if the focus is on an element like checkbox, collapse/expand icon, pressing `Enter` key will perform operations only on that element | -| Shift + Arrow Up/Down | If `multi-selection` is true, it performs multiple selection starting from the item that is already selected | -| Shift + Arrow Right | Can be used to focus the checkbox inside a tree item if `disableTabbing` is true | -| Space | Expands/Collapses the item when it is in focus | +| Shift + Arrow Up/Down | If `multi-selection` is true, it performs multiple selection starting from the item that is already selected | +| Shift + Arrow Right | Can be used to focus the checkbox inside a tree item if `disableTabbing` is true | +| Space | Expands/Collapses the item when it is in focus | ### Properties ##### Modus Tree View -| Property | Attribute | Description | Type | Default | -| ------------------------ | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------------ | -| `borderless` | `borderless` | (optional) Whether the content tree and items have a border or not | `boolean` | `undefined` | -| `checkboxSelection` | `checkbox-selection` | (optional) Enables checkbox selection on each tree item | `boolean` | `undefined` | -| `checkedItems` | -- | (optional) Set checked tree items | `string[]` | `[]` | +| Property | Attribute | Description | Type | Default | +| ------------------------ | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------- | ------------ | +| `borderless` | `borderless` | (optional) Whether the content tree and items have a border or not | `boolean` | `undefined` | +| `checkboxSelection` | `checkbox-selection` | (optional) Enables checkbox selection on each tree item | `boolean` | `undefined` | +| `checkedItems` | -- | (optional) Set checked tree items | `string[]` | `[]` | | `disableTabbing` | `disable-tabbing` | (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. | `boolean` | `undefined` | -| `expandedItems` | -- | (optional) Set expanded tree items | `string[]` | `[]` | -| `multiCheckboxSelection` | `multi-checkbox-selection` | (optional) Enables multiple checkbox selection | `boolean` | `undefined` | -| `multiSelection` | `multi-selection` | (optional) Enables multiple tree items selection | `boolean` | `undefined` | -| `selectedItems` | -- | (optional) Set selected tree items | `string[]` | `[]` | -| `size` | `size` | (optional) The default size of all tree items | `"condensed" \| "large" \| "standard"` | `'standard'` | +| `expandedItems` | -- | (optional) Set expanded tree items | `string[]` | `[]` | +| `multiCheckboxSelection` | `multi-checkbox-selection` | (optional) Enables multiple checkbox selection | `boolean` | `undefined` | +| `multiSelection` | `multi-selection` | (optional) Enables multiple tree items selection | `boolean` | `undefined` | +| `selectedItems` | -- | (optional) Set selected tree items | `string[]` | `[]` | +| `size` | `size` | (optional) The default size of all tree items | `"condensed" \| "large" \| "standard"` | `'standard'` | ##### Modus Tree View Item | Property | Attribute | Description | Type | Default | -| --------------------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ----------- | +| --------------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ----------------------- | ----------- | | `actions` | `actions` | (optional) Actions that can be performed on each item. A maximum of 3 icons will be shown, including overflow menu and expand icons. | `ModusActionBarOptions` | `undefined` | | `disabled` | `disabled` | (optional) Disables the tree item | `boolean` | `undefined` | | `draggableItem` | `draggable-item` | (optional) Allows the item to be dragged across the tree | `boolean` | `undefined` | @@ -767,15 +637,16 @@ Every item and the elements such as drag icon, expand & collapse icon and the ch | `label` _(required)_ | `label` | (required) Label for the tree item | `string` | `undefined` | | `nodeId` _(required)_ | `node-id` | (required) Unique tree item identifier | `string` | `undefined` | | `tabIndexValue` | `tab-index-value` | (optional) Tab Index for the tree item | `number \| string` | `0` | -| `isLastChild | `is-last-child` | To be set true when the tree item is an expandable last child | `boolean` | false | +| `isLastChild | `is-last-child` | To be set true when the tree item is an expandable last child | `boolean` | false | ### DOM Events #### Modus Tree View | Name | Description | Emits | -| --------------- |-------------------------------------------------------------------------------------------------------------------------------------- |--------------------------------------- | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | | itemActionClick | Fired when an action is clicked within any tree item. Includes both the `actionId` and `nodeId` of the action and item, respectively. | `{ actionId: string, nodeId: string }` | +| itemDrop | Fired when an item is dropped in a different position. Includes the updated item's map. | `{ [key: string]: TreeViewItemInfo }` | ##### Modus Tree View Item @@ -796,13 +667,12 @@ Every item and the elements such as drag icon, expand & collapse icon and the ch | `focusCheckbox` | Focus the checkbox inside a tree item | | `Promise` | | `focusItem` | Focus the tree item | | `Promise` | - ### Types ```ts - type ModusActionBarOptions = { - id: string; - icon: string; - label: string - }; +type ModusActionBarOptions = { + id: string; + icon: string; + label: string; +}; ``` diff --git a/stencil-workspace/storybook/stories/components/modus-content-tree/modus-content-tree.stories.tsx b/stencil-workspace/storybook/stories/components/modus-content-tree/modus-content-tree.stories.tsx index eb937bed6..a2dede24a 100644 --- a/stencil-workspace/storybook/stories/components/modus-content-tree/modus-content-tree.stories.tsx +++ b/stencil-workspace/storybook/stories/components/modus-content-tree/modus-content-tree.stories.tsx @@ -47,13 +47,12 @@ export default { }, }, borderless: { - description: - 'Whether the content tree and items have a border or not. Default is `false`.', + description: 'Whether the content tree and items have a border or not. Default is `false`.', table: { type: { summary: 'boolean' }, }, }, - isLastChild:{ + isLastChild: { description: 'To be set true when the tree item is an expandable last child', table: { type: { summary: 'boolean' }, @@ -65,7 +64,13 @@ export default { page: docs, }, actions: { - handles: ['itemActionClick modus-tree-view', 'actionClick modus-tree-view-item', 'itemClick modus-tree-view-item','itemLabelChange modus-tree-view-item'], + handles: [ + 'itemActionClick modus-tree-view', + 'actionClick modus-tree-view-item', + 'itemClick modus-tree-view-item', + 'itemLabelChange modus-tree-view-item', + 'itemDrop modus-tree-view', + ], }, controls: { expanded: true, sort: 'requiredFirst' }, options: { @@ -75,14 +80,7 @@ export default { }, }; -const Template = ({ - borderless, - checkboxSelection, - multiCheckboxSelection, - multiSelection, - disableTabbing, - size, -}) => html` +const Template = ({ borderless, checkboxSelection, multiCheckboxSelection, multiSelection, disableTabbing, size }) => html` - +     @@ -121,21 +117,16 @@ const SlotIconTemplate = ({ size, isLastChild, }) => html` - + - + @@ -158,8 +149,7 @@ Default.args = { }; export const WithIcon = SlotIconTemplate.bind({}); -WithIcon.args = {...Default.args, -}; +WithIcon.args = { ...Default.args }; // export const Borderless = Template.bind({}); @@ -170,11 +160,7 @@ export const Borderless = Template.bind({}); Borderless.args = { ...Default.args, borderless: true }; export const MultiSelection = Template.bind({}); -MultiSelection.args = {...Default.args, - multiSelection: true, - checkboxSelection: true, - multiCheckboxSelection: true, -}; +MultiSelection.args = { ...Default.args, multiSelection: true, checkboxSelection: true, multiCheckboxSelection: true }; const ActionBarTemplate = ({ borderless, @@ -185,24 +171,10 @@ const ActionBarTemplate = ({ size, isLastChild, }) => html` -
    -
    - - +
    +
    + + @@ -215,68 +187,29 @@ const ActionBarTemplate = ({ color="primary" disabled id="remove"> - + - + - - + + - - + + - - + + @@ -290,11 +223,7 @@ const ActionBarTemplate = ({ color="primary" disabled id="expand"> - +
    +
    { }; export const CustomFilter = FilterTemplate.bind({}); -CustomFilter.args = {...Default.args, -}; +CustomFilter.args = { ...Default.args }; const WithItemActionBarTemplate = ({ borderless, @@ -634,8 +546,7 @@ const WithItemActionBarTemplate = ({ size, rowActions, }) => html` -
    +
    + size=${size}>
    @@ -659,6 +569,6 @@ WithActionBar.args = { { id: 'export', icon: 'export', label: 'Export' }, { id: 'history', icon: 'history', label: 'History' }, { id: 'edit', icon: 'pencil', label: 'Edit' }, - { id: 'delete', icon: 'delete', label: 'Delete' } - ] + { id: 'delete', icon: 'delete', label: 'Delete' }, + ], }; From 9390f480da6d1f2e5c75703e1d41eb0205d58309 Mon Sep 17 00:00:00 2001 From: Gabriel Piltzer <83187108+gabriel-piltzer-trimble@users.noreply.github.com> Date: Wed, 26 Jun 2024 20:24:41 -0700 Subject: [PATCH 14/24] Navbar: Add dropdown option (#2629) * feat: add dropdown to the modus navbar * chore: add storybook demo * chore: move storybook to new demo --- stencil-workspace/src/components.d.ts | 17 +- .../dropdown/modus-navbar-dropdown.tsx | 45 ++++ .../modus-navbar/modus-navbar.models.ts | 11 + .../components/modus-navbar/modus-navbar.scss | 4 + .../components/modus-navbar/modus-navbar.tsx | 36 +++- .../modus-navbar-storybook-docs.mdx | 112 +++++++--- .../modus-navbar/modus-navbar.stories.tsx | 192 ++++++++++++++---- 7 files changed, 348 insertions(+), 69 deletions(-) create mode 100644 stencil-workspace/src/components/modus-navbar/dropdown/modus-navbar-dropdown.tsx diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts index 9f1bb5424..8efb428f3 100644 --- a/stencil-workspace/src/components.d.ts +++ b/stencil-workspace/src/components.d.ts @@ -15,7 +15,7 @@ import { ModusDataTableCellLink, ModusDataTableDisplayOptions, ModusDataTableRow import { ModusDateInputEventDetails, ModusDateInputType } from "./components/modus-date-input/utils/modus-date-input.models"; import { ModusIconName } from "./icons/ModusIconUtilities"; import { ModusNavbarApp } from "./components/modus-navbar/apps-menu/modus-navbar-apps-menu"; -import { ModusNavbarButton, ModusNavbarLogoOptions, ModusNavbarProfileMenuLink, ModusNavbarTooltip, ModusProfileMenuOptions } from "./components/modus-navbar/modus-navbar.models"; +import { ModusNavbarButton, ModusNavbarDropdownItem, ModusNavbarDropdownOptions, ModusNavbarLogoOptions, ModusNavbarProfileMenuLink, ModusNavbarTooltip, ModusProfileMenuOptions } from "./components/modus-navbar/modus-navbar.models"; import { ModusNavbarApp as ModusNavbarApp1 } from "./components/modus-navbar/apps-menu/modus-navbar-apps-menu"; import { RadioButton } from "./components/modus-radio-group/modus-radio-button"; import { ModusSentimentScaleType } from "./components/modus-sentiment-scale/modus-sentiment-scale.models"; @@ -38,7 +38,7 @@ export { ModusDataTableCellLink, ModusDataTableDisplayOptions, ModusDataTableRow export { ModusDateInputEventDetails, ModusDateInputType } from "./components/modus-date-input/utils/modus-date-input.models"; export { ModusIconName } from "./icons/ModusIconUtilities"; export { ModusNavbarApp } from "./components/modus-navbar/apps-menu/modus-navbar-apps-menu"; -export { ModusNavbarButton, ModusNavbarLogoOptions, ModusNavbarProfileMenuLink, ModusNavbarTooltip, ModusProfileMenuOptions } from "./components/modus-navbar/modus-navbar.models"; +export { ModusNavbarButton, ModusNavbarDropdownItem, ModusNavbarDropdownOptions, ModusNavbarLogoOptions, ModusNavbarProfileMenuLink, ModusNavbarTooltip, ModusProfileMenuOptions } from "./components/modus-navbar/modus-navbar.models"; export { ModusNavbarApp as ModusNavbarApp1 } from "./components/modus-navbar/apps-menu/modus-navbar-apps-menu"; export { RadioButton } from "./components/modus-radio-group/modus-radio-button"; export { ModusSentimentScaleType } from "./components/modus-sentiment-scale/modus-sentiment-scale.models"; @@ -779,6 +779,10 @@ export namespace Components { * (optional) The buttons to render in the Navbar. */ "buttons": ModusNavbarButton[]; + /** + * (optional) Dropdown options. + */ + "dropdownOptions": ModusNavbarDropdownOptions; /** * (optional) Whether to show search overlay or not. */ @@ -2300,6 +2304,7 @@ declare global { "appsMenuAppOpen": ModusNavbarApp; "buttonClick": string; "helpOpen": void; + "dropdownItemSelect": ModusNavbarDropdownItem; "mainMenuClick": KeyboardEvent | MouseEvent; "notificationsMenuOpen": void; "productLogoClick": MouseEvent; @@ -3685,6 +3690,10 @@ declare namespace LocalJSX { * (optional) The buttons to render in the Navbar. */ "buttons"?: ModusNavbarButton[]; + /** + * (optional) Dropdown options. + */ + "dropdownOptions"?: ModusNavbarDropdownOptions; /** * (optional) Whether to show search overlay or not. */ @@ -3721,6 +3730,10 @@ declare namespace LocalJSX { * An event that fires when a button in the custom button list is clicked. */ "onButtonClick"?: (event: ModusNavbarCustomEvent) => void; + /** + * An event that fires when a dropdown option is selected * + */ + "onDropdownItemSelect"?: (event: ModusNavbarCustomEvent) => void; /** * An event that fires when the help link opens. */ diff --git a/stencil-workspace/src/components/modus-navbar/dropdown/modus-navbar-dropdown.tsx b/stencil-workspace/src/components/modus-navbar/dropdown/modus-navbar-dropdown.tsx new file mode 100644 index 000000000..42f453851 --- /dev/null +++ b/stencil-workspace/src/components/modus-navbar/dropdown/modus-navbar-dropdown.tsx @@ -0,0 +1,45 @@ +import { + h, // eslint-disable-line @typescript-eslint/no-unused-vars + FunctionalComponent, +} from '@stencil/core'; +import { ModusNavbarDropdownItem, ModusNavbarDropdownOptions } from '../modus-navbar.models'; + +interface Props { + itemSelect: (item: ModusNavbarDropdownItem) => void; + options: ModusNavbarDropdownOptions; + reverse: boolean; + selectedItem: ModusNavbarDropdownItem; +} + +export const ModusNavbarDropdown: FunctionalComponent = ({ itemSelect, options, reverse, selectedItem }) => { + const direction = reverse ? 'rtl' : 'ltr'; + const toggleElementId = 'navbar-dropdown'; + + const itemSelectHandler = (item: ModusNavbarDropdownItem) => { + itemSelect(item); + }; + + return ( + + + {selectedItem.text} + + + {options.items.map((item) => ( + itemSelectHandler(item)} + selected={item.value !== '' && item.value === selectedItem.value}> + {item.text} + + ))} + + + ); +}; diff --git a/stencil-workspace/src/components/modus-navbar/modus-navbar.models.ts b/stencil-workspace/src/components/modus-navbar/modus-navbar.models.ts index 9f289ca98..a9d50220e 100644 --- a/stencil-workspace/src/components/modus-navbar/modus-navbar.models.ts +++ b/stencil-workspace/src/components/modus-navbar/modus-navbar.models.ts @@ -33,3 +33,14 @@ export interface ModusNavbarButton { hideMenu?: boolean; tooltip?: ModusNavbarTooltip; } + +export interface ModusNavbarDropdownItem { + text: string; + value: string; +} + +export interface ModusNavbarDropdownOptions { + ariaLabel: string; + defaultValue: string; + items: ModusNavbarDropdownItem[]; +} diff --git a/stencil-workspace/src/components/modus-navbar/modus-navbar.scss b/stencil-workspace/src/components/modus-navbar/modus-navbar.scss index ccd265c03..5eff9f676 100644 --- a/stencil-workspace/src/components/modus-navbar/modus-navbar.scss +++ b/stencil-workspace/src/components/modus-navbar/modus-navbar.scss @@ -79,6 +79,10 @@ nav { display: flex; } + .navbar-logo { + padding-inline-end: 0.5rem; + } + .right, .left { align-items: center; diff --git a/stencil-workspace/src/components/modus-navbar/modus-navbar.tsx b/stencil-workspace/src/components/modus-navbar/modus-navbar.tsx index 94aa99cd4..c2f3180e8 100644 --- a/stencil-workspace/src/components/modus-navbar/modus-navbar.tsx +++ b/stencil-workspace/src/components/modus-navbar/modus-navbar.tsx @@ -19,6 +19,8 @@ import { ModusNavbarApp } from './apps-menu/modus-navbar-apps-menu'; import { IconHelp } from '../../icons/svgs/icon-help'; import { ModusNavbarButton, + ModusNavbarDropdownItem, + ModusNavbarDropdownOptions, ModusNavbarLogoOptions, ModusNavbarTooltip, ModusProfileMenuOptions, @@ -26,6 +28,7 @@ import { import { ModusNavbarProductLogo } from './product-logo/modus-navbar-product-logo'; import { createGuid } from '../../utils/utils'; import { ModusNavbarButtonList } from './button-list/modus-navbar-button-list'; +import { ModusNavbarDropdown } from './dropdown/modus-navbar-dropdown'; /** * @slot main - Renders custom main menu content @@ -55,6 +58,9 @@ export class ModusNavbar { /** (optional) Set the primary logo to display when the screen size is greater than 576 pixels, and the secondary logo to display when the screen size is less than or equal to 576 pixels. */ @Prop() logoOptions: ModusNavbarLogoOptions; + /** (optional) Dropdown options. */ + @Prop() dropdownOptions: ModusNavbarDropdownOptions; + /** (required) Profile menu options. */ @Prop({ mutable: true }) profileMenuOptions: ModusProfileMenuOptions; @@ -112,6 +118,9 @@ export class ModusNavbar { /** An event that fires when the help link opens. */ @Event() helpOpen: EventEmitter; + /** An event that fires when a dropdown item is selected **/ + @Event() dropdownItemSelect: EventEmitter; + /** An event that fires on main menu click. */ @Event() mainMenuClick: EventEmitter; @@ -149,6 +158,7 @@ export class ModusNavbar { @State() componentId = createGuid(); @State() searchOverlayVisible: boolean; @State() openButtonMenuId: string; + @State() selectedDropdownItem: ModusNavbarDropdownItem; readonly SLOT_MAIN = 'main'; readonly SLOT_NOTIFICATIONS = 'notifications'; @@ -177,6 +187,12 @@ export class ModusNavbar { this.profileMenuSignOutClick.emit(event); } + componentWillLoad(): void { + this.selectedDropdownItem = this.dropdownOptions?.items.find( + (item) => item.value === this.dropdownOptions.defaultValue + ) ?? { text: '', value: '' }; + } + componentDidRender(): void { // If there is an error loading the avatar image, remove it so that the initials show. this.profileAvatarElement?.addEventListener('error', () => { @@ -366,6 +382,11 @@ export class ModusNavbar { } } + dropdownItemSelectHandler(item: ModusNavbarDropdownItem): void { + this.selectedDropdownItem = item; + this.dropdownItemSelect.emit(item); + } + getNotificationCount(): string { if (!this.notificationCount) { return; @@ -426,7 +447,20 @@ export class ModusNavbar { )} {this.logoOptions && ( - this.productLogoClick.emit(event)} /> + + )} + {this.dropdownOptions && ( + this.dropdownItemSelectHandler(item)} + options={this.dropdownOptions} + reverse={this.reverse} + selectedItem={this.selectedDropdownItem} + /> )}
    diff --git a/stencil-workspace/storybook/stories/components/modus-navbar/modus-navbar-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-navbar/modus-navbar-storybook-docs.mdx index ed672176d..7ea79c173 100644 --- a/stencil-workspace/storybook/stories/components/modus-navbar/modus-navbar-storybook-docs.mdx +++ b/stencil-workspace/storybook/stories/components/modus-navbar/modus-navbar-storybook-docs.mdx @@ -52,6 +52,15 @@ This component utilizes the slot element, allowing you to render your own HTML i }, secondary: { url: 'https://modus.trimble.com/favicon.svg', height: 24 }, }; + element.dropdownOptions = { + ariaLabel: 'Project dropdown', + defaultValue: '2', + items: [ + { text: 'Project 1', value: '1' }, + { text: 'Project 2', value: '2' }, + { text: 'Project 3', value: '3' }, + ], + }; element.profileMenuOptions = { avatarUrl: '...', email: 'modus_user@trimble.com', @@ -71,10 +80,6 @@ This component utilizes the slot element, allowing you to render your own HTML i } ] }; - element.buttons = [ - { id:'addMenu', icon: 'add' }, - { id: 'notificationMenu', icon: 'notifications' } - ]; ``` @@ -120,6 +125,59 @@ This component utilizes the slot element, allowing you to render your own HTML i ``` +### Navbar with Optional Features + +Add optional features to the navbar. + + + +```html + +
    Render your own main menu.
    +
    Render your own notifications.
    +     + + +``` + ### Blue Navbar Use the `variant` prop to choose a blue background navbar. @@ -219,28 +277,29 @@ interface ModusNavbarButton { ### Properties -| Property | Attribute | Description | Type | Default | -| ---------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | ----------- | -| `apps` | -- | (optional) The apps to render in the apps menu. | `ModusNavbarApp[]` | `undefined` | -| `navAriaLabel` | `nav-aria-label` | (optional) The navbar's aria-label. | `string` | `undefined` | -| `buttons` | -- | (optional) The buttons to render in the Navbar. | `ModusNavbarButton[]` | `undefined` | -| `notificationCount` | `notification-count` | (optional) To add the counter value to the notification icon. | `number` | `undefined` | -| `enableSearchOverlay` | `enable-search-overlay` | (optional) Whether to show search overlay or not. | `boolean` | `undefined` | -| `helpTooltip` | -- | (optional) Help tooltip. | `ModusNavbarTooltip` | `undefined` | -| `helpUrl` | `help-url` | (optional) Help URL. | `string` | `undefined` | -| `logoOptions` | -- | (optional) Set the primary logo to display when the screen size is greater than 576 pixels, and the secondary logo to display when the screen size is less than or equal to 576 pixels. | `ModusNavbarLogoOptions` | `undefined` | -| `profileMenuOptions` | -- | (required) Profile menu options. | `ModusProfileMenuOptions` | `undefined` | -| `reverse` | `reverse` | (optional) Whether to display the navbar items in reverse order. | `boolean` | `undefined` | -| `searchTooltip` | -- | (optional) Search tooltip. | `ModusNavbarTooltip` | `undefined` | -| `showAppsMenu` | `show-apps-menu` | (optional) Whether to show the apps menu. | `boolean` | `undefined` | -| `showHelp` | `show-help` | (optional) Whether to show help. | `boolean` | `undefined` | -| `showMainMenu` | `show-main-menu` | (optional) Whether to show the main menu. | `boolean` | `undefined` | -| `showNotifications` | `show-notifications` | (optional) Whether to show notifications. | `boolean` | `undefined` | -| `showPendoPlaceholder` | `show-pendo-placeholder` | (optional) Whether to show the placeholder for Pendo. | `boolean` | `undefined` | -| `showProfile` | `show-profile` | (optional) Whether to show the profile. | `boolean` | `true` | -| `showSearch` | `show-search` | (optional) Whether to show search. | `boolean` | `undefined` | -| `showShadow` | `show-shadow` | (optional) Whether to show a shadow under the navbar. | `boolean` | `undefined` | -| `variant` | `variant` | (optional) Color variants for NavBar. | `"blue" \| "default"` | `'default'` | +| Property | Attribute | Description | Type | Default | +| ---------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | +| `apps` | -- | (optional) The apps to render in the apps menu. | `ModusNavbarApp[]` | `undefined` | +| `navAriaLabel` | `nav-aria-label` | (optional) The navbar's aria-label. | `string` | `undefined` | +| `buttons` | -- | (optional) The buttons to render in the Navbar. | `ModusNavbarButton[]` | `undefined` | +| `notificationCount` | `notification-count` | (optional) To add the counter value to the notification icon. | `number` | `undefined` | +| `enableSearchOverlay` | `enable-search-overlay` | (optional) Whether to show search overlay or not. | `boolean` | `undefined` | +| `helpTooltip` | -- | (optional) Help tooltip. | `ModusNavbarTooltip` | `undefined` | +| `helpUrl` | `help-url` | (optional) Help URL. | `string` | `undefined` | +| `logoOptions` | -- | (optional) Set the primary logo to display when the screen size is greater than 576 pixels, and the secondary logo to display when the screen size is less than or equal to 576 pixels. | `ModusNavbarLogoOptions` | `undefined` | +| `dropdownOptions` | -- | (optional) Renders a modus dropdown in the Navbar. | `ModusNavbarDropdownOptions` | `undefined` | +| `profileMenuOptions` | -- | (required) Profile menu options. | `ModusProfileMenuOptions` | `undefined` | +| `reverse` | `reverse` | (optional) Whether to display the navbar items in reverse order. | `boolean` | `undefined` | +| `searchTooltip` | -- | (optional) Search tooltip. | `ModusNavbarTooltip` | `undefined` | +| `showAppsMenu` | `show-apps-menu` | (optional) Whether to show the apps menu. | `boolean` | `undefined` | +| `showHelp` | `show-help` | (optional) Whether to show help. | `boolean` | `undefined` | +| `showMainMenu` | `show-main-menu` | (optional) Whether to show the main menu. | `boolean` | `undefined` | +| `showNotifications` | `show-notifications` | (optional) Whether to show notifications. | `boolean` | `undefined` | +| `showPendoPlaceholder` | `show-pendo-placeholder` | (optional) Whether to show the placeholder for Pendo. | `boolean` | `undefined` | +| `showProfile` | `show-profile` | (optional) Whether to show the profile. | `boolean` | `true` | +| `showSearch` | `show-search` | (optional) Whether to show search. | `boolean` | `undefined` | +| `showShadow` | `show-shadow` | (optional) Whether to show a shadow under the navbar. | `boolean` | `undefined` | +| `variant` | `variant` | (optional) Color variants for NavBar. | `"blue" \| "default"` | `'default'` | ### DOM Events @@ -249,6 +308,7 @@ interface ModusNavbarButton { | `appsMenuAppOpen` | An event that fires when an apps menu app opens. | `CustomEvent` | | `appsMenuOpen` | An event that fires when the apps menu opens. | `CustomEvent` | | `buttonClick` | An event that fires when a button in the custom button list is clicked. | `CustomEvent` | +| `dropdownItemSelect` | An event that fires when a dropdown item is selected. | `CustomEvent` | | `helpOpen` | An event that fires when the help link opens. | `CustomEvent` | | `mainMenuClick` | An event that fires on main menu click. | `CustomEvent` or `CustomEvent` | | `notificationsMenuOpen` | An event that fires when the notifications menu opens. | `CustomEvent` | diff --git a/stencil-workspace/storybook/stories/components/modus-navbar/modus-navbar.stories.tsx b/stencil-workspace/storybook/stories/components/modus-navbar/modus-navbar.stories.tsx index 7e3dd3daf..e1f47c243 100644 --- a/stencil-workspace/storybook/stories/components/modus-navbar/modus-navbar.stories.tsx +++ b/stencil-workspace/storybook/stories/components/modus-navbar/modus-navbar.stories.tsx @@ -25,8 +25,8 @@ export default { description: 'Toggle the help button', table: { defaultValue: { summary: false }, - type: { summary: 'boolean' } - } + type: { summary: 'boolean' }, + }, }, showProfile: { name: 'show-profile', @@ -34,7 +34,7 @@ export default { table: { defaultValue: { summary: true }, type: { summary: 'boolean' }, - } + }, }, showSearch: { name: 'show-search', @@ -72,7 +72,7 @@ export default { type: { summary: 'ModusNavbarTooltip' }, }, }, - notificationCount:{ + notificationCount: { name: 'notification-count', description: 'To add the counter value to the notification icon', table: { @@ -96,7 +96,8 @@ export default { }, }; -const workingAvatarUrl = 'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0e738c17-7f3c-422e-8225-f8c782b08626/d9pordj-43d4aa59-54b0-46a1-a568-e36dd691cf27.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBlNzM4YzE3LTdmM2MtNDIyZS04MjI1LWY4Yzc4MmIwODYyNlwvZDlwb3Jkai00M2Q0YWE1OS01NGIwLTQ2YTEtYTU2OC1lMzZkZDY5MWNmMjcucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.xvDk9KFIUAx0yAG3BPamDfRqmWUX6zwR4WVW40GjsoY'; +const workingAvatarUrl = + 'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0e738c17-7f3c-422e-8225-f8c782b08626/d9pordj-43d4aa59-54b0-46a1-a568-e36dd691cf27.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBlNzM4YzE3LTdmM2MtNDIyZS04MjI1LWY4Yzc4MmIwODYyNlwvZDlwb3Jkai00M2Q0YWE1OS01NGIwLTQ2YTEtYTU2OC1lMzZkZDY5MWNmMjcucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.xvDk9KFIUAx0yAG3BPamDfRqmWUX6zwR4WVW40GjsoY'; const failingAvatarUrl = 'https://avatar.example.com/broken-image-link.png'; const defaultPrimaryLogo = 'https://modus.trimble.com/img/trimble-logo.svg'; const defaultSecondaryLogo = 'https://modus.trimble.com/favicon.svg'; @@ -106,7 +107,7 @@ const defaultLogo = { }, secondary: { url: defaultSecondaryLogo, - } + }, }; const blueLogo = { primary: { @@ -114,16 +115,29 @@ const blueLogo = { }, secondary: { url: 'https://modus-bootstrap.trimble.com/img/trimble-icon-rev.svg', - } + }, }; -const defaultApps = [{ - description: 'The One Trimble Design System', - logoUrl: 'https://modus.trimble.com/favicon.svg', - name: 'Trimble Modus', - url: 'https://modus.trimble.com/', -}]; +const defaultApps = [ + { + description: 'The One Trimble Design System', + logoUrl: 'https://modus.trimble.com/favicon.svg', + name: 'Trimble Modus', + url: 'https://modus.trimble.com/', + }, +]; -const Template = ({ buttons, notificationCount, enableSearchOverlay, helpTooltip, navAriaLabel, profileMenuOptions, searchTooltip, showHelp, showProfile, showSearch }) => html` +const Template = ({ + buttons, + notificationCount, + enableSearchOverlay, + helpTooltip, + navAriaLabel, + profileMenuOptions, + searchTooltip, + showHelp, + showProfile, + showSearch, +}) => html`
    Render your own main menu.
    - - Menu Item 1 - Menu Item 2 - + + Menu Item 1 + Menu Item 2 +
    Render your own notification menu.
    Render your own profile menu content.
    @@ -155,15 +169,6 @@ const Template = ({ buttons, notificationCount, enableSearchOverlay, helpTooltip export const Default = Template.bind({}); Default.args = { enableSearchOverlay: false, - buttons: [ - { - id: 'addMenu', icon: 'add', - tooltip: { - text: 'Add', - } - }, - { id: 'notificationMenu', icon: 'notifications' }, - ], helpTooltip: undefined, navAriaLabel: 'Default', profileMenuOptions: { @@ -174,28 +179,39 @@ Default.args = { username: 'Modus User', links: [ { - id: "link1", - display: "Link 1", - icon: "moon" + id: 'link1', + display: 'Link 1', + icon: 'moon', }, { - id: "link2", - display: "Link 2", - icon: "sun" - } + id: 'link2', + display: 'Link 2', + icon: 'sun', + }, ], tooltip: { text: 'User Profile Menu', - } + }, }, searchTooltip: undefined, showHelp: false, showProfile: true, showSearch: false, - notificationCount: 0 + notificationCount: 0, }; -const FailedToLoadAvatarTemplate = ({ buttons, notificationCount, enableSearchOverlay, helpTooltip, navAriaLabel, profileMenuOptions, searchTooltip, showHelp, showProfile, showSearch }) => html` +const FailedToLoadAvatarTemplate = ({ + buttons, + notificationCount, + enableSearchOverlay, + helpTooltip, + navAriaLabel, + profileMenuOptions, + searchTooltip, + showHelp, + showProfile, + showSearch, +}) => html` html` +const BlueTemplate = ({ + buttons, + notificationCount, + enableSearchOverlay, + helpTooltip, + navAriaLabel, + profileMenuOptions, + searchTooltip, + showHelp, + showProfile, + showSearch, +}) => html` html` + +
    Render your own main menu.
    + + + Menu Item 1 + Menu Item 2 + + +
    Render your own notification menu.
    +
    Render your own profile menu content.
    +     +`; + +export const WithOptionalFeatures = WithOptionalFeaturesTemplate.bind({}); +WithOptionalFeatures.args = { + enableSearchOverlay: false, + helpTooltip: undefined, + navAriaLabel: 'Default', + profileMenuOptions: { + avatarUrl: workingAvatarUrl, + email: 'modus_user@trimble.com', + initials: 'MU', + signOutText: 'Sign out', + username: 'Modus User', + links: [ + { + id: 'link1', + display: 'Link 1', + icon: 'moon', + }, + { + id: 'link2', + display: 'Link 2', + icon: 'sun', + }, + ], + tooltip: { + text: 'User Profile Menu', + }, + }, + searchTooltip: undefined, + showHelp: false, + showProfile: true, + showSearch: false, + notificationCount: 0, }; From bd8778643a350fe7b22ce13e387f6e17102cb79f Mon Sep 17 00:00:00 2001 From: Vasistan Shakkaravarthi Date: Thu, 27 Jun 2024 14:39:11 +0530 Subject: [PATCH 15/24] Autocomplete: Emit selection changed event with ids (#2586) * 2585: Autocomplete to emit selection changed event with ids 2585: Autocomplete review feedback fix 2585: Autocomplete to emit selection changed event with ids * 2585: Autocomplete to emit selection changed event with ids 2585: Autocomplete review feedback fix 2585: Autocomplete to emit selection changed event with ids * 2586: Typo fix * 2586: Review update --- stencil-workspace/src/components.d.ts | 13 +++++++++ .../modus-autocomplete/modus-autocomplete.tsx | 28 +++++++++++++------ .../components/modus-autocomplete/readme.md | 9 +++--- .../src/components/modus-chip/modus-chip.tsx | 4 +++ .../src/components/modus-chip/readme.md | 1 + .../modus-autocomplete-storybook-docs.mdx | 1 + .../modus-autocomplete.stories.tsx | 9 +++++- .../modus-chip/modus-chip-storybook-docs.mdx | 10 ++++++- .../modus-chip/modus-chip.stories.tsx | 11 +++++++- 9 files changed, 70 insertions(+), 16 deletions(-) diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts index 8efb428f3..6993dde36 100644 --- a/stencil-workspace/src/components.d.ts +++ b/stencil-workspace/src/components.d.ts @@ -391,6 +391,10 @@ export namespace Components { * (optional) The chip's aria-label. */ "ariaLabel": string | null; + /** + * (optional) the chip's id + */ + "chipId": string; /** * (optional) The chip's style. */ @@ -2032,6 +2036,7 @@ declare global { interface HTMLModusAutocompleteElementEventMap { "optionSelected": string; "valueChange": string; + "selectionsChanged": string[]; } interface HTMLModusAutocompleteElement extends Components.ModusAutocomplete, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLModusAutocompleteElement, ev: ModusAutocompleteCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -3029,6 +3034,10 @@ declare namespace LocalJSX { * An event that fires when a dropdown option is selected. Emits the option id. */ "onOptionSelected"?: (event: ModusAutocompleteCustomEvent) => void; + /** + * An event that fires when an option is selected/removed. Emits the option ids. + */ + "onSelectionsChanged"?: (event: ModusAutocompleteCustomEvent) => void; /** * An event that fires when the input value changes. Emits the value string. */ @@ -3259,6 +3268,10 @@ declare namespace LocalJSX { * (optional) The chip's aria-label. */ "ariaLabel"?: string | null; + /** + * (optional) the chip's id + */ + "chipId"?: string; /** * (optional) The chip's style. */ diff --git a/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.tsx b/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.tsx index cd3baea73..4282c666c 100644 --- a/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.tsx +++ b/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.tsx @@ -72,7 +72,7 @@ export class ModusAutocomplete { @Prop({ mutable: true }) options: ModusAutocompleteOption[] | string[]; /** An array to hold the selected chips. */ - @State() selectedChips: string[] = []; + @State() selectedChips: ModusAutocompleteOption[] = []; /** The autocomplete's selected option. */ @State() selectedOption: string; @@ -118,6 +118,9 @@ export class ModusAutocomplete { /** An event that fires when the input value changes. Emits the value string. */ @Event() valueChange: EventEmitter; + /** An event that fires when an option is selected/removed. Emits the option ids. */ + @Event() selectionsChanged: EventEmitter; + @State() containsSlottedElements = false; @State() hasFocus = false; @State() visibleOptions: ModusAutocompleteOption[] = []; @@ -176,12 +179,13 @@ export class ModusAutocomplete { return this.hasFocus && showOptions && !this.disabled; }; - addChipValue(value: string) { + addChipValue(value: ModusAutocompleteOption) { if (this.selectedChips.includes(value)) { return; } this.selectedChips = [...this.selectedChips, value]; - this.valueChange.emit(this.selectedChips.join(',')); + this.valueChange.emit(this.selectedChips.map((opt) => opt.value).join(',')); + this.selectionsChanged.emit(this.selectedChips.map((opt) => opt.id)); this.value = ''; } handleCustomOptionClick = (option: any) => { @@ -189,7 +193,7 @@ export class ModusAutocomplete { const optionId = option.getAttribute(DATA_ID); if (this.multiple) { - this.addChipValue(optionValue); + this.addChipValue({ id: optionId, value: optionValue }); } else { this.selectedOption = optionValue; this.disableFiltering = this.disableCloseOnSelect; @@ -252,7 +256,7 @@ export class ModusAutocomplete { handleOptionClick = (option: ModusAutocompleteOption) => { if (this.multiple) { - this.addChipValue(option.value); + this.addChipValue(option); } else { this.selectedOption = option.value; this.disableFiltering = this.disableCloseOnSelect; @@ -285,10 +289,11 @@ export class ModusAutocomplete { this.valueChange.emit(search); }; - handleCloseClick(chipValue: string) { + handleCloseClick(chipValue: ModusAutocompleteOption) { if (this.selectedChips.length != 0) { - this.selectedChips = this.selectedChips.filter((chip) => chip !== chipValue); + this.selectedChips = this.selectedChips.filter((chip) => chip.id !== chipValue.id); this.valueChange.emit(this.selectedChips.join(',')); + this.selectionsChanged.emit(this.selectedChips.map((opt) => opt.id)); } } @@ -444,7 +449,12 @@ export class ModusAutocomplete {
    {this.includeSearchIcon ? : null} {this.selectedChips.map((chip) => ( - this.handleCloseClick(chip)}> + this.handleCloseClick(chip)}> ))} {this.TextInput()}
    @@ -458,7 +468,7 @@ export class ModusAutocomplete { let className; let isSelected; if (this.multiple) { - isSelected = this.selectedChips.includes(option.value); + isSelected = this.selectedChips.includes(option); className = 'text-option' + (isSelected ? ' selected' : ''); } else { isSelected = this.selectedOption === option.value; diff --git a/stencil-workspace/src/components/modus-autocomplete/readme.md b/stencil-workspace/src/components/modus-autocomplete/readme.md index 00bb426cd..4cf183a1f 100644 --- a/stencil-workspace/src/components/modus-autocomplete/readme.md +++ b/stencil-workspace/src/components/modus-autocomplete/readme.md @@ -33,10 +33,11 @@ ## Events -| Event | Description | Type | -| ---------------- | ---------------------------------------------------------------------------- | --------------------- | -| `optionSelected` | An event that fires when a dropdown option is selected. Emits the option id. | `CustomEvent` | -| `valueChange` | An event that fires when the input value changes. Emits the value string. | `CustomEvent` | +| Event | Description | Type | +| ------------------- | ----------------------------------------------------------------------------- | ----------------------- | +| `optionSelected` | An event that fires when a dropdown option is selected. Emits the option id. | `CustomEvent` | +| `selectionsChanged` | An event that fires when an option is selected/removed. Emits the option ids. | `CustomEvent` | +| `valueChange` | An event that fires when the input value changes. Emits the value string. | `CustomEvent` | ## Dependencies diff --git a/stencil-workspace/src/components/modus-chip/modus-chip.tsx b/stencil-workspace/src/components/modus-chip/modus-chip.tsx index c6a8b0a7f..d1be9559d 100644 --- a/stencil-workspace/src/components/modus-chip/modus-chip.tsx +++ b/stencil-workspace/src/components/modus-chip/modus-chip.tsx @@ -36,6 +36,9 @@ export class ModusChip { /** (optional) The chip's value. */ @Prop() value: string; + /** (optional) the chip's id */ + @Prop() chipId: string; + /** (optional) Maximum width for the Chip's text and shows ellipsis when truncated */ @Prop() maxWidth: string; @@ -111,6 +114,7 @@ export class ModusChip {
    @@ -19,11 +15,7 @@ ### Small
    - +
    @@ -31,31 +23,15 @@ ### Compact
    - +
    ```html - - - + + + ``` ### Properties diff --git a/stencil-workspace/storybook/stories/components/modus-progress-bar/modus-progress-bar.stories.tsx b/stencil-workspace/storybook/stories/components/modus-progress-bar/modus-progress-bar.stories.tsx index 094cd3d0e..89ac14d2d 100644 --- a/stencil-workspace/storybook/stories/components/modus-progress-bar/modus-progress-bar.stories.tsx +++ b/stencil-workspace/storybook/stories/components/modus-progress-bar/modus-progress-bar.stories.tsx @@ -84,17 +84,7 @@ export default { }, }; -const Template = ({ - ariaLabel, - backgroundColor, - color, - maxValue, - minValue, - size, - text, - textColor, - value, -}) => html` +const Template = ({ ariaLabel, backgroundColor, color, maxValue, minValue, size, text, textColor, value }) => html` Tab & Shift+Tab keys. Pressing the Enter key will toggle the selection. ## Usage + ### Thumbs + + ```html @@ -19,8 +22,11 @@ Users can navigate the sentiment scale using the Tab & Shift ``` + ### Smileys + + ```html @@ -31,13 +37,14 @@ Users can navigate the sentiment scale using the Tab & Shift ``` + ### Properties -| Property | Attribute | Description | Type | Options | Default | Required | -| ------------ | ------------ | --------------------------------------------------- | ------------------------------- | -------------------------- | ------- | -------- | -| `ariaLabel` | `aria-label` | (optional) The button's aria-label. | `string` | | | | -| `type` | `type` | The type of icons to be displayed. | `SMILEY_ICONS` \| `THUMB_ICONS` | `smileys`, `thumbs` | | Yes | -| `disabled` | `disabled` | (optional) Whether the sentiment scale is disabled. | `boolean` | | `false` | | +| Property | Attribute | Description | Type | Options | Default | Required | +| ----------- | ------------ | --------------------------------------------------- | ------------------------------- | ------------------- | ------- | -------- | +| `ariaLabel` | `aria-label` | (optional) The button's aria-label. | `string` | | | | +| `type` | `type` | The type of icons to be displayed. | `SMILEY_ICONS` \| `THUMB_ICONS` | `smileys`, `thumbs` | | Yes | +| `disabled` | `disabled` | (optional) Whether the sentiment scale is disabled. | `boolean` | | `false` | | ### Types @@ -48,6 +55,6 @@ Users can navigate the sentiment scale using the Tab & Shift html` - +const Template = ({ ariaLabel, iconsType, disabled }) => html` + `; export const Default = Template.bind({}); Default.args = { ariaLabel: '', iconsType: 'smileys', - disabled: false + disabled: false, }; - - - - diff --git a/stencil-workspace/storybook/stories/components/modus-slider/modus-slider.stories.tsx b/stencil-workspace/storybook/stories/components/modus-slider/modus-slider.stories.tsx index 2c49fcb28..de11ec074 100644 --- a/stencil-workspace/storybook/stories/components/modus-slider/modus-slider.stories.tsx +++ b/stencil-workspace/storybook/stories/components/modus-slider/modus-slider.stories.tsx @@ -62,14 +62,7 @@ export default { }, }; -const Template = ({ - ariaLabel, - disabled, - label, - maxValue, - minValue, - value, -}) => html` +const Template = ({ ariaLabel, disabled, label, maxValue, minValue, value }) => html` - html` `; +export const Default = ({ color, size }) => html` `; Default.args = { color: '#005F9E', size: '2rem', diff --git a/stencil-workspace/storybook/stories/components/modus-switch/modus-switch-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-switch/modus-switch-storybook-docs.mdx index dd17f0873..488b44a94 100644 --- a/stencil-workspace/storybook/stories/components/modus-switch/modus-switch-storybook-docs.mdx +++ b/stencil-workspace/storybook/stories/components/modus-switch/modus-switch-storybook-docs.mdx @@ -41,13 +41,13 @@ import { Anchor } from '@storybook/addon-docs'; ## Properties -| Property | Attribute | Description | Type | Default | -| ----------- | ------------ | ------------------------------------------ | ---------------------- | ----------- | -| `ariaLabel` | `aria-label` | (optional) The switch's aria-label. | `string` | `undefined` | -| `checked` | `checked` | (optional) Whether the switch is checked. | `boolean` | `undefined` | -| `disabled` | `disabled` | (optional) Whether the switch is disabled. | `boolean` | `undefined` | -| `label` | `label` | (optional) The switch label. | `string` | `undefined` | -| `size` | `size` | (optional) The size of the radiobutton. | `"medium" , "small"` | `'medium'` | +| Property | Attribute | Description | Type | Default | +| ----------- | ------------ | ------------------------------------------ | -------------------- | ----------- | +| `ariaLabel` | `aria-label` | (optional) The switch's aria-label. | `string` | `undefined` | +| `checked` | `checked` | (optional) Whether the switch is checked. | `boolean` | `undefined` | +| `disabled` | `disabled` | (optional) Whether the switch is disabled. | `boolean` | `undefined` | +| `label` | `label` | (optional) The switch label. | `string` | `undefined` | +| `size` | `size` | (optional) The size of the radiobutton. | `"medium" , "small"` | `'medium'` | ### DOM Events diff --git a/stencil-workspace/storybook/stories/components/modus-switch/modus-switch.stories.tsx b/stencil-workspace/storybook/stories/components/modus-switch/modus-switch.stories.tsx index 511c69ef3..b6b048df8 100644 --- a/stencil-workspace/storybook/stories/components/modus-switch/modus-switch.stories.tsx +++ b/stencil-workspace/storybook/stories/components/modus-switch/modus-switch.stories.tsx @@ -58,16 +58,9 @@ export default { }, }; -export const Medium = ({ ariaLabel, checked, disabled, label, size }) => - html` - - - `; +export const Medium = ({ ariaLabel, checked, disabled, label, size }) => html` + +`; Medium.args = { ariaLabel: '', checked: false, @@ -76,16 +69,9 @@ Medium.args = { size: 'medium', }; -export const Checked = ({ ariaLabel, checked, disabled, label, size }) => - html` - - - `; +export const Checked = ({ ariaLabel, checked, disabled, label, size }) => html` + +`; Checked.args = { ariaLabel: '', checked: true, @@ -94,16 +80,9 @@ Checked.args = { size: 'medium', }; -export const Disabled = ({ ariaLabel, checked, disabled, label, size }) => - html` - - - `; +export const Disabled = ({ ariaLabel, checked, disabled, label, size }) => html` + +`; Disabled.args = { ariaLabel: '', checked: false, diff --git a/stencil-workspace/storybook/stories/components/modus-table/modus-table-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-table/modus-table-storybook-docs.mdx index 259076da9..0a8f9825a 100644 --- a/stencil-workspace/storybook/stories/components/modus-table/modus-table-storybook-docs.mdx +++ b/stencil-workspace/storybook/stories/components/modus-table/modus-table-storybook-docs.mdx @@ -156,14 +156,12 @@ Manual Sorting allows users to handle sorting in server-side mode. - Manual Sorting can be enabled using the `manualSortingOptions` prop. - The `currentSortingState` represents how the data is sorted (column and direction). - ### Custom Sorting Custom sorting allows you to define your own logic for sorting table data.Custom sorting can be implemented by defining a sorting function `sortingFn` and assigning it to the relevant columns in your table configuration. A custom sorting function receives two arguments: the row values for the column being sorted, and the column id. - ```javascript @@ -174,12 +172,9 @@ const myCustomSortingFn(rowA, rowB, columnId) => { ``` - It should return -1 if the first argument should come before the second, 1 if it should come after, or 0 if they are equal. - ```javascript - const columns = [ { header: () => 'Name', @@ -201,17 +196,14 @@ const columns = [ accessorKey: 'profile', // use custom sorting function directly sortingFn: (rowA, rowB, columnId) => { - return rowA.original.someProperty - rowB.original.someProperty + return rowA.original.someProperty - rowB.original.someProperty; }, - } -] - - + }, +]; ``` Custom Sorting Function - ```javascript const myCustomSortingFn: SortingFn = (rowA, rowB, _columnId) => { const statusA = rowA.original.status @@ -224,8 +216,6 @@ const myCustomSortingFn: SortingFn = (rowA, rowB, _columnId) => { The `myCustomSortingFn` function sorts rows based on the status property of each row's data. The status property can have one of three values: 'single', 'complicated', or 'relationship'. The function ensures that rows are sorted in the order specified by the statusOrder array. - - ### Value Formatter User can take the data of a cell and apply any string-based formatting logic. @@ -781,14 +771,14 @@ interface ModusTableManualSortingOptions { Users can use keyboard navigation to perform different actions. -| Name | Description | -| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Sorting | The Tab key is used for navigating between the sort icons, while the Enter key is used to interact with the icon. | -| Pagination | Users can change page size and page number using keyboard navigation. The Tab key brings focus to an element and the Enter key is used to perform an action like selecting a page size and page number. | -| Column Resize | Users can select the column for resizing by using the Tab key, and by pressing the Spacebar or Enter key to enable the column resize for the selected column. To resize, use the `left`/`right` MediaKeySession. When the Enter key is pressed, its position is saved. | -| Column Reorder | Users can navigate to the column to be reorder by using the Tab key. By pressing Enter key selects the column header, to move to the desired location user can use `left`/`right` keys and the column can be dropped by Enter key. | -| Column Visibility | The meatball icon buttom will get focus by using the Tab key. By pressing Enter or Space, a dropdown will be opened; press the Escape key to close the dropdown. Using `Tab or Shift+Tab` / `ArrowUp or ArrowDown`, column checkboxes/items can get focus to change state by pressing the Enter or Space. | -| Cell Navigation | Table cells can be navigated using keys like Tab, `Shift+Tab`, `ArrowUp`, and `ArrowDown`. Additionally, the Tab key can be used to focus on elements inside a cell. | +| Name | Description | +| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Sorting | The Tab key is used for navigating between the sort icons, while the Enter key is used to interact with the icon. | +| Pagination | Users can change page size and page number using keyboard navigation. The Tab key brings focus to an element and the Enter key is used to perform an action like selecting a page size and page number. | +| Column Resize | Users can select the column for resizing by using the Tab key, and by pressing the Spacebar or Enter key to enable the column resize for the selected column. To resize, use the `left`/`right` MediaKeySession. When the Enter key is pressed, its position is saved. | +| Column Reorder | Users can navigate to the column to be reorder by using the Tab key. By pressing Enter key selects the column header, to move to the desired location user can use `left`/`right` keys and the column can be dropped by Enter key. | +| Column Visibility | The meatball icon buttom will get focus by using the Tab key. By pressing Enter or Space, a dropdown will be opened; press the Escape key to close the dropdown. Using `Tab or Shift+Tab` / `ArrowUp or ArrowDown`, column checkboxes/items can get focus to change state by pressing the Enter or Space. | +| Cell Navigation | Table cells can be navigated using keys like Tab, `Shift+Tab`, `ArrowUp`, and `ArrowDown`. Additionally, the Tab key can be used to focus on elements inside a cell. | | Inline Editing | When a cell is in focus, pressing the Enter key will activate the cell editor. The cell's value will be saved either when the focus shifts to another cell or when the Enter key is pressed again, which will also move the focus to the cell below in the same row. Escape key reverts the cell value to its original state and closes the editor. Note: Select cell editor saves the value only when the cell loses focus. | ## Properties @@ -848,11 +838,11 @@ Users can use this to provide custom elements. ### Methods -| Method name | Description | Parameter | Return | -| ------------------------ | ----------------------------------------- | ----------------------------------- | -------------------- | -| `getColumnData` | Gets data of a perticular column. | `accessorKey: string` | `Promise` | -| `toggleColumnVisibility` | Decides the Data table column visibility. | `columnId: string`, `show: boolean` | `Promise` | -| `getEditableCell` | Handle the editability of a specific cell.| `rowIndex: string`, `columnId: string` | `Promise` | +| Method name | Description | Parameter | Return | +| ------------------------ | ------------------------------------------ | -------------------------------------- | -------------------- | +| `getColumnData` | Gets data of a perticular column. | `accessorKey: string` | `Promise` | +| `toggleColumnVisibility` | Decides the Data table column visibility. | `columnId: string`, `show: boolean` | `Promise` | +| `getEditableCell` | Handle the editability of a specific cell. | `rowIndex: string`, `columnId: string` | `Promise` | ### Text Wrapping diff --git a/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx b/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx index e4a20e474..6349baac9 100644 --- a/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx +++ b/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx @@ -28,15 +28,11 @@ function newPerson() { lastName, age: randomNumber(20, 80) * 30, visits: randomNumber(1, 100) * 100, - email:{ display: email, url: email }, + email: { display: email, url: email }, progress: randomNumber(1, 100) * 100, status: randomNumber(1, 100) > 66 ? 'Verified' : randomNumber(0, 100) > 33 ? 'Pending' : 'Rejected', createdAt: formattedDate, - priority: Priorities[ - randomNumber(1, 100) > 66 ? 'high': - randomNumber(0, 100) > 33 ? 'medium' - : 'low' - ], + priority: Priorities[randomNumber(1, 100) > 66 ? 'high' : randomNumber(0, 100) > 33 ? 'medium' : 'low'], }; } // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types @@ -55,7 +51,19 @@ function makeData(...lens): object[] { } function initializeTable(props) { - const {columns, data, pageSizeList, toolbarOptions, displayOptions, rowSelectionOptions, rowActions, manualPaginationOptions, manualSortingOptions, defaultSort, customSort} = props + const { + columns, + data, + pageSizeList, + toolbarOptions, + displayOptions, + rowSelectionOptions, + rowActions, + manualPaginationOptions, + manualSortingOptions, + defaultSort, + customSort, + } = props; const tag = document.createElement('script'); tag.innerHTML = ` var modusTable = document.querySelector('modus-table'); @@ -210,24 +218,25 @@ const Names = [ ]; const Priorities = { - "high": { + high: { size: 'medium', type: 'counter', text: 'High', color: 'success', }, - "medium": { - size: 'medium', type: 'counter', + medium: { + size: 'medium', + type: 'counter', text: 'Medium', - color: 'warning' + color: 'warning', }, - "low": { - size: 'medium', type: 'counter', + low: { + size: 'medium', + type: 'counter', text: 'Low', - color: 'danger' - } -} - + color: 'danger', + }, +}; const DefaultColumns = [ { @@ -271,7 +280,8 @@ const DefaultColumns = [ dataType: 'link', size: 230, minSize: 80, - sortingFn: 'sortForHyperlink'}, + sortingFn: 'sortForHyperlink', + }, { header: 'Status', accessorKey: 'status', @@ -295,7 +305,6 @@ const DefaultColumns = [ }, ]; - const DefaultArgs = { hover: false, sort: false, @@ -319,7 +328,7 @@ const DefaultArgs = { rowSelection: false, rowSelectionOptions: {}, wrapText: false, - customSort:[], + customSort: [], }; export default { @@ -547,22 +556,22 @@ export default { }, customSort: { name: 'customSorting', - description: 'This property is for demonstration purposes only and is not available on the component. This demo illustrates how to implement custom sorting for the status column based on a given order.', + description: + 'This property is for demonstration purposes only and is not available on the component. This demo illustrates how to implement custom sorting for the status column based on a given order.', table: { // type: { summary: 'customSort'}, }, type: { required: false }, }, - defaultSort : { + defaultSort: { name: 'defaultSort', description: 'To set the default sorting of the table', table: { type: { summary: 'ModusTableColumnSort' }, }, type: { required: false }, - } - , - wrapText : { + }, + wrapText: { name: 'wrapText', description: 'To wrap text that overflows the cell', table: { @@ -570,12 +579,24 @@ export default { type: { summary: 'boolean' }, }, type: { required: false }, - } + }, }, parameters: { actions: { - handles: ['cellValueChange','cellLinkClick', 'columnOrderChange', 'columnSizingChange', 'columnVisibilityChange', 'paginationChange', 'rowExpanded', 'rowSelectionChange', 'rowUpdated', 'sortChange', 'rowActionClick'], + handles: [ + 'cellValueChange', + 'cellLinkClick', + 'columnOrderChange', + 'columnSizingChange', + 'columnVisibilityChange', + 'paginationChange', + 'rowExpanded', + 'rowSelectionChange', + 'rowUpdated', + 'sortChange', + 'rowActionClick', + ], }, controls: { expanded: true, sort: 'requiredFirst' }, docs: { @@ -616,7 +637,7 @@ const Template = ({ defaultSort, density, wrapText, - customSort + customSort, }) => html`
    - ${initializeTable({columns, data, pageSizeList, toolbarOptions, displayOptions, rowSelectionOptions, rowActions, manualPaginationOptions, manualSortingOptions, defaultSort, customSort})} + ${initializeTable({ + columns, + data, + pageSizeList, + toolbarOptions, + displayOptions, + rowSelectionOptions, + rowActions, + manualPaginationOptions, + manualSortingOptions, + defaultSort, + customSort, + })} `; export const Default = Template.bind({}); @@ -663,17 +696,17 @@ ManualSorting.args = { ...DefaultArgs, sort: true, manualSortingOptions: { - currentSortingState: [{ - id: 'first-name', - desc: false - }] - } + currentSortingState: [ + { + id: 'first-name', + desc: false, + }, + ], + }, }; - export const CustomSorting = Template.bind({}); -CustomSorting.args = {...DefaultArgs, customSort:['Rejected', 'Verified', 'Pending'],sort:true ,data:makeData(5) -}; +CustomSorting.args = { ...DefaultArgs, customSort: ['Rejected', 'Verified', 'Pending'], sort: true, data: makeData(5) }; export const ValueFormatter = ({ hover, @@ -694,7 +727,7 @@ export const ValueFormatter = ({ rowSelection, rowSelectionOptions, density, - wrapText + wrapText, }) => html`
    { const tag = document.createElement('script'); @@ -757,7 +790,7 @@ export const Badge = Template.bind({}); Badge.args = { ...DefaultArgs, columns: [ - ...DefaultColumns.slice(0, DefaultColumns.length-2), + ...DefaultColumns.slice(0, DefaultColumns.length - 2), { header: 'Priority', accessorKey: 'priority', @@ -766,11 +799,10 @@ Badge.args = { dataType: 'badge', maxSize: 100, }, - ...DefaultColumns.slice(DefaultColumns.length - 1) + ...DefaultColumns.slice(DefaultColumns.length - 1), ], - data: makeData(7) - -} + data: makeData(7), +}; export const ColumnResize = Template.bind({}); ColumnResize.args = { ...DefaultArgs, columnResize: true }; @@ -816,11 +848,14 @@ ExpandableRows.args = { ...DefaultArgs, rowsExpandable: true, data: makeData(7, export const CheckboxRowSelection = Template.bind({}); CheckboxRowSelection.args = { - ...DefaultArgs, rowSelection: true, rowSelectionOptions: { + ...DefaultArgs, + rowSelection: true, + rowSelectionOptions: { multiple: true, subRowSelection: true, - preSelectedRows:["0"], - }, data: makeData(7) + preSelectedRows: ['0'], + }, + data: makeData(7), }; const DefaultColumnsWithPriority = [ @@ -834,80 +869,102 @@ const DefaultColumnsWithPriority = [ maxSize: 100, }, ]; -const EditableColumns =DefaultColumnsWithPriority.map(col =>{ - if(col.accessorKey === 'status'){ - return {...col, cellEditable:true, +const EditableColumns = DefaultColumnsWithPriority.map((col) => { + if (col.accessorKey === 'status') { + return { + ...col, + cellEditable: true, cellEditorType: 'select', cellEditorArgs: { - options:[ - { display: 'Verified' }, - { display: 'Pending' }, - { display: 'Rejected' }, - ] - } }; + options: [{ display: 'Verified' }, { display: 'Pending' }, { display: 'Rejected' }], + }, + }; } - if(col.accessorKey === 'firstName'){ - const nameOptions = Names.map(name => (name.split(' ')[0])); - return {...col, cellEditable:true, + if (col.accessorKey === 'firstName') { + const nameOptions = Names.map((name) => name.split(' ')[0]); + return { + ...col, + cellEditable: true, cellEditorType: 'autocomplete', cellEditorArgs: { - options:nameOptions, - }, + options: nameOptions, + }, + }; } -} -if(col.accessorKey === 'email'){ - const emailOptions = Names.map(name => ({display: `${name.split(' ')[0]}${name.split(' ')[1]}@example.com`, url: `${name.split(' ')[0]}${name.split(' ')[1]}@example.com`})); - return {...col, cellEditable:true, - cellEditorType: 'autocomplete', - cellEditorArgs: { - options:emailOptions, + if (col.accessorKey === 'email') { + const emailOptions = Names.map((name) => ({ + display: `${name.split(' ')[0]}${name.split(' ')[1]}@example.com`, + url: `${name.split(' ')[0]}${name.split(' ')[1]}@example.com`, + })); + return { + ...col, + cellEditable: true, + cellEditorType: 'autocomplete', + cellEditorArgs: { + options: emailOptions, + }, + }; } -} -} -if (col.accessorKey === 'priority') { - return { - ...col, - cellEditable: true, - cellEditorType: 'select', - cellEditorArgs: { - options: [ - { display: 'Low',type: 'counter', color: 'danger', size: 'medium'}, - { display: 'Medium',type: 'counter', color: 'primary', size: 'medium',}, - { display: 'High',type: 'counter', color: 'success', size: 'medium'}, - ], - }, - }; -} -if(col.accessorKey==='createdAt'){ - return {...col, cellEditable:true, - cellEditorType: 'date', - cellEditorArgs: { - format: 'yyyy-mm-dd', - }, - }; -} - else return {...col, cellEditable: true}; + if (col.accessorKey === 'priority') { + return { + ...col, + cellEditable: true, + cellEditorType: 'select', + cellEditorArgs: { + options: [ + { display: 'Low', type: 'counter', color: 'danger', size: 'medium' }, + { display: 'Medium', type: 'counter', color: 'primary', size: 'medium' }, + { display: 'High', type: 'counter', color: 'success', size: 'medium' }, + ], + }, + }; + } + if (col.accessorKey === 'createdAt') { + return { + ...col, + cellEditable: true, + cellEditorType: 'date', + cellEditorArgs: { + format: 'yyyy-mm-dd', + }, + }; + } else return { ...col, cellEditable: true }; }); export const InlineEditing = Template.bind({}); InlineEditing.args = { ...DefaultArgs, columns: EditableColumns, data: makeData(7) }; export const LargeDataset = Template.bind({}); -LargeDataset.args = { ...DefaultArgs, columns: EditableColumns, data: makeData(10000, 1,1 ),pagination: true, pageSizeList: [5, 10, 50], sort: true , hover: true, rowsExpandable: true, summaryRow: true , columnReorder:true, columnResize: true, toolbar:true, toolbarOptions: { - columnsVisibility: { - title: '', - requiredColumns: ['age', 'visits'], - } -}, -rowSelection: true, rowSelectionOptions: { - multiple: true, - subRowSelection: true -} +LargeDataset.args = { + ...DefaultArgs, + columns: EditableColumns, + data: makeData(10000, 1, 1), + pagination: true, + pageSizeList: [5, 10, 50], + sort: true, + hover: true, + rowsExpandable: true, + summaryRow: true, + columnReorder: true, + columnResize: true, + toolbar: true, + toolbarOptions: { + columnsVisibility: { + title: '', + requiredColumns: ['age', 'visits'], + }, + }, + rowSelection: true, + rowSelectionOptions: { + multiple: true, + subRowSelection: true, + }, }; export const RowActions = Template.bind({}); RowActions.args = { - ...DefaultArgs, rowActions:[ + ...DefaultArgs, + rowActions: [ { id: '1', icon: 'add', @@ -939,15 +996,21 @@ RowActions.args = { index: 4, icon: 'delete', label: 'Delete', - } - - ], data: makeData(7), fullWidth: true + }, + ], + data: makeData(7), + fullWidth: true, }; export const WrapText = Template.bind({}); -WrapText.args = { ...DefaultArgs, data: [{ - ...newPerson(), - lastName: 'This is an example of long text' - }, - ...makeData(4)], wrapText: true +WrapText.args = { + ...DefaultArgs, + data: [ + { + ...newPerson(), + lastName: 'This is an example of long text', + }, + ...makeData(4), + ], + wrapText: true, }; diff --git a/stencil-workspace/storybook/stories/components/modus-tabs/modus-tabs-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-tabs/modus-tabs-storybook-docs.mdx index c5c029da4..2250b1896 100644 --- a/stencil-workspace/storybook/stories/components/modus-tabs/modus-tabs-storybook-docs.mdx +++ b/stencil-workspace/storybook/stories/components/modus-tabs/modus-tabs-storybook-docs.mdx @@ -71,7 +71,7 @@ A new TypeScript typing has been provided named Tab defined as: | Name | Description | Type | Options | Default Value | Required | | ------------ | -------------------- | --------- | ----------------- | ------------- | -------- | -| `tabs` | The tabs' tabs | `Tab[]` | | | ✔ | +| `tabs` | The tabs' tabs | `Tab[]` | | | ✔ | | `aria-label` | The tabs' aria-label | `string` | | | | | `size` | The tabs' size | `string` | 'medium', 'small' | 'medium' | | | `full-width` | The tabs' width | `boolean` | true, false | false | | diff --git a/stencil-workspace/storybook/stories/components/modus-tabs/modus-tabs.stories.tsx b/stencil-workspace/storybook/stories/components/modus-tabs/modus-tabs.stories.tsx index a163ab242..4989e59d8 100644 --- a/stencil-workspace/storybook/stories/components/modus-tabs/modus-tabs.stories.tsx +++ b/stencil-workspace/storybook/stories/components/modus-tabs/modus-tabs.stories.tsx @@ -28,13 +28,13 @@ const Template = ({ size }) => html` `; export const Default = Template.bind({}); Default.args = { - size: 'medium' -} + size: 'medium', +}; export const Small = Template.bind({}); Small.args = { - size: 'small' -} + size: 'small', +}; const setTabs = () => { const tag = document.createElement('script'); diff --git a/stencil-workspace/storybook/stories/components/modus-tooltip/modus-tooltip-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-tooltip/modus-tooltip-storybook-docs.mdx index 64c562267..fb671e7e0 100644 --- a/stencil-workspace/storybook/stories/components/modus-tooltip/modus-tooltip-storybook-docs.mdx +++ b/stencil-workspace/storybook/stories/components/modus-tooltip/modus-tooltip-storybook-docs.mdx @@ -19,12 +19,12 @@ This component utilizes the slot element, allowing you to wrap anything with a t ### Properties -| Name | Description | Type | Options | Default Value | Required | -| --------------- | --------------------------------------------------------- | --------- | -------------------------------- | ------------- | -------- | -| `aria-label` | The tooltip's aria-label | | | | | -| `disabled` | (optional) Hide the tooltip | `boolean` | | false | | -| `text` | The tooltip's text | `string` | | | | -| `position` | The tooltip's position relative to the item it's wrapping | `string` | 'bottom', 'left', 'right', 'top' | 'top' | | +| Name | Description | Type | Options | Default Value | Required | +| ------------ | --------------------------------------------------------- | --------- | -------------------------------- | ------------- | -------- | +| `aria-label` | The tooltip's aria-label | | | | | +| `disabled` | (optional) Hide the tooltip | `boolean` | | false | | +| `text` | The tooltip's text | `string` | | | | +| `position` | The tooltip's position relative to the item it's wrapping | `string` | 'bottom', 'left', 'right', 'top' | 'top' | | ### Accessibility diff --git a/stencil-workspace/storybook/stories/components/modus-tooltip/modus-tooltip.stories.tsx b/stencil-workspace/storybook/stories/components/modus-tooltip/modus-tooltip.stories.tsx index ed62f609a..31bc6f843 100644 --- a/stencil-workspace/storybook/stories/components/modus-tooltip/modus-tooltip.stories.tsx +++ b/stencil-workspace/storybook/stories/components/modus-tooltip/modus-tooltip.stories.tsx @@ -13,7 +13,7 @@ export default { }, }, disabled: { - description: "Hide the tooltip", + description: 'Hide the tooltip', table: { type: { summary: 'boolean' }, }, @@ -44,21 +44,12 @@ export default { options: { isToolshown: true, }, - layout: 'centered' + layout: 'centered', }, }; -export const Default = ({ - ariaLabel, - position, - text, - disabled -}) => html` - +export const Default = ({ ariaLabel, position, text, disabled }) => html` + Button `; @@ -66,5 +57,5 @@ Default.args = { ariaLabel: '', position: 'bottom', text: 'Tooltip text...', - disabled: false + disabled: false, }; From 2ba3bfbececa0dd16190936f55b2db920093550c Mon Sep 17 00:00:00 2001 From: Christian Oliff Date: Fri, 28 Jun 2024 17:15:06 +0900 Subject: [PATCH 20/24] Docs: Fix accessibilty issues on Buttons Canvas Demo (#2653) - Add Notifications `aria-label` to icon-only button - Adds false to `aria-disabled` (otherwise it is invalid) --- .../modus-button-group-storybook-docs.mdx | 6 +- .../modus-button/modus-button.stories.tsx | 57 +++++++++---------- .../modus-card/modus-card-storybook-docs.mdx | 21 ++++--- 3 files changed, 40 insertions(+), 44 deletions(-) diff --git a/stencil-workspace/storybook/stories/components/modus-button-group/modus-button-group-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-button-group/modus-button-group-storybook-docs.mdx index 26a55a09e..a5d9bfb02 100644 --- a/stencil-workspace/storybook/stories/components/modus-button-group/modus-button-group-storybook-docs.mdx +++ b/stencil-workspace/storybook/stories/components/modus-button-group/modus-button-group-storybook-docs.mdx @@ -6,6 +6,7 @@ import { Anchor } from '@storybook/addon-docs'; This component utilizes the `modus-button` element, allowing you to render your own HTML in the button group. #### Implementation Details + For Text Buttons and Icon with Text Buttons, - Solid buttons supports all the given colors. @@ -34,7 +35,6 @@ For Icon only Buttons, Button 2 Button 3 - ``` @@ -87,7 +87,7 @@ interface ModusButtonGroupButtonClickEvent { ### Properties | Property | Attribute | Description | Type | Default | -|-----------------|------------------|------------------------------------------------------------------|--------------------------------------------------|-------------| +| --------------- | ---------------- | ---------------------------------------------------------------- | ------------------------------------------------ | ----------- | | `ariaDisabled` | `aria-disabled` | (optional) The button groups's `aria-disabled` state | `string` | `undefined` | | `ariaLabel` | `aria-label` | (optional) The button groups's `aria-label` | `string` | `undefined` | | `buttonStyle` | `button-style` | (optional) The style of the buttons in group | `"borderless" , "fill" , "outline"` | `'outline'` | @@ -99,7 +99,7 @@ interface ModusButtonGroupButtonClickEvent { ### DOM Events | Event | Description | Type | -|-------------------|-------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------| +| ----------------- | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | | `buttonClick` | An event that fires on button click. | `CustomEvent` | | `selectionChange` | An event that fires when selection type is `single` or `multiple` on button click that provides the list of selected buttons. | `CustomEvent` | diff --git a/stencil-workspace/storybook/stories/components/modus-button/modus-button.stories.tsx b/stencil-workspace/storybook/stories/components/modus-button/modus-button.stories.tsx index 9585a9e34..cffcc7d71 100644 --- a/stencil-workspace/storybook/stories/components/modus-button/modus-button.stories.tsx +++ b/stencil-workspace/storybook/stories/components/modus-button/modus-button.stories.tsx @@ -16,6 +16,7 @@ export default { name: 'aria-label', description: "The button's aria-label", table: { + defaultValue: { summary: false }, type: { summary: 'string' }, }, }, @@ -69,21 +70,21 @@ export default { }, iconOnly: { name: 'icon-only', - description: "Takes the icon name and renders an icon-only button", + description: 'Takes the icon name and renders an icon-only button', table: { type: { summary: 'string' }, }, }, leftIcon: { name: 'left-icon', - description: "Takes the icon name and shows the icon aligned to the left of the button text", + description: 'Takes the icon name and shows the icon aligned to the left of the button text', table: { type: { summary: 'string' }, }, }, rightIcon: { name: 'right-icon', - description: "Takes the icon name and shows the icon aligned to the right of the button text", + description: 'Takes the icon name and shows the icon aligned to the right of the button text', table: { type: { summary: 'string' }, }, @@ -114,7 +115,7 @@ const DefaultTemplate = ({ rightIcon, iconOnly, showCaret, - label + label, }) => html` + size=${size} + left-icon=${leftIcon} + right-icon=${rightIcon} + icon-only=${iconOnly} + show-caret=${showCaret}> ${label} `; const DefaultTemplateArgs = { - ariaDisabled: '', + ariaDisabled: 'false', ariaLabel: '', buttonStyle: 'fill', color: 'primary', @@ -138,41 +143,33 @@ const DefaultTemplateArgs = { rightIcon: '', iconOnly: '', showCaret: false, - label: 'Default' + label: 'Default', }; - export const Default = DefaultTemplate.bind({}); -Default.args = { ...DefaultTemplateArgs -}; +Default.args = { ...DefaultTemplateArgs }; export const Borderless = DefaultTemplate.bind({}); -Borderless.args = {...DefaultTemplateArgs, - buttonStyle: 'borderless', label: 'Borderless', -}; +Borderless.args = { ...DefaultTemplateArgs, buttonStyle: 'borderless', label: 'Borderless' }; export const Outline = DefaultTemplate.bind({}); -Outline.args = {...DefaultTemplateArgs, - buttonStyle: 'outline', label: 'Outline', -}; +Outline.args = { ...DefaultTemplateArgs, buttonStyle: 'outline', label: 'Outline' }; export const IconWithText = DefaultTemplate.bind({}); -IconWithText.args = {...DefaultTemplateArgs, label: 'Default', - leftIcon: 'notifications' -}; +IconWithText.args = { ...DefaultTemplateArgs, label: 'Default', leftIcon: 'notifications' }; export const IconOnly = DefaultTemplate.bind({}); -IconOnly.args = {...DefaultTemplateArgs, label: '', buttonStyle: 'borderless', -color: 'secondary', -size: 'large', -iconOnly: 'notifications', -showCaret: false +IconOnly.args = { + ...DefaultTemplateArgs, + ariaLabel: 'Notifications', + ariaDisabled: false, + label: '', + buttonStyle: 'borderless', + color: 'secondary', + size: 'large', + iconOnly: 'notifications', + showCaret: false, }; export const WithCaret = DefaultTemplate.bind({}); -WithCaret.args = {...DefaultTemplateArgs, label: 'Primary', -color: 'primary', -disabled: false, -showCaret: true -}; - +WithCaret.args = { ...DefaultTemplateArgs, label: 'Primary', color: 'primary', disabled: false, showCaret: true }; diff --git a/stencil-workspace/storybook/stories/components/modus-card/modus-card-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-card/modus-card-storybook-docs.mdx index a7230b58d..d1db727dd 100644 --- a/stencil-workspace/storybook/stories/components/modus-card/modus-card-storybook-docs.mdx +++ b/stencil-workspace/storybook/stories/components/modus-card/modus-card-storybook-docs.mdx @@ -14,27 +14,26 @@ This component utilizes the slot element, allowing you to render your own HTML i ```html - -
    -

    Card title

    -
    Card subtitle
    -

    Some quick example text to build on the card title and make up the bulk of the card's content.

    - Go somewhere -
    -     + +
    +

    Card title

    +
    Card subtitle
    +

    Some quick example text to build on the card title and make up the bulk of the card's content.

    + Go somewhere +
    + ``` ### Properties - | Property | Attribute | Description | Type | Default | | ------------------- | ---------------------- | -------------------------------------------------------------------------------------- | --------- | ----------- | | `ariaLabel` | `aria-label` | (optional) The card's aria-label. | `string` | `undefined` | | `borderRadius` | `border-radius` | (optional) The border radius of the card. | `string` | `4px` | -| `height` | `height` | (optional) The height of the card. | `string` | `269px` | +| `height` | `height` | (optional) The height of the card. | `string` | `269px` | | `showCardBorder` | `show-card-border` | (optional) A flag that controls the display of border. | `boolean` | `true` | | `showShadowOnHover` | `show-shadow-on-hover` | (optional) A flag that controls the display of shadow box when the element is hovered. | `boolean` | `true` | -| `width` | `width` | (optional) The width of the card. | `string` | `240px` | +| `width` | `width` | (optional) The width of the card. | `string` | `240px` | --- From b370218f664f4593c053b483971d06905360070b Mon Sep 17 00:00:00 2001 From: Christian Oliff Date: Fri, 28 Jun 2024 21:22:11 +0900 Subject: [PATCH 21/24] Minor Docs Fixes (#2655) --- .cspell.json | 1 + .../modus-utility-panel.scss | 2 +- .../modus-accordion-storybook-docs.mdx | 13 ++- .../modus-autocomplete-storybook-docs.mdx | 8 +- .../modus-autocomplete.stories.tsx | 50 ++++++++---- .../modus-pagination-storybook-docs.mdx | 18 ++--- .../modus-radio-group-storybook-docs.mdx | 14 ++-- .../modus-text-input-storybook-docs.mdx | 80 ++++++++----------- 8 files changed, 99 insertions(+), 87 deletions(-) diff --git a/.cspell.json b/.cspell.json index cdb15c4a4..84730fefa 100644 --- a/.cspell.json +++ b/.cspell.json @@ -28,6 +28,7 @@ "hoverable", "inexplicitly", "inputmode", + "labelledby", "Lehner", "Lemke", "Leuschke", diff --git a/stencil-workspace/src/components/modus-utility-panel/modus-utility-panel.scss b/stencil-workspace/src/components/modus-utility-panel/modus-utility-panel.scss index 3212d80dd..4f901ddaf 100644 --- a/stencil-workspace/src/components/modus-utility-panel/modus-utility-panel.scss +++ b/stencil-workspace/src/components/modus-utility-panel/modus-utility-panel.scss @@ -45,7 +45,7 @@ hr { border: none; - border-top: 1px solid #ccc; + border-top: 1px solid #cbcdd6; margin: 0; } } diff --git a/stencil-workspace/storybook/stories/components/modus-accordion/modus-accordion-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-accordion/modus-accordion-storybook-docs.mdx index 2d20dc389..1b02c02bb 100644 --- a/stencil-workspace/storybook/stories/components/modus-accordion/modus-accordion-storybook-docs.mdx +++ b/stencil-workspace/storybook/stories/components/modus-accordion/modus-accordion-storybook-docs.mdx @@ -33,9 +33,13 @@ The `` utilizes the slot element, allowing you to render y ### With Icon - Content - Content - + + Content + + + Content + + Content @@ -93,11 +97,12 @@ The `` utilizes the slot element, allowing you to render y | -------------------- | ----------------------------------------------- | --------- | ------------------------------ | --------------- | -------- | | `aria-label` | The accordion's aria-label | `string` | | | | | `disabled` | Disables the accordion item | `boolean` | | | | -| `expand-button-type` | The type of expand button | `string` | 'standardArrow' ,'circleArrow'| 'standardArrow' | | +| `expand-button-type` | The type of expand button | `string` | 'standardArrow' ,'circleArrow' | 'standardArrow' | | | `expanded` | The expanded state of the accordion item | `boolean` | | | | | `header-text` | The text to render in the accordion item header | `string` | | | | | `icon` | Takes the icon name and renders the icon | `string` | | | | | `size` | The size of the accordion item | `string` | 'condensed', 'standard' | 'standard' | | + ### DOM Events | Name | Description | Emits | diff --git a/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete-storybook-docs.mdx index a755a8366..6a87f0f25 100644 --- a/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete-storybook-docs.mdx +++ b/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete-storybook-docs.mdx @@ -185,8 +185,8 @@ interface ModusAutocompleteOption { ### Events -| Event | Description | Type | -| ---------------- | ---------------------------------------------------------------------------- | --------------------- | -| `optionSelected` | An event that fires when a dropdown option is selected. Emits the option id. | `CustomEvent` | -| `valueChange` | An event that fires when the input value changes. Emits the value string. | `CustomEvent` | +| Event | Description | Type | +| ------------------- | ----------------------------------------------------------------------------- | ----------------------- | +| `optionSelected` | An event that fires when a dropdown option is selected. Emits the option id. | `CustomEvent` | +| `valueChange` | An event that fires when the input value changes. Emits the value string. | `CustomEvent` | | `selectionsChanged` | An event that fires when an option is selected/removed. Emits the option ids. | `CustomEvent` | diff --git a/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete.stories.tsx b/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete.stories.tsx index f59c3ae3b..71f951a9c 100644 --- a/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete.stories.tsx +++ b/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete.stories.tsx @@ -36,7 +36,7 @@ export default { }, dropdownZIndex: { name: 'dropdown-z-index', - description: 'The dropdown\'s z-index', + description: "The dropdown's z-index", table: { defaultValue: { summary: '1' }, type: { summary: 'string' }, @@ -122,7 +122,7 @@ export default { table: { defaultValue: { summary: false }, type: { summary: 'boolean' }, - } + }, }, size: { control: { @@ -142,21 +142,18 @@ export default { }, }, multiple: { - description: "When enabled, multiple options can be selected in the component. And selected options are shown as chips in the input", + description: + 'When enabled, multiple options can be selected in the component. And selected options are shown as chips in the input', table: { defaultValue: { summary: false }, type: { summary: 'boolean' }, }, - } + }, }, parameters: { controls: { expanded: true, sort: 'requiredFirst' }, actions: { - handles: [ - 'valueChange', - 'optionSelected', - 'selectionsChanged' - ], + handles: ['valueChange', 'optionSelected', 'selectionsChanged'], }, docs: { inlineStories: true, @@ -218,8 +215,26 @@ const Template = ({ `; const defaultOptions = [ - 'Apple', 'Banana', 'Orange', 'Mango', 'Pineapple', 'Grapes', 'Watermelon', 'Strawberry', 'Blueberry', 'Raspberry', - 'Blackberry', 'Cherry', 'Peach', 'Pear', 'Plum', 'Kiwi', 'Lemon', 'Lime', 'Papaya', 'Passion Fruit' + 'Apple', + 'Banana', + 'Orange', + 'Mango', + 'Pineapple', + 'Grapes', + 'Watermelon', + 'Strawberry', + 'Blueberry', + 'Raspberry', + 'Blackberry', + 'Cherry', + 'Peach', + 'Pear', + 'Plum', + 'Kiwi', + 'Lemon', + 'Lime', + 'Papaya', + 'Passion Fruit', ]; const defaultArgs = { @@ -243,12 +258,12 @@ const defaultArgs = { size: 'medium', value: '', options: defaultOptions, -} +}; const customOptions = [ { id: 'ID0', value: 'Apple' }, { id: 'ID1', value: 'Banana' }, - { id: 'ID2', value: 'Orange' } + { id: 'ID2', value: 'Orange' }, ]; export const Default = Template.bind({}); @@ -258,7 +273,12 @@ export const WithOption = Template.bind({}); WithOption.args = { ...defaultArgs, label: 'Autocomplete using option model' }; export const MultipleSelection = Template.bind({}); -MultipleSelection.args = { ...defaultArgs, label: 'Autocomplete with multiple selection', multiple: true, options: customOptions }; +MultipleSelection.args = { + ...defaultArgs, + label: 'Autocomplete with multiple selection', + multiple: true, + options: customOptions, +}; export const WithCustomOption = ({ ariaLabel, @@ -334,4 +354,4 @@ WithCustomOption.args = { showOptionsOnFocus: false, size: 'medium', value: '', -} +}; diff --git a/stencil-workspace/storybook/stories/components/modus-pagination/modus-pagination-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-pagination/modus-pagination-storybook-docs.mdx index d35e00eb9..bad7e3c0b 100644 --- a/stencil-workspace/storybook/stories/components/modus-pagination/modus-pagination-storybook-docs.mdx +++ b/stencil-workspace/storybook/stories/components/modus-pagination/modus-pagination-storybook-docs.mdx @@ -43,15 +43,15 @@ import { Anchor } from '@storybook/addon-docs'; ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | ----------------------- | ----------------------------------------------------------------------------------- | -------- | ----------- | -------- | ---------- | -| `activePage` | `active-page` | The pagination's active page | `number` | `1` | -| `ariaLabel` | `aria-label` | The pagination's aria-label | `string` | `undefined` | -| `maxPage` | `max-page` | The pagination's maximum page | `number` | `undefined` | -| `minPage` | `min-page` | The pagination's minimum page | `number` | `undefined` | -| `nextPageButtonText` | `next-page-button-text` | (Optional) The previous page button text. If not set, an icon control will be used. | `string` | `undefined` | -| `prevPageButtonText` | `prev-page-button-text` | (Optional) The next page button text. If not set, an icon control will be used. | `string` | `undefined` | -| `size` | `size` | The pagination's size | `"large" | "medium" | "small"` | `'medium'` | +| Property | Attribute | Description | Type | Default | +| -------------------- | ----------------------- | ----------------------------------------------------------------------------------- | ---------------------------- | ----------- | +| `activePage` | `active-page` | The pagination's active page | `number` | `1` | +| `ariaLabel` | `aria-label` | The pagination's aria-label | `string` | `undefined` | +| `maxPage` | `max-page` | The pagination's maximum page | `number` | `undefined` | +| `minPage` | `min-page` | The pagination's minimum page | `number` | `undefined` | +| `nextPageButtonText` | `next-page-button-text` | (Optional) The previous page button text. If not set, an icon control will be used. | `string` | `undefined` | +| `prevPageButtonText` | `prev-page-button-text` | (Optional) The next page button text. If not set, an icon control will be used. | `string` | `undefined` | +| `size` | `size` | The pagination's size | `"large", "medium", "small"` | `'medium'` | ### DOM Events diff --git a/stencil-workspace/storybook/stories/components/modus-radio-group/modus-radio-group-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-radio-group/modus-radio-group-storybook-docs.mdx index d1ffd4db0..9fc74df21 100644 --- a/stencil-workspace/storybook/stories/components/modus-radio-group/modus-radio-group-storybook-docs.mdx +++ b/stencil-workspace/storybook/stories/components/modus-radio-group/modus-radio-group-storybook-docs.mdx @@ -46,13 +46,13 @@ A TypeScript typing has been provided named RadioButton defined as: ### Properties -| Name | Description | Type | Options | Default Value | Required | -| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ------------------ | ------------- | -------- | -| `checked-id` | The id of the checked radio button | `string` | | | ✔ | -| `name` | The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#defining_a_radio_group) of the radio group. Used to group individual radio elements into one group. | `string` | | | ✔ | -| `radioButtons` | The radio buttons | `RadioButton[]` | | | ✔ | -| `aria-label` | The radio group's aria-label | `string` | | | | -| `size` | The radio group's size | `string` | "small","medium" | "medium" | | +| Name | Description | Type | Options | Default Value | Required | +| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | ---------------- | ------------- | -------- | +| `checked-id` | The id of the checked radio button | `string` | | | ✔ | +| `name` | The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#defining_a_radio_group) of the radio group. Used to group individual radio elements into one group. | `string` | | | ✔ | +| `radioButtons` | The radio buttons | `RadioButton[]` | | | ✔ | +| `aria-label` | The radio group's aria-label | `string` | | | | +| `size` | The radio group's size | `string` | "small","medium" | "medium" | | ### DOM Events diff --git a/stencil-workspace/storybook/stories/components/modus-text-input/modus-text-input-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-text-input/modus-text-input-storybook-docs.mdx index 2a16271e3..1b15d63f7 100644 --- a/stencil-workspace/storybook/stories/components/modus-text-input/modus-text-input-storybook-docs.mdx +++ b/stencil-workspace/storybook/stories/components/modus-text-input/modus-text-input-storybook-docs.mdx @@ -25,15 +25,8 @@ This component is compatible with Angular reactive forms. This can be achieved t ```html - - + + - - + + ``` ### Properties -| Property | Attribute | Description | Type | Default | -| --------------------------- | ------------------------------ | -------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | ----------- | -| `ariaLabel` | `aria-label` | (optional) The input's aria-label. | `string` | `undefined` | -| `autoFocusInput` | `auto-focus-input` | (optional) Sets autofocus on the input. | `boolean` | `undefined` | -| `autocapitalize` | `autocapitalize` | (optional) Capitalization behavior when using a non-traditional keyboard (e.g. microphone, touch screen). | `"none", "off", "sentences", "on", "words", "characters"` | `undefined` | -| `autocorrect ` | `autocorrect` | (optional) Whether to activate automatic correction while the user is editing this field in Safari. | `boolean, "off", "on"` | `undefined` | -| `autocomplete` | `autocomplete` | (optional) Sets autocomplete on the input. | `string` | `undefined` | -| `clearable` | `clearable` | (optional) Whether the input has a clear button. | `boolean` | `false` | -| `disabled` | `disabled` | (optional) Whether the input is disabled. | `boolean` | `undefined` | -| `enterkeyhint` | `enterkeyhint` | (optional) Which action label to present for the enter key on virtual keyboards. | `"enter", "done", "go", "next", "previous", "search", "send"` | `undefined` | -| `errorText` | `error-text` | (optional) The input's error state text. | `string` | `undefined` | -| `helperText` | `helper-text` | (optional) The input's helper text displayed below the input. | `string` | `undefined` | -| `includeErrorIcon` | `include-error-icon` | (optional) Whether the error icon is included. | `boolean` | `undefined` | -| `includePasswordTextToggle` | `include-password-text-toggle` | (optional) Whether the password text toggle icon is included. | `boolean` | `true` | -| `includeSearchIcon` | `include-search-icon` | (optional) Whether the search icon is included. | `boolean` | `undefined` | -| `inputmode` | `inputmode` | (optional) The input's inputmode. | `"decimal", "email", "numeric", "search", "tel", "text", "url"` | `undefined` | -| `label` | `label` | (optional) The input's label. | `string` | `undefined` | -| `maxLength` | `max-length` | (optional) The input's maximum length. | `number` | `undefined` | -| `minLength` | `min-length` | (optional) The input's minimum length. | `number` | `undefined` | -| `pattern` | `pattern` | (optional) The input's HTML5 pattern. | `string` | `undefined` | -| `placeholder` | `placeholder` | (optional) The input's placeholder text. | `string` | `undefined` | -| `readOnly` | `read-only` | (optional) Whether the input's content is read-only | `boolean` | `undefined` | -| `required` | `required` | (optional) Whether the input is required. | `boolean` | `undefined` | -| `size` | `size` | (optional) The input's size. | `"large", "medium"` | `'medium'` | -| `spellcheck` | `spellcheck` | (optional) Whether to enable spell checking. | `boolean` | `false` | -| `textAlign` | `text-align` | (optional) The input's text alignment. | `"left", "right"` | `'left'` | -| `type` | `type` | (optional) The input's type. | `"password", "text"` | `'text'` | -| `validText` | `valid-text` | (optional) The input's valid state text. | `string` | `undefined` | -| `value` | `value` | (optional) The input's value. | +| Property | Attribute | Description | Type | Default | +| --------------------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------- | +| `ariaLabel` | `aria-label` | (optional) The input's aria-label. | `string` | `undefined` | +| `autoFocusInput` | `auto-focus-input` | (optional) Sets autofocus on the input. | `boolean` | `undefined` | +| `autocapitalize` | `autocapitalize` | (optional) Capitalization behavior when using a non-traditional keyboard (e.g. microphone, touch screen). | `"none", "off", "sentences", "on", "words", "characters"` | `undefined` | +| `autocorrect ` | `autocorrect` | (optional) Whether to activate automatic correction while the user is editing this field in Safari. | `boolean, "off", "on"` | `undefined` | +| `autocomplete` | `autocomplete` | (optional) Sets autocomplete on the input. | `string` | `undefined` | +| `clearable` | `clearable` | (optional) Whether the input has a clear button. | `boolean` | `false` | +| `disabled` | `disabled` | (optional) Whether the input is disabled. | `boolean` | `undefined` | +| `enterkeyhint` | `enterkeyhint` | (optional) Which action label to present for the enter key on virtual keyboards. | `"enter", "done", "go", "next", "previous", "search", "send"` | `undefined` | +| `errorText` | `error-text` | (optional) The input's error state text. | `string` | `undefined` | +| `helperText` | `helper-text` | (optional) The input's helper text displayed below the input. | `string` | `undefined` | +| `includeErrorIcon` | `include-error-icon` | (optional) Whether the error icon is included. | `boolean` | `undefined` | +| `includePasswordTextToggle` | `include-password-text-toggle` | (optional) Whether the password text toggle icon is included. | `boolean` | `true` | +| `includeSearchIcon` | `include-search-icon` | (optional) Whether the search icon is included. | `boolean` | `undefined` | +| `inputmode` | `inputmode` | (optional) The input's inputmode. | `"decimal", "email", "numeric", "search", "tel", "text", "url"` | `undefined` | +| `label` | `label` | (optional) The input's label. | `string` | `undefined` | +| `maxLength` | `max-length` | (optional) The input's maximum length. | `number` | `undefined` | +| `minLength` | `min-length` | (optional) The input's minimum length. | `number` | `undefined` | +| `pattern` | `pattern` | (optional) The input's HTML5 pattern. | `string` | `undefined` | +| `placeholder` | `placeholder` | (optional) The input's placeholder text. | `string` | `undefined` | +| `readOnly` | `read-only` | (optional) Whether the input's content is read-only | `boolean` | `undefined` | +| `required` | `required` | (optional) Whether the input is required. | `boolean` | `undefined` | +| `size` | `size` | (optional) The input's size. | `"large", "medium"` | `'medium'` | +| `spellcheck` | `spellcheck` | (optional) Whether to enable spell checking. | `boolean` | `false` | +| `textAlign` | `text-align` | (optional) The input's text alignment. | `"left", "right"` | `'left'` | +| `type` | `type` | (optional) The input's type. | `"email", "password", "search", "text", "url"` | `'text'` | +| `validText` | `valid-text` | (optional) The input's valid state text. | `string` | `undefined` | +| `value` | `value` | (optional) The input's value. | ### DOM Events From dda83583b9cd80698069e3139f7c9387b275b520 Mon Sep 17 00:00:00 2001 From: Prashanth Suriyanarayanan <105703924+prashanth-offcl@users.noreply.github.com> Date: Sat, 29 Jun 2024 06:48:59 +0530 Subject: [PATCH 22/24] Fix Angular build compilation error (#2659) --- stencil-workspace/src/interfaces.d.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/stencil-workspace/src/interfaces.d.ts b/stencil-workspace/src/interfaces.d.ts index 857834bfb..05ef3ea66 100644 --- a/stencil-workspace/src/interfaces.d.ts +++ b/stencil-workspace/src/interfaces.d.ts @@ -1,5 +1,6 @@ export { Components, JSX } from './components'; export { Crumb } from './components/modus-breadcrumb/modus-breadcrumb'; +export { TreeViewItemInfo } from './components/modus-content-tree/modus-content-tree.types'; export { ModusNavbarApp } from './components/modus-navbar/apps-menu/modus-navbar-apps-menu'; export * from './components/modus-data-table/modus-data-table.models'; export { ModusAutocompleteOption } from './components/modus-autocomplete/modus-autocomplete'; @@ -13,6 +14,7 @@ export { ModusNavbarLogo, ModusNavbarLogoOptions, ModusNavbarButton, + ModusNavbarDropdownItem, } from './components/modus-navbar/modus-navbar.models'; export * from './components/modus-table/models/modus-table.models'; export { ModusSentimentScaleType } from './components/modus-sentiment-scale/modus-sentiment-scale.models'; From 5576df3337adb2e60fd236cb61ff93b5eccce66a Mon Sep 17 00:00:00 2001 From: Christian Oliff Date: Sat, 29 Jun 2024 10:43:18 +0900 Subject: [PATCH 23/24] Release v0.33.1 (#2662) --- stencil-workspace/package-lock.json | 4 ++-- stencil-workspace/package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/stencil-workspace/package-lock.json b/stencil-workspace/package-lock.json index 4b15f3550..7d6143352 100644 --- a/stencil-workspace/package-lock.json +++ b/stencil-workspace/package-lock.json @@ -1,12 +1,12 @@ { "name": "@trimble-oss/modus-web-components", - "version": "0.33.0", + "version": "0.33.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@trimble-oss/modus-web-components", - "version": "0.33.0", + "version": "0.33.1", "license": "MIT", "dependencies": { "@popperjs/core": "^2.11.8", diff --git a/stencil-workspace/package.json b/stencil-workspace/package.json index a9ced3092..0b5b3ba1c 100644 --- a/stencil-workspace/package.json +++ b/stencil-workspace/package.json @@ -1,6 +1,6 @@ { "name": "@trimble-oss/modus-web-components", - "version": "0.33.0", + "version": "0.33.1", "description": "Trimble Modus Web Component Library", "homepage": "https://modus-web-components.trimble.com/", "bugs": { From 42ba23afc023f2c4dbaa2d463ae6c69a3ad68378 Mon Sep 17 00:00:00 2001 From: Christian Oliff Date: Sat, 29 Jun 2024 11:04:55 +0900 Subject: [PATCH 24/24] Release v0.33.1 ng & React (#2663) --- .../package-lock.json | 18 +++++------ .../modus-angular-components/package.json | 4 +-- .../package-lock.json | 18 +++++------ .../modus-angular-components/package.json | 4 +-- .../package-lock.json | 18 +++++------ .../modus-angular-components/package.json | 4 +-- .../package-lock.json | 18 +++++------ .../modus-angular-components/package.json | 4 +-- .../test-web-components/package-lock.json | 16 +++++----- .../test-web-components/package.json | 2 +- react-workspace/react-17/package-lock.json | 18 +++++------ react-workspace/react-17/package.json | 4 +-- react-workspace/react-18/package-lock.json | 18 +++++------ react-workspace/react-18/package.json | 4 +-- .../test-web-components/package-lock.json | 30 +++++++++---------- .../test-web-components/package.json | 2 +- 16 files changed, 91 insertions(+), 91 deletions(-) diff --git a/angular-workspace/ng14/projects/trimble-oss/modus-angular-components/package-lock.json b/angular-workspace/ng14/projects/trimble-oss/modus-angular-components/package-lock.json index bfad81d3e..992fc2014 100644 --- a/angular-workspace/ng14/projects/trimble-oss/modus-angular-components/package-lock.json +++ b/angular-workspace/ng14/projects/trimble-oss/modus-angular-components/package-lock.json @@ -1,12 +1,12 @@ { "name": "@trimble-oss/modus-angular-components", - "version": "0.33.0-ng14", + "version": "0.33.1-ng14", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@trimble-oss/modus-angular-components", - "version": "0.33.0-ng14", + "version": "0.33.1-ng14", "license": "MIT", "dependencies": { "tslib": "^2.5.3" @@ -17,7 +17,7 @@ "peerDependencies": { "@angular/common": "^14.1.1", "@angular/core": "^14.1.1", - "@trimble-oss/modus-web-components": "0.33.0" + "@trimble-oss/modus-web-components": "0.33.1" } }, "node_modules/@angular/common": { @@ -89,9 +89,9 @@ } }, "node_modules/@trimble-oss/modus-web-components": { - "version": "0.33.0", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.33.0.tgz", - "integrity": "sha512-gCbtCoheN2/SAzOFruh9afBnzmNlyfHlbbWEwE7VBMhYnF7MwZgZZ9n54ROAI1sArcHMNsCd94Ce2FIerLqhiQ==", + "version": "0.33.1", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.33.1.tgz", + "integrity": "sha512-p+bqmYcCOLDK7zXYOjsQgVuAOsK/75BFAm2wckLAbYC4IMVi0vvrEi5/FuQ0FZnE5/T1o5HkaHGFRPihJ423cw==", "peer": true, "dependencies": { "@popperjs/core": "^2.11.8", @@ -165,9 +165,9 @@ "peer": true }, "@trimble-oss/modus-web-components": { - "version": "0.33.0", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.33.0.tgz", - "integrity": "sha512-gCbtCoheN2/SAzOFruh9afBnzmNlyfHlbbWEwE7VBMhYnF7MwZgZZ9n54ROAI1sArcHMNsCd94Ce2FIerLqhiQ==", + "version": "0.33.1", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.33.1.tgz", + "integrity": "sha512-p+bqmYcCOLDK7zXYOjsQgVuAOsK/75BFAm2wckLAbYC4IMVi0vvrEi5/FuQ0FZnE5/T1o5HkaHGFRPihJ423cw==", "peer": true, "requires": { "@popperjs/core": "^2.11.8", diff --git a/angular-workspace/ng14/projects/trimble-oss/modus-angular-components/package.json b/angular-workspace/ng14/projects/trimble-oss/modus-angular-components/package.json index e7095a57d..c06e11362 100644 --- a/angular-workspace/ng14/projects/trimble-oss/modus-angular-components/package.json +++ b/angular-workspace/ng14/projects/trimble-oss/modus-angular-components/package.json @@ -1,6 +1,6 @@ { "name": "@trimble-oss/modus-angular-components", - "version": "0.33.0-ng14", + "version": "0.33.1-ng14", "license": "MIT", "description": "Trimble Modus Angular Components Library", "homepage": "https://modus-web-components.trimble.com/", @@ -14,7 +14,7 @@ "peerDependencies": { "@angular/common": "^14.1.1", "@angular/core": "^14.1.1", - "@trimble-oss/modus-web-components": "0.33.0" + "@trimble-oss/modus-web-components": "0.33.1" }, "dependencies": { "tslib": "^2.5.3" diff --git a/angular-workspace/ng15/projects/trimble-oss/modus-angular-components/package-lock.json b/angular-workspace/ng15/projects/trimble-oss/modus-angular-components/package-lock.json index 90e4b7e54..a0e7e86f7 100644 --- a/angular-workspace/ng15/projects/trimble-oss/modus-angular-components/package-lock.json +++ b/angular-workspace/ng15/projects/trimble-oss/modus-angular-components/package-lock.json @@ -1,12 +1,12 @@ { "name": "@trimble-oss/modus-angular-components", - "version": "0.33.0-ng15", + "version": "0.33.1-ng15", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@trimble-oss/modus-angular-components", - "version": "0.33.0-ng15", + "version": "0.33.1-ng15", "license": "MIT", "dependencies": { "tslib": "^2.5.3" @@ -17,7 +17,7 @@ "peerDependencies": { "@angular/common": "^15.2.9", "@angular/core": "^15.2.9", - "@trimble-oss/modus-web-components": "0.33.0" + "@trimble-oss/modus-web-components": "0.33.1" } }, "node_modules/@angular/common": { @@ -89,9 +89,9 @@ } }, "node_modules/@trimble-oss/modus-web-components": { - "version": "0.33.0", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.33.0.tgz", - "integrity": "sha512-gCbtCoheN2/SAzOFruh9afBnzmNlyfHlbbWEwE7VBMhYnF7MwZgZZ9n54ROAI1sArcHMNsCd94Ce2FIerLqhiQ==", + "version": "0.33.1", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.33.1.tgz", + "integrity": "sha512-p+bqmYcCOLDK7zXYOjsQgVuAOsK/75BFAm2wckLAbYC4IMVi0vvrEi5/FuQ0FZnE5/T1o5HkaHGFRPihJ423cw==", "peer": true, "dependencies": { "@popperjs/core": "^2.11.8", @@ -165,9 +165,9 @@ "peer": true }, "@trimble-oss/modus-web-components": { - "version": "0.33.0", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.33.0.tgz", - "integrity": "sha512-gCbtCoheN2/SAzOFruh9afBnzmNlyfHlbbWEwE7VBMhYnF7MwZgZZ9n54ROAI1sArcHMNsCd94Ce2FIerLqhiQ==", + "version": "0.33.1", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.33.1.tgz", + "integrity": "sha512-p+bqmYcCOLDK7zXYOjsQgVuAOsK/75BFAm2wckLAbYC4IMVi0vvrEi5/FuQ0FZnE5/T1o5HkaHGFRPihJ423cw==", "peer": true, "requires": { "@popperjs/core": "^2.11.8", diff --git a/angular-workspace/ng15/projects/trimble-oss/modus-angular-components/package.json b/angular-workspace/ng15/projects/trimble-oss/modus-angular-components/package.json index 36bff3d71..7592a1d86 100644 --- a/angular-workspace/ng15/projects/trimble-oss/modus-angular-components/package.json +++ b/angular-workspace/ng15/projects/trimble-oss/modus-angular-components/package.json @@ -1,6 +1,6 @@ { "name": "@trimble-oss/modus-angular-components", - "version": "0.33.0-ng15", + "version": "0.33.1-ng15", "license": "MIT", "description": "Trimble Modus Angular Components Library", "homepage": "https://modus-web-components.trimble.com/", @@ -14,7 +14,7 @@ "peerDependencies": { "@angular/common": "^15.2.9", "@angular/core": "^15.2.9", - "@trimble-oss/modus-web-components": "0.33.0" + "@trimble-oss/modus-web-components": "0.33.1" }, "dependencies": { "tslib": "^2.5.3" diff --git a/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/package-lock.json b/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/package-lock.json index 9798b5f5c..2bf339a40 100644 --- a/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/package-lock.json +++ b/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/package-lock.json @@ -1,12 +1,12 @@ { "name": "@trimble-oss/modus-angular-components", - "version": "0.33.0-ng16", + "version": "0.33.1-ng16", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@trimble-oss/modus-angular-components", - "version": "0.33.0-ng16", + "version": "0.33.1-ng16", "license": "MIT", "dependencies": { "tslib": "^2.5.3" @@ -17,7 +17,7 @@ "peerDependencies": { "@angular/common": "^16.1.7", "@angular/core": "^16.1.7", - "@trimble-oss/modus-web-components": "0.33.0" + "@trimble-oss/modus-web-components": "0.33.1" } }, "node_modules/@angular/common": { @@ -89,9 +89,9 @@ } }, "node_modules/@trimble-oss/modus-web-components": { - "version": "0.33.0", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.33.0.tgz", - "integrity": "sha512-gCbtCoheN2/SAzOFruh9afBnzmNlyfHlbbWEwE7VBMhYnF7MwZgZZ9n54ROAI1sArcHMNsCd94Ce2FIerLqhiQ==", + "version": "0.33.1", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.33.1.tgz", + "integrity": "sha512-p+bqmYcCOLDK7zXYOjsQgVuAOsK/75BFAm2wckLAbYC4IMVi0vvrEi5/FuQ0FZnE5/T1o5HkaHGFRPihJ423cw==", "peer": true, "dependencies": { "@popperjs/core": "^2.11.8", @@ -165,9 +165,9 @@ "peer": true }, "@trimble-oss/modus-web-components": { - "version": "0.33.0", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.33.0.tgz", - "integrity": "sha512-gCbtCoheN2/SAzOFruh9afBnzmNlyfHlbbWEwE7VBMhYnF7MwZgZZ9n54ROAI1sArcHMNsCd94Ce2FIerLqhiQ==", + "version": "0.33.1", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.33.1.tgz", + "integrity": "sha512-p+bqmYcCOLDK7zXYOjsQgVuAOsK/75BFAm2wckLAbYC4IMVi0vvrEi5/FuQ0FZnE5/T1o5HkaHGFRPihJ423cw==", "peer": true, "requires": { "@popperjs/core": "^2.11.8", diff --git a/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/package.json b/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/package.json index 89ceb3ab3..a15acbbd2 100644 --- a/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/package.json +++ b/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/package.json @@ -1,6 +1,6 @@ { "name": "@trimble-oss/modus-angular-components", - "version": "0.33.0-ng16", + "version": "0.33.1-ng16", "license": "MIT", "description": "Trimble Modus Angular Components Library", "homepage": "https://modus-web-components.trimble.com/", @@ -14,7 +14,7 @@ "peerDependencies": { "@angular/common": "^16.1.7", "@angular/core": "^16.1.7", - "@trimble-oss/modus-web-components": "0.33.0" + "@trimble-oss/modus-web-components": "0.33.1" }, "dependencies": { "tslib": "^2.5.3" diff --git a/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/package-lock.json b/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/package-lock.json index f6f36a466..ccbcdb708 100644 --- a/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/package-lock.json +++ b/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/package-lock.json @@ -1,12 +1,12 @@ { "name": "@trimble-oss/modus-angular-components", - "version": "0.33.0-ng17", + "version": "0.33.1-ng17", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@trimble-oss/modus-angular-components", - "version": "0.33.0-ng17", + "version": "0.33.1-ng17", "license": "MIT", "dependencies": { "tslib": "^2.5.3" @@ -17,7 +17,7 @@ "peerDependencies": { "@angular/common": "^17.2.2", "@angular/core": "^17.2.2", - "@trimble-oss/modus-web-components": "0.33.0" + "@trimble-oss/modus-web-components": "0.33.1" } }, "node_modules/@angular/common": { @@ -89,9 +89,9 @@ } }, "node_modules/@trimble-oss/modus-web-components": { - "version": "0.33.0", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.33.0.tgz", - "integrity": "sha512-gCbtCoheN2/SAzOFruh9afBnzmNlyfHlbbWEwE7VBMhYnF7MwZgZZ9n54ROAI1sArcHMNsCd94Ce2FIerLqhiQ==", + "version": "0.33.1", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.33.1.tgz", + "integrity": "sha512-p+bqmYcCOLDK7zXYOjsQgVuAOsK/75BFAm2wckLAbYC4IMVi0vvrEi5/FuQ0FZnE5/T1o5HkaHGFRPihJ423cw==", "peer": true, "dependencies": { "@popperjs/core": "^2.11.8", @@ -162,9 +162,9 @@ "peer": true }, "@trimble-oss/modus-web-components": { - "version": "0.33.0", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.33.0.tgz", - "integrity": "sha512-gCbtCoheN2/SAzOFruh9afBnzmNlyfHlbbWEwE7VBMhYnF7MwZgZZ9n54ROAI1sArcHMNsCd94Ce2FIerLqhiQ==", + "version": "0.33.1", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.33.1.tgz", + "integrity": "sha512-p+bqmYcCOLDK7zXYOjsQgVuAOsK/75BFAm2wckLAbYC4IMVi0vvrEi5/FuQ0FZnE5/T1o5HkaHGFRPihJ423cw==", "peer": true, "requires": { "@popperjs/core": "^2.11.8", diff --git a/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/package.json b/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/package.json index 6cd2bbaa4..21b632042 100644 --- a/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/package.json +++ b/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/package.json @@ -1,6 +1,6 @@ { "name": "@trimble-oss/modus-angular-components", - "version": "0.33.0-ng17", + "version": "0.33.1-ng17", "license": "MIT", "description": "Trimble Modus Angular Components Library", "homepage": "https://modus-web-components.trimble.com/", @@ -14,7 +14,7 @@ "peerDependencies": { "@angular/common": "^17.2.2", "@angular/core": "^17.2.2", - "@trimble-oss/modus-web-components": "0.33.0" + "@trimble-oss/modus-web-components": "0.33.1" }, "dependencies": { "tslib": "^2.5.3" diff --git a/angular-workspace/test-web-components/package-lock.json b/angular-workspace/test-web-components/package-lock.json index 7269bd290..cf7c25175 100644 --- a/angular-workspace/test-web-components/package-lock.json +++ b/angular-workspace/test-web-components/package-lock.json @@ -16,7 +16,7 @@ "@angular/platform-browser": "^15.2.9", "@angular/platform-browser-dynamic": "^15.2.9", "@angular/router": "^15.2.9", - "@trimble-oss/modus-web-components": "0.20.0", + "@trimble-oss/modus-web-components": "0.33.1", "rxjs": "~7.8.1", "tslib": "^2.5.3", "zone.js": "~0.12.0" @@ -3527,9 +3527,9 @@ } }, "node_modules/@tanstack/table-core": { - "version": "8.13.2", - "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.13.2.tgz", - "integrity": "sha512-/2saD1lWBUV6/uNAwrsg2tw58uvMJ07bO2F1IWMxjFRkJiXKQRuc3Oq2aufeobD3873+4oIM/DRySIw7+QsPPw==", + "version": "8.17.3", + "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.17.3.tgz", + "integrity": "sha512-mPBodDGVL+fl6d90wUREepHa/7lhsghg2A3vFpakEhrhtbIlgNAZiMr7ccTgak5qbHqF14Fwy+W1yFWQt+WmYQ==", "engines": { "node": ">=12" }, @@ -3548,13 +3548,13 @@ } }, "node_modules/@trimble-oss/modus-web-components": { - "version": "0.20.0", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.20.0.tgz", - "integrity": "sha512-MLw9sp1h8uudMQ5GpFGg3zEv6FbcLTwDjX555AVL8KGTSBS32vE7WCFKYrSehRbE0Bb5MN3qNEsJ49OeHAlQRg==", + "version": "0.33.1", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.33.1.tgz", + "integrity": "sha512-p+bqmYcCOLDK7zXYOjsQgVuAOsK/75BFAm2wckLAbYC4IMVi0vvrEi5/FuQ0FZnE5/T1o5HkaHGFRPihJ423cw==", "dependencies": { "@popperjs/core": "^2.11.8", "@stencil/core": "^4.12.4", - "@tanstack/table-core": "^8.11.6" + "@tanstack/table-core": "^8.17.3" }, "engines": { "node": ">=16", diff --git a/angular-workspace/test-web-components/package.json b/angular-workspace/test-web-components/package.json index d1acab44e..e5cc77697 100644 --- a/angular-workspace/test-web-components/package.json +++ b/angular-workspace/test-web-components/package.json @@ -19,7 +19,7 @@ "@angular/platform-browser": "^15.2.9", "@angular/platform-browser-dynamic": "^15.2.9", "@angular/router": "^15.2.9", - "@trimble-oss/modus-web-components": "0.20.0", + "@trimble-oss/modus-web-components": "0.33.1", "rxjs": "~7.8.1", "tslib": "^2.5.3", "zone.js": "~0.12.0" diff --git a/react-workspace/react-17/package-lock.json b/react-workspace/react-17/package-lock.json index f0821397e..5bfb69a93 100644 --- a/react-workspace/react-17/package-lock.json +++ b/react-workspace/react-17/package-lock.json @@ -1,15 +1,15 @@ { "name": "@trimble-oss/modus-react-components", - "version": "0.33.0-react17", + "version": "0.33.1-react17", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@trimble-oss/modus-react-components", - "version": "0.33.0-react17", + "version": "0.33.1-react17", "license": "MIT", "dependencies": { - "@trimble-oss/modus-web-components": "0.33.0" + "@trimble-oss/modus-web-components": "0.33.1" }, "devDependencies": { "@types/jest": "23.3.9", @@ -1066,9 +1066,9 @@ } }, "node_modules/@trimble-oss/modus-web-components": { - "version": "0.33.0", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.33.0.tgz", - "integrity": "sha512-gCbtCoheN2/SAzOFruh9afBnzmNlyfHlbbWEwE7VBMhYnF7MwZgZZ9n54ROAI1sArcHMNsCd94Ce2FIerLqhiQ==", + "version": "0.33.1", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.33.1.tgz", + "integrity": "sha512-p+bqmYcCOLDK7zXYOjsQgVuAOsK/75BFAm2wckLAbYC4IMVi0vvrEi5/FuQ0FZnE5/T1o5HkaHGFRPihJ423cw==", "dependencies": { "@popperjs/core": "^2.11.8", "@stencil/core": "^4.12.4", @@ -4980,9 +4980,9 @@ "integrity": "sha512-mPBodDGVL+fl6d90wUREepHa/7lhsghg2A3vFpakEhrhtbIlgNAZiMr7ccTgak5qbHqF14Fwy+W1yFWQt+WmYQ==" }, "@trimble-oss/modus-web-components": { - "version": "0.33.0", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.33.0.tgz", - "integrity": "sha512-gCbtCoheN2/SAzOFruh9afBnzmNlyfHlbbWEwE7VBMhYnF7MwZgZZ9n54ROAI1sArcHMNsCd94Ce2FIerLqhiQ==", + "version": "0.33.1", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.33.1.tgz", + "integrity": "sha512-p+bqmYcCOLDK7zXYOjsQgVuAOsK/75BFAm2wckLAbYC4IMVi0vvrEi5/FuQ0FZnE5/T1o5HkaHGFRPihJ423cw==", "requires": { "@popperjs/core": "^2.11.8", "@stencil/core": "^4.12.4", diff --git a/react-workspace/react-17/package.json b/react-workspace/react-17/package.json index 10ca0cc3b..90907e526 100644 --- a/react-workspace/react-17/package.json +++ b/react-workspace/react-17/package.json @@ -1,6 +1,6 @@ { "name": "@trimble-oss/modus-react-components", - "version": "0.33.0-react17", + "version": "0.33.1-react17", "description": "Trimble Modus React Component Library", "homepage": "https://modus-web-components.trimble.com/", "bugs": { @@ -33,7 +33,7 @@ ] }, "dependencies": { - "@trimble-oss/modus-web-components": "0.33.0" + "@trimble-oss/modus-web-components": "0.33.1" }, "devDependencies": { "@types/jest": "23.3.9", diff --git a/react-workspace/react-18/package-lock.json b/react-workspace/react-18/package-lock.json index b71f1649b..b81eb913d 100644 --- a/react-workspace/react-18/package-lock.json +++ b/react-workspace/react-18/package-lock.json @@ -1,15 +1,15 @@ { "name": "@trimble-oss/modus-react-components", - "version": "0.33.0-react18", + "version": "0.33.1-react18", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@trimble-oss/modus-react-components", - "version": "0.33.0-react18", + "version": "0.33.1-react18", "license": "MIT", "dependencies": { - "@trimble-oss/modus-web-components": "0.32.0" + "@trimble-oss/modus-web-components": "0.33.1" }, "devDependencies": { "@types/jest": "23.3.14", @@ -1066,9 +1066,9 @@ } }, "node_modules/@trimble-oss/modus-web-components": { - "version": "0.32.0", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.32.0.tgz", - "integrity": "sha512-zlrATNcSaYrVqGdQYkObSXy/IQXiYTcouiLtX5ylnInqDabog9KYnxnr1fAjBYteiYYWCe1ElIBj1kEXwphe5w==", + "version": "0.33.1", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.33.1.tgz", + "integrity": "sha512-p+bqmYcCOLDK7zXYOjsQgVuAOsK/75BFAm2wckLAbYC4IMVi0vvrEi5/FuQ0FZnE5/T1o5HkaHGFRPihJ423cw==", "dependencies": { "@popperjs/core": "^2.11.8", "@stencil/core": "^4.12.4", @@ -4968,9 +4968,9 @@ "integrity": "sha512-mPBodDGVL+fl6d90wUREepHa/7lhsghg2A3vFpakEhrhtbIlgNAZiMr7ccTgak5qbHqF14Fwy+W1yFWQt+WmYQ==" }, "@trimble-oss/modus-web-components": { - "version": "0.32.0", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.32.0.tgz", - "integrity": "sha512-zlrATNcSaYrVqGdQYkObSXy/IQXiYTcouiLtX5ylnInqDabog9KYnxnr1fAjBYteiYYWCe1ElIBj1kEXwphe5w==", + "version": "0.33.1", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.33.1.tgz", + "integrity": "sha512-p+bqmYcCOLDK7zXYOjsQgVuAOsK/75BFAm2wckLAbYC4IMVi0vvrEi5/FuQ0FZnE5/T1o5HkaHGFRPihJ423cw==", "requires": { "@popperjs/core": "^2.11.8", "@stencil/core": "^4.12.4", diff --git a/react-workspace/react-18/package.json b/react-workspace/react-18/package.json index c85c6e4a6..4a9de843e 100644 --- a/react-workspace/react-18/package.json +++ b/react-workspace/react-18/package.json @@ -1,6 +1,6 @@ { "name": "@trimble-oss/modus-react-components", - "version": "0.33.0-react18", + "version": "0.33.1-react18", "description": "Trimble Modus React Component Library", "homepage": "https://modus-web-components.trimble.com/", "bugs": { @@ -33,7 +33,7 @@ ] }, "dependencies": { - "@trimble-oss/modus-web-components": "0.32.0" + "@trimble-oss/modus-web-components": "0.33.1" }, "devDependencies": { "@types/jest": "23.3.14", diff --git a/react-workspace/test-web-components/package-lock.json b/react-workspace/test-web-components/package-lock.json index baca69bdf..f9a2e58d1 100644 --- a/react-workspace/test-web-components/package-lock.json +++ b/react-workspace/test-web-components/package-lock.json @@ -11,7 +11,7 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", - "@trimble-oss/modus-web-components": "^0.20.0", + "@trimble-oss/modus-web-components": "^0.33.1", "@types/jest": "^27.5.2", "@types/node": "^16.18.48", "@types/react": "^18.2.33", @@ -3571,9 +3571,9 @@ } }, "node_modules/@tanstack/table-core": { - "version": "8.13.2", - "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.13.2.tgz", - "integrity": "sha512-/2saD1lWBUV6/uNAwrsg2tw58uvMJ07bO2F1IWMxjFRkJiXKQRuc3Oq2aufeobD3873+4oIM/DRySIw7+QsPPw==", + "version": "8.17.3", + "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.17.3.tgz", + "integrity": "sha512-mPBodDGVL+fl6d90wUREepHa/7lhsghg2A3vFpakEhrhtbIlgNAZiMr7ccTgak5qbHqF14Fwy+W1yFWQt+WmYQ==", "engines": { "node": ">=12" }, @@ -3893,13 +3893,13 @@ } }, "node_modules/@trimble-oss/modus-web-components": { - "version": "0.20.0", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.20.0.tgz", - "integrity": "sha512-MLw9sp1h8uudMQ5GpFGg3zEv6FbcLTwDjX555AVL8KGTSBS32vE7WCFKYrSehRbE0Bb5MN3qNEsJ49OeHAlQRg==", + "version": "0.33.1", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.33.1.tgz", + "integrity": "sha512-p+bqmYcCOLDK7zXYOjsQgVuAOsK/75BFAm2wckLAbYC4IMVi0vvrEi5/FuQ0FZnE5/T1o5HkaHGFRPihJ423cw==", "dependencies": { "@popperjs/core": "^2.11.8", "@stencil/core": "^4.12.4", - "@tanstack/table-core": "^8.11.6" + "@tanstack/table-core": "^8.17.3" }, "engines": { "node": ">=16", @@ -19938,9 +19938,9 @@ } }, "@tanstack/table-core": { - "version": "8.13.2", - "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.13.2.tgz", - "integrity": "sha512-/2saD1lWBUV6/uNAwrsg2tw58uvMJ07bO2F1IWMxjFRkJiXKQRuc3Oq2aufeobD3873+4oIM/DRySIw7+QsPPw==" + "version": "8.17.3", + "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.17.3.tgz", + "integrity": "sha512-mPBodDGVL+fl6d90wUREepHa/7lhsghg2A3vFpakEhrhtbIlgNAZiMr7ccTgak5qbHqF14Fwy+W1yFWQt+WmYQ==" }, "@testing-library/dom": { "version": "9.3.1", @@ -20171,13 +20171,13 @@ "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==" }, "@trimble-oss/modus-web-components": { - "version": "0.20.0", - "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.20.0.tgz", - "integrity": "sha512-MLw9sp1h8uudMQ5GpFGg3zEv6FbcLTwDjX555AVL8KGTSBS32vE7WCFKYrSehRbE0Bb5MN3qNEsJ49OeHAlQRg==", + "version": "0.33.1", + "resolved": "https://registry.npmjs.org/@trimble-oss/modus-web-components/-/modus-web-components-0.33.1.tgz", + "integrity": "sha512-p+bqmYcCOLDK7zXYOjsQgVuAOsK/75BFAm2wckLAbYC4IMVi0vvrEi5/FuQ0FZnE5/T1o5HkaHGFRPihJ423cw==", "requires": { "@popperjs/core": "^2.11.8", "@stencil/core": "^4.12.4", - "@tanstack/table-core": "^8.11.6" + "@tanstack/table-core": "^8.17.3" } }, "@trysound/sax": { diff --git a/react-workspace/test-web-components/package.json b/react-workspace/test-web-components/package.json index 74d2e6b66..2cca8e088 100644 --- a/react-workspace/test-web-components/package.json +++ b/react-workspace/test-web-components/package.json @@ -6,7 +6,7 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", - "@trimble-oss/modus-web-components": "^0.20.0", + "@trimble-oss/modus-web-components": "^0.33.1", "@types/jest": "^27.5.2", "@types/node": "^16.18.48", "@types/react": "^18.2.33",