sempli-website-lib 7.1.0-beta.0 → 7.1.0-beta.2

package/core/intelli-styles.js

@@ -4,7 +4,8 @@ document.addEventListener('DOMContentLoaded', () => {
     if (wrapper) {
       const label = wrapper.querySelector('.floating-label');
       if (label) {
-        if (input.value.trim() !== '' || document.activeElement === input || input.hasAttribute('placeholder')) {
+        if ((input.value.trim() !== '' || document.activeElement === input ||
+            input.hasAttribute('placeholder')) || input.type === 'date') {
           label.classList.add('active');
         } else {
           label.classList.remove('active');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sempli-website-lib",
-  "version": "7.1.0-beta.0",
+  "version": "7.1.0-beta.2",
   "peerDependencies": {
     "@angular/common": "^18.0.3",
     "@angular/core": "^18.0.3"

package/styles/master-app.scss

@@ -13296,27 +13296,6 @@ button.cursor-pointer {
     }
   }
 
-  input[type=date],
-  input[type=datetime],
-  input[type=datetime-local],
-  input[type=email],
-  input[type=month],
-  input[type=number],
-  input[type=password],
-  input[type=range],
-  input[type=search],
-  input[type=tel],
-  input[type=text],
-  input[type=time],
-  input[type=url],
-  input[type=week] {
-    &:disabled {
-      background-color: #F4F4F4;
-      border-color: #E9EAEA;
-      color: #B6B8BD;
-    }
-  }
-
   .label-container {
     cursor: pointer;
     position: relative;
@@ -13373,10 +13352,47 @@ button.cursor-pointer {
       text-overflow: ellipsis;
       color: #111;
       border-bottom-color: rgba(17, 17, 17, 0.2);
+      box-shadow: transparent 0 0 0 1000px inset;
+
+      /* Webkit browsers */
+      &:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
+        -webkit-text-fill-color: #111 !important;
+        transition: background-color 5000s ease-in-out 0s;
+      }
+
+      &:-moz-autofill {
+        background-color: transparent !important;
+      }
+
+      &:-ms-autofill {
+        background-color: transparent !important;
+      }
+
+      /* Modern browsers */
+      &:autofill {
+        box-shadow: 0 0 0 1000px transparent inset !important;
+        background-color: transparent !important;
+      }
 
       &:focus, &:hover {
         border-bottom-color: #111;
       }
+
+      &:disabled {
+        border-color: #E9EAEA;
+        border-bottom-color: #B6B8BD;
+        color: #B6B8BD;
+
+        &:focus, &:hover {
+          border-bottom-color: #B6B8BD;
+          cursor: not-allowed;
+        }
+
+        + .floating-label {
+          color: #B6B8BD;
+        }
+      }
     }
 
     select.input-field {
@@ -13385,6 +13401,19 @@ button.cursor-pointer {
       -moz-appearance: none;
       appearance: none;
       white-space: nowrap;
+      height: unset;
+    }
+
+    textarea.input-field {
+      resize: none;
+      white-space: pre-wrap;
+      overflow-wrap: break-word;
+      overflow-y: auto;
+      max-height: 150px;
+
+      + .floating-label {
+        margin-bottom: 30px;
+      }
     }
 
     &.select-wrapper {
@@ -13474,6 +13503,10 @@ button.cursor-pointer {
     font-size: 12px;
   }
 
+  &:has(.select-wrapper) {
+    padding: 1.6rem 0;
+  }
+
   .select-wrapper {
     label {
       margin: 0;

package/styles/master-landing.scss

@@ -13076,27 +13076,6 @@ button.cursor-pointer {
     }
   }
 
-  input[type=date],
-  input[type=datetime],
-  input[type=datetime-local],
-  input[type=email],
-  input[type=month],
-  input[type=number],
-  input[type=password],
-  input[type=range],
-  input[type=search],
-  input[type=tel],
-  input[type=text],
-  input[type=time],
-  input[type=url],
-  input[type=week] {
-    &:disabled {
-      background-color: #F4F4F4;
-      border-color: #E9EAEA;
-      color: #B6B8BD;
-    }
-  }
-
   .label-container {
     cursor: pointer;
     position: relative;
@@ -13153,10 +13132,47 @@ button.cursor-pointer {
       text-overflow: ellipsis;
       color: #111;
       border-bottom-color: rgba(17, 17, 17, 0.2);
+      box-shadow: transparent 0 0 0 1000px inset;
+
+      /* Webkit browsers */
+      &:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
+        -webkit-text-fill-color: #111 !important;
+        transition: background-color 5000s ease-in-out 0s;
+      }
+
+      &:-moz-autofill {
+        background-color: transparent !important;
+      }
+
+      &:-ms-autofill {
+        background-color: transparent !important;
+      }
+
+      /* Modern browsers */
+      &:autofill {
+        box-shadow: 0 0 0 1000px transparent inset !important;
+        background-color: transparent !important;
+      }
 
       &:focus, &:hover {
         border-bottom-color: #111;
       }
+
+      &:disabled {
+        border-color: #E9EAEA;
+        border-bottom-color: #B6B8BD;
+        color: #B6B8BD;
+
+        &:focus, &:hover {
+          border-bottom-color: #B6B8BD;
+          cursor: not-allowed;
+        }
+
+        + .floating-label {
+          color: #B6B8BD;
+        }
+      }
     }
 
     select.input-field {
@@ -13165,6 +13181,19 @@ button.cursor-pointer {
       -moz-appearance: none;
       appearance: none;
       white-space: nowrap;
+      height: unset;
+    }
+
+    textarea.input-field {
+      resize: none;
+      white-space: pre-wrap;
+      overflow-wrap: break-word;
+      overflow-y: auto;
+      max-height: 150px;
+
+      + .floating-label {
+        margin-bottom: 30px;
+      }
     }
 
     &.select-wrapper {
@@ -13254,6 +13283,10 @@ button.cursor-pointer {
     font-size: 12px;
   }
 
+  &:has(.select-wrapper) {
+    padding: 1.6rem 0;
+  }
+
   .select-wrapper {
     label {
       margin: 0;

package/styles/partials/_forms.scss

@@ -551,27 +551,6 @@
     }
   }
 
-  input[type=date],
-  input[type=datetime],
-  input[type=datetime-local],
-  input[type=email],
-  input[type=month],
-  input[type=number],
-  input[type=password],
-  input[type=range],
-  input[type=search],
-  input[type=tel],
-  input[type=text],
-  input[type=time],
-  input[type=url],
-  input[type=week] {
-    &:disabled {
-      background-color: #F4F4F4;
-      border-color: #E9EAEA;
-      color: #B6B8BD;
-    }
-  }
-
   .label-container {
     cursor: pointer;
     position: relative;
@@ -628,10 +607,47 @@
       text-overflow: ellipsis;
       color: #111;
       border-bottom-color: rgba(17, 17, 17, 0.2);
+      box-shadow: transparent 0 0 0 1000px inset;
+
+      /* Webkit browsers */
+      &:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
+        -webkit-text-fill-color: #111 !important;
+        transition: background-color 5000s ease-in-out 0s;
+      }
+
+      &:-moz-autofill {
+        background-color: transparent !important;
+      }
+
+      &:-ms-autofill {
+        background-color: transparent !important;
+      }
+
+      /* Modern browsers */
+      &:autofill {
+        box-shadow: 0 0 0 1000px transparent inset !important;
+        background-color: transparent !important;
+      }
 
       &:focus, &:hover {
         border-bottom-color: #111;
       }
+
+      &:disabled {
+        border-color: #E9EAEA;
+        border-bottom-color: #B6B8BD;
+        color: #B6B8BD;
+
+        &:focus, &:hover {
+          border-bottom-color: #B6B8BD;
+          cursor: not-allowed;
+        }
+
+        + .floating-label {
+          color: #B6B8BD;
+        }
+      }
     }
 
     select.input-field {
@@ -640,6 +656,19 @@
       -moz-appearance: none;
       appearance: none;
       white-space: nowrap;
+      height: unset;
+    }
+
+    textarea.input-field {
+      resize: none;
+      white-space: pre-wrap;
+      overflow-wrap: break-word;
+      overflow-y: auto;
+      max-height: 150px;
+
+      + .floating-label {
+        margin-bottom: 30px;
+      }
     }
 
     &.select-wrapper {
@@ -729,6 +758,10 @@
     font-size: 12px;
   }
 
+  &:has(.select-wrapper) {
+    padding: 1.6rem 0;
+  }
+
   .select-wrapper {
     label {
       margin: 0;