@testgorilla/tgo-ui 1.0.2 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -31,6 +31,7 @@ import * as i2$4 from '@angular/material/toolbar';
31
31
  import { MatToolbarModule } from '@angular/material/toolbar';
32
32
  import * as i5$1 from '@angular/material/menu';
33
33
  import { MatMenuModule } from '@angular/material/menu';
34
+ import * as i6$1 from '@angular/material/core';
34
35
  import { MatRippleModule } from '@angular/material/core';
35
36
  import * as i1$6 from '@angular/material/paginator';
36
37
  import { MatPaginatorModule } from '@angular/material/paginator';
@@ -43,6 +44,8 @@ import { MatTableDataSource, MatTableModule } from '@angular/material/table';
43
44
  import * as i6 from '@angular/material/tooltip';
44
45
  import { MatTooltipModule } from '@angular/material/tooltip';
45
46
  import { Subscription } from 'rxjs';
47
+ import * as i5$2 from '@angular/material/select';
48
+ import { MatSelectModule } from '@angular/material/select';
46
49
 
47
50
  const alertBarsUtil = {
48
51
  //Set css class and iconName according type
@@ -990,6 +993,13 @@ class FieldComponent {
990
993
  * @memberof FieldComponent
991
994
  */
992
995
  this.type = 'text';
996
+ /**
997
+ * Input is update only on blur
998
+ *
999
+ * @type {Boolean}
1000
+ * @memberof FieldComponent
1001
+ */
1002
+ this.updateOnBlur = false;
993
1003
  /**
994
1004
  * @ignore
995
1005
  */
@@ -1055,7 +1065,9 @@ class FieldComponent {
1055
1065
  onInput(event) {
1056
1066
  this.value = event.target.value;
1057
1067
  this.errorsLength = this.setErrorsLength();
1058
- this.onTouch();
1068
+ if (!this.updateOnBlur) {
1069
+ this.onTouch();
1070
+ }
1059
1071
  this.onChange(this.value);
1060
1072
  }
1061
1073
  writeValue(value) {
@@ -1077,13 +1089,13 @@ class FieldComponent {
1077
1089
  }
1078
1090
  }
1079
1091
  FieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1080
- FieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FieldComponent, selector: "ui-field", inputs: { label: "label", fieldName: "fieldName", placeholder: "placeholder", id: "id", value: "value", errors: "errors", disabled: "disabled", required: "required", hintMessage: "hintMessage", type: "type" }, host: { properties: { "class": "this.class" } }, providers: [
1092
+ FieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FieldComponent, selector: "ui-field", inputs: { label: "label", fieldName: "fieldName", placeholder: "placeholder", id: "id", value: "value", errors: "errors", disabled: "disabled", required: "required", hintMessage: "hintMessage", type: "type", updateOnBlur: "updateOnBlur" }, host: { properties: { "class": "this.class" } }, providers: [
1081
1093
  {
1082
1094
  provide: NG_VALUE_ACCESSOR,
1083
1095
  useExisting: forwardRef(() => FieldComponent),
1084
1096
  multi: true,
1085
1097
  },
1086
- ], ngImport: i0, template: "<mat-form-field #uiField appearance=\"outline\" [color]=\"errorsLength ? 'warn' : 'accent'\">\n <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <input matInput (input)=\"onInput($event)\" [id]=\"id!\" (keyup)=\"onChangeInputSearch()\" [placeholder]=\"placeholder!\" [value]=\"value\" [disabled]=\"disabled\" [type]=\"currentType\" [name]=\"fieldName!\">\n <div class=\"options\" *ngIf=\"type === 'search' || type === 'password'\">\n <div class=\"options-container\">\n <ui-button *ngIf=\"showClose\" type=\"secondary\" [justIcon]=\"true\" class=\"close\" iconName=\"Close\" label=\"Clear\" (buttonClickEvent)=\"clearValue()\"></ui-button>\n <ui-icon *ngIf=\"showSearch\" size=\"24\" class=\"search\" name=\"Search\"></ui-icon>\n <ui-button *ngIf=\"type === 'password'\" type=\"secondary\" [justIcon]=\"true\" class=\"password\" [iconName]=\"showPassword ? 'Eye-hide' : 'Eye-view'\" label=\"View password\" (buttonClickEvent)=\"showPasswordClick()\"></ui-button>\n </div>\n </div>\n <mat-hint class=\"info\" *ngIf=\"hintMessage && !_errors\">{{ hintMessage }}</mat-hint>\n <mat-hint class=\"error\" *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of _errors\">\n <ui-icon name=\"Error\"></ui-icon>{{ error }}\n </div>\n </mat-hint>\n</mat-form-field>\n\n", styles: [".ui-field input[type=search]::-webkit-search-decoration,.ui-field input[type=search]::-webkit-search-cancel-button,.ui-field input[type=search]::-webkit-search-results-button,.ui-field input[type=search]::-webkit-search-results-decoration{display:none}.ui-field .mat-mdc-form-field{margin-top:0;width:100%}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:4px;font-size:12px;line-height:16px;position:relative}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%;text-align:right}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#cb7b7a}.ui-field .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-field .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.search svg,.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.password svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-icon svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button.close svg{color:#888}.ui-field .mat-mdc-form-field .options{position:inline-flex}.ui-field .mat-mdc-form-field .options .options-container{display:flex;column-gap:8px;padding-left:8px}.ui-field .mat-mdc-form-field .options .options-container ui-button,.ui-field .mat-mdc-form-field .options .options-container ui-icon{display:flex}.ui-field .mat-mdc-form-field .options .options-container ui-button svg,.ui-field .mat-mdc-form-field .options .options-container ui-icon svg{color:#888}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon{padding:0;height:auto;background:transparent}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:hover,.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1098
+ ], ngImport: i0, template: "<mat-form-field #uiField appearance=\"outline\" [color]=\"errorsLength ? 'warn' : 'accent'\">\n <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <input\n matInput\n (blur)=\"onTouch()\"\n (input)=\"onInput($event)\"\n [id]=\"id!\"\n (keyup)=\"onChangeInputSearch()\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [type]=\"currentType\"\n [name]=\"fieldName!\"\n />\n <div class=\"options\" *ngIf=\"type === 'search' || type === 'password'\">\n <div class=\"options-container\">\n <ui-button\n *ngIf=\"showClose\"\n type=\"secondary\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n label=\"Clear\"\n (buttonClickEvent)=\"clearValue()\"\n ></ui-button>\n <ui-icon *ngIf=\"showSearch\" size=\"24\" class=\"search\" name=\"Search\"></ui-icon>\n <ui-button\n *ngIf=\"type === 'password'\"\n type=\"secondary\"\n [justIcon]=\"true\"\n class=\"password\"\n [iconName]=\"showPassword ? 'Eye-hide' : 'Eye-view'\"\n label=\"View password\"\n (buttonClickEvent)=\"showPasswordClick()\"\n ></ui-button>\n </div>\n </div>\n <mat-hint class=\"info\" *ngIf=\"hintMessage && !_errors\">{{ hintMessage }}</mat-hint>\n <mat-hint class=\"error\" *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of _errors\"><ui-icon name=\"Error\"></ui-icon>{{ error }}</div>\n </mat-hint>\n</mat-form-field>\n", styles: [".ui-field input[type=search]::-webkit-search-decoration,.ui-field input[type=search]::-webkit-search-cancel-button,.ui-field input[type=search]::-webkit-search-results-button,.ui-field input[type=search]::-webkit-search-results-decoration{display:none}.ui-field .mat-mdc-form-field{margin-top:0;width:100%}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:4px;font-size:12px;line-height:16px;position:relative}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%;text-align:right}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#cb7b7a}.ui-field .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-field .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.search svg,.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.password svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-icon svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button.close svg{color:#888}.ui-field .mat-mdc-form-field .options{position:inline-flex}.ui-field .mat-mdc-form-field .options .options-container{display:flex;column-gap:8px;padding-left:8px}.ui-field .mat-mdc-form-field .options .options-container ui-button,.ui-field .mat-mdc-form-field .options .options-container ui-icon{display:flex}.ui-field .mat-mdc-form-field .options .options-container ui-button svg,.ui-field .mat-mdc-form-field .options .options-container ui-icon svg{color:#888}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon{padding:0;height:auto;background:transparent}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:hover,.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1087
1099
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FieldComponent, decorators: [{
1088
1100
  type: Component,
1089
1101
  args: [{ selector: 'ui-field', encapsulation: ViewEncapsulation.None, providers: [
@@ -1092,7 +1104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
1092
1104
  useExisting: forwardRef(() => FieldComponent),
1093
1105
  multi: true,
1094
1106
  },
1095
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field #uiField appearance=\"outline\" [color]=\"errorsLength ? 'warn' : 'accent'\">\n <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <input matInput (input)=\"onInput($event)\" [id]=\"id!\" (keyup)=\"onChangeInputSearch()\" [placeholder]=\"placeholder!\" [value]=\"value\" [disabled]=\"disabled\" [type]=\"currentType\" [name]=\"fieldName!\">\n <div class=\"options\" *ngIf=\"type === 'search' || type === 'password'\">\n <div class=\"options-container\">\n <ui-button *ngIf=\"showClose\" type=\"secondary\" [justIcon]=\"true\" class=\"close\" iconName=\"Close\" label=\"Clear\" (buttonClickEvent)=\"clearValue()\"></ui-button>\n <ui-icon *ngIf=\"showSearch\" size=\"24\" class=\"search\" name=\"Search\"></ui-icon>\n <ui-button *ngIf=\"type === 'password'\" type=\"secondary\" [justIcon]=\"true\" class=\"password\" [iconName]=\"showPassword ? 'Eye-hide' : 'Eye-view'\" label=\"View password\" (buttonClickEvent)=\"showPasswordClick()\"></ui-button>\n </div>\n </div>\n <mat-hint class=\"info\" *ngIf=\"hintMessage && !_errors\">{{ hintMessage }}</mat-hint>\n <mat-hint class=\"error\" *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of _errors\">\n <ui-icon name=\"Error\"></ui-icon>{{ error }}\n </div>\n </mat-hint>\n</mat-form-field>\n\n", styles: [".ui-field input[type=search]::-webkit-search-decoration,.ui-field input[type=search]::-webkit-search-cancel-button,.ui-field input[type=search]::-webkit-search-results-button,.ui-field input[type=search]::-webkit-search-results-decoration{display:none}.ui-field .mat-mdc-form-field{margin-top:0;width:100%}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:4px;font-size:12px;line-height:16px;position:relative}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%;text-align:right}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#cb7b7a}.ui-field .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-field .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.search svg,.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.password svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-icon svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button.close svg{color:#888}.ui-field .mat-mdc-form-field .options{position:inline-flex}.ui-field .mat-mdc-form-field .options .options-container{display:flex;column-gap:8px;padding-left:8px}.ui-field .mat-mdc-form-field .options .options-container ui-button,.ui-field .mat-mdc-form-field .options .options-container ui-icon{display:flex}.ui-field .mat-mdc-form-field .options .options-container ui-button svg,.ui-field .mat-mdc-form-field .options .options-container ui-icon svg{color:#888}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon{padding:0;height:auto;background:transparent}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:hover,.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}\n"] }]
1107
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field #uiField appearance=\"outline\" [color]=\"errorsLength ? 'warn' : 'accent'\">\n <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <input\n matInput\n (blur)=\"onTouch()\"\n (input)=\"onInput($event)\"\n [id]=\"id!\"\n (keyup)=\"onChangeInputSearch()\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [type]=\"currentType\"\n [name]=\"fieldName!\"\n />\n <div class=\"options\" *ngIf=\"type === 'search' || type === 'password'\">\n <div class=\"options-container\">\n <ui-button\n *ngIf=\"showClose\"\n type=\"secondary\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n label=\"Clear\"\n (buttonClickEvent)=\"clearValue()\"\n ></ui-button>\n <ui-icon *ngIf=\"showSearch\" size=\"24\" class=\"search\" name=\"Search\"></ui-icon>\n <ui-button\n *ngIf=\"type === 'password'\"\n type=\"secondary\"\n [justIcon]=\"true\"\n class=\"password\"\n [iconName]=\"showPassword ? 'Eye-hide' : 'Eye-view'\"\n label=\"View password\"\n (buttonClickEvent)=\"showPasswordClick()\"\n ></ui-button>\n </div>\n </div>\n <mat-hint class=\"info\" *ngIf=\"hintMessage && !_errors\">{{ hintMessage }}</mat-hint>\n <mat-hint class=\"error\" *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of _errors\"><ui-icon name=\"Error\"></ui-icon>{{ error }}</div>\n </mat-hint>\n</mat-form-field>\n", styles: [".ui-field input[type=search]::-webkit-search-decoration,.ui-field input[type=search]::-webkit-search-cancel-button,.ui-field input[type=search]::-webkit-search-results-button,.ui-field input[type=search]::-webkit-search-results-decoration{display:none}.ui-field .mat-mdc-form-field{margin-top:0;width:100%}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:4px;font-size:12px;line-height:16px;position:relative}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%;text-align:right}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#cb7b7a}.ui-field .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-field .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.search svg,.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.password svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-icon svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button.close svg{color:#888}.ui-field .mat-mdc-form-field .options{position:inline-flex}.ui-field .mat-mdc-form-field .options .options-container{display:flex;column-gap:8px;padding-left:8px}.ui-field .mat-mdc-form-field .options .options-container ui-button,.ui-field .mat-mdc-form-field .options .options-container ui-icon{display:flex}.ui-field .mat-mdc-form-field .options .options-container ui-button svg,.ui-field .mat-mdc-form-field .options .options-container ui-icon svg{color:#888}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon{padding:0;height:auto;background:transparent}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:hover,.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}\n"] }]
1096
1108
  }], ctorParameters: function () { return []; }, propDecorators: { class: [{
1097
1109
  type: HostBinding
1098
1110
  }], label: [{
@@ -1115,18 +1127,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
1115
1127
  type: Input
1116
1128
  }], type: [{
1117
1129
  type: Input
1130
+ }], updateOnBlur: [{
1131
+ type: Input
1118
1132
  }] } });
1119
1133
 
1120
1134
  class CreateAccountComponent {
1121
1135
  /**
1122
1136
  * @ignore
1123
1137
  */
1124
- ngOnInit() { }
1138
+ ngOnInit() {
1139
+ if (this.email) {
1140
+ this.registerForm.get('username')?.setValue(this.email);
1141
+ }
1142
+ if (!this.emailEditable) {
1143
+ this.registerForm.get('username')?.disable();
1144
+ }
1145
+ }
1125
1146
  constructor(fb) {
1126
1147
  this.fb = fb;
1127
1148
  // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
1128
1149
  // https://github.com/storybookjs/storybook/issues/16865
1129
1150
  // https://github.com/storybookjs/storybook/issues/17004
1151
+ /**
1152
+ * @ignore
1153
+ */
1154
+ this.email = '';
1155
+ /**
1156
+ * @ignore
1157
+ */
1158
+ this.emailEditable = true;
1130
1159
  /**
1131
1160
  * @ignore
1132
1161
  */
@@ -1209,11 +1238,15 @@ class CreateAccountComponent {
1209
1238
  }
1210
1239
  }
1211
1240
  CreateAccountComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CreateAccountComponent, deps: [{ token: i1$3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
1212
- CreateAccountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CreateAccountComponent, selector: "ui-create-account", inputs: { termsOfusePath: "termsOfusePath", formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", loginEvent: "loginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <div class=\"subtitle\">{{ i18n.subtitle }}</div>\n <form [formGroup]=\"registerForm\">\n <div class=\"field\">\n <ui-field\n formControlName=\"username\"\n [label]=\"i18n.email_label\"\n [type]=\"'email'\"\n [required]=\"true\"\n [errors]=\"formErrors['username']\"\n (ngModelChange)=\"checkErrors('username')\"\n ></ui-field>\n </div>\n <div class=\"field\">\n <ui-field\n formControlName=\"password\"\n [label]=\"i18n.password_label\"\n [type]=\"'password'\"\n [required]=\"true\"\n [errors]=\"formErrors['password']\"\n (ngModelChange)=\"checkErrors('password')\"\n ></ui-field>\n <div class=\"password-strength-container\">\n <mat-password-strength\n [min]=\"12\"\n #passwordComponentWithValidation\n [password]=\"registerForm.controls['password'].value\"\n aria-hidden=\"true\"\n >\n </mat-password-strength>\n </div>\n <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n </div>\n <div class=\"terms-conditions-container\">\n <ui-checkbox formControlName=\"agree_terms_and_conditions\" [label]=\"i18n.terms_conditions\"></ui-checkbox>\n <a class=\"link\" [href]=\"termsOfusePath\" target=\"_blank\">{{ i18n.terms_conditions_link_label }}</a>.\n </div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button_label\"\n [disabled]=\"registerForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (buttonClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n <div>\n {{ i18n.have_career_passport }} <span class=\"link\" (click)=\"login()\">{{ i18n.login }}</span>\n </div>\n </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box ui-logo{width:160px;display:inline-flex}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin-top:40px}.form-box .subtitle{font-weight:400;font-size:16px;line-height:21.6px;margin:24px 0}.form-box .field{width:100%}.form-box .password-strength-container{margin:2.7px 0 1px}.form-box .terms-conditions-container{display:flex;align-items:center;gap:4px;margin-left:-8px}.form-box .submit-button{margin:24px 0}.form-box .mat-mdc-checkbox{font-weight:400}.form-box .mat-mdc-checkbox ::ng-deep .mdc-checkbox{padding-left:4px}.form-box .mat-mdc-checkbox ::ng-deep .mdc-checkbox .mdc-checkbox__background{left:4px}.form-box .link{font-weight:600;cursor:pointer;color:#46a997;text-decoration:none}.form-box .link:hover{text-decoration:underline}.form-box ::ng-deep .mat-mdc-card-content{padding:0!important}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "color", "name", "label", "multiple"], outputs: ["changed"] }, { kind: "component", type: i5.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { kind: "component", type: i5.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1241
+ CreateAccountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CreateAccountComponent, selector: "ui-create-account", inputs: { email: "email", emailEditable: "emailEditable", termsOfusePath: "termsOfusePath", formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", loginEvent: "loginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <div class=\"subtitle\">{{ i18n.subtitle }}</div>\n <form [formGroup]=\"registerForm\">\n <div class=\"field\">\n <ui-field\n formControlName=\"username\"\n [label]=\"i18n.email_label\"\n [type]=\"'email'\"\n [required]=\"true\"\n [errors]=\"formErrors['username']\"\n (ngModelChange)=\"checkErrors('username')\"\n ></ui-field>\n </div>\n <div class=\"field\">\n <ui-field\n formControlName=\"password\"\n [label]=\"i18n.password_label\"\n [type]=\"'password'\"\n [required]=\"true\"\n [errors]=\"formErrors['password']\"\n (ngModelChange)=\"checkErrors('password')\"\n ></ui-field>\n <div class=\"password-strength-container\">\n <mat-password-strength\n [min]=\"12\"\n #passwordComponentWithValidation\n [password]=\"registerForm.controls['password'].value\"\n aria-hidden=\"true\"\n >\n </mat-password-strength>\n </div>\n <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n </div>\n <div class=\"terms-conditions-container\">\n <ui-checkbox formControlName=\"agree_terms_and_conditions\" [label]=\"i18n.terms_conditions\"></ui-checkbox>\n <a class=\"link\" [href]=\"termsOfusePath\" target=\"_blank\">{{ i18n.terms_conditions_link_label }}</a>.\n </div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button_label\"\n [disabled]=\"registerForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (buttonClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n <div>\n {{ i18n.have_career_passport }} <span class=\"link\" (click)=\"login()\">{{ i18n.login }}</span>\n </div>\n </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box ui-logo{width:160px;display:inline-flex}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin-top:40px}.form-box .subtitle{font-weight:400;font-size:16px;line-height:21.6px;margin:24px 0}.form-box .field{width:100%}.form-box .password-strength-container{margin:2.7px 0 1px}.form-box .terms-conditions-container{display:flex;align-items:center;gap:4px;margin-left:-8px}.form-box .submit-button{margin:24px 0}.form-box .mat-mdc-checkbox{font-weight:400}.form-box .mat-mdc-checkbox ::ng-deep .mdc-checkbox{padding-left:4px}.form-box .mat-mdc-checkbox ::ng-deep .mdc-checkbox .mdc-checkbox__background{left:4px}.form-box .link{font-weight:600;cursor:pointer;color:#46a997;text-decoration:none}.form-box .link:hover{text-decoration:underline}.form-box ::ng-deep .mat-mdc-card-content{padding:0!important}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type", "updateOnBlur"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "color", "name", "label", "multiple"], outputs: ["changed"] }, { kind: "component", type: i5.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { kind: "component", type: i5.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1213
1242
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CreateAccountComponent, decorators: [{
1214
1243
  type: Component,
1215
1244
  args: [{ selector: 'ui-create-account', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <div class=\"subtitle\">{{ i18n.subtitle }}</div>\n <form [formGroup]=\"registerForm\">\n <div class=\"field\">\n <ui-field\n formControlName=\"username\"\n [label]=\"i18n.email_label\"\n [type]=\"'email'\"\n [required]=\"true\"\n [errors]=\"formErrors['username']\"\n (ngModelChange)=\"checkErrors('username')\"\n ></ui-field>\n </div>\n <div class=\"field\">\n <ui-field\n formControlName=\"password\"\n [label]=\"i18n.password_label\"\n [type]=\"'password'\"\n [required]=\"true\"\n [errors]=\"formErrors['password']\"\n (ngModelChange)=\"checkErrors('password')\"\n ></ui-field>\n <div class=\"password-strength-container\">\n <mat-password-strength\n [min]=\"12\"\n #passwordComponentWithValidation\n [password]=\"registerForm.controls['password'].value\"\n aria-hidden=\"true\"\n >\n </mat-password-strength>\n </div>\n <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n </div>\n <div class=\"terms-conditions-container\">\n <ui-checkbox formControlName=\"agree_terms_and_conditions\" [label]=\"i18n.terms_conditions\"></ui-checkbox>\n <a class=\"link\" [href]=\"termsOfusePath\" target=\"_blank\">{{ i18n.terms_conditions_link_label }}</a>.\n </div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button_label\"\n [disabled]=\"registerForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (buttonClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n <div>\n {{ i18n.have_career_passport }} <span class=\"link\" (click)=\"login()\">{{ i18n.login }}</span>\n </div>\n </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box ui-logo{width:160px;display:inline-flex}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin-top:40px}.form-box .subtitle{font-weight:400;font-size:16px;line-height:21.6px;margin:24px 0}.form-box .field{width:100%}.form-box .password-strength-container{margin:2.7px 0 1px}.form-box .terms-conditions-container{display:flex;align-items:center;gap:4px;margin-left:-8px}.form-box .submit-button{margin:24px 0}.form-box .mat-mdc-checkbox{font-weight:400}.form-box .mat-mdc-checkbox ::ng-deep .mdc-checkbox{padding-left:4px}.form-box .mat-mdc-checkbox ::ng-deep .mdc-checkbox .mdc-checkbox__background{left:4px}.form-box .link{font-weight:600;cursor:pointer;color:#46a997;text-decoration:none}.form-box .link:hover{text-decoration:underline}.form-box ::ng-deep .mat-mdc-card-content{padding:0!important}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"] }]
1216
- }], ctorParameters: function () { return [{ type: i1$3.UntypedFormBuilder }]; }, propDecorators: { termsOfusePath: [{
1245
+ }], ctorParameters: function () { return [{ type: i1$3.UntypedFormBuilder }]; }, propDecorators: { email: [{
1246
+ type: Input
1247
+ }], emailEditable: [{
1248
+ type: Input
1249
+ }], termsOfusePath: [{
1217
1250
  type: Input
1218
1251
  }], formErrors: [{
1219
1252
  type: Input
@@ -1366,7 +1399,7 @@ class CreatePasswordComponent {
1366
1399
  }
1367
1400
  }
1368
1401
  CreatePasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CreatePasswordComponent, deps: [{ token: i1$3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
1369
- CreatePasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CreatePasswordComponent, selector: "ui-create-password", inputs: { formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <form [formGroup]=\"createPasswordForm\">\n <div class=\"field\">\n <ui-field\n formControlName=\"password\"\n [label]=\"i18n.password_label\"\n [type]=\"'password'\"\n [required]=\"true\"\n [errors]=\"formErrors.password\"\n (ngModelChange)=\"checkErrors('password')\"\n ></ui-field>\n <mat-password-strength\n [min]=\"12\"\n #passwordComponentWithValidation\n [password]=\"createPasswordForm.controls['password'].value\"\n aria-hidden=\"true\"\n >\n </mat-password-strength>\n <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n </div>\n <div></div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button\"\n [disabled]=\"createPasswordForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (buttonClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box ui-logo{width:160px;display:inline-flex}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px}.form-box .field{width:100%}.form-box .submit-button{margin-top:25px}.form-box ::ng-deep .mat-mdc-card-content{padding:0!important}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i5.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { kind: "component", type: i5.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1402
+ CreatePasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CreatePasswordComponent, selector: "ui-create-password", inputs: { formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <form [formGroup]=\"createPasswordForm\">\n <div class=\"field\">\n <ui-field\n formControlName=\"password\"\n [label]=\"i18n.password_label\"\n [type]=\"'password'\"\n [required]=\"true\"\n [errors]=\"formErrors.password\"\n (ngModelChange)=\"checkErrors('password')\"\n ></ui-field>\n <mat-password-strength\n [min]=\"12\"\n #passwordComponentWithValidation\n [password]=\"createPasswordForm.controls['password'].value\"\n aria-hidden=\"true\"\n >\n </mat-password-strength>\n <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n </div>\n <div></div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button\"\n [disabled]=\"createPasswordForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (buttonClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box ui-logo{width:160px;display:inline-flex}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px}.form-box .field{width:100%}.form-box .submit-button{margin-top:25px}.form-box ::ng-deep .mat-mdc-card-content{padding:0!important}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type", "updateOnBlur"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i5.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { kind: "component", type: i5.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1370
1403
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CreatePasswordComponent, decorators: [{
1371
1404
  type: Component,
1372
1405
  args: [{ selector: 'ui-create-password', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <form [formGroup]=\"createPasswordForm\">\n <div class=\"field\">\n <ui-field\n formControlName=\"password\"\n [label]=\"i18n.password_label\"\n [type]=\"'password'\"\n [required]=\"true\"\n [errors]=\"formErrors.password\"\n (ngModelChange)=\"checkErrors('password')\"\n ></ui-field>\n <mat-password-strength\n [min]=\"12\"\n #passwordComponentWithValidation\n [password]=\"createPasswordForm.controls['password'].value\"\n aria-hidden=\"true\"\n >\n </mat-password-strength>\n <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n </div>\n <div></div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button\"\n [disabled]=\"createPasswordForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (buttonClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box ui-logo{width:160px;display:inline-flex}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px}.form-box .field{width:100%}.form-box .submit-button{margin-top:25px}.form-box ::ng-deep .mat-mdc-card-content{padding:0!important}\n"] }]
@@ -1965,7 +1998,7 @@ class ForgotPasswordComponent {
1965
1998
  }
1966
1999
  }
1967
2000
  ForgotPasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ForgotPasswordComponent, deps: [{ token: i1$3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
1968
- ForgotPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ForgotPasswordComponent, selector: "ui-forgot-password", inputs: { formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", backToLoginEvent: "backToLoginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <form [formGroup]=\"forgotPasswordForm\">\n <div class=\"field\">\n <ui-field\n formControlName=\"email\"\n [label]=\"i18n.email_label\"\n [type]=\"'email'\"\n [required]=\"true\"\n [errors]=\"formErrors.email\"\n (ngModelChange)=\"checkErrors('email')\"\n ></ui-field>\n </div>\n <div></div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button_label\"\n [disabled]=\"forgotPasswordForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (buttonClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n <div class=\"back-login\" (click)=\"backToLogin()\">\n <mat-icon>arrow_back</mat-icon>\n <span>{{ i18n.back_to_login }}</span>\n </div>\n </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box ui-logo{width:160px;display:inline-flex}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 21px}.form-box .field{width:100%}.form-box .submit-button{margin:3px 0 24px}.form-box .back-login{display:flex;align-content:center;color:#46a997;cursor:pointer}.form-box .back-login mat-icon{margin-right:8px}.form-box .back-login span{padding-top:2px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2001
+ ForgotPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ForgotPasswordComponent, selector: "ui-forgot-password", inputs: { formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", backToLoginEvent: "backToLoginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <form [formGroup]=\"forgotPasswordForm\">\n <div class=\"field\">\n <ui-field\n formControlName=\"email\"\n [label]=\"i18n.email_label\"\n [type]=\"'email'\"\n [required]=\"true\"\n [errors]=\"formErrors.email\"\n (ngModelChange)=\"checkErrors('email')\"\n ></ui-field>\n </div>\n <div></div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button_label\"\n [disabled]=\"forgotPasswordForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (buttonClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n <div class=\"back-login\" (click)=\"backToLogin()\">\n <mat-icon>arrow_back</mat-icon>\n <span>{{ i18n.back_to_login }}</span>\n </div>\n </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box ui-logo{width:160px;display:inline-flex}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 21px}.form-box .field{width:100%}.form-box .submit-button{margin:3px 0 24px}.form-box .back-login{display:flex;align-content:center;color:#46a997;cursor:pointer}.form-box .back-login mat-icon{margin-right:8px}.form-box .back-login span{padding-top:2px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type", "updateOnBlur"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1969
2002
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ForgotPasswordComponent, decorators: [{
1970
2003
  type: Component,
1971
2004
  args: [{ selector: 'ui-forgot-password', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <form [formGroup]=\"forgotPasswordForm\">\n <div class=\"field\">\n <ui-field\n formControlName=\"email\"\n [label]=\"i18n.email_label\"\n [type]=\"'email'\"\n [required]=\"true\"\n [errors]=\"formErrors.email\"\n (ngModelChange)=\"checkErrors('email')\"\n ></ui-field>\n </div>\n <div></div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button_label\"\n [disabled]=\"forgotPasswordForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (buttonClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n <div class=\"back-login\" (click)=\"backToLogin()\">\n <mat-icon>arrow_back</mat-icon>\n <span>{{ i18n.back_to_login }}</span>\n </div>\n </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box ui-logo{width:160px;display:inline-flex}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 21px}.form-box .field{width:100%}.form-box .submit-button{margin:3px 0 24px}.form-box .back-login{display:flex;align-content:center;color:#46a997;cursor:pointer}.form-box .back-login mat-icon{margin-right:8px}.form-box .back-login span{padding-top:2px;font-weight:700}\n"] }]
@@ -2161,12 +2194,20 @@ class LoginComponent {
2161
2194
  /**
2162
2195
  * @ignore
2163
2196
  */
2164
- ngOnInit() { }
2197
+ ngOnInit() {
2198
+ if (this.email) {
2199
+ this.loginForm.get('email')?.setValue(this.email);
2200
+ }
2201
+ }
2165
2202
  constructor(fb) {
2166
2203
  this.fb = fb;
2167
2204
  // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
2168
2205
  // https://github.com/storybookjs/storybook/issues/16865
2169
2206
  // https://github.com/storybookjs/storybook/issues/17004
2207
+ /**
2208
+ * @ignore
2209
+ */
2210
+ this.email = '';
2170
2211
  /**
2171
2212
  * @ignore
2172
2213
  */
@@ -2235,11 +2276,13 @@ class LoginComponent {
2235
2276
  }
2236
2277
  }
2237
2278
  LoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LoginComponent, deps: [{ token: i1$3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
2238
- LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: LoginComponent, selector: "ui-login", inputs: { loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", forgotPasswordEvent: "forgotPasswordEvent", createAccountEvent: "createAccountEvent" }, ngImport: i0, template: "<div class=\"ui-login-container\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <form [formGroup]=\"loginForm\" class=\"form-wrapper\">\n <div class=\"field-email\">\n <ui-field\n formControlName=\"email\"\n [label]=\"i18n.email_label\"\n [type]=\"'email'\"\n [required]=\"true\"\n [errors]=\"[formErrors.email]\"\n (ngModelChange)=\"checkErrors('email')\"\n ></ui-field>\n </div>\n <div class=\"field-password\">\n <ui-field\n formControlName=\"password\"\n [label]=\"i18n.password_label\"\n [type]=\"'password'\"\n [required]=\"true\"\n [errors]=\"[formErrors.password]\"\n (ngModelChange)=\"checkErrors('password')\"\n ></ui-field>\n </div>\n <div class=\"actions\">\n <div class=\"remember-me\">\n <ui-checkbox formControlName=\"remember_me\" [label]=\"i18n.remember_me\"></ui-checkbox>\n </div>\n <div class=\"forgot-password\" (click)=\"forgotPassword()\">{{ i18n.forgot_password }}</div>\n </div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button_label\"\n [disabled]=\"loginForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (buttonClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n <div class=\"create-account-wrapper\">\n <p>\n {{ i18n.not_have_account }}\n <span class=\"create-account\" (click)=\"createAccount()\">{{ i18n.create_account }}</span>\n </p>\n </div>\n </form>\n</div>\n", styles: [".ui-login-container{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(7,auto);max-width:672px;max-height:594px;height:100%;width:100%;padding:60px;background:#ffffff}.ui-login-container ui-logo{grid-column:1/5;grid-row:1/2;width:160px}.ui-login-container .title{grid-column:1/5;grid-row:2/3;font-weight:700;font-size:22px;line-height:29.7px;margin:24px 0;letter-spacing:-.04em}.ui-login-container .form-wrapper{grid-column:1/5;grid-row:3/8;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,auto)}.ui-login-container .form-wrapper .field-email{grid-column:1/5;grid-row:1/2}.ui-login-container .form-wrapper .field-password{grid-column:1/5;grid-row:2/3}.ui-login-container .form-wrapper .actions{grid-column:1/5;grid-row:3/4;display:flex;height:-moz-fit-content;height:fit-content;max-height:20px;justify-content:space-between;margin-top:3px;align-items:center}.ui-login-container .form-wrapper .actions .forgot-password{cursor:pointer;font-weight:700;text-decoration:underline}.ui-login-container .form-wrapper .actions .remember-me{margin-left:-10px}.ui-login-container .form-wrapper .submit-button{margin-top:40px;grid-column:1/5;grid-row:4/5}.ui-login-container .form-wrapper .create-account-wrapper{margin-top:24px;grid-column:1/5;grid-row:5/6}.ui-login-container .form-wrapper .create-account-wrapper p{margin:0;line-height:19.07px}.ui-login-container .form-wrapper .create-account-wrapper .create-account{color:#46a997;cursor:pointer}.ui-login-container .form-wrapper .create-account-wrapper .create-account:hover{text-decoration:underline}@media (min-width: 1024px){.ui-login-container{box-shadow:0 8px 16px #0000001a;border-radius:8px;padding:80px}}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "color", "name", "label", "multiple"], outputs: ["changed"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2279
+ LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: LoginComponent, selector: "ui-login", inputs: { email: "email", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", forgotPasswordEvent: "forgotPasswordEvent", createAccountEvent: "createAccountEvent" }, ngImport: i0, template: "<div class=\"ui-login-container\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <form [formGroup]=\"loginForm\" class=\"form-wrapper\">\n <div class=\"field-email\">\n <ui-field\n formControlName=\"email\"\n [label]=\"i18n.email_label\"\n [type]=\"'email'\"\n [required]=\"true\"\n [errors]=\"[formErrors.email]\"\n (ngModelChange)=\"checkErrors('email')\"\n ></ui-field>\n </div>\n <div class=\"field-password\">\n <ui-field\n formControlName=\"password\"\n [label]=\"i18n.password_label\"\n [type]=\"'password'\"\n [required]=\"true\"\n [errors]=\"[formErrors.password]\"\n (ngModelChange)=\"checkErrors('password')\"\n ></ui-field>\n </div>\n <div class=\"actions\">\n <div class=\"remember-me\">\n <ui-checkbox formControlName=\"remember_me\" [label]=\"i18n.remember_me\"></ui-checkbox>\n </div>\n <div class=\"forgot-password\" (click)=\"forgotPassword()\">{{ i18n.forgot_password }}</div>\n </div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button_label\"\n [disabled]=\"loginForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (buttonClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n <div class=\"create-account-wrapper\">\n <p>\n {{ i18n.not_have_account }}\n <span class=\"create-account\" (click)=\"createAccount()\">{{ i18n.create_account }}</span>\n </p>\n </div>\n </form>\n</div>\n", styles: [".ui-login-container{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(7,auto);max-width:672px;max-height:594px;height:100%;width:100%;padding:60px;background:#ffffff}.ui-login-container ui-logo{grid-column:1/5;grid-row:1/2;width:160px}.ui-login-container .title{grid-column:1/5;grid-row:2/3;font-weight:700;font-size:22px;line-height:29.7px;margin:24px 0;letter-spacing:-.04em}.ui-login-container .form-wrapper{grid-column:1/5;grid-row:3/8;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,auto)}.ui-login-container .form-wrapper .field-email{grid-column:1/5;grid-row:1/2}.ui-login-container .form-wrapper .field-password{grid-column:1/5;grid-row:2/3}.ui-login-container .form-wrapper .actions{grid-column:1/5;grid-row:3/4;display:flex;height:-moz-fit-content;height:fit-content;max-height:20px;justify-content:space-between;margin-top:3px;align-items:center}.ui-login-container .form-wrapper .actions .forgot-password{cursor:pointer;font-weight:700;text-decoration:underline}.ui-login-container .form-wrapper .actions .remember-me{margin-left:-10px}.ui-login-container .form-wrapper .submit-button{margin-top:40px;grid-column:1/5;grid-row:4/5}.ui-login-container .form-wrapper .create-account-wrapper{margin-top:24px;grid-column:1/5;grid-row:5/6}.ui-login-container .form-wrapper .create-account-wrapper p{margin:0;line-height:19.07px}.ui-login-container .form-wrapper .create-account-wrapper .create-account{color:#46a997;cursor:pointer}.ui-login-container .form-wrapper .create-account-wrapper .create-account:hover{text-decoration:underline}@media (min-width: 1024px){.ui-login-container{box-shadow:0 8px 16px #0000001a;border-radius:8px;padding:80px}}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type", "updateOnBlur"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "color", "name", "label", "multiple"], outputs: ["changed"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2239
2280
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LoginComponent, decorators: [{
2240
2281
  type: Component,
2241
2282
  args: [{ selector: 'ui-login', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-login-container\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <form [formGroup]=\"loginForm\" class=\"form-wrapper\">\n <div class=\"field-email\">\n <ui-field\n formControlName=\"email\"\n [label]=\"i18n.email_label\"\n [type]=\"'email'\"\n [required]=\"true\"\n [errors]=\"[formErrors.email]\"\n (ngModelChange)=\"checkErrors('email')\"\n ></ui-field>\n </div>\n <div class=\"field-password\">\n <ui-field\n formControlName=\"password\"\n [label]=\"i18n.password_label\"\n [type]=\"'password'\"\n [required]=\"true\"\n [errors]=\"[formErrors.password]\"\n (ngModelChange)=\"checkErrors('password')\"\n ></ui-field>\n </div>\n <div class=\"actions\">\n <div class=\"remember-me\">\n <ui-checkbox formControlName=\"remember_me\" [label]=\"i18n.remember_me\"></ui-checkbox>\n </div>\n <div class=\"forgot-password\" (click)=\"forgotPassword()\">{{ i18n.forgot_password }}</div>\n </div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button_label\"\n [disabled]=\"loginForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (buttonClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n <div class=\"create-account-wrapper\">\n <p>\n {{ i18n.not_have_account }}\n <span class=\"create-account\" (click)=\"createAccount()\">{{ i18n.create_account }}</span>\n </p>\n </div>\n </form>\n</div>\n", styles: [".ui-login-container{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(7,auto);max-width:672px;max-height:594px;height:100%;width:100%;padding:60px;background:#ffffff}.ui-login-container ui-logo{grid-column:1/5;grid-row:1/2;width:160px}.ui-login-container .title{grid-column:1/5;grid-row:2/3;font-weight:700;font-size:22px;line-height:29.7px;margin:24px 0;letter-spacing:-.04em}.ui-login-container .form-wrapper{grid-column:1/5;grid-row:3/8;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,auto)}.ui-login-container .form-wrapper .field-email{grid-column:1/5;grid-row:1/2}.ui-login-container .form-wrapper .field-password{grid-column:1/5;grid-row:2/3}.ui-login-container .form-wrapper .actions{grid-column:1/5;grid-row:3/4;display:flex;height:-moz-fit-content;height:fit-content;max-height:20px;justify-content:space-between;margin-top:3px;align-items:center}.ui-login-container .form-wrapper .actions .forgot-password{cursor:pointer;font-weight:700;text-decoration:underline}.ui-login-container .form-wrapper .actions .remember-me{margin-left:-10px}.ui-login-container .form-wrapper .submit-button{margin-top:40px;grid-column:1/5;grid-row:4/5}.ui-login-container .form-wrapper .create-account-wrapper{margin-top:24px;grid-column:1/5;grid-row:5/6}.ui-login-container .form-wrapper .create-account-wrapper p{margin:0;line-height:19.07px}.ui-login-container .form-wrapper .create-account-wrapper .create-account{color:#46a997;cursor:pointer}.ui-login-container .form-wrapper .create-account-wrapper .create-account:hover{text-decoration:underline}@media (min-width: 1024px){.ui-login-container{box-shadow:0 8px 16px #0000001a;border-radius:8px;padding:80px}}\n"] }]
2242
- }], ctorParameters: function () { return [{ type: i1$3.UntypedFormBuilder }]; }, propDecorators: { loading: [{
2283
+ }], ctorParameters: function () { return [{ type: i1$3.UntypedFormBuilder }]; }, propDecorators: { email: [{
2284
+ type: Input
2285
+ }], loading: [{
2243
2286
  type: Input
2244
2287
  }], i18n: [{
2245
2288
  type: Input
@@ -3112,6 +3155,193 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
3112
3155
  }]
3113
3156
  }] });
3114
3157
 
3158
+ class DropdownComponent {
3159
+ constructor() {
3160
+ this.class = 'ui-dropdown';
3161
+ /**
3162
+ * Text content will be applied to the input element if present.
3163
+ *
3164
+ * @type {string}
3165
+ * @memberof DropdownComponent
3166
+ */
3167
+ this.label = '';
3168
+ /**
3169
+ * Unique id of the element.
3170
+ *
3171
+ * @type {string}
3172
+ * @memberof DropdownComponent
3173
+ */
3174
+ this.id = '';
3175
+ /**
3176
+ * Whether the component is disabled.
3177
+ * Default: false.
3178
+ *
3179
+ * @type {boolean}
3180
+ * @memberof DropdownComponent
3181
+ */
3182
+ this.disabled = false;
3183
+ /**
3184
+ * List of options.
3185
+ *
3186
+ * @type {OptionType}
3187
+ * @memberof DropdownComponent
3188
+ */
3189
+ this.valueList = [];
3190
+ /**
3191
+ * Whether the user should be allowed to clear the values.
3192
+ * Default: true.
3193
+ *
3194
+ * @type {boolean}
3195
+ * @memberof DropdownComponent
3196
+ */
3197
+ this.allowClear = true;
3198
+ /**
3199
+ * This will allow the user to select multiple values at once.
3200
+ * Default: true.
3201
+ *
3202
+ * @type {boolean}
3203
+ * @memberof DropdownComponent
3204
+ */
3205
+ this.allowMultipleSelection = false;
3206
+ /**
3207
+ * Whether the component is required.
3208
+ * Default: false.
3209
+ *
3210
+ * @type {boolean}
3211
+ * @memberof DropdownComponent
3212
+ */
3213
+ this.required = false;
3214
+ /**
3215
+ * @ignore
3216
+ */
3217
+ this.onChange = (_) => { };
3218
+ /**
3219
+ * @ignore
3220
+ */
3221
+ this.onTouch = () => { };
3222
+ this.errors = [];
3223
+ this.valueList = [];
3224
+ }
3225
+ ngOnInit() {
3226
+ this.errorsLength = this.setErrorsLength();
3227
+ }
3228
+ clearValue(event) {
3229
+ event?.stopPropagation();
3230
+ this.value = '';
3231
+ }
3232
+ //Save select value
3233
+ onChangeOption(event) {
3234
+ this.value = event.value;
3235
+ this.errorsLength = this.setErrorsLength();
3236
+ this.onTouch();
3237
+ this.onChange(this.value);
3238
+ }
3239
+ //Set errors length for validation
3240
+ setErrorsLength() {
3241
+ if (!!this.errors) {
3242
+ return this.errors.length > 0 ? true : false;
3243
+ }
3244
+ return false;
3245
+ }
3246
+ writeValue(value) {
3247
+ if (value) {
3248
+ this.value = value || '';
3249
+ }
3250
+ else {
3251
+ this.value = '';
3252
+ }
3253
+ }
3254
+ registerOnChange(fn) {
3255
+ this.onChange = fn;
3256
+ }
3257
+ registerOnTouched(fn) {
3258
+ this.onTouch = fn;
3259
+ }
3260
+ setDisabledState(isDisabled) {
3261
+ this.disabled = isDisabled;
3262
+ }
3263
+ }
3264
+ DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3265
+ DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DropdownComponent, selector: "ui-dropdown", inputs: { label: "label", name: "name", placeholder: "placeholder", id: "id", value: "value", errors: "errors", disabled: "disabled", valueList: "valueList", allowClear: "allowClear", allowMultipleSelection: "allowMultipleSelection", required: "required" }, host: { properties: { "class": "this.class" } }, providers: [
3266
+ {
3267
+ provide: NG_VALUE_ACCESSOR,
3268
+ useExisting: forwardRef(() => DropdownComponent),
3269
+ multi: true,
3270
+ },
3271
+ ], ngImport: i0, template: "<mat-form-field appearance=\"outline\" [color]=\"errorsLength ? 'warn' : 'accent'\">\n <mat-label>{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <mat-select\n #matSelect\n [id]=\"id!\"\n panelClass=\"ui-dropdown-list\"\n [disabled]=\"disabled\"\n [multiple]=\"allowMultipleSelection\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n (selectionChange)=\"onChangeOption($event)\"\n [attr.name]=\"name\">\n <div class=\"mat-option-section\" *ngFor=\"let section of valueList\">\n <span *ngIf=\"section.sectionTitle\" class=\"section-title\">{{ section.sectionTitle }}</span>\n <mat-option *ngIf=\"section.value\" #matOption [value]=\"section.value\">\n {{ section.value }}\n </mat-option>\n </div>\n </mat-select>\n <ui-button *ngIf=\"allowClear && !matSelect.empty\" type=\"secondary\" [justIcon]=\"true\" class=\"clear\" iconName=\"Close\" label=\"Clear\" (click)=\"clearValue($event)\"></ui-button>\n <ui-icon color=\"dark\" *ngIf=\"!matSelect.panelOpen\" size=\"24\" name=\"Arrow_down\"></ui-icon>\n <ui-icon color=\"petrol\" *ngIf=\"matSelect.panelOpen\" size=\"24\" name=\"Arrow_up\"></ui-icon>\n <mat-hint class=\"error\" *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of errors\">\n <ui-icon name=\"Error\"></ui-icon>{{ error }}\n </div>\n </mat-hint>\n</mat-form-field>\n", styles: ["ui-dropdown{display:flex}ui-dropdown .mat-mdc-form-field{margin-top:0;width:100%}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px;flex:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-arrow-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-floating-label{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused ui-icon:not(.clear) svg{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon{padding:0;height:auto;background:transparent}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:hover,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon.focus.cdk-focused.cdk-mouse-focused{background-color:transparent!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear{position:absolute;right:24px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear mat-icon.black svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused ui-icon svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0;margin-top:9px;font-size:12px;line-height:16px;position:relative}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-spacer{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error .errors{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-button svg,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list{margin-top:4px;border-radius:8px!important;box-shadow:0 8px 24px 4px #00000014}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option{display:flex;height:48px;color:#000}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option .mdc-list-item__primary-text{display:flex;align-items:center;justify-content:space-between}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-option-section .section-title{font-size:12px;text-transform:uppercase;display:flex;height:48px;align-items:center;font-weight:700;padding:0 16px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:focus:not(.mdc-list-item--disabled){background-color:#e0e0e0}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option.mat-mdc-option-active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option.mdc-list-item--selected,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple.mat-mdc-option-active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple.mdc-list-item--selected{background-color:#e9f0f1;color:#000}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option.mat-mdc-option-active:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option.mat-mdc-option-active:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option.mdc-list-item--selected:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option.mdc-list-item--selected:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple.mat-mdc-option-active:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple.mat-mdc-option-active:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple.mdc-list-item--selected:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple.mdc-list-item--selected:focus:not(.mdc-list-item--disabled){background-color:#c8d7de}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple:focus:not(.mdc-list-item--disabled){background-color:#e0e0e0}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option.mat-mdc-option-active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option.mdc-list-item--selected,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple.mat-mdc-option-active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple.mdc-list-item--selected{background-color:#f0dad9;color:#000}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option.mat-mdc-option-active:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option.mat-mdc-option-active:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option.mdc-list-item--selected:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option.mdc-list-item--selected:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple.mat-mdc-option-active:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple.mat-mdc-option-active:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple.mdc-list-item--selected:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple.mdc-list-item--selected:focus:not(.mdc-list-item--disabled){background-color:#e3c3c6}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error .errors{display:flex}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i5$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
3272
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DropdownComponent, decorators: [{
3273
+ type: Component,
3274
+ args: [{ selector: 'ui-dropdown', encapsulation: ViewEncapsulation.None, providers: [
3275
+ {
3276
+ provide: NG_VALUE_ACCESSOR,
3277
+ useExisting: forwardRef(() => DropdownComponent),
3278
+ multi: true,
3279
+ },
3280
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field appearance=\"outline\" [color]=\"errorsLength ? 'warn' : 'accent'\">\n <mat-label>{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <mat-select\n #matSelect\n [id]=\"id!\"\n panelClass=\"ui-dropdown-list\"\n [disabled]=\"disabled\"\n [multiple]=\"allowMultipleSelection\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n (selectionChange)=\"onChangeOption($event)\"\n [attr.name]=\"name\">\n <div class=\"mat-option-section\" *ngFor=\"let section of valueList\">\n <span *ngIf=\"section.sectionTitle\" class=\"section-title\">{{ section.sectionTitle }}</span>\n <mat-option *ngIf=\"section.value\" #matOption [value]=\"section.value\">\n {{ section.value }}\n </mat-option>\n </div>\n </mat-select>\n <ui-button *ngIf=\"allowClear && !matSelect.empty\" type=\"secondary\" [justIcon]=\"true\" class=\"clear\" iconName=\"Close\" label=\"Clear\" (click)=\"clearValue($event)\"></ui-button>\n <ui-icon color=\"dark\" *ngIf=\"!matSelect.panelOpen\" size=\"24\" name=\"Arrow_down\"></ui-icon>\n <ui-icon color=\"petrol\" *ngIf=\"matSelect.panelOpen\" size=\"24\" name=\"Arrow_up\"></ui-icon>\n <mat-hint class=\"error\" *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of errors\">\n <ui-icon name=\"Error\"></ui-icon>{{ error }}\n </div>\n </mat-hint>\n</mat-form-field>\n", styles: ["ui-dropdown{display:flex}ui-dropdown .mat-mdc-form-field{margin-top:0;width:100%}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px;flex:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-arrow-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-floating-label{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused ui-icon:not(.clear) svg{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon{padding:0;height:auto;background:transparent}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:hover,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon.focus.cdk-focused.cdk-mouse-focused{background-color:transparent!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear{position:absolute;right:24px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear mat-icon.black svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused ui-icon svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0;margin-top:9px;font-size:12px;line-height:16px;position:relative}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-spacer{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error .errors{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-button svg,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list{margin-top:4px;border-radius:8px!important;box-shadow:0 8px 24px 4px #00000014}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option{display:flex;height:48px;color:#000}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option .mdc-list-item__primary-text{display:flex;align-items:center;justify-content:space-between}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-option-section .section-title{font-size:12px;text-transform:uppercase;display:flex;height:48px;align-items:center;font-weight:700;padding:0 16px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:focus:not(.mdc-list-item--disabled){background-color:#e0e0e0}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option.mat-mdc-option-active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option.mdc-list-item--selected,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple.mat-mdc-option-active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple.mdc-list-item--selected{background-color:#e9f0f1;color:#000}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option.mat-mdc-option-active:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option.mat-mdc-option-active:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option.mdc-list-item--selected:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option.mdc-list-item--selected:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple.mat-mdc-option-active:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple.mat-mdc-option-active:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple.mdc-list-item--selected:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple.mdc-list-item--selected:focus:not(.mdc-list-item--disabled){background-color:#c8d7de}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple:focus:not(.mdc-list-item--disabled){background-color:#e0e0e0}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option.mat-mdc-option-active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option.mdc-list-item--selected,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple.mat-mdc-option-active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple.mdc-list-item--selected{background-color:#f0dad9;color:#000}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option.mat-mdc-option-active:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option.mat-mdc-option-active:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option.mdc-list-item--selected:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option.mdc-list-item--selected:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple.mat-mdc-option-active:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple.mat-mdc-option-active:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple.mdc-list-item--selected:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple.mdc-list-item--selected:focus:not(.mdc-list-item--disabled){background-color:#e3c3c6}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error .errors{display:flex}\n"] }]
3281
+ }], ctorParameters: function () { return []; }, propDecorators: { class: [{
3282
+ type: HostBinding
3283
+ }], label: [{
3284
+ type: Input
3285
+ }], name: [{
3286
+ type: Input
3287
+ }], placeholder: [{
3288
+ type: Input
3289
+ }], id: [{
3290
+ type: Input
3291
+ }], value: [{
3292
+ type: Input
3293
+ }], errors: [{
3294
+ type: Input
3295
+ }], disabled: [{
3296
+ type: Input
3297
+ }], valueList: [{
3298
+ type: Input
3299
+ }], allowClear: [{
3300
+ type: Input
3301
+ }], allowMultipleSelection: [{
3302
+ type: Input
3303
+ }], required: [{
3304
+ type: Input
3305
+ }] } });
3306
+
3307
+ class DropdownComponentModule {
3308
+ }
3309
+ DropdownComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DropdownComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
3310
+ DropdownComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DropdownComponentModule, declarations: [DropdownComponent], imports: [CommonModule,
3311
+ MatFormFieldModule,
3312
+ MatInputModule,
3313
+ IconComponentModule,
3314
+ FormsModule,
3315
+ ReactiveFormsModule,
3316
+ ButtonComponentModule,
3317
+ MatSelectModule], exports: [DropdownComponent] });
3318
+ DropdownComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DropdownComponentModule, imports: [CommonModule,
3319
+ MatFormFieldModule,
3320
+ MatInputModule,
3321
+ IconComponentModule,
3322
+ FormsModule,
3323
+ ReactiveFormsModule,
3324
+ ButtonComponentModule,
3325
+ MatSelectModule] });
3326
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DropdownComponentModule, decorators: [{
3327
+ type: NgModule,
3328
+ args: [{
3329
+ declarations: [DropdownComponent],
3330
+ imports: [
3331
+ CommonModule,
3332
+ MatFormFieldModule,
3333
+ MatInputModule,
3334
+ IconComponentModule,
3335
+ FormsModule,
3336
+ ReactiveFormsModule,
3337
+ ButtonComponentModule,
3338
+ MatSelectModule,
3339
+ ],
3340
+ exports: [DropdownComponent],
3341
+ providers: [],
3342
+ }]
3343
+ }] });
3344
+
3115
3345
  /* eslint-disable */
3116
3346
  /* Components */
3117
3347
  // Alert Banner
@@ -3120,5 +3350,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
3120
3350
  * Generated bundle index. Do not edit.
3121
3351
  */
3122
3352
 
3123
- export { AlertBannerComponent, AlertBannerComponentModule, BannerActionComponent, BannerActionComponentModule, ButtonComponent, ButtonComponentModule, CardComponent, CardComponentModule, CheckboxComponent, CheckboxComponentModule, ColumnAlignmentEnum, ColumnTypeEnum, CreateAccountComponent, CreateAccountComponentModule, CreatePasswordComponent, CreatePasswordComponentModule, DataPropertyGetterPipe, DialogComponent, DialogComponentModule, DialogService, ElevationShadowComponent, ElevationShadowComponentModule, ElevationType, FieldComponent, FieldComponentModule, FileUploadComponent, FileUploadComponentModule, ForgotPasswordComponent, ForgotPasswordComponentModule, IconComponent, IconComponentModule, IconLabelComponent, IconLabelComponentModule, LabelComponent, LabelComponentModule, LabelSizeEnum, LoginComponent, LoginComponentModule, LogoComponent, LogoComponentModule, LogoPathEnum, LogoTypeEnum, NavbarComponent, NavbarComponentModule, NavigationComponent, NavigationComponentModule, PaginatorComponent, PaginatorComponentModule, ProgressBarComponent, ProgressBarComponentModule, RadioButtonComponent, RadioButtonComponentModule, SnackbarComponent, SnackbarComponentModule, TableComponent, TableComponentModule, TagComponent, TagComponentModule, TooltipComponent, TooltipComponentModule, TooltipPositionType };
3353
+ export { AlertBannerComponent, AlertBannerComponentModule, BannerActionComponent, BannerActionComponentModule, ButtonComponent, ButtonComponentModule, CardComponent, CardComponentModule, CheckboxComponent, CheckboxComponentModule, ColumnAlignmentEnum, ColumnTypeEnum, CreateAccountComponent, CreateAccountComponentModule, CreatePasswordComponent, CreatePasswordComponentModule, DataPropertyGetterPipe, DialogComponent, DialogComponentModule, DialogService, DropdownComponent, DropdownComponentModule, ElevationShadowComponent, ElevationShadowComponentModule, ElevationType, FieldComponent, FieldComponentModule, FileUploadComponent, FileUploadComponentModule, ForgotPasswordComponent, ForgotPasswordComponentModule, IconComponent, IconComponentModule, IconLabelComponent, IconLabelComponentModule, LabelComponent, LabelComponentModule, LabelSizeEnum, LoginComponent, LoginComponentModule, LogoComponent, LogoComponentModule, LogoPathEnum, LogoTypeEnum, NavbarComponent, NavbarComponentModule, NavigationComponent, NavigationComponentModule, PaginatorComponent, PaginatorComponentModule, ProgressBarComponent, ProgressBarComponentModule, RadioButtonComponent, RadioButtonComponentModule, SnackbarComponent, SnackbarComponentModule, TableComponent, TableComponentModule, TagComponent, TagComponentModule, TooltipComponent, TooltipComponentModule, TooltipPositionType };
3124
3354
  //# sourceMappingURL=testgorilla-tgo-ui.mjs.map