urnovl-web-components 0.0.14 → 0.0.16

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  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"]}]]]], options);
+  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);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/ur-novl.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-02f21c56.js');
 
-const urNovlCss = ":host{display:flex;flex-direction:column;width:270px;height:253px;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%}:host .info{height:133px;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 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}";
 const UrNovlStyle0 = urNovlCss;
 
 const UrNovl = class {
@@ -19,10 +19,12 @@ const UrNovl = class {
         this.novlDescription = undefined;
         this.authorAvatar = undefined;
         this.authorName = undefined;
+        this.published = false;
+        this.price = null;
     }
     render() {
-        return (index.h(index.Host, { key: '74f57c9f92ec3f19f668c120f180b7d211b55666' }, index.h("section", { key: '566924b7ef4fb91271139488a7e1ff929b93a6d5', class: 'cover', style: { backgroundImage: `url(${this.novlCover})` } }), index.h("section", { key: '98107a5d2dd44fe9d2c003a9a80b2f896924ade5', class: 'info' }, index.h("div", { key: '428cc34fa11599480fbc8e8d14dcff2cfd326ca7', class: 'title' }, this.novlTitle), this.showStats &&
-            index.h("div", { key: 'db3169c4d5edd1d5b257ac037e4d1663602053fa', class: 'stats' }, index.h("div", { key: '21f462188ae9db816879570eec43e24e133ff233', class: "likes" }, index.h("div", { key: '48782cb33d1ae427a21c67fc7192d2e9945a5bda' }, index.h("b", { key: '00f92ea77a72e0b565da4a1ea4f00900a57ba524' }, this.likes), " Likes"), index.h("div", { key: '63226bcd46ebf22ffc8ca1e6da6f7e9652afbb60', class: "dot" }, "\u00B7")), index.h("div", { key: '62a6e66aca3961696c74a8909307a44ad2476c47', class: "views" }, index.h("b", { key: '50729fa8d7ef070095c3b08e093077958a8c4277' }, this.views), " Views")), index.h("div", { key: '88bed3948695aaf55edd44c8cd88e0d38421415b', class: "description" }, this.novlDescription), index.h("div", { key: '892135b9a30d74679d513c6e603df121edad860e', class: "author", onClick: _ => this.authorClicked.emit() }, index.h("div", { key: 'e075514ef8942b343248d05a95620acb76933701', class: "avatar", style: { backgroundImage: `url(${this.authorAvatar})` } }), index.h("div", { key: '6bf4e14d79ddaef394b6036d4cf8146e5ffbffd0', class: "name" }, this.authorName)))));
+        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 &&
+            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)))));
     }
 };
 UrNovl.style = UrNovlStyle0;

package/dist/cjs/ur-novl.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ur-novl.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,mxCAAmxC,CAAC;AACtyC,qBAAe,SAAS;;MCMX,MAAM;;;;yBAGH,YAAY;;qBAMhB,CAAC;qBAGD,CAAC;yBAGG,IAAI;;;;;IAchB,MAAM;QACF,QACIA,QAACC,UAAI,uDACDD,sEAAS,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,EAAE,GAAY,EACvFA,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    height: 253px;\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}\n\n:host .info {\n    height: 133px;\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    @Event()\n    authorClicked;\n\n    render() {\n        return (\n            <Host>\n                <section class='cover' style={{ backgroundImage: `url(${this.novlCover})` }}></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}
+{"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}

package/dist/cjs/urnovl-web-components.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  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"]}]]]], options);
+  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);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/ur-novl/ur-novl.css

@@ -2,7 +2,6 @@
     display: flex;
     flex-direction: column;
     width: 270px;
-    height: 253px;
     box-sizing: content-box;
 }
 
@@ -13,10 +12,47 @@
     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 {
-    height: 133px;
     padding: 7px 11px;
     background: #F7F7F7;
     box-sizing: border-box;

package/dist/collection/components/ur-novl/ur-novl.js

@@ -9,10 +9,12 @@ export class UrNovl {
         this.novlDescription = undefined;
         this.authorAvatar = undefined;
         this.authorName = undefined;
+        this.published = false;
+        this.price = null;
     }
     render() {
-        return (h(Host, { key: '74f57c9f92ec3f19f668c120f180b7d211b55666' }, h("section", { key: '566924b7ef4fb91271139488a7e1ff929b93a6d5', class: 'cover', style: { backgroundImage: `url(${this.novlCover})` } }), h("section", { key: '98107a5d2dd44fe9d2c003a9a80b2f896924ade5', class: 'info' }, h("div", { key: '428cc34fa11599480fbc8e8d14dcff2cfd326ca7', class: 'title' }, this.novlTitle), this.showStats &&
-            h("div", { key: 'db3169c4d5edd1d5b257ac037e4d1663602053fa', class: 'stats' }, h("div", { key: '21f462188ae9db816879570eec43e24e133ff233', class: "likes" }, h("div", { key: '48782cb33d1ae427a21c67fc7192d2e9945a5bda' }, h("b", { key: '00f92ea77a72e0b565da4a1ea4f00900a57ba524' }, this.likes), " Likes"), h("div", { key: '63226bcd46ebf22ffc8ca1e6da6f7e9652afbb60', class: "dot" }, "\u00B7")), h("div", { key: '62a6e66aca3961696c74a8909307a44ad2476c47', class: "views" }, h("b", { key: '50729fa8d7ef070095c3b08e093077958a8c4277' }, this.views), " Views")), h("div", { key: '88bed3948695aaf55edd44c8cd88e0d38421415b', class: "description" }, this.novlDescription), h("div", { key: '892135b9a30d74679d513c6e603df121edad860e', class: "author", onClick: _ => this.authorClicked.emit() }, h("div", { key: 'e075514ef8942b343248d05a95620acb76933701', class: "avatar", style: { backgroundImage: `url(${this.authorAvatar})` } }), h("div", { key: '6bf4e14d79ddaef394b6036d4cf8146e5ffbffd0', class: "name" }, this.authorName)))));
+        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 &&
+            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)))));
     }
     static get is() { return "ur-novl"; }
     static get encapsulation() { return "shadow"; }
@@ -167,6 +169,42 @@ export class UrNovl {
                 },
                 "attribute": "author-name",
                 "reflect": false
+            },
+            "published": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "published",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "price": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "price",
+                "reflect": false,
+                "defaultValue": "null"
             }
         };
     }

package/dist/collection/components/ur-novl/ur-novl.js.map

@@ -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;;;;;IAchB,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,gEAAS,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,EAAE,GAAY;YACvF,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    @Event()\n    authorClicked;\n\n    render() {\n        return (\n            <Host>\n                <section class='cover' style={{ backgroundImage: `url(${this.novlCover})` }}></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,"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"]}

package/dist/collection/stories/Novl.stories.js

@@ -1,7 +1,7 @@
 import { html } from 'lit';
 import '../components/ur-novl/ur-novl';
 
-const Novl = ({ novlTitle, novlCover, likes, views, showStats, novlDescription, authorAvatar, authorName }) => html`
+const Novl = ({ novlTitle, novlCover, likes, views, showStats, novlDescription, authorAvatar, authorName, published, price }) => html`
   <ur-novl
     author-name="${authorName}"
     author-avatar="${authorAvatar}"
@@ -11,6 +11,8 @@ const Novl = ({ novlTitle, novlCover, likes, views, showStats, novlDescription,
     likes="${likes}"
     views="${views}"
     show-stats="${showStats}"
+    published="${published}"
+    price="${price}"
   ></ur-novl>
 `;
 
@@ -30,6 +32,7 @@ export const Default = {
       '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.',
     authorAvatar: 'https://lh4.googleusercontent.com/-FxnW9K6NrJY/AAAAAAAAAAI/AAAAAAAAACM/irHh3OywY_Y/photo.jpg',
     authorName: 'Alex Johnson',
+    published: false,
   },
 };
 
@@ -42,6 +45,7 @@ export const NoStats = {
       '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.',
     authorAvatar: 'https://lh4.googleusercontent.com/-FxnW9K6NrJY/AAAAAAAAAAI/AAAAAAAAACM/irHh3OywY_Y/photo.jpg',
     authorName: 'Παπαδόπουλος Αλέξανδρος',
+    published: true,
   },
 };
 
@@ -55,5 +59,21 @@ export const SmallDescription = {
     novlDescription: 'Lorem Ipsum is simply dummy text.',
     authorAvatar: 'https://lh4.googleusercontent.com/-FxnW9K6NrJY/AAAAAAAAAAI/AAAAAAAAACM/irHh3OywY_Y/photo.jpg',
     authorName: 'James Bond 007',
+    published: false,
+  },
+};
+
+export const WithPrice = {
+  args: {
+    novlTitle: 'Welcome to my nightmare',
+    novlCover: 'https://s3-eu-west-1.amazonaws.com/urnovl-irl-1/covers/fe469e2a-8e19-48a2-a89d-55e8a201156c-grid.jpg',
+    likes: 7,
+    views: 1024,
+    showStats: true,
+    novlDescription: 'Lorem Ipsum is simply dummy text.',
+    authorAvatar: 'https://lh4.googleusercontent.com/-FxnW9K6NrJY/AAAAAAAAAAI/AAAAAAAAACM/irHh3OywY_Y/photo.jpg',
+    authorName: 'James Bond 007',
+    published: true,
+    price: '15$',
   },
 };

package/dist/components/ur-novl.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-57229bbc.js';
 
-const urNovlCss = ":host{display:flex;flex-direction:column;width:270px;height:253px;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%}:host .info{height:133px;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 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}";
 const UrNovlStyle0 = urNovlCss;
 
 const UrNovl$1 = /*@__PURE__*/ proxyCustomElement(class UrNovl extends H {
@@ -17,10 +17,12 @@ const UrNovl$1 = /*@__PURE__*/ proxyCustomElement(class UrNovl extends H {
         this.novlDescription = undefined;
         this.authorAvatar = undefined;
         this.authorName = undefined;
+        this.published = false;
+        this.price = null;
     }
     render() {
-        return (h(Host, { key: '74f57c9f92ec3f19f668c120f180b7d211b55666' }, h("section", { key: '566924b7ef4fb91271139488a7e1ff929b93a6d5', class: 'cover', style: { backgroundImage: `url(${this.novlCover})` } }), h("section", { key: '98107a5d2dd44fe9d2c003a9a80b2f896924ade5', class: 'info' }, h("div", { key: '428cc34fa11599480fbc8e8d14dcff2cfd326ca7', class: 'title' }, this.novlTitle), this.showStats &&
-            h("div", { key: 'db3169c4d5edd1d5b257ac037e4d1663602053fa', class: 'stats' }, h("div", { key: '21f462188ae9db816879570eec43e24e133ff233', class: "likes" }, h("div", { key: '48782cb33d1ae427a21c67fc7192d2e9945a5bda' }, h("b", { key: '00f92ea77a72e0b565da4a1ea4f00900a57ba524' }, this.likes), " Likes"), h("div", { key: '63226bcd46ebf22ffc8ca1e6da6f7e9652afbb60', class: "dot" }, "\u00B7")), h("div", { key: '62a6e66aca3961696c74a8909307a44ad2476c47', class: "views" }, h("b", { key: '50729fa8d7ef070095c3b08e093077958a8c4277' }, this.views), " Views")), h("div", { key: '88bed3948695aaf55edd44c8cd88e0d38421415b', class: "description" }, this.novlDescription), h("div", { key: '892135b9a30d74679d513c6e603df121edad860e', class: "author", onClick: _ => this.authorClicked.emit() }, h("div", { key: 'e075514ef8942b343248d05a95620acb76933701', class: "avatar", style: { backgroundImage: `url(${this.authorAvatar})` } }), h("div", { key: '6bf4e14d79ddaef394b6036d4cf8146e5ffbffd0', class: "name" }, this.authorName)))));
+        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 &&
+            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)))));
     }
     static get style() { return UrNovlStyle0; }
 }, [1, "ur-novl", {
@@ -31,7 +33,9 @@ const UrNovl$1 = /*@__PURE__*/ proxyCustomElement(class UrNovl extends H {
         "showStats": [4, "show-stats"],
         "novlDescription": [8, "novl-description"],
         "authorAvatar": [8, "author-avatar"],
-        "authorName": [8, "author-name"]
+        "authorName": [8, "author-name"],
+        "published": [4],
+        "price": [1]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/ur-novl.js.map

@@ -1 +1 @@
-{"file":"ur-novl.js","mappings":";;AAAA,MAAM,SAAS,GAAG,mxCAAmxC,CAAC;AACtyC,qBAAe,SAAS;;MCMXA,QAAM;;;;;;yBAGH,YAAY;;qBAMhB,CAAC;qBAGD,CAAC;yBAGG,IAAI;;;;;IAchB,MAAM;QACF,QACI,EAAC,IAAI,uDACD,gEAAS,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,EAAE,GAAY,EACvF,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    height: 253px;\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}\n\n:host .info {\n    height: 133px;\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    @Event()\n    authorClicked;\n\n    render() {\n        return (\n            <Host>\n                <section class='cover' style={{ backgroundImage: `url(${this.novlCover})` }}></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}
+{"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}

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  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"]}]]]], options);
+  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);
 };
 
 export { defineCustomElements };

package/dist/esm/ur-novl.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-39c2d9bd.js';
 
-const urNovlCss = ":host{display:flex;flex-direction:column;width:270px;height:253px;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%}:host .info{height:133px;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 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}";
 const UrNovlStyle0 = urNovlCss;
 
 const UrNovl = class {
@@ -15,10 +15,12 @@ const UrNovl = class {
         this.novlDescription = undefined;
         this.authorAvatar = undefined;
         this.authorName = undefined;
+        this.published = false;
+        this.price = null;
     }
     render() {
-        return (h(Host, { key: '74f57c9f92ec3f19f668c120f180b7d211b55666' }, h("section", { key: '566924b7ef4fb91271139488a7e1ff929b93a6d5', class: 'cover', style: { backgroundImage: `url(${this.novlCover})` } }), h("section", { key: '98107a5d2dd44fe9d2c003a9a80b2f896924ade5', class: 'info' }, h("div", { key: '428cc34fa11599480fbc8e8d14dcff2cfd326ca7', class: 'title' }, this.novlTitle), this.showStats &&
-            h("div", { key: 'db3169c4d5edd1d5b257ac037e4d1663602053fa', class: 'stats' }, h("div", { key: '21f462188ae9db816879570eec43e24e133ff233', class: "likes" }, h("div", { key: '48782cb33d1ae427a21c67fc7192d2e9945a5bda' }, h("b", { key: '00f92ea77a72e0b565da4a1ea4f00900a57ba524' }, this.likes), " Likes"), h("div", { key: '63226bcd46ebf22ffc8ca1e6da6f7e9652afbb60', class: "dot" }, "\u00B7")), h("div", { key: '62a6e66aca3961696c74a8909307a44ad2476c47', class: "views" }, h("b", { key: '50729fa8d7ef070095c3b08e093077958a8c4277' }, this.views), " Views")), h("div", { key: '88bed3948695aaf55edd44c8cd88e0d38421415b', class: "description" }, this.novlDescription), h("div", { key: '892135b9a30d74679d513c6e603df121edad860e', class: "author", onClick: _ => this.authorClicked.emit() }, h("div", { key: 'e075514ef8942b343248d05a95620acb76933701', class: "avatar", style: { backgroundImage: `url(${this.authorAvatar})` } }), h("div", { key: '6bf4e14d79ddaef394b6036d4cf8146e5ffbffd0', class: "name" }, this.authorName)))));
+        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 &&
+            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)))));
     }
 };
 UrNovl.style = UrNovlStyle0;

package/dist/esm/ur-novl.entry.js.map

@@ -1 +1 @@
-{"file":"ur-novl.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,mxCAAmxC,CAAC;AACtyC,qBAAe,SAAS;;MCMX,MAAM;;;;yBAGH,YAAY;;qBAMhB,CAAC;qBAGD,CAAC;yBAGG,IAAI;;;;;IAchB,MAAM;QACF,QACI,EAAC,IAAI,uDACD,gEAAS,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,EAAE,GAAY,EACvF,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    height: 253px;\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}\n\n:host .info {\n    height: 133px;\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    @Event()\n    authorClicked;\n\n    render() {\n        return (\n            <Host>\n                <section class='cover' style={{ backgroundImage: `url(${this.novlCover})` }}></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}
+{"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}

package/dist/esm/urnovl-web-components.js

@@ -16,7 +16,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  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"]}]]]], options);
+  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);
 });
 
 //# sourceMappingURL=urnovl-web-components.js.map

package/dist/types/components/ur-novl/ur-novl.d.ts

@@ -7,6 +7,8 @@ export declare class UrNovl {
     novlDescription: any;
     authorAvatar: any;
     authorName: any;
+    published: boolean;
+    price: string | null;
     authorClicked: any;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -13,6 +13,8 @@ export namespace Components {
         "novlCover": any;
         "novlDescription": any;
         "novlTitle": string;
+        "price": string | null;
+        "published": boolean;
         "showStats": boolean;
         "views": number;
     }
@@ -52,6 +54,8 @@ declare namespace LocalJSX {
         "novlDescription"?: any;
         "novlTitle"?: string;
         "onAuthorClicked"?: (event: UrNovlCustomEvent<any>) => void;
+        "price"?: string | null;
+        "published"?: boolean;
         "showStats"?: boolean;
         "views"?: number;
     }

package/dist/urnovl-web-components/p-a3a81342.entry.js

@@ -0,0 +1,2 @@
+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};
+//# sourceMappingURL=p-a3a81342.entry.js.map

package/dist/urnovl-web-components/p-a3a81342.entry.js.map

@@ -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":[]}

package/dist/urnovl-web-components/urnovl-web-components.esm.js

@@ -1,2 +1,2 @@
-import{p as o,b as a}from"./p-beadb9ca.js";export{s as setNonce}from"./p-beadb9ca.js";import{g as t}from"./p-e1255160.js";var r=()=>{const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return o(t)};r().then((async o=>{await t();return a([["p-6979b7c9",[[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"]}]]]],o)}));
+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)}));
 //# sourceMappingURL=urnovl-web-components.esm.js.map

package/dist/urnovl-web-components/urnovl-web-components.esm.js.map

@@ -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"],"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,uBAAAV,EAAA","ignoreList":[]}
+{"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":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "urnovl-web-components",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "Web components for Urnovl",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/urnovl-web-components/p-6979b7c9.entry.js

@@ -1,2 +0,0 @@
-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;height:253px;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%}:host .info{height:133px;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}render(){return i(o,{key:"74f57c9f92ec3f19f668c120f180b7d211b55666"},i("section",{key:"566924b7ef4fb91271139488a7e1ff929b93a6d5",class:"cover",style:{backgroundImage:`url(${this.novlCover})`}}),i("section",{key:"98107a5d2dd44fe9d2c003a9a80b2f896924ade5",class:"info"},i("div",{key:"428cc34fa11599480fbc8e8d14dcff2cfd326ca7",class:"title"},this.novlTitle),this.showStats&&i("div",{key:"db3169c4d5edd1d5b257ac037e4d1663602053fa",class:"stats"},i("div",{key:"21f462188ae9db816879570eec43e24e133ff233",class:"likes"},i("div",{key:"48782cb33d1ae427a21c67fc7192d2e9945a5bda"},i("b",{key:"00f92ea77a72e0b565da4a1ea4f00900a57ba524"},this.likes)," Likes"),i("div",{key:"63226bcd46ebf22ffc8ca1e6da6f7e9652afbb60",class:"dot"},"·")),i("div",{key:"62a6e66aca3961696c74a8909307a44ad2476c47",class:"views"},i("b",{key:"50729fa8d7ef070095c3b08e093077958a8c4277"},this.views)," Views")),i("div",{key:"88bed3948695aaf55edd44c8cd88e0d38421415b",class:"description"},this.novlDescription),i("div",{key:"892135b9a30d74679d513c6e603df121edad860e",class:"author",onClick:e=>this.authorClicked.emit()},i("div",{key:"e075514ef8942b343248d05a95620acb76933701",class:"avatar",style:{backgroundImage:`url(${this.authorAvatar})`}}),i("div",{key:"6bf4e14d79ddaef394b6036d4cf8146e5ffbffd0",class:"name"},this.authorName))))}};d.style=a;export{d as ur_novl};
-//# sourceMappingURL=p-6979b7c9.entry.js.map

package/dist/urnovl-web-components/p-6979b7c9.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["urNovlCss","UrNovlStyle0","UrNovl","render","h","Host","key","class","style","backgroundImage","this","novlCover","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    height: 253px;\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}\n\n:host .info {\n    height: 133px;\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    @Event()\n    authorClicked;\n\n    render() {\n        return (\n            <Host>\n                <section class='cover' style={{ backgroundImage: `url(${this.novlCover})` }}></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,oxCAClB,MAAAC,EAAeD,E,MCMFE,EAAM,M,qFAGH,a,oCAMJ,E,WAGA,E,eAGI,K,qFAcZ,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,WAAAE,IAAA,2CAASC,MAAM,QAAQC,MAAO,CAAEC,gBAAiB,OAAOC,KAAKC,gBAC7DP,EAAA,WAAAE,IAAA,2CAASC,MAAM,QACXH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SAASG,KAAKE,WACxBF,KAAKG,WACFT,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SACPH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SAAQH,EAAA,OAAAE,IAAA,4CAAKF,EAAA,KAAAE,IAAA,4CAAII,KAAKI,OAAU,UAAYV,EAAA,OAAAE,IAAA,2CAAKC,MAAM,OAAK,MACvEH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SAAQH,EAAA,KAAAE,IAAA,4CAAII,KAAKK,OAAU,WAG9CX,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eAAeG,KAAKM,iBAC/BZ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SAASU,QAASC,GAAKR,KAAKS,cAAcC,QACjDhB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SAASC,MAAO,CAAEC,gBAAiB,OAAOC,KAAKW,mBAC1DjB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQG,KAAKY,c","ignoreList":[]}