@ed.yakovich/component-library 0.0.13 → 0.0.15
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/components/InfoBanner/index.js +1 -1
- package/dist/index-44540db3-BN5vFHKr.js +44 -0
- package/dist/index-4d46d9ca-BtyZMEt1.js +12 -0
- package/dist/index-D9BZSjMp.js +21158 -0
- package/dist/{index-0d8e0844-BJzWsYCM.js → index-ba31999b-V1s4iffq.js} +2490 -2442
- package/dist/{index.esm-322571ff-D1REhsOg.js → index.esm-a7c99373-DUoLYEEM.js} +1 -1
- package/dist/main.js +1 -1
- package/dist/prism-accordion.entry-D4g7wdXB.js +51 -0
- package/dist/prism-avatar_3.entry-C1H9bg9y.js +335 -0
- package/dist/prism-badge.entry-CWLalQsR.js +56 -0
- package/dist/prism-banner.entry-D1sce4tY.js +105 -0
- package/dist/prism-breadcrumb.entry-C282yHQl.js +33 -0
- package/dist/prism-button_3.entry-DIg1AEXF.js +240 -0
- package/dist/prism-card.entry-DaxGD-uX.js +152 -0
- package/dist/prism-carousel.entry-BGmaoDVM.js +3346 -0
- package/dist/prism-checkbox-group.entry-Dwa_mvjd.js +62 -0
- package/dist/prism-checkbox.entry-CZvx2AHI.js +116 -0
- package/dist/prism-data-table.entry-DACAS8BE.js +3591 -0
- package/dist/prism-datepicker.entry-CHUyjilE.js +279 -0
- package/dist/prism-dialog.entry-DdO9Kt32.js +73 -0
- package/dist/prism-drawer.entry-Dn0rvW9U.js +43 -0
- package/dist/{prism-form.entry-BJl2ma6x.js → prism-form.entry-C8VzGp6c.js} +11 -11
- package/dist/prism-header.entry-D0PypuC3.js +227 -0
- package/dist/prism-hero.entry-DQ8G7Jb_.js +23 -0
- package/dist/prism-image.entry-tx9Pc3k_.js +38 -0
- package/dist/prism-input-file.entry-CO-2LZxG.js +119 -0
- package/dist/prism-input-otp.entry-ZAxExI2D.js +79 -0
- package/dist/prism-input-text.entry-EXsN4rgi.js +278 -0
- package/dist/prism-input-textarea.entry-CRqY4mr9.js +145 -0
- package/dist/prism-input-time.entry-BJ9he6MX.js +85 -0
- package/dist/prism-layout.entry-ulDWjtj8.js +20 -0
- package/dist/prism-lineitem.entry-DJk6X6mR.js +47 -0
- package/dist/prism-modal.entry-C795YZic.js +95 -0
- package/dist/prism-pagination.entry-DYQieAu3.js +69 -0
- package/dist/prism-popover.entry-BgLcACZw.js +1114 -0
- package/dist/prism-progress.entry-Z21rpoTm.js +79 -0
- package/dist/prism-radio_2.entry-C0HPCb3G.js +159 -0
- package/dist/prism-select.entry-B_l-ab1d.js +286 -0
- package/dist/prism-switch.entry-OkC8X1bD.js +95 -0
- package/dist/prism-tab.entry-szftB_wL.js +20 -0
- package/dist/prism-tabs.entry-0UR3WF52.js +72 -0
- package/dist/prism-text.entry-BEAZ8xEV.js +28 -0
- package/dist/prism-treelist.entry-UX4FM4Bi.js +135 -0
- package/dist/prism-typeahead.entry-CwOiAFQE.js +1264 -0
- package/dist/purify-9647b094-0-ZyuBNz.js +572 -0
- package/package.json +2 -2
- package/dist/index-By9FNwDt.js +0 -29159
- package/dist/index-b30029d4-WVn-64c9.js +0 -12
- package/dist/index-e6818ded-r_t6ryaW.js +0 -57
- package/dist/prism-accordion.entry-Cx9R3pGR.js +0 -51
- package/dist/prism-avatar_2.entry-BYgG-lCw.js +0 -68
- package/dist/prism-badge.entry-7tkOjkOC.js +0 -58
- package/dist/prism-banner.entry-jfMhWTJ-.js +0 -82
- package/dist/prism-breadcrumb.entry-6BKiTFvg.js +0 -33
- package/dist/prism-button_2.entry-DnnPRWBp.js +0 -110
- package/dist/prism-card.entry-CkJQnJF8.js +0 -119
- package/dist/prism-carousel.entry-CjyHpSoz.js +0 -3111
- package/dist/prism-checkbox-group.entry-h68bFMNT.js +0 -62
- package/dist/prism-checkbox.entry-BnqA0ld6.js +0 -99
- package/dist/prism-data-table.entry-CRJbrNmp.js +0 -10475
- package/dist/prism-datepicker.entry-Xu0QUY2Q.js +0 -249
- package/dist/prism-grid.entry-DIdkZa73.js +0 -28
- package/dist/prism-header.entry-BZVXHBCx.js +0 -202
- package/dist/prism-hero.entry-D6vT9Cfs.js +0 -23
- package/dist/prism-icon_2.entry-u0DT931p.js +0 -118
- package/dist/prism-image.entry-Db2L08jh.js +0 -38
- package/dist/prism-input-file.entry-NMZff8Re.js +0 -119
- package/dist/prism-input-otp.entry-qFelMElv.js +0 -63
- package/dist/prism-input-text.entry-YbQ3NQuB.js +0 -228
- package/dist/prism-input-textarea.entry-Bz7ecyna.js +0 -140
- package/dist/prism-layout.entry-DVLlE1S8.js +0 -20
- package/dist/prism-lineitem.entry-BOUyDMlc.js +0 -44
- package/dist/prism-menu.entry-TqJabKKs.js +0 -231
- package/dist/prism-modal.entry-CiIsey_Y.js +0 -94
- package/dist/prism-pagination.entry-BZOMunz-.js +0 -60
- package/dist/prism-popover.entry-Bt1uXSV9.js +0 -1013
- package/dist/prism-popper.entry-Ck2qBmqM.js +0 -959
- package/dist/prism-progress.entry-DobqcGx4.js +0 -79
- package/dist/prism-radio-group.entry-DTVEUN2r.js +0 -66
- package/dist/prism-radio.entry-D0dGSQn2.js +0 -101
- package/dist/prism-select.entry-CRYklxK0.js +0 -230
- package/dist/prism-switch.entry-CINfgY_6.js +0 -95
- package/dist/prism-tab.entry-dV7AljQC.js +0 -20
- package/dist/prism-tabs.entry-DPc_2ypT.js +0 -70
- package/dist/prism-tooltip.entry-DZJ2tfFV.js +0 -52
- package/dist/prism-typeahead.entry-DDkmHo72.js +0 -1234
|
@@ -0,0 +1,279 @@
|
|
|
1
|
+
import { r as F, c as E, h as a, F as w, H as z, g as C } from "./index-D9BZSjMp.js";
|
|
2
|
+
import { d as e } from "./index-ba31999b-V1s4iffq.js";
|
|
3
|
+
import { g as I, a as T, m as V } from "./index-44540db3-BN5vFHKr.js";
|
|
4
|
+
/*!
|
|
5
|
+
* Copyright (c) 2025 Comcast. Prism UI - v8.28.0 - made with ❤️ in Philadelphia
|
|
6
|
+
*/
|
|
7
|
+
const $ = '.sc-prism-datepicker-h{display:block;position:relative}.screen-reader-text.sc-prism-datepicker{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.calendar-header.sc-prism-datepicker{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--prism-spacer-size-lg)}.calendar-container.sc-prism-datepicker{background-color:var(--prism-color-material-primary-base);border:1px solid color-mix(in srgb,var(--prism-color-material-primary-base) var(--prism-alpha-tertiary-percentage),transparent);border-radius:var(--prism-radius-size-sm);box-shadow:var(--prism-shadow-xs-down);left:0;padding:var(--prism-spacer-size-3xl);position:absolute;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:var(--prism-layout-z-index-dropdown)}.calendar-container.inline.sc-prism-datepicker{display:block;position:static;z-index:var(--prism-layout-z-index-base)}.calendar-input.sc-prism-datepicker{--prism-input-text-spacing-margin:0 0 var(--prism-spacer-size-lg) 0}.collapsed.sc-prism-datepicker{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.calendar-row.sc-prism-datepicker{display:flex;flex-direction:row;gap:var(--prism-spacer-size-xl)}.calendar-day-title.sc-prism-datepicker{color:var(--prism-color-text-secondary-base)}.calendar-day-title.sc-prism-datepicker,.day.sc-prism-datepicker{align-items:center;display:flex;flex:1 1 auto;height:var(--prism-spacer-size-4xl);justify-content:center}.special-date.sc-prism-datepicker{flex-direction:column}.calendar-week-container.sc-prism-datepicker,.calendar-weekdays.sc-prism-datepicker{display:grid;grid-template-columns:repeat(7,var(--prism-spacer-size-4xl))}.calendar-weekdays.sc-prism-datepicker{height:var(--prism-spacer-size-4xl)}.legend-container.sc-prism-datepicker{-moz-column-gap:.75rem;column-gap:.75rem;display:grid;grid-template-columns:repeat(3,minmax(0,-webkit-max-content));grid-template-columns:repeat(3,minmax(0,max-content))}.calendar-footer.sc-prism-datepicker,.legend-container.sc-prism-datepicker{margin-top:var(--prism-spacer-size-sm);padding-left:var(--prism-spacer-size-sm);padding-right:var(--prism-spacer-size-sm)}.calendar-footer.sc-prism-datepicker{display:flex;justify-content:space-between}.day.sc-prism-datepicker{border-color:transparent;border-radius:var(--prism-radius-size-full);border-width:2px;color:var(--prism-color-text-secondary-base);height:var(--prism-spacer-size-4xl);transition:all var(--prism-animation-duration-normal) var(--prism-animation-timing-function);width:var(--prism-spacer-size-4xl)}.day.sc-prism-datepicker:focus{background-color:var(--prism-color-material-primary-base);border-color:var(--prism-color-border-brand-primary-focus);color:var(--prism-color-text-primary-base);outline:2px solid transparent;outline-offset:2px}.day.sc-prism-datepicker:disabled{color:var(--prism-color-text-primary-disabled)}.day.sc-prism-datepicker:not(.selected-day):not(.selected-end-day):not(.today):not([disabled]):hover,.today.sc-prism-datepicker:not(.range-selected){background-color:var(--prism-color-material-primary-hover)}.today.sc-prism-datepicker:not(.range-selected){border:1px solid var(--prism-color-border-primary-base);color:var(--prism-color-text-primary-base)}.today.sc-prism-datepicker:not(.range-selected):hover{background-color:var(--prism-color-material-brand-primary-hover);color:var(--prism-color-text-primary-base)}.today.sc-prism-datepicker:not(.range-selected):focus{border:2px solid var(--prism-color-border-brand-primary-focus);color:var(--prism-color-text-primary-base)}.today.sc-prism-datepicker:disabled{border-color:var(--prism-color-border-primary-disabled);color:var(--prism-color-text-primary-disabled);cursor:not-allowed;pointer-events:none}.range-selected.today.sc-prism-datepicker:before{border:1px solid color-mix(in srgb,var(--prism-color-border-brand-primary-base) var(--prism-alpha-tertiary-percentage),transparent);border-radius:var(--prism-radius-size-full);content:"";height:var(--prism-spacer-size-4xl);position:absolute;width:var(--prism-spacer-size-4xl)}button.selected-day.sc-prism-datepicker,button.selected-end-day.sc-prism-datepicker{background-color:var(--prism-color-fill-brand-primary-base);color:var(--prism-color-text-primary-inverse-base)}span.range-selected.sc-prism-datepicker:not(.selected-day):not(.selected-end-day){background-color:var(--prism-color-material-brand-primary-base)}.range-selected.day.sc-prism-datepicker:focus{background-color:var(--prism-color-fill-brand-primary-focus);border-color:var(--prism-color-border-brand-primary-focus);border-radius:var(--prism-radius-size-full);color:var(--prism-color-text-primary-inverse-focus);outline:2px solid transparent;outline-offset:2px}span.range-selected.selected-day.sc-prism-datepicker:not(.selected-end-day){background:linear-gradient(270deg,var(--prism-color-material-brand-primary-base) 50%,transparent 50%)}span.range-selected.selected-end-day.sc-prism-datepicker:not(.selected-day){background:linear-gradient(90deg,var(--prism-color-material-brand-primary-base) 50%,transparent 50%)}.input-container.sc-prism-datepicker{-moz-column-gap:var(--prism-spacer-size-lg);column-gap:var(--prism-spacer-size-lg);display:flex}.second-month.sc-prism-datepicker{display:none}.heading-spacer.sc-prism-datepicker{display:none}@media (min-width:768px){.second-month.sc-prism-datepicker{display:block}.heading-spacer.sc-prism-datepicker{display:block;width:4rem}}', L = $, U = class {
|
|
8
|
+
constructor(f) {
|
|
9
|
+
F(this, f), this.prismChange = E(this, "prismChange", 7), this.prismClick = E(this, "prismClick", 7), this.prismBlur = E(this, "prismBlur", 7);
|
|
10
|
+
var y;
|
|
11
|
+
this.uid = I(), this._todayElement = void 0, this.valuePattern = "^(0[1-9]|1[012])/(0[1-9]|[12][0-9]|3[01])/(19|20)dd$", this.rangeValuePatten = `${this.valuePattern} ${this.rangeDelimiter} ${this.valuePattern}`, this.setSelectedFromValue = () => {
|
|
12
|
+
this.value !== "" && Number.isInteger(Number(this.value)) && (this.value = e.format(e.startOfDay(parseFloat(this.value)), this.dateFormat));
|
|
13
|
+
let t = this.value.matchAll(new RegExp(this.valuePattern, "g"));
|
|
14
|
+
if (!this.range && this.value && t && t !== null || this.range && t && t !== null)
|
|
15
|
+
if (this.range) {
|
|
16
|
+
const [i, s] = this.value.split(` ${this.rangeDelimiter} `).map((r) => e.startOfDay(new Date(r)));
|
|
17
|
+
(e.isSameDay(i, s) || e.isAfter(s, i)) && (this.selectedDate = i, this.selectedEndDate = s, this.clearedValue = !1), this.selectedFullDate = `${e.format(this.selectedDate, this.dateFormat)} ${this.rangeDelimiter} ${e.format(this.selectedEndDate, this.dateFormat)}`;
|
|
18
|
+
} else
|
|
19
|
+
this.selectedDate = e.startOfDay(new Date(this.value)), this.selectedFullDate = e.format(this.selectedDate, this.dateFormat), this.clearedValue = !1;
|
|
20
|
+
else
|
|
21
|
+
this.clearedValue = !0;
|
|
22
|
+
}, this.getHeader = (t = !1) => a("div", { class: { "calendar-header": !0, range: this.range } }, a("prism-button", { ref: (i) => this.previousMonthElement = i, display: "ghost-icon", size: "xs", label: "previous month", onPrismClick: () => this.activeDate = e.subMonths(this.activeDate, 1) }, a("prism-icon", { display: "outline", name: "caret_left_list" })), a("prism-text", { family: "headline", size: "100" }, e.format(this.activeDate, "MMMM yyyy")), t && a(w, null, a("span", { class: "heading-spacer" }), a("prism-text", { family: "headline", size: "100", class: { "second-month": !0 } }, e.format(e.addMonths(this.activeDate, 1), "MMMM yyyy"))), a("prism-button", { label: "next month", display: "ghost-icon", size: "xs", onPrismClick: () => this.activeDate = e.addMonths(this.activeDate, 1) }, a("prism-icon", { display: "outline", name: "caret_right_list" }))), this.getWeekDaysNames = (t = 0) => {
|
|
23
|
+
const i = e.startOfWeek(e.addMonths(this.activeDate, t)), s = [];
|
|
24
|
+
for (let r = 0; r < 7; r++)
|
|
25
|
+
s.push(a("prism-text", { "aria-hidden": "true", family: "body", size: "300", class: "calendar-day-title" }, e.format(e.addDays(i, r), "EEEEE")));
|
|
26
|
+
return a("div", { class: "calendar-weekdays" }, s);
|
|
27
|
+
}, this.confirmSelection = () => {
|
|
28
|
+
this.prismTextInput.setFocus(), this.open = !1;
|
|
29
|
+
}, this._keyboardNavigation = (t) => {
|
|
30
|
+
var i, s, r, c;
|
|
31
|
+
const l = t.currentTarget, o = new Date(l.dataset.date), d = T(this.calendarElement).filter((u) => u.classList.contains("day")), h = e.addDays(o, 1), m = e.subDays(o, 1), g = e.addDays(o, 7), k = e.subDays(o, 7), D = (u) => d.find((p) => {
|
|
32
|
+
if (u.next && e.isEqual(new Date(p.dataset.date), h) || u.previous && e.isEqual(new Date(p.dataset.date), m) || u.previousWeek && e.isEqual(new Date(p.dataset.date), k) || u.nextWeek && e.isEqual(new Date(p.dataset.date), g))
|
|
33
|
+
return p;
|
|
34
|
+
});
|
|
35
|
+
switch (t.code) {
|
|
36
|
+
case "ArrowRight":
|
|
37
|
+
t.preventDefault(), (i = D({ next: !0 })) === null || i === void 0 || i.focus();
|
|
38
|
+
break;
|
|
39
|
+
case "ArrowLeft":
|
|
40
|
+
t.preventDefault(), (s = D({ previous: !0 })) === null || s === void 0 || s.focus();
|
|
41
|
+
break;
|
|
42
|
+
case "ArrowUp":
|
|
43
|
+
t.preventDefault(), (r = D({ previousWeek: !0 })) === null || r === void 0 || r.focus();
|
|
44
|
+
break;
|
|
45
|
+
case "ArrowDown":
|
|
46
|
+
t.preventDefault(), (c = D({ nextWeek: !0 })) === null || c === void 0 || c.focus();
|
|
47
|
+
break;
|
|
48
|
+
}
|
|
49
|
+
}, this._selectSingleDate = (t, i, s) => {
|
|
50
|
+
this.range || (this.selectedDate = t, this.selectedFullDate = e.format(this.selectedDate, this.dateFormat), this.confirmSelection()), this.range && (s ? (this.selectedDate = t, this.selectedEndDate = this.selectedDate) : i ? this.selectedEndDate = t : (this.selectedDate = t, this.selectedEndDate = this.selectedDate), this.selectedFullDate = `${e.format(this.selectedDate, this.dateFormat)} ${this.rangeDelimiter} ${e.format(this.selectedEndDate, this.dateFormat)}`), this.clearedValue = !1;
|
|
51
|
+
}, this.generateDatesForCurrentWeek = (t, i) => {
|
|
52
|
+
var s, r, c, l;
|
|
53
|
+
const o = [];
|
|
54
|
+
let d = t, h, m;
|
|
55
|
+
(this.disabledDateStart && this.disabledDateEnd && this.disabledDates === "range" || this.disabledDates === "inverse-range") && (h = e.eachDayOfInterval({ start: this.disabledDateStart, end: this.disabledDateEnd }), this.exclusionDates = h), this.disabledDateStart && this.disabledDates === "future" && (m = e.eachDayOfInterval({
|
|
56
|
+
start: this.disabledDateStart,
|
|
57
|
+
end: e.addDays(this.disabledDateStart, this.future || 7)
|
|
58
|
+
}), this.exclusionDates = m);
|
|
59
|
+
for (let g = 0; g < 7; g++) {
|
|
60
|
+
const k = d, D = !e.isSameMonth(d, i), u = !this.clearedValue && e.isSameDay(d, this.selectedDate), p = !this.clearedValue && this.range && e.isSameDay(d, this.selectedEndDate), S = !this.clearedValue && e.isAfter(d, this.selectedDate), M = !this.clearedValue && e.isBefore(d, this.selectedEndDate), x = !this.clearedValue && this.range && S && M, _ = `${u ? "selected" : ""} ${p ? "selected-end" : ""} ${e.isToday(d) ? "today" : ""} ${e.format(d, "EEEE MMMM do yyyy")}`, b = (r = (s = this.specialDates) === null || s === void 0 ? void 0 : s.filter((n) => e.isEqual(e.startOfDay(n.date), d))) !== null && r !== void 0 ? r : [], O = u || p || !D && x;
|
|
61
|
+
let v = !1;
|
|
62
|
+
switch (this.disabledDates) {
|
|
63
|
+
case "past":
|
|
64
|
+
v = e.isPast(e.endOfDay(d));
|
|
65
|
+
break;
|
|
66
|
+
case "weekends":
|
|
67
|
+
v = e.isWeekend(d);
|
|
68
|
+
break;
|
|
69
|
+
case "range":
|
|
70
|
+
h == null || h.map((n) => {
|
|
71
|
+
e.isEqual(n, d) && (v = !0);
|
|
72
|
+
});
|
|
73
|
+
break;
|
|
74
|
+
case "inverse-range":
|
|
75
|
+
v = !0, h == null || h.map((n) => {
|
|
76
|
+
e.isEqual(n, d) && (v = !1);
|
|
77
|
+
});
|
|
78
|
+
break;
|
|
79
|
+
case "inverse-exclude":
|
|
80
|
+
v = !0, (c = this.exclusions) === null || c === void 0 || c.map((n) => {
|
|
81
|
+
e.isEqual(e.startOfDay(n), d) && (v = !1);
|
|
82
|
+
});
|
|
83
|
+
break;
|
|
84
|
+
case "exclude":
|
|
85
|
+
(l = this.exclusions) === null || l === void 0 || l.map((n) => {
|
|
86
|
+
e.isEqual(e.startOfDay(n), d) && (v = !0);
|
|
87
|
+
});
|
|
88
|
+
break;
|
|
89
|
+
case "future":
|
|
90
|
+
v = !0, m == null || m.map((n) => {
|
|
91
|
+
e.isEqual(n, d) && (v = !1);
|
|
92
|
+
});
|
|
93
|
+
break;
|
|
94
|
+
}
|
|
95
|
+
o.push(a("span", { class: {
|
|
96
|
+
"first-day-next": e.isFirstDayOfMonth(d),
|
|
97
|
+
"last-day-previous": e.isLastDayOfMonth(d),
|
|
98
|
+
"range-selected": !D && (x || p || this.range && u),
|
|
99
|
+
"selected-day": u,
|
|
100
|
+
"selected-end-day": p
|
|
101
|
+
} }, e.isSameMonth(d, i) && a("button", { "data-testid": "date-button", class: {
|
|
102
|
+
today: e.isToday(d),
|
|
103
|
+
day: !0,
|
|
104
|
+
"range-selected": x || u || p,
|
|
105
|
+
"selected-day": u,
|
|
106
|
+
"selected-end-day": p,
|
|
107
|
+
"inactive-day": D,
|
|
108
|
+
"special-date": b.length > 0
|
|
109
|
+
}, onKeyDown: (n) => this._keyboardNavigation(n), name: e.isToday(d) ? "today" : "day", disabled: v, "data-date": e.format(d, "MM/dd/yyyy"), "aria-disabled": !!v, "aria-label": _.replace(/\s+/g, " ").trim() + (b.length > 0 ? b.map((n) => `, ${n.label}`) : ""), type: "button", onClick: () => this._selectSingleDate(k, S, u), tabindex: e.isFirstDayOfMonth(d) ? null : "-1" }, e.format(d, "d"), b.map((n) => a("prism-icon", { label: n.label, size: "xxs", "data-testid": n.label, tone: O || n == null ? void 0 : n.tone, name: n == null ? void 0 : n.icon, path: n == null ? void 0 : n.path }))))), d = e.addDays(d, 1);
|
|
110
|
+
}
|
|
111
|
+
return a(w, null, o);
|
|
112
|
+
}, this.getDates = (t = 0) => {
|
|
113
|
+
const i = e.startOfMonth(e.addMonths(this.activeDate, t)), s = e.endOfMonth(e.addMonths(this.activeDate, t)), r = e.startOfWeek(i), c = e.endOfWeek(s);
|
|
114
|
+
let l = r;
|
|
115
|
+
const o = [];
|
|
116
|
+
for (; l <= c; )
|
|
117
|
+
o.push(this.generateDatesForCurrentWeek(l, e.addMonths(this.activeDate, t))), l = e.addDays(l, 7);
|
|
118
|
+
return a("div", { class: "calendar-week-container" }, o);
|
|
119
|
+
}, this.convertValueToDate = (t) => {
|
|
120
|
+
const [i, s, r] = t.split("/");
|
|
121
|
+
if (i && s && r) {
|
|
122
|
+
let c = new Date(parseInt(r), parseInt(i, 10) - 1, parseInt(s));
|
|
123
|
+
return e.startOfDay(c);
|
|
124
|
+
} else
|
|
125
|
+
return;
|
|
126
|
+
}, this.handleEscapeKey = (t) => {
|
|
127
|
+
t.code === "Escape" && (this.open = !1, this.triggerElement.setFocus());
|
|
128
|
+
}, this.toggleOpenCalendar = (t) => {
|
|
129
|
+
var i;
|
|
130
|
+
this._todayElement = this.calendarElement.getElementsByClassName("today")[0], this.open = !this.open && !this.displayInline, t.currentTarget.id === "trigger-button" && this.open && ((i = this.previousMonthElement) === null || i === void 0 || i.setFocus()), setTimeout(() => {
|
|
131
|
+
var r;
|
|
132
|
+
if (!this.selectedDate && this.open)
|
|
133
|
+
(r = this._todayElement) === null || r === void 0 || r.focus();
|
|
134
|
+
else if (this.selectedDate && this.open) {
|
|
135
|
+
const c = this.calendarElement.querySelector(`[data-date="${e.format(this.selectedDate, "MM/dd/yyyy")}"]`);
|
|
136
|
+
c == null || c.focus();
|
|
137
|
+
}
|
|
138
|
+
}, 0), this.prismClick.emit({
|
|
139
|
+
name: "date-toggle",
|
|
140
|
+
host: this.el,
|
|
141
|
+
type: this.range ? "range" : "single",
|
|
142
|
+
formattedValue: {
|
|
143
|
+
single: !this.range && this._validateDate(this.selectedDate) ? e.formatISO(this.selectedDate) : void 0,
|
|
144
|
+
singleUnix: !this.range && this._validateDate(this.selectedDate) ? e.getUnixTime(this.selectedDate) : void 0,
|
|
145
|
+
start: this.range && this._validateDate(this.selectedDate) ? e.formatISO(this.selectedDate) : void 0,
|
|
146
|
+
startUnix: this.range && this._validateDate(this.selectedDate) ? e.getUnixTime(this.selectedDate) : void 0,
|
|
147
|
+
end: this.range && this._validateDate(this.selectedEndDate) ? e.formatISO(this.selectedEndDate) : void 0,
|
|
148
|
+
endUnix: this.range && this._validateDate(this.selectedEndDate) ? e.getUnixTime(this.selectedEndDate) : void 0
|
|
149
|
+
},
|
|
150
|
+
open: this.displayInline || this.open
|
|
151
|
+
});
|
|
152
|
+
}, this._hostTag = "prism-datepicker", this.onBlur = (t) => {
|
|
153
|
+
t.target.closest(this._hostTag) !== this.el && (this.open = !1);
|
|
154
|
+
}, this._getDateChange = (t) => {
|
|
155
|
+
const i = t.detail.name === "input-keyup", s = t.detail.name === "value-changed";
|
|
156
|
+
if (!i && !s)
|
|
157
|
+
return;
|
|
158
|
+
const r = () => {
|
|
159
|
+
this.prismChange.emit({
|
|
160
|
+
name: "date-selected",
|
|
161
|
+
value: t.detail.value,
|
|
162
|
+
id: t.detail.id,
|
|
163
|
+
host: this.el,
|
|
164
|
+
type: this.range ? "range" : "single",
|
|
165
|
+
formattedValue: {
|
|
166
|
+
single: !this.range && this._validateDate(this.selectedDate) ? e.formatISO(this.selectedDate) : void 0,
|
|
167
|
+
singleUnix: !this.range && this._validateDate(this.selectedDate) ? e.getUnixTime(this.selectedDate) : void 0,
|
|
168
|
+
start: this.range && this._validateDate(this.selectedDate) ? e.formatISO(this.selectedDate) : void 0,
|
|
169
|
+
startUnix: this.range && this._validateDate(this.selectedDate) ? e.getUnixTime(this.selectedDate) : void 0,
|
|
170
|
+
end: this.range && this._validateDate(this.selectedEndDate) ? e.formatISO(this.selectedEndDate) : void 0,
|
|
171
|
+
endUnix: this.range && this._validateDate(this.selectedEndDate) ? e.getUnixTime(this.selectedEndDate) : void 0
|
|
172
|
+
}
|
|
173
|
+
});
|
|
174
|
+
};
|
|
175
|
+
if (t.detail.value)
|
|
176
|
+
if (this.range) {
|
|
177
|
+
const l = /^\d{2}\/\d{2}\/\d{4}\s+\w+\s+\d{2}\/\d{2}\/\d{4}$/.test(t.detail.value);
|
|
178
|
+
if (s || i && l) {
|
|
179
|
+
const [o, d] = t.detail.value.split(this.rangeDelimiter).map((g) => g.trim());
|
|
180
|
+
let h, m;
|
|
181
|
+
s ? (h = this.convertValueToDate(o), m = this.convertValueToDate(d)) : (h = e.parse(o, this.dateFormat, /* @__PURE__ */ new Date()), m = e.parse(d, this.dateFormat, /* @__PURE__ */ new Date())), e.isValid(h) && e.isValid(m) && (e.isSameDay(h, m) || e.isAfter(m, h)) && (this.selectedDate = e.startOfDay(h), this.selectedEndDate = e.startOfDay(m), r());
|
|
182
|
+
}
|
|
183
|
+
} else {
|
|
184
|
+
const l = /^\d{2}\/\d{2}\/\d{4}$/.test(t.detail.value);
|
|
185
|
+
if (s || i && l) {
|
|
186
|
+
let o;
|
|
187
|
+
s ? o = this.convertValueToDate(t.detail.value) : o = e.parse(t.detail.value, this.dateFormat, /* @__PURE__ */ new Date()), e.isValid(o) && (this.selectedDate = e.startOfDay(o), r());
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
}, this._validateDate = (t) => !Number.isNaN(Date.parse(t == null ? void 0 : t.toDateString())), this._invalidState = (t) => {
|
|
191
|
+
this.invalidDate = t;
|
|
192
|
+
}, this._checkValidity = (t) => {
|
|
193
|
+
var i, s;
|
|
194
|
+
if (this.validation === "manual") {
|
|
195
|
+
if (this._invalidState(t.detail.value === "" && t.detail.dirty === !0), t.detail.value !== "" && t.detail.value !== void 0)
|
|
196
|
+
if (this.range) {
|
|
197
|
+
let l = t.detail.value.split(this.rangeDelimiter)[0].trim(), o = t.detail.value.split(this.rangeDelimiter)[1].trim();
|
|
198
|
+
this.invalidDate = !e.isValid(e.parse(l, this.dateFormat, /* @__PURE__ */ new Date())) || !e.isValid(e.parse(o, this.dateFormat, /* @__PURE__ */ new Date()));
|
|
199
|
+
} else
|
|
200
|
+
this.invalidDate = !e.isValid(e.parse(t.detail.value, this.dateFormat, /* @__PURE__ */ new Date()));
|
|
201
|
+
let r = new Date(t.detail.value), c = (l) => e.isEqual(l, e.startOfDay(r));
|
|
202
|
+
switch (this.disabledDates) {
|
|
203
|
+
case "weekends":
|
|
204
|
+
this.invalidDate = e.isWeekend(r);
|
|
205
|
+
break;
|
|
206
|
+
case "past":
|
|
207
|
+
this.invalidDate = e.isPast(r);
|
|
208
|
+
break;
|
|
209
|
+
case "exclude":
|
|
210
|
+
this.invalidDate = ((i = this.exclusions) === null || i === void 0 ? void 0 : i.filter((l) => e.isEqual(e.startOfDay(l), e.startOfDay(r))).length) === 1;
|
|
211
|
+
break;
|
|
212
|
+
case "inverse-exclude":
|
|
213
|
+
this.invalidDate = ((s = this.exclusions) === null || s === void 0 ? void 0 : s.filter((l) => !e.isEqual(e.startOfDay(l), e.startOfDay(r))).length) === 1;
|
|
214
|
+
break;
|
|
215
|
+
case "future":
|
|
216
|
+
this.invalidDate = !this.exclusionDates.some(c);
|
|
217
|
+
break;
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
this.prismBlur.emit({
|
|
221
|
+
name: "date-blur",
|
|
222
|
+
host: this.el,
|
|
223
|
+
type: this.range ? "range" : "single",
|
|
224
|
+
formattedValue: {
|
|
225
|
+
single: !this.range && this._validateDate(this.selectedDate) ? e.formatISO(this.selectedDate) : void 0,
|
|
226
|
+
singleUnix: !this.range && this._validateDate(this.selectedDate) ? e.getUnixTime(this.selectedDate) : void 0,
|
|
227
|
+
start: this.range && this._validateDate(this.selectedDate) ? e.formatISO(this.selectedDate) : void 0,
|
|
228
|
+
startUnix: this.range && this._validateDate(this.selectedDate) ? e.getUnixTime(this.selectedDate) : void 0,
|
|
229
|
+
end: this.range && this._validateDate(this.selectedEndDate) ? e.formatISO(this.selectedEndDate) : void 0,
|
|
230
|
+
endUnix: this.range && this._validateDate(this.selectedEndDate) ? e.getUnixTime(this.selectedEndDate) : void 0
|
|
231
|
+
},
|
|
232
|
+
open: this.open
|
|
233
|
+
});
|
|
234
|
+
}, this._checkforFocus = (t) => {
|
|
235
|
+
this.el.contains(t.target) && t.target !== this.triggerElement && (this.open = !1);
|
|
236
|
+
}, this.open = !1, this.value = void 0, this.range = !1, this.label = void 0, this.name = void 0, this.variant = "contained", this.disabled = !1, this.hideLabel = !1, this.invalidMessage = "Please select a date", this.pattern = void 0, this.required = void 0, this.readonly = void 0, this.invalid = !1, this.format = "##/##/####", this.dateFormat = "MM/dd/yyyy", this.placeholder = void 0, this.placeholderStart = void 0, this.placeholderEnd = void 0, this.confirmLabel = "Confirm", this.rangeDelimiter = "to", this.displayMonths = "1", this.disabledDates = void 0, this.future = void 0, this.exclusions = void 0, this.specialDates = void 0, this.disabledDateStart = void 0, this.disabledDateEnd = void 0, this.displayInline = !1, this.validation = "manual", this.tone = void 0, this.triggerLabel = "select a date", this.clearLabel = "clear date", this.selectedDate = void 0, this.selectedEndDate = void 0, this.selectedFullDate = void 0, this.activeDate = e.startOfToday(), this.clearedValue = !1, this.invalidDate = !1, this.validSelectedDate = !Number.isNaN(Date.parse((y = this.selectedDate) === null || y === void 0 ? void 0 : y.toDateString()));
|
|
237
|
+
}
|
|
238
|
+
componentDidLoad() {
|
|
239
|
+
var f;
|
|
240
|
+
(f = this.el) === null || f === void 0 || f.addEventListener("keydown", this.handleEscapeKey);
|
|
241
|
+
}
|
|
242
|
+
componentWillLoad() {
|
|
243
|
+
this.placeholder || (this.placeholder = this.dateFormat.toLocaleLowerCase()), this.validation === "native" && (this.invalidDate = this.invalid), this.value && this.setSelectedFromValue();
|
|
244
|
+
}
|
|
245
|
+
updateValue() {
|
|
246
|
+
this.setSelectedFromValue();
|
|
247
|
+
}
|
|
248
|
+
updateInvalid() {
|
|
249
|
+
this.invalidDate = this.invalid;
|
|
250
|
+
}
|
|
251
|
+
connectedCallback() {
|
|
252
|
+
document.addEventListener("mousedown", this.onBlur), V("prism-datepicker");
|
|
253
|
+
}
|
|
254
|
+
disconnectedCallback() {
|
|
255
|
+
var f;
|
|
256
|
+
document.removeEventListener("mousedown", this.onBlur), (f = this.el) === null || f === void 0 || f.removeEventListener("keydown", this.handleEscapeKey);
|
|
257
|
+
}
|
|
258
|
+
render() {
|
|
259
|
+
const f = this.range || this.displayMonths === "2", y = !this.open && !this.displayInline;
|
|
260
|
+
return a(z, { key: "67abfa743f74f5bffce7983fd885eb90bfc455e0" }, a("span", { key: "c50d187a08e897b8c464f8ba71c216cba9ae8d5d", class: "screen-reader-text", "aria-live": "polite", "aria-atomic": "true" }, this.activeDate && e.format(this.activeDate, "MMMM yyyy")), a("section", { key: "b1ccdf816de609490afe242aa44a14b3e8af9223", class: "input-container" }, a("prism-input-text", { key: "42cf1591c2b8e7db213eb1331dba73dbb6526016", class: { "calendar-input": !0 }, ref: (t) => this.prismTextInput = t, value: this.selectedFullDate, label: this.label, disabled: this.disabled, hideLabel: this.hideLabel, invalidMessage: this.invalidMessage, pattern: this.pattern, name: this.name, required: this.required, readonly: this.readonly, tone: this.tone, format: this.range ? `${this.format} ${this.rangeDelimiter} ${this.format}` : this.format, variant: this.variant, validation: this.validation, placeholder: this.range ? this.placeholderStart && this.placeholderEnd ? `${this.placeholderStart} ${this.rangeDelimiter} ${this.placeholderEnd}` : `${this.placeholder} ${this.rangeDelimiter} ${this.placeholder}` : this.placeholder, invalid: this.invalidDate, onPrismBlur: (t) => this._checkValidity(t), onPrismFocus: (t) => this._checkforFocus(t), onPrismKeyup: (t) => this._getDateChange(t), onPrismChange: (t) => this._getDateChange(t) }, this.displayInline ? null : a("prism-button", { ref: (t) => this.triggerElement = t, class: "controls", type: "button", display: "ghost-icon", size: "sm", "prism-id": "trigger-button", disabled: this.disabled, label: this.triggerLabel, expanded: this.open, slot: "icon-leading", onPrismClick: (t) => this.toggleOpenCalendar(t) }, a("prism-icon", { size: "sm", priority: this.disabled ? "inactive" : "primary", display: "outline", name: "calendar" })), a("prism-button", { key: "1c96a8d6923ce667395f846cd584aa513767b1eb", class: "controls", type: "button", display: "ghost-icon", size: "sm", "prism-id": "trigger-button-clear", label: this.clearLabel, slot: "icon-trailing", disabled: this.disabled, onPrismClick: () => {
|
|
261
|
+
this.prismTextInput.value = "", this.selectedFullDate = "", this.clearedValue = !0, this.prismTextInput.setFocus();
|
|
262
|
+
} }, a("prism-icon", { key: "92d00398120d041969d826e7f6b93ca1da5444e7", priority: this.disabled ? "inactive" : "primary", size: "sm", display: "outline", name: "close" }))), this.range && this._validateDate(this.selectedDate) && this._validateDate(this.selectedEndDate) && a(w, { key: "2317573ac49d6050045aa27e0baaac746b598c2f" }, a("input", { key: "28c848e56212943779375faa4f55c8f00106f779", type: "hidden", name: `${this.name || this.uid}_start_date`, value: e.formatISO(this.selectedDate) }), a("input", { key: "7b44bdefd0f2089443ab5950a9b425f709477da6", type: "hidden", name: `${this.name || this.uid}_end_date`, value: e.formatISO(this.selectedEndDate) }), a("input", { key: "3582382c3cb9b6eb95611dd4162f860defec9888", type: "hidden", name: `${this.name || this.uid}_start_date_unix`, value: e.getUnixTime(this.selectedDate) }), a("input", { key: "2950eba769081cadac5d40da5822c6b6c8ebddd3", type: "hidden", name: `${this.name || this.uid}_end_date_unix`, value: e.getUnixTime(this.selectedEndDate) }))), a("div", { key: "17455cc71ef94a97ead3c4f045e7e5c3de59de80", ref: (t) => this.calendarElement = t, class: { "calendar-container": !0, collapsed: y, inline: this.displayInline }, "aria-hidden": y.toString(), role: "group", "aria-label": "Calendar", inert: y, "data-testid": "calendar-container" }, this.getHeader(f), a("div", { key: "3f6d4bc0eca846f16a89d85f15fc8a4c80cb0a60", role: "application", class: "calendar-row" }, a("div", { key: "988bbf6dee65eee7ce132dea0064e48203660bc0" }, this.getWeekDaysNames(), this.getDates()), f && a("div", { key: "c752ea1379b0cfe70d313d4e680e20730ba0f624", class: { "second-month": !0 } }, this.getWeekDaysNames(1), this.getDates(1))), a("div", { key: "fc48070386ea2842002972ed17f32a367e17ae0d", "aria-hidden": "true", class: "legend-container" }, this.specialDates && this.specialDates.length > 0 && this.specialDates.map((t) => a("span", { class: "special-date-legend-item" }, a("prism-icon", { label: t.label, size: "xxs", tone: t.tone, name: t == null ? void 0 : t.icon, path: t == null ? void 0 : t.path }), a("prism-text", { priority: "secondary", as: "caption" }, t.label)))), a("div", { key: "bce309805a2db68eeb2f8149004b3189eb1ebe61", class: "calendar-footer" }, a("prism-button", { key: "fa9ec4ed3363c2ff142efb866ac393e94e620726", onPrismClick: () => {
|
|
263
|
+
this.activeDate = e.startOfToday(), this._todayElement.focus();
|
|
264
|
+
}, label: "return to today", disabled: e.isThisMonth(this.activeDate), display: "ghost" }, "Today"), this.range && a("prism-button", { key: "67618c1a210a73a91aaf9faf642641d0677d54f2", label: `${this.confirmLabel} date range`, display: "ghost", onPrismClick: () => this.confirmSelection() }, this.confirmLabel))));
|
|
265
|
+
}
|
|
266
|
+
get el() {
|
|
267
|
+
return C(this);
|
|
268
|
+
}
|
|
269
|
+
static get watchers() {
|
|
270
|
+
return {
|
|
271
|
+
value: ["updateValue"],
|
|
272
|
+
invalid: ["updateInvalid"]
|
|
273
|
+
};
|
|
274
|
+
}
|
|
275
|
+
};
|
|
276
|
+
U.style = L;
|
|
277
|
+
export {
|
|
278
|
+
U as prism_datepicker
|
|
279
|
+
};
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { r as t, c as o, h as a, H as s, g as l } from "./index-D9BZSjMp.js";
|
|
2
|
+
import { m as d } from "./index-44540db3-BN5vFHKr.js";
|
|
3
|
+
import { r as n } from "./index.esm-a7c99373-DUoLYEEM.js";
|
|
4
|
+
/*!
|
|
5
|
+
* Copyright (c) 2025 Comcast. Prism UI - v8.28.0 - made with ❤️ in Philadelphia
|
|
6
|
+
*/
|
|
7
|
+
const m = '.container.sc-prism-dialog{width:100%}@media (min-width:640px){.container.sc-prism-dialog{max-width:640px}}@media (min-width:768px){.container.sc-prism-dialog{max-width:768px}}@media (min-width:1024px){.container.sc-prism-dialog{max-width:1024px}}@media (min-width:1280px){.container.sc-prism-dialog{max-width:1280px}}@media (min-width:1536px){.container.sc-prism-dialog{max-width:1536px}}.sc-prism-dialog-h{display:block;width:100%}dialog.sc-prism-dialog{background-color:var(--prism-color-material-primary-base);border:var(--prism-spacer-size-none);border-radius:var(--prism-dialog-border-radius,var(--prism-radius-size-md));box-shadow:var(--prism-shadow-sm-base);color:var(--prism-color-text-primary-base);height:var(--prism-dialog-height,-webkit-max-content);height:var(--prism-dialog-height,-moz-max-content);height:var(--prism-dialog-height,max-content);min-width:var(--prism-dialog-width);opacity:var(--prism-dialog-animation-start-opacity,0);padding:var(--prism-dialog-spacing-padding,var(--prism-spacer-size-xxl));transform:scale(var(--prism-dialog-animation-start-scale,.75)) translate(var(--prism-dialog-animation-start-translate-x,0),var(--prism-dialog-animation-start-translate-y,0));transform-origin:var(--prism-dialog-animation-transform-origin,center);transition:opacity var(--prism-animation-duration-xfast) ease-in-out,transform var(--prism-dialog-animation-transform-speed,var(--prism-animation-duration-fast)) var(--prism-dialog-animation-transform-curve,ease-in-out),overlay var(--prism-animation-duration-xfast) cubic-bezier(.25,.46,.45,.94) allow-discrete,display var(--prism-animation-duration-xfast) cubic-bezier(.25,.46,.45,.94) allow-discrete;width:var(--prism-dialog-width,-webkit-max-content);width:var(--prism-dialog-width,-moz-max-content);width:var(--prism-dialog-width,max-content)}dialog[open].sc-prism-dialog{opacity:var(--prism-dialog-animation-end-opacity,1);transform:scale(var(--prism-dialog-animation-end-scale,1)) translate(var(--prism-dialog-animation-end-translate-x,0),var(--prism-dialog-animation-end-translate-y,0))}dialog.header-no-slot.sc-prism-dialog{grid-gap:var(--prism-dialog-spacing-gap,var(--prism-spacer-size-xxl));display:grid;gap:var(--prism-dialog-spacing-gap,var(--prism-spacer-size-xxl));grid-template-areas:"body header" "footer footer";grid-template-columns:1fr auto;grid-template-rows:-webkit-min-content -webkit-min-content;grid-template-rows:min-content min-content}dialog.sc-prism-dialog::backdrop{-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);background-color:color-mix(in srgb,var(--prism-dialog-backdrop-color,var(--prism-color-fill-primary-base)) var(--prism-alpha-secondary-percentage),#000 0);transition:display var(--prism-animation-duration-xfast) cubic-bezier(.25,.46,.45,.94) allow-discrete,overlay var(--prism-animation-duration-xfast) cubic-bezier(.25,.46,.45,.94) allow-discrete,background-color var(--prism-animation-duration-xfast) cubic-bezier(.25,.46,.45,.94),-webkit-backdrop-filter var(--prism-animation-duration-xfast) cubic-bezier(.25,.46,.45,.94);transition:display var(--prism-animation-duration-xfast) cubic-bezier(.25,.46,.45,.94) allow-discrete,overlay var(--prism-animation-duration-xfast) cubic-bezier(.25,.46,.45,.94) allow-discrete,background-color var(--prism-animation-duration-xfast) cubic-bezier(.25,.46,.45,.94),backdrop-filter var(--prism-animation-duration-xfast) cubic-bezier(.25,.46,.45,.94);transition:display var(--prism-animation-duration-xfast) cubic-bezier(.25,.46,.45,.94) allow-discrete,overlay var(--prism-animation-duration-xfast) cubic-bezier(.25,.46,.45,.94) allow-discrete,background-color var(--prism-animation-duration-xfast) cubic-bezier(.25,.46,.45,.94),backdrop-filter var(--prism-animation-duration-xfast) cubic-bezier(.25,.46,.45,.94),-webkit-backdrop-filter var(--prism-animation-duration-xfast) cubic-bezier(.25,.46,.45,.94)}dialog[open].sc-prism-dialog::backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background-color:color-mix(in srgb,var(--prism-dialog-backdrop-color,var(--prism-color-fill-primary-base)) var(--prism-alpha-secondary-percentage),#000 10%)}@media (min-width:640px){dialog.sc-prism-dialog{width:var(--prism-dialog-width,75%)}}@media (min-width:768px){dialog.sc-prism-dialog{width:var(--prism-dialog-width,65%)}}@media (min-width:1024px){dialog.sc-prism-dialog{width:var(--prism-dialog-width,50%)}}@media (min-width:1280px){dialog.sc-prism-dialog{width:var(--prism-dialog-width,45%)}}dialog.sc-prism-dialog .header.sc-prism-dialog{grid-area:header}dialog.sc-prism-dialog .header.with-title.sc-prism-dialog{align-items:var(--prism-dialog-header-align-items,center);display:flex;gap:var(--prism-dialog-header-spacing-items,0);justify-content:space-between;margin-bottom:var(--prism-dialog-spacing-items,var(--prism-spacer-size-md));order:0}dialog.sc-prism-dialog .close.sc-prism-dialog{align-self:var(--prism-dialog-close-align-self,flex-start);margin-left:auto}dialog.sc-prism-dialog .body.sc-prism-dialog{grid-area:body}dialog.sc-prism-dialog .footer.sc-prism-dialog{grid-area:footer;margin-top:var(--prism-dialog-spacing-items,var(--prism-spacer-size-md))}@starting-style{dialog[open]{opacity:var(--prism-dialog-animation-start-opacity,0);transform:scale(var(--prism-dialog-animation-start-scale,.75)) translate(var(--prism-dialog-animation-start-translate-x,0),var(--prism-dialog-animation-start-translate-y,0))}dialog[open]::backdrop{-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);background-color:color-mix(in srgb,var(--prism-dialog-backdrop-color,var(--prism-color-fill-primary-base)) var(--prism-alpha-secondary-percentage),#000 0)}}', c = m, p = class {
|
|
8
|
+
constructor(i) {
|
|
9
|
+
t(this, i), this.prismOpen = o(this, "prismOpen", 7), this.prismChange = o(this, "prismChange", 7), this.prismClose = o(this, "prismClose", 7), this._handleClose = () => {
|
|
10
|
+
this.closeDialog();
|
|
11
|
+
}, this._hasHeaderSlot = !1, this._hasFooterSlot = !1, this._debouncedResize = n(() => {
|
|
12
|
+
var r, e;
|
|
13
|
+
this.dialogHeightCalculated = (r = this._dialogElement) === null || r === void 0 ? void 0 : r.getBoundingClientRect().height, this.prismChange.emit({
|
|
14
|
+
name: "dialog-resized",
|
|
15
|
+
element: this._dialogElement,
|
|
16
|
+
windowHeight: ((e = window.visualViewport) === null || e === void 0 ? void 0 : e.height) || (window == null ? void 0 : window.innerHeight),
|
|
17
|
+
height: this.dialogHeightCalculated
|
|
18
|
+
});
|
|
19
|
+
}, 100), this.Header = () => a("div", { class: { header: !0, "with-title": this._hasHeaderSlot }, part: "header" }, a("slot", { name: "header" }), this.closeMethod === "auto" && a("prism-button", { label: this.closeLabel, class: { close: !0 }, display: "ghost-icon", size: "xs", setAutofocus: !0, onPrismClick: () => this._handleClose() }, a("prism-icon", { role: "presentation", display: "outline", class: "icon", size: "sm", name: "close" }))), this.Footer = () => a("div", { class: "footer", part: "footer" }, a("slot", { name: "footer" })), this.Body = () => a("div", { class: "body" }, a("slot", null)), this.dialogLabel = void 0, this.open = !1, this.closeLabel = "close dialog", this.closeMethod = "auto", this.dialogHeightCalculated = 0, this.extend = !1;
|
|
20
|
+
}
|
|
21
|
+
/** Public Method to Open the `<dialog/>` */
|
|
22
|
+
async openDialog() {
|
|
23
|
+
var i;
|
|
24
|
+
(i = this._dialogElement) === null || i === void 0 || i.showModal(), requestAnimationFrame(() => {
|
|
25
|
+
var r, e;
|
|
26
|
+
this.dialogHeightCalculated = (r = this._dialogElement) === null || r === void 0 ? void 0 : r.getBoundingClientRect().height, this.prismOpen.emit({
|
|
27
|
+
name: "dialog-opened",
|
|
28
|
+
element: this._dialogElement,
|
|
29
|
+
windowHeight: ((e = window.visualViewport) === null || e === void 0 ? void 0 : e.height) || (window == null ? void 0 : window.innerHeight),
|
|
30
|
+
height: this.dialogHeightCalculated
|
|
31
|
+
});
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
/** Public Method to Close the `<dialog/>` */
|
|
35
|
+
async closeDialog() {
|
|
36
|
+
var i;
|
|
37
|
+
(i = this._dialogElement) === null || i === void 0 || i.close(), this.prismClose.emit({ name: "dialog-closed", element: this._dialogElement });
|
|
38
|
+
}
|
|
39
|
+
openChanged() {
|
|
40
|
+
this.open ? this.openDialog() : this.closeDialog();
|
|
41
|
+
}
|
|
42
|
+
handleResize() {
|
|
43
|
+
var i;
|
|
44
|
+
(i = this._debouncedResize) === null || i === void 0 || i.call(this);
|
|
45
|
+
}
|
|
46
|
+
handleKeyDown(i) {
|
|
47
|
+
i.key === "Escape" && this.closeDialog();
|
|
48
|
+
}
|
|
49
|
+
componentDidRender() {
|
|
50
|
+
this.open && this.openDialog();
|
|
51
|
+
}
|
|
52
|
+
connectedCallback() {
|
|
53
|
+
const i = () => {
|
|
54
|
+
this._hasHeaderSlot = !!this.el.querySelector('[slot="header"]'), this._hasFooterSlot = !!this.el.querySelector('[slot="footer"]');
|
|
55
|
+
};
|
|
56
|
+
this.el.dataset.extend === "after" && (this.extend = !0), i(), d("prism-dialog");
|
|
57
|
+
}
|
|
58
|
+
render() {
|
|
59
|
+
return a(s, { key: "fcb7e52b9d18c3ba63c97a8a8373cbcbe28195d0" }, a("dialog", { key: "fd0aa8451e0f69bbce1eef6527d6499f64bf97ed", class: { dialog: !0, "drawer-from-bottom": this.extend, "header-no-slot": !this._hasHeaderSlot }, ref: (i) => this._dialogElement = i, "aria-label": this.dialogLabel }, a(this.Header, { key: "2becb3606033fb86f509dd70efee89c6e2348c12" }), a(this.Body, { key: "4d905f6b069fb04979d7870f7206a41028ce08e4" }), this._hasFooterSlot && a(this.Footer, { key: "d0440a7bb2948df162b1ce58e3021cb9316214cb" })));
|
|
60
|
+
}
|
|
61
|
+
get el() {
|
|
62
|
+
return l(this);
|
|
63
|
+
}
|
|
64
|
+
static get watchers() {
|
|
65
|
+
return {
|
|
66
|
+
open: ["openChanged"]
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
p.style = c;
|
|
71
|
+
export {
|
|
72
|
+
p as prism_dialog
|
|
73
|
+
};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { r, h as i, H as a } from "./index-D9BZSjMp.js";
|
|
2
|
+
import { m as s } from "./index-44540db3-BN5vFHKr.js";
|
|
3
|
+
/*!
|
|
4
|
+
* Copyright (c) 2025 Comcast. Prism UI - v8.28.0 - made with ❤️ in Philadelphia
|
|
5
|
+
*/
|
|
6
|
+
const t = ".sc-prism-drawer-h{--prism-dialog-animation-start-scale:1;--prism-dialog-animation-start-translate-y:1024px;--prism-dialog-animation-end-translate-y:1024px;--prism-dialog-border-radius:var(--prism-radius-size-md) var(--prism-radius-size-md) 0 0;--prism-dialog-width:100%;--prism-dialog-animation-transform-curve:cubic-bezier(0.32,0.72,0,1);--prism-dialog-animation-transform-speed:var(--prism-animation-duration-fast);--prism-dialog-animation-transform-origin:bottom;display:block}@starting-style{.sc-prism-drawer-h{--prism-dialog-animation-start-scale:1;--prism-dialog-animation-start-translate-x:0;--prism-dialog-animation-start-translate-y:1024px}}", n = t, o = class {
|
|
7
|
+
constructor(e) {
|
|
8
|
+
r(this, e), this.open = !1, this.label = void 0, this.browserInnerHeight = void 0, this.browserDialogHeight = void 0;
|
|
9
|
+
}
|
|
10
|
+
handlePrismEvents(e) {
|
|
11
|
+
this.browserDialogHeight = e.detail.height, this.browserInnerHeight = e.detail.windowHeight;
|
|
12
|
+
}
|
|
13
|
+
handlePrismClose() {
|
|
14
|
+
this.open = !1;
|
|
15
|
+
}
|
|
16
|
+
/** Public Method to Open the `<dialog/>` inside our <prism-drawer> */
|
|
17
|
+
async openDrawer() {
|
|
18
|
+
this.open = !0;
|
|
19
|
+
}
|
|
20
|
+
/** Public Method to Close the `<dialog/>` inside our <prism-drawer> */
|
|
21
|
+
async closeDrawer() {
|
|
22
|
+
this.open = !1;
|
|
23
|
+
}
|
|
24
|
+
connectedCallback() {
|
|
25
|
+
s("prism-drawer"), window && (this.browserInnerHeight = window.innerHeight);
|
|
26
|
+
}
|
|
27
|
+
_setCustomProperties() {
|
|
28
|
+
if (this.browserInnerHeight && this.browserDialogHeight) {
|
|
29
|
+
let e = this.open ? (this.browserInnerHeight - this.browserDialogHeight) / 2 : this.browserInnerHeight * 2;
|
|
30
|
+
this._dialogElement.style.setProperty("--prism-dialog-animation-end-translate-y", `${e}px`);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
componentWillRender() {
|
|
34
|
+
this._setCustomProperties();
|
|
35
|
+
}
|
|
36
|
+
render() {
|
|
37
|
+
return i(a, { key: "ed233666eeaefaf8d90a31d178d401934de4369c" }, i("prism-dialog", { key: "6ddfcf1fc3d65352de853dd95457bc0e1efa417d", "data-extend": "after", ref: (e) => this._dialogElement = e, open: this.open, "dialog-label": this.label }, i("span", { key: "059c25197b770d12beb96eb197f2fcf49de29c65", slot: "header" }, i("slot", { key: "a015222fa82b95d493d640b857c96c8fc3bd49b2", name: "header" })), i("slot", { key: "da1bb9a75eebbf9d9fc496add9ac4872055bbbd9" }), i("span", { key: "eb810912e7412a6684fe26653d978d770d78f94b", slot: "footer" }, i("slot", { key: "f0c2d4622be0b4ff2c81ff9471cc46fdd85ac78a", name: "footer" }))));
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
o.style = n;
|
|
41
|
+
export {
|
|
42
|
+
o as prism_drawer
|
|
43
|
+
};
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { r as n, c as
|
|
2
|
-
import { m } from "./index-
|
|
1
|
+
import { r as n, c as a, h as r, H as f } from "./index-D9BZSjMp.js";
|
|
2
|
+
import { g as m, m as d } from "./index-44540db3-BN5vFHKr.js";
|
|
3
3
|
/*!
|
|
4
|
-
* Copyright (c) 2025 Comcast. Prism UI -
|
|
4
|
+
* Copyright (c) 2025 Comcast. Prism UI - v8.28.0 - made with ❤️ in Philadelphia
|
|
5
5
|
*/
|
|
6
|
-
const
|
|
6
|
+
const c = class {
|
|
7
7
|
constructor(i) {
|
|
8
|
-
n(this, i), this.prismForm =
|
|
8
|
+
n(this, i), this.prismForm = a(this, "prismForm", 7), this.uid = m(), this.validate = () => this.form && typeof this.form.checkValidity == "function" ? this.form.checkValidity() : !1, this.submit = (t) => {
|
|
9
9
|
var e, o;
|
|
10
10
|
if (this.debug && console.info("prism-submit event", t), this.submitEffect && ((e = this.submitButton) === null || e === void 0 || e.setAttribute("loading", "true")), !this.validate())
|
|
11
11
|
return this.submitEffect && ((o = this.submitButton) === null || o === void 0 || o.setAttribute("loading", "false")), !1;
|
|
12
12
|
this.url && !this.native && (t.preventDefault(), new FormData(this.form)), this.prismForm.emit({ name: `form-${t.type}`, orgin: t });
|
|
13
|
-
}, this.method = "POST", this.action = void 0, this.name = void 0, this.url = void 0, this.submitEffect = !1, this.native = !1, this.debug = !1, this.data = {};
|
|
13
|
+
}, this.prismId = `prism-form-${this.uid}`, this.method = "POST", this.action = void 0, this.name = void 0, this.url = void 0, this.submitEffect = !1, this.native = !1, this.debug = !1, this.data = {};
|
|
14
14
|
}
|
|
15
15
|
connectedCallback() {
|
|
16
|
-
|
|
16
|
+
d("prism-form");
|
|
17
17
|
}
|
|
18
18
|
componentDidLoad() {
|
|
19
19
|
this.debug && console.info(this, this.form), this.submitButton = this.form.querySelector('prism-button[type="submit"]');
|
|
@@ -28,15 +28,15 @@ const u = class {
|
|
|
28
28
|
method: this.method,
|
|
29
29
|
body: JSON.stringify(this.data)
|
|
30
30
|
}).then((s) => s.json()).then((s) => {
|
|
31
|
-
this.debug && console.info("Success", s), this.submitEffect && (t == null || t.setAttribute("loading", "false"), t == null || t.setAttribute("tone", "
|
|
31
|
+
this.debug && console.info("Success", s), this.submitEffect && (t == null || t.setAttribute("loading", "false"), t == null || t.setAttribute("tone", "success")), e.emit({ name: "form-api-success", response: s });
|
|
32
32
|
}).catch((s) => {
|
|
33
|
-
this.debug && console.error("Error", s), this.submitEffect && (t == null || t.setAttribute("loading", "false"), t == null || t.setAttribute("tone", "
|
|
33
|
+
this.debug && console.error("Error", s), this.submitEffect && (t == null || t.setAttribute("loading", "false"), t == null || t.setAttribute("tone", "danger")), e.emit({ name: "form-api-error", response: s });
|
|
34
34
|
}), e.emit({ name: `form-${i.type}`, formData: this.data, origin: i });
|
|
35
35
|
}
|
|
36
36
|
render() {
|
|
37
|
-
return r(
|
|
37
|
+
return r(f, { key: "431dfa572eda85da2e036ac466b664c363b61594" }, r("slot", { key: "51ae36f9fec504ac015fb05015391b86d9ca9023", name: "header" }), r("form", { key: "3d76f998b44bb779b3d25de0feff58a38823846b", id: this.prismId, onSubmit: (i) => this.submit(i), ref: (i) => this.form = i, name: this.name, action: this.action, method: this.method }, r("slot", { key: "bfd2b508c34c423504cea729ba5cf98ca70fcaab" })), r("slot", { key: "56e9bd4600cf6077765e214f8e12a9bd4a003cc9", name: "footer" }));
|
|
38
38
|
}
|
|
39
39
|
};
|
|
40
40
|
export {
|
|
41
|
-
|
|
41
|
+
c as prism_form
|
|
42
42
|
};
|