Enhancement/459 slotted prefix suffix

apps/cookbook/src/app/examples/form-field-example/examples/input/affix.ts

@@ -0,0 +1,33 @@
+import { Component, Input } from '@angular/core';
+
+import { InputSize } from '@kirbydesign/designsystem';
+
+const config = {
+  selector: 'cookbook-form-field-input-affix-example',
+  template: `
+    <kirby-form-field label="With prefix">
+      <kirby-icon name="payment-card" prefix></kirby-icon>
+      <input kirby-input placeholder="Enter your card number" [size]="size" />
+    </kirby-form-field>
+
+    <kirby-form-field label="With suffix">
+      <input kirby-input kirby-decimal-mask [size]="size" type="number" placeholder="Monthly payments" [size]="size" />
+      <span suffix>$/m</span>
+    </kirby-form-field>
+
+    <kirby-form-field label="With prefix and suffix">
+      <kirby-icon name="search" prefix></kirby-icon>
+      <input kirby-input decimal-mask placeholder="Search..." [size]="size" />
+      <kirby-spinner suffix></kirby-spinner>
+    </kirby-form-field>
+  `,
+};
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+})
+export class FormFieldInputAffixExampleComponent {
+  template: string = config.template;
+  @Input() size: InputSize;
+}

apps/cookbook/src/app/examples/form-field-example/form-field-example.component.html

@@ -11,9 +11,13 @@ <h2>Input</h2>
     <cookbook-form-field-input-label-message-example
       [size]="size"
     ></cookbook-form-field-input-label-message-example>
+    <h2>Affix example</h2>
+    <cookbook-form-field-input-affix-example [size]="size">
+    </cookbook-form-field-input-affix-example>
     <cookbook-form-field-input-counter-example
       [size]="size"
     ></cookbook-form-field-input-counter-example>
+
     <cookbook-form-field-input-numeric-example
       [size]="size"
     ></cookbook-form-field-input-numeric-example>

apps/cookbook/src/app/examples/form-field-example/form-field-example.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 
 import { KirbyModule } from '@kirbydesign/designsystem';
 
+import { FormFieldInputAffixExampleComponent } from './examples/input/affix';
 import { FormFieldInputBorderlessExampleComponent } from './examples/input/borderless';
 import { FormFieldInputCounterExampleComponent } from './examples/input/counter';
 import { FormFieldInputDateExampleComponent } from './examples/input/date';
@@ -29,6 +30,7 @@ const COMPONENT_DECLARATIONS = [
   FormFieldInputDecimalMaskExampleComponent,
   FormFieldInputDateExampleComponent,
   FormFieldInputDisabledExampleComponent,
+  FormFieldInputAffixExampleComponent,
   FormFieldInputErrorExampleComponent,
   FormFieldInputBorderlessExampleComponent,
   FormFieldFocusExampleComponent,

apps/cookbook/src/app/showcase/form-field-showcase/form-field-showcase.component.html

@@ -26,6 +26,14 @@ <h3>Label & Message</h3>
   ></cookbook-form-field-input-label-message-example>
 </cookbook-example-viewer>
 
+<h3>Affix</h3>
+<cookbook-example-viewer [html]="affixExample.template">
+  <cookbook-form-field-input-affix-example
+    [size]="size"
+    #affixExample
+  ></cookbook-form-field-input-affix-example>
+</cookbook-example-viewer>
+
 <h3>Character counter</h3>
 <cookbook-example-viewer [html]="inputCounterExample.template">
   <cookbook-form-field-input-counter-example

libs/designsystem/src/lib/components/button/button.component.integration.spec.ts

@@ -253,7 +253,7 @@ describe('ButtonComponent in Kirby dropdown', () => {
       `<kirby-dropdown>
       </kirby-dropdown>`
     );
-    let button = spectator.queryHost('button[kirby-button]');
+    const button = spectator.queryHost('button[kirby-button]');
     expect(button).toHaveComputedStyle({ 'justify-content': 'space-between' });
   });
 });

libs/designsystem/src/lib/components/charts/shared/chart-js-service/chart-js.service.ts

@@ -116,7 +116,7 @@ export class ChartJSService {
       ? this.annotationsDelegate.createAnnotationPluginOptionsObject(annotations)
       : {};
 
-    let mergedOptions: ChartOptions = mergeDeepAll(
+    const mergedOptions: ChartOptions = mergeDeepAll(
       typeConfigOptions,
       customOptions,
       annotationPluginOptions
@@ -157,7 +157,7 @@ export class ChartJSService {
   }
 
   protected createDatasets(data: ChartDataset[] | number[]): ChartDataset[] {
-    let datasets = isNumberArray(data) ? [{ data }] : data;
+    const datasets = isNumberArray(data) ? [{ data }] : data;
 
     if (this.highlightedElements)
       this.addHighlightedElementsToDatasets(this.highlightedElements, datasets);

libs/designsystem/src/lib/components/form-field/_form-field-inputs.shared.scss

@@ -4,68 +4,72 @@
 $form-field-input-font-family: var(--kirby-font-family);
 $form-field-input-line-height: 1.5;
 $form-field-input-padding: 1em;
+$form-field-affix-padding: $form-field-input-padding * 0.5;
+$padding-block-size-md: 0.5em;
 $form-field-label-height: 24px;
 
-:host(.error) {
-  border: 1px solid utils.get-color('danger');
-  padding: calc(
-    #{$form-field-input-padding} - 1px
-  ); // subtract border width from padding to maintain overall height
-}
+@mixin form-field-inputs-styling() {
+  :host(.error) {
+    border: 1px solid utils.get-color('danger');
+    padding: calc(
+      #{$form-field-input-padding} - 1px
+    ); // subtract border width from padding to maintain overall height
+  }
 
-// Ensures correct position of cloned input when Ionic scrollAssist is enabled
-:host(.cloned-input) {
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
+  // Ensures correct position of cloned input when Ionic scrollAssist is enabled
+  :host(.cloned-input) {
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
 
-// Ensures correct position of cloned input when Ionic scrollAssist is enabled
-:host-context(label) {
-  &.cloned-input {
-    top: $form-field-label-height;
+  // Ensures correct position of cloned input when Ionic scrollAssist is enabled
+  :host-context(label) {
+    &.cloned-input {
+      top: $form-field-label-height;
+    }
   }
-}
 
-:host {
-  @include interaction-state.apply-focus-visible($shadow: utils.get-elevation(2));
+  :host {
+    @include interaction-state.apply-focus-visible($shadow: utils.get-elevation(2));
 
-  background-color: utils.get-color('white');
-  color: utils.get-color('white-contrast');
-  border: none;
-  box-sizing: border-box;
-  display: block;
-  font-family: $form-field-input-font-family;
+    background-color: utils.get-color('white');
+    color: utils.get-color('white-contrast');
+    border: none;
+    box-sizing: border-box;
+    display: block;
+    font-family: $form-field-input-font-family;
 
-  // `font-size` should be declared in `em` units but to simplify the solution
-  // to https://github.com/kirbydesign/designsystem/issues/2301 we're using `rem`.
-  // Must be fixed by https://github.com/kirbydesign/designsystem/issues/2313
-  font-size: 1rem;
-  line-height: $form-field-input-line-height;
-  outline: none;
-  margin: 0;
-  appearance: none;
-  border-radius: utils.size('s');
-  box-shadow: utils.get-elevation(2);
-  padding: $form-field-input-padding;
-  width: 100%;
+    // `font-size` should be declared in `em` units but to simplify the solution
+    // to https://github.com/kirbydesign/designsystem/issues/2301 we're using `rem`.
+    // Must be fixed by https://github.com/kirbydesign/designsystem/issues/2313
+    font-size: 1rem;
+    line-height: $form-field-input-line-height;
+    outline: none;
+    margin: 0;
+    appearance: none;
+    border-radius: utils.size('s');
+    box-shadow: utils.get-elevation(2);
+    padding: $form-field-input-padding;
+    width: 100%;
 
-  &:host-context(kirby-item),
-  &.borderless {
-    border-radius: 0;
-    box-shadow: none;
-    padding-inline: 0;
-    width: auto;
-  }
+    &:host-context(kirby-item),
+    &.borderless {
+      border-radius: 0;
+      box-shadow: none;
+      padding-inline: 0;
+      width: auto;
+    }
 
-  &:disabled {
-    background-color: utils.get-color('light-tint');
-    color: utils.get-text-color('semi-dark');
-    box-shadow: none;
-  }
+    &:disabled {
+      background-color: utils.get-color('light-tint');
+      color: utils.get-text-color('semi-dark');
+      box-shadow: none;
+    }
 
-  &::placeholder {
-    color: utils.get-text-color('semi-dark');
+    &::placeholder {
+      color: utils.get-text-color('semi-dark');
+    }
   }
 }

libs/designsystem/src/lib/components/form-field/form-field.component.html

@@ -21,9 +21,17 @@
 </div>
 
 <ng-template #slottedInputTemplate>
-  <ng-content select="input[kirby-input]"></ng-content>
-  <ng-content select="textarea[kirby-textarea]"></ng-content>
-  <ng-content select="kirby-radio-group"></ng-content>
+  <div class="input-wrapper">
+    <div class="prefix" #prefix>
+      <ng-content select="[prefix]"></ng-content>
+    </div>
+    <ng-content select="input[kirby-input]"></ng-content>
+    <ng-content select="textarea[kirby-textarea]"></ng-content>
+    <ng-content select="kirby-radio-group"></ng-content>
+    <div class="suffix" #suffix>
+      <ng-content select="[suffix]"></ng-content>
+    </div>
+  </div>
 </ng-template>
 
 <ng-template #labelTextTemplate>

libs/designsystem/src/lib/components/form-field/form-field.component.scss

@@ -1,11 +1,73 @@
 @use '~@kirbydesign/core/src/scss/utils';
+@use '~@kirbydesign/core/src/scss/interaction-state';
+@use './form-field-inputs.shared' as shared;
+
+:host.with-input {
+  .input-wrapper {
+    display: flex;
+    @include interaction-state.apply-focus-visible($shadow: utils.get-elevation(2));
+
+    background-color: utils.get-color('white');
+    color: utils.get-color('white-contrast');
+    border: none;
+    box-sizing: border-box;
+    font-family: shared.$form-field-input-font-family;
+
+    // `font-size` should be declared in `em` units but to simplify the solution
+    // to https://github.com/kirbydesign/designsystem/issues/2301 we're using `rem`.
+    // Must be fixed by https://github.com/kirbydesign/designsystem/issues/2313
+    font-size: 1rem;
+    line-height: shared.$form-field-input-line-height;
+    outline: none;
+    margin: 0;
+    appearance: none;
+    border-radius: utils.size('s');
+    box-shadow: utils.get-elevation(2);
+    padding: 0 shared.$form-field-input-padding;
+    width: 100%;
+  }
+  &.error {
+    .input-wrapper {
+      border: 1px solid utils.get-color('danger');
+      padding: 0 calc(#{shared.$form-field-input-padding} - 1px); // subtract border width from padding to maintain overall height
+    }
+  }
+  .prefix,
+  .suffix {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .prefix ::ng-deep > * {
+    padding-right: shared.$form-field-affix-padding;
+  }
+  .suffix ::ng-deep > * {
+    padding-left: shared.$form-field-affix-padding;
+  }
+  &.disabled {
+    .input-wrapper {
+      background-color: utils.get-color('light-tint');
+      color: utils.get-text-color('semi-dark');
+      box-shadow: none;
+    }
+  }
+  ::ng-deep input {
+    border-radius: 0;
+    box-shadow: none;
+    padding-inline: 0;
+    width: auto;
+    border: none;
+    flex-grow: 1;
+    padding-top: shared.$form-field-input-padding;
+    padding-bottom: shared.$form-field-input-padding;
+  }
+}
 
 :host {
   display: block;
   position: relative; // Ensures correct position of cloned child input when Ionic scrollAssist is enabled
   margin-bottom: utils.size('s');
 }
-
 :host-context(kirby-item) {
   margin-bottom: 0;
 }

libs/designsystem/src/lib/components/form-field/form-field.component.ts

@@ -2,15 +2,18 @@ import {
   AfterContentChecked,
   AfterContentInit,
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ContentChild,
   ElementRef,
+  HostBinding,
   HostListener,
   Input,
   OnDestroy,
   OnInit,
   Renderer2,
 } from '@angular/core';
+import { ReplaySubject } from 'rxjs';
 
 import { PlatformService } from '../../helpers/platform.service';
 import { UniqueIdGenerator } from '../../helpers/unique-id-generator.helper';
@@ -47,11 +50,14 @@ export class FormFieldComponent
   @ContentChild(InputComponent, { read: ElementRef }) input: ElementRef<HTMLInputElement>;
   @ContentChild(TextareaComponent, { read: ElementRef }) textarea: ElementRef<HTMLTextAreaElement>;
 
+  @HostBinding('class') computedClasses = '';
+
   constructor(
     elementRef: ElementRef<HTMLElement>,
     private platform: PlatformService,
     private renderer: Renderer2,
-    private windowRef: WindowRef
+    private windowRef: WindowRef,
+    private cdr: ChangeDetectorRef
   ) {
     this.element = elementRef.nativeElement;
   }
@@ -126,6 +132,15 @@ export class FormFieldComponent
       this.isRegistered = true;
       this.dispatchLoadEvent();
     }
+
+    // Copy classes from input tag to formfield.
+    if (this.input) {
+      let classes = [];
+      classes.push('with-input');
+      if (this.input.nativeElement.disabled) classes.push('disabled');
+      classes = classes.concat(Array.from(this.input.nativeElement.classList));
+      this.computedClasses = classes.join(' ');
+    }
   }
 
   ngOnDestroy(): void {