@nanoporetech-digital/components 1.15.6 → 2.1.0

package/dist/components/menu.js

@@ -0,0 +1,235 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { g as getDirectChildren } from './dom.js';
+import { g as getTextContent } from './slot.js';
+import { g as getActiveElement } from './active-element.js';
+
+const menuCss = ":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{--padding-start:var(--nano-spacing-medium, 16px);--padding-end:var(--nano-spacing-medium, 16px);--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--secondary-padding-top:0;--secondary-padding-bottom:0;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#007495;--color-selected:#007495;--color-focus:#007495;--focus-outline:none;--font-size:0.9em;display:block}.menu{font-size:var(--font-size, 0.9em);-ms-scroll-chaining:none;overscroll-behavior:none;min-width:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)){padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:block}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)){padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}";
+
+const CANSHADOW = !!document.head.attachShadow;
+let Menu = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.nanoFocus = createEvent(this, "nanoFocus", 7);
+    this.nanoBlur = createEvent(this, "nanoBlur", 7);
+    this.nanoSelect = createEvent(this, "nanoSelect", 7);
+    this.ignoreMouseEvents = false;
+    this.typeToSelect = '';
+    this._hasFocus = false;
+    /** changes the role of the underlying control - sometimes required for semantics */
+    this.type = 'menu';
+    this.handleFocus = () => {
+      this.setActiveFocusItem(this.selectedItem || this.getItems[0]);
+      this._hasFocus = true;
+      this.nanoFocus.emit();
+    };
+    this.handleClick = (event) => {
+      const target = event.target;
+      const item = target.closest('nano-nav-item');
+      if (item && !item.disabled) {
+        this.nanoSelect.emit(item);
+      }
+    };
+    this.handleKeyDown = (event) => {
+      // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the
+      // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives
+      // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.
+      clearTimeout(this.ignoreMouseTimeout);
+      this.ignoreMouseTimeout = setTimeout(() => (this.ignoreMouseEvents = false), 500);
+      this.ignoreMouseEvents = true;
+      // Make a selection when pressing enter
+      switch (event.key) {
+        case ' ':
+          if (this.activeItem)
+            this.activeItem.click();
+          break;
+        case 'ArrowDown':
+        case 'ArrowUp':
+        case 'PageDown':
+        case 'PageUp':
+        case 'Home':
+        case 'End':
+          const items = this.getItems;
+          const selectedItem = this.activeItem;
+          let index = items.indexOf(selectedItem);
+          if (items.length) {
+            event.preventDefault();
+            if (event.key === 'ArrowDown') {
+              index++;
+            }
+            else if (event.key === 'ArrowUp') {
+              index--;
+            }
+            else if (event.key === 'Home' || event.key === 'PageUp') {
+              index = 0;
+            }
+            else if (event.key === 'End' || event.key === 'PageDown') {
+              index = items.length - 1;
+            }
+            if (index < 0)
+              index = items.length - 1;
+            if (index > items.length - 1)
+              index = 0;
+            this.setActiveFocusItem(items[index]);
+            if (items[index])
+              items[index].scrollIntoView({ block: 'nearest' });
+            return;
+          }
+          break;
+      }
+      // Handle type-to-search behavior when non-control characters are entered
+      if (event.key === ' ' || /^[a-z0-9]+$/i.test(event.key)) {
+        clearTimeout(this.typeToSelectTimeout);
+        this.typeToSelectTimeout = setTimeout(() => (this.typeToSelect = ''), 750);
+        this.typeToSelect += event.key;
+        const items = this.getItems;
+        for (const item of items) {
+          const slot = item.shadowRoot.querySelector('slot:not([name])');
+          const label = getTextContent(slot).toLowerCase().trim();
+          if (label.substring(0, this.typeToSelect.length) === this.typeToSelect) {
+            this.setActiveFocusItem(item);
+            break;
+          }
+        }
+      }
+    };
+    this.handleMouseOver = (event) => {
+      const target = event.target;
+      const item = target.closest('nano-nav-item') || target.closest('nano-option');
+      if (item && !this.ignoreMouseEvents) {
+        this.setActiveFocusItem(item);
+      }
+    };
+  }
+  // Public API
+  /** get the focus state of the menu @readonly */
+  get hasFocus() {
+    return this._hasFocus;
+  }
+  // Public Methods
+  /** Sets focus on the menu. */
+  async setFocus() {
+    var _a;
+    if ((_a = this.menu) === null || _a === void 0 ? void 0 : _a.focus)
+      this.menu.focus({ preventScroll: true });
+  }
+  /** Removes focus from the menu. */
+  async removeFocus() {
+    var _a;
+    if ((_a = this.menu) === null || _a === void 0 ? void 0 : _a.blur)
+      this.menu.blur();
+  }
+  /** Sets the current active item */
+  async showActiveElement() {
+    if (this.selectedItem)
+      this.selectedItem.scrollIntoView({ block: 'nearest' });
+  }
+  /** Removes any active item's state */
+  async resetActiveItem() {
+    this.getItems
+      .filter((i) => i.tagName.toLowerCase() === 'nano-option')
+      .map((i) => i.setAttribute('tabindex', '-1'));
+  }
+  // Private methods
+  get getItems() {
+    let items;
+    let opened = this.el.querySelectorAll('nano-nav-item.secondary-open');
+    if (opened.length) {
+      const ctx = opened[opened.length - 1];
+      items = Array.from(ctx.querySelectorAll('nano-nav-item, nano-option'));
+    }
+    else {
+      items = getDirectChildren(this.el, 'nano-nav-item, nano-option', 'slot');
+    }
+    return items.filter((el) => !el.disabled && !el.hidden);
+  }
+  get activeItem() {
+    const activeElement = getActiveElement();
+    return this.getItems.find((i) => i.getAttribute('tabindex') === '0' ||
+      i === activeElement ||
+      i.classList.contains('has-focus'));
+  }
+  get selectedItem() {
+    const activeElement = getActiveElement();
+    return this.getItems.find((i) => i.selected || i === activeElement);
+  }
+  async setActiveFocusItem(item, focus = true) {
+    const items = this.getItems;
+    let activeItem = !item || item.disabled ? items.find((i) => i.selected) || items[0] : item;
+    items
+      .filter((i) => i.tagName.toLowerCase() === 'nano-option')
+      .map((i) => i.setAttribute('tabindex', i === activeItem ? '0' : '-1'));
+    if (!focus)
+      return;
+    if (activeItem) {
+      activeItem.setFocus
+        ? activeItem.setFocus()
+        : activeItem.focus();
+    }
+    else
+      this.menu.focus();
+  }
+  // Event Handlers
+  handleBlur(e) {
+    if (!this.hasFocus)
+      return;
+    const kev = e;
+    let found;
+    if (kev.key) {
+      if (kev.key !== 'Tab')
+        return;
+      found =
+        getActiveElement() &&
+          getActiveElement().closest(this.el.tagName.toLowerCase()) === this.el;
+    }
+    else
+      found = !!e.composedPath().find((el) => el === this.el);
+    if (!found) {
+      this.resetActiveItem();
+      this._hasFocus = false;
+      this.nanoBlur.emit();
+    }
+  }
+  // Component Lifecycle
+  render() {
+    return (h(Host, { class: {
+        legacy: !CANSHADOW,
+      } }, h("div", { onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onFocus: this.handleFocus, "aria-label": this.label ? this.label : undefined, role: this.type, ref: (el) => (this.menu = el), part: "base", class: {
+        menu: true,
+        ['menu--' + this.type]: true,
+        'menu--has-focus': this.hasFocus,
+      }, tabIndex: -1 }, h("slot", null))));
+  }
+  get el() { return this; }
+  static get style() { return menuCss; }
+};
+Menu = /*@__PURE__*/ proxyCustomElement(Menu, [1, "nano-menu", {
+    "hasFocus": [2052, "has-focus"],
+    "type": [1],
+    "label": [1],
+    "setFocus": [64],
+    "removeFocus": [64],
+    "showActiveElement": [64],
+    "resetActiveItem": [64]
+  }, [[17, "mousedown", "handleBlur"], [0, "keydown", "handleBlur"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["nano-menu"];
+  components.forEach(tagName => { switch (tagName) {
+    case "nano-menu":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Menu);
+      }
+      break;
+  } });
+}
+
+export { Menu as M, defineCustomElement as d };
+
+//# sourceMappingURL=menu.js.map

package/dist/components/menu.js.map

@@ -0,0 +1 @@
+{"file":"menu.js","mappings":"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","names":[],"sources":["./src/components/menu/menu.scss?tag=nano-menu&encapsulation=shadow","./src/components/menu/menu.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --padding-start: padding at the start of nav-items (left r2l / right l2r). Defaults to '10px'\n   * @prop --padding-end: padding at the end of nav-items (right r2l / left l2r). Defaults to '10px'\n   * @prop --padding-top: padding at the top of nav-items. Defaults to '10px'\n   * @prop --padding-bottom: padding at the bottom of nav-items. Defaults to '10px'\n\n   * @prop --secondary-padding-top: padding at the top of nested nav-items. Defaults to 0\n   * @prop --secondary-padding-bottom: padding at the bottom of nested nav-items. Defaults to 0\n\n   * @prop --bg-color-hover: bg hover color of nav-items. Defaults to #{$color-blue--faded};\n   * @prop --bg-color-focus: bg focus color of nav-items. Defaults to #{$color-blue--faded};\n   * @prop --bg-color-selected: bg selected color of nav-items. Defaults to #{$color-blue--faded};\n\n   * @prop --color-hover: text hover color of nav-items. Defaults to #{$color-blue}\n   * @prop --color-selected: text selected color of nav-items. Defaults to #{$color-blue}\n   * @prop --color-focus: text focus color of nav-items. Defaults to #{$color-blue}\n\n   * @prop --focus-outline: the focus style of nav-items. Defaults to 'none'\n   * @prop --font-size: default font-size for all items. Defaults .9em;\n  */\n\n  --padding-start: #{$spacing-medium};\n  --padding-end: #{$spacing-medium};\n  --padding-top: #{$spacing-small};\n  --padding-bottom: #{$spacing-small};\n  --secondary-padding-top: 0;\n  --secondary-padding-bottom: 0;\n  --bg-color-hover: #{$color-blue--faded};\n  --bg-color-focus: #{$color-blue--faded};\n  --bg-color-selected: #{$color-blue--faded};\n  --color-hover: #{$color-blue};\n  --color-selected: #{$color-blue};\n  --color-focus: #{$color-blue};\n  --focus-outline: none;\n  --font-size: 0.9em;\n\n  display: block;\n}\n\n.menu {\n  font-size: var(--font-size, 0.9em);\n  overscroll-behavior: none;\n  min-width: var(--width);\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)) {\n  @include padding(\n    var(--padding-top),\n    var(--padding-end),\n    var(--padding-bottom),\n    var(--padding-start)\n  );\n\n  display: block;\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Method,\n  h,\n  Host,\n  Element,\n  Prop,\n  Listen,\n} from '@stencil/core';\nimport {\n  getTextContent,\n  getDirectChildren,\n  getActiveElement,\n} from '../../utils';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\ntype ValidElement = HTMLNanoNavItemElement | HTMLNanoOptionElement;\ntype NNI = HTMLNanoNavItemElement;\n\n/**\n * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.\n * Manages focus state / active.\n * @slot - The menu's content; `nano-option`, `nano-nav-item` elements as well as <hr> and more.\n */\n@Component({\n  tag: 'nano-menu',\n  styleUrl: 'menu.scss',\n  shadow: true,\n})\nexport class Menu {\n  private ignoreMouseEvents = false;\n  private ignoreMouseTimeout: any;\n  private menu: HTMLElement;\n  private typeToSelect = '';\n  private typeToSelectTimeout: any;\n\n  @Element() private el: HTMLNanoMenuElement;\n\n  // Public API\n\n  /** get the focus state of the menu @readonly */\n  @Prop()\n  get hasFocus() {\n    return this._hasFocus;\n  }\n  private _hasFocus = false;\n\n  /** changes the role of the underlying control - sometimes required for semantics */\n  @Prop() type: 'menu' | 'listbox' = 'menu';\n\n  /** an accessible label */\n  @Prop() label: string;\n\n  // Events\n\n  /** Emitted when the menu gains focus. */\n  @Event() nanoFocus: EventEmitter;\n\n  /** Emitted when the menu loses focus. */\n  @Event() nanoBlur: EventEmitter;\n\n  /** Emitted when a menu item is selected. */\n  @Event() nanoSelect: EventEmitter<\n    HTMLNanoOptionElement | HTMLNanoNavItemElement\n  >;\n\n  // Public Methods\n\n  /** Sets focus on the menu. */\n  @Method()\n  async setFocus() {\n    if (this.menu?.focus) this.menu.focus({ preventScroll: true });\n  }\n\n  /** Removes focus from the menu. */\n  @Method()\n  async removeFocus() {\n    if (this.menu?.blur) this.menu.blur();\n  }\n\n  /** Sets the current active item */\n  @Method()\n  async showActiveElement() {\n    if (this.selectedItem)\n      this.selectedItem.scrollIntoView({ block: 'nearest' });\n  }\n\n  /** Removes any active item's state */\n  @Method()\n  async resetActiveItem() {\n    this.getItems\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i) => i.setAttribute('tabindex', '-1'));\n  }\n\n  // Private methods\n\n  get getItems() {\n    let items: ValidElement[];\n    let opened = this.el.querySelectorAll('nano-nav-item.secondary-open');\n    if (opened.length) {\n      const ctx = opened[opened.length - 1] as HTMLNanoNavItemElement;\n      items = Array.from(ctx.querySelectorAll('nano-nav-item, nano-option'));\n    } else {\n      items = getDirectChildren(\n        this.el,\n        'nano-nav-item, nano-option',\n        'slot'\n      ) as ValidElement[];\n    }\n    return items.filter((el) => !el.disabled && !el.hidden);\n  }\n\n  get activeItem() {\n    const activeElement = getActiveElement();\n    return this.getItems.find(\n      (i) =>\n        i.getAttribute('tabindex') === '0' ||\n        i === activeElement ||\n        i.classList.contains('has-focus')\n    );\n  }\n\n  get selectedItem() {\n    const activeElement = getActiveElement();\n    return this.getItems.find((i) => i.selected || i === activeElement);\n  }\n\n  private async setActiveFocusItem(item?: ValidElement, focus = true) {\n    const items = this.getItems;\n    let activeItem =\n      !item || item.disabled ? items.find((i) => i.selected) || items[0] : item;\n\n    items\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i: HTMLNanoOptionElement) =>\n        i.setAttribute('tabindex', i === activeItem ? '0' : '-1')\n      );\n\n    if (!focus) return;\n\n    if (activeItem) {\n      (activeItem as NNI).setFocus\n        ? (activeItem as NNI).setFocus()\n        : activeItem.focus();\n    } else this.menu.focus();\n  }\n\n  // Event Handlers\n\n  @Listen('mousedown', { target: 'body' })\n  @Listen('keydown')\n  handleBlur(e: KeyboardEvent | MouseEvent) {\n    if (!this.hasFocus) return;\n\n    const kev = e as KeyboardEvent;\n    let found: boolean;\n\n    if (kev.key) {\n      if (kev.key !== 'Tab') return;\n      found =\n        getActiveElement() &&\n        getActiveElement().closest(this.el.tagName.toLowerCase()) === this.el;\n    } else found = !!e.composedPath().find((el) => el === this.el);\n\n    if (!found) {\n      this.resetActiveItem();\n      this._hasFocus = false;\n      this.nanoBlur.emit();\n    }\n  }\n\n  private handleFocus = () => {\n    this.setActiveFocusItem(this.selectedItem || this.getItems[0]);\n\n    this._hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nano-nav-item');\n\n    if (item && !item.disabled) {\n      this.nanoSelect.emit(item);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the\n    // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives\n    // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.\n    clearTimeout(this.ignoreMouseTimeout);\n    this.ignoreMouseTimeout = setTimeout(\n      () => (this.ignoreMouseEvents = false),\n      500\n    );\n    this.ignoreMouseEvents = true;\n\n    // Make a selection when pressing enter\n    switch (event.key) {\n      case ' ':\n        if (this.activeItem) this.activeItem.click();\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'PageDown':\n      case 'PageUp':\n      case 'Home':\n      case 'End':\n        const items = this.getItems;\n        const selectedItem = this.activeItem;\n        let index = items.indexOf(selectedItem);\n\n        if (items.length) {\n          event.preventDefault();\n\n          if (event.key === 'ArrowDown') {\n            index++;\n          } else if (event.key === 'ArrowUp') {\n            index--;\n          } else if (event.key === 'Home' || event.key === 'PageUp') {\n            index = 0;\n          } else if (event.key === 'End' || event.key === 'PageDown') {\n            index = items.length - 1;\n          }\n\n          if (index < 0) index = items.length - 1;\n          if (index > items.length - 1) index = 0;\n\n          this.setActiveFocusItem(items[index]);\n          if (items[index]) items[index].scrollIntoView({ block: 'nearest' });\n          return;\n        }\n        break;\n    }\n\n    // Handle type-to-search behavior when non-control characters are entered\n    if (event.key === ' ' || /^[a-z0-9]+$/i.test(event.key)) {\n      clearTimeout(this.typeToSelectTimeout);\n      this.typeToSelectTimeout = setTimeout(\n        () => (this.typeToSelect = ''),\n        750\n      );\n      this.typeToSelect += event.key;\n\n      const items = this.getItems;\n      for (const item of items) {\n        const slot = item.shadowRoot.querySelector(\n          'slot:not([name])'\n        ) as HTMLSlotElement;\n        const label = getTextContent(slot).toLowerCase().trim();\n        if (\n          label.substring(0, this.typeToSelect.length) === this.typeToSelect\n        ) {\n          this.setActiveFocusItem(item);\n          break;\n        }\n      }\n    }\n  };\n\n  private handleMouseOver = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item =\n      target.closest('nano-nav-item') || target.closest('nano-option');\n\n    if (item && !this.ignoreMouseEvents) {\n      this.setActiveFocusItem(item);\n    }\n  };\n\n  // Component Lifecycle\n\n  render() {\n    return (\n      <Host\n        class={{\n          legacy: !CANSHADOW,\n        }}\n      >\n        <div\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseOver={this.handleMouseOver}\n          onFocus={this.handleFocus}\n          aria-label={this.label ? this.label : undefined}\n          role={this.type}\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          class={{\n            menu: true,\n            ['menu--' + this.type]: true,\n            'menu--has-focus': this.hasFocus,\n          }}\n          tabIndex={-1}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/modal.js

@@ -0,0 +1,48 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { g as getTabbableElements } from './tabbable.js';
+
+let activeModals = [];
+class Modal {
+  constructor(element) {
+    this.tabDirection = 'forward';
+    this.element = element;
+    this.handleFocusIn = this.handleFocusIn.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+  activate() {
+    activeModals.push(this.element);
+    document.addEventListener('focusin', this.handleFocusIn);
+    document.addEventListener('keydown', this.handleKeyDown);
+  }
+  deactivate() {
+    activeModals = activeModals.filter((modal) => modal !== this.element);
+    document.removeEventListener('focusin', this.handleFocusIn);
+    document.removeEventListener('keydown', this.handleKeyDown);
+  }
+  isActive() {
+    // The "active" modal is always the most recent one shown
+    return activeModals[activeModals.length - 1] === this.element;
+  }
+  handleFocusIn(event) {
+    const path = event.composedPath();
+    // Trap focus so it doesn't go out of the modal's boundary
+    if (this.isActive() && !path.includes(this.element)) {
+      const tabbableElements = getTabbableElements(this.element);
+      const index = this.tabDirection === 'backward' ? tabbableElements.length - 1 : 0;
+      tabbableElements[index].focus({ preventScroll: true });
+    }
+  }
+  handleKeyDown(event) {
+    // Quick hack to determine tab direction
+    if (event.key === 'Tab' && event.shiftKey) {
+      this.tabDirection = 'backward';
+      setTimeout(() => (this.tabDirection = 'forward'));
+    }
+  }
+}
+
+export { Modal as M };
+
+//# sourceMappingURL=modal.js.map

package/dist/components/modal.js.map

@@ -0,0 +1 @@
+{"file":"modal.js","mappings":";;;;;AAEA,IAAI,YAAY,GAAkB,EAAE,CAAC;MAEhB,KAAK;EAIxB,YAAY,OAAoB;IAFhC,iBAAY,GAA2B,SAAS,CAAC;IAG/C,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACvB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACpD;EAED,QAAQ;IACN,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAChC,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACzD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;GAC1D;EAED,UAAU;IACR,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC;IACtE,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC5D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;GAC7D;EAED,QAAQ;;IAEN,OAAO,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC;GAC/D;EAED,aAAa,CAAC,KAAY;IACxB,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;;IAGlC,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;MACnD,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;MAC3D,MAAM,KAAK,GACT,IAAI,CAAC,YAAY,KAAK,UAAU,GAAG,gBAAgB,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;MACrE,gBAAgB,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;KACxD;GACF;EAED,aAAa,CAAC,KAAoB;;IAEhC,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,KAAK,CAAC,QAAQ,EAAE;MACzC,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;MAC/B,UAAU,CAAC,OAAO,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC,CAAC,CAAC;KACnD;GACF;;;;;","names":[],"sources":["./src/utils/modal.ts"],"sourcesContent":["import { getTabbableElements } from './tabbable';\n\nlet activeModals: HTMLElement[] = [];\n\nexport default class Modal {\n  element: HTMLElement;\n  tabDirection: 'forward' | 'backward' = 'forward';\n\n  constructor(element: HTMLElement) {\n    this.element = element;\n    this.handleFocusIn = this.handleFocusIn.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n  }\n\n  activate() {\n    activeModals.push(this.element);\n    document.addEventListener('focusin', this.handleFocusIn);\n    document.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  deactivate() {\n    activeModals = activeModals.filter((modal) => modal !== this.element);\n    document.removeEventListener('focusin', this.handleFocusIn);\n    document.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  isActive() {\n    // The \"active\" modal is always the most recent one shown\n    return activeModals[activeModals.length - 1] === this.element;\n  }\n\n  handleFocusIn(event: Event) {\n    const path = event.composedPath();\n\n    // Trap focus so it doesn't go out of the modal's boundary\n    if (this.isActive() && !path.includes(this.element)) {\n      const tabbableElements = getTabbableElements(this.element);\n      const index =\n        this.tabDirection === 'backward' ? tabbableElements.length - 1 : 0;\n      tabbableElements[index].focus({ preventScroll: true });\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    // Quick hack to determine tab direction\n    if (event.key === 'Tab' && event.shiftKey) {\n      this.tabDirection = 'backward';\n      setTimeout(() => (this.tabDirection = 'forward'));\n    }\n  }\n}\n"],"version":3}

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

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

package/dist/components/nano-accordion.js

@@ -0,0 +1,63 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { c as createColorClasses } from './theme.js';
+import { g as getDirectChildren } from './dom.js';
+
+const accordionCss = ":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{display:block}";
+
+let Accordion = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.nanoToggle = createEvent(this, "nanoToggle", 7);
+  }
+  onToggleHandler(event) {
+    event.stopPropagation();
+    let items = getDirectChildren(this.el, 'nano-details') ||
+      this.el.querySelectorAll('nano-details');
+    items.forEach((item, i) => {
+      if (item !== event.target)
+        item.open = false;
+      else
+        this.itemOpened = i;
+    });
+    this.nanoToggle.emit();
+  }
+  onClosedHandler(event) {
+    event.stopPropagation();
+    this.itemOpened = null;
+    this.nanoToggle.emit();
+  }
+  render() {
+    return (h(Host, { class: Object.assign(Object.assign({}, createColorClasses(this.color)), { [`nano-color-${this.itemOpened}`]: typeof this.itemOpened === 'number' }) }, h("slot", null)));
+  }
+  get el() { return this; }
+  static get style() { return accordionCss; }
+};
+Accordion = /*@__PURE__*/ proxyCustomElement(Accordion, [1, "nano-accordion", {
+    "color": [1],
+    "itemOpened": [32]
+  }, [[0, "nanoOpened", "onToggleHandler"], [0, "nanoClosed", "onClosedHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["nano-accordion"];
+  components.forEach(tagName => { switch (tagName) {
+    case "nano-accordion":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Accordion);
+      }
+      break;
+  } });
+}
+
+const NanoAccordion = Accordion;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoAccordion, defineCustomElement };
+
+//# sourceMappingURL=nano-accordion.js.map

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

@@ -0,0 +1 @@
+{"file":"nano-accordion.js","mappings":";;;;;;;AAAA,MAAM,YAAY,GAAG,0LAA0L;;ICwBlM,SAAS;;;;;;;EAgBpB,eAAe,CAAC,KAAkB;IAChC,KAAK,CAAC,eAAe,EAAE,CAAC;IAExB,IAAI,KAAK,GACP,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,cAAc,CAAC;MAC1C,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC3C,KAAK,CAAC,OAAO,CAAC,CAAC,IAA4B,EAAE,CAAC;MAC5C,IAAI,IAAI,KAAK,KAAK,CAAC,MAAM;QAAE,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;;QACxC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;KAC1B,CAAC,CAAC;IACH,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;GACxB;EAGD,eAAe,CAAC,KAAkB;IAChC,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;IACvB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;GACxB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,kCACA,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,KACjC,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,GAC9B,OAAO,IAAI,CAAC,UAAU,KAAK,QAAQ,OAGvC,eAAQ,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/accordion/accordion.scss?tag=nano-accordion&encapsulation=shadow","./src/components/accordion/accordion.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import {\n  Component,\n  h,\n  Listen,\n  Element,\n  Host,\n  Prop,\n  EventEmitter,\n  Event,\n  State,\n} from '@stencil/core';\n\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils/theme';\nimport { getDirectChildren } from '../../utils';\n\n/**\n * Simple accordion - only one item open at a time - must be used with [details](story/components-accordion--details) elements.\n */\n@Component({\n  tag: 'nano-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: true,\n})\nexport class Accordion {\n  @State() itemOpened?: number;\n\n  @Element() el: HTMLNanoAccordionElement;\n\n  /**\n   * Fires when accordion elements toggle\n   */\n  @Event() nanoToggle: EventEmitter;\n\n  /**\n   * Color to use from the color palette.\n   */\n  @Prop() color?: Color;\n\n  @Listen('nanoOpened')\n  onToggleHandler(event: CustomEvent) {\n    event.stopPropagation();\n\n    let items =\n      getDirectChildren(this.el, 'nano-details') ||\n      this.el.querySelectorAll('nano-details');\n    items.forEach((item: HTMLNanoDetailsElement, i) => {\n      if (item !== event.target) item.open = false;\n      else this.itemOpened = i;\n    });\n    this.nanoToggle.emit();\n  }\n\n  @Listen('nanoClosed')\n  onClosedHandler(event: CustomEvent) {\n    event.stopPropagation();\n    this.itemOpened = null;\n    this.nanoToggle.emit();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          ...createColorClasses(this.color),\n          [`nano-color-${this.itemOpened}`]:\n            typeof this.itemOpened === 'number',\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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