urnovl-web-components 0.0.41 → 0.0.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-60807157.js');
6
6
 
7
- const urNovlCarouselCss = ":host{display:block;box-sizing:border-box}";
7
+ const urNovlCarouselCss = ":host{--swiper-slide-width:100%}:host{display:block;box-sizing:border-box}:host swiper-slide{width:var(--swiper-slide-width)}";
8
8
  const UrNovlCarouselStyle0 = urNovlCarouselCss;
9
9
 
10
10
  const UrNovlCarousel = class {
@@ -1 +1 @@
1
- {"file":"ur-novl-carousel.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,4CAA4C,CAAC;AACvE,6BAAe,iBAAiB;;MCQnB,cAAc;;;qBAGF,EAAE;2BAGK;;SAE3B;oBAGa;YACV,IAAI,EAAE,CAAC;YACP,IAAI,EAAE,KAAK;SACd;6BAGiC,MAAM;4BAGP,GAAG;;IAEpC,MAAM;QACF,QACIA,QAACC,UAAI,uDACDD,+EACI,IAAI,EAAE,IAAI,CAAC,IAAI,qBACC,WAAW,EAC3B,WAAW,EAAE,IAAI,CAAC,WAAW,qBACZ,IAAI,CAAC,aAAa,mBACpB,IAAI,CAAC,YAAY,IAC/B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI;YAChB,QAAQA,8BACJA,qCAAa,IAAI,EAAY,CAClB,EAAC;SACnB,CAAC,CACa,CAChB,EACT;KACL;;;;;;","names":["h","Host"],"sources":["src/components/ur-novl-carousel/ur-novl-carousel.css?tag=ur-novl-carousel&encapsulation=shadow","src/components/ur-novl-carousel/ur-novl-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n box-sizing: border-box;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { Novl } from '../../models/novl';\nimport { Breakpoints, Grid } from '../../data/novl-carousel';\n\n@Component({\n tag: 'ur-novl-carousel',\n styleUrl: 'ur-novl-carousel.css',\n shadow: true,\n})\nexport class UrNovlCarousel {\n\n @Prop()\n novls: Array<Novl> = [];\n\n @Prop()\n breakpoints?: Breakpoints = {\n // add default\n };\n\n @Prop()\n grid?: Grid = {\n rows: 1,\n fill: 'row'\n };\n\n @Prop()\n slidesPerView?: number | 'auto' = 'auto';\n\n @Prop()\n spaceBetween?: number | string = '0';\n\n render() {\n return (\n <Host>\n <swiper-container\n grid={this.grid}\n breakpoint-base=\"container\"\n breakpoints={this.breakpoints}\n slides-per-view={this.slidesPerView}\n space-between={this.spaceBetween}>\n {this.novls.map(novl => {\n return (<swiper-slide>\n <ur-novl {...novl}></ur-novl>\n </swiper-slide>)\n })}\n </swiper-container>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"ur-novl-carousel.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,+HAA+H,CAAC;AAC1J,6BAAe,iBAAiB;;MCQnB,cAAc;;;qBAGF,EAAE;2BAGK;;SAE3B;oBAGa;YACV,IAAI,EAAE,CAAC;YACP,IAAI,EAAE,KAAK;SACd;6BAGiC,MAAM;4BAGP,GAAG;;IAEpC,MAAM;QACF,QACIA,QAACC,UAAI,uDACDD,+EACI,IAAI,EAAE,IAAI,CAAC,IAAI,qBACC,WAAW,EAC3B,WAAW,EAAE,IAAI,CAAC,WAAW,qBACZ,IAAI,CAAC,aAAa,mBACpB,IAAI,CAAC,YAAY,IAC/B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI;YAChB,QAAQA,8BACJA,qCAAa,IAAI,EAAY,CAClB,EAAC;SACnB,CAAC,CACa,CAChB,EACT;KACL;;;;;;","names":["h","Host"],"sources":["src/components/ur-novl-carousel/ur-novl-carousel.css?tag=ur-novl-carousel&encapsulation=shadow","src/components/ur-novl-carousel/ur-novl-carousel.tsx"],"sourcesContent":[":host {\n --swiper-slide-width: 100%;\n}\n\n:host {\n display: block;\n box-sizing: border-box;\n}\n\n:host swiper-slide {\n width: var(--swiper-slide-width);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { Novl } from '../../models/novl';\nimport { Breakpoints, Grid } from '../../data/novl-carousel';\n\n@Component({\n tag: 'ur-novl-carousel',\n styleUrl: 'ur-novl-carousel.css',\n shadow: true,\n})\nexport class UrNovlCarousel {\n\n @Prop()\n novls: Array<Novl> = [];\n\n @Prop()\n breakpoints?: Breakpoints = {\n // add default\n };\n\n @Prop()\n grid?: Grid = {\n rows: 1,\n fill: 'row'\n };\n\n @Prop()\n slidesPerView?: number | 'auto' = 'auto';\n\n @Prop()\n spaceBetween?: number | string = '0';\n\n render() {\n return (\n <Host>\n <swiper-container\n grid={this.grid}\n breakpoint-base=\"container\"\n breakpoints={this.breakpoints}\n slides-per-view={this.slidesPerView}\n space-between={this.spaceBetween}>\n {this.novls.map(novl => {\n return (<swiper-slide>\n <ur-novl {...novl}></ur-novl>\n </swiper-slide>)\n })}\n </swiper-container>\n </Host>\n );\n }\n}\n"],"version":3}
@@ -1,4 +1,12 @@
1
+ :host {
2
+ --swiper-slide-width: 100%;
3
+ }
4
+
1
5
  :host {
2
6
  display: block;
3
7
  box-sizing: border-box;
4
8
  }
9
+
10
+ :host swiper-slide {
11
+ width: var(--swiper-slide-width);
12
+ }
@@ -1,15 +1,20 @@
1
1
  import { html } from "lit";
2
2
  import "../components/ur-novl-carousel/ur-novl-carousel";
3
3
  import { NOVLS } from "../data/novls";
4
- const NovlCarousel = ({ novls, breakpoints, grid, slidesPerView, spaceBetween, width = '100%' }) => html `
5
- <div style="width: ${width}; box-sizing:border-box; background: #efefef;margin: 0;padding: 20px;">
6
- <ur-novl-carousel
7
- .novls="${novls}"
8
- .breakpoints="${breakpoints}"
9
- .grid="${grid}"
10
- slides-per-view="${slidesPerView}"
11
- space-between="${spaceBetween}"></ur-novl-carousel>
12
- </div>
4
+ const NovlCarousel = ({ novls, breakpoints, grid, slidesPerView, spaceBetween, slideWidth = '100%', containerWidth = '100%' }) => html `
5
+ <style>
6
+ ur-novl-carousel {
7
+ --swiper-slide-width: ${slideWidth};
8
+ }
9
+ </style>
10
+ <div style="width: ${containerWidth}; box-sizing:border-box; background: #efefef;margin: 0;padding: 20px;">
11
+ <ur-novl-carousel
12
+ .novls="${novls}"
13
+ .breakpoints="${breakpoints}"
14
+ .grid="${grid}"
15
+ slides-per-view="${slidesPerView}"
16
+ space-between="${spaceBetween}"></ur-novl-carousel>
17
+ </div>
13
18
  `;
14
19
  export default {
15
20
  title: 'Urnovl/NovlCarousel',
@@ -22,7 +27,8 @@ export const Default = {
22
27
  grid: {},
23
28
  slidesPerView: 1,
24
29
  spaceBetween: 10,
25
- width: '700px', // container width
30
+ // container styles
31
+ containerWidth: '700px',
26
32
  },
27
33
  };
28
34
  export const TwoRowsGrid = {
@@ -40,7 +46,24 @@ export const TwoRowsGrid = {
40
46
  },
41
47
  slidesPerView: 3,
42
48
  spaceBetween: 10,
43
- width: '700px', // container width
49
+ // container styles
50
+ containerWidth: '700px',
51
+ },
52
+ };
53
+ export const SneakPeek = {
54
+ render: args => NovlCarousel(args),
55
+ args: {
56
+ novls: NOVLS,
57
+ breakpoints: {},
58
+ grid: {
59
+ rows: 1,
60
+ fill: 'row'
61
+ },
62
+ slidesPerView: 'auto',
63
+ spaceBetween: 10,
64
+ // container styles
65
+ slideWidth: '80%',
66
+ containerWidth: '700px',
44
67
  },
45
68
  };
46
69
  //# sourceMappingURL=NovlCarousel.stories.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"NovlCarousel.stories.js","sourceRoot":"","sources":["../../src/stories/NovlCarousel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,iDAAiD,CAAC;AAEzD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,aAAa,EAAE,YAAY,EAAE,KAAK,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;uBACjF,KAAK;;kBAEV,KAAK;wBACC,WAAW;iBAClB,IAAI;2BACM,aAAa;yBACf,YAAY;;CAEpC,CAAC;AAEF,eAAe;IACX,KAAK,EAAE,qBAAqB;IAC5B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC;CACrC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACnB,IAAI,EAAE;QACF,KAAK,EAAE,KAAK;QACZ,WAAW,EAAE,EAAE;QACf,IAAI,EAAE,EAAE;QACR,aAAa,EAAE,CAAC;QAChB,YAAY,EAAE,EAAE;QAChB,KAAK,EAAE,OAAO,EAAE,kBAAkB;KACrC;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG;IACvB,IAAI,EAAE;QACF,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC7B,IAAI,KAAK,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;gBAC7B,uCAAY,IAAI,KAAE,YAAY,EAAE,GAAG,IAAG;YAC1C,CAAC;YAED,yBAAY,IAAI,EAAG;QACvB,CAAC,CAAC;QACF,WAAW,EAAE,EAAE;QACf,IAAI,EAAE;YACF,IAAI,EAAE,CAAC;YACP,IAAI,EAAE,KAAK;SACd;QACD,aAAa,EAAE,CAAC;QAChB,YAAY,EAAE,EAAE;QAChB,KAAK,EAAE,OAAO,EAAE,kBAAkB;KACrC;CACJ,CAAC","sourcesContent":["import { html } from 'lit';\nimport '../components/ur-novl-carousel/ur-novl-carousel';\n\nimport { NOVLS } from '../data/novls';\n\nconst NovlCarousel = ({ novls, breakpoints, grid, slidesPerView, spaceBetween, width = '100%' }) => html`\n <div style=\"width: ${width}; box-sizing:border-box; background: #efefef;margin: 0;padding: 20px;\">\n <ur-novl-carousel\n .novls=\"${novls}\"\n .breakpoints=\"${breakpoints}\"\n .grid=\"${grid}\"\n slides-per-view=\"${slidesPerView}\"\n space-between=\"${spaceBetween}\"></ur-novl-carousel>\n </div>\n`;\n\nexport default {\n title: 'Urnovl/NovlCarousel',\n render: args => NovlCarousel(args)\n};\n\nexport const Default = {\n args: {\n novls: NOVLS,\n breakpoints: {},\n grid: {},\n slidesPerView: 1,\n spaceBetween: 10,\n width: '700px', // container width\n },\n};\n\nexport const TwoRowsGrid = {\n args: {\n novls: NOVLS.map((novl, index) => {\n if (index === 1 || index === 6) {\n return { ...novl, borderRadius: '0' };\n }\n\n return { ...novl };\n }),\n breakpoints: {},\n grid: {\n rows: 2,\n fill: 'row'\n },\n slidesPerView: 3,\n spaceBetween: 10,\n width: '700px', // container width\n },\n};\n"]}
1
+ {"version":3,"file":"NovlCarousel.stories.js","sourceRoot":"","sources":["../../src/stories/NovlCarousel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,iDAAiD,CAAC;AAEzD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,MAAM,YAAY,GAAG,CAAC,EAClB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAa,EACb,YAAY,EACZ,UAAU,GAAG,MAAM,EACnB,cAAc,GAAG,MAAM,EAC1B,EAAE,EAAE,CAAC,IAAI,CAAA;;;oCAG0B,UAAU;;;yBAGrB,cAAc;;sBAEjB,KAAK;4BACC,WAAW;qBAClB,IAAI;+BACM,aAAa;6BACf,YAAY;;CAExC,CAAC;AAEF,eAAe;IACX,KAAK,EAAE,qBAAqB;IAC5B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC;CACrC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACnB,IAAI,EAAE;QACF,KAAK,EAAE,KAAK;QACZ,WAAW,EAAE,EAAE;QACf,IAAI,EAAE,EAAE;QACR,aAAa,EAAE,CAAC;QAChB,YAAY,EAAE,EAAE;QAChB,mBAAmB;QACnB,cAAc,EAAE,OAAO;KAC1B;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG;IACvB,IAAI,EAAE;QACF,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC7B,IAAI,KAAK,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;gBAC7B,uCAAY,IAAI,KAAE,YAAY,EAAE,GAAG,IAAG;YAC1C,CAAC;YAED,yBAAY,IAAI,EAAG;QACvB,CAAC,CAAC;QACF,WAAW,EAAE,EAAE;QACf,IAAI,EAAE;YACF,IAAI,EAAE,CAAC;YACP,IAAI,EAAE,KAAK;SACd;QACD,aAAa,EAAE,CAAC;QAChB,YAAY,EAAE,EAAE;QAChB,mBAAmB;QACnB,cAAc,EAAE,OAAO;KAC1B;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;IACrB,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC;IAClC,IAAI,EAAE;QACF,KAAK,EAAE,KAAK;QACZ,WAAW,EAAE,EAAE;QACf,IAAI,EAAE;YACF,IAAI,EAAE,CAAC;YACP,IAAI,EAAE,KAAK;SACd;QACD,aAAa,EAAE,MAAM;QACrB,YAAY,EAAE,EAAE;QAChB,mBAAmB;QACnB,UAAU,EAAE,KAAK;QACjB,cAAc,EAAE,OAAO;KAC1B;CACJ,CAAC","sourcesContent":["import { html } from 'lit';\nimport '../components/ur-novl-carousel/ur-novl-carousel';\n\nimport { NOVLS } from '../data/novls';\n\nconst NovlCarousel = ({\n novls,\n breakpoints,\n grid,\n slidesPerView,\n spaceBetween,\n slideWidth = '100%',\n containerWidth = '100%'\n}) => html`\n <style>\n ur-novl-carousel {\n --swiper-slide-width: ${slideWidth};\n }\n </style>\n <div style=\"width: ${containerWidth}; box-sizing:border-box; background: #efefef;margin: 0;padding: 20px;\">\n <ur-novl-carousel\n .novls=\"${novls}\"\n .breakpoints=\"${breakpoints}\"\n .grid=\"${grid}\"\n slides-per-view=\"${slidesPerView}\"\n space-between=\"${spaceBetween}\"></ur-novl-carousel>\n </div>\n`;\n\nexport default {\n title: 'Urnovl/NovlCarousel',\n render: args => NovlCarousel(args)\n};\n\nexport const Default = {\n args: {\n novls: NOVLS,\n breakpoints: {},\n grid: {},\n slidesPerView: 1,\n spaceBetween: 10,\n // container styles\n containerWidth: '700px',\n },\n};\n\nexport const TwoRowsGrid = {\n args: {\n novls: NOVLS.map((novl, index) => {\n if (index === 1 || index === 6) {\n return { ...novl, borderRadius: '0' };\n }\n\n return { ...novl };\n }),\n breakpoints: {},\n grid: {\n rows: 2,\n fill: 'row'\n },\n slidesPerView: 3,\n spaceBetween: 10,\n // container styles\n containerWidth: '700px',\n },\n};\n\nexport const SneakPeek = {\n render: args => NovlCarousel(args),\n args: {\n novls: NOVLS,\n breakpoints: {},\n grid: {\n rows: 1,\n fill: 'row'\n },\n slidesPerView: 'auto',\n spaceBetween: 10,\n // container styles\n slideWidth: '80%',\n containerWidth: '700px',\n },\n};\n"]}
@@ -1,7 +1,7 @@
1
1
  import { p as proxyCustomElement, H, h, d as Host } from './p-833f3677.js';
2
2
  import { d as defineCustomElement$2 } from './p-04a13b46.js';
3
3
 
4
- const urNovlCarouselCss = ":host{display:block;box-sizing:border-box}";
4
+ const urNovlCarouselCss = ":host{--swiper-slide-width:100%}:host{display:block;box-sizing:border-box}:host swiper-slide{width:var(--swiper-slide-width)}";
5
5
  const UrNovlCarouselStyle0 = urNovlCarouselCss;
6
6
 
7
7
  const UrNovlCarousel$1 = /*@__PURE__*/ proxyCustomElement(class UrNovlCarousel extends H {
@@ -1 +1 @@
1
- {"file":"ur-novl-carousel.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,4CAA4C,CAAC;AACvE,6BAAe,iBAAiB;;MCQnBA,gBAAc;;;;;qBAGF,EAAE;2BAGK;;SAE3B;oBAGa;YACV,IAAI,EAAE,CAAC;YACP,IAAI,EAAE,KAAK;SACd;6BAGiC,MAAM;4BAGP,GAAG;;IAEpC,MAAM;QACF,QACI,EAAC,IAAI,uDACD,yEACI,IAAI,EAAE,IAAI,CAAC,IAAI,qBACC,WAAW,EAC3B,WAAW,EAAE,IAAI,CAAC,WAAW,qBACZ,IAAI,CAAC,aAAa,mBACpB,IAAI,CAAC,YAAY,IAC/B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI;YAChB,QAAQ,wBACJ,+BAAa,IAAI,EAAY,CAClB,EAAC;SACnB,CAAC,CACa,CAChB,EACT;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["UrNovlCarousel"],"sources":["src/components/ur-novl-carousel/ur-novl-carousel.css?tag=ur-novl-carousel&encapsulation=shadow","src/components/ur-novl-carousel/ur-novl-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n box-sizing: border-box;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { Novl } from '../../models/novl';\nimport { Breakpoints, Grid } from '../../data/novl-carousel';\n\n@Component({\n tag: 'ur-novl-carousel',\n styleUrl: 'ur-novl-carousel.css',\n shadow: true,\n})\nexport class UrNovlCarousel {\n\n @Prop()\n novls: Array<Novl> = [];\n\n @Prop()\n breakpoints?: Breakpoints = {\n // add default\n };\n\n @Prop()\n grid?: Grid = {\n rows: 1,\n fill: 'row'\n };\n\n @Prop()\n slidesPerView?: number | 'auto' = 'auto';\n\n @Prop()\n spaceBetween?: number | string = '0';\n\n render() {\n return (\n <Host>\n <swiper-container\n grid={this.grid}\n breakpoint-base=\"container\"\n breakpoints={this.breakpoints}\n slides-per-view={this.slidesPerView}\n space-between={this.spaceBetween}>\n {this.novls.map(novl => {\n return (<swiper-slide>\n <ur-novl {...novl}></ur-novl>\n </swiper-slide>)\n })}\n </swiper-container>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"ur-novl-carousel.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,+HAA+H,CAAC;AAC1J,6BAAe,iBAAiB;;MCQnBA,gBAAc;;;;;qBAGF,EAAE;2BAGK;;SAE3B;oBAGa;YACV,IAAI,EAAE,CAAC;YACP,IAAI,EAAE,KAAK;SACd;6BAGiC,MAAM;4BAGP,GAAG;;IAEpC,MAAM;QACF,QACI,EAAC,IAAI,uDACD,yEACI,IAAI,EAAE,IAAI,CAAC,IAAI,qBACC,WAAW,EAC3B,WAAW,EAAE,IAAI,CAAC,WAAW,qBACZ,IAAI,CAAC,aAAa,mBACpB,IAAI,CAAC,YAAY,IAC/B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI;YAChB,QAAQ,wBACJ,+BAAa,IAAI,EAAY,CAClB,EAAC;SACnB,CAAC,CACa,CAChB,EACT;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["UrNovlCarousel"],"sources":["src/components/ur-novl-carousel/ur-novl-carousel.css?tag=ur-novl-carousel&encapsulation=shadow","src/components/ur-novl-carousel/ur-novl-carousel.tsx"],"sourcesContent":[":host {\n --swiper-slide-width: 100%;\n}\n\n:host {\n display: block;\n box-sizing: border-box;\n}\n\n:host swiper-slide {\n width: var(--swiper-slide-width);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { Novl } from '../../models/novl';\nimport { Breakpoints, Grid } from '../../data/novl-carousel';\n\n@Component({\n tag: 'ur-novl-carousel',\n styleUrl: 'ur-novl-carousel.css',\n shadow: true,\n})\nexport class UrNovlCarousel {\n\n @Prop()\n novls: Array<Novl> = [];\n\n @Prop()\n breakpoints?: Breakpoints = {\n // add default\n };\n\n @Prop()\n grid?: Grid = {\n rows: 1,\n fill: 'row'\n };\n\n @Prop()\n slidesPerView?: number | 'auto' = 'auto';\n\n @Prop()\n spaceBetween?: number | string = '0';\n\n render() {\n return (\n <Host>\n <swiper-container\n grid={this.grid}\n breakpoint-base=\"container\"\n breakpoints={this.breakpoints}\n slides-per-view={this.slidesPerView}\n space-between={this.spaceBetween}>\n {this.novls.map(novl => {\n return (<swiper-slide>\n <ur-novl {...novl}></ur-novl>\n </swiper-slide>)\n })}\n </swiper-container>\n </Host>\n );\n }\n}\n"],"version":3}
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, h, H as Host } from './index-a8eafbda.js';
2
2
 
3
- const urNovlCarouselCss = ":host{display:block;box-sizing:border-box}";
3
+ const urNovlCarouselCss = ":host{--swiper-slide-width:100%}:host{display:block;box-sizing:border-box}:host swiper-slide{width:var(--swiper-slide-width)}";
4
4
  const UrNovlCarouselStyle0 = urNovlCarouselCss;
5
5
 
6
6
  const UrNovlCarousel = class {
@@ -1 +1 @@
1
- {"file":"ur-novl-carousel.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,4CAA4C,CAAC;AACvE,6BAAe,iBAAiB;;MCQnB,cAAc;;;qBAGF,EAAE;2BAGK;;SAE3B;oBAGa;YACV,IAAI,EAAE,CAAC;YACP,IAAI,EAAE,KAAK;SACd;6BAGiC,MAAM;4BAGP,GAAG;;IAEpC,MAAM;QACF,QACI,EAAC,IAAI,uDACD,yEACI,IAAI,EAAE,IAAI,CAAC,IAAI,qBACC,WAAW,EAC3B,WAAW,EAAE,IAAI,CAAC,WAAW,qBACZ,IAAI,CAAC,aAAa,mBACpB,IAAI,CAAC,YAAY,IAC/B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI;YAChB,QAAQ,wBACJ,+BAAa,IAAI,EAAY,CAClB,EAAC;SACnB,CAAC,CACa,CAChB,EACT;KACL;;;;;;","names":[],"sources":["src/components/ur-novl-carousel/ur-novl-carousel.css?tag=ur-novl-carousel&encapsulation=shadow","src/components/ur-novl-carousel/ur-novl-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n box-sizing: border-box;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { Novl } from '../../models/novl';\nimport { Breakpoints, Grid } from '../../data/novl-carousel';\n\n@Component({\n tag: 'ur-novl-carousel',\n styleUrl: 'ur-novl-carousel.css',\n shadow: true,\n})\nexport class UrNovlCarousel {\n\n @Prop()\n novls: Array<Novl> = [];\n\n @Prop()\n breakpoints?: Breakpoints = {\n // add default\n };\n\n @Prop()\n grid?: Grid = {\n rows: 1,\n fill: 'row'\n };\n\n @Prop()\n slidesPerView?: number | 'auto' = 'auto';\n\n @Prop()\n spaceBetween?: number | string = '0';\n\n render() {\n return (\n <Host>\n <swiper-container\n grid={this.grid}\n breakpoint-base=\"container\"\n breakpoints={this.breakpoints}\n slides-per-view={this.slidesPerView}\n space-between={this.spaceBetween}>\n {this.novls.map(novl => {\n return (<swiper-slide>\n <ur-novl {...novl}></ur-novl>\n </swiper-slide>)\n })}\n </swiper-container>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"ur-novl-carousel.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,+HAA+H,CAAC;AAC1J,6BAAe,iBAAiB;;MCQnB,cAAc;;;qBAGF,EAAE;2BAGK;;SAE3B;oBAGa;YACV,IAAI,EAAE,CAAC;YACP,IAAI,EAAE,KAAK;SACd;6BAGiC,MAAM;4BAGP,GAAG;;IAEpC,MAAM;QACF,QACI,EAAC,IAAI,uDACD,yEACI,IAAI,EAAE,IAAI,CAAC,IAAI,qBACC,WAAW,EAC3B,WAAW,EAAE,IAAI,CAAC,WAAW,qBACZ,IAAI,CAAC,aAAa,mBACpB,IAAI,CAAC,YAAY,IAC/B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI;YAChB,QAAQ,wBACJ,+BAAa,IAAI,EAAY,CAClB,EAAC;SACnB,CAAC,CACa,CAChB,EACT;KACL;;;;;;","names":[],"sources":["src/components/ur-novl-carousel/ur-novl-carousel.css?tag=ur-novl-carousel&encapsulation=shadow","src/components/ur-novl-carousel/ur-novl-carousel.tsx"],"sourcesContent":[":host {\n --swiper-slide-width: 100%;\n}\n\n:host {\n display: block;\n box-sizing: border-box;\n}\n\n:host swiper-slide {\n width: var(--swiper-slide-width);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { Novl } from '../../models/novl';\nimport { Breakpoints, Grid } from '../../data/novl-carousel';\n\n@Component({\n tag: 'ur-novl-carousel',\n styleUrl: 'ur-novl-carousel.css',\n shadow: true,\n})\nexport class UrNovlCarousel {\n\n @Prop()\n novls: Array<Novl> = [];\n\n @Prop()\n breakpoints?: Breakpoints = {\n // add default\n };\n\n @Prop()\n grid?: Grid = {\n rows: 1,\n fill: 'row'\n };\n\n @Prop()\n slidesPerView?: number | 'auto' = 'auto';\n\n @Prop()\n spaceBetween?: number | string = '0';\n\n render() {\n return (\n <Host>\n <swiper-container\n grid={this.grid}\n breakpoint-base=\"container\"\n breakpoints={this.breakpoints}\n slides-per-view={this.slidesPerView}\n space-between={this.spaceBetween}>\n {this.novls.map(novl => {\n return (<swiper-slide>\n <ur-novl {...novl}></ur-novl>\n </swiper-slide>)\n })}\n </swiper-container>\n </Host>\n );\n }\n}\n"],"version":3}
@@ -11,7 +11,7 @@ export declare const Default: {
11
11
  grid: {};
12
12
  slidesPerView: number;
13
13
  spaceBetween: number;
14
- width: string;
14
+ containerWidth: string;
15
15
  };
16
16
  };
17
17
  export declare const TwoRowsGrid: {
@@ -38,6 +38,21 @@ export declare const TwoRowsGrid: {
38
38
  };
39
39
  slidesPerView: number;
40
40
  spaceBetween: number;
41
- width: string;
41
+ containerWidth: string;
42
+ };
43
+ };
44
+ export declare const SneakPeek: {
45
+ render: (args: any) => import("lit-html").TemplateResult<1>;
46
+ args: {
47
+ novls: import("..").Novl[];
48
+ breakpoints: {};
49
+ grid: {
50
+ rows: number;
51
+ fill: string;
52
+ };
53
+ slidesPerView: string;
54
+ spaceBetween: number;
55
+ slideWidth: string;
56
+ containerWidth: string;
42
57
  };
43
58
  };
@@ -0,0 +1,2 @@
1
+ import{r as s,h as e,H as i}from"./p-2bd584aa.js";const t=":host{--swiper-slide-width:100%}:host{display:block;box-sizing:border-box}:host swiper-slide{width:var(--swiper-slide-width)}";const r=t;const o=class{constructor(e){s(this,e);this.novls=[];this.breakpoints={};this.grid={rows:1,fill:"row"};this.slidesPerView="auto";this.spaceBetween="0"}render(){return e(i,{key:"2f7500789030a16b4614f8b2eff1f41604e978a4"},e("swiper-container",{key:"eeaff35f2fe9aa2deb4d4b54fff974841dcb1dbd",grid:this.grid,"breakpoint-base":"container",breakpoints:this.breakpoints,"slides-per-view":this.slidesPerView,"space-between":this.spaceBetween},this.novls.map((s=>e("swiper-slide",null,e("ur-novl",Object.assign({},s)))))))}};o.style=r;export{o as ur_novl_carousel};
2
+ //# sourceMappingURL=p-7d9ea6bd.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["urNovlCarouselCss","UrNovlCarouselStyle0","UrNovlCarousel","rows","fill","render","h","Host","key","grid","this","breakpoints","slidesPerView","spaceBetween","novls","map","novl","Object","assign"],"sources":["src/components/ur-novl-carousel/ur-novl-carousel.css?tag=ur-novl-carousel&encapsulation=shadow","src/components/ur-novl-carousel/ur-novl-carousel.tsx"],"sourcesContent":[":host {\n --swiper-slide-width: 100%;\n}\n\n:host {\n display: block;\n box-sizing: border-box;\n}\n\n:host swiper-slide {\n width: var(--swiper-slide-width);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { Novl } from '../../models/novl';\nimport { Breakpoints, Grid } from '../../data/novl-carousel';\n\n@Component({\n tag: 'ur-novl-carousel',\n styleUrl: 'ur-novl-carousel.css',\n shadow: true,\n})\nexport class UrNovlCarousel {\n\n @Prop()\n novls: Array<Novl> = [];\n\n @Prop()\n breakpoints?: Breakpoints = {\n // add default\n };\n\n @Prop()\n grid?: Grid = {\n rows: 1,\n fill: 'row'\n };\n\n @Prop()\n slidesPerView?: number | 'auto' = 'auto';\n\n @Prop()\n spaceBetween?: number | string = '0';\n\n render() {\n return (\n <Host>\n <swiper-container\n grid={this.grid}\n breakpoint-base=\"container\"\n breakpoints={this.breakpoints}\n slides-per-view={this.slidesPerView}\n space-between={this.spaceBetween}>\n {this.novls.map(novl => {\n return (<swiper-slide>\n <ur-novl {...novl}></ur-novl>\n </swiper-slide>)\n })}\n </swiper-container>\n </Host>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAoB,gIAC1B,MAAAC,EAAeD,E,MCQFE,EAAc,M,oCAGF,G,iBAGO,C,YAKd,CACVC,KAAM,EACNC,KAAM,O,mBAIwB,O,kBAGD,G,CAEjC,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,oBAAAE,IAAA,2CACIC,KAAMC,KAAKD,KAAI,kBACC,YAChBE,YAAaD,KAAKC,YAAW,kBACZD,KAAKE,cAAa,gBACpBF,KAAKG,cACnBH,KAAKI,MAAMC,KAAIC,GACJV,EAAA,oBACJA,EAAA,UAAAW,OAAAC,OAAA,GAAaF,Q","ignoreList":[]}
@@ -1,2 +1,2 @@
1
- import{p as e,b as a}from"./p-2bd584aa.js";export{s as setNonce}from"./p-2bd584aa.js";import{g as r}from"./p-e1255160.js";var o=()=>{const a=import.meta.url;const r={};if(a!==""){r.resourcesUrl=new URL(".",a).href}return e(r)};o().then((async e=>{await r();return a([["p-5640cb93",[[1,"ur-novl",{novlTitle:[1,"novl-title"],novlCover:[8,"novl-cover"],novlCoverFallback:[1,"novl-cover-fallback"],likes:[2],views:[2],showStats:[4,"show-stats"],novlDescription:[8,"novl-description"],authorAvatar:[8,"author-avatar"],authorName:[8,"author-name"],published:[4],price:[1],publisherAvatar:[1,"publisher-avatar"],publisherName:[1,"publisher-name"],borderRadius:[1,"border-radius"]}]]],["p-3131351b",[[1,"ur-novl-carousel",{novls:[16],breakpoints:[16],grid:[16],slidesPerView:[8,"slides-per-view"],spaceBetween:[8,"space-between"]}]]]],e)}));
1
+ import{p as e,b as a}from"./p-2bd584aa.js";export{s as setNonce}from"./p-2bd584aa.js";import{g as r}from"./p-e1255160.js";var o=()=>{const a=import.meta.url;const r={};if(a!==""){r.resourcesUrl=new URL(".",a).href}return e(r)};o().then((async e=>{await r();return a([["p-5640cb93",[[1,"ur-novl",{novlTitle:[1,"novl-title"],novlCover:[8,"novl-cover"],novlCoverFallback:[1,"novl-cover-fallback"],likes:[2],views:[2],showStats:[4,"show-stats"],novlDescription:[8,"novl-description"],authorAvatar:[8,"author-avatar"],authorName:[8,"author-name"],published:[4],price:[1],publisherAvatar:[1,"publisher-avatar"],publisherName:[1,"publisher-name"],borderRadius:[1,"border-radius"]}]]],["p-7d9ea6bd",[[1,"ur-novl-carousel",{novls:[16],breakpoints:[16],grid:[16],slidesPerView:[8,"slides-per-view"],spaceBetween:[8,"space-between"]}]]]],e)}));
2
2
  //# sourceMappingURL=urnovl-web-components.esm.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "urnovl-web-components",
3
- "version": "0.0.41",
3
+ "version": "0.0.42",
4
4
  "description": "Web components for Urnovl",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
@@ -1,2 +0,0 @@
1
- import{r as s,h as e,H as t}from"./p-2bd584aa.js";const i=":host{display:block;box-sizing:border-box}";const r=i;const o=class{constructor(e){s(this,e);this.novls=[];this.breakpoints={};this.grid={rows:1,fill:"row"};this.slidesPerView="auto";this.spaceBetween="0"}render(){return e(t,{key:"2f7500789030a16b4614f8b2eff1f41604e978a4"},e("swiper-container",{key:"eeaff35f2fe9aa2deb4d4b54fff974841dcb1dbd",grid:this.grid,"breakpoint-base":"container",breakpoints:this.breakpoints,"slides-per-view":this.slidesPerView,"space-between":this.spaceBetween},this.novls.map((s=>e("swiper-slide",null,e("ur-novl",Object.assign({},s)))))))}};o.style=r;export{o as ur_novl_carousel};
2
- //# sourceMappingURL=p-3131351b.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["urNovlCarouselCss","UrNovlCarouselStyle0","UrNovlCarousel","rows","fill","render","h","Host","key","grid","this","breakpoints","slidesPerView","spaceBetween","novls","map","novl","Object","assign"],"sources":["src/components/ur-novl-carousel/ur-novl-carousel.css?tag=ur-novl-carousel&encapsulation=shadow","src/components/ur-novl-carousel/ur-novl-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n box-sizing: border-box;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { Novl } from '../../models/novl';\nimport { Breakpoints, Grid } from '../../data/novl-carousel';\n\n@Component({\n tag: 'ur-novl-carousel',\n styleUrl: 'ur-novl-carousel.css',\n shadow: true,\n})\nexport class UrNovlCarousel {\n\n @Prop()\n novls: Array<Novl> = [];\n\n @Prop()\n breakpoints?: Breakpoints = {\n // add default\n };\n\n @Prop()\n grid?: Grid = {\n rows: 1,\n fill: 'row'\n };\n\n @Prop()\n slidesPerView?: number | 'auto' = 'auto';\n\n @Prop()\n spaceBetween?: number | string = '0';\n\n render() {\n return (\n <Host>\n <swiper-container\n grid={this.grid}\n breakpoint-base=\"container\"\n breakpoints={this.breakpoints}\n slides-per-view={this.slidesPerView}\n space-between={this.spaceBetween}>\n {this.novls.map(novl => {\n return (<swiper-slide>\n <ur-novl {...novl}></ur-novl>\n </swiper-slide>)\n })}\n </swiper-container>\n </Host>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAoB,6CAC1B,MAAAC,EAAeD,E,MCQFE,EAAc,M,oCAGF,G,iBAGO,C,YAKd,CACVC,KAAM,EACNC,KAAM,O,mBAIwB,O,kBAGD,G,CAEjC,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,oBAAAE,IAAA,2CACIC,KAAMC,KAAKD,KAAI,kBACC,YAChBE,YAAaD,KAAKC,YAAW,kBACZD,KAAKE,cAAa,gBACpBF,KAAKG,cACnBH,KAAKI,MAAMC,KAAIC,GACJV,EAAA,oBACJA,EAAA,UAAAW,OAAAC,OAAA,GAAaF,Q","ignoreList":[]}