@exmg/exmg-radio-group/exmg-radio-group.js

Paper style radio group element

import { __decorate } from "tslib";
import { LitElement, html } from 'lit';
import { classMap } from 'lit/directives/class-map.js';
import { property } from 'lit/decorators/property.js';
import { customElement } from 'lit/decorators/custom-element.js';
import { observer } from '@exmg/lit-base/index.js';
import { style as exmgRadioGroupStyles } from './styles/exmg-radio-group-styles-css.js';
const ENTER_KEY_CODE = 13;
let ExmgRadioGroup = class ExmgRadioGroup extends LitElement {
    get value() {
        return this.selected;
    }
    set value(value) {
        this.selected = value;
    }
    constructor() {
        super();
        /**
         * Sets the selected item
         * @type {String}
         */
        this.selected = '';
        /**
         * Marks the radio group as required
         * @type {Boolean}
         */
        this.required = false;
        /**
         * Allows vertical radio group items
         * @type {Boolean}
         */
        this.vertical = false;
        /**
         * Sets flex wrap
         * @type {Boolean}
         */
        this.wrap = false;
        /**
         * Marks the radio group as invalid for validation
         * @type {Boolean}
         */
        this.invalid = false;
        this.litItemName = '';
        this._onKeyPressed = this.onKeyPressed.bind(this);
        this._handleRadioGroupItemChanged = this.handleRadioGroupItemChanged.bind(this);
    }
    /**
     * Handle key press
     * @param e
     */
    onKeyPressed(e) {
        switch (e.code || e.keyCode) {
            case ENTER_KEY_CODE:
            case 'Enter':
            case 'NumpadEnter':
                if (!e.ctrlKey) {
                    e.stopPropagation();
                }
                break;
        }
    }
    /**
     * Validate function to  check required and selected
     * @returns {Boolean}
     * @public
     */
    validate() {
        this.invalid = this.required && !this.selected;
        return !this.invalid;
    }
    /**
     * Radio group item change handler
     * @param e
     * @fires exmg-radio-group-changed
     * @private
     */
    handleRadioGroupItemChanged(e) {
        const { detail } = e;
        this.selected = detail.value;
        this.dispatchEvent(new CustomEvent('exmg-radio-group-changed', {
            detail: { selected: this.selected },
            composed: true,
            bubbles: true,
        }));
    }
    /**
     * Sets selected item based on the selected property
     * @private
     */
    setProperSelectedItem() {
        this.querySelectorAll('exmg-radio-group-item').forEach((item) => {
            const litItem = item;
            litItem.name = this.litItemName;
            litItem.checked = this.selected === litItem.value;
        });
    }
    connectedCallback() {
        super.connectedCallback();
        this.addEventListener('keyup', this._onKeyPressed);
        this.addEventListener('exmg-radio-group-item-changed', this._handleRadioGroupItemChanged);
        this.litItemName = `_${this.name}-options`;
        this.setProperSelectedItem();
    }
    disconnectedCallback() {
        this.removeEventListener('keyup', this._onKeyPressed);
        this.removeEventListener('exmg-radio-group-item-changed', this._handleRadioGroupItemChanged);
        super.disconnectedCallback();
    }
    render() {
        const classes = {
            vertical: this.vertical,
            horizontal: !this.vertical,
            wrap: this.wrap,
        };
        return html `
      <div class="radio-group-container ${classMap(classes)}" ?invalid="${this.invalid}">
        <slot></slot>
      </div>
    `;
    }
};
ExmgRadioGroup.styles = [exmgRadioGroupStyles];
__decorate([
    property({ type: String })
], ExmgRadioGroup.prototype, "name", void 0);
__decorate([
    property({ type: String, reflect: true }),
    observer(function () {
        this.setProperSelectedItem();
    })
], ExmgRadioGroup.prototype, "selected", void 0);
__decorate([
    property({ type: Boolean })
], ExmgRadioGroup.prototype, "required", void 0);
__decorate([
    property({ type: Boolean })
], ExmgRadioGroup.prototype, "vertical", void 0);
__decorate([
    property({ type: Boolean })
], ExmgRadioGroup.prototype, "wrap", void 0);
__decorate([
    property({ type: Boolean, reflect: true, attribute: 'invalid' })
], ExmgRadioGroup.prototype, "invalid", void 0);
ExmgRadioGroup = __decorate([
    customElement('exmg-radio-group')
], ExmgRadioGroup);
export { ExmgRadioGroup };
//# sourceMappingURL=exmg-radio-group.js.map