@wizishop/angular-components 19.0.0-beta.3 → 19.0.0

package/angular-components.scss

@@ -504,52 +504,6 @@ $wizishop-blue-button: #52aecd !default;.zindexToggle {
     font-size: 1.25rem;
   }
 }
-wac-block {
-  .wac-block {
-    background-color: $white;
-    @include padding(1.875rem);
-    box-shadow: 0 0.125rem 0.3125rem rgba(45, 62, 85, 0.05);
-    @include simple_transition();
-    height: 100%;
-    border-radius: var(--wac-block-border-radius);
-
-    @include media('<tablet') {
-      @include padding(1.25rem);
-    }
-
-    &:hover {
-      box-shadow: 0 0.125rem 0.3125rem rgba(45, 62, 85, 0.2);
-    }
-  }
-}
-
-.wac-back {
-  width: 40px;
-  height: 40px;
-
-  &__wrapper {
-    @include flexbox();
-    @include justify-content(center);
-    @include align-items(center);
-    width: 100%;
-    height: 100%;
-    border-radius: 3px;
-    border: 1px solid $wac-border-light;
-    background-color: transparent;
-    transition: border-color 0.3s ease-in-out;
-
-    i {
-      color: $wac-second-color;
-      font-size: 11px;
-      line-height: 14px;
-    }
-
-    &:hover {
-      border-color: $wac-back-border-hover;
-      transition: border-color 0.3s ease-in-out;
-    }
-  }
-}
 .wac-alert-popup {
   .alert {
     z-index: 999999;
@@ -833,6 +787,52 @@ wac-block {
   }
 
 }
+.wac-back {
+  width: 40px;
+  height: 40px;
+
+  &__wrapper {
+    @include flexbox();
+    @include justify-content(center);
+    @include align-items(center);
+    width: 100%;
+    height: 100%;
+    border-radius: 3px;
+    border: 1px solid $wac-border-light;
+    background-color: transparent;
+    transition: border-color 0.3s ease-in-out;
+
+    i {
+      color: $wac-second-color;
+      font-size: 11px;
+      line-height: 14px;
+    }
+
+    &:hover {
+      border-color: $wac-back-border-hover;
+      transition: border-color 0.3s ease-in-out;
+    }
+  }
+}
+wac-block {
+  .wac-block {
+    background-color: $white;
+    @include padding(1.875rem);
+    box-shadow: 0 0.125rem 0.3125rem rgba(45, 62, 85, 0.05);
+    @include simple_transition();
+    height: 100%;
+    border-radius: var(--wac-block-border-radius);
+
+    @include media('<tablet') {
+      @include padding(1.25rem);
+    }
+
+    &:hover {
+      box-shadow: 0 0.125rem 0.3125rem rgba(45, 62, 85, 0.2);
+    }
+  }
+}
+
 .block-with-checkbox {
   width: 100%;
   display: flex;
@@ -973,7 +973,154 @@ wac-block {
     margin-right: 0;
   }
 }
-.wac-breadcrumbs {
+.w-border-picker {
+  display: flex;
+  flex-direction: column;
+
+  .bp-label {
+    font-weight: 500;
+  }
+
+  .w-input {
+    width: 100%;
+    min-width: 305px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    padding: 8px;
+    border: 1px solid #dee2ed;
+    border-radius: 3px;
+    position: relative;
+
+    @include media ('<tablet') {
+      min-width: 250px;
+    }
+
+    .border-preview {
+      position: relative;
+      width: 100%;
+      max-width: 24px;
+      height: 24px;
+      border: 2px solid #1d2a3b;
+      border-radius: 3px;
+
+      .mask1, .mask2 {
+        background: #fff;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      .mask1 {
+        width: 30px;
+        height: 5px;
+      }
+
+      .mask2 {
+        width: 5px;
+        height: 30px;
+      }
+      
+    }
+
+    .bp-range {
+      width: 100%;
+      max-width: 202px;
+      height: 4px;
+      padding: 0;
+      border: none;
+      background: transparent;
+      -webkit-appearance: none;
+      appearance: none;
+      margin: 0;
+      cursor: pointer;
+      
+      &::-webkit-slider-runnable-track {
+        height: 4px;
+        background: #dee2ed;
+        border-radius: 20px;
+      }
+      
+      &::-moz-range-track {
+        height: 4px;
+        background: #dee2ed;
+        border-radius: 20px;
+      }
+      
+      &::-ms-track {
+        height: 4px;
+        background: #dee2ed;
+        border-radius: 20px;
+        border-color: transparent;
+        color: transparent;
+      }
+      
+      // Thumb style
+      &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: #3BA6EC;
+        margin-top: -6px; // Centrer verticalement (height of track - height of thumb) / 2
+        border: 2px solid white;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+        transition: all 0.2s ease;
+      }
+      
+      &::-moz-range-thumb {
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: #3BA6EC;
+        border: 2px solid white;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+        transition: all 0.2s ease;
+      }
+      
+      &::-ms-thumb {
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: #3BA6EC;
+        border: 2px solid white;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+        transition: all 0.2s ease;
+      }
+      
+      // Active/hover state
+      &:active::-webkit-slider-thumb,
+      &:hover::-webkit-slider-thumb {
+        transform: scale(1.1);
+      }
+      
+      &:active::-moz-range-thumb,
+      &:hover::-moz-range-thumb {
+        transform: scale(1.1);
+      }
+      
+      // Fill color before thumb (optional)
+      &::-webkit-slider-runnable-track {
+        background: linear-gradient(to right, #3BA6EC 0%, #3BA6EC var(--slider-percentage, 0%), #dee2ed var(--slider-percentage, 0%), #dee2ed 100%);
+      }
+    }
+
+    .bp-input {
+      width: 100%;
+      max-width: 45px;
+      height: 100%;
+      padding: 0;
+      border: none;
+      font-size: 14px;
+      color: #1d2a3b;
+      font-weight: 400;
+    }
+
+  }
+}.wac-breadcrumbs {
   width: 100%;
   display: flex;
   align-items: center;
@@ -2612,178 +2759,31 @@ wac-block {
       left: 0;
       transform: translate(0, 10px);
       top: 100%;
-      &:before {
-        width: 0;
-        height: 0;
-        border-style: solid;
-        border-width: 0 10px 10px 10px;
-        border-color: transparent transparent transparentize($wac-second-color, .1) transparent;
-        right: auto;
-        top: auto;
-        left: 10px;
-        bottom: 100%;
-      }
-    }
-  }
-
-  &:hover, &:focus {
-    .wac-button {
-      &__tooltips {
-        visibility: visible;
-        opacity: .9;
-        transition: opacity .3s ease .05s, visibility 0s linear 0s;
-      }
-    }
-  }
-}
-.w-border-picker {
-  display: flex;
-  flex-direction: column;
-
-  .bp-label {
-    font-weight: 500;
-  }
-
-  .w-input {
-    width: 100%;
-    min-width: 305px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    padding: 8px;
-    border: 1px solid #dee2ed;
-    border-radius: 3px;
-    position: relative;
-
-    @include media ('<tablet') {
-      min-width: 250px;
-    }
-
-    .border-preview {
-      position: relative;
-      width: 100%;
-      max-width: 24px;
-      height: 24px;
-      border: 2px solid #1d2a3b;
-      border-radius: 3px;
-
-      .mask1, .mask2 {
-        background: #fff;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      }
-
-      .mask1 {
-        width: 30px;
-        height: 5px;
-      }
-
-      .mask2 {
-        width: 5px;
-        height: 30px;
-      }
-      
-    }
-
-    .bp-range {
-      width: 100%;
-      max-width: 202px;
-      height: 4px;
-      padding: 0;
-      border: none;
-      background: transparent;
-      -webkit-appearance: none;
-      appearance: none;
-      margin: 0;
-      cursor: pointer;
-      
-      &::-webkit-slider-runnable-track {
-        height: 4px;
-        background: #dee2ed;
-        border-radius: 20px;
-      }
-      
-      &::-moz-range-track {
-        height: 4px;
-        background: #dee2ed;
-        border-radius: 20px;
-      }
-      
-      &::-ms-track {
-        height: 4px;
-        background: #dee2ed;
-        border-radius: 20px;
-        border-color: transparent;
-        color: transparent;
-      }
-      
-      // Thumb style
-      &::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        width: 16px;
-        height: 16px;
-        border-radius: 50%;
-        background: #3BA6EC;
-        margin-top: -6px; // Centrer verticalement (height of track - height of thumb) / 2
-        border: 2px solid white;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
-        transition: all 0.2s ease;
-      }
-      
-      &::-moz-range-thumb {
-        width: 16px;
-        height: 16px;
-        border-radius: 50%;
-        background: #3BA6EC;
-        border: 2px solid white;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
-        transition: all 0.2s ease;
-      }
-      
-      &::-ms-thumb {
-        width: 16px;
-        height: 16px;
-        border-radius: 50%;
-        background: #3BA6EC;
-        border: 2px solid white;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
-        transition: all 0.2s ease;
-      }
-      
-      // Active/hover state
-      &:active::-webkit-slider-thumb,
-      &:hover::-webkit-slider-thumb {
-        transform: scale(1.1);
-      }
-      
-      &:active::-moz-range-thumb,
-      &:hover::-moz-range-thumb {
-        transform: scale(1.1);
-      }
-      
-      // Fill color before thumb (optional)
-      &::-webkit-slider-runnable-track {
-        background: linear-gradient(to right, #3BA6EC 0%, #3BA6EC var(--slider-percentage, 0%), #dee2ed var(--slider-percentage, 0%), #dee2ed 100%);
+      &:before {
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: 0 10px 10px 10px;
+        border-color: transparent transparent transparentize($wac-second-color, .1) transparent;
+        right: auto;
+        top: auto;
+        left: 10px;
+        bottom: 100%;
       }
     }
+  }
 
-    .bp-input {
-      width: 100%;
-      max-width: 45px;
-      height: 100%;
-      padding: 0;
-      border: none;
-      font-size: 14px;
-      color: #1d2a3b;
-      font-weight: 400;
+  &:hover, &:focus {
+    .wac-button {
+      &__tooltips {
+        visibility: visible;
+        opacity: .9;
+        transition: opacity .3s ease .05s, visibility 0s linear 0s;
+      }
     }
-
   }
-}wac-calendar {
+}
+wac-calendar {
   &.ng-touched.ng-invalid {
     .wac-calendar__wrapper__select, .wac-calendar__wrapper__editInPlace, .wac-calendar__wrapper__select {
       border-color: $wac-form-control-touched-and-invalid-border;
@@ -3656,7 +3656,51 @@ wac-block {
     font-weight: 400;
   }
 }
-.wac-field-checkbox {
+.w-color-picker {
+  display: flex;
+  flex-direction: column;
+
+  .cp-label {
+    font-weight: 500;
+  }
+
+  .w-input {
+    position: relative;
+    width: 210px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 5px;
+    border: 1px solid #dee2ed;
+    border-radius: 3px;
+
+    .color-preview {
+      width: 30px;
+      height: 30px;
+      border: 1px solid #dee2ed;
+      border-radius: 3px;
+    }
+
+    .color-picker {
+      left: 0 !important;
+
+      .arrow-bottom {
+        left: 14px !important;
+      }
+    }
+    
+    .cp-input {
+      width: 70%;
+      height: 100%;
+      border: none;
+      font-size: 14px;
+      color: #1d2a3b;
+      font-weight: 400;
+      padding: 0 !important;
+    }
+  }
+}.wac-field-checkbox {
   &.disable-wt {
     .wac-field-checkbox__row {
       display: flex;
@@ -3859,51 +3903,7 @@ wac-block {
     }
   }
 }
-.w-color-picker {
-  display: flex;
-  flex-direction: column;
-
-  .cp-label {
-    font-weight: 500;
-  }
-
-  .w-input {
-    position: relative;
-    width: 210px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 5px;
-    border: 1px solid #dee2ed;
-    border-radius: 3px;
-
-    .color-preview {
-      width: 30px;
-      height: 30px;
-      border: 1px solid #dee2ed;
-      border-radius: 3px;
-    }
-
-    .color-picker {
-      left: 0 !important;
-
-      .arrow-bottom {
-        left: 14px !important;
-      }
-    }
-    
-    .cp-input {
-      width: 70%;
-      height: 100%;
-      border: none;
-      font-size: 14px;
-      color: #1d2a3b;
-      font-weight: 400;
-      padding: 0 !important;
-    }
-  }
-}.wac-confirm-delete {
+.wac-confirm-delete {
   position: absolute;
   right: 0;
   top: 0;
@@ -4015,6 +4015,39 @@ wac-block {
    }
   }
 }
+.wac-delete {
+  width: 40px;
+  height: 40px;
+
+  &__wrapper {
+    @include flexbox();
+    @include justify-content(center);
+    @include align-items(center);
+    width: 100%;
+    height: 100%;
+    border-radius: 3px;
+    background-color: transparent;
+    transition: background-color 0.3s ease-in-out;
+    cursor: pointer;
+
+    i {
+      color: $wac-border-form;
+      font-size: 14px;
+      line-height: 23px;
+      transition: color 0.3s ease-in-out;
+    }
+
+    &:hover {
+      background-color: $wac-primary-button;
+      transition: background-color 0.3s ease-in-out;
+
+      i {
+        color: $wac-white;
+        transition: color 0.3s ease-in-out;
+      }
+    }
+  }
+}
 .wac-draganddrop-list {
   width: 100%;
   background-color: $wac-white;
@@ -4152,39 +4185,6 @@ wac-block {
 .wac-draganddrop-list__wrapper.cdk-drop-list-dragging .wac-draganddrop-list__wrapper__item:not(.cdk-drag-placeholder) {
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
-.wac-delete {
-  width: 40px;
-  height: 40px;
-
-  &__wrapper {
-    @include flexbox();
-    @include justify-content(center);
-    @include align-items(center);
-    width: 100%;
-    height: 100%;
-    border-radius: 3px;
-    background-color: transparent;
-    transition: background-color 0.3s ease-in-out;
-    cursor: pointer;
-
-    i {
-      color: $wac-border-form;
-      font-size: 14px;
-      line-height: 23px;
-      transition: color 0.3s ease-in-out;
-    }
-
-    &:hover {
-      background-color: $wac-primary-button;
-      transition: background-color 0.3s ease-in-out;
-
-      i {
-        color: $wac-white;
-        transition: color 0.3s ease-in-out;
-      }
-    }
-  }
-}
 .wac-dropdown {
   display: inline-block;
   width: 40px;
@@ -4495,41 +4495,7 @@ wac-block {
       }
     }
   }
-}@mixin flex-col-start {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-}
-
-.wac-faq-section {
-  width: 100%;
-  @include flex-col-start;
-  gap: 32px;
-  &__wrapper {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: 32px;
-    &__item {
-      width: calc(50% - 16px);
-      @include flex-col-start;
-      gap: 16px;
-      @include media('<tablet') {
-        width: 100%;
-      }
-      strong {
-        font-weight: 700;
-      }
-      p {
-        color: $second-color;
-      }
-    }
-  }
-}
-.wac-expanded-panel {
+}.wac-expanded-panel {
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -4587,6 +4553,40 @@ wac-block {
     }
   }
 }
+@mixin flex-col-start {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.wac-faq-section {
+  width: 100%;
+  @include flex-col-start;
+  gap: 32px;
+  &__wrapper {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 32px;
+    &__item {
+      width: calc(50% - 16px);
+      @include flex-col-start;
+      gap: 16px;
+      @include media('<tablet') {
+        width: 100%;
+      }
+      strong {
+        font-weight: 700;
+      }
+      p {
+        color: $second-color;
+      }
+    }
+  }
+}
 .wac-filters {
   width: 100%;
   &__wrapper {
@@ -10987,6 +10987,12 @@ div.wac-field-input-search {
 
 }
 
+.wac-option {
+  &__placeholder {
+    pointer-events: none;
+  }
+}
+
 .wac-select-seacrh-trigger {
     position: relative;
     top: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wizishop/angular-components",
-  "version": "19.0.0-beta.3",
+  "version": "19.0.0",
   "peerDependencies": {
     "@angular/animations": ">=19.0.0",
     "@angular/cdk": ">=19.0.0",