urnovl-web-components 0.0.250 → 0.0.251

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/cjs/ur-avatar_3.cjs.entry.js +1 -1
  2. package/dist/cjs/ur-page.cjs.entry.js +1 -1
  3. package/dist/cjs/ur-user.cjs.entry.js +1 -1
  4. package/dist/collection/components/ur-novl/ur-novl.css +1 -0
  5. package/dist/collection/components/ur-page/ur-page.css +1 -0
  6. package/dist/collection/components/ur-user/ur-user.css +1 -0
  7. package/dist/components/{p-MV2g5YO1.js → p-D5urDMr9.js} +1 -1
  8. package/dist/components/{p-DwKVXSJA.js → p-K9pZ03UZ.js} +1 -1
  9. package/dist/components/p-rZag08H9.js +92 -0
  10. package/dist/components/ur-novl-carousel.js +1 -1
  11. package/dist/components/ur-novl.js +1 -1
  12. package/dist/components/ur-page-carousel.js +1 -1
  13. package/dist/components/ur-page.js +1 -1
  14. package/dist/components/ur-user-carousel.js +1 -1
  15. package/dist/components/ur-user.js +1 -1
  16. package/dist/esm/ur-avatar_3.entry.js +1 -1
  17. package/dist/esm/ur-page.entry.js +1 -1
  18. package/dist/esm/ur-user.entry.js +1 -1
  19. package/dist/urnovl-web-components/p-5367ebcc.entry.js +1 -0
  20. package/dist/urnovl-web-components/p-8e781f77.entry.js +1 -0
  21. package/dist/urnovl-web-components/p-f7b397dd.entry.js +1 -0
  22. package/dist/urnovl-web-components/urnovl-web-components.esm.js +1 -1
  23. package/package.json +1 -1
  24. package/www/build/{p-4db0b127.js → p-2f354d98.js} +1 -1
  25. package/www/build/p-5367ebcc.entry.js +1 -0
  26. package/www/build/p-8e781f77.entry.js +1 -0
  27. package/www/build/p-f7b397dd.entry.js +1 -0
  28. package/www/build/urnovl-web-components.esm.js +1 -1
  29. package/dist/components/p-DWiu4wLZ.js +0 -92
  30. package/dist/urnovl-web-components/p-0cb44e8c.entry.js +0 -1
  31. package/dist/urnovl-web-components/p-20dc465a.entry.js +0 -1
  32. package/dist/urnovl-web-components/p-acbec56b.entry.js +0 -1
  33. package/www/build/p-0cb44e8c.entry.js +0 -1
  34. package/www/build/p-20dc465a.entry.js +0 -1
  35. package/www/build/p-acbec56b.entry.js +0 -1
package/dist/cjs/ur-avatar_3.cjs.entry.js CHANGED
@@ -5,7 +5,7 @@ var index = require('./index-CcHk156y.js');
5
5
  var novls = require('./novls-BHGdrCzu.js');
6
6
  var urTooltip = require('./ur-tooltip-CCUDNbg7.js');
7
7
 
8
- const urNovlCss = ":host {\r\n --novl-width: 100%;\r\n --novl-border-radius: 8px;\r\n --ur-color-on-background: var(--mdui-color-on-background);\r\n --ur-color-background: var(--mdui-color-background);\r\n}\r\n\r\n@keyframes placeholderAnimate {\r\n 0%{ background-position: -650px 0; }\r\n 100%{ background-position: 650px 0; }\r\n}\r\n\r\n:host {\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: content-box;\r\n container-type: inline-size;\r\n container-name: novl;\r\n}\r\n\r\n:host .novl {\r\n overflow: hidden;\r\n width: var(--novl-width);\r\n border-radius: var(--novl-border-radius);\r\n cursor: pointer;\r\n}\r\n\r\n:host .novl:hover {\r\n background: rgba(var(--ur-color-on-background), 0.12);\r\n}\r\n\r\n:host .novl.loading {\r\n cursor: default;\r\n}\r\n\r\n:host .cover {\r\n aspect-ratio: 2.25;\r\n background-color: rgb(var(--ur-color-on-background));\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n position: relative;\r\n}\r\n\r\n:host .cover.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n }\r\n\r\n:host .cover .ongoing {\r\n background-color: rgb(var(--mdui-color-primary-container));\r\n height: 32px;\r\n width: 32px;\r\n border-radius: 50%;\r\n position: absolute;\r\n top: 8px;\r\n left: 8px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: rgb(var(--mdui-color-primary));\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n font-size: 14px;\r\n line-height: 14px;\r\n}\r\n\r\n:host .cover .ongoing span {\r\n position: relative;\r\n}\r\n\r\n:host .cover .price {\r\n position: absolute;\r\n top: 8px;\r\n right: 8px;\r\n border-radius: 25px;\r\n background: rgba(43, 43, 39, 0.55);\r\n padding: 9px 16px;\r\n box-sizing: border-box;\r\n line-height: 14px;\r\n font-weight: 700;\r\n font-size: 14px;\r\n color: #fff;\r\n}\r\n\r\n:host .cover .avatar-holder {\r\n left: 0;\r\n bottom: 0;\r\n display: flex;\r\n position: absolute;\r\n align-items: center;\r\n padding: 0 4px;\r\n box-sizing: border-box;\r\n column-gap: 8px;\r\n transform: translateY(50%);\r\n}\r\n\r\n:host .cover .avatar-holder ur-avatar.author-avatar {\r\n display: block;\r\n}\r\n\r\n:host .cover .avatar-holder .publisher-avatar-container {\r\n position: absolute;\r\n bottom: 2px;\r\n right: -6px;\r\n height: 18px;\r\n width: 18px;\r\n}\r\n\r\n:host .cover .avatar-holder ur-avatar.publisher-avatar {\r\n display: block;\r\n}\r\n\r\n:host .txt-info-holder .publisher-info {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n column-gap: 4px;\r\n}\r\n\r\n:host .cover .avatar-holder .name {\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: 12px; /* 100% */\r\n color: #fff;\r\n}\r\n\r\n:host .info {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 24px 8px 8px 8px;\r\n row-gap: 8px;\r\n box-sizing: border-box;\r\n}\r\n\r\n:host .info:has(.loading) {\r\n padding-left: 0;\r\n padding-right: 0;\r\n}\r\n\r\n:host .info .title {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .title.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats {\r\n font-size: 12px;\r\n font-weight: 400;\r\n line-height: 12px;\r\n display: flex;\r\n flex-direction: row;\r\n color: rgb(var(--ur-color-on-background));\r\n}\r\n\r\n:host .info .stats.loading {\r\n height: 12px;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats b {\r\n font-weight: 700;\r\n}\r\n\r\n:host .info .stats .likes {\r\n display: flex;\r\n}\r\n\r\n:host .info .stats .dot {\r\n margin-left: 4px;\r\n}\r\n\r\n:host .info .stats .views-container {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n column-gap: 4px;\r\n}\r\n\r\n:host .info .txt-info-holder {\r\n display: flex;\r\n align-items: center;\r\n font-size: 11px;\r\n font-style: normal;\r\n font-weight: 600;\r\n color: rgb(var(--ur-color-on-background));\r\n cursor: pointer;\r\n column-gap: 4px;\r\n}\r\n\r\n:host .info .txt-info-holder .avatar {\r\n height: 32px;\r\n width: 32px;\r\n border-radius: 50%;\r\n background-size: cover;\r\n}\r\n\r\n:host .info .txt-info-holder .avatar.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n }\r\n\r\n:host .info .txt-info-holder .name {\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: 12px;\r\n}\r\n\r\n:host .info .txt-info-holder .name.loading {\r\n height: 12px;\r\n width: 50%;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n@container novl (max-width: 300px) {\r\n :host .info .title {\r\n font-size: 14px;\r\n line-height: 1.2rem;\r\n }\r\n\r\n :host .info .txt-info-holder .avatar {\r\n height: 24px;\r\n width: 24px;\r\n }\r\n\r\n :host .cover .publisher {\r\n height: 40px;\r\n padding: 0 4px;\r\n }\r\n\r\n\r\n :host .cover .publisher .name {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .txt-info-holder .name {\r\n font-size: 11px;\r\n }\r\n\r\n :host .cover .ongoing {\r\n width: 24px;\r\n height: 24px;\r\n left: 4px;\r\n }\r\n\r\n :host .cover .price {\r\n padding: 5px 8px;\r\n font-size: 12px;\r\n }\r\n\r\n :host .info .stats {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .description{\r\n font-size: 11px;\r\n }\r\n\r\n :host .info {\r\n row-gap: 4px;\r\n padding: 4px;\r\n padding-top: 22px;\r\n }\r\n\r\n :host .info .title.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .stats.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .description.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .txt-info-holder.loading {\r\n margin: 0 4px;\r\n }\r\n}\r\n";
8
+ const urNovlCss = ":host {\r\n --novl-width: 100%;\r\n --novl-border-radius: 8px;\r\n --ur-color-on-background: var(--mdui-color-on-background);\r\n --ur-color-background: var(--mdui-color-background);\r\n}\r\n\r\n@keyframes placeholderAnimate {\r\n 0%{ background-position: -650px 0; }\r\n 100%{ background-position: 650px 0; }\r\n}\r\n\r\n:host {\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: content-box;\r\n container-type: inline-size;\r\n container-name: novl;\r\n}\r\n\r\n:host .novl {\r\n overflow: hidden;\r\n width: var(--novl-width);\r\n border-radius: var(--novl-border-radius);\r\n cursor: pointer;\r\n}\r\n\r\n:host .novl:hover {\r\n background: rgba(var(--ur-color-on-background), 0.12);\r\n}\r\n\r\n:host .novl.loading {\r\n cursor: default;\r\n}\r\n\r\n:host .cover {\r\n aspect-ratio: 2.25;\r\n background-color: rgb(var(--ur-color-on-background));\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n position: relative;\r\n animation: none;\r\n}\r\n\r\n:host .cover.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n }\r\n\r\n:host .cover .ongoing {\r\n background-color: rgb(var(--mdui-color-primary-container));\r\n height: 32px;\r\n width: 32px;\r\n border-radius: 50%;\r\n position: absolute;\r\n top: 8px;\r\n left: 8px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: rgb(var(--mdui-color-primary));\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n font-size: 14px;\r\n line-height: 14px;\r\n}\r\n\r\n:host .cover .ongoing span {\r\n position: relative;\r\n}\r\n\r\n:host .cover .price {\r\n position: absolute;\r\n top: 8px;\r\n right: 8px;\r\n border-radius: 25px;\r\n background: rgba(43, 43, 39, 0.55);\r\n padding: 9px 16px;\r\n box-sizing: border-box;\r\n line-height: 14px;\r\n font-weight: 700;\r\n font-size: 14px;\r\n color: #fff;\r\n}\r\n\r\n:host .cover .avatar-holder {\r\n left: 0;\r\n bottom: 0;\r\n display: flex;\r\n position: absolute;\r\n align-items: center;\r\n padding: 0 4px;\r\n box-sizing: border-box;\r\n column-gap: 8px;\r\n transform: translateY(50%);\r\n}\r\n\r\n:host .cover .avatar-holder ur-avatar.author-avatar {\r\n display: block;\r\n}\r\n\r\n:host .cover .avatar-holder .publisher-avatar-container {\r\n position: absolute;\r\n bottom: 2px;\r\n right: -6px;\r\n height: 18px;\r\n width: 18px;\r\n}\r\n\r\n:host .cover .avatar-holder ur-avatar.publisher-avatar {\r\n display: block;\r\n}\r\n\r\n:host .txt-info-holder .publisher-info {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n column-gap: 4px;\r\n}\r\n\r\n:host .cover .avatar-holder .name {\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: 12px; /* 100% */\r\n color: #fff;\r\n}\r\n\r\n:host .info {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 24px 8px 8px 8px;\r\n row-gap: 8px;\r\n box-sizing: border-box;\r\n}\r\n\r\n:host .info:has(.loading) {\r\n padding-left: 0;\r\n padding-right: 0;\r\n}\r\n\r\n:host .info .title {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .title.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats {\r\n font-size: 12px;\r\n font-weight: 400;\r\n line-height: 12px;\r\n display: flex;\r\n flex-direction: row;\r\n color: rgb(var(--ur-color-on-background));\r\n}\r\n\r\n:host .info .stats.loading {\r\n height: 12px;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats b {\r\n font-weight: 700;\r\n}\r\n\r\n:host .info .stats .likes {\r\n display: flex;\r\n}\r\n\r\n:host .info .stats .dot {\r\n margin-left: 4px;\r\n}\r\n\r\n:host .info .stats .views-container {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n column-gap: 4px;\r\n}\r\n\r\n:host .info .txt-info-holder {\r\n display: flex;\r\n align-items: center;\r\n font-size: 11px;\r\n font-style: normal;\r\n font-weight: 600;\r\n color: rgb(var(--ur-color-on-background));\r\n cursor: pointer;\r\n column-gap: 4px;\r\n}\r\n\r\n:host .info .txt-info-holder .avatar {\r\n height: 32px;\r\n width: 32px;\r\n border-radius: 50%;\r\n background-size: cover;\r\n}\r\n\r\n:host .info .txt-info-holder .avatar.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n }\r\n\r\n:host .info .txt-info-holder .name {\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: 12px;\r\n}\r\n\r\n:host .info .txt-info-holder .name.loading {\r\n height: 12px;\r\n width: 50%;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n@container novl (max-width: 300px) {\r\n :host .info .title {\r\n font-size: 14px;\r\n line-height: 1.2rem;\r\n }\r\n\r\n :host .info .txt-info-holder .avatar {\r\n height: 24px;\r\n width: 24px;\r\n }\r\n\r\n :host .cover .publisher {\r\n height: 40px;\r\n padding: 0 4px;\r\n }\r\n\r\n\r\n :host .cover .publisher .name {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .txt-info-holder .name {\r\n font-size: 11px;\r\n }\r\n\r\n :host .cover .ongoing {\r\n width: 24px;\r\n height: 24px;\r\n left: 4px;\r\n }\r\n\r\n :host .cover .price {\r\n padding: 5px 8px;\r\n font-size: 12px;\r\n }\r\n\r\n :host .info .stats {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .description{\r\n font-size: 11px;\r\n }\r\n\r\n :host .info {\r\n row-gap: 4px;\r\n padding: 4px;\r\n padding-top: 22px;\r\n }\r\n\r\n :host .info .title.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .stats.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .description.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .txt-info-holder.loading {\r\n margin: 0 4px;\r\n }\r\n}\r\n";
9
9
 
10
10
  const UrNovl = class {
11
11
  constructor(hostRef) {
package/dist/cjs/ur-page.cjs.entry.js CHANGED
@@ -4,7 +4,7 @@ var index = require('./index-CcHk156y.js');
4
4
 
5
5
  const PAGE_COVER_FALLBACK = 'data:image/webp;base64,UklGRtQAAABXRUJQVlA4TMgAAAAv/8f/EQfQla70pPIBIUHi/+9mIvqf8Z///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7vAQ==';
6
6
 
7
- const urPageCss = ":host {\r\n --page-width: 100%;\r\n --page-border-radius: 8px;\r\n --ur-color-on-background: var(--mdui-color-on-background);\r\n --ur-color-background: var(--mdui-color-background);\r\n --ur-color-on-container-lite-dark: var(--mdui-color-on-container-lite-dark);\r\n --ur-color-on-container-primary: var(--mdui-color-primary-container);\r\n --ur-color-primary: var(--mdui-color-primary);\r\n}\r\n\r\n@keyframes placeholderAnimate {\r\n 0%{ background-position: -650px 0; }\r\n 100%{ background-position: 650px 0; }\r\n}\r\n\r\n:host {\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: content-box;\r\n container-type: inline-size;\r\n container-name: page;\r\n}\r\n\r\n:host .page {\r\n overflow: hidden;\r\n width: var(--page-width);\r\n border-radius: var(--page-border-radius);\r\n cursor: pointer;\r\n}\r\n\r\n:host .page:hover {\r\n background: rgba(var(--ur-color-on-background), 0.12);\r\n}\r\n\r\n:host .page.loading {\r\n cursor: default;\r\n}\r\n\r\n:host .cover {\r\n aspect-ratio: 1;\r\n background-color: rgb(var(--ur-color-on-background));\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n position: relative;\r\n}\r\n\r\n:host .cover.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 8px;\r\n row-gap: 8px;\r\n box-sizing: border-box;\r\n}\r\n\r\n:host .info:has(.loading) {\r\n padding-left: 0;\r\n padding-right: 0;\r\n}\r\n\r\n:host .info .title {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .title.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats {\r\n font-size: 12px;\r\n font-weight: 400;\r\n line-height: 12px;\r\n display: flex;\r\n flex-direction: row;\r\n color: rgb(var(--ur-color-on-background));\r\n}\r\n\r\n:host .info .stats.loading {\r\n height: 12px;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats b {\r\n font-weight: 700;\r\n}\r\n\r\n:host .info .stats .followers {\r\n display: flex;\r\n}\r\n\r\n:host .page .actions {\r\n padding-top: 10px;\r\n}\r\n\r\n:host .info .actions.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .page .actions ur-button {\r\n width: 100%;\r\n padding-bottom: 5px;\r\n}\r\n\r\n:host .follow {\r\n display: flex;\r\n width: 100%;\r\n}\r\n\r\n:host .info .description {\r\n color: rgb(var(--ur-color-on-container-lite-dark));\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 16px; /* 163.636% */\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .description.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n@container page (max-width: 300px) {\r\n :host .info .title {\r\n font-size: 14px;\r\n line-height: 1.2rem;\r\n }\r\n\r\n :host .info .stats {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .description{\r\n font-size: 11px;\r\n }\r\n\r\n :host .info {\r\n row-gap: 4px;\r\n padding: 4px;\r\n }\r\n\r\n :host .info .title.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .stats.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .description.loading {\r\n margin: 0 4px;\r\n }\r\n}\r\n";
7
+ const urPageCss = ":host {\r\n --page-width: 100%;\r\n --page-border-radius: 8px;\r\n --ur-color-on-background: var(--mdui-color-on-background);\r\n --ur-color-background: var(--mdui-color-background);\r\n --ur-color-on-container-lite-dark: var(--mdui-color-on-container-lite-dark);\r\n --ur-color-on-container-primary: var(--mdui-color-primary-container);\r\n --ur-color-primary: var(--mdui-color-primary);\r\n}\r\n\r\n@keyframes placeholderAnimate {\r\n 0%{ background-position: -650px 0; }\r\n 100%{ background-position: 650px 0; }\r\n}\r\n\r\n:host {\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: content-box;\r\n container-type: inline-size;\r\n container-name: page;\r\n}\r\n\r\n:host .page {\r\n overflow: hidden;\r\n width: var(--page-width);\r\n border-radius: var(--page-border-radius);\r\n cursor: pointer;\r\n}\r\n\r\n:host .page:hover {\r\n background: rgba(var(--ur-color-on-background), 0.12);\r\n}\r\n\r\n:host .page.loading {\r\n cursor: default;\r\n}\r\n\r\n:host .cover {\r\n aspect-ratio: 1;\r\n background-color: rgb(var(--ur-color-on-background));\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n position: relative;\r\n animation: none;\r\n}\r\n\r\n:host .cover.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 8px;\r\n row-gap: 8px;\r\n box-sizing: border-box;\r\n}\r\n\r\n:host .info:has(.loading) {\r\n padding-left: 0;\r\n padding-right: 0;\r\n}\r\n\r\n:host .info .title {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .title.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats {\r\n font-size: 12px;\r\n font-weight: 400;\r\n line-height: 12px;\r\n display: flex;\r\n flex-direction: row;\r\n color: rgb(var(--ur-color-on-background));\r\n}\r\n\r\n:host .info .stats.loading {\r\n height: 12px;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats b {\r\n font-weight: 700;\r\n}\r\n\r\n:host .info .stats .followers {\r\n display: flex;\r\n}\r\n\r\n:host .page .actions {\r\n padding-top: 10px;\r\n}\r\n\r\n:host .info .actions.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .page .actions ur-button {\r\n width: 100%;\r\n padding-bottom: 5px;\r\n}\r\n\r\n:host .follow {\r\n display: flex;\r\n width: 100%;\r\n}\r\n\r\n:host .info .description {\r\n color: rgb(var(--ur-color-on-container-lite-dark));\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 16px; /* 163.636% */\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .description.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n@container page (max-width: 300px) {\r\n :host .info .title {\r\n font-size: 14px;\r\n line-height: 1.2rem;\r\n }\r\n\r\n :host .info .stats {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .description{\r\n font-size: 11px;\r\n }\r\n\r\n :host .info {\r\n row-gap: 4px;\r\n padding: 4px;\r\n }\r\n\r\n :host .info .title.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .stats.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .description.loading {\r\n margin: 0 4px;\r\n }\r\n}\r\n";
8
8
 
9
9
  const UrPage = class {
10
10
  constructor(hostRef) {
package/dist/cjs/ur-user.cjs.entry.js CHANGED
@@ -4,7 +4,7 @@ var index = require('./index-CcHk156y.js');
4
4
 
5
5
  const USER_COVER_FALLBACK = 'data:image/webp;base64,UklGRtQAAABXRUJQVlA4TMgAAAAv/8f/EQfQla70pPIBIUHi/+9mIvqf8Z///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7vAQ==';
6
6
 
7
- const urUserCss = ":host {\r\n --user-width: 100%;\r\n --user-border-radius: 8px;\r\n --ur-color-on-background: var(--mdui-color-on-background);\r\n --ur-color-background: var(--mdui-color-background);\r\n --ur-color-on-container-primary: var(--mdui-color-primary-container);\r\n --ur-color-primary: var(--mdui-color-primary);\r\n}\r\n\r\n@keyframes placeholderAnimate {\r\n 0%{ background-position: -650px 0; }\r\n 100%{ background-position: 650px 0; }\r\n}\r\n\r\n:host {\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: content-box;\r\n container-type: inline-size;\r\n container-name: user;\r\n}\r\n\r\n:host .user {\r\n overflow: hidden;\r\n width: var(--user-width);\r\n border-radius: var(--user-border-radius);\r\n cursor: pointer;\r\n}\r\n\r\n:host .user:hover {\r\n background: rgba(var(--ur-color-on-background), 0.12);\r\n}\r\n\r\n:host .user.loading {\r\n cursor: default;\r\n}\r\n\r\n:host .cover {\r\n aspect-ratio: 1;\r\n background-color: rgb(var(--ur-color-on-background));\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n position: relative;\r\n}\r\n\r\n:host .cover.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 8px;\r\n row-gap: 8px;\r\n box-sizing: border-box;\r\n}\r\n\r\n:host .info:has(.loading) {\r\n padding-left: 0;\r\n padding-right: 0;\r\n}\r\n\r\n:host .info .title {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .title.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats {\r\n font-size: 12px;\r\n font-weight: 400;\r\n line-height: 12px;\r\n display: flex;\r\n flex-direction: row;\r\n color: rgb(var(--ur-color-on-background));\r\n}\r\n\r\n:host .info .stats.loading {\r\n height: 12px;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats b {\r\n font-weight: 700;\r\n}\r\n\r\n:host .info .stats .followers {\r\n display: flex;\r\n}\r\n\r\n:host .user .actions {\r\n padding-top: 10px;\r\n}\r\n\r\n:host .info .actions.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .user .actions ur-button {\r\n width: 100%;\r\n padding-bottom: 5px;\r\n}\r\n\r\n:host .follow {\r\n display: flex;\r\n width: 100%;\r\n}\r\n\r\n:host .info .description {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 16px; /* 163.636% */\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .description.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n@container user (max-width: 300px) {\r\n :host .info .title {\r\n font-size: 14px;\r\n line-height: 1.2rem;\r\n }\r\n\r\n :host .info .stats {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .description{\r\n font-size: 11px;\r\n }\r\n\r\n :host .info {\r\n row-gap: 4px;\r\n padding: 4px;\r\n }\r\n\r\n\r\n :host .info .title.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .stats.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .description.loading {\r\n margin: 0 4px;\r\n }\r\n}\r\n";
7
+ const urUserCss = ":host {\r\n --user-width: 100%;\r\n --user-border-radius: 8px;\r\n --ur-color-on-background: var(--mdui-color-on-background);\r\n --ur-color-background: var(--mdui-color-background);\r\n --ur-color-on-container-primary: var(--mdui-color-primary-container);\r\n --ur-color-primary: var(--mdui-color-primary);\r\n}\r\n\r\n@keyframes placeholderAnimate {\r\n 0%{ background-position: -650px 0; }\r\n 100%{ background-position: 650px 0; }\r\n}\r\n\r\n:host {\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: content-box;\r\n container-type: inline-size;\r\n container-name: user;\r\n}\r\n\r\n:host .user {\r\n overflow: hidden;\r\n width: var(--user-width);\r\n border-radius: var(--user-border-radius);\r\n cursor: pointer;\r\n}\r\n\r\n:host .user:hover {\r\n background: rgba(var(--ur-color-on-background), 0.12);\r\n}\r\n\r\n:host .user.loading {\r\n cursor: default;\r\n}\r\n\r\n:host .cover {\r\n aspect-ratio: 1;\r\n background-color: rgb(var(--ur-color-on-background));\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n position: relative;\r\n animation: none;\r\n}\r\n\r\n:host .cover.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 8px;\r\n row-gap: 8px;\r\n box-sizing: border-box;\r\n}\r\n\r\n:host .info:has(.loading) {\r\n padding-left: 0;\r\n padding-right: 0;\r\n}\r\n\r\n:host .info .title {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .title.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats {\r\n font-size: 12px;\r\n font-weight: 400;\r\n line-height: 12px;\r\n display: flex;\r\n flex-direction: row;\r\n color: rgb(var(--ur-color-on-background));\r\n}\r\n\r\n:host .info .stats.loading {\r\n height: 12px;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats b {\r\n font-weight: 700;\r\n}\r\n\r\n:host .info .stats .followers {\r\n display: flex;\r\n}\r\n\r\n:host .user .actions {\r\n padding-top: 10px;\r\n}\r\n\r\n:host .info .actions.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .user .actions ur-button {\r\n width: 100%;\r\n padding-bottom: 5px;\r\n}\r\n\r\n:host .follow {\r\n display: flex;\r\n width: 100%;\r\n}\r\n\r\n:host .info .description {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 16px; /* 163.636% */\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .description.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n@container user (max-width: 300px) {\r\n :host .info .title {\r\n font-size: 14px;\r\n line-height: 1.2rem;\r\n }\r\n\r\n :host .info .stats {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .description{\r\n font-size: 11px;\r\n }\r\n\r\n :host .info {\r\n row-gap: 4px;\r\n padding: 4px;\r\n }\r\n\r\n\r\n :host .info .title.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .stats.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .description.loading {\r\n margin: 0 4px;\r\n }\r\n}\r\n";
8
8
 
9
9
  const UrUser = class {
10
10
  constructor(hostRef) {
package/dist/collection/components/ur-novl/ur-novl.css CHANGED
@@ -40,6 +40,7 @@
40
40
  background-size: cover;
41
41
  background-position: center;
42
42
  position: relative;
43
+ animation: none;
43
44
  }
44
45
 
45
46
  :host .cover.loading {
package/dist/collection/components/ur-page/ur-page.css CHANGED
@@ -43,6 +43,7 @@
43
43
  background-size: cover;
44
44
  background-position: center;
45
45
  position: relative;
46
+ animation: none;
46
47
  }
47
48
 
48
49
  :host .cover.loading {
package/dist/collection/components/ur-user/ur-user.css CHANGED
@@ -42,6 +42,7 @@
42
42
  background-size: cover;
43
43
  background-position: center;
44
44
  position: relative;
45
+ animation: none;
45
46
  }
46
47
 
47
48
  :host .cover.loading {
package/dist/components/{p-MV2g5YO1.js → p-D5urDMr9.js} RENAMED
@@ -3,7 +3,7 @@ import { d as defineCustomElement$1 } from './p-D5qPktB7.js';
3
3
 
4
4
  const PAGE_COVER_FALLBACK = 'data:image/webp;base64,UklGRtQAAABXRUJQVlA4TMgAAAAv/8f/EQfQla70pPIBIUHi/+9mIvqf8Z///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7vAQ==';
5
5
 
6
- const urPageCss = ":host {\r\n --page-width: 100%;\r\n --page-border-radius: 8px;\r\n --ur-color-on-background: var(--mdui-color-on-background);\r\n --ur-color-background: var(--mdui-color-background);\r\n --ur-color-on-container-lite-dark: var(--mdui-color-on-container-lite-dark);\r\n --ur-color-on-container-primary: var(--mdui-color-primary-container);\r\n --ur-color-primary: var(--mdui-color-primary);\r\n}\r\n\r\n@keyframes placeholderAnimate {\r\n 0%{ background-position: -650px 0; }\r\n 100%{ background-position: 650px 0; }\r\n}\r\n\r\n:host {\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: content-box;\r\n container-type: inline-size;\r\n container-name: page;\r\n}\r\n\r\n:host .page {\r\n overflow: hidden;\r\n width: var(--page-width);\r\n border-radius: var(--page-border-radius);\r\n cursor: pointer;\r\n}\r\n\r\n:host .page:hover {\r\n background: rgba(var(--ur-color-on-background), 0.12);\r\n}\r\n\r\n:host .page.loading {\r\n cursor: default;\r\n}\r\n\r\n:host .cover {\r\n aspect-ratio: 1;\r\n background-color: rgb(var(--ur-color-on-background));\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n position: relative;\r\n}\r\n\r\n:host .cover.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 8px;\r\n row-gap: 8px;\r\n box-sizing: border-box;\r\n}\r\n\r\n:host .info:has(.loading) {\r\n padding-left: 0;\r\n padding-right: 0;\r\n}\r\n\r\n:host .info .title {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .title.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats {\r\n font-size: 12px;\r\n font-weight: 400;\r\n line-height: 12px;\r\n display: flex;\r\n flex-direction: row;\r\n color: rgb(var(--ur-color-on-background));\r\n}\r\n\r\n:host .info .stats.loading {\r\n height: 12px;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats b {\r\n font-weight: 700;\r\n}\r\n\r\n:host .info .stats .followers {\r\n display: flex;\r\n}\r\n\r\n:host .page .actions {\r\n padding-top: 10px;\r\n}\r\n\r\n:host .info .actions.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .page .actions ur-button {\r\n width: 100%;\r\n padding-bottom: 5px;\r\n}\r\n\r\n:host .follow {\r\n display: flex;\r\n width: 100%;\r\n}\r\n\r\n:host .info .description {\r\n color: rgb(var(--ur-color-on-container-lite-dark));\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 16px; /* 163.636% */\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .description.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n@container page (max-width: 300px) {\r\n :host .info .title {\r\n font-size: 14px;\r\n line-height: 1.2rem;\r\n }\r\n\r\n :host .info .stats {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .description{\r\n font-size: 11px;\r\n }\r\n\r\n :host .info {\r\n row-gap: 4px;\r\n padding: 4px;\r\n }\r\n\r\n :host .info .title.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .stats.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .description.loading {\r\n margin: 0 4px;\r\n }\r\n}\r\n";
6
+ const urPageCss = ":host {\r\n --page-width: 100%;\r\n --page-border-radius: 8px;\r\n --ur-color-on-background: var(--mdui-color-on-background);\r\n --ur-color-background: var(--mdui-color-background);\r\n --ur-color-on-container-lite-dark: var(--mdui-color-on-container-lite-dark);\r\n --ur-color-on-container-primary: var(--mdui-color-primary-container);\r\n --ur-color-primary: var(--mdui-color-primary);\r\n}\r\n\r\n@keyframes placeholderAnimate {\r\n 0%{ background-position: -650px 0; }\r\n 100%{ background-position: 650px 0; }\r\n}\r\n\r\n:host {\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: content-box;\r\n container-type: inline-size;\r\n container-name: page;\r\n}\r\n\r\n:host .page {\r\n overflow: hidden;\r\n width: var(--page-width);\r\n border-radius: var(--page-border-radius);\r\n cursor: pointer;\r\n}\r\n\r\n:host .page:hover {\r\n background: rgba(var(--ur-color-on-background), 0.12);\r\n}\r\n\r\n:host .page.loading {\r\n cursor: default;\r\n}\r\n\r\n:host .cover {\r\n aspect-ratio: 1;\r\n background-color: rgb(var(--ur-color-on-background));\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n position: relative;\r\n animation: none;\r\n}\r\n\r\n:host .cover.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 8px;\r\n row-gap: 8px;\r\n box-sizing: border-box;\r\n}\r\n\r\n:host .info:has(.loading) {\r\n padding-left: 0;\r\n padding-right: 0;\r\n}\r\n\r\n:host .info .title {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .title.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats {\r\n font-size: 12px;\r\n font-weight: 400;\r\n line-height: 12px;\r\n display: flex;\r\n flex-direction: row;\r\n color: rgb(var(--ur-color-on-background));\r\n}\r\n\r\n:host .info .stats.loading {\r\n height: 12px;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats b {\r\n font-weight: 700;\r\n}\r\n\r\n:host .info .stats .followers {\r\n display: flex;\r\n}\r\n\r\n:host .page .actions {\r\n padding-top: 10px;\r\n}\r\n\r\n:host .info .actions.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .page .actions ur-button {\r\n width: 100%;\r\n padding-bottom: 5px;\r\n}\r\n\r\n:host .follow {\r\n display: flex;\r\n width: 100%;\r\n}\r\n\r\n:host .info .description {\r\n color: rgb(var(--ur-color-on-container-lite-dark));\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 16px; /* 163.636% */\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .description.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n@container page (max-width: 300px) {\r\n :host .info .title {\r\n font-size: 14px;\r\n line-height: 1.2rem;\r\n }\r\n\r\n :host .info .stats {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .description{\r\n font-size: 11px;\r\n }\r\n\r\n :host .info {\r\n row-gap: 4px;\r\n padding: 4px;\r\n }\r\n\r\n :host .info .title.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .stats.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .description.loading {\r\n margin: 0 4px;\r\n }\r\n}\r\n";
7
7
 
8
8
  const UrPage = /*@__PURE__*/ proxyCustomElement(class UrPage extends H {
9
9
  constructor(registerHost) {
package/dist/components/{p-DwKVXSJA.js → p-K9pZ03UZ.js} RENAMED
@@ -3,7 +3,7 @@ import { d as defineCustomElement$1 } from './p-D5qPktB7.js';
3
3
 
4
4
  const USER_COVER_FALLBACK = 'data:image/webp;base64,UklGRtQAAABXRUJQVlA4TMgAAAAv/8f/EQfQla70pPIBIUHi/+9mIvqf8Z///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7vAQ==';
5
5
 
6
- const urUserCss = ":host {\r\n --user-width: 100%;\r\n --user-border-radius: 8px;\r\n --ur-color-on-background: var(--mdui-color-on-background);\r\n --ur-color-background: var(--mdui-color-background);\r\n --ur-color-on-container-primary: var(--mdui-color-primary-container);\r\n --ur-color-primary: var(--mdui-color-primary);\r\n}\r\n\r\n@keyframes placeholderAnimate {\r\n 0%{ background-position: -650px 0; }\r\n 100%{ background-position: 650px 0; }\r\n}\r\n\r\n:host {\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: content-box;\r\n container-type: inline-size;\r\n container-name: user;\r\n}\r\n\r\n:host .user {\r\n overflow: hidden;\r\n width: var(--user-width);\r\n border-radius: var(--user-border-radius);\r\n cursor: pointer;\r\n}\r\n\r\n:host .user:hover {\r\n background: rgba(var(--ur-color-on-background), 0.12);\r\n}\r\n\r\n:host .user.loading {\r\n cursor: default;\r\n}\r\n\r\n:host .cover {\r\n aspect-ratio: 1;\r\n background-color: rgb(var(--ur-color-on-background));\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n position: relative;\r\n}\r\n\r\n:host .cover.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 8px;\r\n row-gap: 8px;\r\n box-sizing: border-box;\r\n}\r\n\r\n:host .info:has(.loading) {\r\n padding-left: 0;\r\n padding-right: 0;\r\n}\r\n\r\n:host .info .title {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .title.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats {\r\n font-size: 12px;\r\n font-weight: 400;\r\n line-height: 12px;\r\n display: flex;\r\n flex-direction: row;\r\n color: rgb(var(--ur-color-on-background));\r\n}\r\n\r\n:host .info .stats.loading {\r\n height: 12px;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats b {\r\n font-weight: 700;\r\n}\r\n\r\n:host .info .stats .followers {\r\n display: flex;\r\n}\r\n\r\n:host .user .actions {\r\n padding-top: 10px;\r\n}\r\n\r\n:host .info .actions.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .user .actions ur-button {\r\n width: 100%;\r\n padding-bottom: 5px;\r\n}\r\n\r\n:host .follow {\r\n display: flex;\r\n width: 100%;\r\n}\r\n\r\n:host .info .description {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 16px; /* 163.636% */\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .description.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n@container user (max-width: 300px) {\r\n :host .info .title {\r\n font-size: 14px;\r\n line-height: 1.2rem;\r\n }\r\n\r\n :host .info .stats {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .description{\r\n font-size: 11px;\r\n }\r\n\r\n :host .info {\r\n row-gap: 4px;\r\n padding: 4px;\r\n }\r\n\r\n\r\n :host .info .title.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .stats.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .description.loading {\r\n margin: 0 4px;\r\n }\r\n}\r\n";
6
+ const urUserCss = ":host {\r\n --user-width: 100%;\r\n --user-border-radius: 8px;\r\n --ur-color-on-background: var(--mdui-color-on-background);\r\n --ur-color-background: var(--mdui-color-background);\r\n --ur-color-on-container-primary: var(--mdui-color-primary-container);\r\n --ur-color-primary: var(--mdui-color-primary);\r\n}\r\n\r\n@keyframes placeholderAnimate {\r\n 0%{ background-position: -650px 0; }\r\n 100%{ background-position: 650px 0; }\r\n}\r\n\r\n:host {\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: content-box;\r\n container-type: inline-size;\r\n container-name: user;\r\n}\r\n\r\n:host .user {\r\n overflow: hidden;\r\n width: var(--user-width);\r\n border-radius: var(--user-border-radius);\r\n cursor: pointer;\r\n}\r\n\r\n:host .user:hover {\r\n background: rgba(var(--ur-color-on-background), 0.12);\r\n}\r\n\r\n:host .user.loading {\r\n cursor: default;\r\n}\r\n\r\n:host .cover {\r\n aspect-ratio: 1;\r\n background-color: rgb(var(--ur-color-on-background));\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n position: relative;\r\n animation: none;\r\n}\r\n\r\n:host .cover.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 8px;\r\n row-gap: 8px;\r\n box-sizing: border-box;\r\n}\r\n\r\n:host .info:has(.loading) {\r\n padding-left: 0;\r\n padding-right: 0;\r\n}\r\n\r\n:host .info .title {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .title.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats {\r\n font-size: 12px;\r\n font-weight: 400;\r\n line-height: 12px;\r\n display: flex;\r\n flex-direction: row;\r\n color: rgb(var(--ur-color-on-background));\r\n}\r\n\r\n:host .info .stats.loading {\r\n height: 12px;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats b {\r\n font-weight: 700;\r\n}\r\n\r\n:host .info .stats .followers {\r\n display: flex;\r\n}\r\n\r\n:host .user .actions {\r\n padding-top: 10px;\r\n}\r\n\r\n:host .info .actions.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .user .actions ur-button {\r\n width: 100%;\r\n padding-bottom: 5px;\r\n}\r\n\r\n:host .follow {\r\n display: flex;\r\n width: 100%;\r\n}\r\n\r\n:host .info .description {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 16px; /* 163.636% */\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .description.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n@container user (max-width: 300px) {\r\n :host .info .title {\r\n font-size: 14px;\r\n line-height: 1.2rem;\r\n }\r\n\r\n :host .info .stats {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .description{\r\n font-size: 11px;\r\n }\r\n\r\n :host .info {\r\n row-gap: 4px;\r\n padding: 4px;\r\n }\r\n\r\n\r\n :host .info .title.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .stats.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .description.loading {\r\n margin: 0 4px;\r\n }\r\n}\r\n";
7
7
 
8
8
  const UrUser = /*@__PURE__*/ proxyCustomElement(class UrUser extends H {
9
9
  constructor(registerHost) {
package/dist/components/p-rZag08H9.js ADDED
@@ -0,0 +1,92 @@
1
+ import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
2
+ import { N as NOVL_COVER_FALLBACK } from './p-bzE6bm1n.js';
3
+ import { d as defineCustomElement$2 } from './p-DUoVib83.js';
4
+ import { d as defineCustomElement$1 } from './p-Ds2UCoIV.js';
5
+
6
+ const urNovlCss = ":host {\r\n --novl-width: 100%;\r\n --novl-border-radius: 8px;\r\n --ur-color-on-background: var(--mdui-color-on-background);\r\n --ur-color-background: var(--mdui-color-background);\r\n}\r\n\r\n@keyframes placeholderAnimate {\r\n 0%{ background-position: -650px 0; }\r\n 100%{ background-position: 650px 0; }\r\n}\r\n\r\n:host {\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: content-box;\r\n container-type: inline-size;\r\n container-name: novl;\r\n}\r\n\r\n:host .novl {\r\n overflow: hidden;\r\n width: var(--novl-width);\r\n border-radius: var(--novl-border-radius);\r\n cursor: pointer;\r\n}\r\n\r\n:host .novl:hover {\r\n background: rgba(var(--ur-color-on-background), 0.12);\r\n}\r\n\r\n:host .novl.loading {\r\n cursor: default;\r\n}\r\n\r\n:host .cover {\r\n aspect-ratio: 2.25;\r\n background-color: rgb(var(--ur-color-on-background));\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n position: relative;\r\n animation: none;\r\n}\r\n\r\n:host .cover.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n }\r\n\r\n:host .cover .ongoing {\r\n background-color: rgb(var(--mdui-color-primary-container));\r\n height: 32px;\r\n width: 32px;\r\n border-radius: 50%;\r\n position: absolute;\r\n top: 8px;\r\n left: 8px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: rgb(var(--mdui-color-primary));\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n font-size: 14px;\r\n line-height: 14px;\r\n}\r\n\r\n:host .cover .ongoing span {\r\n position: relative;\r\n}\r\n\r\n:host .cover .price {\r\n position: absolute;\r\n top: 8px;\r\n right: 8px;\r\n border-radius: 25px;\r\n background: rgba(43, 43, 39, 0.55);\r\n padding: 9px 16px;\r\n box-sizing: border-box;\r\n line-height: 14px;\r\n font-weight: 700;\r\n font-size: 14px;\r\n color: #fff;\r\n}\r\n\r\n:host .cover .avatar-holder {\r\n left: 0;\r\n bottom: 0;\r\n display: flex;\r\n position: absolute;\r\n align-items: center;\r\n padding: 0 4px;\r\n box-sizing: border-box;\r\n column-gap: 8px;\r\n transform: translateY(50%);\r\n}\r\n\r\n:host .cover .avatar-holder ur-avatar.author-avatar {\r\n display: block;\r\n}\r\n\r\n:host .cover .avatar-holder .publisher-avatar-container {\r\n position: absolute;\r\n bottom: 2px;\r\n right: -6px;\r\n height: 18px;\r\n width: 18px;\r\n}\r\n\r\n:host .cover .avatar-holder ur-avatar.publisher-avatar {\r\n display: block;\r\n}\r\n\r\n:host .txt-info-holder .publisher-info {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n column-gap: 4px;\r\n}\r\n\r\n:host .cover .avatar-holder .name {\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: 12px; /* 100% */\r\n color: #fff;\r\n}\r\n\r\n:host .info {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 24px 8px 8px 8px;\r\n row-gap: 8px;\r\n box-sizing: border-box;\r\n}\r\n\r\n:host .info:has(.loading) {\r\n padding-left: 0;\r\n padding-right: 0;\r\n}\r\n\r\n:host .info .title {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .title.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats {\r\n font-size: 12px;\r\n font-weight: 400;\r\n line-height: 12px;\r\n display: flex;\r\n flex-direction: row;\r\n color: rgb(var(--ur-color-on-background));\r\n}\r\n\r\n:host .info .stats.loading {\r\n height: 12px;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats b {\r\n font-weight: 700;\r\n}\r\n\r\n:host .info .stats .likes {\r\n display: flex;\r\n}\r\n\r\n:host .info .stats .dot {\r\n margin-left: 4px;\r\n}\r\n\r\n:host .info .stats .views-container {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n column-gap: 4px;\r\n}\r\n\r\n:host .info .txt-info-holder {\r\n display: flex;\r\n align-items: center;\r\n font-size: 11px;\r\n font-style: normal;\r\n font-weight: 600;\r\n color: rgb(var(--ur-color-on-background));\r\n cursor: pointer;\r\n column-gap: 4px;\r\n}\r\n\r\n:host .info .txt-info-holder .avatar {\r\n height: 32px;\r\n width: 32px;\r\n border-radius: 50%;\r\n background-size: cover;\r\n}\r\n\r\n:host .info .txt-info-holder .avatar.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n }\r\n\r\n:host .info .txt-info-holder .name {\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: 12px;\r\n}\r\n\r\n:host .info .txt-info-holder .name.loading {\r\n height: 12px;\r\n width: 50%;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n@container novl (max-width: 300px) {\r\n :host .info .title {\r\n font-size: 14px;\r\n line-height: 1.2rem;\r\n }\r\n\r\n :host .info .txt-info-holder .avatar {\r\n height: 24px;\r\n width: 24px;\r\n }\r\n\r\n :host .cover .publisher {\r\n height: 40px;\r\n padding: 0 4px;\r\n }\r\n\r\n\r\n :host .cover .publisher .name {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .txt-info-holder .name {\r\n font-size: 11px;\r\n }\r\n\r\n :host .cover .ongoing {\r\n width: 24px;\r\n height: 24px;\r\n left: 4px;\r\n }\r\n\r\n :host .cover .price {\r\n padding: 5px 8px;\r\n font-size: 12px;\r\n }\r\n\r\n :host .info .stats {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .description{\r\n font-size: 11px;\r\n }\r\n\r\n :host .info {\r\n row-gap: 4px;\r\n padding: 4px;\r\n padding-top: 22px;\r\n }\r\n\r\n :host .info .title.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .stats.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .description.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .txt-info-holder.loading {\r\n margin: 0 4px;\r\n }\r\n}\r\n";
7
+
8
+ const UrNovl = /*@__PURE__*/ proxyCustomElement(class UrNovl extends H {
9
+ constructor(registerHost) {
10
+ super();
11
+ if (registerHost !== false) {
12
+ this.__registerHost();
13
+ }
14
+ this.__attachShadow();
15
+ this.novlClicked = createEvent(this, "novlClicked");
16
+ this.loading = false;
17
+ this.novlTitle = 'Novl title';
18
+ this.novlCoverFallback = NOVL_COVER_FALLBACK;
19
+ this.likes = 0;
20
+ this.views = 0;
21
+ this.showStats = true;
22
+ this.published = false;
23
+ this.price = null;
24
+ this.publisherAvatar = null;
25
+ this.publisherName = null;
26
+ this.borderRadius = '8px';
27
+ this.ongoingLabel = 'O';
28
+ this.likesLabel = 'Likes';
29
+ this.viewsLabel = 'Views';
30
+ }
31
+ componentDidLoad() {
32
+ this.el.style.setProperty('--novl-border-radius', this.borderRadius);
33
+ }
34
+ renderLoading() {
35
+ return (h(Host, null, h("div", { class: "novl loading", onClick: () => this.novlClicked.emit(this.novlId) }, h("section", { class: "cover loading" }), h("section", { class: "info" }, h("div", { class: "title loading" }, "\u00A0"), h("div", { class: "stats loading" })))));
36
+ }
37
+ render() {
38
+ if (this.loading) {
39
+ return this.renderLoading();
40
+ }
41
+ return (h(Host, null, h("div", { class: "novl", onClick: () => this.novlClicked.emit(this.novlId) }, h("section", { class: "cover", style: {
42
+ backgroundImage: this.novlCover ? `url(${this.novlCover})` : `url(${this.novlCoverFallback})`,
43
+ } }, !this.published && (h("div", { class: "ongoing" }, h("span", null, this.ongoingLabel))), !!this.price && (h("div", { class: "price" }, h("span", null, this.price))), h("div", { class: "avatar-holder" }, h("ur-tooltip", { "open-delay": "400", content: this.authorName, variant: "plain", placement: "right" }, h("ur-avatar", { class: "author-avatar", src: this.authorAvatar, size: "32px", border: "2px", name: this.authorName, variant: "user" })), !!this.publisherAvatar && this.publisherName && (h("div", { class: "publisher-avatar-container" }, h("ur-tooltip", { "open-delay": "400", content: this.publisherName, variant: "plain", placement: "right" }, h("ur-avatar", { class: "publisher-avatar", src: this.publisherAvatar, size: "18px", border: "2px", radius: "25%", name: this.publisherName, variant: "page" })))))), h("section", { class: "info" }, h("div", { class: "title" }, this.novlTitle), this.showStats && (this.likes !== 0 || this.views !== 0) && (h("div", { class: "stats" }, this.likes !== 0 && (h("div", { class: "likes" }, h("div", null, h("b", null, this.likes), " ", this.likesLabel))), this.views !== 0 && (h("div", { class: "views-container" }, this.likes !== 0 && h("div", { class: "dot" }, "\u00B7"), h("div", { class: "views" }, h("b", null, this.views), " ", this.viewsLabel))))), h("div", { class: "txt-info-holder" }, h("div", { class: "name author-name" }, this.authorName), this.publisherName && (h("div", { class: "publisher-info" }, h("div", { class: "dot" }, "\u00B7"), h("div", { class: "name publisher-name" }, this.publisherName))))))));
44
+ }
45
+ get el() { return this; }
46
+ static get style() { return urNovlCss; }
47
+ }, [257, "ur-novl", {
48
+ "novlId": [520, "novl-id"],
49
+ "loading": [4],
50
+ "novlTitle": [1, "novl-title"],
51
+ "novlCover": [8, "novl-cover"],
52
+ "novlCoverFallback": [1, "novl-cover-fallback"],
53
+ "likes": [2],
54
+ "views": [2],
55
+ "showStats": [4, "show-stats"],
56
+ "authorAvatar": [8, "author-avatar"],
57
+ "authorName": [8, "author-name"],
58
+ "published": [4],
59
+ "price": [1],
60
+ "publisherAvatar": [1, "publisher-avatar"],
61
+ "publisherName": [1, "publisher-name"],
62
+ "borderRadius": [1, "border-radius"],
63
+ "ongoingLabel": [1, "ongoing-label"],
64
+ "likesLabel": [1, "likes-label"],
65
+ "viewsLabel": [1, "views-label"]
66
+ }]);
67
+ function defineCustomElement() {
68
+ if (typeof customElements === "undefined") {
69
+ return;
70
+ }
71
+ const components = ["ur-novl", "ur-avatar", "ur-tooltip"];
72
+ components.forEach(tagName => { switch (tagName) {
73
+ case "ur-novl":
74
+ if (!customElements.get(tagName)) {
75
+ customElements.define(tagName, UrNovl);
76
+ }
77
+ break;
78
+ case "ur-avatar":
79
+ if (!customElements.get(tagName)) {
80
+ defineCustomElement$2();
81
+ }
82
+ break;
83
+ case "ur-tooltip":
84
+ if (!customElements.get(tagName)) {
85
+ defineCustomElement$1();
86
+ }
87
+ break;
88
+ } });
89
+ }
90
+ defineCustomElement();
91
+
92
+ export { UrNovl as U, defineCustomElement as d };
package/dist/components/ur-novl-carousel.js CHANGED
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, a as
2
2
  import { d as defineCustomElement$6 } from './p-DUoVib83.js';
3
3
  import { d as defineCustomElement$5 } from './p-B9w_yaqb.js';
4
4
  import { d as defineCustomElement$4 } from './p-DUkZ8AtM.js';
5
- import { d as defineCustomElement$3 } from './p-DWiu4wLZ.js';
5
+ import { d as defineCustomElement$3 } from './p-rZag08H9.js';
6
6
  import { d as defineCustomElement$2 } from './p-Ds2UCoIV.js';
7
7
 
8
8
  const is_custom_data = (data) => {
package/dist/components/ur-novl.js CHANGED
@@ -1,4 +1,4 @@
1
- import { U as UrNovl$1, d as defineCustomElement$1 } from './p-DWiu4wLZ.js';
1
+ import { U as UrNovl$1, d as defineCustomElement$1 } from './p-rZag08H9.js';
2
2
 
3
3
  const UrNovl = UrNovl$1;
4
4
  const defineCustomElement = defineCustomElement$1;
package/dist/components/ur-page-carousel.js CHANGED
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, a as
2
2
  import { d as defineCustomElement$5 } from './p-D5qPktB7.js';
3
3
  import { d as defineCustomElement$4 } from './p-B9w_yaqb.js';
4
4
  import { d as defineCustomElement$3 } from './p-DUkZ8AtM.js';
5
- import { d as defineCustomElement$2 } from './p-MV2g5YO1.js';
5
+ import { d as defineCustomElement$2 } from './p-D5urDMr9.js';
6
6
 
7
7
  const is_custom_data = (data) => {
8
8
  return data && !!data.content && typeof data.content === 'function';
package/dist/components/ur-page.js CHANGED
@@ -1,4 +1,4 @@
1
- import { U as UrPage$1, d as defineCustomElement$1 } from './p-MV2g5YO1.js';
1
+ import { U as UrPage$1, d as defineCustomElement$1 } from './p-D5urDMr9.js';
2
2
 
3
3
  const UrPage = UrPage$1;
4
4
  const defineCustomElement = defineCustomElement$1;
package/dist/components/ur-user-carousel.js CHANGED
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './in
2
2
  import { d as defineCustomElement$5 } from './p-D5qPktB7.js';
3
3
  import { d as defineCustomElement$4 } from './p-B9w_yaqb.js';
4
4
  import { d as defineCustomElement$3 } from './p-DUkZ8AtM.js';
5
- import { d as defineCustomElement$2 } from './p-DwKVXSJA.js';
5
+ import { d as defineCustomElement$2 } from './p-K9pZ03UZ.js';
6
6
 
7
7
  const is_custom_data = (data) => {
8
8
  return data && !!data.content && typeof data.content === 'function';
package/dist/components/ur-user.js CHANGED
@@ -1,4 +1,4 @@
1
- import { U as UrUser$1, d as defineCustomElement$1 } from './p-DwKVXSJA.js';
1
+ import { U as UrUser$1, d as defineCustomElement$1 } from './p-K9pZ03UZ.js';
2
2
 
3
3
  const UrUser = UrUser$1;
4
4
  const defineCustomElement = defineCustomElement$1;
package/dist/esm/ur-avatar_3.entry.js CHANGED
@@ -3,7 +3,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, a as getElement
3
3
  import { N as NOVL_COVER_FALLBACK } from './novls-bzE6bm1n.js';
4
4
  export { U as ur_tooltip } from './ur-tooltip-CrW_FHBe.js';
5
5
 
6
- const urNovlCss = ":host {\r\n --novl-width: 100%;\r\n --novl-border-radius: 8px;\r\n --ur-color-on-background: var(--mdui-color-on-background);\r\n --ur-color-background: var(--mdui-color-background);\r\n}\r\n\r\n@keyframes placeholderAnimate {\r\n 0%{ background-position: -650px 0; }\r\n 100%{ background-position: 650px 0; }\r\n}\r\n\r\n:host {\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: content-box;\r\n container-type: inline-size;\r\n container-name: novl;\r\n}\r\n\r\n:host .novl {\r\n overflow: hidden;\r\n width: var(--novl-width);\r\n border-radius: var(--novl-border-radius);\r\n cursor: pointer;\r\n}\r\n\r\n:host .novl:hover {\r\n background: rgba(var(--ur-color-on-background), 0.12);\r\n}\r\n\r\n:host .novl.loading {\r\n cursor: default;\r\n}\r\n\r\n:host .cover {\r\n aspect-ratio: 2.25;\r\n background-color: rgb(var(--ur-color-on-background));\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n position: relative;\r\n}\r\n\r\n:host .cover.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n }\r\n\r\n:host .cover .ongoing {\r\n background-color: rgb(var(--mdui-color-primary-container));\r\n height: 32px;\r\n width: 32px;\r\n border-radius: 50%;\r\n position: absolute;\r\n top: 8px;\r\n left: 8px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: rgb(var(--mdui-color-primary));\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n font-size: 14px;\r\n line-height: 14px;\r\n}\r\n\r\n:host .cover .ongoing span {\r\n position: relative;\r\n}\r\n\r\n:host .cover .price {\r\n position: absolute;\r\n top: 8px;\r\n right: 8px;\r\n border-radius: 25px;\r\n background: rgba(43, 43, 39, 0.55);\r\n padding: 9px 16px;\r\n box-sizing: border-box;\r\n line-height: 14px;\r\n font-weight: 700;\r\n font-size: 14px;\r\n color: #fff;\r\n}\r\n\r\n:host .cover .avatar-holder {\r\n left: 0;\r\n bottom: 0;\r\n display: flex;\r\n position: absolute;\r\n align-items: center;\r\n padding: 0 4px;\r\n box-sizing: border-box;\r\n column-gap: 8px;\r\n transform: translateY(50%);\r\n}\r\n\r\n:host .cover .avatar-holder ur-avatar.author-avatar {\r\n display: block;\r\n}\r\n\r\n:host .cover .avatar-holder .publisher-avatar-container {\r\n position: absolute;\r\n bottom: 2px;\r\n right: -6px;\r\n height: 18px;\r\n width: 18px;\r\n}\r\n\r\n:host .cover .avatar-holder ur-avatar.publisher-avatar {\r\n display: block;\r\n}\r\n\r\n:host .txt-info-holder .publisher-info {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n column-gap: 4px;\r\n}\r\n\r\n:host .cover .avatar-holder .name {\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: 12px; /* 100% */\r\n color: #fff;\r\n}\r\n\r\n:host .info {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 24px 8px 8px 8px;\r\n row-gap: 8px;\r\n box-sizing: border-box;\r\n}\r\n\r\n:host .info:has(.loading) {\r\n padding-left: 0;\r\n padding-right: 0;\r\n}\r\n\r\n:host .info .title {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .title.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats {\r\n font-size: 12px;\r\n font-weight: 400;\r\n line-height: 12px;\r\n display: flex;\r\n flex-direction: row;\r\n color: rgb(var(--ur-color-on-background));\r\n}\r\n\r\n:host .info .stats.loading {\r\n height: 12px;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats b {\r\n font-weight: 700;\r\n}\r\n\r\n:host .info .stats .likes {\r\n display: flex;\r\n}\r\n\r\n:host .info .stats .dot {\r\n margin-left: 4px;\r\n}\r\n\r\n:host .info .stats .views-container {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n column-gap: 4px;\r\n}\r\n\r\n:host .info .txt-info-holder {\r\n display: flex;\r\n align-items: center;\r\n font-size: 11px;\r\n font-style: normal;\r\n font-weight: 600;\r\n color: rgb(var(--ur-color-on-background));\r\n cursor: pointer;\r\n column-gap: 4px;\r\n}\r\n\r\n:host .info .txt-info-holder .avatar {\r\n height: 32px;\r\n width: 32px;\r\n border-radius: 50%;\r\n background-size: cover;\r\n}\r\n\r\n:host .info .txt-info-holder .avatar.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n }\r\n\r\n:host .info .txt-info-holder .name {\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: 12px;\r\n}\r\n\r\n:host .info .txt-info-holder .name.loading {\r\n height: 12px;\r\n width: 50%;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n@container novl (max-width: 300px) {\r\n :host .info .title {\r\n font-size: 14px;\r\n line-height: 1.2rem;\r\n }\r\n\r\n :host .info .txt-info-holder .avatar {\r\n height: 24px;\r\n width: 24px;\r\n }\r\n\r\n :host .cover .publisher {\r\n height: 40px;\r\n padding: 0 4px;\r\n }\r\n\r\n\r\n :host .cover .publisher .name {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .txt-info-holder .name {\r\n font-size: 11px;\r\n }\r\n\r\n :host .cover .ongoing {\r\n width: 24px;\r\n height: 24px;\r\n left: 4px;\r\n }\r\n\r\n :host .cover .price {\r\n padding: 5px 8px;\r\n font-size: 12px;\r\n }\r\n\r\n :host .info .stats {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .description{\r\n font-size: 11px;\r\n }\r\n\r\n :host .info {\r\n row-gap: 4px;\r\n padding: 4px;\r\n padding-top: 22px;\r\n }\r\n\r\n :host .info .title.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .stats.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .description.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .txt-info-holder.loading {\r\n margin: 0 4px;\r\n }\r\n}\r\n";
6
+ const urNovlCss = ":host {\r\n --novl-width: 100%;\r\n --novl-border-radius: 8px;\r\n --ur-color-on-background: var(--mdui-color-on-background);\r\n --ur-color-background: var(--mdui-color-background);\r\n}\r\n\r\n@keyframes placeholderAnimate {\r\n 0%{ background-position: -650px 0; }\r\n 100%{ background-position: 650px 0; }\r\n}\r\n\r\n:host {\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: content-box;\r\n container-type: inline-size;\r\n container-name: novl;\r\n}\r\n\r\n:host .novl {\r\n overflow: hidden;\r\n width: var(--novl-width);\r\n border-radius: var(--novl-border-radius);\r\n cursor: pointer;\r\n}\r\n\r\n:host .novl:hover {\r\n background: rgba(var(--ur-color-on-background), 0.12);\r\n}\r\n\r\n:host .novl.loading {\r\n cursor: default;\r\n}\r\n\r\n:host .cover {\r\n aspect-ratio: 2.25;\r\n background-color: rgb(var(--ur-color-on-background));\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n position: relative;\r\n animation: none;\r\n}\r\n\r\n:host .cover.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n }\r\n\r\n:host .cover .ongoing {\r\n background-color: rgb(var(--mdui-color-primary-container));\r\n height: 32px;\r\n width: 32px;\r\n border-radius: 50%;\r\n position: absolute;\r\n top: 8px;\r\n left: 8px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: rgb(var(--mdui-color-primary));\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n font-size: 14px;\r\n line-height: 14px;\r\n}\r\n\r\n:host .cover .ongoing span {\r\n position: relative;\r\n}\r\n\r\n:host .cover .price {\r\n position: absolute;\r\n top: 8px;\r\n right: 8px;\r\n border-radius: 25px;\r\n background: rgba(43, 43, 39, 0.55);\r\n padding: 9px 16px;\r\n box-sizing: border-box;\r\n line-height: 14px;\r\n font-weight: 700;\r\n font-size: 14px;\r\n color: #fff;\r\n}\r\n\r\n:host .cover .avatar-holder {\r\n left: 0;\r\n bottom: 0;\r\n display: flex;\r\n position: absolute;\r\n align-items: center;\r\n padding: 0 4px;\r\n box-sizing: border-box;\r\n column-gap: 8px;\r\n transform: translateY(50%);\r\n}\r\n\r\n:host .cover .avatar-holder ur-avatar.author-avatar {\r\n display: block;\r\n}\r\n\r\n:host .cover .avatar-holder .publisher-avatar-container {\r\n position: absolute;\r\n bottom: 2px;\r\n right: -6px;\r\n height: 18px;\r\n width: 18px;\r\n}\r\n\r\n:host .cover .avatar-holder ur-avatar.publisher-avatar {\r\n display: block;\r\n}\r\n\r\n:host .txt-info-holder .publisher-info {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n column-gap: 4px;\r\n}\r\n\r\n:host .cover .avatar-holder .name {\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: 12px; /* 100% */\r\n color: #fff;\r\n}\r\n\r\n:host .info {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 24px 8px 8px 8px;\r\n row-gap: 8px;\r\n box-sizing: border-box;\r\n}\r\n\r\n:host .info:has(.loading) {\r\n padding-left: 0;\r\n padding-right: 0;\r\n}\r\n\r\n:host .info .title {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .title.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats {\r\n font-size: 12px;\r\n font-weight: 400;\r\n line-height: 12px;\r\n display: flex;\r\n flex-direction: row;\r\n color: rgb(var(--ur-color-on-background));\r\n}\r\n\r\n:host .info .stats.loading {\r\n height: 12px;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats b {\r\n font-weight: 700;\r\n}\r\n\r\n:host .info .stats .likes {\r\n display: flex;\r\n}\r\n\r\n:host .info .stats .dot {\r\n margin-left: 4px;\r\n}\r\n\r\n:host .info .stats .views-container {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n column-gap: 4px;\r\n}\r\n\r\n:host .info .txt-info-holder {\r\n display: flex;\r\n align-items: center;\r\n font-size: 11px;\r\n font-style: normal;\r\n font-weight: 600;\r\n color: rgb(var(--ur-color-on-background));\r\n cursor: pointer;\r\n column-gap: 4px;\r\n}\r\n\r\n:host .info .txt-info-holder .avatar {\r\n height: 32px;\r\n width: 32px;\r\n border-radius: 50%;\r\n background-size: cover;\r\n}\r\n\r\n:host .info .txt-info-holder .avatar.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n }\r\n\r\n:host .info .txt-info-holder .name {\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: 12px;\r\n}\r\n\r\n:host .info .txt-info-holder .name.loading {\r\n height: 12px;\r\n width: 50%;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n@container novl (max-width: 300px) {\r\n :host .info .title {\r\n font-size: 14px;\r\n line-height: 1.2rem;\r\n }\r\n\r\n :host .info .txt-info-holder .avatar {\r\n height: 24px;\r\n width: 24px;\r\n }\r\n\r\n :host .cover .publisher {\r\n height: 40px;\r\n padding: 0 4px;\r\n }\r\n\r\n\r\n :host .cover .publisher .name {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .txt-info-holder .name {\r\n font-size: 11px;\r\n }\r\n\r\n :host .cover .ongoing {\r\n width: 24px;\r\n height: 24px;\r\n left: 4px;\r\n }\r\n\r\n :host .cover .price {\r\n padding: 5px 8px;\r\n font-size: 12px;\r\n }\r\n\r\n :host .info .stats {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .description{\r\n font-size: 11px;\r\n }\r\n\r\n :host .info {\r\n row-gap: 4px;\r\n padding: 4px;\r\n padding-top: 22px;\r\n }\r\n\r\n :host .info .title.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .stats.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .description.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .txt-info-holder.loading {\r\n margin: 0 4px;\r\n }\r\n}\r\n";
7
7
 
8
8
  const UrNovl = class {
9
9
  constructor(hostRef) {
package/dist/esm/ur-page.entry.js CHANGED
@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, a as getElement
2
2
 
3
3
  const PAGE_COVER_FALLBACK = 'data:image/webp;base64,UklGRtQAAABXRUJQVlA4TMgAAAAv/8f/EQfQla70pPIBIUHi/+9mIvqf8Z///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7vAQ==';
4
4
 
5
- const urPageCss = ":host {\r\n --page-width: 100%;\r\n --page-border-radius: 8px;\r\n --ur-color-on-background: var(--mdui-color-on-background);\r\n --ur-color-background: var(--mdui-color-background);\r\n --ur-color-on-container-lite-dark: var(--mdui-color-on-container-lite-dark);\r\n --ur-color-on-container-primary: var(--mdui-color-primary-container);\r\n --ur-color-primary: var(--mdui-color-primary);\r\n}\r\n\r\n@keyframes placeholderAnimate {\r\n 0%{ background-position: -650px 0; }\r\n 100%{ background-position: 650px 0; }\r\n}\r\n\r\n:host {\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: content-box;\r\n container-type: inline-size;\r\n container-name: page;\r\n}\r\n\r\n:host .page {\r\n overflow: hidden;\r\n width: var(--page-width);\r\n border-radius: var(--page-border-radius);\r\n cursor: pointer;\r\n}\r\n\r\n:host .page:hover {\r\n background: rgba(var(--ur-color-on-background), 0.12);\r\n}\r\n\r\n:host .page.loading {\r\n cursor: default;\r\n}\r\n\r\n:host .cover {\r\n aspect-ratio: 1;\r\n background-color: rgb(var(--ur-color-on-background));\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n position: relative;\r\n}\r\n\r\n:host .cover.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 8px;\r\n row-gap: 8px;\r\n box-sizing: border-box;\r\n}\r\n\r\n:host .info:has(.loading) {\r\n padding-left: 0;\r\n padding-right: 0;\r\n}\r\n\r\n:host .info .title {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .title.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats {\r\n font-size: 12px;\r\n font-weight: 400;\r\n line-height: 12px;\r\n display: flex;\r\n flex-direction: row;\r\n color: rgb(var(--ur-color-on-background));\r\n}\r\n\r\n:host .info .stats.loading {\r\n height: 12px;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats b {\r\n font-weight: 700;\r\n}\r\n\r\n:host .info .stats .followers {\r\n display: flex;\r\n}\r\n\r\n:host .page .actions {\r\n padding-top: 10px;\r\n}\r\n\r\n:host .info .actions.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .page .actions ur-button {\r\n width: 100%;\r\n padding-bottom: 5px;\r\n}\r\n\r\n:host .follow {\r\n display: flex;\r\n width: 100%;\r\n}\r\n\r\n:host .info .description {\r\n color: rgb(var(--ur-color-on-container-lite-dark));\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 16px; /* 163.636% */\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .description.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n@container page (max-width: 300px) {\r\n :host .info .title {\r\n font-size: 14px;\r\n line-height: 1.2rem;\r\n }\r\n\r\n :host .info .stats {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .description{\r\n font-size: 11px;\r\n }\r\n\r\n :host .info {\r\n row-gap: 4px;\r\n padding: 4px;\r\n }\r\n\r\n :host .info .title.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .stats.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .description.loading {\r\n margin: 0 4px;\r\n }\r\n}\r\n";
5
+ const urPageCss = ":host {\r\n --page-width: 100%;\r\n --page-border-radius: 8px;\r\n --ur-color-on-background: var(--mdui-color-on-background);\r\n --ur-color-background: var(--mdui-color-background);\r\n --ur-color-on-container-lite-dark: var(--mdui-color-on-container-lite-dark);\r\n --ur-color-on-container-primary: var(--mdui-color-primary-container);\r\n --ur-color-primary: var(--mdui-color-primary);\r\n}\r\n\r\n@keyframes placeholderAnimate {\r\n 0%{ background-position: -650px 0; }\r\n 100%{ background-position: 650px 0; }\r\n}\r\n\r\n:host {\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: content-box;\r\n container-type: inline-size;\r\n container-name: page;\r\n}\r\n\r\n:host .page {\r\n overflow: hidden;\r\n width: var(--page-width);\r\n border-radius: var(--page-border-radius);\r\n cursor: pointer;\r\n}\r\n\r\n:host .page:hover {\r\n background: rgba(var(--ur-color-on-background), 0.12);\r\n}\r\n\r\n:host .page.loading {\r\n cursor: default;\r\n}\r\n\r\n:host .cover {\r\n aspect-ratio: 1;\r\n background-color: rgb(var(--ur-color-on-background));\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n position: relative;\r\n animation: none;\r\n}\r\n\r\n:host .cover.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 8px;\r\n row-gap: 8px;\r\n box-sizing: border-box;\r\n}\r\n\r\n:host .info:has(.loading) {\r\n padding-left: 0;\r\n padding-right: 0;\r\n}\r\n\r\n:host .info .title {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .title.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats {\r\n font-size: 12px;\r\n font-weight: 400;\r\n line-height: 12px;\r\n display: flex;\r\n flex-direction: row;\r\n color: rgb(var(--ur-color-on-background));\r\n}\r\n\r\n:host .info .stats.loading {\r\n height: 12px;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats b {\r\n font-weight: 700;\r\n}\r\n\r\n:host .info .stats .followers {\r\n display: flex;\r\n}\r\n\r\n:host .page .actions {\r\n padding-top: 10px;\r\n}\r\n\r\n:host .info .actions.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .page .actions ur-button {\r\n width: 100%;\r\n padding-bottom: 5px;\r\n}\r\n\r\n:host .follow {\r\n display: flex;\r\n width: 100%;\r\n}\r\n\r\n:host .info .description {\r\n color: rgb(var(--ur-color-on-container-lite-dark));\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 16px; /* 163.636% */\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .description.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n@container page (max-width: 300px) {\r\n :host .info .title {\r\n font-size: 14px;\r\n line-height: 1.2rem;\r\n }\r\n\r\n :host .info .stats {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .description{\r\n font-size: 11px;\r\n }\r\n\r\n :host .info {\r\n row-gap: 4px;\r\n padding: 4px;\r\n }\r\n\r\n :host .info .title.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .stats.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .description.loading {\r\n margin: 0 4px;\r\n }\r\n}\r\n";
6
6
 
7
7
  const UrPage = class {
8
8
  constructor(hostRef) {
package/dist/esm/ur-user.entry.js CHANGED
@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, a as getElement
2
2
 
3
3
  const USER_COVER_FALLBACK = 'data:image/webp;base64,UklGRtQAAABXRUJQVlA4TMgAAAAv/8f/EQfQla70pPIBIUHi/+9mIvqf8Z///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7vAQ==';
4
4
 
5
- const urUserCss = ":host {\r\n --user-width: 100%;\r\n --user-border-radius: 8px;\r\n --ur-color-on-background: var(--mdui-color-on-background);\r\n --ur-color-background: var(--mdui-color-background);\r\n --ur-color-on-container-primary: var(--mdui-color-primary-container);\r\n --ur-color-primary: var(--mdui-color-primary);\r\n}\r\n\r\n@keyframes placeholderAnimate {\r\n 0%{ background-position: -650px 0; }\r\n 100%{ background-position: 650px 0; }\r\n}\r\n\r\n:host {\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: content-box;\r\n container-type: inline-size;\r\n container-name: user;\r\n}\r\n\r\n:host .user {\r\n overflow: hidden;\r\n width: var(--user-width);\r\n border-radius: var(--user-border-radius);\r\n cursor: pointer;\r\n}\r\n\r\n:host .user:hover {\r\n background: rgba(var(--ur-color-on-background), 0.12);\r\n}\r\n\r\n:host .user.loading {\r\n cursor: default;\r\n}\r\n\r\n:host .cover {\r\n aspect-ratio: 1;\r\n background-color: rgb(var(--ur-color-on-background));\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n position: relative;\r\n}\r\n\r\n:host .cover.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 8px;\r\n row-gap: 8px;\r\n box-sizing: border-box;\r\n}\r\n\r\n:host .info:has(.loading) {\r\n padding-left: 0;\r\n padding-right: 0;\r\n}\r\n\r\n:host .info .title {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .title.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats {\r\n font-size: 12px;\r\n font-weight: 400;\r\n line-height: 12px;\r\n display: flex;\r\n flex-direction: row;\r\n color: rgb(var(--ur-color-on-background));\r\n}\r\n\r\n:host .info .stats.loading {\r\n height: 12px;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats b {\r\n font-weight: 700;\r\n}\r\n\r\n:host .info .stats .followers {\r\n display: flex;\r\n}\r\n\r\n:host .user .actions {\r\n padding-top: 10px;\r\n}\r\n\r\n:host .info .actions.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .user .actions ur-button {\r\n width: 100%;\r\n padding-bottom: 5px;\r\n}\r\n\r\n:host .follow {\r\n display: flex;\r\n width: 100%;\r\n}\r\n\r\n:host .info .description {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 16px; /* 163.636% */\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .description.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n@container user (max-width: 300px) {\r\n :host .info .title {\r\n font-size: 14px;\r\n line-height: 1.2rem;\r\n }\r\n\r\n :host .info .stats {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .description{\r\n font-size: 11px;\r\n }\r\n\r\n :host .info {\r\n row-gap: 4px;\r\n padding: 4px;\r\n }\r\n\r\n\r\n :host .info .title.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .stats.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .description.loading {\r\n margin: 0 4px;\r\n }\r\n}\r\n";
5
+ const urUserCss = ":host {\r\n --user-width: 100%;\r\n --user-border-radius: 8px;\r\n --ur-color-on-background: var(--mdui-color-on-background);\r\n --ur-color-background: var(--mdui-color-background);\r\n --ur-color-on-container-primary: var(--mdui-color-primary-container);\r\n --ur-color-primary: var(--mdui-color-primary);\r\n}\r\n\r\n@keyframes placeholderAnimate {\r\n 0%{ background-position: -650px 0; }\r\n 100%{ background-position: 650px 0; }\r\n}\r\n\r\n:host {\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: content-box;\r\n container-type: inline-size;\r\n container-name: user;\r\n}\r\n\r\n:host .user {\r\n overflow: hidden;\r\n width: var(--user-width);\r\n border-radius: var(--user-border-radius);\r\n cursor: pointer;\r\n}\r\n\r\n:host .user:hover {\r\n background: rgba(var(--ur-color-on-background), 0.12);\r\n}\r\n\r\n:host .user.loading {\r\n cursor: default;\r\n}\r\n\r\n:host .cover {\r\n aspect-ratio: 1;\r\n background-color: rgb(var(--ur-color-on-background));\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n position: relative;\r\n animation: none;\r\n}\r\n\r\n:host .cover.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 8px;\r\n row-gap: 8px;\r\n box-sizing: border-box;\r\n}\r\n\r\n:host .info:has(.loading) {\r\n padding-left: 0;\r\n padding-right: 0;\r\n}\r\n\r\n:host .info .title {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .title.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats {\r\n font-size: 12px;\r\n font-weight: 400;\r\n line-height: 12px;\r\n display: flex;\r\n flex-direction: row;\r\n color: rgb(var(--ur-color-on-background));\r\n}\r\n\r\n:host .info .stats.loading {\r\n height: 12px;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats b {\r\n font-weight: 700;\r\n}\r\n\r\n:host .info .stats .followers {\r\n display: flex;\r\n}\r\n\r\n:host .user .actions {\r\n padding-top: 10px;\r\n}\r\n\r\n:host .info .actions.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .user .actions ur-button {\r\n width: 100%;\r\n padding-bottom: 5px;\r\n}\r\n\r\n:host .follow {\r\n display: flex;\r\n width: 100%;\r\n}\r\n\r\n:host .info .description {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 16px; /* 163.636% */\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .description.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n@container user (max-width: 300px) {\r\n :host .info .title {\r\n font-size: 14px;\r\n line-height: 1.2rem;\r\n }\r\n\r\n :host .info .stats {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .description{\r\n font-size: 11px;\r\n }\r\n\r\n :host .info {\r\n row-gap: 4px;\r\n padding: 4px;\r\n }\r\n\r\n\r\n :host .info .title.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .stats.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .description.loading {\r\n margin: 0 4px;\r\n }\r\n}\r\n";
6
6
 
7
7
  const UrUser = class {
8
8
  constructor(hostRef) {
package/dist/urnovl-web-components/p-5367ebcc.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as n,c as r,h as o,H as i,a}from"./p-CCvuajik.js";const t=class{constructor(o){n(this,o),this.pageClicked=r(this,"pageClicked"),this.pageFollowClicked=r(this,"pageFollowClicked"),this.loading=!1,this.followed=!1,this.pageTitle="Page title",this.pageCoverFallback="data:image/webp;base64,UklGRtQAAABXRUJQVlA4TMgAAAAv/8f/EQfQla70pPIBIUHi/+9mIvqf8Z///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7vAQ==",this.followers=0,this.showStats=!0,this.borderRadius="8px",this.followLabel="Follow",this.followingLabel="Following",this.followerLabel="Follower",this.followersLabel="Followers"}componentDidLoad(){this.el.style.setProperty("--page-border-radius",this.borderRadius)}handleFollowClicked(n){n.stopPropagation(),n.preventDefault(),this.pageFollowClicked.emit([this.pageId,this.followed])}renderLoading(){return o(i,null,o("div",{class:"page loading"},o("section",{class:"cover loading"}),o("section",{class:"info"},o("div",{class:"title loading"}," "),o("div",{class:"description loading"}," "),o("div",{class:"stats loading"}),o("div",{class:"actions loading"}))))}render(){return this.loading?this.renderLoading():o(i,null,o("div",{class:"page",onClick:()=>{this.pageClicked.emit(this.pageId)}},o("section",{class:"cover",style:{backgroundImage:this.pageCover?`url(${this.pageCover})`:`url(${this.pageCoverFallback})`}}),o("section",{class:"info"},o("div",{class:"title"},this.pageTitle),o("div",{class:"description"},this.pageType),this.showStats&&this.followers>0&&o("div",{class:"stats"},o("div",{class:"followers"},o("div",null,o("b",null,this.followers)," ",1===this.followers?this.followerLabel:this.followersLabel))),o("div",{class:"actions"},o("ur-button",{class:"follow",variant:"outlined",onClick:n=>this.handleFollowClicked(n)},this.followed?this.followingLabel:this.followLabel)))))}get el(){return a(this)}};t.style=":host {\r\n --page-width: 100%;\r\n --page-border-radius: 8px;\r\n --ur-color-on-background: var(--mdui-color-on-background);\r\n --ur-color-background: var(--mdui-color-background);\r\n --ur-color-on-container-lite-dark: var(--mdui-color-on-container-lite-dark);\r\n --ur-color-on-container-primary: var(--mdui-color-primary-container);\r\n --ur-color-primary: var(--mdui-color-primary);\r\n}\r\n\r\n@keyframes placeholderAnimate {\r\n 0%{ background-position: -650px 0; }\r\n 100%{ background-position: 650px 0; }\r\n}\r\n\r\n:host {\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: content-box;\r\n container-type: inline-size;\r\n container-name: page;\r\n}\r\n\r\n:host .page {\r\n overflow: hidden;\r\n width: var(--page-width);\r\n border-radius: var(--page-border-radius);\r\n cursor: pointer;\r\n}\r\n\r\n:host .page:hover {\r\n background: rgba(var(--ur-color-on-background), 0.12);\r\n}\r\n\r\n:host .page.loading {\r\n cursor: default;\r\n}\r\n\r\n:host .cover {\r\n aspect-ratio: 1;\r\n background-color: rgb(var(--ur-color-on-background));\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n position: relative;\r\n animation: none;\r\n}\r\n\r\n:host .cover.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 8px;\r\n row-gap: 8px;\r\n box-sizing: border-box;\r\n}\r\n\r\n:host .info:has(.loading) {\r\n padding-left: 0;\r\n padding-right: 0;\r\n}\r\n\r\n:host .info .title {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .title.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats {\r\n font-size: 12px;\r\n font-weight: 400;\r\n line-height: 12px;\r\n display: flex;\r\n flex-direction: row;\r\n color: rgb(var(--ur-color-on-background));\r\n}\r\n\r\n:host .info .stats.loading {\r\n height: 12px;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats b {\r\n font-weight: 700;\r\n}\r\n\r\n:host .info .stats .followers {\r\n display: flex;\r\n}\r\n\r\n:host .page .actions {\r\n padding-top: 10px;\r\n}\r\n\r\n:host .info .actions.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .page .actions ur-button {\r\n width: 100%;\r\n padding-bottom: 5px;\r\n}\r\n\r\n:host .follow {\r\n display: flex;\r\n width: 100%;\r\n}\r\n\r\n:host .info .description {\r\n color: rgb(var(--ur-color-on-container-lite-dark));\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 16px; /* 163.636% */\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .description.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n@container page (max-width: 300px) {\r\n :host .info .title {\r\n font-size: 14px;\r\n line-height: 1.2rem;\r\n }\r\n\r\n :host .info .stats {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .description{\r\n font-size: 11px;\r\n }\r\n\r\n :host .info {\r\n row-gap: 4px;\r\n padding: 4px;\r\n }\r\n\r\n :host .info .title.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .stats.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .description.loading {\r\n margin: 0 4px;\r\n }\r\n}\r\n";export{t as ur_page}
package/dist/urnovl-web-components/p-8e781f77.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as n,c as r,h as o,H as i,a}from"./p-CCvuajik.js";const t=class{constructor(o){n(this,o),this.userClicked=r(this,"userClicked"),this.userFollowClicked=r(this,"userFollowClicked"),this.loading=!1,this.followed=!1,this.userTitle="User title",this.userCoverFallback="data:image/webp;base64,UklGRtQAAABXRUJQVlA4TMgAAAAv/8f/EQfQla70pPIBIUHi/+9mIvqf8Z///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7zn//85z//+c9//vOf//znP//5z3/+85///Oc///nPf/7vAQ==",this.followers=0,this.showStats=!0,this.borderRadius="8px",this.followLabel="Follow",this.followingLabel="Following",this.followerLabel="Follower",this.followersLabel="Followers"}componentDidLoad(){this.el.style.setProperty("--page-border-radius",this.borderRadius)}handleFollowClicked(n){n.stopPropagation(),n.preventDefault(),this.userFollowClicked.emit([this.userId,this.followed])}handleUserClicked(n){n.stopPropagation(),n.preventDefault(),this.userClicked.emit(this.userId)}renderLoading(){return o(i,null,o("div",{class:"page loading"},o("section",{class:"cover loading"}),o("section",{class:"info"},o("div",{class:"title loading"}," "),o("div",{class:"stats loading"}),o("div",{class:"description loading"}," "),o("div",{class:"actions loading"}))))}render(){return this.loading?this.renderLoading():o(i,null,o("div",{class:"user",onClick:n=>this.handleUserClicked(n)},o("section",{class:"cover",style:{backgroundImage:this.userCover?`url(${this.userCover})`:`url(${this.userCoverFallback})`}}),o("section",{class:"info"},o("div",{class:"title"},this.userTitle),this.showStats&&this.followers>0&&o("div",{class:"stats"},o("div",{class:"followers"},o("div",null,o("b",null,this.followers)," ",1===this.followers?this.followerLabel:this.followersLabel))),o("div",{class:"description"},this.userDescription),o("div",{class:"actions"},o("ur-button",{class:"follow",variant:"outlined",onClick:n=>this.handleFollowClicked(n)},this.followed?this.followingLabel:this.followLabel)))))}get el(){return a(this)}};t.style=":host {\r\n --user-width: 100%;\r\n --user-border-radius: 8px;\r\n --ur-color-on-background: var(--mdui-color-on-background);\r\n --ur-color-background: var(--mdui-color-background);\r\n --ur-color-on-container-primary: var(--mdui-color-primary-container);\r\n --ur-color-primary: var(--mdui-color-primary);\r\n}\r\n\r\n@keyframes placeholderAnimate {\r\n 0%{ background-position: -650px 0; }\r\n 100%{ background-position: 650px 0; }\r\n}\r\n\r\n:host {\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: content-box;\r\n container-type: inline-size;\r\n container-name: user;\r\n}\r\n\r\n:host .user {\r\n overflow: hidden;\r\n width: var(--user-width);\r\n border-radius: var(--user-border-radius);\r\n cursor: pointer;\r\n}\r\n\r\n:host .user:hover {\r\n background: rgba(var(--ur-color-on-background), 0.12);\r\n}\r\n\r\n:host .user.loading {\r\n cursor: default;\r\n}\r\n\r\n:host .cover {\r\n aspect-ratio: 1;\r\n background-color: rgb(var(--ur-color-on-background));\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n position: relative;\r\n animation: none;\r\n}\r\n\r\n:host .cover.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 8px;\r\n row-gap: 8px;\r\n box-sizing: border-box;\r\n}\r\n\r\n:host .info:has(.loading) {\r\n padding-left: 0;\r\n padding-right: 0;\r\n}\r\n\r\n:host .info .title {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .title.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats {\r\n font-size: 12px;\r\n font-weight: 400;\r\n line-height: 12px;\r\n display: flex;\r\n flex-direction: row;\r\n color: rgb(var(--ur-color-on-background));\r\n}\r\n\r\n:host .info .stats.loading {\r\n height: 12px;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats b {\r\n font-weight: 700;\r\n}\r\n\r\n:host .info .stats .followers {\r\n display: flex;\r\n}\r\n\r\n:host .user .actions {\r\n padding-top: 10px;\r\n}\r\n\r\n:host .info .actions.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .user .actions ur-button {\r\n width: 100%;\r\n padding-bottom: 5px;\r\n}\r\n\r\n:host .follow {\r\n display: flex;\r\n width: 100%;\r\n}\r\n\r\n:host .info .description {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 16px; /* 163.636% */\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .description.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n@container user (max-width: 300px) {\r\n :host .info .title {\r\n font-size: 14px;\r\n line-height: 1.2rem;\r\n }\r\n\r\n :host .info .stats {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .description{\r\n font-size: 11px;\r\n }\r\n\r\n :host .info {\r\n row-gap: 4px;\r\n padding: 4px;\r\n }\r\n\r\n\r\n :host .info .title.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .stats.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .description.loading {\r\n margin: 0 4px;\r\n }\r\n}\r\n";export{t as ur_user}
package/dist/urnovl-web-components/p-f7b397dd.entry.js ADDED
@@ -0,0 +1 @@
1
+ export{U as ur_avatar}from"./p-D3hCc2b0.js";import{r as n,c as r,h as o,H as i,a as t}from"./p-CCvuajik.js";import{N as a}from"./p-bzE6bm1n.js";export{U as ur_tooltip}from"./p-emzTiFq8.js";const e=class{constructor(o){n(this,o),this.novlClicked=r(this,"novlClicked"),this.loading=!1,this.novlTitle="Novl title",this.novlCoverFallback=a,this.likes=0,this.views=0,this.showStats=!0,this.published=!1,this.price=null,this.publisherAvatar=null,this.publisherName=null,this.borderRadius="8px",this.ongoingLabel="O",this.likesLabel="Likes",this.viewsLabel="Views"}componentDidLoad(){this.el.style.setProperty("--novl-border-radius",this.borderRadius)}renderLoading(){return o(i,null,o("div",{class:"novl loading",onClick:()=>this.novlClicked.emit(this.novlId)},o("section",{class:"cover loading"}),o("section",{class:"info"},o("div",{class:"title loading"}," "),o("div",{class:"stats loading"}))))}render(){return this.loading?this.renderLoading():o(i,null,o("div",{class:"novl",onClick:()=>this.novlClicked.emit(this.novlId)},o("section",{class:"cover",style:{backgroundImage:this.novlCover?`url(${this.novlCover})`:`url(${this.novlCoverFallback})`}},!this.published&&o("div",{class:"ongoing"},o("span",null,this.ongoingLabel)),!!this.price&&o("div",{class:"price"},o("span",null,this.price)),o("div",{class:"avatar-holder"},o("ur-tooltip",{"open-delay":"400",content:this.authorName,variant:"plain",placement:"right"},o("ur-avatar",{class:"author-avatar",src:this.authorAvatar,size:"32px",border:"2px",name:this.authorName,variant:"user"})),!!this.publisherAvatar&&this.publisherName&&o("div",{class:"publisher-avatar-container"},o("ur-tooltip",{"open-delay":"400",content:this.publisherName,variant:"plain",placement:"right"},o("ur-avatar",{class:"publisher-avatar",src:this.publisherAvatar,size:"18px",border:"2px",radius:"25%",name:this.publisherName,variant:"page"}))))),o("section",{class:"info"},o("div",{class:"title"},this.novlTitle),this.showStats&&(0!==this.likes||0!==this.views)&&o("div",{class:"stats"},0!==this.likes&&o("div",{class:"likes"},o("div",null,o("b",null,this.likes)," ",this.likesLabel)),0!==this.views&&o("div",{class:"views-container"},0!==this.likes&&o("div",{class:"dot"},"·"),o("div",{class:"views"},o("b",null,this.views)," ",this.viewsLabel))),o("div",{class:"txt-info-holder"},o("div",{class:"name author-name"},this.authorName),this.publisherName&&o("div",{class:"publisher-info"},o("div",{class:"dot"},"·"),o("div",{class:"name publisher-name"},this.publisherName))))))}get el(){return t(this)}};e.style=":host {\r\n --novl-width: 100%;\r\n --novl-border-radius: 8px;\r\n --ur-color-on-background: var(--mdui-color-on-background);\r\n --ur-color-background: var(--mdui-color-background);\r\n}\r\n\r\n@keyframes placeholderAnimate {\r\n 0%{ background-position: -650px 0; }\r\n 100%{ background-position: 650px 0; }\r\n}\r\n\r\n:host {\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: content-box;\r\n container-type: inline-size;\r\n container-name: novl;\r\n}\r\n\r\n:host .novl {\r\n overflow: hidden;\r\n width: var(--novl-width);\r\n border-radius: var(--novl-border-radius);\r\n cursor: pointer;\r\n}\r\n\r\n:host .novl:hover {\r\n background: rgba(var(--ur-color-on-background), 0.12);\r\n}\r\n\r\n:host .novl.loading {\r\n cursor: default;\r\n}\r\n\r\n:host .cover {\r\n aspect-ratio: 2.25;\r\n background-color: rgb(var(--ur-color-on-background));\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n position: relative;\r\n animation: none;\r\n}\r\n\r\n:host .cover.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n }\r\n\r\n:host .cover .ongoing {\r\n background-color: rgb(var(--mdui-color-primary-container));\r\n height: 32px;\r\n width: 32px;\r\n border-radius: 50%;\r\n position: absolute;\r\n top: 8px;\r\n left: 8px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: rgb(var(--mdui-color-primary));\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n font-size: 14px;\r\n line-height: 14px;\r\n}\r\n\r\n:host .cover .ongoing span {\r\n position: relative;\r\n}\r\n\r\n:host .cover .price {\r\n position: absolute;\r\n top: 8px;\r\n right: 8px;\r\n border-radius: 25px;\r\n background: rgba(43, 43, 39, 0.55);\r\n padding: 9px 16px;\r\n box-sizing: border-box;\r\n line-height: 14px;\r\n font-weight: 700;\r\n font-size: 14px;\r\n color: #fff;\r\n}\r\n\r\n:host .cover .avatar-holder {\r\n left: 0;\r\n bottom: 0;\r\n display: flex;\r\n position: absolute;\r\n align-items: center;\r\n padding: 0 4px;\r\n box-sizing: border-box;\r\n column-gap: 8px;\r\n transform: translateY(50%);\r\n}\r\n\r\n:host .cover .avatar-holder ur-avatar.author-avatar {\r\n display: block;\r\n}\r\n\r\n:host .cover .avatar-holder .publisher-avatar-container {\r\n position: absolute;\r\n bottom: 2px;\r\n right: -6px;\r\n height: 18px;\r\n width: 18px;\r\n}\r\n\r\n:host .cover .avatar-holder ur-avatar.publisher-avatar {\r\n display: block;\r\n}\r\n\r\n:host .txt-info-holder .publisher-info {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n column-gap: 4px;\r\n}\r\n\r\n:host .cover .avatar-holder .name {\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: 12px; /* 100% */\r\n color: #fff;\r\n}\r\n\r\n:host .info {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 24px 8px 8px 8px;\r\n row-gap: 8px;\r\n box-sizing: border-box;\r\n}\r\n\r\n:host .info:has(.loading) {\r\n padding-left: 0;\r\n padding-right: 0;\r\n}\r\n\r\n:host .info .title {\r\n color: rgb(var(--ur-color-on-background));\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 700;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; /* Number of lines */\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n:host .info .title.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats {\r\n font-size: 12px;\r\n font-weight: 400;\r\n line-height: 12px;\r\n display: flex;\r\n flex-direction: row;\r\n color: rgb(var(--ur-color-on-background));\r\n}\r\n\r\n:host .info .stats.loading {\r\n height: 12px;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n:host .info .stats b {\r\n font-weight: 700;\r\n}\r\n\r\n:host .info .stats .likes {\r\n display: flex;\r\n}\r\n\r\n:host .info .stats .dot {\r\n margin-left: 4px;\r\n}\r\n\r\n:host .info .stats .views-container {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n column-gap: 4px;\r\n}\r\n\r\n:host .info .txt-info-holder {\r\n display: flex;\r\n align-items: center;\r\n font-size: 11px;\r\n font-style: normal;\r\n font-weight: 600;\r\n color: rgb(var(--ur-color-on-background));\r\n cursor: pointer;\r\n column-gap: 4px;\r\n}\r\n\r\n:host .info .txt-info-holder .avatar {\r\n height: 32px;\r\n width: 32px;\r\n border-radius: 50%;\r\n background-size: cover;\r\n}\r\n\r\n:host .info .txt-info-holder .avatar.loading {\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n }\r\n\r\n:host .info .txt-info-holder .name {\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: 12px;\r\n}\r\n\r\n:host .info .txt-info-holder .name.loading {\r\n height: 12px;\r\n width: 50%;\r\n animation-duration: 1.7s;\r\n animation-fill-mode: forwards;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n animation-name: placeholderAnimate;\r\n background: linear-gradient(\r\n to right,\r\n rgba(var(--ur-color-on-background), 0.04) 2%,\r\n rgba(var(--ur-color-on-background), 0.12) 18%,\r\n rgba(var(--ur-color-on-background), 0.04) 33%\r\n );\r\n background-size: 1000px;\r\n}\r\n\r\n@container novl (max-width: 300px) {\r\n :host .info .title {\r\n font-size: 14px;\r\n line-height: 1.2rem;\r\n }\r\n\r\n :host .info .txt-info-holder .avatar {\r\n height: 24px;\r\n width: 24px;\r\n }\r\n\r\n :host .cover .publisher {\r\n height: 40px;\r\n padding: 0 4px;\r\n }\r\n\r\n\r\n :host .cover .publisher .name {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .txt-info-holder .name {\r\n font-size: 11px;\r\n }\r\n\r\n :host .cover .ongoing {\r\n width: 24px;\r\n height: 24px;\r\n left: 4px;\r\n }\r\n\r\n :host .cover .price {\r\n padding: 5px 8px;\r\n font-size: 12px;\r\n }\r\n\r\n :host .info .stats {\r\n font-size: 11px;\r\n }\r\n\r\n :host .info .description{\r\n font-size: 11px;\r\n }\r\n\r\n :host .info {\r\n row-gap: 4px;\r\n padding: 4px;\r\n padding-top: 22px;\r\n }\r\n\r\n :host .info .title.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .stats.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .description.loading {\r\n margin: 0 4px;\r\n }\r\n\r\n :host .info .txt-info-holder.loading {\r\n margin: 0 4px;\r\n }\r\n}\r\n";export{e as ur_novl}