@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 6.14 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{p as e,H as a,h as c,c as n}from"./p-c5a784ab.js";import{d as t}from"./p-7abe098c.js";import{d as o}from"./p-62fdbefd.js";const b=":root{--cbp-usa-banner-background-color:var(--cbp-color-gray-cool-90);--cbp-usa-banner-color:var(--cbp-color-text-lightest)}cbp-usa-banner{font-size:var(--cbp-font-size-subhead);background-color:var(--cbp-usa-banner-background-color);color:var(--cbp-usa-banner-color);display:inline-block;width:100%;padding-block:var(--cbp-space-2x);padding-inline:var(--cbp-responsive-spacing-outer);--cbp-usa-banner-icon-rotate:rotate(90deg)}cbp-usa-banner .cbp-banner__title{font-weight:var(--cbp-font-weight-medium)}cbp-usa-banner .cbp-usa-banner-content{display:none}cbp-usa-banner[open]{--cbp-usa-banner-icon-rotate:rotate(270deg)}cbp-usa-banner[open] .cbp-usa-banner-content{display:flex}cbp-usa-banner img{display:inline;margin-right:var(--cbp-space-3x)}cbp-usa-banner cbp-button.cbp-usa-banner-expand[fill=ghost][color=primary]:not(#fakeId){--cbp-button-gap:var(--cbp-space-1x);--cbp-button-height:1rem;--cbp-button-min-height:1rem;--cbp-button-padding:var(--cbp-space-1x);--cbp-button-color:var(--cbp-color-interactive-primary-light);--cbp-button-color-hover:var(--cbp-color-interactive-secondary-lighter);--cbp-button-color-focus:var(--cbp-color-interactive-focus-light);--cbp-button-color-active:var(--cbp-color-interactive-focus-light);--cbp-button-color-border-hover:transparent;--cbp-button-color-border-focus:transparent;--cbp-button-color-border-active:transparent;--cbp-button-border-radius:0;--cbp-button-color-outline-focus:var(--cbp-color-interactive-focus-light);--cbp-button-color-bg:transparent;--cbp-button-color-bg-hover:transparent;--cbp-button-color-bg-focus:transparent;--cbp-button-color-bg-active:transparent}cbp-usa-banner cbp-button.cbp-usa-banner-expand[fill=ghost][color=primary]:not(#fakeId)>button{letter-spacing:unset;text-transform:unset;text-decoration:underline;outline-offset:-1px}cbp-usa-banner cbp-button.cbp-usa-banner-expand[fill=ghost][color=primary]:not(#fakeId) cbp-icon svg{transition:transform 150ms;transform:var(--cbp-usa-banner-icon-rotate)}cbp-usa-banner .cbp-usa-banner-content{flex-direction:row;flex-wrap:wrap;padding-block-start:var(--cbp-space-5x);padding-block-end:var(--cbp-space-3x);gap:var(--cbp-space-8x);font-size:var(--cbp-font-size-body)}cbp-usa-banner .cbp-usa-banner-content>div{display:flex;flex-basis:20rem;flex-grow:1;gap:var(--cbp-space-3x)}cbp-usa-banner .cbp-usa-banner-content p{margin-bottom:0}cbp-usa-banner .cbp-usa-banner-content .cbp-banner-content-icon{border:var(--cbp-border-size-sm) solid var(--cbp-color-info-light);border-radius:var(--cbp-border-radius-circle);height:var(--cbp-space-13x);min-width:var(--cbp-space-13x)}";const r=b;const s=e(class e extends a{constructor(){super();this.__registerHost();this.open=false}handleClick(){this.open=!this.open}render(){return c(n,{key:"aaa5758cab00ce86aa2c8d9cfa8a02a3401e644b"},c("section",{key:"7ac737d8a7c90a4193c6a7d4a47c7ddac7010056","aria-label":"Official website of the United States government"},c("div",{key:"fc4537bc52aa0b9eea88127310af764e6606866d",class:"cbp-banner__title"},c("img",{key:"8226ea062f08e174966b2e2f3b840882339866d9",src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAG1BMVEUdM7EeNLIeM7HgQCDaPh/bPh/bPx/////bPyBEby41AAAAUElEQVQI123MNw4CABDEwD3jC/9/MQ1BQrgeOSkIqYe2o2FZtthXgQLgbHVMZdlsfUQFQnHtjP1+8BUhBDKOqtmfot6ojqPzR7TjdU+f6vkED+IDPhTBcMAAAAAASUVORK5CYII=",height:"11",width:"16","aria-hidden":"true",alt:""}),c("span",{key:"55f025882f887440d67f0580e31df018ab69247b"},c("span",{key:"42824e7449b470836868e0d107526ff17322af01"},"Official website of the United States government."),c("cbp-button",{key:"6318d21af4547a6f274c5debc3f4a0dcba6a2dd7",class:"cbp-usa-banner-expand",fill:"ghost","target-prop":"open",controls:"gov-banner",expanded:`${this.open}`,onClick:()=>this.handleClick()},"Here is how you know ",c("cbp-icon",{key:"40d36a0465f58919b48b1aaa2301ad37b95901bd",name:"chevron-right",size:"var(--cbp-space-3x)"})))),c("div",{key:"bf9655b32a0e3ccec59c290c0d0f6c4ab9a88231",class:"cbp-usa-banner-content",id:"gov-banner"},c("div",{key:"d7c647c6466c3baafb2865a93b62efe6c71d1f8f"},c("cbp-icon",{key:"eb223a6a3079146a177023b765e947e31d3872c4",class:"cbp-banner-content-icon",color:"var(--cbp-color-info-light)",name:"landmark",size:"1.25rem"}),c("div",{key:"62ad47d1421b758268031a4d9a76367fbcb3adb8"},c("strong",{key:"6402d7dd94e67d1b72e7a1a0139d9c1b68bc9185"},"Official websites use .gov"),c("p",{key:"5005ad33f8f5536b1558109901caf74fa980bf99"},"A ",c("strong",{key:"5c52df0e6590a932f530888f8b1d09f9f1abf7c4"},".gov")," website belongs to an official government organization in the United States."))),c("div",{key:"00e9d3747a26d6a38087f062d6979d5c249a700c"},c("cbp-icon",{key:"519a081fb439d61ec364578b0a7357b0135989c3",class:"cbp-banner-content-icon",color:"var(--cbp-color-info-light)",name:"lock",size:"1.25rem"}),c("div",{key:"17b2f04b9604a3295c23a1dd6710eaae911aa3f2"},c("strong",{key:"4dd0a987602c556d7526b555133701f56e28a43a"},"Secure .gov websites use HTTPS"),c("p",{key:"fe04f22053101a811d998f383850b8c6bf65e06e"},"A ",c("strong",{key:"74bf1ad2a356a74d98419ba79696cd2477c6ab9d"},"lock")," (",c("cbp-icon",{key:"6b74aa41ba548bf0059fa098edc86e65e1eed479",name:"lock",size:"var(--cbp-space-3x)",accessibilityText:"lock icon"}),") or ",c("strong",{key:"74835c193c832527a0673515328c1e5a778a19db"},"https://")," means you've safely connected to the .gov website. Share sensitive information only on official, secure websites."))))))}get host(){return this}static get style(){return r}},[0,"cbp-usa-banner",{open:[516]}]);function i(){if(typeof customElements==="undefined"){return}const e=["cbp-usa-banner","cbp-button","cbp-icon"];e.forEach((e=>{switch(e){case"cbp-usa-banner":if(!customElements.get(e)){customElements.define(e,s)}break;case"cbp-button":if(!customElements.get(e)){t()}break;case"cbp-icon":if(!customElements.get(e)){o()}break}}))}const p=s;const d=i;export{p as CbpUsaBanner,d as defineCustomElement};
//# sourceMappingURL=cbp-usa-banner.js.map