@wizishop/angular-components 15.1.36 → 15.1.38

package/angular-components.scss

@@ -5475,6 +5475,80 @@ wac-optional-disable-container {
 .wac-free .ps-content > * {
   padding-right: 15px;
 }
+.wac-progressBarContent {
+  position: relative;
+  width: 100%;
+  display: block;
+  .progressBar {
+    position: relative;
+    width: 88%;
+    margin-bottom: 1rem;
+    progress {
+      &.progress {
+        margin-bottom: 0;
+        height: rem(2);
+        &::-webkit-progress-value {
+          transition: width 0.5s ease;
+        }
+      }
+    }
+    span {
+      position: absolute;
+      top: -4px;
+      height: 11px;
+      width: 11px;
+      background-color: $wac-border-color;
+      border-radius: 50%;
+    }
+    .is-danger {
+      background-color: $wac-primary-button;
+      &::-webkit-progress-value {
+        background-color: $wac-primary-button;
+      }
+    }
+    .is-warning {
+      background-color: $wac-orange-color;
+      &::-webkit-progress-value {
+        background-color: $wac-orange-color;
+      }
+    }
+    .is-success {
+      background-color: $wac-green-color;
+      &::-webkit-progress-value {
+        background-color: $wac-green-color;
+      }
+    }
+  }
+  .size {
+    display: inline;
+    color: $wac-color-text-grey;
+    position: absolute;
+    right: 0;
+    top: -9px;
+    background: $wac-white;
+    padding-left: 0.875rem;
+    .is-success {
+      color: $wac-green-color;
+    }
+    .is-warning {
+      color: $wac-orange-color;
+    }
+    .is-danger {
+      color: $wac-primary-button;
+    }
+    > span {
+      font-size: rem(14) !important;
+      line-height: 1;
+      transform: translateY(-3px);
+      display: inline-block;
+      letter-spacing: 0;
+      strong {
+        letter-spacing: 0;
+        font-weight: 600;
+      }
+    }
+  }
+}
 .wac-radio {
   .is-checkradio[type='radio'] {
     outline: 0 !important;
@@ -5603,80 +5677,6 @@ wac-optional-disable-container {
     }
   }
 }
-.wac-progressBarContent {
-  position: relative;
-  width: 100%;
-  display: block;
-  .progressBar {
-    position: relative;
-    width: 88%;
-    margin-bottom: 1rem;
-    progress {
-      &.progress {
-        margin-bottom: 0;
-        height: rem(2);
-        &::-webkit-progress-value {
-          transition: width 0.5s ease;
-        }
-      }
-    }
-    span {
-      position: absolute;
-      top: -4px;
-      height: 11px;
-      width: 11px;
-      background-color: $wac-border-color;
-      border-radius: 50%;
-    }
-    .is-danger {
-      background-color: $wac-primary-button;
-      &::-webkit-progress-value {
-        background-color: $wac-primary-button;
-      }
-    }
-    .is-warning {
-      background-color: $wac-orange-color;
-      &::-webkit-progress-value {
-        background-color: $wac-orange-color;
-      }
-    }
-    .is-success {
-      background-color: $wac-green-color;
-      &::-webkit-progress-value {
-        background-color: $wac-green-color;
-      }
-    }
-  }
-  .size {
-    display: inline;
-    color: $wac-color-text-grey;
-    position: absolute;
-    right: 0;
-    top: -9px;
-    background: $wac-white;
-    padding-left: 0.875rem;
-    .is-success {
-      color: $wac-green-color;
-    }
-    .is-warning {
-      color: $wac-orange-color;
-    }
-    .is-danger {
-      color: $wac-primary-button;
-    }
-    > span {
-      font-size: rem(14) !important;
-      line-height: 1;
-      transform: translateY(-3px);
-      display: inline-block;
-      letter-spacing: 0;
-      strong {
-        letter-spacing: 0;
-        font-weight: 600;
-      }
-    }
-  }
-}
 .wac-row {
   display: flex;
   justify-content: space-between;
@@ -5705,16 +5705,98 @@ wac-optional-disable-container {
    */
   &.with-border {
     border: 1px solid $wac-border-form;
+    padding: 20px;
   }
 
+
+
   /*
-  * Class for position
+  * Class for position column
    */
 
   &.direction-column {
     flex-direction: column!important;
+    &.top-middle {
+      justify-content: flex-start;
+      align-items: center;
+      > * {
+        width: auto!important;
+      }
+    }
+    &.top-right {
+      justify-content: flex-start;
+      align-items: flex-end;
+      > * {
+        width: auto!important;
+      }
+    }
+    &.middle-left {
+      justify-content: center;
+      align-items: flex-start;
+      > * {
+        width: auto!important;
+      }
+    }
+    &.middle-right {
+      justify-content: center;
+      align-items: flex-end;
+      > * {
+        width: auto!important;
+      }
+    }
+    &.bottom-left {
+      justify-content: flex-end;
+      align-items: flex-start;
+      > * {
+        width: auto!important;
+      }
+    }
+    &.bottom-middle {
+      justify-content: flex-end;
+      align-items: center;
+      > * {
+        width: auto!important;
+      }
+    }
+    &.stretch-left {
+      justify-content: stretch;
+      align-items: flex-start;
+      > * {
+        width: auto!important;
+      }
+    }
+    &.stretch-middle {
+      justify-content: stretch;
+      align-items: center;
+      > * {
+        width: auto!important;
+      }
+    }
+    &.stretch-right {
+      justify-content: stretch;
+      align-items: flex-end;
+      > * {
+        width: auto!important;
+      }
+    }
+    > * {
+      &:not(:last-child) {
+        @include media('>=tablet') {
+          margin: 0 0 15px !important;
+        }
+      }
+      &:last-child {
+        @include media('>=tablet') {
+          margin: 0 !important;
+        }
+      }
+    }
   }
 
+  /*
+  * Class for position
+   */
+
   &.top-left {
     justify-content: flex-start;
     align-items: flex-start;
@@ -5902,6 +5984,7 @@ wac-optional-disable-container {
   }
   > * {
     width: 100%;
+    display: flex;
     &:not(:last-child) {
       @include media('<tablet') {
         margin: 0 0 15px!important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wizishop/angular-components",
-  "version": "15.1.36",
+  "version": "15.1.38",
   "peerDependencies": {
     "@angular/animations": "~15.0.2",
     "@angular/cdk": "^15.0.1",