@dropi/ui-components 1.0.12 → 1.0.13

package/src/lib/elements-registry.ts

@@ -42,7 +42,79 @@ interface ComponentDefinition {
  * ```
  */
 import { createApplication } from "@angular/platform-browser";
-import { ButtonComponent } from "../components-source/dropi-button/dropi-button.component";
+
+// Importar todos los componentes para registro
+import {
+  ButtonComponent,
+  AlertComponent,
+  InputComponent,
+  DropiTagComponent,
+  DropiChipsComponent,
+  DropiSwitchComponent,
+  DropiSearchComponent,
+  DropiSelectComponent,
+  DropiTableComponent,
+  DropiModalComponent,
+  AlertModalComponent,
+  ToastComponent,
+  DatePickerComponent,
+  DatePickerRangeComponent,
+  TooltipComponent,
+  DropiTooltipComponent,
+  TagTypeProductComponent,
+  SimpleStepperComponent,
+  BreadcrumbComponent,
+  TabsComponent,
+  DropiStepsComponent,
+  VerticalStepsComponent,
+  CitySelectorComponent,
+  RadioSelectionListComponent,
+  CheckboxSelectionListComponent,
+  LottieLoaderComponent,
+  AccordionComponent,
+  AccordionItemComponent,
+  ReadMoreComponent,
+  IconComponent,
+  DropiImageOverlayComponent,
+  OtpSendCodeComponent,
+  DropZoneComponent,
+  DropiFileUploadComponent,
+  DropiCountrySelectorComponent,
+  DropiCheckboxComponent,
+  DropiRadioButtonComponent,
+  DropiTextAreaComponent,
+  DropiPhoneInputComponent,
+  SidebarComponent,
+  DropiNavBarComponent,
+  DropiBreadcrumbComponent,
+  DropiPaginatorComponent,
+  DropiLogoComponent,
+  DropiBadgeComponent,
+  BadgeComponent,
+  DropiSkeletonComponent,
+  EmptyStateComponent,
+  DropiAvatarsComponent,
+  FileUploadProgressBarComponent,
+  DropiIlustrationIconComponent,
+  DropiCarouselComponent,
+  DropiYoutubeLazyVideoComponent,
+  DropiFavoriteButtonComponent,
+  DropiCardCheckboxComponent,
+  CardSectionComponent,
+  CardProductComponent,
+  ColorPickerComponent,
+  CountryFlagsComponent,
+  DropiDrawerComponent,
+  DropiBannerExternalComponent,
+  AlertValidationComponent,
+  BetaTagComponent,
+  ConfirmDialogComponent,
+  SpinnerComponent,
+  EmptyComponent,
+  InputToggleComponent,
+  DropiLanguagesSelectorComponent,
+  DropiDropdownComponent,
+} from "../components-source";
 
 /**
  * Lista interna de todos los componentes disponibles para registro automático
@@ -53,6 +125,346 @@ const ALL_COMPONENTS: ComponentDefinition[] = [
     component: ButtonComponent,
     description: "Button Component",
   },
+  {
+    selector: "dropi-wc-alert",
+    component: AlertComponent,
+    description: "Alert Component",
+  },
+  {
+    selector: "dropi-wc-input",
+    component: InputComponent,
+    description: "Input Component",
+  },
+  {
+    selector: "dropi-wc-tag",
+    component: DropiTagComponent,
+    description: "Tag Component",
+  },
+  {
+    selector: "dropi-wc-chips",
+    component: DropiChipsComponent,
+    description: "Chips Component",
+  },
+  {
+    selector: "dropi-wc-switch",
+    component: DropiSwitchComponent,
+    description: "Switch Component",
+  },
+  {
+    selector: "dropi-wc-search",
+    component: DropiSearchComponent,
+    description: "Search Component",
+  },
+  {
+    selector: "dropi-wc-select",
+    component: DropiSelectComponent,
+    description: "Select Component",
+  },
+  {
+    selector: "dropi-wc-table",
+    component: DropiTableComponent,
+    description: "Table Component",
+  },
+  {
+    selector: "dropi-wc-modal",
+    component: DropiModalComponent,
+    description: "Modal Component",
+  },
+  {
+    selector: "dropi-wc-alert-modal",
+    component: AlertModalComponent,
+    description: "Alert Modal Component",
+  },
+  {
+    selector: "dropi-wc-toast",
+    component: ToastComponent,
+    description: "Toast Component",
+  },
+  {
+    selector: "dropi-wc-date-picker",
+    component: DatePickerComponent,
+    description: "Date Picker Component",
+  },
+  {
+    selector: "dropi-wc-date-picker-range",
+    component: DatePickerRangeComponent,
+    description: "Date Picker Range Component",
+  },
+  {
+    selector: "dropi-wc-tooltip",
+    component: TooltipComponent,
+    description: "Tooltip Component",
+  },
+  {
+    selector: "dropi-wc-tooltip-v2",
+    component: DropiTooltipComponent,
+    description: "Dropi Tooltip Component",
+  },
+  {
+    selector: "dropi-wc-tag-product",
+    component: TagTypeProductComponent,
+    description: "Product Tag Component",
+  },
+  {
+    selector: "dropi-wc-simple-stepper",
+    component: SimpleStepperComponent,
+    description: "Simple Stepper Component",
+  },
+  {
+    selector: "dropi-wc-breadcrumb",
+    component: BreadcrumbComponent,
+    description: "Breadcrumb Component",
+  },
+  {
+    selector: "dropi-wc-tabs",
+    component: TabsComponent,
+    description: "Tabs Component",
+  },
+  {
+    selector: "dropi-wc-steps",
+    component: DropiStepsComponent,
+    description: "Steps Component",
+  },
+  {
+    selector: "dropi-wc-vertical-steps",
+    component: VerticalStepsComponent,
+    description: "Vertical Steps Component",
+  },
+  {
+    selector: "dropi-wc-city-selector",
+    component: CitySelectorComponent,
+    description: "City Selector Component",
+  },
+  {
+    selector: "dropi-wc-radio-list",
+    component: RadioSelectionListComponent,
+    description: "Radio List Component",
+  },
+  {
+    selector: "dropi-wc-checkbox-list",
+    component: CheckboxSelectionListComponent,
+    description: "Checkbox List Component",
+  },
+  {
+    selector: "dropi-wc-lottie-loader",
+    component: LottieLoaderComponent,
+    description: "Lottie Loader Component",
+  },
+  {
+    selector: "dropi-wc-accordion",
+    component: AccordionComponent,
+    description: "Accordion Component",
+  },
+  {
+    selector: "dropi-wc-accordion-item",
+    component: AccordionItemComponent,
+    description: "Accordion Item Component",
+  },
+  {
+    selector: "dropi-wc-read-more",
+    component: ReadMoreComponent,
+    description: "Read More Component",
+  },
+  {
+    selector: "dropi-wc-icon",
+    component: IconComponent,
+    description: "Icon Component",
+  },
+  {
+    selector: "dropi-wc-image-overlay",
+    component: DropiImageOverlayComponent,
+    description: "Image Overlay Component",
+  },
+  {
+    selector: "dropi-wc-otp-send",
+    component: OtpSendCodeComponent,
+    description: "OTP Send Component",
+  },
+  {
+    selector: "dropi-wc-dropzone",
+    component: DropZoneComponent,
+    description: "Dropzone Component",
+  },
+  {
+    selector: "dropi-wc-file-upload",
+    component: DropiFileUploadComponent,
+    description: "File Upload Component",
+  },
+  {
+    selector: "dropi-wc-country-selector",
+    component: DropiCountrySelectorComponent,
+    description: "Country Selector Component",
+  },
+  {
+    selector: "dropi-wc-checkbox",
+    component: DropiCheckboxComponent,
+    description: "Checkbox Component",
+  },
+  {
+    selector: "dropi-wc-radio-button",
+    component: DropiRadioButtonComponent,
+    description: "Radio Button Component",
+  },
+  {
+    selector: "dropi-wc-text-area",
+    component: DropiTextAreaComponent,
+    description: "Text Area Component",
+  },
+  {
+    selector: "dropi-wc-phone-input",
+    component: DropiPhoneInputComponent,
+    description: "Phone Input Component",
+  },
+  {
+    selector: "dropi-wc-sidebar",
+    component: SidebarComponent,
+    description: "Sidebar Component",
+  },
+  {
+    selector: "dropi-wc-navbar",
+    component: DropiNavBarComponent,
+    description: "Navbar Component",
+  },
+  {
+    selector: "dropi-wc-breadcrumb-v2",
+    component: DropiBreadcrumbComponent,
+    description: "Breadcrumb V2 Component",
+  },
+  {
+    selector: "dropi-wc-paginator",
+    component: DropiPaginatorComponent,
+    description: "Paginator Component",
+  },
+  {
+    selector: "dropi-wc-logo",
+    component: DropiLogoComponent,
+    description: "Logo Component",
+  },
+  {
+    selector: "dropi-wc-badge-v2",
+    component: DropiBadgeComponent,
+    description: "Dropi Badge Component",
+  },
+  {
+    selector: "dropi-wc-badge",
+    component: BadgeComponent,
+    description: "Badge Component",
+  },
+  {
+    selector: "dropi-wc-skeleton",
+    component: DropiSkeletonComponent,
+    description: "Skeleton Component",
+  },
+  {
+    selector: "dropi-wc-empty-state",
+    component: EmptyStateComponent,
+    description: "Empty State Component",
+  },
+  {
+    selector: "dropi-wc-avatars",
+    component: DropiAvatarsComponent,
+    description: "Avatars Component",
+  },
+  {
+    selector: "dropi-wc-file-upload-progress",
+    component: FileUploadProgressBarComponent,
+    description: "File Upload Progress Component",
+  },
+  {
+    selector: "dropi-wc-ilustration-icon",
+    component: DropiIlustrationIconComponent,
+    description: "Ilustration Icon Component",
+  },
+  {
+    selector: "dropi-wc-carousel",
+    component: DropiCarouselComponent,
+    description: "Carousel Component",
+  },
+  {
+    selector: "dropi-wc-youtube-video",
+    component: DropiYoutubeLazyVideoComponent,
+    description: "Youtube Video Component",
+  },
+  {
+    selector: "dropi-wc-favorite-button",
+    component: DropiFavoriteButtonComponent,
+    description: "Favorite Button Component",
+  },
+  {
+    selector: "dropi-wc-card-checkbox",
+    component: DropiCardCheckboxComponent,
+    description: "Card Checkbox Component",
+  },
+  {
+    selector: "dropi-wc-card-section",
+    component: CardSectionComponent,
+    description: "Card Section Component",
+  },
+  {
+    selector: "dropi-wc-card-product",
+    component: CardProductComponent,
+    description: "Card Product Component",
+  },
+  {
+    selector: "dropi-wc-color-picker",
+    component: ColorPickerComponent,
+    description: "Color Picker Component",
+  },
+  {
+    selector: "dropi-wc-country-flags",
+    component: CountryFlagsComponent,
+    description: "Country Flags Component",
+  },
+  {
+    selector: "dropi-wc-drawer",
+    component: DropiDrawerComponent,
+    description: "Drawer Component",
+  },
+  {
+    selector: "dropi-wc-banner-external",
+    component: DropiBannerExternalComponent,
+    description: "External Banner Component",
+  },
+  {
+    selector: "dropi-wc-alert-validation",
+    component: AlertValidationComponent,
+    description: "Alert Validation Component",
+  },
+  {
+    selector: "dropi-wc-beta-tag",
+    component: BetaTagComponent,
+    description: "Beta Tag Component",
+  },
+  {
+    selector: "dropi-wc-confirm-dialog",
+    component: ConfirmDialogComponent,
+    description: "Confirm Dialog Component",
+  },
+  {
+    selector: "dropi-wc-spinner",
+    component: SpinnerComponent,
+    description: "Spinner Component",
+  },
+  {
+    selector: "dropi-wc-empty",
+    component: EmptyComponent,
+    description: "Empty Component",
+  },
+  {
+    selector: "dropi-wc-toggle",
+    component: InputToggleComponent,
+    description: "Toggle Component",
+  },
+  {
+    selector: "dropi-wc-languages-selector",
+    component: DropiLanguagesSelectorComponent,
+    description: "Languages Selector Component",
+  },
+  {
+    selector: "dropi-wc-dropdown",
+    component: DropiDropdownComponent,
+    description: "Dropdown Component",
+  },
 ];
 
 export function registerDropiElements(

package/src/lib/router-stub.ts

@@ -0,0 +1,7 @@
+import { NgModule } from "@angular/core";
+
+@NgModule({
+  imports: [],
+  exports: [],
+})
+export class RouterModuleStub {}

package/src/libreria work space.code-workspace

@@ -1,11 +1,14 @@
 {
   "folders": [
-	{
-		"path": "../../../Documents/react prueba"
-	},
-	{
-		"path": ".."
-	}
-],
-  "settings": {}
+    {
+      "path": "../../../Documents/react prueba",
+    },
+    {
+      "path": "..",
+    },
+    {
+      "path": "../../../Documents/dropi-core_front",
+    },
+  ],
+  "settings": {},
 }

package/src/utilities/interfaces/ui/dropi-table.interface.ts

@@ -0,0 +1,60 @@
+export interface DropiTableColumn {
+  key: string;
+  label: string;
+  sortable?: boolean;
+  type?: string;
+  highlightColumn?: boolean;
+  align?: "left" | "center" | "right" | string;
+  disabledColumn?: boolean; // Añadido
+  imageUrl?: string; // Añadido
+}
+
+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; // Añadido
+}
+
+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/src/utilities/interfaces/ui/input-interface.ts

@@ -0,0 +1,34 @@
+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; // Añadido
+  id?: string; // Añadido
+  dataCy?: string; // Añadido
+  inputMode?: string; // Añadido
+  showHelperOnlyOnError?: boolean; // Añadido
+}
+
+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/src/utilities/interfaces/ui/select-interface.ts

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

package/src/utilities/interfaces/ui/selection-list-interface.ts

@@ -0,0 +1,15 @@
+export interface Option {
+  id: string;
+  name: string;
+  label?: string; // Para compatibilidad
+  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; // Para Checkbox
+  preIcon?: string; // Para Checkbox
+}

package/src/utilities/interfaces/ui/upload.model.ts

@@ -0,0 +1,41 @@
+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 const FILE_TYPE_MAP: Record<string, string[]> = {
+  IMAGE: ["image/jpeg", "image/png", "image/webp"],
+  DOCUMENT: ["application/pdf"],
+};