@nanoporetech-digital/components 8.12.2 → 8.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/dist/cjs/{fade-CaQNh008.js → fade-C7mRKYJR.js} +1 -1
- package/dist/cjs/{fullscreen-CYmWUVa6.js → fullscreen-C0vzuH0_.js} +1 -1
- package/dist/cjs/{lazyload-CDp0tl8u.js → lazyload-Cqdwd4el.js} +1 -1
- package/dist/cjs/nano-alert.cjs.entry.js +1 -1
- package/dist/cjs/nano-avatar_5.cjs.entry.js +1 -1
- package/dist/cjs/nano-checkbox-group.cjs.entry.js +1 -1
- package/dist/cjs/{nano-data-table-B07AITiQ.js → nano-data-table-CiPPql2J.js} +3 -3
- package/dist/cjs/nano-data-table.cjs.entry.js +1 -1
- package/dist/cjs/nano-datalist_3.cjs.entry.js +5 -5
- package/dist/cjs/nano-details.cjs.entry.js +1 -1
- package/dist/cjs/nano-dialog.cjs.entry.js +1 -1
- package/dist/cjs/nano-dropdown_2.cjs.entry.js +1 -1
- package/dist/cjs/nano-in-page-nav.cjs.entry.js +1 -1
- package/dist/cjs/nano-input-otp.cjs.entry.js +1 -1
- package/dist/cjs/nano-menu-drawer.cjs.entry.js +1 -1
- package/dist/cjs/nano-nav-item.cjs.entry.js +1 -1
- package/dist/cjs/{nano-slides-lMA8e6L6.js → nano-slides-DFBGKfHj.js} +17 -35
- package/dist/cjs/nano-slides.cjs.entry.js +1 -1
- package/dist/cjs/nano-table.cjs.entry.js +2 -2
- package/dist/cjs/{slot-BUMYLmup.js → slot-CM4lrtVE.js} +3 -2
- package/dist/cjs/{table.worker-Ctqp7IJT.js → table.worker-D7SJpZlV.js} +1 -1
- package/dist/collection/components/breadcrumb/breadcrumb.js +1 -1
- package/dist/collection/components/checkbox/checkbox-group.css +5 -3
- package/dist/collection/components/data-table/table.cell.js +1 -1
- package/dist/collection/components/data-table/table.utils.js +1 -1
- package/dist/collection/components/datalist/datalist.js +5 -5
- package/dist/collection/components/icon/pictogram/accessible-and-affordable.svg +6 -0
- package/dist/collection/components/icon/pictogram/faster-results.svg +3 -0
- package/dist/collection/components/icon/pictogram/richer-insights.svg +9 -0
- package/dist/collection/components/slides/slides.js +15 -34
- package/dist/collection/components/table/table.js +3 -3
- package/dist/collection/utils/slot.js +3 -2
- package/dist/components/datalist.js +5 -5
- package/dist/components/nano-checkbox-group.js +1 -1
- package/dist/components/nano-data-table.js +2 -2
- package/dist/components/nano-table.js +3 -3
- package/dist/components/slides.js +15 -34
- package/dist/components/slot.js +3 -2
- package/dist/esm/{fade-Brdw1NLw.js → fade-OXhXz-Sa.js} +1 -1
- package/dist/esm/{fullscreen-DeZTkFNA.js → fullscreen-CsGitfqH.js} +1 -1
- package/dist/esm/{lazyload-D68gi5uV.js → lazyload-DuEV3IVe.js} +1 -1
- package/dist/esm/nano-alert.entry.js +1 -1
- package/dist/esm/nano-avatar_5.entry.js +1 -1
- package/dist/esm/nano-checkbox-group.entry.js +1 -1
- package/dist/esm/{nano-data-table-B3_-hFqj.js → nano-data-table-BXdzSqWC.js} +3 -3
- package/dist/esm/nano-data-table.entry.js +1 -1
- package/dist/esm/nano-datalist_3.entry.js +5 -5
- package/dist/esm/nano-details.entry.js +1 -1
- package/dist/esm/nano-dialog.entry.js +1 -1
- package/dist/esm/nano-dropdown_2.entry.js +1 -1
- package/dist/esm/nano-in-page-nav.entry.js +1 -1
- package/dist/esm/nano-input-otp.entry.js +1 -1
- package/dist/esm/nano-menu-drawer.entry.js +1 -1
- package/dist/esm/nano-nav-item.entry.js +1 -1
- package/dist/esm/{nano-slides-DKkSSmWQ.js → nano-slides-Dtmc0c07.js} +17 -35
- package/dist/esm/nano-slides.entry.js +1 -1
- package/dist/esm/nano-table.entry.js +2 -2
- package/dist/esm/{slot-D31cEKyt.js → slot-BeXeAw-u.js} +3 -2
- package/dist/esm/{table.worker-By3ZdRHH.js → table.worker-DftFV8Z7.js} +1 -1
- package/dist/nano-assets/hash.txt +1 -1
- package/dist/nano-assets/icon/pictogram/accessible-and-affordable.svg +6 -0
- package/dist/nano-assets/icon/pictogram/faster-results.svg +3 -0
- package/dist/nano-assets/icon/pictogram/richer-insights.svg +9 -0
- package/dist/nano-components/{fade-Brdw1NLw.js → fade-OXhXz-Sa.js} +1 -1
- package/dist/nano-components/{fullscreen-DeZTkFNA.js → fullscreen-CsGitfqH.js} +1 -1
- package/dist/nano-components/{lazyload-D68gi5uV.js → lazyload-DuEV3IVe.js} +1 -1
- package/dist/nano-components/nano-alert.entry.js +1 -1
- package/dist/nano-components/nano-avatar_5.entry.js +1 -1
- package/dist/nano-components/nano-checkbox-group.entry.js +1 -1
- package/dist/nano-components/nano-components.css +1 -1
- package/dist/nano-components/{nano-data-table-B3_-hFqj.js → nano-data-table-BXdzSqWC.js} +1 -1
- package/dist/nano-components/nano-data-table.entry.js +1 -1
- package/dist/nano-components/nano-datalist_3.entry.js +1 -1
- package/dist/nano-components/nano-details.entry.js +1 -1
- package/dist/nano-components/nano-dialog.entry.js +1 -1
- package/dist/nano-components/nano-dropdown_2.entry.js +1 -1
- package/dist/nano-components/nano-in-page-nav.entry.js +1 -1
- package/dist/nano-components/nano-input-otp.entry.js +1 -1
- package/dist/nano-components/nano-menu-drawer.entry.js +1 -1
- package/dist/nano-components/nano-nav-item.entry.js +1 -1
- package/dist/nano-components/{nano-slides-DKkSSmWQ.js → nano-slides-Dtmc0c07.js} +3 -3
- package/dist/nano-components/nano-slides.entry.js +1 -1
- package/dist/nano-components/nano-table.entry.js +1 -1
- package/dist/nano-components/pictogram/accessible-and-affordable.svg +6 -0
- package/dist/nano-components/pictogram/faster-results.svg +3 -0
- package/dist/nano-components/pictogram/richer-insights.svg +9 -0
- package/dist/nano-components/slot-BeXeAw-u.js +4 -0
- package/dist/nano-components/{table.worker-By3ZdRHH.js → table.worker-DftFV8Z7.js} +1 -1
- package/dist/style/components.css +1 -1
- package/dist/style/components.css.map +1 -1
- package/dist/style/nano.css +1 -1
- package/dist/style/nano.css.map +1 -1
- package/dist/types/components/slides/slides.d.ts +0 -1
- package/dist/types/utils/renderer.d.ts +1 -1
- package/docs-json.json +7 -2
- package/hydrate/index.js +27 -42
- package/hydrate/index.mjs +27 -42
- package/package.json +2 -2
- package/dist/nano-components/slot-D31cEKyt.js +0 -4
- /package/dist/types/builds/{8qhywLzS → YtJk83se}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/generate-vue-component.d.ts +0 -0
- /package/dist/types/builds/{8qhywLzS → YtJk83se}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/index.d.ts +0 -0
- /package/dist/types/builds/{8qhywLzS → YtJk83se}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/output-vue.d.ts +0 -0
- /package/dist/types/builds/{8qhywLzS → YtJk83se}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/plugin.d.ts +0 -0
- /package/dist/types/builds/{8qhywLzS → YtJk83se}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/types.d.ts +0 -0
- /package/dist/types/builds/{8qhywLzS → YtJk83se}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/utils.d.ts +0 -0
- /package/dist/types/builds/{8qhywLzS → YtJk83se}/0/Digital/nano-components/packages/components/.stencil/stencil.config.d.ts +0 -0
- /package/dist/types/builds/{8qhywLzS → YtJk83se}/0/Digital/nano-components/packages/components/.stencil/stencil.config.prod.d.ts +0 -0
- /package/dist/types/builds/{8qhywLzS → YtJk83se}/0/Digital/nano-components/packages/components/.stencil/testing/mocks/intersection-observer.d.ts +0 -0
- /package/dist/types/builds/{8qhywLzS → YtJk83se}/0/Digital/nano-components/packages/components/.stencil/wdio.conf.d.ts +0 -0
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
4
|
import { r as registerInstance, c as createEvent, g as getElement, h, F as Fragment, a as Host } from './index-BM3Om9WE.js';
|
|
5
|
-
import { H as HasSlotController } from './slot-
|
|
5
|
+
import { H as HasSlotController } from './slot-BeXeAw-u.js';
|
|
6
6
|
import './dom-dlicJTEJ.js';
|
|
7
7
|
|
|
8
8
|
const inputOtpCss = ".sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h{--color:initial;--min-width:40px;--width:40px;--height:50px;--gap:8px;--icon-size:var(--nano-pictogram-size-small);--inline-padding:calc(var(--icon-size) + var(--gap));--spacing:var(--nano-spacing-xl);--separator-width:7px;--separator-height:1px;--separator-border-radius:0;--separator-color:var(--nano-color-primary-1000);--highlight-color-valid:var(--nano-color-success-1100);--highlight-color-invalid:var(--nano-color-warning-1100);--border-radius:8px;--border-color:var(--nano-color-neutral-700);--border-width:1px;display:block;position:relative;margin-inline:var(--inline-padding)}.input-otp-container.sc-nano-input-otp{position:relative;inline-size:fit-content;block-size:fit-content;margin:0 auto}.input-otp-group.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;gap:var(--gap)}.native-wrapper.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;min-inline-size:var(--min-width)}.native-input.sc-nano-input-otp{border-radius:var(--border-radius);inline-size:var(--width);min-inline-size:inherit;block-size:var(--height);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;appearance:none}.input-otp-description.sc-nano-input-otp{color:currentcolor;font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);text-align:center;position:relative;margin-block-start:var(--spacing)}.input-otp-description-hidden.sc-nano-input-otp{display:none}.input-otp-separator.sc-nano-input-otp{border-radius:var(--separator-border-radius);flex-shrink:0;inline-size:var(--separator-width);block-size:var(--separator-height);background:var(--separator-color)}.input-otp-disabled.sc-nano-input-otp-h .input-otp-description.sc-nano-input-otp,.input-otp-disabled.sc-nano-input-otp-h .input-otp-group.sc-nano-input-otp{--color:var(--nano-color-neutral-700);opacity:0.5}.input-otp-disabled.sc-nano-input-otp-h,.input-otp-disabled.sc-nano-input-otp-h .native-input.sc-nano-input-otp:disabled{cursor:not-allowed}.has-focus.sc-nano-input-otp-h .native-input.sc-nano-input-otp:focus{outline:var(--nano-focus-ring)}.nano-invalid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-invalid)}.nano-valid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-valid)}.input-otp-icon.sc-nano-input-otp{position:absolute;inset-block-start:50%;transform:translateY(-43%);inset-inline-end:calc((var(--gap) + var(--icon-size)) * -1);inline-size:var(--icon-size);block-size:var(--icon-size);display:flex;align-items:center}.input-otp-icon--valid.sc-nano-input-otp{color:var(--nano-color-success-1100)}.input-otp-icon--invalid.sc-nano-input-otp{color:var(--nano-color-warning-1100)}";
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import { r as registerInstance, g as getElement, d as writeTask, a as Host } from './index-BM3Om9WE.js';
|
|
5
5
|
import { c as closestElement } from './dom-dlicJTEJ.js';
|
|
6
6
|
import { t as transformTag, h } from './renderer-DpNDfhNy.js';
|
|
7
|
-
import { H as HasSlotController } from './slot-
|
|
7
|
+
import { H as HasSlotController } from './slot-BeXeAw-u.js';
|
|
8
8
|
|
|
9
9
|
const menuDrawerCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--padding-top:13px;--padding-end:13px;--padding-bottom:13px;--padding-start:13px;--icon-size:19px;--font-size:var(--nano-font-size-xs);--bg-color:var(--nano-color-surface-50);--bg-color-hover:var(--nano-color-neutral-75);--bg-color-selected:var(--nano-color-neutral-300);--bg-color-open:var(--nano-color-neutral-300);--content-color:var(--nano-color-neutral-1400);--divider-color:var(--nano-color-neutral-300);--global-nav-height:76px;--menu-width:calc((var(--padding-end) + var(--padding-start)) + var(--icon-size));color-scheme:dark;display:block;z-index:1;background:var(--bg-color);color:var(--content-color);min-block-size:100%}:host(.hide){display:none}.head{border-block-end:var(--divider-color) 1px solid}.container{inset-inline-end:auto;color:var(--content-color);inline-size:var(--menu-width);transition:inline-size 0.3s ease;inset-block-start:var(--global-nav-height);position:sticky;display:flex;flex-direction:column;block-size:100%;max-block-size:calc(100vh - var(--global-nav-height))}:host(.open) .container{inline-size:auto}.content-wrap{inset-inline-start:0;inset-block-start:0;inline-size:inherit;background:var(--bg-color);font-size:var(--font-size);line-height:1;display:flex;flex-direction:column;align-items:stretch;flex:1;box-shadow:var(--nano-shadow-ls)}.content-wrap.secondary-open{box-shadow:none}.content-wrap::after{content:\"\";position:absolute;inset:calc(var(--global-nav-height) * -1) 0 0;background-color:var(--bg-color);z-index:-1}.content{inline-size:auto;display:flex;flex-direction:column;overflow:hidden visible;flex:1}.collapse-btn{all:unset;padding-block:6px;margin-block-start:5px;padding-inline:var(--padding-start) var(--padding-end);inline-size:100%;display:flex;justify-items:flex-start;appearance:none;cursor:pointer;font-size:var(--icon-size)}.collapse-btn:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.collapse-btn:hover{background-color:var(--bg-color-hover)}.collapse-btn:active{background-color:var(--bg-color-selected)}.collapse-btn .nano-icon{transition:var(--nano-transition-x-fast) rotate ease-in-out;rotate:0deg}:host(.open) .collapse-btn .nano-icon{rotate:180deg}.visually-hidden{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.foot{margin-block:auto var(--padding-bottom)}";
|
|
10
10
|
|
|
@@ -5,7 +5,7 @@ import { r as registerInstance, c as createEvent, g as getElement, a as Host } f
|
|
|
5
5
|
import { g as getDirectChildren } from './dom-dlicJTEJ.js';
|
|
6
6
|
import { g as getTabbableElements } from './tabbable-BgopY-vd.js';
|
|
7
7
|
import { t as transformTag, h } from './renderer-DpNDfhNy.js';
|
|
8
|
-
import { H as HasSlotController } from './slot-
|
|
8
|
+
import { H as HasSlotController } from './slot-BeXeAw-u.js';
|
|
9
9
|
import { f as focusInContainer } from './active-element-CKJIkX0R.js';
|
|
10
10
|
|
|
11
11
|
/**
|
|
@@ -2488,7 +2488,6 @@ const Slides = class {
|
|
|
2488
2488
|
}
|
|
2489
2489
|
flickityEl;
|
|
2490
2490
|
flickityReady = false;
|
|
2491
|
-
mutationO;
|
|
2492
2491
|
resizeO;
|
|
2493
2492
|
readyflickity;
|
|
2494
2493
|
flickity = new Promise((resolve) => {
|
|
@@ -2552,7 +2551,7 @@ const Slides = class {
|
|
|
2552
2551
|
async animationChange(_, oldAnim) {
|
|
2553
2552
|
const [flkty, slides] = await Promise.all([
|
|
2554
2553
|
this.getflickity(),
|
|
2555
|
-
this.waitForSlides(
|
|
2554
|
+
this.waitForSlides(),
|
|
2556
2555
|
]);
|
|
2557
2556
|
// clear old stuff
|
|
2558
2557
|
slides.forEach((slide) => {
|
|
@@ -2642,9 +2641,11 @@ const Slides = class {
|
|
|
2642
2641
|
* child slides.
|
|
2643
2642
|
*/
|
|
2644
2643
|
async update() {
|
|
2644
|
+
if (!this.didInit)
|
|
2645
|
+
return;
|
|
2645
2646
|
const [flickity] = await Promise.all([
|
|
2646
2647
|
this.getflickity(),
|
|
2647
|
-
this.waitForSlides(
|
|
2648
|
+
this.waitForSlides(),
|
|
2648
2649
|
]);
|
|
2649
2650
|
this.childrenEles = this.host.querySelectorAll(`${transformTag('nano-slide')} > *`);
|
|
2650
2651
|
flickity.reloadCells();
|
|
@@ -2816,15 +2817,15 @@ const Slides = class {
|
|
|
2816
2817
|
}
|
|
2817
2818
|
async loadFlickityModules(opts) {
|
|
2818
2819
|
if (!this.hasFullScreenModule && opts.fullscreen) {
|
|
2819
|
-
await import('./fullscreen-
|
|
2820
|
+
await import('./fullscreen-CsGitfqH.js');
|
|
2820
2821
|
this.hasFullScreenModule = true;
|
|
2821
2822
|
}
|
|
2822
2823
|
if (!this.hasLazyLoadModule && opts.lazyLoad) {
|
|
2823
|
-
await import('./lazyload-
|
|
2824
|
+
await import('./lazyload-DuEV3IVe.js');
|
|
2824
2825
|
this.hasLazyLoadModule = true;
|
|
2825
2826
|
}
|
|
2826
2827
|
if (!this.hasFadeModule && opts.fade) {
|
|
2827
|
-
await import('./fade-
|
|
2828
|
+
await import('./fade-OXhXz-Sa.js');
|
|
2828
2829
|
this.hasFadeModule = true;
|
|
2829
2830
|
}
|
|
2830
2831
|
}
|
|
@@ -2832,7 +2833,7 @@ const Slides = class {
|
|
|
2832
2833
|
const finalOptions = this.normalizeOptions();
|
|
2833
2834
|
await this.loadFlickityModules(finalOptions);
|
|
2834
2835
|
// init flickity core
|
|
2835
|
-
await this.waitForSlides(
|
|
2836
|
+
await this.waitForSlides();
|
|
2836
2837
|
this.flickityEl =
|
|
2837
2838
|
this.flickityEl || this._getRoot().querySelector('.flickity-container');
|
|
2838
2839
|
if (!this.flickityEl)
|
|
@@ -2922,8 +2923,8 @@ const Slides = class {
|
|
|
2922
2923
|
// @ts-expect-error - merged options don't quite match the flickity options
|
|
2923
2924
|
return { ...flickityOptions, ...mergedEventOptions, ...this.options };
|
|
2924
2925
|
}
|
|
2925
|
-
waitForSlides = (
|
|
2926
|
-
const allSlides = Array.from(host.querySelectorAll(transformTag('nano-slide')));
|
|
2926
|
+
waitForSlides = () => {
|
|
2927
|
+
const allSlides = Array.from(this.host.querySelectorAll(transformTag('nano-slide')));
|
|
2927
2928
|
this.slideCount = allSlides.length;
|
|
2928
2929
|
let toLoadSlides = allSlides.filter((ele) => !ele.ready);
|
|
2929
2930
|
if (!toLoadSlides.length)
|
|
@@ -2933,13 +2934,13 @@ const Slides = class {
|
|
|
2933
2934
|
toLoadSlides = toLoadSlides.filter((ele) => ele !== ev.target);
|
|
2934
2935
|
if (!toLoadSlides.length) {
|
|
2935
2936
|
resolve(allSlides);
|
|
2936
|
-
host.removeEventListener('nanoSlideReady', slideResolver);
|
|
2937
|
-
host.removeEventListener('nano-slide-ready', slideResolver);
|
|
2937
|
+
this.host.removeEventListener('nanoSlideReady', slideResolver);
|
|
2938
|
+
this.host.removeEventListener('nano-slide-ready', slideResolver);
|
|
2938
2939
|
}
|
|
2939
2940
|
};
|
|
2940
|
-
host.addEventListener('nanoSlideReady', slideResolver);
|
|
2941
|
+
this.host.addEventListener('nanoSlideReady', slideResolver);
|
|
2941
2942
|
// fallback for vue who can't handle camelcase event names
|
|
2942
|
-
host.addEventListener('nano-slide-ready', slideResolver);
|
|
2943
|
+
this.host.addEventListener('nano-slide-ready', slideResolver);
|
|
2943
2944
|
});
|
|
2944
2945
|
};
|
|
2945
2946
|
componentDidLoad() {
|
|
@@ -2948,27 +2949,8 @@ const Slides = class {
|
|
|
2948
2949
|
this.didInit = true;
|
|
2949
2950
|
this.initflickity();
|
|
2950
2951
|
}
|
|
2951
|
-
if (typeof window !== 'undefined' &&
|
|
2952
|
-
window.MutationObserver) {
|
|
2953
|
-
const mut = (this.mutationO = new MutationObserver((e) => {
|
|
2954
|
-
if (e[0].addedNodes[0] &&
|
|
2955
|
-
e[0].addedNodes[0].nodeName.toLowerCase() ===
|
|
2956
|
-
transformTag('nano-slide') &&
|
|
2957
|
-
this.flickityReady) {
|
|
2958
|
-
this.update();
|
|
2959
|
-
}
|
|
2960
|
-
}));
|
|
2961
|
-
mut.observe(this.host, {
|
|
2962
|
-
childList: true,
|
|
2963
|
-
subtree: true,
|
|
2964
|
-
});
|
|
2965
|
-
}
|
|
2966
2952
|
}
|
|
2967
2953
|
disconnectedCallback() {
|
|
2968
|
-
if (this.mutationO) {
|
|
2969
|
-
this.mutationO.disconnect();
|
|
2970
|
-
this.mutationO = undefined;
|
|
2971
|
-
}
|
|
2972
2954
|
if (this.resizeO) {
|
|
2973
2955
|
this.resizeO.disconnect();
|
|
2974
2956
|
this.resizeO = undefined;
|
|
@@ -2976,15 +2958,15 @@ const Slides = class {
|
|
|
2976
2958
|
this.destroyflickity();
|
|
2977
2959
|
}
|
|
2978
2960
|
render() {
|
|
2979
|
-
return (h(Host, { key: '
|
|
2961
|
+
return (h(Host, { key: '87cf8ae3ff3ded83f82ef3bfc5d76381afb967e0', class: "nano-slides" }, h("div", { key: 'af12496fc219421dcf416607a7c5cc9b0e59968e', class: {
|
|
2980
2962
|
slideshow: true,
|
|
2981
2963
|
ready: this.ready,
|
|
2982
2964
|
'not-ready': !this.ready,
|
|
2983
|
-
}, part: "base" }, h("div", { key: '
|
|
2965
|
+
}, part: "base" }, h("div", { key: 'c5995f58b334a741e4c7930be1354d4814dd436b', ref: (div) => (this.flickityEl = div), class: {
|
|
2984
2966
|
'flickity-container': true,
|
|
2985
2967
|
'slides-ready': this.slidesReady,
|
|
2986
2968
|
'slides-not-ready': !this.slidesReady,
|
|
2987
|
-
}, part: "slide-container" }, h("slot", { key: '
|
|
2969
|
+
}, part: "slide-container" }, h("slot", { key: 'f4b17d46db05d7b23ff79501cc435b2b6beadcb2', onSlotchange: () => this.update() })), h("div", { key: '483ab2edd42b87d48bcc0793cbe5c21efdd1a4d3', class: "ui-extras" }, h("slot", { key: '8fc3e7b78980381d52817c0faa80efa5439a14a6', name: "ui" })), this.slideCount > 1 && this.pager && (h("div", { key: '4e7c781d179dda4d43356ae9a5892d913d17b43c', class: "pagination flickity-page-dots", part: "pagination" }, Array.from({ length: this.slideCount }).map((_, index) => (h("button", { part: "pagination-item--active", key: index, class: {
|
|
2988
2970
|
'pagination-btn': true,
|
|
2989
2971
|
'pagination-btn--active': this.isActive(index),
|
|
2990
2972
|
'is-selected': this.isActive(index),
|
|
@@ -226,10 +226,10 @@ const NanoTable = class {
|
|
|
226
226
|
this.cleanUpObservers();
|
|
227
227
|
}
|
|
228
228
|
render() {
|
|
229
|
-
return (h(Host, { key: '
|
|
229
|
+
return (h(Host, { key: 'bd86de55fe8bc0259cf6e7e112c4bb48ad190761', class: {
|
|
230
230
|
'nano-table': true,
|
|
231
231
|
'nano-table--props-ready': this.propsReady,
|
|
232
|
-
} }, this.scrollable && (h("nano-masked-overflow", { key: '
|
|
232
|
+
} }, this.scrollable && (h("nano-masked-overflow", { key: '7002c33f0368801339f718e191922cb03b28ce08', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '60b7c9a2d7a6bde7ffcde6ce62b0477790601cf5', class: "nano-table__overflow" }))), h("slot", { key: '3d4fb01789dd5c1b0a2b3872534e796e5182d579' })));
|
|
233
233
|
}
|
|
234
234
|
static get watchers() { return {
|
|
235
235
|
"compact": ["handleCompactChange"],
|
|
@@ -66,7 +66,8 @@ class HasSlotController {
|
|
|
66
66
|
// * Regular shadow DOM component *
|
|
67
67
|
childNodes = [...this.host.shadowRoot.childNodes];
|
|
68
68
|
}
|
|
69
|
-
else if (!this.host.classList.contains('hydrated')
|
|
69
|
+
else if (!this.host.classList.contains('hydrated') &&
|
|
70
|
+
this.host.__childNodes) {
|
|
70
71
|
// * Non-shadow, polyfilled component *
|
|
71
72
|
// Component has not done initial render. Return component internals
|
|
72
73
|
childNodes = [...(this.host?.__childNodes ?? [])];
|
|
@@ -76,7 +77,7 @@ class HasSlotController {
|
|
|
76
77
|
childNodes = [...this.host.childNodes];
|
|
77
78
|
}
|
|
78
79
|
return childNodes.some((node) => {
|
|
79
|
-
if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()
|
|
80
|
+
if (node.nodeType === Node.TEXT_NODE && !!node.textContent.trim()) {
|
|
80
81
|
return true;
|
|
81
82
|
}
|
|
82
83
|
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import { c as createWorker } from './nano-data-table-
|
|
4
|
+
import { c as createWorker } from './nano-data-table-BXdzSqWC.js';
|
|
5
5
|
import './index-BM3Om9WE.js';
|
|
6
6
|
import './renderer-DpNDfhNy.js';
|
|
7
7
|
import './math-BEqsTfVK.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
NfUzQu5iQ9F5xh/IwEo7uTTLLe8=
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg width="48" height="40" viewBox="0 0 48 40">
|
|
2
|
+
<path d="M46.8222 19.4092C44.5863 17.1568 40.9487 17.158 38.7128 19.4092L32.6099 25.5572L33.2351 26.1871L39.338 20.0391C41.2293 18.1352 44.3057 18.1339 46.1969 20.0391L46.7495 20.5957L32.8399 34.6086C29.9589 37.5109 26.1283 39.1092 22.0542 39.1092H0V40H22.0542C26.3645 40 30.4171 38.3091 33.4651 35.2385L48 20.5957L46.8222 19.4092Z" />
|
|
3
|
+
<path d="M7.13331 25.6088C9.83358 24.0819 13.0562 23.8092 15.9698 24.8615C18.2433 25.6814 20.6199 26.097 23.0334 26.097H28.4426C29.8387 26.097 30.9739 27.2407 30.9739 28.647C30.9739 30.0528 29.8387 31.1964 28.4426 31.1964H16.6617V32.0872H28.4426C30.3258 32.0872 31.8582 30.5442 31.8582 28.647C31.8582 26.7499 30.3258 25.2062 28.4426 25.2062H23.0334C20.7216 25.2062 18.4456 24.808 16.2682 24.0229C13.1117 22.8842 9.62393 23.1793 6.70104 24.8323L5.60897 25.4485C3.89964 26.4145 1.95969 26.9251 0 26.9251V27.8159C2.11138 27.8159 4.20056 27.2655 6.04124 26.225L7.13331 25.6088Z" />
|
|
4
|
+
<path d="M23.9497 20.4758C29.5538 20.4758 34.1126 15.8833 34.1126 10.2379C34.1126 4.5925 29.5538 0 23.9497 0C18.3457 0 13.7863 4.5925 13.7863 10.2379C13.7863 15.8833 18.3457 20.4758 23.9497 20.4758ZM23.9497 0.890794C29.066 0.890794 33.2284 5.08386 33.2284 10.2379C33.2284 15.392 29.066 19.585 23.9497 19.585C18.8329 19.585 14.6705 15.392 14.6705 10.2379C14.6705 5.08386 18.8329 0.890794 23.9497 0.890794Z" />
|
|
5
|
+
<path d="M24.0823 14.5416C22.9773 14.5416 22.0782 13.6359 22.0782 12.5227H21.194C21.194 13.9747 22.2581 15.171 23.6402 15.3873V16.9996H24.5245V15.3873C25.9067 15.171 26.9713 13.9747 26.9713 12.5227C26.9713 10.9181 25.6751 9.61237 24.0823 9.61237C22.9773 9.61237 22.0782 8.70667 22.0782 7.59349C22.0782 6.47969 22.9773 5.57398 24.0823 5.57398C25.188 5.57398 26.087 6.47969 26.087 7.59349H26.9713C26.9713 6.14145 25.9067 4.94471 24.5245 4.72823V3.11405H23.6402V4.72823C22.2581 4.94471 21.194 6.14145 21.194 7.59349C21.194 9.19804 22.4895 10.5032 24.0823 10.5032C25.188 10.5032 26.087 11.4089 26.087 12.5227C26.087 13.6359 25.188 14.5416 24.0823 14.5416Z" />
|
|
6
|
+
</svg>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<svg width="48" height="42" viewBox="0 0 48 42">
|
|
2
|
+
<path d="M48 41.0615H0V42H48V41.0615Z" />
|
|
3
|
+
<path d="M16.3525 5.45348H31.4498C30.9561 5.10562 30.4484 4.78655 29.9209 4.51493H17.881C17.3537 4.78655 16.8462 5.10562 16.3525 5.45348Z" />
|
|
4
|
+
<path d="M12.2811 10.0814C12.1206 10.3889 11.9792 10.7032 11.845 11.02H35.9692C35.8338 10.7014 35.6847 10.3886 35.5239 10.0814H12.2811Z" />
|
|
5
|
+
<path d="M10.8257 16.5865H36.983C36.9884 16.4306 37.0058 16.2768 37.0058 16.1198C37.0058 15.9611 36.9884 15.8057 36.9828 15.6479H10.8259C10.8147 15.961 10.8146 16.2735 10.8257 16.5865Z" />
|
|
6
|
+
<path d="M12.2788 22.153H35.5262C35.6869 21.8457 35.8363 21.5332 35.9715 21.2145H11.8427C11.9767 21.5312 12.1185 21.8456 12.2788 22.153Z" />
|
|
7
|
+
<path d="M17.8676 27.7202H29.9352C30.4642 27.4456 30.9716 27.129 31.4619 26.7816H16.3407C16.831 27.129 17.3383 27.4456 17.8676 27.7202Z" />
|
|
8
|
+
<path d="M48 2.90879H33.1773C27.6267 -0.969598 20.1764 -0.969598 14.6258 2.90879H0V3.84734H13.4081C13.0844 4.12289 12.7616 4.40039 12.4558 4.70539C9.42602 7.72721 7.86699 11.6589 7.74623 15.6263H0V16.5649H7.74394C7.85321 20.5488 9.41371 24.5002 12.4558 27.5343C12.7444 27.8221 13.0499 28.0824 13.3543 28.3439H0V29.2824H14.5599C17.3498 31.2528 20.6214 32.2539 23.9016 32.2539C27.1735 32.2539 30.4373 31.2581 33.2224 29.2977L42.4734 38.5233C42.9833 39.0319 43.6527 39.2858 44.3221 39.2858C44.9922 39.2858 45.6616 39.0319 46.1716 38.5233L46.3665 38.3289C47.3857 37.3125 47.3857 35.6579 46.3665 34.6415L40.9931 29.2824H48V28.3439H40.052L37.1154 25.4152C38.9917 22.764 39.9734 19.6783 40.0588 16.5649H48V15.6263H40.0564C39.9358 11.6589 38.3768 7.72721 35.3473 4.70539C35.0415 4.40039 34.7188 4.12289 34.395 3.84734H48V2.90879ZM45.701 35.3051C46.0173 35.6206 46.1913 36.0395 46.1913 36.4852C46.1913 36.9309 46.0173 37.3498 45.701 37.6653L45.5061 37.8596C44.8734 38.4893 43.7715 38.4906 43.1388 37.8596L33.9898 28.7356C34.458 28.3627 34.9138 27.9666 35.3473 27.5343C35.7808 27.102 36.1779 26.6474 36.5519 26.1805L45.701 35.3051ZM34.6818 26.8706C28.7371 32.7984 19.0647 32.7984 13.1213 26.8706C10.2415 23.9987 8.65586 20.181 8.65586 16.1198C8.65586 12.0587 10.2415 8.24099 13.1213 5.36905C16.0936 2.40548 19.9973 0.923701 23.9016 0.923701C27.8058 0.923701 31.7095 2.40548 34.6818 5.36905C40.6246 11.2968 40.6252 20.9428 34.6818 26.8706Z" />
|
|
9
|
+
</svg>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import{F as t,u as i}from"./nano-slides-
|
|
4
|
+
import{F as t,u as i}from"./nano-slides-Dtmc0c07.js";import"./index-BM3Om9WE.js";import"./renderer-DpNDfhNy.js";const s=t.Slide,h=s.prototype.updateTarget;s.prototype.updateTarget=function(...t){if(h.apply(this,t),!this.parent.options.fade)return;const i=this.target-this.x,s=this.cells[0].x;this.cells.forEach((function(t){t.renderPosition(t.x-s-i)}))},s.prototype.setOpacity=function(t){this.cells.forEach((function(i){i.element.style.opacity=t}))};const n=t.prototype;t.createMethods.push("_createFade"),n._createFade=function(){this.fadeIndex=this.selectedIndex,this.prevSelectedIndex=this.selectedIndex,this.on("select",this.onSelectFade),this.on("dragEnd",this.onDragEndFade),this.on("settle",this.onSettleFade),this.on("activate",this.onActivateFade),this.on("deactivate",this.onDeactivateFade)};const o=n.updateSlides;n.updateSlides=function(...t){o.apply(this,t),this.options.fade&&this.slides.forEach((function(t,i){t.setOpacity(i==this.selectedIndex?1:0)}),this)},n.onSelectFade=function(){this.fadeIndex=Math.min(this.prevSelectedIndex,this.slides.length-1),this.prevSelectedIndex=this.selectedIndex},n.onSettleFade=function(){delete this.didDragEnd,this.options.fade&&(this.selectedSlide.setOpacity(1),this.slides[this.fadeIndex]&&this.fadeIndex!=this.selectedIndex&&this.slides[this.fadeIndex].setOpacity(0))},n.onDragEndFade=function(){this.didDragEnd=!0},n.onActivateFade=function(){this.options.fade&&this.element.classList.add("is-fade")},n.onDeactivateFade=function(){this.options.fade&&(this.element.classList.remove("is-fade"),this.slides.forEach((function(t){t.setOpacity("")})))};const c=n.positionSlider;n.positionSlider=function(...t){this.options.fade?(this.fadeSlides(),this.dispatchScrollEvent()):c.apply(this,t)};const u=n.positionSliderAtSelected;n.positionSliderAtSelected=function(...t){this.options.fade&&this.setTranslateX(0),u.apply(this,t)},n.fadeSlides=function(){if(this.slides.length<2)return;const t=this.getFadeIndexes(),i=this.slides[t.a],s=this.slides[t.b],h=this.wrapDifference(i.target,s.target);let n=this.wrapDifference(i.target,-this.x);n/=h,i.setOpacity(1-n),s.setOpacity(n);let o=t.a;this.isDragging&&(o=n>.5?t.a:t.b),null!=this.fadeHideIndex&&this.fadeHideIndex!=o&&this.fadeHideIndex!=t.a&&this.fadeHideIndex!=t.b&&this.slides[this.fadeHideIndex].setOpacity(0),this.fadeHideIndex=o},n.getFadeIndexes=function(){return this.isDragging||this.didDragEnd||void 0===this.fadeIndex?this.options.wrapAround?this.getFadeDragWrapIndexes():this.getFadeDragLimitIndexes():{a:this.fadeIndex,b:this.selectedIndex}},n.getFadeDragWrapIndexes=function(){const t=this.slides.map((function(t,i){return this.getSlideDistance(-this.x,i)}),this),s=t.map((function(t){return Math.abs(t)})),h=Math.min(...s),n=s.indexOf(h);return{a:n,b:i.modulo(n+(t[n]>=0?1:-1),this.slides.length)}},n.getFadeDragLimitIndexes=function(){let t=0;for(let i=0;i<this.slides.length-1&&!(-this.x<this.slides[i].target);i++)t=i;return{a:t,b:t+1}},n.wrapDifference=function(t,i){let s=i-t;if(!this.options.wrapAround)return s;const h=s+this.slideableWidth,n=s-this.slideableWidth;return Math.abs(h)<Math.abs(s)&&(s=h),Math.abs(n)<Math.abs(s)&&(s=n),s};const e=n._getWrapShiftCells;n._getWrapShiftCells=function(...t){this.options.fade||e.apply(this,t)};const f=n.shiftWrapCells;n.shiftWrapCells=function(...t){this.options.fade||f.apply(this,t)}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import{F as t}from"./nano-slides-
|
|
4
|
+
import{F as t}from"./nano-slides-Dtmc0c07.js";import"./index-BM3Om9WE.js";import"./renderer-DpNDfhNy.js";t.createMethods.push("_createFullscreen");const i=t.prototype;i._createFullscreen=function(){this.isFullscreen=!1,this.options.fullscreen&&(this.viewFullscreenButton=new n("view",this),this.exitFullscreenButton=new n("exit",this),this.on("activate",this._changeFullscreenActive),this.on("deactivate",this._changeFullscreenActive))},i._changeFullscreenActive=function(){const t=this.isActive?"appendChild":"removeChild";this.element[t](this.viewFullscreenButton.element),this.element[t](this.exitFullscreenButton.element);const i=this.isActive?"activate":"deactivate";this.viewFullscreenButton[i](),this.exitFullscreenButton[i]()},i.viewFullscreen=function(){this._changeFullscreen(!0),this.focus()},i.exitFullscreen=function(){this._changeFullscreen(!1)},i._changeFullscreen=function(t){if(this.isFullscreen==t)return;this.isFullscreen=t;const i=t?"add":"remove";document.documentElement.classList[i]("is-flickity-fullscreen"),this.element.classList[i]("is-fullscreen"),this.resize(),this.isFullscreen&&this.reposition(),this.dispatchEvent("fullscreenChange",null,[t])},i.toggleFullscreen=function(){this._changeFullscreen(!this.isFullscreen)};const s=i.setGallerySize;function n(t,i){this.name=t,this.createButton(),this.createIcon(),this.onClick=function(){i[t+"Fullscreen"]()},this.clickHandler=this.onClick.bind(this)}i.setGallerySize=function(){this.options.setGallerySize&&(this.isFullscreen?this.viewport.style.height="":s.call(this))},t.keyboardHandlers[27]=function(){this.exitFullscreen()},n.prototype.createButton=function(){const t=this.element=document.createElement("button");t.className="flickity-button flickity-fullscreen-button flickity-fullscreen-button-"+this.name,t.setAttribute("type","button");const i=(s=this.name+" full-screen")[0].toUpperCase()+s.slice(1);var s;t.setAttribute("aria-label",i),t.title=i};const h="http://www.w3.org/2000/svg",c={view:"M15,20,7,28h5v4H0V20H4v5l8-8Zm5-5,8-8v5h4V0H20V4h5l-8,8Z",exit:"M32,3l-7,7h5v4H18V2h4V7l7-7ZM3,32l7-7v5h4V18H2v4H7L0,29Z"};n.prototype.createIcon=function(){const t=document.createElementNS(h,"svg");t.setAttribute("class","flickity-button-icon"),t.setAttribute("viewBox","0 0 32 32");const i=document.createElementNS(h,"path");i.setAttribute("d",c[this.name]),t.appendChild(i),this.element.appendChild(t)},n.prototype.activate=function(){this.element.addEventListener("click",this.clickHandler)},n.prototype.deactivate=function(){this.element.removeEventListener("click",this.clickHandler)},t.FullscreenButton=n;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import{F as t,u as i}from"./nano-slides-
|
|
4
|
+
import{F as t,u as i}from"./nano-slides-Dtmc0c07.js";import"./index-BM3Om9WE.js";import"./renderer-DpNDfhNy.js";t.createMethods.push("_createLazyload");const s=t.prototype;function a(t,i){this.img=t,this.flickity=i,this.load()}s._createLazyload=function(){this.on("select",this.lazyLoad)},s.lazyLoad=function(){const t=this.options.lazyLoad;if(!t)return;const s=this.getAdjacentCellElements("number"==typeof t?t:0);let l=[];s.forEach((function(t){const s=function(t){if("IMG"==t.nodeName){const i=t.getAttribute("data-flickity-lazyload"),s=t.getAttribute("data-flickity-lazyload-src"),a=t.getAttribute("data-flickity-lazyload-srcset");if(i||s||a)return[t]}const s=t.querySelectorAll("img[data-flickity-lazyload], img[data-flickity-lazyload-src], img[data-flickity-lazyload-srcset]");return i.makeArray(s)}(t);l=l.concat(s)})),l.forEach((function(t){new a(t,this)}),this)},a.prototype.handleEvent=i.handleEvent,a.prototype.load=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this);const t=this.img.getAttribute("data-flickity-lazyload")||this.img.getAttribute("data-flickity-lazyload-src"),i=this.img.getAttribute("data-flickity-lazyload-srcset");this.img.src=t,i&&this.img.setAttribute("srcset",i),this.img.removeAttribute("data-flickity-lazyload"),this.img.removeAttribute("data-flickity-lazyload-src"),this.img.removeAttribute("data-flickity-lazyload-srcset")},a.prototype.onload=function(t){this.complete(t,"flickity-lazyloaded")},a.prototype.onerror=function(t){this.complete(t,"flickity-lazyerror")},a.prototype.complete=function(t,i){this.img.removeEventListener("load",this),this.img.removeEventListener("error",this);const s=this.flickity.getParentCell(this.img),a=s&&s.element;this.flickity.cellSizeChange(a),this.img.classList.add(i),this.flickity.dispatchEvent("lazyLoad",t,a)},t.LazyLoader=a;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import{r as n,c as t,g as o,a}from"./index-BM3Om9WE.js";import{M as e}from"./modal-CY_3_LJ7.js";import{l as i,u as r}from"./scroll-1nFw8CNk.js";import{h as s,t as l}from"./renderer-DpNDfhNy.js";import{b as c}from"./active-element-CKJIkX0R.js";import{H as h}from"./slot-D31cEKyt.js";import"./tabbable-BgopY-vd.js";import"./dom-dlicJTEJ.js";let d,m,u,p;globalThis.document&&(d=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tr"}),m=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tl"}),u=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--bl"}),p=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--br"}));const f=class{constructor(o){n(this,o),this.nanoShow=t(this,"nanoShow",7),this.nanoAfterShow=t(this,"nanoAfterShow",7),this.nanoHide=t(this,"nanoHide",7),this.nanoAfterHide=t(this,"nanoAfterHide",7)}panel;overlay;modal;originalTrigger;goingToHide=!1;goingToShow=!1;autoHideTimeout;remainingTimeInterval;countdownAnimation;countdownElement;slotCtrl=new h(this,"[default]","heading","title","footer");isModal=!1;isToast=!1;isShowing=!1;label;noDismiss=!1;get host(){return o(this)}open=!1;handleOpenChange(){this.open?this.show():this.hide()}closable=!1;color;theme;duration=1/0;remainingTime=this.duration;handleDurationChange(){this.restartAutoHide()}hoist=!1;handleHoistChange(){this.hoist&&document.body.children[0]!==this.host&&document.body.prepend(this.host)}countdown=!0;nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;async show(){if(!this.goingToShow)return this.nanoShow.emit().defaultPrevented?(this.open=!1,!1):(this.host.hidden=!1,this.goingToShow=!0,this.open=!0,requestAnimationFrame((()=>{this.isShowing=!0,this.goingToShow=!1})),void(this.duration<1/0&&this.restartAutoHide()))}async hide(){if(!this.goingToHide)return this.nanoHide.emit().defaultPrevented?(this.open=!0,!1):(this.goingToHide=!0,this.open=!1,c(this.host),requestAnimationFrame((()=>this.goingToHide=!1)),clearTimeout(this.autoHideTimeout),void clearInterval(this.remainingTimeInterval))}async toast(n="tr"){return this.isToast=!0,new Promise((t=>{let o;switch(this.handleCountdownChange(),n){case"tl":o=m;break;case"bl":o=u;break;case"br":o=p;break;default:o=d}o.isConnected||document.body.appendChild(o),o.appendChild(this.host),this.connectedCallback(),this.show();const a=()=>{this.host.remove(),this.isToast=!1,t(),o.querySelector(l("nano-alert"))||o.remove()};this.host.addEventListener("nanoAfterHide",a,{once:!0}),this.host.addEventListener("nano-after-hide",a,{once:!0})}))}async alert(n){return this.isModal=!0,this.label=n,new Promise((n=>{let t=!1;for(const n of document.body.children)"NANO-ALERT"===n.tagName&&n===this.host&&(t=!0);t||document.body.append(this.host),this.modal.activate(),i(this.host),this.originalTrigger=document.activeElement,requestAnimationFrame((()=>{this.show()}));const o=()=>requestAnimationFrame((()=>this.panel.focus({preventScroll:!0}))),a=()=>{this.modal.deactivate(),this.host.remove(),this.label=void 0,this.isModal=!1,n(),this.originalTrigger&&"function"==typeof this.originalTrigger.focus&&setTimeout((()=>this.originalTrigger.focus()))};this.host.addEventListener("nanoAfterShow",o,{once:!0}),this.host.addEventListener("nano-after-show",o,{once:!0}),this.host.addEventListener("nanoAfterHide",a,{once:!0}),this.host.addEventListener("nano-after-hide",a,{once:!0})}))}handleCountdownChange(){if(this.open&&this.duration<1/0&&this.countdown){const n="100%",t="0";requestAnimationFrame((()=>{this.countdownElement&&(this.countdownAnimation=this.countdownElement.animate([{width:n},{width:t}],{duration:this.duration,easing:"linear"}))}))}}restartAutoHide(){this.handleCountdownChange(),clearTimeout(this.autoHideTimeout),clearInterval(this.remainingTimeInterval),this.open&&this.duration<1/0&&(this.autoHideTimeout=window.setTimeout((()=>this.hide()),this.duration),this.remainingTime=this.duration,this.remainingTimeInterval=window.setInterval((()=>{this.remainingTime-=100}),100))}handleMouseEnter=()=>{this.countdownAnimation?.pause(),clearTimeout(this.autoHideTimeout),clearInterval(this.remainingTimeInterval)};handleMouseLeave=()=>{this.duration<1/0&&(this.autoHideTimeout=window.setTimeout((()=>this.hide()),this.remainingTime),this.remainingTimeInterval=window.setInterval((()=>{this.remainingTime-=100}),100),this.countdownAnimation?.play())};handleCloseClick=()=>{this.hide()};handleTransitionEnd=n=>{"opacity"!==n.propertyName||n.target!==this.panel&&n.target!==this.overlay||(this.host.hidden=!this.open,this.isShowing=this.open,this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit())};handleButtonClick=n=>{n.defaultPrevented||n.target.tagName&&"button"===n.target.tagName.toLowerCase()&&this.hide()};connectedCallback(){this.modal=new e(this.host),this.handleHoistChange(),this.host.addEventListener("click",this.handleButtonClick),this.isShowing="string"==typeof this.host.getAttribute("showing")}disconnectedCallback(){r(this.host),this.host.removeEventListener("click",this.handleButtonClick)}componentDidLoad(){this.open&&!this.isShowing&&this.show()}Panel=()=>s("div",{ref:n=>this.panel=n,part:"panel",class:{alert:!0,"alert--open":this.open,"alert--toasty":this.isToast,"alert--modal":!!this.isModal,"alert--showing":this.isShowing,"alert--nodismiss":this.noDismiss},tabIndex:this.isModal?0:void 0,role:this.isModal?"alertdialog":"alert","aria-atomic":"true","aria-hidden":this.isShowing?"false":"true","aria-modal":this.isModal?"true":void 0,"aria-label":this.label?this.label:void 0,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onTransitionEnd:this.handleTransitionEnd},s("div",{class:"alert__main",part:"main"},s("div",{part:"icon",class:"alert__icon"},s("slot",{name:"icon"})),s("div",{part:"content",class:"alert__content","aria-live":this.isModal?"assertive":"polite"},this.slotCtrl.has("heading")&&s("div",{class:"alert__heading"},s("slot",{name:"heading"})),this.slotCtrl.has("title")&&s("div",{class:"alert__title"},s("slot",{name:"title"})),this.slotCtrl.has("[default]")&&s("div",{class:"alert__body"},s("slot",null)),this.slotCtrl.has("footer")&&s("div",{part:"footer",class:"alert__footer"},s("slot",{name:"footer"}))),this.closable&&s("div",{class:"alert__close",part:"close"},s("nano-icon-button",{iconName:"light/xmark",label:"close menu",onClick:this.handleCloseClick}))),this.duration<1/0&&[s("div",{role:"timer",class:"alert__timer"},this.remainingTime),this.countdown?s("div",{class:"alert__countdown"},s("div",{ref:n=>this.countdownElement=n,class:"alert__countdown-elapsed"})):""]);render(){return s(a,{key:"026fe28d4b8aed79d75734f67de6192813be44a5",class:{"nano-alert":!0},showing:this.isShowing},this.isModal&&[s("div",{key:"ac596b1e2b216ee591e2f9b85adf86dbbe27fce1",part:"overlay",class:{alert__overlay:!0,"alert__overlay--open":this.open},ref:n=>this.overlay=n}),s("div",{key:"825f8cf0d80d9bfa7bff7710ef349c234c155d53",class:"alert__modal-wrap",onClick:n=>{n.target.classList.contains("alert__modal-wrap")&&(this.noDismiss=!0,setTimeout((()=>this.noDismiss=!1),250))}},s(this.Panel,{key:"7343702088055d21dc6d5252aa108c19c315a20a"}))],!this.isModal&&s(this.Panel,{key:"c3cd08198bb5a87fcc38bea5130d5615608cb1ff"}))}static get watchers(){return{open:["handleOpenChange"],duration:["handleDurationChange"],hoist:["handleHoistChange"]}}};f.style=":host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }/** Typography */\n:host {\n /**\n * @prop --border-radius: Defaults to var(--nano-layer-border-radius);\n * @prop --border-color: Defaults to var(--nano-layer-border-color);\n * @prop --border-width: Defaults to var(--nano-layer-border-width);\n * @prop --background: Defaults to var(--nano-layer-background-color);\n * @prop --tint-color: The highlight colour (border-start, icon and heading text). Defaults to var(--nano-color-primary-1100);\n * @prop --icon-size: Defaults to var(--nano-pictogram-size-large);\n * @prop --scrim-color: overlay colour of alert display. Defaults to var(--nano-overlay-background-color);\n * @prop --close-button-color: Defaults to var(--nano-color-neutral-400);\n */\n --border-radius: var(--nano-layer-border-radius);\n --border-color: var(--nano-layer-border-color);\n --border-width: var(--nano-layer-border-width);\n --icon-size: var(--nano-pictogram-size-large);\n --scrim-color: var(--nano-overlay-background-color);\n --close-button-color: var(--nano-color-neutral-800);\n --tint-color: var(--nano-color-primary-1100);\n --background: var(--nano-color-primary-50);\n display: block;\n container-type: inline-size;\n}\n\n:host([color=neutral]), :host([theme=neutral]) {\n --tint-color: var(--nano-color-neutral-1200);\n --background: var(--nano-color-neutral-75);\n}\n\n:host([color=success]), :host([theme=success]) {\n --tint-color: var(--nano-color-success-1100);\n --background: var(--nano-color-success-50);\n}\n\n:host([color=warning]), :host([theme=warning]) {\n --tint-color: var(--nano-color-warning-1100);\n --background: var(--nano-color-warning-75);\n}\n\n:host([color=danger]), :host([theme=danger]) {\n --tint-color: var(--nano-color-danger-1100);\n --background: var(--nano-color-danger-100);\n}\n\n.alert {\n position: relative;\n background-color: var(--background);\n border: solid var(--border-width) var(--border-color);\n border-inline-start: solid 4px var(--tint-color);\n border-radius: var(--border-radius);\n opacity: 0;\n transform: scale(0.9);\n transition: var(--nano-transition-medium) opacity ease, var(--nano-transition-fast) transform ease;\n}\n.alert:focus {\n outline: none;\n}\n.alert:not(.alert--showing) {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n clip-path: inset(50%);\n overflow: hidden;\n pointer-events: none;\n visibility: hidden;\n}\n.alert--open {\n opacity: 1;\n transform: none;\n}\n.alert--toasty, .alert--modal {\n box-shadow: var(--nano-shadow-l2);\n margin: var(--nano-spacing-md);\n}\n.alert--modal.alert--nodismiss {\n animation: cannotClose 0.25s ease-in-out 1;\n}\n@keyframes cannotClose {\n 0% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.08);\n }\n 100% {\n transform: scale(1);\n }\n}\n\n.alert__main {\n display: flex;\n align-items: stretch;\n}\n\n.alert__content {\n font-size: var(--nano-font-size-sm);\n line-height: var(--nano-line-height-normal);\n letter-spacing: var(--nano-letter-spacing-loose);\n flex: 1 1 auto;\n padding: var(--nano-spacing-md);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n gap: var(--nano-spacing-sm);\n}\n\n.alert__modal-wrap {\n position: fixed;\n display: flex;\n align-items: center;\n justify-content: center;\n inset: 0;\n z-index: var(--nano-z-index-alert);\n}\n\n.alert__heading {\n font-size: var(--nano-font-size-sm);\n line-height: var(--nano-line-height-normal);\n font-weight: var(--nano-font-weight-bold);\n color: var(--tint-color);\n}\n\n.alert__title {\n font-weight: var(--nano-font-weight-normal);\n font-size: var(--nano-font-size-md);\n line-height: var(--nano-line-height-dense);\n text-wrap: balance;\n}\n\n.alert__close {\n --color: var(--close-button-color);\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: 1.1em;\n padding-inline: 0 var(--nano-spacing-md);\n padding-block: 0;\n}\n\n.alert__overlay {\n position: fixed;\n inset: 0;\n background-color: var(--scrim-color);\n opacity: 0;\n transition: var(--nano-transition-fast) opacity;\n z-index: var(--nano-z-index-alert);\n pointer-events: all;\n}\n.alert__overlay--open {\n opacity: 1;\n}\n\n.alert__icon {\n flex: 0 0 auto;\n display: flex;\n align-items: start;\n font-size: var(--icon-size);\n padding-block: var(--nano-spacing-md);\n}\n.alert__icon ::slotted(*), .alert__icon::slotted(*) {\n color: var(--tint-color);\n margin-inline-start: var(--nano-spacing-md);\n}\n@container (width < 280px) {\n .alert__icon {\n display: none !important;\n }\n}\n\n.alert__countdown {\n position: absolute;\n inset-block-end: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n block-size: 4px;\n background-color: var(--nano-layer-border-color);\n display: flex;\n justify-content: flex-end;\n}\n\n.alert__countdown .alert__countdown-elapsed {\n block-size: 100%;\n inline-size: 0;\n}\n\n.alert__timer {\n clip-path: inset(50%);\n block-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n inline-size: 1px;\n}\n\n.alert__countdown-elapsed {\n background-color: var(--tint-color);\n}";export{f as nano_alert}
|
|
4
|
+
import{r as n,c as t,g as o,a}from"./index-BM3Om9WE.js";import{M as e}from"./modal-CY_3_LJ7.js";import{l as i,u as r}from"./scroll-1nFw8CNk.js";import{h as s,t as l}from"./renderer-DpNDfhNy.js";import{b as c}from"./active-element-CKJIkX0R.js";import{H as h}from"./slot-BeXeAw-u.js";import"./tabbable-BgopY-vd.js";import"./dom-dlicJTEJ.js";let d,m,u,p;globalThis.document&&(d=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tr"}),m=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tl"}),u=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--bl"}),p=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--br"}));const f=class{constructor(o){n(this,o),this.nanoShow=t(this,"nanoShow",7),this.nanoAfterShow=t(this,"nanoAfterShow",7),this.nanoHide=t(this,"nanoHide",7),this.nanoAfterHide=t(this,"nanoAfterHide",7)}panel;overlay;modal;originalTrigger;goingToHide=!1;goingToShow=!1;autoHideTimeout;remainingTimeInterval;countdownAnimation;countdownElement;slotCtrl=new h(this,"[default]","heading","title","footer");isModal=!1;isToast=!1;isShowing=!1;label;noDismiss=!1;get host(){return o(this)}open=!1;handleOpenChange(){this.open?this.show():this.hide()}closable=!1;color;theme;duration=1/0;remainingTime=this.duration;handleDurationChange(){this.restartAutoHide()}hoist=!1;handleHoistChange(){this.hoist&&document.body.children[0]!==this.host&&document.body.prepend(this.host)}countdown=!0;nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;async show(){if(!this.goingToShow)return this.nanoShow.emit().defaultPrevented?(this.open=!1,!1):(this.host.hidden=!1,this.goingToShow=!0,this.open=!0,requestAnimationFrame((()=>{this.isShowing=!0,this.goingToShow=!1})),void(this.duration<1/0&&this.restartAutoHide()))}async hide(){if(!this.goingToHide)return this.nanoHide.emit().defaultPrevented?(this.open=!0,!1):(this.goingToHide=!0,this.open=!1,c(this.host),requestAnimationFrame((()=>this.goingToHide=!1)),clearTimeout(this.autoHideTimeout),void clearInterval(this.remainingTimeInterval))}async toast(n="tr"){return this.isToast=!0,new Promise((t=>{let o;switch(this.handleCountdownChange(),n){case"tl":o=m;break;case"bl":o=u;break;case"br":o=p;break;default:o=d}o.isConnected||document.body.appendChild(o),o.appendChild(this.host),this.connectedCallback(),this.show();const a=()=>{this.host.remove(),this.isToast=!1,t(),o.querySelector(l("nano-alert"))||o.remove()};this.host.addEventListener("nanoAfterHide",a,{once:!0}),this.host.addEventListener("nano-after-hide",a,{once:!0})}))}async alert(n){return this.isModal=!0,this.label=n,new Promise((n=>{let t=!1;for(const n of document.body.children)"NANO-ALERT"===n.tagName&&n===this.host&&(t=!0);t||document.body.append(this.host),this.modal.activate(),i(this.host),this.originalTrigger=document.activeElement,requestAnimationFrame((()=>{this.show()}));const o=()=>requestAnimationFrame((()=>this.panel.focus({preventScroll:!0}))),a=()=>{this.modal.deactivate(),this.host.remove(),this.label=void 0,this.isModal=!1,n(),this.originalTrigger&&"function"==typeof this.originalTrigger.focus&&setTimeout((()=>this.originalTrigger.focus()))};this.host.addEventListener("nanoAfterShow",o,{once:!0}),this.host.addEventListener("nano-after-show",o,{once:!0}),this.host.addEventListener("nanoAfterHide",a,{once:!0}),this.host.addEventListener("nano-after-hide",a,{once:!0})}))}handleCountdownChange(){if(this.open&&this.duration<1/0&&this.countdown){const n="100%",t="0";requestAnimationFrame((()=>{this.countdownElement&&(this.countdownAnimation=this.countdownElement.animate([{width:n},{width:t}],{duration:this.duration,easing:"linear"}))}))}}restartAutoHide(){this.handleCountdownChange(),clearTimeout(this.autoHideTimeout),clearInterval(this.remainingTimeInterval),this.open&&this.duration<1/0&&(this.autoHideTimeout=window.setTimeout((()=>this.hide()),this.duration),this.remainingTime=this.duration,this.remainingTimeInterval=window.setInterval((()=>{this.remainingTime-=100}),100))}handleMouseEnter=()=>{this.countdownAnimation?.pause(),clearTimeout(this.autoHideTimeout),clearInterval(this.remainingTimeInterval)};handleMouseLeave=()=>{this.duration<1/0&&(this.autoHideTimeout=window.setTimeout((()=>this.hide()),this.remainingTime),this.remainingTimeInterval=window.setInterval((()=>{this.remainingTime-=100}),100),this.countdownAnimation?.play())};handleCloseClick=()=>{this.hide()};handleTransitionEnd=n=>{"opacity"!==n.propertyName||n.target!==this.panel&&n.target!==this.overlay||(this.host.hidden=!this.open,this.isShowing=this.open,this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit())};handleButtonClick=n=>{n.defaultPrevented||n.target.tagName&&"button"===n.target.tagName.toLowerCase()&&this.hide()};connectedCallback(){this.modal=new e(this.host),this.handleHoistChange(),this.host.addEventListener("click",this.handleButtonClick),this.isShowing="string"==typeof this.host.getAttribute("showing")}disconnectedCallback(){r(this.host),this.host.removeEventListener("click",this.handleButtonClick)}componentDidLoad(){this.open&&!this.isShowing&&this.show()}Panel=()=>s("div",{ref:n=>this.panel=n,part:"panel",class:{alert:!0,"alert--open":this.open,"alert--toasty":this.isToast,"alert--modal":!!this.isModal,"alert--showing":this.isShowing,"alert--nodismiss":this.noDismiss},tabIndex:this.isModal?0:void 0,role:this.isModal?"alertdialog":"alert","aria-atomic":"true","aria-hidden":this.isShowing?"false":"true","aria-modal":this.isModal?"true":void 0,"aria-label":this.label?this.label:void 0,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onTransitionEnd:this.handleTransitionEnd},s("div",{class:"alert__main",part:"main"},s("div",{part:"icon",class:"alert__icon"},s("slot",{name:"icon"})),s("div",{part:"content",class:"alert__content","aria-live":this.isModal?"assertive":"polite"},this.slotCtrl.has("heading")&&s("div",{class:"alert__heading"},s("slot",{name:"heading"})),this.slotCtrl.has("title")&&s("div",{class:"alert__title"},s("slot",{name:"title"})),this.slotCtrl.has("[default]")&&s("div",{class:"alert__body"},s("slot",null)),this.slotCtrl.has("footer")&&s("div",{part:"footer",class:"alert__footer"},s("slot",{name:"footer"}))),this.closable&&s("div",{class:"alert__close",part:"close"},s("nano-icon-button",{iconName:"light/xmark",label:"close menu",onClick:this.handleCloseClick}))),this.duration<1/0&&[s("div",{role:"timer",class:"alert__timer"},this.remainingTime),this.countdown?s("div",{class:"alert__countdown"},s("div",{ref:n=>this.countdownElement=n,class:"alert__countdown-elapsed"})):""]);render(){return s(a,{key:"026fe28d4b8aed79d75734f67de6192813be44a5",class:{"nano-alert":!0},showing:this.isShowing},this.isModal&&[s("div",{key:"ac596b1e2b216ee591e2f9b85adf86dbbe27fce1",part:"overlay",class:{alert__overlay:!0,"alert__overlay--open":this.open},ref:n=>this.overlay=n}),s("div",{key:"825f8cf0d80d9bfa7bff7710ef349c234c155d53",class:"alert__modal-wrap",onClick:n=>{n.target.classList.contains("alert__modal-wrap")&&(this.noDismiss=!0,setTimeout((()=>this.noDismiss=!1),250))}},s(this.Panel,{key:"7343702088055d21dc6d5252aa108c19c315a20a"}))],!this.isModal&&s(this.Panel,{key:"c3cd08198bb5a87fcc38bea5130d5615608cb1ff"}))}static get watchers(){return{open:["handleOpenChange"],duration:["handleDurationChange"],hoist:["handleHoistChange"]}}};f.style=":host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }/** Typography */\n:host {\n /**\n * @prop --border-radius: Defaults to var(--nano-layer-border-radius);\n * @prop --border-color: Defaults to var(--nano-layer-border-color);\n * @prop --border-width: Defaults to var(--nano-layer-border-width);\n * @prop --background: Defaults to var(--nano-layer-background-color);\n * @prop --tint-color: The highlight colour (border-start, icon and heading text). Defaults to var(--nano-color-primary-1100);\n * @prop --icon-size: Defaults to var(--nano-pictogram-size-large);\n * @prop --scrim-color: overlay colour of alert display. Defaults to var(--nano-overlay-background-color);\n * @prop --close-button-color: Defaults to var(--nano-color-neutral-400);\n */\n --border-radius: var(--nano-layer-border-radius);\n --border-color: var(--nano-layer-border-color);\n --border-width: var(--nano-layer-border-width);\n --icon-size: var(--nano-pictogram-size-large);\n --scrim-color: var(--nano-overlay-background-color);\n --close-button-color: var(--nano-color-neutral-800);\n --tint-color: var(--nano-color-primary-1100);\n --background: var(--nano-color-primary-50);\n display: block;\n container-type: inline-size;\n}\n\n:host([color=neutral]), :host([theme=neutral]) {\n --tint-color: var(--nano-color-neutral-1200);\n --background: var(--nano-color-neutral-75);\n}\n\n:host([color=success]), :host([theme=success]) {\n --tint-color: var(--nano-color-success-1100);\n --background: var(--nano-color-success-50);\n}\n\n:host([color=warning]), :host([theme=warning]) {\n --tint-color: var(--nano-color-warning-1100);\n --background: var(--nano-color-warning-75);\n}\n\n:host([color=danger]), :host([theme=danger]) {\n --tint-color: var(--nano-color-danger-1100);\n --background: var(--nano-color-danger-100);\n}\n\n.alert {\n position: relative;\n background-color: var(--background);\n border: solid var(--border-width) var(--border-color);\n border-inline-start: solid 4px var(--tint-color);\n border-radius: var(--border-radius);\n opacity: 0;\n transform: scale(0.9);\n transition: var(--nano-transition-medium) opacity ease, var(--nano-transition-fast) transform ease;\n}\n.alert:focus {\n outline: none;\n}\n.alert:not(.alert--showing) {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n clip-path: inset(50%);\n overflow: hidden;\n pointer-events: none;\n visibility: hidden;\n}\n.alert--open {\n opacity: 1;\n transform: none;\n}\n.alert--toasty, .alert--modal {\n box-shadow: var(--nano-shadow-l2);\n margin: var(--nano-spacing-md);\n}\n.alert--modal.alert--nodismiss {\n animation: cannotClose 0.25s ease-in-out 1;\n}\n@keyframes cannotClose {\n 0% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.08);\n }\n 100% {\n transform: scale(1);\n }\n}\n\n.alert__main {\n display: flex;\n align-items: stretch;\n}\n\n.alert__content {\n font-size: var(--nano-font-size-sm);\n line-height: var(--nano-line-height-normal);\n letter-spacing: var(--nano-letter-spacing-loose);\n flex: 1 1 auto;\n padding: var(--nano-spacing-md);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n gap: var(--nano-spacing-sm);\n}\n\n.alert__modal-wrap {\n position: fixed;\n display: flex;\n align-items: center;\n justify-content: center;\n inset: 0;\n z-index: var(--nano-z-index-alert);\n}\n\n.alert__heading {\n font-size: var(--nano-font-size-sm);\n line-height: var(--nano-line-height-normal);\n font-weight: var(--nano-font-weight-bold);\n color: var(--tint-color);\n}\n\n.alert__title {\n font-weight: var(--nano-font-weight-normal);\n font-size: var(--nano-font-size-md);\n line-height: var(--nano-line-height-dense);\n text-wrap: balance;\n}\n\n.alert__close {\n --color: var(--close-button-color);\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: 1.1em;\n padding-inline: 0 var(--nano-spacing-md);\n padding-block: 0;\n}\n\n.alert__overlay {\n position: fixed;\n inset: 0;\n background-color: var(--scrim-color);\n opacity: 0;\n transition: var(--nano-transition-fast) opacity;\n z-index: var(--nano-z-index-alert);\n pointer-events: all;\n}\n.alert__overlay--open {\n opacity: 1;\n}\n\n.alert__icon {\n flex: 0 0 auto;\n display: flex;\n align-items: start;\n font-size: var(--icon-size);\n padding-block: var(--nano-spacing-md);\n}\n.alert__icon ::slotted(*), .alert__icon::slotted(*) {\n color: var(--tint-color);\n margin-inline-start: var(--nano-spacing-md);\n}\n@container (width < 280px) {\n .alert__icon {\n display: none !important;\n }\n}\n\n.alert__countdown {\n position: absolute;\n inset-block-end: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n block-size: 4px;\n background-color: var(--nano-layer-border-color);\n display: flex;\n justify-content: flex-end;\n}\n\n.alert__countdown .alert__countdown-elapsed {\n block-size: 100%;\n inline-size: 0;\n}\n\n.alert__timer {\n clip-path: inset(50%);\n block-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n inline-size: 1px;\n}\n\n.alert__countdown-elapsed {\n background-color: var(--tint-color);\n}";export{f as nano_alert}
|