@dropi/ui 0.1.53 → 0.1.54
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/hydrate/index.js +86 -94
- package/hydrate/index.mjs +86 -94
- package/package.json +1 -1
- package/readme.md +85 -11
package/hydrate/index.js
CHANGED
|
@@ -5376,7 +5376,7 @@ class DropiAccordion {
|
|
|
5376
5376
|
/** Allows multiple sections to be open at the same time. If false, only one section can be open. */
|
|
5377
5377
|
multiple = false;
|
|
5378
5378
|
render() {
|
|
5379
|
-
return (hAsync("div", { key: '
|
|
5379
|
+
return (hAsync("div", { key: 'c8c70f9c2210e1bc6de7d0933f082a0d1c008837', class: "accordion-container" }, hAsync("slot", { key: '9fe1055ed6f5a2fc5c3e8dde47b694ea0acdbcb9' })));
|
|
5380
5380
|
}
|
|
5381
5381
|
static get style() { return dropiAccordionCss(); }
|
|
5382
5382
|
static get cmpMeta() { return {
|
|
@@ -5434,7 +5434,7 @@ class DropiAccordionItem {
|
|
|
5434
5434
|
setTimeout(() => this.updateHeight(this.open), 0);
|
|
5435
5435
|
}
|
|
5436
5436
|
render() {
|
|
5437
|
-
return (hAsync("div", { key: '
|
|
5437
|
+
return (hAsync("div", { key: '98de1df9b82f0e4e5e72702b7eaca12c0ed92586', class: { 'accordion-item': true, 'accordion-item--open': this.open, 'accordion-item--disabled': this.disabled } }, hAsync("button", { key: 'bd5c3e6ea29feb33e5280908c98929369dc7377e', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, hAsync("span", { key: 'ced161eb1187d50b7eb2002081cd3fc008c9a16f', class: "accordion-header-left" }, this.preIcon && hAsync("dropi-icon", { key: '09a157623f0978153b57e85a79d7beeca3faf9ab', name: this.preIcon, iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), hAsync("span", { key: '649617f263370d1314e3145c07a3a29ce5c807b5', class: "accordion-title" }, this.sectionTitle)), hAsync("span", { key: 'd99e3933a40ffa4b1da8091a8b6d767011f1bf6f', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, hAsync("dropi-icon", { key: '3d12ae988429fea2612c0c32c12cd81a486ad255', name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }))), hAsync("div", { key: 'cedff4803c6fa83ae9dc5cb3ce68f48150cdef67', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, hAsync("div", { key: 'a37dd42bf39cf08479d847286860e78a1d80a233', class: "accordion-content" }, hAsync("slot", { key: 'd797eac747716be1af2a6addbefe583be4a816b1' })))));
|
|
5438
5438
|
}
|
|
5439
5439
|
static get watchers() { return {
|
|
5440
5440
|
"open": [{
|
|
@@ -5727,7 +5727,7 @@ class DropiAlertModal {
|
|
|
5727
5727
|
const lottieKey = this.loading ? 'loading' : this.type;
|
|
5728
5728
|
const isLottieLoading = lottieKey === 'loading';
|
|
5729
5729
|
const lottieSrc = LOTTIE_MAP[lottieKey];
|
|
5730
|
-
return (hAsync("dropi-modal", { key: '
|
|
5730
|
+
return (hAsync("dropi-modal", { key: '9e44e3e2336cea618ad493257a9057f6ed05b3b9', visible: this.visible, showHeader: this.closable, showCloseIcon: this.closable, dismissable: false, closeOnEscape: false, showFooter: false, size: "s", onDropiHide: () => this.onModalHide() }, hAsync("div", { key: '2c83ef5ed1bce3821221404572e08ff83e5788a7', class: "body-alert" }, lottieSrc && (hAsync("div", { key: 'aef9b32ed8f6a9eed2d49b78a579efca7c30de35', class: `lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}` }, hAsync("lottie-player", { key: lottieKey, src: lottieSrc, background: "transparent", speed: "1", loop: true, autoplay: true }))), hAsync("div", { key: '5c5161f34e04e783120cda34cbfda41da0061b40', class: "content-alert" }, hAsync("h2", { key: 'ea451c2f1d424a4ca9453eee500055929a4ee0cd' }, this.loading ? this.loadingTitle : this.tittle), hAsync("p", { key: '6fc476e3b79305a8542a9e3254a648df46e612c2' }, this.loading ? this.loadingMessage : this.message)), hAsync("div", { key: 'c6b62bd577696a2f474c05f6a91030f3caa17c9e', class: "custom-content" }, hAsync("slot", { key: '42957aad93193457111a074bad254c6209c5fb12' })), !this.loading && this.displayButtons && (hAsync("div", { key: 'f6bec3425de91611537bc418c7896b7dc510ace6', class: "actions" }, this.secondaryButton && hAsync("dropi-button", { key: 'e169fb4dbd9d6d5548095d59ddde524b6540b7a8', text: this.secondaryButton, severity: "secondary", onDropiClick: () => this.handleSecondary(), fullWidth: true }), hAsync("dropi-button", { key: 'f892a5d0fce7eae2d24fedc71a925c5c2cf767dd', text: this.primaryButton, severity: "primary", onDropiClick: () => this.handlePrimary(), fullWidth: true }))))));
|
|
5731
5731
|
}
|
|
5732
5732
|
static get watchers() { return {
|
|
5733
5733
|
"params": [{
|
|
@@ -5788,7 +5788,7 @@ class DropiAvatars {
|
|
|
5788
5788
|
render() {
|
|
5789
5789
|
const displayInitials = this.initials?.slice(0, 2).toUpperCase();
|
|
5790
5790
|
const showInitials = !this.image && displayInitials;
|
|
5791
|
-
return (hAsync("figure", { key: '
|
|
5791
|
+
return (hAsync("figure", { key: 'db9310b5c789b079fc0f9043a619bd22f9a60151', class: { 'avatar': true, [`avatar--${this.type}`]: true } }, showInitials ? (hAsync("div", { class: "avatar__initials" }, displayInitials)) : (hAsync("img", { src: this.image || FALLBACK, alt: this.alt, onError: (e) => this.handleError(e) }))));
|
|
5792
5792
|
}
|
|
5793
5793
|
static get style() { return dropiAvatarsCss(); }
|
|
5794
5794
|
static get cmpMeta() { return {
|
|
@@ -5837,7 +5837,7 @@ class DropiBadge {
|
|
|
5837
5837
|
return null;
|
|
5838
5838
|
}
|
|
5839
5839
|
render() {
|
|
5840
|
-
return (hAsync("div", { key: '
|
|
5840
|
+
return (hAsync("div", { key: 'b4cae2eac2f963a641ca23e27b33899469b2b370', class: `tag-state ${this.state}` }, this.renderIcon(), hAsync("p", { key: '64a2504a1844f2cb9397878ca305aa183b0609a5' }, this.stateText[this.state])));
|
|
5841
5841
|
}
|
|
5842
5842
|
static get style() { return dropiBadgeCss(); }
|
|
5843
5843
|
static get cmpMeta() { return {
|
|
@@ -5872,7 +5872,7 @@ class DropiBadgeLegacy {
|
|
|
5872
5872
|
count = 0;
|
|
5873
5873
|
render() {
|
|
5874
5874
|
const isCounter = this.type === 'counter';
|
|
5875
|
-
return (hAsync("div", { key: '
|
|
5875
|
+
return (hAsync("div", { key: '58bb5c6625539109f010cccdcaafc37ab6da38ba', class: {
|
|
5876
5876
|
'badge-legacy': true,
|
|
5877
5877
|
[`badge-legacy--${this.variant}`]: true,
|
|
5878
5878
|
[`badge-legacy--${this.type}`]: true
|
|
@@ -6019,7 +6019,7 @@ class DropiBreadcrumb {
|
|
|
6019
6019
|
}
|
|
6020
6020
|
render() {
|
|
6021
6021
|
const items = this.parsedItems;
|
|
6022
|
-
return (hAsync("nav", { key: '
|
|
6022
|
+
return (hAsync("nav", { key: 'c4546d7a0c7852e01f685176b5365f1e0082ad24', class: "breadcrumb", "aria-label": "Breadcrumb" }, hAsync("div", { key: '924ab634ae4e71f6bd39a67b4b3889cdca20234d', class: "crumb-list" }, hAsync("div", { key: 'e7b1b285bdd497a028a041ada1eb8b34f77384b0', class: "crumb-home" }, hAsync("a", { key: '9e288d5f5761daed20b35dbf056c7de9c2e7b8e3', href: this.homeRoute, class: "home-link", "aria-label": "Inicio", onClick: (e) => { e.preventDefault(); this.dropiNavigate.emit(this.homeRoute); } }, hAsync("dropi-icon", { key: '803ab6d710976b341f19ad7d49fde670acc2c466', name: this.homeIconName, iconWidth: "16px", color: "Gray-Gray-500" })), items.length > 0 && (hAsync("dropi-icon", { key: '44d1cad9efa9cbc6a52bc26a2229af6680cd8733', name: "Dropdown-Right", iconWidth: "16px", color: "Gray-Gray-500" }))), items.map((item, idx) => {
|
|
6023
6023
|
const isLast = idx === items.length - 1;
|
|
6024
6024
|
const href = item.url || item.routerLink || '#';
|
|
6025
6025
|
return (hAsync("div", { class: "crumb", key: idx }, (!isLast || this.lastItemClickable) ? (hAsync("a", { class: `crumb-link Body-S-Regular${item.disabled ? ' disabled' : ''}`, href: href, onClick: (e) => {
|
|
@@ -6135,7 +6135,7 @@ class DropiButton {
|
|
|
6135
6135
|
const hasText = (this.text ?? '') !== '';
|
|
6136
6136
|
const showPostIcon = (this.postIcon ?? '') !== '' || (this.type ?? 'default') === 'dropdown';
|
|
6137
6137
|
const dropdownIcon = (this.type ?? 'default') === 'dropdown' ? 'Dropdown-down' : (this.postIcon ?? '');
|
|
6138
|
-
return (hAsync("button", { key: '
|
|
6138
|
+
return (hAsync("button", { key: '21d2654de08dff8db6c2b1ba87594e1184a7aa35', class: {
|
|
6139
6139
|
btn: true,
|
|
6140
6140
|
'without-text': !hasText,
|
|
6141
6141
|
[this.severity ?? 'primary']: true,
|
|
@@ -6143,7 +6143,7 @@ class DropiButton {
|
|
|
6143
6143
|
[this.size ?? 'normal']: true,
|
|
6144
6144
|
[this.state ?? 'default']: true,
|
|
6145
6145
|
'full-width': this.fullWidth,
|
|
6146
|
-
}, type: this.nativeType, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (hAsync("dropi-icon", { key: '
|
|
6146
|
+
}, type: this.nativeType, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (hAsync("dropi-icon", { key: '6c6c01c923a37df20b614602b18cd2da949bcb91', name: this.preIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), hasText && hAsync("span", { key: '82447aab8b87bc4a89105cd0209e6c5681222f28', class: "text" }, this.text), showPostIcon && (hAsync("dropi-icon", { key: '6bdefe7c1c819b213d24e0100c2303fb7840ea00', name: dropdownIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), hAsync("slot", { key: '44483caf52d2ca617ad86c1574a54709f8e77ab5' })));
|
|
6147
6147
|
}
|
|
6148
6148
|
static get formAssociated() { return true; }
|
|
6149
6149
|
static get style() { return dropiButtonCss(); }
|
|
@@ -6213,12 +6213,12 @@ class DropiCardCheckbox {
|
|
|
6213
6213
|
this.dropiChange.emit(this.isChecked);
|
|
6214
6214
|
}
|
|
6215
6215
|
render() {
|
|
6216
|
-
return (hAsync("div", { key: '
|
|
6216
|
+
return (hAsync("div", { key: 'b9004c813a03956904cfed8484cac2d8290be86f', class: {
|
|
6217
6217
|
'container-card-check': true,
|
|
6218
6218
|
'default-card': this.type === 'default',
|
|
6219
6219
|
'is-checked': this.isChecked && this.type === 'with card',
|
|
6220
6220
|
'disabled': this.disabled,
|
|
6221
|
-
}, onClick: () => this.handleClick() }, hAsync("dropi-checkbox", { key: '
|
|
6221
|
+
}, onClick: () => this.handleClick() }, hAsync("dropi-checkbox", { key: '7ac16d56fb2f3a0e415274f1e767ccddf49dc35d', name: "_card-checkbox", checked: this.isChecked, disabled: this.disabled }), hAsync("div", { key: 'a7d782c96ef6a5fad7e98ea2b7c5e5db09dfefe4', class: "container-text" }, hAsync("div", { key: '4cb9ecb3ec80a1ce375cefb044aedd8a6818f1f1', class: "title-check" }, this.title), this.description && hAsync("div", { key: '2f763eba23e8e1c52392cf251d6492e46d9d8c7c', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (hAsync("div", { key: 'f853d59072a10b4f9e924c6e62132ea3b7c5feca', class: "extra-info" }, this.extraInfo && hAsync("div", { key: '3c198762cd1e70622419959e39c0be41d51b1273' }, this.extraInfo), this.extraInfoDescription && hAsync("h4", { key: 'dc98cf76aa221d1a6cd49002376be6b9c3dcff3a' }, this.extraInfoDescription)))));
|
|
6222
6222
|
}
|
|
6223
6223
|
static get style() { return dropiCardCheckboxCss(); }
|
|
6224
6224
|
static get cmpMeta() { return {
|
|
@@ -6301,17 +6301,17 @@ class DropiCardProduct {
|
|
|
6301
6301
|
return 'var(--Success-Success-500, #0abb87)';
|
|
6302
6302
|
}
|
|
6303
6303
|
render() {
|
|
6304
|
-
return (hAsync("div", { key: '
|
|
6304
|
+
return (hAsync("div", { key: '2fe4ce42e1c331a99fd1171c82e6e48bfb5dbff0', class: "dropi-card-product", onClick: () => this.dropiProductClick.emit() }, hAsync("div", { key: '3f94077ee059e347f3ff4fff808a3a3f3a0ac827', class: "product-image-container" }, hAsync("div", { key: '1d6e8181cc630ab03efc90e316c349dfe9765b46', class: "product-image" }, hAsync("img", { key: 'f6647c21ac24d378482c6e6fe5220d6d18ff694b', src: this.image || '', alt: this.productName, onError: (e) => {
|
|
6305
6305
|
e.target.src = './assets/utils/no-image.jpg';
|
|
6306
|
-
}, class: !this.image ? 'error-img' : '' }), this.showFavorite && (hAsync("button", { key: '
|
|
6306
|
+
}, class: !this.image ? 'error-img' : '' }), this.showFavorite && (hAsync("button", { key: '37c23af5e1345e2f2b2ac42dd38f88eb17254889', class: { 'favorite-button': true, 'favorite-active': this.isFavorite }, onClick: (e) => {
|
|
6307
6307
|
e.stopPropagation();
|
|
6308
6308
|
this.isFavorite = !this.isFavorite;
|
|
6309
6309
|
this.dropiFavoriteChange.emit(this.isFavorite);
|
|
6310
|
-
}, "aria-label": "Favorito" }, hAsync("dropi-icon", { key: '
|
|
6310
|
+
}, "aria-label": "Favorito" }, hAsync("dropi-icon", { key: 'c6d6c87dcb5ae0f9a0d416667a3d39c7e153b7a6', name: this.isFavorite ? 'Heart-solid' : 'Heart', iconWidth: "18px", iconHeight: "18px", color: this.isFavorite ? '#fff' : '#858ea6' }))))), hAsync("div", { key: '66dbcb028acb35e9a43502e9ff9a00fd2ebf8bf2', class: "product-info" }, this.supplierCategory && (hAsync("dropi-ilustration-icon", { key: 'fd3d94e953a6b91418decc09ed426755a85bac1b', class: "supplier-insignia", type: "insignia", stateInsignia: this.supplierCategory, tagProduct: true })), hAsync("div", { key: '45817e3bb0bfdaa0ec8cb4a23fdac1bb943e93dc', class: "product-header" }, this.category && (hAsync("span", { key: 'c721519a5339a2ac40d20c283bbe8797b78e4b27', class: "category" }, this.category)), hAsync("div", { key: '49f5013738dfffcdb83dfde628f5d1d21164c3d2', class: "stock-info" }, hAsync("span", { key: 'bd49d5069d07b3ae10ac9c85a4b84bbb573f926e', class: "stock-label" }, "Stock:"), hAsync("span", { key: 'd0eefb88240c13c9c56e7470e79cbacc9d86caf4', class: "stock-value", style: { color: this.getStockColor() } }, this.stock === 0 ? 'Agotado' : this.stock))), hAsync("h3", { key: 'a880d0df13af0b75d553daf18e876905b93e6ef1', class: "product-name" }, this.productName), this.supplier && (hAsync("div", { key: 'faa82e269979084e7510b6a17fb1f3caee8ad181', class: "supplier-info" }, hAsync("span", { key: 'b4b223620c58cb30945b1c6be50559614937eb5f', class: "supplier-label" }, "Proveedor:"), hAsync("span", { key: '989580f42383c3b6adb6484a493d1293a2a11904', class: "supplier-name", onClick: (e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); } }, this.supplier))), hAsync("div", { key: '451c1ab830c7ab38c4e414e94f11f63ffcf86162', class: "price-container" }, hAsync("div", { key: '755f3f8aac6f7b1d458d28b74dec2734b42794a6', class: "price-item" }, hAsync("span", { key: 'fff0a718b4f22641adcd28bbcb7e81a0f21755e9', class: "price-label" }, "Precio proveedor"), hAsync("span", { key: '5bb6843a4a293195f0dbda5c3eccfc4f38c719b1', class: "price-value" }, this.currency, " ", this.formatPrice(this.salePrice))), hAsync("div", { key: '468b1d7596ec5d727846a087b5d89461c5fef858', class: "price-item" }, hAsync("span", { key: '91b15e4d58d27997b2dfdb9c73fd417a8f8ba5fb', class: "price-label" }, "Precio sugerido"), hAsync("span", { key: '378483760ffac07491f5b65b37d5e27d41423ec5', class: "price-value" }, this.currency, " ", this.formatPrice(this.suggestedPrice))))), hAsync("div", { key: '71467832049894083ea3454618a12d082cb15844', class: "separator" }), this.showAddButton && (hAsync("div", { key: 'f9f0450e3dfa2b91ae7caa468811cc739d7a280e', class: { 'action-button': true, 'action-button--disabled': !this.inStock }, onClick: (e) => {
|
|
6311
6311
|
e.stopPropagation();
|
|
6312
6312
|
if (this.inStock)
|
|
6313
6313
|
this.dropiAddProduct.emit();
|
|
6314
|
-
} }, hAsync("dropi-icon", { key: '
|
|
6314
|
+
} }, hAsync("dropi-icon", { key: '50a9fad974460c2728fb1fca74628d093cbb1875', name: "Shopping-cart-arrow-rigth", iconWidth: "20px", iconHeight: "20px", color: "#f49a3d" }), hAsync("span", { key: 'f5ac44dd20e01bc644e863c3cbf51e3493821e70', class: "button-text" }, "Enviar a cliente")))));
|
|
6315
6315
|
}
|
|
6316
6316
|
static get style() { return dropiCardProductCss(); }
|
|
6317
6317
|
static get cmpMeta() { return {
|
|
@@ -6364,9 +6364,9 @@ class DropiCardSection {
|
|
|
6364
6364
|
/** Emitted when dropdown icon is clicked */
|
|
6365
6365
|
dropiClick;
|
|
6366
6366
|
render() {
|
|
6367
|
-
return (hAsync("div", { key: '
|
|
6367
|
+
return (hAsync("div", { key: '06fe2a580fb23484419ea4b1c41a265facb722de', class: "card-section" }, hAsync("div", { key: '1020ea256b0311a200a721387b3ecb8d0f3809ab', class: "card-section__text" }, this.type === 'important'
|
|
6368
6368
|
? hAsync("h5", { class: "card-section__title card-section__title--important" }, this.title)
|
|
6369
|
-
: hAsync("h6", { class: "card-section__title" }, this.title), this.description && hAsync("p", { key: '
|
|
6369
|
+
: hAsync("h6", { class: "card-section__title" }, this.title), this.description && hAsync("p", { key: '52ea93b6b2736c4c6e3ebb953c2878db90d34b4c', class: "card-section__desc" }, this.description)), hAsync("div", { key: '7ec0ed96e43b45256fd5dec5ee24b0dfd6488403', class: "card-section__control" }, this.typeElement === 'switch' ? (hAsync("dropi-switch", { name: "_card-section-switch", isChecked: this.isChecked, onDropiChange: (e) => {
|
|
6370
6370
|
this.isChecked = e.detail;
|
|
6371
6371
|
this.dropiChange.emit(e.detail);
|
|
6372
6372
|
} })) : (hAsync("button", { class: "card-section__dropdown-btn", onClick: () => this.dropiClick.emit(), "aria-label": "Expandir" }, hAsync("dropi-icon", { name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }))))));
|
|
@@ -6599,12 +6599,12 @@ class DropiCheckbox {
|
|
|
6599
6599
|
this.dropiChange.emit(this.checked);
|
|
6600
6600
|
}
|
|
6601
6601
|
render() {
|
|
6602
|
-
return (hAsync("div", { key: '
|
|
6602
|
+
return (hAsync("div", { key: '091a0802423ae37f0473938259313d97a460645e', class: "container-dropi-checkbox", onClick: () => this.changeState() }, hAsync("div", { key: 'bf5c681b5285a6469e7652422010b3559ac057db', class: {
|
|
6603
6603
|
check: true,
|
|
6604
6604
|
isCheck: this.checked,
|
|
6605
6605
|
noCheck: !this.checked,
|
|
6606
6606
|
disabled: this.disabled,
|
|
6607
|
-
} }, hAsync("svg", { key: '
|
|
6607
|
+
} }, hAsync("svg", { key: 'be7eecf60b8f45fa6ebaa7c43d6a2087c79f02d0', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, hAsync("path", { key: '6eda9ca377ab8480479f3f2ad880895dd9b54b9d', d: "M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z", fill: "#FFFFFF" })))));
|
|
6608
6608
|
}
|
|
6609
6609
|
static get formAssociated() { return true; }
|
|
6610
6610
|
static get watchers() { return {
|
|
@@ -6683,10 +6683,10 @@ class DropiCheckboxSelectionList {
|
|
|
6683
6683
|
}
|
|
6684
6684
|
render() {
|
|
6685
6685
|
const items = this.filtered;
|
|
6686
|
-
return (hAsync("div", { key: '
|
|
6686
|
+
return (hAsync("div", { key: '95774833547807d6001525158bf199883661b649', class: "csl" }, this.showFilter && (hAsync("div", { key: '13f6bfd33150cdf138e90b93fc8121dfcc311050', class: "csl__search" }, hAsync("dropi-icon", { key: '4edf5c21eeac0aa442e58845621b7715d8484c1b', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("input", { key: '40071d0c189c7fd1f1bf8090ebe1d64ce9605602', class: "csl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
|
|
6687
6687
|
this.filterText = e.target.value;
|
|
6688
6688
|
this.dropiSearch.emit(this.filterText);
|
|
6689
|
-
} }), this.filterText && (hAsync("button", { key: '
|
|
6689
|
+
} }), this.filterText && (hAsync("button", { key: 'a560cab7ce53e57e036696194054286aa1dd6fd9', class: "csl__clear", onClick: () => { this.filterText = ''; this.dropiSearch.emit(''); } }, hAsync("dropi-icon", { key: 'f1ae7e38fcb954761edb02bb32af139fb5eea610', name: "Close-small", iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-400" }))))), hAsync("div", { key: 'e93dfccc8215e96640ebe8c69f33f0bff5f655f2', class: "csl__list" }, items.length === 0 && this.showNotFound ? (hAsync("div", { class: "csl__empty" }, this.notFoundMessage)) : (items.map(opt => {
|
|
6690
6690
|
const checked = this.selected.includes(opt.id);
|
|
6691
6691
|
return (hAsync("div", { class: "csl__item", key: opt.id, onClick: () => this.toggle(opt.id) }, hAsync("dropi-checkbox", { name: "_csl-option", checked: checked }), opt.icon && hAsync("img", { class: "csl__icon", src: opt.icon, alt: opt.label }), hAsync("span", { class: "csl__label" }, opt.label)));
|
|
6692
6692
|
})))));
|
|
@@ -6743,7 +6743,7 @@ class DropiChips {
|
|
|
6743
6743
|
/** Emitted when the close icon is clicked */
|
|
6744
6744
|
dropiClose;
|
|
6745
6745
|
render() {
|
|
6746
|
-
return (hAsync("div", { key: '
|
|
6746
|
+
return (hAsync("div", { key: '394a3ff5219535e9f4e1d6c9fbb320c32f1ce2e7', class: { 'chip': true, [`chip--${this.customStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (hAsync("img", { key: 'c7ea7ce319e2ab0a179f7b0b61ad9fe39be7c1ec', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (hAsync("dropi-icon", { key: '67e2edfbe37af83868a665cf65a85ecc27b7cfb5', class: "chip__pre-icon", name: this.icon, iconWidth: "14px", iconHeight: "14px", color: "currentColor" })), hAsync("span", { key: '1916b1796d69cf6742177b8f4013315323bdf16f', class: "chip__text" }, hAsync("slot", { key: '167e1b230b1c4406ba3f40ba7783966c6b523c96' })), this.showIcon && (hAsync("button", { key: '118d46db1615e9ed14485500b5a754407c361139', class: "chip__close", onClick: () => this.dropiClose.emit(), "aria-label": "Eliminar" }, hAsync("dropi-icon", { key: '1639e4ae068d0361512469d2915b392101b2b923', name: "Cross-circle", iconWidth: "14px", iconHeight: "14px", color: "currentColor" })))));
|
|
6747
6747
|
}
|
|
6748
6748
|
static get style() { return dropiChipsCss(); }
|
|
6749
6749
|
static get cmpMeta() { return {
|
|
@@ -6856,7 +6856,7 @@ class DropiCitySelector {
|
|
|
6856
6856
|
}
|
|
6857
6857
|
render() {
|
|
6858
6858
|
const groups = this.filtered;
|
|
6859
|
-
return (hAsync("div", { key: '
|
|
6859
|
+
return (hAsync("div", { key: '5b1e27677c34d0dc85dc9c8544e4b0ba9a66216b', class: { 'city-selector': true, 'city-selector--disabled': this.disabled } }, hAsync("button", { key: 'e359c1baff0a255cd396ee35836430486bc67cd3', type: "button", class: "selector-trigger", disabled: this.disabled, onClick: () => this.toggle(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, hAsync("div", { key: '082246999f826e8cfe1b2d09fd801a5d7db7e1b2', class: "chips-area" }, this.selected.length === 0 && (hAsync("span", { key: '90453c84cae3561412f795ec1ffc01923cd87040', class: "placeholder" }, this.placeholder)), this.selected.map(val => (hAsync("span", { class: "chip", key: String(val) }, this.getLabel(val), hAsync("button", { type: "button", class: "chip-remove", "aria-label": "Quitar", onClick: (e) => this.removeCity(val, e) }, hAsync("dropi-icon", { name: "Close-small", iconWidth: "10px", iconHeight: "10px", color: "Primary-Primary-500" })))))), hAsync("dropi-icon", { key: 'f99675449127fb19fdea950db057d8c14ca62644', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-500" })), this.isOpen && (hAsync("div", { key: '2a14a55016c19128fde45359f4b29b6f04f9b035', class: "dropdown", role: "listbox" }, hAsync("div", { key: '1321152ed7b0d3f50b04c7f28b05f1523c41cce4', class: "search-wrap" }, hAsync("div", { key: '7c94a7506d44cd89b83e5782cce16319f266f82c', class: "search-field" }, hAsync("input", { key: '5f40db9a8df0adc09776b4adcfe03a4a6d1d1467', class: "search-input", type: "text", placeholder: "Buscar...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; }, autoComplete: "off" }), hAsync("span", { key: '3140903ef4355b970c8f348e4f55d43f852e247d', class: "search-icon" }, hAsync("dropi-icon", { key: 'b59235b0d7a685000033d2a294fbce246d0ba4c2', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), hAsync("div", { key: 'bfd40e336b402bd92ec212466cf89e1cffb0d4be', class: "options-list" }, groups.length === 0 && (hAsync("div", { key: '9fce9b4df1ffb122278480f0ab60255ea0c795ec', class: "no-results" }, "Sin resultados")), groups.map(group => (hAsync("div", { key: group.value, class: "group" }, hAsync("div", { class: "group-label" }, group.label), group.items.map(city => {
|
|
6860
6860
|
const isSelected = this.selected.includes(city.value);
|
|
6861
6861
|
return (hAsync("div", { key: String(city.value), class: { 'city-option': true, 'city-option--selected': isSelected }, onClick: (e) => this.toggleCity(city.value, e), role: "option", "aria-selected": isSelected }, hAsync("span", { class: { 'checkbox': true, 'checkbox--checked': isSelected } }, isSelected && (hAsync("dropi-icon", { name: "Check", iconWidth: "10px", iconHeight: "10px", color: "Neutral-White" }))), hAsync("span", { class: "city-label" }, city.label)));
|
|
6862
6862
|
})))))))));
|
|
@@ -7190,10 +7190,10 @@ class DropiColorPicker {
|
|
|
7190
7190
|
}
|
|
7191
7191
|
}
|
|
7192
7192
|
render() {
|
|
7193
|
-
return (hAsync("div", { key: '
|
|
7193
|
+
return (hAsync("div", { key: '18ea41f637e46cb88d57cb2bc513f5e6e3ef9617', class: "general-container" }, hAsync("div", { key: '653748e883bc4deaf05739ced8e516f857a7a26b', class: "main-input-container" }, hAsync("div", { key: 'b8a4e60b25d6017c3987fa4ea3420c78e3400db0', class: "overlay", onClick: () => this.showEditor() }), hAsync("div", { key: 'e22f4b3e95f099e2444a46ee560fefb9f6556b65', class: "line-color-preview" }, hAsync("div", { key: 'cf513dbb5ee9652a6d20aad0608508cae3e000af', class: "color-preview", style: { background: this.currentColor } })), hAsync("div", { key: '025b264ae8aca0fca79f662c58250eea43ccf0e7', class: "color-info" }, hAsync("input", { key: '60a379b53bd0cf0bb1f80d5e1bd5b4c4038686f9', type: "text", class: "color-input", value: this.currentColor, maxLength: 9, readOnly: true }))), hAsync("div", { key: '06e15b97ba156a9aa9dec9f60f2b24c924c0ac53', class: `color-picker-container position-${this.position} ${this.showEdit ? 'show' : ''}` }, hAsync("div", { key: 'ea9df13cdf62ae1378b600dc7689df61bec5fc9b', class: "main-color-canvas-container" }, hAsync("canvas", { key: '5d73426ccfcccca44102300588472fe5e54744f9', ref: (el) => this.colorCanvas = el, width: 256, height: 150, onMouseDown: (e) => this.onColorMouseDown(e) }), hAsync("div", { key: 'e710e7f8c1558ad20dcfb0f03c98969d9aee5e91', class: "color-selector-pointer", style: {
|
|
7194
7194
|
left: `${(this.saturation / 100) * 256}px`,
|
|
7195
7195
|
top: `${((100 - this.currentVal) / 100) * 150}px`
|
|
7196
|
-
} })), hAsync("div", { key: '
|
|
7196
|
+
} })), hAsync("div", { key: '239c7986572fade46b913629bbd374ec6f15e6fb', class: "slider-container" }, hAsync("div", { key: '35c4231f321c42fa95f362da5bf211daf1671c79', class: "slider-group" }, hAsync("div", { key: '20be2dc7eff210e31ab3215da10473a23db921f1', class: "hue-slider-container" }, hAsync("canvas", { key: '0795238e2a59747c4bfbd3437a2a2fd9396dc9e2', ref: (el) => this.hueCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onHueMouseDown(e) }), hAsync("div", { key: '17296210ecef2a958a46f23971a04da61d59402e', class: "slider-pointer", style: { left: `${(this.hue / 360) * 234}px` } }))), hAsync("div", { key: 'af7504663561d0e811ae7ef163cce80cfa256187', class: "slider-group" }, hAsync("div", { key: '7f3f01cfb0e4ca93403dad15787ab8acd7c1cd82', class: "opacity-slider-container" }, hAsync("canvas", { key: '9bac8eca65bfba529748eb9788fc749b87115ca6', ref: (el) => this.opacityCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onOpacityMouseDown(e) }), hAsync("div", { key: '34166bf45efd6f4148395ede39680164662f8a33', class: "slider-pointer", style: { left: `${(this.opacity / 100) * 234}px` } }))), hAsync("div", { key: 'b43c40db224a560adb19fd91a8790efe11719ff9', class: "color-info" }, hAsync("div", { key: 'aad6ef925f30835b5d8f51d23f872560bcb62360', class: "color-label" }, "HEX"), hAsync("input", { key: 'bdb5fd6ca689251a7c566f32bc6c308873117b2c', type: "text", class: "color-input", value: this.color, onInput: (e) => this.onHexInputChange(e), maxLength: 9 }))))));
|
|
7197
7197
|
}
|
|
7198
7198
|
static get watchers() { return {
|
|
7199
7199
|
"value": [{
|
|
@@ -7254,7 +7254,7 @@ class DropiCountryFlags {
|
|
|
7254
7254
|
style['width'] = this.width.includes('px') ? this.width : `${this.width}px`;
|
|
7255
7255
|
if (this.height)
|
|
7256
7256
|
style['height'] = this.height.includes('px') ? this.height : `${this.height}px`;
|
|
7257
|
-
return (hAsync("figure", { key: '
|
|
7257
|
+
return (hAsync("figure", { key: '451765b675d5b27dc0357a1a2b6dd338690361c8', class: `flag ${this.customStyle ?? 'flat'}` }, hAsync("img", { key: 'f58a64e7d78298d328be2ba625c852a5eddc392f', src: this.src, style: style, alt: `flag-${this.country}` })));
|
|
7258
7258
|
}
|
|
7259
7259
|
static get style() { return dropiCountryFlagsCss(); }
|
|
7260
7260
|
static get cmpMeta() { return {
|
|
@@ -7554,11 +7554,11 @@ class DropiCountrySelector {
|
|
|
7554
7554
|
this.dropiChange.emit(country);
|
|
7555
7555
|
}
|
|
7556
7556
|
render() {
|
|
7557
|
-
return (hAsync("div", { key: '
|
|
7557
|
+
return (hAsync("div", { key: '1e590f390f45a91df010db5a25139f5a5b234105', class: "custom-select" }, this.label && (hAsync("label", { key: '073b9c7fb9c09d0addf66bce1c132632ab726b70' }, this.label, this.showObligatory && hAsync("span", { key: '8471da6b6004c35e71d04c0d649a796391ffb703', class: "required" }, "*"))), hAsync("button", { key: '45fdbd8ae914084fd713708947ee6b2256b78b32', type: "button", ref: (el) => { this.buttonRef = el; }, class: {
|
|
7558
7558
|
'select-button': true,
|
|
7559
7559
|
'select-completed': !!this.selected,
|
|
7560
7560
|
'select-invalid': this.hasError,
|
|
7561
|
-
}, disabled: this.disabled, onClick: () => this.open() }, hAsync("div", { key: '
|
|
7561
|
+
}, disabled: this.disabled, onClick: () => this.open() }, hAsync("div", { key: '75100da9fe6ca3b3e1c60d446374a1ed90ab8419', class: "selected-content" }, this.selected ? (hAsync("span", { class: "selected-option" }, hAsync("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (hAsync("span", { class: "placeholder-text" }, this.placeholder))), hAsync("dropi-icon", { key: '3d4ffee3933d05e02236f1283128cb30a876870f', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), hAsync("ul", { key: '5ab2559993f7100c52749b57e15b42605ca503b2', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, hAsync("li", { key: 'da243d50aa04ab24f2ac6b20dd152031458cd474', class: "search-li" }, hAsync("div", { key: 'b27ca2961821252eed8b2917b47b5c03674f5af6', class: "search-field" }, hAsync("input", { key: '4438520038bcf88efabf67d9e6745b51b7f089d3', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } }), hAsync("span", { key: 'd8753c452b5054e23213b94e83884f5297862abc', class: "search-icon" }, hAsync("dropi-icon", { key: '3fac8e38cf990990a91a8dfda4701796237e8c44', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), this.filtered.map(country => (hAsync("li", { key: country.code }, hAsync("button", { class: "option", type: "button", onClick: () => this.select(country) }, hAsync("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name))))), this.textHelper && (hAsync("div", { key: '68bd0e375e7f31e1927a8179070e832d4fe20c94', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && hAsync("dropi-icon", { key: '6328385caf1f3518c9fa0da9f30469d12c0940ef', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), hAsync("span", { key: '704ee063a80566aed85849c2649c399796069e86' }, this.textHelper)))));
|
|
7562
7562
|
}
|
|
7563
7563
|
static get formAssociated() { return true; }
|
|
7564
7564
|
static get watchers() { return {
|
|
@@ -7911,16 +7911,16 @@ class DropiDatePicker {
|
|
|
7911
7911
|
}
|
|
7912
7912
|
render() {
|
|
7913
7913
|
const today = new Date().toISOString().slice(0, 10);
|
|
7914
|
-
return (hAsync("div", { key: '
|
|
7914
|
+
return (hAsync("div", { key: '6ae00de99b93a13faba81ac027c292b9624d0336', class: "dp-wrap" }, this.label && hAsync("label", { key: '9282bb57332ebaef9861702d80759d641ea21757', class: "dp-label" }, this.label), hAsync("button", { key: '1fe5d5fcd8ce1c0b151381d9c249c401d322f78a', class: {
|
|
7915
7915
|
'dp-trigger': true,
|
|
7916
7916
|
'dp-trigger--disabled': this.disabled,
|
|
7917
7917
|
'dp-trigger--invalid': this.isInvalid,
|
|
7918
7918
|
'dp-trigger--loading': this.loading
|
|
7919
|
-
}, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, hAsync("dropi-icon", { key: '
|
|
7919
|
+
}, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, hAsync("dropi-icon", { key: '560cf80eb7652543b9000e375b213a3dba91060b', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("span", { key: '3bdc45bd4706502af4050475e709c15beebce028', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder)), this.open && (hAsync("div", { key: 'e21053dd38d62ab43c01f337fbbeb8b36e70680c', class: "dp-popup" }, hAsync("div", { key: 'd6c8fc40ec4bd11bcd5bf3d8b3706c4c62099bbf', class: "dp-calendar" }, hAsync("div", { key: 'cf8f21d301592077851a44eb588418302240598f', class: "dp-nav" }, hAsync("button", { key: '28702d76d499cec07cd69d7bd23f5eb0369d288f', class: "dp-nav__btn", onClick: () => this.prevNav(), type: "button" }, hAsync("dropi-icon", { key: '18b1c6fb2ea5f51b4a4b59592c7d89c5406c6c39', name: "dropdown-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), hAsync("button", { key: '755274772a90deae38d613da369863aefe95e297', class: "dp-nav__title", onClick: () => this.cycleView(), type: "button" }, this.viewMode === 'day'
|
|
7920
7920
|
? [hAsync("span", null, MONTHS_ES$1[this.viewMonth]), hAsync("span", null, this.viewYear)]
|
|
7921
|
-
: hAsync("span", null, this.navTitle)), hAsync("button", { key: '
|
|
7922
|
-
hAsync("div", { key: '
|
|
7923
|
-
hAsync("div", { key: '
|
|
7921
|
+
: hAsync("span", null, this.navTitle)), hAsync("button", { key: '6442690df1e434f9fb0128327f8f07c3cecbed4c', class: "dp-nav__btn", onClick: () => this.nextNav(), type: "button" }, hAsync("dropi-icon", { key: '00525ae2cbe5cc8a881d165141de10ce3d72e439', name: "dropdown-right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), this.viewMode === 'day' && this.renderDayView(today), this.viewMode === 'month' && this.renderMonthView(), this.viewMode === 'year' && this.renderYearView()), this.selectionMode === 'range' && [
|
|
7922
|
+
hAsync("div", { key: '688df97b843c3c3342fc301d6c6c74ec88921d68', class: "dp-divider" }),
|
|
7923
|
+
hAsync("div", { key: '2c75f7b004812ee1eb18bbc349f03ab55623cd9f', class: "dp-shortcuts" }, this.shortcuts.map((s, i) => (hAsync("button", { key: i, class: { 'shortcut-btn': true, 'shortcut-btn--active': this.activeShortcut === i }, onClick: () => this.selectShortcut(i), type: "button" }, s.label))))
|
|
7924
7924
|
]))));
|
|
7925
7925
|
}
|
|
7926
7926
|
static get formAssociated() { return true; }
|
|
@@ -8351,10 +8351,10 @@ class DropiDrawer {
|
|
|
8351
8351
|
else
|
|
8352
8352
|
panelStyle['height'] = this.height;
|
|
8353
8353
|
}
|
|
8354
|
-
return (hAsync("div", { key: '
|
|
8354
|
+
return (hAsync("div", { key: 'e173a207447ff88cba0f838844ae629a367a6c98', class: { 'drawer-host': true, 'drawer-host--open': this.open } }, hAsync("div", { key: '1a4b3990d1a4641abcdd53b535b84f99991d1a90', class: "drawer-backdrop", onClick: () => {
|
|
8355
8355
|
if (this.closeOnBackdrop)
|
|
8356
8356
|
this.close();
|
|
8357
|
-
} }), hAsync("div", { key: '
|
|
8357
|
+
} }), hAsync("div", { key: 'eb3042e7506a6d64f6461b5bb7f0a93048299d50', class: `drawer-panel drawer-panel--${this.position}${sizeClass ? ' ' + sizeClass : ''}`, style: panelStyle, role: "dialog", "aria-modal": "true" }, hAsync("div", { key: 'ce4468ae512bd70596313dbaa8a738666ff7ef5d', class: { 'drawer-header': true, 'drawer-header--headless': this.headless } }, hAsync("h3", { key: '30e6af93a4e697590a8dc79748ec4e52f31f42c7', class: "drawer-header__title" }, this.drawerTitle), hAsync("button", { key: '0a817e6236e51112812302ff320c15565071f3bc', class: "drawer-header__close", onClick: () => this.close(), "aria-label": "Cerrar" }, hAsync("dropi-icon", { key: 'c540300a8c5486f6957f0cb4c5e55a70daf17b39', name: "Close-small", iconWidth: "32px", iconHeight: "32px", color: "Gray-Gray-400" }))), hAsync("div", { key: '0b63274c3a8a810c06b1aec621209178499dae86', class: "drawer-body" }, hAsync("slot", { key: '26c6a31c6c8bd9ae409880d85748ed44f01941d0' })), hAsync("div", { key: 'be3dba11d475e95391e039e791f98d11c1625b5e', class: "drawer-footer" }, hAsync("slot", { key: 'e2e42a0543dd9a8fb6278711d948816dda1969a3', name: "footer" })))));
|
|
8358
8358
|
}
|
|
8359
8359
|
static get watchers() { return {
|
|
8360
8360
|
"open": [{
|
|
@@ -8436,7 +8436,7 @@ class DropiDropdown {
|
|
|
8436
8436
|
render() {
|
|
8437
8437
|
const containerClass = this.isInSelect ? 'container-dropi-dropdown-select' : 'container-dropi-dropdown';
|
|
8438
8438
|
const customHeight = this.height || '388px';
|
|
8439
|
-
return (hAsync("div", { key: '
|
|
8439
|
+
return (hAsync("div", { key: '274caba83e2f697257e3803b85517a31d4f0aea8', class: containerClass, style: { '--custom-height': customHeight } }, this.parsedOptions.map((opt, i) => {
|
|
8440
8440
|
const label = opt[this.valueModel] ?? String(opt);
|
|
8441
8441
|
const active = !!opt.checked || this.isSelected(opt);
|
|
8442
8442
|
return (hAsync("div", { class: "content-dropdown", key: i }, hAsync("div", { class: { 'container-check-dropdown': true, 'active-option': active }, onClick: () => this.toggleOption(opt) }, this.parameters.type === 'checkbox' && (hAsync("dropi-checkbox", { name: "_dropdown-option", checked: active })), this.parameters.iconCurrier && (hAsync("dropi-avatars", { image: opt[this.valueModel], type: "transport" })), this.parameters.icon && (hAsync("dropi-avatars", { image: opt.image, type: "transport" })), hAsync("span", { class: "Body-M-Regular" }, label))));
|
|
@@ -8569,7 +8569,7 @@ class DropiEmptyState {
|
|
|
8569
8569
|
}
|
|
8570
8570
|
}
|
|
8571
8571
|
render() {
|
|
8572
|
-
return (hAsync("div", { key: '
|
|
8572
|
+
return (hAsync("div", { key: '46fcf12a371b08151dfc230284baa3ac8e419352', class: "empty-state" }, hAsync("div", { key: 'fad7d4e048cf0ce9dab395f9191949a7c208295b', class: "empty-state-visual" }, this.imageUrl ? (hAsync("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (hAsync("div", { class: "empty-state-img", ref: (el) => { this.illustrationRef = el; } }))), this.title && hAsync("h3", { key: '00e33a607397efab09aef662bf92f79bd37f9245', class: "empty-state-title" }, this.title), this.description && hAsync("p", { key: 'd1fda23fb22f0da491d82f5c18f910d0e3cfd4c1', class: "empty-state-description" }, this.description), hAsync("slot", { key: 'fbaae961ff6c1ffd8e0d8826a72e7ada230dd3e8' }), this.buttonText && (hAsync("div", { key: '107a1affbe36f8304e4c6d7fc5273cef8d0f88d9', class: "empty-state-actions" }, hAsync("dropi-button", { key: 'f5bdca1fe8a92d0acff1f2a2963fae5f457c7351', text: this.buttonText, preIcon: this.buttonIcon, severity: this.buttonSeverity, onClick: () => this.buttonClickEvent.emit() })))));
|
|
8573
8573
|
}
|
|
8574
8574
|
static get style() { return dropiEmptyStateCss(); }
|
|
8575
8575
|
static get cmpMeta() { return {
|
|
@@ -8612,7 +8612,7 @@ class DropiFavoriteButton {
|
|
|
8612
8612
|
this.toggleFavorite.emit(this.isFavorite);
|
|
8613
8613
|
}
|
|
8614
8614
|
render() {
|
|
8615
|
-
return (hAsync("button", { key: '
|
|
8615
|
+
return (hAsync("button", { key: '92a8bc70796961d81151fcac6550a3bbf66751bc', class: { 'fav-btn': true, 'fav-btn--active': this.isFavorite }, onClick: () => this.toggle(), onMouseEnter: () => this.hovered = true, onMouseLeave: () => this.hovered = false, "aria-label": this.isFavorite ? 'Quitar de favoritos' : 'Agregar a favoritos', "aria-pressed": String(this.isFavorite) }, hAsync("dropi-icon", { key: '60eb9d714ad708c0d081de9e54205091a29889a6', name: this.isFavorite || this.hovered ? 'Heart-solid' : 'Heart', iconWidth: "19px", iconHeight: "19px", color: this.isFavorite || this.hovered ? 'Primary-Primary-500' : 'Gray-Gray-800' })));
|
|
8616
8616
|
}
|
|
8617
8617
|
static get style() { return dropiFavoriteButtonCss(); }
|
|
8618
8618
|
static get cmpMeta() { return {
|
|
@@ -8860,7 +8860,7 @@ class DropiFileUpload {
|
|
|
8860
8860
|
const cardFiles = files.filter(f => f.typeView === 'card');
|
|
8861
8861
|
const showDropZone = files.length < (this.maxFiles ?? 1) && !this.isDropZoneHidden();
|
|
8862
8862
|
const isSmall = this.dragAndDropSize === 'small';
|
|
8863
|
-
return (hAsync("div", { key: '
|
|
8863
|
+
return (hAsync("div", { key: '53a6c0062929bef4c8223e0c4e52a0050165a800', class: "upload-container" }, (this.title || this.label) && (hAsync("div", { key: '7cbf5d99bf080c8150271922e843e75fd00345b2', class: "upload-header" }, this.title && hAsync("div", { key: '8739652541b7e9207cf9eecb4a5364bdb2681928', class: "text title" }, this.title), this.label && hAsync("div", { key: 'a5f93bc2a2a45c8097f9e057014863a62e2ea2db', class: "text label" }, this.label))), this.error && (hAsync("dropi-alert", { key: 'bcf90dfde5556dc69e832384e2eaa3b655ad3038', message: this.errorMessage, type: "default", state: "error", dismissable: true, showButton: false, onDropiClose: () => { this.error = false; } })), showDropZone && (hAsync("div", { key: '6a8f194bd7f84a72b0a76499fc627cf039a7a5cc', class: { 'file-upload': true, 'drag-over': this.dragging }, onDragOver: (e) => this.onDragOver(e), onDragEnter: (e) => this.onDragEnter(e), onDragLeave: () => this.onDragLeave(), onDrop: (e) => this.onDrop(e) }, hAsync("div", { key: 'e1b60b9cac11bab0dc0dc5909e27816cbfa9873b', class: `file-upload__zone${this.dragging ? ' drag-over' : ''}` }, !isSmall && (hAsync("svg", { key: 'd3d6613058ca61eed4ae3c14d0de036ba25e096c', width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { key: '6e6dad9c5ace86f8bae848a596b85559a00afc00', d: "M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20Z", fill: "#FEF8F1" }), hAsync("g", { key: '3cfcd89899ad365af2c1e2f948dd14e9418a6b7b', "clip-path": "url(#up)" }, hAsync("path", { key: 'f685ed115915f53fd0d06cac49f8a6597f605ebd', d: "M19.3379 13.7187L19.3332 24.0107C19.3332 24.1875 19.4035 24.357 19.5285 24.4821C19.6535 24.6071 19.8231 24.6773 19.9999 24.6773C20.1767 24.6773 20.3463 24.6071 20.4713 24.4821C20.5963 24.357 20.6666 24.1875 20.6666 24.0107L20.6712 13.73L22.6126 15.672C22.7376 15.797 22.9071 15.8672 23.0839 15.8672C23.2607 15.8672 23.4302 15.797 23.5552 15.672C23.6802 15.547 23.7504 15.3774 23.7504 15.2007C23.7504 15.0239 23.6802 14.8543 23.5552 14.7293L21.4145 12.586C21.2288 12.4001 21.0083 12.2527 20.7655 12.1521C20.5228 12.0515 20.2626 11.9998 19.9999 11.9998C19.7371 11.9998 19.477 12.0515 19.2342 12.1521C18.9915 12.2527 18.771 12.4001 18.5852 12.586L16.4445 14.7273C16.3196 14.8523 16.2494 15.0219 16.2494 15.1987C16.2494 15.3754 16.3196 15.545 16.4445 15.67C16.5696 15.795 16.7391 15.8652 16.9159 15.8652C17.0927 15.8652 17.2622 15.795 17.3872 15.67L19.3379 13.7187Z", fill: "#F49A3D" }), hAsync("path", { key: '49242cfde754e607ae1577c29e63c94c1bf1634d', d: "M26.6667 23.3329V25.9996C26.6667 26.1764 26.5964 26.346 26.4714 26.471C26.3464 26.596 26.1768 26.6663 26 26.6663H14C13.8232 26.6663 13.6536 26.596 13.5286 26.471C13.4036 26.346 13.3333 26.1764 13.3333 25.9996V23.3329C13.3333 23.1561 13.2631 22.9865 13.1381 22.8615C13.013 22.7365 12.8435 22.6663 12.6667 22.6663C12.4899 22.6663 12.3203 22.7365 12.1953 22.8615C12.0702 22.9865 12 23.1561 12 23.3329V25.9996C12 26.53 12.2107 27.0387 12.5858 27.4138C12.9609 27.7889 13.4696 27.9996 14 27.9996H26C26.5304 27.9996 27.0391 27.7889 27.4142 27.4138C27.7893 27.0387 28 26.53 28 25.9996V23.3329C28 23.1561 27.9298 22.9865 27.8047 22.8615C27.6797 22.7365 27.5101 22.6663 27.3333 22.6663C27.1565 22.6663 26.987 22.7365 26.8619 22.8615C26.7369 22.9865 26.6667 23.1561 26.6667 23.3329Z", fill: "#F49A3D" })), hAsync("defs", { key: 'f1ede9ee7ad2d7498553431c83005c485342ef3a' }, hAsync("clipPath", { key: '877741b31ad66e301291cca2a39b4d2fb0b05569', id: "up" }, hAsync("rect", { key: '337f7c89c3cbbdaeafd38413c85e4ce9c0961432', width: "16", height: "16", fill: "white", transform: "translate(12 12)" }))))), hAsync("div", { key: '277a7354341ce2a4d47d417ef8bdcd8c4914fa16', class: isSmall ? 'info size-small-upload' : 'info' }, hAsync("div", { key: 'ae2e22bd7d02c70eb20435c5044ec67707a76c27', class: "title" }, this.textDropZone), isSmall && (hAsync("dropi-button", { key: 'e4a465cb0a1c4df657b4f97d9358373266d5a184', text: this.textButton, size: "small", onClick: (e) => { e.stopPropagation(); this.openFilePicker(); } }))), !isSmall && (hAsync("div", { key: '91580967159ab227dacb03ffc289f414c02e5912', class: "info-desc" }, this.accept && hAsync("div", { key: '16ef9fbeb7dc572f8f5ebf1153fc8f1df73d35ca', class: "description" }, "Formatos admitidos: ", this.accept), hAsync("div", { key: 'a46265cd28533f4d8762efbb7010630b89a53156', class: "description" }, "Tama\u00F1o m\u00E1ximo: ", this.maxFileSizeMB, "MB"))), !isSmall && (hAsync("dropi-button", { key: '43ee9e62526ead6be2db1efdd93ed97b00adccb6', text: this.textButton, size: "small", onClick: (e) => { e.stopPropagation(); this.openFilePicker(); } })), hAsync("input", { key: 'c1e074ebeccda45a7a732f875c95606ed080c6cc', ref: (el) => this.inputRef = el, type: "file", accept: this.accept, multiple: this.multiple, class: "upload-hidden", onChange: (e) => this.onInputChange(e) })))), this.selectedFiles.length > 0 && (hAsync("div", { key: 'c0159af79236ecb940173fb32677d488f622f434', class: "files-container" }, gridFiles.length > 0 && (hAsync("div", { key: '4ab957bf55cdfed0ea56c56ecccb3738ee0eed72', class: "grid-list" }, gridFiles.map(f => this.renderGridItem(f)), gridFiles.length < this.maxFiles && (hAsync("div", { key: 'b9a171ce8a3d79362131e90d5b9ca3f72e5c4a5c', class: "add-img", onClick: () => this.addImage() }, hAsync("div", { key: 'c6a165d81b91f15a18c64b5cd22da22a5eeef6e0', class: "icon" }, hAsync("svg", { key: '6e89310ce178bc2b981aa9fdcd854568b682f55a', width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { key: 'c3f7d47b4bedd9431283a0d2706cf1c24b811b78', d: "M9.77774 6.4444H7.55551V4.22218C7.55551 4.07484 7.49698 3.93353 7.3928 3.82934C7.28861 3.72516 7.1473 3.66663 6.99996 3.66663C6.85262 3.66663 6.71131 3.72516 6.60712 3.82934C6.50294 3.93353 6.4444 4.07484 6.4444 4.22218V6.4444H4.22218C4.07484 6.4444 3.93353 6.50294 3.82934 6.60712C3.72516 6.71131 3.66663 6.85262 3.66663 6.99996C3.66663 7.1473 3.72516 7.28861 3.82934 7.3928C3.93353 7.49698 4.07484 7.55551 4.22218 7.55551H6.4444V9.77774C6.4444 9.92508 6.50294 10.0664 6.60712 10.1706C6.71131 10.2748 6.85262 10.3333 6.99996 10.3333C7.1473 10.3333 7.28861 10.2748 7.3928 10.1706C7.49698 10.0664 7.55551 9.92508 7.55551 9.77774V7.55551H9.77774C9.92508 7.55551 10.0664 7.49698 10.1706 7.3928C10.2748 7.28861 10.3333 7.1473 10.3333 6.99996C10.3333 6.85262 10.2748 6.71131 10.1706 6.60712C10.0664 6.50294 9.92508 6.4444 9.77774 6.4444Z", fill: "#32394D" }))), hAsync("div", { key: '0b335f0d575d63566a2a8e440029240889710246', class: "text" }, "Agregar"))))), cardFiles.length > 0 && (hAsync("div", { key: '5a6b3e6b24dbbd59199c9f602b2e1d5edae59e0e', class: "card-list" }, cardFiles.map(f => this.renderCardItem(f))))))));
|
|
8864
8864
|
}
|
|
8865
8865
|
static get style() { return dropiFileUploadCss(); }
|
|
8866
8866
|
static get cmpMeta() { return {
|
|
@@ -8954,7 +8954,7 @@ class DropiFileUploadProgressBar {
|
|
|
8954
8954
|
};
|
|
8955
8955
|
}
|
|
8956
8956
|
render() {
|
|
8957
|
-
return (hAsync("div", { key: '
|
|
8957
|
+
return (hAsync("div", { key: '9a1cff54d6ab96637e149accd7cb08d5c5e6e516', class: "container-progress-bar" }, hAsync("div", { key: '76330324e1429af78b58cee49a22df5af3ed44f1', class: "container-icon-info", style: { display: this.fileExtension !== 'pdf' ? 'flex' : 'none' } }, this.type !== 'image' && (hAsync("dropi-icon", { key: '44aeacefe3b1d18ac8f55ccd5693b27747b15e9b', name: "File-text", iconWidth: "24px", iconHeight: "24px", color: "Info-Info-600" })), this.type === 'image' && !this.urlImage && (hAsync("div", { key: '416fc3b7387f05439d98f08a91505ae9e352c56d', style: { width: '34px', height: '34px', borderRadius: '8px', background: 'var(--Gray-Gray-100)' } })), this.type === 'image' && this.urlImage && (hAsync("img", { key: '992ad464b90cb9503b004324c441aa0baaaedb0a', src: this.urlImage, class: "image-to-view", width: "34", height: "34", alt: "" }))), this.fileExtension === 'pdf' && (hAsync("div", { key: '33730ac6969b34483f0aeb433acbccd17513b6c0', class: "icon-pdf" }, hAsync("svg", { key: '52b10ba62661a375c42b27b67e2f97a3edf3b1e9', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, hAsync("g", { key: '18b96ab58cee059d63413ec9174ecb54a3720f25', "clip-path": "url(#clip0_6227_22223)" }, hAsync("path", { key: '344b8601ca32790c8d13b4227bc64f5438db6eae', d: "M16.6243 4.61667L13.716 1.70833C12.616 0.608333 11.1493 0 9.59102 0H5.83268C3.53268 0 1.66602 1.86667 1.66602 4.16667V15.8333C1.66602 18.1333 3.53268 20 5.83268 20H14.166C16.466 20 18.3327 18.1333 18.3327 15.8333V8.74167C18.3327 7.18333 17.7243 5.71667 16.6243 4.61667ZM15.4493 5.79167C15.716 6.05833 15.941 6.35 16.1243 6.66667H12.5077C12.0493 6.66667 11.6743 6.29167 11.6743 5.83333V2.21667C11.991 2.4 12.2827 2.625 12.5493 2.89167L15.4577 5.8L15.4493 5.79167ZM16.666 15.8333C16.666 17.2083 15.541 18.3333 14.166 18.3333H5.83268C4.45768 18.3333 3.33268 17.2083 3.33268 15.8333V4.16667C3.33268 2.79167 4.45768 1.66667 5.83268 1.66667H9.59102C9.72435 1.66667 9.86602 1.66667 9.99935 1.68333V5.83333C9.99935 7.20833 11.1243 8.33333 12.4993 8.33333H16.6493C16.666 8.46667 16.666 8.6 16.666 8.74167V15.8333ZM5.90768 10.8333H4.99935C4.54102 10.8333 4.16602 11.2083 4.16602 11.6667V15.3667C4.16602 15.6583 4.39935 15.8833 4.68268 15.8833C4.96602 15.8833 5.19935 15.65 5.19935 15.3667V14.35H5.89935C6.88268 14.35 7.68268 13.5583 7.68268 12.5917C7.68268 11.625 6.88268 10.8333 5.89935 10.8333H5.90768ZM5.90768 13.3083H5.21602V11.875H5.91602C6.31602 11.875 6.65768 12.2 6.65768 12.5917C6.65768 12.9833 6.31602 13.3083 5.91602 13.3083H5.90768ZM15.8493 11.3583C15.8493 11.65 15.616 11.875 15.3327 11.875H13.9243V12.825H14.9577C15.2493 12.825 15.4743 13.0583 15.4743 13.3417C15.4743 13.625 15.241 13.8583 14.9577 13.8583H13.9243V15.3583C13.9243 15.65 13.691 15.875 13.4077 15.875C13.1243 15.875 12.891 15.6417 12.891 15.3583V11.35C12.891 11.0583 13.1243 10.8333 13.4077 10.8333H15.3327C15.6243 10.8333 15.8493 11.0667 15.8493 11.35V11.3583ZM10.0743 10.8417H9.16602C8.70768 10.8417 8.33268 11.2167 8.33268 11.675V15.375C8.33268 15.6667 8.56602 15.8417 8.84935 15.8417C9.13268 15.8417 10.066 15.8417 10.066 15.8417C11.0493 15.8417 11.8493 15.05 11.8493 14.0833V12.6C11.8493 11.6333 11.0493 10.8417 10.066 10.8417H10.0743ZM10.816 14.0833C10.816 14.475 10.4743 14.8 10.0743 14.8H9.38268V11.8833H10.0827C10.4827 11.8833 10.8243 12.2083 10.8243 12.6V14.0833H10.816Z", fill: "#DE6061" })), hAsync("defs", { key: '9ae2724b7a4bc69e7d56d31672c59b8a59603c14' }, hAsync("clipPath", { key: '925d2de4afd87a7a92ede37730872e8f94d88e14', id: "clip0_6227_22223" }, hAsync("rect", { key: '59e3907da52ab8f253d095150366cd8c4ad0ef10', width: "20", height: "20", fill: "white" })))))), hAsync("div", { key: '728ef5d61364f355f0a578f2cf2671b4ef9ae521', class: "container-bar-title" }, hAsync("p", { key: '0ff7872cfa5bfa6965ac637d9aec9bd0b6ef33ea' }, this.textFile), hAsync("progress", { key: '6723a5b4d6cbaa66f86de3ccaf07070720d8268d', value: this.progress, max: "100" })), this.progress === 100 && this.isPreview && (hAsync("div", { key: '4866e4eab7b6a2a208dd898ccf41d185cc3b32d9', class: "view-icon", onClick: () => this.viewFile.emit() }, hAsync("svg", { key: '4a20733a809c89b7d298986d7546d91ca0b28e91', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "14", viewBox: "0 0 18 14", fill: "none" }, hAsync("path", { key: '54099a7f02bc603ab33b2a42a5c70e3988ead535', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.07148 4.14758C7.64227 3.76618 8.31334 3.56262 8.99983 3.56262C9.92004 3.56372 10.8022 3.92976 11.4529 4.58045C12.1036 5.23114 12.4697 6.11334 12.4708 7.03355C12.4708 7.72004 12.2672 8.39111 11.8858 8.9619C11.5044 9.53269 10.9623 9.97757 10.3281 10.2403C9.69387 10.503 8.99598 10.5717 8.32268 10.4378C7.64939 10.3039 7.03092 9.9733 6.54551 9.48788C6.06009 9.00246 5.72951 8.384 5.59558 7.7107C5.46166 7.0374 5.53039 6.33951 5.7931 5.70528C6.05581 5.07105 6.50069 4.52897 7.07148 4.14758ZM7.84282 8.76514C8.18529 8.99398 8.58794 9.11612 8.99983 9.11612C9.55216 9.11612 10.0819 8.8967 10.4724 8.50615C10.863 8.11559 11.0824 7.58588 11.0824 7.03355C11.0824 6.62166 10.9602 6.21902 10.7314 5.87654C10.5026 5.53407 10.1773 5.26714 9.79679 5.10952C9.41625 4.95189 8.99752 4.91065 8.59354 4.99101C8.18956 5.07136 7.81849 5.26971 7.52723 5.56096C7.23598 5.85221 7.03764 6.22329 6.95728 6.62727C6.87693 7.03124 6.91817 7.44998 7.07579 7.83052C7.23342 8.21105 7.50034 8.53631 7.84282 8.76514Z", fill: "#475066" }), hAsync("path", { key: '50b4ec230be5bd6945865082bb341a808de5e2f5', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.99996 0.546387C13.2984 0.546387 15.7475 3.48835 16.8241 5.24187C17.157 5.78022 17.3333 6.40064 17.3333 7.03357C17.3333 7.6665 17.157 8.28692 16.8241 8.82526C15.7475 10.5788 13.2984 13.5207 8.99996 13.5207C4.70155 13.5207 2.25246 10.5788 1.17577 8.82526C0.842931 8.28692 0.666626 7.6665 0.666626 7.03357C0.666626 6.40064 0.842931 5.78022 1.17577 5.24187C2.25246 3.48835 4.70155 0.546387 8.99996 0.546387ZM8.99996 12.1324C12.6229 12.1324 14.7159 9.60206 15.6406 8.09845C15.8383 7.77846 15.943 7.40973 15.943 7.03357C15.943 6.6574 15.8383 6.28867 15.6406 5.96868C14.7159 4.4623 12.6229 1.93476 8.99996 1.93476C5.377 1.93476 3.28402 4.46507 2.35936 5.96868C2.16161 6.28867 2.05687 6.6574 2.05687 7.03357C2.05687 7.40973 2.16161 7.77846 2.35936 8.09845C3.28402 9.60206 5.377 12.1324 8.99996 12.1324Z", fill: "#475066" })))), this.progress === 100 && !this.disabled && (hAsync("div", { key: '5b3d075f123d43f38eb147071082fb41104144a3', class: "container-icon-trash", onClick: () => this.deleteFile.emit() }, hAsync("svg", { key: '961615602fd1496823409ca31cee5c701bea16af', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "21", viewBox: "0 0 20 21", fill: "none" }, hAsync("path", { key: 'd4e9856f300a1a46afc1c98c774a875e75ede973', d: "M16.2501 4.94477H14.0973C13.9362 4.16103 13.5097 3.45682 12.8899 2.95082C12.27 2.44483 11.4947 2.168 10.6946 2.16699H9.30566C8.50552 2.168 7.73019 2.44483 7.11035 2.95082C6.49051 3.45682 6.06406 4.16103 5.90289 4.94477H3.75011C3.56593 4.94477 3.3893 5.01793 3.25906 5.14817C3.12883 5.2784 3.05566 5.45504 3.05566 5.63921C3.05566 5.82339 3.12883 6.00003 3.25906 6.13026C3.3893 6.26049 3.56593 6.33366 3.75011 6.33366H4.44455V15.3614C4.44566 16.282 4.81183 17.1645 5.46276 17.8155C6.11369 18.4664 6.99622 18.8326 7.91677 18.8337H12.0834C13.004 18.8326 13.8865 18.4664 14.5375 17.8155C15.1884 17.1645 15.5546 16.282 15.5557 15.3614V6.33366H16.2501C16.4343 6.33366 16.6109 6.26049 16.7412 6.13026C16.8714 6.00003 16.9446 5.82339 16.9446 5.63921C16.9446 5.45504 16.8714 5.2784 16.7412 5.14817C16.6109 5.01793 16.4343 4.94477 16.2501 4.94477ZM9.30566 3.55588H10.6946C11.1253 3.55641 11.5453 3.69017 11.8971 3.93883C12.2488 4.18749 12.515 4.53886 12.6591 4.94477H7.34108C7.48524 4.53886 7.75143 4.18749 8.10315 3.93883C8.45488 3.69017 8.87492 3.55641 9.30566 3.55588ZM14.1668 15.3614C14.1668 15.914 13.9473 16.4439 13.5566 16.8346C13.1659 17.2253 12.636 17.4448 12.0834 17.4448H7.91677C7.36424 17.4448 6.83434 17.2253 6.44364 16.8346C6.05294 16.4439 5.83344 15.914 5.83344 15.3614V6.33366H14.1668V15.3614Z", fill: "#DE6061" }), hAsync("path", { key: '66352c37fc6b1525965b0374984d91f60ad7ce9a', d: "M8.61128 14.6666C8.79545 14.6666 8.97209 14.5934 9.10232 14.4632C9.23256 14.3329 9.30572 14.1563 9.30572 13.9721V9.80545C9.30572 9.62127 9.23256 9.44464 9.10232 9.3144C8.97209 9.18417 8.79545 9.11101 8.61128 9.11101C8.4271 9.11101 8.25046 9.18417 8.12023 9.3144C7.99 9.44464 7.91683 9.62127 7.91683 9.80545V13.9721C7.91683 14.1563 7.99 14.3329 8.12023 14.4632C8.25046 14.5934 8.4271 14.6666 8.61128 14.6666Z", fill: "#DE6061" }), hAsync("path", { key: 'bbdf05a15788ec40df5e66d2ce33852ea50ecbe7', d: "M11.389 14.6666C11.5731 14.6666 11.7498 14.5934 11.88 14.4632C12.0102 14.3329 12.0834 14.1563 12.0834 13.9721V9.80545C12.0834 9.62127 12.0102 9.44464 11.88 9.3144C11.7498 9.18417 11.5731 9.11101 11.389 9.11101C11.2048 9.11101 11.0281 9.18417 10.8979 9.3144C10.7677 9.44464 10.6945 9.62127 10.6945 9.80545V13.9721C10.6945 14.1563 10.7677 14.3329 10.8979 14.4632C11.0281 14.5934 11.2048 14.6666 11.389 14.6666Z", fill: "#DE6061" }))))));
|
|
8958
8958
|
}
|
|
8959
8959
|
static get watchers() { return {
|
|
8960
8960
|
"progress": [{
|
|
@@ -9366,11 +9366,13 @@ class DropiIlustrationIcon {
|
|
|
9366
9366
|
tagProduct = false;
|
|
9367
9367
|
/** Base path for illustration assets. Override if assets are served from a different location. */
|
|
9368
9368
|
basePath = '/node_modules/@dropi/ui/assets/icons/ilustration';
|
|
9369
|
-
insigniaIcons
|
|
9370
|
-
|
|
9371
|
-
|
|
9372
|
-
|
|
9373
|
-
|
|
9369
|
+
get insigniaIcons() {
|
|
9370
|
+
return {
|
|
9371
|
+
verified: `${this.basePath}/verified-new.svg`,
|
|
9372
|
+
premium: `${this.basePath}/premium-new.svg`,
|
|
9373
|
+
exclusive: `${this.basePath}/exclusive.svg`,
|
|
9374
|
+
};
|
|
9375
|
+
}
|
|
9374
9376
|
getIconName(state) {
|
|
9375
9377
|
const map = {
|
|
9376
9378
|
success: 'Check-circle',
|
|
@@ -9381,7 +9383,7 @@ class DropiIlustrationIcon {
|
|
|
9381
9383
|
return map[state] || 'Comment-round_info';
|
|
9382
9384
|
}
|
|
9383
9385
|
render() {
|
|
9384
|
-
return (hAsync("div", { key: '
|
|
9386
|
+
return (hAsync("div", { key: '452266c0500ed2426ae0b0d7552a735c0022500b', class: "dropi-ilustration" }, this.type === 'dropi' && (hAsync("figure", { key: '4ac1e8e482b5b80df9dceaa93630308b52d5db0d', class: "dropi-ilustration__image" }, hAsync("img", { key: '019a5c80798fc898a08ce851ab69b381d784e3f9', src: `${this.basePath}/${(!this.state || String(this.state) === 'undefined' || String(this.state) === 'null') ? 'default' : this.state}.svg`, alt: this.state ?? 'default', onError: (e) => { e.target.src = `${this.basePath}/default.svg`; } }))), this.type === 'mb' && (hAsync("figure", { key: 'e7416f766fe3c0d633379bd9172ecfbb4b7f2a43', class: `dropi-ilustration__image-mb ${this.state}` }, ['success', 'error', 'info', 'warning'].includes(this.state) && (hAsync("dropi-icon", { key: 'c0fdd2564c0c0f821987cb13a519837a71afddbc', name: this.getIconName(this.state), iconWidth: "24px", iconHeight: "24px", color: "Neutral-White" })))), this.type === 'insignia' && (hAsync("figure", { key: '8f1f4ace45532d06dbc38d34b3e1e32317d542b7', class: this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia' }, hAsync("img", { key: '0d114a0b12bb3d31c222a34b09a47bd6a42e1dba', src: this.insigniaIcons[this.stateInsignia], alt: this.stateInsignia, onError: (e) => { e.target.src = `${this.basePath}/default.svg`; } }), this.tagProduct && (hAsync("p", { key: 'd1ef34a4fd92ee7b97a5a224d9a21b9e54976989', class: `tag tag--${this.stateInsignia}` }, hAsync("span", { key: '72ea7cef3bbc86f6330abb9c4f34c89e62ac3417', class: "Caption-S" }, this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1))))))));
|
|
9385
9387
|
}
|
|
9386
9388
|
static get style() { return dropiIlustrationIconCss(); }
|
|
9387
9389
|
static get cmpMeta() { return {
|
|
@@ -9438,7 +9440,7 @@ class DropiImageMiniature {
|
|
|
9438
9440
|
}
|
|
9439
9441
|
render() {
|
|
9440
9442
|
const imgs = this.parsedImages;
|
|
9441
|
-
return (hAsync("div", { key: '
|
|
9443
|
+
return (hAsync("div", { key: 'ad66f7432e761f48af9ca3db80f562091b040099', class: "miniature" }, this.label && hAsync("span", { key: '9711b8c5554bdd94eba58f8acbdb461b5bd9530f', class: "miniature__label" }, this.label), hAsync("div", { key: '45901b7593b09cef9b3089b325341d2c36658676', class: "miniature__grid" }, imgs.map((src, i) => (hAsync("div", { class: "miniature__item", style: { width: this.width, height: this.height }, key: i, onClick: () => this.dropiImageClick.emit({ images: imgs, index: i }) }, hAsync("img", { src: src, alt: `imagen ${i + 1}`, loading: "lazy", onError: (e) => this.handleError(e) }), hAsync("div", { class: "miniature__zoom" }, hAsync("dropi-icon", { name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Neutral-White" }))))))));
|
|
9442
9444
|
}
|
|
9443
9445
|
static get style() { return dropiImageMiniatureCss(); }
|
|
9444
9446
|
static get cmpMeta() { return {
|
|
@@ -9782,14 +9784,14 @@ class DropiInput {
|
|
|
9782
9784
|
render() {
|
|
9783
9785
|
const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
|
|
9784
9786
|
const showIconInline = !!this.icon;
|
|
9785
|
-
return (hAsync("div", { key: '
|
|
9787
|
+
return (hAsync("div", { key: 'a16b56b6be24372be1fc0a16e65d13bfea3dcf0f', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (hAsync("label", { key: '0030ccbc829d16aa17a954624933106752f972bc', class: "input-label Body-S-Regular", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && hAsync("span", { key: 'f1476695b9778aa767e121f5d5ace0e36b4fb9a0', class: "asterisk" }, " *"))), hAsync("div", { key: '1e3dee560139338f206dd4c94fa52e1c248e6da6', class: "form-group" }, hAsync("div", { key: '7c1a2754de046eac9c39a005495fa391a7b7b02e', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (hAsync("dropi-icon", { key: 'e2ba6416f090d563206e3d98e9f3ab76f197df20', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (hAsync("dropi-icon", { key: 'bf2b58fa9cf0d3dbb470fb3bb4466545d4bc6a75', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' }, color: "Gray-Gray-500", onClick: () => this.togglePassword() })), hAsync("input", { key: '51a1de81d4200c79f46b61afef165fdad0ebb061', id: this.resolvedId, class: {
|
|
9786
9788
|
'form-control': true,
|
|
9787
9789
|
'form-control-valid': !this.isInvalid && this.touched && !!this.value,
|
|
9788
9790
|
'form-control-invalid': this.isInvalid,
|
|
9789
9791
|
'padding-icon': showIconInline,
|
|
9790
9792
|
'text-password': this.passwordInput && !this.showPassword,
|
|
9791
9793
|
'fixed-label-input': this.fixedLabel,
|
|
9792
|
-
}, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, autoComplete: this.autocomplete, "data-cy": undefined, onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (hAsync("label", { key: '
|
|
9794
|
+
}, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, autoComplete: this.autocomplete, "data-cy": undefined, onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (hAsync("label", { key: '38b78f85551b8c9f6dee1c85e48fa67149f58e29', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && hAsync("span", { key: 'd23e87d325e6c051c04a0eb0671a53d8cec05b41', class: "asterisk" }, " *"))), this.showHelper && (hAsync("div", { key: '84e228278687d583ffa056c4540da63356aeaa1f', class: "form-control-helper" }, this.isInvalid && hAsync("dropi-icon", { key: 'f26a6e681a262c2f348412e4bf9055e417e76261', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), hAsync("span", { key: '9e0376883c4727d84aec3f4c7da7d76196639740', class: {
|
|
9793
9795
|
'disabled-helper': this.disabled,
|
|
9794
9796
|
'invalid-color': this.isInvalid,
|
|
9795
9797
|
} }, this.textHelper)))))));
|
|
@@ -9954,7 +9956,7 @@ class DropiLogo {
|
|
|
9954
9956
|
e.target.src = FALLBACK_SVG;
|
|
9955
9957
|
}
|
|
9956
9958
|
render() {
|
|
9957
|
-
return (hAsync("figure", { key: '
|
|
9959
|
+
return (hAsync("figure", { key: '7e0647d080700fcac7fe488d72024b3ed1f40b08', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, hAsync("img", { key: 'baa1d5c20397ee47a9f55ff6be7acae99b7c0f41', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", onError: (e) => this.handleError(e) })));
|
|
9958
9960
|
}
|
|
9959
9961
|
static get style() { return dropiLogoCss(); }
|
|
9960
9962
|
static get cmpMeta() { return {
|
|
@@ -10356,7 +10358,7 @@ class DropiModal {
|
|
|
10356
10358
|
}
|
|
10357
10359
|
}
|
|
10358
10360
|
render() {
|
|
10359
|
-
return (hAsync("div", { key: '
|
|
10361
|
+
return (hAsync("div", { key: '95847ba48baae69b93888cb59ecaa9d2130ae17a', class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}` }, (this.modal ?? true) && hAsync("div", { key: '78acc3c2f1b7327b6fc1770a9536cdf0c2c57f99', class: "modal-mask", onClick: () => this.canDismiss && this.dismissable && this.dismiss() }), hAsync("div", { key: '63906a7ed0432879c3256a659ddd9773099244bc', class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true", style: this.maxWidth ? { maxWidth: this.maxWidth, width: '100%' } : {} }, this.showHeader && (hAsync("div", { key: '7d960505ea8fd7804ac67ceb88b9195e6ad1998d', class: "modal-header" }, this.header && hAsync("span", { key: 'fed4b8a2e6c89fca39a8766d0e843db7c184be59', class: "modal-title" }, this.header), hAsync("slot", { key: 'b2c6c5cc1f019229c3ad5028e42b1fd887494abd', name: "header" }), this.showCloseIcon && (hAsync("button", { key: '24fc8ff422ea5c7e6a8c0737acbb29c1d7467f40', class: "modal-close", onClick: () => this.dismiss(), "aria-label": "Cerrar" }, "\u00D7")))), hAsync("div", { key: '472a7dfe704b0b8d129b00bc88204602ead66403', class: "modal-content" }, hAsync("slot", { key: '6b3e6fdefca0c6510d4fdbbccce53a5efa52e4c8' })), this.showFooter && hAsync("div", { key: '5bd3c15d4d1fb2ebffad79c9314d03d1d72dae29', class: "modal-footer" }, hAsync("slot", { key: '1980d019b142e2a00f55a3a755e9e08d0393c5e5', name: "footer" })))));
|
|
10360
10362
|
}
|
|
10361
10363
|
static get watchers() { return {
|
|
10362
10364
|
"visible": [{
|
|
@@ -10448,9 +10450,9 @@ class DropiNavbar {
|
|
|
10448
10450
|
}
|
|
10449
10451
|
render() {
|
|
10450
10452
|
const items = this.parsedData;
|
|
10451
|
-
return (hAsync("nav", { key: '
|
|
10453
|
+
return (hAsync("nav", { key: '83e2aa66dcaeabc1629c4c23ee87f0ed8799eae7', class: "navbar" }, hAsync("div", { key: '500612a656db49c3962dcb2b2fb62ced5e6f9f5e', class: "navbar__left" }, this.showMenuToggle && (hAsync("button", { key: 'a85325e0bfaf6ed1f739abf35460c0fd9fe12bdb', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, hAsync("dropi-icon", { key: 'd94b443c19e6212547dbe4d97fe907be862726f9', name: "Menu", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (hAsync("img", { key: '0da8e838faac7f31175935ea9b0cfe6fb68ad516', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && hAsync("span", { key: 'ae1d08c0cac208bf31e1978da68f89cc6eec13d2', class: "navbar__title" }, this.title)), items.length > 0 && (hAsync("ul", { key: '48dcc829cd503ce2a3f3929ccb03782b226a18ed', class: "navbar__items" }, items.map(item => (hAsync("li", null, hAsync("button", { class: { 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }, onClick: () => this.clickLoadItem.emit(item), type: "button" }, item.icon && hAsync("dropi-icon", { name: item.icon, iconWidth: "16px", iconHeight: "16px", color: item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600' }), hAsync("span", null, item.name?.value || item.label), item.badge != null && String(item.badge) !== '0' && (hAsync("span", { class: "navbar__badge" }, item.badge)))))))), hAsync("div", { key: 'f6a7a4bfcf90829fdf78eade141c1a43a3ef213c', class: "navbar__right" }, hAsync("button", { key: '652f412206186a3e8325e8a41cefa78049da39a6', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, hAsync("dropi-icon", { key: 'ddf8877a77c15d8c0582866d56851f5ee9b9b5f1', name: "Bell", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (hAsync("span", { key: '613f9d9c7a7b0c1125aee602be6672ce478cef26', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), hAsync("button", { key: 'af0e25263309dc90ae4f0047c25089b9486562d4', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
|
|
10452
10454
|
? hAsync("img", { class: "navbar__avatar", src: this.userAvatar, alt: this.userName })
|
|
10453
|
-
: hAsync("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && hAsync("span", { key: '
|
|
10455
|
+
: hAsync("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && hAsync("span", { key: '54a6f1b97d2d8f11fe5556510638d4cbef2d638b', class: "navbar__user-name" }, this.userName), hAsync("dropi-icon", { key: '21dd9ed6cf46d719d8b49c65fba8f787f7a84629', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })))));
|
|
10454
10456
|
}
|
|
10455
10457
|
static get style() { return dropiNavbarCss(); }
|
|
10456
10458
|
static get cmpMeta() { return {
|
|
@@ -10485,8 +10487,6 @@ class DropiOtpSendCode {
|
|
|
10485
10487
|
registerInstance(this, hostRef);
|
|
10486
10488
|
this.codeCompleted = createEvent(this, "codeCompleted");
|
|
10487
10489
|
this.codeAccepted = createEvent(this, "codeAccepted");
|
|
10488
|
-
this.dropiCodeCompleted = createEvent(this, "dropiCodeCompleted");
|
|
10489
|
-
this.dropiCodeAccepted = createEvent(this, "dropiCodeAccepted");
|
|
10490
10490
|
this.dropiResend = createEvent(this, "dropiResend");
|
|
10491
10491
|
if (hostRef.$hostElement$["s-ei"]) {
|
|
10492
10492
|
this.internals = hostRef.$hostElement$["s-ei"];
|
|
@@ -10525,10 +10525,6 @@ class DropiOtpSendCode {
|
|
|
10525
10525
|
codeCompleted;
|
|
10526
10526
|
/** Emitted when all digits are entered (alternative event). */
|
|
10527
10527
|
codeAccepted;
|
|
10528
|
-
/** Compatibility alias for codeCompleted */
|
|
10529
|
-
dropiCodeCompleted;
|
|
10530
|
-
/** Compatibility alias for codeAccepted */
|
|
10531
|
-
dropiCodeAccepted;
|
|
10532
10528
|
/** Emitted when resend is requested */
|
|
10533
10529
|
dropiResend;
|
|
10534
10530
|
componentWillLoad() {
|
|
@@ -10565,8 +10561,6 @@ class DropiOtpSendCode {
|
|
|
10565
10561
|
this.internals.setFormValue(finalCode);
|
|
10566
10562
|
this.codeCompleted.emit(finalCode);
|
|
10567
10563
|
this.codeAccepted.emit(finalCode);
|
|
10568
|
-
this.dropiCodeCompleted.emit(finalCode);
|
|
10569
|
-
this.dropiCodeAccepted.emit(finalCode);
|
|
10570
10564
|
}
|
|
10571
10565
|
else {
|
|
10572
10566
|
this.internals.setFormValue(newDigits.join(''));
|
|
@@ -10590,8 +10584,6 @@ class DropiOtpSendCode {
|
|
|
10590
10584
|
this.internals.setFormValue(finalCode);
|
|
10591
10585
|
this.codeCompleted.emit(finalCode);
|
|
10592
10586
|
this.codeAccepted.emit(finalCode);
|
|
10593
|
-
this.dropiCodeCompleted.emit(finalCode);
|
|
10594
|
-
this.dropiCodeAccepted.emit(finalCode);
|
|
10595
10587
|
}
|
|
10596
10588
|
else {
|
|
10597
10589
|
this.internals.setFormValue(newDigits.join(''));
|
|
@@ -10599,14 +10591,14 @@ class DropiOtpSendCode {
|
|
|
10599
10591
|
}
|
|
10600
10592
|
render() {
|
|
10601
10593
|
const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
|
|
10602
|
-
return (hAsync("div", { key: '
|
|
10594
|
+
return (hAsync("div", { key: '68d01986b43ee262c6df66d1160df32313c76edf', class: "otp" }, this.showLabelContact && (hAsync("p", { key: '83138a2f4716552cce108c228b99c1e7fc532036', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && hAsync("strong", { key: '8de893e9ea835b3459b8be78414d337436f908de' }, " ", this.labelContact))), hAsync("div", { key: 'a50f5e2ae1733ec1df704578d6264b8e86a08f5b', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, this.digits.map((_, i) => (hAsync("input", { key: i, ref: (el) => {
|
|
10603
10595
|
if (el)
|
|
10604
10596
|
this.inputs[i] = el;
|
|
10605
10597
|
}, class: {
|
|
10606
10598
|
'otp__digit': true,
|
|
10607
10599
|
'otp__digit--filled': this.digitStates[i] === 'filled',
|
|
10608
10600
|
'otp__digit--error': this.error,
|
|
10609
|
-
}, type: "text", inputMode: "numeric", maxLength: 1, value: this.digits[i] ?? '', onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (hAsync("p", { key: '
|
|
10601
|
+
}, type: "text", inputMode: "numeric", maxLength: 1, value: this.digits[i] ?? '', onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (hAsync("p", { key: '315b68b30120ab315f106eed441b9a61550d7833', class: "otp__error" }, this.errorMessage)), hAsync("div", { key: 'b07d47236824b631193b9a90c083ea5d170d135b', class: "otp__resend" }, this.canResend ? (hAsync("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (hAsync("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
|
|
10610
10602
|
}
|
|
10611
10603
|
static get formAssociated() { return true; }
|
|
10612
10604
|
static get watchers() { return {
|
|
@@ -10698,9 +10690,9 @@ class DropiPaginator {
|
|
|
10698
10690
|
const pages = this.pageNumbers;
|
|
10699
10691
|
const isFirst = this.currentPage <= 1;
|
|
10700
10692
|
const isLast = this.currentPage >= this.totalPages;
|
|
10701
|
-
return (hAsync("div", { key: '
|
|
10693
|
+
return (hAsync("div", { key: 'e72ebe722f06549a3000d89597b8835d93ed7be1', class: "paginator" }, hAsync("div", { key: '5e6fc47b3bc6fc4a94bf0770f405e1ea73eb411d', class: "paginator-pages" }, !isFirst && !this.noLabels && (hAsync("button", { key: '7ee39bcd8506638c6b392b48e63cd0f0a3f671f7', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, hAsync("dropi-icon", { key: '857739a713620c191f8106565a2d9e8ac51df3fe', name: "Arrow-double-small-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isFirst && (hAsync("button", { key: '8052d9499ed78c264390c875e73e7f18d5e2e888', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, hAsync("dropi-icon", { key: '243eeba594d2029bc47bc651244d9b1664f7041c', name: "Dropdown-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }), !this.noLabels && hAsync("span", { key: '0beca41b97528db889db9265c0779cb842132e38', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
|
|
10702
10694
|
? hAsync("span", { class: "paginator-ellipsis", key: `e${i}` }, "\u2026")
|
|
10703
|
-
: hAsync("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.currentPage }, onClick: () => this.goTo(p), "aria-current": p === this.currentPage ? 'page' : undefined, disabled: this.disabled }, p)), !isLast && (hAsync("button", { key: '
|
|
10695
|
+
: hAsync("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.currentPage }, onClick: () => this.goTo(p), "aria-current": p === this.currentPage ? 'page' : undefined, disabled: this.disabled }, p)), !isLast && (hAsync("button", { key: '5a318c012b3da12ed6cf7e3b9548b5e5c93a4abd', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage + 1), "aria-label": "Siguiente", disabled: this.disabled }, !this.noLabels && hAsync("span", { key: '1eb25a3ddf80cbf32e4beae87d66a516b7f1304d', class: "paginator-label" }, "Siguiente"), hAsync("dropi-icon", { key: '98f4c308b02777a28349e3d873c486ea24a66ea5', name: "Dropdown-Right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (hAsync("button", { key: 'dabccdd09218037c302a051bdca26aefebb4e015', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina", disabled: this.disabled }, hAsync("dropi-icon", { key: '7a6872706fba9456b57c6d55778c456de1cf179d', name: "Arrow-double-small-right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))))));
|
|
10704
10696
|
}
|
|
10705
10697
|
static get style() { return dropiPaginatorCss(); }
|
|
10706
10698
|
static get cmpMeta() { return {
|
|
@@ -10920,10 +10912,10 @@ class DropiPhoneInput {
|
|
|
10920
10912
|
render() {
|
|
10921
10913
|
const country = this.selectedCountry;
|
|
10922
10914
|
const isInvalid = this.isValidPhone === false;
|
|
10923
|
-
return (hAsync("div", { key: '
|
|
10915
|
+
return (hAsync("div", { key: '8baf494cc8b0c7925414a5c6b518bed906c6c9af', class: "phone-wrap" }, hAsync("div", { key: '8676178ee71fc85eaab623dea92760f0ae661c77', class: "phone-input-container" }, hAsync("div", { key: 'b4037828a850187c7c01df69c46704ca38ab9399', class: "custom-select" }, hAsync("button", { key: '796f0d20cffc0c821012245fe49a9c04b2d07f85', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
|
|
10924
10916
|
if (!this.disabledInput)
|
|
10925
10917
|
this.open = !this.open;
|
|
10926
|
-
} }, hAsync("span", { key: '
|
|
10918
|
+
} }, hAsync("span", { key: '67d2755de630b936763fa2610a0e7ba4650476c4', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, hAsync("img", { key: '576ea15412ad8106e9674bb53dd9b71f86654b48', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), hAsync("dropi-icon", { key: '1db0802eb57a6359b2482bc8f24b39957c6cca09', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), hAsync("ul", { key: 'cf7a36e39eda8d049c0f9576f52e24e0c88173f3', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (hAsync("li", null, hAsync("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, hAsync("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), hAsync("input", { key: '813f274452998d7d329adac1b21c796b61a26a9b', id: "phone-input", type: "tel", inputmode: "numeric", class: { 'form-control': true, 'is-invalid': isInvalid }, placeholder: this.phoneNumberPlaceholder, value: this.ngModelPhone, disabled: this.disabledInput, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) }))));
|
|
10927
10919
|
}
|
|
10928
10920
|
static get formAssociated() { return true; }
|
|
10929
10921
|
static get watchers() { return {
|
|
@@ -10982,7 +10974,7 @@ class DropiProgressBar {
|
|
|
10982
10974
|
width: `${Math.min(100, Math.max(0, this.value))}%`,
|
|
10983
10975
|
backgroundColor: this.color || `var(--${this.getSeverityVariable()}, #50A5F1)`,
|
|
10984
10976
|
};
|
|
10985
|
-
return (hAsync("div", { key: '
|
|
10977
|
+
return (hAsync("div", { key: 'ff6b55a3f0aaf2eb6f5310d06acf9cfa0f3a2b12', class: "progress-container" }, this.showValue && (hAsync("div", { key: 'f34f6818580f08c0308a4d75ac4c6cfef6d992a6', class: "progress-header" }, hAsync("span", { key: 'daa2e09a6698da3dc3ad207ff6a6cd1882de66cc', class: "progress-value" }, this.value, "%"))), hAsync("div", { key: 'dbe1cf7f8330446dd2a2e7b8c3b049b7c0f816eb', class: "progress-track", style: { height: this.height, backgroundColor: this.trackColor } }, hAsync("div", { key: 'ce7a0598e201918aa4e925a97c7426c048fd00b9', class: "progress-fill", style: fillStyle }))));
|
|
10986
10978
|
}
|
|
10987
10979
|
getSeverityVariable() {
|
|
10988
10980
|
switch (this.severity) {
|
|
@@ -11061,7 +11053,7 @@ class DropiRadioButton {
|
|
|
11061
11053
|
this.dropiChange.emit(e);
|
|
11062
11054
|
}
|
|
11063
11055
|
render() {
|
|
11064
|
-
return (hAsync("div", { key: '
|
|
11056
|
+
return (hAsync("div", { key: 'f5a4cfda3991106a02821a499452294509fea514', class: "dropi-radio-button" }, hAsync("label", { key: '8f28e2d4a0da03bd1b0ef2d8a92b1ed9b2b66c26', htmlFor: this.inputId }, hAsync("input", { key: 'ddd006fafd64e071a1431dd3fb827f06a9c8d92d', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
|
|
11065
11057
|
}
|
|
11066
11058
|
static get formAssociated() { return true; }
|
|
11067
11059
|
static get watchers() { return {
|
|
@@ -11132,10 +11124,10 @@ class DropiRadioSelectionList {
|
|
|
11132
11124
|
return this.parsedOptions.filter(o => o.name?.toLowerCase().includes(q));
|
|
11133
11125
|
}
|
|
11134
11126
|
render() {
|
|
11135
|
-
return (hAsync("div", { key: '
|
|
11127
|
+
return (hAsync("div", { key: '296bdc955d13b8163ca954f6d399543343e7e121', class: "rsl" }, this.showFilter && (hAsync("div", { key: '4cdd3764411f389d2b6ce1145f5b6759bb20fc7b', class: "rsl__search" }, hAsync("dropi-icon", { key: '81af80a3dddb6176625b6ba575b084501741cd81', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("input", { key: 'aa0e762f4403431225375f95c792af8596529588', class: "rsl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
|
|
11136
11128
|
this.filterText = e.target.value;
|
|
11137
11129
|
this.dropiSearch.emit({ searchValue: this.filterText, filteredOptions: this.filtered });
|
|
11138
|
-
} }))), hAsync("div", { key: '
|
|
11130
|
+
} }))), hAsync("div", { key: 'd153875a1c09957b74648f61f70320968ea6cd40', class: "rsl__list" }, this.filtered.map(opt => {
|
|
11139
11131
|
const isSelected = opt.id === this.selectedOption;
|
|
11140
11132
|
return (hAsync("div", { class: { 'rsl__item': true, 'rsl__item--selected': isSelected }, key: opt.id, onClick: () => { this.selectedOption = opt.id; this.dropiChange.emit(opt.id); } }, hAsync("div", { class: { 'rsl__radio': true, 'rsl__radio--checked': isSelected } }, isSelected && hAsync("div", { class: "rsl__radio-dot" })), hAsync("div", { class: "rsl__content" }, hAsync("span", { class: "rsl__name" }, opt.name), (isSelected || this.alwaysShowDescription) && opt.description && (hAsync("span", { class: "rsl__desc" }, opt.description)))));
|
|
11141
11133
|
}))));
|
|
@@ -11200,7 +11192,7 @@ class DropiReadMore {
|
|
|
11200
11192
|
}
|
|
11201
11193
|
render() {
|
|
11202
11194
|
const showToggle = this.needsTruncation && (this.expanded ? this.showSeeLess : true);
|
|
11203
|
-
return (hAsync("div", { key: '
|
|
11195
|
+
return (hAsync("div", { key: '125c5f1d75c1e06f02d9898f375626bb75a67cd8', class: "read-more" }, hAsync("p", { key: '4a4450a3468e7fe7297fdae98d370f8cd77b8553', class: "read-more__text", style: this.textStyle ? this.textStyle : undefined }, this.displayText, showToggle && (hAsync("button", { key: 'cfe58b2781b908d9a0a802b4bd68cedf8dea827e', class: "read-more__toggle", style: this.buttonStyle ? this.buttonStyle : undefined, onClick: () => this.expanded = !this.expanded }, this.expanded ? ' Ver menos' : '... Ver más')))));
|
|
11204
11196
|
}
|
|
11205
11197
|
static get style() { return dropiReadMoreCss(); }
|
|
11206
11198
|
static get cmpMeta() { return {
|
|
@@ -11331,10 +11323,10 @@ class DropiSearch {
|
|
|
11331
11323
|
}
|
|
11332
11324
|
render() {
|
|
11333
11325
|
const showDropdown = this.open && this.parsedOptions.length > 0;
|
|
11334
|
-
return (hAsync("div", { key: '
|
|
11326
|
+
return (hAsync("div", { key: '594b15b4b31044f4a02376dc773ea36da893d773', class: "search-wrap" }, this.label && hAsync("label", { key: '297a989441ad892715b09421f9a53618851c1b52', class: "search-label" }, this.label), hAsync("div", { key: '6bbaf4ea5c1bc6ff831626117fccde647e68ba19', class: `search-input-row search-input-row--${this.type}` }, this.showIcon && hAsync("dropi-icon", { key: 'e94c3a3895a14e950a018023d5d7a281a230abae', class: "search-icon", name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("input", { key: '820bf2f4c9ecaf9907aceaaa08bd3fa309606e90', class: "search-input", type: this.typeInput, placeholder: this.placeholder, value: this.textInput, maxLength: this.maxLength, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => {
|
|
11335
11327
|
if (this.parsedOptions.length)
|
|
11336
11328
|
this.open = true;
|
|
11337
|
-
}, onBlur: () => { setTimeout(() => this.open = false, 150); this.dropiBlur.emit(); } }), this.showClear && this.textInput && (hAsync("button", { key: '
|
|
11329
|
+
}, onBlur: () => { setTimeout(() => this.open = false, 150); this.dropiBlur.emit(); } }), this.showClear && this.textInput && (hAsync("button", { key: 'e2fd7c3d5fee45a83f030589f58d4fee9f3af69c', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, hAsync("dropi-icon", { key: 'a530b0adb83d76b205cd2b22792f14229950836e', name: "Close-small", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), showDropdown && (hAsync("div", { key: '8c062d43dccb41c84b2a599ed6d1a5e049a75b65', class: `search-dropdown search-dropdown--${this.position}`, style: { '--dropdown-height': `${this.heightOverlay}px` } }, this.filtered.length === 0 ? (hAsync("div", { class: "search-no-results" }, "Sin resultados")) : (this.filtered.map((opt, i) => (hAsync("div", { class: { 'search-option': true, 'search-option--selected': this.isSelected(opt) }, key: i, onMouseDown: (e) => { e.preventDefault(); this.selectOption(opt); } }, this.multipleSelectModel && hAsync("dropi-checkbox", { name: "_search-option", checked: this.isSelected(opt) }), hAsync("span", { class: "search-option__label" }, opt[this.dataName])))))))));
|
|
11338
11330
|
}
|
|
11339
11331
|
static get watchers() { return {
|
|
11340
11332
|
"dataToSearch": [{
|
|
@@ -11775,7 +11767,7 @@ class DropiSelect {
|
|
|
11775
11767
|
]), !this.isGrouped && this.filteredOptions.map(opt => this.renderOption(opt)), this.filteredOptions.length === 0 && (hAsync("li", { class: "no-results" }, "Sin resultados"))));
|
|
11776
11768
|
}
|
|
11777
11769
|
render() {
|
|
11778
|
-
return (hAsync("div", { key: '
|
|
11770
|
+
return (hAsync("div", { key: 'b11bfc98a7d37846afaad6b171f564b5cb72620a', class: "custom-select" }, !this.dropdownType && this.label && (hAsync("label", { key: 'bda1ed87b6ed257c1f8148464199f241d3f5d5f9', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && hAsync("span", { key: '81e9fd26856228c8ec59271bae8f3788f22fc2ee', class: "asterisk" }, " *"))), hAsync("div", { key: 'a8feb6ffde967418ad5655e24b3b2ac260541508', class: "dropdown-container" }, this.dropdownType && this.label && (hAsync("div", { key: '43c9e38a90c6f072f540f6e6af3315e26ce2b2e0', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (hAsync("div", { key: '73c290608f1feeca8a78d391c63ff76cbdfc41a7', class: "select-helper" }, hAsync("span", { key: 'b64e35c437f9791e790e4d2155deae02cdeb684f' }, this.textHelper))), this.hasError && this.errorText && (hAsync("div", { key: '4e7126e5f6f64a6134928e9aa1901e2d795a9246', class: "select-helper-error" }, hAsync("dropi-icon", { key: '36019fb1921f710113fb10e99eb16fa46a6306dc', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), hAsync("span", { key: '99783b102c6d345404ef8d9dfb0325c682c8f87b' }, this.errorText))), this.renderDropdown()));
|
|
11779
11771
|
}
|
|
11780
11772
|
static get formAssociated() { return true; }
|
|
11781
11773
|
static get watchers() { return {
|
|
@@ -11884,7 +11876,7 @@ class DropiSidebar {
|
|
|
11884
11876
|
this.dropiIndexChange.emit(itemClicked);
|
|
11885
11877
|
}
|
|
11886
11878
|
render() {
|
|
11887
|
-
return (hAsync("div", { key: '
|
|
11879
|
+
return (hAsync("div", { key: '3e45416a116488871747c54c14cbb73ecf1d9a4d', class: "main-sidebar-container" }, this.parsedProperties.map(item => {
|
|
11888
11880
|
return [
|
|
11889
11881
|
/* Item Principal */
|
|
11890
11882
|
hAsync("div", { class: {
|
|
@@ -11960,7 +11952,7 @@ class DropiSimpleStepper {
|
|
|
11960
11952
|
render() {
|
|
11961
11953
|
const labels = this.parsedLabels;
|
|
11962
11954
|
const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);
|
|
11963
|
-
return (hAsync("div", { key: '
|
|
11955
|
+
return (hAsync("div", { key: 'f67f6e9404bf67700c46b987923836d5251ae1c4', class: "stepper" }, steps.map((step, i) => {
|
|
11964
11956
|
const isCompleted = step < this.currentStep;
|
|
11965
11957
|
const isActive = step === this.currentStep;
|
|
11966
11958
|
const isLast = i === steps.length - 1;
|
|
@@ -12103,7 +12095,7 @@ class DropiSteps {
|
|
|
12103
12095
|
render() {
|
|
12104
12096
|
const labels = this.parsedLabels;
|
|
12105
12097
|
const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);
|
|
12106
|
-
return (hAsync("div", { key: '
|
|
12098
|
+
return (hAsync("div", { key: '35c28210675370e76f16e2525fdf785b6205ec78', class: "stepper" }, steps.map((step) => {
|
|
12107
12099
|
const state = this.stepState(step);
|
|
12108
12100
|
const label = labels[step - 1];
|
|
12109
12101
|
const isFirst = step === 1;
|
|
@@ -12176,7 +12168,7 @@ class DropiSwitch {
|
|
|
12176
12168
|
this.dropiChange.emit(this.isChecked);
|
|
12177
12169
|
}
|
|
12178
12170
|
render() {
|
|
12179
|
-
return (hAsync("label", { key: '
|
|
12171
|
+
return (hAsync("label", { key: 'fe429645c1b3032a273c3dd45e450cc3cdfaa4ae', class: "toggle-switch" }, hAsync("input", { key: '8e73bdbe0b14b8e889804f5d35616c0cfa52b025', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), hAsync("span", { key: '245aae98ce063331246fda2c729134112a199114', class: "slider" })));
|
|
12180
12172
|
}
|
|
12181
12173
|
static get formAssociated() { return true; }
|
|
12182
12174
|
static get watchers() { return {
|
|
@@ -12589,7 +12581,7 @@ class DropiTabs {
|
|
|
12589
12581
|
this.dropiIndexChange.emit(tab);
|
|
12590
12582
|
}
|
|
12591
12583
|
render() {
|
|
12592
|
-
return (hAsync("div", { key: '
|
|
12584
|
+
return (hAsync("div", { key: '5e8facb7611d02c9b7fad97f676a50ce419c6852', class: "tabs-container", role: "tablist" }, this.parsedTabs.map(tab => {
|
|
12593
12585
|
const isActive = tab.id === this.activeTab;
|
|
12594
12586
|
return (hAsync("div", { role: "tab", "aria-selected": String(isActive), class: { 'tab-item': true, 'tab-item--active': isActive && !tab.disabled, 'tab-item--disabled': !!tab.disabled }, onClick: () => this.handleClick(tab) }, hAsync("span", { class: "tab-label-row" }, hAsync("span", { class: "tab-label" }, tab.label), tab.counter !== undefined && tab.counter !== null && (hAsync("span", { class: { 'tab-counter': true, 'tab-counter--active': isActive } }, tab.counter))), this.showIcon && (tab.completed
|
|
12595
12587
|
? hAsync("dropi-icon", { name: "Check-circle", iconWidth: "12px", iconHeight: "12px", color: "Success-Success-500" })
|
|
@@ -12688,7 +12680,7 @@ class DropiTag {
|
|
|
12688
12680
|
return typeof this.text === 'string' && this.text.trim().length > 0;
|
|
12689
12681
|
}
|
|
12690
12682
|
render() {
|
|
12691
|
-
return (hAsync("div", { key: '
|
|
12683
|
+
return (hAsync("div", { key: '6a50111c0057b7ef3380dde9f639e9409b7fbea9', class: "container-chips" }, hAsync("div", { key: 'f2f78c3682aa2e8bef5f3f1b43a1729cae8ae293', class: {
|
|
12692
12684
|
tags: true,
|
|
12693
12685
|
'icon-only': this.showIcon && !this.hasContent,
|
|
12694
12686
|
'dot-variant': this.variant === 'dot',
|
|
@@ -12697,7 +12689,7 @@ class DropiTag {
|
|
|
12697
12689
|
backgroundColor: (this.variant === 'dot' || this.variant === 'text') ? 'transparent' : this.bgColor,
|
|
12698
12690
|
color: this.textColor,
|
|
12699
12691
|
fontWeight: this.fontWeight
|
|
12700
|
-
} }, this.variant === 'dot' && (hAsync("div", { key: '
|
|
12692
|
+
} }, this.variant === 'dot' && (hAsync("div", { key: '5364569230575b79b1160e06cc29046220bdf198', class: "dot-indicator", style: { backgroundColor: this.dotColor } })), this.showIcon && this.icon && (hAsync("dropi-icon", { key: '8ea74f9ad58e7892405e3e748289b71456945de6', class: "file-icon", name: this.icon, iconWidth: "16px", iconHeight: "16px", color: this.variant === 'dot' ? 'Gray-Gray-500' : this.iconColor })), this.hasContent && hAsync("span", { key: '99409549735fd48cf0a40e411f1f236716e53939' }, this.text))));
|
|
12701
12693
|
}
|
|
12702
12694
|
static get watchers() { return {
|
|
12703
12695
|
"type": [{
|
|
@@ -12741,7 +12733,7 @@ class DropiTagTypeProduct {
|
|
|
12741
12733
|
/** Label text. Default: VARIABLE */
|
|
12742
12734
|
label = 'VARIABLE';
|
|
12743
12735
|
render() {
|
|
12744
|
-
return hAsync("div", { key: '
|
|
12736
|
+
return hAsync("div", { key: 'ae1cd50cd3e82180704ae4f5406b4dc13ffbd12c', class: "type-variation" }, this.label);
|
|
12745
12737
|
}
|
|
12746
12738
|
static get style() { return dropiTagTypeProductCss(); }
|
|
12747
12739
|
static get cmpMeta() { return {
|
|
@@ -12871,12 +12863,12 @@ class DropiTextArea {
|
|
|
12871
12863
|
render() {
|
|
12872
12864
|
const showAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
|
|
12873
12865
|
const showHelper = this.textHelper || this.isInvalid;
|
|
12874
|
-
return (hAsync("div", { key: '
|
|
12866
|
+
return (hAsync("div", { key: '0b5292b24d3e4f2b56d69e985ede73be0f9a1338', class: "textarea-wrapper" }, this.label && (hAsync("label", { key: '19a45a83b92bed4b98da68389f5eee6affce9eb2', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && hAsync("span", { key: 'e67602dbd7095504c4c1bf574d03a01a5238b561', class: "asterisk" }, " *"))), hAsync("div", { key: '1d858e327147e87ca9df03d38e7bb90e0464fe31', class: "textarea-container" }, hAsync("textarea", { key: 'c50cab6f4126a99628bd0aa6f2843fec43b27edf', id: this.resolvedId, class: {
|
|
12875
12867
|
'form-control': true,
|
|
12876
12868
|
'Body-M-Regular': true,
|
|
12877
12869
|
'form-control-valid': !this.isInvalid && this.touched && !!this.value,
|
|
12878
12870
|
'form-control-invalid': this.isInvalid,
|
|
12879
|
-
}, rows: this.rows, placeholder: this.placeholder, maxLength: this.maxLength, minLength: this.minLength, disabled: this.disabled, required: this.required, style: { resize: this.resize }, onInput: (e) => this.handleInput(e), onFocus: () => this.dropiFocus.emit(), onBlur: () => this.handleBlur() }, this.value), this.maxLength > 0 && (hAsync("div", { key: '
|
|
12871
|
+
}, rows: this.rows, placeholder: this.placeholder, maxLength: this.maxLength, minLength: this.minLength, disabled: this.disabled, required: this.required, style: { resize: this.resize }, onInput: (e) => this.handleInput(e), onFocus: () => this.dropiFocus.emit(), onBlur: () => this.handleBlur() }, this.value), this.maxLength > 0 && (hAsync("div", { key: 'f62af4910cccf74bbbc7bad4064228545fba5d88', class: "char-counter" }, this.charCount, "/", this.maxLength))), showHelper && (hAsync("div", { key: 'ca4ac5b41128f27dee5363aca453dc1f085d9e61', class: "form-control-helper" }, this.isInvalid && (hAsync("dropi-icon", { key: 'a9c83edecd20dd318dd6ba7e4cc0d41ad748278a', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" })), hAsync("span", { key: '09efa2feba4a232e453cc99f64d98eac9fd76632', class: { 'invalid-color': this.isInvalid }, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : undefined } }, this.textHelper)))));
|
|
12880
12872
|
}
|
|
12881
12873
|
static get formAssociated() { return true; }
|
|
12882
12874
|
static get watchers() { return {
|
|
@@ -12940,7 +12932,7 @@ class DropiTimeLine {
|
|
|
12940
12932
|
}
|
|
12941
12933
|
render() {
|
|
12942
12934
|
const steps = this.parsedSteps;
|
|
12943
|
-
return (hAsync("div", { key: '
|
|
12935
|
+
return (hAsync("div", { key: '22a2f8ff7a33e892096c3aaf381e23b110ec6b0a', class: "timeline" }, steps.map((step, i) => {
|
|
12944
12936
|
const isLast = i === steps.length - 1;
|
|
12945
12937
|
return (hAsync("div", { class: { 'tl-step': true, [`tl-step--${step.status}`]: true }, key: step.id || i }, hAsync("div", { class: "tl-step__marker" }, hAsync("div", { class: "tl-step__icon" }, step.icon ? (hAsync("dropi-icon", { name: step.icon, iconWidth: "16px", iconHeight: "16px", color: step.status === 'done' ? 'Neutral-White' : step.status === 'active' ? 'Primary-Primary-500' : 'Gray-Gray-400' })) : (hAsync("span", { class: "tl-step__dot" }))), !isLast && hAsync("div", { class: "tl-step__line" })), hAsync("div", { class: "tl-step__content" }, hAsync("span", { class: "tl-step__label" }, step.label), step.subtitle && hAsync("span", { class: "tl-step__subtitle" }, step.subtitle))));
|
|
12946
12938
|
})));
|
|
@@ -13009,7 +13001,7 @@ class DropiToast {
|
|
|
13009
13001
|
info: 'question',
|
|
13010
13002
|
};
|
|
13011
13003
|
render() {
|
|
13012
|
-
return (hAsync("div", { key: '
|
|
13004
|
+
return (hAsync("div", { key: 'e7d23323039ed09e5317fc24f86a4e51af14b249', class: `dropi-toast-container dropi-toast-container--${this.position}` }, (this.items ?? []).map(item => (hAsync("div", { key: item.msg.id, class: { 'dropi-toast-wrapper': true, 'dropi-toast-wrapper--leaving': item.leaving } }, hAsync("div", { class: `dropi-toast-item dropi-toast-item--${item.msg.severity}` }, hAsync("div", { class: "dropi-toast-content" }, hAsync("div", { class: "dropi-toast-lottie" }, hAsync("lottie-player", { key: item.msg.severity, src: LOTTIE_MAP[this.severityToLottieKey[item.msg.severity]], background: "transparent", speed: "1", loop: true, autoplay: true })), hAsync("div", { class: "dropi-toast-info" }, hAsync("p", { class: "dropi-toast-title" }, item.msg.summary), item.msg.detail && hAsync("p", { class: "dropi-toast-detail" }, item.msg.detail))), item.msg.closable && (hAsync("button", { class: "dropi-toast-close", onClick: () => this.remove(item.msg.id) }, hAsync("dropi-icon", { name: "Close-small", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-400" })))))))));
|
|
13013
13005
|
}
|
|
13014
13006
|
static get style() { return dropiToastCss(); }
|
|
13015
13007
|
static get cmpMeta() { return {
|
|
@@ -13043,7 +13035,7 @@ class DropiTooltip {
|
|
|
13043
13035
|
/** Whether the tooltip has an outline style (matches Angular `outlined`) */
|
|
13044
13036
|
outlined = false;
|
|
13045
13037
|
render() {
|
|
13046
|
-
return (hAsync("div", { key: '
|
|
13038
|
+
return (hAsync("div", { key: '0b14943b628c231fbb530620e7829f70e6099c7a', class: { 'tooltip-simple': true, 'tooltip-simple--outlined': this.outlined } }, hAsync("slot", { key: 'bf0245c6fab0ba938834d2d3e84ccaa9cb14f5c8' }), this.text && (hAsync("div", { key: 'e1e33acf8628f79b36c5cc66c7076a03ce8167f7', class: "tooltip-simple-bubble" }, this.text))));
|
|
13047
13039
|
}
|
|
13048
13040
|
static get style() { return dropiTooltipCss$1(); }
|
|
13049
13041
|
static get cmpMeta() { return {
|
|
@@ -13184,12 +13176,12 @@ class DropiTooltipV2 {
|
|
|
13184
13176
|
const bubbleStyle = { maxWidth: this.maxWidth };
|
|
13185
13177
|
if (this.minWidth)
|
|
13186
13178
|
bubbleStyle.minWidth = this.minWidth;
|
|
13187
|
-
return (hAsync("div", { key: '
|
|
13179
|
+
return (hAsync("div", { key: 'e2ce31df52e00568920e754904b1f5910ff4c8ba', class: "tooltip-wrapper", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onClick: this.handleClick, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout }, this.showIcon && (hAsync("dropi-icon", { key: 'aa3213451bcfb60561043b0c3854bb20c3a4703a', name: this.iconName, iconWidth: `${this.iconSize}px`, iconHeight: `${this.iconSize}px`, color: this.iconColor })), hAsync("slot", { key: '5ce4929e6f96d4c605d149a970aba1746e82078a' }), this.displayContent && (hAsync("div", { key: '66a1193abf25ce4161ec35f1ca0c344ec418cce8', class: {
|
|
13188
13180
|
'tooltip-bubble': true,
|
|
13189
13181
|
[`tooltip-bubble--${this.position}`]: true,
|
|
13190
13182
|
[`tooltip-bubble--arrow-${this.arrowPosition}`]: true,
|
|
13191
13183
|
'tooltip-bubble--visible': this.visible,
|
|
13192
|
-
}, style: bubbleStyle, role: "tooltip" }, this.showX && (hAsync("button", { key: '
|
|
13184
|
+
}, style: bubbleStyle, role: "tooltip" }, this.showX && (hAsync("button", { key: '168741ebb1986f7235aee5be58695ae7cfacfe7b', class: "tooltip-close", onClick: this.handleClose, "aria-label": "Cerrar" }, hAsync("dropi-icon", { key: 'c9154dada59cced1056f24689591f0fead22328f', name: "Close-small", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-500" }))), this.title && !this.text && hAsync("strong", { key: 'cd432eb19d7616f50d27613b55c191d59f70732e', class: "tooltip-title" }, this.title), this.label && !this.text && hAsync("span", { key: 'c443cab1372947d0219a7384f491184fb1a7c5b3', class: "tooltip-label" }, this.label), this.text && hAsync("span", { key: 'ea5dafb67ec9533052a66cf045b288cbefdf9d69' }, this.text), hAsync("span", { key: '977257d29af4688c8a264685a1687c048faac9e5', class: `tooltip-arrow tooltip-arrow--${this.position}` })))));
|
|
13193
13185
|
}
|
|
13194
13186
|
static get style() { return dropiTooltipCss(); }
|
|
13195
13187
|
static get cmpMeta() { return {
|
|
@@ -13263,7 +13255,7 @@ class DropiVerticalSteps {
|
|
|
13263
13255
|
}
|
|
13264
13256
|
render() {
|
|
13265
13257
|
const steps = this.parsedSteps;
|
|
13266
|
-
return (hAsync("div", { key: '
|
|
13258
|
+
return (hAsync("div", { key: '9b0e19a21eaa78b51d82994747604623f9431d56', class: "vertical-steps" }, steps.map((step, i) => {
|
|
13267
13259
|
const state = this.resolveState(i, step);
|
|
13268
13260
|
const isLast = i === steps.length - 1;
|
|
13269
13261
|
const isClickable = this.clickable && state === 'completed';
|
|
@@ -13316,7 +13308,7 @@ class DropiYoutubeLazyVideo {
|
|
|
13316
13308
|
return `https://www.youtube.com/embed/${this.videoId}?autoplay=1&rel=0&modestbranding=1`;
|
|
13317
13309
|
}
|
|
13318
13310
|
render() {
|
|
13319
|
-
return (hAsync("div", { key: '
|
|
13311
|
+
return (hAsync("div", { key: '0732bc87e7be10e422e80751a17527132301eb99', class: `video-wrapper${this.isPlaying ? ' playing' : ''}` }, !this.isPlaying && (hAsync("div", { key: '540c46b66da3f67ec45614e0891827b7cc0be4e5', class: "thumbnail", onClick: () => { this.isPlaying = true; } }, hAsync("img", { key: '843241c72688ca88ccd5d9391b542501575ea476', src: this.thumbnail, alt: `Video thumbnail ${this.videoId}` }), hAsync("button", { key: 'b068f79fb6b2140e1419e9d72a24f6e66eaab69d', class: "play-button", "aria-label": "Reproducir video" }, hAsync("dropi-icon", { key: 'b3b6d8b99583fd0a3c2c0d766beeda2459b8b13a', name: "Play", iconWidth: "17px", iconHeight: "21px", color: "Neutral-White" })))), this.isPlaying && (hAsync("iframe", { key: '42172a0c7bb386da9123b411af4ab5ebeb9e205c', src: this.videoUrl, title: this.videoTitle, frameborder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, loading: "lazy" }))));
|
|
13320
13312
|
}
|
|
13321
13313
|
static get style() { return dropiYoutubeLazyVideoCss(); }
|
|
13322
13314
|
static get cmpMeta() { return {
|