@uswds/web-components
Version:
> [!CAUTION] > Work on the next version of the Design System is happening in this repo. The code in this repository is not yet ready for production use.
536 lines (532 loc) • 36.6 kB
JavaScript
var ne = Object.defineProperty;
var ae = (o, e, t) => e in o ? ne(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
var N = (o, e, t) => ae(o, typeof e != "symbol" ? e + "" : e, t);
import { unsafeCSS as g, css as I, LitElement as oe, html as S } from "lit";
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const k = globalThis, M = k.trustedTypes, C = M ? M.createPolicy("lit-html", { createHTML: (o) => o }) : void 0, K = "$lit$", f = `lit$${Math.random().toFixed(9).slice(2)}$`, Q = "?" + f, re = `<${Q}>`, v = document, H = () => v.createComment(""), $ = (o) => o === null || typeof o != "object" && typeof o != "function", W = Array.isArray, ie = (o) => W(o) || typeof (o == null ? void 0 : o[Symbol.iterator]) == "function", B = `[
\f\r]`, A = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, O = /-->/g, j = />/g, _ = RegExp(`>|${B}(?:([^\\s"'>=/]+)(${B}*=${B}*(?:[^
\f\r"'\`<>=]|("|')|))|$)`, "g"), P = /'/g, V = /"/g, Z = /^(?:script|style|textarea|title)$/i, w = Symbol.for("lit-noChange"), d = Symbol.for("lit-nothing"), F = /* @__PURE__ */ new WeakMap(), p = v.createTreeWalker(v, 129);
function Y(o, e) {
if (!W(o) || !o.hasOwnProperty("raw")) throw Error("invalid template strings array");
return C !== void 0 ? C.createHTML(e) : e;
}
const se = (o, e) => {
const t = o.length - 1, n = [];
let a, r = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", i = A;
for (let u = 0; u < t; u++) {
const s = o[u];
let c, h, l = -1, b = 0;
for (; b < s.length && (i.lastIndex = b, h = i.exec(s), h !== null); ) b = i.lastIndex, i === A ? h[1] === "!--" ? i = O : h[1] !== void 0 ? i = j : h[2] !== void 0 ? (Z.test(h[2]) && (a = RegExp("</" + h[2], "g")), i = _) : h[3] !== void 0 && (i = _) : i === _ ? h[0] === ">" ? (i = a ?? A, l = -1) : h[1] === void 0 ? l = -2 : (l = i.lastIndex - h[2].length, c = h[1], i = h[3] === void 0 ? _ : h[3] === '"' ? V : P) : i === V || i === P ? i = _ : i === O || i === j ? i = A : (i = _, a = void 0);
const m = i === _ && o[u + 1].startsWith("/>") ? " " : "";
r += i === A ? s + re : l >= 0 ? (n.push(c), s.slice(0, l) + K + s.slice(l) + f + m) : s + f + (l === -2 ? u : m);
}
return [Y(o, r + (o[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), n];
};
class y {
constructor({ strings: e, _$litType$: t }, n) {
let a;
this.parts = [];
let r = 0, i = 0;
const u = e.length - 1, s = this.parts, [c, h] = se(e, t);
if (this.el = y.createElement(c, n), p.currentNode = this.el.content, t === 2 || t === 3) {
const l = this.el.content.firstChild;
l.replaceWith(...l.childNodes);
}
for (; (a = p.nextNode()) !== null && s.length < u; ) {
if (a.nodeType === 1) {
if (a.hasAttributes()) for (const l of a.getAttributeNames()) if (l.endsWith(K)) {
const b = h[i++], m = a.getAttribute(l).split(f), T = /([.?@])?(.*)/.exec(b);
s.push({ type: 1, index: r, name: T[2], strings: m, ctor: T[1] === "." ? de : T[1] === "?" ? ce : T[1] === "@" ? ue : E }), a.removeAttribute(l);
} else l.startsWith(f) && (s.push({ type: 6, index: r }), a.removeAttribute(l));
if (Z.test(a.tagName)) {
const l = a.textContent.split(f), b = l.length - 1;
if (b > 0) {
a.textContent = M ? M.emptyScript : "";
for (let m = 0; m < b; m++) a.append(l[m], H()), p.nextNode(), s.push({ type: 2, index: ++r });
a.append(l[b], H());
}
}
} else if (a.nodeType === 8) if (a.data === Q) s.push({ type: 2, index: r });
else {
let l = -1;
for (; (l = a.data.indexOf(f, l + 1)) !== -1; ) s.push({ type: 7, index: r }), l += f.length - 1;
}
r++;
}
}
static createElement(e, t) {
const n = v.createElement("template");
return n.innerHTML = e, n;
}
}
function x(o, e, t = o, n) {
var i, u;
if (e === w) return e;
let a = n !== void 0 ? (i = t.o) == null ? void 0 : i[n] : t.l;
const r = $(e) ? void 0 : e._$litDirective$;
return (a == null ? void 0 : a.constructor) !== r && ((u = a == null ? void 0 : a._$AO) == null || u.call(a, !1), r === void 0 ? a = void 0 : (a = new r(o), a._$AT(o, t, n)), n !== void 0 ? (t.o ?? (t.o = []))[n] = a : t.l = a), a !== void 0 && (e = x(o, a._$AS(o, e.values), a, n)), e;
}
class le {
constructor(e, t) {
this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = t;
}
get parentNode() {
return this._$AM.parentNode;
}
get _$AU() {
return this._$AM._$AU;
}
u(e) {
const { el: { content: t }, parts: n } = this._$AD, a = ((e == null ? void 0 : e.creationScope) ?? v).importNode(t, !0);
p.currentNode = a;
let r = p.nextNode(), i = 0, u = 0, s = n[0];
for (; s !== void 0; ) {
if (i === s.index) {
let c;
s.type === 2 ? c = new z(r, r.nextSibling, this, e) : s.type === 1 ? c = new s.ctor(r, s.name, s.strings, this, e) : s.type === 6 && (c = new he(r, this, e)), this._$AV.push(c), s = n[++u];
}
i !== (s == null ? void 0 : s.index) && (r = p.nextNode(), i++);
}
return p.currentNode = v, a;
}
p(e) {
let t = 0;
for (const n of this._$AV) n !== void 0 && (n.strings !== void 0 ? (n._$AI(e, n, t), t += n.strings.length - 2) : n._$AI(e[t])), t++;
}
}
class z {
get _$AU() {
var e;
return ((e = this._$AM) == null ? void 0 : e._$AU) ?? this.v;
}
constructor(e, t, n, a) {
this.type = 2, this._$AH = d, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = n, this.options = a, this.v = (a == null ? void 0 : a.isConnected) ?? !0;
}
get parentNode() {
let e = this._$AA.parentNode;
const t = this._$AM;
return t !== void 0 && (e == null ? void 0 : e.nodeType) === 11 && (e = t.parentNode), e;
}
get startNode() {
return this._$AA;
}
get endNode() {
return this._$AB;
}
_$AI(e, t = this) {
e = x(this, e, t), $(e) ? e === d || e == null || e === "" ? (this._$AH !== d && this._$AR(), this._$AH = d) : e !== this._$AH && e !== w && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : ie(e) ? this.k(e) : this._(e);
}
O(e) {
return this._$AA.parentNode.insertBefore(e, this._$AB);
}
T(e) {
this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
}
_(e) {
this._$AH !== d && $(this._$AH) ? this._$AA.nextSibling.data = e : this.T(v.createTextNode(e)), this._$AH = e;
}
$(e) {
var r;
const { values: t, _$litType$: n } = e, a = typeof n == "number" ? this._$AC(e) : (n.el === void 0 && (n.el = y.createElement(Y(n.h, n.h[0]), this.options)), n);
if (((r = this._$AH) == null ? void 0 : r._$AD) === a) this._$AH.p(t);
else {
const i = new le(a, this), u = i.u(this.options);
i.p(t), this.T(u), this._$AH = i;
}
}
_$AC(e) {
let t = F.get(e.strings);
return t === void 0 && F.set(e.strings, t = new y(e)), t;
}
k(e) {
W(this._$AH) || (this._$AH = [], this._$AR());
const t = this._$AH;
let n, a = 0;
for (const r of e) a === t.length ? t.push(n = new z(this.O(H()), this.O(H()), this, this.options)) : n = t[a], n._$AI(r), a++;
a < t.length && (this._$AR(n && n._$AB.nextSibling, a), t.length = a);
}
_$AR(e = this._$AA.nextSibling, t) {
var n;
for ((n = this._$AP) == null ? void 0 : n.call(this, !1, !0, t); e && e !== this._$AB; ) {
const a = e.nextSibling;
e.remove(), e = a;
}
}
setConnected(e) {
var t;
this._$AM === void 0 && (this.v = e, (t = this._$AP) == null || t.call(this, e));
}
}
class E {
get tagName() {
return this.element.tagName;
}
get _$AU() {
return this._$AM._$AU;
}
constructor(e, t, n, a, r) {
this.type = 1, this._$AH = d, this._$AN = void 0, this.element = e, this.name = t, this._$AM = a, this.options = r, n.length > 2 || n[0] !== "" || n[1] !== "" ? (this._$AH = Array(n.length - 1).fill(new String()), this.strings = n) : this._$AH = d;
}
_$AI(e, t = this, n, a) {
const r = this.strings;
let i = !1;
if (r === void 0) e = x(this, e, t, 0), i = !$(e) || e !== this._$AH && e !== w, i && (this._$AH = e);
else {
const u = e;
let s, c;
for (e = r[0], s = 0; s < r.length - 1; s++) c = x(this, u[n + s], t, s), c === w && (c = this._$AH[s]), i || (i = !$(c) || c !== this._$AH[s]), c === d ? e = d : e !== d && (e += (c ?? "") + r[s + 1]), this._$AH[s] = c;
}
i && !a && this.j(e);
}
j(e) {
e === d ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
}
}
class de extends E {
constructor() {
super(...arguments), this.type = 3;
}
j(e) {
this.element[this.name] = e === d ? void 0 : e;
}
}
class ce extends E {
constructor() {
super(...arguments), this.type = 4;
}
j(e) {
this.element.toggleAttribute(this.name, !!e && e !== d);
}
}
class ue extends E {
constructor(e, t, n, a, r) {
super(e, t, n, a, r), this.type = 5;
}
_$AI(e, t = this) {
if ((e = x(this, e, t, 0) ?? d) === w) return;
const n = this._$AH, a = e === d && n !== d || e.capture !== n.capture || e.once !== n.once || e.passive !== n.passive, r = e !== d && (n === d || a);
a && this.element.removeEventListener(this.name, this, n), r && this.element.addEventListener(this.name, this, e), this._$AH = e;
}
handleEvent(e) {
var t;
typeof this._$AH == "function" ? this._$AH.call(((t = this.options) == null ? void 0 : t.host) ?? this.element, e) : this._$AH.handleEvent(e);
}
}
class he {
constructor(e, t, n) {
this.element = e, this.type = 6, this._$AN = void 0, this._$AM = t, this.options = n;
}
get _$AU() {
return this._$AM._$AU;
}
_$AI(e) {
x(this, e);
}
}
const L = k.litHtmlPolyfillSupport;
L == null || L(y, z), (k.litHtmlVersions ?? (k.litHtmlVersions = [])).push("3.2.0");
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const X = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 }, ee = (o) => (...e) => ({ _$litDirective$: o, values: e });
class te {
constructor(e) {
}
get _$AU() {
return this._$AM._$AU;
}
_$AT(e, t, n) {
this.t = e, this._$AM = t, this.i = n;
}
_$AS(e, t) {
return this.update(e, t);
}
update(e, t) {
return this.render(...t);
}
}
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
class U extends te {
constructor(e) {
if (super(e), this.it = d, e.type !== X.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
}
render(e) {
if (e === d || e == null) return this._t = void 0, this.it = e;
if (e === w) return e;
if (typeof e != "string") throw Error(this.constructor.directiveName + "() called with a non-string value");
if (e === this.it) return this._t;
this.it = e;
const t = [e];
return t.raw = t, this._t = { _$litType$: this.constructor.resultType, strings: t, values: [] };
}
}
U.directiveName = "unsafeHTML", U.resultType = 1;
const D = ee(U);
/**
* @license
* Copyright 2018 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const be = ee(class extends te {
constructor(o) {
var e;
if (super(o), o.type !== X.ATTRIBUTE || o.name !== "class" || ((e = o.strings) == null ? void 0 : e.length) > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
}
render(o) {
return " " + Object.keys(o).filter((e) => o[e]).join(" ") + " ";
}
update(o, [e]) {
var n, a;
if (this.st === void 0) {
this.st = /* @__PURE__ */ new Set(), o.strings !== void 0 && (this.nt = new Set(o.strings.join(" ").split(/\s/).filter((r) => r !== "")));
for (const r in e) e[r] && !((n = this.nt) != null && n.has(r)) && this.st.add(r);
return this.render(e);
}
const t = o.element.classList;
for (const r of this.st) r in e || (t.remove(r), this.st.delete(r));
for (const r in e) {
const i = !!e[r];
i === this.st.has(r) || (a = this.nt) != null && a.has(r) || (i ? (t.add(r), this.st.add(r)) : (t.remove(r), this.st.delete(r)));
}
return w;
}
}), me = '@font-face{font-family:Roboto Mono Web;font-style:normal;font-weight:300;font-display:fallback;src:url(../fonts/roboto-mono/roboto-mono-v5-latin-300.woff2) format("woff2")}@font-face{font-family:Roboto Mono Web;font-style:normal;font-weight:400;font-display:fallback;src:url(../fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2) format("woff2")}@font-face{font-family:Roboto Mono Web;font-style:normal;font-weight:700;font-display:fallback;src:url(../fonts/roboto-mono/roboto-mono-v5-latin-700.woff2) format("woff2")}@font-face{font-family:Roboto Mono Web;font-style:italic;font-weight:300;font-display:fallback;src:url(../fonts/roboto-mono/roboto-mono-v5-latin-300italic.woff2) format("woff2")}@font-face{font-family:Roboto Mono Web;font-style:italic;font-weight:400;font-display:fallback;src:url(../fonts/roboto-mono/roboto-mono-v5-latin-italic.woff2) format("woff2")}@font-face{font-family:Roboto Mono Web;font-style:italic;font-weight:700;font-display:fallback;src:url(../fonts/roboto-mono/roboto-mono-v5-latin-700italic.woff2) format("woff2")}@font-face{font-family:Source Sans Pro Web;font-style:normal;font-weight:300;font-display:fallback;src:url(../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format("woff2")}@font-face{font-family:Source Sans Pro Web;font-style:normal;font-weight:400;font-display:fallback;src:url(../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format("woff2")}@font-face{font-family:Source Sans Pro Web;font-style:normal;font-weight:700;font-display:fallback;src:url(../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format("woff2")}@font-face{font-family:Source Sans Pro Web;font-style:italic;font-weight:300;font-display:fallback;src:url(../fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format("woff2")}@font-face{font-family:Source Sans Pro Web;font-style:italic;font-weight:400;font-display:fallback;src:url(../fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format("woff2")}@font-face{font-family:Source Sans Pro Web;font-style:italic;font-weight:700;font-display:fallback;src:url(../fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format("woff2")}@font-face{font-family:Merriweather Web;font-style:normal;font-weight:300;font-display:fallback;src:url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format("woff2")}@font-face{font-family:Merriweather Web;font-style:normal;font-weight:400;font-display:fallback;src:url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format("woff2")}@font-face{font-family:Merriweather Web;font-style:normal;font-weight:700;font-display:fallback;src:url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format("woff2")}@font-face{font-family:Merriweather Web;font-style:italic;font-weight:300;font-display:fallback;src:url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format("woff2")}@font-face{font-family:Merriweather Web;font-style:italic;font-weight:400;font-display:fallback;src:url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format("woff2")}@font-face{font-family:Merriweather Web;font-style:italic;font-weight:700;font-display:fallback;src:url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format("woff2")}.usa-media-block{align-items:flex-start;display:flex}.usa-media-block__img{flex-shrink:0;margin-right:.5rem}.usa-media-block__body{flex:1 1 0%}.usa-banner{font-family:Source Sans Pro Web,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;font-size:1.06rem;line-height:1.5;background-color:#f0f0f0}@media all and (min-width: 40em){.usa-banner{font-size:.87rem;padding-bottom:0rem}}.usa-banner .usa-accordion{font-family:Source Sans Pro Web,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;font-size:1.06rem;line-height:1.5}.usa-banner .grid-row{display:flex;flex-wrap:wrap}.usa-banner .grid-row.grid-gap-lg{margin-left:-.75rem;margin-right:-.75rem}.usa-banner .grid-row.grid-gap-lg>*{padding-left:.75rem;padding-right:.75rem}@media all and (min-width: 40em){.usa-banner .grid-row .tablet\\:grid-col-6{flex:0 1 auto;width:50%}}.usa-banner__header,.usa-banner__content{color:#1b1b1b}.usa-banner__content{margin-left:auto;margin-right:auto;max-width:64rem;padding-right:1rem;padding-left:1rem;background-color:transparent;font-size:1rem;overflow:hidden;padding:.25rem 1rem 1rem .5rem;width:100%}@media all and (min-width: 64em){.usa-banner__content{padding-left:2rem;padding-right:2rem}}@media all and (min-width: 40em){.usa-banner__content{padding-bottom:1.5rem;padding-top:1.5rem}}.usa-banner__content p:first-child{margin:0}.usa-banner__guidance{display:flex;align-items:flex-start;max-width:64ex;padding-top:1rem}@media all and (min-width: 40em){.usa-banner__guidance{padding-top:0rem}}.usa-banner__lock-image{height:1.5ex;width:1.21875ex}.usa-banner__lock-image path{fill:currentColor}@media (forced-colors: active){.usa-banner__lock-image path{fill:CanvasText}}.usa-banner__inner{margin-left:auto;margin-right:auto;max-width:64rem;padding-left:1rem;padding-right:1rem;display:flex;flex-wrap:wrap;align-items:flex-start;padding-right:0rem}@media all and (min-width: 64em){.usa-banner__inner{padding-left:2rem;padding-right:2rem}}@media all and (min-width: 40em){.usa-banner__inner{align-items:center}}.usa-banner__header{padding-bottom:.5rem;padding-top:.5rem;font-size:.8rem;font-weight:400;min-height:3rem;position:relative}@media all and (min-width: 40em){.usa-banner__header{padding-bottom:.25rem;padding-top:.25rem;min-height:0}}.usa-banner__header-text{margin-bottom:0;margin-top:0;font-size:.8rem;line-height:1.1}.usa-banner__header-action{color:#005ea2;line-height:1.1;margin-bottom:0rem;margin-top:2px;text-decoration:underline}.usa-banner__header-action:after{background-image:url(../img/usa-icons/expand_more.svg);background-repeat:no-repeat;background-position:center center;background-size:1rem 1rem;display:inline-block;height:1rem;width:1rem;content:"";vertical-align:middle;margin-left:auto}@supports (mask: url()){.usa-banner__header-action:after{background:none;background-color:#005ea2;-webkit-mask-image:url(../img/usa-icons/expand_more.svg),linear-gradient(transparent,transparent);mask-image:url(../img/usa-icons/expand_more.svg),linear-gradient(transparent,transparent);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:1rem 1rem;mask-size:1rem 1rem}.usa-banner__header-action:after:hover{background-color:#1a4480}}.usa-banner__header-action:hover:after{content:"";background-color:#1a4480}.usa-banner__header-action:visited{color:#54278f}.usa-banner__header-action:hover,.usa-banner__header-action:active{color:#1a4480}@media all and (min-width: 40em){.usa-banner__header-action{display:none}}@media (forced-colors: active){.usa-banner__header-action{color:LinkText}.usa-banner__header-action:after{background-color:ButtonText}}.usa-banner__header-flag{float:left;margin-right:.5rem;width:1rem}@media all and (min-width: 40em){.usa-banner__header-flag{margin-right:.5rem;padding-top:0rem}}.usa-banner__header--expanded{padding-right:3.5rem}@media all and (min-width: 40em){.usa-banner__header--expanded{background-color:transparent;display:block;font-size:.8rem;font-weight:400;min-height:0rem;padding-right:0rem}}.usa-banner__header--expanded .usa-banner__inner{margin-left:0rem}@media all and (min-width: 40em){.usa-banner__header--expanded .usa-banner__inner{margin-left:auto}}.usa-banner__header--expanded .usa-banner__header-action{display:none}.usa-banner__button{background-color:transparent;border:0;border-radius:0;box-shadow:none;font-weight:400;justify-content:normal;text-align:left;margin:0;padding:0;left:0;position:absolute;bottom:0;top:0;text-decoration:underline;color:#005ea2;display:block;font-size:.8rem;height:auto;line-height:1.1;padding-top:0rem;padding-left:0rem;text-decoration:none;width:auto}.usa-banner__button:hover{color:#1a4480}.usa-banner__button:active{color:#162e51}.usa-banner__button:focus{outline:.25rem solid #2491ff;outline-offset:0rem}.usa-banner__button:hover,.usa-banner__button.usa-button--hover,.usa-banner__button:disabled:hover,.usa-banner__button[aria-disabled=true]:hover,.usa-banner__button:disabled.usa-button--hover,.usa-banner__button[aria-disabled=true].usa-button--hover,.usa-banner__button:active,.usa-banner__button.usa-button--active,.usa-banner__button:disabled:active,.usa-banner__button[aria-disabled=true]:active,.usa-banner__button:disabled.usa-button--active,.usa-banner__button[aria-disabled=true].usa-button--active,.usa-banner__button:disabled:focus,.usa-banner__button[aria-disabled=true]:focus,.usa-banner__button:disabled.usa-focus,.usa-banner__button[aria-disabled=true].usa-focus,.usa-banner__button:disabled,.usa-banner__button[aria-disabled=true],.usa-banner__button.usa-button--disabled{background-color:transparent;box-shadow:none;text-decoration:underline}.usa-banner__button.usa-button--hover{color:#1a4480}.usa-banner__button.usa-button--active{color:#162e51}.usa-banner__button:disabled,.usa-banner__button[aria-disabled=true],.usa-banner__button:disabled:hover,.usa-banner__button[aria-disabled=true]:hover,.usa-banner__button[aria-disabled=true]:focus{color:#757575}@media (forced-colors: active){.usa-banner__button:disabled,.usa-banner__button[aria-disabled=true],.usa-banner__button:disabled:hover,.usa-banner__button[aria-disabled=true]:hover,.usa-banner__button[aria-disabled=true]:focus{color:GrayText}}.usa-banner__button:visited{color:#54278f}.usa-banner__button:hover,.usa-banner__button:active{color:#1a4480}@media all and (max-width: 39.99em){.usa-banner__button{width:100%}.usa-banner__button:enabled:focus{outline-offset:-.25rem}}@media all and (min-width: 40em){.usa-banner__button{color:#005ea2;position:static;bottom:auto;left:auto;right:auto;top:auto;display:inline;margin-left:.5rem;position:relative}.usa-banner__button:after{background-image:url(../img/usa-icons/expand_more.svg);background-repeat:no-repeat;background-position:center center;background-size:1rem 1rem;display:inline-block;height:1rem;width:1rem;content:"";vertical-align:middle;margin-left:2px}@supports (mask: url()){.usa-banner__button:after{background:none;background-color:#005ea2;-webkit-mask-image:url(../img/usa-icons/expand_more.svg),linear-gradient(transparent,transparent);mask-image:url(../img/usa-icons/expand_more.svg),linear-gradient(transparent,transparent);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:1rem 1rem;mask-size:1rem 1rem}.usa-banner__button:after:hover{background-color:#1a4480}}.usa-banner__button:hover:after{content:"";background-color:#1a4480}.usa-banner__button:visited{color:#54278f}.usa-banner__button:hover,.usa-banner__button:active{color:#1a4480}.usa-banner__button:after,.usa-banner__button:hover:after{position:absolute}}@media (min-width: 40em) and (forced-colors: active){.usa-banner__button:after,.usa-banner__button:hover:after{background-color:ButtonText}}@media all and (min-width: 40em){.usa-banner__button:hover{text-decoration:none}}.usa-banner__button[aria-expanded=false],.usa-banner__button[aria-expanded=false]:hover,.usa-banner__button[aria-expanded=true],.usa-banner__button[aria-expanded=true]:hover{background-image:none}@media (forced-colors: active){.usa-banner__button[aria-expanded=false]:before,.usa-banner__button[aria-expanded=false]:hover:before,.usa-banner__button[aria-expanded=true]:before,.usa-banner__button[aria-expanded=true]:hover:before{content:none}}@media all and (max-width: 39.99em){.usa-banner__button[aria-expanded=true]:after{background-image:url(../img/usa-icons/close.svg);background-repeat:no-repeat;background-position:center center;background-size:1.5rem 1.5rem;display:inline-block;height:3rem;width:3rem;content:"";vertical-align:middle;margin-left:0rem}@supports (mask: url()){.usa-banner__button[aria-expanded=true]:after{background:none;background-color:#005ea2;-webkit-mask-image:url(../img/usa-icons/close.svg),linear-gradient(transparent,transparent);mask-image:url(../img/usa-icons/close.svg),linear-gradient(transparent,transparent);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:1.5rem 1.5rem;mask-size:1.5rem 1.5rem}}.usa-banner__button[aria-expanded=true]:before{bottom:0;top:0;position:absolute;right:0;background-color:#dfe1e2;content:"";display:block;height:3rem;width:3rem}.usa-banner__button[aria-expanded=true]:after{bottom:0;top:0;position:absolute;right:0}}@media all and (min-width: 40em){.usa-banner__button[aria-expanded=true]{height:auto;padding:0rem;position:relative}.usa-banner__button[aria-expanded=true]:after{background-image:url(../img/usa-icons/expand_less.svg);background-repeat:no-repeat;background-position:center center;background-size:1rem 1rem;display:inline-block;height:1rem;width:1rem;content:"";vertical-align:middle;margin-left:2px}@supports (mask: url()){.usa-banner__button[aria-expanded=true]:after{background:none;background-color:#005ea2;-webkit-mask-image:url(../img/usa-icons/expand_less.svg),linear-gradient(transparent,transparent);mask-image:url(../img/usa-icons/expand_less.svg),linear-gradient(transparent,transparent);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:1rem 1rem;mask-size:1rem 1rem}.usa-banner__button[aria-expanded=true]:after:hover{background-color:#1a4480}}.usa-banner__button[aria-expanded=true]:hover:after{content:"";background-color:#1a4480}.usa-banner__button[aria-expanded=true]:after,.usa-banner__button[aria-expanded=true]:hover:after{position:absolute}}@media (min-width: 40em) and (forced-colors: active){.usa-banner__button[aria-expanded=true]:after,.usa-banner__button[aria-expanded=true]:hover:after{background-color:ButtonText}}.usa-banner__button-text{position:absolute;left:-999em;right:auto;text-decoration:underline}@media all and (min-width: 40em){.usa-banner__button-text{position:static;display:inline}}@media (forced-colors: active){.usa-banner__button-text{color:LinkText}}.usa-banner__icon{width:2.5rem}.usa-js-loading .usa-banner__content{position:absolute;left:-999em;right:auto}', q = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z'/%3e%3c/svg%3e", G = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M16.59%208.59%2012%2013.17%207.41%208.59%206%2010l6%206%206-6z'/%3e%3c/svg%3e", J = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='m12%208-6%206%201.41%201.41L12%2010.83l4.59%204.58L18%2014z'/%3e%3c/svg%3e", fe = [
g(me),
I`
* {
box-sizing: border-box;
}
.usa-banner__inner {
flex-wrap: nowrap;
}
.usa-accordion__button {
cursor: pointer;
}
`,
//* In USWDS close icon is set via max-width media query, flipped it here.
I`
.usa-banner__button::after,
.usa-banner__header-action::after {
background-image: url(${g(G)});
mask-image: url(${g(G)});
}
.usa-banner__button[aria-expanded="true"]::after {
background-image: url(${g(q)});
mask-image: url(${g(q)});
}
@media all and (min-width: 40em) {
.usa-banner__button[aria-expanded="true"]::after {
background-image: url(${g(J)});
mask-image: url(${g(J)});
}
}
`
], ge = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAsBAMAAAAncaPMAAAAAXNSR0IArs4c6QAAABtQTFRF////4EAg2z8g2z8f2z4f2j4fHjSyHjOxHTOxQEYPwgAAAIdJREFUeNrNkUENxDAMBEOhFJaCKZiCKZhCKBj2ebV3rdR71+pIq+Qxj1GyqjJ3U8VlHkc07hFm0awBYe91juq6MSI0yhSAEgkzJ4TMKiXyzFw3pgR9lmIBJlqj2AmBedf+IycExmlKZVzvZEJ4A0oBrjBl/m6PCy95B3fFAN6YuQPxhbcB4QMkEj04wQXD5wAAAABJRU5ErkJggg==", _e = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20viewBox='0%200%2064%2064'%3e%3ctitle%3eicon-dot-gov%3c/title%3e%3cpath%20fill='%232378C3'%20fill-rule='evenodd'%20d='m32%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032-32-14.3-32-32%2014.3-32%2032-32zm0%201.2c-17%200-30.8%2013.8-30.8%2030.8s13.8%2030.8%2030.8%2030.8%2030.8-13.8%2030.8-30.8-13.8-30.8-30.8-30.8zm11.4%2038.9c.5%200%20.9.4.9.8v1.6h-24.6v-1.6c0-.5.4-.8.9-.8zm-17.1-12.3v9.8h1.6v-9.8h3.3v9.8h1.6v-9.8h3.3v9.8h1.6v-9.8h3.3v9.8h.8c.5%200%20.9.4.9.8v.8h-21.4v-.8c0-.5.4-.8.9-.8h.8v-9.8zm5.7-8.2%2012.3%204.9v1.6h-1.6c0%20.5-.4.8-.9.8h-19.6c-.5%200-.9-.4-.9-.8h-1.6v-1.6s12.3-4.9%2012.3-4.9z'/%3e%3c/svg%3e", pe = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20viewBox='0%200%2064%2064'%3e%3ctitle%3eicon-https%3c/title%3e%3cpath%20fill='%23719F2A'%20fill-rule='evenodd'%20d='M32%200c17.673%200%2032%2014.327%2032%2032%200%2017.673-14.327%2032-32%2032C14.327%2064%200%2049.673%200%2032%200%2014.327%2014.327%200%2032%200zm0%201.208C14.994%201.208%201.208%2014.994%201.208%2032S14.994%2062.792%2032%2062.792%2062.792%2049.006%2062.792%2032%2049.006%201.208%2032%201.208zm0%2018.886a7.245%207.245%200%200%201%207.245%207.245v3.103h.52c.86%200%201.557.698%201.557%201.558v9.322c0%20.86-.697%201.558-1.557%201.558h-15.53c-.86%200-1.557-.697-1.557-1.558V32c0-.86.697-1.558%201.557-1.558h.52V27.34A7.245%207.245%200%200%201%2032%2020.094zm0%203.103a4.142%204.142%200%200%200-4.142%204.142v3.103h8.284V27.34A4.142%204.142%200%200%200%2032%2023.197z'/%3e%3c/svg%3e";
class R extends oe {
toggle() {
this.isOpen = !this.isOpen, this.shadowRoot.querySelector(".usa-banner__content").toggleAttribute("hidden");
}
constructor() {
super(), this.lang = "en", this.isOpen = !1, this.tld = "gov", this.data = {
en: {
banner: {
label: "Official website of the United States government",
text: "An official website of the United States government",
action: "Here's how you know"
},
domain: {
heading: "Official websites use",
text1: "A",
text2: "website belongs to an official government organization in the United States."
},
https: {
heading1: "Secure",
heading2: "websites use HTTPS",
text1: "A <strong>lock</strong>",
text2: "or <strong>https://</strong> means you’ve safely connected to the",
text3: "website. Share sensitive information only on official, secure websites."
}
},
es: {
banner: {
label: "Un sitio oficial del Gobierno de Estados Unidos",
text: "Un sitio oficial del Gobierno de Estados Unidos",
action: "Así es como usted puede verificarlo"
},
domain: {
heading: "Los sitios web oficiales usan",
text1: "Un sitio web",
text2: "pertenece a una organización oficial del Gobierno de Estados Unidos."
},
https: {
heading1: "Los sitios web seguros",
heading2: "usan HTTPS",
text1: "Un <strong>candado</strong>",
text2: "o <strong>https://</strong> significa que usted se conectó de forma segura a un sitio web",
text3: "Comparta información sensible sólo en sitios web oficiales y seguros."
}
}
};
}
// Get English or Spanish strings. Default to English if an unknown `lang` is passed.
// Ex: <usa-banner lang="zy"></usa-banner>
get _bannerText() {
return this.data[this.lang] || this.data.en;
}
// Get the action text and use for both mobile & desktop buttons.
get _actionText() {
const e = this.querySelector('[slot="banner-action"]');
return e == null ? void 0 : e.textContent;
}
// TODO: Use inline image instead or translate strings.
svgLock() {
return S`
<span class="icon-lock">
<svg
xmlns="http://www.w3.org/2000/svg"
width="52"
height="64"
viewBox="0 0 52 64"
class="usa-banner__lock-image"
role="img"
aria-labelledby="banner-lock-description-default"
focusable="false"
>
<title id="banner-lock-title-default">Lock</title>
<desc id="banner-lock-description-default">Locked padlock icon</desc>
<path
fill="#000000"
fill-rule="evenodd"
d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
/>
</svg>
</span>
`;
}
domainTemplate(e) {
const { domain: t } = this._bannerText;
return S`
<img
class="usa-banner__icon usa-media-block__img"
src="${_e}"
role="img"
alt=""
aria-hidden="true"
/>
<div class="usa-media-block__body">
<p>
<strong>
<slot name="domain-heading"> ${t.heading} .${e} </slot>
</strong>
<br />
<slot name="domain-text">
${t.text1} <strong>.${e}</strong> ${t.text2}
</slot>
</p>
</div>
`;
}
httpsTemplate(e) {
const { https: t } = this._bannerText;
return S`
<img
class="usa-banner__icon usa-media-block__img"
src="${pe}"
role="img"
alt=""
aria-hidden="true"
/>
<div class="usa-media-block__body">
<p>
<strong>
<slot name="https-heading">
${t.heading1} .${e} ${t.heading2}
</slot> </strong
><br />
<slot name="https-text">
${D(t.text1)} (${this.svgLock()})
${D(t.text2)} .${e} ${t.text3}
</slot>
</p>
</div>
`;
}
render() {
const e = { "usa-banner__header--expanded": this.isOpen }, t = this.tld === "mil" ? "mil" : "gov", { banner: n } = this._bannerText;
return S`
<section class="usa-banner" aria-label=${this.label || n.label}>
<div class="usa-accordion">
<header class="usa-banner__header ${be(e)}">
<div class="usa-banner__inner">
<div class="grid-col-auto">
<img
aria-hidden="true"
class="usa-banner__header-flag"
src=${ge}
alt=""
/>
</div>
<div
class="grid-col-fill tablet:grid-col-auto"
aria-hidden="true"
>
<p class="usa-banner__header-text">
<slot name="banner-text">${n.text}</slot>
</p>
<p class="usa-banner__header-action">
<slot name="banner-action">${n.action}</slot>
</p>
</div>
<button
type="button"
class="usa-accordion__button usa-banner__button"
aria-expanded="${this.isOpen}"
aria-controls="gov-banner-default"
@click="${this.toggle}"
>
<span class="usa-banner__button-text">
${this._actionText || n.action}
</span>
</button>
</div>
</header>
<div class="usa-banner__content usa-accordion__content" hidden>
<div class="grid-row grid-gap-lg">
<div class="usa-banner__guidance tablet:grid-col-6">
${this.domainTemplate(t)}
</div>
<div class="usa-banner__guidance tablet:grid-col-6">
${this.httpsTemplate(t)}
</div>
</div>
</div>
</div>
</section>
`;
}
}
N(R, "properties", {
lang: { type: String },
data: { attribute: !1 },
isOpen: { type: Boolean },
classes: {},
label: { type: String },
tld: {
type: String,
reflect: !0
}
}), N(R, "styles", [fe]);
customElements.define("usa-banner", R);
export {
R as UsaBanner
};