@universal-material/web/shared/button-wrapper.js

Material web components

import { __decorate } from "tslib";
import { html, LitElement, nothing } from 'lit';
import { property, query, state } from 'lit/decorators.js';
import { styles as baseStyles } from './base.styles.js';
import { styles } from './button-wrapper.styles';
import { redispatchEvent } from './events/redispatch-event.js';
import '../elevation/elevation.js';
import '../ripple/ripple.js';
export class UmButtonWrapper extends LitElement {
    constructor() {
        super(...arguments);
        /**
         * Whether the button is disabled or not.
         */
        this.disabled = false;
        this.renderRipple = true;
        this.innerRole = null;
    }
    static { this.styles = [baseStyles, styles]; }
    get pathname() {
        return this.buttonElement?.pathname;
    }
    render() {
        return typeof this.href === 'string' ? this.renderLink() : this.renderButton();
    }
    renderButton() {
        return html `
      <div class="content">${this.renderContent()}</div>
      <button
        id="button"
        class="button focus-ring"
        ?disabled=${this.disabled}
        aria-label=${this.getAriaLabel() || nothing}
        aria-labelledby="${this.getAriaLabel() ? nothing : 'text'}"
        .role=${this.innerRole}
        type="button"
        @click=${this.#innerClickHandler}>
        <u-ripple ?disabled=${this.disabled || !this.renderRipple}></u-ripple>
        <u-elevation></u-elevation>
      </button>
    `;
    }
    renderLink() {
        return html `
      <div class="content">${this.renderContent()}</div>
      <a
        id="link"
        class="button"
        href=${this.disabled ? nothing : this.href}
        aria-disabled=${this.disabled || nothing}
        aria-label=${this.ariaLabel || nothing}
        aria-labelledby="${this.ariaLabel ? nothing : 'text'}"
        .role=${this.innerRole}
        target=${this.target || nothing}
        @click=${this.#innerClickHandler}>
        <u-elevation></u-elevation>
        <u-ripple ?disabled=${this.disabled || !this.renderRipple}></u-ripple>
      </a>
    `;
    }
    connectedCallback() {
        super.connectedCallback();
        this.addEventListener('focus', this.innerFocusHandler);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.removeEventListener('focus', this.innerFocusHandler);
    }
    focus() {
        this.buttonElement?.focus();
    }
    blur() {
        this.buttonElement?.blur();
    }
    getAriaLabel() {
        return this.ariaLabel;
    }
    innerFocusHandler() {
        const tabIndexAttributeValue = this.getAttribute('tabindex');
        if (tabIndexAttributeValue !== '0') {
            return;
        }
        this.removeAttribute('tabindex');
        setTimeout(() => this.buttonElement?.focus());
    }
    #innerClickHandler(event) {
        if (this.disabled) {
            return;
        }
        const preventDefault = !redispatchEvent(this, event);
        if (preventDefault) {
            return;
        }
        if (!event.pointerType) {
            this.ripple.createRipple();
        }
        this.handleClick(event);
    }
    handleClick(_) {
    }
}
__decorate([
    property({ type: Boolean, reflect: true })
], UmButtonWrapper.prototype, "disabled", void 0);
__decorate([
    state()
], UmButtonWrapper.prototype, "renderRipple", void 0);
__decorate([
    property()
], UmButtonWrapper.prototype, "href", void 0);
__decorate([
    property()
], UmButtonWrapper.prototype, "target", void 0);
__decorate([
    property()
], UmButtonWrapper.prototype, "name", void 0);
__decorate([
    query('.button')
], UmButtonWrapper.prototype, "buttonElement", void 0);
__decorate([
    query('u-ripple')
], UmButtonWrapper.prototype, "ripple", void 0);
//# sourceMappingURL=button-wrapper.js.map