@freshworks/crayons
Version:
Crayons Web Components library
411 lines (401 loc) • 24.5 kB
JavaScript
import { r as registerInstance, c as createEvent, h, e as Host, i as getElement } from './index-25bc21e4.js';
import { t as throttle, h as hasSlot, a as handleKeyDown } from './index-04e9b0fa.js';
import { w as waitUntilVisible, a as unwatchIcon, g as getSVGElement, f as fetchIcon, b as getIconLibrary, c as watchIcon } from './crayons-7f310575.js';
import './toast-util-eb89e79f.js';
import './progress-loader-util-1fff4614.js';
import './_commonjsHelpers-9943807e.js';
import './format-date-util-cbbbafe3.js';
const buttonCss = ":host{font-family:var(--fw-font-family, -apple-system, blinkmacsystemfont, \"Segoe UI\", roboto, oxygen, ubuntu, cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;box-sizing:border-box}@media screen and (prefers-reduced-motion: reduce){.fw-btn,.fw-btn--label,.fw-btn--loader{-webkit-transition:none;transition:none}}:host{display:inline-block;width:auto;cursor:pointer}.fw-btn{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-line-pack:center;align-content:center;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:center;justify-content:center;width:100%;border-style:solid;border-width:1px;font-weight:600;font-family:inherit;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;padding:0;cursor:inherit;letter-spacing:0;outline:0;border-radius:4px;--fw-icon-color:currentColor}.fw-btn .fw-btn--label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.fw-btn:active:not(.fw-btn--loading){-webkit-box-shadow:inset 0 0 4px 0 rgba(0, 0, 0, 0.25);box-shadow:inset 0 0 4px 0 rgba(0, 0, 0, 0.25)}.fw-btn:focus{border:1px solid #2c5cc5;-webkit-box-shadow:0 0 0 1px #2c5cc5;box-shadow:0 0 0 1px #2c5cc5}.fw-btn.disabled,.fw-btn[disabled]{cursor:not-allowed}.fw-btn--primary{background-color:#264966;color:#fff;border-color:#12344d;background-image:-webkit-gradient(linear, left top, left bottom, from(#264966), to(#12344d));background-image:linear-gradient(to bottom, #264966, #12344d)}.fw-btn--primary:active{border-color:#264966}.fw-btn--primary:focus:not([disabled]),.fw-btn--primary:hover:not([disabled]){background-color:#12344d;background-image:none}.fw-btn--primary.disabled,.fw-btn--primary[disabled]{background-image:-webkit-gradient(linear, left top, left bottom, from(#92a2b1), to(#7b8e9f));background-image:linear-gradient(to bottom, #92a2b1, #7b8e9f);border-color:#7b8e9f;color:rgba(255, 255, 255, 0.5)}.fw-btn--secondary{background-color:#f5f7f9;color:#12344d;border-color:#cfd7df;background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#f5f7f9));background-image:linear-gradient(to bottom, #fff, #f5f7f9)}.fw-btn--secondary:active{border-color:#ebeff3}.fw-btn--secondary:focus:not([disabled]),.fw-btn--secondary:hover:not([disabled]){background-color:#f5f7f9;background-image:none}.fw-btn--secondary.disabled,.fw-btn--secondary[disabled]{background:#ebeff3;border-color:#cfd7df;color:#92a2b1}.fw-btn--danger{color:#fff;background-color:#d72d30;border-color:#c82124;background-image:-webkit-gradient(linear, left top, left bottom, from(#d72d30), to(#c82124));background-image:linear-gradient(to bottom, #d72d30, #c82124)}.fw-btn--danger:focus:not([disabled]),.fw-btn--danger:hover:not([disabled]){background-color:#c82124;background-image:none}.fw-btn--danger.disabled,.fw-btn--danger[disabled]{background-image:-webkit-gradient(linear, left top, left bottom, from(#f89fa1), to(#f2797b));background-image:linear-gradient(to bottom, #f89fa1, #f2797b);border-color:#f2797b;color:rgba(255, 255, 255, 0.5)}.fw-btn--link{background-color:transparent;background-image:none;border:1px solid transparent;color:#2c5cc5}.fw-btn--text{background-color:transparent;background-image:none;border:1px solid transparent;color:#264966}.fw-btn--text:focus:not([disabled]),.fw-btn--text:hover:not([disabled]){background-color:#ebeff3}.fw-btn--text:focus:not([disabled]),.fw-btn--text:hover:not([disabled]),.fw-btn--link:focus:not([disabled]),.fw-btn--link:hover:not([disabled]){border-color:#2c5cc5;-webkit-box-shadow:0 0 0 1px #2c5cc5;box-shadow:0 0 0 1px #2c5cc5}.fw-btn--text.disabled,.fw-btn--text[disabled],.fw-btn--link.disabled,.fw-btn--link[disabled]{opacity:0.5}.fw-btn--mini{height:16px;line-height:calc(16px - 1px * 2)}.fw-btn--mini .fw-btn--label{font-size:10px}.fw-btn--mini fw-spinner{-webkit-transform:scale(0.5);transform:scale(0.5)}.fw-btn--small{height:24px;line-height:calc(24px - 1px * 2)}.fw-btn--small .fw-btn--label{font-size:12px}.fw-btn--small fw-spinner{-webkit-transform:scale(0.75);transform:scale(0.75)}.fw-btn--normal{min-width:var(--fw-button-min-width, 80px);height:32px;line-height:calc(32px - 1px * 2)}.fw-btn--icon{min-width:32px;width:32px;height:32px;padding:0;line-height:calc(32px - 1px * 2)}.fw-btn--icon-small{min-width:24px;width:24px;height:22px;padding:0;line-height:calc(22px - 1px * 2)}.fw-btn--before,.fw-btn--after,.fw-btn--caret{-ms-flex:0 0 auto;flex:0 0 auto;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.fw-btn--normal ::slotted(fw-icon){--fw-icon-size:12px}.fw-btn--small ::slotted(fw-icon){--fw-icon-size:10px}.fw-btn--mini ::slotted(fw-icon){--fw-icon-size:8px}.fw-btn--has-label.fw-btn--normal .fw-btn--label{padding:0 var(--fw-button-label-vertical-padding, 12px)}.fw-btn--has-before.fw-btn--normal{padding-left:8px}.fw-btn--has-before.fw-btn--normal .fw-btn--label{padding-left:8px}.fw-btn--has-after.fw-btn--normal,.fw-btn--caret.fw-btn--normal{padding-right:8px}.fw-btn--has-after.fw-btn--normal .fw-btn--label,.fw-btn--caret.fw-btn--normal .fw-btn--label{padding-right:8px}.fw-btn--has-label.fw-btn--small .fw-btn--label{padding:0 var(--fw-button-label-vertical-padding, 8px)}.fw-btn--has-before.fw-btn--small{padding-left:6px}.fw-btn--has-before.fw-btn--small .fw-btn--label{padding-left:6px}.fw-btn--has-after.fw-btn--small,.fw-btn--caret.fw-btn--small{padding-right:6px}.fw-btn--has-after.fw-btn--small .fw-btn--label,.fw-btn--caret.fw-btn--small .fw-btn--label{padding-right:6px}.fw-btn--has-label.fw-btn--mini .fw-btn--label{padding:0 var(--fw-button-label-vertical-padding, 6px)}.fw-btn--has-before.fw-btn--mini{padding-left:4px}.fw-btn--has-before.fw-btn--mini .fw-btn--label{padding-left:4px}.fw-btn--has-after.fw-btn--mini,.fw-btn--caret.fw-btn--mini{padding-right:4px}.fw-btn--has-after.fw-btn--mini .fw-btn--label,.fw-btn--caret.fw-btn--mini .fw-btn--label{padding-right:4px}.fw-btn--caret fw-icon{--fw-icon-size:9px}.fw-btn--caret.fw-btn--mini fw-icon{--fw-icon-size:6px}.fw-btn--loading{position:relative;cursor:wait}.fw-btn--loading .fw-btn--label,.fw-btn--loading .fw-btn--before,.fw-btn--loading .fw-btn--after,.fw-btn--loading .fw-btn--caret{opacity:0}.fw-btn--loading .fw-btn--loader{--fw-spinner-color:currentColor;opacity:1;line-height:0}.fw-btn--label,.fw-btn--loader{-webkit-transition:opacity 0.3s ease-out;transition:opacity 0.3s ease-out}.fw-btn--loader{opacity:0;position:absolute;font-size:1em;height:1em;width:1em;top:calc(50% - 0.5em);left:calc(50% - 0.5em);margin-top:-1px;margin-left:-1px}:host(.fw-button-group__button--first:not(.fw-button-group__button--last)) .fw-btn{border-top-right-radius:0;border-bottom-right-radius:0}:host(.fw-button-group__button--inner) .fw-btn{border-radius:0;border-left:0}:host(.fw-button-group__button--last:not(.fw-button-group__button--first)) .fw-btn{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0}";
let Button = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.fwClick = createEvent(this, "fwClick", 7);
this.fwFocus = createEvent(this, "fwFocus", 7);
this.fwBlur = createEvent(this, "fwBlur", 7);
/**
* Button type based on which actions are performed when the button is clicked.
*/
this.type = 'button';
/**
* Identifier of the theme based on which the button is styled.
*/
this.color = 'primary';
/**
* Size of the button.
*/
this.size = 'normal';
/**
* Disables the button on the interface. Default value is false.
*/
this.disabled = false;
/**
* Loading state for the button, Default value is false.
*/
this.loading = false;
/**
* Caret indicator for the button, Default value is false.
*/
this.showCaretIcon = false;
/**
* Accepts the id of the fw-modal component to open it on click.
*/
this.modalTriggerId = '';
/**
* Accepts the id of the fw-file-uploader component to upload the file.
*/
this.fileUploaderId = '';
/**
* Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
*/
this.throttleDelay = 200;
this.hasLabel = false;
this.hasBeforeLabel = false;
this.hasAfterLabel = false;
}
async setFocus() {
this.button.focus();
}
onFocus() {
this.fwFocus.emit();
}
onBlur() {
this.fwBlur.emit();
}
connectedCallback() {
this.handleClickWithThrottle = throttle(this.handleClick, this, this.throttleDelay);
}
handlePreventDefault(event) {
event.preventDefault();
event.stopPropagation();
}
handleClick(event) {
if (this.modalTriggerId !== '') {
this.modalTrigger();
}
if (this.fileUploaderId !== '') {
this.fileSubmit();
}
else if (this.type === 'submit') {
this.fakeSubmit(event);
}
this.fwClick.emit();
}
async fileSubmit() {
const fileUploader = document.querySelector(`fw-file-uploader#${this.fileUploaderId}`);
fileUploader === null || fileUploader === void 0 ? void 0 : fileUploader.uploadFiles();
}
async modalTrigger() {
const modal = document.querySelector(`fw-modal#${this.modalTriggerId}`);
modal === null || modal === void 0 ? void 0 : modal.open();
}
async fakeSubmit(event) {
const form = this.host.closest('form');
if (form) {
event.preventDefault();
const fakeSubmit = document.createElement('button');
fakeSubmit.type = 'submit';
fakeSubmit.style.display = 'none';
form.appendChild(fakeSubmit);
fakeSubmit.click();
fakeSubmit.remove();
}
}
componentWillLoad() {
this.handleSlotChange();
}
handleSlotChange() {
this.hasLabel = hasSlot(this.host);
this.hasBeforeLabel = hasSlot(this.host, 'before-label');
this.hasAfterLabel = hasSlot(this.host, 'after-label');
}
render() {
return (h(Host, null, h("button", { type: this.type, class: `
fw-btn fw-btn--${this.color.toLowerCase()}
fw-btn--${this.size.toLowerCase()}
${this.loading ? 'fw-btn--loading' : ''}
${this.hasLabel ? 'fw-btn--has-label' : ''}
${this.hasBeforeLabel ? 'fw-btn--has-before' : ''}
${this.hasAfterLabel ? 'fw-btn--has-after' : ''}
${this.showCaretIcon ? 'fw-btn--caret' : ''}
`, onClick: this.disabled || this.loading
? this.handlePreventDefault
: this.handleClickWithThrottle, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (button) => (this.button = button), "aria-disabled": this.disabled, disabled: this.disabled }, h("span", { class: 'fw-btn--before' }, h("slot", { onSlotchange: () => this.handleSlotChange(), name: 'before-label' })), h("span", { class: 'fw-btn--label' }, h("slot", { onSlotchange: () => this.handleSlotChange() })), h("span", { class: 'fw-btn--after' }, h("slot", { onSlotchange: () => this.handleSlotChange(), name: 'after-label' })), this.loading ? h("fw-spinner", { class: 'fw-btn--loader' }) : '', this.showCaretIcon ? (h("fw-icon", { name: 'chevron-down', library: 'system' })) : (''))));
}
get host() { return getElement(this); }
};
Button.style = buttonCss;
const iconCss = ":host{font-family:var(--fw-font-family, -apple-system, blinkmacsystemfont, \"Segoe UI\", roboto, oxygen, ubuntu, cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:inline-block}.icon{display:block;color:var(--fw-icon-color, #12344d);height:var(--fw-icon-size, 12px);width:var(--fw-icon-size, 12px)}.icon svg{display:block;width:100%;height:100%}";
let Icon = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
* Identifier of the icon. The attribute’s value must be a valid JS Import Name of the svg in the named export from @freshworks/crayons-icon.
*/
this.dataSvg = '';
/**
* Root Margin in px or percentage for Intersection-Observer. This means from ref to bottom of loaded view , the item loads when it crosses above the negative y margin.
*/
this.xRootMargin = '50px';
/**
* Color in which the icon is displayed, specified as a standard CSS color or as a HEX code.
*/
this.color = '';
/**
* Name of External Library to be used
*/
this.library = 'crayons';
/**
* Enable Intersection Observer. Default is false.
*/
this.lazy = false;
this.setElVisible = false;
this.visible = false;
}
async componentWillLoad() {
if (!this.lazy)
this.visible = true;
else
this.visible = this.setElVisible;
if (!this.visible) {
return;
}
this.applyIconPropstoState();
}
connectedCallback() {
watchIcon(this);
this.lazy &&
waitUntilVisible(this.intersectionObserver, this.xRootMargin, this.el, () => {
this.setElVisible = true;
this.applyIconPropstoState();
});
}
nameChangeHandler() {
this.applyIconPropstoState();
}
disconnectedCallback() {
unwatchIcon(this);
if (this.intersectionObserver) {
this.intersectionObserver.disconnect();
this.intersectionObserver = undefined;
}
}
async applyIconPropstoState() {
const { name, dataSvg, library } = this;
try {
if (!name && dataSvg) {
this.svg = dataSvg;
}
else if (name) {
const url = this.getIconUrl(name, library);
this.svg = await this.drawIcon(url);
}
else {
console.error("Please provide valid props either 'name' or 'data-svg'.Check the usage docs.");
throw '-invalid props-';
}
}
catch (e) {
console.error(e.message);
this.loadFallbackImage();
}
}
async drawIcon(url) {
const { name, library } = this;
try {
const svgEl = await getSVGElement(url);
this.applySVGMutation(library, name, svgEl);
return svgEl.outerHTML;
}
catch (ex) {
throw new Error(`Exception occured while drawing Icon- ${name} : ${ex.message}`);
}
}
/** Fetches the icon and redraws it. Used to handle library registrations. */
redrawIcon() {
this.applyIconPropstoState();
}
async loadFallbackImage() {
this.svg = await fetchIcon(this.getIconUrlfromlib('image', 'system'));
}
getIconUrl(icon, lib) {
let url = '';
if (!this.src) {
url = this.getIconUrlfromlib(icon, lib);
if (url === undefined) {
console.error(`Error while resolving url for ${this.name}|${this.library}. Please check the lib registration/resolver function.`);
return;
}
}
else
url = `${this.src}/${this.name}.svg`;
return url;
}
getIconUrlfromlib(icon, lib) {
const library = getIconLibrary(lib);
if (icon && library) {
return library.resolver(icon);
}
else {
console.error(`Icon ${icon}/${lib} not registered.Check the Implementation.`);
return;
}
}
applySVGMutation(library, icon, svgEl) {
const iconlibrary = getIconLibrary(library);
if (iconlibrary && iconlibrary.mutator) {
iconlibrary.mutator(svgEl, icon);
}
}
render() {
const style = {};
const accessibilityProps = { 'aria-hidden': true };
const hasLabel = typeof this.label === 'string' && this.label.length > 0;
if (hasLabel) {
accessibilityProps['role'] = 'img';
accessibilityProps['aria-label'] = this.label;
}
if (this.size !== undefined)
style['--fw-icon-size'] = `${this.size}px`;
if (this.color !== undefined)
style['--fw-icon-color'] = this.color;
return (h("div", Object.assign({ class: 'icon' }, accessibilityProps, { style: Object.assign({ height: ` ${this.height}px`, width: `${this.width}px` }, style), innerHTML: this.svg })));
}
static get assetsDirs() { return ["icon-assets"]; }
get el() { return getElement(this); }
static get watchers() { return {
"name": ["nameChangeHandler"]
}; }
};
Icon.style = iconCss;
const spinnerCss = ":host{font-family:var(--fw-font-family, -apple-system, blinkmacsystemfont, \"Segoe UI\", roboto, oxygen, ubuntu, cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;box-sizing:border-box}@media screen and (prefers-reduced-motion: reduce){.spinner{-webkit-animation:none;animation:none}}@media screen and (prefers-reduced-motion: reduce) and (prefers-reduced-motion: reduce){.spinner .path{-webkit-animation:none;animation:none}}.spinner{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;z-index:2}@media screen and (prefers-reduced-motion: reduce){.spinner .path{stroke:var(--fw-spinner-color, #2c5cc5);stroke-linecap:round;-webkit-animation:none;animation:none}}.spinner .path{stroke:var(--fw-spinner-color, #2c5cc5);stroke-linecap:round;-webkit-animation:dash 1s ease-in-out infinite;animation:dash 1s ease-in-out infinite}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}";
let Spinner = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
* Size of the loader.
*/
this.size = 'default';
/**
* Color in which the loader is displayed, specified as a standard CSS color.
*/
this.color = '';
this.sizeMap = {
small: 12,
default: 16,
medium: 24,
large: 32,
};
}
getSize() {
return this.sizeMap[this.size] || 16;
}
render() {
const diameter = this.getSize();
return (h(Host, null, h("svg", { class: `spinner ${this.size}`, style: {
'width': `${diameter}px`,
'height': `${diameter}px`,
'--fw-spinner-color': `${this.color}`,
}, viewBox: `0 0 50 50` }, h("circle", { class: 'path', cx: '25', cy: '25', r: '18', fill: 'none', "stroke-width": '8' }))));
}
};
Spinner.style = spinnerCss;
const toastMessageCss = ":host{font-family:var(--fw-font-family, -apple-system, blinkmacsystemfont, \"Segoe UI\", roboto, oxygen, ubuntu, cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;box-sizing:border-box}@media screen and (prefers-reduced-motion: reduce){.toast.is-open{-webkit-animation:none;animation:none}}.toast.is-open{display:block;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-name:fadeIn;animation-name:fadeIn;z-index:999}.toast{display:none;position:relative;top:10px;width:400px;padding:0px 0px 16px 0px;border:1px solid #ebeff3;border-radius:4px;background-color:#fff;margin-bottom:16px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:0px 2px 4px rgba(18, 52, 77, 0.06), 0px 2px 16px rgba(18, 52, 77, 0.16);box-shadow:0px 2px 4px rgba(18, 52, 77, 0.06), 0px 2px 16px rgba(18, 52, 77, 0.16);overflow-wrap:anywhere;word-break:break-word;white-space:normal}.toast.success{border-top:5px solid #00a886}.toast.error{border-top:5px solid #d72d30}.toast.warning{border-top:5px solid #f8ab59}.toast.inprogress{border-top:5px solid #2c5cc5}.toast-container{margin-top:16px;display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;place-content:center}.toast-container .content{color:#12344d;line-height:20px;-ms-flex:1 1 auto;flex:1 1 auto;font-size:14px;font-weight:500;vertical-align:top}.toast-container .icon{margin:5px 16px 0px 16px}.toast-container .remove{margin:5px 12px 0px 12px}.action-link{color:#2c5cc5;line-height:14px;cursor:pointer;font-size:12px;font-weight:600;padding:8px 0px}@-webkit-keyframes fadeOut{100%{top:-600px}}@keyframes fadeOut{100%{top:-600px}}@-webkit-keyframes fadeIn{0%{top:-600px}100%{top:10px}}@keyframes fadeIn{0%{top:-600px}100%{top:10px}}@media screen and (prefers-reduced-motion: reduce){.toast.fade-out{-webkit-animation:none;animation:none}}.toast.fade-out{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-name:fadeOut;animation-name:fadeOut}";
const iconColorMap = {
error: '#e43538',
warning: '#c7502f',
info: '#264966',
success: '#00795b',
};
let ToastMessage = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.fwLinkClick = createEvent(this, "fwLinkClick", 7);
this.fwRemoveToast = createEvent(this, "fwRemoveToast", 7);
/**
* visibility prop of toast message
*/
this.open = false;
/**
* To indicate toast close timeout
*/
this.isTimedOut = false;
/**
* To add close animation class to toast
*/
this.fadeOut = false;
/**
* State icon size
*/
this.iconSize = 16;
/**
* Type of the toast - success,failure, warning, inprogress
*/
this.type = 'warning';
/**
* Time duration of the toast visibility
*/
this.timeout = 4000;
/**
* The Content of the action link
*/
this.actionLinkText = '';
/**
* won't close automatically
*/
this.sticky = false;
}
openChanged(open) {
if (open)
this.setUpToast();
}
async componentWillLoad() {
if (this.open)
this.setUpToast();
}
async setUpToast() {
this.fadeOut = false;
this.isTimedOut = false;
this.timerId = setTimeout(async () => {
if (!this.sticky) {
if (!this.pauseOnHover || (this.pauseOnHover && !this.isMouseHovered)) {
await this.closeToast();
}
this.isTimedOut = true;
}
}, this.timeout);
}
async mouseHover(value = false) {
this.isMouseHovered = value;
if (this.isTimedOut && !this.isMouseHovered) {
await this.closeToast();
}
}
closingAnimation() {
this.fadeOut = true;
return new Promise((resolve) => setTimeout(() => {
this.open = false;
this.fwRemoveToast.emit(this.controllerEl);
resolve();
}, 500));
}
async closeToast() {
if (this.timerId) {
clearTimeout(this.timerId);
}
await this.closingAnimation();
}
disconnectedCallback() {
this.fwRemoveToast.emit(this.controllerEl);
if (this.timerId)
clearTimeout(this.timerId);
}
render() {
return (h(Host, { onmouseover: () => this.mouseHover(true), onmouseout: () => this.mouseHover(false), "aria-hidden": this.open ? 'false' : 'true' }, h("div", { class: `toast ${this.type} ${this.open ? 'is-open' : ''} ${this.fadeOut ? 'fade-out' : ''}`, "aria-hidden": this.open ? 'false' : 'true' }, h("div", { class: 'toast-container' }, this.type === 'inprogress' ? (h("fw-spinner", { class: 'icon' })) : (h("fw-icon", { class: 'icon', size: this.iconSize, name: this.type, color: iconColorMap[this.type] })), h("div", { class: 'content' }, h("slot", null), this.content, this.actionLinkText.length > 0 ? (h("div", { class: 'action-link', role: 'button', tabindex: '0', onClick: () => this.fwLinkClick.emit(), onKeyDown: handleKeyDown(() => this.fwLinkClick.emit()) }, this.actionLinkText)) : ('')), h("fw-icon", { size: 10, name: 'cross', class: 'remove', color: '#183247', onClick: () => this.closeToast(), library: 'system' })))));
}
get controllerEl() { return getElement(this); }
static get watchers() { return {
"open": ["openChanged"]
}; }
};
ToastMessage.style = toastMessageCss;
export { Button as fw_button, Icon as fw_icon, Spinner as fw_spinner, ToastMessage as fw_toast_message };