@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
2 lines (1 loc) • 3.86 kB
JavaScript
import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{i as e,x as a}from"../../lit-element-Ho-VPzO1.js";import{t as r}from"../../custom-element-Dz3n6kSt.js";import{n as s}from"../../property-Ck1wIidx.js";import{r as n}from"../../state--U2hSgGK.js";import{e as i}from"../../query-DifSdHBD.js";import{e as o}from"../../class-map-DlMb2KKL.js";import{redispatchEvent as h}from"../../utils/event/redispatch-event.js";import{searchBarStyle as l}from"./search-bar.style.js";import"../../component-definitions/search.definition.js";import"../../color-CigMJnjV.js";import"../../elevation-dUQez_WX.js";import"../../shape-CrZ0CLVJ.js";import"../../state-C-haZXan.js";import"../../typescale-Bh1NLwSE.js";import"../../utils/controller/attachable-controller.js";import"../../utils/tokens/create-logic-shape-tokens.js";import"../../utils/tokens/create-wrapped-tokens.js";import"../../utils/tokens/string-tokens.js";let c=class extends e{constructor(){super(...arguments),this.supportingText="Type here to search",this.hideAvatar=!1,this.hasLeadingIcon=!1,this.hasTrailingIcon=!1,this.hasAvatar=!1}static{this.styles=l}render(){return a`<div role="search" class="search ${o(this.getRenderClasses())}"><span class="background" aria-hidden="true"></span> ${this.renderLeadingIcon()} ${this.renderInput()} ${this.renderTrailingIcon()} ${this.renderAvatar()} ${this.renderTouchTarget()}</div>`}renderLeadingIcon(){return a`<span class="leading-icon icon" ="${this.handleLeadingIconSlotChange}"><slot name="leading-icon"></slot></span>`}renderTrailingIcon(){return a`<span class="trailing-icon icon" ="${this.handleTrailingIconSlotChange}"><slot name="trailing-icon"></slot></span>`}renderInput(){return a`<input class="input" id="input" placeholder="${this.supportingText}" aria-placeholder="${this.supportingText}" ="${this.handleInput}" ="${this.handleChange}">`}renderTouchTarget(){return a`<span class="touch-target" aria-hidden="true"></span>`}renderAvatar(){return a`<button class="avatar" ="${this.handleAvatarClick}"><slot name="avatar" ="${this.handleAvatarSlotChange}">${this.renderAvatarIcon()}</slot><mdc-ripple></mdc-ripple><mdc-focus-ring></mdc-focus-ring></button>`}renderAvatarIcon(){return a`<svg class="avatar-icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>`}getRenderClasses(){return{"has-leading-icon":this.hasLeadingIcon,"has-trailing-icon":this.hasTrailingIcon,"has-avatar":this.hasAvatar,"hide-avatar":this.hideAvatar}}handleAvatarClick(t){t.stopPropagation();const e=new CustomEvent("avatar-click",{bubbles:!0,cancelable:!1,detail:{target:this.avatarElement,currentTarget:this}});h(this,e)}handleInput(t){h(this,t)}handleChange(t){h(this,t)}handleLeadingIconSlotChange(t){this.hasLeadingIcon=t.target.assignedElements().length>0}handleTrailingIconSlotChange(t){this.hasTrailingIcon=t.target.assignedElements().length>0}handleAvatarSlotChange(t){this.hasAvatar=t.target.assignedElements().length>0}};t([s({type:String,attribute:"supporting-text"})],c.prototype,"supportingText",void 0),t([s({type:Boolean,attribute:"hide-avatar"})],c.prototype,"hideAvatar",void 0),t([n()],c.prototype,"hasLeadingIcon",void 0),t([n()],c.prototype,"hasTrailingIcon",void 0),t([n()],c.prototype,"hasAvatar",void 0),t([i(".avatar")],c.prototype,"avatarElement",void 0),c=t([r("mdc-search-bar")],c);export{c as MDCSearchBar};