@riovir/wc-fontawesome
Version:
Web components for Font Awesome
614 lines (549 loc) • 24.1 kB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const D=`
: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));
}
(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;
}
}
fa-beat {
0%, 90% {
transform: scale(1);
}
45% {
transform: scale(var(--fa-beat-scale, 1.25));
}
}
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);
}
}
fa-fade {
50% {
opacity: var(--fa-fade-opacity, 0.4);
}
}
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));
}
}
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));
}
}
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);
}
}
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);
}
`,U="adoptedStyleSheets"in document,P=({css:t})=>{try{const e=new CSSStyleSheet;return e.replaceSync(t),e}catch{return}},L=({css:t})=>{const e=document.createElement("template");return e.innerHTML=`
<style>${t}</style>
`,e},T=U?P({css:D}):null,Z=T?null:L({css:D}),Q=({css:t})=>{const e=P({css:t});return n=>{n.shadowRoot.adoptedStyleSheets=[T,e]}},X=({css:t})=>{const e=Symbol("is-applied"),n=L({css:t});return a=>{a[e]||(a[e]=!0,a.shadowRoot.appendChild(Z.content.cloneNode(!0)),a.shadowRoot.appendChild(n.content.cloneNode(!0)))}},z=T?Q:X;function F({prototype:t},e){for(const[n,a]of Object.entries(e))tt(t,n,a);t.connectedCallback=function(){for(const[a,{connect:i=()=>{}}]of Object.entries(e))i(this,a)}}function tt(t,e,{get:n,set:a,observe:i=()=>{},defaultValue:o}){const c=n||((p,h)=>h),K=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=K(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 C({attribute:t,defaultValue:e,...n}){return{connect:et(t,e),defaultValue:e,...n}}function l({defaultValue:t=!1,set:e=(a,i)=>i,...n}){return C({defaultValue:t,set:(i,o)=>e(i,!!o),...n})}function u({defaultValue:t="",set:e=(a,i)=>i,...n}){return C({defaultValue:t,set:(i,o)=>e(i,H(o)),...n})}function y({defaultValue:t="",set:e=(a,i)=>i,...n}){return C({defaultValue:t,set:(i,o)=>{const c=typeof o=="object"?o:H(o);return e(i,c)},...n})}function H(t){return t==null?"":String(t)}function et(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 I({findIconDefinition:t,icon:e,text:n,parse:a}){v=t,S=e,k=n,R=a}function at(t){return v?typeof t=="string"?v({iconName:t}):t&&2<=t.length?v({prefix:t[0],iconName:t[1]}):t:t}function nt(...t){return S?$("html",S(...t)):void 0}function it(...t){return k?$("html",k(...t)):void 0}function O(...t){return R?R.transform(...t):void 0}function $(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(ot(i)):a;return(a,i,o)=>{!o&&!i||(a[t].classList.remove(n(e,o)),i&&a[t].classList.add(n(e,i)))}}function ot(t){return t?t.replace(/[^0-9a-zA-Z-_]/g,""):""}function rt(t){return(e,n)=>e.setAttribute(t,n)}const st={icon:[]},lt=z({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; }
`}),M=document.createElement("template");M.innerHTML=Y(st);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[`<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:ft},icon:y({attribute:"icon",observe:x}),resolvedIcon:{get:({icon:t,_resolve:e})=>e(t)},isDuotone:{get:j},transform:y({attribute:"transform",observe:x}),parsedTransform:{get:pt},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:rt("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 W extends HTMLElement{constructor(){super();const e=this.attachShadow({mode:"open"});e.appendChild(M.content.cloneNode(!0)),lt(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=nt,this._resolve=at,this._parseTransform=O,this.spin=!1}}F(W,d);function ft(t){const e=t.getAttribute("aria-label")||t.getAttribute("title")||t.getAttribute("aria-labelledby");t.hasAttribute("role")||e||t.setAttribute("role","presentation")}function j({resolvedIcon:t}){return t&&t.icon&&Array.isArray(t.icon[4])}function x(t){t[r.NEEDS_REDRAW](t)?ct(t):mt(t)}function ct(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 mt(t){const{resolvedIcon:e}=t;if(!e)return;t[r.SVG].setAttribute("viewBox",`0 0 ${e.icon[0]} ${e.icon[1]}`),(j(t)?dt:ut)(t,{vectorDefinition:e.icon[4]})}function ut(t,{vectorDefinition:e}){t[r.PATH_PRIMARY].setAttribute("d",e)}function dt(t,{vectorDefinition:e}){t[r.PATH_PRIMARY].setAttribute("d",e[0]),t[r.PATH_SECONDARY].setAttribute("d",e[1])}function pt({_parseTransform:t,transform:e}){return(e&&typeof e=="string"?t(e):e)??void 0}const ht=z({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; }
`}),B=document.createElement("template");B.innerHTML=`
<span class="fa-layers">
<slot></slot>
</span>
`;const V={LAYERS:Symbol("layers")},E=b(V.LAYERS),vt=t=>E(e=>t+e),gt={size:{...d.size,observe:vt("fa-")},fixedWidth:{...d.fixedWidth,observe:E("fa-fw")},widthAuto:{...d.widthAuto,observe:E("fa-width-auto")},pull:d.pull};class G extends HTMLElement{constructor(){super();const e=this.attachShadow({mode:"open"});e.appendChild(B.content.cloneNode(!0)),ht(this),this[V.LAYERS]=e.querySelector(".fa-layers")}}F(G,gt);const bt=z({css:`
:host {
box-sizing: border-box;
display: inline-block;
line-height: 1; }
.fa-layers-counter {
background: var(--fa-layers-counter-background, #ff253a); }
`}),q=document.createElement("template");q.innerHTML=`
<span class="fa-layers-text"></span>
`;function yt(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),wt={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 J extends HTMLElement{constructor(){super();const e=this.attachShadow({mode:"open"});e.appendChild(q.content.cloneNode(!0)),bt(this),this[f.CONTAINER]=e.querySelector(".fa-layers-text"),this[f.NEEDS_REDRAW]=n=>n.transform,this._toHtml=it,this._parseTransform=O}}F(J,wt);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)||yt(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}I(globalThis.FontAwesome||{});exports.FontAwesomeIcon=W;exports.FontAwesomeLayers=G;exports.FontAwesomeLayersText=J;exports.use=I;