docs(input): add info about slots and examples for input, number-inpu…

…t, date-input (#1616)

Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>

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

@@ -57,6 +57,7 @@ import DateInputDisabled from '../preview-examples/date-input-disabled';
 import DateInputLabel from '../preview-examples/date-input-label';
 import DateInputReadonly from '../preview-examples/date-input-readonly';
 import DateInputValidation from '../preview-examples/date-input-validation';
+import DateInputWithSlots from '../preview-examples/date-input-with-slots';
 import Datepicker from '../preview-examples/datepicker';
 import DatepickerLocale from '../preview-examples/datepicker-locale';
 import DatepickerRange from '../preview-examples/datepicker-range';
@@ -99,6 +100,8 @@ import FormCheckboxDisabled from '../preview-examples/form-checkbox-disabled';
 import FormCheckboxGroup from '../preview-examples/form-checkbox-group';
 import FormCheckboxGroupIndeterminate from '../preview-examples/form-checkbox-group-indeterminate';
 import FormCheckboxValidation from '../preview-examples/form-checkbox-validation';
+import FormLayoutAuto from '../preview-examples/form-layout-auto';
+import FormLayoutGrid from '../preview-examples/form-layout-grid';
 import FormValidation from '../preview-examples/form-validation';
 import Grid from '../preview-examples/grid';
 import GridPadding from '../preview-examples/grid-padding';
@@ -127,6 +130,7 @@ import InputPattern from '../preview-examples/input-pattern';
 import InputReadonly from '../preview-examples/input-readonly';
 import InputTypes from '../preview-examples/input-types';
 import InputValidation from '../preview-examples/input-validation';
+import InputWithSlots from '../preview-examples/input-with-slots';
 import KeyValue from '../preview-examples/key-value';
 import KeyValueList from '../preview-examples/key-value-list';
 import KeyValueListStriped from '../preview-examples/key-value-list-striped';
@@ -157,6 +161,7 @@ import NumberInputLabel from '../preview-examples/number-input-label';
 import NumberInputReadonly from '../preview-examples/number-input-readonly';
 import NumberInputStepperButton from '../preview-examples/number-input-stepper-button';
 import NumberInputValidation from '../preview-examples/number-input-validation';
+import NumberInputWithSlots from '../preview-examples/number-input-with-slots';
 import Pagination from '../preview-examples/pagination';
 import PaginationAdvanced from '../preview-examples/pagination-advanced';
 import Pane from '../preview-examples/pane';
@@ -222,8 +227,6 @@ 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 FormLayoutAuto from 'src/preview-examples/form-layout-auto';
-import FormLayoutGrid from 'src/preview-examples/form-layout-grid';
 
 const routes: Routes = [
   {
@@ -434,6 +437,10 @@ const routes: Routes = [
         path: 'date-input-validation',
         component: DateInputValidation,
       },
+      {
+        path: 'date-input-with-slots',
+        component: DateInputWithSlots,
+      },
       {
         path: 'datepicker',
         component: Datepicker,
@@ -770,6 +777,7 @@ const routes: Routes = [
       { path: 'input-readonly', component: InputReadonly },
       { path: 'input-types', component: InputTypes },
       { path: 'input-validation', component: InputValidation },
+      { path: 'input-with-slots', component: InputWithSlots },
       { path: 'theme-switcher', component: ThemeService },
       { path: 'tile', component: Tile },
       { path: 'timepicker', component: Timepicker },
@@ -901,6 +909,7 @@ const routes: Routes = [
         component: NumberInputStepperButton,
       },
       { path: 'number-input-validation', component: NumberInputValidation },
+      { path: 'number-input-with-slots', component: NumberInputWithSlots },
       { path: 'tooltip', component: Tooltip },
       { path: 'modal-by-instance', component: ModalByInstance },
       { path: 'push-card', component: PushCard },

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

@@ -65,6 +65,7 @@ import DateInputDisabled from '../preview-examples/date-input-disabled';
 import DateInputLabel from '../preview-examples/date-input-label';
 import DateInputReadonly from '../preview-examples/date-input-readonly';
 import DateInputValidation from '../preview-examples/date-input-validation';
+import DateInputWithSlots from '../preview-examples/date-input-with-slots';
 import Datepicker from '../preview-examples/datepicker';
 import DatepickerLocale from '../preview-examples/datepicker-locale';
 import DatepickerRange from '../preview-examples/datepicker-range';
@@ -107,6 +108,8 @@ import FormCheckboxDisabled from '../preview-examples/form-checkbox-disabled';
 import FormCheckboxGroup from '../preview-examples/form-checkbox-group';
 import FormCheckboxGroupIndeterminate from '../preview-examples/form-checkbox-group-indeterminate';
 import FormCheckboxValidation from '../preview-examples/form-checkbox-validation';
+import FormLayoutAuto from '../preview-examples/form-layout-auto';
+import FormLayoutGrid from '../preview-examples/form-layout-grid';
 import FormValidation from '../preview-examples/form-validation';
 import Grid from '../preview-examples/grid';
 import GridPadding from '../preview-examples/grid-padding';
@@ -135,6 +138,7 @@ import InputPattern from '../preview-examples/input-pattern';
 import InputReadonly from '../preview-examples/input-readonly';
 import InputTypes from '../preview-examples/input-types';
 import InputValidation from '../preview-examples/input-validation';
+import InputWithSlots from '../preview-examples/input-with-slots';
 import KeyValue from '../preview-examples/key-value';
 import KeyValueList from '../preview-examples/key-value-list';
 import KeyValueListStriped from '../preview-examples/key-value-list-striped';
@@ -165,6 +169,7 @@ import NumberInputLabel from '../preview-examples/number-input-label';
 import NumberInputReadonly from '../preview-examples/number-input-readonly';
 import NumberInputStepperButton from '../preview-examples/number-input-stepper-button';
 import NumberInputValidation from '../preview-examples/number-input-validation';
+import NumberInputWithSlots from '../preview-examples/number-input-with-slots';
 import Pagination from '../preview-examples/pagination';
 import PaginationAdvanced from '../preview-examples/pagination-advanced';
 import Pane from '../preview-examples/pane';
@@ -230,8 +235,6 @@ 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 FormLayoutAuto from 'src/preview-examples/form-layout-auto';
-import FormLayoutGrid from 'src/preview-examples/form-layout-grid';
 
 @NgModule({
   declarations: [
@@ -284,6 +287,7 @@ import FormLayoutGrid from 'src/preview-examples/form-layout-grid';
     DateInputLabel,
     DateInputReadonly,
     DateInputValidation,
+    DateInputWithSlots,
     ContentExample,
     DateDropdown,
     DateDropdownUserRange,
@@ -413,6 +417,7 @@ import FormLayoutGrid from 'src/preview-examples/form-layout-grid';
     InputReadonly,
     InputTypes,
     InputValidation,
+    InputWithSlots,
     InputPattern,
     TextareaLegacyReadonly,
     TextareaLegacy,
@@ -450,6 +455,7 @@ import FormLayoutGrid from 'src/preview-examples/form-layout-grid';
     NumberInputReadonly,
     NumberInputStepperButton,
     NumberInputValidation,
+    NumberInputWithSlots,
     TabsRounded,
     DatepickerRange,
     Tooltip,

packages/angular-test-app/src/preview-examples/date-input-with-slots.html

@@ -0,0 +1,13 @@
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+
+SPDX-License-Identifier: MIT
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<ix-date-input value="1970/01/01">
+  <ix-icon name="bulb" slot="start" size="16"></ix-icon>
+  <ix-typography slot="end">Slot</ix-typography>
+</ix-date-input>

packages/angular-test-app/src/preview-examples/date-input-with-slots.ts

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './date-input-with-slots.html',
+})
+export default class DateInputWithSlots {}

packages/angular-test-app/src/preview-examples/input-with-slots.html

@@ -0,0 +1,13 @@
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+
+SPDX-License-Identifier: MIT
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<ix-input>
+  <ix-icon name="bulb" slot="start" size="16"></ix-icon>
+  <ix-typography slot="end">unit</ix-typography>
+</ix-input>

packages/angular-test-app/src/preview-examples/input-with-slots.ts

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './input-with-slots.html'
+})
+export default class InputWithSlots {}

packages/angular-test-app/src/preview-examples/number-input-with-slots.html

@@ -0,0 +1,13 @@
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+
+SPDX-License-Identifier: MIT
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<ix-number-input>
+  <ix-icon name="bulb" slot="start" size="16"></ix-icon>
+  <ix-typography slot="end">unit</ix-typography>
+</ix-number-input>

packages/angular-test-app/src/preview-examples/number-input-with-slots.ts

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './number-input-with-slots.html'
+})
+export default class NumberInputWithSlots {}

packages/core/component-doc.json

@@ -4465,6 +4465,14 @@
         {
           "name": "form-ready",
           "text": "2.6.0"
+        },
+        {
+          "name": "slot",
+          "text": "start - Element will be displayed at the start of the input"
+        },
+        {
+          "name": "slot",
+          "text": "end - Element will be displayed at the end of the input"
         }
       ],
       "encapsulation": "shadow",
@@ -4941,7 +4949,16 @@
         }
       ],
       "styles": [],
-      "slots": [],
+      "slots": [
+        {
+          "name": "end",
+          "docs": "Element will be displayed at the end of the input"
+        },
+        {
+          "name": "start",
+          "docs": "Element will be displayed at the start of the input"
+        }
+      ],
       "parts": [],
       "listeners": []
     },
@@ -9633,6 +9650,14 @@
         {
           "name": "form-ready",
           "text": "2.6.0"
+        },
+        {
+          "name": "slot",
+          "text": "start - Element will be displayed at the start of the input"
+        },
+        {
+          "name": "slot",
+          "text": "end - Element will be displayed at the end of the input"
         }
       ],
       "encapsulation": "shadow",
@@ -10165,7 +10190,16 @@
         }
       ],
       "styles": [],
-      "slots": [],
+      "slots": [
+        {
+          "name": "end",
+          "docs": "Element will be displayed at the end of the input"
+        },
+        {
+          "name": "start",
+          "docs": "Element will be displayed at the start of the input"
+        }
+      ],
       "parts": [],
       "listeners": []
     },
@@ -13814,6 +13848,14 @@
         {
           "name": "form-ready",
           "text": "2.6.0"
+        },
+        {
+          "name": "slot",
+          "text": "start - Element will be displayed at the start of the input"
+        },
+        {
+          "name": "slot",
+          "text": "end - Element will be displayed at the end of the input"
         }
       ],
       "encapsulation": "shadow",
@@ -14332,7 +14374,16 @@
         }
       ],
       "styles": [],
-      "slots": [],
+      "slots": [
+        {
+          "name": "end",
+          "docs": "Element will be displayed at the end of the input"
+        },
+        {
+          "name": "start",
+          "docs": "Element will be displayed at the start of the input"
+        }
+      ],
       "parts": [],
       "listeners": []
     },

packages/core/src/components/date-input/date-input.tsx

@@ -42,6 +42,8 @@ export type DateInputValidityState = {
 /**
  * @since 2.6.0
  * @form-ready 2.6.0
+ * @slot start - Element will be displayed at the start of the input
+ * @slot end - Element will be displayed at the end of the input
  */
 @Component({
   tag: 'ix-date-input',

packages/core/src/components/input/input.tsx

@@ -42,6 +42,8 @@ let inputIds = 0;
 /**
  * @since 2.6.0
  * @form-ready 2.6.0
+ * @slot start - Element will be displayed at the start of the input
+ * @slot end - Element will be displayed at the end of the input
  */
 @Component({
   tag: 'ix-input',

packages/core/src/components/input/number-input.tsx

@@ -40,6 +40,8 @@ let numberInputIds = 0;
 /**
  * @since 2.6.0
  * @form-ready 2.6.0
+ * @slot start - Element will be displayed at the start of the input
+ * @slot end - Element will be displayed at the end of the input
  */
 @Component({
   tag: 'ix-number-input',

packages/documentation/docs/controls/_date-input_code.mdx

@@ -1,6 +1,7 @@
 import Playground from '@site/src/components/PlaygroundV3';
 import Props from '@site/docs/auto-generated/ix-date-input/props.md';
 import Events from '@site/docs/auto-generated/ix-date-input/events.md';
+import Slots from '@site/docs/auto-generated/ix-input/slots.md';
 
 ## Development
 
@@ -26,6 +27,10 @@ import Events from '@site/docs/auto-generated/ix-date-input/events.md';
 
 <Playground name="date-input-validation" height="40rem"></Playground>
 
+#### Slots
+
+<Playground name="date-input-with-slots" height="28rem"></Playground>
+
 ### API
 
 #### Properties
@@ -35,3 +40,7 @@ import Events from '@site/docs/auto-generated/ix-date-input/events.md';
 #### Events
 
 <Events />
+
+#### Slots
+
+<Slots />