bruno-ui/dist/bruno/brn-checkbox.entry.js

Bruno UI Kit

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

const CheckboxComponent = 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-checkbox__checkmark brn-checkbox__checkmark--${this.type}` }), h("span", { class: "brn-checkbox__text" }, h("slot", null))));
    }
    OnChangeHandler(event) {
        this.changed.emit(event.target.checked);
    }
    static get style() { return "brn-checkbox label {\n  color: #02364c;\n  position: relative;\n  display: inline-block;\n}\nbrn-checkbox label input {\n  display: none;\n}\nbrn-checkbox label input:checked ~ .brn-checkbox__checkmark.brn-checkbox__checkmark--primary {\n  background-color: #3abeff;\n}\nbrn-checkbox label input:checked ~ .brn-checkbox__checkmark.brn-checkbox__checkmark--secondary {\n  background-color: #808c9e;\n}\nbrn-checkbox label input:checked ~ .brn-checkbox__checkmark.brn-checkbox__checkmark--success {\n  background-color: #59c17c;\n}\nbrn-checkbox label input:checked ~ .brn-checkbox__checkmark.brn-checkbox__checkmark--danger {\n  background-color: #d64d61;\n}\nbrn-checkbox label input:checked ~ .brn-checkbox__checkmark.brn-checkbox__checkmark--warning {\n  background-color: #f8a841;\n}\nbrn-checkbox label input:checked ~ .brn-checkbox__checkmark.brn-checkbox__checkmark--info {\n  background-color: #89defa;\n}\nbrn-checkbox label input:checked ~ .brn-checkbox__checkmark.brn-checkbox__checkmark--dark {\n  background-color: #02364c;\n}\nbrn-checkbox label input:checked ~ .brn-checkbox__checkmark.brn-checkbox__checkmark--light {\n  background-color: #eaecf0;\n}\nbrn-checkbox label input:checked ~ .brn-checkbox__checkmark.brn-checkbox__checkmark--light:after {\n  border-bottom: 2px solid #02364c;\n  border-right: 2px solid #02364c;\n}\nbrn-checkbox label input:checked ~ .brn-checkbox__checkmark:after {\n  opacity: 1;\n  visibility: visible;\n}\nbrn-checkbox label .brn-checkbox__checkmark {\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 1rem;\n  height: 1rem;\n  background-color: #eaecf0;\n  -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 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, opacity 0.2s ease-in-out, visibility 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, opacity 0.2s ease-in-out, visibility 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, opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;\n  cursor: pointer;\n  -webkit-border-radius: 2px;\n  -moz-border-radius: 2px;\n  -ms-border-radius: 2px;\n  border-radius: 2px;\n  -ms-user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: -moz-none;\n  user-select: none;\n}\nbrn-checkbox label .brn-checkbox__checkmark:hover {\n  background-color: #d7dde4;\n}\nbrn-checkbox label .brn-checkbox__checkmark:after {\n  opacity: 0;\n  visibility: hidden;\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0.16rem;\n  left: 0.33rem;\n  width: 0.2rem;\n  height: 0.45rem;\n  border-bottom: 2px solid #fff;\n  border-right: 2px solid #fff;\n  -webkit-transform: rotate(45deg);\n  -ms-transform: rotate(45deg);\n  transform: rotate(45deg);\n}\nbrn-checkbox label .brn-checkbox__text {\n  padding-left: 1.5rem;\n  margin-right: 1rem;\n}"; }
};

export { CheckboxComponent as brn_checkbox };