bfg-common 1.5.252 → 1.5.254

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/assets/img/icons/icons-sprite-dark-3.svg +227 -227
  2. package/assets/img/icons/icons-sprite-dark-5.svg +488 -488
  3. package/assets/img/icons/icons-sprite-light-3.svg +227 -227
  4. package/assets/img/icons/icons-sprite-light-5.svg +488 -488
  5. package/assets/localization/local_be.json +19 -2
  6. package/assets/localization/local_en.json +19 -2
  7. package/assets/localization/local_hy.json +19 -2
  8. package/assets/localization/local_kk.json +19 -2
  9. package/assets/localization/local_ru.json +19 -2
  10. package/assets/localization/local_zh.json +20 -2
  11. package/assets/scss/clarity/local_ar.json +3 -1
  12. package/assets/scss/common/theme.scss +24 -0
  13. package/components/atoms/stack/StackBlock.vue +185 -185
  14. package/components/atoms/table/info/lib/models/interfaces.ts +10 -10
  15. package/components/common/browse/blocks/lib/models/types.ts +1 -1
  16. package/components/common/browse/lib/models/interfaces.ts +5 -5
  17. package/components/common/diagramMain/adapter/AdapterItems.vue +61 -61
  18. package/components/common/diagramMain/lib/config/initial.ts +50 -50
  19. package/components/common/diagramMain/lib/models/types.ts +21 -21
  20. package/components/common/diagramMain/lib/utils/utils.ts +331 -331
  21. package/components/common/diagramMain/modals/editSettings/ConfirmTeamingSettingsModal.vue +40 -40
  22. package/components/common/diagramMain/modals/editSettings/tabs/NetworkProperties.vue +214 -214
  23. package/components/common/diagramMain/modals/editSettings/tabs/Security.vue +189 -189
  24. package/components/common/diagramMain/modals/editSettings/tabs/SwitchProperties.vue +163 -163
  25. package/components/common/diagramMain/modals/editSettings/tabs/TeamingFailover.vue +175 -175
  26. package/components/common/diagramMain/modals/editSettings/tabs/port/IpvFourSettings.vue +346 -346
  27. package/components/common/diagramMain/modals/lib/config/initial.ts +180 -180
  28. package/components/common/diagramMain/modals/lib/config/vmKernelAdapter.ts +90 -90
  29. package/components/common/diagramMain/modals/lib/mappers/mappers.ts +87 -87
  30. package/components/common/diagramMain/modals/lib/utils/index.ts +24 -24
  31. package/components/common/diagramMain/modals/migrateVmkernelAdapter/lib/config/steps.ts +114 -114
  32. package/components/common/diagramMain/modals/migrateVmkernelAdapter/steps/ConnectionSettings.vue +169 -169
  33. package/components/common/diagramMain/modals/migrateVmkernelAdapter/steps/SelectVmkernelAdapter.vue +159 -159
  34. package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/common.ts +14 -14
  35. package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/connectionSettings.ts +137 -137
  36. package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/selectVmkernelAdapter.ts +52 -52
  37. package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/validations.ts +19 -19
  38. package/components/common/diagramMain/port/Ports.vue +47 -47
  39. package/lib/models/interfaces.ts +2 -0
  40. package/package.json +1 -1
@@ -1,185 +1,185 @@
1
- <template>
2
- <div
3
- :class="[
4
- 'stack-block',
5
- open ? 'stack-block-expanded' : 'stack-block-expandable',
6
- { 'not-children': !props.hasChildren },
7
- ]"
8
- >
9
- <div
10
- :id="`${props.testId}-toggle`"
11
- :data-id="`${props.testId}-toggle`"
12
- class="stack-block-label"
13
- @click="onToggle"
14
- >
15
- <atoms-the-icon name="angle" class="angle-icon" fill="#565656" />
16
-
17
- <div class="stack-view-key">
18
- <slot name="stackBlockKey" />
19
- </div>
20
- <div class="stack-block-content">
21
- <slot name="stackBlockContent" />
22
- </div>
23
-
24
- <span
25
- v-if="props.removable && props.isRollBack"
26
- :data-id="`${props.testId}-roll-back`"
27
- class="icon-roll-back"
28
- @mousedown="onRollBack"
29
- @click.stop
30
- />
31
- <atoms-the-icon
32
- v-else-if="props.removable"
33
- :data-id="`${props.testId}-remove`"
34
- class="remove-icon"
35
- name="close-circle"
36
- @mousedown="onRemove"
37
- @click.stop
38
- />
39
- <span v-else class="empty-icon"></span>
40
- </div>
41
-
42
- <div v-show="open" class="stack-children">
43
- <div style="height: auto">
44
- <slot name="stackChildren" />
45
- </div>
46
- </div>
47
- </div>
48
- </template>
49
-
50
- <script setup lang="ts">
51
- const props = withDefaults(
52
- defineProps<{
53
- hasChildren: boolean
54
- removable?: boolean
55
- testId?: string
56
- openByDefault?: boolean
57
- isRollBack?: boolean
58
- }>(),
59
- { testId: 'ui-stack-block', openByDefault: false }
60
- )
61
- const emits = defineEmits<{
62
- (event: 'toggle', value: boolean): void
63
- (event: 'remove'): void
64
- (event: 'roll-back'): void
65
- }>()
66
-
67
- const open = ref<boolean>(props.openByDefault || false)
68
- const onToggle = (): void => {
69
- if (!props.hasChildren) return
70
- setTimeout(() => {
71
- open.value = !open.value
72
- emits('toggle', open.value)
73
- }, 0)
74
- }
75
-
76
- const onRemove = (): void => {
77
- emits('remove')
78
- }
79
- const onRollBack = (): void => {
80
- emits('roll-back')
81
- }
82
- </script>
83
-
84
- <style scoped lang="scss">
85
- .stack-block {
86
- cursor: pointer;
87
- background-color: var(--block-view-bg-color);
88
- border-color: var(--global-border-color);
89
-
90
- &.stack-block-expandable:hover {
91
- border-bottom: 1px solid #666;
92
-
93
- .stack-block-label {
94
- background-color: var(--block-view-bg-color);
95
- border-color: var(--global-border-color);
96
- }
97
- }
98
-
99
- .stack-block-label {
100
- padding: 6px 12px;
101
- flex: 1 1 auto;
102
- max-width: unset;
103
- display: flex;
104
- background-color: var(--block-view-bg-color);
105
- border-color: var(--global-border-color);
106
-
107
- &:hover {
108
- .remove-icon {
109
- opacity: 1;
110
- }
111
- }
112
-
113
- &::before {
114
- display: none;
115
- }
116
-
117
- .angle-icon {
118
- width: 14px;
119
- height: 14px;
120
- margin-right: 4px;
121
- transform: rotate(90deg);
122
- align-self: center;
123
- }
124
-
125
- .remove-icon {
126
- width: 18px;
127
- height: 18px;
128
- opacity: 0;
129
- cursor: pointer;
130
- }
131
-
132
- .stack-view-key {
133
- flex: 0 0 40%;
134
- max-width: 40%;
135
- }
136
-
137
- .stack-block-content {
138
- padding: 0;
139
- flex: 1 1 auto;
140
- width: 60%;
141
- background-color: transparent;
142
- word-break: break-all;
143
- }
144
-
145
- .empty-icon {
146
- width: 18px;
147
- height: 18px;
148
- }
149
- }
150
-
151
- &.stack-block-expanded {
152
- .stack-block-label {
153
- color: #ffffff;
154
- background-color: #29414e;
155
-
156
- .angle-icon {
157
- fill: #ffffff;
158
- transform: rotate(180deg);
159
- }
160
-
161
- .remove-icon {
162
- fill: #ffffff;
163
- }
164
- }
165
- }
166
-
167
- &.not-children {
168
- cursor: default;
169
- .stack-block-label {
170
- background-color: transparent;
171
- color: #333333;
172
-
173
- &:hover {
174
- cursor: default;
175
- background-color: transparent;
176
- border-bottom: none;
177
- }
178
-
179
- .angle-icon {
180
- opacity: 0;
181
- }
182
- }
183
- }
184
- }
185
- </style>
1
+ <template>
2
+ <div
3
+ :class="[
4
+ 'stack-block',
5
+ open ? 'stack-block-expanded' : 'stack-block-expandable',
6
+ { 'not-children': !props.hasChildren },
7
+ ]"
8
+ >
9
+ <div
10
+ :id="`${props.testId}-toggle`"
11
+ :data-id="`${props.testId}-toggle`"
12
+ class="stack-block-label"
13
+ @click="onToggle"
14
+ >
15
+ <atoms-the-icon name="angle" class="angle-icon" fill="#565656" />
16
+
17
+ <div class="stack-view-key">
18
+ <slot name="stackBlockKey" />
19
+ </div>
20
+ <div class="stack-block-content">
21
+ <slot name="stackBlockContent" />
22
+ </div>
23
+
24
+ <span
25
+ v-if="props.removable && props.isRollBack"
26
+ :data-id="`${props.testId}-roll-back`"
27
+ class="icon-roll-back"
28
+ @mousedown="onRollBack"
29
+ @click.stop
30
+ />
31
+ <atoms-the-icon
32
+ v-else-if="props.removable"
33
+ :data-id="`${props.testId}-remove`"
34
+ class="remove-icon"
35
+ name="close-circle"
36
+ @mousedown="onRemove"
37
+ @click.stop
38
+ />
39
+ <span v-else class="empty-icon"></span>
40
+ </div>
41
+
42
+ <div v-show="open" class="stack-children">
43
+ <div style="height: auto">
44
+ <slot name="stackChildren" />
45
+ </div>
46
+ </div>
47
+ </div>
48
+ </template>
49
+
50
+ <script setup lang="ts">
51
+ const props = withDefaults(
52
+ defineProps<{
53
+ hasChildren: boolean
54
+ removable?: boolean
55
+ testId?: string
56
+ openByDefault?: boolean
57
+ isRollBack?: boolean
58
+ }>(),
59
+ { testId: 'ui-stack-block', openByDefault: false }
60
+ )
61
+ const emits = defineEmits<{
62
+ (event: 'toggle', value: boolean): void
63
+ (event: 'remove'): void
64
+ (event: 'roll-back'): void
65
+ }>()
66
+
67
+ const open = ref<boolean>(props.openByDefault || false)
68
+ const onToggle = (): void => {
69
+ if (!props.hasChildren) return
70
+ setTimeout(() => {
71
+ open.value = !open.value
72
+ emits('toggle', open.value)
73
+ }, 0)
74
+ }
75
+
76
+ const onRemove = (): void => {
77
+ emits('remove')
78
+ }
79
+ const onRollBack = (): void => {
80
+ emits('roll-back')
81
+ }
82
+ </script>
83
+
84
+ <style scoped lang="scss">
85
+ .stack-block {
86
+ cursor: pointer;
87
+ background-color: var(--block-view-bg-color);
88
+ border-color: var(--global-border-color);
89
+
90
+ &.stack-block-expandable:hover {
91
+ border-bottom: 1px solid #666;
92
+
93
+ .stack-block-label {
94
+ background-color: var(--block-view-bg-color);
95
+ border-color: var(--global-border-color);
96
+ }
97
+ }
98
+
99
+ .stack-block-label {
100
+ padding: 6px 12px;
101
+ flex: 1 1 auto;
102
+ max-width: unset;
103
+ display: flex;
104
+ background-color: var(--block-view-bg-color);
105
+ border-color: var(--global-border-color);
106
+
107
+ &:hover {
108
+ .remove-icon {
109
+ opacity: 1;
110
+ }
111
+ }
112
+
113
+ &::before {
114
+ display: none;
115
+ }
116
+
117
+ .angle-icon {
118
+ width: 14px;
119
+ height: 14px;
120
+ margin-right: 4px;
121
+ transform: rotate(90deg);
122
+ align-self: center;
123
+ }
124
+
125
+ .remove-icon {
126
+ width: 18px;
127
+ height: 18px;
128
+ opacity: 0;
129
+ cursor: pointer;
130
+ }
131
+
132
+ .stack-view-key {
133
+ flex: 0 0 40%;
134
+ max-width: 40%;
135
+ }
136
+
137
+ .stack-block-content {
138
+ padding: 0;
139
+ flex: 1 1 auto;
140
+ width: 60%;
141
+ background-color: transparent;
142
+ word-break: break-all;
143
+ }
144
+
145
+ .empty-icon {
146
+ width: 18px;
147
+ height: 18px;
148
+ }
149
+ }
150
+
151
+ &.stack-block-expanded {
152
+ .stack-block-label {
153
+ color: #ffffff;
154
+ background-color: #29414e;
155
+
156
+ .angle-icon {
157
+ fill: #ffffff;
158
+ transform: rotate(180deg);
159
+ }
160
+
161
+ .remove-icon {
162
+ fill: #ffffff;
163
+ }
164
+ }
165
+ }
166
+
167
+ &.not-children {
168
+ cursor: default;
169
+ .stack-block-label {
170
+ background-color: transparent;
171
+ color: #333333;
172
+
173
+ &:hover {
174
+ cursor: default;
175
+ background-color: transparent;
176
+ border-bottom: none;
177
+ }
178
+
179
+ .angle-icon {
180
+ opacity: 0;
181
+ }
182
+ }
183
+ }
184
+ }
185
+ </style>
@@ -1,10 +1,10 @@
1
- export interface UI_I_TableInfoItem {
2
- label: string
3
- value: any
4
- isProperty?: boolean
5
- key?: string
6
- localization?: string
7
- localizationTemplate?: string
8
- isCapital?: boolean
9
- iconName?: string
10
- }
1
+ export interface UI_I_TableInfoItem {
2
+ label: string
3
+ value: any
4
+ isProperty?: boolean
5
+ key?: string
6
+ localization?: string
7
+ localizationTemplate?: string
8
+ isCapital?: boolean
9
+ iconName?: string
10
+ }
@@ -1 +1 @@
1
- export type UI_T_BlocksWidth = [number, number, number]
1
+ export type UI_T_BlocksWidth = [number, number, number]
@@ -1,5 +1,5 @@
1
- export interface UI_I_FileInfo {
2
- type: string
3
- title: string
4
- value: string | number
5
- }
1
+ export interface UI_I_FileInfo {
2
+ type: string
3
+ title: string
4
+ value: string | number
5
+ }
@@ -1,61 +1,61 @@
1
- <template>
2
- <g data-title="adapter-items-group">
3
- <template v-if="props.adaptersWithPositions.toggle">
4
- <template
5
- v-for="(adapter, key) in props.adaptersWithPositions.adapters"
6
- :key="adapter.id"
7
- >
8
- <common-diagram-main-adapter-item
9
- :adapter="adapter"
10
- :selected-port="props.selectedPort"
11
- :selected-adapter="props.selectedAdapter"
12
- :networks-count="props.networksCount"
13
- :is-dark-mode="props.isDarkMode"
14
- :networks-with-positions="props.networksWithPositions"
15
- @select-adapter="onSelectAdapter"
16
- @show-modal="onShowModal"
17
- />
18
- </template>
19
- </template>
20
- </g>
21
- </template>
22
-
23
- <script setup lang="ts">
24
- import {
25
- UI_I_AdaptersWithPositions,
26
- UI_I_ModalsInitialData,
27
- UI_I_SelectedAdapter,
28
- UI_I_SelectedPort,
29
- UI_I_NetworksWithPositions,
30
- } from '~/components/common/diagramMain/lib/models/interfaces'
31
-
32
- const props = defineProps<{
33
- adaptersWithPositions: UI_I_AdaptersWithPositions
34
- networksWithPositions: UI_I_NetworksWithPositions[]
35
- selectedPort: UI_I_SelectedPort
36
- selectedAdapter: UI_I_SelectedAdapter
37
- networksCount: number
38
- isDarkMode: boolean
39
- }>()
40
-
41
- const emits = defineEmits<{
42
- (event: 'select-adapter', adapterId: string): void
43
- (
44
- event: 'show-modal',
45
- value: string,
46
- properties?: UI_I_ModalsInitialData
47
- ): void
48
- }>()
49
-
50
- const onSelectAdapter = (adapterId: string): void => {
51
- emits('select-adapter', adapterId)
52
- }
53
- const onShowModal = (
54
- value: string,
55
- properties?: UI_I_ModalsInitialData
56
- ): void => {
57
- emits('show-modal', value, properties)
58
- }
59
- </script>
60
-
61
- <style scoped lang="scss"></style>
1
+ <template>
2
+ <g data-title="adapter-items-group">
3
+ <template v-if="props.adaptersWithPositions.toggle">
4
+ <template
5
+ v-for="(adapter, key) in props.adaptersWithPositions.adapters"
6
+ :key="adapter.id"
7
+ >
8
+ <common-diagram-main-adapter-item
9
+ :adapter="adapter"
10
+ :selected-port="props.selectedPort"
11
+ :selected-adapter="props.selectedAdapter"
12
+ :networks-count="props.networksCount"
13
+ :is-dark-mode="props.isDarkMode"
14
+ :networks-with-positions="props.networksWithPositions"
15
+ @select-adapter="onSelectAdapter"
16
+ @show-modal="onShowModal"
17
+ />
18
+ </template>
19
+ </template>
20
+ </g>
21
+ </template>
22
+
23
+ <script setup lang="ts">
24
+ import {
25
+ UI_I_AdaptersWithPositions,
26
+ UI_I_ModalsInitialData,
27
+ UI_I_SelectedAdapter,
28
+ UI_I_SelectedPort,
29
+ UI_I_NetworksWithPositions,
30
+ } from '~/components/common/diagramMain/lib/models/interfaces'
31
+
32
+ const props = defineProps<{
33
+ adaptersWithPositions: UI_I_AdaptersWithPositions
34
+ networksWithPositions: UI_I_NetworksWithPositions[]
35
+ selectedPort: UI_I_SelectedPort
36
+ selectedAdapter: UI_I_SelectedAdapter
37
+ networksCount: number
38
+ isDarkMode: boolean
39
+ }>()
40
+
41
+ const emits = defineEmits<{
42
+ (event: 'select-adapter', adapterId: string): void
43
+ (
44
+ event: 'show-modal',
45
+ value: string,
46
+ properties?: UI_I_ModalsInitialData
47
+ ): void
48
+ }>()
49
+
50
+ const onSelectAdapter = (adapterId: string): void => {
51
+ emits('select-adapter', adapterId)
52
+ }
53
+ const onShowModal = (
54
+ value: string,
55
+ properties?: UI_I_ModalsInitialData
56
+ ): void => {
57
+ emits('show-modal', value, properties)
58
+ }
59
+ </script>
60
+
61
+ <style scoped lang="scss"></style>
@@ -1,50 +1,50 @@
1
- import type {
2
- UI_I_AdapterStatus,
3
- UI_I_MainRectHeights,
4
- UI_I_SelectedAdapter,
5
- UI_I_SelectedPort,
6
- UI_I_SwitchLine,
7
- UI_I_NetworkPositionsConst,
8
- } from '~/components/common/diagramMain/lib/models/interfaces'
9
-
10
- export const managePhysicalAdapterStatusInitial: UI_I_AdapterStatus = {
11
- active: [],
12
- standby: [],
13
- unused: [],
14
- }
15
-
16
- export const mainRectHeightsInitial: UI_I_MainRectHeights = {
17
- networksHeight: 0,
18
- adaptersHeight: 0,
19
- }
20
-
21
- export const switchLineInitial: UI_I_SwitchLine = {
22
- y1: 0,
23
- y2: 0,
24
- ay: 0,
25
- }
26
-
27
- export const selectedPortInitial: UI_I_SelectedPort = {
28
- networkId: '-1',
29
- portId: '-1',
30
- activeAdapters: [],
31
- }
32
-
33
- export const selectedAdapterInitial: UI_I_SelectedAdapter = {
34
- adapterId: '-1',
35
- connectedPorts: [],
36
- }
37
-
38
- export const selectedSwitchLineYInitial: UI_I_SwitchLine = {
39
- y1: 0,
40
- y2: 0,
41
- }
42
-
43
- export const NETWORK_POSITIONS: UI_I_NetworkPositionsConst = {
44
- EMPTY_PORTS_PADDING_BOTTOM: 7.5,
45
- FROM_VLAN_ID_TO_GROUP_NAME: 22,
46
- VMS_AND_PORTS_HEIGHT: 22,
47
- V_CENTER_HEIGHT: 32,
48
- BETWEEN_VMS_AND_PORTS: 7.5,
49
- BETWEEN_V_CENTERS: 12.5,
50
- } as const
1
+ import type {
2
+ UI_I_AdapterStatus,
3
+ UI_I_MainRectHeights,
4
+ UI_I_SelectedAdapter,
5
+ UI_I_SelectedPort,
6
+ UI_I_SwitchLine,
7
+ UI_I_NetworkPositionsConst,
8
+ } from '~/components/common/diagramMain/lib/models/interfaces'
9
+
10
+ export const managePhysicalAdapterStatusInitial: UI_I_AdapterStatus = {
11
+ active: [],
12
+ standby: [],
13
+ unused: [],
14
+ }
15
+
16
+ export const mainRectHeightsInitial: UI_I_MainRectHeights = {
17
+ networksHeight: 0,
18
+ adaptersHeight: 0,
19
+ }
20
+
21
+ export const switchLineInitial: UI_I_SwitchLine = {
22
+ y1: 0,
23
+ y2: 0,
24
+ ay: 0,
25
+ }
26
+
27
+ export const selectedPortInitial: UI_I_SelectedPort = {
28
+ networkId: '-1',
29
+ portId: '-1',
30
+ activeAdapters: [],
31
+ }
32
+
33
+ export const selectedAdapterInitial: UI_I_SelectedAdapter = {
34
+ adapterId: '-1',
35
+ connectedPorts: [],
36
+ }
37
+
38
+ export const selectedSwitchLineYInitial: UI_I_SwitchLine = {
39
+ y1: 0,
40
+ y2: 0,
41
+ }
42
+
43
+ export const NETWORK_POSITIONS: UI_I_NetworkPositionsConst = {
44
+ EMPTY_PORTS_PADDING_BOTTOM: 7.5,
45
+ FROM_VLAN_ID_TO_GROUP_NAME: 22,
46
+ VMS_AND_PORTS_HEIGHT: 22,
47
+ V_CENTER_HEIGHT: 32,
48
+ BETWEEN_VMS_AND_PORTS: 7.5,
49
+ BETWEEN_V_CENTERS: 12.5,
50
+ } as const
@@ -1,21 +1,21 @@
1
- import type {
2
- UI_I_Adapter,
3
- UI_I_AdapterWithError,
4
- } from '~/components/common/diagramMain/lib/models/interfaces'
5
-
6
- export type UI_T_AdapterStatusNames = 'active' | 'standby' | 'unused'
7
- export type UI_T_PropertiesFieldName = 'vlanId' | 'networkLabel'
8
- export type UI_T_TrafficShapingFieldName = 'average' | 'peak' | 'burstSize'
9
- export type UI_T_PortPropertiesFieldName = 'mtu'
10
-
11
- export type UI_T_LoadBalancingMode =
12
- | 'inherit'
13
- | 'active-backup'
14
- | 'balance-slb'
15
- | 'balance-tcp'
16
- export type UI_T_IYN = 'inherit' | 'yes' | 'no'
17
- export type UI_T_Carier = 'inherit' | 'carier' | 'beakon'
18
-
19
- export type UI_T_Adapters = (UI_I_Adapter | UI_I_AdapterWithError) & {
20
- adapterPosition: number
21
- }
1
+ import type {
2
+ UI_I_Adapter,
3
+ UI_I_AdapterWithError,
4
+ } from '~/components/common/diagramMain/lib/models/interfaces'
5
+
6
+ export type UI_T_AdapterStatusNames = 'active' | 'standby' | 'unused'
7
+ export type UI_T_PropertiesFieldName = 'vlanId' | 'networkLabel'
8
+ export type UI_T_TrafficShapingFieldName = 'average' | 'peak' | 'burstSize'
9
+ export type UI_T_PortPropertiesFieldName = 'mtu'
10
+
11
+ export type UI_T_LoadBalancingMode =
12
+ | 'inherit'
13
+ | 'active-backup'
14
+ | 'balance-slb'
15
+ | 'balance-tcp'
16
+ export type UI_T_IYN = 'inherit' | 'yes' | 'no'
17
+ export type UI_T_Carier = 'inherit' | 'carier' | 'beakon'
18
+
19
+ export type UI_T_Adapters = (UI_I_Adapter | UI_I_AdapterWithError) & {
20
+ adapterPosition: number
21
+ }