@watermarkinsights/ripple 5.30.0 → 5.31.0-alpha.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/dist/cjs/{app-globals-f310dc82.js → app-globals-3f8985a8.js} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/priv-calendar.cjs.entry.js +27 -27
- package/dist/cjs/ripple.cjs.js +1 -1
- package/dist/cjs/wm-date-range.cjs.entry.js +9 -9
- package/dist/cjs/wm-datepicker.cjs.entry.js +7 -7
- package/dist/cjs/wm-navigator.cjs.entry.js +1 -1
- package/dist/collection/components/datepickers/priv-calendar/priv-calendar.css +47 -47
- package/dist/collection/components/datepickers/priv-calendar/priv-calendar.js +29 -29
- package/dist/collection/components/datepickers/wm-date-range.js +9 -9
- package/dist/collection/components/datepickers/wm-datepicker.js +7 -7
- package/dist/collection/components/wm-navigator/wm-navigator.js +1 -1
- package/dist/collection/global/services/__mocks__/http-service.js +1 -1
- package/dist/esm/{app-globals-0d90343d.js → app-globals-fbe51289.js} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/priv-calendar.entry.js +27 -27
- package/dist/esm/ripple.js +1 -1
- package/dist/esm/wm-date-range.entry.js +9 -9
- package/dist/esm/wm-datepicker.entry.js +7 -7
- package/dist/esm/wm-navigator.entry.js +1 -1
- package/dist/esm-es5/app-globals-fbe51289.js +1 -0
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/priv-calendar.entry.js +1 -1
- package/dist/esm-es5/ripple.js +1 -1
- package/dist/esm-es5/wm-date-range.entry.js +1 -1
- package/dist/esm-es5/wm-datepicker.entry.js +1 -1
- package/dist/esm-es5/wm-navigator.entry.js +1 -1
- package/dist/ripple/p-2cf2f73e.entry.js +1 -0
- package/dist/ripple/{p-86148143.system.entry.js → p-306f3b47.system.entry.js} +1 -1
- package/dist/ripple/{p-a5a165c6.system.entry.js → p-3e8bfc68.system.entry.js} +1 -1
- package/dist/ripple/p-54fff8d1.entry.js +1 -0
- package/dist/ripple/{p-f7fc6350.system.js → p-5bdd4f8e.system.js} +1 -1
- package/dist/ripple/p-a03315ce.entry.js +1 -0
- package/dist/ripple/p-acac6687.js +1 -0
- package/dist/ripple/p-e427094b.system.js +1 -0
- package/dist/ripple/{p-6f2d3297.system.entry.js → p-e65f7933.system.entry.js} +1 -1
- package/dist/ripple/p-eda49f0e.entry.js +1 -0
- package/dist/ripple/{p-df9d5b14.system.entry.js → p-f68e4b39.system.entry.js} +1 -1
- package/dist/ripple/ripple.esm.js +1 -1
- package/dist/ripple/ripple.js +1 -1
- package/dist/types/components/datepickers/priv-calendar/priv-calendar.d.ts +2 -2
- package/dist/types/components.d.ts +2 -2
- package/package.json +2 -2
- package/dist/esm-es5/app-globals-0d90343d.js +0 -1
- package/dist/ripple/p-065b0134.entry.js +0 -1
- package/dist/ripple/p-1f79c42d.entry.js +0 -1
- package/dist/ripple/p-210773eb.entry.js +0 -1
- package/dist/ripple/p-2f297bf8.js +0 -1
- package/dist/ripple/p-6a7b26a1.system.js +0 -1
- package/dist/ripple/p-d55bd2b9.entry.js +0 -1
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-bb947bd5.js');
|
|
6
|
-
const appGlobals = require('./app-globals-
|
|
6
|
+
const appGlobals = require('./app-globals-3f8985a8.js');
|
|
7
7
|
|
|
8
8
|
/*
|
|
9
9
|
Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com
|
|
@@ -288,8 +288,8 @@ const DateRange = class {
|
|
|
288
288
|
this.endCalEl.startDate = undefined;
|
|
289
289
|
this.endCalEl.endDate = undefined;
|
|
290
290
|
this.endCalEl.hoverDate = undefined;
|
|
291
|
-
this.startCalEl.view = "
|
|
292
|
-
this.endCalEl.view = "
|
|
291
|
+
this.startCalEl.view = "month";
|
|
292
|
+
this.endCalEl.view = "month";
|
|
293
293
|
this.isExpanded = false;
|
|
294
294
|
}
|
|
295
295
|
}
|
|
@@ -342,7 +342,7 @@ const DateRange = class {
|
|
|
342
342
|
const oldYear = functions.dateFind.year.asInt(this.oldFocusVal);
|
|
343
343
|
const newMonth = functions.dateFind.month.asInt(newFocusVal);
|
|
344
344
|
const oldMonth = functions.dateFind.month.asInt(this.oldFocusVal);
|
|
345
|
-
if (cal.view === "
|
|
345
|
+
if (cal.view === "month") {
|
|
346
346
|
if (newYear != oldYear || newMonth != oldMonth) {
|
|
347
347
|
this.liveRegionEl.innerHTML = functions.intl.formatMessage({
|
|
348
348
|
id: "date.viewingMonth",
|
|
@@ -541,25 +541,25 @@ const DateRange = class {
|
|
|
541
541
|
}
|
|
542
542
|
render() {
|
|
543
543
|
var _a, _b, _c, _d;
|
|
544
|
-
return (index.h(index.Host, { key: '
|
|
544
|
+
return (index.h(index.Host, { key: 'd9425370610f8a2b7c45fe6f292c3956a84ff9bd', "aria-busy": "false" }, index.h("div", { key: 'db1104312e47a8c5f83d69a23c248ed4707abf36', ref: (d) => (this.wrapperEl = d), class: "wrapper" }, index.h("div", { key: '4e41eab3d58c2fca4545102e0f56b990af715a37', class: "range-wrapper cal", ref: (el) => (this.anchorEl = el) }, index.h("div", { key: '1a8367a94d56d6478304c17501835e02a83c8a89', class: "label-wrapper", id: "start-label-wrapper" }, index.h("label", { key: '95ca9b13badd5de4bf3256950e266c649ec96e81', id: "startlabel", htmlFor: "start-date-input", class: "label" }, this.labelStart, this.requiredField && (index.h("span", { key: '735e651558ca88cd0ef48da443de1141a3a3b2be', "aria-hidden": "true", class: "required" }, "*")))), index.h("div", { key: '88f0a8721ecff89466b5d4dcc44d35ad67f8f0cb', class: "label-wrapper", id: "end-label-wrapper" }, index.h("label", { key: 'f4bfa9b4e39cb75ca0af56ce75291dc838715964', id: "endlabel", htmlFor: "end-date-input", class: "label" }, this.labelEnd, this.requiredField && (index.h("span", { key: 'cbe940d9ed0b9ee6461b22017440a2640cef07ba', "aria-hidden": "true", class: "required" }, "*")))), index.h("input", { key: 'fdbc07ae0431e0c6205962c6ccfba9ebc65f1231', disabled: this._disabled, type: "text", id: "start-date-input", class: `date-input input ${this.invalidStart ? "invalid" : ""}`, name: "start-date", placeholder: this.dateFormat, value: this.valueStart, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleStartInput(ev), onBlur: () => this.handleStartInputBlur(), ref: (input) => (this.startInputEl = input), "aria-describedby": "date-format-hint error", "aria-label": this.labelStart, "aria-required": this.requiredField ? "true" : null }), index.h("div", { key: 'd5bdc52b7caf0e25b012f0fed4472917e2c637df', id: "hyphen" }, "\u00A0-\u00A0"), index.h("input", { key: '99aa505aabd9950e8b8a9d855d2c4ea697f5c8af', disabled: this._disabled, type: "text", id: "end-date-input", class: `date-input input ${this.invalidEnd ? "invalid" : ""}`, name: "end-date", placeholder: this.dateFormat, value: this.valueEnd, onFocus: () => this.handleFocus(), onInput: (ev) => this.handleEndInput(ev), onBlur: () => this.handleEndInputBlur(), ref: (input) => (this.endInputEl = input), "aria-describedby": "date-format-hint error", "aria-label": this.labelEnd, "aria-required": this.requiredField ? "true" : null }), index.h("div", { key: 'a3434b13ad539bed778bc337ed04adc30e9acc77', class: "toggle-wrapper", id: "toggle-wrapper" }, this.canOpen && (index.h("button", { key: '7b7beb9c5460609fe9cf5922b23d826c64b9f053', disabled: this.disabled, "aria-describedby": "start-date-input end-date-input", "aria-label": functions.intl.formatMessage({
|
|
545
545
|
id: "date.selectRange",
|
|
546
546
|
defaultMessage: "Select range",
|
|
547
547
|
description: "Button text for screen readers.",
|
|
548
|
-
}), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, index.h("span", { key: '
|
|
548
|
+
}), ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, index.h("span", { key: '7c04850bc3e4c29687f6875d1b77a6baa018fd50', class: "svg-icon svg-date" }), index.h("span", { key: '3abf1b41a3f3787c7e0f9573d092bbe5bbd55875', class: "calendar", title: functions.intl.formatMessage({
|
|
549
549
|
id: "date.calendarView",
|
|
550
550
|
defaultMessage: "Calendar View",
|
|
551
551
|
description: "Calendar button",
|
|
552
|
-
}) })))), index.h("div", { key: '
|
|
552
|
+
}) })))), index.h("div", { key: '3f9fe602f2efc97f6cf42c32dab36b42562304b0', class: `popup-wrapper popup-range ${this.startCalEl && this.startCalEl.view}-view ${this.isExpanded ? "is-open" : ""} ${!this.hasAnchor && !this.isExpanded ? "hidden" : ""} ${(_b = (_a = this.fit) === null || _a === void 0 ? void 0 : _a.vertical) !== null && _b !== void 0 ? _b : ""} ${(_d = (_c = this.fit) === null || _c === void 0 ? void 0 : _c.horizontal) !== null && _d !== void 0 ? _d : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), popover: "auto",
|
|
553
553
|
// @ts-ignore -- onToggle is a valid ToggleEvent listener for popover elements
|
|
554
|
-
onToggle: (ev) => this.handleToggle(ev) }, index.h("div", { key: '
|
|
554
|
+
onToggle: (ev) => this.handleToggle(ev) }, index.h("div", { key: '41e4eae0f64600b15b3f56e5002a898f3d8ee571', class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.endCalEl.focusLastFocusable() }), index.h("priv-calendar", { key: '207a8f831fa0ff6a7068ac86ba467935ad8cbd5b', ref: (el) => (this.startCalEl = el), onDateFocus: (ev) => this.handleDateFocus(ev) }), index.h("priv-calendar", { key: '05ed5b637ddaaf31658f3db71218098b8b251ae0', ref: (el) => (this.endCalEl = el), onDateFocus: (ev) => this.handleDateFocus(ev) }), index.h("div", { key: 'e2ccb7d837231b42b5464dca90ccbaa09f4484e5', class: "trapfocus", tabIndex: this.isExpanded ? 0 : undefined, onFocus: () => this.startCalEl.focusFirstFocusable() }))), index.h("div", { key: '4b8a0c9b7fceeb552ef3264203f875ec85bc9310' }, index.h("div", { key: '457fd174e68e80c707914c417b9def8e5be39920', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), index.h("div", { key: 'c3d4cb97f2686296956975eb0ece2a8204584b8e', id: "month-title", class: "sr-only" }, functions.intl.formatMessage({
|
|
555
555
|
id: "date.selectMonth",
|
|
556
556
|
defaultMessage: "Activate to select a month.",
|
|
557
557
|
description: "Calendar button",
|
|
558
|
-
})), index.h("div", { key: '
|
|
558
|
+
})), index.h("div", { key: 'fd5074de67b599f2773080314d82a260b8447113', id: "year-title", class: "sr-only" }, functions.intl.formatMessage({
|
|
559
559
|
id: "date.selectYear",
|
|
560
560
|
defaultMessage: "Activate to select a year.",
|
|
561
561
|
description: "Calendar button",
|
|
562
|
-
}))), index.h("div", { key: '
|
|
562
|
+
}))), index.h("div", { key: 'efdcc22aa520edec0a59ad6e76c16031d8077d67', id: "error", class: "error" }, this.errorMessage), index.h("span", { key: 'b91c95c15affe4885b41ccf088bb66b00ba881eb', id: "date-format-hint", class: "sr-only" }, this.dateFormat), index.h("div", { key: 'c925b59da3ac2557e796c29ecb35c2218b221f7c', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }))));
|
|
563
563
|
}
|
|
564
564
|
static get delegatesFocus() { return true; }
|
|
565
565
|
get el() { return index.getElement(this); }
|
|
@@ -202,7 +202,7 @@ const DatePicker = class {
|
|
|
202
202
|
}
|
|
203
203
|
this.fit = null;
|
|
204
204
|
this.isExpanded = false;
|
|
205
|
-
this.calEl.view = "
|
|
205
|
+
this.calEl.view = "month";
|
|
206
206
|
}
|
|
207
207
|
}
|
|
208
208
|
closePopup(returnFocus = false) {
|
|
@@ -340,25 +340,25 @@ const DatePicker = class {
|
|
|
340
340
|
}
|
|
341
341
|
render() {
|
|
342
342
|
var _a, _b, _c, _d;
|
|
343
|
-
return (index.h(index.Host, { key: '
|
|
343
|
+
return (index.h(index.Host, { key: 'a6bd8346b4de553102719cd281b9dc9413581aae', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: 'eaaf09c6388ac561f612af41cf0b3502b04094b0', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '4202ea43a96fb7c3b67d4454a3637bf616e332cd', class: "label-wrapper" }, this.labelPosition !== "none" && (index.h("label", { key: '42f8526f8fdb0028e24c514d42091c3fbf15ab60', id: "datepickerLabel", htmlFor: "date-input", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (index.h("div", { key: '88c138a04cc78bac4171fc6458ad9b00778bf490', "aria-hidden": "true", class: "required" }, "*"))), index.h("div", { key: 'de2d78696965e3a10ac3facbeca4a8b473245523' }, index.h("div", { key: '9039a74286b4aa7f1491c02eaab23b321a2aaa45', class: "single-wrapper input", ref: (el) => (this.anchorEl = el) }, index.h("input", { key: '944723e15f67dff099ac5c1f6f03263594300435', disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "date-format-hint error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), index.h("div", { key: '80ef67580f83dea80bcfc0d57391663e2727d33a', class: "container", id: "wm-container" }, this.canOpen && (index.h("button", { key: '730d2b56439354ce6232dc18d12c38bbc6790ed2', disabled: this.disabled, "aria-label": functions.intl.formatMessage({
|
|
344
344
|
id: "date.selectDate",
|
|
345
345
|
defaultMessage: "Select date",
|
|
346
346
|
description: "Button text for screen readers.",
|
|
347
|
-
}), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, index.h("span", { key: '
|
|
347
|
+
}), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle", popoverTarget: "popup-wrapper", popoverTargetAction: "toggle" }, index.h("span", { key: 'd9f4782bbaeea7dbb64c0215e835611f0eecd54a', class: "svg-icon svg-date" }), index.h("span", { key: '2c960fb463c77b71d213c864423869010996ccca', class: "calendar", title: functions.intl.formatMessage({
|
|
348
348
|
id: "date.calendarView",
|
|
349
349
|
defaultMessage: "Calendar View",
|
|
350
350
|
description: "Calendar button",
|
|
351
|
-
}) }))), index.h("div", { key: '
|
|
351
|
+
}) }))), index.h("div", { key: 'b8d9fc86ac97acc442ffd6f371470b883a75f6ea', class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.isExpanded ? "is-open" : ""} ${!this.hasAnchor && !this.isExpanded ? "hidden" : ""} ${(_b = (_a = this.fit) === null || _a === void 0 ? void 0 : _a.vertical) !== null && _b !== void 0 ? _b : ""} ${(_d = (_c = this.fit) === null || _c === void 0 ? void 0 : _c.horizontal) !== null && _d !== void 0 ? _d : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), popover: "auto",
|
|
352
352
|
// @ts-ignore -- onToggle is a valid ToggleEvent listener for popover elements
|
|
353
|
-
onToggle: (ev) => this.handleToggle(ev) }, index.h("div", { key: '
|
|
353
|
+
onToggle: (ev) => this.handleToggle(ev) }, index.h("div", { key: '9e18fa2cd6a00924d714f2fa943047d5f5c50d51', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), index.h("priv-calendar", { key: 'c7b713840961ab36cb158a28230278c92364efa1', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), index.h("div", { key: '64a58c7332b878d4b693a3eec5d07369b9fe43a3', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), index.h("div", { key: '1a6e1fc2010106fc59e8827df71a47f894d1fe0a', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), index.h("div", { key: '24b950499b627de0aa82893672a00596cca8362f', id: "month-title", class: "sr-only" }, functions.intl.formatMessage({
|
|
354
354
|
id: "date.selectMonth",
|
|
355
355
|
defaultMessage: "Activate to select a month.",
|
|
356
356
|
description: "Calendar button",
|
|
357
|
-
})), index.h("div", { key: '
|
|
357
|
+
})), index.h("div", { key: '59ab8ea5db5b823b74dfea8ed6fbcf6cf5665ae4', id: "year-title", class: "sr-only" }, functions.intl.formatMessage({
|
|
358
358
|
id: "date.selectYear",
|
|
359
359
|
defaultMessage: "Activate to select a year.",
|
|
360
360
|
description: "Calendar button",
|
|
361
|
-
})))), index.h("div", { key: '
|
|
361
|
+
})))), index.h("div", { key: '2b1cae481b68914f2b728080b3ca9efd44c7acde', id: "error", class: "error" }, this.errorMessage), index.h("span", { key: 'e9d5b6752fcff1f9352df2a7886ab1dbb14a3e5b', id: "date-format-hint", class: "sr-only" }, this.dateFormat), index.h("div", { key: '59c04dc077de5e9ac8da0ec7f03593778802260f', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
|
|
362
362
|
}
|
|
363
363
|
static get delegatesFocus() { return true; }
|
|
364
364
|
get el() { return index.getElement(this); }
|
|
@@ -256,7 +256,7 @@ const Navigator = class {
|
|
|
256
256
|
name = product.name;
|
|
257
257
|
icon = product.iconUrl;
|
|
258
258
|
clickRedirect = this.setProductOnClick(product.id);
|
|
259
|
-
if (!!name && !!icon) {
|
|
259
|
+
if (!!name && !!icon && this.isSafeUrl(icon)) {
|
|
260
260
|
isSelected = this.currentProductId === product.id;
|
|
261
261
|
return (index.h("priv-navigator-item", { selected: isSelected, id: product.id, onClick: () => {
|
|
262
262
|
isSelected ? this.closeMenu() : clickRedirect();
|
|
@@ -1088,28 +1088,28 @@
|
|
|
1088
1088
|
min-width: 1px;
|
|
1089
1089
|
background: var(--wm-color-border);
|
|
1090
1090
|
}
|
|
1091
|
-
.popup-wrapper .
|
|
1091
|
+
.popup-wrapper .month-view {
|
|
1092
1092
|
min-width: 21rem;
|
|
1093
1093
|
}
|
|
1094
|
-
.popup-wrapper .
|
|
1094
|
+
.popup-wrapper .month-view .date-grid {
|
|
1095
1095
|
width: 100%;
|
|
1096
1096
|
text-align: center;
|
|
1097
1097
|
border-collapse: collapse;
|
|
1098
1098
|
margin-bottom: 0.4375rem;
|
|
1099
1099
|
color: var(--wmcolor-datepicker-day-text);
|
|
1100
1100
|
}
|
|
1101
|
-
.popup-wrapper .
|
|
1101
|
+
.popup-wrapper .month-view .date-grid div[role=row] {
|
|
1102
1102
|
display: flex;
|
|
1103
1103
|
justify-content: space-around;
|
|
1104
1104
|
padding-inline: 0.875rem;
|
|
1105
1105
|
}
|
|
1106
|
-
.popup-wrapper .
|
|
1106
|
+
.popup-wrapper .month-view .date-grid div[role=row]:not(.header-row) {
|
|
1107
1107
|
height: 2.75rem;
|
|
1108
1108
|
}
|
|
1109
|
-
.popup-wrapper .
|
|
1109
|
+
.popup-wrapper .month-view .date-grid .date-header {
|
|
1110
1110
|
background-color: var(--wmcolor-datepicker-weekdays-background);
|
|
1111
1111
|
}
|
|
1112
|
-
.popup-wrapper .
|
|
1112
|
+
.popup-wrapper .month-view .date-grid .header-cell {
|
|
1113
1113
|
height: 2.0625rem;
|
|
1114
1114
|
line-height: 2.0625rem;
|
|
1115
1115
|
width: 2.75rem;
|
|
@@ -1121,7 +1121,7 @@
|
|
|
1121
1121
|
color: var(--wmcolor-datepicker-weekdays-text);
|
|
1122
1122
|
border: none;
|
|
1123
1123
|
}
|
|
1124
|
-
.popup-wrapper .
|
|
1124
|
+
.popup-wrapper .month-view .date-grid [role=gridcell] {
|
|
1125
1125
|
padding: 0;
|
|
1126
1126
|
-webkit-border-radius: 50%;
|
|
1127
1127
|
-moz-border-radius: 50%;
|
|
@@ -1136,102 +1136,102 @@
|
|
|
1136
1136
|
align-items: center;
|
|
1137
1137
|
justify-content: center;
|
|
1138
1138
|
}
|
|
1139
|
-
.popup-wrapper .
|
|
1139
|
+
.popup-wrapper .month-view .date-grid .date-cell {
|
|
1140
1140
|
cursor: pointer;
|
|
1141
1141
|
}
|
|
1142
|
-
.popup-wrapper .
|
|
1142
|
+
.popup-wrapper .month-view .date-grid .date-cell:hover {
|
|
1143
1143
|
background-color: var(--wmcolor-datepicker-day-background-hover);
|
|
1144
1144
|
}
|
|
1145
|
-
.popup-wrapper .
|
|
1145
|
+
.popup-wrapper .month-view .date-grid .date-cell[aria-selected=true] {
|
|
1146
1146
|
background-color: var(--wmcolor-datepicker-day-background-selected);
|
|
1147
1147
|
color: var(--wmcolor-datepicker-day-text-selected);
|
|
1148
1148
|
}
|
|
1149
|
-
.popup-wrapper .
|
|
1149
|
+
.popup-wrapper .month-view .date-grid .date-cell.in-range {
|
|
1150
1150
|
background: var(--range-background-selected);
|
|
1151
1151
|
border-radius: 0;
|
|
1152
1152
|
}
|
|
1153
|
-
.popup-wrapper .
|
|
1153
|
+
.popup-wrapper .month-view .date-grid .date-cell.in-range.range-start:not(.preview):hover {
|
|
1154
1154
|
background-repeat: no-repeat;
|
|
1155
1155
|
background-position: center, center left 17px;
|
|
1156
1156
|
}
|
|
1157
|
-
.popup-wrapper .
|
|
1157
|
+
.popup-wrapper .month-view .date-grid .date-cell.in-range.range-end:not(.preview):hover {
|
|
1158
1158
|
background-position: center, center right 17px;
|
|
1159
1159
|
background-repeat: no-repeat;
|
|
1160
1160
|
}
|
|
1161
|
-
.popup-wrapper .
|
|
1161
|
+
.popup-wrapper .month-view .date-grid .date-cell.in-range:not(.preview):hover {
|
|
1162
1162
|
background-image: radial-gradient(#dbd9ef 20px, transparent 21px), var(--range-background-selected);
|
|
1163
1163
|
color: var(--wmcolor-datepicker-day-text);
|
|
1164
1164
|
}
|
|
1165
|
-
.popup-wrapper .
|
|
1165
|
+
.popup-wrapper .month-view .date-grid .date-cell.in-range.preview {
|
|
1166
1166
|
position: relative;
|
|
1167
1167
|
background-image: var(--range-background-hover);
|
|
1168
1168
|
}
|
|
1169
|
-
.popup-wrapper .
|
|
1169
|
+
.popup-wrapper .month-view .date-grid .date-cell.in-range.preview:last-child:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .month-view .date-grid .date-cell.in-range.preview:last-of-type:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .month-view .date-grid .date-cell.in-range.preview:first-child:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .month-view .date-grid .date-cell.in-range.preview:first-of-type:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .month-view .date-grid .date-cell.in-range.preview.last-of-month:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .month-view .date-grid .date-cell.in-range.preview.first-of-month:not(.preview-start, .preview-end, .range-start, .range-end) {
|
|
1170
1170
|
background-image: radial-gradient(var(--wmcolor-datepicker-range-background-hover) 16px, transparent 17px), var(--range-background-hover);
|
|
1171
1171
|
background-repeat: no-repeat;
|
|
1172
1172
|
}
|
|
1173
|
-
.popup-wrapper .
|
|
1173
|
+
.popup-wrapper .month-view .date-grid .date-cell.in-range.preview:first-child:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .month-view .date-grid .date-cell.in-range.preview:first-of-type:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .month-view .date-grid .date-cell.in-range.preview.first-of-month:not(.preview-start, .preview-end, .range-start, .range-end) {
|
|
1174
1174
|
background-position: center left -5px, center left 17px;
|
|
1175
1175
|
}
|
|
1176
|
-
.popup-wrapper .
|
|
1176
|
+
.popup-wrapper .month-view .date-grid .date-cell.in-range.preview:last-child:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .month-view .date-grid .date-cell.in-range.preview:last-of-type:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .month-view .date-grid .date-cell.in-range.preview.last-of-month:not(.preview-start, .preview-end, .range-start, .range-end) {
|
|
1177
1177
|
background-position: center right -5px, center right 17px;
|
|
1178
1178
|
}
|
|
1179
|
-
.popup-wrapper .
|
|
1179
|
+
.popup-wrapper .month-view .date-grid .date-cell.in-range.preview.last-of-month:first-child:not(.preview-start, .preview-end) {
|
|
1180
1180
|
background-image: radial-gradient(var(--wmcolor-datepicker-range-background-hover) 16px, transparent 17px), radial-gradient(var(--wmcolor-datepicker-range-background-hover) 16px, transparent 17px), linear-gradient(transparent, transparent 15px, var(--wmcolor-datepicker-range-background-hover) 15px, var(--wmcolor-datepicker-range-background-hover) 29px, transparent 29px);
|
|
1181
1181
|
background-position: center left -5px, center right -5px, center;
|
|
1182
1182
|
background-size: auto, auto, 9px;
|
|
1183
1183
|
}
|
|
1184
|
-
.popup-wrapper .
|
|
1184
|
+
.popup-wrapper .month-view .date-grid .date-cell.in-range.preview-start:last-child, .popup-wrapper .month-view .date-grid .date-cell.in-range.preview-end:first-child {
|
|
1185
1185
|
background-image: radial-gradient(var(--wmcolor-datepicker-range-background-hover) 17px, var(--wmcolor-calendar-day-border-hover) 18px, var(--wmcolor-calendar-day-border-hover) 20px, transparent 21px);
|
|
1186
1186
|
}
|
|
1187
|
-
.popup-wrapper .
|
|
1187
|
+
.popup-wrapper .month-view .date-grid .date-cell.in-range.preview-start {
|
|
1188
1188
|
background-position: center, center left 17px;
|
|
1189
1189
|
background-repeat: no-repeat;
|
|
1190
1190
|
}
|
|
1191
|
-
.popup-wrapper .
|
|
1191
|
+
.popup-wrapper .month-view .date-grid .date-cell.in-range.preview-start:first-child {
|
|
1192
1192
|
background-position: center, center left 17px;
|
|
1193
1193
|
background-repeat: no-repeat;
|
|
1194
1194
|
}
|
|
1195
|
-
.popup-wrapper .
|
|
1195
|
+
.popup-wrapper .month-view .date-grid .date-cell.in-range.preview-end {
|
|
1196
1196
|
background-position: center, center right 17px;
|
|
1197
1197
|
background-repeat: no-repeat;
|
|
1198
1198
|
}
|
|
1199
|
-
.popup-wrapper .
|
|
1199
|
+
.popup-wrapper .month-view .date-grid .date-cell.in-range.preview-end:last-child {
|
|
1200
1200
|
background-position: center, center right 17px;
|
|
1201
1201
|
background-repeat: no-repeat;
|
|
1202
1202
|
}
|
|
1203
|
-
.popup-wrapper .
|
|
1203
|
+
.popup-wrapper .month-view .date-grid .date-cell.in-range.preview-end, .popup-wrapper .month-view .date-grid .date-cell.in-range.preview-start {
|
|
1204
1204
|
background-image: radial-gradient(var(--wmcolor-datepicker-range-background-hover) 17px, var(--wmcolor-calendar-day-border-hover) 18px, var(--wmcolor-calendar-day-border-hover) 20px, transparent 21px), var(--range-background-hover);
|
|
1205
1205
|
}
|
|
1206
|
-
.popup-wrapper .
|
|
1206
|
+
.popup-wrapper .month-view .date-grid .date-cell.in-range.preview-end:focus-visible, .popup-wrapper .month-view .date-grid .date-cell.in-range.preview-start:focus-visible {
|
|
1207
1207
|
outline: none;
|
|
1208
1208
|
border: none;
|
|
1209
1209
|
}
|
|
1210
|
-
.popup-wrapper .
|
|
1210
|
+
.popup-wrapper .month-view .date-grid .date-cell.in-range:first-of-type:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .month-view .date-grid .date-cell.in-range:first-child:not(.preview-start, .preview-end, .range-start, .range-end), .popup-wrapper .month-view .date-grid .date-cell.in-range.first-of-month:not(.preview-start, .preview-end, .range-start, .range-end) {
|
|
1211
1211
|
background-image: radial-gradient(var(--wmcolor-datepicker-range-background-selected) 16px, transparent 17px), var(--range-background-selected);
|
|
1212
1212
|
background-position: -5px center, center left 17px;
|
|
1213
1213
|
background-repeat: no-repeat;
|
|
1214
1214
|
}
|
|
1215
|
-
.popup-wrapper .
|
|
1215
|
+
.popup-wrapper .month-view .date-grid .date-cell.in-range:first-of-type:not(.preview-start, .preview-end, .range-start, .range-end):hover, .popup-wrapper .month-view .date-grid .date-cell.in-range:first-child:not(.preview-start, .preview-end, .range-start, .range-end):hover, .popup-wrapper .month-view .date-grid .date-cell.in-range.first-of-month:not(.preview-start, .preview-end, .range-start, .range-end):hover {
|
|
1216
1216
|
background-image: radial-gradient(#dbd9ef 20px, transparent 21px), radial-gradient(var(--wmcolor-datepicker-range-background-selected) 16px, transparent 17px), var(--range-background-selected);
|
|
1217
1217
|
background-position: center, -5px center, center left 17px;
|
|
1218
1218
|
background-repeat: no-repeat;
|
|
1219
1219
|
}
|
|
1220
|
-
.popup-wrapper .
|
|
1220
|
+
.popup-wrapper .month-view .date-grid .date-cell.in-range.range-start:last-child:hover, .popup-wrapper .month-view .date-grid .date-cell.in-range.range-end:first-child:hover {
|
|
1221
1221
|
background: radial-gradient(#dbd9ef 20px, transparent 21px);
|
|
1222
1222
|
background-position: center;
|
|
1223
1223
|
}
|
|
1224
|
-
.popup-wrapper .
|
|
1224
|
+
.popup-wrapper .month-view .date-grid .date-cell.in-range:last-of-type:not(.range-start, .range-end, .preview), .popup-wrapper .month-view .date-grid .date-cell.in-range:last-child:not(.range-start, .range-end, .preview), .popup-wrapper .month-view .date-grid .date-cell.in-range.last-of-month:not(.range-start, .range-end, .preview) {
|
|
1225
1225
|
background: radial-gradient(var(--wmcolor-datepicker-range-background-selected) 16px, transparent 17px), var(--range-background-selected);
|
|
1226
1226
|
background-position: 5px center, center right 17px;
|
|
1227
1227
|
background-repeat: no-repeat;
|
|
1228
1228
|
}
|
|
1229
|
-
.popup-wrapper .
|
|
1229
|
+
.popup-wrapper .month-view .date-grid .date-cell.in-range:last-of-type:not(.range-start, .range-end, .preview-start, .preview-end):hover, .popup-wrapper .month-view .date-grid .date-cell.in-range:last-child:not(.range-start, .range-end, .preview-start, .preview-end):hover, .popup-wrapper .month-view .date-grid .date-cell.in-range.last-of-month:not(.range-start, .range-end, .preview-start, .preview-end):hover {
|
|
1230
1230
|
background-image: radial-gradient(#dbd9ef 20px, transparent 21px), radial-gradient(var(--wmcolor-datepicker-range-background-selected) 16px, transparent 17px), var(--range-background-selected);
|
|
1231
1231
|
background-position: center, 5px center, center right 17px;
|
|
1232
1232
|
background-repeat: no-repeat;
|
|
1233
1233
|
}
|
|
1234
|
-
.popup-wrapper .
|
|
1234
|
+
.popup-wrapper .month-view .date-grid .date-cell.today:after {
|
|
1235
1235
|
content: "";
|
|
1236
1236
|
display: block;
|
|
1237
1237
|
position: absolute;
|
|
@@ -1243,54 +1243,54 @@
|
|
|
1243
1243
|
background-color: var(--wmcolor-datepicker-day-background-selected);
|
|
1244
1244
|
margin: auto;
|
|
1245
1245
|
}
|
|
1246
|
-
.popup-wrapper .
|
|
1246
|
+
.popup-wrapper .month-view .date-grid .date-cell.range-start, .popup-wrapper .month-view .date-grid .date-cell.range-end {
|
|
1247
1247
|
border-radius: 0;
|
|
1248
1248
|
margin: 0;
|
|
1249
1249
|
outline: none;
|
|
1250
1250
|
font-weight: 600;
|
|
1251
1251
|
color: var(--wmcolor-datepicker-day-text-selected);
|
|
1252
1252
|
}
|
|
1253
|
-
.popup-wrapper .
|
|
1253
|
+
.popup-wrapper .month-view .date-grid .date-cell.range-start:focus-visible, .popup-wrapper .month-view .date-grid .date-cell.range-end:focus-visible {
|
|
1254
1254
|
outline: 3px solid var(--wmcolor-interactive-focus);
|
|
1255
1255
|
outline-offset: -2px;
|
|
1256
1256
|
border: none;
|
|
1257
1257
|
z-index: 11;
|
|
1258
1258
|
}
|
|
1259
|
-
.popup-wrapper .
|
|
1259
|
+
.popup-wrapper .month-view .date-grid .date-cell.range-start:focus-visible[aria-selected=true], .popup-wrapper .month-view .date-grid .date-cell.range-end:focus-visible[aria-selected=true] {
|
|
1260
1260
|
outline-offset: 2px;
|
|
1261
1261
|
}
|
|
1262
|
-
.popup-wrapper .
|
|
1262
|
+
.popup-wrapper .month-view .date-grid .date-cell.range-start {
|
|
1263
1263
|
background-image: var(--range-start-svg);
|
|
1264
1264
|
padding-inline-end: 2px;
|
|
1265
1265
|
background-color: transparent;
|
|
1266
1266
|
}
|
|
1267
|
-
.popup-wrapper .
|
|
1267
|
+
.popup-wrapper .month-view .date-grid .date-cell.range-start.in-range:not(:hover, :last-of-type, :last-child) {
|
|
1268
1268
|
background-image: var(--range-start-svg), var(--range-background-selected);
|
|
1269
1269
|
border-radius: 0;
|
|
1270
1270
|
}
|
|
1271
|
-
.popup-wrapper .
|
|
1271
|
+
.popup-wrapper .month-view .date-grid .date-cell.range-start.in-range.preview:not(:last-of-type, :last-child) {
|
|
1272
1272
|
background-image: var(--range-start-svg), var(--range-background-hover);
|
|
1273
1273
|
}
|
|
1274
|
-
.popup-wrapper .
|
|
1274
|
+
.popup-wrapper .month-view .date-grid .date-cell.range-end {
|
|
1275
1275
|
background-image: var(--range-end-svg);
|
|
1276
1276
|
padding-inline-start: 2px;
|
|
1277
1277
|
background-color: transparent;
|
|
1278
1278
|
}
|
|
1279
|
-
.popup-wrapper .
|
|
1279
|
+
.popup-wrapper .month-view .date-grid .date-cell.range-end.in-range:not(:hover, :first-of-type, :first-child) {
|
|
1280
1280
|
background-image: var(--range-end-svg), var(--range-background-selected);
|
|
1281
1281
|
border-radius: 0;
|
|
1282
1282
|
}
|
|
1283
|
-
.popup-wrapper .
|
|
1283
|
+
.popup-wrapper .month-view .date-grid .date-cell.range-end.in-range.preview:not(:first-of-type, :first-child) {
|
|
1284
1284
|
background-image: var(--range-end-svg), var(--range-background-hover);
|
|
1285
1285
|
}
|
|
1286
|
-
.popup-wrapper .
|
|
1286
|
+
.popup-wrapper .month-view .date-grid .date-cell.range-start.range-end {
|
|
1287
1287
|
background: var(--wmcolor-datepicker-day-background-selected);
|
|
1288
1288
|
border-radius: 50%;
|
|
1289
1289
|
padding-inline: 0;
|
|
1290
1290
|
margin: 1px;
|
|
1291
1291
|
flex-basis: 42px;
|
|
1292
1292
|
}
|
|
1293
|
-
.popup-wrapper .
|
|
1293
|
+
.popup-wrapper .year-view .months {
|
|
1294
1294
|
display: -webkit-box;
|
|
1295
1295
|
display: -webkit-flex;
|
|
1296
1296
|
display: -ms-flexbox;
|
|
@@ -1302,7 +1302,7 @@
|
|
|
1302
1302
|
border-bottom: 0.125rem solid;
|
|
1303
1303
|
border-color: transparent;
|
|
1304
1304
|
}
|
|
1305
|
-
.popup-wrapper .
|
|
1305
|
+
.popup-wrapper .year-view .month-row {
|
|
1306
1306
|
display: -webkit-box;
|
|
1307
1307
|
display: -webkit-flex;
|
|
1308
1308
|
display: -ms-flexbox;
|
|
@@ -1314,7 +1314,7 @@
|
|
|
1314
1314
|
width: 100%;
|
|
1315
1315
|
gap: 0.125rem;
|
|
1316
1316
|
}
|
|
1317
|
-
.popup-wrapper .
|
|
1317
|
+
.popup-wrapper .year-view .month {
|
|
1318
1318
|
border: none;
|
|
1319
1319
|
background: white;
|
|
1320
1320
|
cursor: pointer;
|
|
@@ -1325,10 +1325,10 @@
|
|
|
1325
1325
|
font-weight: 500;
|
|
1326
1326
|
color: var(--wmcolor-datepicker-month-text);
|
|
1327
1327
|
}
|
|
1328
|
-
.popup-wrapper .
|
|
1328
|
+
.popup-wrapper .year-view .month:hover {
|
|
1329
1329
|
background-color: var(--wmcolor-datepicker-month-background-hover);
|
|
1330
1330
|
}
|
|
1331
|
-
.popup-wrapper .
|
|
1331
|
+
.popup-wrapper .year-view .month:active, .popup-wrapper .year-view .month.selected {
|
|
1332
1332
|
background-color: var(--wmcolor-datepicker-month-background-selected);
|
|
1333
1333
|
color: var(--wmcolor-datepicker-month-text-selected);
|
|
1334
1334
|
}
|