@inntechcorp/it-design 3.1.3 → 3.1.5

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

@@ -1,25 +0,0 @@
-"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

@@ -1,38 +0,0 @@
-"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

@@ -1,44 +0,0 @@
-"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

@@ -1,49 +0,0 @@
-"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

@@ -1,47 +0,0 @@
-"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

@@ -1,33 +0,0 @@
-"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

@@ -1,45 +0,0 @@
-"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

@@ -1,49 +0,0 @@
-"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

@@ -1,187 +0,0 @@
-"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

@@ -1,50 +0,0 @@
-"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

@@ -1,8 +0,0 @@
-"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

@@ -1 +0,0 @@
-"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()})};