@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
38 lines (37 loc) • 1.2 kB
TypeScript
/**
* Base functionality for all Modus Web Components
* Automatically handles Shadow DOM CSS injection when component is used inside user's shadow DOM
*/
/**
* Mixin function that adds shadow DOM support to any component
* Usage in a component:
*
* export class ModusWcButton {
* @Element() el!: HTMLElement;
*
* componentWillLoad() {
* handleShadowDOMStyles(this.el);
* // ... rest of your code
* }
* }
*
* Container components (card, utility-panel, side-navigation, modal, navbar, panel) should
* pass `true` for `includeComponentStyles` to also inject compiled per-component SCSS,
* ensuring slotted children render correctly inside consumer shadow roots.
*/
export declare function handleShadowDOMStyles(element: HTMLElement, includeComponentStyles?: boolean): void;
/**
* Decorator that automatically handles shadow DOM CSS injection
*
* @example
* @Component({ tag: 'modus-wc-button', shadow: false })
* @WithShadowDOMSupport()
* export class ModusWcButton {
* @Element() el!: HTMLElement;
* }
*/
export declare function WithShadowDOMSupport(): <T extends {
new (...args: unknown[]): {
el: HTMLElement;
};
}>(constructor: T) => T;