import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; export default class Element extends Component { @tracked el; @tracked touched = false; get type() { if (typeof this.el !== 'undefined') { return this.el.dataset.type || this.el.getAttribute('type') || this.el.getAttribute('role'); } return this.args.type; } get name() { if (typeof this.args.group !== 'undefined') { return `${this.args.group.name}[${this.args.name}]`; } else { return this.args.name; } } get prop() { return `${this.args.name.toLowerCase().replaceAll('.', '-')}`; } get state() { const error = this.touched && this.args.error; return { matches: name => name === 'error' && error, }; } @action connect($el) { this.el = $el; } }