@dropi/ui-components 1.0.12 → 1.0.13

package/dist/utilities/interfaces/ui/dropi-table.interface.d.ts

@@ -0,0 +1,45 @@
+export interface DropiTableColumn {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    type?: string;
+    highlightColumn?: boolean;
+    align?: "left" | "center" | "right" | string;
+    disabledColumn?: boolean;
+    imageUrl?: string;
+}
+export interface DropiTableRow {
+    [key: string]: any;
+}
+export interface TypedField {
+    type: "text" | "currency" | "date" | "tag" | "carrier" | "textIcon" | "status" | "textLink" | string;
+    value: any;
+    [key: string]: any;
+}
+export interface DropiTableConfiguration {
+    rowActions?: DropiTableAction[];
+    pageSizeConfiguration?: number[];
+    showCheckbox?: boolean;
+    showSearch?: boolean;
+    showPaginator?: boolean;
+    showActionsPerRow?: boolean;
+    emptyMessage?: string;
+    backendPagination?: boolean;
+    title?: string;
+}
+export interface DropiTableAction {
+    label: string;
+    icon?: string;
+    event?: string;
+    callback?: (row: any) => void;
+}
+export interface DropiTableBackendParams {
+    currentPage: number;
+    pageSize: number;
+    totalPages: number;
+    totalCount: number;
+}
+export interface SortParams {
+    column: string;
+    asc: boolean;
+}

package/dist/utilities/interfaces/ui/input-interface.d.ts

@@ -0,0 +1,33 @@
+export interface InputProperties {
+    label?: string;
+    placeholder?: string;
+    type?: string;
+    formControl?: any;
+    showObligatory?: boolean;
+    textHelper?: string;
+    icon?: string;
+    iconPos?: "left" | "right";
+    maxLength?: number;
+    minLength?: number;
+    isMoneyInput?: boolean;
+    isThousandSeparator?: boolean;
+    isNumericInput?: boolean;
+    isLettersOnly?: boolean;
+    isPasswordInput?: boolean;
+    id?: string;
+    dataCy?: string;
+    inputMode?: string;
+    showHelperOnlyOnError?: boolean;
+}
+export interface TextAreaProperties {
+    label?: string;
+    placeholder?: string;
+    rows?: number;
+    cols?: number;
+    formControl?: any;
+    maxLength?: number;
+    minLength?: number;
+    textHelper?: string;
+    id?: string;
+    resize?: "none" | "both" | "horizontal" | "vertical" | string;
+}

package/dist/utilities/interfaces/ui/select-interface.d.ts

@@ -0,0 +1,8 @@
+export interface SelectProperties {
+    placeholder?: string;
+    placeHolderSearch?: string;
+    textHelper?: string;
+    hasError?: boolean;
+    errorText?: string;
+    dropdownType?: string;
+}

package/dist/utilities/interfaces/ui/selection-list-interface.d.ts

@@ -0,0 +1,24 @@
+export interface Option {
+    id: string;
+    name: string;
+    label?: string;
+    description?: string;
+    icons?: string[];
+    tag?: string;
+    halfWidth?: boolean;
+    disabled?: boolean;
+    iconImages?: Array<{
+        url: string;
+        alt?: string;
+    }>;
+    descriptionIcons?: Array<{
+        url: string;
+        alt?: string;
+    }>;
+    table?: Array<{
+        name: string;
+        value: any;
+    }>;
+    checked?: boolean;
+    preIcon?: string;
+}

package/dist/utilities/interfaces/ui/upload.model.d.ts

@@ -0,0 +1,30 @@
+export interface FileItem {
+    id: string | number;
+    file: File | null;
+    progress: number;
+    state: UploadFileState;
+    previewUrl?: string;
+    typeView?: string;
+    uploadedUrl?: string;
+    fileType?: "image" | "document" | string;
+    isTemp?: boolean;
+}
+export type UploadFileState = "uploading" | "complete" | "error" | "confirm-delete" | "upload-complete";
+export interface UploadParams {
+    title: string;
+    label: string;
+    previewType: "card" | "grid";
+    multiple: boolean;
+    maxFiles: number;
+    maxFileSizeMB: number;
+    accept: string[];
+    compress: boolean;
+    maxHeight: number;
+    maxWidth: number;
+    path: string;
+    onlyView: boolean;
+    viewDragAndDrop: boolean;
+    textButton?: string;
+    textDropZone?: string;
+}
+export declare const FILE_TYPE_MAP: Record<string, string[]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/ui-components",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "Dropi UI Components - Framework-agnostic Web Components library built with Angular Elements",
   "keywords": [
     "web-components",
@@ -23,21 +23,33 @@
   },
   "peerDependencies": {
     "@angular/common": "^18.2.0",
+    "@angular/compiler": "^18.2.0",
     "@angular/core": "^18.2.0",
     "@angular/elements": "^18.2.0",
     "@angular/platform-browser": "^18.2.0",
     "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.0",
-    "@angular/cli": "^18.2.0",
-    "@angular/compiler-cli": "^18.2.0",
+    "@angular-devkit/build-angular": "^18.2.21",
+    "@angular/cli": "^18.2.21",
+    "@angular/common": "^18.2.14",
+    "@angular/compiler": "^18.2.14",
+    "@angular/compiler-cli": "^18.2.14",
+    "@angular/core": "^18.2.14",
+    "@angular/elements": "^18.2.14",
+    "@angular/forms": "^18.2.14",
+    "@angular/platform-browser": "^18.2.14",
+    "@angular/router": "^18.2.14",
     "ng-packagr": "^18.2.1",
     "tslib": "^2.3.0",
-    "typescript": "~5.5.4"
+    "typescript": "~5.5.4",
+    "zone.js": "^0.14.10"
   },
   "dependencies": {
-    "@ngx-translate/core": "^15.0.0"
+    "@ng-bootstrap/ng-bootstrap": "^17.0.1",
+    "@ngx-translate/core": "^15.0.0",
+    "primeicons": "^7.0.0",
+    "primeng": "^17.18.12"
   },
   "repository": {
     "type": "git",

package/src/components-source/alert/alert.component.ts

@@ -6,148 +6,41 @@ import {
   OnInit,
   Output,
   SimpleChanges,
+  CUSTOM_ELEMENTS_SCHEMA,
 } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
-import {
-  animate,
-  keyframes,
-  style,
-  transition,
-  trigger,
-} from "@angular/animations";
-
 import { IconComponent } from "../icon/icon.component";
 import { ButtonComponent } from "../dropi-button/dropi-button.component";
 
-/**
- * Componente que muestra una alerta en la pantalla.
- *
- * Basado en: https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/%5BWEB%5D-components?node-id=26-199&p=f&m=dev
- *
- * @example
- * <app-alert
- *   [message]="'Este es un mensaje de alerta'"
- *   [type]="'default'"
- *   [state]="'success'"
- *   [dismissable]="true"
- *   [showButton]="true"
- *   [buttonText]="'Cerrar'"
- * ></app-alert>
- *
- * @example
- * <app-alert
- *   [message]="'Este es un <b>mensaje</b> de alerta'"
- *   [type]="'flag'"
- *   [state]="'error'"
- *   [dismissable]="false"
- *   [showButton]="false"
- *   [buttonText]="'Cerrar'"
- * ></app-alert>
- *
- * @param message Texto del mensaje que se mostrar, puede contener etiquetas HTML.
- * @param type Tipo de alerta que se mostrar  (default o flag).
- * @param state Estado de la alerta (success, error, warning o info).
- * @param dismissable Si se puede cerrar la alerta.
- * @param showButton Si se mostrar  el bot n de cierre.
- * @param buttonText Texto del bot n de cierre.
- * @param textLink Texto del link
- * @param linkUrl Url del link
- */
 @Component({
   selector: "dropi-wc-alert",
   standalone: true,
   imports: [CommonModule, IconComponent, ButtonComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   templateUrl: "./alert.component.html",
   styleUrls: ["./alert.component.scss"],
-  animations: [
-    trigger("fade", [
-      transition(":enter", [
-        animate(
-          "300ms ease-out",
-          keyframes([
-            style({ opacity: 0, transform: "translateY(-20px)", offset: 0 }),
-            style({
-              opacity: 0.5,
-              transform: "translateY(-10px)",
-              offset: 0.5,
-            }),
-            style({ opacity: 1, transform: "translateY(0)", offset: 1 }),
-          ]),
-        ),
-      ]),
-      transition(":leave", [
-        animate(
-          "300ms ease-in",
-          keyframes([
-            style({ opacity: 1, transform: "translateY(0)", offset: 0 }),
-            style({
-              opacity: 0.5,
-              transform: "translateY(-10px)",
-              offset: 0.5,
-            }),
-            style({ opacity: 0, transform: "translateY(-20px)", offset: 1 }),
-          ]),
-        ),
-      ]),
-    ]),
-  ],
 })
 export class AlertComponent implements OnInit, OnChanges {
-  /** Texto del mensaje que se mostrará en la alerta. Puede contener etiquetas HTML */
   @Input() message: string = "";
-
-  /** Tipo de alerta que se mostrar (default o flag) */
   @Input() type: "default" | "flag" = "default";
-
-  /** Estado de la alerta (success, error, warning o info) */
   @Input() state: "success" | "error" | "warning" | "info" = "success";
-
-  /** Si se puede cerrar la alerta */
   @Input() dismissable: boolean = true;
-
-  /** Si se mostrar  el botón de cierre */
   @Input() showButton: boolean = false;
-
-  /** Texto del botón de cierre */
   @Input() buttonText: string = "Close";
-
   @Input() anchorText: string = "none";
-
   @Input() anchorUrl: string = "none";
-
-  /**
-   * Indica si la alerta debe ser visible.
-   * Por defecto es `true`.
-   */
   @Input() showAlert = true;
-
-  /** Texto del link  */
-  @Input() textLink: string;
-
-  /** funcion clickeable del texto */
+  @Input() textLink: string = "";
   @Input() clickedText: string = "";
+  @Input() linkUrl: string = "";
 
-  /** Url del link  */
-  @Input() linkUrl: string;
-
-  /**
-   * Emite un evento cuando se cierra la alerta.
-   */
   @Output() onClose = new EventEmitter<void>();
-
-  /**
-   * Emite un evento cuando se hace click en el botón opcional.
-   */
   @Output() onButtonClick = new EventEmitter<void>();
-
-  /**
-   * Emite un evento cuando se hace click en el botón opcional.
-   */
   @Output() onClickLink = new EventEmitter<void>();
 
-  sanitinezedMessage: SafeHtml;
-  alertState = {
+  sanitinezedMessage: SafeHtml = "";
+  alertState: any = {
     success: {
       icon: "Check-circle",
       color: "Success-Success-500",
@@ -177,43 +70,33 @@ export class AlertComponent implements OnInit, OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (!changes.firstChange) this.sanitizeMessage();
+    if (changes["message"] || changes["textLink"] || changes["linkUrl"]) {
+      this.sanitizeMessage();
+    }
   }
 
-  /**
-   * Sanitiza el mensaje de la alerta para que pueda incluir una etiqueta <a> con un enlace
-   * y un texto de enlace. Si no se proporciona texto de enlace ni url, se devuelve el
-   * mensaje sanitizado.
-   */
   sanitizeMessage() {
     if (!this.textLink || !this.linkUrl) {
       this.sanitinezedMessage = this.sanitizer.bypassSecurityTrustHtml(
-        this.message,
+        this.message || "",
       );
       return;
     }
 
-    const message = `${this.message} <a   style="${this.alertState[this.state].anchorStyle}" href="${this.linkUrl}" target="_blank"> ${this.textLink} </a>`;
+    const message = `${this.message || ""} <a style="${this.alertState[this.state].anchorStyle}" href="${this.linkUrl}" target="_blank"> ${this.textLink} </a>`;
     this.sanitinezedMessage = this.sanitizer.bypassSecurityTrustHtml(message);
   }
 
-  /**
-   * Cierra la alerta.
-   * Llama a la función closeAlert() y cambia el valor de showAlert a false.
-   */
   closeAlert() {
     this.showAlert = false;
     this.onClose.emit();
   }
 
-  /**
-   * Emite un evento cuando se hace click en el botón opcional.
-   */
   buttonClick() {
     this.onButtonClick.emit();
   }
 
-  emitClickLink(e) {
+  emitClickLink(e: any) {
     this.onClickLink.emit(e);
   }
 }