@testgorilla/tgo-ui 2.2.2 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testgorilla/tgo-ui",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "lint-staged": {
     "src/**/*.ts": [
       "eslint --fix",
@@ -29,10 +29,14 @@
     "@angular/router": "~16.2.12",
     "ngx-skeleton-loader": "^8.1.0",
     "rxjs": "~7.8.0",
-    "zone.js": "^0.13.1"
+    "zone.js": "^0.13.1",
+    "libphonenumber-js": "^1.10.59",
+    "ngx-mat-select-search": "^7.0.6",
+    "svg-country-flags": "^1.2.10"
   },
   "overrides": {
-    "crypto-js": "4.2.0"
+    "crypto-js": "4.2.0",
+    "webpack-dev-middleware": "^6.1.2"
   },
   "module": "fesm2022/testgorilla-tgo-ui.mjs",
   "typings": "index.d.ts",

package/public-api.d.ts

@@ -127,3 +127,6 @@ export * from './components/segmented-button/segmented-button.model';
 export * from './components/segmented-button/segmented-button.component.module';
 export * from './components/password-criteria/password.component';
 export * from './components/password-criteria/password.component.module';
+export * from './components/phone-input/phone-input.component';
+export * from './components/phone-input/phone-input.component.module';
+export * from './components/phone-input/phone-input.model';

package/src/assets/i18n/en.json

@@ -54,7 +54,8 @@
     "NO_RESULTS": "No results",
     "MAX": "Max",
     "MIN": "Min",
-    "CLEAR": "Clear"
+    "CLEAR": "Clear",
+    "PHONE_NUMBER": "Phone number"
   },
   "DIALOG": {
     "CLOSE_LABEL": "Close dialog"

package/src/assets/icons/Google.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.9999 13.2001C20.9999 12.4601 20.9386 11.9201 20.806 11.3601H12.1836V14.7001H17.2448C17.1428 15.5301 16.5918 16.7801 15.3672 17.6201L15.3501 17.7319L18.0763 19.8016L18.2652 19.8201C19.9999 18.2501 20.9999 15.9401 20.9999 13.2001Z" fill="#4285F4"/>
+<path d="M12.1836 22C14.6632 22 16.7448 21.2 18.2652 19.82L15.3672 17.62C14.5918 18.15 13.5509 18.52 12.1836 18.52C9.75504 18.52 7.69383 16.95 6.95907 14.78L6.85137 14.789L4.01656 16.939L3.97949 17.04C5.48968 19.98 8.59173 22 12.1836 22Z" fill="#34A853"/>
+<path d="M6.95914 14.7801C6.76527 14.2201 6.65307 13.62 6.65307 13.0001C6.65307 12.38 6.76527 11.7801 6.94894 11.2201L6.94381 11.1008L4.07348 8.91626L3.97957 8.96004C3.35715 10.1801 3 11.5501 3 13.0001C3 14.4501 3.35715 15.82 3.97957 17.04L6.95914 14.7801Z" fill="#FBBC05"/>
+<path d="M12.1836 7.47998C13.9081 7.47998 15.0713 8.20997 15.7346 8.82002L18.3264 6.34C16.7346 4.89 14.6632 4 12.1836 4C8.59173 4 5.48968 6.01998 3.97949 8.95996L6.94887 11.22C7.69383 9.05 9.75504 7.47998 12.1836 7.47998Z" fill="#EB4335"/>
+</svg>

package/src/assets/icons/rebrand/Google-filled.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.9999 13.2001C20.9999 12.4601 20.9386 11.9201 20.806 11.3601H12.1836V14.7001H17.2448C17.1428 15.5301 16.5918 16.7801 15.3672 17.6201L15.3501 17.7319L18.0763 19.8016L18.2652 19.8201C19.9999 18.2501 20.9999 15.9401 20.9999 13.2001Z" fill="#4285F4"/>
+<path d="M12.1836 22C14.6632 22 16.7448 21.2 18.2652 19.82L15.3672 17.62C14.5918 18.15 13.5509 18.52 12.1836 18.52C9.75504 18.52 7.69383 16.95 6.95907 14.78L6.85137 14.789L4.01656 16.939L3.97949 17.04C5.48968 19.98 8.59173 22 12.1836 22Z" fill="#34A853"/>
+<path d="M6.95914 14.7801C6.76527 14.2201 6.65307 13.62 6.65307 13.0001C6.65307 12.38 6.76527 11.7801 6.94894 11.2201L6.94381 11.1008L4.07348 8.91626L3.97957 8.96004C3.35715 10.1801 3 11.5501 3 13.0001C3 14.4501 3.35715 15.82 3.97957 17.04L6.95914 14.7801Z" fill="#FBBC05"/>
+<path d="M12.1836 7.47998C13.9081 7.47998 15.0713 8.20997 15.7346 8.82002L18.3264 6.34C16.7346 4.89 14.6632 4 12.1836 4C8.59173 4 5.48968 6.01998 3.97949 8.95996L6.94887 11.22C7.69383 9.05 9.75504 7.47998 12.1836 7.47998Z" fill="#EB4335"/>
+</svg>

package/src/assets/icons/rebrand/Google-in-line.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.9999 13.2001C20.9999 12.4601 20.9386 11.9201 20.806 11.3601H12.1836V14.7001H17.2448C17.1428 15.5301 16.5918 16.7801 15.3672 17.6201L15.3501 17.7319L18.0763 19.8016L18.2652 19.8201C19.9999 18.2501 20.9999 15.9401 20.9999 13.2001Z" fill="#4285F4"/>
+<path d="M12.1836 22C14.6632 22 16.7448 21.2 18.2652 19.82L15.3672 17.62C14.5918 18.15 13.5509 18.52 12.1836 18.52C9.75504 18.52 7.69383 16.95 6.95907 14.78L6.85137 14.789L4.01656 16.939L3.97949 17.04C5.48968 19.98 8.59173 22 12.1836 22Z" fill="#34A853"/>
+<path d="M6.95914 14.7801C6.76527 14.2201 6.65307 13.62 6.65307 13.0001C6.65307 12.38 6.76527 11.7801 6.94894 11.2201L6.94381 11.1008L4.07348 8.91626L3.97957 8.96004C3.35715 10.1801 3 11.5501 3 13.0001C3 14.4501 3.35715 15.82 3.97957 17.04L6.95914 14.7801Z" fill="#FBBC05"/>
+<path d="M12.1836 7.47998C13.9081 7.47998 15.0713 8.20997 15.7346 8.82002L18.3264 6.34C16.7346 4.89 14.6632 4 12.1836 4C8.59173 4 5.48968 6.01998 3.97949 8.95996L6.94887 11.22C7.69383 9.05 9.75504 7.47998 12.1836 7.47998Z" fill="#EB4335"/>
+</svg>

package/src/theme/_input.scss

@@ -20,6 +20,13 @@
 }
 
 *[theme="classic"] {
+  .mat-mdc-form-field {
+    .mat-mdc-form-field-hint.error,
+    .mat-mdc-form-field-hint.error svg {
+      color: $tgo-error-default;
+    }
+  }
+
   .mat-mdc-form-field:not(.mat-warn) {
     &.mat-form-field-appearance-outline {
       .mat-mdc-text-field-wrapper {
@@ -147,6 +154,11 @@
   .mat-mdc-form-field, .autocomplete-wrapper .mat-mdc-form-field {
     &.mat-form-field-appearance-outline,  &.mat-text-field-outlined {
 
+      .mat-mdc-form-field-hint.error,
+      .mat-mdc-form-field-hint.error svg {
+        color: $error-50;
+      }
+
       input, .mat-text-field__input {
         caret-color: $black !important;
       }
@@ -337,3 +349,28 @@
     }
   }
 }
+
+.mat-mdc-form-field {
+  .mat-mdc-form-field-hint-wrapper {
+    padding: 0;
+  }
+
+  .mat-mdc-form-field-hint:before {
+    height: 2px;
+  }
+
+  .mat-mdc-form-field-hint.error {
+    display: flex;
+    flex-flow: column;
+    row-gap: 4px;
+
+    .errors {
+      ui-icon {
+        margin-right: 8px;
+      }
+
+      align-items: center;
+      display: flex;
+    }
+  }
+}

package/src/theme/theme.scss

@@ -21,6 +21,31 @@
     .mat-mdc-elevation-specific.mat-elevation-z8  {
       box-shadow: $box-shadow-modal!important;
     }
+
+    .phone-number-select {
+      margin-top: 8px;
+      border-radius: 10px!important;
+      box-shadow: $box-shadow-hover-state;
+
+      .mat-mdc-option {
+        --mat-option-selected-state-layer-color: #{$grayscale-10};
+        --mat-option-selected-state-label-text-color: #{$black};
+
+        .mdc-list-item__primary-text small {
+          font-size: 14px;
+        }
+
+        .mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-checked::after {
+          color: $black;
+          width: 12px;
+          height: 5px;
+        }
+      }
+
+      .mat-divider {
+        display: none;
+      }
+    }
   };
 }