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

Paper style radio group element

import { __decorate } from "tslib";
import { FormElement } from '@material/mwc-base/form-element.js';
import { observer } from '@exmg/lit-base/index.js';
import { html } from 'lit';
import { query } from 'lit/decorators/query.js';
import { property } from 'lit/decorators/property.js';
import { customElement } from 'lit/decorators/custom-element.js';
import { eventOptions } from 'lit/decorators/event-options.js';
import { styles } from '@material/mwc-radio/mwc-radio.css.js';
import { RippleHandlers } from '@material/mwc-ripple/ripple-handlers.js';
import foundation from '@material/radio/foundation.js';
import { SelectionController } from './exmg-selection-controller.js';
import { style as exmgRadioGroupItemStyles } from './styles/exmg-radio-group-item-styles-css.js';
import '@material/mwc-ripple';
let ExmgRadioGroupItem = class ExmgRadioGroupItem extends FormElement {
    constructor() {
        super();
        /**
         * Marks the item as checked
         * @type {Boolean}
         */
        this.checked = false;
        /**
         * Marks the item as disabled
         * @type {Boolean}
         */
        this.disabled = false;
        /**
         * Set value of item
         * @type {String}
         */
        this.value = '';
        /**
         * Set name of item
         * @type {String}
         */
        this.name = '';
        /**
         * Enable radio button for selecting
         * @type {Boolean}
         */
        this.enableRadioButton = false;
        this.rippleHandlers = null;
        this.shouldRenderRipple = false;
        this.mdcFoundationClass = foundation;
        // Selection Controller is only needed for native ShadowDOM
        if (!window['ShadyDOM'] || !window['ShadyDOM']['inUse']) {
            this.selectionController = SelectionController.getController(this.parentNode);
        }
        this.rippleHandlers = new RippleHandlers(() => {
            this.shouldRenderRipple = true;
            return this.ripple ? this.ripple : Promise.resolve(null);
        });
    }
    connectedCallback() {
        super.connectedCallback();
        if (this.selectionController) {
            this.selectionController.register(this);
        }
    }
    disconnectedCallback() {
        if (this.selectionController) {
            this.selectionController.unregister(this);
        }
        super.disconnectedCallback();
    }
    focusNative() {
        this.formElement.focus();
    }
    createAdapter() {
        return {
            setNativeControlDisabled: (disabled) => {
                this.formElement.disabled = disabled;
            },
        };
    }
    changeHandler() {
        this.checked = this.formElement.checked;
        if (this.selectionController) {
            this.selectionController.update(this);
            this.dispatchEvent(new CustomEvent('exmg-radio-group-item-changed', {
                detail: { value: this.value },
                composed: false,
                bubbles: true,
            }));
        }
    }
    setFormData() {
        return;
    }
    renderRipple() {
        return this.shouldRenderRipple ? this.renderRippleTemplate() : '';
    }
    /** @soyTemplate */
    renderRippleTemplate() {
        return html `<mwc-ripple .disabled="${this.disabled}" unbounded></mwc-ripple>`;
    }
    render() {
        return html `
      <label class="item ${this.checked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}">
        <div class="mdc-radio" ?hidden="${!this.enableRadioButton}">
          <input
            class="mdc-radio__native-control"
            type="radio"
            name="${this.name}"
            .checked="${this.checked}"
            .value="${this.value}"
            @change="${this.changeHandler}"
            @focus="${this.handleRippleFocusA}"
            @blur="${this.handleRippleBlurA}"
            @mousedown="${this.handleRippleActivateA}"
            @mouseenter="${this.handleRippleMouseEnterA}"
            @mouseleave="${this.handleRippleMouseLeaveA}"
            @touchstart="${this.handleRippleActivateA}"
            @touchend="${this.handleRippleDeactivateA}"
            @touchcancel="${this.handleRippleDeactivateA}"
          />
          <div class="mdc-radio__background">
            <div class="mdc-radio__outer-circle"></div>
            <div class="mdc-radio__inner-circle"></div>
          </div>
        </div>
        <div class="description">
          <slot></slot>
          <slot class="title" name="title"></slot>
          <slot class="body" name="body"></slot>
        </div>
        ${this.renderRipple()}
      </label>
    `;
    }
    firstUpdated() {
        super.firstUpdated();
        if (this.selectionController) {
            this.selectionController.update(this);
        }
    }
    handleRippleActivateA(evt) {
        const onUp = () => {
            window.removeEventListener('mouseup', onUp);
            this.handleRippleDeactivateA();
        };
        window.addEventListener('mouseup', onUp);
        this.rippleHandlers.startPress(evt);
    }
    handleRippleDeactivateA() {
        this.rippleHandlers.endPress();
    }
    handleRippleMouseEnterA() {
        this.rippleHandlers.startHover();
    }
    handleRippleMouseLeaveA() {
        this.rippleHandlers.endHover();
    }
    handleRippleFocusA() {
        this.rippleHandlers.startFocus();
    }
    handleRippleBlurA() {
        this.rippleHandlers.endFocus();
    }
};
ExmgRadioGroupItem.styles = [styles, exmgRadioGroupItemStyles];
__decorate([
    query('.mdc-radio')
], ExmgRadioGroupItem.prototype, "mdcRoot", void 0);
__decorate([
    query('input')
], ExmgRadioGroupItem.prototype, "formElement", void 0);
__decorate([
    property({ type: Boolean, reflect: true }),
    observer(function (checked) {
        this.formElement.checked = checked;
    })
], ExmgRadioGroupItem.prototype, "checked", void 0);
__decorate([
    property({ type: Boolean, reflect: true }),
    observer(function (disabled) {
        this.mdcFoundation.setDisabled(disabled);
    })
], ExmgRadioGroupItem.prototype, "disabled", void 0);
__decorate([
    property({ type: String }),
    observer(function (value) {
        this.formElement.value = value;
    })
], ExmgRadioGroupItem.prototype, "value", void 0);
__decorate([
    property({ type: String })
], ExmgRadioGroupItem.prototype, "name", void 0);
__decorate([
    property({ type: Boolean, attribute: 'enable-radio-button' })
], ExmgRadioGroupItem.prototype, "enableRadioButton", void 0);
__decorate([
    property({ type: Object })
], ExmgRadioGroupItem.prototype, "rippleHandlers", void 0);
__decorate([
    eventOptions({ passive: true })
], ExmgRadioGroupItem.prototype, "handleRippleActivateA", null);
ExmgRadioGroupItem = __decorate([
    customElement('exmg-radio-group-item')
], ExmgRadioGroupItem);
export { ExmgRadioGroupItem };
//# sourceMappingURL=exmg-radio-group-item.js.map