@duetds/components
Version:
This package includes Duet Core Components and related tools.
216 lines (210 loc) • 15.4 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const core = require('./core-e5cda7d4.js');
const jsUtils = require('./js-utils-286cf29e.js');
const DuetRadio = class {
constructor(hostRef) {
core.registerInstance(this, hostRef);
this.radioId = jsUtils.jsUtils_2("DuetRadio");
/**
* Controls the margin of the component. Can be one of: "auto", "none".
*/
this.margin = "auto";
/**
* 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";
/**
* Component event handling.
*/
this.onClick = (ev) => {
ev.stopPropagation();
};
this.onChange = (ev) => {
this.checked = ev.target.value;
};
this.onFocus = () => {
this.duetFocus.emit();
};
this.onBlur = () => {
this.duetBlur.emit();
};
this.duetChange = core.createEvent(this, "duetChange", 3);
this.duetFocus = core.createEvent(this, "duetFocus", 7);
this.duetBlur = core.createEvent(this, "duetBlur", 7);
}
checkedChanged(isChecked) {
if (isChecked) {
this.duetChange.emit({
checked: isChecked,
value: this.value,
component: "duet-radio",
});
}
}
/**
* Component lifecycle events.
*/
componentWillLoad() {
if (this.value === undefined) {
this.value = this.identifier;
}
if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
this.theme = "turva";
}
}
/**
* Sets focus on the specified `duet-radio`. Use this method instead of the global
* `input.focus()`.
*/
async setFocus() {
const nativeInput = this.element.querySelector("input");
if (nativeInput) {
nativeInput.focus();
}
}
/**
* render() function
* Always the last one in the class.
*/
render() {
const identifier = this.identifier || this.radioId;
return (core.h(core.Host, { onClick: ev => this.onClick(ev), class: { horizontal: this.groupDirection === "horizontal", "duet-m-0": this.margin === "none" } }, core.h("div", { class: { "duet-radio-container": true, "duet-theme-turva": this.theme === "turva" } }, core.h("input", { type: "radio", onFocus: this.onFocus, onBlur: this.onBlur, value: this.value, class: { "duet-radio": true, disabled: this.disabled || this.groupDisabled }, checked: this.checked, onChange: ev => this.onChange(ev), disabled: this.disabled || this.groupDisabled, "aria-controls": this.accessibleControls, "aria-active-descendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, role: this.role, name: this.name, id: identifier }), core.h("label", { class: "duet-label", htmlFor: identifier }, core.h("span", null, this.label)))));
}
get element() { return core.getElement(this); }
static get watchers() { return {
"checked": ["checkedChanged"]
}; }
static get style() { return ".sc-duet-radio-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:28px!important;margin-bottom:8px!important;-webkit-tap-highlight-color:transparent;display:-ms-inline-flexbox;display:inline-flex;vertical-align:bottom;width:100%}.sc-duet-radio-h:last-child, .sc-duet-radio-h:last-of-type{margin-right:0!important}.horizontal.sc-duet-radio-h{width:auto}.horizontal.sc-duet-radio-h .duet-label.sc-duet-radio{margin-top:8px!important}.horizontal.sc-duet-radio-h .duet-label.sc-duet-radio span.sc-duet-radio{max-width:100%}.duet-m-0.sc-duet-radio-h{margin:0!important}.duet-label.sc-duet-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;border:0;padding:0;margin:0;margin-bottom:8px!important;-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:transparent;color:#00294d;font-weight:400;line-height:1.25;z-index:100;width:100%;position:relative;cursor:pointer;display:inline-block;vertical-align:top}.duet-theme-turva.sc-duet-radio .duet-label.sc-duet-radio{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.sc-duet-radio span.sc-duet-radio{-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;display:inline-block;vertical-align:top;max-width:calc(100% - 32px)}.duet-label-hidden.sc-duet-radio .duet-label.sc-duet-radio{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.duet-radio.sc-duet-radio{padding:0;padding:14px!important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:absolute;opacity:0;z-index:2;left:0;top:0;cursor:pointer}.duet-radio.sc-duet-radio, .duet-radio-container.sc-duet-radio{-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.sc-duet-radio{padding:0;position:relative}.duet-radio.sc-duet-radio + label.sc-duet-radio: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;content:\"\";display:inline-block;vertical-align:top;z-index:100;width:20px;height:20px;border-radius:50%;background:#fff;margin:0 10px 1px 1px;border:1px solid #00294d}.duet-theme-turva.sc-duet-radio .duet-radio.sc-duet-radio + label.sc-duet-radio:before{border-color:#111}.user-is-tabbing.sc-duet-radio-h .duet-radio.sc-duet-radio:focus + label.sc-duet-radio:before{outline:1px dotted #0077b3;outline:5px auto -webkit-focus-ring-color}.duet-radio.sc-duet-radio:checked + label.sc-duet-radio:after{-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;content:\"\";position:absolute;left:5px;top:4px;z-index:200;border-radius:50%;background:#00294d;width:12px;height:12px}.duet-theme-turva.sc-duet-radio .duet-radio.sc-duet-radio:checked + label.sc-duet-radio:after{background:#111}.duet-radio.disabled.sc-duet-radio + label.sc-duet-radio, .duet-radio[disabled].sc-duet-radio + label.sc-duet-radio{cursor:not-allowed;color:#657787}.duet-theme-turva.sc-duet-radio .duet-radio.disabled.sc-duet-radio + label.sc-duet-radio, .duet-theme-turva.sc-duet-radio .duet-radio[disabled].sc-duet-radio + label.sc-duet-radio{color:#757575}.duet-radio.disabled.sc-duet-radio + label.sc-duet-radio:before, .duet-radio[disabled].sc-duet-radio + label.sc-duet-radio:before{border-color:#cfd2d4}.duet-theme-turva.sc-duet-radio .duet-radio.disabled.sc-duet-radio + label.sc-duet-radio:before, .duet-theme-turva.sc-duet-radio .duet-radio[disabled].sc-duet-radio + label.sc-duet-radio:before{border-color:#d1d1d1}.duet-radio.disabled.sc-duet-radio:checked + label.sc-duet-radio:before, .duet-radio[disabled].sc-duet-radio:checked + label.sc-duet-radio:before{border:1px solid #657787}.duet-radio.disabled.sc-duet-radio:checked + label.sc-duet-radio:after, .duet-radio[disabled].sc-duet-radio:checked + label.sc-duet-radio:after{background:#657787}.duet-theme-turva.sc-duet-radio .duet-radio.disabled.sc-duet-radio:checked + label.sc-duet-radio:after, .duet-theme-turva.sc-duet-radio .duet-radio[disabled].sc-duet-radio:checked + label.sc-duet-radio:after{border-color:#757575;background:#757575}"; }
};
const DuetRadioGroup = class {
constructor(hostRef) {
core.registerInstance(this, hostRef);
this.errorId = jsUtils.jsUtils_2("DuetError");
this.labelId = jsUtils.jsUtils_2("DuetLabel");
this.radioButtons = [];
/**
* Direction of the radio group. Can be one of: "vertical", "horizontal".
*/
this.direction = "vertical";
/**
* Controls the margin of the component. Can be one of: "auto", "none".
*/
this.margin = "auto";
/**
* Theme of the radio group. Can be one of: "default", "turva".
*/
this.theme = "";
/**
* Display radio group in error state along with an error message.
*/
this.error = "";
/**
* Legend displayed for the radio buttons in this group.
*/
this.label = "Label";
/**
* Additional caption to show inside the label of the radio group.
*/
this.caption = "";
/**
* Enable or disable the automatic responsive behaviour of the radio group component when horizontal setting is used. Setting this option to "true" makes sure that contents are stacked vertically on mobile.
*/
this.responsive = false;
this.duetChange = core.createEvent(this, "duetChange", 3);
}
nameChanged() {
this.updateButtons();
}
valueChanged() {
this.updateButtons();
}
disabledChanged() {
this.updateButtons();
}
componentWillLoad() {
if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
this.theme = "turva";
}
// Grab radio buttons from this component
this.radioButtons = Array.from(this.element.querySelectorAll("duet-radio"));
if (this.radioButtons.length === 0) {
throw new Error("[duet-radio-group] Must have at least one duet-radio child");
}
this.updateButtons();
this.radioButtons.forEach(radioButton => {
radioButton.addEventListener("duetChange", e => this.selectedRadioButtonChanged(e));
});
}
componentDidUnload() {
this.radioButtons.forEach(radioButton => {
radioButton.removeEventListener("duetChange", e => this.selectedRadioButtonChanged(e));
});
}
selectedRadioButtonChanged(event) {
if (event && event.target) {
this.value = event.target.value;
}
else {
this.value = "Error: value missing";
}
this.duetChange.emit({
originalEvent: event,
value: this.value,
component: "duet-radio-group",
});
event.cancelBubble = true;
}
updateButtons() {
this.radioButtons.forEach(button => {
button.name = this.name;
button.groupDisabled = this.disabled;
button.checked = button.value === this.value;
button.groupDirection = this.direction;
});
}
/**
* Forces render() update for `duet-radio-group`. Use this when e.g. changing the global language.
*/
async refresh() {
this.element.forceUpdate();
}
/**
* hostData() function
* Used to dynamically set host element attributes.
* Should be placed directly above render()
*/
hostData() {
return {
class: {
horizontal: this.direction === "horizontal",
"duet-m-0": this.margin === "none",
},
};
}
/**
* render() function
* Always the last one in the class.
*/
__stencil_render() {
return (core.h("fieldset", { "aria-labelledby": this.labelId + " " + this.errorId, class: { "duet-fieldset": true, "has-error": this.error !== "", "duet-theme-turva": this.theme === "turva" } }, core.h("legend", { id: this.labelId }, this.label, this.caption ? (core.h("div", null, core.h("duet-spacer", { size: "small" }), core.h("duet-paragraph", { margin: "none" }, this.caption))) : ("")), core.h("div", { class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, core.h("slot", null)), core.h("span", { class: "duet-radio-group-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error !== "" ? core.h("span", null, this.error) : "")));
}
get element() { return core.getElement(this); }
static get watchers() { return {
"name": ["nameChanged"],
"value": ["valueChanged"],
"disabled": ["disabledChanged"]
}; }
render() { return core.h(core.Host, this.hostData(), this.__stencil_render()); }
static get style() { 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-bottom:8px!important;width:100%}:host,:host(.horizontal) .duet-radio-group{display:block}\@media only screen and (min-width:48em){:host(.horizontal) .duet-radio-group{display:-ms-flexbox;display:flex}}:host(.horizontal) .duet-radio-group.duet-no-stacking{display:-ms-flexbox;display:flex}:host(.duet-m-0){margin:0!important}.deut-radio-group{width:100%}.deut-radio-group,fieldset{-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}fieldset{margin-top:8px}:host(.duet-m-0) fieldset{margin:0!important}legend{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;border:0;padding:0;margin:0;margin-bottom:12px!important;-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:transparent;color:#00294d;font-weight:600;line-height:1.25;z-index:100;width:100%;position:relative;text-align:left;display:block}.duet-theme-turva legend,legend.duet-theme-turva{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-radio-group-help{-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;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;border-radius:4px;font-size:.875rem;color:#657787;font-weight:400;line-height:1.25;display:block}.duet-radio-group-help span{display:block;margin-top:8px}.duet-theme-turva .duet-radio-group-help{color:#757575}.has-error .duet-radio-group-help{color:#de2362}.duet-theme-turva.has-error .duet-radio-group-help{color:#e02a0d}"; }
};
exports.duet_radio = DuetRadio;
exports.duet_radio_group = DuetRadioGroup;