@webitel/ui-sdk 0.8.61 → 0.8.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "0.8.61",
+  "version": "0.8.65",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

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

@@ -10,7 +10,7 @@ To achieve correct slider height we:
  2. Set the new slider width (which is now positioned from bottom to top) using fixed number of pixels, received with props.
  3. Set the container element height to 100% so it is always calculated correctly depending on it`s child dimensions.
 
-Untill there are no possibility to style input range and position it vertically, we are rotating our slider with css
+Until there are no possibility to style input range and position it vertically, we are rotating our slider with css
 and swapping height/width of this component in order to have the correct output.
 -->
 
@@ -18,22 +18,28 @@ and swapping height/width of this component in order to have the correct output.
   <div
     class="wt-slider"
     :class="{
-    'wt-slider--disabled': disabled,
-    'wt-slider--vertical': vertical,
-    }"
-    :style="{ width: verticalHeight }"
-  > <!-- The row above is needed in order to set correct component width when slider is vertical -->
-    <input
-      type="range"
-      class="wt-slider__slider"
-      :style="{ background: progressStyle }"
-      :min="min"
-      :max="max"
-      :step="step"
-      :value="value"
-      :disabled="disabled"
-      @input="inputHandler"
-    />
+        'wt-slider--disabled': disabled,
+        'wt-slider--vertical': vertical,
+      }"
+    :style="{ height: verticalHeight }"
+  >
+    <div
+      class="wt-slider__wrapper"
+      :style="{ width: verticalHeight }"
+    >
+      <!-- The row above is needed in order to set correct component width when slider is vertical -->
+      <input
+        type="range"
+        class="wt-slider__slider"
+        :style="{ background: progressStyle }"
+        :min="min"
+        :max="max"
+        :step="step"
+        :value="value"
+        :disabled="disabled"
+        @input="inputHandler"
+      />
+    </div>
   </div>
 </template>
 
@@ -90,7 +96,7 @@ export default {
 
 <style lang="scss" scoped>
 
-.wt-slider {
+.wt-slider__wrapper {
   width: var(--wt-slider-width)
 }
 
@@ -154,8 +160,16 @@ export default {
 }
 
 .wt-slider--vertical {
-  transform: var(--wt-slider-vertical-transform);
-  transform-origin: var(--wt-slider-vertical-transform-origin);
-}
+  width: var(--wt-slider-vertical-container-width);
+  transform: var(--wt-slider-vertical-container-translation);
+
+  .wt-slider__wrapper {
+    transform: var(--wt-slider-vertical-transform);
+    transform-origin: var(--wt-slider-vertical-transform-origin);
 
+    .wt-slider__slider {
+      margin: 0;
+    }
+  }
+}
 </style>

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

@@ -137,7 +137,8 @@ export default {
   },
 
   methods: {
-    searchTags() {
+    searchTags(search) {
+      this.$emit('search', search);
     },
 
     changeTags(tags) {

package/src/components/organisms/wt-status-select/_internals/StatusOptions.lookup.js

@@ -13,7 +13,7 @@ export default [
   },
   {
     locale: 'webitelUI.statusSelect.offline',
-    color: 'danger',
+    color: 'disabled',
     value: AgentStatus.OFFLINE,
   },
   {

package/src/css/components/molecules/wt-slider/_variables.scss

@@ -8,6 +8,8 @@
   --wt-slider-pointer-size: 16px;
   --wt-slider-pointer-radius: 50%;
 
-  --wt-slider-vertical-transform: translate(-100%, -50%) rotate(-90deg);
-  --wt-slider-vertical-transform-origin: 100%;
+  --wt-slider-vertical-container-width: 20px;
+  --wt-slider-vertical-container-translation: translate(2px);
+  --wt-slider-vertical-transform: translate(-100%, 0) rotate(-90deg);
+  --wt-slider-vertical-transform-origin: 100% 0;
 }