@webitel/ui-sdk 25.4.37 → 25.4.39

package/src/components/wt-popup/wt-popup.vue

@@ -176,15 +176,15 @@ watch(wrapperShown, (value) => {
 @use '@webitel/styleguide/scroll' as *;
 
 .wt-popup {
+  display: flex;
   position: fixed;
-  z-index: var(--popup-wrapper-z-index);
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
+  z-index: var(--popup-wrapper-z-index);
   background: var(--wt-popup-shadow-color);
 
   &--size {
@@ -215,29 +215,29 @@ watch(wrapperShown, (value) => {
 }
 
 .wt-popup__popup {
-  z-index: 1;
   display: flex;
   flex-direction: column;
-  max-height: var(--popup-max-height);
+  gap: var(--popup-sections-gap);
+  z-index: 1;
   margin: var(--popup-padding);
-  padding: var(--popup-padding);
+  box-shadow: var(--elevation-10);
   border-radius: var(--border-radius);
   background: var(--wt-popup-background-color);
-  box-shadow: var(--elevation-10);
-  gap: var(--popup-sections-gap);
+  padding: var(--popup-padding);
+  max-height: var(--popup-max-height);
 }
 
 .wt-popup__header {
   @extend %typo-subtitle-1;
-  position: relative;
   display: flex;
-  align-items: center;
+  position: relative;
   justify-content: space-between;
-  padding: var(--popup-header-padding);
-  color: var(--wt-popup-header-text-color);
+  align-items: center;
+  gap: var(--popup-header-padding);
   border-radius: var(--border-radius);
   background: var(--wt-popup-header-background-color);
-  gap: var(--popup-header-padding);
+  padding: var(--popup-header-padding);
+  color: var(--wt-popup-header-text-color);
 
   .wt-popup__title {
     flex-grow: 1;
@@ -252,18 +252,18 @@ watch(wrapperShown, (value) => {
 .wt-popup__main {
   @extend %wt-scrollbar;
   @extend %typo-body-1;
-  overflow-y: auto;
   flex-grow: 1;
-  min-height: 0;
   padding-right: var(--popup-main-section-padding-right);
+  min-height: 0;
+  overflow-y: auto;
 }
 
 .wt-popup__actions {
   display: flex;
-  align-items: center;
   justify-content: center;
-  padding: var(--popup-actions-padding);
+  align-items: center;
   gap: var(--popup-actions-padding);
+  padding: var(--popup-actions-padding);
 }
 
 .wt-popup--overflow {
@@ -272,8 +272,8 @@ watch(wrapperShown, (value) => {
   }
 
   .wt-popup__main {
-    overflow: visible;
     padding-right: 0;
+    overflow: visible;
   }
 }
 </style>

package/src/components/wt-progress-bar/wt-progress-bar.vue

@@ -55,22 +55,22 @@ export default {
 .wt-progress-bar {
   position: relative;
   box-sizing: border-box;
-  width: 100%;
-  padding: var(--wt-progress-bar-padding);
-  line-height: 0;
+  box-shadow: var(--elevation-1);
   border-radius: var(--border-radius);
   background: var(--wt-progress-bar-background-color);
-  box-shadow: var(--elevation-1);
+  padding: var(--wt-progress-bar-padding);
+  width: 100%;
+  line-height: 0;
 }
 
 .wt-progress-bar__progress {
   display: inline-block;
-  height: var(--wt-progress-bar-height);
   transition: var(--transition);
+  will-change: width;
   border-radius: var(--wt-progress-bar-border-radius) 0 0
     var(--wt-progress-bar-border-radius);
   background: var(--wt-progress-bar-background-primary-color);
-  will-change: width;
+  height: var(--wt-progress-bar-height);
 }
 
 .wt-progress-bar--primary .wt-progress-bar__progress {

package/src/components/wt-radio/wt-radio.vue

@@ -104,25 +104,25 @@ export default {
 }
 
 .wt-radio__wrapper {
-  position: relative;
   display: flex;
+  position: relative;
   align-items: center;
   cursor: pointer;
   user-select: none;
 }
 
 .wt-radio__label {
-  margin-left: var(--radio-icon-margin);
   transition: var(--transition);
+  margin-left: var(--radio-icon-margin);
 }
 
 /* Hide the browser's default radio button */
 .wt-radio__input {
   position: absolute;
+  opacity: 0;
   width: 0;
   height: 0;
   pointer-events: none;
-  opacity: 0;
 }
 
 .wt-radio__icon {

package/src/components/wt-rounded-action/wt-rounded-action.vue

@@ -92,14 +92,14 @@ const iColor = computed(() => {
 <style lang="scss" scoped>
 .wt-rounded-action {
   display: block;
-  width: fit-content;
-  padding: var(--rounded-action-padding);
   transition: var(--transition);
-  line-height: 0;
   border: var(--rounded-action-border-size) solid;
   border-color: var(--rounded-action-bg-color);
   border-radius: var(--border-radius);
   background: var(--rounded-action-bg-color);
+  padding: var(--rounded-action-padding);
+  width: fit-content;
+  line-height: 0;
 
   &:hover {
     border-color: var(--rounded-action-bg-hover-color);

package/src/components/wt-search-bar/wt-search-bar.vue

@@ -174,8 +174,8 @@ function updateSearchMode({ option }) {
 
   &.wt-search-bar--invalid {
     .wt-search-bar__wrapper {
-      border-color: var(--wt-text-field-input-border-error-color);
       outline: none; // prevent outline overlapping false color
+      border-color: var(--wt-text-field-input-border-error-color);
     }
 
     .wt-search-bar__input {
@@ -187,11 +187,11 @@ function updateSearchMode({ option }) {
   .wt-search-bar__wrapper {
     display: flex;
     align-items: center;
-    padding: calc(var(--spacing-xs) - 1px) var(--spacing-xs);
+    gap: var(--spacing-xs);
     border: var(--input-border);
     border-color: var(--wt-text-field-input-border-color);
     border-radius: var(--border-radius);
-    gap: var(--spacing-xs);
+    padding: calc(var(--spacing-xs) - 1px) var(--spacing-xs);
   }
 
   .wt-search-bar__search-icon {
@@ -200,8 +200,8 @@ function updateSearchMode({ option }) {
 
   .wt-search-bar__reset-icon-btn {
     .wt-search-bar:not(:focus-within) & {
-      pointer-events: none;
       opacity: 0;
+      pointer-events: none;
     }
   }
 
@@ -210,14 +210,14 @@ function updateSearchMode({ option }) {
     @include wt-placeholder;
 
     display: block;
-    box-sizing: border-box;
-    width: 100%;
-    padding: 0;
     transition: var(--transition);
-    color: var(--wt-text-field-text-color);
-    border: none;
+    box-sizing: border-box;
     outline: none;
+    border: none;
     background: transparent;
+    padding: 0;
+    width: 100%;
+    color: var(--wt-text-field-text-color);
   }
 
   /* clears the 'X' from Internet Explorer */

package/src/components/wt-select/_multiselect.scss

@@ -8,11 +8,11 @@
     position: absolute;
     top: var(--select-icon-top-pos);
     right: var(--select-caret-right-pos);
-    width: fit-content; // reset default
-    height: fit-content; // reset default
-    padding: 0; // reset default
     transition: var(--transition);
     background: transparent;
+    padding: 0; // reset default
+    width: fit-content; // reset default
+    height: fit-content; // reset default
 
     &:before {
       display: none; // reset default
@@ -26,17 +26,17 @@
 
   .multiselect__clear {
     position: absolute;
-    z-index: 1;
     top: var(--select-icon-top-pos);
+    z-index: 1;
   }
 
   // visible select input wrapper
   .multiselect__tags {
-    padding: calc(var(--spacing-xs) - 1px); // borders
     border: var(--select-tags-border);
     border-color: var(--wt-text-field-input-border-color);
     border-radius: var(--border-radius);
     background: transparent;
+    padding: calc(var(--spacing-xs) - 1px); // borders
   }
 
   .multiselect__input,
@@ -45,9 +45,9 @@
     @extend %typo-body-1;
     @include wt-placeholder;
     margin: 0; // reset default
+    background: transparent;
     padding: 0; // reset default
     color: var(--wt-text-field-text-color);
-    background: transparent;
   }
 
   .multiselect__custom-tag,
@@ -58,46 +58,46 @@
   .multiselect__placeholder {
     @extend %wt-placeholder;
     display: block;
-    overflow: hidden;
     max-width: 100%;
+    overflow: hidden;
     color: var(--wt-text-field-placeholder-color);
+    text-overflow: ellipsis;
 
     // text overflow 3 dots
     white-space: nowrap;
-    text-overflow: ellipsis;
   }
 
   // select options wrapper
   .multiselect__content-wrapper {
     @extend %wt-distant-scrollbar;
     transition: var(--transition);
+    box-shadow: var(--elevation-10);
     border: var(--select-tags-border);
     border-color: var(--wt-text-field-select-option-wrapper-border-color);
     border-radius: var(--border-radius);
     background: transparent;
-    box-shadow: var(--elevation-10);
   }
 
   // select options
   .multiselect__option {
     @extend %typo-body-1;
+    background: var(--wt-text-field-select-option-background-color);
     padding: var(--select-options-padding);
     color: var(--wt-text-field-select-option-text-color);
-    background: var(--wt-text-field-select-option-background-color);
 
     &:after {
       display: none;
     }
 
     &--highlight {
-      color: var(--wt-text-field-select-option-text-hover-color);
       background: var(--wt-text-field-select-option-background-hover-color);
+      color: var(--wt-text-field-select-option-text-hover-color);
     }
 
     &--selected {
-      font-weight: normal; // reset
-      color: var(--wt-text-field-select-option-text-selected-color);
       background: var(--wt-text-field-select-option-background-selected-color);
+      color: var(--wt-text-field-select-option-text-selected-color);
+      font-weight: normal; // reset
     }
   }
 }
@@ -120,16 +120,16 @@
     }
 
     .multiselect__loading-wrapper {
+      display: flex;
       position: sticky;
-      z-index: 1;
       top: 0;
       left: 0;
-      display: flex;
-      align-items: center;
       justify-content: center;
+      align-items: center;
+      z-index: 1;
+      backdrop-filter: blur(4px);
       width: 100%;
       height: 300px; // max dropdown panel height
-      backdrop-filter: blur(4px);
     }
   }
 }
@@ -138,8 +138,8 @@
 .wt-tags-input.wt-tags-input--invalid {
   :deep(.multiselect) {
     .multiselect__tags {
-      border-color: var(--wt-text-field-input-border-error-color);
       outline: none; // prevent outline overlapping false color
+      border-color: var(--wt-text-field-input-border-error-color);
     }
 
     .multiselect__custom-tag,

package/src/components/wt-select/wt-select.vue

@@ -52,7 +52,7 @@
         v-if="!isOpened"
         #limit
       >
-        <wt-chip class="multiselect__limit"> +{{ value.length - 1 }}</wt-chip>
+        <wt-chip class="multiselect__limit"> +{{ value.length - 1 }} </wt-chip>
       </template>
 
       <!--      Slot that is used for all selected options (tags)-->
@@ -304,10 +304,10 @@ export default {
   .multiselect__single-label {
     // text overflow 3 dots
     display: block;
-    overflow: hidden;
     max-width: 100%;
-    white-space: nowrap;
+    overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
 

package/src/components/wt-slider/wt-slider.vue

@@ -111,24 +111,24 @@ export default {
 }
 
 .wt-slider__slider {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  cursor: pointer;
   box-sizing: border-box;
-  width: var(--wt-slider-width);
-  height: var(--wt-slider-input-height);
   margin: 0;
-  cursor: pointer;
   border: var(--wt-slider-border);
   border-radius: var(--border-radius);
-  -webkit-appearance: none;
-  -moz-appearance: none;
+  width: var(--wt-slider-width);
+  height: var(--wt-slider-input-height);
 
   &::-webkit-slider-thumb {
-    width: var(--wt-slider-pointer-size);
-    height: var(--wt-slider-pointer-size);
+    -webkit-appearance: none;
     transition: var(--transition);
     border: var(--wt-slider-border);
     border-radius: var(--wt-slider-pointer-radius);
     background: var(--wt-slider-pointer-background-color);
-    -webkit-appearance: none;
+    width: var(--wt-slider-pointer-size);
+    height: var(--wt-slider-pointer-size);
   }
 
   &::-webkit-slider-runnable-track {
@@ -136,14 +136,14 @@ export default {
   }
 
   &::-moz-range-thumb {
-    width: var(--wt-slider-pointer-size);
-    height: var(--wt-slider-pointer-size);
+    -moz-appearance: none;
     transition: var(--transition);
     border: var(--wt-slider-border);
     border-color: var(--wt-slider-pointer-border-color);
     border-radius: var(--wt-slider-pointer-radius);
     background: var(--wt-slider-pointer-background-color);
-    -moz-appearance: none;
+    width: var(--wt-slider-pointer-size);
+    height: var(--wt-slider-pointer-size);
   }
 
   &::-moz-range-track {
@@ -186,8 +186,8 @@ export default {
 }
 
 .wt-slider--vertical {
-  width: var(--wt-slider-height);
   transform: var(--wt-slider-vertical-container-translation);
+  width: var(--wt-slider-height);
 
   .wt-slider__wrapper {
     transform: var(--wt-slider-vertical-transform);

package/src/components/wt-status-select/wt-status-select.vue

@@ -115,10 +115,10 @@ export default {
     min-height: 0;
 
     .multiselect__tags {
-      min-height: 0;
-      padding: var(--wt-status-select-padding);
       border: none;
       background: var(--wt-status-select-background-color);
+      padding: var(--wt-status-select-padding);
+      min-height: 0;
     }
 
     .multiselect__select {
@@ -131,10 +131,10 @@ export default {
       background: transparent;
 
       .multiselect__option {
-        min-height: 0;
+        background: var(--wt-status-select-option-background-color);
         padding: 0;
+        min-height: 0;
         color: var(--wt-status-select-option-text-color);
-        background: var(--wt-status-select-option-background-color);
       }
 
       .multiselect__option--highlight {

package/src/components/wt-stepper/wt-stepper.vue

@@ -67,8 +67,8 @@ const stepWithCompleted = computed(() =>
 .wt-stepper-header {
   display: flex;
   flex-direction: column;
-  margin-bottom: var(--spacing-lg);
   gap: var(--spacing-lg);
+  margin-bottom: var(--spacing-lg);
 }
 
 .wt-stepper-steps {
@@ -81,8 +81,8 @@ const stepWithCompleted = computed(() =>
 
   &__divider {
     flex: 1 1 auto;
-    height: 1px;
     background: var(--wt-stepper-divider-background-color);
+    height: 1px;
 
     &--completed {
       background-color: var(--wt-stepper-divider-background-completed-color);

package/src/components/wt-switcher/wt-switcher.vue

@@ -91,8 +91,8 @@ export default {
 }
 
 .wt-switcher__wrapper {
-  position: relative;
   display: flex;
+  position: relative;
   align-items: center;
   cursor: pointer;
   user-select: none;
@@ -103,8 +103,8 @@ export default {
 }
 
 .wt-switcher__label {
-  margin-left: var(--switcher-icon-margin);
   transition: var(--transition);
+  margin-left: var(--switcher-icon-margin);
 
   .wt-switcher__wrapper--label-left & {
     margin-right: var(--switcher-icon-margin);
@@ -114,30 +114,30 @@ export default {
 
 .wt-switcher__input {
   position: absolute;
+  opacity: 0;
   width: 0;
   height: 0;
   pointer-events: none;
-  opacity: 0;
 }
 
 .wt-switcher__checkmark {
-  position: relative;
   display: block;
+  position: relative;
   flex: 0 0 var(--switcher-width);
-  width: var(--switcher-width);
-  height: var(--switcher-height);
   transition: var(--transition);
   border-radius: var(--switcher-border-radius);
+  width: var(--switcher-width);
+  height: var(--switcher-height);
 
   &:before {
     position: absolute;
     bottom: var(--switcher-cicle-margin);
     left: var(--switcher-cicle-margin);
+    transition: var(--transition);
+    border-radius: 50%;
     width: var(--switcher-cicle-size);
     height: var(--switcher-cicle-size);
     content: '';
-    transition: var(--transition);
-    border-radius: 50%;
   }
 }
 

package/src/components/wt-table/wt-table.vue

@@ -326,8 +326,8 @@ export default {
 }
 
 .wt-table__table {
-  width: 100%;
   border-collapse: collapse;
+  width: 100%;
 
   &--fixed-actions {
     // make action icons fixed to right
@@ -350,10 +350,10 @@ export default {
 
 .wt-table__tr {
   display: grid;
-  padding: var(--table-row-padding);
+  grid-template-columns: repeat(auto-fit, var(--table-col-min-width));
   transition: var(--transition);
   background: var(--wt-table-primary-color);
-  grid-template-columns: repeat(auto-fit, var(--table-col-min-width));
+  padding: var(--table-row-padding);
   grid-column-gap: var(--table-column-gap);
 
   &:nth-child(2n) {
@@ -373,18 +373,18 @@ export default {
   @extend %typo-body-1;
   display: flex;
   align-items: center;
+  padding: 0;
   width: 100%;
   max-width: 100%;
   height: fit-content;
   min-height: var(--table-min-height);
-  padding: 0;
   word-break: break-all;
   overflow-wrap: break-word;
 
   &__actions {
     display: flex;
-    align-items: flex-start;
     justify-content: flex-end;
+    align-items: flex-start;
     gap: var(--spacing-xs);
   }
 }

package/src/components/wt-table-actions/wt-table-actions.vue

@@ -103,7 +103,7 @@ export default {
 .wt-table-actions {
   display: flex;
   align-items: center;
-  padding: var(--table-actions-padding);
   gap: var(--table-actions-icon-gap);
+  padding: var(--table-actions-padding);
 }
 </style>

package/src/components/wt-table-column-select/wt-table-column-select.vue

@@ -157,26 +157,26 @@ $list-width-md: calc(
   &__popup-list {
     @extend %wt-scrollbar;
     display: flex;
-    overflow-x: hidden;
     flex-direction: column;
     flex-wrap: wrap;
     width: $list-width-sm;
     max-height: $list-height;
+    overflow-x: hidden;
 
     // for 10-30 items
     &--md {
       display: block;
-      width: $list-width-md;
       column-count: 2;
+      width: $list-width-md;
     }
 
     // for 30+ items
     &--lg {
       display: block;
-      overflow-y: auto;
+      column-count: 3;
       width: $list-width-md;
       max-height: none;
-      column-count: 3;
+      overflow-y: auto;
     }
   }
 

package/src/components/wt-tabs/wt-tabs.vue

@@ -90,8 +90,8 @@ export default {
 @use '@webitel/styleguide/typography' as *;
 
 .wt-tabs {
-  position: relative;
   display: flex;
+  position: relative;
   flex-wrap: nowrap;
   gap: var(--tab-gap);
 
@@ -105,36 +105,36 @@ export default {
 
 .wt-tab {
   @extend %typo-body-1;
+  display: inline-block;
   position: relative;
   z-index: var(--tab-z-index);
-  display: inline-block;
-  padding-bottom: var(--tab-padding);
-  cursor: pointer;
   transition: var(--transition);
-  color: var(--wt-tabs-text-color);
+  cursor: pointer;
+  outline: none;
   border: none;
   border-bottom: var(--tab-border);
   border-bottom-color: transparent;
-  outline: none;
   background: transparent;
+  padding-bottom: var(--tab-padding);
+  color: var(--wt-tabs-text-color);
 
   &:hover,
   &:focus {
-    color: var(--wt-tabs-text-hover-color);
     border-bottom-color: var(--wt-tabs-underline-active-color);
+    color: var(--wt-tabs-text-hover-color);
   }
 
   &.wt-tab--highlight {
-    color: var(--wt-tabs-text-active-color);
     border-bottom-color: var(--wt-tabs-underline-active-color);
+    color: var(--wt-tabs-text-active-color);
   }
 
   //// disables bold font resize on hover
   &:after {
     display: block;
     visibility: hidden;
-    overflow: hidden;
     height: 0;
+    overflow: hidden;
     content: attr(value);
     font-weight: bold;
   }