@desynova-digital/components 8.19.14 → 8.19.16

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 (5) hide show
  1. package/components.js +41 -1
  2. package/index.js +10 -2
  3. package/molecules/table/table.js +41 -32
  4. package/molecules/table/table.story.js +1 -0
  5. package/package.json +2 -2
package/components.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.Loader = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.DateTime = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
6
+ exports.Shimmer = exports.GraphTitleShimmer = exports.GraphsComponentShimmer = exports.GraphDetailsShimmer = exports.FiltersShimmer = exports.CollabShimmerCardTray = exports.CollabShimmerCard = exports.CollabErrorScreen = exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.Loader = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.DateTime = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
7
7
 
8
8
  require("./_helpers/globals");
9
9
 
@@ -187,6 +187,38 @@ var _errorScreen = require("./molecules/errorScreen/errorScreen");
187
187
 
188
188
  var _errorScreen2 = _interopRequireDefault(_errorScreen);
189
189
 
190
+ var _CollabErrorScreen = require("./atoms/loader/ShimmerComponent/CollabErrorScreen");
191
+
192
+ var _CollabErrorScreen2 = _interopRequireDefault(_CollabErrorScreen);
193
+
194
+ var _CollabShimmerCard = require("./atoms/loader/ShimmerComponent/CollabShimmerCard");
195
+
196
+ var _CollabShimmerCard2 = _interopRequireDefault(_CollabShimmerCard);
197
+
198
+ var _CollabShimmerCardTray = require("./atoms/loader/ShimmerComponent/CollabShimmerCardTray");
199
+
200
+ var _CollabShimmerCardTray2 = _interopRequireDefault(_CollabShimmerCardTray);
201
+
202
+ var _FiltersShimmer = require("./atoms/loader/ShimmerComponent/FiltersShimmer");
203
+
204
+ var _FiltersShimmer2 = _interopRequireDefault(_FiltersShimmer);
205
+
206
+ var _GraphDetailShimmer = require("./atoms/loader/ShimmerComponent/GraphDetailShimmer");
207
+
208
+ var _GraphDetailShimmer2 = _interopRequireDefault(_GraphDetailShimmer);
209
+
210
+ var _GraphsComponentShimmer = require("./atoms/loader/ShimmerComponent/GraphsComponentShimmer");
211
+
212
+ var _GraphsComponentShimmer2 = _interopRequireDefault(_GraphsComponentShimmer);
213
+
214
+ var _GraphTitleShimmer = require("./atoms/loader/ShimmerComponent/GraphTitleShimmer");
215
+
216
+ var _GraphTitleShimmer2 = _interopRequireDefault(_GraphTitleShimmer);
217
+
218
+ var _Shimmer = require("./atoms/loader/ShimmerComponent/Shimmer");
219
+
220
+ var _Shimmer2 = _interopRequireDefault(_Shimmer);
221
+
190
222
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
191
223
 
192
224
  /* Molecules */
@@ -243,5 +275,13 @@ exports.Tabs = _tabs2.default;
243
275
  exports.Carousel = _carousel2.default;
244
276
  exports.ErrorScreen = _errorScreen2.default;
245
277
  exports.SideBar = _sidebar2.default;
278
+ exports.CollabErrorScreen = _CollabErrorScreen2.default;
279
+ exports.CollabShimmerCard = _CollabShimmerCard2.default;
280
+ exports.CollabShimmerCardTray = _CollabShimmerCardTray2.default;
281
+ exports.FiltersShimmer = _FiltersShimmer2.default;
282
+ exports.GraphDetailsShimmer = _GraphDetailShimmer2.default;
283
+ exports.GraphsComponentShimmer = _GraphsComponentShimmer2.default;
284
+ exports.GraphTitleShimmer = _GraphTitleShimmer2.default;
285
+ exports.Shimmer = _Shimmer2.default;
246
286
 
247
287
  /* atoms */
package/index.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.Loader = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.DateTime = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
6
+ exports.Shimmer = exports.GraphTitleShimmer = exports.GraphsComponentShimmer = exports.GraphDetailsShimmer = exports.FiltersShimmer = exports.CollabShimmerCardTray = exports.CollabShimmerCard = exports.CollabErrorScreen = exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.Loader = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.DateTime = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
7
7
 
8
8
  var _components = require("./components");
9
9
 
@@ -51,4 +51,12 @@ exports.VideoPlayer = _components.VideoPlayer;
51
51
  exports.Tabs = _components.Tabs;
52
52
  exports.Carousel = _components.Carousel;
53
53
  exports.ErrorScreen = _components.ErrorScreen;
54
- exports.SideBar = _components.SideBar;
54
+ exports.SideBar = _components.SideBar;
55
+ exports.CollabErrorScreen = _components.CollabErrorScreen;
56
+ exports.CollabShimmerCard = _components.CollabShimmerCard;
57
+ exports.CollabShimmerCardTray = _components.CollabShimmerCardTray;
58
+ exports.FiltersShimmer = _components.FiltersShimmer;
59
+ exports.GraphDetailsShimmer = _components.GraphDetailsShimmer;
60
+ exports.GraphsComponentShimmer = _components.GraphsComponentShimmer;
61
+ exports.GraphTitleShimmer = _components.GraphTitleShimmer;
62
+ exports.Shimmer = _components.Shimmer;
package/molecules/table/table.js CHANGED
@@ -20,8 +20,10 @@ var _templateObject = _taggedTemplateLiteral(["\n border-bottom: 1px solid #303
20
20
  _templateObject8 = _taggedTemplateLiteral([""], [""]),
21
21
  _templateObject9 = _taggedTemplateLiteral(["\n .show-row {\n transform: rotate(-180deg);\n -webkit-transform: rotate(-180deg);\n -moz-transform: rotate(-180deg);\n -ms-transform: rotate(-180deg);\n -o-transform: rotate(-180deg);\n }\n .hide-row {\n transform: rotate(0deg);\n -webkit-transform: rotate(0deg);\n -moz-transform: rotate(0deg);\n -ms-transform: rotate(0deg);\n -o-transform: rotate(0deg);\n }\n .show-row,\n .hide-row {\n transition: transform 0.5s ease-in-out;\n -webkit-transition: transform 0.5s ease-in-out;\n -moz-transition: transform 0.5s ease-in-out;\n -ms-transition: transform 0.5s ease-in-out;\n -o-transition: transform 0.5s ease-in-out;\n text-align: right;\n cursor: pointer;\n }\n\n &.selected-row > td,\n &.selected-row:nth-child(even) > td {\n background: ", ";\n }\n\n &:nth-child(even) > td {\n background: ", ";\n }\n\n &:hover {\n .asset-play {\n color: #00cec6;\n }\n }\n\n ", " {\n margin: 0px;\n box-shadow: 0px 0px 0px transparent;\n ", ";\n }\n"], ["\n .show-row {\n transform: rotate(-180deg);\n -webkit-transform: rotate(-180deg);\n -moz-transform: rotate(-180deg);\n -ms-transform: rotate(-180deg);\n -o-transform: rotate(-180deg);\n }\n .hide-row {\n transform: rotate(0deg);\n -webkit-transform: rotate(0deg);\n -moz-transform: rotate(0deg);\n -ms-transform: rotate(0deg);\n -o-transform: rotate(0deg);\n }\n .show-row,\n .hide-row {\n transition: transform 0.5s ease-in-out;\n -webkit-transition: transform 0.5s ease-in-out;\n -moz-transition: transform 0.5s ease-in-out;\n -ms-transition: transform 0.5s ease-in-out;\n -o-transition: transform 0.5s ease-in-out;\n text-align: right;\n cursor: pointer;\n }\n\n &.selected-row > td,\n &.selected-row:nth-child(even) > td {\n background: ", ";\n }\n\n &:nth-child(even) > td {\n background: ", ";\n }\n\n &:hover {\n .asset-play {\n color: #00cec6;\n }\n }\n\n ", " {\n margin: 0px;\n box-shadow: 0px 0px 0px transparent;\n ", ";\n }\n"]),
22
22
  _templateObject10 = _taggedTemplateLiteral(["\n font-family: 'SFUIText-Regular';\n font-size: 12px;\n letter-spacing: 0.4px;\n color: ", "; \n padding: 7px 14px;\n // border-top: 1px solid ", "; \n text-align: left;\n vertical-align: middle;\n line-height: 2;\n width: ", ";\n max-width: 200px;\n\n &.tableHolder{\n padding:0px;\n }\n\n .asset-play {\n cursor: pointer;\n background-color: transparent;\n border: none;\n color: #dddddd;\n &:hover, &:focus {\n outline: none;\n color: #00cec6;\n text-decoration: underline;\n }\n }\n\n .icon-circle {\n border-radius: 50%;\n width: 24px;\n height: 24px;\n display: flex;\n text-align: center;\n justify-content: center;\n align-items: center;\n i {\n line-height: 0;\n }\n }\n\n // max-width: 0;\n // overflow: hidden;\n // text-overflow: ellipsis;\n // white-space: nowrap;\n\n & > div.text-box {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n &.text-linkexpired {\n color: #FF6C56;\n }\n }\n & > div.action-icons-cell{\n white-space: nowrap;\n\n .tooltip-block {\n top: -50px;\n }\n \n .action-item-btn {\n padding: 0 15px;\n cursor: pointer;\n background-color: transparent;\n\n &.nested {\n border-bottom: 1px solid #303f51;\n display: flex;\n padding: 10px;\n align-items: center;\n &>div:first-child{\n margin-right:10px;\n }\n &:last-child{\n border-bottom: 0px none;\n }\n }\n\n &:hover {\n transition: color 0.4s ease-out;\n color: #00cec6;\n path{\n fill: #00cec6;\n transition: fill 0.4s ease-out;\n }\n }\n }\n\n\n &>button{\n margin-right: 15px;\n display: inline-flex;\n }\n &>button:last-child{\n margin-right: 0px;\n }\n\n .more-action-holder {\n position: relative;\n\n &:hover {\n .more-action-list-box{\n display:block;\n }\n .more-action-icon{\n transition: all 0.4s ease-out;\n background: #00cec6;\n }\n }\n\n .more-action-icon{\n height: 24px;\n width: 24px;\n background: #303f51;\n border-radius: 50%;\n padding: 0px 10px;\n transform: translate(0px, -1px);\n }\n .more-action-list-box{\n position: absolute;\n z-index:100;\n display:none;\n //display:block;\n padding-top: 11px;\n transform: translate(-136px,-2px);\n \n .more-action-list {\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2);\n background: ", ";\n min-width: 200px;\n }\n\n &:before{\n content: '';\n position: absolute;\n /* left: 42%; */\n /* top: 100%; */\n width: 0;\n height: 0;\n \n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-bottom: 6px solid #00cec6;\n transform: translate(144px,-6px);\n }\n\n }\n\n }\n }\n\n .nested-table {\n background: #182738;\n border-left: 2px solid #00CEC6;\n }\n\n\n"], ["\n font-family: 'SFUIText-Regular';\n font-size: 12px;\n letter-spacing: 0.4px;\n color: ", "; \n padding: 7px 14px;\n // border-top: 1px solid ", "; \n text-align: left;\n vertical-align: middle;\n line-height: 2;\n width: ", ";\n max-width: 200px;\n\n &.tableHolder{\n padding:0px;\n }\n\n .asset-play {\n cursor: pointer;\n background-color: transparent;\n border: none;\n color: #dddddd;\n &:hover, &:focus {\n outline: none;\n color: #00cec6;\n text-decoration: underline;\n }\n }\n\n .icon-circle {\n border-radius: 50%;\n width: 24px;\n height: 24px;\n display: flex;\n text-align: center;\n justify-content: center;\n align-items: center;\n i {\n line-height: 0;\n }\n }\n\n // max-width: 0;\n // overflow: hidden;\n // text-overflow: ellipsis;\n // white-space: nowrap;\n\n & > div.text-box {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n &.text-linkexpired {\n color: #FF6C56;\n }\n }\n & > div.action-icons-cell{\n white-space: nowrap;\n\n .tooltip-block {\n top: -50px;\n }\n \n .action-item-btn {\n padding: 0 15px;\n cursor: pointer;\n background-color: transparent;\n\n &.nested {\n border-bottom: 1px solid #303f51;\n display: flex;\n padding: 10px;\n align-items: center;\n &>div:first-child{\n margin-right:10px;\n }\n &:last-child{\n border-bottom: 0px none;\n }\n }\n\n &:hover {\n transition: color 0.4s ease-out;\n color: #00cec6;\n path{\n fill: #00cec6;\n transition: fill 0.4s ease-out;\n }\n }\n }\n\n\n &>button{\n margin-right: 15px;\n display: inline-flex;\n }\n &>button:last-child{\n margin-right: 0px;\n }\n\n .more-action-holder {\n position: relative;\n\n &:hover {\n .more-action-list-box{\n display:block;\n }\n .more-action-icon{\n transition: all 0.4s ease-out;\n background: #00cec6;\n }\n }\n\n .more-action-icon{\n height: 24px;\n width: 24px;\n background: #303f51;\n border-radius: 50%;\n padding: 0px 10px;\n transform: translate(0px, -1px);\n }\n .more-action-list-box{\n position: absolute;\n z-index:100;\n display:none;\n //display:block;\n padding-top: 11px;\n transform: translate(-136px,-2px);\n \n .more-action-list {\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2);\n background: ", ";\n min-width: 200px;\n }\n\n &:before{\n content: '';\n position: absolute;\n /* left: 42%; */\n /* top: 100%; */\n width: 0;\n height: 0;\n \n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-bottom: 6px solid #00cec6;\n transform: translate(144px,-6px);\n }\n\n }\n\n }\n }\n\n .nested-table {\n background: #182738;\n border-left: 2px solid #00CEC6;\n }\n\n\n"]),
23
- _templateObject11 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n .detail-block {\n display: flex;\n justify-content: center;\n align-items: center;\n\n &:not(:last-child) {\n margin-right: 7px;\n }\n\n .status-color {\n width: 7px;\n height: 7px;\n margin-right: 6px;\n border-radius: 100%;\n background: rgba(255, 255, 255, 0.3);\n &.approved {\n background: #00cec6;\n }\n &.rejected {\n background: #ef5350;\n }\n }\n .language-name {\n text-transform: capitalize;\n font-size: 12px;\n font-family: SFUIText-Regular;\n color: #fff;\n }\n }\n"], ["\n display: flex;\n align-items: center;\n .detail-block {\n display: flex;\n justify-content: center;\n align-items: center;\n\n &:not(:last-child) {\n margin-right: 7px;\n }\n\n .status-color {\n width: 7px;\n height: 7px;\n margin-right: 6px;\n border-radius: 100%;\n background: rgba(255, 255, 255, 0.3);\n &.approved {\n background: #00cec6;\n }\n &.rejected {\n background: #ef5350;\n }\n }\n .language-name {\n text-transform: capitalize;\n font-size: 12px;\n font-family: SFUIText-Regular;\n color: #fff;\n }\n }\n"]),
24
- _templateObject12 = _taggedTemplateLiteral(["\n width: 20px;\n height: 20px;\n background: transparent;\n border: ", ";\n border-radius: 50%;\n cursor: pointer;\n position: absolute;\n left: 14px;\n z-index: 2;\n top: 75px;\n .input-select-all-button {\n height: 0px;\n width: 0px;\n display: none;\n }\n .label-select-all-button {\n position: relative;\n cursor: pointer;\n display: flex;\n margin: 0px;\n height: 20px;\n align-items: center;\n border-radius: 50%;\n background: ", ";\n .span-select-all-button {\n display: ", ";\n position: absolute;\n top: 10px;\n left: 5px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0 100%;\n animation: ", ";\n }\n }\n"], ["\n width: 20px;\n height: 20px;\n background: transparent;\n border: ", ";\n border-radius: 50%;\n cursor: pointer;\n position: absolute;\n left: 14px;\n z-index: 2;\n top: 75px;\n .input-select-all-button {\n height: 0px;\n width: 0px;\n display: none;\n }\n .label-select-all-button {\n position: relative;\n cursor: pointer;\n display: flex;\n margin: 0px;\n height: 20px;\n align-items: center;\n border-radius: 50%;\n background: ", ";\n .span-select-all-button {\n display: ", ";\n position: absolute;\n top: 10px;\n left: 5px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0 100%;\n animation: ", ";\n }\n }\n"]);
23
+ _templateObject11 = _taggedTemplateLiteral(["\n height: 30px;\n position: absolute;\n left: -1px;\n z-index: 2;\n display: flex;\n width: 100%;\n top: -40px;\n"], ["\n height: 30px;\n position: absolute;\n left: -1px;\n z-index: 2;\n display: flex;\n width: 100%;\n top: -40px;\n"]),
24
+ _templateObject12 = _taggedTemplateLiteral(["\n display: flex;\n height: 30px;\n position: absolute;\n right: 0px;\n gap: 2px;\n"], ["\n display: flex;\n height: 30px;\n position: absolute;\n right: 0px;\n gap: 2px;\n"]),
25
+ _templateObject13 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n .detail-block {\n display: flex;\n justify-content: center;\n align-items: center;\n\n &:not(:last-child) {\n margin-right: 7px;\n }\n\n .status-color {\n width: 7px;\n height: 7px;\n margin-right: 6px;\n border-radius: 100%;\n background: rgba(255, 255, 255, 0.3);\n &.approved {\n background: #00cec6;\n }\n &.rejected {\n background: #ef5350;\n }\n }\n .language-name {\n text-transform: capitalize;\n font-size: 12px;\n font-family: SFUIText-Regular;\n color: #fff;\n }\n }\n"], ["\n display: flex;\n align-items: center;\n .detail-block {\n display: flex;\n justify-content: center;\n align-items: center;\n\n &:not(:last-child) {\n margin-right: 7px;\n }\n\n .status-color {\n width: 7px;\n height: 7px;\n margin-right: 6px;\n border-radius: 100%;\n background: rgba(255, 255, 255, 0.3);\n &.approved {\n background: #00cec6;\n }\n &.rejected {\n background: #ef5350;\n }\n }\n .language-name {\n text-transform: capitalize;\n font-size: 12px;\n font-family: SFUIText-Regular;\n color: #fff;\n }\n }\n"]),
26
+ _templateObject14 = _taggedTemplateLiteral(["\n width: 20px;\n height: 20px;\n background: transparent;\n border: ", ";\n border-radius: 50%;\n cursor: pointer;\n position: absolute;\n left: 14px;\n z-index: 2;\n top: 75px;\n .input-select-all-button {\n height: 0px;\n width: 0px;\n display: none;\n }\n .label-select-all-button {\n position: relative;\n cursor: pointer;\n display: flex;\n margin: 0px;\n height: 20px;\n align-items: center;\n border-radius: 50%;\n background: ", ";\n .span-select-all-button {\n display: ", ";\n position: absolute;\n top: 10px;\n left: 5px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0 100%;\n animation: ", ";\n }\n }\n"], ["\n width: 20px;\n height: 20px;\n background: transparent;\n border: ", ";\n border-radius: 50%;\n cursor: pointer;\n position: absolute;\n left: 14px;\n z-index: 2;\n top: 75px;\n .input-select-all-button {\n height: 0px;\n width: 0px;\n display: none;\n }\n .label-select-all-button {\n position: relative;\n cursor: pointer;\n display: flex;\n margin: 0px;\n height: 20px;\n align-items: center;\n border-radius: 50%;\n background: ", ";\n .span-select-all-button {\n display: ", ";\n position: absolute;\n top: 10px;\n left: 5px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0 100%;\n animation: ", ";\n }\n }\n"]);
25
27
 
26
28
  var _react = require("react");
27
29
 
@@ -87,6 +89,10 @@ var _inputText = require("../../atoms/inputText");
87
89
 
88
90
  var _inputText2 = _interopRequireDefault(_inputText);
89
91
 
92
+ var _Shimmer = require("../../atoms/loader/ShimmerComponent/Shimmer");
93
+
94
+ var _Shimmer2 = _interopRequireDefault(_Shimmer);
95
+
90
96
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
91
97
 
92
98
  function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -208,7 +214,7 @@ var Table = function (_Component) {
208
214
 
209
215
  _this.actionElements = function (item, column, idx) {
210
216
  if (item[column.field] === undefined) {
211
- return _react2.default.createElement(Shimmer, { height: "16px", width: "100%" });
217
+ return _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100%" });
212
218
  }
213
219
  var arrLength = item[column.field].length;
214
220
  var elements = item[column.field].reduce(function (acc, curr) {
@@ -325,7 +331,7 @@ var Table = function (_Component) {
325
331
  case "extra_columns":
326
332
  {
327
333
  if (tableLoading) {
328
- return _react2.default.createElement(Shimmer, { height: "16px", width: "100%" });
334
+ return _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100%" });
329
335
  } else {
330
336
  return _react2.default.createElement("div", {
331
337
  onClick: function onClick(e) {
@@ -353,10 +359,10 @@ var Table = function (_Component) {
353
359
  case "link_text":
354
360
  {
355
361
  if (tableLoading) {
356
- return _react2.default.createElement(Shimmer, { height: "16px", width: "100%" });
362
+ return _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100%" });
357
363
  } else {
358
364
  if (item.actions === undefined) {
359
- return _react2.default.createElement(Shimmer, { height: "16px", width: "100%" });
365
+ return _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100%" });
360
366
  } else {
361
367
  var isPlayable = item.actions.includes("play");
362
368
  return _react2.default.createElement(
@@ -376,7 +382,7 @@ var Table = function (_Component) {
376
382
 
377
383
  case "action_icon":
378
384
  if (tableLoading) {
379
- return _react2.default.createElement(Shimmer, { height: "16px", width: "100%" });
385
+ return _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100%" });
380
386
  } else {
381
387
  return _this.actionElements(item, column, idx);
382
388
  }
@@ -386,7 +392,7 @@ var Table = function (_Component) {
386
392
 
387
393
  case "date":
388
394
  if (tableLoading) {
389
- return _react2.default.createElement(Shimmer, { height: "16px", width: "100%" });
395
+ return _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100%" });
390
396
  } else {
391
397
  return _react2.default.createElement(
392
398
  "div",
@@ -397,7 +403,7 @@ var Table = function (_Component) {
397
403
 
398
404
  case "time":
399
405
  if (tableLoading) {
400
- return _react2.default.createElement(Shimmer, { height: "16px", width: "100%" });
406
+ return _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100%" });
401
407
  } else {
402
408
  return _react2.default.createElement(
403
409
  "div",
@@ -408,7 +414,7 @@ var Table = function (_Component) {
408
414
 
409
415
  case "datetime":
410
416
  if (tableLoading) {
411
- return _react2.default.createElement(Shimmer, { height: "16px", width: "100%" });
417
+ return _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100%" });
412
418
  } else {
413
419
  return _react2.default.createElement(
414
420
  "div",
@@ -455,7 +461,7 @@ var Table = function (_Component) {
455
461
  case "label":
456
462
  {
457
463
  if (tableLoading) {
458
- return _react2.default.createElement(Shimmer, { height: "16px", width: "100%" });
464
+ return _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100%" });
459
465
  } else {
460
466
  if (item[column.field]) {
461
467
  return _react2.default.createElement(
@@ -472,7 +478,7 @@ var Table = function (_Component) {
472
478
  case "dubbing_status":
473
479
  {
474
480
  if (tableLoading) {
475
- return _react2.default.createElement(Shimmer, { height: "16px", width: "100%" });
481
+ return _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100%" });
476
482
  } else {
477
483
  if (item[column.field] && Array.isArray(item[column.field])) {
478
484
  return _react2.default.createElement(
@@ -500,7 +506,7 @@ var Table = function (_Component) {
500
506
  case "rowChecked":
501
507
  {
502
508
  if (tableLoading) {
503
- return _react2.default.createElement(Shimmer, { height: "16px", width: "100%" });
509
+ return _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100%" });
504
510
  } else {
505
511
  return _react2.default.createElement(
506
512
  "div",
@@ -521,7 +527,7 @@ var Table = function (_Component) {
521
527
 
522
528
  default:
523
529
  if (tableLoading) {
524
- return _react2.default.createElement(Shimmer, { height: "16px", width: "100%" });
530
+ return _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100%" });
525
531
  } else {
526
532
  if (typeof item[column.field] === "string" || typeof item[column.field] === "number" || Array.isArray(item[column.field])) {
527
533
  var className = "text-box";
@@ -1067,15 +1073,15 @@ var Table = function (_Component) {
1067
1073
  marginBottom: "15px"
1068
1074
  }
1069
1075
  },
1070
- _react2.default.createElement(Shimmer, { height: "16px", width: "100px" }),
1071
- _react2.default.createElement(Shimmer, { height: "16px", width: "110px" }),
1072
- _react2.default.createElement(Shimmer, { height: "16px", width: "110px" }),
1073
- _react2.default.createElement(Shimmer, { height: "16px", width: "120px" }),
1074
- _react2.default.createElement(Shimmer, { height: "16px", width: "100px" }),
1075
- _react2.default.createElement(Shimmer, { height: "16px", width: "110px" }),
1076
- _react2.default.createElement(Shimmer, { height: "16px", width: "100px" }),
1077
- _react2.default.createElement(Shimmer, { height: "16px", width: "100px" }),
1078
- _react2.default.createElement(Shimmer, { height: "16px", width: "50px" })
1076
+ _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100px" }),
1077
+ _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "110px" }),
1078
+ _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "110px" }),
1079
+ _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "120px" }),
1080
+ _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100px" }),
1081
+ _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "110px" }),
1082
+ _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100px" }),
1083
+ _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100px" }),
1084
+ _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "50px" })
1079
1085
  );
1080
1086
  })
1081
1087
  );
@@ -1274,16 +1280,16 @@ var Table = function (_Component) {
1274
1280
  this.props.tableLoading && _react2.default.createElement(
1275
1281
  TableTitleLoadingInitial,
1276
1282
  null,
1277
- _react2.default.createElement(Shimmer, { height: "20px", width: "150px" }),
1283
+ _react2.default.createElement(_Shimmer2.default, { height: "20px", width: "150px" }),
1278
1284
  _react2.default.createElement(
1279
1285
  RightSideTitleLoadingTable,
1280
1286
  null,
1281
- _react2.default.createElement(Shimmer, { height: "18px", width: "200px" }),
1282
- _react2.default.createElement(Shimmer, { height: "18px", width: "100px" }),
1283
- _react2.default.createElement(Shimmer, { height: "18px", width: "150px" }),
1284
- _react2.default.createElement(Shimmer, { height: "18px", width: "30px" }),
1285
- _react2.default.createElement(Shimmer, { height: "18px", width: "30px" }),
1286
- _react2.default.createElement(Shimmer, { height: "18px", width: "30px" })
1287
+ _react2.default.createElement(_Shimmer2.default, { height: "18px", width: "200px" }),
1288
+ _react2.default.createElement(_Shimmer2.default, { height: "18px", width: "100px" }),
1289
+ _react2.default.createElement(_Shimmer2.default, { height: "18px", width: "150px" }),
1290
+ _react2.default.createElement(_Shimmer2.default, { height: "18px", width: "30px" }),
1291
+ _react2.default.createElement(_Shimmer2.default, { height: "18px", width: "30px" }),
1292
+ _react2.default.createElement(_Shimmer2.default, { height: "18px", width: "30px" })
1287
1293
  )
1288
1294
  ) || _react2.default.createElement(
1289
1295
  "div",
@@ -1619,8 +1625,11 @@ Table.Cell = _styledComponents2.default.td(_templateObject10, function (props) {
1619
1625
  return _tokens.colors[props.theme].table.innerTableBackground;
1620
1626
  });
1621
1627
 
1622
- var DubbingStatusStyles = _styledComponents2.default.div(_templateObject11);
1623
- var SelectAllButton = _styledComponents2.default.div(_templateObject12, function (props) {
1628
+ var TableTitleLoadingInitial = _styledComponents2.default.div(_templateObject11);
1629
+ var RightSideTitleLoadingTable = _styledComponents2.default.div(_templateObject12);
1630
+
1631
+ var DubbingStatusStyles = _styledComponents2.default.div(_templateObject13);
1632
+ var SelectAllButton = _styledComponents2.default.div(_templateObject14, function (props) {
1624
1633
  return props.isActive ? "1px solid #9E9E9E" : "";
1625
1634
  }, function (props) {
1626
1635
  return !props.isActive ? "#49dad0" : "";
package/molecules/table/table.story.js CHANGED
@@ -296,6 +296,7 @@ var data = {
296
296
  , rowSelectionChange: function rowSelectionChange(selectedRows) {
297
297
  console.log("rowSelectionChange::::", selectedRows);
298
298
  },
299
+ tableLoading: true,
299
300
  actionLable: {
300
301
  play: "Play",
301
302
  subtitle: "Subtitle",
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "8.19.14",
3
+ "version": "8.19.16",
4
4
  "description": "Components for Desynova Digital",
5
5
  "main": "index.js",
6
6
  "author": "desynova-digital",
7
7
  "license": "MIT",
8
8
  "repository": "desynova-digital",
9
9
  "dependencies": {
10
- "@desynova-digital/tokens": "8.19.14",
10
+ "@desynova-digital/tokens": "8.19.16",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },