@nanoporetech-digital/components 1.15.6 → 2.1.0

package/dist/collection/components/dropdown/dropdown.css

@@ -7,6 +7,9 @@
 *::after {
   box-sizing: border-box;
 }
+[hidden] {
+  display: none !important;
+}
 :host {
   /**
    * @prop --width: width of the dropdown. Defaults to 'auto'
@@ -14,6 +17,10 @@
    * @prop --border-radius: Defaults to var(--nano-layer-bg, #fff);
    * @prop --background: Defaults to var(--nano-layer-bg, #fff);
    * @prop --padding: padding of the drop down. Default to '10px 0';
+   * @prop --overflow: `nano-menu` with nested `nav-item` requires hidden overflow. This can be overidden;
+   * @prop --dropdown-z-index: Defaults to var(--nano-layer-index-dropdown, 300);
+   * @prop --min-width: Defaults to 0;
+   * @prop --box-shadow: var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));
    */
   --width: auto;
   --border: var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));
@@ -22,6 +29,11 @@
   --padding: 10px 0;
   --overflow: hidden;
   --dropdown-z-index: var(--nano-layer-index-dropdown, 300);
+  --min-width: 0;
+  --box-shadow: var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
 }
 
 .dropdown {
@@ -33,6 +45,7 @@
 .dropdown__positioner {
   position: absolute;
   z-index: var(--dropdown-z-index);
+  min-width: var(--min-width);
 }
 @media (max-width: 35.9375em) {
   .dropdown__positioner {
@@ -42,12 +55,13 @@
 .dropdown__panel {
   padding: var(--padding);
   background: var(--background);
+  min-width: var(--min-width);
   width: var(--width);
   border: var(--border);
   border-radius: var(--border-radius);
   color: currentColor;
-  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: var(--box-shadow);
+          box-shadow: var(--box-shadow);
   opacity: 0;
   -webkit-transition: 0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;
   transition: 0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;
@@ -56,6 +70,9 @@
   -webkit-box-sizing: content-box !important;
           box-sizing: content-box !important;
 }
+.dropdown__panel.loading {
+  overflow-y: hidden;
+}
 .dropdown__panel.top {
   -webkit-transform: translateY(-20px) translateZ(0);
           transform: translateY(-20px) translateZ(0);

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

@@ -3,11 +3,11 @@
  */
 import { Component, Element, Event, Method, Prop, Watch, h, Listen, } from '@stencil/core';
 import Popover from '../../utils/popover';
-import { transitionDone } from '../../utils';
-import { getNearestTabbableElement } from '../../utils/tabbable';
+import { getNearestTabbableElement, getActiveElement } from '../../utils';
+let dropDownIds = 0;
 /**
  * Dropdowns show additional content in a panel.
- * Designed to work well with nano-menu components to provide a list of options (works well with nano-nav-items).
+ * Designed to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).
  * @slot trigger - The dropdown's trigger.
  * @slot - The dropdown's content.
  */
@@ -16,7 +16,7 @@ export class Dropdown {
     this.dropdownId = `dropdown-${dropDownIds++}`;
     this.labelId = this.dropdownId + '-title';
     this.ignoreOpenWatcher = false;
-    this.menuFocused = false;
+    this.didLoad = false;
     /** Determines if the dropdown should open automatically when the trigger is clicked */
     this.autoOpen = true;
     /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */
@@ -55,21 +55,30 @@ export class Dropdown {
     };
     this.handleTriggerKeyDown = (event) => {
       // Open the panel when pressing down or up while focused on the trigger
-      if (!this.open && ['ArrowDown', 'ArrowUp', ' '].includes(event.key)) {
+      if (['ArrowDown', 'ArrowUp', ' '].includes(event.key)) {
         this.show();
         event.preventDefault();
         event.stopPropagation();
+        if (this.menu)
+          this.menu.setFocus();
       }
     };
     this.handleTriggerSlotChange = () => {
       this.updateAccessibleTrigger();
     };
   }
+  get menu() {
+    return this.host.querySelector('nano-menu');
+  }
   handleOpenChange() {
-    if (!this.ignoreOpenWatcher) {
-      this.open ? this.show() : this.hide();
-      this.updateAccessibleTrigger();
+    if (this.ignoreOpenWatcher)
+      return;
+    this.open ? this.show() : this.hide();
+    if (this.accessibleTrigger) {
+      this.accessibleTrigger.setAttribute('aria-expanded', this.open.toString());
+      return;
     }
+    this.updateAccessibleTrigger();
   }
   handleTetherToChange() {
     this.createPopover();
@@ -84,20 +93,14 @@ export class Dropdown {
     });
   }
   // Listeners
-  menuFocus(ev) {
-    let target = ev.target;
-    if (!target ||
-      !target.tagName ||
-      target.tagName.toLowerCase() !== 'nano-menu')
-      return;
-    this.menuFocused = true;
-  }
   secondaryOpen(ev) {
     if (!ev.detail.secondaryMenu)
       return;
     ev.stopPropagation();
     this.panel.classList.add('loading');
-    transitionDone(this.panel).then(() => this.panel.classList.remove('loading'));
+    this.panel.addEventListener('transitionend', () => {
+      this.panel.classList.remove('loading');
+    }, { once: true });
     this.panel.style.minHeight =
       ev.detail.secondaryMenu.scrollHeight + 'px';
   }
@@ -147,27 +150,45 @@ export class Dropdown {
     this.ignoreOpenWatcher = false;
     document.removeEventListener('mousedown', this.handleDocumentMouseDown);
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
-    this.menuFocused = false;
+    if (this.accessibleTrigger && this.focusEleInDropDwn()) {
+      this.accessibleTrigger.focus();
+    }
   }
   // Private methods
-  getMenu() {
-    return this.host.querySelector('nano-menu');
+  /** Decides if the current active element or element
+   * connected to the current event is connected to the Dropdown
+   */
+  focusEleInDropDwn(e) {
+    var _a;
+    const activeElement = getActiveElement();
+    if (e && ((_a = e.composedPath()) === null || _a === void 0 ? void 0 : _a.length)) {
+      const ddInPath = e.composedPath().includes(this.containingElement);
+      return !e.composedPath().includes(this.accessibleTrigger) && ddInPath;
+    }
+    return (activeElement &&
+      activeElement.closest(this.containingElement.tagName.toLowerCase()) ===
+        this.containingElement &&
+      activeElement !== this.accessibleTrigger);
   }
   // 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() {
+    if (!this.didLoad)
+      return;
     let accessibleTrigger;
+    this.accessibleTrigger = null;
     if (!this.tetherTo) {
       const assignedElements = Array.from(this.host.querySelectorAll('[slot="trigger"]'));
       accessibleTrigger = assignedElements.map(getNearestTabbableElement)[0];
     }
     else {
-      accessibleTrigger = this.tetherTo;
+      accessibleTrigger = getNearestTabbableElement(this.tetherTo);
     }
     if (accessibleTrigger) {
       accessibleTrigger.setAttribute('aria-haspopup', 'true');
       accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+      this.accessibleTrigger = accessibleTrigger;
     }
   }
   // Handlers
@@ -187,26 +208,25 @@ export class Dropdown {
         }
       });
     }
-    const menu = this.getMenu();
     // If a menu is present, focus on it when certain keys are pressed
-    if (menu && ['ArrowDown', 'ArrowUp'].includes(event.key)) {
-      if (!this.open || this.menuFocused)
+    if (this.menu && ['ArrowDown', 'ArrowUp'].includes(event.key)) {
+      // must have menu item, must have pressed down, must be open and must not have focus within dd
+      if (!this.open || this.focusEleInDropDwn(event))
         return;
       event.preventDefault();
-      menu.setFocus();
+      this.menu.setFocus();
       return;
     }
     // All other keys focus the menu and pass the event through to menu (necessary for type-to-search to work)
-    if (menu && event.target !== menu) {
-      menu.dispatchEvent(new KeyboardEvent(event.type, event));
+    const ePath = event.composedPath();
+    if (this.menu && ePath.length && !ePath.find((el) => el !== this.menu)) {
+      this.menu.dispatchEvent(new KeyboardEvent(event.type, event));
       return;
     }
   }
   handleDocumentMouseDown(event) {
-    const target = event.target;
     // Close when clicking outside of the close element
-    if (target.closest(this.containingElement.tagName.toLowerCase()) !==
-      this.containingElement) {
+    if (!this.focusEleInDropDwn(event)) {
       this.hide();
       return;
     }
@@ -230,6 +250,9 @@ export class Dropdown {
         if (!this.open) {
           this.panel.scrollTop = 0;
         }
+        else if (this.menu) {
+          this.menu.showActiveElement();
+        }
       },
     });
     // Show on init if open
@@ -241,12 +264,13 @@ export class Dropdown {
   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.didLoad = true;
     this.createPopover();
+    setTimeout(() => this.updateAccessibleTrigger(), 100);
   }
   disconnectedCallback() {
     this.hide();
@@ -257,7 +281,7 @@ export class Dropdown {
     return (h("div", { part: "base", id: this.dropdownId, class: {
         dropdown: true,
         'dropdown--open': this.open,
-      }, "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": "true" },
+      } },
       h("span", { part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onKeyDown: this.handleTriggerKeyDown, onClick: this.togglePanel },
         h("slot", { name: "trigger", onSlotchange: this.handleTriggerSlotChange })),
       h("div", { ref: (el) => (this.positioner = el), class: "dropdown__positioner" },
@@ -593,12 +617,6 @@ export class Dropdown {
       "methodName": "handlePopoverOptionsChange"
     }]; }
   static get listeners() { return [{
-      "name": "nanoFocus",
-      "method": "menuFocus",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
       "name": "nanoOpen",
       "method": "secondaryOpen",
       "target": undefined,
@@ -618,5 +636,4 @@ export class Dropdown {
       "passive": false
     }]; }
 }
-let dropDownIds = 0;
 //# sourceMappingURL=dropdown.js.map

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';\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"]}
+{"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 { NavItemEventDetail } from '../../interface';\nimport { getNearestTabbableElement, getActiveElement } from '../../utils';\n\nlet dropDownIds = 0;\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 (`nano-nav-items` / `nano-option`).\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 accessibleTrigger: HTMLElement;\n  private didLoad = false;\n  private get menu() {\n    return this.host.querySelector('nano-menu') as HTMLNanoMenuElement;\n  }\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) return;\n\n    this.open ? this.show() : this.hide();\n\n    if (this.accessibleTrigger) {\n      this.accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open.toString()\n      );\n      return;\n    }\n\n    this.updateAccessibleTrigger();\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('nanoOpen')\n  secondaryOpen(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n\n    this.panel.classList.add('loading');\n    this.panel.addEventListener(\n      'transitionend',\n      () => {\n        this.panel.classList.remove('loading');\n      },\n      { once: true }\n    );\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    if (this.accessibleTrigger && this.focusEleInDropDwn()) {\n      this.accessibleTrigger.focus();\n    }\n  }\n\n  // Private methods\n\n  /** Decides if the current active element or element\n   * connected to the current event is connected to the Dropdown\n   */\n  private focusEleInDropDwn(e?: Event) {\n    const activeElement = getActiveElement();\n\n    if (e && e.composedPath()?.length) {\n      const ddInPath = e.composedPath().includes(this.containingElement);\n      return !e.composedPath().includes(this.accessibleTrigger) && ddInPath;\n    }\n\n    return (\n      activeElement &&\n      activeElement.closest(this.containingElement.tagName.toLowerCase()) ===\n        this.containingElement &&\n      activeElement !== this.accessibleTrigger\n    );\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    if (!this.didLoad) return;\n\n    let accessibleTrigger: HTMLElement;\n    this.accessibleTrigger = null;\n\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 = getNearestTabbableElement(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      this.accessibleTrigger = accessibleTrigger;\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    // If a menu is present, focus on it when certain keys are pressed\n    if (this.menu && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n      // must have menu item, must have pressed down, must be open and must not have focus within dd\n      if (!this.open || this.focusEleInDropDwn(event)) return;\n      event.preventDefault();\n      this.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    const ePath = event.composedPath();\n    if (this.menu && ePath.length && !ePath.find((el) => el !== this.menu)) {\n      this.menu.dispatchEvent(new KeyboardEvent(event.type, event));\n      return;\n    }\n  }\n\n  private handleDocumentMouseDown(event: MouseEvent) {\n    // Close when clicking outside of the close element\n\n    if (!this.focusEleInDropDwn(event)) {\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 (['ArrowDown', 'ArrowUp', ' '].includes(event.key)) {\n      this.show();\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (this.menu) this.menu.setFocus();\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        } else if (this.menu) {\n          this.menu.showActiveElement();\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\n    if (!this.containingElement) this.containingElement = this.host;\n  }\n\n  componentDidLoad() {\n    this.didLoad = true;\n    this.createPopover();\n    setTimeout(() => this.updateAccessibleTrigger(), 100);\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      >\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"]}

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

@@ -7,6 +7,9 @@
 *::after {
   box-sizing: border-box;
 }
+[hidden] {
+  display: none !important;
+}
 :host {
   /**
    * @prop --invalid-msg-color: Default value var(--nano-color-danger, #ef4135);
@@ -433,8 +436,8 @@
   }
 }
 .file-upload__button:hover:not(.file-upload__button--disabled) {
-  -webkit-box-shadow: var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.3));
-          box-shadow: var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.3));
+  -webkit-box-shadow: var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));
+          box-shadow: var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));
 }
 .file-upload__button:active:not(.button--disabled):not(:disabled) {
   -webkit-box-shadow: none;

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

@@ -655,7 +655,7 @@ export class FileUpload {
         "references": {
           "FileWithUrl": {
             "location": "import",
-            "path": "/builds/YGFYbT4i/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/vyiT33Zh/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -713,7 +713,7 @@ export class FileUpload {
         "references": {
           "FileInputChangeEventDetail": {
             "location": "import",
-            "path": "/builds/YGFYbT4i/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/vyiT33Zh/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -766,7 +766,7 @@ export class FileUpload {
         "references": {
           "ControlValidityEventDetail": {
             "location": "import",
-            "path": "/builds/YGFYbT4i/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/vyiT33Zh/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -788,7 +788,7 @@ export class FileUpload {
           },
           "ControlValidity": {
             "location": "import",
-            "path": "/builds/YGFYbT4i/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/vyiT33Zh/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<ControlValidity>"

package/dist/collection/components/form-control/form-control.js

@@ -0,0 +1,73 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { h } from '@stencil/core';
+const renderLabel = ({ label, hasLabelSlot, controlId, labelId, floatLabel, placeholder, hideLabel, hasValue, rtl, showCharCount, maxlength, charCount, }) => {
+  if (!label && !hasLabelSlot)
+    return;
+  if (floatLabel) {
+    return (h("label", { class: "placeholder-as-label", htmlFor: controlId, id: labelId },
+      label && label,
+      !label && hasLabelSlot && h("slot", { name: "label" })));
+  }
+  else {
+    return (h("label", { class: { label: true, 'visually-hide': hideLabel }, htmlFor: controlId, id: labelId },
+      h("div", { class: "label-placeholder" },
+        placeholder && hasValue && rtl && (h("span", { class: "placeholder" },
+          placeholder,
+          " / ")),
+        h("span", { class: "labeltext" },
+          label && label,
+          !label && hasLabelSlot && h("slot", { name: "label" })),
+        placeholder && hasValue && !rtl && (h("span", { class: "placeholder" },
+          " / ",
+          placeholder))),
+      showCharCount && (h("span", { class: "charcount" }, maxlength
+        ? maxlength - charCount + ' left'
+        : charCount + ' characters'))));
+  }
+};
+export const FormControlWrap = (props, children) => {
+  const { rtl, floatLabel, label, moreId, type, hasHelperSlot, showInlineError, errorMessage, } = props;
+  const isLegacy = !document.head.attachShadow;
+  return [
+    !floatLabel ? renderLabel(Object.assign({}, props)) : '',
+    h("div", { class: {
+        'has-label': label !== null && !floatLabel,
+        'has-float-label': label !== null && floatLabel,
+        rtl,
+        legacy: isLegacy,
+        input: true,
+        textarea: type === 'textarea',
+      } },
+      floatLabel && renderLabel(Object.assign(Object.assign({}, props), { rtl })),
+      children),
+    showInlineError || hasHelperSlot ? (h("div", { class: "more", id: moreId },
+      !!showInlineError ? h("div", { class: "error" }, errorMessage) : '',
+      h("div", { class: "helper" },
+        h("slot", { name: "helper" })))) : (''),
+  ];
+};
+export const FormControl = (props, children) => {
+  const { clearControl, onClearText, readonly, disabled, control, ref, endSlot, endValueSlot, startSlot, } = props;
+  const clickThrough = () => {
+    control.setFocus();
+  };
+  return (h("div", { class: "native-input-wrap", ref: (el) => {
+      if (ref)
+        ref(el);
+    } },
+    h("span", { class: "start" },
+      h("slot", { name: "start" }),
+      startSlot),
+    children,
+    clearControl && !readonly && !disabled && (h("button", { type: "button", class: "icon input-clear-icon", tabindex: "-1", onTouchStart: onClearText, onMouseDown: onClearText },
+      h("nano-icon", { name: "light/times" }))),
+    h("span", { class: "value-end", onClick: clickThrough },
+      h("slot", { name: "value-end" }),
+      endValueSlot),
+    h("span", { class: "end" },
+      h("slot", { name: "end" }),
+      endSlot)));
+};
+//# sourceMappingURL=form-control.js.map

package/dist/collection/components/form-control/form-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-control.js","sourceRoot":"","sources":["../../../src/components/form-control/form-control.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport { TextFieldTypes } from '../../interface';\n\ninterface FormControlWrapProps {\n  rtl: boolean;\n  floatLabel: boolean;\n  labelId: string;\n  label: string;\n  moreId: string;\n  type?: TextFieldTypes;\n  showInlineError: boolean;\n  hasHelperSlot: boolean;\n  errorMessage: string;\n  controlId: string;\n  hasLabelSlot: boolean;\n  hideLabel: boolean;\n  placeholder: string;\n  hasValue: boolean;\n  showCharCount?: boolean;\n  maxlength?: number;\n  charCount?: number;\n}\n\ninterface FormControlProps {\n  clearControl: boolean;\n  onClearText?: () => void;\n  readonly: boolean;\n  disabled: boolean;\n  control: HTMLNanoInputElement | HTMLNanoSelectElement;\n  ref?: (elm?: HTMLElement) => void;\n  endSlot?: VNode;\n  endValueSlot?: VNode;\n  startSlot?: VNode;\n}\n\ninterface LabelProps extends FormControlWrapProps {\n  rtl: boolean;\n}\n\nconst renderLabel = ({\n  label,\n  hasLabelSlot,\n  controlId,\n  labelId,\n  floatLabel,\n  placeholder,\n  hideLabel,\n  hasValue,\n  rtl,\n  showCharCount,\n  maxlength,\n  charCount,\n}: LabelProps) => {\n  if (!label && !hasLabelSlot) return;\n  if (floatLabel) {\n    return (\n      <label class=\"placeholder-as-label\" htmlFor={controlId} id={labelId}>\n        {label && label}\n        {!label && hasLabelSlot && <slot name=\"label\" />}\n      </label>\n    );\n  } else {\n    return (\n      <label\n        class={{ label: true, 'visually-hide': hideLabel }}\n        htmlFor={controlId}\n        id={labelId}\n      >\n        <div class=\"label-placeholder\">\n          {placeholder && hasValue && rtl && (\n            <span class=\"placeholder\">{placeholder} / </span>\n          )}\n          <span class=\"labeltext\">\n            {label && label}\n            {!label && hasLabelSlot && <slot name=\"label\" />}\n          </span>\n          {placeholder && hasValue && !rtl && (\n            <span class=\"placeholder\"> / {placeholder}</span>\n          )}\n        </div>\n        {showCharCount && (\n          <span class=\"charcount\">\n            {maxlength\n              ? maxlength - charCount + ' left'\n              : charCount + ' characters'}\n          </span>\n        )}\n      </label>\n    );\n  }\n};\n\nexport const FormControlWrap: FunctionalComponent<FormControlWrapProps> = (\n  props: FormControlWrapProps,\n  children\n) => {\n  const {\n    rtl,\n    floatLabel,\n    label,\n    moreId,\n    type,\n    hasHelperSlot,\n    showInlineError,\n    errorMessage,\n  } = props;\n  const isLegacy = !document.head.attachShadow;\n\n  return [\n    !floatLabel ? renderLabel({ ...props }) : '',\n    <div\n      class={{\n        'has-label': label !== null && !floatLabel,\n        'has-float-label': label !== null && floatLabel,\n        rtl,\n        legacy: isLegacy,\n        input: true,\n        textarea: type === 'textarea',\n      }}\n    >\n      {floatLabel && renderLabel({ ...props, rtl })}\n      {children}\n    </div>,\n    showInlineError || hasHelperSlot ? (\n      <div class=\"more\" id={moreId}>\n        {!!showInlineError ? <div class=\"error\">{errorMessage}</div> : ''}\n        <div class=\"helper\">\n          <slot name=\"helper\" />\n        </div>\n      </div>\n    ) : (\n      ''\n    ),\n  ];\n};\n\nexport const FormControl: FunctionalComponent<FormControlProps> = (\n  props: FormControlProps,\n  children\n) => {\n  const {\n    clearControl,\n    onClearText,\n    readonly,\n    disabled,\n    control,\n    ref,\n    endSlot,\n    endValueSlot,\n    startSlot,\n  } = props;\n  const clickThrough = () => {\n    control.setFocus();\n  };\n\n  return (\n    <div\n      class=\"native-input-wrap\"\n      ref={(el) => {\n        if (ref) ref(el);\n      }}\n    >\n      <span class=\"start\">\n        <slot name=\"start\" />\n        {startSlot}\n      </span>\n      {children}\n      {clearControl && !readonly && !disabled && (\n        <button\n          type=\"button\"\n          class=\"icon input-clear-icon\"\n          tabindex=\"-1\"\n          onTouchStart={onClearText}\n          onMouseDown={onClearText}\n        >\n          <nano-icon name=\"light/times\"></nano-icon>\n        </button>\n      )}\n      <span class=\"value-end\" onClick={clickThrough}>\n        <slot name=\"value-end\" />\n        {endValueSlot}\n      </span>\n      <span class=\"end\">\n        <slot name=\"end\" />\n        {endSlot}\n      </span>\n    </div>\n  );\n};\n"]}