@ed.yakovich/component-library 0.0.15 → 0.0.16
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/Accordion/context/index.js +7 -0
- package/dist/components/Accordion/index.js +38 -0
- package/dist/components/Accordion/types/index.js +1 -0
- package/dist/components/Cart/index.js +35 -0
- package/dist/components/EquipmentSummary/context/index.js +10 -0
- package/dist/components/EquipmentSummary/index.js +65 -0
- package/dist/components/EquipmentSummary/types/index.js +1 -0
- package/dist/components/Grid/index.js +19 -0
- package/dist/components/HeroBanner/context/index.js +7 -0
- package/dist/components/HeroBanner/index.js +33 -0
- package/dist/components/HeroBanner/types/index.js +1 -0
- package/dist/components/InfoBanner/index.js +24 -4
- package/dist/components/Nav/index.js +23 -0
- package/dist/components/OfferCards/context/index.js +7 -0
- package/dist/components/OfferCards/index.js +30 -0
- package/dist/components/OfferCards/subComponents/OfferCard.js +62 -0
- package/dist/components/OfferCards/types/index.js +1 -0
- package/dist/components/SaleBanner/context/index.js +7 -0
- package/dist/components/SaleBanner/index.js +59 -0
- package/dist/components/SaleBanner/types/index.js +1 -0
- package/dist/{index-ba31999b-V1s4iffq.js → index-0d8e0844-BJzWsYCM.js} +2443 -2491
- package/dist/index-C9Rf5U9q.js +29143 -0
- package/dist/index-b30029d4-E1YxEHFH.js +12 -0
- package/dist/index-e6818ded-r_t6ryaW.js +57 -0
- package/dist/{index.esm-a7c99373-DUoLYEEM.js → index.esm-322571ff-D1REhsOg.js} +1 -1
- package/dist/lib/components/Accordion/context/index.d.ts +10 -0
- package/dist/lib/components/Accordion/index.d.ts +2 -0
- package/dist/lib/components/Accordion/types/index.d.ts +13 -0
- package/dist/lib/components/Cart/index.d.ts +6 -0
- package/dist/lib/components/EquipmentSummary/context/index.d.ts +10 -0
- package/dist/lib/components/EquipmentSummary/index.d.ts +2 -0
- package/dist/lib/components/EquipmentSummary/types/index.d.ts +14 -0
- package/dist/lib/components/Grid/index.d.ts +13 -0
- package/dist/lib/components/HeroBanner/context/index.d.ts +10 -0
- package/dist/lib/components/HeroBanner/index.d.ts +2 -0
- package/dist/lib/components/HeroBanner/types/index.d.ts +11 -0
- package/dist/lib/components/Nav/index.d.ts +8 -0
- package/dist/lib/components/OfferCards/context/index.d.ts +9 -0
- package/dist/lib/components/OfferCards/index.d.ts +2 -0
- package/dist/lib/components/OfferCards/subComponents/OfferCard.d.ts +3 -0
- package/dist/lib/components/OfferCards/types/index.d.ts +26 -0
- package/dist/lib/components/SaleBanner/context/index.d.ts +10 -0
- package/dist/lib/components/SaleBanner/index.d.ts +2 -0
- package/dist/lib/components/SaleBanner/types/index.d.ts +11 -0
- package/dist/lib/main.d.ts +13 -0
- package/dist/link-DO_Jvm9n.js +685 -0
- package/dist/main.js +32 -6
- package/dist/prism-accordion.entry-DeyFGNx-.js +51 -0
- package/dist/prism-avatar_2.entry-MLbdVrJg.js +68 -0
- package/dist/prism-badge.entry-BG5y7O5U.js +58 -0
- package/dist/prism-banner.entry-DChrjpFH.js +82 -0
- package/dist/prism-breadcrumb.entry-1YzYlKen.js +33 -0
- package/dist/prism-button_2.entry-DO8IGIoS.js +110 -0
- package/dist/prism-card.entry-DQ6P4TZP.js +119 -0
- package/dist/prism-carousel.entry-BA8zsHRW.js +3111 -0
- package/dist/prism-checkbox-group.entry-CP4-gghb.js +62 -0
- package/dist/prism-checkbox.entry-CJCy8fvC.js +99 -0
- package/dist/prism-data-table.entry--0djw8ls.js +10475 -0
- package/dist/prism-datepicker.entry-DPm7tpKB.js +249 -0
- package/dist/{prism-form.entry-C8VzGp6c.js → prism-form.entry-CS1zRoMt.js} +11 -11
- package/dist/prism-grid.entry-jcx2aMUm.js +28 -0
- package/dist/prism-header.entry-CBSIpa0M.js +202 -0
- package/dist/prism-hero.entry-B0CKL5y9.js +23 -0
- package/dist/prism-icon_2.entry-Aja4QGUK.js +118 -0
- package/dist/prism-image.entry-B--khr6E.js +38 -0
- package/dist/prism-input-file.entry-i5qJkwEK.js +119 -0
- package/dist/prism-input-otp.entry-DXoARuzH.js +63 -0
- package/dist/prism-input-text.entry-D4QQ-dYX.js +228 -0
- package/dist/prism-input-textarea.entry-eeQHnhqC.js +140 -0
- package/dist/prism-layout.entry-bfKqOEnU.js +20 -0
- package/dist/prism-lineitem.entry-YIRZPVe_.js +44 -0
- package/dist/prism-menu.entry-BIlRCiaA.js +231 -0
- package/dist/prism-modal.entry-Kc-SpAR-.js +94 -0
- package/dist/prism-pagination.entry-BCo9aMdq.js +60 -0
- package/dist/prism-popover.entry-LmDvzCiR.js +1013 -0
- package/dist/prism-popper.entry-BqrcyTkE.js +959 -0
- package/dist/prism-progress.entry-29_ezvop.js +79 -0
- package/dist/prism-radio-group.entry-cL6AqjTk.js +66 -0
- package/dist/prism-radio.entry-CM_vZFZA.js +101 -0
- package/dist/prism-select.entry-B6A3gk7B.js +230 -0
- package/dist/prism-switch.entry-CtEfKB58.js +95 -0
- package/dist/prism-tab.entry-DIDUhFlk.js +20 -0
- package/dist/prism-tabs.entry-Cj3dW5_E.js +70 -0
- package/dist/prism-tooltip.entry-DEdY5eRd.js +52 -0
- package/dist/prism-typeahead.entry-D2XrvXaG.js +1234 -0
- package/package.json +4 -2
- package/dist/index-44540db3-BN5vFHKr.js +0 -44
- package/dist/index-4d46d9ca-BtyZMEt1.js +0 -12
- package/dist/index-D9BZSjMp.js +0 -21158
- package/dist/prism-accordion.entry-D4g7wdXB.js +0 -51
- package/dist/prism-avatar_3.entry-C1H9bg9y.js +0 -335
- package/dist/prism-badge.entry-CWLalQsR.js +0 -56
- package/dist/prism-banner.entry-D1sce4tY.js +0 -105
- package/dist/prism-breadcrumb.entry-C282yHQl.js +0 -33
- package/dist/prism-button_3.entry-DIg1AEXF.js +0 -240
- package/dist/prism-card.entry-DaxGD-uX.js +0 -152
- package/dist/prism-carousel.entry-BGmaoDVM.js +0 -3346
- package/dist/prism-checkbox-group.entry-Dwa_mvjd.js +0 -62
- package/dist/prism-checkbox.entry-CZvx2AHI.js +0 -116
- package/dist/prism-data-table.entry-DACAS8BE.js +0 -3591
- package/dist/prism-datepicker.entry-CHUyjilE.js +0 -279
- package/dist/prism-dialog.entry-DdO9Kt32.js +0 -73
- package/dist/prism-drawer.entry-Dn0rvW9U.js +0 -43
- package/dist/prism-header.entry-D0PypuC3.js +0 -227
- package/dist/prism-hero.entry-DQ8G7Jb_.js +0 -23
- package/dist/prism-image.entry-tx9Pc3k_.js +0 -38
- package/dist/prism-input-file.entry-CO-2LZxG.js +0 -119
- package/dist/prism-input-otp.entry-ZAxExI2D.js +0 -79
- package/dist/prism-input-text.entry-EXsN4rgi.js +0 -278
- package/dist/prism-input-textarea.entry-CRqY4mr9.js +0 -145
- package/dist/prism-input-time.entry-BJ9he6MX.js +0 -85
- package/dist/prism-layout.entry-ulDWjtj8.js +0 -20
- package/dist/prism-lineitem.entry-DJk6X6mR.js +0 -47
- package/dist/prism-modal.entry-C795YZic.js +0 -95
- package/dist/prism-pagination.entry-DYQieAu3.js +0 -69
- package/dist/prism-popover.entry-BgLcACZw.js +0 -1114
- package/dist/prism-progress.entry-Z21rpoTm.js +0 -79
- package/dist/prism-radio_2.entry-C0HPCb3G.js +0 -159
- package/dist/prism-select.entry-B_l-ab1d.js +0 -286
- package/dist/prism-switch.entry-OkC8X1bD.js +0 -95
- package/dist/prism-tab.entry-szftB_wL.js +0 -20
- package/dist/prism-tabs.entry-0UR3WF52.js +0 -72
- package/dist/prism-text.entry-BEAZ8xEV.js +0 -28
- package/dist/prism-treelist.entry-UX4FM4Bi.js +0 -135
- package/dist/prism-typeahead.entry-CwOiAFQE.js +0 -1264
- package/dist/purify-9647b094-0-ZyuBNz.js +0 -572
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import { r as p, h as i, F as b, H as g } from "./index-D9BZSjMp.js";
|
|
2
|
-
import { m as f } from "./index-44540db3-BN5vFHKr.js";
|
|
3
|
-
import { d as m } from "./index-ba31999b-V1s4iffq.js";
|
|
4
|
-
/*!
|
|
5
|
-
* Copyright (c) 2025 Comcast. Prism UI - v8.28.0 - made with ❤️ in Philadelphia
|
|
6
|
-
*/
|
|
7
|
-
const x = ":host{align-items:center;display:flex}.wrap{width:100%}.line{background-color:var(--prism-color-material-secondary-down);border-radius:var(--prism-radius-size-xs);height:var(--prism-spacer-size-xs);margin-right:var(--prism-spacer-size-sm);overflow:hidden;position:relative}.progress-value{bottom:0;left:0;position:absolute;top:0;transform-origin:left;transition:all var(--prism-animation-duration-normal) var(--prism-animation-timing-function);width:100%}.base-track{stroke:var(--prism-color-material-secondary-down)}.circular{align-items:center;display:flex;height:100%;justify-content:center;margin-left:auto;margin-right:auto;position:relative;width:100%}.circle{overflow:visible;position:absolute;z-index:var(--prism-layout-z-index-base)}.circular .value{z-index:50}.primary-brand{background-color:var(--prism-color-fill-brand-primary-base)}.stroke-primary-brand{color:var(--prism-color-text-brand-primary-base)}.secondary-brand{background-color:var(--prism-color-fill-brand-secondary-base)}.stroke-secondary-brand{color:var(--prism-color-text-brand-secondary-base)}.caution{background-color:var(--prism-color-fill-caution-base)}.stroke-caution{color:var(--prism-color-text-caution-base)}.info{background-color:var(--prism-color-fill-info-base)}.stroke-info{color:var(--prism-color-text-info-base)}.primary{background-color:var(--prism-color-fill-primary-base)}.stroke-primary{color:var(--prism-color-text-primary-base)}.secondary{background-color:var(--prism-color-fill-secondary-base)}.stroke-secondary{color:var(--prism-color-text-secondary-base)}.danger{background-color:var(--prism-color-fill-danger-base)}.stroke-danger{color:var(--prism-color-text-danger-base)}.success{background-color:var(--prism-color-fill-success-base)}.stroke-success{color:var(--prism-color-text-success-base)}@media (prefers-reduced-motion){.progress-value{transition:none}}.sr-use-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}", y = x, w = class {
|
|
8
|
-
constructor(s) {
|
|
9
|
-
p(this, s), this._transform = (t) => {
|
|
10
|
-
let e = t - 100;
|
|
11
|
-
return this.variant === "line" ? `translateX(${e}%)` : `translateX(${Math.abs(0)})`;
|
|
12
|
-
}, this._feedback = (t) => this.secondsElapsed >= 0 ? m.format(m.addSeconds(/* @__PURE__ */ new Date(0), this.duration - this.secondsElapsed), "mm:ss") : `${t}%`, this._circularSizeConversion = (t) => {
|
|
13
|
-
switch (t) {
|
|
14
|
-
case "sm":
|
|
15
|
-
this.size = 96, this.strokeWidth = 4, this.textSize = "300", this.textFamily = "headline";
|
|
16
|
-
break;
|
|
17
|
-
case "md":
|
|
18
|
-
this.size = 136, this.strokeWidth = 6, this.textSize = "100", this.textFamily = "display";
|
|
19
|
-
break;
|
|
20
|
-
case "lg":
|
|
21
|
-
this.size = 206, this.strokeWidth = 8, this.textSize = "200", this.textFamily = "display";
|
|
22
|
-
break;
|
|
23
|
-
default:
|
|
24
|
-
this.size = 96, this.strokeWidth = 4, this.textSize = "300", this.textFamily = "headline";
|
|
25
|
-
break;
|
|
26
|
-
}
|
|
27
|
-
}, this._countDown = () => {
|
|
28
|
-
if (this.duration >= 0) {
|
|
29
|
-
const t = () => {
|
|
30
|
-
this.secondsElapsed = Math.floor((Date.now() - this.startTime) / 1e3), this.value = Math.floor(100 / this.duration * this.secondsElapsed), Date.now() - this.startTime < this.duration * 1e3 ? setTimeout(t.bind(this), 1e3) : this.value = 100;
|
|
31
|
-
};
|
|
32
|
-
t();
|
|
33
|
-
}
|
|
34
|
-
}, this._between = (t, e) => this.value >= t && this.value <= e, this._getMultiRangeObject = (t) => this.multitoneRange.find((e) => e.name === t), this.value = 0, this.variant = "line", this.label = void 0, this.tone = "primary-brand", this.circularSize = "sm", this.duration = void 0, this.with = "value", this.multitone = !1, this.multitoneRange = [
|
|
35
|
-
{
|
|
36
|
-
name: "low",
|
|
37
|
-
min: 0,
|
|
38
|
-
max: 25
|
|
39
|
-
},
|
|
40
|
-
{
|
|
41
|
-
name: "medium",
|
|
42
|
-
min: 26,
|
|
43
|
-
max: 74
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
name: "high",
|
|
47
|
-
min: 75,
|
|
48
|
-
max: 100
|
|
49
|
-
}
|
|
50
|
-
];
|
|
51
|
-
}
|
|
52
|
-
watchSize() {
|
|
53
|
-
this._circularSizeConversion(this.circularSize);
|
|
54
|
-
}
|
|
55
|
-
watchMultitone() {
|
|
56
|
-
this.multitone === !1 && (this.tone = this.tone);
|
|
57
|
-
}
|
|
58
|
-
connectedCallback() {
|
|
59
|
-
f("prism-progress"), this.variant === "circular" && (this._circularSizeConversion(this.circularSize), this.startTime = Date.now(), this._countDown());
|
|
60
|
-
}
|
|
61
|
-
render() {
|
|
62
|
-
var s, t, e, r, a, o, n, l;
|
|
63
|
-
const h = () => this._feedback(this.value).length ? this._feedback(this.value) : i("slot", null), v = `0 0 ${this.size} ${this.size}`, c = (this.size - this.strokeWidth) / 2, u = c * Math.PI * 2, d = this.value * u / 100;
|
|
64
|
-
return this.multitone && this.multitoneRange ? (this._between((s = this._getMultiRangeObject("low")) === null || s === void 0 ? void 0 : s.min, (t = this._getMultiRangeObject("low")) === null || t === void 0 ? void 0 : t.max) && (this.tone = "danger"), this._between((e = this._getMultiRangeObject("medium")) === null || e === void 0 ? void 0 : e.min, (r = this._getMultiRangeObject("medium")) === null || r === void 0 ? void 0 : r.max) && (this.tone = "caution"), this._between((a = this._getMultiRangeObject("high")) === null || a === void 0 ? void 0 : a.min, (o = this._getMultiRangeObject("high")) === null || o === void 0 ? void 0 : o.max) && (this.tone = "success"), (n = this._getMultiRangeObject("full")) === null || n === void 0 || n.min, !((l = this._getMultiRangeObject("full")) === null || l === void 0) && l.max && (this.tone = this.tone)) : this.tone = this.tone, i(g, null, i("div", { class: "wrap", style: {
|
|
65
|
-
width: this.variant === "circular" ? `${this.size}px` : null,
|
|
66
|
-
height: this.variant === "circular" ? `${this.size}px` : null
|
|
67
|
-
} }, i("div", { class: { [this.variant]: !0 }, role: "progressbar", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.value, "aria-valuetext": `${this.value.toString()}% Complete` }, this.variant === "line" && i("div", { class: { "progress-value": !0, [this.tone]: !0, [`type-${this.variant}`]: !0 }, style: { transform: this._transform(this.value) } }), this.variant === "circular" && i(b, null, i("svg", { class: { [`stroke-${this.tone}`]: !0, circle: !0 }, width: this.size, height: this.size, viewBox: v }, i("circle", { class: "base-track", fill: "none", stroke: "#ccc", cx: this.size / 2, cy: this.size / 2, r: c, "stroke-width": `${this.strokeWidth}px` }), i("circle", { fill: "none", stroke: "currentColor", cx: this.size / 2, cy: this.size / 2, r: c, "stroke-width": `${this.strokeWidth}px`, transform: `rotate(-90 ${this.size / 2} ${this.size / 2})`, "stroke-dasharray": `${[d, u - d]}`, "stroke-dashoffset": "0px", "stroke-linecap": "round", style: { transition: "all 0.5s ease-in-out" } })), i("prism-text", { family: this.textFamily, size: this.textSize, class: { value: !0, "sr-use-only": this.with === "none" } }, i(h, null))))), this.variant === "line" && i("prism-text", { family: "body", size: "400", class: { value: !0, "sr-use-only": this.with === "none" } }, i(h, null)));
|
|
68
|
-
}
|
|
69
|
-
static get watchers() {
|
|
70
|
-
return {
|
|
71
|
-
circularSize: ["watchSize"],
|
|
72
|
-
multitone: ["watchMultitone"]
|
|
73
|
-
};
|
|
74
|
-
}
|
|
75
|
-
};
|
|
76
|
-
w.style = y;
|
|
77
|
-
export {
|
|
78
|
-
w as prism_progress
|
|
79
|
-
};
|
|
@@ -1,159 +0,0 @@
|
|
|
1
|
-
import { r as o, c as d, h as e, H as c, g as l } from "./index-D9BZSjMp.js";
|
|
2
|
-
import { g as n, m as p } from "./index-44540db3-BN5vFHKr.js";
|
|
3
|
-
import { A as m } from "./index-4d46d9ca-BtyZMEt1.js";
|
|
4
|
-
/*!
|
|
5
|
-
* Copyright (c) 2025 Comcast. Prism UI - v8.28.0 - made with ❤️ in Philadelphia
|
|
6
|
-
*/
|
|
7
|
-
const h = '.sc-prism-radio-h{display:var(--prism-radio-display,block);margin:var(--prism-radio-spacing-margin,var(--prism-spacer-size-lg) 0);position:relative;width:auto}.screen-reader-text.sc-prism-radio{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-radio{grid-column-gap:var(--prism-spacer-size-lg);-moz-column-gap:var(--prism-spacer-size-lg);column-gap:var(--prism-spacer-size-lg);display:grid;grid-template-areas:"radio label" "radio hint";grid-template-columns:-webkit-max-content 1fr;grid-template-columns:max-content 1fr;grid-template-rows:1fr}.no-visual.label.sc-prism-radio{gap:0}.label.right.sc-prism-radio{grid-template-areas:"label radio" "hint radio"}.label.sc-prism-radio:hover{cursor:pointer}.input[disabled].sc-prism-radio:hover,.label.disabled.sc-prism-radio:hover{cursor:not-allowed}.label-text.sc-prism-radio{color:var(--prism-color-text-primary-base);display:inline-block;grid-area:label;vertical-align:middle}.radio.sc-prism-radio{background-color:var(--prism-color-material-primary-base);border:1px solid var(--prism-color-border-secondary-base);border-radius:var(--prism-radius-size-full);box-sizing:initial;display:inline-block;flex-shrink:0;grid-area:radio;height:1.5rem;outline:1px solid transparent;outline-offset:2px;pointer-events:none;text-align:center;vertical-align:middle;width:1.5rem}.radio.sc-prism-radio,.radio.sc-prism-radio:after{position:relative;transition:all var(--prism-animation-duration-normal) var(--prism-animation-timing-function)}.radio.sc-prism-radio:after{background-color:initial;border-radius:var(--prism-radius-size-full);bottom:var(--prism-spacer-size-xs);content:"";display:block;height:var(--prism-spacer-size-lg);left:var(--prism-spacer-size-xs);right:var(--prism-spacer-size-xs);top:var(--prism-spacer-size-xs);width:var(--prism-spacer-size-lg)}.input.sc-prism-radio{border:2px solid;border-radius:var(--prism-radius-size-full);cursor:pointer;height:1.5rem;left:var(--prism-spacer-size-xxs);margin:0;opacity:0;overflow:hidden;padding:0;position:absolute;top:var(--prism-spacer-size-xxs);visibility:visible;width:1.5rem}.checked.sc-prism-radio{border-color:var(--prism-color-border-brand-primary-base)}.checked.sc-prism-radio:after{background-color:var(--prism-color-fill-brand-primary-base)}.sc-prism-radio-h:focus-within .sc-prism-radio:not(.loading) .radio.sc-prism-radio{outline:1px solid var(--prism-color-border-secondary-focus)}.sc-prism-radio-h:focus-within .sc-prism-radio:not(.loading) .checked.sc-prism-radio{outline-color:var(--prism-color-border-brand-primary-focus)}.sc-prism-radio-h:focus-within .sc-prism-radio:not(.loading) .checked.sc-prism-radio:after{background-color:var(--prism-color-fill-brand-primary-focus)}.input.sc-prism-radio:hover+.label.sc-prism-radio:not(.disabled) .radio.sc-prism-radio,.label.sc-prism-radio:not(.disabled):hover .radio.sc-prism-radio{border-color:var(--prism-color-border-primary-hover)}.input.sc-prism-radio:hover+.label.sc-prism-radio:not(.disabled) .checked.sc-prism-radio:after,.label.sc-prism-radio:not(.disabled):hover .checked.sc-prism-radio:after{background-color:var(--prism-color-fill-brand-primary-hover)}.input.sc-prism-radio:hover+.label.sc-prism-radio:not(.disabled) .checked.sc-prism-radio,.label.sc-prism-radio:not(.disabled):hover .checked.sc-prism-radio{border-color:var(--prism-color-border-brand-primary-hover)}.sc-prism-radio-h:focus-within .label.sc-prism-radio .checked.invalid.sc-prism-radio,.sc-prism-radio-h:focus-within .label.sc-prism-radio .invalid.sc-prism-radio{outline-color:var(--prism-color-border-danger-focus)}.sc-prism-radio-h:focus-within .label.sc-prism-radio .checked.invalid.sc-prism-radio:after{background-color:var(--prism-color-fill-danger-focus)}.input.sc-prism-radio:hover+.label.sc-prism-radio:not(.disabled) .invalid.sc-prism-radio,.label.sc-prism-radio:not(.disabled):hover .invalid.sc-prism-radio{border-color:var(--prism-color-border-danger-hover)}.input.sc-prism-radio:hover+.label.sc-prism-radio:not(.disabled) .checked.invalid.sc-prism-radio:after,.label.sc-prism-radio:not(.disabled):hover .checked.invalid.sc-prism-radio:after{background-color:var(--prism-color-fill-danger-hover)}.invalid.sc-prism-radio{border-color:var(--prism-color-border-danger-base)}.checked.invalid.sc-prism-radio:after{background-color:var(--prism-color-fill-danger-base)}.disabled.sc-prism-radio{cursor:not-allowed;opacity:var(--prism-alpha-disabled)}.disabled.sc-prism-radio .radio.sc-prism-radio{border-color:var(--prism-color-border-primary-disabled)}.hint-container.sc-prism-radio{align-items:center;display:flex;gap:var(--prism-spacer-size-xs);margin:var(--prism-spacer-size-xs)}.hint-text.sc-prism-radio{display:block;text-align:left}.invalid-text.sc-prism-radio{color:var(--prism-color-text-danger-base)}.loading.sc-prism-radio{cursor:wait;pointer-events:none}.loading.sc-prism-radio .radio.sc-prism-radio{border-color:var(--prism-color-border-primary-disabled)}.loading.sc-prism-radio .radio.sc-prism-radio:after{opacity:var(--prism-alpha-disabled)}.loading-spinner.sc-prism-radio{align-items:center;border-color:var(--prism-color-border-primary-inactive);color:var(--prism-color-text-secondary-base);display:flex;inset:0;justify-content:center;position:absolute;z-index:10}.checked.sc-prism-radio .loading-spinner.sc-prism-radio{color:var(--prism-color-text-brand-primary-base)}@media (prefers-reduced-motion:reduce){.radio.sc-prism-radio,.radio.sc-prism-radio:after{transition:none}}', b = h, u = class {
|
|
8
|
-
constructor(r) {
|
|
9
|
-
o(this, r), this.prismChange = d(this, "prismChange", 7), this.prismInput = d(this, "prismInput", 7), this.prismRadioElement = d(this, "prismRadioElement", 7), this.prismBlur = d(this, "prismBlur", 7), this.prismFocus = d(this, "prismFocus", 7), this.uid = n(), this.isDirty = !1, this._supressAsterisk = !1, this.prismId = `prism-radio-${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.invalid = !1, this.invalidMessage = "This field is required", this.describedby = "", this.value = void 0, this.alignment = "left", this.validation = "native", this.hintId = `${this.prismId}-hint`, this.customDescribedBy = void 0;
|
|
10
|
-
}
|
|
11
|
-
/**
|
|
12
|
-
* Listen for Prism Connected Event
|
|
13
|
-
*/
|
|
14
|
-
onConnected(r) {
|
|
15
|
-
let i = r.detail.id, s = this.el.closest("prism-radio-group").querySelector("fieldset").id;
|
|
16
|
-
i === s && r.detail.name === "prism-radio-group-connected" && r.detail.required === !0 && (this._supressAsterisk = !0);
|
|
17
|
-
}
|
|
18
|
-
/**
|
|
19
|
-
* @description Public: Set Focus on Input
|
|
20
|
-
*/
|
|
21
|
-
async setFocus() {
|
|
22
|
-
this.element && this.element.focus();
|
|
23
|
-
}
|
|
24
|
-
/** @internal */
|
|
25
|
-
onCheckValidity(r) {
|
|
26
|
-
r.preventDefault();
|
|
27
|
-
const i = r.currentTarget, s = i.closest("prism-radio-group");
|
|
28
|
-
s ? s.setAttribute("invalid", !0) : (this.validation === "native" && (this.invalid = !i.validity.valid), this.customDescribedBy = `${this.hintId} ${this.describedby}`.trim()), this.prismInput.emit({ name: "check-validity", value: i.value, target: i, reason: i.validity });
|
|
29
|
-
}
|
|
30
|
-
// Emit onChange of Value Event
|
|
31
|
-
/** @internal */
|
|
32
|
-
valueChanged(r) {
|
|
33
|
-
var i;
|
|
34
|
-
(i = this.el) === null || i === void 0 || i.setAttribute("value", r.target.value), this.prismChange.emit({ name: "value-changed", value: r.target.value });
|
|
35
|
-
}
|
|
36
|
-
// Native Event Handling
|
|
37
|
-
/** @internal */
|
|
38
|
-
inputChanged(r) {
|
|
39
|
-
this.isDirty = !0, this.customDescribedBy = `${this.hintId} ${this.describedby}`.trim();
|
|
40
|
-
let i = r.currentTarget;
|
|
41
|
-
this.checked = i.checked, this.validation === "native" && (this.invalid = !i.validity.valid), this.prismInput.emit({
|
|
42
|
-
name: "radio-changed",
|
|
43
|
-
id: i.id,
|
|
44
|
-
group: this.name,
|
|
45
|
-
checked: this.checked,
|
|
46
|
-
invalid: this.invalid,
|
|
47
|
-
target: i
|
|
48
|
-
});
|
|
49
|
-
}
|
|
50
|
-
// Input has focus or blurred
|
|
51
|
-
/** @internal */
|
|
52
|
-
inputState(r) {
|
|
53
|
-
let i = r.currentTarget;
|
|
54
|
-
switch (r.type) {
|
|
55
|
-
case "blur":
|
|
56
|
-
this.isDirty && this.validation === "native" && (this.invalid = !i.validity.valid), this.prismBlur.emit({
|
|
57
|
-
name: "input-blurred",
|
|
58
|
-
checked: this.checked,
|
|
59
|
-
type: "checkbox",
|
|
60
|
-
value: i.value,
|
|
61
|
-
target: i
|
|
62
|
-
});
|
|
63
|
-
break;
|
|
64
|
-
case "focus":
|
|
65
|
-
this.prismFocus.emit({
|
|
66
|
-
name: "input-focused",
|
|
67
|
-
checked: this.checked,
|
|
68
|
-
type: "checkbox",
|
|
69
|
-
value: i.value,
|
|
70
|
-
target: i
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
/**
|
|
75
|
-
* Listen to Keydown Events
|
|
76
|
-
*/
|
|
77
|
-
/** @internal */
|
|
78
|
-
inputKeyDown(r) {
|
|
79
|
-
this.loading && (r.key === "ArrowUp" || r.key === "ArrowDown" || r.key === "ArrowLeft" || r.key === "ArrowRight") && r.preventDefault();
|
|
80
|
-
}
|
|
81
|
-
connectedCallback() {
|
|
82
|
-
this.customDescribedBy = this.hint ? `${this.hintId} ${this.describedby}`.trim() : this.describedby, p("prism-radio");
|
|
83
|
-
}
|
|
84
|
-
render() {
|
|
85
|
-
const r = this.invalid;
|
|
86
|
-
return e(c, { key: "82d0ef174b5f0aacd10e3cf2af1b744559cea543" }, e("input", { key: "21b37f4a4601188a383e2e528d252375f1ad50ca", onInput: (i) => this.inputChanged(i), onInvalid: (i) => this.onCheckValidity(i), onChange: (i) => this.valueChanged(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, type: "radio", disabled: this.disabled, required: this.required, "aria-describedby": this.customDescribedBy ? this.customDescribedBy : !1, value: this.value, class: { input: !0, loading: this.loading } }), e("label", { key: "b7c2209cce9e93e1d784ff0ba9fefdda26f3ff6c", class: { label: !0, disabled: this.disabled, loading: this.loading, [this.alignment]: !0, "no-visual": this.hideLabel }, htmlFor: this.prismId }, e("span", { key: "3415615258a3d70dda6fc5f854be3616f1ffef51", class: { radio: !0, checked: this.checked, invalid: this.invalid } }, this.loading && e("span", { key: "c1e1687c6b098a44aedefe34f086db4efd191555", class: "loading-spinner" }, e("prism-loading", { key: "723dbb47fff88059d6cb39c344ff205b0b21556e", as: "spinner", size: "xs" }))), e("prism-text", { key: "f8b1fe0f07495640ca72ccdffb1d66aeae28385b", family: "body", size: "400", class: { "label-text": !0, "screen-reader-text": this.hideLabel } }, this.label, this.required && !this._supressAsterisk && e(m, { key: "17f056269ec6f5a4a7f040f0c580e93b5c1cf08a" })), this.hint && e("prism-text", { key: "7024a1cc702cb31d4a26430714f02ba59d873d48", as: "caption", priority: "secondary", class: { "hint-text": !0, "screen-reader-text": this.hideLabel } }, this.hint), e("slot", { key: "d71cb6267ea11148aadef908c07a4ea6f24887c6", name: "meta" })), e("span", { key: "b6db768ad9f6ad77bcbf1037166a3360e540fbfb", "aria-live": "polite", id: this.hintId }, r && e("span", { key: "f0c6648d82f183090509ff31d9af036c1e8220ff", class: {
|
|
87
|
-
"hint-container": !0,
|
|
88
|
-
"screen-reader-text": this.invalid && this.hideInvalid
|
|
89
|
-
} }, this.invalid && e("prism-icon", { key: "1feeb3299adb69b513cd7ed4b0cceb335f8831ea", display: "fill", slot: "icon-trailing", size: "xs", tone: "danger", name: "alert" }), e("prism-text", { key: "0b778fad5d1c0b7b085f2b718e12240e2ba2bfd0", class: {
|
|
90
|
-
"invalid-text": this.invalid,
|
|
91
|
-
"hint-text": !0
|
|
92
|
-
}, as: "caption" }, this.invalidMessage))));
|
|
93
|
-
}
|
|
94
|
-
get el() {
|
|
95
|
-
return l(this);
|
|
96
|
-
}
|
|
97
|
-
};
|
|
98
|
-
u.style = b;
|
|
99
|
-
const g = ".sc-prism-radio-group-h{display:var(--prism-radio-group-display,block)}.screen-reader-text.sc-prism-radio-group{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}fieldset.sc-prism-radio-group{border:2px solid transparent;color:var(--prism-radio-group-legend-color,var(--prism-color-text-primary-base));margin:0;padding:var(--prism-radio-group-spacing-padding,var(--prism-spacer-size-sm));transition:border-color var(--prism-animation-duration-normal) var(--prism-animation-timing-function)}.layout-inline.sc-prism-radio-group,.layout-stacked.sc-prism-radio-group,.radio-collection.sc-prism-radio-group{--prism-radio-spacing-margin:var(--prism-radio-group-collection-spacing-margin,0);display:var(--prism-radio-group-collection-display,flex);flex-direction:var(--prism-radio-group-collection-flex-direction,row);gap:var(--prism-radio-group-collection-spacing-gap,var(--prism-spacer-size-xl))}.layout-stacked.sc-prism-radio-group{flex-direction:var(--prism-radio-group-collection-flex-direction,column)}.legend-container.sc-prism-radio-group{display:flex;margin:0}.legend.sc-prism-radio-group{--prism-text-display:block;color:var(--prism-color-text-primary-base);margin-bottom:var(--prism-spacer-size-xs)}.invalid.sc-prism-radio-group{border:2px solid var(--prism-color-border-danger-base)}.invalid-message.sc-prism-radio-group{color:var(--prism-color-text-danger-base);display:block}.hint-container.sc-prism-radio-group{align-items:center;display:flex;gap:var(--prism-spacer-size-xs);margin-top:var(--prism-spacer-size-xs)}@media (prefers-reduced-motion:reduce){fieldset.sc-prism-radio-group{transition:none}}", f = g, v = class {
|
|
100
|
-
constructor(r) {
|
|
101
|
-
o(this, r), this.prismChange = d(this, "prismChange", 7), this.prismConnected = d(this, "prismConnected", 7), this.uid = n(), this.radios = this.el.getElementsByTagName("prism-radio"), this.prismId = `prism-radio-group-${this.uid}`, this.legend = void 0, this.showLegend = !0, this.invalid = !1, this.value = void 0, this.loading = !1, this.invalidMessage = "Please choose from one of the options", this.layout = void 0, this.required = !1, this.legendTypeSize = "md", this.hintId = `${this.prismId}-hint`;
|
|
102
|
-
}
|
|
103
|
-
onRadioSelect(r) {
|
|
104
|
-
const i = r.detail;
|
|
105
|
-
if (i.name === "radio-changed") {
|
|
106
|
-
Array.from(this.radios).map((t) => {
|
|
107
|
-
t.setAttribute("loading", String(this.loading)), this.invalid = t.invalid, t.checked && i.id !== t.getAttribute("prism-id") && t.removeAttribute("checked");
|
|
108
|
-
});
|
|
109
|
-
const a = i.target;
|
|
110
|
-
this.prismChange.emit({
|
|
111
|
-
name: "radio-group-changed",
|
|
112
|
-
checked: a.checked,
|
|
113
|
-
group: a.name,
|
|
114
|
-
id: a.id,
|
|
115
|
-
invalid: a.invalid,
|
|
116
|
-
loading: a.loading,
|
|
117
|
-
target: a,
|
|
118
|
-
value: a.value
|
|
119
|
-
});
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
/**
|
|
123
|
-
* Listen to Reset Events
|
|
124
|
-
*/
|
|
125
|
-
handleReset() {
|
|
126
|
-
Array.from(this.radios).map((i) => {
|
|
127
|
-
i.checked = !1;
|
|
128
|
-
});
|
|
129
|
-
}
|
|
130
|
-
/** Component Added to DOM */
|
|
131
|
-
connectedCallback() {
|
|
132
|
-
Array.from(this.radios).forEach((i) => {
|
|
133
|
-
if (i.setAttribute("loading", String(this.loading)), i.value === this.value && (i.checked = !0), i.hasAttribute("aria-describedby")) {
|
|
134
|
-
let s = i.getAttribute("aria-describedby");
|
|
135
|
-
i.setAttribute("aria-describedby", `${this.hintId} ${s}`);
|
|
136
|
-
} else
|
|
137
|
-
i.setAttribute("aria-describedby", this.hintId);
|
|
138
|
-
}), this.prismConnected.emit({ name: "prism-radio-group-connected", id: this.prismId, required: this.required }), p("prism-radio-group");
|
|
139
|
-
}
|
|
140
|
-
componentDidUpdate() {
|
|
141
|
-
Array.from(this.radios).forEach((i) => {
|
|
142
|
-
i.setAttribute("loading", String(this.loading));
|
|
143
|
-
});
|
|
144
|
-
}
|
|
145
|
-
render() {
|
|
146
|
-
return e(c, { key: "ae1aae43ed30f2afc5d241f0d9cfa32d97c23ce6" }, e("fieldset", { key: "d4f7555cb644acd2c5a72ae263034c6c9b25177e", id: this.prismId, class: { invalid: this.invalid }, role: "radiogroup", "aria-required": this.required.toString(), "aria-invalid": this.invalid.toString() }, e("legend", { key: "320929525fa2ce0bf56f35c6f4de91e06dd2032d", class: {
|
|
147
|
-
"legend-container": !0,
|
|
148
|
-
"screen-reader-text": !this.showLegend || this.legend === ""
|
|
149
|
-
} }, e("prism-text", { key: "dd51abeb2d644df9bc78bff981adffe067ba81fb", class: "legend", tag: "span", as: this.legendTypeSize === "sm" ? "caption" : void 0, family: this.legendTypeSize === "md" ? "body" : void 0, size: this.legendTypeSize === "md" ? "400" : void 0 }, this.legend), this.required && e(m, { key: "53b7a5897c13d5e6dc91564bed073c1f4a3671a3" })), e("section", { key: "8052e34252d143095b68cfacdef2176f63814fbb", class: { "radio-collection": !0, [`layout-${this.layout}`]: !!this.layout } }, e("slot", { key: "b97381ce7ac72547a3cfc60ab0f9355bbd685004" })), e("span", { key: "7f521bdd307aa449046fecb0beac4da1a9098071", "aria-live": "polite", id: this.hintId }, this.invalid && e("span", { key: "38109a79934d74cbddbe2c004e7e0f78f454d8f8", class: "hint-container" }, this.invalid && e("prism-icon", { key: "eb6fd617b82c22709fb3a4bb7c97245f2450bddc", display: "fill", size: "xs", tone: "danger", name: "alert" }), e("prism-text", { key: "0eb86992a05912b060af44b8541db50662774a58", class: "invalid-message", as: "caption" }, this.invalidMessage)))));
|
|
150
|
-
}
|
|
151
|
-
get el() {
|
|
152
|
-
return l(this);
|
|
153
|
-
}
|
|
154
|
-
};
|
|
155
|
-
v.style = f;
|
|
156
|
-
export {
|
|
157
|
-
u as prism_radio,
|
|
158
|
-
v as prism_radio_group
|
|
159
|
-
};
|
|
@@ -1,286 +0,0 @@
|
|
|
1
|
-
import { r as b, c as u, h as a, F as f, H as y, g as z } from "./index-D9BZSjMp.js";
|
|
2
|
-
import { r as x } from "./index.esm-a7c99373-DUoLYEEM.js";
|
|
3
|
-
import { g as w, m as O } from "./index-44540db3-BN5vFHKr.js";
|
|
4
|
-
import { A as S } from "./index-4d46d9ca-BtyZMEt1.js";
|
|
5
|
-
/*!
|
|
6
|
-
* Copyright (c) 2025 Comcast. Prism UI - v8.28.0 - made with ❤️ in Philadelphia
|
|
7
|
-
*/
|
|
8
|
-
const k = '.sc-prism-select-h{--arrow-trigger-width:var(--prism-spacer-size-xxl);box-sizing:border-box;display:block;isolation:auto;margin:var(--prism-select-spacing-margin,var(--prism-spacer-size-lg) 0);position:relative;width:100%}.screen-reader-text.sc-prism-select{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-text.sc-prism-select{color:var(--prism-color-text-primary-base);cursor:pointer;display:inline-block;margin-bottom:var(--prism-spacer-size-xs);text-align:left}@media (prefers-reduced-motion){.select.sc-prism-select{transition:none}}.select.sc-prism-select{--select-contained-size-md:var(--prism-spacer-size-lg) calc(var(--prism-spacer-size-lg) + var(--arrow-trigger-width)) var(--prism-spacer-size-lg) var(--prism-spacer-size-lg);--select-contained-size-md-leading:var(--prism-spacer-size-lg) calc(var(--prism-spacer-size-lg) + var(--arrow-trigger-width)) var(--prism-spacer-size-lg) var(--prism-spacer-size-4xl);--select-contained-size-sm:var(--prism-spacer-size-md) calc(var(--prism-spacer-size-md) + var(--arrow-trigger-width)) var(--prism-spacer-size-md) var(--prism-spacer-size-md);--select-contained-size-sm-leading:var(--prism-spacer-size-md) calc(var(--prism-spacer-size-md) + var(--arrow-trigger-width)) var(--prism-spacer-size-md) var(--prism-spacer-size-4xl);--select-contained-size-xs:var(--prism-spacer-size-sm-plus) calc(var(--prism-spacer-size-sm-plus) + var(--arrow-trigger-width)) var(--prism-spacer-size-sm-plus) var(--prism-spacer-size-sm-plus);--select-contained-size-xs-leading:var(--prism-spacer-size-sm-plus) calc(var(--prism-spacer-size-sm-plus) + var(--arrow-trigger-width)) var(--prism-spacer-size-sm-plus) var(--prism-spacer-size-4xl);--select-contained-size-2xs:var(--prism-spacer-size-xs) calc(var(--prism-spacer-size-sm) + var(--arrow-trigger-width)) var(--prism-spacer-size-xs) var(--prism-spacer-size-sm);--select-contained-size-2xs-leading:var(--prism-spacer-size-xs) calc(var(--prism-spacer-size-sm) + var(--arrow-trigger-width)) var(--prism-spacer-size-xs) var(--prism-spacer-size-4xl);-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--prism-color-border-secondary-base);border-radius:var(--prism-radius-size-sm);box-sizing:border-box;color:var(--prism-color-text-primary-base);display:block;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);outline:2px solid transparent;outline-offset:2px;text-align:left;transition:all var(--prism-animation-duration-normal) var(--prism-animation-timing-function);width:100%}.ghost.sc-prism-select{border:1px solid transparent}.select.select-size-sm.sc-prism-select,.select.select-size-xs.sc-prism-select,.select.select-size-xxs.sc-prism-select{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)}.select.contained.select-size-md.sc-prism-select,.select.ghost.select-size-md.sc-prism-select{padding:var(--prism-select-spacing-padding,var(--select-contained-size-md))}.select.contained.select-size-md.with-leading-icon.sc-prism-select,.select.ghost.select-size-md.with-leading-icon.sc-prism-select{padding:var(--prism-select-spacing-padding,var(--select-contained-size-md-leading))}.select.contained.select-size-sm.sc-prism-select,.select.ghost.select-size-sm.sc-prism-select{padding:var(--prism-select-spacing-padding,var(--select-contained-size-sm))}.select.contained.select-size-sm.with-leading-icon.sc-prism-select,.select.ghost.select-size-sm.with-leading-icon.sc-prism-select{padding:var(--prism-select-spacing-padding,var(--select-contained-size-sm-leading))}.select.contained.select-size-xs.sc-prism-select,.select.ghost.select-size-xs.sc-prism-select{padding:var(--prism-select-spacing-padding,var(--select-contained-size-xs))}.select.contained.select-size-xs.with-leading-icon.sc-prism-select,.select.ghost.select-size-xs.with-leading-icon.sc-prism-select{padding:var(--prism-select-spacing-padding,var(--select-contained-size-xs-leading))}.select.contained.select-size-xxs.sc-prism-select,.select.ghost.select-size-xxs.sc-prism-select{padding:var(--prism-select-spacing-padding,var(--select-contained-size-2xs))}.select.contained.select-size-xxs.with-leading-icon.sc-prism-select,.select.ghost.select-size-xxs.with-leading-icon.sc-prism-select{padding:var(--prism-select-spacing-padding,var(--select-contained-size-2xs-leading))}.select.contained.primary-tone.sc-prism-select,.select.ghost.primary-tone.sc-prism-select{background-color:var(--prism-color-material-primary-base)}.select.contained.secondary-tone.sc-prism-select,.select.ghost.secondary-tone.sc-prism-select{background-color:var(--prism-color-material-secondary-base)}.select.minimal.sc-prism-select{--select-minimal-size-md:var(--prism-spacer-size-md) var(--arrow-trigger-width) var(--prism-spacer-size-sm) 0;--select-minimal-size-md-leading:var(--prism-spacer-size-md) var(--arrow-trigger-width) var(--prism-spacer-size-sm) var(--prism-spacer-size-3xl);--select-minimal-size-sm:var(--prism-spacer-size-md) var(--arrow-trigger-width) var(--prism-spacer-size-md) 0px;--select-minimal-size-sm-leading:var(--prism-spacer-size-md) var(--arrow-trigger-width) var(--prism-spacer-size-md) var(--prism-spacer-size-3xl);--select-minimal-size-xs:var(--prism-spacer-size-sm-plus) var(--arrow-trigger-width) var(--prism-spacer-size-sm-plus) 0px;--select-minimal-size-xs-leading:var(--prism-spacer-size-sm-plus) var(--arrow-trigger-width) var(--prism-spacer-size-sm-plus) var(--prism-spacer-size-3xl);--select-minimal-size-2xs:var(--prism-spacer-size-sm) var(--prism-spacer-size-xxl) var(--prism-spacer-size-sm) 0px;--select-minimal-size-2xs-leading:var(--prism-spacer-size-sm) var(--arrow-trigger-width) var(--prism-spacer-size-sm) var(--prism-spacer-size-3xl);background-color:initial;border:0;border-bottom:2px solid var(--prism-color-border-secondary-base);border-radius:var(--prism-radius-size-none)}.select.minimal.select-size-md.sc-prism-select{padding:var(--prism-select-spacing-padding,var(--select-minimal-size-md))}.select.minimal.select-size-md.with-leading-icon.sc-prism-select{padding:var(--prism-select-spacing-padding,var(--select-minimal-size-md-leading))}.select.minimal.select-size-sm.sc-prism-select{padding:var(--prism-select-spacing-padding,var(--select-minimal-size-sm))}.select.minimal.select-size-sm.with-leading-icon.sc-prism-select{padding:var(--prism-select-spacing-padding,var(--select-minimal-size-sm-leading))}.select.minimal.select-size-xs.sc-prism-select{padding:var(--prism-select-spacing-padding,var(--select-minimal-size-xs))}.select.minimal.select-size-xs.with-leading-icon.sc-prism-select{padding:var(--prism-select-spacing-padding,var(--select-minimal-size-xs-leading))}.select.minimal.select-size-xxs.sc-prism-select{padding:var(--prism-select-spacing-padding,var(--select-minimal-size-2xs))}.select.minimal.select-size-xxs.with-leading-icon.sc-prism-select{padding:var(--prism-select-spacing-padding,var(--select-minimal-size-2xs-leading))}.select.sc-prism-select:invalid{color:var(--prism-color-text-danger-base)}.select.sc-prism-select:focus-visible{border-color:var(--prism-color-border-brand-primary-focus);outline:1px solid var(--prism-color-border-brand-primary-focus);outline-offset:0}.minimal.sc-prism-select-h .select.sc-prism-select:focus-visible{border:0;border-bottom:2px solid var(--prism-color-border-brand-primary-focus);border-radius:var(--prism-radius-size-xs);outline:2px solid var(--prism-color-border-brand-primary-focus);outline-offset:var(--prism-spacer-size-xs)}.hint-text.sc-prism-select{display:block;text-align:left}.invalid-text.sc-prism-select{color:var(--prism-color-text-danger-base)}.disabled.sc-prism-select{cursor:not-allowed;opacity:var(--prism-alpha-inactive)}.invalid.sc-prism-select:focus-visible{outline-color:var(--prism-color-border-danger-base)}.invalid.sc-prism-select,.minimal.sc-prism-select-h .invalid.sc-prism-select,.minimal.sc-prism-select-h .invalid.sc-prism-select:focus-visible{border-color:var(--prism-color-border-danger-base)}.select-container.sc-prism-select{align-items:center;display:flex;position:relative}.arrow.sc-prism-select{pointer-events:none;position:absolute;right:calc(var(--prism-select-arrow-offset, var(--prism-spacer-size-lg)) - var(--arrow-trigger-width));transition:none;z-index:var(--prism-layout-z-index-base)}.arrow.hidden.sc-prism-select{display:none}.hint-container.sc-prism-select{gap:var(--prism-spacer-size-xs);margin-top:var(--prism-spacer-size-xs)}.hint-container.sc-prism-select,.result.sc-prism-select{align-items:center;display:flex}.result.sc-prism-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border-style:none;-moz-column-gap:var(--prism-spacer-size-lg);column-gap:var(--prism-spacer-size-lg);cursor:pointer;font-family:var(--prism-font-body-400-family);font-size:var(--prism-font-body-400-size);font-weight:var(--prism-font-body-400-weight);justify-content:space-between;letter-spacing:var(--prism-font-body-400-tracking);line-height:var(--prism-font-body-400-leading);padding:1rem;text-align:left;transition:background-color var(--prism-animation-duration-fast) var(--prism-animation-timing-function);width:100%}.result.sc-prism-select .selected-icon.sc-prism-select{color:var(--prism-color-text-brand-primary-base)}.result.sc-prism-select:focus-visible{background-color:var(--prism-color-material-primary-focus);outline:2px solid var(--prism-color-border-brand-primary-focus);outline-offset:-3px}.result.sc-prism-select:hover{--prism-text-priority:1;background-color:var(--prism-color-material-primary-hover)}.result.sc-prism-select:active{background-color:var(--prism-color-material-primary-down)}.result.selected.sc-prism-select{--prism-text-priority:1;background-color:var(--prism-color-material-brand-primary-base)}.result.selected.sc-prism-select:hover{background-color:var(--prism-color-material-brand-primary-hover)}.result.selected.sc-prism-select:active{background-color:var(--prism-color-material-brand-primary-down)}.result.selected.sc-prism-select:focus{background-color:var(--prism-color-material-brand-primary-focus)}.result.selected.sc-prism-select:focus .selected-icon.sc-prism-select{color:var(--prism-color-text-brand-primary-focus)}.result.sc-prism-select:disabled{cursor:not-allowed}.result-group-label.sc-prism-select{color:var(--prism-color-text-secondary-base);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);padding:var(--prism-spacer-size-lg);text-transform:var(--prism-font-callout-sm-transform)}.results.sc-prism-select{display:none;left:0;overflow:auto;position:absolute;top:0}.arrow.results.sc-prism-select{display:none}.results.sc-prism-select{background-color:var(--prism-color-material-primary-base);border:1px solid color-mix(in srgb,var(--prism-color-border-primary-base) var(--prism-alpha-tertiary-percentage),transparent);border-radius:var(--prism-radius-size-md);box-shadow:var(--prism-shadow-xs-base);margin-top:var(--prism-spacer-size-xs);max-height:var(--prism-select-results-height,50vh);width:var(--prism-select-results-width,100%);z-index:var(--prism-layout-z-index-dropdown)}.results.open.sc-prism-select{display:block}.selection-content.sc-prism-select{-moz-column-gap:var(--prism-spacer-size-sm);column-gap:var(--prism-spacer-size-sm);display:grid;flex:1 1 auto;grid-template-areas:"title badge";grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto}.selection-content.with-description.sc-prism-select{grid-template-areas:"title badge" "description badge"}.selection-content.sc-prism-select .selection-title.sc-prism-select{grid-area:title;min-width:0;overflow:hidden;place-self:start;text-overflow:ellipsis}.selection-content.sc-prism-select .selection-description.sc-prism-select{grid-area:description;min-width:0;overflow:hidden;place-self:start;text-overflow:ellipsis}.selection-content.sc-prism-select .selection-attributes.sc-prism-select{grid-area:badge;place-self:center;justify-self:start}.results-container.sc-prism-select{position:relative}.announcement.sc-prism-select{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.count-badge.sc-prism-select{margin-right:var(--prism-spacer-size-xs)}.sc-prism-select-s>[css-slot=asset-leading]{left:var(--prism-spacer-size-lg);position:absolute;z-index:var(--prism-layout-z-index-base)}.sc-prism-select-h.minimal.sc-prism-select-s>[css-slot=asset-leading],.sc-prism-select-h.minimal .sc-prism-select-s>[css-slot=asset-leading]{left:0}', C = k, _ = class {
|
|
9
|
-
constructor(t) {
|
|
10
|
-
b(this, t), this.prismChange = u(this, "prismChange", 7), this.prismInput = u(this, "prismInput", 7), this.prismBlur = u(this, "prismBlur", 7), this.prismFocus = u(this, "prismFocus", 7), this.prismWatch = u(this, "prismWatch", 7), this.uid = w(), this.isDirty = !1, this.debounceDelay = 500, this.appearFrom = "bottom", this._hostTag = "prism-select", this._setResultsPosition = (s) => {
|
|
11
|
-
let i = window.innerHeight / 2;
|
|
12
|
-
this.appearFrom === "top" && i > s.top && (this.resultsPosition = "bottom"), this.appearFrom === "bottom" && i < s.bottom && (this.resultsPosition = "top"), this.hostHeight = `${s.height}px`;
|
|
13
|
-
}, this._setInitialValue = () => {
|
|
14
|
-
const s = (e, c) => {
|
|
15
|
-
if (!e || e.length === 0)
|
|
16
|
-
return null;
|
|
17
|
-
let l = e.find((r) => r.value === c);
|
|
18
|
-
if (l)
|
|
19
|
-
return l;
|
|
20
|
-
for (const r of e)
|
|
21
|
-
if (r.children && r.children.length > 0) {
|
|
22
|
-
const d = s(r.children, c);
|
|
23
|
-
if (d)
|
|
24
|
-
return d;
|
|
25
|
-
}
|
|
26
|
-
return null;
|
|
27
|
-
}, i = (e) => {
|
|
28
|
-
if (!e || e.length === 0)
|
|
29
|
-
return null;
|
|
30
|
-
let c = e.find((l) => l.value === "");
|
|
31
|
-
if (c || (c = e.find((l) => l.selected === !0), c))
|
|
32
|
-
return c;
|
|
33
|
-
for (const l of e)
|
|
34
|
-
if (l.children && l.children.length > 0) {
|
|
35
|
-
const r = i(l.children);
|
|
36
|
-
if (r)
|
|
37
|
-
return r;
|
|
38
|
-
}
|
|
39
|
-
return e[0];
|
|
40
|
-
};
|
|
41
|
-
let n = null;
|
|
42
|
-
this.value && (n = s(this.customOptions, this.value)), n || (n = i(this.customOptions)), n && this.as === "custom" && (this.value = n.value, this.customDisplayValue = n.display || n.value, this.hiddenValue = n.value, this.multiple || (this._clearAllSelectedOptions(), this._updateCustomSelections(n.value)));
|
|
43
|
-
}, this.slots = {
|
|
44
|
-
"asset-leading": !1
|
|
45
|
-
}, this._handleResize = x((s) => {
|
|
46
|
-
this._setResultsPosition(this.el.getBoundingClientRect());
|
|
47
|
-
}, this.debounceDelay), this._hasInitializedSlot = !1, this.filterSelectedOptions = (s) => s == null ? void 0 : s.reduce((i, n) => (n.selected ? i.push(n) : n.children && (i = [...i, ...this.filterSelectedOptions(n.children)]), i), []), this._clearAllSelectedOptions = () => {
|
|
48
|
-
this.customOptions.forEach((s) => {
|
|
49
|
-
var i;
|
|
50
|
-
s.selected && (s.selected = !1), (i = s.children) === null || i === void 0 || i.forEach((n) => {
|
|
51
|
-
n.selected && (n.selected = !1);
|
|
52
|
-
});
|
|
53
|
-
});
|
|
54
|
-
}, this._updateCustomSelections = (s) => {
|
|
55
|
-
const i = (n) => n.map((e) => {
|
|
56
|
-
if (e.label && e.children && !e.value)
|
|
57
|
-
return Object.assign(Object.assign({}, e), { children: i(e.children) });
|
|
58
|
-
if (this.multiple) {
|
|
59
|
-
if (e.value === s)
|
|
60
|
-
return e.selected === !0 ? Object.assign(Object.assign({}, e), { selected: !1 }) : Object.assign(Object.assign({}, e), { selected: !0 });
|
|
61
|
-
if (e.value === "")
|
|
62
|
-
return Object.assign(Object.assign({}, e), { selected: !1 });
|
|
63
|
-
} else if (e.value === s)
|
|
64
|
-
return Object.assign(Object.assign({}, e), { selected: !0 });
|
|
65
|
-
return e.children && e.children.length > 0 ? Object.assign(Object.assign({}, e), { children: i(e.children) }) : !this.multiple && !e.value && !e.children ? Object.assign(Object.assign({}, e), { selected: !1 }) : Object.assign({}, e);
|
|
66
|
-
});
|
|
67
|
-
this.customOptions = i(this.customOptions);
|
|
68
|
-
}, this._setMultipleValues = () => {
|
|
69
|
-
if (this.multiple && this.customOptions) {
|
|
70
|
-
if (this.hiddenValue = this.filterSelectedOptions(this.customOptions).map((s) => s.value).join(","), this.totalCustomOptions = this.hiddenValue !== "" ? this.hiddenValue.split(",").length : 0, this.totalCustomOptions <= 0) {
|
|
71
|
-
const s = this.customOptions.find((i) => i.value === "");
|
|
72
|
-
s && (this.value = s.value, this.customDisplayValue = s.display || s.value, s.selected = !0, this.pseudoSelect.value = s.value);
|
|
73
|
-
} else
|
|
74
|
-
this.customDisplayValue = `Selected ${this.totalCustomOptions > 1 ? "options" : "option"}`, this.pseudoSelect.value = this.value;
|
|
75
|
-
this.liveMessage = `${this.totalCustomOptions} ${this.customDisplayValue}`;
|
|
76
|
-
}
|
|
77
|
-
}, this.selectOption = (s) => {
|
|
78
|
-
let i = s.currentTarget;
|
|
79
|
-
i.dataset.value === "" && this._clearAllSelectedOptions(), this.multiple || (this.pseudoSelect.value = i.dataset.value, this.value = i.dataset.value === "" ? i.dataset.display : i.dataset.value, this.customDisplayValue = i.dataset.display, this.displayResults = !1, this._clearAllSelectedOptions(), this.pseudoSelect.focus(), this.hiddenValue = i.dataset.value), this._updateCustomSelections(i.dataset.value), this._setMultipleValues(), this.prismChange.emit({
|
|
80
|
-
name: "value-changed",
|
|
81
|
-
value: this.hiddenValue,
|
|
82
|
-
data: this.customOptions,
|
|
83
|
-
multiple: this.multiple,
|
|
84
|
-
icon: i.dataset.icon,
|
|
85
|
-
iconTone: i.dataset.icontone
|
|
86
|
-
});
|
|
87
|
-
}, this.onBlur = (s) => {
|
|
88
|
-
s.target.closest(this.el.tagName.toLowerCase()) !== this.el && (this.displayResults = !1);
|
|
89
|
-
}, this.openCustomOptions = (s) => {
|
|
90
|
-
this.displayResults = !this.displayResults;
|
|
91
|
-
}, this.inputKeyListeners = (s) => {
|
|
92
|
-
switch (s.key) {
|
|
93
|
-
case "ArrowDown":
|
|
94
|
-
s.preventDefault(), this.resultsElement && this.resultsElement.querySelectorAll("button")[0].focus();
|
|
95
|
-
break;
|
|
96
|
-
case "Escape":
|
|
97
|
-
this.displayResults = !1;
|
|
98
|
-
break;
|
|
99
|
-
}
|
|
100
|
-
}, this.resultsKeyListeners = (s) => {
|
|
101
|
-
var i, n, e, c, l, r;
|
|
102
|
-
let d = s.currentTarget, p = this.resultsElement.querySelectorAll("button"), h = p[0], v = p[p.length - 1];
|
|
103
|
-
switch (s.key) {
|
|
104
|
-
case "ArrowDown":
|
|
105
|
-
switch (s.preventDefault(), (i = d.nextElementSibling) === null || i === void 0 ? void 0 : i.role) {
|
|
106
|
-
case "option":
|
|
107
|
-
(n = d.nextElementSibling) === null || n === void 0 || n.focus();
|
|
108
|
-
break;
|
|
109
|
-
case "group":
|
|
110
|
-
let o = d.nextElementSibling.querySelector('[role="option"]');
|
|
111
|
-
o == null || o.focus();
|
|
112
|
-
break;
|
|
113
|
-
default:
|
|
114
|
-
let m = (e = d.closest('[role="group"]')) === null || e === void 0 ? void 0 : e.nextElementSibling;
|
|
115
|
-
m ? m.focus() : h.focus();
|
|
116
|
-
break;
|
|
117
|
-
}
|
|
118
|
-
break;
|
|
119
|
-
case "ArrowUp":
|
|
120
|
-
switch (s.preventDefault(), (c = d.previousElementSibling) === null || c === void 0 ? void 0 : c.role) {
|
|
121
|
-
case "option":
|
|
122
|
-
(l = d.previousElementSibling) === null || l === void 0 || l.focus();
|
|
123
|
-
break;
|
|
124
|
-
case "group":
|
|
125
|
-
let o = d.previousElementSibling.querySelectorAll('[role="option"]'), m = o[o.length - 1];
|
|
126
|
-
m == null || m.focus();
|
|
127
|
-
break;
|
|
128
|
-
default:
|
|
129
|
-
let g = (r = d.closest('[role="group"]')) === null || r === void 0 ? void 0 : r.previousElementSibling;
|
|
130
|
-
g ? g.focus() : v.focus();
|
|
131
|
-
break;
|
|
132
|
-
}
|
|
133
|
-
break;
|
|
134
|
-
case "Home":
|
|
135
|
-
h.focus();
|
|
136
|
-
break;
|
|
137
|
-
case "End":
|
|
138
|
-
v.focus();
|
|
139
|
-
break;
|
|
140
|
-
case "Escape":
|
|
141
|
-
this.displayResults = !1, this.pseudoSelect.focus();
|
|
142
|
-
break;
|
|
143
|
-
}
|
|
144
|
-
}, this.prismId = `prism-select-${this.uid}`, this.name = this.uid, this.label = this.name.charAt(0).toUpperCase() + this.name.replace(/-/g, " ").substring(1), this.required = !1, this.disabled = !1, this.hideLabel = !1, this.hideInvalid = !1, this.hint = void 0, this.multiple = !1, this.invalid = !1, this.invalidMessage = "This field is required", this.describedby = "", this.value = void 0, this.options = void 0, this.readonly = !1, this.autoComplete = "off", this.variant = "contained", this.as = "native", this.validation = "native", this.tone = "secondary", this.size = "md", this.combinedDescribedBy = void 0, this.hintId = `${this.prismId}-hint`, this.arrowOffset = "0px", this.hostHeight = "83", this.resultsPosition = "bottom", this.displayResults = !1, this.customOptions = void 0, this.selectedOptions = [], this.hiddenValue = void 0, this.liveMessage = void 0, this.totalCustomOptions = void 0, this.customDisplayValue = void 0;
|
|
145
|
-
}
|
|
146
|
-
/**
|
|
147
|
-
* @description Public: Set Focus on Input
|
|
148
|
-
*/
|
|
149
|
-
async setFocus() {
|
|
150
|
-
this.element && this.element.focus(), this.as === "custom" && this.pseudoSelect.focus();
|
|
151
|
-
}
|
|
152
|
-
// Watch for changes to the form value
|
|
153
|
-
emitHiddenValue(t, s) {
|
|
154
|
-
t !== s && this.prismWatch.emit({
|
|
155
|
-
name: "multi-results-updated",
|
|
156
|
-
value: this.hiddenValue
|
|
157
|
-
});
|
|
158
|
-
}
|
|
159
|
-
// Watch for changes to options
|
|
160
|
-
setCustomOptions(t, s) {
|
|
161
|
-
if (t && Array.isArray(t)) {
|
|
162
|
-
const i = (c) => JSON.stringify(c.map((l) => Object.assign(Object.assign({}, l), {
|
|
163
|
-
// If children exist, sort and serialize them too
|
|
164
|
-
children: l.children ? i(l.children) : void 0
|
|
165
|
-
})).sort((l, r) => l.value > r.value ? 1 : -1)), n = i(t), e = s ? i(s) : "";
|
|
166
|
-
n !== e && (this.customOptions = t, this.as === "custom" && this._setInitialValue());
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
setValue(t, s) {
|
|
170
|
-
this.as === "custom" && !this.multiple && t !== s && this._setInitialValue();
|
|
171
|
-
}
|
|
172
|
-
onSubmit(t) {
|
|
173
|
-
this.as === "custom" && t.type === "submit" && this.pseudoSelect.ariaRequired === "true" && (this.invalid = this.pseudoSelect.value === "");
|
|
174
|
-
}
|
|
175
|
-
// Emit onChange of Value Event
|
|
176
|
-
/** @internal */
|
|
177
|
-
valueChanged(t) {
|
|
178
|
-
let s = [];
|
|
179
|
-
Array.from(t.target.selectedOptions).forEach((i) => s.push(i.value)), this.value = s.join(","), this.prismChange.emit({ name: "value-changed", value: this.value });
|
|
180
|
-
}
|
|
181
|
-
// Native Event Handling
|
|
182
|
-
/** @internal */
|
|
183
|
-
inputChanged(t) {
|
|
184
|
-
this.isDirty = !0;
|
|
185
|
-
let s = t.currentTarget;
|
|
186
|
-
this.prismInput.emit({
|
|
187
|
-
name: "input-changed",
|
|
188
|
-
id: s.id,
|
|
189
|
-
invalid: this.invalid,
|
|
190
|
-
target: s
|
|
191
|
-
});
|
|
192
|
-
}
|
|
193
|
-
/** @internal */
|
|
194
|
-
onCheckValidity(t) {
|
|
195
|
-
t.preventDefault();
|
|
196
|
-
const s = t.currentTarget;
|
|
197
|
-
this.validation === "native" && (this.invalid = !s.validity.valid), this.combinedDescribedBy = `${this.hintId} ${this.combinedDescribedBy}`.trim(), this.prismInput.emit({ name: "check-validity", value: s.value, target: s, reason: s.validity });
|
|
198
|
-
}
|
|
199
|
-
// Input has focus or blurred
|
|
200
|
-
/** @internal */
|
|
201
|
-
inputState(t) {
|
|
202
|
-
let s = t.currentTarget;
|
|
203
|
-
switch (t.type) {
|
|
204
|
-
case "blur":
|
|
205
|
-
this.isDirty && this.validation === "native" && (this.invalid = !s.validity.valid), this.prismBlur.emit({ name: "input-blurred", value: s.value, target: s });
|
|
206
|
-
break;
|
|
207
|
-
case "focus":
|
|
208
|
-
this.prismFocus.emit({ name: "input-focused", value: s.value, target: s });
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
connectedCallback() {
|
|
212
|
-
this.combinedDescribedBy = this.hint ? `${this.hintId} ${this.combinedDescribedBy}` : this.combinedDescribedBy, this.as === "custom" && (this.customOptions = this.options ? JSON.parse(JSON.stringify(this.options)) : [], this._setInitialValue(), document.addEventListener("mousedown", this.onBlur), document.addEventListener("keyup", this.onBlur), this.appearFrom ? this.resultsPosition = this.appearFrom : window.addEventListener("resize", this._handleResize)), O("prism-select");
|
|
213
|
-
}
|
|
214
|
-
disconnectedCallback() {
|
|
215
|
-
document.removeEventListener("mousedown", this.onBlur), document.removeEventListener("keyup", this.onBlur), window.removeEventListener("resize", this._handleResize);
|
|
216
|
-
}
|
|
217
|
-
componentDidLoad() {
|
|
218
|
-
if (!this._hasInitializedSlot) {
|
|
219
|
-
const s = this.el.querySelector('[slot="asset-leading"]');
|
|
220
|
-
s && (s.setAttribute("css-slot", "asset-leading"), this.slots["asset-leading"] = !0, this._hasInitializedSlot = !0);
|
|
221
|
-
}
|
|
222
|
-
this._hostDimensions = this.el.getBoundingClientRect();
|
|
223
|
-
const t = this.element || this.pseudoSelect;
|
|
224
|
-
t && (this.arrowOffset = getComputedStyle(t).paddingRight || "0px");
|
|
225
|
-
}
|
|
226
|
-
componentWillRender() {
|
|
227
|
-
if (!this._hasInitializedSlot) {
|
|
228
|
-
const t = this.el.querySelector('[slot="asset-leading"]');
|
|
229
|
-
t && (t.setAttribute("css-slot", "asset-leading"), this.slots["asset-leading"] = !0, this._hasInitializedSlot = !0);
|
|
230
|
-
}
|
|
231
|
-
this.as === "custom" && (!this.customOptions || this.customOptions.length === 0) && this.options && (this.customOptions = JSON.parse(JSON.stringify(this.options)), this._setInitialValue()), this._hostDimensions && this._setResultsPosition(this._hostDimensions);
|
|
232
|
-
}
|
|
233
|
-
componentDidRender() {
|
|
234
|
-
var t;
|
|
235
|
-
this.displayResults && this.as === "custom" && this.resultsElement && !this.multiple && ((t = this.resultsElement.querySelector('[aria-selected="true"]')) === null || t === void 0 || t.focus()), this.as === "custom" && this.multiple && this._setMultipleValues();
|
|
236
|
-
}
|
|
237
|
-
render() {
|
|
238
|
-
var t, s;
|
|
239
|
-
const i = this.invalid || this.hint, n = (e) => {
|
|
240
|
-
let c = e.selected;
|
|
241
|
-
const l = !!(e != null && e.icon) || !!(e != null && e.iconPath);
|
|
242
|
-
return a("button", Object.assign({}, Array.isArray(e.data) ? e.data.reduce((r, d) => Object.assign(Object.assign({}, r), d), {}) : e.data, { role: "option", type: "button", "aria-selected": c == null ? void 0 : c.toString(), key: e.value, "data-value": e.value, "data-display": e.display, "data-icon": e == null ? void 0 : e.icon, "data-icontone": e == null ? void 0 : e.iconTone, value: e.display || e.value, name: e.display || e.value, hidden: e.hidden, disabled: e.disabled, onClick: (r) => this.selectOption(r), onKeyDown: (r) => this.resultsKeyListeners(r), class: { result: !0, selected: c } }), l && a("prism-icon", { class: e == null ? void 0 : e.iconCss, "aria-hidden": e != null && e.iconLabel && (e == null ? void 0 : e.iconLabel.length) > 0 ? void 0 : "true", label: e == null ? void 0 : e.iconLabel, display: (e == null ? void 0 : e.iconTheme) || "fill", name: e == null ? void 0 : e.icon, path: e == null ? void 0 : e.iconPath, tone: c || e == null ? void 0 : e.iconTone }), a("span", { class: { "selection-content": !0, "with-description": !!(e != null && e.description) } }, a("span", { class: "selection-title" }, e.display || e.value), (e == null ? void 0 : e.description) && a("prism-text", { family: "body", size: "300", priority: "secondary", class: "selection-description" }, e == null ? void 0 : e.description), (e == null ? void 0 : e.badge) && a("prism-badge", { tone: e.badgeTone ? e.badgeTone : e.selected ? "primary-brand" : "secondary", label: e == null ? void 0 : e.badgeLabel, class: "selection-attributes", priority: e.badgePriority ? e.badgePriority : "high" }, e == null ? void 0 : e.badge)), c && a("prism-icon", { class: { "checked-icon": !0, "selected-icon": c, hide: !c }, name: "check", "aria-hidden": "true" }));
|
|
243
|
-
};
|
|
244
|
-
return a(y, { value: this.value, class: { [this.variant]: !0 } }, this.multiple && this.as === "custom" && a("div", { class: "announcement", "aria-live": "polite", "aria-atomic": "true" }, this.liveMessage), a("label", { id: `labelfor-${this.prismId}`, htmlFor: this.prismId }, a("prism-text", { tag: "span", as: "caption", class: { "label-text": !0, "screen-reader-text": this.hideLabel } }, this.label, this.required && a(S, null))), a("div", { class: "select-container" }, a("slot", { name: "asset-leading" }), this.as === "native" ? a("select", { autoComplete: this.autoComplete, multiple: this.multiple, onChange: (e) => this.valueChanged(e), onInput: (e) => this.inputChanged(e), onInvalid: (e) => this.onCheckValidity(e), onBlur: (e) => this.inputState(e), onFocus: (e) => this.inputState(e), id: this.prismId, ref: (e) => this.element = e, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": this.invalid.toString(), "aria-required": this.required.toString(), "aria-describedby": this.combinedDescribedBy ? this.combinedDescribedBy : !1, class: {
|
|
245
|
-
select: !0,
|
|
246
|
-
"with-leading-icon": this.slots["asset-leading"],
|
|
247
|
-
disabled: this.disabled,
|
|
248
|
-
invalid: this.invalid,
|
|
249
|
-
[`${this.tone}-tone`]: !0,
|
|
250
|
-
[this.variant]: !0,
|
|
251
|
-
[`select-size-${this.size}`]: !0
|
|
252
|
-
} }, (t = this.options) === null || t === void 0 ? void 0 : t.map((e) => {
|
|
253
|
-
var c;
|
|
254
|
-
let l = (c = this.value) === null || c === void 0 ? void 0 : c.split(",");
|
|
255
|
-
return e.label ? a("optgroup", { label: e.label }, e.children.map((r) => a("option", Object.assign({}, Array.isArray(r.data) ? r.data.reduce((d, p) => Object.assign(Object.assign({}, d), p), {}) : r.data, { selected: r.selected || (l == null ? void 0 : l.includes(r.value)), key: r.value, value: r.value, hidden: r.hidden, disabled: r.disabled }), r.display || r.value))) : a("option", Object.assign({}, Array.isArray(e.data) ? e.data.reduce((r, d) => Object.assign(Object.assign({}, r), d), {}) : e.data, { selected: e.selected || (l == null ? void 0 : l.includes(e.value)), key: e.value, value: e.value, hidden: e.hidden, disabled: e.disabled }), e.display || e.value);
|
|
256
|
-
}), a("slot", { name: "option" })) : a("button", { type: "button", onClick: (e) => this.openCustomOptions(e), onKeyDown: (e) => this.inputKeyListeners(e), "aria-controls": `custom-selections-${this.prismId}`, "aria-expanded": this.displayResults.toString(), "aria-haspopup": "listbox", "aria-labelledby": `labelfor-${this.prismId} trigger-${this.prismId}`, id: `trigger-${this.prismId}`, name: this.name, disabled: this.disabled, ref: (e) => this.pseudoSelect = e, "aria-describedby": this.combinedDescribedBy ? this.combinedDescribedBy : !1, class: {
|
|
257
|
-
select: !0,
|
|
258
|
-
"with-leading-icon": this.slots["asset-leading"],
|
|
259
|
-
disabled: this.disabled,
|
|
260
|
-
invalid: this.invalid,
|
|
261
|
-
[`${this.tone}-tone`]: !0,
|
|
262
|
-
[this.variant]: !0,
|
|
263
|
-
[`select-size-${this.size}`]: !0
|
|
264
|
-
} }, a(f, null, this.multiple && this.totalCustomOptions >= 1 && a("prism-badge", { class: "count-badge", tone: "primary-brand", size: "sm" }, this.totalCustomOptions), this.customDisplayValue)), a("prism-icon", { style: { "--prism-select-arrow-offset": this.arrowOffset }, "aria-hidden": "true", class: { arrow: !0 }, display: "fill", size: "sm", name: this.displayResults ? "caret_up_button" : "caret_down_button" })), this.as === "custom" && a("div", { style: { "--bottom": this.hostHeight }, class: { "results-container": !0 }, ref: (e) => this.resultsContainerElement = e }, a("div", { role: "listbox", "aria-labelledby": `labelfor-${this.prismId}`, "aria-multiselectable": this.multiple ? "true" : void 0, id: `custom-selections-${this.prismId}`, tabindex: "-1", class: { results: !0, open: this.displayResults, [this.resultsPosition]: !0 }, ref: (e) => this.resultsElement = e }, (s = this.customOptions) === null || s === void 0 ? void 0 : s.map((e, c) => {
|
|
265
|
-
if (e.label && e.children) {
|
|
266
|
-
let l = `${e.label.replaceAll(" ", "-").toLowerCase()}-group`;
|
|
267
|
-
return a("div", { key: c, role: "group", "aria-labelledby": l }, a("div", { class: "result-group-label", "aria-hidden": "true", id: l }, e.label), e.children.map((r) => a(n, Object.assign({}, r))));
|
|
268
|
-
} else
|
|
269
|
-
return a(n, Object.assign({}, e));
|
|
270
|
-
}))), a("span", { "aria-live": "polite", id: this.hintId }, i && a("span", { class: { "hint-container": !0, "screen-reader-text": this.invalid && this.hideInvalid } }, this.invalid && a("prism-icon", { display: "fill", slot: "icon-trailing", size: "xs", tone: "danger", name: "alert" }), a("prism-text", { class: { "invalid-text": this.invalid, "hint-text": !0 }, as: "caption" }, this.invalid ? this.invalidMessage : this.hint))), this.as === "custom" && a("input", { type: "hidden", name: this.name, value: this.hiddenValue }));
|
|
271
|
-
}
|
|
272
|
-
get el() {
|
|
273
|
-
return z(this);
|
|
274
|
-
}
|
|
275
|
-
static get watchers() {
|
|
276
|
-
return {
|
|
277
|
-
hiddenValue: ["emitHiddenValue"],
|
|
278
|
-
options: ["setCustomOptions"],
|
|
279
|
-
value: ["setValue"]
|
|
280
|
-
};
|
|
281
|
-
}
|
|
282
|
-
};
|
|
283
|
-
_.style = C;
|
|
284
|
-
export {
|
|
285
|
-
_ as prism_select
|
|
286
|
-
};
|