@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
2 lines (1 loc) • 3.38 kB
JavaScript
import{_ as e}from"../../tslib.es6-CmLYFWVC.js";import{i as t,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-DhvfedBn.js";import{e as o}from"../../class-map-D69pxdWL.js";import{mixinElementInternals as r,internals as c}from"../../utils/behaviors/element-internals.js";import{SelectionController as h}from"../../utils/controller/selection-controller.js";import{isActivationClick as l}from"../../utils/event/form-label-activation.js";import"../../base-hbm3XPKy.js";import"../../directive-7hqM2TFx.js";var d;const p=Symbol("active");class g extends(r(t)){static{d=p}static{this.shadowRootOptions={mode:"open",delegatesFocus:!0}}get name(){return this.getAttribute("name")??""}set name(e){this.setAttribute("name",e)}get checked(){return this[p]}set checked(e){if(e===this[p])return;const t=this[p];this[p]=e,this.requestUpdate("checked",t),this.selectionController.handleCheckedChange()}constructor(){super(),this.hasLabel=!1,this.hasActiveIcon=!1,this.hasInactiveIcon=!1,this.hasBadge=!1,this[d]=!1,this.selectionController=new h(this),this.addController(this.selectionController),this[c].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.checked,inactive:!this.checked}}async handleClick(e){this.buttonElement&&(await 0,e.defaultPrevented||(l(e)&&this.focus(),this.checked=!0,this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0}))))}async handleKeydown(e){await 0}handleLabelSlotChange(e){this.hasLabel=e.target.assignedElements().length>0}handleActiveIconSlotChange(e){this.hasLabel=e.target.assignedElements().length>0}handleInactiveIconSlotChange(e){this.hasInactiveIcon=e.target.assignedElements().length>0}handleBadgeSlotChange(e){this.hasBadge=e.target.assignedElements().length>0}}e([n({type:String,noAccessor:!0})],g.prototype,"name",null),e([n({type:Boolean,attribute:"checked",noAccessor:!0})],g.prototype,"checked",null),e([a()],g.prototype,"hasLabel",void 0),e([a()],g.prototype,"hasActiveIcon",void 0),e([a()],g.prototype,"hasInactiveIcon",void 0),e([a()],g.prototype,"hasBadge",void 0),e([i("button")],g.prototype,"buttonElement",void 0);export{g as BaseNavigationTab};