diff --git a/docs/elements/hx-radio-set/index.html b/docs/elements/hx-radio-set/index.html index 83a094052..5a5f9d37b 100644 --- a/docs/elements/hx-radio-set/index.html +++ b/docs/elements/hx-radio-set/index.html @@ -70,3 +70,31 @@ {% endblock %} + +{% block properties %} +
+
+ isDirty {Boolean [false]} + read-only +
+
+ True if the hx-dirty attribute is present. +
+ +
+ wasChanged {Boolean [false]} + read-only +
+
+ True if the hx-changed attribute is present. +
+ +
+ wasTouched {Boolean [false]} + read-only +
+
+ True if the hx-touched attribute is present. +
+
+{% endblock %} diff --git a/src/helix-ui/elements/HXRadioSetElement.js b/src/helix-ui/elements/HXRadioSetElement.js index 455745f8f..dd17e2e53 100644 --- a/src/helix-ui/elements/HXRadioSetElement.js +++ b/src/helix-ui/elements/HXRadioSetElement.js @@ -25,6 +25,30 @@ export class HXRadioSetElement extends HXElement { this.removeEventListener('hxtouch', this._onHxtouch); } + /** + * @readonly + * @type {Boolean} [false] + */ + get isDirty () { + return this.hasAttribute(STATE.dirty); + } + + /** + * @readonly + * @type {Boolean} [false] + */ + get wasChanged () { + return this.hasAttribute(STATE.changed); + } + + /** + * @readonly + * @type {Boolean} [false] + */ + get wasTouched () { + return this.hasAttribute(STATE.touched); + } + /** @private */ _onHxchange (evt) { evt.stopPropagation(); diff --git a/src/helix-ui/styles/components/radios.less b/src/helix-ui/styles/components/radios.less index 6243d0e70..f8838f64d 100644 --- a/src/helix-ui/styles/components/radios.less +++ b/src/helix-ui/styles/components/radios.less @@ -11,6 +11,10 @@ hx-radio { width: 1rem; } +hx-radio-set { + display: block; +} + // LAYOUT GEOMETRY hx-radio-control { -ms-grid-column-align: start;