@zohodesk/components 1.0.0-temp-199.25 → 1.0.0-temp-250

package/lib/common/basic.module.css

@@ -0,0 +1,64 @@
+@font-face {
+  font-family: Light;
+  src: url('https://static.zohocdn.com/webfonts/lato2light/font.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Regular;
+  src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Semibold;
+  src: url('https://static.zohocdn.com/webfonts/lato2semibold/font.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Bold;
+  src: url('https://static.zohocdn.com/webfonts/lato2bold/font.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+
+@font-face {
+  font-family: ZDLato;
+  src: url('https://static.zohocdn.com/webfonts/lato2light/font.woff2') format('woff2');
+  font-weight: 100 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: ZDLato;
+  src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: ZDLato;
+  src: url('https://static.zohocdn.com/webfonts/lato2semibold/font.woff2') format('woff2');
+  font-weight: 500 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: ZDLato;
+  src: url('https://static.zohocdn.com/webfonts/lato2bold/font.woff2') format('woff2');
+  font-weight: 700 900;
+  font-style: normal;
+  font-display: swap;
+}

package/lib/common/basicReset.module.css

@@ -0,0 +1,40 @@
+a {
+  text-decoration: none;
+}
+
+button {
+  padding: 0 ;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  margin: 0 ;
+}
+
+iframe {
+  border: 0;
+}
+
+body {
+  text-rendering: optimizeSpeed;
+  margin: 0 ;
+}
+
+body,
+html {
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+textarea {
+  font-weight: var(--zd-fw-normal);
+}
+
+label, input[type='button'], input[type='submit'], input[type='file'], button {
+  cursor: pointer;
+}
+
+/*Moz Required Box shadow Isssue*/
+input[required]:-moz-ui-invalid {
+  box-shadow: none;
+}

package/lib/common/boxShadow.module.css

@@ -0,0 +1,34 @@
+:root {
+    /* avatar */
+    --zd_bs_avatar_black: var(--zd_bs_contrast_outline, inset 0px 0px 5px var(--avatar_boxshadow));
+    --zd_bs_avatar_white: var(--zd_bs_contrast_outline, inset 0px 0px 11px var(--avatar_boxshadow));
+
+    /* button */
+    --zd_bs_button_primary: var(--zd_bs_contrast_outline, 0 3px 10px var(--zdt_button_primary_box_shadow));
+    --zd_bs_button_danger: var(--zd_bs_contrast_outline, 0 3px 10px var(--zdt_button_danger_box_shadow));
+
+    /* button group */
+    --zd_bs_buttongroup_footer: var(--zd_bs_contrast_outline, 0 -4px 5px -3px var(--zdt_buttongroup_footer_box_shadow));
+
+    /* dropbox */
+    --zd_bs_dropbox_default: var(--zd_bs_contrast_outline, 4px 3px 30px var(--zdt_dropbox_default_box_shadow));
+    --zd_bs_dropbox_top: var(--zd_bs_contrast_outline, 0 -3px 30px var(--zdt_dropbox_default_box_shadow));
+    --zd_bs_dropbox_left: var(--zd_bs_contrast_outline, -4px 0 30px var(--zdt_dropbox_default_box_shadow));
+    --zd_bs_dropbox_right: var(--zd_bs_contrast_outline, 4px 0 30px var(--zdt_dropbox_default_box_shadow));
+    --zd_bs_dropbox_bottom: var(--zd_bs_contrast_outline, 0 3px 30px var(--zdt_dropbox_default_box_shadow));
+    --zd_bs_dropbox_arrow: var(--zd_bs_contrast_outline, 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color));
+
+    /* ribbon */
+    --zd_bs_ribbon_default: var(--zd_bs_contrast_outline, 0 5px 10px var(--zdt_ribbon_default_shadow));
+    --zd_bs_ribbon_danger: var(--zd_bs_contrast_outline, 0 5px 10px var(--zdt_ribbon_danger_shadow));
+    --zd_bs_ribbon_primary: var(--zd_bs_contrast_outline, 0 5px 10px var(--zdt_ribbon_primary_shadow));
+    --zd_bs_ribbon_secondary: var(--zd_bs_contrast_outline, 0 5px 10px var(--zdt_ribbon_secondary_shadow));
+    --zd_bs_ribbon_info: var(--zd_bs_contrast_outline, 0 5px 10px var(--zdt_ribbon_info_shadow));
+    --zd_bs_ribbon_dark: var(--zd_bs_contrast_outline, 0 5px 10px var(--zdt_ribbon_dark_shadow));
+
+    /* switch */
+    --zd_bs_switch_default: var(--zd_bs_contrast_outline, 0 1px 4px 0 var(--zdt_switch_circle_shadow));
+
+    /* tabs */
+    --zd_bs_tabs_shadow: var(--zd_bs_contrast_outline, 0 -2px 9px var(--zdt_tabs_alpha_box_shadow));
+}

package/lib/common/common.module.css

@@ -0,0 +1,566 @@
+/*Font-smooth*/
+.ftsmooth {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+/*  --Overflow Props-- */
+.oflowx {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.oflowy {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.oflow {
+  overflow: hidden;
+}
+
+.oflowA {
+  overflow: auto;
+}
+
+.preventScrollBubbleX {
+  overscroll-behavior-x: contain;
+}
+
+.preventScrollBubbleY {
+  overscroll-behavior-y: contain;
+}
+
+.preventScrollBubbleBoth {
+  overscroll-behavior: contain;
+}
+
+
+/*  --Position Props-- */
+.posrel {
+  position: relative;
+}
+
+.posab {
+  position: absolute;
+}
+
+.posfix {
+  position: fixed;
+}
+
+.cboth::after {
+  content: '.';
+  display: block;
+  font-size: 0 ;
+  height: 0 ;
+  line-height: 0;
+  visibility: hidden;
+  clear: both;
+}
+
+.blockEvent {
+  pointer-events: none;
+}
+
+.clboth {
+  clear: both;
+}
+
+.disable,
+.disabled {
+  position: relative;
+}
+
+.disable::after {
+  cursor: no-drop;
+  background: var(--zdt_disable_bg);
+}
+
+.disable::after,
+.disabled::after,
+.readonly::after {
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  z-index: 2;
+  content: '';
+  user-select: none;
+}
+
+[dir=ltr] .disable::after, [dir=ltr] .disabled::after, [dir=ltr] .readonly::after {
+  left: 0 ;
+  right: 0 ;
+}
+
+[dir=rtl] .disable::after, [dir=rtl] .disabled::after, [dir=rtl] .readonly::after {
+  right: 0 ;
+  left: 0 ;
+}
+
+.disabled, .readonly {
+  cursor: not-allowed;
+}
+
+.disabled::after, .readonly::after {
+  cursor: not-allowed;
+}
+
+/*  --Float Props-- */
+[dir=ltr] .fleft {
+  float: left;
+}
+[dir=rtl] .fleft {
+  float: right;
+}
+
+[dir=ltr] .fright {
+  float: right;
+}
+
+[dir=rtl] .fright {
+  float: left;
+}
+
+.fnone {
+  float: none;
+}
+
+/*  --Display Props-- */
+.dinblk {
+  display: inline-block;
+}
+
+.dblk {
+  display: block;
+}
+
+.dtable {
+  display: table;
+}
+
+.dtcell {
+  display: table-cell;
+}
+
+.hide {
+  display: none;
+}
+
+/* FLex Assets*/
+.dflex {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.dInflex {
+  display: inline-flex;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+}
+
+.flexwrap {
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.flexcolumn {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.flexrow {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.flexrowreverse {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: reverse;
+  -webkit-flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}
+
+.flexcolumnreverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+  -webkit-flex-direction: column-reverse;
+  -ms-flex-direction: column-reverse;
+  flex-direction: column-reverse;
+}
+
+.flexgrow {
+  -webkit-box-flex: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-height: 0 ;
+  min-width: 0 ;
+}
+
+.flexshrink {
+  flex-shrink: 0;
+  -moz-flex-shrink: 0;
+  -webkit-flex-shrink: 0;
+  -ms-flex-shrink: 0;
+}
+
+.flexbasis {
+  flex-basis: 0% ;
+  -webkit-flex-basis: 0%;
+  -moz-flex-basis: 0%;
+  -ms-flex-basis: 0%;
+}
+
+.alignVertical {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.alignFstart {
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+}
+
+.alignFend {
+  -webkit-box-align: end;
+  -ms-flex-align: end;
+  align-items: flex-end;
+}
+
+.alignBaseline {
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+}
+
+.alignHorizontal {
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.alignAround {
+  -ms-flex-pack: distribute;
+  justify-content: space-around;
+}
+
+.alignBetween {
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.justifyFstart {
+  -webkit-box-pack: flex-start;
+  -ms-flex-pack: flex-start;
+  justify-content: flex-start;
+}
+
+.justifyFend {
+  -webkit-box-pack: flex-end;
+  -ms-flex-pack: flex-end;
+  justify-content: flex-end;
+}
+
+/* --Vertical props-- */
+
+.vtop {
+  vertical-align: top;
+}
+
+.vbot {
+  vertical-align: bottom;
+}
+
+.vmid {
+  vertical-align: middle;
+}
+
+/*  --Resize Props-- */
+.resizeX {
+  resize: horizontal;
+}
+
+.resizenone {
+  resize: none;
+}
+
+.resizeboth {
+  resize: both;
+}
+
+.resizeY {
+  resize: vertical;
+}
+
+/*font-weight*/
+.regular {
+  font-weight: var(--zd-fw-normal);
+}
+
+.light {
+  font-weight: var(--zd-fw-light);
+}
+
+.semibold {
+  font-weight: var(--zd-fw-semibold);
+  composes: ftsmooth;
+}
+
+.bold {
+  font-weight: var(--zd-fw-bold);
+  composes: ftsmooth;
+}
+
+/* --Pointer props-- */
+.pointer {
+  cursor: pointer;
+}
+
+.notallow {
+  cursor: not-allowed;
+}
+
+.curdefault {
+  cursor: default;
+}
+
+/* --Width Props-- */
+.w100 {
+  width: 100% ;
+}
+
+.h100 {
+  height: 100% ;
+}
+
+.rounded {
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  -ms-border-radius: 50%;
+  border-radius: 50%;
+}
+
+.noradius {
+  border-radius: 0;
+}
+
+.tcenter {
+  text-align: center;
+}
+
+[dir=ltr] .tleft {
+  text-align: left;
+}
+
+[dir=rtl] .tleft {
+  text-align: right;
+}
+
+[dir=ltr] .tright {
+  text-align: right;
+}
+
+[dir=rtl] .tright {
+  text-align: left;
+}
+
+.textCap {
+  text-transform: uppercase;
+}
+
+.textCaps {
+  text-transform: capitalize;
+}
+
+.t50 {
+  top: 50% ;
+}
+
+[dir=ltr] .l50 {
+  left: 50% ;
+}
+
+[dir=rtl] .l50 {
+  right: 50% ;
+}
+
+[dir=ltr] .middle {
+  transform: translate(-50%, -50%) translateZ(0);
+  -webkit-transform: translate(-50%, -50%) translateZ(0);
+  -moz-transform: translate(-50%, -50%) translateZ(0);
+  -ms-transform: translate(-50%, -50%) translateZ(0);
+}
+
+[dir=rtl] .middle {
+  transform: translate(50%, -50%) translateZ(0);
+  -webkit-transform: translate(50%, -50%) translateZ(0);
+  -moz-transform: translate(50%, -50%) translateZ(0);
+  -ms-transform: translate(50%, -50%) translateZ(0);
+}
+
+.middleBoth {
+  composes: middle;
+  top: 50% ;
+}
+
+[dir=ltr] .middleBoth {
+  left: 50% ;
+}
+
+[dir=rtl] .middleBoth {
+  right: 50% ;
+}
+
+.middleY {
+  -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.yMiddle {
+  composes: middleY;
+  composes: t50;
+}
+
+[dir=ltr] .middleX {
+  transform: translateX(-50%);
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+}
+
+[dir=rtl] .middleX {
+  transform: translateX(50%);
+  -webkit-transform: translateX(50%);
+  -moz-transform: translateX(50%);
+  -ms-transform: translateX(50%);
+}
+
+.xMiddle {
+  composes: middleX;
+  composes: l50;
+}
+
+.transZ {
+  -moz-transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+
+.vishidden {
+  visibility: hidden;
+}
+
+.visible {
+  visibility: visible;
+}
+
+.coverafter::after {
+  content: '';
+  vertical-align: middle;
+  display: inline-block;
+  height: 100% ;
+}
+
+.wbreak {
+  word-break: break-word;
+}
+
+.notrans {
+  transition: none;
+  -moz-transition: none;
+  -ms-transition: none;
+  -webkit-transition: none;
+}
+
+.dotted {
+  overflow: hidden;
+  white-space: nowrap;
+  word-wrap: normal;
+  text-overflow: ellipsis;
+}
+
+.clamp {
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+.lineClamp {
+  composes: wbreak clamp;
+  -webkit-line-clamp: var(--line-clamp, 3);
+}
+
+.offSelection {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.disableFocus a,
+.disableFocus input,
+.disableFocus textarea,
+.disableFocus button,
+.disableFocus iframe {
+  display: none;
+}
+
+.sticky {
+  position: sticky;
+  position: -webkit-sticky;
+}
+
+.fitContWidth {
+  width: fit-content ;
+  width: undefined ;
+}
+
+.fitContHeight {
+  height: fit-content ;
+  height: undefined ;
+}
+
+.whiteSpace_normal {
+  white-space: normal;
+}
+
+.whiteSpace_nowrap {
+  white-space: nowrap;
+}
+
+.whiteSpace_pre {
+  white-space: pre;
+}
+
+.whiteSpace_preLine {
+  white-space: pre-line;
+}
+
+.whiteSpace_preWrap {
+  white-space: pre-wrap;
+}
+
+.whiteSpace_breakSpaces {
+  white-space: break-spaces
+}
+
+/*This Lines added to handle mobile number with mixed symbols in rtl case ex : (050)991-881*/
+[dir=rtl] .ltr-zone  input, [dir=rtl] .ltr-dir {
+  direction: ltr;
+  unicode-bidi: bidi-override;
+  text-align: end;
+}