@dropi/ui 0.1.18 → 0.1.20

package/dist/esm/dropi-youtube-lazy-video.entry.js

@@ -0,0 +1,31 @@
+import { r as registerInstance, h } from './index-Tbza12Gt.js';
+
+const dropiYoutubeLazyVideoCss = () => `:host{display:block;width:100%}.video-wrapper{position:relative;width:100%;padding-bottom:56.25%;background:#000;overflow:hidden;border-radius:12px}.video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.thumbnail{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden}.thumbnail img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease}.thumbnail:hover img{transform:scale(1.05)}.play-button{position:absolute;color:white;border:none;border-radius:50%;width:70px;height:70px;cursor:pointer;transition:background 0.3s ease;background:rgba(14, 17, 26, 0.6);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}.play-button:hover{background:rgba(0, 0, 0, 0.8)}@media screen and (max-width: 768px){.play-button{width:40px;height:40px}}`;
+
+const DropiYoutubeLazyVideo = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** YouTube video ID */
+    videoId = '';
+    /** Local asset thumbnail path (without /assets/images/ prefix and .png extension) */
+    thumbnailSrc = '';
+    /** Video title for iframe accessibility */
+    videoTitle = '';
+    isPlaying = false;
+    get thumbnail() {
+        if (this.thumbnailSrc) {
+            return `/assets/images/${this.thumbnailSrc}.png`;
+        }
+        return `https://img.youtube.com/vi/${this.videoId}/hqdefault.jpg`;
+    }
+    get videoUrl() {
+        return `https://www.youtube.com/embed/${this.videoId}?autoplay=1&rel=0&modestbranding=1`;
+    }
+    render() {
+        return (h("div", { key: 'df20b4b0098b3283f266b012d56d3a0377a46420', class: `video-wrapper${this.isPlaying ? ' playing' : ''}` }, !this.isPlaying && (h("div", { key: '43b76b1e6d85da93b97ec0441331b82d567d2abe', class: "thumbnail", onClick: () => { this.isPlaying = true; } }, h("img", { key: '3719d3c151b9242f32b313047ccee4fc9b83f990', src: this.thumbnail, alt: `Video thumbnail ${this.videoId}` }), h("button", { key: '81c578b338b65168920cf38fb4dbc4ef82e6a1a7', class: "play-button", "aria-label": "Reproducir video" }, h("dropi-icon", { key: 'ce505abe0eae58cf7d24eda6527168267e3412ea', name: "Play", width: "17px", height: "21px", color: "Neutral-White" })))), this.isPlaying && (h("iframe", { key: 'bf25278bda2376f3de5776057223a139e8112d33', src: this.videoUrl, title: this.videoTitle, frameborder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, loading: "lazy" }))));
+    }
+};
+DropiYoutubeLazyVideo.style = dropiYoutubeLazyVideoCss();
+
+export { DropiYoutubeLazyVideo as dropi_youtube_lazy_video };

package/dist/esm/{index-Twbb5MNM.js → index-Tbza12Gt.js}

@@ -488,9 +488,9 @@ var createEvent = (ref, name, flags) => {
   return {
     emit: (detail) => {
       return emitEvent(elm, name, {
-        bubbles: true,
-        composed: true,
-        cancelable: true,
+        bubbles: !!(flags & 4 /* Bubbles */),
+        composed: !!(flags & 2 /* Composed */),
+        cancelable: !!(flags & 1 /* Cancellable */),
         detail
       });
     }

package/dist/esm/loader.js

@@ -1,10 +1,10 @@
-import { g as globalScripts, b as bootstrapLazy } from './index-Twbb5MNM.js';
-export { s as setNonce } from './index-Twbb5MNM.js';
+import { g as globalScripts, b as bootstrapLazy } from './index-Tbza12Gt.js';
+export { s as setNonce } from './index-Tbza12Gt.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["dropi-icon",[[513,"dropi-icon",{"name":[1],"width":[1],"height":[1],"color":[1]},null,{"color":[{"colorChanged":0}]}]]],["dropi-empty-state",[[769,"dropi-empty-state",{"header":[1],"description":[1],"imageUrl":[1,"image-url"],"imageAlt":[1,"image-alt"],"actionLabel":[1,"action-label"],"secondaryLabel":[1,"secondary-label"]}]]],["dropi-accordion",[[769,"dropi-accordion",{"header":[1],"open":[1540],"disabled":[4],"preIcon":[1,"pre-icon"],"contentHeight":[32]},null,{"open":[{"openChanged":0}]}]]],["dropi-input",[[577,"dropi-input",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"fixedLabel":[4,"fixed-label"],"inputMode":[1,"input-mode"],"passwordInput":[4,"password-input"],"moneyFormat":[4,"money-format"],"thousandSeparator":[4,"thousand-separator"],"onlyNumbers":[4,"only-numbers"],"allowDecimals":[4,"allow-decimals"],"onlyLetters":[4,"only-letters"],"icon":[1],"iconColor":[1,"icon-color"],"invalid":[4],"helperText":[1,"helper-text"],"showHelperOnlyOnError":[4,"show-helper-only-on-error"],"showPassword":[32],"touched":[32]},null,{"value":[{"valueChanged":0}],"disabled":[{"disabledChanged":0}]}]]],["dropi-modal",[[769,"dropi-modal",{"visible":[1540],"header":[1],"showCloseIcon":[4,"show-close-icon"],"dismissable":[4],"closeOnEscape":[4,"close-on-escape"],"modal":[4],"showHeader":[4,"show-header"],"position":[1],"size":[1],"isOpen":[32],"isClosing":[32],"mounted":[32],"hide":[64],"show":[64]},null,{"visible":[{"visibleChanged":0}]}]]],["dropi-paginator",[[513,"dropi-paginator",{"total":[2],"pageSize":[1026,"page-size"],"page":[1538],"maxPages":[2,"max-pages"],"showPageSizeSelector":[4,"show-page-size-selector"],"pageSizeOptions":[1,"page-size-options"],"parsedOptions":[32]},null,{"pageSizeOptions":[{"optionsChanged":0}]}]]],["dropi-select",[[577,"dropi-select",{"label":[1],"placeholder":[1],"options":[1040],"name":[1],"disabled":[516],"invalid":[4],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"showObligatory":[4,"show-obligatory"],"searchEnabled":[4,"search-enabled"],"multiSelect":[4,"multi-select"],"dropdownType":[4,"dropdown-type"],"showCountryFlags":[4,"show-country-flags"],"radioOptions":[4,"radio-options"],"placeHolderSearch":[1,"place-holder-search"],"preIcon":[1,"pre-icon"],"defaultSelectedId":[1032,"default-selected-id"],"value":[1040],"isOpen":[32],"selectedOption":[32],"multiSelected":[32],"filteredOptions":[32],"searchTerm":[32],"dropdownStyle":[32],"setById":[64],"setByLabel":[64],"clearSelection":[64],"resetMultiSelect":[64]},[[4,"click","handleOutsideClick"]],{"options":[{"optionsChanged":0}],"defaultSelectedId":[{"defaultChanged":0}],"value":[{"valueChanged":0}]}]]],["dropi-tabs",[[513,"dropi-tabs",{"tabs":[1],"activeTab":[1544,"active-tab"],"showIcon":[4,"show-icon"],"parsedTabs":[32]},null,{"tabs":[{"tabsChanged":0}]}]]],["dropi-tag",[[513,"dropi-tag",{"type":[1],"state":[1],"showIcon":[4,"show-icon"],"icon":[1],"text":[1]},null,{"type":[{"propsChanged":0}],"state":[{"propsChanged":0}]}]]],["dropi-text-area",[[577,"dropi-text-area",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"minlength":[2],"rows":[2],"resize":[1],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"helperText":[1,"helper-text"],"invalid":[4],"touched":[32]},null,{"value":[{"valueChanged":0}]}]]],["dropi-toast",[[513,"dropi-toast",{"position":[1],"life":[2],"items":[32],"show":[64],"clear":[64]}]]],["dropi-badge",[[513,"dropi-badge",{"state":[1]}]]],["dropi-checkbox",[[577,"dropi-checkbox",{"checked":[1540],"disabled":[516]}]]],["dropi-radio-button",[[577,"dropi-radio-button",{"label":[1],"name":[1],"inputId":[1,"input-id"],"checked":[1540],"resetTrigger":[4,"reset-trigger"]},null,{"resetTrigger":[{"onResetTrigger":0}]}]]],["dropi-skeleton",[[513,"dropi-skeleton",{"variant":[1],"width":[1],"height":[1],"borderRadius":[1,"border-radius"],"lines":[2]}]]],["dropi-switch",[[577,"dropi-switch",{"isChecked":[1540,"is-checked"],"disabled":[516]}]]],["dropi-tooltip",[[769,"dropi-tooltip",{"text":[1],"position":[1],"maxWidth":[1,"max-width"],"showDelay":[2,"show-delay"],"visible":[32]}]]],["dropi-button",[[769,"dropi-button",{"type":[1],"severity":[1],"size":[1],"state":[1],"preIcon":[1,"pre-icon"],"postIcon":[1,"post-icon"],"text":[1]}]]]], options);
+  return bootstrapLazy(JSON.parse("[[\"dropi-icon\",[[513,\"dropi-icon\",{\"name\":[1],\"width\":[1],\"height\":[1],\"color\":[1]},null,{\"color\":[{\"colorChanged\":0}]}]]],[\"dropi-alert-modal\",[[513,\"dropi-alert-modal\",{\"visible\":[1540],\"type\":[1],\"alertTitle\":[1,\"alert-title\"],\"message\":[1],\"primaryButton\":[1,\"primary-button\"],\"secondaryButton\":[1,\"secondary-button\"],\"loading\":[4],\"closable\":[4],\"displayButtons\":[4,\"display-buttons\"],\"loadingTitle\":[1,\"loading-title\"],\"loadingMessage\":[1,\"loading-message\"],\"show\":[64],\"hide\":[64]}]]],[\"dropi-card-section\",[[513,\"dropi-card-section\",{\"sectionTitle\":[1,\"section-title\"],\"description\":[1],\"typeElement\":[1,\"type-element\"],\"type\":[1],\"isChecked\":[1028,\"is-checked\"]}]]],[\"dropi-checkbox-selection-list\",[[513,\"dropi-checkbox-selection-list\",{\"options\":[1],\"showFilter\":[4,\"show-filter\"],\"filterPlaceholder\":[1,\"filter-placeholder\"],\"showNotFound\":[4,\"show-not-found\"],\"notFoundMessage\":[1,\"not-found-message\"],\"multiSelect\":[4,\"multi-select\"],\"filterText\":[32],\"selected\":[32],\"parsedOptions\":[32]},null,{\"options\":[{\"optionsChanged\":0}]}]]],[\"dropi-empty-state\",[[769,\"dropi-empty-state\",{\"header\":[1],\"description\":[1],\"imageUrl\":[1,\"image-url\"],\"imageAlt\":[1,\"image-alt\"],\"actionLabel\":[1,\"action-label\"],\"iconState\":[1,\"icon-state\"],\"secondaryLabel\":[1,\"secondary-label\"],\"actionSeverity\":[1,\"action-severity\"]}]]],[\"dropi-languages-selector\",[[513,\"dropi-languages-selector\",{\"languages\":[1],\"selectedLang\":[1025,\"selected-lang\"],\"isOpen\":[32],\"parsedLanguages\":[32],\"currentLang\":[32]},null,{\"languages\":[{\"languagesChanged\":0}],\"selectedLang\":[{\"selectedLangChanged\":0}]}]]],[\"dropi-search\",[[513,\"dropi-search\",{\"placeholder\":[1],\"value\":[1025],\"maxlength\":[2],\"showClear\":[4,\"show-clear\"],\"options\":[1],\"labelKey\":[1,\"label-key\"],\"multiSelect\":[4,\"multi-select\"],\"dropdownHeight\":[1,\"dropdown-height\"],\"label\":[1],\"open\":[32],\"selected\":[32],\"parsedOptions\":[32]},null,{\"options\":[{\"optionsChanged\":0}]}]]],[\"dropi-table\",[[513,\"dropi-table\",{\"columns\":[1],\"rows\":[1],\"selectable\":[4],\"loading\":[4],\"emptyMessage\":[1,\"empty-message\"],\"striped\":[4],\"parsedColumns\":[32],\"parsedRows\":[32],\"sortKey\":[32],\"sortDir\":[32],\"selectedKeys\":[32]},null,{\"columns\":[{\"columnsChanged\":0}],\"rows\":[{\"rowsChanged\":0}]}]]],[\"dropi-accordion\",[[769,\"dropi-accordion\",{\"header\":[1],\"open\":[1540],\"disabled\":[4],\"preIcon\":[1,\"pre-icon\"],\"contentHeight\":[32]},null,{\"open\":[{\"openChanged\":0}]}]]],[\"dropi-alert\",[[513,\"dropi-alert\",{\"message\":[1],\"type\":[1],\"state\":[1],\"dismissable\":[4],\"showButton\":[4,\"show-button\"],\"buttonText\":[1,\"button-text\"],\"anchorText\":[1,\"anchor-text\"],\"anchorUrl\":[1,\"anchor-url\"],\"showAlert\":[1028,\"show-alert\"]}]]],[\"dropi-banner-external\",[[513,\"dropi-banner-external\",{\"imageUrl\":[1,\"image-url\"],\"link\":[1],\"alt\":[1],\"backgroundColor\":[1,\"background-color\"],\"closed\":[32]}]]],[\"dropi-breadcrumb\",[[513,\"dropi-breadcrumb\",{\"items\":[1],\"homeRoute\":[1,\"home-route\"],\"homeIconName\":[1,\"home-icon-name\"],\"lastItemClickable\":[4,\"last-item-clickable\"]}]]],[\"dropi-card-checkbox\",[[513,\"dropi-card-checkbox\",{\"type\":[1],\"checked\":[1028],\"cardTitle\":[1,\"card-title\"],\"description\":[1],\"extraInfo\":[1,\"extra-info\"],\"extraInfoDescription\":[1,\"extra-info-description\"],\"disabled\":[4]}]]],[\"dropi-card-product\",[[513,\"dropi-card-product\",{\"image\":[1],\"productName\":[1,\"product-name\"],\"price\":[2],\"currency\":[1],\"supplier\":[1],\"category\":[1],\"showFavorite\":[4,\"show-favorite\"],\"isFavorite\":[1028,\"is-favorite\"],\"showAddButton\":[4,\"show-add-button\"],\"badge\":[1],\"badgeType\":[1,\"badge-type\"],\"inStock\":[4,\"in-stock\"]}]]],[\"dropi-carousel\",[[513,\"dropi-carousel\",{\"images\":[1],\"altPrefix\":[1,\"alt-prefix\"],\"showArrows\":[4,\"show-arrows\"],\"showDots\":[4,\"show-dots\"],\"showThumbs\":[4,\"show-thumbs\"],\"autoplay\":[2],\"activeIndex\":[1026,\"active-index\"],\"objectFit\":[1,\"object-fit\"],\"parsedImages\":[32],\"current\":[32]},null,{\"images\":[{\"imagesChanged\":0}],\"activeIndex\":[{\"activeIndexChanged\":0}]}]]],[\"dropi-chips\",[[769,\"dropi-chips\",{\"chipStyle\":[1,\"chip-style\"],\"type\":[1],\"urlImg\":[1,\"url-img\"],\"showIcon\":[4,\"show-icon\"],\"icon\":[1]}]]],[\"dropi-city-selector\",[[513,\"dropi-city-selector\",{\"options\":[1],\"selectedCities\":[1025,\"selected-cities\"],\"placeholder\":[1],\"disabled\":[4],\"isOpen\":[32],\"selected\":[32],\"parsedOptions\":[32],\"searchTerm\":[32]},null,{\"options\":[{\"optionsChanged\":0}],\"selectedCities\":[{\"selectedChanged\":0}]}]]],[\"dropi-color-picker\",[[513,\"dropi-color-picker\",{\"value\":[1025],\"showOpacity\":[4,\"show-opacity\"],\"opacity\":[1026],\"label\":[1],\"disabled\":[4],\"showPresets\":[4,\"show-presets\"],\"open\":[32],\"hexInput\":[32]}]]],[\"dropi-country-selector\",[[513,\"dropi-country-selector\",{\"label\":[1],\"placeholder\":[1],\"value\":[1025],\"disabled\":[4],\"showObligatory\":[4,\"show-obligatory\"],\"invalid\":[4],\"isOpen\":[32],\"selected\":[32],\"searchTerm\":[32]},null,{\"value\":[{\"valueChanged\":0}]}]]],[\"dropi-date-picker\",[[513,\"dropi-date-picker\",{\"value\":[1025],\"startDate\":[1025,\"start-date\"],\"endDate\":[1025,\"end-date\"],\"range\":[4],\"minDate\":[1,\"min-date\"],\"maxDate\":[1,\"max-date\"],\"label\":[1],\"placeholder\":[1],\"disabled\":[4],\"open\":[32],\"viewYear\":[32],\"viewMonth\":[32],\"hoverDate\":[32]}]]],[\"dropi-drawer\",[[769,\"dropi-drawer\",{\"open\":[1028],\"position\":[1],\"drawerTitle\":[1,\"drawer-title\"],\"width\":[1],\"height\":[1],\"closeOnBackdrop\":[4,\"close-on-backdrop\"]},null,{\"open\":[{\"openChanged\":0}]}]]],[\"dropi-dropdown\",[[513,\"dropi-dropdown\",{\"options\":[1],\"valueModel\":[1,\"value-model\"],\"imageModel\":[1,\"image-model\"],\"height\":[1],\"selected\":[32],\"parsedOptions\":[32]},null,{\"options\":[{\"optionsChanged\":0}]}]]],[\"dropi-favorite-button\",[[513,\"dropi-favorite-button\",{\"isFavorite\":[1028,\"is-favorite\"],\"hovered\":[32]}]]],[\"dropi-file-upload\",[[513,\"dropi-file-upload\",{\"accept\":[1],\"multiple\":[4],\"maxSizeMb\":[2,\"max-size-mb\"],\"disabled\":[4],\"label\":[1],\"helperText\":[1,\"helper-text\"],\"dragging\":[32],\"errors\":[32]}]]],[\"dropi-file-upload-progress-bar\",[[513,\"dropi-file-upload-progress-bar\",{\"fileName\":[1,\"file-name\"],\"fileSize\":[1,\"file-size\"],\"progress\":[2],\"status\":[1],\"errorMessage\":[1,\"error-message\"],\"showCancel\":[4,\"show-cancel\"]}]]],[\"dropi-ilustration-icon\",[[513,\"dropi-ilustration-icon\",{\"type\":[1],\"state\":[1],\"stateInsignia\":[1,\"state-insignia\"],\"tagProduct\":[4,\"tag-product\"]}]]],[\"dropi-image-miniature\",[[513,\"dropi-image-miniature\",{\"label\":[1],\"images\":[1],\"width\":[1],\"height\":[1]}]]],[\"dropi-image-overlay\",[[513,\"dropi-image-overlay\",{\"visible\":[1028],\"images\":[1],\"activeIndex\":[1026,\"active-index\"],\"current\":[32],\"parsedImages\":[32]},null,{\"images\":[{\"imagesChanged\":0}],\"activeIndex\":[{\"indexChanged\":0}],\"visible\":[{\"visibleChanged\":0}]}]]],[\"dropi-input\",[[577,\"dropi-input\",{\"inputId\":[1,\"input-id\"],\"name\":[1],\"label\":[1],\"placeholder\":[1],\"value\":[1025],\"maxlength\":[2],\"disabled\":[516],\"required\":[516],\"showAsterisk\":[4,\"show-asterisk\"],\"fixedLabel\":[4,\"fixed-label\"],\"inputMode\":[1,\"input-mode\"],\"passwordInput\":[4,\"password-input\"],\"moneyFormat\":[4,\"money-format\"],\"thousandSeparator\":[4,\"thousand-separator\"],\"onlyNumbers\":[4,\"only-numbers\"],\"allowDecimals\":[4,\"allow-decimals\"],\"onlyLetters\":[4,\"only-letters\"],\"icon\":[1],\"iconColor\":[1,\"icon-color\"],\"invalid\":[4],\"helperText\":[1,\"helper-text\"],\"showHelperOnlyOnError\":[4,\"show-helper-only-on-error\"],\"showPassword\":[32],\"touched\":[32]},null,{\"value\":[{\"valueChanged\":0}],\"disabled\":[{\"disabledChanged\":0}]}]]],[\"dropi-media-player\",[[513,\"dropi-media-player\",{\"src\":[1],\"mediaType\":[1,\"media-type\"],\"poster\":[1],\"autoplay\":[4],\"loop\":[4],\"initialVolume\":[2,\"initial-volume\"],\"mediaTitle\":[1,\"media-title\"],\"playing\":[32],\"currentTime\":[32],\"duration\":[32],\"volume\":[32],\"muted\":[32],\"loading\":[32]}]]],[\"dropi-navbar\",[[513,\"dropi-navbar\",{\"logoUrl\":[1,\"logo-url\"],\"logoAlt\":[1,\"logo-alt\"],\"items\":[1],\"activeId\":[1,\"active-id\"],\"userName\":[1,\"user-name\"],\"userAvatar\":[1,\"user-avatar\"],\"notifications\":[2],\"showMenuToggle\":[4,\"show-menu-toggle\"]}]]],[\"dropi-paginator\",[[513,\"dropi-paginator\",{\"total\":[2],\"pageSize\":[1026,\"page-size\"],\"page\":[1538],\"maxPages\":[2,\"max-pages\"],\"noLabels\":[4,\"no-labels\"],\"showPageSizeSelector\":[4,\"show-page-size-selector\"],\"pageSizeOptions\":[1,\"page-size-options\"],\"parsedOptions\":[32]},null,{\"pageSizeOptions\":[{\"optionsChanged\":0}]}]]],[\"dropi-phone-input\",[[513,\"dropi-phone-input\",{\"codArea\":[1025,\"cod-area\"],\"value\":[1025],\"placeholder\":[1],\"disabled\":[4],\"isValid\":[4,\"is-valid\"],\"errorMessage\":[1,\"error-message\"],\"label\":[1],\"open\":[32],\"search\":[32]},null,{\"codArea\":[{\"codAreaChanged\":0}]}]]],[\"dropi-radio-selection-list\",[[513,\"dropi-radio-selection-list\",{\"options\":[1],\"selectedOption\":[1032,\"selected-option\"],\"showFilter\":[4,\"show-filter\"],\"filterPlaceholder\":[1,\"filter-placeholder\"],\"typeLayout\":[1,\"type-layout\"],\"filterText\":[32],\"parsedOptions\":[32]},null,{\"options\":[{\"optionsChanged\":0}]}]]],[\"dropi-select\",[[577,\"dropi-select\",{\"label\":[1],\"placeholder\":[1],\"options\":[1040],\"name\":[1],\"disabled\":[516],\"invalid\":[4],\"errorText\":[1,\"error-text\"],\"helperText\":[1,\"helper-text\"],\"showObligatory\":[4,\"show-obligatory\"],\"searchEnabled\":[4,\"search-enabled\"],\"multiSelect\":[4,\"multi-select\"],\"dropdownType\":[4,\"dropdown-type\"],\"showCountryFlags\":[4,\"show-country-flags\"],\"radioOptions\":[4,\"radio-options\"],\"placeHolderSearch\":[1,\"place-holder-search\"],\"preIcon\":[1,\"pre-icon\"],\"defaultSelectedId\":[1032,\"default-selected-id\"],\"value\":[1040],\"isOpen\":[32],\"selectedOption\":[32],\"multiSelected\":[32],\"filteredOptions\":[32],\"searchTerm\":[32],\"dropdownStyle\":[32],\"setById\":[64],\"setByLabel\":[64],\"clearSelection\":[64],\"resetMultiSelect\":[64]},[[4,\"click\",\"handleOutsideClick\"]],{\"options\":[{\"optionsChanged\":0}],\"defaultSelectedId\":[{\"defaultChanged\":0}],\"value\":[{\"valueChanged\":0}]}]]],[\"dropi-sidebar\",[[769,\"dropi-sidebar\",{\"items\":[1],\"activeId\":[1,\"active-id\"],\"collapsed\":[1028],\"showToggle\":[4,\"show-toggle\"],\"logoUrl\":[1,\"logo-url\"],\"width\":[1]}]]],[\"dropi-steps\",[[513,\"dropi-steps\",{\"stepsCount\":[2,\"steps-count\"],\"showNumberOfStep\":[4,\"show-number-of-step\"],\"currentStep\":[2,\"current-step\"],\"stepLabels\":[1,\"step-labels\"]}]]],[\"dropi-tabs\",[[513,\"dropi-tabs\",{\"tabs\":[1],\"activeTab\":[1544,\"active-tab\"],\"showIcon\":[4,\"show-icon\"],\"parsedTabs\":[32]},null,{\"tabs\":[{\"tabsChanged\":0}]}]]],[\"dropi-tag\",[[513,\"dropi-tag\",{\"type\":[1],\"state\":[1],\"showIcon\":[4,\"show-icon\"],\"icon\":[1],\"text\":[1]},null,{\"type\":[{\"propsChanged\":0}],\"state\":[{\"propsChanged\":0}]}]]],[\"dropi-text-area\",[[577,\"dropi-text-area\",{\"inputId\":[1,\"input-id\"],\"name\":[1],\"label\":[1],\"placeholder\":[1],\"value\":[1025],\"maxlength\":[2],\"minlength\":[2],\"rows\":[2],\"resize\":[1],\"disabled\":[516],\"required\":[516],\"showAsterisk\":[4,\"show-asterisk\"],\"helperText\":[1,\"helper-text\"],\"invalid\":[4],\"touched\":[32]},null,{\"value\":[{\"valueChanged\":0}]}]]],[\"dropi-time-line\",[[513,\"dropi-time-line\",{\"steps\":[1]}]]],[\"dropi-toast\",[[513,\"dropi-toast\",{\"position\":[1],\"life\":[2],\"items\":[32],\"show\":[64],\"clear\":[64]}]]],[\"dropi-vertical-steps\",[[513,\"dropi-vertical-steps\",{\"steps\":[1],\"currentStep\":[2,\"current-step\"],\"clickable\":[4],\"showCheckIcon\":[4,\"show-check-icon\"]}]]],[\"dropi-youtube-lazy-video\",[[513,\"dropi-youtube-lazy-video\",{\"videoId\":[1,\"video-id\"],\"thumbnailSrc\":[1,\"thumbnail-src\"],\"videoTitle\":[1,\"video-title\"],\"isPlaying\":[32]}]]],[\"dropi-avatars\",[[513,\"dropi-avatars\",{\"image\":[1],\"alt\":[1],\"type\":[1],\"initials\":[1]}]]],[\"dropi-badge\",[[513,\"dropi-badge\",{\"state\":[1]}]]],[\"dropi-date-picker-range\",[[513,\"dropi-date-picker-range\",{\"startDate\":[1025,\"start-date\"],\"endDate\":[1025,\"end-date\"],\"showLabel\":[4,\"show-label\"],\"placeholder\":[1],\"loading\":[4],\"maxDaysRange\":[2,\"max-days-range\"],\"hideTodayRangeShortcut\":[4,\"hide-today-range-shortcut\"],\"start\":[32],\"end\":[32],\"activeRange\":[32],\"showWarning\":[32]},null,{\"startDate\":[{\"onStartPropChange\":0}],\"endDate\":[{\"onEndPropChange\":0}]}]]],[\"dropi-logo\",[[513,\"dropi-logo\",{\"urlLogo\":[1,\"url-logo\"],\"size\":[1],\"theme\":[1]}]]],[\"dropi-lottie-loader\",[[513,\"dropi-lottie-loader\",{\"visible\":[4],\"loadingAnimation\":[1,\"loading-animation\"],\"loaderTitle\":[1,\"loader-title\"],\"message\":[1]}]]],[\"dropi-otp-send-code\",[[513,\"dropi-otp-send-code\",{\"engine\":[1],\"labelContact\":[1,\"label-contact\"],\"showLabelContact\":[4,\"show-label-contact\"],\"errorMessage\":[1,\"error-message\"],\"digits\":[32],\"digitStates\":[32],\"countdown\":[32],\"canResend\":[32],\"error\":[32]}]]],[\"dropi-radio-button\",[[577,\"dropi-radio-button\",{\"label\":[1],\"name\":[1],\"inputId\":[1,\"input-id\"],\"checked\":[1540],\"resetTrigger\":[4,\"reset-trigger\"]},null,{\"resetTrigger\":[{\"onResetTrigger\":0}]}]]],[\"dropi-read-more\",[[513,\"dropi-read-more\",{\"text\":[1],\"maxWords\":[2,\"max-words\"],\"showSeeLess\":[4,\"show-see-less\"],\"expanded\":[32]}]]],[\"dropi-simple-stepper\",[[513,\"dropi-simple-stepper\",{\"stepsCount\":[2,\"steps-count\"],\"typeStep\":[1,\"type-step\"],\"currentStep\":[2,\"current-step\"],\"labelStepper\":[1,\"label-stepper\"],\"flowMode\":[1,\"flow-mode\"]}]]],[\"dropi-skeleton\",[[513,\"dropi-skeleton\",{\"variant\":[1],\"width\":[1],\"height\":[1],\"borderRadius\":[1,\"border-radius\"],\"lines\":[2]}]]],[\"dropi-tag-type-product\",[[513,\"dropi-tag-type-product\",{\"label\":[1]}]]],[\"dropi-tooltip\",[[769,\"dropi-tooltip\",{\"text\":[1],\"position\":[1],\"maxWidth\":[1,\"max-width\"],\"showDelay\":[2,\"show-delay\"],\"visible\":[32]}]]],[\"dropi-country-flags\",[[513,\"dropi-country-flags\",{\"country\":[1],\"flagStyle\":[1,\"flag-style\"],\"width\":[1],\"height\":[1]}]]],[\"dropi-modal\",[[769,\"dropi-modal\",{\"visible\":[1540],\"header\":[1],\"showCloseIcon\":[4,\"show-close-icon\"],\"dismissable\":[4],\"closeOnEscape\":[4,\"close-on-escape\"],\"modal\":[4],\"showHeader\":[4,\"show-header\"],\"position\":[1],\"size\":[1],\"isOpen\":[32],\"isClosing\":[32],\"mounted\":[32],\"hide\":[64],\"show\":[64]},null,{\"visible\":[{\"visibleChanged\":0}]}]]],[\"dropi-switch\",[[577,\"dropi-switch\",{\"isChecked\":[1540,\"is-checked\"],\"disabled\":[516]}]]],[\"dropi-button\",[[769,\"dropi-button\",{\"type\":[1],\"severity\":[1],\"size\":[1],\"state\":[1],\"fullWidth\":[516,\"full-width\"],\"preIcon\":[1,\"pre-icon\"],\"postIcon\":[1,\"post-icon\"],\"text\":[1]}]]],[\"dropi-checkbox\",[[577,\"dropi-checkbox\",{\"checked\":[1540],\"disabled\":[516]}]]]]"), options);
 };
 
 export { defineCustomElements };

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

@@ -0,0 +1,35 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type AlertState = 'success' | 'error' | 'warning' | 'info';
+export type AlertType = 'default' | 'flag';
+/**
+ * @component dropi-alert
+ * Alert banner with state variants (success/error/warning/info),
+ * optional action button, anchor link, and dismissable close icon.
+ */
+export declare class DropiAlert {
+    /** Alert message text (supports plain text) */
+    message: string;
+    /** Layout type: default (inline) | flag (accented left border) */
+    type: AlertType;
+    /** Semantic state */
+    state: AlertState;
+    /** Show the × close button */
+    dismissable: boolean;
+    /** Show action button */
+    showButton: boolean;
+    /** Action button label */
+    buttonText: string;
+    /** Anchor/link label */
+    anchorText: string;
+    /** Anchor href */
+    anchorUrl: string;
+    /** Whether the alert is visible */
+    showAlert: boolean;
+    /** Emitted when the alert is dismissed */
+    dropiClose: EventEmitter<void>;
+    /** Emitted when the action button is clicked */
+    dropiButtonClick: EventEmitter<void>;
+    /** Emitted when the anchor link is clicked */
+    dropiLinkClick: EventEmitter<void>;
+    render(): any;
+}

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

@@ -0,0 +1,48 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type AlertModalType = 'question' | 'warning' | 'success' | 'error' | 'loading';
+/**
+ * @component dropi-alert-modal
+ * Confirmation/alert modal with Lottie animation, title, message and action buttons.
+ * Uses dropi-modal internally.
+ *
+ * @example
+ * const el = document.querySelector('dropi-alert-modal');
+ * el.visible = true;
+ */
+export declare class DropiAlertModal {
+    /** Controls visibility */
+    visible: boolean;
+    /** Modal type — determines Lottie animation */
+    type: AlertModalType;
+    /** Bold title */
+    alertTitle: string;
+    /** Body message */
+    message: string;
+    /** Primary button label */
+    primaryButton: string;
+    /** Secondary button label (hidden if empty) */
+    secondaryButton: string;
+    /** Show loading state with loading.json Lottie */
+    loading: boolean;
+    /** Show close icon in header */
+    closable: boolean;
+    /** Hide action buttons */
+    displayButtons: boolean;
+    /** Loading title */
+    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>;
+    private readonly lottieMap;
+    show(): Promise<void>;
+    hide(): Promise<void>;
+    private handlePrimary;
+    private handleSecondary;
+    private onModalHide;
+    render(): any;
+}

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

@@ -0,0 +1,17 @@
+export type AvatarType = 'users' | 'transport' | 'supplier' | 'payment' | 'counter';
+/**
+ * @component dropi-avatars
+ * Avatar component with image, initials fallback, and type-based size variants.
+ */
+export declare class DropiAvatars {
+    /** Image URL */
+    image: string;
+    /** Alt text for the image */
+    alt: string;
+    /** Size/context variant */
+    type: AvatarType;
+    /** Initials to show when no image (max 2 chars) */
+    initials: string;
+    private handleError;
+    render(): any;
+}

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

@@ -0,0 +1,30 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-banner-external
+ * External banner image with optional link and close button.
+ * Pass imageUrl directly (the Angular version fetched from WordPress).
+ *
+ * @example
+ * <dropi-banner-external
+ *   image-url="https://example.com/banner.jpg"
+ *   link="https://dropi.co"
+ * ></dropi-banner-external>
+ */
+export declare class DropiBannerExternal {
+    /** Image URL to display */
+    imageUrl: string;
+    /** Optional click-through URL */
+    link: string;
+    /** Alt text for the image */
+    alt: string;
+    /** Background color behind the image */
+    backgroundColor: 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>;
+    private handleClick;
+    private closeBanner;
+    render(): any;
+}

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

@@ -0,0 +1,31 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface BreadcrumbItem {
+    label: string;
+    /** Internal route or external URL */
+    routerLink?: string;
+    url?: string;
+    disabled?: boolean;
+}
+/**
+ * @component dropi-breadcrumb
+ * Navigation breadcrumb with home icon and items.
+ *
+ * @example
+ * <dropi-breadcrumb
+ *   items='[{"label":"Productos","routerLink":"/products"},{"label":"Detalle"}]'
+ * ></dropi-breadcrumb>
+ */
+export declare class DropiBreadcrumb {
+    /** Breadcrumb items (array or JSON string). Last item is rendered as current. */
+    items: BreadcrumbItem[] | string;
+    /** Home link href */
+    homeRoute: string;
+    /** dropi-icon name for home */
+    homeIconName: string;
+    /** Whether the last item is also clickable */
+    lastItemClickable: boolean;
+    /** Emitted when any item or home is clicked. Detail is the item or homeRoute string. */
+    dropiNavigate: EventEmitter<BreadcrumbItem | string>;
+    private get parsedItems();
+    render(): any;
+}

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

@@ -17,6 +17,8 @@ export declare class DropiButton {
     size: ButtonSize;
     /** Button state */
     state: ButtonState;
+    /** Full width button */
+    fullWidth: boolean;
     /** Icon name to show before the text */
     preIcon: string;
     /** Icon name to show after the text */

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

@@ -0,0 +1,33 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-card-checkbox
+ * Card-style clickable checkbox with title, description, and optional extra info.
+ *
+ * @example
+ * <dropi-card-checkbox
+ *   title="Opción A"
+ *   description="Descripción breve"
+ *   type="with-card"
+ *   checked
+ * ></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;
+    /** Optional description below title */
+    description: string;
+    /** Optional extra info shown on the right */
+    extraInfo: string;
+    /** Optional extra info description shown below extraInfo */
+    extraInfoDescription: string;
+    /** Disables interaction */
+    disabled: boolean;
+    /** Emitted with the new checked state when clicked */
+    dropiChange: EventEmitter<boolean>;
+    private handleClick;
+    render(): any;
+}

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

@@ -0,0 +1,39 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-card-product
+ * Product card showing image, name, price, supplier, and action buttons.
+ */
+export declare class DropiCardProduct {
+    /** Product image URL */
+    image: string;
+    /** Product name */
+    productName: string;
+    /** Product price */
+    price: number;
+    /** Price currency symbol */
+    currency: string;
+    /** Supplier / store name */
+    supplier: string;
+    /** Category label */
+    category: string;
+    /** Show favorite button */
+    showFavorite: boolean;
+    /** Is marked as favorite */
+    isFavorite: boolean;
+    /** Show "Add to store" 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 */
+    dropiAddProduct: EventEmitter<void>;
+    private formatPrice;
+    render(): any;
+}

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

@@ -0,0 +1,22 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-card-section
+ * Section card with title, description and a switch or dropdown control.
+ */
+export declare class DropiCardSection {
+    /** Section title */
+    sectionTitle: string;
+    /** Section description */
+    description: string;
+    /** Control type on the right */
+    typeElement: 'dropdown' | 'switch';
+    /** Title size variant */
+    type: 'medium' | 'important';
+    /** Switch checked state */
+    isChecked: boolean;
+    /** Emitted when switch changes. e.detail = new boolean value */
+    dropiChange: EventEmitter<boolean>;
+    /** Emitted when dropdown icon is clicked */
+    dropiClick: EventEmitter<void>;
+    render(): any;
+}

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

@@ -0,0 +1,40 @@
+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;
+    /** Show navigation arrows */
+    showArrows: boolean;
+    /** Show dot indicators */
+    showDots: boolean;
+    /** Show thumbnail strip */
+    showThumbs: 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;
+    private timer;
+    /** Emitted when slide changes. e.detail = new index */
+    dropiSlideChange: EventEmitter<number>;
+    imagesChanged(val: string[] | string): void;
+    activeIndexChanged(val: number): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private startAutoplay;
+    private stopAutoplay;
+    private go;
+    private prev;
+    private next;
+    render(): any;
+}

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

@@ -0,0 +1,37 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface CheckboxOption {
+    id: string | number;
+    name: string;
+    icon?: string;
+    [key: string]: any;
+}
+/**
+ * @component dropi-checkbox-selection-list
+ * Searchable list of checkbox options with multi-select support.
+ */
+export declare class DropiCheckboxSelectionList {
+    /** Options array or JSON string */
+    options: CheckboxOption[] | string;
+    /** Show search filter */
+    showFilter: boolean;
+    /** Search placeholder */
+    filterPlaceholder: string;
+    /** Show "no results" message */
+    showNotFound: boolean;
+    /** Empty state message */
+    notFoundMessage: string;
+    /** Allow multiple selection */
+    multiSelect: boolean;
+    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>;
+    optionsChanged(val: CheckboxOption[] | string): void;
+    componentWillLoad(): void;
+    private get filtered();
+    private toggle;
+    render(): any;
+}

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

@@ -0,0 +1,23 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type ChipStyle = 'filters' | 'fill';
+export type ChipType = 'icon' | 'text' | 'avatar';
+/**
+ * @component dropi-chips
+ * Chip/tag-like element with optional icon, avatar, and close button.
+ * Use <slot> for the chip label text.
+ */
+export declare class DropiChips {
+    /** Visual style */
+    chipStyle: ChipStyle;
+    /** Content type */
+    type: ChipType;
+    /** Avatar image URL (when type = 'avatar') */
+    urlImg: string;
+    /** Show the close/remove icon */
+    showIcon: boolean;
+    /** Icon name (when type = 'icon') */
+    icon: string;
+    /** Emitted when the close icon is clicked */
+    dropiClose: EventEmitter<void>;
+    render(): any;
+}

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

@@ -0,0 +1,46 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface CityOption {
+    label: string;
+    value: string | number;
+}
+export interface CityGroup {
+    label: string;
+    value: string;
+    items: CityOption[];
+}
+/**
+ * @component dropi-city-selector
+ * Multi-select city picker with grouped options and chip display.
+ * Pass options as a JSON string or CityGroup[] array.
+ *
+ * @example
+ * <dropi-city-selector
+ *   options='[{"label":"Cundinamarca","value":"CUN","items":[{"label":"Bogotá","value":"BOG"}]}]'
+ *   placeholder="Selecciona ciudades"
+ * ></dropi-city-selector>
+ */
+export declare class DropiCitySelector {
+    /** Grouped city options (array or JSON string) */
+    options: CityGroup[] | string;
+    /** Currently selected city values */
+    selectedCities: (string | number)[] | string;
+    /** Placeholder text */
+    placeholder: string;
+    /** Disable the selector */
+    disabled: boolean;
+    /** Emitted when selection changes. Detail = selected values array. */
+    dropiCityChange: EventEmitter<(string | number)[]>;
+    private isOpen;
+    private selected;
+    private parsedOptions;
+    private searchTerm;
+    optionsChanged(val: CityGroup[] | string): void;
+    selectedChanged(val: (string | number)[] | string): void;
+    componentWillLoad(): void;
+    private get filtered();
+    private toggle;
+    private toggleCity;
+    private removeCity;
+    private getLabel;
+    render(): any;
+}

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

@@ -0,0 +1,31 @@
+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>;
+    componentWillLoad(): void;
+    private selectColor;
+    private handleHexInput;
+    private handleOpacity;
+    private handleNativeColor;
+    render(): any;
+}

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

@@ -0,0 +1,19 @@
+/**
+ * @component dropi-country-flags
+ * Displays a country flag image. Supports circle, rectangle, and flat styles.
+ *
+ * @example
+ * <dropi-country-flags country="CO" style="circle"></dropi-country-flags>
+ */
+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';
+    /** Width in px */
+    width: string;
+    /** Height in px */
+    height: string;
+    private get src();
+    render(): any;
+}

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

@@ -0,0 +1,39 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface CountryItem {
+    name: string;
+    code: string;
+    codePhone: string;
+}
+/**
+ * @component dropi-country-selector
+ * Searchable country dropdown with flag images. Mirrors Angular dropi-country-selector.
+ *
+ * @example
+ * <dropi-country-selector label="País" placeholder="Selecciona un país"></dropi-country-selector>
+ */
+export declare class DropiCountrySelector {
+    /** Label above the select */
+    label: string;
+    /** Placeholder when nothing is selected */
+    placeholder: string;
+    /** Pre-selected country code (ISO 3166-1 alpha-2) */
+    value: string;
+    /** Whether the selector is disabled */
+    disabled: boolean;
+    /** Show asterisk for required field */
+    showObligatory: boolean;
+    /** Show error border */
+    invalid: boolean;
+    /** Emitted when a country is selected. Detail is the CountryItem. */
+    dropiCountryChange: EventEmitter<CountryItem>;
+    private isOpen;
+    private selected;
+    private searchTerm;
+    private searchInputRef?;
+    valueChanged(val: string): void;
+    componentWillLoad(): void;
+    private get filtered();
+    private open;
+    private select;
+    render(): any;
+}