OwlCyberSecurity - MANAGER

Edit File: presto-playlist-item2.js

import{h,proxyCustomElement,HTMLElement,createEvent}from"@stencil/core/internal/client";const PauseIcon=()=>h("svg",{width:"20",height:"20",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",class:"presto-icon-pause"},h("path",{d:"M5 16v-12h3v12h-3zM12 4h3v12h-3v-12z"})),PlayIcon=()=>h("svg",{version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",class:"presto-icon-play"},h("path",{d:"M5 4l10 6-10 6v-12z"})),prestoPlaylistItemCss=":host{display:block;cursor:pointer}::slotted(*){font-size:14px}.playlist__item{display:flex;justify-content:space-between;align-items:center;padding:6px;transition:background-color 0.25s ease;color:var(--presto-playlist-text-color, var(--plyr-audio-control-color, #4a5464));user-select:none;border-radius:8px}.playlist__item:hover{background-color:rgba(0, 0, 0, 0.05)}.playlist__item.playlist__item-is--active{background-color:var(--presto-playlist-highlight-color, var(--plyr-color-main, #2e4cd9));padding:6px;color:var(--playlist-highlight-text-color, #fff);border-radius:8px}.playlist__item.playlist__item-is--active .playlist__title-wrap>div{background-color:var(--playlist-highlight-text-color, #fff)}.playlist__item.playlist__item-is--active svg{fill:var(--presto-playlist-highlight-color, var(--plyr-color-main, #2e4cd9))}.playlist__item svg{fill:currentColor}.playlist__item .presto-icon-play path{transform:translateX(1px)}.playlist__title-wrap{display:flex;justify-content:center;align-items:center;gap:14px}.playlist__play-icon{display:flex;padding:2px;border-radius:50%;background:rgba(180, 184, 199, 0.25)}.playlist__time{opacity:0.8;font-size:12px;padding:0 4px}",PrestoPlaylistItemStyle0=prestoPlaylistItemCss,PrestoPlaylistItem=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.triggerPlay=createEvent(this,"triggerPlay",7),this.triggerPause=createEvent(this,"triggerPause",7),this.active=!1,this.playing=!1}render(){return h("div",{key:"49e846bdd8e8032f874150021aaef59755817bfb",class:{playlist__item:!0,"playlist__item-is--active":this.active,"playlist__item-is--playing":this.playing},onClick:()=>{this.playing?this.triggerPause.emit():this.triggerPlay.emit()}},h("div",{key:"030b3f66de76f741178b03447486563ced819381",class:"playlist__title-wrap"},h("div",{key:"4b1a2c717681406314c607871dee8113bd247ddc",class:"playlist__play-icon"},this.playing?h(PauseIcon,null):h(PlayIcon,null)),h("slot",{key:"b7b5d6369aa926ec829952f25e4007496367a993",name:"item-title"})),h("div",{key:"d515ddcb7caae30569b4669cb8880cb3e410ebc6",class:"playlist__time"},h("slot",{key:"ff8aceb7144b46b5f762e8b22bb3a3c51a40571f",name:"item-duration"})))}static get style(){return PrestoPlaylistItemStyle0}},[1,"presto-playlist-item",{active:[4],playing:[4]}]);function defineCustomElement(){"undefined"!=typeof customElements&&["presto-playlist-item"].forEach((t=>{"presto-playlist-item"===t&&(customElements.get(t)||customElements.define(t,PrestoPlaylistItem))}))}export{PrestoPlaylistItem as P,defineCustomElement as d};