chrv-components 1.0.2 → 1.0.3

package/src/lib/chr-table/chr-table.component.html

@@ -1,88 +0,0 @@
-<div class="h-full no-scrollbar">
-  <ng-content class="mt-5"></ng-content>
-  <div class="h-full flex flex-col flex-1 overflow-auto no-scrollbar">
-    <table *ngIf="data"
-      class="table-auto border dark:border-none relative flex flex-row flex-no-wrap w-full rounded-lg sm:shadow-lg mb-5 dark:bg-slate-600 no-scrollbar">
-      <thead class="text-black dark:text-gray-400 sm:sticky sm:top-0 sm:z-10">
-        <tr *ngIf="data.length <= 0"
-          class="flex flex-col flex-no-wrap sm:table-row rounded-l-lg mb-0 sm:mb-2 border-primary text-gray-800">
-          <th app-chr-table-header-cell class="p-3" *ngFor="let column of columns" display="{{ column.display }}"
-            column="{{ column.properties }}" [(isAsc)]="isAsc" (isAscChange)="emitIsAsc($event)" [(sortBy)]="sortBy"
-            (sortByChange)="emitSortBy($event)"></th>
-          <th *ngIf="actions"
-            class="h-14 p-3 text-left sm:text-center place-content-center place-items-center items-center align-middle w-36"
-            [ngClass]="actions.length > 1 ? 'sm:w-72' : 'w-36'">
-            Actions
-          </th>
-        </tr>
-        <tr *ngFor="let entry of data"
-          class="flex flex-col flex-no-wrap sm:table-row rounded-l-lg mb-0 sm:mb-2 text-gray-800">
-          <th app-chr-table-header-cell class="p-3 h-auto" *ngFor="let column of columns" display="{{ column.display }}"
-            column="{{ column.properties }}" [(isAsc)]="isAsc" (isAscChange)="emitIsAsc($event)" [(sortBy)]="sortBy"
-            (sortByChange)="emitSortBy($event)"></th>
-          <th *ngIf="actions"
-            class="h-14 p-3 text-left sm:text-center place-content-center place-items-center items-center align-middle self-center w-36"
-            [ngClass]="actions.length > 1 ? 'sm:w-72' : 'w-36'">
-            Actions
-          </th>
-        </tr>
-      </thead>
-      <tbody class="w-full dark:bg-slate-600">
-        <tr *ngIf="data.length <= 0"
-          class="flex flex-col flex-no-wrap sm:table-row rounded-l-lg mb-0 sm:mb-2 dark:bg-slate-600">
-          <td class="p-3 h-14">Pas de donnée(s)</td>
-          <td *ngIf="actions" class="p-3 h-14 grid gap-3 justify-center align-middle items-center"
-            [ngClass]="actions.length > 1 ? 'grid-cols-2' : 'grid-cols-1'"></td>
-        </tr>
-        <tr *ngFor="let entry of data | sort:isAsc:sortBy ; let i = index" [attr.data-index]="i"
-          class="flex flex-col flex-no-wrap sm:table-row rounded-l-lg mb-0 sm:mb-2 dark:text-gray-400 sm:odd:bg-gray-200 sm:dark:odd:bg-slate-700">
-          <td *ngFor="let column of columns" [ngClass]="
-              column.chipsTarget || column.chipsDisplay
-                ? ''
-                : ''
-            " class="p-3 min-h-[2.75rem] h-auto">
-            <div class="flex flex-row justify-between">
-              {{
-              column.date
-              ? column.callback
-              ? column.callback(getProperty(entry, column.properties))
-              : (getProperty(entry, column.properties) | date : column.date)
-              : column.callback
-              ? column.callback(getProperty(entry, column.properties))
-              : getProperty(entry, column.properties)
-              }}
-              <div *ngIf="column.chipsTarget || column.chipsDisplay">
-                <span *ngIf="
-                  column.chipsCallback
-                    ? column.chipsCallback(entry)
-                    : getProperty(entry, column.chipsTarget)
-                "
-                  class="w-24 flex text-center content-center align-middle items-center justify-center bg-green-100 text-green-800 text-xs font-medium py-0.5 rounded-full dark:bg-green-900 dark:text-green-300">{{
-                  column.chipsDisplay && column.chipsDisplay[0] }}</span>
-                <span *ngIf="
-                  column.chipsCallback
-                    ? !column.chipsCallback(entry)
-                    : !getProperty(entry, column.chipsTarget)
-                "
-                  class="w-24 flex text-center content-center align-middle items-center justify-center bg-red-100 text-red-800 text-xs font-medium py-0.5 rounded-full dark:bg-red-900 dark:text-red-300">{{
-                  column.chipsDisplay && column.chipsDisplay[1] }}</span>
-              </div>
-            </div>
-          </td>
-          <td *ngIf="actions" class="p-3 h-14">
-            <div class="grid gap-3 justify-center align-middle items-center"
-              [ngClass]="actions.length > 1 ? 'grid-cols-2' : 'grid-cols-1'">
-              <app-chr-button *ngFor="let action of actions" [disabled]="
-                  action.disabledCallback
-                    ? action.disabledCallback(entry)
-                    : action.disabled || false
-                " [display]="action.display" [click]="action.callback.bind(null, entry, i)" [color]="action.color"
-                type="table">
-              </app-chr-button>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>

package/src/lib/chr-table/chr-table.component.scss

@@ -1,53 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@import '../../../styles.scss';
-
-$color-config: mat.get-color-config($chr-theme);
-$primary-palette: map.get($color-config, 'primary');
-$accent-palette: map.get($color-config, 'accent');
-
-.text-primary {
-   color: mat.get-color-from-palette($primary-palette);
-}
-
-thead {
-   background-color: mat.get-color-from-palette($accent-palette, A200);
-}
-
-::ng-deep tbody tr td{
-   padding: theme('padding.3');
-   height: theme('height.14');
-}
-
-::ng-deep .cell {
-      padding: theme('padding.3');
-      height: theme('height.14');
-}
-
-@media (min-width: 640px) {
-   table {
-      display: inline-table !important;
-   }
-
-   thead tr:not(:first-child) {
-      display: none;
-   }
-
-   .border-primary {
-      border-width: 2px;
-      --tw-border-opacity: 1;
-      border-color: mat.get-color-from-palette($accent-palette, A200);
-   }
-}
-
-.no-scrollbar::-webkit-scrollbar {
-   display: none;
-}
-
-/* Hide scrollbar for IE, Edge and Firefox */
-.no-scrollbar {
-   -ms-overflow-style: none;
-   /* IE and Edge */
-   scrollbar-width: none;
-   /* Firefox */
-}

package/src/lib/chr-table/chr-table.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ChrTableComponent } from './chr-table.component';
-
-describe('ChrTableComponent', () => {
-  let component: ChrTableComponent;
-  let fixture: ComponentFixture<ChrTableComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ ChrTableComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(ChrTableComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/chr-table/chr-table.component.ts

@@ -1,72 +0,0 @@
-import { DatePipe } from '@angular/common';
-import * as moment from 'moment';
-import {
-  Component,
-  Input,
-  AfterViewInit,
-  EventEmitter,
-  Output,
-} from '@angular/core';
-
-export interface IColumn {
-  display: string;
-  chipsTarget?: string[];
-  chipsDisplay?: string[];
-  chipsCallback?: Function;
-  properties?: string[];
-  callback?: Function;
-  date?: string;
-}
-
-export interface IAction {
-  display: string;
-  callback: Function;
-  disabled?: boolean;
-  disabledCallback?: Function;
-  color: 'accent' | 'primary' | 'warn';
-}
-
-@Component({
-  selector: 'app-chr-table, [app-chr-table]',
-  templateUrl: './chr-table.component.html',
-  styleUrls: ['./chr-table.component.scss'],
-})
-export class ChrTableComponent implements AfterViewInit {
-  @Input() columns: IColumn[];
-  @Input() data: any[] = [];
-  @Input() actions: IAction[];
-
-  @Input() isAsc: boolean = true;
-  @Output() isAscChange: EventEmitter<boolean> = new EventEmitter();
-  @Input() sortBy: string;
-  @Output() sortByChange: EventEmitter<string> = new EventEmitter();
-
-  constructor(private _date: DatePipe) {}
-
-  ngAfterViewInit(): void {}
-
-  emitIsAsc(isAsc: any) {
-    this.isAscChange.emit(isAsc);
-  }
-
-  emitSortBy(sortBy: any) {
-    this.sortByChange.emit(sortBy);
-  }
-
-  getProperty = (entry: any, properties?: any[]) => {
-    if (!properties) return entry;
-    let value = entry;
-    for (const i of properties) {
-      value = (value as any)?.[i];
-    }
-    return value;
-  };
-
-  getIsAsc = () => {
-    return this.isAsc;
-  };
-
-  getSortBy = () => {
-    return this.sortBy;
-  };
-}

package/src/lib/chr-table-header-cell/chr-table-header-cell.component.html

@@ -1,9 +0,0 @@
-<div class="relative w-full cursor-pointer flex flex-row justify-between align-middle self-center"
-  (click)="orderBy(column)" id="chr_th_cell_{{ column }}">
-  <p>{{ display }}</p>
-  <div *ngIf="sortBy" class="absolute right-3 top-0 h-0 w-0">
-    <mat-icon *ngIf="sortBy == column && isAsc">arrow_upward</mat-icon>
-    <mat-icon *ngIf="sortBy == column && !isAsc">arrow_downward</mat-icon>
-  </div>
-</div>
-<ng-content></ng-content>

package/src/lib/chr-table-header-cell/chr-table-header-cell.component.scss

@@ -1,31 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@import '../../../styles.scss';
-
-$color-config: mat.get-color-config($chr-theme);
-$primary-palette: map.get($color-config, 'primary');
-$accent-palette: map.get($color-config, 'accent');
-
-.text-primary {
-    color: mat.get-color-from-palette($primary-palette);
-}
-
-thead {
-    background-color: mat.get-color-from-palette($accent-palette, A200);
-}
-
-@media (min-width: 640px) {
-    table {
-        display: inline-table !important;
-    }
-
-    thead tr:not(:first-child) {
-        display: none;
-    }
-
-    .border-primary {
-        border-width: 2px;
-        --tw-border-opacity: 1;
-        border-color: mat.get-color-from-palette($accent-palette, A200);
-    }
-}

package/src/lib/chr-table-header-cell/chr-table-header-cell.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ChrTableHeaderCellComponent } from './chr-table-header-cell.component';
-
-describe('ChrTableHeaderCellComponent', () => {
-  let component: ChrTableHeaderCellComponent;
-  let fixture: ComponentFixture<ChrTableHeaderCellComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ ChrTableHeaderCellComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(ChrTableHeaderCellComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/chr-table-header-cell/chr-table-header-cell.component.ts

@@ -1,39 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  Directive,
-} from '@angular/core';
-/**
- * This should only be used as a directive
- */
-@Component({
-  selector: 'app-chr-table-header-cell, [app-chr-table-header-cell]',
-  templateUrl: './chr-table-header-cell.component.html',
-  styleUrls: ['./chr-table-header-cell.component.scss'],
-})
-export class ChrTableHeaderCellComponent {
-  @Input() display: string;
-  @Input() column: string;
-  @Input() isAsc: boolean = true;
-  @Output() isAscChange: EventEmitter<boolean> = new EventEmitter();
-  @Input() sortBy: string;
-  @Output() sortByChange: EventEmitter<string> = new EventEmitter();
-
-  orderBy = (column: string) => {
-    if (!this.sortBy) this.sortBy = column;
-
-    if (this.sortBy == column) {
-      this.isAsc = !this.isAsc;
-      this.sortBy = column;
-      this.isAscChange.emit(this.isAsc);
-      this.sortByChange.emit(this.sortBy);
-    } else {
-      this.isAsc = true;
-      this.sortBy = column;
-      this.isAscChange.emit(this.isAsc);
-      this.sortByChange.emit(this.sortBy);
-    }
-  };
-}

package/src/lib/services/dialog.service.ts

@@ -1,23 +0,0 @@
-import { Injectable } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
-import { ChrDeleteModalComponent } from '../chr-delete-modal/chr-delete-modal.component';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class DialogService {
-  constructor(private dialog: MatDialog) {}
-
-  openDelete = (callback?: Function, callbackElement?: any) => {
-    const dialogRef = this.open(ChrDeleteModalComponent);
-
-    dialogRef.afterClosed().subscribe((result) => {
-      console.log(result);
-      if (result == true) callback?.(callbackElement);
-    });
-  };
-
-  open = (component: any) => {
-    return this.dialog.open(component);
-  };
-}

package/styles.scss

@@ -1,93 +0,0 @@
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
-@use '@angular/material' as mat;
-//Tailwind import
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-// Plus imports for other components in your app.
-//IMPORT MY THEME
-@import 'chr-theme.scss';
-@import '@angular/material/theming';
-@import url('node_modules/material-design-icons-iconfont/dist/material-design-icons.css');
-
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
-@include mat.core();
-
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$StockManager-primary: mat.define-palette(mat.$indigo-palette);
-$StockManager-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
-$StockManager-warn: mat.define-palette(mat.$red-palette);
-
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$StockManager-theme: mat.define-light-theme((
-  color: (
-    primary: $StockManager-primary,
-    accent: $StockManager-accent,
-    warn: $StockManager-warn,
-  )
-));
-
-$StockManager-dark-theme: mat.define-dark-theme((color: (
-        primary: $StockManager-primary,
-        accent: $StockManager-accent,
-        warn: $StockManager-warn,
-      )));
-
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-
-//COMMENT OUT THE DEFAULT THEME
-//@include mat.all-component-themes($StockManager-theme);
-//USE THE IMPORTED THEME INSTEAD
-//@include mat.all-component-themes($chr-theme);
-
-.dark-theme {
-  // use our theme with angular-material-theme mixin
-  //  @include angular-material-theme($dark-theme);
-  //  @include mat.core-theme($light-theme);
-  @include mat.all-component-themes($chr-dark-theme);
-  background-color: black;
-}
-
-.light-theme {
-  // use our theme with angular-material-theme mixin
-  //  @include angular-material-theme($dark-theme);
-  //  @include mat.core-theme($light-theme);
-  @include mat.all-component-themes($chr-theme);
-}
-
-/* You can add global styles to this file, and also import other style files */
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", serif; }
-
-@layer base {
-  a {
-    @apply text-black;
-    @apply dark:text-gray-400
-  }
-
-  .mat-toolbar{
-    @apply z-50
-  }
-}
-
-.no-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-
-/* Hide scrollbar for IE, Edge and Firefox */
-.no-scrollbar {
-  -ms-overflow-style: none;
-  /* IE and Edge */
-  scrollbar-width: none;
-  /* Firefox */
-}

package/tailwind.config.js

@@ -1,30 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./lib/**/*.{html,ts,js}",
-    "./**/*.{html,js,ts}",
-    "./projects/chrv-components/**/*.{html,js,ts}",
-  ],
-  theme: {
-    extend: {},
-    screens: {
-      sm: "640px",
-      // => @media (min-width: 640px) { ... }
-
-      md: "768px",
-      // => @media (min-width: 768px) { ... }
-      xmd: "961px",
-      lg: "1024px",
-      // => @media (min-width: 1024px) { ... }
-
-      xl: "1280px",
-      // => @media (min-width: 1280px) { ... }
-
-      "2xl": "1536px",
-      // => @media (min-width: 1536px) { ... }
-    },
-  },
-  corePlugins: {
-    preflight: true,
-  },
-};

package/theme.scss

@@ -1,59 +0,0 @@
-@use '@angular/material' as mat;
-@import 'chr-theme.scss';
-@include mat.core();
-
-$my-theme-primary: mat.define-palette(mat.$indigo-palette, 500, 200, 800);
-$my-theme-accent: mat.define-palette(mat.$cyan-palette);
-$my-theme-warn: mat.define-palette(mat.$deep-orange-palette, A200);
-
-$light-theme: mat.define-light-theme(
-  (
-    color: (
-      primary: $my-theme-primary,
-      accent: $my-theme-accent,
-      warn: $my-theme-warn,
-    ),
-  )
-);
-
-// ====================================
-// Make sure to have a dark background
-// Dropdowns will blend in with light
-// backgrounds.
-// ====================================
-$dark-theme: mat.define-dark-theme(
-  (
-    color: (
-      primary: $my-theme-primary,
-      accent: $my-theme-accent,
-      warn: $my-theme-warn,
-    ),
-  )
-);
-
-// =====================================
-// always include only once per project
-// =====================================
-/*
-.dark-theme {
-  // use our theme with angular-material-theme mixin
-  //  @include angular-material-theme($dark-theme);
-  //  @include mat.core-theme($light-theme);
-  @include mat.all-component-themes($dark-theme);
-  background-color: black;
-}
-.light-theme {
-  // use our theme with angular-material-theme mixin
-  //  @include angular-material-theme($dark-theme);
-  //  @include mat.core-theme($light-theme);
-  @include mat.all-component-themes($light-theme);
-}
-*/
-html,
-body {
-  height: 100%;
-}
-body {
-  margin: 0;
-  font-family: Roboto, 'Helvetica Neue', sans-serif;
-}

package/tsconfig.lib.json

@@ -1,14 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "exclude": [
-    "**/*.spec.ts"
-  ]
-}

package/tsconfig.lib.prod.json

@@ -1,10 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

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