@rafaelaalmeidaa/primordash 0.0.1

package/lib/models/dashboard.model.d.ts

@@ -0,0 +1,118 @@
+import { ChartData, ChartOptions, ChartType } from "chart.js";
+export interface Card {
+    /** Identificador único do card */
+    id?: number;
+    /** Tipo do gráfico exibido no card */
+    type?: DashboardChartType;
+    /** Título exibido no topo do card */
+    title?: string;
+    /** Ordem de exibição no dashboard */
+    order?: number;
+    /** Quantidade de colunas ocupadas no grid */
+    cols: number;
+    /** Quantidade de linhas ocupadas no grid */
+    rows?: number;
+    /** Cor da fonte do card */
+    fontColor?: string;
+    /** Cor de fundo do card */
+    backgroundColor?: string;
+    /** Lista de métricas/colunas que serão exibidas */
+    keys?: Item[];
+    /** Define se o gráfico será empilhado */
+    stacked?: boolean;
+    /** Exibe valores em porcentagem */
+    showPorcent?: boolean;
+    /** Exibe rótulos dentro do gráfico */
+    showLabel?: boolean;
+    /** Orientação do eixo principal (horizontal ou vertical) */
+    axisOrientation?: AxisOrientation;
+    /** Configuração personalizada do eixo X */
+    axisX?: Axis;
+    /** Configuração personalizada do eixo Y */
+    axisY?: Axis;
+    /** Dados que alimentam o gráfico */
+    data?: any[];
+    /** Conteúdo HTML personalizado (caso não seja gráfico) */
+    innerHtml?: any;
+}
+export interface Item {
+    /** Nome da propriedade no objeto de dados (ex: 'totalVendas') */
+    key: string;
+    /** Nome exibido na legenda do gráfico */
+    label: string;
+    /** Chave usada para eixo X (usado em bubble chart) */
+    keyX?: string;
+    /** Chave usada para eixo Y (usado em bubble chart)*/
+    keyY?: string;
+    /** Chave usada para raio (usado em bubble chart) */
+    keyR?: string;
+    /** Cor da série no gráfico (hex, rgb, rgba, etc.) */
+    color?: string;
+    /** Identificador de empilhamento (usado quando stacked = true) */
+    stackKey?: string;
+    /** Tipo específico da série (ex: 'line' dentro de um gráfico bar misto) */
+    type?: SupportedChartType;
+    /** Define em qual eixo a série será renderizada (ex: left ou right) */
+    axisType?: AxisDimension;
+    /** Define se a área abaixo da linha será preenchida (line chart) */
+    fill?: boolean;
+}
+export interface Axis {
+    /** Nome da propriedade usada como eixo */
+    key: string;
+    /** Título exibido no eixo */
+    label: string;
+    /** Cor aplicada ao eixo (ticks e label) */
+    keyColor?: string;
+}
+export interface Option {
+    /** Identificador único da opção */
+    id?: number;
+    /** Título exibido no card/opção */
+    title: string;
+    /** Ordem de exibição */
+    order?: number;
+    /** Quantidade de colunas ocupadas no grid */
+    cols: number;
+    /** Quantidade de linhas ocupadas no grid */
+    rows: number;
+}
+export interface ModalItem {
+    id: string | number;
+    label: string;
+    type: ModalTypes;
+    value?: number;
+    items?: ModalItem[];
+}
+export interface SelectRow {
+    levels: ModalItem[][];
+    selectedPath: ModalItem[];
+    finalValue: string[];
+    finalFontColor: string;
+    finalBackgroudColor: string;
+}
+export interface Select {
+    id: string | number;
+    label: string;
+}
+export interface ChartOption {
+    id: DashboardChartType;
+    title: string;
+}
+export interface ChatConfig<T extends ChartType = ChartType> {
+    type: T;
+    data: ChartData<T>;
+    options: ChartOptions<T>;
+}
+export type DashboardChartType = typeof DASHBOARD_CHART_TYPES[number];
+export declare const DASHBOARD_CHART_TYPES: readonly ["bar", "stackedBar", "verticalBar", "verticalStackedBar", "verticalProgressBar", "progressBar", "lineBar", "lineBarStacked", "line", "radar", "curveLine", "pie", "multiPie", "doughnut", "halfDoughnut", "area", "bubble", "polarArea", "simpleCard", "table", "html"];
+export type DashboardBarLineType = typeof DASHBOARD_BAR_LINE_TYPES[number];
+export declare const DASHBOARD_BAR_LINE_TYPES: string[];
+export type SupportedChartType = typeof SUPPORTED_CHART_TYPES[number];
+export declare const SUPPORTED_CHART_TYPES: readonly ["bar", "line", "radar"];
+export type AxisOrientation = typeof AXIS_ORIENTATION[number];
+export declare const AXIS_ORIENTATION: readonly ["x", "y"];
+export type AxisDimension = typeof AXIS_DIMENSION[number];
+export declare const AXIS_DIMENSION: readonly ["x", "y", "r"];
+export type ModalTypes = typeof MODAL_TYPES[number];
+export declare const MODAL_TYPES: readonly ["group", "option"];

package/lib/primordash.component.d.ts

@@ -0,0 +1,16 @@
+import { Card, ModalItem, Option, Select } from './models/dashboard.model';
+import * as i0 from "@angular/core";
+export declare class PrimordashComponent {
+    isDark: boolean;
+    isResponsive: boolean;
+    canEdit: boolean;
+    cols: number;
+    options: Option[];
+    cards: Card[];
+    groupType: Select[];
+    modalData: ModalItem[];
+    data: any;
+    debug: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrimordashComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrimordashComponent, "lib-primordash", never, { "isDark": "isDark"; "isResponsive": "isResponsive"; "canEdit": "canEdit"; "cols": "cols"; "options": "options"; "cards": "cards"; "groupType": "groupType"; "modalData": "modalData"; "data": "data"; "debug": "debug"; }, {}, never, never, false, never>;
+}

package/lib/primordash.module.d.ts

@@ -0,0 +1,26 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./components/dashboard/dashboard.component";
+import * as i2 from "./components/card/card.component";
+import * as i3 from "./components/charts/bar-line/bar-line.component";
+import * as i4 from "./components/charts/bubble/bubble.component";
+import * as i5 from "./components/charts/pie/pie.component";
+import * as i6 from "./components/charts/simple-card/simple-card.component";
+import * as i7 from "./components/charts/table/table.component";
+import * as i8 from "./components/modal-edit/modal-edit.component";
+import * as i9 from "./components/modal-edit-chart/modal-edit-chart.component";
+import * as i10 from "./primordash.component";
+import * as i11 from "@angular/platform-browser";
+import * as i12 from "@angular/cdk/drag-drop";
+import * as i13 from "@angular/platform-browser/animations";
+import * as i14 from "@angular/material/grid-list";
+import * as i15 from "@angular/material/menu";
+import * as i16 from "ng2-charts";
+import * as i17 from "@angular/forms";
+import * as i18 from "@angular/common";
+import * as i19 from "ngx-bootstrap/modal";
+import * as i20 from "@ng-select/ng-select";
+export declare class PrimordashModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrimordashModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PrimordashModule, [typeof i1.DashboardComponent, typeof i2.CardComponent, typeof i3.BarLineComponent, typeof i4.BubbleComponent, typeof i5.PieComponent, typeof i6.SimpleCardComponent, typeof i7.TableComponent, typeof i8.ModalEditComponent, typeof i9.ModalEditChartComponent, typeof i10.PrimordashComponent], [typeof i11.BrowserModule, typeof i12.DragDropModule, typeof i13.BrowserAnimationsModule, typeof i14.MatGridListModule, typeof i15.MatMenuModule, typeof i16.NgChartsModule, typeof i17.ReactiveFormsModule, typeof i17.FormsModule, typeof i18.CommonModule, typeof i19.ModalModule, typeof i20.NgSelectModule], [typeof i1.DashboardComponent, typeof i10.PrimordashComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PrimordashModule>;
+}

package/lib/primordash.service.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class PrimordashService {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrimordashService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<PrimordashService>;
+}

package/lib/services/generic.d.ts

@@ -0,0 +1,3 @@
+export declare function randomColor(): string;
+export declare function getOpacityColors(listColors: string[], index: number): string[];
+export declare function getContrastColor(color: string): string;

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@rafaelaalmeidaa/primordash",
+  "version": "0.0.1",
+  "description": "UI Dashboard library for Angular",
+  "peerDependencies": {
+    "@angular/common": "^15.2.0",
+    "@angular/core": "^15.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "keywords": [
+    "angular",
+    "ui",
+    "dashboard",
+    "components",
+    "design-system"
+  ],
+  "license": "MIT",
+  "sideEffects": false,
+  "module": "fesm2015/rafaelaalmeidaa-primordash.mjs",
+  "es2020": "fesm2020/rafaelaalmeidaa-primordash.mjs",
+  "esm2020": "esm2020/rafaelaalmeidaa-primordash.mjs",
+  "fesm2020": "fesm2020/rafaelaalmeidaa-primordash.mjs",
+  "fesm2015": "fesm2015/rafaelaalmeidaa-primordash.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2020": "./esm2020/rafaelaalmeidaa-primordash.mjs",
+      "es2020": "./fesm2020/rafaelaalmeidaa-primordash.mjs",
+      "es2015": "./fesm2015/rafaelaalmeidaa-primordash.mjs",
+      "node": "./fesm2015/rafaelaalmeidaa-primordash.mjs",
+      "default": "./fesm2020/rafaelaalmeidaa-primordash.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1,4 @@
+export * from './lib/primordash.service';
+export * from './lib/primordash.component';
+export * from './lib/primordash.module';
+export * from './lib/components/dashboard/dashboard.component';

package/src/lib/assets/style.scss

@@ -0,0 +1,5 @@
+@import "@ng-select/ng-select/themes/default.theme.css";
+@import "./styles/colors";
+@import "./styles/ng-select";
+@import "./styles/fonts";
+@import "./styles/modal";

package/src/lib/assets/styles/_colors.scss

@@ -0,0 +1,11 @@
+
+$blue:    #0d6efd !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #d63384 !default;
+$red:     #dc3545 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #ffc107 !default;
+$green:   #198754 !default;
+$teal:    #20c997 !default;
+$cyan:    #0dcaf0 !default;

package/src/lib/assets/styles/_fonts.scss

@@ -0,0 +1,30 @@
+
+@font-face {
+  font-family: 'icons_outlined';
+  src: url('../fonts/google_icons_outlined.ttf?hlukgn') format('truetype');
+  font-weight: 100 900;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'icons_rounded';
+  src: url('../fonts/google_icons_rounded.ttf?hlukgn') format('truetype');
+  font-weight: 100 900;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'icons_sharp';
+  src: url('../fonts/google_icons_sharp.ttf?hlukgn') format('truetype');
+  font-weight: 100 900;
+  font-style: normal;
+}
+.font-icon, .font-icon-fill{
+    font-family: 'icons_outlined';
+    line-height: 1;
+}
+.font-icon-fill{
+  font-variation-settings:
+  'FILL' 1,
+  'wght' 400,
+  'GRAD' 0,
+  'opsz' 24;
+}

package/src/lib/assets/styles/_modal.scss

@@ -0,0 +1,36 @@
+@mixin modal-size($size) {
+  max-width: $size;
+  max-height: 90vh;
+
+  .modal-content {
+    width: $size;
+    max-height: 90vh;
+    overflow: hidden;
+    .chart{
+      max-height: fit-content;
+    }
+  }
+}
+
+// Mobile (default)
+.modal-sm { @include modal-size(95vw); }
+.modal-md { @include modal-size(95vw); }
+.modal-lg { @include modal-size(95vw); }
+.modal-xl { @include modal-size(95vw); }
+
+
+// Tablet (≥ 768px)
+@media (min-width: 768px) {
+  .modal-sm { @include modal-size(60vw); }
+  .modal-md { @include modal-size(75vw); }
+  .modal-lg { @include modal-size(85vw); }
+  .modal-xl { @include modal-size(90vw); }
+}
+
+// Desktop (≥ 1024px)
+@media (min-width: 1024px) {
+  .modal-sm { @include modal-size(25vw); }
+  .modal-md { @include modal-size(50vw); }
+  .modal-lg { @include modal-size(70vw); }
+  .modal-xl { @include modal-size(90vw); }
+}

package/src/lib/assets/styles/_ng-select.scss

@@ -0,0 +1,128 @@
+// Custom style ng-select
+@import "@ng-select/ng-select/themes/default.theme.css";
+
+.ng-select-alternative {
+  transition: box-shadow 0.15s ease;
+  width: 100%;
+}
+
+.table-form {
+  margin-top: 5px !important;
+
+  .table-select {
+    overflow-x: visible !important;
+
+    @media (max-width:1224px) {
+      overflow-x: auto !important;
+    }
+  }
+
+  .table-form-conteiner {
+    @media (max-width:1024px) {
+      overflow-x: auto !important;
+    }
+  }
+
+  .ng-select {
+    .ng-select-container {
+      border: 1px solid #E9E9E9 !important;
+      min-width: 150px;
+    }
+  }
+
+  .form-control {
+    border: 1px solid #E9E9E9 !important;
+    min-width: 150px;
+  }
+
+  [readonly] {
+    cursor: no-drop;
+
+    &:focus {
+      border-color: #E9E9E9 !important;
+    }
+  }
+}
+
+.ng-select {
+  .ng-select-container {
+    background-color: #ffffff;
+    background-image: none;
+    border: 0;
+    border-radius: 8px;
+    display: block;
+    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
+    padding: 5px 0 0 0;
+    min-height: 39px !important;
+
+    &:hover {
+      box-shadow: none;
+    }
+
+    .ng-value-container {
+      padding: 5px 10px;
+
+      .ng-placeholder {
+        font-weight: 300;
+        color: #B1B1B1;
+        margin-top: -4px;
+        font-size: 13px;
+        top: 14px !important;
+      }
+
+      .ng-value {
+        padding: 5px 0;
+      }
+    }
+  }
+
+  &.ng-select-focused:not(.ng-select-opened)>.ng-select-container {
+    box-shadow: none;
+  }
+
+  &.ng-select-single .ng-select-container .ng-value-container .ng-value {
+    font-weight: 400;
+    margin-top: -4px;
+    font-size: 13px;
+  }
+
+  // &.ng-select-disabled>.ng-select-container {
+  //   top: -10px;
+  //   height: calc(1.5em + 1.25rem + 2px);
+  // }
+
+  .ng-value-container .ng-input>input {
+    font-weight: 400;
+    line-height: 1.5;
+    color: #8898aa;
+    padding: 3px 0 0 0 !important;
+  }
+
+  .ng-dropdown-panel {
+    z-index: 9999999;
+
+    .ng-dropdown-panel-items .ng-option {
+      font-weight: 400 !important;
+      color: #8898aa !important;
+      font-size: 13px;
+    }
+  }
+
+  &.ng-dirty.ng-invalid {
+    .ng-select-container {
+      border: 1px solid $red;
+    }
+  }
+
+  &.ng-select-multiple {
+    .ng-select-container {
+      .ng-value-container {
+        padding-top: 0px;
+
+        .ng-placeholder {
+          top: 11px;
+        }
+      }
+    }
+  }
+}