@dropi/ui-components 1.0.11 → 1.0.13

package/README.md

@@ -81,47 +81,66 @@ const App = () => (
 );
 ```
 
-### 3. Usage (Angular)
-
-**Component (`login.component.ts`):**
-
-```typescript
-import { Component } from "@angular/core";
-import { ButtonComponent, AlertComponent } from "@dropi/ui-components";
-
-@Component({
-  selector: "app-login",
-  standalone: true,
-  imports: [ButtonComponent, AlertComponent],
-  templateUrl: "./login.component.html",
-})
-export class LoginComponent {}
-```
-
-**Template (`login.component.html`):**
-
-```html
-<dropi-wc-button [type]="'primary'" [text]="'Login'" (onClick)="handleLogin()">
-</dropi-wc-button>
-
-<dropi-wc-alert [state]="'error'" [message]="'Invalid credentials'">
-</dropi-wc-alert>
-```
-
 ---
 
-## 📚 Components
+## 📚 Available Web Components
 
 All components use the prefix `dropi-wc-`.
 
-| Component  | Selector            | Description                     |
-| ---------- | ------------------- | ------------------------------- |
-| **Button** | `<dropi-wc-button>` | Primary/Secondary/Ghost buttons |
-| **Alert**  | `<dropi-wc-alert>`  | Success/Error/Info alerts       |
-| **Input**  | `<dropi-wc-input>`  | Text inputs with validation     |
-| **Tag**    | `<dropi-wc-tag>`    | Status tags (primary/secondary) |
-| **Switch** | `<dropi-wc-switch>` | Toggle switches                 |
-| **Search** | `<dropi-wc-search>` | Search bar with autocomplete    |
+### 🛠️ Form Elements
+
+| Selector                  | Description                               |
+| ------------------------- | ----------------------------------------- |
+| `<dropi-wc-button>`       | Primary/Secondary/Ghost buttons           |
+| `<dropi-wc-input>`        | Text inputs with validation               |
+| `<dropi-wc-checkbox>`     | Standard checkbox                         |
+| `<dropi-wc-radio-button>` | Grouped radio buttons                     |
+| `<dropi-wc-switch>`       | Toggle switches                           |
+| `<dropi-wc-toggle>`       | Advanced toggle switch with configuration |
+| `<dropi-wc-text-area>`    | Multi-line text area                      |
+| `<dropi-wc-phone-input>`  | Specialized international phone input     |
+
+### 🧭 Navigation
+
+| Selector                        | Description                          |
+| ------------------------------- | ------------------------------------ |
+| `<dropi-wc-sidebar>`            | Collapsible navigation sidebar       |
+| `<dropi-wc-navbar>`             | Top navigation bar                   |
+| `<dropi-wc-breadcrumb>`         | Navigation breadcrumbs               |
+| `<dropi-wc-paginator>`          | Data pagination with cursor support  |
+| `<dropi-wc-steps>`              | Progress steps (horizontal/vertical) |
+| `<dropi-wc-languages-selector>` | Language switching dropdown          |
+
+### 📦 Layout & Containers
+
+| Selector               | Description                             |
+| ---------------------- | --------------------------------------- |
+| `<dropi-wc-modal>`     | Dialog modals with customizable content |
+| `<dropi-wc-drawer>`    | Side drawers (Left/Right)               |
+| `<dropi-wc-accordion>` | Expandable content sections             |
+| `<dropi-wc-tabs>`      | Tabbed content views                    |
+
+### 🎨 Display & Feedback
+
+| Selector                      | Description                          |
+| ----------------------------- | ------------------------------------ |
+| `<dropi-wc-alert>`            | Success/Error/Info status alerts     |
+| `<dropi-wc-alert-validation>` | Verification status alerts (PrimeNG) |
+| `<dropi-wc-badge>`            | Status and number badges             |
+| `<dropi-wc-tag>`              | Categorization tags                  |
+| `<dropi-wc-spinner>`          | Loading indicator                    |
+| `<dropi-wc-skeleton>`         | Loading skeletons for layouts        |
+| `<dropi-wc-empty>`            | Empty state displays                 |
+| `<dropi-wc-tooltip>`          | Contextual help tooltips             |
+
+### 📽️ Multimedia & Advanced
+
+| Selector                     | Description                       |
+| ---------------------------- | --------------------------------- |
+| `<dropi-wc-carousel>`        | Image and content carousels       |
+| `<dropi-wc-youtube-video>`   | Lazy-loaded YouTube player        |
+| `<dropi-wc-dropdown>`        | Checkbox-based selection dropdown |
+| `<dropi-wc-banner-external>` | Dynamic WordPress banners         |
 
 ---
 

package/dist/README.md

@@ -59,16 +59,17 @@ import "@dropi/ui-components/dropi-tokens.css";
 In your main entry file (`main.tsx`, `main.js`), initialize the library:
 
 ```typescript
+import "zone.js"; // Mandatory: must be imported first
 import { defineCustomElements } from "@dropi/ui-components";
 
 // Initialize Angular environment and register Web Components
 defineCustomElements();
 ```
 
-Then use the components in your JSX/HTML:
+Then use the Web Component tags directly in your JSX/HTML:
 
 ```tsx
-// React Example
+// React Example (No imports needed for the component itself)
 const App = () => (
   <div>
     <dropi-wc-button
@@ -80,47 +81,66 @@ const App = () => (
 );
 ```
 
-### 3. Usage (Angular)
-
-**Component (`login.component.ts`):**
-
-```typescript
-import { Component } from "@angular/core";
-import { ButtonComponent, AlertComponent } from "@dropi/ui-components";
-
-@Component({
-  selector: "app-login",
-  standalone: true,
-  imports: [ButtonComponent, AlertComponent],
-  templateUrl: "./login.component.html",
-})
-export class LoginComponent {}
-```
-
-**Template (`login.component.html`):**
-
-```html
-<dropi-wc-button [type]="'primary'" [text]="'Login'" (onClick)="handleLogin()">
-</dropi-wc-button>
-
-<dropi-wc-alert [state]="'error'" [message]="'Invalid credentials'">
-</dropi-wc-alert>
-```
-
 ---
 
-## 📚 Components
+## 📚 Available Web Components
 
 All components use the prefix `dropi-wc-`.
 
-| Component  | Selector            | Description                     |
-| ---------- | ------------------- | ------------------------------- |
-| **Button** | `<dropi-wc-button>` | Primary/Secondary/Ghost buttons |
-| **Alert**  | `<dropi-wc-alert>`  | Success/Error/Info alerts       |
-| **Input**  | `<dropi-wc-input>`  | Text inputs with validation     |
-| **Tag**    | `<dropi-wc-tag>`    | Status tags (primary/secondary) |
-| **Switch** | `<dropi-wc-switch>` | Toggle switches                 |
-| **Search** | `<dropi-wc-search>` | Search bar with autocomplete    |
+### 🛠️ Form Elements
+
+| Selector                  | Description                               |
+| ------------------------- | ----------------------------------------- |
+| `<dropi-wc-button>`       | Primary/Secondary/Ghost buttons           |
+| `<dropi-wc-input>`        | Text inputs with validation               |
+| `<dropi-wc-checkbox>`     | Standard checkbox                         |
+| `<dropi-wc-radio-button>` | Grouped radio buttons                     |
+| `<dropi-wc-switch>`       | Toggle switches                           |
+| `<dropi-wc-toggle>`       | Advanced toggle switch with configuration |
+| `<dropi-wc-text-area>`    | Multi-line text area                      |
+| `<dropi-wc-phone-input>`  | Specialized international phone input     |
+
+### 🧭 Navigation
+
+| Selector                        | Description                          |
+| ------------------------------- | ------------------------------------ |
+| `<dropi-wc-sidebar>`            | Collapsible navigation sidebar       |
+| `<dropi-wc-navbar>`             | Top navigation bar                   |
+| `<dropi-wc-breadcrumb>`         | Navigation breadcrumbs               |
+| `<dropi-wc-paginator>`          | Data pagination with cursor support  |
+| `<dropi-wc-steps>`              | Progress steps (horizontal/vertical) |
+| `<dropi-wc-languages-selector>` | Language switching dropdown          |
+
+### 📦 Layout & Containers
+
+| Selector               | Description                             |
+| ---------------------- | --------------------------------------- |
+| `<dropi-wc-modal>`     | Dialog modals with customizable content |
+| `<dropi-wc-drawer>`    | Side drawers (Left/Right)               |
+| `<dropi-wc-accordion>` | Expandable content sections             |
+| `<dropi-wc-tabs>`      | Tabbed content views                    |
+
+### 🎨 Display & Feedback
+
+| Selector                      | Description                          |
+| ----------------------------- | ------------------------------------ |
+| `<dropi-wc-alert>`            | Success/Error/Info status alerts     |
+| `<dropi-wc-alert-validation>` | Verification status alerts (PrimeNG) |
+| `<dropi-wc-badge>`            | Status and number badges             |
+| `<dropi-wc-tag>`              | Categorization tags                  |
+| `<dropi-wc-spinner>`          | Loading indicator                    |
+| `<dropi-wc-skeleton>`         | Loading skeletons for layouts        |
+| `<dropi-wc-empty>`            | Empty state displays                 |
+| `<dropi-wc-tooltip>`          | Contextual help tooltips             |
+
+### 📽️ Multimedia & Advanced
+
+| Selector                     | Description                       |
+| ---------------------------- | --------------------------------- |
+| `<dropi-wc-carousel>`        | Image and content carousels       |
+| `<dropi-wc-youtube-video>`   | Lazy-loaded YouTube player        |
+| `<dropi-wc-dropdown>`        | Checkbox-based selection dropdown |
+| `<dropi-wc-banner-external>` | Dynamic WordPress banners         |
 
 ---
 

package/dist/components-source/accordion/accordion-item/accordion-item.component.d.ts

@@ -0,0 +1,31 @@
+import { TemplateRef } from '@angular/core';
+import { AccordionComponent } from '../accordion.component';
+import * as i0 from "@angular/core";
+/**
+ * Componente que renderiza un item de un acordeón.
+ *
+ * Un item del acordeón tiene un título y un contenido que se puede expandir o contraer.
+ *
+ * @example
+ * <app-accordion>
+ *   <app-accordion-item title="Título 1">Contenido 1</app-accordion-item>
+ *   <app-accordion-item title="Título 2">Contenido 2</app-accordion-item>
+ * </app-accordion>
+ */
+export declare class AccordionItemComponent {
+    accordion: AccordionComponent;
+    /**
+     * The title of the item.
+     */
+    sectionTitle: string;
+    /**
+     * The index of the item in the accordion.
+     */
+    index: number;
+    content: TemplateRef<any>;
+    constructor(accordion: AccordionComponent);
+    toggle(): void;
+    get isOpen(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AccordionItemComponent, "app-accordion-item", never, { "sectionTitle": { "alias": "sectionTitle"; "required": false; }; "index": { "alias": "index"; "required": false; }; }, {}, ["content"], ["*"], true, never>;
+}

package/dist/components-source/accordion/accordion.component.d.ts

@@ -0,0 +1,26 @@
+import * as i0 from "@angular/core";
+/**
+ * Componente que renderiza un acordeón de secciones.
+ *
+ * Permite tener un acordeón con secciones que se pueden expandir o contraer.
+ * Cada sección se renderiza con el componente {@link AccordionItemComponent}.
+ *
+ * @example
+ * <app-accordion>
+ *   <app-accordion-item title="Título 1">Contenido 1</app-accordion-item>
+ *   <app-accordion-item title="Título 2">Contenido 2</app-accordion-item>
+ * </app-accordion>
+ */
+export declare class AccordionComponent {
+    /**
+     * Allows multiple sections to be open at the same time. If false, only one section can be open.
+     * @default false
+     */
+    multiple: boolean;
+    activeIndex: number | null;
+    openSections: Set<number>;
+    toggle(index: number): void;
+    isOpen(index: number): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AccordionComponent, "app-accordion", never, { "multiple": { "alias": "multiple"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/dist/components-source/alert/alert.component.d.ts

@@ -0,0 +1,32 @@
+import { EventEmitter, OnChanges, OnInit, SimpleChanges } from "@angular/core";
+import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
+import * as i0 from "@angular/core";
+export declare class AlertComponent implements OnInit, OnChanges {
+    private readonly sanitizer;
+    message: string;
+    type: "default" | "flag";
+    state: "success" | "error" | "warning" | "info";
+    dismissable: boolean;
+    showButton: boolean;
+    buttonText: string;
+    anchorText: string;
+    anchorUrl: string;
+    showAlert: boolean;
+    textLink: string;
+    clickedText: string;
+    linkUrl: string;
+    onClose: EventEmitter<void>;
+    onButtonClick: EventEmitter<void>;
+    onClickLink: EventEmitter<void>;
+    sanitinezedMessage: SafeHtml;
+    alertState: any;
+    constructor(sanitizer: DomSanitizer);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    sanitizeMessage(): void;
+    closeAlert(): void;
+    buttonClick(): void;
+    emitClickLink(e: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AlertComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AlertComponent, "dropi-wc-alert", never, { "message": { "alias": "message"; "required": false; }; "type": { "alias": "type"; "required": false; }; "state": { "alias": "state"; "required": false; }; "dismissable": { "alias": "dismissable"; "required": false; }; "showButton": { "alias": "showButton"; "required": false; }; "buttonText": { "alias": "buttonText"; "required": false; }; "anchorText": { "alias": "anchorText"; "required": false; }; "anchorUrl": { "alias": "anchorUrl"; "required": false; }; "showAlert": { "alias": "showAlert"; "required": false; }; "textLink": { "alias": "textLink"; "required": false; }; "clickedText": { "alias": "clickedText"; "required": false; }; "linkUrl": { "alias": "linkUrl"; "required": false; }; }, { "onClose": "onClose"; "onButtonClick": "onButtonClick"; "onClickLink": "onClickLink"; }, never, never, true, never>;
+}

package/dist/components-source/alert-modal/alert-modal.component.d.ts

@@ -0,0 +1,78 @@
+import { OnInit, EventEmitter, OnChanges, SimpleChanges, ViewContainerRef, TemplateRef, OnDestroy } from "@angular/core";
+import { TranslateService } from "@ngx-translate/core";
+import * as i0 from "@angular/core";
+export declare enum LoadingType {
+    Bowling = "bowling",
+    Heart = "heart"
+}
+export interface ModalParams {
+    tittle: string;
+    type?: "question" | "warning" | "success" | "error" | "loading";
+    message: string;
+    primaryButton?: string;
+    secondaryButton?: string;
+    loadingType?: LoadingType;
+    loadingTitle?: string;
+    loadingMessage?: string;
+    withLoadingProgressBar?: boolean;
+    closable?: boolean;
+    displayButtons?: boolean;
+    applyCountRegresive?: boolean;
+    timer?: number;
+}
+export declare class AlertModalComponent implements OnInit, OnChanges, OnDestroy {
+    private templateService;
+    private settingService;
+    private translateService;
+    visible: boolean;
+    params: ModalParams;
+    loading: boolean;
+    isStep: boolean;
+    contentTemplate?: TemplateRef<any>;
+    baseZIndex: number;
+    modalOpenChange: EventEmitter<boolean>;
+    primaryButtonEvent: EventEmitter<boolean>;
+    modalContainer: ViewContainerRef;
+    secondaryButtonEvent: EventEmitter<boolean>;
+    onHide: EventEmitter<any>;
+    alertTemplate: TemplateRef<any> | null;
+    contextTemplate: any;
+    private destroy$;
+    tittle: string;
+    type: string;
+    message: string;
+    primaryButton: string;
+    displayButtons: boolean;
+    secondaryButton: string;
+    sourceAnimation: string;
+    loadingType: LoadingType;
+    loadingTitle: string;
+    loadingMessage: string;
+    withLoadingProgressBar: boolean;
+    loadingAnimation: {
+        path: string;
+        width: string;
+        height: string;
+        marginBottom: string;
+    };
+    brandName: string;
+    imageWhiteBrand: string;
+    interval: any;
+    countRegresive: number;
+    constructor(templateService: any, settingService: any, translateService: TranslateService);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    updateParams(): void;
+    closeModal(): void;
+    primaryButtonAction(): void;
+    secondaryButtonAction(): void;
+    decideAnimation(): void;
+    decideLoadingAnimation(): void;
+    decideImgWhiteBrand(): "" | "/assets/img/white-brands-events/info.png" | "/assets/img/white-brands-events/warning.png" | "/assets/img/white-brands-events/success.png" | "/assets/img/white-brands-events/error.png";
+    startCountRegresive(): void;
+    ngOnDestroy(): void;
+    onHideModal(): void;
+    isArray(value: any): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AlertModalComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AlertModalComponent, "app-alert-modal", never, { "visible": { "alias": "visible"; "required": false; }; "params": { "alias": "params"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "isStep": { "alias": "isStep"; "required": false; }; "contentTemplate": { "alias": "contentTemplate"; "required": false; }; "baseZIndex": { "alias": "baseZIndex"; "required": false; }; }, { "modalOpenChange": "modalOpenChange"; "primaryButtonEvent": "primaryButtonEvent"; "secondaryButtonEvent": "secondaryButtonEvent"; "onHide": "onHide"; }, never, never, true, never>;
+}

package/dist/components-source/alert-validation/alert-validation.component.d.ts

@@ -0,0 +1,21 @@
+import { OnInit } from "@angular/core";
+import * as i0 from "@angular/core";
+export declare class AlertValidationComponent implements OnInit {
+    private router;
+    visible: boolean;
+    visibleSupport: boolean;
+    message: string;
+    routeLink?: string;
+    status: any;
+    isBillingDataCompleted: boolean;
+    messageAlertObject: any;
+    visibleTutorial: boolean;
+    constructor(router: any);
+    ngOnInit(): void;
+    navigate(): void;
+    goValidate(): void;
+    openModal2(): void;
+    closeModal(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AlertValidationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AlertValidationComponent, "app-alert-validation", never, { "visible": { "alias": "visible"; "required": false; }; "visibleSupport": { "alias": "visibleSupport"; "required": false; }; "message": { "alias": "message"; "required": false; }; "routeLink": { "alias": "routeLink"; "required": false; }; "status": { "alias": "status"; "required": false; }; "isBillingDataCompleted": { "alias": "isBillingDataCompleted"; "required": false; }; "messageAlertObject": { "alias": "messageAlertObject"; "required": false; }; "visibleTutorial": { "alias": "visibleTutorial"; "required": false; }; }, {}, never, never, true, never>;
+}

package/dist/components-source/badge/badge.component.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+export declare class BadgeComponent {
+    state: string;
+    stateText: {
+        pending: string;
+        active: string;
+        canceled: string;
+        frozen: string;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<BadgeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BadgeComponent, "dropi-badge", never, { "state": { "alias": "state"; "required": false; }; }, {}, never, never, true, never>;
+}

package/dist/components-source/beta-tag/beta-tag.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class BetaTagComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<BetaTagComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BetaTagComponent, "app-beta-tag", never, {}, {}, never, never, true, never>;
+}

package/dist/components-source/breadcrumb/breadcrumb.component.d.ts

@@ -0,0 +1,11 @@
+import { OnInit } from "@angular/core";
+import * as i0 from "@angular/core";
+export declare class BreadcrumbComponent implements OnInit {
+    items: any[];
+    imageIcon: string;
+    homeRoute: string;
+    home: any;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BreadcrumbComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BreadcrumbComponent, "app-breadcrumb", never, { "items": { "alias": "items"; "required": false; }; "imageIcon": { "alias": "imageIcon"; "required": false; }; "homeRoute": { "alias": "homeRoute"; "required": false; }; }, {}, never, never, true, never>;
+}

package/dist/components-source/card-product/card-product.component.d.ts

@@ -0,0 +1,204 @@
+import { EventEmitter, OnInit, SimpleChanges, PipeTransform } from "@angular/core";
+import * as i0 from "@angular/core";
+export declare class AdjustNamePipeStub implements PipeTransform {
+    transform(value: any): any;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdjustNamePipeStub, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<AdjustNamePipeStub, "adjustName", true>;
+}
+export declare class CurrencyComponentStub {
+    value: any;
+    class: any;
+    style: any;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CurrencyComponentStub, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CurrencyComponentStub, "currency", never, { "value": { "alias": "value"; "required": false; }; "class": { "alias": "class"; "required": false; }; "style": { "alias": "style"; "required": false; }; }, {}, never, never, true, never>;
+}
+export declare class BetaTagComponentStub {
+    static ɵfac: i0.ɵɵFactoryDeclaration<BetaTagComponentStub, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BetaTagComponentStub, "app-beta-tag", never, {}, {}, never, never, true, never>;
+}
+export interface ProductData {
+    id: string | number;
+    sku?: string;
+    name: string;
+    type?: string;
+    sale_price: number;
+    suggested_price: number;
+    private_product: boolean;
+    variation_stock?: number;
+    stock_simple: number;
+    is_variation: boolean;
+    favorite: boolean;
+    supplier: {
+        id: number;
+        name: string;
+        category_user: string;
+        icon?: "verified" | "premium" | "exclusive";
+    };
+    categories: Array<{
+        name: string;
+    }>;
+    private_user_stock?: number;
+    legacy_img?: boolean;
+    image: string;
+    category?: string;
+    stock?: number;
+    supplierPrice?: number;
+    suggestedPrice?: number;
+    imageUrl?: string;
+    isFavorite?: boolean;
+}
+export type CardState = "default" | "hover" | "select";
+export declare class CardProductComponent implements OnInit {
+    private settingService;
+    private favoriteService;
+    private orderManual;
+    private router;
+    product: ProductData;
+    state: CardState;
+    aS: boolean;
+    bettaTester: boolean;
+    onAddToCart: EventEmitter<ProductData>;
+    onProductClick: EventEmitter<ProductData>;
+    changeFavorite: EventEmitter<Boolean>;
+    imageError: boolean;
+    brandName: string;
+    onFavoriteHover: boolean;
+    randomClasses: {
+        card: string;
+        imageContainer: string;
+        image: string;
+        tags: string;
+        tagsRow: string;
+        favoriteButton: string;
+        productInfo: string;
+        productHeader: string;
+        category: string;
+        stockInfo: string;
+        stockLabel: string;
+        stockValue: string;
+        productName: string;
+        supplierInfo: string;
+        supplierLabel: string;
+        supplierName: string;
+        priceContainer: string;
+        priceItem: string;
+        priceLabel: string;
+        priceValue: string;
+        separator: string;
+        actionButton: string;
+        buttonText: string;
+    };
+    mixedData: {
+        stockDivs: Array<{
+            value: number;
+            class: string;
+            isReal: boolean;
+        }>;
+        supplierPriceDivs: Array<{
+            value: number;
+            class: string;
+            isReal: boolean;
+        }>;
+        suggestedPriceDivs: Array<{
+            value: number;
+            class: string;
+            isReal: boolean;
+        }>;
+    };
+    fakeStyles: {
+        stock: string;
+        price: string;
+    };
+    isMobile: boolean;
+    constructor(settingService: any, favoriteService: any, orderManual: any, router: any);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    onResize(event: any): void;
+    private checkScreenSize;
+    private generateRandomClasses;
+    private generateMixedData;
+    private generateFakeStyles;
+    get imageUrl(): string | undefined;
+    onError(event: any): void;
+    get productTags(): Array<{
+        text: string;
+        type: "primary" | "secondary";
+        state: "default" | "warning" | "info";
+        showIcon?: boolean;
+        icon?: string;
+    }>;
+    private getProductStock;
+    get stockStatus(): "success" | "warning" | "error";
+    get stockStatusClass(): string;
+    handleAddToCart(): void;
+    handleFavoriteToggle(): void;
+    getFavoriteIconColor(): string;
+    playAudio(): void;
+    getProductDetails(): void;
+    getProvidersDetails(): void;
+    getMixedSupplierPriceDivs(): {
+        value: number;
+        class: string;
+        isReal: boolean;
+    }[];
+    getMixedSuggestedPriceDivs(): {
+        value: number;
+        class: string;
+        isReal: boolean;
+    }[];
+    hasStock(): boolean;
+    private generateRandomClass;
+    private generateFakeStyleVariant;
+    private generateMixedStockDivs;
+    getCardStyles(): {};
+    getRandomProviderCategoryStyles(): {};
+    getImageContainerStyles(): {};
+    getImageStyles(): {};
+    getTagsContainerStyles(): {};
+    getTagsRowStyles(): {};
+    getFavoriteButtonStyles(): {};
+    getProductInfoStyles(): {};
+    getProductHeaderStyles(): {};
+    getCategoryStyles(): {};
+    getStockInfoStyles(): {};
+    getStockLabelStyles(): {};
+    getStockValueStyles(): {};
+    getProductNameStyles(): {};
+    getSupplierInfoStyles(): {};
+    getSupplierLabelStyles(): {};
+    getSupplierNameStyles(): {};
+    getPriceContainerStyles(): {};
+    getPriceItemStyles(): {};
+    getPriceLabelStyles(): {};
+    getPriceValueStyles(): {};
+    getSeparatorStyles(): {};
+    getActionButtonStyles(): {};
+    getButtonTextStyles(): {};
+    getFakeStockStyles(): {};
+    getFakePriceStyles(): {};
+    getRandomCardClass(): string;
+    getRandomImageContainerClass(): string;
+    getRandomImageClass(): string;
+    getRandomTagsClass(): string;
+    getRandomTagsRowClass(): string;
+    getRandomFavoriteButtonClass(): string;
+    getRandomProductInfoClass(): string;
+    getRandomProductHeaderClass(): string;
+    getRandomCategoryClass(): string;
+    getRandomStockInfoClass(): string;
+    getRandomStockLabelClass(): string;
+    getRandomProductNameClass(): string;
+    getRandomSupplierInfoClass(): string;
+    getRandomSupplierLabelClass(): string;
+    getRandomSupplierNameClass(): string;
+    getRandomPriceContainerClass(): string;
+    getRandomPriceItemClass(): string;
+    getRandomPriceLabelClass(): string;
+    getRandomPriceValueClass(): string;
+    getRandomSeparatorClass(): string;
+    getRandomActionButtonClass(): string;
+    getRandomButtonTextClass(): string;
+    getMixedStockDivs(): any[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<CardProductComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CardProductComponent, "dropi-card-product", never, { "product": { "alias": "product"; "required": false; }; "state": { "alias": "state"; "required": false; }; "aS": { "alias": "aS"; "required": false; }; "bettaTester": { "alias": "bettaTester"; "required": false; }; }, { "onAddToCart": "onAddToCart"; "onProductClick": "onProductClick"; "changeFavorite": "changeFavorite"; }, never, never, true, never>;
+}