@riovir/wc-fontawesome
Version:
Web components for Font Awesome
106 lines (100 loc) • 5.8 kB
TypeScript
/**
* @element font-awesome-icon
*
* @prop {string|array|object} [icon=''] - Icon definition. Can be one of the following: <br />
* - string: name of registered icons with the default prefix <br />
* - array: of 'prefix', 'name' for registered icons with non-default prefix <br />
* - object: the icon definition directly without the need to register it
* @prop {object|undefined} [resolvedIcon=undefined] - (Read only) The resolved icon definition.
*
* @prop {string} [size=''] - one of the 'xs', 'xm', 'lg', '1x', '2x', ... '10x' sizes
* @prop {boolean} [rotateBy=false] - sets the rotation to an arbitrary value. The degree is set by the --fa-rotate-angle CSS variable.
* @prop {string} [rotation=''] - one of the '90', '180', '270' rotations. For more control, use the transform prop.
* @prop {string} [flip=''] - one of the 'horizontal', 'vertical', 'both' flip options
* @prop {string} [pull=''] - one of the 'left', 'right' options to float the element
* @prop {boolean} [fixedWidth=false] - fixes the width. Commonly used for aligning lists of icons. Since v7, this is the default.
* @prop {boolean} [widthAuto=false] - matches the icon width to the shape. Commonly used with flowing text. Used to be the default prior v7.
* @prop {boolean} [spin=false] - sets the icon spinning. Commonly used for loading indicators
* @prop {boolean} [pulse=false] - alternative to spinning. Commonly used with the spinner icon
*
* @prop {boolean} [inverse=false] - inverts the icon color
* @prop {boolean} [swapOpacity=false] - swaps duotone icon layer opacities
*
* @prop {string|array|object} [mask=''] - same as icon, to use its shape as a mask. <br />
* Used together with transform for proper relative sizing.
* @prop {object|undefined} [resolvedMask=undefined] - (Read only) The resolved mask's icon definition.
* @prop {string|object} [transform=''] - Transformation. Can be one of the following: <br />
* - string: to be parsed into the object form. Eg. "shrink-4 left-2" or "grow-2.5 up-4.5 right-2 rotate--45" <br />
* - object: the transform definition directly
* @prop {object|undefined} [parsedTransform=undefined] - (Read only) Transformation parsed into object form.
*
* @cssprop [--fa-primary-color=currentColor] Duotone icons only: primary background color
* @cssprop [--fa-secondary-color=currentColor] Duotone icons only: secondary background color
* @cssprop [--fa-primary-opacity=1] Duotone icons only: primary opacity (unless swapOpacity used)
* @cssprop [--fa-secondary-opacity=0.4] Duotone icons only: secondary opacity (unless swapOpacity used)
* */
export class FontAwesomeIcon extends HTMLElement {
fixedWidth: boolean;
widthAuto: boolean;
flip: 'horizontal' | 'vertical' | 'both' | '' | null;
icon: object | Array<string> | string;
get resolvedIcon(): object | undefined;
inverse: boolean;
mask: object | Array<string> | string | null;
get resolvedMask(): object | undefined;
pull: 'right' | 'left' | null;
pulse: boolean;
rotateBy: boolean;
rotation: 90 | 180 | 270 | '90' | '180' | '270' | null;
swapOpacity: boolean;
size: '' | 'lg' | 'xs' | 'sm' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x' | null;
spin: boolean;
transform: object | string | null;
get parsedTransform(): object | undefined;
connectedCallback(): void;
disconnectedCallback(): void;
}
/**
* @element font-awesome-layers-text
* @prop {string|number} [value=''] - value to be displayed
* @prop {boolean} [counter=false] - set to turn it to a counter subtype
* @prop {string} [size=''] - one of the 'xs', 'xm', 'lg', '1x', '2x', ... '10x' sizes
* @prop {boolean} [fixedWidth=false] - fixes the width. Commonly used for aligning lists of icons. Since v7, this is the default.
* @prop {boolean} [widthAuto=false] - matches the icon width to the shape. Commonly used with flowing text. Used to be the default prior v7.
* @prop {string} [position=''] - one of the 'top-left', 'top-right', 'bottom-left', 'bottom-right' positions
* @prop {boolean} [inverse=false] - inverts the icon color
* @prop {string|object} [transform=''] - Transformation. Can be one of the following: <br />
* - string: to be parsed into the object form. Eg. "shrink-4 left-2" or "grow-2.5 up-4.5 right-2 rotate--45" <br />
* - object: the transform definition directly
* @prop {object|undefined} [parsedTransform=undefined] - (Read only) Transformation parsed into object form.
*
* @cssprop [--fa-layers-counter-background=#ff253a] background color of the counter
* */
export class FontAwesomeLayersText extends HTMLElement {
counter: boolean;
fixedWidth: boolean;
widthAuto: boolean;
inverse: boolean;
position: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | null;
transform: object | string | null;
get parsedTransform(): object | undefined;
value: string | number;
connectedCallback(): void;
disconnectedCallback(): void;
}
/**
* @element font-awesome-layers
*
* @prop {string} [size=''] - one of the 'xs', 'xm', 'lg', '1x', '2x', ... '10x' sizes
* @prop {string} [pull=''] - one of the 'left', 'right' options to float the element
* @prop {boolean} [fixedWidth=false] - fixes the width. Commonly used for aligning lists of icons. Since v7, this is the default.
* @prop {boolean} [widthAuto=false] - matches the icon width to the shape. Commonly used with flowing text. Used to be the default prior v7.
*/
export class FontAwesomeLayers extends HTMLElement {
fixedWidth: boolean;
widthAuto: boolean;
size: '' | 'lg' | 'xs' | 'sm' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x' | null;
pull: 'right' | 'left' | null;
connectedCallback(): void;
disconnectedCallback(): void;
}