npm - @nanoporetech-digital/components - Versions diffs - 7.6.0 → 7.8.0 - Mend

@nanoporetech-digital/components 7.6.0 → 7.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (680) hide show

package/dist/collection/components/more-less/more-less.js CHANGED Viewed

@@ -1,7 +1,8 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { h, Host, } from "@stencil/core";
+import { Host, } from "@stencil/core";
+import { h } from "../../utils/renderer";
 /**
  * A simple component to show more or less elements.
  *
@@ -61,8 +62,8 @@ export class Rating {
         this.handleShowHideElements();
     }
     render() {
-        return (h(Host, { key: 'f027eeb0a9a1874b4e98686b9e501ddc44d4c632' }, h("slot", { key: '98bf588c101034356091253382ccebdbe67a78f1', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
-            h("div", { key: 'd4748dec7f25dbeb0e9d4cf27a9857dc6411c349', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: 'c5b5d9b781761ece8d917391c132c3768838b6cd', name: "less" }, h("button", { key: '31d16fe52e896736bcc1d9617ad54aa4d5b69f47', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
+        return (h(Host, { key: 'ea8fe47faa76ad680aa1c87865db6c04ff0228b6', class: "nano-more-less" }, h("slot", { key: '69b79b49c00677a08fbcc2143e6efd99520c7ae4', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
+            h("div", { key: '2972c854e94cc04cd41cb8c19afdade3d3decc8b', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: 'b3f7e2cf17d0c447d26cf1de996194910381bc35', name: "less" }, h("button", { key: 'dd079d36070438e93bd9cce9bf914139bb9f6f74', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
             !this.noHideBtn ? (h("div", { style: { display: this.show ? 'contents' : 'none' }, class: "button-wrapper", part: "button-wrapper button-wrapper--more", onClick: (e) => this.handleClick(e) }, h("slot", { name: "more" }, h("button", { part: "button button--more" }, "Show less (-", this.children.length - this.maxToShow, ")")))) : (''),
         ]));
     }

package/dist/collection/components/more-less/more-less.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"more-less.js","sourceRoot":"","sources":["../../../../src/components/more-less/more-less.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,~~EACJ~~,~~CAAC,EAED,~~IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;~~AAEvB~~;;;;;;;;;;;;;GAaG;AAMH,MAAM,OAAO,MAAM;IACN,IAAI,CAA0B;IAEzC,6FAA6F;IACrD,IAAI,GAAG,KAAK,CAAC;IAErD,oEAAoE;IAC5D,gBAAgB,CAAS;IAEjC;sCACkC;IAC1B,SAAS,GAAG,CAAC,CAAC;IAEtB,uCAAuC;IAC/B,SAAS,GAAG,KAAK,CAAC;IAE1B,IAAI,QAAQ;QACV,IAAI,QAAyD,CAAC;QAE9D,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC/D,CAAC;aAAM,CAAC;YACN,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QAChC,CAAC;QACD,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CAChC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,CAClB,CAAC;IACrB,CAAC;IAKD,sBAAsB;QACpB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;YAC/B,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,GAAG,CAAC,KAAK,CAAC,OAAO,KAAK,MAAM,EAAE,CAAC;oBACjC,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;gBACzB,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;oBACxB,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBAC7B,CAAC;qBAAM,CAAC;oBACN,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;gBACzB,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,WAAW,CAAC,EAAc;QAChC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACzB,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAChC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;~~YACH~~,6DAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,GAAI;YAC1D,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC,SAAS,IAAI;gBACzC,4DACE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,EAAE,EACnD,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,qCAAqC,EAC1C,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;oBAEnC,6DAAM,IAAI,EAAC,MAAM;wBACf,+DAAQ,IAAI,EAAC,qBAAqB;;4BACnB,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS;gCAC3C,CACJ,CACH;gBACN,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,WACE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,EAAE,EACnD,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,qCAAqC,EAC1C,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;oBAEnC,YAAM,IAAI,EAAC,MAAM;wBACf,cAAQ,IAAI,EAAC,qBAAqB;;4BACnB,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS;gCAC3C,CACJ,CACH,CACP,CAAC,CAAC,CAAC,CACF,EAAE,CACH;aACF,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Element,\n Prop,\n ~~h,\n~~ ComponentInterface,\n Host,\n Watch,\n} from '@stencil/core';\n\n/*\n A simple component to show more or less elements.\n \n @slot less - a button displayed when all fewer are shown. When clicked will show elements\n * @slot more - a button displayed when all items are shown. When clicked will hide elements\n * @slot - default slot displaying children elements to show or hide\n \n @part button-wrapper - wraps the 'more' / 'less' buttons\n * @part button-wrapper--more - wraps the 'more' button\n * @part button-wrapper--less - wraps the 'less' button\n * @part button - default 'more' / 'less' buttons\n * @part button--more - the default 'more' button\n * @part button--less - the default 'less' button\n /\n@Component({\n tag: 'nano-more-less',\n shadow: true,\n styles: / css / `:host { display: contents; }`,\n})\nexport class Rating implements ComponentInterface {\n @Element() host: HTMLNanoMoreLessElement;\n\n /* The default state. `false` - excess items are hidden. `true` - excess items are shown. /\n @Prop({ reflect: true, mutable: true }) show = false;\n\n /* Optional JS selector to target which elements to hide or show /\n @Prop() childrenSelector: string;\n\n /* The maximum number of items to show when `show` is true.\n * Excess items will be hidden. /\n @Prop() maxToShow = 3;\n\n /* Only show the 'show more' button */\n @Prop() noHideBtn = false;\n\n get children() {\n let children: NodeListOf<Element> \| HTMLCollectionOf<Element>;\n\n if (this.childrenSelector) {\n children = this.host.querySelectorAll(this.childrenSelector);\n } else {\n children = this.host.children;\n }\n return Array.from(children).filter(\n (ele) => !ele.hasAttribute('slot')\n ) as HTMLElement[];\n }\n\n @Watch('maxToShow')\n @Watch('show')\n @Watch('childrenSelector')\n handleShowHideElements() {\n this.children.forEach((ele, i) => {\n if (this.show) {\n if (ele.style.display === 'none') {\n ele.style.display = '';\n }\n } else {\n if (i >= this.maxToShow) {\n ele.style.display = 'none';\n } else {\n ele.style.display = '';\n }\n }\n });\n }\n\n private handleClick(_e: MouseEvent) {\n this.show = !this.show;\n }\n\n connectedCallback() {\n this.handleShowHideElements();\n }\n\n render() {\n return (\n <Host>\n <slot onSlotchange={() => this.handleShowHideElements()} />\n {this.children?.length > this.maxToShow && [\n <div\n style={{ display: this.show ? 'none' : 'contents' }}\n class=\"button-wrapper\"\n part=\"button-wrapper button-wrapper--less\"\n onClick={(e) => this.handleClick(e)}\n >\n <slot name=\"less\">\n <button part=\"button button--less\">\n Show more (+{this.children.length - this.maxToShow})\n </button>\n </slot>\n </div>,\n !this.noHideBtn ? (\n <div\n style={{ display: this.show ? 'contents' : 'none' }}\n class=\"button-wrapper\"\n part=\"button-wrapper button-wrapper--more\"\n onClick={(e) => this.handleClick(e)}\n >\n <slot name=\"more\">\n <button part=\"button button--more\">\n Show less (-{this.children.length - this.maxToShow})\n </button>\n </slot>\n </div>\n ) : (\n ''\n ),\n ]}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"more-less.js","sourceRoot":"","sources":["../../../../src/components/more-less/more-less.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Prop,\n ComponentInterface,\n Host,\n Watch,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\n\n/*\n A simple component to show more or less elements.\n \n @slot less - a button displayed when all fewer are shown. When clicked will show elements\n * @slot more - a button displayed when all items are shown. When clicked will hide elements\n * @slot - default slot displaying children elements to show or hide\n \n @part button-wrapper - wraps the 'more' / 'less' buttons\n * @part button-wrapper--more - wraps the 'more' button\n * @part button-wrapper--less - wraps the 'less' button\n * @part button - default 'more' / 'less' buttons\n * @part button--more - the default 'more' button\n * @part button--less - the default 'less' button\n /\n@Component({\n tag: 'nano-more-less',\n shadow: true,\n styles: / css / `:host { display: contents; }`,\n})\nexport class Rating implements ComponentInterface {\n @Element() host: HTMLNanoMoreLessElement;\n\n /* The default state. `false` - excess items are hidden. `true` - excess items are shown. /\n @Prop({ reflect: true, mutable: true }) show = false;\n\n /* Optional JS selector to target which elements to hide or show /\n @Prop() childrenSelector: string;\n\n /* The maximum number of items to show when `show` is true.\n * Excess items will be hidden. /\n @Prop() maxToShow = 3;\n\n /* Only show the 'show more' button */\n @Prop() noHideBtn = false;\n\n get children() {\n let children: NodeListOf<Element> \| HTMLCollectionOf<Element>;\n\n if (this.childrenSelector) {\n children = this.host.querySelectorAll(this.childrenSelector);\n } else {\n children = this.host.children;\n }\n return Array.from(children).filter(\n (ele) => !ele.hasAttribute('slot')\n ) as HTMLElement[];\n }\n\n @Watch('maxToShow')\n @Watch('show')\n @Watch('childrenSelector')\n handleShowHideElements() {\n this.children.forEach((ele, i) => {\n if (this.show) {\n if (ele.style.display === 'none') {\n ele.style.display = '';\n }\n } else {\n if (i >= this.maxToShow) {\n ele.style.display = 'none';\n } else {\n ele.style.display = '';\n }\n }\n });\n }\n\n private handleClick(_e: MouseEvent) {\n this.show = !this.show;\n }\n\n connectedCallback() {\n this.handleShowHideElements();\n }\n\n render() {\n return (\n <Host class=\"nano-more-less\">\n <slot onSlotchange={() => this.handleShowHideElements()} />\n {this.children?.length > this.maxToShow && [\n <div\n style={{ display: this.show ? 'none' : 'contents' }}\n class=\"button-wrapper\"\n part=\"button-wrapper button-wrapper--less\"\n onClick={(e) => this.handleClick(e)}\n >\n <slot name=\"less\">\n <button part=\"button button--less\">\n Show more (+{this.children.length - this.maxToShow})\n </button>\n </slot>\n </div>,\n !this.noHideBtn ? (\n <div\n style={{ display: this.show ? 'contents' : 'none' }}\n class=\"button-wrapper\"\n part=\"button-wrapper button-wrapper--more\"\n onClick={(e) => this.handleClick(e)}\n >\n <slot name=\"more\">\n <button part=\"button button--more\">\n Show less (-{this.children.length - this.maxToShow})\n </button>\n </slot>\n </div>\n ) : (\n ''\n ),\n ]}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/nav-item/nav-item.css CHANGED Viewed

@@ -71,16 +71,16 @@
   line-height: inherit;
   outline: none !important;
 }
-:host ::slotted(nano-icon[slot=icon-start]) {
+:host ::slotted(.nano-icon[slot=icon-start]) {
   padding-inline-end: var(--padding-end);
 }
-:host ::slotted(nano-icon[slot=icon-end]) {
+:host ::slotted(.nano-icon[slot=icon-end]) {
   padding-inline-start: var(--padding-start);
 }
-:host .link ::slotted(nano-icon[slot=icon-start]) {
+:host .link ::slotted(.nano-icon[slot=icon-start]) {
   padding-inline: var(--padding-start) 0;
 }
-:host .link ::slotted(nano-icon[slot=icon-end]) {
+:host .link ::slotted(.nano-icon[slot=icon-end]) {
   padding-inline: 0 var(--padding-end);
 }
 :host .link,
@@ -203,19 +203,19 @@
   transition: opacity 0.3s ease, transform 0.3s ease;
 }
-:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]) {
+:host(.nano-global-nav-menu) ::slotted(.nano-icon[slot=icon-start]) {
   padding-inline: 0 var(--padding-end);
   padding-block: 0;
 }
-:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]) {
+:host(.nano-global-nav-menu) ::slotted(.nano-icon[slot=icon-end]) {
   padding-inline: 0 var(--padding-end);
   padding-block: 0;
   font-size: 10px;
   flex: 0 0 10px;
   pointer-events: none;
 }
-:host(.nano-global-nav-menu) button ::slotted(nano-icon[slot=icon-end]),
-:host(.nano-global-nav-menu) a ::slotted(nano-icon[slot=icon-end]) {
+:host(.nano-global-nav-menu) button ::slotted(.nano-icon[slot=icon-end]),
+:host(.nano-global-nav-menu) a ::slotted(.nano-icon[slot=icon-end]) {
   padding: 0;
 }
@@ -247,11 +247,11 @@
 :host(.nano-global-nav-bar) .text {
   flex: 1 0 auto;
 }
-:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]) {
+:host(.nano-global-nav-bar) ::slotted(.nano-icon[slot=icon-end]) {
   margin-inline: var(--padding-end) 0;
   margin-block: 0;
 }
-:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]) {
+:host(.nano-global-nav-bar) ::slotted(.nano-icon[slot=icon-start]) {
   margin-inline: 0 var(--padding-start);
   margin-block: 0;
 }
@@ -323,14 +323,14 @@
   min-inline-size: 130px;
   inline-size: 130px;
 }
-:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]) {
+:host(.nano-menu-drawer) ::slotted(.nano-icon[slot=icon-start]) {
   padding-inline: 0 var(--padding-end);
   padding-block: 0;
   font-size: var(--icon-size);
   inline-size: var(--icon-size);
   flex: 0 0 var(--icon-size);
 }
-:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]) {
+:host(.nano-menu-drawer) ::slotted(.nano-icon[slot=icon-end]) {
   padding: 0 var(--padding-end) 0 0;
   font-size: 10px;
   flex: 0 0 20px;

package/dist/collection/components/nav-item/nav-item.js CHANGED Viewed

@@ -1,10 +1,11 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { h, Host, } from "@stencil/core";
+import { Host, } from "@stencil/core";
 import { getSiblings, getDirectChildren } from "../../utils/dom";
 import { displayTransition } from "../../utils/transitions";
 import { getTabbableElements } from "../../utils/tabbable";
+import { h, transformTag } from "../../utils/renderer";
 /**
  * Nav items to be used with the various nav items.
  * [Globla-Nav](/story/compounds-global-nav)
@@ -270,9 +271,9 @@ export class NavItem {
         }
         this.isInGlobalNav = false;
         this.isInMenuDrawer = false;
-        this.globalNavEle = this.el.closest('nano-global-nav');
-        this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');
-        this.isInMenu = !!this.el.closest('nano-menu');
+        this.globalNavEle = this.el.closest(transformTag('nano-global-nav'));
+        this.isInMenuDrawer = !!this.el.closest(transformTag('nano-menu-drawer'));
+        this.isInMenu = !!this.el.closest(transformTag('nano-menu'));
         this.isInGlobalNav =
             this.el.parentElement === this.globalNavEle ||
                 !!this.el.closest('.global-nav');
@@ -286,7 +287,7 @@ export class NavItem {
         this.btn.removeEventListener('blur', this.handleHostBlur);
     }
     render() {
-        return (h(Host, { key: '0eb79d2a46a486734e160a8edec10c5a093c7abd', class: {
+        return (h(Host, { key: '5919fe6851a8132a0da2c592c6adf977113c3983', class: {
                 'has-secondary': this.hasSecondarySlot,
                 'secondary-open': this.open,
                 selected: this.selected,
@@ -295,15 +296,16 @@ export class NavItem {
                 'nano-global-nav': this.isInGlobalNav,
                 'nano-menu-drawer': this.isInMenuDrawer,
                 'nano-menu': this.isInMenu,
-            }, onBlur: this.handleHostBlur, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onClick: this.handleHostClick, role: this.el.closest('[role="menu"]') ? 'menuitem' : undefined }, h("div", { key: 'c0ffc411df072d6b77c70f2ccfaf514da5815d4e', class: {
+                'nano-nav-item': true,
+            }, onBlur: this.handleHostBlur, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onClick: this.handleHostClick, role: this.el.closest('[role="menu"]') ? 'menuitem' : undefined }, h("div", { key: 'a05002c6eae1e2107453b02f91f6d7467744bc94', class: {
                 'nav-item': true,
                 'secondary-open': this.open,
                 selected: this.selected,
-            }, part: "ctrl-wrapper" }, this.href && !this.hasAnchorEle && !this.disabled && (h("a", { key: 'a1fc238af0db4cf94b0580148977c85c72f03dc2', part: "ctrl ctrl--anchor", target: this.target, ref: (a) => (this.btn = a), href: this.href, onFocus: this.handleFocus, class: {
+            }, part: "ctrl-wrapper" }, this.href && !this.hasAnchorEle && !this.disabled && (h("a", { key: '7ee0a4a54692664dd7b9d1f9e3d20215542929b3', part: "ctrl ctrl--anchor", target: this.target, ref: (a) => (this.btn = a), href: this.href, onFocus: this.handleFocus, class: {
                 notification: this.notification,
-            } }, h("slot", { key: 'ad389bf7d8b2d87a34b38279bc424ad328449535', name: "icon-start" }), h("span", { key: '30cf7490ffba9f5f8b405d39064782dd95ebf3ed', class: "text" }, h("slot", { key: 'f22ec808feb97fe8f5440098a19ffd6e2da410c6' })), h("slot", { key: '203a30b302f86cc60bcf7af98121e529855055c5', name: "icon-end" }))), ((!this.hasAnchorEle && !this.href) || this.disabled) && (h("button", { key: '7120168b5eb9998ac1c366bab06599feea55ff2b', part: "ctrl ctrl--button", ref: (btn) => (this.btn = btn), onClick: this.handleClick, onFocus: this.handleFocus, disabled: this.disabled, class: {
+            } }, h("slot", { key: '7795fd5db028cd67ba1511619a5be68dc1f3ed51', name: "icon-start" }), h("span", { key: 'e5373722117ca7adc74c0dc59fca8e20f6503099', class: "text" }, h("slot", { key: 'e1e1ebb8b1b18245fb1fff5795ba8c31c967d399' })), h("slot", { key: '63dc5d008a47f44c292ac17bb061944f488b176e', name: "icon-end" }))), ((!this.hasAnchorEle && !this.href) || this.disabled) && (h("button", { key: 'cd84e3be0022646f164e52663b4b1266c08d582f', part: "ctrl ctrl--button", ref: (btn) => (this.btn = btn), onClick: this.handleClick, onFocus: this.handleFocus, disabled: this.disabled, class: {
                 notification: this.notification,
-            } }, h("slot", { key: '28ae44862a415646ae791f11138940bd8b6e0821', name: "icon-start" }), h("span", { key: '3408306940d7bce6981535384cd6d796c7b7b1e5', class: "text" }, h("slot", { key: 'b212e80d2851e5d70b0062d0532ab58c53ab851b' })), h("slot", { key: '46a2c5b43170561ec867b399dfa708d73d4e8f55', name: "icon-end" }))), this.hasAnchorEle && !this.disabled && (h("div", { key: 'dc5d755ddad02332a6640fd2f9962c8d4e966b17', class: "link" }, h("slot", { key: 'aa2107c17ad7da11eacc24d1970e882870a93411', name: "icon-start" }), h("slot", { key: '37b90820bd80b8378baec066b9ee5f4cec40d03c' }), h("slot", { key: '32290ce9717eef4484ecc2e98be2fb5677ba7a2b', name: "icon-end" }))), this.hasSecondarySlot && !this.disabled && (h("div", { key: 'a1027743f1fc4ea6fe633af562f5a1491e3a8457', class: "secondary-menu", ref: (div) => (this.secondaryDiv = div), tabIndex: -1 }, h("div", { key: '5077b6d0af68b1bd44b0a656462475868036f92d', class: "secondary-menu-content", part: "secondary-wrapper" }, h("slot", { key: 'be14db10c9ea0279fde3363672084d7d44c95915', name: "secondary" })), h("div", { key: '36cf6c406d33027b305914c3efc2da8749dc4c15', class: "secondary-menu-mask", onClick: this.closeSecondary, part: "secondary-mask" }))))));
+            } }, h("slot", { key: '9ae194d22d839cf97257c01b1fca424bb4b8e6d1', name: "icon-start" }), h("span", { key: 'eff83bc860b026e62a57b4eede50913d65eabf06', class: "text" }, h("slot", { key: '41996ab72195124b483872ec231a5ca74fc73f9e' })), h("slot", { key: '1ef36027a860dfcf86e0f9f7c90ec49053fad9ff', name: "icon-end" }))), this.hasAnchorEle && !this.disabled && (h("div", { key: '5c9ab8780e84391ef3b2b1350a8b89e7343b635a', class: "link" }, h("slot", { key: 'a673392b8038993b07c9bcff7312ca63ce077738', name: "icon-start" }), h("slot", { key: '7678cd1e024dc47694849ef3fd2ab89138857675' }), h("slot", { key: '15cedad4ab1d11c4fc0ce7d1867db7bfd59cccd3', name: "icon-end" }))), this.hasSecondarySlot && !this.disabled && (h("div", { key: '8c274fc1b47d8365321105ed13233abaa77bf408', class: "secondary-menu", ref: (div) => (this.secondaryDiv = div), tabIndex: -1 }, h("div", { key: 'f25ebc76515bdce5a8f04119da028b11acc0c9df', class: "secondary-menu-content", part: "secondary-wrapper" }, h("slot", { key: '8d38f82ab2ebb96ec60d07716309ebc2b45d8f3b', name: "secondary" })), h("div", { key: '07404964bfdce1b0ed694308524f9eef30454efa', class: "secondary-menu-mask", onClick: this.closeSecondary, part: "secondary-mask" }))))));
     }
     static get is() { return "nano-nav-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/nav-item/nav-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nav-item.js","sourceRoot":"","sources":["../../../../src/components/nav-item/nav-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Host,\n Element,\n Prop,\n Watch,\n EventEmitter,\n Event,\n State,\n Method,\n ComponentInterface,\n Listen,\n} from '@stencil/core';\nimport { getSiblings, getDirectChildren } from '../../utils/dom';\nimport { displayTransition } from '../../utils/transitions';\nimport { getTabbableElements } from '../../utils/tabbable';\nimport { NavItemEventDetail } from './nav-item-interface';\n\n/*\n Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n \n @slot icon-start - an icon at the start of the main control\n * @slot icon-end - an icon at the end of the main control\n * @slot secondary - a content panel in which you can place any html to display on control click\n * @slot - use the default slot for either `<a>` or text (if constructing a secondary content panel or using `href` directly)\n * @part ctrl - the controlling `<a>` or `<button>` element\n * @part ctrl--button - the controlling `<button>` element\n * @part ctrl--anchor - the controlling <a> element\n * @part ctrl-wrapper - the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)\n * @part secondary-wrapper - the div surrounding slotted secondary content\n * @part secondary-mask - the div that is added when secondary content is shown\n /\n@Component({\n tag: 'nano-nav-item',\n styleUrl: 'nav-item.scss',\n shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n private hasSecondarySlot: boolean = false;\n private btn: HTMLButtonElement \| HTMLAnchorElement;\n private fromHover: boolean;\n private animating: boolean = false;\n private waitHide: number;\n private waitShow: number;\n private globalNavEle?: HTMLNanoGlobalNavElement;\n private secondaryDiv: HTMLDivElement;\n\n @State() hasAnchorEle: boolean = false;\n @State() didOpen: boolean = false;\n @State() isInGlobalNav: boolean = false;\n @State() isInMenuDrawer: boolean = false;\n @State() isInMenu: boolean = false;\n @State() hasFocus: boolean = false;\n @Element() private el: HTMLNanoNavItemElement;\n\n /\n Href to link to\n /\n @Prop({ mutable: true }) href: string = null;\n\n /\n Target to use for links\n /\n @Prop() target: '_self' \| '_blank' \| '_parent' \| '_top' = '_self';\n\n /\n Disable the nav item\n /\n @Prop() disabled: boolean = false;\n\n /\n Whether a secondary menu should be or is currently open\n /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /\n Whether this menu item is currently 'selected'\n /\n @Prop({ reflect: true }) selected: boolean = false;\n\n /\n Screen pixel width to activate the secondary menu\n /\n @Prop() secondaryActiveWidth: number = 0;\n\n /\n Secondary fallback function for when the secondary menu is no longer active.\n /\n @Prop() secondaryFallback = () => {};\n\n /\n Whether secondary menus should close on blur\n /\n @Prop() closeOnBlur: boolean = true;\n\n /\n Will show an indicator badge - only when placed in a nano-menu-draw\n /\n @Prop() notification: boolean = false;\n\n /\n Emitted when the nav item closes it's secondary navigation.\n /\n @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item opens it's secondary navigation.\n /\n @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item is about to open it's secondary navigation.\n /\n @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item is about to close it's secondary navigation.\n /\n @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item loses focus.\n /\n @Event() nanoBlur!: EventEmitter<void>;\n\n /\n Emitted when the nav item has focus.\n /\n @Event() nanoFocus!: EventEmitter<void>;\n\n /\n Sets focus on the first button or anchor present. Use this method instead of the global\n * `element.focus()`.\n /\n @Method()\n async setFocus() {\n if (!this.btn) return;\n this.btn.focus();\n }\n\n /\n Public open watcher\n /\n @Watch('open')\n openChange() {\n if (this.open) this.openSecondary();\n else this.closeSecondary();\n }\n\n /\n Internal open watcher\n /\n @Watch('didOpen')\n didOpenChange() {\n if (!this.hasSecondarySlot) return;\n\n if (!this.didOpen) {\n / the secondadry panel is not closing via hover,\n remove blur events, add focus back to originating button /\n setTimeout(() => {\n if (\n !this.fromHover &&\n (!document.activeElement \|\| document.activeElement === document.body)\n )\n this.btn.focus({ preventScroll: true });\n this.el.tabIndex = null;\n this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n }, 50);\n } else {\n / the secondary panel is not opening via hover,\n scroll content into view, focus on it and add blur events */\n if (!this.fromHover) {\n const panelIO = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].boundingClientRect.top < 0) {\n this.secondaryDiv.scrollIntoView({\n behavior: 'smooth',\n });\n }\n panelIO.disconnect();\n },\n { threshold: 1 }\n );\n panelIO.observe(this.secondaryDiv);\n this.secondaryDiv.focus({ preventScroll: true });\n\n const focusableChild = getTabbableElements(this.secondaryDiv, true);\n if (focusableChild[0]) focusableChild[0].focus();\n\n this.el.tabIndex = -1;\n this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n }\n }\n }\n\n @Listen('click', { target: 'body' })\n @Listen('keyup', { target: 'body' })\n handleClose(e: MouseEvent \| KeyboardEvent) {\n if (!this.didOpen \|\| !this.hasSecondarySlot \|\| !this.closeOnBlur) return;\n if (!e.composedPath().some((el) => el === this.secondaryDiv))\n this.toggleSecondary();\n }\n\n private closeSecondary = async () => {\n if (!this.hasSecondarySlot \|\| !this.didOpen) return;\n this.open = false;\n await displayTransition(this.secondaryDiv, {\n className: 'open',\n show: false,\n });\n this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n this.didOpen = false;\n };\n\n private openSecondary = async () => {\n if (window.innerWidth < this.secondaryActiveWidth) {\n this.secondaryFallback.call(this);\n return;\n }\n\n if (!this.hasSecondarySlot \|\| this.didOpen) return;\n this.open = true;\n await displayTransition(this.secondaryDiv, {\n className: 'open',\n show: true,\n });\n this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n this.didOpen = true;\n };\n\n private toggleSecondary = () => {\n if (!this.hasSecondarySlot) return;\n if (this.didOpen) this.closeSecondary();\n else this.openSecondary();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n // opens secondary panel when activated via hover\n if (this.href && !this.animating && this.hasSecondarySlot)\n this.openSecondary();\n this.nanoFocus.emit();\n };\n\n private handleHostBlur = () => {\n if (this.animating) return;\n\n // tab index is added to host when secondary panel opens\n // to return focus after secondary panel closes. Remove now if it was added\n this.el.removeAttribute('tabindex');\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n // direct host clicks to internal button\n private handleHostClick = (ev: MouseEvent) => {\n if (!this.hasAnchorEle) return;\n const foundlink = (ev.target as HTMLElement).closest('a, button');\n if (!foundlink) this.btn.click();\n };\n\n // handles secondary menu hover behaviour.\n private handleMouseEnter = async () => {\n if (\n !this.href \|\|\n this.animating \|\|\n !this.hasSecondarySlot \|\|\n (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n )\n return;\n\n // if there are sibling secondary panels currently open,\n // we need to wait before opening otherwise we get unwanted overlapping\n let timeToWait = 0;\n if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n timeToWait = 300;\n\n clearTimeout(this.waitHide);\n this.fromHover = true;\n this.animating = true;\n this.waitShow = window.setTimeout(\n async () => await this.openSecondary(),\n timeToWait\n );\n this.animating = false;\n };\n\n // handles secondary menu hover-out behaviour.\n private handleMouseLeave = () => {\n if (!this.href) return;\n clearTimeout(this.waitShow);\n this.fromHover = true;\n this.animating = true;\n\n // prevent closing immediately - makes navigating to items within more forgiving\n this.waitHide = window.setTimeout(\n async () => await this.closeSecondary(),\n 300\n );\n this.animating = false;\n };\n\n private handleClick = () => {\n this.fromHover = false;\n if (this.hasSecondarySlot) this.toggleSecondary();\n };\n\n connectedCallback() {\n const secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n this.hasSecondarySlot = !!secondaryEle;\n\n const link = getDirectChildren<HTMLAnchorElement \| HTMLButtonElement>(\n this.el,\n 'a, button'\n )[0];\n this.hasAnchorEle = !!link;\n\n if (link) {\n this.href = (link as HTMLAnchorElement).href\n ? (link as HTMLAnchorElement).href\n : null;\n this.btn = link;\n if (this.hasSecondarySlot)\n this.btn.addEventListener('click', this.toggleSecondary);\n\n this.btn.addEventListener('focus', this.handleFocus);\n this.btn.addEventListener('blur', this.handleHostBlur);\n }\n\n this.isInGlobalNav = false;\n this.isInMenuDrawer = false;\n this.globalNavEle = this.el.closest('nano-global-nav');\n\n this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');\n this.isInMenu = !!this.el.closest('nano-menu');\n this.isInGlobalNav =\n this.el.parentElement === this.globalNavEle \|\|\n !!this.el.closest('.global-nav');\n }\n\n componentDidLoad() {\n this.openChange();\n }\n\n disconnectedCallback(): void {\n this.btn.removeEventListener('click', this.toggleSecondary);\n this.btn.removeEventListener('focus', this.handleFocus);\n this.btn.removeEventListener('blur', this.handleHostBlur);\n }\n\n render() {\n return (\n <Host\n class={{\n 'has-secondary': this.hasSecondarySlot,\n 'secondary-open': this.open,\n selected: this.selected,\n 'has-focus': this.hasFocus,\n disabled: this.disabled,\n 'nano-global-nav': this.isInGlobalNav,\n 'nano-menu-drawer': this.isInMenuDrawer,\n 'nano-menu': this.isInMenu,\n }}\n onBlur={this.handleHostBlur}\n dir={this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onClick={this.handleHostClick}\n role={this.el.closest('[role=\"menu\"]') ? 'menuitem' : undefined}\n >\n <div\n class={{\n 'nav-item': true,\n 'secondary-open': this.open,\n selected: this.selected,\n }}\n part=\"ctrl-wrapper\"\n >\n {this.href && !this.hasAnchorEle && !this.disabled && (\n <a\n part=\"ctrl ctrl--anchor\"\n target={this.target}\n ref={(a) => (this.btn = a)}\n href={this.href}\n onFocus={this.handleFocus}\n class={{\n notification: this.notification,\n }}\n >\n <slot name=\"icon-start\" />\n <span class=\"text\">\n <slot />\n </span>\n <slot name=\"icon-end\" />\n </a>\n )}\n {((!this.hasAnchorEle && !this.href) \|\| this.disabled) && (\n <button\n part=\"ctrl ctrl--button\"\n ref={(btn) => (this.btn = btn)}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n disabled={this.disabled}\n class={{\n notification: this.notification,\n }}\n >\n <slot name=\"icon-start\" />\n <span class=\"text\">\n <slot />\n </span>\n <slot name=\"icon-end\" />\n </button>\n )}\n {this.hasAnchorEle && !this.disabled && (\n <div class=\"link\">\n <slot name=\"icon-start\" />\n <slot />\n <slot name=\"icon-end\" />\n </div>\n )}\n {this.hasSecondarySlot && !this.disabled && (\n <div\n class=\"secondary-menu\"\n ref={(div) => (this.secondaryDiv = div)}\n tabIndex={-1}\n >\n <div class=\"secondary-menu-content\" part=\"secondary-wrapper\">\n <slot name=\"secondary\" />\n </div>\n <div\n class=\"secondary-menu-mask\"\n onClick={this.closeSecondary}\n part=\"secondary-mask\"\n ></div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"nav-item.js","sourceRoot":"","sources":["../../../../src/components/nav-item/nav-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,KAAK,EAEL,KAAK,EACL,KAAK,EACL,MAAM,EAEN,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,CAAC,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGvD;;;;;;;;;;;;;;;;GAgBG;AAMH,MAAM,OAAO,OAAO;IACV,gBAAgB,GAAY,KAAK,CAAC;IAClC,GAAG,CAAwC;IAC3C,SAAS,CAAU;IACnB,SAAS,GAAY,KAAK,CAAC;IAC3B,QAAQ,CAAS;IACjB,QAAQ,CAAS;IACjB,YAAY,CAA4B;IACxC,YAAY,CAAiB;IAE5B,YAAY,GAAY,KAAK,CAAC;IAC9B,OAAO,GAAY,KAAK,CAAC;IACzB,aAAa,GAAY,KAAK,CAAC;IAC/B,cAAc,GAAY,KAAK,CAAC;IAChC,QAAQ,GAAY,KAAK,CAAC;IAC1B,QAAQ,GAAY,KAAK,CAAC;IAChB,EAAE,CAAyB;IAE9C;;OAEG;IACsB,IAAI,GAAW,IAAI,CAAC;IAE7C;;OAEG;IACK,MAAM,GAA4C,OAAO,CAAC;IAElE;;OAEG;IACK,QAAQ,GAAY,KAAK,CAAC;IAElC;;OAEG;IACqC,IAAI,GAAY,KAAK,CAAC;IAE9D;;OAEG;IACsB,QAAQ,GAAY,KAAK,CAAC;IAEnD;;OAEG;IACK,oBAAoB,GAAW,CAAC,CAAC;IAEzC;;OAEG;IACK,iBAAiB,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;IAErC;;OAEG;IACK,WAAW,GAAY,IAAI,CAAC;IAEpC;;OAEG;IACK,YAAY,GAAY,KAAK,CAAC;IAEtC;;OAEG;IACM,SAAS,CAAoC;IAEtD;;OAEG;IACM,QAAQ,CAAoC;IAErD;;OAEG;IACM,WAAW,CAAoC;IAExD;;OAEG;IACM,WAAW,CAAoC;IAExD;;OAEG;IACM,QAAQ,CAAsB;IAEvC;;OAEG;IACM,SAAS,CAAsB;IAExC;;;OAGG;IAEH,KAAK,CAAC,QAAQ;QACZ,IAAI,CAAC,IAAI,CAAC,GAAG;YAAE,OAAO;QACtB,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC;IACnB,CAAC;IAED;;OAEG;IAEH,UAAU;QACR,IAAI,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,aAAa,EAAE,CAAC;;YAC/B,IAAI,CAAC,cAAc,EAAE,CAAC;IAC7B,CAAC;IAED;;OAEG;IAEH,aAAa;QACX,IAAI,CAAC,IAAI,CAAC,gBAAgB;YAAE,OAAO;QAEnC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB;uEAC2D;YAC3D,UAAU,CAAC,GAAG,EAAE;gBACd,IACE,CAAC,IAAI,CAAC,SAAS;oBACf,CAAC,CAAC,QAAQ,CAAC,aAAa,IAAI,QAAQ,CAAC,aAAa,KAAK,QAAQ,CAAC,IAAI,CAAC;oBAErE,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;gBAC1C,IAAI,CAAC,EAAE,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACxB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;YAC5D,CAAC,EAAE,EAAE,CAAC,CAAC;QACT,CAAC;aAAM,CAAC;YACN;wEAC4D;YAC5D,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;gBACpB,MAAM,OAAO,GAAG,IAAK,MAAc,CAAC,oBAAoB,CACtD,CAAC,IAAiC,EAAE,EAAE;oBACpC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,GAAG,GAAG,CAAC,EAAE,CAAC;wBACvC,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC;4BAC/B,QAAQ,EAAE,QAAQ;yBACnB,CAAC,CAAC;oBACL,CAAC;oBACD,OAAO,CAAC,UAAU,EAAE,CAAC;gBACvB,CAAC,EACD,EAAE,SAAS,EAAE,CAAC,EAAE,CACjB,CAAC;gBACF,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;gBACnC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;gBAEjD,MAAM,cAAc,GAAG,mBAAmB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;gBACpE,IAAI,cAAc,CAAC,CAAC,CAAC;oBAAE,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;gBAEjD,IAAI,CAAC,EAAE,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;gBACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;YAC3D,CAAC;QACH,CAAC;IACH,CAAC;IAID,WAAW,CAAC,CAA6B;QACvC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;QACzE,IAAI,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY,CAAC;YAC1D,IAAI,CAAC,eAAe,EAAE,CAAC;IAC3B,CAAC;IAEO,cAAc,GAAG,KAAK,IAAI,EAAE;QAClC,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO;QACpD,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,MAAM,iBAAiB,CAAC,IAAI,CAAC,YAAY,EAAE;YACzC,SAAS,EAAE,MAAM;YACjB,IAAI,EAAE,KAAK;SACZ,CAAC,CAAC;QACH,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;QAC5D,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACvB,CAAC,CAAC;IAEM,aAAa,GAAG,KAAK,IAAI,EAAE;QACjC,IAAI,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAClD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAClC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO;QACnD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,MAAM,iBAAiB,CAAC,IAAI,CAAC,YAAY,EAAE;YACzC,SAAS,EAAE,MAAM;YACjB,IAAI,EAAE,IAAI;SACX,CAAC,CAAC;QACH,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;QAC5D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC,CAAC;IAEM,eAAe,GAAG,GAAG,EAAE;QAC7B,IAAI,CAAC,IAAI,CAAC,gBAAgB;YAAE,OAAO;QACnC,IAAI,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,cAAc,EAAE,CAAC;;YACnC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC,CAAC;IAEM,WAAW,GAAG,GAAG,EAAE;QACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,iDAAiD;QACjD,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,gBAAgB;YACvD,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;IACxB,CAAC,CAAC;IAEM,cAAc,GAAG,GAAG,EAAE;QAC5B,IAAI,IAAI,CAAC,SAAS;YAAE,OAAO;QAE3B,wDAAwD;QACxD,2EAA2E;QAC3E,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QACpC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC,CAAC;IAEF,wCAAwC;IAChC,eAAe,GAAG,CAAC,EAAc,EAAE,EAAE;QAC3C,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,OAAO;QAC/B,MAAM,SAAS,GAAI,EAAE,CAAC,MAAsB,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QAClE,IAAI,CAAC,SAAS;YAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC;IACnC,CAAC,CAAC;IAEF,0CAA0C;IAClC,gBAAgB,GAAG,KAAK,IAAI,EAAE;QACpC,IACE,CAAC,IAAI,CAAC,IAAI;YACV,IAAI,CAAC,SAAS;YACd,CAAC,IAAI,CAAC,gBAAgB;YACtB,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YAErE,OAAO;QAET,wDAAwD;QACxD,uEAAuE;QACvE,IAAI,UAAU,GAAG,CAAC,CAAC;QACnB,IAAI,WAAW,CAAC,IAAI,CAAC,EAAE,EAAE,+BAA+B,CAAC,CAAC,MAAM;YAC9D,UAAU,GAAG,GAAG,CAAC;QAEnB,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC5B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,CAC/B,KAAK,IAAI,EAAE,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,EACtC,UAAU,CACX,CAAC;QACF,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC,CAAC;IAEF,8CAA8C;IACtC,gBAAgB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO;QACvB,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC5B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QAEtB,gFAAgF;QAChF,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,CAC/B,KAAK,IAAI,EAAE,CAAC,MAAM,IAAI,CAAC,cAAc,EAAE,EACvC,GAAG,CACJ,CAAC;QACF,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC,CAAC;IAEM,WAAW,GAAG,GAAG,EAAE;QACzB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,IAAI,CAAC,gBAAgB;YAAE,IAAI,CAAC,eAAe,EAAE,CAAC;IACpD,CAAC,CAAC;IAEF,iBAAiB;QACf,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QACjE,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,YAAY,CAAC;QAEvC,MAAM,IAAI,GAAG,iBAAiB,CAC5B,IAAI,CAAC,EAAE,EACP,WAAW,CACZ,CAAC,CAAC,CAAC,CAAC;QACL,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,IAAI,CAAC;QAE3B,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,IAAI,GAAI,IAA0B,CAAC,IAAI;gBAC1C,CAAC,CAAE,IAA0B,CAAC,IAAI;gBAClC,CAAC,CAAC,IAAI,CAAC;YACT,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;YAChB,IAAI,IAAI,CAAC,gBAAgB;gBACvB,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YAE3D,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;YACrD,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QACzD,CAAC;QAED,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC5B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC,CAAC;QAErE,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,CAAC;QAC1E,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC;QAC7D,IAAI,CAAC,aAAa;YAChB,IAAI,CAAC,EAAE,CAAC,aAAa,KAAK,IAAI,CAAC,YAAY;gBAC3C,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IACrC,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAC5D,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACxD,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAC5D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI,CAAC,gBAAgB;gBACtC,gBAAgB,EAAE,IAAI,CAAC,IAAI;gBAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,WAAW,EAAE,IAAI,CAAC,QAAQ;gBAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,iBAAiB,EAAE,IAAI,CAAC,aAAa;gBACrC,kBAAkB,EAAE,IAAI,CAAC,cAAc;gBACvC,WAAW,EAAE,IAAI,CAAC,QAAQ;gBAC1B,eAAe,EAAE,IAAI;aACtB,EACD,MAAM,EAAE,IAAI,CAAC,cAAc,EAC3B,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EACvD,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS;YAE/D,4DACE,KAAK,EAAE;oBACL,UAAU,EAAE,IAAI;oBAChB,gBAAgB,EAAE,IAAI,CAAC,IAAI;oBAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB,EACD,IAAI,EAAC,cAAc;gBAElB,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CACpD,0DACE,IAAI,EAAC,mBAAmB,EACxB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,EAC1B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE;wBACL,YAAY,EAAE,IAAI,CAAC,YAAY;qBAChC;oBAED,6DAAM,IAAI,EAAC,YAAY,GAAG;oBAC1B,6DAAM,KAAK,EAAC,MAAM;wBAChB,8DAAQ,CACH;oBACP,6DAAM,IAAI,EAAC,UAAU,GAAG,CACtB,CACL;gBACA,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CACxD,+DACE,IAAI,EAAC,mBAAmB,EACxB,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,EAC9B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;wBACL,YAAY,EAAE,IAAI,CAAC,YAAY;qBAChC;oBAED,6DAAM,IAAI,EAAC,YAAY,GAAG;oBAC1B,6DAAM,KAAK,EAAC,MAAM;wBAChB,8DAAQ,CACH;oBACP,6DAAM,IAAI,EAAC,UAAU,GAAG,CACjB,CACV;gBACA,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CACtC,4DAAK,KAAK,EAAC,MAAM;oBACf,6DAAM,IAAI,EAAC,YAAY,GAAG;oBAC1B,8DAAQ;oBACR,6DAAM,IAAI,EAAC,UAAU,GAAG,CACpB,CACP;gBACA,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAC1C,4DACE,KAAK,EAAC,gBAAgB,EACtB,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC,EACvC,QAAQ,EAAE,CAAC,CAAC;oBAEZ,4DAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,mBAAmB;wBAC1D,6DAAM,IAAI,EAAC,WAAW,GAAG,CACrB;oBACN,4DACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,IAAI,EAAC,gBAAgB,GAChB,CACH,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Host,\n Element,\n Prop,\n Watch,\n EventEmitter,\n Event,\n State,\n Method,\n ComponentInterface,\n Listen,\n} from '@stencil/core';\nimport { getSiblings, getDirectChildren } from '../../utils/dom';\nimport { displayTransition } from '../../utils/transitions';\nimport { getTabbableElements } from '../../utils/tabbable';\nimport { h, transformTag } from '../../utils/renderer';\nimport { NavItemEventDetail } from './nav-item-interface';\n\n/*\n Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n \n @slot icon-start - an icon at the start of the main control\n * @slot icon-end - an icon at the end of the main control\n * @slot secondary - a content panel in which you can place any html to display on control click\n * @slot - use the default slot for either `<a>` or text (if constructing a secondary content panel or using `href` directly)\n * @part ctrl - the controlling `<a>` or `<button>` element\n * @part ctrl--button - the controlling `<button>` element\n * @part ctrl--anchor - the controlling <a> element\n * @part ctrl-wrapper - the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)\n * @part secondary-wrapper - the div surrounding slotted secondary content\n * @part secondary-mask - the div that is added when secondary content is shown\n /\n@Component({\n tag: 'nano-nav-item',\n styleUrl: 'nav-item.scss',\n shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n private hasSecondarySlot: boolean = false;\n private btn: HTMLButtonElement \| HTMLAnchorElement;\n private fromHover: boolean;\n private animating: boolean = false;\n private waitHide: number;\n private waitShow: number;\n private globalNavEle?: HTMLNanoGlobalNavElement;\n private secondaryDiv: HTMLDivElement;\n\n @State() hasAnchorEle: boolean = false;\n @State() didOpen: boolean = false;\n @State() isInGlobalNav: boolean = false;\n @State() isInMenuDrawer: boolean = false;\n @State() isInMenu: boolean = false;\n @State() hasFocus: boolean = false;\n @Element() private el: HTMLNanoNavItemElement;\n\n /\n Href to link to\n /\n @Prop({ mutable: true }) href: string = null;\n\n /\n Target to use for links\n /\n @Prop() target: '_self' \| '_blank' \| '_parent' \| '_top' = '_self';\n\n /\n Disable the nav item\n /\n @Prop() disabled: boolean = false;\n\n /\n Whether a secondary menu should be or is currently open\n /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /\n Whether this menu item is currently 'selected'\n /\n @Prop({ reflect: true }) selected: boolean = false;\n\n /\n Screen pixel width to activate the secondary menu\n /\n @Prop() secondaryActiveWidth: number = 0;\n\n /\n Secondary fallback function for when the secondary menu is no longer active.\n /\n @Prop() secondaryFallback = () => {};\n\n /\n Whether secondary menus should close on blur\n /\n @Prop() closeOnBlur: boolean = true;\n\n /\n Will show an indicator badge - only when placed in a nano-menu-draw\n /\n @Prop() notification: boolean = false;\n\n /\n Emitted when the nav item closes it's secondary navigation.\n /\n @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item opens it's secondary navigation.\n /\n @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item is about to open it's secondary navigation.\n /\n @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item is about to close it's secondary navigation.\n /\n @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item loses focus.\n /\n @Event() nanoBlur!: EventEmitter<void>;\n\n /\n Emitted when the nav item has focus.\n /\n @Event() nanoFocus!: EventEmitter<void>;\n\n /\n Sets focus on the first button or anchor present. Use this method instead of the global\n * `element.focus()`.\n /\n @Method()\n async setFocus() {\n if (!this.btn) return;\n this.btn.focus();\n }\n\n /\n Public open watcher\n /\n @Watch('open')\n openChange() {\n if (this.open) this.openSecondary();\n else this.closeSecondary();\n }\n\n /\n Internal open watcher\n /\n @Watch('didOpen')\n didOpenChange() {\n if (!this.hasSecondarySlot) return;\n\n if (!this.didOpen) {\n / the secondadry panel is not closing via hover,\n remove blur events, add focus back to originating button /\n setTimeout(() => {\n if (\n !this.fromHover &&\n (!document.activeElement \|\| document.activeElement === document.body)\n )\n this.btn.focus({ preventScroll: true });\n this.el.tabIndex = null;\n this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n }, 50);\n } else {\n / the secondary panel is not opening via hover,\n scroll content into view, focus on it and add blur events */\n if (!this.fromHover) {\n const panelIO = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].boundingClientRect.top < 0) {\n this.secondaryDiv.scrollIntoView({\n behavior: 'smooth',\n });\n }\n panelIO.disconnect();\n },\n { threshold: 1 }\n );\n panelIO.observe(this.secondaryDiv);\n this.secondaryDiv.focus({ preventScroll: true });\n\n const focusableChild = getTabbableElements(this.secondaryDiv, true);\n if (focusableChild[0]) focusableChild[0].focus();\n\n this.el.tabIndex = -1;\n this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n }\n }\n }\n\n @Listen('click', { target: 'body' })\n @Listen('keyup', { target: 'body' })\n handleClose(e: MouseEvent \| KeyboardEvent) {\n if (!this.didOpen \|\| !this.hasSecondarySlot \|\| !this.closeOnBlur) return;\n if (!e.composedPath().some((el) => el === this.secondaryDiv))\n this.toggleSecondary();\n }\n\n private closeSecondary = async () => {\n if (!this.hasSecondarySlot \|\| !this.didOpen) return;\n this.open = false;\n await displayTransition(this.secondaryDiv, {\n className: 'open',\n show: false,\n });\n this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n this.didOpen = false;\n };\n\n private openSecondary = async () => {\n if (window.innerWidth < this.secondaryActiveWidth) {\n this.secondaryFallback.call(this);\n return;\n }\n\n if (!this.hasSecondarySlot \|\| this.didOpen) return;\n this.open = true;\n await displayTransition(this.secondaryDiv, {\n className: 'open',\n show: true,\n });\n this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n this.didOpen = true;\n };\n\n private toggleSecondary = () => {\n if (!this.hasSecondarySlot) return;\n if (this.didOpen) this.closeSecondary();\n else this.openSecondary();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n // opens secondary panel when activated via hover\n if (this.href && !this.animating && this.hasSecondarySlot)\n this.openSecondary();\n this.nanoFocus.emit();\n };\n\n private handleHostBlur = () => {\n if (this.animating) return;\n\n // tab index is added to host when secondary panel opens\n // to return focus after secondary panel closes. Remove now if it was added\n this.el.removeAttribute('tabindex');\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n // direct host clicks to internal button\n private handleHostClick = (ev: MouseEvent) => {\n if (!this.hasAnchorEle) return;\n const foundlink = (ev.target as HTMLElement).closest('a, button');\n if (!foundlink) this.btn.click();\n };\n\n // handles secondary menu hover behaviour.\n private handleMouseEnter = async () => {\n if (\n !this.href \|\|\n this.animating \|\|\n !this.hasSecondarySlot \|\|\n (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n )\n return;\n\n // if there are sibling secondary panels currently open,\n // we need to wait before opening otherwise we get unwanted overlapping\n let timeToWait = 0;\n if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n timeToWait = 300;\n\n clearTimeout(this.waitHide);\n this.fromHover = true;\n this.animating = true;\n this.waitShow = window.setTimeout(\n async () => await this.openSecondary(),\n timeToWait\n );\n this.animating = false;\n };\n\n // handles secondary menu hover-out behaviour.\n private handleMouseLeave = () => {\n if (!this.href) return;\n clearTimeout(this.waitShow);\n this.fromHover = true;\n this.animating = true;\n\n // prevent closing immediately - makes navigating to items within more forgiving\n this.waitHide = window.setTimeout(\n async () => await this.closeSecondary(),\n 300\n );\n this.animating = false;\n };\n\n private handleClick = () => {\n this.fromHover = false;\n if (this.hasSecondarySlot) this.toggleSecondary();\n };\n\n connectedCallback() {\n const secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n this.hasSecondarySlot = !!secondaryEle;\n\n const link = getDirectChildren<HTMLAnchorElement \| HTMLButtonElement>(\n this.el,\n 'a, button'\n )[0];\n this.hasAnchorEle = !!link;\n\n if (link) {\n this.href = (link as HTMLAnchorElement).href\n ? (link as HTMLAnchorElement).href\n : null;\n this.btn = link;\n if (this.hasSecondarySlot)\n this.btn.addEventListener('click', this.toggleSecondary);\n\n this.btn.addEventListener('focus', this.handleFocus);\n this.btn.addEventListener('blur', this.handleHostBlur);\n }\n\n this.isInGlobalNav = false;\n this.isInMenuDrawer = false;\n this.globalNavEle = this.el.closest(transformTag('nano-global-nav'));\n\n this.isInMenuDrawer = !!this.el.closest(transformTag('nano-menu-drawer'));\n this.isInMenu = !!this.el.closest(transformTag('nano-menu'));\n this.isInGlobalNav =\n this.el.parentElement === this.globalNavEle \|\|\n !!this.el.closest('.global-nav');\n }\n\n componentDidLoad() {\n this.openChange();\n }\n\n disconnectedCallback(): void {\n this.btn.removeEventListener('click', this.toggleSecondary);\n this.btn.removeEventListener('focus', this.handleFocus);\n this.btn.removeEventListener('blur', this.handleHostBlur);\n }\n\n render() {\n return (\n <Host\n class={{\n 'has-secondary': this.hasSecondarySlot,\n 'secondary-open': this.open,\n selected: this.selected,\n 'has-focus': this.hasFocus,\n disabled: this.disabled,\n 'nano-global-nav': this.isInGlobalNav,\n 'nano-menu-drawer': this.isInMenuDrawer,\n 'nano-menu': this.isInMenu,\n 'nano-nav-item': true,\n }}\n onBlur={this.handleHostBlur}\n dir={this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onClick={this.handleHostClick}\n role={this.el.closest('[role=\"menu\"]') ? 'menuitem' : undefined}\n >\n <div\n class={{\n 'nav-item': true,\n 'secondary-open': this.open,\n selected: this.selected,\n }}\n part=\"ctrl-wrapper\"\n >\n {this.href && !this.hasAnchorEle && !this.disabled && (\n <a\n part=\"ctrl ctrl--anchor\"\n target={this.target}\n ref={(a) => (this.btn = a)}\n href={this.href}\n onFocus={this.handleFocus}\n class={{\n notification: this.notification,\n }}\n >\n <slot name=\"icon-start\" />\n <span class=\"text\">\n <slot />\n </span>\n <slot name=\"icon-end\" />\n </a>\n )}\n {((!this.hasAnchorEle && !this.href) \|\| this.disabled) && (\n <button\n part=\"ctrl ctrl--button\"\n ref={(btn) => (this.btn = btn)}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n disabled={this.disabled}\n class={{\n notification: this.notification,\n }}\n >\n <slot name=\"icon-start\" />\n <span class=\"text\">\n <slot />\n </span>\n <slot name=\"icon-end\" />\n </button>\n )}\n {this.hasAnchorEle && !this.disabled && (\n <div class=\"link\">\n <slot name=\"icon-start\" />\n <slot />\n <slot name=\"icon-end\" />\n </div>\n )}\n {this.hasSecondarySlot && !this.disabled && (\n <div\n class=\"secondary-menu\"\n ref={(div) => (this.secondaryDiv = div)}\n tabIndex={-1}\n >\n <div class=\"secondary-menu-content\" part=\"secondary-wrapper\">\n <slot name=\"secondary\" />\n </div>\n <div\n class=\"secondary-menu-mask\"\n onClick={this.closeSecondary}\n part=\"secondary-mask\"\n ></div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/option/option.css CHANGED Viewed

@@ -102,7 +102,7 @@
   display: flex;
   align-items: center;
 }
-.option__start ::slotted(nano-icon) {
+.option__start ::slotted(.nano-icon) {
   font-size: var(--opt-icon-size);
 }
 .option__start ::slotted(:last-child) {
@@ -113,7 +113,7 @@
   display: flex;
   align-items: center;
 }
-.option__end ::slotted(nano-icon) {
+.option__end ::slotted(.nano-icon) {
   font-size: var(--opt-icon-size);
 }
 .option__end ::slotted(:first-child) {

package/dist/collection/components/option/option.js CHANGED Viewed

@@ -1,7 +1,8 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { h, Host, } from "@stencil/core";
+import { Host, } from "@stencil/core";
+import { h } from "../../utils/renderer";
 import { getDirectChildren } from "../../utils/dom";
 import { debounce } from "../../utils/throttle";
 let optIds = 0;
@@ -77,12 +78,12 @@ export class Option {
         this.labelChanged();
     }
     render() {
-        return (h(Host, { key: '81da275412fb18c7e96d947c6e4612d8b4a4bfb1', role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: '65ec11bca28136d886a1ee24c93b0d14b2d3b296', onMouseDown: this.handleClick, id: this.optId, class: {
+        return (h(Host, { key: '9c710d546cb6c588559561ea7759446d8a4b5a48', role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: "nano-option" }, h("div", { key: 'b8824f9d1d8736e434ffb32b122a419767e897d3', onMouseDown: this.handleClick, id: this.optId, class: {
                 option: true,
                 'option--selected': this.selected,
                 'option--disabled': this.disabled,
                 'option--novalue': !this.value,
-            } }, h("div", { key: '5ca7ea12d12e17177a71c441b5600c2e5d1b4cbc', part: "check-icon", class: "option__check" }, h("slot", { key: 'd33caab711a7b07a6d833c5f4fcca8aa1381bcd0', name: "check-icon" }, h("nano-icon", { key: '65255f90b5df1858af89529b6d2df7b5a9264112', name: "light/check", "aria-hidden": "true" }))), h("div", { key: '952469135adf3b50d7a9c647edd861aee0b08c9b', part: "start", class: "option__start" }, h("slot", { key: 'e3b2ab153d5b45de84381e1804d93de64a0bbded', name: "start" })), h("div", { key: '178a8920687128fb0fa78bf5ce7f3f551cced273', part: "label", class: "option__label" }, h("slot", { key: '707a98e2da2413cd77bae52ccebb0004974ecb5e' }, this.label || this.value)), h("div", { key: '66a69defe2beb8f3bd8f68ab94019520fbd9ab21', part: "end", class: "option__end" }, h("slot", { key: '126ebcccc9ed46d2aea3aa6d37672570a8cae5a2', name: "end" })))));
+            } }, h("div", { key: '81424ff221aa45c36268315cea0a07a49d5bd092', part: "check-icon", class: "option__check" }, h("slot", { key: '331a405714047eb22fc7043d4e0bf3dbdf67ca55', name: "check-icon" }, h("nano-icon", { key: '0fc3ee15ccca0c3195bd9a5feb844060419f9ed2', name: "light/check", "aria-hidden": "true" }))), h("div", { key: 'e83acd281d86ea73e39566c718bef76781ab77ac', part: "start", class: "option__start" }, h("slot", { key: 'f971683c4b1ea04cd7bfdcaab55a9f4fce544ce8', name: "start" })), h("div", { key: '5e69f3f9cbe5358714802d3718ab154d3badc9e4', part: "label", class: "option__label" }, h("slot", { key: '3449b82ecd58edc5faf2bb713d63db9e975fdc96' }, this.label || this.value)), h("div", { key: 'a634d9bb9bb769ad94dc4141bfd938eb65dd78b2', part: "end", class: "option__end" }, h("slot", { key: '64de93cc1d913c4a842d27c622f8e0a45567677a', name: "end" })))));
     }
     static get is() { return "nano-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/option/option.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"option.js","sourceRoot":"","sources":["../../../../src/components/option/option.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,~~CAAC,EACD,~~IAAI,EACJ,KAAK,EACL,KAAK,EACL,OAAO,EACP,MAAM,EACN,KAAK,GAEN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGhD,IAAI,MAAM,GAAG,CAAC,CAAC;AAEf;;;;;;;GAOG;AAMH,MAAM,OAAO,MAAM;IACT,KAAK,GAAG,eAAe,MAAM,EAAE,EAAE,CAAC;IAC/B,IAAI,CAAwB;IAC9B,QAAQ,GAAG,KAAK,CAAC;IAE1B;QACE,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;KAC7D;IAED,aAAa;IAEb;;OAEG;IACqC,KAAK,GAAW,EAAE,CAAC;IAG3D,YAAY;QACV,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK;YACpD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;IACnC,CAAC;IAED;;OAEG;IACqC,KAAK,GAAW,EAAE,CAAC;IAG3D,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;YACnC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;IAC3E,CAAC;IAED;;OAEG;IACsB,QAAQ,GAAY,KAAK,CAAC;IAEnD;;OAEG;IACsB,QAAQ,GAAY,KAAK,CAAC;IAEnD;;OAEG;IACK,UAAU,GAAW,EAAE,CAAC;IAEhC,uCAAuC;IAC9B,UAAU,CAAuC;IAE1D,iBAAiB;IAEjB,2BAA2B;IAE3B,aAAa,CAAC,CAAgB;QAC5B,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;YAAE,OAAO;QAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAED,gBAAgB;IAEhB,IAAY,YAAY;QACtB,OAAO,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC;aACxD,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC;aAC3B,IAAI,CAAC,GAAG,CAAC;aACT,IAAI,EAAE,CAAC;IACZ,CAAC;IAED,sBAAsB;IAEtB,iBAAiB;QACf,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAChC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO~~;YAE~~/C,4DACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,EAAE,EAAE,IAAI,CAAC,KAAK,EACd,KAAK,EAAE;oBACL,MAAM,EAAE,IAAI;oBACZ,kBAAkB,EAAE,IAAI,CAAC,QAAQ;oBACjC,kBAAkB,EAAE,IAAI,CAAC,QAAQ;oBACjC,iBAAiB,EAAE,CAAC,IAAI,CAAC,KAAK;iBAC/B;gBAED,4DAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,eAAe;oBAC1C,6DAAM,IAAI,EAAC,YAAY;wBACrB,kEAAW,IAAI,EAAC,aAAa,iBAAa,MAAM,GAAG,CAC9C,CACH;gBACN,4DAAK,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe;oBACrC,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;gBACN,4DAAK,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe;oBACrC,+DAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAQ,CACnC;gBACN,4DAAK,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,aAAa;oBACjC,6DAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Prop,\n ~~h,\n~~ Host,\n State,\n Watch,\n Element,\n Listen,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { getDirectChildren } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\nimport type { OptionInterface } from './option-interface';\n\nlet optIds = 0;\n\n/*\n Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)\n \n @slot - main label. Defaults to `label` or `value` prop\n * @slot checked-icon - icon to indicated checked / selected state. Defaults to fontawesome light/check\n * @slot start - suitable for an icon or content displayed at the start of the main label\n * @slot end - suitable for an icon or content displayed at the end of the main label\n /\n@Component({\n tag: 'nano-option',\n styleUrl: 'option.scss',\n shadow: true,\n})\nexport class Option implements OptionInterface {\n private optId = `nano-option-${optIds++}`;\n @Element() host: HTMLNanoOptionElement;\n @State() hasFocus = false;\n\n constructor() {\n this.handleClick = debounce(this.handleClick.bind(this), 5);\n }\n\n // Public API\n\n /\n Value of the option\n /\n @Prop({ mutable: true, reflect: true }) value: string = '';\n\n @Watch('value')\n valueChanged() {\n if ((!this.value \|\| !this.value.length) && !this.label)\n this.value = this.labelContent;\n }\n\n /\n Label of the option\n /\n @Prop({ mutable: true, reflect: true }) label: string = '';\n\n @Watch('label')\n labelChanged() {\n if (!this.label \|\| !this.label.length)\n this.label = this.labelContent.length ? this.labelContent : this.value;\n }\n\n /\n Whether this option is selected\n /\n @Prop({ reflect: true }) selected: boolean = false;\n\n /\n Whether this option should be disabled\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* You can add extra meta for this option. When displayed in a list, users\n * search / filter via extra related terms. Another usecase is 'endonyms'\n /\n @Prop() filterMeta: string = '';\n\n /* Fired when an option is selected /\n @Event() nanoSelect!: EventEmitter<HTMLNanoOptionElement>;\n\n // Event handlers\n\n // stop scrolling on select\n @Listen('keydown')\n handleKeyDown(e: KeyboardEvent) {\n if (e.key !== ' ' && e.key !== 'Enter') return;\n e.preventDefault();\n this.nanoSelect.emit(this.host);\n }\n\n private handleClick() {\n if (this.disabled) return;\n this.nanoSelect.emit(this.host);\n }\n\n // Private logic\n\n private get labelContent() {\n return getDirectChildren(this.host, ':not([slot])', false)\n .map((el) => el.textContent)\n .join(' ')\n .trim();\n }\n\n // Component lifecycle\n\n componentWillLoad() {\n this.valueChanged();\n this.labelChanged();\n }\n\n render() {\n return (\n <Host\n role=\"option\"\n aria-selected={this.selected ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n >\n <div\n onMouseDown={this.handleClick}\n id={this.optId}\n class={{\n option: true,\n 'option--selected': this.selected,\n 'option--disabled': this.disabled,\n 'option--novalue': !this.value,\n }}\n >\n <div part=\"check-icon\" class=\"option__check\">\n <slot name=\"check-icon\">\n <nano-icon name=\"light/check\" aria-hidden=\"true\" />\n </slot>\n </div>\n <div part=\"start\" class=\"option__start\">\n <slot name=\"start\"></slot>\n </div>\n <div part=\"label\" class=\"option__label\">\n <slot>{this.label \|\| this.value}</slot>\n </div>\n <div part=\"end\" class=\"option__end\">\n <slot name=\"end\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"option.js","sourceRoot":"","sources":["../../../../src/components/option/option.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,OAAO,EACP,MAAM,EACN,KAAK,GAEN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,CAAC,EAAE,MAAM,sBAAsB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGhD,IAAI,MAAM,GAAG,CAAC,CAAC;AAEf;;;;;;;GAOG;AAMH,MAAM,OAAO,MAAM;IACT,KAAK,GAAG,eAAe,MAAM,EAAE,EAAE,CAAC;IAC/B,IAAI,CAAwB;IAC9B,QAAQ,GAAG,KAAK,CAAC;IAE1B;QACE,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;KAC7D;IAED,aAAa;IAEb;;OAEG;IACqC,KAAK,GAAW,EAAE,CAAC;IAG3D,YAAY;QACV,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK;YACpD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;IACnC,CAAC;IAED;;OAEG;IACqC,KAAK,GAAW,EAAE,CAAC;IAG3D,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;YACnC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;IAC3E,CAAC;IAED;;OAEG;IACsB,QAAQ,GAAY,KAAK,CAAC;IAEnD;;OAEG;IACsB,QAAQ,GAAY,KAAK,CAAC;IAEnD;;OAEG;IACK,UAAU,GAAW,EAAE,CAAC;IAEhC,uCAAuC;IAC9B,UAAU,CAAuC;IAE1D,iBAAiB;IAEjB,2BAA2B;IAE3B,aAAa,CAAC,CAAgB;QAC5B,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;YAAE,OAAO;QAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAED,gBAAgB;IAEhB,IAAY,YAAY;QACtB,OAAO,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC;aACxD,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC;aAC3B,IAAI,CAAC,GAAG,CAAC;aACT,IAAI,EAAE,CAAC;IACZ,CAAC;IAED,sBAAsB;IAEtB,iBAAiB;QACf,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAChC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC/C,KAAK,EAAC,aAAa;YAEnB,4DACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,EAAE,EAAE,IAAI,CAAC,KAAK,EACd,KAAK,EAAE;oBACL,MAAM,EAAE,IAAI;oBACZ,kBAAkB,EAAE,IAAI,CAAC,QAAQ;oBACjC,kBAAkB,EAAE,IAAI,CAAC,QAAQ;oBACjC,iBAAiB,EAAE,CAAC,IAAI,CAAC,KAAK;iBAC/B;gBAED,4DAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,eAAe;oBAC1C,6DAAM,IAAI,EAAC,YAAY;wBACrB,kEAAW,IAAI,EAAC,aAAa,iBAAa,MAAM,GAAG,CAC9C,CACH;gBACN,4DAAK,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe;oBACrC,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;gBACN,4DAAK,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe;oBACrC,+DAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAQ,CACnC;gBACN,4DAAK,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,aAAa;oBACjC,6DAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Prop,\n Host,\n State,\n Watch,\n Element,\n Listen,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { getDirectChildren } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\nimport type { OptionInterface } from './option-interface';\n\nlet optIds = 0;\n\n/*\n Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)\n \n @slot - main label. Defaults to `label` or `value` prop\n * @slot checked-icon - icon to indicated checked / selected state. Defaults to fontawesome light/check\n * @slot start - suitable for an icon or content displayed at the start of the main label\n * @slot end - suitable for an icon or content displayed at the end of the main label\n /\n@Component({\n tag: 'nano-option',\n styleUrl: 'option.scss',\n shadow: true,\n})\nexport class Option implements OptionInterface {\n private optId = `nano-option-${optIds++}`;\n @Element() host: HTMLNanoOptionElement;\n @State() hasFocus = false;\n\n constructor() {\n this.handleClick = debounce(this.handleClick.bind(this), 5);\n }\n\n // Public API\n\n /\n Value of the option\n /\n @Prop({ mutable: true, reflect: true }) value: string = '';\n\n @Watch('value')\n valueChanged() {\n if ((!this.value \|\| !this.value.length) && !this.label)\n this.value = this.labelContent;\n }\n\n /\n Label of the option\n /\n @Prop({ mutable: true, reflect: true }) label: string = '';\n\n @Watch('label')\n labelChanged() {\n if (!this.label \|\| !this.label.length)\n this.label = this.labelContent.length ? this.labelContent : this.value;\n }\n\n /\n Whether this option is selected\n /\n @Prop({ reflect: true }) selected: boolean = false;\n\n /\n Whether this option should be disabled\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* You can add extra meta for this option. When displayed in a list, users\n * search / filter via extra related terms. Another usecase is 'endonyms'\n /\n @Prop() filterMeta: string = '';\n\n /* Fired when an option is selected /\n @Event() nanoSelect!: EventEmitter<HTMLNanoOptionElement>;\n\n // Event handlers\n\n // stop scrolling on select\n @Listen('keydown')\n handleKeyDown(e: KeyboardEvent) {\n if (e.key !== ' ' && e.key !== 'Enter') return;\n e.preventDefault();\n this.nanoSelect.emit(this.host);\n }\n\n private handleClick() {\n if (this.disabled) return;\n this.nanoSelect.emit(this.host);\n }\n\n // Private logic\n\n private get labelContent() {\n return getDirectChildren(this.host, ':not([slot])', false)\n .map((el) => el.textContent)\n .join(' ')\n .trim();\n }\n\n // Component lifecycle\n\n componentWillLoad() {\n this.valueChanged();\n this.labelChanged();\n }\n\n render() {\n return (\n <Host\n role=\"option\"\n aria-selected={this.selected ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n class=\"nano-option\"\n >\n <div\n onMouseDown={this.handleClick}\n id={this.optId}\n class={{\n option: true,\n 'option--selected': this.selected,\n 'option--disabled': this.disabled,\n 'option--novalue': !this.value,\n }}\n >\n <div part=\"check-icon\" class=\"option__check\">\n <slot name=\"check-icon\">\n <nano-icon name=\"light/check\" aria-hidden=\"true\" />\n </slot>\n </div>\n <div part=\"start\" class=\"option__start\">\n <slot name=\"start\"></slot>\n </div>\n <div part=\"label\" class=\"option__label\">\n <slot>{this.label \|\| this.value}</slot>\n </div>\n <div part=\"end\" class=\"option__end\">\n <slot name=\"end\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/overflow-nav/overflow-nav.css CHANGED Viewed

@@ -118,7 +118,7 @@
   z-index: 10;
   transition: var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease;
 }
-.onav nano-icon-button.onav__scroll-button {
+.onav .nano-icon-button.onav__scroll-button {
   --nano-color-base: var(--scroll-btn-color);
   display: flex;
   align-items: center;
@@ -131,14 +131,14 @@
   color: var(--scroll-btn-color);
   pointer-events: none;
 }
-.onav nano-icon-button.onav__scroll-button:focus {
+.onav .nano-icon-button.onav__scroll-button:focus {
   outline: none;
 }
-.onav nano-icon-button.onav__scroll-button.is-shown {
+.onav .nano-icon-button.onav__scroll-button.is-shown {
   opacity: 1;
   pointer-events: all;
 }
-.onav nano-icon-button.onav__scroll-button:focus-visible {
+.onav .nano-icon-button.onav__scroll-button:focus-visible {
   box-shadow: var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset;
 }
 .onav--horizontal .onav__scroller {

package/dist/collection/components/overflow-nav/overflow-nav.js CHANGED Viewed

@@ -1,7 +1,8 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { Host, h, } from "@stencil/core";
+import { Host, } from "@stencil/core";
+import { h } from "../../utils/renderer";
 import { getDirectChildren, getOffset } from "../../utils/dom";
 import { debounce } from "../../utils/throttle";
 /**
@@ -316,19 +317,19 @@ export class OverflowNav {
         }
     }
     render() {
-        return (h(Host, { key: '6e173cacb18816d9835c05546a72c43ed91f274c', dir: this.isRtl ? 'rtl' : null }, h("div", { key: '5ccc848ac3de7e32c78f83450e33d8dba423074f', part: "base", class: {
+        return (h(Host, { key: 'b27e8a6ed628edcec4ca84db6898344848b7d203', dir: this.isRtl ? 'rtl' : null, class: "nano-overflow-nav" }, h("div", { key: '79200b5a21b1fdcc179fc3017b051af1bf82d17f', part: "base", class: {
                 onav: true,
                 [`onav--${this.orientation}`]: true,
                 'onav--has-scroll-controls': this.hasScrollControls,
                 'onav--has-scroll-controls-start': !this.hideControlStart,
                 'onav--has-scroll-controls-end': !this.hideControlEnd,
                 'onav--no-transitions': this.instantReCalc,
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '0a322909790d1b93e3325855deae42a3c65c9639', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '345635ef806ddb6faf2415cc90ff6a45741864ce', part: "scroll-button scroll-button-prev", class: {
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '088d3d5bc04b251977ec0c389a4eef7657d11446', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: 'c55c810110f8b357b330634b024c3f5dc44ebb3b', part: "scroll-button scroll-button-prev", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--start': true,
             }, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
                 ? 'light/chevron-left'
-                : 'light/chevron-up' })), h("div", { key: '9b78552101a21487b925fefe89d887ac75ca035d', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll }, h("div", { key: '9d1795efcd4ca224ded919ad90623e97f2603a9d', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, h("div", { key: '751c93eea4740df90233e816eda8e11835d0f3ca', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" }), h("slot", { key: 'c82d3d8ddc3fca334325b5a18ecbb5db78a81df9', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: '9fe484e4f323155034da3a84ea2b0872c6632fb4', part: "scroll-button scroll-button-next", class: {
+                : 'light/chevron-up' })), h("div", { key: '9b65b0ccdb84eaf1afb28835e818039a961ef8c2', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll }, h("div", { key: '320928d965a0dd203a7b1614b4ae4ec344719810', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, h("div", { key: '0227ff56d2949ef3ebfc5ec740a38dcdb7adb1d4', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" }), h("slot", { key: '28573efda6c8eb5995114f6063f57ad22e0646ed', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'bba306fe285adc3d6af71bf07e1744c9790f9c51', part: "scroll-button scroll-button-next", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--end': true,
             }, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'

package/dist/collection/components/overflow-nav/overflow-nav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"overflow-nav.js","sourceRoot":"","sources":["../../../../src/components/overflow-nav/overflow-nav.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Host,\n h,\n Element,\n Prop,\n Watch,\n State,\n Method,\n} from '@stencil/core';\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\n\n/*\n Primarily used to display navigational items that may not fit on smaller screens.\n \n - Accepts any collection of elements\n * - Gives visual cues of 'more' with auto display fade effect and scroll buttons\n * - Auto scrolls to the active item onload\n \n @slot - Default slot to place items.\n \n @part base - root, wrapper element\n * @part scroller - the scrolling element\n * @part items - the item wrapper element\n * @part indicator - the animated, indicator element\n * @part scroll-button - The buttons shown at either side of the scrolling area\n * @part scroll-button-prev - The button shown at the start of the scrolling area\n * @part scroll-button-next - The button shown at the end of the scrolling area\n /\n\n@Component({\n tag: 'nano-overflow-nav',\n styleUrl: 'overflow-nav.scss',\n shadow: true,\n})\nexport class OverflowNav implements ComponentInterface {\n // public surface\n\n /* Disables the scroll arrow buttons that appear when content overflows /\n @Prop() scrollControls = true;\n\n /* The flex direction of the element /\n @Prop({ reflect: true }) orientation: 'horizontal' \| 'vertical' =\n 'horizontal';\n\n /\n A function called when an item becomes 'active' (via click or keyboard)\n * @param item - html element currently being assessed\n * @param _index - the index of the html element currently being assessed\n * @returns void /\n @Prop() activeHandler = (item: HTMLElement, _index: number) =>\n item.classList.add('active');\n\n /\n A function called when an item becomes 'inactive'\n * (because another item was made active)\n * @param item - html element currently being assessed\n * @param _index - the index of the html element currently being assessed\n * @returns void /\n @Prop() inActiveHandler = (item: HTMLElement, _index: number) =>\n item.classList.remove('active');\n\n /\n A function called to assess an initial, active item\n * @param item - html element currently being assessed\n * @param _index - the index of the html element currently being assessed\n * @returns void /\n @Prop() isActiveHandler = (item: HTMLElement, _index: number) =>\n item.classList.contains('active');\n\n @Watch('isActiveHandler')\n watchIsActiveHandler() {\n this.instantReCalc = true;\n this.activeItem = this.allActiveItems.find((el, i) =>\n this.isActiveHandler(el, i)\n );\n setTimeout(() => (this.instantReCalc = false), 300);\n }\n\n /\n Sync up the view to the active item.\n * Use this when the active item changes outside of this component.\n /\n @Method()\n async syncActiveItem() {\n this.activeItem = this.allActiveItems.find((el, i) =>\n this.isActiveHandler(el, i)\n );\n }\n\n // private state\n\n constructor() {\n this.recalculatePositions = debounce(\n this.recalculatePositions.bind(this),\n 80\n );\n }\n\n private ro?: ResizeObserver;\n private nav?: HTMLElement;\n private itemContainer?: HTMLElement;\n private isRtl?: boolean;\n private endBtn: HTMLNanoIconButtonElement;\n private startBtn: HTMLNanoIconButtonElement;\n private activeIndicator: HTMLElement;\n private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n get scrollProp() {\n return this.orientation === 'horizontal' ? 'scrollWidth' : 'scrollHeight';\n }\n\n get clientDimProp() {\n return this.orientation === 'horizontal' ? 'clientWidth' : 'clientHeight';\n }\n\n get scrollOffset() {\n return this.orientation === 'horizontal' ? 'scrollLeft' : 'scrollTop';\n }\n\n @Element() host: HTMLNanoOverflowNavElement;\n\n @State() instantReCalc = false;\n @State() hasScrollControls = false;\n\n @Watch('hasScrollControls')\n watchScrollControls() {\n if (this.hasScrollControls) this.handleScroll();\n else this.hideControlStart = this.hideControlEnd = true;\n }\n\n @State() hideControlEnd = true;\n\n @Watch('hideControlEnd')\n hideEndBtn() {\n if (!this.endBtn) return;\n this.activateBtn(this.endBtn, !this.hideControlEnd);\n }\n\n @State() hideControlStart = true;\n\n @Watch('hideControlStart')\n hideStartBtn() {\n if (!this.startBtn) return;\n this.activateBtn(this.startBtn, !this.hideControlStart);\n }\n\n // private logic\n\n private activateBtn(btn: HTMLNanoIconButtonElement, activate = true) {\n if (!activate) {\n btn.tabIndex = -1;\n btn.disabled = true;\n btn.classList.remove('is-shown');\n return;\n }\n btn.tabIndex = 0;\n btn.disabled = false;\n btn.classList.add('is-shown');\n }\n\n get allActiveItems() {\n return this.allItems.filter(\n (el: any) => !el.disabled \|\| el.classList.contains('disabled')\n );\n }\n\n get allItems() {\n return getDirectChildren<HTMLElement>(this.host, '', true);\n }\n\n get activeItem() {\n return this._activeItem;\n }\n\n set activeItem(item: HTMLElement) {\n if (\n !item \|\|\n item === this.activeItem \|\|\n (item as any).disabled \|\|\n !this.allActiveItems.includes(item)\n ) {\n return;\n }\n\n this._activeItem = item;\n this.allActiveItems.forEach((el, i) => {\n if (el === this._activeItem) this.activeHandler(el, i);\n else this.inActiveHandler(el, i);\n });\n\n this.recalculatePositions();\n }\n private _activeItem: HTMLElement;\n\n get navDim() {\n if (!this.nav) return 0;\n\n const computedStyle = getComputedStyle(this.nav);\n let clientDim = this.nav[this.clientDimProp];\n\n if (this.orientation === 'horizontal') {\n return (clientDim -=\n parseFloat(computedStyle.paddingLeft) +\n parseFloat(computedStyle.paddingRight));\n } else {\n return (clientDim -=\n parseFloat(computedStyle.paddingTop) +\n parseFloat(computedStyle.paddingBottom));\n }\n }\n\n private scrollToActiveItem() {\n if (!this.nav \|\| !this.activeItem) return;\n setTimeout(() => {\n this.activeItem.scrollIntoView({\n behavior: this.instantReCalc ? 'auto' : 'smooth',\n block: 'center',\n inline: 'center',\n });\n }, 100);\n }\n\n private syncActiveItemIndicator() {\n if (!this.activeItem) return;\n\n const item = this.activeItem;\n const width = item.clientWidth \|\| 0;\n const height = item.clientHeight + 2 \|\| 0;\n const offset = getOffset(item, this.itemContainer);\n\n if (!this.activeIndicator) return;\n\n const offsetTop = offset.top;\n const offsetLeft = offset.left;\n\n if (this.instantReCalc) this.activeIndicator.style.transition = 'none';\n\n switch (this.orientation) {\n case 'horizontal':\n this.activeIndicator.style.width = `${width}px`;\n this.activeIndicator.style.height = null;\n this.activeIndicator.style.transform = `translateX(${offsetLeft}px)`;\n break;\n\n case 'vertical':\n this.activeIndicator.style.width = null;\n this.activeIndicator.style.height = `${height}px`;\n this.activeIndicator.style.transform = `translateY(${offsetTop}px)`;\n break;\n }\n setTimeout(() => (this.activeIndicator.style.transition = null), 400);\n }\n\n private updateScrollControls = () => {\n if (!this.nav) return;\n\n this.hasScrollControls =\n this.nav[this.scrollProp] > this.nav[this.clientDimProp] &&\n this.nav[this.scrollProp] > this.itemContainer[this.clientDimProp];\n this.handleScroll();\n };\n\n private handleScroll = () => {\n if (!this.hasScrollControls) {\n this.hideControlStart = this.hideControlEnd = true;\n return;\n }\n const finishEnd = this.isRtl\n ? this.nav[this.scrollOffset] === 0\n : Math.abs(\n this.nav[this.clientDimProp] -\n (this.nav[this.scrollProp] - this.nav[this.scrollOffset])\n ) < 2;\n\n const finishStart = this.isRtl\n ? Math.abs(\n this.nav[this.scrollProp] +\n this.nav[this.scrollOffset] -\n this.nav[this.clientDimProp]\n ) < 2\n : this.nav[this.scrollOffset] === 0;\n\n if (finishStart) {\n this.hideControlStart = true;\n this.hideControlEnd = false;\n } else if (finishEnd) {\n this.hideControlStart = false;\n this.hideControlEnd = true;\n } else {\n this.hideControlEnd = false;\n this.hideControlStart = false;\n }\n };\n\n private handleBtnClick = (goEnd: boolean = false) => {\n const navDim = this.navDim;\n let scrollAmt;\n if (goEnd) scrollAmt = this.nav[this.scrollOffset] + navDim - 20;\n else scrollAmt = this.nav[this.scrollOffset] - navDim + 20;\n\n try {\n this.nav.scroll({\n left: this.orientation === 'horizontal' ? scrollAmt : 0,\n top: this.orientation === 'vertical' ? scrollAmt : 0,\n behavior: 'smooth',\n });\n } catch (_e) {\n this.nav[this.scrollOffset] = scrollAmt;\n }\n };\n\n private slotChangeHandler = () => {\n if (this.allActiveItems.length < 2) return;\n const item = this.allActiveItems.find((el, i) =>\n this.isActiveHandler(el, i)\n );\n if (item) this.activeItem = item;\n this.recalculatePositions();\n\n /** maintain a weakmap of mutation observers to maintain item / indicator position on all changes. */\n this.allActiveItems.forEach((item) => {\n if (this.mutationObservers.get(item)) return;\n\n const mo = new MutationObserver(() => this.syncActiveItemIndicator());\n mo.observe(item, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n\n this.mutationObservers.set(item, mo);\n });\n };\n\n private handleClick = (event: MouseEvent) => {\n if (this.allActiveItems.length < 2) return;\n const foundItem = event\n .composedPath()\n .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n if (foundItem) this.activeItem = foundItem;\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n const foundItem = event\n .composedPath()\n .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n if (foundItem) this.activeItem = foundItem;\n }\n };\n\n private recalculatePositions = () => {\n this.updateScrollControls();\n this.syncActiveItemIndicator();\n this.scrollToActiveItem();\n };\n\n // lifecycle\n\n connectedCallback(): void {\n this.instantReCalc = true;\n this.isRtl =\n this.orientation === 'horizontal' && !!this.host.closest('[dir=\"rtl\"]');\n\n if (window['MutationObserver']) this.slotChangeHandler();\n\n if (!window['ResizeObserver']) return;\n\n if (this.ro) {\n this.ro.disconnect();\n this.ro = undefined;\n }\n const mo = (this.ro = new ResizeObserver(this.recalculatePositions));\n mo.observe(this.host);\n }\n\n componentDidLoad(): void {\n this.activeItem = this.allActiveItems.find((el, i) =>\n this.isActiveHandler(el, i)\n );\n this.instantReCalc = false;\n }\n\n disconnectedCallback(): void {\n if (this.ro) {\n this.ro.disconnect();\n this.ro = undefined;\n }\n }\n\n render() {\n return (\n <Host dir={this.isRtl ? 'rtl' : null}>\n <div\n part=\"base\"\n class={{\n onav: true,\n [`onav--${this.orientation}`]: true,\n 'onav--has-scroll-controls': this.hasScrollControls,\n 'onav--has-scroll-controls-start': !this.hideControlStart,\n 'onav--has-scroll-controls-end': !this.hideControlEnd,\n 'onav--no-transitions': this.instantReCalc,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"onav__nav\">\n {this.scrollControls && (\n <nano-icon-button\n part=\"scroll-button scroll-button-prev\"\n class={{\n 'onav__scroll-button': true,\n 'onav__scroll-button--start': true,\n }}\n ref={(btn) => (this.startBtn = btn)}\n onClick={() => this.handleBtnClick(false)}\n label=\"Click to scroll\"\n iconName={\n this.orientation === 'horizontal'\n ? 'light/chevron-left'\n : 'light/chevron-up'\n }\n />\n )}\n\n <div\n part=\"scroller\"\n ref={(el) => (this.nav = el)}\n class=\"onav__scroller\"\n onScroll={this.handleScroll}\n >\n <div\n part=\"items\"\n ref={(el) => (this.itemContainer = el)}\n class=\"onav__items\"\n >\n <div\n part=\"indicator\"\n ref={(el) => (this.activeIndicator = el)}\n class=\"onav__active-indicator\"\n />\n <slot onSlotchange={this.slotChangeHandler} />\n </div>\n </div>\n\n {this.scrollControls && (\n <nano-icon-button\n part=\"scroll-button scroll-button-next\"\n class={{\n 'onav__scroll-button': true,\n 'onav__scroll-button--end': true,\n }}\n ref={(btn) => (this.endBtn = btn)}\n onClick={() => this.handleBtnClick(true)}\n label=\"Click to scroll\"\n iconName={\n this.orientation === 'horizontal'\n ? 'light/chevron-right'\n : 'light/chevron-down'\n }\n />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"overflow-nav.js","sourceRoot":"","sources":["../../../../src/components/overflow-nav/overflow-nav.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Host,\n Element,\n Prop,\n Watch,\n State,\n Method,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\n\n/*\n Primarily used to display navigational items that may not fit on smaller screens.\n \n - Accepts any collection of elements\n * - Gives visual cues of 'more' with auto display fade effect and scroll buttons\n * - Auto scrolls to the active item onload\n \n @slot - Default slot to place items.\n \n @part base - root, wrapper element\n * @part scroller - the scrolling element\n * @part items - the item wrapper element\n * @part indicator - the animated, indicator element\n * @part scroll-button - The buttons shown at either side of the scrolling area\n * @part scroll-button-prev - The button shown at the start of the scrolling area\n * @part scroll-button-next - The button shown at the end of the scrolling area\n /\n\n@Component({\n tag: 'nano-overflow-nav',\n styleUrl: 'overflow-nav.scss',\n shadow: true,\n})\nexport class OverflowNav implements ComponentInterface {\n // public surface\n\n /* Disables the scroll arrow buttons that appear when content overflows /\n @Prop() scrollControls = true;\n\n /* The flex direction of the element /\n @Prop({ reflect: true }) orientation: 'horizontal' \| 'vertical' =\n 'horizontal';\n\n /\n A function called when an item becomes 'active' (via click or keyboard)\n * @param item - html element currently being assessed\n * @param _index - the index of the html element currently being assessed\n * @returns void /\n @Prop() activeHandler = (item: HTMLElement, _index: number) =>\n item.classList.add('active');\n\n /\n A function called when an item becomes 'inactive'\n * (because another item was made active)\n * @param item - html element currently being assessed\n * @param _index - the index of the html element currently being assessed\n * @returns void /\n @Prop() inActiveHandler = (item: HTMLElement, _index: number) =>\n item.classList.remove('active');\n\n /\n A function called to assess an initial, active item\n * @param item - html element currently being assessed\n * @param _index - the index of the html element currently being assessed\n * @returns void /\n @Prop() isActiveHandler = (item: HTMLElement, _index: number) =>\n item.classList.contains('active');\n\n @Watch('isActiveHandler')\n watchIsActiveHandler() {\n this.instantReCalc = true;\n this.activeItem = this.allActiveItems.find((el, i) =>\n this.isActiveHandler(el, i)\n );\n setTimeout(() => (this.instantReCalc = false), 300);\n }\n\n /\n Sync up the view to the active item.\n * Use this when the active item changes outside of this component.\n /\n @Method()\n async syncActiveItem() {\n this.activeItem = this.allActiveItems.find((el, i) =>\n this.isActiveHandler(el, i)\n );\n }\n\n // private state\n\n constructor() {\n this.recalculatePositions = debounce(\n this.recalculatePositions.bind(this),\n 80\n );\n }\n\n private ro?: ResizeObserver;\n private nav?: HTMLElement;\n private itemContainer?: HTMLElement;\n private isRtl?: boolean;\n private endBtn: HTMLNanoIconButtonElement;\n private startBtn: HTMLNanoIconButtonElement;\n private activeIndicator: HTMLElement;\n private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n get scrollProp() {\n return this.orientation === 'horizontal' ? 'scrollWidth' : 'scrollHeight';\n }\n\n get clientDimProp() {\n return this.orientation === 'horizontal' ? 'clientWidth' : 'clientHeight';\n }\n\n get scrollOffset() {\n return this.orientation === 'horizontal' ? 'scrollLeft' : 'scrollTop';\n }\n\n @Element() host: HTMLNanoOverflowNavElement;\n\n @State() instantReCalc = false;\n @State() hasScrollControls = false;\n\n @Watch('hasScrollControls')\n watchScrollControls() {\n if (this.hasScrollControls) this.handleScroll();\n else this.hideControlStart = this.hideControlEnd = true;\n }\n\n @State() hideControlEnd = true;\n\n @Watch('hideControlEnd')\n hideEndBtn() {\n if (!this.endBtn) return;\n this.activateBtn(this.endBtn, !this.hideControlEnd);\n }\n\n @State() hideControlStart = true;\n\n @Watch('hideControlStart')\n hideStartBtn() {\n if (!this.startBtn) return;\n this.activateBtn(this.startBtn, !this.hideControlStart);\n }\n\n // private logic\n\n private activateBtn(btn: HTMLNanoIconButtonElement, activate = true) {\n if (!activate) {\n btn.tabIndex = -1;\n btn.disabled = true;\n btn.classList.remove('is-shown');\n return;\n }\n btn.tabIndex = 0;\n btn.disabled = false;\n btn.classList.add('is-shown');\n }\n\n get allActiveItems() {\n return this.allItems.filter(\n (el: any) => !el.disabled \|\| el.classList.contains('disabled')\n );\n }\n\n get allItems() {\n return getDirectChildren<HTMLElement>(this.host, '', true);\n }\n\n get activeItem() {\n return this._activeItem;\n }\n\n set activeItem(item: HTMLElement) {\n if (\n !item \|\|\n item === this.activeItem \|\|\n (item as any).disabled \|\|\n !this.allActiveItems.includes(item)\n ) {\n return;\n }\n\n this._activeItem = item;\n this.allActiveItems.forEach((el, i) => {\n if (el === this._activeItem) this.activeHandler(el, i);\n else this.inActiveHandler(el, i);\n });\n\n this.recalculatePositions();\n }\n private _activeItem: HTMLElement;\n\n get navDim() {\n if (!this.nav) return 0;\n\n const computedStyle = getComputedStyle(this.nav);\n let clientDim = this.nav[this.clientDimProp];\n\n if (this.orientation === 'horizontal') {\n return (clientDim -=\n parseFloat(computedStyle.paddingLeft) +\n parseFloat(computedStyle.paddingRight));\n } else {\n return (clientDim -=\n parseFloat(computedStyle.paddingTop) +\n parseFloat(computedStyle.paddingBottom));\n }\n }\n\n private scrollToActiveItem() {\n if (!this.nav \|\| !this.activeItem) return;\n setTimeout(() => {\n this.activeItem.scrollIntoView({\n behavior: this.instantReCalc ? 'auto' : 'smooth',\n block: 'center',\n inline: 'center',\n });\n }, 100);\n }\n\n private syncActiveItemIndicator() {\n if (!this.activeItem) return;\n\n const item = this.activeItem;\n const width = item.clientWidth \|\| 0;\n const height = item.clientHeight + 2 \|\| 0;\n const offset = getOffset(item, this.itemContainer);\n\n if (!this.activeIndicator) return;\n\n const offsetTop = offset.top;\n const offsetLeft = offset.left;\n\n if (this.instantReCalc) this.activeIndicator.style.transition = 'none';\n\n switch (this.orientation) {\n case 'horizontal':\n this.activeIndicator.style.width = `${width}px`;\n this.activeIndicator.style.height = null;\n this.activeIndicator.style.transform = `translateX(${offsetLeft}px)`;\n break;\n\n case 'vertical':\n this.activeIndicator.style.width = null;\n this.activeIndicator.style.height = `${height}px`;\n this.activeIndicator.style.transform = `translateY(${offsetTop}px)`;\n break;\n }\n setTimeout(() => (this.activeIndicator.style.transition = null), 400);\n }\n\n private updateScrollControls = () => {\n if (!this.nav) return;\n\n this.hasScrollControls =\n this.nav[this.scrollProp] > this.nav[this.clientDimProp] &&\n this.nav[this.scrollProp] > this.itemContainer[this.clientDimProp];\n this.handleScroll();\n };\n\n private handleScroll = () => {\n if (!this.hasScrollControls) {\n this.hideControlStart = this.hideControlEnd = true;\n return;\n }\n const finishEnd = this.isRtl\n ? this.nav[this.scrollOffset] === 0\n : Math.abs(\n this.nav[this.clientDimProp] -\n (this.nav[this.scrollProp] - this.nav[this.scrollOffset])\n ) < 2;\n\n const finishStart = this.isRtl\n ? Math.abs(\n this.nav[this.scrollProp] +\n this.nav[this.scrollOffset] -\n this.nav[this.clientDimProp]\n ) < 2\n : this.nav[this.scrollOffset] === 0;\n\n if (finishStart) {\n this.hideControlStart = true;\n this.hideControlEnd = false;\n } else if (finishEnd) {\n this.hideControlStart = false;\n this.hideControlEnd = true;\n } else {\n this.hideControlEnd = false;\n this.hideControlStart = false;\n }\n };\n\n private handleBtnClick = (goEnd: boolean = false) => {\n const navDim = this.navDim;\n let scrollAmt;\n if (goEnd) scrollAmt = this.nav[this.scrollOffset] + navDim - 20;\n else scrollAmt = this.nav[this.scrollOffset] - navDim + 20;\n\n try {\n this.nav.scroll({\n left: this.orientation === 'horizontal' ? scrollAmt : 0,\n top: this.orientation === 'vertical' ? scrollAmt : 0,\n behavior: 'smooth',\n });\n } catch (_e) {\n this.nav[this.scrollOffset] = scrollAmt;\n }\n };\n\n private slotChangeHandler = () => {\n if (this.allActiveItems.length < 2) return;\n const item = this.allActiveItems.find((el, i) =>\n this.isActiveHandler(el, i)\n );\n if (item) this.activeItem = item;\n this.recalculatePositions();\n\n /** maintain a weakmap of mutation observers to maintain item / indicator position on all changes. */\n this.allActiveItems.forEach((item) => {\n if (this.mutationObservers.get(item)) return;\n\n const mo = new MutationObserver(() => this.syncActiveItemIndicator());\n mo.observe(item, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n\n this.mutationObservers.set(item, mo);\n });\n };\n\n private handleClick = (event: MouseEvent) => {\n if (this.allActiveItems.length < 2) return;\n const foundItem = event\n .composedPath()\n .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n if (foundItem) this.activeItem = foundItem;\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n const foundItem = event\n .composedPath()\n .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n if (foundItem) this.activeItem = foundItem;\n }\n };\n\n private recalculatePositions = () => {\n this.updateScrollControls();\n this.syncActiveItemIndicator();\n this.scrollToActiveItem();\n };\n\n // lifecycle\n\n connectedCallback(): void {\n this.instantReCalc = true;\n this.isRtl =\n this.orientation === 'horizontal' && !!this.host.closest('[dir=\"rtl\"]');\n\n if (window['MutationObserver']) this.slotChangeHandler();\n\n if (!window['ResizeObserver']) return;\n\n if (this.ro) {\n this.ro.disconnect();\n this.ro = undefined;\n }\n const mo = (this.ro = new ResizeObserver(this.recalculatePositions));\n mo.observe(this.host);\n }\n\n componentDidLoad(): void {\n this.activeItem = this.allActiveItems.find((el, i) =>\n this.isActiveHandler(el, i)\n );\n this.instantReCalc = false;\n }\n\n disconnectedCallback(): void {\n if (this.ro) {\n this.ro.disconnect();\n this.ro = undefined;\n }\n }\n\n render() {\n return (\n <Host dir={this.isRtl ? 'rtl' : null} class=\"nano-overflow-nav\">\n <div\n part=\"base\"\n class={{\n onav: true,\n [`onav--${this.orientation}`]: true,\n 'onav--has-scroll-controls': this.hasScrollControls,\n 'onav--has-scroll-controls-start': !this.hideControlStart,\n 'onav--has-scroll-controls-end': !this.hideControlEnd,\n 'onav--no-transitions': this.instantReCalc,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"onav__nav\">\n {this.scrollControls && (\n <nano-icon-button\n part=\"scroll-button scroll-button-prev\"\n class={{\n 'onav__scroll-button': true,\n 'onav__scroll-button--start': true,\n }}\n ref={(btn) => (this.startBtn = btn)}\n onClick={() => this.handleBtnClick(false)}\n label=\"Click to scroll\"\n iconName={\n this.orientation === 'horizontal'\n ? 'light/chevron-left'\n : 'light/chevron-up'\n }\n />\n )}\n\n <div\n part=\"scroller\"\n ref={(el) => (this.nav = el)}\n class=\"onav__scroller\"\n onScroll={this.handleScroll}\n >\n <div\n part=\"items\"\n ref={(el) => (this.itemContainer = el)}\n class=\"onav__items\"\n >\n <div\n part=\"indicator\"\n ref={(el) => (this.activeIndicator = el)}\n class=\"onav__active-indicator\"\n />\n <slot onSlotchange={this.slotChangeHandler} />\n </div>\n </div>\n\n {this.scrollControls && (\n <nano-icon-button\n part=\"scroll-button scroll-button-next\"\n class={{\n 'onav__scroll-button': true,\n 'onav__scroll-button--end': true,\n }}\n ref={(btn) => (this.endBtn = btn)}\n onClick={() => this.handleBtnClick(true)}\n label=\"Click to scroll\"\n iconName={\n this.orientation === 'horizontal'\n ? 'light/chevron-right'\n : 'light/chevron-down'\n }\n />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}