@nanoporetech-digital/components 1.15.6 → 2.0.0

package/dist/components/nano-drawer.js

@@ -0,0 +1,217 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { u as unlockBodyScrolling, l as lockBodyScrolling } from './scroll.js';
+import { M as Modal } from './modal.js';
+
+const drawerCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{position:relative;display:block;--size:25rem;--panel-background-color:white;--panel-shadow:0 4px 16px rgba(0, 0, 0, 0.1);--overlay-color:hsla(203, 10%, 20%, 0.5)}.drawer{top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.drawer:not(.drawer--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:2000}.drawer__panel{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;z-index:2;max-width:100%;max-height:100%;background-color:var(--panel-background-color);-webkit-box-shadow:var(--panel-shadow);box-shadow:var(--panel-shadow);-webkit-transition:250ms -webkit-transform;transition:250ms -webkit-transform;transition:250ms transform;transition:250ms transform, 250ms -webkit-transform;overflow:auto;pointer-events:all}.drawer__panel:focus{outline:none}.drawer--start .drawer__panel{left:0;right:auto;-webkit-transform:translate3d(-100%,  0,  0);transform:translate3d(-100%,  0,  0);top:0;bottom:auto;width:var(--size);height:100%}.drawer--start .drawer__panel[dir=rtl]{left:unset;right:unset;left:auto;right:0}.drawer--start .drawer__panel[dir=rtl]{-webkit-transform:translate3d(calc(-1 * -100%),  0,  0);transform:translate3d(calc(-1 * -100%),  0,  0)}.drawer--end .drawer__panel{left:auto;right:0;-webkit-transform:translate3d(100%,  0,  0);transform:translate3d(100%,  0,  0);top:0;bottom:auto;width:var(--size);height:100%}.drawer--end .drawer__panel[dir=rtl]{left:unset;right:unset;left:0;right:auto}.drawer--end .drawer__panel[dir=rtl]{-webkit-transform:translate3d(calc(-1 * 100%),  0,  0);transform:translate3d(calc(-1 * 100%),  0,  0)}.drawer--top .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:100%;height:var(--size);-webkit-transform:translate(0, -100%);transform:translate(0, -100%)}.drawer--bottom .drawer__panel{top:auto;right:auto;bottom:0;left:0;width:100%;height:var(--size);-webkit-transform:translate(0, 100%);transform:translate(0, 100%)}.drawer--open .drawer__panel{-webkit-transform:translate(0, 0);transform:translate(0, 0)}.drawer__header{display:-webkit-box;display:-ms-flexbox;display:flex}.drawer__title{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:20px}.drawer__close{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.drawer__body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch}.drawer__footer{text-align:right}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--overlay-color);opacity:0;-webkit-transition:250ms opacity;transition:250ms opacity;pointer-events:all}.drawer--contained .drawer__overlay{position:absolute}.drawer--open .drawer__overlay{opacity:1}";
+
+let id = 0;
+let Drawer = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.nanoShow = createEvent(this, "nanoShow", 7);
+    this.nanoAfterShow = createEvent(this, "nanoAfterShow", 7);
+    this.nanoHide = createEvent(this, "nanoHide", 7);
+    this.nanoAfterHide = createEvent(this, "nanoAfterHide", 7);
+    this.nanoOverlayDismiss = createEvent(this, "nanoOverlayDismiss", 7);
+    this.componentId = `drawer-${++id}`;
+    this.hasFooter = false;
+    this.isVisible = false;
+    /**
+     * Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.
+     */
+    this.open = false;
+    /**
+     * 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.
+     */
+    this.label = '';
+    /** The direction from which the drawer will open. */
+    this.placement = 'end';
+    /**
+     * 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.
+     */
+    this.contained = false;
+    /**
+     * 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.
+     */
+    this.noHeader = false;
+    /**
+     * The display type of the drawer
+     */
+    this.type = 'overlay';
+  }
+  handleOpenChange() {
+    this.open ? this.show() : this.hide();
+  }
+  handleTypeChange() {
+    if (this.type !== 'push' && this.type !== 'reveal')
+      return;
+    if (!this.contentEle) {
+      this.type = 'overlay';
+      console.warn('a valid contentSelector must be set');
+      return;
+    }
+  }
+  handleContentSelector() {
+    if (!this.contentSelector)
+      this.contentEle = null;
+    else
+      this.contentEle = this.host.ownerDocument.querySelector(this.contentSelector);
+  }
+  connectedCallback() {
+    this.handleCloseClick = this.handleCloseClick.bind(this);
+    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleOverlayClick = this.handleOverlayClick.bind(this);
+    this.handleSlotChange = this.handleSlotChange.bind(this);
+    this.modal = new Modal(this.host);
+  }
+  componentWillLoad() {
+    // Show on init if open
+    if (this.open) {
+      this.show();
+    }
+    this.handleContentSelector();
+  }
+  disconnectedCallback() {
+    unlockBodyScrolling(this.host);
+  }
+  /** Shows the drawer */
+  async show() {
+    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+    if (this.isVisible) {
+      return;
+    }
+    const nanoShow = this.nanoShow.emit();
+    if (nanoShow.defaultPrevented) {
+      this.open = false;
+      return;
+    }
+    this.isVisible = true;
+    this.open = true;
+    // Lock body scrolling only if the drawer isn't contained
+    if (!this.contained) {
+      this.modal.activate();
+      lockBodyScrolling(this.host);
+    }
+    if (!this.contentEle || (this.type !== 'push' && this.type !== 'reveal'))
+      return;
+    this.contentEle.style.right = '0';
+    this.contentEle.style.transition = 'all ease 250ms';
+    this.contentEle.style.position = 'relative';
+    this.contentEle.style.overflow = 'hidden';
+    setTimeout((_) => (this.contentEle.style.right = '25rem'), 0);
+  }
+  /** Hides the drawer */
+  async hide() {
+    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+    if (!this.isVisible) {
+      return;
+    }
+    const nanoHide = this.nanoHide.emit();
+    if (nanoHide.defaultPrevented) {
+      this.open = true;
+      return;
+    }
+    this.open = false;
+    this.modal.deactivate();
+    unlockBodyScrolling(this.host);
+    if (!this.contentEle)
+      return;
+    this.contentEle.style.transition = '';
+    this.contentEle.style.position = '';
+    this.contentEle.style.overflow = '';
+    this.contentEle.style.right = '';
+  }
+  handleCloseClick() {
+    this.hide();
+  }
+  handleKeyDown(event) {
+    if (event.key === 'Escape') {
+      this.hide();
+    }
+  }
+  handleOverlayClick() {
+    const slOverlayDismiss = this.nanoOverlayDismiss.emit();
+    if (!slOverlayDismiss.defaultPrevented) {
+      this.hide();
+    }
+  }
+  handleSlotChange() {
+    this.hasFooter = !!this.host.querySelector('[slot="footer"]');
+  }
+  handleTransitionEnd(event) {
+    const target = event.target;
+    // Ensure we only emit one event when the target element is no longer visible
+    if (event.propertyName === 'transform' &&
+      target.classList.contains('drawer__panel')) {
+      this.isVisible = this.open;
+      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();
+      if (this.open) {
+        this.panel.focus();
+      }
+    }
+  }
+  render() {
+    const placementClass = 'drawer--' + this.placement;
+    const typeClass = 'drawer--' + this.type;
+    let isRtl = this.host.ownerDocument.dir === 'rtl';
+    return (h(Host, { dir: isRtl ? 'rtl' : null }, h("div", { part: "base", class: {
+        drawer: true,
+        'drawer--open': this.open,
+        'drawer--visible': this.isVisible,
+        [typeClass]: true,
+        [placementClass]: true,
+        'drawer--contained': this.contained,
+        'drawer--fixed': !this.contained,
+        'drawer--has-footer': this.hasFooter,
+      }, onKeyDown: this.handleKeyDown, onTransitionEnd: this.handleTransitionEnd }, h("div", { part: "overlay", class: "drawer__overlay", onClick: this.handleOverlayClick }), h("div", { ref: (el) => (this.panel = el), part: "panel", class: "drawer__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 }, !this.noHeader && (h("header", { part: "header", class: "drawer__header" }, h("span", { part: "title", class: "drawer__title", id: `${this.componentId}-title` }, h("slot", { name: "label" }, this.label || String.fromCharCode(65279))))), h("div", { part: "body", class: "drawer__body" }, h("slot", null)), h("footer", { part: "footer", class: "drawer__footer" }, h("slot", { name: "footer", onSlotchange: this.handleSlotChange }))))));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "open": ["handleOpenChange"],
+    "type": ["handleTypeChange"],
+    "contentSelector": ["handleContentSelector"]
+  }; }
+  static get style() { return drawerCss; }
+};
+Drawer = /*@__PURE__*/ proxyCustomElement(Drawer, [1, "nano-drawer", {
+    "open": [1540],
+    "label": [1],
+    "placement": [1],
+    "contained": [4],
+    "noHeader": [4, "no-header"],
+    "type": [1],
+    "contentSelector": [1, "content-selector"],
+    "hasFooter": [32],
+    "isVisible": [32],
+    "show": [64],
+    "hide": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["nano-drawer"];
+  components.forEach(tagName => { switch (tagName) {
+    case "nano-drawer":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Drawer);
+      }
+      break;
+  } });
+}
+
+const NanoDrawer = Drawer;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoDrawer, defineCustomElement };
+
+//# sourceMappingURL=nano-drawer.js.map

package/dist/components/nano-drawer.js.map

@@ -0,0 +1 @@
+{"file":"nano-drawer.js","mappings":"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","names":[],"sources":["./src/components/drawer/drawer.scss?tag=nano-drawer&encapsulation=shadow","./src/components/drawer/drawer.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/utilities/css-patterns/visually_hidden';\n\n:host {\n  /**\n  * @prop --size: The preferred size of the drawer; width or height depending on placement. Note that the drawer will shrink to accommodate smaller screens. Defaults to 25rem\n  * @prop --panel-background-color: background color of panel. Default to 'white'\n  * @prop --panel-shadow: Defaults to '0 4px 16px rgba(0, 0, 0, 0.1)';\n  * @prop --overlay-color: Defaults to 'hsla(203, 10%, 20%, 0.5)';\n  */\n\n  position: relative;\n  display: block;\n\n  --size: 25rem;\n  --panel-background-color: white;\n  --panel-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n  --overlay-color: hsla(203, 10%, 20%, 0.5);\n}\n\n.drawer {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  overflow: hidden;\n\n  &:not(.drawer--visible) {\n    @include hidden;\n  }\n}\n\n.drawer--contained {\n  position: absolute;\n  z-index: initial;\n}\n\n.drawer--fixed {\n  position: fixed;\n  z-index: 2000;\n}\n\n.drawer__panel {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  max-width: 100%;\n  max-height: 100%;\n  background-color: var(--panel-background-color);\n  box-shadow: var(--panel-shadow);\n  transition: 250ms transform;\n  overflow: auto;\n  pointer-events: all;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.drawer--start .drawer__panel {\n  @include position-horizontal(0, auto);\n  @include transform(translate3d(-100%, 0, 0));\n\n  top: 0;\n  bottom: auto;\n  width: var(--size);\n  height: 100%;\n}\n\n.drawer--end .drawer__panel {\n  @include position-horizontal(auto, 0);\n  @include transform(translate3d(100%, 0, 0));\n\n  top: 0;\n  bottom: auto;\n  width: var(--size);\n  height: 100%;\n}\n\n.drawer--top .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, -100%);\n}\n\n.drawer--bottom .drawer__panel {\n  top: auto;\n  right: auto;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, 100%);\n}\n\n.drawer--open .drawer__panel {\n  transform: translate(0, 0);\n}\n\n.drawer__header {\n  display: flex;\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  // font-size: var(--sl-font-size-large);\n  // line-height: var(--sl-line-height-dense);\n  padding: 20px;\n}\n\n.drawer__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  // font-size: var(--sl-font-size-x-large);\n  // padding: 0 var(--sl-spacing-large);\n}\n\n.drawer__body {\n  flex: 1 1 auto;\n  // padding: var(--sl-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.drawer__footer {\n  text-align: right;\n  // padding: var(--sl-spacing-large);\n\n  // ::slotted(sl-button:not(:last-of-type)) {\n  //   margin-right: var(--sl-spacing-x-small);\n  // }\n}\n\n.drawer:not(.drawer--has-footer) .drawer__footer {\n  display: none;\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--overlay-color);\n  opacity: 0;\n  transition: 250ms opacity;\n  pointer-events: all;\n}\n\n.drawer--contained .drawer__overlay {\n  position: absolute;\n}\n\n.drawer--open .drawer__overlay {\n  opacity: 1;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport Modal from '../../utils/modal';\n\nlet id = 0;\n\n/**\n * WIP / TODO. https://git.oxfordnanolabs.local/Digital/nano-components/-/issues/24\n * @slot - The drawer's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n */\n@Component({\n  tag: 'nano-drawer',\n  styleUrl: 'drawer.scss',\n  shadow: true,\n})\nexport class Drawer {\n  private componentId = `drawer-${++id}`;\n  private modal: Modal;\n  private panel: HTMLElement;\n  private contentEle: HTMLElement;\n\n  @Element() host: HTMLNanoDrawerElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /**\n   * Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.\n   */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /** The direction from which the drawer will open. */\n  @Prop() placement: 'top' | 'end' | 'bottom' | 'start' = 'end';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this prop and add `position: relative` to the parent.\n   */\n  @Prop() contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop() noHeader = false;\n\n  /**\n   * The display type of the drawer\n   */\n  @Prop() type: 'overlay' | 'reveal' | 'push' = 'overlay';\n\n  /**\n   * Required for 'reveal' and 'push' types\n   * A valid DOM selector of the content element that this drawer will push or reveal underneath\n   * Please remember - elements wrapping the content element must be 'overflow: hidden'\n   * otherwise menus will be shown when closed\n   */\n  @Prop() contentSelector: string;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  @Watch('type')\n  handleTypeChange() {\n    if (this.type !== 'push' && this.type !== 'reveal') return;\n    if (!this.contentEle) {\n      this.type = 'overlay';\n      console.warn('a valid contentSelector must be set');\n      return;\n    }\n  }\n\n  @Watch('contentSelector')\n  handleContentSelector() {\n    if (!this.contentSelector) this.contentEle = null;\n    else\n      this.contentEle = (this.host.ownerDocument as Document).querySelector(\n        this.contentSelector\n      );\n  }\n\n  /**\n   * Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened.\n   */\n  @Event() nanoShow: EventEmitter;\n\n  /**\n   * Emitted after the drawer opens and all transitions are complete.\n   */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoHide: EventEmitter;\n\n  /**\n   * Emitted after the drawer closes and all transitions are complete.\n   */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /**\n   * Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing.\n   */\n  @Event() nanoOverlayDismiss: EventEmitter;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleOverlayClick = this.handleOverlayClick.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n\n    this.modal = new Modal(this.host);\n  }\n\n  componentWillLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n    this.handleContentSelector();\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the drawer */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible) {\n      return;\n    }\n\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n\n    // Lock body scrolling only if the drawer isn't contained\n    if (!this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (!this.contentEle || (this.type !== 'push' && this.type !== 'reveal'))\n      return;\n    this.contentEle.style.right = '0';\n    this.contentEle.style.transition = 'all ease 250ms';\n    this.contentEle.style.position = 'relative';\n    this.contentEle.style.overflow = 'hidden';\n    setTimeout((_) => (this.contentEle.style.right = '25rem'), 0);\n  }\n\n  /** Hides the drawer */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const nanoHide = this.nanoHide.emit();\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n\n    if (!this.contentEle) return;\n    this.contentEle.style.transition = '';\n    this.contentEle.style.position = '';\n    this.contentEle.style.overflow = '';\n    this.contentEle.style.right = '';\n  }\n\n  private handleCloseClick() {\n    this.hide();\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  }\n\n  private handleOverlayClick() {\n    const slOverlayDismiss = this.nanoOverlayDismiss.emit();\n\n    if (!slOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  }\n\n  private handleSlotChange() {\n    this.hasFooter = !!this.host.querySelector('[slot=\"footer\"]');\n  }\n\n  private handleTransitionEnd(event: TransitionEvent) {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (\n      event.propertyName === 'transform' &&\n      target.classList.contains('drawer__panel')\n    ) {\n      this.isVisible = this.open;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n\n      if (this.open) {\n        this.panel.focus();\n      }\n    }\n  }\n\n  render() {\n    const placementClass = 'drawer--' + this.placement;\n    const typeClass = 'drawer--' + this.type;\n\n    let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host dir={isRtl ? 'rtl' : null}>\n        <div\n          part=\"base\"\n          class={{\n            drawer: true,\n            'drawer--open': this.open,\n            'drawer--visible': this.isVisible,\n            [typeClass]: true,\n            [placementClass]: true,\n            'drawer--contained': this.contained,\n            'drawer--fixed': !this.contained,\n            'drawer--has-footer': this.hasFooter,\n          }}\n          onKeyDown={this.handleKeyDown}\n          onTransitionEnd={this.handleTransitionEnd}\n        >\n          <div\n            part=\"overlay\"\n            class=\"drawer__overlay\"\n            onClick={this.handleOverlayClick}\n          />\n\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class=\"drawer__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            {!this.noHeader && (\n              <header part=\"header\" class=\"drawer__header\">\n                <span\n                  part=\"title\"\n                  class=\"drawer__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                {/* <sl-icon-button part=\"close-button\" class=\"drawer__close\" name=\"x\" onClick={this.handleCloseClick} /> */}\n              </header>\n            )}\n\n            <div part=\"body\" class=\"drawer__body\">\n              <slot />\n            </div>\n\n            <footer part=\"footer\" class=\"drawer__footer\">\n              <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n            </footer>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nano-dropdown.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/scss.vars";
+
+interface NanoDropdown extends Components.NanoDropdown, HTMLElement {}
+export const NanoDropdown: {
+  prototype: NanoDropdown;
+  new (): NanoDropdown;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nano-dropdown.js

@@ -0,0 +1,11 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { D as Dropdown, d as defineCustomElement$1 } from './dropdown.js';
+
+const NanoDropdown = Dropdown;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoDropdown, defineCustomElement };
+
+//# sourceMappingURL=nano-dropdown.js.map

package/dist/components/nano-dropdown.js.map

@@ -0,0 +1 @@
+{"file":"nano-dropdown.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nano-file-upload.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/scss.vars";
+
+interface NanoFileUpload extends Components.NanoFileUpload, HTMLElement {}
+export const NanoFileUpload: {
+  prototype: NanoFileUpload;
+  new (): NanoFileUpload;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;