OwlCyberSecurity - MANAGER

Edit File: presto-playlist-ui2.js

import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";const prestoPlaylistUiCss=":host {\n display: block;\n background: transparent !important;\n}\n\n.playlist__base {\n container-type: inline-size;\n}\n\n::slotted([provider=audio]) {\n flex: 1;\n box-sizing: border-box;\n flex: 0 0 100%;\n min-height: 300px;\n}\n\n.playlist {\n display: flex;\n justify-content: stretch;\n align-items: stretch;\n border-radius: var(--presto-playlist-border-radius, 8px);\n overflow: hidden;\n border-width: var(--presto-playlist-border-width, 1px);\n border-style: solid;\n border-color: var(--presto-playlist-border-color, #ddd);\n background: var(--presto-playlist-background-color, #fff);\n position: relative;\n}\n.playlist__base {\n user-select: none;\n}\n.playlist__preview {\n position: relative;\n flex: 1;\n}\n.playlist__info {\n border-radius: 8px;\n overflow-y: scroll;\n min-width: 300px;\n max-width: 350px;\n width: 30%;\n display: flex;\n flex-direction: column;\n overflow: auto;\n}\n.playlist__info--inner {\n flex: 1 1 1px;\n overflow: auto;\n margin: 30px;\n margin-top: 0;\n margin-right: 15px;\n padding-right: 15px;\n height: fit-content;\n min-height: 175px;\n /* Track */\n /* Handle */\n /* Handle on hover */\n}\n.playlist__info--inner .playlist__list {\n gap: var(--presto-playlist-gap, 10px);\n display: flex;\n flex-direction: column;\n}\n.playlist__info--inner::-webkit-scrollbar {\n width: 6px;\n}\n.playlist__info--inner::-webkit-scrollbar-track {\n background: #ddd;\n border-radius: 5px;\n}\n.playlist__info--inner::-webkit-scrollbar-thumb {\n background: #888;\n border-radius: 5px;\n}\n.playlist__info--inner::-webkit-scrollbar-thumb:hover {\n background: #aaa;\n border-radius: 5px;\n}\n.playlist__heading {\n display: flex;\n justify-content: space-between;\n padding: 25px 30px 16px;\n}\n.playlist__heading-title {\n font-size: 16px;\n font-weight: 500;\n color: var(--presto-playlist-text-color);\n}\n.playlist__heading-count {\n color: var(--presto-playlist-text-color, var(--plyr-audio-control-color, #b1b1b1));\n font-size: 12px;\n}\n\n/** Container query! */\n@container (max-width: 782px) {\n .playlist {\n flex-direction: column;\n }\n .playlist__info {\n max-width: none;\n min-height: none;\n width: 100%;\n }\n .playlist__info--inner {\n flex: 1;\n height: fit-content;\n max-height: 200px;\n min-height: min-content;\n }\n .playlist__preview {\n min-height: 200px;\n }\n ::slotted([provider=audio]) {\n padding: 30px;\n min-height: 200px;\n padding-bottom: 0;\n flex: 1;\n }\n}\n/** Older browsers fallback */\n@media (max-width: 782px) {\n .playlist {\n flex-direction: column;\n }\n .playlist__info {\n max-width: none;\n min-height: none;\n width: 100%;\n }\n .playlist__info--inner {\n flex: 1;\n height: fit-content;\n max-height: 200px;\n min-height: min-content;\n }\n}",PrestoPlaylistUiStyle0=prestoPlaylistUiCss,PrestoPlayListUI=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow()}render(){return h("div",{key:"e491b728a12bbe88b47ab93e76eaea8237dd3cea",class:"playlist__base",part:"base"},h("div",{key:"672c71c6e0b425ea093c4395cb86f106cc4f2785",class:"playlist"},h("div",{key:"f785f31695ada6ffa3cc62413d8f739605ceb9e7",class:"playlist__preview"},h("slot",{key:"636b6374490405d59b2c6d1f226942e1d75056dc",name:"preview"})),h("div",{key:"f3b0fac78923018568c53b7d8dd753a012f86332",class:"playlist__info"},h("div",{key:"d343092dda7a695530dee464a9f72fcd0f4a2738",class:"playlist__heading"},h("div",{key:"70cd1f9a9d8f0b4ad972e9886dbced212492b52f",class:"playlist__heading-title"},h("slot",{key:"949df1a54f703e886e8204407b3b651088bfcc01",name:"title"})),h("div",{key:"c1969328b820129132fdb0045864440c568d24fe",class:"playlist__heading-count"},h("slot",{key:"47a163b788d1619ad130bd6ef62855681699d914",name:"count"}))),h("div",{key:"e368d3e86d468053bdb754f326c6b2386f12e568",class:"playlist__info--inner"},h("div",{key:"42976f9e474ec11c7dce1664449f380791a4995a",class:"playlist__list"},h("slot",{key:"f3265b3ed5c8e08ed1e796cbce1b17fb165ce545",name:"list"}))))))}static get style(){return PrestoPlaylistUiStyle0}},[1,"presto-playlist-ui"]);function defineCustomElement(){"undefined"!=typeof customElements&&["presto-playlist-ui"].forEach((n=>{"presto-playlist-ui"===n&&(customElements.get(n)||customElements.define(n,PrestoPlayListUI))}))}export{PrestoPlayListUI as P,defineCustomElement as d};