npm - @nanoporetech-digital/components - Versions diffs - 2.7.0 → 2.8.0 - Mend

@nanoporetech-digital/components 2.7.0 → 2.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 (119) hide show

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

@@ -116,7 +116,7 @@ export class Icon {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },

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

@@ -423,7 +423,7 @@ export class Input {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -994,7 +994,7 @@ export class Input {
         "references": {
           "TextFieldTypes": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -1153,7 +1153,7 @@ export class Input {
         "references": {
           "InputChangeEventDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1242,7 +1242,7 @@ export class Input {
         "references": {
           "ControlValidityEventDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1264,7 +1264,7 @@ export class Input {
           },
           "ControlValidity": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<ControlValidity>"

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

@@ -516,7 +516,7 @@ export class NavItem {
         "references": {
           "NavItemEventDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -536,7 +536,7 @@ export class NavItem {
         "references": {
           "NavItemEventDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -556,7 +556,7 @@ export class NavItem {
         "references": {
           "NavItemEventDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -576,7 +576,7 @@ export class NavItem {
         "references": {
           "NavItemEventDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }

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

@@ -370,7 +370,7 @@ export class Range {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -594,7 +594,7 @@ export class Range {
         "references": {
           "RangeValue": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -632,7 +632,7 @@ export class Range {
         "references": {
           "RangeChangeEventDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -655,7 +655,7 @@ export class Range {
         "references": {
           "StyleEventDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }

package/dist/collection/components/resize-observe/resize-observe.js CHANGED Viewed

@@ -176,7 +176,7 @@ export class ResizeObserve {
         "references": {
           "ResizeStateChangeEventDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }

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

@@ -661,8 +661,8 @@ select {
   white-space: inherit;
   color: inherit;
   pointer-events: none;
-  line-height: 2.1em;
-  min-height: 2.1em;
+  line-height: 2.5em;
+  min-height: 2.5em;
 }
 @supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
   .select__mask {

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

@@ -621,7 +621,7 @@ export class Select {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -1002,7 +1002,7 @@ export class Select {
           },
           "OptionInterface": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/components/option/option-interface.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/components/option/option-interface.ts"
           }
         }
       },
@@ -1087,7 +1087,7 @@ export class Select {
           },
           "Dropdown": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/components/dropdown/dropdown.tsx"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/components/dropdown/dropdown.tsx"
           }
         }
       },
@@ -1128,7 +1128,7 @@ export class Select {
         "references": {
           "SelectChangeEventDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1214,7 +1214,7 @@ export class Select {
         "references": {
           "InputChangeEventDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1237,7 +1237,7 @@ export class Select {
         "references": {
           "ControlValidityEventDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1259,7 +1259,7 @@ export class Select {
           },
           "ControlValidity": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<ControlValidity>"

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

@@ -453,7 +453,7 @@ export class Slides {
         "references": {
           "FlickityOptions": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -556,7 +556,7 @@ export class Slides {
         "references": {
           "SlideAnimation": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -747,7 +747,7 @@ export class Slides {
         "references": {
           "DragEvent": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -767,7 +767,7 @@ export class Slides {
         "references": {
           "DragEvent": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -787,7 +787,7 @@ export class Slides {
         "references": {
           "DragEvent": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -807,7 +807,7 @@ export class Slides {
         "references": {
           "DragEvent": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1114,7 +1114,7 @@ export class Slides {
           },
           "Flickity": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<Flickity>"

package/dist/collection/components/tabs/tab-group.js CHANGED Viewed

@@ -502,7 +502,7 @@ export class TabGroup {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -545,7 +545,7 @@ export class TabGroup {
         "references": {
           "StorageMethods": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
           }
         }
       },

package/dist/collection/utils/popover.js CHANGED Viewed

@@ -96,15 +96,10 @@ export default class Popover {
           name: 'offset',
           options: {
             padding: 5,
-            offset: ({ reference, placement, popper }) => {
+            offset: ({ reference }) => {
               if (this.options.placement !== 'center')
                 return [this.options.skidding, this.options.distance];
-              return [
-                this.options.skidding,
-                ['top', 'bottom'].includes(placement)
-                  ? -reference.height - (popper.height - reference.height) / 2
-                  : -reference.width - (popper.width - reference.width) / 2,
-              ];
+              return [this.options.skidding, (reference.height + 1) * -1];
             },
           },
         },

package/dist/collection/utils/popover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover.js","sourceRoot":"","sources":["../../src/utils/popover.ts"],"names":[],"mappings":"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","sourcesContent":["//\n// A positioning utility for popovers that handles show/hide/transitionEnd events with simple callbacks.\n//\n// Powered by Popper.js.\n//\n// NOTE:\n//\n// - The popover MUST have at least one property that transitions, otherwise transitionEnd won't fire and the popover\n// won't be hidden. If transitions are delegated to a child element, set the `transitionElement` property accordingly.\n//\n// - When the popover is shown, it's assigned `PopoverOptions.visibleClass`. You can use this class to provide different\n// transitions for show/hide.\n//\n// - Popper uses `translate3d` to position elements, so adding a transition to the `transform` property may have an\n// undesired effect when the element is shown and when its placement changes.\n//\nimport { Instance as PopperInstance, createPopper } from '@popperjs/core';\nimport { raf } from './index';\n\nexport type PopoverPlacement =\n \| 'auto'\n \| 'auto-start'\n \| 'auto-end'\n \| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end'\n \| 'center';\n\ninterface PopoverOptions {\n distance?: number;\n placement?: PopoverPlacement;\n skidding?: number;\n strategy?: 'absolute' \| 'fixed';\n transitionElement?: HTMLElement;\n visibleClass?: string;\n onAfterShow?: () => any;\n onAfterHide?: () => any;\n onTransitionEnd?: (event: TransitionEvent) => any;\n}\n\nexport default class Popover {\n anchor: HTMLElement;\n isVisible: boolean;\n popover: HTMLElement;\n popper: PopperInstance;\n options: PopoverOptions;\n\n constructor(\n anchor: HTMLElement,\n popover: HTMLElement,\n options?: PopoverOptions\n ) {\n this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n\n this.anchor = anchor;\n this.popover = popover;\n this.options = Object.assign(\n {\n skidding: 0,\n distance: 0,\n placement: 'bottom-start',\n strategy: 'absolute',\n transitionElement: this.popover,\n visibleClass: 'popover-visible',\n onAfterShow: () => {},\n onAfterHide: () => {},\n onTransitionEnd: () => {},\n },\n options\n );\n\n // this.isVisible = false;\n this.popover.hidden = true;\n this.popover.classList.remove(this.options.visibleClass);\n\n this.popover.addEventListener('transitionend', this.handleTransitionEnd);\n }\n\n private handleTransitionEnd(event: TransitionEvent) {\n const target = event.target as HTMLElement;\n\n // Make sure the transition event originates from from the correct element, and not one that has bubbled up\n if (target === this.options.transitionElement) {\n // This is called before the element is hidden so users can do things like reset scroll. It will fire once for\n // every transition property. Use `event.propertyName` to determine which property has finished transitioning.\n this.options.onTransitionEnd.call(this, event);\n\n // Make sure we only do this once, since transitionend will fire for every transition\n if (this.isVisible === false && !this.popover.hidden) {\n this.popover.hidden = true;\n this.popover.classList.remove(this.options.visibleClass);\n this.options.onAfterHide.call(this);\n }\n }\n }\n\n destroy() {\n this.popover.removeEventListener('transitionend', this.handleTransitionEnd);\n if (this.popper) {\n this.popper.destroy();\n this.popper = null;\n }\n }\n\n show() {\n this.isVisible = true;\n this.popover.hidden = false;\n this.popover.clientWidth; // force reflow\n\n raf(() => this.popover.classList.add(this.options.visibleClass));\n\n if (this.popper) {\n this.popper.destroy();\n }\n\n const safePlacement: Exclude<PopoverPlacement, 'center'> =\n this.options.placement.includes('center')\n ? 'top'\n : (this.options.placement as Exclude<PopoverPlacement, 'center'>);\n\n this.popper = createPopper(this.anchor, this.popover, {\n placement: safePlacement,\n strategy: this.options.strategy,\n modifiers: [\n {\n name: 'sameWidth',\n enabled: true,\n fn: ({ state }) => {\n state.styles.popper.minWidth = `${state.rects.reference.width}px`;\n },\n phase: 'beforeWrite',\n requires: ['computeStyles'],\n },\n {\n name: 'flip',\n options: {\n boundary: 'viewport',\n },\n },\n {\n name: 'offset',\n options: {\n padding: 5,\n offset: ({ reference, placement, popper }) => {\n if (this.options.placement !== 'center')\n return [this.options.skidding, this.options.distance];\n return [\n this.options.skidding,\n ['top', 'bottom'].includes(placement)\n ? -reference.height - (popper.height - reference.height) / 2\n : -reference.width - (popper.width - reference.width) / 2,\n ];\n },\n },\n },\n ],\n });\n\n this.popover.addEventListener(\n 'transitionend',\n () => this.options.onAfterShow.call(this),\n { once: true }\n );\n\n // Reposition the menu after it appears in case a modifier kicked in\n requestAnimationFrame(() => this.popper.update());\n }\n\n hide() {\n // Apply the hidden styles and wait for the transition before hiding completely\n this.isVisible = false;\n this.popover.classList.remove(this.options.visibleClass);\n }\n\n setOptions(options: PopoverOptions) {\n this.options = Object.assign(this.options, options);\n this.isVisible\n ? this.popover.classList.add(this.options.visibleClass)\n : this.popover.classList.remove(this.options.visibleClass);\n\n const safePlacement: Exclude<PopoverPlacement, 'center'> =\n this.options.placement.includes('center')\n ? 'top'\n : (this.options.placement as Exclude<PopoverPlacement, 'center'>);\n\n // Update popper options\n if (this.popper) {\n this.popper.setOptions({\n placement: safePlacement,\n strategy: this.options.strategy,\n });\n\n requestAnimationFrame(() => this.popper.update());\n }\n }\n}\n"]}
1	+ {"version":3,"file":"popover.js","sourceRoot":"","sources":["../../src/utils/popover.ts"],"names":[],"mappings":"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","sourcesContent":["//\n// A positioning utility for popovers that handles show/hide/transitionEnd events with simple callbacks.\n//\n// Powered by Popper.js.\n//\n// NOTE:\n//\n// - The popover MUST have at least one property that transitions, otherwise transitionEnd won't fire and the popover\n// won't be hidden. If transitions are delegated to a child element, set the `transitionElement` property accordingly.\n//\n// - When the popover is shown, it's assigned `PopoverOptions.visibleClass`. You can use this class to provide different\n// transitions for show/hide.\n//\n// - Popper uses `translate3d` to position elements, so adding a transition to the `transform` property may have an\n// undesired effect when the element is shown and when its placement changes.\n//\nimport { Instance as PopperInstance, createPopper } from '@popperjs/core';\nimport { raf } from './index';\n\nexport type PopoverPlacement =\n \| 'auto'\n \| 'auto-start'\n \| 'auto-end'\n \| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end'\n \| 'center';\n\ninterface PopoverOptions {\n distance?: number;\n placement?: PopoverPlacement;\n skidding?: number;\n strategy?: 'absolute' \| 'fixed';\n transitionElement?: HTMLElement;\n visibleClass?: string;\n onAfterShow?: () => any;\n onAfterHide?: () => any;\n onTransitionEnd?: (event: TransitionEvent) => any;\n}\n\nexport default class Popover {\n anchor: HTMLElement;\n isVisible: boolean;\n popover: HTMLElement;\n popper: PopperInstance;\n options: PopoverOptions;\n\n constructor(\n anchor: HTMLElement,\n popover: HTMLElement,\n options?: PopoverOptions\n ) {\n this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n\n this.anchor = anchor;\n this.popover = popover;\n this.options = Object.assign(\n {\n skidding: 0,\n distance: 0,\n placement: 'bottom-start',\n strategy: 'absolute',\n transitionElement: this.popover,\n visibleClass: 'popover-visible',\n onAfterShow: () => {},\n onAfterHide: () => {},\n onTransitionEnd: () => {},\n },\n options\n );\n\n // this.isVisible = false;\n this.popover.hidden = true;\n this.popover.classList.remove(this.options.visibleClass);\n\n this.popover.addEventListener('transitionend', this.handleTransitionEnd);\n }\n\n private handleTransitionEnd(event: TransitionEvent) {\n const target = event.target as HTMLElement;\n\n // Make sure the transition event originates from from the correct element, and not one that has bubbled up\n if (target === this.options.transitionElement) {\n // This is called before the element is hidden so users can do things like reset scroll. It will fire once for\n // every transition property. Use `event.propertyName` to determine which property has finished transitioning.\n this.options.onTransitionEnd.call(this, event);\n\n // Make sure we only do this once, since transitionend will fire for every transition\n if (this.isVisible === false && !this.popover.hidden) {\n this.popover.hidden = true;\n this.popover.classList.remove(this.options.visibleClass);\n this.options.onAfterHide.call(this);\n }\n }\n }\n\n destroy() {\n this.popover.removeEventListener('transitionend', this.handleTransitionEnd);\n if (this.popper) {\n this.popper.destroy();\n this.popper = null;\n }\n }\n\n show() {\n this.isVisible = true;\n this.popover.hidden = false;\n this.popover.clientWidth; // force reflow\n\n raf(() => this.popover.classList.add(this.options.visibleClass));\n\n if (this.popper) {\n this.popper.destroy();\n }\n\n const safePlacement: Exclude<PopoverPlacement, 'center'> =\n this.options.placement.includes('center')\n ? 'top'\n : (this.options.placement as Exclude<PopoverPlacement, 'center'>);\n\n this.popper = createPopper(this.anchor, this.popover, {\n placement: safePlacement,\n strategy: this.options.strategy,\n modifiers: [\n {\n name: 'sameWidth',\n enabled: true,\n fn: ({ state }) => {\n state.styles.popper.minWidth = `${state.rects.reference.width}px`;\n },\n phase: 'beforeWrite',\n requires: ['computeStyles'],\n },\n {\n name: 'flip',\n options: {\n boundary: 'viewport',\n },\n },\n {\n name: 'offset',\n options: {\n padding: 5,\n offset: ({ reference }) => {\n if (this.options.placement !== 'center')\n return [this.options.skidding, this.options.distance];\n return [this.options.skidding, (reference.height + 1) * -1];\n },\n },\n },\n ],\n });\n\n this.popover.addEventListener(\n 'transitionend',\n () => this.options.onAfterShow.call(this),\n { once: true }\n );\n\n // Reposition the menu after it appears in case a modifier kicked in\n requestAnimationFrame(() => this.popper.update());\n }\n\n hide() {\n // Apply the hidden styles and wait for the transition before hiding completely\n this.isVisible = false;\n this.popover.classList.remove(this.options.visibleClass);\n }\n\n setOptions(options: PopoverOptions) {\n this.options = Object.assign(this.options, options);\n this.isVisible\n ? this.popover.classList.add(this.options.visibleClass)\n : this.popover.classList.remove(this.options.visibleClass);\n\n const safePlacement: Exclude<PopoverPlacement, 'center'> =\n this.options.placement.includes('center')\n ? 'top'\n : (this.options.placement as Exclude<PopoverPlacement, 'center'>);\n\n // Update popper options\n if (this.popper) {\n this.popper.setOptions({\n placement: safePlacement,\n strategy: this.options.strategy,\n });\n\n requestAnimationFrame(() => this.popper.update());\n }\n }\n}\n"]}

package/dist/components/nano-checkbox-group.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { HTMLElement, createEvent, forceUpdate, h, Host, proxyCustomElement } fr
 import { d as debounce } from './throttle.js';
 import { g as getClassMap } from './theme.js';
-const checkboxGroupCss = ".sc-nano-checkbox-group-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:0;--control-margin-bottom:0;--control-margin-start:0;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, \"currentColor\");--label-color--invalid:var(--nano-input-label-color-invalid, \"currentColor\");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));display:block}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{-webkit-box-sizing:inherit;box-sizing:inherit}[types-tag].sc-nano-checkbox-group-h,[types-segment].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:8px;--control-margin-bottom:8px;--control-margin-start:0}[types-checkbox].sc-nano-checkbox-group-h,[types-radio].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:10px;--control-margin-bottom:8px;--control-margin-start:0}.nanogroupcb.sc-nano-checkbox-group{border:none;margin:0;padding:0}.nanogroupcb__legend.sc-nano-checkbox-group,.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group,.nanogroupcb__more.sc-nano-checkbox-group{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nanogroupcb__legend.sc-nano-checkbox-group{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1}[invalid].sc-nano-checkbox-group-h:not([invalid=false]) .nanogroupcb__legend.sc-nano-checkbox-group{color:var(--label-color--invalid)}.nanogroupcb__more.sc-nano-checkbox-group{height:1em;margin-left:3px;margin-right:0;margin-top:calc(var(--label-padding) - var(--control-margin-bottom));margin-bottom:var(--label-padding);position:relative}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanogroupcb__more.sc-nano-checkbox-group{margin-left:unset;margin-right:unset;-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:0;margin-inline-end:0}}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:1}.nanogroupcb__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);font-stretch:condensed;opacity:0}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group{opacity:1}.nanogroupcb__help.sc-nano-checkbox-group{font-style:italic;opacity:1;color:var(--help-msg-color)}.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:0}.nanogroupcb__cbs.sc-nano-checkbox-group{margin:0;padding:0;line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]),.nanogroupcb__cbs .sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]){--check-base-size:1.2em;font-size:0.85em}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-left:var(--control-margin-start);margin-top:var(--control-margin-top);margin-right:var(--control-margin-end);margin-bottom:var(--control-margin-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--control-margin-start);margin-inline-start:var(--control-margin-start);-webkit-margin-end:var(--control-margin-end);margin-inline-end:var(--control-margin-end)}}";
+const checkboxGroupCss = ".sc-nano-checkbox-group-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:0;--control-margin-bottom:0;--control-margin-start:0;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, \"currentColor\");--label-color--invalid:var(--nano-input-label-color-invalid, \"currentColor\");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));display:block}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{-webkit-box-sizing:inherit;box-sizing:inherit}[types-tag].sc-nano-checkbox-group-h,[types-segment].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:8px;--control-margin-bottom:8px;--control-margin-start:0}[types-checkbox].sc-nano-checkbox-group-h,[types-radio].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:10px;--control-margin-bottom:8px;--control-margin-start:0}.nanogroupcb.sc-nano-checkbox-group{border:none;margin:0;padding:0}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group,.nanogroupcb__more.sc-nano-checkbox-group{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nanogroupcb__legend.sc-nano-checkbox-group{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1;white-space:normal;display:block;width:100%}[invalid].sc-nano-checkbox-group-h:not([invalid=false]) .nanogroupcb__legend.sc-nano-checkbox-group{color:var(--label-color--invalid)}.nanogroupcb__more.sc-nano-checkbox-group{height:1em;margin-left:3px;margin-right:0;margin-top:calc(var(--label-padding) - var(--control-margin-bottom));margin-bottom:var(--label-padding);position:relative}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanogroupcb__more.sc-nano-checkbox-group{margin-left:unset;margin-right:unset;-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:0;margin-inline-end:0}}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:1}.nanogroupcb__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);font-stretch:condensed;opacity:0}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group{opacity:1}.nanogroupcb__help.sc-nano-checkbox-group{font-style:italic;opacity:1;color:var(--help-msg-color)}.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:0}.nanogroupcb__cbs.sc-nano-checkbox-group{margin:0;padding:0;line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]),.nanogroupcb__cbs .sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]){--check-base-size:1.2em;font-size:0.85em}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-left:var(--control-margin-start);margin-top:var(--control-margin-top);margin-right:var(--control-margin-end);margin-bottom:var(--control-margin-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--control-margin-start);margin-inline-start:var(--control-margin-start);-webkit-margin-end:var(--control-margin-end);margin-inline-end:var(--control-margin-end)}}";
 let CheckboxGroup = class extends HTMLElement {
   constructor() {

package/dist/components/nano-checkbox-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-checkbox-group.js","mappings":";;;;;;;AAAA,MAAM,gBAAgB,GAAG,upIAAupI;;ICkCnqI,aAAa;EAL1B;;;;IAQU,UAAK,GAAG,uBAAuB,MAAM,EAAE,EAAE,CAAC;IAC1C,aAAQ,GAAG,KAAK,CAAC;IAQhB,iBAAY,GAAW,EAAE,CAAC;IAC1B,iBAAY,GAAG,KAAK,CAAC;IACrB,kBAAa,GAAG,KAAK,CAAC;;;;;IAON,eAAU,GACjC,QAAQ,CAAC;;;;IAKH,oBAAe,GAAG,IAAI,CAAC;;;;;IAMvB,QAAG,GAAW,CAAC,CAAC;;;;;IAMhB,QAAG,GAAW,IAAI,CAAC;;;;IAKF,aAAQ,GAAmB,IAAI,CAAC;;;;IAKjD,WAAM,GAAW,EAAE,CAAC;IA8HpB,kBAAa,GAAG,CAAC,EAAS;MAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;MAErB,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE;QAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;OAC3D;MACD,IAAI,CAAC,CAAC,IAAI,CAAC,eAAe;QAAE,EAAE,CAAC,cAAc,EAAE,CAAC;MAEhD,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,oBAAoB,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;KACtD,CAAC;IAEM,yBAAoB,GAAG,CAAC,EAAU;MACxC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM;QAAE,OAAO;MACtD,IAAI,IAAI,CAAC,UAAU,KAAK,iBAAiB;QAAE,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;MACrE,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;MAC1B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;MAEtB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC;QAC3B,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE;UACtB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,iBAAiB,CAAC;UACzC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;UACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;UACrB,IAAI,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE;YAC1B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;WAC/B;SACF;OACF,CAAC,CAAC;MAEH,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;QACrB,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;QACtB,YAAY,EAAE,IAAI,CAAC,YAAY;QAC/B,aAAa,EAAE,EAAE;OAClB,CAAC,CAAC;KACJ,CAAC;GA4DH;;;;;EArNC,IACI,OAAO;IACT,OAAO,IAAI,CAAC,QAAQ,CAAC;GACtB;;;;;;;EAUD,MAAM,cAAc,CAAC,aAAsB;IACzC,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO;MACzB,IAAI,aAAa;QAAE,IAAI,CAAC,oBAAoB,EAAE,CAAC;MAC/C,UAAU,CAAC;QACT,OAAO,CAAC;UACN,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;UACtB,YAAY,EAAE,IAAI,CAAC,YAAY;SAChC,CAAC,CAAC;OACJ,EAAE,EAAE,CAAC,CAAC;KACR,CAAC,CAAC;GACJ;;;;;;;EAqBD,cAAc;IACZ,IAAI,IAAI,CAAC,OAAO;MAAE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IAC5D,IAAI,CAAC,cAAc,EAAE,CAAC;IAEtB,IAAI,IAAI,CAAC,UAAU,KAAK,OAAO;MAAE,OAAO;IACxC,IAAI,CAAC,oBAAoB,EAAE,CAAC;GAC7B;EAGD,cAAc;IACZ,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU;MAAE,OAAO;;IAG1E,IAAI,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC;IACpE,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM;MAAE,OAAO;IAExC,IAAI,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;IACxD,IAAI,OAAO,GAAG,KAAK,CAAC;IAEpB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,EAAE;MACzB,IAAI,EAAE,CAAC,QAAQ,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE;QAC9B,OAAO,GAAG,IAAI,CAAC;OAChB;MAED,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;MAEhB,IAAI,IAAI,CAAC,GAAG,IAAI,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE;QAClC,EAAE,CAAC,QAAQ,CAAC,gCAAgC,IAAI,CAAC,GAAG,UAAU,CAAC,CAAC;QAChE,OAAO,GAAG,IAAI,CAAC;OAChB;MACD,IAAI,IAAI,CAAC,GAAG,IAAI,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE;QAClC,EAAE,CAAC,QAAQ,CAAC,cAAc,IAAI,CAAC,GAAG,sBAAsB,CAAC,CAAC;QAC1D,OAAO,GAAG,IAAI,CAAC;OAChB;KACF,CAAC,CAAC;IACH,OAAO,OAAO,CAAC;GAChB;EAGD,qBAAqB;IACnB,IAAI,CAAC,aAAa,GAAG,WAAW,CAC9B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,QAAQ,GAAG,EAAE,CAAC,IAAI,CAAC,CAChD,CAAC;GACH;EAID,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI;MAAE,OAAO;IACnC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;GAC5D;;EAIO,kBAAkB;IACxB,MAAM,EAAE,IAAI,IAAI,CAAC,EAAE,GAAG,IAAI,gBAAgB,CAAC,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC;IAC3E,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;GAC5C;EAEO,MAAM,gBAAgB;IAC5B,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;IAC1E,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAElE,IAAI,CAAC,SAAS,GAAG,MAAM,OAAO,CAAC,GAAG,CAChC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,GAAqC,EAAE,EAAE;MAC/D,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,eAAe,EAAE,CAAC,CAAC;MAC/B,OAAO,GAAG,CAAC;KACZ,EAAE,EAAE,CAAC,CACP,CAAC;IAEF,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE,KACxB,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CACnD,CAAC;GACH;;EAuCD,iBAAiB;IACf,IAAI,CAAC,oBAAoB,GAAG,QAAQ,CAAC,IAAI,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;IACpE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrD,IAAI,CAAC,oBAAoB,EAAE,CAAC;GAC7B;EAED,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,EAAE;MAAE,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;GACnC;EAED,gBAAgB;IACd,IAAI,CAAC,qBAAqB,EAAE,CAAC;GAC9B;EAED,MAAM;IACJ,IAAI,KAAK,GAAI,IAAI,CAAC,IAAI,CAAC,aAA0B,CAAC,GAAG,KAAK,KAAK,CAAC;IAChE,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;IACrC,MAAM,MAAM,GACV,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,CAAC;IAEzE,QACE,EAAC,IAAI,oBAAK,IAAI,CAAC,aAAa,IAAE,GAAG,EAAE,KAAK,GAAG,KAAK,GAAG,IAAI,KACrD,gBACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,IAE7D,cAAQ,KAAK,EAAC,qBAAqB,EAAC,EAAE,EAAE,QAAQ,IAC7C,IAAI,CAAC,MAAM,CACL,EACT,WACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,OAAO,qBACK,QAAQ,GAAG,GAAG,GAAG,MAAM,IAExC,eAAQ,CACJ,EACL,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,aAAa,MAC1C,WAAK,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,MAAM,IACtC,CAAC,CAAC,IAAI,CAAC,eAAe,IACrB,WAAK,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,YAAY,CAAO,KAEzD,EAAE,CACH,EACD,WAAK,KAAK,EAAC,mBAAmB,IAC5B,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACF,CACP,CACQ,CACN,EACP;GACH;;;;;;;;;;;;AAGH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/checkbox/checkbox-group.scss?tag=nano-checkbox-group&encapsulation=scoped","./src/components/checkbox/checkbox-group.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n\n:host {\n /*\n @prop --control-margin-top: Margin between controls. Default depends on control type;\n * @prop --control-margin-end: Margin between controls. Default depends on control type;\n * @prop --control-margin-bottom: Margin between controls. Default depends on control type;\n * @prop --control-margin-start: Margin between controls. Default depends on control type;\n\n * @prop --invalid-msg-color: Default #{nano-color(danger, base)};\n * @prop --invalid-msg-font-size: Default #{$input-help-font-size};\n\n * @prop --help-msg-color: Font color applied to slot=\"helper\". Default #{$input-help-color};\n\n * @prop --label-color: Default #{$label-color};\n * @prop --label-color--invalid: Default #{$label-color-invalid};\n * @prop --label-font-size: Default #{$label-font-size};\n * @prop --label-padding: space between legend and control. Default #{$input-padding-bottom};\n /\n\n --control-margin-top: 0;\n --control-margin-end: 0;\n --control-margin-bottom: 0;\n --control-margin-start: 0;\n --invalid-msg-color: #{nano-color(danger, base)};\n --invalid-msg-font-size: #{$input-help-font-size};\n --help-msg-color: #{$input-help-color};\n --label-color: #{$label-color};\n --label-color--invalid: #{$label-color-invalid};\n --label-font-size: #{$label-font-size};\n --label-padding: #{$input-padding-bottom};\n\n display: block;\n\n {\n box-sizing: inherit;\n }\n}\n\n:host([types-tag]),\n:host([types-segment]) {\n --control-margin-top: 0;\n --control-margin-end: 8px;\n --control-margin-bottom: 8px;\n --control-margin-start: 0;\n}\n\n:host([types-checkbox]),\n:host([types-radio]) {\n --control-margin-top: 0;\n --control-margin-end: 10px;\n --control-margin-bottom: 8px;\n --control-margin-start: 0;\n}\n\n.nanogroupcb {\n border: none;\n margin: 0;\n padding: 0;\n\n &__legend,\n &__error,\n &__help,\n &__more {\n display: block;\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n &__legend {\n font-size: var(--label-font-size);\n padding: 0 0 var(--label-padding);\n margin: 0;\n line-height: 1;\n\n :host([invalid]:not([invalid='false'])) & {\n color: var(--label-color--invalid);\n }\n }\n\n &__more {\n height: 1em;\n\n @include margin(\n calc(var(--label-padding) - var(--control-margin-bottom)),\n 0,\n var(--label-padding),\n 3px\n );\n\n position: relative;\n }\n\n &__error,\n &__help {\n top: 0;\n left: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n\n .show-error & {\n opacity: 1;\n }\n }\n\n &__error {\n color: var(--invalid-msg-color);\n font-stretch: condensed;\n opacity: 0;\n\n .show-error & {\n opacity: 1;\n }\n }\n\n &__help {\n font-style: italic;\n opacity: 1;\n color: var(--help-msg-color);\n\n .show-error & {\n opacity: 0;\n }\n }\n\n &__cbs {\n margin: 0;\n padding: 0;\n line-height: 1;\n display: flex;\n flex-wrap: wrap;\n\n ::slotted(:not([type='tag']):not([type='segment']):not([type='segment-pill'])) {\n --check-base-size: 1.2em;\n\n font-size: 0.85em;\n }\n\n ::slotted() {\n margin-left: var(--control-margin-start);\n margin-top: var(--control-margin-top);\n margin-right: var(--control-margin-end);\n margin-bottom: var(--control-margin-bottom);\n }\n }\n}\n\n/* autoprefixer: ignore next /\n@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {\n .nanogroupcb__cbs {\n &::slotted(),\n ::slotted() {\n margin-left: unset;\n margin-right: unset;\n margin-inline-start: var(--control-margin-start);\n margin-inline-end: var(--control-margin-end);\n }\n }\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n ComponentInterface,\n State,\n Listen,\n Watch,\n Host,\n Method,\n forceUpdate,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport {\n CssClassMap,\n ControlValidityEventDetail,\n ControlValidity,\n} from '../../interface';\nimport { debounce, getClassMap } from '../../utils';\n\n/\n `nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.\n * It provides a convenient place to anchor a collective label and any validation issues.\n \n @slot - Used for grouping checkboxes inside the group wrapper\n * @slot helper - helper text to accompany the form field underneath.\n /\n@Component({\n tag: 'nano-checkbox-group',\n styleUrl: 'checkbox-group.scss',\n scoped: true,\n})\nexport class CheckboxGroup implements ComponentInterface {\n private mo?: MutationObserver;\n private checkboxTypes: CssClassMap;\n private grpId = `nano-checkbox-group-${grpIds++}`;\n private _invalid = false;\n\n @Element() host: HTMLNanoCheckboxGroupElement;\n\n // internal state\n\n @State() checkboxes: HTMLNanoCheckboxElement[];\n @State() nativeCbs: HTMLInputElement[];\n @State() errorMessage: string = '';\n @State() showErrorMsg = false;\n @State() hasHelperSlot = false;\n\n // public properties\n\n /\n When should the field perform validation\n /\n @Prop({ mutable: true }) validateOn?: 'dirty' \| 'submit' \| 'submitThenDirty' =\n 'submit';\n\n /\n Whether to show validation errors underneath input\n /\n @Prop() showInlineError = true;\n\n /\n The minimum number of checkboxes required to be valid. Only relevant for checkbox type controls.\n * A validation error will be thrown if not enough controls are checked.\n /\n @Prop() min: number = 0;\n\n /\n The maximum number of checkboxes allowed. Only relevant for checkbox type controls.\n * Other controls will automatically be disabled upon reaching this number.\n /\n @Prop() max: number = null;\n\n /\n Disable all the nested form controls\n /\n @Prop({ reflect: true }) disabled: boolean \| null = null;\n\n /\n A common label for children controls\n /\n @Prop() legend: string = '';\n\n /\n This will be true when the control is in an invalid state.\n * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n /\n @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n\n // Public methods\n\n /\n Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `{ isValid: boolean, errorMessage: string }`\n /\n @Method()\n async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n return new Promise((resolve) => {\n if (validateFirst) this.showInlineValidation();\n setTimeout(() => {\n resolve({\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n });\n }, 20);\n });\n }\n\n // Events\n\n /\n Called when validation is performed (which depends on `validateOn`).\n * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n /\n @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n // listeners & watchers\n\n /\n Notes on validation... custom validation messages should be set\n * no matter whether we show inline messages or native html5.\n * this will mean forms cannot submit when there are pending validation issues.\n */\n @Listen('nanoChange')\n @Watch('validateOn')\n @Watch('min')\n @Watch('max')\n handleCbChange() {\n if (this.invalid) this.showErrorMsg = this._invalid = false;\n this.customValidate();\n\n if (this.validateOn !== 'dirty') return;\n this.showInlineValidation();\n }\n\n @Watch('nativeCbs')\n customValidate() {\n if (!this.nativeCbs \|\| !this.nativeCbs.length \|\| !this.checkboxes) return;\n\n // we only care about checkbox controls.\n let onlyCbs = this.nativeCbs.filter((cb) => cb.type === 'checkbox');\n if (!onlyCbs \|\| !onlyCbs.length) return;\n\n let checked = onlyCbs.filter((cb) => cb.checked).length;\n let invalid = false;\n\n this.checkboxes.forEach((cb) => {\n if (cb.required && !cb.checked) {\n invalid = true;\n }\n\n cb.setError('');\n\n if (this.min && checked < this.min) {\n cb.setError(`You must select a minimum of ${this.min} values.`);\n invalid = true;\n }\n if (this.max && checked > this.max) {\n cb.setError(`Only up to ${this.max} values are allowed.`);\n invalid = true;\n }\n });\n return invalid;\n }\n\n @Watch('checkboxes')\n handleComponentChange() {\n this.checkboxTypes = getClassMap(\n this.checkboxes.map((cb) => 'types-' + cb.type)\n );\n }\n\n @Watch('disabled')\n @Watch('checkboxes')\n handleDisabledChange() {\n if (this.disabled === null) return;\n this.checkboxes.map((cb) => (cb.disabled = this.disabled));\n }\n\n // private methods\n\n private attachSlotObserver() {\n const mo = (this.mo = new MutationObserver(() => this.handleSlotChange()));\n mo.observe(this.host, { childList: true });\n }\n\n private async handleSlotChange() {\n forceUpdate(this.host);\n this.checkboxes = Array.from(this.host.querySelectorAll('nano-checkbox'));\n this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n this.nativeCbs = await Promise.all(\n this.checkboxes.reduce((acc: Array<Promise<HTMLInputElement>>, cb) => {\n acc.push(cb.getInputElement());\n return acc;\n }, [])\n );\n\n this.nativeCbs.forEach((cb) =>\n cb.addEventListener('invalid', this.handleInvalid)\n );\n }\n\n private handleInvalid = (ev: Event) => {\n this._invalid = true;\n\n if (this.validateOn === 'submit') {\n this._invalid = this.showErrorMsg = this.customValidate();\n }\n if (!!this.showInlineError) ev.preventDefault();\n\n setTimeout((_) => this.showInlineValidation(ev), 20);\n };\n\n private showInlineValidation = (ev?: Event) => {\n if (!this.nativeCbs \|\| !this.nativeCbs.length) return;\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n this.showErrorMsg = false;\n this._invalid = false;\n\n this.nativeCbs.forEach((cb, i) => {\n if (!cb.validity.valid) {\n this.errorMessage = cb.validationMessage;\n this.showErrorMsg = true;\n this._invalid = true;\n if (!!this.showInlineError) {\n this.checkboxes[i].setFocus();\n }\n }\n });\n\n this.nanoValidate.emit({\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n originalEvent: ev,\n });\n };\n\n // stencil hooks\n\n componentWillLoad() {\n this.showInlineValidation = debounce(this.showInlineValidation, 20);\n this.customValidate = this.customValidate.bind(this);\n this.handleDisabledChange();\n }\n\n connectedCallback() {\n this.attachSlotObserver();\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.handleComponentChange();\n }\n\n render() {\n let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n const legendId = this.grpId + '-lbl';\n const moreId =\n this.showInlineError \|\| this.hasHelperSlot ? this.grpId + '-more' : '';\n\n return (\n <Host {...this.checkboxTypes} dir={isRtl ? 'rtl' : null}>\n <fieldset\n disabled={this.disabled}\n class={{ nanogroupcb: true, 'show-error': this.showErrorMsg }}\n >\n <legend class=\"nanogroupcb__legend\" id={legendId}>\n {this.legend}\n </legend>\n <div\n class=\"nanogroupcb__cbs\"\n role=\"group\"\n aria-labelledby={legendId + ' ' + moreId}\n >\n <slot />\n </div>\n {(this.showInlineError \|\| this.hasHelperSlot) && (\n <div class=\"nanogroupcb__more\" id={moreId}>\n {!!this.showInlineError ? (\n <div class=\"nanogroupcb__error\">{this.errorMessage}</div>\n ) : (\n ''\n )}\n <div class=\"nanogroupcb__help\">\n <slot name=\"helper\" />\n </div>\n </div>\n )}\n </fieldset>\n </Host>\n );\n }\n}\n\nlet grpIds = 0;\n"],"version":3}
1	+ {"file":"nano-checkbox-group.js","mappings":"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","names":[],"sources":["./src/components/checkbox/checkbox-group.scss?tag=nano-checkbox-group&encapsulation=scoped","./src/components/checkbox/checkbox-group.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n\n:host {\n /*\n @prop --control-margin-top: Margin between controls. Default depends on control type;\n * @prop --control-margin-end: Margin between controls. Default depends on control type;\n * @prop --control-margin-bottom: Margin between controls. Default depends on control type;\n * @prop --control-margin-start: Margin between controls. Default depends on control type;\n\n * @prop --invalid-msg-color: Default #{nano-color(danger, base)};\n * @prop --invalid-msg-font-size: Default #{$input-help-font-size};\n\n * @prop --help-msg-color: Font color applied to slot=\"helper\". Default #{$input-help-color};\n\n * @prop --label-color: Default #{$label-color};\n * @prop --label-color--invalid: Default #{$label-color-invalid};\n * @prop --label-font-size: Default #{$label-font-size};\n * @prop --label-padding: space between legend and control. Default #{$input-padding-bottom};\n /\n\n --control-margin-top: 0;\n --control-margin-end: 0;\n --control-margin-bottom: 0;\n --control-margin-start: 0;\n --invalid-msg-color: #{nano-color(danger, base)};\n --invalid-msg-font-size: #{$input-help-font-size};\n --help-msg-color: #{$input-help-color};\n --label-color: #{$label-color};\n --label-color--invalid: #{$label-color-invalid};\n --label-font-size: #{$label-font-size};\n --label-padding: #{$input-padding-bottom};\n\n display: block;\n\n {\n box-sizing: inherit;\n }\n}\n\n:host([types-tag]),\n:host([types-segment]) {\n --control-margin-top: 0;\n --control-margin-end: 8px;\n --control-margin-bottom: 8px;\n --control-margin-start: 0;\n}\n\n:host([types-checkbox]),\n:host([types-radio]) {\n --control-margin-top: 0;\n --control-margin-end: 10px;\n --control-margin-bottom: 8px;\n --control-margin-start: 0;\n}\n\n.nanogroupcb {\n border: none;\n margin: 0;\n padding: 0;\n\n &__error,\n &__help,\n &__more {\n display: block;\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n &__legend {\n font-size: var(--label-font-size);\n padding: 0 0 var(--label-padding);\n margin: 0;\n line-height: 1;\n white-space: normal;\n display: block;\n width: 100%;\n\n :host([invalid]:not([invalid='false'])) & {\n color: var(--label-color--invalid);\n }\n }\n\n &__more {\n height: 1em;\n\n @include margin(\n calc(var(--label-padding) - var(--control-margin-bottom)),\n 0,\n var(--label-padding),\n 3px\n );\n\n position: relative;\n }\n\n &__error,\n &__help {\n top: 0;\n left: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n\n .show-error & {\n opacity: 1;\n }\n }\n\n &__error {\n color: var(--invalid-msg-color);\n font-stretch: condensed;\n opacity: 0;\n\n .show-error & {\n opacity: 1;\n }\n }\n\n &__help {\n font-style: italic;\n opacity: 1;\n color: var(--help-msg-color);\n\n .show-error & {\n opacity: 0;\n }\n }\n\n &__cbs {\n margin: 0;\n padding: 0;\n line-height: 1;\n display: flex;\n flex-wrap: wrap;\n\n ::slotted(:not([type='tag']):not([type='segment']):not([type='segment-pill'])) {\n --check-base-size: 1.2em;\n\n font-size: 0.85em;\n }\n\n ::slotted() {\n margin-left: var(--control-margin-start);\n margin-top: var(--control-margin-top);\n margin-right: var(--control-margin-end);\n margin-bottom: var(--control-margin-bottom);\n }\n }\n}\n\n/* autoprefixer: ignore next /\n@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {\n .nanogroupcb__cbs {\n &::slotted(),\n ::slotted() {\n margin-left: unset;\n margin-right: unset;\n margin-inline-start: var(--control-margin-start);\n margin-inline-end: var(--control-margin-end);\n }\n }\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n ComponentInterface,\n State,\n Listen,\n Watch,\n Host,\n Method,\n forceUpdate,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport {\n CssClassMap,\n ControlValidityEventDetail,\n ControlValidity,\n} from '../../interface';\nimport { debounce, getClassMap } from '../../utils';\n\n/\n `nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.\n * It provides a convenient place to anchor a collective label and any validation issues.\n \n @slot - Used for grouping checkboxes inside the group wrapper\n * @slot helper - helper text to accompany the form field underneath.\n /\n@Component({\n tag: 'nano-checkbox-group',\n styleUrl: 'checkbox-group.scss',\n scoped: true,\n})\nexport class CheckboxGroup implements ComponentInterface {\n private mo?: MutationObserver;\n private checkboxTypes: CssClassMap;\n private grpId = `nano-checkbox-group-${grpIds++}`;\n private _invalid = false;\n\n @Element() host: HTMLNanoCheckboxGroupElement;\n\n // internal state\n\n @State() checkboxes: HTMLNanoCheckboxElement[];\n @State() nativeCbs: HTMLInputElement[];\n @State() errorMessage: string = '';\n @State() showErrorMsg = false;\n @State() hasHelperSlot = false;\n\n // public properties\n\n /\n When should the field perform validation\n /\n @Prop({ mutable: true }) validateOn?: 'dirty' \| 'submit' \| 'submitThenDirty' =\n 'submit';\n\n /\n Whether to show validation errors underneath input\n /\n @Prop() showInlineError = true;\n\n /\n The minimum number of checkboxes required to be valid. Only relevant for checkbox type controls.\n * A validation error will be thrown if not enough controls are checked.\n /\n @Prop() min: number = 0;\n\n /\n The maximum number of checkboxes allowed. Only relevant for checkbox type controls.\n * Other controls will automatically be disabled upon reaching this number.\n /\n @Prop() max: number = null;\n\n /\n Disable all the nested form controls\n /\n @Prop({ reflect: true }) disabled: boolean \| null = null;\n\n /\n A common label for children controls\n /\n @Prop() legend: string = '';\n\n /\n This will be true when the control is in an invalid state.\n * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n /\n @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n\n // Public methods\n\n /\n Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `{ isValid: boolean, errorMessage: string }`\n /\n @Method()\n async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n return new Promise((resolve) => {\n if (validateFirst) this.showInlineValidation();\n setTimeout(() => {\n resolve({\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n });\n }, 20);\n });\n }\n\n // Events\n\n /\n Called when validation is performed (which depends on `validateOn`).\n * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n /\n @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n // listeners & watchers\n\n /\n Notes on validation... custom validation messages should be set\n * no matter whether we show inline messages or native html5.\n * this will mean forms cannot submit when there are pending validation issues.\n */\n @Listen('nanoChange')\n @Watch('validateOn')\n @Watch('min')\n @Watch('max')\n handleCbChange() {\n if (this.invalid) this.showErrorMsg = this._invalid = false;\n this.customValidate();\n\n if (this.validateOn !== 'dirty') return;\n this.showInlineValidation();\n }\n\n @Watch('nativeCbs')\n customValidate() {\n if (!this.nativeCbs \|\| !this.nativeCbs.length \|\| !this.checkboxes) return;\n\n // we only care about checkbox controls.\n let onlyCbs = this.nativeCbs.filter((cb) => cb.type === 'checkbox');\n if (!onlyCbs \|\| !onlyCbs.length) return;\n\n let checked = onlyCbs.filter((cb) => cb.checked).length;\n let invalid = false;\n\n this.checkboxes.forEach((cb) => {\n if (cb.required && !cb.checked) {\n invalid = true;\n }\n\n cb.setError('');\n\n if (this.min && checked < this.min) {\n cb.setError(`You must select a minimum of ${this.min} values.`);\n invalid = true;\n }\n if (this.max && checked > this.max) {\n cb.setError(`Only up to ${this.max} values are allowed.`);\n invalid = true;\n }\n });\n return invalid;\n }\n\n @Watch('checkboxes')\n handleComponentChange() {\n this.checkboxTypes = getClassMap(\n this.checkboxes.map((cb) => 'types-' + cb.type)\n );\n }\n\n @Watch('disabled')\n @Watch('checkboxes')\n handleDisabledChange() {\n if (this.disabled === null) return;\n this.checkboxes.map((cb) => (cb.disabled = this.disabled));\n }\n\n // private methods\n\n private attachSlotObserver() {\n const mo = (this.mo = new MutationObserver(() => this.handleSlotChange()));\n mo.observe(this.host, { childList: true });\n }\n\n private async handleSlotChange() {\n forceUpdate(this.host);\n this.checkboxes = Array.from(this.host.querySelectorAll('nano-checkbox'));\n this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n this.nativeCbs = await Promise.all(\n this.checkboxes.reduce((acc: Array<Promise<HTMLInputElement>>, cb) => {\n acc.push(cb.getInputElement());\n return acc;\n }, [])\n );\n\n this.nativeCbs.forEach((cb) =>\n cb.addEventListener('invalid', this.handleInvalid)\n );\n }\n\n private handleInvalid = (ev: Event) => {\n this._invalid = true;\n\n if (this.validateOn === 'submit') {\n this._invalid = this.showErrorMsg = this.customValidate();\n }\n if (!!this.showInlineError) ev.preventDefault();\n\n setTimeout((_) => this.showInlineValidation(ev), 20);\n };\n\n private showInlineValidation = (ev?: Event) => {\n if (!this.nativeCbs \|\| !this.nativeCbs.length) return;\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n this.showErrorMsg = false;\n this._invalid = false;\n\n this.nativeCbs.forEach((cb, i) => {\n if (!cb.validity.valid) {\n this.errorMessage = cb.validationMessage;\n this.showErrorMsg = true;\n this._invalid = true;\n if (!!this.showInlineError) {\n this.checkboxes[i].setFocus();\n }\n }\n });\n\n this.nanoValidate.emit({\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n originalEvent: ev,\n });\n };\n\n // stencil hooks\n\n componentWillLoad() {\n this.showInlineValidation = debounce(this.showInlineValidation, 20);\n this.customValidate = this.customValidate.bind(this);\n this.handleDisabledChange();\n }\n\n connectedCallback() {\n this.attachSlotObserver();\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.handleComponentChange();\n }\n\n render() {\n let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n const legendId = this.grpId + '-lbl';\n const moreId =\n this.showInlineError \|\| this.hasHelperSlot ? this.grpId + '-more' : '';\n\n return (\n <Host {...this.checkboxTypes} dir={isRtl ? 'rtl' : null}>\n <fieldset\n disabled={this.disabled}\n class={{ nanogroupcb: true, 'show-error': this.showErrorMsg }}\n >\n <legend class=\"nanogroupcb__legend\" id={legendId}>\n {this.legend}\n </legend>\n <div\n class=\"nanogroupcb__cbs\"\n role=\"group\"\n aria-labelledby={legendId + ' ' + moreId}\n >\n <slot />\n </div>\n {(this.showInlineError \|\| this.hasHelperSlot) && (\n <div class=\"nanogroupcb__more\" id={moreId}>\n {!!this.showInlineError ? (\n <div class=\"nanogroupcb__error\">{this.errorMessage}</div>\n ) : (\n ''\n )}\n <div class=\"nanogroupcb__help\">\n <slot name=\"helper\" />\n </div>\n </div>\n )}\n </fieldset>\n </Host>\n );\n }\n}\n\nlet grpIds = 0;\n"],"version":3}

package/dist/components/nano-global-nav.js CHANGED Viewed

@@ -115,7 +115,8 @@ let GlobalNav = class extends HTMLElement {
     this.searchValInternal = '';
     /**
      * Connect to local, dev, test or prod MyAccount
-     * environments to retrieve global nav / sso data
+     * environments to retrieve global nav / sso data.
+     * Alternatively, you can use the `ssoDataUrl` prop.
      */
     this.env = 'prod';
     /**
@@ -505,6 +506,46 @@ let GlobalNav = class extends HTMLElement {
     this.showAutocomplete = false;
     return;
   }
+  async getMyAccData() {
+    if (!this.getMyAccountData || this.myAccData) {
+      this.remoteDataReady = true;
+      return;
+    }
+    let url = this.ssoDataUrl;
+    if (!url) {
+      switch (this.env) {
+        case 'dev':
+          url = 'https://myaccount-dev.nanoporetech.com/';
+          break;
+        case 'test':
+          url = 'https://myaccount-test.nanoporetech.com/';
+          break;
+        default:
+          url = 'https://myaccount.nanoporetech.com/';
+          break;
+      }
+    }
+    var config = { timeout: 5000 };
+    try {
+      if (this.env === 'local') {
+        this.myAccData = (await import('./local-my-account.js'));
+      }
+      else {
+        this.myAccData = await clientFetch(url + 'nav_bar_data.json', config);
+      }
+      if (this.myAccData.user.id) {
+        this.isLoggedIn = true;
+        this.myAccountUser = this.myAccData.user;
+      }
+      this.processMyAccLinks();
+      this.processMyAccData();
+      setTimeout(() => (this.remoteDataReady = true), 300);
+    }
+    catch (e) {
+      console.error(e);
+      this.remoteDataReady = true;
+    }
+  }
   currentSelectedIndex() {
     if (!this.internalSearchIndeces.length) {
       return;
@@ -1018,44 +1059,6 @@ let GlobalNav = class extends HTMLElement {
       return singleResult;
     }
   }
-  async getMyAccData() {
-    if (!this.getMyAccountData || this.myAccData) {
-      this.remoteDataReady = true;
-      return;
-    }
-    let url;
-    switch (this.env) {
-      case 'dev':
-        url = 'https://myaccount-dev.nanoporetech.com/';
-        break;
-      case 'test':
-        url = 'https://myaccount-test.nanoporetech.com/';
-        break;
-      default:
-        url = 'https://myaccount.nanoporetech.com/';
-        break;
-    }
-    var config = { timeout: 5000 };
-    try {
-      if (this.env === 'local') {
-        this.myAccData = (await import('./local-my-account.js'));
-      }
-      else {
-        this.myAccData = await clientFetch(url + 'nav_bar_data.json', config);
-      }
-      if (this.myAccData.user.id) {
-        this.isLoggedIn = true;
-        this.myAccountUser = this.myAccData.user;
-      }
-      this.processMyAccLinks();
-      this.processMyAccData();
-      setTimeout(() => (this.remoteDataReady = true), 300);
-    }
-    catch (e) {
-      console.error(e);
-      this.remoteDataReady = true;
-    }
-  }
   processMyAccData() {
     if (!this.myAccData || !this.myAccData.search.indeces.length)
       return;
@@ -1115,6 +1118,8 @@ let GlobalNav = class extends HTMLElement {
   static get assetsDirs() { return ["assets"]; }
   get el() { return this; }
   static get watchers() { return {
+    "env": ["getMyAccData"],
+    "ssoDataUrl": ["getMyAccData"],
     "searchIndex": ["currentSelectedIndex"],
     "searchValInternal": ["changeInternalSearchVal"],
     "searchApiKey": ["initAlgoliaClient"],
@@ -1138,6 +1143,7 @@ let GlobalNav = class extends HTMLElement {
 };
 GlobalNav = /*@__PURE__*/ proxyCustomElement(GlobalNav, [1, "nano-global-nav", {
     "env": [1],
+    "ssoDataUrl": [1, "sso-data-url"],
     "ssoRedirect": [1, "sso-redirect"],
     "getMyAccountData": [4, "get-my-account-data"],
     "activeMyAccountSections": [16],