sempli-website-lib 7.2.0 → 7.3.0-beta.1

package/assets/interface/icons/check-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1F7F45" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>

package/assets/interface/icons/document-status-warning.svg

@@ -0,0 +1,6 @@
+<svg width="30" height="38" viewBox="0 0 30 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.75 1H4.5C2.567 1 1 2.61177 1 4.6V33.4C1 35.3882 2.567 37 4.5 37H25.5C27.433 37 29 35.3882 29 33.4V13L16.75 1Z" stroke="#B3B302" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.7175 12.895L7.365 23.5C7.23403 23.7268 7.16473 23.984 7.16399 24.2459C7.16326 24.5078 7.23112 24.7653 7.36082 24.9929C7.49052 25.2204 7.67754 25.4101 7.90328 25.5429C8.12902 25.6757 8.3856 25.7471 8.6475 25.75H21.3525C21.6144 25.7471 21.871 25.6757 22.0967 25.5429C22.3225 25.4101 22.5095 25.2204 22.6392 24.9929C22.7689 24.7653 22.8367 24.5078 22.836 24.2459C22.8353 23.984 22.766 23.7268 22.635 23.5L16.2825 12.895C16.1488 12.6746 15.9605 12.4923 15.7359 12.3659C15.5113 12.2394 15.2578 12.1729 15 12.1729C14.7422 12.1729 14.4887 12.2394 14.2641 12.3659C14.0395 12.4923 13.8512 12.6746 13.7175 12.895Z" stroke="#B3B302" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 16.75V19.75" stroke="#B3B302" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 22.75H15.0075" stroke="#B3B302" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/assets/interface/icons/folder-plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder-plus"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path><line x1="12" y1="11" x2="12" y2="17"></line><line x1="9" y1="14" x2="15" y2="14"></line></svg>

package/assets/interface/icons/paperclip.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-paperclip"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>

package/assets/interface/icons/x-circle-alert.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FF425E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>

package/core/intelli-styles.js

@@ -0,0 +1,55 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const handleLabel = (input) => {
+    const wrapper = input.closest('.input-line-wrapper');
+    if (wrapper) {
+      const label = wrapper.querySelector('.floating-label');
+      if (label) {
+        if ((input.value.trim() !== '' || document.activeElement === input ||
+            input.hasAttribute('placeholder')) || input.type === 'date') {
+          label.classList.add('active');
+        } else {
+          label.classList.remove('active');
+        }
+      }
+    }
+
+    const labelContainer = input.closest('.label-container');
+    if (labelContainer) {
+      handleStateIcon(labelContainer);
+    }
+  };
+  const handleStateIcon = (labelContainer) => {
+    if (labelContainer.classList.contains('has-error') || labelContainer.classList.contains('valid-input')) {
+      if (!labelContainer.querySelector('.input-state-icon') && labelContainer.innerText.length <= 50) {
+        const iconSpan = document.createElement('span');
+        iconSpan.className = 'input-state-icon';
+        labelContainer.appendChild(iconSpan);
+      }
+    } else {
+      const iconSpan = labelContainer.querySelector('.input-state-icon');
+      if (iconSpan) {
+        iconSpan.remove();
+      }
+    }
+  };
+  const inputFields = document.querySelectorAll('.input-line-wrapper .input-field');
+  inputFields.forEach(input => {
+    handleLabel(input);
+    input.addEventListener('focus', () => handleLabel(input));
+    input.addEventListener('blur', () => handleLabel(input));
+    input.addEventListener('input', () => handleLabel(input));
+  });
+  const observer = new MutationObserver(() => {
+    const newInputFields = document.querySelectorAll('.input-line-wrapper .input-field');
+    newInputFields.forEach(input => {
+      if (!input.hasAttribute('data-processed')) {
+        handleLabel(input);
+        input.setAttribute('data-processed', 'true');
+        input.addEventListener('focus', () => handleLabel(input));
+        input.addEventListener('blur', () => handleLabel(input));
+        input.addEventListener('input', () => handleLabel(input));
+      }
+    });
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
+});

package/package.json

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

package/styles/master-app.scss

@@ -12302,6 +12302,13 @@ body#app, .app-layout {
   margin: 0 10px 10px 0;
   @include border-radius(4px);
 
+  &.rounded {
+    border-radius: 30px;
+    padding: 6px 20px;
+    margin: 0;
+    text-align: center;
+  }
+
   &:hover {
     background-color: $color-primary-dark;
     color: white;
@@ -12736,6 +12743,56 @@ button.cursor-pointer {
   }
 }
 
+
+.chip-options-group {
+  display: flex;
+  justify-content: space-between;
+  margin: 20px 0;
+
+  @include responsive-max($breakpoint-xmedium) {
+    > div {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  label {
+    display: flex;
+    align-items: center;
+    max-width: 65%;
+  }
+
+  .button-chips {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(.4,0,.2,1);
+    transition-duration: .15s;
+    padding: .5rem 1.5rem;
+    border-radius: 9999px;
+    border: none;
+    cursor: pointer;
+
+    background: transparent;
+    color: #AFB3C0;
+    -webkit-box-shadow: 0 0 0 2px #AFB3C0 inset;
+    box-shadow: 0 0 0 2px #AFB3C0 inset;
+
+    &:hover {
+      background-color: rgba(128, 128, 128, 0.24);
+    }
+
+    &.selected {
+      background: transparent;
+      color: #4D4CFC;
+      box-shadow: 0 0 0 2px #4D4CFC inset;
+    }
+
+    @include responsive-max($breakpoint-small) {
+      padding: 0.4rem 1rem;
+    }
+  }
+}
+
 /*#############################################################################
 # FORMS AND INPUTS
 #############################################################################*/
@@ -13256,6 +13313,274 @@ button.cursor-pointer {
 
 }
 
+// INPUT WRAPPER
+.input-line-wrapper {
+  font-size: 1rem;
+  max-width: 100%;
+  padding: 1.5rem 0;
+  position: relative;
+
+  &.group {
+    display: flex;
+    justify-content: space-between;
+
+    @include responsive-max($breakpoint-small) {
+      flex-direction: column;
+    }
+
+    > label {
+      color: rgba(17, 17, 17, 0.7);
+      font-size: 0.875rem;
+    }
+
+    .row-group {
+      display: flex;
+      gap: 15px;
+
+      .input-wrapper {
+        margin: 0;
+        > label {
+          font-size: 0.875rem;
+        }
+      }
+    }
+  }
+
+  .label-container {
+    cursor: pointer;
+    position: relative;
+    display: block;
+    color: rgba(17, 17, 17, 0.7);
+
+    &.has-error {
+      .input-field {
+        color: #FF425E;
+        padding: 8px 24px 8px 0;
+        border-bottom-color: #FF425E;
+
+        &:focus, &:hover {
+          border-bottom-color: #FF425E;
+        }
+      }
+
+      .input-state-icon::before {
+        background-image: url('/assets/swl/interface/icons/x-circle-alert.svg');
+      }
+    }
+
+    &.valid-input {
+      .input-field {
+        color: #1F7F45;
+        padding: 8px 24px 8px 0;
+        border-bottom-color: #1F7F45;
+
+        &:focus, &:hover {
+          border-bottom-color: #1F7F45;
+        }
+      }
+
+      .input-state-icon::before {
+        background-image: url('/assets/swl/interface/icons/check-circle.svg');
+      }
+    }
+
+    .input-field {
+      background-color: transparent;
+      border-width: 0 0 1px;
+      border-radius: 0;
+      box-sizing: border-box;
+      caret-color: currentcolor;
+      display: block;
+      margin: 0;
+      padding: 8px 0;
+      text-align: left;
+      outline: none;
+      width: 100%;
+      border-bottom-style: solid;
+      white-space: nowrap;
+      overflow: hidden;
+      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 {
+      font-size: 0.9rem;
+      -webkit-appearance: none;
+      -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 {
+      &::after {
+        display: block;
+        content: "";
+
+        border-style: solid;
+        border-width: 5px 5px 0 5px;
+        border-color: #D7D9E2 transparent transparent transparent;
+        width: 0;
+        height: 0;
+
+        position: absolute;
+        top: 50%;
+        right: 13px;
+
+        @include transform(translateY(-50%));
+      }
+    }
+
+    .floating-label {
+      will-change: transform, color;
+      transform-origin: 0 0;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      pointer-events: none;
+      font-size: 1rem;
+      min-height: 1rem;
+      height: auto;
+      display: flex;
+      align-items: center;
+      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      white-space: nowrap;
+
+      .floating-label-text {
+        margin: 0;
+        color: inherit;
+        letter-spacing: -0.01em;
+        font-size: 0.875rem;
+        line-height: 1.46;
+      }
+
+      &.active {
+        transform: scale(0.84) translateY(-25px);
+      }
+    }
+
+    .input-state-icon {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      display: inline-block;
+      width: 16px;
+      height: 13px;
+      right: 0;
+
+      &::before {
+        content: "";
+        display: block;
+        width: 100%;
+        height: 100%;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+      }
+    }
+  }
+
+  .label-text {
+    margin: 0;
+    color: inherit;
+    letter-spacing: -0.01em;
+    font-size: 1.125rem;
+    line-height: 1.32;
+  }
+
+  .error-msg {
+    color: #FF425E;
+    margin-top: 0.5rem;
+    display: block;
+    position: relative;
+    font-size: 12px;
+  }
+
+  &:has(.select-wrapper) {
+    padding: 1.6rem 0;
+  }
+
+  .select-wrapper {
+    label {
+      margin: 0;
+      color: rgba(17, 17, 17, 0.7);;
+      letter-spacing: -0.01em;
+      font-size: 0.875rem;
+      line-height: 1.46;
+    }
+
+    select {
+      background-color: rgba(255, 255, 255, 0.9);
+      border-bottom-color: rgba(17, 17, 17, 0.2);
+      width: 100%;
+      padding: 5px;
+      border-radius: 2px;
+      height: 3rem;
+      border-width: 0 0 1px;
+      color: rgba(17, 17, 17, 0.7);
+      overflow: hidden;
+      box-sizing: border-box;
+    }
+  }
+}
+
 // TOGGLE SWITCH
 .toggle-button-with-label {
   display: flex;
@@ -13588,7 +13913,7 @@ button.cursor-pointer {
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 3;
+  z-index: 50;
 }
 
 .modal-box {
@@ -13609,7 +13934,7 @@ button.cursor-pointer {
   }
 
   &.extra-large {
-    @include responsive($breakpoint-medium) {
+    @include responsive($breakpoint-xmedium) {
       width: 860px;
     }
   }