@webitel/ui-sdk 0.9.65 → 1.0.2

package/src/css/components/organisms/wt-app-header/_variables.scss

@@ -1,20 +1,24 @@
 
 :root {
-  --wt-app-header-min-height: 54px;
-  --wt-app-header-padding: 8px 60px;
+  --wt-app-header-min-height: 40px;
+  --wt-app-header-padding: var(--spacing-xs) var(--spacing-sm);
 
-  --wt-app-header-content-gap: var(--component-padding);
-  --wt-app-header-content-panel-margin: 5px;
-  --wt-app-header-content-bg-color: var(--main-primary-color);
+  --wt-app-header-content-gap: var(--spacing-sm);
+  --wt-app-header-content-panel-margin: var(--spacing-2xs);
+  --wt-app-header-content-bg-color: var(--main-color);
   --wt-app-header-content-z-index: 11;
 
   --wt-app-navigator-max-height: 80vh;
+  --wt-app-navigator-padding: var(--wt-app-header-content-gap);
   --wt-app-navigator-item-size: 120px;
+  --wt-app-navigator-item-gap: var(--wt-app-header-content-gap);
   --wt-app-navigator-item-border: 1px solid;
-  --wt-app-navigator-item-border-color: var(--main-outline-color);
-  --wt-app-navigator-item-border-color--hover: var(--main-accent-color);
+  --wt-app-navigator-item-border-color: var(--secondary-color);
+  --wt-app-navigator-item-border-color--hover: var(--accent-color);
 
   --wt-header-actions-min-width: 120px;
-  --wt-header-actions-action-bg-color--hover: var(--main-page-bg-color);
-  --wt-header-actions-action-link-padding: 10px var(--wt-app-header-content-gap);
+  --wt-header-actions-content-sections-gap: var(--spacing-lg);
+  --wt-header-actions-padding: var(--wt-app-header-content-gap);
+  --wt-header-actions-action-bg-color--hover: var(--secondary-color);
+  --wt-header-actions-action-link-padding: var(--spacing-xs);
 }

package/src/css/components/organisms/wt-headline/_variables.scss

@@ -1,7 +1,6 @@
 
 :root {
-  --headline-min-height: 64px;
-  --headline-padding: 12px 30px;
-  --headline-title-margin: 20px;
-  --headline-background: var(--main-primary-color);
+  --headline-min-height: 40px; // button/search-bar height
+  --headline-title-margin: var(--spacing-sm);
+  --headline-background: var(--main-color);
 }

package/src/css/components/organisms/wt-navigation-bar/_variables.scss

@@ -1,14 +1,14 @@
 :root {
-  --navigation-bar-width: 350px;
+  --navigation-bar-width: 340px;
   --navigation-bar-z-index: 10;
-  --navigation-bar-bg-color: var(--main-primary-color);
-  --navigation-bar-verical-padding: 15px;
-  --navigation-bar-horizontal-padding: 10px;
+  --navigation-bar-bg-color: var(--main-color);
+  --navigation-bar-padding: var(--spacing-sm);
 
-  --navigation-bar-header-padding: var(--navigation-bar-verical-padding) 15px;
-  --navigation-bar-list-padding: var(--navigation-bar-verical-padding) var(--navigation-bar-horizontal-padding);
-  --navigation-bar-link-padding: var(--navigation-bar-verical-padding) var(--navigation-bar-horizontal-padding);
-  --navigation-bar-subnav-padding-left: 40px;
+  --navigation-bar-header-padding: var(--spacing-xs);
+
+  --navigation-bar-list-padding: var(--navigation-bar-padding);
+  --navigation-bar-link-padding: var(--navigation-bar-padding);
+  --navigation-bar-subnav-padding-left: var(--spacing-lg);
   --navigation-bar-active-expansion-flag-width: 5px;
-  --navigation-bar-active-expansion-name-max-width: calc(100% - 24px - 10px); // 100% - icon - icon margin
-}
+  --navigation-bar-active-expansion-name-max-width: calc(100% - var(--icon-md-size) - var(--spacing-xs));
+}

package/src/css/components/organisms/wt-notifications-bar/_variables.scss

@@ -1,7 +1,7 @@
 
 :root {
   --notifications-bar-max-height: 60%;
-  --notifications-bar-corner-margin: 10px;
-  --notifications-bar-notifications-margin: 0 10px 10px auto;
+  --notifications-bar-corner-margin: var(--spacing-sm);
+  --notifications-bar-notifications-margin: 0 0 var(--spacing-xs) auto;
   --notifications-bar-z-index: 101;
 }

package/src/css/components/organisms/wt-page-wrapper/_variables.scss

@@ -1,5 +1,5 @@
 :root {
-  --page-wrapper-padding: 20px 30px;
-  --page-wrapper-section-margin: 20px;
-  --page-wrapper-main-section-padding: 20px 30px 30px;
+  --page-wrapper-padding: var(--spacing-sm);
+  --page-wrapper-section-padding: var(--spacing-sm);
+  --page-wrapper-section-gap: var(--spacing-sm);
 }

package/src/css/components/organisms/wt-pagination/_variables.scss

@@ -1,7 +1,5 @@
 
 :root {
-  --pagination-margin-right: 10px;
-  --pagination-size-text-margin-right: 10px;
+  --pagination-gap: var(--spacing-xs);
   --pagination-size-input-width: 70px;
-  --pagination-page-controls-margin: 10px;
 }

package/src/css/components/organisms/wt-player/_variables.scss

@@ -2,7 +2,7 @@
   --plyr-color-main: var(--main-accent-color);
   --plyr-audio-control-color: var(--icon-primary-color);
   // --plyr-control-toggle-checked-background: var(--main-primary-color);
-  --player-close-icon-transform-translate-x: var(--spacing--sm);
+  --player-close-icon-transform-translate-x: var(--spacing-xs);
   // "-1 * var" for use the negative value of a variable
-  --player-close-icon-transform-translate-y: calc(-1 * var(--spacing--md));
+  --player-close-icon-transform-translate-y: calc(-1 * var(--spacing-md));
 }

package/src/css/components/organisms/wt-status-select/_variables.scss

@@ -1,6 +1,6 @@
 
 :root {
-  --status-select-select-tags-padding: 9px 34px 9px 9px; // 34px = 24 + 10
-  --status-select--hover-color: var(--form-input-color);
-  --status-select-bg--hover-color: #F9F9F9; // zebra-like
+  --status-select-padding: 0 calc(var(--icon-size-md) + var(--spacing-xs)) 0 0; // reset wt-select padding, but preserve arrow icon padding
+  --status-select-option-color: var(--form-input-color);
+  --status-select-bg--hover-color: var(--secondary-color);
 }

package/src/css/components/organisms/wt-table/_variables.scss

@@ -2,15 +2,15 @@
 :root {
   --table-col-min-width: 140px;
 
-  --table-head-sort-arrow-margin: 10px;
-  --table-head-borer-bottom: 1px solid;
-  --table-head-borer-color: var(--main-outline-color);
+  --table-head-sort-arrow-margin: var(--spacing-xs);
+  --table-head-border: 1px solid;
+  --table-head-border-color: var(--secondary-color);
 
-  --table-min-height: 24px; // 24px icon size + 2 paddings
-  --table-column-gap: 20px;
-  --table-row-padding: 10px;
+  --table-min-height: 24px; // 24px icon size or body-1 lh
+  --table-column-gap: var(--spacing-sm);
+  --table-row-padding: var(--spacing-sm);
 
-  --table-primary-color: var(--main-primary-color);
-  --table--hover-color: var(--main-secondary-accent-color);
-  --table-secondary-color: #F9F9F9; // zebra
+  --table-primary-color: var(--main-color);
+  --table--hover-color: var(--accent-secondary-color);
+  --table-secondary-color: var(--secondary-color-50); // zebra
 }

package/src/css/components/organisms/wt-table-actions/_variables.scss

@@ -1,4 +1,5 @@
 
 :root {
-  --table-actions-icon-gap: 20px;
+  --table-actions-padding: var(--spacing-xs);
+  --table-actions-icon-gap: var(--spacing-xs);
 }

package/src/css/main.scss

@@ -1,8 +1,10 @@
-@import 'sizes/sizes';
-@import 'display-helpers/display-helpers';
 @import 'styleguide/styleguide';
-@import 'transitions/transitions';
+
 @import 'components/components';
+@import 'styleguide/display-helpers/display-helpers';
+
+
+@include wt-placeholder;
 
 :root {
   --transition: 0.2s;
@@ -20,11 +22,11 @@ html {
 }
 
 body {
+  @extend %typo-body-1;
+
   min-height: 100%;
   height: 100%;
   margin: 0;
-  font-family: 'Montserrat Regular', monospace;
-  font-size: 100%;
 }
 
 //main {

package/src/css/styleguide/_styleguide.scss

@@ -1,4 +1,9 @@
 @import './scroll';
-@import '../typography/typography';
-@import '../colors/colors';
-@import '../shadows/shadows';
+@import 'border-radius/border-radius';
+@import 'typography/typography';
+@import 'colors/colors';
+@import 'elevations/elevations';
+@import 'spacings/spacings';
+@import 'viewport-breakpoints/viewport-breakpoints';
+@import 'transitions/transitions';
+@import 'placeholder/placeholder';

package/src/css/styleguide/border-radius/_border-radius.scss

@@ -0,0 +1,4 @@
+:root {
+  --border-radius: var(--spacing-2xs);
+  --border-radius--pill: 50px;
+}

package/src/css/{colors → styleguide/colors}/_colors.scss

@@ -60,6 +60,7 @@
   --icon-color-danger: var(--false-color);
   --icon-color-transfer: var(--transfer-color);
   --icon-color-hold: var(--hold-color);
+  --icon-color-secondary-50: var(--secondary-color-50);
 
 
   --page-bg-color: hsla(var(--_page-bg-color), 1);
@@ -95,8 +96,8 @@
   --form-opacity--focus: var(--_opacity--focus);
   --form-opacity--disabled: var(--_opacity--disabled);
 
-  --form-placeholder-opacity: 0.4;
-  --form-placeholder-opacity--hover: 0.6;
+  --form-placeholder-opacity: 0.6;
+  --form-placeholder-opacity--focus: 0.4;
   --form-border-opacity--disabled: 0.05;
 
   --form-opacity--ouline--default: 0.4;
@@ -115,8 +116,8 @@
   --form-border--disabled-color: hsla(var(--_contrast-color), var(--form-border-opacity--disabled));
 
   --form-placeholder-color: hsla(var(--_contrast-color), var(--form-placeholder-opacity));
-  --form-placeholder--hover-color: hsla(var(--_contrast-color), var(--form-placeholder-opacity--hover));
-  --form-placeholder--disabled-color: hsla(var(--_contrast-color), var(--form-opacity--disabled));
+  --form-placeholder-color--focus: hsla(var(--_contrast-color), var(--form-placeholder-opacity--focus));
+  --form-placeholder-color--disabled: hsla(var(--_contrast-color), var(--form-opacity--disabled));
 
   // outline
   --form-outline-label-color: hsla(var(--_contrast-color), var(--form-opacity--default));
@@ -124,9 +125,6 @@
   --form-outline-border-color: hsla(var(--_contrast-color), var(--form-opacity--ouline--default));
   --form-outline-border--hover-color: hsla(var(--_contrast-color), var(--form-opacity--ouline--hover));
 
-  --form-outline-placeholder-color: hsla(var(--_contrast-color), var(--form-opacity--ouline--default));
-  --form-outline-placeholder--hover-color: hsla(var(--_contrast-color), var(--form-opacity--ouline--hover));
-
   // TEXT OPACITY
   --text-opacity--default: var(--_opacity--default);
   --text-opacity----outline--default: 0.7;

package/src/css/{display-helpers → styleguide/display-helpers}/_display-helpers.scss

@@ -1,3 +1,5 @@
+@import '../viewport-breakpoints/viewport-breakpoints';
+
 .d-none {
   display: none;
 }

package/src/css/styleguide/elevations/_elevations.scss

@@ -0,0 +1,13 @@
+:root {
+  --_elevation-color: hsla(0, 0%, 0%, 0.08);
+  --elevation-1: 0px 0px 2px 1px var(--_elevation-color);
+  --elevation-2: 0px 0px 4px 2px var(--_elevation-color);
+  --elevation-3: 0px 0px 6px 3px var(--_elevation-color);
+  --elevation-4: 0px 0px 8px 4px var(--_elevation-color);
+  --elevation-5: 0px 0px 10px 5px var(--_elevation-color);
+  --elevation-6: 0px 0px 12px 6px var(--_elevation-color);
+  --elevation-7: 0px 0px 14px 7px var(--_elevation-color);
+  --elevation-8: 0px 0px 16px 8px var(--_elevation-color);
+  --elevation-9: 0px 0px 18px 9px var(--_elevation-color);
+  --elevation-10: 0px 0px 20px 10px var(--_elevation-color);
+}

package/src/css/styleguide/fonts/_fonts.scss

@@ -0,0 +1,126 @@
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-ThinItalic.ttf') format('truetype');
+  font-weight: 100;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraLight.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraLightItalic.ttf') format('truetype');
+  font-weight: 200;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-LightItalic.ttf') format('truetype');
+  font-weight: 300;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Italic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-MediumItalic.ttf') format('truetype');
+  font-weight: 500;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-SemiBoldItalic.ttf') format('truetype');
+  font-weight: 600;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-BoldItalic.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraBold.ttf') format('truetype');
+  font-weight: 800;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraBoldItalic.ttf') format('truetype');
+  font-weight: 800;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Black.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-BlackItalic.ttf') format('truetype');
+  font-weight: 900;
+  font-style: italic;
+}

package/src/css/styleguide/placeholder/_placeholder.scss

@@ -0,0 +1,49 @@
+// https://stackoverflow.com/a/17181946/17782185
+// https://stackoverflow.com/a/49192800/17782185
+
+@mixin optional-at-root($sel) {
+  @at-root #{if(not &, $sel, selector-append(&, $sel))} {
+    @content;
+  }
+}
+
+$vendors: (':-webkit', '-moz', ':-moz', '-ms');
+
+@mixin wt-placeholder($style: '') {
+  @each $vendor in $vendors {
+    @include optional-at-root(':#{$vendor}-input-placeholder') {
+      font: inherit;
+      transition: var(--transition);
+
+      @if ($style == 'focus') {
+        color: var(--form-placeholder-color--focus);
+      } @else if ($style == 'disabled') {
+        color: var(--form-placeholder-color--disabled);
+      } @else {
+        color: var(--form-placeholder-color);
+      }
+
+      @content;
+    }
+  }
+}
+
+/*
+  Classes for direct extending in placeholder-like elements styling
+   (e.g. vue-multiselect .multiselect__placeholder which is technically a span)
+*/
+%wt-placeholder {
+  font: inherit;
+  transition: var(--transition);
+  color: var(--form-placeholder-color);
+}
+
+%wt-placeholder--focus {
+  @extend %wt-placeholder;
+  color: var(--form-placeholder-color--focus);
+}
+
+%wt-placeholder--disabled {
+  @extend %wt-placeholder;
+  color: var(--form-placeholder-color--disabled);
+}

package/src/css/styleguide/spacings/_spacings.scss

@@ -0,0 +1,15 @@
+:root {
+  // Start point
+  --_spacing-multiplicator: 8px;
+
+  // Spacings
+  --spacing-3xs: calc(var(--_spacing-multiplicator) / 4);
+  --spacing-2xs: calc(var(--_spacing-multiplicator) / 2);
+  --spacing-xs: calc(var(--_spacing-multiplicator) * 1);
+  --spacing-sm: calc(var(--_spacing-multiplicator) * 2);
+  --spacing-md: calc(var(--_spacing-multiplicator) * 3);
+  --spacing-lg: calc(var(--_spacing-multiplicator) * 4);
+  --spacing-xl: calc(var(--_spacing-multiplicator) * 5);
+  --spacing-2xl: calc(var(--_spacing-multiplicator) * 6);
+  --spacing-3xl: calc(var(--_spacing-multiplicator) * 7);
+}

package/src/css/styleguide/transitions/_transitions.scss

@@ -0,0 +1 @@
+@import 'fade/fade';

package/src/css/styleguide/typography/_typography.scss

@@ -0,0 +1,102 @@
+
+%typo-heading-1 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 32px;
+    weight: 600;
+  }
+  line-height: 48px;
+  letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-heading-2 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 24px;
+    weight: 600;
+  }
+  line-height: 40px;
+  letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-heading-3 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 20px;
+    weight: 600;
+  }
+  line-height: 32px;
+  letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-subtitle-1 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 14px;
+    weight: 500;
+  }
+  line-height: 24px;
+  letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-subtitle-2 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 12px;
+    weight: 500;
+  }
+  line-height: 20px;
+  letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-body-1 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 14px;
+    weight: 400;
+  }
+  line-height: 24px;
+  letter-spacing: 0.56px; // 0.04em
+}
+
+%typo-body-2 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 12px;
+    weight: 400;
+  }
+  line-height: 20px;
+  letter-spacing: 0.16px; // 0.01em
+}
+
+%typo-button {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 12px;
+    weight: 500;
+  }
+  text-transform: uppercase;
+  line-height: 24px;
+  letter-spacing: 0.96px; // 0.06em
+}
+
+%typo-caption {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 10px;
+    weight: 400;
+  }
+  line-height: 16px;
+  letter-spacing: 0.48px; // 0.03em
+}
+
+%typo-overline {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 12px;
+    weight: 500;
+  }
+  line-height: 20px;
+  text-transform: uppercase;
+  letter-spacing: 2.56px; // 0.16em
+}

package/src/locale/en/en.js

@@ -1,9 +1,14 @@
-import { AgentStatus, CallDirection } from 'webitel-sdk';
+import {
+  AgentStatus,
+  CallDirection,
+  ChannelState,
+  ChannelType,
+} from 'webitel-sdk';
 import { QueueType } from 'webitel-sdk/esm2015/enums';
-import { snakeToCamel } from '../../scripts/caseConverters';
 import AdminSections from '../../enums/WebitelApplications/AdminSections.enum';
 import SupervisorSections from '../../enums/WebitelApplications/SupervisorSections.enum';
 import WebitelApplications from '../../enums/WebitelApplications/WebitelApplications.enum';
+import { snakeToCamel } from '../../scripts/caseConverters';
 
 export default {
   // describes reusable buttons, actions, default titles, and other ui elements
@@ -58,6 +63,26 @@ export default {
       },
     },
   },
+  channel: {
+    state: {
+      [ChannelState.Waiting]: 'Waiting',
+      [ChannelState.Distribute]: 'Distribute',
+      [ChannelState.Offering]: 'Offering',
+      [ChannelState.Answered]: 'Answered',
+      [ChannelState.Active]: 'Active',
+      [ChannelState.Bridged]: 'Bridged',
+      [ChannelState.Hold]: 'Hold',
+      [ChannelState.Missed]: 'Missed',
+      [snakeToCamel(ChannelState.WrapTime)]: 'Wrap time',
+      [ChannelState.Processing]: 'Processing',
+      [ChannelState.Transfer]: 'Transfer',
+    },
+    type: {
+      [ChannelType.Call]: 'Call',
+      [ChannelType.Email]: 'Email',
+      [ChannelType.Chat]: 'Chat',
+    },
+  },
   calls: {
     direction: {
       [CallDirection.Inbound]: 'Inbound',
@@ -186,7 +211,7 @@ export default {
         text: 'Sorry, you have not enough privileges to see this page.',
       },
       page404: {
-        title: "Looks like you're lost",
+        title: 'Looks like you\'re lost',
         text: 'Sorry, we can\'t find the page you want.',
       },
     },

package/src/locale/ru/ru.js

@@ -1,4 +1,9 @@
-import { AgentStatus, CallDirection } from 'webitel-sdk';
+import {
+  AgentStatus,
+  CallDirection,
+  ChannelState,
+  ChannelType,
+} from 'webitel-sdk';
 import { QueueType } from 'webitel-sdk/esm2015/enums';
 import AdminSections from '../../enums/WebitelApplications/AdminSections.enum';
 import SupervisorSections from '../../enums/WebitelApplications/SupervisorSections.enum';
@@ -58,6 +63,26 @@ export default {
       },
     },
   },
+  channel: {
+    state: {
+      [ChannelState.Waiting]: 'Ожидание',
+      [ChannelState.Distribute]: 'Зарезервирован',
+      [ChannelState.Offering]: 'Распределение',
+      [ChannelState.Answered]: 'Отвечен',
+      [ChannelState.Active]: 'Активный',
+      [ChannelState.Bridged]: 'Соединён',
+      [ChannelState.Hold]: 'Удержание',
+      [ChannelState.Missed]: 'Пропущен',
+      [snakeToCamel(ChannelState.WrapTime)]: 'Постобработка',
+      [ChannelState.Processing]: 'Обработка',
+      [ChannelState.Transfer]: 'Перевод',
+    },
+    type: {
+      [ChannelType.Call]: 'Звонок',
+      [ChannelType.Email]: 'Почта',
+      [ChannelType.Chat]: 'Чат',
+    },
+  },
   calls: {
     direction: {
       [CallDirection.Inbound]: 'Входящий | Входящие',