@riovir/wc-fontawesome/dist/index.cjs

Web components for Font Awesome

'use strict';

var fontawesomeSvgCore = require('@fortawesome/fontawesome-svg-core');

/* Extracted from @fortawesome/fontawesome-svg-core/styles.css v7.0.0 */
const css = /* 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);
}
`;

const canAdoptStylesheet = ('adoptedStyleSheets' in document);

const Stylesheet = ({ css }) => {
	try {
		const sheet = new CSSStyleSheet();
		sheet.replaceSync(css);
		return sheet;
	}
	catch { return; }
};

const StyleTemplate = ({ css }) => {
	const template = document.createElement('template');
	template.innerHTML = /* html */`
		<style>${css}</style>
	`;
	return template;
};

const styleSheet = canAdoptStylesheet ? Stylesheet({ css }) : null;
const styleTemplate = !styleSheet ? StyleTemplate({ css }) : null;

const applyConstructedStyleWith = ({ css }) => {
	const ownCss = Stylesheet({ css });
	return host => {
		host.shadowRoot.adoptedStyleSheets = [styleSheet, ownCss];
	};
};

const applyInlineStyleWith = ({ css }) => {
	const IS_APPLIED = Symbol('is-applied');
	const ownCss = StyleTemplate({ css });
	return host => {
		if (host[IS_APPLIED]) { return; }
		host[IS_APPLIED] = true;
		host.shadowRoot.appendChild(styleTemplate.content.cloneNode(true));
		host.shadowRoot.appendChild(ownCss.content.cloneNode(true));
	};
};

const applyStyleWith = styleSheet ?
	applyConstructedStyleWith :
	applyInlineStyleWith;

function definePropsOn({ prototype }, props) {
	for (const [name, prop] of Object.entries(props)) {
		defineOn(prototype, name, prop);
	}
	prototype.connectedCallback = function connectedCallback() {
		for (const [prop, { connect = () => {} }] of Object.entries(props)) {
			connect(this, prop);
		}
	};
}

function defineOn(object, propName, { get, set, observe = () => {}, defaultValue }) {
	const _get = get || ((_, value) => value);
	const _set = set || ((_, value) => value);
	const _cache = Symbol(`cached-${propName}`);
	object[_cache] = defaultValue;
	Object.defineProperty(object, propName, {
		get() {
			const lastValue = this[_cache];
			this[_cache] = _get(this, this[_cache]);
			if (this[_cache] !== lastValue) {
				observe(this, this[_cache], lastValue);
			}
			return this[_cache];
		},
		set(value) {
			const lastValue = this[_cache];
			const result = _set(this, value, this[_cache]);
			if (result === undefined) { return; }
			this[_cache] = _get(this, result);
			if (lastValue === this[_cache]) { return; }
			observe(this, this[_cache], lastValue);
		},
		enumerable: true,
		configurable: false,
	});
}

function Prop({ attribute, defaultValue, ...rest }) {
	return { connect: initPropFrom(attribute, defaultValue), defaultValue, ...rest };
}

function BooleanProp({ defaultValue = false, set = (_, value) => value, ...rest }) {
	const setBoolean = (host, value) => set(host, Boolean(value));
	return Prop({ defaultValue, set: setBoolean, ...rest });
}

function StringProp({ defaultValue = '', set = (_, value) => value, ...rest }) {
	const setString = (host, value) => set(host, asString(value));
	return Prop({ defaultValue, set: setString, ...rest });
}

function ObjectOrStringProp({ defaultValue = '', set = (_, value) => value, ...rest }) {
	const setObjectOrString = (host, value) => {
		const coercedValue = typeof value === 'object' ? value : asString(value);
		return set(host, coercedValue);
	};
	return Prop({ defaultValue, set: setObjectOrString, ...rest });
}

function asString(value) {
	return value === null || value === undefined ? '' : String(value);
}

function initPropFrom(attribute, defaultValue) {
	const valueOf = typeof defaultValue === 'boolean' ?
		() => true :
		host => host.getAttribute(attribute);
	return (host, key) => {
		if (!host.hasAttribute(attribute)) { return; }
		host[key] = valueOf(host);
	};
}

let _findIconDefinition;
let _icon;
let _text;
let _parse;

function use({ findIconDefinition, icon, text, parse }) {
	_findIconDefinition = findIconDefinition;
	_icon = icon;
	_text = text;
	_parse = parse;
}

function resolve(icon) {
	if (!_findIconDefinition) { return icon; }
	if (typeof icon === 'string') {
		return _findIconDefinition({ iconName: icon });
	}
	if (icon && 2 <= icon.length) {
		return _findIconDefinition({ prefix: icon[0], iconName: icon[1] });
	}
	return icon;
}

function iconToHtml(...args) {
	return _icon ? pick('html', _icon(...args)) : undefined;
}

function textToHtml(...args) {
	return _text ? pick('html', _text(...args)) : undefined;
}

function parseTransform(...args) {
	return _parse ? _parse.transform(...args) : undefined;
}

function pick(prop, object) {
	if (!object) { return; }
	return object[prop];
}

function updateElementClass(prop, name) {
	if (name === undefined) {
		return name => updateElementClass(prop, name);
	}
	const classOf = (name, value) => typeof name === 'function' ? name(strictEscape(value)) : name;
	return (host, value, lastValue) => {
		if (!lastValue && !value) { return; }
		host[prop].classList.remove(classOf(name, lastValue));
		if (!value) { return; }
		host[prop].classList.add(classOf(name, value));
	};
}

function strictEscape(className) {
	return className ? className.replace(/[^0-9a-zA-Z-_]/g, '') : '';
}

function setHostAttribute(attribute) {
	return (host, value) => host.setAttribute(attribute, value);
}

const BLANK_ICON = { icon: [] };
const applyStyle$2 = applyStyleWith({ 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; }
` });

const template$2 = document.createElement('template');
template$2.innerHTML = toHtmlFallback$1(BLANK_ICON);

function toHtmlFallback$1({ icon = [] } = {}) {
	const [width = 1, height = 1, /**/, /**/, path = ''] = icon;
	const content = Array.isArray(path) ?
		`<g class="fa-group">
			<path class="fa-secondary" fill="currentColor" d="${path[1]}" />
			<path class="fa-primary" fill="currentColor" d="${path[0]}" />
		</g>` :
		`<path fill="currentColor" d="${path}" />`;
	return [/* html */`<svg
			class="svg-inline--fa"
			aria-hidden="true"
			role="img"
			focusable="false"
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 ${width} ${height}"
		>
			${content}
		</svg>`,
	];
}

const Internal$2 = {
	SVG: Symbol('svg'),
	PATH_PRIMARY: Symbol('path-primary'),
	PATH_SECONDARY: Symbol('path-secondary'),
	NEEDS_REDRAW: Symbol('needs-complete-redraw-of-structure'),
};

const updateSvgClass = updateElementClass(Internal$2.SVG);
const prefixSvgClass = prefix => updateSvgClass(value => prefix.concat(value));

const Props$2 = {
	_init: { connect: initAriaAttributes },

	icon: ObjectOrStringProp({ attribute: 'icon', observe: updateIcon	}),
	resolvedIcon: { get: ({ icon, _resolve }) => _resolve(icon) },
	isDuotone: { get: isDuotone },

	transform: ObjectOrStringProp({ attribute: 'transform', observe: updateIcon }),
	parsedTransform: { get: resolveTransform },

	size: StringProp({ attribute: 'size', observe: prefixSvgClass('fa-') }),
	rotateBy: BooleanProp({ attribute: 'rotate-by', observe: updateSvgClass('fa-rotate-by') }),
	rotation: StringProp({ attribute: 'rotation', observe: prefixSvgClass('fa-rotate-') }),
	flip: StringProp({ attribute: 'flip', observe: prefixSvgClass('fa-flip-') }),
	pull: StringProp({ attribute: 'pull', observe: setHostAttribute('pull') }),

	mask: ObjectOrStringProp({ attribute: 'mask', observe: updateIcon }),
	resolvedMask: { get: ({ mask, _resolve }) => _resolve(mask) },

	fixedWidth: BooleanProp({ attribute: 'fixed-width', observe: updateSvgClass('fa-fw') }),
	widthAuto: BooleanProp({ attribute: 'width-auto', observe: updateSvgClass('fa-width-auto') }),
	spin: BooleanProp({ attribute: 'spin', observe: updateSvgClass('fa-spin') }),
	pulse: BooleanProp({ attribute: 'pulse', observe: updateSvgClass('fa-pulse') }),

	inverse: BooleanProp({ attribute: 'inverse', observe: updateSvgClass('fa-inverse') }),
	swapOpacity: BooleanProp({ attribute: 'swap-opacity', observe: updateSvgClass('fa-swap-opacity') }),
};

class FontAwesomeIcon extends HTMLElement {
	constructor() {
		super();
		const shadowRoot = this.attachShadow({ mode: 'open' });
		shadowRoot.appendChild(template$2.content.cloneNode(true));
		applyStyle$2(this);
		this[Internal$2.SVG] = shadowRoot.querySelector('svg');
		this[Internal$2.PATH_PRIMARY] = shadowRoot.querySelector('path');
		this[Internal$2.NEEDS_REDRAW] = host => host.isDuotone || host.transform || host.mask;
		this._toHtml = iconToHtml;
		this._resolve = resolve;
		this._parseTransform = parseTransform;
		this.spin = false;
	}
}
definePropsOn(FontAwesomeIcon, Props$2);

function initAriaAttributes(host) {
	const hasAccessibleName = host.getAttribute('aria-label') || host.getAttribute('title') || host.getAttribute('aria-labelledby');
	if (host.hasAttribute('role') || hasAccessibleName) { return; }

	host.setAttribute('role', 'presentation');
}

function isDuotone({ resolvedIcon }) {
	return resolvedIcon && resolvedIcon.icon && Array.isArray(resolvedIcon.icon[4]);
}

function updateIcon(host) {
	if (host[Internal$2.NEEDS_REDRAW](host)) {
		redrawElements$1(host);
	}
	else {
		updateShapes(host);
	}
}

function redrawElements$1(host) {
	const classes = host[Internal$2.SVG].classList;
	host[Internal$2.SVG].remove();

	const options = {
		transform: host.parsedTransform,
		mask: host.resolvedMask,
	};
	const [svg] = host._toHtml(host.resolvedIcon, options) || toHtmlFallback$1(host.resolvedIcon);
	host.shadowRoot.innerHTML = host.shadowRoot.innerHTML.concat(svg);
	host[Internal$2.SVG] = host.shadowRoot.querySelector('svg');
	host[Internal$2.SVG].classList.add(...classes);

	const paths = host.shadowRoot.querySelectorAll('path');
	host[Internal$2.PATH_PRIMARY] = paths[1] ? paths[1] : paths[0];
	host[Internal$2.PATH_SECONDARY] = paths[1] ? paths[0] : undefined;

	const { isDuotone } = host;
	host[Internal$2.NEEDS_REDRAW] = host => isDuotone !== host.isDuotone || host.transform || host.mask;
}

function updateShapes(host) {
	const { resolvedIcon } = host;
	if (!resolvedIcon) { return; }
	host[Internal$2.SVG].setAttribute('viewBox', `0 0 ${resolvedIcon.icon[0]} ${resolvedIcon.icon[1]}`);
	const updatePaths = isDuotone(host) ? updateDuotonePath : updateMonotonePath;
	updatePaths(host, { vectorDefinition: resolvedIcon.icon[4] });
}

function updateMonotonePath(host, { vectorDefinition }) {
	host[Internal$2.PATH_PRIMARY].setAttribute('d', vectorDefinition);
}

function updateDuotonePath(host, { vectorDefinition }) {
	host[Internal$2.PATH_PRIMARY].setAttribute('d', vectorDefinition[0]);
	host[Internal$2.PATH_SECONDARY].setAttribute('d', vectorDefinition[1]);
}

function resolveTransform({ _parseTransform, transform }) {
	const needsParsing = transform && typeof transform === 'string';
	const value = needsParsing ? _parseTransform(transform) : transform;
	return value ? value : undefined;
}

const applyStyle$1 = applyStyleWith({ 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; }
` });

const template$1 = document.createElement('template');
template$1.innerHTML = /* html */`
<span class="fa-layers">
	<slot></slot>
</span>
`;

const Internal$1 = {
	LAYERS: Symbol('layers'),
};

const updateLayersClass = updateElementClass(Internal$1.LAYERS);
const prefixLayersClass = prefix => updateLayersClass(value => prefix.concat(value));

const Props$1 = {
	size: { ...Props$2.size, observe: prefixLayersClass('fa-') },
	fixedWidth: { ...Props$2.fixedWidth, observe: updateLayersClass('fa-fw') },
	widthAuto: { ...Props$2.widthAuto, observe: updateLayersClass('fa-width-auto') },
	pull: Props$2.pull,
};

class FontAwesomeLayers extends HTMLElement {
	constructor() {
		super();
		const shadowRoot = this.attachShadow({ mode: 'open' });
		shadowRoot.appendChild(template$1.content.cloneNode(true));
		applyStyle$1(this);
		this[Internal$1.LAYERS] = shadowRoot.querySelector('.fa-layers');
	}
}
definePropsOn(FontAwesomeLayers, Props$1);

const applyStyle = applyStyleWith({ css: /* css */`
:host {
	box-sizing: border-box;
	display: inline-block;
	line-height: 1; }

.fa-layers-counter {
	background: var(--fa-layers-counter-background, #ff253a); }
` });

const template = document.createElement('template');
template.innerHTML = /* html */`
<span class="fa-layers-text"></span>
`;

function toHtmlFallback(text = '') {
	const span = document.createElement('span');
	span.className = 'fa-layers-text';
	span.textContent = text;
	return [span.outerHTML];
}

const Internal = {
	CONTAINER: Symbol('container'),
	NEEDS_REDRAW: Symbol('needs-complete-redraw-of-structure'),
};

const updateContainerClass = updateElementClass(Internal.CONTAINER);
const prefixContainerClass = prefix => updateContainerClass(value => prefix.concat(value));

const Props = {
	value: StringProp({ attribute: 'value', observe: updateContainer }),
	transform: { ...Props$2.transform, observe: updateContainer },
	parsedTransform: Props$2.parsedTransform,

	size: StringProp({ attribute: 'size', observe: prefixContainerClass('fa-') }),
	position: StringProp({ attribute: 'position', observe: prefixContainerClass('fa-layers-') }),

	fixedWidth: BooleanProp({ attribute: 'fixed-width', observe: updateContainerClass('fa-fw') }),
	widthAuto: BooleanProp({ attribute: 'width-auto', observe: updateContainerClass('fa-width-auto') }),
	inverse: BooleanProp({ attribute: 'inverse', observe: updateContainerClass('fa-inverse') }),
	counter: BooleanProp({ attribute: 'counter', observe: updateContainer }),
};

class FontAwesomeLayersText extends HTMLElement {
	constructor() {
		super();
		const shadowRoot = this.attachShadow({ mode: 'open' });
		shadowRoot.appendChild(template.content.cloneNode(true));
		applyStyle(this);
		this[Internal.CONTAINER] = shadowRoot.querySelector('.fa-layers-text');
		this[Internal.NEEDS_REDRAW] = host => host.transform;
		this._toHtml = textToHtml;
		this._parseTransform = parseTransform;
	}
}
definePropsOn(FontAwesomeLayersText, Props);

function updateContainer(host) {
	if (host[Internal.NEEDS_REDRAW](host)) {
		redrawElements(host);
	}
	updateLayerClass(host);
	updateTextValue(host);
}

function redrawElements(host) {
	const classes = host[Internal.CONTAINER].classList;
	host[Internal.CONTAINER].remove();

	const options = {
		transform: host.parsedTransform,
	};
	const [container] = host._toHtml(String(host.value), options) || toHtmlFallback(host.value);
	host.shadowRoot.innerHTML = host.shadowRoot.innerHTML.concat(container);
	host[Internal.CONTAINER] = host.shadowRoot.querySelector('.fa-layers-text');
	host[Internal.CONTAINER].classList.add(...classes);

	const { transform } = host;
	host[Internal.NEEDS_REDRAW] = host => transform !== host.transform;
}

function updateLayerClass(host) {
	const classList = host[Internal.CONTAINER].classList;
	const layerClass = host.counter ? 'fa-layers-counter' : 'fa-layers-text';
	if (classList.contains(layerClass)) { return; }
	host[Internal.CONTAINER].classList.remove('fa-layers-counter', 'fa-layers-text');
	host[Internal.CONTAINER].classList.add(layerClass);
}

function updateTextValue(host, value = host.value) {
	const text = host.counter && !value ? 0 : value;
	host[Internal.CONTAINER].textContent = text;
}

use({ findIconDefinition: fontawesomeSvgCore.findIconDefinition, icon: fontawesomeSvgCore.icon, text: fontawesomeSvgCore.text, parse: fontawesomeSvgCore.parse });

exports.FontAwesomeIcon = FontAwesomeIcon;
exports.FontAwesomeLayers = FontAwesomeLayers;
exports.FontAwesomeLayersText = FontAwesomeLayersText;