@webitel/ui-sdk 25.10.45 → 25.10.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.10.45",
+  "version": "25.10.47",
   "private": false,
   "scripts": {
     "make-all": "npm version patch --git-tag-version false && npm run build && (npm run build:types || true) && (npm run lint:fix || true) && npm run publish-lib",
@@ -56,7 +56,7 @@
     "@vuepic/vue-datepicker": "^4.5.1",
     "@vueuse/components": "^13.0.0",
     "@webitel/api-services": "^0.0.56",
-    "@webitel/styleguide": "^24.12.74",
+    "@webitel/styleguide": "^24.12.78",
     "autosize": "^6.0.1",
     "axios": "^1.8.3",
     "clipboard-copy": "^4.0.1",

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

@@ -1,15 +1,17 @@
 <template>
   <p-button
     :class="{
-        'p-button--width-by-content': widthByContent,
-        'p-button--contains-icon': containsIcon,
+        'p-button--width-by-content': widthByContent || icon,
         'p-button--wide': wide,
         'p-button--loading': showLoader,
+        'p-button--icon': icon,
+        [ `p-button--icon-${variant} p-button--icon-${size}` ]: icon,
       }"
     :disabled="disabled"
     :loading="showLoader"
     :severity="color"
     :size="primevueSizeMap[size]"
+    :variant="variant"
     class="wt-button"
     v-bind="attrs"
     @click.prevent="emit('click', $event)"
@@ -20,7 +22,13 @@
       size="sm"
     />
     <div class="wt-button__contents">
-      <slot> no content provided</slot>
+      <slot v-if="!icon"> no content provided</slot>
+      <wt-icon
+        v-else
+        :icon="icon"
+        :icon-prefix="iconPrefix"
+        :size="iconButtonSizeMap[size]"
+      />
     </div>
   </p-button>
 </template>
@@ -29,12 +37,19 @@
 import type { ButtonProps } from 'primevue';
 import {computed, defineEmits, defineProps, ref, useAttrs, watch} from 'vue';
 
-import { ButtonColor,ComponentSize } from '../../enums';
+import { ButtonColor, ButtonVariant, ComponentSize,  } from '../../enums';
 
 const primevueSizeMap = {
+  [ComponentSize.XS]: 'extra-small',
   [ComponentSize.SM]: 'small',
   [ComponentSize.MD]: 'medium',
-};
+}
+
+const iconButtonSizeMap = {
+  [ComponentSize.XS]: 'sm',
+  [ComponentSize.SM]: 'sm',
+  [ComponentSize.MD]: 'md',
+}
 
 interface WtButtonProps extends  /* @vue-ignore */ ButtonProps {
   color?: ButtonColor;
@@ -43,7 +58,9 @@ interface WtButtonProps extends  /* @vue-ignore */ ButtonProps {
   size?: ComponentSize;
   wide?: boolean;
   widthByContent?: boolean;
-  containsIcon?: boolean;
+  icon?: string;
+  iconPrefix?: string;
+  variant?: ButtonVariant;
 }
 
 const props = withDefaults(defineProps<WtButtonProps>(), {
@@ -53,7 +70,9 @@ const props = withDefaults(defineProps<WtButtonProps>(), {
   size: ComponentSize.MD,
   wide: false,
   widthByContent: false,
-  containsIcon: false,
+  icon: '',
+  iconPrefix: '',
+  variant: ButtonVariant.ACTIVE,
 });
 
 const emit = defineEmits(['click']);

package/src/components/wt-popup/_variables.scss

@@ -12,8 +12,8 @@
   --popup-max-height: 90%;
 
   --wt-popup-background-color: var(--dp-24-surface-color);
-  --popup-sections-gap: var(--spacing-sm);
-  --popup-padding: var(--popup-sections-gap);
+  --popup-sections-gap: var(--spacing-xs);
+  --popup-padding: var(--spacing-sm);
 
   --popup-header-padding: var(--spacing-xs);
   --wt-popup-header-background-color: var(--dp-18-surface-color);

package/src/enums/ButtonVariant/ButtonVariant.ts

@@ -0,0 +1,7 @@
+export const ButtonVariant = {
+  ACTIVE: 'active',
+  OUTLINED: 'outlined',
+  TEXT: 'text',
+} as const;
+
+export type ButtonVariant = (typeof ButtonVariant)[keyof typeof ButtonVariant];

package/src/enums/index.ts

@@ -1,6 +1,8 @@
 import AbstractUserStatus from './AbstractUserStatus/AbstractUserStatus.enum.js';
 import AgentStatus from './AgentStatus/AgentStatus.enum.js';
 import { ButtonColor } from './ButtonColor/ButtonColor';
+import { ButtonSize } from './ButtonSize/ButtonSize.js';
+import { ButtonVariant } from './ButtonVariant/ButtonVariant';
 import ChatGatewayProvider from './ChatGatewayProvider/ChatGatewayProvider.enum.js';
 import { ChipColor } from './ChipColor/ChipColor';
 import { ComponentSize } from './ComponentSize/ComponentSize';
@@ -27,6 +29,7 @@ export {
   AgentStatus,
   AuditorSections,
   ButtonColor,
+  ButtonVariant,
   ChatGatewayProvider,
   ChipColor,
   ComponentSize,

package/src/plugins/primevue/theme/components/button/button.js

@@ -1,5 +1,18 @@
 import { ButtonScheme } from '@webitel/styleguide/component-schemes';
 
+import { ComponentSize } from '../../../../../enums';
+
+const colors = [
+    'primary',
+    'secondary',
+    'success',
+    'warn',
+    'error',
+    'transfer',
+    'job',
+    'info'
+];
+
 const generateCustomColorCss = ({ colorName, dt }) => `
         .p-button-${colorName} {
             background: ${dt(`button.${colorName}.background`)};
@@ -13,8 +26,73 @@ const generateCustomColorCss = ({ colorName, dt }) => `
             background: ${dt(`button.${colorName}.activeBackground`)};
             color: ${dt(`button.${colorName}.activeColor`)};
         }
+
+        .p-button-outlined.p-button-${colorName} {
+            outline-color: ${dt(`button.outlined.${colorName}.borderColor`)};
+            background: ${dt(`button.outlined.${colorName}.background`)};
+            color: ${dt(`button.outlined.${colorName}.color`)};
+        }
+        .p-button-outlined.p-button-${colorName}:not(:disabled):hover {
+            outline-color: ${dt(`button.outlined.${colorName}.borderColor`)};
+            background: ${dt(`button.outlined.${colorName}.hoverBackground`)};
+        }
+        .p-button-outlined.p-button-${colorName}:not(:disabled):active {
+            background: ${dt(`button.outlined.${colorName}.activeBackground`)};
+            color: ${dt(`button.outlined.${colorName}.activeColor`)};
+        }
+
+        .p-button-text.p-button-${colorName} {
+            background: ${dt(`button.text.${colorName}.background`)};
+            color: ${dt(`button.text.${colorName}.color`)};
+        }
+        .p-button-text.p-button-${colorName}:not(:disabled):hover {
+            background: ${dt(`button.text.${colorName}.hoverBackground`)};
+        }
+        .p-button-text.p-button-${colorName}:not(:disabled):active {
+            background: ${dt(`button.text.${colorName}.activeBackground`)};
+        }
 `;
 
+const generateCustomActiveIconColorCss = ({ colorName, dt }) => `
+        .p-button--icon-active.p-button-${colorName} {
+            background: ${dt(`button.${colorName}.background`)};
+        }
+        .p-button--icon-active.p-button-${colorName}:not(:disabled):hover {
+            background: ${dt(`button.${colorName}.hoverBackground`)};
+        }
+        .p-button--icon-active.p-button-${colorName}:not(:disabled):active {
+            background: ${dt(`button.${colorName}.activeBackground`)};
+        }
+
+        .p-button--icon-active.p-button-${colorName} svg {
+            fill: ${dt(`button.${colorName}.color`)};
+        }
+        .p-button--icon-active.p-button-${colorName}:not(:disabled):hover svg {
+            fill: ${dt(`button.${colorName}.hoverColor`)};
+        }
+        .p-button--icon-active.p-button-${colorName}:not(:disabled):active svg {
+            fill: ${dt(`button.${colorName}.activeColor`)};
+        }
+`
+
+const generateCustomOutlinedColorCss = ({ colorName, dt }) => `
+        .p-button-outlined.p-button-${colorName} {
+            outline: 1px solid ${dt(`button.outlined.${colorName}.borderColor`)};
+        }
+        .p-button-outlined.p-button-${colorName}:not(:disabled):hover {
+            outline-color: ${dt(`button.outlined.${colorName}.borderColor`)};
+            background: ${dt(`button.outlined.${colorName}.hoverBackground`)};
+        }
+        .p-button-outlined.p-button-${colorName}:not(:disabled):active {
+            outline-color: ${dt(`button.outlined.${colorName}.borderColor`)};
+            background: ${dt(`button.outlined.${colorName}.activeBackground`)};
+        }
+
+        .p-button-outlined.p-button-${colorName} svg {
+            fill: ${dt(`button.outlined.${colorName}.color`)};
+        }
+`
+
 const button = {
   ...ButtonScheme.sizes,
   colorScheme: ButtonScheme.colorScheme,
@@ -34,6 +112,11 @@ const button = {
         ${generateCustomColorCss({ colorName: 'transfer', dt })}
         ${generateCustomColorCss({ colorName: 'error', dt })}
         ${generateCustomColorCss({ colorName: 'job', dt })}
+
+        ${colors.map((color) => generateCustomActiveIconColorCss({ colorName: color, dt })).join('')}
+
+        ${colors.map((color) => generateCustomOutlinedColorCss({ colorName: color, dt })).join('')}
+
         .p-button:disabled {
           background: ${dt(`button.disabled.background`)};
           color: ${dt(`button.disabled.color`)};
@@ -53,9 +136,12 @@ const button = {
             font-weight: 600;
             font-size: 12px;
             line-height: 24px;
-            border: none;
             font-family: "Montserrat", monospace;
             text-transform: uppercase;
+            border: none !important;
+        }
+        .p-button:hover {
+            border: none !important;
         }
         .p-button.p-button--width-by-content {
             min-width: 0;
@@ -63,17 +149,20 @@ const button = {
         .p-button.p-button--wide {
             width: 100%;
         }
-        .p-button.p-button--contains-icon {
-            line-height: 0;
-        }
         .p-button.p-button--loading {
             pointer-events: none;
         }
-        .p-button:hover {
-            border: none;
+        .p-button.p-button-outlined {
+            background: transparent;
+        }
+        .p-button--icon-${ComponentSize.XS} {
+            padding: ${dt(`button.icon.xs.padding`)};
+        }
+        .p-button--icon-${ComponentSize.SM} {
+            padding: ${dt(`button.icon.sm.padding`)};
         }
-        .p-button:not(:disabled):hover {
-            border: none;
+        .p-button--icon-${ComponentSize.MD} {
+            padding: ${dt(`button.icon.md.padding`)};
         }
         `,
 };

package/types/components/wt-button/wt-button.vue.d.ts

@@ -1,6 +1,12 @@
 import type { ButtonProps } from 'primevue';
-import { ButtonColor, ComponentSize } from '../../enums';
+import { ButtonColor, ButtonVariant, ComponentSize } from '../../enums';
 declare const primevueSizeMap: {
+    xs: string;
+    sm: string;
+    md: string;
+};
+declare const iconButtonSizeMap: {
+    xs: string;
     sm: string;
     md: string;
 };
@@ -11,7 +17,9 @@ interface WtButtonProps extends /* @vue-ignore */ ButtonProps {
     size?: ComponentSize;
     wide?: boolean;
     widthByContent?: boolean;
-    containsIcon?: boolean;
+    icon?: string;
+    iconPrefix?: string;
+    variant?: ButtonVariant;
 }
 declare const emit: (event: "click", ...args: any[]) => void;
 declare const attrs: {
@@ -26,6 +34,7 @@ type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$
 }>;
 declare const __VLS_self: import("vue").DefineComponent<WtButtonProps, {
     primevueSizeMap: typeof primevueSizeMap;
+    iconButtonSizeMap: typeof iconButtonSizeMap;
     emit: typeof emit;
     attrs: typeof attrs;
     showLoader: typeof showLoader;
@@ -36,12 +45,14 @@ declare const __VLS_self: import("vue").DefineComponent<WtButtonProps, {
     onClick?: (...args: any[]) => any;
 }>, {
     color: ButtonColor;
+    icon: string;
     disabled: boolean;
     size: ComponentSize;
     wide: boolean;
     loading: boolean;
     widthByContent: boolean;
-    containsIcon: boolean;
+    iconPrefix: string;
+    variant: ButtonVariant;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_component: import("vue").DefineComponent<WtButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
@@ -49,12 +60,14 @@ declare const __VLS_component: import("vue").DefineComponent<WtButtonProps, {},
     onClick?: (...args: any[]) => any;
 }>, {
     color: ButtonColor;
+    icon: string;
     disabled: boolean;
     size: ComponentSize;
     wide: boolean;
     loading: boolean;
     widthByContent: boolean;
-    containsIcon: boolean;
+    iconPrefix: string;
+    variant: ButtonVariant;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/types/components/wt-rounded-action/wt-rounded-action.vue.d.ts

@@ -7,8 +7,8 @@ declare const _default: import("vue").DefineComponent<{}, {
     active: boolean;
     wide: boolean;
     loading: boolean;
-    rounded: boolean;
     iconPrefix: string;
+    rounded: boolean;
     $props: {
         readonly color?: string;
         readonly icon?: string;
@@ -17,8 +17,8 @@ declare const _default: import("vue").DefineComponent<{}, {
         readonly active?: boolean;
         readonly wide?: boolean;
         readonly loading?: boolean;
-        readonly rounded?: boolean;
         readonly iconPrefix?: string;
+        readonly rounded?: boolean;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/types/enums/ButtonVariant/ButtonVariant.d.ts

@@ -0,0 +1,6 @@
+export declare const ButtonVariant: {
+    readonly ACTIVE: "active";
+    readonly OUTLINED: "outlined";
+    readonly TEXT: "text";
+};
+export type ButtonVariant = (typeof ButtonVariant)[keyof typeof ButtonVariant];

package/types/enums/index.d.ts

@@ -1,6 +1,7 @@
 import AbstractUserStatus from './AbstractUserStatus/AbstractUserStatus.enum.js';
 import AgentStatus from './AgentStatus/AgentStatus.enum.js';
 import { ButtonColor } from './ButtonColor/ButtonColor';
+import { ButtonVariant } from './ButtonVariant/ButtonVariant';
 import ChatGatewayProvider from './ChatGatewayProvider/ChatGatewayProvider.enum.js';
 import { ChipColor } from './ChipColor/ChipColor';
 import { ComponentSize } from './ComponentSize/ComponentSize';
@@ -20,4 +21,4 @@ import WebitelApplications from './WebitelApplications/WebitelApplications.enum.
 import { WtApplication } from './WebitelApplications/WtApplication';
 import { WtObject } from './WtObject/WtObject';
 import { WtTypeExtensionFieldKind } from './WtTypeExtensionFieldKind/WtTypeExtensionFieldKind';
-export { AbstractUserStatus, AdminSections, AgentStatus, AuditorSections, ButtonColor, ChatGatewayProvider, ChipColor, ComponentSize, CrmSections, CrudAction, EmptyCause, IconAction, IconColor, ProcessingTableColumnType, QueueType, RelativeDatetimeValue, SupervisorSections, TypesExportedSettings, WebitelApplications, WtApplication, WtObject, WtTypeExtensionFieldKind, };
+export { AbstractUserStatus, AdminSections, AgentStatus, AuditorSections, ButtonColor, ButtonVariant, ChatGatewayProvider, ChipColor, ComponentSize, CrmSections, CrudAction, EmptyCause, IconAction, IconColor, ProcessingTableColumnType, QueueType, RelativeDatetimeValue, SupervisorSections, TypesExportedSettings, WebitelApplications, WtApplication, WtObject, WtTypeExtensionFieldKind, };

package/types/plugins/primevue/theme/components/button/button.d.ts

@@ -159,25 +159,19 @@ declare const button: {
                     borderColor: string;
                     color: string;
                 };
-                help: {
-                    hoverBackground: string;
-                    activeBackground: string;
-                    borderColor: string;
-                    color: string;
-                };
-                danger: {
+                job: {
                     hoverBackground: string;
                     activeBackground: string;
                     borderColor: string;
                     color: string;
                 };
-                contrast: {
+                error: {
                     hoverBackground: string;
                     activeBackground: string;
                     borderColor: string;
                     color: string;
                 };
-                plain: {
+                transfer: {
                     hoverBackground: string;
                     activeBackground: string;
                     borderColor: string;
@@ -210,22 +204,17 @@ declare const button: {
                     activeBackground: string;
                     color: string;
                 };
-                help: {
-                    hoverBackground: string;
-                    activeBackground: string;
-                    color: string;
-                };
-                danger: {
+                job: {
                     hoverBackground: string;
                     activeBackground: string;
                     color: string;
                 };
-                contrast: {
+                error: {
                     hoverBackground: string;
                     activeBackground: string;
                     color: string;
                 };
-                plain: {
+                transfer: {
                     hoverBackground: string;
                     activeBackground: string;
                     color: string;
@@ -395,25 +384,19 @@ declare const button: {
                     borderColor: string;
                     color: string;
                 };
-                help: {
-                    hoverBackground: string;
-                    activeBackground: string;
-                    borderColor: string;
-                    color: string;
-                };
-                danger: {
+                error: {
                     hoverBackground: string;
                     activeBackground: string;
                     borderColor: string;
                     color: string;
                 };
-                contrast: {
+                transfer: {
                     hoverBackground: string;
                     activeBackground: string;
                     borderColor: string;
                     color: string;
                 };
-                plain: {
+                job: {
                     hoverBackground: string;
                     activeBackground: string;
                     borderColor: string;
@@ -446,22 +429,17 @@ declare const button: {
                     activeBackground: string;
                     color: string;
                 };
-                help: {
-                    hoverBackground: string;
-                    activeBackground: string;
-                    color: string;
-                };
-                danger: {
+                job: {
                     hoverBackground: string;
                     activeBackground: string;
                     color: string;
                 };
-                contrast: {
+                error: {
                     hoverBackground: string;
                     activeBackground: string;
                     color: string;
                 };
-                plain: {
+                transfer: {
                     hoverBackground: string;
                     activeBackground: string;
                     color: string;
@@ -503,6 +481,17 @@ declare const button: {
         paddingY: string;
         iconOnlyWidth: string;
     };
+    icon: {
+        xs: {
+            padding: string;
+        };
+        sm: {
+            padding: string;
+        };
+        md: {
+            padding: string;
+        };
+    };
     label: {
         fontWeight: string;
     };