@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,95 @@
|
|
|
1
|
+
import { r as t, c as r, h as e, H as a } from "./index-D9BZSjMp.js";
|
|
2
|
+
import { g as c, m as n } from "./index-44540db3-BN5vFHKr.js";
|
|
3
|
+
import { A as o } from "./index-4d46d9ca-BtyZMEt1.js";
|
|
4
|
+
/*!
|
|
5
|
+
* Copyright (c) 2025 Comcast. Prism UI - v8.28.0 - made with ❤️ in Philadelphia
|
|
6
|
+
*/
|
|
7
|
+
const l = '.sc-prism-switch-h{box-sizing:border-box;display:block;margin:var(--prism-switch-spacing-margin,var(--prism-spacer-size-lg) 0);position:relative;width:auto}.loading.sc-prism-switch{cursor:wait;pointer-events:none}.screen-reader-text.sc-prism-switch{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.label.sc-prism-switch{-moz-column-gap:var(--prism-spacer-size-lg);column-gap:var(--prism-spacer-size-lg);display:grid;grid-template-areas:"checkbox label" "checkbox hint";grid-template-columns:-webkit-max-content 1fr;grid-template-columns:max-content 1fr;grid-template-rows:1fr}.label.right.sc-prism-switch{grid-template-areas:"label checkbox" "hint checkbox"}.label.sc-prism-switch:hover{cursor:pointer}.input[disabled].sc-prism-switch:hover,.label.disabled.sc-prism-switch:hover{cursor:not-allowed}.label-text.sc-prism-switch{color:var(--prism-color-text-primary-base);grid-area:label}.switch.sc-prism-switch{align-items:center;display:flex;flex-grow:0;flex-shrink:0;grid-area:checkbox;outline:2px solid transparent;outline-offset:2px;width:3rem}.switch.sc-prism-switch,.switch.sc-prism-switch:before{border-radius:var(--prism-radius-size-lg);height:1.5rem;position:relative;transition:all var(--prism-animation-duration-normal) var(--prism-animation-timing-function)}.switch.sc-prism-switch:before{background-color:var(--prism-color-fill-secondary-base);content:"";width:100%}.switch.sc-prism-switch:after{background-color:var(--prism-color-material-primary-base);border-radius:var(--prism-radius-size-full);content:"";height:1.25rem;pointer-events:none;position:absolute;text-align:center;transition:all var(--prism-animation-duration-normal) var(--prism-animation-timing-function);width:1.25rem;z-index:var(--prism-layout-z-index-base)}.loading-spinner.sc-prism-switch,.switch.sc-prism-switch:after{transform:translateX(var(--prism-spacer-size-xxs))}.input.sc-prism-switch{border:1px solid transparent;cursor:pointer;height:1.5rem;margin:0;opacity:0;overflow:hidden;padding:0;position:absolute;visibility:visible;width:1.5rem}.input.sc-prism-switch+.label.sc-prism-switch:not(.loading) .switch.sc-prism-switch{outline-offset:2px}.input.sc-prism-switch:focus-visible+.label.sc-prism-switch:not(.loading) .switch.sc-prism-switch{outline:1px solid var(--prism-color-border-secondary-focus)}.input.sc-prism-switch:focus-visible+.label.sc-prism-switch:not(.loading) .switch.invalid.sc-prism-switch{outline-color:var(--prism-color-border-danger-focus)}.label.sc-prism-switch:not(.disabled):hover .switch.sc-prism-switch:not(.invalid):not(.checked):before{background-color:var(--prism-color-fill-secondary-hover)}.input.sc-prism-switch:focus-visible+.label.sc-prism-switch:not(.loading) .switch.sc-prism-switch:not(.invalid):not(.checked):before{background-color:var(--prism-color-fill-secondary-focus)}.checked.sc-prism-switch{background-color:initial}.checked.sc-prism-switch .loading-spinner.sc-prism-switch,.checked.sc-prism-switch:after{transform:translateX(26px)}.checked.sc-prism-switch:before{background-color:var(--prism-color-fill-brand-primary-base)}.input.sc-prism-switch:focus-visible+.label.sc-prism-switch .checked.sc-prism-switch:not(.invalid){outline-color:var(--prism-color-border-brand-primary-focus)}.input.sc-prism-switch:focus-visible+.label.sc-prism-switch:not(.loading) .checked.sc-prism-switch:before{background-color:var(--prism-color-fill-brand-primary-focus)}.label.sc-prism-switch:not(.disabled):hover .checked.sc-prism-switch:before{background-color:var(--prism-color-fill-brand-primary-hover)}.invalid.sc-prism-switch:before{background-color:var(--prism-color-material-secondary-base);border:1px solid var(--prism-color-border-danger-base)}.label.sc-prism-switch:not(.disabled):hover .invalid.sc-prism-switch:before{border-color:var(--prism-color-border-danger-hover)}.input.sc-prism-switch:focus-visible+.label.sc-prism-switch .invalid.sc-prism-switch:before{border-color:var(--prism-color-border-danger-focus)}.label.sc-prism-switch:not(.disabled):hover .checked.invalid.sc-prism-switch:before,.label.sc-prism-switch:not(.disabled):hover .invalid.sc-prism-switch:not(.checked):after{background-color:var(--prism-color-fill-danger-hover)}.input.sc-prism-switch:focus+.label.sc-prism-switch .checked.invalid.sc-prism-switch:before,.input.sc-prism-switch:focus+.label.sc-prism-switch .invalid.sc-prism-switch:not(.checked):after{background-color:var(--prism-color-fill-danger-focus)}.invalid.checked.sc-prism-switch:before,.invalid.sc-prism-switch:not(.checked):after{background-color:var(--prism-color-fill-danger-base)}.invalid.checked.sc-prism-switch:before{border-width:0}.hint-container.sc-prism-switch{align-items:center;display:flex;gap:var(--prism-spacer-size-xs);margin-top:var(--prism-spacer-size-xs)}.hint-text.sc-prism-switch{display:block;grid-area:hint;text-align:left}.invalid-text.sc-prism-switch{color:var(--prism-color-text-danger-base)}.disabled.sc-prism-switch{cursor:not-allowed}.disabled.sc-prism-switch,.loading.sc-prism-switch .switch.sc-prism-switch:before{opacity:var(--prism-alpha-inactive)}.loading-spinner.sc-prism-switch{color:var(--prism-color-text-secondary-base);height:1.25rem;position:absolute;transform:translateX(var(--prism-spacer-size-xxs));transition:all var(--prism-animation-duration-normal) var(--prism-animation-timing-function);width:1.25rem;z-index:20}.checked.sc-prism-switch .loading-spinner.sc-prism-switch{color:var(--prism-color-text-brand-primary-base)}@media (prefers-reduced-motion){.switch.sc-prism-switch,.switch.sc-prism-switch:after{transition:none}}', d = l, h = class {
|
|
8
|
+
constructor(s) {
|
|
9
|
+
t(this, s), this.prismChange = r(this, "prismChange", 7), this.prismInput = r(this, "prismInput", 7), this.prismBlur = r(this, "prismBlur", 7), this.prismFocus = r(this, "prismFocus", 7), this.uid = c(), this.isDirty = !1, this.prismId = `prism-switch-${this.uid}`, this.name = this.prismId, this.label = this.name.charAt(0).toUpperCase() + this.name.replace(/-/g, " ").substring(1), this.checked = !1, this.required = !1, this.disabled = !1, this.loading = !1, this.hideLabel = !1, this.hideInvalid = !1, this.hint = void 0, this.value = void 0, this.invalid = !1, this.invalidMessage = "This field is required", this.describedby = "", this.alignment = "left", this.validation = "native", this.hintId = `${this.prismId}-hint`, this.combinedDescribedBy = void 0;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* @description Public: Set Focus on Input
|
|
13
|
+
*/
|
|
14
|
+
async setFocus() {
|
|
15
|
+
this.element && this.element.focus();
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Listen to Reset Events
|
|
19
|
+
*/
|
|
20
|
+
handleReset() {
|
|
21
|
+
this.checked = !1;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Listen to Keydown Events
|
|
25
|
+
*/
|
|
26
|
+
/** @internal */
|
|
27
|
+
inputKeyDown(s) {
|
|
28
|
+
this.loading && s.key === " " && s.preventDefault();
|
|
29
|
+
}
|
|
30
|
+
// Emit onChange of Value Event
|
|
31
|
+
/** @internal */
|
|
32
|
+
valueChanged(s) {
|
|
33
|
+
this.prismChange.emit({
|
|
34
|
+
name: "value-changed",
|
|
35
|
+
checked: this.checked,
|
|
36
|
+
invalid: this.invalid,
|
|
37
|
+
value: s.target.value,
|
|
38
|
+
type: "checkbox"
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
// Native Event Handling
|
|
42
|
+
/** @internal */
|
|
43
|
+
inputChanged(s) {
|
|
44
|
+
this.isDirty = !0, this.combinedDescribedBy = `${this.hintId} ${this.describedby}`.trim();
|
|
45
|
+
let i = s.currentTarget;
|
|
46
|
+
this.checked = i.checked, this.prismInput.emit({ name: "input-change", checked: this.checked, invalid: this.invalid, target: i });
|
|
47
|
+
}
|
|
48
|
+
/** @internal */
|
|
49
|
+
onCheckValidity(s) {
|
|
50
|
+
s.preventDefault();
|
|
51
|
+
const i = s.currentTarget;
|
|
52
|
+
this.validation === "native" && (this.invalid = !i.validity.valid), this.combinedDescribedBy = `${this.hintId} ${this.describedby}`.trim(), this.prismInput.emit({ name: "check-validity", value: i.value, target: i, reason: i.validity });
|
|
53
|
+
}
|
|
54
|
+
// Input has focus or blurred
|
|
55
|
+
/** @internal */
|
|
56
|
+
inputState(s) {
|
|
57
|
+
let i = s.currentTarget;
|
|
58
|
+
switch (s.type) {
|
|
59
|
+
case "blur":
|
|
60
|
+
this.isDirty && this.validation === "native" && (this.invalid = !i.validity.valid), this.prismBlur.emit({
|
|
61
|
+
name: "input-blurred",
|
|
62
|
+
checked: this.checked,
|
|
63
|
+
type: "checkbox",
|
|
64
|
+
value: i.value,
|
|
65
|
+
target: i
|
|
66
|
+
});
|
|
67
|
+
break;
|
|
68
|
+
case "focus":
|
|
69
|
+
this.prismFocus.emit({
|
|
70
|
+
name: "input-focused",
|
|
71
|
+
checked: this.checked,
|
|
72
|
+
type: "checkbox",
|
|
73
|
+
value: i.value,
|
|
74
|
+
target: i
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
connectedCallback() {
|
|
79
|
+
this.combinedDescribedBy = this.hint ? `${this.hintId} ${this.describedby}`.trim() : this.describedby, n("prism-switch");
|
|
80
|
+
}
|
|
81
|
+
render() {
|
|
82
|
+
const s = this.invalid;
|
|
83
|
+
return e(a, { key: "bc2951185da7d7aadebce421feaaff35e6f21eae" }, e("input", { key: "0fef1e8985d23a44c154acf3294b019da13704f3", onInput: (i) => this.inputChanged(i), onChange: (i) => this.valueChanged(i), onInvalid: (i) => this.onCheckValidity(i), onBlur: (i) => this.inputState(i), onFocus: (i) => this.inputState(i), onKeyDown: (i) => this.inputKeyDown(i), ref: (i) => this.element = i, checked: this.checked, id: this.prismId, name: this.name.replace(/ /g, "-"), type: "checkbox", disabled: this.disabled, required: this.required, "aria-invalid": this.invalid.toString(), "aria-required": this.required.toString(), "aria-describedby": this.combinedDescribedBy ? this.combinedDescribedBy : !1, value: this.value, class: { input: !0, loading: this.loading } }), e("label", { key: "53ae83056d71e79475378ccb43a7cc3f51b25d38", class: { label: !0, disabled: this.disabled, loading: this.loading, [this.alignment]: !0 }, htmlFor: this.prismId }, e("span", { key: "508329c9b78898119785c5362f685c52d7430442", class: { switch: !0, checked: this.checked, invalid: this.invalid } }, this.loading && e("span", { key: "802edd51afd3f88795dca3bad3ef2bd901a9206f", class: "loading-spinner" }, e("prism-loading", { key: "b7e96af8dcca56f6a6f5e5e31ae2e8add55392e0", as: "spinner", size: "sm" }))), e("prism-text", { key: "4a57e60bcb8b991c2ee627399699af03d50997ce", family: "body", size: "400", class: { "label-text": !0, "screen-reader-text": this.hideLabel } }, this.label, this.required && e(o, { key: "98619a47f7aafb21d010fcde9ca5f9f655b8801e" })), this.hint && e("prism-text", { key: "32809ace1e80da6cf9d6bc522789de93d4b7b788", as: "caption", priority: "secondary", class: { "hint-text": !0, "screen-reader-text": this.hideLabel } }, this.hint)), e("span", { key: "06f377c0eb4a5dcd685689d7e5ed25db1e0e5a3f", "aria-live": "polite", id: this.hintId }, s && e("span", { key: "92e697bfd812688994f75d0db341e566668b9108", class: {
|
|
84
|
+
"hint-container": !0,
|
|
85
|
+
"screen-reader-text": this.invalid && this.hideInvalid
|
|
86
|
+
} }, this.invalid && e("prism-icon", { key: "76e115f167e6843c812ba3319dbf9d59fd826434", display: "fill", slot: "icon-trailing", size: "xs", tone: "danger", name: "alert" }), e("prism-text", { key: "a39f4c3d9c1dea8f9649975709fda4628ae77371", class: {
|
|
87
|
+
"invalid-text": this.invalid,
|
|
88
|
+
"hint-text": !0
|
|
89
|
+
}, as: "caption" }, this.invalidMessage))));
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
h.style = d;
|
|
93
|
+
export {
|
|
94
|
+
h as prism_switch
|
|
95
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { r as s, h as a, H as t } from "./index-D9BZSjMp.js";
|
|
2
|
+
import { m as e } from "./index-44540db3-BN5vFHKr.js";
|
|
3
|
+
/*!
|
|
4
|
+
* Copyright (c) 2025 Comcast. Prism UI - v8.28.0 - made with ❤️ in Philadelphia
|
|
5
|
+
*/
|
|
6
|
+
const i = ":host{display:block}:host([hidden]){display:none}:host(.panel:focus-visible){outline-color:color-mix(in srgb var(--prism-color-border-primary-focus) var(--prism-alpha-tertiary-percentage),transparent);transition:outline var(--prism-animation-duration-normal) var(--prism-animation-timing-function)}@media (prefers-reduced-motion){:host(.panel:focus-visible){transition:none}}", o = i, n = class {
|
|
7
|
+
constructor(r) {
|
|
8
|
+
s(this, r), this.tab = void 0;
|
|
9
|
+
}
|
|
10
|
+
connectedCallback() {
|
|
11
|
+
e("prism-tab");
|
|
12
|
+
}
|
|
13
|
+
render() {
|
|
14
|
+
return a(t, { key: "578645c4fc3157266ad74669c1bab423bace5b14", class: "panel", role: "tabpanel", "aria-labelledby": this.tab }, a("slot", { key: "db0bed6dc98a2581d61c3459e7fae5f62df07095" }));
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
n.style = o;
|
|
18
|
+
export {
|
|
19
|
+
n as prism_tab
|
|
20
|
+
};
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { r as m, c, h as a, H as l, g as b } from "./index-D9BZSjMp.js";
|
|
2
|
+
import { g as p, i as d, m as h } from "./index-44540db3-BN5vFHKr.js";
|
|
3
|
+
/*!
|
|
4
|
+
* Copyright (c) 2025 Comcast. Prism UI - v8.28.0 - made with ❤️ in Philadelphia
|
|
5
|
+
*/
|
|
6
|
+
const f = '.sc-prism-tabs-h{display:grid}.horizontal.sc-prism-tabs-h{gap:var(--prism-tabs-horizontal-gap,.5rem);grid-template-areas:"tab-header" "tab-content";grid-template-columns:minmax(100%,1fr);grid-template-rows:1fr}.horizontal-below.sc-prism-tabs-h{gap:var(--prism-tabs-horizontal-gap,.5rem);grid-template-areas:"tab-content" "tab-header";grid-template-columns:minmax(100%,1fr);grid-template-rows:1fr}.horizontal.sc-prism-tabs-h .tab-header.sc-prism-tabs,.horizontal-below.sc-prism-tabs-h .tab-header.sc-prism-tabs{-webkit-overflow-scrolling:touch;display:flex;gap:var(--prism-spacer-size-xs);overflow-x:auto;padding:var(--prism-spacer-size-xs);white-space:nowrap}.vertical.sc-prism-tabs-h{gap:var(--prism-tabs-vertical-gap,1rem);grid-template-areas:"tab-header tab-content";grid-template-columns:-webkit-max-content 1fr;grid-template-columns:max-content 1fr;grid-template-rows:1fr}.vertical.sc-prism-tabs-h .tab-header.sc-prism-tabs{align-self:flex-start;display:flex;flex-direction:column;gap:var(--prism-spacer-size-xs);justify-self:start}.tab-header.sc-prism-tabs{background-color:var(--prism-tabs-controls-bg-color,transparent);bottom:var(--prism-tabs-controls-inset,0);grid-area:tab-header;left:var(--prism-tabs-controls-inset,0);position:var(--prism-tabs-controls-position,static);right:var(--prism-tabs-controls-inset,0);top:var(--prism-tabs-controls-inset,0);width:var(--prism-tabs-controls-width,auto)}.tab-content.sc-prism-tabs{grid-area:tab-content}.tab-item.sc-prism-tabs{align-items:var(--prism-tabs-item-align,center);-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:transparent;border-width:2px;color:var(--prism-color-text-primary-base);cursor:pointer;display:var(--prism-tabs-item-display,flex);flex:var(--prism-tabs-item-flex,0 1 auto);justify-content:var(--prism-tabs-item-justify,flex-start);margin:var(--prism-tabs-item-margin,inherit);outline:2px solid transparent;outline-offset:2px;transition:all var(--prism-animation-duration-normal) var(--prism-animation-timing-function)}.horizontal.sc-prism-tabs-h .tab-item.sc-prism-tabs,.horizontal-below.sc-prism-tabs-h .tab-item.sc-prism-tabs{border-radius:var(--prism-radius-size-xl);gap:var(--prism-spacer-size-sm);padding:var(--prism-spacer-size-sm) var(--prism-spacer-size-lg)}.horizontal.sc-prism-tabs-h .tab-item.col.sc-prism-tabs,.horizontal-below.sc-prism-tabs-h .tab-item.col.sc-prism-tabs{border-radius:var(--prism-radius-size-sm);flex-direction:column;gap:var(--prism-spacer-size-sm) 0;justify-content:flex-end}.vertical.sc-prism-tabs-h .tab-item.sc-prism-tabs{border-radius:var(--prism-radius-size-md);flex-direction:column;padding:var(--prism-spacer-size-xs) var(--prism-spacer-size-sm)}@media (min-width:768px){.horizontal.sc-prism-tabs-h .tab-item.sc-prism-tabs,.horizontal-below.sc-prism-tabs-h .tab-item.sc-prism-tabs,.vertical.sc-prism-tabs-h .tab-item.sc-prism-tabs{border-radius:var(--prism-radius-size-xl);flex-direction:row;gap:0 var(--prism-spacer-size-sm);padding:var(--prism-spacer-size-sm) var(--prism-spacer-size-lg)}}.tab-item.primary.sc-prism-tabs{background-color:var(--prism-color-material-primary-base)}.tab-item.primary.sc-prism-tabs:hover{background-color:var(--prism-color-material-primary-hover)}.tab-item.primary.sc-prism-tabs:not(.active):focus-visible{border-color:var(--prism-color-border-primary-focus)}.tab-item.secondary.sc-prism-tabs{background-color:var(--prism-color-material-secondary-base)}.tab-item.secondary.sc-prism-tabs:hover{background-color:var(--prism-color-material-secondary-hover)}.tab-item.secondary.sc-prism-tabs:not(.active):focus-visible{border-color:var(--prism-color-border-secondary-focus)}.tab-item.active.sc-prism-tabs:focus-visible{outline:2px solid var(--prism-color-border-brand-primary-focus);outline-offset:2px}.tab-item.active.sc-prism-tabs{background-color:var(--prism-color-material-brand-primary-base);border-color:var(--prism-color-border-brand-primary-base);color:var(--prism-color-text-brand-primary-base)}.button-text.sc-prism-tabs{font-family:var(--prism-font-button-md-family);font-size:var(--prism-font-button-md-size);font-weight:var(--prism-font-button-md-weight);letter-spacing:var(--prism-font-button-md-tracking);line-height:var(--prism-font-button-md-leading);text-transform:var(--prism-font-button-md-transform)}.vertical.sc-prism-tabs-h .button-text.sc-prism-tabs{max-width:-webkit-min-content;max-width:-moz-min-content;max-width:min-content}@media (min-width:768px){.vertical.sc-prism-tabs-h .button-text.sc-prism-tabs{max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}}@media (prefers-reduced-motion){.tab-item.sc-prism-tabs{transition:none}}.minimal.horizontal.sc-prism-tabs-h .tab-item.sc-prism-tabs,.minimal.vertical.sc-prism-tabs-h .tab-item.sc-prism-tabs{background-color:initial;border:0;border-bottom:2px solid transparent;border-radius:var(--prism-radius-size-none);padding:0 var(--prism-spacer-size-xs)}.minimal.horizontal-below.sc-prism-tabs-h .tab-item.sc-prism-tabs{background-color:initial;border:0;border-radius:var(--prism-radius-size-none);border-top:2px solid transparent;padding:0 var(--prism-spacer-size-xs)}.minimal.horizontal.sc-prism-tabs-h .tab-header.sc-prism-tabs,.minimal.horizontal-below.sc-prism-tabs-h .tab-header.sc-prism-tabs{gap:0 var(--prism-spacer-size-lg)}.minimal.vertical.sc-prism-tabs-h .tab-header.sc-prism-tabs{gap:var(--prism-spacer-size-lg) 0}.minimal.horizontal.sc-prism-tabs-h .tab-item.active.sc-prism-tabs:not(:focus-visible),.minimal.horizontal-below.sc-prism-tabs-h .tab-item.active.sc-prism-tabs:not(:focus-visible),.minimal.vertical.sc-prism-tabs-h .tab-item.active.sc-prism-tabs:not(:focus-visible){border-color:var(--prism-color-border-brand-primary-base)}.minimal.sc-prism-tabs-h .tab-item.sc-prism-tabs:hover{border-color:var(--prism-color-border-brand-primary-hover);border-radius:var(--prism-radius-size-none)}.minimal.sc-prism-tabs-h .tab-item.sc-prism-tabs:focus-visible{border-radius:var(--prism-radius-size-xs);border-top-color:transparent}.minimal.sc-prism-tabs-h .tab-item.sc-prism-tabs:not(.active):focus-visible{outline:2px solid var(--prism-color-border-brand-primary-focus)}.horizontal.sc-prism-tabs-h .tab-header.condensed.sc-prism-tabs,.horizontal-below.sc-prism-tabs-h .tab-header.condensed.sc-prism-tabs,.vertical.sc-prism-tabs-h .tab-header.condensed.sc-prism-tabs{gap:0}.horizontal.sc-prism-tabs-h .tab-header.fill.sc-prism-tabs{--prism-tabs-item-justify:center;--prism-tabs-item-flex:1 1 auto}', v = f, u = class {
|
|
7
|
+
constructor(t) {
|
|
8
|
+
m(this, t), this.prismClick = c(this, "prismClick", 7), this.prismChange = c(this, "prismChange", 7), this.uid = p(), this.activeTab = [], this.tabControl = (r) => {
|
|
9
|
+
let i = r.currentTarget, s = i.closest("[role=tablist]"), o = i.getAttribute("aria-controls"), n = d(i);
|
|
10
|
+
r.type === "click" && this.prismClick.emit({ tabId: i.id, panelId: o, target: i }), this.prismChange.emit({ name: `prism-tab-${r.type}`, tabId: i.id, panelId: o, target: i, action: r.type }), r.type === "click" && ((n.left || n.right) && i.scrollIntoView({ inline: "center" }), Array.from(s.querySelectorAll("button")).forEach((e) => {
|
|
11
|
+
e.classList.remove("active"), e.setAttribute("aria-selected", "false"), e.setAttribute("tabindex", "-1");
|
|
12
|
+
}), i.classList.add("active"), i.setAttribute("aria-selected", "true"), i.removeAttribute("tabindex"), this.childrenData.content.forEach((e) => {
|
|
13
|
+
e.id !== o ? e.setAttribute("hidden", "true") : (this.prismChange.emit({
|
|
14
|
+
name: "prism-tab-visibility",
|
|
15
|
+
tabId: i.id,
|
|
16
|
+
panelId: o,
|
|
17
|
+
target: i,
|
|
18
|
+
action: "visible"
|
|
19
|
+
}), e.removeAttribute("hidden"));
|
|
20
|
+
}));
|
|
21
|
+
}, this.tabKeyListeners = (r) => {
|
|
22
|
+
let i = r.currentTarget, s = i.closest("[role=tablist]");
|
|
23
|
+
switch (r.key) {
|
|
24
|
+
case "ArrowRight":
|
|
25
|
+
case "ArrowDown":
|
|
26
|
+
r.preventDefault(), i.nextElementSibling ? (i.nextElementSibling.focus(), this.layout !== "vertical" && i.nextElementSibling.scrollIntoView({ inline: "center" })) : (s.firstChild.focus(), this.layout !== "vertical" && s.firstChild.scrollIntoView({ inline: "center" }));
|
|
27
|
+
break;
|
|
28
|
+
case "ArrowLeft":
|
|
29
|
+
case "ArrowUp":
|
|
30
|
+
r.preventDefault(), i.previousElementSibling ? (i.previousElementSibling.focus(), this.layout !== "vertical" && i.previousElementSibling.scrollIntoView({ inline: "center" })) : (s.lastChild.focus(), this.layout !== "vertical" && s.lastChild.scrollIntoView({ inline: "center" }));
|
|
31
|
+
break;
|
|
32
|
+
case "Home":
|
|
33
|
+
r.preventDefault(), s.firstChild.focus(), this.layout !== "vertical" && s.firstChild.scrollIntoView({ inline: "center" });
|
|
34
|
+
break;
|
|
35
|
+
case "End":
|
|
36
|
+
r.preventDefault(), s.lastChild.focus(), this.layout !== "vertical" && s.lastChild.scrollIntoView({ inline: "center" });
|
|
37
|
+
break;
|
|
38
|
+
}
|
|
39
|
+
}, this.prismId = `prism-tabs-${this.uid}`, this.childrenData = {}, this.label = void 0, this.tabs = [], this.layout = "horizontal", this.controlsLayout = "row", this.controlsSpacing = "standard", this.variant = "contained", this.iconSize = "xs", this.tabTone = "primary";
|
|
40
|
+
}
|
|
41
|
+
connectedCallback() {
|
|
42
|
+
h("prism-tabs");
|
|
43
|
+
}
|
|
44
|
+
componentDidLoad() {
|
|
45
|
+
var t;
|
|
46
|
+
let r = (t = this.panelContentElement) === null || t === void 0 ? void 0 : t.children;
|
|
47
|
+
this.childrenData && (this.childrenData = {
|
|
48
|
+
hasChildren: (r == null ? void 0 : r.length) > 0,
|
|
49
|
+
numberOfChildren: r == null ? void 0 : r.length,
|
|
50
|
+
content: r ? Array.from(r) : []
|
|
51
|
+
}), this.tabs.forEach((i, s) => {
|
|
52
|
+
i.active === !0 && this.activeTab.push(s);
|
|
53
|
+
}), this.activeTab[0] || (this.activeTab[0] = 0), this.childrenData.numberOfChildren > 0 && this.childrenData.content.forEach((i, s) => {
|
|
54
|
+
s !== this.activeTab[0] && i.setAttribute("hidden", "true");
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
render() {
|
|
58
|
+
return a(l, { key: "036289dee2d17b9a8b1a947e4ae7870bab24c094", class: { [this.layout]: !0, [this.variant]: !0 } }, a("div", { key: "9ccc080ffc7c50d9084f6bfa305fa5c2c15f4fde", ref: (t) => this.buttonContentElement = t, role: "tablist", class: { "tab-header": !0, [this.controlsSpacing]: !0 }, "aria-label": this.label, id: this.prismId }, this.tabs.map((t) => {
|
|
59
|
+
var r, i;
|
|
60
|
+
return a("button", { role: "tab", class: { [this.tabTone]: !0, active: t.active === !0, "tab-item": !0, [this.controlsLayout]: !0 }, onFocus: (s) => this.tabControl(s), onClick: (s) => this.tabControl(s), onKeyDown: (s) => this.tabKeyListeners(s), "aria-selected": ((r = t.active) !== null && r !== void 0 ? r : !1).toString(), "aria-controls": t.controls, id: t.id, tabindex: t.active ? void 0 : "-1", "data-testid": t.id, type: "button" }, (t == null ? void 0 : t.leadingBadge) && a("prism-badge", { label: t == null ? void 0 : t.leadingBadgeLabel, tone: t != null && t.active ? "primary-brand" : "secondary", priority: (t == null ? void 0 : t.leadingBadgePriority) || "high" }, t == null ? void 0 : t.leadingBadge), ((i = t == null ? void 0 : t.icon) === null || i === void 0 ? void 0 : i.length) > 0 && a("prism-icon", { class: "button-icon", name: t.icon, size: t.size || this.iconSize }), a("span", { class: {
|
|
61
|
+
"button-text": !0
|
|
62
|
+
} }, t.title), (t == null ? void 0 : t.trailingBadge) && a("prism-badge", { label: t == null ? void 0 : t.trailingBadgeLabel, tone: t != null && t.active ? "primary-brand" : "secondary", priority: (t == null ? void 0 : t.trailingBadgePriority) || "high" }, t == null ? void 0 : t.trailingBadge));
|
|
63
|
+
})), a("span", { key: "83998406828148ed4b5462fb59f610f33b3d4f4a", ref: (t) => this.panelContentElement = t, class: "tab-content" }, a("slot", { key: "cc1da8f836716b0e1687911fa8e366d6df7c1087" })));
|
|
64
|
+
}
|
|
65
|
+
get host() {
|
|
66
|
+
return b(this);
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
u.style = v;
|
|
70
|
+
export {
|
|
71
|
+
u as prism_tabs
|
|
72
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { r as a, h as t, H as e } from "./index-D9BZSjMp.js";
|
|
2
|
+
import { m as r } from "./index-44540db3-BN5vFHKr.js";
|
|
3
|
+
/*!
|
|
4
|
+
* Copyright (c) 2025 Comcast. Prism UI - v8.28.0 - made with ❤️ in Philadelphia
|
|
5
|
+
*/
|
|
6
|
+
const n = ":host{color:inherit;display:var(--prism-text-display)}:host(.text-block){--prism-text-display:block}.text{color:inherit;display:var(--prism-text-display);font-size:inherit;font-weight:inherit;line-height:var(--prism-text-line-height,inherit);margin:var(--prism-text-spacing-margin,0);max-width:var(--prism-text-max-width,auto);overflow:var(--prism-text-visual-overflow,inherit);padding:var(--prism-text-spacing-padding,0);-webkit-text-decoration-line:inherit;text-decoration-line:inherit;text-overflow:var(--prism-text-overflow,inherit);text-transform:var(--prism-text-transform,inherit);word-spacing:var(--prism-text-word-spacing,inherit)}.display-100{font-family:var(--prism-font-display-100-family);font-size:var(--prism-font-display-100-size);font-weight:var(--prism-font-display-100-weight);letter-spacing:var(--prism-font-display-100-tracking);line-height:var(--prism-font-display-100-leading)}.display-200{font-family:var(--prism-font-display-200-family);font-size:var(--prism-font-display-200-size);font-weight:var(--prism-font-display-200-weight);letter-spacing:var(--prism-font-display-200-tracking);line-height:var(--prism-font-display-200-leading)}.display-300{font-family:var(--prism-font-display-300-family);font-size:var(--prism-font-display-300-size);font-weight:var(--prism-font-display-300-weight);letter-spacing:var(--prism-font-display-300-tracking);line-height:var(--prism-font-display-300-leading)}.headline-100{font-family:var(--prism-font-headline-100-family);font-size:var(--prism-font-headline-100-size);font-weight:var(--prism-font-headline-100-weight);letter-spacing:var(--prism-font-headline-100-tracking);line-height:var(--prism-font-headline-100-leading)}.headline-200{font-family:var(--prism-font-headline-200-family);font-size:var(--prism-font-headline-200-size);font-weight:var(--prism-font-headline-200-weight);letter-spacing:var(--prism-font-headline-200-tracking);line-height:var(--prism-font-headline-200-leading)}.headline-300{font-family:var(--prism-font-headline-300-family);font-size:var(--prism-font-headline-300-size);font-weight:var(--prism-font-headline-300-weight);letter-spacing:var(--prism-font-headline-300-tracking);line-height:var(--prism-font-headline-300-leading)}.headline-400{font-family:var(--prism-font-headline-400-family);font-size:var(--prism-font-headline-400-size);font-weight:var(--prism-font-headline-400-weight);letter-spacing:var(--prism-font-headline-400-tracking);line-height:var(--prism-font-headline-400-leading)}.headline-500{font-family:var(--prism-font-headline-500-family);font-size:var(--prism-font-headline-500-size);font-weight:var(--prism-font-headline-500-weight);letter-spacing:var(--prism-font-headline-500-tracking);line-height:var(--prism-font-headline-500-leading)}.body-100{font-family:var(--prism-font-body-100-family);font-size:var(--prism-font-body-100-size);font-weight:var(--prism-font-body-100-weight);letter-spacing:var(--prism-font-body-100-tracking);line-height:var(--prism-font-body-100-leading)}.body-200{font-family:var(--prism-font-body-200-family);font-size:var(--prism-font-body-200-size);font-weight:var(--prism-font-body-200-weight);letter-spacing:var(--prism-font-body-200-tracking);line-height:var(--prism-font-body-200-leading)}.body-300{font-family:var(--prism-font-body-300-family);font-size:var(--prism-font-body-300-size);font-weight:var(--prism-font-body-300-weight);letter-spacing:var(--prism-font-body-300-tracking);line-height:var(--prism-font-body-300-leading)}.body-400{font-family:var(--prism-font-body-400-family);font-size:var(--prism-font-body-400-size);font-weight:var(--prism-font-body-400-weight);letter-spacing:var(--prism-font-body-400-tracking);line-height:var(--prism-font-body-400-leading)}.body-500{font-family:var(--prism-font-body-500-family);font-size:var(--prism-font-body-500-size);font-weight:var(--prism-font-body-500-weight);letter-spacing:var(--prism-font-body-500-tracking);line-height:var(--prism-font-body-500-leading)}.button-sm{font-family:var(--prism-font-button-sm-family);font-size:var(--prism-font-button-sm-size);font-weight:var(--prism-font-button-sm-weight);letter-spacing:var(--prism-font-button-sm-tracking);line-height:var(--prism-font-button-sm-leading);text-transform:var(--prism-font-button-sm-transform)}.button-md{font-family:var(--prism-font-button-md-family);font-size:var(--prism-font-button-md-size);font-weight:var(--prism-font-button-md-weight);letter-spacing:var(--prism-font-button-md-tracking);line-height:var(--prism-font-button-md-leading);text-transform:var(--prism-font-button-md-transform)}.callout-sm{font-family:var(--prism-font-callout-sm-family);font-size:var(--prism-font-callout-sm-size);font-weight:var(--prism-font-callout-sm-weight);letter-spacing:var(--prism-font-callout-sm-tracking);line-height:var(--prism-font-callout-sm-leading);text-transform:var(--prism-font-callout-sm-transform)}.callout-md{font-family:var(--prism-font-callout-md-family);font-size:var(--prism-font-callout-md-size);font-weight:var(--prism-font-callout-md-weight);letter-spacing:var(--prism-font-callout-md-tracking);line-height:var(--prism-font-callout-md-leading);text-transform:var(--prism-font-callout-md-transform)}.caption{font-family:var(--prism-font-caption-base-family);font-size:var(--prism-font-caption-base-size);font-weight:var(--prism-font-caption-base-weight);letter-spacing:var(--prism-font-caption-base-tracking);line-height:var(--prism-font-caption-base-leading)}.tag{font-family:var(--prism-font-tag-base-family);font-size:var(--prism-font-tag-base-size);font-weight:var(--prism-font-tag-base-weight);letter-spacing:var(--prism-font-tag-base-tracking);line-height:var(--prism-font-tag-base-leading)}.ellipsis{display:block;line-height:1.1;max-width:var(--prism-text-max-width,auto);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.secondary{opacity:var(--prism-text-priority,var(--prism-alpha-secondary))}.inactive{opacity:var(--prism-text-priority,var(--prism-alpha-disabled))}.tertiary{opacity:var(--prism-text-priority,var(--prism-alpha-tertiary))}.expressive{-webkit-background-clip:text;background-clip:text;background-image:var(--prism-color-gradient-linear-brand-primary);-webkit-box-decoration-break:clone;box-decoration-break:clone;color:transparent}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}", s = n, o = class {
|
|
7
|
+
constructor(i) {
|
|
8
|
+
a(this, i), this.tag = "p", this.family = "body", this.size = "300", this.as = void 0, this.ellipsis = !1, this.priority = "primary", this.expressive = !1;
|
|
9
|
+
}
|
|
10
|
+
connectedCallback() {
|
|
11
|
+
r("prism-text");
|
|
12
|
+
}
|
|
13
|
+
render() {
|
|
14
|
+
const i = this.tag;
|
|
15
|
+
return t(e, { key: "3d46d94e2051bfa8baddd731aa79d9681bba1954", class: { "text-block": this.tag !== "span" } }, t(i, { key: "b7c15731fc5f9e3bc2e1774229cb6c0f67db2994", class: {
|
|
16
|
+
[`${this.family}-${this.size}`]: this.as === void 0,
|
|
17
|
+
[`${this.as}`]: this.as !== void 0,
|
|
18
|
+
text: !0,
|
|
19
|
+
[this.priority]: !0,
|
|
20
|
+
ellipsis: this.ellipsis,
|
|
21
|
+
expressive: this.expressive
|
|
22
|
+
} }, t("slot", { key: "5404bcd092d932753248c948a2f28d0cc71aabda" })));
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
o.style = s;
|
|
26
|
+
export {
|
|
27
|
+
o as prism_text
|
|
28
|
+
};
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
import { r as h, c as p, h as r, H as v, g, F as b } from "./index-D9BZSjMp.js";
|
|
2
|
+
import { g as x, u, m as y, a as m, e as f, d as C } from "./index-44540db3-BN5vFHKr.js";
|
|
3
|
+
/*!
|
|
4
|
+
* Copyright (c) 2025 Comcast. Prism UI - v8.28.0 - made with ❤️ in Philadelphia
|
|
5
|
+
*/
|
|
6
|
+
const _ = ":host{display:block;margin:var(--prism-treelist-spacing-margin,var(--prism-spacer-size-xs) 0);max-width:var(--prism-treelist-max-width,100%);position:relative}.menu-item,.menu-items{list-style-type:none;margin:0;padding:0}.list-children{display:grid;grid-template-rows:0fr;margin-left:1.75rem;max-height:0;opacity:0;overflow:hidden;transition:all var(--prism-animation-duration-normal) var(--prism-animation-timing-function);visibility:hidden}li.expanded>ul.list-children{grid-template-rows:1fr;max-height:-webkit-max-content;max-height:-moz-max-content;max-height:max-content;opacity:1;overflow:visible;visibility:visible}.collapse{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.fadeout{opacity:0;transition:opacity var(--prism-animation-duration-normal) var(--prism-animation-timing-function)}.tree-list-wrapper{display:flex}.tree-list,.tree-list ul{list-style-type:none;margin:0;padding:0}.tree-list ul>li{margin-left:1.75rem}.tree-list .menu-item{padding-bottom:.75rem;padding-top:.75rem}.tree-list .menu-item-parent{padding-bottom:.375rem;padding-top:.375rem}.tree-list .list-items{margin-top:.75rem}.tree-list .single-menu-item{align-items:center;display:flex}.single-menu-item{width:100%}.badge{padding-left:var(--prism-spacer-size-md);-webkit-text-decoration:none;text-decoration:none}.children-icon,.trailing-icon{margin-left:auto}@media (prefers-reduced-motion){.fadeout,.list-children{transition:none}}.relative{position:relative}.pointer-events-none{pointer-events:none}", k = _, w = class {
|
|
7
|
+
constructor(d) {
|
|
8
|
+
h(this, d), this.prismMenu = p(this, "prismMenu", 7), this.prismClick = p(this, "prismClick", 7), this.prismClose = p(this, "prismClose", 7), this._uid = x(), this.mapPointers = (s, e) => {
|
|
9
|
+
var n, o;
|
|
10
|
+
const i = Object.assign({}, s), l = !!(!((n = i == null ? void 0 : i.children) === null || n === void 0) && n.length);
|
|
11
|
+
return e && (i._parentRef = e), e && l && ((o = i == null ? void 0 : i.children) === null || o === void 0 || o.map((t) => this.mapPointers(t, i))), i.expanded && (i._preserveExpanded = !0, this.initiallyExpanded.push(i)), i.active && this.activeChildren.push(i), i;
|
|
12
|
+
}, this.initializeMenu = () => (this.activeChildren = [], this.initiallyExpanded = [], this.items.map((e, n) => {
|
|
13
|
+
var o;
|
|
14
|
+
const i = Object.assign(Object.assign({}, e), { uid: `${u((e == null ? void 0 : e.label) || (e == null ? void 0 : e.title))}-${this._uid}-${n}` }), l = !!(!((o = i == null ? void 0 : i.children) === null || o === void 0) && o.length);
|
|
15
|
+
return i.expanded && (i._preserveExpanded = !0, this.initiallyExpanded.push(i)), l && (i.children = i.children.map((t) => this.mapPointers(t, i))), i;
|
|
16
|
+
})), this.escapeKeyHandler = (s) => {
|
|
17
|
+
s.code === "Escape" && this.el.shadowRoot.querySelectorAll("li.expanded prism-button[data-root].tree-list-root").forEach((o) => {
|
|
18
|
+
var i, l;
|
|
19
|
+
const t = o.parentElement.querySelector("li.expanded prism-button.children-icon");
|
|
20
|
+
this._itemClickToggle(t), this.toggleFocusChildren(), o.setFocus(), this.prismClose.emit({ name: "root-dropdown-closed-escape-key", id: (i = o.children[0]) === null || i === void 0 ? void 0 : i.id, label: (l = o.children[0]) === null || l === void 0 ? void 0 : l.textContent });
|
|
21
|
+
});
|
|
22
|
+
}, this.outsideClickHandler = (s) => {
|
|
23
|
+
const e = s.target, n = this.el.tagName.toLowerCase(), i = this.el.shadowRoot.querySelectorAll("li.expanded prism-button[data-root].tree-list-root");
|
|
24
|
+
e.closest(n) !== this.el && i.forEach((l) => {
|
|
25
|
+
var t, a;
|
|
26
|
+
const c = l.parentElement.querySelector("li.expanded prism-button.children-icon");
|
|
27
|
+
this._itemClickToggle(c), this.toggleFocusChildren(), this.prismClose.emit({ name: "root-dropdown-closed-click-outside-menu", id: (t = l.children[0]) === null || t === void 0 ? void 0 : t.id, label: (a = l.children[0]) === null || a === void 0 ? void 0 : a.textContent });
|
|
28
|
+
});
|
|
29
|
+
}, this.subMenuExpanded = !1, this.subMenuIcon = "caret_down_button", this.menuItemClicked = (s, e) => {
|
|
30
|
+
const n = s.currentTarget;
|
|
31
|
+
if (e != null && e.children)
|
|
32
|
+
this._itemClickToggle(n);
|
|
33
|
+
else {
|
|
34
|
+
const { label: o, prismId: i } = n;
|
|
35
|
+
this.prismClick.emit({
|
|
36
|
+
data: e,
|
|
37
|
+
id: i,
|
|
38
|
+
label: o,
|
|
39
|
+
name: "menu-item",
|
|
40
|
+
target: n,
|
|
41
|
+
isParent: !1,
|
|
42
|
+
isRoot: (e == null ? void 0 : e.root) || !1
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
this.toggleFocusChildren();
|
|
46
|
+
}, this._itemClickToggle = (s) => {
|
|
47
|
+
var e;
|
|
48
|
+
const n = s.querySelector("[data-type=icon]");
|
|
49
|
+
s.expanded = !s.expanded, n == null || n.setAttribute("name", s.expanded ? "caret_up_button" : this.subMenuIcon), (e = s.closest("li")) === null || e === void 0 || e.classList.toggle("expanded");
|
|
50
|
+
}, this.items = [], this.useCustomRouting = void 0, this.activeChildren = [], this.initiallyExpanded = [];
|
|
51
|
+
}
|
|
52
|
+
// Watch for Menu Object Changes
|
|
53
|
+
updateMenu() {
|
|
54
|
+
}
|
|
55
|
+
// Init
|
|
56
|
+
connectedCallback() {
|
|
57
|
+
y("prism-treelist");
|
|
58
|
+
}
|
|
59
|
+
toggleFocusChildren() {
|
|
60
|
+
var d, s;
|
|
61
|
+
(d = this.el.shadowRoot) === null || d === void 0 || d.querySelectorAll("li").forEach((n) => {
|
|
62
|
+
m(n).forEach(f);
|
|
63
|
+
});
|
|
64
|
+
const e = (s = this.el.shadowRoot) === null || s === void 0 ? void 0 : s.querySelectorAll("li.menu-item-parent:not(.expanded)");
|
|
65
|
+
e == null || e.forEach((n) => {
|
|
66
|
+
m(n.querySelector("ul")).forEach(C);
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
componentDidLoad() {
|
|
70
|
+
var d;
|
|
71
|
+
(d = this.el) === null || d === void 0 || d.addEventListener("keydown", this.escapeKeyHandler), document.addEventListener("mousedown", this.outsideClickHandler);
|
|
72
|
+
}
|
|
73
|
+
disconnectedCallback() {
|
|
74
|
+
var d;
|
|
75
|
+
(d = this.el) === null || d === void 0 || d.removeEventListener("keydown", this.escapeKeyHandler), document.removeEventListener("mousedown", this.outsideClickHandler);
|
|
76
|
+
}
|
|
77
|
+
componentDidRender() {
|
|
78
|
+
this.prismMenu.emit({ menu: this.items }), this.toggleFocusChildren();
|
|
79
|
+
}
|
|
80
|
+
componentWillRender() {
|
|
81
|
+
this.items = this.initializeMenu();
|
|
82
|
+
}
|
|
83
|
+
render() {
|
|
84
|
+
const d = (e) => {
|
|
85
|
+
var n;
|
|
86
|
+
const o = (n = e == null ? void 0 : e.children) === null || n === void 0 ? void 0 : n.length;
|
|
87
|
+
return r("div", { class: "single-menu-item" }, r("prism-button", { class: "tree-list-root", display: "link", tone: e.active ? "primary-brand" : "primary", target: e.target, expanded: o ? (e == null ? void 0 : e.expanded) || (e == null ? void 0 : e._preserveExpanded) || !1 : void 0, href: e.href, onPrismClick: (i) => {
|
|
88
|
+
this.useCustomRouting && i.preventDefault(), e != null && e.onPrismClick && (e == null || e.onPrismClick(i)), this.prismClick.emit({
|
|
89
|
+
id: e.id,
|
|
90
|
+
label: e.label,
|
|
91
|
+
title: e.title,
|
|
92
|
+
name: "tree-list-menu-item",
|
|
93
|
+
target: i.currentTarget,
|
|
94
|
+
isParent: (e == null ? void 0 : e.parent) || !1,
|
|
95
|
+
isRoot: (e == null ? void 0 : e.root) || !1
|
|
96
|
+
});
|
|
97
|
+
}, "data-root": e == null ? void 0 : e.root, "data-child": !e.root, "data-preserve-expanded": e == null ? void 0 : e._preserveExpanded }, e.icon && r("prism-icon", { slot: "icon", class: "icon", tone: e.active ? "primary-brand" : "primary", name: e.icon, size: "sm" }), r("span", null, e.title), e.label && r("prism-badge", { label: e.badgeA11yLabel, priority: e.active ? "high" : void 0, tone: e.active ? "primary-brand" : void 0, slot: "label", class: "badge", size: "md" }, e.label)), e.children && r("prism-button", { size: "xs", label: `Toggle Sub Menu for ${e.title}`, expanded: this.subMenuExpanded, onPrismClick: (i) => this.menuItemClicked(i, e), display: "ghost-icon", class: { "children-icon": !0 } }, r("prism-icon", { size: "xs", name: this.subMenuIcon, "data-type": "icon" })));
|
|
98
|
+
}, s = (e) => {
|
|
99
|
+
var n, o;
|
|
100
|
+
const i = (n = e == null ? void 0 : e.children) === null || n === void 0 ? void 0 : n.length, l = (t, a) => `${u((t == null ? void 0 : t.label) || (t == null ? void 0 : t.title))}-${this._uid}-${a}`;
|
|
101
|
+
return r("ul", { class: {
|
|
102
|
+
"list-children": !0
|
|
103
|
+
} }, i > 0 && ((o = e == null ? void 0 : e.children) === null || o === void 0 ? void 0 : o.map((t, a) => {
|
|
104
|
+
var c;
|
|
105
|
+
return r(b, null, ((c = t == null ? void 0 : t.children) === null || c === void 0 ? void 0 : c.length) > 0 ? r("li", { key: `${t.uid}-${a}`, id: t != null && t.root ? `menu-root-${t.uid}` : `menu-child-${l(t, a)}`, "data-uid": t.uid, class: {
|
|
106
|
+
"menu-item-parent": i > 0,
|
|
107
|
+
"menu-item": i <= 0,
|
|
108
|
+
expanded: (t == null ? void 0 : t.expanded) || (t == null ? void 0 : t._preserveExpanded)
|
|
109
|
+
} }, r(d, Object.assign({}, t)), r(s, Object.assign({}, t))) : r("li", { id: t != null && t.root ? `menu-root-${t.uid}` : `menu-child-${l(t, a)}`, "data-uid": e.uid, key: `${t.uid}-${a}`, class: { "menu-item": !0 } }, r(d, Object.assign({}, t))));
|
|
110
|
+
})));
|
|
111
|
+
};
|
|
112
|
+
return r(v, null, r("div", { class: "tree-list-wrapper" }, r("ul", { class: {
|
|
113
|
+
"tree-list": !0
|
|
114
|
+
}, part: "items" }, this.items.map((e, n) => {
|
|
115
|
+
var o;
|
|
116
|
+
return r("li", { key: `${e.uid}-${n}`, id: `menu-root-${e.uid}`, "data-uid": e.uid, "data-root": e.root, class: {
|
|
117
|
+
"menu-item-parent": ((o = e == null ? void 0 : e.children) === null || o === void 0 ? void 0 : o.length) > 0,
|
|
118
|
+
"menu-item": !(e != null && e.children),
|
|
119
|
+
expanded: (e == null ? void 0 : e.expanded) || (e == null ? void 0 : e._preserveExpanded)
|
|
120
|
+
} }, r(d, Object.assign({}, e)), e.children && r(s, Object.assign({}, e)));
|
|
121
|
+
}), r("slot", null))));
|
|
122
|
+
}
|
|
123
|
+
get el() {
|
|
124
|
+
return g(this);
|
|
125
|
+
}
|
|
126
|
+
static get watchers() {
|
|
127
|
+
return {
|
|
128
|
+
items: ["updateMenu"]
|
|
129
|
+
};
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
w.style = k;
|
|
133
|
+
export {
|
|
134
|
+
w as prism_treelist
|
|
135
|
+
};
|