@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
2 lines (1 loc) • 6.59 kB
JavaScript
import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{i as e,x as n}from"../../lit-element-Ho-VPzO1.js";import{t as i}from"../../custom-element-Dz3n6kSt.js";import{n as s}from"../../property-Ck1wIidx.js";import{r as o}from"../../state--U2hSgGK.js";import{e as a}from"../../query-DifSdHBD.js";import{o as r}from"../../query-assigned-elements-g_pFPJis.js";import{e as h}from"../../class-map-DlMb2KKL.js";import{mixinConnectedPromiseResolve as l}from"../../utils/behaviors/connected-promise-resolve.js";import"../navigation-item/navigation-bar-tab.js";import{NavigationRailDefaultOpenAnimation as p,NavigationRailDefaultCloseAnimation as d}from"./navigation-rail-animations.js";import{navigationRailStyle as c}from"./navigation-rail.style.js";import"../navigation-item/base-navigation-tab.js";import"../../utils/behaviors/element-internals.js";import"../../utils/event/form-label-activation.js";import"../navigation-item/navigation-tab-sigle-selection-controller.js";import"../navigation-item/navigation-tab.style.js";import"../../duration-CDKuKTyT.js";import"../../easing-5hHInU7b.js";import"../../component-definitions/navigation-tab.definition.js";import"../../color-CigMJnjV.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/override-component-tokens.js";import"../../utils/tokens/string-tokens.js";import"../../component-definitions/navigation-rail.definition.js";let m=class extends(l(e)){constructor(){super(...arguments),this.expanded=!1,this.position="top",this.xr=!1,this.quick=!1,this.hasInactiveMenu=!1,this.hasActiveMenu=!1,this.hasFab=!1,this.hasContent=!1,this.isOpen=!1,this.isOpening=!1,this.cancelAnimations=null}static{this.styles=c}get open(){return this.isOpen}set open(t){t!==this.isOpen&&(this.isOpen=t,t?(this.setAttribute("open",""),this.show()):(this.removeAttribute("open"),this.close()))}getRenderClasses(){return{expanded:this.expanded,collapsed:!this.expanded,xr:this.xr,top:"top"===this.position,middle:"middle"===this.position,"has-menu":this.hasActiveMenu||this.hasInactiveMenu,"has-inactive-menu":this.hasInactiveMenu,"has-active-menu":this.hasActiveMenu,"has-fab":this.hasFab,"has-content":this.hasContent}}render(){return n`<dialog class="${h(this.getRenderClasses())}"><span class="background" aria-hidden="true"></span><div class="container"><div class="menu-and-fab">${this.renderMenu()} ${this.renderFab()}</div>${this.renderContent()}</div></dialog>`}renderContent(){return n`<div class="content"><slot ="${this.handleContentSlotChange}"></slot></div>`}renderFab(){return n`<span class="fab"><slot name="fab" ="${this.handleFabSlotChange}"></slot></span>`}renderMenu(){return n`<span class="menu-active-icon"><slot name="menu-active-icon" ="${this.handleInactiveMenuSlotChange}"><mdc-standard-icon-button ="${this.handleCollapsed}">${this.renderMenuActiveIcon()}</mdc-standard-icon-button></slot></span><span class="menu-inactive-icon" ="${this.handleActiveMenuSlotChange}"><slot name="menu-inactive-icon"><mdc-standard-icon-button ="${this.handleExpanded}">${this.renderMenuInactiveIcon()}</mdc-standard-icon-button></slot></span>`}renderMenuInactiveIcon(){return n`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>`}renderMenuActiveIcon(){return n`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M120-240v-80h520v80H120Zm664-40L584-480l200-200 56 56-144 144 144 144-56 56ZM120-440v-80h400v80H120Zm0-200v-80h520v80H120Z"/></svg>`}async show(){this.isOpening=!0,await this.isConnectedPromise,await this.updateComplete;const t=this.dialog;if(t.open||!this.isOpening)return void(this.isOpening=!1);if(!this.dispatchEvent(new Event("open",{cancelable:!0})))return this.open=!1,void(this.isOpening=!1);t.show(),this.open=!0,this.querySelector("[autofocus]")?.focus(),await this.animateDialog(p),this.dispatchEvent(new Event("opened")),this.isOpening=!1}async close(){if(this.isOpening=!1,!this.isConnected)return void(this.open=!1);await this.updateComplete;const t=this.dialog;if(!t.open||this.isOpening)return void(this.open=!1);!this.dispatchEvent(new Event("close",{cancelable:!0}))||(await this.animateDialog(d),t.close(),this.open=!1,this.dispatchEvent(new Event("closed")))}async animateDialog(t){if(this.cancelAnimations?.abort(),this.cancelAnimations=new AbortController,this.quick)return;const{dialog:e,container:n,content:i}=this;if(!e||!n||!i)return;const{container:s,dialog:o,content:a}=t,r=[[e,o??[]],[n,s??[]],[i,a??[]]],h=[];for(const[t,e]of r)for(const n of e){const e=t.animate(...n);this.cancelAnimations.signal.addEventListener("abort",()=>{e.cancel()}),h.push(e)}await Promise.all(h.map(t=>t.finished.catch(()=>{})))}updated(t){t.has("xr")&&this.updateSlottedChild("xr",this.xr),t.has("expanded")&&this.updateSlottedChild("direction",this.expanded?"horizonal":"vertical"),super.updated(t)}updateSlottedChild(t,e){const n=this.tabs.filter(t=>"mdc-navigation-bar-tab"!==t.nodeName);if(0!==n.length)if("xr"===t&&e)for(const e of n)e.setAttribute(t,"");else if("xr"===t)for(const e of n)e.removeAttribute(t);else for(const i of n)i.setAttribute(t,e)}handleExpanded(){this.expanded=!0}handleCollapsed(){this.expanded=!1}handleInactiveMenuSlotChange(t){this.hasInactiveMenu=t.target.assignedElements().length>0}handleActiveMenuSlotChange(t){this.hasActiveMenu=t.target.assignedElements().length>0}handleFabSlotChange(t){this.hasFab=t.target.assignedElements().length>0}handleContentSlotChange(t){this.hasContent=t.target.assignedElements().length>0}};t([s({type:Boolean})],m.prototype,"expanded",void 0),t([s({type:String})],m.prototype,"position",void 0),t([s({type:Boolean})],m.prototype,"xr",void 0),t([s({type:Boolean})],m.prototype,"quick",void 0),t([s({type:Boolean,noAccessor:!0})],m.prototype,"open",null),t([a("dialog")],m.prototype,"dialog",void 0),t([a(".container")],m.prototype,"container",void 0),t([a(".content")],m.prototype,"content",void 0),t([r()],m.prototype,"tabs",void 0),t([o()],m.prototype,"hasInactiveMenu",void 0),t([o()],m.prototype,"hasActiveMenu",void 0),t([o()],m.prototype,"hasFab",void 0),t([o()],m.prototype,"hasContent",void 0),m=t([i("mdc-navigation-rail")],m);export{m as NavigationRail};