@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
2 lines (1 loc) • 3.33 kB
JavaScript
import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{i as e,x as s}from"../../lit-element-Ho-VPzO1.js";import{n}from"../../property-Ck1wIidx.js";import{r as a}from"../../state--U2hSgGK.js";import{e as i}from"../../query-DifSdHBD.js";import{e as o}from"../../class-map-DlMb2KKL.js";import{mixinElementInternals as r,internals as l}from"../../utils/behaviors/element-internals.js";import{isActivationClick as h}from"../../utils/event/form-label-activation.js";import{NavigationTabSingleSelectionController as c}from"./navigation-tab-sigle-selection-controller.js";var d;const p=Symbol("active");class g extends(r(e)){static{d=p}static{this.shadowRootOptions={mode:"open",delegatesFocus:!0}}get name(){return this.getAttribute("name")??""}set name(t){this.setAttribute("name",t)}get active(){return this[p]}set active(t){if(t===this[p])return;const e=this[p];this[p]=t,this.requestUpdate("checked",e),this.selectionController.handleCheckedChange()}constructor(){super(),this.hasLabel=!1,this.hasActiveIcon=!1,this.hasInactiveIcon=!1,this.hasBadge=!1,this[d]=!1,this.selectionController=new c(this),this.addController(this.selectionController),this[l].role="tab",this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("keydown",this.handleKeydown.bind(this))}render(){return s`<button id="button" class="${o(this.getRenderClasses())}">${this.renderLabel()} ${this.renderIcon()} ${this.renderIndicator()}<mdc-focus-ring inward for="button" part="focus-ring"></mdc-focus-ring></button>`}renderIndicator(){return s`<span class="indicator"><span class="background"></span><mdc-ripple for="button" part="ripple"></mdc-ripple></span>`}renderLabel(){return s`<span class="label"><slot ="${this.handleLabelSlotChange}"></slot></span>`}renderIcon(){return s`<span class="icon active-icon"><slot name="active-icon" ="${this.handleActiveIconSlotChange}"></slot></span><span class="icon inactive-icon"><slot name="inactive-icon" ="${this.handleInactiveIconSlotChange}"></slot></span>`}renderBadge(){return s`<span class="badge"><slot name="badge" ="${this.handleBadgeSlotChange}"></slot></span>`}getRenderClasses(){return{"has-label":this.hasLabel,"has-active-icon":this.hasActiveIcon,"has-inactive-icon":this.hasInactiveIcon,"has-badge":this.hasBadge,active:this.active,inactive:!this.active}}async handleClick(t){this.buttonElement&&(await 0,t.defaultPrevented||(h(t)&&this.focus(),this.active=!0,this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0}))))}async handleKeydown(t){await 0}handleLabelSlotChange(t){this.hasLabel=t.target.assignedElements().length>0}handleActiveIconSlotChange(t){this.hasLabel=t.target.assignedElements().length>0}handleInactiveIconSlotChange(t){this.hasInactiveIcon=t.target.assignedElements().length>0}handleBadgeSlotChange(t){this.hasBadge=t.target.assignedElements().length>0}}t([n({type:String,noAccessor:!0})],g.prototype,"name",null),t([n({type:Boolean,attribute:"active",noAccessor:!0})],g.prototype,"active",null),t([a()],g.prototype,"hasLabel",void 0),t([a()],g.prototype,"hasActiveIcon",void 0),t([a()],g.prototype,"hasInactiveIcon",void 0),t([a()],g.prototype,"hasBadge",void 0),t([i("button")],g.prototype,"buttonElement",void 0);export{g as BaseNavigationTab};