awesome-gcl
Version:
React component library
1,398 lines (1,332 loc) • 285 kB
JavaScript
import './types/styles/styles.css';
import React, { useState, useMemo, useEffect } from 'react';
const large$8 = () => new Map([
['font-size', 'text-base'],
['padding-vertical', 'py-3'],
['padding-horizontal', 'px-6'] // padding-left: 1.5rem (24px) & padding-right: 1.5rem (24px)
]);
const medium$8 = () => new Map([
['font-size', 'text-sm'],
['padding-vertical', 'py-2.5'],
['padding-horizontal', 'px-5'] // padding-left: 1.25 (20px) & padding-right: 1.25 (20px)
]);
const small$8 = () => new Map([
['font-size', 'text-xs'],
['padding-vertical', 'py-2'],
['padding-horizontal', 'px-3'] // padding-left: 0.75rem (12px) & padding-right: 0.75rem (12px)
]);
var Sizes$8 = {
large: large$8,
medium: medium$8,
small: small$8
};
const base$2 = () => new Map([
['cursor', 'cursor-pointer'],
['width', 'w-fit'],
['height', 'h-fit'],
['display', 'flex'],
['flex-wrap', 'flex-wrap'],
['justify-content', 'justify-center'],
['align-items', 'items-center'],
['border-width', 'border'],
['border-styled', 'border-solid'],
['border-radius', 'rounded-md'],
['font-weight', 'font-medium'],
// Disabled state
['disabled-cursor', 'disabled:cursor-not-allowed'],
['disabled-border-color', 'disabled:border-grayscale-40'],
['disabled-color', 'disabled:text-grayscale-60'],
]);
const primary$2 = () => new Map([
['border-color', 'border-primary-50'],
['text-color', 'text-white-100'],
['background-color', 'bg-primary-50'],
// Hover state
['hover-border-color', 'hover:border-primary-100'],
['hover-background-color', 'hover:bg-primary-100'],
// Disable state
['disabled-background-color', 'disabled:bg-grayscale-5']
]);
const secondary$2 = () => new Map([
['border-color', 'border-primary-50'],
['text-color', 'text-primary-50'],
['background-color', 'bg-white-100'],
// Hover state
['hover-border-color', 'hover:border-primary-50'],
['hover-background-color', 'hover:bg-primary-0'],
// Disabled state
['disabled-background-color', 'disabled:bg-white-0']
]);
const tertiary$1 = () => new Map([
['border-color', 'border-grayscale-40'],
['text-color', 'text-grayscale-100'],
['background-color', 'bg-white-100'],
// Hover state
['hover-border-color', 'hover:border-grayscale-100'],
['hover-background-color', 'hover:bg-white-100'],
// Disabled state
['disabled-background-color', 'disabled:bg-white-0']
]);
const destructivePrimary$1 = () => new Map([
['border-color', 'border-support-alert-50'],
['text-color', 'text-white-100'],
['background-color', 'bg-support-alert-50'],
// Hover state
['hover-border-color', 'hover:border-support-alert-100'],
['hover-background-color', 'hover:bg-support-alert-100'],
// Disabled state
['disabled-background-color', 'disabled:bg-grayscale-5']
]);
const destructiveSecondary$1 = () => new Map([
['border-color', 'border-support-alert-50'],
['text-color', 'text-support-alert-50'],
['background-color', 'bg-white-100'],
// Hover state
['hover-border-color', 'hover:border-support-alert-50'],
['hover-background-color', 'hover:bg-support-alert-5'],
// Disabled state
['disabled-background-color', 'disabled:bg-white-0']
]);
const successPrimary$1 = () => new Map([
['border-color', 'border-support-success-50'],
['text-color', 'text-white-100'],
['background-color', 'bg-support-success-50'],
// Hover state
['hover-border-color', 'hover:border-support-success-100'],
['hover-background-color', 'hover:bg-support-success-100'],
// Disabled state
['disabled-background-color', 'disabled:bg-grayscale-5']
]);
const successSecondary$1 = () => new Map([
['border-color', 'border-support-success-50'],
['text-color', 'text-support-success-50'],
['background-color', 'bg-white-100'],
// Hover state
['hover-border-color', 'hover:border-support-success-50'],
['hover-background-color', 'hover:bg-support-success-5'],
// Disabled state
['disabled-background-color', 'disabled:bg-white-0']
]);
const contrastPrimary$1 = () => new Map([
['border-color', 'border-primary-50'],
['text-color', 'text-primary-50'],
['background-color', 'bg-white-100'],
// Hover state
['hover-border-color', 'hover:border-primary-50'],
['hover-background-color', 'hover:bg-primary-0'],
// Disabled state
['disabled-background-color', 'disabled:bg-grayscale-5']
]);
const contrastSecondary$1 = () => new Map([
['border-color', 'border-white-100'],
['text-color', 'text-white-100'],
['background-color', 'bg-grayscale-100'],
// Hover state
['hover-border-color', 'hover:border-white-100'],
['hover-background-color', 'hover:bg-white-40'],
// Disabled state
['disabled-background-color', 'disabled:bg-white-0']
]);
var Themes$f = {
base: base$2,
primary: primary$2,
secondary: secondary$2,
tertiary: tertiary$1,
destructivePrimary: destructivePrimary$1,
destructiveSecondary: destructiveSecondary$1,
successPrimary: successPrimary$1,
successSecondary: successSecondary$1,
contrastPrimary: contrastPrimary$1,
contrastSecondary: contrastSecondary$1
};
class ButtonStyles {
constructor({ additionalClasses = {
button: []
}, theme, size }) {
this.sizes = {
large: Sizes$8.large(),
medium: Sizes$8.medium(),
small: Sizes$8.small()
};
this.themes = {
primary: Themes$f.primary(),
secondary: Themes$f.secondary(),
tertiary: Themes$f.tertiary(),
destructivePrimary: Themes$f.destructivePrimary(),
destructiveSecondary: Themes$f.destructiveSecondary(),
successPrimary: Themes$f.successPrimary(),
successSecondary: Themes$f.successSecondary(),
contrastPrimary: Themes$f.contrastPrimary(),
contrastSecondary: Themes$f.contrastSecondary()
};
this.additionalClasses = additionalClasses;
this.theme = theme;
this.size = size;
}
getThemeRules() {
return this.themes[this.theme];
}
getSizeRules() {
return this.sizes[this.size];
}
buildStyleRules() {
const classes = {
buttonClass: [
...Themes$f.base().values(),
...this.getSizeRules().values(),
...this.getThemeRules().values(),
...this.additionalClasses.button
].join(' ')
};
return classes;
}
}
/**
* Button component
*
* @param {ButtonComponentPropTypes} props
* @property {ReactNode} props.children
* @property {ButtonTypesEnum} props.type - Defines the button type
* @property {GSizeEnum} props.size - Defines padding and font-size
* @property {ButtonThemesEnum} props.theme - Defines background color, border and text color
* @property {React.MouseEventHandler<HTMLButtonElement>} props.handleClick - Function triggered by Mouse Evenet
* @property {boolean} [props.disabled] - Blocks Mouse Event and change background-color
* @property {boolean} [props.name]
* @property {boolean} [props.value]
* @property {ButtonAdditionalClassesPropTypes} [props.additionalClasses] - Object for additional css classes to each HTML tag
* @property {string[]} [additionalClasses.button] - CSS classes for button div HTML tag
* @example
* <Button
* type='button'
* size='medium'
* theme='primary'
* handleClick={() => window.alert('Awesome GCL button was clicked')}
* disabled={false}
* name='buttonIdentifier'
* value='clicked'
* additionalClasses={{
* button: ['button-custom-border']
* }}
* >
* Click me!
* </Button>
*
* @returns {JSX.Element} Button
*/
const Button = ({ children, type, size, theme, handleClick, disabled = false, name, value, additionalClasses }) => {
const styles = new ButtonStyles({
additionalClasses,
theme,
size
});
const { buttonClass } = styles.buildStyleRules();
return (React.createElement("button", { type: type, onClick: handleClick, disabled: disabled, name: name, value: value, className: buttonClass, "data-testid": 'awesome-gcl-button-component' }, children));
};
const large$7 = () => new Map([
['font-size', 'text-base'],
['padding', 'p-3'], // padding: 0.75rem (12px)
]);
const medium$7 = () => new Map([
['font-size', 'text-sm'],
['padding', 'p-2.5'], // padding: 0.625rem (10px)
]);
const small$7 = () => new Map([
['font-size', 'text-xs'],
['padding', 'p-2'], // padding: 0.5rem (8px)
]);
var Sizes$7 = {
large: large$7,
medium: medium$7,
small: small$7
};
const base$1 = () => new Map([
['cursor', 'cursor-pointer'],
['width', 'w-fit'],
['height', 'h-fit'],
['display', 'flex'],
['flex-wrap', 'flex-wrap'],
['justify-content', 'justify-center'],
['align-items', 'items-center'],
['border-width', 'border'],
['border-styled', 'border-solid'],
['border-radius', 'rounded-md'],
['font-weight', 'font-medium'],
['disabled-cursor', 'disabled:cursor-not-allowed'],
['disabled-border-color', 'disabled:border-grayscale-40'],
['disabled-color', 'disabled:text-grayscale-60'],
]);
const primary$1 = () => new Map([
['border-color', 'border-primary-50'],
['text-color', 'text-white-100'],
['background-color', 'bg-primary-50'],
['hover-border-color', 'hover:border-primary-100'],
['hover-background-color', 'hover:bg-primary-100'],
['disabled-background-color', 'disabled:bg-grayscale-5']
]);
const secondary$1 = () => new Map([
['border-color', 'border-primary-50'],
['text-color', 'text-primary-50'],
['background-color', 'bg-white-100'],
['hover-border-color', 'hover:border-primary-50'],
['hover-background-color', 'hover:bg-primary-0'],
['disabled-background-color', 'disabled:bg-white-0']
]);
const tertiary = () => new Map([
['border-color', 'border-grayscale-40'],
['text-color', 'text-grayscale-100'],
['background-color', 'bg-white-100'],
['hover-border-color', 'hover:border-grayscale-100'],
['hover-background-color', 'hover:bg-white-100'],
['disabled-background-color', 'disabled:bg-white-0']
]);
const destructivePrimary = () => new Map([
['border-color', 'border-support-alert-50'],
['text-color', 'text-white-100'],
['background-color', 'bg-support-alert-50'],
['hover-border-color', 'hover:border-support-alert-100'],
['hover-background-color', 'hover:bg-support-alert-100'],
['disabled-background-color', 'disabled:bg-grayscale-5']
]);
const destructiveSecondary = () => new Map([
['border-color', 'border-support-alert-50'],
['text-color', 'text-support-alert-50'],
['background-color', 'bg-white-100'],
['hover-border-color', 'hover:border-support-alert-50'],
['hover-background-color', 'hover:bg-support-alert-5'],
['disabled-background-color', 'disabled:bg-white-0']
]);
const successPrimary = () => new Map([
['border-color', 'border-support-success-50'],
['text-color', 'text-white-100'],
['background-color', 'bg-support-success-50'],
['hover-border-color', 'hover:border-support-success-100'],
['hover-background-color', 'hover:bg-support-success-100'],
['disabled-background-color', 'disabled:bg-grayscale-5']
]);
const successSecondary = () => new Map([
['border-color', 'border-support-success-50'],
['text-color', 'text-support-success-50'],
['background-color', 'bg-white-100'],
['hover-border-color', 'hover:border-support-success-50'],
['hover-background-color', 'hover:bg-support-success-5'],
['disabled-background-color', 'disabled:bg-white-0']
]);
const contrastPrimary = () => new Map([
['border-color', 'border-primary-50'],
['text-color', 'text-primary-50'],
['background-color', 'bg-white-100'],
['hover-border-color', 'hover:border-primary-50'],
['hover-background-color', 'hover:bg-primary-0'],
['disabled-background-color', 'disabled:bg-grayscale-5']
]);
const contrastSecondary = () => new Map([
['border-color', 'border-white-100'],
['text-color', 'text-white-100'],
['background-color', 'bg-grayscale-100'],
['hover-border-color', 'hover:border-white-100'],
['hover-background-color', 'hover:bg-white-40'],
['disabled-background-color', 'disabled:bg-white-0']
]);
var Themes$e = {
base: base$1,
primary: primary$1,
secondary: secondary$1,
tertiary,
destructivePrimary,
destructiveSecondary,
successPrimary,
successSecondary,
contrastPrimary,
contrastSecondary
};
class IconButtonStyles {
constructor({ additionalClasses = {
button: []
}, theme, size }) {
this.sizes = {
large: Sizes$7.large(),
medium: Sizes$7.medium(),
small: Sizes$7.small()
};
this.themes = {
primary: Themes$e.primary(),
secondary: Themes$e.secondary(),
tertiary: Themes$e.tertiary(),
"destructivePrimary": Themes$e.destructivePrimary(),
"destructiveSecondary": Themes$e.destructiveSecondary(),
"successPrimary": Themes$e.successPrimary(),
"successSecondary": Themes$e.successSecondary(),
"contrastPrimary": Themes$e.contrastPrimary(),
"contrastSecondary": Themes$e.contrastSecondary()
};
this.additionalClasses = additionalClasses;
this.theme = theme;
this.size = size;
}
getThemeRules() {
return this.themes[this.theme];
}
getSizeRules() {
return this.sizes[this.size];
}
buildStyleRules() {
const classes = {
buttonClass: [
...Themes$e.base().values(),
...this.getSizeRules().values(),
...this.getThemeRules().values(),
...this.additionalClasses.button
].join(' ')
};
return classes;
}
}
/**
* Icon Button component
*
* @param {IconButtonComponentPropTypes} props
* @property {*} props.children
* @property {IconButtonTypesEnum} props.type - Defines the button type
* @property {GSizeEnum} props.size - Defines padding and font-size
* @property {IconButtonThemesEnum} props.theme - Defines background color, border and text color
* @property {React.MouseEventHandler<HTMLButtonElement>} props.handleClick - Function triggered by Mouse Evenet
* @property {boolean} [props.disabled] - Blocks Mouse Event and change background-color
* @property {boolean} [props.name]
* @property {boolean} [props.value]
* @property {IconButtonAdditionalClassesPropTypes} [props.additionalClasses] - Object for additional css classes to each HTML tag
* @property {string[]} [additionalClasses.button] - CSS classes for button div HTML tag
* @example
* <IconButton
* type='button'
* size='medium'
* theme='primary'
* handleClick={() => window.alert('Awesome GCL button was clicked')}
* disabled={false}
* name='buttonIdentifier'
* value='clicked'
* additionalClasses={{
* button: ['button-custom-border']
* }}
* >
* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
* <path fillRule="evenodd" clipRule="evenodd" d="M5.91006 10.4959L3.7071 8.29291C3.31658 7.90239 2.68342 7.90239 2.29289 8.29291C1.90237 8.68343 1.90237 9.3166 2.29289 9.70712L5.29288 12.7071C5.7168 13.131 6.4159 13.0892 6.7863 12.6178L13.7863 4.61786C14.1275 4.18359 14.0521 3.55494 13.6178 3.21372C13.1835 2.87251 12.5549 2.94795 12.2136 3.38222L5.91006 10.4959Z" fill="white"/>
* </svg>
* </IconButton>
*
* @returns {JSX.Element} Icon Button
*/
const IconButton = ({ children, type, size, theme, name, value, handleClick, disabled = false, additionalClasses }) => {
const styles = new IconButtonStyles({
additionalClasses,
theme,
size
});
const { buttonClass } = styles.buildStyleRules();
return (React.createElement("button", { type: type, onClick: handleClick, disabled: disabled, name: name, value: value, className: buttonClass, "data-testid": 'awesome-gcl-button-component' }, children));
};
const large$6 = () => new Map([
['font-size', 'text-base'], // font-size: 1rem (16px) & line-height: 1.5rem (24px)
]);
const medium$6 = () => new Map([
['font-size', 'text-sm'], // font-size: 0.875rem (14px) & line-height: 1.25rem (20px)
]);
const small$6 = () => new Map([
['font-size', 'text-xs'], // font-size: 0.75rem (12px) & line-height: 1rem (16px)
]);
var Sizes$6 = {
large: large$6,
medium: medium$6,
small: small$6
};
const base = () => new Map([
['cursor', 'cursor-pointer'],
['border-width', 'border-b'],
['border-styled', 'border-solid'],
['border-color', 'border-transparent'],
['font-weight', 'font-medium'],
// Disabled state
['disabled-color', 'disabled:text-grayscale-60'],
]);
const primary = () => new Map([
['text-color', 'text-primary-50'],
// Hover state
['hover-border-color', 'hover:border-primary-50'],
]);
const secondary = () => new Map([
['text-color', 'text-grayscale-100'],
// Hover state
['hover-border-color', 'hover:border-grayscale-100'],
]);
const destructive = () => new Map([
['text-color', 'text-support-alert-50'],
// Hover state
['hover-border-color', 'hover:border-support-alert-50'],
]);
const success = () => new Map([
['text-color', 'text-support-success-50'],
// Hover state
['hover-border-color', 'hover:border-support-success-50'],
]);
const contrast = () => new Map([
['text-color', 'text-white-100'],
// Hover state
['hover-border-color', 'hover:border-white-100'],
]);
var Themes$d = {
base,
primary,
secondary,
destructive,
success,
contrast
};
class TextButtonStyles {
constructor({ additionalClasses = {
button: []
}, theme, size }) {
this.sizes = {
large: Sizes$6.large(),
medium: Sizes$6.medium(),
small: Sizes$6.small()
};
this.themes = {
primary: Themes$d.primary(),
secondary: Themes$d.secondary(),
destructive: Themes$d.destructive(),
success: Themes$d.success(),
contrast: Themes$d.contrast(),
};
this.additionalClasses = additionalClasses;
this.theme = theme,
this.size = size;
}
getThemeRules() {
return this.themes[this.theme];
}
getSizeRules() {
return this.sizes[this.size];
}
buildStyleRules() {
const classes = {
buttonClass: [
...Themes$d.base().values(),
...this.getSizeRules().values(),
...this.getThemeRules().values(),
...this.additionalClasses.button
].join(' ')
};
return classes;
}
}
/**
* Text Button component
*
* @param {TextButtonComponentPropTypes} props
* @property {ReactNode} props.children
* @property {TextButtonTypesEnum} props.type - Defines the button type
* @property {GSizeEnum} props.size - Defines padding and font-size
* @property {TextButtonThemesEnum} props.theme - Defines background color, border and text color
* @property {React.MouseEventHandler<HTMLButtonElement>} props.handleClick - Function triggered by Mouse Evenet
* @property {boolean} [props.disabled] - Blocks Mouse Event and change background-color
* @property {boolean} [props.name]
* @property {boolean} [props.value]
* @property {TextButtonAdditionalClassesPropTypes} [props.additionalClasses] - Object for additional css classes to each HTML tag
* @property {string[]} [additionalClasses.button] - CSS classes for button div HTML tag
* @example
* <TextButton
* type='button'
* size='medium'
* theme='primary'
* handleClick={() => window.alert('Awesome GCL button was clicked')}
* disabled={false}
* name='buttonIdentifier'
* value='clicked'
* additionalClasses={{
* button: ['button-custom-border']
* }}
* >
* Click me!
* </TextButton>
*
* @returns {JSX.Element} Text Button
*/
const TextButton = ({ children, type, size, theme, handleClick, disabled = false, name, value, additionalClasses }) => {
const styles = new TextButtonStyles({
additionalClasses,
theme,
size
});
const { buttonClass } = styles.buildStyleRules();
return (React.createElement("button", { type: type, onClick: handleClick, disabled: disabled, name: name, value: value, className: buttonClass, "data-testid": 'awesome-gcl-button-component' }, children));
};
const large$5 = () => ({
input: new Map([
['min-width', 'min-w-[24px]'],
['width', 'w-6'],
['height', 'h-6'] // height: 1.5re, (24px)
]),
label: new Map([
['font-size', 'text-base']
]),
icon: new Map([
['left', 'left-2px'],
['height', 'h-5'],
['width', 'w-5']
])
});
const medium$5 = () => ({
input: new Map([
['min-width', 'min-w-[20px]'],
['width', 'w-5'],
['height', 'h-5'] // height: 1.25rem (20px)
]),
label: new Map([
['font-size', 'text-sm']
]),
icon: new Map([
['left', 'left-0.5'],
['height', 'h-4'],
['width', 'w-4']
])
});
const small$5 = () => ({
input: new Map([
['min-width', 'min-w-[16px]'],
['width', 'w-4'],
['height', 'h-4'] // height: 1rem (16px)
]),
label: new Map([
['font-size', 'text-xs']
]),
icon: new Map([
['left', 'left-2px'],
['height', 'h-3'],
['width', 'w-3']
])
});
var Sizes$5 = {
large: large$5,
medium: medium$5,
small: small$5
};
const wrapper$7 = () => new Map([
['display', 'flex'],
['flex-shrink', 'shrink-0'],
['justify-content', 'justify-center'],
['align-items', 'items-center'],
['gap', 'gap-1.5'],
['position', 'relative']
]);
const input$4 = () => new Map([
['cursor', 'cursor-pointer'],
['border-width', 'border'],
['border-style', 'border-solid'],
['border-color', 'border-grayscale-40'],
['border-radius', 'rounded'],
['background-color', 'bg-white-100'],
['appearance', 'appearance-none'],
// Checked state
['checked-border-color', 'checked:border-primary-50'],
['checked-background-color', 'checked:bg-primary-50'],
// Hover state
['hover-border-color', 'hover:border-primary-50'],
['hover-background-color', 'hover:bg-primary-0'],
// Disabled state
['disabled-cursor', 'disabled:cursor-not-allowed'],
['disabled-border-color', 'disabled:border-grayscale-40'],
['disabled-background-color', 'disabled:bg-grayscale-5'],
// Combined states for hover while checked or while disabled
['combined-hover-checked-border-color', 'hover:checked:border-primary-50'],
['combined-hover-checked-background-color', 'hover:checked:bg-primary-50'],
['combined-hover-disabled-border-color', 'hover:disabled:border-grayscale-40'],
['combined-hover-disabled-background-color', 'hover:disabled:bg-grayscale-40'],
['combined-checked-disabled-background-color', 'checked:disabled:bg-grayscale-40'],
]);
const icon$2 = () => new Map([
['cursor', 'cursor-pointer'],
['position', 'absolute'],
['color', 'text-white-100'],
['flex-shrink', 'shrink-0']
]);
const label$4 = () => new Map([
['cursor', 'cursor-pointer']
]);
var Themes$c = {
wrapper: wrapper$7,
input: input$4,
icon: icon$2,
label: label$4
};
class CheckboxStyles {
constructor({ additionalClasses, size }) {
this.sizes = {
large: Sizes$5.large(),
medium: Sizes$5.medium(),
small: Sizes$5.small()
};
this.themes = {
wrapper: Themes$c.wrapper(),
input: Themes$c.input(),
icon: Themes$c.icon(),
label: Themes$c.label()
};
this.additionalClasses = {
wrapper: (additionalClasses === null || additionalClasses === void 0 ? void 0 : additionalClasses.wrapper) || [],
label: (additionalClasses === null || additionalClasses === void 0 ? void 0 : additionalClasses.label) || [],
input: (additionalClasses === null || additionalClasses === void 0 ? void 0 : additionalClasses.input) || [],
icon: (additionalClasses === null || additionalClasses === void 0 ? void 0 : additionalClasses.icon) || []
};
this.size = size;
}
getThemeRules(component) {
return this.themes[component];
}
getSizeRules(component) {
return this.sizes[this.size][component];
}
buildStyleRules() {
const classes = {
wrapperClass: [
...this.getThemeRules('wrapper').values(),
...this.additionalClasses.wrapper
].join(' '),
labelClass: [
...this.getThemeRules('label').values(),
...this.getSizeRules('label').values(),
...this.additionalClasses.label
].join(' '),
inputClass: [
...this.getThemeRules('input').values(),
...this.getSizeRules('input').values(),
...this.additionalClasses.input
].join(' '),
iconClass: [
...this.getThemeRules('icon').values(),
...this.getSizeRules('icon').values(),
...this.additionalClasses.icon
].join(' ')
};
return classes;
}
;
}
/**
* Checkbox component
*
* @param {CheckboxPropTypes} props
* @property {boolean} props.checked - Determines whether the component should render the mark icon
* @property {GSizeEnum} props.size - Defines input and icon sizes and label font size
* @property {React.MouseEventHandler<HTMLDivElement>} [props.handleClick] - Wrapper onClick function
* @property {boolean} [props.disabled = false] - Defines the checkbox background-color and disable function
* @property {string} [props.label] - Determines the value of label and if it should be rendered
* @property {CheckboxAdditionalClassesPropTypes} [props.additionalClasses] - Object for additional css classes to each HTML tag
* @property {string[]} [additionalClasses.wrapper] - CSS classes for checkbox-wrapper div HTML tag
* @property {string[]} [additionalClasses.input] - CSS classes for checkbox-input input HTML tag
* @property {string[]} [additionalClasses.label] - CSS classes for checkbox-label label HTML tag
* @property {string[]} [additionalClasses.icon] - CSS classes for checkbox-mark svg HTML tag
* @example
* <Checkbox
* checked={isChecked}
* size='medium'
* handleClick={() => setIsChecked(!isChecked)}
* disabled={false}
* additionalClasses = {{
* wrapper: ['custom-background-color'],
* input: ['custom-input-border'],
* label: ['large-font-size'],
* icon: ['custom-background-constrast'],
* }}
* />
*
* @returns {JSX.Element} Checkbox
*/
const Checkbox = ({ checked, size, handleClick, disabled = false, label, additionalClasses }) => {
const styles = new CheckboxStyles({
additionalClasses,
size
});
const { wrapperClass, inputClass, labelClass, iconClass } = styles.buildStyleRules();
return (React.createElement("div", { "data-testid": 'checkbox-wrapper', onClick: handleClick || undefined, className: wrapperClass },
React.createElement("input", { id: 'checkbox-component', "data-testid": 'checkbox-input', type: "checkbox", checked: checked, disabled: disabled, className: inputClass, readOnly: true }),
checked && (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "none", "data-testid": 'checkbox-mark', className: iconClass },
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.91006 10.4959L3.7071 8.29291C3.31658 7.90239 2.68342 7.90239 2.29289 8.29291C1.90237 8.68343 1.90237 9.3166 2.29289 9.70712L5.29288 12.7071C5.7168 13.131 6.4159 13.0892 6.7863 12.6178L13.7863 4.61786C14.1275 4.18359 14.0521 3.55494 13.6178 3.21372C13.1835 2.87251 12.5549 2.94795 12.2136 3.38222L5.91006 10.4959Z", fill: "white" }))),
label !== undefined && (React.createElement("label", { "data-testid": 'checkbox-label', className: labelClass }, label))));
};
const figure = () => new Map([
['width', 'w-full'],
['height', 'h-full'],
]);
const image = () => new Map([
['width', 'w-full'],
['height', 'h-full'],
]);
const caption$1 = () => new Map([
['font-size', 'text-base']
]);
var Themes$b = {
figure,
image,
caption: caption$1
};
class FigureStyles {
constructor({ additionalClasses }) {
this.themes = {
figure: Themes$b.figure(),
image: Themes$b.image(),
caption: Themes$b.caption()
};
this.additionalClasses = {
figure: (additionalClasses === null || additionalClasses === void 0 ? void 0 : additionalClasses.figure) || [],
image: (additionalClasses === null || additionalClasses === void 0 ? void 0 : additionalClasses.image) || [],
caption: (additionalClasses === null || additionalClasses === void 0 ? void 0 : additionalClasses.caption) || []
};
}
getThemeRules(components) {
return this.themes[components];
}
buildStyleRules() {
const classes = {
figureClass: [
...this.getThemeRules('figure').values(),
...this.additionalClasses.figure
].join(' '),
imageClass: [
...this.getThemeRules('image').values(),
...this.additionalClasses.image
].join(' '),
captionClass: [
...this.getThemeRules('caption').values(),
...this.additionalClasses.caption
].join(' ')
};
return classes;
}
}
/**
* Figure component
*
* @param {FigurePropTypes} props
* @property {string} props.src - Img HTML tag src value
* @property {string} props.alt - Img HTML tag alt value
* @property {string} [props.caption] - Determines the value of figcaption and if it should be rendered
* @property {FigureAdditionalClassesPropTypes} [props.additionalClasses] - Object for additional css classes to each HTML tah
* @property {string[]} [additionalClasses.figure] - CSS classes for figure-wrapper figure HTML tag
* @property {string[]} [additionalClasses.image] - CSS classes for figure-image img HTML tag
* @property {string[]} [additionalClasses.caption] - CSS classes for figure-figcaption HTML tag
* @example
* <Figure
* src='https://cctech.io/images/cctech-logo-black.webp'
* alt='Convergence Concepts Logo'
* caption='Convergence'
* additionalClasses = {{
* figure: ['max-width'],
* image: ['half-size'],
* caption: ['colr-gray'],
* }}
* />
*
* @returns {JSX.Element} - Figure
*/
const Figure = ({ src, alt, caption, additionalClasses = {
figure: [],
image: [],
caption: []
} }) => {
const styles = new FigureStyles({ additionalClasses });
const { figureClass, imageClass, captionClass } = styles.buildStyleRules();
return (React.createElement("figure", { className: figureClass, "data-testid": 'figure-wrapper' },
React.createElement("img", { src: src, alt: alt, className: imageClass, "data-testid": 'figure-image' }),
caption && (React.createElement("figcaption", { className: captionClass, "data-testid": 'figure-caption' }, caption))));
};
const setPasswordVisibleHandler = ({ passwordVisible, setPasswordVisible, setType }) => () => {
setPasswordVisible(!passwordVisible);
setType(passwordVisible ? 'password' : 'text');
};
const useInput = ({ type, showPassword }) => {
const [passwordVisible, setPasswordVisible] = useState(showPassword);
const [inputType, setInputType] = useState(type);
return {
hookType: inputType,
hookPasswordVisible: passwordVisible,
hookSetPasswordVisible: setPasswordVisibleHandler({
passwordVisible,
setPasswordVisible,
setType: setInputType
})
};
};
const large$4 = () => ({
label: new Map([
['font-size', 'text-base']
]),
input: new Map([
['padding-vertical', 'py-3'],
['padding-horizontal', 'px-4'],
['font-size', 'text-base'],
]),
passwordButton: new Map([
['right', 'right-4']
]),
caption: new Map([
['font-size', 'text-sm']
])
});
const medium$4 = () => ({
label: new Map([
['font-size', 'text-sm']
]),
input: new Map([
['padding-vertical', 'py-2.5'],
['padding-horizontal', 'px-4'],
['font-size', 'text-sm'],
]),
passwordButton: new Map([
['right', 'right-4']
]),
caption: new Map([
['font-size', 'text-xs']
])
});
const small$4 = () => ({
label: new Map([
['font-size', 'text-xs']
]),
input: new Map([
['padding-vertical', 'py-2'],
['padding-horizontal', 'px-3'],
['font-size', 'text-xs'],
]),
passwordButton: new Map([
['right', 'right-3.5']
]),
caption: new Map([
['font-size', 'text-xs']
])
});
var Sizes$4 = {
large: large$4,
medium: medium$4,
small: small$4
};
const wrapper$6 = () => new Map([
['width', 'w-full'],
['display', 'flex'],
['flex-direction', 'flex-col'],
['align-items', 'items-start'],
['justify-content', 'justify-center'],
['gap', 'gap-1.5']
]);
const label$3 = () => new Map([
['width', 'w-full'],
['color', 'text-grayscale-100'],
// Disabled state
['disabled-color', 'peer-disabled/input:text-grayscale-60']
]);
const inputWrapper$1 = () => new Map([
['position', 'relative']
]);
const input$3 = () => new Map([
['peer', 'peer/input'],
['border-width', 'border'],
['border-style', 'border-solid'],
['border-color', 'border-grayscale-40'],
['border-radius', 'rounded-md'],
['background-color', 'bg-white-100'],
['color', 'text-grayscale-100'],
['outline', 'outline-0'],
// Hover state
['hover-border-color', 'hover:border-primary-50'],
// Focus state
['focus-border-color', 'focus:border-primary-50'],
// Disabled state
['disabled-cursor', 'disabled:cursor-not-allowed'],
['disabled-border-color', 'disabled:border-grayscale-60'],
['disabled-color', 'disabled:text-grayscale-40'],
['disabled-background', 'disabled:bg-grayscale-5'],
// Invalid (Alert) state
['invalid-border-color', 'invalid:border-support-alert-50'],
// Placeholder state
['placeholder-color', 'text-grayscale-80'],
['placeholder-font-size', 'text-base'],
// Password Icon
['after-icon', 'after:content: "\f002"']
]);
const passwordButton = () => new Map([
['position', 'absolute'],
['position-vertical', 'inset-y-0']
]);
const caption = () => new Map([
// Disabled state
['disabled-color', 'peer-disabled/input:text-grayscale-60'],
// Invalid state
['invalid-color', 'peer-invalid/input:text-support-alert-50'],
]);
var Themes$a = {
wrapper: wrapper$6,
label: label$3,
inputWrapper: inputWrapper$1,
input: input$3,
passwordButton,
caption
};
class InputStyles {
constructor({ additionalClasses, size }) {
this.sizes = {
large: Sizes$4.large(),
medium: Sizes$4.medium(),
small: Sizes$4.small()
};
this.themes = {
wrapper: Themes$a.wrapper(),
label: Themes$a.label(),
inputWrapper: Themes$a.inputWrapper(),
input: Themes$a.input(),
passwordButton: Themes$a.passwordButton(),
caption: Themes$a.caption()
};
this.additionalClasses = {
wrapper: (additionalClasses === null || additionalClasses === void 0 ? void 0 : additionalClasses.wrapper) || [],
label: (additionalClasses === null || additionalClasses === void 0 ? void 0 : additionalClasses.label) || [],
inputWrapper: (additionalClasses === null || additionalClasses === void 0 ? void 0 : additionalClasses.inputWrapper) || [],
input: (additionalClasses === null || additionalClasses === void 0 ? void 0 : additionalClasses.input) || [],
passwordButton: (additionalClasses === null || additionalClasses === void 0 ? void 0 : additionalClasses.passwordButton) || [],
caption: (additionalClasses === null || additionalClasses === void 0 ? void 0 : additionalClasses.caption) || [],
};
this.size = size;
}
getThemeRules(component) {
return this.themes[component];
}
getSizeRules(component) {
return this.sizes[this.size][component];
}
;
buildStyleRules() {
const classes = {
wrapperClass: [
...this.getThemeRules('wrapper').values(),
...this.additionalClasses.wrapper
].join(' '),
labelClass: [
...this.getThemeRules('label').values(),
...this.getSizeRules('label').values(),
...this.additionalClasses.label
].join(' '),
inputWrapperClass: [
...this.getThemeRules('inputWrapper').values(),
...this.additionalClasses.inputWrapper
].join(' '),
inputClass: [
...this.getThemeRules('input').values(),
...this.getSizeRules('input').values(),
...this.additionalClasses.input
].join(' '),
passwordButtonClass: [
...this.getThemeRules('passwordButton').values(),
...this.getSizeRules('passwordButton').values(),
...this.additionalClasses.passwordButton
].join(' '),
captionClass: [
...this.getThemeRules('caption').values(),
...this.getSizeRules('caption').values(),
...this.additionalClasses.caption
].join(' ')
};
return classes;
}
;
}
function ownKeys$1(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
enumerableOnly && (symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
})), keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2$1(target) {
for (var i = 1; i < arguments.length; i++) {
var source = null != arguments[i] ? arguments[i] : {};
i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) {
_defineProperty$1(target, key, source[key]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
return target;
}
function _typeof$1(obj) {
"@babel/helpers - typeof";
return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
return typeof obj;
} : function (obj) {
return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
}, _typeof$1(obj);
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
Object.defineProperty(Constructor, "prototype", {
writable: false
});
return Constructor;
}
function _defineProperty$1(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
}
function _toConsumableArray$1(arr) {
return _arrayWithoutHoles$1(arr) || _iterableToArray$1(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread$1();
}
function _arrayWithoutHoles$1(arr) {
if (Array.isArray(arr)) return _arrayLikeToArray$1(arr);
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArray$1(iter) {
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
}
function _iterableToArrayLimit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null) return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray$1(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray$1(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen);
}
function _arrayLikeToArray$1(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableSpread$1() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
var noop = function 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 _ref = _WINDOW.navigator || {},
_ref$userAgent = _ref.userAgent,
userAgent = _ref$userAgent === void 0 ? '' : _ref$userAgent;
var WINDOW = _WINDOW;
var DOCUMENT = _DOCUMENT;
var MUTATION_OBSERVER = _MUTATION_OBSERVER;
var PERFORMANCE = _PERFORMANCE;
!!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 _familyProxy, _familyProxy2, _familyProxy3, _familyProxy4, _familyProxy5;
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$1 = function () {
try {
return process.env.NODE_ENV === 'production';
} catch (e) {
return false;
}
}();
var FAMILY_CLASSIC = 'classic';
var FAMILY_SHARP = 'sharp';
var FAMILIES = [FAMILY_CLASSIC, FAMILY_SHARP];
function familyProxy(obj) {
// Defaults to the classic family if family is not available
return new Proxy(obj, {
get: function get(target, prop) {
return prop in target ? target[prop] : target[FAMILY_CLASSIC];
}
});
}
var PREFIX_TO_STYLE = familyProxy((_familyProxy = {}, _defineProperty$1(_familyProxy, FAMILY_CLASSIC, {
'fa': 'solid',
'fas': 'solid',
'fa-solid': 'solid',
'far': 'regular',
'fa-regular': 'regular',
'fal': 'light',
'fa-light': 'light',
'fat': 'thin',
'fa-thin': 'thin',
'fad': 'duotone',
'fa-duotone': 'duotone',
'fab': 'brands',
'fa-brands': 'brands',
'fak': 'kit',
'fa-kit': 'kit'
}), _defineProperty$1(_familyProxy, FAMILY_SHARP, {
'fa': 'solid',
'fass': 'solid',
'fa-solid': 'solid',
'fasr': 'regular',
'fa-regular': 'regular',
'fasl': 'light',
'fa-light': 'light'
}), _familyProxy));
var STYLE_TO_PREFIX = familyProxy((_familyProxy2 = {}, _defineProperty$1(_familyProxy2, FAMILY_CLASSIC, {
'solid': 'fas',
'regular': 'far',
'light': 'fal',
'thin': 'fat',
'duotone': 'fad',
'brands': 'fab',
'kit': 'fak'
}), _defineProperty$1(_familyProxy2, FAMILY_SHARP, {
'solid': 'fass',
'regular': 'fasr',
'light': 'fasl'
}), _familyProxy2));
var PREFIX_TO_LONG_STYLE = familyProxy((_familyProxy3 = {}, _defineProperty$1(_familyProxy3, FAMILY_CLASSIC, {
'fab': 'fa-brands',
'fad': 'fa-duotone',
'fak': 'fa-kit',
'fal': 'fa-light',
'far': 'fa-regular',
'fas': 'fa-solid',
'fat': 'fa-thin'
}), _defineProperty$1(_familyProxy3, FAMILY_SHARP, {
'fass': 'fa-solid',
'fasr': 'fa-regular',
'fasl': 'fa-light'
}), _familyProxy3));
var LONG_STYLE_TO_PREFIX = familyProxy((_familyProxy4 = {}, _defineProperty$1(_familyProxy4, FAMILY_CLASSIC, {
'fa-brands': 'fab',
'fa-duotone': 'fad',
'fa-kit': 'fak',
'fa-light': 'fal',
'fa-regular': 'far',
'fa-solid': 'fas',
'fa-thin': 'fat'
}), _defineProperty$1(_familyProxy4, FAMILY_SHARP, {
'fa-solid': 'fass',
'fa-regular': 'fasr',
'fa-light': 'fasl'
}), _familyProxy4));
var ICON_SELECTION_SYNTAX_PATTERN = /fa(s|r|l|t|d|b|k|ss|sr|sl)?[\-\ ]/; // eslint-disable-line no-useless-escape
var LAYERS_TEXT_CLASSNAME = 'fa-layers-text';
var FONT_FAMILY_PATTERN = /Font ?Awesome ?([56 ]*)(Solid|Regular|Light|Thin|Duotone|Brands|Free|Pro|Sharp|Kit)?.*/i;
var FONT_WEIGHT_TO_PREFIX = familyProxy((_familyProxy5 = {}, _defineProperty$1(_familyProxy5, FAMILY_CLASSIC, {
'900': 'fas',
'400': 'far',
'normal': 'far',
'300': 'fal',
'100': 'fat'
}), _defineProperty$1(_familyProxy5, FAMILY_SHARP, {
'900': 'fass',
'400': 'fasr',
'300': 'fasl'
}), _familyProxy5));
var oneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var oneToTwenty = oneToTen.concat([11, 12, 13, 14, 15, 16, 17, 18, 19, 20]);
var ATTRIBUTES_WATCHED_FOR_MUTATION = ['class', 'data-prefix', 'data-icon', 'data-fa-transform', 'data-fa-mask'];
var DUOTONE_CLASSES = {
GROUP: 'duotone-group',
SWAP_OPACITY: 'swap-opacity',
PRIMARY: 'primary',
SECONDARY: 'secondary'
};
var prefixes = new Set();
Object.keys(STYLE_TO_PREFIX[FAMILY_CLASSIC]).map(prefixes.add.bind(prefixes));
Object.keys(STYLE_TO_PREFIX[FAMILY_SHARP]).map(prefixes.add.bind(prefixes));
var RESERVED_CLASSES = [].concat(FAMILIES, _toConsumableArray$1(prefixes), ['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', DUOTONE_CLASSES.GROUP, DUOTONE_CLASSES.SWAP_OPACITY, DUOTONE_CLASSES.PRIMARY, DUOTONE_CLASSES.SECONDARY]).concat(oneToTen.map(function (n) {
return "".concat(n, "x");
})).concat(oneToTwenty.map(function (n) {
return "w-".concat(n);
}));
var initial = WINDOW.FontAwesomeConfig || {};
function getAttrConfig(attr) {
var element = DOCUMENT.querySelector('script[' + attr + ']');
if (element) {
return element.getAttribute(attr);
}
}
function coerce(val) {
// Getting an empty string will occur if the attribute is set on the HTML tag but without a value
// We'll assume that this is an indication that it should be toggled to true
if (val === '') return true;
if (val === 'false') return false;
if (val === 'true') return true;
return val;
}
if (DOCUMENT && typeof DOCUMENT.querySelector === 'function') {
var 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(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
attr = _ref2[0],
key = _ref2[1];
var val = coe