@webitel/ui-sdk 24.12.37 → 24.12.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.12.37",
+  "version": "24.12.38",
   "private": false,
   "scripts": {
     "dev": "vite",
@@ -110,6 +110,7 @@
     "@vuelidate/validators": "^2.0.4",
     "@vuepic/vue-datepicker": "^4.5.1",
     "@vueuse/components": "^11.2.0",
+    "@webitel/styleguide": "^24.12.18",
     "autosize": "^6.0.1",
     "axios": "^1.7.7",
     "clipboard-copy": "^4.0.1",

package/src/components/on-demand/wt-navigation-menu/components/_internals/nav-menu-lvl-1.vue

@@ -51,7 +51,7 @@ function select(category) {
 </script>
 
 <style lang="scss" scoped>
-@import '../../css/nav-menu';
+@use '../../css/nav-menu';
 
 .nav-menu__item {
   &--active {

package/src/components/on-demand/wt-navigation-menu/components/_internals/nav-menu-lvl-2.vue

@@ -28,7 +28,7 @@ const props = defineProps({
 </script>
 
 <style lang="scss" scoped>
-@import '../../css/nav-menu';
+@use '../../css/nav-menu';
 
 .nav-menu-lvl-2 {
   @extend %wt-scrollbar;

package/src/components/on-demand/wt-navigation-menu/components/wt-navigation-menu.vue

@@ -21,7 +21,8 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { computed, onMounted, ref } from 'vue';
+
 import NavMenuLvl1 from './_internals/nav-menu-lvl-1.vue';
 import NavMenuLvl2 from './_internals/nav-menu-lvl-2.vue';
 
@@ -81,8 +82,7 @@ function select(category) {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../../css/main.scss';
-@import '../../../../css/styleguide/viewport-breakpoints/_viewport-breakpoints.scss';
+@use '../../../../css/main' as *;
 .wt-navigation-menu {
   display: flex;
   align-items: center;

package/src/components/on-demand/wt-navigation-menu/css/_nav-menu.scss

@@ -1,4 +1,4 @@
-@import '../../../../css/main.scss';
+@use '../../../../css/main' as *;
 
 .nav-menu {
   &__category {

package/src/components/on-demand/wt-selection-popup/wt-selection-popup.vue

@@ -118,7 +118,7 @@ function selectOption(option) {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../css/main.scss';
+@use '../../../css/main.scss';
 
 .wt-selection-popup {
   &__options {

package/src/components/on-demand/wt-start-page/components/start-page-card.vue

@@ -47,7 +47,8 @@ const open = () => {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../../css/main.scss';
+@use '../../../../css/main.scss';
+
 .start-page-card {
   display: flex;
   flex-direction: column;

package/src/components/wt-app-header/wt-app-header.vue

@@ -7,7 +7,7 @@
 <script setup></script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>

package/src/components/wt-app-header/wt-app-navigator.vue

@@ -54,8 +54,8 @@
 
 <script setup>
 import { computed, ref } from 'vue';
-import WebitelApplications from '../../enums/WebitelApplications/WebitelApplications.enum.js';
 
+import WebitelApplications from '../../enums/WebitelApplications/WebitelApplications.enum.js';
 import AdminDark from './assets/admin-dark.svg';
 import AdminLight from './assets/admin-light.svg';
 import AgentDark from './assets/agent-dark.svg';
@@ -150,7 +150,7 @@ function close() {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main.scss';
 
 .wt-app-navigator {
   position: relative;

package/src/components/wt-app-header/wt-header-actions.vue

@@ -131,7 +131,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main.scss';
 
 .wt-header-actions {
   position: relative;

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

@@ -121,7 +121,7 @@ const badgeColorVar = computed(() => {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>

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

@@ -53,7 +53,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>

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

@@ -113,11 +113,11 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main.scss';
 
 .wt-button {
   @extend %typo-button;

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

@@ -96,7 +96,7 @@ const atClickaway = () => {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>

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

@@ -106,7 +106,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>

package/src/components/wt-chip/wt-chip.scss

@@ -1,4 +1,4 @@
-@import '../../../src/css/main.scss';
+@use '../../css/main' as *;
 
 .wt-chip {
   @extend %typo-body-2;

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

@@ -24,6 +24,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import './wt-chip.scss';
-@import './variables.scss';
+@use './variables.scss';
+@use './wt-chip.scss';
 </style>

package/src/components/wt-context-menu/wt-context-menu.vue

@@ -82,11 +82,11 @@ function handleOptionClick({ option, index, hide }) {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main.scss';
 
 .wt-context-menu {
   line-height: 0;

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

@@ -74,8 +74,9 @@
 </template>
 
 <script setup>
-import VueDatepicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
+
+import VueDatepicker from '@vuepic/vue-datepicker';
 import { computed, ref } from 'vue';
 
 const props = defineProps({
@@ -145,11 +146,11 @@ const requiredLabel = computed(() => {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main.scss';
 
 .wt-datepicker :deep(.dp__main) {
   .dp__input_icon {

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

@@ -18,7 +18,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>

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

@@ -31,7 +31,8 @@
 </template>
 
 <script setup>
-import { computed, ref, defineEmits } from 'vue';
+import { computed, defineEmits, ref } from 'vue';
+
 import IconAction from '../../enums/IconAction/IconAction.enum.js';
 import { ComponentSize } from '../../enums/index.js';
 
@@ -61,11 +62,11 @@ const sidePanelSize = computed(() =>
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main.scss';
 $side-panel-md-width: 320px;
 
 .wt-dual-panel {

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

@@ -25,6 +25,7 @@
 
 <script setup>
 import { computed } from 'vue';
+
 import dummyDark from '../../assets/components/molecules/wt-dummy/dummyDark.svg';
 import dummyLight from '../../assets/components/molecules/wt-dummy/dummyLight.svg';
 
@@ -62,11 +63,11 @@ const dummy = computed(() => (props.darkMode ? dummyDark : dummyLight));
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main.scss';
 
 .wt-dummy {
   display: flex;

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

@@ -130,6 +130,7 @@
 // based on https://vuetifyjs.com/en/components/empty-states/
 
 import { computed, useSlots } from 'vue';
+
 import ComponentSize from '../../enums/ComponentSize/ComponentSize.enum.js';
 import { greaterOrEqual, smallerOrEqual } from '../../scripts/compareSize.ts';
 import WtImage from '../wt-image/wt-image.vue';
@@ -246,11 +247,11 @@ const onSecondaryClick = onClick('secondary');
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main.scss';
 
 .wt-empty {
   display: flex;

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

@@ -10,7 +10,7 @@
       @keypress.enter="toggle"
     >
       <slot name="title" />
-      <div  class="wt-expansion-panel-actions">
+      <div class="wt-expansion-panel-actions">
         <slot
           name="actions"
           v-bind="{ open, opened }"
@@ -32,6 +32,7 @@
 
 <script setup>
 import { ref, watch } from 'vue';
+
 import WtExpandTransition from '../transitions/wt-expand-transition.vue';
 
 const props = defineProps({
@@ -80,11 +81,11 @@ watch(
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main.scss';
 
 .wt-expansion-panel {
   display: flex;

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

@@ -21,11 +21,11 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main.scss';
 
 .wt-headline {
   display: flex;

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

@@ -45,11 +45,11 @@ const props = defineProps({
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main.scss';
 
 .wt-headline-nav {
   display: flex;

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

@@ -62,7 +62,7 @@ const iconName = computed(() => {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>

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

@@ -28,7 +28,7 @@ const emit = defineEmits<{
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>

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

@@ -110,7 +110,7 @@ const height = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main.scss';
 
 .wt-image {
   display: flex;

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

@@ -72,11 +72,11 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main.scss';
 
 .wt-indicator {
   display: flex;

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

@@ -71,6 +71,7 @@
 
 <script setup>
 import { computed, onMounted, ref, toRefs, useSlots } from 'vue';
+
 import { useValidation } from '../../mixins/validationMixin/useValidation.js';
 
 /*
@@ -276,11 +277,11 @@ defineExpose({
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main' as *;
 
 .wt-input {
   cursor: text;
@@ -311,16 +312,16 @@ defineExpose({
 
   .wt-input--invalid &,
   .wt-input--invalid:hover & {
-    @include wt-placeholder('error');
     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
+    @include wt-placeholder('error');
   }
 
   .wt-input--disabled & {
-    @include wt-placeholder('disabled');
     border-color: var(--wt-text-field-input-border-disabled-color);
     background: var(--wt-text-field-input-background-disabled-color);
+    @include wt-placeholder('disabled');
   }
 }
 

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

@@ -22,11 +22,11 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main.scss';
 
 .wt-input-info {
   @extend %typo-caption;

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

@@ -70,7 +70,7 @@ const to = computed(
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>

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

@@ -32,11 +32,11 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main.scss';
 
 .wt-label {
   @extend %typo-body-1;

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

@@ -32,7 +32,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>

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

@@ -21,6 +21,8 @@ export default {};
 
 <style lang="scss" scoped>
 // https://codepen.io/aaroniker/pen/omvYNZ
+@use "sass:math";
+
 .wt-loader--md {
   position: relative;
   width: var(--loader-size);
@@ -53,7 +55,7 @@ export default {};
       stroke-width: 10px;
       stroke-linejoin: round;
       stroke-linecap: round;
-      stroke-dasharray: (256 / 4 * 3) (256 / 4) (256 / 4 * 3) (256 / 4);
+      stroke-dasharray:  math.div(256, 4) * 3 math.div(256, 4) math.div(256, 4) * 3 math.div(256, 4);
       stroke-dashoffset: 0;
     }
   }

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

@@ -36,7 +36,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped></style>

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

@@ -19,7 +19,7 @@ const props = defineProps({
 </template>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>

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

@@ -209,11 +209,11 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main.scss';
 
 .wt-navigation-bar__menu-btn {
   display: block;

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

@@ -47,11 +47,11 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main.scss';
 
 .wt-notification {
   @extend %typo-body-1;

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

@@ -60,11 +60,11 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main.scss';
 
 .wt-notifications-bar {
   @extend %wt-scrollbar;

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

@@ -28,7 +28,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>

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

@@ -107,11 +107,11 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main.scss';
 
 .wt-pagination {
   @extend %typo-body-1;

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

@@ -26,7 +26,7 @@
 
 <script>
 // import Plyr from 'plyr'; // breaks vitepress build, https://webitel.atlassian.net/browse/WTEL-5425?focusedCommentId=639144
-import 'plyr/src/sass/plyr.scss';
+// import 'plyr/src/sass/plyr.scss';
 
 export default {
   name: 'WtPlayer',
@@ -174,11 +174,11 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main' as *;
 
 .wt-player {
   @extend %typo-body-2;