urnovl-web-components 0.0.18 → 0.0.19

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.
@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
8
8
  const defineCustomElements = async (win, options) => {
9
9
  if (typeof window === 'undefined') return undefined;
10
10
  await appGlobals.globalScripts();
11
- return index.bootstrapLazy([["ur-novl.cjs",[[1,"ur-novl",{"novlTitle":[1,"novl-title"],"novlCover":[8,"novl-cover"],"likes":[2],"views":[2],"showStats":[4,"show-stats"],"novlDescription":[8,"novl-description"],"authorAvatar":[8,"author-avatar"],"authorName":[8,"author-name"],"published":[4],"price":[1]}]]]], options);
11
+ return index.bootstrapLazy([["ur-novl.cjs",[[1,"ur-novl",{"novlTitle":[1,"novl-title"],"novlCover":[8,"novl-cover"],"likes":[2],"views":[2],"showStats":[4,"show-stats"],"novlDescription":[8,"novl-description"],"authorAvatar":[8,"author-avatar"],"authorName":[8,"author-name"],"published":[4],"price":[1],"publisherAvatar":[1,"publisher-avatar"],"publisherName":[1,"publisher-name"]}]]]], options);
12
12
  };
13
13
 
14
14
  exports.setNonce = index.setNonce;
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-02f21c56.js');
6
6
 
7
- const urNovlCss = ":host{display:flex;flex-direction:column;width:270px;box-sizing:content-box}:host .cover{height:120px;border-radius:16px 16px 0px 0px;background-color:#131519;background-repeat:no-repeat;background-size:cover;background-position:50%;position:relative}:host .cover .ongoing{background-color:#ff3b01;height:30px;width:30px;border-radius:50%;position:absolute;top:10px;left:11.44px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;text-transform:uppercase;font-size:14px}:host .cover .ongoing span{position:relative;left:-0.5px;top:-1px}:host .cover .price{position:absolute;top:10px;right:11.44px;border-radius:25px;background:rgba(43, 43, 39, 0.95);padding:10px 24px;box-sizing:border-box;line-height:12px;font-weight:700;font-size:14px;color:#fff}:host .info{padding:7px 11px;background:#F7F7F7;box-sizing:border-box}:host .info .title{color:#171818;font-size:14px;font-style:normal;font-weight:700;line-height:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px}:host .info .stats{font-size:11px;font-weight:400;line-height:12px;display:flex;flex-direction:row;margin-bottom:7px}:host .info .stats b{font-weight:700}:host .info .stats .likes{display:flex}:host .info .stats .likes .dot{margin:0 5px}:host .info .description{color:#171818;font-size:11px;font-style:normal;font-weight:400;line-height:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px}:host .info .author{height:32px;display:flex;align-items:center;font-size:11px;font-style:normal;font-weight:600;color:#1D1B20;cursor:pointer}:host .info .author .avatar{height:32px;width:32px;border-radius:50%;background-size:cover}:host .info .author .name{margin-left:8px}";
7
+ const urNovlCss = ":host{display:flex;flex-direction:column;width:270px;box-sizing:content-box}:host .cover{height:120px;border-radius:16px 16px 0px 0px;background-color:#131519;background-repeat:no-repeat;background-size:cover;background-position:50%;position:relative}:host .cover .ongoing{background-color:#ff3b01;height:30px;width:30px;border-radius:50%;position:absolute;top:10px;left:11.44px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;text-transform:uppercase;font-size:14px}:host .cover .ongoing span{position:relative;left:-0.5px;top:-1px}:host .cover .price{position:absolute;top:10px;right:11.44px;border-radius:25px;background:rgba(43, 43, 39, 0.95);padding:10px 24px;box-sizing:border-box;line-height:12px;font-weight:700;font-size:14px;color:#fff}:host .cover .publisher{position:absolute;bottom:0;height:40px;background-color:rgba(0, 0, 0, 0.30);display:flex;align-items:center;width:100%;padding:4px 11.44px;box-sizing:border-box}:host .cover .publisher .avatar{height:32px;width:32px;border-radius:50%;background-size:cover}:host .cover .publisher .name{font-size:12px;font-style:normal;font-weight:600;line-height:12px;color:#fff;margin-left:7.56px}:host .info{padding:7px 11px;background:#F7F7F7;box-sizing:border-box}:host .info .title{color:#171818;font-size:14px;font-style:normal;font-weight:700;line-height:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px}:host .info .stats{font-size:11px;font-weight:400;line-height:12px;display:flex;flex-direction:row;margin-bottom:7px}:host .info .stats b{font-weight:700}:host .info .stats .likes{display:flex}:host .info .stats .likes .dot{margin:0 5px}:host .info .description{color:#171818;font-size:11px;font-style:normal;font-weight:400;line-height:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px}:host .info .author{height:32px;display:flex;align-items:center;font-size:11px;font-style:normal;font-weight:600;color:#1D1B20;cursor:pointer}:host .info .author .avatar{height:32px;width:32px;border-radius:50%;background-size:cover}:host .info .author .name{margin-left:8px}";
8
8
  const UrNovlStyle0 = urNovlCss;
9
9
 
10
10
  const UrNovl = class {
@@ -21,10 +21,12 @@ const UrNovl = class {
21
21
  this.authorName = undefined;
22
22
  this.published = false;
23
23
  this.price = null;
24
+ this.publisherAvatar = null;
25
+ this.publisherName = null;
24
26
  }
25
27
  render() {
26
- return (index.h(index.Host, { key: '437dd313e44ad8d358a047638a91a59759b78128' }, index.h("section", { key: '58e8c4d44746d8488277977e2623cfaf9552729e', class: 'cover', style: { backgroundImage: `url(${this.novlCover})` } }, !this.published && index.h("div", { key: 'd2b17ffdfec22a01735517cae61af65aca6076e8', class: "ongoing" }, index.h("span", { key: '9113b0e3d6c15cc8b70d4dcd006d9c206d3b74e6' }, "O")), !!this.price && index.h("div", { key: '240839b34a3ce3d7ba9429e8e819c33e2b07d939', class: "price" }, index.h("span", { key: 'b0ff796332d378009f879006afc78390b25d56ec' }, this.price))), index.h("section", { key: 'c13300def2549abaa9538f36884a7bd277203307', class: 'info' }, index.h("div", { key: 'd7437549eedabadf0bbd014b9e47f76361884057', class: 'title' }, this.novlTitle), this.showStats &&
27
- index.h("div", { key: '2375e29325b146402ca8294e1636a76ee516eb3e', class: 'stats' }, index.h("div", { key: '1458609b9790e69fbe8e922822d6c9baadd8cf3b', class: "likes" }, index.h("div", { key: '3cd5619712b16ac645cd768505340adf68cd3f9c' }, index.h("b", { key: '5396b926468378a414e8a4d160c29e1a2b11b64c' }, this.likes), " Likes"), index.h("div", { key: '9b02eabc9f47440ec24e5f688a1213fe31871605', class: "dot" }, "\u00B7")), index.h("div", { key: 'bc87d42a758a8e78977f2a98c4e2d7e6981e9bb7', class: "views" }, index.h("b", { key: '973c188224e7e3cad03c3f22e0aa71d6ade29aaf' }, this.views), " Views")), index.h("div", { key: '496c0fdd45ba95c91a356b980ac921f89a4256d1', class: "description" }, this.novlDescription), index.h("div", { key: '0075d46bb6908065f870fe0b1cb50beaceb44ce3', class: "author", onClick: _ => this.authorClicked.emit() }, index.h("div", { key: '55da829af52778fc646b0e806435394ee7b64196', class: "avatar", style: { backgroundImage: `url(${this.authorAvatar})` } }), index.h("div", { key: '13ed489fb41aa89b092cacb5a7d1df417f7548f4', class: "name" }, this.authorName)))));
28
+ return (index.h(index.Host, { key: 'a9fc7d41282bfebcd6549ae2a560ce10876734ec' }, index.h("section", { key: 'ff3850d955db39844a2519405cea469b991223f6', class: 'cover', style: { backgroundImage: `url(${this.novlCover})` } }, !this.published && index.h("div", { key: 'e673d319d547d4c7a8db4ee24af3c54c22655a46', class: "ongoing" }, index.h("span", { key: '3ffd36f966d5e2467d8b909493fa1eefec3cdf22' }, "O")), !!this.price && index.h("div", { key: 'a7b2db6f4fdcde900f33af3e281a2b0c2988ea83', class: "price" }, index.h("span", { key: '8cb4c327d40be3360572c09fc172a41e182b9f1d' }, this.price)), !!this.publisherAvatar && this.publisherName && index.h("div", { key: '4b023744a64e54d4ce0378e1ff6500d1aff26c5e', class: "publisher" }, index.h("div", { key: 'd1b3f8a57182de4d5950ddf0f7dbcc23926d523a', class: "avatar", style: { backgroundImage: `url(${this.publisherAvatar})` } }), index.h("div", { key: '54e9de7f5542820b7426c6f28813085d18878475', class: "name" }, this.publisherName))), index.h("section", { key: 'c4d8bc26bee86d05fb0169535287245bff8495d3', class: 'info' }, index.h("div", { key: '1f7022acd84bbc9138756318b258b3754179152d', class: 'title' }, this.novlTitle), this.showStats &&
29
+ index.h("div", { key: 'b12682a7a4a8e3f8a0585fd1ea5c35c104f62016', class: 'stats' }, index.h("div", { key: '227a98b98596510d19c75106f53ad717ae93888d', class: "likes" }, index.h("div", { key: 'e5dd6254a45368c97ebec94f827f20a7f1b5b2c3' }, index.h("b", { key: 'ed7e399b0b16787f9bc2ecbdf0ee6a34a5925f6f' }, this.likes), " Likes"), index.h("div", { key: 'ea6157c3c3e286ead0bcddb6fe71512f043d076d', class: "dot" }, "\u00B7")), index.h("div", { key: '6cb8f3b35f849d544346a12335f0c8276e4dc8a8', class: "views" }, index.h("b", { key: '8ce3c1c4720fa2fdb720b07bb9fda7e08e90fa42' }, this.views), " Views")), index.h("div", { key: '3f7c35a3c208f9a9012aac06e47a6b6a2f5c2b2c', class: "description" }, this.novlDescription), index.h("div", { key: '57761205efc3a3878446d4cef6805213738b3621', class: "author", onClick: _ => this.authorClicked.emit() }, index.h("div", { key: '4c3b10e2cfcc7574500651b78056ef221f22eba0', class: "avatar", style: { backgroundImage: `url(${this.authorAvatar})` } }), index.h("div", { key: '789af2c88e818faf8f7b61653c94929f61f23636', class: "name" }, this.authorName)))));
28
30
  }
29
31
  };
30
32
  UrNovl.style = UrNovlStyle0;
@@ -1 +1 @@
1
- {"file":"ur-novl.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,4xDAA4xD,CAAC;AAC/yD,qBAAe,SAAS;;MCMX,MAAM;;;;yBAGH,YAAY;;qBAMhB,CAAC;qBAGD,CAAC;yBAGG,IAAI;;;;yBAYJ,KAAK;qBAGM,IAAI;;IAK3B,MAAM;QACF,QACIA,QAACC,UAAI,uDACDD,sEAAS,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,EAAE,IACtE,CAAC,IAAI,CAAC,SAAS,IAAIA,kEAAK,KAAK,EAAC,SAAS,IAACA,yEAAc,CAAM,EAC5D,CAAC,CAAC,IAAI,CAAC,KAAK,IAAIA,kEAAK,KAAK,EAAC,OAAO,IAACA,qEAAO,IAAI,CAAC,KAAK,CAAQ,CAAM,CAC7D,EACVA,sEAAS,KAAK,EAAC,MAAM,IACjBA,kEAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAO,EACxC,IAAI,CAAC,SAAS;YACXA,kEAAK,KAAK,EAAC,OAAO,IACdA,kEAAK,KAAK,EAAC,OAAO,IAACA,oEAAKA,kEAAI,IAAI,CAAC,KAAK,CAAK,WAAY,EAAAA,kEAAK,KAAK,EAAC,KAAK,aAAQ,CAAM,EACrFA,kEAAK,KAAK,EAAC,OAAO,IAACA,kEAAI,IAAI,CAAC,KAAK,CAAK,WAAY,CAChD,EAEVA,kEAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,eAAe,CAAO,EACrDA,kEAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,IACvDA,kEAAK,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,YAAY,GAAG,EAAE,GAAQ,EACnFA,kEAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,UAAU,CAAO,CACvC,CACA,CACP,EACT;KACL;;;;;;","names":["h","Host"],"sources":["src/components/ur-novl/ur-novl.css?tag=ur-novl&encapsulation=shadow","src/components/ur-novl/ur-novl.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n width: 270px;\n box-sizing: content-box;\n}\n\n:host .cover {\n height: 120px;\n border-radius: 16px 16px 0px 0px;\n background-color: #131519;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: 50%;\n position: relative;\n}\n\n:host .cover .ongoing {\n background-color: #ff3b01;\n height: 30px;\n width: 30px;\n border-radius: 50%;\n position: absolute;\n top: 10px;\n left: 11.44px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-weight: 700;\n text-transform: uppercase;\n font-size: 14px;\n}\n\n:host .cover .ongoing span {\n position: relative;\n left: -0.5px;\n top: -1px;\n}\n\n:host .cover .price {\n position: absolute;\n top: 10px;\n right: 11.44px;\n border-radius: 25px;\n background: rgba(43, 43, 39, 0.95);\n padding: 10px 24px;\n box-sizing: border-box;\n line-height: 12px;\n font-weight: 700;\n font-size: 14px;\n color: #fff;\n}\n\n:host .info {\n padding: 7px 11px;\n background: #F7F7F7;\n box-sizing: border-box;\n}\n\n:host .info .title {\n color: #171818;\n font-size: 14px;\n font-style: normal;\n font-weight: 700;\n line-height: 18px;\n display: -webkit-box;\n -webkit-line-clamp: 2; /* Number of lines */\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 7px;\n}\n\n:host .info .stats {\n font-size: 11px;\n font-weight: 400;\n line-height: 12px;\n display: flex;\n flex-direction: row;\n margin-bottom: 7px;\n}\n\n:host .info .stats b {\n font-weight: 700;\n}\n\n:host .info .stats .likes {\n display: flex;\n}\n\n:host .info .stats .likes .dot {\n margin: 0 5px;\n}\n\n:host .info .description {\n color: #171818;\n font-size: 11px;\n font-style: normal;\n font-weight: 400;\n line-height: 18px; /* 163.636% */\n display: -webkit-box;\n -webkit-line-clamp: 2; /* Number of lines */\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 7px;\n}\n\n:host .info .author {\n height: 32px;\n display: flex;\n align-items: center;\n font-size: 11px;\n font-style: normal;\n font-weight: 600;\n color: #1D1B20;\n cursor: pointer;\n}\n\n:host .info .author .avatar {\n height: 32px;\n width: 32px;\n border-radius: 50%;\n background-size: cover;\n}\n\n:host .info .author .name {\n margin-left: 8px;\n}\n","import { Event, Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'ur-novl',\n styleUrl: 'ur-novl.css',\n shadow: true,\n})\nexport class UrNovl {\n\n @Prop()\n novlTitle = 'Novl title'\n\n @Prop()\n novlCover;\n\n @Prop()\n likes = 0;\n\n @Prop()\n views = 0;\n\n @Prop()\n showStats = true;\n\n @Prop()\n novlDescription;\n\n @Prop()\n authorAvatar;\n\n @Prop()\n authorName;\n\n @Prop()\n published = false;\n\n @Prop()\n price: string | null = null;\n\n @Event()\n authorClicked;\n\n render() {\n return (\n <Host>\n <section class='cover' style={{ backgroundImage: `url(${this.novlCover})` }}>\n {!this.published && <div class=\"ongoing\"><span>O</span></div>}\n {!!this.price && <div class=\"price\"><span>{this.price}</span></div>}\n </section>\n <section class='info'>\n <div class='title'>{this.novlTitle}</div>\n {this.showStats &&\n <div class='stats'>\n <div class=\"likes\"><div><b>{this.likes}</b> Likes</div><div class=\"dot\">·</div></div>\n <div class=\"views\"><b>{this.views}</b> Views</div>\n </div>\n }\n <div class=\"description\">{this.novlDescription}</div>\n <div class=\"author\" onClick={_ => this.authorClicked.emit()}>\n <div class=\"avatar\" style={{ backgroundImage: `url(${this.authorAvatar})` }}></div>\n <div class=\"name\">{this.authorName}</div>\n </div>\n </section>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"ur-novl.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,krEAAkrE,CAAC;AACrsE,qBAAe,SAAS;;MCMX,MAAM;;;;yBAGH,YAAY;;qBAMhB,CAAC;qBAGD,CAAC;yBAGG,IAAI;;;;yBAYJ,KAAK;qBAGM,IAAI;+BAGM,IAAI;6BAGN,IAAI;;IAKnC,MAAM;QACF,QACIA,QAACC,UAAI,uDACDD,sEAAS,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,EAAE,IACtE,CAAC,IAAI,CAAC,SAAS,IAAIA,kEAAK,KAAK,EAAC,SAAS,IAACA,yEAAc,CAAM,EAC5D,CAAC,CAAC,IAAI,CAAC,KAAK,IAAIA,kEAAK,KAAK,EAAC,OAAO,IAACA,qEAAO,IAAI,CAAC,KAAK,CAAQ,CAAM,EAClE,CAAC,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,aAAa,IAAIA,kEAAK,KAAK,EAAC,WAAW,IACnEA,kEAAK,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,eAAe,GAAG,EAAE,GAAQ,EACtFA,kEAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,CAAO,CAC1C,CACA,EACVA,sEAAS,KAAK,EAAC,MAAM,IACjBA,kEAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAO,EACxC,IAAI,CAAC,SAAS;YACXA,kEAAK,KAAK,EAAC,OAAO,IACdA,kEAAK,KAAK,EAAC,OAAO,IAACA,oEAAKA,kEAAI,IAAI,CAAC,KAAK,CAAK,WAAY,EAAAA,kEAAK,KAAK,EAAC,KAAK,aAAQ,CAAM,EACrFA,kEAAK,KAAK,EAAC,OAAO,IAACA,kEAAI,IAAI,CAAC,KAAK,CAAK,WAAY,CAChD,EAEVA,kEAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,eAAe,CAAO,EACrDA,kEAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,IACvDA,kEAAK,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,YAAY,GAAG,EAAE,GAAQ,EACnFA,kEAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,UAAU,CAAO,CACvC,CACA,CACP,EACT;KACL;;;;;;","names":["h","Host"],"sources":["src/components/ur-novl/ur-novl.css?tag=ur-novl&encapsulation=shadow","src/components/ur-novl/ur-novl.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n width: 270px;\n box-sizing: content-box;\n}\n\n:host .cover {\n height: 120px;\n border-radius: 16px 16px 0px 0px;\n background-color: #131519;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: 50%;\n position: relative;\n}\n\n:host .cover .ongoing {\n background-color: #ff3b01;\n height: 30px;\n width: 30px;\n border-radius: 50%;\n position: absolute;\n top: 10px;\n left: 11.44px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-weight: 700;\n text-transform: uppercase;\n font-size: 14px;\n}\n\n:host .cover .ongoing span {\n position: relative;\n left: -0.5px;\n top: -1px;\n}\n\n:host .cover .price {\n position: absolute;\n top: 10px;\n right: 11.44px;\n border-radius: 25px;\n background: rgba(43, 43, 39, 0.95);\n padding: 10px 24px;\n box-sizing: border-box;\n line-height: 12px;\n font-weight: 700;\n font-size: 14px;\n color: #fff;\n}\n\n:host .cover .publisher {\n position: absolute;\n bottom: 0;\n height: 40px;\n background-color: rgba(0, 0, 0, 0.30);\n display: flex;\n align-items: center;\n width: 100%;\n padding: 4px 11.44px;\n box-sizing: border-box;\n}\n\n:host .cover .publisher .avatar {\n height: 32px;\n width: 32px;\n border-radius: 50%;\n background-size: cover;\n}\n\n:host .cover .publisher .name {\n font-size: 12px;\n font-style: normal;\n font-weight: 600;\n line-height: 12px; /* 100% */\n color: #fff;\n margin-left: 7.56px;\n}\n\n:host .info {\n padding: 7px 11px;\n background: #F7F7F7;\n box-sizing: border-box;\n}\n\n:host .info .title {\n color: #171818;\n font-size: 14px;\n font-style: normal;\n font-weight: 700;\n line-height: 18px;\n display: -webkit-box;\n -webkit-line-clamp: 2; /* Number of lines */\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 7px;\n}\n\n:host .info .stats {\n font-size: 11px;\n font-weight: 400;\n line-height: 12px;\n display: flex;\n flex-direction: row;\n margin-bottom: 7px;\n}\n\n:host .info .stats b {\n font-weight: 700;\n}\n\n:host .info .stats .likes {\n display: flex;\n}\n\n:host .info .stats .likes .dot {\n margin: 0 5px;\n}\n\n:host .info .description {\n color: #171818;\n font-size: 11px;\n font-style: normal;\n font-weight: 400;\n line-height: 18px; /* 163.636% */\n display: -webkit-box;\n -webkit-line-clamp: 2; /* Number of lines */\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 7px;\n}\n\n:host .info .author {\n height: 32px;\n display: flex;\n align-items: center;\n font-size: 11px;\n font-style: normal;\n font-weight: 600;\n color: #1D1B20;\n cursor: pointer;\n}\n\n:host .info .author .avatar {\n height: 32px;\n width: 32px;\n border-radius: 50%;\n background-size: cover;\n}\n\n:host .info .author .name {\n margin-left: 8px;\n}\n","import { Event, Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'ur-novl',\n styleUrl: 'ur-novl.css',\n shadow: true,\n})\nexport class UrNovl {\n\n @Prop()\n novlTitle = 'Novl title'\n\n @Prop()\n novlCover;\n\n @Prop()\n likes = 0;\n\n @Prop()\n views = 0;\n\n @Prop()\n showStats = true;\n\n @Prop()\n novlDescription;\n\n @Prop()\n authorAvatar;\n\n @Prop()\n authorName;\n\n @Prop()\n published = false;\n\n @Prop()\n price: string | null = null;\n\n @Prop()\n publisherAvatar: string | null = null;\n\n @Prop()\n publisherName: string | null = null;\n\n @Event()\n authorClicked;\n\n render() {\n return (\n <Host>\n <section class='cover' style={{ backgroundImage: `url(${this.novlCover})` }}>\n {!this.published && <div class=\"ongoing\"><span>O</span></div>}\n {!!this.price && <div class=\"price\"><span>{this.price}</span></div>}\n {!!this.publisherAvatar && this.publisherName && <div class=\"publisher\">\n <div class=\"avatar\" style={{ backgroundImage: `url(${this.publisherAvatar})` }}></div>\n <div class=\"name\">{this.publisherName}</div>\n </div>}\n </section>\n <section class='info'>\n <div class='title'>{this.novlTitle}</div>\n {this.showStats &&\n <div class='stats'>\n <div class=\"likes\"><div><b>{this.likes}</b> Likes</div><div class=\"dot\">·</div></div>\n <div class=\"views\"><b>{this.views}</b> Views</div>\n </div>\n }\n <div class=\"description\">{this.novlDescription}</div>\n <div class=\"author\" onClick={_ => this.authorClicked.emit()}>\n <div class=\"avatar\" style={{ backgroundImage: `url(${this.authorAvatar})` }}></div>\n <div class=\"name\">{this.authorName}</div>\n </div>\n </section>\n </Host>\n );\n }\n}\n"],"version":3}
@@ -19,7 +19,7 @@ var patchBrowser = () => {
19
19
 
20
20
  patchBrowser().then(async (options) => {
21
21
  await appGlobals.globalScripts();
22
- return index.bootstrapLazy([["ur-novl.cjs",[[1,"ur-novl",{"novlTitle":[1,"novl-title"],"novlCover":[8,"novl-cover"],"likes":[2],"views":[2],"showStats":[4,"show-stats"],"novlDescription":[8,"novl-description"],"authorAvatar":[8,"author-avatar"],"authorName":[8,"author-name"],"published":[4],"price":[1]}]]]], options);
22
+ return index.bootstrapLazy([["ur-novl.cjs",[[1,"ur-novl",{"novlTitle":[1,"novl-title"],"novlCover":[8,"novl-cover"],"likes":[2],"views":[2],"showStats":[4,"show-stats"],"novlDescription":[8,"novl-description"],"authorAvatar":[8,"author-avatar"],"authorName":[8,"author-name"],"published":[4],"price":[1],"publisherAvatar":[1,"publisher-avatar"],"publisherName":[1,"publisher-name"]}]]]], options);
23
23
  });
24
24
 
25
25
  exports.setNonce = index.setNonce;
@@ -52,6 +52,34 @@
52
52
  color: #fff;
53
53
  }
54
54
 
55
+ :host .cover .publisher {
56
+ position: absolute;
57
+ bottom: 0;
58
+ height: 40px;
59
+ background-color: rgba(0, 0, 0, 0.30);
60
+ display: flex;
61
+ align-items: center;
62
+ width: 100%;
63
+ padding: 4px 11.44px;
64
+ box-sizing: border-box;
65
+ }
66
+
67
+ :host .cover .publisher .avatar {
68
+ height: 32px;
69
+ width: 32px;
70
+ border-radius: 50%;
71
+ background-size: cover;
72
+ }
73
+
74
+ :host .cover .publisher .name {
75
+ font-size: 12px;
76
+ font-style: normal;
77
+ font-weight: 600;
78
+ line-height: 12px; /* 100% */
79
+ color: #fff;
80
+ margin-left: 7.56px;
81
+ }
82
+
55
83
  :host .info {
56
84
  padding: 7px 11px;
57
85
  background: #F7F7F7;
@@ -11,10 +11,12 @@ export class UrNovl {
11
11
  this.authorName = undefined;
12
12
  this.published = false;
13
13
  this.price = null;
14
+ this.publisherAvatar = null;
15
+ this.publisherName = null;
14
16
  }
15
17
  render() {
16
- return (h(Host, { key: '437dd313e44ad8d358a047638a91a59759b78128' }, h("section", { key: '58e8c4d44746d8488277977e2623cfaf9552729e', class: 'cover', style: { backgroundImage: `url(${this.novlCover})` } }, !this.published && h("div", { key: 'd2b17ffdfec22a01735517cae61af65aca6076e8', class: "ongoing" }, h("span", { key: '9113b0e3d6c15cc8b70d4dcd006d9c206d3b74e6' }, "O")), !!this.price && h("div", { key: '240839b34a3ce3d7ba9429e8e819c33e2b07d939', class: "price" }, h("span", { key: 'b0ff796332d378009f879006afc78390b25d56ec' }, this.price))), h("section", { key: 'c13300def2549abaa9538f36884a7bd277203307', class: 'info' }, h("div", { key: 'd7437549eedabadf0bbd014b9e47f76361884057', class: 'title' }, this.novlTitle), this.showStats &&
17
- h("div", { key: '2375e29325b146402ca8294e1636a76ee516eb3e', class: 'stats' }, h("div", { key: '1458609b9790e69fbe8e922822d6c9baadd8cf3b', class: "likes" }, h("div", { key: '3cd5619712b16ac645cd768505340adf68cd3f9c' }, h("b", { key: '5396b926468378a414e8a4d160c29e1a2b11b64c' }, this.likes), " Likes"), h("div", { key: '9b02eabc9f47440ec24e5f688a1213fe31871605', class: "dot" }, "\u00B7")), h("div", { key: 'bc87d42a758a8e78977f2a98c4e2d7e6981e9bb7', class: "views" }, h("b", { key: '973c188224e7e3cad03c3f22e0aa71d6ade29aaf' }, this.views), " Views")), h("div", { key: '496c0fdd45ba95c91a356b980ac921f89a4256d1', class: "description" }, this.novlDescription), h("div", { key: '0075d46bb6908065f870fe0b1cb50beaceb44ce3', class: "author", onClick: _ => this.authorClicked.emit() }, h("div", { key: '55da829af52778fc646b0e806435394ee7b64196', class: "avatar", style: { backgroundImage: `url(${this.authorAvatar})` } }), h("div", { key: '13ed489fb41aa89b092cacb5a7d1df417f7548f4', class: "name" }, this.authorName)))));
18
+ return (h(Host, { key: 'a9fc7d41282bfebcd6549ae2a560ce10876734ec' }, h("section", { key: 'ff3850d955db39844a2519405cea469b991223f6', class: 'cover', style: { backgroundImage: `url(${this.novlCover})` } }, !this.published && h("div", { key: 'e673d319d547d4c7a8db4ee24af3c54c22655a46', class: "ongoing" }, h("span", { key: '3ffd36f966d5e2467d8b909493fa1eefec3cdf22' }, "O")), !!this.price && h("div", { key: 'a7b2db6f4fdcde900f33af3e281a2b0c2988ea83', class: "price" }, h("span", { key: '8cb4c327d40be3360572c09fc172a41e182b9f1d' }, this.price)), !!this.publisherAvatar && this.publisherName && h("div", { key: '4b023744a64e54d4ce0378e1ff6500d1aff26c5e', class: "publisher" }, h("div", { key: 'd1b3f8a57182de4d5950ddf0f7dbcc23926d523a', class: "avatar", style: { backgroundImage: `url(${this.publisherAvatar})` } }), h("div", { key: '54e9de7f5542820b7426c6f28813085d18878475', class: "name" }, this.publisherName))), h("section", { key: 'c4d8bc26bee86d05fb0169535287245bff8495d3', class: 'info' }, h("div", { key: '1f7022acd84bbc9138756318b258b3754179152d', class: 'title' }, this.novlTitle), this.showStats &&
19
+ h("div", { key: 'b12682a7a4a8e3f8a0585fd1ea5c35c104f62016', class: 'stats' }, h("div", { key: '227a98b98596510d19c75106f53ad717ae93888d', class: "likes" }, h("div", { key: 'e5dd6254a45368c97ebec94f827f20a7f1b5b2c3' }, h("b", { key: 'ed7e399b0b16787f9bc2ecbdf0ee6a34a5925f6f' }, this.likes), " Likes"), h("div", { key: 'ea6157c3c3e286ead0bcddb6fe71512f043d076d', class: "dot" }, "\u00B7")), h("div", { key: '6cb8f3b35f849d544346a12335f0c8276e4dc8a8', class: "views" }, h("b", { key: '8ce3c1c4720fa2fdb720b07bb9fda7e08e90fa42' }, this.views), " Views")), h("div", { key: '3f7c35a3c208f9a9012aac06e47a6b6a2f5c2b2c', class: "description" }, this.novlDescription), h("div", { key: '57761205efc3a3878446d4cef6805213738b3621', class: "author", onClick: _ => this.authorClicked.emit() }, h("div", { key: '4c3b10e2cfcc7574500651b78056ef221f22eba0', class: "avatar", style: { backgroundImage: `url(${this.authorAvatar})` } }), h("div", { key: '789af2c88e818faf8f7b61653c94929f61f23636', class: "name" }, this.authorName)))));
18
20
  }
19
21
  static get is() { return "ur-novl"; }
20
22
  static get encapsulation() { return "shadow"; }
@@ -205,6 +207,42 @@ export class UrNovl {
205
207
  "attribute": "price",
206
208
  "reflect": false,
207
209
  "defaultValue": "null"
210
+ },
211
+ "publisherAvatar": {
212
+ "type": "string",
213
+ "mutable": false,
214
+ "complexType": {
215
+ "original": "string | null",
216
+ "resolved": "string",
217
+ "references": {}
218
+ },
219
+ "required": false,
220
+ "optional": false,
221
+ "docs": {
222
+ "tags": [],
223
+ "text": ""
224
+ },
225
+ "attribute": "publisher-avatar",
226
+ "reflect": false,
227
+ "defaultValue": "null"
228
+ },
229
+ "publisherName": {
230
+ "type": "string",
231
+ "mutable": false,
232
+ "complexType": {
233
+ "original": "string | null",
234
+ "resolved": "string",
235
+ "references": {}
236
+ },
237
+ "required": false,
238
+ "optional": false,
239
+ "docs": {
240
+ "tags": [],
241
+ "text": ""
242
+ },
243
+ "attribute": "publisher-name",
244
+ "reflect": false,
245
+ "defaultValue": "null"
208
246
  }
209
247
  };
210
248
  }
@@ -1 +1 @@
1
- {"version":3,"file":"ur-novl.js","sourceRoot":"","sources":["../../../src/components/ur-novl/ur-novl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOhE,MAAM,OAAO,MAAM;;yBAGH,YAAY;;qBAMhB,CAAC;qBAGD,CAAC;yBAGG,IAAI;;;;yBAYJ,KAAK;qBAGM,IAAI;;IAK3B,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,gEAAS,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,EAAE;gBACtE,CAAC,IAAI,CAAC,SAAS,IAAI,4DAAK,KAAK,EAAC,SAAS;oBAAC,mEAAc,CAAM;gBAC5D,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,OAAO;oBAAC,+DAAO,IAAI,CAAC,KAAK,CAAQ,CAAM,CAC7D;YACV,gEAAS,KAAK,EAAC,MAAM;gBACjB,4DAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAO;gBACxC,IAAI,CAAC,SAAS;oBACX,4DAAK,KAAK,EAAC,OAAO;wBACd,4DAAK,KAAK,EAAC,OAAO;4BAAC;gCAAK,4DAAI,IAAI,CAAC,KAAK,CAAK;yCAAY;4BAAA,4DAAK,KAAK,EAAC,KAAK,aAAQ,CAAM;wBACrF,4DAAK,KAAK,EAAC,OAAO;4BAAC,4DAAI,IAAI,CAAC,KAAK,CAAK;qCAAY,CAChD;gBAEV,4DAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,eAAe,CAAO;gBACrD,4DAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;oBACvD,4DAAK,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,YAAY,GAAG,EAAE,GAAQ;oBACnF,4DAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,UAAU,CAAO,CACvC,CACA,CACP,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Event, Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'ur-novl',\n styleUrl: 'ur-novl.css',\n shadow: true,\n})\nexport class UrNovl {\n\n @Prop()\n novlTitle = 'Novl title'\n\n @Prop()\n novlCover;\n\n @Prop()\n likes = 0;\n\n @Prop()\n views = 0;\n\n @Prop()\n showStats = true;\n\n @Prop()\n novlDescription;\n\n @Prop()\n authorAvatar;\n\n @Prop()\n authorName;\n\n @Prop()\n published = false;\n\n @Prop()\n price: string | null = null;\n\n @Event()\n authorClicked;\n\n render() {\n return (\n <Host>\n <section class='cover' style={{ backgroundImage: `url(${this.novlCover})` }}>\n {!this.published && <div class=\"ongoing\"><span>O</span></div>}\n {!!this.price && <div class=\"price\"><span>{this.price}</span></div>}\n </section>\n <section class='info'>\n <div class='title'>{this.novlTitle}</div>\n {this.showStats &&\n <div class='stats'>\n <div class=\"likes\"><div><b>{this.likes}</b> Likes</div><div class=\"dot\">·</div></div>\n <div class=\"views\"><b>{this.views}</b> Views</div>\n </div>\n }\n <div class=\"description\">{this.novlDescription}</div>\n <div class=\"author\" onClick={_ => this.authorClicked.emit()}>\n <div class=\"avatar\" style={{ backgroundImage: `url(${this.authorAvatar})` }}></div>\n <div class=\"name\">{this.authorName}</div>\n </div>\n </section>\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"ur-novl.js","sourceRoot":"","sources":["../../../src/components/ur-novl/ur-novl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOhE,MAAM,OAAO,MAAM;;yBAGH,YAAY;;qBAMhB,CAAC;qBAGD,CAAC;yBAGG,IAAI;;;;yBAYJ,KAAK;qBAGM,IAAI;+BAGM,IAAI;6BAGN,IAAI;;IAKnC,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,gEAAS,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,EAAE;gBACtE,CAAC,IAAI,CAAC,SAAS,IAAI,4DAAK,KAAK,EAAC,SAAS;oBAAC,mEAAc,CAAM;gBAC5D,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,OAAO;oBAAC,+DAAO,IAAI,CAAC,KAAK,CAAQ,CAAM;gBAClE,CAAC,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,aAAa,IAAI,4DAAK,KAAK,EAAC,WAAW;oBACnE,4DAAK,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,eAAe,GAAG,EAAE,GAAQ;oBACtF,4DAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,CAAO,CAC1C,CACA;YACV,gEAAS,KAAK,EAAC,MAAM;gBACjB,4DAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAO;gBACxC,IAAI,CAAC,SAAS;oBACX,4DAAK,KAAK,EAAC,OAAO;wBACd,4DAAK,KAAK,EAAC,OAAO;4BAAC;gCAAK,4DAAI,IAAI,CAAC,KAAK,CAAK;yCAAY;4BAAA,4DAAK,KAAK,EAAC,KAAK,aAAQ,CAAM;wBACrF,4DAAK,KAAK,EAAC,OAAO;4BAAC,4DAAI,IAAI,CAAC,KAAK,CAAK;qCAAY,CAChD;gBAEV,4DAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,eAAe,CAAO;gBACrD,4DAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;oBACvD,4DAAK,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,YAAY,GAAG,EAAE,GAAQ;oBACnF,4DAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,UAAU,CAAO,CACvC,CACA,CACP,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Event, Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'ur-novl',\n styleUrl: 'ur-novl.css',\n shadow: true,\n})\nexport class UrNovl {\n\n @Prop()\n novlTitle = 'Novl title'\n\n @Prop()\n novlCover;\n\n @Prop()\n likes = 0;\n\n @Prop()\n views = 0;\n\n @Prop()\n showStats = true;\n\n @Prop()\n novlDescription;\n\n @Prop()\n authorAvatar;\n\n @Prop()\n authorName;\n\n @Prop()\n published = false;\n\n @Prop()\n price: string | null = null;\n\n @Prop()\n publisherAvatar: string | null = null;\n\n @Prop()\n publisherName: string | null = null;\n\n @Event()\n authorClicked;\n\n render() {\n return (\n <Host>\n <section class='cover' style={{ backgroundImage: `url(${this.novlCover})` }}>\n {!this.published && <div class=\"ongoing\"><span>O</span></div>}\n {!!this.price && <div class=\"price\"><span>{this.price}</span></div>}\n {!!this.publisherAvatar && this.publisherName && <div class=\"publisher\">\n <div class=\"avatar\" style={{ backgroundImage: `url(${this.publisherAvatar})` }}></div>\n <div class=\"name\">{this.publisherName}</div>\n </div>}\n </section>\n <section class='info'>\n <div class='title'>{this.novlTitle}</div>\n {this.showStats &&\n <div class='stats'>\n <div class=\"likes\"><div><b>{this.likes}</b> Likes</div><div class=\"dot\">·</div></div>\n <div class=\"views\"><b>{this.views}</b> Views</div>\n </div>\n }\n <div class=\"description\">{this.novlDescription}</div>\n <div class=\"author\" onClick={_ => this.authorClicked.emit()}>\n <div class=\"avatar\" style={{ backgroundImage: `url(${this.authorAvatar})` }}></div>\n <div class=\"name\">{this.authorName}</div>\n </div>\n </section>\n </Host>\n );\n }\n}\n"]}
@@ -1,7 +1,7 @@
1
1
  import { html } from 'lit';
2
2
  import '../components/ur-novl/ur-novl';
3
3
 
4
- const Novl = ({ novlTitle, novlCover, likes, views, showStats, novlDescription, authorAvatar, authorName, published, price }) => html`
4
+ const Novl = ({ novlTitle, novlCover, likes, views, showStats, novlDescription, authorAvatar, authorName, published, price, publisherName, publisherAvatar }) => html`
5
5
  <ur-novl
6
6
  author-name="${authorName}"
7
7
  author-avatar="${authorAvatar}"
@@ -13,6 +13,8 @@ const Novl = ({ novlTitle, novlCover, likes, views, showStats, novlDescription,
13
13
  show-stats="${showStats}"
14
14
  published="${published}"
15
15
  price="${price}"
16
+ publisher-name="${publisherName}"
17
+ publisher-avatar="${publisherAvatar}"
16
18
  ></ur-novl>
17
19
  `;
18
20
 
@@ -78,6 +80,23 @@ export const WithPrice = {
78
80
  },
79
81
  };
80
82
 
83
+ export const WithPublisher = {
84
+ args: {
85
+ novlTitle: 'Welcome to my nightmare',
86
+ novlCover: 'https://s3-eu-west-1.amazonaws.com/urnovl-irl-1/covers/fe469e2a-8e19-48a2-a89d-55e8a201156c-grid.jpg',
87
+ likes: 7,
88
+ views: 1024,
89
+ showStats: true,
90
+ novlDescription: 'Lorem Ipsum is simply dummy text.',
91
+ authorAvatar: 'https://lh4.googleusercontent.com/-FxnW9K6NrJY/AAAAAAAAAAI/AAAAAAAAACM/irHh3OywY_Y/photo.jpg',
92
+ authorName: 'James Bond 007',
93
+ publisherAvatar: "data:image/png;base64,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",
94
+ publisherName: 'Penguin',
95
+ published: true,
96
+ price: '15$',
97
+ },
98
+ };
99
+
81
100
  export const Full = {
82
101
  args: {
83
102
  novlTitle: "But you can't help, this is the end Of a tale that wasn't right",
@@ -89,6 +108,8 @@ export const Full = {
89
108
  'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
90
109
  authorAvatar: 'https://lh4.googleusercontent.com/-FxnW9K6NrJY/AAAAAAAAAAI/AAAAAAAAACM/irHh3OywY_Y/photo.jpg',
91
110
  authorName: 'Jesus Christ Super Star 🌟',
111
+ publisherAvatar: "data:image/png;base64,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",
112
+ publisherName: 'Penguin',
92
113
  published: false,
93
114
  price: '1555€',
94
115
  },
@@ -1,6 +1,6 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-57229bbc.js';
2
2
 
3
- const urNovlCss = ":host{display:flex;flex-direction:column;width:270px;box-sizing:content-box}:host .cover{height:120px;border-radius:16px 16px 0px 0px;background-color:#131519;background-repeat:no-repeat;background-size:cover;background-position:50%;position:relative}:host .cover .ongoing{background-color:#ff3b01;height:30px;width:30px;border-radius:50%;position:absolute;top:10px;left:11.44px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;text-transform:uppercase;font-size:14px}:host .cover .ongoing span{position:relative;left:-0.5px;top:-1px}:host .cover .price{position:absolute;top:10px;right:11.44px;border-radius:25px;background:rgba(43, 43, 39, 0.95);padding:10px 24px;box-sizing:border-box;line-height:12px;font-weight:700;font-size:14px;color:#fff}:host .info{padding:7px 11px;background:#F7F7F7;box-sizing:border-box}:host .info .title{color:#171818;font-size:14px;font-style:normal;font-weight:700;line-height:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px}:host .info .stats{font-size:11px;font-weight:400;line-height:12px;display:flex;flex-direction:row;margin-bottom:7px}:host .info .stats b{font-weight:700}:host .info .stats .likes{display:flex}:host .info .stats .likes .dot{margin:0 5px}:host .info .description{color:#171818;font-size:11px;font-style:normal;font-weight:400;line-height:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px}:host .info .author{height:32px;display:flex;align-items:center;font-size:11px;font-style:normal;font-weight:600;color:#1D1B20;cursor:pointer}:host .info .author .avatar{height:32px;width:32px;border-radius:50%;background-size:cover}:host .info .author .name{margin-left:8px}";
3
+ const urNovlCss = ":host{display:flex;flex-direction:column;width:270px;box-sizing:content-box}:host .cover{height:120px;border-radius:16px 16px 0px 0px;background-color:#131519;background-repeat:no-repeat;background-size:cover;background-position:50%;position:relative}:host .cover .ongoing{background-color:#ff3b01;height:30px;width:30px;border-radius:50%;position:absolute;top:10px;left:11.44px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;text-transform:uppercase;font-size:14px}:host .cover .ongoing span{position:relative;left:-0.5px;top:-1px}:host .cover .price{position:absolute;top:10px;right:11.44px;border-radius:25px;background:rgba(43, 43, 39, 0.95);padding:10px 24px;box-sizing:border-box;line-height:12px;font-weight:700;font-size:14px;color:#fff}:host .cover .publisher{position:absolute;bottom:0;height:40px;background-color:rgba(0, 0, 0, 0.30);display:flex;align-items:center;width:100%;padding:4px 11.44px;box-sizing:border-box}:host .cover .publisher .avatar{height:32px;width:32px;border-radius:50%;background-size:cover}:host .cover .publisher .name{font-size:12px;font-style:normal;font-weight:600;line-height:12px;color:#fff;margin-left:7.56px}:host .info{padding:7px 11px;background:#F7F7F7;box-sizing:border-box}:host .info .title{color:#171818;font-size:14px;font-style:normal;font-weight:700;line-height:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px}:host .info .stats{font-size:11px;font-weight:400;line-height:12px;display:flex;flex-direction:row;margin-bottom:7px}:host .info .stats b{font-weight:700}:host .info .stats .likes{display:flex}:host .info .stats .likes .dot{margin:0 5px}:host .info .description{color:#171818;font-size:11px;font-style:normal;font-weight:400;line-height:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px}:host .info .author{height:32px;display:flex;align-items:center;font-size:11px;font-style:normal;font-weight:600;color:#1D1B20;cursor:pointer}:host .info .author .avatar{height:32px;width:32px;border-radius:50%;background-size:cover}:host .info .author .name{margin-left:8px}";
4
4
  const UrNovlStyle0 = urNovlCss;
5
5
 
6
6
  const UrNovl$1 = /*@__PURE__*/ proxyCustomElement(class UrNovl extends H {
@@ -19,10 +19,12 @@ const UrNovl$1 = /*@__PURE__*/ proxyCustomElement(class UrNovl extends H {
19
19
  this.authorName = undefined;
20
20
  this.published = false;
21
21
  this.price = null;
22
+ this.publisherAvatar = null;
23
+ this.publisherName = null;
22
24
  }
23
25
  render() {
24
- return (h(Host, { key: '437dd313e44ad8d358a047638a91a59759b78128' }, h("section", { key: '58e8c4d44746d8488277977e2623cfaf9552729e', class: 'cover', style: { backgroundImage: `url(${this.novlCover})` } }, !this.published && h("div", { key: 'd2b17ffdfec22a01735517cae61af65aca6076e8', class: "ongoing" }, h("span", { key: '9113b0e3d6c15cc8b70d4dcd006d9c206d3b74e6' }, "O")), !!this.price && h("div", { key: '240839b34a3ce3d7ba9429e8e819c33e2b07d939', class: "price" }, h("span", { key: 'b0ff796332d378009f879006afc78390b25d56ec' }, this.price))), h("section", { key: 'c13300def2549abaa9538f36884a7bd277203307', class: 'info' }, h("div", { key: 'd7437549eedabadf0bbd014b9e47f76361884057', class: 'title' }, this.novlTitle), this.showStats &&
25
- h("div", { key: '2375e29325b146402ca8294e1636a76ee516eb3e', class: 'stats' }, h("div", { key: '1458609b9790e69fbe8e922822d6c9baadd8cf3b', class: "likes" }, h("div", { key: '3cd5619712b16ac645cd768505340adf68cd3f9c' }, h("b", { key: '5396b926468378a414e8a4d160c29e1a2b11b64c' }, this.likes), " Likes"), h("div", { key: '9b02eabc9f47440ec24e5f688a1213fe31871605', class: "dot" }, "\u00B7")), h("div", { key: 'bc87d42a758a8e78977f2a98c4e2d7e6981e9bb7', class: "views" }, h("b", { key: '973c188224e7e3cad03c3f22e0aa71d6ade29aaf' }, this.views), " Views")), h("div", { key: '496c0fdd45ba95c91a356b980ac921f89a4256d1', class: "description" }, this.novlDescription), h("div", { key: '0075d46bb6908065f870fe0b1cb50beaceb44ce3', class: "author", onClick: _ => this.authorClicked.emit() }, h("div", { key: '55da829af52778fc646b0e806435394ee7b64196', class: "avatar", style: { backgroundImage: `url(${this.authorAvatar})` } }), h("div", { key: '13ed489fb41aa89b092cacb5a7d1df417f7548f4', class: "name" }, this.authorName)))));
26
+ return (h(Host, { key: 'a9fc7d41282bfebcd6549ae2a560ce10876734ec' }, h("section", { key: 'ff3850d955db39844a2519405cea469b991223f6', class: 'cover', style: { backgroundImage: `url(${this.novlCover})` } }, !this.published && h("div", { key: 'e673d319d547d4c7a8db4ee24af3c54c22655a46', class: "ongoing" }, h("span", { key: '3ffd36f966d5e2467d8b909493fa1eefec3cdf22' }, "O")), !!this.price && h("div", { key: 'a7b2db6f4fdcde900f33af3e281a2b0c2988ea83', class: "price" }, h("span", { key: '8cb4c327d40be3360572c09fc172a41e182b9f1d' }, this.price)), !!this.publisherAvatar && this.publisherName && h("div", { key: '4b023744a64e54d4ce0378e1ff6500d1aff26c5e', class: "publisher" }, h("div", { key: 'd1b3f8a57182de4d5950ddf0f7dbcc23926d523a', class: "avatar", style: { backgroundImage: `url(${this.publisherAvatar})` } }), h("div", { key: '54e9de7f5542820b7426c6f28813085d18878475', class: "name" }, this.publisherName))), h("section", { key: 'c4d8bc26bee86d05fb0169535287245bff8495d3', class: 'info' }, h("div", { key: '1f7022acd84bbc9138756318b258b3754179152d', class: 'title' }, this.novlTitle), this.showStats &&
27
+ h("div", { key: 'b12682a7a4a8e3f8a0585fd1ea5c35c104f62016', class: 'stats' }, h("div", { key: '227a98b98596510d19c75106f53ad717ae93888d', class: "likes" }, h("div", { key: 'e5dd6254a45368c97ebec94f827f20a7f1b5b2c3' }, h("b", { key: 'ed7e399b0b16787f9bc2ecbdf0ee6a34a5925f6f' }, this.likes), " Likes"), h("div", { key: 'ea6157c3c3e286ead0bcddb6fe71512f043d076d', class: "dot" }, "\u00B7")), h("div", { key: '6cb8f3b35f849d544346a12335f0c8276e4dc8a8', class: "views" }, h("b", { key: '8ce3c1c4720fa2fdb720b07bb9fda7e08e90fa42' }, this.views), " Views")), h("div", { key: '3f7c35a3c208f9a9012aac06e47a6b6a2f5c2b2c', class: "description" }, this.novlDescription), h("div", { key: '57761205efc3a3878446d4cef6805213738b3621', class: "author", onClick: _ => this.authorClicked.emit() }, h("div", { key: '4c3b10e2cfcc7574500651b78056ef221f22eba0', class: "avatar", style: { backgroundImage: `url(${this.authorAvatar})` } }), h("div", { key: '789af2c88e818faf8f7b61653c94929f61f23636', class: "name" }, this.authorName)))));
26
28
  }
27
29
  static get style() { return UrNovlStyle0; }
28
30
  }, [1, "ur-novl", {
@@ -35,7 +37,9 @@ const UrNovl$1 = /*@__PURE__*/ proxyCustomElement(class UrNovl extends H {
35
37
  "authorAvatar": [8, "author-avatar"],
36
38
  "authorName": [8, "author-name"],
37
39
  "published": [4],
38
- "price": [1]
40
+ "price": [1],
41
+ "publisherAvatar": [1, "publisher-avatar"],
42
+ "publisherName": [1, "publisher-name"]
39
43
  }]);
40
44
  function defineCustomElement$1() {
41
45
  if (typeof customElements === "undefined") {
@@ -1 +1 @@
1
- {"file":"ur-novl.js","mappings":";;AAAA,MAAM,SAAS,GAAG,4xDAA4xD,CAAC;AAC/yD,qBAAe,SAAS;;MCMXA,QAAM;;;;;;yBAGH,YAAY;;qBAMhB,CAAC;qBAGD,CAAC;yBAGG,IAAI;;;;yBAYJ,KAAK;qBAGM,IAAI;;IAK3B,MAAM;QACF,QACI,EAAC,IAAI,uDACD,gEAAS,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,EAAE,IACtE,CAAC,IAAI,CAAC,SAAS,IAAI,4DAAK,KAAK,EAAC,SAAS,IAAC,mEAAc,CAAM,EAC5D,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,OAAO,IAAC,+DAAO,IAAI,CAAC,KAAK,CAAQ,CAAM,CAC7D,EACV,gEAAS,KAAK,EAAC,MAAM,IACjB,4DAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAO,EACxC,IAAI,CAAC,SAAS;YACX,4DAAK,KAAK,EAAC,OAAO,IACd,4DAAK,KAAK,EAAC,OAAO,IAAC,8DAAK,4DAAI,IAAI,CAAC,KAAK,CAAK,WAAY,EAAA,4DAAK,KAAK,EAAC,KAAK,aAAQ,CAAM,EACrF,4DAAK,KAAK,EAAC,OAAO,IAAC,4DAAI,IAAI,CAAC,KAAK,CAAK,WAAY,CAChD,EAEV,4DAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,eAAe,CAAO,EACrD,4DAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,IACvD,4DAAK,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,YAAY,GAAG,EAAE,GAAQ,EACnF,4DAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,UAAU,CAAO,CACvC,CACA,CACP,EACT;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["UrNovl"],"sources":["src/components/ur-novl/ur-novl.css?tag=ur-novl&encapsulation=shadow","src/components/ur-novl/ur-novl.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n width: 270px;\n box-sizing: content-box;\n}\n\n:host .cover {\n height: 120px;\n border-radius: 16px 16px 0px 0px;\n background-color: #131519;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: 50%;\n position: relative;\n}\n\n:host .cover .ongoing {\n background-color: #ff3b01;\n height: 30px;\n width: 30px;\n border-radius: 50%;\n position: absolute;\n top: 10px;\n left: 11.44px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-weight: 700;\n text-transform: uppercase;\n font-size: 14px;\n}\n\n:host .cover .ongoing span {\n position: relative;\n left: -0.5px;\n top: -1px;\n}\n\n:host .cover .price {\n position: absolute;\n top: 10px;\n right: 11.44px;\n border-radius: 25px;\n background: rgba(43, 43, 39, 0.95);\n padding: 10px 24px;\n box-sizing: border-box;\n line-height: 12px;\n font-weight: 700;\n font-size: 14px;\n color: #fff;\n}\n\n:host .info {\n padding: 7px 11px;\n background: #F7F7F7;\n box-sizing: border-box;\n}\n\n:host .info .title {\n color: #171818;\n font-size: 14px;\n font-style: normal;\n font-weight: 700;\n line-height: 18px;\n display: -webkit-box;\n -webkit-line-clamp: 2; /* Number of lines */\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 7px;\n}\n\n:host .info .stats {\n font-size: 11px;\n font-weight: 400;\n line-height: 12px;\n display: flex;\n flex-direction: row;\n margin-bottom: 7px;\n}\n\n:host .info .stats b {\n font-weight: 700;\n}\n\n:host .info .stats .likes {\n display: flex;\n}\n\n:host .info .stats .likes .dot {\n margin: 0 5px;\n}\n\n:host .info .description {\n color: #171818;\n font-size: 11px;\n font-style: normal;\n font-weight: 400;\n line-height: 18px; /* 163.636% */\n display: -webkit-box;\n -webkit-line-clamp: 2; /* Number of lines */\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 7px;\n}\n\n:host .info .author {\n height: 32px;\n display: flex;\n align-items: center;\n font-size: 11px;\n font-style: normal;\n font-weight: 600;\n color: #1D1B20;\n cursor: pointer;\n}\n\n:host .info .author .avatar {\n height: 32px;\n width: 32px;\n border-radius: 50%;\n background-size: cover;\n}\n\n:host .info .author .name {\n margin-left: 8px;\n}\n","import { Event, Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'ur-novl',\n styleUrl: 'ur-novl.css',\n shadow: true,\n})\nexport class UrNovl {\n\n @Prop()\n novlTitle = 'Novl title'\n\n @Prop()\n novlCover;\n\n @Prop()\n likes = 0;\n\n @Prop()\n views = 0;\n\n @Prop()\n showStats = true;\n\n @Prop()\n novlDescription;\n\n @Prop()\n authorAvatar;\n\n @Prop()\n authorName;\n\n @Prop()\n published = false;\n\n @Prop()\n price: string | null = null;\n\n @Event()\n authorClicked;\n\n render() {\n return (\n <Host>\n <section class='cover' style={{ backgroundImage: `url(${this.novlCover})` }}>\n {!this.published && <div class=\"ongoing\"><span>O</span></div>}\n {!!this.price && <div class=\"price\"><span>{this.price}</span></div>}\n </section>\n <section class='info'>\n <div class='title'>{this.novlTitle}</div>\n {this.showStats &&\n <div class='stats'>\n <div class=\"likes\"><div><b>{this.likes}</b> Likes</div><div class=\"dot\">·</div></div>\n <div class=\"views\"><b>{this.views}</b> Views</div>\n </div>\n }\n <div class=\"description\">{this.novlDescription}</div>\n <div class=\"author\" onClick={_ => this.authorClicked.emit()}>\n <div class=\"avatar\" style={{ backgroundImage: `url(${this.authorAvatar})` }}></div>\n <div class=\"name\">{this.authorName}</div>\n </div>\n </section>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"ur-novl.js","mappings":";;AAAA,MAAM,SAAS,GAAG,krEAAkrE,CAAC;AACrsE,qBAAe,SAAS;;MCMXA,QAAM;;;;;;yBAGH,YAAY;;qBAMhB,CAAC;qBAGD,CAAC;yBAGG,IAAI;;;;yBAYJ,KAAK;qBAGM,IAAI;+BAGM,IAAI;6BAGN,IAAI;;IAKnC,MAAM;QACF,QACI,EAAC,IAAI,uDACD,gEAAS,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,EAAE,IACtE,CAAC,IAAI,CAAC,SAAS,IAAI,4DAAK,KAAK,EAAC,SAAS,IAAC,mEAAc,CAAM,EAC5D,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,OAAO,IAAC,+DAAO,IAAI,CAAC,KAAK,CAAQ,CAAM,EAClE,CAAC,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,aAAa,IAAI,4DAAK,KAAK,EAAC,WAAW,IACnE,4DAAK,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,eAAe,GAAG,EAAE,GAAQ,EACtF,4DAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,CAAO,CAC1C,CACA,EACV,gEAAS,KAAK,EAAC,MAAM,IACjB,4DAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAO,EACxC,IAAI,CAAC,SAAS;YACX,4DAAK,KAAK,EAAC,OAAO,IACd,4DAAK,KAAK,EAAC,OAAO,IAAC,8DAAK,4DAAI,IAAI,CAAC,KAAK,CAAK,WAAY,EAAA,4DAAK,KAAK,EAAC,KAAK,aAAQ,CAAM,EACrF,4DAAK,KAAK,EAAC,OAAO,IAAC,4DAAI,IAAI,CAAC,KAAK,CAAK,WAAY,CAChD,EAEV,4DAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,eAAe,CAAO,EACrD,4DAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,IACvD,4DAAK,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,YAAY,GAAG,EAAE,GAAQ,EACnF,4DAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,UAAU,CAAO,CACvC,CACA,CACP,EACT;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["UrNovl"],"sources":["src/components/ur-novl/ur-novl.css?tag=ur-novl&encapsulation=shadow","src/components/ur-novl/ur-novl.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n width: 270px;\n box-sizing: content-box;\n}\n\n:host .cover {\n height: 120px;\n border-radius: 16px 16px 0px 0px;\n background-color: #131519;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: 50%;\n position: relative;\n}\n\n:host .cover .ongoing {\n background-color: #ff3b01;\n height: 30px;\n width: 30px;\n border-radius: 50%;\n position: absolute;\n top: 10px;\n left: 11.44px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-weight: 700;\n text-transform: uppercase;\n font-size: 14px;\n}\n\n:host .cover .ongoing span {\n position: relative;\n left: -0.5px;\n top: -1px;\n}\n\n:host .cover .price {\n position: absolute;\n top: 10px;\n right: 11.44px;\n border-radius: 25px;\n background: rgba(43, 43, 39, 0.95);\n padding: 10px 24px;\n box-sizing: border-box;\n line-height: 12px;\n font-weight: 700;\n font-size: 14px;\n color: #fff;\n}\n\n:host .cover .publisher {\n position: absolute;\n bottom: 0;\n height: 40px;\n background-color: rgba(0, 0, 0, 0.30);\n display: flex;\n align-items: center;\n width: 100%;\n padding: 4px 11.44px;\n box-sizing: border-box;\n}\n\n:host .cover .publisher .avatar {\n height: 32px;\n width: 32px;\n border-radius: 50%;\n background-size: cover;\n}\n\n:host .cover .publisher .name {\n font-size: 12px;\n font-style: normal;\n font-weight: 600;\n line-height: 12px; /* 100% */\n color: #fff;\n margin-left: 7.56px;\n}\n\n:host .info {\n padding: 7px 11px;\n background: #F7F7F7;\n box-sizing: border-box;\n}\n\n:host .info .title {\n color: #171818;\n font-size: 14px;\n font-style: normal;\n font-weight: 700;\n line-height: 18px;\n display: -webkit-box;\n -webkit-line-clamp: 2; /* Number of lines */\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 7px;\n}\n\n:host .info .stats {\n font-size: 11px;\n font-weight: 400;\n line-height: 12px;\n display: flex;\n flex-direction: row;\n margin-bottom: 7px;\n}\n\n:host .info .stats b {\n font-weight: 700;\n}\n\n:host .info .stats .likes {\n display: flex;\n}\n\n:host .info .stats .likes .dot {\n margin: 0 5px;\n}\n\n:host .info .description {\n color: #171818;\n font-size: 11px;\n font-style: normal;\n font-weight: 400;\n line-height: 18px; /* 163.636% */\n display: -webkit-box;\n -webkit-line-clamp: 2; /* Number of lines */\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 7px;\n}\n\n:host .info .author {\n height: 32px;\n display: flex;\n align-items: center;\n font-size: 11px;\n font-style: normal;\n font-weight: 600;\n color: #1D1B20;\n cursor: pointer;\n}\n\n:host .info .author .avatar {\n height: 32px;\n width: 32px;\n border-radius: 50%;\n background-size: cover;\n}\n\n:host .info .author .name {\n margin-left: 8px;\n}\n","import { Event, Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'ur-novl',\n styleUrl: 'ur-novl.css',\n shadow: true,\n})\nexport class UrNovl {\n\n @Prop()\n novlTitle = 'Novl title'\n\n @Prop()\n novlCover;\n\n @Prop()\n likes = 0;\n\n @Prop()\n views = 0;\n\n @Prop()\n showStats = true;\n\n @Prop()\n novlDescription;\n\n @Prop()\n authorAvatar;\n\n @Prop()\n authorName;\n\n @Prop()\n published = false;\n\n @Prop()\n price: string | null = null;\n\n @Prop()\n publisherAvatar: string | null = null;\n\n @Prop()\n publisherName: string | null = null;\n\n @Event()\n authorClicked;\n\n render() {\n return (\n <Host>\n <section class='cover' style={{ backgroundImage: `url(${this.novlCover})` }}>\n {!this.published && <div class=\"ongoing\"><span>O</span></div>}\n {!!this.price && <div class=\"price\"><span>{this.price}</span></div>}\n {!!this.publisherAvatar && this.publisherName && <div class=\"publisher\">\n <div class=\"avatar\" style={{ backgroundImage: `url(${this.publisherAvatar})` }}></div>\n <div class=\"name\">{this.publisherName}</div>\n </div>}\n </section>\n <section class='info'>\n <div class='title'>{this.novlTitle}</div>\n {this.showStats &&\n <div class='stats'>\n <div class=\"likes\"><div><b>{this.likes}</b> Likes</div><div class=\"dot\">·</div></div>\n <div class=\"views\"><b>{this.views}</b> Views</div>\n </div>\n }\n <div class=\"description\">{this.novlDescription}</div>\n <div class=\"author\" onClick={_ => this.authorClicked.emit()}>\n <div class=\"avatar\" style={{ backgroundImage: `url(${this.authorAvatar})` }}></div>\n <div class=\"name\">{this.authorName}</div>\n </div>\n </section>\n </Host>\n );\n }\n}\n"],"version":3}
@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
5
5
  const defineCustomElements = async (win, options) => {
6
6
  if (typeof window === 'undefined') return undefined;
7
7
  await globalScripts();
8
- return bootstrapLazy([["ur-novl",[[1,"ur-novl",{"novlTitle":[1,"novl-title"],"novlCover":[8,"novl-cover"],"likes":[2],"views":[2],"showStats":[4,"show-stats"],"novlDescription":[8,"novl-description"],"authorAvatar":[8,"author-avatar"],"authorName":[8,"author-name"],"published":[4],"price":[1]}]]]], options);
8
+ return bootstrapLazy([["ur-novl",[[1,"ur-novl",{"novlTitle":[1,"novl-title"],"novlCover":[8,"novl-cover"],"likes":[2],"views":[2],"showStats":[4,"show-stats"],"novlDescription":[8,"novl-description"],"authorAvatar":[8,"author-avatar"],"authorName":[8,"author-name"],"published":[4],"price":[1],"publisherAvatar":[1,"publisher-avatar"],"publisherName":[1,"publisher-name"]}]]]], options);
9
9
  };
10
10
 
11
11
  export { defineCustomElements };
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, c as createEvent, h, H as Host } from './index-39c2d9bd.js';
2
2
 
3
- const urNovlCss = ":host{display:flex;flex-direction:column;width:270px;box-sizing:content-box}:host .cover{height:120px;border-radius:16px 16px 0px 0px;background-color:#131519;background-repeat:no-repeat;background-size:cover;background-position:50%;position:relative}:host .cover .ongoing{background-color:#ff3b01;height:30px;width:30px;border-radius:50%;position:absolute;top:10px;left:11.44px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;text-transform:uppercase;font-size:14px}:host .cover .ongoing span{position:relative;left:-0.5px;top:-1px}:host .cover .price{position:absolute;top:10px;right:11.44px;border-radius:25px;background:rgba(43, 43, 39, 0.95);padding:10px 24px;box-sizing:border-box;line-height:12px;font-weight:700;font-size:14px;color:#fff}:host .info{padding:7px 11px;background:#F7F7F7;box-sizing:border-box}:host .info .title{color:#171818;font-size:14px;font-style:normal;font-weight:700;line-height:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px}:host .info .stats{font-size:11px;font-weight:400;line-height:12px;display:flex;flex-direction:row;margin-bottom:7px}:host .info .stats b{font-weight:700}:host .info .stats .likes{display:flex}:host .info .stats .likes .dot{margin:0 5px}:host .info .description{color:#171818;font-size:11px;font-style:normal;font-weight:400;line-height:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px}:host .info .author{height:32px;display:flex;align-items:center;font-size:11px;font-style:normal;font-weight:600;color:#1D1B20;cursor:pointer}:host .info .author .avatar{height:32px;width:32px;border-radius:50%;background-size:cover}:host .info .author .name{margin-left:8px}";
3
+ const urNovlCss = ":host{display:flex;flex-direction:column;width:270px;box-sizing:content-box}:host .cover{height:120px;border-radius:16px 16px 0px 0px;background-color:#131519;background-repeat:no-repeat;background-size:cover;background-position:50%;position:relative}:host .cover .ongoing{background-color:#ff3b01;height:30px;width:30px;border-radius:50%;position:absolute;top:10px;left:11.44px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;text-transform:uppercase;font-size:14px}:host .cover .ongoing span{position:relative;left:-0.5px;top:-1px}:host .cover .price{position:absolute;top:10px;right:11.44px;border-radius:25px;background:rgba(43, 43, 39, 0.95);padding:10px 24px;box-sizing:border-box;line-height:12px;font-weight:700;font-size:14px;color:#fff}:host .cover .publisher{position:absolute;bottom:0;height:40px;background-color:rgba(0, 0, 0, 0.30);display:flex;align-items:center;width:100%;padding:4px 11.44px;box-sizing:border-box}:host .cover .publisher .avatar{height:32px;width:32px;border-radius:50%;background-size:cover}:host .cover .publisher .name{font-size:12px;font-style:normal;font-weight:600;line-height:12px;color:#fff;margin-left:7.56px}:host .info{padding:7px 11px;background:#F7F7F7;box-sizing:border-box}:host .info .title{color:#171818;font-size:14px;font-style:normal;font-weight:700;line-height:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px}:host .info .stats{font-size:11px;font-weight:400;line-height:12px;display:flex;flex-direction:row;margin-bottom:7px}:host .info .stats b{font-weight:700}:host .info .stats .likes{display:flex}:host .info .stats .likes .dot{margin:0 5px}:host .info .description{color:#171818;font-size:11px;font-style:normal;font-weight:400;line-height:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px}:host .info .author{height:32px;display:flex;align-items:center;font-size:11px;font-style:normal;font-weight:600;color:#1D1B20;cursor:pointer}:host .info .author .avatar{height:32px;width:32px;border-radius:50%;background-size:cover}:host .info .author .name{margin-left:8px}";
4
4
  const UrNovlStyle0 = urNovlCss;
5
5
 
6
6
  const UrNovl = class {
@@ -17,10 +17,12 @@ const UrNovl = class {
17
17
  this.authorName = undefined;
18
18
  this.published = false;
19
19
  this.price = null;
20
+ this.publisherAvatar = null;
21
+ this.publisherName = null;
20
22
  }
21
23
  render() {
22
- return (h(Host, { key: '437dd313e44ad8d358a047638a91a59759b78128' }, h("section", { key: '58e8c4d44746d8488277977e2623cfaf9552729e', class: 'cover', style: { backgroundImage: `url(${this.novlCover})` } }, !this.published && h("div", { key: 'd2b17ffdfec22a01735517cae61af65aca6076e8', class: "ongoing" }, h("span", { key: '9113b0e3d6c15cc8b70d4dcd006d9c206d3b74e6' }, "O")), !!this.price && h("div", { key: '240839b34a3ce3d7ba9429e8e819c33e2b07d939', class: "price" }, h("span", { key: 'b0ff796332d378009f879006afc78390b25d56ec' }, this.price))), h("section", { key: 'c13300def2549abaa9538f36884a7bd277203307', class: 'info' }, h("div", { key: 'd7437549eedabadf0bbd014b9e47f76361884057', class: 'title' }, this.novlTitle), this.showStats &&
23
- h("div", { key: '2375e29325b146402ca8294e1636a76ee516eb3e', class: 'stats' }, h("div", { key: '1458609b9790e69fbe8e922822d6c9baadd8cf3b', class: "likes" }, h("div", { key: '3cd5619712b16ac645cd768505340adf68cd3f9c' }, h("b", { key: '5396b926468378a414e8a4d160c29e1a2b11b64c' }, this.likes), " Likes"), h("div", { key: '9b02eabc9f47440ec24e5f688a1213fe31871605', class: "dot" }, "\u00B7")), h("div", { key: 'bc87d42a758a8e78977f2a98c4e2d7e6981e9bb7', class: "views" }, h("b", { key: '973c188224e7e3cad03c3f22e0aa71d6ade29aaf' }, this.views), " Views")), h("div", { key: '496c0fdd45ba95c91a356b980ac921f89a4256d1', class: "description" }, this.novlDescription), h("div", { key: '0075d46bb6908065f870fe0b1cb50beaceb44ce3', class: "author", onClick: _ => this.authorClicked.emit() }, h("div", { key: '55da829af52778fc646b0e806435394ee7b64196', class: "avatar", style: { backgroundImage: `url(${this.authorAvatar})` } }), h("div", { key: '13ed489fb41aa89b092cacb5a7d1df417f7548f4', class: "name" }, this.authorName)))));
24
+ return (h(Host, { key: 'a9fc7d41282bfebcd6549ae2a560ce10876734ec' }, h("section", { key: 'ff3850d955db39844a2519405cea469b991223f6', class: 'cover', style: { backgroundImage: `url(${this.novlCover})` } }, !this.published && h("div", { key: 'e673d319d547d4c7a8db4ee24af3c54c22655a46', class: "ongoing" }, h("span", { key: '3ffd36f966d5e2467d8b909493fa1eefec3cdf22' }, "O")), !!this.price && h("div", { key: 'a7b2db6f4fdcde900f33af3e281a2b0c2988ea83', class: "price" }, h("span", { key: '8cb4c327d40be3360572c09fc172a41e182b9f1d' }, this.price)), !!this.publisherAvatar && this.publisherName && h("div", { key: '4b023744a64e54d4ce0378e1ff6500d1aff26c5e', class: "publisher" }, h("div", { key: 'd1b3f8a57182de4d5950ddf0f7dbcc23926d523a', class: "avatar", style: { backgroundImage: `url(${this.publisherAvatar})` } }), h("div", { key: '54e9de7f5542820b7426c6f28813085d18878475', class: "name" }, this.publisherName))), h("section", { key: 'c4d8bc26bee86d05fb0169535287245bff8495d3', class: 'info' }, h("div", { key: '1f7022acd84bbc9138756318b258b3754179152d', class: 'title' }, this.novlTitle), this.showStats &&
25
+ h("div", { key: 'b12682a7a4a8e3f8a0585fd1ea5c35c104f62016', class: 'stats' }, h("div", { key: '227a98b98596510d19c75106f53ad717ae93888d', class: "likes" }, h("div", { key: 'e5dd6254a45368c97ebec94f827f20a7f1b5b2c3' }, h("b", { key: 'ed7e399b0b16787f9bc2ecbdf0ee6a34a5925f6f' }, this.likes), " Likes"), h("div", { key: 'ea6157c3c3e286ead0bcddb6fe71512f043d076d', class: "dot" }, "\u00B7")), h("div", { key: '6cb8f3b35f849d544346a12335f0c8276e4dc8a8', class: "views" }, h("b", { key: '8ce3c1c4720fa2fdb720b07bb9fda7e08e90fa42' }, this.views), " Views")), h("div", { key: '3f7c35a3c208f9a9012aac06e47a6b6a2f5c2b2c', class: "description" }, this.novlDescription), h("div", { key: '57761205efc3a3878446d4cef6805213738b3621', class: "author", onClick: _ => this.authorClicked.emit() }, h("div", { key: '4c3b10e2cfcc7574500651b78056ef221f22eba0', class: "avatar", style: { backgroundImage: `url(${this.authorAvatar})` } }), h("div", { key: '789af2c88e818faf8f7b61653c94929f61f23636', class: "name" }, this.authorName)))));
24
26
  }
25
27
  };
26
28
  UrNovl.style = UrNovlStyle0;
@@ -1 +1 @@
1
- {"file":"ur-novl.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,4xDAA4xD,CAAC;AAC/yD,qBAAe,SAAS;;MCMX,MAAM;;;;yBAGH,YAAY;;qBAMhB,CAAC;qBAGD,CAAC;yBAGG,IAAI;;;;yBAYJ,KAAK;qBAGM,IAAI;;IAK3B,MAAM;QACF,QACI,EAAC,IAAI,uDACD,gEAAS,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,EAAE,IACtE,CAAC,IAAI,CAAC,SAAS,IAAI,4DAAK,KAAK,EAAC,SAAS,IAAC,mEAAc,CAAM,EAC5D,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,OAAO,IAAC,+DAAO,IAAI,CAAC,KAAK,CAAQ,CAAM,CAC7D,EACV,gEAAS,KAAK,EAAC,MAAM,IACjB,4DAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAO,EACxC,IAAI,CAAC,SAAS;YACX,4DAAK,KAAK,EAAC,OAAO,IACd,4DAAK,KAAK,EAAC,OAAO,IAAC,8DAAK,4DAAI,IAAI,CAAC,KAAK,CAAK,WAAY,EAAA,4DAAK,KAAK,EAAC,KAAK,aAAQ,CAAM,EACrF,4DAAK,KAAK,EAAC,OAAO,IAAC,4DAAI,IAAI,CAAC,KAAK,CAAK,WAAY,CAChD,EAEV,4DAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,eAAe,CAAO,EACrD,4DAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,IACvD,4DAAK,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,YAAY,GAAG,EAAE,GAAQ,EACnF,4DAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,UAAU,CAAO,CACvC,CACA,CACP,EACT;KACL;;;;;;","names":[],"sources":["src/components/ur-novl/ur-novl.css?tag=ur-novl&encapsulation=shadow","src/components/ur-novl/ur-novl.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n width: 270px;\n box-sizing: content-box;\n}\n\n:host .cover {\n height: 120px;\n border-radius: 16px 16px 0px 0px;\n background-color: #131519;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: 50%;\n position: relative;\n}\n\n:host .cover .ongoing {\n background-color: #ff3b01;\n height: 30px;\n width: 30px;\n border-radius: 50%;\n position: absolute;\n top: 10px;\n left: 11.44px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-weight: 700;\n text-transform: uppercase;\n font-size: 14px;\n}\n\n:host .cover .ongoing span {\n position: relative;\n left: -0.5px;\n top: -1px;\n}\n\n:host .cover .price {\n position: absolute;\n top: 10px;\n right: 11.44px;\n border-radius: 25px;\n background: rgba(43, 43, 39, 0.95);\n padding: 10px 24px;\n box-sizing: border-box;\n line-height: 12px;\n font-weight: 700;\n font-size: 14px;\n color: #fff;\n}\n\n:host .info {\n padding: 7px 11px;\n background: #F7F7F7;\n box-sizing: border-box;\n}\n\n:host .info .title {\n color: #171818;\n font-size: 14px;\n font-style: normal;\n font-weight: 700;\n line-height: 18px;\n display: -webkit-box;\n -webkit-line-clamp: 2; /* Number of lines */\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 7px;\n}\n\n:host .info .stats {\n font-size: 11px;\n font-weight: 400;\n line-height: 12px;\n display: flex;\n flex-direction: row;\n margin-bottom: 7px;\n}\n\n:host .info .stats b {\n font-weight: 700;\n}\n\n:host .info .stats .likes {\n display: flex;\n}\n\n:host .info .stats .likes .dot {\n margin: 0 5px;\n}\n\n:host .info .description {\n color: #171818;\n font-size: 11px;\n font-style: normal;\n font-weight: 400;\n line-height: 18px; /* 163.636% */\n display: -webkit-box;\n -webkit-line-clamp: 2; /* Number of lines */\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 7px;\n}\n\n:host .info .author {\n height: 32px;\n display: flex;\n align-items: center;\n font-size: 11px;\n font-style: normal;\n font-weight: 600;\n color: #1D1B20;\n cursor: pointer;\n}\n\n:host .info .author .avatar {\n height: 32px;\n width: 32px;\n border-radius: 50%;\n background-size: cover;\n}\n\n:host .info .author .name {\n margin-left: 8px;\n}\n","import { Event, Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'ur-novl',\n styleUrl: 'ur-novl.css',\n shadow: true,\n})\nexport class UrNovl {\n\n @Prop()\n novlTitle = 'Novl title'\n\n @Prop()\n novlCover;\n\n @Prop()\n likes = 0;\n\n @Prop()\n views = 0;\n\n @Prop()\n showStats = true;\n\n @Prop()\n novlDescription;\n\n @Prop()\n authorAvatar;\n\n @Prop()\n authorName;\n\n @Prop()\n published = false;\n\n @Prop()\n price: string | null = null;\n\n @Event()\n authorClicked;\n\n render() {\n return (\n <Host>\n <section class='cover' style={{ backgroundImage: `url(${this.novlCover})` }}>\n {!this.published && <div class=\"ongoing\"><span>O</span></div>}\n {!!this.price && <div class=\"price\"><span>{this.price}</span></div>}\n </section>\n <section class='info'>\n <div class='title'>{this.novlTitle}</div>\n {this.showStats &&\n <div class='stats'>\n <div class=\"likes\"><div><b>{this.likes}</b> Likes</div><div class=\"dot\">·</div></div>\n <div class=\"views\"><b>{this.views}</b> Views</div>\n </div>\n }\n <div class=\"description\">{this.novlDescription}</div>\n <div class=\"author\" onClick={_ => this.authorClicked.emit()}>\n <div class=\"avatar\" style={{ backgroundImage: `url(${this.authorAvatar})` }}></div>\n <div class=\"name\">{this.authorName}</div>\n </div>\n </section>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"ur-novl.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,krEAAkrE,CAAC;AACrsE,qBAAe,SAAS;;MCMX,MAAM;;;;yBAGH,YAAY;;qBAMhB,CAAC;qBAGD,CAAC;yBAGG,IAAI;;;;yBAYJ,KAAK;qBAGM,IAAI;+BAGM,IAAI;6BAGN,IAAI;;IAKnC,MAAM;QACF,QACI,EAAC,IAAI,uDACD,gEAAS,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,EAAE,IACtE,CAAC,IAAI,CAAC,SAAS,IAAI,4DAAK,KAAK,EAAC,SAAS,IAAC,mEAAc,CAAM,EAC5D,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,OAAO,IAAC,+DAAO,IAAI,CAAC,KAAK,CAAQ,CAAM,EAClE,CAAC,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,aAAa,IAAI,4DAAK,KAAK,EAAC,WAAW,IACnE,4DAAK,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,eAAe,GAAG,EAAE,GAAQ,EACtF,4DAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,CAAO,CAC1C,CACA,EACV,gEAAS,KAAK,EAAC,MAAM,IACjB,4DAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAO,EACxC,IAAI,CAAC,SAAS;YACX,4DAAK,KAAK,EAAC,OAAO,IACd,4DAAK,KAAK,EAAC,OAAO,IAAC,8DAAK,4DAAI,IAAI,CAAC,KAAK,CAAK,WAAY,EAAA,4DAAK,KAAK,EAAC,KAAK,aAAQ,CAAM,EACrF,4DAAK,KAAK,EAAC,OAAO,IAAC,4DAAI,IAAI,CAAC,KAAK,CAAK,WAAY,CAChD,EAEV,4DAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,eAAe,CAAO,EACrD,4DAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,IACvD,4DAAK,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,YAAY,GAAG,EAAE,GAAQ,EACnF,4DAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,UAAU,CAAO,CACvC,CACA,CACP,EACT;KACL;;;;;;","names":[],"sources":["src/components/ur-novl/ur-novl.css?tag=ur-novl&encapsulation=shadow","src/components/ur-novl/ur-novl.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n width: 270px;\n box-sizing: content-box;\n}\n\n:host .cover {\n height: 120px;\n border-radius: 16px 16px 0px 0px;\n background-color: #131519;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: 50%;\n position: relative;\n}\n\n:host .cover .ongoing {\n background-color: #ff3b01;\n height: 30px;\n width: 30px;\n border-radius: 50%;\n position: absolute;\n top: 10px;\n left: 11.44px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-weight: 700;\n text-transform: uppercase;\n font-size: 14px;\n}\n\n:host .cover .ongoing span {\n position: relative;\n left: -0.5px;\n top: -1px;\n}\n\n:host .cover .price {\n position: absolute;\n top: 10px;\n right: 11.44px;\n border-radius: 25px;\n background: rgba(43, 43, 39, 0.95);\n padding: 10px 24px;\n box-sizing: border-box;\n line-height: 12px;\n font-weight: 700;\n font-size: 14px;\n color: #fff;\n}\n\n:host .cover .publisher {\n position: absolute;\n bottom: 0;\n height: 40px;\n background-color: rgba(0, 0, 0, 0.30);\n display: flex;\n align-items: center;\n width: 100%;\n padding: 4px 11.44px;\n box-sizing: border-box;\n}\n\n:host .cover .publisher .avatar {\n height: 32px;\n width: 32px;\n border-radius: 50%;\n background-size: cover;\n}\n\n:host .cover .publisher .name {\n font-size: 12px;\n font-style: normal;\n font-weight: 600;\n line-height: 12px; /* 100% */\n color: #fff;\n margin-left: 7.56px;\n}\n\n:host .info {\n padding: 7px 11px;\n background: #F7F7F7;\n box-sizing: border-box;\n}\n\n:host .info .title {\n color: #171818;\n font-size: 14px;\n font-style: normal;\n font-weight: 700;\n line-height: 18px;\n display: -webkit-box;\n -webkit-line-clamp: 2; /* Number of lines */\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 7px;\n}\n\n:host .info .stats {\n font-size: 11px;\n font-weight: 400;\n line-height: 12px;\n display: flex;\n flex-direction: row;\n margin-bottom: 7px;\n}\n\n:host .info .stats b {\n font-weight: 700;\n}\n\n:host .info .stats .likes {\n display: flex;\n}\n\n:host .info .stats .likes .dot {\n margin: 0 5px;\n}\n\n:host .info .description {\n color: #171818;\n font-size: 11px;\n font-style: normal;\n font-weight: 400;\n line-height: 18px; /* 163.636% */\n display: -webkit-box;\n -webkit-line-clamp: 2; /* Number of lines */\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 7px;\n}\n\n:host .info .author {\n height: 32px;\n display: flex;\n align-items: center;\n font-size: 11px;\n font-style: normal;\n font-weight: 600;\n color: #1D1B20;\n cursor: pointer;\n}\n\n:host .info .author .avatar {\n height: 32px;\n width: 32px;\n border-radius: 50%;\n background-size: cover;\n}\n\n:host .info .author .name {\n margin-left: 8px;\n}\n","import { Event, Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'ur-novl',\n styleUrl: 'ur-novl.css',\n shadow: true,\n})\nexport class UrNovl {\n\n @Prop()\n novlTitle = 'Novl title'\n\n @Prop()\n novlCover;\n\n @Prop()\n likes = 0;\n\n @Prop()\n views = 0;\n\n @Prop()\n showStats = true;\n\n @Prop()\n novlDescription;\n\n @Prop()\n authorAvatar;\n\n @Prop()\n authorName;\n\n @Prop()\n published = false;\n\n @Prop()\n price: string | null = null;\n\n @Prop()\n publisherAvatar: string | null = null;\n\n @Prop()\n publisherName: string | null = null;\n\n @Event()\n authorClicked;\n\n render() {\n return (\n <Host>\n <section class='cover' style={{ backgroundImage: `url(${this.novlCover})` }}>\n {!this.published && <div class=\"ongoing\"><span>O</span></div>}\n {!!this.price && <div class=\"price\"><span>{this.price}</span></div>}\n {!!this.publisherAvatar && this.publisherName && <div class=\"publisher\">\n <div class=\"avatar\" style={{ backgroundImage: `url(${this.publisherAvatar})` }}></div>\n <div class=\"name\">{this.publisherName}</div>\n </div>}\n </section>\n <section class='info'>\n <div class='title'>{this.novlTitle}</div>\n {this.showStats &&\n <div class='stats'>\n <div class=\"likes\"><div><b>{this.likes}</b> Likes</div><div class=\"dot\">·</div></div>\n <div class=\"views\"><b>{this.views}</b> Views</div>\n </div>\n }\n <div class=\"description\">{this.novlDescription}</div>\n <div class=\"author\" onClick={_ => this.authorClicked.emit()}>\n <div class=\"avatar\" style={{ backgroundImage: `url(${this.authorAvatar})` }}></div>\n <div class=\"name\">{this.authorName}</div>\n </div>\n </section>\n </Host>\n );\n }\n}\n"],"version":3}
@@ -16,7 +16,7 @@ var patchBrowser = () => {
16
16
 
17
17
  patchBrowser().then(async (options) => {
18
18
  await globalScripts();
19
- return bootstrapLazy([["ur-novl",[[1,"ur-novl",{"novlTitle":[1,"novl-title"],"novlCover":[8,"novl-cover"],"likes":[2],"views":[2],"showStats":[4,"show-stats"],"novlDescription":[8,"novl-description"],"authorAvatar":[8,"author-avatar"],"authorName":[8,"author-name"],"published":[4],"price":[1]}]]]], options);
19
+ return bootstrapLazy([["ur-novl",[[1,"ur-novl",{"novlTitle":[1,"novl-title"],"novlCover":[8,"novl-cover"],"likes":[2],"views":[2],"showStats":[4,"show-stats"],"novlDescription":[8,"novl-description"],"authorAvatar":[8,"author-avatar"],"authorName":[8,"author-name"],"published":[4],"price":[1],"publisherAvatar":[1,"publisher-avatar"],"publisherName":[1,"publisher-name"]}]]]], options);
20
20
  });
21
21
 
22
22
  //# sourceMappingURL=urnovl-web-components.js.map
@@ -9,6 +9,8 @@ export declare class UrNovl {
9
9
  authorName: any;
10
10
  published: boolean;
11
11
  price: string | null;
12
+ publisherAvatar: string | null;
13
+ publisherName: string | null;
12
14
  authorClicked: any;
13
15
  render(): any;
14
16
  }
@@ -15,6 +15,8 @@ export namespace Components {
15
15
  "novlTitle": string;
16
16
  "price": string | null;
17
17
  "published": boolean;
18
+ "publisherAvatar": string | null;
19
+ "publisherName": string | null;
18
20
  "showStats": boolean;
19
21
  "views": number;
20
22
  }
@@ -56,6 +58,8 @@ declare namespace LocalJSX {
56
58
  "onAuthorClicked"?: (event: UrNovlCustomEvent<any>) => void;
57
59
  "price"?: string | null;
58
60
  "published"?: boolean;
61
+ "publisherAvatar"?: string | null;
62
+ "publisherName"?: string | null;
59
63
  "showStats"?: boolean;
60
64
  "views"?: number;
61
65
  }
@@ -0,0 +1,2 @@
1
+ import{r as e,c as i,h as t,H as o}from"./p-beadb9ca.js";const s=":host{display:flex;flex-direction:column;width:270px;box-sizing:content-box}:host .cover{height:120px;border-radius:16px 16px 0px 0px;background-color:#131519;background-repeat:no-repeat;background-size:cover;background-position:50%;position:relative}:host .cover .ongoing{background-color:#ff3b01;height:30px;width:30px;border-radius:50%;position:absolute;top:10px;left:11.44px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;text-transform:uppercase;font-size:14px}:host .cover .ongoing span{position:relative;left:-0.5px;top:-1px}:host .cover .price{position:absolute;top:10px;right:11.44px;border-radius:25px;background:rgba(43, 43, 39, 0.95);padding:10px 24px;box-sizing:border-box;line-height:12px;font-weight:700;font-size:14px;color:#fff}:host .cover .publisher{position:absolute;bottom:0;height:40px;background-color:rgba(0, 0, 0, 0.30);display:flex;align-items:center;width:100%;padding:4px 11.44px;box-sizing:border-box}:host .cover .publisher .avatar{height:32px;width:32px;border-radius:50%;background-size:cover}:host .cover .publisher .name{font-size:12px;font-style:normal;font-weight:600;line-height:12px;color:#fff;margin-left:7.56px}:host .info{padding:7px 11px;background:#F7F7F7;box-sizing:border-box}:host .info .title{color:#171818;font-size:14px;font-style:normal;font-weight:700;line-height:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px}:host .info .stats{font-size:11px;font-weight:400;line-height:12px;display:flex;flex-direction:row;margin-bottom:7px}:host .info .stats b{font-weight:700}:host .info .stats .likes{display:flex}:host .info .stats .likes .dot{margin:0 5px}:host .info .description{color:#171818;font-size:11px;font-style:normal;font-weight:400;line-height:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px}:host .info .author{height:32px;display:flex;align-items:center;font-size:11px;font-style:normal;font-weight:600;color:#1D1B20;cursor:pointer}:host .info .author .avatar{height:32px;width:32px;border-radius:50%;background-size:cover}:host .info .author .name{margin-left:8px}";const a=s;const c=class{constructor(t){e(this,t);this.authorClicked=i(this,"authorClicked",7);this.novlTitle="Novl title";this.novlCover=undefined;this.likes=0;this.views=0;this.showStats=true;this.novlDescription=undefined;this.authorAvatar=undefined;this.authorName=undefined;this.published=false;this.price=null;this.publisherAvatar=null;this.publisherName=null}render(){return t(o,{key:"a9fc7d41282bfebcd6549ae2a560ce10876734ec"},t("section",{key:"ff3850d955db39844a2519405cea469b991223f6",class:"cover",style:{backgroundImage:`url(${this.novlCover})`}},!this.published&&t("div",{key:"e673d319d547d4c7a8db4ee24af3c54c22655a46",class:"ongoing"},t("span",{key:"3ffd36f966d5e2467d8b909493fa1eefec3cdf22"},"O")),!!this.price&&t("div",{key:"a7b2db6f4fdcde900f33af3e281a2b0c2988ea83",class:"price"},t("span",{key:"8cb4c327d40be3360572c09fc172a41e182b9f1d"},this.price)),!!this.publisherAvatar&&this.publisherName&&t("div",{key:"4b023744a64e54d4ce0378e1ff6500d1aff26c5e",class:"publisher"},t("div",{key:"d1b3f8a57182de4d5950ddf0f7dbcc23926d523a",class:"avatar",style:{backgroundImage:`url(${this.publisherAvatar})`}}),t("div",{key:"54e9de7f5542820b7426c6f28813085d18878475",class:"name"},this.publisherName))),t("section",{key:"c4d8bc26bee86d05fb0169535287245bff8495d3",class:"info"},t("div",{key:"1f7022acd84bbc9138756318b258b3754179152d",class:"title"},this.novlTitle),this.showStats&&t("div",{key:"b12682a7a4a8e3f8a0585fd1ea5c35c104f62016",class:"stats"},t("div",{key:"227a98b98596510d19c75106f53ad717ae93888d",class:"likes"},t("div",{key:"e5dd6254a45368c97ebec94f827f20a7f1b5b2c3"},t("b",{key:"ed7e399b0b16787f9bc2ecbdf0ee6a34a5925f6f"},this.likes)," Likes"),t("div",{key:"ea6157c3c3e286ead0bcddb6fe71512f043d076d",class:"dot"},"·")),t("div",{key:"6cb8f3b35f849d544346a12335f0c8276e4dc8a8",class:"views"},t("b",{key:"8ce3c1c4720fa2fdb720b07bb9fda7e08e90fa42"},this.views)," Views")),t("div",{key:"3f7c35a3c208f9a9012aac06e47a6b6a2f5c2b2c",class:"description"},this.novlDescription),t("div",{key:"57761205efc3a3878446d4cef6805213738b3621",class:"author",onClick:e=>this.authorClicked.emit()},t("div",{key:"4c3b10e2cfcc7574500651b78056ef221f22eba0",class:"avatar",style:{backgroundImage:`url(${this.authorAvatar})`}}),t("div",{key:"789af2c88e818faf8f7b61653c94929f61f23636",class:"name"},this.authorName))))}};c.style=a;export{c as ur_novl};
2
+ //# sourceMappingURL=p-a6783e33.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["urNovlCss","UrNovlStyle0","UrNovl","render","h","Host","key","class","style","backgroundImage","this","novlCover","published","price","publisherAvatar","publisherName","novlTitle","showStats","likes","views","novlDescription","onClick","_","authorClicked","emit","authorAvatar","authorName"],"sources":["src/components/ur-novl/ur-novl.css?tag=ur-novl&encapsulation=shadow","src/components/ur-novl/ur-novl.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n width: 270px;\n box-sizing: content-box;\n}\n\n:host .cover {\n height: 120px;\n border-radius: 16px 16px 0px 0px;\n background-color: #131519;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: 50%;\n position: relative;\n}\n\n:host .cover .ongoing {\n background-color: #ff3b01;\n height: 30px;\n width: 30px;\n border-radius: 50%;\n position: absolute;\n top: 10px;\n left: 11.44px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-weight: 700;\n text-transform: uppercase;\n font-size: 14px;\n}\n\n:host .cover .ongoing span {\n position: relative;\n left: -0.5px;\n top: -1px;\n}\n\n:host .cover .price {\n position: absolute;\n top: 10px;\n right: 11.44px;\n border-radius: 25px;\n background: rgba(43, 43, 39, 0.95);\n padding: 10px 24px;\n box-sizing: border-box;\n line-height: 12px;\n font-weight: 700;\n font-size: 14px;\n color: #fff;\n}\n\n:host .cover .publisher {\n position: absolute;\n bottom: 0;\n height: 40px;\n background-color: rgba(0, 0, 0, 0.30);\n display: flex;\n align-items: center;\n width: 100%;\n padding: 4px 11.44px;\n box-sizing: border-box;\n}\n\n:host .cover .publisher .avatar {\n height: 32px;\n width: 32px;\n border-radius: 50%;\n background-size: cover;\n}\n\n:host .cover .publisher .name {\n font-size: 12px;\n font-style: normal;\n font-weight: 600;\n line-height: 12px; /* 100% */\n color: #fff;\n margin-left: 7.56px;\n}\n\n:host .info {\n padding: 7px 11px;\n background: #F7F7F7;\n box-sizing: border-box;\n}\n\n:host .info .title {\n color: #171818;\n font-size: 14px;\n font-style: normal;\n font-weight: 700;\n line-height: 18px;\n display: -webkit-box;\n -webkit-line-clamp: 2; /* Number of lines */\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 7px;\n}\n\n:host .info .stats {\n font-size: 11px;\n font-weight: 400;\n line-height: 12px;\n display: flex;\n flex-direction: row;\n margin-bottom: 7px;\n}\n\n:host .info .stats b {\n font-weight: 700;\n}\n\n:host .info .stats .likes {\n display: flex;\n}\n\n:host .info .stats .likes .dot {\n margin: 0 5px;\n}\n\n:host .info .description {\n color: #171818;\n font-size: 11px;\n font-style: normal;\n font-weight: 400;\n line-height: 18px; /* 163.636% */\n display: -webkit-box;\n -webkit-line-clamp: 2; /* Number of lines */\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 7px;\n}\n\n:host .info .author {\n height: 32px;\n display: flex;\n align-items: center;\n font-size: 11px;\n font-style: normal;\n font-weight: 600;\n color: #1D1B20;\n cursor: pointer;\n}\n\n:host .info .author .avatar {\n height: 32px;\n width: 32px;\n border-radius: 50%;\n background-size: cover;\n}\n\n:host .info .author .name {\n margin-left: 8px;\n}\n","import { Event, Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'ur-novl',\n styleUrl: 'ur-novl.css',\n shadow: true,\n})\nexport class UrNovl {\n\n @Prop()\n novlTitle = 'Novl title'\n\n @Prop()\n novlCover;\n\n @Prop()\n likes = 0;\n\n @Prop()\n views = 0;\n\n @Prop()\n showStats = true;\n\n @Prop()\n novlDescription;\n\n @Prop()\n authorAvatar;\n\n @Prop()\n authorName;\n\n @Prop()\n published = false;\n\n @Prop()\n price: string | null = null;\n\n @Prop()\n publisherAvatar: string | null = null;\n\n @Prop()\n publisherName: string | null = null;\n\n @Event()\n authorClicked;\n\n render() {\n return (\n <Host>\n <section class='cover' style={{ backgroundImage: `url(${this.novlCover})` }}>\n {!this.published && <div class=\"ongoing\"><span>O</span></div>}\n {!!this.price && <div class=\"price\"><span>{this.price}</span></div>}\n {!!this.publisherAvatar && this.publisherName && <div class=\"publisher\">\n <div class=\"avatar\" style={{ backgroundImage: `url(${this.publisherAvatar})` }}></div>\n <div class=\"name\">{this.publisherName}</div>\n </div>}\n </section>\n <section class='info'>\n <div class='title'>{this.novlTitle}</div>\n {this.showStats &&\n <div class='stats'>\n <div class=\"likes\"><div><b>{this.likes}</b> Likes</div><div class=\"dot\">·</div></div>\n <div class=\"views\"><b>{this.views}</b> Views</div>\n </div>\n }\n <div class=\"description\">{this.novlDescription}</div>\n <div class=\"author\" onClick={_ => this.authorClicked.emit()}>\n <div class=\"avatar\" style={{ backgroundImage: `url(${this.authorAvatar})` }}></div>\n <div class=\"name\">{this.authorName}</div>\n </div>\n </section>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAY,mrEAClB,MAAAC,EAAeD,E,MCMFE,EAAM,M,qFAGH,a,oCAMJ,E,WAGA,E,eAGI,K,oGAYA,M,WAGW,K,qBAGU,K,mBAGF,I,CAK/B,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,WAAAE,IAAA,2CAASC,MAAM,QAAQC,MAAO,CAAEC,gBAAiB,OAAOC,KAAKC,gBACvDD,KAAKE,WAAaR,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WAAUH,EAAA,QAAAE,IAAA,oDACtCI,KAAKG,OAAST,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SAAQH,EAAA,QAAAE,IAAA,4CAAOI,KAAKG,UAC7CH,KAAKI,iBAAmBJ,KAAKK,eAAiBX,EAAA,OAAAE,IAAA,2CAAKC,MAAM,aACxDH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SAASC,MAAO,CAAEC,gBAAiB,OAAOC,KAAKI,sBAC1DV,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQG,KAAKK,iBAGhCX,EAAA,WAAAE,IAAA,2CAASC,MAAM,QACXH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SAASG,KAAKM,WACxBN,KAAKO,WACFb,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SACPH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SAAQH,EAAA,OAAAE,IAAA,4CAAKF,EAAA,KAAAE,IAAA,4CAAII,KAAKQ,OAAU,UAAYd,EAAA,OAAAE,IAAA,2CAAKC,MAAM,OAAK,MACvEH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SAAQH,EAAA,KAAAE,IAAA,4CAAII,KAAKS,OAAU,WAG9Cf,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eAAeG,KAAKU,iBAC/BhB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SAASc,QAASC,GAAKZ,KAAKa,cAAcC,QACjDpB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SAASC,MAAO,CAAEC,gBAAiB,OAAOC,KAAKe,mBAC1DrB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQG,KAAKgB,c","ignoreList":[]}
@@ -1,2 +1,2 @@
1
- import{p as a,b as o}from"./p-beadb9ca.js";export{s as setNonce}from"./p-beadb9ca.js";import{g as t}from"./p-e1255160.js";var r=()=>{const o=import.meta.url;const t={};if(o!==""){t.resourcesUrl=new URL(".",o).href}return a(t)};r().then((async a=>{await t();return o([["p-a3a81342",[[1,"ur-novl",{novlTitle:[1,"novl-title"],novlCover:[8,"novl-cover"],likes:[2],views:[2],showStats:[4,"show-stats"],novlDescription:[8,"novl-description"],authorAvatar:[8,"author-avatar"],authorName:[8,"author-name"],published:[4],price:[1]}]]]],a)}));
1
+ import{p as a,b as r}from"./p-beadb9ca.js";export{s as setNonce}from"./p-beadb9ca.js";import{g as e}from"./p-e1255160.js";var t=()=>{const r=import.meta.url;const e={};if(r!==""){e.resourcesUrl=new URL(".",r).href}return a(e)};t().then((async a=>{await e();return r([["p-a6783e33",[[1,"ur-novl",{novlTitle:[1,"novl-title"],novlCover:[8,"novl-cover"],likes:[2],views:[2],showStats:[4,"show-stats"],novlDescription:[8,"novl-description"],authorAvatar:[8,"author-avatar"],authorName:[8,"author-name"],published:[4],price:[1],publisherAvatar:[1,"publisher-avatar"],publisherName:[1,"publisher-name"]}]]]],a)}));
2
2
  //# sourceMappingURL=urnovl-web-components.esm.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","novlTitle","novlCover","likes","views","showStats","novlDescription","authorAvatar","authorName","published","price"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.20.0 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"0HAOA,IAAIA,EAAe,KAUjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACrBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACjD,CACE,OAAOC,EAAeJ,EAAK,EClB7BH,IAAeQ,MAAKC,MAAOC,UACnBC,IACN,OAAOC,EAAc,6BAA4B,CAAEC,UAAS,iBAAAC,UAAA,iBAAAC,MAAA,IAAAC,MAAA,IAAAC,UAAA,iBAAAC,gBAAA,uBAAAC,aAAA,oBAAAC,WAAA,kBAAAC,UAAA,IAAAC,MAAA,SAAAZ,EAAA","ignoreList":[]}
1
+ {"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","novlTitle","novlCover","likes","views","showStats","novlDescription","authorAvatar","authorName","published","price","publisherAvatar","publisherName"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.20.0 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"0HAOA,IAAIA,EAAe,KAUjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACrBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACjD,CACE,OAAOC,EAAeJ,EAAK,EClB7BH,IAAeQ,MAAKC,MAAOC,UACnBC,IACN,OAAOC,EAAc,6BAA4B,CAAEC,UAAS,iBAAAC,UAAA,iBAAAC,MAAA,IAAAC,MAAA,IAAAC,UAAA,iBAAAC,gBAAA,uBAAAC,aAAA,oBAAAC,WAAA,kBAAAC,UAAA,IAAAC,MAAA,IAAAC,gBAAA,uBAAAC,cAAA,0BAAAd,EAAA","ignoreList":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "urnovl-web-components",
3
- "version": "0.0.18",
3
+ "version": "0.0.19",
4
4
  "description": "Web components for Urnovl",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
@@ -1,2 +0,0 @@
1
- import{r as e,c as t,h as i,H as o}from"./p-beadb9ca.js";const s=":host{display:flex;flex-direction:column;width:270px;box-sizing:content-box}:host .cover{height:120px;border-radius:16px 16px 0px 0px;background-color:#131519;background-repeat:no-repeat;background-size:cover;background-position:50%;position:relative}:host .cover .ongoing{background-color:#ff3b01;height:30px;width:30px;border-radius:50%;position:absolute;top:10px;left:11.44px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;text-transform:uppercase;font-size:14px}:host .cover .ongoing span{position:relative;left:-0.5px;top:-1px}:host .cover .price{position:absolute;top:10px;right:11.44px;border-radius:25px;background:rgba(43, 43, 39, 0.95);padding:10px 24px;box-sizing:border-box;line-height:12px;font-weight:700;font-size:14px;color:#fff}:host .info{padding:7px 11px;background:#F7F7F7;box-sizing:border-box}:host .info .title{color:#171818;font-size:14px;font-style:normal;font-weight:700;line-height:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px}:host .info .stats{font-size:11px;font-weight:400;line-height:12px;display:flex;flex-direction:row;margin-bottom:7px}:host .info .stats b{font-weight:700}:host .info .stats .likes{display:flex}:host .info .stats .likes .dot{margin:0 5px}:host .info .description{color:#171818;font-size:11px;font-style:normal;font-weight:400;line-height:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px}:host .info .author{height:32px;display:flex;align-items:center;font-size:11px;font-style:normal;font-weight:600;color:#1D1B20;cursor:pointer}:host .info .author .avatar{height:32px;width:32px;border-radius:50%;background-size:cover}:host .info .author .name{margin-left:8px}";const a=s;const d=class{constructor(i){e(this,i);this.authorClicked=t(this,"authorClicked",7);this.novlTitle="Novl title";this.novlCover=undefined;this.likes=0;this.views=0;this.showStats=true;this.novlDescription=undefined;this.authorAvatar=undefined;this.authorName=undefined;this.published=false;this.price=null}render(){return i(o,{key:"437dd313e44ad8d358a047638a91a59759b78128"},i("section",{key:"58e8c4d44746d8488277977e2623cfaf9552729e",class:"cover",style:{backgroundImage:`url(${this.novlCover})`}},!this.published&&i("div",{key:"d2b17ffdfec22a01735517cae61af65aca6076e8",class:"ongoing"},i("span",{key:"9113b0e3d6c15cc8b70d4dcd006d9c206d3b74e6"},"O")),!!this.price&&i("div",{key:"240839b34a3ce3d7ba9429e8e819c33e2b07d939",class:"price"},i("span",{key:"b0ff796332d378009f879006afc78390b25d56ec"},this.price))),i("section",{key:"c13300def2549abaa9538f36884a7bd277203307",class:"info"},i("div",{key:"d7437549eedabadf0bbd014b9e47f76361884057",class:"title"},this.novlTitle),this.showStats&&i("div",{key:"2375e29325b146402ca8294e1636a76ee516eb3e",class:"stats"},i("div",{key:"1458609b9790e69fbe8e922822d6c9baadd8cf3b",class:"likes"},i("div",{key:"3cd5619712b16ac645cd768505340adf68cd3f9c"},i("b",{key:"5396b926468378a414e8a4d160c29e1a2b11b64c"},this.likes)," Likes"),i("div",{key:"9b02eabc9f47440ec24e5f688a1213fe31871605",class:"dot"},"·")),i("div",{key:"bc87d42a758a8e78977f2a98c4e2d7e6981e9bb7",class:"views"},i("b",{key:"973c188224e7e3cad03c3f22e0aa71d6ade29aaf"},this.views)," Views")),i("div",{key:"496c0fdd45ba95c91a356b980ac921f89a4256d1",class:"description"},this.novlDescription),i("div",{key:"0075d46bb6908065f870fe0b1cb50beaceb44ce3",class:"author",onClick:e=>this.authorClicked.emit()},i("div",{key:"55da829af52778fc646b0e806435394ee7b64196",class:"avatar",style:{backgroundImage:`url(${this.authorAvatar})`}}),i("div",{key:"13ed489fb41aa89b092cacb5a7d1df417f7548f4",class:"name"},this.authorName))))}};d.style=a;export{d as ur_novl};
2
- //# sourceMappingURL=p-a3a81342.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["urNovlCss","UrNovlStyle0","UrNovl","render","h","Host","key","class","style","backgroundImage","this","novlCover","published","price","novlTitle","showStats","likes","views","novlDescription","onClick","_","authorClicked","emit","authorAvatar","authorName"],"sources":["src/components/ur-novl/ur-novl.css?tag=ur-novl&encapsulation=shadow","src/components/ur-novl/ur-novl.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n width: 270px;\n box-sizing: content-box;\n}\n\n:host .cover {\n height: 120px;\n border-radius: 16px 16px 0px 0px;\n background-color: #131519;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: 50%;\n position: relative;\n}\n\n:host .cover .ongoing {\n background-color: #ff3b01;\n height: 30px;\n width: 30px;\n border-radius: 50%;\n position: absolute;\n top: 10px;\n left: 11.44px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-weight: 700;\n text-transform: uppercase;\n font-size: 14px;\n}\n\n:host .cover .ongoing span {\n position: relative;\n left: -0.5px;\n top: -1px;\n}\n\n:host .cover .price {\n position: absolute;\n top: 10px;\n right: 11.44px;\n border-radius: 25px;\n background: rgba(43, 43, 39, 0.95);\n padding: 10px 24px;\n box-sizing: border-box;\n line-height: 12px;\n font-weight: 700;\n font-size: 14px;\n color: #fff;\n}\n\n:host .info {\n padding: 7px 11px;\n background: #F7F7F7;\n box-sizing: border-box;\n}\n\n:host .info .title {\n color: #171818;\n font-size: 14px;\n font-style: normal;\n font-weight: 700;\n line-height: 18px;\n display: -webkit-box;\n -webkit-line-clamp: 2; /* Number of lines */\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 7px;\n}\n\n:host .info .stats {\n font-size: 11px;\n font-weight: 400;\n line-height: 12px;\n display: flex;\n flex-direction: row;\n margin-bottom: 7px;\n}\n\n:host .info .stats b {\n font-weight: 700;\n}\n\n:host .info .stats .likes {\n display: flex;\n}\n\n:host .info .stats .likes .dot {\n margin: 0 5px;\n}\n\n:host .info .description {\n color: #171818;\n font-size: 11px;\n font-style: normal;\n font-weight: 400;\n line-height: 18px; /* 163.636% */\n display: -webkit-box;\n -webkit-line-clamp: 2; /* Number of lines */\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 7px;\n}\n\n:host .info .author {\n height: 32px;\n display: flex;\n align-items: center;\n font-size: 11px;\n font-style: normal;\n font-weight: 600;\n color: #1D1B20;\n cursor: pointer;\n}\n\n:host .info .author .avatar {\n height: 32px;\n width: 32px;\n border-radius: 50%;\n background-size: cover;\n}\n\n:host .info .author .name {\n margin-left: 8px;\n}\n","import { Event, Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'ur-novl',\n styleUrl: 'ur-novl.css',\n shadow: true,\n})\nexport class UrNovl {\n\n @Prop()\n novlTitle = 'Novl title'\n\n @Prop()\n novlCover;\n\n @Prop()\n likes = 0;\n\n @Prop()\n views = 0;\n\n @Prop()\n showStats = true;\n\n @Prop()\n novlDescription;\n\n @Prop()\n authorAvatar;\n\n @Prop()\n authorName;\n\n @Prop()\n published = false;\n\n @Prop()\n price: string | null = null;\n\n @Event()\n authorClicked;\n\n render() {\n return (\n <Host>\n <section class='cover' style={{ backgroundImage: `url(${this.novlCover})` }}>\n {!this.published && <div class=\"ongoing\"><span>O</span></div>}\n {!!this.price && <div class=\"price\"><span>{this.price}</span></div>}\n </section>\n <section class='info'>\n <div class='title'>{this.novlTitle}</div>\n {this.showStats &&\n <div class='stats'>\n <div class=\"likes\"><div><b>{this.likes}</b> Likes</div><div class=\"dot\">·</div></div>\n <div class=\"views\"><b>{this.views}</b> Views</div>\n </div>\n }\n <div class=\"description\">{this.novlDescription}</div>\n <div class=\"author\" onClick={_ => this.authorClicked.emit()}>\n <div class=\"avatar\" style={{ backgroundImage: `url(${this.authorAvatar})` }}></div>\n <div class=\"name\">{this.authorName}</div>\n </div>\n </section>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAY,6xDAClB,MAAAC,EAAeD,E,MCMFE,EAAM,M,qFAGH,a,oCAMJ,E,WAGA,E,eAGI,K,oGAYA,M,WAGW,I,CAKvB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,WAAAE,IAAA,2CAASC,MAAM,QAAQC,MAAO,CAAEC,gBAAiB,OAAOC,KAAKC,gBACvDD,KAAKE,WAAaR,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WAAUH,EAAA,QAAAE,IAAA,oDACtCI,KAAKG,OAAST,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SAAQH,EAAA,QAAAE,IAAA,4CAAOI,KAAKG,SAEpDT,EAAA,WAAAE,IAAA,2CAASC,MAAM,QACXH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SAASG,KAAKI,WACxBJ,KAAKK,WACFX,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SACPH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SAAQH,EAAA,OAAAE,IAAA,4CAAKF,EAAA,KAAAE,IAAA,4CAAII,KAAKM,OAAU,UAAYZ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,OAAK,MACvEH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SAAQH,EAAA,KAAAE,IAAA,4CAAII,KAAKO,OAAU,WAG9Cb,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eAAeG,KAAKQ,iBAC/Bd,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SAASY,QAASC,GAAKV,KAAKW,cAAcC,QACjDlB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SAASC,MAAO,CAAEC,gBAAiB,OAAOC,KAAKa,mBAC1DnB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQG,KAAKc,c","ignoreList":[]}