@onemrvapublic/design-system 1.0.0-beta.4 → 1.0.0-develop.1

package/mat-file-upload/src/components/onemrva-mat-file-panel/onemrva-file-panel.component.scss

@@ -2,23 +2,55 @@ $box-shadow: 0px 3px 3px #312f3a29;
 
 :host {
   flex: 1 1 100%;
-  &.clickable:hover {
-    box-shadow: $box-shadow;
-  }
-}
+  //  &.clickable:hover {
+  //    box-shadow: variables.$box-shadow; // TODO
+  //  }
+  // transition: all 0.5s ease-in-out;
+
+  border-radius: var(--border-radius);
+  background-color: var(--mat-sys-primary-container);
+  padding: var(--double-spacer);
+  display: block;
+
+  .file-panel-content {
+    padding: 0;
 
-.fileInfos {
-  display: inline-block;
-  width: 100%;
-  height: 24px;
-  font-size: 14px;
-  .float-right {
-    margin-right: 8px;
+    p:last-child {
+      margin: 0;
+    }
+
+    .message {
+      //color: utils.palette($theme, 'grayscale', 900);
+    }
+  }
+  .fileInfos {
+    display: inline-block;
+    width: 100%;
+    height: 1.5rem;
+    font: var(--mat-sys-body-medium);
+    .float-right {
+      margin-right: var(--spacer);
+    }
   }
-}
 
-.file-panel-title-left {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
+  .file-panel-title {
+    .file-panel-title-left {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacer);
+    }
+    font: var(--mat-sys-title-medium);
+    margin-bottom: 0;
+    color: var(--mat-sys-primary);
+    &:before {
+      margin-right: var(--spacer);
+      margin-top: var(--quarter-spacer);
+    }
+    .mat-progress-bar-fill::after {
+      background: var(--mat-sys-primary);
+    }
+    .mat-progress-bar-buffer {
+      background-color: var(--mat-sys-primary-container);
+    }
+  }
 }

package/mat-file-upload/src/components/onemrva-mat-file-upload/onemrva-mat-file-upload.component.scss

@@ -1,251 +1,105 @@
-@use '../../../../utils';
-
-@keyframes fade {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-    text-align: left;
-    width: auto;
-    margin-left: 4px;
-    vertical-align: top;
+@use 'sass:map';
+
+:host {
+  .mat-mdc-form-field-error {
+    margin-bottom: var(--spacer);
+    padding: var(--spacer) 1em;
+    background-color: var(--mat-sys-error-container);
+    color: var(--mat-sys-on-error-container);
+    border-bottom: 1px solid var(--mat-sys-error);
+    display: flex;
+    line-height: 1.125rem;
+
+    &:before {
+      //noinspection CssNoGenericFontName
+      font-family: var(--icon-font);
+      content: '\e000';
+      float: left;
+      font-size: 1rem;
+      font-variation-settings: 'FILL' 1;
+      margin-right: var(--spacer);
+      vertical-align: baseline;
+      flex: 0 0 var(--double-spacer);
+    }
   }
-}
 
-@mixin fileUpload($theme) {
-  $spacer: map-get($theme, 'spacer');
-
-  onemrva-mat-file-upload {
-    .mat-mdc-form-field-error {
-      &:before {
-        //noinspection CssNoGenericFontName
-        font-family: 'Material Icons';
-        content: '\e000';
-        float: left;
-        font-size: 16px;
-        font-variation-settings: 'FILL' 1;
-        margin-right: 8px;
-        vertical-align: baseline;
-        flex: 0 0 16px;
-      }
+  ul {
+    list-style: none;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+    padding-inline-start: 0;
 
-      margin-bottom: 8px;
-      padding: 8px 1em;
-      background-color: #ffebe6;
-      border-bottom: 1px solid utils.palette($theme, 'error');
-      color: utils.palette($theme, 'error');
-      display: flex;
-      line-height: 1.125;
-    }
-    ul {
-      list-style: none;
-      margin-block-start: 0;
-      margin-block-end: 0;
-      margin-inline-start: 0;
-      margin-inline-end: 0;
-      padding-inline-start: 0;
-      li {
-        width: 100%;
-      }
+    li {
+      width: 100%;
     }
   }
 
   .onemrva-mat-file-upload-drop-area {
-    mat-icon {
-      &.filled {
-        vertical-align: bottom;
-        font-variation-settings:
-          'FILL' 1,
-          'wght' 900,
-          'GRAD' 0,
-          'opsz' 48;
-      }
-      &.mat-error {
-        color: utils.palette($theme, 'error', 500);
-      }
-      &.mat-success {
-        color: utils.palette($theme, 'success', 600);
-      }
-      &.mat-warn {
-        color: utils.palette($theme, 'warn', 600);
-      }
-    }
-    padding: $spacer * 3;
+    padding: var(--triple-spacer);
     text-align: left;
-    border: dashed 2px utils.palette($theme, 'grayscale', 500);
-
-    &.fu-error {
-      border: dashed 2px utils.palette($theme, 'error', 600);
-    }
+    border: dashed 2px var(--mat-sys-outline);
 
     position: relative;
-    border-radius: 16px;
+    border-radius: var(--border-radius);
     transition:
       background-color 0.3s ease-in-out,
       border 0.3s ease-in-out;
-    mat-icon.onemrva-upload {
-      color: utils.palette($theme, 'grayscale', 700);
-      width: 60px;
-      height: 40px;
-      line-height: 40px;
-      font-size: 64px;
-    }
-    input[type='file'] {
-      display: none;
-    }
-    .outer {
-      display: block;
-      width: 100%;
-      margin: 0 0 3 * $spacer 0;
-    }
-    .inner {
-      display: inline-block;
-      width: 100%;
-      text-align: center;
-      line-height: 24px;
-      margin-bottom: $spacer;
-      &:nth-child(1) {
-        margin-bottom: 16px;
-      }
-      &:nth-child(4) {
-        display: block;
-        color: utils.palette($theme, 'grayscale', 500);
-        margin-bottom: 0;
-      }
-      label {
-        color: utils.palette($theme, 'primary', 500);
-        text-decoration: underline;
-        font-weight: bold;
-        cursor: pointer;
-      }
-    }
-    &.filein {
-      .inner {
-        animation: fade 1s linear;
-        animation-fill-mode: forwards;
-        &:nth-child(1) {
-          margin-bottom: 0;
-        }
 
-        mat-icon {
-          width: 24px;
-          height: 24px;
-          line-height: 24px;
-          font-size: 24px;
-        }
-        &:nth-child(4) {
-          padding-left: 30px;
-        }
-      }
-    }
-    &.fileover {
-      background-color: utils.palette($theme, 'primary', 50);
-      border: 2px dashed utils.palette($theme, 'primary', 500);
+    mat-icon {
+      color: var(--mat-sys-primary);
     }
 
-    .files-list {
-      display: flex;
-      flex-flow: row wrap;
-      gap: $spacer;
+    &.fu-error {
+      border: dashed 2px var(--mat-sys-error);
     }
-  }
-
-  $panel-border-radius: 16px;
-  $panel-border-color: utils.palette($theme, 'primary', 50);
-  $panel-padding: 16px;
-
-  .clickable {
-    cursor: pointer;
-  }
 
-  file-panel {
-    // transition: all 0.5s ease-in-out;
+    input[type='file'] {
+      display: none;
+    }
 
-    border-radius: $panel-border-radius;
-    background-color: utils.palette($theme, 'grayscale', 50);
-    padding: $panel-padding;
-    display: block;
+    .download-outer {
+      display: flex;
+      width: 100%;
+      margin: 0;
 
-    .file-panel-content {
-      padding: 0;
-      p:last-child {
-        margin: 0;
+      .download-icon {
+        padding-right: var(--double-spacer);
       }
-      .message {
-        color: utils.palette($theme, 'grayscale', 900);
-      }
-    }
-    .file-panel-title {
-      font-family: utils.fontFamily($theme, 'headline-1');
-      font-style: normal;
-      font-weight: 700;
-      font-size: 18px;
-      line-height: 27px;
-      margin-bottom: 0;
-      .file-panel-title-action {
-        float: right;
-      }
-    }
-    &.mat-primary {
-      border: none;
-      background: utils.palette($theme, 'grayscale', 50);
 
-      .file-panel-title {
-        color: utils.palette($theme, 'primary', 500);
-      }
-      .mat-progress-bar-fill::after {
-        background: utils.palette($theme, 'primary', 500);
-      }
-      .mat-progress-bar-buffer {
-        background-color: utils.palette($theme, 'primary', 100);
+      .download-text {
+        label {
+          display: block;
+          color: var(--mat-sys-primary);
+          text-decoration: underline;
+          cursor: pointer;
+          font-weight: bold;
+        }
+
+        .restrictions {
+          display: block;
+          color: var(--mat-sys-outline);
+          margin-bottom: 0;
+        }
       }
     }
-    &.mat-warn {
-      border: none;
-      background: utils.palette($theme, 'warn', 50);
 
-      mat-icon,
-      .file-panel-title {
-        color: utils.palette($theme, 'warn', 600);
-      }
-      .mat-progress-bar-fill::after {
-        background: utils.palette($theme, 'warn', 600);
-      }
-      .mat-progress-bar-buffer {
-        background-color: utils.palette($theme, 'warn', 100);
+    &.filein {
+      .download-outer {
+        margin: 0 0 var(--triple-spacer) 0;
       }
     }
-    &.mat-success {
-      border: none;
-      background: utils.palette($theme, 'success', 50);
 
-      .file-panel-title {
-        color: utils.palette($theme, 'success', 600);
-      }
-      .mat-progress-bar-fill::after {
-        background: utils.palette($theme, 'success', 600) !important;
-      }
-      .mat-progress-bar-buffer {
-        background-color: utils.palette($theme, 'success', 100) !important;
-      }
+    &.fileover {
+      background: var(--mat-sys-primary-container);
+      border: 2px dashed var(--mat-sys-primary);
     }
-    &.mat-error {
-      border: none;
-      background: utils.palette($theme, 'error', 50);
 
-      .file-panel-title {
-        color: utils.palette($theme, 'error', 500);
-      }
-      .mat-progress-bar-fill::after {
-        background: utils.palette($theme, 'error', 500);
-      }
-      .mat-progress-bar-buffer {
-        background-color: utils.palette($theme, 'error', 100);
-      }
+    .files-list {
+      display: flex;
+      flex-flow: row wrap;
+      gap: var(--double-spacer);
     }
   }
 }

package/mat-input-address/index.d.ts

@@ -0,0 +1,32 @@
+import * as i0 from '@angular/core';
+import { OnInit, EventEmitter } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
+import { OSMResult } from '@onemrvapublic/design-system/shared';
+
+declare class OnemrvaMatInputAddressComponent implements OnInit {
+    placeholder: string;
+    readonly: boolean;
+    address: FormControl;
+    mode: 'road-only' | 'full';
+    label: string;
+    noEntriesFoundLabel: string;
+    hint: string;
+    countryCodes: string[];
+    getAddress: EventEmitter<OSMResult>;
+    autocompleteTrigger: MatAutocompleteTrigger;
+    results$: Observable<OSMResult[]>;
+    private readonly osm;
+    isLoading: boolean;
+    firstResult: null | OSMResult;
+    showNoResult: boolean;
+    ngOnInit(): void;
+    selectAddress(address: OSMResult, emit?: boolean): void;
+    clear(): void;
+    handleEnter(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatInputAddressComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatInputAddressComponent, "onemrva-mat-input-address", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "address": { "alias": "address"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "label": { "alias": "label"; "required": false; }; "noEntriesFoundLabel": { "alias": "noEntriesFoundLabel"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "countryCodes": { "alias": "countryCodes"; "required": false; }; }, { "getAddress": "getAddress"; }, never, never, true, never>;
+}
+
+export { OnemrvaMatInputAddressComponent };

package/mat-input-address/src/onemrva-mat-input-address.component.scss

@@ -0,0 +1,8 @@
+onemrva-mat-input-address {
+  mat-form-field {
+    width: 100%;
+  }
+  .spin {
+    animation: spin 1s linear infinite;
+  }
+}

package/mat-input-birthplace/index.d.ts

@@ -0,0 +1,36 @@
+import * as _angular_core from '@angular/core';
+import { OnInit, OnDestroy, EventEmitter } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Subject, Observable } from 'rxjs';
+import { OnemRvaCommonCountry } from '@onemrvapublic/design-system/shared';
+
+declare class OnemrvaMatInputBirthPlaceComponent implements OnInit, OnDestroy {
+    readonly: _angular_core.InputSignal<boolean>;
+    countryCode: _angular_core.InputSignal<FormControl<OnemRvaCommonCountry | null>>;
+    label: _angular_core.InputSignal<string>;
+    noEntriesFoundLabel: _angular_core.InputSignal<string>;
+    hint: _angular_core.InputSignal<string>;
+    placeholderLabel: _angular_core.InputSignal<string>;
+    searchAriaLabel: _angular_core.InputSignal<string>;
+    returnValue: _angular_core.InputSignal<string>;
+    getCountry: EventEmitter<any>;
+    selectedCountryName: _angular_core.WritableSignal<string | null>;
+    selectedCountryCode: _angular_core.WritableSignal<string | null>;
+    filterCtrl: FormControl<string | null>;
+    destroyNotifier$: Subject<void>;
+    filteredCountries$: Observable<OnemRvaCommonCountry[]>;
+    private commonCountryLookupService;
+    private translate;
+    private countries$;
+    constructor();
+    getCountryName(country: OnemRvaCommonCountry): string | null;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    trackById(index: number, country: OnemRvaCommonCountry): string;
+    errors(): string;
+    getValue(country: OnemRvaCommonCountry): string | number | OnemRvaCommonCountry;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OnemrvaMatInputBirthPlaceComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OnemrvaMatInputBirthPlaceComponent, "onemrva-mat-input-birthplace", never, { "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "countryCode": { "alias": "countryCode"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "noEntriesFoundLabel": { "alias": "noEntriesFoundLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "placeholderLabel": { "alias": "placeholderLabel"; "required": false; "isSignal": true; }; "searchAriaLabel": { "alias": "searchAriaLabel"; "required": false; "isSignal": true; }; "returnValue": { "alias": "returnValue"; "required": false; "isSignal": true; }; }, { "getCountry": "getCountry"; }, never, never, true, never>;
+}
+
+export { OnemrvaMatInputBirthPlaceComponent };

package/mat-input-birthplace/src/onemrva-mat-input-birthplace.component.scss

@@ -1,3 +1,5 @@
-.mdc-list-item__primary-text {
-  width: 100%;
+mat-option.mdc-list-item {
+  .mdc-list-item__primary-text {
+    width: 100%;
+  }
 }

package/mat-input-country/index.d.ts

@@ -0,0 +1,32 @@
+import * as _angular_core from '@angular/core';
+import { OnInit, EventEmitter } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { OnemrvaMaterialCountry } from '@onemrvapublic/design-system/shared';
+
+declare class OnemrvaMatInputCountryComponent implements OnInit {
+    getCountry: EventEmitter<any>;
+    country: _angular_core.InputSignal<FormControl<string | null>>;
+    readonly: _angular_core.InputSignal<boolean>;
+    disabled: _angular_core.InputSignal<boolean>;
+    label: _angular_core.InputSignal<string>;
+    noEntriesFoundLabel: _angular_core.InputSignal<string>;
+    hint: _angular_core.InputSignal<string>;
+    placeholderLabel: _angular_core.InputSignal<string>;
+    searchAriaLabel: _angular_core.InputSignal<string>;
+    filterCtrl: FormControl<string | null>;
+    countries$: Observable<OnemrvaMaterialCountry[]>;
+    filteredCountries$: Observable<OnemrvaMaterialCountry[]>;
+    selectedCountry$?: Observable<OnemrvaMaterialCountry | undefined>;
+    setValue(country: OnemrvaMaterialCountry): void;
+    private readonly cdn;
+    constructor();
+    ngOnInit(): void;
+    handleClick(e: any): void;
+    errors(): "input.country.required" | "input.country.unknown.error";
+    getCounrtyCode(): string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OnemrvaMatInputCountryComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OnemrvaMatInputCountryComponent, "onemrva-mat-input-country", never, { "country": { "alias": "country"; "required": true; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "noEntriesFoundLabel": { "alias": "noEntriesFoundLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "placeholderLabel": { "alias": "placeholderLabel"; "required": false; "isSignal": true; }; "searchAriaLabel": { "alias": "searchAriaLabel"; "required": false; "isSignal": true; }; }, { "getCountry": "getCountry"; }, never, never, true, never>;
+}
+
+export { OnemrvaMatInputCountryComponent };

package/mat-input-country/src/onemrva-mat-input-country.component.scss

@@ -0,0 +1,13 @@
+mat-form-field.onemrva-input-country {
+  width: 100%;
+}
+
+:host {
+  mat-option.mdc-list-item {
+    .country {
+      position: relative;
+      display: block;
+      padding-top: var(--half-spacer);
+    }
+  }
+}

package/mat-input-enterprise-number/index.d.ts

@@ -0,0 +1,37 @@
+import * as i0 from '@angular/core';
+import { OnInit, OnDestroy, EventEmitter, ElementRef } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Subject, Observable } from 'rxjs';
+import { OnemrvaMaterialCountry } from '@onemrvapublic/design-system/shared';
+
+declare class OnemrvaMatInputEnterpriseNumberComponent implements OnInit, OnDestroy {
+    readonly: boolean;
+    enterpriseNumber: FormControl;
+    label: string;
+    noEntriesFoundLabel: string;
+    placeholderLabel: string;
+    defaultCountry: string;
+    searchAriaLabel: string;
+    hint: string;
+    getCountry: EventEmitter<any>;
+    numberInput: ElementRef;
+    countryCode: FormControl;
+    filterCtrl: FormControl<string | null>;
+    destroyNotifier$: Subject<void>;
+    private readonly cdn;
+    countries$: Observable<OnemrvaMaterialCountry[]>;
+    filteredCountries$: Observable<OnemrvaMaterialCountry[]>;
+    constructor();
+    get number(): FormControl;
+    setCode(country: OnemrvaMaterialCountry | null): void;
+    ngOnInit(): void;
+    clearValidators(): void;
+    formatEnterpriseNumber(country: OnemrvaMaterialCountry | undefined): void;
+    ngOnDestroy(): void;
+    handleClick(e: any): void;
+    errors(): "input.vies.required" | "input.vies.invalid" | "input.vies.unknown.error";
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatInputEnterpriseNumberComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatInputEnterpriseNumberComponent, "onemrva-mat-input-enterprise-number", never, { "readonly": { "alias": "readonly"; "required": false; }; "enterpriseNumber": { "alias": "enterpriseNumber"; "required": false; }; "label": { "alias": "label"; "required": false; }; "noEntriesFoundLabel": { "alias": "noEntriesFoundLabel"; "required": false; }; "placeholderLabel": { "alias": "placeholderLabel"; "required": false; }; "defaultCountry": { "alias": "defaultCountry"; "required": false; }; "searchAriaLabel": { "alias": "searchAriaLabel"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; }, { "getCountry": "getCountry"; }, never, never, true, never>;
+}
+
+export { OnemrvaMatInputEnterpriseNumberComponent };

package/mat-input-enterprise-number/src/onemrva-mat-input-enterprise-number.component.scss

@@ -1,4 +1,11 @@
 .onemrva-input-enterprise-number {
+  .mdc-text-field--disabled {
+    mat-select {
+      .mat-mdc-select-arrow {
+        opacity: 0.5;
+      }
+    }
+  }
   mat-select {
     padding: 0 0px 0 8px;
     .mat-mdc-select-placeholder {

package/mat-input-iban/index.d.ts

@@ -0,0 +1,79 @@
+import * as i0 from '@angular/core';
+import { OnInit, OnDestroy, EventEmitter, ElementRef } from '@angular/core';
+import { ControlValueAccessor, FormControl, FormGroup, NgControl, ValidationErrors, AbstractControl } from '@angular/forms';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { Observable, Subject } from 'rxjs';
+import { BooleanInput } from '@angular/cdk/coercion';
+
+declare class OnemrvaMatInputIbanComponent implements ControlValueAccessor, MatFormFieldControl<string>, OnInit, OnDestroy {
+    countryCode: HTMLInputElement;
+    bban: HTMLInputElement;
+    static nextId: number;
+    noEntriesFoundLabel: string;
+    placeholderLabel: string;
+    searchAriaLabel: string;
+    label: string;
+    prioritizedCountries: string[];
+    onlySEPA: boolean;
+    getCountry: EventEmitter<any>;
+    filteredCountries$: Observable<string[]>;
+    filterCtrl: FormControl<string | null>;
+    destroyNotifier$: Subject<void>;
+    placeholderIban: string;
+    controlType: string;
+    stateChanges: Subject<void>;
+    focused: boolean;
+    id: string;
+    touched: boolean;
+    parts: FormGroup<{
+        countryCode: FormControl<string | null>;
+        bban: FormControl<string | null>;
+    }>;
+    get bbanField(): FormControl;
+    get countryCodeField(): FormControl;
+    private readonly focusMonitor;
+    readonly elementRef: ElementRef<any>;
+    private readonly cd;
+    private readonly formBuilder;
+    readonly ngControl: NgControl | null;
+    constructor();
+    errors(): ValidationErrors | null;
+    onChange: (_: any) => void;
+    onTouched: () => void;
+    get errorState(): boolean;
+    get shouldLabelFloat(): boolean;
+    get empty(): boolean;
+    get value(): string;
+    set value(iban: string | null);
+    readonly: boolean;
+    get disabled(): boolean;
+    set disabled(value: BooleanInput);
+    private _disabled;
+    setDisabledState(isDisabled: boolean): void;
+    get placeholder(): string;
+    set placeholder(value: string);
+    private _placeholder;
+    get required(): boolean;
+    set required(value: BooleanInput);
+    private _required;
+    updateNumber(number: string): void;
+    ngOnInit(): void;
+    handleClick(e: any): void;
+    ngOnDestroy(): void;
+    getCountryCodes(prioritizedCountries: string[]): Observable<any>;
+    isLastPrioritized(i: number): boolean;
+    autoFocusNext(control: AbstractControl, nextElement?: HTMLInputElement): void;
+    onContainerClick(event: MouseEvent): void;
+    setDescribedByIds(ids: string[]): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    writeValue(iban: string | null): void;
+    _handleInput(control: AbstractControl, nextElement?: HTMLInputElement): void;
+    firstTwoCharsAreLetters(input: string): boolean;
+    generatePlaceholder(chars: number): string;
+    onKeyup(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OnemrvaMatInputIbanComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OnemrvaMatInputIbanComponent, "onemrva-mat-input-iban", never, { "noEntriesFoundLabel": { "alias": "noEntriesFoundLabel"; "required": false; }; "placeholderLabel": { "alias": "placeholderLabel"; "required": false; }; "searchAriaLabel": { "alias": "searchAriaLabel"; "required": false; }; "label": { "alias": "label"; "required": false; }; "prioritizedCountries": { "alias": "prioritizedCountries"; "required": false; }; "onlySEPA": { "alias": "onlySEPA"; "required": false; }; "value": { "alias": "value"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, { "getCountry": "getCountry"; }, never, never, true, never>;
+}
+
+export { OnemrvaMatInputIbanComponent };

package/mat-input-iban/src/onemrva-mat-input-iban.component.scss

@@ -0,0 +1,10 @@
+onemrva-mat-input-iban {
+  width: 100%;
+  .iban-fields {
+    display: flex;
+    .iban-prefix {
+      width: 40px;
+      margin-right: 8px;
+    }
+  }
+}