@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.0

package/dist/cjs/nano-dropdown.cjs.entry.js

@@ -1,373 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-615cdb64.js');
-const activeElement = require('./active-element-8ffcfe49.js');
-const popover = require('./popover-3dfc73f6.js');
-const tabbable = require('./tabbable-619dc959.js');
-const renderer = require('./renderer-cd8b6098.js');
-
-const dropdownCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--width:auto;--border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background:var(--nano-layer-bg, #fff);--padding:10px 0;--overflow:auto;--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));--menu-height:var(--max-menu-height, 50vh);display:flex}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (width <= 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;min-block-size:20px;overflow:var(--overflow);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(.nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";
-const NanoDropdownStyle0 = dropdownCss;
-
-let dropDownIds = 0;
-const Dropdown = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.nanoShow = index.createEvent(this, "nanoShow", 7);
-        this.nanoAfterShow = index.createEvent(this, "nanoAfterShow", 7);
-        this.nanoHide = index.createEvent(this, "nanoHide", 7);
-        this.nanoAfterHide = index.createEvent(this, "nanoAfterHide", 7);
-    }
-    dropdownId = `dropdown-${dropDownIds++}`;
-    labelId = this.dropdownId + '-title';
-    ignoreOpenWatcher = false;
-    panel;
-    popover;
-    trigger;
-    positioner;
-    accessibleTrigger;
-    didLoad = false;
-    get menu() {
-        return this.host.querySelector(renderer.transformTag('nano-menu'));
-    }
-    get host() { return index.getElement(this); }
-    /** Determines if the dropdown should open automatically when the trigger is clicked */
-    autoOpen = true;
-    /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */
-    open = false;
-    handleOpenChange() {
-        if (this.ignoreOpenWatcher)
-            return;
-        if (this.open)
-            this.show();
-        else
-            this.hide();
-        if (this.accessibleTrigger) {
-            this.accessibleTrigger.setAttribute('aria-expanded', this.open.toString());
-            return;
-        }
-        this.updateAccessibleTrigger();
-    }
-    /**
-     * Determines whether the dropdown should hide when a menu item is selected.
-     */
-    closeOnSelect = true;
-    /**
-     * The dropdown will close when the user interacts outside of this element (e.g. clicking).
-     */
-    containingElement;
-    /**
-     * 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)
-     */
-    tetherTo = null;
-    handleTetherToChange() {
-        this.createPopover();
-        this.updateAccessibleTrigger();
-    }
-    /**
-     * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
-     * inside of the viewport.
-     */
-    placement = 'bottom-start';
-    /**
-     * The distance in pixels from which to offset the panel away from its trigger.
-     */
-    distance = 2;
-    /**
-     * The distance in pixels from which to offset the panel along its trigger.
-     */
-    skidding = 0;
-    /**
-     * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
-     * `overflow: auto|scroll`.
-     */
-    hoist = false;
-    handlePopoverOptionsChange() {
-        if (!this.popover)
-            return;
-        this.popover.setOptions({
-            strategy: this.hoist ? 'fixed' : 'absolute',
-            placement: this.placement,
-            skidding: this.skidding,
-            distance: this.distance,
-        });
-    }
-    /**
-     * Title used to describe the dropdown content for accessibility
-     */
-    dialogTitle;
-    // Events
-    /**
-     * Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.
-     */
-    nanoShow;
-    /**
-     * Emitted after the dropdown opens and all transitions are complete.
-     */
-    nanoAfterShow;
-    /**
-     * Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.
-     */
-    nanoHide;
-    /**
-     * Emitted after the dropdown closes and all transitions are complete.
-     */
-    nanoAfterHide;
-    // this is a massive hack to make stencil expose the `EventEmitter` type in the final build
-    // because the `Dropdown` class is used as a type in `nano-datalist`
-    /** @internal */
-    eventType;
-    // Listeners
-    secondaryOpen(ev) {
-        if (!ev.detail.secondaryMenu)
-            return;
-        ev.stopPropagation();
-        this.panel.classList.add('loading');
-        this.panel.addEventListener('transitionend', () => {
-            this.panel.classList.remove('loading');
-        }, { once: true });
-        this.panel.style.minHeight =
-            ev.detail.secondaryMenu.scrollHeight + 'px';
-    }
-    secondaryClose(ev) {
-        if (!ev.detail.secondaryMenu)
-            return;
-        ev.stopPropagation();
-        if (!ev.target.parentElement)
-            return;
-        this.panel.style.minHeight =
-            ev.target.parentElement.scrollHeight + 'px';
-    }
-    handlePanelSelect(event) {
-        const target = event.target;
-        // Hide the dropdown when a menu item is selected
-        if (this.closeOnSelect &&
-            target.tagName.toLowerCase() === renderer.transformTag('nano-menu'))
-            this.hide();
-    }
-    // Methods
-    /** Shows the dropdown panel */
-    async show() {
-        this.ignoreOpenWatcher = true;
-        this.open = true;
-        const nanoShow = this.nanoShow.emit();
-        if (nanoShow.defaultPrevented) {
-            this.open = false;
-            this.ignoreOpenWatcher = false;
-            return;
-        }
-        if (typeof this.positioner?.showPopover === 'function') {
-            this.hoist = true;
-            this.popover.show();
-            this.positioner.showPopover();
-        }
-        else {
-            this.popover.show();
-        }
-        this.ignoreOpenWatcher = false;
-        document.addEventListener('mousedown', this.handleDocumentMouseDown);
-        document.addEventListener('keydown', this.handleDocumentKeyDown);
-    }
-    /** Hides the dropdown panel */
-    async hide() {
-        this.ignoreOpenWatcher = true;
-        this.open = false;
-        const nanoHide = this.nanoHide.emit();
-        if (nanoHide.defaultPrevented) {
-            this.open = true;
-            this.ignoreOpenWatcher = false;
-            return;
-        }
-        if (this.popover)
-            this.popover.hide();
-        this.ignoreOpenWatcher = false;
-        document.removeEventListener('mousedown', this.handleDocumentMouseDown);
-        document.removeEventListener('keydown', this.handleDocumentKeyDown);
-        if (this.accessibleTrigger && this.focusEleInDropDwn()) {
-            this.accessibleTrigger.focus();
-        }
-        setTimeout(() => {
-            if (!this.open && typeof this.positioner?.hidePopover === 'function') {
-                this.positioner.hidePopover();
-            }
-        }, 300);
-    }
-    // Private methods
-    /**
-     * Decides if the current active element or element
-     * connected to the current event is connected to the Dropdown
-     * @param e
-     * @returns whether the current focus is within the dropdown
-     */
-    focusEleInDropDwn(e) {
-        const activeElement$1 = activeElement.getActiveElement();
-        if (e && e.composedPath()?.length) {
-            const ddInPath = e.composedPath().includes(this.containingElement);
-            if (ddInPath)
-                return ddInPath;
-            return e.composedPath().includes(this.accessibleTrigger);
-        }
-        return (activeElement$1 &&
-            activeElement$1.closest(this.containingElement.tagName.toLowerCase()) ===
-                this.containingElement &&
-            activeElement$1 !== this.accessibleTrigger);
-    }
-    togglePanel = () => {
-        if (!this.autoOpen)
-            return;
-        if (this.open)
-            this.hide();
-        else
-            this.show();
-    };
-    // 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(tabbable.getNearestTabbableElement)[0];
-        }
-        else {
-            accessibleTrigger = tabbable.getNearestTabbableElement(this.tetherTo);
-        }
-        if (accessibleTrigger && !accessibleTrigger.getAttribute('aria-haspopup')) {
-            accessibleTrigger.setAttribute('aria-haspopup', 'true');
-            accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');
-            this.accessibleTrigger = accessibleTrigger;
-        }
-    }
-    // Handlers
-    handleDocumentKeyDown(event) {
-        // Close when escape is pressed
-        if (event.key === 'Escape') {
-            this.hide();
-            return;
-        }
-        // Close when tabbing results in the focus leaving the close element
-        if (event.key === 'Tab') {
-            setTimeout(() => {
-                if (document.activeElement &&
-                    document.activeElement.closest(this.containingElement.tagName.toLowerCase()) !== this.containingElement) {
-                    this.hide();
-                    return;
-                }
-            });
-        }
-        // If a menu is present, focus on it when certain keys are pressed
-        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();
-            this.menu.setFocus();
-            return;
-        }
-        // All other keys focus the menu and pass the event through to menu (necessary for type-to-search to work)
-        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) {
-        // Close when clicking outside of the close element
-        if (!this.focusEleInDropDwn(event)) {
-            this.hide();
-            return;
-        }
-    }
-    handleTriggerKeyDown = (event) => {
-        // Open the panel when pressing down or up while focused on the trigger
-        if (['ArrowDown', 'ArrowUp', ' '].includes(event.key)) {
-            this.show();
-            event.preventDefault();
-            event.stopPropagation();
-            if (this.menu)
-                this.menu.setFocus();
-        }
-    };
-    handleTriggerSlotChange = () => {
-        this.updateAccessibleTrigger();
-    };
-    createPopover() {
-        if ((!this.tetherTo && !this.trigger) || !this.positioner)
-            return;
-        if (this.popover) {
-            if (this.open)
-                this.hide();
-            this.popover.destroy();
-            this.popover = null;
-        }
-        this.popover = new popover.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;
-                }
-                else if (this.menu) {
-                    this.menu.showActiveElement();
-                }
-            },
-        });
-        // 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);
-        if (!this.containingElement)
-            this.containingElement = this.host;
-    }
-    componentDidLoad() {
-        this.didLoad = true;
-        this.createPopover();
-        setTimeout(() => this.updateAccessibleTrigger(), 100);
-    }
-    disconnectedCallback() {
-        if (this.host.isConnected)
-            this.hide();
-        if (this.popover)
-            this.popover.destroy();
-    }
-    render() {
-        return (renderer.h(index.Host, { key: '85c1bf918fa0800659aaab7d64c6832134d9b003', class: "nano-dropdown" }, renderer.h("div", { key: '9cc1b9eba8d8fea321f85c71cdd5fef1d823d03e', part: "base", id: this.dropdownId, class: {
-                dropdown: true,
-                'dropdown--open': this.open,
-            } }, renderer.h("span", { key: '06975a344a9d5760057a1531dd43e4dea9a6eed9', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onKeyDown: this.handleTriggerKeyDown, onClick: this.togglePanel }, renderer.h("slot", { key: '6a5adccd87e2fa3c763cb2bdadff0aa4323c3da3', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), renderer.h("div", { key: '1a887678dd9cc47a8192060478a5d7acdb06600e', ref: (el) => (this.positioner = el), class: "dropdown__positioner", popover: "manual", id: this.dropdownId + '-positioner' }, renderer.h("div", { key: 'c81fc552c814c87e2df44bf8022c38729069240b', ref: (el) => (this.panel = el), part: "panel", class: `dropdown__panel ${this.placement.split('-').join(' ')}`, "aria-hidden": !this.open, role: this.host.getAttribute('role') === 'group' ? 'group' : 'dialog', "aria-modal": this.host.getAttribute('role') === 'group' ? undefined : 'true', "aria-labelledby": this.dialogTitle ? this.labelId : undefined }, this.dialogTitle && (renderer.h("span", { key: '6d38bbf3d0d4411190dac237f2daa0815fafa420', id: this.labelId, class: "dropdown__accessible-title", "aria-live": this.host.getAttribute('role') === 'group'
-                ? undefined
-                : 'polite' }, this.dialogTitle)), renderer.h("slot", { key: '8ad35ae3a28c6a057d1cf408e9256605759916ba' }))))));
-    }
-    static get watchers() { return {
-        "open": ["handleOpenChange"],
-        "tetherTo": ["handleTetherToChange"],
-        "placement": ["handlePopoverOptionsChange"],
-        "distance": ["handlePopoverOptionsChange"],
-        "skidding": ["handlePopoverOptionsChange"],
-        "hoist": ["handlePopoverOptionsChange"]
-    }; }
-};
-Dropdown.style = NanoDropdownStyle0;
-
-exports.nano_dropdown = Dropdown;
-
-//# sourceMappingURL=nano-dropdown.cjs.entry.js.map

package/dist/cjs/nano-dropdown.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"nano-dropdown.entry.cjs.js","mappings":"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","names":["transformTag","activeElement","getActiveElement","getNearestTabbableElement","Popover","h","Host"],"sources":["src/components/dropdown/dropdown.scss?tag=nano-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens/layers' as tokens;\n\n:host {\n  /**\n   * @prop --width: width of the dropdown. Defaults to 'auto'\n   * @prop --border: Defaults to #{tokens.$layer-border-style}\n   * @prop --border-radius: Defaults to #{tokens.$layer-bg-color};\n   * @prop --background: Defaults to #{tokens.$layer-bg-color};\n   * @prop --padding: padding of the drop down. Default to '10px 0';\n   * @prop --overflow: `nano-menu` with nested `nav-item` requires hidden overflow. This can be overidden;\n   * @prop --dropdown-z-index: Defaults to #{tokens.$layer-index-dropdown};\n   * @prop --min-width: Defaults to 0;\n   * @prop --box-shadow: #{tokens.$layer-shadow-large};\n   * @prop --max-menu-height: max height of a slotted menu. defaults to 50vh\n   */\n\n  --width: auto;\n  --border: #{tokens.$layer-border-style};\n  --border-radius: #{tokens.$layer-border-radius};\n  --background: #{tokens.$layer-bg-color};\n  --padding: 10px 0;\n  --overflow: auto;\n  --dropdown-z-index: #{tokens.$layer-index-dropdown};\n  --min-width: 0;\n  --box-shadow: #{tokens.$layer-shadow-large};\n  --menu-height: var(--max-menu-height, 50vh);\n\n  display: flex;\n}\n\n.dropdown {\n  position: relative;\n\n  &__trigger {\n    display: block;\n  }\n\n  &__positioner {\n    position: absolute;\n    z-index: var(--dropdown-z-index);\n    min-inline-size: var(--min-width);\n    border: 0;\n    background: none;\n    padding: 0;\n    overflow: visible;\n    color: unset;\n\n    &::backdrop { display: none; }\n\n    &[popover],\n    &:popover-open {\n      inset: unset;\n    }\n\n    @media (width <= 35.9375em) {\n      z-index: 100;\n    }\n  }\n\n  &__panel {\n    padding: var(--padding);\n    background: var(--background);\n    min-inline-size: var(--min-width);\n    inline-size: var(--width);\n    border: var(--border);\n    border-radius: var(--border-radius);\n    color: currentcolor;\n    box-shadow: var(--box-shadow);\n    opacity: 0;\n    transition: 0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;\n    min-block-size: 20px;\n    overflow: var(--overflow);\n    box-sizing: content-box !important;\n\n    &.loading {\n      overflow-y: hidden;\n    }\n\n    &.top {\n      transform: translateY(-20px) translateZ(0);\n    }\n\n    &.bottom {\n      transform: translateY(20px) translateZ(0);\n    }\n\n    .dropdown__positioner.popover-visible & {\n      opacity: 1;\n      transform: translateY(0) translateZ(0);\n    }\n\n    ::slotted(.nano-menu) {\n      max-block-size: var(--menu-height);\n    }\n  }\n\n  &__accessible-title {\n    @include mx.visually-hide();\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  Method,\n  Prop,\n  Watch,\n  Listen,\n  ComponentInterface,\n  EventEmitter,\n  Host,\n} from '@stencil/core';\nimport { getActiveElement } from '../../utils/active-element';\nimport Popover, { PopoverPlacement } from '../../utils/popover';\nimport { getNearestTabbableElement } from '../../utils/tabbable';\nimport { transformTag, h } from '../../utils/renderer';\nimport type { NavItemEventDetail } from '../nav-item/nav-item-interface';\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<HTMLNanoMenuElement>(\n      transformTag('nano-menu')\n    );\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    if (this.open) this.show();\n    else 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: PopoverPlacement = '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({ mutable: true }) hoist = false;\n\n  @Watch('placement')\n  @Watch('distance')\n  @Watch('skidding')\n  @Watch('hoist')\n  handlePopoverOptionsChange() {\n    if (!this.popover) return;\n\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  // this is a massive hack to make stencil expose the `EventEmitter` type in the final build\n  // because the `Dropdown` class is used as a type in `nano-datalist`\n  /** @internal */\n  @Prop() eventType: 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 (\n      this.closeOnSelect &&\n      target.tagName.toLowerCase() === transformTag('nano-menu')\n    )\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    if (typeof this.positioner?.showPopover === 'function') {\n      this.hoist = true;\n      this.popover.show();\n      this.positioner.showPopover();\n    } else {\n      this.popover.show();\n    }\n\n    this.ignoreOpenWatcher = false;\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    setTimeout(() => {\n      if (!this.open && typeof this.positioner?.hidePopover === 'function') {\n        this.positioner.hidePopover();\n      }\n    }, 300);\n  }\n\n  // Private methods\n\n  /**\n   * Decides if the current active element or element\n   * connected to the current event is connected to the Dropdown\n   * @param e\n   * @returns whether the current focus is within 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      if (ddInPath) return ddInPath;\n      return e.composedPath().includes(this.accessibleTrigger);\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    if (this.open) this.hide();\n    else 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 && !accessibleTrigger.getAttribute('aria-haspopup')) {\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    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.tetherTo && !this.trigger) || !this.positioner) return;\n\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    if (this.host.isConnected) this.hide();\n    if (this.popover) this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <Host class=\"nano-dropdown\">\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\n            ref={(el) => (this.positioner = el)}\n            class=\"dropdown__positioner\"\n            popover=\"manual\"\n            id={this.dropdownId + '-positioner'}\n          >\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={\n                this.host.getAttribute('role') === 'group' ? 'group' : 'dialog'\n              }\n              aria-modal={\n                this.host.getAttribute('role') === 'group' ? undefined : 'true'\n              }\n              aria-labelledby={this.dialogTitle ? this.labelId : undefined}\n            >\n              {this.dialogTitle && (\n                <span\n                  id={this.labelId}\n                  class=\"dropdown__accessible-title\"\n                  aria-live={\n                    this.host.getAttribute('role') === 'group'\n                      ? undefined\n                      : 'polite'\n                  }\n                >\n                  {this.dialogTitle}\n                </span>\n              )}\n              <slot />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/nano-field-validator.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"nano-field-validator.entry.cjs.js","mappings":"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","names":["transformTag","createStore","h","Host"],"sources":["src/components/field-validator/field-validator.tsx"],"sourcesContent":["import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  ComponentInterface,\n  State,\n  Watch,\n  Event,\n  EventEmitter,\n  Method,\n  Listen,\n} from '@stencil/core';\nimport { createStore, ObservableMap } from '@stencil/store';\nimport { h, transformTag } from '../../utils/renderer';\nimport type {\n  NanoFormEles,\n  NanoFormEvent,\n  PlainFormEles,\n  PlainFormEvent,\n  ValidationState,\n  ValidatorValueStore,\n} from './field-validator-interface';\n\n/**\n * A toolbox for `nano-...` form fields and form validation.\n * - Easy to add validation across field dependencies - e.g. \"When Field1 contains '123' Field2 must contain '456'\"\n * - Easy access to whole form and individual field validity states\n * - Easy access to form data payload\n * = Access to 2-way, data bound reactive store\n * - Scroll to invalid field on submit\n */\n@Component({\n  tag: 'nano-field-validator',\n  scoped: true,\n})\nexport class FieldValidator implements ComponentInterface {\n  // Internal State\n\n  @Element() host: HTMLNanoFieldValidatorElement;\n  @State() submitted = false;\n  @State() userForm: HTMLFormElement;\n  @Watch('userForm')\n  userFormChange() {\n    if (this.userForm) this.activeForm = this.userForm;\n  }\n\n  private get activeForm() {\n    return this._activeForm;\n  }\n  private set activeForm(form: HTMLFormElement) {\n    // manages event listners on whatever form is used (slotted on created here)\n    if (!form) return;\n\n    if (this._activeForm) {\n      this._activeForm.removeEventListener(\n        'invalid',\n        this.handleFormInvalid,\n        true\n      );\n    }\n    form.addEventListener('invalid', this.handleFormInvalid, true);\n    this._activeForm = form;\n  }\n  private _activeForm: HTMLFormElement;\n  private mo: MutationObserver;\n  private allFields: Array<NanoFormEles | PlainFormEles> = [];\n  private nanoFields: NanoFormEles[];\n  private plainFields: PlainFormEles[];\n  private nanoFieldSelector = `\n    nano-input,\n    nano-select,\n    nano-file-upload,\n    nano-date-input,\n    nano-checkbox\n  `;\n  private hasSetStore = false;\n\n  // annoyingly, whenever we attempt to `checkValidty()` it fires `invalid` events.\n  // this is used to prevent infinite loops / multiple calls\n  private internalValidate = false;\n\n  // Public API\n\n  /** When should the fields perform validation. Will override / sync all nested `nano-...` controls */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submitThenDirty';\n\n  /** Sync up validateOn with all fields */\n  @Watch('validateOn')\n  validateOnChange() {\n    this.nanoFields.forEach((field) => {\n      if (field.tagName.toLowerCase() === transformTag('nano-checkbox')) {\n        const cbg = field.closest<HTMLNanoCheckboxGroupElement>(\n          transformTag('nano-checkbox-group')\n        );\n        if (cbg) cbg.validateOn = this.validateOn;\n      } else {\n        (field as Exclude<NanoFormEles, HTMLNanoCheckboxElement>).validateOn =\n          this.validateOn;\n      }\n    });\n  }\n\n  /** Tries to scroll to the first invalid field on submit */\n  @Prop() scrollToInvalid = true;\n\n  /** Returns true if any nested fields have been changed @readonly */\n  @Prop({ reflect: true })\n  get dirty() {\n    return this._dirty;\n  }\n  @State() _dirty = false;\n\n  /** Returns true if all the nested fields are currently valid @readonly */\n  @Prop({ reflect: true })\n  get valid() {\n    return this._valid;\n  }\n  @State() _valid: boolean;\n\n  /** The current form state as a stencil store. */\n  @Prop() get store(): ObservableMap<ValidatorValueStore> {\n    return this._store;\n  }\n  @State() _store: ObservableMap<ValidatorValueStore>;\n\n  /** The current form payload as a reactive proxy. @readonly */\n  @Prop()\n  get payload() {\n    return this._store?.state;\n  }\n\n  /** Returns true if validation errors will be displayed to the user. @readonly */\n  @Prop()\n  get showValidation() {\n    return (this.validateOn === 'dirty' && this.dirty) || this.submitted;\n  }\n\n  /** Get the current validation state of all form fields. @readonly\n   * ```\n   {\n      fields: NanoFormEles[];\n      valid: boolean;\n      validityMessage: string;\n      dirty: boolean;\n      name: string | number;\n      value: any;\n    }[]\n  ```\n   */\n  @Prop()\n  get validationState(): ValidationState[] {\n    // TODO - migrate nano-fields away from using proprietary methods in a bid to be closer to the spec\n\n    // this is big and ugly.\n    // why? Cos' it must unify checking validity state for both\n    // `nano-...` and plain form fields.\n    const validationState: ValidationState[] = [];\n\n    this.allFields.forEach(async (field) => {\n      const found = validationState.find((v) => v.name === this.getName(field));\n      let pf: PlainFormEles;\n      let nf: NanoFormEles;\n\n      if (found) {\n        if ((field as PlainFormEles).validationMessage) {\n          // non-nano fields\n          pf = field as PlainFormEles;\n          found.validityMessage = pf.validationMessage.length\n            ? pf.validationMessage\n            : found.validityMessage;\n          this.internalValidate = true;\n          if (found.valid && !pf.checkValidity()) found.valid = false;\n          this.internalValidate = false;\n        } else if ((field as NanoFormEles).validityMessage) {\n          // nano-... fields\n          nf = field as NanoFormEles;\n          found.validityMessage = nf.validityMessage.length\n            ? nf.validityMessage\n            : nf.validityMessage;\n          if (found.valid && nf.invalid) found.valid = false;\n        }\n        if (!found.fields.find((f) => f === field)) found.fields.push(field);\n      }\n\n      let valid: boolean;\n      let validityMessage: string;\n\n      if ((field as PlainFormEles).checkValidity) {\n        pf = field as PlainFormEles;\n        this.internalValidate = true;\n        valid = pf.checkValidity();\n        this.internalValidate = false;\n        validityMessage = pf.validationMessage;\n      } else {\n        nf = field as NanoFormEles;\n        valid = !nf.invalid;\n        validityMessage = nf.validityMessage;\n      }\n\n      validationState.push({\n        fields: [field],\n        name: this.getName(field),\n        value: this._store.state[this.getName(field)],\n        dirty: false,\n        valid,\n        validityMessage,\n      });\n    });\n\n    return validationState;\n  }\n\n  /** By default, `nano-field-validator` will also track all native form field elements.\n   * You can add extra web-component form fields to listen to\n   * (as long as they match the standard form field spec) by using the `fieldSelector` prop.\n   */\n  @Prop() extraFieldSelector: string = 'input, select, textarea';\n\n  /** A validation callback method.\n   * @param field - The field name currently being evaluated\n   * @param value - The value of the field currently being evaluated\n   * @param fields - an array of all currently observered form fields and values\n   * @returns field names mapped to an object of status message and validity e.g.\n   * ```js\n   * {field1: {msg: `This is invalid!`}, field2: {msg: `This is valid!`, valid: true}}\n   * ```\n   */\n  @Prop() validation: (\n    field: string,\n    value: string,\n    fields: ValidatorValueStore\n  ) => { [errorMsg: string]: { fields?: string[]; valid?: boolean } };\n\n  /**\n   * Sets the state of the form using an object of key / value pairs.\n   * @param state - the state to load in the store\n   */\n  @Method()\n  async setStore(state: ValidatorValueStore) {\n    this.hasSetStore = true;\n    Object.entries(state).forEach(([key, val]) => {\n      this.store.state[key] = val;\n    });\n  }\n\n  /**\n   * Sets custom validity for all / some form fields.\n   * @param validity - a validity object of `{fieldName: errorString}` pairs.\n   * Set as an empty string to clear the error.\n   * @param scrollToInvalid - whether to scroll to the first invalid field.\n   * If not present, will follow the value set on `scrollToInvalid` prop.\n   * @returns a promise, resolved when all errors are set\n   */\n  @Method()\n  async setCustomValidity(\n    validity: { [key: string]: string },\n    scrollToInvalid?: boolean\n  ) {\n    return await Promise.all(\n      Object.entries(validity).map(async ([key, err]) => {\n        const field = this.allFields.find((f) => this.getName(f) === key);\n        if (field) await this.setFieldError(field, err);\n      })\n    ).finally(() => {\n      this.scrollToFirstInvalid(scrollToInvalid);\n    });\n  }\n\n  /**\n   * Clear all custom validation.\n   * @returns a promise, resolved when all errors are cleared\n   */\n  @Method()\n  async resetValidity() {\n    return await Promise.all(\n      this.allFields.map(async (field) => await this.setFieldError(field, ''))\n    );\n  }\n\n  /**\n   * Scrolls to first invalid form field.\n   * @param force - forces the scroll behaviour (default). Otherwise will use the default set in `scrollToInvalid` prop\n   */\n  @Method()\n  async scrollToFirstInvalid(force = true) {\n    if (!force && !this.scrollToInvalid) return;\n\n    setTimeout(() => {\n      const invalidField = this.validationState.find((f) => !f.valid);\n      if (!invalidField) return;\n      invalidField.fields[0].scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n      });\n    }, 200);\n  }\n\n  /** Fired whenever the payload changes */\n  @Event() nanoPayloadChange: EventEmitter<ValidatorValueStore>;\n\n  /**\n   * Fired on valid form submission.\n   * Note: if you wish to prevent a form from submitting, instead\n   * of using / preventing the native `submit` event, use this event\n   * ```js\n   * ele.addEventListener('nanoSubmit', (e) => {\n   *   e.preventDefault()\n   * })\n   * ```\n   */\n  @Event() nanoSubmit: EventEmitter;\n\n  /** Fire on invalid form submission attempt */\n  @Event() nanoInvalid: EventEmitter;\n\n  // private methods\n\n  @Watch('extraFieldSelector')\n  attachSlotObserver() {\n    if (this.mo) return;\n    const mo = (this.mo = new MutationObserver((_entries) => {\n      const form = this.host.querySelector('form');\n      if (form && form !== this.activeForm) this.activeForm = form;\n      this.setupFields();\n    }));\n    mo.observe(this.host, {\n      childList: true,\n      attributes: true,\n      attributeFilter: ['name'],\n      subtree: true,\n    });\n  }\n\n  /**\n   * During spec tests, mockelement props aren't set - only attributes.\n   * This irons out that kink\n   * @param field\n   * @returns the fields name prop or attr\n   */\n  private getName(field: PlainFormEles | NanoFormEles) {\n    return field.name || field.getAttribute('name');\n  }\n\n  /** Checks for new `nano-...` fields and adds them to our watch array and value store */\n  private setupFields() {\n    let nanoFields = Array.from(\n      this.host.querySelectorAll<NanoFormEles>(this.nanoFieldSelector)\n    );\n\n    let plainFields = Array.from(\n      this.host.querySelectorAll<PlainFormEles>(this.extraFieldSelector)\n    ).filter((e) => !e.closest(this.nanoFieldSelector));\n\n    nanoFields = nanoFields.filter(\n      (f) => !!this.getName(f) && !!this.getName(f).length\n    );\n    plainFields = plainFields.filter(\n      (f) => !!this.getName(f) && !!this.getName(f).length\n    );\n\n    // do we have any currently un-watched fields?\n    if (\n      ![...nanoFields, ...plainFields].filter(\n        (f) => !this.allFields.includes(f)\n      ).length\n    )\n      return;\n\n    // setup the initial store state / refresh on new fields\n    this.nanoFields = nanoFields;\n    this.plainFields = plainFields;\n    this.allFields = [...nanoFields, ...plainFields];\n\n    this.storeToFields(this.allFields);\n\n    this.validateOnChange();\n    this.fieldsToStore(this.allFields, true);\n    this.nanoPayloadChange.emit(this._store.state);\n  }\n\n  private storeToFields(fields: Array<NanoFormEles | PlainFormEles>) {\n    fields.forEach((field) => {\n      const fieldName = this.getName(field);\n      if (\n        !fieldName.length ||\n        typeof this._store.state[fieldName] === 'undefined'\n      )\n        return;\n\n      if (\n        field.tagName.toLowerCase() === transformTag('nano-checkbox') ||\n        ['radio', 'checkbox'].includes((field as HTMLInputElement).type)\n      ) {\n        const cbs = this.allFields.filter(\n          (f) => this.getName(field) === this.getName(f)\n        ) as HTMLNanoCheckboxElement[];\n        if (\n          cbs[0].type === 'radio' ||\n          cbs[0].type === 'segment' ||\n          cbs[0].type === 'segment-pill'\n        ) {\n          // single radio type control\n          cbs.forEach((cb) => {\n            if (this._store.state[fieldName] === cb.value) cb.checked = true;\n            else cb.checked = false;\n          });\n        } else if (Array.isArray(this._store.state[fieldName])) {\n          // multiple checkbox like controls\n          cbs.forEach((cb) => {\n            if (this._store.state[fieldName]?.includes(cb.value))\n              cb.checked = true;\n            else cb.checked = false;\n          });\n        } else {\n          // single checkbox like control\n          cbs.forEach((cb) => {\n            if (this._store.state[fieldName] === cb.value) cb.checked = true;\n            else cb.checked = false;\n          });\n        }\n        return;\n      }\n\n      if (field.tagName.toLowerCase() === transformTag('nano-file-upload')) {\n        const ff = field as HTMLNanoFileUploadElement;\n        // this can only work if the field is empty rn... a one-time deal\n        if (!ff.files?.length) ff.files = this._store.state[fieldName];\n        return;\n      }\n\n      // default\n      field.value = this._store.state[fieldName];\n    });\n  }\n\n  private getValidityTarget(\n    field: PlainFormEles | NanoFormEles | HTMLNanoCheckboxGroupElement\n  ) {\n    let validityTarget = field;\n\n    if (field.tagName.toLowerCase() === transformTag('nano-checkbox')) {\n      // if we have a checkbox-group, set the validation message there\n      const cbg = field.closest<HTMLNanoCheckboxGroupElement>(\n        transformTag('nano-checkbox-group')\n      );\n      validityTarget = cbg || field;\n    }\n\n    return validityTarget;\n  }\n\n  /** Loops through all `nano-...` fields and extracts their values into our store */\n  private fieldsToStore(\n    fields: Array<NanoFormEles | PlainFormEles>,\n    init = false\n  ) {\n    fields.forEach((field) => {\n      const fieldName = this.getName(field);\n      if (!fieldName.length) return;\n\n      if (!!this._store.state[fieldName] && this.hasSetStore && init) {\n        // a new field is being added\n        // but we already have a value for it\n        // via a store that has been actively set\n        // so let's not overwrite it\n        return;\n      }\n\n      if (\n        field.tagName.toLowerCase() === transformTag('nano-checkbox') ||\n        ['radio', 'checkbox'].includes((field as HTMLInputElement).type)\n      ) {\n        const cb = field as HTMLNanoCheckboxElement;\n\n        if (\n          cb.type === 'radio' ||\n          cb.type === 'segment' ||\n          cb.type === 'segment-pill'\n        ) {\n          // radio type control - only one can be checked\n          if (cb.checked) this._store.state[fieldName] = cb.value;\n        } else if (\n          this.allFields.filter(\n            (f) =>\n              this.getName(f) === fieldName &&\n              (f.tagName.toLowerCase() === transformTag('nano-checkbox') ||\n                (f as HTMLInputElement).type === 'checkbox')\n          ).length > 1\n        ) {\n          // multiple checkbox type control\n          const currentArr = Array.isArray(this._store.state[fieldName])\n            ? this._store.state[fieldName]\n            : [];\n          if (cb.checked) {\n            // checked\n            if (!this._store.state[fieldName]?.includes(cb.value)) {\n              this._store.state[fieldName] = [...currentArr, cb.value];\n            }\n          } else {\n            // unchecked\n            this._store.state[fieldName] = currentArr.filter(\n              (v) => v !== cb.value\n            );\n          }\n        } else {\n          // single checkbox - on or off\n          if (cb.checked) this._store.state[fieldName] = cb.value;\n          else this._store.state[fieldName] = '';\n        }\n        return;\n      }\n\n      if (field.tagName.toLowerCase() === transformTag('nano-file-upload')) {\n        const ff = field as HTMLNanoFileUploadElement;\n        if (!this.fileStateEqual(fieldName, ff))\n          this._store.state[fieldName] = ff.files;\n\n        return;\n      }\n\n      // default\n      this._store.state[fieldName] = field.value;\n    });\n  }\n\n  /**\n   * Tries to ascertain whether the current model\n   * value is the same as the `nano-file-upload` value\n   * @param fieldName - the key to access from the data store\n   * @param field - the nano-file-upload field to assess against\n   * @returns true for equal, false for not equal\n   */\n  private fileStateEqual(\n    fieldName: string | number,\n    field: HTMLNanoFileUploadElement\n  ) {\n    return (\n      JSON.stringify(this._store.state[fieldName]) ===\n        JSON.stringify(field.files) ||\n      this._store.state[fieldName] == field.files\n    );\n  }\n\n  /**\n   * Checks for user defined validations\n   * @param key - current key of the data model to validate\n   * @param newVal - the newly set, incoming value to validate\n   */\n  private async validate(key: string | number, newVal: any) {\n    if (!this.validation) return;\n\n    const res = this.validation(key as string, newVal, this._store.state);\n\n    // no nothing - return\n    if (!res) return;\n\n    // stencil public methods are async\n    // so we must coerce our validation\n    // collection loop into a promise\n    await Promise.all(\n      Object.entries(res).map(async ([msg, validityState]) => {\n        return validityState.fields.map(async (fieldName) => {\n          // switch on/off validation messages\n          const field = this.allFields.find(\n            (f) => this.getName(f) === fieldName\n          );\n          const validityTarget = this.getValidityTarget(field);\n\n          if (\n            ((validityTarget as NanoFormEles).validityMessage ||\n              (validityTarget as PlainFormEles).validationMessage) === msg &&\n            validityState.valid\n          ) {\n            // status is now valid - clear the error\n            await this.setFieldError(validityTarget, '');\n          } else if (!validityState.valid) {\n            // status is invalid. Set the error\n            await this.setFieldError(validityTarget, msg);\n          }\n        });\n      })\n    );\n  }\n\n  /** Loops through all store entries and checks custom validation */\n  private async validateAllFields() {\n    // This forces our loop to `await` and finish sequentially ... silly async stencil methods\n    await Object.entries(this._store.state).reduce(\n      async (memo, [key, value]) => {\n        await memo;\n        await this.validate(key, value);\n      },\n      undefined as any\n    );\n  }\n\n  /**\n   * Utility to smooth out setting error messages\n   * (it's a different method on `nano-checkbox` 'cos they don't show errors themselves)\n   * @param field\n   * @param msg\n   */\n  private async setFieldError(\n    field: NanoFormEles | HTMLNanoCheckboxGroupElement | PlainFormEles,\n    msg: string\n  ) {\n    const validityTarget = this.getValidityTarget(field);\n\n    if (validityTarget['showError']) {\n      await (\n        validityTarget as Exclude<NanoFormEles, HTMLNanoCheckboxElement>\n      ).showError(msg);\n    } else if (validityTarget['setError'])\n      await (validityTarget as HTMLNanoCheckboxElement).setError(msg);\n    else (validityTarget as PlainFormEles).setCustomValidity(msg);\n  }\n\n  private submitForm() {\n    const nanoSubmit = this.nanoSubmit.emit();\n    if (nanoSubmit.defaultPrevented) return;\n    this.activeForm.submit();\n  }\n\n  // Event handlers\n\n  /**\n   * Fired whenever store values change and potentially checks validity\n   * @param key - the key of the store that's just changed\n   * @param newVal - the incoming, new value\n   */\n  private handleStoreChange = async (key: string | number, newVal: any) => {\n    const found = this.allFields.find((field) => this.getName(field) === key);\n\n    // field update has come programmatically (not from ui),\n    // so let's update the underlying ui field\n    if (\n      found &&\n      (found.tagName.toLowerCase() === transformTag('nano-checkbox') ||\n        ['radio', 'checkbox'].includes((found as HTMLInputElement).type))\n    ) {\n      // it's a cb - always change.\n      this.storeToFields([found]);\n    } else if (\n      found &&\n      ((found.tagName.toLowerCase() === transformTag('nano-file-upload') &&\n        !this.fileStateEqual(key, found as HTMLNanoFileUploadElement)) ||\n        (found.tagName.toLowerCase() !== transformTag('nano-file-upload') &&\n          found.value !== newVal))\n    ) {\n      // not a cb. Only change if value is different\n      this.storeToFields([found]);\n    }\n\n    if (this.validateOn === 'dirty' && this.dirty) {\n      this.internalValidate = true;\n      await this.validateAllFields();\n      this._valid = this.activeForm.checkValidity();\n      this.internalValidate = false;\n    }\n    this.nanoPayloadChange.emit(this._store.state);\n  };\n\n  /**\n   * Handles nano field value changes and passes to store\n   * @param ev - the incoming change event\n   */\n  @Listen('nanoChange')\n  handleFieldChange(ev: NanoFormEvent) {\n    if (!this.nanoFields?.includes(ev.target)) return;\n    this._dirty = true;\n    this.fieldsToStore([ev.target]);\n  }\n\n  /**\n   * Handles non-nano field value changes and passes to store\n   * @param ev - the incoming change event\n   */\n  @Listen('input')\n  @Listen('change')\n  handlePlainFieldChange(ev: PlainFormEvent) {\n    if (!this.plainFields.includes(ev.target)) return;\n    this.fieldsToStore([ev.target]);\n  }\n\n  /**\n   * Handles default field validation events\n   * @param ev - the invalid event\n   */\n  private handleFormInvalid = async (ev: Event & { target: PlainFormEles }) => {\n    // if it's a non-nano field, we'll let default html5 validation do it's thing\n    if (!this.plainFields.includes(ev.target)) {\n      ev.preventDefault();\n    }\n\n    this._valid = false;\n\n    // whenever `checkValidity` is called, this handler is in-turn called.\n    // this flag is used to stop infinite loops\n    if (this.internalValidate) return;\n\n    // a submit must have happened to if 'submitThenDirty' turn on 'dirty' checking now\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.submitted = true;\n\n    await this.validateAllFields();\n    this.internalValidate = true;\n    this._valid = this.activeForm.checkValidity();\n    this.internalValidate = false;\n\n    // kinda insane...but if we're only validating on submit, then if the form is currently\n    // in an invalid state, when submitting, it will fire an invalid event and not\n    // submit the form. So let's test to make sure it is really invalid, and submit if not\n    if (this.validateOn === 'submit') {\n      if (this._valid) {\n        this.submitForm();\n        return;\n      }\n    }\n\n    this.scrollToFirstInvalid(false);\n    this.nanoInvalid.emit();\n  };\n\n  /**\n   * stops default form submission, checks if valid, then submits manually\n   * @param e - a submit event from the nested form element\n   */\n  @Listen('submit')\n  async handleSubmit(e: Event) {\n    e.preventDefault();\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.submitted = true;\n    await this.validateAllFields();\n\n    this.internalValidate = true;\n    this._valid = this.activeForm.checkValidity();\n    this.internalValidate = false;\n\n    if (!this._valid) {\n      this.scrollToFirstInvalid(false);\n      return;\n    }\n    this.submitForm();\n  }\n\n  connectedCallback(): void {\n    this.userForm = this.host.querySelector('form');\n    this._store = createStore<ValidatorValueStore>({});\n  }\n\n  componentDidLoad() {\n    requestAnimationFrame(() => {\n      this.setupFields();\n      this.attachSlotObserver();\n      this._store.on('set', this.handleStoreChange);\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n    this._store.reset();\n\n    if (this.activeForm)\n      this.activeForm.removeEventListener(\n        'invalid',\n        this.handleFormInvalid,\n        true\n      );\n  }\n\n  render() {\n    return (\n      <Host class=\"nano-field-validator\">\n        {this.userForm && <slot />}\n        {!this.userForm && (\n          <form ref={(f) => (this.activeForm = f)}>\n            <slot />\n          </form>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}