@watermarkinsights/ripple 5.22.1-alpha.0 → 5.22.1-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{app-globals-11eada31.js → app-globals-025b4565.js} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/ripple.cjs.js +1 -1
- package/dist/cjs/wm-option_2.cjs.entry.js +51 -35
- package/dist/collection/components/selects/wm-select/wm-select.js +51 -35
- package/dist/esm/{app-globals-2b620ca9.js → app-globals-ac59e752.js} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/ripple.js +1 -1
- package/dist/esm/wm-option_2.entry.js +51 -35
- package/dist/esm-es5/{app-globals-2b620ca9.js → app-globals-ac59e752.js} +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/ripple.js +1 -1
- package/dist/esm-es5/wm-option_2.entry.js +1 -1
- package/dist/ripple/{p-31c829dd.entry.js → p-5cf781f0.entry.js} +1 -1
- package/dist/ripple/{p-f48677d4.system.js → p-b7f35f6a.system.js} +1 -1
- package/dist/ripple/{p-032fc74c.system.entry.js → p-dfa28132.system.entry.js} +1 -1
- package/dist/ripple/{p-9f12aa9d.system.js → p-dff75711.system.js} +1 -1
- package/dist/ripple/{p-ce1eff1e.js → p-fd313d81.js} +1 -1
- package/dist/ripple/ripple.esm.js +1 -1
- package/dist/ripple/ripple.js +1 -1
- package/dist/types/components/selects/wm-select/wm-select.d.ts +4 -1
- package/package.json +2 -2
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-788526f5.js');
|
|
6
|
-
const appGlobals = require('./app-globals-
|
|
6
|
+
const appGlobals = require('./app-globals-025b4565.js');
|
|
7
7
|
|
|
8
8
|
const defineCustomElements = async (win, options) => {
|
|
9
9
|
if (typeof window === 'undefined') return undefined;
|
package/dist/cjs/ripple.cjs.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-788526f5.js');
|
|
6
|
-
const appGlobals = require('./app-globals-
|
|
6
|
+
const appGlobals = require('./app-globals-025b4565.js');
|
|
7
7
|
|
|
8
8
|
/*
|
|
9
9
|
Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com
|
|
@@ -192,6 +192,7 @@ const Select = class {
|
|
|
192
192
|
//////////////////////////////////////
|
|
193
193
|
// for multiselect button text
|
|
194
194
|
this.overflowCount = 0;
|
|
195
|
+
this.displayedOptions = [];
|
|
195
196
|
this.previousDisplayedOptions = [];
|
|
196
197
|
this.debouncedReposition = functions.debounce(() => {
|
|
197
198
|
this.dropdownPosition();
|
|
@@ -454,58 +455,73 @@ const Select = class {
|
|
|
454
455
|
}
|
|
455
456
|
this.announcement = message;
|
|
456
457
|
}
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
458
|
+
handleOverflow() {
|
|
459
|
+
// handle overflow + counter for multiselect
|
|
460
|
+
// this is a fixed measurement accounting for the max width of a 3 character overflow counter
|
|
461
|
+
const overflowCounterWidth = 38;
|
|
462
|
+
const computedStyle = window.getComputedStyle(this.buttonEl);
|
|
463
|
+
// there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
|
|
464
|
+
const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
|
|
465
|
+
const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
|
|
466
|
+
const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
|
|
467
|
+
this.overflowCount = 0;
|
|
468
|
+
this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
|
|
469
|
+
let optionsTotalWidth = this.measurementAreaEl.clientWidth;
|
|
470
|
+
while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
|
|
471
|
+
this.overflowCount++;
|
|
472
|
+
this.displayedOptions.pop();
|
|
473
|
+
this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
|
|
474
|
+
optionsTotalWidth = this.measurementAreaEl.clientWidth;
|
|
462
475
|
}
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
476
|
+
}
|
|
477
|
+
renderButtonText() {
|
|
478
|
+
if (!this.multiple) {
|
|
479
|
+
const selEl = this.childOptions.filter((x) => x.selected)[0];
|
|
480
|
+
return selEl ? selEl.textContent : "";
|
|
466
481
|
}
|
|
467
482
|
else {
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
const
|
|
471
|
-
if (this.buttonEl
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
this.
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
this.
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
483
|
+
this.displayedOptions = this.childOptions.filter((x) => x.selected);
|
|
484
|
+
const hasChanged = this.displayedOptions !== this.previousDisplayedOptions;
|
|
485
|
+
const noDisplayedOptions = this.displayedOptions.length < 1;
|
|
486
|
+
if (!this.buttonEl) {
|
|
487
|
+
return "";
|
|
488
|
+
}
|
|
489
|
+
else if (noDisplayedOptions) {
|
|
490
|
+
return this.placeholder;
|
|
491
|
+
}
|
|
492
|
+
else if (hasChanged) {
|
|
493
|
+
this.handleOverflow();
|
|
494
|
+
// we need to calc overflowcount as we only want to display allSelected message if there is an overflow...
|
|
495
|
+
if (this.overflowCount > 0 && this.allSelected) {
|
|
496
|
+
// ...but it should be reset so it isn't displayed in that case
|
|
497
|
+
this.overflowCount = 0;
|
|
498
|
+
this.buttonText = this.allSelectedMessage;
|
|
499
|
+
}
|
|
500
|
+
else {
|
|
501
|
+
this.buttonText = this.displayedOptions.map((x) => x.textContent).join(", ");
|
|
487
502
|
}
|
|
488
503
|
}
|
|
489
|
-
|
|
504
|
+
this.previousDisplayedOptions = this.displayedOptions;
|
|
505
|
+
// the reason for setting a global variable and returning it
|
|
506
|
+
// is that we need the stored value when displayedOptions haven't changed.
|
|
507
|
+
return this.buttonText; // multiselect value
|
|
490
508
|
}
|
|
491
|
-
this.previousDisplayedOptions = displayedOptions;
|
|
492
|
-
return buttonText;
|
|
493
509
|
}
|
|
494
510
|
renderOverflowCount() {
|
|
495
|
-
if (this.overflowCount > 0
|
|
511
|
+
if (this.overflowCount > 0) {
|
|
496
512
|
return (index.h("span", null, index.h("span", { class: "overflow-counter" }, "+", this.overflowCount)));
|
|
497
513
|
}
|
|
498
514
|
}
|
|
499
515
|
render() {
|
|
500
516
|
const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
|
|
501
|
-
return (index.h(index.Host, { key: '
|
|
517
|
+
return (index.h(index.Host, { key: '22253d683dddd41883caa6eb136995149bef53cd', onBlur: (ev) => this.handleComponentBlur(ev) }, index.h("div", { key: '67594428b0f6f33615fa9607995988327da8c02a', class: `wrapper ${functions.getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '94a11f3557c638668a9c1a3722818ce4f174d069', class: "label-wrapper" }, index.h("label", { key: '8d1cb2aa1835aa0b9d9083c36c8aa7332b7e8e20', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label),
|
|
502
518
|
// we can't use aria-required because the listbox is in a sub-component and it is not announced
|
|
503
|
-
this.requiredField && (index.h("span", { key: '
|
|
519
|
+
this.requiredField && (index.h("span", { key: 'f54de4baed1fe1950817c3c794875386d821bdaa', class: "required" }, index.h("span", { key: '250d98f0bfb780f7a444ae94c6d6a07b5692899c', class: "sr-only" }, intl.globalMessages.requiredField), index.h("span", { key: '3811bb3f7cade2678525621b0b0f6202a2dc1bf9', "aria-hidden": "true" }, "*")))), index.h("div", { key: '20df200122d9bc31eb2f2cd004fc0637c3f71700', class: "button-wrapper" }, index.h("button", { key: '23031b6055b09f5f031665ca12efc0958dd4bc57', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": "label selectbtn", "aria-describedby": "error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, index.h("span", { key: '07251301d26a1eab7d44c6f5be273a4b3623c690', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, index.h("span", { key: '1668638176ede964472c49247304e1ec6b52dee3', class: "button-text" }, this.renderButtonText()), showSubinfo && index.h("span", { key: '4b0df5b7b2c4ec1383d0dcf38da27e79f1dd3400', class: "subinfo" }, this.selectedOptions[0].subinfo)), index.h("div", { key: '5cf08d23511ad80604a8299db93858f882ebe595', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), index.h("div", { key: 'b07471f85df4dd1df107f16789748b4884ae22f8', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), index.h("div", { key: 'd67fd58ec25b893f3b1e46b61d6394465a5abb35',
|
|
504
520
|
// is-open is for the CSS transition in modern browsers
|
|
505
521
|
// hidden is to wait for position calculations in Firefox
|
|
506
522
|
class: `dropdown ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.openUp ? "upward" : ""}`, id: "dropdown", popover: "auto", ref: (el) => (this.dropdownEl = el),
|
|
507
523
|
// @ts-ignore -- don't tell typescript but we're in the future
|
|
508
|
-
onToggle: (ev) => this.handleToggle(ev) }, index.h("priv-option-list", { key: '
|
|
524
|
+
onToggle: (ev) => this.handleToggle(ev) }, index.h("priv-option-list", { key: 'e8f5ea8788670fae5ba9aee1be38fa6e117cfddc', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
|
|
509
525
|
this.dropdownEl.hidePopover();
|
|
510
526
|
}, onOptionListAllSelected: () => {
|
|
511
527
|
this.returnFocus = true;
|
|
@@ -513,7 +529,7 @@ const Select = class {
|
|
|
513
529
|
}, onOptionListAllDeselected: () => {
|
|
514
530
|
this.returnFocus = true;
|
|
515
531
|
this.wmSelectAllDeselected.emit();
|
|
516
|
-
} }, index.h("slot", { key: '
|
|
532
|
+
} }, index.h("slot", { key: '2e7b0b75a43b20a5b3d0419e76166d035dd7e9dc' }))), index.h("div", { key: '642ab06863b28bf32d15f4f0e72928c4faa0b433', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), index.h("div", { key: 'ec9299e74b4b4ae07accf5f28ab544d62cb6fa58', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
|
|
517
533
|
}
|
|
518
534
|
static get delegatesFocus() { return true; }
|
|
519
535
|
get el() { return index.getElement(this); }
|
|
@@ -10,6 +10,7 @@ export class Select {
|
|
|
10
10
|
//////////////////////////////////////
|
|
11
11
|
// for multiselect button text
|
|
12
12
|
this.overflowCount = 0;
|
|
13
|
+
this.displayedOptions = [];
|
|
13
14
|
this.previousDisplayedOptions = [];
|
|
14
15
|
this.debouncedReposition = debounce(() => {
|
|
15
16
|
this.dropdownPosition();
|
|
@@ -272,58 +273,73 @@ export class Select {
|
|
|
272
273
|
}
|
|
273
274
|
this.announcement = message;
|
|
274
275
|
}
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
276
|
+
handleOverflow() {
|
|
277
|
+
// handle overflow + counter for multiselect
|
|
278
|
+
// this is a fixed measurement accounting for the max width of a 3 character overflow counter
|
|
279
|
+
const overflowCounterWidth = 38;
|
|
280
|
+
const computedStyle = window.getComputedStyle(this.buttonEl);
|
|
281
|
+
// there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
|
|
282
|
+
const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
|
|
283
|
+
const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
|
|
284
|
+
const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
|
|
285
|
+
this.overflowCount = 0;
|
|
286
|
+
this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
|
|
287
|
+
let optionsTotalWidth = this.measurementAreaEl.clientWidth;
|
|
288
|
+
while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
|
|
289
|
+
this.overflowCount++;
|
|
290
|
+
this.displayedOptions.pop();
|
|
291
|
+
this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
|
|
292
|
+
optionsTotalWidth = this.measurementAreaEl.clientWidth;
|
|
280
293
|
}
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
294
|
+
}
|
|
295
|
+
renderButtonText() {
|
|
296
|
+
if (!this.multiple) {
|
|
297
|
+
const selEl = this.childOptions.filter((x) => x.selected)[0];
|
|
298
|
+
return selEl ? selEl.textContent : "";
|
|
284
299
|
}
|
|
285
300
|
else {
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
const
|
|
289
|
-
if (this.buttonEl
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
this.
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
this.
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
301
|
+
this.displayedOptions = this.childOptions.filter((x) => x.selected);
|
|
302
|
+
const hasChanged = this.displayedOptions !== this.previousDisplayedOptions;
|
|
303
|
+
const noDisplayedOptions = this.displayedOptions.length < 1;
|
|
304
|
+
if (!this.buttonEl) {
|
|
305
|
+
return "";
|
|
306
|
+
}
|
|
307
|
+
else if (noDisplayedOptions) {
|
|
308
|
+
return this.placeholder;
|
|
309
|
+
}
|
|
310
|
+
else if (hasChanged) {
|
|
311
|
+
this.handleOverflow();
|
|
312
|
+
// we need to calc overflowcount as we only want to display allSelected message if there is an overflow...
|
|
313
|
+
if (this.overflowCount > 0 && this.allSelected) {
|
|
314
|
+
// ...but it should be reset so it isn't displayed in that case
|
|
315
|
+
this.overflowCount = 0;
|
|
316
|
+
this.buttonText = this.allSelectedMessage;
|
|
317
|
+
}
|
|
318
|
+
else {
|
|
319
|
+
this.buttonText = this.displayedOptions.map((x) => x.textContent).join(", ");
|
|
305
320
|
}
|
|
306
321
|
}
|
|
307
|
-
|
|
322
|
+
this.previousDisplayedOptions = this.displayedOptions;
|
|
323
|
+
// the reason for setting a global variable and returning it
|
|
324
|
+
// is that we need the stored value when displayedOptions haven't changed.
|
|
325
|
+
return this.buttonText; // multiselect value
|
|
308
326
|
}
|
|
309
|
-
this.previousDisplayedOptions = displayedOptions;
|
|
310
|
-
return buttonText;
|
|
311
327
|
}
|
|
312
328
|
renderOverflowCount() {
|
|
313
|
-
if (this.overflowCount > 0
|
|
329
|
+
if (this.overflowCount > 0) {
|
|
314
330
|
return (h("span", null, h("span", { class: "overflow-counter" }, "+", this.overflowCount)));
|
|
315
331
|
}
|
|
316
332
|
}
|
|
317
333
|
render() {
|
|
318
334
|
const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
|
|
319
|
-
return (h(Host, { key: '
|
|
335
|
+
return (h(Host, { key: '22253d683dddd41883caa6eb136995149bef53cd', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '67594428b0f6f33615fa9607995988327da8c02a', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '94a11f3557c638668a9c1a3722818ce4f174d069', class: "label-wrapper" }, h("label", { key: '8d1cb2aa1835aa0b9d9083c36c8aa7332b7e8e20', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label),
|
|
320
336
|
// we can't use aria-required because the listbox is in a sub-component and it is not announced
|
|
321
|
-
this.requiredField && (h("span", { key: '
|
|
337
|
+
this.requiredField && (h("span", { key: 'f54de4baed1fe1950817c3c794875386d821bdaa', class: "required" }, h("span", { key: '250d98f0bfb780f7a444ae94c6d6a07b5692899c', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '3811bb3f7cade2678525621b0b0f6202a2dc1bf9', "aria-hidden": "true" }, "*")))), h("div", { key: '20df200122d9bc31eb2f2cd004fc0637c3f71700', class: "button-wrapper" }, h("button", { key: '23031b6055b09f5f031665ca12efc0958dd4bc57', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": "label selectbtn", "aria-describedby": "error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, h("span", { key: '07251301d26a1eab7d44c6f5be273a4b3623c690', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '1668638176ede964472c49247304e1ec6b52dee3', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: '4b0df5b7b2c4ec1383d0dcf38da27e79f1dd3400', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '5cf08d23511ad80604a8299db93858f882ebe595', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: 'b07471f85df4dd1df107f16789748b4884ae22f8', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'd67fd58ec25b893f3b1e46b61d6394465a5abb35',
|
|
322
338
|
// is-open is for the CSS transition in modern browsers
|
|
323
339
|
// hidden is to wait for position calculations in Firefox
|
|
324
340
|
class: `dropdown ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.openUp ? "upward" : ""}`, id: "dropdown", popover: "auto", ref: (el) => (this.dropdownEl = el),
|
|
325
341
|
// @ts-ignore -- don't tell typescript but we're in the future
|
|
326
|
-
onToggle: (ev) => this.handleToggle(ev) }, h("priv-option-list", { key: '
|
|
342
|
+
onToggle: (ev) => this.handleToggle(ev) }, h("priv-option-list", { key: 'e8f5ea8788670fae5ba9aee1be38fa6e117cfddc', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
|
|
327
343
|
this.dropdownEl.hidePopover();
|
|
328
344
|
}, onOptionListAllSelected: () => {
|
|
329
345
|
this.returnFocus = true;
|
|
@@ -331,7 +347,7 @@ export class Select {
|
|
|
331
347
|
}, onOptionListAllDeselected: () => {
|
|
332
348
|
this.returnFocus = true;
|
|
333
349
|
this.wmSelectAllDeselected.emit();
|
|
334
|
-
} }, h("slot", { key: '
|
|
350
|
+
} }, h("slot", { key: '2e7b0b75a43b20a5b3d0419e76166d035dd7e9dc' }))), h("div", { key: '642ab06863b28bf32d15f4f0e72928c4faa0b433', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'ec9299e74b4b4ae07accf5f28ab544d62cb6fa58', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
|
|
335
351
|
}
|
|
336
352
|
static get is() { return "wm-select"; }
|
|
337
353
|
static get encapsulation() { return "shadow"; }
|
package/dist/esm/loader.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { b as bootstrapLazy } from './index-130e07bb.js';
|
|
2
2
|
export { s as setNonce } from './index-130e07bb.js';
|
|
3
|
-
import { g as globalScripts } from './app-globals-
|
|
3
|
+
import { g as globalScripts } from './app-globals-ac59e752.js';
|
|
4
4
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
package/dist/esm/ripple.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as promiseResolve, b as bootstrapLazy } from './index-130e07bb.js';
|
|
2
2
|
export { s as setNonce } from './index-130e07bb.js';
|
|
3
|
-
import { g as globalScripts } from './app-globals-
|
|
3
|
+
import { g as globalScripts } from './app-globals-ac59e752.js';
|
|
4
4
|
|
|
5
5
|
/*
|
|
6
6
|
Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com
|
|
@@ -188,6 +188,7 @@ const Select = class {
|
|
|
188
188
|
//////////////////////////////////////
|
|
189
189
|
// for multiselect button text
|
|
190
190
|
this.overflowCount = 0;
|
|
191
|
+
this.displayedOptions = [];
|
|
191
192
|
this.previousDisplayedOptions = [];
|
|
192
193
|
this.debouncedReposition = debounce(() => {
|
|
193
194
|
this.dropdownPosition();
|
|
@@ -450,58 +451,73 @@ const Select = class {
|
|
|
450
451
|
}
|
|
451
452
|
this.announcement = message;
|
|
452
453
|
}
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
454
|
+
handleOverflow() {
|
|
455
|
+
// handle overflow + counter for multiselect
|
|
456
|
+
// this is a fixed measurement accounting for the max width of a 3 character overflow counter
|
|
457
|
+
const overflowCounterWidth = 38;
|
|
458
|
+
const computedStyle = window.getComputedStyle(this.buttonEl);
|
|
459
|
+
// there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
|
|
460
|
+
const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
|
|
461
|
+
const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
|
|
462
|
+
const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
|
|
463
|
+
this.overflowCount = 0;
|
|
464
|
+
this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
|
|
465
|
+
let optionsTotalWidth = this.measurementAreaEl.clientWidth;
|
|
466
|
+
while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
|
|
467
|
+
this.overflowCount++;
|
|
468
|
+
this.displayedOptions.pop();
|
|
469
|
+
this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
|
|
470
|
+
optionsTotalWidth = this.measurementAreaEl.clientWidth;
|
|
458
471
|
}
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
472
|
+
}
|
|
473
|
+
renderButtonText() {
|
|
474
|
+
if (!this.multiple) {
|
|
475
|
+
const selEl = this.childOptions.filter((x) => x.selected)[0];
|
|
476
|
+
return selEl ? selEl.textContent : "";
|
|
462
477
|
}
|
|
463
478
|
else {
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
const
|
|
467
|
-
if (this.buttonEl
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
this.
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
this.
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
479
|
+
this.displayedOptions = this.childOptions.filter((x) => x.selected);
|
|
480
|
+
const hasChanged = this.displayedOptions !== this.previousDisplayedOptions;
|
|
481
|
+
const noDisplayedOptions = this.displayedOptions.length < 1;
|
|
482
|
+
if (!this.buttonEl) {
|
|
483
|
+
return "";
|
|
484
|
+
}
|
|
485
|
+
else if (noDisplayedOptions) {
|
|
486
|
+
return this.placeholder;
|
|
487
|
+
}
|
|
488
|
+
else if (hasChanged) {
|
|
489
|
+
this.handleOverflow();
|
|
490
|
+
// we need to calc overflowcount as we only want to display allSelected message if there is an overflow...
|
|
491
|
+
if (this.overflowCount > 0 && this.allSelected) {
|
|
492
|
+
// ...but it should be reset so it isn't displayed in that case
|
|
493
|
+
this.overflowCount = 0;
|
|
494
|
+
this.buttonText = this.allSelectedMessage;
|
|
495
|
+
}
|
|
496
|
+
else {
|
|
497
|
+
this.buttonText = this.displayedOptions.map((x) => x.textContent).join(", ");
|
|
483
498
|
}
|
|
484
499
|
}
|
|
485
|
-
|
|
500
|
+
this.previousDisplayedOptions = this.displayedOptions;
|
|
501
|
+
// the reason for setting a global variable and returning it
|
|
502
|
+
// is that we need the stored value when displayedOptions haven't changed.
|
|
503
|
+
return this.buttonText; // multiselect value
|
|
486
504
|
}
|
|
487
|
-
this.previousDisplayedOptions = displayedOptions;
|
|
488
|
-
return buttonText;
|
|
489
505
|
}
|
|
490
506
|
renderOverflowCount() {
|
|
491
|
-
if (this.overflowCount > 0
|
|
507
|
+
if (this.overflowCount > 0) {
|
|
492
508
|
return (h("span", null, h("span", { class: "overflow-counter" }, "+", this.overflowCount)));
|
|
493
509
|
}
|
|
494
510
|
}
|
|
495
511
|
render() {
|
|
496
512
|
const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
|
|
497
|
-
return (h(Host, { key: '
|
|
513
|
+
return (h(Host, { key: '22253d683dddd41883caa6eb136995149bef53cd', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '67594428b0f6f33615fa9607995988327da8c02a', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '94a11f3557c638668a9c1a3722818ce4f174d069', class: "label-wrapper" }, h("label", { key: '8d1cb2aa1835aa0b9d9083c36c8aa7332b7e8e20', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label),
|
|
498
514
|
// we can't use aria-required because the listbox is in a sub-component and it is not announced
|
|
499
|
-
this.requiredField && (h("span", { key: '
|
|
515
|
+
this.requiredField && (h("span", { key: 'f54de4baed1fe1950817c3c794875386d821bdaa', class: "required" }, h("span", { key: '250d98f0bfb780f7a444ae94c6d6a07b5692899c', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '3811bb3f7cade2678525621b0b0f6202a2dc1bf9', "aria-hidden": "true" }, "*")))), h("div", { key: '20df200122d9bc31eb2f2cd004fc0637c3f71700', class: "button-wrapper" }, h("button", { key: '23031b6055b09f5f031665ca12efc0958dd4bc57', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": "label selectbtn", "aria-describedby": "error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, h("span", { key: '07251301d26a1eab7d44c6f5be273a4b3623c690', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '1668638176ede964472c49247304e1ec6b52dee3', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: '4b0df5b7b2c4ec1383d0dcf38da27e79f1dd3400', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '5cf08d23511ad80604a8299db93858f882ebe595', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: 'b07471f85df4dd1df107f16789748b4884ae22f8', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'd67fd58ec25b893f3b1e46b61d6394465a5abb35',
|
|
500
516
|
// is-open is for the CSS transition in modern browsers
|
|
501
517
|
// hidden is to wait for position calculations in Firefox
|
|
502
518
|
class: `dropdown ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.openUp ? "upward" : ""}`, id: "dropdown", popover: "auto", ref: (el) => (this.dropdownEl = el),
|
|
503
519
|
// @ts-ignore -- don't tell typescript but we're in the future
|
|
504
|
-
onToggle: (ev) => this.handleToggle(ev) }, h("priv-option-list", { key: '
|
|
520
|
+
onToggle: (ev) => this.handleToggle(ev) }, h("priv-option-list", { key: 'e8f5ea8788670fae5ba9aee1be38fa6e117cfddc', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
|
|
505
521
|
this.dropdownEl.hidePopover();
|
|
506
522
|
}, onOptionListAllSelected: () => {
|
|
507
523
|
this.returnFocus = true;
|
|
@@ -509,7 +525,7 @@ const Select = class {
|
|
|
509
525
|
}, onOptionListAllDeselected: () => {
|
|
510
526
|
this.returnFocus = true;
|
|
511
527
|
this.wmSelectAllDeselected.emit();
|
|
512
|
-
} }, h("slot", { key: '
|
|
528
|
+
} }, h("slot", { key: '2e7b0b75a43b20a5b3d0419e76166d035dd7e9dc' }))), h("div", { key: '642ab06863b28bf32d15f4f0e72928c4faa0b433', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'ec9299e74b4b4ae07accf5f28ab544d62cb6fa58', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
|
|
513
529
|
}
|
|
514
530
|
static get delegatesFocus() { return true; }
|
|
515
531
|
get el() { return getElement(this); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"./index-130e07bb.js";var version="5.22.1-alpha.
|
|
1
|
+
import"./index-130e07bb.js";var version="5.22.1-alpha.2";if(window.navigator.plugins.length>0){console.log("%cRipple component library %c%s","color: #575195; font-weight: bold","font-weight: bold",version)}function wmComponentKeys(n){if(n.key=="Tab"){var o=new Event("wmUserIsTabbing");window.dispatchEvent(o);document.querySelector("body").classList.add("wmcl-user-is-tabbing")}if(n.key=="ArrowLeft"||n.key=="ArrowUp"||n.key=="ArrowRight"||n.key=="ArrowDown"){var o=new Event("wmUserIsKeying");window.dispatchEvent(o);document.querySelector("body").classList.add("wmcl-user-is-keying")}}function wmComponentMouseDownOnce(){var n=new Event("wmUserIsNotTabbing");window.dispatchEvent(n);document.querySelector("body").classList.remove("wmcl-user-is-tabbing");document.querySelector("body").classList.remove("wmcl-user-is-keying")}window.addEventListener("keydown",wmComponentKeys);window.addEventListener("mousedown",wmComponentMouseDownOnce);document.addEventListener("DOMContentLoaded",(function(){var n=document.createElement("div");n.id="wm-tooltip-container";var o=document.createElement("div");o.id="wm-tooltip";o.classList.add("wm-tooltip");o.setAttribute("popover","manual");o.setAttribute("aria-hidden","true");var t=document.createElement("style");t.textContent="\n.wm-tooltip {\n position: fixed;\n overflow: hidden;\n pointer-events: none;\n line-height: normal;\n font-family: inherit;\n font-size: 0.875rem;\n text-transform: none;\n font-weight: normal;\n background: var(--wmcolor-tooltip-background);\n color: var(--wmcolor-tooltip-text);\n z-index: 999999;\n max-width: var(--wmTooltipMaxWidth, 13.75rem);\n margin-right: 1.5rem;\n padding: 0.375rem;\n transition-property: opacity;\n transition-delay: 0s;\n opacity: 0;\n inset: unset;\n top: 0;\n left: 0;\n transform: translateZ(0);\n will-change: transform;\n transform: translate(var(--wmTooltipLeft), var(--wmTooltipTop));\n border: none;\n}\n\n.wm-tooltip:popover-open {\n opacity: 0;\n}\n\n.wm-tooltip.show {\n transition-delay: 500ms;\n opacity: 1;\n}\n";document.head.appendChild(t);n.appendChild(o);document.querySelector("body").appendChild(n)}));var globalFn=function(){};var globalScripts=globalFn;export{globalScripts as g};
|