techlify-inventory-common 0.0.1

package/src/styles.scss

@@ -0,0 +1,366 @@
+/*
+ * Entry point of global application style.
+ * Component-specific style should not go here and be included directly as part of the components.
+ */
+
+// Theme variables, must be included before the libraries to allow overriding defaults
+@import "theme/theme-variables";
+
+button,
+a,
+input {
+  outline: none !important;
+}
+
+html,
+body {
+  font-family: "Inter", sans-serif;
+  box-sizing: border-box;
+  height: 100%;
+  margin: 0;
+  background: #fafbfc;
+}
+
+h1 {
+  font-size: 1.5rem !important;
+}
+h3 {
+  font-size: 1rem !important;
+}
+
+.btn-xs {
+  font-size: 12px !important;
+  padding: 0 5px !important;
+  margin: 1px !important;
+  line-height: 25px !important;
+
+  mat-icon {
+    font-size: 16px;
+    height: 16px;
+    width: 16px;
+  }
+}
+
+.hoverable:hover {
+  cursor: pointer;
+}
+
+@media print {
+  html {
+    height: auto !important;
+    overflow-x: hidden;
+  }
+}
+
+.btn-nano {
+  line-height: 19px !important;
+  font-size: 12px !important;
+  padding: 0 4px !important;
+  margin: 1px !important;
+}
+
+.no-padding .mat-form-field-wrapper {
+  padding-bottom: 0;
+}
+
+.ui-widget {
+  font-size: 12px !important;
+}
+.p-datepicker table td {
+  padding: 0 !important;
+}
+
+.ng-trigger-overlayAnimation.p-datepicker {
+  z-index: 999999999 !important;
+}
+
+.inline-loader {
+  display: inline-block;
+}
+
+.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
+  line-height: 40px !important;
+}
+
+.mat-button-toggle-checked {
+  background-color: var(--primary-color) !important;
+  color: white !important;
+}
+
+.column-selector {
+  .mat-form-field-infix {
+    padding: 6px 0 !important;
+  }
+}
+
+.mat-icon-button {
+  width: 26px !important;
+}
+
+.color-primary {
+  color: var(--primary-color) !important;
+}
+
+.primary-bg {
+  background: var(--primary-color) !important;
+  color: white !important;
+}
+
+.bg-primary-lighter {
+  background-color: var(--primary-lighter-color) !important;
+}
+
+.font-weight-bold {
+  font-weight: bold;
+}
+
+.font-xs {
+  font-size: 0.75rem;
+}
+
+.font-md {
+  font-size: 14px;
+}
+
+.h3-icon {
+  position: relative;
+  top: 6px;
+  color: inherit;
+}
+
+.bd-primary {
+  border: 1px solid var(--primary-color) !important;
+}
+
+:host ::ng-deep {
+  .white-fill-form .mat-form-field-flex {
+    background-color: white !important;
+  }
+}
+
+.white-button {
+  background-color: white !important;
+}
+
+.small-icon {
+  font-size: 18px !important;
+}
+
+.blink-icon {
+  position: relative;
+  top: 6px;
+  color: inherit;
+  animation: blink 2s ease-in infinite;
+}
+
+@keyframes blink {
+  from,
+  to {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+.inline-scroll {
+  height: 0;
+  overflow-y: scroll;
+}
+
+.mat-toolbar {
+  color: var(--primary-color) !important;
+  background-color: var(--header-bg-color) !important;
+}
+.top-menu-container {
+  background: white;
+  border-bottom: 1px solid #d9d9d9;
+  padding: 6px;
+  color: #787486;
+  font-size: 18px;
+  font-weight: 500;
+  margin-left: 0;
+  z-index: 1000 !important;
+}
+.filter-container {
+  background: white;
+  border-bottom: 1px solid #d9d9d9;
+  padding: 4px 20px;
+  color: #787486;
+  z-index: 1000 !important;
+  margin-top: 54px;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  padding-right: 256px;
+}
+.cursor-pointer {
+  cursor: pointer;
+}
+.cursor-move {
+  cursor: move;
+}
+.status-pill {
+  display: flex;
+  width: fit-content;
+  height: 32px;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: 8px;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  padding: 4px 24px;
+
+  .material-icons {
+    height: 16px;
+    width: 16px;
+    font-size: 16px;
+    margin: 0 2px;
+  }
+}
+.status-pill-sm {
+  height: 20px;
+  padding: 2px 6px;
+  font-size: 10px;
+
+  .material-symbols-outlined {
+    font-size: 15px;
+    height: 15px;
+    width: 15px;
+  }
+}
+
+.status-pending {
+  background: rgba(217, 217, 217, 0.2);
+  color: #ff7f00;
+}
+.status-ongoing {
+  background: rgba(0, 159, 221, 0.2);
+  color: #009fdd;
+}
+.status-blocked {
+  background: rgba(217, 217, 217, 0.2);
+  color: #f5222d;
+}
+.status-completed {
+  background: #e5f0cd;
+  color: #7cb305;
+}
+.status-approved {
+  background: rgba(217, 217, 217, 0.2);
+  color: #7cb305;
+}
+.status-light-warn {
+  background: #f4c55033;
+  color: #757575;
+}
+.status-light-purple {
+  background: #5f5aff33;
+  color: #757575;
+}
+.status-light-cyan {
+  background: #009ffd33;
+  color: #757575;
+}
+.status-light-green {
+  background: #e5f0cd;
+  color: #757575;
+}
+.status-light-orange {
+  background: #ff7f0033;
+  color: #757575;
+}
+.status-secondary {
+  color: #757575;
+  background: rgba(217, 217, 217, 0.2);
+}
+
+app-timeline-filter {
+  .mat-form-field {
+    width: 100%;
+  }
+}
+.text-dark {
+  color: rgba(58, 53, 65, 0.87);
+}
+.text-primary {
+  color: var(--primary-color) !important;
+}
+// Gap classes
+.gap-1 {
+  gap: 0.1rem;
+}
+.gap-2 {
+  gap: 0.5rem;
+}
+.gap-3 {
+  gap: 1rem;
+}
+
+.btn-secondary,
+.btn-secondary:hover,
+.btn-secondary:focus {
+  color: #787486;
+  border-radius: 2px;
+  background: rgba(217, 217, 217, 0.2);
+}
+.left-nav-container {
+  border-left: 1px solid #e0e0e8;
+  height: 100%;
+  margin-top: -22px;
+  padding-top: 15px;
+  padding-left: 15px;
+}
+th.mat-header-cell,
+td.mat-cell,
+td.mat-footer-cell {
+  padding: 4px !important;
+}
+th.mat-header-cell:first-of-type,
+td.mat-cell:first-of-type,
+td.mat-footer-cell:first-of-type {
+  padding-left: 24px !important;
+}
+
+.mat-list-single-selected-option,
+.mat-list-single-selected-option:hover,
+.mat-list-single-selected-option:focus {
+  background: var(--primary-color) !important;
+  color: white !important;
+}
+.top-menu-icon {
+  font-size: 22px;
+}
+
+/*
+ Small form-field
+*/
+.form-field-sm {
+  width: 100px;
+
+  .mat-mdc-form-field-infix {
+    padding-top: 2px !important;
+    padding-bottom: 2px !important;
+    min-height: 30px !important;
+  }
+  .mat-mdc-select-min-line {
+    font-size: 12px !important;
+  }
+  .mat-mdc-form-field-subscript-wrapper {
+    height: 0;
+  }
+}
+
+.text-wrap {
+  word-wrap: break-word !important;
+}
+.secondary-nav {
+  background: white;
+  border-bottom: 1px solid lightgray;
+  position: fixed;
+  top: 57px;
+  left: 70px;
+  z-index: 1000;
+}

package/src/test.ts

@@ -0,0 +1,12 @@
+// src/test.ts
+import "zone.js/testing";
+import { getTestBed } from "@angular/core/testing";
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from "@angular/platform-browser-dynamic/testing";
+
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);

package/src/theme/theme-variables.scss

@@ -0,0 +1,132 @@
+@use "@angular/material" as mat;
+
+@import "https://fonts.googleapis.com/css?family=Material+Icons";
+@import url("https://fonts.googleapis.com/css?family=Inter:200,300,400,500,600,700");
+
+body {
+  --header-bg-color: #e8e8e8;
+  --primary-color: #009ffd;
+  --primary-lighter-color: #454a68;
+  --primary-darker-color: #2c2f42;
+}
+
+// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
+//  The following line adds:
+//    1. Default typography styles for all components
+//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
+//  If you specify typography styles for the components you use elsewhere, you should delete this line.
+//  If you don't need the default component typographies but still want the hierarchy styles,
+//  you can delete this line and instead use:
+//    `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
+@include mat.all-component-typographies();
+@include mat.core();
+
+// Set the default typography
+@include mat.all-component-typographies(
+  mat.m2-define-typography-config($font-family: "Inter")
+);
+
+// Primary colors
+$primary-palette: (
+  50: #e0f3ff,
+  100: #b3e2fe,
+  200: #80cffe,
+  300: #4dbcfe,
+  400: #26adfd,
+  500: #009ffd,
+  600: #0097fd,
+  700: #008dfc,
+  800: #0083fc,
+  900: #0072fc,
+  A100: #ffffff,
+  A200: #eff5ff,
+  A400: #bcd6ff,
+  A700: #a2c7ff,
+  contrast: (
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #000000,
+    400: #000000,
+    500: #ffffff,
+    600: #ffffff,
+    700: #ffffff,
+    800: #ffffff,
+    900: #ffffff,
+    A100: #000000,
+    A200: #000000,
+    A400: #000000,
+    A700: #000000,
+  ),
+);
+
+$my-custom-typography-config: mat.m2-define-typography-config(
+  $font-family: "Inter",
+  $headline-1:
+    mat.m2-define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
+  $headline-2:
+    mat.m2-define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
+  $headline-3:
+    mat.m2-define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
+  $headline-4: mat.m2-define-typography-level(34px, 40px, 400),
+  $headline-5: mat.m2-define-typography-level(24px, 32px, 400),
+  $body-1: mat.m2-define-typography-level(14px, 20px, 400),
+  $button: mat.m2-define-typography-level(14px, 16x, 400),
+);
+
+:root {
+  --mat-form-field-container-height: 40px;
+  --mat-form-field-filled-with-label-container-padding-top: 14px;
+  --mat-form-field-filled-with-label-container-padding-bottom: 4px;
+  --mat-form-field-container-text-line-height: 18px;
+  --mat-form-field-container-text-size: 12px;
+  --mat-select-trigger-text-line-height: 16px;
+  --mat-select-trigger-text-size: 12px;
+  --mdc-filled-text-field-label-text-size: 12px;
+  --mdc-outlined-text-field-label-text-size: 12px;
+  --mat-form-field-subscript-text-line-height: 15px;
+  --mat-form-field-subscript-text-size: 10px;
+  --mat-form-field-container-vertical-padding: 8px;
+
+  --mat-option-label-text-line-height: 12px;
+  --mat-option-label-text-size: 12px;
+
+  --mat-expansion-header-expanded-state-height: 40px;
+
+  .mat-mdc-form-field-subscript-wrapper,
+  .mat-mdc-form-field-bottom-align::before {
+    margin-top: -2px !important;
+  }
+  .material-icons,
+  .material-symbols-outlined {
+    font-size: 20px;
+    color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
+  }
+  .mat-icon {
+    height: 20px;
+    width: 20px;
+  }
+  .mat-expansion-panel-body {
+    padding: 0 8px 0;
+  }
+  .mat-typography p {
+    padding-bottom: 0;
+  }
+  .mdc-text-field {
+    padding: 0 4px;
+  }
+}
+
+// Define the default theme
+$default-theme: mat.m2-define-light-theme(
+  (
+    color: (
+      primary: mat.m2-define-palette($primary-palette),
+      accent: mat.m2-define-palette(mat.$m2-pink-palette),
+    ),
+    typography: $my-custom-typography-config,
+    density: 0,
+  )
+);
+
+@include mat.all-component-themes($default-theme);

package/src/theme/theme.scss

@@ -0,0 +1,17 @@
+/*
+ * Global application theme.
+ * Framework overrides and customization goes here.
+ */
+
+// stylelint-disable-next-line selector-max-universal
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  height: 100%;
+}

package/src/tsconfig.app.json

@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

package/src/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

package/tsconfig.app.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,69 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "target": "es2022",
+    "module": "es2022",
+    "lib": [
+      "es2022",
+      "dom"
+    ],
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "baseUrl": "./",
+    "paths": {
+      "@app/*": [
+        "src/app/*"
+      ],
+      "@shared": [
+        "src/app/@shared"
+      ],
+      "@shared/*": [
+        "src/app/@shared/*"
+      ],
+      "@env/*": [
+        "src/environments/*"
+      ],
+      "@modules": [
+        "src/app/@modules"
+      ],
+      "@modules/*": [
+        "src/app/@modules/*"
+      ],
+      "@admin": [
+        "src/app/@admin"
+      ],
+      "@admin/*": [
+        "src/app/@admin/*"
+      ],
+      "inventory-common": [
+        "./dist/inventory-common",
+      ]
+    }
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true,
+    "preserveWhitespaces": true
+  }
+}