@webitel/ui-sdk 25.8.53 → 25.8.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.8.53",
+  "version": "25.8.55",
   "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",

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

@@ -1,57 +1,42 @@
 <template>
-  <i
+  <svg
     :class="[
+      'wt-icon',
       `wt-icon--size-${size}`,
       `wt-icon--color-${color}`,
       { 'wt-icon--disabled': disabled },
     ]"
-    class="wt-icon"
   >
-    <svg class="wt-icon__icon">
-      <use :xlink:href="iconName" />
-    </svg>
-  </i>
+    <use :href="iconName" />
+  </svg>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 
-const props = defineProps({
+import { ComponentSize, IconColor } from '../../enums';
+
+interface Props {
   /**
    * Icon name
    * @example '<wt-icon icon="close"></wt-icon>'
    */
-  icon: {
-    type: String,
-    required: true,
-  },
-  /**
-   * @values xs, sm (16px), md (24px), lg (32px), xl (40px), 2xl, 3xl
-   * @example '<wt-icon icon="close" size="sm"></wt-icon>'
-   */
-  size: {
-    type: String,
-    default: 'md',
-  },
-  /**
-   * @values 'default', 'active', 'disabled', 'primary', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer', 'job'
-   */
-  color: {
-    type: String,
-    default: 'default',
-  },
+  icon: string;
+  size?: ComponentSize;
+  color?: IconColor;
   /**
    * inserts icon name prefix between "icon" and actual icon name ("icon" prop).
    * Useful for library icons extension with project-level icons with this prefix in name
    */
-  iconPrefix: {
-    type: String,
-    default: '',
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
+  iconPrefix?: string;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: ComponentSize.MD,
+  color: IconColor.DEFAULT,
+  iconPrefix: '',
+  disabled: false,
 });
 
 const iconName = computed(() => {
@@ -63,122 +48,40 @@ const iconName = computed(() => {
 
 <style lang="scss">
 @use './variables.scss';
-</style>
 
-<style lang="scss" scoped>
 .wt-icon {
   display: inline-flex;
   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%;
   stroke-width: 0;
   fill: var(--icon-color);
-}
-
-.wt-icon--color {
-  &-default .wt-icon__icon {
-    fill: var(--icon-color);
-  }
-
-  &-active .wt-icon__icon {
-    fill: var(--icon-active-color);
-  }
-
-  &-primary .wt-icon__icon {
-    fill: var(--icon-primary-color);
-  }
-
-  &-error .wt-icon__icon {
-    fill: var(--icon-error-color);
-  }
-
-  &-success .wt-icon__icon {
-    fill: var(--icon-success-color);
-  }
-
-  &-warning .wt-icon__icon {
-    fill: var(--icon-warning-color);
-  }
-
-  &-on-dark .wt-icon__icon {
-    fill: var(--icon-on-dark-color);
-  }
-
-  &-on-light .wt-icon__icon {
-    fill: var(--icon-on-light-color);
-  }
 
-  &-on-primary .wt-icon__icon {
-    fill: var(--icon-on-primary-color);
-  }
-
-  &-info .wt-icon__icon {
-    fill: var(--icon-info-color);
-  }
-
-  &-chat .wt-icon__icon {
-    fill: var(--icon-chat-color);
-  }
-
-  &-transfer .wt-icon__icon {
-    fill: var(--icon-transfer-color);
-  }
-
-  &-job .wt-icon__icon {
-    fill: var(--icon-job-color);
-  }
-
-  &-disabled .wt-icon__icon {
+  &--size-xs { width: var(--icon-xs-size); height: var(--icon-xs-size); }
+  &--size-sm { width: var(--icon-sm-size); height: var(--icon-sm-size); }
+  &--size-md { width: var(--icon-md-size); height: var(--icon-md-size); }
+  &--size-lg { width: var(--icon-lg-size); height: var(--icon-lg-size); }
+  &--size-xl { width: var(--icon-xl-size); height: var(--icon-xl-size); }
+  &--size-2xl { width: var(--icon-2xl-size); height: var(--icon-2xl-size); }
+  &--size-3xl { width: var(--icon-3xl-size); height: var(--icon-3xl-size); }
+
+  &--color-default { fill: var(--icon-color); }
+  &--color-active { fill: var(--icon-active-color); }
+  &--color-primary { fill: var(--icon-primary-color); }
+  &--color-error { fill: var(--icon-error-color); }
+  &--color-success { fill: var(--icon-success-color); }
+  &--color-warning { fill: var(--icon-warning-color); }
+  &--color-on-dark { fill: var(--icon-on-dark-color); }
+  &--color-on-light { fill: var(--icon-on-light-color); }
+  &--color-on-primary { fill: var(--icon-on-primary-color); }
+  &--color-info { fill: var(--icon-info-color); }
+  &--color-chat { fill: var(--icon-chat-color); }
+  &--color-transfer { fill: var(--icon-transfer-color); }
+  &--color-job { fill: var(--icon-job-color); }
+  &--color-disabled { fill: var(--icon-disabled-color); }
+
+  &--disabled {
     fill: var(--icon-disabled-color);
   }
 }
-
-.wt-icon--disabled .wt-icon__icon {
-  fill: var(--icon-disabled-color);
-}
-
-.wt-icon--size {
-  &-3xl {
-    width: var(--icon-3xl-size);
-    height: var(--icon-3xl-size);
-  }
-
-  &-2xl {
-    width: var(--icon-2xl-size);
-    height: var(--icon-2xl-size);
-  }
-
-  &-xl {
-    width: var(--icon-xl-size);
-    height: var(--icon-xl-size);
-  }
-
-  &-lg {
-    width: var(--icon-lg-size);
-    height: var(--icon-lg-size);
-  }
-
-  &-md {
-    width: var(--icon-md-size);
-    height: var(--icon-md-size);
-  }
-
-  &-sm {
-    width: var(--icon-sm-size);
-    height: var(--icon-sm-size);
-  }
-
-  &-xs {
-    width: var(--icon-xs-size);
-    height: var(--icon-xs-size);
-  }
-}
-</style>
+</style>

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

@@ -38,7 +38,7 @@ const emit = defineEmits<{
   width: fit-content;
   line-height: 0;
 
-  &:hover .wt-icon--color-default :deep(.wt-icon__icon) {
+  &:hover .wt-icon--color-default {
     fill: var(--icon-btn-hover-color);
   }
 

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

@@ -130,13 +130,13 @@ export default {
 }
 
 .wt-radio:hover {
-  :deep(.wt-icon__icon) {
+  :deep(.wt-icon) {
     fill: var(--icon-btn-hover-color);
   }
 }
 
 .wt-radio--active {
-  :deep(.wt-icon__icon) {
+  :deep(.wt-icon) {
     fill: var(--icon-active-color);
   }
 }
@@ -144,7 +144,7 @@ export default {
 .wt-radio--disabled {
   pointer-events: none;
 
-  :deep(.wt-icon__icon) {
+  :deep(.wt-icon) {
     fill: var(--icon-disabled-color);
   }
 }

package/src/components/wt-select/_multiselect.scss

@@ -103,7 +103,7 @@
 }
 
 :deep(.multiselect--active) {
-  .multiselect__select.multiselect__arrow .wt-icon__icon {
+  .multiselect__select.multiselect__arrow .wt-icon {
     fill: var(--icon-active-color);
   }
 

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

@@ -395,7 +395,7 @@ export default {
   &--sortable {
     cursor: pointer;
 
-    &:hover :deep(.wt-icon__icon) {
+    &:hover :deep(.wt-icon) {
       fill: var(--icon-active-color);
     }
   }

package/src/components/wt-tree-table/wt-tree-table.vue

@@ -326,7 +326,7 @@ const handleSelection = (row, select) => {
   &--sortable {
     cursor: pointer;
 
-    &:hover :deep .wt-icon__icon {
+    &:hover :deep .wt-icon {
       fill: var(--icon-active-color);
     }
   }

package/src/enums/IconColor/IconColor.ts

@@ -0,0 +1,18 @@
+export const IconColor = {
+  DEFAULT: 'default',
+  ACTIVE: 'active',
+  DISABLED: 'disabled',
+  PRIMARY: 'primary',
+  ERROR: 'error',
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  ON_DARK: 'on-dark',
+  ON_LIGHT: 'on-light',
+  ON_PRIMARY: 'on-primary',
+  INFO: 'info',
+  CHAT: 'chat',
+  TRANSFER: 'transfer',
+  JOB: 'job',
+} as const;
+
+export type IconColor = (typeof IconColor)[keyof typeof IconColor];

package/src/enums/index.ts

@@ -6,6 +6,7 @@ import { ChipColor } from './ChipColor/ChipColor';
 import { ComponentSize } from './ComponentSize/ComponentSize';
 import { CrudAction } from './CrudAction/CrudAction';
 import IconAction from './IconAction/IconAction.enum.js';
+import { IconColor } from './IconColor/IconColor';
 import QueueType from './QueueType/QueueType.enum.js';
 import { RelativeDatetimeValue } from './RelativeDatetimeValue/RelativeDatetimeValue';
 import TypesExportedSettings from './TypesExportedSettings/TypesExportedSettings.enum.js';
@@ -30,6 +31,7 @@ export {
   CrmSections,
   CrudAction,
   IconAction,
+  IconColor,
   QueueType,
   RelativeDatetimeValue,
   SupervisorSections,

package/src/modules/Userinfo/v2/stores/accessStore.ts

@@ -68,7 +68,7 @@ export const createUserAccessStore = ({
     };
 
     const hasApplicationVisibility = (app: WtApplication) => {
-      return hasReadAccess() || appVisibilityAccess.get(app);
+      return appVisibilityAccess.get(app);
     };
 
     const hasSectionVisibility = (section: UiSection, object: WtObject) => {
@@ -78,9 +78,6 @@ export const createUserAccessStore = ({
         return sectionVisibilityAccess.get(section);
       };
 
-      const allowGlobalAccess = hasReadAccess();
-      if (allowGlobalAccess) return true;
-
       const allowAppVisibility = hasApplicationVisibility(appOfSection);
       const allowObjectAccess = hasReadAccess(objectOfSection);
       const allowSectionVisibility = hasSectionVisibilityAccess(section);

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

@@ -12,25 +12,25 @@ const checkbox = {
           justify-content: center;
         }
 
-        .p-checkbox-box .wt-icon__icon {
+        .p-checkbox-box .wt-icon {
             color: ${dt('checkbox.icon.color')};
             width: ${dt('checkbox.icon.size')};
             height: ${dt('checkbox.icon.size')};
         }
 
-        .p-checkbox-box .wt-icon--color-active .wt-icon__icon {
+        .p-checkbox-box .wt-icon--color-active {
             color: ${dt('checkbox.icon.checkedColor')};
         }
 
-        .p-checkbox-box .wt-icon--color-disabled .wt-icon__icon {
+        .p-checkbox-box .wt-icon--color-disabled {
             color: ${dt('checkbox.icon.disabledColor')};
         }
 
-        .p-checkbox:hover .wt-icon--color-active .wt-icon__icon {
+        .p-checkbox:hover .wt-icon--color-active {
             color: ${dt('checkbox.icon.checkedHoverColor')};
         }
 
-        .wt-checkbox:has(.wt-label:hover) .wt-icon--color-active .wt-icon__icon {
+        .wt-checkbox:has(.wt-label:hover) .wt-icon--color-active {
             color: ${dt('checkbox.icon.checkedHoverColor')};
         }
         `,

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

@@ -6,11 +6,11 @@ const generateCustomColorCss = ({ colorName, dt }) => `
             color: ${dt(`chip.${colorName}.color`)};
         }
 
-        .p-chip-${colorName} .wt-icon .wt-icon__icon {
+        .p-chip-${colorName} .wt-icon {
             fill: ${dt(`chip.${colorName}.iconColor`)};
         }
 
-        .p-chip-${colorName} .wt-icon:hover .wt-icon__icon {
+        .p-chip-${colorName} .wt-icon:hover {
             fill: ${dt(`chip.${colorName}.iconHoverColor`)};
         }
 `;

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

@@ -1,15 +1,23 @@
-declare const _default: import("vue").DefineComponent<{}, {
-    color: string;
+import { ComponentSize, IconColor } from '../../enums';
+interface Props {
+    /**
+     * Icon name
+     * @example '<wt-icon icon="close"></wt-icon>'
+     */
     icon: string;
-    size: string;
+    size?: ComponentSize;
+    color?: IconColor;
+    /**
+     * inserts icon name prefix between "icon" and actual icon name ("icon" prop).
+     * Useful for library icons extension with project-level icons with this prefix in name
+     */
+    iconPrefix?: string;
+    disabled?: boolean;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    color: IconColor;
+    size: ComponentSize;
     disabled: boolean;
     iconPrefix: string;
-    $props: {
-        readonly color?: string;
-        readonly icon?: string;
-        readonly size?: string;
-        readonly disabled?: boolean;
-        readonly iconPrefix?: string;
-    };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/types/enums/IconColor/IconColor.d.ts

@@ -0,0 +1,17 @@
+export declare const IconColor: {
+    readonly DEFAULT: "default";
+    readonly ACTIVE: "active";
+    readonly DISABLED: "disabled";
+    readonly PRIMARY: "primary";
+    readonly ERROR: "error";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly ON_DARK: "on-dark";
+    readonly ON_LIGHT: "on-light";
+    readonly ON_PRIMARY: "on-primary";
+    readonly INFO: "info";
+    readonly CHAT: "chat";
+    readonly TRANSFER: "transfer";
+    readonly JOB: "job";
+};
+export type IconColor = (typeof IconColor)[keyof typeof IconColor];

package/types/enums/index.d.ts

@@ -6,6 +6,7 @@ import { ChipColor } from './ChipColor/ChipColor';
 import { ComponentSize } from './ComponentSize/ComponentSize';
 import { CrudAction } from './CrudAction/CrudAction';
 import IconAction from './IconAction/IconAction.enum.js';
+import { IconColor } from './IconColor/IconColor';
 import QueueType from './QueueType/QueueType.enum.js';
 import { RelativeDatetimeValue } from './RelativeDatetimeValue/RelativeDatetimeValue';
 import TypesExportedSettings from './TypesExportedSettings/TypesExportedSettings.enum.js';
@@ -17,4 +18,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, IconAction, QueueType, RelativeDatetimeValue, SupervisorSections, TypesExportedSettings, WebitelApplications, WtApplication, WtObject, WtTypeExtensionFieldKind, };
+export { AbstractUserStatus, AdminSections, AgentStatus, AuditorSections, ButtonColor, ChatGatewayProvider, ChipColor, ComponentSize, CrmSections, CrudAction, IconAction, IconColor, QueueType, RelativeDatetimeValue, SupervisorSections, TypesExportedSettings, WebitelApplications, WtApplication, WtObject, WtTypeExtensionFieldKind, };