@nanoporetech-digital/components 1.13.21 → 1.15.0

package/dist/collection/components/dropdown/dropdown.js

@@ -1,6 +1,6 @@
 import { Component, Element, Event, Method, Prop, Watch, h, Listen, } from '@stencil/core';
 import Popover from '../../utils/popover';
-import { transitionDone } from '../../utils/utils';
+import { transitionDone } from '../../utils';
 import { getNearestTabbableElement } from '../../utils/tabbable';
 /**
  * Dropdowns show additional content in a panel.
@@ -18,15 +18,20 @@ export class Dropdown {
     this.autoOpen = true;
     /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */
     this.open = false;
+    /**
+     * Determines whether the dropdown should hide when a menu item is selected.
+     */
+    this.closeOnSelect = true;
+    /**
+     * If you don't want to use the trigger slot, you can use this to 'tether' the dropdown to another element.
+     * And you will still need to control when the component is opened (using show() / hide() or the `open` prop)
+     */
+    this.tetherTo = null;
     /**
      * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
      * inside of the viewport.
      */
     this.placement = 'bottom-start';
-    /**
-     * Determines whether the dropdown should hide when a menu item is selected.
-     */
-    this.closeOnSelect = true;
     /**
      * The distance in pixels from which to offset the panel away from its trigger.
      */
@@ -40,10 +45,11 @@ export class Dropdown {
      * `overflow: auto|scroll`.
      */
     this.hoist = false;
-    /**
-     * Title used to describe the dropdown content for accessibility
-     */
-    this.dialogTitle = null;
+    this.togglePanel = () => {
+      if (!this.autoOpen)
+        return;
+      this.open ? this.hide() : this.show();
+    };
     this.handleTriggerKeyDown = (event) => {
       // Open the panel when pressing down or up while focused on the trigger
       if (!this.open && ['ArrowDown', 'ArrowUp', ' '].includes(event.key)) {
@@ -55,11 +61,6 @@ export class Dropdown {
     this.handleTriggerSlotChange = () => {
       this.updateAccessibleTrigger();
     };
-    this.togglePanel = () => {
-      if (!this.autoOpen)
-        return;
-      this.open ? this.hide() : this.show();
-    };
   }
   handleOpenChange() {
     if (!this.ignoreOpenWatcher) {
@@ -67,6 +68,10 @@ export class Dropdown {
       this.updateAccessibleTrigger();
     }
   }
+  handleTetherToChange() {
+    this.createPopover();
+    this.updateAccessibleTrigger();
+  }
   handlePopoverOptionsChange() {
     this.popover.setOptions({
       strategy: this.hoist ? 'fixed' : 'absolute',
@@ -75,6 +80,7 @@ export class Dropdown {
       distance: this.distance,
     });
   }
+  // Listeners
   menuFocus(ev) {
     let target = ev.target;
     if (!target ||
@@ -101,38 +107,13 @@ export class Dropdown {
     this.panel.style.minHeight =
       ev.target.parentElement.scrollHeight + 'px';
   }
-  connectedCallback() {
-    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
-    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
-    this.handlePanelSelect = this.handlePanelSelect.bind(this);
-    if (!this.containingElement)
-      this.containingElement = this.host;
-  }
-  componentDidLoad() {
-    this.popover = new Popover(this.trigger, this.positioner, {
-      strategy: this.hoist ? 'fixed' : 'absolute',
-      placement: this.placement,
-      distance: this.distance,
-      skidding: this.skidding,
-      transitionElement: this.panel,
-      onAfterHide: () => this.nanoAfterHide.emit(),
-      onAfterShow: () => this.nanoAfterShow.emit(),
-      onTransitionEnd: () => {
-        if (!this.open) {
-          this.panel.scrollTop = 0;
-        }
-      },
-    });
-    // Show on init if open
-    if (this.open) {
-      this.show();
-    }
-  }
-  disconnectedCallback() {
-    this.hide();
-    if (this.popover)
-      this.popover.destroy();
+  handlePanelSelect(event) {
+    const target = event.target;
+    // Hide the dropdown when a menu item is selected
+    if (this.closeOnSelect && target.tagName.toLowerCase() === 'nano-menu')
+      this.hide();
   }
+  // Methods
   /** Shows the dropdown panel */
   async show() {
     this.ignoreOpenWatcher = true;
@@ -165,9 +146,28 @@ export class Dropdown {
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
     this.menuFocused = false;
   }
+  // Private methods
   getMenu() {
     return this.host.querySelector('nano-menu');
   }
+  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and
+  // `aria-expanded`. These must be applied to the "accessible trigger" (the tabbable portion of the trigger element
+  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,
+  updateAccessibleTrigger() {
+    let accessibleTrigger;
+    if (!this.tetherTo) {
+      const assignedElements = Array.from(this.host.querySelectorAll('[slot="trigger"]'));
+      accessibleTrigger = assignedElements.map(getNearestTabbableElement)[0];
+    }
+    else {
+      accessibleTrigger = this.tetherTo;
+    }
+    if (accessibleTrigger) {
+      accessibleTrigger.setAttribute('aria-haspopup', 'true');
+      accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+    }
+  }
+  // Handlers
   handleDocumentKeyDown(event) {
     // Close when escape is pressed
     if (event.key === 'Escape') {
@@ -208,23 +208,48 @@ export class Dropdown {
       return;
     }
   }
-  handlePanelSelect(event) {
-    const target = event.target;
-    // Hide the dropdown when a menu item is selected
-    if (this.closeOnSelect && target.tagName.toLowerCase() === 'nano-menu')
-      this.hide();
-  }
-  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and
-  // `aria-expanded`. These must be applied to the "accessible trigger" (the tabbable portion of the trigger element
-  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,
-  updateAccessibleTrigger() {
-    const assignedElements = Array.from(this.host.querySelectorAll('[slot="trigger"]'));
-    const accessibleTrigger = assignedElements.map(getNearestTabbableElement)[0];
-    if (accessibleTrigger) {
-      accessibleTrigger.setAttribute('aria-haspopup', 'true');
-      accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+  createPopover() {
+    if (this.popover) {
+      if (this.open)
+        this.hide();
+      this.popover.destroy();
+      this.popover = null;
+    }
+    this.popover = new Popover(this.tetherTo || this.trigger, this.positioner, {
+      strategy: this.hoist ? 'fixed' : 'absolute',
+      placement: this.placement,
+      distance: this.distance,
+      skidding: this.skidding,
+      transitionElement: this.panel,
+      onAfterHide: () => this.nanoAfterHide.emit(),
+      onAfterShow: () => this.nanoAfterShow.emit(),
+      onTransitionEnd: () => {
+        if (!this.open) {
+          this.panel.scrollTop = 0;
+        }
+      },
+    });
+    // Show on init if open
+    if (this.open) {
+      this.show();
     }
   }
+  // Stencil hooks
+  connectedCallback() {
+    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
+    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+    this.handlePanelSelect = this.handlePanelSelect.bind(this);
+    if (!this.containingElement)
+      this.containingElement = this.host;
+  }
+  componentDidLoad() {
+    this.createPopover();
+  }
+  disconnectedCallback() {
+    this.hide();
+    if (this.popover)
+      this.popover.destroy();
+  }
   render() {
     return (h("div", { part: "base", id: this.dropdownId, class: {
         dropdown: true,
@@ -286,26 +311,6 @@ export class Dropdown {
       "reflect": true,
       "defaultValue": "false"
     },
-    "placement": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'",
-        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport."
-      },
-      "getter": false,
-      "setter": false,
-      "attribute": "placement",
-      "reflect": false,
-      "defaultValue": "'bottom-start'"
-    },
     "closeOnSelect": {
       "type": "boolean",
       "mutable": false,
@@ -328,7 +333,7 @@ export class Dropdown {
     },
     "containingElement": {
       "type": "unknown",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "HTMLElement",
         "resolved": "HTMLElement",
@@ -347,6 +352,48 @@ export class Dropdown {
       "getter": false,
       "setter": false
     },
+    "tetherTo": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "HTMLElement",
+        "resolved": "HTMLElement",
+        "references": {
+          "HTMLElement": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If you don't want to use the trigger slot, you can use this to 'tether' the dropdown to another element.\nAnd you will still need to control when the component is opened (using show() / hide() or the `open` prop)"
+      },
+      "getter": false,
+      "setter": false,
+      "defaultValue": "null"
+    },
+    "placement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'",
+        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport."
+      },
+      "getter": false,
+      "setter": false,
+      "attribute": "placement",
+      "reflect": false,
+      "defaultValue": "'bottom-start'"
+    },
     "distance": {
       "type": "number",
       "mutable": false,
@@ -411,11 +458,11 @@ export class Dropdown {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string | null",
+        "original": "string",
         "resolved": "string",
         "references": {}
       },
-      "required": false,
+      "required": true,
       "optional": false,
       "docs": {
         "tags": [],
@@ -424,8 +471,7 @@ export class Dropdown {
       "getter": false,
       "setter": false,
       "attribute": "dialog-title",
-      "reflect": false,
-      "defaultValue": "null"
+      "reflect": false
     }
   }; }
   static get events() { return [{
@@ -527,6 +573,9 @@ export class Dropdown {
   static get watchers() { return [{
       "propName": "open",
       "methodName": "handleOpenChange"
+    }, {
+      "propName": "tetherTo",
+      "methodName": "handleTetherToChange"
     }, {
       "propName": "placement",
       "methodName": "handlePopoverOptionsChange"

package/dist/collection/components/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  Watch,\n  h,\n  Listen,\n  ComponentInterface,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\nimport { transitionDone } from '../../utils/utils';\nimport { NavItemEventDetail } from '../../interface';\nimport { getNearestTabbableElement } from '../../utils/tabbable';\n\n/**\n * Dropdowns show additional content in a panel.\n * Designed to work well with nano-menu components to provide a list of options (works well with nano-nav-items).\n * @slot trigger - The dropdown's trigger.\n * @slot - The dropdown's content.\n */\n@Component({\n  tag: 'nano-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n  private dropdownId = `dropdown-${dropDownIds++}`;\n  private labelId = this.dropdownId + '-title';\n  private ignoreOpenWatcher = false;\n  private panel: HTMLElement;\n  private popover: Popover;\n  private trigger: HTMLElement;\n  private positioner: HTMLElement;\n  private menuFocused: boolean = false;\n\n  @Element() host: HTMLNanoDropdownElement;\n\n  /** Determines if the dropdown should open automatically when the trigger is clicked */\n  @Prop() autoOpen = true;\n\n  /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n   * inside of the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'bottom-start';\n\n  /**\n   * Determines whether the dropdown should hide when a menu item is selected.\n   */\n  @Prop() closeOnSelect = true;\n\n  /**\n   * The dropdown will close when the user interacts outside of this element (e.g. clicking).\n   */\n  @Prop() containingElement: HTMLElement;\n\n  /**\n   * The distance in pixels from which to offset the panel away from its trigger.\n   */\n  @Prop() distance = 2;\n\n  /**\n   * The distance in pixels from which to offset the panel along its trigger.\n   */\n  @Prop() skidding = 0;\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop() hoist = false;\n\n  /**\n   * Title used to describe the dropdown content for accessibility\n   */\n  @Prop() dialogTitle: string | null = null;\n\n  /**\n   * Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.\n   */\n  @Event() nanoShow: EventEmitter;\n\n  /**\n   * Emitted after the dropdown opens and all transitions are complete.\n   */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoHide: EventEmitter;\n\n  /**\n   * Emitted after the dropdown closes and all transitions are complete.\n   */\n  @Event() nanoAfterHide: EventEmitter;\n\n  @Watch('open')\n  handleOpenChange() {\n    if (!this.ignoreOpenWatcher) {\n      this.open ? this.show() : this.hide();\n      this.updateAccessibleTrigger();\n    }\n  }\n\n  @Watch('placement')\n  @Watch('distance')\n  @Watch('skidding')\n  @Watch('hoist')\n  handlePopoverOptionsChange() {\n    this.popover.setOptions({\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      skidding: this.skidding,\n      distance: this.distance,\n    });\n  }\n\n  @Listen('nanoFocus')\n  menuFocus(ev: CustomEvent) {\n    let target = ev.target as HTMLElement;\n    if (\n      !target ||\n      !target.tagName ||\n      target.tagName.toLowerCase() !== 'nano-menu'\n    )\n      return;\n    this.menuFocused = true;\n  }\n\n  @Listen('nanoOpen')\n  secondaryOpen(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n\n    this.panel.classList.add('loading');\n    transitionDone(this.panel).then(() =>\n      this.panel.classList.remove('loading')\n    );\n    this.panel.style.minHeight =\n      (ev.detail as NavItemEventDetail).secondaryMenu.scrollHeight + 'px';\n  }\n\n  @Listen('nanoClose')\n  secondaryClose(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n    if (!(ev.target as HTMLElement).parentElement) return;\n    this.panel.style.minHeight =\n      (ev.target as HTMLElement).parentElement.scrollHeight + 'px';\n  }\n\n  connectedCallback() {\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);\n    this.handlePanelSelect = this.handlePanelSelect.bind(this);\n\n    if (!this.containingElement) this.containingElement = this.host;\n  }\n\n  componentDidLoad() {\n    this.popover = new Popover(this.trigger, this.positioner, {\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.panel,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n      onTransitionEnd: () => {\n        if (!this.open) {\n          this.panel.scrollTop = 0;\n        }\n      },\n    });\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  disconnectedCallback() {\n    this.hide();\n    if (this.popover) this.popover.destroy();\n  }\n\n  /** Shows the dropdown panel */\n  @Method()\n  async show() {\n    this.ignoreOpenWatcher = true;\n    this.open = true;\n\n    const nanoShow = this.nanoShow.emit();\n\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    this.popover.show();\n    this.ignoreOpenWatcher = false;\n\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  /** Hides the dropdown panel */\n  @Method()\n  async hide() {\n    this.ignoreOpenWatcher = true;\n    this.open = false;\n\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    if (this.popover) this.popover.hide();\n    this.ignoreOpenWatcher = false;\n\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n\n    this.menuFocused = false;\n  }\n\n  private getMenu() {\n    return this.host.querySelector('nano-menu') as HTMLNanoMenuElement;\n  }\n\n  private handleDocumentKeyDown(event: KeyboardEvent) {\n    // Close when escape is pressed\n    if (event.key === 'Escape') {\n      this.hide();\n      return;\n    }\n\n    // Close when tabbing results in the focus leaving the close element\n    if (event.key === 'Tab') {\n      setTimeout(() => {\n        if (\n          document.activeElement &&\n          document.activeElement.closest(\n            this.containingElement.tagName.toLowerCase()\n          ) !== this.containingElement\n        ) {\n          this.hide();\n          return;\n        }\n      });\n    }\n\n    const menu = this.getMenu();\n\n    // If a menu is present, focus on it when certain keys are pressed\n    if (menu && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n      if (!this.open || this.menuFocused) return;\n      event.preventDefault();\n      menu.setFocus();\n      return;\n    }\n\n    // All other keys focus the menu and pass the event through to menu (necessary for type-to-search to work)\n    if (menu && event.target !== menu) {\n      menu.dispatchEvent(new KeyboardEvent(event.type, event));\n      return;\n    }\n  }\n\n  private handleDocumentMouseDown(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    // Close when clicking outside of the close element\n    if (\n      target.closest(this.containingElement.tagName.toLowerCase()) !==\n      this.containingElement\n    ) {\n      this.hide();\n      return;\n    }\n  }\n\n  @Listen('nanoSelect')\n  handlePanelSelect(event: CustomEvent) {\n    const target = event.target as HTMLElement;\n\n    // Hide the dropdown when a menu item is selected\n    if (this.closeOnSelect && target.tagName.toLowerCase() === 'nano-menu')\n      this.hide();\n  }\n\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\n    // Open the panel when pressing down or up while focused on the trigger\n    if (!this.open && ['ArrowDown', 'ArrowUp', ' '].includes(event.key)) {\n      this.show();\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  private handleTriggerSlotChange = () => {\n    this.updateAccessibleTrigger();\n  };\n\n  private togglePanel = () => {\n    if (!this.autoOpen) return;\n    this.open ? this.hide() : this.show();\n  };\n\n  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and\n  // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n  private updateAccessibleTrigger() {\n    const assignedElements = Array.from(\n      this.host.querySelectorAll('[slot=\"trigger\"]')\n    );\n    const accessibleTrigger = assignedElements.map(\n      getNearestTabbableElement\n    )[0];\n\n    if (accessibleTrigger) {\n      accessibleTrigger.setAttribute('aria-haspopup', 'true');\n      accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open ? 'true' : 'false'\n      );\n    }\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        id={this.dropdownId}\n        class={{\n          dropdown: true,\n          'dropdown--open': this.open,\n        }}\n        aria-expanded={this.open ? 'true' : 'false'}\n        aria-haspopup=\"true\"\n      >\n        <span\n          part=\"trigger\"\n          class=\"dropdown__trigger\"\n          ref={(el) => (this.trigger = el)}\n          onKeyDown={this.handleTriggerKeyDown}\n          onClick={this.togglePanel}\n        >\n          <slot name=\"trigger\" onSlotchange={this.handleTriggerSlotChange} />\n        </span>\n\n        <div ref={(el) => (this.positioner = el)} class=\"dropdown__positioner\">\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class={`dropdown__panel ${this.placement.split('-').join(' ')}`}\n            aria-hidden={!this.open}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={this.dialogTitle ? this.labelId : undefined}\n          >\n            {this.dialogTitle && (\n              <h2\n                id={this.labelId}\n                class=\"dropdown__accessible-title\"\n                aria-live=\"polite\"\n              >\n                {this.dialogTitle}\n              </h2>\n            )}\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nlet dropDownIds = 0;\n"]}
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  Watch,\n  h,\n  Listen,\n  ComponentInterface,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\nimport { transitionDone } from '../../utils';\nimport { NavItemEventDetail } from '../../interface';\nimport { getNearestTabbableElement } from '../../utils/tabbable';\n\n/**\n * Dropdowns show additional content in a panel.\n * Designed to work well with nano-menu components to provide a list of options (works well with nano-nav-items).\n * @slot trigger - The dropdown's trigger.\n * @slot - The dropdown's content.\n */\n@Component({\n  tag: 'nano-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n  private dropdownId = `dropdown-${dropDownIds++}`;\n  private labelId = this.dropdownId + '-title';\n  private ignoreOpenWatcher = false;\n  private panel: HTMLElement;\n  private popover: Popover;\n  private trigger: HTMLElement;\n  private positioner: HTMLElement;\n  private menuFocused: boolean = false;\n\n  @Element() host: HTMLNanoDropdownElement;\n\n  /** Determines if the dropdown should open automatically when the trigger is clicked */\n  @Prop() autoOpen = true;\n\n  /** Indicates whether or not the dropdown 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    if (!this.ignoreOpenWatcher) {\n      this.open ? this.show() : this.hide();\n      this.updateAccessibleTrigger();\n    }\n  }\n\n  /**\n   * Determines whether the dropdown should hide when a menu item is selected.\n   */\n  @Prop() closeOnSelect = true;\n\n  /**\n   * The dropdown will close when the user interacts outside of this element (e.g. clicking).\n   */\n  @Prop({ mutable: true }) containingElement: HTMLElement;\n\n  /**\n   * If you don't want to use the trigger slot, you can use this to 'tether' the dropdown to another element.\n   * And you will still need to control when the component is opened (using show() / hide() or the `open` prop)\n   */\n  @Prop() tetherTo: HTMLElement = null;\n\n  @Watch('tetherTo')\n  handleTetherToChange() {\n    this.createPopover();\n    this.updateAccessibleTrigger();\n  }\n\n  /**\n   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n   * inside of the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'bottom-start';\n\n  /**\n   * The distance in pixels from which to offset the panel away from its trigger.\n   */\n  @Prop() distance = 2;\n\n  /**\n   * The distance in pixels from which to offset the panel along its trigger.\n   */\n  @Prop() skidding = 0;\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop() hoist = false;\n\n  @Watch('placement')\n  @Watch('distance')\n  @Watch('skidding')\n  @Watch('hoist')\n  handlePopoverOptionsChange() {\n    this.popover.setOptions({\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      skidding: this.skidding,\n      distance: this.distance,\n    });\n  }\n\n  /**\n   * Title used to describe the dropdown content for accessibility\n   */\n  @Prop() dialogTitle!: string;\n\n  // Events\n\n  /**\n   * Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.\n   */\n  @Event() nanoShow: EventEmitter;\n\n  /**\n   * Emitted after the dropdown opens and all transitions are complete.\n   */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoHide: EventEmitter;\n\n  /**\n   * Emitted after the dropdown closes and all transitions are complete.\n   */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // Listeners\n\n  @Listen('nanoFocus')\n  menuFocus(ev: CustomEvent) {\n    let target = ev.target as HTMLElement;\n    if (\n      !target ||\n      !target.tagName ||\n      target.tagName.toLowerCase() !== 'nano-menu'\n    )\n      return;\n    this.menuFocused = true;\n  }\n\n  @Listen('nanoOpen')\n  secondaryOpen(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n\n    this.panel.classList.add('loading');\n    transitionDone(this.panel).then(() =>\n      this.panel.classList.remove('loading')\n    );\n    this.panel.style.minHeight =\n      (ev.detail as NavItemEventDetail).secondaryMenu.scrollHeight + 'px';\n  }\n\n  @Listen('nanoClose')\n  secondaryClose(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n    if (!(ev.target as HTMLElement).parentElement) return;\n    this.panel.style.minHeight =\n      (ev.target as HTMLElement).parentElement.scrollHeight + 'px';\n  }\n\n  @Listen('nanoSelect')\n  handlePanelSelect(event: CustomEvent) {\n    const target = event.target as HTMLElement;\n\n    // Hide the dropdown when a menu item is selected\n    if (this.closeOnSelect && target.tagName.toLowerCase() === 'nano-menu')\n      this.hide();\n  }\n\n  // Methods\n\n  /** Shows the dropdown panel */\n  @Method()\n  async show() {\n    this.ignoreOpenWatcher = true;\n    this.open = true;\n\n    const nanoShow = this.nanoShow.emit();\n\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    this.popover.show();\n    this.ignoreOpenWatcher = false;\n\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  /** Hides the dropdown panel */\n  @Method()\n  async hide() {\n    this.ignoreOpenWatcher = true;\n    this.open = false;\n\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    if (this.popover) this.popover.hide();\n    this.ignoreOpenWatcher = false;\n\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n\n    this.menuFocused = false;\n  }\n\n  // Private methods\n\n  private getMenu() {\n    return this.host.querySelector('nano-menu') as HTMLNanoMenuElement;\n  }\n\n  private togglePanel = () => {\n    if (!this.autoOpen) return;\n    this.open ? this.hide() : this.show();\n  };\n\n  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and\n  // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n  private updateAccessibleTrigger() {\n    let accessibleTrigger: HTMLElement;\n    if (!this.tetherTo) {\n      const assignedElements = Array.from(\n        this.host.querySelectorAll('[slot=\"trigger\"]')\n      );\n      accessibleTrigger = assignedElements.map(getNearestTabbableElement)[0];\n    } else {\n      accessibleTrigger = this.tetherTo;\n    }\n\n    if (accessibleTrigger) {\n      accessibleTrigger.setAttribute('aria-haspopup', 'true');\n      accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open ? 'true' : 'false'\n      );\n    }\n  }\n\n  // Handlers\n\n  private handleDocumentKeyDown(event: KeyboardEvent) {\n    // Close when escape is pressed\n    if (event.key === 'Escape') {\n      this.hide();\n      return;\n    }\n\n    // Close when tabbing results in the focus leaving the close element\n    if (event.key === 'Tab') {\n      setTimeout(() => {\n        if (\n          document.activeElement &&\n          document.activeElement.closest(\n            this.containingElement.tagName.toLowerCase()\n          ) !== this.containingElement\n        ) {\n          this.hide();\n          return;\n        }\n      });\n    }\n\n    const menu = this.getMenu();\n\n    // If a menu is present, focus on it when certain keys are pressed\n    if (menu && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n      if (!this.open || this.menuFocused) return;\n      event.preventDefault();\n      menu.setFocus();\n      return;\n    }\n\n    // All other keys focus the menu and pass the event through to menu (necessary for type-to-search to work)\n    if (menu && event.target !== menu) {\n      menu.dispatchEvent(new KeyboardEvent(event.type, event));\n      return;\n    }\n  }\n\n  private handleDocumentMouseDown(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    // Close when clicking outside of the close element\n    if (\n      target.closest(this.containingElement.tagName.toLowerCase()) !==\n      this.containingElement\n    ) {\n      this.hide();\n      return;\n    }\n  }\n\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\n    // Open the panel when pressing down or up while focused on the trigger\n    if (!this.open && ['ArrowDown', 'ArrowUp', ' '].includes(event.key)) {\n      this.show();\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  private handleTriggerSlotChange = () => {\n    this.updateAccessibleTrigger();\n  };\n\n  private createPopover() {\n    if (this.popover) {\n      if (this.open) this.hide();\n      this.popover.destroy();\n      this.popover = null;\n    }\n\n    this.popover = new Popover(this.tetherTo || this.trigger, this.positioner, {\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.panel,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n      onTransitionEnd: () => {\n        if (!this.open) {\n          this.panel.scrollTop = 0;\n        }\n      },\n    });\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  // Stencil hooks\n\n  connectedCallback() {\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);\n    this.handlePanelSelect = this.handlePanelSelect.bind(this);\n\n    if (!this.containingElement) this.containingElement = this.host;\n  }\n\n  componentDidLoad() {\n    this.createPopover();\n  }\n\n  disconnectedCallback() {\n    this.hide();\n    if (this.popover) this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        id={this.dropdownId}\n        class={{\n          dropdown: true,\n          'dropdown--open': this.open,\n        }}\n        aria-expanded={this.open ? 'true' : 'false'}\n        aria-haspopup=\"true\"\n      >\n        <span\n          part=\"trigger\"\n          class=\"dropdown__trigger\"\n          ref={(el) => (this.trigger = el)}\n          onKeyDown={this.handleTriggerKeyDown}\n          onClick={this.togglePanel}\n        >\n          <slot name=\"trigger\" onSlotchange={this.handleTriggerSlotChange} />\n        </span>\n\n        <div ref={(el) => (this.positioner = el)} class=\"dropdown__positioner\">\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class={`dropdown__panel ${this.placement.split('-').join(' ')}`}\n            aria-hidden={!this.open}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={this.dialogTitle ? this.labelId : undefined}\n          >\n            {this.dialogTitle && (\n              <h2\n                id={this.labelId}\n                class=\"dropdown__accessible-title\"\n                aria-live=\"polite\"\n              >\n                {this.dialogTitle}\n              </h2>\n            )}\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nlet dropDownIds = 0;\n"]}

package/dist/collection/components/file-upload/file-upload-interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload-interface.js","sourceRoot":"","sources":["../../../src/components/file-upload/file-upload-interface.ts"],"names":[],"mappings":"","sourcesContent":["interface FileListArr extends File {\n  objectURL: string;\n}\n\nexport interface FileInputChangeEventDetail {\n  value: string | undefined | null;\n  files: FileListArr[];\n}\n"]}
+{"version":3,"file":"file-upload-interface.js","sourceRoot":"","sources":["../../../src/components/file-upload/file-upload-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface FileWithUrl extends File {\n  objectURL: string;\n  lastModifiedDate?: Date;\n  webkitRelativePath: string;\n}\n\nexport interface FileInputChangeEventDetail {\n  value: string | undefined | null;\n  files: FileWithUrl[];\n}\n"]}

package/dist/collection/components/file-upload/file-upload.css

@@ -12,7 +12,7 @@
    * @prop --invalid-msg-color: Default value var(--nano-color-danger, #ef4135);
    * @prop --invalid-msg-font-size: Default value var(--nano-input-help-font-size, 0.75em);
 
-   * @prop --help-msg-color: Default value var(--nano-input-help-color, #687576);
+   * @prop --help-msg-color: Default value var(--nano-input-help-color, #616d6e);
 
    * @prop --label-color: Default value var(--nano-input-label-color, "currentColor");
    * @prop --label-color--invalid: Default value var(--nano-input-label-color-invalid, "currentColor");
@@ -23,13 +23,13 @@
    * @prop --drop-bg: Default value #f2f7f9;
    * @prop --drop-text: Default value #918b86;
    * @prop --drop-height: Default value 3.5em;
-   * @prop --drop-border-tint: Default value var(--nano-color-primary-rgb, 0, 132, 169);
+   * @prop --drop-border-tint: Default value var(--nano-color-primary-rgb, 0, 116, 149);
    * @prop --drop-border-width: Default value 2px;
    * @prop --drop-border-radius: Default value 5px;
    * @prop --drop-bg--invalid: Default value var(--nano-input-background-color, #fee8de);
    * @prop --drop-border--invalid: Default value var(--nano-color-danger-rgb, 239, 65, 53);
 
-   * @prop --btn-bg: Default value var(--nano-color-primary, #0084a9);
+   * @prop --btn-bg: Default value var(--nano-color-primary, #007495);
    * @prop --btn-text: Default value var(--nano-color-primary-contrast, #fff);
    * @prop --btn-icon-size: Default value var(--nano-btn-icon-size, 1.4em);
    * @prop --btn-padding-top: Default value var(--nano-btn-padding-top, .5em);
@@ -41,20 +41,20 @@
   display: block;
   --invalid-msg-color: var(--nano-color-danger, #ef4135);
   --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);
-  --help-msg-color: var(--nano-input-help-color, #687576);
+  --help-msg-color: var(--nano-input-help-color, #616d6e);
   --label-color: var(--nano-input-label-color, "currentColor");
   --label-font-size: var(--nano-input-label-color, 1em);
   --label-padding: var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));
   --label-color--invalid: var(--nano-input-label-color-invalid, "currentColor");
   --drop-bg: #f2f7f9;
-  --drop-text: #918b86;
+  --drop-text: #756f6a;
   --drop-height: 3.5em;
-  --drop-border-tint: var(--nano-color-primary-rgb, 0, 132, 169);
+  --drop-border-tint: var(--nano-color-primary-rgb, 0, 116, 149);
   --drop-border-width: 2px;
   --drop-border-radius: 5px;
   --drop-bg--invalid: var(--nano-input-background-color, #fee8de);
   --drop-border--invalid: var(--nano-color-danger-rgb, 239, 65, 53);
-  --btn-bg: var(--nano-color-primary, #0084a9);
+  --btn-bg: var(--nano-color-primary, #007495);
   --btn-text: var(--nano-color-primary-contrast, #fff);
   --btn-icon-size: var(--nano-btn-icon-size, 1.4em);
   --btn-padding-top: var(--nano-btn-padding-top, 0.5em);
@@ -85,15 +85,7 @@
   color: var(--label-color--invalid);
 }
 .file-upload__input {
-  clip: rect(1px, 1px, 1px, 1px);
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
-  height: 1px;
-  width: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
+  display: none;
 }
 .file-upload__error, .file-upload__help, .file-upload__more, .file-upload__label {
   display: block;
@@ -455,7 +447,7 @@
   cursor: default;
 }
 .file-upload__button:hover:not(.button--disabled):not(:disabled), .file-upload__button.button--active {
-  background-color: var(--nano-color-primary-shade, #007090);
+  background-color: var(--nano-color-primary-shade, #00637f);
   color: var(--btn-text);
 }
 .file-upload__button:hover:not(.button--disabled):not(:disabled).button--keyline, .file-upload__button.button--active.button--keyline {

package/dist/collection/components/file-upload/file-upload.js

@@ -202,8 +202,8 @@ export class FileUpload {
             h("span", { class: "list-title" }, file.file.name),
             !file.valid && (h("nano-tooltip", { content: file.validationMessage, placement: "left" },
               h("nano-icon-button", { class: "list-button list-error", iconName: "light/exclamation-triangle", label: "File error" }))),
-            this.canChangeFileList && (h("nano-icon-button", { class: "list-button", type: "button", iconName: "light/eye", label: "View file", target: "_blank", href: file.location })),
-            this.canChangeFileList && (h("nano-icon-button", { onClick: (e) => this.onFileRemoveFileClick(e, file), class: "list-button", iconName: "light/times", label: "Remove file" }))));
+            this.canChangeFileList && (h("nano-icon-button", { class: "list-button list-button--view", type: "button", iconName: "light/eye", label: "View file", target: "_blank", href: file.location })),
+            this.canChangeFileList && (h("nano-icon-button", { onClick: (e) => this.onFileRemoveFileClick(e, file), class: "list-button list-button--remove", iconName: "light/times", label: "Remove file" }))));
         })))),
       ];
     };
@@ -233,20 +233,10 @@ export class FileUpload {
    * containing an object URL that can be used to reference the contents of the specified source
    * This list has no more than one member unless the multiple attribute is specified. @readonly */
   get files() {
-    File;
     return this.inputEl
       ? Array.from(this.inputEl.files).map((file) => {
-        return {
-          lastModified: file.lastModified,
-          type: file.type,
-          name: file.name,
-          size: file.size,
-          objectURL: URL.createObjectURL(file),
-          arrayBuffer: file.arrayBuffer,
-          slice: file.slice,
-          stream: file.stream,
-          text: file.text,
-        };
+        file.objectURL = URL.createObjectURL(file);
+        return file;
       })
       : [];
   }
@@ -315,6 +305,8 @@ export class FileUpload {
     return size / 1000000 <= this.maxFileSize;
   }
   checkFileType(type) {
+    if (!this.accept)
+      return true;
     return this.accept.match(type) && this.accept.match(type).length > 0;
   }
   slotChangeObserver() {
@@ -655,9 +647,14 @@ export class FileUpload {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "{ lastModified: number; type: string; name: string; size: number; objectURL: string; arrayBuffer: () => Promise<ArrayBuffer>; slice: (start?: number, end?: number, contentType?: string) => Blob; stream: () => ReadableStream<any>; text: () => Promise<string>; }[]",
-        "resolved": "{ lastModified: number; type: string; name: string; size: number; objectURL: string; arrayBuffer: () => Promise<ArrayBuffer>; slice: (start?: number, end?: number, contentType?: string) => Blob; stream: () => ReadableStream<any>; text: () => Promise<string>; }[]",
-        "references": {}
+        "original": "FileWithUrl[]",
+        "resolved": "FileWithUrl[]",
+        "references": {
+          "FileWithUrl": {
+            "location": "import",
+            "path": "/builds/Xi7NpFYo/0/Digital/nano-components/packages/components/src/interface.d.ts"
+          }
+        }
       },
       "required": false,
       "optional": false,
@@ -713,7 +710,7 @@ export class FileUpload {
         "references": {
           "FileInputChangeEventDetail": {
             "location": "import",
-            "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/Xi7NpFYo/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -766,7 +763,7 @@ export class FileUpload {
         "references": {
           "ControlValidityEventDetail": {
             "location": "import",
-            "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/Xi7NpFYo/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -788,7 +785,7 @@ export class FileUpload {
           },
           "ControlValidity": {
             "location": "import",
-            "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/Xi7NpFYo/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<ControlValidity>"