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

Material web components

import { __decorate } from "tslib";
import { html } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { styles } from './button.styles.js';
import { UmToggleButton } from './toggle-button.js';
import '../ripple/ripple.js';
let UmButton = class UmButton extends UmToggleButton {
    constructor() {
        super(...arguments);
        /**
         * The Button variant to render
         */
        this.variant = 'filled';
        /**
         * The Button color
         */
        this.color = 'primary';
        this.trailingIcon = false;
        this._hasIcon = false;
        this._hasSelectionLabel = false;
        this.animateTextChange = false;
    }
    static { this.styles = [UmToggleButton.styles, styles]; }
    #textSizeObserver;
    firstUpdated(changedProperties) {
        super.firstUpdated(changedProperties);
        this.#textSizeObserver = new ResizeObserver(() => this.#setTextWrapperWidth());
        this.#textSizeObserver.observe(this._text);
        this.#setTextWrapperWidth();
    }
    #setTextWrapperWidth() {
        const width = `${this._text.offsetWidth}px`;
        this._textWrapper.style.width = width;
        const animateTextChange = !!parseInt(width, 10);
        if (this.animateTextChange === animateTextChange) {
            return;
        }
        setTimeout(() => this.animateTextChange = animateTextChange);
    }
    _getContainerClasses() {
        return {
            ...super._getContainerClasses(),
            [this.color]: true,
            [this.variant]: true,
            'trailing-icon': this.trailingIcon,
            'has-icon': this._hasIcon,
            'has-selection-label': this._hasSelectionLabel,
        };
    }
    _renderContent() {
        const labelContainerClasses = { animate: this.animateTextChange };
        return html `
      <span class="icon-container" aria-hidden="true">
        <span class="icon icon-default">
          <slot name="icon" @slotchange="${this.#handleIconSlotChange}"></slot>
        </span>
        <span class="icon icon-selected">
          <slot name="icon-selected" @slotchange="${this._handleSelectedIconSlotChange}"></slot>
        </span>
      </span>

      <span class="label-container ${classMap(labelContainerClasses)}">
        <span id="label">
          <span class="label label-default">
            <slot></slot>
          </span>
          <span class="label label-selected">
            <slot name="label-selected" @slotchange="${this.#handleSelectedLabelSlotChange}"></slot>
          </span>
        </span>
      </span>
    `;
    }
    #handleIconSlotChange(e) {
        this._hasIcon = e.target.assignedElements({ flatten: true }).length > 0;
    }
    #handleSelectedLabelSlotChange(e) {
        this._hasSelectionLabel = e.target.assignedElements({ flatten: true }).length > 0;
    }
};
__decorate([
    property()
], UmButton.prototype, "variant", void 0);
__decorate([
    property()
], UmButton.prototype, "color", void 0);
__decorate([
    property({ type: Boolean, attribute: 'trailing-icon', reflect: true })
], UmButton.prototype, "trailingIcon", void 0);
__decorate([
    state()
], UmButton.prototype, "_hasIcon", void 0);
__decorate([
    state()
], UmButton.prototype, "_hasSelectionLabel", void 0);
__decorate([
    state()
], UmButton.prototype, "animateTextChange", void 0);
__decorate([
    query('.label-container', true)
], UmButton.prototype, "_textWrapper", void 0);
__decorate([
    query('#label', true)
], UmButton.prototype, "_text", void 0);
UmButton = __decorate([
    customElement('u-button')
], UmButton);
export { UmButton };
//# sourceMappingURL=button.js.map