@rededor/cura-hydrate 1.5.0-alpha.1 → 1.5.0
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 +95 -63
- package/index.mjs +95 -63
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -567,11 +567,13 @@ class CuraThemeBreakpointsModule {
|
|
|
567
567
|
|
|
568
568
|
class CuraThemeModule {
|
|
569
569
|
constructor() {
|
|
570
|
+
var _a;
|
|
570
571
|
this.prefix = '--cura';
|
|
571
572
|
this.colors = new CuraThemeColorsModule();
|
|
572
573
|
this.spacing = new CuraThemeSpacingModule();
|
|
573
574
|
this.fonts = new CuraThemeFontsModule();
|
|
574
575
|
this.breakpoints = new CuraThemeBreakpointsModule();
|
|
576
|
+
this.groupObject = {};
|
|
575
577
|
/* Private */
|
|
576
578
|
/** Set css var based on object structure */
|
|
577
579
|
this.setCssVar = (prop, path) => {
|
|
@@ -579,7 +581,7 @@ class CuraThemeModule {
|
|
|
579
581
|
this.rootElement.style.setProperty(varName, prop[1]);
|
|
580
582
|
};
|
|
581
583
|
this.groupPath = (a, b) => `${a}-${b}`;
|
|
582
|
-
this.isObject =
|
|
584
|
+
this.isObject = val => {
|
|
583
585
|
return val && typeof val === 'object' && !Array.isArray(val);
|
|
584
586
|
};
|
|
585
587
|
/** Deep merge objects */
|
|
@@ -595,18 +597,26 @@ class CuraThemeModule {
|
|
|
595
597
|
}
|
|
596
598
|
};
|
|
597
599
|
/** Set css vars from preset object */
|
|
598
|
-
this.buildCssVars = (path, obj) => {
|
|
600
|
+
this.buildCssVars = (path, obj, isGroup = false) => {
|
|
599
601
|
const entries = Object.entries(obj);
|
|
600
602
|
for (let e of entries) {
|
|
601
603
|
if (this.isObject(e[1])) {
|
|
602
|
-
this.buildCssVars(this.groupPath(path, e[0]), e[1]);
|
|
604
|
+
this.buildCssVars(this.groupPath(path, e[0]), e[1], isGroup);
|
|
603
605
|
}
|
|
604
606
|
else {
|
|
605
|
-
|
|
607
|
+
if (isGroup) {
|
|
608
|
+
const varName = this.groupPath(path, e[0]);
|
|
609
|
+
this.groupObject[varName] = e[1];
|
|
610
|
+
}
|
|
611
|
+
else {
|
|
612
|
+
this.setCssVar(e, path);
|
|
613
|
+
}
|
|
606
614
|
}
|
|
607
615
|
}
|
|
608
616
|
};
|
|
609
|
-
|
|
617
|
+
if (typeof window === 'undefined')
|
|
618
|
+
return;
|
|
619
|
+
this.rootElement = (_a = window === null || window === void 0 ? void 0 : window.document) === null || _a === void 0 ? void 0 : _a.documentElement;
|
|
610
620
|
}
|
|
611
621
|
/**
|
|
612
622
|
* Load a theme.
|
|
@@ -616,6 +626,11 @@ class CuraThemeModule {
|
|
|
616
626
|
const preset = ThemePresets[theme] ? ThemePresets[theme] : ThemePresets.default;
|
|
617
627
|
this.buildCssVars(this.prefix, preset);
|
|
618
628
|
}
|
|
629
|
+
loadVarsSSR(theme = 'default') {
|
|
630
|
+
const preset = ThemePresets[theme] ? ThemePresets[theme] : ThemePresets.default;
|
|
631
|
+
this.buildCssVars(this.prefix, preset, true);
|
|
632
|
+
return this.groupObject;
|
|
633
|
+
}
|
|
619
634
|
/**
|
|
620
635
|
* Define a custom theme
|
|
621
636
|
* @param customTheme Custom theme object definition
|
|
@@ -627,9 +642,7 @@ class CuraThemeModule {
|
|
|
627
642
|
this.load('default');
|
|
628
643
|
}
|
|
629
644
|
else {
|
|
630
|
-
const preset = customTheme.fromPreset && customTheme.fromPreset in ThemePresets
|
|
631
|
-
? ThemePresets[customTheme.fromPreset]
|
|
632
|
-
: ThemePresets.default;
|
|
645
|
+
const preset = customTheme.fromPreset && customTheme.fromPreset in ThemePresets ? ThemePresets[customTheme.fromPreset] : ThemePresets.default;
|
|
633
646
|
const newTheme = Object.assign({}, JSON.parse(JSON.stringify(preset)));
|
|
634
647
|
this.mergeObject(customTheme.definitions, newTheme);
|
|
635
648
|
ThemePresets[customTag] = newTheme;
|
|
@@ -3269,10 +3282,10 @@ class CuraBadgePill {
|
|
|
3269
3282
|
this.iconset = 'default';
|
|
3270
3283
|
this.disabled = false;
|
|
3271
3284
|
this.iconOnly = false;
|
|
3272
|
-
this.borderRadius =
|
|
3285
|
+
this.borderRadius = '2px';
|
|
3273
3286
|
this.styles = {};
|
|
3274
3287
|
}
|
|
3275
|
-
|
|
3288
|
+
watchColorChange() {
|
|
3276
3289
|
this.setColors();
|
|
3277
3290
|
}
|
|
3278
3291
|
connectedCallback() {
|
|
@@ -3280,10 +3293,7 @@ class CuraBadgePill {
|
|
|
3280
3293
|
this.setColors();
|
|
3281
3294
|
}
|
|
3282
3295
|
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);
|
|
3296
|
+
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
3297
|
}
|
|
3288
3298
|
setColors() {
|
|
3289
3299
|
const colors = [
|
|
@@ -3292,10 +3302,11 @@ class CuraBadgePill {
|
|
|
3292
3302
|
{ name: '--color-background-disabled', theme: 'neutral-pale' },
|
|
3293
3303
|
{ name: '--color-outline-disabled', theme: 'neutral-medium' },
|
|
3294
3304
|
];
|
|
3305
|
+
const newStyles = Object.assign({}, this.styles);
|
|
3295
3306
|
colors.forEach(color => {
|
|
3296
|
-
|
|
3307
|
+
newStyles[color.name] = this.theme.colors.getColor(color.theme);
|
|
3297
3308
|
});
|
|
3298
|
-
this.styles =
|
|
3309
|
+
this.styles = newStyles;
|
|
3299
3310
|
}
|
|
3300
3311
|
hostCSSProperties() {
|
|
3301
3312
|
return {
|
|
@@ -3311,9 +3322,7 @@ class CuraBadgePill {
|
|
|
3311
3322
|
return classes;
|
|
3312
3323
|
}
|
|
3313
3324
|
getSymbolColor() {
|
|
3314
|
-
return this.disabled
|
|
3315
|
-
? 'neutral-medium'
|
|
3316
|
-
: `${this.color}-dark`;
|
|
3325
|
+
return this.disabled ? 'neutral-medium' : `${this.color}-dark`;
|
|
3317
3326
|
}
|
|
3318
3327
|
getIcon() {
|
|
3319
3328
|
if (!this.iconName)
|
|
@@ -3322,11 +3331,11 @@ class CuraBadgePill {
|
|
|
3322
3331
|
}
|
|
3323
3332
|
render() {
|
|
3324
3333
|
const symbolColor = this.getSymbolColor();
|
|
3325
|
-
return (hAsync(Host, { key: '
|
|
3334
|
+
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
3335
|
}
|
|
3327
3336
|
get host() { return getElement(this); }
|
|
3328
3337
|
static get watchers() { return {
|
|
3329
|
-
"color": ["
|
|
3338
|
+
"color": ["watchColorChange"]
|
|
3330
3339
|
}; }
|
|
3331
3340
|
static get style() { return CuraBadgePillStyle0; }
|
|
3332
3341
|
static get cmpMeta() { return {
|
|
@@ -3454,7 +3463,7 @@ class CuraButton {
|
|
|
3454
3463
|
render() {
|
|
3455
3464
|
const symbolColor = this.getSymbolColor();
|
|
3456
3465
|
const labelSize = labelSizes[this.size] || labelSizes["default"];
|
|
3457
|
-
return (hAsync(Host, { key: '07b87d98fb398bc2897e666dc8cd54734f20734d' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { class: "label", size: labelSize, lineHeight: '
|
|
3466
|
+
return (hAsync(Host, { key: '07b87d98fb398bc2897e666dc8cd54734f20734d' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { class: "label", size: labelSize, lineHeight: 'normal', color: symbolColor }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: symbolColor }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { class: "label", size: labelSize, lineHeight: 'normal', color: symbolColor }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: symbolColor })))));
|
|
3458
3467
|
}
|
|
3459
3468
|
static get formAssociated() { return true; }
|
|
3460
3469
|
static get watchers() { return {
|
|
@@ -3588,7 +3597,7 @@ class CuraButtonOutline {
|
|
|
3588
3597
|
render() {
|
|
3589
3598
|
const symbolColor = this.getSymbolColor();
|
|
3590
3599
|
const labelSize = labelSizes[this.size] || labelSizes["default"];
|
|
3591
|
-
return (hAsync(Host, { key: '0a0c25f94d0c18dbb90e4836ca3e7bcbbe10d032' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { size: labelSize, lineHeight: '
|
|
3600
|
+
return (hAsync(Host, { key: '0a0c25f94d0c18dbb90e4836ca3e7bcbbe10d032' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { size: labelSize, lineHeight: 'normal', color: symbolColor }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: symbolColor }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { size: labelSize, lineHeight: 'normal', color: symbolColor }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: symbolColor })))));
|
|
3592
3601
|
}
|
|
3593
3602
|
static get formAssociated() { return true; }
|
|
3594
3603
|
static get watchers() { return {
|
|
@@ -3842,7 +3851,7 @@ class CuraButtonTransparent {
|
|
|
3842
3851
|
render() {
|
|
3843
3852
|
const symbolColor = this.getSymbolColor();
|
|
3844
3853
|
const labelSize = labelSizes[this.size] || labelSizes["default"];
|
|
3845
|
-
return (hAsync(Host, { key: 'f93f2f1b495403127238468c57edfcb5e9f69d43' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { size: labelSize, lineHeight: '
|
|
3854
|
+
return (hAsync(Host, { key: 'f93f2f1b495403127238468c57edfcb5e9f69d43' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { size: labelSize, lineHeight: 'normal', color: symbolColor }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: symbolColor }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { size: labelSize, lineHeight: 'normal', color: symbolColor }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: symbolColor })))));
|
|
3846
3855
|
}
|
|
3847
3856
|
static get formAssociated() { return true; }
|
|
3848
3857
|
static get watchers() { return {
|
|
@@ -8362,14 +8371,16 @@ class CuraDropdownSearch {
|
|
|
8362
8371
|
this.onselect = createEvent(this, "onselect", 7);
|
|
8363
8372
|
this.overlayElement = null;
|
|
8364
8373
|
this.adjustInputPosition = () => {
|
|
8365
|
-
|
|
8366
|
-
|
|
8367
|
-
|
|
8368
|
-
|
|
8369
|
-
dropdown
|
|
8370
|
-
|
|
8371
|
-
|
|
8372
|
-
|
|
8374
|
+
setTimeout(() => {
|
|
8375
|
+
var _a, _b;
|
|
8376
|
+
const isKeyboardOpen = (window === null || window === void 0 ? void 0 : window.innerHeight) < this.screenDefaultHeight;
|
|
8377
|
+
const dropdown = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-mobile');
|
|
8378
|
+
if (dropdown) {
|
|
8379
|
+
dropdown.style.position = isKeyboardOpen ? 'absolute' : 'fixed';
|
|
8380
|
+
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';
|
|
8381
|
+
window.scroll({ top: 0, left: 0 });
|
|
8382
|
+
}
|
|
8383
|
+
}, 300);
|
|
8373
8384
|
};
|
|
8374
8385
|
this.handleSlotChange = () => {
|
|
8375
8386
|
this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));
|
|
@@ -8380,7 +8391,6 @@ class CuraDropdownSearch {
|
|
|
8380
8391
|
const input = event.target;
|
|
8381
8392
|
this.value = input.value;
|
|
8382
8393
|
this.onValueChange(this.value);
|
|
8383
|
-
// this.valueChanged.emit(this.value);
|
|
8384
8394
|
};
|
|
8385
8395
|
this.handleKeyDown = (event) => {
|
|
8386
8396
|
if (event.key === 'ArrowDown') {
|
|
@@ -8453,6 +8463,7 @@ class CuraDropdownSearch {
|
|
|
8453
8463
|
this.styles['--font-weight-medium'] = this.weights.medium;
|
|
8454
8464
|
}
|
|
8455
8465
|
onValueChange(newValue) {
|
|
8466
|
+
this.value = newValue;
|
|
8456
8467
|
this.updateSelectedOption(newValue);
|
|
8457
8468
|
this.valueChanged.emit(newValue);
|
|
8458
8469
|
}
|
|
@@ -8516,16 +8527,18 @@ class CuraDropdownSearch {
|
|
|
8516
8527
|
this.adjustInputPosition();
|
|
8517
8528
|
}
|
|
8518
8529
|
onSelectedOption(index) {
|
|
8519
|
-
|
|
8520
|
-
|
|
8521
|
-
|
|
8522
|
-
|
|
8523
|
-
|
|
8524
|
-
|
|
8525
|
-
|
|
8526
|
-
|
|
8527
|
-
|
|
8528
|
-
|
|
8530
|
+
setTimeout(() => {
|
|
8531
|
+
const selectedOption = this.options[index];
|
|
8532
|
+
if (selectedOption.selectable) {
|
|
8533
|
+
const selectedValue = selectedOption.getAttribute('value') || selectedOption.textContent;
|
|
8534
|
+
this.value = selectedValue || '';
|
|
8535
|
+
this.updateSelectedOption(this.value);
|
|
8536
|
+
this.isDropdownOpen = false;
|
|
8537
|
+
this.isOnBlurInput = true;
|
|
8538
|
+
this.resetDropdownStyles();
|
|
8539
|
+
this.removeOverlay();
|
|
8540
|
+
}
|
|
8541
|
+
}, 200);
|
|
8529
8542
|
}
|
|
8530
8543
|
moveHighlight(direction) {
|
|
8531
8544
|
const visibleOptions = this.options;
|
|
@@ -8591,11 +8604,13 @@ class CuraDropdownSearch {
|
|
|
8591
8604
|
this.isDropdownOpen = true;
|
|
8592
8605
|
}
|
|
8593
8606
|
getDropdownSearchListHeight() {
|
|
8594
|
-
|
|
8595
|
-
|
|
8596
|
-
|
|
8597
|
-
|
|
8598
|
-
|
|
8607
|
+
setTimeout(() => {
|
|
8608
|
+
var _a;
|
|
8609
|
+
const dropdownInputSearchElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-input-search');
|
|
8610
|
+
if (dropdownInputSearchElement) {
|
|
8611
|
+
this.host.style.setProperty('--dynamic-input-search-height', `${dropdownInputSearchElement.offsetHeight}px`);
|
|
8612
|
+
}
|
|
8613
|
+
}, 310);
|
|
8599
8614
|
}
|
|
8600
8615
|
handleGoBack() {
|
|
8601
8616
|
this.resetDropdownStyles();
|
|
@@ -8611,9 +8626,9 @@ class CuraDropdownSearch {
|
|
|
8611
8626
|
}
|
|
8612
8627
|
render() {
|
|
8613
8628
|
const isMobileDropdown = this.isMobile && this.isDropdownOpen;
|
|
8614
|
-
return (hAsync(Host, { key: '
|
|
8629
|
+
return (hAsync(Host, { key: '29caf35386c324e85a5b68caa280193e8f1a3aae', style: this.hostCSSProperties(), class: "dropdown-overlay" }, hAsync("div", { key: '879dc628c89920323a97f5b29aeadf6e774615ef', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, hAsync("div", { key: '31c2df66c5311abedfd1661fb9d8b135dde4ea8a', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (hAsync("cura-button-transparent", { key: '418fa19788b7dd8374d4c9c78837ad89c9f11f9e', fontColor: "dark", onClick: () => this.handleGoBack(), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), hAsync("cura-input-text", { key: '78dfa84f63f4a5a3b72f94e589b9c362d8e78e19', 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
8630
|
this.handleOnBlur();
|
|
8616
|
-
}, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, hAsync("slot", { key: '
|
|
8631
|
+
}, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, hAsync("slot", { key: 'e7f13fc467083f08b4666f4323b8734fb734fe1c', name: "helperText" }))), hAsync("div", { key: '9a39a16c1dfefd6481593ce062036e19cd1b65fa', id: "dropdown-search-list", class: this.getDropdownClasses() }, hAsync("slot", { key: '36af7eb7212ea066af0edb68b5e12bf9f931fae1', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
|
|
8617
8632
|
}
|
|
8618
8633
|
get host() { return getElement(this); }
|
|
8619
8634
|
static get watchers() { return {
|
|
@@ -8908,7 +8923,7 @@ class CuraIcon {
|
|
|
8908
8923
|
}; }
|
|
8909
8924
|
}
|
|
8910
8925
|
|
|
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"];
|
|
8926
|
+
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
8927
|
|
|
8913
8928
|
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
8929
|
var CuraIconsViewStyle0 = curaIconsViewCss;
|
|
@@ -13014,6 +13029,8 @@ class CuraInputText {
|
|
|
13014
13029
|
}
|
|
13015
13030
|
}
|
|
13016
13031
|
initializeAdvancedMask() {
|
|
13032
|
+
if (!this.inputRef)
|
|
13033
|
+
return;
|
|
13017
13034
|
try {
|
|
13018
13035
|
const config = typeof this.maskAdvanced === 'string' ? JSON.parse(this.maskAdvanced) : this.maskAdvanced;
|
|
13019
13036
|
this.maskedInput = IMask(this.inputRef, config);
|
|
@@ -13084,7 +13101,7 @@ class CuraInputText {
|
|
|
13084
13101
|
e.preventDefault();
|
|
13085
13102
|
}
|
|
13086
13103
|
render() {
|
|
13087
|
-
return (hAsync(Host, { key: '
|
|
13104
|
+
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
13105
|
}
|
|
13089
13106
|
static get formAssociated() { return true; }
|
|
13090
13107
|
static get watchers() { return {
|
|
@@ -13300,7 +13317,7 @@ class CuraLoaderCircle {
|
|
|
13300
13317
|
}; }
|
|
13301
13318
|
}
|
|
13302
13319
|
|
|
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);
|
|
13320
|
+
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
13321
|
var CuraModalStyle0 = curaModalCss;
|
|
13305
13322
|
|
|
13306
13323
|
class CuraModal {
|
|
@@ -13701,6 +13718,7 @@ class CuraSelect {
|
|
|
13701
13718
|
constructor(hostRef) {
|
|
13702
13719
|
registerInstance(this, hostRef);
|
|
13703
13720
|
this.selected = createEvent(this, "selected", 7);
|
|
13721
|
+
this.searchTermInput = createEvent(this, "searchTermInput", 7);
|
|
13704
13722
|
if (hostRef.$hostElement$["s-ei"]) {
|
|
13705
13723
|
this.internals = hostRef.$hostElement$["s-ei"];
|
|
13706
13724
|
}
|
|
@@ -13777,10 +13795,12 @@ class CuraSelect {
|
|
|
13777
13795
|
this.value = '';
|
|
13778
13796
|
this.mode = 'default';
|
|
13779
13797
|
this.size = 'medium';
|
|
13798
|
+
this.iconName = undefined;
|
|
13780
13799
|
this.status = 'default';
|
|
13781
13800
|
this.disabled = false;
|
|
13782
13801
|
this.required = false;
|
|
13783
13802
|
this.searchBehavior = false;
|
|
13803
|
+
this.caseSensitive = true;
|
|
13784
13804
|
this.isHovered = false;
|
|
13785
13805
|
this.isFocused = false;
|
|
13786
13806
|
this.isOpen = false;
|
|
@@ -13795,13 +13815,23 @@ class CuraSelect {
|
|
|
13795
13815
|
* Filters the options based on the current input value.
|
|
13796
13816
|
*/
|
|
13797
13817
|
filterOptions(newText) {
|
|
13818
|
+
this.searchTermInput.emit(newText);
|
|
13798
13819
|
if (!this.isOpen || !this.searchBehavior) {
|
|
13799
13820
|
return;
|
|
13800
13821
|
}
|
|
13822
|
+
const removeAccents = (str) => {
|
|
13823
|
+
return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
|
|
13824
|
+
};
|
|
13825
|
+
let searchTerm = newText;
|
|
13826
|
+
if (!this.caseSensitive) {
|
|
13827
|
+
searchTerm = removeAccents(searchTerm).toLocaleLowerCase();
|
|
13828
|
+
}
|
|
13801
13829
|
this.options.forEach(option => {
|
|
13802
|
-
|
|
13803
|
-
|
|
13804
|
-
|
|
13830
|
+
let optionValue = option.textContent || '';
|
|
13831
|
+
if (!this.caseSensitive) {
|
|
13832
|
+
optionValue = removeAccents(optionValue === null || optionValue === void 0 ? void 0 : optionValue.toLowerCase());
|
|
13833
|
+
}
|
|
13834
|
+
const isVisible = optionValue.includes(searchTerm);
|
|
13805
13835
|
option.style.display = isVisible ? 'block' : 'none';
|
|
13806
13836
|
});
|
|
13807
13837
|
}
|
|
@@ -13979,19 +14009,19 @@ class CuraSelect {
|
|
|
13979
14009
|
* Renders the icon based on the component's status.
|
|
13980
14010
|
*/
|
|
13981
14011
|
renderIcon() {
|
|
13982
|
-
if (this.status === 'default')
|
|
14012
|
+
if (this.status === 'default' && !this.iconName)
|
|
13983
14013
|
return null;
|
|
13984
|
-
const icon = { success: 'checkCircle', error: 'alertCircle' }[this.status];
|
|
14014
|
+
const icon = { default: this.iconName, success: 'checkCircle', error: 'alertCircle' }[this.status];
|
|
13985
14015
|
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
14016
|
}
|
|
13987
14017
|
render() {
|
|
13988
|
-
return (hAsync(Host, { key: '
|
|
14018
|
+
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
14019
|
'cura-input-field': true,
|
|
13990
14020
|
'open': this.isOpen,
|
|
13991
|
-
} }, this.renderIcon(), hAsync("input", { key: '
|
|
14021
|
+
} }, 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
14022
|
menu: true,
|
|
13993
14023
|
open: this.isOpen,
|
|
13994
|
-
} }, hAsync("slot", { key: '
|
|
14024
|
+
} }, hAsync("slot", { key: '0c20c0bbfb9ed727825bb6cc7e06ab671350d37b', name: "option" }))))));
|
|
13995
14025
|
}
|
|
13996
14026
|
static get formAssociated() { return true; }
|
|
13997
14027
|
get host() { return getElement(this); }
|
|
@@ -14010,10 +14040,12 @@ class CuraSelect {
|
|
|
14010
14040
|
"value": [1537],
|
|
14011
14041
|
"mode": [513],
|
|
14012
14042
|
"size": [513],
|
|
14043
|
+
"iconName": [1, "icon-name"],
|
|
14013
14044
|
"status": [1537],
|
|
14014
14045
|
"disabled": [516],
|
|
14015
14046
|
"required": [516],
|
|
14016
14047
|
"searchBehavior": [516, "search-behavior"],
|
|
14048
|
+
"caseSensitive": [516, "case-sensitive"],
|
|
14017
14049
|
"isHovered": [32],
|
|
14018
14050
|
"isFocused": [32],
|
|
14019
14051
|
"isOpen": [32],
|
|
@@ -14023,7 +14055,7 @@ class CuraSelect {
|
|
|
14023
14055
|
},
|
|
14024
14056
|
"$listeners$": undefined,
|
|
14025
14057
|
"$lazyBundleId$": "-",
|
|
14026
|
-
"$attrsToReflect$": [["label", "label"], ["placeholder", "placeholder"], ["value", "value"], ["mode", "mode"], ["size", "size"], ["status", "status"], ["disabled", "disabled"], ["required", "required"], ["searchBehavior", "search-behavior"]]
|
|
14058
|
+
"$attrsToReflect$": [["label", "label"], ["placeholder", "placeholder"], ["value", "value"], ["mode", "mode"], ["size", "size"], ["status", "status"], ["disabled", "disabled"], ["required", "required"], ["searchBehavior", "search-behavior"], ["caseSensitive", "case-sensitive"]]
|
|
14027
14059
|
}; }
|
|
14028
14060
|
}
|
|
14029
14061
|
|
|
@@ -14196,7 +14228,7 @@ class CuraStepper {
|
|
|
14196
14228
|
return (hAsync("div", { class: "container", style: this.styles }, hAsync("div", { class: "stepper-list" }, this.stepList.map((step, stepIndex) => this.renderStep(step, stepIndex)))));
|
|
14197
14229
|
}
|
|
14198
14230
|
render() {
|
|
14199
|
-
return hAsync(Host, { key: '
|
|
14231
|
+
return hAsync(Host, { key: 'a6562de52fefff80eb2d310555ce56956cce64d9' }, this.variant === 'default' ? this.renderStepper() : this.renderCompactStepper());
|
|
14200
14232
|
}
|
|
14201
14233
|
get host() { return getElement(this); }
|
|
14202
14234
|
static get style() { return CuraStepperStyle0; }
|
package/index.mjs
CHANGED
|
@@ -563,11 +563,13 @@ class CuraThemeBreakpointsModule {
|
|
|
563
563
|
|
|
564
564
|
class CuraThemeModule {
|
|
565
565
|
constructor() {
|
|
566
|
+
var _a;
|
|
566
567
|
this.prefix = '--cura';
|
|
567
568
|
this.colors = new CuraThemeColorsModule();
|
|
568
569
|
this.spacing = new CuraThemeSpacingModule();
|
|
569
570
|
this.fonts = new CuraThemeFontsModule();
|
|
570
571
|
this.breakpoints = new CuraThemeBreakpointsModule();
|
|
572
|
+
this.groupObject = {};
|
|
571
573
|
/* Private */
|
|
572
574
|
/** Set css var based on object structure */
|
|
573
575
|
this.setCssVar = (prop, path) => {
|
|
@@ -575,7 +577,7 @@ class CuraThemeModule {
|
|
|
575
577
|
this.rootElement.style.setProperty(varName, prop[1]);
|
|
576
578
|
};
|
|
577
579
|
this.groupPath = (a, b) => `${a}-${b}`;
|
|
578
|
-
this.isObject =
|
|
580
|
+
this.isObject = val => {
|
|
579
581
|
return val && typeof val === 'object' && !Array.isArray(val);
|
|
580
582
|
};
|
|
581
583
|
/** Deep merge objects */
|
|
@@ -591,18 +593,26 @@ class CuraThemeModule {
|
|
|
591
593
|
}
|
|
592
594
|
};
|
|
593
595
|
/** Set css vars from preset object */
|
|
594
|
-
this.buildCssVars = (path, obj) => {
|
|
596
|
+
this.buildCssVars = (path, obj, isGroup = false) => {
|
|
595
597
|
const entries = Object.entries(obj);
|
|
596
598
|
for (let e of entries) {
|
|
597
599
|
if (this.isObject(e[1])) {
|
|
598
|
-
this.buildCssVars(this.groupPath(path, e[0]), e[1]);
|
|
600
|
+
this.buildCssVars(this.groupPath(path, e[0]), e[1], isGroup);
|
|
599
601
|
}
|
|
600
602
|
else {
|
|
601
|
-
|
|
603
|
+
if (isGroup) {
|
|
604
|
+
const varName = this.groupPath(path, e[0]);
|
|
605
|
+
this.groupObject[varName] = e[1];
|
|
606
|
+
}
|
|
607
|
+
else {
|
|
608
|
+
this.setCssVar(e, path);
|
|
609
|
+
}
|
|
602
610
|
}
|
|
603
611
|
}
|
|
604
612
|
};
|
|
605
|
-
|
|
613
|
+
if (typeof window === 'undefined')
|
|
614
|
+
return;
|
|
615
|
+
this.rootElement = (_a = window === null || window === void 0 ? void 0 : window.document) === null || _a === void 0 ? void 0 : _a.documentElement;
|
|
606
616
|
}
|
|
607
617
|
/**
|
|
608
618
|
* Load a theme.
|
|
@@ -612,6 +622,11 @@ class CuraThemeModule {
|
|
|
612
622
|
const preset = ThemePresets[theme] ? ThemePresets[theme] : ThemePresets.default;
|
|
613
623
|
this.buildCssVars(this.prefix, preset);
|
|
614
624
|
}
|
|
625
|
+
loadVarsSSR(theme = 'default') {
|
|
626
|
+
const preset = ThemePresets[theme] ? ThemePresets[theme] : ThemePresets.default;
|
|
627
|
+
this.buildCssVars(this.prefix, preset, true);
|
|
628
|
+
return this.groupObject;
|
|
629
|
+
}
|
|
615
630
|
/**
|
|
616
631
|
* Define a custom theme
|
|
617
632
|
* @param customTheme Custom theme object definition
|
|
@@ -623,9 +638,7 @@ class CuraThemeModule {
|
|
|
623
638
|
this.load('default');
|
|
624
639
|
}
|
|
625
640
|
else {
|
|
626
|
-
const preset = customTheme.fromPreset && customTheme.fromPreset in ThemePresets
|
|
627
|
-
? ThemePresets[customTheme.fromPreset]
|
|
628
|
-
: ThemePresets.default;
|
|
641
|
+
const preset = customTheme.fromPreset && customTheme.fromPreset in ThemePresets ? ThemePresets[customTheme.fromPreset] : ThemePresets.default;
|
|
629
642
|
const newTheme = Object.assign({}, JSON.parse(JSON.stringify(preset)));
|
|
630
643
|
this.mergeObject(customTheme.definitions, newTheme);
|
|
631
644
|
ThemePresets[customTag] = newTheme;
|
|
@@ -3265,10 +3278,10 @@ class CuraBadgePill {
|
|
|
3265
3278
|
this.iconset = 'default';
|
|
3266
3279
|
this.disabled = false;
|
|
3267
3280
|
this.iconOnly = false;
|
|
3268
|
-
this.borderRadius =
|
|
3281
|
+
this.borderRadius = '2px';
|
|
3269
3282
|
this.styles = {};
|
|
3270
3283
|
}
|
|
3271
|
-
|
|
3284
|
+
watchColorChange() {
|
|
3272
3285
|
this.setColors();
|
|
3273
3286
|
}
|
|
3274
3287
|
connectedCallback() {
|
|
@@ -3276,10 +3289,7 @@ class CuraBadgePill {
|
|
|
3276
3289
|
this.setColors();
|
|
3277
3290
|
}
|
|
3278
3291
|
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);
|
|
3292
|
+
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
3293
|
}
|
|
3284
3294
|
setColors() {
|
|
3285
3295
|
const colors = [
|
|
@@ -3288,10 +3298,11 @@ class CuraBadgePill {
|
|
|
3288
3298
|
{ name: '--color-background-disabled', theme: 'neutral-pale' },
|
|
3289
3299
|
{ name: '--color-outline-disabled', theme: 'neutral-medium' },
|
|
3290
3300
|
];
|
|
3301
|
+
const newStyles = Object.assign({}, this.styles);
|
|
3291
3302
|
colors.forEach(color => {
|
|
3292
|
-
|
|
3303
|
+
newStyles[color.name] = this.theme.colors.getColor(color.theme);
|
|
3293
3304
|
});
|
|
3294
|
-
this.styles =
|
|
3305
|
+
this.styles = newStyles;
|
|
3295
3306
|
}
|
|
3296
3307
|
hostCSSProperties() {
|
|
3297
3308
|
return {
|
|
@@ -3307,9 +3318,7 @@ class CuraBadgePill {
|
|
|
3307
3318
|
return classes;
|
|
3308
3319
|
}
|
|
3309
3320
|
getSymbolColor() {
|
|
3310
|
-
return this.disabled
|
|
3311
|
-
? 'neutral-medium'
|
|
3312
|
-
: `${this.color}-dark`;
|
|
3321
|
+
return this.disabled ? 'neutral-medium' : `${this.color}-dark`;
|
|
3313
3322
|
}
|
|
3314
3323
|
getIcon() {
|
|
3315
3324
|
if (!this.iconName)
|
|
@@ -3318,11 +3327,11 @@ class CuraBadgePill {
|
|
|
3318
3327
|
}
|
|
3319
3328
|
render() {
|
|
3320
3329
|
const symbolColor = this.getSymbolColor();
|
|
3321
|
-
return (hAsync(Host, { key: '
|
|
3330
|
+
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
3331
|
}
|
|
3323
3332
|
get host() { return getElement(this); }
|
|
3324
3333
|
static get watchers() { return {
|
|
3325
|
-
"color": ["
|
|
3334
|
+
"color": ["watchColorChange"]
|
|
3326
3335
|
}; }
|
|
3327
3336
|
static get style() { return CuraBadgePillStyle0; }
|
|
3328
3337
|
static get cmpMeta() { return {
|
|
@@ -3450,7 +3459,7 @@ class CuraButton {
|
|
|
3450
3459
|
render() {
|
|
3451
3460
|
const symbolColor = this.getSymbolColor();
|
|
3452
3461
|
const labelSize = labelSizes[this.size] || labelSizes["default"];
|
|
3453
|
-
return (hAsync(Host, { key: '07b87d98fb398bc2897e666dc8cd54734f20734d' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { class: "label", size: labelSize, lineHeight: '
|
|
3462
|
+
return (hAsync(Host, { key: '07b87d98fb398bc2897e666dc8cd54734f20734d' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { class: "label", size: labelSize, lineHeight: 'normal', color: symbolColor }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: symbolColor }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { class: "label", size: labelSize, lineHeight: 'normal', color: symbolColor }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: symbolColor })))));
|
|
3454
3463
|
}
|
|
3455
3464
|
static get formAssociated() { return true; }
|
|
3456
3465
|
static get watchers() { return {
|
|
@@ -3584,7 +3593,7 @@ class CuraButtonOutline {
|
|
|
3584
3593
|
render() {
|
|
3585
3594
|
const symbolColor = this.getSymbolColor();
|
|
3586
3595
|
const labelSize = labelSizes[this.size] || labelSizes["default"];
|
|
3587
|
-
return (hAsync(Host, { key: '0a0c25f94d0c18dbb90e4836ca3e7bcbbe10d032' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { size: labelSize, lineHeight: '
|
|
3596
|
+
return (hAsync(Host, { key: '0a0c25f94d0c18dbb90e4836ca3e7bcbbe10d032' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { size: labelSize, lineHeight: 'normal', color: symbolColor }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: symbolColor }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { size: labelSize, lineHeight: 'normal', color: symbolColor }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: symbolColor })))));
|
|
3588
3597
|
}
|
|
3589
3598
|
static get formAssociated() { return true; }
|
|
3590
3599
|
static get watchers() { return {
|
|
@@ -3838,7 +3847,7 @@ class CuraButtonTransparent {
|
|
|
3838
3847
|
render() {
|
|
3839
3848
|
const symbolColor = this.getSymbolColor();
|
|
3840
3849
|
const labelSize = labelSizes[this.size] || labelSizes["default"];
|
|
3841
|
-
return (hAsync(Host, { key: 'f93f2f1b495403127238468c57edfcb5e9f69d43' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { size: labelSize, lineHeight: '
|
|
3850
|
+
return (hAsync(Host, { key: 'f93f2f1b495403127238468c57edfcb5e9f69d43' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { size: labelSize, lineHeight: 'normal', color: symbolColor }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: symbolColor }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { size: labelSize, lineHeight: 'normal', color: symbolColor }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: symbolColor })))));
|
|
3842
3851
|
}
|
|
3843
3852
|
static get formAssociated() { return true; }
|
|
3844
3853
|
static get watchers() { return {
|
|
@@ -8358,14 +8367,16 @@ class CuraDropdownSearch {
|
|
|
8358
8367
|
this.onselect = createEvent(this, "onselect", 7);
|
|
8359
8368
|
this.overlayElement = null;
|
|
8360
8369
|
this.adjustInputPosition = () => {
|
|
8361
|
-
|
|
8362
|
-
|
|
8363
|
-
|
|
8364
|
-
|
|
8365
|
-
dropdown
|
|
8366
|
-
|
|
8367
|
-
|
|
8368
|
-
|
|
8370
|
+
setTimeout(() => {
|
|
8371
|
+
var _a, _b;
|
|
8372
|
+
const isKeyboardOpen = (window === null || window === void 0 ? void 0 : window.innerHeight) < this.screenDefaultHeight;
|
|
8373
|
+
const dropdown = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-mobile');
|
|
8374
|
+
if (dropdown) {
|
|
8375
|
+
dropdown.style.position = isKeyboardOpen ? 'absolute' : 'fixed';
|
|
8376
|
+
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';
|
|
8377
|
+
window.scroll({ top: 0, left: 0 });
|
|
8378
|
+
}
|
|
8379
|
+
}, 300);
|
|
8369
8380
|
};
|
|
8370
8381
|
this.handleSlotChange = () => {
|
|
8371
8382
|
this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));
|
|
@@ -8376,7 +8387,6 @@ class CuraDropdownSearch {
|
|
|
8376
8387
|
const input = event.target;
|
|
8377
8388
|
this.value = input.value;
|
|
8378
8389
|
this.onValueChange(this.value);
|
|
8379
|
-
// this.valueChanged.emit(this.value);
|
|
8380
8390
|
};
|
|
8381
8391
|
this.handleKeyDown = (event) => {
|
|
8382
8392
|
if (event.key === 'ArrowDown') {
|
|
@@ -8449,6 +8459,7 @@ class CuraDropdownSearch {
|
|
|
8449
8459
|
this.styles['--font-weight-medium'] = this.weights.medium;
|
|
8450
8460
|
}
|
|
8451
8461
|
onValueChange(newValue) {
|
|
8462
|
+
this.value = newValue;
|
|
8452
8463
|
this.updateSelectedOption(newValue);
|
|
8453
8464
|
this.valueChanged.emit(newValue);
|
|
8454
8465
|
}
|
|
@@ -8512,16 +8523,18 @@ class CuraDropdownSearch {
|
|
|
8512
8523
|
this.adjustInputPosition();
|
|
8513
8524
|
}
|
|
8514
8525
|
onSelectedOption(index) {
|
|
8515
|
-
|
|
8516
|
-
|
|
8517
|
-
|
|
8518
|
-
|
|
8519
|
-
|
|
8520
|
-
|
|
8521
|
-
|
|
8522
|
-
|
|
8523
|
-
|
|
8524
|
-
|
|
8526
|
+
setTimeout(() => {
|
|
8527
|
+
const selectedOption = this.options[index];
|
|
8528
|
+
if (selectedOption.selectable) {
|
|
8529
|
+
const selectedValue = selectedOption.getAttribute('value') || selectedOption.textContent;
|
|
8530
|
+
this.value = selectedValue || '';
|
|
8531
|
+
this.updateSelectedOption(this.value);
|
|
8532
|
+
this.isDropdownOpen = false;
|
|
8533
|
+
this.isOnBlurInput = true;
|
|
8534
|
+
this.resetDropdownStyles();
|
|
8535
|
+
this.removeOverlay();
|
|
8536
|
+
}
|
|
8537
|
+
}, 200);
|
|
8525
8538
|
}
|
|
8526
8539
|
moveHighlight(direction) {
|
|
8527
8540
|
const visibleOptions = this.options;
|
|
@@ -8587,11 +8600,13 @@ class CuraDropdownSearch {
|
|
|
8587
8600
|
this.isDropdownOpen = true;
|
|
8588
8601
|
}
|
|
8589
8602
|
getDropdownSearchListHeight() {
|
|
8590
|
-
|
|
8591
|
-
|
|
8592
|
-
|
|
8593
|
-
|
|
8594
|
-
|
|
8603
|
+
setTimeout(() => {
|
|
8604
|
+
var _a;
|
|
8605
|
+
const dropdownInputSearchElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-input-search');
|
|
8606
|
+
if (dropdownInputSearchElement) {
|
|
8607
|
+
this.host.style.setProperty('--dynamic-input-search-height', `${dropdownInputSearchElement.offsetHeight}px`);
|
|
8608
|
+
}
|
|
8609
|
+
}, 310);
|
|
8595
8610
|
}
|
|
8596
8611
|
handleGoBack() {
|
|
8597
8612
|
this.resetDropdownStyles();
|
|
@@ -8607,9 +8622,9 @@ class CuraDropdownSearch {
|
|
|
8607
8622
|
}
|
|
8608
8623
|
render() {
|
|
8609
8624
|
const isMobileDropdown = this.isMobile && this.isDropdownOpen;
|
|
8610
|
-
return (hAsync(Host, { key: '
|
|
8625
|
+
return (hAsync(Host, { key: '29caf35386c324e85a5b68caa280193e8f1a3aae', style: this.hostCSSProperties(), class: "dropdown-overlay" }, hAsync("div", { key: '879dc628c89920323a97f5b29aeadf6e774615ef', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, hAsync("div", { key: '31c2df66c5311abedfd1661fb9d8b135dde4ea8a', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (hAsync("cura-button-transparent", { key: '418fa19788b7dd8374d4c9c78837ad89c9f11f9e', fontColor: "dark", onClick: () => this.handleGoBack(), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), hAsync("cura-input-text", { key: '78dfa84f63f4a5a3b72f94e589b9c362d8e78e19', 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
8626
|
this.handleOnBlur();
|
|
8612
|
-
}, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, hAsync("slot", { key: '
|
|
8627
|
+
}, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, hAsync("slot", { key: 'e7f13fc467083f08b4666f4323b8734fb734fe1c', name: "helperText" }))), hAsync("div", { key: '9a39a16c1dfefd6481593ce062036e19cd1b65fa', id: "dropdown-search-list", class: this.getDropdownClasses() }, hAsync("slot", { key: '36af7eb7212ea066af0edb68b5e12bf9f931fae1', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
|
|
8613
8628
|
}
|
|
8614
8629
|
get host() { return getElement(this); }
|
|
8615
8630
|
static get watchers() { return {
|
|
@@ -8904,7 +8919,7 @@ class CuraIcon {
|
|
|
8904
8919
|
}; }
|
|
8905
8920
|
}
|
|
8906
8921
|
|
|
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"];
|
|
8922
|
+
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
8923
|
|
|
8909
8924
|
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
8925
|
var CuraIconsViewStyle0 = curaIconsViewCss;
|
|
@@ -13010,6 +13025,8 @@ class CuraInputText {
|
|
|
13010
13025
|
}
|
|
13011
13026
|
}
|
|
13012
13027
|
initializeAdvancedMask() {
|
|
13028
|
+
if (!this.inputRef)
|
|
13029
|
+
return;
|
|
13013
13030
|
try {
|
|
13014
13031
|
const config = typeof this.maskAdvanced === 'string' ? JSON.parse(this.maskAdvanced) : this.maskAdvanced;
|
|
13015
13032
|
this.maskedInput = IMask(this.inputRef, config);
|
|
@@ -13080,7 +13097,7 @@ class CuraInputText {
|
|
|
13080
13097
|
e.preventDefault();
|
|
13081
13098
|
}
|
|
13082
13099
|
render() {
|
|
13083
|
-
return (hAsync(Host, { key: '
|
|
13100
|
+
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
13101
|
}
|
|
13085
13102
|
static get formAssociated() { return true; }
|
|
13086
13103
|
static get watchers() { return {
|
|
@@ -13296,7 +13313,7 @@ class CuraLoaderCircle {
|
|
|
13296
13313
|
}; }
|
|
13297
13314
|
}
|
|
13298
13315
|
|
|
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);
|
|
13316
|
+
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
13317
|
var CuraModalStyle0 = curaModalCss;
|
|
13301
13318
|
|
|
13302
13319
|
class CuraModal {
|
|
@@ -13697,6 +13714,7 @@ class CuraSelect {
|
|
|
13697
13714
|
constructor(hostRef) {
|
|
13698
13715
|
registerInstance(this, hostRef);
|
|
13699
13716
|
this.selected = createEvent(this, "selected", 7);
|
|
13717
|
+
this.searchTermInput = createEvent(this, "searchTermInput", 7);
|
|
13700
13718
|
if (hostRef.$hostElement$["s-ei"]) {
|
|
13701
13719
|
this.internals = hostRef.$hostElement$["s-ei"];
|
|
13702
13720
|
}
|
|
@@ -13773,10 +13791,12 @@ class CuraSelect {
|
|
|
13773
13791
|
this.value = '';
|
|
13774
13792
|
this.mode = 'default';
|
|
13775
13793
|
this.size = 'medium';
|
|
13794
|
+
this.iconName = undefined;
|
|
13776
13795
|
this.status = 'default';
|
|
13777
13796
|
this.disabled = false;
|
|
13778
13797
|
this.required = false;
|
|
13779
13798
|
this.searchBehavior = false;
|
|
13799
|
+
this.caseSensitive = true;
|
|
13780
13800
|
this.isHovered = false;
|
|
13781
13801
|
this.isFocused = false;
|
|
13782
13802
|
this.isOpen = false;
|
|
@@ -13791,13 +13811,23 @@ class CuraSelect {
|
|
|
13791
13811
|
* Filters the options based on the current input value.
|
|
13792
13812
|
*/
|
|
13793
13813
|
filterOptions(newText) {
|
|
13814
|
+
this.searchTermInput.emit(newText);
|
|
13794
13815
|
if (!this.isOpen || !this.searchBehavior) {
|
|
13795
13816
|
return;
|
|
13796
13817
|
}
|
|
13818
|
+
const removeAccents = (str) => {
|
|
13819
|
+
return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
|
|
13820
|
+
};
|
|
13821
|
+
let searchTerm = newText;
|
|
13822
|
+
if (!this.caseSensitive) {
|
|
13823
|
+
searchTerm = removeAccents(searchTerm).toLocaleLowerCase();
|
|
13824
|
+
}
|
|
13797
13825
|
this.options.forEach(option => {
|
|
13798
|
-
|
|
13799
|
-
|
|
13800
|
-
|
|
13826
|
+
let optionValue = option.textContent || '';
|
|
13827
|
+
if (!this.caseSensitive) {
|
|
13828
|
+
optionValue = removeAccents(optionValue === null || optionValue === void 0 ? void 0 : optionValue.toLowerCase());
|
|
13829
|
+
}
|
|
13830
|
+
const isVisible = optionValue.includes(searchTerm);
|
|
13801
13831
|
option.style.display = isVisible ? 'block' : 'none';
|
|
13802
13832
|
});
|
|
13803
13833
|
}
|
|
@@ -13975,19 +14005,19 @@ class CuraSelect {
|
|
|
13975
14005
|
* Renders the icon based on the component's status.
|
|
13976
14006
|
*/
|
|
13977
14007
|
renderIcon() {
|
|
13978
|
-
if (this.status === 'default')
|
|
14008
|
+
if (this.status === 'default' && !this.iconName)
|
|
13979
14009
|
return null;
|
|
13980
|
-
const icon = { success: 'checkCircle', error: 'alertCircle' }[this.status];
|
|
14010
|
+
const icon = { default: this.iconName, success: 'checkCircle', error: 'alertCircle' }[this.status];
|
|
13981
14011
|
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
14012
|
}
|
|
13983
14013
|
render() {
|
|
13984
|
-
return (hAsync(Host, { key: '
|
|
14014
|
+
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
14015
|
'cura-input-field': true,
|
|
13986
14016
|
'open': this.isOpen,
|
|
13987
|
-
} }, this.renderIcon(), hAsync("input", { key: '
|
|
14017
|
+
} }, 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
14018
|
menu: true,
|
|
13989
14019
|
open: this.isOpen,
|
|
13990
|
-
} }, hAsync("slot", { key: '
|
|
14020
|
+
} }, hAsync("slot", { key: '0c20c0bbfb9ed727825bb6cc7e06ab671350d37b', name: "option" }))))));
|
|
13991
14021
|
}
|
|
13992
14022
|
static get formAssociated() { return true; }
|
|
13993
14023
|
get host() { return getElement(this); }
|
|
@@ -14006,10 +14036,12 @@ class CuraSelect {
|
|
|
14006
14036
|
"value": [1537],
|
|
14007
14037
|
"mode": [513],
|
|
14008
14038
|
"size": [513],
|
|
14039
|
+
"iconName": [1, "icon-name"],
|
|
14009
14040
|
"status": [1537],
|
|
14010
14041
|
"disabled": [516],
|
|
14011
14042
|
"required": [516],
|
|
14012
14043
|
"searchBehavior": [516, "search-behavior"],
|
|
14044
|
+
"caseSensitive": [516, "case-sensitive"],
|
|
14013
14045
|
"isHovered": [32],
|
|
14014
14046
|
"isFocused": [32],
|
|
14015
14047
|
"isOpen": [32],
|
|
@@ -14019,7 +14051,7 @@ class CuraSelect {
|
|
|
14019
14051
|
},
|
|
14020
14052
|
"$listeners$": undefined,
|
|
14021
14053
|
"$lazyBundleId$": "-",
|
|
14022
|
-
"$attrsToReflect$": [["label", "label"], ["placeholder", "placeholder"], ["value", "value"], ["mode", "mode"], ["size", "size"], ["status", "status"], ["disabled", "disabled"], ["required", "required"], ["searchBehavior", "search-behavior"]]
|
|
14054
|
+
"$attrsToReflect$": [["label", "label"], ["placeholder", "placeholder"], ["value", "value"], ["mode", "mode"], ["size", "size"], ["status", "status"], ["disabled", "disabled"], ["required", "required"], ["searchBehavior", "search-behavior"], ["caseSensitive", "case-sensitive"]]
|
|
14023
14055
|
}; }
|
|
14024
14056
|
}
|
|
14025
14057
|
|
|
@@ -14192,7 +14224,7 @@ class CuraStepper {
|
|
|
14192
14224
|
return (hAsync("div", { class: "container", style: this.styles }, hAsync("div", { class: "stepper-list" }, this.stepList.map((step, stepIndex) => this.renderStep(step, stepIndex)))));
|
|
14193
14225
|
}
|
|
14194
14226
|
render() {
|
|
14195
|
-
return hAsync(Host, { key: '
|
|
14227
|
+
return hAsync(Host, { key: 'a6562de52fefff80eb2d310555ce56956cce64d9' }, this.variant === 'default' ? this.renderStepper() : this.renderCompactStepper());
|
|
14196
14228
|
}
|
|
14197
14229
|
get host() { return getElement(this); }
|
|
14198
14230
|
static get style() { return CuraStepperStyle0; }
|