(#6350) Merge branch 'develop' into 6350-deps-lock-and-readmes

# Conflicts:
#	pnpm-lock.yaml

packages/components/src/components/@deprecated/input/controller.ts

@@ -1,6 +1,14 @@
 import type { Generic } from 'adopted-style-sheets';
 
-import type { AdjustHeightPropType, ButtonProps, HideErrorPropType, InputTypeOnDefault, LabelWithExpertSlotPropType, MsgPropType } from '@public-ui/schema';
+import type {
+	AdjustHeightPropType,
+	ButtonProps,
+	HideErrorPropType,
+	InputTypeOnDefault,
+	LabelWithExpertSlotPropType,
+	MsgPropType,
+	TooltipAlignPropType,
+} from '@public-ui/schema';
 import {
 	a11yHint,
 	a11yHintDisabled,
@@ -16,6 +24,7 @@ import {
 	validateTabIndex,
 	watchBoolean,
 	watchString,
+	validateTooltipAlign,
 } from '@public-ui/schema';
 
 import { stopPropagation, tryToDispatchKoliBriEvent } from '../../../utils/events';
@@ -50,6 +59,9 @@ export class InputController extends ControlledInputController implements Watche
 			a11yHintDisabled();
 		}
 	}
+	public validateTooltipAlign(value?: TooltipAlignPropType): void {
+		validateTooltipAlign(this.component, value);
+	}
 
 	/**
 	 * @deprecated

packages/components/src/components/input-checkbox/test/html.mock.ts

@@ -0,0 +1,83 @@
+import type { InputCheckboxProps, InputCheckboxStates } from '@public-ui/schema';
+import { mixMembers } from 'stencil-awesome-test';
+import { nonce } from '../../../utils/dev.utils';
+import { KolIconTag, KolInputTag } from '../../../core/component-names';
+import { showExpertSlot } from '@public-ui/schema';
+import { getRenderStates } from '../../input/controller';
+
+export const getInputCheckboxHtml = (props: InputCheckboxProps): string => {
+	const state = mixMembers<InputCheckboxProps, InputCheckboxStates>(
+		{
+			_checked: false,
+			_hideError: false,
+			_icons: {
+				checked: 'codicon codicon-check',
+				indeterminate: 'codicon codicon-remove',
+				unchecked: 'codicon codicon-close',
+			},
+			_id: `id-${nonce()}`,
+			_indeterminate: false,
+			_label: '', // ⚠ required
+			_value: true,
+			_variant: 'default',
+		},
+		props,
+	);
+	const hasExpertSlot = showExpertSlot(state._label);
+	const { ariaDescribedBy } = getRenderStates(state);
+
+	return `
+	<kol-input-checkbox class="kol-input-checkbox" ${state._touched ? `_touched=""` : ''} ${state._alert || state._alert === undefined ? `_alert=""` : ''} >
+	   <mock:shadow-root>
+	     <${KolInputTag}
+					${state._disabled ? `_disabled=""` : ''}
+					${state._hideLabel ? `_hideLabel=""` : ''}
+					${state._touched ? `_touched=""` : ''}
+					${state._required ? `_required=""` : ''}
+					_hint=""
+					_id="${state._id}"
+					_label="${state._label ? `${state._label}` : ''}"
+					_tooltipalign="top"
+					class="checkbox ${state._hideLabel ? 'hide-label' : ''} default"
+					${state._alert || state._alert === undefined ? `_alert=""` : ''}
+			 >
+			 <span slot="label"> ${
+					hasExpertSlot
+						? `<slot name="expert"></slot> `
+						: typeof state._accessKey === 'string'
+							? `
+						 ${state._label}
+						 <span class="access-key-hint" aria-hidden="true">
+						 ${state._accessKey}
+						 </span>
+					  `
+							: ` <span>${state._label}</span> `
+				}
+				</span>
+				<label slot="input" class="checkbox-container">
+				<${KolIconTag}
+					class="icon"
+					_icons="${state._indeterminate ? state._icons.indeterminate : state._checked ? state._icons.checked : state._icons.unchecked}"
+					_label=""
+				> </${KolIconTag}>
+				<input
+					class="checkbox-input-element${state._variant === 'button' ? ' visually-hidden' : ''}"
+					title=""
+					${ariaDescribedBy.length > 0 ? `aria-describedby="${ariaDescribedBy.join(' ')}"` : ''}
+
+					${state._hideLabel && typeof state._label === 'string' ? `aria-label="${state._label}"` : ''}
+					id="${state._id}"
+					type="checkbox"
+					${state._disabled ? `disabled=""` : ''}
+					${state._required ? `required=""` : ''}
+					${state._name ? `name=""` : ''}
+					${state._checked ? `checked=""` : ''}
+					${state._indeterminate ? `indeterminate=""` : ''}
+					${state._tabIndex ? `tabIndex=""` : ''}
+
+				/>
+			</label>
+	     </${KolInputTag}>
+	   </mock:shadow-root>
+	</kol-input-checkbox>`;
+};

packages/components/src/components/input-checkbox/test/snapshot.spec.tsx

@@ -0,0 +1,34 @@
+import { executeTests } from 'stencil-awesome-test';
+
+import { h } from '@stencil/core';
+import { newSpecPage } from '@stencil/core/testing';
+
+import { getInputCheckboxHtml } from './html.mock';
+
+import type { SpecPage } from '@stencil/core/testing';
+import type { InputCheckboxProps } from '@public-ui/schema';
+import { KolInputCheckbox } from '../component';
+
+executeTests<InputCheckboxProps>(
+	'InputCheckbox',
+	async (props): Promise<SpecPage> => {
+		const page = await newSpecPage({
+			components: [KolInputCheckbox],
+			template: () => <kol-input-checkbox {...props} />,
+		});
+		return page;
+	},
+	{
+		_label: ['Label'],
+		_hideLabel: [true, false],
+		_disabled: [true, false],
+		_alert: [true, false],
+		_required: [true, false],
+		_touched: [true, false],
+	},
+	getInputCheckboxHtml,
+	{
+		execMode: 'default', // ready
+		needTimers: true,
+	},
+);

packages/components/src/components/input-color/test/html.mock.ts

@@ -0,0 +1,66 @@
+import type { InputColorProps, InputColorStates } from '@public-ui/schema';
+import { mixMembers } from 'stencil-awesome-test';
+import { nonce } from '../../../utils/dev.utils';
+import { KolInputTag } from '../../../core/component-names';
+import { showExpertSlot } from '@public-ui/schema';
+import { getRenderStates } from '../../input/controller';
+
+export const getInputColorHtml = (props: InputColorProps): string => {
+	const state = mixMembers<InputColorProps, InputColorStates>(
+		{
+			_autoComplete: 'off',
+			_hideError: false,
+			_id: `id-${nonce()}`,
+			_label: '', // ⚠ required
+			_suggestions: [],
+		},
+		props,
+	);
+	const hasExpertSlot = showExpertSlot(state._label);
+	const { ariaDescribedBy } = getRenderStates(state);
+
+	return `
+	<kol-input-color class="kol-input-color"  ${state._touched ? `_touched=""` : ''} ${state._alert || state._alert === undefined ? `_alert=""` : ''} >
+	   <mock:shadow-root>
+	     <${KolInputTag}
+					${state._disabled ? `_disabled=""` : ''}
+					${state._hideLabel ? `_hideLabel=""` : ''}
+					${state._touched ? `_touched=""` : ''}
+					_hint=""
+					_id="${state._id}"
+					_label="${state._label ? `${state._label}` : ''}"
+					_tooltipalign="top"
+					class="color ${state._hideLabel ? 'hide-label' : ''} "
+					role="presentation"
+			 >
+			 <span slot="label"> ${
+					hasExpertSlot
+						? `<slot name="expert"></slot> `
+						: typeof state._accessKey === 'string'
+							? `
+						 ${state._label}
+						 <span class="access-key-hint" aria-hidden="true">
+						 ${state._accessKey}
+						 </span>
+					  `
+							: ` <span>${state._label}</span> `
+				}
+				</span>
+	       <div slot="input">
+	        	<input
+							${state._disabled ? `disabled=""` : ''}
+							${state._hideLabel && typeof state._label === 'string' ? `aria-label="${state._label}"` : ''}
+							autocapitalize="off"
+							autocomplete="off"
+							autocorrect="off"
+							id="${state._id}"
+							slot="input"
+							spellcheck="false"
+							type="color"
+							${ariaDescribedBy.length > 0 ? `aria-describedby="${ariaDescribedBy.join(' ')}"` : ''}
+						>
+	       </div>
+	     </${KolInputTag}>
+	   </mock:shadow-root>
+	</kol-input-color>`;
+};

packages/components/src/components/input-color/test/snapshot.spec.tsx

@@ -0,0 +1,41 @@
+import { executeTests } from 'stencil-awesome-test';
+
+import { h } from '@stencil/core';
+import { newSpecPage } from '@stencil/core/testing';
+
+import { getInputColorHtml } from './html.mock';
+
+import type { SpecPage } from '@stencil/core/testing';
+import type { InputColorProps } from '@public-ui/schema';
+import { KolInputColor } from '../component';
+
+executeTests<InputColorProps>(
+	'InputColor',
+	async (props): Promise<SpecPage> => {
+		const page = await newSpecPage({
+			components: [KolInputColor],
+			template: () => <kol-input-color {...props} />,
+		});
+		return page;
+	},
+	{
+		_label: ['Label'],
+		_hideLabel: [true, false],
+		_disabled: [true, false],
+		_alert: [true, false],
+		_icons: [[{ left: 'codicon codicon-home' }]],
+		_touched: [true, false],
+		_smartButton: [
+			{
+				_icons: ['codicon codicon-eye'],
+				_hideLabel: true,
+				_label: 'einblenden',
+			},
+		],
+	},
+	getInputColorHtml,
+	{
+		execMode: 'default', // ready
+		needTimers: true,
+	},
+);

packages/components/src/components/input-date/test/html.mock.ts

@@ -0,0 +1,70 @@
+import type { InputDateProps, InputDateStates } from '@public-ui/schema';
+import { mixMembers } from 'stencil-awesome-test';
+import { nonce } from '../../../utils/dev.utils';
+import { KolInputTag } from '../../../core/component-names';
+import { showExpertSlot } from '@public-ui/schema';
+import { getRenderStates } from '../../input/controller';
+
+export const getInputDateHtml = (props: InputDateProps): string => {
+	const state = mixMembers<InputDateProps, InputDateStates>(
+		{
+			_autoComplete: 'off',
+			_hasValue: false,
+			_hideError: false,
+			_id: `id-${nonce()}`,
+			_label: '', // ⚠ required
+			_suggestions: [],
+			_type: 'datetime-local',
+		},
+		props,
+	);
+	const hasExpertSlot = showExpertSlot(state._label);
+	const { ariaDescribedBy } = getRenderStates(state);
+	return `
+	<kol-input-date class="kol-input-date" ${state._touched ? `_touched=""` : ''} ${state._alert || state._alert === undefined ? `_alert=""` : ''} >
+	   <mock:shadow-root>
+	     <${KolInputTag}
+					${state._disabled ? `_disabled=""` : ''}
+					${state._hideLabel ? `_hideLabel=""` : ''}
+					${state._required ? `_required=""` : ''}
+					${state._readOnly ? `_readonly=""` : ''}
+					${state._touched ? `_touched=""` : ''}
+					_hint=""
+					_id="${state._id}"
+					_label="${state._label ? `${state._label}` : ''}"
+					_tooltipalign="top"
+					class="date ${state._hideLabel ? `hide-label` : ''}"
+			 >
+			 <span slot="label"> ${
+					hasExpertSlot
+						? `<slot name="expert"></slot> `
+						: typeof state._accessKey === 'string'
+							? `
+						 ${state._label}
+						 <span class="access-key-hint" aria-hidden="true">
+						 ${state._accessKey}
+						 </span>
+					  `
+							: ` <span>${state._label}</span> `
+				}
+				</span>
+	       <div slot="input">
+	        	<input
+							${state._disabled ? `disabled=""` : ''}
+							${state._hideLabel && typeof state._label === 'string' ? `aria-label="${state._label}"` : ''}
+							autocapitalize="off"
+							autocomplete="off"
+							autocorrect="off"
+							id="${state._id}"
+							max=${state._max ? state._max : '9999-12-31'}
+							spellcheck="false"
+							type="date"
+							${state._readOnly ? `readonly=""` : ''}
+							${state._required ? `required=""` : ''}
+							${ariaDescribedBy.length > 0 ? `aria-describedby="${ariaDescribedBy.join(' ')}"` : ''}
+						>
+	       </div>
+	     </${KolInputTag}>
+	   </mock:shadow-root>
+	</kol-input-date>`;
+};

packages/components/src/components/input-date/test/snapshot.spec.tsx

@@ -0,0 +1,43 @@
+import { executeTests } from 'stencil-awesome-test';
+
+import { h } from '@stencil/core';
+import { newSpecPage } from '@stencil/core/testing';
+
+import { getInputDateHtml } from './html.mock';
+
+import type { SpecPage } from '@stencil/core/testing';
+import type { InputDateProps } from '@public-ui/schema';
+import { KolInputDate } from '../component';
+
+executeTests<InputDateProps>(
+	'InputDate',
+	async (props): Promise<SpecPage> => {
+		const page = await newSpecPage({
+			components: [KolInputDate],
+			template: () => <kol-input-date {...props} />,
+		});
+		return page;
+	},
+	{
+		_label: ['Label'],
+		_hideLabel: [true, false],
+		_disabled: [true, false],
+		_alert: [true, false],
+		_readOnly: [true, false],
+		_msg: [{ _type: 'error', _description: 'Error message' }],
+		_required: [true, false],
+		_touched: [true, false],
+		_smartButton: [
+			{
+				_icons: ['codicon codicon-eye'],
+				_hideLabel: true,
+				_label: 'einblenden',
+			},
+		],
+	},
+	getInputDateHtml,
+	{
+		execMode: 'default', // ready
+		needTimers: true,
+	},
+);