@nent/core
Version:
70 lines (69 loc) • 1.71 kB
JavaScript
/*!
* NENT 2022
*/
import { Component, h, Host, Prop } from '@stencil/core';
import { appState } from '../n-app/services/state';
/**
* This element displays a checkbox to control the
* dark-theme setting applied to the ui.
*
* Default: user-preference
*
* @system app
*/
export class AppThemeSwitch {
constructor() {
/**
* The inner input ID
*/
this.inputId = 'dark-mode';
}
render() {
return (h(Host, { onClick: () => {
appState.darkMode = !appState.darkMode;
} },
h("input", { type: "checkbox", ref: el => {
this.checkbox = el;
}, class: this.inputClass, id: this.inputId, onChange: () => {
appState.darkMode = this.checkbox.checked;
}, checked: appState.darkMode || false })));
}
static get is() { return "n-app-theme-switch"; }
static get properties() { return {
"inputClass": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The class to add to the inner input."
},
"attribute": "input-class",
"reflect": false
},
"inputId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The inner input ID"
},
"attribute": "input-id",
"reflect": false,
"defaultValue": "'dark-mode'"
}
}; }
}