@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
2 lines (1 loc) • 4.56 kB
JavaScript
import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{x as i,i as e}from"../../lit-element-Ho-VPzO1.js";import{t as o}from"../../custom-element-Dz3n6kSt.js";import{n as s}from"../../property-Ck1wIidx.js";import{e as n}from"../../query-DifSdHBD.js";import{o as a}from"../../query-assigned-elements-g_pFPJis.js";import{e as r}from"../../class-map-DlMb2KKL.js";import{mixinConnectedPromiseResolve as p}from"../../utils/behaviors/connected-promise-resolve.js";import"../navigation-item/navigation-bar-tab.js";import{NavigationBarDefaultOpenAnimation as l,NavigationBarDefaultCloseAnimation as c}from"./navigation-bar-animations.js";import{navigationBarStyle as d}from"./navigation-bar.style.js";import"../navigation-item/base-navigation-tab.js";import"../../state--U2hSgGK.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-bar.definition.js";let h=class extends(p(e)){constructor(){super(...arguments),this.direction="vertical",this.position="between",this.xr=!1,this.quick=!1,this.isOpen=!1,this.isOpening=!1,this.cancelAnimations=null}static{this.styles=d}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{vertical:"vertical"===this.direction,horizonal:"vertical"!==this.direction,xr:this.xr,start:"start"===this.position,middle:"middle"===this.position,between:"between"===this.position,end:"end"===this.position}}render(){return i`<dialog class="${r(this.getRenderClasses())}"><span class="background" aria-hidden="true"></span><div class="container"><div class="content"><slot></slot></div></div></dialog>`}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(l),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(c),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:i,container:e,content:o}=this;if(!i||!e||!o)return;const{container:s,dialog:n,content:a}=t,r=[[i,n??[]],[e,s??[]],[o,a??[]]],p=[];for(const[t,i]of r)for(const e of i){const i=t.animate(...e);this.cancelAnimations.signal.addEventListener("abort",()=>{i.cancel()}),p.push(i)}await Promise.all(p.map(t=>t.finished.catch(()=>{})))}firstUpdated(t){super.firstUpdated(t)}updated(t){t.has("xr")&&this.updateSlottedChild("xr",this.xr),t.has("direction")&&this.updateSlottedChild("direction",this.direction),super.updated(t)}updateSlottedChild(t,i){const e=this.tabs.filter(t=>"mdc-navigation-bar-tab"!==t.nodeName);if(0!==e.length)if("xr"===t&&i)for(const i of e)i.setAttribute(t,"");else if("xr"===t)for(const i of e)i.removeAttribute(t);else for(const o of e)o.setAttribute(t,i)}};t([s({type:String})],h.prototype,"direction",void 0),t([s({type:String})],h.prototype,"position",void 0),t([s({type:Boolean})],h.prototype,"xr",void 0),t([s({type:Boolean})],h.prototype,"quick",void 0),t([s({type:Boolean,noAccessor:!0})],h.prototype,"open",null),t([n("dialog")],h.prototype,"dialog",void 0),t([n(".container")],h.prototype,"container",void 0),t([n(".content")],h.prototype,"content",void 0),t([a()],h.prototype,"tabs",void 0),h=t([o("mdc-navigation-bar")],h);export{h as NavigationBar};