@zohodesk/components 1.0.0-temp-199.3 → 1.0.0-temp-213

package/{es/v1 → lib}/Typography/css/Typography.module.css

@@ -3,231 +3,297 @@
   margin: initial ;
   padding: initial ;
 }
-.dotted{
-  composes: dotted from '../../../common/common.module.css';
+
+.dotted {
+  composes: dotted from '../../common/common.module.css';
 }
+
 .display_block {
   display: block;
 }
+
 .display_inlineBlock {
   display: inline-block;
 }
+
 .display_inline {
   display: inline;
 }
-.display_initial{
+
+.display_initial {
   display: initial;
 }
+
 .font_regular {
   font-family: var(--zd_regular);
 }
+
 .font_light {
   font-family: var(--zd_light);
 }
+
 .font_semibold {
   font-family: var(--zd_semibold);
-  composes: ftsmooth from '../../../common/common.module.css';
+  composes: ftsmooth from '../../common/common.module.css';
 }
+
 .font_bold {
   font-family: var(--zd_bold);
-  composes: ftsmooth from '../../../common/common.module.css';
+  composes: ftsmooth from '../../common/common.module.css';
 }
-.fontStyles_normal{
+
+.fontStyles_normal {
   font-style: normal;
 }
-.fontStyles_italic{
+
+.fontStyles_italic {
   font-style: italic;
 }
-.decoration_default{
+
+.decoration_default {
   text-decoration: none;
 }
-.decoration_underline{
+
+.decoration_underline {
   text-decoration: underline;
 }
-.decoration_strike{
+
+.decoration_strike {
   text-decoration: line-through;
 }
-.decoration_overline{
+
+.decoration_overline {
   text-decoration: overline;
 }
-[dir=ltr] .textalign_left{
+
+[dir=ltr] .textalign_left {
   text-align: left;
 }
-[dir=rtl] .textalign_left{
+
+[dir=rtl] .textalign_left {
   text-align: right;
 }
-[dir=ltr] .textalign_right{
+
+[dir=ltr] .textalign_right {
   text-align: right;
 }
-[dir=rtl] .textalign_right{
+
+[dir=rtl] .textalign_right {
   text-align: left;
 }
-.textalign_center{
+
+.textalign_center {
   text-align: center;
 }
-.textalign_justify{
+
+.textalign_justify {
   text-align: justify;
 }
-.transform_default{
+
+.transform_default {
   text-transform: none;
 }
-.transform_upper{
+
+.transform_upper {
   text-transform: uppercase;
 }
-.transform_lower{
+
+.transform_lower {
   text-transform: lowercase;
 }
-.transform_capital{
+
+.transform_capital {
   text-transform: capitalize;
 }
-.dotted_clamp{
+
+.dotted_clamp {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
-.lineclamp_1{
+
+.lineclamp_1 {
   -webkit-line-clamp: 1;
-  composes:dotted_clamp;
+  composes: dotted_clamp;
 }
-.lineclamp_2{
+
+.lineclamp_2 {
   -webkit-line-clamp: 2;
-  composes:dotted_clamp;
+  composes: dotted_clamp;
 }
-.lineclamp_3{
+
+.lineclamp_3 {
   -webkit-line-clamp: 3;
-  composes:dotted_clamp;
+  composes: dotted_clamp;
 }
-.lineclamp_4{
+
+.lineclamp_4 {
   -webkit-line-clamp: 4;
-  composes:dotted_clamp;
+  composes: dotted_clamp;
 }
-.lineclamp_5{
+
+.lineclamp_5 {
   -webkit-line-clamp: 5;
-  composes:dotted_clamp;
+  composes: dotted_clamp;
 }
 
-.wordBreak_breakAll{
+.wordBreak_breakAll {
   word-break: break-all
 }
-.wordBreak_keepAll{
+
+.wordBreak_keepAll {
   word-break: keep-all
 }
-.wordBreak_breakWord{
+
+.wordBreak_breakWord {
   word-break: break-word
 }
 
-.wordWrap_normal{
-  word-wrap:normal;
+.wordWrap_normal {
+  word-wrap: normal;
 }
-.wordWrap_break{
-  word-wrap:break-word
+
+.wordWrap_break {
+  word-wrap: break-word
 }
 
-.whiteSpace_normal{
-  white-space:normal
+.whiteSpace_normal {
+  white-space: normal
 }
-.whiteSpace_noWrap{
-  white-space:nowrap
+
+.whiteSpace_noWrap {
+  white-space: nowrap
 }
-.whiteSpace_pre{
-  white-space:pre
+
+.whiteSpace_pre {
+  white-space: pre
 }
-.whiteSpace_preLine{
-  white-space:pre-line
+
+.whiteSpace_preLine {
+  white-space: pre-line
 }
-.whiteSpace_preWrap{
-  white-space:pre-wrap
+
+.whiteSpace_preWrap {
+  white-space: pre-wrap
 }
 
 
 
 /*...............Font Size Start.........*/
 
-.size7{
+.size7 {
   font-size: var(--zd_font_size7) ;
 }
-.size8{
+
+.size8 {
   font-size: var(--zd_font_size8) ;
 }
-.size9{
+
+.size9 {
   font-size: var(--zd_font_size9) ;
 }
-.size10{
+
+.size10 {
   font-size: var(--zd_font_size10) ;
 }
-.size11{
+
+.size11 {
   font-size: var(--zd_font_size11) ;
 }
-.size12{
+
+.size12 {
   font-size: var(--zd_font_size12) ;
 }
-.size13{
+
+.size13 {
   font-size: var(--zd_font_size13) ;
 }
-.size14{
+
+.size14 {
   font-size: var(--zd_font_size14) ;
 }
-.size15{
+
+.size15 {
   font-size: var(--zd_font_size15) ;
 }
-.size16{
+
+.size16 {
   font-size: var(--zd_font_size16) ;
 }
-.size17{
+
+.size17 {
   font-size: var(--zd_font_size17) ;
 }
-.size18{
+
+.size18 {
   font-size: var(--zd_font_size18) ;
 }
-.size19{
+
+.size19 {
   font-size: var(--zd_font_size19) ;
 }
-.size20{
+
+.size20 {
   font-size: var(--zd_font_size20) ;
 }
-.size21{
+
+.size21 {
   font-size: var(--zd_font_size21) ;
 }
-.size22{
+
+.size22 {
   font-size: var(--zd_font_size22) ;
 }
-.size24{
+
+.size24 {
   font-size: var(--zd_font_size24) ;
 }
-.size25{
+
+.size25 {
   font-size: var(--zd_font_size25) ;
 }
-.size26{
+
+.size26 {
   font-size: var(--zd_font_size26) ;
 }
-.size28{
+
+.size28 {
   font-size: var(--zd_font_size28) ;
 }
-.size29{
+
+.size29 {
   font-size: var(--zd_font_size29) ;
 }
-.size30{
+
+.size30 {
   font-size: var(--zd_font_size30) ;
 }
-.size32{
+
+.size32 {
   font-size: var(--zd_font_size32) ;
 }
-.size34{
+
+.size34 {
   font-size: var(--zd_font_size34) ;
 }
-.size35{
+
+.size35 {
   font-size: var(--zd_font_size35) ;
 }
-.size36{
+
+.size36 {
   font-size: var(--zd_font_size36) ;
 }
-.size40{
+
+.size40 {
   font-size: var(--zd_font_size40) ;
 }
-.size50{
+
+.size50 {
   font-size: var(--zd_font_size50) ;
 }
-.sizeinherit{
+
+.sizeinherit {
   font-size: inherit ;
 }
 
@@ -235,76 +301,99 @@
 
 /*............... Lineheight Start.........*/
 
-.lineheight_inherit{
+.lineheight_inherit {
   line-height: inherit;
 }
-.lineheight_initial{
+
+.lineheight_initial {
   line-height: initial;
 }
-.lineheight_normal{
+
+.lineheight_normal {
   line-height: normal;
 }
-.lineheight_0{
+
+.lineheight_0 {
   line-height: 0;
 }
-.lineheight_0_1{
+
+.lineheight_0_1 {
   line-height: 0.1;
 }
-.lineheight_0_2{
+
+.lineheight_0_2 {
   line-height: 0.2;
 }
-.lineheight_0_3{
+
+.lineheight_0_3 {
   line-height: 0.3;
 }
-.lineheight_0_4{
+
+.lineheight_0_4 {
   line-height: 0.4;
 }
-.lineheight_0_5{
+
+.lineheight_0_5 {
   line-height: 0.5;
 }
-.lineheight_0_6{
+
+.lineheight_0_6 {
   line-height: 0.6;
 }
-.lineheight_0_7{
+
+.lineheight_0_7 {
   line-height: 0.7;
 }
-.lineheight_0_8{
+
+.lineheight_0_8 {
   line-height: 0.8;
 }
-.lineheight_0_9{
+
+.lineheight_0_9 {
   line-height: 0.9;
 }
-.lineheight_1{
+
+.lineheight_1 {
   line-height: 1;
 }
-.lineheight_1_1{
+
+.lineheight_1_1 {
   line-height: 1.1;
 }
-.lineheight_1_2{
+
+.lineheight_1_2 {
   line-height: 1.2;
 }
-.lineheight_1_3{
+
+.lineheight_1_3 {
   line-height: 1.3;
 }
-.lineheight_1_4{
+
+.lineheight_1_4 {
   line-height: 1.4;
 }
-.lineheight_1_5{
+
+.lineheight_1_5 {
   line-height: 1.5;
 }
-.lineheight_1_6{
+
+.lineheight_1_6 {
   line-height: 1.6;
 }
-.lineheight_1_7{
+
+.lineheight_1_7 {
   line-height: 1.7;
 }
-.lineheight_1_8{
+
+.lineheight_1_8 {
   line-height: 1.8;
 }
-.lineheight_1_9{
+
+.lineheight_1_9 {
   line-height: 1.9;
 }
-.lineheight_2{
+
+.lineheight_2 {
   line-height: 2;
 }
 
@@ -313,68 +402,88 @@
 
 /*............... Letterspacing Start.........*/
 
-.letterspacing_inherit{
-  letter-spacing:inherit;
+.letterspacing_inherit {
+  letter-spacing: inherit;
 }
-.letterspacing_0_1{
+
+.letterspacing_0_1 {
   letter-spacing: 0.1px;
 }
-.letterspacing_0_2{
+
+.letterspacing_0_2 {
   letter-spacing: 0.2px;
 }
-.letterspacing_0_3{
+
+.letterspacing_0_3 {
   letter-spacing: 0.3px;
 }
-.letterspacing_0_4{
+
+.letterspacing_0_4 {
   letter-spacing: 0.4px;
 }
-.letterspacing_0_5{
+
+.letterspacing_0_5 {
   letter-spacing: 0.5px;
 }
-.letterspacing_0_6{
+
+.letterspacing_0_6 {
   letter-spacing: 0.6px;
 }
-.letterspacing_0_7{
+
+.letterspacing_0_7 {
   letter-spacing: 0.7px;
 }
-.letterspacing_0_8{
+
+.letterspacing_0_8 {
   letter-spacing: 0.8px;
 }
-.letterspacing_0_9{
+
+.letterspacing_0_9 {
   letter-spacing: 0.9px;
 }
-.letterspacing_1{
+
+.letterspacing_1 {
   letter-spacing: 1px;
 }
-.letterspacing_1_1{
+
+.letterspacing_1_1 {
   letter-spacing: 1.1px;
 }
-.letterspacing_1_2{
+
+.letterspacing_1_2 {
   letter-spacing: 1.2px;
 }
-.letterspacing_1_3{
+
+.letterspacing_1_3 {
   letter-spacing: 1.3px;
 }
-.letterspacing_1_4{
+
+.letterspacing_1_4 {
   letter-spacing: 1.4px;
 }
-.letterspacing_1_5{
+
+.letterspacing_1_5 {
   letter-spacing: 1.5px;
 }
-.letterspacing_1_6{
+
+.letterspacing_1_6 {
   letter-spacing: 1.6px;
 }
-.letterspacing_1_7{
+
+.letterspacing_1_7 {
   letter-spacing: 1.7px;
 }
-.letterspacing_1_8{
+
+.letterspacing_1_8 {
   letter-spacing: 1.8px;
 }
-.letterspacing_1_9{
+
+.letterspacing_1_9 {
   letter-spacing: 1.9px;
 }
-.letterspacing_2{
+
+.letterspacing_2 {
   letter-spacing: 2px;
 }
 
-/*............... Letterspacing End.........*/
+/*............... Letterspacing End.........*/

package/lib/v1/DateTime/CalendarView.js

@@ -84,9 +84,11 @@ var CalendarView = /*#__PURE__*/function (_React$PureComponent) {
           todayDate = _this$props.todayDate,
           todayYear = _this$props.todayYear,
           startDate = _this$props.startDate,
-          endDate = _this$props.endDate;
+          endDate = _this$props.endDate,
+          weekStartDay = _this$props.weekStartDay,
+          holidays = _this$props.holidays;
       var userSeeDate = new Date(year, month, 1);
-      var userSeeDay = userSeeDate.getDay() + 1;
+      var userSeeDay = (userSeeDate.getDay() - weekStartDay + dayNames.length) % dayNames.length + 1;
       var userSeeYear = userSeeDate.getFullYear();
       var userSeeMonth = userSeeDate.getMonth();
       var monthEnd = (0, _common.getMonthEnd)(month, year);
@@ -114,10 +116,10 @@ var CalendarView = /*#__PURE__*/function (_React$PureComponent) {
           var output = null;
 
           for (var i = 1; i <= 7; i++) {
-            var tdclass = "".concat(_DateTimeModule["default"].datesStr, " ").concat(_DateTimeModule["default"].grid);
+            var tdclass = "".concat(_DateTimeModule["default"].datesStr, " ").concat(_DateTimeModule["default"].grid); // if (i === 1) {
 
-            if (i === 1) {
-              tdclass += " ".concat(_DateTimeModule["default"].sunday);
+            if (holidays.includes(i - 1)) {
+              tdclass += " ".concat(_DateTimeModule["default"].holiday);
             }
 
             if (incremleti >= userSeeDay && incremday <= monthEnd) {
@@ -226,7 +228,8 @@ var CalendarView = /*#__PURE__*/function (_React$PureComponent) {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_DaysRow["default"], {
         dayNames: dayNames,
         dayNamesShort: dayNamesShort,
-        ariaLabel: dayNamesShort
+        ariaLabel: dayNamesShort,
+        holidays: holidays
       }), /*#__PURE__*/_react["default"].createElement("div", {
         "data-id": "".concat(dataId, "_dateContainer"),
         "data-test-id": "".concat(dataId, "_dateContainer"),

package/lib/v1/DateTime/DateTime.js

@@ -43,6 +43,14 @@ var _dateFormat = require("./../../DateTime/dateFormatUtils/dateFormat");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
 function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct.bind(); } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -728,7 +736,9 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
           startDate = _this$props7.startDate,
           endDate = _this$props7.endDate,
           _this$props7$customPr = _this$props7.customProps,
-          customProps = _this$props7$customPr === void 0 ? {} : _this$props7$customPr;
+          customProps = _this$props7$customPr === void 0 ? {} : _this$props7$customPr,
+          holidays = _this$props7.holidays,
+          weekStartDay = _this$props7.weekStartDay;
       var _customProps$TimeProp = customProps.TimeProps,
           TimeProps = _customProps$TimeProp === void 0 ? {} : _customProps$TimeProp;
       var _i18nKeys$timeText = i18nKeys.timeText,
@@ -754,6 +764,17 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
           _i18nKeys$dayNamesSho = i18nKeys.dayNamesShort,
           dayNamesShort = _i18nKeys$dayNamesSho === void 0 ? _constants.dayNamesShortDefault : _i18nKeys$dayNamesSho;
       var showmonthtxt = title(date, year, month, monthNames);
+      var customDayNames = dayNames,
+          customDayNamesShort = dayNamesShort,
+          customizedHolidays = holidays;
+
+      if (weekStartDay !== 0) {
+        customDayNames = [].concat(_toConsumableArray(dayNames.slice(weekStartDay)), _toConsumableArray(dayNames.slice(0, weekStartDay)));
+        customDayNamesShort = [].concat(_toConsumableArray(dayNamesShort.slice(weekStartDay)), _toConsumableArray(dayNamesShort.slice(0, weekStartDay)));
+        customizedHolidays = holidays.map(function (dayIndex) {
+          return customDayNames.indexOf(dayNames[dayIndex]);
+        });
+      }
 
       var childEle = /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_DateTimeModule["default"].container, " ").concat(innerClass),
@@ -776,13 +797,15 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         year: year,
         month: month,
         onSelect: this.dateSelect,
-        dayNames: dayNames,
-        dayNamesShort: dayNamesShort,
+        dayNames: customDayNames,
+        dayNamesShort: customDayNamesShort,
         todayDate: todayDate,
         todayMonth: todayMonth,
         todayYear: todayYear,
         startDate: startDate,
-        endDate: endDate
+        endDate: endDate,
+        weekStartDay: weekStartDay,
+        holidays: customizedHolidays
       }), isDateTimeField ? /*#__PURE__*/_react["default"].createElement(_Time["default"], {
         timeText: timeText,
         dataId: dataId,