@zohodesk/dot 1.0.0-beta.223 → 1.0.0-beta.224

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (126) hide show
  1. package/README.md +6 -0
  2. package/assets/Appearance/dark/mode/dotDarkMode.module.css +2 -0
  3. package/assets/Appearance/default/mode/dotDefaultMode.module.css +2 -0
  4. package/es/ActionButton/ActionButton.module.css +25 -9
  5. package/es/AlphabeticList/AlphabeticList.module.css +7 -4
  6. package/es/Attachment/Attachment.module.css +20 -9
  7. package/es/AttachmentViewer/AttachmentViewer.module.css +82 -27
  8. package/es/ChannelIcon/ChannelIcon.module.css +30 -21
  9. package/es/Drawer/Drawer.module.css +59 -11
  10. package/es/FlipCard/FlipCard.module.css +14 -5
  11. package/es/FormAction/FormAction.module.css +34 -9
  12. package/es/FreezeLayer/FreezeLayer.js +3 -6
  13. package/es/FreezeLayer/FreezeLayer.module.css +6 -2
  14. package/es/IconButton/IconButton.module.css +1 -1
  15. package/es/ImportantNotes/ImportantNotes.js +5 -3
  16. package/es/ImportantNotes/ImportantNotes.module.css +7 -2
  17. package/es/Loader/Loader.module.css +25 -4
  18. package/es/Message/Message.module.css +42 -9
  19. package/es/MessageBanner/MessageBanner.module.css +12 -4
  20. package/es/NewStar/NewStar.module.css +42 -5
  21. package/es/ToastMessage/ToastMessage.module.css +96 -25
  22. package/es/Upload/Upload.module.css +27 -8
  23. package/es/alert/AlertHeader/AlertHeader.module.css +21 -3
  24. package/es/alert/AlertLookup/AlertLookup.module.css +6 -2
  25. package/es/avatar/AvatarClose/AvatarClose.module.css +9 -3
  26. package/es/avatar/AvatarCollision/AvatarCollision.module.css +18 -4
  27. package/es/avatar/AvatarIcon/AvatarIcon.module.css +3 -4
  28. package/es/avatar/AvatarStatus/AvatarStatus.module.css +59 -9
  29. package/es/avatar/AvatarThread/AvatarThread.module.css +55 -5
  30. package/es/avatar/AvatarUser/AvatarUser.module.css +81 -10
  31. package/es/avatar/AvatarWithTeam/AvatarWithTeam.module.css +10 -3
  32. package/es/common/dot_animation.module.css +16 -3
  33. package/es/deprecated/SelectDropdown/SelectDropdown.module.css +11 -3
  34. package/es/{utils → deprecated/utils}/KeyboardApi.js +0 -0
  35. package/es/dropdown/ToggleDropDown/ToggleDropDown.js +2 -0
  36. package/es/dropdown/ToggleDropDown/ToggleDropDown.module.css +19 -6
  37. package/es/emptystate/CommonEmptyState/CommonEmptyState.module.css +12 -4
  38. package/es/emptystate/EditionPage/EditionPage.css +9 -3
  39. package/es/errorstate/EmptyStates.module.css +13 -10
  40. package/es/errorstate/Inconvenience/Inconvenience.module.css +3 -0
  41. package/es/errorstate/LinkText/LinkText.module.css +1 -1
  42. package/es/errorstate/PermissionPlay/PermissionPlay.module.css +2 -2
  43. package/es/errorstate/WillBack/WillBack.module.css +1 -3
  44. package/es/form/fields/Fields.module.css +49 -14
  45. package/es/form/fields/TagsMultiSelect/TagsMultiSelect.module.css +19 -7
  46. package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.module.css +4 -1
  47. package/es/form/fields/TextEditor/TextEditor.module.css +149 -72
  48. package/es/form/fields/TextEditorWrapper/TextEditorWrapper.module.css +13 -2
  49. package/es/form/fields/ValidationMessage/ValidationMessage.module.css +9 -4
  50. package/es/layout/SetupDetailLayout/SetupDetailLayout.module.css +52 -16
  51. package/es/layout/SubtabLayout/SubtabLayout.module.css +55 -29
  52. package/es/list/BluePrintStatus/BluePrintStatus.module.css +4 -1
  53. package/es/list/Comment/Comment.module.css +5 -0
  54. package/es/list/DotNew/DotNew.module.css +3 -3
  55. package/es/list/GridStencils/GridStencils.module.css +71 -17
  56. package/es/list/Icons/Icons.module.css +1 -1
  57. package/es/list/ListLayout/ListLayout.module.css +22 -14
  58. package/es/list/ListStencils/ListStencils.module.css +11 -6
  59. package/es/list/SecondaryText/SecondaryText.module.css +13 -3
  60. package/es/list/SentimentStatus/SentimentStatus.module.css +4 -1
  61. package/es/list/TagNew/TagNew.module.css +14 -7
  62. package/es/list/Thread/Thread.module.css +13 -1
  63. package/es/list/UserTime/UserTime.module.css +6 -0
  64. package/es/list/listCommon.module.css +9 -1
  65. package/es/list/status/StatusDropdown/StatusDropdown.module.css +19 -6
  66. package/es/list/status/StatusListItem/StatusListItem.module.css +38 -15
  67. package/es/lookup/Lookup/Lookup.module.css +2 -2
  68. package/es/lookup/Section/LookupSection.module.css +2 -2
  69. package/es/lookup/header/Close/LookupClose.module.css +4 -4
  70. package/es/lookup/header/ModuleHeader/ModuleHeader.js +8 -3
  71. package/es/lookup/header/Search/LookupSearch.module.css +21 -12
  72. package/es/lookup/header/TicketHeader/TicketHeader.js +7 -4
  73. package/es/lookup/header/TicketHeader/TicketHeader.module.css +5 -2
  74. package/es/lookup/header/ViewDropDown/ViewDropDown.module.css +8 -3
  75. package/es/lookup/header/lookupHeaderCommon.module.css +21 -5
  76. package/es/lookup/header/lookupHeaderCommonResponsive.module.css +12 -3
  77. package/es/setup/header/Button/HeaderButton.module.css +3 -1
  78. package/es/setup/header/Link/HeaderLink.module.css +7 -1
  79. package/es/setup/header/Search/Search.module.css +19 -8
  80. package/es/setup/header/Views/Views.module.css +15 -5
  81. package/es/setup/helptips/Link/HelpTipsLink.module.css +1 -0
  82. package/es/setup/helptips/ListGroup/ListGroup.module.css +6 -1
  83. package/es/setup/table/TableData/SetupTableData.module.css +11 -3
  84. package/es/setup/table/TableHead/SetupTableHead.module.css +4 -0
  85. package/es/setup/table/TableRow/SetupTableRow.module.css +6 -2
  86. package/es/version2/AlertClose/AlertClose.module.css +1 -1
  87. package/es/version2/GlobalNotification/GlobalNotification.js +2 -0
  88. package/es/version2/GlobalNotification/GlobalNotification.module.css +44 -9
  89. package/es/version2/lookup/AlertHeader/AlertHeaderNew.module.css +25 -2
  90. package/es/version2/lookup/AlertLookup/AlertLookupNew.module.css +7 -3
  91. package/es/version2/lookup/alertLookupCommonNew.module.css +8 -1
  92. package/es/version2/notification/DesktopNotification/DesktopNotification.module.css +26 -10
  93. package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css +47 -10
  94. package/lib/ActionButton/ActionButton.module.css +0 -1
  95. package/lib/AttachmentViewer/Attachment.js +28 -0
  96. package/lib/AttachmentViewer/AttachmentImage.js +129 -0
  97. package/lib/AttachmentViewer/AttachmentViewer.js +645 -0
  98. package/lib/AttachmentViewer/AttachmentViewer.module.css +346 -0
  99. package/lib/AttachmentViewer/utils.js +134 -0
  100. package/lib/FreezeLayer/FreezeLayer.js +29 -4
  101. package/lib/ImportantNotes/ImportantNotes.js +5 -3
  102. package/lib/Provider/Config.js +21 -0
  103. package/lib/common/dot_animation.module.css +27 -0
  104. package/lib/common/dot_common.module.css +4 -0
  105. package/lib/deprecated/utils/General.js +29 -0
  106. package/lib/{utils → deprecated/utils}/KeyboardApi.js +0 -0
  107. package/lib/form/fields/CheckBoxField/CheckBoxField.js +1 -1
  108. package/lib/form/fields/CurrencyField/CurrencyField.js +9 -8
  109. package/lib/form/fields/DateField/DateField.js +1 -1
  110. package/lib/form/fields/MultiSelectField/MultiSelectField.js +1 -1
  111. package/lib/form/fields/PhoneField/PhoneField.js +1 -1
  112. package/lib/form/fields/RadioField/RadioField.js +1 -1
  113. package/lib/form/fields/SelectField/SelectField.js +1 -1
  114. package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js +27 -13
  115. package/lib/form/fields/TextBoxField/TextBoxField.js +1 -1
  116. package/lib/form/fields/TextEditor/TextEditor.js +4 -1
  117. package/lib/form/fields/TextEditor/TextEditor.module.css +13 -2
  118. package/lib/form/fields/TextareaField/TextareaField.js +1 -1
  119. package/lib/list/GridStencils/GridStencils.module.css +3 -1
  120. package/lib/list/status/StatusDropdown/StatusDropdown.js +44 -37
  121. package/lib/lookup/header/ModuleHeader/ModuleHeader.js +8 -3
  122. package/lib/lookup/header/TicketHeader/TicketHeader.js +7 -4
  123. package/lib/lookup/header/lookupHeaderCommon.module.css +8 -2
  124. package/lib/setup/header/Views/Views.js +2 -2
  125. package/lib/utils/General.js +0 -24
  126. package/package.json +7 -7
@@ -1,24 +1,34 @@
1
1
  .container {
2
2
  display: inline-block;
3
+ }[dir=ltr] .container {
3
4
  margin-right: var(--zd_size15);
5
+ }[dir=rtl] .container {
6
+ margin-left: var(--zd_size15);
4
7
  }
5
8
  .icon {
6
9
  display: inline-block;
7
- text-align: center;
8
- cursor: pointer;
9
10
  color: var(--zdt_views_icon);
10
- border: 1px solid var(--zdt_views_border);
11
11
  height: var(--zd_size28);
12
12
  width: var(--zd_size28);
13
13
  line-height: var(--zd_size26);
14
+ text-align: center;
15
+ cursor: pointer;
16
+ border: 1px solid var(--zdt_views_border);
14
17
  }
15
- .first {
18
+ [dir=ltr] .first {
16
19
  border-radius: 2px 0 0 2px;
17
20
  }
18
- .last {
21
+ [dir=rtl] .first {
22
+ border-radius: 0 2px 2px 0;
23
+ }
24
+ [dir=ltr] .last {
19
25
  border-radius: 0 2px 2px 0;
20
26
  border-left-width: 0;
21
27
  }
28
+ [dir=rtl] .last {
29
+ border-radius: 2px 0 0 2px;
30
+ border-right-width: 0;
31
+ }
22
32
  .icon:hover {
23
33
  color: var(--zdt_views_hover_icon);
24
34
  }
@@ -2,5 +2,6 @@
2
2
  .text {
3
3
  color: var(--zdt_helptipslink_text);
4
4
  font-size: var(--zd_font_size14);
5
+ }.container > a, .text {
5
6
  margin: var(--zd_size10) 0;
6
7
  }
@@ -5,10 +5,15 @@
5
5
  }
6
6
  .unOrderData,
7
7
  .orderData {
8
- margin: var(--zd_size15) 0 var(--zd_size15) var(--zd_size7);
9
8
  font-size: var(--zd_font_size14);
10
9
  color: var(--zdt_listgroup_text);
11
10
  }
11
+ [dir=ltr] .unOrderData, [dir=ltr] .orderData {
12
+ margin: var(--zd_size15) 0 var(--zd_size15) var(--zd_size7);
13
+ }
14
+ [dir=rtl] .unOrderData, [dir=rtl] .orderData {
15
+ margin: var(--zd_size15) var(--zd_size7) var(--zd_size15) 0;
16
+ }
12
17
  .orderData {
13
18
  list-style: decimal;
14
19
  }
@@ -1,5 +1,7 @@
1
- .container {
1
+ [dir=ltr] .container {
2
2
  padding-left: var(--zd_size20);
3
+ }[dir=rtl] .container {
4
+ padding-right: var(--zd_size20);
3
5
  }
4
6
  .size70 {
5
7
  flex-basis: var(--zd_size70);
@@ -28,9 +30,15 @@
28
30
  .center {
29
31
  text-align: center;
30
32
  }
31
- .left {
33
+ [dir=ltr] .left {
32
34
  text-align: left;
33
35
  }
34
- .right {
36
+ [dir=rtl] .left {
35
37
  text-align: right;
36
38
  }
39
+ [dir=ltr] .right {
40
+ text-align: right;
41
+ }
42
+ [dir=rtl] .right {
43
+ text-align: left;
44
+ }
@@ -1,7 +1,11 @@
1
1
  .container {
2
2
  border-bottom: 1px solid var(--zdt_setuptablehead_border);
3
+ }[dir=ltr] .container {
3
4
  padding-right: var(--zd_size40);
4
5
  padding-left: var(--zd_size40);
6
+ }[dir=rtl] .container {
7
+ padding-left: var(--zd_size40);
8
+ padding-right: var(--zd_size40);
5
9
  }
6
10
  .subContainer {
7
11
  height: var(--zd_size40);
@@ -1,9 +1,13 @@
1
1
  .container {
2
2
  position: relative;
3
+ height: var(--zd_size52);
4
+ border-bottom: 1px solid var(--zdt_setuptablerow_border);
5
+ }[dir=ltr] .container {
3
6
  margin-right: var(--zd_size40);
4
7
  margin-left: var(--zd_size40);
5
- border-bottom: 1px solid var(--zdt_setuptablerow_border);
6
- height: var(--zd_size52);
8
+ }[dir=rtl] .container {
9
+ margin-left: var(--zd_size40);
10
+ margin-right: var(--zd_size40);
7
11
  }
8
12
  .container:hover {
9
13
  background-color: var( --zdt_setuptablerow_hover_bg);
@@ -1,9 +1,9 @@
1
1
  .close {
2
2
  width: var(--zd_size25);
3
3
  height: var(--zd_size25);
4
+ color: var(--zdt_commonalert_close_icon);
4
5
  border-radius: var(--zd_size4);
5
6
  cursor: pointer;
6
- color: var(--zdt_commonalert_close_icon);
7
7
  }
8
8
 
9
9
  .closeIcon {
@@ -1,3 +1,5 @@
1
+ import "core-js/modules/es.array.includes";
2
+
1
3
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
4
 
3
5
  import React from 'react';
@@ -11,25 +11,38 @@
11
11
  top: 0;
12
12
  z-index: 1000;
13
13
  /*Hook for editor alert*/
14
- right: 0;
14
+ pointer-events: none;
15
15
  text-align: center;
16
+ }
17
+ [dir=ltr] .message {
18
+ right: 0;
16
19
  left: 0;
17
- pointer-events: none;
20
+ }
21
+ [dir=rtl] .message {
22
+ left: 0;
23
+ right: 0;
18
24
  }
19
25
 
20
26
  .container {
21
- padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75);
22
27
  position: relative;
23
28
  pointer-events: initial;
29
+ color: var(--globalnotification_text_color);
30
+ max-width: var(--zd_size490);
31
+ composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
24
32
  box-shadow: 0 4px 20px var(--globalnotification_box_shadow);
25
33
  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
26
34
  background-color: var(--globalnotification_bg_color);
27
35
  border-style: solid;
28
36
  border-color: var(--commonalert_border_color);
29
37
  border-width: 2px 1px 1px 1px;
30
- color: var(--globalnotification_text_color);
31
- max-width: var(--zd_size490);
32
- composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
38
+ }
39
+
40
+ [dir=ltr] .container {
41
+ padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75);
42
+ }
43
+
44
+ [dir=rtl] .container {
45
+ padding: var(--zd_size18) var(--zd_size75) var(--zd_size19) var(--zd_size70);
33
46
  }
34
47
 
35
48
  .icon {
@@ -38,10 +51,17 @@
38
51
  position: absolute;
39
52
  top: 0;
40
53
  bottom: 0;
41
- left: var(--zd_size18);
42
54
  margin: auto 0;
43
55
  }
44
56
 
57
+ [dir=ltr] .icon {
58
+ left: var(--zd_size18);
59
+ }
60
+
61
+ [dir=rtl] .icon {
62
+ right: var(--zd_size18);
63
+ }
64
+
45
65
  .success {
46
66
  --commonalert_border_color: var(--zdt_commonalert_success_border);
47
67
  --globalnotification_bg_color: var(--zdt_globalnotification_success_bg);
@@ -76,15 +96,30 @@
76
96
  font-size: var(--zd_font_size14);
77
97
  font-family: var(--zd_semibold);
78
98
  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
79
- text-align: left;
80
99
  line-height: var(--zd_size20);
81
100
  }
82
101
 
102
+ [dir=ltr] .text {
103
+ text-align: left;
104
+ }
105
+
106
+ [dir=rtl] .text {
107
+ text-align: right;
108
+ }
109
+
83
110
  .close {
84
111
  position: absolute;
85
112
  top: 0;
86
113
  bottom: 0;
114
+ height: var(--zd_size25);
115
+ }
116
+
117
+ [dir=ltr] .close {
87
118
  right: var(--zd_size12);
88
119
  margin: auto 0 auto var(--zd_size25);
89
- height: var(--zd_size25);
120
+ }
121
+
122
+ [dir=rtl] .close {
123
+ left: var(--zd_size12);
124
+ margin: auto var(--zd_size25) auto 0;
90
125
  }
@@ -11,8 +11,13 @@
11
11
  }
12
12
  .headerLayout {
13
13
  min-height: var(--zd_size54);
14
+ }
15
+ [dir=ltr] .headerLayout {
14
16
  padding: var(--zd_size15) var(--zd_size45) 0 var(--zd_size20);
15
17
  }
18
+ [dir=rtl] .headerLayout {
19
+ padding: var(--zd_size15) var(--zd_size20) 0 var(--zd_size45);
20
+ }
16
21
 
17
22
  .success {
18
23
  --commonalert_border_color: var(--zdt_commonalert_success_border);
@@ -34,10 +39,14 @@
34
39
  --commonalert_border_color: var(--zdt_commonalert_warning_border);
35
40
  }
36
41
 
37
- .extraSmall {
42
+ [dir=ltr] .extraSmall {
38
43
  padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) var(--zd_size16);
39
44
  }
40
45
 
46
+ [dir=rtl] .extraSmall {
47
+ padding: var(--zd_size12) var(--zd_size16) var(--zd_size12) var(--zd_size45);
48
+ }
49
+
41
50
  .iconContainer {
42
51
  height: var(--zd_size51);
43
52
  width: var(--zd_size51);
@@ -45,7 +54,6 @@
45
54
 
46
55
  .title {
47
56
  color: var(--zdt_alertlookupnew_text);
48
- margin: 0 var(--zd_size5) 0 var(--zd_size10);
49
57
  font-size: var(--zd_font_size18);
50
58
  line-height: var(--zd_size22);
51
59
  font-family: var(--zd_bold);
@@ -53,6 +61,14 @@
53
61
  vertical-align: middle;
54
62
  }
55
63
 
64
+ [dir=ltr] .title {
65
+ margin: 0 var(--zd_size5) 0 var(--zd_size10);
66
+ }
67
+
68
+ [dir=rtl] .title {
69
+ margin: 0 var(--zd_size10) 0 var(--zd_size5);
70
+ }
71
+
56
72
  .iconStyle {
57
73
  display: block;
58
74
  }
@@ -60,5 +76,12 @@
60
76
  .close {
61
77
  position: absolute;
62
78
  top: var(--zd_size12);
79
+ }
80
+
81
+ [dir=ltr] .close {
63
82
  right: var(--zd_size12);
83
+ }
84
+
85
+ [dir=rtl] .close {
86
+ left: var(--zd_size12);
64
87
  }
@@ -3,17 +3,21 @@
3
3
  }
4
4
 
5
5
  .innerSection {
6
- padding: var(--zd_size17) var(--zd_size30) var(--zd_size30);
7
6
  color: var(--zdt_alertlookupnew_text);
8
7
  font-size: var(--zd_font_size14);
9
8
  line-height: var(--zd_size18);
10
9
  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
10
+ padding: var(--zd_size17) var(--zd_size30) var(--zd_size30);
11
11
  }
12
12
 
13
- .buttonGap {
13
+ [dir=ltr] .buttonGap {
14
14
  margin: 0 0 0 var(--zd_size12);
15
15
  }
16
16
 
17
+ [dir=rtl] .buttonGap {
18
+ margin: 0 var(--zd_size12) 0 0;
19
+ }
20
+
17
21
  .confirmMsgText {
18
22
  margin-top: var(--zd_size20);
19
23
  }
@@ -23,8 +27,8 @@
23
27
  }
24
28
 
25
29
  .footer {
26
- border-radius: 0 0 var(--zd_size10) var(--zd_size10);
27
30
  overflow: hidden;
31
+ border-radius: 0 0 var(--zd_size10) var(--zd_size10);
28
32
  }
29
33
  .horizontalScroll, .verticalScroll, .bothScroll {
30
34
  height: 100%;
@@ -2,9 +2,16 @@
2
2
 
3
3
  .noteContainer {
4
4
  padding: var(--zd_size4) var(--zd_size30) 0;
5
+ }
6
+
7
+ [dir=ltr] .noteContainer {
5
8
  border-left: solid 1px var(--zdt_alertlookup_border);
6
9
  }
7
10
 
11
+ [dir=rtl] .noteContainer {
12
+ border-right: solid 1px var(--zdt_alertlookup_border);
13
+ }
14
+
8
15
  .noteTitle {
9
16
  font-size: var(--zd_font_size13);
10
17
  font-family: var(--zd_semibold);
@@ -20,7 +27,7 @@
20
27
  font-size: var(--zd_font_size12);
21
28
  /* line-height: var(--zd_size14); */
22
29
  color: var(--zdt_alertlookuop_text);
23
- margin-bottom: var(--zd_size15);
24
30
  list-style-type: disc;
25
31
  line-height: initial;
32
+ margin-bottom: var(--zd_size15);
26
33
  }
@@ -1,17 +1,22 @@
1
1
  .parentElement {
2
- margin-bottom: var(--zd_size7);
3
2
  position: relative;
3
+ margin-bottom: var(--zd_size7);
4
4
  }
5
5
  .container {
6
- background-color: var(--zdt_desktopnotification_bg);
7
6
  color: var(--zdt_desktopnotification_text);
8
7
  transition: all var(--zd_transition4);
9
8
  position: relative;
10
- transform-origin: right center;
11
9
  max-height: 100%;
10
+ pointer-events: auto;
11
+ background-color: var(--zdt_desktopnotification_bg);
12
12
  box-shadow: 0 4px 20px var(--zdt_desktopnotification_box_shadow);
13
13
  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
14
- pointer-events: auto;
14
+ }
15
+ [dir=ltr] .container {
16
+ transform-origin: right center;
17
+ }
18
+ [dir=rtl] .container {
19
+ transform-origin: left center;
15
20
  }
16
21
  .globalNotify {
17
22
  max-width: var(--zd_size490);
@@ -27,11 +32,17 @@
27
32
  /* Animation Style */
28
33
  .closeAnimation {
29
34
  max-height: 0;
30
- margin-bottom: 0;
31
35
  transition: all var(--zd_transition3) 0.4s;
36
+ margin-bottom: 0;
32
37
  }
33
38
  .animation {
34
39
  composes: modeForward from '~@zohodesk/components/lib/common/animation.module.css';
40
+ }
41
+ [dir=ltr] .animation {
42
+ animation-duration: var(--zd_transition4);
43
+ -webkit-animation-duration: var(--zd_transition4);
44
+ }
45
+ [dir=rtl] .animation {
35
46
  animation-duration: var(--zd_transition4);
36
47
  -webkit-animation-duration: var(--zd_transition4);
37
48
  }
@@ -40,8 +51,8 @@
40
51
  composes: animation;
41
52
  }
42
53
  .leftnoanimate {
43
- transform: translateX(0) scale(1);
44
54
  opacity: 1;
55
+ transform: translateX(0) scale(1);
45
56
  }
46
57
  .rightanimate {
47
58
  composes: slideRight from '~@zohodesk/components/lib/common/animation.module.css';
@@ -50,15 +61,20 @@
50
61
  }
51
62
  /* Container Style */
52
63
  .message {
53
- padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size76);
54
- border-top: 1px solid var(--zd_smoke1);
55
- cursor: pointer;
56
64
  position: relative;
57
65
  color: var(--zd_smoke18);
58
66
  font-size: var(--zd_font_size11);
59
67
  composes: dotted textCap from '~@zohodesk/components/lib/common/common.module.css';
60
68
  height: var(--zd_size33);
61
69
  transition: padding var(--zd_transition3), height var(--zd_transition3);
70
+ border-top: 1px solid var(--zd_smoke1);
71
+ cursor: pointer;
72
+ }
73
+ [dir=ltr] .message {
74
+ padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size76);
75
+ }
76
+ [dir=rtl] .message {
77
+ padding: var(--zd_size10) var(--zd_size76) var(--zd_size10) var(--zd_size20);
62
78
  }
63
79
  .message:hover {
64
80
  background: var(--zd_alabaster);
@@ -85,6 +101,6 @@
85
101
  margin-top: var(--zd_size20);
86
102
  }
87
103
  .footer {
88
- border-radius: 0 0 var(--zd_size10) var(--zd_size10);
89
104
  overflow: hidden;
105
+ border-radius: 0 0 var(--zd_size10) var(--zd_size10);
90
106
  }
@@ -5,20 +5,27 @@
5
5
  composes: varClass;
6
6
  min-height: var(--zd_size54);
7
7
  position: relative;
8
+ color: var(--zdt_desktopnotification_text);
8
9
  background-color: var(--alert_lookup_bg_color);
9
10
  border-style: solid;
10
11
  border-color: var(--commonalert_border_color);
11
12
  border-width: 2px 0 0 0;
12
- color: var(--zdt_desktopnotification_text);
13
13
  }
14
14
 
15
15
  .title {
16
- margin: 0 var(--zd_size5) 0 var(--zd_size10);
17
16
  font-size: var(--zd_font_size18);
18
17
  line-height: var(--zd_size22);
19
18
  font-family: var(--zd_bold);
20
19
  composes: ftsmooth wbreak from '~@zohodesk/components/lib/common/common.module.css';
21
20
  }
21
+
22
+ [dir=ltr] .title {
23
+ margin: 0 var(--zd_size5) 0 var(--zd_size10);
24
+ }
25
+
26
+ [dir=rtl] .title {
27
+ margin: 0 var(--zd_size10) 0 var(--zd_size5);
28
+ }
22
29
 
23
30
  .infoText {
24
31
  font-size: var(--zd_font_size14);
@@ -50,8 +57,11 @@
50
57
 
51
58
 
52
59
  /* Primary Header */
53
- .primary {
54
- padding: var(--zd_size15) var(--zd_size45) 0 var(--zd_size20);
60
+ [dir=ltr] .primary {
61
+ padding: var(--zd_size15) var(--zd_size45) 0 var(--zd_size20);
62
+ }
63
+ [dir=rtl] .primary {
64
+ padding: var(--zd_size15) var(--zd_size20) 0 var(--zd_size45);
55
65
  }
56
66
 
57
67
  .primary .iconContainer {
@@ -66,14 +76,26 @@
66
76
  .primary .close {
67
77
  position: absolute;
68
78
  top: var(--zd_size12);
69
- right: var(--zd_size12);
79
+ }
80
+
81
+ [dir=ltr] .primary .close {
82
+ right: var(--zd_size12);
83
+ }
84
+
85
+ [dir=rtl] .primary .close {
86
+ left: var(--zd_size12);
70
87
  }
71
88
 
72
89
  /* Secondary Header */
73
90
  .secondary {
74
- padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75);
75
- border-radius: 0 0 var(--zd_size10) var(--zd_size10);
76
91
  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
92
+ border-radius: 0 0 var(--zd_size10) var(--zd_size10);
93
+ }
94
+ [dir=ltr] .secondary {
95
+ padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75);
96
+ }
97
+ [dir=rtl] .secondary {
98
+ padding: var(--zd_size18) var(--zd_size75) var(--zd_size19) var(--zd_size70);
77
99
  }
78
100
 
79
101
  .secondary .infoText {
@@ -86,15 +108,30 @@
86
108
  position: absolute;
87
109
  top: 0;
88
110
  bottom: 0;
89
- left: var(--zd_size18);
90
111
  margin: auto 0;
91
112
  }
92
113
 
114
+ [dir=ltr] .secondary .iconContainer {
115
+ left: var(--zd_size18);
116
+ }
117
+
118
+ [dir=rtl] .secondary .iconContainer {
119
+ right: var(--zd_size18);
120
+ }
121
+
93
122
  .secondary .close {
94
123
  position: absolute;
95
124
  top: 0;
96
125
  bottom: 0;
97
- right: var(--zd_size12);
98
- margin: auto 0 auto var(--zd_size25);
99
126
  height: var(--zd_size25);
127
+ }
128
+
129
+ [dir=ltr] .secondary .close {
130
+ right: var(--zd_size12);
131
+ margin: auto 0 auto var(--zd_size25);
132
+ }
133
+
134
+ [dir=rtl] .secondary .close {
135
+ left: var(--zd_size12);
136
+ margin: auto var(--zd_size25) auto 0;
100
137
  }
@@ -119,7 +119,6 @@
119
119
  .btn {
120
120
  height: 100%;
121
121
  width: 100%;
122
- color:var(--dot_mirror)
123
122
  }
124
123
  .popupWrapper {
125
124
  padding: var(--zd_size10) 0;
@@ -0,0 +1,28 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.getExtensionFromFileName = getExtensionFromFileName;
7
+ exports.isAudioFile = isAudioFile;
8
+ exports.isBrowserSupportedFile = isBrowserSupportedFile;
9
+ var UNASSIGNED = 'Unassigned';
10
+ var BROWSER_SUPPORTED_FILES = ['pdf', 'text', 'txt', 'css', 'jpg', 'jpeg', 'gif', 'png', 'bmp', 'ico', 'sh', 'mp3', 'wav', 'ogg'];
11
+
12
+ function isAudioFile(fileName) {
13
+ var extension = getExtensionFromFileName(fileName);
14
+ return /mp3|wav|ogg/i.test(extension);
15
+ }
16
+
17
+ function getExtensionFromFileName(fileName) {
18
+ if (fileName && fileName.indexOf(".") !== -1) {
19
+ return fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase();
20
+ }
21
+
22
+ return "";
23
+ }
24
+
25
+ function isBrowserSupportedFile(fileName) {
26
+ var extension = getExtensionFromFileName(fileName);
27
+ return BROWSER_SUPPORTED_FILES.indexOf(extension) !== -1;
28
+ }