@codeforamerica/marcomms-design-system 1.15.2 → 1.16.0
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/index.js +129 -20
- package/package.json +1 -1
- package/src/components/card.js +125 -0
- package/src/components/card.stories.js +4 -0
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*! For license information please see index.js.LICENSE.txt */
|
|
2
|
-
(()=>{"use strict";const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),o=new WeakMap;class a{constructor(t,e,o){if(this._$cssResult$=!0,o!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const i=this.t;if(e&&void 0===t){const e=void 0!==i&&1===i.length;e&&(t=o.get(i)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o.set(i,t))}return t}toString(){return this.cssText}}const s=(t,...e)=>{const o=1===t.length?t[0]:e.reduce((e,i,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+t[o+1],t[0]);return new a(o,t,i)},r=(i,o)=>{if(e)i.adoptedStyleSheets=o.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const e of o){const o=document.createElement("style"),a=t.litNonce;void 0!==a&&o.setAttribute("nonce",a),o.textContent=e.cssText,i.appendChild(o)}},n=e?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new a("string"==typeof t?t:t+"",void 0,i))(e)})(t):t,{is:l,defineProperty:c,getOwnPropertyDescriptor:h,getOwnPropertyNames:d,getOwnPropertySymbols:p,getPrototypeOf:u}=Object,g=globalThis,v=g.trustedTypes,m=v?v.emptyScript:"",f=g.reactiveElementPolyfillSupport,b=(t,e)=>t,w={toAttribute(t,e){switch(e){case Boolean:t=t?m:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},y=(t,e)=>!l(t,e),x={attribute:!0,type:String,converter:w,reflect:!1,useDefault:!1,hasChanged:y};Symbol.metadata??=Symbol("metadata"),g.litPropertyMetadata??=new WeakMap;class $ extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=x){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const i=Symbol(),o=this.getPropertyDescriptor(t,i,e);void 0!==o&&c(this.prototype,t,o)}}static getPropertyDescriptor(t,e,i){const{get:o,set:a}=h(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:o,set(e){const s=o?.call(this);a?.call(this,e),this.requestUpdate(t,s,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??x}static _$Ei(){if(this.hasOwnProperty(b("elementProperties")))return;const t=u(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(b("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(b("properties"))){const t=this.properties,e=[...d(t),...p(t)];for(const i of e)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,i]of e)this.elementProperties.set(t,i)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const i=this._$Eu(t,e);void 0!==i&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(n(t))}else void 0!==t&&e.push(n(t));return e}static _$Eu(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this))}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const i of e.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return r(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$ET(t,e){const i=this.constructor.elementProperties.get(t),o=this.constructor._$Eu(t,i);if(void 0!==o&&!0===i.reflect){const a=(void 0!==i.converter?.toAttribute?i.converter:w).toAttribute(e,i.type);this._$Em=t,null==a?this.removeAttribute(o):this.setAttribute(o,a),this._$Em=null}}_$AK(t,e){const i=this.constructor,o=i._$Eh.get(t);if(void 0!==o&&this._$Em!==o){const t=i.getPropertyOptions(o),a="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:w;this._$Em=o;const s=a.fromAttribute(e,t.type);this[o]=s??this._$Ej?.get(o)??s,this._$Em=null}}requestUpdate(t,e,i,o=!1,a){if(void 0!==t){const s=this.constructor;if(!1===o&&(a=this[t]),i??=s.getPropertyOptions(t),!((i.hasChanged??y)(a,e)||i.useDefault&&i.reflect&&a===this._$Ej?.get(t)&&!this.hasAttribute(s._$Eu(t,i))))return;this.C(t,e,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:i,reflect:o,wrapped:a},s){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,s??e??this[t]),!0!==a||void 0!==s)||(this._$AL.has(t)||(this.hasUpdated||i||(e=void 0),this._$AL.set(t,e)),!0===o&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,i]of t){const{wrapped:t}=i,o=this[e];!0!==t||this._$AL.has(e)||void 0===o||this.C(e,void 0,i,o)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach(t=>t.hostUpdate?.()),this.update(e)):this._$EM()}catch(e){throw t=!1,this._$EM(),e}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM()}updated(t){}firstUpdated(t){}}$.elementStyles=[],$.shadowRootOptions={mode:"open"},$[b("elementProperties")]=new Map,$[b("finalized")]=new Map,f?.({ReactiveElement:$}),(g.reactiveElementVersions??=[]).push("2.1.2");const k=globalThis,_=t=>t,E=k.trustedTypes,A=E?E.createPolicy("lit-html",{createHTML:t=>t}):void 0,z="$lit$",P=`lit$${Math.random().toFixed(9).slice(2)}$`,S="?"+P,T=`<${S}>`,C=document,L=()=>C.createComment(""),U=t=>null===t||"object"!=typeof t&&"function"!=typeof t,M=Array.isArray,I="[ \t\n\f\r]",R=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,H=/-->/g,N=/>/g,O=RegExp(`>|${I}(?:([^\\s"'>=/]+)(${I}*=${I}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),V=/'/g,q=/"/g,B=/^(?:script|style|textarea|title)$/i,F=t=>(e,...i)=>({_$litType$:t,strings:e,values:i}),D=F(1),j=F(2),W=(F(3),Symbol.for("lit-noChange")),K=Symbol.for("lit-nothing"),X=new WeakMap,Z=C.createTreeWalker(C,129);function G(t,e){if(!M(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==A?A.createHTML(e):e}const Y=(t,e)=>{const i=t.length-1,o=[];let a,s=2===e?"<svg>":3===e?"<math>":"",r=R;for(let e=0;e<i;e++){const i=t[e];let n,l,c=-1,h=0;for(;h<i.length&&(r.lastIndex=h,l=r.exec(i),null!==l);)h=r.lastIndex,r===R?"!--"===l[1]?r=H:void 0!==l[1]?r=N:void 0!==l[2]?(B.test(l[2])&&(a=RegExp("</"+l[2],"g")),r=O):void 0!==l[3]&&(r=O):r===O?">"===l[0]?(r=a??R,c=-1):void 0===l[1]?c=-2:(c=r.lastIndex-l[2].length,n=l[1],r=void 0===l[3]?O:'"'===l[3]?q:V):r===q||r===V?r=O:r===H||r===N?r=R:(r=O,a=void 0);const d=r===O&&t[e+1].startsWith("/>")?" ":"";s+=r===R?i+T:c>=0?(o.push(n),i.slice(0,c)+z+i.slice(c)+P+d):i+P+(-2===c?e:d)}return[G(t,s+(t[i]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),o]};class J{constructor({strings:t,_$litType$:e},i){let o;this.parts=[];let a=0,s=0;const r=t.length-1,n=this.parts,[l,c]=Y(t,e);if(this.el=J.createElement(l,i),Z.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(o=Z.nextNode())&&n.length<r;){if(1===o.nodeType){if(o.hasAttributes())for(const t of o.getAttributeNames())if(t.endsWith(z)){const e=c[s++],i=o.getAttribute(t).split(P),r=/([.?@])?(.*)/.exec(e);n.push({type:1,index:a,name:r[2],strings:i,ctor:"."===r[1]?ot:"?"===r[1]?at:"@"===r[1]?st:it}),o.removeAttribute(t)}else t.startsWith(P)&&(n.push({type:6,index:a}),o.removeAttribute(t));if(B.test(o.tagName)){const t=o.textContent.split(P),e=t.length-1;if(e>0){o.textContent=E?E.emptyScript:"";for(let i=0;i<e;i++)o.append(t[i],L()),Z.nextNode(),n.push({type:2,index:++a});o.append(t[e],L())}}}else if(8===o.nodeType)if(o.data===S)n.push({type:2,index:a});else{let t=-1;for(;-1!==(t=o.data.indexOf(P,t+1));)n.push({type:7,index:a}),t+=P.length-1}a++}}static createElement(t,e){const i=C.createElement("template");return i.innerHTML=t,i}}function Q(t,e,i=t,o){if(e===W)return e;let a=void 0!==o?i._$Co?.[o]:i._$Cl;const s=U(e)?void 0:e._$litDirective$;return a?.constructor!==s&&(a?._$AO?.(!1),void 0===s?a=void 0:(a=new s(t),a._$AT(t,i,o)),void 0!==o?(i._$Co??=[])[o]=a:i._$Cl=a),void 0!==a&&(e=Q(t,a._$AS(t,e.values),a,o)),e}class tt{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:i}=this._$AD,o=(t?.creationScope??C).importNode(e,!0);Z.currentNode=o;let a=Z.nextNode(),s=0,r=0,n=i[0];for(;void 0!==n;){if(s===n.index){let e;2===n.type?e=new et(a,a.nextSibling,this,t):1===n.type?e=new n.ctor(a,n.name,n.strings,this,t):6===n.type&&(e=new rt(a,this,t)),this._$AV.push(e),n=i[++r]}s!==n?.index&&(a=Z.nextNode(),s++)}return Z.currentNode=C,o}p(t){let e=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class et{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,i,o){this.type=2,this._$AH=K,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=o,this._$Cv=o?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t?.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=Q(this,t,e),U(t)?t===K||null==t||""===t?(this._$AH!==K&&this._$AR(),this._$AH=K):t!==this._$AH&&t!==W&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>M(t)||"function"==typeof t?.[Symbol.iterator])(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==K&&U(this._$AH)?this._$AA.nextSibling.data=t:this.T(C.createTextNode(t)),this._$AH=t}$(t){const{values:e,_$litType$:i}=t,o="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=J.createElement(G(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===o)this._$AH.p(e);else{const t=new tt(o,this),i=t.u(this.options);t.p(e),this.T(i),this._$AH=t}}_$AC(t){let e=X.get(t.strings);return void 0===e&&X.set(t.strings,e=new J(t)),e}k(t){M(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,o=0;for(const a of t)o===e.length?e.push(i=new et(this.O(L()),this.O(L()),this,this.options)):i=e[o],i._$AI(a),o++;o<e.length&&(this._$AR(i&&i._$AB.nextSibling,o),e.length=o)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t!==this._$AB;){const e=_(t).nextSibling;_(t).remove(),t=e}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t))}}class it{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,i,o,a){this.type=1,this._$AH=K,this._$AN=void 0,this.element=t,this.name=e,this._$AM=o,this.options=a,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=K}_$AI(t,e=this,i,o){const a=this.strings;let s=!1;if(void 0===a)t=Q(this,t,e,0),s=!U(t)||t!==this._$AH&&t!==W,s&&(this._$AH=t);else{const o=t;let r,n;for(t=a[0],r=0;r<a.length-1;r++)n=Q(this,o[i+r],e,r),n===W&&(n=this._$AH[r]),s||=!U(n)||n!==this._$AH[r],n===K?t=K:t!==K&&(t+=(n??"")+a[r+1]),this._$AH[r]=n}s&&!o&&this.j(t)}j(t){t===K?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class ot extends it{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===K?void 0:t}}class at extends it{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==K)}}class st extends it{constructor(t,e,i,o,a){super(t,e,i,o,a),this.type=5}_$AI(t,e=this){if((t=Q(this,t,e,0)??K)===W)return;const i=this._$AH,o=t===K&&i!==K||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,a=t!==K&&(i===K||o);o&&this.element.removeEventListener(this.name,this,i),a&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}}class rt{constructor(t,e,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){Q(this,t)}}const nt=k.litHtmlPolyfillSupport;nt?.(J,et),(k.litHtmlVersions??=[]).push("3.3.2");const lt=globalThis;class ct extends ${constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=((t,e,i)=>{const o=i?.renderBefore??e;let a=o._$litPart$;if(void 0===a){const t=i?.renderBefore??null;o._$litPart$=a=new et(e.insertBefore(L(),t),t,void 0,i??{})}return a._$AI(t),a})(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return W}}ct._$litElement$=!0,ct.finalized=!0,lt.litElementHydrateSupport?.({LitElement:ct});const ht=lt.litElementPolyfillSupport;ht?.({LitElement:ct}),(lt.litElementVersions??=[]).push("4.2.2");const dt=s`
|
|
2
|
+
(()=>{"use strict";const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),o=new WeakMap;class a{constructor(t,e,o){if(this._$cssResult$=!0,o!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const i=this.t;if(e&&void 0===t){const e=void 0!==i&&1===i.length;e&&(t=o.get(i)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o.set(i,t))}return t}toString(){return this.cssText}}const s=(t,...e)=>{const o=1===t.length?t[0]:e.reduce((e,i,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+t[o+1],t[0]);return new a(o,t,i)},r=(i,o)=>{if(e)i.adoptedStyleSheets=o.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const e of o){const o=document.createElement("style"),a=t.litNonce;void 0!==a&&o.setAttribute("nonce",a),o.textContent=e.cssText,i.appendChild(o)}},n=e?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new a("string"==typeof t?t:t+"",void 0,i))(e)})(t):t,{is:l,defineProperty:c,getOwnPropertyDescriptor:h,getOwnPropertyNames:d,getOwnPropertySymbols:p,getPrototypeOf:u}=Object,g=globalThis,v=g.trustedTypes,m=v?v.emptyScript:"",f=g.reactiveElementPolyfillSupport,b=(t,e)=>t,w={toAttribute(t,e){switch(e){case Boolean:t=t?m:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},y=(t,e)=>!l(t,e),x={attribute:!0,type:String,converter:w,reflect:!1,useDefault:!1,hasChanged:y};Symbol.metadata??=Symbol("metadata"),g.litPropertyMetadata??=new WeakMap;class k extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=x){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const i=Symbol(),o=this.getPropertyDescriptor(t,i,e);void 0!==o&&c(this.prototype,t,o)}}static getPropertyDescriptor(t,e,i){const{get:o,set:a}=h(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:o,set(e){const s=o?.call(this);a?.call(this,e),this.requestUpdate(t,s,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??x}static _$Ei(){if(this.hasOwnProperty(b("elementProperties")))return;const t=u(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(b("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(b("properties"))){const t=this.properties,e=[...d(t),...p(t)];for(const i of e)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,i]of e)this.elementProperties.set(t,i)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const i=this._$Eu(t,e);void 0!==i&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(n(t))}else void 0!==t&&e.push(n(t));return e}static _$Eu(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this))}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const i of e.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return r(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$ET(t,e){const i=this.constructor.elementProperties.get(t),o=this.constructor._$Eu(t,i);if(void 0!==o&&!0===i.reflect){const a=(void 0!==i.converter?.toAttribute?i.converter:w).toAttribute(e,i.type);this._$Em=t,null==a?this.removeAttribute(o):this.setAttribute(o,a),this._$Em=null}}_$AK(t,e){const i=this.constructor,o=i._$Eh.get(t);if(void 0!==o&&this._$Em!==o){const t=i.getPropertyOptions(o),a="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:w;this._$Em=o;const s=a.fromAttribute(e,t.type);this[o]=s??this._$Ej?.get(o)??s,this._$Em=null}}requestUpdate(t,e,i,o=!1,a){if(void 0!==t){const s=this.constructor;if(!1===o&&(a=this[t]),i??=s.getPropertyOptions(t),!((i.hasChanged??y)(a,e)||i.useDefault&&i.reflect&&a===this._$Ej?.get(t)&&!this.hasAttribute(s._$Eu(t,i))))return;this.C(t,e,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:i,reflect:o,wrapped:a},s){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,s??e??this[t]),!0!==a||void 0!==s)||(this._$AL.has(t)||(this.hasUpdated||i||(e=void 0),this._$AL.set(t,e)),!0===o&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,i]of t){const{wrapped:t}=i,o=this[e];!0!==t||this._$AL.has(e)||void 0===o||this.C(e,void 0,i,o)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach(t=>t.hostUpdate?.()),this.update(e)):this._$EM()}catch(e){throw t=!1,this._$EM(),e}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM()}updated(t){}firstUpdated(t){}}k.elementStyles=[],k.shadowRootOptions={mode:"open"},k[b("elementProperties")]=new Map,k[b("finalized")]=new Map,f?.({ReactiveElement:k}),(g.reactiveElementVersions??=[]).push("2.1.2");const $=globalThis,_=t=>t,E=$.trustedTypes,A=E?E.createPolicy("lit-html",{createHTML:t=>t}):void 0,z="$lit$",P=`lit$${Math.random().toFixed(9).slice(2)}$`,S="?"+P,T=`<${S}>`,C=document,L=()=>C.createComment(""),U=t=>null===t||"object"!=typeof t&&"function"!=typeof t,M=Array.isArray,I="[ \t\n\f\r]",R=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,H=/-->/g,N=/>/g,O=RegExp(`>|${I}(?:([^\\s"'>=/]+)(${I}*=${I}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),V=/'/g,q=/"/g,B=/^(?:script|style|textarea|title)$/i,F=t=>(e,...i)=>({_$litType$:t,strings:e,values:i}),D=F(1),j=F(2),W=(F(3),Symbol.for("lit-noChange")),K=Symbol.for("lit-nothing"),X=new WeakMap,Z=C.createTreeWalker(C,129);function G(t,e){if(!M(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==A?A.createHTML(e):e}const Y=(t,e)=>{const i=t.length-1,o=[];let a,s=2===e?"<svg>":3===e?"<math>":"",r=R;for(let e=0;e<i;e++){const i=t[e];let n,l,c=-1,h=0;for(;h<i.length&&(r.lastIndex=h,l=r.exec(i),null!==l);)h=r.lastIndex,r===R?"!--"===l[1]?r=H:void 0!==l[1]?r=N:void 0!==l[2]?(B.test(l[2])&&(a=RegExp("</"+l[2],"g")),r=O):void 0!==l[3]&&(r=O):r===O?">"===l[0]?(r=a??R,c=-1):void 0===l[1]?c=-2:(c=r.lastIndex-l[2].length,n=l[1],r=void 0===l[3]?O:'"'===l[3]?q:V):r===q||r===V?r=O:r===H||r===N?r=R:(r=O,a=void 0);const d=r===O&&t[e+1].startsWith("/>")?" ":"";s+=r===R?i+T:c>=0?(o.push(n),i.slice(0,c)+z+i.slice(c)+P+d):i+P+(-2===c?e:d)}return[G(t,s+(t[i]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),o]};class J{constructor({strings:t,_$litType$:e},i){let o;this.parts=[];let a=0,s=0;const r=t.length-1,n=this.parts,[l,c]=Y(t,e);if(this.el=J.createElement(l,i),Z.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(o=Z.nextNode())&&n.length<r;){if(1===o.nodeType){if(o.hasAttributes())for(const t of o.getAttributeNames())if(t.endsWith(z)){const e=c[s++],i=o.getAttribute(t).split(P),r=/([.?@])?(.*)/.exec(e);n.push({type:1,index:a,name:r[2],strings:i,ctor:"."===r[1]?ot:"?"===r[1]?at:"@"===r[1]?st:it}),o.removeAttribute(t)}else t.startsWith(P)&&(n.push({type:6,index:a}),o.removeAttribute(t));if(B.test(o.tagName)){const t=o.textContent.split(P),e=t.length-1;if(e>0){o.textContent=E?E.emptyScript:"";for(let i=0;i<e;i++)o.append(t[i],L()),Z.nextNode(),n.push({type:2,index:++a});o.append(t[e],L())}}}else if(8===o.nodeType)if(o.data===S)n.push({type:2,index:a});else{let t=-1;for(;-1!==(t=o.data.indexOf(P,t+1));)n.push({type:7,index:a}),t+=P.length-1}a++}}static createElement(t,e){const i=C.createElement("template");return i.innerHTML=t,i}}function Q(t,e,i=t,o){if(e===W)return e;let a=void 0!==o?i._$Co?.[o]:i._$Cl;const s=U(e)?void 0:e._$litDirective$;return a?.constructor!==s&&(a?._$AO?.(!1),void 0===s?a=void 0:(a=new s(t),a._$AT(t,i,o)),void 0!==o?(i._$Co??=[])[o]=a:i._$Cl=a),void 0!==a&&(e=Q(t,a._$AS(t,e.values),a,o)),e}class tt{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:i}=this._$AD,o=(t?.creationScope??C).importNode(e,!0);Z.currentNode=o;let a=Z.nextNode(),s=0,r=0,n=i[0];for(;void 0!==n;){if(s===n.index){let e;2===n.type?e=new et(a,a.nextSibling,this,t):1===n.type?e=new n.ctor(a,n.name,n.strings,this,t):6===n.type&&(e=new rt(a,this,t)),this._$AV.push(e),n=i[++r]}s!==n?.index&&(a=Z.nextNode(),s++)}return Z.currentNode=C,o}p(t){let e=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class et{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,i,o){this.type=2,this._$AH=K,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=o,this._$Cv=o?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t?.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=Q(this,t,e),U(t)?t===K||null==t||""===t?(this._$AH!==K&&this._$AR(),this._$AH=K):t!==this._$AH&&t!==W&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>M(t)||"function"==typeof t?.[Symbol.iterator])(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==K&&U(this._$AH)?this._$AA.nextSibling.data=t:this.T(C.createTextNode(t)),this._$AH=t}$(t){const{values:e,_$litType$:i}=t,o="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=J.createElement(G(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===o)this._$AH.p(e);else{const t=new tt(o,this),i=t.u(this.options);t.p(e),this.T(i),this._$AH=t}}_$AC(t){let e=X.get(t.strings);return void 0===e&&X.set(t.strings,e=new J(t)),e}k(t){M(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,o=0;for(const a of t)o===e.length?e.push(i=new et(this.O(L()),this.O(L()),this,this.options)):i=e[o],i._$AI(a),o++;o<e.length&&(this._$AR(i&&i._$AB.nextSibling,o),e.length=o)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t!==this._$AB;){const e=_(t).nextSibling;_(t).remove(),t=e}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t))}}class it{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,i,o,a){this.type=1,this._$AH=K,this._$AN=void 0,this.element=t,this.name=e,this._$AM=o,this.options=a,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=K}_$AI(t,e=this,i,o){const a=this.strings;let s=!1;if(void 0===a)t=Q(this,t,e,0),s=!U(t)||t!==this._$AH&&t!==W,s&&(this._$AH=t);else{const o=t;let r,n;for(t=a[0],r=0;r<a.length-1;r++)n=Q(this,o[i+r],e,r),n===W&&(n=this._$AH[r]),s||=!U(n)||n!==this._$AH[r],n===K?t=K:t!==K&&(t+=(n??"")+a[r+1]),this._$AH[r]=n}s&&!o&&this.j(t)}j(t){t===K?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class ot extends it{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===K?void 0:t}}class at extends it{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==K)}}class st extends it{constructor(t,e,i,o,a){super(t,e,i,o,a),this.type=5}_$AI(t,e=this){if((t=Q(this,t,e,0)??K)===W)return;const i=this._$AH,o=t===K&&i!==K||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,a=t!==K&&(i===K||o);o&&this.element.removeEventListener(this.name,this,i),a&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}}class rt{constructor(t,e,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){Q(this,t)}}const nt=$.litHtmlPolyfillSupport;nt?.(J,et),($.litHtmlVersions??=[]).push("3.3.2");const lt=globalThis;class ct extends k{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=((t,e,i)=>{const o=i?.renderBefore??e;let a=o._$litPart$;if(void 0===a){const t=i?.renderBefore??null;o._$litPart$=a=new et(e.insertBefore(L(),t),t,void 0,i??{})}return a._$AI(t),a})(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return W}}ct._$litElement$=!0,ct.finalized=!0,lt.litElementHydrateSupport?.({LitElement:ct});const ht=lt.litElementPolyfillSupport;ht?.({LitElement:ct}),(lt.litElementVersions??=[]).push("4.2.2");const dt=s`
|
|
3
3
|
*,
|
|
4
4
|
*::before,
|
|
5
5
|
*::after {
|
|
@@ -759,7 +759,7 @@
|
|
|
759
759
|
<span class="social-icon ${this.icon}" aria-hidden="true">
|
|
760
760
|
${this.iconTemplate(this.icon)}
|
|
761
761
|
</span>
|
|
762
|
-
`}}customElements.get("cfa-social-icon")||customElements.define("cfa-social-icon",xt);class
|
|
762
|
+
`}}customElements.get("cfa-social-icon")||customElements.define("cfa-social-icon",xt);class kt extends ct{static properties={beforeLabel:{},figure:{},afterLabel:{},animated:{}};static styles=(()=>[dt,mt,s`
|
|
763
763
|
:host {
|
|
764
764
|
--text-color: var(--text-dark);
|
|
765
765
|
--highlight-color: var(--purple-20);
|
|
@@ -808,7 +808,7 @@
|
|
|
808
808
|
</div>
|
|
809
809
|
<div class="below-label strong">${this.afterLabel}</div>
|
|
810
810
|
</div>
|
|
811
|
-
`}}customElements.get("cfa-stat")||customElements.define("cfa-stat"
|
|
811
|
+
`}}customElements.get("cfa-stat")||customElements.define("cfa-stat",kt);class $t extends ct{static properties=(()=>({open:{type:Boolean}}))();static styles=(()=>[dt,s`
|
|
812
812
|
:host {
|
|
813
813
|
--color: var(--purple-60);
|
|
814
814
|
--hover-bg-color: var(--blue-20);
|
|
@@ -904,7 +904,7 @@
|
|
|
904
904
|
<div role="tablist">
|
|
905
905
|
<slot></slot>
|
|
906
906
|
</div>
|
|
907
|
-
`}}customElements.get("cfa-accordion-item")||customElements.define("cfa-accordion-item"
|
|
907
|
+
`}}customElements.get("cfa-accordion-item")||customElements.define("cfa-accordion-item",$t),customElements.get("cfa-accordion")||customElements.define("cfa-accordion",_t);class Et extends ct{static properties={theme:{}};static styles=(()=>[dt,s`
|
|
908
908
|
:host {
|
|
909
909
|
--bg-color: var(--purple-80);
|
|
910
910
|
--text-color: var(--white);
|
|
@@ -1432,7 +1432,116 @@
|
|
|
1432
1432
|
${this.cardContentTemplate()}
|
|
1433
1433
|
</div>
|
|
1434
1434
|
`}
|
|
1435
|
-
`}}
|
|
1435
|
+
`}}class Tt extends ct{static styles=(()=>[dt,mt,s`
|
|
1436
|
+
:host {
|
|
1437
|
+
display: flex;
|
|
1438
|
+
flex-direction: column;
|
|
1439
|
+
margin-inline: auto;
|
|
1440
|
+
max-width: 100%;
|
|
1441
|
+
width: 100%;
|
|
1442
|
+
}
|
|
1443
|
+
|
|
1444
|
+
.card-skeleton {
|
|
1445
|
+
background-color: var(--white);
|
|
1446
|
+
border: var(--hairline) solid var(--gray-20);
|
|
1447
|
+
box-shadow: var(--shadow-small);
|
|
1448
|
+
color: var(--black);
|
|
1449
|
+
display: flex;
|
|
1450
|
+
flex: 1;
|
|
1451
|
+
flex-direction: column;
|
|
1452
|
+
height: 100%;
|
|
1453
|
+
}
|
|
1454
|
+
|
|
1455
|
+
.visual-skeleton {
|
|
1456
|
+
background-color: var(--gray-20);
|
|
1457
|
+
height: var(--spacing-layout-7);
|
|
1458
|
+
overflow: hidden;
|
|
1459
|
+
position: relative;
|
|
1460
|
+
width: 100%;
|
|
1461
|
+
}
|
|
1462
|
+
|
|
1463
|
+
.content {
|
|
1464
|
+
background-color: var(--white);
|
|
1465
|
+
display: flex;
|
|
1466
|
+
flex: 1;
|
|
1467
|
+
flex-direction: column;
|
|
1468
|
+
gap: var(--spacing-layout-half);
|
|
1469
|
+
padding: var(--spacing-component-4);
|
|
1470
|
+
}
|
|
1471
|
+
|
|
1472
|
+
.body {
|
|
1473
|
+
display: flex;
|
|
1474
|
+
flex: 1;
|
|
1475
|
+
flex-direction: column;
|
|
1476
|
+
gap: var(--spacing-layout-half);
|
|
1477
|
+
}
|
|
1478
|
+
|
|
1479
|
+
.line {
|
|
1480
|
+
background-color: var(--gray-20);
|
|
1481
|
+
border-radius: var(--spacing-component-1);
|
|
1482
|
+
display: block;
|
|
1483
|
+
overflow: hidden;
|
|
1484
|
+
position: relative;
|
|
1485
|
+
width: 100%;
|
|
1486
|
+
}
|
|
1487
|
+
|
|
1488
|
+
.line::after {
|
|
1489
|
+
animation: shimmer 1.5s linear infinite;
|
|
1490
|
+
background: linear-gradient(
|
|
1491
|
+
90deg,
|
|
1492
|
+
transparent 0%,
|
|
1493
|
+
var(--white-50, rgba(255, 255, 255, 0.45)) 50%,
|
|
1494
|
+
transparent 100%
|
|
1495
|
+
);
|
|
1496
|
+
content: "";
|
|
1497
|
+
inset: 0;
|
|
1498
|
+
position: absolute;
|
|
1499
|
+
transform: translateX(-100%);
|
|
1500
|
+
}
|
|
1501
|
+
|
|
1502
|
+
.line--eyebrow {
|
|
1503
|
+
height: var(--line-height-small);
|
|
1504
|
+
max-width: 28%;
|
|
1505
|
+
}
|
|
1506
|
+
|
|
1507
|
+
.line--title {
|
|
1508
|
+
height: var(--line-height-h3);
|
|
1509
|
+
max-width: 76%;
|
|
1510
|
+
}
|
|
1511
|
+
|
|
1512
|
+
.line--body {
|
|
1513
|
+
height: var(--line-height-base);
|
|
1514
|
+
}
|
|
1515
|
+
|
|
1516
|
+
.line--body-short {
|
|
1517
|
+
max-width: 86%;
|
|
1518
|
+
}
|
|
1519
|
+
|
|
1520
|
+
.line--action {
|
|
1521
|
+
height: var(--line-height-small);
|
|
1522
|
+
margin-block-start: auto;
|
|
1523
|
+
max-width: 36%;
|
|
1524
|
+
}
|
|
1525
|
+
|
|
1526
|
+
@keyframes shimmer {
|
|
1527
|
+
100% {
|
|
1528
|
+
transform: translateX(100%);
|
|
1529
|
+
}
|
|
1530
|
+
}
|
|
1531
|
+
`])();render(){return D`
|
|
1532
|
+
<div class="card-skeleton" role="status" aria-busy="true" aria-label="Loading card">
|
|
1533
|
+
<div class="visual-skeleton line" aria-hidden="true"></div>
|
|
1534
|
+
<div class="content">
|
|
1535
|
+
<div class="line line--eyebrow" aria-hidden="true"></div>
|
|
1536
|
+
<div class="line line--title" aria-hidden="true"></div>
|
|
1537
|
+
<div class="body" aria-hidden="true">
|
|
1538
|
+
<div class="line line--body"></div>
|
|
1539
|
+
<div class="line line--body line--body-short"></div>
|
|
1540
|
+
<div class="line line--action"></div>
|
|
1541
|
+
</div>
|
|
1542
|
+
</div>
|
|
1543
|
+
</div>
|
|
1544
|
+
`}}customElements.get("cfa-card")||customElements.define("cfa-card",St),customElements.get("cfa-card-skeleton")||customElements.define("cfa-card-skeleton",Tt);class Ct extends ct{static properties={name:{},imageUrl:{},linkUrl:{},linkTarget:{}};static styles=(()=>[dt,mt,s`
|
|
1436
1545
|
:host {
|
|
1437
1546
|
--bg-color: var(--blue-20);
|
|
1438
1547
|
--text-color: var(--black);
|
|
@@ -1488,7 +1597,7 @@
|
|
|
1488
1597
|
${this.cardContentTemplate()}
|
|
1489
1598
|
</a>
|
|
1490
1599
|
`:D` <div class="card">${this.cardContentTemplate()}</div> `}
|
|
1491
|
-
`}}customElements.get("cfa-logo-card")||customElements.define("cfa-logo-card",
|
|
1600
|
+
`}}customElements.get("cfa-logo-card")||customElements.define("cfa-logo-card",Ct);class Lt extends ct{static properties={fontSize:{}};static styles=(()=>[dt,s`
|
|
1492
1601
|
:host {
|
|
1493
1602
|
--link-color: var(--purple-80);
|
|
1494
1603
|
--link-hover-color: var(--purple-80);
|
|
@@ -1554,7 +1663,7 @@
|
|
|
1554
1663
|
<nav data-font-size="${this.fontSize}">
|
|
1555
1664
|
<ul></ul>
|
|
1556
1665
|
</nav>
|
|
1557
|
-
`}}customElements.get("cfa-nav")||customElements.define("cfa-nav",
|
|
1666
|
+
`}}customElements.get("cfa-nav")||customElements.define("cfa-nav",Lt);class Ut extends ct{static properties={fontSize:{}};static styles=(()=>[dt,s`
|
|
1558
1667
|
:host {
|
|
1559
1668
|
--bg-color: var(--white);
|
|
1560
1669
|
--link-color: var(--purple-80);
|
|
@@ -1653,7 +1762,7 @@
|
|
|
1653
1762
|
<li><strong>On this page:  </strong></li>
|
|
1654
1763
|
</ul>
|
|
1655
1764
|
</nav>
|
|
1656
|
-
`}}customElements.get("cfa-page-nav")||customElements.define("cfa-page-nav",
|
|
1765
|
+
`}}customElements.get("cfa-page-nav")||customElements.define("cfa-page-nav",Ut);class Mt extends ct{static properties={previousTitle:{},previousUrl:{},nextTitle:{},nextUrl:{}};static styles=(()=>[dt,mt,gt,s`
|
|
1657
1766
|
:host {
|
|
1658
1767
|
display: block;
|
|
1659
1768
|
}
|
|
@@ -1718,7 +1827,7 @@
|
|
|
1718
1827
|
`:""}
|
|
1719
1828
|
</div>
|
|
1720
1829
|
</nav>
|
|
1721
|
-
`}}customElements.get("cfa-pager")||customElements.define("cfa-pager",
|
|
1830
|
+
`}}customElements.get("cfa-pager")||customElements.define("cfa-pager",Mt);class It extends ct{static properties=(()=>({page:{type:Number},totalPages:{type:Number},previousLabel:{},nextLabel:{}}))();static styles=(()=>[dt,gt,s`
|
|
1722
1831
|
:host {
|
|
1723
1832
|
display: block;
|
|
1724
1833
|
}
|
|
@@ -1773,7 +1882,7 @@
|
|
|
1773
1882
|
`:""}
|
|
1774
1883
|
</div>
|
|
1775
1884
|
</div>
|
|
1776
|
-
`}handleNextPage(){if(this.page<this.totalPages){this.page++;const t=new CustomEvent("page-change",{bubbles:!0,cancelable:!0,detail:this.page});this.dispatchEvent(t)}}handlePreviousPage(){if(this.page>1){this.page--;const t=new CustomEvent("page-change",{bubbles:!0,cancelable:!0,detail:this.page});this.dispatchEvent(t)}}}customElements.get("cfa-pagination")||customElements.define("cfa-pagination",
|
|
1885
|
+
`}handleNextPage(){if(this.page<this.totalPages){this.page++;const t=new CustomEvent("page-change",{bubbles:!0,cancelable:!0,detail:this.page});this.dispatchEvent(t)}}handlePreviousPage(){if(this.page>1){this.page--;const t=new CustomEvent("page-change",{bubbles:!0,cancelable:!0,detail:this.page});this.dispatchEvent(t)}}}customElements.get("cfa-pagination")||customElements.define("cfa-pagination",It);class Rt extends ct{static properties={name:{type:"string"},title:{type:"string"},company:{type:"string"},pronouns:{type:"string"},imageUrl:{type:"string"},imageAltText:{type:"string"},linkUrl:{type:"string"},linkedInUrl:{type:"string"},twitterHandle:{type:"string"}};static styles=(()=>[dt,mt,s`
|
|
1777
1886
|
:host {
|
|
1778
1887
|
display: block;
|
|
1779
1888
|
}
|
|
@@ -1964,7 +2073,7 @@
|
|
|
1964
2073
|
`:K}
|
|
1965
2074
|
</div>
|
|
1966
2075
|
</div>
|
|
1967
|
-
`}}customElements.get("cfa-person-card")||customElements.define("cfa-person-card",
|
|
2076
|
+
`}}customElements.get("cfa-person-card")||customElements.define("cfa-person-card",Rt);class Ht extends ct{static properties={heading:{},text:{},actionLabel:{},linkUrl:{},linkTarget:{}};static styles=(()=>[dt,mt,s`
|
|
1968
2077
|
:host {
|
|
1969
2078
|
--bg-color: var(--blue-20);
|
|
1970
2079
|
--padding: var(--spacing-component-4);
|
|
@@ -2016,7 +2125,7 @@
|
|
|
2016
2125
|
</div>
|
|
2017
2126
|
`:K}
|
|
2018
2127
|
</a>
|
|
2019
|
-
`}}customElements.get("cfa-promo")||customElements.define("cfa-promo",
|
|
2128
|
+
`}}customElements.get("cfa-promo")||customElements.define("cfa-promo",Ht);class Nt extends ct{static properties=(()=>({showLabel:{type:String},hideLabel:{type:String},showIcon:{type:String},hideIcon:{type:String},expanded:{type:Boolean,reflect:!0}}))();static styles=(()=>[dt,s`
|
|
2020
2129
|
:host {
|
|
2021
2130
|
--color: var(--purple-60);
|
|
2022
2131
|
--hover-color: var(--red-60);
|
|
@@ -2067,7 +2176,7 @@
|
|
|
2067
2176
|
<cfa-icon>${this.expanded?this.hideIcon:this.showIcon}</cfa-icon>
|
|
2068
2177
|
</button>
|
|
2069
2178
|
</div>
|
|
2070
|
-
`}}customElements.get("cfa-reveal")||customElements.define("cfa-reveal",
|
|
2179
|
+
`}}customElements.get("cfa-reveal")||customElements.define("cfa-reveal",Nt);class Ot extends ct{static properties={imageUrl:{},imageAltText:{},linkUrl:{},linkTarget:{}};static styles=(()=>[dt,s`
|
|
2071
2180
|
:host {
|
|
2072
2181
|
--background: var(--white, #fff);
|
|
2073
2182
|
--width: var(--column-span-12);
|
|
@@ -2160,7 +2269,7 @@
|
|
|
2160
2269
|
<slot></slot>
|
|
2161
2270
|
</div>
|
|
2162
2271
|
</a>
|
|
2163
|
-
`}}customElements.get("cfa-slide")||customElements.define("cfa-slide",
|
|
2272
|
+
`}}customElements.get("cfa-slide")||customElements.define("cfa-slide",Ot);class Vt extends ct{static properties=(()=>({active:{type:Boolean},panelId:{type:String}}))();static styles=(()=>[dt,mt,s`
|
|
2164
2273
|
button {
|
|
2165
2274
|
background: none;
|
|
2166
2275
|
border: 0;
|
|
@@ -2196,7 +2305,7 @@
|
|
|
2196
2305
|
>
|
|
2197
2306
|
<slot></slot>
|
|
2198
2307
|
</button>
|
|
2199
|
-
`}}customElements.get("cfa-tab")||customElements.define("cfa-tab",
|
|
2308
|
+
`}}customElements.get("cfa-tab")||customElements.define("cfa-tab",Vt);class qt extends ct{static properties={};static styles=(()=>[dt,gt,s`
|
|
2200
2309
|
:host {
|
|
2201
2310
|
display: block;
|
|
2202
2311
|
width: calc(100% + var(--outer-margin));
|
|
@@ -2233,7 +2342,7 @@
|
|
|
2233
2342
|
<div class="tab-list" role="tablist">
|
|
2234
2343
|
<slot></slot>
|
|
2235
2344
|
</div>
|
|
2236
|
-
`}}customElements.get("cfa-tab-list")||customElements.define("cfa-tab-list",
|
|
2345
|
+
`}}customElements.get("cfa-tab-list")||customElements.define("cfa-tab-list",qt);class Bt extends ct{static properties=(()=>({title:{type:String},description:{type:String},actionLabel:{type:String},linkUrl:{type:String},linkTarget:{type:String},imageUrl:{type:String},imageThumbnailUrl:{type:String},imageAltText:{type:String}}))();static styles=(()=>[dt,mt,s`
|
|
2237
2346
|
:host {
|
|
2238
2347
|
--bg-color: var(--white);
|
|
2239
2348
|
--title-color: var(--purple-60);
|
|
@@ -2341,7 +2450,7 @@
|
|
|
2341
2450
|
${this.tileContentTemplate()}
|
|
2342
2451
|
</a>
|
|
2343
2452
|
`:D` <div class="tile">${this.tileContentTemplate()}</div> `}
|
|
2344
|
-
`}}customElements.get("cfa-tile")||customElements.define("cfa-tile",
|
|
2453
|
+
`}}customElements.get("cfa-tile")||customElements.define("cfa-tile",Bt);class Ft extends ct{static styles=(()=>[dt,mt,s`
|
|
2345
2454
|
:host {
|
|
2346
2455
|
--label-color: var(--purple-60);
|
|
2347
2456
|
|
|
@@ -2366,7 +2475,7 @@
|
|
|
2366
2475
|
<div class="text small">
|
|
2367
2476
|
<slot />
|
|
2368
2477
|
</div>
|
|
2369
|
-
`}}customElements.get("cfa-transcript")||customElements.define("cfa-transcript",
|
|
2478
|
+
`}}customElements.get("cfa-transcript")||customElements.define("cfa-transcript",Ft);class Dt extends ct{static SWIPE_THRESHOLD=50;static SHADOW_SPACE=32;static PROGRESS_UPDATE_INTERVAL=100;static AUTOPLAY_DURATION=1e4;static DESKTOP_BREAKPOINT=768;static ITEMS_PER_VIEW_DESKTOP=3;static ITEMS_PER_VIEW_MOBILE=1;static properties=(()=>({currentPage:{type:Number,state:!0},totalSlides:{type:Number,state:!0},progressPercentage:{type:Number,state:!0},isPaused:{type:Boolean,state:!0},prefersReducedMotion:{type:Boolean,state:!0},itemsPerView:{type:Number},autoPlay:{type:Boolean},autoPlayDuration:{type:Number}}))();static styles=(()=>[dt,s`
|
|
2370
2479
|
:host {
|
|
2371
2480
|
--carousel-fade-duration: 300ms;
|
|
2372
2481
|
--carousel-control-size: var(--spacing-layout-2);
|
|
@@ -2518,7 +2627,7 @@
|
|
|
2518
2627
|
min-width: calc(var(--carousel-dot-size) * 0.8);
|
|
2519
2628
|
}
|
|
2520
2629
|
}
|
|
2521
|
-
`])();constructor(){super(),this.currentPage=0,this.totalSlides=0,this.progressPercentage=0,this.isPaused=!0,this.prefersReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.itemsPerView=
|
|
2630
|
+
`])();constructor(){super(),this.currentPage=0,this.totalSlides=0,this.progressPercentage=0,this.isPaused=!0,this.prefersReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.itemsPerView=Dt.ITEMS_PER_VIEW_DESKTOP,this.autoPlay=!0,this.autoPlayDuration=Math.max(100,Dt.AUTOPLAY_DURATION),this.autoPlayTimer=null,this.autoPlayTimeout=null,this.touchStartX=null,this.touchEndX=null,this._initialized=!1,this._resizeTimerId=null,this._mouseEnterListener=null,this._mouseLeaveListener=null}connectedCallback(){super.connectedCallback();const t=this.getAttribute("items-per-view");if(null!==t){const e=parseInt(t,10);isNaN(e)||(this.itemsPerView=e)}this.style.setProperty("--items-per-view",this.itemsPerView),this.addEventListener("keydown",t=>this._handleKeydown(t)),this.addEventListener("touchstart",t=>this._handleTouchStart(t),!1),this.addEventListener("touchend",t=>this._handleTouchEnd(t),!1),this._resizeListener=()=>{this._resizeTimerId&&clearTimeout(this._resizeTimerId),this._resizeTimerId=setTimeout(()=>{this.updateItemsPerView(),this.updateCarouselHeight()},150)},window.addEventListener("resize",this._resizeListener)}disconnectedCallback(){super.disconnectedCallback(),this.stopAutoPlay(),this._resizeListener&&window.removeEventListener("resize",this._resizeListener),this._resizeTimerId&&clearTimeout(this._resizeTimerId);const t=this.shadowRoot?.querySelector(".carousel-slides");t&&this._mouseEnterListener&&this._mouseLeaveListener&&(t.removeEventListener("mouseenter",this._mouseEnterListener),t.removeEventListener("mouseleave",this._mouseLeaveListener))}updated(t){t.has("itemsPerView")&&this.style.setProperty("--items-per-view",this.itemsPerView),t.has("currentPage")&&this.updateItemVisibility()}firstUpdated(){const t=this.shadowRoot.querySelector("slot"),e=this.shadowRoot.querySelector(".carousel-slides");t&&!this._slotChangeSetup&&(this._slotChangeSetup=!0,t.addEventListener("slotchange",()=>{this._slotChangeTimeout&&clearTimeout(this._slotChangeTimeout),this._slotChangeTimeout=setTimeout(()=>{this._initialized||this._initializeCarousel()},50)})),e&&!this._mouseEnterListener&&(this._mouseEnterListener=()=>{this.stopAutoPlay()},this._mouseLeaveListener=()=>{this.isPaused||this._scheduleNextPage()},e.addEventListener("mouseenter",this._mouseEnterListener),e.addEventListener("mouseleave",this._mouseLeaveListener))}_initializeCarousel(){if(this._initialized)return;const t=this.shadowRoot.querySelector("slot");if(!t)return;const e=t.assignedElements();0!==e.length&&(this._initialized=!0,this.totalSlides=e.length,this.updateItemsPerView(),this.updateItemVisibility(),this.startAutoPlay(),this._waitForImages(e,5e3).then(()=>{this.updateCarouselHeight()}))}_waitForImages(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:3e3;return Promise.race([Promise.all(Array.from(t).map(t=>Promise.all(Array.from(t.querySelectorAll("img")).map(t=>t.complete?Promise.resolve():new Promise(e=>{t.addEventListener("load",e,{once:!0}),t.addEventListener("error",e,{once:!0})}))))),new Promise((t,i)=>setTimeout(()=>i(new Error("Image load timeout")),e))]).catch(()=>Promise.resolve())}get totalPages(){return Math.ceil(this.totalSlides/this.itemsPerView)}updateItemsPerView(){if(this.hasAttribute("items-per-view"))return;const t=window.innerWidth>=Dt.DESKTOP_BREAKPOINT?Dt.ITEMS_PER_VIEW_DESKTOP:Dt.ITEMS_PER_VIEW_MOBILE;t!==this.itemsPerView&&(this.itemsPerView=t,this.style.setProperty("--items-per-view",this.itemsPerView),this.currentPage>=this.totalPages&&(this.currentPage=0),this.requestUpdate())}updateItemVisibility(){const t=this.shadowRoot.querySelector("slot");if(!t)return;const e=t.assignedElements();if(0===e.length)return;const i=this.currentPage*this.itemsPerView,o=i+this.itemsPerView;e.forEach((t,e)=>{e>=i&&e<o?t.setAttribute("data-slide-active",""):t.removeAttribute("data-slide-active")}),this.updateCarouselHeight()}updateCarouselHeight(){const t=this.shadowRoot.querySelector("slot"),e=this.shadowRoot.querySelector(".carousel-slides");if(!t||!e)return;const i=t.assignedElements();if(0===i.length)return;const o=this.currentPage*this.itemsPerView,a=o+this.itemsPerView;requestAnimationFrame(()=>{requestAnimationFrame(()=>{setTimeout(()=>{let t=0;for(let e=o;e<a&&e<i.length;e++){const o=i[e].offsetHeight;t=Math.max(t,o)}const s=Math.max(t,Dt.SHADOW_SPACE);e.style.height=s+"px"},0)})})}startAutoPlay(){this.autoPlay&&!this.prefersReducedMotion&&0!==this.totalSlides?(this.isPaused=!1,this.progressPercentage=0,this._scheduleNextPage()):this.isPaused=!0}play(){this.prefersReducedMotion||this.startAutoPlay()}pause(){this.isPaused=!0,this.stopAutoPlay()}stopAutoPlay(){this.autoPlayTimer&&(clearInterval(this.autoPlayTimer),this.autoPlayTimer=null),this.autoPlayTimeout&&(clearTimeout(this.autoPlayTimeout),this.autoPlayTimeout=null)}_scheduleNextPage(){this.stopAutoPlay();const t=100/(this.autoPlayDuration/Dt.PROGRESS_UPDATE_INTERVAL);this.autoPlayTimer=setInterval(()=>{this.progressPercentage=Math.min(100,this.progressPercentage+t)},Dt.PROGRESS_UPDATE_INTERVAL),this.autoPlayTimeout=setTimeout(()=>{this.isPaused||(this.nextPage(),this.startAutoPlay())},this.autoPlayDuration)}nextPage(){this.currentPage=(this.currentPage+1)%this.totalPages,this.progressPercentage=0,this.stopAutoPlay(),this.requestUpdate(),this.play()}previousPage(){this.currentPage=(this.currentPage-1+this.totalPages)%this.totalPages,this.progressPercentage=0,this.stopAutoPlay(),this.requestUpdate(),this.play()}goToPage(t){t>=0&&t<this.totalPages&&t!==this.currentPage&&(this.currentPage=t,this.progressPercentage=0,this.stopAutoPlay(),this.requestUpdate(),this.play())}_handleKeydown(t){"ArrowRight"===t.key?(t.preventDefault(),this.nextPage(),this.pause()):"ArrowLeft"===t.key&&(t.preventDefault(),this.previousPage(),this.pause())}_handleTouchStart(t){t.changedTouches&&t.changedTouches.length>0&&(this.touchStartX=t.changedTouches[0].screenX)}_handleTouchEnd(t){t.changedTouches&&t.changedTouches.length>0&&(this.touchEndX=t.changedTouches[0].screenX,this._handleSwipe())}_handleSwipe(){if(null===this.touchStartX||null===this.touchEndX)return;const t=this.touchStartX-this.touchEndX;Math.abs(t)>Dt.SWIPE_THRESHOLD&&(t>0?(this.nextPage(),this.pause()):(this.previousPage(),this.pause()))}render(){return D`
|
|
2522
2631
|
<div
|
|
2523
2632
|
class="carousel-container"
|
|
2524
2633
|
role="region"
|
|
@@ -2566,4 +2675,4 @@
|
|
|
2566
2675
|
</div>
|
|
2567
2676
|
`:""}
|
|
2568
2677
|
</div>
|
|
2569
|
-
`}}customElements.get("cfa-carousel")||customElements.define("cfa-carousel",
|
|
2678
|
+
`}}customElements.get("cfa-carousel")||customElements.define("cfa-carousel",Dt)})();
|
package/package.json
CHANGED
package/src/components/card.js
CHANGED
|
@@ -401,6 +401,131 @@ class Card extends LitElement {
|
|
|
401
401
|
}
|
|
402
402
|
}
|
|
403
403
|
|
|
404
|
+
class CardSkeleton extends LitElement {
|
|
405
|
+
static styles = [
|
|
406
|
+
commonStyles,
|
|
407
|
+
typographyStyles,
|
|
408
|
+
css`
|
|
409
|
+
:host {
|
|
410
|
+
display: flex;
|
|
411
|
+
flex-direction: column;
|
|
412
|
+
margin-inline: auto;
|
|
413
|
+
max-width: 100%;
|
|
414
|
+
width: 100%;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.card-skeleton {
|
|
418
|
+
background-color: var(--white);
|
|
419
|
+
border: var(--hairline) solid var(--gray-20);
|
|
420
|
+
box-shadow: var(--shadow-small);
|
|
421
|
+
color: var(--black);
|
|
422
|
+
display: flex;
|
|
423
|
+
flex: 1;
|
|
424
|
+
flex-direction: column;
|
|
425
|
+
height: 100%;
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
.visual-skeleton {
|
|
429
|
+
background-color: var(--gray-20);
|
|
430
|
+
height: var(--spacing-layout-7);
|
|
431
|
+
overflow: hidden;
|
|
432
|
+
position: relative;
|
|
433
|
+
width: 100%;
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
.content {
|
|
437
|
+
background-color: var(--white);
|
|
438
|
+
display: flex;
|
|
439
|
+
flex: 1;
|
|
440
|
+
flex-direction: column;
|
|
441
|
+
gap: var(--spacing-layout-half);
|
|
442
|
+
padding: var(--spacing-component-4);
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
.body {
|
|
446
|
+
display: flex;
|
|
447
|
+
flex: 1;
|
|
448
|
+
flex-direction: column;
|
|
449
|
+
gap: var(--spacing-layout-half);
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
.line {
|
|
453
|
+
background-color: var(--gray-20);
|
|
454
|
+
border-radius: var(--spacing-component-1);
|
|
455
|
+
display: block;
|
|
456
|
+
overflow: hidden;
|
|
457
|
+
position: relative;
|
|
458
|
+
width: 100%;
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
.line::after {
|
|
462
|
+
animation: shimmer 1.5s linear infinite;
|
|
463
|
+
background: linear-gradient(
|
|
464
|
+
90deg,
|
|
465
|
+
transparent 0%,
|
|
466
|
+
var(--white-50, rgba(255, 255, 255, 0.45)) 50%,
|
|
467
|
+
transparent 100%
|
|
468
|
+
);
|
|
469
|
+
content: "";
|
|
470
|
+
inset: 0;
|
|
471
|
+
position: absolute;
|
|
472
|
+
transform: translateX(-100%);
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
.line--eyebrow {
|
|
476
|
+
height: var(--line-height-small);
|
|
477
|
+
max-width: 28%;
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
.line--title {
|
|
481
|
+
height: var(--line-height-h3);
|
|
482
|
+
max-width: 76%;
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
.line--body {
|
|
486
|
+
height: var(--line-height-base);
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
.line--body-short {
|
|
490
|
+
max-width: 86%;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
.line--action {
|
|
494
|
+
height: var(--line-height-small);
|
|
495
|
+
margin-block-start: auto;
|
|
496
|
+
max-width: 36%;
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
@keyframes shimmer {
|
|
500
|
+
100% {
|
|
501
|
+
transform: translateX(100%);
|
|
502
|
+
}
|
|
503
|
+
}
|
|
504
|
+
`,
|
|
505
|
+
];
|
|
506
|
+
|
|
507
|
+
render() {
|
|
508
|
+
return html`
|
|
509
|
+
<div class="card-skeleton" role="status" aria-busy="true" aria-label="Loading card">
|
|
510
|
+
<div class="visual-skeleton line" aria-hidden="true"></div>
|
|
511
|
+
<div class="content">
|
|
512
|
+
<div class="line line--eyebrow" aria-hidden="true"></div>
|
|
513
|
+
<div class="line line--title" aria-hidden="true"></div>
|
|
514
|
+
<div class="body" aria-hidden="true">
|
|
515
|
+
<div class="line line--body"></div>
|
|
516
|
+
<div class="line line--body line--body-short"></div>
|
|
517
|
+
<div class="line line--action"></div>
|
|
518
|
+
</div>
|
|
519
|
+
</div>
|
|
520
|
+
</div>
|
|
521
|
+
`;
|
|
522
|
+
}
|
|
523
|
+
}
|
|
524
|
+
|
|
404
525
|
if (!customElements.get("cfa-card")) {
|
|
405
526
|
customElements.define("cfa-card", Card);
|
|
406
527
|
}
|
|
528
|
+
|
|
529
|
+
if (!customElements.get("cfa-card-skeleton")) {
|
|
530
|
+
customElements.define("cfa-card-skeleton", CardSkeleton);
|
|
531
|
+
}
|
|
@@ -168,3 +168,7 @@ HorizontalCompactCard.args = {
|
|
|
168
168
|
"https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-150x150.png",
|
|
169
169
|
visualAltText: "Illustration of groceries in a shopping basket and paper bag",
|
|
170
170
|
};
|
|
171
|
+
|
|
172
|
+
export const SkeletonCard = () => html`
|
|
173
|
+
<cfa-card-skeleton></cfa-card-skeleton>
|
|
174
|
+
`;
|