@vime/core/dist/vime/p-97c7a1d3.entry.js

Customizable, extensible, accessible and framework agnostic media player.

import{r as i,c as t,w as e,h as n,g as o}from"./p-aa8acb66.js";import{e as s,c as r,n as h}from"./p-b018976f.js";import{w as a}from"./p-cbbce638.js";import"./p-152748b8.js";var u=function(i,t,e,n){return new(e||(e=Promise))((function(o,s){function r(i){try{a(n.next(i))}catch(i){s(i)}}function h(i){try{a(n.throw(i))}catch(i){s(i)}}function a(i){var t;i.done?o(i.value):(t=i.value,t instanceof e?t:new e((function(i){i(t)}))).then(r,h)}a((n=n.apply(i,t||[])).next())}))};const l=class{constructor(e){i(this,e),this.vmOpen=t(this,"vmOpen",7),this.vmClose=t(this,"vmClose",7),this.vmFocus=t(this,"vmFocus",7),this.vmBlur=t(this,"vmBlur",7),this.vmActiveSubmenuChange=t(this,"vmActiveSubmenuChange",7),this.vmActiveMenuItemChange=t(this,"vmActiveMenuItemChange",7),this.vmMenuHeightChange=t(this,"vmMenuHeightChange",3),this.hasDisconnected=!1,this.active=!1,r(this)}onActiveMenuitemChange(){this.vmActiveMenuItemChange.emit(this.activeMenuItem)}onActiveSubmenuChange(){this.vmActiveSubmenuChange.emit(this.activeSubmenu)}onActiveChange(){var i;this.hasDisconnected||(this.active?this.vmOpen.emit(this.host):this.vmClose.emit(this.host),"vm-menu-item"===(null===(i=this.controller)||void 0===i?void 0:i.tagName.toLowerCase())&&(this.controller.expanded=!0))}connectedCallback(){this.hasDisconnected=!1}componentDidRender(){e((()=>{this.hasDisconnected||this.calculateHeight()}))}disconnectedCallback(){this.controller=void 0,this.hasDisconnected=!0}focusMenu(){var i;return u(this,void 0,void 0,(function*(){null===(i=this.menu)||void 0===i||i.focus()}))}blurMenu(){var i;return u(this,void 0,void 0,(function*(){null===(i=this.menu)||void 0===i||i.blur()}))}getActiveMenuItem(){return u(this,void 0,void 0,(function*(){return this.activeMenuItem}))}setActiveMenuItem(i){return u(this,void 0,void 0,(function*(){null==i||i.focusItem(),this.activeMenuItem=i}))}calculateHeight(){var i,t;return u(this,void 0,void 0,(function*(){let e=0;if(this.activeSubmenu){const t=yield this.activeSubmenu.getMenu();e=null!==(i=yield null==t?void 0:t.calculateHeight())&&void 0!==i?i:0,e+=(yield this.activeSubmenu.getControllerHeight())}else{const i=(null===(t=this.container)||void 0===t?void 0:t.firstChild).assignedElements({flatten:!0});null==i||i.forEach((i=>{e+=parseFloat(window.getComputedStyle(i).height)}))}return this.vmMenuHeightChange.emit(e),e}))}onOpenSubmenu(i){i.stopPropagation(),s(this.activeSubmenu)||(this.activeSubmenu.active=!1),this.activeSubmenu=i.detail,this.getChildren().forEach((i=>{i!==this.activeSubmenu&&(i.style.opacity="0",i.style.visibility="hidden")})),e((()=>{this.activeSubmenu.active=!0}))}onCloseSubmenu(i){null==i||i.stopPropagation(),s(this.activeSubmenu)||(this.activeSubmenu.active=!1),this.getChildren().forEach((i=>{i!==this.activeSubmenu&&(i.style.opacity="",i.style.visibility="")})),e((()=>{this.activeSubmenu=void 0}))}onWindowClick(){this.onCloseSubmenu(),this.onClose()}onWindowKeyDown(i){this.active&&"Escape"===i.key&&(this.onCloseSubmenu(),this.onClose(),this.focusController())}getChildren(){var i;const t=null===(i=this.host.shadowRoot.querySelector("slot"))||void 0===i?void 0:i.assignedElements({flatten:!0});return null!=t?t:[]}getMenuItems(){var i;return function(i){if(s(i))return[];const t=["vm-menu-item","vm-menu-radio-group","vm-submenu"];return Array.from(null!=i?i:[]).filter((i=>t.includes(i.tagName.toLowerCase()))).map((i=>function(i){return"vm-submenu"!==i.tagName.toLowerCase()?i:i.shadowRoot.querySelector("vm-menu-item")}(i))).map((i=>function(i){var t;if("vm-menu-radio-group"!==i.tagName.toLowerCase())return i;const e=i.shadowRoot.querySelector("slot");return Array.from(null!==(t=null==e?void 0:e.assignedElements())&&void 0!==t?t:[]).filter((i=>"vm-menu-radio"===i.tagName.toLowerCase())).map((i=>i.shadowRoot.querySelector("vm-menu-item")))}(i))).reduce(((i,t)=>i.concat(t)),[])}(null===(i=this.host.shadowRoot.querySelector("slot"))||void 0===i?void 0:i.assignedElements({flatten:!0}))}focusController(){var i,t,e,n,o;s(null===(i=this.controller)||void 0===i?void 0:i.focusItem)?s(null===(e=this.controller)||void 0===e?void 0:e.focusControl)?null===(o=this.controller)||void 0===o||o.focus():null===(n=this.controller)||void 0===n||n.focusControl():null===(t=this.controller)||void 0===t||t.focusItem()}triggerMenuItem(){var i;s(this.activeMenuItem)||(this.activeMenuItem.click(),null===(i=this.activeMenuItem.menu)||void 0===i||i.focusMenu())}onClose(){this.activeMenuItem=void 0,this.active=!1}onClick(i){i.stopPropagation()}onFocus(){var i;this.active=!0,[this.activeMenuItem]=this.getMenuItems(),null===(i=this.activeMenuItem)||void 0===i||i.focusItem(),this.vmFocus.emit()}onBlur(){this.vmBlur.emit()}foucsMenuItem(i,t){t<0&&(t=i.length-1),t>i.length-1&&(t=0),this.activeMenuItem=i[t],this.activeMenuItem.focusItem()}onKeyDown(i){if(!this.active)return;i.preventDefault(),i.stopPropagation();const t=this.getMenuItems();let e=t.findIndex((i=>i===this.activeMenuItem));switch(i.key){case"Escape":this.onClose(),this.focusController();break;case"ArrowDown":case"Tab":this.foucsMenuItem(t,e+=1);break;case"ArrowUp":this.foucsMenuItem(t,e-=1);break;case"ArrowLeft":this.onClose(),this.focusController();break;case"ArrowRight":case"Enter":case" ":this.triggerMenuItem();break;case"Home":case"PageUp":this.foucsMenuItem(t,0);break;case"End":case"PageDown":this.foucsMenuItem(t,t.length-1)}}render(){var i,t,e;return n("div",{id:this.identifier,class:{menu:!0,slideIn:!s(this.slideInDirection),slideInFromLeft:"left"===this.slideInDirection,slideInFromRight:"right"===this.slideInDirection},role:"menu",tabindex:"-1","aria-labelledby":null!==(t=null===(i=this.controller)||void 0===i?void 0:i.identifier)&&void 0!==t?t:null===(e=this.controller)||void 0===e?void 0:e.id,"aria-hidden":this.active?"false":"true",onFocus:this.onFocus.bind(this),onBlur:this.onBlur.bind(this),onClick:this.onClick.bind(this),onKeyDown:this.onKeyDown.bind(this),ref:i=>{this.menu=i}},n("div",{class:"container",ref:i=>{this.container=i}},n("slot",null)))}get host(){return o(this)}static get watchers(){return{activeMenuItem:["onActiveMenuitemChange"],activeSubmenu:["onActiveSubmenuChange"],active:["onActiveChange"]}}};l.style=":host{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:var(--vm-menu-z-index)}:host([active]){pointer-events:auto;z-index:calc(var(--vm-menu-z-index) + 1)}.menu{position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;transition:var(--vm-menu-transition)}.menu.slideIn{transform:translateX(0)}.menu[aria-hidden='true'].slideInFromLeft{transform:translateX(-100%)}.menu[aria-hidden='true'].slideInFromRight{transform:translateX(100%)}.container{display:flex;flex-direction:column;position:relative;text-align:left;width:100%;height:100%;color:var(--vm-menu-color);background:var(--vm-menu-bg);font-size:var(--vm-menu-font-size);font-weight:var(--vm-menu-font-weight)}.menu:focus{outline:0}";var v=function(i,t,e,n){return new(e||(e=Promise))((function(o,s){function r(i){try{a(n.next(i))}catch(i){s(i)}}function h(i){try{a(n.throw(i))}catch(i){s(i)}}function a(i){var t;i.done?o(i.value):(t=i.value,t instanceof e?t:new e((function(i){i(t)}))).then(r,h)}a((n=n.apply(i,t||[])).next())}))};const c=class{constructor(e){i(this,e),this.vmFocus=t(this,"vmFocus",7),this.vmBlur=t(this,"vmBlur",7),this.showTapHighlight=!1,this.hidden=!1,this.checkIcon="check",this.isTouch=!1,r(this),a(this,["isTouch"])}focusItem(){var i;return v(this,void 0,void 0,(function*(){null===(i=this.menuItem)||void 0===i||i.focus()}))}blurItem(){var i;return v(this,void 0,void 0,(function*(){null===(i=this.menuItem)||void 0===i||i.blur()}))}getHeight(){return v(this,void 0,void 0,(function*(){return parseFloat(this.menuItem?window.getComputedStyle(this.menuItem).height:"0")}))}onClick(){h(this.menu)||(this.menu.active=!this.expanded)}onFocus(){this.vmFocus.emit()}onBlur(){this.vmBlur.emit()}onTouchStart(){this.showTapHighlight=!0}onTouchEnd(){setTimeout((()=>{this.showTapHighlight=!1}),100)}onMouseLeave(){var i;null===(i=this.menuItem)||void 0===i||i.blur()}render(){var i,t,e,o;const r=!s(this.checked),h=!s(this.menu),a=this.expanded?"true":"false",u=this.checked?"true":"false",l=r&&!s(this.checkIcon),v=h&&this.expanded,c=h&&!this.expanded,m=!(s(this.hint)||r||h&&this.expanded),d=!s(this.badge)&&!m&&!c,f=m||c;return n("div",{class:{menuItem:!0,notTouch:!this.isTouch,tapHighlight:this.showTapHighlight,showDivider:h&&null!==(i=this.expanded)&&void 0!==i&&i},id:this.identifier,role:r?"menuitemradio":"menuitem",tabindex:"0","aria-label":this.label,"aria-hidden":this.hidden?"true":"false","aria-haspopup":h?"true":void 0,"aria-controls":null!==(e=null===(t=this.menu)||void 0===t?void 0:t.identifier)&&void 0!==e?e:null===(o=this.menu)||void 0===o?void 0:o.id,"aria-expanded":h?a:void 0,"aria-checked":r?u:void 0,onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this),onBlur:this.onBlur.bind(this),onTouchStart:this.onTouchStart.bind(this),onTouchEnd:this.onTouchEnd.bind(this),onMouseLeave:this.onMouseLeave.bind(this),ref:i=>{this.menuItem=i}},l&&n("vm-icon",{name:this.checkIcon,library:this.icons}),v&&n("span",{class:"arrow left"}),this.label,f&&n("span",{class:"spacer"}),m&&n("span",{class:"hint"},this.hint),d&&n("span",{class:"badge"},this.badge),c&&n("span",{class:"arrow right"}))}get host(){return o(this)}};c.style=":host{display:block}.menuItem{display:flex;position:relative;align-items:center;flex-direction:row;cursor:pointer;color:var(--vm-menu-color);background:var(--vm-menu-bg);font-size:var(--vm-menu-font-size);font-weight:var(--vm-menu-font-weight);padding:var(--vm-menu-item-padding);touch-action:manipulation;box-sizing:border-box}.menuItem:focus{outline:0}.menuItem.hidden{display:none}.menuItem.tapHighlight{background:var(--vm-menu-item-tap-highlight)}.menuItem.showDivider{border-bottom:0.5px solid var(--vm-menu-item-divider-color)}.menuItem.notTouch:hover,.menuItem.notTouch:focus{outline:0;color:var(--vm-menu-item-focus-color);background-color:var(--vm-menu-item-focus-bg)}.menuItem[aria-expanded='true']{position:absolute;z-index:2;top:0;width:100%}.menuItem[aria-hidden='true']{display:none}.menuItem[aria-checked='true'] vm-icon{opacity:1;visibility:visible}vm-icon{display:inline-block}vm-icon{fill:currentColor;pointer-events:none;font-size:var(--vm-menu-item-check-icon-size);margin-right:10px;opacity:0;visibility:hidden;transition:var(--vm-fade-transition)}.hint{display:inline-block;margin-left:auto;overflow:hidden;pointer-events:none;margin-right:6px;font-size:var(--vm-menu-item-hint-font-size);opacity:var(--vm-menu-item-hint-opacity);color:var(--vm-menu-item-hint-color)}.badge{display:inline-block;line-height:1;overflow:hidden;pointer-events:none;margin-left:6px;color:var(--vm-menu-item-badge-color);background:var(--vm-menu-item-badge-bg);font-size:var(--vm-menu-item-badge-font-size)}.spacer{flex:1}.arrow{color:var(--vm-menu-item-arrow-color);border:2px solid;padding:2px;display:inline-block;border-width:0 2px 2px 0}.arrow.left{margin-right:6px;transform:rotate(135deg)}.arrow.right{transform:rotate(-45deg);opacity:0.38}";export{l as vm_menu,c as vm_menu_item}