@customerjourney/cj-sliders
Version:
Integration of the Swiper library to the CustomerJourney.js project
1,170 lines (1,167 loc) • 592 kB
JavaScript
(() => {
// node_modules/@customerjourney/cj-core/src/components/AppElement.js
var AppElement = class extends HTMLElement {
#default = {};
/**
*
* @param {Object} props Attributes necessary to render the HTML element
*/
constructor(props = {}) {
super();
this.state = this.initState(props);
}
/**
* Applies default values to props that are not defined in the component state
* @param {Object} defValues Default values
* @param {Object} props Values to be applied in the rendering
* @returns {Object} - Default attributes combined with shipped attributes
*/
initState(defValues, props) {
if (props != void 0) {
let state = Object.assign({}, defValues, props);
if (defValues != void 0) {
if (Object.keys(defValues).lenght != 0) {
Object.keys(defValues).forEach((prop) => {
if (props[prop] != void 0) {
if (typeof props[prop] === "string" || Array.isArray(props[prop])) {
state[prop] = props[prop];
} else {
state[prop] = Object.assign({}, defValues[prop], props[prop]);
}
}
});
}
}
return state;
} else {
return defValues;
}
}
/**
* convierte el nombre de un atributo a camel case
* @param {String} attribute
* @returns {String}
*/
attribute2CamelCase(attribute2) {
const pattern = new RegExp("-([a-z])", "g");
return attribute2.replace(pattern, (match, capture) => capture.toUpperCase());
}
/**
* Remove capitalization of an attribute name
* @param {String} camelCase
* @returns {String}
*/
camelCase2attribute(camelCase) {
return camelCase.replace(new RegExp("-([a-z])", "g"), (m, c) => c.toUpperCase());
}
/**
* Initializes the component state and renders it.
* @param {Object} props Attributes and properties to render the component
*/
setState(props) {
this.state = this.initState(this.#default, props);
this.render();
}
/**
* Update state and render the component
*
* @param {Object} props Attributes and properties to update the component
*/
updateState(props) {
this.state = this.initState(this.state, props);
this.render();
}
/**
* Generate data attributes to generate component animations
*
* @param {Object} props Attributes to define animation
* @param {string} props.animation Animation name
* @param {string} props.delay 2s, 3s, 4s or 5s
* @param {string} props.speed slower, slow, fast or faster. Default 1s
* @param {string} props.repeat 1, 2, 3, infinite. Default 0
* @returns Animation data- params
*/
setAnimation(props) {
if (props === void 0 || props === null) {
return "";
} else {
let animation = ` data-animation=${props.effect}`;
props.delay != void 0 ? animation += ` data-delay=${props.delay}` : false;
props.speed != void 0 ? animation += ` data-speed=${props.speed}` : false;
props.repeat != void 0 ? animation += ` data-repeat=${props.repeat}` : false;
return animation;
}
}
/**
*
*/
cleanValue(prop) {
return prop != void 0 ? prop : "";
}
/**
*
*/
updateClassList() {
if (this.state.classList) {
this.classList.add(...this.state.classList);
}
}
/**
* Add the additional classes sent to the component props
*
* @param {string} defaultClass
* @param {string} optionalClasses
*/
getClasses(defaultClass = [], optionalClasses) {
let resultClasses = [];
if (optionalClasses === void 0) {
resultClasses = defaultClass;
} else {
resultClasses = [...defaultClass, ...optionalClasses];
}
let classes2 = "";
if (resultClasses.length > 0) {
classes2 = `class="${resultClasses.toString().replaceAll(",", " ")}"`;
}
return classes2;
}
/**
*
* @returns {string} The styles needed to add the background image
*/
getBackground() {
let style = "";
if (this.state.backgroundImage?.url != void 0) {
style = `background-image: url('${this.state.backgroundImage.url}'); background-repeat: no-repeat; background-position: center; background-size: cover;`;
if (this.state.backgroundImage?.fixed) {
style = `${style} background-attachment: fixed;`;
}
} else {
style = "";
}
return ` style="${style}"`;
}
/**
* Generate caption, title and subtitle of the component
*/
getTitles() {
let titles = "";
if (this.state != void 0) {
titles = /* HTML */
`
<div class="content">
${this.state.caption?.text[this.state.context.lang] != void 0 ? `
<h2 ${this.getClasses(["subtitle"], this.state.caption?.classList)} ${this.setAnimation(this.state.caption?.animation)}>${this.state.caption.text[this.state.context.lang]}</h2>` : ""}
${this.state.title?.text[this.state.context.lang] != void 0 ? `
<h1 ${this.getClasses([], this.state.title?.classList)} ${this.setAnimation(this.state.title?.animation)}>${this.state.title.text[this.state.context.lang]}</h1>` : ``}
${this.state.subtitle?.text[this.state.context.lang] != void 0 ? `
<h2 ${this.getClasses([], this.state.subtitle?.classList)} ${this.setAnimation(this.state.subtitle?.animation)}>${this.state.subtitle.text[this.state.context.lang]}</h2>` : ``}
</div>`;
}
return titles;
}
handleEvent(event2) {
if (event2.type === "click") {
if (this.state.buttons?.eventName != void 0) {
this.eventName = this.state.buttons.eventName;
}
const clickFunnel = new CustomEvent(this.eventName, {
detail: { source: event2.target.id },
bubbles: true,
composed: true
});
this.dispatchEvent(clickFunnel);
}
}
registerExtraEvents() {
}
/**
* Generate click events on the component's CTA buttons
*/
addEvents() {
let buttons = this.querySelectorAll("button");
if (buttons.length > 0) {
buttons.forEach((item) => {
item.addEventListener("click", this);
});
}
}
/**
* Create the CTA buttons of the component from the props sent
* @param {Object} props
*/
#getButtons(props) {
if (props != void 0) {
let buttons = "";
props.forEach((el) => {
buttons += `<${el.href != void 0 ? "a" : "button"} id="${el.id}" ${this.getClasses(["button"], el.classList)} ${el.href != void 0 ? `href="${el.href}"` : ""}>${el?.text[this.state.context.lang]}</${el.href != void 0 ? "a" : "button"}>`;
});
return buttons;
} else
return "";
}
/**
* Generate the CTA button container and insert the buttons described in the props
* @param {Object} props
*/
buttonsRender(props) {
if (props != void 0) {
let buttons = (
/* html */
`
<p ${this.getClasses(["buttons", "mt-4"], props.classList)}>
${this.#getButtons(props.buttons)}
</p>
`
);
return buttons;
} else
return "";
}
/**
* Render the component
*/
render() {
console.error("Nothing to render");
}
/**
* Renders the component when inserted into the DOM
*/
connectedCallback() {
this.render();
}
disconnectedCallback() {
let buttons = this.querySelectorAll("button");
if (buttons.length > 0) {
buttons.forEach((item) => {
item.removeEventListener("click", this);
});
}
}
};
customElements.define("app-element", AppElement);
// node_modules/@customerjourney/cj-core/src/components/AppPage.js
var AppPage = class extends AppElement {
#default = {
events: {
viewedElement: void 0,
leavingApp: false,
leavedApp: false
},
classList: []
};
/**
* constructor description
* @param {Object} data - The properties, animations, events and head of the page & context
* @param {String} template - The layout of the funnel page components
*/
constructor(data = {}, template = null) {
super();
this.data = data;
this.template = template;
try {
let app = document.querySelector("#app");
app.innerHTML = "";
app.appendChild(this);
} catch (error) {
console.error('The element with id "app" does not exist to insert the element "app-page".', error);
}
}
/**
* Disable browser cache
*/
#noCache() {
let head = document.getElementsByTagName("head")[0];
let cacheControl = document.createElement("meta");
cacheControl.name = "Cache-Control";
cacheControl.content = "no-cache, no-store, must-revalidate";
head.appendChild(cacheControl);
let pragma = document.createElement("meta");
pragma.name = "Pragma";
pragma.content = "no-cache";
head.appendChild(pragma);
let expires = document.createElement("meta");
expires.name = "Expires";
expires.content = "0";
head.appendChild(expires);
}
#setSEO() {
let props = this.data.props;
let context = this.data.context;
let head = document.getElementsByTagName("head")[0];
if (document.title != void 0) {
document.title = props.title[context.lang];
let description = document.querySelector("meta[name=description]");
if (description === null) {
let meta = document.createElement("meta");
meta.name = "description";
meta.content = props.description[context.lang];
head.appendChild(meta);
} else {
description.content = props.description[context.lang];
}
let metaTitle = document.createElement("meta");
metaTitle.setAttribute("property", "og:title");
metaTitle.content = props.title[context.lang];
head.appendChild(metaTitle);
let metaDescription = document.createElement("meta");
metaDescription.setAttribute("property", "og:description");
metaDescription.content = props.description[context.lang];
head.appendChild(metaDescription);
let metaType = document.createElement("meta");
metaType.setAttribute("property", "og:type");
metaType.content = props.type;
head.appendChild(metaType);
let metaImage = document.createElement("meta");
metaImage.setAttribute("property", "og:image");
metaImage.content = props.image;
head.appendChild(metaImage);
let twitterCard = document.createElement("meta");
twitterCard.name = "twitter:card";
twitterCard.content = "summary_large_image";
head.appendChild(twitterCard);
let twitterTitle = document.createElement("meta");
twitterTitle.name = "twitter:title";
twitterTitle.content = props.title[context.lang];
head.appendChild(twitterTitle);
let twitterDescription = document.createElement("meta");
twitterDescription.name = "twitter:description";
twitterDescription.content = props.title[context.lang];
head.appendChild(twitterDescription);
let twitterImage = document.createElement("meta");
twitterImage.name = "twitter:image";
twitterImage.content = props.image;
head.appendChild(twitterImage);
let cannonical = document.createElement("link");
cannonical.setAttribute("rel", "canonical");
cannonical.setAttribute("href", props.canonical);
head.appendChild(cannonical);
}
}
/**
* Add the page body css
*/
#setStyles() {
if (this.data.props?.classList?.length > 0) {
document.body.classList.add(...this.data.props.classList);
}
}
/**
*
* @param {Object} props
* @param {Object} context
* @returns
*/
#setContext(props, context = {}) {
if (props != void 0) {
props.context = context;
}
return props;
}
/**
* Update the props to each of the components
*/
loadData() {
this.data.props = this.initState(this.#default, this.data.props);
if (this.data.props.id != void 0) {
this.getAttribute("id") || this.setAttribute("id", this.data.props.id || `component-${Math.floor(Math.random() * 100)}`);
this.#setSEO();
this.#setStyles();
if (this.state.Cache === false) {
this.#noCache();
}
this.data.props.components.forEach((el) => {
try {
this.querySelector(`#${el.id}`).updateState(this.#setContext(el, this.data.context));
} catch (error) {
console.error(`The Element with id ${el.id} does not exist or is not an object of type AppElement`, error);
}
});
let loading = document.querySelector(".pageloader");
if (loading != null) {
loading.classList.remove("is-active");
}
}
}
/**
*
* @param {String} webhookUrl - The webhook URI
* @param {Object} data - The parameters that are sent in the JSON body of the webhook
* @param {Object} [context={}] - The context of the app
* @param {Boolean} [render=true] - true to render the page, false to just receive the data
* @returns {Object} - If render is false it returns the body of the webhook response, if render is true it renders the page with the data from the response body.
*
*/
async sendWebhook(webhookUrl, data, context = {}, render2 = true) {
const options = {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
};
let loading = document.querySelector(".pageloader");
if (loading != null) {
loading.classList.add("is-active");
}
try {
const response = await fetch(webhookUrl, options);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const responseData = await response.json();
if (render2 == true) {
try {
responseData.context = context;
this.data = responseData;
this.loadData();
} catch (error) {
console.error('Cannot load data to render "app-page" components', error);
}
} else {
return responseData;
}
} catch (error) {
console.error("Error:", error);
}
}
/**
* Detects if the component has already been viewed
* @param {HTMLElement} el
* @returns { Boolean} - True if the element was viewed in its entirety, false if it is not yet visible
*/
#isInViewport(el) {
const rect = el.getBoundingClientRect();
return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
}
/**
* Add the events that the page responds to
*/
#addEvents() {
if (Array.isArray(this.data.props.events.trackViewed)) {
document.addEventListener("scroll", () => {
this.data.props.events.trackViewed.forEach((id) => {
var el = this.querySelector(`#${id}`);
if (this.#isInViewport(el) == true) {
let viewedElement = new CustomEvent("viewedelement", {
detail: { viewed: el.id },
bubbles: true,
composed: true
});
this.dispatchEvent(viewedElement);
}
});
}, {
passive: true
});
}
if (this.data.props?.events?.leavingapp === true) {
let leavingApp = new CustomEvent("leavingapp", {
detail: { source: this.data.props.id },
bubbles: true,
composed: true
});
document.addEventListener("mouseleave", (e) => {
if (e.clientY <= 0 || e.clientX <= 0 || (e.clientX >= window.innerWidth || e.clientY >= window.innerHeight)) {
this.dispatchEvent(leavingApp);
}
});
}
if (this.data.props?.events?.leavedapp === true) {
let leavedApp = new CustomEvent("leavedapp", {
detail: { source: this.data.props.id },
bubbles: true,
composed: true
});
document.addEventListener("visibilitychange", () => {
if (document.visibilityState === "hidden") {
this.dispatchEvent(leavedApp);
}
});
}
}
/**
* Add listeners to each of the events
* @param {Array} events - List of all events to follow generated within the funnel
*/
eventsToListen(events2, handleEvents) {
events2.forEach((value, index) => {
this.addEventListener(value, handleEvents);
});
}
/**
* Fires on connectedCallback to render funnel page
*/
render() {
if (this.template === null) {
console.error("No component template provided");
} else {
this.innerHTML = this.template;
if (this.data.props?.id != void 0) {
this.loadData(this.data);
this.#addEvents();
}
}
}
};
customElements.define("app-page", AppPage);
// node_modules/@customerjourney/cj-core/src/components/PageFooter.js
var PageFooter = class extends AppElement {
#default = {};
constructor(props = {}) {
super();
this.state = this.initState(this.#default, props);
this.getAttribute("id") || this.setAttribute("id", this.state.id || `component-${Math.floor(Math.random() * 100)}`);
}
render() {
this.innerHTML = /* html */
`
<footer ${this.getClasses(["footer"], this.state.classList)} >
<div class="content has-text-centered">
<img src="${this.state.context?.theme === "light" ? this.state.brand?.src : this.state.brand?.srcDark === void 0 ? this.state.brand?.src : this.state.brand?.srcDark}" style="max-width:200px">
<p>${this.state.content?.text[this.state.context.lang]}</p>
<p><a href="${this.state.privacyPolicy?.url}">${this.state.privacyPolicy?.text === void 0 ? "" : this.state.privacyPolicy?.text[this.state.context.lang]}</a></p>
</div>
<div class="has-text-left" >
<h4>Powered by <a href="https://www.conference.com.mx/comercializacion-digital">Conference</a></h4>
</div>
</footer>
`;
}
};
customElements.define("page-footer", PageFooter);
// node_modules/@fortawesome/fontawesome-svg-core/index.mjs
function _defineProperty(e, r2, t2) {
return (r2 = _toPropertyKey(r2)) in e ? Object.defineProperty(e, r2, {
value: t2,
enumerable: true,
configurable: true,
writable: true
}) : e[r2] = t2, e;
}
function ownKeys(e, r2) {
var t2 = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var o2 = Object.getOwnPropertySymbols(e);
r2 && (o2 = o2.filter(function(r3) {
return Object.getOwnPropertyDescriptor(e, r3).enumerable;
})), t2.push.apply(t2, o2);
}
return t2;
}
function _objectSpread2(e) {
for (var r2 = 1; r2 < arguments.length; r2++) {
var t2 = null != arguments[r2] ? arguments[r2] : {};
r2 % 2 ? ownKeys(Object(t2), true).forEach(function(r3) {
_defineProperty(e, r3, t2[r3]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t2)) : ownKeys(Object(t2)).forEach(function(r3) {
Object.defineProperty(e, r3, Object.getOwnPropertyDescriptor(t2, r3));
});
}
return e;
}
function _toPrimitive(t2, r2) {
if ("object" != typeof t2 || !t2)
return t2;
var e = t2[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t2, r2 || "default");
if ("object" != typeof i)
return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r2 ? String : Number)(t2);
}
function _toPropertyKey(t2) {
var i = _toPrimitive(t2, "string");
return "symbol" == typeof i ? i : i + "";
}
var noop = () => {
};
var _WINDOW = {};
var _DOCUMENT = {};
var _MUTATION_OBSERVER = null;
var _PERFORMANCE = {
mark: noop,
measure: noop
};
try {
if (typeof window !== "undefined")
_WINDOW = window;
if (typeof document !== "undefined")
_DOCUMENT = document;
if (typeof MutationObserver !== "undefined")
_MUTATION_OBSERVER = MutationObserver;
if (typeof performance !== "undefined")
_PERFORMANCE = performance;
} catch (e) {
}
var {
userAgent = ""
} = _WINDOW.navigator || {};
var WINDOW = _WINDOW;
var DOCUMENT = _DOCUMENT;
var MUTATION_OBSERVER = _MUTATION_OBSERVER;
var PERFORMANCE = _PERFORMANCE;
var IS_BROWSER = !!WINDOW.document;
var IS_DOM = !!DOCUMENT.documentElement && !!DOCUMENT.head && typeof DOCUMENT.addEventListener === "function" && typeof DOCUMENT.createElement === "function";
var IS_IE = ~userAgent.indexOf("MSIE") || ~userAgent.indexOf("Trident/");
var p = /fa(s|r|l|t|d|dr|dl|dt|b|k|kd|ss|sr|sl|st|sds|sdr|sdl|sdt)?[\-\ ]/;
var g = /Font ?Awesome ?([56 ]*)(Solid|Regular|Light|Thin|Duotone|Brands|Free|Pro|Sharp Duotone|Sharp|Kit)?.*/i;
var S = {
classic: {
fa: "solid",
fas: "solid",
"fa-solid": "solid",
far: "regular",
"fa-regular": "regular",
fal: "light",
"fa-light": "light",
fat: "thin",
"fa-thin": "thin",
fab: "brands",
"fa-brands": "brands"
},
duotone: {
fa: "solid",
fad: "solid",
"fa-solid": "solid",
"fa-duotone": "solid",
fadr: "regular",
"fa-regular": "regular",
fadl: "light",
"fa-light": "light",
fadt: "thin",
"fa-thin": "thin"
},
sharp: {
fa: "solid",
fass: "solid",
"fa-solid": "solid",
fasr: "regular",
"fa-regular": "regular",
fasl: "light",
"fa-light": "light",
fast: "thin",
"fa-thin": "thin"
},
"sharp-duotone": {
fa: "solid",
fasds: "solid",
"fa-solid": "solid",
fasdr: "regular",
"fa-regular": "regular",
fasdl: "light",
"fa-light": "light",
fasdt: "thin",
"fa-thin": "thin"
}
};
var A = {
GROUP: "duotone-group",
SWAP_OPACITY: "swap-opacity",
PRIMARY: "primary",
SECONDARY: "secondary"
};
var P = ["fa-classic", "fa-duotone", "fa-sharp", "fa-sharp-duotone"];
var s = "classic";
var t = "duotone";
var r = "sharp";
var o = "sharp-duotone";
var L = [s, t, r, o];
var G = {
classic: {
900: "fas",
400: "far",
normal: "far",
300: "fal",
100: "fat"
},
duotone: {
900: "fad",
400: "fadr",
300: "fadl",
100: "fadt"
},
sharp: {
900: "fass",
400: "fasr",
300: "fasl",
100: "fast"
},
"sharp-duotone": {
900: "fasds",
400: "fasdr",
300: "fasdl",
100: "fasdt"
}
};
var lt = {
"Font Awesome 6 Free": {
900: "fas",
400: "far"
},
"Font Awesome 6 Pro": {
900: "fas",
400: "far",
normal: "far",
300: "fal",
100: "fat"
},
"Font Awesome 6 Brands": {
400: "fab",
normal: "fab"
},
"Font Awesome 6 Duotone": {
900: "fad",
400: "fadr",
normal: "fadr",
300: "fadl",
100: "fadt"
},
"Font Awesome 6 Sharp": {
900: "fass",
400: "fasr",
normal: "fasr",
300: "fasl",
100: "fast"
},
"Font Awesome 6 Sharp Duotone": {
900: "fasds",
400: "fasdr",
normal: "fasdr",
300: "fasdl",
100: "fasdt"
}
};
var pt = /* @__PURE__ */ new Map([["classic", {
defaultShortPrefixId: "fas",
defaultStyleId: "solid",
styleIds: ["solid", "regular", "light", "thin", "brands"],
futureStyleIds: [],
defaultFontWeight: 900
}], ["sharp", {
defaultShortPrefixId: "fass",
defaultStyleId: "solid",
styleIds: ["solid", "regular", "light", "thin"],
futureStyleIds: [],
defaultFontWeight: 900
}], ["duotone", {
defaultShortPrefixId: "fad",
defaultStyleId: "solid",
styleIds: ["solid", "regular", "light", "thin"],
futureStyleIds: [],
defaultFontWeight: 900
}], ["sharp-duotone", {
defaultShortPrefixId: "fasds",
defaultStyleId: "solid",
styleIds: ["solid", "regular", "light", "thin"],
futureStyleIds: [],
defaultFontWeight: 900
}]]);
var xt = {
classic: {
solid: "fas",
regular: "far",
light: "fal",
thin: "fat",
brands: "fab"
},
duotone: {
solid: "fad",
regular: "fadr",
light: "fadl",
thin: "fadt"
},
sharp: {
solid: "fass",
regular: "fasr",
light: "fasl",
thin: "fast"
},
"sharp-duotone": {
solid: "fasds",
regular: "fasdr",
light: "fasdl",
thin: "fasdt"
}
};
var Ft = ["fak", "fa-kit", "fakd", "fa-kit-duotone"];
var St = {
kit: {
fak: "kit",
"fa-kit": "kit"
},
"kit-duotone": {
fakd: "kit-duotone",
"fa-kit-duotone": "kit-duotone"
}
};
var At = ["kit"];
var Ct = {
kit: {
"fa-kit": "fak"
},
"kit-duotone": {
"fa-kit-duotone": "fakd"
}
};
var Lt = ["fak", "fakd"];
var Wt = {
kit: {
fak: "fa-kit"
},
"kit-duotone": {
fakd: "fa-kit-duotone"
}
};
var Et = {
kit: {
kit: "fak"
},
"kit-duotone": {
"kit-duotone": "fakd"
}
};
var t$1 = {
GROUP: "duotone-group",
SWAP_OPACITY: "swap-opacity",
PRIMARY: "primary",
SECONDARY: "secondary"
};
var r$1 = ["fa-classic", "fa-duotone", "fa-sharp", "fa-sharp-duotone"];
var bt$1 = ["fak", "fa-kit", "fakd", "fa-kit-duotone"];
var Yt = {
"Font Awesome Kit": {
400: "fak",
normal: "fak"
},
"Font Awesome Kit Duotone": {
400: "fakd",
normal: "fakd"
}
};
var ua = {
classic: {
"fa-brands": "fab",
"fa-duotone": "fad",
"fa-light": "fal",
"fa-regular": "far",
"fa-solid": "fas",
"fa-thin": "fat"
},
duotone: {
"fa-regular": "fadr",
"fa-light": "fadl",
"fa-thin": "fadt"
},
sharp: {
"fa-solid": "fass",
"fa-regular": "fasr",
"fa-light": "fasl",
"fa-thin": "fast"
},
"sharp-duotone": {
"fa-solid": "fasds",
"fa-regular": "fasdr",
"fa-light": "fasdl",
"fa-thin": "fasdt"
}
};
var I$1 = {
classic: ["fas", "far", "fal", "fat", "fad"],
duotone: ["fadr", "fadl", "fadt"],
sharp: ["fass", "fasr", "fasl", "fast"],
"sharp-duotone": ["fasds", "fasdr", "fasdl", "fasdt"]
};
var ga = {
classic: {
fab: "fa-brands",
fad: "fa-duotone",
fal: "fa-light",
far: "fa-regular",
fas: "fa-solid",
fat: "fa-thin"
},
duotone: {
fadr: "fa-regular",
fadl: "fa-light",
fadt: "fa-thin"
},
sharp: {
fass: "fa-solid",
fasr: "fa-regular",
fasl: "fa-light",
fast: "fa-thin"
},
"sharp-duotone": {
fasds: "fa-solid",
fasdr: "fa-regular",
fasdl: "fa-light",
fasdt: "fa-thin"
}
};
var x = ["fa-solid", "fa-regular", "fa-light", "fa-thin", "fa-duotone", "fa-brands"];
var Ia = ["fa", "fas", "far", "fal", "fat", "fad", "fadr", "fadl", "fadt", "fab", "fass", "fasr", "fasl", "fast", "fasds", "fasdr", "fasdl", "fasdt", ...r$1, ...x];
var m$1 = ["solid", "regular", "light", "thin", "duotone", "brands"];
var c$1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var F$1 = c$1.concat([11, 12, 13, 14, 15, 16, 17, 18, 19, 20]);
var ma = [...Object.keys(I$1), ...m$1, "2xs", "xs", "sm", "lg", "xl", "2xl", "beat", "border", "fade", "beat-fade", "bounce", "flip-both", "flip-horizontal", "flip-vertical", "flip", "fw", "inverse", "layers-counter", "layers-text", "layers", "li", "pull-left", "pull-right", "pulse", "rotate-180", "rotate-270", "rotate-90", "rotate-by", "shake", "spin-pulse", "spin-reverse", "spin", "stack-1x", "stack-2x", "stack", "ul", t$1.GROUP, t$1.SWAP_OPACITY, t$1.PRIMARY, t$1.SECONDARY].concat(c$1.map((a) => "".concat(a, "x"))).concat(F$1.map((a) => "w-".concat(a)));
var wa = {
"Font Awesome 5 Free": {
900: "fas",
400: "far"
},
"Font Awesome 5 Pro": {
900: "fas",
400: "far",
normal: "far",
300: "fal"
},
"Font Awesome 5 Brands": {
400: "fab",
normal: "fab"
},
"Font Awesome 5 Duotone": {
900: "fad"
}
};
var NAMESPACE_IDENTIFIER = "___FONT_AWESOME___";
var UNITS_IN_GRID = 16;
var DEFAULT_CSS_PREFIX = "fa";
var DEFAULT_REPLACEMENT_CLASS = "svg-inline--fa";
var DATA_FA_I2SVG = "data-fa-i2svg";
var DATA_FA_PSEUDO_ELEMENT = "data-fa-pseudo-element";
var DATA_FA_PSEUDO_ELEMENT_PENDING = "data-fa-pseudo-element-pending";
var DATA_PREFIX = "data-prefix";
var DATA_ICON = "data-icon";
var HTML_CLASS_I2SVG_BASE_CLASS = "fontawesome-i2svg";
var MUTATION_APPROACH_ASYNC = "async";
var TAGNAMES_TO_SKIP_FOR_PSEUDOELEMENTS = ["HTML", "HEAD", "STYLE", "SCRIPT"];
var PRODUCTION = (() => {
try {
return false;
} catch (e$$1) {
return false;
}
})();
function familyProxy(obj) {
return new Proxy(obj, {
get(target, prop) {
return prop in target ? target[prop] : target[s];
}
});
}
var _PREFIX_TO_STYLE = _objectSpread2({}, S);
_PREFIX_TO_STYLE[s] = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, {
"fa-duotone": "duotone"
}), S[s]), St["kit"]), St["kit-duotone"]);
var PREFIX_TO_STYLE = familyProxy(_PREFIX_TO_STYLE);
var _STYLE_TO_PREFIX = _objectSpread2({}, xt);
_STYLE_TO_PREFIX[s] = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, {
duotone: "fad"
}), _STYLE_TO_PREFIX[s]), Et["kit"]), Et["kit-duotone"]);
var STYLE_TO_PREFIX = familyProxy(_STYLE_TO_PREFIX);
var _PREFIX_TO_LONG_STYLE = _objectSpread2({}, ga);
_PREFIX_TO_LONG_STYLE[s] = _objectSpread2(_objectSpread2({}, _PREFIX_TO_LONG_STYLE[s]), Wt["kit"]);
var PREFIX_TO_LONG_STYLE = familyProxy(_PREFIX_TO_LONG_STYLE);
var _LONG_STYLE_TO_PREFIX = _objectSpread2({}, ua);
_LONG_STYLE_TO_PREFIX[s] = _objectSpread2(_objectSpread2({}, _LONG_STYLE_TO_PREFIX[s]), Ct["kit"]);
var LONG_STYLE_TO_PREFIX = familyProxy(_LONG_STYLE_TO_PREFIX);
var ICON_SELECTION_SYNTAX_PATTERN = p;
var LAYERS_TEXT_CLASSNAME = "fa-layers-text";
var FONT_FAMILY_PATTERN = g;
var _FONT_WEIGHT_TO_PREFIX = _objectSpread2({}, G);
var FONT_WEIGHT_TO_PREFIX = familyProxy(_FONT_WEIGHT_TO_PREFIX);
var ATTRIBUTES_WATCHED_FOR_MUTATION = ["class", "data-prefix", "data-icon", "data-fa-transform", "data-fa-mask"];
var DUOTONE_CLASSES = A;
var RESERVED_CLASSES = [...At, ...ma];
var initial = WINDOW.FontAwesomeConfig || {};
function getAttrConfig(attr) {
var element = DOCUMENT.querySelector("script[" + attr + "]");
if (element) {
return element.getAttribute(attr);
}
}
function coerce(val) {
if (val === "")
return true;
if (val === "false")
return false;
if (val === "true")
return true;
return val;
}
if (DOCUMENT && typeof DOCUMENT.querySelector === "function") {
const attrs = [["data-family-prefix", "familyPrefix"], ["data-css-prefix", "cssPrefix"], ["data-family-default", "familyDefault"], ["data-style-default", "styleDefault"], ["data-replacement-class", "replacementClass"], ["data-auto-replace-svg", "autoReplaceSvg"], ["data-auto-add-css", "autoAddCss"], ["data-auto-a11y", "autoA11y"], ["data-search-pseudo-elements", "searchPseudoElements"], ["data-observe-mutations", "observeMutations"], ["data-mutate-approach", "mutateApproach"], ["data-keep-original-source", "keepOriginalSource"], ["data-measure-performance", "measurePerformance"], ["data-show-missing-icons", "showMissingIcons"]];
attrs.forEach((_ref) => {
let [attr, key] = _ref;
const val = coerce(getAttrConfig(attr));
if (val !== void 0 && val !== null) {
initial[key] = val;
}
});
}
var _default = {
styleDefault: "solid",
familyDefault: s,
cssPrefix: DEFAULT_CSS_PREFIX,
replacementClass: DEFAULT_REPLACEMENT_CLASS,
autoReplaceSvg: true,
autoAddCss: true,
autoA11y: true,
searchPseudoElements: false,
observeMutations: true,
mutateApproach: "async",
keepOriginalSource: true,
measurePerformance: false,
showMissingIcons: true
};
if (initial.familyPrefix) {
initial.cssPrefix = initial.familyPrefix;
}
var _config = _objectSpread2(_objectSpread2({}, _default), initial);
if (!_config.autoReplaceSvg)
_config.observeMutations = false;
var config = {};
Object.keys(_default).forEach((key) => {
Object.defineProperty(config, key, {
enumerable: true,
set: function(val) {
_config[key] = val;
_onChangeCb.forEach((cb) => cb(config));
},
get: function() {
return _config[key];
}
});
});
Object.defineProperty(config, "familyPrefix", {
enumerable: true,
set: function(val) {
_config.cssPrefix = val;
_onChangeCb.forEach((cb) => cb(config));
},
get: function() {
return _config.cssPrefix;
}
});
WINDOW.FontAwesomeConfig = config;
var _onChangeCb = [];
function onChange(cb) {
_onChangeCb.push(cb);
return () => {
_onChangeCb.splice(_onChangeCb.indexOf(cb), 1);
};
}
var d$2 = UNITS_IN_GRID;
var meaninglessTransform = {
size: 16,
x: 0,
y: 0,
rotate: 0,
flipX: false,
flipY: false
};
function insertCss(css2) {
if (!css2 || !IS_DOM) {
return;
}
const style = DOCUMENT.createElement("style");
style.setAttribute("type", "text/css");
style.innerHTML = css2;
const headChildren = DOCUMENT.head.childNodes;
let beforeChild = null;
for (let i = headChildren.length - 1; i > -1; i--) {
const child = headChildren[i];
const tagName = (child.tagName || "").toUpperCase();
if (["STYLE", "LINK"].indexOf(tagName) > -1) {
beforeChild = child;
}
}
DOCUMENT.head.insertBefore(style, beforeChild);
return css2;
}
var idPool = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
function nextUniqueId() {
let size = 12;
let id = "";
while (size-- > 0) {
id += idPool[Math.random() * 62 | 0];
}
return id;
}
function toArray(obj) {
const array = [];
for (let i = (obj || []).length >>> 0; i--; ) {
array[i] = obj[i];
}
return array;
}
function classArray(node) {
if (node.classList) {
return toArray(node.classList);
} else {
return (node.getAttribute("class") || "").split(" ").filter((i) => i);
}
}
function htmlEscape(str) {
return "".concat(str).replace(/&/g, "&").replace(/"/g, """).replace(/'/g, "'").replace(/</g, "<").replace(/>/g, ">");
}
function joinAttributes(attributes) {
return Object.keys(attributes || {}).reduce((acc, attributeName) => {
return acc + "".concat(attributeName, '="').concat(htmlEscape(attributes[attributeName]), '" ');
}, "").trim();
}
function joinStyles(styles2) {
return Object.keys(styles2 || {}).reduce((acc, styleName) => {
return acc + "".concat(styleName, ": ").concat(styles2[styleName].trim(), ";");
}, "");
}
function transformIsMeaningful(transform) {
return transform.size !== meaninglessTransform.size || transform.x !== meaninglessTransform.x || transform.y !== meaninglessTransform.y || transform.rotate !== meaninglessTransform.rotate || transform.flipX || transform.flipY;
}
function transformForSvg(_ref) {
let {
transform,
containerWidth,
iconWidth
} = _ref;
const outer = {
transform: "translate(".concat(containerWidth / 2, " 256)")
};
const innerTranslate = "translate(".concat(transform.x * 32, ", ").concat(transform.y * 32, ") ");
const innerScale = "scale(".concat(transform.size / 16 * (transform.flipX ? -1 : 1), ", ").concat(transform.size / 16 * (transform.flipY ? -1 : 1), ") ");
const innerRotate = "rotate(".concat(transform.rotate, " 0 0)");
const inner = {
transform: "".concat(innerTranslate, " ").concat(innerScale, " ").concat(innerRotate)
};
const path = {
transform: "translate(".concat(iconWidth / 2 * -1, " -256)")
};
return {
outer,
inner,
path
};
}
function transformForCss(_ref2) {
let {
transform,
width = UNITS_IN_GRID,
height = UNITS_IN_GRID,
startCentered = false
} = _ref2;
let val = "";
if (startCentered && IS_IE) {
val += "translate(".concat(transform.x / d$2 - width / 2, "em, ").concat(transform.y / d$2 - height / 2, "em) ");
} else if (startCentered) {
val += "translate(calc(-50% + ".concat(transform.x / d$2, "em), calc(-50% + ").concat(transform.y / d$2, "em)) ");
} else {
val += "translate(".concat(transform.x / d$2, "em, ").concat(transform.y / d$2, "em) ");
}
val += "scale(".concat(transform.size / d$2 * (transform.flipX ? -1 : 1), ", ").concat(transform.size / d$2 * (transform.flipY ? -1 : 1), ") ");
val += "rotate(".concat(transform.rotate, "deg) ");
return val;
}
var baseStyles = ':root, :host {\n --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";\n --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";\n --fa-font-light: normal 300 1em/1 "Font Awesome 6 Pro";\n --fa-font-thin: normal 100 1em/1 "Font Awesome 6 Pro";\n --fa-font-duotone: normal 900 1em/1 "Font Awesome 6 Duotone";\n --fa-font-duotone-regular: normal 400 1em/1 "Font Awesome 6 Duotone";\n --fa-font-duotone-light: normal 300 1em/1 "Font Awesome 6 Duotone";\n --fa-font-duotone-thin: normal 100 1em/1 "Font Awesome 6 Duotone";\n --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";\n --fa-font-sharp-solid: normal 900 1em/1 "Font Awesome 6 Sharp";\n --fa-font-sharp-regular: normal 400 1em/1 "Font Awesome 6 Sharp";\n --fa-font-sharp-light: normal 300 1em/1 "Font Awesome 6 Sharp";\n --fa-font-sharp-thin: normal 100 1em/1 "Font Awesome 6 Sharp";\n --fa-font-sharp-duotone-solid: normal 900 1em/1 "Font Awesome 6 Sharp Duotone";\n --fa-font-sharp-duotone-regular: normal 400 1em/1 "Font Awesome 6 Sharp Duotone";\n --fa-font-sharp-duotone-light: normal 300 1em/1 "Font Awesome 6 Sharp Duotone";\n --fa-font-sharp-duotone-thin: normal 100 1em/1 "Font Awesome 6 Sharp Duotone";\n}\n\nsvg:not(:root).svg-inline--fa, svg:not(:host).svg-inline--fa {\n overflow: visible;\n box-sizing: content-box;\n}\n\n.svg-inline--fa {\n display: var(--fa-display, inline-block);\n height: 1em;\n overflow: visible;\n vertical-align: -0.125em;\n}\n.svg-inline--fa.fa-2xs {\n vertical-align: 0.1em;\n}\n.svg-inline--fa.fa-xs {\n vertical-align: 0em;\n}\n.svg-inline--fa.fa-sm {\n vertical-align: -0.0714285705em;\n}\n.svg-inline--fa.fa-lg {\n vertical-align: -0.2em;\n}\n.svg-inline--fa.fa-xl {\n vertical-align: -0.25em;\n}\n.svg-inline--fa.fa-2xl {\n vertical-align: -0.3125em;\n}\n.svg-inline--fa.fa-pull-left {\n margin-right: var(--fa-pull-margin, 0.3em);\n width: auto;\n}\n.svg-inline--fa.fa-pull-right {\n margin-left: var(--fa-pull-margin, 0.3em);\n width: auto;\n}\n.svg-inline--fa.fa-li {\n width: var(--fa-li-width, 2em);\n top: 0.25em;\n}\n.svg-inline--fa.fa-fw {\n width: var(--fa-fw-width, 1.25em);\n}\n\n.fa-layers svg.svg-inline--fa {\n bottom: 0;\n left: 0;\n margin: auto;\n position: absolute;\n right: 0;\n top: 0;\n}\n\n.fa-layers-counter, .fa-layers-text {\n display: inline-block;\n position: absolute;\n text-align: center;\n}\n\n.fa-layers {\n display: inline-block;\n height: 1em;\n position: relative;\n text-align: center;\n vertical-align: -0.125em;\n width: 1em;\n}\n.fa-layers svg.svg-inline--fa {\n transform-origin: center center;\n}\n\n.fa-layers-text {\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n transform-origin: center center;\n}\n\n.fa-layers-counter {\n background-color: var(--fa-counter-background-color, #ff253a);\n border-radius: var(--fa-counter-border-radius, 1em);\n box-sizing: border-box;\n color: var(--fa-inverse, #fff);\n line-height: var(--fa-counter-line-height, 1);\n max-width: var(--fa-counter-max-width, 5em);\n min-width: var(--fa-counter-min-width, 1.5em);\n overflow: hidden;\n padding: var(--fa-counter-padding, 0.25em 0.5em);\n right: var(--fa-right, 0);\n text-overflow: ellipsis;\n top: var(--fa-top, 0);\n transform: scale(var(--fa-counter-scale, 0.25));\n transform-origin: top right;\n}\n\n.fa-layers-bottom-right {\n bottom: var(--fa-bottom, 0);\n right: var(--fa-right, 0);\n top: auto;\n transform: scale(var(--fa-layers-scale, 0.25));\n transform-origin: bottom right;\n}\n\n.fa-layers-bottom-left {\n bottom: var(--fa-bottom, 0);\n left: var(--fa-left, 0);\n right: auto;\n top: auto;\n transform: scale(var(--fa-layers-scale, 0.25));\n transform-origin: bottom left;\n}\n\n.fa-layers-top-right {\n top: var(--fa-top, 0);\n right: var(--fa-right, 0);\n transform: scale(var(--fa-layers-scale, 0.25));\n transform-origin: top right;\n}\n\n.fa-layers-top-left {\n left: var(--fa-left, 0);\n right: auto;\n top: var(--fa-top, 0);\n transform: scale(var(--fa-layers-scale, 0.25));\n transform-origin: top left;\n}\n\n.fa-1x {\n font-size: 1em;\n}\n\n.fa-2x {\n font-size: 2em;\n}\n\n.fa-3x {\n font-size: 3em;\n}\n\n.fa-4x {\n font-size: 4em;\n}\n\n.fa-5x {\n font-size: 5em;\n}\n\n.fa-6x {\n font-size: 6em;\n}\n\n.fa-7x {\n font-size: 7em;\n}\n\n.fa-8x {\n font-size: 8em;\n}\n\n.fa-9x {\n font-size: 9em;\n}\n\n.fa-10x {\n font-size: 10em;\n}\n\n.fa-2xs {\n font-size: 0.625em;\n line-height: 0.1em;\n vertical-align: 0.225em;\n}\n\n.fa-xs {\n font-size: 0.75em;\n line-height: 0.0833333337em;\n vertical-align: 0.125em;\n}\n\n.fa-sm {\n font-size: 0.875em;\n line-height: 0.0714285718em;\n vertical-align: 0.0535714295em;\n}\n\n.fa-lg {\n font-size: 1.25em;\n line-height: 0.05em;\n vertical-align: -0.075em;\n}\n\n.fa-xl {\n font-size: 1.5em;\n line-height: 0.0416666682em;\n vertical-align: -0.125em;\n}\n\n.fa-2xl {\n font-size: 2em;\n line-height: 0.03125em;\n vertical-align: -0.1875em;\n}\n\n.fa-fw {\n text-align: center;\n width: 1.25em;\n}\n\n.fa-ul {\n list-style-type: none;\n margin-left: var(--fa-li-margin, 2.5em);\n padding-left: 0;\n}\n.fa-ul > li {\n position: relative;\n}\n\n.fa-li {\n left: calc(-1 * var(--fa-li-width, 2em));\n position: absolute;\n text-align: center;\n width: var(--fa-li-width, 2em);\n line-height: inherit;\n}\n\n.fa-border {\n border-color: var(--fa-border-color, #eee);\n border-radius: var(--fa-border-radius, 0.1em);\n border-style: var(--fa-border-style, solid);\n border-width: var(--fa-border-width, 0.08em);\n padding: var(--fa-border-padding, 0.2em 0.25em 0.15em);\n}\n\n.fa-pull-left {\n float: left;\n margin-right: var(--fa-pull-margin, 0.3em);\n}\n\n.fa-pull-right {\n float: right;\n margin-left: var(--fa-pull-margin, 0.3em);\n}\n\n.fa-beat {\n animation-name: fa-beat;\n animation-delay: var(--fa-animation-delay, 0s);\n animation-direction: var(--fa-animation-direction, normal);\n animation-duration: var(--fa-animation-duration, 1s);\n animation-iteration-count: var(--fa-animation-iteration-count, infinite);\n animation-timing-function: var(--fa-animation-timing, ease-in-out);\n}\n\n.fa-bounce {\n animation-name: fa-bounce;\n animation-delay: var(--fa-animation-delay, 0s);\n animation-direction: var(--fa-animation-direction, normal);\n animation-duration: var(--fa-animation-duration, 1s);\n animation-iteration-count: var(--fa-animation-iteration-count, infinite);\n animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));\n}\n\n.fa-fade {\n animation-name: fa-fade;\n animation-delay: var(--fa-animation-delay, 0s);\n animation-direction: var(--fa-animation-direction, normal);\n animation-duration: var(--fa-animation-duration, 1s);\n animation-iteration-count: var(--fa-animation-iteration-count, infinite);\n animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));\n}\n\n.fa-beat-fade {\n animation-name: fa-beat-fade;\n animation-delay: var(--fa-animation-delay, 0s);\n animation-direction: var(--fa-animation-direction, normal);\n animation-duration: var(--fa-animation-duration, 1s);\n animation-iteration-count: var(--fa-animation-iteration-count, infinite);\n animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));\n}\n\n.fa-flip {\n animation-name: fa-flip;\n animation-delay: var(--fa-animation-delay, 0s);\n animation-direction: var(--fa-animation-direction, normal);\n animation-duration: var(--fa-animation-duration, 1s);\n animation-iteration-count: var(--fa-animation-iteration-count, infinite);\n animation-timing-function: var(--fa-animation-timing, ease-in-out);\n}\n\n.fa-shake {\n animation-name: fa-shake;\n animation-delay: var(--fa-animation-delay, 0s);\n animation-direction: var(--fa-animation-direction, normal);\n animation-duration: var(--fa-animation-duration, 1s);\n animation-iteration-count: var(--fa-animation-iteration-count, infinite);\n animation-timing-function: var(--fa-animation-timing, linear);\n}\n\n.fa-spin {\n animation-name: fa-spin;\n animation-delay: var(--fa-animation-delay, 0s);\n animation-direction: var(--fa-animation-direction, normal);\n animation-duration: var(--fa-animation-duration, 2s);\n animation-iteration-count: var(--fa-animation-iteration-count, infinite);\n animation-timing-function: var(--fa-animation-timing, linear);\n}\n\n.fa-spin-reverse {\n --fa-animation-direction: reverse;\n}\n\n.fa-pulse,\n.fa-spin-pulse {\n animation-name: fa-spin;\n animation-direction: var(--fa-animation-direction, normal);\n animation-duration: var(--fa-animation-duration, 1s);\n animation-iteration-count: var(--fa-animation-iteration-count, infinite);\n animation-timing-function: var(--fa-animation-timing, steps(8));\n}\n\n@media (prefers-reduced-motion: reduce) {\n .fa-beat,\n.fa-bounce,\n.fa-fade,\n.fa-beat-fade,\n.fa-flip,\n.fa-pulse,\n.fa-shake,\n.fa-spin,\n.fa-spin-pulse {\n animation-delay: -1ms;\n animation-duration: 1ms;\n animation-iteration-count: 1;\n transition-delay: 0s;\n transition-duration: 0s;\n }\n}\n@keyframes fa-beat {\n 0%, 90% {\n transform: scale(1);\n }\n 45% {\n transform: scale(var(--fa-beat-scale, 1.25));\n }\n}\n@keyframes fa-bounce {\n 0% {\n transform: scale(1, 1) translateY(0);\n }\n 10% {\n transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);\n }\n 30% {\n transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));\n }\n 50% {\n transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);\n }\n 57% {\n transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));\n }\n 64% {\n transform: scale(1, 1) translateY(0);\n }\n 100% {\n transform: scale(1, 1) translateY(0);\n }\n}\n@keyframes fa-fade {\n 50% {\n opacity: var(--fa-fade-opacity, 0.4);\n }\n}\n@keyframes fa-beat-fade {\n 0%, 100% {\n opacity: var(--fa-beat-fade-opacity, 0.4);\n transform: scale(1);\n }\n 50% {\n opacity: 1;\n transform: scale(var(--fa-beat-fade-scale, 1.125));\n }\n}\n@keyframes fa-flip {\n 50% {\n transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));\n }\n}\n@keyframes fa-shake {\n 0% {\n transform: rotate(-15deg);\n }\n 4% {\n transform: rotate(15deg);\n }\n 8%, 24% {\n transform: rotate(-18deg);\n }\n 12%, 28% {\n transform: rotate(18deg);\n }\n 16% {\n transform: rotate(-22deg);\n }\n 20% {\n transform: rotate(22deg);\n }\n 32% {\n transform: rotate(-12deg);\n }\n 36% {\n transform: rotate(12deg);\n }\n 40%, 100% {\n transform: rotate(0deg);\n }\n}\n@keyframes fa-spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.fa-rotate-90 {\n transform: rotate(90deg);\n}\n\n.fa-rotate-180 {\n transform: rotate(180deg);\n}\n\n.fa-rotate-270 {\n transform: rotate(270deg);\n}\n\n.fa-flip-horizontal {\n transform: scale(-1, 1);\n}\n\n.fa-flip-vertical {\n transform: scale(1, -1);\n}\n\n.fa-flip-both,\n.fa-flip-horizontal.fa-flip-vertical {\n transform: scale(-1, -1);\n}\n\n.fa-rotate-by {\n transform: rotate(var(--fa-rotate-angle, 0));\n}\n\n.fa-stack {\n display: inline-block;\n vertical-align: middle;\n height: 2em;\n position: relative;\n width: 2.5em;\n}\n\n.fa-stack-1x,\n.fa-stack-2x {\n bottom: 0;\n left: 0;\n margin: auto;\n position: absolute;\n right: 0;\n top: 0;\n z-index: var(--fa-stack-z-index, auto);\n}\n\n.svg-inline--fa.fa-stack-1x {\n height: 1em;\n width: 1.25em;\n}\n.svg-inline--fa.fa-stack-2x {\n height: 2em;\n width: 2.5em;\n}\n\n.fa-inverse {\n color: var(--fa-inverse, #fff);\n}\n\n.sr-only,\n.fa-sr-only {\n positi