@duetds/components
Version:
This package includes Duet Components and related tools.
67 lines (62 loc) • 6.24 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const __chunk_1 = require('./chunk-7888512a.js');
const __chunk_2 = require('./chunk-ea4082ee.js');
const __chunk_3 = require('./chunk-af70acd5.js');
const __chunk_5 = require('./chunk-4d3bde67.js');
class DuetCheckbox {
constructor(hostRef) {
__chunk_1.registerInstance(this, hostRef);
/**
* Set whether the input is required or not.
*/
this.required = false;
/**
* Theme of the checkbox. Can be one of: default, turva.
*/
this.theme = "";
/**
* Makes the checkbox component disabled. This prevents users from being able to interact with the checkbox, and conveys its inactive state to assistive technologies.
*/
this.disabled = false;
/**
* Label for the checkbox
*/
this.label = "label";
/**
* Check state of the checkbox.
*/
this.checked = false;
}
/**
* Component lifecycle events.
*/
componentWillLoad() {
__chunk_2.initTabHandler();
// Check whether global Turva theme is active
if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
this.theme = "turva";
}
}
componentDidUnload() {
__chunk_2.removeTabHandler();
}
/**
* render() function
* Always the last one in the class.
*/
render() {
// Set constants for input classes used.
const containerClasses = __chunk_3.classNames("duet-checkbox-container", {
"duet-theme-turva": this.theme === "turva",
});
const inputClasses = __chunk_3.classNames("duet-checkbox", {
disabled: this.disabled,
});
const identifier = this.identifier || __chunk_5.createUniqueID("DuetCheckbox");
return (__chunk_1.h("div", { class: containerClasses }, __chunk_1.h("input", { type: "checkbox", value: this.value, class: inputClasses, checked: this.checked, disabled: this.disabled, "aria-controls": this.accessibleControls, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, required: this.required, role: this.role, name: this.name, id: identifier }), __chunk_1.h("label", { class: "duet-label", htmlFor: identifier }, __chunk_1.h("span", null, this.label)), __chunk_1.h("span", { class: "duet-textarea-help" }, this.helpText)));
}
get element() { return __chunk_1.getElement(this); }
static get style() { return ":host{background:transparent;margin:0;margin-right:8px;margin-bottom:12px;display:-ms-inline-flexbox;display:inline-flex;vertical-align:bottom;max-width:100%}.duet-label,:host{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;border:0;padding:0}.duet-label{background:transparent;margin:0;margin-bottom:8px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:1rem;background:#fff;color:#00294d;font-weight:400;line-height:1.25;-webkit-transition:.3s ease;transition:.3s ease;z-index:100;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;cursor:pointer;display:inline;vertical-align:top}.duet-theme-turva .duet-label{color:#111;font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.duet-label span{display:inline-block;vertical-align:top;width:calc(100% - 32px)}.duet-label-hidden .duet-label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.duet-checkbox{padding:0;padding:13.5px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:absolute;opacity:0;z-index:2;left:0;top:0;cursor:pointer}.duet-checkbox,.duet-checkbox-container{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;margin:0;width:100%;height:100%}.duet-checkbox-container{padding:0;position:relative}.duet-checkbox+label:before{content:\"\";display:inline-block;vertical-align:top;z-index:100;width:18px;height:18px;border-radius:4px;background:#fff;margin:0 10px 1px 1px;border:1px solid #00294d}.duet-theme-turva .duet-checkbox+label:before{border-color:#111}.duet-checkbox:checked+label:before{background:#00294d;border:1px solid #00294d}.duet-theme-turva .duet-checkbox:checked+label:before{background:#111;border-color:#111}:host-context(.user-is-tabbing) .duet-checkbox:focus+label:before{outline:1px dotted #0077b3;outline:5px auto -webkit-focus-ring-color}.duet-checkbox:checked+label:after{content:\"\";position:absolute;left:5px;top:4px;z-index:200;background:transparent url(\"data:image/svg+xml;utf8,<svg fill=\'white\' xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\'><path d=\'M23.374.287a1.5,1.5,0,0,0-2.093.345L7.246,20.2,2.561,15.511A1.5,1.5,0,1,0,.439,17.632l5.935,5.934a1.525,1.525,0,0,0,2.279-.186l15.066-21A1.5,1.5,0,0,0,23.374.287Z\' /></svg>\") no-repeat 0 0;background-size:100% auto;width:12px;height:12px}.duet-theme-turva .duet-checkbox:checked+label:after{top:3px}.duet-checkbox.disabled+label,.duet-checkbox[disabled]+label{cursor:not-allowed;color:#657787}.duet-theme-turva .duet-checkbox.disabled+label,.duet-theme-turva .duet-checkbox[disabled]+label{color:#757575}.duet-checkbox.disabled+label:before,.duet-checkbox[disabled]+label:before{border-color:#cfd2d4}.duet-theme-turva .duet-checkbox.disabled+label:before,.duet-theme-turva .duet-checkbox[disabled]+label:before{border-color:#d1d1d1}.duet-checkbox.disabled:checked+label:before,.duet-checkbox[disabled]:checked+label:before{background:#657787;border:1px solid #657787}.duet-theme-turva .duet-checkbox.disabled:checked+label:before,.duet-theme-turva .duet-checkbox[disabled]:checked+label:before{border-color:#757575;background:#757575}"; }
}
exports.duet_checkbox = DuetCheckbox;