bpm-core 0.0.50 → 0.0.52

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "bpm-core",
-  "version": "0.0.50",
+  "version": "0.0.52",
   "peerDependencies": {
     "@angular/common": "^18.2.0",
     "@angular/core": "^18.2.0",
     "@angular/material": "^18.2.0",
-    "moment": "^2.29.4"
+    "ngx-intl-tel-input-gg": "^1.0.12"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/src/lib/assets/scss/_general.scss

@@ -88,6 +88,7 @@ figure {
 .mat-drawer-backdrop {
   z-index: 20 !important;
   position: fixed;
+  min-width:800px
 }
 
 .mat-drawer-inner-container {

package/src/lib/assets/scss/input-telephone.scss

@@ -1,160 +1,134 @@
-app-mobile-number-input {
-  &.ng-touched.ng-invalid {
-    .input-telephone {
-      --input-border: var(--input-border-invalid);
-    }
-  }
-}
-
-.input-telephone {
-  display: block;
-  height: var(--input-height);
-  border: var(--input-border);
-  border-radius: var(--input-radius);
-  background-color: var(--input-bc);
-  font-size: var(--input-fs);
-  //margin-bottom: 1rem;
-  transition: all 0.2s linear;
-
-  &.has-value {
-    --input-border: var(--input-border-active);
-  }
-
-  &.input-focused {
-    --input-border: var(--input-border-focuse);
-  }
-
-  &.input-disabled {
-    --input-bc: var(--input-bg-gray);
-    --input-border: var(--input-border-disabled);
-  }
-
-  &.ng-touched.ng-invalid,
-  &.input-invalid {
-    --input-border: var(--input-border-invalid);
-  }
-
-  .form-control {
-    border: 0;
-    font-size: var(--input-fs);
-    font-weight: var(--input-fw);
-    color: var(--input-fc);
-    padding: var(--input-padding) !important;
-    width: 100%;
-    border-radius: var(--input-radius);
-
-    [dir='rtl'] & {
-      direction: ltr;
-      text-align: right;
-    }
-
-    &::placeholder {
-      font-size: var(--placeholder-fs);
-      font-weight: var(--placeholder-fw);
-      color: var(--placeholder-fc);
-    }
-  }
-
-  .iti {
-    width: 100%;
-    height: 100%;
-    display: flex;
-
-    .iti__flag-container {
-      background-color: transparent !important;
-      padding: 0;
-      border-right: var(--input-border);
-      position: static;
-
-      [dir='rtl'] & {
-        border-left: var(--input-border);
-        border-right: 0;
-      }
-
-      .iti__selected-flag {
-        background-color: transparent !important;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        padding: 0 0.5rem;
-        gap: 0.3rem;
-        z-index: 3;
-
-        .iti__arrow {
-          width: 10px;
-          height: 10px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border: 0;
-          margin: 0;
-
-          &:before {
-            content: '\ea2c';
-            font-family: 'stc-font-icons';
-            font-size: 0.7rem;
-            color: var(--dark-gray);
-          }
-
-          &.iti__arrow--up {
-            transform: rotate(180deg);
-          }
-        }
-      }
-    }
-
-    .mat-input-element {
-      height: calc(100%);
-      margin: 0;
-      padding: 0 10px;
-
-      [dir='rtl'] & {
-        // margin: 0 3px;
-      }
-    }
-
-    .iti__country-list {
-      //max-width: 260px;
-      font-size: 0.8rem;
-      border-radius: 0 !important;
-      box-shadow: -1px 3px 14px rgba(0, 0, 0, 0.08) !important;
-      border: 1px solid var(--off-white);
-      //white-space: normal;
-      //margin: 0 -16px;
-      z-index: 4;
-
-      .iti__divider {
-        display: none !important;
-      }
-
-      .iti__country {
-        border-bottom: 1px solid var(--light-gray);
-        background: transparent;
-        display: flex;
-        gap: 0.5rem;
-
-        &:last-child {
-          border-bottom: 0;
-        }
-
-        &.iti__highlight {
-          background-color: var(--light-gray);
-        }
-
-        .iti__flag-box,
-        .iti__country-name,
-        .iti__dial-code {
-          margin: 0;
-          direction: ltr;
-        }
-      }
-    }
-  }
-  .country-dropdown {
-    [dir='rtl'] & {
-      right: 0 !important;
-      left: auto !important;
-    }
-  }
+.iti {
+	display: inline-block;
+	position: relative;
+  width: 100%;
+}
+
+.iti .dropdown-menu.country-dropdown {
+	border-top-left-radius: 0px;
+	border-top-right-radius: 0px;
+	border-color: #c7cace;
+	margin-top: -1px;
+}
+
+.iti .iti__country-list {
+	box-shadow: none;
+	font-size: 14px;
+	margin-left: 0;
+	width: 244px;
+	max-height: 170px;
+}
+
+.iti__flag-container.open + input {
+	border-bottom-left-radius: 0px;
+	border-bottom-right-radius: 0px;
+}
+
+.iti .search-container input {
+	font-size: 14px;
+	border-color: #c7cace;
+	border-radius: 0;
+	padding: 5px 10px;
+}
+
+.iti .search-container input:focus {
+	outline: none;
+}
+
+@media screen and (max-width: 479px) {
+	.iti .iti__country-list {
+		width: 88.3vw;
+	}
+}
+
+ngx-intl-tel-input{
+width: 100%;
+}
+ngx-intl-tel-input input {
+	height: 44px;
+	margin-bottom: 20px;
+	padding: 10px;
+	border-style: solid;
+	border-width: 1px;
+	border-color: #c7cace;
+	border-radius: 4px;
+	font-size: 18px;
+}
+
+ngx-intl-tel-input.ng-invalid.ng-touched input {
+	border: 1px solid #c0392b;
+}
+
+ngx-intl-tel-input input:hover {
+	box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.24);
+}
+
+ngx-intl-tel-input input:focus {
+	outline: none !important;
+	border-color: #3498db;
+	box-shadow: 0 0 0 0 #000;
+}
+
+ngx-intl-tel-input input::-webkit-input-placeholder {
+	color: #bac2c7;
+}
+
+ngx-intl-tel-input input:-ms-input-placeholder {
+	color: #bac2c7;
+}
+
+ngx-intl-tel-input input::-ms-input-placeholder {
+	color: #bac2c7;
+}
+
+ngx-intl-tel-input input::placeholder {
+	color: #bac2c7;
+}
+
+ngx-intl-tel-input input[disabled] {
+	background-color: #e5eaf1;
+}
+
+.iti__flag-container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: auto;
+  left: 0;
+  padding: 1px;
+}
+.iti--allow-dropdown input[type=tel]{
+  padding-right: 6px;
+  padding-left: 52px;
+  margin-left: 0;
+  width: 100%;
+  position: relative;
+  z-index: 0;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  margin-right: 0;
+}
+.iti__selected-flag {
+  z-index: 1;
+  position: relative;
+  display: flex
+;
+  align-items: center;
+  height: 100%;
+  padding: 0 6px 0 8px;
+}
+.iti__flag.iti__in {
+  height: 14px;
+  background-position: -2413px 0px;
+}
+.iti__sa {
+  --iti-flag-offset: -3008px;
+}
+.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
+  background-color: rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+}
+.iti__flag.iti__in {
+  height: 14px;
+  background-position: -2413px 0px;
 }