@testgorilla/tgo-ui 1.0.8 → 1.0.10

package/fesm2015/testgorilla-tgo-ui.mjs

@@ -14,7 +14,7 @@ import { HttpClientModule } from '@angular/common/http';
 import * as i1$2 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i1$3 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, Validators, FormGroup, FormControl } from '@angular/forms';
 import * as i2$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i2$3 from '@angular/material/form-field';
@@ -32,7 +32,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i5$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i6$1 from '@angular/material/core';
-import { MatRippleModule } from '@angular/material/core';
+import { MatRippleModule, MatNativeDateModule } from '@angular/material/core';
 import * as i1$6 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import * as i2$5 from '@angular/material/radio';
@@ -48,6 +48,8 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { Subscription } from 'rxjs';
 import * as i5$2 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
+import * as i6$2 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
 
 const alertBarsUtil = {
     //Set css class and iconName according type
@@ -932,8 +934,10 @@ const CREATE_ACCOUNT_i18n = {
     subtitle: 'Enter the email address to which you received an assessment invite.',
     email_label: 'Email',
     password_label: 'Password',
-    terms_conditions: 'I have read and I accept the ',
-    terms_conditions_link_label: 'terms of use',
+    terms_conditions: 'I have read and accepted the ',
+    terms_conditions_link_label: 'candidate terms',
+    privacy_policy_link_label: 'privacy policy',
+    terms_conditions_delimiter: 'and',
     button_label: 'Next',
     have_career_passport: 'Already have a Career Passport?',
     login: 'Log in here',
@@ -1220,9 +1224,15 @@ class CreateAccountComponent {
          */
         this.emailEditable = true;
         /**
-         * @ignore
+         * Path for candidate terms link
+         * @memberof CreateAccountComponent
+         */
+        this.termsOfusePath = 'https://www.testgorilla.com/candidate-terms/';
+        /**
+         * Path for privacy policy link
+         * @memberof CreateAccountComponent
          */
-        this.termsOfusePath = 'https://www.testgorilla.com/terms/';
+        this.privacyPolicyPath = 'https://www.testgorilla.com/privacy-policy/';
         /**
          * @ignore
          */
@@ -1302,16 +1312,18 @@ class CreateAccountComponent {
     }
 }
 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 });
-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", "allowOnlyDigits"] }, { 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 });
+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", privacyPolicyPath: "privacyPolicyPath", 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      <span>{{i18n.terms_conditions_delimiter}}</span>\n      <a class=\"link\" [href]=\"privacyPolicyPath\" target=\"_blank\">{{ i18n.privacy_policy_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", "allowOnlyDigits"] }, { 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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CreateAccountComponent, decorators: [{
             type: Component,
-            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"] }]
+            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      <span>{{i18n.terms_conditions_delimiter}}</span>\n      <a class=\"link\" [href]=\"privacyPolicyPath\" target=\"_blank\">{{ i18n.privacy_policy_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"] }]
         }], ctorParameters: function () { return [{ type: i1$3.UntypedFormBuilder }]; }, propDecorators: { email: [{
                 type: Input
             }], emailEditable: [{
                 type: Input
             }], termsOfusePath: [{
                 type: Input
+            }], privacyPolicyPath: [{
+                type: Input
             }], formErrors: [{
                 type: Input
             }], loading: [{
@@ -3558,6 +3570,270 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
+/* eslint-disable no-underscore-dangle */
+class DatepickerComponent {
+    constructor() {
+        this.class = 'ui-datepicker';
+        /**
+         * Form field label
+         *
+         * @type {string}
+         * @memberof DatepickerComponent
+         */
+        this.label = '';
+        /**
+         * Input placeholder
+         *
+         * @type {string}
+         * @memberof DatepickerComponent
+         */
+        this.placeholder = '';
+        /**
+         * Input id
+         *
+         * @type {string}
+         * @memberof DatepickerComponent
+         */
+        this.id = '';
+        /**
+         * Input is update only on blur
+         *
+         * @type {Boolean}
+         * @memberof DatepickerComponent
+         */
+        this.updateOnBlur = false;
+        /**
+         * @ignore
+         */
+        this.onChange = (_) => { };
+        /**
+         * @ignore
+         */
+        this.onTouch = () => { };
+        /**
+         * Event emitted when the value is change - when used outside of form
+         *
+         * @type {Date}
+         * @memberof DatepickerComponent
+         */
+        this.changed = new EventEmitter();
+        this.range = new FormGroup({
+            start: new FormControl(null),
+            end: new FormControl(null),
+        });
+    }
+    /**
+     * Input field errors
+     *
+     * @type {string}
+     * @memberof DatepickerComponent
+     */
+    set errors(errors) {
+        this._errors = errors;
+        this.errorsLength = this.setErrorsLength();
+    }
+    get hint() {
+        if (this.hintMessage === undefined) {
+            return this.isRange ? 'MM/DD/YYYY - MM/DD/YYYY' : 'MM/DD/YYYY';
+        }
+        return this.hintMessage;
+    }
+    ngOnChanges() {
+        if (this.isRange) {
+            this.setRange();
+        }
+    }
+    // Set errors length for validation
+    // Consider only those errors which which are not empty
+    setErrorsLength() {
+        if (!!this._errors) {
+            return this._errors.filter(err => !!err).length > 0 ? true : false;
+        }
+        return false;
+    }
+    onValueChange(value) {
+        this.writeValue(value);
+        this.errorsLength = this.setErrorsLength();
+        if (!this.updateOnBlur) {
+            this.onTouch();
+        }
+        this.onChange(value);
+        this.changed.emit(value);
+    }
+    writeValue(value) {
+        this.value = value;
+        if (this.isRange) {
+            this.setRange();
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    dateRangeChange(start, end) {
+        if (start && end) {
+            this.onValueChange(this.getRange(start, end));
+        }
+    }
+    setRange() {
+        var _a;
+        if (typeof this.value === 'string') {
+            const [start, end] = (_a = this.value) === null || _a === void 0 ? void 0 : _a.split('-');
+            if (start) {
+                this.range.controls.start.setValue(new Date(start));
+            }
+            if (end) {
+                this.range.controls.end.setValue(new Date(end));
+            }
+        }
+    }
+    getRange(start, end) {
+        return `${start}-${end}`;
+    }
+}
+DatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DatepickerComponent, selector: "ui-datepicker", inputs: { label: "label", fieldName: "fieldName", placeholder: "placeholder", id: "id", value: "value", errors: "errors", isRange: "isRange", disabled: "disabled", required: "required", hintMessage: "hintMessage", updateOnBlur: "updateOnBlur" }, outputs: { changed: "changed" }, host: { properties: { "class": "this.class" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => DatepickerComponent),
+            multi: true,
+        },
+    ], usesOnChanges: true, ngImport: i0, template: "<mat-form-field #uiDatepicker appearance=\"outline\" [color]=\"errorsLength ? 'warn' : 'accent'\">\n  <mat-label *ngIf=\"label\">{{ label }}<span *ngIf=\"required\"> *</span></mat-label>\n  <ng-container *ngIf=\"!isRange\">\n    <input *ngIf=\"!isRange\" matInput\n      [matDatepicker]=\"picker\"\n      matInput\n      (blur)=\"onTouch()\"\n      (dateChange)=\"onValueChange($event.value)\"\n      [id]=\"id!\"\n      [placeholder]=\"placeholder!\"\n      [value]=\"value\"\n      [disabled]=\"disabled\"\n      [name]=\"fieldName!\"\n    />\n    <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n      <ui-icon matDatepickerToggleIcon name=\"Calendar\" size=\"24\" color=\"inherit\"></ui-icon>\n    </mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n  </ng-container>\n  <ng-container *ngIf=\"isRange\">\n    <mat-date-range-input *ngIf=\"isRange\" [formGroup]=\"range\" [rangePicker]=\"rangePicker\" >\n      <input matStartDate #dateRangeStart formControlName=\"start\" placeholder=\"Start date\" >\n      <input matEndDate  #dateRangeEnd formControlName=\"end\" placeholder=\"End date\" (dateChange)=\"dateRangeChange(dateRangeStart.value, dateRangeEnd.value)\">\n    </mat-date-range-input>\n    <mat-datepicker-toggle matIconSuffix [for]=\"rangePicker\">\n      <ui-icon matDatepickerToggleIcon name=\"Calendar\" size=\"24\" color=\"inherit\"></ui-icon>\n    </mat-datepicker-toggle>\n    <mat-date-range-picker #rangePicker></mat-date-range-picker>\n  </ng-container>\n  <mat-hint class=\"info\" *ngIf=\"hint && !_errors\">{{ hint }}</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-datepicker .mat-mdc-form-field{margin-top:0;min-width:296px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-datepicker .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-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;max-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-datepicker .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-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}.ui-datepicker .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-datepicker .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-datepicker .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-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-datepicker .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-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}.ui-datepicker .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-datepicker .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-datepicker .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.mat-datepicker-content .mat-mdc-button.mat-unthemed .mdc-button__label>span{font-weight:600}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#e9f0f1}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:#e9f0f1}\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: i2$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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.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: i6$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6$2.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i6$2.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i6$2.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i6$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-datepicker', encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DatepickerComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field #uiDatepicker appearance=\"outline\" [color]=\"errorsLength ? 'warn' : 'accent'\">\n  <mat-label *ngIf=\"label\">{{ label }}<span *ngIf=\"required\"> *</span></mat-label>\n  <ng-container *ngIf=\"!isRange\">\n    <input *ngIf=\"!isRange\" matInput\n      [matDatepicker]=\"picker\"\n      matInput\n      (blur)=\"onTouch()\"\n      (dateChange)=\"onValueChange($event.value)\"\n      [id]=\"id!\"\n      [placeholder]=\"placeholder!\"\n      [value]=\"value\"\n      [disabled]=\"disabled\"\n      [name]=\"fieldName!\"\n    />\n    <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n      <ui-icon matDatepickerToggleIcon name=\"Calendar\" size=\"24\" color=\"inherit\"></ui-icon>\n    </mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n  </ng-container>\n  <ng-container *ngIf=\"isRange\">\n    <mat-date-range-input *ngIf=\"isRange\" [formGroup]=\"range\" [rangePicker]=\"rangePicker\" >\n      <input matStartDate #dateRangeStart formControlName=\"start\" placeholder=\"Start date\" >\n      <input matEndDate  #dateRangeEnd formControlName=\"end\" placeholder=\"End date\" (dateChange)=\"dateRangeChange(dateRangeStart.value, dateRangeEnd.value)\">\n    </mat-date-range-input>\n    <mat-datepicker-toggle matIconSuffix [for]=\"rangePicker\">\n      <ui-icon matDatepickerToggleIcon name=\"Calendar\" size=\"24\" color=\"inherit\"></ui-icon>\n    </mat-datepicker-toggle>\n    <mat-date-range-picker #rangePicker></mat-date-range-picker>\n  </ng-container>\n  <mat-hint class=\"info\" *ngIf=\"hint && !_errors\">{{ hint }}</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-datepicker .mat-mdc-form-field{margin-top:0;min-width:296px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-datepicker .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-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;max-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-datepicker .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-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}.ui-datepicker .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-datepicker .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-datepicker .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-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-datepicker .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-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}.ui-datepicker .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-datepicker .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-datepicker .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.mat-datepicker-content .mat-mdc-button.mat-unthemed .mdc-button__label>span{font-weight:600}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#e9f0f1}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:#e9f0f1}\n"] }]
+        }], propDecorators: { class: [{
+                type: HostBinding
+            }], label: [{
+                type: Input
+            }], fieldName: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], errors: [{
+                type: Input
+            }], isRange: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], hintMessage: [{
+                type: Input
+            }], updateOnBlur: [{
+                type: Input
+            }], changed: [{
+                type: Output
+            }] } });
+
+class DatepickerComponentModule {
+}
+DatepickerComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DatepickerComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DatepickerComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: DatepickerComponentModule, declarations: [DatepickerComponent], imports: [CommonModule,
+        MatFormFieldModule,
+        MatInputModule,
+        IconComponentModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatDatepickerModule,
+        MatNativeDateModule], exports: [DatepickerComponent] });
+DatepickerComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DatepickerComponentModule, imports: [CommonModule,
+        MatFormFieldModule,
+        MatInputModule,
+        IconComponentModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatDatepickerModule,
+        MatNativeDateModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DatepickerComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DatepickerComponent],
+                    imports: [
+                        CommonModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        IconComponentModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatDatepickerModule,
+                        MatNativeDateModule,
+                    ],
+                    providers: [],
+                    exports: [DatepickerComponent],
+                }]
+        }] });
+
+class RatingComponent {
+    set length(length) {
+        this.items = Array(Math.max(length, this.MIN_LENGTH))
+            .fill(0)
+            .map((x, i) => i);
+    }
+    constructor() {
+        this.MIN_LENGTH = 0;
+        this.DEFAULT_LENGTH = 5;
+        this.items = [];
+        // todo support stars rating
+        this.theme = 'block';
+        this.barWidth = 35;
+        this.valueChange = new EventEmitter();
+        this.length = this.DEFAULT_LENGTH;
+    }
+    select(index) {
+        this.value = index + 1;
+        this.valueChange.emit(this.value);
+    }
+    onHover(index) {
+        this.hoverIndex = index + 1;
+    }
+}
+RatingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RatingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: RatingComponent, selector: "ui-rating", inputs: { value: "value", theme: "theme", barWidth: "barWidth", length: "length" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"rating\" (mouseleave)=\"onHover(-1)\">\n  <div class=\"rating-item\" *ngFor=\"let item of items\" (click)=\"select(item)\" (mouseenter)=\"onHover(item)\"\n    [ngClass]=\"{ 'rating-item-selected': item < value, 'rating-item-hover': item < hoverIndex }\" [ngStyle]=\"{'width.px': barWidth}\">\n  </div>\n</div>\n", styles: [".rating{display:flex;align-content:center;justify-content:flex-start;align-items:center}.rating-item{width:35px;height:16px;border:1px solid #E0E0E0;border-left:0;cursor:pointer}.rating-item-hover{border:0;background-color:#b5ddd5}.rating-item-hover:not(:first-child){border-left:1px solid #ffffff}.rating-item:first-child{border-radius:4px 0 0 4px}.rating-item:first-child:not(.rating-item-selected):not(.rating-item-hover){border-left:1px solid #E0E0E0}.rating-item:last-child{border-radius:0 4px 4px 0}.rating-item:first-child:last-child{border-radius:4px}.rating-item-selected{border:0;background-color:#46a997}.rating-item-selected:not(:first-child){border-left:1px solid #ffffff}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RatingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-rating', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rating\" (mouseleave)=\"onHover(-1)\">\n  <div class=\"rating-item\" *ngFor=\"let item of items\" (click)=\"select(item)\" (mouseenter)=\"onHover(item)\"\n    [ngClass]=\"{ 'rating-item-selected': item < value, 'rating-item-hover': item < hoverIndex }\" [ngStyle]=\"{'width.px': barWidth}\">\n  </div>\n</div>\n", styles: [".rating{display:flex;align-content:center;justify-content:flex-start;align-items:center}.rating-item{width:35px;height:16px;border:1px solid #E0E0E0;border-left:0;cursor:pointer}.rating-item-hover{border:0;background-color:#b5ddd5}.rating-item-hover:not(:first-child){border-left:1px solid #ffffff}.rating-item:first-child{border-radius:4px 0 0 4px}.rating-item:first-child:not(.rating-item-selected):not(.rating-item-hover){border-left:1px solid #E0E0E0}.rating-item:last-child{border-radius:0 4px 4px 0}.rating-item:first-child:last-child{border-radius:4px}.rating-item-selected{border:0;background-color:#46a997}.rating-item-selected:not(:first-child){border-left:1px solid #ffffff}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { value: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], barWidth: [{
+                type: Input
+            }], length: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class RatingComponentModule {
+}
+RatingComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RatingComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+RatingComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: RatingComponentModule, declarations: [RatingComponent], imports: [CommonModule], exports: [RatingComponent] });
+RatingComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RatingComponentModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RatingComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [RatingComponent],
+                    imports: [CommonModule],
+                    exports: [RatingComponent],
+                }]
+        }] });
+
 /* eslint-disable */
 /* Components */
 // Alert Banner
@@ -3566,5 +3842,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertBannerComponent, AlertBannerComponentModule, BannerActionComponent, BannerActionComponentModule, ButtonComponent, ButtonComponentModule, CardComponent, CardComponentModule, CheckboxComponent, CheckboxComponentModule, ColumnAlignmentEnum, ColumnTypeEnum, ConfirmDialogComponent, ConfirmDialogComponentModule, 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, SnackbarService, SpinnerComponent, SpinnerComponentModule, TableComponent, TableComponentModule, TagComponent, TagComponentModule, TooltipComponent, TooltipComponentModule, TooltipPositionType };
+export { AlertBannerComponent, AlertBannerComponentModule, BannerActionComponent, BannerActionComponentModule, ButtonComponent, ButtonComponentModule, CardComponent, CardComponentModule, CheckboxComponent, CheckboxComponentModule, ColumnAlignmentEnum, ColumnTypeEnum, ConfirmDialogComponent, ConfirmDialogComponentModule, CreateAccountComponent, CreateAccountComponentModule, CreatePasswordComponent, CreatePasswordComponentModule, DataPropertyGetterPipe, DatepickerComponent, DatepickerComponentModule, 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, RatingComponent, RatingComponentModule, SnackbarComponent, SnackbarComponentModule, SnackbarService, SpinnerComponent, SpinnerComponentModule, TableComponent, TableComponentModule, TagComponent, TagComponentModule, TooltipComponent, TooltipComponentModule, TooltipPositionType };
 //# sourceMappingURL=testgorilla-tgo-ui.mjs.map