@rededor/cura-hydrate 1.5.0-alpha.1 → 1.5.0-alpha.2
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/index.js +44 -30
- package/index.mjs +44 -30
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -3269,10 +3269,10 @@ class CuraBadgePill {
|
|
|
3269
3269
|
this.iconset = 'default';
|
|
3270
3270
|
this.disabled = false;
|
|
3271
3271
|
this.iconOnly = false;
|
|
3272
|
-
this.borderRadius =
|
|
3272
|
+
this.borderRadius = '2px';
|
|
3273
3273
|
this.styles = {};
|
|
3274
3274
|
}
|
|
3275
|
-
|
|
3275
|
+
watchColorChange() {
|
|
3276
3276
|
this.setColors();
|
|
3277
3277
|
}
|
|
3278
3278
|
connectedCallback() {
|
|
@@ -3280,10 +3280,7 @@ class CuraBadgePill {
|
|
|
3280
3280
|
this.setColors();
|
|
3281
3281
|
}
|
|
3282
3282
|
setBaseStyles() {
|
|
3283
|
-
this.styles
|
|
3284
|
-
this.styles['--font-family'] = this.theme.fonts.getFamily();
|
|
3285
|
-
this.styles['--font-size'] = this.theme.fonts.getSize();
|
|
3286
|
-
this.styles = Object.assign({}, this.styles);
|
|
3283
|
+
this.styles = Object.assign(Object.assign({}, this.styles), { '--base-spacing': this.theme.spacing.getSpacing(), '--font-family': this.theme.fonts.getFamily(), '--font-size': this.theme.fonts.getSize() });
|
|
3287
3284
|
}
|
|
3288
3285
|
setColors() {
|
|
3289
3286
|
const colors = [
|
|
@@ -3292,10 +3289,11 @@ class CuraBadgePill {
|
|
|
3292
3289
|
{ name: '--color-background-disabled', theme: 'neutral-pale' },
|
|
3293
3290
|
{ name: '--color-outline-disabled', theme: 'neutral-medium' },
|
|
3294
3291
|
];
|
|
3292
|
+
const newStyles = Object.assign({}, this.styles);
|
|
3295
3293
|
colors.forEach(color => {
|
|
3296
|
-
|
|
3294
|
+
newStyles[color.name] = this.theme.colors.getColor(color.theme);
|
|
3297
3295
|
});
|
|
3298
|
-
this.styles =
|
|
3296
|
+
this.styles = newStyles;
|
|
3299
3297
|
}
|
|
3300
3298
|
hostCSSProperties() {
|
|
3301
3299
|
return {
|
|
@@ -3311,9 +3309,7 @@ class CuraBadgePill {
|
|
|
3311
3309
|
return classes;
|
|
3312
3310
|
}
|
|
3313
3311
|
getSymbolColor() {
|
|
3314
|
-
return this.disabled
|
|
3315
|
-
? 'neutral-medium'
|
|
3316
|
-
: `${this.color}-dark`;
|
|
3312
|
+
return this.disabled ? 'neutral-medium' : `${this.color}-dark`;
|
|
3317
3313
|
}
|
|
3318
3314
|
getIcon() {
|
|
3319
3315
|
if (!this.iconName)
|
|
@@ -3322,11 +3318,11 @@ class CuraBadgePill {
|
|
|
3322
3318
|
}
|
|
3323
3319
|
render() {
|
|
3324
3320
|
const symbolColor = this.getSymbolColor();
|
|
3325
|
-
return (hAsync(Host, { key: '
|
|
3321
|
+
return (hAsync(Host, { key: 'ac5aafc485ee2a88514a34fc5025f54c01901a46', style: this.hostCSSProperties() }, hAsync("div", { key: '7f32b824ab54471c0517980e6e4ed2b1b21fd435', class: this.getClasses(), style: this.styles }, this.getIcon(), hAsync("cura-label", { key: 'c2ef8d70153a5b8498cf2cb3ce6b60f80aec1d51', size: "xsmall", "line-height": "117%", color: symbolColor }, hAsync("slot", { key: '758b0c994aab961f4c76b7030028268aa8c2364f' })))));
|
|
3326
3322
|
}
|
|
3327
3323
|
get host() { return getElement(this); }
|
|
3328
3324
|
static get watchers() { return {
|
|
3329
|
-
"color": ["
|
|
3325
|
+
"color": ["watchColorChange"]
|
|
3330
3326
|
}; }
|
|
3331
3327
|
static get style() { return CuraBadgePillStyle0; }
|
|
3332
3328
|
static get cmpMeta() { return {
|
|
@@ -8361,12 +8357,13 @@ class CuraDropdownSearch {
|
|
|
8361
8357
|
this.valueChanged = createEvent(this, "valueChanged", 7);
|
|
8362
8358
|
this.onselect = createEvent(this, "onselect", 7);
|
|
8363
8359
|
this.overlayElement = null;
|
|
8364
|
-
this.adjustInputPosition = () => {
|
|
8360
|
+
this.adjustInputPosition = async () => {
|
|
8365
8361
|
var _a, _b;
|
|
8362
|
+
// const tick = await Promise.resolve().then();
|
|
8366
8363
|
const isKeyboardOpen = (window === null || window === void 0 ? void 0 : window.innerHeight) < this.screenDefaultHeight;
|
|
8367
8364
|
const dropdown = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-mobile');
|
|
8368
8365
|
if (dropdown) {
|
|
8369
|
-
dropdown.style.position = isKeyboardOpen ? 'absolute' : 'fixed';
|
|
8366
|
+
// dropdown.style.position = isKeyboardOpen ? 'absolute' : 'fixed';
|
|
8370
8367
|
dropdown.style.bottom = isKeyboardOpen ? `${((_b = window === null || window === void 0 ? void 0 : window.screen) === null || _b === void 0 ? void 0 : _b.height) - (window === null || window === void 0 ? void 0 : window.innerHeight)}px` : '0';
|
|
8371
8368
|
window.scroll({ top: 0, left: 0, behavior: 'smooth' });
|
|
8372
8369
|
}
|
|
@@ -8611,9 +8608,9 @@ class CuraDropdownSearch {
|
|
|
8611
8608
|
}
|
|
8612
8609
|
render() {
|
|
8613
8610
|
const isMobileDropdown = this.isMobile && this.isDropdownOpen;
|
|
8614
|
-
return (hAsync(Host, { key: '
|
|
8611
|
+
return (hAsync(Host, { key: '85b79d1f41c8f03ed8aa8f915743c6a35d529b20', style: this.hostCSSProperties(), class: "dropdown-overlay" }, hAsync("div", { key: 'c5255bc1445309a8da2e28e76d31c151170fb1bf', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, hAsync("div", { key: 'a0e9db281870954a6f3155cd482c741e3d44db24', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (hAsync("cura-button-transparent", { key: '67e58b57752cbe8a8fbbaee555e9c905c710782c', fontColor: "dark", onClick: () => this.handleGoBack(), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), hAsync("cura-input-text", { key: '87edd1a5b058a9c7ae966999269f1546d7132a53', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: isMobileDropdown ? 'transparent' : 'default', required: this.required, hideErrorIcon: this.status === 'error', iconName: this.iconName || 'search', value: this.value, status: this.status, onValueChange: e => this.onValueChange(e.target.value), onInput: e => this.handleInputChange(e), onFocus: () => this.handleOnFocus(), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
|
|
8615
8612
|
this.handleOnBlur();
|
|
8616
|
-
}, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, hAsync("slot", { key: '
|
|
8613
|
+
}, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, hAsync("slot", { key: '47f7e07fbcce084cef173c23583ad43e580ae02d', name: "helperText" }))), hAsync("div", { key: '4748cdb4cd039f29f50cfdf1f9ff110bafbeb064', id: "dropdown-search-list", class: this.getDropdownClasses() }, hAsync("slot", { key: '21a66543f65ff198f0b9f60758f1f0930342dc4c', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
|
|
8617
8614
|
}
|
|
8618
8615
|
get host() { return getElement(this); }
|
|
8619
8616
|
static get watchers() { return {
|
|
@@ -8908,7 +8905,7 @@ class CuraIcon {
|
|
|
8908
8905
|
}; }
|
|
8909
8906
|
}
|
|
8910
8907
|
|
|
8911
|
-
var iconsetdefaulticons = ["360", "accessibility", "addUser", "airdrop", "alertCircle", "alertTriangle", "arrowDown", "arrowDownCircle", "arrowLeft", "arrowLeftCircle", "arrowRight", "arrowRightCircle", "arrowUp", "arrowUpCircle", "attach", "avatarF", "avatarM", "biometry", "bloodGroup", "calendar", "cam", "camOff", "central", "chatCircle", "check", "checkBadge", "checkCircle", "checkDouble", "clock", "close", "closeCircle", "collapse", "config", "contacts", "currency", "delete", "desktop", "doc", "down", "download", "drug", "duplicate", "edit", "exam", "examDoc", "expand", "facebook", "fileBmp", "fileJpg", "filePdf", "filePng", "fileUpload", "fileXls", "filter", "fullscreen", "gallery", "geotag", "geotagUnity", "geotagUnityGroup", "google", "graph", "healthPlan", "heart", "height", "height2", "home", "horizontalList", "imageUp", "infoCircle", "instagram", "key", "lamp", "language", "language2", "languageEN", "languagePT", "lattes", "left", "like", "link", "linkExternal", "linkedin", "list", "login", "logout", "mail", "maintenance", "medDoc", "medEspec", "medImg", "medUser", "medical", "menuHamburguer", "menuKebab", "menuMeatballs", "mic", "micOff", "minus", "minusCircle", "minusSquare", "mobile", "news", "notification", "npsDeslike", "npsHate", "npsLike", "npsLove", "npsNeutral", "order", "partner", "phone", "play", "plus", "plusCircle", "plusSquare", "print", "profile", "profileCircle", "questionCircle", "questionSquare", "range", "reload", "ribbon", "right", "schedule", "scheduleCancel", "scheduleCheck", "scheduleHistorico", "search", "secure", "share", "siren", "sound", "soundOff", "subItem", "swap", "target", "team", "telegram", "twitter", "unLink", "unSecure", "unity", "unlike", "up", "upload", "verticalList", "viewFalse", "viewTrue", "weight", "whatsapp", "wifi", "wifiOff", "youtube", "zoomIn", "zoomOut"];
|
|
8908
|
+
var iconsetdefaulticons = ["360", "accessibility", "accessibility2", "accessibility3", "accessibility4", "addUser", "airdrop", "alertCircle", "alertTriangle", "arrowDown", "arrowDownCircle", "arrowLeft", "arrowLeftCircle", "arrowRight", "arrowRightCircle", "arrowUp", "arrowUpCircle", "attach", "avatarF", "avatarM", "biometry", "bloodGroup", "calendar", "cam", "camOff", "central", "chatCircle", "check", "checkBadge", "checkCircle", "checkDouble", "clock", "close", "closeCircle", "collapse", "config", "contacts", "currency", "delete", "desktop", "doc", "down", "download", "drug", "duplicate", "edit", "elevator", "exam", "examDoc", "expand", "facebook", "fileBmp", "fileJpg", "filePdf", "filePng", "fileUpload", "fileXls", "filter", "fullscreen", "gallery", "geotag", "geotagUnity", "geotagUnityGroup", "google", "graph", "healthPlan", "heart", "height", "height2", "home", "horizontalList", "imageUp", "infoCircle", "instagram", "key", "lamp", "language", "language2", "languageEN", "languagePT", "lattes", "left", "like", "link", "linkExternal", "linkedin", "list", "login", "logout", "mail", "maintenance", "medDoc", "medEspec", "medImg", "medUser", "medical", "menuHamburguer", "menuKebab", "menuMeatballs", "mic", "micOff", "minus", "minusCircle", "minusSquare", "mobile", "news", "notification", "npsDeslike", "npsHate", "npsLike", "npsLove", "npsNeutral", "order", "parking", "partner", "phone", "play", "plus", "plusCircle", "plusSquare", "print", "profile", "profileCircle", "questionCircle", "questionSquare", "range", "reload", "ribbon", "right", "schedule", "scheduleCancel", "scheduleCheck", "scheduleHistorico", "search", "secure", "share", "siren", "sound", "soundOff", "subItem", "swap", "target", "team", "telegram", "twitter", "unLink", "unSecure", "unity", "unlike", "up", "upload", "verticalList", "viewFalse", "viewTrue", "weight", "whatsapp", "wifi", "wifiOff", "youtube", "zoomIn", "zoomOut"];
|
|
8912
8909
|
|
|
8913
8910
|
const curaIconsViewCss = ":host{display:block;padding:24px;font-family:\"Roboto\", Arial, Helvetica, sans-serif}.iconDetail{display:block}.iconSizes{display:flex;align-items:center}.iconSizes .size{display:flex;flex-direction:column;text-align:center;align-items:center;margin-right:9px;padding:8px}.iconSizes .size:last-child{margin-right:0}.iconSizes .size span{font-size:10px;margin:8px 0}.iconSizes.invert{margin-top:12px}.iconSizes.invert .size{background-color:#2d2d2d;color:#F6F6F6;border-radius:3px}.icons{margin-top:28px;display:flex;flex-wrap:wrap;position:relative}.icons .icon{position:relative;padding:4px;cursor:pointer;opacity:0.6;transition:opacity 0.2s linear;width:105px;display:flex;flex-direction:column;text-align:center;align-items:center;margin-bottom:16px;box-sizing:border-box;}.icons .icon cura-label{margin-top:8px}.icons .icon cura-paragraph{margin-top:4px}";
|
|
8914
8911
|
var CuraIconsViewStyle0 = curaIconsViewCss;
|
|
@@ -13014,6 +13011,8 @@ class CuraInputText {
|
|
|
13014
13011
|
}
|
|
13015
13012
|
}
|
|
13016
13013
|
initializeAdvancedMask() {
|
|
13014
|
+
if (!this.inputRef)
|
|
13015
|
+
return;
|
|
13017
13016
|
try {
|
|
13018
13017
|
const config = typeof this.maskAdvanced === 'string' ? JSON.parse(this.maskAdvanced) : this.maskAdvanced;
|
|
13019
13018
|
this.maskedInput = IMask(this.inputRef, config);
|
|
@@ -13084,7 +13083,7 @@ class CuraInputText {
|
|
|
13084
13083
|
e.preventDefault();
|
|
13085
13084
|
}
|
|
13086
13085
|
render() {
|
|
13087
|
-
return (hAsync(Host, { key: '
|
|
13086
|
+
return (hAsync(Host, { key: '0aebf7d545af0e2eec1f542e5545ef34d0356e33' }, hAsync("div", { key: '22e428a2706273d1613e39f860a721a73cab6d03', style: this.styles, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), class: Object.assign({ 'cura-input-group': true }, this.getClasses()) }, hAsync("div", { key: '8ef0bc3f5bf3427abdbd247a8c78b722eaaca541', class: "input-wrapper" }, this.label && (hAsync("cura-label", { key: '4aef20d0c2880ed38c1821e2690829a31fe7fea8', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getLabelColor() }, this.label, " ", this.required && hAsync("span", { key: 'a3bb15165ae1ffedae59a32a1e299c9a36ad9b2c', class: "required" }, "* "))), hAsync("div", { key: '0b12a41f21a4c26273390dd15f362a5baccb0f2d', class: "cura-input-field", part: "cura-input-field", style: this.styles }, this.renderIcon(), hAsync("input", { key: 'da03ef422267592fa3c732cb553e16fd1209bdf0', name: this.name ? this.name : '', type: this.type, onKeyDown: event => this.handleKeyDown(event), onBlur: this.handleInputBlur.bind(this), onFocus: this.handleInputFocus.bind(this), onInput: event => this.handleInputChange(event), class: this.getClasses(), style: this.styles, placeholder: this.placeholder, disabled: this.disabled || this.isLoading, required: this.required, readonly: this.readOnly, maxlength: this.maxlength, value: this.value !== undefined && this.value !== null ? this.value : '', inputmode: this.maskPreset ? 'tel' : this.inputMode, ref: ref => (this.inputRef = ref), autocomplete: this.autocomplete }), !!this.clearIcon && !this.readOnly && !this.isLoading && !this.disabled && this.value && this.isFocused && (hAsync("cura-icon", { key: '7d46e420487a37b6fa90d93b25ba8d84d9197e43', size: this.size === 'large' || this.mode === 'transparent' ? 20 : 16, color: "primary-base", name: "closeCircle", iconset: "default", class: "clear-button", onClick: () => this.handleClearInput() })), this.isLoading && hAsync("cura-loader-circle", { key: '2ecef2f802b1807f214a9ca72099b690189898fd', size: this.size === 'large' ? 'medium' : 'small', color: "primary-base" })), this.renderHelperText()))));
|
|
13088
13087
|
}
|
|
13089
13088
|
static get formAssociated() { return true; }
|
|
13090
13089
|
static get watchers() { return {
|
|
@@ -13300,7 +13299,7 @@ class CuraLoaderCircle {
|
|
|
13300
13299
|
}; }
|
|
13301
13300
|
}
|
|
13302
13301
|
|
|
13303
|
-
const curaModalCss = ":host{display:block}.modal{position:fixed;height:100%;width:100%;top:var(--top-offset);bottom:var(--bottom-offset);left:var(--left-offset);right:var(--right-offset);z-index:-1;margin-top:var(--offset-top)}.modal.open{z-index:var(--zIndex)}.modal.open .backdrop,.modal.open .wrapper{opacity:1;visibility:visible;animation:fadeIn 0.3s ease-out}.container{display:flex;align-items:center;justify-content:center}.backdrop,.wrapper{opacity:0;visibility:hidden;transition:opacity 0.3s ease, visibility 0.3s ease}.backdrop{background-color:var(--background-color);z-index:calc(var(--zIndex) - 10);animation:fadeIn 0.3s ease-out}.wrapper{position:fixed;background-color:var(--neutral-white);border:2px solid var(--neutral-light);border-radius:calc(var(--base-spacing) * 3px);
|
|
13302
|
+
const curaModalCss = ":host{display:block}.modal{position:fixed;height:100%;width:100%;top:var(--top-offset);bottom:var(--bottom-offset);left:var(--left-offset);right:var(--right-offset);z-index:-1;margin-top:var(--offset-top)}.modal.open{z-index:var(--zIndex)}.modal.open .backdrop,.modal.open .wrapper{opacity:1;visibility:visible;animation:fadeIn 0.3s ease-out}.container{display:flex;align-items:center;justify-content:center}.backdrop,.wrapper{opacity:0;visibility:hidden;transition:opacity 0.3s ease, visibility 0.3s ease}.backdrop{background-color:var(--background-color);z-index:calc(var(--zIndex) - 10);animation:fadeIn 0.3s ease-out}.wrapper{position:fixed;background-color:var(--neutral-white);border:2px solid var(--neutral-light);border-radius:calc(var(--base-spacing) * 3px);max-width:600px;min-width:200px;padding:0px calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px);z-index:var(--zIndex);box-shadow:0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12));transform:scale(0.95);transition:transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease}.wrapper ::slotted(*){max-height:80vh;overflow:auto;padding-right:calc(var(--base-spacing) * 5px)}.modal.open .wrapper{transform:scale(1);opacity:1;visibility:visible}.close{justify-self:flex-end;padding-top:calc(var(--base-spacing) * 4px);background:none;border:none;cursor:pointer}.close.mobile{display:none}.close.desktop{display:flex}@media (max-width: 768px){.wrapper{position:fixed;bottom:0px;width:80%;padding-top:calc(var(--base-spacing) * 4px);padding-bottom:0px;border-radius:calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px) 0px 0px;border-bottom:none}.close{align-items:center;border-top:1px dashed var(--neutral-light);margin-top:calc(var(--base-spacing) * 4px);padding:calc(var(--base-spacing) * 4px) 0px;justify-content:center;width:100%}.close.mobile{display:flex;gap:calc(var(--base-spacing) * 2px)}.close.desktop{display:none}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}";
|
|
13304
13303
|
var CuraModalStyle0 = curaModalCss;
|
|
13305
13304
|
|
|
13306
13305
|
class CuraModal {
|
|
@@ -13701,6 +13700,7 @@ class CuraSelect {
|
|
|
13701
13700
|
constructor(hostRef) {
|
|
13702
13701
|
registerInstance(this, hostRef);
|
|
13703
13702
|
this.selected = createEvent(this, "selected", 7);
|
|
13703
|
+
this.searchTermInput = createEvent(this, "searchTermInput", 7);
|
|
13704
13704
|
if (hostRef.$hostElement$["s-ei"]) {
|
|
13705
13705
|
this.internals = hostRef.$hostElement$["s-ei"];
|
|
13706
13706
|
}
|
|
@@ -13777,10 +13777,12 @@ class CuraSelect {
|
|
|
13777
13777
|
this.value = '';
|
|
13778
13778
|
this.mode = 'default';
|
|
13779
13779
|
this.size = 'medium';
|
|
13780
|
+
this.iconName = undefined;
|
|
13780
13781
|
this.status = 'default';
|
|
13781
13782
|
this.disabled = false;
|
|
13782
13783
|
this.required = false;
|
|
13783
13784
|
this.searchBehavior = false;
|
|
13785
|
+
this.caseSensitive = true;
|
|
13784
13786
|
this.isHovered = false;
|
|
13785
13787
|
this.isFocused = false;
|
|
13786
13788
|
this.isOpen = false;
|
|
@@ -13795,13 +13797,23 @@ class CuraSelect {
|
|
|
13795
13797
|
* Filters the options based on the current input value.
|
|
13796
13798
|
*/
|
|
13797
13799
|
filterOptions(newText) {
|
|
13800
|
+
this.searchTermInput.emit(newText);
|
|
13798
13801
|
if (!this.isOpen || !this.searchBehavior) {
|
|
13799
13802
|
return;
|
|
13800
13803
|
}
|
|
13804
|
+
const removeAccents = (str) => {
|
|
13805
|
+
return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
|
|
13806
|
+
};
|
|
13807
|
+
let searchTerm = newText;
|
|
13808
|
+
if (!this.caseSensitive) {
|
|
13809
|
+
searchTerm = removeAccents(searchTerm).toLocaleLowerCase();
|
|
13810
|
+
}
|
|
13801
13811
|
this.options.forEach(option => {
|
|
13802
|
-
|
|
13803
|
-
|
|
13804
|
-
|
|
13812
|
+
let optionValue = option.textContent || '';
|
|
13813
|
+
if (!this.caseSensitive) {
|
|
13814
|
+
optionValue = removeAccents(optionValue === null || optionValue === void 0 ? void 0 : optionValue.toLowerCase());
|
|
13815
|
+
}
|
|
13816
|
+
const isVisible = optionValue.includes(searchTerm);
|
|
13805
13817
|
option.style.display = isVisible ? 'block' : 'none';
|
|
13806
13818
|
});
|
|
13807
13819
|
}
|
|
@@ -13979,19 +13991,19 @@ class CuraSelect {
|
|
|
13979
13991
|
* Renders the icon based on the component's status.
|
|
13980
13992
|
*/
|
|
13981
13993
|
renderIcon() {
|
|
13982
|
-
if (this.status === 'default')
|
|
13994
|
+
if (this.status === 'default' && !this.iconName)
|
|
13983
13995
|
return null;
|
|
13984
|
-
const icon = { success: 'checkCircle', error: 'alertCircle' }[this.status];
|
|
13996
|
+
const icon = { default: this.iconName, success: 'checkCircle', error: 'alertCircle' }[this.status];
|
|
13985
13997
|
return hAsync("cura-icon", { class: "feedback-icon", name: icon, iconset: "default", size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles });
|
|
13986
13998
|
}
|
|
13987
13999
|
render() {
|
|
13988
|
-
return (hAsync(Host, { key: '
|
|
14000
|
+
return (hAsync(Host, { key: 'c4d3b518ddf6b9498e3a038b42d96cc36ea5b9af', style: this.styles }, hAsync("div", { key: 'b469ec6460df4faa9dbf33ae46efd25b16e8dede', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (hAsync("cura-label", { key: 'b1e96f454e136f74a34d3fe2ad915a76b8892383', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && hAsync("span", { key: 'f6df4c9fd66179b157545354c9d7bce3a1965383', class: "required" }, "* "))), hAsync("div", { key: '3c99013ba59cbc7520fcd9e54e4911be88e257e8', class: {
|
|
13989
14001
|
'cura-input-field': true,
|
|
13990
14002
|
'open': this.isOpen,
|
|
13991
|
-
} }, this.renderIcon(), hAsync("input", { key: '
|
|
14003
|
+
} }, this.renderIcon(), hAsync("input", { key: '5c4cca3aa11ca5a43679551ef0db5d3b4a2672c1', type: "text", autocomplete: "off", onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput, readonly: this.searchBehavior ? null : true }), hAsync("button", { key: '0e4ae1fc33090cb1c2a5f6616302262093c709f3', class: "up-down-button" }, hAsync("cura-icon", { key: '7aa46c48d670725d6010e00ff74772dd76f04358', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: "default" }))), hAsync("cura-label", { key: 'b37bbce2d092b368509778cb39e830fbfba40107', class: "helper-text", size: "xsmall", color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, hAsync("slot", { key: 'b8090f03acc7d34e75088cdd8b7f375b2be21aaf' })), this.isOpen && (hAsync("div", { key: '4d279e833a3c4311972b11c259d616b7480fc5b5', class: {
|
|
13992
14004
|
menu: true,
|
|
13993
14005
|
open: this.isOpen,
|
|
13994
|
-
} }, hAsync("slot", { key: '
|
|
14006
|
+
} }, hAsync("slot", { key: '0c20c0bbfb9ed727825bb6cc7e06ab671350d37b', name: "option" }))))));
|
|
13995
14007
|
}
|
|
13996
14008
|
static get formAssociated() { return true; }
|
|
13997
14009
|
get host() { return getElement(this); }
|
|
@@ -14010,10 +14022,12 @@ class CuraSelect {
|
|
|
14010
14022
|
"value": [1537],
|
|
14011
14023
|
"mode": [513],
|
|
14012
14024
|
"size": [513],
|
|
14025
|
+
"iconName": [1, "icon-name"],
|
|
14013
14026
|
"status": [1537],
|
|
14014
14027
|
"disabled": [516],
|
|
14015
14028
|
"required": [516],
|
|
14016
14029
|
"searchBehavior": [516, "search-behavior"],
|
|
14030
|
+
"caseSensitive": [516, "case-sensitive"],
|
|
14017
14031
|
"isHovered": [32],
|
|
14018
14032
|
"isFocused": [32],
|
|
14019
14033
|
"isOpen": [32],
|
|
@@ -14023,7 +14037,7 @@ class CuraSelect {
|
|
|
14023
14037
|
},
|
|
14024
14038
|
"$listeners$": undefined,
|
|
14025
14039
|
"$lazyBundleId$": "-",
|
|
14026
|
-
"$attrsToReflect$": [["label", "label"], ["placeholder", "placeholder"], ["value", "value"], ["mode", "mode"], ["size", "size"], ["status", "status"], ["disabled", "disabled"], ["required", "required"], ["searchBehavior", "search-behavior"]]
|
|
14040
|
+
"$attrsToReflect$": [["label", "label"], ["placeholder", "placeholder"], ["value", "value"], ["mode", "mode"], ["size", "size"], ["status", "status"], ["disabled", "disabled"], ["required", "required"], ["searchBehavior", "search-behavior"], ["caseSensitive", "case-sensitive"]]
|
|
14027
14041
|
}; }
|
|
14028
14042
|
}
|
|
14029
14043
|
|
|
@@ -14196,7 +14210,7 @@ class CuraStepper {
|
|
|
14196
14210
|
return (hAsync("div", { class: "container", style: this.styles }, hAsync("div", { class: "stepper-list" }, this.stepList.map((step, stepIndex) => this.renderStep(step, stepIndex)))));
|
|
14197
14211
|
}
|
|
14198
14212
|
render() {
|
|
14199
|
-
return hAsync(Host, { key: '
|
|
14213
|
+
return hAsync(Host, { key: 'a6562de52fefff80eb2d310555ce56956cce64d9' }, this.variant === 'default' ? this.renderStepper() : this.renderCompactStepper());
|
|
14200
14214
|
}
|
|
14201
14215
|
get host() { return getElement(this); }
|
|
14202
14216
|
static get style() { return CuraStepperStyle0; }
|
package/index.mjs
CHANGED
|
@@ -3265,10 +3265,10 @@ class CuraBadgePill {
|
|
|
3265
3265
|
this.iconset = 'default';
|
|
3266
3266
|
this.disabled = false;
|
|
3267
3267
|
this.iconOnly = false;
|
|
3268
|
-
this.borderRadius =
|
|
3268
|
+
this.borderRadius = '2px';
|
|
3269
3269
|
this.styles = {};
|
|
3270
3270
|
}
|
|
3271
|
-
|
|
3271
|
+
watchColorChange() {
|
|
3272
3272
|
this.setColors();
|
|
3273
3273
|
}
|
|
3274
3274
|
connectedCallback() {
|
|
@@ -3276,10 +3276,7 @@ class CuraBadgePill {
|
|
|
3276
3276
|
this.setColors();
|
|
3277
3277
|
}
|
|
3278
3278
|
setBaseStyles() {
|
|
3279
|
-
this.styles
|
|
3280
|
-
this.styles['--font-family'] = this.theme.fonts.getFamily();
|
|
3281
|
-
this.styles['--font-size'] = this.theme.fonts.getSize();
|
|
3282
|
-
this.styles = Object.assign({}, this.styles);
|
|
3279
|
+
this.styles = Object.assign(Object.assign({}, this.styles), { '--base-spacing': this.theme.spacing.getSpacing(), '--font-family': this.theme.fonts.getFamily(), '--font-size': this.theme.fonts.getSize() });
|
|
3283
3280
|
}
|
|
3284
3281
|
setColors() {
|
|
3285
3282
|
const colors = [
|
|
@@ -3288,10 +3285,11 @@ class CuraBadgePill {
|
|
|
3288
3285
|
{ name: '--color-background-disabled', theme: 'neutral-pale' },
|
|
3289
3286
|
{ name: '--color-outline-disabled', theme: 'neutral-medium' },
|
|
3290
3287
|
];
|
|
3288
|
+
const newStyles = Object.assign({}, this.styles);
|
|
3291
3289
|
colors.forEach(color => {
|
|
3292
|
-
|
|
3290
|
+
newStyles[color.name] = this.theme.colors.getColor(color.theme);
|
|
3293
3291
|
});
|
|
3294
|
-
this.styles =
|
|
3292
|
+
this.styles = newStyles;
|
|
3295
3293
|
}
|
|
3296
3294
|
hostCSSProperties() {
|
|
3297
3295
|
return {
|
|
@@ -3307,9 +3305,7 @@ class CuraBadgePill {
|
|
|
3307
3305
|
return classes;
|
|
3308
3306
|
}
|
|
3309
3307
|
getSymbolColor() {
|
|
3310
|
-
return this.disabled
|
|
3311
|
-
? 'neutral-medium'
|
|
3312
|
-
: `${this.color}-dark`;
|
|
3308
|
+
return this.disabled ? 'neutral-medium' : `${this.color}-dark`;
|
|
3313
3309
|
}
|
|
3314
3310
|
getIcon() {
|
|
3315
3311
|
if (!this.iconName)
|
|
@@ -3318,11 +3314,11 @@ class CuraBadgePill {
|
|
|
3318
3314
|
}
|
|
3319
3315
|
render() {
|
|
3320
3316
|
const symbolColor = this.getSymbolColor();
|
|
3321
|
-
return (hAsync(Host, { key: '
|
|
3317
|
+
return (hAsync(Host, { key: 'ac5aafc485ee2a88514a34fc5025f54c01901a46', style: this.hostCSSProperties() }, hAsync("div", { key: '7f32b824ab54471c0517980e6e4ed2b1b21fd435', class: this.getClasses(), style: this.styles }, this.getIcon(), hAsync("cura-label", { key: 'c2ef8d70153a5b8498cf2cb3ce6b60f80aec1d51', size: "xsmall", "line-height": "117%", color: symbolColor }, hAsync("slot", { key: '758b0c994aab961f4c76b7030028268aa8c2364f' })))));
|
|
3322
3318
|
}
|
|
3323
3319
|
get host() { return getElement(this); }
|
|
3324
3320
|
static get watchers() { return {
|
|
3325
|
-
"color": ["
|
|
3321
|
+
"color": ["watchColorChange"]
|
|
3326
3322
|
}; }
|
|
3327
3323
|
static get style() { return CuraBadgePillStyle0; }
|
|
3328
3324
|
static get cmpMeta() { return {
|
|
@@ -8357,12 +8353,13 @@ class CuraDropdownSearch {
|
|
|
8357
8353
|
this.valueChanged = createEvent(this, "valueChanged", 7);
|
|
8358
8354
|
this.onselect = createEvent(this, "onselect", 7);
|
|
8359
8355
|
this.overlayElement = null;
|
|
8360
|
-
this.adjustInputPosition = () => {
|
|
8356
|
+
this.adjustInputPosition = async () => {
|
|
8361
8357
|
var _a, _b;
|
|
8358
|
+
// const tick = await Promise.resolve().then();
|
|
8362
8359
|
const isKeyboardOpen = (window === null || window === void 0 ? void 0 : window.innerHeight) < this.screenDefaultHeight;
|
|
8363
8360
|
const dropdown = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-mobile');
|
|
8364
8361
|
if (dropdown) {
|
|
8365
|
-
dropdown.style.position = isKeyboardOpen ? 'absolute' : 'fixed';
|
|
8362
|
+
// dropdown.style.position = isKeyboardOpen ? 'absolute' : 'fixed';
|
|
8366
8363
|
dropdown.style.bottom = isKeyboardOpen ? `${((_b = window === null || window === void 0 ? void 0 : window.screen) === null || _b === void 0 ? void 0 : _b.height) - (window === null || window === void 0 ? void 0 : window.innerHeight)}px` : '0';
|
|
8367
8364
|
window.scroll({ top: 0, left: 0, behavior: 'smooth' });
|
|
8368
8365
|
}
|
|
@@ -8607,9 +8604,9 @@ class CuraDropdownSearch {
|
|
|
8607
8604
|
}
|
|
8608
8605
|
render() {
|
|
8609
8606
|
const isMobileDropdown = this.isMobile && this.isDropdownOpen;
|
|
8610
|
-
return (hAsync(Host, { key: '
|
|
8607
|
+
return (hAsync(Host, { key: '85b79d1f41c8f03ed8aa8f915743c6a35d529b20', style: this.hostCSSProperties(), class: "dropdown-overlay" }, hAsync("div", { key: 'c5255bc1445309a8da2e28e76d31c151170fb1bf', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, hAsync("div", { key: 'a0e9db281870954a6f3155cd482c741e3d44db24', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (hAsync("cura-button-transparent", { key: '67e58b57752cbe8a8fbbaee555e9c905c710782c', fontColor: "dark", onClick: () => this.handleGoBack(), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), hAsync("cura-input-text", { key: '87edd1a5b058a9c7ae966999269f1546d7132a53', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: isMobileDropdown ? 'transparent' : 'default', required: this.required, hideErrorIcon: this.status === 'error', iconName: this.iconName || 'search', value: this.value, status: this.status, onValueChange: e => this.onValueChange(e.target.value), onInput: e => this.handleInputChange(e), onFocus: () => this.handleOnFocus(), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
|
|
8611
8608
|
this.handleOnBlur();
|
|
8612
|
-
}, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, hAsync("slot", { key: '
|
|
8609
|
+
}, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, hAsync("slot", { key: '47f7e07fbcce084cef173c23583ad43e580ae02d', name: "helperText" }))), hAsync("div", { key: '4748cdb4cd039f29f50cfdf1f9ff110bafbeb064', id: "dropdown-search-list", class: this.getDropdownClasses() }, hAsync("slot", { key: '21a66543f65ff198f0b9f60758f1f0930342dc4c', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
|
|
8613
8610
|
}
|
|
8614
8611
|
get host() { return getElement(this); }
|
|
8615
8612
|
static get watchers() { return {
|
|
@@ -8904,7 +8901,7 @@ class CuraIcon {
|
|
|
8904
8901
|
}; }
|
|
8905
8902
|
}
|
|
8906
8903
|
|
|
8907
|
-
var iconsetdefaulticons = ["360", "accessibility", "addUser", "airdrop", "alertCircle", "alertTriangle", "arrowDown", "arrowDownCircle", "arrowLeft", "arrowLeftCircle", "arrowRight", "arrowRightCircle", "arrowUp", "arrowUpCircle", "attach", "avatarF", "avatarM", "biometry", "bloodGroup", "calendar", "cam", "camOff", "central", "chatCircle", "check", "checkBadge", "checkCircle", "checkDouble", "clock", "close", "closeCircle", "collapse", "config", "contacts", "currency", "delete", "desktop", "doc", "down", "download", "drug", "duplicate", "edit", "exam", "examDoc", "expand", "facebook", "fileBmp", "fileJpg", "filePdf", "filePng", "fileUpload", "fileXls", "filter", "fullscreen", "gallery", "geotag", "geotagUnity", "geotagUnityGroup", "google", "graph", "healthPlan", "heart", "height", "height2", "home", "horizontalList", "imageUp", "infoCircle", "instagram", "key", "lamp", "language", "language2", "languageEN", "languagePT", "lattes", "left", "like", "link", "linkExternal", "linkedin", "list", "login", "logout", "mail", "maintenance", "medDoc", "medEspec", "medImg", "medUser", "medical", "menuHamburguer", "menuKebab", "menuMeatballs", "mic", "micOff", "minus", "minusCircle", "minusSquare", "mobile", "news", "notification", "npsDeslike", "npsHate", "npsLike", "npsLove", "npsNeutral", "order", "partner", "phone", "play", "plus", "plusCircle", "plusSquare", "print", "profile", "profileCircle", "questionCircle", "questionSquare", "range", "reload", "ribbon", "right", "schedule", "scheduleCancel", "scheduleCheck", "scheduleHistorico", "search", "secure", "share", "siren", "sound", "soundOff", "subItem", "swap", "target", "team", "telegram", "twitter", "unLink", "unSecure", "unity", "unlike", "up", "upload", "verticalList", "viewFalse", "viewTrue", "weight", "whatsapp", "wifi", "wifiOff", "youtube", "zoomIn", "zoomOut"];
|
|
8904
|
+
var iconsetdefaulticons = ["360", "accessibility", "accessibility2", "accessibility3", "accessibility4", "addUser", "airdrop", "alertCircle", "alertTriangle", "arrowDown", "arrowDownCircle", "arrowLeft", "arrowLeftCircle", "arrowRight", "arrowRightCircle", "arrowUp", "arrowUpCircle", "attach", "avatarF", "avatarM", "biometry", "bloodGroup", "calendar", "cam", "camOff", "central", "chatCircle", "check", "checkBadge", "checkCircle", "checkDouble", "clock", "close", "closeCircle", "collapse", "config", "contacts", "currency", "delete", "desktop", "doc", "down", "download", "drug", "duplicate", "edit", "elevator", "exam", "examDoc", "expand", "facebook", "fileBmp", "fileJpg", "filePdf", "filePng", "fileUpload", "fileXls", "filter", "fullscreen", "gallery", "geotag", "geotagUnity", "geotagUnityGroup", "google", "graph", "healthPlan", "heart", "height", "height2", "home", "horizontalList", "imageUp", "infoCircle", "instagram", "key", "lamp", "language", "language2", "languageEN", "languagePT", "lattes", "left", "like", "link", "linkExternal", "linkedin", "list", "login", "logout", "mail", "maintenance", "medDoc", "medEspec", "medImg", "medUser", "medical", "menuHamburguer", "menuKebab", "menuMeatballs", "mic", "micOff", "minus", "minusCircle", "minusSquare", "mobile", "news", "notification", "npsDeslike", "npsHate", "npsLike", "npsLove", "npsNeutral", "order", "parking", "partner", "phone", "play", "plus", "plusCircle", "plusSquare", "print", "profile", "profileCircle", "questionCircle", "questionSquare", "range", "reload", "ribbon", "right", "schedule", "scheduleCancel", "scheduleCheck", "scheduleHistorico", "search", "secure", "share", "siren", "sound", "soundOff", "subItem", "swap", "target", "team", "telegram", "twitter", "unLink", "unSecure", "unity", "unlike", "up", "upload", "verticalList", "viewFalse", "viewTrue", "weight", "whatsapp", "wifi", "wifiOff", "youtube", "zoomIn", "zoomOut"];
|
|
8908
8905
|
|
|
8909
8906
|
const curaIconsViewCss = ":host{display:block;padding:24px;font-family:\"Roboto\", Arial, Helvetica, sans-serif}.iconDetail{display:block}.iconSizes{display:flex;align-items:center}.iconSizes .size{display:flex;flex-direction:column;text-align:center;align-items:center;margin-right:9px;padding:8px}.iconSizes .size:last-child{margin-right:0}.iconSizes .size span{font-size:10px;margin:8px 0}.iconSizes.invert{margin-top:12px}.iconSizes.invert .size{background-color:#2d2d2d;color:#F6F6F6;border-radius:3px}.icons{margin-top:28px;display:flex;flex-wrap:wrap;position:relative}.icons .icon{position:relative;padding:4px;cursor:pointer;opacity:0.6;transition:opacity 0.2s linear;width:105px;display:flex;flex-direction:column;text-align:center;align-items:center;margin-bottom:16px;box-sizing:border-box;}.icons .icon cura-label{margin-top:8px}.icons .icon cura-paragraph{margin-top:4px}";
|
|
8910
8907
|
var CuraIconsViewStyle0 = curaIconsViewCss;
|
|
@@ -13010,6 +13007,8 @@ class CuraInputText {
|
|
|
13010
13007
|
}
|
|
13011
13008
|
}
|
|
13012
13009
|
initializeAdvancedMask() {
|
|
13010
|
+
if (!this.inputRef)
|
|
13011
|
+
return;
|
|
13013
13012
|
try {
|
|
13014
13013
|
const config = typeof this.maskAdvanced === 'string' ? JSON.parse(this.maskAdvanced) : this.maskAdvanced;
|
|
13015
13014
|
this.maskedInput = IMask(this.inputRef, config);
|
|
@@ -13080,7 +13079,7 @@ class CuraInputText {
|
|
|
13080
13079
|
e.preventDefault();
|
|
13081
13080
|
}
|
|
13082
13081
|
render() {
|
|
13083
|
-
return (hAsync(Host, { key: '
|
|
13082
|
+
return (hAsync(Host, { key: '0aebf7d545af0e2eec1f542e5545ef34d0356e33' }, hAsync("div", { key: '22e428a2706273d1613e39f860a721a73cab6d03', style: this.styles, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), class: Object.assign({ 'cura-input-group': true }, this.getClasses()) }, hAsync("div", { key: '8ef0bc3f5bf3427abdbd247a8c78b722eaaca541', class: "input-wrapper" }, this.label && (hAsync("cura-label", { key: '4aef20d0c2880ed38c1821e2690829a31fe7fea8', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getLabelColor() }, this.label, " ", this.required && hAsync("span", { key: 'a3bb15165ae1ffedae59a32a1e299c9a36ad9b2c', class: "required" }, "* "))), hAsync("div", { key: '0b12a41f21a4c26273390dd15f362a5baccb0f2d', class: "cura-input-field", part: "cura-input-field", style: this.styles }, this.renderIcon(), hAsync("input", { key: 'da03ef422267592fa3c732cb553e16fd1209bdf0', name: this.name ? this.name : '', type: this.type, onKeyDown: event => this.handleKeyDown(event), onBlur: this.handleInputBlur.bind(this), onFocus: this.handleInputFocus.bind(this), onInput: event => this.handleInputChange(event), class: this.getClasses(), style: this.styles, placeholder: this.placeholder, disabled: this.disabled || this.isLoading, required: this.required, readonly: this.readOnly, maxlength: this.maxlength, value: this.value !== undefined && this.value !== null ? this.value : '', inputmode: this.maskPreset ? 'tel' : this.inputMode, ref: ref => (this.inputRef = ref), autocomplete: this.autocomplete }), !!this.clearIcon && !this.readOnly && !this.isLoading && !this.disabled && this.value && this.isFocused && (hAsync("cura-icon", { key: '7d46e420487a37b6fa90d93b25ba8d84d9197e43', size: this.size === 'large' || this.mode === 'transparent' ? 20 : 16, color: "primary-base", name: "closeCircle", iconset: "default", class: "clear-button", onClick: () => this.handleClearInput() })), this.isLoading && hAsync("cura-loader-circle", { key: '2ecef2f802b1807f214a9ca72099b690189898fd', size: this.size === 'large' ? 'medium' : 'small', color: "primary-base" })), this.renderHelperText()))));
|
|
13084
13083
|
}
|
|
13085
13084
|
static get formAssociated() { return true; }
|
|
13086
13085
|
static get watchers() { return {
|
|
@@ -13296,7 +13295,7 @@ class CuraLoaderCircle {
|
|
|
13296
13295
|
}; }
|
|
13297
13296
|
}
|
|
13298
13297
|
|
|
13299
|
-
const curaModalCss = ":host{display:block}.modal{position:fixed;height:100%;width:100%;top:var(--top-offset);bottom:var(--bottom-offset);left:var(--left-offset);right:var(--right-offset);z-index:-1;margin-top:var(--offset-top)}.modal.open{z-index:var(--zIndex)}.modal.open .backdrop,.modal.open .wrapper{opacity:1;visibility:visible;animation:fadeIn 0.3s ease-out}.container{display:flex;align-items:center;justify-content:center}.backdrop,.wrapper{opacity:0;visibility:hidden;transition:opacity 0.3s ease, visibility 0.3s ease}.backdrop{background-color:var(--background-color);z-index:calc(var(--zIndex) - 10);animation:fadeIn 0.3s ease-out}.wrapper{position:fixed;background-color:var(--neutral-white);border:2px solid var(--neutral-light);border-radius:calc(var(--base-spacing) * 3px);
|
|
13298
|
+
const curaModalCss = ":host{display:block}.modal{position:fixed;height:100%;width:100%;top:var(--top-offset);bottom:var(--bottom-offset);left:var(--left-offset);right:var(--right-offset);z-index:-1;margin-top:var(--offset-top)}.modal.open{z-index:var(--zIndex)}.modal.open .backdrop,.modal.open .wrapper{opacity:1;visibility:visible;animation:fadeIn 0.3s ease-out}.container{display:flex;align-items:center;justify-content:center}.backdrop,.wrapper{opacity:0;visibility:hidden;transition:opacity 0.3s ease, visibility 0.3s ease}.backdrop{background-color:var(--background-color);z-index:calc(var(--zIndex) - 10);animation:fadeIn 0.3s ease-out}.wrapper{position:fixed;background-color:var(--neutral-white);border:2px solid var(--neutral-light);border-radius:calc(var(--base-spacing) * 3px);max-width:600px;min-width:200px;padding:0px calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px);z-index:var(--zIndex);box-shadow:0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12));transform:scale(0.95);transition:transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease}.wrapper ::slotted(*){max-height:80vh;overflow:auto;padding-right:calc(var(--base-spacing) * 5px)}.modal.open .wrapper{transform:scale(1);opacity:1;visibility:visible}.close{justify-self:flex-end;padding-top:calc(var(--base-spacing) * 4px);background:none;border:none;cursor:pointer}.close.mobile{display:none}.close.desktop{display:flex}@media (max-width: 768px){.wrapper{position:fixed;bottom:0px;width:80%;padding-top:calc(var(--base-spacing) * 4px);padding-bottom:0px;border-radius:calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px) 0px 0px;border-bottom:none}.close{align-items:center;border-top:1px dashed var(--neutral-light);margin-top:calc(var(--base-spacing) * 4px);padding:calc(var(--base-spacing) * 4px) 0px;justify-content:center;width:100%}.close.mobile{display:flex;gap:calc(var(--base-spacing) * 2px)}.close.desktop{display:none}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}";
|
|
13300
13299
|
var CuraModalStyle0 = curaModalCss;
|
|
13301
13300
|
|
|
13302
13301
|
class CuraModal {
|
|
@@ -13697,6 +13696,7 @@ class CuraSelect {
|
|
|
13697
13696
|
constructor(hostRef) {
|
|
13698
13697
|
registerInstance(this, hostRef);
|
|
13699
13698
|
this.selected = createEvent(this, "selected", 7);
|
|
13699
|
+
this.searchTermInput = createEvent(this, "searchTermInput", 7);
|
|
13700
13700
|
if (hostRef.$hostElement$["s-ei"]) {
|
|
13701
13701
|
this.internals = hostRef.$hostElement$["s-ei"];
|
|
13702
13702
|
}
|
|
@@ -13773,10 +13773,12 @@ class CuraSelect {
|
|
|
13773
13773
|
this.value = '';
|
|
13774
13774
|
this.mode = 'default';
|
|
13775
13775
|
this.size = 'medium';
|
|
13776
|
+
this.iconName = undefined;
|
|
13776
13777
|
this.status = 'default';
|
|
13777
13778
|
this.disabled = false;
|
|
13778
13779
|
this.required = false;
|
|
13779
13780
|
this.searchBehavior = false;
|
|
13781
|
+
this.caseSensitive = true;
|
|
13780
13782
|
this.isHovered = false;
|
|
13781
13783
|
this.isFocused = false;
|
|
13782
13784
|
this.isOpen = false;
|
|
@@ -13791,13 +13793,23 @@ class CuraSelect {
|
|
|
13791
13793
|
* Filters the options based on the current input value.
|
|
13792
13794
|
*/
|
|
13793
13795
|
filterOptions(newText) {
|
|
13796
|
+
this.searchTermInput.emit(newText);
|
|
13794
13797
|
if (!this.isOpen || !this.searchBehavior) {
|
|
13795
13798
|
return;
|
|
13796
13799
|
}
|
|
13800
|
+
const removeAccents = (str) => {
|
|
13801
|
+
return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
|
|
13802
|
+
};
|
|
13803
|
+
let searchTerm = newText;
|
|
13804
|
+
if (!this.caseSensitive) {
|
|
13805
|
+
searchTerm = removeAccents(searchTerm).toLocaleLowerCase();
|
|
13806
|
+
}
|
|
13797
13807
|
this.options.forEach(option => {
|
|
13798
|
-
|
|
13799
|
-
|
|
13800
|
-
|
|
13808
|
+
let optionValue = option.textContent || '';
|
|
13809
|
+
if (!this.caseSensitive) {
|
|
13810
|
+
optionValue = removeAccents(optionValue === null || optionValue === void 0 ? void 0 : optionValue.toLowerCase());
|
|
13811
|
+
}
|
|
13812
|
+
const isVisible = optionValue.includes(searchTerm);
|
|
13801
13813
|
option.style.display = isVisible ? 'block' : 'none';
|
|
13802
13814
|
});
|
|
13803
13815
|
}
|
|
@@ -13975,19 +13987,19 @@ class CuraSelect {
|
|
|
13975
13987
|
* Renders the icon based on the component's status.
|
|
13976
13988
|
*/
|
|
13977
13989
|
renderIcon() {
|
|
13978
|
-
if (this.status === 'default')
|
|
13990
|
+
if (this.status === 'default' && !this.iconName)
|
|
13979
13991
|
return null;
|
|
13980
|
-
const icon = { success: 'checkCircle', error: 'alertCircle' }[this.status];
|
|
13992
|
+
const icon = { default: this.iconName, success: 'checkCircle', error: 'alertCircle' }[this.status];
|
|
13981
13993
|
return hAsync("cura-icon", { class: "feedback-icon", name: icon, iconset: "default", size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles });
|
|
13982
13994
|
}
|
|
13983
13995
|
render() {
|
|
13984
|
-
return (hAsync(Host, { key: '
|
|
13996
|
+
return (hAsync(Host, { key: 'c4d3b518ddf6b9498e3a038b42d96cc36ea5b9af', style: this.styles }, hAsync("div", { key: 'b469ec6460df4faa9dbf33ae46efd25b16e8dede', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (hAsync("cura-label", { key: 'b1e96f454e136f74a34d3fe2ad915a76b8892383', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && hAsync("span", { key: 'f6df4c9fd66179b157545354c9d7bce3a1965383', class: "required" }, "* "))), hAsync("div", { key: '3c99013ba59cbc7520fcd9e54e4911be88e257e8', class: {
|
|
13985
13997
|
'cura-input-field': true,
|
|
13986
13998
|
'open': this.isOpen,
|
|
13987
|
-
} }, this.renderIcon(), hAsync("input", { key: '
|
|
13999
|
+
} }, this.renderIcon(), hAsync("input", { key: '5c4cca3aa11ca5a43679551ef0db5d3b4a2672c1', type: "text", autocomplete: "off", onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput, readonly: this.searchBehavior ? null : true }), hAsync("button", { key: '0e4ae1fc33090cb1c2a5f6616302262093c709f3', class: "up-down-button" }, hAsync("cura-icon", { key: '7aa46c48d670725d6010e00ff74772dd76f04358', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: "default" }))), hAsync("cura-label", { key: 'b37bbce2d092b368509778cb39e830fbfba40107', class: "helper-text", size: "xsmall", color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, hAsync("slot", { key: 'b8090f03acc7d34e75088cdd8b7f375b2be21aaf' })), this.isOpen && (hAsync("div", { key: '4d279e833a3c4311972b11c259d616b7480fc5b5', class: {
|
|
13988
14000
|
menu: true,
|
|
13989
14001
|
open: this.isOpen,
|
|
13990
|
-
} }, hAsync("slot", { key: '
|
|
14002
|
+
} }, hAsync("slot", { key: '0c20c0bbfb9ed727825bb6cc7e06ab671350d37b', name: "option" }))))));
|
|
13991
14003
|
}
|
|
13992
14004
|
static get formAssociated() { return true; }
|
|
13993
14005
|
get host() { return getElement(this); }
|
|
@@ -14006,10 +14018,12 @@ class CuraSelect {
|
|
|
14006
14018
|
"value": [1537],
|
|
14007
14019
|
"mode": [513],
|
|
14008
14020
|
"size": [513],
|
|
14021
|
+
"iconName": [1, "icon-name"],
|
|
14009
14022
|
"status": [1537],
|
|
14010
14023
|
"disabled": [516],
|
|
14011
14024
|
"required": [516],
|
|
14012
14025
|
"searchBehavior": [516, "search-behavior"],
|
|
14026
|
+
"caseSensitive": [516, "case-sensitive"],
|
|
14013
14027
|
"isHovered": [32],
|
|
14014
14028
|
"isFocused": [32],
|
|
14015
14029
|
"isOpen": [32],
|
|
@@ -14019,7 +14033,7 @@ class CuraSelect {
|
|
|
14019
14033
|
},
|
|
14020
14034
|
"$listeners$": undefined,
|
|
14021
14035
|
"$lazyBundleId$": "-",
|
|
14022
|
-
"$attrsToReflect$": [["label", "label"], ["placeholder", "placeholder"], ["value", "value"], ["mode", "mode"], ["size", "size"], ["status", "status"], ["disabled", "disabled"], ["required", "required"], ["searchBehavior", "search-behavior"]]
|
|
14036
|
+
"$attrsToReflect$": [["label", "label"], ["placeholder", "placeholder"], ["value", "value"], ["mode", "mode"], ["size", "size"], ["status", "status"], ["disabled", "disabled"], ["required", "required"], ["searchBehavior", "search-behavior"], ["caseSensitive", "case-sensitive"]]
|
|
14023
14037
|
}; }
|
|
14024
14038
|
}
|
|
14025
14039
|
|
|
@@ -14192,7 +14206,7 @@ class CuraStepper {
|
|
|
14192
14206
|
return (hAsync("div", { class: "container", style: this.styles }, hAsync("div", { class: "stepper-list" }, this.stepList.map((step, stepIndex) => this.renderStep(step, stepIndex)))));
|
|
14193
14207
|
}
|
|
14194
14208
|
render() {
|
|
14195
|
-
return hAsync(Host, { key: '
|
|
14209
|
+
return hAsync(Host, { key: 'a6562de52fefff80eb2d310555ce56956cce64d9' }, this.variant === 'default' ? this.renderStepper() : this.renderCompactStepper());
|
|
14196
14210
|
}
|
|
14197
14211
|
get host() { return getElement(this); }
|
|
14198
14212
|
static get style() { return CuraStepperStyle0; }
|