@inntechcorp/it-design 2.2.90 → 3.1.0

package/dist/cjs/back-top/styled.js

@@ -0,0 +1,25 @@
+"use strict";var i=require("styled-components");const s=i.div`
+  position: fixed;
+  bottom: 80px;
+  right: 30px;
+  visibility: hidden;
+  `,o=i.a`
+
+  visibility: ${i=>i.$show?"visible":"hidden"};
+  animation: ${i=>i.$show?e:"none"} 0.5s;
+
+  display: block;
+  transition: fill .3s ease-out;
+  cursor: pointer;
+  fill: #ffffff80;
+
+  &:hover {
+    fill: #3396fb;
+  }
+  
+  `,e=i.keyframes`
+  0% { transform: scale(.2) }
+  50% { transform: scale(1.1) }
+  75% { transform: scale(0.9) }
+  100% { transform: scale(1) }
+`;exports.Show=o,exports.Wrapper=s;

package/dist/cjs/button/button.style.circle.js

@@ -0,0 +1,38 @@
+"use strict";var t=require("styled-components");exports.getCircle=()=>t.css`
+    &.itd-button-circle {
+
+      border-radius: 100%;
+
+      /* X-SMALL */
+      &.itd-button-xs {
+        width: 24px;
+      }
+
+      /* SMALL */
+      &.itd-button-sm {
+        width: 28px;
+      }
+
+      /* MEDIUM */
+      &.itd-button-md {
+        width: 32px;
+      }
+
+      /* LARGE */
+      &.itd-button-lg {
+        width: 44px;
+      }
+
+      /* X-LARGE */
+      &.itd-button-xlg {
+        width: 46px;
+      }
+
+      /* DEFAULT */
+      &:not(&.itd-button-xs):not(&.itd-button-sm):not(&.itd-button-md):not(&.itd-button-lg):not(&.itd-button-xlg)
+      {
+        width: 40px;
+      }
+
+    }
+  `;

package/dist/cjs/button/button.style.default.js

@@ -0,0 +1,44 @@
+"use strict";var r=require("styled-components");exports.getDefaultButton=()=>r.css`
+
+    &.itd-button-default {
+
+      box-shadow        : ${({theme:r})=>r.boxShadow};
+      background-color  : ${({theme:r})=>r.primary};
+      border            : 1px solid transparent;
+
+      span, div.icon svg{
+        color : ${({theme:r})=>r.primaryForeground};
+      }
+
+      &:hover, &.active {
+        background-color: ${({theme:r})=>r.primaryHover};
+      }
+
+      &.itd-button-selected {
+        
+        border: 2px solid #3598FE;
+
+        span {
+          color: #3598FE;
+          font-weight: 600;
+          margin: -1px;
+        }
+
+      }
+
+      &[disabled] {
+        
+        span, div.icon svg {
+          color: ${({theme:r})=>r.primaryForeground};
+        }
+
+      }
+
+      .itd-spin-spinner {
+        >div>div {
+          border-color: ${({theme:r})=>r.primaryForeground} transparent transparent;
+        }
+      }
+      
+    }
+  `;

package/dist/cjs/button/button.style.filled.js

@@ -0,0 +1,49 @@
+"use strict";var r=require("styled-components");exports.getFilledButton=()=>r.css`
+
+    &.itd-button-filled {
+
+      background-color: #e9f3ff;
+      border: transparent;
+
+      span, div.icon svg {
+        color: #1b84ff;
+      }
+
+      &:hover, &.active {
+        background-color: #1b84ff;
+        span, div.icon svg {
+          color: #ffffff;
+        }
+      }
+
+      &.itd-button-selected {
+        
+        border: transparent;
+
+        span, div.icon svg {
+          color: #3598FE;
+          font-weight: 600;
+          margin: -1px;
+        }
+
+      }
+
+      &[disabled] {
+
+        background-color: #f9f9f9;
+        border: transparent;
+
+        span, div.icon svg {
+          color: #07143790;
+        }
+        
+      }
+
+      .itd-spin-spinner {
+        >div>div {
+          border-color: #1b84ff transparent transparent;
+        }
+      }
+      
+    }
+  `;

package/dist/cjs/button/button.style.ghost.js

@@ -0,0 +1,47 @@
+"use strict";var o=require("styled-components");exports.getGhostButton=()=>o.css`
+
+    &.itd-button-ghost {
+
+      background-color: transparent;
+      border: 1px solid transparent;
+
+      span, div.icon svg {
+        color: #252f4a;
+      }
+
+      &:hover, &.active {
+        
+        background-color: #f9f9f9;
+
+        span, div.icon svg {
+          color: #1b84ff;
+        }
+
+      }
+
+      &.itd-button-selected {
+        
+        border: 2px solid #3598FE;
+
+        span {
+          color: #3598FE;
+          font-weight: 600;
+          margin: -1px;
+        }
+
+      }
+
+      &[disabled] {
+        span, div.icon svg {
+          color: #0000004D;
+        }
+      }
+
+      .itd-spin-spinner {
+        >div>div {
+          border-color: #071437 transparent transparent;
+        }
+      }
+      
+    }
+  `;

package/dist/cjs/button/button.style.icon.js

@@ -0,0 +1,33 @@
+"use strict";var t=require("styled-components");exports.getIcon=n=>t.css`
+   &.itd-icon {
+     
+     padding: 0 12px 0 12px;
+
+     /* X-SMALL */
+     &.itd-button-xs {
+       ${n} { font-size: 10px; }
+     }
+
+     /* SMALL */
+     &.itd-button-sm {
+       ${n} { font-size: 16px; }
+     }
+
+     /* MEDIUM */
+     &.itd-button-md {
+       ${n} { font-size: 18px; }
+     }
+
+     /* LARGE */
+     &.itd-button-lg {
+       ${n} { font-size: 26px; }
+     }
+
+     /* DEFAULT */
+     &:not(&.itd-button-xs):not(&.itd-button-sm):not(&.itd-button-md):not(&.itd-button-lg):not(&.itd-button-xlg) 
+     {
+       ${n} { font-size: 20px; }
+     }
+     
+   }
+ `;

package/dist/cjs/button/button.style.link.js

@@ -0,0 +1,45 @@
+"use strict";var o=require("styled-components");exports.getLinkButton=()=>o.css`
+
+    &.itd-button-link {
+
+      background-color: transparent;
+      border: 1px solid transparent;
+
+      span, div.icon svg {
+        color: #071437;
+      }
+
+      &:hover, &.active {
+
+        span, div.icon svg {
+          color: #1b84ff;
+        }
+
+      }
+
+      &.itd-button-selected {
+        
+        border: 2px solid #3598FE;
+
+        span {
+          color: #3598FE;
+          font-weight: 600;
+          margin: -1px;
+        }
+
+      }
+
+      &[disabled] {
+        span, div.icon svg {
+          color: #071437;
+        }
+      }
+
+      .itd-spin-spinner {
+        >div>div {
+          border-color: #071437 transparent transparent;
+        }
+      }
+      
+    }
+  `;

package/dist/cjs/button/button.style.outline.js

@@ -0,0 +1,49 @@
+"use strict";var e=require("../enums/enum.js"),o=require("styled-components"),r=require("../helpers/theme/Color.js");exports.getOutlineButton=()=>o.css`
+
+    &.itd-button-outline {
+
+      box-shadow        : ${({theme:e})=>e.boxShadow};
+      background-color  : ${({theme:o})=>o.appearance===e.ThemeAppearances.LIGHT?o.background:r.withOpacity(o.input,.03)};
+      border            : 1px solid ${({theme:e})=>e.colorBorder};
+
+      span, div.icon svg {
+        color: ${({theme:e})=>e.colorText};
+      }
+
+      &:hover, &.active {
+        
+        background-color: ${({theme:e})=>e.secondary};
+        border-color: ${({theme:e})=>e.colorBorder};
+
+        span, div.icon svg {
+          color: ${({theme:e})=>e.colorText};
+        }
+
+      }
+
+      &:not([disabled]).itd-button-selected {
+        
+        span, div.icon svg {
+          color: ${({theme:e})=>e.colorText};
+        }
+
+      }
+
+      &[disabled] {
+        
+        border: 1px solid ${({theme:e})=>e.colorBorder};
+        
+        span, div.icon svg {
+          color: ${({theme:e})=>e.colorText};
+        }
+
+      }
+
+      .itd-spin-spinner {
+        >div>div {
+          border-color: ${({theme:e})=>e.colorText} transparent transparent;
+        }
+      }
+      
+    }
+  `;

package/dist/cjs/button/button.style.size.js

@@ -0,0 +1,187 @@
+"use strict";var i=require("styled-components"),e=require("../helpers/theme/tokens.js");exports.getSize=()=>i.css`
+    /* X-SMALL */
+    &.itd-button-xs {
+
+      min-width         : ${e.BUTTON_SIZE_MAP.xs.minWidth};
+      min-height        : ${e.BUTTON_SIZE_MAP.xs.minHeight};
+      padding           : ${e.BUTTON_SIZE_MAP.xs.padding};
+      
+      .itd-spin-spinner {
+        >div {
+          width         : ${e.BUTTON_SIZE_MAP.xs.spinnerSize};
+          height        : ${e.BUTTON_SIZE_MAP.xs.spinnerSize};
+        }
+        >div>div {
+          border-color  : ${({theme:i})=>i.colorBorder} transparent transparent;
+          border-width  : ${e.BUTTON_SIZE_MAP.xs.spinnerBorder};
+        }
+      }
+
+      span {
+        font-size       : ${e.BUTTON_SIZE_MAP.xs.fontSize};
+        line-height     : ${e.BUTTON_SIZE_MAP.xs.lineHeight};
+        font-weight     : ${e.BUTTON_SIZE_MAP.xs.fontWeight};
+      }
+
+      .icon svg {
+        width           : ${e.BUTTON_SIZE_MAP.xs.iconSize.width};
+        height          : ${e.BUTTON_SIZE_MAP.xs.iconSize.height};
+      }
+
+    }
+
+    /* SMALL */
+    &.itd-button-sm {
+
+      min-width         : ${e.BUTTON_SIZE_MAP.sm.minWidth};
+      min-height        : ${e.BUTTON_SIZE_MAP.sm.minHeight};
+      padding           : ${e.BUTTON_SIZE_MAP.sm.padding};
+      
+      .itd-spin-spinner {
+        >div {
+          width         : ${e.BUTTON_SIZE_MAP.sm.spinnerSize};
+          height        : ${e.BUTTON_SIZE_MAP.sm.spinnerSize};
+        }
+        >div>div {
+          border-color  : ${({theme:i})=>i.colorBorder} transparent transparent;
+          border-width  : ${e.BUTTON_SIZE_MAP.sm.spinnerBorder};
+        }
+      }
+
+      span {
+        font-size       : ${e.BUTTON_SIZE_MAP.sm.fontSize};
+        line-height     : ${e.BUTTON_SIZE_MAP.sm.lineHeight};
+        font-weight     : ${e.BUTTON_SIZE_MAP.sm.fontWeight};
+      }
+
+      .icon svg {
+        width           : ${e.BUTTON_SIZE_MAP.sm.iconSize.width};
+        height          : ${e.BUTTON_SIZE_MAP.sm.iconSize.height};
+      }
+
+    }
+
+    /* MEDIUM */
+    &.itd-button-md {
+
+      min-width         : ${e.BUTTON_SIZE_MAP.md.minWidth};
+      min-height        : ${e.BUTTON_SIZE_MAP.md.minHeight};
+      padding           : ${e.BUTTON_SIZE_MAP.md.padding};
+      
+      .itd-spin-spinner {
+        >div {
+          width         : ${e.BUTTON_SIZE_MAP.md.spinnerSize};
+          height        : ${e.BUTTON_SIZE_MAP.md.spinnerSize};
+        }
+        >div>div {
+          border-color  : ${({theme:i})=>i.colorBorder} transparent transparent;
+          border-width  : ${e.BUTTON_SIZE_MAP.md.spinnerBorder};
+        }
+      }
+
+      span {
+        font-size       : ${e.BUTTON_SIZE_MAP.md.fontSize};
+        line-height     : ${e.BUTTON_SIZE_MAP.md.lineHeight};
+        font-weight     : ${e.BUTTON_SIZE_MAP.md.fontWeight};
+      }
+
+      .icon svg {
+        width           : ${e.BUTTON_SIZE_MAP.md.iconSize.width};
+        height          : ${e.BUTTON_SIZE_MAP.md.iconSize.height};
+      }
+
+    }
+
+    /* DEFAULT */
+    &.itd-button-df {
+
+      min-width         : ${e.BUTTON_SIZE_MAP.df.minWidth};
+      min-height        : ${e.BUTTON_SIZE_MAP.df.minHeight};
+      padding           : ${e.BUTTON_SIZE_MAP.df.padding};
+      
+      .itd-spin-spinner {
+        >div {
+          width         : ${e.BUTTON_SIZE_MAP.df.spinnerSize};
+          height        : ${e.BUTTON_SIZE_MAP.df.spinnerSize};
+        }
+        >div>div {
+          border-color  : ${({theme:i})=>i.colorBorder} transparent transparent;
+          border-width  : ${e.BUTTON_SIZE_MAP.df.spinnerBorder};
+        }
+      }
+
+      span {
+        font-size       : ${e.BUTTON_SIZE_MAP.df.fontSize};
+        line-height     : ${e.BUTTON_SIZE_MAP.df.lineHeight};
+        font-weight     : ${e.BUTTON_SIZE_MAP.df.fontWeight};
+      }
+
+      .icon svg {
+        width           : ${e.BUTTON_SIZE_MAP.df.iconSize.width};
+        height          : ${e.BUTTON_SIZE_MAP.df.iconSize.height};
+      }
+
+    }
+
+    /* LARGE */
+    &.itd-button-lg {
+
+      min-width         : ${e.BUTTON_SIZE_MAP.lg.minWidth};
+      min-height        : ${e.BUTTON_SIZE_MAP.lg.minHeight};
+      padding           : ${e.BUTTON_SIZE_MAP.lg.padding};
+      
+      .itd-spin-spinner {
+        >div {
+          width         : ${e.BUTTON_SIZE_MAP.lg.spinnerSize};
+          height        : ${e.BUTTON_SIZE_MAP.lg.spinnerSize};
+        }
+        >div>div {
+          border-color  : ${({theme:i})=>i.colorBorder} transparent transparent;
+          border-width  : ${e.BUTTON_SIZE_MAP.lg.spinnerBorder};
+        }
+      }
+
+      span {
+        font-size       : ${e.BUTTON_SIZE_MAP.lg.fontSize};
+        line-height     : ${e.BUTTON_SIZE_MAP.lg.lineHeight};
+        font-weight     : ${e.BUTTON_SIZE_MAP.lg.fontWeight};
+      }
+
+      .icon svg {
+        width           : ${e.BUTTON_SIZE_MAP.lg.iconSize.width};
+        height          : ${e.BUTTON_SIZE_MAP.lg.iconSize.height};
+      }
+
+    }
+
+    /* X-LARGE */
+    &.itd-button-xlg {
+
+      min-width         : ${e.BUTTON_SIZE_MAP.xlg.minWidth};
+      min-height        : ${e.BUTTON_SIZE_MAP.xlg.minHeight};
+      padding           : ${e.BUTTON_SIZE_MAP.xlg.padding};
+      
+      .itd-spin-spinner {
+        >div {
+          width         : ${e.BUTTON_SIZE_MAP.xlg.spinnerSize};
+          height        : ${e.BUTTON_SIZE_MAP.xlg.spinnerSize};
+        }
+        >div>div {
+          border-color  : ${({theme:i})=>i.colorBorder} transparent transparent;
+          border-width  : ${e.BUTTON_SIZE_MAP.xlg.spinnerBorder};
+        }
+      }
+
+      span {
+        font-size       : ${e.BUTTON_SIZE_MAP.xlg.fontSize};
+        line-height     : ${e.BUTTON_SIZE_MAP.xlg.lineHeight};
+        font-weight     : ${e.BUTTON_SIZE_MAP.xlg.fontWeight};
+      }
+
+      .icon svg {
+        width           : ${e.BUTTON_SIZE_MAP.xlg.iconSize.width};
+        height          : ${e.BUTTON_SIZE_MAP.xlg.iconSize.height};
+      }
+
+    }
+  `;

package/dist/cjs/button/button.style.solid.js

@@ -0,0 +1,50 @@
+"use strict";var o=require("styled-components");exports.getSolidButton=()=>o.css`
+
+    &.itd-button-solid {
+
+      background-color: ${({theme:o})=>o.colorBackgroundAltHover};
+      border: transparent;
+
+      span, div.icon svg {
+        color: ${({theme:o})=>o.secondaryForeground};
+      }
+
+      &:hover, &.active {
+        //background-color: #f1f1f4;
+        background-color: ${({theme:o})=>o.secondaryHover};
+        span, div.icon svg {
+          color: ${({theme:o})=>o.secondaryForegroundHover};
+        }
+      }
+
+      &.itd-button-selected {
+        
+        border: transparent;
+
+        span, div.icon svg {
+          color: ${({theme:o})=>o.secondaryForegroundHover};
+          font-weight: 600;
+          margin: -1px;
+        }
+
+      }
+
+      &[disabled] {
+
+        background-color: ${({theme:o})=>o.secondary};
+        border: transparent;
+
+        span, div.icon svg {
+          color: ${({theme:o})=>o.secondaryForeground};
+        }
+
+      }
+
+      .itd-spin-spinner {
+        >div>div {
+          border-color: ${({theme:o})=>o.secondaryForeground} transparent transparent;
+        }
+      }
+      
+    }
+  `;

package/dist/cjs/button/button.style.strecth.js

@@ -0,0 +1,8 @@
+"use strict";var t=require("styled-components");exports.getStrecth=()=>t.css`
+    &.itd-button-stretch {
+      width: 100%;
+    }
+    &:not(&.itd-button-stretch) {
+      width: max-content;
+    }
+  `;

package/dist/cjs/button/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../spin/index.js"),i=require("./styled.js"),n=require("react"),s=require("../image/index.js"),l=require("../helpers/url/ValidURL.js"),u=require("react-router-dom"),r=require("../utils/GetIconSizeBySize.js"),o=require("../enums/enum.js"),d=require("../utils/GetSizeSlugBySize.js"),a=require("../utils/InlineSVGCached.js"),c=require("../node_modules/uuid/dist/esm-browser/v4.js");exports.default=({id:m="",disabled:f=!1,loading:g=!1,selected:j=!1,circle:b=!1,strecth:h=!1,justify:x="center",contentPosition:p=o.ComponentXPositions.LEFT,type:y="button",variant:$="default",size:q=o.ComponentSizes.DEFAULT,state:S=null,icon:N=null,href:k="",target:v="_self",className:P="",children:V=null,onClick:C=null})=>{const E=n.useRef(null),[z,I]=n.useState(m);n.useEffect(()=>{""===m&&I("itd-button-"+c.default())},[]);const L=()=>g||!N?null:n.isValidElement(N)?e.jsx(i.Element,{className:"icon itd-element",$contentPosition:p,$justify:x,$useIconPadding:null!==V&&""!==V,children:N}):"string"==typeof N&&l.isValidURL(N)?e.jsx(i.ImageWrapper,{className:"icon itd-image",src:N,as:s.default,height:r.default(q),brokenHeight:r.default(q),$contentPosition:p,$justify:x}):"string"==typeof N?e.jsx(i.Icon,{className:"icon itd-icon "+N,$contentPosition:p,$justify:x,$useIconPadding:null!==V&&""!==V}):N instanceof SVGElement?e.jsx(i.SVG,{className:"icon itd-svg",$singleIcon:!V,$contentPosition:p,$justify:x,children:e.jsx(a.default,{src:N.toString()})}):null,G=()=>e.jsxs(e.Fragment,{children:["left"===p?L():null,g?e.jsx(t.default,{}):null,V?e.jsx(i.Hide,{$loading:g?"true":"false",children:V}):null,"right"===p?L():null]}),B=()=>n.isValidElement(N)?"element":"string"==typeof N&&l.isValidURL(N)?"image":"string"==typeof N?"icon":N instanceof SVGElement?"svg":"",F=()=>{let e={id:z,$loading:"false",$justify:x,$size:d.default(q),disabled:!1};return g&&(e.$loading="true"),f&&(e.disabled=!0),e},R=n.useMemo(()=>{let e="itd-button";return e+=" itd-button-"+$,e+=" itd-button-"+d.default(q),e+=" itd-button-"+y,null===V&&(e+=" itd-button-has-icon"),"statable"===$&&S&&(e+=" itd-button-"+S),"custom"===$&&S&&(e+=" itd-button-"+S),j&&(e+=" itd-button-selected"),h&&(e+=" itd-button-stretch"),b&&(e+=" itd-button-circle"),g&&(e+=" itd-button-loading"),"element"===B()&&(e+=" itd-element"),"svg"===B()&&(e+=" itd-svg"),"icon"===B()&&(e+=" itd-icon"),"image"===B()&&(e+=" itd-image"),""!==P&&(e+=" "+P),e},[$,q,y,V,j,h,b,g,B(),P]),U=e=>{g||C&&C(e)},_=t=>e.jsx(i.ClickButton,{className:R,type:t,...F(),children:G()});return"submit"===y?_("submit"):"reset"===y?_("reset"):""!==k?e.jsx(i.Link,{className:R,as:u.NavLink,to:k,target:v,...F(),children:e.jsxs(e.Fragment,{children:[L(),e.jsx("span",{children:V})]})}):"link"===$?e.jsx(i.A,{className:R,onClick:U,...F(),children:G()}):e.jsx(i.ClickButton,{className:R,onClick:U,type:"button",ref:E,...F(),children:G()})};