@zohodesk/dot 1.0.0-beta.225 → 1.0.0-beta.226

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 (135) hide show
  1. package/README.md +7 -0
  2. package/assets/Appearance/dark/mode/dotDarkMode.module.css +2 -0
  3. package/assets/Appearance/dark/themes/blue/blueDarkDotTheme.module.css +1 -1
  4. package/assets/Appearance/default/mode/dotDefaultMode.module.css +2 -0
  5. package/assets/Appearance/default/themes/blue/blueDefaultDotTheme.module.css +1 -1
  6. package/assets/Appearance/pureDark/mode/dotPureDarkMode.module.css +533 -0
  7. package/assets/Appearance/pureDark/themes/blue/bluePureDarkDotTheme.module.css +16 -0
  8. package/assets/Appearance/pureDark/themes/green/greenPureDarkDotTheme.module.css +16 -0
  9. package/assets/Appearance/pureDark/themes/orange/orangePureDarkDotTheme.module.css +16 -0
  10. package/assets/Appearance/pureDark/themes/red/redPureDarkDotTheme.module.css +16 -0
  11. package/assets/Appearance/pureDark/themes/yellow/yellowPureDarkDotTheme.module.css +16 -0
  12. package/es/ActionButton/ActionButton.module.css +25 -9
  13. package/es/AlphabeticList/AlphabeticList.module.css +7 -4
  14. package/es/Attachment/Attachment.module.css +20 -9
  15. package/es/AttachmentViewer/AttachmentImage.js +5 -1
  16. package/es/AttachmentViewer/AttachmentViewer.js +3 -2
  17. package/es/AttachmentViewer/AttachmentViewer.module.css +90 -27
  18. package/es/ChannelIcon/ChannelIcon.module.css +30 -21
  19. package/es/Drawer/Drawer.module.css +59 -11
  20. package/es/FlipCard/FlipCard.module.css +14 -5
  21. package/es/FormAction/FormAction.module.css +34 -9
  22. package/es/FreezeLayer/FreezeLayer.module.css +6 -2
  23. package/es/IconButton/IconButton.module.css +1 -1
  24. package/es/ImportantNotes/ImportantNotes.module.css +7 -2
  25. package/es/Loader/Loader.module.css +25 -4
  26. package/es/Message/Message.module.css +42 -9
  27. package/es/MessageBanner/MessageBanner.module.css +12 -4
  28. package/es/NewStar/NewStar.module.css +42 -5
  29. package/es/Provider.js +88 -35
  30. package/es/ToastMessage/ToastMessage.module.css +96 -25
  31. package/es/Upload/Upload.module.css +27 -8
  32. package/es/alert/AlertHeader/AlertHeader.module.css +21 -3
  33. package/es/alert/AlertLookup/AlertLookup.module.css +6 -2
  34. package/es/avatar/AvatarClose/AvatarClose.module.css +9 -3
  35. package/es/avatar/AvatarCollision/AvatarCollision.module.css +18 -4
  36. package/es/avatar/AvatarIcon/AvatarIcon.module.css +3 -4
  37. package/es/avatar/AvatarStatus/AvatarStatus.module.css +59 -9
  38. package/es/avatar/AvatarThread/AvatarThread.module.css +55 -5
  39. package/es/avatar/AvatarUser/AvatarUser.module.css +81 -10
  40. package/es/avatar/AvatarWithTeam/AvatarWithTeam.module.css +10 -3
  41. package/es/common/dot_animation.module.css +16 -3
  42. package/es/deprecated/SelectDropdown/SelectDropdown.module.css +11 -3
  43. package/es/dropdown/ToggleDropDown/ToggleDropDown.module.css +19 -6
  44. package/es/emptystate/CommonEmptyState/CommonEmptyState.module.css +12 -4
  45. package/es/emptystate/EditionPage/EditionPage.css +9 -3
  46. package/es/errorstate/EmptyStates.module.css +13 -10
  47. package/es/errorstate/Inconvenience/Inconvenience.module.css +3 -0
  48. package/es/errorstate/LinkText/LinkText.module.css +1 -1
  49. package/es/errorstate/PermissionPlay/PermissionPlay.module.css +2 -2
  50. package/es/errorstate/WillBack/WillBack.module.css +1 -3
  51. package/es/form/fields/Fields.module.css +49 -14
  52. package/es/form/fields/TagsMultiSelect/TagsMultiSelect.module.css +19 -7
  53. package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.module.css +4 -1
  54. package/es/form/fields/TextEditor/TextEditor.module.css +149 -72
  55. package/es/form/fields/TextEditorWrapper/TextEditorWrapper.module.css +13 -2
  56. package/es/form/fields/ValidationMessage/ValidationMessage.module.css +9 -4
  57. package/es/layout/SetupDetailLayout/SetupDetailLayout.module.css +52 -16
  58. package/es/layout/SubtabLayout/SubtabLayout.module.css +55 -29
  59. package/es/list/BluePrintStatus/BluePrintStatus.module.css +4 -1
  60. package/es/list/Comment/Comment.module.css +5 -0
  61. package/es/list/DotNew/DotNew.module.css +3 -3
  62. package/es/list/GridStencils/GridStencils.module.css +71 -17
  63. package/es/list/Icons/Icons.module.css +1 -1
  64. package/es/list/ListLayout/ListLayout.module.css +22 -14
  65. package/es/list/ListStencils/ListStencils.module.css +11 -6
  66. package/es/list/SecondaryText/SecondaryText.module.css +14 -4
  67. package/es/list/SentimentStatus/SentimentStatus.module.css +4 -1
  68. package/es/list/TagNew/TagNew.module.css +14 -7
  69. package/es/list/Thread/Thread.module.css +13 -1
  70. package/es/list/UserTime/UserTime.module.css +6 -0
  71. package/es/list/listCommon.module.css +9 -1
  72. package/es/list/status/StatusDropdown/StatusDropdown.module.css +19 -6
  73. package/es/list/status/StatusListItem/StatusListItem.module.css +38 -15
  74. package/es/lookup/Lookup/Lookup.module.css +2 -2
  75. package/es/lookup/Section/LookupSection.module.css +2 -2
  76. package/es/lookup/header/Close/LookupClose.module.css +4 -4
  77. package/es/lookup/header/Search/LookupSearch.module.css +21 -12
  78. package/es/lookup/header/TicketHeader/TicketHeader.module.css +5 -2
  79. package/es/lookup/header/ViewDropDown/ViewDropDown.module.css +8 -3
  80. package/es/lookup/header/lookupHeaderCommon.module.css +15 -5
  81. package/es/lookup/header/lookupHeaderCommonResponsive.module.css +12 -3
  82. package/es/setup/header/Button/HeaderButton.module.css +3 -1
  83. package/es/setup/header/Link/HeaderLink.module.css +7 -1
  84. package/es/setup/header/Search/Search.module.css +19 -8
  85. package/es/setup/header/Views/Views.module.css +15 -5
  86. package/es/setup/helptips/Link/HelpTipsLink.module.css +1 -0
  87. package/es/setup/helptips/ListGroup/ListGroup.module.css +6 -1
  88. package/es/setup/table/TableData/SetupTableData.module.css +11 -3
  89. package/es/setup/table/TableHead/SetupTableHead.module.css +4 -0
  90. package/es/setup/table/TableRow/SetupTableRow.module.css +6 -2
  91. package/es/version2/AlertClose/AlertClose.module.css +1 -1
  92. package/es/version2/GlobalNotification/GlobalNotification.module.css +44 -9
  93. package/es/version2/lookup/AlertHeader/AlertHeaderNew.module.css +25 -2
  94. package/es/version2/lookup/AlertLookup/AlertLookupNew.module.css +7 -3
  95. package/es/version2/lookup/alertLookupCommonNew.module.css +8 -1
  96. package/es/version2/notification/DesktopNotification/DesktopNotification.module.css +26 -10
  97. package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css +47 -10
  98. package/lib/ActionButton/ActionButton.module.css +0 -1
  99. package/lib/AttachmentViewer/Attachment.js +28 -0
  100. package/lib/AttachmentViewer/AttachmentImage.js +133 -0
  101. package/lib/AttachmentViewer/AttachmentViewer.js +646 -0
  102. package/lib/AttachmentViewer/AttachmentViewer.module.css +354 -0
  103. package/lib/AttachmentViewer/utils.js +134 -0
  104. package/lib/FreezeLayer/FreezeLayer.js +29 -4
  105. package/lib/ImportantNotes/ImportantNotes.js +5 -3
  106. package/lib/Provider/Config.js +21 -0
  107. package/lib/Provider.js +112 -37
  108. package/lib/common/dot_animation.module.css +27 -0
  109. package/lib/common/dot_common.module.css +4 -0
  110. package/lib/deprecated/utils/General.js +29 -0
  111. package/lib/{utils → deprecated/utils}/KeyboardApi.js +0 -0
  112. package/lib/dropdown/ToggleDropDown/ToggleDropDown.js +1 -1
  113. package/lib/form/fields/CheckBoxField/CheckBoxField.js +1 -1
  114. package/lib/form/fields/CurrencyField/CurrencyField.js +9 -8
  115. package/lib/form/fields/DateField/DateField.js +1 -1
  116. package/lib/form/fields/MultiSelectField/MultiSelectField.js +1 -1
  117. package/lib/form/fields/PhoneField/PhoneField.js +1 -1
  118. package/lib/form/fields/RadioField/RadioField.js +1 -1
  119. package/lib/form/fields/SelectField/SelectField.js +1 -1
  120. package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js +27 -13
  121. package/lib/form/fields/TextBoxField/TextBoxField.js +1 -1
  122. package/lib/form/fields/TextEditor/TextEditor.js +4 -1
  123. package/lib/form/fields/TextEditor/TextEditor.module.css +13 -2
  124. package/lib/form/fields/TextareaField/TextareaField.js +1 -1
  125. package/lib/list/DepartmentDropDown/DepartmentDropDown.js +1 -1
  126. package/lib/list/GridStencils/GridStencils.module.css +3 -1
  127. package/lib/list/SecondaryText/SecondaryText.module.css +1 -1
  128. package/lib/list/status/StatusDropdown/StatusDropdown.js +45 -38
  129. package/lib/lookup/header/ModuleHeader/ModuleHeader.js +8 -3
  130. package/lib/lookup/header/TicketHeader/TicketHeader.js +7 -4
  131. package/lib/lookup/header/lookupHeaderCommon.module.css +8 -2
  132. package/lib/setup/header/Views/Views.js +2 -2
  133. package/lib/utils/General.js +0 -24
  134. package/package.json +7 -7
  135. package/es/utils/KeyboardApi.js +0 -294
@@ -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 {
@@ -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
+ }
@@ -0,0 +1,133 @@
1
+ "use strict";
2
+
3
+ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports["default"] = void 0;
9
+
10
+ var _react = _interopRequireWildcard(require("react"));
11
+
12
+ var _propTypes = _interopRequireDefault(require("prop-types"));
13
+
14
+ var _Image = _interopRequireDefault(require("../Image/Image"));
15
+
16
+ var _AttachmentViewerModule = _interopRequireDefault(require("./AttachmentViewer.module.css"));
17
+
18
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
19
+
20
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
21
+
22
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
23
+
24
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
25
+
26
+ function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
27
+
28
+ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
29
+
30
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
31
+
32
+ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
33
+
34
+ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
35
+
36
+ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
37
+
38
+ function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
39
+
40
+ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
41
+
42
+ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
43
+
44
+ var AttachmentImage = /*#__PURE__*/function (_Component) {
45
+ _inherits(AttachmentImage, _Component);
46
+
47
+ var _super = _createSuper(AttachmentImage);
48
+
49
+ function AttachmentImage(props) {
50
+ var _this;
51
+
52
+ _classCallCheck(this, AttachmentImage);
53
+
54
+ _this = _super.call(this, props);
55
+ _this.imageEle = /*#__PURE__*/_react["default"].createRef();
56
+ _this.state = {
57
+ isLoading: true
58
+ };
59
+ _this.imgLoad = _this.imgLoad.bind(_assertThisInitialized(_this));
60
+ return _this;
61
+ }
62
+
63
+ _createClass(AttachmentImage, [{
64
+ key: "componentDidMount",
65
+ value: function componentDidMount() {
66
+ var isImage = this.props.isImage;
67
+
68
+ if (isImage) {
69
+ var image = this.imageEle.current;
70
+ image.addEventListener('load', this.imgLoad);
71
+ } else {
72
+ this.setState({
73
+ isLoading: false
74
+ });
75
+ }
76
+ }
77
+ }, {
78
+ key: "imgLoad",
79
+ value: function imgLoad() {
80
+ this.setState({
81
+ isLoading: false
82
+ });
83
+ var onLoad = this.props.onLoad;
84
+ onLoad && onLoad();
85
+ }
86
+ }, {
87
+ key: "render",
88
+ value: function render() {
89
+ var _this$props = this.props,
90
+ src = _this$props.src,
91
+ onClick = _this$props.onClick,
92
+ alt = _this$props.alt,
93
+ dataId = _this$props.dataId,
94
+ id = _this$props.id,
95
+ className = _this$props.className,
96
+ isCover = _this$props.isCover;
97
+ var isLoading = this.state.isLoading;
98
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isLoading ? /*#__PURE__*/_react["default"].createElement("div", {
99
+ className: "".concat(_AttachmentViewerModule["default"].spinLoad),
100
+ "data-id": "".concat(dataId, "_loader")
101
+ }, /*#__PURE__*/_react["default"].createElement("div", {
102
+ className: _AttachmentViewerModule["default"].loader
103
+ })) : null, /*#__PURE__*/_react["default"].createElement(_Image["default"], {
104
+ htmlId: id,
105
+ eleRef: this.imageEle,
106
+ dataId: dataId,
107
+ src: src,
108
+ onClick: onClick,
109
+ className: "".concat(isLoading ? _AttachmentViewerModule["default"].hide : '', " ").concat(className),
110
+ alt: alt,
111
+ isCover: isCover
112
+ }));
113
+ }
114
+ }]);
115
+
116
+ return AttachmentImage;
117
+ }(_react.Component);
118
+
119
+ exports["default"] = AttachmentImage;
120
+ AttachmentImage.propTypes = {
121
+ alt: _propTypes["default"].string,
122
+ className: _propTypes["default"].string,
123
+ dataId: _propTypes["default"].string,
124
+ id: _propTypes["default"].string,
125
+ isCover: _propTypes["default"].bool,
126
+ isImage: _propTypes["default"].string,
127
+ onClick: _propTypes["default"].func,
128
+ onLoad: _propTypes["default"].func,
129
+ src: _propTypes["default"].string
130
+ };
131
+ AttachmentImage.defaultProps = {
132
+ dataId: 'AttachmentImage'
133
+ };