cats-data-grid 0.0.1 → 0.0.5

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

@@ -1,56 +1,87 @@
-$tablet: 1024px;
-$mediumDesktop: 1280px;
-$largeDesktop: 1360px;
-$extraLargeDesktop: 1440px;
-$xxlargeDesktop: 1536px;
-$ultraWideDesktop: 1919px;
-
-// --------------- MEDIA QUERY ------------------------
-@mixin width-range($min, $max) {
-  @media only screen and (min-width: $min) and (max-width: $max) {
-    @content;
-  }
-}
-// Example: how to use this mixin
-// You can use any range
-// @include width-range($mobile, $tablet - 1px) {
-//   // Styles for screens between mobile and tablet width
-// }
-
-// -------------- BOX HEIGHT AND WIDTH -------
-@mixin box($width, $height: 100%) {
-  width: $width;
-  height: $height;
-}
-
-// ------------- FONT STYLE
-@mixin fontStyle($fontSize, $lineHeight, $fontWeight: 400) {
-  font-size: $fontSize;
-  line-height: $lineHeight;
-  font-weight: $fontWeight;
-}
-
-// -------------  FLEX PROPERTY ------------------------
-@mixin flex(
-  $justify: flex-start,
-  $align: stretch,
-  $gap: 0,
-  $direction: row,
-  $wrap: nowrap
-) {
-  display: flex;
-  flex-direction: $direction;
-  justify-content: $justify;
-  align-items: $align;
-  flex-wrap: $wrap;
-  gap: $gap;
-}
-
-// USE CASE: IF YOU WANT ONLY 2 PROP. THEN OTHER PROP WILL APPLY AS DEFAULT PROP.
-// @include flex(center, stretch,row, wrap, 10px);
-
-// Positioning element
-@mixin positioning($top, $left) {
-  top: $top;
-  left: $left;
-}
+@use "variable" as *;
+@use "function" as *;
+
+$tablet: 1024px;
+$mediumDesktop: 1280px;
+$largeDesktop: 1360px;
+$extraLargeDesktop: 1440px;
+$xxlargeDesktop: 1536px;
+$ultraWideDesktop: 1919px;
+
+// --------------- MEDIA QUERY ------------------------
+@mixin width-range($min, $max) {
+  @media only screen and (min-width: $min) and (max-width: $max) {
+    @content;
+  }
+}
+// Example: how to use this mixin
+// You can use any range
+// @include width-range($mobile, $tablet - 1px) {
+//   // Styles for screens between mobile and tablet width
+// }
+
+// -------------- BOX HEIGHT AND WIDTH -------
+@mixin box($width, $height: 100%) {
+  width: $width;
+  height: $height;
+}
+
+// ------------- FONT STYLE
+@mixin fontStyle($fontSize, $lineHeight, $fontWeight: 400) {
+  font-size: $fontSize;
+  line-height: $lineHeight;
+  font-weight: $fontWeight;
+}
+
+// -------------  FLEX PROPERTY ------------------------
+@mixin flex(
+  $justify: flex-start,
+  $align: stretch,
+  $gap: 0,
+  $direction: row,
+  $wrap: nowrap
+) {
+  display: flex;
+  flex-direction: $direction;
+  justify-content: $justify;
+  align-items: $align;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// USE CASE: IF YOU WANT ONLY 2 PROP. THEN OTHER PROP WILL APPLY AS DEFAULT PROP.
+// @include flex(center, stretch,row, wrap, 10px);
+
+// Positioning element
+@mixin positioning($top, $left) {
+  top: $top;
+  left: $left;
+}
+
+// -------------  Border PROPERTY with width,color and radius ---------------------
+@mixin border(
+  $width: rem(1px),
+  $style: solid,
+  $color: var(--neutral-200),
+  $radius: rem(4px)
+) {
+  border: $width $style $color;
+  border-radius: $radius;
+}
+
+// ------------- On table top header Swap image on hover  ---------------------
+@mixin hoverSwap($base, $hover) {
+  #{$hover} {
+    display: none;
+  }
+
+  &:hover {
+    #{$base} {
+      display: none;
+    }
+
+    #{$hover} {
+      display: flex;
+    }
+  }
+}

package/src/lib/styles/sass-utils/_variable.scss

@@ -0,0 +1,77 @@
+:root {
+  --white: #ffffff;
+
+  // --default: #000000;
+  // --black: #1f1f1f;
+  // --black-dust: #1a1a1a;
+  // --black-900: #202224;
+
+  --pagination-text: var(--neutral-500);
+
+  // NEUTRAL-COLOR
+  // --neutral-cross: #d9d9d9;
+  // --neutral-40: #d5d7da;
+  --neutral-50: #f0f0f0;
+  --neutral-100: #e6e7e8;
+  --neutral-200: #dadbdc;
+  --neutral-300: #c0c2c5;
+  --neutral-400: #81858a;
+  --neutral-500: #434a51;
+  --neutral-600: #040d17;
+  // --neutral-900: #010306;
+
+  // BLUE COLOR
+  --blue-50: #f7fafe;
+  --blue-100: #eaf3fd;
+  // --blue-200: #dfecfc;
+  --blue-300: #c8dff9;
+  // --blue-400: #92bff4;
+  --blue-600: #2680ea;
+  --blue-700: #1c60af;
+  // --blue-800: #1849d6;
+
+  // GREY COLOR
+  --grey-50: #e9eaeb;
+  // --grey-100: #e2e8f0;
+  // --grey-150: #d6d6d6;
+  // --grey-200: #64748b;
+  // --grey-300: #414651;
+  // --grey-400: #8080808c;
+  // --grey-600: #535862;
+  // --light-grey: #81858a;
+  // --dark-grey: #4a4a4a;
+
+  // --green-50: #f7fbf7;
+  --green-100: #ecf4ec;
+  --green-200: #e1eee2;
+  // --green-400: #9bc69d;
+  --green-600: #388e3c;
+  --green-700: #2a6a2d;
+
+  --red: #ff0000;
+  // --red-50: #fdf7f7;
+  --red-100: #faeaea;
+  // --red-200: #f7dfdf;
+  --red-300: #f0c9c9;
+  --red-700: #941e1e;
+
+  // --yellow-50: #fffdf5;
+  --yellow-100: #fff9e7;
+  // --yellow-200: #fff6da;
+  --yellow-300: #ffefc1;
+  // --yellow-400: #fff9e7;
+  // --yellow-500: #bf7200;
+  // --yellow-600: #ffc107;
+  --yellow-700: #bf9105;
+  // --yellow-800: #806003;
+  // --yellow-900: #bf9105;
+
+  // Orange
+  // --orange-50: rgba(255, 251, 245, 1);
+  // --orange-100: #fff5e6;
+  // --orange-200: #fff0d9;
+  --orange-600: #ff9800;
+  // --orange-700: rgba(191, 114, 0, 1);
+
+  --box-shadow: #0a0d1214;
+}

package/src/public-api.ts

@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of cats-data-grid
+ */
+
+export * from './lib/services/cats-data-grid.service';
+export * from './lib/cats-data-grid.component';
+export * from  './lib/renderers/common-renderer/common-renderer.component';

package/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}