@zohodesk/dot 1.0.0-beta.215 → 1.0.0-beta.218

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 (130) hide show
  1. package/README.md +13 -0
  2. package/assets/Appearance/dark/mode/dotDarkMode.module.css +10 -0
  3. package/assets/Appearance/dark/themes/blue/blueDarkDotTheme.module.css +6 -0
  4. package/assets/Appearance/dark/themes/green/greenDarkDotTheme.module.css +6 -0
  5. package/assets/Appearance/dark/themes/orange/orangeDarkDotTheme.module.css +6 -0
  6. package/assets/Appearance/dark/themes/red/redDarkDotTheme.module.css +6 -0
  7. package/assets/Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css +6 -0
  8. package/assets/Appearance/default/mode/dotDefaultMode.module.css +10 -0
  9. package/assets/Appearance/default/themes/blue/blueDefaultDotTheme.module.css +6 -0
  10. package/assets/Appearance/default/themes/green/greenDefaultDotTheme.module.css +6 -0
  11. package/assets/Appearance/default/themes/orange/orangeDefaultDotTheme.module.css +6 -0
  12. package/assets/Appearance/default/themes/red/redDefaultDotTheme.module.css +6 -0
  13. package/assets/Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css +6 -0
  14. package/es/ActionButton/ActionButton.module.css +25 -9
  15. package/es/AlphabeticList/AlphabeticList.module.css +7 -4
  16. package/es/Attachment/Attachment.module.css +20 -9
  17. package/es/AttachmentViewer/Attachment.js +17 -0
  18. package/es/AttachmentViewer/AttachmentImage.js +85 -0
  19. package/es/AttachmentViewer/AttachmentViewer.js +530 -0
  20. package/es/AttachmentViewer/AttachmentViewer.module.css +346 -0
  21. package/es/AttachmentViewer/utils.js +107 -0
  22. package/es/ChannelIcon/ChannelIcon.module.css +30 -21
  23. package/es/Drawer/Drawer.module.css +59 -11
  24. package/es/FlipCard/FlipCard.module.css +14 -5
  25. package/es/FormAction/FormAction.module.css +34 -9
  26. package/es/FreezeLayer/FreezeLayer.module.css +6 -2
  27. package/es/IconButton/IconButton.module.css +1 -1
  28. package/es/ImportantNotes/ImportantNotes.module.css +7 -2
  29. package/es/Loader/Loader.module.css +25 -4
  30. package/es/Message/Message.module.css +42 -9
  31. package/es/MessageBanner/MessageBanner.module.css +12 -4
  32. package/es/NewStar/NewStar.module.css +42 -5
  33. package/es/ToastMessage/ToastMessage.module.css +96 -25
  34. package/es/Upload/Upload.module.css +27 -8
  35. package/es/alert/AlertHeader/AlertHeader.module.css +21 -3
  36. package/es/alert/AlertLookup/AlertLookup.module.css +6 -2
  37. package/es/avatar/AvatarClose/AvatarClose.module.css +9 -3
  38. package/es/avatar/AvatarCollision/AvatarCollision.module.css +18 -4
  39. package/es/avatar/AvatarIcon/AvatarIcon.module.css +3 -4
  40. package/es/avatar/AvatarStatus/AvatarStatus.module.css +59 -9
  41. package/es/avatar/AvatarThread/AvatarThread.module.css +55 -5
  42. package/es/avatar/AvatarUser/AvatarUser.module.css +81 -10
  43. package/es/avatar/AvatarWithTeam/AvatarWithTeam.module.css +10 -3
  44. package/es/common/dot_animation.module.css +27 -0
  45. package/es/common/dot_common.module.css +4 -0
  46. package/es/deprecated/SelectDropdown/SelectDropdown.module.css +11 -3
  47. package/es/dropdown/ToggleDropDown/ToggleDropDown.module.css +19 -6
  48. package/es/emptystate/CommonEmptyState/CommonEmptyState.module.css +12 -4
  49. package/es/emptystate/EditionPage/EditionPage.css +9 -3
  50. package/es/errorstate/EmptyStates.module.css +13 -10
  51. package/es/errorstate/Inconvenience/Inconvenience.module.css +3 -0
  52. package/es/errorstate/LinkText/LinkText.module.css +1 -1
  53. package/es/errorstate/PermissionPlay/PermissionPlay.module.css +2 -2
  54. package/es/errorstate/WillBack/WillBack.module.css +1 -3
  55. package/es/form/fields/CurrencyField/CurrencyField.js +1 -1
  56. package/es/form/fields/Fields.module.css +49 -14
  57. package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js +7 -4
  58. package/es/form/fields/TagsMultiSelect/TagsMultiSelect.module.css +19 -7
  59. package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.module.css +4 -1
  60. package/es/form/fields/TextEditor/TextEditor.module.css +149 -72
  61. package/es/form/fields/TextEditorWrapper/TextEditorWrapper.module.css +13 -2
  62. package/es/form/fields/ValidationMessage/ValidationMessage.module.css +9 -4
  63. package/es/layout/SetupDetailLayout/SetupDetailLayout.module.css +52 -16
  64. package/es/layout/SubtabLayout/SubtabLayout.module.css +55 -29
  65. package/es/list/BluePrintStatus/BluePrintStatus.module.css +4 -1
  66. package/es/list/Comment/Comment.module.css +5 -0
  67. package/es/list/DotNew/DotNew.module.css +3 -3
  68. package/es/list/GridStencils/GridStencils.module.css +70 -16
  69. package/es/list/Icons/Icons.module.css +1 -1
  70. package/es/list/ListLayout/ListLayout.module.css +22 -14
  71. package/es/list/ListStencils/ListStencils.module.css +11 -6
  72. package/es/list/SecondaryText/SecondaryText.module.css +13 -3
  73. package/es/list/SentimentStatus/SentimentStatus.module.css +4 -1
  74. package/es/list/TagNew/TagNew.module.css +14 -7
  75. package/es/list/Thread/Thread.module.css +13 -1
  76. package/es/list/UserTime/UserTime.module.css +6 -0
  77. package/es/list/listCommon.module.css +9 -1
  78. package/es/list/status/StatusDropdown/StatusDropdown.module.css +19 -6
  79. package/es/list/status/StatusListItem/StatusListItem.module.css +38 -15
  80. package/es/lookup/Lookup/Lookup.module.css +2 -2
  81. package/es/lookup/Section/LookupSection.module.css +2 -2
  82. package/es/lookup/header/Close/LookupClose.module.css +4 -4
  83. package/es/lookup/header/Search/LookupSearch.module.css +21 -12
  84. package/es/lookup/header/TicketHeader/TicketHeader.module.css +5 -2
  85. package/es/lookup/header/ViewDropDown/ViewDropDown.module.css +8 -3
  86. package/es/lookup/header/lookupHeaderCommon.module.css +16 -6
  87. package/es/lookup/header/lookupHeaderCommonResponsive.module.css +12 -3
  88. package/es/setup/header/Button/HeaderButton.module.css +3 -1
  89. package/es/setup/header/Link/HeaderLink.module.css +7 -1
  90. package/es/setup/header/Search/Search.module.css +19 -8
  91. package/es/setup/header/Views/Views.module.css +15 -5
  92. package/es/setup/helptips/Link/HelpTipsLink.module.css +1 -0
  93. package/es/setup/helptips/ListGroup/ListGroup.module.css +6 -1
  94. package/es/setup/table/TableData/SetupTableData.module.css +11 -3
  95. package/es/setup/table/TableHead/SetupTableHead.module.css +4 -0
  96. package/es/setup/table/TableRow/SetupTableRow.module.css +6 -2
  97. package/es/version2/AlertClose/AlertClose.module.css +1 -1
  98. package/es/version2/GlobalNotification/GlobalNotification.module.css +44 -9
  99. package/es/version2/lookup/AlertHeader/AlertHeaderNew.module.css +25 -2
  100. package/es/version2/lookup/AlertLookup/AlertLookupNew.module.css +7 -3
  101. package/es/version2/lookup/alertLookupCommonNew.module.css +8 -1
  102. package/es/version2/notification/DesktopNotification/DesktopNotification.module.css +26 -10
  103. package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css +47 -10
  104. package/images/audio_thumbnail.png +0 -0
  105. package/lib/ActionButton/ActionButton.module.css +0 -1
  106. package/lib/AttachmentViewer/Attachment.js +28 -0
  107. package/lib/AttachmentViewer/AttachmentImage.js +129 -0
  108. package/lib/AttachmentViewer/AttachmentViewer.js +613 -0
  109. package/lib/AttachmentViewer/AttachmentViewer.module.css +346 -0
  110. package/lib/AttachmentViewer/utils.js +134 -0
  111. package/lib/FreezeLayer/FreezeLayer.js +31 -4
  112. package/lib/Provider/Config.js +21 -0
  113. package/lib/common/dot_animation.module.css +27 -0
  114. package/lib/common/dot_common.module.css +4 -0
  115. package/lib/deprecated/utils/General.js +29 -0
  116. package/lib/form/fields/CheckBoxField/CheckBoxField.js +1 -1
  117. package/lib/form/fields/CurrencyField/CurrencyField.js +9 -8
  118. package/lib/form/fields/DateField/DateField.js +1 -1
  119. package/lib/form/fields/MultiSelectField/MultiSelectField.js +1 -1
  120. package/lib/form/fields/PhoneField/PhoneField.js +1 -1
  121. package/lib/form/fields/RadioField/RadioField.js +1 -1
  122. package/lib/form/fields/SelectField/SelectField.js +1 -1
  123. package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js +7 -4
  124. package/lib/form/fields/TextBoxField/TextBoxField.js +1 -1
  125. package/lib/form/fields/TextEditor/TextEditor.module.css +13 -2
  126. package/lib/form/fields/TextareaField/TextareaField.js +1 -1
  127. package/lib/list/status/StatusDropdown/StatusDropdown.js +44 -37
  128. package/lib/setup/header/Views/Views.js +2 -2
  129. package/lib/utils/General.js +0 -24
  130. package/package.json +15 -13
@@ -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
  }
Binary file
@@ -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,129 @@
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 _AttachmentViewerModule = _interopRequireDefault(require("./AttachmentViewer.module.css"));
15
+
16
+ var _Image = _interopRequireDefault(require("../Image/Image"));
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
+ }, /*#__PURE__*/_react["default"].createElement("div", {
101
+ className: _AttachmentViewerModule["default"].loader
102
+ })) : null, /*#__PURE__*/_react["default"].createElement(_Image["default"], {
103
+ htmlId: id,
104
+ eleRef: this.imageEle,
105
+ dataId: dataId,
106
+ src: src,
107
+ onClick: onClick,
108
+ className: "".concat(isLoading ? _AttachmentViewerModule["default"].hide : '', " ").concat(className),
109
+ alt: alt,
110
+ isCover: isCover
111
+ }));
112
+ }
113
+ }]);
114
+
115
+ return AttachmentImage;
116
+ }(_react.Component);
117
+
118
+ exports["default"] = AttachmentImage;
119
+ AttachmentImage.propTypes = {
120
+ alt: _propTypes["default"].string,
121
+ className: _propTypes["default"].string,
122
+ dataId: _propTypes["default"].string,
123
+ id: _propTypes["default"].string,
124
+ isCover: _propTypes["default"].bool,
125
+ isImage: _propTypes["default"].string,
126
+ onClick: _propTypes["default"].func,
127
+ onLoad: _propTypes["default"].func,
128
+ src: _propTypes["default"].string
129
+ };