diff --git a/.github/workflows/continuum.yaml b/.github/workflows/continuum.yaml index b0f9971555..cda1549ec2 100644 --- a/.github/workflows/continuum.yaml +++ b/.github/workflows/continuum.yaml @@ -84,7 +84,18 @@ jobs: -H "Accept: application/vnd.github+json" \ -H "Authorization: Bearer ${{ secrets.ROBBY_SMEUP_PAT }}" \ -H "X-GitHub-Api-Version: 2022-11-28" \ - https://api.github.com/repos/smeup/webup-project/dispatches \ - -d '{"event_type": "ketchup-continuum-rebuild"}' + https://api.github.com/repos/smeup/webup-project/actions/workflows/continuum.yaml/dispatches \ + -d '{"ref": "develop"}' - # TODO: add webup.js triggers \ No newline at end of file + trigger-webupjs-develop: + needs: ketchup-release + runs-on: ubuntu-latest + steps: + - run: | + curl -L \ + -X POST \ + -H "Accept: application/vnd.github+json" \ + -H "Authorization: Bearer ${{ secrets.ROBBY_SMEUP_PAT }}" \ + -H "X-GitHub-Api-Version: 2022-11-28" \ + https://api.github.com/repos/smeup/webup.js/actions/workflows/develop-release.yaml/dispatches \ + -d '{"ref": "develop"}' \ No newline at end of file diff --git a/packages/ketchup-showcase/src/App.vue b/packages/ketchup-showcase/src/App.vue index 69389a7b4c..3349b9813e 100644 --- a/packages/ketchup-showcase/src/App.vue +++ b/packages/ketchup-showcase/src/App.vue @@ -80,7 +80,7 @@ size-y="24px" > - © Copyright 2022 - Sme.UP Spa + © Copyright 2024 - Sme.UP Spa { console.log(e); }); + +document.addEventListener('kup-imagelist-contextmenu', (e) => { + console.log(e); +}); + +document.addEventListener('kup-imagelist-dblclick', (e) => { + console.log(e); +}); diff --git a/packages/ketchup/src/assets/input-panel.js b/packages/ketchup/src/assets/input-panel.js index bfdc90753a..458ffd66f6 100644 --- a/packages/ketchup/src/assets/input-panel.js +++ b/packages/ketchup/src/assets/input-panel.js @@ -108,13 +108,9 @@ const data = { }, CHK: { value: 'on', - obj: { - t: 'V2', - p: 'SI/NO', - k: '', - }, editable: true, mandatory: true, + shape: 'CHK', }, RAD: { value: '1', diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts index 0cf63ba20f..661a905889 100644 --- a/packages/ketchup/src/components.d.ts +++ b/packages/ketchup/src/components.d.ts @@ -11,7 +11,7 @@ import { ItemsDisplayMode, KupListEventPayload, KupListNode, KupListRole } from import { KupAutocompleteEventPayload, KupAutocompleteIconClickEventPayload } from "./components/kup-autocomplete/kup-autocomplete-declarations"; import { KupBoxAutoSelectEventPayload, KupBoxClickEventPayload, KupBoxContextMenuEventPayload, KupBoxData, KupBoxKanban, KupBoxLayout, KupBoxLoadMoreClickEventPayload, KupBoxRow, KupBoxRowActionClickEventPayload, KupBoxSelectedEventPayload, LoadMoreMode } from "./components/kup-box/kup-box-declarations"; import { KupStore } from "./components/kup-state/kup-store"; -import { KupDataCell, KupDataColumn, KupDataDataset, KupDataNewColumnOptions, KupDataNewColumnTypes, KupDataNode, KupDataRowAction } from "./managers/kup-data/kup-data-declarations"; +import { KupDataCell, KupDataColumn, KupDataDataset, KupDataNewColumnOptions, KupDataNewColumnTypes, KupDataRowAction } from "./managers/kup-data/kup-data-declarations"; import { FButtonProps, FButtonStyling } from "./f-components/f-button/f-button-declarations"; import { KupButtonClickEventPayload } from "./components/kup-button/kup-button-declarations"; import { KupButtonListClickEventPayload, KupButtonListNode } from "./components/kup-button-list/kup-button-list-declarations"; @@ -41,8 +41,8 @@ import { KupFormData, KupFormLabelPlacement, KupFormLayout } from "./components/ import { KupBadge } from "./components/kup-badge/kup-badge"; import { FImageData } from "./f-components/f-image/f-image-declarations"; import { KupImageClickEventPayload } from "./components/kup-image/kup-image-declarations"; +import { KupImageListDataNode, KupImageListEventPayload } from "./components/kup-image-list/kup-image-list-declarations"; import { KupTreeColumnMenuEventPayload, KupTreeColumnRemoveEventPayload, KupTreeContextMenuEventPayload, KupTreeDynamicMassExpansionEventPayload, KupTreeExpansionMode, KupTreeNode, KupTreeNodeButtonClickEventPayload, KupTreeNodeCollapseEventPayload, KupTreeNodeExpandEventPayload, KupTreeNodeSelectedEventPayload, TreeNodePath } from "./components/kup-tree/kup-tree-declarations"; -import { KupImageListEventPayload } from "./components/kup-image-list/kup-image-list-declarations"; import { KupInputPanelData } from "./components/kup-input-panel/kup-input-panel-declarations"; import { KupLazyRender } from "./components/kup-lazy/kup-lazy-declarations"; import { KupNavBarStyling } from "./components/kup-nav-bar/kup-nav-bar-declarations"; @@ -62,7 +62,7 @@ export { ItemsDisplayMode, KupListEventPayload, KupListNode, KupListRole } from export { KupAutocompleteEventPayload, KupAutocompleteIconClickEventPayload } from "./components/kup-autocomplete/kup-autocomplete-declarations"; export { KupBoxAutoSelectEventPayload, KupBoxClickEventPayload, KupBoxContextMenuEventPayload, KupBoxData, KupBoxKanban, KupBoxLayout, KupBoxLoadMoreClickEventPayload, KupBoxRow, KupBoxRowActionClickEventPayload, KupBoxSelectedEventPayload, LoadMoreMode } from "./components/kup-box/kup-box-declarations"; export { KupStore } from "./components/kup-state/kup-store"; -export { KupDataCell, KupDataColumn, KupDataDataset, KupDataNewColumnOptions, KupDataNewColumnTypes, KupDataNode, KupDataRowAction } from "./managers/kup-data/kup-data-declarations"; +export { KupDataCell, KupDataColumn, KupDataDataset, KupDataNewColumnOptions, KupDataNewColumnTypes, KupDataRowAction } from "./managers/kup-data/kup-data-declarations"; export { FButtonProps, FButtonStyling } from "./f-components/f-button/f-button-declarations"; export { KupButtonClickEventPayload } from "./components/kup-button/kup-button-declarations"; export { KupButtonListClickEventPayload, KupButtonListNode } from "./components/kup-button-list/kup-button-list-declarations"; @@ -92,8 +92,8 @@ export { KupFormData, KupFormLabelPlacement, KupFormLayout } from "./components/ export { KupBadge } from "./components/kup-badge/kup-badge"; export { FImageData } from "./f-components/f-image/f-image-declarations"; export { KupImageClickEventPayload } from "./components/kup-image/kup-image-declarations"; +export { KupImageListDataNode, KupImageListEventPayload } from "./components/kup-image-list/kup-image-list-declarations"; export { KupTreeColumnMenuEventPayload, KupTreeColumnRemoveEventPayload, KupTreeContextMenuEventPayload, KupTreeDynamicMassExpansionEventPayload, KupTreeExpansionMode, KupTreeNode, KupTreeNodeButtonClickEventPayload, KupTreeNodeCollapseEventPayload, KupTreeNodeExpandEventPayload, KupTreeNodeSelectedEventPayload, TreeNodePath } from "./components/kup-tree/kup-tree-declarations"; -export { KupImageListEventPayload } from "./components/kup-image-list/kup-image-list-declarations"; export { KupInputPanelData } from "./components/kup-input-panel/kup-input-panel-declarations"; export { KupLazyRender } from "./components/kup-lazy/kup-lazy-declarations"; export { KupNavBarStyling } from "./components/kup-nav-bar/kup-nav-bar-declarations"; @@ -2542,7 +2542,7 @@ export namespace Components { * Actual data of the component. * @default [] */ - "data": KupDataNode[]; + "data": KupImageListDataNode[]; /** * Used to retrieve component's props values. * @param descriptions - When provided and true, the result will be the list of props with their description. @@ -2592,6 +2592,10 @@ export namespace Components { * @default false */ "hiddenSubmitButton": boolean; + /** + * This method is used to trigger a new render of the component. + */ + "refresh": () => Promise; /** * Sets the callback function on submit form * @default null @@ -7343,7 +7347,7 @@ declare namespace LocalJSX { * Actual data of the component. * @default [] */ - "data"?: KupDataNode[]; + "data"?: KupImageListDataNode[]; "onKup-imagelist-click"?: (event: KupImageListCustomEvent) => void; "onKup-imagelist-contextmenu"?: (event: KupImageListCustomEvent) => void; "onKup-imagelist-dblclick"?: (event: KupImageListCustomEvent) => void; diff --git a/packages/ketchup/src/components/kup-image-list/kup-image-list-declarations.ts b/packages/ketchup/src/components/kup-image-list/kup-image-list-declarations.ts index 341c48eda7..2721d4a8d7 100644 --- a/packages/ketchup/src/components/kup-image-list/kup-image-list-declarations.ts +++ b/packages/ketchup/src/components/kup-image-list/kup-image-list-declarations.ts @@ -1,11 +1,17 @@ -import { KupDataNode } from '../../managers/kup-data/kup-data-declarations'; -import { KupEventPayload } from '../../types/GenericTypes'; +import { + KupDataCell, + KupDataColumn, + KupDataNode, + KupDataRow, +} from '../../managers/kup-data/kup-data-declarations'; +import { GenericObject, KupEventPayload } from '../../types/GenericTypes'; /** * Props of the kup-image-list component. * Used to export every prop in an object. */ export enum KupImageListProps { + columns = 'Can set a specific number of columns', customStyle = 'Custom style of the component.', data = 'Actual data of the component', ripple = "When enabled displays Material's ripple effect on clicked items.", @@ -13,5 +19,19 @@ export enum KupImageListProps { } export interface KupImageListEventPayload extends KupEventPayload { - node: KupDataNode; + details: KupImageListEventHandlerDetails; +} +/** + * Contains all the data of an event. + */ +export interface KupImageListEventHandlerDetails { + cell: KupDataCell; + column: KupDataColumn; + originalEvent: PointerEvent; + row: KupDataRow; +} + +export interface KupImageListDataNode extends KupDataNode { + badgeData: GenericObject[]; + children?: KupImageListDataNode[]; } diff --git a/packages/ketchup/src/components/kup-image-list/kup-image-list.tsx b/packages/ketchup/src/components/kup-image-list/kup-image-list.tsx index d89ad313d2..1c9b2d431d 100644 --- a/packages/ketchup/src/components/kup-image-list/kup-image-list.tsx +++ b/packages/ketchup/src/components/kup-image-list/kup-image-list.tsx @@ -19,12 +19,13 @@ import { } from '../../managers/kup-manager/kup-manager'; import { GenericObject, KupComponent } from '../../types/GenericTypes'; import { + KupImageListDataNode, + KupImageListEventHandlerDetails, KupImageListEventPayload, KupImageListProps, } from './kup-image-list-declarations'; import { getProps, setProps } from '../../utils/utils'; import { componentWrapperId } from '../../variables/GenericVariables'; -import { KupDataNode } from '../../managers/kup-data/kup-data-declarations'; import { FImage } from '../../f-components/f-image/f-image'; import { FImageProps } from '../../f-components/f-image/f-image-declarations'; import { FButton } from '../../f-components/f-button/f-button'; @@ -34,11 +35,15 @@ import { } from '../../f-components/f-button/f-button-declarations'; import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations'; import { FCell } from '../../f-components/f-cell/f-cell'; -import { FCellPadding } from '../../f-components/f-cell/f-cell-declarations'; +import { + FCellPadding, + FCellProps, +} from '../../f-components/f-cell/f-cell-declarations'; import { KupStore } from '../kup-state/kup-store'; import { KupImageListState } from './kup-image-list-state'; import { TreeNodePath } from '../kup-tree/kup-tree-declarations'; import { KupBadge } from '../kup-badge/kup-badge'; +import { KupPointerEventTypes } from '../../managers/kup-interact/kup-interact-declarations'; @Component({ tag: 'kup-image-list', @@ -57,7 +62,7 @@ export class KupImageList { state: KupImageListState = new KupImageListState(); - @State() currentNode: KupDataNode = null; + @State() currentNode: KupImageListDataNode = null; @State() navigationBarToggled: boolean = false; initWithPersistedState(): void { @@ -65,10 +70,10 @@ export class KupImageList { const state = this.store.getState(this.stateId); if (state != null) { this.currentNode = - this.kupManager.data.node.findByStrTreeNodePath( + this.#kupManager.data.node.findByStrTreeNodePath( this.data, state.selectedTreeNodePath - ); + ) as KupImageListDataNode; } } } @@ -79,7 +84,7 @@ export class KupImageList { let cNodeRowId = this.currentNode ? this.currentNode.id : ''; if ( - !this.kupManager.objects.deepEqual( + !this.#kupManager.objects.deepEqual( this.state.selectedTreeNodePath, cNodeRowId ) @@ -116,7 +121,7 @@ export class KupImageList { * Actual data of the component. * @default [] */ - @Prop() data: KupDataNode[] = []; + @Prop() data: KupImageListDataNode[] = []; /** * When enabled displays Material's ripple effect on clicked items. * @default true @@ -140,7 +145,6 @@ export class KupImageList { /** * Instance of the KupManager class. */ - private kupManager: KupManager = kupManagerInstance(); #clickTimeout: ReturnType[] = []; #kupManager: KupManager = kupManagerInstance(); @@ -150,7 +154,7 @@ export class KupImageList { this.currentNode = this.#kupManager.data.node.getParent( this.data, this.currentNode - ); + ) as KupImageListDataNode; if (!this.currentNode) { this.navigationBarToggled = false; } @@ -167,6 +171,9 @@ export class KupImageList { styling: FButtonStyling.FLAT, wrapperClass: 'navigation-bar__top', }; + #el: HTMLElement; + #hold: boolean = false; + #interactableTouch: HTMLElement[] = []; /*-------------------------------------------------*/ /* E v e n t s */ @@ -180,17 +187,6 @@ export class KupImageList { }) kupClick: EventEmitter; - onKupClick(node: KupDataNode) { - if (node.children && node.children.length > 0) { - this.currentNode = node; - } - this.kupClick.emit({ - comp: this, - id: this.rootElement.id, - node: node, - }); - } - @Event({ eventName: 'kup-imagelist-contextmenu', composed: true, @@ -199,15 +195,6 @@ export class KupImageList { }) kupContextMenu: EventEmitter; - onKupContextMenu(e: MouseEvent, node: KupDataNode) { - e.preventDefault(); - this.kupContextMenu.emit({ - comp: this, - id: this.rootElement.id, - node: node, - }); - } - @Event({ eventName: 'kup-imagelist-dblclick', composed: true, @@ -216,18 +203,6 @@ export class KupImageList { }) kupDblClick: EventEmitter; - onKupDblClick(node: KupDataNode) { - for (let index = 0; index < this.#clickTimeout.length; index++) { - clearTimeout(this.#clickTimeout[index]); - } - this.#clickTimeout = []; - this.kupDblClick.emit({ - comp: this, - id: this.rootElement.id, - node: node, - }); - } - /*-------------------------------------------------*/ /* W a t c h e r s */ /*-------------------------------------------------*/ @@ -237,7 +212,10 @@ export class KupImageList { if (!newData || newData.length == 0) { return; } - this.currentNode = this.kupManager.data.node.find(this.data, newData); + this.currentNode = this.#kupManager.data.node.find( + this.data, + newData + ) as KupImageListDataNode; } /*-------------------------------------------------*/ @@ -273,12 +251,13 @@ export class KupImageList { /* P r i v a t e M e t h o d s */ /*-------------------------------------------------*/ - #createItem(node: KupDataNode): VNode { + #createItem(node: KupImageListDataNode): VNode { const props: FImageProps = { - fit: false, + fit: true, resource: node.icon, title: node.title, wrapperClass: 'image-list__image', + badgeData: node.badgeData, }; const image = ; const label =
{node.value}
; @@ -309,13 +288,9 @@ export class KupImageList { }; const item: VNode = (
{ - this.#clickTimeout.push( - setTimeout(() => this.onKupClick(node), 300) - ); + onContextMenu={(e) => { + e.preventDefault(); }} - onContextMenu={(e) => this.onKupContextMenu(e, node)} - onDblClick={() => this.onKupDblClick(node)} class={classObj} > {this.#createItem(node)} @@ -326,6 +301,151 @@ export class KupImageList { return nodes; } + #getEventDetails( + path: HTMLElement[], + e?: PointerEvent + ): KupImageListEventHandlerDetails { + let cellProps: FCellProps; + + if (path) { + for (let i = path.length - 1; i >= 0; i--) { + let p = path[i]; + if (!p.tagName) { + continue; + } + if (p.classList.contains('f-cell')) { + cellProps = p['kup-get-cell-props'](); + } + } + } + + return { + cell: cellProps?.cell, + column: cellProps?.column, + originalEvent: e, + row: cellProps?.row, + }; + } + + #clickHandler(e: PointerEvent): KupImageListEventHandlerDetails { + const details: KupImageListEventHandlerDetails = this.#getEventDetails( + this.#kupManager.getEventPath(e.target, this.rootElement), + e + ); + + return details; + } + + #contextMenuHandler(e: PointerEvent): KupImageListEventHandlerDetails { + const details: KupImageListEventHandlerDetails = this.#getEventDetails( + this.#kupManager.getEventPath(e.target, this.rootElement), + e + ); + + return details; + } + + #dblClickHandler(e: PointerEvent): KupImageListEventHandlerDetails { + const details: KupImageListEventHandlerDetails = this.#getEventDetails( + this.#kupManager.getEventPath(e.target, this.rootElement), + e + ); + + return details; + } + + #didLoadInteractables() { + this.#interactableTouch.push(this.#el); + const tapCb = (e: PointerEvent) => { + if (this.#hold) { + this.#hold = false; + return; + } + switch (e.button) { + // left click + case 0: + // Note: event must be cloned + // otherwise inside setTimeout will be exiting the Shadow DOM scope(causing loss of information, including target). + const clone: GenericObject = {}; + for (const key in e) { + clone[key] = e[key]; + } + this.#clickTimeout.push( + setTimeout(() => { + const details = this.#clickHandler( + clone as PointerEvent + ); + const node = details.row as KupImageListDataNode; + if (node.children && node.children.length > 0) { + this.currentNode = node; + } + this.kupClick.emit({ + comp: this, + id: this.rootElement.id, + details, + }); + }, 300) + ); + break; + // right click + case 2: + this.kupContextMenu.emit({ + comp: this, + id: this.rootElement.id, + details: this.#contextMenuHandler(e), + }); + break; + } + }; + const doubletapCb = (e: PointerEvent) => { + switch (e.button) { + // left click + case 0: + for ( + let index = 0; + index < this.#clickTimeout.length; + index++ + ) { + clearTimeout(this.#clickTimeout[index]); + this.#kupManager.debug.logMessage( + this, + 'Cleared clickHandler timeout(' + + this.#clickTimeout[index] + + ').' + ); + } + this.#clickTimeout = []; + this.kupDblClick.emit({ + comp: this, + id: this.rootElement.id, + details: this.#dblClickHandler(e), + }); + break; + } + }; + const holdCb = (e: PointerEvent) => { + if (e.pointerType === 'pen' || e.pointerType === 'touch') { + this.#hold = true; + } + }; + this.#kupManager.interact.on( + this.#el, + KupPointerEventTypes.HOLD, + holdCb + ); + this.#kupManager.interact.on(this.#el, KupPointerEventTypes.TAP, tapCb); + this.#kupManager.interact.on( + this.#el, + KupPointerEventTypes.DOUBLETAP, + doubletapCb + ); + this.#kupManager.interact.on( + this.#el, + KupPointerEventTypes.HOLD, + holdCb + ); + } + /*-------------------------------------------------*/ /* L i f e c y c l e H o o k s */ /*-------------------------------------------------*/ @@ -337,6 +457,7 @@ export class KupImageList { } componentDidLoad() { + this.#didLoadInteractables(); this.#kupManager.debug.logLoad(this, true); } @@ -371,7 +492,7 @@ export class KupImageList { ...gridColumnsStyle, }; - if (this.rows !== null) { + if (this.rows != null && this.rows > 0) { const gridRowsStyle = { 'grid-template-rows': `repeat(${this.rows}, minmax(0px, 1fr))`, 'grid-auto-flow': `column`, @@ -386,7 +507,12 @@ export class KupImageList { this.rootElement as KupComponent )} -
+
{ + this.#el = el; + }} + >
{hasNavigation ? (
Object; + +export type InputPanelCells = { + cells: { cell: KupDataCell; column: KupDataColumn }[]; + row?: KupInputPanelRow; +}; + +export enum KupInputPanelProps { + customStyle = 'Custom style of the component.', + data = 'Actual data of the input panel.', + hiddenSubmitButton = 'Creates a hidden submit button in order to submit the form with enter.', + submitCb = 'Sets the callback function on submit form', +} diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts index e19e51b695..e407b41532 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts @@ -59,7 +59,6 @@ describe('kup-input-panel', () => { ); expect(textFields).toHaveLength(data.columns.length); - // TODO valutare questo for utilizzato per mantenere l'asincronicità for (const [i, textField] of textFields.entries()) { const label = await textField.find('label'); expect(label).not.toBeNull(); @@ -67,7 +66,7 @@ describe('kup-input-panel', () => { expect(label).toEqualText(data.columns[i].title); const input = await textField.find('input'); - expect(label).not.toBeNull(); + expect(input).not.toBeNull(); const value = await input.getProperty('value'); expect(value).toBe(''); @@ -82,4 +81,326 @@ describe('kup-input-panel', () => { expect(updatedValue).toBe('string'); } }); + + it('renders autocomplete', async () => { + const page = await newE2EPage(); + + await page.setContent( + '
' + ); + const inputPanel = await page.find('kup-input-panel'); + const data = { + columns: [ + { + name: 'CIT', + title: 'City', + visible: true, + }, + ], + rows: [ + { + cells: { + CIT: { + value: '', + obj: { + t: '', + p: '', + k: '', + }, + editable: true, + mandatory: true, + options: [ + 'Florence', + 'Venice', + 'Rome', + 'Madrid', + 'Barcelona', + 'Seville', + 'Berlin', + 'Munich', + 'Hamburg', + 'Paris', + 'Marseille', + 'Lyon', + 'Lisbon', + 'Porto', + 'Faro', + 'London', + 'Manchester', + 'Liverpool', + ], + shape: 'ACP', + }, + }, + }, + ], + }; + + inputPanel.setProperty('data', data); + + await page.waitForChanges(); + + const inputPanelContent = await page.find( + 'kup-input-panel >>> form.input-panel' + ); + expect(inputPanelContent).not.toBeNull(); + + const autocompleteCell = await inputPanelContent.find( + '.f-cell.autocomplete-cell' + ); + expect(autocompleteCell).not.toBeNull(); + + const autocompleteTextfield = await autocompleteCell.find( + 'kup-autocomplete >>> div.f-text-field' + ); + expect(autocompleteTextfield).not.toBeNull(); + + const label = await autocompleteTextfield.find('label'); + expect(label).not.toBeNull(); + expect(label).toEqualText(data.columns[0].title); + + const input = await autocompleteTextfield.find('input'); + expect(input).not.toBeNull(); + + await input.focus(); + await input.press('KeyR'); + await input.press('KeyO'); + const updatedValue1 = await input.getProperty('value'); + expect(updatedValue1).toBe('ro'); + + await page.waitForChanges(); + await page.waitForChanges(); + + const list = await page.find('div[kup-dynamic-position] kup-list'); + expect(list).not.toBeNull(); + + const listOptions = await page.findAll('kup-list >>> ul.list li'); + expect(listOptions).not.toBeNull(); + expect(listOptions).toHaveLength(2); + + const firstOptionValue = await listOptions[0].find('span'); + expect(firstOptionValue).toEqualText('Rome'); + await firstOptionValue.click(); + + const updatedValue = await input.getProperty('value'); + expect(updatedValue).toBe('Rome'); + }); + + it('renders combobox', async () => { + const page = await newE2EPage(); + + await page.setContent( + '
' + ); + const inputPanel = await page.find('kup-input-panel'); + const data = { + columns: [ + { + name: 'NAT', + title: 'Nation', + visible: true, + }, + ], + rows: [ + { + cells: { + NAT: { + value: '', + options: [ + 'Italy', + 'Spain', + 'Germany', + 'France', + 'Portugal', + 'England', + ], + editable: true, + shape: 'CMB', + }, + }, + }, + ], + }; + + inputPanel.setProperty('data', data); + + await page.waitForChanges(); + + const inputPanelContent = await page.find( + 'kup-input-panel >>> form.input-panel' + ); + expect(inputPanelContent).not.toBeNull(); + + const comboCell = await inputPanelContent.find('.f-cell.combobox-cell'); + expect(comboCell).not.toBeNull(); + + const comboTextfield = await comboCell.find( + 'kup-combobox >>> div.f-text-field' + ); + expect(comboTextfield).not.toBeNull(); + + const label = await comboTextfield.find('label'); + expect(label).not.toBeNull(); + expect(label).toEqualText(data.columns[0].title); + + const input = await comboTextfield.find('input'); + expect(input).not.toBeNull(); + + const icon = await comboTextfield.find( + 'span.kup-icon.kup-dropdown-icon' + ); + expect(icon).not.toBeNull(); + + await icon.click(); + + await page.waitForChanges(); + await page.waitForChanges(); + + const list = await page.find('div[kup-dynamic-position] kup-list'); + expect(list).not.toBeNull(); + + const listOptions = await page.findAll('kup-list >>> ul.list li'); + expect(listOptions).not.toBeNull(); + expect(listOptions).toHaveLength(data.rows[0].cells.NAT.options.length); + + const firstOptionValue = await listOptions[0].find('span'); + expect(firstOptionValue).toEqualText('Italy'); + await firstOptionValue.click(); + + const updatedValue = await input.getProperty('value'); + expect(updatedValue).toBe('Italy'); + }); + + it('renders checkbox', async () => { + const page = await newE2EPage(); + + await page.setContent(''); + const inputPanel = await page.find('kup-input-panel'); + const data = { + columns: [ + { + name: 'CHK', + title: 'Checkbox', + visible: true, + }, + ], + rows: [ + { + cells: { + CHK: { + value: 'off', + editable: true, + shape: 'CHK', + }, + }, + }, + ], + }; + + inputPanel.setProperty('data', data); + + await page.waitForChanges(); + + const inputPanelContent = await page.find( + 'kup-input-panel >>> form.input-panel' + ); + expect(inputPanelContent).not.toBeNull(); + + const checkboxCell = await inputPanelContent.find( + '.f-cell.checkbox-cell' + ); + expect(checkboxCell).not.toBeNull(); + + const label = await checkboxCell.find('label'); + expect(label).not.toBeNull(); + expect(label).toEqualText(data.columns[0].title); + + const input = await checkboxCell.find('input'); + expect(input).not.toBeNull(); + + const value = await input.getProperty('value'); + expect(value).toBe('off'); + + await input.click(); + + const updatedValue = await input.getProperty('value'); + expect(updatedValue).toBe('on'); + }); + + it('renders radio buttons', async () => { + const page = await newE2EPage(); + + await page.setContent(''); + const inputPanel = await page.find('kup-input-panel'); + const data = { + columns: [ + { + name: 'RAD', + title: 'Radio Buttons', + visible: true, + }, + ], + rows: [ + { + cells: { + RAD: { + value: '1', + options: ['1', '2', '3', '4'], + editable: true, + shape: 'RAD', + }, + }, + }, + ], + }; + + inputPanel.setProperty('data', data); + + await page.waitForChanges(); + + const inputPanelContent = await page.find( + 'kup-input-panel >>> form.input-panel' + ); + expect(inputPanelContent).not.toBeNull(); + + const radioButtonsCell = await inputPanelContent.find( + '.f-cell.radio-cell' + ); + expect(radioButtonsCell).not.toBeNull(); + + const radioOptions = data.rows[0].cells.RAD.options; + const radioButtons = await radioButtonsCell.findAll('div.form-field'); + expect(radioButtons).toHaveLength(radioOptions.length); + + for (const [i, radioButton] of radioButtons.entries()) { + const label = await radioButton.find('label'); + expect(label).not.toBeNull(); + expect(label).toEqualText(radioOptions[i]); + + const input = await radioButton.find('input'); + expect(input).not.toBeNull(); + + const value = await input.getProperty('value'); + expect(value).toBe(radioOptions[i]); + + if (data.rows[0].cells.RAD.value === value) { + const radioButtonCircle = await radioButton.find('div.radio'); + expect(radioButtonCircle).toHaveClass('radio--checked'); + } + } + + const newRadioButtonChecked = await radioButtons[2].find('div.radio'); + + await newRadioButtonChecked.click(); + + await page.waitForChanges(); + + const updatedRadioButtons = await radioButtonsCell.findAll( + 'div.form-field' + ); + const updateRadioButtonChecked = await updatedRadioButtons[2].find( + 'div.radio ' + ); + expect(updateRadioButtonChecked).toHaveClass('radio--checked'); + }); }); diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx index 09330cf442..3e5355b893 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx @@ -4,23 +4,32 @@ import { Event, EventEmitter, Host, + Method, Prop, + State, VNode, Watch, + forceUpdate, h, } from '@stencil/core'; import { DataAdapterFn, + InputPanelCells, KupInputPanelCell, KupInputPanelColumn, KupInputPanelData, + KupInputPanelProps, KupInputPanelRow, } from './kup-input-panel-declarations'; import { KupManager, kupManagerInstance, } from '../../managers/kup-manager/kup-manager'; -import { KupComponent, KupEventPayload } from '../../types/GenericTypes'; +import { + GenericObject, + KupComponent, + KupEventPayload, +} from '../../types/GenericTypes'; import { componentWrapperId } from '../../variables/GenericVariables'; import { FButton } from '../../f-components/f-button/f-button'; import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations'; @@ -31,7 +40,8 @@ import { import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc'; import { FCell } from '../../f-components/f-cell/f-cell'; import { KupDom } from '../../managers/kup-manager/kup-manager-declarations'; -import { FRadioData } from '../../components'; +import { KupDataCell } from '../../components'; +import { getProps, setProps } from '../../utils/utils'; const dom: KupDom = document.documentElement as KupDom; @Component({ @@ -76,6 +86,18 @@ export class KupInputPanel { @Prop() submitCb: (e: SubmitEvent) => unknown = null; //#endregion + //#region STATES + /*-------------------------------------------------*/ + /* S t a t e s */ + /*-------------------------------------------------*/ + + /** + * Values to send as props to FCell + * @default [] + */ + @State() private inputPanelCells: InputPanelCells[] = []; + //#endregion + //#region VARIABLES /*-------------------------------------------------*/ /* I n t e r n a l V a r i a b l e s */ @@ -91,8 +113,7 @@ export class KupInputPanel { @Watch('data') onDataChanged() { - // console.log('data changed', this.data); - // this.render(); + this.#mapCells(this.data); } //#endregion @@ -101,7 +122,30 @@ export class KupInputPanel { /* P u b l i c M e t h o d s */ /*-------------------------------------------------*/ - // TODO ADD METHODS HERE + /** + * Used to retrieve component's props values. + * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description. + * @returns {Promise} List of props as object, each key will be a prop. + */ + @Method() + async getProps(descriptions?: boolean): Promise { + return getProps(this, KupInputPanelProps, descriptions); + } + /** + * This method is used to trigger a new render of the component. + */ + @Method() + async refresh(): Promise { + forceUpdate(this); + } + /** + * Sets the props to the component. + * @param {GenericObject} props - Object containing props that will be set to the component. + */ + @Method() + async setProps(props: GenericObject): Promise { + setProps(this, KupInputPanelProps, props); + } //#endregion //#region EVENTS @@ -126,24 +170,13 @@ export class KupInputPanel { /* P r i v a t e M e t h o d s */ /*-------------------------------------------------*/ - #renderRow(row: KupInputPanelRow) { + #renderRow(inputPanelCell: InputPanelCells) { // todo layout - const horizontal = row.layout?.horizontal || false; - - const rowContent: VNode[] = this.data.columns - .filter((col) => col.visible) - .map((col) => { - const cell = row.cells[col.name]; + const horizontal = inputPanelCell.row.layout?.horizontal || false; - const mappedCell = { - ...cell, - data: this.#mapData(cell, col), - slotData: this.#slotData(cell, col), - isEditable: cell.editable, - }; - - return this.#renderCell(mappedCell, row, col); - }); + const rowContent: VNode[] = inputPanelCell.cells.map((cell) => + this.#renderCell(cell.cell, inputPanelCell.row, cell.column) + ); const classObj = { form: true, @@ -172,7 +205,7 @@ export class KupInputPanel { } #renderCell( - cell: KupInputPanelCell, + cell: KupDataCell, row: KupInputPanelRow, column: KupInputPanelColumn ) { @@ -181,21 +214,37 @@ export class KupInputPanel { column, row, component: this, - editable: cell.editable, + editable: cell.isEditable, renderKup: true, setSizes: true, }; - // if ( - // dom.ketchup.data.cell.getType(cell, cell.shape) === FCellTypes.RADIO - // ) { - // // console.log('cell.data', cell.data); - // return ; - // } - return ; } + #mapCells(data: KupInputPanelData) { + const inpuPanelCells = data?.rows?.length + ? data.rows.reduce((inpuPanelCells, row) => { + const cells = data.columns + .filter((column) => column.visible) + .map((column) => { + const cell = row.cells[column.name]; + const mappedCell = { + ...cell, + data: this.#mapData(cell, column), + slotData: this.#slotData(cell, column), + isEditable: cell.editable, + }; + + return { column, cell: mappedCell }; + }); + return [...inpuPanelCells, { cells, row }]; + }, []) + : []; + + this.inputPanelCells = inpuPanelCells; + } + #mapData(cell: KupInputPanelCell, col: KupInputPanelColumn) { const options = cell.options; const fieldLabel = col.title; @@ -329,29 +378,12 @@ export class KupInputPanel { } #RADAdapter(options: string[], _fieldLabel: string, currentValue: string) { - // const onChange = (i) => { - // this.data = { - // ...this.data, - // rows: this.data.rows.map((row) => ({ - // ...row, - // cells: { - // ...row.cells, - // RAD: { - // ...row.cells['RAD'], - // value: options[i], - // }, - // }, - // })), - // }; - // }; - return { data: options.map((option) => ({ value: option, label: option, checked: option === currentValue, })), - // onChange, }; } @@ -391,7 +423,7 @@ export class KupInputPanel { } render() { - const isEmptyData = Boolean(!this.data?.rows?.length); + const isEmptyData = Boolean(!this.inputPanelCells.length); const inputPanelContent: VNode[] = isEmptyData ? [ @@ -401,7 +433,9 @@ export class KupInputPanel { )}

, ] - : this.data.rows.map((row) => this.#renderRow(row)); + : this.inputPanelCells.map((inputPanelCell) => + this.#renderRow(inputPanelCell) + ); return ( diff --git a/packages/ketchup/src/f-components/f-cell/f-cell-declarations.ts b/packages/ketchup/src/f-components/f-cell/f-cell-declarations.ts index 9ce0d3496d..00e98f94a7 100644 --- a/packages/ketchup/src/f-components/f-cell/f-cell-declarations.ts +++ b/packages/ketchup/src/f-components/f-cell/f-cell-declarations.ts @@ -170,6 +170,7 @@ export const editableTypes = [ FCellTypes.MULTI_AUTOCOMPLETE, FCellTypes.MULTI_COMBOBOX, FCellTypes.NUMBER, + FCellTypes.RADIO, FCellTypes.RATING, FCellTypes.STRING, FCellTypes.SWITCH, diff --git a/packages/ketchup/src/f-components/f-cell/f-cell.scss b/packages/ketchup/src/f-components/f-cell/f-cell.scss index e87712708a..37763870bd 100644 --- a/packages/ketchup/src/f-components/f-cell/f-cell.scss +++ b/packages/ketchup/src/f-components/f-cell/f-cell.scss @@ -451,3 +451,14 @@ padding: 1em 0.6em; } } + +@media screen and (max-width: 899px) { + .f-cell { + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Safari, Chrome, Opera, Samsung */ + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* Edge, IE */ + user-select: none; /* Modern browsers */ + } +} diff --git a/packages/ketchup/src/f-components/f-cell/f-cell.tsx b/packages/ketchup/src/f-components/f-cell/f-cell.tsx index 2c04832fc0..fab603adc8 100644 --- a/packages/ketchup/src/f-components/f-cell/f-cell.tsx +++ b/packages/ketchup/src/f-components/f-cell/f-cell.tsx @@ -48,6 +48,8 @@ import { FProgressBar } from '../f-progress-bar/f-progress-bar'; import { FRadio } from '../f-radio/f-radio'; import { FRating } from '../f-rating/f-rating'; import type { KupDataTable } from '../../components/kup-data-table/kup-data-table'; +import { FRadioProps } from '../f-radio/f-radio-declarations'; +import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations'; const dom: KupDom = document.documentElement as KupDom; @@ -93,7 +95,6 @@ export const FCell: FunctionalComponent = ( [cssClasses]: cssClasses ? true : false, }; let content: unknown = valueToDisplay; - if (isEditable && editableTypes.includes(cellType)) { content = setEditableCell(cellType, classObj, cell, column, props); } else if (cell.data && kupTypes.includes(cellType)) { @@ -175,6 +176,13 @@ export const FCell: FunctionalComponent = ( kup-get-cell-props={() => { return props; }} + onTouchStart={ + dom.ketchup.interact.isMobileDevice() + ? (e) => { + e.preventDefault(); + } + : null + } ref={(el) => (cell.element = el)} style={cell.style} > @@ -478,6 +486,25 @@ function setEditableCell( > ); + case FCellTypes.RADIO: + return ( + { + const radioData = (cell.data as FRadioProps).data; + for (let index = 0; index < radioData.length; index++) { + const radioEl = radioData[index]; + if (index === i) { + radioEl.checked = true; + } else { + radioEl.checked = false; + } + } + cellEvent(e, props, cellType, FCellEvents.UPDATE); + }} + > + ); case FCellTypes.RATING: return ( = ( props: FPaginatorProps ) => { + if (!props.perPage) { + props.perPage = 10; + } const maxNumberOfPage = Math.ceil(props.max / props.perPage); const pageItems = getPageItems(props, maxNumberOfPage); const rowsPerPageItems = getRowsItems(props); diff --git a/packages/ketchup/src/managers/kup-dates/kup-dates.ts b/packages/ketchup/src/managers/kup-dates/kup-dates.ts index 0d84d5a6dc..bc3ed337b9 100644 --- a/packages/ketchup/src/managers/kup-dates/kup-dates.ts +++ b/packages/ketchup/src/managers/kup-dates/kup-dates.ts @@ -1,4 +1,5 @@ import dayjs from 'dayjs'; +import utc from 'dayjs/plugin/utc'; import customParseFormat from 'dayjs/plugin/customParseFormat'; import localizedFormat from 'dayjs/plugin/localizedFormat'; import minMax from 'dayjs/plugin/minMax'; @@ -31,6 +32,7 @@ export class KupDates { this.managedComponents = new Set(); this.setLocale(locale); this.dayjs = dayjs; + dayjs.extend(utc); dayjs.extend(customParseFormat); dayjs.extend(localizedFormat); dayjs.extend(minMax); @@ -168,7 +170,7 @@ export class KupDates { if (!format) { format = 'L'; // MM/DD/YYYY, DD/MM/YYYY depending on locale } - return dayjs(input).format(format); + return dayjs.utc(input).format(format); } /** * Gets the time formatted @@ -225,9 +227,9 @@ export class KupDates { */ toDate(input: dayjs.ConfigType, format?: string): Date { if (format && format != null) { - return dayjs(input, format).toDate(); + return dayjs.utc(input, format).toDate(); } else { - return dayjs(input).toDate(); + return dayjs.utc(input).toDate(); } } /** diff --git a/packages/ketchup/src/managers/kup-interact/kup-interact.ts b/packages/ketchup/src/managers/kup-interact/kup-interact.ts index 0f935c9f1f..104e6bf709 100644 --- a/packages/ketchup/src/managers/kup-interact/kup-interact.ts +++ b/packages/ketchup/src/managers/kup-interact/kup-interact.ts @@ -308,6 +308,15 @@ export class KupInteract { interact(el).dropzone(options); this.managedElements.add(el); } + /** + * Tests whether the current device is mobile or not. + * @returns {boolean} Returns true when it's a mobile device + */ + isMobileDevice(): boolean { + return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( + navigator.userAgent + ); + } /** * Sets up a new resizable element. * @param {HTMLElement} el - The resizable element. diff --git a/packages/ketchup/src/managers/kup-theme/themes.json b/packages/ketchup/src/managers/kup-theme/themes.json index 2b396bddfd..bfa2771dcb 100644 --- a/packages/ketchup/src/managers/kup-theme/themes.json +++ b/packages/ketchup/src/managers/kup-theme/themes.json @@ -1854,4 +1854,4 @@ "url('https://fonts.googleapis.com/css2?family=Abel&display=swap')" ] } -} +} \ No newline at end of file diff --git a/packages/ketchup/src/utils/cell-utils.ts b/packages/ketchup/src/utils/cell-utils.ts index d57177bd51..715c22eb2b 100644 --- a/packages/ketchup/src/utils/cell-utils.ts +++ b/packages/ketchup/src/utils/cell-utils.ts @@ -188,10 +188,12 @@ export function compareValues( v2 = Number(s2.replace(/:/g, '')); } else if (dom.ketchup.objects.isTimestamp(obj1)) { v1 = dom.ketchup.dates.toDate( - dom.ketchup.dates.format(s1, KupDatesFormats.ISO_DATE_TIME) + dom.ketchup.dates.format(s1, KupDatesFormats.ISO_DATE_TIME), + KupDatesFormats.ISO_DATE_TIME ); v2 = dom.ketchup.dates.toDate( - dom.ketchup.dates.format(s2, KupDatesFormats.ISO_DATE_TIME) + dom.ketchup.dates.format(s2, KupDatesFormats.ISO_DATE_TIME), + KupDatesFormats.ISO_DATE_TIME ); } if (v1 > v2) { diff --git a/yarn.lock b/yarn.lock index ce2d5e3500..23c173c7ea 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5076,12 +5076,12 @@ __metadata: languageName: node linkType: hard -"body-parser@npm:1.20.1": - version: 1.20.1 - resolution: "body-parser@npm:1.20.1" +"body-parser@npm:1.20.2": + version: 1.20.2 + resolution: "body-parser@npm:1.20.2" dependencies: bytes: 3.1.2 - content-type: ~1.0.4 + content-type: ~1.0.5 debug: 2.6.9 depd: 2.0.0 destroy: 1.2.0 @@ -5089,10 +5089,10 @@ __metadata: iconv-lite: 0.4.24 on-finished: 2.4.1 qs: 6.11.0 - raw-body: 2.5.1 + raw-body: 2.5.2 type-is: ~1.6.18 unpipe: 1.0.0 - checksum: f1050dbac3bede6a78f0b87947a8d548ce43f91ccc718a50dd774f3c81f2d8b04693e52acf62659fad23101827dd318da1fb1363444ff9a8482b886a3e4a5266 + checksum: 14d37ec638ab5c93f6099ecaed7f28f890d222c650c69306872e00b9efa081ff6c596cd9afb9930656aae4d6c4e1c17537bea12bb73c87a217cb3cfea8896737 languageName: node linkType: hard @@ -5844,7 +5844,7 @@ __metadata: languageName: node linkType: hard -"content-type@npm:~1.0.4": +"content-type@npm:~1.0.4, content-type@npm:~1.0.5": version: 1.0.5 resolution: "content-type@npm:1.0.5" checksum: 566271e0a251642254cde0f845f9dd4f9856e52d988f4eb0d0dcffbb7a1f8ec98de7a5215fc628f3bce30fe2fb6fd2bc064b562d721658c59b544e2d34ea2766 @@ -5958,10 +5958,10 @@ __metadata: languageName: node linkType: hard -"cookie@npm:0.5.0": - version: 0.5.0 - resolution: "cookie@npm:0.5.0" - checksum: 1f4bd2ca5765f8c9689a7e8954183f5332139eb72b6ff783d8947032ec1fdf43109852c178e21a953a30c0dd42257828185be01b49d1eb1a67fd054ca588a180 +"cookie@npm:0.6.0": + version: 0.6.0 + resolution: "cookie@npm:0.6.0" + checksum: f56a7d32a07db5458e79c726b77e3c2eff655c36792f2b6c58d351fb5f61531e5b1ab7f46987150136e366c65213cbe31729e02a3eaed630c3bf7334635fb410 languageName: node linkType: hard @@ -7333,15 +7333,15 @@ __metadata: linkType: hard "express@npm:^4.17.3": - version: 4.18.2 - resolution: "express@npm:4.18.2" + version: 4.19.2 + resolution: "express@npm:4.19.2" dependencies: accepts: ~1.3.8 array-flatten: 1.1.1 - body-parser: 1.20.1 + body-parser: 1.20.2 content-disposition: 0.5.4 content-type: ~1.0.4 - cookie: 0.5.0 + cookie: 0.6.0 cookie-signature: 1.0.6 debug: 2.6.9 depd: 2.0.0 @@ -7367,7 +7367,7 @@ __metadata: type-is: ~1.6.18 utils-merge: 1.0.1 vary: ~1.1.2 - checksum: 3c4b9b076879442f6b968fe53d85d9f1eeacbb4f4c41e5f16cc36d77ce39a2b0d81b3f250514982110d815b2f7173f5561367f9110fcc541f9371948e8c8b037 + checksum: 212dbd6c2c222a96a61bc927639c95970a53b06257080bb9e2838adb3bffdb966856551fdad1ab5dd654a217c35db94f987d0aa88d48fb04d306340f5f34dca5 languageName: node linkType: hard @@ -12890,15 +12890,15 @@ __metadata: languageName: node linkType: hard -"raw-body@npm:2.5.1": - version: 2.5.1 - resolution: "raw-body@npm:2.5.1" +"raw-body@npm:2.5.2": + version: 2.5.2 + resolution: "raw-body@npm:2.5.2" dependencies: bytes: 3.1.2 http-errors: 2.0.0 iconv-lite: 0.4.24 unpipe: 1.0.0 - checksum: 5362adff1575d691bb3f75998803a0ffed8c64eabeaa06e54b4ada25a0cd1b2ae7f4f5ec46565d1bec337e08b5ac90c76eaa0758de6f72a633f025d754dec29e + checksum: ba1583c8d8a48e8fbb7a873fdbb2df66ea4ff83775421bfe21ee120140949ab048200668c47d9ae3880012f6e217052690628cf679ddfbd82c9fc9358d574676 languageName: node linkType: hard @@ -15361,8 +15361,8 @@ __metadata: linkType: hard "webpack-dev-middleware@npm:^5.3.1": - version: 5.3.3 - resolution: "webpack-dev-middleware@npm:5.3.3" + version: 5.3.4 + resolution: "webpack-dev-middleware@npm:5.3.4" dependencies: colorette: ^2.0.10 memfs: ^3.4.3 @@ -15371,7 +15371,7 @@ __metadata: schema-utils: ^4.0.0 peerDependencies: webpack: ^4.0.0 || ^5.0.0 - checksum: dd332cc6da61222c43d25e5a2155e23147b777ff32fdf1f1a0a8777020c072fbcef7756360ce2a13939c3f534c06b4992a4d659318c4a7fe2c0530b52a8a6621 + checksum: 90cf3e27d0714c1a745454a1794f491b7076434939340605b9ee8718ba2b85385b120939754e9fdbd6569811e749dee53eec319e0d600e70e0b0baffd8e3fb13 languageName: node linkType: hard