@dropi/ui 0.1.19 → 0.1.21

package/dist/types/components/dropi-date-picker-range/dropi-date-picker-range.d.ts

@@ -0,0 +1,50 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface DateRange {
+    start: string;
+    end: string;
+}
+/**
+ * @component dropi-date-picker-range
+ * Date range picker with shortcut buttons (Today, Last 7/15/30/90 days).
+ *
+ * @example
+ * <dropi-date-picker-range show-label></dropi-date-picker-range>
+ */
+export declare class DropiDatePickerRange {
+    /** Start date (YYYY-MM-DD) */
+    startDate: string;
+    /** End date (YYYY-MM-DD) */
+    endDate: string;
+    /** Show "Rango de fechas" label */
+    showLabel: boolean;
+    /** Input placeholder */
+    placeholder: string;
+    /** Show loading skeleton */
+    loading: boolean;
+    /** Max allowed range in days (0 = unlimited) */
+    maxDaysRange: number;
+    /** Hide "Hoy" shortcut */
+    hideTodayRangeShortcut: boolean;
+    /** Emitted when start date changes */
+    startDateChange: EventEmitter<string>;
+    /** Emitted when end date changes */
+    endDateChange: EventEmitter<string>;
+    /** Emitted with full range when both dates are set */
+    dropiRangeChange: EventEmitter<DateRange>;
+    private start;
+    private end;
+    private activeRange;
+    private showWarning;
+    onStartPropChange(val: string): void;
+    onEndPropChange(val: string): void;
+    componentWillLoad(): void;
+    private get today();
+    private daysAgo;
+    private get shortcuts();
+    private selectShortcut;
+    private onStartChange;
+    private onEndChange;
+    private checkRange;
+    private emit;
+    render(): any;
+}

package/dist/types/components/dropi-drawer/dropi-drawer.d.ts

@@ -0,0 +1,31 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-drawer
+ * Slide-in panel from any side of the screen with backdrop.
+ * Matches dropi-core_front implementation with size and headless support.
+ */
+export declare class DropiDrawer {
+    drawerTitle: string;
+    /** Controls visibility (alias of open for Angular parity) */
+    drawerIsOpen: boolean;
+    /** Controls visibility */
+    open: boolean;
+    /** Side from which the drawer slides in */
+    position: 'left' | 'right' | 'top' | 'bottom';
+    /** Preset size (overrides width when set): 'm' | 'l' | 'xl' | 'xxl' */
+    size: 'm' | 'l' | 'xl' | 'xxl' | '';
+    /** Custom width for left/right drawers (used when size is not set) */
+    width: string;
+    /** Custom height for top/bottom drawers */
+    height: string;
+    /** Hide the header (headless mode) */
+    headless: boolean;
+    /** Close on backdrop click */
+    closeOnBackdrop: boolean;
+    /** Emitted when drawer closes */
+    dropiClose: EventEmitter<void>;
+    openChanged(val: boolean): void;
+    componentWillLoad(): void;
+    private close;
+    render(): any;
+}

package/dist/types/components/dropi-dropdown/dropi-dropdown.d.ts

@@ -10,16 +10,22 @@ export interface DropdownOption {
 export declare class DropiDropdown {
     /** Options array or JSON string */
     options: DropdownOption[] | string;
-    /** Property name to display as the option label */
+    /** Property name for the label */
     valueModel: string;
-    /** Property name to use as the option image/avatar URL */
-    imageModel: string;
-    /** Max height of the list container (CSS value) */
+    /** Height of the dropdown (CSS value) */
     height: string;
+    /** Whether the dropdown is inside a select component */
+    isInSelect: boolean;
+    /** Configuration parameters for the dropdown items */
+    parameters: {
+        type: 'checkbox';
+        icon: string;
+        iconCurrier: boolean;
+    };
     private selected;
     private parsedOptions;
-    /** Emitted when selection changes. e.detail = selected items array */
-    dropiChange: EventEmitter<DropdownOption[]>;
+    /** Emitted when selection changes — matches Angular 'modelChange' */
+    modelChange: EventEmitter<DropdownOption[]>;
     optionsChanged(val: DropdownOption[] | string): void;
     componentWillLoad(): void;
     private isSelected;

package/dist/types/components/dropi-empty-state/dropi-empty-state.d.ts

@@ -4,21 +4,23 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * Empty state illustration with title, description and optional action button.
  */
 export declare class DropiEmptyState {
-    /** Title text */
-    header: string;
+    /** Title text (matches Angular 'title') */
+    title: string;
     /** Description text */
     description: string;
     /** URL of the illustration image */
     imageUrl: string;
     /** Alt text for the image */
     imageAlt: string;
-    /** Primary action button label (empty = hidden) */
-    actionLabel: string;
-    /** Secondary action button label (empty = hidden) */
-    secondaryLabel: string;
-    /** Emitted when primary action button is clicked */
-    dropiAction: EventEmitter<void>;
-    /** Emitted when secondary action button is clicked */
-    dropiSecondaryAction: EventEmitter<void>;
+    /** Primary action button label (empty = hidden) — matches Angular 'buttonText' */
+    buttonText: string;
+    /** Icon name for button — matches Angular 'buttonIcon' */
+    buttonIcon: string;
+    /** State of the illustration (default, loading, sorry, love, success, error) — matches Angular 'dropiIcon' */
+    dropiIcon: 'default' | 'loading' | 'sorry' | 'love' | 'success' | 'error' | 'warning' | 'info';
+    /** Severity for the action button — matches Angular 'buttonSeverity' */
+    buttonSeverity: 'primary' | 'secondary' | 'tertiary';
+    /** Emitted when button is clicked — matches Angular 'buttonClickEvent' */
+    buttonClickEvent: EventEmitter<void>;
     render(): any;
 }

package/dist/types/components/dropi-favorite-button/dropi-favorite-button.d.ts

@@ -7,7 +7,7 @@ export declare class DropiFavoriteButton {
     /** Whether the item is currently marked as favorite */
     isFavorite: boolean;
     /** Emitted when toggled. e.detail = new favorite state */
-    dropiToggleFavorite: EventEmitter<boolean>;
+    toggleFavorite: EventEmitter<boolean>;
     private hovered;
     private toggle;
     render(): any;

package/dist/types/components/dropi-file-upload/dropi-file-upload.d.ts

@@ -0,0 +1,76 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type FileUploadState = 'uploading' | 'complete' | 'confirm-delete' | 'deleting' | 'error';
+export interface FileItem {
+    id: string;
+    file: File | null;
+    progress: number;
+    state: FileUploadState;
+    previewUrl?: string;
+    fileType: 'image' | 'document';
+    typeView: 'card' | 'grid';
+}
+/**
+ * @component dropi-file-upload
+ * Componente de carga de archivos con zona de drop, lista de archivos,
+ * vista card y grid. API idéntica al componente Angular del core.
+ */
+export declare class DropiFileUpload {
+    /** Título mostrado arriba del componente */
+    title: string;
+    /** Subtítulo informativo */
+    label: string;
+    /** Texto dentro de la zona de drop */
+    textDropZone: string;
+    /** Texto del botón de selección */
+    textButton: string;
+    /** Tipo de preview: card (lista) o grid (miniaturas) */
+    previewType: 'card' | 'grid';
+    /** Permitir múltiples archivos */
+    multiple: boolean;
+    /** Límite de archivos */
+    maxFiles: number;
+    /** Tamaño máximo por archivo en MB */
+    maxFileSizeMB: number;
+    /** Tipos aceptados (ej: "image/*,application/pdf") */
+    accept: string;
+    /** Solo vista — sin eliminar */
+    onlyView: boolean;
+    /** Mostrar drop-zone cuando ya hay archivos (modo grid) */
+    viewDragAndDrop: boolean;
+    /** Tamaño del drop zone */
+    dragAndDropSize: 'small' | 'default';
+    private selectedFiles;
+    private error;
+    private errorMessage;
+    private dragging;
+    /** Emite los File[] cada vez que cambia la selección (el host maneja la subida) */
+    uploadedUrlsChange: EventEmitter<File[]>;
+    private inputRef;
+    private dragCounter;
+    private generateId;
+    private getFileType;
+    private getTypeView;
+    private getFileTypeClass;
+    private isDropZoneHidden;
+    private generatePreviewUrl;
+    private syncFileItem;
+    private emitFiles;
+    private handleFiles;
+    private simulateProgress;
+    private handleFileAction;
+    private onDragOver;
+    private onDragEnter;
+    private onDragLeave;
+    private onDrop;
+    private onInputChange;
+    private openFilePicker;
+    private addImage;
+    private renderCheckSvg;
+    private renderTrashSvg;
+    private renderTrashGridSvg;
+    private renderPdfSvg;
+    private renderDocSvg;
+    private renderCardItem;
+    private renderGridItem;
+    render(): any;
+}

package/dist/types/components/dropi-file-upload-progress-bar/dropi-file-upload-progress-bar.d.ts

@@ -0,0 +1,33 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-file-upload-progress-bar
+ * Shows upload progress for a single file with name, miniature and actions.
+ * Mirrored EXACTLY from dropi-core_front.
+ */
+export declare class DropiFileUploadProgressBar {
+    /** File name to display */
+    textFile: string;
+    /** Upload progress 0–100 */
+    progress: number;
+    /** Type of file (overridden by extension detection) */
+    type: 'image' | 'file';
+    /** URL for image preview if type is image */
+    urlImage: string;
+    /** Show the eye icon for preview */
+    isPreview: boolean;
+    /** Disable delete action */
+    disabled: boolean;
+    private fileExtension;
+    /** Emitted when the trash icon is clicked */
+    deleteFile: EventEmitter<void>;
+    /** Emitted when progress reaches 100 */
+    uploadComplete: EventEmitter<void>;
+    /** Emitted when the eye icon is clicked */
+    viewFile: EventEmitter<void>;
+    handleProgress(val: number): void;
+    handleTextFile(val: string): void;
+    componentWillLoad(): void;
+    private updateFileInfo;
+    private getFileExtensionInfo;
+    render(): any;
+}

package/dist/types/components/dropi-ilustration-icon/dropi-ilustration-icon.d.ts

@@ -0,0 +1,24 @@
+export type IlustrationType = 'dropi' | 'mb' | 'insignia';
+export type IlustrationState = 'success' | 'error' | 'warning' | 'info' | 'default' | 'loading' | 'sorry' | 'love';
+export type InsigniaState = 'verified' | 'premium' | 'exclusive';
+/**
+ * @component dropi-ilustration-icon
+ * Illustration icon with three modes: dropi (SVG asset), mb (colored circle), insignia (badge).
+ *
+ * @example
+ * <dropi-ilustration-icon type="dropi" state="success"></dropi-ilustration-icon>
+ * <dropi-ilustration-icon type="insignia" state-insignia="premium" tag-product></dropi-ilustration-icon>
+ */
+export declare class DropiIlustrationIcon {
+    /** Display mode */
+    type: IlustrationType;
+    /** State for dropi/mb types */
+    state: IlustrationState;
+    /** Insignia variant */
+    stateInsignia: InsigniaState;
+    /** Show insignia as tag with label (for product cards) */
+    tagProduct: boolean;
+    private readonly insigniaIcons;
+    private getIconName;
+    render(): any;
+}

package/dist/types/components/dropi-input/dropi-input.d.ts

@@ -17,8 +17,8 @@ export type InputMode = 'text' | 'numeric' | 'decimal' | 'tel' | 'email' | 'url'
  */
 export declare class DropiInput {
     internals: ElementInternals;
-    /** Input id. Defaults to label value. */
-    inputId: string;
+    /** Input id. Defaults to label label. */
+    id: string;
     /** Name attribute for native form submission */
     name: string;
     /** Floating or fixed label text */
@@ -28,49 +28,59 @@ export declare class DropiInput {
     /** Current value (controlled) */
     value: string;
     /** Max character length */
-    maxlength: number;
+    maxLength: number;
     /** Disable the input */
     disabled: boolean;
-    /** Mark as required (shows asterisk when showAsterisk is true) */
+    /** Mark as required (shows asterisk when showObligatoryAsterisk is true) */
     required: boolean;
     /** Show the required asterisk on the label */
-    showAsterisk: boolean;
+    showObligatoryAsterisk: boolean;
     /** Show label above the input (fixed), instead of floating inside */
     fixedLabel: boolean;
     /** Keyboard input mode hint */
     inputMode: InputMode;
     /** Show password visibility toggle (renders as password field) */
-    passwordInput: boolean;
+    isPasswordInput: boolean;
     /** Apply thousand separator formatting (e.g. 1,000,000) */
-    moneyFormat: boolean;
+    isMoneyInput: boolean;
     /** Apply thousand separator without currency symbol */
-    thousandSeparator: boolean;
+    isThousandSeparator: boolean;
     /** Only allow numeric characters */
-    onlyNumbers: boolean;
-    /** Allow decimal point when onlyNumbers is true */
+    isNumericInput: boolean;
+    /** Allow decimal point when isNumericInput is true */
     allowDecimals: boolean;
     /** Only allow letter characters */
-    onlyLetters: boolean;
+    isLettersOnly: boolean;
     /** Icon name shown inside the input (only visible when value is not empty) */
     icon: string;
     /** Color token for the icon */
     iconColor: string;
     /** Mark the field as invalid (consumer-controlled) */
-    invalid: boolean;
+    hasError: boolean;
     /** Helper / error text shown below the field */
-    helperText: string;
-    /** Only show helperText when the field is invalid */
+    textHelper: string;
+    /** Only show textHelper when the field is invalid */
     showHelperOnlyOnError: boolean;
+    /**
+     * Convenience object prop — matches Angular `inputProperties: InputProperties`.
+     * Fields: id, label, placeholder, maxLength, textHelper, isPasswordInput,
+     * icon, iconColor, isMoneyInput, showObligatoryAsterisk, isNumericInput,
+     * allowDecimals, isThousandSeparator, showHelperOnlyOnError,
+     * isLettersOnly, inputMode.
+     * Note: `formControl` is not supported; use `value` + onInput event instead.
+     */
+    inputProperties: any;
     private showPassword;
     private touched;
     /** Emitted on every keystroke with the current value */
-    dropiInput: EventEmitter<string>;
+    onInput: EventEmitter<string>;
     /** Emitted on blur with the final value */
-    dropiChange: EventEmitter<string>;
+    onChange: EventEmitter<string>;
     /** Emitted on focus */
-    dropiFocus: EventEmitter<void>;
+    onFocus: EventEmitter<void>;
     /** Emitted on blur */
-    dropiBlur: EventEmitter<void>;
+    onBlur: EventEmitter<void>;
+    inputPropertiesChanged(val: any): void;
     valueChanged(val: string): void;
     disabledChanged(val: boolean): void;
     componentWillLoad(): void;

package/dist/types/components/dropi-languages-selector/dropi-languages-selector.d.ts

@@ -0,0 +1,31 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface LanguageOption {
+    code: string;
+    label: string;
+    /** ISO country code for the flag (e.g. "CO", "US") */
+    flag: string;
+}
+/**
+ * @component dropi-languages-selector
+ * Dropdown to switch between languages, showing country flag + label.
+ *
+ * @example
+ * <dropi-languages-selector
+ *   languages='[{"code":"es","label":"Español","flag":"CO"},{"code":"en","label":"English","flag":"US"}]'
+ * ></dropi-languages-selector>
+ */
+export declare class DropiLanguagesSelector {
+    /** Language options (array or JSON string) */
+    languages: LanguageOption[] | string;
+    /** Currently selected language (LanguageOption or JSON string) */
+    selectedLang: LanguageOption | string | null;
+    languageChange: EventEmitter<LanguageOption>;
+    private isOpen;
+    private parsedLanguages;
+    private currentLang;
+    languagesChanged(val: LanguageOption[] | string): void;
+    selectedLangChanged(val: LanguageOption | string | null): void;
+    componentWillLoad(): void;
+    private select;
+    render(): any;
+}

package/dist/types/components/dropi-lottie-loader/dropi-lottie-loader.d.ts

@@ -8,7 +8,7 @@ export declare class DropiLottieLoader {
     /** Path to the Lottie JSON animation file */
     loadingAnimation: string;
     /** Title shown below the animation */
-    loaderTitle: string;
+    title: string;
     /** Descriptive message below the title */
     message: string;
     render(): any;

package/dist/types/components/dropi-media-player/dropi-media-player.d.ts

@@ -0,0 +1,51 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class DropiMediaPlayer {
+    el: HTMLElement;
+    src: string;
+    mediaType: 'audio' | 'video';
+    poster: string;
+    autoplay: boolean;
+    loop: boolean;
+    initialVolume: number;
+    /** Format defines aspect ratio scales like Angular original */
+    format: 'mobile-vertical' | 'mobile-compact' | 'desktop';
+    private playing;
+    private currentTimeStr;
+    private durationStr;
+    private duration;
+    private volume;
+    private muted;
+    private showControls;
+    private isFullscreen;
+    private progress;
+    private speed;
+    private showSpeedMenu;
+    private showVolumeSlider;
+    private mediaEl;
+    private controlsTimeout;
+    private speeds;
+    dropiPlay: EventEmitter<boolean>;
+    dropiEnded: EventEmitter<void>;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private handleFullscreenChange;
+    private togglePlay;
+    private handleTimeUpdate;
+    private handleLoadedMetadata;
+    private handleSeek;
+    private handleVolume;
+    private toggleSpeedMenu;
+    private selectSpeed;
+    private toggleVolume;
+    private toggleFullscreen;
+    private onMouseMove;
+    private onMouseLeave;
+    private startHideControlsTimer;
+    handleDocClick(e: MouseEvent): void;
+    private formatTime;
+    get playButtonSize(): number;
+    get playIconSize(): number;
+    get volumeIcon(): string;
+    get volumeGradient(): string;
+    render(): any;
+}

package/dist/types/components/dropi-modal/dropi-modal.d.ts

@@ -8,16 +8,35 @@ export type ModalSize = 'full' | 'xxl' | 'l' | 'm' | 's' | 'drawer-s' | 'drawer-
  */
 export declare class DropiModal {
     visible: boolean;
-    header: string;
+    header: string | null;
     showCloseIcon: boolean;
     dismissable: boolean;
+    dismissableMask: boolean;
+    dismissible: boolean;
     closeOnEscape: boolean;
     modal: boolean;
+    closable: boolean;
+    blockScroll: boolean;
     showHeader: boolean;
+    showFooter: boolean;
     position: ModalPosition;
     size: ModalSize;
-    dropiShow: EventEmitter<void>;
-    dropiHide: EventEmitter<void>;
+    styleClass: string | null;
+    maxWidth: string | null;
+    /** Auto-manage z-index stack (matches Angular `autoZIndex`) */
+    autoZIndex: boolean;
+    /** Base z-index value when autoZIndex is false (matches Angular `baseZIndex`) */
+    baseZIndex: number;
+    /** CSS transition duration, e.g. '0.15s' (matches Angular `transitionOptions`) */
+    transitionOptions: string;
+    /** Enable a before-close hook (matches Angular `enableBeforeClose`) */
+    enableBeforeClose: boolean;
+    /** No-op — kept for API parity with Angular (matches Angular `draggable`) */
+    draggable: boolean;
+    /** No-op — kept for API parity with Angular (matches Angular `resizable`) */
+    resizable: boolean;
+    onShow: EventEmitter<void>;
+    onHide: EventEmitter<void>;
     visibleChange: EventEmitter<boolean>;
     private isOpen;
     private isClosing;

package/dist/types/components/dropi-navbar/dropi-navbar.d.ts

@@ -0,0 +1,42 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface NavItem {
+    id: string;
+    label: string;
+    icon?: string;
+    badge?: string | number;
+    href?: string;
+}
+/**
+ * @component dropi-navbar
+ * Top navigation bar with logo, nav items, notification bell, and user avatar.
+ */
+export declare class DropiNavbar {
+    /** Logo URL */
+    logoUrl: string;
+    /** Logo alt */
+    logoAlt: string;
+    /** Navigation data (matches Angular `data: DropiTableRow[]`) */
+    data: any[] | string;
+    /** Title (matches Angular `title`) */
+    title: string;
+    /** Active item ID */
+    activeId: string;
+    /** User name */
+    userName: string;
+    /** User avatar URL */
+    userAvatar: string;
+    /** Notification count (0 = no badge) */
+    notifications: number;
+    /** Show menu toggle (mobile) */
+    showMenuToggle: boolean;
+    /** Emitted when a nav item is clicked (matches Angular `clickLoadItem`) */
+    clickLoadItem: EventEmitter<any>;
+    /** Emitted when notification bell is clicked */
+    dropiNotificationsClick: EventEmitter<void>;
+    /** Emitted when avatar/user is clicked */
+    dropiUserClick: EventEmitter<void>;
+    /** Emitted when mobile menu toggle clicked */
+    dropiMenuToggle: EventEmitter<void>;
+    private get parsedData();
+    render(): any;
+}

package/dist/types/components/dropi-otp-send-code/dropi-otp-send-code.d.ts

@@ -20,7 +20,7 @@ export declare class DropiOtpSendCode {
     private inputs;
     private timer;
     /** Emitted when all 6 digits are entered. e.detail = the complete code string */
-    dropiCodeCompleted: EventEmitter<string>;
+    codeCompleted: EventEmitter<string>;
     /** Emitted when resend is requested */
     dropiResend: EventEmitter<void>;
     componentDidLoad(): void;

package/dist/types/components/dropi-paginator/dropi-paginator.d.ts

@@ -4,31 +4,21 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * Pagination control with page numbers, prev/next buttons and items-per-page selector.
  */
 export declare class DropiPaginator {
-    /** Total number of items */
-    total: number;
-    /** Items per page */
-    pageSize: number;
+    /** Total number of pages */
+    totalPages: number;
     /** Current page (1-based) */
-    page: number;
+    currentPage: number;
+    /** Disabled state */
+    disabled: boolean;
     /** Max page buttons to show at once */
-    maxPages: number;
+    maxVisiblePages: number;
+    /** Hide total page count (show only arrows) */
+    isNotTotalPages: boolean;
     /** Hide "Anterior"/"Siguiente" text labels, show only arrows */
     noLabels: boolean;
-    /** Whether to show the items-per-page selector */
-    showPageSizeSelector: boolean;
-    /** Options for items per page */
-    pageSizeOptions: number[] | string;
-    /** Emitted when page changes. e.detail = { page, pageSize } */
-    dropiPageChange: EventEmitter<{
-        page: number;
-        pageSize: number;
-    }>;
-    private parsedOptions;
-    optionsChanged(val: number[] | string): void;
-    componentWillLoad(): void;
-    private get totalPages();
+    /** Emitted when page changes. e.detail = new page number */
+    pageChange: EventEmitter<number>;
     private get pageNumbers();
     private goTo;
-    private onPageSizeChange;
     render(): any;
 }

package/dist/types/components/dropi-phone-input/dropi-phone-input.d.ts

@@ -0,0 +1,49 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-phone-input
+ * Phone number input with country code selector.
+ * Syncs perfectly with dropi-core_front natively
+ */
+export declare class DropiPhoneInput {
+    el: HTMLElement;
+    /** Initial country dial code (e.g. "57") — matches Angular 'CodArea' setter */
+    codArea: string;
+    /** Phone number value — matches Angular 'ngModelPhone' */
+    ngModelPhone: string;
+    /** Input placeholder — matches Angular 'phoneNumberPlaceholder' */
+    phoneNumberPlaceholder: string | null;
+    /** Disabled state — matches Angular 'disabledInput' */
+    disabledInput: boolean;
+    /** Validation state — matches Angular 'isValidPhone' */
+    isValidPhone: boolean;
+    /** Validate on init — matches Angular 'validateOnInit' */
+    validateOnInit: boolean;
+    /**
+     * Pre-selected country object (matches Angular `selectedOption: Country`).
+     * Pass `{ dialCode, flag, name, iso2 }`. When set, overrides `codArea`.
+     */
+    selectedOption: any;
+    /**
+     * Country select configuration object (matches Angular `selectProperties: SelectProperties`).
+     * Fields: `label`, `placeholder`, `options` (array of Country objects).
+     * When provided, overrides the internal country list.
+     */
+    selectProperties: any;
+    private open;
+    /** Emitted when country dial code changes — matches Angular 'ngModelChangeCod' */
+    ngModelChangeCod: EventEmitter<string>;
+    /** Emitted when phone number changes — matches Angular 'ngModelChangePhone' */
+    ngModelChangePhone: EventEmitter<string>;
+    /** Emitted on field verification — matches Angular 'verifiedField' */
+    verifiedField: EventEmitter<void>;
+    /** Emitted when country selection changes — matches Angular 'onChangeSelect' */
+    onChangeSelect: EventEmitter<any>;
+    codAreaChanged(): void;
+    selectedOptionChanged(val: any): void;
+    componentWillLoad(): void;
+    private get selectedCountry();
+    private selectCountry;
+    private handleInput;
+    handleWindowClick(ev: Event): void;
+    render(): any;
+}