@duetds/components
Version:
This package includes Duet Components and related tools.
70 lines (69 loc) • 6.4 kB
JavaScript
import { r as registerInstance, c as createEvent, h, g as getElement } from './chunk-5cdff7bc.js';
import { i as initTabHandler, r as removeTabHandler } from './chunk-7601659c.js';
import { c as classNames } from './chunk-ea56b96b.js';
import { c as createUniqueID } from './chunk-ec399bf6.js';
var DuetRadio = /** @class */ (function () {
function DuetRadio(hostRef) {
registerInstance(this, hostRef);
/**
* Theme of the radio. Can be one of: default, turva.
*/
this.theme = "";
/**
* Makes the radio component disabled. This prevents users from being able to interact with the radio, and conveys its inactive state to assistive technologies.
*/
this.disabled = false;
/**
* Label for the radio
*/
this.label = "label";
this.changed = createEvent(this, "changed", 7);
}
DuetRadio.prototype.eventInputChanged = function (event) {
this.changed.emit(event);
};
/**
* Component lifecycle events.
*/
DuetRadio.prototype.componentWillLoad = function () {
initTabHandler();
// Check whether global Turva theme is active
if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
this.theme = "turva";
}
};
DuetRadio.prototype.componentDidUnload = function () {
removeTabHandler();
};
/**
* render() function
* Always the last one in the class.
*/
DuetRadio.prototype.render = function () {
var _this = this;
// Set constants for input classes used.
if (this.groupDirection === "horizontal") {
this.element.classList.add("horizontal");
}
var containerClasses = classNames("duet-radio-container", {
"duet-theme-turva": this.theme === "turva",
});
var inputClasses = classNames("duet-radio", {
disabled: this.disabled || this.groupDisabled,
});
var identifier = this.identifier || createUniqueID("DuetRadio");
return (h("div", { class: containerClasses }, h("input", { type: "radio", value: this.value, class: inputClasses, checked: this.checked, disabled: this.disabled || this.groupDisabled, "aria-controls": this.accessibleControls, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onChange: function (e) { return _this.eventInputChanged(e); }, role: this.role, name: this.name, id: identifier }), h("label", { class: "duet-label", htmlFor: identifier }, h("span", null, this.label)), h("span", { class: "duet-textarea-help" }, this.helpText)));
};
Object.defineProperty(DuetRadio.prototype, "element", {
get: function () { return getElement(this); },
enumerable: true,
configurable: true
});
Object.defineProperty(DuetRadio, "style", {
get: function () { return ":host{-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:36px;margin-bottom:12px;display:-ms-inline-flexbox;display:inline-flex;vertical-align:bottom;width:100%}:host(.horizontal){width:auto}:host(.horizontal) .duet-label span{max-width:100%}.duet-label{-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-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;width:100%;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;cursor:pointer;display:inline-block;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;max-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-radio{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-radio,.duet-radio-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-radio-container{padding:0;position:relative}.duet-radio+label:before{content:\"\";display:inline-block;vertical-align:top;z-index:100;width:18px;height:18px;border-radius:50%;background:#fff;margin:0 10px 1px 1px;border:1px solid #00294d}.duet-theme-turva .duet-radio+label:before{border-color:#111}:host-context(.user-is-tabbing) .duet-radio:focus+label:before{outline:1px dotted #0077b3;outline:5px auto -webkit-focus-ring-color}.duet-radio:checked+label:after{content:\"\";position:absolute;left:6px;top:5px;z-index:200;border-radius:50%;background:#00294d;width:10px;height:10px}.duet-theme-turva .duet-radio:checked+label:after{top:4px}.duet-radio.disabled+label,.duet-radio[disabled]+label{cursor:not-allowed;color:#657787}.duet-theme-turva .duet-radio.disabled+label,.duet-theme-turva .duet-radio[disabled]+label{color:#757575}.duet-radio.disabled+label:before,.duet-radio[disabled]+label:before{border-color:#cfd2d4}.duet-theme-turva .duet-radio.disabled+label:before,.duet-theme-turva .duet-radio[disabled]+label:before{border-color:#d1d1d1}.duet-radio.disabled:checked+label:before,.duet-radio[disabled]:checked+label:before{border:1px solid #657787}.duet-radio.disabled:checked+label:after,.duet-radio[disabled]:checked+label:after{background:#657787}.duet-theme-turva .duet-radio.disabled:checked+label:after,.duet-theme-turva .duet-radio[disabled]:checked+label:after{border-color:#757575;background:#757575}"; },
enumerable: true,
configurable: true
});
return DuetRadio;
}());
export { DuetRadio as duet_radio };