gov-gui
Version:
Gov UI Component Library Typscript Build
276 lines (275 loc) • 9.43 kB
JavaScript
import { h } from "@stencil/core";
import { getGlobalPropsClasses } from "../../global/global-styles-helper";
import { getAnimationClasses } from "../../global/animation-helpers";
export class GovSwitcher {
constructor() {
this.isOn = false;
this.showLabel = false;
this.hasIcons = false;
// Add a disabled prop
this.disabled = false;
// Add size props for small and medium
this.size = 'small';
this.animationDelay = '2s';
this.allClasses = '';
this.toggle = () => {
if (!this.disabled) {
this.isOn = !this.isOn;
this.toggled.emit(this.isOn);
document.body.classList.toggle('dark-mode', this.isOn);
}
};
}
//watching for any change in animations to trigger them
watchAnimations() {
this.provideClass();
}
watchAnimationsDelay() {
this.provideClass();
}
watchAnimationsSpeed() {
this.provideClass();
}
handleisOnChange() {
this.toggle; // Sync state with prop
}
// inject the animations and styles on component load
componentWillLoad() {
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
//Called on change of any animation related property to trigger change
provideClass() {
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
render() {
return (h("div", { key: '9cb41871e20ff4adf25519e0c95fab9e21923b68', class: `switch-container ${this.allClasses}`, onClick: this.toggle }, h("div", { key: 'b43982893fa785192df96a47f8161cf119fd5f50', class: {
track: true,
on: this.isOn,
disabled: this.disabled,
small: this.size === 'small',
medium: this.size === 'medium'
} }, h("div", { key: '21a774e4dc7f8b01ba2f4fdafcd28c7ff1f2138f', class: "thumb" }), !this.showLabel && this.hasIcons && (h("span", { key: '671ccd085d71fe5786865c771afe2df8ce763b1e', class: "label" }, h("slot", { key: '6f2f83cc31d0b9f8cb56040ec7afc59d8efd5a7d', name: this.isOn ? 'on-icon' : 'off-icon' }))), this.showLabel && (h("span", { key: 'd537cbf285ce4328abfe9399533868260642393a', class: "label" }, this.isOn ? 'On' : 'Off')))));
}
static get is() { return "gov-switcher"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["gov-switcher.css"]
};
}
static get styleUrls() {
return {
"$": ["gov-switcher.css"]
};
}
static get properties() {
return {
"isOn": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "is-on",
"reflect": false,
"defaultValue": "false"
},
"showLabel": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "show-label",
"reflect": false,
"defaultValue": "false"
},
"hasIcons": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "has-icons",
"reflect": false,
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'small' | 'medium'",
"resolved": "\"medium\" | \"small\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "size",
"reflect": false,
"defaultValue": "'small'"
},
"animation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation",
"reflect": false
},
"animationDelay": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'2s' | '3s' | '4s' | '5s'",
"resolved": "\"2s\" | \"3s\" | \"4s\" | \"5s\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-delay",
"reflect": false,
"defaultValue": "'2s'"
},
"animationSpeed": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'slow' | 'slower' | 'fast' | 'faster'",
"resolved": "\"fast\" | \"faster\" | \"slow\" | \"slower\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-speed",
"reflect": false
}
};
}
static get events() {
return [{
"method": "toggled",
"name": "toggled",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
}
}];
}
static get watchers() {
return [{
"propName": "animation",
"methodName": "watchAnimations"
}, {
"propName": "animationDelay",
"methodName": "watchAnimationsDelay"
}, {
"propName": "animationSpeed",
"methodName": "watchAnimationsSpeed"
}, {
"propName": "isOn",
"methodName": "handleisOnChange"
}];
}
}
//# sourceMappingURL=gov-switcher.js.map