@rededor/cura-hydrate 1.4.0-alpha.0 → 1.4.0-alpha.1
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 +26 -16
- package/index.mjs +26 -16
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -8199,20 +8199,10 @@ class CuraDropdownSearch {
|
|
|
8199
8199
|
const isKeyboardOpen = window.innerHeight < window.screen.height * 0.8;
|
|
8200
8200
|
const dropdown = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-mobile');
|
|
8201
8201
|
if (dropdown) {
|
|
8202
|
-
|
|
8203
|
-
|
|
8204
|
-
|
|
8205
|
-
}
|
|
8206
|
-
else {
|
|
8207
|
-
dropdown.style.position = 'fixed';
|
|
8208
|
-
dropdown.style.bottom = '0';
|
|
8209
|
-
}
|
|
8202
|
+
dropdown.style.position = isKeyboardOpen ? 'absolute' : 'fixed';
|
|
8203
|
+
dropdown.style.bottom = isKeyboardOpen ? `${window.screen.height - window.innerHeight}px` : '0';
|
|
8204
|
+
window.scroll({ top: 0, left: 0, behavior: 'smooth' });
|
|
8210
8205
|
}
|
|
8211
|
-
window.scroll({
|
|
8212
|
-
top: 0,
|
|
8213
|
-
left: 0,
|
|
8214
|
-
behavior: 'smooth',
|
|
8215
|
-
});
|
|
8216
8206
|
});
|
|
8217
8207
|
};
|
|
8218
8208
|
this.handleSlotChange = () => {
|
|
@@ -8250,6 +8240,7 @@ class CuraDropdownSearch {
|
|
|
8250
8240
|
this.showOverlay();
|
|
8251
8241
|
}
|
|
8252
8242
|
else {
|
|
8243
|
+
this.resetDropdownStyles();
|
|
8253
8244
|
this.removeOverlay();
|
|
8254
8245
|
}
|
|
8255
8246
|
}
|
|
@@ -8274,6 +8265,7 @@ class CuraDropdownSearch {
|
|
|
8274
8265
|
this.isOnBlurInput = true;
|
|
8275
8266
|
this.hoveredIndex = -1;
|
|
8276
8267
|
this.options = [];
|
|
8268
|
+
this.originalOverflow = '';
|
|
8277
8269
|
}
|
|
8278
8270
|
connectedCallback() {
|
|
8279
8271
|
this.weights = window.CuraAPI.theme.fonts.getWeights();
|
|
@@ -8325,12 +8317,15 @@ class CuraDropdownSearch {
|
|
|
8325
8317
|
this.overlayElement.style.zIndex = '9999';
|
|
8326
8318
|
this.overlayElement.style.backgroundColor = 'white';
|
|
8327
8319
|
document.body.appendChild(this.overlayElement);
|
|
8320
|
+
this.originalOverflow = document.body.style.overflow;
|
|
8321
|
+
document.body.style.overflow = 'hidden';
|
|
8328
8322
|
}
|
|
8329
8323
|
}
|
|
8330
8324
|
removeOverlay() {
|
|
8331
8325
|
if (this.overlayElement && this.overlayElement.parentNode === document.body) {
|
|
8332
8326
|
document.body.removeChild(this.overlayElement);
|
|
8333
8327
|
this.overlayElement = null;
|
|
8328
|
+
document.body.style.overflow = this.originalOverflow;
|
|
8334
8329
|
}
|
|
8335
8330
|
}
|
|
8336
8331
|
addClickListenersToOptions() {
|
|
@@ -8354,6 +8349,7 @@ class CuraDropdownSearch {
|
|
|
8354
8349
|
this.updateSelectedOption(this.value);
|
|
8355
8350
|
this.isDropdownOpen = false;
|
|
8356
8351
|
this.isOnBlurInput = true;
|
|
8352
|
+
this.resetDropdownStyles();
|
|
8357
8353
|
this.removeOverlay();
|
|
8358
8354
|
}
|
|
8359
8355
|
}
|
|
@@ -8393,6 +8389,7 @@ class CuraDropdownSearch {
|
|
|
8393
8389
|
if (this.isOnBlurInput === true) {
|
|
8394
8390
|
setTimeout(() => {
|
|
8395
8391
|
this.isDropdownOpen = false;
|
|
8392
|
+
this.resetDropdownStyles();
|
|
8396
8393
|
this.removeOverlay();
|
|
8397
8394
|
}, 200);
|
|
8398
8395
|
}
|
|
@@ -8426,11 +8423,23 @@ class CuraDropdownSearch {
|
|
|
8426
8423
|
this.host.style.setProperty('--dynamic-input-search-height', `${dropdownInputSearchElement.offsetHeight}px`);
|
|
8427
8424
|
}
|
|
8428
8425
|
}
|
|
8426
|
+
handleGoBack() {
|
|
8427
|
+
this.resetDropdownStyles();
|
|
8428
|
+
this.isMobile = false;
|
|
8429
|
+
}
|
|
8430
|
+
resetDropdownStyles() {
|
|
8431
|
+
var _a;
|
|
8432
|
+
const dropdown = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-mobile');
|
|
8433
|
+
if (dropdown && dropdown.style.position === 'fixed') {
|
|
8434
|
+
dropdown.style.position = 'relative';
|
|
8435
|
+
dropdown.style.removeProperty('bottom');
|
|
8436
|
+
}
|
|
8437
|
+
}
|
|
8429
8438
|
render() {
|
|
8430
8439
|
const isMobileDropdown = this.isMobile && this.isDropdownOpen;
|
|
8431
|
-
return (hAsync(Host, { key: '
|
|
8440
|
+
return (hAsync(Host, { key: '21f8601dd62ce272ac6856e6f951268b2fbbf32d', style: this.hostCSSProperties(), class: "dropdown-overlay" }, hAsync("div", { key: 'a6841c5564454fcc33a4d053cd506c17f53026d3', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, hAsync("div", { key: '3653377bc88d97c60a049731f6286aa5d7fc516c', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (hAsync("cura-button-transparent", { key: 'bd4614e2859df22d74d27532171e73de1cf60979', fontColor: "dark", onClick: () => this.handleGoBack(), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), hAsync("cura-input-text", { key: '811d3745b6963d3aff02d58a39f7f1be472646fa', 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: () => {
|
|
8432
8441
|
this.handleOnBlur();
|
|
8433
|
-
}, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, hAsync("slot", { key: '
|
|
8442
|
+
}, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, hAsync("slot", { key: 'a928b64d301c0cd674612698839a213344dc6798', name: "helperText" }))), hAsync("div", { key: '06ba9b411e46969ccf7378869bc37d202084ead0', id: "dropdown-search-list", class: this.getDropdownClasses() }, hAsync("slot", { key: '8915959d70f28a28c7b8035e77c34ed1f7035727', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
|
|
8434
8443
|
}
|
|
8435
8444
|
get host() { return getElement(this); }
|
|
8436
8445
|
static get watchers() { return {
|
|
@@ -8460,7 +8469,8 @@ class CuraDropdownSearch {
|
|
|
8460
8469
|
"inputTextRef": [32],
|
|
8461
8470
|
"isOnBlurInput": [32],
|
|
8462
8471
|
"hoveredIndex": [32],
|
|
8463
|
-
"options": [32]
|
|
8472
|
+
"options": [32],
|
|
8473
|
+
"originalOverflow": [32]
|
|
8464
8474
|
},
|
|
8465
8475
|
"$listeners$": undefined,
|
|
8466
8476
|
"$lazyBundleId$": "-",
|
package/index.mjs
CHANGED
|
@@ -8195,20 +8195,10 @@ class CuraDropdownSearch {
|
|
|
8195
8195
|
const isKeyboardOpen = window.innerHeight < window.screen.height * 0.8;
|
|
8196
8196
|
const dropdown = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-mobile');
|
|
8197
8197
|
if (dropdown) {
|
|
8198
|
-
|
|
8199
|
-
|
|
8200
|
-
|
|
8201
|
-
}
|
|
8202
|
-
else {
|
|
8203
|
-
dropdown.style.position = 'fixed';
|
|
8204
|
-
dropdown.style.bottom = '0';
|
|
8205
|
-
}
|
|
8198
|
+
dropdown.style.position = isKeyboardOpen ? 'absolute' : 'fixed';
|
|
8199
|
+
dropdown.style.bottom = isKeyboardOpen ? `${window.screen.height - window.innerHeight}px` : '0';
|
|
8200
|
+
window.scroll({ top: 0, left: 0, behavior: 'smooth' });
|
|
8206
8201
|
}
|
|
8207
|
-
window.scroll({
|
|
8208
|
-
top: 0,
|
|
8209
|
-
left: 0,
|
|
8210
|
-
behavior: 'smooth',
|
|
8211
|
-
});
|
|
8212
8202
|
});
|
|
8213
8203
|
};
|
|
8214
8204
|
this.handleSlotChange = () => {
|
|
@@ -8246,6 +8236,7 @@ class CuraDropdownSearch {
|
|
|
8246
8236
|
this.showOverlay();
|
|
8247
8237
|
}
|
|
8248
8238
|
else {
|
|
8239
|
+
this.resetDropdownStyles();
|
|
8249
8240
|
this.removeOverlay();
|
|
8250
8241
|
}
|
|
8251
8242
|
}
|
|
@@ -8270,6 +8261,7 @@ class CuraDropdownSearch {
|
|
|
8270
8261
|
this.isOnBlurInput = true;
|
|
8271
8262
|
this.hoveredIndex = -1;
|
|
8272
8263
|
this.options = [];
|
|
8264
|
+
this.originalOverflow = '';
|
|
8273
8265
|
}
|
|
8274
8266
|
connectedCallback() {
|
|
8275
8267
|
this.weights = window.CuraAPI.theme.fonts.getWeights();
|
|
@@ -8321,12 +8313,15 @@ class CuraDropdownSearch {
|
|
|
8321
8313
|
this.overlayElement.style.zIndex = '9999';
|
|
8322
8314
|
this.overlayElement.style.backgroundColor = 'white';
|
|
8323
8315
|
document.body.appendChild(this.overlayElement);
|
|
8316
|
+
this.originalOverflow = document.body.style.overflow;
|
|
8317
|
+
document.body.style.overflow = 'hidden';
|
|
8324
8318
|
}
|
|
8325
8319
|
}
|
|
8326
8320
|
removeOverlay() {
|
|
8327
8321
|
if (this.overlayElement && this.overlayElement.parentNode === document.body) {
|
|
8328
8322
|
document.body.removeChild(this.overlayElement);
|
|
8329
8323
|
this.overlayElement = null;
|
|
8324
|
+
document.body.style.overflow = this.originalOverflow;
|
|
8330
8325
|
}
|
|
8331
8326
|
}
|
|
8332
8327
|
addClickListenersToOptions() {
|
|
@@ -8350,6 +8345,7 @@ class CuraDropdownSearch {
|
|
|
8350
8345
|
this.updateSelectedOption(this.value);
|
|
8351
8346
|
this.isDropdownOpen = false;
|
|
8352
8347
|
this.isOnBlurInput = true;
|
|
8348
|
+
this.resetDropdownStyles();
|
|
8353
8349
|
this.removeOverlay();
|
|
8354
8350
|
}
|
|
8355
8351
|
}
|
|
@@ -8389,6 +8385,7 @@ class CuraDropdownSearch {
|
|
|
8389
8385
|
if (this.isOnBlurInput === true) {
|
|
8390
8386
|
setTimeout(() => {
|
|
8391
8387
|
this.isDropdownOpen = false;
|
|
8388
|
+
this.resetDropdownStyles();
|
|
8392
8389
|
this.removeOverlay();
|
|
8393
8390
|
}, 200);
|
|
8394
8391
|
}
|
|
@@ -8422,11 +8419,23 @@ class CuraDropdownSearch {
|
|
|
8422
8419
|
this.host.style.setProperty('--dynamic-input-search-height', `${dropdownInputSearchElement.offsetHeight}px`);
|
|
8423
8420
|
}
|
|
8424
8421
|
}
|
|
8422
|
+
handleGoBack() {
|
|
8423
|
+
this.resetDropdownStyles();
|
|
8424
|
+
this.isMobile = false;
|
|
8425
|
+
}
|
|
8426
|
+
resetDropdownStyles() {
|
|
8427
|
+
var _a;
|
|
8428
|
+
const dropdown = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-mobile');
|
|
8429
|
+
if (dropdown && dropdown.style.position === 'fixed') {
|
|
8430
|
+
dropdown.style.position = 'relative';
|
|
8431
|
+
dropdown.style.removeProperty('bottom');
|
|
8432
|
+
}
|
|
8433
|
+
}
|
|
8425
8434
|
render() {
|
|
8426
8435
|
const isMobileDropdown = this.isMobile && this.isDropdownOpen;
|
|
8427
|
-
return (hAsync(Host, { key: '
|
|
8436
|
+
return (hAsync(Host, { key: '21f8601dd62ce272ac6856e6f951268b2fbbf32d', style: this.hostCSSProperties(), class: "dropdown-overlay" }, hAsync("div", { key: 'a6841c5564454fcc33a4d053cd506c17f53026d3', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, hAsync("div", { key: '3653377bc88d97c60a049731f6286aa5d7fc516c', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (hAsync("cura-button-transparent", { key: 'bd4614e2859df22d74d27532171e73de1cf60979', fontColor: "dark", onClick: () => this.handleGoBack(), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), hAsync("cura-input-text", { key: '811d3745b6963d3aff02d58a39f7f1be472646fa', 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: () => {
|
|
8428
8437
|
this.handleOnBlur();
|
|
8429
|
-
}, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, hAsync("slot", { key: '
|
|
8438
|
+
}, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, hAsync("slot", { key: 'a928b64d301c0cd674612698839a213344dc6798', name: "helperText" }))), hAsync("div", { key: '06ba9b411e46969ccf7378869bc37d202084ead0', id: "dropdown-search-list", class: this.getDropdownClasses() }, hAsync("slot", { key: '8915959d70f28a28c7b8035e77c34ed1f7035727', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
|
|
8430
8439
|
}
|
|
8431
8440
|
get host() { return getElement(this); }
|
|
8432
8441
|
static get watchers() { return {
|
|
@@ -8456,7 +8465,8 @@ class CuraDropdownSearch {
|
|
|
8456
8465
|
"inputTextRef": [32],
|
|
8457
8466
|
"isOnBlurInput": [32],
|
|
8458
8467
|
"hoveredIndex": [32],
|
|
8459
|
-
"options": [32]
|
|
8468
|
+
"options": [32],
|
|
8469
|
+
"originalOverflow": [32]
|
|
8460
8470
|
},
|
|
8461
8471
|
"$listeners$": undefined,
|
|
8462
8472
|
"$lazyBundleId$": "-",
|