@cbpds/web-components
Version:
Web components for the CBP Design System.
387 lines (381 loc) • 46.1 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-0f6e3adc.js';
import { c as createNamespaceKey, s as setCSSProps, f as getElementAttrs } from './utils-475ba472.js';
const cbpButtonCss = ":root{--cbp-button-color:var(--cbp-color-text-lightest);--cbp-button-color-hover:var(--cbp-color-text-lightest);--cbp-button-color-focus:var(--cbp-color-text-lightest);--cbp-button-color-active:var(--cbp-color-text-lightest);--cbp-button-color-bg:var(--cbp-color-interactive-primary-dark);--cbp-button-color-bg-hover:var(--cbp-color-interactive-primary-darker);--cbp-button-color-bg-focus:var(--cbp-color-interactive-focus-dark);--cbp-button-color-bg-active:var(--cbp-color-interactive-active-dark);--cbp-button-color-border:var(--cbp-color-interactive-primary-dark);--cbp-button-color-border-hover:var(--cbp-color-interactive-primary-darker);--cbp-button-color-border-focus:var(--cbp-color-interactive-focus-dark);--cbp-button-color-border-active:var(--cbp-color-interactive-active-dark);--cbp-button-color-dark:var(--cbp-color-text-darkest);--cbp-button-color-hover-dark:var(--cbp-color-text-darkest);--cbp-button-color-focus-dark:var(--cbp-color-text-darkest);--cbp-button-color-active-dark:var(--cbp-color-text-darkest);--cbp-button-color-bg-dark:var(--cbp-color-interactive-primary-base);--cbp-button-color-bg-hover-dark:var(--cbp-color-interactive-primary-light);--cbp-button-color-bg-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-button-color-bg-active-dark:var(--cbp-color-interactive-active-light);--cbp-button-color-border-dark:var(--cbp-color-interactive-primary-base);--cbp-button-color-border-hover-dark:var(--cbp-color-interactive-primary-light);--cbp-button-color-border-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-button-color-border-active-dark:var(--cbp-color-interactive-active-light);--cbp-button-color-outline-focus:var(--cbp-color-white);--cbp-button-color-outline-focus-dark:var(--cbp-color-black);--cbp-button-focus-outline-width:var(--cbp-border-size-md);--cbp-button-padding:var(--cbp-space-2x);--cbp-button-border-width:var(--cbp-border-size-md);--cbp-button-border-style:solid;--cbp-button-border-radius:var(--cbp-border-radius-soft);--cbp-button-min-width:auto;--cbp-button-min-height:2.25rem;--cbp-button-width:auto;--cbp-button-height:auto;--cbp-button-gap:0 var(--cbp-space-2x)}[data-cbp-theme=light] cbp-button[context*=dark]:not(#fakeId),[data-cbp-theme=dark] cbp-button:not([context=dark-inverts]):not([context=light-always]):not(#fakeId){--cbp-button-color:var(--cbp-button-color-dark);--cbp-button-color-hover:var(--cbp-button-color-hover-dark);--cbp-button-color-focus:var(--cbp-button-color-focus-dark);--cbp-button-color-active:var(--cbp-button-color-active-dark);--cbp-button-color-bg:var(--cbp-button-color-bg-dark);--cbp-button-color-bg-hover:var(--cbp-button-color-bg-hover-dark);--cbp-button-color-bg-focus:var(--cbp-button-color-bg-focus-dark);--cbp-button-color-bg-active:var(--cbp-button-color-bg-active-dark);--cbp-button-color-border:var(--cbp-button-color-border-dark);--cbp-button-color-border-hover:var(--cbp-button-color-border-hover-dark);--cbp-button-color-border-focus:var(--cbp-button-color-border-focus-dark);--cbp-button-color-border-active:var(--cbp-button-color-border-active-dark);--cbp-button-color-outline-focus:var(--cbp-button-color-outline-focus-dark)}cbp-button{display:inline-block;width:var(--cbp-button-width);height:var(--cbp-button-height)}cbp-button button,cbp-button a{display:inline-flex;gap:var(--cbp-button-gap);align-items:center;justify-content:center;border-width:var(--cbp-button-border-width);border-style:solid;border-radius:var(--cbp-button-border-radius);font-weight:var(--cbp-font-weight-medium);text-transform:uppercase;letter-spacing:var(--cbp-letter-spacing-loose);text-decoration:none;padding:var(--cbp-button-padding);transition:all var(--cbp-motion-duration-shorter);min-width:var(--cbp-button-min-width);min-height:var(--cbp-button-min-height);width:var(--cbp-button-width);height:var(--cbp-button-height);white-space:nowrap;cursor:pointer;color:var(--cbp-button-color);background-color:var(--cbp-button-color-bg);border-color:var(--cbp-button-color-border);outline-color:var(--cbp-button-color-outline-focus);outline-style:solid;outline-width:0;outline-offset:calc(-1 * var(--cbp-space-1x))}cbp-button button:hover,cbp-button a:hover{--cbp-button-color:var(--cbp-button-color-hover);--cbp-button-color-bg:var(--cbp-button-color-bg-hover);--cbp-button-color-border:var(--cbp-button-color-border-hover)}cbp-button button:focus,cbp-button a:focus{--cbp-button-color:var(--cbp-button-color-focus);--cbp-button-color-bg:var(--cbp-button-color-bg-focus);--cbp-button-color-border:var(--cbp-button-color-border-focus);outline-width:var(--cbp-button-focus-outline-width)}cbp-button button:active,cbp-button a:active{--cbp-button-color:var(--cbp-button-color-active);--cbp-button-color-bg:var(--cbp-button-color-bg-active);--cbp-button-color-border:var(--cbp-button-color-border-active)}cbp-button[fill=solid]{--cbp-button-color:var(--cbp-color-text-lightest);--cbp-button-color-hover:var(--cbp-color-text-lightest);--cbp-button-color-dark:var(--cbp-color-text-darkest);--cbp-button-color-hover-dark:var(--cbp-color-text-darkest)}cbp-button[fill=solid][color=primary]{--cbp-button-color-bg:var(--cbp-color-interactive-primary-dark);--cbp-button-color-bg-hover:var(--cbp-color-interactive-primary-darker);--cbp-button-color-border:var(--cbp-color-interactive-primary-dark);--cbp-button-color-border-hover:var(--cbp-color-interactive-primary-darker);--cbp-button-color-bg-dark:var(--cbp-color-interactive-primary-light);--cbp-button-color-bg-hover-dark:var(--cbp-color-interactive-primary-lighter);--cbp-button-color-border-dark:var(--cbp-color-interactive-primary-light);--cbp-button-color-border-hover-dark:var(--cbp-color-interactive-primary-lighter)}cbp-button[fill=solid][color=secondary]{--cbp-button-color-bg:var(--cbp-color-interactive-secondary-dark);--cbp-button-color-bg-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-border:var(--cbp-color-interactive-secondary-dark);--cbp-button-color-border-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-bg-dark:var(--cbp-color-interactive-secondary-light);--cbp-button-color-bg-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-button-color-border-dark:var(--cbp-color-interactive-secondary-light);--cbp-button-color-border-hover-dark:var(--cbp-color-interactive-secondary-lighter)}cbp-button[fill=solid][color=tertiary]{--cbp-button-color-bg:var(--cbp-color-interactive-secondary-base);--cbp-button-color-bg-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-border:var(--cbp-color-interactive-secondary-base);--cbp-button-color-border-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-dark:var(--cbp-color-text-lightest);--cbp-button-color-bg-dark:var(--cbp-color-interactive-secondary-base);--cbp-button-color-bg-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-button-color-border-dark:var(--cbp-color-interactive-secondary-base);--cbp-button-color-border-hover-dark:var(--cbp-color-interactive-secondary-lighter)}cbp-button[fill=solid][color=danger]{--cbp-button-color-bg:var(--cbp-color-danger-dark);--cbp-button-color-bg-hover:var(--cbp-color-danger-darker);--cbp-button-color-border:var(--cbp-color-danger-dark);--cbp-button-color-border-hover:var(--cbp-color-danger-darker);--cbp-button-color-bg-dark:var(--cbp-color-danger-light);--cbp-button-color-bg-hover-dark:var(--cbp-color-danger-lighter);--cbp-button-color-border-dark:var(--cbp-color-danger-light);--cbp-button-color-border-hover-dark:var(--cbp-color-danger-lighter)}cbp-button[fill=solid]:has(button:disabled),cbp-button[fill=solid]:has(a[aria-disabled=true]){--cbp-button-color:var(--cbp-color-interactive-disabled-light);--cbp-button-color-hover:var(--cbp-button-color);--cbp-button-color-focus:var(--cbp-button-color);--cbp-button-color-active:var(--cbp-button-color);--cbp-button-color-bg:var(--cbp-color-interactive-disabled-dark);--cbp-button-color-bg-hover:var(--cbp-button-color-bg);--cbp-button-color-bg-focus:var(--cbp-button-color-bg);--cbp-button-color-bg-active:var(--cbp-button-color-bg);--cbp-button-color-border:var(--cbp-color-interactive-disabled-dark);--cbp-button-color-border-hover:var(--cbp-button-color-border);--cbp-button-color-border-focus:var(--cbp-button-color-border);--cbp-button-color-border-active:var(--cbp-button-color-border);--cbp-button-color-dark:var(--cbp-color-interactive-disabled-dark);--cbp-button-color-hover-dark:var(--cbp-button-color-dark);--cbp-button-color-focus-dark:var(--cbp-button-color-dark);--cbp-button-color-active-dark:var(--cbp-button-color-dark);--cbp-button-color-bg-dark:var(--cbp-color-interactive-disabled-light);--cbp-button-color-bg-hover-dark:var(--cbp-button-color-bg-dark);--cbp-button-color-bg-focus-dark:var(--cbp-button-color-bg-dark);--cbp-button-color-bg-active-dark:var(--cbp-button-color-bg-dark);--cbp-button-color-border-dark:var(--cbp-color-interactive-disabled-light);--cbp-button-color-border-hover-dark:var(--cbp-button-color-border-dark);--cbp-button-color-border-focus-dark:var(--cbp-button-color-border-dark);--cbp-button-color-border-active-dark:var(--cbp-button-color-border-dark)}cbp-button[fill=outline]{--cbp-button-color-bg:var(--cbp-color-white);--cbp-button-color-hover:var(--cbp-color-text-lightest);--cbp-button-color-bg-dark:var(--cbp-color-gray-cool-80);--cbp-button-color-hover-dark:var(--cbp-color-text-darkest)}cbp-button[fill=outline][color=primary]{--cbp-button-color:var(--cbp-color-interactive-primary-dark);--cbp-button-color-bg-hover:var(--cbp-color-interactive-primary-dark);--cbp-button-color-border:var(--cbp-color-interactive-primary-dark);--cbp-button-color-border-hover:var(--cbp-color-interactive-primary-dark);--cbp-button-color-dark:var(--cbp-color-interactive-primary-light);--cbp-button-color-bg-hover-dark:var(--cbp-color-interactive-primary-light);--cbp-button-color-border-dark:var(--cbp-color-interactive-primary-light);--cbp-button-color-border-hover-dark:var(--cbp-color-interactive-primary-light)}cbp-button[fill=outline][color=secondary]{--cbp-button-color:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-bg-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-border:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-border-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-button-color-bg-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-button-color-border-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-button-color-border-hover-dark:var(--cbp-color-interactive-secondary-lighter)}cbp-button[fill=outline][color=tertiary]{--cbp-button-color:var(--cbp-color-interactive-secondary-base);--cbp-button-color-bg-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-border:var(--cbp-color-interactive-secondary-base);--cbp-button-color-border-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-dark:var(--cbp-color-interactive-secondary-base);--cbp-button-color-bg-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-button-color-border-dark:var(--cbp-color-interactive-secondary-base);--cbp-button-color-border-hover-dark:var(--cbp-color-interactive-secondary-lighter)}cbp-button[fill=outline][color=danger]{--cbp-button-color:var(--cbp-color-danger-dark);--cbp-button-color-bg-hover:var(--cbp-color-danger-dark);--cbp-button-color-border:var(--cbp-color-danger-dark);--cbp-button-color-border-hover:var(--cbp-color-danger-darker);--cbp-button-color-dark:var(--cbp-color-danger-light);--cbp-button-color-bg-hover-dark:var(--cbp-color-danger-light);--cbp-button-color-border-dark:var(--cbp-color-danger-light);--cbp-button-color-border-hover-dark:var(--cbp-color-danger-light)}cbp-button[fill=outline]:has(button:disabled),cbp-button[fill=outline]:has(a[aria-disabled=true]){--cbp-button-color:var(--cbp-color-interactive-disabled-dark);--cbp-button-color-hover:var(--cbp-button-color);--cbp-button-color-focus:var(--cbp-button-color);--cbp-button-color-active:var(--cbp-button-color);--cbp-button-color-bg:var(--cbp-color-white);--cbp-button-color-bg-hover:var(--cbp-color-white);--cbp-button-color-bg-focus:var(--cbp-color-white);--cbp-button-color-bg-active:var(--cbp-color-white);--cbp-button-color-border:var(--cbp-color-interactive-disabled-dark);--cbp-button-color-border-hover:var(--cbp-button-color-border);--cbp-button-color-border-focus:var(--cbp-button-color-border);--cbp-button-color-border-active:var(--cbp-button-color-border);--cbp-button-color-dark:var(--cbp-color-interactive-disabled-light);--cbp-button-color-hover-dark:var(--cbp-button-color-dark);--cbp-button-color-focus-dark:var(--cbp-button-color-dark);--cbp-button-color-active-dark:var(--cbp-button-color-dark);--cbp-button-color-bg-dark:var(--cbp-color-gray-cool-80);--cbp-button-color-bg-hover-dark:var(--cbp-button-color-bg-dark);--cbp-button-color-bg-focus-dark:var(--cbp-button-color-bg-dark);--cbp-button-color-bg-active-dark:var(--cbp-button-color-bg-dark);--cbp-button-color-border-dark:var(--cbp-color-interactive-disabled-light);--cbp-button-color-border-hover-dark:var(--cbp-button-color-border-dark);--cbp-button-color-border-focus-dark:var(--cbp-button-color-border-dark);--cbp-button-color-border-active-dark:var(--cbp-button-color-border-dark)}cbp-button[fill=ghost]{--cbp-button-color-bg:transparent;--cbp-button-color-border:transparent;--cbp-button-color-bg-dark:transparent;--cbp-button-color-border-dark:transparent}cbp-button[fill=ghost][color=primary]{--cbp-button-color:var(--cbp-color-interactive-primary-dark);--cbp-button-color-hover:var(--cbp-color-text-lightest);--cbp-button-color-bg-hover:var(--cbp-color-interactive-primary-dark);--cbp-button-color-border-hover:var(--cbp-color-interactive-primary-dark);--cbp-button-color-dark:var(--cbp-color-interactive-primary-light);--cbp-button-color-hover-dark:var(--cbp-color-text-darkest);--cbp-button-color-bg-hover-dark:var(--cbp-color-interactive-primary-light);--cbp-button-color-border-hover-dark:var(--cbp-color-interactive-primary-light)}cbp-button[fill=ghost][color=secondary]{--cbp-button-color:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-hover:var(--cbp-color-text-lightest);--cbp-button-color-bg-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-border-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-button-color-hover-dark:var(--cbp-color-text-darkest);--cbp-button-color-bg-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-button-color-border-hover-dark:var(--cbp-color-interactive-secondary-lighter)}cbp-button[fill=ghost][color=tertiary]{--cbp-button-color:var(--cbp-color-interactive-secondary-base);--cbp-button-color-hover:var(--cbp-color-text-lightest);--cbp-button-color-bg-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-border-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-dark:var(--cbp-color-interactive-secondary-light);--cbp-button-color-hover-dark:var(--cbp-color-text-darkest);--cbp-button-color-bg-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-button-color-border-hover-dark:var(--cbp-color-interactive-secondary-lighter)}cbp-button[fill=ghost][color=danger]{--cbp-button-color:var(--cbp-color-danger-dark);--cbp-button-color-hover:var(--cbp-color-text-lightest);--cbp-button-color-bg-hover:var(--cbp-color-danger-dark);--cbp-button-color-border-hover:var(--cbp-color-danger-dark);--cbp-button-color-dark:var(--cbp-color-danger-light);--cbp-button-color-hover-dark:var(--cbp-color-text-darkest);--cbp-button-color-bg-hover-dark:var(--cbp-color-danger-light);--cbp-button-color-border-hover-dark:var(--cbp-color-danger-light)}cbp-button[fill=ghost]:has(button:disabled),cbp-button[fill=ghost]:has(a[aria-disabled=true]){--cbp-button-color:var(--cbp-color-interactive-disabled-dark);--cbp-button-color-hover:var(--cbp-button-color);--cbp-button-color-focus:var(--cbp-button-color);--cbp-button-color-active:var(--cbp-button-color);--cbp-button-color-bg-hover:transparent;--cbp-button-color-bg-focus:transparent;--cbp-button-color-bg-active:transparent;--cbp-button-color-border-hover:transparent;--cbp-button-color-border-focus:transparent;--cbp-button-color-border-active:transparent;--cbp-button-color-dark:var(--cbp-color-interactive-disabled-light);--cbp-button-color-hover-dark:var(--cbp-button-color-dark);--cbp-button-color-focus-dark:var(--cbp-button-color-dark);--cbp-button-color-active-dark:var(--cbp-button-color-dark);--cbp-button-color-bg-hover-dark:transparent;--cbp-button-color-bg-focus-dark:transparent;--cbp-button-color-bg-active-dark:transparent;--cbp-button-color-border-hover-dark:transparent;--cbp-button-color-border-focus-dark:transparent;--cbp-button-color-border-active-dark:transparent}cbp-button[variant=square] button,cbp-button[variant=square] a{--cbp-button-height:2.25rem;--cbp-button-width:var(--cbp-button-height);padding:unset;letter-spacing:unset}cbp-button[variant=cta] button,cbp-button[variant=cta] a{font-size:var(--cbp-font-size-heading-sm);padding-left:var(--cbp-space-4x);padding-right:var(--cbp-space-4x);min-height:3.25rem}cbp-button button:disabled,cbp-button a[aria-disabled=true]{font-style:italic;outline:0;cursor:not-allowed}";
const CbpButtonStyle0 = cbpButtonCss;
const CbpButton = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.buttonClick = createEvent(this, "buttonClick", 7);
this.componentLoad = createEvent(this, "componentLoad", 7);
this.tag = 'button';
this.type = 'button';
this.fill = 'solid';
this.color = 'primary';
this.variant = undefined;
this.controlId = createNamespaceKey('cbp-button');
this.name = undefined;
this.value = undefined;
this.href = undefined;
this.rel = undefined;
this.target = undefined;
this.download = undefined;
this.width = undefined;
this.height = undefined;
this.pressed = undefined;
this.expanded = undefined;
this.controls = undefined;
this.targetProp = undefined;
this.accessibilityText = undefined;
this.disabled = undefined;
this.context = undefined;
this.sx = {};
}
handleClick(e) {
var _a;
if (this.controls) {
if (!this.controlTarget)
this.controlTarget = document.querySelector(`#${this.controls}`);
if (this.controlTarget) {
this.controlTarget[this.targetProp] = !this.controlTarget[this.targetProp];
}
else {
console.warn('cbp-button configuration error: the control target referenced by ID by the `control` property could not be found.');
}
}
(_a = this.buttonClick) === null || _a === void 0 ? void 0 : _a.emit({
host: this.host,
nativeElement: this.button,
nativeEvent: e,
controls: this.controls ? this.controls : null,
pressed: this.pressed,
expanded: this.expanded,
name: this.button.tagName == 'BUTTON' ? this.button.name : null,
value: this.button.tagName == 'BUTTON' ? this.button.value : null,
});
}
componentWillLoad() {
this.controlTarget = this.controls ? document.querySelector(`#${this.controls}`) : undefined;
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
let hostattrs = getElementAttrs(this.host);
this.persistedAttrs = Object.fromEntries(Object.entries(hostattrs).filter(([key]) => (key.includes('aria-') || key == 'role')));
}
componentDidLoad() {
if (!this.button) {
const slottedButton = (this.button = this.host.querySelector('button,a'));
if (slottedButton) {
this.button = slottedButton;
this.button.addEventListener('click', this.handleClick);
}
}
if (this.button) {
this.button.getAttribute('id')
? this.controlId = this.button.getAttribute('id')
: this.button.setAttribute('id', `${this.controlId}`);
if (this.disabled)
this.button.setAttribute('disabled', '');
}
setCSSProps(this.button, {
'min-width': this.width,
'min-height': this.height,
});
for (const [key] of Object.entries(this.persistedAttrs)) {
this.host.removeAttribute(key);
}
this.componentLoad.emit({
host: this.host,
nativeElement: this.button,
name: this.button.tagName == 'BUTTON' ? this.button.name : null,
value: this.button.tagName == 'BUTTON' ? this.button.value : null,
});
}
render() {
const { type, name, value, disabled, rel, target, href, download } = this;
const attrs = this.tag === 'button'
? {
type,
name,
value,
disabled,
}
: {
download,
href,
rel,
target,
};
if (this.host.querySelector('[slot=cbp-button-custom]')) {
if (this.disabled)
this.button.setAttribute("disabled", '');
return (h(Host, { onClick: (e) => this.handleClick(e) }, h("slot", { name: "cbp-button-custom" })));
}
else if (this.tag === 'button') {
return (h(Host, { onClick: (e) => this.handleClick(e) }, h("button", Object.assign({}, this.persistedAttrs, attrs, { disabled: this.disabled, "aria-label": this.accessibilityText, "aria-pressed": this.pressed, "aria-expanded": this.expanded, "aria-controls": this.controls, ref: el => (this.button = el) }), h("slot", null))));
}
else {
return (h(Host, { onClick: (e) => this.handleClick(e) }, h("a", Object.assign({}, this.persistedAttrs, attrs, { "aria-label": this.accessibilityText, "aria-pressed": this.pressed, "aria-expanded": this.expanded, "aria-controls": this.controls, role: disabled ? 'link' : null, "aria-disabled": disabled ? 'true' : null, ref: el => (this.button = el) }), h("slot", null))));
}
}
get host() { return getElement(this); }
};
CbpButton.style = CbpButtonStyle0;
const cbpIconCss = ":root{--cbp-icon-color:currentColor;--cbp-icon-size:1rem}cbp-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:text-top}cbp-icon svg{width:var(--cbp-icon-size);height:var(--cbp-icon-size);fill:var(--cbp-icon-color);vertical-align:top}";
const CbpIconStyle0 = cbpIconCss;
const CbpIcon = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.icons = {
"address-book": {
name: 'address-book',
viewbox: "0 0 512 512",
path: "M96 0C60.7 0 32 28.7 32 64l0 384c0 35.3 28.7 64 64 64l288 0c35.3 0 64-28.7 64-64l0-384c0-35.3-28.7-64-64-64L96 0zM208 288l64 0c44.2 0 80 35.8 80 80c0 8.8-7.2 16-16 16l-192 0c-8.8 0-16-7.2-16-16c0-44.2 35.8-80 80-80zm-32-96a64 64 0 1 1 128 0 64 64 0 1 1 -128 0zM512 80c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8 7.2 16 16 16s16-7.2 16-16l0-64zM496 192c-8.8 0-16 7.2-16 16l0 64c0 8.8 7.2 16 16 16s16-7.2 16-16l0-64c0-8.8-7.2-16-16-16zm16 144c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8 7.2 16 16 16s16-7.2 16-16l0-64z",
},
"angle-down": {
name: "angle-down",
viewbox: "0 0 448 512",
path: "M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z",
},
"arrow-right": {
name: "arrow-right",
viewbox: "0 0 448 512",
path: "M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z",
},
"bars": {
name: "bars",
viewbox: "0 0 448 512",
path: "M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z",
},
'caret-down': {
name: "caret-down",
viewbox: "0 0 320 512",
path: "M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z",
},
'check': {
name: "check",
viewbox: "0 0 448 512",
path: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z",
},
"check-circle": {
name: 'check-circle',
viewbox: '0 0 512 512',
path: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z",
},
"chevron-right": {
name: "chevron-right",
viewbox: "0 0 320 512",
path: "M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z",
},
"circle-info": {
name: "circle-info",
viewbox: "0 0 512 512",
path: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z",
},
"circle-xmark": {
name: "circle-xmark",
viewbox: "0 0 512 512",
path: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z",
},
"clock": {
name: "clock",
viewbox: "0 0 512 512",
path: "M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120l0 136c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2 280 120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"
},
"clone": {
name: "clone",
viewbox: "0 0 512 512",
path: "M288 448L64 448l0-224 64 0 0-64-64 0c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l224 0c35.3 0 64-28.7 64-64l0-64-64 0 0 64zm-64-96l224 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L224 0c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64z"
},
"comment": {
name: "comment",
viewbox: "0 0 512 512",
path: "M512 240c0 114.9-114.6 208-256 208c-37.1 0-72.3-6.4-104.1-17.9c-11.9 8.7-31.3 20.6-54.3 30.6C73.6 471.1 44.7 480 16 480c-6.5 0-12.3-3.9-14.8-9.9c-2.5-6-1.1-12.8 3.4-17.4l0 0 0 0 0 0 0 0 .3-.3c.3-.3 .7-.7 1.3-1.4c1.1-1.2 2.8-3.1 4.9-5.7c4.1-5 9.6-12.4 15.2-21.6c10-16.6 19.5-38.4 21.4-62.9C17.7 326.8 0 285.1 0 240C0 125.1 114.6 32 256 32s256 93.1 256 208z",
},
"ellipsis-vertical": {
name: "ellipsis-vertical",
viewbox: "0 0 128 512",
path: "M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z",
},
"envelope": {
name: "eye",
viewbox: "0 0 512 512",
path: "M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z",
},
"exclamation-circle": {
name: "exclamation-circle",
viewbox: "0 0 512 512",
path: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z",
},
"external-link-alt": {
name: "external-link-alt",
viewbox: "0 0 512 512",
path: "M432 320H400a16 16 0 0 0 -16 16V448H64V128H208a16 16 0 0 0 16-16V80a16 16 0 0 0 -16-16H48A48 48 0 0 0 0 112V464a48 48 0 0 0 48 48H400a48 48 0 0 0 48-48V336A16 16 0 0 0 432 320zM488 0h-128c-21.4 0-32.1 25.9-17 41l35.7 35.7L135 320.4a24 24 0 0 0 0 34L157.7 377a24 24 0 0 0 34 0L435.3 133.3 471 169c15 15 41 4.5 41-17V24A24 24 0 0 0 488 0z",
},
"eye": {
name: "envelope",
viewbox: "0 0 576 512",
path: "M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z",
},
"eye-slash": {
name: "eye-slash",
viewbox: "0 0 640 512",
path: "M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z",
},
"file-lines": {
name: "file-lines",
viewbox: "0 0 384 512",
path: "M64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-288-128 0c-17.7 0-32-14.3-32-32L224 0 64 0zM256 0l0 128 128 0L256 0zM112 256l160 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-160 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64l160 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-160 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64l160 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-160 0c-8.8 0-16-7.2-16-16s7.2-16 16-16z",
},
"globe": {
name: "globe",
viewbox: "0 0 512 512",
path: "M352 256c0 22.2-1.2 43.6-3.3 64l-185.3 0c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64l185.3 0c2.2 20.4 3.3 41.8 3.3 64zm28.8-64l123.1 0c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64l-123.1 0c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32l-116.7 0c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0l-176.6 0c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0L18.6 160C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192l123.1 0c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64L8.1 320C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6l176.6 0c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352l116.7 0zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6l116.7 0z",
},
"headset": {
name: "headset",
viewbox: "0 0 512 512",
path: "M256 48C141.1 48 48 141.1 48 256l0 40c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-40C0 114.6 114.6 0 256 0S512 114.6 512 256l0 144.1c0 48.6-39.4 88-88.1 88L313.6 488c-8.3 14.3-23.8 24-41.6 24l-32 0c-26.5 0-48-21.5-48-48s21.5-48 48-48l32 0c17.8 0 33.3 9.7 41.6 24l110.4 .1c22.1 0 40-17.9 40-40L464 256c0-114.9-93.1-208-208-208zM144 208l16 0c17.7 0 32 14.3 32 32l0 112c0 17.7-14.3 32-32 32l-16 0c-35.3 0-64-28.7-64-64l0-48c0-35.3 28.7-64 64-64zm224 0c35.3 0 64 28.7 64 64l0 48c0 35.3-28.7 64-64 64l-16 0c-17.7 0-32-14.3-32-32l0-112c0-17.7 14.3-32 32-32l16 0z",
},
"home": {
name: "home",
viewbox: "0 0 576 512",
path: "M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"
},
"landmark": {
name: "landmark",
viewbox: "0 0 512 512",
path: "M240.1 4.2c9.8-5.6 21.9-5.6 31.8 0l171.8 98.1L448 104l0 .9 47.9 27.4c12.6 7.2 18.8 22 15.1 36s-16.4 23.8-30.9 23.8L32 192c-14.5 0-27.2-9.8-30.9-23.8s2.5-28.8 15.1-36L64 104.9l0-.9 4.4-1.6L240.1 4.2zM64 224l64 0 0 192 40 0 0-192 64 0 0 192 48 0 0-192 64 0 0 192 40 0 0-192 64 0 0 196.3c.6 .3 1.2 .7 1.8 1.1l48 32c11.7 7.8 17 22.4 12.9 35.9S494.1 512 480 512L32 512c-14.1 0-26.5-9.2-30.6-22.7s1.1-28.1 12.9-35.9l48-32c.6-.4 1.2-.7 1.8-1.1L64 224z",
},
"lock": {
name: "lock",
viewbox: "0 0 448 512",
path: "M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z"
},
"magnifying-glass": {
name: "magnifying-glass",
viewbox: "0 0 512 512",
path: "M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z",
},
"minus": {
name: "minus",
viewbox: "0 0 448 512",
path: "M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z",
},
"pen-to-square": {
name: "pen-to-square",
viewbox: "0 0 512 512",
path: "M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z",
},
"plus": {
name: "plus",
viewbox: "0 0 448 512",
path: "M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z",
},
"right-to-bracket": {
name: "right-to-bracket",
viewbox: "0 0 512 512",
path: "M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z",
},
"right-from-bracket": {
name: "right-from-bracket",
viewbox: "0 0 512 512",
path: "M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z",
},
"times": {
name: "times",
viewbox: "0 0 384 512",
path: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z",
},
"triangle-exclamation": {
name: "triangle-exclamation",
viewbox: "0 0 512 512",
path: "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z",
},
"up-right-from-square": {
name: "up-right-from-square",
viewbox: "0 0 512 512",
path: "M352 0c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9L370.7 96 201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L416 141.3l41.4 41.4c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V32c0-17.7-14.3-32-32-32H352zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z",
},
"upload": {
name: "upload",
viewbox: "0 0 512 512",
path: "M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z",
},
"book": {
name: "book",
viewbox: "0 0 448 512",
path: "M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z"
},
"circle": {
name: "circle",
viewbox: "0 0 512 512",
path: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"
},
"filter": {
name: "filter",
viewbox: "0 0 512 512",
path: "M3.9 54.9C10.5 40.9 24.5 32 40 32H472c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9V448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6V320.9L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z",
},
"sort-asc": {
name: "sort-asc",
viewbox: "0 0 576 512",
path: "M151.6 469.6C145.5 476.2 137 480 128 480s-17.5-3.8-23.6-10.4l-88-96c-11.9-13-11.1-33.3 2-45.2s33.3-11.1 45.2 2L96 365.7V64c0-17.7 14.3-32 32-32s32 14.3 32 32V365.7l32.4-35.4c11.9-13 32.2-13.9 45.2-2s13.9 32.2 2 45.2l-88 96zM320 32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 128h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 128H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 128H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32s14.3-32 32-32z",
},
"sort-desc": {
name: "sort-desc",
viewbox: "0 0 576 512",
path: "M151.6 469.6C145.5 476.2 137 480 128 480s-17.5-3.8-23.6-10.4l-88-96c-11.9-13-11.1-33.3 2-45.2s33.3-11.1 45.2 2L96 365.7V64c0-17.7 14.3-32 32-32s32 14.3 32 32V365.7l32.4-35.4c11.9-13 32.2-13.9 45.2-2s13.9 32.2 2 45.2l-88 96zM320 480c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H320z",
},
"square": {
name: "square",
viewbox: "0 0 448 512",
path: "M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96z"
},
"star": {
name: "star",
viewbox: "0 0 576 512",
path: "M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z"
},
"star-solid": {
name: "star",
viewbox: "0 0 576 512",
path: "M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z",
},
"user": {
name: "user",
viewbox: "0 0 448 512",
path: "M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z",
},
};
this.name = undefined;
this.src = undefined;
this.size = undefined;
this.color = undefined;
this.rotate = undefined;
this.accessibilityText = undefined;
this.sx = {};
}
componentWillRender() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({ "transform": this.rotate ? `rotate(${this.rotate}deg)` : undefined, "--cbp-icon-color": this.color, "--cbp-icon-size": this.size }, this.sx));
}
render() {
const Icon = this.name ? this.icons[this.name] : this.src || {};
if (this.name) {
return (h(Host, { key: 'ae2c2e0cefda43dd80ef3ae91e7f4950bae7d4a3' }, h("svg", { key: '5bfab637fd84e1348b71c8d434539274f9af632b', xmlns: "http://www.w3.org/2000/svg", viewBox: (Icon === null || Icon === void 0 ? void 0 : Icon.viewbox) || "0 0 512 512", "aria-label": this.accessibilityText, role: !this.accessibilityText ? "presentation" : null, "aria-hidden": !this.accessibilityText ? "true" : null }, h("path", { key: '29a9cffaefe9a5d13359e58b2a7300f3c9c1595d', d: Icon === null || Icon === void 0 ? void 0 : Icon.path }))));
}
else {
h(Host, { key: 'a825f41a9b4fd8fd6691ed04afb5bc69e9babfe6' }, h("slot", { key: 'f9e7faba166ad2ba72d882d037e90d3aac979559' }));
}
}
get host() { return getElement(this); }
};
CbpIcon.style = CbpIconStyle0;
export { CbpButton as cbp_button, CbpIcon as cbp_icon };
//# sourceMappingURL=cbp-button_2.entry.js.map