bruno-ui/dist/esm/brn-toggle.entry.js

Bruno UI Kit

import { r as registerInstance, c as createEvent, h } from './core-23b55849.js';

const ToggleComponent = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.type = "primary";
        this.changed = createEvent(this, "changed", 7);
    }
    render() {
        return (h("label", null, h("input", { type: "checkbox", checked: this.checked, onChange: e => this.OnChangeHandler(e) }), h("span", { class: `brn-toggle__checkmark brn-toggle__checkmark--${this.type}` }), h("span", { class: "brn-toggle__text" }, h("slot", null))));
    }
    OnChangeHandler(event) {
        this.changed.emit(event.target.checked);
    }
    static get style() { return "brn-toggle label {\n  color: #02364c;\n  position: relative;\n  display: inline-block;\n}\nbrn-toggle label input {\n  display: none;\n}\nbrn-toggle label input:checked ~ .brn-toggle__checkmark.brn-toggle__checkmark--primary:after {\n  background-color: #3abeff;\n}\nbrn-toggle label input:checked ~ .brn-toggle__checkmark.brn-toggle__checkmark--secondary:after {\n  background-color: #808c9e;\n}\nbrn-toggle label input:checked ~ .brn-toggle__checkmark.brn-toggle__checkmark--success:after {\n  background-color: #59c17c;\n}\nbrn-toggle label input:checked ~ .brn-toggle__checkmark.brn-toggle__checkmark--danger:after {\n  background-color: #d64d61;\n}\nbrn-toggle label input:checked ~ .brn-toggle__checkmark.brn-toggle__checkmark--warning:after {\n  background-color: #f8a841;\n}\nbrn-toggle label input:checked ~ .brn-toggle__checkmark.brn-toggle__checkmark--info:after {\n  background-color: #89defa;\n}\nbrn-toggle label input:checked ~ .brn-toggle__checkmark.brn-toggle__checkmark--dark:after {\n  background-color: #02364c;\n}\nbrn-toggle label input:checked ~ .brn-toggle__checkmark.brn-toggle__checkmark--dark {\n  background-color: #02364c;\n}\nbrn-toggle label input:checked ~ .brn-toggle__checkmark.brn-toggle__checkmark--dark:after {\n  background-color: #3abeff;\n}\nbrn-toggle label input:checked ~ .brn-toggle__checkmark.brn-toggle__checkmark--light:after {\n  background-color: #02364c;\n}\nbrn-toggle label input:checked ~ .brn-toggle__checkmark:after {\n  margin-left: 0.7rem;\n}\nbrn-toggle label .brn-toggle__checkmark {\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 1.75rem;\n  height: 1rem;\n  background-color: #eaecf0;\n  -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, margin-left 0.2s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;\n  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, margin-left 0.2s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;\n  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.15s ease-in-out, margin-left 0.2s ease-in-out;\n  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.15s ease-in-out, margin-left 0.2s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;\n  cursor: pointer;\n  -webkit-border-radius: 2rem;\n  -moz-border-radius: 2rem;\n  -ms-border-radius: 2rem;\n  border-radius: 2rem;\n  -ms-user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: -moz-none;\n  user-select: none;\n}\nbrn-toggle label .brn-toggle__checkmark:hover {\n  background-color: #d7dde4;\n}\nbrn-toggle label .brn-toggle__checkmark:after {\n  -webkit-transition: margin-left 0.2s ease-in-out, background-color 0.2s ease-in-out;\n  transition: margin-left 0.2s ease-in-out, background-color 0.2s ease-in-out;\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0.19rem;\n  left: 0.23rem;\n  width: 0.6rem;\n  height: 0.6rem;\n  background-color: #fff;\n  -webkit-border-radius: 0.6rem;\n  -moz-border-radius: 0.6rem;\n  -ms-border-radius: 0.6rem;\n  border-radius: 0.6rem;\n}\nbrn-toggle label .brn-toggle__checkmark.brn-toggle__checkmark--dark {\n  background-color: #02364c;\n}\nbrn-toggle label .brn-toggle__checkmark.brn-toggle__checkmark--dark:hover {\n  background-color: #042836;\n}\nbrn-toggle label .brn-toggle__text {\n  padding-left: 2.25rem;\n  margin-right: 1rem;\n}"; }
};

export { ToggleComponent as brn_toggle };