@nanoporetech-digital/components 5.2.1 → 5.3.0

package/dist/types/components.d.ts

@@ -725,23 +725,23 @@ export namespace Components {
         "storeMethod": StorageMethods;
     }
     /**
-     * WIP / TODO. https://git.oxfordnanolabs.local/Digital/nano-components/-/issues/24
+     * Drawers slide in from a container to expose additional options and information.
      */
     interface NanoDrawer {
         /**
-          * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of its parent element, set this prop and add `position: relative` to the parent.
+          * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of its parent element, set this attribute and add `position: relative` to the parent.
          */
         "contained": boolean;
-        /**
-          * Required for 'reveal' and 'push' types A valid DOM selector of the content element that this drawer will push or reveal underneath Please remember - elements wrapping the content element must be 'overflow: hidden' otherwise menus will be shown when closed
-         */
-        "contentSelector": string;
         /**
           * Hides the drawer
          */
         "hide": () => Promise<void>;
         /**
-          * The drawer's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility.
+          * Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...`
+         */
+        "hoist": boolean;
+        /**
+          * The drawer's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.
          */
         "label": string;
         /**
@@ -749,7 +749,11 @@ export namespace Components {
          */
         "noHeader": boolean;
         /**
-          * Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.
+          * 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
+         */
+        "noUserDismiss": boolean;
+        /**
+          * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.
          */
         "open": boolean;
         /**
@@ -757,13 +761,17 @@ export namespace Components {
          */
         "placement": 'top' | 'end' | 'bottom' | 'start';
         /**
-          * Shows the drawer
+          * Shows the drawer.
          */
         "show": () => Promise<void>;
         /**
-          * The display type of the drawer
+          * Store search queries (against this ID) to the component store. Use in conjunction with storeMethod
+         */
+        "storeId"?: string;
+        /**
+          * The method of storage. Either session storage, url hash (after the '#') or url query (after the '?').
          */
-        "type": 'overlay' | 'reveal' | 'push';
+        "storeMethod": StorageMethods;
     }
     /**
      * Dropdowns show additional content in a panel.
@@ -2867,7 +2875,7 @@ declare global {
         new (): HTMLNanoDialogElement;
     };
     /**
-     * WIP / TODO. https://git.oxfordnanolabs.local/Digital/nano-components/-/issues/24
+     * Drawers slide in from a container to expose additional options and information.
      */
     interface HTMLNanoDrawerElement extends Components.NanoDrawer, HTMLStencilElement {
     }
@@ -4044,47 +4052,57 @@ declare namespace LocalJSX {
         "storeMethod"?: StorageMethods;
     }
     /**
-     * WIP / TODO. https://git.oxfordnanolabs.local/Digital/nano-components/-/issues/24
+     * Drawers slide in from a container to expose additional options and information.
      */
     interface NanoDrawer {
         /**
-          * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of its parent element, set this prop and add `position: relative` to the parent.
+          * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of its parent element, set this attribute and add `position: relative` to the parent.
          */
         "contained"?: boolean;
         /**
-          * Required for 'reveal' and 'push' types A valid DOM selector of the content element that this drawer will push or reveal underneath Please remember - elements wrapping the content element must be 'overflow: hidden' otherwise menus will be shown when closed
+          * Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...`
          */
-        "contentSelector"?: string;
+        "hoist"?: boolean;
         /**
-          * The drawer's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility.
+          * The drawer's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.
          */
-        "label"?: string;
+        "label": string;
         /**
           * Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer.
          */
         "noHeader"?: boolean;
         /**
-          * Emitted after the drawer closes and all transitions are complete.
+          * 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
+         */
+        "noUserDismiss"?: boolean;
+        /**
+          * Emitted after the drawer closes and all animations are complete.
          */
         "onNanoAfterHide"?: (event: NanoDrawerCustomEvent<any>) => void;
         /**
-          * Emitted after the drawer opens and all transitions are complete.
+          * Emitted after the drawer opens and all animations are complete.
          */
         "onNanoAfterShow"?: (event: NanoDrawerCustomEvent<any>) => void;
         /**
-          * Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed.
+          * Emitted when the drawer closes.
          */
         "onNanoHide"?: (event: NanoDrawerCustomEvent<any>) => void;
         /**
-          * Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing.
+          * Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
+         */
+        "onNanoInitialFocus"?: (event: NanoDrawerCustomEvent<any>) => void;
+        /**
+          * Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.
          */
-        "onNanoOverlayDismiss"?: (event: NanoDrawerCustomEvent<any>) => void;
+        "onNanoRquestClose"?: (event: NanoDrawerCustomEvent<{
+    source: 'close-button' | 'keyboard' | 'overlay';
+  }>) => void;
         /**
-          * Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened.
+          * Emitted when the drawer opens.
          */
         "onNanoShow"?: (event: NanoDrawerCustomEvent<any>) => void;
         /**
-          * Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.
+          * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.
          */
         "open"?: boolean;
         /**
@@ -4092,9 +4110,13 @@ declare namespace LocalJSX {
          */
         "placement"?: 'top' | 'end' | 'bottom' | 'start';
         /**
-          * The display type of the drawer
+          * Store search queries (against this ID) to the component store. Use in conjunction with storeMethod
+         */
+        "storeId"?: string;
+        /**
+          * The method of storage. Either session storage, url hash (after the '#') or url query (after the '?').
          */
-        "type"?: 'overlay' | 'reveal' | 'push';
+        "storeMethod"?: StorageMethods;
     }
     /**
      * Dropdowns show additional content in a panel.
@@ -6115,7 +6137,7 @@ declare module "@stencil/core" {
              */
             "nano-dialog": LocalJSX.NanoDialog & JSXBase.HTMLAttributes<HTMLNanoDialogElement>;
             /**
-             * WIP / TODO. https://git.oxfordnanolabs.local/Digital/nano-components/-/issues/24
+             * Drawers slide in from a container to expose additional options and information.
              */
             "nano-drawer": LocalJSX.NanoDrawer & JSXBase.HTMLAttributes<HTMLNanoDrawerElement>;
             /**

package/dist/types/types/algolia.d.ts

@@ -0,0 +1,4 @@
+declare module 'algoliasearch/dist/algoliasearch-lite.esm.browser.js' {
+  export * from 'algoliasearch/dist/algoliasearch-lite';
+  export { default } from 'algoliasearch/dist/algoliasearch-lite';
+}

package/dist/types/types/scss.vars.d.ts

@@ -0,0 +1,4 @@
+declare module '*.scss' {
+  const vars: { [prop: string]: string };
+  export default vars;
+}

package/dist/types/utils/events.d.ts

@@ -13,3 +13,10 @@ export declare function addListeners(el: Element | Document, events: string, fn:
  * @param fn the function to call
  */
 export declare function removeListeners(el: Element | Document, events: string, fn: (e: Event) => void): void;
+/**
+ * Waits for a specific event to be emitted from an element.
+ * Ignores events that bubble up from child elements.
+ * @param el an html element
+ * @param eventName name of the event
+ */
+export declare function waitForEvent(el: HTMLElement, eventName: string): Promise<void>;

package/dist/types/utils/slot.d.ts

@@ -15,8 +15,8 @@ export declare function getTextContent(slot: HTMLSlotElement): string;
 /**
  * Determines whether an element has a slot. If name is specified, the function will look for a corresponding named
  * slot, otherwise it will look for a "default" slot (e.g. a non-empty text node or an element with no slot attribute).
- * @param el
- * @param name
+ * @param host a custom element host
+ * @param name a slot to find
  * @returns boolean
  */
-export declare function hasSlot(el: HTMLElement, name?: string): boolean;
+export declare function hasSlot(host: HTMLElement, name?: string): boolean;