{"file":"presto-playlist-ui2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,+8FAA+8F;;MCO99F,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAA,WAAA,CAAA;;;;;;IAC3B,MAAM,GAAA;QACJ,QACE,4DAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,EAAA,EACrC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,UAAU,EAAA,EACnB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAG,CACnB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAQ,CACtB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAQ,CACtB,CACF,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAG,CAAA,CAChB,CACF,CACF,CACF,CACF;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/core/features/presto-playlist/ui/presto-playlist-ui.scss?tag=presto-playlist-ui&encapsulation=shadow","src/components/core/features/presto-playlist/ui/presto-playlist-ui.tsx"],"sourcesContent":[":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 &__base {\n user-select: none;\n }\n\n &__preview {\n position: relative;\n flex: 1;\n }\n\n &__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 &--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\n .playlist__list {\n gap: var(--presto-playlist-gap, 10px);\n display: flex;\n flex-direction: column;\n }\n\n &::-webkit-scrollbar {\n width: 6px;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: #ddd;\n border-radius: 5px;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: #888;\n border-radius: 5px;\n }\n\n /* Handle on hover */\n &::-webkit-scrollbar-thumb:hover {\n background: #aaa;\n border-radius: 5px;\n }\n }\n }\n\n &__heading {\n display: flex;\n justify-content: space-between;\n padding: 25px 30px 16px;\n }\n\n &__heading-title {\n font-size: 16px;\n font-weight: 500;\n color: var(--presto-playlist-text-color);\n }\n\n &__heading-count {\n color: var(--presto-playlist-text-color, var(--plyr-audio-control-color, #b1b1b1));\n font-size: 12px;\n }\n}\n\n/** Container query! */\n@container (max-width: 782px) {\n .playlist {\n flex-direction: column;\n\n &__info {\n max-width: none;\n min-height: none;\n width: 100%;\n\n &--inner {\n flex: 1;\n height: fit-content;\n max-height: var(--presto-playlist-max-height-stacked, 200px);\n min-height: var(--presto-playlist-min-height-stacked, 0);\n }\n }\n\n &__preview {\n min-height: 200px;\n }\n }\n\n ::slotted([provider='audio']) {\n padding: 30px; // padding to match the playlist component.\n min-height: 200px; // min-height to allow for the overlay text.\n padding-bottom: 0; // remove bottom padding because we are stacking the playlist.\n flex: 1; // stretch the audio player to fill the space.\n }\n}\n\n/** Older browsers fallback */\n@media (max-width: 782px) {\n .playlist {\n flex-direction: column;\n\n &__info {\n max-width: none;\n min-height: none;\n width: 100%;\n\n &--inner {\n flex: 1;\n height: fit-content;\n max-height: var(--presto-playlist-max-height-stacked, 200px);\n min-height: var(--presto-playlist-min-height-stacked, 0);\n }\n }\n }\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'presto-playlist-ui',\n styleUrl: 'presto-playlist-ui.scss',\n shadow: true,\n})\nexport class PrestoPlayListUI {\n render() {\n return (\n <div class=\"playlist__base\" part=\"base\">\n <div class=\"playlist\">\n <div class=\"playlist__preview\">\n <slot name=\"preview\" />\n </div>\n <div class=\"playlist__info\">\n <div class=\"playlist__heading\">\n <div class=\"playlist__heading-title\">\n <slot name=\"title\"></slot>\n </div>\n <div class=\"playlist__heading-count\">\n <slot name=\"count\"></slot>\n </div>\n </div>\n\n <div class=\"playlist__info--inner\">\n <div class=\"playlist__list\">\n <slot name=\"list\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}