@cbpds/web-components
Version:
Web components for the CBP Design System.
121 lines (120 loc) • 4.58 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h, Env } from "@stencil/core";
export class CbpApp {
constructor() {
this.theme = "system";
this.debug = undefined;
this.appName = undefined;
this.appVersion = undefined;
}
handleThemeChange(mql) {
this.theme = mql.matches ? "dark" : "light";
}
componentDidLoad() {
const darkMode = window === null || window === void 0 ? void 0 : window.matchMedia(`(prefers-color-scheme: dark)`);
if (this.theme == "system") {
darkMode.addEventListener('change', mql => this.handleThemeChange(mql));
this.handleThemeChange(darkMode);
}
}
render() {
if (this.debug) {
let debugInfo = `DEBUGGING INFO:\n===============\n`;
if (this.appName)
debugInfo += `Application name: ${this.appName}\n`;
if (this.appVersion)
debugInfo += `Application version: ${this.appVersion}\n`;
debugInfo += `CBP Design System version: ${Env.version}\n`;
debugInfo += `Built with StencilJS: ${Env.stencil}`;
console.log(debugInfo);
}
return (h(Host, { key: '60046c1c1573c1222c9c83c532a253365ce888c1', "data-cbp-theme": this.theme }, h("slot", { key: 'b45b0471cab4f20e894ad8b024dfc31481b77ee3' })));
}
static get is() { return "cbp-app"; }
static get originalStyleUrls() {
return {
"$": ["reset.scss", "css-variables.scss", "core.scss", "cbp-app.scss"]
};
}
static get styleUrls() {
return {
"$": ["reset.css", "css-variables.css", "core.css", "cbp-app.css"]
};
}
static get properties() {
return {
"theme": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"light\" | \"dark\" | \"system\"",
"resolved": "\"dark\" | \"light\" | \"system\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Optionally specifies light/dark mode. This is only needed if the application can change the theme separate from OS settings."
},
"attribute": "theme",
"reflect": true,
"defaultValue": "\"system\""
},
"debug": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Turning on debug mode will log the version of the design system package and Stencil version it was built with to the console, in addition to application name and version, if specified."
},
"attribute": "debug",
"reflect": true
},
"appName": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the application name for logging with debug information."
},
"attribute": "app-name",
"reflect": true
},
"appVersion": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the application version for logging with debug information. This may be automated by importing it from the application's package.json, if used."
},
"attribute": "app-version",
"reflect": true
}
};
}
}
//# sourceMappingURL=cbp-app.js.map