@duetds/components
Version:
This package includes Duet Core Components and related tools.
88 lines (87 loc) • 6.62 kB
JavaScript
import { r as registerInstance, d as createEvent, h, H as Host, c as getElement } from './core-12b6bfe8.js';
import { a as jsUtils_2 } from './js-utils-b3b951a3.js';
var DuetToggle = /** @class */ (function () {
function DuetToggle(hostRef) {
var _this = this;
registerInstance(this, hostRef);
this.toggleId = jsUtils_2("DuetToggle");
/**
* Theme of the card. Can be one of: "default", "turva".
*/
this.theme = "";
/**
* Controls the margin of the component. Can be one of: "auto", "none".
*/
this.margin = "auto";
/**
* Label for the toggle.
*/
this.label = "label";
/**
* Check state of the checkbox.
*/
this.checked = false;
/**
* Component event handling.
*/
this.onClick = function (ev) {
ev.preventDefault();
_this.setFocus();
_this.checked = !_this.checked;
};
this.duetChange = createEvent(this, "duetChange", 3);
}
DuetToggle.prototype.checkedChanged = function (isChecked) {
this.duetChange.emit({
checked: isChecked,
value: this.value,
component: "duet-toggle",
});
};
/**
* Component lifecycle events.
*/
DuetToggle.prototype.componentWillLoad = function () {
if (this.value === undefined) {
this.value = this.identifier;
}
if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
this.theme = "turva";
}
};
DuetToggle.prototype.setFocus = function () {
this.element.querySelector("input").focus();
};
/**
* render() function
* Always the last one in the class.
*/
DuetToggle.prototype.render = function () {
var identifier = this.identifier || this.toggleId;
return (h(Host, { onClick: this.onClick, class: { "duet-m-0": this.margin === "none" } }, h("div", { class: {
"duet-toggle": true,
"duet-theme-turva": this.theme === "turva",
} }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", for: identifier }, this.label), h("label", { class: "duet-switch", htmlFor: identifier }, h("input", { type: "checkbox", value: this.value, "aria-controls": this.accessibleControls, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, id: identifier, role: this.role, name: this.name, checked: this.checked }), h("div", { class: "duet-slider" })))));
};
Object.defineProperty(DuetToggle.prototype, "element", {
get: function () { return getElement(this); },
enumerable: true,
configurable: true
});
Object.defineProperty(DuetToggle, "watchers", {
get: function () {
return {
"checked": ["checkedChanged"]
};
},
enumerable: true,
configurable: true
});
Object.defineProperty(DuetToggle, "style", {
get: function () { return ".sc-duet-toggle-h{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;margin-right:8px!important;margin-bottom:12px!important;-webkit-tap-highlight-color:transparent;display:-ms-inline-flexbox;display:inline-flex;vertical-align:bottom;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.sc-duet-toggle-h:last-child, .sc-duet-toggle-h:last-of-type{margin-right:0!important}.duet-m-0.sc-duet-toggle-h{margin:0!important}duet-label.sc-duet-toggle{width:100%!important;display:block!important}.duet-switch.sc-duet-toggle{border:0;padding:0;display:inline-block;height:28px;position:relative;width:48px}.duet-switch.sc-duet-toggle, .duet-switch.sc-duet-toggle input.sc-duet-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;margin:0}.duet-switch.sc-duet-toggle input.sc-duet-toggle{border:0;padding:0;position:absolute!important;top:0;clip:rect(1px,1px,1px,1px)!important;overflow:hidden!important;height:1px!important;width:1px!important;padding:0!important;border:0!important}.duet-switch.sc-duet-toggle input.sc-duet-toggle:checked + .duet-slider.sc-duet-toggle{background-color:#0077b3;-webkit-box-shadow:none;box-shadow:none}.duet-switch.sc-duet-toggle input.sc-duet-toggle:checked + .duet-slider.duet-theme-turva.sc-duet-toggle, .duet-theme-turva.sc-duet-toggle .duet-switch.sc-duet-toggle input.sc-duet-toggle:checked + .duet-slider.sc-duet-toggle{background-color:#c60c30}.duet-switch.sc-duet-toggle input.sc-duet-toggle:checked + .duet-slider.sc-duet-toggle:before{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;-webkit-transform:translateX(20px);transform:translateX(20px);background-color:#fff;-webkit-box-shadow:none;box-shadow:none}.user-is-tabbing.sc-duet-toggle-h .duet-switch.sc-duet-toggle input.sc-duet-toggle:focus + .duet-slider.sc-duet-toggle{outline:1px dotted #0077b3;outline:5px auto -webkit-focus-ring-color}.duet-slider.sc-duet-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;background-color:#fff;-webkit-box-shadow:inset 0 0 0 1px #00294d;box-shadow:inset 0 0 0 1px #00294d;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;-webkit-transition:background-color .3s ease;transition:background-color .3s ease;border-radius:20px}.duet-slider.duet-theme-turva.sc-duet-toggle, .duet-theme-turva.sc-duet-toggle .duet-slider.sc-duet-toggle{-webkit-box-shadow:inset 0 0 0 1px #111;box-shadow:inset 0 0 0 1px #111}.duet-slider.sc-duet-toggle:before{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;border-radius:50%;background-color:#00294d;bottom:4px;content:\"\";height:20px;left:4px;position:absolute;-webkit-transition:.3s ease;transition:.3s ease;width:20px}.duet-slider.duet-theme-turva.sc-duet-toggle:before, .duet-theme-turva.sc-duet-toggle .duet-slider.sc-duet-toggle:before{background-color:#111}"; },
enumerable: true,
configurable: true
});
return DuetToggle;
}());
export { DuetToggle as duet_toggle };