@rededor/cura-hydrate 1.5.0-alpha.2 → 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 +57 -39
- package/index.mjs +57 -39
- 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;
|
|
@@ -3450,7 +3463,7 @@ class CuraButton {
|
|
|
3450
3463
|
render() {
|
|
3451
3464
|
const symbolColor = this.getSymbolColor();
|
|
3452
3465
|
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: '
|
|
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 })))));
|
|
3454
3467
|
}
|
|
3455
3468
|
static get formAssociated() { return true; }
|
|
3456
3469
|
static get watchers() { return {
|
|
@@ -3584,7 +3597,7 @@ class CuraButtonOutline {
|
|
|
3584
3597
|
render() {
|
|
3585
3598
|
const symbolColor = this.getSymbolColor();
|
|
3586
3599
|
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: '
|
|
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 })))));
|
|
3588
3601
|
}
|
|
3589
3602
|
static get formAssociated() { return true; }
|
|
3590
3603
|
static get watchers() { return {
|
|
@@ -3838,7 +3851,7 @@ class CuraButtonTransparent {
|
|
|
3838
3851
|
render() {
|
|
3839
3852
|
const symbolColor = this.getSymbolColor();
|
|
3840
3853
|
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: '
|
|
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 })))));
|
|
3842
3855
|
}
|
|
3843
3856
|
static get formAssociated() { return true; }
|
|
3844
3857
|
static get watchers() { return {
|
|
@@ -8357,16 +8370,17 @@ class CuraDropdownSearch {
|
|
|
8357
8370
|
this.valueChanged = createEvent(this, "valueChanged", 7);
|
|
8358
8371
|
this.onselect = createEvent(this, "onselect", 7);
|
|
8359
8372
|
this.overlayElement = null;
|
|
8360
|
-
this.adjustInputPosition =
|
|
8361
|
-
|
|
8362
|
-
|
|
8363
|
-
|
|
8364
|
-
|
|
8365
|
-
|
|
8366
|
-
|
|
8367
|
-
|
|
8368
|
-
|
|
8369
|
-
|
|
8373
|
+
this.adjustInputPosition = () => {
|
|
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);
|
|
8370
8384
|
};
|
|
8371
8385
|
this.handleSlotChange = () => {
|
|
8372
8386
|
this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));
|
|
@@ -8377,7 +8391,6 @@ class CuraDropdownSearch {
|
|
|
8377
8391
|
const input = event.target;
|
|
8378
8392
|
this.value = input.value;
|
|
8379
8393
|
this.onValueChange(this.value);
|
|
8380
|
-
// this.valueChanged.emit(this.value);
|
|
8381
8394
|
};
|
|
8382
8395
|
this.handleKeyDown = (event) => {
|
|
8383
8396
|
if (event.key === 'ArrowDown') {
|
|
@@ -8450,6 +8463,7 @@ class CuraDropdownSearch {
|
|
|
8450
8463
|
this.styles['--font-weight-medium'] = this.weights.medium;
|
|
8451
8464
|
}
|
|
8452
8465
|
onValueChange(newValue) {
|
|
8466
|
+
this.value = newValue;
|
|
8453
8467
|
this.updateSelectedOption(newValue);
|
|
8454
8468
|
this.valueChanged.emit(newValue);
|
|
8455
8469
|
}
|
|
@@ -8513,16 +8527,18 @@ class CuraDropdownSearch {
|
|
|
8513
8527
|
this.adjustInputPosition();
|
|
8514
8528
|
}
|
|
8515
8529
|
onSelectedOption(index) {
|
|
8516
|
-
|
|
8517
|
-
|
|
8518
|
-
|
|
8519
|
-
|
|
8520
|
-
|
|
8521
|
-
|
|
8522
|
-
|
|
8523
|
-
|
|
8524
|
-
|
|
8525
|
-
|
|
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);
|
|
8526
8542
|
}
|
|
8527
8543
|
moveHighlight(direction) {
|
|
8528
8544
|
const visibleOptions = this.options;
|
|
@@ -8588,11 +8604,13 @@ class CuraDropdownSearch {
|
|
|
8588
8604
|
this.isDropdownOpen = true;
|
|
8589
8605
|
}
|
|
8590
8606
|
getDropdownSearchListHeight() {
|
|
8591
|
-
|
|
8592
|
-
|
|
8593
|
-
|
|
8594
|
-
|
|
8595
|
-
|
|
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);
|
|
8596
8614
|
}
|
|
8597
8615
|
handleGoBack() {
|
|
8598
8616
|
this.resetDropdownStyles();
|
|
@@ -8608,9 +8626,9 @@ class CuraDropdownSearch {
|
|
|
8608
8626
|
}
|
|
8609
8627
|
render() {
|
|
8610
8628
|
const isMobileDropdown = this.isMobile && this.isDropdownOpen;
|
|
8611
|
-
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: () => {
|
|
8612
8630
|
this.handleOnBlur();
|
|
8613
|
-
}, 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 })))));
|
|
8614
8632
|
}
|
|
8615
8633
|
get host() { return getElement(this); }
|
|
8616
8634
|
static get watchers() { return {
|
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;
|
|
@@ -3446,7 +3459,7 @@ class CuraButton {
|
|
|
3446
3459
|
render() {
|
|
3447
3460
|
const symbolColor = this.getSymbolColor();
|
|
3448
3461
|
const labelSize = labelSizes[this.size] || labelSizes["default"];
|
|
3449
|
-
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 })))));
|
|
3450
3463
|
}
|
|
3451
3464
|
static get formAssociated() { return true; }
|
|
3452
3465
|
static get watchers() { return {
|
|
@@ -3580,7 +3593,7 @@ class CuraButtonOutline {
|
|
|
3580
3593
|
render() {
|
|
3581
3594
|
const symbolColor = this.getSymbolColor();
|
|
3582
3595
|
const labelSize = labelSizes[this.size] || labelSizes["default"];
|
|
3583
|
-
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 })))));
|
|
3584
3597
|
}
|
|
3585
3598
|
static get formAssociated() { return true; }
|
|
3586
3599
|
static get watchers() { return {
|
|
@@ -3834,7 +3847,7 @@ class CuraButtonTransparent {
|
|
|
3834
3847
|
render() {
|
|
3835
3848
|
const symbolColor = this.getSymbolColor();
|
|
3836
3849
|
const labelSize = labelSizes[this.size] || labelSizes["default"];
|
|
3837
|
-
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 })))));
|
|
3838
3851
|
}
|
|
3839
3852
|
static get formAssociated() { return true; }
|
|
3840
3853
|
static get watchers() { return {
|
|
@@ -8353,16 +8366,17 @@ class CuraDropdownSearch {
|
|
|
8353
8366
|
this.valueChanged = createEvent(this, "valueChanged", 7);
|
|
8354
8367
|
this.onselect = createEvent(this, "onselect", 7);
|
|
8355
8368
|
this.overlayElement = null;
|
|
8356
|
-
this.adjustInputPosition =
|
|
8357
|
-
|
|
8358
|
-
|
|
8359
|
-
|
|
8360
|
-
|
|
8361
|
-
|
|
8362
|
-
|
|
8363
|
-
|
|
8364
|
-
|
|
8365
|
-
|
|
8369
|
+
this.adjustInputPosition = () => {
|
|
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);
|
|
8366
8380
|
};
|
|
8367
8381
|
this.handleSlotChange = () => {
|
|
8368
8382
|
this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));
|
|
@@ -8373,7 +8387,6 @@ class CuraDropdownSearch {
|
|
|
8373
8387
|
const input = event.target;
|
|
8374
8388
|
this.value = input.value;
|
|
8375
8389
|
this.onValueChange(this.value);
|
|
8376
|
-
// this.valueChanged.emit(this.value);
|
|
8377
8390
|
};
|
|
8378
8391
|
this.handleKeyDown = (event) => {
|
|
8379
8392
|
if (event.key === 'ArrowDown') {
|
|
@@ -8446,6 +8459,7 @@ class CuraDropdownSearch {
|
|
|
8446
8459
|
this.styles['--font-weight-medium'] = this.weights.medium;
|
|
8447
8460
|
}
|
|
8448
8461
|
onValueChange(newValue) {
|
|
8462
|
+
this.value = newValue;
|
|
8449
8463
|
this.updateSelectedOption(newValue);
|
|
8450
8464
|
this.valueChanged.emit(newValue);
|
|
8451
8465
|
}
|
|
@@ -8509,16 +8523,18 @@ class CuraDropdownSearch {
|
|
|
8509
8523
|
this.adjustInputPosition();
|
|
8510
8524
|
}
|
|
8511
8525
|
onSelectedOption(index) {
|
|
8512
|
-
|
|
8513
|
-
|
|
8514
|
-
|
|
8515
|
-
|
|
8516
|
-
|
|
8517
|
-
|
|
8518
|
-
|
|
8519
|
-
|
|
8520
|
-
|
|
8521
|
-
|
|
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);
|
|
8522
8538
|
}
|
|
8523
8539
|
moveHighlight(direction) {
|
|
8524
8540
|
const visibleOptions = this.options;
|
|
@@ -8584,11 +8600,13 @@ class CuraDropdownSearch {
|
|
|
8584
8600
|
this.isDropdownOpen = true;
|
|
8585
8601
|
}
|
|
8586
8602
|
getDropdownSearchListHeight() {
|
|
8587
|
-
|
|
8588
|
-
|
|
8589
|
-
|
|
8590
|
-
|
|
8591
|
-
|
|
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);
|
|
8592
8610
|
}
|
|
8593
8611
|
handleGoBack() {
|
|
8594
8612
|
this.resetDropdownStyles();
|
|
@@ -8604,9 +8622,9 @@ class CuraDropdownSearch {
|
|
|
8604
8622
|
}
|
|
8605
8623
|
render() {
|
|
8606
8624
|
const isMobileDropdown = this.isMobile && this.isDropdownOpen;
|
|
8607
|
-
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: () => {
|
|
8608
8626
|
this.handleOnBlur();
|
|
8609
|
-
}, 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 })))));
|
|
8610
8628
|
}
|
|
8611
8629
|
get host() { return getElement(this); }
|
|
8612
8630
|
static get watchers() { return {
|