npm - @testgorilla/tgo-ui - Versions diffs - 6.2.3 → 6.2.8 - Mend

@testgorilla/tgo-ui 6.2.3 → 6.2.8

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.

Files changed (165) hide show

package/fesm2022/testgorilla-tgo-ui-components-password-criteria.mjs CHANGED Viewed

@@ -42,7 +42,7 @@ class PasswordComponent {
             { translateKey: 'PASSWORD.SPECIAL_CHARACTER', key: 'hasSpecialChar' },
             { translateKey: 'PASSWORD.CHARACTERS', key: 'hasMinLength' },
         ];
-        this.onChange = (v) => { };
+        this.onChange = (_v) => { };
         this.onTouch = () => { };
         this.formControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             this.checkCriteria();
@@ -66,7 +66,7 @@ class PasswordComponent {
     countPassed() {
         let count = 0;
         for (const key in this.criteriaPassed) {
-            if (this.criteriaPassed.hasOwnProperty(key) && this.criteriaPassed[key]) {
+            if (Object.prototype.hasOwnProperty.call(this.criteriaPassed, key) && this.criteriaPassed[key]) {
                 count++;
             }
         }
@@ -91,7 +91,7 @@ class PasswordComponent {
                 useExisting: forwardRef(() => PasswordComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "requiredCriteria", first: true, predicate: ["requiredCriteria"], descendants: true }], ngImport: i0, template: "<div class=\"password-criteria-container\">\n\n  <ui-field [applicationTheme]=\"'dark'\"\n            [formControl]=\"formControl\"\n            [ariaLabel]=\"requiredCriteria?.nativeElement?.innerText ?? ''\"\n            [type]=\"'password'\"\n            [placeholder]=\"('PASSWORD.PASSWORD_PLACEHOLDER' | uiTranslate | async) + (required ? ' *' : '')\"\n            (keydown.enter)=\"showError = true\"\n            (focusout)=\"showError = true\"\n  ></ui-field>\n\n  <div class=\"criteria-container\" *ngIf=\"showCriteria\" #requiredCriteria>\n\n    <div class=\"progress\">\n      <ui-progress-bar [progress]=\"progressValue === 1 ? 0 : progressValue\" [applicationTheme]=\"'dark'\"></ui-progress-bar>\n    </div>\n\n    <span *ngIf=\"allRequirementsMet\" style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">{{ 'FIELD.ALL_PASSWORD_REQ_PASSED' | uiTranslate | async }}</span>\n\n    <div\n      *ngFor=\"let criterion of criteria\"\n      class=\"criterion\"\n      [attr.aria-live]=\"!allRequirementsMet ? 'polite' : ''\"\n      [ngClass]=\"{ 'passed': criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] && showError }\"\n    >\n      <ui-icon [size]=\"'24'\"\n               [color]=\"'rebrand-black'\"\n               [name]=\"!criteriaPassed[criterion.key] && showError ? 'Info-in-line' : 'Check-round-in-line'\"\n               applicationTheme=\"dark\"\n      ></ui-icon>\n      <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n      <span style=\"position: absolute; left: -9999px\">{{ (criteriaPassed[criterion.key] ? ('COMMON.PASSED') : ('COMMON.FAILED')) | uiTranslate | async }}</span>\n    </div>\n  </div>\n\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.password-criteria-container .criteria-container{margin-top:14px}.password-criteria-container .criteria-container .progress{margin-bottom:16px}.password-criteria-container .criteria-container .criterion{display:flex;flex-direction:row;align-items:center;gap:8px}.password-criteria-container .criteria-container .criterion ui-icon ::ng-deep svg{color:#e9e9e9}.password-criteria-container .criteria-container .criterion span{text-align:center;font-size:14px;line-height:23px;color:#242424}.password-criteria-container .criteria-container .criterion.passed ui-icon ::ng-deep svg{color:#242424}.password-criteria-container .criteria-container .criterion.passed span{color:#666;text-decoration:line-through}.password-criteria-container .criteria-container .criterion.error ui-icon ::ng-deep svg{color:#e02800}.password-criteria-container .criteria-container .criterion.error span{color:#e02800}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FieldComponent, selector: "ui-field", inputs: ["fullWidth", "fullHeight", "label", "labelHtml", "labelIcon", "fieldName", "placeholder", "id", "value", "badgeVariant", "errors", "disabled", "required", "readOnly", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "isAutocompleteOff", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "autosizableTextarea", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i5.ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "showPercentage"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "requiredCriteria", first: true, predicate: ["requiredCriteria"], descendants: true }], ngImport: i0, template: "<div class=\"password-criteria-container\">\n  <ui-field\n    [applicationTheme]=\"'dark'\"\n    [formControl]=\"formControl\"\n    [ariaLabel]=\"requiredCriteria?.nativeElement?.innerText ?? ''\"\n    [type]=\"'password'\"\n    [placeholder]=\"('PASSWORD.PASSWORD_PLACEHOLDER' | uiTranslate | async) + (required ? ' *' : '')\"\n    (keydown.enter)=\"showError = true\"\n    (focusout)=\"showError = true\"\n  ></ui-field>\n\n  <div class=\"criteria-container\" *ngIf=\"showCriteria\" #requiredCriteria>\n    <div class=\"progress\">\n      <ui-progress-bar\n        [progress]=\"progressValue === 1 ? 0 : progressValue\"\n        [applicationTheme]=\"'dark'\"\n      ></ui-progress-bar>\n    </div>\n\n    <span *ngIf=\"allRequirementsMet\" style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">{{\n      'FIELD.ALL_PASSWORD_REQ_PASSED' | uiTranslate | async\n    }}</span>\n\n    <div\n      *ngFor=\"let criterion of criteria\"\n      class=\"criterion\"\n      [attr.aria-live]=\"!allRequirementsMet ? 'polite' : ''\"\n      [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] && showError }\"\n    >\n      <ui-icon\n        [size]=\"'24'\"\n        [color]=\"'rebrand-black'\"\n        [name]=\"!criteriaPassed[criterion.key] && showError ? 'Info-in-line' : 'Check-round-in-line'\"\n        applicationTheme=\"dark\"\n      ></ui-icon>\n      <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n      <span style=\"position: absolute; left: -9999px\">{{\n        (criteriaPassed[criterion.key] ? 'COMMON.PASSED' : 'COMMON.FAILED') | uiTranslate | async\n      }}</span>\n    </div>\n  </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.password-criteria-container .criteria-container{margin-top:14px}.password-criteria-container .criteria-container .progress{margin-bottom:16px}.password-criteria-container .criteria-container .criterion{display:flex;flex-direction:row;align-items:center;gap:8px}.password-criteria-container .criteria-container .criterion ui-icon ::ng-deep svg{color:#e9e9e9}.password-criteria-container .criteria-container .criterion span{text-align:center;font-size:14px;line-height:23px;color:#242424}.password-criteria-container .criteria-container .criterion.passed ui-icon ::ng-deep svg{color:#242424}.password-criteria-container .criteria-container .criterion.passed span{color:#666;text-decoration:line-through}.password-criteria-container .criteria-container .criterion.error ui-icon ::ng-deep svg{color:#e02800}.password-criteria-container .criteria-container .criterion.error span{color:#e02800}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FieldComponent, selector: "ui-field", inputs: ["fullWidth", "fullHeight", "label", "labelHtml", "labelIcon", "fieldName", "placeholder", "id", "value", "badgeVariant", "errors", "disabled", "required", "readOnly", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "isAutocompleteOff", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "autosizableTextarea", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i5.ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "showPercentage"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: PasswordComponent, decorators: [{
             type: Component,
@@ -101,7 +101,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                             useExisting: forwardRef(() => PasswordComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"password-criteria-container\">\n\n  <ui-field [applicationTheme]=\"'dark'\"\n            [formControl]=\"formControl\"\n            [ariaLabel]=\"requiredCriteria?.nativeElement?.innerText ?? ''\"\n            [type]=\"'password'\"\n            [placeholder]=\"('PASSWORD.PASSWORD_PLACEHOLDER' | uiTranslate | async) + (required ? ' *' : '')\"\n            (keydown.enter)=\"showError = true\"\n            (focusout)=\"showError = true\"\n  ></ui-field>\n\n  <div class=\"criteria-container\" *ngIf=\"showCriteria\" #requiredCriteria>\n\n    <div class=\"progress\">\n      <ui-progress-bar [progress]=\"progressValue === 1 ? 0 : progressValue\" [applicationTheme]=\"'dark'\"></ui-progress-bar>\n    </div>\n\n    <span *ngIf=\"allRequirementsMet\" style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">{{ 'FIELD.ALL_PASSWORD_REQ_PASSED' | uiTranslate | async }}</span>\n\n    <div\n      *ngFor=\"let criterion of criteria\"\n      class=\"criterion\"\n      [attr.aria-live]=\"!allRequirementsMet ? 'polite' : ''\"\n      [ngClass]=\"{ 'passed': criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] && showError }\"\n    >\n      <ui-icon [size]=\"'24'\"\n               [color]=\"'rebrand-black'\"\n               [name]=\"!criteriaPassed[criterion.key] && showError ? 'Info-in-line' : 'Check-round-in-line'\"\n               applicationTheme=\"dark\"\n      ></ui-icon>\n      <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n      <span style=\"position: absolute; left: -9999px\">{{ (criteriaPassed[criterion.key] ? ('COMMON.PASSED') : ('COMMON.FAILED')) | uiTranslate | async }}</span>\n    </div>\n  </div>\n\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.password-criteria-container .criteria-container{margin-top:14px}.password-criteria-container .criteria-container .progress{margin-bottom:16px}.password-criteria-container .criteria-container .criterion{display:flex;flex-direction:row;align-items:center;gap:8px}.password-criteria-container .criteria-container .criterion ui-icon ::ng-deep svg{color:#e9e9e9}.password-criteria-container .criteria-container .criterion span{text-align:center;font-size:14px;line-height:23px;color:#242424}.password-criteria-container .criteria-container .criterion.passed ui-icon ::ng-deep svg{color:#242424}.password-criteria-container .criteria-container .criterion.passed span{color:#666;text-decoration:line-through}.password-criteria-container .criteria-container .criterion.error ui-icon ::ng-deep svg{color:#e02800}.password-criteria-container .criteria-container .criterion.error span{color:#e02800}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"password-criteria-container\">\n  <ui-field\n    [applicationTheme]=\"'dark'\"\n    [formControl]=\"formControl\"\n    [ariaLabel]=\"requiredCriteria?.nativeElement?.innerText ?? ''\"\n    [type]=\"'password'\"\n    [placeholder]=\"('PASSWORD.PASSWORD_PLACEHOLDER' | uiTranslate | async) + (required ? ' *' : '')\"\n    (keydown.enter)=\"showError = true\"\n    (focusout)=\"showError = true\"\n  ></ui-field>\n\n  <div class=\"criteria-container\" *ngIf=\"showCriteria\" #requiredCriteria>\n    <div class=\"progress\">\n      <ui-progress-bar\n        [progress]=\"progressValue === 1 ? 0 : progressValue\"\n        [applicationTheme]=\"'dark'\"\n      ></ui-progress-bar>\n    </div>\n\n    <span *ngIf=\"allRequirementsMet\" style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">{{\n      'FIELD.ALL_PASSWORD_REQ_PASSED' | uiTranslate | async\n    }}</span>\n\n    <div\n      *ngFor=\"let criterion of criteria\"\n      class=\"criterion\"\n      [attr.aria-live]=\"!allRequirementsMet ? 'polite' : ''\"\n      [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] && showError }\"\n    >\n      <ui-icon\n        [size]=\"'24'\"\n        [color]=\"'rebrand-black'\"\n        [name]=\"!criteriaPassed[criterion.key] && showError ? 'Info-in-line' : 'Check-round-in-line'\"\n        applicationTheme=\"dark\"\n      ></ui-icon>\n      <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n      <span style=\"position: absolute; left: -9999px\">{{\n        (criteriaPassed[criterion.key] ? 'COMMON.PASSED' : 'COMMON.FAILED') | uiTranslate | async\n      }}</span>\n    </div>\n  </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.password-criteria-container .criteria-container{margin-top:14px}.password-criteria-container .criteria-container .progress{margin-bottom:16px}.password-criteria-container .criteria-container .criterion{display:flex;flex-direction:row;align-items:center;gap:8px}.password-criteria-container .criteria-container .criterion ui-icon ::ng-deep svg{color:#e9e9e9}.password-criteria-container .criteria-container .criterion span{text-align:center;font-size:14px;line-height:23px;color:#242424}.password-criteria-container .criteria-container .criterion.passed ui-icon ::ng-deep svg{color:#242424}.password-criteria-container .criteria-container .criterion.passed span{color:#666;text-decoration:line-through}.password-criteria-container .criteria-container .criterion.error ui-icon ::ng-deep svg{color:#e02800}.password-criteria-container .criteria-container .criterion.error span{color:#e02800}\n"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { showCriteria: [{
                 type: Input
             }], required: [{

package/fesm2022/testgorilla-tgo-ui-components-password-criteria.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"testgorilla-tgo-ui-components-password-criteria.mjs","sources":["../../../components/password-criteria/password.component.ts","../../../components/password-criteria/password.component.html","../../../components/password-criteria/password.component.module.ts","../../../components/password-criteria/testgorilla-tgo-ui-components-password-criteria.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n ElementRef,\n EventEmitter,\n forwardRef,\n Input,\n Output,\n ViewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\n@Component({\n selector: 'ui-password-criteria',\n templateUrl: './password.component.html',\n styleUrls: ['./password.component.scss'],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => PasswordComponent),\n multi: true,\n },\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false\n})\nexport class PasswordComponent implements ControlValueAccessor {\n\n /*\n Show criteria for password. Defaults true\n \n @type {boolean}\n * @memberof PasswordComponent\n /\n @Input() showCriteria = true;\n\n /\n Password is required or not\n \n @type {boolean}\n * @memberof PasswordComponent\n /\n @Input() required = false;\n\n @Output() passwordChange = new EventEmitter<string>();\n\n @Output() allCriteriaPassed = new EventEmitter<boolean>();\n\n @ViewChild('requiredCriteria') requiredCriteria: ElementRef<HTMLElement>;\n\n protected formControl = new FormControl('', Validators.required);\n protected criteriaPassed: { [key: string]: boolean } = {};\n protected showError: boolean;\n protected progressValue: number;\n protected criteria: { translateKey: string; key: string }[] = [\n { translateKey: 'PASSWORD.LOWERCASE', key: 'hasLowercase' },\n { translateKey: 'PASSWORD.UPPERCASE', key: 'hasUppercase' },\n { translateKey: 'PASSWORD.NUMBER', key: 'hasNumber' },\n { translateKey: 'PASSWORD.SPECIAL_CHARACTER', key: 'hasSpecialChar' },\n { translateKey: 'PASSWORD.CHARACTERS', key: 'hasMinLength' },\n ];\n\n constructor(\n private readonly destroyRef: DestroyRef,\n ) {\n this.formControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {\n this.checkCriteria();\n });\n }\n\n checkCriteria(): void {\n const password = this.formControl.value ?? '';\n this.criteriaPassed = {\n hasLowercase: /^(?=.?[a-z])/.test(password),\n hasUppercase: /^(?=.?[A-Z])/.test(password),\n hasNumber: /^(?=.?[0-9])/.test(password),\n hasSpecialChar: /^(?=.?[\" !#$%&'()+,-./:;<=>?@[\\]^_`{\|}~])/.test(password),\n hasMinLength: password.length >= 12,\n };\n\n const passedCount = this.countPassed();\n this.progressValue = Math.min(Math.max(passedCount * (100 / Object.keys(this.criteriaPassed).length), 1), 100);\n this.passwordChange.emit(password);\n this.allCriteriaPassed.emit(passedCount === Object.keys(this.criteriaPassed).length);\n this.onChange(password);\n }\n\n countPassed(): number {\n let count = 0;\n for (const key in this.criteriaPassed) {\n if (this.criteriaPassed.hasOwnProperty(key) && this.criteriaPassed[key]) {\n count++;\n }\n }\n return count;\n }\n onChange = (v: any) => {};\n onTouch = () => {};\n\n writeValue(obj: any): void {\n this.formControl.setValue(obj);\n }\n\n registerOnChange(fn: any): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: any): void {\n this.onTouch = fn;\n }\n\n get allRequirementsMet(): boolean {\n return this.countPassed() === Object.keys(this.criteriaPassed).length && !!this.countPassed();\n }\n}\n","<div class=\"password-criteria-container\">\n\n <ui-field [applicationTheme]=\"'dark'\"\n [formControl]=\"formControl\"\n [ariaLabel]=\"requiredCriteria?.nativeElement?.innerText ?? ''\"\n [type]=\"'password'\"\n [placeholder]=\"('PASSWORD.PASSWORD_PLACEHOLDER' \| uiTranslate \| async) + (required ? ' ' : '')\"\n (keydown.enter)=\"showError = true\"\n (focusout)=\"showError = true\"\n ></ui-field>\n\n <div class=\"criteria-container\" ngIf=\"showCriteria\" #requiredCriteria>\n\n <div class=\"progress\">\n <ui-progress-bar [progress]=\"progressValue === 1 ? 0 : progressValue\" [applicationTheme]=\"'dark'\"></ui-progress-bar>\n </div>\n\n <span ngIf=\"allRequirementsMet\" style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">{{ 'FIELD.ALL_PASSWORD_REQ_PASSED' \| uiTranslate \| async }}</span>\n\n <div\n ngFor=\"let criterion of criteria\"\n class=\"criterion\"\n [attr.aria-live]=\"!allRequirementsMet ? 'polite' : ''\"\n [ngClass]=\"{ 'passed': criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] && showError }\"\n >\n <ui-icon [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] && showError ? 'Info-in-line' : 'Check-round-in-line'\"\n applicationTheme=\"dark\"\n ></ui-icon>\n <span>{{ criterion.translateKey \| uiTranslate \| async }}</span>\n <span style=\"position: absolute; left: -9999px\">{{ (criteriaPassed[criterion.key] ? ('COMMON.PASSED') : ('COMMON.FAILED')) \| uiTranslate \| async }}</span>\n </div>\n </div>\n\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { PasswordComponent } from './password.component';\nimport { FieldComponentModule } from '@testgorilla/tgo-ui/components/field';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ProgressBarComponentModule } from '@testgorilla/tgo-ui/components/progress-bar';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\n\n@NgModule({\n declarations: [PasswordComponent],\n exports: [PasswordComponent],\n imports: [\n CommonModule,\n FieldComponentModule,\n ReactiveFormsModule,\n IconComponentModule,\n ProgressBarComponentModule,\n UiTranslatePipe,\n ],\n})\nexport class PasswordComponentModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"testgorilla-tgo-ui-components-password-criteria.mjs","sources":["../../../components/password-criteria/password.component.ts","../../../components/password-criteria/password.component.html","../../../components/password-criteria/password.component.module.ts","../../../components/password-criteria/testgorilla-tgo-ui-components-password-criteria.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n ElementRef,\n EventEmitter,\n forwardRef,\n Input,\n Output,\n ViewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\n@Component({\n selector: 'ui-password-criteria',\n templateUrl: './password.component.html',\n styleUrls: ['./password.component.scss'],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => PasswordComponent),\n multi: true,\n },\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false,\n})\nexport class PasswordComponent implements ControlValueAccessor {\n /*\n Show criteria for password. Defaults true\n \n @type {boolean}\n * @memberof PasswordComponent\n /\n @Input() showCriteria = true;\n\n /\n Password is required or not\n \n @type {boolean}\n * @memberof PasswordComponent\n /\n @Input() required = false;\n\n @Output() passwordChange = new EventEmitter<string>();\n\n @Output() allCriteriaPassed = new EventEmitter<boolean>();\n\n @ViewChild('requiredCriteria') requiredCriteria: ElementRef<HTMLElement>;\n\n protected formControl = new FormControl('', Validators.required);\n protected criteriaPassed: { [key: string]: boolean } = {};\n protected showError: boolean;\n protected progressValue: number;\n protected criteria: { translateKey: string; key: string }[] = [\n { translateKey: 'PASSWORD.LOWERCASE', key: 'hasLowercase' },\n { translateKey: 'PASSWORD.UPPERCASE', key: 'hasUppercase' },\n { translateKey: 'PASSWORD.NUMBER', key: 'hasNumber' },\n { translateKey: 'PASSWORD.SPECIAL_CHARACTER', key: 'hasSpecialChar' },\n { translateKey: 'PASSWORD.CHARACTERS', key: 'hasMinLength' },\n ];\n\n constructor(private readonly destroyRef: DestroyRef) {\n this.formControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {\n this.checkCriteria();\n });\n }\n\n checkCriteria(): void {\n const password = this.formControl.value ?? '';\n this.criteriaPassed = {\n hasLowercase: /^(?=.?[a-z])/.test(password),\n hasUppercase: /^(?=.?[A-Z])/.test(password),\n hasNumber: /^(?=.?[0-9])/.test(password),\n hasSpecialChar: /^(?=.?[\" !#$%&'()+,-./:;<=>?@[\\]^_`{\|}~])/.test(password),\n hasMinLength: password.length >= 12,\n };\n\n const passedCount = this.countPassed();\n this.progressValue = Math.min(Math.max(passedCount * (100 / Object.keys(this.criteriaPassed).length), 1), 100);\n this.passwordChange.emit(password);\n this.allCriteriaPassed.emit(passedCount === Object.keys(this.criteriaPassed).length);\n this.onChange(password);\n }\n\n countPassed(): number {\n let count = 0;\n for (const key in this.criteriaPassed) {\n if (Object.prototype.hasOwnProperty.call(this.criteriaPassed, key) && this.criteriaPassed[key]) {\n count++;\n }\n }\n return count;\n }\n onChange = (_v: any) => {};\n onTouch = () => {};\n\n writeValue(obj: any): void {\n this.formControl.setValue(obj);\n }\n\n registerOnChange(fn: any): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: any): void {\n this.onTouch = fn;\n }\n\n get allRequirementsMet(): boolean {\n return this.countPassed() === Object.keys(this.criteriaPassed).length && !!this.countPassed();\n }\n}\n","<div class=\"password-criteria-container\">\n <ui-field\n [applicationTheme]=\"'dark'\"\n [formControl]=\"formControl\"\n [ariaLabel]=\"requiredCriteria?.nativeElement?.innerText ?? ''\"\n [type]=\"'password'\"\n [placeholder]=\"('PASSWORD.PASSWORD_PLACEHOLDER' \| uiTranslate \| async) + (required ? ' ' : '')\"\n (keydown.enter)=\"showError = true\"\n (focusout)=\"showError = true\"\n ></ui-field>\n\n <div class=\"criteria-container\" ngIf=\"showCriteria\" #requiredCriteria>\n <div class=\"progress\">\n <ui-progress-bar\n [progress]=\"progressValue === 1 ? 0 : progressValue\"\n [applicationTheme]=\"'dark'\"\n ></ui-progress-bar>\n </div>\n\n <span ngIf=\"allRequirementsMet\" style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">{{\n 'FIELD.ALL_PASSWORD_REQ_PASSED' \| uiTranslate \| async\n }}</span>\n\n <div\n ngFor=\"let criterion of criteria\"\n class=\"criterion\"\n [attr.aria-live]=\"!allRequirementsMet ? 'polite' : ''\"\n [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] && showError }\"\n >\n <ui-icon\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] && showError ? 'Info-in-line' : 'Check-round-in-line'\"\n applicationTheme=\"dark\"\n ></ui-icon>\n <span>{{ criterion.translateKey \| uiTranslate \| async }}</span>\n <span style=\"position: absolute; left: -9999px\">{{\n (criteriaPassed[criterion.key] ? 'COMMON.PASSED' : 'COMMON.FAILED') \| uiTranslate \| async\n }}</span>\n </div>\n </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { PasswordComponent } from './password.component';\nimport { FieldComponentModule } from '@testgorilla/tgo-ui/components/field';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ProgressBarComponentModule } from '@testgorilla/tgo-ui/components/progress-bar';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\n\n@NgModule({\n declarations: [PasswordComponent],\n exports: [PasswordComponent],\n imports: [\n CommonModule,\n FieldComponentModule,\n ReactiveFormsModule,\n IconComponentModule,\n ProgressBarComponentModule,\n UiTranslatePipe,\n ],\n})\nexport class PasswordComponentModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/testgorilla-tgo-ui-components-password-strength.mjs CHANGED Viewed

@@ -65,7 +65,7 @@ class PasswordStrengthComponent {
     countPassed() {
         let count = 0;
         for (const key in this.criteriaPassed) {
-            if (this.criteriaPassed.hasOwnProperty(key) && this.criteriaPassed[key]) {
+            if (Object.prototype.hasOwnProperty.call(this.criteriaPassed, key) && this.criteriaPassed[key]) {
                 count++;
             }
         }
@@ -78,11 +78,11 @@ class PasswordStrengthComponent {
         return this.applicationTheme === 'classic' ? 'Round-check' : 'Check-round-in-line';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: PasswordStrengthComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: PasswordStrengthComponent, isStandalone: false, selector: "ui-password-strength", inputs: { applicationTheme: "applicationTheme", password: "password" }, outputs: { validationCheck: "validationCheck" }, ngImport: i0, template: "<div class=\"criteria-container\">\n\n  <div class=\"progress\">\n    <ui-progress-bar [progress]=\"progressValue === 1 ? 0 : progressValue\" [applicationTheme]=\"applicationTheme\"></ui-progress-bar>\n  </div>\n\n  <div\n    *ngFor=\"let criterion of criteria\"\n    class=\"criterion\"\n    [ngClass]=\"{ 'passed': criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] }\"\n  >\n    <ui-icon [size]=\"'24'\"\n             [color]=\"'rebrand-black'\"\n             [name]=\"!criteriaPassed[criterion.key] ? infoIcon : checkIcon\"\n             [applicationTheme]=\"applicationTheme\"\n    ></ui-icon>\n    <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n  </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.criteria-container{margin-top:14px}.criteria-container .progress{margin-bottom:16px}.criteria-container .criterion{display:flex;flex-direction:row;align-items:center;gap:8px}.criteria-container .criterion ui-icon ::ng-deep svg{color:#e9e9e9}.criteria-container .criterion span{text-align:center;font-size:14px;line-height:23px;color:#242424}.criteria-container .criterion.passed ui-icon ::ng-deep svg{color:#242424}.criteria-container .criterion.passed span{color:#666;text-decoration:line-through}.criteria-container .criterion.error ui-icon ::ng-deep svg{color:#e02800}.criteria-container .criterion.error span{color:#e02800}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i3.ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "showPercentage"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.UiTranslatePipe, name: "uiTranslate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: PasswordStrengthComponent, isStandalone: false, selector: "ui-password-strength", inputs: { applicationTheme: "applicationTheme", password: "password" }, outputs: { validationCheck: "validationCheck" }, ngImport: i0, template: "<div class=\"criteria-container\">\n  <div class=\"progress\">\n    <ui-progress-bar\n      [progress]=\"progressValue === 1 ? 0 : progressValue\"\n      [applicationTheme]=\"applicationTheme\"\n    ></ui-progress-bar>\n  </div>\n\n  <div\n    *ngFor=\"let criterion of criteria\"\n    class=\"criterion\"\n    [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] }\"\n  >\n    <ui-icon\n      [size]=\"'24'\"\n      [color]=\"'rebrand-black'\"\n      [name]=\"!criteriaPassed[criterion.key] ? infoIcon : checkIcon\"\n      [applicationTheme]=\"applicationTheme\"\n    ></ui-icon>\n    <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n  </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.criteria-container{margin-top:14px}.criteria-container .progress{margin-bottom:16px}.criteria-container .criterion{display:flex;flex-direction:row;align-items:center;gap:8px}.criteria-container .criterion ui-icon ::ng-deep svg{color:#e9e9e9}.criteria-container .criterion span{text-align:center;font-size:14px;line-height:23px;color:#242424}.criteria-container .criterion.passed ui-icon ::ng-deep svg{color:#242424}.criteria-container .criterion.passed span{color:#666;text-decoration:line-through}.criteria-container .criterion.error ui-icon ::ng-deep svg{color:#e02800}.criteria-container .criterion.error span{color:#e02800}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i3.ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "showPercentage"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.UiTranslatePipe, name: "uiTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: PasswordStrengthComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-password-strength', standalone: false, template: "<div class=\"criteria-container\">\n\n  <div class=\"progress\">\n    <ui-progress-bar [progress]=\"progressValue === 1 ? 0 : progressValue\" [applicationTheme]=\"applicationTheme\"></ui-progress-bar>\n  </div>\n\n  <div\n    *ngFor=\"let criterion of criteria\"\n    class=\"criterion\"\n    [ngClass]=\"{ 'passed': criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] }\"\n  >\n    <ui-icon [size]=\"'24'\"\n             [color]=\"'rebrand-black'\"\n             [name]=\"!criteriaPassed[criterion.key] ? infoIcon : checkIcon\"\n             [applicationTheme]=\"applicationTheme\"\n    ></ui-icon>\n    <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n  </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.criteria-container{margin-top:14px}.criteria-container .progress{margin-bottom:16px}.criteria-container .criterion{display:flex;flex-direction:row;align-items:center;gap:8px}.criteria-container .criterion ui-icon ::ng-deep svg{color:#e9e9e9}.criteria-container .criterion span{text-align:center;font-size:14px;line-height:23px;color:#242424}.criteria-container .criterion.passed ui-icon ::ng-deep svg{color:#242424}.criteria-container .criterion.passed span{color:#666;text-decoration:line-through}.criteria-container .criterion.error ui-icon ::ng-deep svg{color:#e02800}.criteria-container .criterion.error span{color:#e02800}\n"] }]
+            args: [{ selector: 'ui-password-strength', standalone: false, template: "<div class=\"criteria-container\">\n  <div class=\"progress\">\n    <ui-progress-bar\n      [progress]=\"progressValue === 1 ? 0 : progressValue\"\n      [applicationTheme]=\"applicationTheme\"\n    ></ui-progress-bar>\n  </div>\n\n  <div\n    *ngFor=\"let criterion of criteria\"\n    class=\"criterion\"\n    [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] }\"\n  >\n    <ui-icon\n      [size]=\"'24'\"\n      [color]=\"'rebrand-black'\"\n      [name]=\"!criteriaPassed[criterion.key] ? infoIcon : checkIcon\"\n      [applicationTheme]=\"applicationTheme\"\n    ></ui-icon>\n    <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n  </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.criteria-container{margin-top:14px}.criteria-container .progress{margin-bottom:16px}.criteria-container .criterion{display:flex;flex-direction:row;align-items:center;gap:8px}.criteria-container .criterion ui-icon ::ng-deep svg{color:#e9e9e9}.criteria-container .criterion span{text-align:center;font-size:14px;line-height:23px;color:#242424}.criteria-container .criterion.passed ui-icon ::ng-deep svg{color:#242424}.criteria-container .criterion.passed span{color:#666;text-decoration:line-through}.criteria-container .criterion.error ui-icon ::ng-deep svg{color:#e02800}.criteria-container .criterion.error span{color:#e02800}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {

package/fesm2022/testgorilla-tgo-ui-components-password-strength.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"testgorilla-tgo-ui-components-password-strength.mjs","sources":["../../../components/password-strength/password-strength.component.ts","../../../components/password-strength/password-strength.component.html","../../../components/password-strength/password-strength.component.module.ts","../../../components/password-strength/testgorilla-tgo-ui-components-password-strength.ts"],"sourcesContent":["import { Component, EventEmitter, Inject, Input, Optional, Output } from '@angular/core';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconName } from '@testgorilla/tgo-ui/components/icon';\n\n@Component({\n selector: 'ui-password-strength',\n templateUrl: './password-strength.component.html',\n styleUrls: ['./password-strength.component.scss'],\n standalone: false\n})\nexport class PasswordStrengthComponent {\n /*\n \n * Defines the application theme\n \n @type {ApplicationTheme}\n * @memberof PasswordStrengthComponent\n /\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /\n The password that needs to be checked\n * @property password\n * @type {string}\n * @memberof PasswordStrengthComponent\n /\n @Input() set password(value: string) {\n this._password = value;\n this.checkCriteria(this._password);\n }\n\n /\n Event that outputs validation check result\n * @property validationCheck\n * @type {boolean}\n * @memberof PasswordStrengthComponent\n /\n @Output() validationCheck = new EventEmitter<boolean>();\n\n protected progressValue: number;\n protected criteriaPassed: { [key: string]: boolean } = {};\n private _password = '';\n protected criteria: { translateKey: string; key: string }[] = [\n { translateKey: 'PASSWORD.LOWERCASE', key: 'hasLowercase' },\n { translateKey: 'PASSWORD.UPPERCASE', key: 'hasUppercase' },\n { translateKey: 'PASSWORD.NUMBER', key: 'hasNumber' },\n { translateKey: 'PASSWORD.SPECIAL_CHARACTER', key: 'hasSpecialChar' },\n { translateKey: 'PASSWORD.CHARACTERS', key: 'hasMinLength' },\n ];\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,\n ) {\n if (this.defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n }\n\n checkCriteria(password: string): void {\n this.criteriaPassed = {\n hasLowercase: /^(?=.?[a-z])/.test(password),\n hasUppercase: /^(?=.?[A-Z])/.test(password),\n hasNumber: /^(?=.?[0-9])/.test(password),\n hasSpecialChar: /^(?=.?[\" !#$%&'()+,-./:;<=>?@[\\]^_`{\|}~])/.test(password),\n hasMinLength: password.length >= 12,\n };\n\n const passedCount = this.countPassed();\n this.progressValue = Math.min(Math.max(passedCount * (100 / Object.keys(this.criteriaPassed).length), 1), 100);\n this.validationCheck.emit(passedCount === Object.keys(this.criteriaPassed).length);\n }\n\n private countPassed(): number {\n let count = 0;\n for (const key in this.criteriaPassed) {\n if (~~this~~.~~criteriaPassed~~.hasOwnProperty(key) && this.criteriaPassed[key]) {\n count++;\n }\n }\n return count;\n }\n\n get infoIcon(): IconName {\n return this.applicationTheme === 'classic' ? 'Info' : 'Info-in-line';\n }\n\n get checkIcon(): IconName {\n return this.applicationTheme === 'classic' ? 'Round-check' : 'Check-round-in-line';\n }\n}\n","<div class=\"criteria-container\">\n\n <div class=\"progress\">\n <ui-progress-bar [progress]=\"progressValue === 1 ? 0 : progressValue\" [applicationTheme]=\"applicationTheme\"></ui-progress-bar>\n </div>\n\n <div\n ngFor=\"let criterion of criteria\"\n class=\"criterion\"\n [ngClass]=\"{ 'passed': criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] }\"\n >\n <ui-icon [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] ? infoIcon : checkIcon\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n <span>{{ criterion.translateKey \| uiTranslate \| async }}</span>\n </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { PasswordStrengthComponent } from './password-strength.component';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ProgressBarComponentModule } from '@testgorilla/tgo-ui/components/progress-bar';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\n\n@NgModule({\n declarations: [PasswordStrengthComponent],\n imports: [CommonModule, IconComponentModule, ProgressBarComponentModule, UiTranslatePipe],\n exports: [PasswordStrengthComponent],\n})\nexport class PasswordStrengthComponentModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;MAUa,yBAAyB,CAAA;AAUpC;;;;;AAKG;IACH,IAAa,QAAQ,CAAC,KAAa,EAAA;AACjC,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC;IACpC;AAqBA,IAAA,WAAA,CAC6E,eAAiC,EAAA;QAAjC,IAAA,CAAA,eAAe,GAAf,eAAe;AAxC5F;;;;;;AAMG;QACM,IAAA,CAAA,gBAAgB,GAAqB,OAAO;AAarD;;;;;AAKG;AACO,QAAA,IAAA,CAAA,eAAe,GAAG,IAAI,YAAY,EAAW;QAG7C,IAAA,CAAA,cAAc,GAA+B,EAAE;QACjD,IAAA,CAAA,SAAS,GAAG,EAAE;AACZ,QAAA,IAAA,CAAA,QAAQ,GAA4C;AAC5D,YAAA,EAAE,YAAY,EAAE,oBAAoB,EAAE,GAAG,EAAE,cAAc,EAAE;AAC3D,YAAA,EAAE,YAAY,EAAE,oBAAoB,EAAE,GAAG,EAAE,cAAc,EAAE;AAC3D,YAAA,EAAE,YAAY,EAAE,iBAAiB,EAAE,GAAG,EAAE,WAAW,EAAE;AACrD,YAAA,EAAE,YAAY,EAAE,4BAA4B,EAAE,GAAG,EAAE,gBAAgB,EAAE;AACrE,YAAA,EAAE,YAAY,EAAE,qBAAqB,EAAE,GAAG,EAAE,cAAc,EAAE;SAC7D;AAKC,QAAA,IAAI,IAAI,CAAC,eAAe,EAAE;AACxB,YAAA,IAAI,CAAC,gBAAgB,GAAG,eAAe;QACzC;IACF;AAEA,IAAA,aAAa,CAAC,QAAgB,EAAA;QAC5B,IAAI,CAAC,cAAc,GAAG;AACpB,YAAA,YAAY,EAAE,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC5C,YAAA,YAAY,EAAE,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC5C,YAAA,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC;AACzC,YAAA,cAAc,EAAE,6CAA6C,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC5E,YAAA,YAAY,EAAE,QAAQ,CAAC,MAAM,IAAI,EAAE;SACpC;AAED,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,EAAE;AACtC,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,WAAW,IAAI,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC;AAC9G,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,KAAK,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC;IACpF;IAEQ,WAAW,GAAA;QACjB,IAAI,KAAK,GAAG,CAAC;AACb,QAAA,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,cAAc,EAAE;~~AACrC~~,~~YAAA,~~IAAI,~~IAAI~~,CAAC,~~cAAc~~,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE;~~AACvE~~,gBAAA,KAAK,EAAE;YACT;QACF;AACA,QAAA,OAAO,KAAK;IACd;AAEA,IAAA,IAAI,QAAQ,GAAA;AACV,QAAA,OAAO,IAAI,CAAC,gBAAgB,KAAK,SAAS,GAAG,MAAM,GAAG,cAAc;IACtE;AAEA,IAAA,IAAI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,gBAAgB,KAAK,SAAS,GAAG,aAAa,GAAG,qBAAqB;IACpF;AA9EW,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,yBAAyB,kBAyCd,oCAAoC,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAzC/C,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,yBAAyB,0MCVtC,~~msBAmBA~~,EAAA,MAAA,EAAA,CAAA,2uFAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,OAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,iBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,cAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,gBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,OAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,IAAA,EAAA,aAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;~~4FDTa~~,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBANrC,SAAS;~~AACI~~,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,sBAAsB,cAGpB,KAAK,EAAA,QAAA,EAAA,~~msBAAA~~,EAAA,MAAA,EAAA,CAAA,2uFAAA,CAAA,EAAA;;~~0BA2ChB~~;;0BAAY,MAAM;2BAAC,oCAAoC;yCAjCjD,gBAAgB,EAAA,CAAA;sBAAxB;gBAQY,QAAQ,EAAA,CAAA;sBAApB;gBAWS,eAAe,EAAA,CAAA;sBAAxB;;;MEzBU,+BAA+B,CAAA;+GAA/B,+BAA+B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;gHAA/B,+BAA+B,EAAA,YAAA,EAAA,CAJ3B,yBAAyB,CAAA,EAAA,OAAA,EAAA,CAC9B,YAAY,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,eAAe,CAAA,EAAA,OAAA,EAAA,CAC9E,yBAAyB,CAAA,EAAA,CAAA,CAAA;AAExB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,+BAA+B,EAAA,OAAA,EAAA,CAHhC,YAAY,EAAE,mBAAmB,EAAE,0BAA0B,CAAA,EAAA,CAAA,CAAA;;4FAG5D,+BAA+B,EAAA,UAAA,EAAA,CAAA;kBAL3C,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,yBAAyB,CAAC;oBACzC,OAAO,EAAE,CAAC,YAAY,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,eAAe,CAAC;oBACzF,OAAO,EAAE,CAAC,yBAAyB,CAAC;AACrC,iBAAA;;;ACXD;;AAEG;;;;"}
1	+ {"version":3,"file":"testgorilla-tgo-ui-components-password-strength.mjs","sources":["../../../components/password-strength/password-strength.component.ts","../../../components/password-strength/password-strength.component.html","../../../components/password-strength/password-strength.component.module.ts","../../../components/password-strength/testgorilla-tgo-ui-components-password-strength.ts"],"sourcesContent":["import { Component, EventEmitter, Inject, Input, Optional, Output } from '@angular/core';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconName } from '@testgorilla/tgo-ui/components/icon';\n\n@Component({\n selector: 'ui-password-strength',\n templateUrl: './password-strength.component.html',\n styleUrls: ['./password-strength.component.scss'],\n standalone: false,\n})\nexport class PasswordStrengthComponent {\n /*\n \n * Defines the application theme\n \n @type {ApplicationTheme}\n * @memberof PasswordStrengthComponent\n /\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /\n The password that needs to be checked\n * @property password\n * @type {string}\n * @memberof PasswordStrengthComponent\n /\n @Input() set password(value: string) {\n this._password = value;\n this.checkCriteria(this._password);\n }\n\n /\n Event that outputs validation check result\n * @property validationCheck\n * @type {boolean}\n * @memberof PasswordStrengthComponent\n /\n @Output() validationCheck = new EventEmitter<boolean>();\n\n protected progressValue: number;\n protected criteriaPassed: { [key: string]: boolean } = {};\n private _password = '';\n protected criteria: { translateKey: string; key: string }[] = [\n { translateKey: 'PASSWORD.LOWERCASE', key: 'hasLowercase' },\n { translateKey: 'PASSWORD.UPPERCASE', key: 'hasUppercase' },\n { translateKey: 'PASSWORD.NUMBER', key: 'hasNumber' },\n { translateKey: 'PASSWORD.SPECIAL_CHARACTER', key: 'hasSpecialChar' },\n { translateKey: 'PASSWORD.CHARACTERS', key: 'hasMinLength' },\n ];\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {\n if (this.defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n }\n\n checkCriteria(password: string): void {\n this.criteriaPassed = {\n hasLowercase: /^(?=.?[a-z])/.test(password),\n hasUppercase: /^(?=.?[A-Z])/.test(password),\n hasNumber: /^(?=.?[0-9])/.test(password),\n hasSpecialChar: /^(?=.?[\" !#$%&'()+,-./:;<=>?@[\\]^_`{\|}~])/.test(password),\n hasMinLength: password.length >= 12,\n };\n\n const passedCount = this.countPassed();\n this.progressValue = Math.min(Math.max(passedCount * (100 / Object.keys(this.criteriaPassed).length), 1), 100);\n this.validationCheck.emit(passedCount === Object.keys(this.criteriaPassed).length);\n }\n\n private countPassed(): number {\n let count = 0;\n for (const key in this.criteriaPassed) {\n if (Object.prototype.hasOwnProperty.call(this.criteriaPassed, key) && this.criteriaPassed[key]) {\n count++;\n }\n }\n return count;\n }\n\n get infoIcon(): IconName {\n return this.applicationTheme === 'classic' ? 'Info' : 'Info-in-line';\n }\n\n get checkIcon(): IconName {\n return this.applicationTheme === 'classic' ? 'Round-check' : 'Check-round-in-line';\n }\n}\n","<div class=\"criteria-container\">\n <div class=\"progress\">\n <ui-progress-bar\n [progress]=\"progressValue === 1 ? 0 : progressValue\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-progress-bar>\n </div>\n\n <div\n ngFor=\"let criterion of criteria\"\n class=\"criterion\"\n [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] }\"\n >\n <ui-icon\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] ? infoIcon : checkIcon\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n <span>{{ criterion.translateKey \| uiTranslate \| async }}</span>\n </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { PasswordStrengthComponent } from './password-strength.component';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ProgressBarComponentModule } from '@testgorilla/tgo-ui/components/progress-bar';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\n\n@NgModule({\n declarations: [PasswordStrengthComponent],\n imports: [CommonModule, IconComponentModule, ProgressBarComponentModule, UiTranslatePipe],\n exports: [PasswordStrengthComponent],\n})\nexport class PasswordStrengthComponentModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/testgorilla-tgo-ui-components-phone-input.mjs CHANGED Viewed

@@ -37,7 +37,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
             type: Pipe,
             args: [{
                     name: 'joinStrings',
-                    standalone: false
+                    standalone: false,
                 }]
         }] });
@@ -56,7 +56,7 @@ class PhoneInputComponent {
             this.selectedCountry = this.getCountryByAlpha2Code(parsed.country) || this.selectedCountry;
             this.form.patchValue({ phone_number: formatted.replace(this.selectedCountry.callingCode, '') });
         }
-        catch (err) {
+        catch {
             if (value?.length <= 4) {
                 this.selectedCountry = this.getCountryByCallingCode(value) || this.selectedCountry;
             }
@@ -186,7 +186,7 @@ class PhoneInputComponent {
         this.subscribeToFocusEvents();
     }
     setErrorsLength() {
-        if (!!this._errors) {
+        if (this._errors) {
             return this._errors.filter(err => !!err).length > 0;
         }
         return false;
@@ -263,7 +263,7 @@ class PhoneInputComponent {
             this.countries$.pipe(filter(countries => countries.length > 0), first()),
             this.countryCode,
         ])
-            .pipe(map(([countries, selectedCountry]) => {
+            .pipe(map(([_countries, selectedCountry]) => {
             if (!this.initialValue) {
                 const country = this.getCountryByAlpha2Code(selectedCountry) || this.getCountryByAlpha2Code(this.DEFAULT_COUNTRY_CODE);
                 this.setCountry(country);
@@ -310,7 +310,7 @@ class PhoneInputComponent {
                 provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
                 useValue: { overlayPanelClass: 'phone-number-autocomplete' },
             },
-        ], viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true, read: ElementRef, static: true }, { propertyName: "select", first: true, predicate: MatSelect, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<mat-form-field\n  [formGroup]=\"form\"\n  appearance=\"outline\"\n  [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n  [ngClass]=\"{ disabled: form.disabled || disabled, 'full-width': fullWidth }\"\n>\n  <mat-label>{{ 'COMMON.PHONE_NUMBER' | uiTranslate | async }} <span *ngIf=\"required\">*</span></mat-label>\n\n  <div matPrefix class=\"country\">\n    <button class=\"selected-flag\" matPrefix *ngIf=\"selectedCountry\">\n      <img [height]=\"20\" [width]=\"24\" [attr.src]=\"countryFlagSrc + selectedCountry?.alpha2Code?.toLowerCase() + '.svg'\"\n           [alt]=\"'Country flag ' + selectedCountry?.alpha2Code?.toLowerCase()\">\n    </button>\n    <mat-select\n      #select\n      (selectionChange)=\"onOptionsSelected($event.value)\"\n      [value]=\"selectedCountry\"\n      [disableOptionCentering]=\"true\"\n      [panelClass]=\"'phone-number-select' + ' ' + applicationTheme\"\n      [ngClass]=\"{ opened: select.panelOpen }\"\n    >\n      <mat-select-trigger>{{ selectedCountry?.callingCode }}</mat-select-trigger>\n      <mat-option>\n        <ngx-mat-select-search\n          [formControl]=\"selectFilterCtrl\"\n          ngDefaultControl\n          placeholderLabel=\"\"\n          noEntriesFoundLabel=\"\"\n        >\n          <ui-icon ngxMatSelectSearchClear size=\"24\" [name]=\"'Close-in-line'\"></ui-icon>\n        </ngx-mat-select-search>\n      </mat-option>\n        <mat-option *ngFor=\"let country of countries$ | async; trackBy: filteredCountryTrackByMethod\" [value]=\"country\">\n          <div class=\"country-option\">\n            <img [height]=\"20\" [width]=\"24\" [attr.src]=\"countryFlagSrc + country?.alpha2Code?.toLowerCase()! + '.svg'\"\n                 [alt]=\"'Country flag ' + country?.alpha2Code?.toLowerCase()!\">\n            <small>{{ $any([country?.name, '(' + country?.callingCode + ')']) | joinStrings : ' ' }}</small>\n          </div>\n        </mat-option>\n    </mat-select>\n  </div>\n\n  <input\n    (input)=\"onInput(form.get('phone_number')!.value)\"\n    formControlName=\"phone_number\"\n    (click)=\"disableClick($event)\"\n    [ngStyle]=\"{ opacity: disabled ? 0.5 : 1 }\"\n    [required]=\"required\"\n    matInput\n    type=\"text\"\n  />\n\n  <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n    <ng-container *ngIf=\"errorsLength\">\n      <div class=\"errors\" *ngFor=\"let error of _errors; trackBy: trackByFn\">\n        <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n        <span [innerHTML]=\"error\"></span>\n      </div>\n    </ng-container>\n\n    <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : ('COMMON.PHONE_NUMBER' | uiTranslate | async)\"></ui-validation-error>\n\n  </mat-hint>\n</mat-form-field>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;align-items:center}:host .selected-flag{display:flex;position:relative;margin-right:1rem;align-items:center}:host mat-spinner{padding:0 20px}:host .country{cursor:pointer!important;display:flex;align-items:center;margin:-8px 12px 0 16px}:host .country button{margin:0 8px 0 0;background:transparent;border:unset;padding:0}:host ::ng-deep .mat-mdc-select-trigger{display:flex;gap:8px}:host mat-select{flex:0}:host .mat-mdc-form-field{min-width:320px}:host .mat-mdc-form-field.full-width{width:100%}:host .mat-mdc-form-field.disabled ::ng-deep *{border-color:#d3d3d3;color:#d3d3d3;pointer-events:none}:host .mat-mdc-form-field.disabled ::ng-deep * .mat-mdc-select-arrow{opacity:.1}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 17.025L6 11.025L7.4 9.625L12 14.225L16.6 9.625L18 11.025L12 17.025Z' fill='%23333333'/%3E%3C/svg%3E\");background-size:cover;width:16px;height:16px}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow svg,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow svg{display:none}:host[theme=dark] mat-select.opened ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select.opened ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 9.6249L18 15.6249L16.6 17.0249L12 12.4249L7.4 17.0249L6 15.6249L12 9.6249Z' fill='%23333333'/%3E%3C/svg%3E\");background-size:cover;width:16px;height:16px}::ng-deep .mat-form-field-appearance-outline mat-select .mat-select-arrow-wrapper{transform:none}::ng-deep .mat-select-panel.phone-number-select{margin-top:36px;margin-left:45px}::ng-deep .mat-select-search-inner{box-shadow:none!important;height:48px;background-color:#fff!important;border-bottom:none!important}::ng-deep .mat-select-search-inner .mat-select-search-inner-row{width:100%}::ng-deep .mat-select-search-inner button.mat-select-search-clear{right:35px}::ng-deep .mat-select-search-inner button.mat-select-search-clear mat-icon{font-size:20px}@media screen and (min-width: 599px){::ng-deep .mat-select-panel.phone-number-select{margin-left:-33px;min-width:510px}::ng-deep .mat-select-search-inner{min-width:calc(100% + 33px)!important}}ngx-mat-select-search ::ng-deep button .mat-mdc-button-persistent-ripple,ngx-mat-select-search ::ng-deep button .mat-ripple,ngx-mat-select-search ::ng-deep button .mat-mdc-button-ripple{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i5.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "directive", type: i7.MatSelectSearchClearDirective, selector: "[ngxMatSelectSearchClear]" }, { kind: "component", type: i8.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i9.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i10.HasValidationErrorPipe, name: "hasValidationError" }, { kind: "pipe", type: JoinStringsPipe, name: "joinStrings" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true, read: ElementRef, static: true }, { propertyName: "select", first: true, predicate: MatSelect, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<mat-form-field\n  [formGroup]=\"form\"\n  appearance=\"outline\"\n  [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n  [ngClass]=\"{ disabled: form.disabled || disabled, 'full-width': fullWidth }\"\n>\n  <mat-label>{{ 'COMMON.PHONE_NUMBER' | uiTranslate | async }} <span *ngIf=\"required\">*</span></mat-label>\n\n  <div matPrefix class=\"country\">\n    <button class=\"selected-flag\" matPrefix *ngIf=\"selectedCountry\">\n      <img\n        [height]=\"20\"\n        [width]=\"24\"\n        [attr.src]=\"countryFlagSrc + selectedCountry?.alpha2Code?.toLowerCase() + '.svg'\"\n        [alt]=\"'Country flag ' + selectedCountry?.alpha2Code?.toLowerCase()\"\n      />\n    </button>\n    <mat-select\n      #select\n      (selectionChange)=\"onOptionsSelected($event.value)\"\n      [value]=\"selectedCountry\"\n      [disableOptionCentering]=\"true\"\n      [panelClass]=\"'phone-number-select' + ' ' + applicationTheme\"\n      [ngClass]=\"{ opened: select.panelOpen }\"\n    >\n      <mat-select-trigger>{{ selectedCountry?.callingCode }}</mat-select-trigger>\n      <mat-option>\n        <ngx-mat-select-search\n          [formControl]=\"selectFilterCtrl\"\n          ngDefaultControl\n          placeholderLabel=\"\"\n          noEntriesFoundLabel=\"\"\n        >\n          <ui-icon ngxMatSelectSearchClear size=\"24\" [name]=\"'Close-in-line'\"></ui-icon>\n        </ngx-mat-select-search>\n      </mat-option>\n      <mat-option *ngFor=\"let country of countries$ | async; trackBy: filteredCountryTrackByMethod\" [value]=\"country\">\n        <div class=\"country-option\">\n          <img\n            [height]=\"20\"\n            [width]=\"24\"\n            [attr.src]=\"countryFlagSrc + country?.alpha2Code?.toLowerCase()! + '.svg'\"\n            [alt]=\"'Country flag ' + country?.alpha2Code?.toLowerCase()!\"\n          />\n          <small>{{ $any([country?.name, '(' + country?.callingCode + ')']) | joinStrings: ' ' }}</small>\n        </div>\n      </mat-option>\n    </mat-select>\n  </div>\n\n  <input\n    (input)=\"onInput(form.get('phone_number')!.value)\"\n    formControlName=\"phone_number\"\n    (click)=\"disableClick($event)\"\n    [ngStyle]=\"{ opacity: disabled ? 0.5 : 1 }\"\n    [required]=\"required\"\n    matInput\n    type=\"text\"\n  />\n\n  <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n    <ng-container *ngIf=\"errorsLength\">\n      <div class=\"errors\" *ngFor=\"let error of _errors; trackBy: trackByFn\">\n        <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n        <span [innerHTML]=\"error\"></span>\n      </div>\n    </ng-container>\n\n    <ui-validation-error\n      *ngIf=\"ngControl && !hideBuiltInErrors\"\n      [ngControl]=\"ngControl\"\n      [label]=\"hideLabelInErrors ? null : ('COMMON.PHONE_NUMBER' | uiTranslate | async)\"\n    ></ui-validation-error>\n  </mat-hint>\n</mat-form-field>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;align-items:center}:host .selected-flag{display:flex;position:relative;margin-right:1rem;align-items:center}:host mat-spinner{padding:0 20px}:host .country{cursor:pointer!important;display:flex;align-items:center;margin:-8px 12px 0 16px}:host .country button{margin:0 8px 0 0;background:transparent;border:unset;padding:0}:host ::ng-deep .mat-mdc-select-trigger{display:flex;gap:8px}:host mat-select{flex:0}:host .mat-mdc-form-field{min-width:320px}:host .mat-mdc-form-field.full-width{width:100%}:host .mat-mdc-form-field.disabled ::ng-deep *{border-color:#d3d3d3;color:#d3d3d3;pointer-events:none}:host .mat-mdc-form-field.disabled ::ng-deep * .mat-mdc-select-arrow{opacity:.1}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 17.025L6 11.025L7.4 9.625L12 14.225L16.6 9.625L18 11.025L12 17.025Z' fill='%23333333'/%3E%3C/svg%3E\");background-size:cover;width:16px;height:16px}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow svg,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow svg{display:none}:host[theme=dark] mat-select.opened ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select.opened ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 9.6249L18 15.6249L16.6 17.0249L12 12.4249L7.4 17.0249L6 15.6249L12 9.6249Z' fill='%23333333'/%3E%3C/svg%3E\");background-size:cover;width:16px;height:16px}::ng-deep .mat-form-field-appearance-outline mat-select .mat-select-arrow-wrapper{transform:none}::ng-deep .mat-select-panel.phone-number-select{margin-top:36px;margin-left:45px}::ng-deep .mat-select-search-inner{box-shadow:none!important;height:48px;background-color:#fff!important;border-bottom:none!important}::ng-deep .mat-select-search-inner .mat-select-search-inner-row{width:100%}::ng-deep .mat-select-search-inner button.mat-select-search-clear{right:35px}::ng-deep .mat-select-search-inner button.mat-select-search-clear mat-icon{font-size:20px}@media screen and (min-width: 599px){::ng-deep .mat-select-panel.phone-number-select{margin-left:-33px;min-width:510px}::ng-deep .mat-select-search-inner{min-width:calc(100% + 33px)!important}}ngx-mat-select-search ::ng-deep button .mat-mdc-button-persistent-ripple,ngx-mat-select-search ::ng-deep button .mat-ripple,ngx-mat-select-search ::ng-deep button .mat-mdc-button-ripple{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i5.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "directive", type: i7.MatSelectSearchClearDirective, selector: "[ngxMatSelectSearchClear]" }, { kind: "component", type: i8.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i9.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i10.HasValidationErrorPipe, name: "hasValidationError" }, { kind: "pipe", type: JoinStringsPipe, name: "joinStrings" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: PhoneInputComponent, decorators: [{
             type: Component,
@@ -319,7 +319,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                             provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
                             useValue: { overlayPanelClass: 'phone-number-autocomplete' },
                         },
-                    ], standalone: false, template: "<mat-form-field\n  [formGroup]=\"form\"\n  appearance=\"outline\"\n  [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n  [ngClass]=\"{ disabled: form.disabled || disabled, 'full-width': fullWidth }\"\n>\n  <mat-label>{{ 'COMMON.PHONE_NUMBER' | uiTranslate | async }} <span *ngIf=\"required\">*</span></mat-label>\n\n  <div matPrefix class=\"country\">\n    <button class=\"selected-flag\" matPrefix *ngIf=\"selectedCountry\">\n      <img [height]=\"20\" [width]=\"24\" [attr.src]=\"countryFlagSrc + selectedCountry?.alpha2Code?.toLowerCase() + '.svg'\"\n           [alt]=\"'Country flag ' + selectedCountry?.alpha2Code?.toLowerCase()\">\n    </button>\n    <mat-select\n      #select\n      (selectionChange)=\"onOptionsSelected($event.value)\"\n      [value]=\"selectedCountry\"\n      [disableOptionCentering]=\"true\"\n      [panelClass]=\"'phone-number-select' + ' ' + applicationTheme\"\n      [ngClass]=\"{ opened: select.panelOpen }\"\n    >\n      <mat-select-trigger>{{ selectedCountry?.callingCode }}</mat-select-trigger>\n      <mat-option>\n        <ngx-mat-select-search\n          [formControl]=\"selectFilterCtrl\"\n          ngDefaultControl\n          placeholderLabel=\"\"\n          noEntriesFoundLabel=\"\"\n        >\n          <ui-icon ngxMatSelectSearchClear size=\"24\" [name]=\"'Close-in-line'\"></ui-icon>\n        </ngx-mat-select-search>\n      </mat-option>\n        <mat-option *ngFor=\"let country of countries$ | async; trackBy: filteredCountryTrackByMethod\" [value]=\"country\">\n          <div class=\"country-option\">\n            <img [height]=\"20\" [width]=\"24\" [attr.src]=\"countryFlagSrc + country?.alpha2Code?.toLowerCase()! + '.svg'\"\n                 [alt]=\"'Country flag ' + country?.alpha2Code?.toLowerCase()!\">\n            <small>{{ $any([country?.name, '(' + country?.callingCode + ')']) | joinStrings : ' ' }}</small>\n          </div>\n        </mat-option>\n    </mat-select>\n  </div>\n\n  <input\n    (input)=\"onInput(form.get('phone_number')!.value)\"\n    formControlName=\"phone_number\"\n    (click)=\"disableClick($event)\"\n    [ngStyle]=\"{ opacity: disabled ? 0.5 : 1 }\"\n    [required]=\"required\"\n    matInput\n    type=\"text\"\n  />\n\n  <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n    <ng-container *ngIf=\"errorsLength\">\n      <div class=\"errors\" *ngFor=\"let error of _errors; trackBy: trackByFn\">\n        <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n        <span [innerHTML]=\"error\"></span>\n      </div>\n    </ng-container>\n\n    <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : ('COMMON.PHONE_NUMBER' | uiTranslate | async)\"></ui-validation-error>\n\n  </mat-hint>\n</mat-form-field>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;align-items:center}:host .selected-flag{display:flex;position:relative;margin-right:1rem;align-items:center}:host mat-spinner{padding:0 20px}:host .country{cursor:pointer!important;display:flex;align-items:center;margin:-8px 12px 0 16px}:host .country button{margin:0 8px 0 0;background:transparent;border:unset;padding:0}:host ::ng-deep .mat-mdc-select-trigger{display:flex;gap:8px}:host mat-select{flex:0}:host .mat-mdc-form-field{min-width:320px}:host .mat-mdc-form-field.full-width{width:100%}:host .mat-mdc-form-field.disabled ::ng-deep *{border-color:#d3d3d3;color:#d3d3d3;pointer-events:none}:host .mat-mdc-form-field.disabled ::ng-deep * .mat-mdc-select-arrow{opacity:.1}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 17.025L6 11.025L7.4 9.625L12 14.225L16.6 9.625L18 11.025L12 17.025Z' fill='%23333333'/%3E%3C/svg%3E\");background-size:cover;width:16px;height:16px}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow svg,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow svg{display:none}:host[theme=dark] mat-select.opened ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select.opened ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 9.6249L18 15.6249L16.6 17.0249L12 12.4249L7.4 17.0249L6 15.6249L12 9.6249Z' fill='%23333333'/%3E%3C/svg%3E\");background-size:cover;width:16px;height:16px}::ng-deep .mat-form-field-appearance-outline mat-select .mat-select-arrow-wrapper{transform:none}::ng-deep .mat-select-panel.phone-number-select{margin-top:36px;margin-left:45px}::ng-deep .mat-select-search-inner{box-shadow:none!important;height:48px;background-color:#fff!important;border-bottom:none!important}::ng-deep .mat-select-search-inner .mat-select-search-inner-row{width:100%}::ng-deep .mat-select-search-inner button.mat-select-search-clear{right:35px}::ng-deep .mat-select-search-inner button.mat-select-search-clear mat-icon{font-size:20px}@media screen and (min-width: 599px){::ng-deep .mat-select-panel.phone-number-select{margin-left:-33px;min-width:510px}::ng-deep .mat-select-search-inner{min-width:calc(100% + 33px)!important}}ngx-mat-select-search ::ng-deep button .mat-mdc-button-persistent-ripple,ngx-mat-select-search ::ng-deep button .mat-ripple,ngx-mat-select-search ::ng-deep button .mat-mdc-button-ripple{display:none}\n"] }]
+                    ], standalone: false, template: "<mat-form-field\n  [formGroup]=\"form\"\n  appearance=\"outline\"\n  [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n  [ngClass]=\"{ disabled: form.disabled || disabled, 'full-width': fullWidth }\"\n>\n  <mat-label>{{ 'COMMON.PHONE_NUMBER' | uiTranslate | async }} <span *ngIf=\"required\">*</span></mat-label>\n\n  <div matPrefix class=\"country\">\n    <button class=\"selected-flag\" matPrefix *ngIf=\"selectedCountry\">\n      <img\n        [height]=\"20\"\n        [width]=\"24\"\n        [attr.src]=\"countryFlagSrc + selectedCountry?.alpha2Code?.toLowerCase() + '.svg'\"\n        [alt]=\"'Country flag ' + selectedCountry?.alpha2Code?.toLowerCase()\"\n      />\n    </button>\n    <mat-select\n      #select\n      (selectionChange)=\"onOptionsSelected($event.value)\"\n      [value]=\"selectedCountry\"\n      [disableOptionCentering]=\"true\"\n      [panelClass]=\"'phone-number-select' + ' ' + applicationTheme\"\n      [ngClass]=\"{ opened: select.panelOpen }\"\n    >\n      <mat-select-trigger>{{ selectedCountry?.callingCode }}</mat-select-trigger>\n      <mat-option>\n        <ngx-mat-select-search\n          [formControl]=\"selectFilterCtrl\"\n          ngDefaultControl\n          placeholderLabel=\"\"\n          noEntriesFoundLabel=\"\"\n        >\n          <ui-icon ngxMatSelectSearchClear size=\"24\" [name]=\"'Close-in-line'\"></ui-icon>\n        </ngx-mat-select-search>\n      </mat-option>\n      <mat-option *ngFor=\"let country of countries$ | async; trackBy: filteredCountryTrackByMethod\" [value]=\"country\">\n        <div class=\"country-option\">\n          <img\n            [height]=\"20\"\n            [width]=\"24\"\n            [attr.src]=\"countryFlagSrc + country?.alpha2Code?.toLowerCase()! + '.svg'\"\n            [alt]=\"'Country flag ' + country?.alpha2Code?.toLowerCase()!\"\n          />\n          <small>{{ $any([country?.name, '(' + country?.callingCode + ')']) | joinStrings: ' ' }}</small>\n        </div>\n      </mat-option>\n    </mat-select>\n  </div>\n\n  <input\n    (input)=\"onInput(form.get('phone_number')!.value)\"\n    formControlName=\"phone_number\"\n    (click)=\"disableClick($event)\"\n    [ngStyle]=\"{ opacity: disabled ? 0.5 : 1 }\"\n    [required]=\"required\"\n    matInput\n    type=\"text\"\n  />\n\n  <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n    <ng-container *ngIf=\"errorsLength\">\n      <div class=\"errors\" *ngFor=\"let error of _errors; trackBy: trackByFn\">\n        <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n        <span [innerHTML]=\"error\"></span>\n      </div>\n    </ng-container>\n\n    <ui-validation-error\n      *ngIf=\"ngControl && !hideBuiltInErrors\"\n      [ngControl]=\"ngControl\"\n      [label]=\"hideLabelInErrors ? null : ('COMMON.PHONE_NUMBER' | uiTranslate | async)\"\n    ></ui-validation-error>\n  </mat-hint>\n</mat-form-field>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;align-items:center}:host .selected-flag{display:flex;position:relative;margin-right:1rem;align-items:center}:host mat-spinner{padding:0 20px}:host .country{cursor:pointer!important;display:flex;align-items:center;margin:-8px 12px 0 16px}:host .country button{margin:0 8px 0 0;background:transparent;border:unset;padding:0}:host ::ng-deep .mat-mdc-select-trigger{display:flex;gap:8px}:host mat-select{flex:0}:host .mat-mdc-form-field{min-width:320px}:host .mat-mdc-form-field.full-width{width:100%}:host .mat-mdc-form-field.disabled ::ng-deep *{border-color:#d3d3d3;color:#d3d3d3;pointer-events:none}:host .mat-mdc-form-field.disabled ::ng-deep * .mat-mdc-select-arrow{opacity:.1}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 17.025L6 11.025L7.4 9.625L12 14.225L16.6 9.625L18 11.025L12 17.025Z' fill='%23333333'/%3E%3C/svg%3E\");background-size:cover;width:16px;height:16px}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow svg,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow svg{display:none}:host[theme=dark] mat-select.opened ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select.opened ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 9.6249L18 15.6249L16.6 17.0249L12 12.4249L7.4 17.0249L6 15.6249L12 9.6249Z' fill='%23333333'/%3E%3C/svg%3E\");background-size:cover;width:16px;height:16px}::ng-deep .mat-form-field-appearance-outline mat-select .mat-select-arrow-wrapper{transform:none}::ng-deep .mat-select-panel.phone-number-select{margin-top:36px;margin-left:45px}::ng-deep .mat-select-search-inner{box-shadow:none!important;height:48px;background-color:#fff!important;border-bottom:none!important}::ng-deep .mat-select-search-inner .mat-select-search-inner-row{width:100%}::ng-deep .mat-select-search-inner button.mat-select-search-clear{right:35px}::ng-deep .mat-select-search-inner button.mat-select-search-clear mat-icon{font-size:20px}@media screen and (min-width: 599px){::ng-deep .mat-select-panel.phone-number-select{margin-left:-33px;min-width:510px}::ng-deep .mat-select-search-inner{min-width:calc(100% + 33px)!important}}ngx-mat-select-search ::ng-deep button .mat-mdc-button-persistent-ripple,ngx-mat-select-search ::ng-deep button .mat-ripple,ngx-mat-select-search ::ng-deep button .mat-mdc-button-ripple{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Optional
                 }, {