@ed.yakovich/component-library 0.0.10 → 0.0.12
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 +14 -15
- package/dist/lib/main.d.ts +0 -13
- package/dist/main.js +6 -32
- package/package.json +2 -5
- package/dist/components/Accordion/context/index.js +0 -7
- package/dist/components/Accordion/index.js +0 -38
- package/dist/components/Accordion/types/index.js +0 -1
- package/dist/components/Cart/index.js +0 -35
- package/dist/components/EquipmentSummary/context/index.js +0 -10
- package/dist/components/EquipmentSummary/index.js +0 -65
- package/dist/components/EquipmentSummary/types/index.js +0 -1
- package/dist/components/Grid/index.js +0 -19
- package/dist/components/HeroBanner/context/index.js +0 -7
- package/dist/components/HeroBanner/index.js +0 -33
- package/dist/components/HeroBanner/types/index.js +0 -1
- package/dist/components/Nav/index.js +0 -23
- package/dist/components/OfferCards/context/index.js +0 -7
- package/dist/components/OfferCards/index.js +0 -30
- package/dist/components/OfferCards/subComponents/OfferCard.js +0 -62
- package/dist/components/OfferCards/types/index.js +0 -1
- package/dist/components/SaleBanner/context/index.js +0 -7
- package/dist/components/SaleBanner/index.js +0 -59
- package/dist/components/SaleBanner/types/index.js +0 -1
- package/dist/index-0d8e0844-BJzWsYCM.js +0 -7403
- package/dist/index-C9Rf5U9q.js +0 -29143
- package/dist/index-b30029d4-E1YxEHFH.js +0 -12
- package/dist/index-e6818ded-r_t6ryaW.js +0 -57
- package/dist/index.esm-322571ff-D1REhsOg.js +0 -41
- package/dist/lib/components/Accordion/context/index.d.ts +0 -10
- package/dist/lib/components/Accordion/index.d.ts +0 -2
- package/dist/lib/components/Accordion/types/index.d.ts +0 -13
- package/dist/lib/components/Cart/index.d.ts +0 -6
- package/dist/lib/components/EquipmentSummary/context/index.d.ts +0 -10
- package/dist/lib/components/EquipmentSummary/index.d.ts +0 -2
- package/dist/lib/components/EquipmentSummary/types/index.d.ts +0 -14
- package/dist/lib/components/Grid/index.d.ts +0 -13
- package/dist/lib/components/HeroBanner/context/index.d.ts +0 -10
- package/dist/lib/components/HeroBanner/index.d.ts +0 -2
- package/dist/lib/components/HeroBanner/types/index.d.ts +0 -11
- package/dist/lib/components/Nav/index.d.ts +0 -8
- package/dist/lib/components/OfferCards/context/index.d.ts +0 -9
- package/dist/lib/components/OfferCards/index.d.ts +0 -2
- package/dist/lib/components/OfferCards/subComponents/OfferCard.d.ts +0 -3
- package/dist/lib/components/OfferCards/types/index.d.ts +0 -26
- package/dist/lib/components/SaleBanner/context/index.d.ts +0 -10
- package/dist/lib/components/SaleBanner/index.d.ts +0 -2
- package/dist/lib/components/SaleBanner/types/index.d.ts +0 -11
- package/dist/link-DO_Jvm9n.js +0 -685
- package/dist/prism-accordion.entry-DeyFGNx-.js +0 -51
- package/dist/prism-avatar_2.entry-MLbdVrJg.js +0 -68
- package/dist/prism-badge.entry-BG5y7O5U.js +0 -58
- package/dist/prism-banner.entry-DChrjpFH.js +0 -82
- package/dist/prism-breadcrumb.entry-1YzYlKen.js +0 -33
- package/dist/prism-button_2.entry-DO8IGIoS.js +0 -110
- package/dist/prism-card.entry-DQ6P4TZP.js +0 -119
- package/dist/prism-carousel.entry-BA8zsHRW.js +0 -3111
- package/dist/prism-checkbox-group.entry-CP4-gghb.js +0 -62
- package/dist/prism-checkbox.entry-CJCy8fvC.js +0 -99
- package/dist/prism-data-table.entry--0djw8ls.js +0 -10475
- package/dist/prism-datepicker.entry-DPm7tpKB.js +0 -249
- package/dist/prism-form.entry-CS1zRoMt.js +0 -42
- package/dist/prism-grid.entry-jcx2aMUm.js +0 -28
- package/dist/prism-header.entry-CBSIpa0M.js +0 -202
- package/dist/prism-hero.entry-B0CKL5y9.js +0 -23
- package/dist/prism-icon_2.entry-Aja4QGUK.js +0 -118
- package/dist/prism-image.entry-B--khr6E.js +0 -38
- package/dist/prism-input-file.entry-i5qJkwEK.js +0 -119
- package/dist/prism-input-otp.entry-DXoARuzH.js +0 -63
- package/dist/prism-input-text.entry-D4QQ-dYX.js +0 -228
- package/dist/prism-input-textarea.entry-eeQHnhqC.js +0 -140
- package/dist/prism-layout.entry-bfKqOEnU.js +0 -20
- package/dist/prism-lineitem.entry-YIRZPVe_.js +0 -44
- package/dist/prism-menu.entry-BIlRCiaA.js +0 -231
- package/dist/prism-modal.entry-Kc-SpAR-.js +0 -94
- package/dist/prism-pagination.entry-BCo9aMdq.js +0 -60
- package/dist/prism-popover.entry-LmDvzCiR.js +0 -1013
- package/dist/prism-popper.entry-BqrcyTkE.js +0 -959
- package/dist/prism-progress.entry-29_ezvop.js +0 -79
- package/dist/prism-radio-group.entry-cL6AqjTk.js +0 -66
- package/dist/prism-radio.entry-CM_vZFZA.js +0 -101
- package/dist/prism-select.entry-B6A3gk7B.js +0 -230
- package/dist/prism-switch.entry-CtEfKB58.js +0 -95
- package/dist/prism-tab.entry-DIDUhFlk.js +0 -20
- package/dist/prism-tabs.entry-Cj3dW5_E.js +0 -70
- package/dist/prism-tooltip.entry-DEdY5eRd.js +0 -52
- package/dist/prism-typeahead.entry-D2XrvXaG.js +0 -1234
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
import { r, e as d, h as a, H as n, g as c } from "./index-C9Rf5U9q.js";
|
|
2
|
-
import { m as l } from "./index-e6818ded-r_t6ryaW.js";
|
|
3
|
-
/*!
|
|
4
|
-
* Copyright (c) 2025 Comcast. Prism UI - v7.32.2 - made with ❤️ in Philadelphia
|
|
5
|
-
*/
|
|
6
|
-
const h = ':host{--icon-width:1.5rem;--icon-height:1.5rem;--icon-color:inherit;--prism-icon-stroke-color:inherit;clip-rule:evenodd;fill:none;fill-rule:evenodd;display:inline-block;line-height:0;opacity:0;position:relative;text-align:left;transition:opacity .5s ease-in;vertical-align:middle;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media (prefers-reduced-motion){:host{transition:none}.notifications:after{transition:none}}:host(.loaded){opacity:1}.info{--icon-color:rgb(var(--text-color-info-base))}.positive{--icon-color:rgb(var(--text-color-positive-base))}.caution{--icon-color:rgb(var(--text-color-caution-base))}.negative{--icon-color:rgb(var(--text-color-negative-base))}.neutral{--icon-color:rgb(var(--text-color-neutral-base))}.neutral2{--icon-color:rgb(var(--text-color-neutral2-base))}.neutral-inverse,.neutral2-inverse{--icon-color:rgb(var(--text-color-inverse-base))}.theme1{--icon-color:rgb(var(--text-color-theme1-base))}@media (forced-colors:active){.icon-inner svg{--icon-color:CanvasText}}.icon-inner{display:inline-block}.icon-inner svg{stroke:var(--prism-icon-stroke-color);color:var(--icon-color)}.size-xs{--icon-width:1rem;--icon-height:1rem}.size-sm{--icon-width:1.5rem;--icon-height:1.5rem}.size-md{--icon-width:2rem;--icon-height:2rem}.size-lg{--icon-width:3rem;--icon-height:3rem}.size-xl{--icon-width:4.5rem;--icon-height:4.5rem}.size-xxl{--icon-width:6rem;--icon-height:6rem}.icon,.size-custom{height:var(--icon-height);width:var(--icon-width)}.notifications{position:relative}.notifications:after{--tw-border-opacity:1;border-color:rgb(var(--border-color-stroke-inverse-base)/var(--tw-border-opacity));border-radius:50%;border-style:solid;bottom:-.125rem;content:"";display:block;position:absolute;right:-.125rem;transition:background-color .2s ease-in}.size-xs:after{border-width:.0313rem;bottom:0;height:.375rem;right:0;width:.375rem}.size-sm:after{border-width:1px;bottom:0;height:.5rem;right:0;width:.5rem}.size-md:after{border-width:.0938rem;height:.75rem;width:.75rem}.size-lg:after{border-width:2px;height:1rem;width:1rem}.size-xl:after{border-width:.1875rem;height:1.5rem;width:1.5rem}.notifications.dot-neutral:after{--tw-bg-opacity:1;--shadow-color:var(--fill-neutral-base-shadow);background-color:rgb(var(--background-color-fill-neutral-base)/var(--tw-bg-opacity))}.notifications.dot-neutral2:after{--tw-bg-opacity:1;background-color:rgb(var(--background-color-fill-neutral2-base)/var(--tw-bg-opacity))}.notifications.dot-positive:after{--tw-bg-opacity:1;--shadow-color:var(--fill-positive-base-shadow);background-color:rgb(var(--background-color-fill-positive-base)/var(--tw-bg-opacity))}.notifications.dot-negative:after{--tw-bg-opacity:1;--shadow-color:var(--fill-negative-base-shadow);background-color:rgb(var(--background-color-fill-negative-base)/var(--tw-bg-opacity))}.notifications.dot-theme1:after{--tw-bg-opacity:1;--shadow-color:var(--fill-theme1-base-shadow);background-color:rgb(var(--background-color-fill-theme1-base)/var(--tw-bg-opacity))}.notifications.dot-theme2:after{--tw-bg-opacity:1;--shadow-color:var(--fill-theme2-base-shadow);background-color:rgb(var(--background-color-fill-theme2-base)/var(--tw-bg-opacity))}.notifications.dot-info:after{--tw-bg-opacity:1;--shadow-color:var(--fill-info-base-shadow);background-color:rgb(var(--background-color-fill-info-base)/var(--tw-bg-opacity))}.notifications.dot-caution:after{--tw-bg-opacity:1;--shadow-color:var(--fill-caution-base-shadow);background-color:rgb(var(--background-color-fill-caution-base)/var(--tw-bg-opacity))}.secondary{opacity:.6}.tertiary{opacity:.15}.inactive{opacity:.3}.contained{border-radius:2.5rem}.contained.outline{border-style:solid;border-width:1px}.contained.outline.caution{--tw-border-opacity:0.15;border-color:rgb(var(--border-color-stroke-caution-base)/var(--tw-border-opacity))}.contained.outline.info{--tw-border-opacity:0.15;border-color:rgb(var(--border-color-stroke-info-base)/var(--tw-border-opacity))}.contained.outline.negative{--tw-border-opacity:0.15;border-color:rgb(var(--border-color-stroke-negative-base)/var(--tw-border-opacity))}.contained.outline.neutral{--tw-border-opacity:0.15;border-color:rgb(var(--border-color-stroke-neutral-base)/var(--tw-border-opacity))}.contained.outline.neutral-inverse{--tw-border-opacity:0.15;border-color:rgb(var(--border-color-stroke-inverse-base)/var(--tw-border-opacity))}.contained.outline.neutral2{--tw-border-opacity:0.15;border-color:rgb(var(--border-color-stroke-neutral2-base)/var(--tw-border-opacity))}.contained.outline.neutral2-inverse{--tw-border-opacity:0.15;border-color:rgb(var(--border-color-stroke-inverse-base)/var(--tw-border-opacity))}.contained.outline.positive{--tw-border-opacity:0.15;border-color:rgb(var(--border-color-stroke-positive-base)/var(--tw-border-opacity))}.contained.outline.theme1{--tw-border-opacity:0.15;border-color:rgb(var(--border-color-stroke-theme1-base)/var(--tw-border-opacity))}.contained.outline.theme2{--tw-border-opacity:0.15;border-color:rgb(var(--border-color-stroke-caution-base)/var(--tw-border-opacity))}.contained.fill.low.caution{--tw-bg-opacity:1;--shadow-color:var(--material-caution-base-shadow);background-color:rgb(var(--background-color-material-caution-base)/var(--tw-bg-opacity))}.contained.fill.low.info{--tw-bg-opacity:1;--shadow-color:var(--material-info-base-shadow);background-color:rgb(var(--background-color-material-info-base)/var(--tw-bg-opacity))}.contained.fill.low.negative{--tw-bg-opacity:1;--shadow-color:var(--material-negative-base-shadow);background-color:rgb(var(--background-color-material-negative-base)/var(--tw-bg-opacity))}.contained.fill.low.neutral{--tw-bg-opacity:1;--shadow-color:var(--material-neutral-base-shadow);background-color:rgb(var(--background-color-material-neutral-base)/var(--tw-bg-opacity))}.contained.fill.low.neutral-inverse{--tw-bg-opacity:1;--shadow-color:var(--material-neutral-inverse-base-shadow);background-color:rgb(var(--background-color-material-neutral-inverse-base)/var(--tw-bg-opacity))}.contained.fill.low.neutral2{--tw-bg-opacity:1;--shadow-color:var(--material-neutral2-base-shadow);background-color:rgb(var(--background-color-material-neutral2-base)/var(--tw-bg-opacity))}.contained.fill.low.neutral2-inverse{--tw-bg-opacity:1;--shadow-color:var(--material-neutral2-inverse-base-shadow);background-color:rgb(var(--background-color-material-neutral2-inverse-base)/var(--tw-bg-opacity))}.contained.fill.low.positive{--tw-bg-opacity:1;--shadow-color:var(--material-positive-base-shadow);background-color:rgb(var(--background-color-material-positive-base)/var(--tw-bg-opacity))}.contained.fill.low.theme1{--tw-bg-opacity:1;--shadow-color:var(--material-theme1-base-shadow);background-color:rgb(var(--background-color-material-theme1-base)/var(--tw-bg-opacity))}.contained.fill.low.theme2{--tw-bg-opacity:1;--shadow-color:var(--material-caution-base-shadow);background-color:rgb(var(--background-color-material-caution-base)/var(--tw-bg-opacity))}.contained.fill.high.caution{--tw-bg-opacity:1;--shadow-color:var(--fill-caution-base-shadow);background-color:rgb(var(--background-color-fill-caution-base)/var(--tw-bg-opacity))}.contained.fill.high.info{--tw-bg-opacity:1;--shadow-color:var(--fill-info-base-shadow);background-color:rgb(var(--background-color-fill-info-base)/var(--tw-bg-opacity))}.contained.fill.high.negative{--tw-bg-opacity:1;--shadow-color:var(--fill-negative-base-shadow);background-color:rgb(var(--background-color-fill-negative-base)/var(--tw-bg-opacity))}.contained.fill.high.neutral{--tw-bg-opacity:1;--shadow-color:var(--fill-neutral-base-shadow);background-color:rgb(var(--background-color-fill-neutral-base)/var(--tw-bg-opacity))}.contained.fill.high.neutral-inverse{--tw-bg-opacity:1;--shadow-color:var(--fill-inverse-base-shadow);background-color:rgb(var(--background-color-fill-inverse-base)/var(--tw-bg-opacity))}.contained.fill.high.neutral2{--tw-bg-opacity:1;background-color:rgb(var(--background-color-fill-neutral2-base)/var(--tw-bg-opacity))}.contained.fill.high.neutral2-inverse{--tw-bg-opacity:1;--shadow-color:var(--fill-inverse-base-shadow);background-color:rgb(var(--background-color-fill-inverse-base)/var(--tw-bg-opacity))}.contained.fill.high.positive{--tw-bg-opacity:1;--shadow-color:var(--fill-positive-base-shadow);background-color:rgb(var(--background-color-fill-positive-base)/var(--tw-bg-opacity))}.contained.fill.high.theme1{--tw-bg-opacity:1;--shadow-color:var(--fill-theme1-base-shadow);background-color:rgb(var(--background-color-fill-theme1-base)/var(--tw-bg-opacity))}.contained.fill.high.theme2{--tw-bg-opacity:1;--shadow-color:var(--fill-caution-base-shadow);background-color:rgb(var(--background-color-fill-caution-base)/var(--tw-bg-opacity))}.xs.contained{padding:.25rem .375rem}.sm.contained{padding:.5rem .75rem}.md.contained{padding:.75rem 1rem}.lg.contained{padding:1rem 1.5rem}.xl.contained{border-radius:3.75rem;padding:1.25rem 1.75rem}.xxl.contained{border-radius:5rem;padding:1.5rem 2rem}.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}}', b = h, g = class {
|
|
7
|
-
constructor(t) {
|
|
8
|
-
r(this, t), this.prismLoad = d(this, "prismLoad", 7), this.cdn = "https://assets.comcast.com/assets/common/xds_icons/svg/", this.svgIcon = void 0, this.svgContent = void 0, this.isVisible = !1, this.loaded = !1, this.contained = !1, this.containedTone = "neutral2", this.containedDisplay = "fill", this.containedPriority = "low", this.label = void 0, this.role = "img", this.notifications = !1, this.name = "", this.size = "sm", this.tone = "neutral", this.dotTone = "positive", this.priority = "primary", this.theme = "fill", this.path = "", this.lazy = !1;
|
|
9
|
-
}
|
|
10
|
-
/**
|
|
11
|
-
* @description Watch for changes to name prop, call loadIcon()
|
|
12
|
-
*/
|
|
13
|
-
nameHandler() {
|
|
14
|
-
this.loadIcon();
|
|
15
|
-
}
|
|
16
|
-
/**
|
|
17
|
-
* @description Watch for changes to path prop, call loadIcon()
|
|
18
|
-
*/
|
|
19
|
-
pathHandler() {
|
|
20
|
-
this.loadIcon();
|
|
21
|
-
}
|
|
22
|
-
/**
|
|
23
|
-
* @description Watch for changes to theme prop, call loadIcon()
|
|
24
|
-
*/
|
|
25
|
-
themeHandler() {
|
|
26
|
-
this.loadIcon();
|
|
27
|
-
}
|
|
28
|
-
componentWillLoad() {
|
|
29
|
-
this.waitUntilVisible(this.el, "25%", () => {
|
|
30
|
-
this.isVisible = !0, this.loadIcon();
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
connectedCallback() {
|
|
34
|
-
l("prism-icon");
|
|
35
|
-
}
|
|
36
|
-
disconnectedCallback() {
|
|
37
|
-
this.intobs && (this.intobs.disconnect(), this.intobs = void 0);
|
|
38
|
-
}
|
|
39
|
-
waitUntilVisible(t, e, i) {
|
|
40
|
-
if (this.lazy && typeof window < "u" && window.IntersectionObserver) {
|
|
41
|
-
const o = this.intobs = new window.IntersectionObserver((s) => {
|
|
42
|
-
s[0].isIntersecting && (o.disconnect(), this.intobs = void 0, i());
|
|
43
|
-
}, { rootMargin: e });
|
|
44
|
-
o.observe(t);
|
|
45
|
-
} else
|
|
46
|
-
i();
|
|
47
|
-
}
|
|
48
|
-
/** @internal */
|
|
49
|
-
formatName(t) {
|
|
50
|
-
return t.replace(" ", "_").toLocaleLowerCase();
|
|
51
|
-
}
|
|
52
|
-
/** @internal */
|
|
53
|
-
async loadIcon() {
|
|
54
|
-
if (this.isVisible && (this.name || this.path)) {
|
|
55
|
-
this.loaded = !1;
|
|
56
|
-
const t = this.path ? this.path : `${this.cdn}${this.formatName(this.name)}/ic_${this.formatName(this.name)}_${this.theme}.svg`, e = await fetch(t);
|
|
57
|
-
if (!e.ok)
|
|
58
|
-
throw new Error(`PRISM-UI >>> The icon ${this.formatName(this.name)} doesn't exist in ${t}`);
|
|
59
|
-
const i = await e.text();
|
|
60
|
-
this.svgContent = i, this.loaded = !0;
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
componentDidRender() {
|
|
64
|
-
if (this.svgContent) {
|
|
65
|
-
const t = this.element.querySelector("svg"), e = [`size-${this.size}`, `${this.tone}`, `${this.priority}`, "icon"];
|
|
66
|
-
this.path || (t == null || t.removeAttribute("style"), t == null || t.setAttribute("fill", "currentColor")), t == null || t.setAttribute("focusable", "false"), t == null || t.setAttribute("role", this.role), t == null || t.setAttribute("class", ""), t == null || t.classList.add(...e), this.label === void 0 ? t == null || t.setAttribute("aria-hidden", "true") : (t == null || t.removeAttribute("aria-hidden"), t == null || t.setAttribute("aria-label", this.label)), this.prismLoad.emit({ name: this.name || this.path, target: this.element, loaded: this.loaded });
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
render() {
|
|
70
|
-
return a(n, { key: "0c1fa8a69a3a66e0132268d00cb3667b13ee8110", class: {
|
|
71
|
-
loaded: this.loaded
|
|
72
|
-
} }, a("section", { key: "91676c7e73a9efc938f0e3be0e90cfbf7b1adba4", class: {
|
|
73
|
-
contained: this.contained,
|
|
74
|
-
[this.containedTone]: this.contained,
|
|
75
|
-
[this.containedDisplay]: this.contained,
|
|
76
|
-
[this.containedPriority]: this.contained,
|
|
77
|
-
[this.size]: !0
|
|
78
|
-
} }, this.svgContent ? a("div", { part: "container", ref: (t) => this.element = t, class: {
|
|
79
|
-
notifications: this.notifications,
|
|
80
|
-
[`dot-${this.dotTone}`]: !0,
|
|
81
|
-
"icon-inner": !0,
|
|
82
|
-
[`size-${this.size}`]: !0
|
|
83
|
-
}, innerHTML: this.svgContent }) : null));
|
|
84
|
-
}
|
|
85
|
-
get el() {
|
|
86
|
-
return c(this);
|
|
87
|
-
}
|
|
88
|
-
static get watchers() {
|
|
89
|
-
return {
|
|
90
|
-
name: ["nameHandler"],
|
|
91
|
-
path: ["pathHandler"],
|
|
92
|
-
theme: ["themeHandler"]
|
|
93
|
-
};
|
|
94
|
-
}
|
|
95
|
-
};
|
|
96
|
-
g.style = b;
|
|
97
|
-
const v = ":host{--line-height:inherit;--padding:var(--size-space-0);--margin:var(--size-space-0);--max:auto;color:inherit;display:var(--display,inline-block)}:host(.text-block){display:var(--display,block)}:host(.display0){--text-display0-leading:var(--text-display0-line-height);--text-display0-family:var(--text-family-brand);font-family:var(--text-display0-family);font-size:var(--text-display0-size);font-weight:var(--text-display0-weight);letter-spacing:var(--text-display0-letter-spacing);line-height:var(--text-display0-leading);text-transform:var(--text-display0-text-transform)}:host(.display1){--text-display1-leading:var(--text-display1-line-height);--text-display1-family:var(--text-family-brand);font-family:var(--text-display1-family);font-size:var(--text-display1-size);font-weight:var(--text-display1-weight);letter-spacing:var(--text-display1-letter-spacing);line-height:var(--text-display1-leading);text-transform:var(--text-display1-text-transform)}:host(.display2){--text-display2-leading:var(--text-display2-line-height);--text-display2-family:var(--text-family-brand);font-family:var(--text-display2-family);font-size:var(--text-display2-size);font-weight:var(--text-display2-weight);letter-spacing:var(--text-display2-letter-spacing);line-height:var(--text-display2-leading);text-transform:var(--text-display2-text-transform)}:host(.heading1){--text-headline1-leading:var(--text-headline1-line-height);--text-headline1-family:var(--text-family-brand);font-family:var(--text-headline1-family);font-size:var(--text-headline1-size);font-weight:var(--text-headline1-weight);letter-spacing:var(--text-headline1-letter-spacing);line-height:var(--text-headline1-leading);text-transform:var(--text-headline1-text-transform)}:host(.heading2){--text-headline2-leading:var(--text-headline2-line-height);--text-headline2-family:var(--text-family-brand);font-family:var(--text-headline2-family);font-size:var(--text-headline2-size);font-weight:var(--text-headline2-weight);letter-spacing:var(--text-headline2-letter-spacing);line-height:var(--text-headline2-leading);text-transform:var(--text-headline2-text-transform)}:host(.heading3){--text-headline3-leading:var(--text-headline3-line-height);--text-headline3-family:var(--text-family-brand);font-family:var(--text-headline3-family);font-size:var(--text-headline3-size);font-weight:var(--text-headline3-weight);letter-spacing:var(--text-headline3-letter-spacing);line-height:var(--text-headline3-leading);text-transform:var(--text-headline3-text-transform)}:host(.body0){--text-body0-leading:var(--text-body0-line-height);--text-body0-family:var(--text-family-default);font-family:var(--text-body0-family);font-size:var(--text-body0-size);font-weight:var(--text-body0-weight);letter-spacing:var(--text-body0-letter-spacing);line-height:var(--text-body0-leading);text-transform:var(--text-body0-text-transform)}:host(.body1){--text-body1-leading:var(--text-body1-line-height);--text-body1-family:var(--text-family-default);font-family:var(--text-body1-family);font-size:var(--text-body1-size);font-weight:var(--text-body1-weight);letter-spacing:var(--text-body1-letter-spacing);line-height:var(--text-body1-leading);text-transform:var(--text-body1-text-transform)}:host(.body2){--text-body2-leading:var(--text-body2-line-height);--text-body2-family:var(--text-family-default);font-family:var(--text-body2-family);font-size:var(--text-body2-size);font-weight:var(--text-body2-weight);letter-spacing:var(--text-body2-letter-spacing);line-height:var(--text-body2-leading);text-transform:var(--text-body2-text-transform)}:host(.body3){--text-body3-leading:var(--text-body3-line-height);--text-body3-family:var(--text-family-default);font-family:var(--text-body3-family);font-size:var(--text-body3-size);font-weight:var(--text-body3-weight);letter-spacing:var(--text-body3-letter-spacing);line-height:var(--text-body3-leading);text-transform:var(--text-body3-text-transform)}:host(.body4){--text-body4-leading:var(--text-body4-line-height);--text-body4-family:var(--text-family-default);font-family:var(--text-body4-family);font-size:var(--text-body4-size);font-weight:var(--text-body4-weight);letter-spacing:var(--text-body4-letter-spacing);line-height:var(--text-body4-leading);text-transform:var(--text-body4-text-transform)}:host(.button){--text-button1-leading:var(--text-button1-line-height);--text-button1-family:var(--text-family-brand);font-family:var(--text-button1-family);font-size:var(--text-button1-size);font-weight:var(--text-button1-weight);letter-spacing:var(--text-button1-letter-spacing);line-height:var(--text-button1-leading);text-transform:var(--text-button1-text-transform)}:host(.button2){--text-button2-leading:var(--text-button2-line-height);--text-button2-family:var(--text-family-brand);font-family:var(--text-button2-family);font-size:var(--text-button2-size);font-weight:var(--text-button2-weight);letter-spacing:var(--text-button2-letter-spacing);line-height:var(--text-button2-leading);text-transform:var(--text-button2-text-transform)}:host(.callout1){--text-callout1-leading:var(--text-callout1-line-height);--text-callout1-family:var(--text-family-brand);font-family:var(--text-callout1-family);font-size:var(--text-callout1-size);font-weight:var(--text-callout1-weight);letter-spacing:var(--text-callout1-letter-spacing);line-height:var(--text-callout1-leading);text-transform:var(--text-callout1-text-transform)}:host(.callout2){--text-callout2-leading:var(--text-callout2-line-height);--text-callout2-family:var(--text-family-brand);font-family:var(--text-callout2-family);font-size:var(--text-callout2-size);font-weight:var(--text-callout2-weight);letter-spacing:var(--text-callout2-letter-spacing);line-height:var(--text-callout2-leading);text-transform:var(--text-callout2-text-transform)}:host(.caption){--text-caption-leading:var(--text-caption-line-height);--text-caption-family:var(--text-family-default);font-family:var(--text-caption-family);font-size:var(--text-caption-size);font-weight:var(--text-caption-weight);letter-spacing:var(--text-caption-letter-spacing);line-height:var(--text-caption-leading);text-transform:var(--text-caption-text-transform)}:host(.tag){--text-tag-leading:var(--text-tag-line-height);--text-tag-family:var(--text-family-default);font-family:var(--text-tag-family);font-size:var(--text-tag-size);font-weight:var(--text-tag-weight);letter-spacing:var(--text-tag-letter-spacing);line-height:var(--text-tag-leading);text-transform:var(--text-tag-text-transform)}.text{color:inherit;display:var(--display);font-size:inherit;font-weight:inherit;line-height:var(--line-height);margin:var(--margin);padding:var(--padding)}.ellipsis{display:block;line-height:1.1;max-width:var(--max);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.secondary{opacity:var(--prism-text-priority,var(--opacity-secondary,.6))}.inactive{opacity:var(--prism-text-priority,var(--opacity-inactive,.3))}.tertiary{opacity:var(--prism-text-priority,var(--opacity-tertiary,.15))}.expressive{-webkit-background-clip:text;background-clip:text;background-image:var(--background-image-gradient-expressive,linear-gradient(90deg,#28156b,#7b30ff));-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}}", f = v, m = class {
|
|
98
|
-
constructor(t) {
|
|
99
|
-
r(this, t), this.tag = "p", this.display = "body2", this.ellipsis = !1, this.priority = "primary", this.expressive = !1;
|
|
100
|
-
}
|
|
101
|
-
connectedCallback() {
|
|
102
|
-
l("prism-text");
|
|
103
|
-
}
|
|
104
|
-
render() {
|
|
105
|
-
const t = this.tag;
|
|
106
|
-
return a(n, { key: "d26039fcab20b518406c6de187e5e0943f20d491", class: { "text-block": this.tag !== "span", [this.display]: !0 } }, a(t, { key: "9650b7c292cd33e7e25912feb40acee45da5c581", class: {
|
|
107
|
-
text: !0,
|
|
108
|
-
[this.priority]: !0,
|
|
109
|
-
ellipsis: this.ellipsis,
|
|
110
|
-
expressive: this.expressive
|
|
111
|
-
} }, a("slot", { key: "db9ea964ed49917467d37806636f125fb3369c0f" })));
|
|
112
|
-
}
|
|
113
|
-
};
|
|
114
|
-
m.style = f;
|
|
115
|
-
export {
|
|
116
|
-
g as prism_icon,
|
|
117
|
-
m as prism_text
|
|
118
|
-
};
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { r, e as t, h as e, H as o, g as s } from "./index-C9Rf5U9q.js";
|
|
2
|
-
import { m as d } from "./index-e6818ded-r_t6ryaW.js";
|
|
3
|
-
/*!
|
|
4
|
-
* Copyright (c) 2025 Comcast. Prism UI - v7.32.2 - made with ❤️ in Philadelphia
|
|
5
|
-
*/
|
|
6
|
-
const n = ':host{--pui-img-display:block;display:flex;position:relative}:host :focus,:host:focus{outline:2px solid transparent;outline-offset:2px}picture{aspect-ratio:inherit;display:block;height:100%;margin:0;object-fit:inherit;object-position:inherit;padding:0;width:100%}.shadow{--tw-shadow:0px 4px 8px -4px var(--shadow-color);--tw-shadow-colored:0px 4px 8px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.img{aspect-ratio:inherit;border-radius:var(--border-radius-xsmall,2px);display:var(--pui-img-display);height:100%;max-height:100%;max-width:100%;object-fit:inherit;object-position:inherit;position:relative;transition:all .3s ease-out;visibility:hidden;width:100%;z-index:1}.img.loaded{animation:opacity-up 1s ease-in-out;visibility:visible}.loading:after{--tw-bg-opacity:1;--shadow-color:var(--material-neutral2-base-shadow);animation:imageshimmer 1.6s linear infinite;background-color:rgb(var(--background-color-material-neutral2-base)/var(--tw-bg-opacity));background-image:linear-gradient(115deg,rgb(var(--background-color-material-neutral-base)),rgb(var(--background-color-material-neutral-base)) 25%,rgb(var(--background-color-material-neutral2-base)) 45%,rgb(var(--background-color-material-neutral2-base)) 50%,rgb(var(--background-color-material-neutral-base)) 75%,rgb(var(--background-color-material-neutral-base)));background-size:50rem 50rem;content:"";display:block;height:100%;position:absolute;top:0;width:100%}@keyframes imageshimmer{0%{background-position:-25rem 0}to{background-position:25rem 0}}@keyframes opacity-up{0%{opacity:0}to{opacity:1}}@media screen and (prefers-reduced-motion:reduce){.img.loaded,.loading:after{animation:none}.img{transition:none}}.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}}', l = n, m = class {
|
|
7
|
-
constructor(a) {
|
|
8
|
-
r(this, a), this.prismLoad = t(this, "prismLoad", 7), this.prismError = t(this, "prismError", 7), this.alt = "", this.src = void 0, this.sourceImages = void 0, this.filter = "none", this.filterValue = void 0, this.blurred = !1, this.shadow = !1, this.lazy = !0, this.delay = 300, this.isLoaded = !1;
|
|
9
|
-
}
|
|
10
|
-
connectedCallback() {
|
|
11
|
-
d("prism-image");
|
|
12
|
-
}
|
|
13
|
-
_imageError(a) {
|
|
14
|
-
this.prismError.emit({ name: "image-load-error", target: a.currentTarget });
|
|
15
|
-
}
|
|
16
|
-
_imageLoad(a) {
|
|
17
|
-
this.isLoaded = this.image.complete, this.prismLoad.emit({ name: "image-loaded", loaded: this.isLoaded, target: this.el });
|
|
18
|
-
}
|
|
19
|
-
render() {
|
|
20
|
-
var a;
|
|
21
|
-
return e(o, { key: "38f4ba2b63a847af9242f1310d599eeba3105de0", class: { loaded: this.isLoaded } }, e("picture", { key: "d6016a5d774a0c019efdfa5b45abec6cbd58196f", ref: (i) => this.picture = i, class: { loading: !this.isLoaded, picture: !0 } }, (a = this.sourceImages) === null || a === void 0 ? void 0 : a.map((i) => e("source", { type: i.type, media: i.size, srcSet: i.source })), e("img", { key: "e7abd5bed8a4db260142d029b3632451b29f535c", ref: (i) => this.image = i, onError: (i) => {
|
|
22
|
-
this._imageError(i);
|
|
23
|
-
}, onLoad: (i) => {
|
|
24
|
-
this._imageLoad(i);
|
|
25
|
-
}, alt: this.alt, src: this.src, loading: this.lazy ? "lazy" : "eager", part: "image", class: {
|
|
26
|
-
loaded: this.isLoaded,
|
|
27
|
-
img: !0,
|
|
28
|
-
shadow: this.shadow
|
|
29
|
-
}, style: { filter: this.filter === "none" ? "none" : `${this.filter}(${this.filterValue})` } })));
|
|
30
|
-
}
|
|
31
|
-
get el() {
|
|
32
|
-
return s(this);
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
m.style = l;
|
|
36
|
-
export {
|
|
37
|
-
m as prism_image
|
|
38
|
-
};
|
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
import { r as o, e as l, h as e, H as d, g as c } from "./index-C9Rf5U9q.js";
|
|
2
|
-
import { g as p, m as h } from "./index-e6818ded-r_t6ryaW.js";
|
|
3
|
-
import { A as f } from "./index-b30029d4-E1YxEHFH.js";
|
|
4
|
-
/*!
|
|
5
|
-
* Copyright (c) 2025 Comcast. Prism UI - v7.32.2 - made with ❤️ in Philadelphia
|
|
6
|
-
*/
|
|
7
|
-
const u = ".text-body1.sc-prism-input-file{--text-body1-leading:var(--text-body1-line-height);--text-body1-family:var(--text-family-default);font-family:var(--text-body1-family);font-size:var(--text-body1-size);font-weight:var(--text-body1-weight);letter-spacing:var(--text-body1-letter-spacing);line-height:var(--text-body1-leading);text-transform:var(--text-body1-text-transform)}.sc-prism-input-file-h{--icon-offset-x:0.75rem;--icon-offset-y:0%;--input-margin-top:1rem;--input-margin-bottom:1rem;--text-align:left;--input-padding-minimal:var(--space-asym-1,calc(0.75rem - 1px) 0 0.5rem 0);--input-padding-contained:var(--space-sym-1,calc(1rem - 1px));box-sizing:border-box;display:block;margin-bottom:var(--input-margin-bottom);margin-top:var(--input-margin-top);position:relative;width:100%}.screen-reader-text.sc-prism-input-file{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.hint-container.sc-prism-input-file{align-items:center;display:flex;margin-top:.25rem}.hint-container.sc-prism-input-file>.sc-prism-input-file:not([hidden])~.sc-prism-input-file:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.hint-text.sc-prism-input-file{display:block;text-align:left}@media (prefers-reduced-motion){.input.sc-prism-input-file{transition:none}}.input.sc-prism-input-file{--text-body1-leading:var(--text-body1-line-height);--text-body1-family:var(--text-family-default);--tw-text-opacity:1;--tw-border-opacity:1;background-color:var(--background-color-transparent,transparent);border-color:rgb(var(--border-color-stroke-neutral2-base)/var(--tw-border-opacity));border-style:solid;border-width:0 0 1px;box-sizing:border-box;color:rgb(var(--text-color-neutral-base)/var(--tw-text-opacity));font-family:var(--text-body1-family);font-size:var(--text-body1-size);font-weight:var(--text-body1-weight);letter-spacing:var(--text-body1-letter-spacing);line-height:var(--text-body1-leading);outline:2px solid transparent;outline-offset:2px;text-align:var(--text-align,left);text-transform:var(--text-body1-text-transform);transition:border-color,box-shadow,border-radius,padding .2s ease;width:100%}.input.minimal.sc-prism-input-file{padding:var(--input-padding-minimal)}.input.contained.sc-prism-input-file{--tw-bg-opacity:1;--shadow-color:var(--material-neutral2-base-shadow);background-color:rgb(var(--background-color-material-neutral2-base)/var(--tw-bg-opacity));border-radius:var(--border-radius-small,4px);border-width:1px;padding:var(--input-padding-contained)}.file-grid.sc-prism-input-file:focus-within .input.contained.sc-prism-input-file{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(var(--ring-color-stroke-theme1-base)/var(--tw-ring-opacity));border-color:var(--border-color-transparent,transparent);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.file-grid.sc-prism-input-file:focus-within .input.minimal.sc-prism-input-file{--tw-border-opacity:1;border-bottom-width:2px;border-color:rgb(var(--border-color-stroke-theme1-base)/var(--tw-border-opacity))}.file-grid.sc-prism-input-file:focus-within .input.minimal.valid.sc-prism-input-file,.input.contained.valid.sc-prism-input-file,.input.minimal.valid.sc-prism-input-file{--tw-border-opacity:1;border-color:rgb(var(--border-color-stroke-positive-base)/var(--tw-border-opacity))}.file-grid.sc-prism-input-file:focus-within .input.contained.valid.sc-prism-input-file{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(var(--ring-color-stroke-positive-base)/var(--tw-ring-opacity));border-color:var(--border-color-transparent,transparent);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.file-grid.sc-prism-input-file:focus-within .input.minimal.invalid.sc-prism-input-file,.input.contained.invalid.sc-prism-input-file,.input.minimal.invalid.sc-prism-input-file{--tw-border-opacity:1;border-color:rgb(var(--border-color-stroke-negative-base)/var(--tw-border-opacity))}.file-grid.sc-prism-input-file:focus-within .input.contained.invalid.sc-prism-input-file{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(var(--ring-color-stroke-negative-base)/var(--tw-ring-opacity));border-color:var(--border-color-transparent,transparent);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.input.icon-leading.sc-prism-input-file{padding-left:3rem}.input.minimal.icon-leading.sc-prism-input-file{padding-left:2rem}.input.icon-trailing.sc-prism-input-file{padding-right:3.5rem}.input.contained.disabled.sc-prism-input-file,.input.disabled.sc-prism-input-file,.input.minimal.disabled.sc-prism-input-file{--tw-border-opacity:var(--border-opacity-inactive,0.3);--tw-text-opacity:var(--text-opacity-inactive,0.3);cursor:not-allowed}.invalid-text.sc-prism-input-file{--tw-text-opacity:1;color:rgb(var(--text-color-negative-base)/var(--tw-text-opacity))}.valid-text.sc-prism-input-file{--tw-text-opacity:1;color:rgb(var(--text-color-positive-base)/var(--tw-text-opacity))}.wrap.sc-prism-input-file{display:block;position:relative}.content.sc-prism-input-file{margin-left:.25rem}.sc-prism-input-file-s>[css-slot=icon-trailing]{margin-left:.375rem}.label.sc-prism-input-file{cursor:pointer;display:flex}.file-grid.sc-prism-input-file,.label.sc-prism-input-file{align-items:center}.file-grid.sc-prism-input-file{display:grid;grid-template-columns:1fr -webkit-max-content -webkit-max-content;grid-template-columns:1fr max-content max-content}.clear.sc-prism-input-file{margin-left:.375rem}.placeholder-text.sc-prism-input-file{margin-left:.25rem;margin-right:.25rem}.count.sc-prism-input-file{font-weight:700}", m = u, b = class {
|
|
8
|
-
constructor(i) {
|
|
9
|
-
o(this, i), this.prismChange = l(this, "prismChange", 7), this.prismInput = l(this, "prismInput", 7), this.prismBlur = l(this, "prismBlur", 7), this.prismFocus = l(this, "prismFocus", 7), this.uid = p(), this.hintId = `${this.prismId}-hint`, this.isDirty = !1, this.slots = {
|
|
10
|
-
"icon-trailing": !1
|
|
11
|
-
}, this.prismId = `prism-input-text-${this.uid}`, this.name = `${this.prismId}`, this.label = this.name.charAt(0).toUpperCase() + this.name.replace(/-/g, " ").substring(1), this.disabled = !1, this.hideLabel = !1, this.hideInvalid = !1, this.invalid = !1, this.invalidMessage = "This field is required", this.ariaDescribedby = "", this.ariaActivedescendant = void 0, this.ariaControls = void 0, this.ariaAutocomplete = void 0, this.describedBy = void 0, this.accept = void 0, this.capture = void 0, this.autoFocus = !1, this.hint = void 0, this.multiple = !1, this.placeholder = void 0, this.required = !1, this.readonly = !1, this.value = "", this.variant = "contained", this.iconVariant = "contained", this.iconContainedTone = "theme1", this.valid = !1, this.elementFocused = !1, this.fileList = [];
|
|
12
|
-
}
|
|
13
|
-
/**
|
|
14
|
-
* Listen to Reset Events
|
|
15
|
-
*/
|
|
16
|
-
handleReset() {
|
|
17
|
-
this.fileList = [];
|
|
18
|
-
}
|
|
19
|
-
/**
|
|
20
|
-
* @description Public: Set Focus on Input
|
|
21
|
-
*/
|
|
22
|
-
async setFocus() {
|
|
23
|
-
this.nativeInput && this.nativeInput.focus();
|
|
24
|
-
}
|
|
25
|
-
// Parse File Names
|
|
26
|
-
/** @internal */
|
|
27
|
-
fileParse(i) {
|
|
28
|
-
let t = Object.keys(i), s = [];
|
|
29
|
-
t.forEach((r) => {
|
|
30
|
-
let n = i[r] ? i[r].size : 0;
|
|
31
|
-
n > 1e6 ? n = `${(n / 1e6).toFixed(2)} MB` : n = `${(n / 1e3).toFixed(2)} KB`, s = [...s, { name: i[r].name, size: n }];
|
|
32
|
-
}), this.fileList = s;
|
|
33
|
-
}
|
|
34
|
-
/** @internal */
|
|
35
|
-
clearFiles(i) {
|
|
36
|
-
this.nativeInput.value = "", this.valueChanged(i);
|
|
37
|
-
}
|
|
38
|
-
getValue() {
|
|
39
|
-
return (this.value || "").toString();
|
|
40
|
-
}
|
|
41
|
-
// Emit onChange of Value Event
|
|
42
|
-
/** @internal */
|
|
43
|
-
valueChanged(i) {
|
|
44
|
-
var t, s;
|
|
45
|
-
let r = i.currentTarget;
|
|
46
|
-
r.files && r.files.length > 0 ? this.fileParse(r.files) : this.fileList = [], (t = this.el) === null || t === void 0 || t.setAttribute("value", i.target.value), this.prismChange.emit({
|
|
47
|
-
name: "value-changed",
|
|
48
|
-
value: i.target.value,
|
|
49
|
-
files: {
|
|
50
|
-
total: !((s = r.files) === null || s === void 0) && s.length ? r.files.length : 0,
|
|
51
|
-
list: r.files ? r.files : this.fileList
|
|
52
|
-
}
|
|
53
|
-
});
|
|
54
|
-
}
|
|
55
|
-
// Validity Check
|
|
56
|
-
/** @internal */
|
|
57
|
-
onCheckValidity(i) {
|
|
58
|
-
i.preventDefault();
|
|
59
|
-
let t = i.currentTarget;
|
|
60
|
-
this.invalid = !t.validity.valid, this.valid = t.validity.valid, this.describedBy = `${this.hintId} ${this.ariaDescribedby}`.trim(), this.prismInput.emit({ name: "check-validity", value: t.value, target: t, reason: t.validity });
|
|
61
|
-
}
|
|
62
|
-
/** @internal */
|
|
63
|
-
inputChanged(i) {
|
|
64
|
-
this.isDirty = !0, this.describedBy = `${this.hintId} ${this.ariaDescribedby}`.trim();
|
|
65
|
-
let t = i.currentTarget;
|
|
66
|
-
this.prismInput.emit({ name: "input-change", value: t.value, target: t });
|
|
67
|
-
}
|
|
68
|
-
// Input has focus or blurred
|
|
69
|
-
/** @internal */
|
|
70
|
-
inputState(i) {
|
|
71
|
-
let t = i.currentTarget;
|
|
72
|
-
switch (i.type) {
|
|
73
|
-
case "blur":
|
|
74
|
-
this.isDirty && (this.invalid = !t.validity.valid, this.valid = t.validity.valid), this.elementFocused = !1, this.prismBlur.emit({ name: "input-blurred", value: t.value, target: t });
|
|
75
|
-
break;
|
|
76
|
-
case "focus":
|
|
77
|
-
this.elementFocused = !0, this.prismFocus.emit({ name: "input-focused", value: t.value, target: t });
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
connectedCallback() {
|
|
81
|
-
this.describedBy = this.hint ? `${this.hintId} ${this.ariaDescribedby}` : this.ariaDescribedby, this.el.querySelector('[slot="icon-trailing"]') && this.el.querySelector('[slot="icon-trailing"]').setAttribute("css-slot", "icon-trailing"), this.slots["icon-trailing"] = !!this.el.querySelector('[slot="icon-trailing"]'), h("prism-input-file");
|
|
82
|
-
}
|
|
83
|
-
render() {
|
|
84
|
-
var i, t;
|
|
85
|
-
const s = this.invalid || this.hint, r = this.getValue(), n = this.fileList && this.fileList.length > 0;
|
|
86
|
-
return e(d, { key: "d3e65715a34778a5a0be6e8c6364aa82400b0b7e", class: { [this.variant]: !0 } }, e("prism-text", { key: "ba271586ab1a8d50d9ead8e7a728bd3f71fcf3b6", tag: "span", display: "caption", class: {
|
|
87
|
-
"label-text": !0,
|
|
88
|
-
"screen-reader-text": this.hideLabel
|
|
89
|
-
}, id: `${this.prismId}-label` }, this.label, this.required && e(f, { key: "d50fe4279f72eeaf69410ca067e208f309f644b3" })), e("span", { key: "494a49deb5903695818f16ea4a7974fa75eafcc4", class: "file-grid" }, e("label", { key: "bfed3893a0f9fa71eaf6649af62b635bb4b141cf", class: {
|
|
90
|
-
label: !0,
|
|
91
|
-
invalid: this.invalid,
|
|
92
|
-
valid: this.valid,
|
|
93
|
-
focus: this.elementFocused,
|
|
94
|
-
disabled: this.disabled,
|
|
95
|
-
"file-list-complete": Array.isArray(this.fileList) && this.fileList.length >= 1,
|
|
96
|
-
[this.variant]: !0,
|
|
97
|
-
input: !0
|
|
98
|
-
}, id: `${this.prismId}-contents`, htmlFor: this.prismId }, e("prism-icon", { key: "7979b1bc5d002dc89852dd62164e4ab74ffaa15a", contained: this.iconVariant === "contained", containedTone: this.iconContainedTone, containedPriority: "low", size: "xs", name: "upload", theme: "fill" }), e("div", { key: "807d4b785abaa1915a14f2e3ccd4767da8ab1a83", class: "content" }, this.fileList.length > 0 ? e("prism-badge", { size: "sm", tone: "theme1" }, e("span", { class: "count" }, (i = this.fileList) === null || i === void 0 ? void 0 : i.length), e("span", { class: "screen-reader-text" }, "files")) : e("prism-text", { priority: "secondary", class: { "placeholder-text": !0 }, display: "body2" }, this.placeholder), (t = this.fileList) === null || t === void 0 ? void 0 : t.map((a) => e("prism-badge", { tone: "info", size: "sm" }, a.name)))), e("span", { key: "11ca97d833ce71bb3f42b8138af6accfffbc76e7", class: {
|
|
99
|
-
wrap: !0,
|
|
100
|
-
invalid: this.invalid
|
|
101
|
-
} }, e("input", { key: "10763bfac35fd3fa113d1531db9774e913196563", class: {
|
|
102
|
-
"screen-reader-text": !0
|
|
103
|
-
}, ref: (a) => this.nativeInput = a, id: this.prismId, disabled: this.disabled, accept: this.accept, capture: this.capture, autoFocus: this.autoFocus, multiple: this.multiple, name: this.name, placeholder: this.placeholder, required: this.required, readonly: this.readonly, type: "file", value: r, "aria-invalid": this.invalid.toString(), "aria-required": this.required.toString(), "aria-labelledby": `${this.prismId}-label ${this.prismId}-contents`, "aria-describedby": this.describedBy ? this.describedBy : !1, "aria-activedescendant": this.ariaActivedescendant, "aria-controls": this.ariaControls, "aria-autocomplete": this.ariaAutocomplete, onInput: (a) => this.inputChanged(a), onInvalid: (a) => this.onCheckValidity(a), onChange: (a) => this.valueChanged(a), onBlur: (a) => this.inputState(a), onFocus: (a) => this.inputState(a) })), e("span", { key: "a9b5bde608e048ea8be7fdf7754dd3834d5d221c" }, n && e("prism-button", { key: "d8bf40113771c3e73e0e565190542077f1bc7371", class: "clear", display: "ghost-icon", onPrismPress: (a) => this.clearFiles(a) }, " ", e("prism-icon", { key: "2db84bf3bbec41a1c594ebc711e36d2752622e64", label: "clear files", name: "close" })), e("slot", { key: "d913bc2be2c5914981d44400aa7aa0e260f656a5", name: "icon-trailing" }))), e("span", { key: "6943325847bb2a244c59261383056977334f8611", "aria-live": "polite", id: this.hintId }, s && e("span", { key: "69a77ee9537ad4017ee0a8d31641a88d87ea657b", class: {
|
|
104
|
-
"hint-container": !0,
|
|
105
|
-
"screen-reader-text": this.invalid && this.hideInvalid
|
|
106
|
-
} }, this.invalid && e("prism-icon", { key: "8c3ba1b6b0aeeb7d36c1787aab232d64e1431423", theme: "fill", size: "xs", tone: "negative", name: "alert" }), e("prism-text", { key: "f38c3b29d182a642f97b8740f87f362e0af7d864", class: {
|
|
107
|
-
"invalid-text": this.invalid,
|
|
108
|
-
"file-invalid-text": this.invalid,
|
|
109
|
-
"hint-text": !0
|
|
110
|
-
}, display: "caption" }, this.invalid ? this.invalidMessage : this.hint))));
|
|
111
|
-
}
|
|
112
|
-
get el() {
|
|
113
|
-
return c(this);
|
|
114
|
-
}
|
|
115
|
-
};
|
|
116
|
-
b.style = m;
|
|
117
|
-
export {
|
|
118
|
-
b as prism_input_file
|
|
119
|
-
};
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import { r as l, e as d, h as s, F as p, H as o, g as c } from "./index-C9Rf5U9q.js";
|
|
2
|
-
import { g as h, a as u } from "./index-e6818ded-r_t6ryaW.js";
|
|
3
|
-
/*!
|
|
4
|
-
* Copyright (c) 2025 Comcast. Prism UI - v7.32.2 - made with ❤️ in Philadelphia
|
|
5
|
-
*/
|
|
6
|
-
const m = ".sc-prism-input-otp-h{--input-margin-top:1rem;--input-margin-bottom:1rem;display:inline-block;margin-bottom:var(--input-margin-bottom);margin-top:var(--input-margin-top);width:100%}.fieldset.sc-prism-input-otp{align-items:center;display:flex;flex-grow:0;flex-shrink:0;flex-wrap:nowrap;margin-bottom:.5rem}.fieldset.sc-prism-input-otp>.sc-prism-input-otp:not([hidden])~.sc-prism-input-otp:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.set-center.sc-prism-input-otp{justify-content:center}.set-left.sc-prism-input-otp{justify-content:flex-start}.input.sc-prism-input-otp{--input-padding-contained:0.75rem 0 0.5rem 0;--text-align:center;--input-margin-top:0;--input-margin-bottom:0;max-width:3.5rem}.spacer.sc-prism-input-otp{display:none}.screen-reader-text.sc-prism-input-otp{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.hint-container.sc-prism-input-otp{align-items:center;display:flex}.hint-container.sc-prism-input-otp>.sc-prism-input-otp:not([hidden])~.sc-prism-input-otp:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.hint-text.sc-prism-input-otp{display:block;text-align:left}.invalid-text.sc-prism-input-otp{--tw-text-opacity:1;color:rgb(var(--text-color-negative-base)/var(--tw-text-opacity))}@media (min-width:768px){.fieldset.sc-prism-input-otp>.sc-prism-input-otp:not([hidden])~.sc-prism-input-otp:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1rem*var(--tw-space-x-reverse))}.input.sc-prism-input-otp{--input-padding-contained:0.75rem 1rem 0.5rem 1rem}.spacer.sc-prism-input-otp{--tw-border-opacity:0.15;border-color:rgb(var(--border-color-stroke-neutral-base)/var(--tw-border-opacity));border-width:0 0 2px;display:inline-block;width:1.25rem}}", g = m, v = class {
|
|
7
|
-
constructor(a) {
|
|
8
|
-
l(this, a), this.prismChange = d(this, "prismChange", 7), this.uid = h(), this.defaultInvalidMessage = "Please enter the provided one time passcode", this.inputTag = "PRISM-INPUT-TEXT", this.digits = Array.from({ length: 6 }, (i, t) => t + 1), this._validate = (i) => {
|
|
9
|
-
this.invalid = !0;
|
|
10
|
-
}, this._inputBlur = (i) => {
|
|
11
|
-
this.digitValidity[i.detail.target.id] = i.detail.dirty && i.detail.valid ? !0 : i.detail.dirty && !i.detail.valid ? !1 : null, this.digitValues[i.detail.target.id] = this.digitValidity[i.detail.target.id] === !0 ? i.detail.value : null, Object.values(this.digitValidity).includes(!1) && (this.invalid = !0, this.invalidMessage = this.customValidity.allRequired.replace("##", this.digits.length.toString()), this.prismChange.emit({ name: "prism-otp-error", description: "missing digits" })), Object.values(this.digitValidity).includes(!1) || (this.invalid = !1), Object.values(this.digitValidity).every((t) => t === !0) && (this.invalid = !1, this.invalidMessage = this.defaultInvalidMessage, this.hiddenValue = Object.values(this.digitValues).toString().replaceAll(",", "").trim(), this.prismChange.emit({ name: "prism-otp-success", value: this.hiddenValue }));
|
|
12
|
-
}, this._input = (i) => {
|
|
13
|
-
if (i.detail.name === "input-keyup") {
|
|
14
|
-
const t = i.detail.target.id.split("-")[1] - 1, e = this.inputCollection[t + 1];
|
|
15
|
-
e && e.value === "" && isFinite(i.detail.key) && i.detail.valid && e.focus();
|
|
16
|
-
}
|
|
17
|
-
}, this.hintId = `${this.uid}-hint`, this.align = "center", this.invalid = !1, this.divider = !1, this.invalidMessage = this.defaultInvalidMessage, this.customValidity = { mismatch: "The code pasted does not match the correct length", allRequired: "All ## digits are required" }, this.variant = "contained", this.name = void 0, this.prismId = `prism-input-otp-${this.uid}`, this.digitValidity = {
|
|
18
|
-
"digit-1": null,
|
|
19
|
-
"digit-2": null,
|
|
20
|
-
"digit-3": null,
|
|
21
|
-
"digit-4": null,
|
|
22
|
-
"digit-5": null,
|
|
23
|
-
"digit-6": null
|
|
24
|
-
}, this.digitValues = {
|
|
25
|
-
"digit-1": null,
|
|
26
|
-
"digit-2": null,
|
|
27
|
-
"digit-3": null,
|
|
28
|
-
"digit-4": null,
|
|
29
|
-
"digit-5": null,
|
|
30
|
-
"digit-6": null
|
|
31
|
-
}, this.hiddenValue = "";
|
|
32
|
-
}
|
|
33
|
-
componentDidRender() {
|
|
34
|
-
this.inputCollection = u(this.el), this.inputCollection.pop();
|
|
35
|
-
}
|
|
36
|
-
// Listen for Clipboard Paste Event
|
|
37
|
-
pasteCode(a) {
|
|
38
|
-
var i;
|
|
39
|
-
a.preventDefault();
|
|
40
|
-
let t = a.clipboardData.getData("text").trim().split("");
|
|
41
|
-
this.inputCollection.length === t.length ? (this.invalid = !1, this.invalidMessage = this.defaultInvalidMessage, this.inputCollection.forEach((e, n) => {
|
|
42
|
-
let r = !isNaN(parseInt(t[n]));
|
|
43
|
-
this.digitValidity[`digit-${n + 1}`] = r, this.digitValues[`digit-${n + 1}`] = r ? t[n] : "", e.value = r ? t[n] : "", e.closest(this.inputTag).setAttribute("invalid", r ? "false" : "true");
|
|
44
|
-
}), this.hiddenValue = Object.values(this.digitValues).toString().replaceAll(",", "").trim(), this.inputCollection.at(-1).focus()) : (this.invalid = !0, this.invalidMessage = (i = this.customValidity) === null || i === void 0 ? void 0 : i.mismatch);
|
|
45
|
-
}
|
|
46
|
-
render() {
|
|
47
|
-
const a = this.name || `${this.prismId}-code`;
|
|
48
|
-
return s(o, { key: "2ccbdb73bafdb77a6394c8b5f1cc28e8e2fc9c07" }, s("fieldset", { key: "eb9bab7d4bf11328b7b5a384f2f8e347d08f89b7", class: { fieldset: !0, [`set-${this.align}`]: !0 } }, this.digits.map((i, t) => s(p, null, s("prism-input-text", { onPrismInvalid: (e) => this._validate(e), variant: this.variant, autocomplete: i === 1 ? "one-time-passcode" : "off", key: t, required: !0, ariaDescribedby: this.hintId, prismId: `digit-${i}`, type: "text", inputmode: "numeric", maxlength: 1, minlength: 1, format: "#", class: "input", hideLabel: !0, hideInvalid: !0, invalidMessage: `Digit ${i} is required`, textDisplay: "heading1", label: i === 1 ? `Digit ${i}; Enter verification code. When entering code in each input field, focus will automatically move to the next empty input field` : `Digit ${i}`, onPrismBlur: (e) => this._inputBlur(e), onPrismKeyup: (e) => this._input(e) }), i === 3 && this.divider && s("hr", { class: "spacer" }))), s("input", { key: "6c6952db2345b4a84460d5f996e81ca2ae1d1942", type: "hidden", name: a, value: this.hiddenValue })), s("span", { key: "ff3d3323ca48a2ae3e9244c9917b957e439bc1c8", "aria-live": "polite", id: this.hintId }, this.invalid && s("span", { key: "841912f90f0019acb9372b2c5cd87ca3c24cc7cf", class: {
|
|
49
|
-
"hint-container": !0,
|
|
50
|
-
[`set-${this.align}`]: !0
|
|
51
|
-
} }, s("prism-icon", { key: "5cf3462d2aca0b8171a1abb4afa0a51d883b5a27", theme: "fill", slot: "icon-trailing", size: "xs", tone: "negative", name: "alert" }), s("prism-text", { key: "9d351f080d714979a9b4a2d0c5a78f027d81d747", class: {
|
|
52
|
-
"invalid-text": this.invalid,
|
|
53
|
-
"hint-text": !0
|
|
54
|
-
}, display: "caption" }, this.invalidMessage))));
|
|
55
|
-
}
|
|
56
|
-
get el() {
|
|
57
|
-
return c(this);
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
|
-
v.style = g;
|
|
61
|
-
export {
|
|
62
|
-
v as prism_input_otp
|
|
63
|
-
};
|