@riovir/wc-fontawesome/dist/index-standalone.js

Web components for Font Awesome

const D = (
  /* css */
  `
:root, :host {
  --fa-font-solid: normal 900 1em/1 "Font Awesome 7 Free";
  --fa-font-regular: normal 400 1em/1 "Font Awesome 7 Free";
  --fa-font-light: normal 300 1em/1 "Font Awesome 7 Pro";
  --fa-font-thin: normal 100 1em/1 "Font Awesome 7 Pro";
  --fa-font-duotone: normal 900 1em/1 "Font Awesome 7 Duotone";
  --fa-font-duotone-regular: normal 400 1em/1 "Font Awesome 7 Duotone";
  --fa-font-duotone-light: normal 300 1em/1 "Font Awesome 7 Duotone";
  --fa-font-duotone-thin: normal 100 1em/1 "Font Awesome 7 Duotone";
  --fa-font-brands: normal 400 1em/1 "Font Awesome 7 Brands";
  --fa-font-sharp-solid: normal 900 1em/1 "Font Awesome 7 Sharp";
  --fa-font-sharp-regular: normal 400 1em/1 "Font Awesome 7 Sharp";
  --fa-font-sharp-light: normal 300 1em/1 "Font Awesome 7 Sharp";
  --fa-font-sharp-thin: normal 100 1em/1 "Font Awesome 7 Sharp";
  --fa-font-sharp-duotone-solid: normal 900 1em/1 "Font Awesome 7 Sharp Duotone";
  --fa-font-sharp-duotone-regular: normal 400 1em/1 "Font Awesome 7 Sharp Duotone";
  --fa-font-sharp-duotone-light: normal 300 1em/1 "Font Awesome 7 Sharp Duotone";
  --fa-font-sharp-duotone-thin: normal 100 1em/1 "Font Awesome 7 Sharp Duotone";
  --fa-font-slab-regular: normal 400 1em/1 "Font Awesome 7 Slab";
  --fa-font-slab-press-regular: normal 400 1em/1 "Font Awesome 7 Slab Press";
  --fa-font-whiteboard-semibold: normal 600 1em/1 "Font Awesome 7 Whiteboard";
  --fa-font-thumbprint-light: normal 300 1em/1 "Font Awesome 7 Thumbprint";
  --fa-font-notdog-solid: normal 900 1em/1 "Font Awesome 7 Notdog";
  --fa-font-notdog-duo-solid: normal 900 1em/1 "Font Awesome 7 Notdog Duo";
  --fa-font-etch-solid: normal 900 1em/1 "Font Awesome 7 Etch";
  --fa-font-jelly-regular: normal 400 1em/1 "Font Awesome 7 Jelly";
  --fa-font-jelly-fill-regular: normal 400 1em/1 "Font Awesome 7 Jelly Fill";
  --fa-font-jelly-duo-regular: normal 400 1em/1 "Font Awesome 7 Jelly Duo";
  --fa-font-chisel-regular: normal 400 1em/1 "Font Awesome 7 Chisel";
}

.svg-inline--fa {
  box-sizing: content-box;
  display: var(--fa-display, inline-block);
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
  width: var(--fa-width, 1.25em);
}
.svg-inline--fa.fa-2xs {
  vertical-align: 0.1em;
}
.svg-inline--fa.fa-xs {
  vertical-align: 0em;
}
.svg-inline--fa.fa-sm {
  vertical-align: -0.0714285714em;
}
.svg-inline--fa.fa-lg {
  vertical-align: -0.2em;
}
.svg-inline--fa.fa-xl {
  vertical-align: -0.25em;
}
.svg-inline--fa.fa-2xl {
  vertical-align: -0.3125em;
}
.svg-inline--fa.fa-pull-left,
.svg-inline--fa .fa-pull-start {
  float: inline-start;
  margin-inline-end: var(--fa-pull-margin, 0.3em);
}
.svg-inline--fa.fa-pull-right,
.svg-inline--fa .fa-pull-end {
  float: inline-end;
  margin-inline-start: var(--fa-pull-margin, 0.3em);
}
.svg-inline--fa.fa-li {
  width: var(--fa-li-width, 2em);
  inset-inline-start: calc(-1 * var(--fa-li-width, 2em));
  inset-block-start: 0.25em; /* syncing vertical alignment with Web Font rendering */
}

.fa-layers-counter, .fa-layers-text {
  display: inline-block;
  position: absolute;
  text-align: center;
}

.fa-layers {
  display: inline-block;
  height: 1em;
  position: relative;
  text-align: center;
  vertical-align: -0.125em;
  width: var(--fa-width, 1.25em);
}
.fa-layers .svg-inline--fa {
  inset: 0;
  margin: auto;
  position: absolute;
  transform-origin: center center;
}

.fa-layers-text {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

.fa-layers-counter {
  background-color: var(--fa-counter-background-color, #ff253a);
  border-radius: var(--fa-counter-border-radius, 1em);
  box-sizing: border-box;
  color: var(--fa-inverse, #fff);
  line-height: var(--fa-counter-line-height, 1);
  max-width: var(--fa-counter-max-width, 5em);
  min-width: var(--fa-counter-min-width, 1.5em);
  overflow: hidden;
  padding: var(--fa-counter-padding, 0.25em 0.5em);
  right: var(--fa-right, 0);
  text-overflow: ellipsis;
  top: var(--fa-top, 0);
  transform: scale(var(--fa-counter-scale, 0.25));
  transform-origin: top right;
}

.fa-layers-bottom-right {
  bottom: var(--fa-bottom, 0);
  right: var(--fa-right, 0);
  top: auto;
  transform: scale(var(--fa-layers-scale, 0.25));
  transform-origin: bottom right;
}

.fa-layers-bottom-left {
  bottom: var(--fa-bottom, 0);
  left: var(--fa-left, 0);
  right: auto;
  top: auto;
  transform: scale(var(--fa-layers-scale, 0.25));
  transform-origin: bottom left;
}

.fa-layers-top-right {
  top: var(--fa-top, 0);
  right: var(--fa-right, 0);
  transform: scale(var(--fa-layers-scale, 0.25));
  transform-origin: top right;
}

.fa-layers-top-left {
  left: var(--fa-left, 0);
  right: auto;
  top: var(--fa-top, 0);
  transform: scale(var(--fa-layers-scale, 0.25));
  transform-origin: top left;
}

.fa-1x {
  font-size: 1em;
}

.fa-2x {
  font-size: 2em;
}

.fa-3x {
  font-size: 3em;
}

.fa-4x {
  font-size: 4em;
}

.fa-5x {
  font-size: 5em;
}

.fa-6x {
  font-size: 6em;
}

.fa-7x {
  font-size: 7em;
}

.fa-8x {
  font-size: 8em;
}

.fa-9x {
  font-size: 9em;
}

.fa-10x {
  font-size: 10em;
}

.fa-2xs {
  font-size: calc(10 / 16 * 1em); /* converts a 10px size into an em-based value that's relative to the scale's 16px base */
  line-height: calc(1 / 10 * 1em); /* sets the line-height of the icon back to that of it's parent */
  vertical-align: calc((6 / 10 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
}

.fa-xs {
  font-size: calc(12 / 16 * 1em); /* converts a 12px size into an em-based value that's relative to the scale's 16px base */
  line-height: calc(1 / 12 * 1em); /* sets the line-height of the icon back to that of it's parent */
  vertical-align: calc((6 / 12 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
}

.fa-sm {
  font-size: calc(14 / 16 * 1em); /* converts a 14px size into an em-based value that's relative to the scale's 16px base */
  line-height: calc(1 / 14 * 1em); /* sets the line-height of the icon back to that of it's parent */
  vertical-align: calc((6 / 14 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
}

.fa-lg {
  font-size: calc(20 / 16 * 1em); /* converts a 20px size into an em-based value that's relative to the scale's 16px base */
  line-height: calc(1 / 20 * 1em); /* sets the line-height of the icon back to that of it's parent */
  vertical-align: calc((6 / 20 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
}

.fa-xl {
  font-size: calc(24 / 16 * 1em); /* converts a 24px size into an em-based value that's relative to the scale's 16px base */
  line-height: calc(1 / 24 * 1em); /* sets the line-height of the icon back to that of it's parent */
  vertical-align: calc((6 / 24 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
}

.fa-2xl {
  font-size: calc(32 / 16 * 1em); /* converts a 32px size into an em-based value that's relative to the scale's 16px base */
  line-height: calc(1 / 32 * 1em); /* sets the line-height of the icon back to that of it's parent */
  vertical-align: calc((6 / 32 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
}

.fa-width-auto {
  --fa-width: auto;
}

.fa-fw,
.fa-width-fixed {
  --fa-width: 1.25em;
}

.fa-ul {
  list-style-type: none;
  margin-inline-start: var(--fa-li-margin, 2.5em);
  padding-inline-start: 0;
}
.fa-ul > li {
  position: relative;
}

.fa-li {
  inset-inline-start: calc(-1 * var(--fa-li-width, 2em));
  position: absolute;
  text-align: center;
  width: var(--fa-li-width, 2em);
  line-height: inherit;
}

/* Heads Up: Bordered Icons will not be supported in the future!
  - This feature will be deprecated in the next major release of Font Awesome (v8)!
  - You may continue to use it in this version *v7), but it will not be supported in Font Awesome v8.
*/
/* Notes:
* --@{v.$css-prefix}-border-width = 1/16 by default (to render as ~1px based on a 16px default font-size)
* --@{v.$css-prefix}-border-padding =
  ** 3/16 for vertical padding (to give ~2px of vertical whitespace around an icon considering it's vertical alignment)
  ** 4/16 for horizontal padding (to give ~4px of horizontal whitespace around an icon)
*/
.fa-border {
  border-color: var(--fa-border-color, #eee);
  border-radius: var(--fa-border-radius, 0.1em);
  border-style: var(--fa-border-style, solid);
  border-width: var(--fa-border-width, 0.0625em);
  box-sizing: var(--fa-border-box-sizing, content-box);
  padding: var(--fa-border-padding, 0.1875em 0.25em);
}

.fa-pull-left,
.fa-pull-start {
  float: inline-start;
  margin-inline-end: var(--fa-pull-margin, 0.3em);
}

.fa-pull-right,
.fa-pull-end {
  float: inline-end;
  margin-inline-start: var(--fa-pull-margin, 0.3em);
}

.fa-beat {
  animation-name: fa-beat;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, ease-in-out);
}

.fa-bounce {
  animation-name: fa-bounce;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));
}

.fa-fade {
  animation-name: fa-fade;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
}

.fa-beat-fade {
  animation-name: fa-beat-fade;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
}

.fa-flip {
  animation-name: fa-flip;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, ease-in-out);
}

.fa-shake {
  animation-name: fa-shake;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, linear);
}

.fa-spin {
  animation-name: fa-spin;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 2s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, linear);
}

.fa-spin-reverse {
  --fa-animation-direction: reverse;
}

.fa-pulse,
.fa-spin-pulse {
  animation-name: fa-spin;
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, steps(8));
}

@media (prefers-reduced-motion: reduce) {
  .fa-beat,
  .fa-bounce,
  .fa-fade,
  .fa-beat-fade,
  .fa-flip,
  .fa-pulse,
  .fa-shake,
  .fa-spin,
  .fa-spin-pulse {
    animation: none !important;
    transition: none !important;
  }
}
@keyframes fa-beat {
  0%, 90% {
    transform: scale(1);
  }
  45% {
    transform: scale(var(--fa-beat-scale, 1.25));
  }
}
@keyframes fa-bounce {
  0% {
    transform: scale(1, 1) translateY(0);
  }
  10% {
    transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
  }
  30% {
    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));
  }
  50% {
    transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
  }
  57% {
    transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
  }
  64% {
    transform: scale(1, 1) translateY(0);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}
@keyframes fa-fade {
  50% {
    opacity: var(--fa-fade-opacity, 0.4);
  }
}
@keyframes fa-beat-fade {
  0%, 100% {
    opacity: var(--fa-beat-fade-opacity, 0.4);
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(var(--fa-beat-fade-scale, 1.125));
  }
}
@keyframes fa-flip {
  50% {
    transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
  }
}
@keyframes fa-shake {
  0% {
    transform: rotate(-15deg);
  }
  4% {
    transform: rotate(15deg);
  }
  8%, 24% {
    transform: rotate(-18deg);
  }
  12%, 28% {
    transform: rotate(18deg);
  }
  16% {
    transform: rotate(-22deg);
  }
  20% {
    transform: rotate(22deg);
  }
  32% {
    transform: rotate(-12deg);
  }
  36% {
    transform: rotate(12deg);
  }
  40%, 100% {
    transform: rotate(0deg);
  }
}
@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.fa-rotate-90 {
  transform: rotate(90deg);
}

.fa-rotate-180 {
  transform: rotate(180deg);
}

.fa-rotate-270 {
  transform: rotate(270deg);
}

.fa-flip-horizontal {
  transform: scale(-1, 1);
}

.fa-flip-vertical {
  transform: scale(1, -1);
}

.fa-flip-both,
.fa-flip-horizontal.fa-flip-vertical {
  transform: scale(-1, -1);
}

.fa-rotate-by {
  transform: rotate(var(--fa-rotate-angle, 0));
}

.svg-inline--fa .fa-primary {
  fill: var(--fa-primary-color, currentColor);
  opacity: var(--fa-primary-opacity, 1);
}

.svg-inline--fa .fa-secondary {
  fill: var(--fa-secondary-color, currentColor);
  opacity: var(--fa-secondary-opacity, 0.4);
}

.svg-inline--fa.fa-swap-opacity .fa-primary {
  opacity: var(--fa-secondary-opacity, 0.4);
}

.svg-inline--fa.fa-swap-opacity .fa-secondary {
  opacity: var(--fa-primary-opacity, 1);
}

.svg-inline--fa mask .fa-primary,
.svg-inline--fa mask .fa-secondary {
  fill: black;
}

.svg-inline--fa.fa-inverse {
  fill: var(--fa-inverse, #fff);
}

.fa-stack {
  display: inline-block;
  height: 2em;
  line-height: 2em;
  position: relative;
  vertical-align: middle;
  width: 2.5em;
}

.fa-inverse {
  color: var(--fa-inverse, #fff);
}

.svg-inline--fa.fa-stack-1x {
  height: 1em;
  width: 1.25em;
}
.svg-inline--fa.fa-stack-2x {
  height: 2em;
  width: 2.5em;
}

.fa-stack-1x,
.fa-stack-2x {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  z-index: var(--fa-stack-z-index, auto);
}
`
), G = "adoptedStyleSheets" in document, P = ({ css: t }) => {
  try {
    const e = new CSSStyleSheet();
    return e.replaceSync(t), e;
  } catch {
    return;
  }
}, H = ({ css: t }) => {
  const e = document.createElement("template");
  return e.innerHTML = /* html */
  `
		<style>${t}</style>
	`, e;
}, T = G ? P({ css: D }) : null, q = T ? null : H({ css: D }), J = ({ css: t }) => {
  const e = P({ css: t });
  return (n) => {
    n.shadowRoot.adoptedStyleSheets = [T, e];
  };
}, K = ({ css: t }) => {
  const e = Symbol("is-applied"), n = H({ css: t });
  return (a) => {
    a[e] || (a[e] = !0, a.shadowRoot.appendChild(q.content.cloneNode(!0)), a.shadowRoot.appendChild(n.content.cloneNode(!0)));
  };
}, z = T ? J : K;
function C({ prototype: t }, e) {
  for (const [n, a] of Object.entries(e))
    U(t, n, a);
  t.connectedCallback = function() {
    for (const [a, { connect: i = () => {
    } }] of Object.entries(e))
      i(this, a);
  };
}
function U(t, e, { get: n, set: a, observe: i = () => {
}, defaultValue: o }) {
  const c = n || ((p, h) => h), V = a || ((p, h) => h), s = Symbol(`cached-${e}`);
  t[s] = o, Object.defineProperty(t, e, {
    get() {
      const p = this[s];
      return this[s] = c(this, this[s]), this[s] !== p && i(this, this[s], p), this[s];
    },
    set(p) {
      const h = this[s], N = V(this, p, this[s]);
      N !== void 0 && (this[s] = c(this, N), h !== this[s] && i(this, this[s], h));
    },
    enumerable: !0,
    configurable: !1
  });
}
function F({ attribute: t, defaultValue: e, ...n }) {
  return { connect: Z(t, e), defaultValue: e, ...n };
}
function l({ defaultValue: t = !1, set: e = (a, i) => i, ...n }) {
  return F({ defaultValue: t, set: (i, o) => e(i, !!o), ...n });
}
function u({ defaultValue: t = "", set: e = (a, i) => i, ...n }) {
  return F({ defaultValue: t, set: (i, o) => e(i, L(o)), ...n });
}
function y({ defaultValue: t = "", set: e = (a, i) => i, ...n }) {
  return F({ defaultValue: t, set: (i, o) => {
    const c = typeof o == "object" ? o : L(o);
    return e(i, c);
  }, ...n });
}
function L(t) {
  return t == null ? "" : String(t);
}
function Z(t, e) {
  const n = typeof e == "boolean" ? () => !0 : (a) => a.getAttribute(t);
  return (a, i) => {
    a.hasAttribute(t) && (a[i] = n(a));
  };
}
let v, S, k, R;
function Q({ findIconDefinition: t, icon: e, text: n, parse: a }) {
  v = t, S = e, k = n, R = a;
}
function X(t) {
  return v ? typeof t == "string" ? v({ iconName: t }) : t && 2 <= t.length ? v({ prefix: t[0], iconName: t[1] }) : t : t;
}
function tt(...t) {
  return S ? O("html", S(...t)) : void 0;
}
function et(...t) {
  return k ? O("html", k(...t)) : void 0;
}
function I(...t) {
  return R ? R.transform(...t) : void 0;
}
function O(t, e) {
  if (e)
    return e[t];
}
function b(t, e) {
  if (e === void 0)
    return (a) => b(t, a);
  const n = (a, i) => typeof a == "function" ? a(at(i)) : a;
  return (a, i, o) => {
    !o && !i || (a[t].classList.remove(n(e, o)), i && a[t].classList.add(n(e, i)));
  };
}
function at(t) {
  return t ? t.replace(/[^0-9a-zA-Z-_]/g, "") : "";
}
function nt(t) {
  return (e, n) => e.setAttribute(t, n);
}
const it = { icon: [] }, ot = z({ css: (
  /* css */
  `
:host {
	box-sizing: border-box;
	display: inline-block;
	line-height: 1; }

:host([pull="left"]) {
	float: left;
	margin-right: .3em; }

:host([pull="right"]) {
	float: right;
	margin-left: .3em; }
`
) }), $ = document.createElement("template");
$.innerHTML = Y(it);
function Y({ icon: t = [] } = {}) {
  const [
    e = 1,
    n = 1,
    /**/
    ,
    /**/
    ,
    a = ""
  ] = t, i = Array.isArray(a) ? `<g class="fa-group">
			<path class="fa-secondary" fill="currentColor" d="${a[1]}" />
			<path class="fa-primary" fill="currentColor" d="${a[0]}" />
		</g>` : `<path fill="currentColor" d="${a}" />`;
  return [
    /* html */
    `<svg
			class="svg-inline--fa"
			aria-hidden="true"
			role="img"
			focusable="false"
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 ${e} ${n}"
		>
			${i}
		</svg>`
  ];
}
const r = {
  SVG: Symbol("svg"),
  PATH_PRIMARY: Symbol("path-primary"),
  PATH_SECONDARY: Symbol("path-secondary"),
  NEEDS_REDRAW: Symbol("needs-complete-redraw-of-structure")
}, m = b(r.SVG), w = (t) => m((e) => t + e), d = {
  _init: { connect: st },
  icon: y({ attribute: "icon", observe: x }),
  resolvedIcon: { get: ({ icon: t, _resolve: e }) => e(t) },
  isDuotone: { get: M },
  transform: y({ attribute: "transform", observe: x }),
  parsedTransform: { get: ut },
  size: u({ attribute: "size", observe: w("fa-") }),
  rotateBy: l({ attribute: "rotate-by", observe: m("fa-rotate-by") }),
  rotation: u({ attribute: "rotation", observe: w("fa-rotate-") }),
  flip: u({ attribute: "flip", observe: w("fa-flip-") }),
  pull: u({ attribute: "pull", observe: nt("pull") }),
  mask: y({ attribute: "mask", observe: x }),
  resolvedMask: { get: ({ mask: t, _resolve: e }) => e(t) },
  fixedWidth: l({ attribute: "fixed-width", observe: m("fa-fw") }),
  widthAuto: l({ attribute: "width-auto", observe: m("fa-width-auto") }),
  spin: l({ attribute: "spin", observe: m("fa-spin") }),
  pulse: l({ attribute: "pulse", observe: m("fa-pulse") }),
  inverse: l({ attribute: "inverse", observe: m("fa-inverse") }),
  swapOpacity: l({ attribute: "swap-opacity", observe: m("fa-swap-opacity") })
};
class rt extends HTMLElement {
  constructor() {
    super();
    const e = this.attachShadow({ mode: "open" });
    e.appendChild($.content.cloneNode(!0)), ot(this), this[r.SVG] = e.querySelector("svg"), this[r.PATH_PRIMARY] = e.querySelector("path"), this[r.NEEDS_REDRAW] = (n) => n.isDuotone || n.transform || n.mask, this._toHtml = tt, this._resolve = X, this._parseTransform = I, this.spin = !1;
  }
}
C(rt, d);
function st(t) {
  const e = t.getAttribute("aria-label") || t.getAttribute("title") || t.getAttribute("aria-labelledby");
  t.hasAttribute("role") || e || t.setAttribute("role", "presentation");
}
function M({ resolvedIcon: t }) {
  return t && t.icon && Array.isArray(t.icon[4]);
}
function x(t) {
  t[r.NEEDS_REDRAW](t) ? lt(t) : ft(t);
}
function lt(t) {
  const e = t[r.SVG].classList;
  t[r.SVG].remove();
  const n = {
    transform: t.parsedTransform,
    mask: t.resolvedMask
  }, [a] = t._toHtml(t.resolvedIcon, n) || Y(t.resolvedIcon);
  t.shadowRoot.innerHTML += a, t[r.SVG] = t.shadowRoot.querySelector("svg"), t[r.SVG].classList.add(...e);
  const i = t.shadowRoot.querySelectorAll("path");
  t[r.PATH_PRIMARY] = i[1] ?? i[0], t[r.PATH_SECONDARY] = i[1] ? i[0] : void 0;
  const { isDuotone: o } = t;
  t[r.NEEDS_REDRAW] = (c) => o !== c.isDuotone || c.transform || c.mask;
}
function ft(t) {
  const { resolvedIcon: e } = t;
  if (!e)
    return;
  t[r.SVG].setAttribute("viewBox", `0 0 ${e.icon[0]} ${e.icon[1]}`), (M(t) ? mt : ct)(t, { vectorDefinition: e.icon[4] });
}
function ct(t, { vectorDefinition: e }) {
  t[r.PATH_PRIMARY].setAttribute("d", e);
}
function mt(t, { vectorDefinition: e }) {
  t[r.PATH_PRIMARY].setAttribute("d", e[0]), t[r.PATH_SECONDARY].setAttribute("d", e[1]);
}
function ut({ _parseTransform: t, transform: e }) {
  return (e && typeof e == "string" ? t(e) : e) ?? void 0;
}
const dt = z({ css: (
  /* css */
  `
	:host {
		box-sizing: border-box;
		display: inline-block;
		line-height: 1; }

		:host([pull="left"]) {
			float: left;
			margin-right: .3em; }

		:host([pull="right"]) {
			float: right;
			margin-left: .3em; }

	::slotted(*) {
		bottom: 0;
		left: 0;
		margin: auto;
		position: absolute;
		right: 0;
		top: 0; }
`
) }), W = document.createElement("template");
W.innerHTML = /* html */
`
<span class="fa-layers">
	<slot></slot>
</span>
`;
const j = {
  LAYERS: Symbol("layers")
}, E = b(j.LAYERS), pt = (t) => E((e) => t + e), ht = {
  size: { ...d.size, observe: pt("fa-") },
  fixedWidth: { ...d.fixedWidth, observe: E("fa-fw") },
  widthAuto: { ...d.widthAuto, observe: E("fa-width-auto") },
  pull: d.pull
};
class vt extends HTMLElement {
  constructor() {
    super();
    const e = this.attachShadow({ mode: "open" });
    e.appendChild(W.content.cloneNode(!0)), dt(this), this[j.LAYERS] = e.querySelector(".fa-layers");
  }
}
C(vt, ht);
const gt = z({ css: (
  /* css */
  `
:host {
	box-sizing: border-box;
	display: inline-block;
	line-height: 1; }

.fa-layers-counter {
	background: var(--fa-layers-counter-background, #ff253a); }
`
) }), B = document.createElement("template");
B.innerHTML = /* html */
`
<span class="fa-layers-text"></span>
`;
function bt(t = "") {
  const e = document.createElement("span");
  return e.className = "fa-layers-text", e.textContent = t, [e.outerHTML];
}
const f = {
  CONTAINER: Symbol("container"),
  NEEDS_REDRAW: Symbol("needs-complete-redraw-of-structure")
}, g = b(f.CONTAINER), _ = (t) => g((e) => t + e), yt = {
  value: u({ attribute: "value", observe: A }),
  transform: { ...d.transform, observe: A },
  parsedTransform: d.parsedTransform,
  size: u({ attribute: "size", observe: _("fa-") }),
  position: u({ attribute: "position", observe: _("fa-layers-") }),
  fixedWidth: l({ attribute: "fixed-width", observe: g("fa-fw") }),
  widthAuto: l({ attribute: "width-auto", observe: g("fa-width-auto") }),
  inverse: l({ attribute: "inverse", observe: g("fa-inverse") }),
  counter: l({ attribute: "counter", observe: A })
};
class wt extends HTMLElement {
  constructor() {
    super();
    const e = this.attachShadow({ mode: "open" });
    e.appendChild(B.content.cloneNode(!0)), gt(this), this[f.CONTAINER] = e.querySelector(".fa-layers-text"), this[f.NEEDS_REDRAW] = (n) => n.transform, this._toHtml = et, this._parseTransform = I;
  }
}
C(wt, yt);
function A(t) {
  t[f.NEEDS_REDRAW](t) && xt(t), At(t), St(t);
}
function xt(t) {
  const e = t[f.CONTAINER].classList;
  t[f.CONTAINER].remove();
  const n = {
    transform: t.parsedTransform
  }, [a] = t._toHtml(String(t.value), n) || bt(t.value);
  t.shadowRoot.innerHTML += a, t[f.CONTAINER] = t.shadowRoot.querySelector(".fa-layers-text"), t[f.CONTAINER].classList.add(...e);
  const { transform: i } = t;
  t[f.NEEDS_REDRAW] = (o) => i !== o.transform;
}
function At(t) {
  const e = t[f.CONTAINER].classList, { classToAdd: n, classToRemove: a } = t.counter ? { classToAdd: "fa-layers-counter", classToRemove: "fa-layers-text" } : { classToAdd: "fa-layers-text", classToRemove: "fa-layers-counter" };
  e.add(n), e.remove(a);
}
function St(t, e = t.value) {
  const n = t.counter && !e ? 0 : e;
  t[f.CONTAINER].textContent = n;
}
Q(globalThis.FontAwesome || {});
export {
  rt as FontAwesomeIcon,
  vt as FontAwesomeLayers,
  wt as FontAwesomeLayersText,
  Q as use
};