Forms overhaul (including several components)

.changeset/modern-comics-grow.md

@@ -0,0 +1,8 @@
+---
+'@siemens/ix-angular': minor
+'@siemens/ix-react': minor
+'@siemens/ix': minor
+'@siemens/ix-vue': minor
+---
+
+feat(forms): new forms and validation concept

.gitignore

@@ -18,6 +18,7 @@ node_modules
 *.launch
 .settings/
 *.sublime-workspace
+.obsidian
 
 # IDE - VSCode
 .vscode/*

SECURITY.md

@@ -7,6 +7,27 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 -->
 
-# Reporting Security Issues
+# Security Policy
 
-If you believe you have found a security vulnerability in iX, we encourage you to let us know right away. We will investigate all legitimate reports and do our best to quickly fix the problem.
+Siemens takes the security of its code seriously. If you think you have found a security vulnerability,
+please read the next sections and follow the instructions to report your finding.
+
+## Scope of this policy
+
+This is the default security policy for all repositories within the `siemens` organization on GitHub.com.
+
+It does not apply for reposities that have their own security policy.
+It also does not apply for forks where you should follow the upstream policy instead.
+
+If you are unsure whether the policy applies feel free to reach out via the channels mentioned below and we'll be happy to help.
+
+## Reporting a Vulnerability
+
+Please DO NOT report any potential security vulnerability via a public channel (mailing list, GitHub issue, etc.).
+Instead, [report the vulnerability privately via GitHub](https://docs.github.com/en/code-security/security-advisories/guidance-on-reporting-and-writing/privately-reporting-a-security-vulnerability)
+(if enabled for the repository) or [contact us via email](mailto:[email protected]).
+
+Please provide a detailed description of the issue, the steps to reproduce it, the affected version(s) and, if already available,
+a proposal for a fix. You should receive a response within 5 working days. If for some reason you do not, please follow up via email to ensure we received your original message.
+
+If we confirm the issue as a vulnerability, we will publish an advisory (e.g. on GitHub) and give credits for your report if desired. We follow the [coordinated vulnerability disclosure](https://vuls.cert.org/confluence/display/CVD) model and will define an appropriate disclosure timeline together with you.

package.json

@@ -61,5 +61,11 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "@stencil/[email protected]": "patches/@[email protected]",
+      "@stencil/[email protected]": "patches/@[email protected]"
+    }
   }
 }

packages/aggrid/tests/aggrid.e2e.ts

@@ -27,6 +27,7 @@ regressionTest.describe('aggrid', () => {
     await expect(filterMenu).toBeVisible();
 
     const inputHandle = filterMenu.getByPlaceholder('Filter...');
+    await inputHandle.click();
     await inputHandle.fill('Test');
 
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();

packages/angular-test-app/src/app/app-routing.module.ts

@@ -181,6 +181,44 @@ import VerticalTabs from '../preview-examples/vertical-tabs';
 import VerticalTabsWithAvatar from '../preview-examples/vertical-tabs-with-avatar';
 import Workflow from '../preview-examples/workflow';
 import WorkflowVertical from '../preview-examples/workflow-vertical';
+import CustomField from '../preview-examples/custom-field';
+import CustomFieldValidation from '../preview-examples/custom-field-validation';
+import DateField from '../preview-examples/date-field';
+import DateFieldDisabled from '../preview-examples/date-field-disabled';
+import DateFieldLabel from '../preview-examples/date-field-label';
+import DateFieldReadonly from '../preview-examples/date-field-readonly';
+import DateFieldValidation from '../preview-examples/date-field-validation';
+import NumberField from '../preview-examples/number-field';
+import NumberFieldDisabled from '../preview-examples/number-field-disabled';
+import NumberFieldLabel from '../preview-examples/number-field-label';
+import NumberFieldReadonly from '../preview-examples/number-field-readonly';
+import NumberFieldStepperButton from '../preview-examples/number-field-stepper-button';
+import NumberFieldValidation from '../preview-examples/number-field-validation';
+import Radio from '../preview-examples/radio';
+import Radiobutton from '../preview-examples/radio-button';
+import RadioDisabled from '../preview-examples/radio-disabled';
+import RadioGroup from '../preview-examples/radio-group';
+import RadioValidation from '../preview-examples/radio-validation';
+import SelectValidation from '../preview-examples/select-validation';
+import TextField from '../preview-examples/text-field';
+import TextFieldDisabled from '../preview-examples/text-field-disabled';
+import TextFieldLabel from '../preview-examples/text-field-label';
+import TextFieldPattern from '../preview-examples/text-field-pattern';
+import TextFieldReadonly from '../preview-examples/text-field-readonly';
+import TextFieldTypes from '../preview-examples/text-field-types';
+import TextFieldValidation from '../preview-examples/text-field-validation';
+import TextareaField from '../preview-examples/textarea-field';
+import TextareaFieldDisabled from '../preview-examples/textarea-field-disabled';
+import TextareaFieldReadonly from '../preview-examples/textarea-field-readonly';
+import TextareaFieldRowsCols from '../preview-examples/textarea-field-rows-cols';
+import TextareaFieldValidation from '../preview-examples/textarea-field-validation';
+import ToggleButtonPrimary from '../preview-examples/toggle-button-primary';
+import ValidationSelect from 'src/preview-examples/validation-select';
+import ValidationTextField from 'src/preview-examples/validation-text-field';
+import FormValidation from 'src/preview-examples/form-validation';
+import LayoutAuto from 'src/preview-examples/layout-auto';
+import LayoutAutoCustom from 'src/preview-examples/layout-auto-custom';
+import FormCheckboxGroupIndeterminate from "../preview-examples/form-checkbox-group-indeterminate";
 
 const routes: Routes = [
   {
@@ -214,6 +252,22 @@ const routes: Routes = [
         path: 'content',
         component: ContentExample,
       },
+      {
+        path: 'custom-field',
+        component: CustomField,
+      },
+      {
+        path: 'custom-field-validation',
+        component: CustomFieldValidation,
+      },
+      {
+        path: 'buttons',
+        component: Buttons,
+      },
+      {
+        path: 'button-group',
+        component: ButtonGroup,
+      },
       {
         path: 'aggrid',
         component: AgGrid,
@@ -323,6 +377,10 @@ const routes: Routes = [
         path: 'checkbox',
         component: Checkbox,
       },
+      {
+        path: 'form-checkbox-group-indeterminate',
+        component: FormCheckboxGroupIndeterminate,
+      },
       {
         path: 'chip',
         component: Chip,
@@ -335,6 +393,30 @@ const routes: Routes = [
         path: 'date-dropdown-user-range',
         component: DateDropdownUserRange,
       },
+      {
+        path: 'date-field',
+        component: DateField,
+      },
+      {
+        path: 'date-field-disabled',
+        component: DateFieldDisabled,
+      },
+      {
+        path: 'date-field-label',
+        component: DateFieldLabel,
+      },
+      {
+        path: 'date-field-readonly',
+        component: DateFieldReadonly,
+      },
+      {
+        path: 'date-field-validation',
+        component: DateFieldValidation,
+      },
+      {
+        path: 'datepicker',
+        component: Datepicker,
+      },
       {
         path: 'content-header-no-back',
         component: ContentHeaderNoBack,
@@ -632,6 +714,46 @@ const routes: Routes = [
       },
       { path: 'pane', component: Pane },
       { path: 'pane-layout', component: PaneLayout },
+      { path: 'pill', component: Pill },
+      { path: 'pill-variants', component: PillVariants },
+      { path: 'popover-news', component: PopoverNews },
+      { path: 'radio-button', component: Radiobutton },
+      { path: 'radio', component: Radio },
+      { path: 'radio-disabled', component: RadioDisabled },
+      { path: 'radio-group', component: RadioGroup },
+      { path: 'radio-validation', component: RadioValidation },
+      { path: 'select-editable', component: SelectEditable },
+      { path: 'select-multiple', component: SelectMultiple },
+      { path: 'select-ng-model', component: SelectNgModel },
+      { path: 'select-validation', component: SelectValidation },
+      { path: 'select', component: Select },
+      { path: 'settings', component: Settings },
+      { path: 'spinner', component: Spinner },
+      { path: 'spinner-large', component: SpinnerLarge },
+      { path: 'split-button-icons', component: SplitButtonIcons },
+      { path: 'split-button', component: SplitButton },
+      { path: 'tabs', component: Tabs },
+      { path: 'tabs-rounded', component: TabsRounded },
+      { path: 'textarea', component: Textarea },
+      { path: 'textarea-disabled', component: TextareaDisabled },
+      { path: 'textarea-readonly', component: TextareaReadonly },
+      { path: 'textarea-field', component: TextareaField },
+      { path: 'textarea-field-disabled', component: TextareaFieldDisabled },
+      { path: 'textarea-field-disabled', component: TextareaFieldReadonly },
+      { path: 'textarea-field-rows-cols', component: TextareaFieldRowsCols },
+      { path: 'textarea-field-validation', component: TextareaFieldValidation },
+      { path: 'text-field', component: TextField },
+      { path: 'text-field-disabled', component: TextFieldDisabled },
+      { path: 'text-field-label', component: TextFieldLabel },
+      { path: 'text-field-label', component: TextFieldPattern },
+      { path: 'text-field-readonly', component: TextFieldReadonly },
+      { path: 'text-field-types', component: TextFieldTypes },
+      { path: 'text-field-types', component: TextFieldValidation },
+      { path: 'theme-switcher', component: ThemeService },
+      { path: 'tile', component: Tile },
+      { path: 'timepicker', component: Timepicker },
+      { path: 'toggle-button-primary', component: ToggleButtonPrimary },
+      { path: 'toggle-button-secondary', component: ToggleButtonSecondary },
       {
         path: 'pill',
         component: Pill,
@@ -753,6 +875,37 @@ const routes: Routes = [
         path: 'toggle-button-primary-outline',
         component: ToggleButtonPrimaryOutline,
       },
+      { path: 'toggle-disabled', component: ToggleDisabled },
+      { path: 'toggle-custom-label', component: ToggleCustomLabel },
+      { path: 'toggle-ng-model', component: ToggleNgModel },
+      { path: 'toggle', component: Toggle },
+      { path: 'upload', component: Upload },
+      { path: 'vertical-tabs-with-avatar', component: VerticalTabsWithAvatar },
+      { path: 'vertical-tabs', component: VerticalTabs },
+      { path: 'validation', component: Validation },
+      { path: 'workflow', component: Workflow },
+      { path: 'workflow-vertical', component: WorkflowVertical },
+      { path: 'map-navigation', component: MapNavigation },
+      { path: 'map-navigation-overlay', component: MapNavigationOverlay },
+      { path: 'number-field', component: NumberField },
+      { path: 'number-field-disabled', component: NumberFieldDisabled },
+      { path: 'number-field-label', component: NumberFieldLabel },
+      { path: 'number-field-readonly', component: NumberFieldReadonly },
+      {
+        path: 'number-field-stepper-button',
+        component: NumberFieldStepperButton,
+      },
+      { path: 'number-field-validation', component: NumberFieldValidation },
+      { path: 'tooltip', component: Tooltip },
+      { path: 'modal-by-instance', component: ModalByInstance },
+      { path: 'push-card', component: PushCard },
+      { path: 'action-card', component: ActionCard },
+      { path: 'card', component: Card },
+      { path: 'card-list', component: CardList },
+      { path: 'empty-state', component: EmptyState },
+      { path: 'empty-state-compact', component: EmptyStateCompact },
+      { path: 'empty-state-compact-break', component: EmptyStateCompactBreak },
+      { path: 'key-value', component: KeyValue },
       {
         path: 'toggle-button-secondary-ghost',
         component: ToggleButtonSecondaryGhost,
@@ -825,6 +978,22 @@ const routes: Routes = [
         path: 'workflow',
         component: Workflow,
       },
+      { path: 'key-value-list-with-icon', component: KeyValueListWithIcon },
+      { path: 'key-value-list-striped', component: KeyValueListStriped },
+      { path: 'menu-category', component: MenuCategory },
+      { path: 'slider', component: Slider },
+      { path: 'slider-trace', component: SliderTrace },
+      { path: 'slider-marker', component: SliderMarker },
+      { path: 'slider-error', component: SliderError },
+      { path: 'grid', component: Grid },
+      { path: 'grid-size', component: GridSize },
+      { path: 'grid-padding', component: GridPadding },
+      { path: 'modal-sizes', component: ModalSizes },
+      { path: 'validation-select', component: ValidationSelect },
+      { path: 'validation-text-field', component: ValidationTextField },
+      { path: 'form-validation', component: FormValidation },
+      { path: 'layout-auto', component: LayoutAuto },
+      { path: 'layout-auto-custom', component: LayoutAutoCustom },
     ],
   },
 ];

packages/angular-test-app/src/app/app.component.html

@@ -3,5 +3,4 @@
 
 SPDX-License-Identifier: MIT
 -->
-
 <router-outlet></router-outlet>