Affix functionality for formfield

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

@@ -0,0 +1,31 @@
+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" kirby-affix="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 kirby-affix="suffix">$/m</span>
+</kirby-form-field>
+
+<kirby-form-field label="With prefix and suffix">
+  <kirby-icon name="search" kirby-affix="prefix"></kirby-icon>
+  <input kirby-input decimal-mask placeholder="Search..." [size]="size" />
+  <kirby-spinner kirby-affix="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,6 +11,8 @@ <h2>Input</h2>
     <cookbook-form-field-input-label-message-example
       [size]="size"
     ></cookbook-form-field-input-label-message-example>
+    <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>

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,18 @@ <h3>Label & Message</h3>
   ></cookbook-form-field-input-label-message-example>
 </cookbook-example-viewer>
 
+<h3>Affix</h3>
+<p>
+  <strong>Please note:</strong> Affix functionality is <em>only</em> intended for use with
+  kirby-input. Date mask input currently does not support prefixed content.
+</p>
+<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/form-field/directives/affix/affix.directive.ts

@@ -0,0 +1,10 @@
+import { Directive, ElementRef, Input } from '@angular/core';
+
+@Directive({
+  // eslint-disable-next-line
+  selector: '[kirby-affix]',
+})
+export class AffixDirective {
+  @Input('kirby-affix') type: 'prefix' | 'suffix';
+  constructor(public el: ElementRef) {}
+}

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="affix-container">
+    <div class="prefix vertical-align">
+      <ng-content select="[kirby-affix='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 vertical-align">
+      <ng-content select="[kirby-affix='suffix']"></ng-content>
+    </div>
+  </div>
 </ng-template>
 
 <ng-template #labelTextTemplate>

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

@@ -41,3 +41,23 @@ label {
   margin-bottom: utils.size('xxxs');
   padding: 0 utils.size('s');
 }
+
+.affix-container {
+  position: relative;
+
+  .vertical-align {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+  }
+
+  .prefix {
+    left: utils.size('xs');
+  }
+
+  .suffix {
+    right: utils.size('xs');
+  }
+}

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

@@ -1,4 +1,4 @@
-import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+import { byText, createHostFactory, SpectatorHost } from '@ngneat/spectator';
 
 import { DesignTokenHelper } from '@kirbydesign/core';
 
@@ -14,6 +14,7 @@ import { FormFieldComponent } from './form-field.component';
 import { InputCounterComponent } from './input-counter/input-counter.component';
 import { InputComponent } from './input/input.component';
 import { TextareaComponent } from './textarea/textarea.component';
+import { AffixDirective } from './directives/affix/affix.directive';
 
 const { size, fontSize, fontWeight, lineHeight, getElevation } = DesignTokenHelper;
 
@@ -24,6 +25,7 @@ describe('FormFieldComponent', () => {
     component: FormFieldComponent,
     declarations: [
       FormFieldMessageComponent,
+      AffixDirective,
       InputComponent,
       TextareaComponent,
       RadioGroupComponent,
@@ -226,10 +228,10 @@ describe('FormFieldComponent', () => {
         expect(inputElement).toBeTruthy();
       });
 
-      it('should render the input as a direct descendant', () => {
+      it('should render the input as a descendant', () => {
         const inputElement = spectator.queryHost('input[kirby-input]');
         expect(inputElement).toBeTruthy();
-        expect(inputElement.parentElement).toEqual(spectator.element);
+        expect(inputElement.closest('kirby-form-field')).toEqual(spectator.element);
       });
 
       it('should not render the input within a label', () => {
@@ -314,10 +316,10 @@ describe('FormFieldComponent', () => {
         expect(textareaElement).toBeTruthy();
       });
 
-      it('should render the textarea as a direct descendant', () => {
+      it('should render the textarea as a descendant', () => {
         const textareaElement = spectator.queryHost('textarea[kirby-textarea]');
         expect(textareaElement).toBeTruthy();
-        expect(textareaElement.parentElement).toEqual(spectator.element);
+        expect(textareaElement.closest('kirby-form-field')).toEqual(spectator.element);
       });
 
       it('should not render the textarea within a label', () => {
@@ -368,9 +370,9 @@ describe('FormFieldComponent', () => {
         label = spectator.queryHost('label');
       });
 
-      it('should render the radio-group as a direct descendant', () => {
+      it('should render the radio-group as a descendant', () => {
         expect(radioGroupElement).toBeTruthy();
-        expect(radioGroupElement.parentElement).toEqual(spectator.element);
+        expect(radioGroupElement.closest('kirby-form-field')).toEqual(spectator.element);
       });
 
       it('should not render the radio-group within a label', () => {
@@ -518,4 +520,80 @@ describe('FormFieldComponent', () => {
       expect(secondEvent.type).toBe('touchend');
     });
   });
+  describe('affix', () => {
+    const wait = (ms: number = 25): Promise<void> => {
+      return new Promise((resolve) => {
+        setTimeout(resolve, ms);
+      });
+    };
+    describe('with prefix', () => {
+      beforeEach(() => {
+        spectator = createHost(
+          `<kirby-form-field>
+            <span kirby-affix="prefix" style="width: 50px">foo</span>
+            <input kirby-input />
+           </kirby-form-field>`
+        );
+      });
+      it('should render prefix content', () => {
+        const affix = spectator.query(byText('foo'));
+        expect(affix).toBeTruthy();
+      });
+      it('should render prefix content in correct slot', () => {
+        const affix = spectator.query(byText('foo'));
+        expect(affix.parentElement.classList).toContain('prefix');
+      });
+      it('should add width of prefix content to padding-left of <input>', async () => {
+        await wait();
+        const input = spectator.queryHost('input');
+        const expectedPadding = 50 + parseInt(DesignTokenHelper.size('s'));
+        expect(input).toHaveComputedStyle({
+          'padding-left': `${expectedPadding}px`,
+        });
+      });
+    });
+    describe('with suffix', () => {
+      beforeEach(() => {
+        spectator = createHost(
+          `<kirby-form-field>
+            <span kirby-affix="suffix" style="width: 50px">foo</span>
+            <input kirby-input />
+           </kirby-form-field>`
+        );
+      });
+      it('should render suffix content', () => {
+        const affix = spectator.query(byText('foo'));
+        expect(affix).toBeTruthy();
+      });
+      it('should render suffix content in correct slot', () => {
+        const affix = spectator.query(byText('foo'));
+        expect(affix.parentElement.classList).toContain('suffix');
+      });
+      it('should add width of suffix content to padding-right of <input>', async () => {
+        await wait();
+        const input = spectator.queryHost('input');
+        const expectedPadding = 50 + parseInt(DesignTokenHelper.size('s'));
+        expect(input).toHaveComputedStyle({
+          'padding-right': `${expectedPadding}px`,
+        });
+      });
+    });
+    describe('with suffix and prefix', () => {
+      beforeEach(() => {
+        spectator = createHost(
+          `<kirby-form-field>
+            <span kirby-affix="suffix">foo</span>
+            <span kirby-affix="prefix">bar</span>
+            <input kirby-input />
+           </kirby-form-field>`
+        );
+      });
+      it('should render both prefix and suffix content', () => {
+        const suffix = spectator.query(byText('foo'));
+        expect(suffix).toBeTruthy();
+        const prefix = spectator.query(byText('bar'));
+        expect(prefix).toBeTruthy();
+      });
+    });
+  });
 });

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

@@ -4,18 +4,23 @@ import {
   ChangeDetectionStrategy,
   Component,
   ContentChild,
+  ContentChildren,
   ElementRef,
   HostListener,
   Input,
   OnDestroy,
   OnInit,
+  QueryList,
   Renderer2,
 } from '@angular/core';
+import { DesignTokenHelper } from '../../helpers';
 
 import { PlatformService } from '../../helpers/platform.service';
 import { UniqueIdGenerator } from '../../helpers/unique-id-generator.helper';
 import { WindowRef } from '../../types/window-ref';
 import { RadioGroupComponent } from '../radio/radio-group/radio-group.component';
+import { ResizeObserverService } from '../shared/resize-observer/resize-observer.service';
+import { AffixDirective } from './directives/affix/affix.directive';
 
 import { InputCounterComponent } from './input-counter/input-counter.component';
 import { InputComponent } from './input/input.component';
@@ -39,6 +44,7 @@ export class FormFieldComponent
   @Input() label: string;
   @Input() message: string;
 
+  @ContentChildren(AffixDirective) affixElements: QueryList<AffixDirective>;
   @ContentChild(InputCounterComponent, { static: false }) counter: InputCounterComponent;
   @ContentChild(RadioGroupComponent) private radioGroupComponent: RadioGroupComponent;
   @ContentChild(RadioGroupComponent, { read: ElementRef })
@@ -51,7 +57,8 @@ export class FormFieldComponent
     elementRef: ElementRef<HTMLElement>,
     private platform: PlatformService,
     private renderer: Renderer2,
-    private windowRef: WindowRef
+    private windowRef: WindowRef,
+    private resizeObserverService: ResizeObserverService
   ) {
     this.element = elementRef.nativeElement;
   }
@@ -107,6 +114,25 @@ export class FormFieldComponent
         this._labelId
       );
     }
+
+    // Measure the width of all slotted affix elements,
+    // and apply their width + standard padding to the input elements
+    // padding, so the start/end of the input is correctly indented.
+    if (this.input) {
+      this.affixElements.forEach((affix) => {
+        this.resizeObserverService.observe(affix.el, (entry) => {
+          const padding = affix.type === 'prefix' ? 'padding-left' : 'padding-right';
+          const affixWidth = entry.contentRect.width;
+          const existingPadding = parseInt(DesignTokenHelper.size('s'));
+
+          this.renderer.setStyle(
+            this.input.nativeElement,
+            `${padding}`,
+            `${affixWidth + existingPadding}px`
+          );
+        });
+      });
+    }
   }
 
   ngAfterContentChecked(): void {
@@ -137,5 +163,9 @@ export class FormFieldComponent
         detail: this.element,
       })
     );
+
+    this.affixElements.forEach((affix) => {
+      this.resizeObserverService.unobserve(affix.el);
+    });
   }
 }

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

@@ -5,3 +5,4 @@ export { InputCounterComponent } from './input-counter/input-counter.component';
 export { TextareaComponent } from './textarea/textarea.component';
 export { DateInputDirective } from './directives/date/date-input.directive';
 export { DecimalMaskDirective } from './directives/decimal-mask/decimal-mask.directive';
+export { AffixDirective } from './directives/affix/affix.directive';

libs/designsystem/src/lib/kirby.module.ts

@@ -22,6 +22,7 @@ import { FabSheetComponent } from './components/fab-sheet/fab-sheet.component';
 import { FlagComponent } from './components/flag/flag.component';
 import { DateInputDirective } from './components/form-field/directives/date/date-input.directive';
 import { DecimalMaskDirective } from './components/form-field/directives/decimal-mask/decimal-mask.directive';
+import { AffixDirective } from './components/form-field/directives/affix/affix.directive';
 import { FormFieldMessageComponent } from './components/form-field/form-field-message/form-field-message.component';
 import { FormFieldComponent } from './components/form-field/form-field.component';
 import { InputCounterComponent } from './components/form-field/input-counter/input-counter.component';
@@ -96,6 +97,7 @@ const exportedDeclarations = [
   SlideButtonComponent,
   ToggleComponent,
   EmptyStateComponent,
+  AffixDirective,
   FormFieldComponent,
   InputComponent,
   InputCounterComponent,