@nanoporetech-digital/components 3.12.2 → 3.13.0
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.
- package/CHANGELOG.md +11 -0
- package/dist/cjs/nano-slide.cjs.entry.js +1 -1
- package/dist/cjs/nano-slide.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-slides.cjs.entry.js +10 -3
- package/dist/cjs/nano-slides.cjs.entry.js.map +1 -1
- package/dist/cjs/{nano-table-2d279dae.js → nano-table-60c06885.js} +2 -2
- package/dist/cjs/{nano-table-2d279dae.js.map → nano-table-60c06885.js.map} +1 -1
- package/dist/cjs/nano-table.cjs.entry.js +1 -1
- package/dist/cjs/{table.worker-88a4878e.js → table.worker-f902766e.js} +2 -2
- package/dist/cjs/table.worker-f902766e.js.map +1 -0
- package/dist/collection/components/slides/slide.css +0 -1
- package/dist/collection/components/slides/slides.css +15 -6
- package/dist/collection/components/slides/slides.js +9 -2
- package/dist/collection/components/slides/slides.js.map +1 -1
- package/dist/components/nano-slide.js +1 -1
- package/dist/components/nano-slide.js.map +1 -1
- package/dist/components/nano-slides.js +10 -3
- package/dist/components/nano-slides.js.map +1 -1
- package/dist/esm/nano-slide.entry.js +1 -1
- package/dist/esm/nano-slide.entry.js.map +1 -1
- package/dist/esm/nano-slides.entry.js +10 -3
- package/dist/esm/nano-slides.entry.js.map +1 -1
- package/dist/esm/{nano-table-3af91b28.js → nano-table-e64af51e.js} +2 -2
- package/dist/esm/{nano-table-3af91b28.js.map → nano-table-e64af51e.js.map} +1 -1
- package/dist/esm/nano-table.entry.js +1 -1
- package/dist/esm/{table.worker-607131b6.js → table.worker-2f887b5f.js} +2 -2
- package/dist/esm/table.worker-2f887b5f.js.map +1 -0
- package/dist/nano-components/nano-components.esm.js +1 -1
- package/dist/nano-components/{p-3a842c31.entry.js → p-3d27d563.entry.js} +3 -3
- package/dist/nano-components/p-3d27d563.entry.js.map +1 -0
- package/dist/nano-components/{p-5d7a51ae.entry.js → p-80ddfa30.entry.js} +2 -2
- package/dist/nano-components/{p-32bc23ec.js.map → p-80ddfa30.entry.js.map} +0 -0
- package/dist/nano-components/p-a145fbc1.js +5 -0
- package/dist/nano-components/{p-5d7a51ae.entry.js.map → p-a145fbc1.js.map} +0 -0
- package/dist/nano-components/{p-f8eb656f.js → p-add3ac22.js} +2 -2
- package/dist/nano-components/{p-f8eb656f.js.map → p-add3ac22.js.map} +0 -0
- package/dist/nano-components/p-ce07df57.entry.js +5 -0
- package/dist/nano-components/p-ce07df57.entry.js.map +1 -0
- package/docs-json.json +1 -1
- package/hydrate/index.js +11 -4
- package/package.json +2 -2
- package/dist/cjs/table.worker-88a4878e.js.map +0 -1
- package/dist/esm/table.worker-607131b6.js.map +0 -1
- package/dist/nano-components/p-32bc23ec.js +0 -5
- package/dist/nano-components/p-3a842c31.entry.js.map +0 -1
- package/dist/nano-components/p-6fc1350a.entry.js +0 -5
- package/dist/nano-components/p-6fc1350a.entry.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [3.13.0](https://git.oxfordnanolabs.local/Digital/nano-components/compare/v3.12.2...v3.13.0) (2023-02-21)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **slides:** stop CLS by adjusting height before init ([5476b3d](https://git.oxfordnanolabs.local/Digital/nano-components/commits/5476b3d967c9b4cfc6695db47b0a552af986e4d0))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [3.12.2](https://git.oxfordnanolabs.local/Digital/nano-components/compare/v3.12.1...v3.12.2) (2023-02-21)
|
|
7
18
|
|
|
8
19
|
|
|
@@ -7,7 +7,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
7
7
|
|
|
8
8
|
const index = require('./index-46286eea.js');
|
|
9
9
|
|
|
10
|
-
const slideCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:flex;
|
|
10
|
+
const slideCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:flex;align-items:center;justify-content:center;inline-size:100%;min-block-size:100%;font-size:18px;text-align:center;box-sizing:border-box;overflow:hidden;transition:opacity 0.2s;opacity:0;flex-direction:column}:host([ready]){opacity:1}";
|
|
11
11
|
|
|
12
12
|
const Slide = class {
|
|
13
13
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"nano-slide.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,
|
|
1
|
+
{"file":"nano-slide.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,oWAAoW;;MCgBxW,KAAK;;;;iBAUgD,IAAI;;EAGpE,WAAW,CAAC,QAAwB,EAAE,QAAyB;IAC7D,IACE,OAAO,QAAQ,KAAK,WAAW;MAC/B,QAAQ,KAAK,KAAK;MAClB,QAAQ,KAAK,IAAI,EACjB;MACA,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;KAC5B;GACF;EAED,gBAAgB;;IAEd,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS;MAAE,OAAO;IAC5C,UAAU,CAAC;MACT,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;MAC3B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;KACnB,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,qBAAQ,CACH,EACP;GACH;;;;;;;;;","names":["h","Host"],"sources":["./src/components/slides/slide.scss?tag=nano-slide&encapsulation=shadow","./src/components/slides/slide.tsx"],"sourcesContent":["// Slide\n// --------------------------------------------------\n\n:host {\n // Center slide text vertically\n display: flex;\n align-items: center;\n justify-content: center;\n inline-size: 100%;\n min-block-size: 100%;\n font-size: 18px;\n text-align: center;\n box-sizing: border-box;\n overflow: hidden;\n transition: opacity 0.2s;\n opacity: 0;\n flex-direction: column;\n}\n\n:host([ready]) {\n opacity: 1;\n}\n","import {\n Component,\n ComponentInterface,\n Host,\n h,\n Event,\n EventEmitter,\n Prop,\n Watch,\n} from '@stencil/core';\n\n@Component({\n tag: 'nano-slide',\n styleUrl: 'slide.scss',\n shadow: true,\n})\nexport class Slide implements ComponentInterface {\n /**\n * Fired when the slide has loaded.\n */\n @Event() nanoSlideReady!: EventEmitter<void>;\n\n /**\n * Used to to inform the parent slides components of readiness.\n * This will automatically be set to true when the slide has loaded but can be set and updated manually.\n */\n @Prop({ mutable: true, reflect: true }) ready: boolean | null = null;\n\n @Watch('ready')\n readyChange(newReady: boolean | null, oldReady?: boolean | null) {\n if (\n typeof oldReady !== 'undefined' &&\n oldReady === false &&\n newReady === true\n ) {\n this.nanoSlideReady.emit();\n }\n }\n\n componentDidLoad() {\n // ready state is being loaded manually\n if (typeof this.ready === 'boolean') return;\n setTimeout(() => {\n this.nanoSlideReady.emit();\n this.ready = true;\n });\n }\n\n render() {\n return (\n <Host>\n <slot />\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -3824,7 +3824,7 @@ proto.shiftWrapCells = function () {
|
|
|
3824
3824
|
|
|
3825
3825
|
const flickity = Flickity;
|
|
3826
3826
|
|
|
3827
|
-
const slidesCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--dot-color:#ccc;--dot-color-active:var(--nano-color-primary, #007495);--navbtns-icon-color:var(--dot-color-active);--navbtns-bg-color:white;--navbtns-icon-color-disabled:var(--dot-color-active);--navbtns-bg-color-disabled:white;--fsbtn-icon-color:var(--dot-color-active);--fsbtn-bg-color:white;display:block;-webkit-user-select:none;user-select:none;overflow:hidden;transition:opacity 0.2s;opacity:0}:host([ready]){opacity:1}.slideshow{
|
|
3827
|
+
const slidesCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--dot-color:#ccc;--dot-color-active:var(--nano-color-primary, #007495);--navbtns-icon-color:var(--dot-color-active);--navbtns-bg-color:white;--navbtns-icon-color-disabled:var(--dot-color-active);--navbtns-bg-color-disabled:white;--fsbtn-icon-color:var(--dot-color-active);--fsbtn-bg-color:white;display:block;-webkit-user-select:none;user-select:none;overflow:hidden;transition:opacity 0.2s;opacity:0;max-width:100vw}:host([ready]){opacity:1}.slideshow{max-height:100%;min-height:inherit;height:inherit;position:relative}.slideshow.not-ready{max-width:100vw}.flickity-container{opacity:0;transition:opacity 0.2s;display:flex}.not-ready .flickity-container{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.flickity-container.slides-ready{min-height:inherit;max-height:inherit;height:inherit;width:auto}[hidden]{display:none !important}.ui-extras{pointer-events:none;position:absolute;block-size:100%;inline-size:100%;inset-block-start:0;inset-inline-start:0}.ui-extras *{pointer-events:all}/*! Flickity v2.2.1\nhttps://flickity.metafizzy.co\n---------------------------------------------- */.flickity-enabled{position:relative;opacity:1}.flickity-enabled:focus{outline:none}.flickity-viewport{overflow:hidden;position:relative;min-block-size:100%;flex:1}.flickity-slider{position:absolute;inline-size:100%;block-size:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:grabbing}.flickity-button{position:absolute;background:var(--navbtns-bg-color);border:none;color:#333;opacity:0.75}.flickity-button:hover{opacity:1;cursor:pointer}.flickity-button:focus{outline:none;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:0.6}.flickity-button:disabled{opacity:0.3;cursor:auto;pointer-events:none;background:var(--navbtns-bg-color-disabled)}.flickity-button-icon{fill:var(--navbtns-icon-color)}.flickity-button:disabled .flickity-button-icon{fill:var(--navbtns-icon-color-disabled)}.flickity-prev-next-button{inset-block-start:50%;inline-size:44px;block-size:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{inset-inline-start:10px}.flickity-prev-next-button.next{inset-inline-end:10px}.flickity-rtl .flickity-prev-next-button.previous{inset-inline:auto 10px}.flickity-rtl .flickity-prev-next-button.next{inset-inline:10px auto}.flickity-prev-next-button .flickity-button-icon{position:absolute;inset-inline-start:20%;inset-block-start:20%;inline-size:60%;block-size:60%}.flickity-page-dots{position:absolute;inline-size:100%;inset-block-end:10px;padding:0;margin:0;list-style:none;text-align:center;line-height:1;z-index:4}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;inline-size:10px;block-size:10px;margin-block:0;margin-inline:8px;border-radius:50%;cursor:pointer;background:var(--dot-color)}.flickity-page-dots .dot.is-selected{opacity:1;background:var(--dot-color-active)}.flickity-enabled.is-fullscreen{position:fixed;inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;background:rgba(0, 0, 0, 0.9);-webkit-padding-after:35px;padding-block-end:35px;z-index:100}.flickity-enabled.is-fullscreen .flickity-page-dots{inset-block-end:45px}html.is-flickity-fullscreen{overflow:hidden}.flickity-fullscreen-button{display:block;inset-inline-end:10px;inset-block-start:10px;inline-size:24px;block-size:24px;border-radius:4px;background:var(--fsbtn-bg-color);fill:var(--fsbtn-icon-color)}.flickity-rtl .flickity-fullscreen-button{inset-inline:10px auto}.flickity-fullscreen-button-exit{display:none}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit{display:block}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view{display:none}.flickity-fullscreen-button .flickity-button-icon{position:absolute;inline-size:16px;block-size:16px;inset-inline-start:4px;inset-block-start:4px}.flickity-enabled.is-fade .flickity-slider>*{pointer-events:none;z-index:0}.flickity-enabled.is-fade .flickity-slider ::slotted(.is-selected){pointer-events:auto;z-index:1}";
|
|
3828
3828
|
|
|
3829
3829
|
const Slides = class {
|
|
3830
3830
|
constructor(hostRef) {
|
|
@@ -4100,6 +4100,8 @@ const Slides = class {
|
|
|
4100
4100
|
const finalOptions = this.normalizeOptions();
|
|
4101
4101
|
// init flickity core
|
|
4102
4102
|
await waitForSlides(this.host);
|
|
4103
|
+
this.flickityEl.style.height =
|
|
4104
|
+
this.flickityEl.getBoundingClientRect().height + 'px';
|
|
4103
4105
|
this.slidesReady = true;
|
|
4104
4106
|
this.flickityEl =
|
|
4105
4107
|
this.flickityEl || this._getRoot().querySelector('.flickity-container');
|
|
@@ -4117,7 +4119,8 @@ const Slides = class {
|
|
|
4117
4119
|
this.fullscreenBtnChanged();
|
|
4118
4120
|
this.readyflickity(flick);
|
|
4119
4121
|
this.ready = true;
|
|
4120
|
-
|
|
4122
|
+
this.flickityEl.style.height = '';
|
|
4123
|
+
// the slideshow has been initialised without any dimensions - let's add a one shot
|
|
4121
4124
|
// resize observer to kick it off when it gets some dimensions
|
|
4122
4125
|
if (!this.host.getBoundingClientRect().height) {
|
|
4123
4126
|
if (!window['ResizeObserver'])
|
|
@@ -4211,7 +4214,11 @@ const Slides = class {
|
|
|
4211
4214
|
this.destroyflickity();
|
|
4212
4215
|
}
|
|
4213
4216
|
render() {
|
|
4214
|
-
return (index.h(index.Host, null, index.h("div", { class:
|
|
4217
|
+
return (index.h(index.Host, null, index.h("div", { class: {
|
|
4218
|
+
slideshow: true,
|
|
4219
|
+
ready: this.ready,
|
|
4220
|
+
'not-ready': !this.ready,
|
|
4221
|
+
} }, index.h("div", { ref: (div) => (this.flickityEl = div), class: {
|
|
4215
4222
|
'flickity-container': true,
|
|
4216
4223
|
'slides-ready': this.slidesReady,
|
|
4217
4224
|
'slides-not-ready': !this.slidesReady,
|