@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
2 lines • 5.13 kB
JavaScript
import{customElement as e}from"../../node_modules/@lit/reactive-element/decorators/custom-element.js";import{property as t}from"../../node_modules/@lit/reactive-element/decorators/property.js";import{state as n}from"../../node_modules/@lit/reactive-element/decorators/state.js";import{query as r}from"../../node_modules/@lit/reactive-element/decorators/query.js";import"../../node_modules/lit/decorators.js";import{html as i}from"../../node_modules/lit-html/lit-html.js";import{LitElement as a}from"../../node_modules/lit-element/lit-element.js";import"../../node_modules/lit/index.js";import{classMap as o}from"../../node_modules/lit-html/directives/class-map.js";import"../../node_modules/lit/directives/class-map.js";import{composeMixin as s}from"../../utils/compose-mixin/compose-mixin.js";import c from"../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{mixinFocusRingOptions as l}from"../focus-ring/focus-ring-options.mixin.js";import{redispatchEvent as u}from"../../utils/event/redispatch-event.js";import{live as d}from"../../node_modules/lit-html/directives/live.js";import"../../node_modules/lit/directives/live.js";import{searchBarStyle as f}from"./search-bar.style.js";let p=class extends s(l)(a){constructor(...e){super(...e),this.focusRingInward=!0,this.supportingText=`Type here to search`,this.hideAvatar=!1,this.value=``,this.hasLeadingIcon=!1,this.hasTrailingIcon=!1,this.hasAvatar=!1}static{this.shadowRootOptions={mode:`open`,delegatesFocus:!0}}static{this.styles=f}get focusRingControl(){return this.inputElement}render(){return i`<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()} ${this.renderFocusRing()}</div>`}renderLeadingIcon(){return i`<span class="leading-icon icon"><slot name="leading-icon" ="${this.handleLeadingIconSlotChange}"></slot></span>`}renderTrailingIcon(){return i`<span class="trailing-icon icon"><slot name="trailing-icon" ="${this.handleTrailingIconSlotChange}"></slot></span>`}renderInput(){return i`<input class="input" id="input" .value="${d(this.value)}" placeholder="${this.supportingText}" aria-placeholder="${this.supportingText}" ="${this.handleInputFocus}" ="${this.handleInput}" ="${this.handleChange}" ="${this.handleKeydown}">`}renderTouchTarget(){return i`<span class="touch-target" aria-hidden="true"></span>`}renderAvatar(){return i`<slot name="avatar" ="${this.handleAvatarSlotChange}">${this.renderDefaultAvatar()}</slot>`}renderDefaultAvatar(){return i`<button class="avatar" type="button" ="${this.handleAvatarClick}">${this.renderAvatarIcon()}<mdc-ripple></mdc-ripple><mdc-focus-ring></mdc-focus-ring></button>`}renderAvatarIcon(){return i`<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(e){e.stopPropagation();let t=new CustomEvent(`avatar-click`,{bubbles:!0,cancelable:!1,detail:{target:this.avatarElement,currentTarget:this}});u(this,t)}handleInputFocus(){this.focusRingElement&&(this.focusRingElement.focused=!0)}handleInput(e){this.value=e.target.value,e.stopPropagation(),this.dispatchValueEvent(`input`)}handleChange(e){this.value=e.target.value,e.stopPropagation(),this.dispatchValueEvent(`change`),this.dispatchValueEvent(`search`)}handleKeydown(e){e.key!==`Enter`||e.isComposing||e.repeat||(this.value=e.target.value,this.dispatchValueEvent(`search`))}dispatchValueEvent(e){this.dispatchEvent(new CustomEvent(e,{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleLeadingIconSlotChange(e){this.hasLeadingIcon=e.target.assignedElements().length>0}handleTrailingIconSlotChange(e){this.hasTrailingIcon=e.target.assignedElements().length>0}handleAvatarSlotChange(e){this.hasAvatar=e.target.assignedElements().length>0}};c([t({type:String,attribute:`supporting-text`})],p.prototype,`supportingText`,void 0),c([t({type:Boolean,attribute:`hide-avatar`})],p.prototype,`hideAvatar`,void 0),c([t({type:String})],p.prototype,`value`,void 0),c([n()],p.prototype,`hasLeadingIcon`,void 0),c([n()],p.prototype,`hasTrailingIcon`,void 0),c([n()],p.prototype,`hasAvatar`,void 0),c([r(`.avatar`)],p.prototype,`avatarElement`,void 0),c([r(`.input`)],p.prototype,`inputElement`,void 0),p=c([e(`mdc-search-bar`)],p);export{p as MDCSearchBar};
//# sourceMappingURL=search-bar.js.map