@dropi/ui 0.1.20 → 0.1.21

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

@@ -1,29 +1,9 @@
-import { EventEmitter } from '../../stencil-public-runtime';
 /**
  * @component dropi-accordion
- * Collapsible section with animated expand/collapse.
- *
- * @example
- * <dropi-accordion header="¿Cómo funciona?">
- *   <p>Contenido del acordeón aquí.</p>
- * </dropi-accordion>
+ * Container for <dropi-accordion-item> components.
  */
 export declare class DropiAccordion {
-    /** Title shown in the header button */
-    header: string;
-    /** Whether the section is expanded */
-    open: boolean;
-    /** Disable toggling */
-    disabled: boolean;
-    /** Icon name from dropi-icon sprite (shown before title) */
-    preIcon: string;
-    /** Emitted when toggled. e.detail = new open state */
-    dropiToggle: EventEmitter<boolean>;
-    private contentHeight;
-    private contentRef?;
-    openChanged(val: boolean): void;
-    componentDidLoad(): void;
-    private updateHeight;
-    private handleToggle;
+    /** Allows multiple sections to be open at the same time. If false, only one section can be open. */
+    multiple: boolean;
     render(): any;
 }

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

@@ -25,11 +25,17 @@ export declare class DropiAlert {
     anchorUrl: string;
     /** Whether the alert is visible */
     showAlert: boolean;
+    /** Link text (alternative to anchorText) */
+    textLink: string;
+    /** Link URL (alternative to anchorUrl) */
+    linkUrl: string;
+    /** Clicked text tracking */
+    clickedText: string;
     /** Emitted when the alert is dismissed */
-    dropiClose: EventEmitter<void>;
+    onClose: EventEmitter<void>;
     /** Emitted when the action button is clicked */
-    dropiButtonClick: EventEmitter<void>;
+    onButtonClick: EventEmitter<void>;
     /** Emitted when the anchor link is clicked */
-    dropiLinkClick: EventEmitter<void>;
+    onClickLink: EventEmitter<void>;
     render(): any;
 }

package/dist/types/components/dropi-alert-legacy/dropi-alert-legacy.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @component dropi-alert-legacy
+ * Legacy alert component for backward compatibility with Angular core.
+ */
+export declare class DropiAlertLegacy {
+    /** Visibility toggle */
+    visible: boolean;
+    /** Alert message */
+    message: string;
+    /** Semantic type: success | error | warning | info */
+    type: 'success' | 'error' | 'warning' | 'info';
+    /** Automatically close after timeout */
+    autoClose: boolean;
+    private timer;
+    componentDidLoad(): void;
+    private startTimer;
+    render(): any;
+}

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

@@ -15,7 +15,7 @@ export declare class DropiAlertModal {
     /** Modal type — determines Lottie animation */
     type: AlertModalType;
     /** Bold title */
-    alertTitle: string;
+    tittle: string;
     /** Body message */
     message: string;
     /** Primary button label */
@@ -32,13 +32,31 @@ export declare class DropiAlertModal {
     loadingTitle: string;
     /** Loading message */
     loadingMessage: string;
-    /** Emitted when primary button is clicked */
-    dropiPrimary: EventEmitter<void>;
-    /** Emitted when secondary button is clicked */
-    dropiSecondary: EventEmitter<void>;
-    /** Emitted when modal is hidden */
-    dropiHide: EventEmitter<void>;
+    /**
+     * When true, primary button does NOT auto-close the modal (matches Angular `isStep`).
+     * Useful for step-by-step flows.
+     */
+    isStep: boolean;
+    /** Base z-index for the internal modal overlay (matches Angular `baseZIndex`) */
+    baseZIndex: number;
+    /**
+     * Convenience object prop — matches Angular `params: ModalParams`.
+     * Fields: tittle, type, message, primaryButton, secondaryButton, loadingTitle,
+     * loadingMessage, closable, displayButtons.
+     * When provided, its values override the corresponding individual props.
+     */
+    params: any;
+    paramsChanged(val: any): void;
+    /** Emitted when primary button is clicked — matches Angular 'primaryButtonEvent' */
+    primaryButtonEvent: EventEmitter<boolean>;
+    /** Emitted when secondary button is clicked — matches Angular 'secondaryButtonEvent' */
+    secondaryButtonEvent: EventEmitter<boolean>;
+    /** Emitted when modal open state changes — matches Angular 'modalOpenChange' */
+    modalOpenChange: EventEmitter<boolean>;
+    /** Emitted when modal is hidden — matches Angular 'onHide' */
+    onHide: EventEmitter<void>;
     private readonly lottieMap;
+    componentWillLoad(): void;
     show(): Promise<void>;
     hide(): Promise<void>;
     private handlePrimary;

package/dist/types/components/dropi-badge-legacy/dropi-badge-legacy.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @component dropi-badge-legacy
+ * Legacy badge component used in tabs and elsewhere.
+ */
+export declare class DropiBadgeLegacy {
+    /** Type: state | counter */
+    type: 'state' | 'counter';
+    /** State: check | pending */
+    state: 'check' | 'pending';
+    /** Variant: primary | secondary | tertiary */
+    variant: 'primary' | 'secondary' | 'tertiary';
+    /** Count (for type counterpart) */
+    count: number;
+    render(): any;
+}

package/dist/types/components/dropi-banner-external/dropi-banner-external.d.ts

@@ -19,11 +19,17 @@ export declare class DropiBannerExternal {
     alt: string;
     /** Background color behind the image */
     backgroundColor: string;
+    /** Slug name (matches Angular `slugName`) */
+    slugName: string;
+    /** Whether to show on white brand (matches Angular `viewOnWhiteBrand`) */
+    viewOnWhiteBrand: boolean;
+    /** Countries list to show (matches Angular `viewOnlyCountries`) */
+    viewOnlyCountries: string[];
     private closed;
     /** Emitted when the banner is clicked (only when no link is set) */
-    dropiBannerClick: EventEmitter<void>;
-    /** Emitted when the close button is clicked */
-    dropiBannerClose: EventEmitter<void>;
+    bannerClick: EventEmitter<void>;
+    /** Emitted with false when the close button is clicked (matches Angular `isVisible`) */
+    isVisible: EventEmitter<boolean>;
     private handleClick;
     private closeBanner;
     render(): any;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export type ButtonType = 'legacy' | 'default' | 'success' | 'info' | 'error' | 'warning' | 'dropdown';
+export type ButtonType = 'legacy' | 'default' | 'success' | 'info' | 'error' | 'warning' | 'dropdown' | 'default-light';
 export type ButtonSeverity = 'primary' | 'secondary' | 'tertiary';
 export type ButtonSize = 'large' | 'normal' | 'small';
 export type ButtonState = 'default' | 'disabled' | 'loading';
@@ -23,10 +23,12 @@ export declare class DropiButton {
     preIcon: string;
     /** Icon name to show after the text */
     postIcon: string;
+    /** Custom icon color override */
+    customIconColor: string;
     /** Button label */
     text: string;
     /** Emitted on click (not emitted when disabled or loading) */
-    dropiClick: EventEmitter<MouseEvent>;
+    onClick: EventEmitter<MouseEvent>;
     private readonly colorMap;
     private get iconSize();
     private get color();

package/dist/types/components/dropi-card-checkbox/dropi-card-checkbox.d.ts

@@ -12,12 +12,12 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * ></dropi-card-checkbox>
  */
 export declare class DropiCardCheckbox {
-    /** Visual type: 'default' = no border, 'with-card' = bordered card */
-    type: 'default' | 'with-card';
-    /** Whether the checkbox is checked */
-    checked: boolean;
-    /** Main title */
-    cardTitle: string;
+    /** Visual type — matches Angular: 'default' | 'with card' */
+    type: 'default' | 'with card';
+    /** Whether the checkbox is checked — matches Angular 'state' */
+    state: 'checked' | 'default';
+    /** Main title — matches Angular 'title' */
+    title: string;
     /** Optional description below title */
     description: string;
     /** Optional extra info shown on the right */
@@ -27,7 +27,8 @@ export declare class DropiCardCheckbox {
     /** Disables interaction */
     disabled: boolean;
     /** Emitted with the new checked state when clicked */
-    dropiChange: EventEmitter<boolean>;
+    onChange: EventEmitter<boolean>;
+    private get isChecked();
     private handleClick;
     render(): any;
 }

package/dist/types/components/dropi-card-product/dropi-card-product.d.ts

@@ -1,39 +1,43 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 /**
  * @component dropi-card-product
- * Product card showing image, name, price, supplier, and action buttons.
+ * Product card showing image, supplier insignia, name, stock, prices and action button.
  */
 export declare class DropiCardProduct {
     /** Product image URL */
     image: string;
     /** Product name */
     productName: string;
-    /** Product price */
-    price: number;
+    /** Sale / supplier price (Precio proveedor) */
+    salePrice: number;
+    /** Suggested price for the dropshipper (Precio sugerido) */
+    suggestedPrice: number;
     /** Price currency symbol */
     currency: string;
     /** Supplier / store name */
     supplier: string;
     /** Category label */
     category: string;
+    /** Stock quantity (0 = Agotado) */
+    stock: number;
+    /** Supplier category for insignia: 'verified' | 'premium' | 'exclusive' | '' */
+    supplierCategory: 'verified' | 'premium' | 'exclusive' | '';
     /** Show favorite button */
     showFavorite: boolean;
     /** Is marked as favorite */
     isFavorite: boolean;
-    /** Show "Add to store" button */
+    /** Show "Enviar a cliente" button */
     showAddButton: boolean;
-    /** Badge text (e.g. "Nuevo", "Oferta") */
-    badge: string;
-    /** Badge color variant */
-    badgeType: 'success' | 'warning' | 'error' | 'info' | 'default';
-    /** Stock availability */
-    inStock: boolean;
-    /** Emitted when card is clicked */
-    dropiCardClick: EventEmitter<void>;
-    /** Emitted when favorite toggled */
-    dropiToggleFavorite: EventEmitter<boolean>;
-    /** Emitted when "Add" button clicked */
+    /** Emitted when card is clicked — matches Angular 'onProductClick' */
+    onProductClick: EventEmitter<void>;
+    /** Emitted when favorite toggled — matches Angular 'changeFavorite' */
+    changeFavorite: EventEmitter<boolean>;
+    /** Emitted when "Enviar a cliente" button clicked */
     dropiAddProduct: EventEmitter<void>;
+    /** Emitted when supplier name clicked */
+    dropiSupplierClick: EventEmitter<void>;
     private formatPrice;
+    private get inStock();
+    private getStockColor;
     render(): any;
 }

package/dist/types/components/dropi-card-section/dropi-card-section.d.ts

@@ -4,8 +4,8 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * Section card with title, description and a switch or dropdown control.
  */
 export declare class DropiCardSection {
-    /** Section title */
-    sectionTitle: string;
+    /** Section title — matches Angular 'title' */
+    title: string;
     /** Section description */
     description: string;
     /** Control type on the right */
@@ -14,9 +14,9 @@ export declare class DropiCardSection {
     type: 'medium' | 'important';
     /** Switch checked state */
     isChecked: boolean;
-    /** Emitted when switch changes. e.detail = new boolean value */
-    dropiChange: EventEmitter<boolean>;
+    /** Emitted when switch changes */
+    onChange: EventEmitter<boolean>;
     /** Emitted when dropdown icon is clicked */
-    dropiClick: EventEmitter<void>;
+    onClick: EventEmitter<void>;
     render(): any;
 }

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

@@ -1,40 +1,44 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-/**
- * @component dropi-carousel
- * Image/content carousel with navigation arrows, dots pagination,
- * autoplay, and optional thumbnails.
- */
 export declare class DropiCarousel {
-    /** Array of image URLs or JSON string */
-    images: string[] | string;
-    /** Alt text prefix for images */
-    altPrefix: string;
+    el: HTMLElement;
+    /** Items to display (Array of URLs or objects) */
+    value: any[] | string;
+    /** Active page index */
+    page: number;
+    /** Number of items visible per page */
+    numVisible: number;
+    /** Number of items to scroll per click */
+    numScroll: number;
+    /** Orientation of the carousel */
+    orientation: 'horizontal' | 'vertical';
     /** Show navigation arrows */
-    showArrows: boolean;
+    showNavigators: boolean;
     /** Show dot indicators */
-    showDots: boolean;
-    /** Show thumbnail strip */
-    showThumbs: boolean;
+    showIndicators: boolean;
     /** Autoplay interval in ms (0 = disabled) */
-    autoplay: number;
-    /** Active index (controlled) */
-    activeIndex: number;
-    /** Object-fit for images */
-    objectFit: 'cover' | 'contain';
-    private parsedImages;
-    private current;
+    autoplayInterval: number;
+    /** Infinite scrolling */
+    circular: boolean;
+    private parsedValue;
+    private internalPage;
+    private isAnimating;
+    private totalPages;
+    private itemsContainer;
     private timer;
-    /** Emitted when slide changes. e.detail = new index */
-    dropiSlideChange: EventEmitter<number>;
-    imagesChanged(val: string[] | string): void;
-    activeIndexChanged(val: number): void;
+    pageChange: EventEmitter<number>;
+    onPage: EventEmitter<any>;
+    handleValue(val: any[] | string): void;
+    handlePage(val: number): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    private onResize;
     private startAutoplay;
     private stopAutoplay;
-    private go;
-    private prev;
-    private next;
+    private updateTotalPages;
+    private updateTransform;
+    private navForward;
+    private navBackward;
+    private onDotClick;
     render(): any;
 }

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

@@ -10,7 +10,7 @@ export declare class DropiCheckbox {
     /** Whether the checkbox is disabled */
     disabled: boolean;
     /** Emitted when the checked state changes */
-    dropiChange: EventEmitter<boolean>;
+    onChange: EventEmitter<boolean>;
     private changeState;
     render(): any;
 }

package/dist/types/components/dropi-checkbox-selection-list/dropi-checkbox-selection-list.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export interface CheckboxOption {
     id: string | number;
-    name: string;
+    label: string;
     icon?: string;
     [key: string]: any;
 }
@@ -22,13 +22,15 @@ export declare class DropiCheckboxSelectionList {
     notFoundMessage: string;
     /** Allow multiple selection */
     multiSelect: boolean;
+    /** Debounce delay in ms for search input (matches Angular `searchDelay`) */
+    searchDelay: number;
     private filterText;
     private selected;
     private parsedOptions;
-    /** Emitted when selection changes. e.detail = selected option ids */
-    dropiCheckedValues: EventEmitter<(string | number)[]>;
-    /** Emitted on search input. e.detail = search text */
-    dropiSearch: EventEmitter<string>;
+    /** Emitted when selection changes — matches Angular 'checkedValues' */
+    checkedValues: EventEmitter<(string | number)[]>;
+    /** Emitted on search — matches Angular 'onSearch' */
+    onSearch: EventEmitter<string>;
     optionsChanged(val: CheckboxOption[] | string): void;
     componentWillLoad(): void;
     private get filtered();

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export type ChipStyle = 'filters' | 'fill';
+export type ChipStyle = 'filtrers' | 'fill';
 export type ChipType = 'icon' | 'text' | 'avatar';
 /**
  * @component dropi-chips
@@ -7,8 +7,8 @@ export type ChipType = 'icon' | 'text' | 'avatar';
  * Use <slot> for the chip label text.
  */
 export declare class DropiChips {
-    /** Visual style */
-    chipStyle: ChipStyle;
+    /** Visual style (named customStyle to avoid conflict with HTMLElement.style) */
+    customStyle: ChipStyle;
     /** Content type */
     type: ChipType;
     /** Avatar image URL (when type = 'avatar') */
@@ -18,6 +18,6 @@ export declare class DropiChips {
     /** Icon name (when type = 'icon') */
     icon: string;
     /** Emitted when the close icon is clicked */
-    dropiClose: EventEmitter<void>;
+    onClose: EventEmitter<void>;
     render(): any;
 }

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

@@ -29,11 +29,13 @@ export declare class DropiCitySelector {
     /** Disable the selector */
     disabled: boolean;
     /** Emitted when selection changes. Detail = selected values array. */
-    dropiCityChange: EventEmitter<(string | number)[]>;
+    selectedCitiesChange: EventEmitter<(string | number)[]>;
     private isOpen;
     private selected;
     private parsedOptions;
     private searchTerm;
+    el: HTMLElement;
+    handleDocClick(e: MouseEvent): void;
     optionsChanged(val: CityGroup[] | string): void;
     selectedChanged(val: (string | number)[] | string): void;
     componentWillLoad(): void;

package/dist/types/components/dropi-color-picker/dropi-color-picker.d.ts

@@ -1,31 +1,56 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-/**
- * @component dropi-color-picker
- * Color picker with hex input, opacity slider, and preset swatches.
- */
 export declare class DropiColorPicker {
-    /** Current color value (hex string) */
-    value: string;
-    /** Show opacity slider */
-    showOpacity: boolean;
-    /** Opacity value 0–100 */
-    opacity: number;
-    /** Label */
-    label: string;
-    /** Disabled */
-    disabled: boolean;
-    /** Show preset swatches */
-    showPresets: boolean;
-    private open;
-    private hexInput;
-    /** Emitted when color changes. e.detail = hex string */
-    dropiColorChange: EventEmitter<string>;
-    /** Emitted when opacity changes. e.detail = 0-100 */
-    dropiOpacityChange: EventEmitter<number>;
+    el: HTMLElement;
+    currentColor: string;
+    position: 'top' | 'bottom' | 'left' | 'right';
+    colorChange: EventEmitter<string>;
+    private color;
+    private hue;
+    private saturation;
+    private currentVal;
+    private opacity;
+    private showEdit;
+    private isDragging;
+    private isHueDragging;
+    private isOpacityDragging;
+    private colorCanvas;
+    private hueCanvas;
+    private opacityCanvas;
+    onValueChange(newValue: string): void;
     componentWillLoad(): void;
-    private selectColor;
-    private handleHexInput;
-    private handleOpacity;
-    private handleNativeColor;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    onMouseMove(event: MouseEvent): void;
+    onMouseUp(): void;
+    handleClickOutside(event: MouseEvent): void;
+    drawColorCanvas(): void;
+    drawHueCanvas(): void;
+    drawOpacityCanvas(): void;
+    updateColor(): void;
+    hsvToRgb(h: number, s: number, v: number): {
+        r: number;
+        g: number;
+        b: number;
+    };
+    rgbToHex(red: number, green: number, black: number, opacity?: number): string;
+    syncFromHex(): void;
+    onHexInputChange(event: Event): void;
+    rgbToHsv(r: number, g: number, b: number, a?: number): {
+        h: number;
+        s: number;
+        v: number;
+        a: number;
+    };
+    getCanvasPosition(canvas: HTMLCanvasElement, event: MouseEvent): {
+        x: number;
+        y: number;
+    };
+    onColorMouseDown(event: MouseEvent): void;
+    onHueMouseDown(event: MouseEvent): void;
+    onOpacityMouseDown(event: MouseEvent): void;
+    updateColorFromPosition(event: MouseEvent): void;
+    updateHueFromPosition(event: MouseEvent): void;
+    updateOpacityFromPosition(event: MouseEvent): void;
+    showEditor(): void;
     render(): any;
 }

package/dist/types/components/dropi-country-flags/dropi-country-flags.d.ts

@@ -9,7 +9,7 @@ export declare class DropiCountryFlags {
     /** ISO 3166-1 alpha-2 country code (e.g. "CO", "US") */
     country: string;
     /** Visual style: circle uses circle-flags CDN, rectangle/flat uses flagsapi */
-    flagStyle: 'circle' | 'rectangle' | 'flat';
+    customStyle: 'circle' | 'rectangle' | 'flat';
     /** Width in px */
     width: string;
     /** Height in px */

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

@@ -17,20 +17,31 @@ export declare class DropiCountrySelector {
     /** Placeholder when nothing is selected */
     placeholder: string;
     /** Pre-selected country code (ISO 3166-1 alpha-2) */
-    value: string;
+    currentSelection: string;
     /** Whether the selector is disabled */
     disabled: boolean;
     /** Show asterisk for required field */
     showObligatory: boolean;
     /** Show error border */
-    invalid: boolean;
+    hasError: boolean;
+    /** Helper text below the select */
+    textHelper: string;
+    /** Search term for filtering (matches Angular `searchTerm`) */
+    searchTerm: string;
+    /**
+     * Convenience object prop — matches Angular `selectProperties: SelectProperties`.
+     * When provided, its non-null fields override individual props.
+     */
+    selectProperties: any;
     /** Emitted when a country is selected. Detail is the CountryItem. */
-    dropiCountryChange: EventEmitter<CountryItem>;
+    onChangeSelect: EventEmitter<CountryItem>;
     private isOpen;
     private selected;
-    private searchTerm;
+    el: HTMLElement;
+    handleDocClick(e: MouseEvent): void;
     private searchInputRef?;
-    valueChanged(val: string): void;
+    currentSelectionChanged(val: string): void;
+    selectPropertiesChanged(val: any): void;
     componentWillLoad(): void;
     private get filtered();
     private open;

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

@@ -5,31 +5,39 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * Emits ISO date strings (YYYY-MM-DD).
  */
 export declare class DropiDatePicker {
-    /** Selected date (ISO string, single mode) */
-    value: string;
+    /** Selected date (ISO string, single mode) - matches Angular 'selectedDate' */
+    selectedDate: string;
     /** Range start date (ISO string, range mode) */
     startDate: string;
     /** Range end date (ISO string, range mode) */
     endDate: string;
-    /** Enable range selection */
-    range: boolean;
+    /** Enable range selection - matches Angular selectionMode */
+    selectionMode: 'single' | 'range';
     /** Min selectable date (ISO string) */
     minDate: string;
     /** Max selectable date (ISO string) */
     maxDate: string;
     /** Label */
-    label: string;
+    label: string | null;
     /** Placeholder */
     placeholder: string;
     /** Disabled */
     disabled: boolean;
+    /** Is invalid state - matches Angular */
+    isInvalid: boolean;
+    /** Loading state - matches Angular */
+    loading: boolean;
     private open;
     private viewYear;
     private viewMonth;
     private hoverDate;
-    /** Emitted when single date selected. e.detail = ISO date */
-    dropiDateChange: EventEmitter<string>;
-    /** Emitted when range selected. e.detail = { start, end } */
+    el: HTMLElement;
+    handleDocClick(e: MouseEvent): void;
+    /** Emitted when date selected — matches Angular 'onChangeDate' */
+    onChangeDate: EventEmitter<string>;
+    /** Emitted when panel closes — matches Angular 'onClosePanel' */
+    onClosePanel: EventEmitter<void>;
+    /** Emitted when range selected */
     dropiRangeChange: EventEmitter<{
         start: string;
         end: string;

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

@@ -26,9 +26,9 @@ export declare class DropiDatePickerRange {
     /** Hide "Hoy" shortcut */
     hideTodayRangeShortcut: boolean;
     /** Emitted when start date changes */
-    dropiStartDateChange: EventEmitter<string>;
+    startDateChange: EventEmitter<string>;
     /** Emitted when end date changes */
-    dropiEndDateChange: EventEmitter<string>;
+    endDateChange: EventEmitter<string>;
     /** Emitted with full range when both dates are set */
     dropiRangeChange: EventEmitter<DateRange>;
     private start;