Skip to content

Commit 0a8ac9b

Browse files
anicyneanicyne
committed
refactor: update icon types and improve input component structure for better clarity and maintainability
Refs: #7460
1 parent ba12c49 commit 0a8ac9b

File tree

34 files changed

+180
-119
lines changed

34 files changed

+180
-119
lines changed

‎packages/components/src/components/@deprecated/input/controller-icon.ts‎

Lines changed: 4 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,12 @@
11
import type { Generic } from 'adopted-style-sheets';
22

3-
import type { KoliBriHorizontalIcons, Stringified } from '../../../schema';
4-
import { isIcon, isString, objectObjectHandler, parseJson, watchValidator } from '../../../schema';
3+
import type { IconsHorizontalPropType } from '../../../schema';
4+
import { validateIcons } from '../../../schema';
55

66
import { InputController } from './controller';
77

88
import type { Props, Watches } from './types-icon';
99

10-
const beforePatchIcons = (value: unknown, nextState: Map<string, unknown>): void => {
11-
const icons = value as KoliBriHorizontalIcons;
12-
if (typeof icons === 'object' && icons !== null) {
13-
if (isString(icons.right, 1)) {
14-
icons.right = { icon: icons.right as string };
15-
}
16-
if (isString(icons.left, 1)) {
17-
icons.left = { icon: icons.left as string };
18-
}
19-
nextState.set('_icons', icons);
20-
}
21-
};
22-
2310
export class InputIconController extends InputController implements Watches {
2411
protected readonly component: Generic.Element.Component & Props;
2512

@@ -28,32 +15,8 @@ export class InputIconController extends InputController implements Watches {
2815
this.component = component;
2916
}
3017

31-
public validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {
32-
objectObjectHandler(value, () => {
33-
try {
34-
value = parseJson<KoliBriHorizontalIcons>(value as string);
35-
// eslint-disable-next-line no-empty
36-
} catch (e) {
37-
// value behält den ursprünglichen Wert
38-
}
39-
watchValidator(
40-
this.component,
41-
'_icons',
42-
(value): boolean => {
43-
return (
44-
typeof value === 'object' && value !== null && (isString(value.left, 1) || isIcon(value.left) || isString(value.right, 1) || isIcon(value.right))
45-
);
46-
},
47-
new Set(['KoliBriHorizontalIcon']),
48-
value,
49-
{
50-
hooks: {
51-
beforePatch: beforePatchIcons,
52-
},
53-
required: true,
54-
},
55-
);
56-
});
18+
public validateIcons(value?: IconsHorizontalPropType): void {
19+
validateIcons(this.component, value);
5720
}
5821

5922
public componentWillLoad(): void {

‎packages/components/src/components/@deprecated/input/types-icon.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import type { KoliBriHorizontalIcons, PropLabelWithExpertSlot, Stringified } from '../../../schema';
1+
import type { PropHorizontalIcons, PropLabelWithExpertSlot } from '../../../schema';
22
import type { Generic } from 'adopted-style-sheets';
33

44
type RequiredProps = NonNullable<unknown>;
5-
type OptionalProps = PropLabelWithExpertSlot & {
6-
icons: Stringified<KoliBriHorizontalIcons>;
7-
};
5+
type OptionalProps = PropLabelWithExpertSlot & PropHorizontalIcons;
6+
87
export type Props = Generic.Element.Members<RequiredProps, OptionalProps>;
98
export type Watches = Generic.Element.Watchers<RequiredProps, OptionalProps>;

‎packages/components/src/components/combobox/shadow.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1+
import type { JSX } from '@stencil/core';
2+
import { Component, Element, h, Listen, Method, Prop, State, Watch } from '@stencil/core';
13
import type {
24
ComboboxAPI,
35
ComboboxStates,
46
HideMsgPropType,
7+
IconsHorizontalPropType,
58
IdPropType,
69
InputTypeOnDefault,
7-
KoliBriHorizontalIcons,
810
LabelWithExpertSlotPropType,
911
MsgPropType,
1012
NamePropType,
@@ -15,14 +17,11 @@ import type {
1517
TooltipAlignPropType,
1618
W3CInputValue,
1719
} from '../../schema';
18-
import KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper';
19-
import type { JSX } from '@stencil/core';
20-
import { Component, Element, h, Listen, Method, Prop, State, Watch } from '@stencil/core';
21-
20+
import clsx from 'clsx';
2221
import { nonce } from '../../utils/dev.utils';
22+
import KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper';
2323
import { ComboboxController } from './controller';
2424
import { getRenderStates } from '../input/controller';
25-
import clsx from 'clsx';
2625
import type { InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper';
2726
import KolInputStateWrapperFc from '../../functional-component-wrappers/InputStateWrapper/InputStateWrapper';
2827
import KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper';
@@ -389,7 +388,7 @@ export class KolCombobox implements ComboboxAPI {
389388
/**
390389
* Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).
391390
*/
392-
@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;
391+
@Prop() public _icons?: IconsHorizontalPropType;
393392

394393
/**
395394
* Defines the internal ID of the primary component element.
@@ -505,7 +504,7 @@ export class KolCombobox implements ComboboxAPI {
505504
}
506505

507506
@Watch('_icons')
508-
public validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {
507+
public validateIcons(value?: IconsHorizontalPropType): void {
509508
this.controller.validateIcons(value);
510509
}
511510

‎packages/components/src/components/input-color/shadow.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1+
import type { JSX } from '@stencil/core';
2+
import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';
13
import type {
24
ButtonProps,
35
FocusableElement,
46
HideMsgPropType,
7+
IconsHorizontalPropType,
58
IdPropType,
69
InputColorAPI,
710
InputColorStates,
811
InputTypeOnDefault,
912
InputTypeOnOff,
10-
KoliBriHorizontalIcons,
1113
LabelWithExpertSlotPropType,
1214
MsgPropType,
1315
NamePropType,
@@ -17,8 +19,6 @@ import type {
1719
SyncValueBySelectorPropType,
1820
TooltipAlignPropType,
1921
} from '../../schema';
20-
import type { JSX } from '@stencil/core';
21-
import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';
2222

2323
import { nonce } from '../../utils/dev.utils';
2424
import KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper';
@@ -194,7 +194,7 @@ export class KolInputColor implements InputColorAPI, FocusableElement {
194194
/**
195195
* Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).
196196
*/
197-
@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;
197+
@Prop() public _icons?: IconsHorizontalPropType;
198198

199199
/**
200200
* Defines the internal ID of the primary component element.
@@ -307,7 +307,7 @@ export class KolInputColor implements InputColorAPI, FocusableElement {
307307
}
308308

309309
@Watch('_icons')
310-
public validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {
310+
public validateIcons(value?: IconsHorizontalPropType): void {
311311
this.controller.validateIcons(value);
312312
}
313313

‎packages/components/src/components/input-date/shadow.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ import type {
66
ButtonProps,
77
FocusableElement,
88
HideMsgPropType,
9+
IconsHorizontalPropType,
910
IdPropType,
1011
InputDateAPI,
1112
InputDateStates,
1213
InputDateType,
1314
InputTypeOnDefault,
1415
InputTypeOnOff,
1516
Iso8601,
16-
KoliBriHorizontalIcons,
1717
LabelWithExpertSlotPropType,
1818
MsgPropType,
1919
NamePropType,
@@ -202,7 +202,7 @@ export class KolInputDate implements InputDateAPI, FocusableElement {
202202
/**
203203
* Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).
204204
*/
205-
@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;
205+
@Prop() public _icons?: IconsHorizontalPropType;
206206

207207
/**
208208
* Defines the internal ID of the primary component element.
@@ -349,7 +349,7 @@ export class KolInputDate implements InputDateAPI, FocusableElement {
349349
}
350350

351351
@Watch('_icons')
352-
public validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {
352+
public validateIcons(value?: IconsHorizontalPropType): void {
353353
this.controller.validateIcons(value);
354354
}
355355

‎packages/components/src/components/input-email/shadow.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ import type {
66
ButtonProps,
77
FocusableElement,
88
HideMsgPropType,
9+
IconsHorizontalPropType,
910
IdPropType,
1011
InputEmailAPI,
1112
InputEmailStates,
1213
InputTypeOnDefault,
1314
InputTypeOnOff,
14-
KoliBriHorizontalIcons,
1515
LabelWithExpertSlotPropType,
1616
MsgPropType,
1717
MultiplePropType,
@@ -165,7 +165,7 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
165165
/**
166166
* Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).
167167
*/
168-
@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;
168+
@Prop() public _icons?: IconsHorizontalPropType;
169169

170170
/**
171171
* Defines the internal ID of the primary component element.
@@ -317,7 +317,7 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
317317
}
318318

319319
@Watch('_icons')
320-
public validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {
320+
public validateIcons(value?: IconsHorizontalPropType): void {
321321
this.controller.validateIcons(value);
322322
}
323323

‎packages/components/src/components/input-file/shadow.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ import type {
66
ButtonProps,
77
FocusableElement,
88
HideMsgPropType,
9+
IconsHorizontalPropType,
910
IdPropType,
1011
InputFileAPI,
1112
InputFileStates,
1213
InputTypeOnDefault,
13-
KoliBriHorizontalIcons,
1414
LabelWithExpertSlotPropType,
1515
MsgPropType,
1616
NamePropType,
@@ -142,7 +142,7 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
142142
/**
143143
* Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).
144144
*/
145-
@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;
145+
@Prop() public _icons?: IconsHorizontalPropType;
146146

147147
/**
148148
* Defines the internal ID of the primary component element.
@@ -256,7 +256,7 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
256256
}
257257

258258
@Watch('_icons')
259-
public validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {
259+
public validateIcons(value?: IconsHorizontalPropType): void {
260260
this.controller.validateIcons(value);
261261
}
262262

‎packages/components/src/components/input-number/shadow.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ import type {
66
ButtonProps,
77
FocusableElement,
88
HideMsgPropType,
9+
IconsHorizontalPropType,
910
IdPropType,
1011
InputNumberAPI,
1112
InputNumberStates,
1213
InputTypeOnDefault,
1314
InputTypeOnOff,
14-
KoliBriHorizontalIcons,
1515
LabelWithExpertSlotPropType,
1616
MsgPropType,
1717
NamePropType,
@@ -155,7 +155,7 @@ export class KolInputNumber implements InputNumberAPI, FocusableElement {
155155
/**
156156
* Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).
157157
*/
158-
@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;
158+
@Prop() public _icons?: IconsHorizontalPropType;
159159

160160
/**
161161
* Defines the internal ID of the primary component element.
@@ -301,7 +301,7 @@ export class KolInputNumber implements InputNumberAPI, FocusableElement {
301301
}
302302

303303
@Watch('_icons')
304-
public validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {
304+
public validateIcons(value?: IconsHorizontalPropType): void {
305305
this.controller.validateIcons(value);
306306
}
307307

‎packages/components/src/components/input-password/shadow.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ import type {
66
ButtonProps,
77
FocusableElement,
88
HideMsgPropType,
9+
IconsHorizontalPropType,
910
IdPropType,
1011
InputPasswordAPI,
1112
InputPasswordStates,
1213
InputTypeOnDefault,
1314
InputTypeOnOff,
14-
KoliBriHorizontalIcons,
1515
LabelWithExpertSlotPropType,
1616
MsgPropType,
1717
NamePropType,
@@ -188,7 +188,7 @@ export class KolInputPassword implements InputPasswordAPI, FocusableElement {
188188
/**
189189
* Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).
190190
*/
191-
@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;
191+
@Prop() public _icons?: IconsHorizontalPropType;
192192

193193
/**
194194
* Defines the internal ID of the primary component element.
@@ -342,7 +342,7 @@ export class KolInputPassword implements InputPasswordAPI, FocusableElement {
342342
}
343343

344344
@Watch('_icons')
345-
public validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {
345+
public validateIcons(value?: IconsHorizontalPropType): void {
346346
this.controller.validateIcons(value);
347347
}
348348

‎packages/components/src/components/input-range/shadow.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ import clsx from 'clsx';
55
import type {
66
FocusableElement,
77
HideMsgPropType,
8+
IconsHorizontalPropType,
89
IdPropType,
910
InputRangeAPI,
1011
InputRangeStates,
1112
InputTypeOnDefault,
1213
InputTypeOnOff,
13-
KoliBriHorizontalIcons,
1414
LabelWithExpertSlotPropType,
1515
MsgPropType,
1616
NamePropType,
@@ -224,7 +224,7 @@ export class KolInputRange implements InputRangeAPI, FocusableElement {
224224
/**
225225
* Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).
226226
*/
227-
@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;
227+
@Prop() public _icons?: IconsHorizontalPropType;
228228

229229
/**
230230
* Defines the internal ID of the primary component element.
@@ -347,7 +347,7 @@ export class KolInputRange implements InputRangeAPI, FocusableElement {
347347
}
348348

349349
@Watch('_icons')
350-
public validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {
350+
public validateIcons(value?: IconsHorizontalPropType): void {
351351
this.controller.validateIcons(value);
352352
}
353353

0 commit comments

Comments
 (0)
⚡