@webitel/ui-sdk 25.4.37 → 25.4.39

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

@@ -75,7 +75,7 @@
     <!--         @slot custom content, between text and actions
                 @scope `{ size }`
      -->
-    <slot v-bind="{ size }"></slot>
+    <slot v-bind="{ size }" />
 
     <div
       v-if="showActions"
@@ -272,19 +272,19 @@ const onSecondaryClick = onClick('secondary');
 @use '@webitel/styleguide/typography' as *;
 
 .wt-empty {
-  box-sizing: border-box;
   display: flex;
-  align-items: center;
   flex-direction: column;
   flex-wrap: wrap;
   justify-content: center;
+  align-items: center;
+  gap: var(--spacing-md);
+  box-sizing: border-box;
+  margin: auto;
+  padding: var(--spacing-md);
   width: var(--wt-empty-width);
   min-width: var(--wt-empty-min-width);
   max-width: var(--wt-empty-max-width);
-  margin: auto;
-  padding: var(--spacing-md);
   text-align: center;
-  gap: var(--spacing-md);
 
   &__info {
     display: flex;
@@ -318,8 +318,8 @@ const onSecondaryClick = onClick('secondary');
 
   &--size {
     &-sm.wt-empty {
-      padding: var(--spacing-sm);
       gap: var(--spacing-sm);
+      padding: var(--spacing-sm);
 
       &__headline {
         @extend %typo-heading-4;
@@ -335,8 +335,8 @@ const onSecondaryClick = onClick('secondary');
     }
 
     &-md.wt-empty {
-      padding: var(--spacing-md);
       gap: var(--spacing-md);
+      padding: var(--spacing-md);
 
       &__headline {
         @extend %typo-heading-4;
@@ -352,8 +352,8 @@ const onSecondaryClick = onClick('secondary');
     }
 
     &-lg.wt-empty {
-      padding: var(--spacing-lg);
       gap: var(--spacing-lg);
+      padding: var(--spacing-lg);
 
       &__headline {
         @extend %typo-heading-4;

package/src/components/wt-error-page/wt-error-page.vue

@@ -73,17 +73,17 @@ export default {
 <style lang="scss" scoped>
 .wt-error-page {
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
   box-sizing: border-box;
+  background: var(--wt-error-page-background-color);
+  padding: 90px;
   min-width: 100vw;
   min-height: 100vh;
-  padding: 90px;
-  background: var(--wt-error-page-background-color);
 
   &__wrapper {
-    text-align: center;
     color: var(--wt-error-page-text-color);
+    text-align: center;
   }
 
   &__img {

package/src/components/wt-expansion-panel/wt-expansion-panel.vue

@@ -94,18 +94,18 @@ watch(
   .wt-expansion-panel-header {
     @extend %typo-subtitle-1;
     display: flex;
-    align-items: center;
     justify-content: space-between;
-    padding: var(--spacing-2xs) var(--spacing-xs);
+    align-items: center;
     cursor: pointer;
-    color: var(--wt-expansion-panel-header-title-color);
     border-radius: var(--spacing-2xs);
     background-color: var(--wt-expansion-panel-header-background-color);
+    padding: var(--spacing-2xs) var(--spacing-xs);
+    color: var(--wt-expansion-panel-header-title-color);
   }
 
   .wt-expansion-panel-body {
-    color: var(--wt-expansion-panel-content-text-color);
     background-color: var(--wt-expansion-panel-content-background-color);
+    color: var(--wt-expansion-panel-content-text-color);
   }
 
   .wt-expansion-panel-actions {

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

@@ -29,13 +29,13 @@ export default {
 
 .wt-headline {
   display: flex;
-  align-items: center;
   justify-content: space-between;
+  align-items: center;
+  gap: var(--headline-nav-gap);
   box-sizing: border-box;
-  min-height: var(--headline-min-height);
   border-radius: var(--border-radius);
   background: var(--wt-headline-background-color);
-  gap: var(--headline-nav-gap);
+  min-height: var(--headline-min-height);
 }
 
 .wt-headline__title {
@@ -44,8 +44,8 @@ export default {
 }
 
 .wt-headline__actions-wrapper {
-  position: relative;
   display: flex;
+  position: relative;
   align-items: center;
 }
 </style>

package/src/components/wt-headline-nav/wt-headline-nav.vue

@@ -54,8 +54,8 @@ const props = defineProps({
 .wt-headline-nav {
   display: flex;
   align-items: center;
-  max-width: 100%;
   gap: var(--headline-nav-gap);
+  max-width: 100%;
 }
 
 .wt-headline-nav__wrapper {
@@ -66,19 +66,19 @@ const props = defineProps({
 
 .wt-headline-nav__indicator {
   display: flex;
-  align-items: center;
   flex-shrink: 0;
   justify-content: center;
+  align-items: center;
   width: var(--icon-md-size);
   height: var(--icon-md-size);
 
   &:before {
     display: block;
+    border-radius: 50%;
+    background: var(--headline-nav-indicator-color);
     width: var(--headline-nav-indicator-size);
     height: var(--headline-nav-indicator-size);
     content: '';
-    border-radius: 50%;
-    background: var(--headline-nav-indicator-color);
   }
 }
 

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

@@ -68,17 +68,17 @@ const iconName = computed(() => {
 <style lang="scss" scoped>
 .wt-icon {
   display: inline-flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
   transition: var(--transition);
 }
 
 /*svg instead of .icon to override styles by .icon-icon-name-size without any other seelectors*/
 svg {
   display: block;
+  transition: var(--transition);
   width: 100%;
   height: 100%;
-  transition: var(--transition);
   stroke-width: 0;
   fill: var(--icon-color);
 }

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

@@ -49,7 +49,7 @@ const props = defineProps({
     type: String,
     default: 'md',
     required: false,
-  }
+  },
 });
 
 const emit = defineEmits(['click', 'mousedown']);

package/src/components/wt-icon-btn/wt-icon-btn.vue

@@ -33,8 +33,8 @@ const emit = defineEmits<{
 
 <style lang="scss" scoped>
 .wt-icon-btn {
-  position: relative;
   display: block;
+  position: relative;
   width: fit-content;
   line-height: 0;
 

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

@@ -114,8 +114,8 @@ const height = computed(() => {
 
 .wt-image {
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
 
   &__img {
     max-width: 100%;

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

@@ -90,11 +90,11 @@ export default {
 }
 
 .wt-indicator__indicator {
-  min-width: var(--wt-indicator-dot-size);
-  height: var(--wt-indicator-dot-size);
   margin: var(--wt-indicator-dot-offset);
   border-radius: 50%;
   background: var(--wt-indicator-disabled-color);
+  min-width: var(--wt-indicator-dot-size);
+  height: var(--wt-indicator-dot-size);
 
   &--primary {
     background: var(--wt-indicator-primary-color);

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

@@ -1,10 +1,10 @@
 <template>
   <div
+    class="wt-input"
     :class="{
       'wt-input--disabled': disabled,
       'wt-input--invalid': invalid,
     }"
-    class="wt-input"
   >
     <wt-label
       v-if="hasLabel"
@@ -32,9 +32,9 @@
         :max="numberMax"
         :min="numberMin"
         :placeholder="placeholder || label"
+        class="wt-input__input"
         :type="inputType"
         :value="inputValue"
-        class="wt-input__input"
         v-bind="$attrs"
         @input="inputHandler"
         @keyup="$emit('keyup', $event)"
@@ -300,21 +300,21 @@ defineExpose({
   @include wt-placeholder;
 
   display: block;
-  box-sizing: border-box;
-  width: 100%;
-  padding: var(--input-padding);
   transition: var(--transition);
-  color: var(--wt-text-field-text-color);
+  box-sizing: border-box;
   border: var(--input-border);
   border-color: var(--wt-text-field-input-border-color);
   border-radius: var(--border-radius);
   background: transparent;
+  padding: var(--input-padding);
+  width: 100%;
+  color: var(--wt-text-field-text-color);
 
   .wt-input--invalid &,
   .wt-input--invalid:hover & {
-    color: var(--wt-text-field-error-text-color);
-    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);
+    color: var(--wt-text-field-error-text-color);
     @include wt-placeholder('error');
   }
 
@@ -326,13 +326,13 @@ defineExpose({
 }
 
 .wt-input__after-wrapper {
+  display: flex;
   position: absolute;
   top: 50%;
   right: var(--input-icon-margin);
-  display: flex;
   align-items: center;
+  gap: var(--input-after-wrapper-gap);
   transform: translateY(-50%);
   pointer-events: auto; // override --disabled p-events none
-  gap: var(--input-after-wrapper-gap);
 }
 </style>

package/src/components/wt-input-info/wt-input-info.vue

@@ -30,8 +30,8 @@ export default {
 
 .wt-input-info {
   @extend %typo-caption;
-  min-height: var(--input-info-min-height);
   margin-top: var(--input-info-margin);
+  min-height: var(--input-info-min-height);
   color: var(--wt-helper-text-color);
 
   &--invalid {

package/src/components/wt-item-link/wt-item-link.vue

@@ -79,8 +79,8 @@ const to = computed(
   align-items: center;
 
   :not(&--invisible) {
-    cursor: pointer;
     transition: var(--transition);
+    cursor: pointer;
     color: var(--wt-item-link-text-color);
 
     &:hover {

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

@@ -43,8 +43,8 @@ export default {
 
   display: flex;
   align-items: center;
-  cursor: text;
   transition: var(--transition);
+  cursor: text;
   color: var(--wt-label-color);
   //padding: var(--wt-label-padding);
 

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

@@ -39,19 +39,19 @@ export default {
 .wt-load-bar {
   position: relative;
   box-sizing: border-box;
-  width: 100%;
-  padding: var(--load-bar-padding);
-  line-height: 0;
   border: 1px solid var(--wt-load-bar-progress-color);
   border-radius: var(--border-radius);
+  padding: var(--load-bar-padding);
+  width: 100%;
+  line-height: 0;
 }
 
 .wt-load-bar__progress {
   display: inline-block;
-  height: var(--load-bar-height);
   transition: var(--transition);
+  will-change: width;
   border-radius: var(--load-bar-border-radius);
   background: var(--wt-load-bar-progress-color);
-  will-change: width;
+  height: var(--load-bar-height);
 }
 </style>

package/src/components/wt-loader/_internals/wt-loader--md.vue

@@ -25,22 +25,22 @@ export default {};
 
 .wt-loader--md {
   position: relative;
+  margin: auto;
   width: var(--loader-size);
   height: var(--loader-size);
-  margin: auto;
 
   &:before {
+    display: block;
     position: absolute;
     top: 37px;
     left: 19px;
-    display: block;
-    width: var(--loader-dot-size);
-    height: var(--loader-dot-size);
-    content: '';
     transform: translate(-18px, -18px);
     animation: dotRect var(--loader-animation-duration) linear infinite;
     border-radius: 50%;
     background: var(--wt-loader-md-point-color);
+    width: var(--loader-dot-size);
+    height: var(--loader-dot-size);
+    content: '';
   }
 
   .wt-loader--md__svg {

package/src/components/wt-loader/_internals/wt-loader--sm.vue

@@ -33,9 +33,9 @@ export default {
   height: 24px;
 
   svg {
+    animation: rotate 1.5s linear infinite;
     width: 100%;
     height: 100%;
-    animation: rotate 1.5s linear infinite;
   }
 
   circle {

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

@@ -22,7 +22,9 @@ const props = defineProps({
     default: false,
   },
 });
-const href = computed(() => props.logoHref || import.meta.env.VITE_START_PAGE_URL);
+const href = computed(
+  () => props.logoHref || import.meta.env.VITE_START_PAGE_URL,
+);
 const logoSrc = props.darkMode ? LogoDark : LogoLight;
 
 const linkComponent = props.disabled
@@ -39,8 +41,15 @@ const linkAttrs = props.disabled
 </script>
 
 <template>
-  <component :is="linkComponent" v-bind="linkAttrs">
-    <img :src="logoSrc" alt="Webitel" class="wt-logo" />
+  <component
+    :is="linkComponent"
+    v-bind="linkAttrs"
+  >
+    <img
+      :src="logoSrc"
+      alt="Webitel"
+      class="wt-logo"
+    />
   </component>
 </template>
 
@@ -50,8 +59,8 @@ const linkAttrs = props.disabled
 
 <style lang="scss" scoped>
 .wt-logo {
+  display: block;
   width: var(--wt-logo-width);
   height: var(--wt-logo-height);
-  display: block;
 }
 </style>

package/src/components/wt-navigation-bar/types/WtNavigationBar.d.ts

@@ -1,18 +1,17 @@
 export interface WtNavigationBarExpansionNavItem {
-    subNav: WtNavigationBarNavItem[];
+  subNav: WtNavigationBarNavItem[];
 }
 
 export interface WtNavigationBarRouteNavItem {
-    route: string;
+  route: string;
 }
 
 export type WtNavigationBarNavItem = {
-    value: string;
+  value: string;
 
-    /**
-     * Represents nav item text in menu
-     * @default WtNavigationBarNavItem.value
-     */
-    name?: string;
+  /**
+   * Represents nav item text in menu
+   * @default WtNavigationBarNavItem.value
+   */
+  name?: string;
 } & (WtNavigationBarRouteNavItem | WtNavigationBarExpansionNavItem);
-

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

@@ -234,30 +234,30 @@ export default {
 .wt-navigation-bar__nav {
   @extend %wt-scrollbar;
   position: fixed;
-  z-index: var(--wt-navigation-bar-z-index);
   top: 0;
   bottom: 0;
   left: 0;
-  overflow: auto;
-  width: var(--wt-navigation-bar-width);
-  padding: var(--wt-navigation-bar-padding);
+  z-index: var(--wt-navigation-bar-z-index);
+  box-shadow: var(--elevation-10);
   border-radius: var(--border-radius);
   background: var(--wt-navigation-bar-background-color);
-  box-shadow: var(--elevation-10);
+  padding: var(--wt-navigation-bar-padding);
+  width: var(--wt-navigation-bar-width);
+  overflow: auto;
 
   // expand animation optimization
   * {
     transform: translateZ(0);
-    will-change: height;
-    backface-visibility: hidden;
     perspective: 1000px;
+    backface-visibility: hidden;
+    will-change: height;
   }
 }
 
 .wt-navigation-bar__nav-header {
   display: flex;
-  align-items: center;
   justify-content: space-between;
+  align-items: center;
   padding: var(--wt-navigation-bar-header-padding);
 }
 
@@ -269,8 +269,8 @@ export default {
 .wt-navigation-bar__nav-item-link {
   @extend %typo-body-1;
   display: block;
-  padding: var(--wt-navigation-bar-link-padding);
   transition: var(--transition);
+  padding: var(--wt-navigation-bar-link-padding);
   word-wrap: break-word;
   color: var(--wt-navigation-bar-option-text-color);
 
@@ -279,33 +279,33 @@ export default {
   }
 
   &.wt-navigation-bar__nav-item-link--active {
-    color: var(--wt-navigation-bar-option-text-active-color);
     background: var(--wt-navigation-bar-option-background-active-color);
+    color: var(--wt-navigation-bar-option-text-active-color);
   }
 }
 
 .wt-navigation-bar__nav-expansion {
   @extend %typo-subtitle-1;
-  position: relative;
   display: flex;
-  align-items: center;
+  position: relative;
   justify-content: space-between;
-  width: 100%;
+  align-items: center;
+  outline: none;
   padding: var(--wt-navigation-bar-link-padding);
+  width: 100%;
   color: var(--wt-navigation-bar-option-text-color);
-  outline: none;
 
   &:before {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
-    width: var(--wt-navigation-bar-active-expansion-flag-width);
-    content: '';
-    transition: var(--transition);
     opacity: 0;
+    transition: var(--transition);
     border-radius: var(--border-radius);
     background: var(--wt-navigation-bar-expansion-ribbon-color);
+    width: var(--wt-navigation-bar-active-expansion-flag-width);
+    content: '';
   }
 
   .wt-navigation-bar__expansion-arrow {

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

@@ -55,19 +55,19 @@ export default {
 
 .wt-notification {
   @extend %typo-body-1;
-  position: relative;
 
   display: flex;
+  position: relative;
   align-items: flex-start;
+  cursor: pointer;
+  box-shadow: var(--elevation-1);
+  border-radius: var(--border-radius);
+  background: var(--wt-notification-bg-color);
+  padding: var(--wt-notification-padding);
   width: fit-content;
   min-width: var(--wt-notification-min-width);
   max-width: var(--wt-notification-max-width);
-  padding: var(--wt-notification-padding);
-  cursor: pointer;
   color: var(--wt-notification-text-color);
-  border-radius: var(--border-radius);
-  background: var(--wt-notification-bg-color);
-  box-shadow: var(--elevation-1);
 }
 
 .wt-notification__icon {
@@ -76,8 +76,8 @@ export default {
 }
 
 .wt-notification__text {
-  align-self: center;
   flex-grow: 1;
+  align-self: center;
   margin: 0;
 }
 </style>

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

@@ -70,12 +70,12 @@ export default {
   @extend %wt-scrollbar;
 
   position: fixed;
-  z-index: var(--notifications-bar-z-index);
   top: var(--notifications-bar-corner-margin);
   right: var(--notifications-bar-corner-margin);
+  z-index: var(--notifications-bar-z-index);
+  max-height: var(--notifications-bar-max-height);
   overflow-x: hidden;
   overflow-y: auto;
-  max-height: var(--notifications-bar-max-height);
 
   .wt-notification {
     margin: var(--notifications-bar-notifications-margin);

package/src/components/wt-page-wrapper/wt-page-wrapper.vue

@@ -35,21 +35,21 @@ export default {
 .wt-page-wrapper {
   display: flex;
   flex-direction: column;
+  gap: var(--page-wrapper-section-gap);
   box-sizing: border-box;
+  background: var(--wt-page-wrapper-background-color);
+  padding: var(--page-wrapper-padding);
   max-width: 100%;
   min-height: 100%;
-  padding: var(--page-wrapper-padding);
-  background: var(--wt-page-wrapper-background-color);
-  gap: var(--page-wrapper-section-gap);
 }
 
 .wt-page-wrapper__header,
 .wt-page-wrapper__actions-panel,
 .wt-page-wrapper__main {
   box-sizing: border-box;
-  padding: var(--page-wrapper-section-padding);
   border-radius: var(--border-radius);
   background: var(--wt-page-wrapper-content-wrapper-color);
+  padding: var(--page-wrapper-section-padding);
 }
 
 .wt-page-wrapper__main {

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

@@ -201,9 +201,9 @@ export default {
   }
 
   :deep(.plyr) {
-    max-width: 100%; // prevents <video> container overflow
-    border-radius: var(--border-radius);
     box-shadow: var(--elevation-10);
+    border-radius: var(--border-radius);
+    max-width: 100%; // prevents <video> container overflow
 
     .plyr__controls > .plyr__control,
     .plyr__controls > .plyr__controls__item > .plyr__control {
@@ -229,11 +229,11 @@ export default {
       cursor: pointer;
 
       &::-webkit-slider-thumb {
+        -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;
       }
 
       &::-webkit-slider-runnable-track {
@@ -241,14 +241,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 {