@universal-material/web/navigation/drawer-item.js

Material web components

import { __decorate } from "tslib";
import { html } from 'lit';
import { customElement, property, queryAssignedElements, state } from 'lit/decorators.js';
import { UmButtonWrapper } from '../shared/button-wrapper.js';
import { styles } from './drawer-item.styles.js';
let UmDrawerItem = class UmDrawerItem extends UmButtonWrapper {
    constructor() {
        super(...arguments);
        this._hasIcon = false;
        this._hasBadge = false;
        /**
         * Whether the drawer item is active or not
         *
         * _Note:_ Readonly
         */
        this.active = false;
        /**
         * If true, it will not attempt to close de navigation drawer on click
         */
        this.keepDrawerOpen = false;
    }
    static { this.styles = [
        UmButtonWrapper.styles,
        styles,
    ]; }
    connectedCallback() {
        super.connectedCallback();
        this.setAttribute('aria-labelledby', 'label');
    }
    _getContainerClasses() {
        return {
            ...super._getContainerClasses(),
            'has-icon': this._hasIcon,
            'has-badge': this._hasBadge,
        };
    }
    _renderContent() {
        return html `
      <div class="icon">
        <slot
          name="icon"
          aria-hidden="true"
          @slotchange="${this.handleIconSlotChange}"></slot>
      </div>
      <span class="label" id="text"><slot></slot></span>
      <span class="badge">
        <slot
          name="badge"
          @slotchange="${this.handleBadgeSlotChange}"></slot>
      </span>
    `;
    }
    handleIconSlotChange() {
        this._hasIcon = this.assignedIcons.length > 0;
    }
    handleBadgeSlotChange() {
        this._hasBadge = this.assignedBadges.length > 0;
    }
    _handleClick() {
        if (this.keepDrawerOpen) {
            return;
        }
        const sideNavigation = this.closest('u-side-navigation');
        if (sideNavigation) {
            sideNavigation.toggleDrawer = false;
        }
    }
};
__decorate([
    state()
], UmDrawerItem.prototype, "_hasIcon", void 0);
__decorate([
    state()
], UmDrawerItem.prototype, "_hasBadge", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], UmDrawerItem.prototype, "active", void 0);
__decorate([
    property({ type: Boolean, attribute: 'keep-drawer-open', reflect: true })
], UmDrawerItem.prototype, "keepDrawerOpen", void 0);
__decorate([
    queryAssignedElements({ slot: 'icon', flatten: true })
], UmDrawerItem.prototype, "assignedIcons", void 0);
__decorate([
    queryAssignedElements({ slot: 'badge', flatten: true })
], UmDrawerItem.prototype, "assignedBadges", void 0);
UmDrawerItem = __decorate([
    customElement('u-drawer-item')
], UmDrawerItem);
export { UmDrawerItem };
//# sourceMappingURL=drawer-item.js.map