sempli-website-lib 7.0.0 → 7.1.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/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,54 @@
+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')) {
+          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.0.0",
+  "version": "7.1.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;
@@ -13256,6 +13263,241 @@ 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;
+        }
+      }
+    }
+  }
+
+  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;
+    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);
+
+      &:focus, &:hover {
+        border-bottom-color: #111;
+      }
+    }
+
+    select.input-field {
+      font-size: 0.9rem;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      white-space: nowrap;
+    }
+
+    &.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;
+  }
+
+  .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 +13830,7 @@ button.cursor-pointer {
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 3;
+  z-index: 50;
 }
 
 .modal-box {

package/styles/master-landing.scss

@@ -12082,6 +12082,13 @@ $breakPoints: (
   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;
@@ -13036,6 +13043,241 @@ 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;
+        }
+      }
+    }
+  }
+
+  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;
+    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);
+
+      &:focus, &:hover {
+        border-bottom-color: #111;
+      }
+    }
+
+    select.input-field {
+      font-size: 0.9rem;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      white-space: nowrap;
+    }
+
+    &.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;
+  }
+
+  .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;
@@ -13368,7 +13610,7 @@ button.cursor-pointer {
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 3;
+  z-index: 50;
 }
 
 .modal-box {

package/styles/partials/_buttons.scss

@@ -11,6 +11,13 @@
   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;

package/styles/partials/_forms.scss

@@ -518,6 +518,241 @@
 
 }
 
+// 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;
+        }
+      }
+    }
+  }
+
+  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;
+    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);
+
+      &:focus, &:hover {
+        border-bottom-color: #111;
+      }
+    }
+
+    select.input-field {
+      font-size: 0.9rem;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      white-space: nowrap;
+    }
+
+    &.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;
+  }
+
+  .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;

package/styles/partials/_modals.scss

@@ -10,7 +10,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 3;
+  z-index: 50;
 }
 
 .modal-box {