@inntechcorp/it-design 2.2.89 → 3.1.0

package/dist/cjs/table/styled.js

@@ -0,0 +1,458 @@
+"use strict";var t=require("styled-components"),e=require("../enums/enum.js");const o=t.div`
+
+  &:has(table.itd-table-no-data), &:has(table.itd-table-empty) {
+    height: 100%;
+    table {
+      height: 100%;
+    }
+  }
+
+  .expand-button {
+
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    left: 0;
+    user-select: none;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    button:hover {
+      //background-color: #ececec;
+    }
+
+    button span span {
+      //color: #555;
+      font-size: 15px;
+      line-height: 14px;
+      font-weight: 600;
+    }
+
+  }
+
+  table {
+    
+    width: 100%;
+    
+    caption-side: bottom;
+    border-collapse: collapse;
+    text-indent: initial;
+    //border-spacing: 2px;
+    border-spacing: 0;
+
+    th {
+      text-align: left;
+      span {
+        color: #071437;
+      }
+    }
+
+    td>span, th>span {
+      font-weight: 500;
+    }
+
+    th, td {
+      position: relative;
+      width: auto;
+      vertical-align: middle;
+    }
+
+  }
+
+  >table {
+
+    >tbody, >thead {
+        
+      ${o=>o.$size===e.ComponentSizes.X_SMALL?t.css`
+            td, th {
+              padding-top: 5px;
+              padding-bottom: 5px;
+            }
+            th>span {
+              font-size: 13px;
+            }
+            td>span {
+              font-size: 12px;
+            }
+          `:o.$size===e.ComponentSizes.SMALL?t.css`
+            td, th {
+              padding-top: 8px;
+              padding-bottom: 8px;
+            }
+            th>span {
+              font-size: 13px;
+            }
+            td>span {
+              font-size: 12px;
+            }
+          `:o.$size===e.ComponentSizes.MEDIUM?t.css`
+            td, th {
+              padding-top: 12px;
+              padding-bottom: 12px;
+            }
+            th>span {
+              font-size: 14px;
+            }
+            td>span {
+              font-size: 13px;
+            }
+          `:o.$size===e.ComponentSizes.DEFAULT?t.css`
+            td, th {
+              padding-top: 15px;
+              padding-bottom: 15px;
+            }
+            th>span {
+              font-size: 14px;
+            }
+            td>span {
+              font-size: 13px;
+            }
+          `:o.$size===e.ComponentSizes.LARGE?t.css`
+            td, th {
+              padding-top: 18px;
+              padding-bottom: 18px;
+            }
+            th>span {
+              font-size: 15px;
+            }
+            td>span {
+              font-size: 14px;
+            }
+          `:o.$size===e.ComponentSizes.X_LARGE?t.css`
+            td, th {
+              padding-top: 20px;
+              padding-bottom: 20px;
+            }
+            th>span {
+              font-size: 15px;
+            }
+            td>span {
+              font-size: 14px;
+            }
+          `:t.css`
+            td, th {
+              padding-top: 15px;
+              padding-bottom: 15px;
+            }
+            th>span {
+              font-size: 14px;
+            }
+            td>span {
+              font-size: 13px;
+            }
+          `}
+
+      td, th {
+          
+        ${o=>o.$noGaps?t.css`
+              padding-left: 0;
+              padding-right: 0;
+            `:o.$size===e.ComponentSizes.X_SMALL?t.css`
+              padding-left: 10px;
+              padding-right: 10px;
+            `:o.$size===e.ComponentSizes.SMALL||o.$size===e.ComponentSizes.MEDIUM||o.$size===e.ComponentSizes.DEFAULT?t.css`
+              padding-left: 15px;
+              padding-right: 15px;
+            `:o.$size===e.ComponentSizes.LARGE||o.$size===e.ComponentSizes.X_LARGE?t.css`
+              padding-left: 20px;
+              padding-right: 20px;
+            `:t.css`
+              padding-left: 15px;
+              padding-right: 15px;
+            `}
+
+      }
+
+    }
+
+    &:not(.itd-table-no-gaps) {
+
+      >thead {
+
+        background-color: #FAFAFA;
+
+        td:first-child, th:first-child {
+          padding-left: 30px;
+        }
+        
+      }
+
+      &:not(.itd-table-no-data):not(.itd-table-empty) {
+        >tbody {
+          td:first-child, th:first-child {
+            padding-left: 30px;
+          }
+        }
+      }
+
+      /**
+       * Tabloda içeriği boşsa.
+       */
+      &.itd-table-no-data {
+
+        >tbody {
+          >tr {
+            background-color: #FAFAFA;
+          }
+        }
+
+      }
+
+      /**
+       * Tabloda içeriği boş değilse.
+       */
+      &:not(.itd-table-empty) {
+
+        /**
+         * Ana tablo satırların üstüne gelindiğinde
+         */
+        >tbody >tr:not(.itd-table-row-inner):hover {
+          background-color: #FAFAFA;
+        }
+
+        /**
+         * Alt tablo satırların üstüne gelindiğinde
+         */
+        .itd-table-inner-table >tbody >tr:hover {
+          background-color: #FAFAFA;
+        }
+
+      }
+
+    }
+
+    /**
+     * DÜZ ÇİZGİLİ VE DIŞ KENARLIKSIZ
+     */
+    &:not(.itd-table-bordered) {
+
+      /**
+       * Ana tablo hücre kenarlıkları
+       */
+      >tbody >tr, >thead >tr {
+        border-top: 1px solid #f1f1f4;
+        border-bottom: 1px solid #f1f1f4;
+      }
+
+      /**
+       * Alt tablo hücre kenarlıkları
+       */
+      .itd-table-inner-table {
+        >tbody >tr {
+
+          &:not(:first-child) {
+            border-top: 1px solid #f1f1f4;
+          }
+
+          &:not(:last-child) {
+            border-bottom: 1px solid #f1f1f4;
+          }
+          
+        }
+      }
+      
+    }
+
+    /**
+     * DÜZ ÇİZGİLİ VE DIŞ KENARLIKLI
+     */
+    &.itd-table-bordered {
+
+      /**
+       * Ana tablo hücre kenarlıkları
+       */
+      >tbody >tr , >thead >tr {
+
+        border-top: 1px solid #f1f1f4;
+        border-bottom: 1px solid #f1f1f4;
+        border-left: 1px solid #f1f1f4;
+        border-right: 1px solid #f1f1f4;
+
+        >td, >th {
+          border-left: 1px solid #f1f1f4;
+          border-right: 1px solid #f1f1f4;
+        }
+
+      }
+
+      /**
+       * Alt tablo hücre kenarlıkları
+       */
+      .itd-table-inner-table {
+        >tbody >tr {
+
+          &:not(:first-child) {
+            border-top: 1px solid #f1f1f4;
+          }
+
+          &:not(:last-child) {
+            border-bottom: 1px solid #f1f1f4;
+          }
+
+          >td:not(:first-child) {
+            border-left: 1px solid #f1f1f4;
+          }
+
+          >td:not(:last-child) {
+            border-right: 1px solid #f1f1f4;
+          }
+          
+        }
+      }
+
+    }
+
+    /**
+     * KESİK ÇİZGİLİ, DIŞ KENARLIKSIZ
+     */
+    &.itd-table-dashed {
+
+      /**
+       * Ana tablo hücre kenarlıkları
+       */
+      >tbody >tr, >thead >tr {
+        border-top: 1px dashed #f1f1f4;
+        border-bottom: 1px dashed #f1f1f4;
+      }
+
+      /**
+       * Alt tablo hücre kenarlıkları
+       */
+      .itd-table-inner-table {
+        >tbody >tr {
+
+          &:not(:first-child) {
+            border-top: 1px dashed #f1f1f4;
+          }
+
+          &:not(:last-child) {
+            border-bottom: 1px dashed #f1f1f4;
+          }
+          
+        }
+      }
+
+    }
+
+    /**
+     * KESİK ÇİZGİLİ VE DIŞ KENARLIKLI
+     */
+    &.itd-table-dashed.itd-table-bordered {
+
+      /**
+       * Ana tablo hücre kenarlıkları
+       */
+      >tbody >tr, >thead >tr {
+      
+        border-top: 1px dashed #f1f1f4;
+        border-bottom: 1px dashed #f1f1f4;
+        border-left: 1px dashed #f1f1f4;
+        border-right: 1px dashed #f1f1f4;
+
+        >td, >th {
+          border-left: 1px dashed #f1f1f4;
+          border-right: 1px dashed #f1f1f4;
+        }
+
+      }
+
+      /**
+       * Alt tablo hücre kenarlıkları
+       */
+      .itd-table-inner-table {
+        >tbody >tr {
+
+          &:not(:first-child) {
+            border-top: 1px dashed #f1f1f4;
+          }
+
+          &:not(:last-child) {
+            border-bottom: 1px dashed #f1f1f4;
+          }
+
+          >td:not(:first-child) {
+            border-left: 1px dashed #f1f1f4;
+          }
+
+          >td:not(:last-child) {
+            border-right: 1px dashed #f1f1f4;
+          }
+          
+        }
+      }
+
+    }
+
+    /**
+     * ÇİZGİSİZ VE KENARLIKSIZ
+     */
+    &:not(.itd-table-bordered) {
+
+      thead tr:first-child {
+        border-top-style: none;
+        border-top-style: none;
+      }
+      tbody tr:last-child {
+        border-bottom-style: none;
+        border-bottom-style: none;
+      }
+
+      &.itd-table-headless {
+        tbody tr:first-child {
+          border-top-style: none;
+          border-top-style: none;
+        }
+      }
+
+    }
+
+  }
+
+`,d=t.div`
+
+  height: 150px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  >div {
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+  }
+
+  span {
+    font-size: 12px;
+    font-weight: 500;
+    color: #4D4D4D;
+  }
+
+  svg {
+    fill: #4D4D4D;
+  }
+  
+`,i=t.span`
+
+  ${e=>{if(e.$overflow)return t.css`
+        overflow      : hidden;
+        white-space   : nowrap;
+        text-overflow : ellipsis;
+        position      : relative;
+        display       : block;
+      `}}
+  
+`,r=t.span`
+
+  ${e=>{if(e.$overflow)return t.css`
+        overflow      : hidden;
+        white-space   : nowrap;
+        text-overflow : ellipsis;
+        position      : relative;
+        display       : block;
+      `}}
+
+`;exports.Cell=r,exports.EmptyBody=d,exports.RowTitle=i,exports.Wrapper=o;

package/dist/cjs/tabs/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("react-router-dom"),r=require("./styles.js");exports.default=({tabs:i=[],activeTabKey:s="",className:n="",variant:l="default",height:c,onTabChange:d})=>{const[o,u]=t.useState(s);t.useEffect(()=>{o!==s&&u(s)},[s]);const h=(e,t)=>(()=>{let e=!1;return i.map(t=>{t.link&&(e=!0)}),e})()?"":o?o===e?"active":"":s&&0===t?"active":"",k=e=>{u(e),d&&d(e)},j=(t,a)=>e.jsx("a",{className:h(t.key,a),onClick:()=>k(t.key),children:e.jsx("span",{children:t.tab})}),x=(t,r)=>e.jsx(a.NavLink,{className:h(t.key,r),onClick:()=>k(t.key),to:t.link?t.link:"",children:e.jsx("span",{children:t.tab})});return e.jsxs(r.Wrapper,{$height:c,className:`itd-tabs ${n||""}`,children:[e.jsx(r.TabMenuNavigation,{$isBold:"bold"===l,children:e.jsx("ul",{children:i.map((t,a)=>e.jsx("li",{children:t.link?x(t,a):j(t,a)},t.key))})}),(()=>{const t=i.filter(e=>e.key===o)[0];if(t&&t.children)return e.jsx(r.TabContentBody,{className:"itd-content-body",children:t.children})})()]})};

package/dist/cjs/tabs/styles.js

@@ -0,0 +1,96 @@
+"use strict";var t=require("styled-components");const o=t.div`
+
+  height: ${t=>t.$height?t.$height+"px":"75px"};
+
+`,s=t.div`
+
+  font-size: 14px;
+  height: 100%;
+
+  ul {
+
+    display: flex;
+    align-items: stretch;
+    flex-wrap: wrap;
+    list-style: none;
+
+    margin: 0;
+    padding: 0;
+    height: 100%;
+
+    li {
+
+      display: flex;
+      align-items: stretch;
+
+      height: 100%;
+
+      &:not(:last-child) { 
+        margin-right: 30px;
+      }
+
+      a {
+        
+        background-color: transparent;
+        border: 0;
+        border-bottom: 1px solid #1b84ff00;
+        transition: color .2s ease;
+        display: flex;
+        align-items: center;
+        height: 100%;
+        cursor: pointer;
+
+        transition: all .3s ease-out;
+
+        span {
+          transition: all .3s ease-out;
+        }
+
+        span {
+          color: #99a1b7;
+        }
+
+        &:hover:not(&.active) {
+          ${o=>{if(o.$isBold)return t.css`
+                span {
+                  color: #1b84ff;
+                }
+              `}}
+          border-color: #1b84ff;
+        }
+
+        &.active {
+          ${o=>o.$isBold?t.css`
+                span {
+                  color: #1b84ff;
+                }
+              `:t.css`
+                span {
+                  color: #071437;
+                }
+              `}
+          border-color: #1b84ff;
+        }
+
+        ${o=>o.$isBold?t.css`
+              border-width: 2px;
+              span {
+                font-weight: 600;
+              }
+            `:t.css`
+              span {
+                font-weight: 500;
+              }
+            `}
+
+      }
+    }
+
+  }
+
+`,e=t.div`
+
+  padding: 20px 0;
+  color: #99a1b7;
+  
+`;exports.TabContentBody=e,exports.TabMenuNavigation=s,exports.Wrapper=o;

package/dist/cjs/textarea/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../utils/GetSizeSlugBySize.js"),a=require("../enums/enum.js"),s=require("../utils/CommonStyledComponents.js"),o=require("./styled.js"),u=require("../node_modules/uuid/dist/esm-browser/v4.js");let n=!1,d=!1;const i=t.forwardRef(({id:i,placeholder:l="",value:c="",defaultValue:m="",className:f="",size:p=a.ComponentSizes.DEFAULT,variant:x="default",rows:v=3,maxLength:h=-1,disabled:g=!1,showCount:j=!1,onChange:E,onUpdate:w,children:S},b)=>{const y=t.useRef(null),q=t.useMemo(()=>i||"itd-textarea-"+u.default(),[i]),[C,L]=t.useState(""),[N,T]=t.useState(!1),[D,z]=t.useState(!1),[k,F]=t.useState("");t.useEffect(()=>{(()=>{if(n)return;n=!0,document.addEventListener("keydown",e=>{e&&"Tab"===e.key&&(d=!0)});const e=()=>{d=!1};document.addEventListener("mousedown",e,{passive:!0}),document.addEventListener("pointerdown",e,{passive:!0}),document.addEventListener("touchstart",e,{passive:!0})})(),m&&I(m)},[]),t.useEffect(()=>{I(String(c),!0,""!==c)},[c]);const I=(e,t=!0,r=!0)=>{L(e),w&&w(e,t,r)};t.useImperativeHandle(b,()=>({setFocus(){y.current&&y.current.focus()},reset(e=!0,t=!0){L(m||""),F(""),I("",e,t)},setValue(e,t=!0,r=!0){L(e),I(e,t,r)},getValue:()=>C,setError(e){F(e)},forceUpdate(){I(C)},clear(){L("")}}));const P=e=>{L(e.target.value),I(e.target.value,!0,!0),E&&E({value:e.target.value,className:"itd-textarea",disabled:g,target:y,stopPropagation:()=>{e.stopPropagation()},preventDefault:()=>{e.preventDefault()}})},A=e=>{z(!0),T(!0===d)},B=e=>{z(!1),T(!1)},M=e=>{"Tab"===e.key&&T(!0)},R=()=>{let t={id:q,placeholder:l,value:C,className:"itd-textarea-default-input",disabled:g,autoComplete:"off",rows:v,maxLength:h,onChange:P,onFocus:A,onBlur:B,onKeyDown:M,ref:y};return e.jsx("textarea",{...t})},U=()=>{if(""!==k&&!g)return e.jsx(e.Fragment,{children:e.jsx(s.ErrorBorder,{$fullSize:!0,className:"itd-textarea-error-border"})})},V=()=>{if(""!==k&&!g)return e.jsx(o.ErrorWrapper,{children:e.jsx(s.ErrorIcon,{message:k,className:"itd-textarea-failed itd-error-icon",tooltipPosition:"top-right"})})},_=t.useMemo(()=>{let e="itd-textarea";return e+=" itd-textarea-"+r.default(p),e+=" itd-textarea-"+x,g&&(e+=" itd-textarea-disabled"),D&&(e+=" itd-textarea-focus"),N&&(e+=" itd-textarea-keyboard-focus"),j&&(e+=" itd-textarea-show-count"),""!==k&&(e+=" itd-textarea-error"),""!==f&&(e+=" "+f),e},[p,x,g,D,N,j,k,f]);return(()=>{if(S)throw new Error("ITD TextArea Error: Remove the children!");return e.jsxs(o.Wrapper,{className:_,children:[R(),U(),V()]})})()});i.displayName="ITD-TextArea",exports.default=i;