cats-data-grid 0.0.1 → 0.0.5

package/{styles → src/lib/styles}/base/_fonts.scss

@@ -1,74 +1,74 @@
-// @use url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");
-
-@use "../sass-utils" as *;
-
-:root {
-  --fs-6: 6px;
-  --fs-12: 12px;
-  --fs-14: 14px;
-  --fs-16: 16px;
-  --fs-18: 18px;
-  --fs-20: 20px;
-  --fs-24: 24px;
-  --fs-28: 28px;
-  --fs-30: 30px;
-  --fs-32: 32px;
-  --fs-42: 42px;
-  --fs-48: 48px;
-  --img-w: 28px;
-  --scale: 1;
-}
-
-@include width-range($tablet, $mediumDesktop) {
-  :root {
-    --scale: 1.5;
-    --fs-6: calc(6px / var(--scale));
-    --fs-12: calc(12px / var(--scale));
-    --fs-14: calc(14px / var(--scale));
-    --fs-16: calc(16px / var(--scale));
-    --fs-18: calc(18px / var(--scale));
-    --fs-20: calc(20px / var(--scale));
-    --fs-24: calc(24px / var(--scale));
-    --fs-28: calc(28px / var(--scale));
-    --fs-30: calc(30px / var(--scale));
-    --fs-32: calc(32px / var(--scale));
-    --fs-42: calc(42px / var(--scale));
-    --fs-48: calc(48px / var(--scale));
-  }
-}
-
-@include width-range($largeDesktop, $extraLargeDesktop) {
-  :root {
-    --scale: 1.33;
-    --fs-6: calc(6px / var(--scale));
-    --fs-12: calc(12px / var(--scale));
-    --fs-14: calc(14px / var(--scale));
-    --fs-16: calc(16px / var(--scale));
-    --fs-18: calc(18px / var(--scale));
-    --fs-20: calc(20px / var(--scale));
-    --fs-24: calc(24px / var(--scale));
-    --fs-28: calc(28px / var(--scale));
-    --fs-30: calc(30px / var(--scale));
-    --fs-32: calc(32px / var(--scale));
-    --fs-42: calc(42px / var(--scale));
-    --fs-48: calc(48px / var(--scale));
-  }
-}
-
-@include width-range($xxlargeDesktop, $ultraWideDesktop) {
-  :root {
-    --scale: 1.25;
-    --fs-6: calc(6px / var(--scale));
-    --fs-12: calc(12px / var(--scale));
-    --fs-14: calc(14px / var(--scale));
-    --fs-16: calc(16px / var(--scale));
-    --fs-18: calc(18px / var(--scale));
-    --fs-20: calc(20px / var(--scale));
-    --fs-24: calc(24px / var(--scale));
-    --fs-28: calc(28px / var(--scale));
-    --fs-30: calc(30px / var(--scale));
-    --fs-32: calc(32px / var(--scale));
-    --fs-42: calc(42px / var(--scale));
-    --fs-48: calc(48px / var(--scale));
-  }
-}
+// @use url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");
+
+@use "../sass-utils" as *;
+
+:root {
+  --fs-6: 6px;
+  --fs-12: 12px;
+  --fs-14: 14px;
+  --fs-16: 16px;
+  --fs-18: 18px;
+  --fs-20: 20px;
+  --fs-24: 24px;
+  --fs-28: 28px;
+  --fs-30: 30px;
+  --fs-32: 32px;
+  --fs-42: 42px;
+  --fs-48: 48px;
+  --img-w: 28px;
+  --scale: 1;
+}
+
+@include width-range($tablet, $mediumDesktop) {
+  :root {
+    --scale: 1.5;
+    --fs-6: calc(6px / var(--scale));
+    --fs-12: calc(12px / var(--scale));
+    --fs-14: calc(14px / var(--scale));
+    --fs-16: calc(16px / var(--scale));
+    --fs-18: calc(18px / var(--scale));
+    --fs-20: calc(20px / var(--scale));
+    --fs-24: calc(24px / var(--scale));
+    --fs-28: calc(28px / var(--scale));
+    --fs-30: calc(30px / var(--scale));
+    --fs-32: calc(32px / var(--scale));
+    --fs-42: calc(42px / var(--scale));
+    --fs-48: calc(48px / var(--scale));
+  }
+}
+
+@include width-range($largeDesktop, $extraLargeDesktop) {
+  :root {
+    --scale: 1.33;
+    --fs-6: calc(6px / var(--scale));
+    --fs-12: calc(12px / var(--scale));
+    --fs-14: calc(14px / var(--scale));
+    --fs-16: calc(16px / var(--scale));
+    --fs-18: calc(18px / var(--scale));
+    --fs-20: calc(20px / var(--scale));
+    --fs-24: calc(24px / var(--scale));
+    --fs-28: calc(28px / var(--scale));
+    --fs-30: calc(30px / var(--scale));
+    --fs-32: calc(32px / var(--scale));
+    --fs-42: calc(42px / var(--scale));
+    --fs-48: calc(48px / var(--scale));
+  }
+}
+
+@include width-range($xxlargeDesktop, $ultraWideDesktop) {
+  :root {
+    --scale: 1.25;
+    --fs-6: calc(6px / var(--scale));
+    --fs-12: calc(12px / var(--scale));
+    --fs-14: calc(14px / var(--scale));
+    --fs-16: calc(16px / var(--scale));
+    --fs-18: calc(18px / var(--scale));
+    --fs-20: calc(20px / var(--scale));
+    --fs-24: calc(24px / var(--scale));
+    --fs-28: calc(28px / var(--scale));
+    --fs-30: calc(30px / var(--scale));
+    --fs-32: calc(32px / var(--scale));
+    --fs-42: calc(42px / var(--scale));
+    --fs-48: calc(48px / var(--scale));
+  }
+}

package/{styles → src/lib/styles}/base/_index.scss

@@ -1,2 +1,2 @@
-@forward "./reset";
+@forward "./reset";
 @forward "./fonts";

package/{styles → src/lib/styles}/base/_reset.scss

@@ -1,60 +1,60 @@
-// Box Sizing
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  font-family: "Rethink";
-}
-
-body {
-  font-size: 100%;
-}
-
-// Font-inflation
-html {
-  -moz-text-size-adjust: none;
-  -webkit-text-size-adjust: none;
-  -ms-text-size-adjust: none;
-  text-size-adjust: none;
-}
-
-// Remove default margin and padding
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-ul,
-ol,
-p {
-  margin: 0;
-  padding: 0;
-  text-wrap: pretty;
-}
-
-// Remove list styles on ul, ol elements
-ul[role="list"],
-ol[role="list"] {
-  list-style: none;
-}
-
-ul {
-  list-style: none;
-}
-
-// images
-img,
-picture {
-  max-width: 100%;
-  display: block;
-}
-
-input,
-select,
-textarea {
-  outline: none;
-  box-shadow: none;
-}
+// Box Sizing
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  // font-family: "Open Sans", sans-serif;
+}
+
+body {
+  font-size: 100%;
+}
+
+// Font-inflation
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  -ms-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+// Remove default margin and padding
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+ol,
+p {
+  margin: 0;
+  padding: 0;
+  text-wrap: pretty;
+}
+
+// Remove list styles on ul, ol elements
+ul[role="list"],
+ol[role="list"] {
+  list-style: none;
+}
+
+ul {
+  list-style: none;
+}
+
+// images
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+input,
+select,
+textarea {
+  outline: none;
+  box-shadow: none;
+}

package/src/lib/styles/component/_form.scss

@@ -0,0 +1,371 @@
+@use "../sass-utils" as *;
+
+//========== CUSTOM SCROLL BAR ======================
+#table_scroll::-webkit-scrollbar {
+  @include box(rem(14px), rem(14px));
+}
+#table_scroll::-webkit-scrollbar-track {
+  background-color: var(--neutral-200);
+  @include border($width: rem(3px), $radius: rem(100px), $color: transparent);
+  background-clip: padding-box;
+}
+#table_scroll::-webkit-scrollbar-thumb {
+  background-color: var(--neutral-500);
+  @include border($width: rem(3px), $radius: rem(100px), $color: transparent);
+  background-clip: padding-box;
+}
+#table_scroll::-webkit-scrollbar-corner {
+  background: transparent;
+}
+#table_scroll::-webkit-scrollbar-button {
+  @include box(rem(14px), rem(14px));
+  background-color: var(--neutral-100);
+  border-radius: rem(2px);
+  cursor: pointer;
+  display: none;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: rem(10px);
+}
+#table_scroll::-webkit-scrollbar-button:hover {
+  background-color: var(--neutral-300);
+}
+#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement {
+  background-image: url("/images/chevron-up.svg");
+  display: block;
+  // border-top-right-radius: 8px;
+}
+#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment {
+  background-image: url("/images/chevron-down.svg");
+  display: block;
+}
+#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement {
+  background-image: url("/images/chevron-left.svg");
+  display: block;
+  // border-bottom-left-radius: 8px;
+}
+#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment {
+  background-image: url("/images/chevron-right.svg");
+  display: block;
+}
+#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement {
+  display: block;
+  height: rem(55px);
+  background:
+    url("/images/chevron-up.svg") bottom / rem(15px) no-repeat,
+    linear-gradient(
+      to bottom,
+      rgb(240, 240, 240) 0%,
+      rgb(240, 240, 240) 70.5%,
+      var(--neutral-200) 70.5%,
+      var(--neutral-200) 72.5%,
+      var(--neutral-100) 72.5%,
+      var(--neutral-100) 100%
+    );
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  &:hover {
+    background:
+      url("/images/chevron-up.svg") bottom / rem(15px) no-repeat,
+      linear-gradient(
+        to bottom,
+        rgb(240, 240, 240) 0%,
+        rgb(240, 240, 240) 70.5%,
+        var(--neutral-200) 70.5%,
+        var(--neutral-200) 72.5%,
+        var(--neutral-300) 72.5%,
+        var(--neutral-300) 100%
+      );
+  }
+}
+
+// ----------------  CUSTOM RADIO INPUT START HERE--------
+.radio_option {
+  display: flex;
+  @include box(rem(16px), rem(16px));
+  [type="radio"]:not(:checked)[disabled] + label {
+    color: var(--neutral-300);
+    cursor: default;
+    &::before {
+      background-color: var(--neutral-100);
+    }
+  }
+  [type="radio"]:is(:checked)[disabled] + label {
+    color: var(--neutral-300);
+    cursor: default;
+    &::before {
+      border-color: var(--neutral-100);
+    }
+    &::after {
+      background-color: var(--neutral-100);
+    }
+  }
+  %check-style {
+    content: "";
+    position: absolute;
+    @include positioning(0, 0);
+    @include box(rem(16px), rem(16px));
+    background: var(--white);
+  }
+  [type="radio"]:checked,
+  [type="radio"]:not(:checked) {
+    position: absolute;
+    left: -9999px;
+  }
+  [type="radio"]:checked + label,
+  [type="radio"]:not(:checked) + label {
+    position: relative;
+    padding-left: rem(24px);
+    cursor: pointer;
+    display: inline-block;
+    color: var(--neutral-600);
+    line-height: rem(16px);
+  }
+  [type="radio"]:checked + label:before {
+    @extend %check-style;
+    @include border($width: rem(1.5px), $color: var(--blue-600), $radius: 100%);
+  }
+  [type="radio"]:not(:checked) + label:before {
+    @extend %check-style;
+    @include border($width: rem(1.5px), $radius: 100%);
+  }
+  [type="radio"]:checked + label:after,
+  [type="radio"]:not(:checked) + label:after {
+    content: "";
+    @include box(rem(6px), rem(6px));
+    background: var(--blue-600);
+    position: absolute;
+    @include positioning(rem(5px), rem(5px));
+    border-radius: 100%;
+    transition: all 0.2s ease;
+  }
+  [type="radio"]:not(:checked) + label:after {
+    opacity: 0;
+    transform: scale(0);
+  }
+  [type="radio"]:checked + label:after {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+// ----------------  CUSTOM CHECKBOX INPUT START HERE--------
+.checkbox_container {
+  @include flex(flex-start, center, rem(8px));
+  @include fontStyle(var(--fs-14), rem(20px), 400);
+  color: var(--neutral-600);
+  // --- Disabled (check & uncheck) ---
+  input[type="checkbox"].custom_check_box,
+  input[type="checkbox"].custom_check_box:checked {
+    &[disabled] {
+      cursor: default;
+      background-color: var(--neutral-300);
+      border-color: var(--neutral-300);
+      & + span {
+        color: var(--neutral-300);
+      }
+    }
+  }
+  input[type="checkbox"].custom_check_box {
+    appearance: none;
+    -webkit-appearance: none;
+    @include box(rem(16px), rem(16px));
+    min-width: rem(16px);
+    @include border();
+    cursor: pointer;
+    background-color: var(--white);
+    position: relative;
+    transition: all 0.2s ease;
+
+    // --- Default (unchecked) ---
+    &::after {
+      content: "";
+      display: none;
+      position: absolute;
+      @include positioning(rem(-1px), rem(-1px));
+      @include box(rem(16px), rem(16px));
+      background-size: auto;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+    // --- Checked State ---
+    &:checked {
+      border-color: var(--blue-600);
+      background-color: var(--blue-600);
+      &::after {
+        display: block;
+        background-image: url("/images/check-white.svg");
+        background-size: rem(8px) rem(6px);
+      }
+    }
+    // --- Indeterminate (minus) state ---
+    &:indeterminate {
+      border-color: var(--blue-600);
+      background-color: var(--white);
+      &::after {
+        display: block;
+        top: 0;
+        background-image: url("/images/minus-blue.svg");
+        background-size: rem(7px) rem(1px);
+      }
+    }
+  }
+}
+
+// ----------------  CUSTOM SINGLE SELECT DROPDOWN START HERE--------
+.text_filter_section {
+  position: relative;
+  width: 100%;
+  .single_select_dropdown {
+    @include flex(space-between, center);
+    @include box(100%, rem(40px));
+    @include border();
+    padding: rem(10px) rem(12px);
+    @include fontStyle(var(--fs-14), rem(20px));
+    background-color: var(--white);
+    color: var(--neutral-600);
+    cursor: pointer;
+
+    .left_details {
+      @include flex("", center);
+      @include box(calc(100% - rem(20px)), "");
+    }
+    .arrow_icon {
+      img {
+        max-width: rem(20px);
+      }
+    }
+  }
+
+  .dropdown_list {
+    @include border();
+    width: 100%;
+    max-height: rem(172px);
+    overflow: auto;
+    position: absolute;
+    z-index: 2;
+    background: var(--white);
+    box-shadow: rem(0px) rem(12px) rem(16px) rem(-4px) var(--box-shadow);
+    top: rem(40px);
+
+    ul {
+      list-style-type: none;
+      padding: rem(4px) 0;
+
+      &:has(.no_data) li:hover {
+        background-color: unset;
+        cursor: default;
+      }
+      li {
+        height: rem(40px);
+        @include flex(space-between, center);
+        @include fontStyle(var(--fs-14), rem(20px));
+        padding: rem(10px) rem(12px);
+        cursor: pointer;
+        color: var(--neutral-600);
+        &:hover {
+          background-color: var(--neutral-50);
+        }
+        &.disabled_option {
+          opacity: 0.3;
+          pointer-events: none;
+        }
+      }
+    }
+  }
+}
+
+// --------------Searchbox with icon-------------
+.search_input {
+  position: relative;
+  @include box(100%, rem(40px));
+  @include border();
+  padding: rem(10px) rem(12px);
+  background-color: var(--white);
+  @include flex(flex-start, center, rem(4px));
+
+  img {
+    @include box(rem(20px), rem(20px));
+    opacity: 0.5;
+  }
+  input {
+    @include box(100%, 100%);
+    border: 0;
+    @include fontStyle(var(--fs-14), rem(20px), 400);
+    color: var(--neutral-600);
+    &::placeholder {
+      color: var(--neutral-500);
+    }
+  }
+}
+
+// --------------Toggle Switch css-------------
+.table_switch_wrapper {
+  display: flex;
+  .switch {
+    position: relative;
+    display: inline-block;
+    @include box(rem(28px), rem(16px)); /* default size */
+    input {
+      display: none;
+    }
+    .slider {
+      position: absolute;
+      cursor: pointer;
+      background-color: var(--neutral-100);
+      border-radius: rem(16px);
+      inset: 0;
+      transition: 0.3s;
+      &:before {
+        content: "";
+        position: absolute;
+        @include box(rem(12px), rem(12px));
+        left: rem(2px);
+        bottom: rem(2px);
+        background-color: var(--white);
+        border-radius: 50%;
+        transition: 0.3s;
+        box-shadow: 0 rem(0.8px) rem(2.4px) 0 var(--box-shadow);
+      }
+    }
+
+    input:checked + .slider {
+      background-color: var(--blue-600);
+      &:before {
+        transform: translateX(rem(12px));
+      }
+    }
+  }
+}
+.tableArea.big {
+  .table_wrapper {
+    table {
+      tbody {
+        tr {
+          :host .table_switch_wrapper {
+            .switch {
+              @include box(rem(38px), rem(20px)); /* big size */
+              .slider {
+                &:before {
+                  @include box(rem(16px), rem(16px));
+                }
+              }
+              input:checked + .slider {
+                &:before {
+                  transform: translateX(rem(18px));
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.text-primary {
+  color: var(--blue-600);
+}
+.text-danger {
+  color: var(--red) !important;
+}

package/{styles → src/lib/styles}/component/_index.scss

@@ -1 +1 @@
-@forward "./form";
+@forward "./form";

package/{styles → src/lib/styles}/sass-utils/_function.scss

@@ -1,14 +1,14 @@
-@use "sass:math";
-@use "sass:list";
-
-$font-size: 12px;
-html {
-  font-size: $font-size;
-}
-@function rem($pxValue) {
-  // @return math.div($pxValue, $font-size) * 1rem;
-  // @return calc(math.div($pxValue, $font-size) * 1rem / var(--scale));
-  $val: calc($pxValue/$font-size);
-  @return calc($val * 1rem / var(--scale));
-  // @return list.slash(calc(math.div($pxValue, $font-size) * 1rem), var(--scale));
-}
+@use "sass:math";
+@use "sass:list";
+
+$font-size: 12px;
+html {
+  font-size: $font-size;
+}
+@function rem($pxValue) {
+  // @return math.div($pxValue, $font-size) * 1rem;
+  // @return calc(math.div($pxValue, $font-size) * 1rem / var(--scale));
+  $val: calc($pxValue/$font-size);
+  @return calc($val * 1rem / var(--scale));
+  // @return list.slash(calc(math.div($pxValue, $font-size) * 1rem), var(--scale));
+}

package/{styles → src/lib/styles}/sass-utils/_index.scss

@@ -1,3 +1,3 @@
-@forward "./variable";
-@forward "./function";
-@forward "./mixin";
+@forward "./variable";
+@forward "./function";
+@forward "./mixin";