@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
142 lines (141 loc) • 5.11 kB
JavaScript
import { h, Host } from "@stencil/core";
import { convertPropsToClasses } from "./modus-wc-toast.tailwind";
import { inheritAriaAttributes } from "../utils";
/**
* A customizable toast component used to stack elements, positioned on the corner of a page.
*
* The component supports a `<slot>` for injecting additional custom content inside the toast.
*/
export class ModusWcToast {
constructor() {
this.inheritedAttributes = {};
/** Additional classes for custom styling. */
this.customClass = '';
/** The position of the toast in the parent container. */
this.position = 'top-end';
this.getClasses = () => {
const classList = ['modus-wc-toast'];
const propClasses = convertPropsToClasses({
position: this.position,
});
// The order CSS classes are added matters to CSS specificity
if (propClasses)
classList.push(propClasses);
if (this.customClass)
classList.push(this.customClass);
return classList.join(' ');
};
}
componentWillLoad() {
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
delayChanged(newDelay) {
clearTimeout(this.timerId);
this.timerId = setTimeout(() => {
this.dismissElement();
}, newDelay);
}
dismissElement() {
this.el.remove();
}
componentDidLoad() {
if (this.delay && this.delay > 0) {
this.timerId = setTimeout(() => {
this.dismissElement();
}, this.delay);
}
}
disconnectedCallback() {
clearTimeout(this.timerId);
}
render() {
return (h(Host, { key: '029a9751092ead67d7ccec5cc1b9d3b38bc90b24' }, h("div", Object.assign({ key: 'fed8c85de3f93fdf34c248de2f92e1f48318d7cb', class: this.getClasses() }, this.inheritedAttributes), h("slot", { key: 'dd73ca36c2c5f79229fbff6a5a8f4b623d7350b5' }))));
}
static get is() { return "modus-wc-toast"; }
static get originalStyleUrls() {
return {
"$": ["modus-wc-toast.scss"]
};
}
static get styleUrls() {
return {
"$": ["modus-wc-toast.css"]
};
}
static get properties() {
return {
"customClass": {
"type": "string",
"attribute": "custom-class",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Additional classes for custom styling."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "''"
},
"delay": {
"type": "number",
"attribute": "delay",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Time taken to dismiss the toast in milliseconds"
},
"getter": false,
"setter": false,
"reflect": false
},
"position": {
"type": "string",
"attribute": "position",
"mutable": false,
"complexType": {
"original": "ToastPosition",
"resolved": "\"bottom-center\" | \"bottom-end\" | \"bottom-start\" | \"middle-center\" | \"middle-end\" | \"middle-start\" | \"top-center\" | \"top-end\" | \"top-start\" | undefined",
"references": {
"ToastPosition": {
"location": "local",
"path": "/home/runner/work/modus-wc-2.0/modus-wc-2.0/src/components/modus-wc-toast/modus-wc-toast.tsx",
"id": "src/components/modus-wc-toast/modus-wc-toast.tsx::ToastPosition"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The position of the toast in the parent container."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'top-end'"
}
};
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "delay",
"methodName": "delayChanged"
}];
}
}