@legumeinfo/web-components/lib/core/lis-alert-element.js

Web Components for the Legume Information System and other AgBio databases

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 { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { createRef, ref } from 'lit/directives/ref.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { LisSlotController } from '../controllers';
/**
 * @htmlElement `<lis-alert-element>`
 *
 * A Web Component that provides a generic alert element.
 *
 * @slot - Adds content in place of the content defined via the component properties.
 *
 * @example
 * The alert element's {@link content | `content`} and {@link type | `type`}
 * attributes/properties can be set via HTML or JavaScript. For example:
 * ```html
 * <!-- set the content and type attributes/properties via HTML -->
 * <lis-alert-element
 *   content="<p>My important message</p>"
 *   type="success">
 * </lis-alert-element>
 *
 * <!-- set all attributes/properties via JavaScript -->
 * <lis-alert-element id="alert"></lis-alert-element>
 * <script type="text/javascript">
 *   // get the alert element
 *   const alertElement = document.getElementById('alert');
 *   // set the element's properties
 *   alertElement.content = '<p>My important message</p>';
 *   alertElement.type = 'success';
 * </script>
 * ```
 *
 * @example
 * The alert element's {@link content | `content`} and {@link type | `type`}
 * attributes/properties can also be set via class methods in JavaScript. For example:
 * ```html
 * <!-- set all attributes/properties via class method in JavaScript -->
 * <lis-alert-element id="alert"></lis-alert-element>
 * <script type="text/javascript">
 *   // get the alert element
 *   const alertElement = document.getElementById('alert');
 *   // set the element's properties via method
 *   alertElement.success('<p>My important message</p>', 'success');
 * </script>
 * ```
 *
 * @example
 * Alternatively, an alert's contents can be written in HTML using the element's
 * slot. Note that this will override any content assigned via JavaScript. The alert's
 * {@link type | `type`} attribute/property must still be set via HTML or JavaScript.
 * For example:
 * ```html
 * <!-- set the type attributes/property via HTML and the content via slot -->
 * <!-- NOTE: this is the alert produced by the previous examples -->
 * <lis-alert-element type="success">
 *   <p>My important message</p>
 * </lis-alert-element>
 * ```
 */
let LisAlertElement = class LisAlertElement extends LitElement {
    /** @ignore */
    // disable Shadow DOM to inherit global styles
    createRenderRoot() {
        return this;
    }
    constructor() {
        super();
        this.defaultSlotRef = createRef();
        /**
         * Whether or not to show a close button.
         *
         * @attribute
         */
        this.closeable = false;
        /**
         * The content of the alert element. This will be overridden content in the
         * component's slot.
         *
         * @attribute
         */
        this.content = '';
        /**
         * The style of the alert element.
         *
         * @attribute
         */
        this.type = '';
        this.slotController = new LisSlotController(this, this.defaultSlotRef);
    }
    updateAlert(content, type) {
        this.content = content;
        this.type = type;
    }
    basic(content) {
        this.updateAlert(content, '');
    }
    primary(content) {
        this.updateAlert(content, 'primary');
    }
    success(content) {
        this.updateAlert(content, 'success');
    }
    warning(content) {
        this.updateAlert(content, 'warning');
    }
    danger(content) {
        this.updateAlert(content, 'danger');
    }
    _renderClassModifier() {
        if (this.type == '') {
            return '';
        }
        return `uk-alert-${this.type}`;
    }
    _renderClose() {
        if (!this.closeable) {
            return html ``;
        }
        return html `<a class="uk-alert-close" uk-close></a>`;
    }
    /** @ignore */
    // used by Lit to draw the template
    render() {
        const alertClass = this._renderClassModifier();
        const close = this._renderClose();
        return html `
      <div class="uk-alert ${alertClass}" uk-alert>
        ${close}
        <p ${ref(this.defaultSlotRef)}>${unsafeHTML(this.content)}</p>
      </div>
    `;
    }
};
/** @ignore */
// used by Lit to style the Shadow DOM
// not necessary but exclusion breaks TypeDoc
LisAlertElement.styles = css ``;
__decorate([
    property({ type: Boolean })
], LisAlertElement.prototype, "closeable", void 0);
__decorate([
    property({ type: String })
], LisAlertElement.prototype, "content", void 0);
__decorate([
    property({ type: String })
], LisAlertElement.prototype, "type", void 0);
LisAlertElement = __decorate([
    customElement('lis-alert-element')
], LisAlertElement);
export { LisAlertElement };
//# sourceMappingURL=lis-alert-element.js.map