igniteui-webcomponents/components/button/button-base.js

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { html, LitElement } from 'lit';
import { property, query } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';
import { addIdRefResolver } from '../common/controllers/id-resolver.js';
import { addInternalsController } from '../common/controllers/internals.js';
import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
import { shadowOptions } from '../common/decorators/shadow-options.js';
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
import { partMap } from '../common/part-map.js';
import { bindIf, getElementByIdFromRoot } from '../common/util.js';
let IgcButtonBaseComponent = class IgcButtonBaseComponent extends EventEmitterMixin(LitElement) {
    constructor() {
        super(...arguments);
        this._focusRingManager = addKeyboardFocusRing(this);
        this._internals = addInternalsController(this);
        this._resolver = addIdRefResolver(this, this._resolveCommandForElement);
        this._disabled = false;
        this._commandfor = null;
        this._commandForElement = null;
        this.type = 'button';
    }
    static { this.formAssociated = true; }
    set disabled(value) {
        this._disabled = value;
        this.toggleAttribute('disabled', Boolean(this._disabled));
    }
    get disabled() {
        return this._disabled;
    }
    set commandfor(value) {
        this._commandfor = value;
        if (value) {
            this._resolver.observe();
            this._commandForElement = getElementByIdFromRoot(this, value);
        }
        else {
            this._commandForElement = null;
            this._resolver.unobserve();
        }
    }
    get commandfor() {
        return this._commandfor;
    }
    get commandForElement() {
        return this._commandForElement;
    }
    set commandForElement(value) {
        this._commandForElement = value;
        this.requestUpdate();
    }
    get form() {
        return this._internals.form;
    }
    firstUpdated() {
        this.updateComplete.then(() => {
            if (this._commandfor) {
                this._commandForElement = getElementByIdFromRoot(this, this._commandfor);
                this.requestUpdate();
            }
        });
    }
    _handleClick() {
        switch (this.type) {
            case 'submit':
                this.form?.requestSubmit();
                break;
            case 'reset':
                this.form?.reset();
                break;
        }
    }
    formDisabledCallback(state) {
        this._disabled = state;
        this.requestUpdate();
    }
    _resolveCommandForElement(ids) {
        if (this._commandfor && ids.has(this._commandfor)) {
            this._commandForElement = getElementByIdFromRoot(this, this._commandfor);
            this.requestUpdate();
        }
    }
    click() {
        this._nativeButton?.click();
    }
    _renderButton() {
        return html `
      <button
        command=${ifDefined(this.command)}
        .commandForElement=${this._commandForElement}
        part=${partMap({ base: true, focused: this._focusRingManager.focused })}
        aria-label=${bindIf(this.ariaLabel, this.ariaLabel)}
        ?disabled=${this.disabled}
        type=${ifDefined(this.type)}
        @click=${this._handleClick}
      >
        ${this._renderContent()}
      </button>
    `;
    }
    _renderLinkButton() {
        return html `
      <a
        part=${partMap({ base: true, focused: this._focusRingManager.focused })}
        role="button"
        aria-label=${bindIf(this.ariaLabel, this.ariaLabel)}
        aria-disabled=${this.disabled}
        href=${ifDefined(this.href)}
        target=${ifDefined(this.target)}
        download=${ifDefined(this.download)}
        rel=${ifDefined(this.rel)}
      >
        ${this._renderContent()}
      </a>
    `;
    }
    render() {
        return this.href != null ? this._renderLinkButton() : this._renderButton();
    }
};
__decorate([
    query('[part="base"]', true)
], IgcButtonBaseComponent.prototype, "_nativeButton", void 0);
__decorate([
    property({ reflect: true })
], IgcButtonBaseComponent.prototype, "type", void 0);
__decorate([
    property()
], IgcButtonBaseComponent.prototype, "href", void 0);
__decorate([
    property()
], IgcButtonBaseComponent.prototype, "download", void 0);
__decorate([
    property()
], IgcButtonBaseComponent.prototype, "target", void 0);
__decorate([
    property()
], IgcButtonBaseComponent.prototype, "rel", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], IgcButtonBaseComponent.prototype, "disabled", null);
__decorate([
    property({ reflect: true })
], IgcButtonBaseComponent.prototype, "command", void 0);
__decorate([
    property({ attribute: 'commandfor' })
], IgcButtonBaseComponent.prototype, "commandfor", null);
IgcButtonBaseComponent = __decorate([
    blazorDeepImport,
    shadowOptions({ delegatesFocus: true })
], IgcButtonBaseComponent);
export { IgcButtonBaseComponent };
//# sourceMappingURL=button-base.js.map