fix: centralize checkbox icons prop

Author: deleonio

packages/components/src/components/input-checkbox/controller.ts

@@ -2,13 +2,13 @@ import type {
 	CheckedPropType,
 	IndeterminatePropType,
 	InputCheckboxIconsProp,
+	InputCheckboxIconsPropType,
 	InputCheckboxIconsState,
 	InputCheckboxProps,
 	InputCheckboxVariantPropType,
 	InputCheckboxWatches,
 	LabelAlignPropType,
 	StencilUnknown,
-	Stringified,
 } from '../../schema';
 import { isString, setState, validateChecked, validateIndeterminate, validateLabelAlign, validateVariantInputCheckbox, watchValidator } from '../../schema';
 
@@ -36,15 +36,16 @@ export class InputCheckboxController extends InputCheckboxRadioController implem
 		this.setFormAssociatedCheckboxValue(this.component.state._value as StencilUnknown);
 	}
 
-	public validateIcons(value?: Stringified<InputCheckboxIconsProp>): void {
-		watchValidator(
+	public validateIcons(value?: InputCheckboxIconsPropType): void {
+		watchValidator<unknown>(
 			this.component,
 			'_icons',
-			(value?: Record<string, unknown>): boolean => {
-				return typeof value === 'object' && value !== null && (isString(value.checked, 1) || isString(value.indeterminate, 1) || isString(value.unchecked, 1));
+			(value): boolean => {
+				const v = value as Record<string, unknown>;
+				return typeof v === 'object' && v !== null && (isString(v.checked, 1) || isString(v.indeterminate, 1) || isString(v.unchecked, 1));
 			},
 			new Set(['InputCheckboxIcons']),
-			value,
+			value as unknown,
 			{
 				hooks: {
 					beforePatch: (nextValue: unknown, nextState: Map<string, unknown>, component: Generic.Element.Component) => {

packages/components/src/components/input-date/controller.ts

@@ -132,12 +132,13 @@ export class InputDateController extends InputIconController implements InputDat
 		return watchValidator(
 			this.component,
 			propName,
-			(value: unknown): boolean => value === undefined || value === null || value === '' || this.validateDateString(value),
+			(value): boolean => value === undefined || value === null || value === '' || this.validateDateString(value),
 			new Set(['Date', 'string{ISO-8601}']),
 			InputDateController.tryParseToString(value, this.component._type, this.component._step),
 			{
 				hooks: {
-					afterPatch: (value: string) => {
+					// eslint-disable-next-line @typescript-eslint/no-unused-vars
+					afterPatch: (value: unknown, _state: Record<string, unknown>, _component: Generic.Element.Component, _key: string): void => {
 						if (typeof value === 'string' && afterPatch) {
 							afterPatch(value);
 						}

packages/components/src/schema/components/input-checkbox.ts

@@ -7,6 +7,7 @@ import type {
 	PropHideLabel,
 	PropHideMsg,
 	PropHint,
+	PropIconsInputCheckbox,
 	PropIndeterminate,
 	PropLabelAlign,
 	PropLabelWithExpertSlot,
@@ -17,42 +18,20 @@ import type {
 	PropSyncValueBySelector,
 	PropTouched,
 	PropVariantInputCheckbox,
+	InputCheckboxIconsState,
 } from '../props';
-import type { AnyIconFontClass, InputTypeOnDefault, StencilUnknown, Stringified } from '../types';
-
-export type InputCheckboxIconsProp =
-	| {
-			checked: AnyIconFontClass;
-			indeterminate?: AnyIconFontClass;
-			unchecked?: AnyIconFontClass;
-	  }
-	| {
-			checked?: AnyIconFontClass;
-			indeterminate: AnyIconFontClass;
-			unchecked?: AnyIconFontClass;
-	  }
-	| {
-			checked?: AnyIconFontClass;
-			indeterminate?: AnyIconFontClass;
-			unchecked: AnyIconFontClass;
-	  };
-
-export type InputCheckboxIconsState = {
-	checked: AnyIconFontClass;
-	indeterminate: AnyIconFontClass;
-	unchecked: AnyIconFontClass;
-};
+import type { InputTypeOnDefault, StencilUnknown } from '../types';
 
 type RequiredProps = PropLabelWithExpertSlot;
 type OptionalProps = {
-	icons: Stringified<InputCheckboxIconsProp>;
 	on: InputTypeOnDefault;
 	value: StencilUnknown;
 } & PropAccessKey &
 	PropChecked &
 	PropDisabled &
 	PropHideMsg &
 	PropHideLabel &
+	PropIconsInputCheckbox &
 	PropIndeterminate &
 	PropName &
 	PropRequired &

packages/components/src/schema/props/icons-input-checkbox.ts

@@ -0,0 +1,59 @@
+import type { Generic } from 'adopted-style-sheets';
+
+import type { AnyIconFontClass, Stringified } from '../types';
+import { isString } from '../validators';
+import { watchValidator } from '../utils';
+
+export type InputCheckboxIconsProp =
+	| {
+			checked: AnyIconFontClass;
+			indeterminate?: AnyIconFontClass;
+			unchecked?: AnyIconFontClass;
+	  }
+	| {
+			checked?: AnyIconFontClass;
+			indeterminate: AnyIconFontClass;
+			unchecked?: AnyIconFontClass;
+	  }
+	| {
+			checked?: AnyIconFontClass;
+			indeterminate?: AnyIconFontClass;
+			unchecked: AnyIconFontClass;
+	  };
+
+export type InputCheckboxIconsState = {
+	checked: AnyIconFontClass;
+	indeterminate: AnyIconFontClass;
+	unchecked: AnyIconFontClass;
+};
+
+export type InputCheckboxIconsPropType = Stringified<InputCheckboxIconsProp>;
+
+export type PropIconsInputCheckbox = {
+	icons: InputCheckboxIconsPropType;
+};
+
+export const validateIconsInputCheckbox = (component: Generic.Element.Component, value?: InputCheckboxIconsPropType): void => {
+	watchValidator<unknown>(
+		component,
+		'_icons',
+		(value): boolean =>
+			typeof value === 'object' &&
+			value !== null &&
+			(isString((value as Record<string, unknown>).checked, 1) ||
+				isString((value as Record<string, unknown>).indeterminate, 1) ||
+				isString((value as Record<string, unknown>).unchecked, 1)),
+		new Set(['InputCheckboxIcons']),
+		value as unknown,
+		{
+			hooks: {
+				beforePatch: (nextValue: unknown, nextState: Map<string, unknown>, component: Generic.Element.Component) => {
+					nextState.set('_icons', {
+						...(component.state._icons as InputCheckboxIconsState),
+						...(nextValue as InputCheckboxIconsProp),
+					});
+				},
+			},
+		},
+	);
+};

packages/components/src/schema/props/index.ts

@@ -36,6 +36,7 @@ export * from './hide-msg';
 export * from './hint';
 export * from './href';
 export * from './icons';
+export * from './icons-input-checkbox';
 export * from './id';
 export * from './image-source';
 export * from './image-sizes';