npm - @nanoporetech-digital/components - Versions diffs - 6.2.0 → 6.3.0 - Mend

@nanoporetech-digital/components 6.2.0 → 6.3.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.

Files changed (71) hide show

package/dist/esm/nano-table.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-export { T as nano_table } from './nano-table-c85a2fd3.js';
+export { T as nano_table } from './nano-table-66bee831.js';
 import './index-9695db0a.js';
 import './math-c02ddfda.js';
 import './throttle-ac4fcefa.js';

package/dist/esm/{scroll-ac332213.js → scroll-762b3e1a.js} RENAMED Viewed

@@ -3,6 +3,24 @@
  */
 import { a as getOffset } from './dom-8599fac1.js';
+/**
+ * @returns the width of the document's scrollbar
+ */
+function getScrollbarWidth() {
+  const documentWidth = document.documentElement.clientWidth;
+  return Math.abs(window.innerWidth - documentWidth);
+}
+/**
+ * Used in conjunction with `scrollbarWidth` to set proper body padding in case the user has padding already on the `<body>` element.
+ * @returns body's computed css padding
+ */
+function getExistingBodyPadding() {
+  const padding = Number(getComputedStyle(document.body).paddingRight.replace(/px/, ''));
+  if (isNaN(padding) || !padding) {
+    return 0;
+  }
+  return padding;
+}
 const locks = new Set();
 /**
  * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible
@@ -10,7 +28,23 @@ const locks = new Set();
  */
 function lockBodyScrolling(lockingEl) {
   locks.add(lockingEl);
-  document.body.classList.add('nano-scroll-lock');
+  if (document.documentElement.classList.contains('nano-scroll-lock'))
+    return;
+  // When the first lock is created,
+  // set the scroll lock size to match the scrollbar's width to prevent content from shifting.
+  const scrollbarWidth = getScrollbarWidth() + getExistingBodyPadding(); // must be measured before the `sl-scroll-lock` class is applied
+  let scrollbarGutterProperty = getComputedStyle(document.documentElement).scrollbarGutter;
+  // default is auto, unsupported browsers is "undefined"
+  if (!scrollbarGutterProperty || scrollbarGutterProperty === 'auto') {
+    scrollbarGutterProperty = 'stable';
+  }
+  if (scrollbarWidth <= 0) {
+    // if there's no scrollbar, just set it to "revert" so whatever the user has set gets used. This is useful is the page is not overflowing and showing a scrollbar, or if the user has overflow: hidden, or any other reason a scrollbar may not be showing.
+    scrollbarGutterProperty = 'revert';
+  }
+  document.documentElement.style.setProperty('--nano-scroll-lock-gutter', scrollbarGutterProperty);
+  document.documentElement.classList.add('nano-scroll-lock');
+  document.documentElement.style.setProperty('--nano-scroll-lock-size', `${scrollbarWidth}px`);
 }
 /**
  * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.
@@ -18,7 +52,8 @@ function lockBodyScrolling(lockingEl) {
 function unlockBodyScrolling(lockingEl) {
   locks.delete(lockingEl);
   if (locks.size === 0) {
-    document.body.classList.remove('nano-scroll-lock');
+    document.documentElement.classList.remove('nano-scroll-lock');
+    document.documentElement.style.removeProperty('--nano-scroll-lock-size');
   }
 }
 function scrollTo(element, scrollAmt, vertical = false) {
@@ -46,6 +81,8 @@ function scrollTo(element, scrollAmt, vertical = false) {
  * If the element is already in view, nothing will happen.
  */
 function scrollIntoView(element, container, direction = 'vertical', position = 'start') {
+  if (!element)
+    return;
   const offset = getOffset(element, container);
   const offsetTop = offset.top + container.scrollTop;
   const offsetLeft = offset.left + container.scrollLeft;
@@ -84,4 +121,4 @@ function scrollIntoView(element, container, direction = 'vertical', position = '
 export { lockBodyScrolling as l, scrollIntoView as s, unlockBodyScrolling as u };
-//# sourceMappingURL=scroll-ac332213.js.map
+//# sourceMappingURL=scroll-762b3e1a.js.map

package/dist/esm/scroll-762b3e1a.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"scroll-762b3e1a.js","mappings":"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","names":[],"sources":["./src/utils/scroll.ts"],"sourcesContent":["import { getOffset } from './dom';\n\n/**\n * @returns the width of the document's scrollbar\n */\nfunction getScrollbarWidth() {\n const documentWidth = document.documentElement.clientWidth;\n return Math.abs(window.innerWidth - documentWidth);\n}\n\n/**\n * Used in conjunction with `scrollbarWidth` to set proper body padding in case the user has padding already on the `<body>` element.\n * @returns body's computed css padding\n */\nfunction getExistingBodyPadding() {\n const padding = Number(\n getComputedStyle(document.body).paddingRight.replace(/px/, '')\n );\n\n if (isNaN(padding) || !padding) {\n return 0;\n }\n\n return padding;\n}\n\nconst locks = new Set();\n/**\n * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n * without premature unlocking.\n */\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n locks.add(lockingEl);\n\n if (document.documentElement.classList.contains('nano-scroll-lock')) return;\n\n // When the first lock is created,\n // set the scroll lock size to match the scrollbar's width to prevent content from shifting.\n const scrollbarWidth = getScrollbarWidth() + getExistingBodyPadding(); // must be measured before the `sl-scroll-lock` class is applied\n let scrollbarGutterProperty = getComputedStyle(\n document.documentElement\n ).scrollbarGutter;\n\n // default is auto, unsupported browsers is \"undefined\"\n if (!scrollbarGutterProperty || scrollbarGutterProperty === 'auto') {\n scrollbarGutterProperty = 'stable';\n }\n if (scrollbarWidth <= 0) {\n // if there's no scrollbar, just set it to \"revert\" so whatever the user has set gets used. This is useful is the page is not overflowing and showing a scrollbar, or if the user has overflow: hidden, or any other reason a scrollbar may not be showing.\n scrollbarGutterProperty = 'revert';\n }\n\n document.documentElement.style.setProperty(\n '--nano-scroll-lock-gutter',\n scrollbarGutterProperty\n );\n document.documentElement.classList.add('nano-scroll-lock');\n document.documentElement.style.setProperty(\n '--nano-scroll-lock-size',\n `${scrollbarWidth}px`\n );\n}\n\n/**\n * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n */\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n locks.delete(lockingEl);\n\n if (locks.size === 0) {\n document.documentElement.classList.remove('nano-scroll-lock');\n document.documentElement.style.removeProperty('--nano-scroll-lock-size');\n }\n}\n\nfunction scrollTo(\n element: HTMLElement,\n scrollAmt: number,\n vertical: boolean = false\n) {\n if (!vertical) {\n try {\n element.scrollTo({ left: scrollAmt, behavior: 'smooth' });\n } catch (e) {\n element.scrollLeft = scrollAmt;\n }\n return;\n }\n try {\n element.scrollTo({ top: scrollAmt, behavior: 'smooth' });\n } catch (e) {\n element.scrollTop = scrollAmt;\n }\n}\n\n/**\n * Scrolls an element into view *of its parent container*.\n * Note to future me - cannot use native `scrollIntoView`\n * 'cos it will move the whole window\n * (vertically even though we only care about parent).\n * If the element is already in view, nothing will happen.\n */\nexport function scrollIntoView(\n element: HTMLElement,\n container: HTMLElement,\n direction: 'horizontal' | 'vertical' | 'both' = 'vertical',\n position: 'center' | 'start' = 'start'\n) {\n if (!element) return;\n const offset = getOffset(element, container);\n const offsetTop = offset.top + container.scrollTop;\n const offsetLeft = offset.left + container.scrollLeft;\n const minX = container.scrollLeft;\n const maxX = container.scrollLeft + container.offsetWidth;\n const minY = container.scrollTop;\n const maxY = container.scrollTop + container.offsetHeight;\n\n if (direction === 'horizontal' || direction === 'both') {\n if (position === 'start') {\n if (offsetLeft < minX) scrollTo(container, offsetLeft);\n else if (offsetLeft + element.clientWidth > maxX)\n scrollTo(\n container,\n offsetLeft - container.offsetWidth + element.clientWidth\n );\n } else {\n scrollTo(\n container,\n container.scrollLeft +\n offset.left -\n (container.offsetWidth / 2 - element.offsetWidth / 2)\n );\n }\n }\n\n if (direction === 'vertical' || direction === 'both') {\n if (position === 'start') {\n if (offsetTop < minY) scrollTo(container, offsetTop, true);\n else if (offsetTop + element.clientHeight > maxY) {\n scrollTo(\n container,\n offsetTop - container.offsetHeight + element.clientHeight,\n true\n );\n }\n } else {\n scrollTo(\n container,\n container.scrollTop +\n offset.top -\n (container.offsetHeight / 2 - element.offsetHeight / 2),\n true\n );\n }\n }\n}\n"],"version":3}

package/dist/esm/{table.worker-761fba3e.js → table.worker-936e6d51.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { c as createWorker } from './nano-table-c85a2fd3.js';
+import { c as createWorker } from './nano-table-66bee831.js';
 import './index-9695db0a.js';
 import './math-c02ddfda.js';
 import './throttle-ac4fcefa.js';
@@ -18,4 +18,4 @@ URL.revokeObjectURL(url);
 export { worker, workerMsgId, workerName, workerPath };
-//# sourceMappingURL=table.worker-761fba3e.js.map
+//# sourceMappingURL=table.worker-936e6d51.js.map

package/dist/esm/table.worker-936e6d51.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"table.worker-936e6d51.js","mappings":";;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/esm/transitions-bd15e312.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"transitions-bd15e312.js","mappings":";;;AAAA;;;;AAiBA;;;;;;;;;MASa,iBAAiB,GAAG,CAC/B,EAAe,EACf,OAKC;EAED,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,IAAI;IACV,WAAW,EAAE,OAAO;IACpB,GAAG,OAAO;GACX,CAAC;EAEF,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO;IACzB,MAAM,MAAM,GAAG,CAAC,CAAkB;MAChC,IACE,CAAC,CAAC,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC;SACjE,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,EACtE;QACA,OAAO,CAAC,OAAO,CAAC,CAAC;QACjB,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;OACjD;KACF,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,CAAkB;MAChC,IACE,CAAC,CAAC,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC;SACjE,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,EACtE;QACA,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC1B,EAAE,CAAC,OAAO,CAAC,iBAAiB,GAAG,OAAO,CAAC;QACvC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAClB,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;OACjD;KACF,CAAC;IAEF,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;MAC7C,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC;MACpC,EAAE,CAAC,OAAO,CAAC,iBAAiB,GAAG,MAAM,CAAC;~~MACtC~~,qBAAqB,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;KAC/D;SAAM;MACL,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;MAC7C,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACrC;GACF,CAAC,CAAC;AACL;;;;","names":[],"sources":["./src/utils/transitions.ts"],"sourcesContent":["/*\n Quality of life for transition handling.\n * Adds / removes transitionend events. Resolves on complete\n /\nexport const transitionDone = (\n el: HTMLElement\n): Promise<'shown' \| 'hidden'> => {\n return new Promise((resolve) => {\n const callback = () => {\n el.removeEventListener('transitionend', callback);\n resolve;\n };\n el.addEventListener('transitionend', callback);\n // ??\n });\n};\n\n/\n handles hiding and showing elements properly (with display),\n * along with transitions, so they are no longer viewable in the dom.\n * - OnHide remove show class, listen for transition end, then display: none on finish\n * - OnShow, display block on start then add a show class\n * @param el\n * @param options\n * @returns a promise of resolving as either 'show' or 'hidden'\n */\nexport const displayTransition = (\n el: HTMLElement,\n options?: {\n className?: string;\n show?: boolean;\n showDisplay?: string;\n transitionProp?: string[];\n }\n): Promise<'shown' \| 'hidden'> => {\n const opts = {\n className: '',\n show: true,\n showDisplay: 'block',\n ...options,\n };\n\n return new Promise((resolve) => {\n const showCb = (e: TransitionEvent) => {\n if (\n (e.target === el \|\| e.composedPath().some((el) => el === e.target)) &&\n (!opts.transitionProp \|\| opts.transitionProp.includes(e.propertyName))\n ) {\n resolve('shown');\n el.removeEventListener('transitionend', showCb);\n }\n };\n\n const hideCb = (e: TransitionEvent) => {\n if (\n (e.target === el \|\| e.composedPath().some((el) => el === e.target)) &&\n (!opts.transitionProp \|\| opts.transitionProp.includes(e.propertyName))\n ) {\n el.style.display = 'none';\n el.dataset.displayTransition = 'false';\n resolve('hidden');\n el.removeEventListener('transitionend', hideCb);\n }\n };\n\n if (opts.show) {\n el.addEventListener('transitionend', showCb);\n el.style.display = opts.showDisplay;\n el.dataset.displayTransition = 'true';\n requestAnimationFrame(() => el.classList.add(opts.className));\n } else {\n el.addEventListener('transitionend', hideCb);\n el.classList.remove(opts.className);\n }\n });\n};\n"],"version":3}
1	+ {"file":"transitions-bd15e312.js","mappings":";;;AAAA;;;;AAiBA;;;;;;;;;MASa,iBAAiB,GAAG,CAC/B,EAAe,EACf,OAKC;EAED,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,IAAI;IACV,WAAW,EAAE,OAAO;IACpB,GAAG,OAAO;GACX,CAAC;EAEF,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO;IACzB,MAAM,MAAM,GAAG,CAAC,CAAkB;MAChC,IACE,CAAC,CAAC,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC;SACjE,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,EACtE;QACA,OAAO,CAAC,OAAO,CAAC,CAAC;QACjB,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;OACjD;KACF,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,CAAkB;MAChC,IACE,CAAC,CAAC,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC;SACjE,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,EACtE;QACA,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC1B,EAAE,CAAC,OAAO,CAAC,iBAAiB,GAAG,OAAO,CAAC;QACvC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAClB,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;OACjD;KACF,CAAC;IAEF,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;MAC7C,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC;MACpC,EAAE,CAAC,OAAO,CAAC,iBAAiB,GAAG,MAAM,CAAC;MAEtC,qBAAqB,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;KAC/D;SAAM;MACL,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;MAC7C,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACrC;GACF,CAAC,CAAC;AACL;;;;","names":[],"sources":["./src/utils/transitions.ts"],"sourcesContent":["/*\n Quality of life for transition handling.\n * Adds / removes transitionend events. Resolves on complete\n /\nexport const transitionDone = (\n el: HTMLElement\n): Promise<'shown' \| 'hidden'> => {\n return new Promise((resolve) => {\n const callback = () => {\n el.removeEventListener('transitionend', callback);\n resolve;\n };\n el.addEventListener('transitionend', callback);\n // ??\n });\n};\n\n/\n handles hiding and showing elements properly (with display),\n * along with transitions, so they are no longer viewable in the dom.\n * - OnHide remove show class, listen for transition end, then display: none on finish\n * - OnShow, display block on start then add a show class\n * @param el\n * @param options\n * @returns a promise of resolving as either 'show' or 'hidden'\n */\nexport const displayTransition = (\n el: HTMLElement,\n options?: {\n className?: string;\n show?: boolean;\n showDisplay?: string;\n transitionProp?: string[];\n }\n): Promise<'shown' \| 'hidden'> => {\n const opts = {\n className: '',\n show: true,\n showDisplay: 'block',\n ...options,\n };\n\n return new Promise((resolve) => {\n const showCb = (e: TransitionEvent) => {\n if (\n (e.target === el \|\| e.composedPath().some((el) => el === e.target)) &&\n (!opts.transitionProp \|\| opts.transitionProp.includes(e.propertyName))\n ) {\n resolve('shown');\n el.removeEventListener('transitionend', showCb);\n }\n };\n\n const hideCb = (e: TransitionEvent) => {\n if (\n (e.target === el \|\| e.composedPath().some((el) => el === e.target)) &&\n (!opts.transitionProp \|\| opts.transitionProp.includes(e.propertyName))\n ) {\n el.style.display = 'none';\n el.dataset.displayTransition = 'false';\n resolve('hidden');\n el.removeEventListener('transitionend', hideCb);\n }\n };\n\n if (opts.show) {\n el.addEventListener('transitionend', showCb);\n el.style.display = opts.showDisplay;\n el.dataset.displayTransition = 'true';\n el.clientWidth; // force reflow\n requestAnimationFrame(() => el.classList.add(opts.className));\n } else {\n el.addEventListener('transitionend', hideCb);\n el.classList.remove(opts.className);\n }\n });\n};\n"],"version":3}

package/dist/nano-components/nano-alert.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as e,h as i,a,g as s}from"./index-9695db0a.js";import{M as n}from"./modal-88c117cd.js";import{l as o,u as r}from"./scroll-ac332213.js";import{c as l}from"./theme-931bd452.js";import"./tabbable-26a66a22.js";import"./dom-8599fac1.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--border-color:var(--nano-layer-border-color, rgba(0, 0, 0, 0.1));--border-width:var(--nano-layer-border-width, 1px);--background:var(--nano-layer-bg, #fff);--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495));--icon-size:2rem;--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--close-button-color:#b5aea7;display:block}:host(.nano-color){--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495))}.alert{position:relative;background-color:var(--background);border:solid var(--border-width) var(--border-color);border-block-start-width:4px;border-block-start-color:var(--tint-color);border-radius:var(--border-radius);opacity:0;transform:scale(0.9);transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease}.alert:focus{outline:none}.alert:not(.alert--showing){position:absolute;inline-size:1px;block-size:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--open{opacity:1;transform:none}.alert--toasty,.alert--modal{box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));margin:var(--nano-spacing-medium, 16px)}.alert--modal.alert--nodismiss{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.alert__content{display:flex;align-items:stretch}.alert__modal-wrap{position:fixed;display:flex;align-items:center;justify-content:center;inset:0;z-index:var(--nano-layer-index-alert, 800)}.alert__message{flex:1 1 auto;padding:var(--nano-spacing-medium, 16px);overflow:hidden;line-height:1.6}.alert__close{--color:var(--close-button-color);flex:0 0 auto;display:flex;align-items:center;font-size:1.1em;padding-inline:0 var(--nano-spacing-medium, 16px);padding-block:0}.alert__footer{padding:0 var(--nano-spacing-small, 8px) 0;display:flex;flex-direction:row;justify-content:space-around;align-items:center}.alert__footer ::slotted(*){flex:1;margin:0 var(--nano-spacing-small, 8px) var(--nano-spacing-medium, 16px) !important}.alert__overlay{position:fixed;inset:0;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;z-index:var(--nano-layer-index-alert, 800);-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));pointer-events:all}.alert__overlay--open{opacity:1}.alert__icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--icon-size)}.alert__icon ::slotted(*){color:var(--tint-color);margin-inline-start:var(--nano-spacing-medium, 16px)}";let c;let d;let f;let u;if(globalThis["document"]){c=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tr"});d=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tl"});f=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--bl"});u=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--br"})}const m=class{constructor(a){t(this,a);this.nanoShow=e(this,"nanoShow",7);this.nanoAfterShow=e(this,"nanoAfterShow",7);this.nanoHide=e(this,"nanoHide",7);this.nanoAfterHide=e(this,"nanoAfterHide",7);this.addedTransEnd=false;this.goingToHide=false;this.goingToShow=false;this.handleMouseMove=()=>{this.restartAutoHide()};this.handleCloseClick=()=>{this.hide()};this.handleTransitionEnd=t=>{if(t.propertyName==="opacity"&&(t.target===this.panel||t.target===this.overlay)){this.host.hidden=!this.open;this.isShowing=this.open;this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit()}};this.handleButtonClick=t=>{if(t.defaultPrevented)return;if(t.target.tagName&&t.target.tagName.toLowerCase()==="button")this.hide()};this.restartAutoHide=()=>{clearTimeout(this.autoHideTimeout);if(this.open&&this.duration<Infinity){this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration)}};this.Panel=()=>i("div",{ref:t=>this.panel=t,part:"panel",class:{alert:true,"alert--open":this.open,"alert--toasty":this.isToast,"alert--modal":!!this.isModal,"alert--showing":this.isShowing,"alert--nodismiss":this.noDismiss},role:!!this.isModal?"alertdialog":"alert","aria-live":"assertive","aria-atomic":"true","aria-hidden":this.open?"false":"true","aria-modal":!!this.isModal?"true":undefined,"aria-label":this.label?this.label:undefined,onMouseMove:this.handleMouseMove,tabIndex:!!this.isModal?0:undefined},i("div",{class:"alert__content"},i("div",{part:"icon",class:"alert__icon"},i("slot",{name:"icon"})),i("div",{part:"message",class:"alert__message"},i("slot",null)),this.closable&&i("div",{class:"alert__close"},i("nano-icon-button",{class:"alert__close",iconName:"light/times",label:"close menu",onClick:this.handleCloseClick}))),i("div",{class:"alert__footer"},i("slot",{name:"footer"})));this.isModal=false;this.isToast=false;this.isShowing=false;this.label=undefined;this.noDismiss=false;this.open=false;this.closable=false;this.color=undefined;this.duration=Infinity;this.hoist=false}handleOpenChange(){this.open?this.show():this.hide()}handleDurationChange(){this.restartAutoHide()}handleHoistChange(){if(!this.hoist||document.body.children[0]===this.host)return;document.body.prepend(this.host)}async show(){if(this.goingToShow){return}const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return false}this.host.hidden=false;this.goingToShow=true;this.open=true;requestAnimationFrame((()=>{this.isShowing=true;this.goingToShow=false}));if(this.duration<Infinity){clearTimeout(this.autoHideTimeout);this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration)}}async hide(){if(this.goingToHide){return}const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return false}this.goingToHide=true;this.open=false;requestAnimationFrame((()=>this.goingToHide=false));clearTimeout(this.autoHideTimeout)}async toast(t="tr"){this.isToast=true;return new Promise((e=>{let i;switch(t){case"tl":i=d;break;case"bl":i=f;break;case"br":i=u;break;default:i=c;break}if(!i.parentElement){document.body.appendChild(i)}i.appendChild(this.host);this.connectedCallback();this.show();const a=()=>{this.host.remove();this.isToast=false;e();if(!i.querySelector("nano-alert")){i.remove()}};this.host.addEventListener("nanoAfterHide",a,{once:true});this.host.addEventListener("nano-after-hide",a,{once:true})}))}async alert(t){this.isModal=true;this.label=t;return new Promise((t=>{if(!document.body.contains(this.host)){document.body.appendChild(this.host)}this.modal.activate();o(this.host);this.originalTrigger=document.activeElement;requestAnimationFrame((()=>{this.show()}));const e=()=>requestAnimationFrame((()=>this.panel.focus({preventScroll:true})));const i=()=>{this.modal.deactivate();this.host.remove();this.label=undefined;this.isModal=false;t();if(this.originalTrigger&&typeof this.originalTrigger.focus==="function"){setTimeout((()=>this.originalTrigger.focus()))}};this.host.addEventListener("nanoAfterShow",e,{once:true});this.host.addEventListener("nano-after-show",e,{once:true});this.host.addEventListener("nanoAfterHide",i,{once:true});this.host.addEventListener("nano-after-hide",i,{once:true})}))}connectedCallback(){this.modal=new n(this.host);this.handleHoistChange();this.host.addEventListener("click",this.handleButtonClick);if(this.panel){this.addedTransEnd=true;this.panel.addEventListener("transitionend",this.handleTransitionEnd)}}disconnectedCallback(){r(this.host);this.host.removeEventListener("click",this.handleButtonClick);this.addedTransEnd=false;if(this.panel)this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}componentDidLoad(){if(this.open){this.show()}if(!this.addedTransEnd){this.panel.addEventListener("transitionend",this.handleTransitionEnd)}}render(){return i(a,{class:{...l(this.color)},showing:this.isShowing},this.isModal&&[i("div",{part:"overlay",class:{alert__overlay:true,"alert__overlay--open":this.open},ref:t=>this.overlay=t}),i("div",{class:"alert__modal-wrap",onClick:t=>{if(!t.target.classList.contains("alert__modal-wrap"))return;this.noDismiss=true;setTimeout((()=>this.noDismiss=false),250)}},i(this.Panel,null))],!this.isModal&&i(this.Panel,null))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"],duration:["handleDurationChange"],hoist:["handleHoistChange"]}}};m.style=h;export{m as nano_alert};
+import{r as t,c as e,h as i,a,g as s}from"./index-9695db0a.js";import{M as n}from"./modal-88c117cd.js";import{l as o,u as r}from"./scroll-762b3e1a.js";import{c as l}from"./theme-931bd452.js";import"./tabbable-26a66a22.js";import"./dom-8599fac1.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--border-color:var(--nano-layer-border-color, rgba(0, 0, 0, 0.1));--border-width:var(--nano-layer-border-width, 1px);--background:var(--nano-layer-bg, #fff);--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495));--icon-size:2rem;--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--close-button-color:#b5aea7;display:block}:host(.nano-color){--tint-color:var(--nano-color-base, var(--nano-color-primary, #007495))}.alert{position:relative;background-color:var(--background);border:solid var(--border-width) var(--border-color);border-block-start-width:4px;border-block-start-color:var(--tint-color);border-radius:var(--border-radius);opacity:0;transform:scale(0.9);transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease}.alert:focus{outline:none}.alert:not(.alert--showing){position:absolute;inline-size:1px;block-size:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--open{opacity:1;transform:none}.alert--toasty,.alert--modal{box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));margin:var(--nano-spacing-medium, 16px)}.alert--modal.alert--nodismiss{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.alert__content{display:flex;align-items:stretch}.alert__modal-wrap{position:fixed;display:flex;align-items:center;justify-content:center;inset:0;z-index:var(--nano-layer-index-alert, 800)}.alert__message{flex:1 1 auto;padding:var(--nano-spacing-medium, 16px);overflow:hidden;line-height:1.6}.alert__close{--color:var(--close-button-color);flex:0 0 auto;display:flex;align-items:center;font-size:1.1em;padding-inline:0 var(--nano-spacing-medium, 16px);padding-block:0}.alert__footer{padding:0 var(--nano-spacing-small, 8px) 0;display:flex;flex-direction:row;justify-content:space-around;align-items:center}.alert__footer ::slotted(*){flex:1;margin:0 var(--nano-spacing-small, 8px) var(--nano-spacing-medium, 16px) !important}.alert__overlay{position:fixed;inset:0;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;z-index:var(--nano-layer-index-alert, 800);-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));pointer-events:all}.alert__overlay--open{opacity:1}.alert__icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--icon-size)}.alert__icon ::slotted(*){color:var(--tint-color);margin-inline-start:var(--nano-spacing-medium, 16px)}";let c;let d;let f;let u;if(globalThis["document"]){c=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tr"});d=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tl"});f=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--bl"});u=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--br"})}const m=class{constructor(a){t(this,a);this.nanoShow=e(this,"nanoShow",7);this.nanoAfterShow=e(this,"nanoAfterShow",7);this.nanoHide=e(this,"nanoHide",7);this.nanoAfterHide=e(this,"nanoAfterHide",7);this.addedTransEnd=false;this.goingToHide=false;this.goingToShow=false;this.handleMouseMove=()=>{this.restartAutoHide()};this.handleCloseClick=()=>{this.hide()};this.handleTransitionEnd=t=>{if(t.propertyName==="opacity"&&(t.target===this.panel||t.target===this.overlay)){this.host.hidden=!this.open;this.isShowing=this.open;this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit()}};this.handleButtonClick=t=>{if(t.defaultPrevented)return;if(t.target.tagName&&t.target.tagName.toLowerCase()==="button")this.hide()};this.restartAutoHide=()=>{clearTimeout(this.autoHideTimeout);if(this.open&&this.duration<Infinity){this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration)}};this.Panel=()=>i("div",{ref:t=>this.panel=t,part:"panel",class:{alert:true,"alert--open":this.open,"alert--toasty":this.isToast,"alert--modal":!!this.isModal,"alert--showing":this.isShowing,"alert--nodismiss":this.noDismiss},role:!!this.isModal?"alertdialog":"alert","aria-live":"assertive","aria-atomic":"true","aria-hidden":this.open?"false":"true","aria-modal":!!this.isModal?"true":undefined,"aria-label":this.label?this.label:undefined,onMouseMove:this.handleMouseMove,tabIndex:!!this.isModal?0:undefined},i("div",{class:"alert__content"},i("div",{part:"icon",class:"alert__icon"},i("slot",{name:"icon"})),i("div",{part:"message",class:"alert__message"},i("slot",null)),this.closable&&i("div",{class:"alert__close"},i("nano-icon-button",{class:"alert__close",iconName:"light/times",label:"close menu",onClick:this.handleCloseClick}))),i("div",{class:"alert__footer"},i("slot",{name:"footer"})));this.isModal=false;this.isToast=false;this.isShowing=false;this.label=undefined;this.noDismiss=false;this.open=false;this.closable=false;this.color=undefined;this.duration=Infinity;this.hoist=false}handleOpenChange(){this.open?this.show():this.hide()}handleDurationChange(){this.restartAutoHide()}handleHoistChange(){if(!this.hoist||document.body.children[0]===this.host)return;document.body.prepend(this.host)}async show(){if(this.goingToShow){return}const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return false}this.host.hidden=false;this.goingToShow=true;this.open=true;requestAnimationFrame((()=>{this.isShowing=true;this.goingToShow=false}));if(this.duration<Infinity){clearTimeout(this.autoHideTimeout);this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration)}}async hide(){if(this.goingToHide){return}const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return false}this.goingToHide=true;this.open=false;requestAnimationFrame((()=>this.goingToHide=false));clearTimeout(this.autoHideTimeout)}async toast(t="tr"){this.isToast=true;return new Promise((e=>{let i;switch(t){case"tl":i=d;break;case"bl":i=f;break;case"br":i=u;break;default:i=c;break}if(!i.parentElement){document.body.appendChild(i)}i.appendChild(this.host);this.connectedCallback();this.show();const a=()=>{this.host.remove();this.isToast=false;e();if(!i.querySelector("nano-alert")){i.remove()}};this.host.addEventListener("nanoAfterHide",a,{once:true});this.host.addEventListener("nano-after-hide",a,{once:true})}))}async alert(t){this.isModal=true;this.label=t;return new Promise((t=>{if(!document.body.contains(this.host)){document.body.appendChild(this.host)}this.modal.activate();o(this.host);this.originalTrigger=document.activeElement;requestAnimationFrame((()=>{this.show()}));const e=()=>requestAnimationFrame((()=>this.panel.focus({preventScroll:true})));const i=()=>{this.modal.deactivate();this.host.remove();this.label=undefined;this.isModal=false;t();if(this.originalTrigger&&typeof this.originalTrigger.focus==="function"){setTimeout((()=>this.originalTrigger.focus()))}};this.host.addEventListener("nanoAfterShow",e,{once:true});this.host.addEventListener("nano-after-show",e,{once:true});this.host.addEventListener("nanoAfterHide",i,{once:true});this.host.addEventListener("nano-after-hide",i,{once:true})}))}connectedCallback(){this.modal=new n(this.host);this.handleHoistChange();this.host.addEventListener("click",this.handleButtonClick);if(this.panel){this.addedTransEnd=true;this.panel.addEventListener("transitionend",this.handleTransitionEnd)}}disconnectedCallback(){r(this.host);this.host.removeEventListener("click",this.handleButtonClick);this.addedTransEnd=false;if(this.panel)this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}componentDidLoad(){if(this.open){this.show()}if(!this.addedTransEnd){this.panel.addEventListener("transitionend",this.handleTransitionEnd)}}render(){return i(a,{class:{...l(this.color)},showing:this.isShowing},this.isModal&&[i("div",{part:"overlay",class:{alert__overlay:true,"alert__overlay--open":this.open},ref:t=>this.overlay=t}),i("div",{class:"alert__modal-wrap",onClick:t=>{if(!t.target.classList.contains("alert__modal-wrap"))return;this.noDismiss=true;setTimeout((()=>this.noDismiss=false),250)}},i(this.Panel,null))],!this.isModal&&i(this.Panel,null))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"],duration:["handleDurationChange"],hoist:["handleHoistChange"]}}};m.style=h;export{m as nano_alert};
 //# sourceMappingURL=nano-alert.entry.js.map

package/dist/nano-components/nano-components.css CHANGED Viewed

	@@ -1 +1 @@
1	- :host{box-sizing:border-box},::before,*::after{box-sizing:border-box}[hidden]{display:none !important}.nano-toast-stack{position:fixed;z-index:var(--nano-layer-index-modal, 700);inline-size:28rem;max-inline-size:100%;max-block-size:100%;overflow:auto}.nano-toast-stack--tr{inset-block-start:0;inset-inline-end:0}.nano-toast-stack--tl{inset-block-start:0;inset-inline-start:0}.nano-toast-stack--br{inset-block-end:0;inset-inline-end:0}.nano-toast-stack--bl{inset-block-end:0;inset-inline-start:0}.nano-sortable__placeholder{opacity:0}.nano-sortable__dragged{opacity:0.6;cursor:grabbing !important;box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));z-index:1;position:relative}.nano-sortable__keyboard-handle{background:white}.nano-sortable__handle-dragged{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}nano-intersection-observe,nano-resize-observe{visibility:visible !important}body:not(.nano-eager) nano-algolia-filter,body:not(.nano-eager) nano-algolia-input,body:not(.nano-eager) nano-algolia-pagination,body:not(.nano-eager) nano-algolia-results,body:not(.nano-eager) nano-details,body:not(.nano-eager) nano-grid-item,body:not(.nano-eager) nano-menu,body:not(.nano-eager) nano-range,body:not(.nano-eager) nano-rating,body:not(.nano-eager) nano-slide,body:not(.nano-eager) nano-slides,body:not(.nano-eager) nano-date-input,body:not(.nano-eager) nano-global-nav,body:not(.nano-eager) nano-global-search-results,body:not(.nano-eager) nano-menu-drawer,body:not(.nano-eager) nano-checkbox,body:not(.nano-eager) nano-checkbox-group,body:not(.nano-eager) nano-grid,body:not(.nano-eager) nano-option,body:not(.nano-eager) nano-algolia,body:not(.nano-eager) nano-date-picker,body:not(.nano-eager) nano-select,body:not(.nano-eager) nano-dropdown,body:not(.nano-eager) nano-nav-item,body:not(.nano-eager) nano-input,body:not(.nano-eager) nano-icon,body:not(.nano-eager) nano-tab-content,body:not(.nano-eager) nano-tab,body:not(.nano-eager) nano-hero,body:not(.nano-eager) nano-img,body:not(.nano-eager) nano-datalist,body:not(.nano-eager) nano-split-pane,body:not(.nano-eager) nano-file-upload,body:not(.nano-eager) nano-table,body:not(.nano-eager) nano-overflow-nav,body:not(.nano-eager) nano-alert,body:not(.nano-eager) nano-dialog,body:not(.nano-eager) nano-drawer{visibility:hidden}body:not(.nano-eager) nano-alert:not(.hydrated),body:not(.nano-eager) nano-dialog:not(.hydrated),body:not(.nano-eager) nano-drawer:not(.hydrated){display:none}body:not(.nano-eager) .hydrated{visibility:inherit}nano-alert:not(.hydrated),nano-dialog:not(.hydrated),nano-drawer:not(.hydrated){display:none}nano-tooltip:not(.hydrated) [slot=content]{display:none}nano-animation{visibility:inherit !important}nano-dropdown{visibility:inherit !important}nano-dropdown:not(.hydrated) :not([slot=trigger]){display:none}html{block-size:100%}[hidden]{display:none !important}nano-slide:not([ready]),nano-slides:not([ready]){opacity:0}.nano-scroll-lock{overflow:hidden !important}.visually-hidden:not(:focus):not(:active):not(:focus-within){-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}
1	+ :host{box-sizing:border-box},::before,*::after{box-sizing:border-box}[hidden]{display:none !important}.nano-toast-stack{position:fixed;z-index:var(--nano-layer-index-modal, 700);inline-size:28rem;max-inline-size:100%;max-block-size:100%;overflow:auto}.nano-toast-stack--tr{inset-block-start:0;inset-inline-end:0}.nano-toast-stack--tl{inset-block-start:0;inset-inline-start:0}.nano-toast-stack--br{inset-block-end:0;inset-inline-end:0}.nano-toast-stack--bl{inset-block-end:0;inset-inline-start:0}.nano-sortable__placeholder{opacity:0}.nano-sortable__dragged{opacity:0.6;cursor:grabbing !important;box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));z-index:1;position:relative}.nano-sortable__keyboard-handle{background:white}.nano-sortable__handle-dragged{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}nano-intersection-observe,nano-resize-observe{visibility:visible !important}body:not(.nano-eager) nano-algolia-filter,body:not(.nano-eager) nano-algolia-input,body:not(.nano-eager) nano-algolia-pagination,body:not(.nano-eager) nano-algolia-results,body:not(.nano-eager) nano-details,body:not(.nano-eager) nano-grid-item,body:not(.nano-eager) nano-menu,body:not(.nano-eager) nano-range,body:not(.nano-eager) nano-rating,body:not(.nano-eager) nano-slide,body:not(.nano-eager) nano-slides,body:not(.nano-eager) nano-date-input,body:not(.nano-eager) nano-global-nav,body:not(.nano-eager) nano-global-search-results,body:not(.nano-eager) nano-menu-drawer,body:not(.nano-eager) nano-checkbox,body:not(.nano-eager) nano-checkbox-group,body:not(.nano-eager) nano-grid,body:not(.nano-eager) nano-option,body:not(.nano-eager) nano-algolia,body:not(.nano-eager) nano-date-picker,body:not(.nano-eager) nano-select,body:not(.nano-eager) nano-dropdown,body:not(.nano-eager) nano-nav-item,body:not(.nano-eager) nano-input,body:not(.nano-eager) nano-icon,body:not(.nano-eager) nano-tab-content,body:not(.nano-eager) nano-tab,body:not(.nano-eager) nano-hero,body:not(.nano-eager) nano-img,body:not(.nano-eager) nano-datalist,body:not(.nano-eager) nano-split-pane,body:not(.nano-eager) nano-file-upload,body:not(.nano-eager) nano-table,body:not(.nano-eager) nano-overflow-nav,body:not(.nano-eager) nano-alert,body:not(.nano-eager) nano-dialog,body:not(.nano-eager) nano-drawer{visibility:hidden}body:not(.nano-eager) nano-alert:not(.hydrated),body:not(.nano-eager) nano-dialog:not(.hydrated),body:not(.nano-eager) nano-drawer:not(.hydrated){display:none}body:not(.nano-eager) .hydrated{visibility:inherit}nano-alert:not(.hydrated),nano-dialog:not(.hydrated),nano-drawer:not(.hydrated){display:none}nano-tooltip:not(.hydrated) [slot=content]{display:none}nano-animation{visibility:inherit !important}nano-dropdown{visibility:inherit !important}nano-dropdown:not(.hydrated) :not([slot=trigger]){display:none}html{block-size:100%}[hidden]{display:none !important}nano-slide:not([ready]),nano-slides:not([ready]){opacity:0}@supports (scrollbar-gutter: stable){.nano-scroll-lock{scrollbar-gutter:var(--nano-scroll-lock-gutter) !important}.nano-scroll-lock body{overflow:hidden !important}}@supports not (scrollbar-gutter: stable){.nano-scroll-lock body{padding-inline-end:var(--nano-scroll-lock-size) !important;overflow:hidden !important}}.visually-hidden:not(:focus):not(:active):not(:focus-within){-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}

package/dist/nano-components/nano-dialog.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as i,c as a,h as o,a as t,g as s}from"./index-9695db0a.js";import{M as e}from"./modal-88c117cd.js";import{l as n,u as r}from"./scroll-ac332213.js";import{h as l}from"./slot-8126e238.js";import{C as d}from"./component-store-486d9d7a.js";import"./tabbable-26a66a22.js";import"./dom-8599fac1.js";import"./throttle-ac4fcefa.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--content-background:#fafafa;--footer-content:#e4e6e8;--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--close-button-color:#b5aea7;--width:60rem;--tint-color:#00607b;--body-padding-v:var(--nano-spacing-large, 20px);--body-padding-h:var(--nano-spacing-large, 20px);--header-padding-v:var(--nano-spacing-medium, 16px);--header-padding-h:var(--nano-spacing-large, 20px);--footer-padding-v:var(--nano-spacing-medium, 16px);--footer-padding-h:var(--nano-spacing-large, 20px)}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--nano-layer-index-modal, 700)}.dialog__panel{display:flex;flex-direction:column;z-index:2;inline-size:var(--width);max-inline-size:calc(100% - var(--nano-spacing-xlarge, 24px));max-block-size:calc(92% - var(--nano-spacing-xlarge, 24px));background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);opacity:0;transform:scale(0.8);transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform}.dialog__panel:focus{outline:none}.dialog--with-ribbon .dialog__panel{border-block-start:5px solid var(--tint-color)}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog--nodismiss .dialog__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.dialog__header{flex:0 0 auto;display:flex;inline-size:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--nano-transition-fast, 0.1s) box-shadow;min-inline-size:auto}[stuck] .dialog__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.dialog__title{flex:1 1 auto;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.6;padding-block:var(--header-padding-v);padding-inline:var(--header-padding-h)}.dialog .dialog__close-icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);padding-block:0;padding-inline:var(--header-padding-h);--color:var(--close-button-color)}.dialog__body{padding-block:0 var(--body-padding-v);padding-inline:var(--body-padding-h)}.dialog:not(.dialog--has-header) .dialog__body{padding-block-start:var(--body-padding-v)}.dialog__body ::slotted(*){max-inline-size:100%}.dialog__body-wrap{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-radius:0 0 inherit inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-radius:inherit inherit 0 0}.dialog__footer{inline-size:100%;padding-block:var(--footer-padding-v);padding-inline:var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;inset-block-start:1px;min-inline-size:auto}.dialog__footer ::slotted(button){margin-inline-end:var(--nano-spacing-small, 8px) !important}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__close-txt{color:var(--tint-color);border:none;text-decoration:underline;margin:0;text-underline-offset:4px;background-color:transparent;font:inherit;-webkit-box-align:center;cursor:pointer;font-size:var(--nano-fontsize-small, 0.875rem);padding:0.5rem;border-radius:var(--nano-border-radius-small, 2px);transition:box-shadow 100ms ease-in-out}.dialog__close-txt:focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.dialog__overlay{position:fixed;inset:0;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.dialog--open .dialog__overlay{opacity:1}";let c=0;const g=class{constructor(o){i(this,o);this.nanoShow=a(this,"nanoShow",7);this.nanoAfterShow=a(this,"nanoAfterShow",7);this.nanoHide=a(this,"nanoHide",7);this.nanoAfterHide=a(this,"nanoAfterHide",7);this.nanoInitialFocus=a(this,"nanoInitialFocus",7);this.nanoRequestClose=a(this,"nanoRequestClose",7);this.componentId=`dialog-${++c}`;this.willShow=false;this.willHide=false;this.handleKeyDown=i=>{if(i.key==="Escape"){this.requestClose()}};this.requestClose=()=>{const i=this.nanoRequestClose.emit();if(!i.defaultPrevented&&!this.noUserDismiss){this.hide()}else{this.noDismiss=true;setTimeout((()=>this.noDismiss=false),250)}};this.handleTransitionEnd=i=>{if(i.propertyName==="opacity"&&i.composedPath().find((i=>i===this.panel||i===this.overlay))){this.willShow=false;this.willHide=false;this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit();if(!this.open)this.dialog.hidden=true}};this.handleSlotChange=()=>{this.hasFooter=l(this.host,"footer")};this.noDismiss=false;this.hasFooter=false;this.showRibbon=true;this.open=false;this.label=undefined;this.noHeader=false;this.noFooter=false;this.noUserDismiss=false;this.storeId=undefined;this.storeMethod="url-hash";this.hoist=false}get panel(){return this._panel}set panel(i){if(this._panel){this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}i.addEventListener("transitionend",this.handleTransitionEnd);this._panel=i}handleOpenChange(){this.open?this.show():this.hide()}handleHoistChange(){if(!this.hoist||Array.from(document.body.children).includes(this.host))return;document.body.prepend(this.host)}async show(){if(this.willShow){return}const i=this.nanoShow.emit();if(i.defaultPrevented){this.open=false;return}if(this.dialog)this.dialog.hidden=false;this.originalTrigger=document.activeElement;this.willShow=true;this.open=true;this.modal.activate();n(this.host);if(this.open){this.host.addEventListener("nanoAfterShow",(()=>{const i=this.nanoInitialFocus.emit();if(!i.defaultPrevented){this.panel.focus({preventScroll:true})}}),{once:true})}}async hide(){if(this.willHide){return}const i=this.nanoHide.emit();if(i.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false;this.modal.deactivate();r(this.host);this.stopVideos();const a=this.originalTrigger;if(a&&typeof a.focus==="function"){setTimeout((()=>a.focus()))}}stopVideos(){const i=Array.from(this.host.querySelectorAll("iframe,video"));i.forEach((i=>{if(i.tagName.toLowerCase()==="video")i.pause();else{const a=i.src;i.src=a}}))}connectedCallback(){this.handleHoistChange();this.modal=new e(this.host)}componentWillLoad(){this.handleSlotChange();if(this.open)this.show();if(this.storeId)d.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){this.dialog.hidden=!this.open}disconnectedCallback(){r(this.host);if(!this.panel)return;this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}render(){return o(t,null,o("div",{part:"base",class:{dialog:true,"dialog--open":this.open,"dialog--has-footer":!this.noFooter,"dialog--has-header":!this.noHeader,"dialog--nodismiss":this.noDismiss,"dialog--with-ribbon":this.showRibbon},onKeyDown:this.handleKeyDown,ref:i=>this.dialog=i},o("div",{part:"overlay",class:"dialog__overlay",ref:i=>this.overlay=i,onClick:this.requestClose}),o("div",{ref:i=>this.panel=i,part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?`${this.componentId}-title`:null,tabIndex:0},o("div",{class:"dialog__body-wrap"},!this.noHeader&&o("nano-sticker",null,o("div",{part:"header",class:"dialog__header"},o("span",{part:"title",class:"dialog__title",id:`${this.componentId}-title`},o("slot",{name:"label"},this.label||String.fromCharCode(65279))),!this.noUserDismiss&&o("nano-icon-button",{part:"close-button",exportparts:"base:close-button__base",class:"dialog__close-icon",label:"close dialog",onClick:this.requestClose,iconName:"light/times"}))),o("div",{part:"body",class:"dialog__body"},o("slot",null)),!this.noFooter&&(this.hasFooter||!this.noUserDismiss)&&o("nano-sticker",{position:"bottom"},o("footer",{part:"footer",class:"dialog__footer"},o("slot",{name:"footer",onSlotchange:this.handleSlotChange}),!this.noUserDismiss&&o("button",{class:"dialog__close-txt",onClick:this.requestClose},"Close")))))))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"],hoist:["handleHoistChange"]}}};g.style=h;export{g as nano_dialog};
+import{r as i,c as o,h as a,a as t,g as s}from"./index-9695db0a.js";import{M as e}from"./modal-88c117cd.js";import{l as n,u as r}from"./scroll-762b3e1a.js";import{h as l}from"./slot-8126e238.js";import{C as d}from"./component-store-486d9d7a.js";import"./tabbable-26a66a22.js";import"./dom-8599fac1.js";import"./throttle-ac4fcefa.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--content-background:#fafafa;--footer-content:#e4e6e8;--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--close-button-color:#b5aea7;--width:60rem;--tint-color:#00607b;--body-padding-v:var(--nano-spacing-large, 20px);--body-padding-h:var(--nano-spacing-large, 20px);--header-padding-v:var(--nano-spacing-medium, 16px);--header-padding-h:var(--nano-spacing-large, 20px);--footer-padding-v:var(--nano-spacing-medium, 16px);--footer-padding-h:var(--nano-spacing-large, 20px)}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--nano-layer-index-modal, 700);border:none;inline-size:unset;block-size:unset;color:unset;background-color:unset}.dialog::backdrop{display:none}.dialog__panel{display:flex;flex-direction:column;z-index:2;inline-size:var(--width);max-inline-size:calc(100% - (var(--nano-spacing-xlarge, 24px) + var(--nano-scroll-lock-size)));max-block-size:calc(92vh - var(--nano-spacing-xlarge, 24px));background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);opacity:0;transform:scale(0.8);transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform}.dialog__panel:focus{outline:none}.dialog--with-ribbon .dialog__panel{border-block-start:5px solid var(--tint-color)}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog--nodismiss .dialog__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.dialog__header{flex:0 0 auto;display:flex;inline-size:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--nano-transition-fast, 0.1s) box-shadow;min-inline-size:auto}[stuck] .dialog__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.dialog__title{flex:1 1 auto;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.6;padding-block:var(--header-padding-v);padding-inline:var(--header-padding-h)}.dialog .dialog__close-icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);padding-block:0;padding-inline:var(--header-padding-h);--color:var(--close-button-color)}.dialog__body{padding-block:0 var(--body-padding-v);padding-inline:var(--body-padding-h)}.dialog:not(.dialog--has-header) .dialog__body{padding-block-start:var(--body-padding-v)}.dialog__body ::slotted(*){max-inline-size:100%}.dialog__body-wrap{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-radius:0 0 inherit inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-radius:inherit inherit 0 0}.dialog__footer{inline-size:100%;padding-block:var(--footer-padding-v);padding-inline:var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:sticky;inset-block-end:0;min-inline-size:auto}.dialog__footer ::slotted(button){margin-inline-end:var(--nano-spacing-small, 8px) !important}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__close-txt{color:var(--tint-color);border:none;text-decoration:underline;margin:0;text-underline-offset:4px;background-color:transparent;font:inherit;-webkit-box-align:center;cursor:pointer;font-size:var(--nano-fontsize-small, 0.875rem);padding:0.5rem;border-radius:var(--nano-border-radius-small, 2px);transition:box-shadow 100ms ease-in-out}.dialog__close-txt:focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.dialog__overlay{position:fixed;inset:0 !important;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.dialog--open .dialog__overlay{opacity:1}";let c=0;const g=class{constructor(a){i(this,a);this.nanoShow=o(this,"nanoShow",7);this.nanoAfterShow=o(this,"nanoAfterShow",7);this.nanoHide=o(this,"nanoHide",7);this.nanoAfterHide=o(this,"nanoAfterHide",7);this.nanoInitialFocus=o(this,"nanoInitialFocus",7);this.nanoRequestClose=o(this,"nanoRequestClose",7);this.componentId=`dialog-${++c}`;this.willShow=false;this.willHide=false;this.handleKeyDown=i=>{if(i.key==="Escape"){this.requestClose()}};this.requestClose=()=>{const i=this.nanoRequestClose.emit();if(!i.defaultPrevented&&!this.noUserDismiss){this.hide()}else{this.noDismiss=true;setTimeout((()=>this.noDismiss=false),250)}};this.handleTransitionEnd=i=>{if(i.propertyName==="opacity"&&i.composedPath().find((i=>i===this.panel||i===this.overlay))){this.willShow=false;this.willHide=false;this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit();if(!this.open)this.dialog.hidden=true}};this.handleSlotChange=()=>{this.hasFooter=l(this.host,"footer")};this.noDismiss=false;this.hasFooter=false;this.showRibbon=true;this.open=false;this.label=undefined;this.noHeader=false;this.noFooter=false;this.noUserDismiss=false;this.storeId=undefined;this.storeMethod="url-hash";this.hoist=false}get panel(){return this._panel}set panel(i){if(this._panel){this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}i.addEventListener("transitionend",this.handleTransitionEnd);this._panel=i}handleOpenChange(){this.open?this.show():this.hide()}handleHoistChange(){if(globalThis.HTMLElement.prototype.hasOwnProperty("popover")||!this.hoist||Array.from(document.body.children).includes(this.host))return;document.body.prepend(this.host)}async show(){if(this.willShow){return}const i=this.nanoShow.emit();if(i.defaultPrevented){this.open=false;return}if(this.dialog)this.dialog.hidden=false;this.originalTrigger=document.activeElement;this.willShow=true;this.open=true;this.modal.activate();if(typeof this.dialog?.showPopover==="function"){this.dialog.showPopover()}n(this.host);if(this.open){this.host.addEventListener("nanoAfterShow",(()=>{const i=this.nanoInitialFocus.emit();if(!i.defaultPrevented){this.panel.focus({preventScroll:true})}}),{once:true})}}async hide(){if(this.willHide){return}const i=this.nanoHide.emit();if(i.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false;this.modal.deactivate();this.stopVideos();const o=this.originalTrigger;if(o&&typeof o.focus==="function"){setTimeout((()=>o.focus()))}setTimeout((()=>{if(!this.open&&typeof this.dialog?.hidePopover==="function"){this.dialog.hidePopover()}r(this.host)}),300)}stopVideos(){const i=Array.from(this.host.querySelectorAll("iframe,video"));i.forEach((i=>{if(i.tagName.toLowerCase()==="video")i.pause();else{const o=i.src;i.src=o}}))}connectedCallback(){this.handleHoistChange();this.modal=new e(this.host)}componentWillLoad(){this.handleSlotChange();if(this.open)this.show();if(this.storeId)d.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){this.dialog.hidden=!this.open}disconnectedCallback(){r(this.host);if(!this.panel)return;this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}render(){return a(t,null,a("div",{part:"base",class:{dialog:true,"dialog--open":this.open,"dialog--has-footer":!this.noFooter,"dialog--has-header":!this.noHeader,"dialog--nodismiss":this.noDismiss,"dialog--with-ribbon":this.showRibbon},onKeyDown:this.handleKeyDown,ref:i=>this.dialog=i,popover:"manual"},a("div",{part:"overlay",class:"dialog__overlay",ref:i=>this.overlay=i,onClick:this.requestClose}),a("div",{ref:i=>this.panel=i,part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?`${this.componentId}-title`:null,tabIndex:-1},a("div",{class:"dialog__body-wrap"},!this.noHeader&&a("nano-sticker",null,a("header",{part:"header",class:"dialog__header"},a("span",{part:"title",class:"dialog__title",id:`${this.componentId}-title`},a("slot",{name:"label"},this.label||String.fromCharCode(65279))),!this.noUserDismiss&&a("nano-icon-button",{part:"close-button",exportparts:"base:close-button__base",class:"dialog__close-icon",label:"close dialog",onClick:this.requestClose,iconName:"light/times"}))),a("div",{part:"body",class:"dialog__body"},a("slot",null)),!this.noFooter&&(this.hasFooter||!this.noUserDismiss)&&a("footer",{part:"footer",class:"dialog__footer"},a("slot",{name:"footer",onSlotchange:this.handleSlotChange}),!this.noUserDismiss&&a("button",{class:"dialog__close-txt",onClick:this.requestClose},"Close"))))))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"],hoist:["handleHoistChange"]}}};g.style=h;export{g as nano_dialog};
 //# sourceMappingURL=nano-dialog.entry.js.map

package/dist/nano-components/nano-dialog.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["dialogCss","id","Dialog","this","componentId","willShow","willHide","handleKeyDown","event","key","requestClose","nanoOverlayDismiss","nanoRequestClose","emit","defaultPrevented","noUserDismiss","hide","noDismiss","setTimeout","handleTransitionEnd","propertyName","composedPath","find","node","panel","overlay","open","nanoAfterShow","nanoAfterHide","dialog","hidden","handleSlotChange","hasFooter","hasSlot","host","_panel","p","removeEventListener","addEventListener","handleOpenChange","show","handleHoistChange","hoist","Array","from","document","body","children","includes","prepend","async","nanoShow","originalTrigger","activeElement","modal","activate","lockBodyScrolling","nanoInitialFocus","focus","preventScroll","once","nanoHide","deactivate","unlockBodyScrolling","stopVideos","trigger","videos","querySelectorAll","forEach","video","tagName","toLowerCase","pause","src","connectedCallback","Modal","componentWillLoad","storeId","ComponentStore","init","storeMethod","componentDidLoad","disconnectedCallback","render","h","Host","part","class","noFooter","noHeader","showRibbon","onKeyDown","ref","ele","el","onClick","role","label","tabIndex","name","String","fromCharCode","exportparts","iconName","position","onSlotchange"],"sources":["./src/components/dialog/dialog.scss?tag=nano-dialog&encapsulation=shadow","./src/components/dialog/dialog.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n@import '../../global/style/nano-theme/form';\n\n/*\n @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n * @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --content-background: defaults to #{$layer-bg-color};\n * @prop --footer-background: defaults to #{map.get($colors, celsius)};\n * @prop --box-shadow: defaults to $layer-shadow-xlarge;\n * @prop --close-button-color: defaults to #{map.get($colors, palegrey)};\n * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n * @prop --tint-color: colour used to highlight items in the dialog - top ribbon, bottom close button. Default #{map.get($colors, blue)};\n * @prop --width: defaults to 31rem;\n * @prop --nano-layer-overlay-blur: inheritable theme applied to backdrop. Default to #{$layer-overlay-blur}\n /\n:host {\n --border-radius: #{$layer-border-radius};\n --content-background: #fafafa;\n --footer-content: #{map.get($colors, lightgrey)};\n --scrim-color: #{$layer-overlay-dark};\n --box-shadow: #{$layer-shadow-large};\n --close-button-color: #{map.get($colors, palegrey)};\n --width: 60rem;\n --tint-color: #{darken(map.get($colors, blue), 5%)};\n --body-padding-v: #{$spacing-large};\n --body-padding-h: #{$spacing-large};\n --header-padding-v: #{$spacing-medium};\n --header-padding-h: #{$spacing-large};\n --footer-padding-v: #{$spacing-medium};\n --footer-padding-h: #{$spacing-large};\n}\n\n.dialog {\n $self: &;\n\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n inset: 0;\n z-index: #{$layer-index-modal};\n\n &__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n inline-size: var(--width);\n max-inline-size: calc(100% - #{$spacing-xlarge});\n max-block-size: calc(92% - #{$spacing-xlarge});\n background-color: var(--content-background);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n opacity: 0;\n transform: scale(0.8);\n transition: #{$transition-fast} opacity, #{$transition-fast} transform;\n\n &:focus {\n outline: none;\n }\n\n .dialog--with-ribbon & {\n border-block-start: 5px solid var(--tint-color);\n }\n\n .dialog--open & {\n display: flex;\n opacity: 1;\n transform: none;\n }\n\n .dialog--nodismiss & {\n animation: cannotClose 0.25s ease-in-out 1;\n\n @keyframes cannotClose {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.08);\n }\n\n 100% {\n transform: scale(1);\n }\n }\n }\n }\n\n &__header {\n flex: 0 0 auto;\n display: flex;\n inline-size: 100%;\n background-color: var(--content-background);\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n transition: #{$transition-xfast} box-shadow;\n min-inline-size: auto;\n\n [stuck] & {\n box-shadow: #{$layer-shadow-medium};\n }\n }\n\n &__title {\n flex: 1 1 auto;\n font-size: #{$fontsize-large};\n line-height: 1.6;\n padding-block: var(--header-padding-v);\n padding-inline: var(--header-padding-h);\n }\n\n & &__close-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: #{$fontsize-xlarge};\n padding-block: 0;\n padding-inline: var(--header-padding-h);\n\n --color: var(--close-button-color);\n }\n\n &__body {\n padding-block: 0 var(--body-padding-v);\n padding-inline: var(--body-padding-h);\n\n .dialog:not(.dialog--has-header) & {\n padding-block-start: var(--body-padding-v);\n }\n\n & ::slotted() {\n max-inline-size: 100%;\n }\n\n &-wrap {\n flex: 1 1 auto;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n border-radius: var(--border-radius);\n\n .dialog:not(.dialog--has-header) & {\n border-radius: 0 0 inherit inherit;\n }\n\n .dialog:not(.dialog--has-footer) & {\n border-radius: inherit inherit 0 0;\n }\n }\n }\n\n &__footer {\n inline-size: 100%;\n padding-block: var(--footer-padding-v);\n padding-inline: var(--footer-padding-h);\n background: var(--footer-content);\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n position: relative;\n inset-block-start: 1px;\n min-inline-size: auto;\n\n ::slotted(button) {\n margin-inline-end: #{$spacing-small} !important;\n }\n\n .dialog:not(.dialog--has-footer) & {\n display: none;\n }\n }\n\n &__close-txt {\n color: var(--tint-color);\n border: none;\n text-decoration: underline;\n margin: 0;\n text-underline-offset: 4px;\n background-color: transparent;\n font: inherit;\n -webkit-box-align: center;\n cursor: pointer;\n font-size: #{$fontsize-small};\n padding: 0.5rem;\n border-radius: #{$border-radius-small};\n transition: box-shadow 100ms ease-in-out;\n\n &:focus {\n outline: none;\n box-shadow: #{$control-focus-style};\n }\n }\n\n &__overlay {\n position: fixed;\n inset: 0;\n background-color: var(--scrim-color);\n opacity: 0;\n transition: #{$transition-fast} opacity;\n backdrop-filter: blur(#{$layer-overlay-blur});\n\n .dialog--open & {\n opacity: 1;\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n ComponentInterface,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\n\nlet id = 0;\n\n/*\n Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n \n @part base - The component’s base wrapper\n * @part overlay - The overlay that covers the screen behind the dialog\n * @part panel - The dialog’s panel (where the dialog and its content are rendered)\n * @part header - The dialog’s header. This element wraps the title and header actions\n * @part title - The dialog’s title\n * @part close-button - The `<nano-icon-button>` close button\n * @part close-button__base - The close button's exported `base` part\n * @part body - dilog body / content\n * @part footer - dialog footer bar\n \n @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n * @slot - The dialog's content.\n /\n@Component({\n tag: 'nano-dialog',\n styleUrl: 'dialog.scss',\n shadow: true,\n})\nexport class Dialog implements ComponentInterface {\n private componentId = `dialog-${++id}`;\n private modal: Modal;\n private willShow = false;\n private willHide = false;\n private originalTrigger: HTMLElement \| null;\n private overlay: HTMLElement;\n private dialog: HTMLElement;\n\n get panel() {\n return this._panel;\n }\n set panel(p: HTMLElement) {\n if (this._panel) {\n this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n }\n p.addEventListener('transitionend', this.handleTransitionEnd);\n this._panel = p;\n }\n private _panel: HTMLElement;\n\n @Element() host: HTMLNanoDialogElement;\n @State() noDismiss = false;\n @State() hasFooter = false;\n\n /* Show a colour ribbon at the top of the modal /\n @Prop() showRibbon = true;\n\n /* Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /* The dialog's label as displayed in the header. You should always include a relevant\n * label even when using `no-header`, as it is required for proper accessibility. /\n @Prop() label!: string;\n\n /* Set to true to disable the header. This will also remove the default close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. /\n @Prop() noHeader = false;\n\n /* Set to true to disable the footer. This will also remove the footer close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. /\n @Prop() noFooter = false;\n\n /* An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key /\n @Prop() noUserDismiss = false;\n\n /* Store search queries (against this ID) to the component store. Use in conjunction with storeMethod /\n @Prop() storeId?: string;\n\n /* The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). /\n @Prop() storeMethod: StorageMethods = 'url-hash';\n\n /* Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` /\n @Prop() hoist = false;\n\n @Watch('hoist')\n handleHoistChange() {\n if (!this.hoist \|\| Array.from(document.body.children).includes(this.host))\n return;\n document.body.prepend(this.host);\n }\n\n /* Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event() nanoShow: EventEmitter;\n\n /* Emitted after the dialog opens and all transitions are complete. /\n @Event() nanoAfterShow: EventEmitter;\n\n /* Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event() nanoHide: EventEmitter;\n\n /* Emitted after the dialog closes and all transitions are complete. /\n @Event() nanoAfterHide: EventEmitter;\n\n /* Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent\n * focus and allow you to set it on a different element in the dialog, such as an input or button. /\n @Event() nanoInitialFocus: EventEmitter;\n\n /* Emitted when the user clicks the close button, clicks the overlay, or presses the `Escape` key. Calling `event.preventDefault()` will prevent the dialog from closing. /\n @Event() nanoRequestClose: EventEmitter;\n\n /* Shows the dialog /\n @Method()\n async show() {\n if (this.willShow) {\n return;\n }\n\n const nanoShow = this.nanoShow.emit();\n if (nanoShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n if (this.dialog) this.dialog.hidden = false;\n this.originalTrigger = document.activeElement as HTMLElement;\n this.willShow = true;\n this.open = true;\n this.modal.activate();\n\n lockBodyScrolling(this.host);\n\n if (this.open) {\n // Wait for the next frame before setting initial focus so the dialog is technically visible\n this.host.addEventListener(\n 'nanoAfterShow',\n () => {\n const nanoInitialFocus = this.nanoInitialFocus.emit();\n if (!nanoInitialFocus.defaultPrevented) {\n this.panel.focus({ preventScroll: true });\n }\n },\n { once: true }\n );\n }\n }\n\n /* Hides the dialog /\n @Method()\n async hide() {\n if (this.willHide) {\n return;\n }\n\n const nanoHide = this.nanoHide.emit();\n if (nanoHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n this.modal.deactivate();\n unlockBodyScrolling(this.host);\n this.stopVideos();\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (trigger && typeof trigger.focus === 'function') {\n setTimeout(() => trigger.focus());\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.requestClose();\n }\n };\n\n private requestClose = () => {\n const nanoOverlayDismiss = this.nanoRequestClose.emit();\n\n if (!nanoOverlayDismiss.defaultPrevented && !this.noUserDismiss) {\n this.hide();\n } else {\n this.noDismiss = true;\n setTimeout(() => (this.noDismiss = false), 250);\n }\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (\n event.propertyName === 'opacity' &&\n event\n .composedPath()\n .find((node) => node === this.panel \|\| node === this.overlay)\n ) {\n // Ensure we only emit one event when the target element is no longer visible\n this.willShow = false;\n this.willHide = false;\n this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n if (!this.open) this.dialog.hidden = true;\n }\n };\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, 'footer');\n };\n\n private stopVideos() {\n const videos: (HTMLVideoElement \| HTMLIFrameElement)[] = Array.from(\n this.host.querySelectorAll('iframe,video')\n );\n videos.forEach((video) => {\n if (video.tagName.toLowerCase() === 'video')\n (video as HTMLVideoElement).pause();\n else {\n const src = video.src;\n video.src = src;\n }\n });\n }\n\n connectedCallback() {\n this.handleHoistChange();\n this.modal = new Modal(this.host);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n // Show on init if open\n if (this.open) this.show();\n if (this.storeId)\n ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n }\n\n componentDidLoad() {\n this.dialog.hidden = !this.open;\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n if (!this.panel) return;\n this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n }\n\n render() {\n return (\n <Host>\n <div\n part=\"base\"\n class={{\n dialog: true,\n 'dialog--open': this.open,\n 'dialog--has-footer': !this.noFooter,\n 'dialog--has-header': !this.noHeader,\n 'dialog--nodismiss': this.noDismiss,\n 'dialog--with-ribbon': this.showRibbon,\n }}\n onKeyDown={this.handleKeyDown}\n ref={(ele) => (this.dialog = ele)}\n >\n <div\n part=\"overlay\"\n class=\"dialog__overlay\"\n ref={(el) => (this.overlay = el)}\n onClick={this.requestClose}\n />\n\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"dialog__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : null}\n aria-labelledby={\n !this.noHeader ? `${this.componentId}-title` : null\n }\n tabIndex={0}\n >\n <div class=\"dialog__body-wrap\">\n {!this.noHeader && (\n <nano-sticker>\n <div part=\"header\" class=\"dialog__header\">\n <span\n part=\"title\"\n class=\"dialog__title\"\n id={`${this.componentId}-title`}\n >\n <slot name=\"label\">\n {/ If there's no label, use an invisible character to prevent the heading from collapsing */}\n {this.label \|\| String.fromCharCode(65279)}\n </slot>\n </span>\n {!this.noUserDismiss && (\n <nano-icon-button\n part=\"close-button\"\n exportparts=\"base:close-button__base\"\n class=\"dialog__close-icon\"\n label=\"close dialog\"\n onClick={this.requestClose}\n iconName=\"light/times\"\n />\n )}\n </div>\n </nano-sticker>\n )}\n <div part=\"body\" class=\"dialog__body\">\n <slot />\n </div>\n {!this.noFooter && (this.hasFooter \|\| !this.noUserDismiss) && (\n <nano-sticker position=\"bottom\">\n <footer part=\"footer\" class=\"dialog__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n {!this.noUserDismiss && (\n <button\n class=\"dialog__close-txt\"\n onClick={this.requestClose}\n >\n Close\n </button>\n )}\n </footer>\n </nano-sticker>\n )}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["dialogCss","id","Dialog","this","componentId","willShow","willHide","handleKeyDown","event","key","requestClose","nanoOverlayDismiss","nanoRequestClose","emit","defaultPrevented","noUserDismiss","hide","noDismiss","setTimeout","handleTransitionEnd","propertyName","composedPath","find","node","panel","overlay","open","nanoAfterShow","nanoAfterHide","dialog","hidden","handleSlotChange","hasFooter","hasSlot","host","_panel","p","removeEventListener","addEventListener","handleOpenChange","show","handleHoistChange","globalThis","HTMLElement","prototype","hasOwnProperty","hoist","Array","from","document","body","children","includes","prepend","async","nanoShow","originalTrigger","activeElement","modal","activate","showPopover","lockBodyScrolling","nanoInitialFocus","focus","preventScroll","once","nanoHide","deactivate","stopVideos","trigger","hidePopover","unlockBodyScrolling","videos","querySelectorAll","forEach","video","tagName","toLowerCase","pause","src","connectedCallback","Modal","componentWillLoad","storeId","ComponentStore","init","storeMethod","componentDidLoad","disconnectedCallback","render","h","Host","part","class","noFooter","noHeader","showRibbon","onKeyDown","ref","ele","popover","el","onClick","role","label","tabIndex","name","String","fromCharCode","exportparts","iconName","onSlotchange"],"sources":["./src/components/dialog/dialog.scss?tag=nano-dialog&encapsulation=shadow","./src/components/dialog/dialog.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n@import '../../global/style/nano-theme/form';\n\n/*\n @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n * @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --content-background: defaults to #{$layer-bg-color};\n * @prop --footer-background: defaults to #{map.get($colors, celsius)};\n * @prop --box-shadow: defaults to $layer-shadow-xlarge;\n * @prop --close-button-color: defaults to #{map.get($colors, palegrey)};\n * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n * @prop --tint-color: colour used to highlight items in the dialog - top ribbon, bottom close button. Default #{map.get($colors, blue)};\n * @prop --width: defaults to 31rem;\n * @prop --nano-layer-overlay-blur: inheritable theme applied to backdrop. Default to #{$layer-overlay-blur}\n /\n:host {\n --border-radius: #{$layer-border-radius};\n --content-background: #fafafa;\n --footer-content: #{map.get($colors, lightgrey)};\n --scrim-color: #{$layer-overlay-dark};\n --box-shadow: #{$layer-shadow-large};\n --close-button-color: #{map.get($colors, palegrey)};\n --width: 60rem;\n --tint-color: #{darken(map.get($colors, blue), 5%)};\n --body-padding-v: #{$spacing-large};\n --body-padding-h: #{$spacing-large};\n --header-padding-v: #{$spacing-medium};\n --header-padding-h: #{$spacing-large};\n --footer-padding-v: #{$spacing-medium};\n --footer-padding-h: #{$spacing-large};\n}\n\n.dialog {\n $self: &;\n\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n inset: 0;\n z-index: #{$layer-index-modal};\n\n // reset native popover styles\n border: none;\n inline-size: unset;\n block-size: unset;\n color: unset;\n background-color: unset;\n\n &::backdrop { display: none; }\n\n &__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n inline-size: var(--width);\n max-inline-size: calc(100% - (#{$spacing-xlarge} + var(--nano-scroll-lock-size)));\n max-block-size: calc(92vh - #{$spacing-xlarge});\n background-color: var(--content-background);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n opacity: 0;\n transform: scale(0.8);\n transition: #{$transition-fast} opacity, #{$transition-fast} transform;\n\n &:focus {\n outline: none;\n }\n\n .dialog--with-ribbon & {\n border-block-start: 5px solid var(--tint-color);\n }\n\n .dialog--open & {\n display: flex;\n opacity: 1;\n transform: none;\n }\n\n .dialog--nodismiss & {\n animation: cannotClose 0.25s ease-in-out 1;\n\n @keyframes cannotClose {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.08);\n }\n\n 100% {\n transform: scale(1);\n }\n }\n }\n }\n\n &__header {\n flex: 0 0 auto;\n display: flex;\n inline-size: 100%;\n background-color: var(--content-background);\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n transition: #{$transition-xfast} box-shadow;\n min-inline-size: auto;\n\n [stuck] & {\n box-shadow: #{$layer-shadow-medium};\n }\n }\n\n &__title {\n flex: 1 1 auto;\n font-size: #{$fontsize-large};\n line-height: 1.6;\n padding-block: var(--header-padding-v);\n padding-inline: var(--header-padding-h);\n }\n\n & &__close-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: #{$fontsize-xlarge};\n padding-block: 0;\n padding-inline: var(--header-padding-h);\n\n --color: var(--close-button-color);\n }\n\n &__body {\n padding-block: 0 var(--body-padding-v);\n padding-inline: var(--body-padding-h);\n\n .dialog:not(.dialog--has-header) & {\n padding-block-start: var(--body-padding-v);\n }\n\n & ::slotted() {\n max-inline-size: 100%;\n }\n\n &-wrap {\n flex: 1 1 auto;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n border-radius: var(--border-radius);\n\n .dialog:not(.dialog--has-header) & {\n border-radius: 0 0 inherit inherit;\n }\n\n .dialog:not(.dialog--has-footer) & {\n border-radius: inherit inherit 0 0;\n }\n }\n }\n\n &__footer {\n inline-size: 100%;\n padding-block: var(--footer-padding-v);\n padding-inline: var(--footer-padding-h);\n background: var(--footer-content);\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n position: sticky;\n inset-block-end: 0;\n min-inline-size: auto;\n\n ::slotted(button) {\n margin-inline-end: #{$spacing-small} !important;\n }\n\n .dialog:not(.dialog--has-footer) & {\n display: none;\n }\n }\n\n &__close-txt {\n color: var(--tint-color);\n border: none;\n text-decoration: underline;\n margin: 0;\n text-underline-offset: 4px;\n background-color: transparent;\n font: inherit;\n -webkit-box-align: center;\n cursor: pointer;\n font-size: #{$fontsize-small};\n padding: 0.5rem;\n border-radius: #{$border-radius-small};\n transition: box-shadow 100ms ease-in-out;\n\n &:focus {\n outline: none;\n box-shadow: #{$control-focus-style};\n }\n }\n\n &__overlay {\n position: fixed;\n inset: 0 !important;\n background-color: var(--scrim-color);\n opacity: 0;\n transition: #{$transition-fast} opacity;\n backdrop-filter: blur(#{$layer-overlay-blur});\n\n .dialog--open & {\n opacity: 1;\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n ComponentInterface,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\n\nlet id = 0;\n\n/*\n Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n \n @part base - The component’s base wrapper\n * @part overlay - The overlay that covers the screen behind the dialog\n * @part panel - The dialog’s panel (where the dialog and its content are rendered)\n * @part header - The dialog’s header. This element wraps the title and header actions\n * @part title - The dialog’s title\n * @part close-button - The `<nano-icon-button>` close button\n * @part close-button__base - The close button's exported `base` part\n * @part body - dilog body / content\n * @part footer - dialog footer bar\n \n @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n * @slot - The dialog's content.\n /\n@Component({\n tag: 'nano-dialog',\n styleUrl: 'dialog.scss',\n shadow: true,\n})\nexport class Dialog implements ComponentInterface {\n private componentId = `dialog-${++id}`;\n private modal: Modal;\n private willShow = false;\n private willHide = false;\n private originalTrigger: HTMLElement \| null;\n private overlay: HTMLElement;\n private dialog: HTMLElement;\n\n get panel() {\n return this._panel;\n }\n set panel(p: HTMLElement) {\n if (this._panel) {\n this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n }\n p.addEventListener('transitionend', this.handleTransitionEnd);\n this._panel = p;\n }\n private _panel: HTMLElement;\n\n @Element() host: HTMLNanoDialogElement;\n @State() noDismiss = false;\n @State() hasFooter = false;\n\n /* Show a colour ribbon at the top of the modal /\n @Prop() showRibbon = true;\n\n /* Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /* The dialog's label as displayed in the header. You should always include a relevant\n * label even when using `no-header`, as it is required for proper accessibility. /\n @Prop() label!: string;\n\n /* Set to true to disable the header. This will also remove the default close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. /\n @Prop() noHeader = false;\n\n /* Set to true to disable the footer. This will also remove the footer close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. /\n @Prop() noFooter = false;\n\n /* An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key /\n @Prop() noUserDismiss = false;\n\n /* Store search queries (against this ID) to the component store. Use in conjunction with storeMethod /\n @Prop() storeId?: string;\n\n /* The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). /\n @Prop() storeMethod: StorageMethods = 'url-hash';\n\n /* Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` /\n @Prop() hoist = false;\n\n @Watch('hoist')\n handleHoistChange() {\n // if native popover is supported then bail as this is not required\n if (\n globalThis.HTMLElement.prototype.hasOwnProperty('popover') \|\|\n !this.hoist \|\|\n Array.from(document.body.children).includes(this.host)\n )\n return;\n document.body.prepend(this.host);\n }\n\n /* Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event() nanoShow: EventEmitter;\n\n /* Emitted after the dialog opens and all transitions are complete. /\n @Event() nanoAfterShow: EventEmitter;\n\n /* Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event() nanoHide: EventEmitter;\n\n /* Emitted after the dialog closes and all transitions are complete. /\n @Event() nanoAfterHide: EventEmitter;\n\n /* Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent\n * focus and allow you to set it on a different element in the dialog, such as an input or button. /\n @Event() nanoInitialFocus: EventEmitter;\n\n /* Emitted when the user clicks the close button, clicks the overlay, or presses the `Escape` key. Calling `event.preventDefault()` will prevent the dialog from closing. /\n @Event() nanoRequestClose: EventEmitter;\n\n /* Shows the dialog /\n @Method()\n async show() {\n if (this.willShow) {\n return;\n }\n\n const nanoShow = this.nanoShow.emit();\n if (nanoShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n if (this.dialog) this.dialog.hidden = false;\n this.originalTrigger = document.activeElement as HTMLElement;\n this.willShow = true;\n\n this.open = true;\n this.modal.activate();\n\n // @ts-ignore\n if (typeof this.dialog?.showPopover === 'function') {\n // @ts-ignore\n this.dialog.showPopover();\n }\n\n lockBodyScrolling(this.host);\n\n if (this.open) {\n // Wait for the next frame before setting initial focus so the dialog is technically visible\n this.host.addEventListener(\n 'nanoAfterShow',\n () => {\n const nanoInitialFocus = this.nanoInitialFocus.emit();\n if (!nanoInitialFocus.defaultPrevented) {\n this.panel.focus({ preventScroll: true });\n }\n },\n { once: true }\n );\n }\n }\n\n /* Hides the dialog /\n @Method()\n async hide() {\n if (this.willHide) {\n return;\n }\n\n const nanoHide = this.nanoHide.emit();\n if (nanoHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n this.modal.deactivate();\n this.stopVideos();\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (trigger && typeof trigger.focus === 'function') {\n setTimeout(() => trigger.focus());\n }\n\n setTimeout(() => {\n // @ts-ignore\n if (!this.open && typeof this.dialog?.hidePopover === 'function') {\n // @ts-ignore\n this.dialog.hidePopover();\n }\n unlockBodyScrolling(this.host);\n }, 300);\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.requestClose();\n }\n };\n\n private requestClose = () => {\n const nanoOverlayDismiss = this.nanoRequestClose.emit();\n\n if (!nanoOverlayDismiss.defaultPrevented && !this.noUserDismiss) {\n this.hide();\n } else {\n this.noDismiss = true;\n setTimeout(() => (this.noDismiss = false), 250);\n }\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (\n event.propertyName === 'opacity' &&\n event\n .composedPath()\n .find((node) => node === this.panel \|\| node === this.overlay)\n ) {\n // Ensure we only emit one event when the target element is no longer visible\n this.willShow = false;\n this.willHide = false;\n this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n if (!this.open) this.dialog.hidden = true;\n }\n };\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, 'footer');\n };\n\n private stopVideos() {\n const videos: (HTMLVideoElement \| HTMLIFrameElement)[] = Array.from(\n this.host.querySelectorAll('iframe,video')\n );\n videos.forEach((video) => {\n if (video.tagName.toLowerCase() === 'video')\n (video as HTMLVideoElement).pause();\n else {\n const src = video.src;\n video.src = src;\n }\n });\n }\n\n connectedCallback() {\n this.handleHoistChange();\n this.modal = new Modal(this.host);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n // Show on init if open\n if (this.open) this.show();\n if (this.storeId)\n ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n }\n\n componentDidLoad() {\n this.dialog.hidden = !this.open;\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n if (!this.panel) return;\n this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n }\n\n render() {\n return (\n <Host>\n <div\n part=\"base\"\n class={{\n dialog: true,\n 'dialog--open': this.open,\n 'dialog--has-footer': !this.noFooter,\n 'dialog--has-header': !this.noHeader,\n 'dialog--nodismiss': this.noDismiss,\n 'dialog--with-ribbon': this.showRibbon,\n }}\n onKeyDown={this.handleKeyDown}\n ref={(ele) => (this.dialog = ele)}\n // @ts-ignore\n popover=\"manual\"\n >\n <div\n part=\"overlay\"\n class=\"dialog__overlay\"\n ref={(el) => (this.overlay = el)}\n onClick={this.requestClose}\n />\n\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"dialog__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : null}\n aria-labelledby={\n !this.noHeader ? `${this.componentId}-title` : null\n }\n tabIndex={-1}\n >\n <div class=\"dialog__body-wrap\">\n {!this.noHeader && (\n <nano-sticker>\n <header part=\"header\" class=\"dialog__header\">\n <span\n part=\"title\"\n class=\"dialog__title\"\n id={`${this.componentId}-title`}\n >\n <slot name=\"label\">\n {/ If there's no label, use an invisible character to prevent the heading from collapsing */}\n {this.label \|\| String.fromCharCode(65279)}\n </slot>\n </span>\n {!this.noUserDismiss && (\n <nano-icon-button\n part=\"close-button\"\n exportparts=\"base:close-button__base\"\n class=\"dialog__close-icon\"\n label=\"close dialog\"\n onClick={this.requestClose}\n iconName=\"light/times\"\n />\n )}\n </header>\n </nano-sticker>\n )}\n <div part=\"body\" class=\"dialog__body\">\n <slot />\n </div>\n {!this.noFooter && (this.hasFooter \|\| !this.noUserDismiss) && (\n <footer part=\"footer\" class=\"dialog__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n {!this.noUserDismiss && (\n <button\n class=\"dialog__close-txt\"\n onClick={this.requestClose}\n >\n Close\n </button>\n )}\n </footer>\n )}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/nano-components/nano-drawer.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as e,c as a,h as t,g as r}from"./index-9695db0a.js";import{M as i}from"./modal-88c117cd.js";import{l as s,u as n}from"./scroll-ac332213.js";import{h as o}from"./slot-8126e238.js";import{w as d}from"./events-6a805b42.js";import{C as l}from"./component-store-486d9d7a.js";import"./tabbable-26a66a22.js";import"./dom-8599fac1.js";import"./throttle-ac4fcefa.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--size:25rem;--panel-background:white;--panel-shadow:var(--nano-layer-shadow-xlarge, 0 4px 16px rgba(0, 0, 0, 0.4));--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--header-button-color:#b5aea7;--footer-background:#e4e6e8;--header-background:var(--panel-background);--header-spacing:var(--nano-spacing-large, 20px);--body-spacing:var(--nano-spacing-large, 20px);--footer-spacing:var(--nano-spacing-medium, 16px) var(--nano-spacing-large, 20px);--dir:1}:host(:dir(rtl)){--dir:-1}:host-context([dir=rtl]){--dir:-1}.drawer{inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;pointer-events:none;overflow:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--nano-layer-index-modal, 700)}.drawer__panel{position:absolute;z-index:2;max-inline-size:100%;max-block-size:100%;background-color:var(--panel-background);box-shadow:var(--panel-shadow);pointer-events:all;transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform;display:flex;flex-direction:column}@media (forced-colors: active){.drawer__panel{border:solid 1px #4a4a4a}}.drawer__panel:focus{outline:none}.drawer--nodismiss .drawer__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.drawer--top .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(-100%)}.drawer--bottom .drawer__panel{inset-block:auto 0;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(100%)}.drawer--top.drawer--open .drawer__panel,.drawer--bottom.drawer--open .drawer__panel{opacity:1;transform:translateY(0)}.drawer--start .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * -100%))}.drawer--end .drawer__panel{inset-block:0 auto;inset-inline:auto 0;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * 100%))}.drawer--start.drawer--open .drawer__panel,.drawer--end.drawer--open .drawer__panel{opacity:1;transform:translateX(0)}.drawer__header{inline-size:100%;display:flex;background-color:var(--header-background)}[stuck] .drawer__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.drawer__title{flex:1 1 auto;font:inherit;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.2;padding:var(--header-spacing);margin:0}.drawer__header-actions{flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--nano-spacing-xsmall, 4px);padding:0 var(--header-spacing)}.drawer__header-actions .drawer__close,.drawer__header-actions ::slotted(nano-icon-button){flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);--color:var(--header-button-color)}.drawer__main{display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}.drawer__body{display:block;flex:1 1 auto;padding:var(--body-spacing);padding-block:0 var(--body-spacing);padding-inline:var(--body-spacing)}.drawer:not(.drawer--has-header) .drawer__body{padding-block-start:var(--body-spacing)}.drawer__footer{inline-size:100%;text-align:end;padding:var(--footer-spacing);background:var(--footer-background);inset-block-start:1px;position:relative}.drawer__footer ::slotted(button:not(:last-of-type)){margin-inline-end:var(--nano-spacing-xsmall, 4px)}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;inset:0;background-color:var(--scrim-color);pointer-events:all;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity}.drawer--open .drawer__overlay{opacity:1}.drawer--contained .drawer__overlay{display:none}";const c=class{constructor(t){e(this,t);this.nanoShow=a(this,"nanoShow",7);this.nanoHide=a(this,"nanoHide",7);this.nanoAfterHide=a(this,"nanoAfterHide",7);this.nanoAfterShow=a(this,"nanoAfterShow",7);this.nanoInitialFocus=a(this,"nanoInitialFocus",7);this.nanoRquestClose=a(this,"nanoRquestClose",7);this.handleDocumentKeyDown=e=>{if(this.contained){return}if(e.key==="Escape"&&this.modal.isActive()&&this.open){e.stopImmediatePropagation();this.requestClose("keyboard")}};this.handleTransitionEnd=e=>{if(e.propertyName==="opacity"&&e.composedPath().find((e=>e===this.panel||e===this.overlay))){if(!this.open){this.drawer.hidden=true;this.overlay.hidden=false;this.panel.hidden=false}this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit()}};this.handleSlotChange=()=>{this.hasFooter=o(this.host,"footer")};this.noDismiss=false;this.hasFooter=undefined;this.open=false;this.label=undefined;this.placement="end";this.contained=false;this.noHeader=false;this.storeId=undefined;this.storeMethod="url-hash";this.noUserDismiss=false;this.hoist=false}get panel(){return this._panel}set panel(e){if(this._panel){this.panel.removeEventListener("animationend",this.handleTransitionEnd)}if(!e)return;e.addEventListener("transitionend",this.handleTransitionEnd);this._panel=e}handleHoistChange(){if(!this.hoist||Array.from(document.body.children).includes(this.host))return;document.body.prepend(this.host)}async show(){if(this.open)return undefined;this.open=true;return d(this.host,"nanoAfterShow")}async hide(){if(!this.open)return undefined;this.open=false;return d(this.host,"nanoAfterHide")}requestClose(e){const a=this.nanoRquestClose.emit({source:e});if(a.defaultPrevented||this.noUserDismiss){this.noDismiss=true;setTimeout((()=>this.noDismiss=false),250);return}this.hide()}handleNoModalChange(){if(this.open&&!this.contained){this.modal.activate();s(this.host)}if(this.open&&this.contained){this.modal.deactivate();n(this.host)}}async handleOpenChange(){if(this.open){this.nanoShow.emit();this.addOpenListeners();this.originalTrigger=document.activeElement;if(!this.contained){this.modal.activate();s(this.host)}const e=this.host.querySelector("[autofocus]");if(e){e.removeAttribute("autofocus")}this.drawer.hidden=false;requestAnimationFrame((()=>{const a=this.nanoInitialFocus.emit();if(!a.defaultPrevented){if(e){e.focus({preventScroll:true})}else{this.panel.focus({preventScroll:true})}}if(e){e.setAttribute("autofocus","")}}));this.nanoAfterShow.emit();return}this.nanoHide.emit();this.removeOpenListeners();if(!this.contained){this.modal.deactivate();n(this.host)}const e=this.originalTrigger;if(typeof e?.focus==="function"){setTimeout((()=>e.focus()))}}addOpenListeners(){document.addEventListener("keydown",this.handleDocumentKeyDown)}removeOpenListeners(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}connectedCallback(){this.handleHoistChange();this.modal=new i(this.host)}disconnectedCallback(){n(this.host)}componentWillLoad(){this.handleSlotChange();if(this.open)this.show();if(this.storeId)l.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){this.drawer.hidden=!this.open;if(this.open){this.addOpenListeners();if(!this.contained){this.modal.activate();s(this.host)}}}render(){return t("div",{ref:e=>this.drawer=e,part:"base",class:{drawer:true,"drawer--open":this.open,[`drawer--${this.placement}`]:true,"drawer--contained":this.contained,"drawer--fixed":!this.contained,"drawer--has-footer":o(this.host,"footer"),"drawer--has-header":!this.noHeader,"drawer--nodismiss":this.noDismiss}},t("div",{ref:e=>this.overlay=e,part:"overlay",class:"drawer__overlay",onClick:()=>this.requestClose("overlay"),tabindex:"-1"}),t("div",{ref:e=>this.panel=e,part:"panel",class:"drawer__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:undefined,"aria-labelledby":!this.noHeader?"title":undefined,tabindex:"0"},t("div",{class:"drawer__main"},!this.noHeader&&t("nano-sticker",null,t("div",{part:"header",class:"drawer__header"},t("h2",{part:"title",class:"drawer__title",id:"title"},t("slot",{name:"label"},this.label.length>0?this.label:String.fromCharCode(65279))),t("div",{part:"header-actions",class:"drawer__header-actions"},t("slot",{name:"header-actions"}),!this.noUserDismiss&&t("nano-icon-button",{part:"close-button",exportparts:"base:close-button__base",class:"drawer__close",iconName:"light/times",label:"Close",onClick:()=>this.requestClose("close-button")})))),t("div",{part:"body",class:"drawer__body"},t("slot",null)),t("nano-sticker",{position:"bottom"},t("footer",{part:"footer",class:"drawer__footer"},t("slot",{name:"footer",onSlotchange:this.handleSlotChange}))))))}get host(){return r(this)}static get watchers(){return{hoist:["handleHoistChange"],contained:["handleNoModalChange"],open:["handleOpenChange"]}}};c.style=h;export{c as nano_drawer};
+import{r as e,c as a,h as t,g as r}from"./index-9695db0a.js";import{M as i}from"./modal-88c117cd.js";import{l as s,u as n}from"./scroll-762b3e1a.js";import{h as o}from"./slot-8126e238.js";import{w as d}from"./events-6a805b42.js";import{C as l}from"./component-store-486d9d7a.js";import"./tabbable-26a66a22.js";import"./dom-8599fac1.js";import"./throttle-ac4fcefa.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--size:25rem;--panel-background:white;--panel-shadow:var(--nano-layer-shadow-xlarge, 0 4px 16px rgba(0, 0, 0, 0.4));--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--header-button-color:#b5aea7;--footer-background:#e4e6e8;--header-background:var(--panel-background);--header-spacing:var(--nano-spacing-large, 20px);--body-spacing:var(--nano-spacing-large, 20px);--footer-spacing:var(--nano-spacing-medium, 16px) var(--nano-spacing-large, 20px);--dir:1}:host(:dir(rtl)){--dir:-1}:host-context([dir=rtl]){--dir:-1}.drawer{inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;pointer-events:none;overflow:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--nano-layer-index-modal, 700)}.drawer__panel{position:absolute;z-index:2;max-inline-size:100%;max-block-size:100%;background-color:var(--panel-background);box-shadow:var(--panel-shadow);pointer-events:all;transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform;display:flex;flex-direction:column}@media (forced-colors: active){.drawer__panel{border:solid 1px #4a4a4a}}.drawer__panel:focus{outline:none}.drawer--nodismiss .drawer__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.drawer--top .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(-100%)}.drawer--bottom .drawer__panel{inset-block:auto 0;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(100%)}.drawer--top.drawer--open .drawer__panel,.drawer--bottom.drawer--open .drawer__panel{opacity:1;transform:translateY(0)}.drawer--start .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * -100%))}.drawer--end .drawer__panel{inset-block:0 auto;inset-inline:auto 0;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * 100%))}.drawer--start.drawer--open .drawer__panel,.drawer--end.drawer--open .drawer__panel{opacity:1;transform:translateX(0)}.drawer__header{inline-size:100%;display:flex;background-color:var(--header-background)}[stuck] .drawer__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.drawer__title{flex:1 1 auto;font:inherit;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.2;padding:var(--header-spacing);margin:0}.drawer__header-actions{flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--nano-spacing-xsmall, 4px);padding:0 var(--header-spacing)}.drawer__header-actions .drawer__close,.drawer__header-actions ::slotted(nano-icon-button){flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);--color:var(--header-button-color)}.drawer__main{display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}.drawer__body{display:block;flex:1 1 auto;padding:var(--body-spacing);padding-block:0 var(--body-spacing);padding-inline:var(--body-spacing)}.drawer:not(.drawer--has-header) .drawer__body{padding-block-start:var(--body-spacing)}.drawer__footer{inline-size:100%;text-align:end;padding:var(--footer-spacing);background:var(--footer-background);inset-block-start:1px;position:relative}.drawer__footer ::slotted(button:not(:last-of-type)){margin-inline-end:var(--nano-spacing-xsmall, 4px)}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;inset:0;background-color:var(--scrim-color);pointer-events:all;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity}.drawer--open .drawer__overlay{opacity:1}.drawer--contained .drawer__overlay{display:none}";const c=class{constructor(t){e(this,t);this.nanoShow=a(this,"nanoShow",7);this.nanoHide=a(this,"nanoHide",7);this.nanoAfterHide=a(this,"nanoAfterHide",7);this.nanoAfterShow=a(this,"nanoAfterShow",7);this.nanoInitialFocus=a(this,"nanoInitialFocus",7);this.nanoRquestClose=a(this,"nanoRquestClose",7);this.handleDocumentKeyDown=e=>{if(this.contained){return}if(e.key==="Escape"&&this.modal.isActive()&&this.open){e.stopImmediatePropagation();this.requestClose("keyboard")}};this.handleTransitionEnd=e=>{if(e.propertyName==="opacity"&&e.composedPath().find((e=>e===this.panel||e===this.overlay))){if(!this.open){this.drawer.hidden=true;this.overlay.hidden=false;this.panel.hidden=false}this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit()}};this.handleSlotChange=()=>{this.hasFooter=o(this.host,"footer")};this.noDismiss=false;this.hasFooter=undefined;this.open=false;this.label=undefined;this.placement="end";this.contained=false;this.noHeader=false;this.storeId=undefined;this.storeMethod="url-hash";this.noUserDismiss=false;this.hoist=false}get panel(){return this._panel}set panel(e){if(this._panel){this.panel.removeEventListener("animationend",this.handleTransitionEnd)}if(!e)return;e.addEventListener("transitionend",this.handleTransitionEnd);this._panel=e}handleHoistChange(){if(!this.hoist||Array.from(document.body.children).includes(this.host))return;document.body.prepend(this.host)}async show(){if(this.open)return undefined;this.open=true;return d(this.host,"nanoAfterShow")}async hide(){if(!this.open)return undefined;this.open=false;return d(this.host,"nanoAfterHide")}requestClose(e){const a=this.nanoRquestClose.emit({source:e});if(a.defaultPrevented||this.noUserDismiss){this.noDismiss=true;setTimeout((()=>this.noDismiss=false),250);return}this.hide()}handleNoModalChange(){if(this.open&&!this.contained){this.modal.activate();s(this.host)}if(this.open&&this.contained){this.modal.deactivate();n(this.host)}}async handleOpenChange(){if(this.open){this.nanoShow.emit();this.addOpenListeners();this.originalTrigger=document.activeElement;if(!this.contained){this.modal.activate();s(this.host)}const e=this.host.querySelector("[autofocus]");if(e){e.removeAttribute("autofocus")}this.drawer.hidden=false;requestAnimationFrame((()=>{const a=this.nanoInitialFocus.emit();if(!a.defaultPrevented){if(e){e.focus({preventScroll:true})}else{this.panel.focus({preventScroll:true})}}if(e){e.setAttribute("autofocus","")}}));this.nanoAfterShow.emit();return}this.nanoHide.emit();this.removeOpenListeners();if(!this.contained){this.modal.deactivate();n(this.host)}const e=this.originalTrigger;if(typeof e?.focus==="function"){setTimeout((()=>e.focus()))}}addOpenListeners(){document.addEventListener("keydown",this.handleDocumentKeyDown)}removeOpenListeners(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}connectedCallback(){this.handleHoistChange();this.modal=new i(this.host)}disconnectedCallback(){n(this.host)}componentWillLoad(){this.handleSlotChange();if(this.open)this.show();if(this.storeId)l.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){this.drawer.hidden=!this.open;if(this.open){this.addOpenListeners();if(!this.contained){this.modal.activate();s(this.host)}}}render(){return t("div",{ref:e=>this.drawer=e,part:"base",class:{drawer:true,"drawer--open":this.open,[`drawer--${this.placement}`]:true,"drawer--contained":this.contained,"drawer--fixed":!this.contained,"drawer--has-footer":o(this.host,"footer"),"drawer--has-header":!this.noHeader,"drawer--nodismiss":this.noDismiss}},t("div",{ref:e=>this.overlay=e,part:"overlay",class:"drawer__overlay",onClick:()=>this.requestClose("overlay"),tabindex:"-1"}),t("div",{ref:e=>this.panel=e,part:"panel",class:"drawer__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:undefined,"aria-labelledby":!this.noHeader?"title":undefined,tabindex:"0"},t("div",{class:"drawer__main"},!this.noHeader&&t("nano-sticker",null,t("div",{part:"header",class:"drawer__header"},t("h2",{part:"title",class:"drawer__title",id:"title"},t("slot",{name:"label"},this.label.length>0?this.label:String.fromCharCode(65279))),t("div",{part:"header-actions",class:"drawer__header-actions"},t("slot",{name:"header-actions"}),!this.noUserDismiss&&t("nano-icon-button",{part:"close-button",exportparts:"base:close-button__base",class:"drawer__close",iconName:"light/times",label:"Close",onClick:()=>this.requestClose("close-button")})))),t("div",{part:"body",class:"drawer__body"},t("slot",null)),t("nano-sticker",{position:"bottom"},t("footer",{part:"footer",class:"drawer__footer"},t("slot",{name:"footer",onSlotchange:this.handleSlotChange}))))))}get host(){return r(this)}static get watchers(){return{hoist:["handleHoistChange"],contained:["handleNoModalChange"],open:["handleOpenChange"]}}};c.style=h;export{c as nano_drawer};
 //# sourceMappingURL=nano-drawer.entry.js.map

package/dist/nano-components/nano-tab-group.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as a,h as n,a as i,g as o}from"./index-9695db0a.js";import{g as s,a as r}from"./dom-8599fac1.js";import{s as e}from"./scroll-ac332213.js";import{C as h}from"./component-store-486d9d7a.js";import{c as l}from"./theme-931bd452.js";import{d as c}from"./transitions-bd15e312.js";import"./throttle-ac4fcefa.js";const d=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:0;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255 255 255);--scroll-btn-color:"currentColor";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-container-bg:"transparent";--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius) var(--border-radius) 0 0;--tab-text-color:#007495;--shadow-opacity:0.1;--fade-transparency:0;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (max-width: 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(nano-tab){--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius);--grab-offset-x:var(--tabs-padding-start)}:host([placement=start]){--content-border-radius:0 var(--border-radius) var(--border-radius) 0;--content-padding:1rem;--tab-border-radius:0;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgb(var(--nano-color-base-rgb) / 70%)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:flex;border-radius:0;inline-size:100%;flex:inherit}.nano-tab-group__tabs{display:flex;position:relative;inline-size:100%}.nano-tab-group__active-tab-indicator{position:absolute;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{-webkit-appearance:none;appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;inset-block:0;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}.nano-tab-group__scroll-button:focus{outline:none}.nano-tab-group__scroll-button.is-shown{opacity:1}.nano-tab-group__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tab-group__scroll-button--left{inset-inline-start:0}.nano-tab-group__scroll-button--right{inset-inline-end:0}.nano-tab-group__scroll-button nano-icon{font-size:16px}.nano-tab-group--top{flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:"";inline-size:86%;box-shadow:0 10px 40px 10px rgb(0 0 0/var(--shadow-opacity));block-size:10px;position:absolute;inset-inline-start:7%;inset-block-end:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-inline:var(--tabs-padding-start) var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);display:flex;overflow:auto hidden;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 4);mask-size:calc(100% + var(--tabs-padding-end) * 4);-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar{inline-size:0;block-size:0}.nano-tab-group--top .nano-tab-group__nav::after{content:" ";padding-inline:0 var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);line-height:1;flex:0 0 auto}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 2);mask-size:calc(100% + var(--tabs-padding-end) * 2)}.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.nano-tab-group--top .nano-tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row;text-align:center;color:var(--tab-text-color);inline-size:auto}.nano-tab-group--top .nano-tab-group__active-tab-indicator{inset-block-end:-2px;border-block-end:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--top .nano-tab-group__body{order:2;background:var(--content-bg);position:relative;overflow:hidden;inline-size:auto;display:flex;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);flex:1 1 auto}.nano-tab-group--start{flex-direction:row}.nano-tab-group--start .nano-tab-group__tabs{flex:0 0 auto;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb));border-inline-start:solid var(--indicator-size) var(--indicator-track-color);text-align:start}.nano-tab-group--start .nano-tab-group__active-tab-indicator{inset-inline-start:-2px;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{flex:1 1 auto;order:2;padding:var(--content-padding);overflow:hidden;border-radius:var(--content-border-radius)}';let b=0;const p=class{constructor(n){t(this,n);this.nanoTabShow=a(this,"nanoTabShow",7);this.nanoTabHide=a(this,"nanoTabHide",7);this.nanoTabWillClose=a(this,"nanoTabWillClose",7);this.nanoTabClose=a(this,"nanoTabClose",7);this.baseId=`nano-tab-group-${++b}`;this.initialTouchX=null;this.initialTouchY=null;this.mutationObservers=new WeakMap;this.updateScrollControls=()=>{if(this.noScrollControls){this.hasScrollControls=false}else{this.hasScrollControls=["top"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth&&this.nav.scrollWidth>this.tabs.clientWidth}};this.handleClick=t=>{const a=t.target;const n=a.closest("nano-tab");if(n)this.setActiveTab(n)};this.handleKeyDown=t=>{const a=document.activeElement;if(!a||a.tagName.toLowerCase()!=="nano-tab")return;if(["Enter"," "].includes(t.key)){const a=t.target;const n=a.closest("nano-tab");if(n){this.setActiveTab(n);t.preventDefault();t.stopPropagation()}}if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key))return;const n=this.getAllActiveTabs;let i=n.indexOf(a);if(t.key==="Home")i=0;if(t.key==="End")i=n.length-1;if(this.placement==="top"){if(this.isRtl&&t.key==="ArrowRight"||!this.isRtl&&t.key==="ArrowLeft"){i=Math.max(0,i-1)}if(this.isRtl&&t.key==="ArrowLeft"||!this.isRtl&&t.key==="ArrowRight"){i=Math.min(n.length-1,i+1)}}if(this.placement==="start"){if(t.key==="ArrowUp")i=Math.max(0,i-1);if(t.key==="ArrowDown")i=Math.min(n.length-1,i+1)}n[i].setFocus();if(this.placement==="top"){e(n[i],this.nav,"horizontal","center")}t.stopPropagation();t.preventDefault()};this.handleTabScroll=()=>{if(!this.hasScrollControls){this.hideControlLeft=this.hideControlRight=true;return}const t=this.isRtl?this.nav.scrollLeft===0:this.nav.scrollWidth-this.nav.scrollLeft===this.nav.clientWidth;const a=this.isRtl?this.nav.scrollWidth+this.nav.scrollLeft===this.nav.clientWidth:this.nav.scrollLeft===0;if(a){this.hideControlLeft=true;this.hideControlRight=false}else if(t){this.hideControlLeft=false;this.hideControlRight=true}else{this.hideControlRight=false;this.hideControlLeft=false}};this.handleBtnClick=(t=false)=>{const a=this.getNavWidth();let n;if(t)n=this.nav.scrollLeft+a-20;else n=this.nav.scrollLeft-a+20;try{this.nav.scroll({left:n,behavior:"smooth"})}catch(t){this.nav.scrollLeft=n}};this.handleTouchStart=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];this.initialTouchX=a.pageX;this.initialTouchY=a.pageY};this.handleTouchEnd=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];const n=a.pageX-this.initialTouchX;const i=a.pageY-this.initialTouchY;const o=70;const s=this.initialTouchX-a.clientX;const r=this.initialTouchY-a.clientY;const e=Math.abs(n)>=o&&Math.abs(i)<=o;const h=this.getAllActiveTabs;const l=h.findIndex((t=>t.active));if(e){const t=n<0&&this.placement==="top"||n>0&&this.placement!=="top"?1:-1;if(h[l+t]){this.setActiveTab(h[l+t]);if(Math.abs(s)>Math.abs(r)){if(s>0)this.activePanel.setAttribute("animation-dir","left");else this.activePanel.setAttribute("animation-dir","right")}}}this.initialTouchX=null;this.initialTouchY=null};this.handleContentSlotChange=()=>{setTimeout((()=>{this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false)}))};this.handleTabSlotChange=t=>{setTimeout((()=>{this.setAriaLabels();this.handleTabScroll();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);this.updateScrollControls()}),500);const a=t.target.assignedElements({flatten:true});a.forEach((t=>{if(!this.mutationObservers.get(t)){const a=new MutationObserver((()=>{setTimeout((()=>{this.syncActiveTabIndicator();this.handleTabScroll();this.updateScrollControls()}),500)}));this.mutationObservers.set(t,a);a.observe(t,{characterData:true,childList:true,subtree:true})}}))};this.hasScrollControls=false;this.hideControlRight=true;this.hideControlLeft=true;this.tab=undefined;this.placement="top";this.noScrollControls=false;this.color=undefined;this.storeId=undefined;this.storeMethod="session";this.disableSwipe=undefined}handleTabNameChange(){if(this.activeTab&&this.activeTab.panel===this.tab)return;const t=this.getAllActiveTabs.find((t=>t.panel===this.tab));this.setActiveTab(t)}handlePlacementChange(){this.syncActiveTabIndicator()}handleNoScrollControlsChange(){this.updateScrollControls()}hideRightBtn(){if(!this.rightBtn)return;c(this.rightBtn,{className:"is-shown",show:!this.hideControlRight})}hideLeftBtn(){if(!this.leftBtn)return;c(this.leftBtn,{className:"is-shown",show:!this.hideControlLeft})}watchScrollControls(){if(this.hasScrollControls)setTimeout((t=>this.handleTabScroll()),20);else setTimeout((t=>{this.hideControlLeft=this.hideControlRight=true}),20)}async show(t){if(this.activeTab&&this.activeTab.panel===t)return;const a=this.getAllActiveTabs.find((a=>a.panel===t));if(a)this.setActiveTab(a)}get getAllActiveTabs(){return this.getAllTabs.filter((t=>!t.disabled))}get getAllTabs(){return s(this.host,"nano-tab")}get getAllPanels(){return s(this.host,"nano-tab-content")}get getActiveTab(){return this.getAllActiveTabs.find((t=>t.active))}setActiveTab(t,a=true){if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){const n=this.activeTab;this.activeTab=t;this.tab=t.panel;this.getAllActiveTabs.map((t=>t.active=t===this.activeTab));this.getAllPanels.map((t=>{if(t.name===this.activeTab.panel){t.active=true;this.activePanel=t}else t.active=false;t.removeAttribute("animation-dir")}));this.syncActiveTabIndicator();if(this.nav&&["top"].includes(this.placement)){e(this.activeTab,this.nav,"horizontal","center")}if(a){if(n){this.nanoTabHide.emit({name:n.panel})}this.nanoTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllActiveTabs;const a=this.getAllPanels;t.map(((t,n)=>{const i=a.find((a=>a.name===t.panel));if(i){if(!i.id)i.id=`${this.baseId}-panel-${n}`;if(!t.id)t.id=`${this.baseId}-tab-${n}`;t.setAttribute("aria-controls",i.id);i.setAttribute("aria-labelledby",t.id)}}))}syncActiveTabIndicator(){this.getAllTabs.forEach((t=>t.setAttribute("direction",this.placement==="top"?"horizontal":"vertical")));const t=this.getActiveTab;if(!t)return;const a=t.shadowRoot.querySelector(".nanotab")?.clientWidth||0;const n=t.clientHeight;const i=r(t,this.tabs);if(!this.activeTabIndicator)return;const o=i.top+this.nav.scrollTop;const s=i.left;switch(this.placement){case"top":this.activeTabIndicator.style.width=`${a}px`;this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform=`translateX(${s}px)`;break;case"start":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=`${n}px`;this.activeTabIndicator.style.transform=`translateY(${o}px)`;break}}getNavWidth(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let a=this.nav.clientWidth;return a-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)}handleTabClose(t){let a=this.getAllActiveTabs.indexOf(t.target);const n=t.target;if(a<0)return;const i=this.getAllPanels.find((t=>t.name===n.panel));if(!i)return;t.stopImmediatePropagation();const o=this.nanoTabWillClose.emit({name:n.panel});if(o.defaultPrevented)return;if(n.active){a=a===0?1:a-1;const t=this.getAllActiveTabs[a]?.panel;if(t)this.host.show(t)}n.remove();i.remove();this.nanoTabClose.emit({name:n.panel})}componentDidLoad(){const t=new IntersectionObserver(((t,a)=>{if(t[0].intersectionRatio>0){this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);if(this.storeId)h.init(this,["tab"],this.storeMethod,this.storeId);a.unobserve(t[0].target)}}));t.observe(this.host);requestAnimationFrame((()=>this.updateScrollControls()));if(!window["ResizeObserver"])return;this.resizeObserver=new ResizeObserver((()=>{setTimeout((()=>{this.updateScrollControls();this.syncActiveTabIndicator();e(this.activeTab,this.nav,"horizontal","center")}),500)}));this.resizeObserver.observe(this.nav)}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"}disconnectedCallback(){if(this.resizeObserver)this.resizeObserver.unobserve(this.nav)}render(){this.isRtl=this.host.ownerDocument.dir==="rtl";return n(i,{class:{...l(this.color)},dir:this.isRtl?"rtl":null},n("div",{part:"base",class:{"nano-tab-group":true,"nano-tab-group--top":this.placement==="top","nano-tab-group--start":this.placement==="start","nano-tab-group--has-scroll-controls":this.hasScrollControls,"nano-tab-group--has-scroll-controls-left":!this.hideControlLeft,"nano-tab-group--has-scroll-controls-right":!this.hideControlRight},onClick:this.handleClick,onKeyDown:this.handleKeyDown},n("div",{class:"nano-tab-group__nav-container",part:"nav"},this.placement==="top"&&n("button",{disabled:!this.hasScrollControls,class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--left":true},ref:t=>this.leftBtn=t,onClick:()=>this.handleBtnClick(false)},n("nano-icon",{name:"light/chevron-left"})),n("div",{ref:t=>this.nav=t,class:"nano-tab-group__nav",onScroll:this.handleTabScroll},n("div",{ref:t=>this.tabs=t,part:"tabs",class:"nano-tab-group__tabs",role:"tablist","aria-orientation":this.placement==="start"?"vertical":"horizontal"},n("div",{ref:t=>this.activeTabIndicator=t,part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),n("slot",{name:"tabs",onSlotchange:this.handleTabSlotChange}))),this.placement==="top"&&n("button",{disabled:!this.hasScrollControls,class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--right":true},ref:t=>this.rightBtn=t,onClick:()=>this.handleBtnClick(true)},n("nano-icon",{name:"light/chevron-right"}))),n("slot",{name:"tab-content-header"}),n("div",{part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},n("slot",{onSlotchange:this.handleContentSlotChange}))))}get host(){return o(this)}static get watchers(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}}};p.style=d;export{p as nano_tab_group};
+import{r as t,c as a,h as n,a as i,g as o}from"./index-9695db0a.js";import{g as s,a as r}from"./dom-8599fac1.js";import{s as e}from"./scroll-762b3e1a.js";import{C as l}from"./component-store-486d9d7a.js";import{c as h}from"./theme-931bd452.js";import{d as c}from"./transitions-bd15e312.js";import"./throttle-ac4fcefa.js";const d=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:0;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255 255 255);--scroll-btn-color:"currentColor";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-container-bg:"transparent";--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius) var(--border-radius) 0 0;--tab-text-color:#007495;--shadow-opacity:0.1;--fade-transparency:0;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (max-width: 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(nano-tab){--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius);--grab-offset-x:var(--tabs-padding-start)}:host([placement=start]){--content-border-radius:0 var(--border-radius) var(--border-radius) 0;--content-padding:1rem;--tab-border-radius:0;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgb(var(--nano-color-base-rgb) / 70%)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:flex;border-radius:0;inline-size:100%;flex:inherit}.nano-tab-group__tabs{display:flex;position:relative;inline-size:100%}.nano-tab-group__active-tab-indicator{position:absolute;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{-webkit-appearance:none;appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;inset-block:0;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}.nano-tab-group__scroll-button:focus{outline:none}.nano-tab-group__scroll-button.is-shown{opacity:1}.nano-tab-group__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tab-group__scroll-button--left{inset-inline-start:0}.nano-tab-group__scroll-button--right{inset-inline-end:0}.nano-tab-group__scroll-button nano-icon{font-size:16px}.nano-tab-group--top{flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:"";inline-size:86%;box-shadow:0 10px 40px 10px rgb(0 0 0/var(--shadow-opacity));block-size:10px;position:absolute;inset-inline-start:7%;inset-block-end:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-inline:var(--tabs-padding-start) var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);display:flex;overflow:auto hidden;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 4);mask-size:calc(100% + var(--tabs-padding-end) * 4);-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar{inline-size:0;block-size:0}.nano-tab-group--top .nano-tab-group__nav::after{content:" ";padding-inline:0 var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);line-height:1;flex:0 0 auto}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 2);mask-size:calc(100% + var(--tabs-padding-end) * 2)}.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.nano-tab-group--top .nano-tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row;text-align:center;color:var(--tab-text-color);inline-size:auto}.nano-tab-group--top .nano-tab-group__active-tab-indicator{inset-block-end:-2px;border-block-end:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--top .nano-tab-group__body{order:2;background:var(--content-bg);position:relative;overflow:hidden;inline-size:auto;display:flex;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);flex:1 1 auto}.nano-tab-group--start{flex-direction:row}.nano-tab-group--start .nano-tab-group__tabs{flex:0 0 auto;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb));border-inline-start:solid var(--indicator-size) var(--indicator-track-color);text-align:start}.nano-tab-group--start .nano-tab-group__active-tab-indicator{inset-inline-start:-2px;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{flex:1 1 auto;order:2;padding:var(--content-padding);overflow:hidden;border-radius:var(--content-border-radius)}';let b=0;const p=class{constructor(n){t(this,n);this.nanoTabShow=a(this,"nanoTabShow",7);this.nanoTabHide=a(this,"nanoTabHide",7);this.nanoTabWillClose=a(this,"nanoTabWillClose",7);this.nanoTabClose=a(this,"nanoTabClose",7);this.baseId=`nano-tab-group-${++b}`;this.initialTouchX=null;this.initialTouchY=null;this.mutationObservers=new WeakMap;this.updateScrollControls=()=>{if(this.noScrollControls){this.hasScrollControls=false}else{this.hasScrollControls=["top"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth&&this.nav.scrollWidth>this.tabs.clientWidth}};this.handleClick=t=>{const a=t.target;const n=a.closest("nano-tab");if(n)this.setActiveTab(n)};this.handleKeyDown=t=>{const a=document.activeElement;if(!a||a.tagName.toLowerCase()!=="nano-tab")return;if(["Enter"," "].includes(t.key)){const a=t.target;const n=a.closest("nano-tab");if(n){this.setActiveTab(n);t.preventDefault();t.stopPropagation()}}if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key))return;const n=this.getAllActiveTabs;let i=n.indexOf(a);if(t.key==="Home")i=0;if(t.key==="End")i=n.length-1;if(this.placement==="top"){if(this.isRtl&&t.key==="ArrowRight"||!this.isRtl&&t.key==="ArrowLeft"){i=Math.max(0,i-1)}if(this.isRtl&&t.key==="ArrowLeft"||!this.isRtl&&t.key==="ArrowRight"){i=Math.min(n.length-1,i+1)}}if(this.placement==="start"){if(t.key==="ArrowUp")i=Math.max(0,i-1);if(t.key==="ArrowDown")i=Math.min(n.length-1,i+1)}n[i].setFocus();if(this.placement==="top"){e(n[i],this.nav,"horizontal","center")}t.stopPropagation();t.preventDefault()};this.handleTabScroll=()=>{if(!this.hasScrollControls){this.hideControlLeft=this.hideControlRight=true;return}const t=this.isRtl?this.nav.scrollLeft===0:this.nav.scrollWidth-this.nav.scrollLeft===this.nav.clientWidth;const a=this.isRtl?this.nav.scrollWidth+this.nav.scrollLeft===this.nav.clientWidth:this.nav.scrollLeft===0;if(a){this.hideControlLeft=true;this.hideControlRight=false}else if(t){this.hideControlLeft=false;this.hideControlRight=true}else{this.hideControlRight=false;this.hideControlLeft=false}};this.handleBtnClick=(t=false)=>{const a=this.getNavWidth();let n;if(t)n=this.nav.scrollLeft+a-20;else n=this.nav.scrollLeft-a+20;try{this.nav.scroll({left:n,behavior:"smooth"})}catch(t){this.nav.scrollLeft=n}};this.handleTouchStart=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];this.initialTouchX=a.pageX;this.initialTouchY=a.pageY};this.handleTouchEnd=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];const n=a.pageX-this.initialTouchX;const i=70;const o=this.initialTouchX-a.clientX;const s=this.initialTouchY-a.clientY;const r=Math.abs(n)>=i&&Math.abs(s)<=50;const e=this.getAllActiveTabs;const l=e.findIndex((t=>t.active));if(r){const t=n<0&&this.placement==="top"||n>0&&this.placement!=="top"?1:-1;if(e[l+t]){this.setActiveTab(e[l+t]);if(Math.abs(o)>Math.abs(s)){if(o>0)this.activePanel.setAttribute("animation-dir","left");else this.activePanel.setAttribute("animation-dir","right")}}}this.initialTouchX=null;this.initialTouchY=null};this.handleContentSlotChange=()=>{setTimeout((()=>{this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false)}))};this.handleTabSlotChange=t=>{setTimeout((()=>{this.setAriaLabels();this.handleTabScroll();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);this.updateScrollControls()}),500);const a=t.target.assignedElements({flatten:true});a.forEach((t=>{if(!this.mutationObservers.get(t)){const a=new MutationObserver((()=>{setTimeout((()=>{this.syncActiveTabIndicator();this.handleTabScroll();this.updateScrollControls()}),500)}));this.mutationObservers.set(t,a);a.observe(t,{characterData:true,childList:true,subtree:true})}}))};this.hasScrollControls=false;this.hideControlRight=true;this.hideControlLeft=true;this.tab=undefined;this.placement="top";this.noScrollControls=false;this.color=undefined;this.storeId=undefined;this.storeMethod="session";this.disableSwipe=undefined}handleTabNameChange(){if(this.activeTab&&this.activeTab.panel===this.tab)return;const t=this.getAllActiveTabs.find((t=>t.panel===this.tab));this.setActiveTab(t)}handlePlacementChange(){this.syncActiveTabIndicator()}handleNoScrollControlsChange(){this.updateScrollControls()}hideRightBtn(){if(!this.rightBtn)return;c(this.rightBtn,{className:"is-shown",show:!this.hideControlRight})}hideLeftBtn(){if(!this.leftBtn)return;c(this.leftBtn,{className:"is-shown",show:!this.hideControlLeft})}watchScrollControls(){if(this.hasScrollControls)setTimeout((t=>this.handleTabScroll()),20);else setTimeout((t=>{this.hideControlLeft=this.hideControlRight=true}),20)}async show(t){if(this.activeTab&&this.activeTab.panel===t)return;const a=this.getAllActiveTabs.find((a=>a.panel===t));if(a)this.setActiveTab(a)}get getAllActiveTabs(){return this.getAllTabs.filter((t=>!t.disabled))}get getAllTabs(){return s(this.host,"nano-tab")}get getAllPanels(){return s(this.host,"nano-tab-content")}get getActiveTab(){return this.getAllActiveTabs.find((t=>t.active))}setActiveTab(t,a=true){if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){const n=this.activeTab;this.activeTab=t;this.tab=t.panel;this.getAllActiveTabs.map((t=>t.active=t===this.activeTab));this.getAllPanels.map((t=>{if(t.name===this.activeTab.panel){t.active=true;this.activePanel=t}else t.active=false;t.removeAttribute("animation-dir")}));this.syncActiveTabIndicator();if(this.nav&&["top"].includes(this.placement)){e(this.activeTab,this.nav,"horizontal","center")}if(a){if(n){this.nanoTabHide.emit({name:n.panel})}this.nanoTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllActiveTabs;const a=this.getAllPanels;t.map(((t,n)=>{const i=a.find((a=>a.name===t.panel));if(i){if(!i.id)i.id=`${this.baseId}-panel-${n}`;if(!t.id)t.id=`${this.baseId}-tab-${n}`;t.setAttribute("aria-controls",i.id);i.setAttribute("aria-labelledby",t.id)}}))}syncActiveTabIndicator(){this.getAllTabs.forEach((t=>t.setAttribute("direction",this.placement==="top"?"horizontal":"vertical")));const t=this.getActiveTab;if(!t)return;const a=t.shadowRoot.querySelector(".nanotab")?.clientWidth||0;const n=t.clientHeight;const i=r(t,this.tabs);if(!this.activeTabIndicator)return;const o=i.top+this.nav.scrollTop;const s=i.left;switch(this.placement){case"top":this.activeTabIndicator.style.width=`${a}px`;this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform=`translateX(${s}px)`;break;case"start":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=`${n}px`;this.activeTabIndicator.style.transform=`translateY(${o}px)`;break}}getNavWidth(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let a=this.nav.clientWidth;return a-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)}handleTabClose(t){let a=this.getAllActiveTabs.indexOf(t.target);const n=t.target;if(a<0)return;const i=this.getAllPanels.find((t=>t.name===n.panel));if(!i)return;t.stopImmediatePropagation();const o=this.nanoTabWillClose.emit({name:n.panel});if(o.defaultPrevented)return;if(n.active){a=a===0?1:a-1;const t=this.getAllActiveTabs[a]?.panel;if(t)this.host.show(t)}n.remove();i.remove();this.nanoTabClose.emit({name:n.panel})}componentDidLoad(){const t=new IntersectionObserver(((t,a)=>{if(t[0].intersectionRatio>0){this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);if(this.storeId)l.init(this,["tab"],this.storeMethod,this.storeId);a.unobserve(t[0].target)}}));t.observe(this.host);requestAnimationFrame((()=>this.updateScrollControls()));if(!window["ResizeObserver"])return;this.resizeObserver=new ResizeObserver((()=>{setTimeout((()=>{this.updateScrollControls();this.syncActiveTabIndicator();e(this.activeTab,this.nav,"horizontal","center")}),500)}));this.resizeObserver.observe(this.nav)}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"}disconnectedCallback(){if(this.resizeObserver)this.resizeObserver.unobserve(this.nav)}render(){this.isRtl=this.host.ownerDocument.dir==="rtl";return n(i,{class:{...h(this.color)},dir:this.isRtl?"rtl":null},n("div",{part:"base",class:{"nano-tab-group":true,"nano-tab-group--top":this.placement==="top","nano-tab-group--start":this.placement==="start","nano-tab-group--has-scroll-controls":this.hasScrollControls,"nano-tab-group--has-scroll-controls-left":!this.hideControlLeft,"nano-tab-group--has-scroll-controls-right":!this.hideControlRight},onClick:this.handleClick,onKeyDown:this.handleKeyDown},n("div",{class:"nano-tab-group__nav-container",part:"nav"},this.placement==="top"&&n("button",{disabled:!this.hasScrollControls,class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--left":true},ref:t=>this.leftBtn=t,onClick:()=>this.handleBtnClick(false)},n("nano-icon",{name:"light/chevron-left"})),n("div",{ref:t=>this.nav=t,class:"nano-tab-group__nav",onScroll:this.handleTabScroll},n("div",{ref:t=>this.tabs=t,part:"tabs",class:"nano-tab-group__tabs",role:"tablist","aria-orientation":this.placement==="start"?"vertical":"horizontal"},n("div",{ref:t=>this.activeTabIndicator=t,part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),n("slot",{name:"tabs",onSlotchange:this.handleTabSlotChange}))),this.placement==="top"&&n("button",{disabled:!this.hasScrollControls,class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--right":true},ref:t=>this.rightBtn=t,onClick:()=>this.handleBtnClick(true)},n("nano-icon",{name:"light/chevron-right"}))),n("slot",{name:"tab-content-header"}),n("div",{part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},n("slot",{onSlotchange:this.handleContentSlotChange}))))}get host(){return o(this)}static get watchers(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}}};p.style=d;export{p as nano_tab_group};
 //# sourceMappingURL=nano-tab-group.entry.js.map