@webitel/ui-sdk 26.4.34 → 26.4.35

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.4.34",
+	"version": "26.4.35",
 	"private": false,
 	"scripts": {
 		"make-all": "npm version patch --git-tag-version false && npm run build && (npm run build:types || true) && (npm run biome:format:all || true) && npm run publish-lib",

package/src/components/wt-vidstack-player/components/panels/video-display-panel/video-display-panel.vue

@@ -24,8 +24,7 @@
       />
       <toggle-button
         v-if="!props.hideExpand"
-        primary-icon="expand"
-        secondary-icon="collapse"
+        :icon="toggleIcon"
         color="on-dark"
         @toggle="handlePlayerSize"
       />
@@ -41,6 +40,7 @@
 
 <script setup lang="ts">
 import {
+	computed,
 	defineEmits,
 	defineProps,
 	inject,
@@ -58,6 +58,10 @@ import ToggleButton from '../../toggle-button.vue';
 const { size, fullscreen, changeSize } =
 	inject<WtVidstackPlayerSizeProvider>('size');
 
+const toggleIcon = computed(() =>
+	size.value === ComponentSize.SM ? 'expand' : 'collapse',
+);
+
 const props = defineProps<{
 	title?: string;
 	username?: string;

package/src/components/wt-vidstack-player/components/toggle-button.vue

@@ -1,52 +1,31 @@
 <template>
-  <media-toggle-button
-    ref="toggleButton"
+  <div
     class="toggle-button"
-    :disabled="props.disabled"
     @click="setToggleState"
   >
     <wt-icon-btn
-      :icon="props.primaryIcon"
+      :icon="props.icon"
       :color="props.color"
       :disabled="props.disabled"
-      class="toggle-button__primary"
     />
-    <wt-icon-btn
-      :icon="props.secondaryIcon"
-      :color="props.color"
-      :disabled="props.disabled"
-      class="toggle-button__secondary"
-    />
-  </media-toggle-button>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { defineEmits, defineProps, type Ref, useTemplateRef } from 'vue';
-
 import WtIconBtn from '../../wt-icon-btn/wt-icon-btn.vue';
 
 const props = defineProps<{
-	primaryIcon: string;
-	secondaryIcon: string;
+	icon: string;
 	color?: string;
 	disabled?: boolean;
 }>();
 
-const toggleButton = useTemplateRef('toggleButton') as Ref<HTMLElement>;
-
 const emit = defineEmits<{
-	toggle: [
-		value: boolean,
-	];
+	toggle: [];
 }>();
 
 const setToggleState = () => {
 	if (props.disabled) return;
-	emit('toggle', toggleButton.value.pressed);
+	emit('toggle');
 };
 </script>
-
-<style  scoped>.toggle-button[data-pressed] .toggle-button__primary,
-.toggle-button:not([data-pressed]) .toggle-button__secondary {
-display: none;
-}</style>

package/types/components/wt-vidstack-player/components/toggle-button.vue.d.ts

@@ -1,13 +1,12 @@
 type __VLS_Props = {
-    primaryIcon: string;
-    secondaryIcon: string;
+    icon: string;
     color?: string;
     disabled?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    toggle: (value: boolean) => any;
+    toggle: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onToggle?: (value: boolean) => any;
+    onToggle?: () => any;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;