@nanoporetech-digital/components 4.5.3 → 4.6.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.
- package/CHANGELOG.md +18 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/nano-components.cjs.js +1 -1
- package/dist/cjs/nano-dialog.cjs.entry.js +1 -1
- package/dist/cjs/nano-dialog.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-field-validator.cjs.entry.js +43 -29
- package/dist/cjs/nano-field-validator.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-icon-button_2.cjs.entry.js +2 -1
- package/dist/cjs/nano-icon-button_2.cjs.entry.js.map +1 -1
- package/dist/cjs/{nano-table-f47280ac.js → nano-table-bd3f6030.js} +2 -2
- package/dist/cjs/{nano-table-f47280ac.js.map → nano-table-bd3f6030.js.map} +1 -1
- package/dist/cjs/nano-table.cjs.entry.js +1 -1
- package/dist/cjs/{table.worker-9a1585c7.js → table.worker-6652af10.js} +2 -2
- package/dist/cjs/table.worker-6652af10.js.map +1 -0
- package/dist/collection/components/dialog/dialog.css +1 -0
- package/dist/collection/components/dialog/dialog.js +1 -1
- package/dist/collection/components/dialog/dialog.js.map +1 -1
- package/dist/collection/components/field-validator/field-validator.js +81 -33
- package/dist/collection/components/field-validator/field-validator.js.map +1 -1
- package/dist/collection/components/tooltip/tooltip.js +2 -1
- package/dist/collection/components/tooltip/tooltip.js.map +1 -1
- package/dist/components/nano-dialog.js +1 -1
- package/dist/components/nano-dialog.js.map +1 -1
- package/dist/components/nano-field-validator.js +45 -30
- package/dist/components/nano-field-validator.js.map +1 -1
- package/dist/components/tooltip.js +2 -1
- package/dist/components/tooltip.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/nano-components.js +1 -1
- package/dist/esm/nano-dialog.entry.js +1 -1
- package/dist/esm/nano-dialog.entry.js.map +1 -1
- package/dist/esm/nano-field-validator.entry.js +43 -29
- package/dist/esm/nano-field-validator.entry.js.map +1 -1
- package/dist/esm/nano-icon-button_2.entry.js +2 -1
- package/dist/esm/nano-icon-button_2.entry.js.map +1 -1
- package/dist/esm/{nano-table-7d22e310.js → nano-table-f752a163.js} +2 -2
- package/dist/esm/{nano-table-7d22e310.js.map → nano-table-f752a163.js.map} +1 -1
- package/dist/esm/nano-table.entry.js +1 -1
- package/dist/esm/{table.worker-55bb0326.js → table.worker-031db1c8.js} +2 -2
- package/dist/esm/table.worker-031db1c8.js.map +1 -0
- package/dist/nano-components/nano-components.esm.js +1 -1
- package/dist/nano-components/nano-components.esm.js.map +1 -1
- package/dist/nano-components/{p-ffb57a0d.js → p-0d773484.js} +2 -2
- package/dist/nano-components/p-3dd8ae89.entry.js +5 -0
- package/dist/nano-components/p-3dd8ae89.entry.js.map +1 -0
- package/dist/nano-components/{p-691c4268.entry.js → p-64b56ee6.entry.js} +2 -2
- package/dist/nano-components/{p-691c4268.entry.js.map → p-64b56ee6.entry.js.map} +1 -1
- package/dist/nano-components/{p-27eb26ef.entry.js → p-937acbe2.entry.js} +2 -2
- package/dist/nano-components/{p-27eb26ef.entry.js.map → p-937acbe2.entry.js.map} +1 -1
- package/dist/nano-components/{p-27b5e10c.entry.js → p-bc835f84.entry.js} +2 -2
- package/dist/nano-components/{p-dbf47e49.js → p-e2b004ce.js} +2 -2
- package/dist/types/components/field-validator/field-validator.d.ts +11 -3
- package/dist/types/components.d.ts +7 -1
- package/docs-json.json +28 -3
- package/hydrate/index.js +48 -32
- package/package.json +2 -2
- package/dist/cjs/table.worker-9a1585c7.js.map +0 -1
- package/dist/esm/table.worker-55bb0326.js.map +0 -1
- package/dist/nano-components/p-357a0a3f.entry.js +0 -5
- package/dist/nano-components/p-357a0a3f.entry.js.map +0 -1
- /package/dist/nano-components/{p-ffb57a0d.js.map → p-0d773484.js.map} +0 -0
- /package/dist/nano-components/{p-27b5e10c.entry.js.map → p-bc835f84.entry.js.map} +0 -0
- /package/dist/nano-components/{p-dbf47e49.js.map → p-e2b004ce.js.map} +0 -0
@@ -1 +1 @@
|
|
1
|
-
{"file":"tooltip.js","mappings":"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","names":[],"sources":["./src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n --max-width: 20rem;\n --hide-delay: 0s;\n --hide-duration: 0.125s;\n --hide-timing-function: ease;\n --show-delay: 0.125s;\n --show-duration: 0.125s;\n --show-timing-function: ease;\n\n /* autoprefixer: ignore next */\n display: contents;\n}\n\n.tooltip {\n $self: &;\n\n max-inline-size: var(--max-width);\n border-radius: #{$tooltip-border-radius};\n background-color: black;\n font-size: #{$tooltip-fontsize};\n line-height: 1.5;\n color: white;\n opacity: 0;\n padding: #{$tooltip-padding};\n transform: translateY(10px) translateZ(0);\n transform-origin: bottom;\n transition: opacity, transform var(--hide-duration) var(--hide-timing-function) var(--hide-delay);\n white-space: normal;\n\n &-arrow {\n content: '';\n position: absolute;\n inline-size: 0;\n block-size: 0;\n color: black;\n transition: 0.2s ease transform;\n }\n\n &-positioner {\n position: absolute;\n z-index: #{$layer-index-tooltip};\n\n &[data-popper-placement^='top'] #{$self} {\n transform-origin: bottom;\n transform: translateY(-10px) translateZ(0);\n }\n\n &[data-popper-placement^='bottom'] #{$self} {\n transform-origin: top;\n }\n\n &[data-popper-placement^='left'] #{$self} {\n transform-origin: right;\n }\n\n &[data-popper-placement^='right'] #{$self} {\n transform-origin: left;\n }\n\n &.popover-visible #{$self} {\n opacity: 1;\n transform: none;\n transition-delay: var(--show-delay);\n transition-duration: var(--show-duration);\n transition-timing-function: var(--show-timing-function);\n }\n\n // Arrow + bottom\n &[data-popper-placement^='bottom'] #{$self}-arrow {\n inset-block-end: 100%;\n inset-inline-start: calc(50% - #{$tooltip-arrow-size});\n border-block-end: #{$tooltip-arrow-size} solid;\n border-inline-start: #{$tooltip-arrow-size} solid transparent;\n border-inline-end: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='bottom-start'] #{$self}-arrow {\n inset-inline-start: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='bottom-end'] #{$self}-arrow {\n inset-inline: auto #{$tooltip-arrow-offset};\n }\n\n // Arrow + top\n &[data-popper-placement^='top'] #{$self}-arrow {\n inset-block-start: 100%;\n inset-inline-start: calc(50% - #{$tooltip-arrow-size});\n border-block-start: #{$tooltip-arrow-size} solid;\n border-inline-start: #{$tooltip-arrow-size} solid transparent;\n border-inline-end: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='top-start'] #{$self}-arrow {\n inset-inline-start: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='top-end'] #{$self}-arrow {\n inset-inline: auto #{$tooltip-arrow-offset};\n }\n\n // Arrow + left\n &[data-popper-placement^='left'] #{$self}-arrow {\n inset-block-start: calc(50% - #{$tooltip-arrow-size});\n inset-inline-start: 100%;\n border-inline-start: #{$tooltip-arrow-size} solid;\n border-block-start: #{$tooltip-arrow-size} solid transparent;\n border-block-end: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='left-start'] #{$self}-arrow {\n inset-block-start: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='left-end'] #{$self}-arrow {\n inset-block: auto #{$tooltip-arrow-offset};\n }\n\n // Arrow + right\n &[data-popper-placement^='right'] #{$self}-arrow {\n inset-block-start: calc(50% - #{$tooltip-arrow-size});\n inset-inline-end: 100%;\n border-inline-end: #{$tooltip-arrow-size} solid;\n border-block-start: #{$tooltip-arrow-size} solid transparent;\n border-block-end: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='right-start'] #{$self}-arrow {\n inset-block-start: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='right-end'] #{$self}-arrow {\n inset-block: auto #{$tooltip-arrow-offset};\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n Watch,\n h,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\n\n/**\n * Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n */\n@Component({\n tag: 'nano-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true,\n})\nexport class Tooltip {\n private isVisible = false;\n private popover: Popover;\n private tooltipPositioner: HTMLElement;\n private tooltip: any;\n\n private _target: HTMLElement;\n private get target() {\n return this._target;\n }\n private set target(newTarget) {\n if (newTarget !== this._target && this._target) {\n this._target.removeAttribute('aria-label');\n }\n newTarget.setAttribute('aria-label', this.label);\n this._target = newTarget;\n }\n\n private label = '';\n\n @Element() host: HTMLNanoTooltipElement;\n\n /** The tooltip's content. Alternatively, you can use the content slot. */\n @Prop() content = '';\n\n @Watch('content')\n setLabel() {\n const contentSlotNodes = Array.from(\n this.host.querySelectorAll('[slot=\"content\"]')\n );\n const textContent = contentSlotNodes\n .map((node) => node.textContent)\n .join(' ')\n .trim();\n\n if (!this.target) {\n this.target = this.getTarget();\n\n if (!this.target) return;\n }\n\n this.label = textContent || this.content;\n this.target.setAttribute('aria-label', this.label);\n }\n\n /**\n * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n * inside of the viewport.\n */\n @Prop() placement:\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end' = 'top';\n\n /** Set to true to disable the tooltip so it won't show when triggered. */\n @Prop() disabled = false;\n\n /** The distance in pixels from which to offset the tooltip away from its target. */\n @Prop() distance = 10;\n\n /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /** The distance in pixels from which to offset the tooltip along its target. */\n @Prop() skidding = 0;\n\n /**\n * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n * `overflow: auto|scroll`.\n */\n @Prop() hoist = false;\n\n /**\n * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n */\n @Prop() trigger: string = 'hover focus';\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n // Events\n\n /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */\n @Event() nanoShow: EventEmitter;\n\n /** Emitted after the tooltip has shown and all transitions are complete. */\n @Event() nanoAfterShow: EventEmitter;\n\n /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */\n @Event() nanoHide: EventEmitter;\n\n /** Emitted after the tooltip has hidden and all transitions are complete. */\n @Event() nanoAfterHide: EventEmitter;\n\n // Public methods\n\n /** Shows the tooltip. */\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible || this.disabled) {\n return;\n }\n const slShow = this.nanoShow.emit();\n if (slShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.isVisible = true;\n this.open = true;\n this.popover.show();\n }\n\n /** Hides the tooltip. */\n @Method()\n async hide() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible) {\n return;\n }\n\n const slHide = this.nanoHide.emit();\n if (slHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.isVisible = false;\n this.open = false;\n this.popover.hide();\n }\n\n // Private methods\n\n private getTarget() {\n // Get the first child that isn't a <style> or content slot\n const target = [...Array.from(this.host.children)].find(\n (el) =>\n el.tagName.toLowerCase() !== 'style' &&\n el.getAttribute('slot') !== 'content'\n ) as HTMLElement;\n\n if (!target) {\n throw new Error('Invalid tooltip target: no child element was found.');\n }\n\n return target;\n }\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n private syncOptions() {\n this.popover.setOptions({\n strategy: this.hoist ? 'fixed' : 'absolute',\n placement: this.placement,\n distance: this.distance,\n skidding: this.skidding,\n transitionElement: this.tooltip,\n onAfterHide: () => this.nanoAfterHide.emit(),\n onAfterShow: () => this.nanoAfterShow.emit(),\n });\n }\n\n // Event Handlers\n\n private handleBlur = () => {\n if (this.hasTrigger('focus')) {\n this.hide();\n }\n };\n\n private handleClick = () => {\n if (this.hasTrigger('click')) {\n this.open ? this.hide() : this.show();\n }\n };\n\n private handleFocus = () => {\n if (this.hasTrigger('focus')) {\n this.show();\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Pressing escape when the target element has focus should dismiss the tooltip\n if (this.open && event.key === 'Escape') {\n event.stopPropagation();\n this.hide();\n }\n };\n\n private handleMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.show();\n }\n };\n\n private handleMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.hide();\n }\n };\n\n private handleSlotChange = () => {\n this.target = this.getTarget();\n };\n\n // Stencil hooks\n\n componentDidLoad() {\n this.target = this.getTarget();\n this.popover = new Popover(this.target, this.tooltipPositioner);\n this.syncOptions();\n this.setLabel();\n\n // Show on init if open\n this.tooltipPositioner.hidden = !this.open;\n if (this.open) {\n this.show();\n }\n }\n\n componentDidUpdate() {\n this.syncOptions();\n }\n\n disconnectedCallback() {\n this.popover.destroy();\n }\n\n render() {\n return (\n <Host\n onKeyDown={this.handleKeyDown}\n onMouseOver={this.handleMouseOver}\n onMouseOut={this.handleMouseOut}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onClick={this.handleClick}\n >\n <slot onSlotchange={this.handleSlotChange} />\n <div\n ref={(el) => (this.tooltipPositioner = el)}\n class=\"tooltip-positioner\"\n >\n <div\n part=\"base\"\n ref={(el) => (this.tooltip = el)}\n class={{\n tooltip: true,\n 'tooltip--open': this.open,\n }}\n role=\"tooltip\"\n aria-hidden={this.open ? 'false' : 'true'}\n >\n <slot name=\"content\" onSlotchange={() => this.setLabel()}>\n {this.content}\n </slot>\n <div class=\"tooltip-arrow\" data-popper-arrow></div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
1
|
+
{"file":"tooltip.js","mappings":"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","names":[],"sources":["./src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n --max-width: 20rem;\n --hide-delay: 0s;\n --hide-duration: 0.125s;\n --hide-timing-function: ease;\n --show-delay: 0.125s;\n --show-duration: 0.125s;\n --show-timing-function: ease;\n\n /* autoprefixer: ignore next */\n display: contents;\n}\n\n.tooltip {\n $self: &;\n\n max-inline-size: var(--max-width);\n border-radius: #{$tooltip-border-radius};\n background-color: black;\n font-size: #{$tooltip-fontsize};\n line-height: 1.5;\n color: white;\n opacity: 0;\n padding: #{$tooltip-padding};\n transform: translateY(10px) translateZ(0);\n transform-origin: bottom;\n transition: opacity, transform var(--hide-duration) var(--hide-timing-function) var(--hide-delay);\n white-space: normal;\n\n &-arrow {\n content: '';\n position: absolute;\n inline-size: 0;\n block-size: 0;\n color: black;\n transition: 0.2s ease transform;\n }\n\n &-positioner {\n position: absolute;\n z-index: #{$layer-index-tooltip};\n\n &[data-popper-placement^='top'] #{$self} {\n transform-origin: bottom;\n transform: translateY(-10px) translateZ(0);\n }\n\n &[data-popper-placement^='bottom'] #{$self} {\n transform-origin: top;\n }\n\n &[data-popper-placement^='left'] #{$self} {\n transform-origin: right;\n }\n\n &[data-popper-placement^='right'] #{$self} {\n transform-origin: left;\n }\n\n &.popover-visible #{$self} {\n opacity: 1;\n transform: none;\n transition-delay: var(--show-delay);\n transition-duration: var(--show-duration);\n transition-timing-function: var(--show-timing-function);\n }\n\n // Arrow + bottom\n &[data-popper-placement^='bottom'] #{$self}-arrow {\n inset-block-end: 100%;\n inset-inline-start: calc(50% - #{$tooltip-arrow-size});\n border-block-end: #{$tooltip-arrow-size} solid;\n border-inline-start: #{$tooltip-arrow-size} solid transparent;\n border-inline-end: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='bottom-start'] #{$self}-arrow {\n inset-inline-start: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='bottom-end'] #{$self}-arrow {\n inset-inline: auto #{$tooltip-arrow-offset};\n }\n\n // Arrow + top\n &[data-popper-placement^='top'] #{$self}-arrow {\n inset-block-start: 100%;\n inset-inline-start: calc(50% - #{$tooltip-arrow-size});\n border-block-start: #{$tooltip-arrow-size} solid;\n border-inline-start: #{$tooltip-arrow-size} solid transparent;\n border-inline-end: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='top-start'] #{$self}-arrow {\n inset-inline-start: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='top-end'] #{$self}-arrow {\n inset-inline: auto #{$tooltip-arrow-offset};\n }\n\n // Arrow + left\n &[data-popper-placement^='left'] #{$self}-arrow {\n inset-block-start: calc(50% - #{$tooltip-arrow-size});\n inset-inline-start: 100%;\n border-inline-start: #{$tooltip-arrow-size} solid;\n border-block-start: #{$tooltip-arrow-size} solid transparent;\n border-block-end: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='left-start'] #{$self}-arrow {\n inset-block-start: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='left-end'] #{$self}-arrow {\n inset-block: auto #{$tooltip-arrow-offset};\n }\n\n // Arrow + right\n &[data-popper-placement^='right'] #{$self}-arrow {\n inset-block-start: calc(50% - #{$tooltip-arrow-size});\n inset-inline-end: 100%;\n border-inline-end: #{$tooltip-arrow-size} solid;\n border-block-start: #{$tooltip-arrow-size} solid transparent;\n border-block-end: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='right-start'] #{$self}-arrow {\n inset-block-start: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='right-end'] #{$self}-arrow {\n inset-block: auto #{$tooltip-arrow-offset};\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n Watch,\n h,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\n\n/**\n * Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n */\n@Component({\n tag: 'nano-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true,\n})\nexport class Tooltip {\n private isVisible = false;\n private popover: Popover;\n private tooltipPositioner: HTMLElement;\n private tooltip: any;\n\n private _target: HTMLElement;\n private get target() {\n return this._target;\n }\n private set target(newTarget) {\n if (newTarget !== this._target && this._target) {\n this._target.removeAttribute('aria-label');\n }\n newTarget.setAttribute('aria-label', this.label);\n this._target = newTarget;\n }\n\n private label = '';\n\n @Element() host: HTMLNanoTooltipElement;\n\n /** The tooltip's content. Alternatively, you can use the content slot. */\n @Prop() content = '';\n\n @Watch('content')\n setLabel() {\n const contentSlotNodes = Array.from(\n this.host.querySelectorAll('[slot=\"content\"]')\n );\n const textContent = contentSlotNodes\n .map((node) => node.textContent)\n .join(' ')\n .trim();\n\n if (!this.target) {\n this.target = this.getTarget();\n\n if (!this.target) return;\n }\n\n this.label = textContent || this.content;\n this.target.setAttribute('aria-label', this.label);\n }\n\n /**\n * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n * inside of the viewport.\n */\n @Prop() placement:\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end' = 'top';\n\n /** Set to true to disable the tooltip so it won't show when triggered. */\n @Prop() disabled = false;\n\n /** The distance in pixels from which to offset the tooltip away from its target. */\n @Prop() distance = 10;\n\n /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /** The distance in pixels from which to offset the tooltip along its target. */\n @Prop() skidding = 0;\n\n /**\n * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n * `overflow: auto|scroll`.\n */\n @Prop() hoist = false;\n\n /**\n * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n */\n @Prop() trigger: string = 'hover focus';\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n // Events\n\n /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */\n @Event() nanoShow: EventEmitter;\n\n /** Emitted after the tooltip has shown and all transitions are complete. */\n @Event() nanoAfterShow: EventEmitter;\n\n /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */\n @Event() nanoHide: EventEmitter;\n\n /** Emitted after the tooltip has hidden and all transitions are complete. */\n @Event() nanoAfterHide: EventEmitter;\n\n // Public methods\n\n /** Shows the tooltip. */\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible || this.disabled) {\n return;\n }\n const slShow = this.nanoShow.emit();\n if (slShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.isVisible = true;\n this.open = true;\n this.popover.show();\n }\n\n /** Hides the tooltip. */\n @Method()\n async hide() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible) {\n return;\n }\n\n const slHide = this.nanoHide.emit();\n if (slHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.isVisible = false;\n this.open = false;\n this.popover.hide();\n }\n\n // Private methods\n\n private getTarget() {\n // Get the first child that isn't a <style> or content slot\n const target = [...Array.from(this.host.children)].find(\n (el) =>\n el.tagName.toLowerCase() !== 'style' &&\n el.getAttribute('slot') !== 'content'\n ) as HTMLElement;\n\n if (!target) {\n throw new Error('Invalid tooltip target: no child element was found.');\n }\n\n return target;\n }\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n private syncOptions() {\n this.popover.setOptions({\n strategy: this.hoist ? 'fixed' : 'absolute',\n placement: this.placement,\n distance: this.distance,\n skidding: this.skidding,\n transitionElement: this.tooltip,\n onAfterHide: () => this.nanoAfterHide.emit(),\n onAfterShow: () => this.nanoAfterShow.emit(),\n });\n }\n\n // Event Handlers\n\n private handleBlur = () => {\n if (this.hasTrigger('focus')) {\n this.hide();\n }\n };\n\n private handleClick = () => {\n if (this.hasTrigger('click')) {\n this.open ? this.hide() : this.show();\n }\n };\n\n private handleFocus = () => {\n if (this.hasTrigger('focus')) {\n this.show();\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Pressing escape when the target element has focus should dismiss the tooltip\n if (this.open && event.key === 'Escape') {\n event.stopPropagation();\n this.hide();\n }\n };\n\n private handleMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.show();\n }\n };\n\n private handleMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.hide();\n }\n };\n\n private handleSlotChange = () => {\n this.target = this.getTarget();\n };\n\n // Stencil hooks\n\n componentDidLoad() {\n this.target = this.getTarget();\n this.popover = new Popover(this.target, this.tooltipPositioner);\n this.syncOptions();\n this.setLabel();\n\n // Show on init if open\n this.tooltipPositioner.hidden = !this.open;\n if (this.open) {\n this.show();\n }\n }\n\n componentDidUpdate() {\n this.syncOptions();\n }\n\n disconnectedCallback() {\n if (this.popover) this.popover.destroy();\n }\n\n render() {\n return (\n <Host\n onKeyDown={this.handleKeyDown}\n onMouseOver={this.handleMouseOver}\n onMouseOut={this.handleMouseOut}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onClick={this.handleClick}\n >\n <slot onSlotchange={this.handleSlotChange} />\n <div\n ref={(el) => (this.tooltipPositioner = el)}\n class=\"tooltip-positioner\"\n >\n <div\n part=\"base\"\n ref={(el) => (this.tooltip = el)}\n class={{\n tooltip: true,\n 'tooltip--open': this.open,\n }}\n role=\"tooltip\"\n aria-hidden={this.open ? 'false' : 'true'}\n >\n <slot name=\"content\" onSlotchange={() => this.setLabel()}>\n {this.content}\n </slot>\n <div class=\"tooltip-arrow\" data-popper-arrow></div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
package/dist/esm/loader.js
CHANGED
@@ -15,7 +15,7 @@ const patchEsm = () => {
|
|
15
15
|
const defineCustomElements = (win, options) => {
|
16
16
|
if (typeof window === 'undefined') return Promise.resolve();
|
17
17
|
return patchEsm().then(() => {
|
18
|
-
return bootstrapLazy(JSON.parse("[[\"nano-global-nav\",[[1,\"nano-global-nav\",{\"env\":[1],\"ssoDataUrl\":[1,\"sso-data-url\"],\"myAccountData\":[16],\"ssoRedirect\":[1,\"sso-redirect\"],\"getMyAccountData\":[4,\"get-my-account-data\"],\"activeMyAccountSections\":[16],\"showSearch\":[4,\"show-search\"],\"showLogo\":[4,\"show-logo\"],\"logoUrl\":[1,\"logo-url\"],\"searchIndeces\":[16],\"myAccountUser\":[1040],\"searchAppId\":[1025,\"search-app-id\"],\"searchApiKey\":[1025,\"search-api-key\"],\"searchValue\":[1025,\"search-value\"],\"searchIndex\":[1025,\"search-index\"],\"cartCount\":[1026,\"cart-count\"],\"msgCount\":[1026,\"msg-count\"],\"cartUrl\":[1025,\"cart-url\"],\"msgUrl\":[1025,\"msg-url\"],\"userProfileUrl\":[32],\"hasLoggedinSlot\":[32],\"hasSiteSlot\":[32],\"hasPromotionSlot\":[32],\"aboutSlotLen\":[32],\"iconSlotLen\":[32],\"mainSlotLen\":[32],\"overflowSlotLen\":[32],\"searchSlotLen\":[32],\"thresholdReady\":[32],\"remoteDataReady\":[32],\"ready\":[32],\"isResizing\":[32],\"intersectRatio\":[32],\"threshold\":[32],\"modalOpen\":[32],\"modalIsOpen\":[32],\"searchBarShown\":[32],\"scrollingUp\":[32],\"showAutocomplete\":[32],\"secondaryMenuOpen\":[32],\"userMenuOpen\":[32],\"menuFullScreen\":[32],\"searchLoading\":[32],\"searchValInternal\":[32],\"internalSearchIndeces\":[32],\"submitSearch\":[64],\"toggleOverflowMenu\":[64]},[[0,\"nanoOpen\",\"secondaryOpen\"],[0,\"nanoClose\",\"secondaryClose\"],[16,\"click\",\"menuClose\"]]]]],[\"nano-demo\",[[1,\"nano-demo\"]]],[\"nano-hero\",[[1,\"nano-hero\",{\"imgSrc\":[1,\"img-src\"],\"imgSrcSet\":[1,\"img-src-set\"],\"largeScreenBP\":[2,\"large-screen-b-p\"],\"theme\":[1],\"level\":[1],\"gridSizes\":[32],\"hasIconBox\":[32],\"hasScrim\":[32],\"hasSecondaryContent\":[32],\"hasQuote\":[32],\"hasBg\":[32],\"hasBackBtn\":[32],\"hasCtas\":[32],\"breadCrumbs\":[32],\"iconBoxItems\":[32]}]]],[\"nano-date-input\",[[6,\"nano-date-input\",{\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"helperText\":[4,\"helper-text\"],\"helperTextFormat\":[16],\"floatLabel\":[4,\"float-label\"],\"name\":[1],\"readonly\":[4],\"size\":[2],\"form\":[1],\"firstDayOfWeek\":[2,\"first-day-of-week\"],\"localization\":[16],\"disabled\":[4],\"color\":[1],\"autofocus\":[4],\"clearInput\":[4,\"clear-input\"],\"label\":[1],\"placeholder\":[1025],\"value\":[1537],\"validateOn\":[1,\"validate-on\"],\"showInlineError\":[516,\"show-inline-error\"],\"dateOrder\":[1,\"date-order\"],\"required\":[4],\"min\":[1],\"max\":[1],\"hideLabel\":[4,\"hide-label\"],\"picker\":[4],\"initialPickerDate\":[1,\"initial-picker-date\"],\"pickerOpen\":[1540,\"picker-open\"],\"closeAfterPicked\":[4,\"close-after-picked\"],\"dropDownConfig\":[6160],\"dateValue\":[2064],\"isDateDisabled\":[16],\"pattern\":[32],\"inputValue\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getInputElement\":[64],\"showError\":[64]}]]],[\"nano-dialog\",[[1,\"nano-dialog\",{\"showRibbon\":[4,\"show-ribbon\"],\"open\":[1540],\"label\":[1],\"noHeader\":[4,\"no-header\"],\"noFooter\":[4,\"no-footer\"],\"noUserDismiss\":[4,\"no-user-dismiss\"],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"hoist\":[4],\"isVisible\":[32],\"noDismiss\":[32],\"hasFooter\":[32],\"show\":[64],\"hide\":[64]}]]],[\"nano-alert\",[[1,\"nano-alert\",{\"open\":[1540],\"closable\":[516],\"color\":[513],\"duration\":[2],\"hoist\":[4],\"isModal\":[32],\"isToast\":[32],\"isShowing\":[32],\"label\":[32],\"show\":[64],\"hide\":[64],\"toast\":[64],\"alert\":[64]}]]],[\"nano-file-upload\",[[6,\"nano-file-upload\",{\"name\":[1],\"accept\":[1],\"capture\":[1],\"maxFileSize\":[2,\"max-file-size\"],\"maxFiles\":[2,\"max-files\"],\"label\":[1],\"placeholder\":[1],\"hideLabel\":[4,\"hide-label\"],\"required\":[4],\"disabled\":[516],\"clearInput\":[4,\"clear-input\"],\"showInlineError\":[516,\"show-inline-error\"],\"validateOn\":[1025,\"validate-on\"],\"form\":[1],\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"files\":[6160],\"value\":[6145],\"hasHelperSlot\":[32],\"hasLabelSlot\":[32],\"errorMessage\":[32],\"isDragging\":[32],\"fileList\":[32],\"hasFocus\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getInputElement\":[64],\"showError\":[64]},[[8,\"click\",\"globalClickHandler\"],[8,\"keydown\",\"globalKeydownHandler\"],[16,\"reset\",\"onReset\"]]]]],[\"nano-overflow-nav\",[[1,\"nano-overflow-nav\",{\"scrollControls\":[4,\"scroll-controls\"],\"orientation\":[513],\"activeHandler\":[16],\"inActiveHandler\":[16],\"isActiveHandler\":[16],\"instantReCalc\":[32],\"hasScrollControls\":[32],\"hideControlEnd\":[32],\"hideControlStart\":[32],\"syncActiveItem\":[64]}]]],[\"nano-tab\",[[1,\"nano-tab\",{\"panel\":[513],\"active\":[516],\"disabled\":[516],\"closable\":[4],\"setFocus\":[64],\"removeFocus\":[64]}]]],[\"nano-global-search-results\",[[1,\"nano-global-search-results\",{\"algoliaEle\":[32],\"currentWidth\":[32],\"apiKey\":[32],\"appId\":[32],\"index\":[32]},[[16,\"nanoSearchReset\",\"handleGlobalNavReset\"],[16,\"nanoSearchResult\",\"handleGlobalNavSearch\"],[0,\"nanoChange\",\"handleReorder\"],[0,\"nanoResultsShown\",\"attachListeners\"],[16,\"nanoNewResults\",\"attachResultListeners\"]]]]],[\"nano-menu-drawer\",[[1,\"nano-menu-drawer\",{\"open\":[1028],\"saveState\":[4,\"save-state\"],\"hideWidth\":[2,\"hide-width\"],\"hideHeight\":[4,\"hide-height\"],\"reset\":[32],\"widthOk\":[32],\"heightOk\":[32],\"isLoading\":[32],\"hide\":[32]},[[0,\"nanoOpen\",\"cancelNavItemEvents\"],[0,\"nanoClose\",\"cancelNavItemEvents\"],[16,\"nanoIsReady\",\"handleGlobalNavReady\"]]]]],[\"nano-split-pane\",[[1,\"nano-split-pane\",{\"position\":[6146],\"positionInPixels\":[1026,\"position-in-pixels\"],\"vertical\":[516],\"disabled\":[516],\"primary\":[1],\"snap\":[1],\"snapThreshold\":[2,\"snap-threshold\"],\"animationDuration\":[2,\"animation-duration\"],\"getPercentageToPixels\":[64],\"getPixelsToPercentage\":[64]}]]],[\"nano-tab-group\",[[1,\"nano-tab-group\",{\"placement\":[1],\"noScrollControls\":[4,\"no-scroll-controls\"],\"color\":[1],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"disableSwipe\":[4,\"disable-swipe\"],\"hasScrollControls\":[32],\"hideControlRight\":[32],\"hideControlLeft\":[32],\"tab\":[32],\"show\":[64]},[[0,\"nanoTabClose\",\"handleTabClose\"]]]]],[\"nano-accordion\",[[1,\"nano-accordion\",{\"color\":[1],\"itemOpened\":[32]},[[0,\"nanoOpened\",\"onToggleHandler\"],[0,\"nanoClosed\",\"onClosedHandler\"]]]]],[\"nano-algolia-filter\",[[1,\"nano-algolia-filter\",{\"filterName\":[1,\"filter-name\"],\"value\":[1025],\"operator\":[1],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"changeEvent\":[32],\"internalValue\":[32],\"showFilter\":[32],\"indexResults\":[32],\"filterChanged\":[32],\"facets\":[32],\"tplRenderFn\":[32],\"globalStoreMethod\":[32]},[[0,\"nanoChange\",\"handleChangeEvent\"],[0,\"change\",\"handleChangeEvent\"]]]]],[\"nano-algolia-input\",[[1,\"nano-algolia-input\",{\"appId\":[1,\"app-id\"],\"apiKey\":[1,\"api-key\"],\"searchIndex\":[1040],\"searchIndexName\":[1,\"search-index-name\"],\"minChars\":[2,\"min-chars\"],\"autoEmit\":[4,\"auto-emit\"],\"browseIndex\":[1028,\"browse-index\"],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"searchStr\":[32],\"algoliaIndex\":[32],\"currentResults\":[32],\"search\":[64]},[[0,\"nanoChange\",\"searchSubmit\"]]]]],[\"nano-algolia-pagination\",[[1,\"nano-algolia-pagination\",{\"maxToShow\":[2,\"max-to-show\"],\"currentPage\":[32],\"canGoPrev\":[32],\"canGoNext\":[32],\"show\":[32],\"tplRenderFn\":[32],\"indexResults\":[32],\"infiniteScroll\":[32],\"nextPage\":[64],\"prevPage\":[64],\"goToPage\":[64]}]]],[\"nano-algolia-results\",[[1,\"nano-algolia-results\",{\"infiniteScroll\":[4,\"infinite-scroll\"],\"appendPages\":[4,\"append-pages\"],\"showResults\":[32],\"tplRenderFn\":[32],\"results\":[32],\"indexResults\":[32],\"resultsPage\":[32],\"changeEvent\":[32],\"facets\":[32],\"isLoading\":[32]}]]],[\"nano-aspect-ratio\",[[1,\"nano-aspect-ratio\",{\"aspectRatio\":[1,\"aspect-ratio\"],\"fit\":[1]}]]],[\"nano-checkbox\",[[6,\"nano-checkbox\",{\"hasFocus\":[1540,\"has-focus\"],\"checked\":[1540],\"disabled\":[516],\"value\":[513],\"name\":[513],\"required\":[516],\"type\":[513],\"label\":[1],\"indeterminate\":[1540],\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"color\":[1],\"form\":[1],\"inputType\":[32],\"_invalid\":[32],\"getInputElement\":[64],\"reportValidity\":[64],\"setError\":[64],\"setFocus\":[64],\"removeFocus\":[64]},[[16,\"reset\",\"onReset\"]]]]],[\"nano-checkbox-group\",[[6,\"nano-checkbox-group\",{\"validateOn\":[1025,\"validate-on\"],\"showInlineError\":[4,\"show-inline-error\"],\"min\":[2],\"max\":[2],\"disabled\":[516],\"legend\":[1],\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"value\":[1025],\"checkboxes\":[32],\"nativeCbs\":[32],\"errorMessage\":[32],\"showErrorMsg\":[32],\"hasHelperSlot\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"showError\":[64]},[[0,\"nanoChange\",\"handleValueChange\"],[0,\"nanoChange\",\"handleCbChange\"]]]]],[\"nano-details\",[[1,\"nano-details\",{\"label\":[1],\"open\":[1540],\"noHandle\":[4,\"no-handle\"],\"iconRotation\":[2,\"icon-rotation\"],\"color\":[1],\"isLoading\":[32]}]]],[\"nano-drawer\",[[1,\"nano-drawer\",{\"open\":[1540],\"label\":[1],\"placement\":[1],\"contained\":[4],\"noHeader\":[4,\"no-header\"],\"type\":[1],\"contentSelector\":[1,\"content-selector\"],\"hasFooter\":[32],\"isVisible\":[32],\"show\":[64],\"hide\":[64]}]]],[\"nano-field-validator\",[[4,\"nano-field-validator\",{\"validateOn\":[1025,\"validate-on\"],\"scrollToInvalid\":[4,\"scroll-to-invalid\"],\"dirty\":[2564],\"valid\":[2564],\"store\":[2064],\"payload\":[2064],\"showValidation\":[2052,\"show-validation\"],\"validationState\":[2064],\"extraFieldSelector\":[1,\"extra-field-selector\"],\"validation\":[16],\"submitted\":[32],\"userForm\":[32],\"_dirty\":[32],\"_valid\":[32],\"_store\":[32],\"setStore\":[64],\"setCustomValidity\":[64],\"resetValidity\":[64]},[[0,\"nanoChange\",\"handleFieldChange\"],[0,\"input\",\"handlePlainFieldChange\"],[0,\"change\",\"handlePlainFieldChange\"],[0,\"submit\",\"handleSubmit\"]]]]],[\"nano-range\",[[6,\"nano-range\",{\"color\":[1],\"debounce\":[2],\"name\":[1],\"dualKnobs\":[4,\"dual-knobs\"],\"min\":[2],\"max\":[2],\"pin\":[4],\"snaps\":[4],\"step\":[2],\"ticks\":[4],\"disabled\":[4],\"value\":[1026],\"ratioA\":[32],\"ratioB\":[32],\"pressedKnob\":[32]}]]],[\"nano-rating\",[[2,\"nano-rating\",{\"value\":[1538],\"max\":[2],\"precision\":[2],\"readonly\":[4],\"disabled\":[4],\"name\":[1],\"symbolName\":[1,\"symbol-name\"],\"symbol\":[16],\"hoverValue\":[32],\"isHovering\":[32],\"setFocus\":[64],\"removeFocus\":[64]}]]],[\"nano-slide\",[[1,\"nano-slide\",{\"ready\":[1540]}]]],[\"nano-slides\",[[1,\"nano-slides\",{\"options\":[1040],\"navbtns\":[4],\"pager\":[4],\"fullscreenbtn\":[4],\"fullscreen\":[1540],\"animation\":[513],\"currentSlide\":[1538,\"current-slide\"],\"autoplay\":[8],\"ready\":[1540],\"iCurrentSlide\":[32],\"slidesReady\":[32],\"didInit\":[32],\"update\":[64],\"updateAutoHeight\":[64],\"slideTo\":[64],\"slideNext\":[64],\"slidePrev\":[64],\"getActiveIndex\":[64],\"length\":[64],\"isEnd\":[64],\"isBeginning\":[64],\"startAutoplay\":[64],\"stopAutoplay\":[64],\"lockSwipes\":[64],\"getflickity\":[64],\"reload\":[64]}]]],[\"nano-tab-content\",[[1,\"nano-tab-content\",{\"name\":[513],\"active\":[516],\"ready\":[32]}]]],[\"nano-spinner\",[[1,\"nano-spinner\",{\"type\":[1],\"overlay\":[516],\"hasText\":[32]}]]],[\"nano-table\",[[4,\"nano-table\",{\"type\":[1],\"caption\":[1],\"showCaption\":[4,\"show-caption\"],\"loading\":[4],\"placeholderSize\":[2,\"placeholder-size\"],\"rows\":[1040],\"columns\":[1040],\"headRender\":[16],\"rowRender\":[16],\"footRender\":[16],\"showFooter\":[4,\"show-footer\"],\"perBlock\":[2,\"per-block\"],\"blocksLength\":[2050,\"blocks-length\"],\"searchTerm\":[1,\"search-term\"],\"customFilterFn\":[16],\"customSortFn\":[16],\"defaultSort\":[4,\"default-sort\"],\"defaultColDraggable\":[4,\"default-col-draggable\"],\"virtualTotalItems\":[2,\"virtual-total-items\"],\"internalLoading\":[32],\"blocks\":[32],\"activeBlocks\":[32],\"resetSorting\":[64],\"addSort\":[64],\"resetFilters\":[64],\"addFilters\":[64],\"removeFilters\":[64],\"updateRow\":[64]}]]],[\"nano-algolia\",[[1,\"nano-algolia\",{\"showResults\":[1028,\"show-results\"],\"resultsPage\":[1026,\"results-page\"],\"appId\":[1025,\"app-id\"],\"apiKey\":[1025,\"api-key\"],\"searchIndex\":[1040],\"searchIndexName\":[1025,\"search-index-name\"],\"listenTo\":[1,\"listen-to\"],\"query\":[1025],\"operator\":[1],\"filters\":[16],\"tplEngine\":[16],\"tplRenderFn\":[16],\"replicaIndex\":[1025,\"replica-index\"],\"browseIndex\":[1028,\"browse-index\"],\"minChars\":[2,\"min-chars\"],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"_dynFacetFilters\":[32],\"inputField\":[32],\"algoliaIndex\":[32],\"indeces\":[32],\"resultsEmitterEle\":[32],\"indexResults\":[32],\"filterChanged\":[32],\"currentHits\":[32],\"changeEvent\":[32],\"isLoading\":[32],\"wormholeState\":[32],\"removeFilters\":[64]},[[0,\"nanoTplUpdated\",\"onAllTplUpdate\"],[0,\"nanoPageChanged\",\"onPageChange\"],[0,\"nanoFilterChanged\",\"onFilterChange\"],[16,\"nanoChange\",\"handleInputChange\"],[16,\"change\",\"handleInputChange\"]]]]],[\"nano-icon\",[[1,\"nano-icon\",{\"color\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"flipRtl\":[4,\"flip-rtl\"],\"name\":[1],\"src\":[1],\"icon\":[8],\"size\":[1],\"lazy\":[4],\"svgContent\":[32],\"isVisible\":[32],\"isLoading\":[32]}]]],[\"nano-date-picker\",[[1,\"nano-date-picker\",{\"selectedDate\":[1025,\"selected-date\"],\"min\":[1],\"max\":[1],\"firstDayOfWeek\":[2,\"first-day-of-week\"],\"localization\":[16],\"color\":[1],\"isDateDisabled\":[16],\"isModal\":[4,\"is-modal\"],\"firstFocusEle\":[16],\"activeFocus\":[32],\"focusedDay\":[32],\"setFocus\":[64]}]]],[\"nano-input\",[[6,\"nano-input\",{\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"color\":[1],\"accept\":[1],\"autocapitalise\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"clearInput\":[4,\"clear-input\"],\"clearOnEdit\":[4,\"clear-on-edit\"],\"debounce\":[2],\"disabled\":[516],\"inputmode\":[1],\"validateOn\":[1025,\"validate-on\"],\"showInlineError\":[516,\"show-inline-error\"],\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"floatLabel\":[4,\"float-label\"],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"multiple\":[4],\"name\":[1],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[4],\"spellcheck\":[4],\"step\":[1],\"size\":[2],\"type\":[513],\"form\":[1],\"value\":[1025],\"resize\":[1],\"rows\":[2],\"showCharCount\":[4,\"show-char-count\"],\"hasFocus\":[32],\"hasLabelSlot\":[32],\"hasHelperSlot\":[32],\"hasHelperEndSlot\":[32],\"errorMessage\":[32],\"datalist\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"select\":[64],\"getInputElement\":[64],\"showError\":[64]},[[16,\"reset\",\"onReset\"],[17,\"mousedown\",\"handleBlur\"],[0,\"keydown\",\"handleBlur\"]]]]],[\"nano-progress-bar\",[[1,\"nano-progress-bar\",{\"value\":[2],\"indeterminate\":[4],\"showPercent\":[4,\"show-percent\"]}]]],[\"nano-sticker\",[[1,\"nano-sticker\",{\"autoResize\":[4,\"auto-resize\"],\"isSticky\":[1028,\"is-sticky\"],\"offset\":[1026],\"position\":[1],\"quietMode\":[1,\"quiet-mode\"],\"hideOnNewStickers\":[4,\"hide-on-new-stickers\"],\"breakPointMax\":[2,\"break-point-max\"],\"breakPointMin\":[2,\"break-point-min\"],\"scrollParent\":[1040],\"stickTo\":[1,\"stick-to\"],\"isStuck\":[32],\"isRootSticker\":[32],\"hide\":[32],\"scrollHide\":[32],\"multiStickerHide\":[32],\"scrollingTo\":[32],\"quietModeIsOn\":[32],\"stuckCounter\":[32],\"stickerIndex\":[32],\"stickToEle\":[32],\"triggerPos\":[32],\"trigger\":[32],\"_offset\":[32],\"isHiding\":[64],\"isSticking\":[64],\"setTriggerPos\":[64],\"getTriggerPos\":[64],\"pauseHiding\":[64]}]]],[\"nano-dropdown\",[[1,\"nano-dropdown\",{\"autoOpen\":[4,\"auto-open\"],\"open\":[1540],\"closeOnSelect\":[4,\"close-on-select\"],\"containingElement\":[1040],\"tetherTo\":[16],\"placement\":[1],\"distance\":[2],\"skidding\":[2],\"hoist\":[4],\"dialogTitle\":[1,\"dialog-title\"],\"eventType\":[16],\"show\":[64],\"hide\":[64]},[[0,\"nanoOpen\",\"secondaryOpen\"],[0,\"nanoClose\",\"secondaryClose\"],[0,\"nanoSelect\",\"handlePanelSelect\"]]]]],[\"nano-datalist_3\",[[1,\"nano-datalist\",{\"selected\":[1040],\"dropDownConfig\":[6160],\"options\":[16],\"input\":[1],\"type\":[1],\"activeOptions\":[2064],\"open\":[1028],\"disableFilter\":[4,\"disable-filter\"],\"disabled\":[4],\"actvOptEles\":[32],\"connectedInput\":[32],\"inputLabel\":[32],\"hasNoResult\":[32],\"shouldOpen\":[32],\"canOpen\":[32],\"optionIds\":[32]}],[1,\"nano-option\",{\"value\":[1537],\"label\":[1537],\"selected\":[516],\"disabled\":[516],\"filterMeta\":[1,\"filter-meta\"],\"hasFocus\":[32]},[[0,\"keydown\",\"handleKeyDown\"]]],[1,\"nano-menu\",{\"hasFocus\":[2052,\"has-focus\"],\"type\":[1],\"label\":[1],\"setFocus\":[64],\"removeFocus\":[64],\"showActiveElement\":[64],\"resetActiveItem\":[64]},[[17,\"mousedown\",\"handleBlur\"],[0,\"keydown\",\"handleBlur\"]]]]],[\"nano-global-nav-user-profile_3\",[[6,\"nano-select\",{\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"color\":[1],\"autofocus\":[4],\"disabled\":[516],\"validateOn\":[1025,\"validate-on\"],\"showInlineError\":[516,\"show-inline-error\"],\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"floatLabel\":[4,\"float-label\"],\"multiple\":[4],\"name\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[4],\"size\":[2],\"max\":[2],\"min\":[2],\"form\":[1],\"allowCustomValues\":[4,\"allow-custom-values\"],\"value\":[6145],\"options\":[6160],\"clearSelect\":[4,\"clear-select\"],\"mask\":[4],\"debounce\":[2],\"dropDownConfig\":[1040],\"currInsertIndex\":[32],\"showErrorMsg\":[32],\"errorMessage\":[32],\"hasFocus\":[32],\"hasLabelSlot\":[32],\"hasHelperSlot\":[32],\"hasHelperEndSlot\":[32],\"inputSearchVal\":[32],\"_invalid\":[32],\"_eOptions\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getSelectElement\":[64],\"showError\":[64]},[[16,\"reset\",\"onReset\"],[17,\"mousedown\",\"handleBlur\"],[0,\"keydown\",\"handleBlur\"]]],[0,\"nano-global-nav-user-profile\",{\"myAccountUser\":[16],\"userProfileUrl\":[1,\"user-profile-url\"]}],[1,\"nano-nav-item\",{\"href\":[1025],\"target\":[1],\"disabled\":[4],\"open\":[1540],\"selected\":[516],\"secondaryActiveWidth\":[2,\"secondary-active-width\"],\"secondaryFallback\":[16],\"closeOnBlur\":[4,\"close-on-blur\"],\"notification\":[4],\"hasAnchorEle\":[32],\"didOpen\":[32],\"isInGlobalNav\":[32],\"isInMenuDrawer\":[32],\"isInMenu\":[32],\"hasFocus\":[32],\"setFocus\":[64]},[[16,\"click\",\"handleClose\"],[16,\"keyup\",\"handleClose\"]]]]],[\"nano-resize-observe_2\",[[1,\"nano-resize-observe\",{\"notifyContentFit\":[1,\"notify-content-fit\"],\"states\":[1],\"currentWidth\":[32],\"currentHeight\":[32],\"classNames\":[32],\"contentFitX\":[32],\"contentFitY\":[32]}],[1,\"nano-skeleton\",{\"animated\":[4]}]]],[\"nano-grid_3\",[[1,\"nano-img\",{\"alt\":[1],\"src\":[1],\"srcSet\":[1,\"src-set\"],\"lazy\":[4],\"background\":[4],\"autoHeight\":[1,\"auto-height\"],\"loadSrc\":[32],\"loadError\":[32],\"hasLoaded\":[32],\"imgStates\":[32],\"_src\":[32]}],[1,\"nano-grid\",{\"sSize\":[2,\"s-size\"],\"mSize\":[2,\"m-size\"],\"lSize\":[2,\"l-size\"],\"xlSize\":[2,\"xl-size\"],\"sCols\":[2,\"s-cols\"],\"mCols\":[2,\"m-cols\"],\"lCols\":[2,\"l-cols\"],\"xlCols\":[2,\"xl-cols\"],\"xxlCols\":[2,\"xxl-cols\"],\"showHelper\":[516,\"show-helper\"],\"contentPanel\":[516,\"content-panel\"],\"fullHeight\":[516,\"full-height\"],\"ready\":[32],\"isSmall\":[32],\"isMedium\":[32],\"isLarge\":[32],\"isXL\":[32],\"isXXL\":[32]}],[1,\"nano-grid-item\",{\"gridStates\":[1,\"grid-states\"],\"changeBP\":[64]}]]],[\"nano-icon-button_2\",[[2,\"nano-icon-button\",{\"iconName\":[1,\"icon-name\"],\"iconSrc\":[1,\"icon-src\"],\"type\":[513],\"name\":[513],\"value\":[513],\"label\":[1],\"showTooltip\":[4,\"show-tooltip\"],\"disabled\":[516],\"href\":[1],\"target\":[1],\"setFocus\":[64]}],[1,\"nano-tooltip\",{\"content\":[1],\"placement\":[1],\"disabled\":[4],\"distance\":[2],\"open\":[1540],\"skidding\":[2],\"hoist\":[4],\"trigger\":[1],\"show\":[64],\"hide\":[64]}]]]]"), options);
|
18
|
+
return bootstrapLazy(JSON.parse("[[\"nano-global-nav\",[[1,\"nano-global-nav\",{\"env\":[1],\"ssoDataUrl\":[1,\"sso-data-url\"],\"myAccountData\":[16],\"ssoRedirect\":[1,\"sso-redirect\"],\"getMyAccountData\":[4,\"get-my-account-data\"],\"activeMyAccountSections\":[16],\"showSearch\":[4,\"show-search\"],\"showLogo\":[4,\"show-logo\"],\"logoUrl\":[1,\"logo-url\"],\"searchIndeces\":[16],\"myAccountUser\":[1040],\"searchAppId\":[1025,\"search-app-id\"],\"searchApiKey\":[1025,\"search-api-key\"],\"searchValue\":[1025,\"search-value\"],\"searchIndex\":[1025,\"search-index\"],\"cartCount\":[1026,\"cart-count\"],\"msgCount\":[1026,\"msg-count\"],\"cartUrl\":[1025,\"cart-url\"],\"msgUrl\":[1025,\"msg-url\"],\"userProfileUrl\":[32],\"hasLoggedinSlot\":[32],\"hasSiteSlot\":[32],\"hasPromotionSlot\":[32],\"aboutSlotLen\":[32],\"iconSlotLen\":[32],\"mainSlotLen\":[32],\"overflowSlotLen\":[32],\"searchSlotLen\":[32],\"thresholdReady\":[32],\"remoteDataReady\":[32],\"ready\":[32],\"isResizing\":[32],\"intersectRatio\":[32],\"threshold\":[32],\"modalOpen\":[32],\"modalIsOpen\":[32],\"searchBarShown\":[32],\"scrollingUp\":[32],\"showAutocomplete\":[32],\"secondaryMenuOpen\":[32],\"userMenuOpen\":[32],\"menuFullScreen\":[32],\"searchLoading\":[32],\"searchValInternal\":[32],\"internalSearchIndeces\":[32],\"submitSearch\":[64],\"toggleOverflowMenu\":[64]},[[0,\"nanoOpen\",\"secondaryOpen\"],[0,\"nanoClose\",\"secondaryClose\"],[16,\"click\",\"menuClose\"]]]]],[\"nano-demo\",[[1,\"nano-demo\"]]],[\"nano-hero\",[[1,\"nano-hero\",{\"imgSrc\":[1,\"img-src\"],\"imgSrcSet\":[1,\"img-src-set\"],\"largeScreenBP\":[2,\"large-screen-b-p\"],\"theme\":[1],\"level\":[1],\"gridSizes\":[32],\"hasIconBox\":[32],\"hasScrim\":[32],\"hasSecondaryContent\":[32],\"hasQuote\":[32],\"hasBg\":[32],\"hasBackBtn\":[32],\"hasCtas\":[32],\"breadCrumbs\":[32],\"iconBoxItems\":[32]}]]],[\"nano-date-input\",[[6,\"nano-date-input\",{\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"helperText\":[4,\"helper-text\"],\"helperTextFormat\":[16],\"floatLabel\":[4,\"float-label\"],\"name\":[1],\"readonly\":[4],\"size\":[2],\"form\":[1],\"firstDayOfWeek\":[2,\"first-day-of-week\"],\"localization\":[16],\"disabled\":[4],\"color\":[1],\"autofocus\":[4],\"clearInput\":[4,\"clear-input\"],\"label\":[1],\"placeholder\":[1025],\"value\":[1537],\"validateOn\":[1,\"validate-on\"],\"showInlineError\":[516,\"show-inline-error\"],\"dateOrder\":[1,\"date-order\"],\"required\":[4],\"min\":[1],\"max\":[1],\"hideLabel\":[4,\"hide-label\"],\"picker\":[4],\"initialPickerDate\":[1,\"initial-picker-date\"],\"pickerOpen\":[1540,\"picker-open\"],\"closeAfterPicked\":[4,\"close-after-picked\"],\"dropDownConfig\":[6160],\"dateValue\":[2064],\"isDateDisabled\":[16],\"pattern\":[32],\"inputValue\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getInputElement\":[64],\"showError\":[64]}]]],[\"nano-dialog\",[[1,\"nano-dialog\",{\"showRibbon\":[4,\"show-ribbon\"],\"open\":[1540],\"label\":[1],\"noHeader\":[4,\"no-header\"],\"noFooter\":[4,\"no-footer\"],\"noUserDismiss\":[4,\"no-user-dismiss\"],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"hoist\":[4],\"isVisible\":[32],\"noDismiss\":[32],\"hasFooter\":[32],\"show\":[64],\"hide\":[64]}]]],[\"nano-alert\",[[1,\"nano-alert\",{\"open\":[1540],\"closable\":[516],\"color\":[513],\"duration\":[2],\"hoist\":[4],\"isModal\":[32],\"isToast\":[32],\"isShowing\":[32],\"label\":[32],\"show\":[64],\"hide\":[64],\"toast\":[64],\"alert\":[64]}]]],[\"nano-file-upload\",[[6,\"nano-file-upload\",{\"name\":[1],\"accept\":[1],\"capture\":[1],\"maxFileSize\":[2,\"max-file-size\"],\"maxFiles\":[2,\"max-files\"],\"label\":[1],\"placeholder\":[1],\"hideLabel\":[4,\"hide-label\"],\"required\":[4],\"disabled\":[516],\"clearInput\":[4,\"clear-input\"],\"showInlineError\":[516,\"show-inline-error\"],\"validateOn\":[1025,\"validate-on\"],\"form\":[1],\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"files\":[6160],\"value\":[6145],\"hasHelperSlot\":[32],\"hasLabelSlot\":[32],\"errorMessage\":[32],\"isDragging\":[32],\"fileList\":[32],\"hasFocus\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getInputElement\":[64],\"showError\":[64]},[[8,\"click\",\"globalClickHandler\"],[8,\"keydown\",\"globalKeydownHandler\"],[16,\"reset\",\"onReset\"]]]]],[\"nano-overflow-nav\",[[1,\"nano-overflow-nav\",{\"scrollControls\":[4,\"scroll-controls\"],\"orientation\":[513],\"activeHandler\":[16],\"inActiveHandler\":[16],\"isActiveHandler\":[16],\"instantReCalc\":[32],\"hasScrollControls\":[32],\"hideControlEnd\":[32],\"hideControlStart\":[32],\"syncActiveItem\":[64]}]]],[\"nano-tab\",[[1,\"nano-tab\",{\"panel\":[513],\"active\":[516],\"disabled\":[516],\"closable\":[4],\"setFocus\":[64],\"removeFocus\":[64]}]]],[\"nano-global-search-results\",[[1,\"nano-global-search-results\",{\"algoliaEle\":[32],\"currentWidth\":[32],\"apiKey\":[32],\"appId\":[32],\"index\":[32]},[[16,\"nanoSearchReset\",\"handleGlobalNavReset\"],[16,\"nanoSearchResult\",\"handleGlobalNavSearch\"],[0,\"nanoChange\",\"handleReorder\"],[0,\"nanoResultsShown\",\"attachListeners\"],[16,\"nanoNewResults\",\"attachResultListeners\"]]]]],[\"nano-menu-drawer\",[[1,\"nano-menu-drawer\",{\"open\":[1028],\"saveState\":[4,\"save-state\"],\"hideWidth\":[2,\"hide-width\"],\"hideHeight\":[4,\"hide-height\"],\"reset\":[32],\"widthOk\":[32],\"heightOk\":[32],\"isLoading\":[32],\"hide\":[32]},[[0,\"nanoOpen\",\"cancelNavItemEvents\"],[0,\"nanoClose\",\"cancelNavItemEvents\"],[16,\"nanoIsReady\",\"handleGlobalNavReady\"]]]]],[\"nano-split-pane\",[[1,\"nano-split-pane\",{\"position\":[6146],\"positionInPixels\":[1026,\"position-in-pixels\"],\"vertical\":[516],\"disabled\":[516],\"primary\":[1],\"snap\":[1],\"snapThreshold\":[2,\"snap-threshold\"],\"animationDuration\":[2,\"animation-duration\"],\"getPercentageToPixels\":[64],\"getPixelsToPercentage\":[64]}]]],[\"nano-tab-group\",[[1,\"nano-tab-group\",{\"placement\":[1],\"noScrollControls\":[4,\"no-scroll-controls\"],\"color\":[1],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"disableSwipe\":[4,\"disable-swipe\"],\"hasScrollControls\":[32],\"hideControlRight\":[32],\"hideControlLeft\":[32],\"tab\":[32],\"show\":[64]},[[0,\"nanoTabClose\",\"handleTabClose\"]]]]],[\"nano-accordion\",[[1,\"nano-accordion\",{\"color\":[1],\"itemOpened\":[32]},[[0,\"nanoOpened\",\"onToggleHandler\"],[0,\"nanoClosed\",\"onClosedHandler\"]]]]],[\"nano-algolia-filter\",[[1,\"nano-algolia-filter\",{\"filterName\":[1,\"filter-name\"],\"value\":[1025],\"operator\":[1],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"changeEvent\":[32],\"internalValue\":[32],\"showFilter\":[32],\"indexResults\":[32],\"filterChanged\":[32],\"facets\":[32],\"tplRenderFn\":[32],\"globalStoreMethod\":[32]},[[0,\"nanoChange\",\"handleChangeEvent\"],[0,\"change\",\"handleChangeEvent\"]]]]],[\"nano-algolia-input\",[[1,\"nano-algolia-input\",{\"appId\":[1,\"app-id\"],\"apiKey\":[1,\"api-key\"],\"searchIndex\":[1040],\"searchIndexName\":[1,\"search-index-name\"],\"minChars\":[2,\"min-chars\"],\"autoEmit\":[4,\"auto-emit\"],\"browseIndex\":[1028,\"browse-index\"],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"searchStr\":[32],\"algoliaIndex\":[32],\"currentResults\":[32],\"search\":[64]},[[0,\"nanoChange\",\"searchSubmit\"]]]]],[\"nano-algolia-pagination\",[[1,\"nano-algolia-pagination\",{\"maxToShow\":[2,\"max-to-show\"],\"currentPage\":[32],\"canGoPrev\":[32],\"canGoNext\":[32],\"show\":[32],\"tplRenderFn\":[32],\"indexResults\":[32],\"infiniteScroll\":[32],\"nextPage\":[64],\"prevPage\":[64],\"goToPage\":[64]}]]],[\"nano-algolia-results\",[[1,\"nano-algolia-results\",{\"infiniteScroll\":[4,\"infinite-scroll\"],\"appendPages\":[4,\"append-pages\"],\"showResults\":[32],\"tplRenderFn\":[32],\"results\":[32],\"indexResults\":[32],\"resultsPage\":[32],\"changeEvent\":[32],\"facets\":[32],\"isLoading\":[32]}]]],[\"nano-aspect-ratio\",[[1,\"nano-aspect-ratio\",{\"aspectRatio\":[1,\"aspect-ratio\"],\"fit\":[1]}]]],[\"nano-checkbox\",[[6,\"nano-checkbox\",{\"hasFocus\":[1540,\"has-focus\"],\"checked\":[1540],\"disabled\":[516],\"value\":[513],\"name\":[513],\"required\":[516],\"type\":[513],\"label\":[1],\"indeterminate\":[1540],\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"color\":[1],\"form\":[1],\"inputType\":[32],\"_invalid\":[32],\"getInputElement\":[64],\"reportValidity\":[64],\"setError\":[64],\"setFocus\":[64],\"removeFocus\":[64]},[[16,\"reset\",\"onReset\"]]]]],[\"nano-checkbox-group\",[[6,\"nano-checkbox-group\",{\"validateOn\":[1025,\"validate-on\"],\"showInlineError\":[4,\"show-inline-error\"],\"min\":[2],\"max\":[2],\"disabled\":[516],\"legend\":[1],\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"value\":[1025],\"checkboxes\":[32],\"nativeCbs\":[32],\"errorMessage\":[32],\"showErrorMsg\":[32],\"hasHelperSlot\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"showError\":[64]},[[0,\"nanoChange\",\"handleValueChange\"],[0,\"nanoChange\",\"handleCbChange\"]]]]],[\"nano-details\",[[1,\"nano-details\",{\"label\":[1],\"open\":[1540],\"noHandle\":[4,\"no-handle\"],\"iconRotation\":[2,\"icon-rotation\"],\"color\":[1],\"isLoading\":[32]}]]],[\"nano-drawer\",[[1,\"nano-drawer\",{\"open\":[1540],\"label\":[1],\"placement\":[1],\"contained\":[4],\"noHeader\":[4,\"no-header\"],\"type\":[1],\"contentSelector\":[1,\"content-selector\"],\"hasFooter\":[32],\"isVisible\":[32],\"show\":[64],\"hide\":[64]}]]],[\"nano-field-validator\",[[4,\"nano-field-validator\",{\"validateOn\":[1025,\"validate-on\"],\"scrollToInvalid\":[4,\"scroll-to-invalid\"],\"dirty\":[2564],\"valid\":[2564],\"store\":[2064],\"payload\":[2064],\"showValidation\":[2052,\"show-validation\"],\"validationState\":[2064],\"extraFieldSelector\":[1,\"extra-field-selector\"],\"validation\":[16],\"submitted\":[32],\"userForm\":[32],\"_dirty\":[32],\"_valid\":[32],\"_store\":[32],\"setStore\":[64],\"setCustomValidity\":[64],\"resetValidity\":[64],\"scrollToFirstInvalid\":[64]},[[0,\"nanoChange\",\"handleFieldChange\"],[0,\"input\",\"handlePlainFieldChange\"],[0,\"change\",\"handlePlainFieldChange\"],[0,\"submit\",\"handleSubmit\"]]]]],[\"nano-range\",[[6,\"nano-range\",{\"color\":[1],\"debounce\":[2],\"name\":[1],\"dualKnobs\":[4,\"dual-knobs\"],\"min\":[2],\"max\":[2],\"pin\":[4],\"snaps\":[4],\"step\":[2],\"ticks\":[4],\"disabled\":[4],\"value\":[1026],\"ratioA\":[32],\"ratioB\":[32],\"pressedKnob\":[32]}]]],[\"nano-rating\",[[2,\"nano-rating\",{\"value\":[1538],\"max\":[2],\"precision\":[2],\"readonly\":[4],\"disabled\":[4],\"name\":[1],\"symbolName\":[1,\"symbol-name\"],\"symbol\":[16],\"hoverValue\":[32],\"isHovering\":[32],\"setFocus\":[64],\"removeFocus\":[64]}]]],[\"nano-slide\",[[1,\"nano-slide\",{\"ready\":[1540]}]]],[\"nano-slides\",[[1,\"nano-slides\",{\"options\":[1040],\"navbtns\":[4],\"pager\":[4],\"fullscreenbtn\":[4],\"fullscreen\":[1540],\"animation\":[513],\"currentSlide\":[1538,\"current-slide\"],\"autoplay\":[8],\"ready\":[1540],\"iCurrentSlide\":[32],\"slidesReady\":[32],\"didInit\":[32],\"update\":[64],\"updateAutoHeight\":[64],\"slideTo\":[64],\"slideNext\":[64],\"slidePrev\":[64],\"getActiveIndex\":[64],\"length\":[64],\"isEnd\":[64],\"isBeginning\":[64],\"startAutoplay\":[64],\"stopAutoplay\":[64],\"lockSwipes\":[64],\"getflickity\":[64],\"reload\":[64]}]]],[\"nano-tab-content\",[[1,\"nano-tab-content\",{\"name\":[513],\"active\":[516],\"ready\":[32]}]]],[\"nano-spinner\",[[1,\"nano-spinner\",{\"type\":[1],\"overlay\":[516],\"hasText\":[32]}]]],[\"nano-table\",[[4,\"nano-table\",{\"type\":[1],\"caption\":[1],\"showCaption\":[4,\"show-caption\"],\"loading\":[4],\"placeholderSize\":[2,\"placeholder-size\"],\"rows\":[1040],\"columns\":[1040],\"headRender\":[16],\"rowRender\":[16],\"footRender\":[16],\"showFooter\":[4,\"show-footer\"],\"perBlock\":[2,\"per-block\"],\"blocksLength\":[2050,\"blocks-length\"],\"searchTerm\":[1,\"search-term\"],\"customFilterFn\":[16],\"customSortFn\":[16],\"defaultSort\":[4,\"default-sort\"],\"defaultColDraggable\":[4,\"default-col-draggable\"],\"virtualTotalItems\":[2,\"virtual-total-items\"],\"internalLoading\":[32],\"blocks\":[32],\"activeBlocks\":[32],\"resetSorting\":[64],\"addSort\":[64],\"resetFilters\":[64],\"addFilters\":[64],\"removeFilters\":[64],\"updateRow\":[64]}]]],[\"nano-algolia\",[[1,\"nano-algolia\",{\"showResults\":[1028,\"show-results\"],\"resultsPage\":[1026,\"results-page\"],\"appId\":[1025,\"app-id\"],\"apiKey\":[1025,\"api-key\"],\"searchIndex\":[1040],\"searchIndexName\":[1025,\"search-index-name\"],\"listenTo\":[1,\"listen-to\"],\"query\":[1025],\"operator\":[1],\"filters\":[16],\"tplEngine\":[16],\"tplRenderFn\":[16],\"replicaIndex\":[1025,\"replica-index\"],\"browseIndex\":[1028,\"browse-index\"],\"minChars\":[2,\"min-chars\"],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"_dynFacetFilters\":[32],\"inputField\":[32],\"algoliaIndex\":[32],\"indeces\":[32],\"resultsEmitterEle\":[32],\"indexResults\":[32],\"filterChanged\":[32],\"currentHits\":[32],\"changeEvent\":[32],\"isLoading\":[32],\"wormholeState\":[32],\"removeFilters\":[64]},[[0,\"nanoTplUpdated\",\"onAllTplUpdate\"],[0,\"nanoPageChanged\",\"onPageChange\"],[0,\"nanoFilterChanged\",\"onFilterChange\"],[16,\"nanoChange\",\"handleInputChange\"],[16,\"change\",\"handleInputChange\"]]]]],[\"nano-icon\",[[1,\"nano-icon\",{\"color\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"flipRtl\":[4,\"flip-rtl\"],\"name\":[1],\"src\":[1],\"icon\":[8],\"size\":[1],\"lazy\":[4],\"svgContent\":[32],\"isVisible\":[32],\"isLoading\":[32]}]]],[\"nano-date-picker\",[[1,\"nano-date-picker\",{\"selectedDate\":[1025,\"selected-date\"],\"min\":[1],\"max\":[1],\"firstDayOfWeek\":[2,\"first-day-of-week\"],\"localization\":[16],\"color\":[1],\"isDateDisabled\":[16],\"isModal\":[4,\"is-modal\"],\"firstFocusEle\":[16],\"activeFocus\":[32],\"focusedDay\":[32],\"setFocus\":[64]}]]],[\"nano-input\",[[6,\"nano-input\",{\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"color\":[1],\"accept\":[1],\"autocapitalise\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"clearInput\":[4,\"clear-input\"],\"clearOnEdit\":[4,\"clear-on-edit\"],\"debounce\":[2],\"disabled\":[516],\"inputmode\":[1],\"validateOn\":[1025,\"validate-on\"],\"showInlineError\":[516,\"show-inline-error\"],\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"floatLabel\":[4,\"float-label\"],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"multiple\":[4],\"name\":[1],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[4],\"spellcheck\":[4],\"step\":[1],\"size\":[2],\"type\":[513],\"form\":[1],\"value\":[1025],\"resize\":[1],\"rows\":[2],\"showCharCount\":[4,\"show-char-count\"],\"hasFocus\":[32],\"hasLabelSlot\":[32],\"hasHelperSlot\":[32],\"hasHelperEndSlot\":[32],\"errorMessage\":[32],\"datalist\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"select\":[64],\"getInputElement\":[64],\"showError\":[64]},[[16,\"reset\",\"onReset\"],[17,\"mousedown\",\"handleBlur\"],[0,\"keydown\",\"handleBlur\"]]]]],[\"nano-progress-bar\",[[1,\"nano-progress-bar\",{\"value\":[2],\"indeterminate\":[4],\"showPercent\":[4,\"show-percent\"]}]]],[\"nano-sticker\",[[1,\"nano-sticker\",{\"autoResize\":[4,\"auto-resize\"],\"isSticky\":[1028,\"is-sticky\"],\"offset\":[1026],\"position\":[1],\"quietMode\":[1,\"quiet-mode\"],\"hideOnNewStickers\":[4,\"hide-on-new-stickers\"],\"breakPointMax\":[2,\"break-point-max\"],\"breakPointMin\":[2,\"break-point-min\"],\"scrollParent\":[1040],\"stickTo\":[1,\"stick-to\"],\"isStuck\":[32],\"isRootSticker\":[32],\"hide\":[32],\"scrollHide\":[32],\"multiStickerHide\":[32],\"scrollingTo\":[32],\"quietModeIsOn\":[32],\"stuckCounter\":[32],\"stickerIndex\":[32],\"stickToEle\":[32],\"triggerPos\":[32],\"trigger\":[32],\"_offset\":[32],\"isHiding\":[64],\"isSticking\":[64],\"setTriggerPos\":[64],\"getTriggerPos\":[64],\"pauseHiding\":[64]}]]],[\"nano-dropdown\",[[1,\"nano-dropdown\",{\"autoOpen\":[4,\"auto-open\"],\"open\":[1540],\"closeOnSelect\":[4,\"close-on-select\"],\"containingElement\":[1040],\"tetherTo\":[16],\"placement\":[1],\"distance\":[2],\"skidding\":[2],\"hoist\":[4],\"dialogTitle\":[1,\"dialog-title\"],\"eventType\":[16],\"show\":[64],\"hide\":[64]},[[0,\"nanoOpen\",\"secondaryOpen\"],[0,\"nanoClose\",\"secondaryClose\"],[0,\"nanoSelect\",\"handlePanelSelect\"]]]]],[\"nano-datalist_3\",[[1,\"nano-datalist\",{\"selected\":[1040],\"dropDownConfig\":[6160],\"options\":[16],\"input\":[1],\"type\":[1],\"activeOptions\":[2064],\"open\":[1028],\"disableFilter\":[4,\"disable-filter\"],\"disabled\":[4],\"actvOptEles\":[32],\"connectedInput\":[32],\"inputLabel\":[32],\"hasNoResult\":[32],\"shouldOpen\":[32],\"canOpen\":[32],\"optionIds\":[32]}],[1,\"nano-option\",{\"value\":[1537],\"label\":[1537],\"selected\":[516],\"disabled\":[516],\"filterMeta\":[1,\"filter-meta\"],\"hasFocus\":[32]},[[0,\"keydown\",\"handleKeyDown\"]]],[1,\"nano-menu\",{\"hasFocus\":[2052,\"has-focus\"],\"type\":[1],\"label\":[1],\"setFocus\":[64],\"removeFocus\":[64],\"showActiveElement\":[64],\"resetActiveItem\":[64]},[[17,\"mousedown\",\"handleBlur\"],[0,\"keydown\",\"handleBlur\"]]]]],[\"nano-global-nav-user-profile_3\",[[6,\"nano-select\",{\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"color\":[1],\"autofocus\":[4],\"disabled\":[516],\"validateOn\":[1025,\"validate-on\"],\"showInlineError\":[516,\"show-inline-error\"],\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"floatLabel\":[4,\"float-label\"],\"multiple\":[4],\"name\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[4],\"size\":[2],\"max\":[2],\"min\":[2],\"form\":[1],\"allowCustomValues\":[4,\"allow-custom-values\"],\"value\":[6145],\"options\":[6160],\"clearSelect\":[4,\"clear-select\"],\"mask\":[4],\"debounce\":[2],\"dropDownConfig\":[1040],\"currInsertIndex\":[32],\"showErrorMsg\":[32],\"errorMessage\":[32],\"hasFocus\":[32],\"hasLabelSlot\":[32],\"hasHelperSlot\":[32],\"hasHelperEndSlot\":[32],\"inputSearchVal\":[32],\"_invalid\":[32],\"_eOptions\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getSelectElement\":[64],\"showError\":[64]},[[16,\"reset\",\"onReset\"],[17,\"mousedown\",\"handleBlur\"],[0,\"keydown\",\"handleBlur\"]]],[0,\"nano-global-nav-user-profile\",{\"myAccountUser\":[16],\"userProfileUrl\":[1,\"user-profile-url\"]}],[1,\"nano-nav-item\",{\"href\":[1025],\"target\":[1],\"disabled\":[4],\"open\":[1540],\"selected\":[516],\"secondaryActiveWidth\":[2,\"secondary-active-width\"],\"secondaryFallback\":[16],\"closeOnBlur\":[4,\"close-on-blur\"],\"notification\":[4],\"hasAnchorEle\":[32],\"didOpen\":[32],\"isInGlobalNav\":[32],\"isInMenuDrawer\":[32],\"isInMenu\":[32],\"hasFocus\":[32],\"setFocus\":[64]},[[16,\"click\",\"handleClose\"],[16,\"keyup\",\"handleClose\"]]]]],[\"nano-resize-observe_2\",[[1,\"nano-resize-observe\",{\"notifyContentFit\":[1,\"notify-content-fit\"],\"states\":[1],\"currentWidth\":[32],\"currentHeight\":[32],\"classNames\":[32],\"contentFitX\":[32],\"contentFitY\":[32]}],[1,\"nano-skeleton\",{\"animated\":[4]}]]],[\"nano-grid_3\",[[1,\"nano-img\",{\"alt\":[1],\"src\":[1],\"srcSet\":[1,\"src-set\"],\"lazy\":[4],\"background\":[4],\"autoHeight\":[1,\"auto-height\"],\"loadSrc\":[32],\"loadError\":[32],\"hasLoaded\":[32],\"imgStates\":[32],\"_src\":[32]}],[1,\"nano-grid\",{\"sSize\":[2,\"s-size\"],\"mSize\":[2,\"m-size\"],\"lSize\":[2,\"l-size\"],\"xlSize\":[2,\"xl-size\"],\"sCols\":[2,\"s-cols\"],\"mCols\":[2,\"m-cols\"],\"lCols\":[2,\"l-cols\"],\"xlCols\":[2,\"xl-cols\"],\"xxlCols\":[2,\"xxl-cols\"],\"showHelper\":[516,\"show-helper\"],\"contentPanel\":[516,\"content-panel\"],\"fullHeight\":[516,\"full-height\"],\"ready\":[32],\"isSmall\":[32],\"isMedium\":[32],\"isLarge\":[32],\"isXL\":[32],\"isXXL\":[32]}],[1,\"nano-grid-item\",{\"gridStates\":[1,\"grid-states\"],\"changeBP\":[64]}]]],[\"nano-icon-button_2\",[[2,\"nano-icon-button\",{\"iconName\":[1,\"icon-name\"],\"iconSrc\":[1,\"icon-src\"],\"type\":[513],\"name\":[513],\"value\":[513],\"label\":[1],\"showTooltip\":[4,\"show-tooltip\"],\"disabled\":[516],\"href\":[1],\"target\":[1],\"setFocus\":[64]}],[1,\"nano-tooltip\",{\"content\":[1],\"placement\":[1],\"disabled\":[4],\"distance\":[2],\"open\":[1540],\"skidding\":[2],\"hoist\":[4],\"trigger\":[1],\"show\":[64],\"hide\":[64]}]]]]"), options);
|
19
19
|
});
|
20
20
|
};
|
21
21
|
|
@@ -41,7 +41,7 @@ const patchCloneNodeFix = (HTMLElementPrototype) => {
|
|
41
41
|
};
|
42
42
|
|
43
43
|
patchBrowser().then(options => {
|
44
|
-
return bootstrapLazy(JSON.parse("[[\"nano-global-nav\",[[1,\"nano-global-nav\",{\"env\":[1],\"ssoDataUrl\":[1,\"sso-data-url\"],\"myAccountData\":[16],\"ssoRedirect\":[1,\"sso-redirect\"],\"getMyAccountData\":[4,\"get-my-account-data\"],\"activeMyAccountSections\":[16],\"showSearch\":[4,\"show-search\"],\"showLogo\":[4,\"show-logo\"],\"logoUrl\":[1,\"logo-url\"],\"searchIndeces\":[16],\"myAccountUser\":[1040],\"searchAppId\":[1025,\"search-app-id\"],\"searchApiKey\":[1025,\"search-api-key\"],\"searchValue\":[1025,\"search-value\"],\"searchIndex\":[1025,\"search-index\"],\"cartCount\":[1026,\"cart-count\"],\"msgCount\":[1026,\"msg-count\"],\"cartUrl\":[1025,\"cart-url\"],\"msgUrl\":[1025,\"msg-url\"],\"userProfileUrl\":[32],\"hasLoggedinSlot\":[32],\"hasSiteSlot\":[32],\"hasPromotionSlot\":[32],\"aboutSlotLen\":[32],\"iconSlotLen\":[32],\"mainSlotLen\":[32],\"overflowSlotLen\":[32],\"searchSlotLen\":[32],\"thresholdReady\":[32],\"remoteDataReady\":[32],\"ready\":[32],\"isResizing\":[32],\"intersectRatio\":[32],\"threshold\":[32],\"modalOpen\":[32],\"modalIsOpen\":[32],\"searchBarShown\":[32],\"scrollingUp\":[32],\"showAutocomplete\":[32],\"secondaryMenuOpen\":[32],\"userMenuOpen\":[32],\"menuFullScreen\":[32],\"searchLoading\":[32],\"searchValInternal\":[32],\"internalSearchIndeces\":[32],\"submitSearch\":[64],\"toggleOverflowMenu\":[64]},[[0,\"nanoOpen\",\"secondaryOpen\"],[0,\"nanoClose\",\"secondaryClose\"],[16,\"click\",\"menuClose\"]]]]],[\"nano-demo\",[[1,\"nano-demo\"]]],[\"nano-hero\",[[1,\"nano-hero\",{\"imgSrc\":[1,\"img-src\"],\"imgSrcSet\":[1,\"img-src-set\"],\"largeScreenBP\":[2,\"large-screen-b-p\"],\"theme\":[1],\"level\":[1],\"gridSizes\":[32],\"hasIconBox\":[32],\"hasScrim\":[32],\"hasSecondaryContent\":[32],\"hasQuote\":[32],\"hasBg\":[32],\"hasBackBtn\":[32],\"hasCtas\":[32],\"breadCrumbs\":[32],\"iconBoxItems\":[32]}]]],[\"nano-date-input\",[[6,\"nano-date-input\",{\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"helperText\":[4,\"helper-text\"],\"helperTextFormat\":[16],\"floatLabel\":[4,\"float-label\"],\"name\":[1],\"readonly\":[4],\"size\":[2],\"form\":[1],\"firstDayOfWeek\":[2,\"first-day-of-week\"],\"localization\":[16],\"disabled\":[4],\"color\":[1],\"autofocus\":[4],\"clearInput\":[4,\"clear-input\"],\"label\":[1],\"placeholder\":[1025],\"value\":[1537],\"validateOn\":[1,\"validate-on\"],\"showInlineError\":[516,\"show-inline-error\"],\"dateOrder\":[1,\"date-order\"],\"required\":[4],\"min\":[1],\"max\":[1],\"hideLabel\":[4,\"hide-label\"],\"picker\":[4],\"initialPickerDate\":[1,\"initial-picker-date\"],\"pickerOpen\":[1540,\"picker-open\"],\"closeAfterPicked\":[4,\"close-after-picked\"],\"dropDownConfig\":[6160],\"dateValue\":[2064],\"isDateDisabled\":[16],\"pattern\":[32],\"inputValue\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getInputElement\":[64],\"showError\":[64]}]]],[\"nano-dialog\",[[1,\"nano-dialog\",{\"showRibbon\":[4,\"show-ribbon\"],\"open\":[1540],\"label\":[1],\"noHeader\":[4,\"no-header\"],\"noFooter\":[4,\"no-footer\"],\"noUserDismiss\":[4,\"no-user-dismiss\"],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"hoist\":[4],\"isVisible\":[32],\"noDismiss\":[32],\"hasFooter\":[32],\"show\":[64],\"hide\":[64]}]]],[\"nano-alert\",[[1,\"nano-alert\",{\"open\":[1540],\"closable\":[516],\"color\":[513],\"duration\":[2],\"hoist\":[4],\"isModal\":[32],\"isToast\":[32],\"isShowing\":[32],\"label\":[32],\"show\":[64],\"hide\":[64],\"toast\":[64],\"alert\":[64]}]]],[\"nano-file-upload\",[[6,\"nano-file-upload\",{\"name\":[1],\"accept\":[1],\"capture\":[1],\"maxFileSize\":[2,\"max-file-size\"],\"maxFiles\":[2,\"max-files\"],\"label\":[1],\"placeholder\":[1],\"hideLabel\":[4,\"hide-label\"],\"required\":[4],\"disabled\":[516],\"clearInput\":[4,\"clear-input\"],\"showInlineError\":[516,\"show-inline-error\"],\"validateOn\":[1025,\"validate-on\"],\"form\":[1],\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"files\":[6160],\"value\":[6145],\"hasHelperSlot\":[32],\"hasLabelSlot\":[32],\"errorMessage\":[32],\"isDragging\":[32],\"fileList\":[32],\"hasFocus\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getInputElement\":[64],\"showError\":[64]},[[8,\"click\",\"globalClickHandler\"],[8,\"keydown\",\"globalKeydownHandler\"],[16,\"reset\",\"onReset\"]]]]],[\"nano-overflow-nav\",[[1,\"nano-overflow-nav\",{\"scrollControls\":[4,\"scroll-controls\"],\"orientation\":[513],\"activeHandler\":[16],\"inActiveHandler\":[16],\"isActiveHandler\":[16],\"instantReCalc\":[32],\"hasScrollControls\":[32],\"hideControlEnd\":[32],\"hideControlStart\":[32],\"syncActiveItem\":[64]}]]],[\"nano-tab\",[[1,\"nano-tab\",{\"panel\":[513],\"active\":[516],\"disabled\":[516],\"closable\":[4],\"setFocus\":[64],\"removeFocus\":[64]}]]],[\"nano-global-search-results\",[[1,\"nano-global-search-results\",{\"algoliaEle\":[32],\"currentWidth\":[32],\"apiKey\":[32],\"appId\":[32],\"index\":[32]},[[16,\"nanoSearchReset\",\"handleGlobalNavReset\"],[16,\"nanoSearchResult\",\"handleGlobalNavSearch\"],[0,\"nanoChange\",\"handleReorder\"],[0,\"nanoResultsShown\",\"attachListeners\"],[16,\"nanoNewResults\",\"attachResultListeners\"]]]]],[\"nano-menu-drawer\",[[1,\"nano-menu-drawer\",{\"open\":[1028],\"saveState\":[4,\"save-state\"],\"hideWidth\":[2,\"hide-width\"],\"hideHeight\":[4,\"hide-height\"],\"reset\":[32],\"widthOk\":[32],\"heightOk\":[32],\"isLoading\":[32],\"hide\":[32]},[[0,\"nanoOpen\",\"cancelNavItemEvents\"],[0,\"nanoClose\",\"cancelNavItemEvents\"],[16,\"nanoIsReady\",\"handleGlobalNavReady\"]]]]],[\"nano-split-pane\",[[1,\"nano-split-pane\",{\"position\":[6146],\"positionInPixels\":[1026,\"position-in-pixels\"],\"vertical\":[516],\"disabled\":[516],\"primary\":[1],\"snap\":[1],\"snapThreshold\":[2,\"snap-threshold\"],\"animationDuration\":[2,\"animation-duration\"],\"getPercentageToPixels\":[64],\"getPixelsToPercentage\":[64]}]]],[\"nano-tab-group\",[[1,\"nano-tab-group\",{\"placement\":[1],\"noScrollControls\":[4,\"no-scroll-controls\"],\"color\":[1],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"disableSwipe\":[4,\"disable-swipe\"],\"hasScrollControls\":[32],\"hideControlRight\":[32],\"hideControlLeft\":[32],\"tab\":[32],\"show\":[64]},[[0,\"nanoTabClose\",\"handleTabClose\"]]]]],[\"nano-accordion\",[[1,\"nano-accordion\",{\"color\":[1],\"itemOpened\":[32]},[[0,\"nanoOpened\",\"onToggleHandler\"],[0,\"nanoClosed\",\"onClosedHandler\"]]]]],[\"nano-algolia-filter\",[[1,\"nano-algolia-filter\",{\"filterName\":[1,\"filter-name\"],\"value\":[1025],\"operator\":[1],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"changeEvent\":[32],\"internalValue\":[32],\"showFilter\":[32],\"indexResults\":[32],\"filterChanged\":[32],\"facets\":[32],\"tplRenderFn\":[32],\"globalStoreMethod\":[32]},[[0,\"nanoChange\",\"handleChangeEvent\"],[0,\"change\",\"handleChangeEvent\"]]]]],[\"nano-algolia-input\",[[1,\"nano-algolia-input\",{\"appId\":[1,\"app-id\"],\"apiKey\":[1,\"api-key\"],\"searchIndex\":[1040],\"searchIndexName\":[1,\"search-index-name\"],\"minChars\":[2,\"min-chars\"],\"autoEmit\":[4,\"auto-emit\"],\"browseIndex\":[1028,\"browse-index\"],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"searchStr\":[32],\"algoliaIndex\":[32],\"currentResults\":[32],\"search\":[64]},[[0,\"nanoChange\",\"searchSubmit\"]]]]],[\"nano-algolia-pagination\",[[1,\"nano-algolia-pagination\",{\"maxToShow\":[2,\"max-to-show\"],\"currentPage\":[32],\"canGoPrev\":[32],\"canGoNext\":[32],\"show\":[32],\"tplRenderFn\":[32],\"indexResults\":[32],\"infiniteScroll\":[32],\"nextPage\":[64],\"prevPage\":[64],\"goToPage\":[64]}]]],[\"nano-algolia-results\",[[1,\"nano-algolia-results\",{\"infiniteScroll\":[4,\"infinite-scroll\"],\"appendPages\":[4,\"append-pages\"],\"showResults\":[32],\"tplRenderFn\":[32],\"results\":[32],\"indexResults\":[32],\"resultsPage\":[32],\"changeEvent\":[32],\"facets\":[32],\"isLoading\":[32]}]]],[\"nano-aspect-ratio\",[[1,\"nano-aspect-ratio\",{\"aspectRatio\":[1,\"aspect-ratio\"],\"fit\":[1]}]]],[\"nano-checkbox\",[[6,\"nano-checkbox\",{\"hasFocus\":[1540,\"has-focus\"],\"checked\":[1540],\"disabled\":[516],\"value\":[513],\"name\":[513],\"required\":[516],\"type\":[513],\"label\":[1],\"indeterminate\":[1540],\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"color\":[1],\"form\":[1],\"inputType\":[32],\"_invalid\":[32],\"getInputElement\":[64],\"reportValidity\":[64],\"setError\":[64],\"setFocus\":[64],\"removeFocus\":[64]},[[16,\"reset\",\"onReset\"]]]]],[\"nano-checkbox-group\",[[6,\"nano-checkbox-group\",{\"validateOn\":[1025,\"validate-on\"],\"showInlineError\":[4,\"show-inline-error\"],\"min\":[2],\"max\":[2],\"disabled\":[516],\"legend\":[1],\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"value\":[1025],\"checkboxes\":[32],\"nativeCbs\":[32],\"errorMessage\":[32],\"showErrorMsg\":[32],\"hasHelperSlot\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"showError\":[64]},[[0,\"nanoChange\",\"handleValueChange\"],[0,\"nanoChange\",\"handleCbChange\"]]]]],[\"nano-details\",[[1,\"nano-details\",{\"label\":[1],\"open\":[1540],\"noHandle\":[4,\"no-handle\"],\"iconRotation\":[2,\"icon-rotation\"],\"color\":[1],\"isLoading\":[32]}]]],[\"nano-drawer\",[[1,\"nano-drawer\",{\"open\":[1540],\"label\":[1],\"placement\":[1],\"contained\":[4],\"noHeader\":[4,\"no-header\"],\"type\":[1],\"contentSelector\":[1,\"content-selector\"],\"hasFooter\":[32],\"isVisible\":[32],\"show\":[64],\"hide\":[64]}]]],[\"nano-field-validator\",[[4,\"nano-field-validator\",{\"validateOn\":[1025,\"validate-on\"],\"scrollToInvalid\":[4,\"scroll-to-invalid\"],\"dirty\":[2564],\"valid\":[2564],\"store\":[2064],\"payload\":[2064],\"showValidation\":[2052,\"show-validation\"],\"validationState\":[2064],\"extraFieldSelector\":[1,\"extra-field-selector\"],\"validation\":[16],\"submitted\":[32],\"userForm\":[32],\"_dirty\":[32],\"_valid\":[32],\"_store\":[32],\"setStore\":[64],\"setCustomValidity\":[64],\"resetValidity\":[64]},[[0,\"nanoChange\",\"handleFieldChange\"],[0,\"input\",\"handlePlainFieldChange\"],[0,\"change\",\"handlePlainFieldChange\"],[0,\"submit\",\"handleSubmit\"]]]]],[\"nano-range\",[[6,\"nano-range\",{\"color\":[1],\"debounce\":[2],\"name\":[1],\"dualKnobs\":[4,\"dual-knobs\"],\"min\":[2],\"max\":[2],\"pin\":[4],\"snaps\":[4],\"step\":[2],\"ticks\":[4],\"disabled\":[4],\"value\":[1026],\"ratioA\":[32],\"ratioB\":[32],\"pressedKnob\":[32]}]]],[\"nano-rating\",[[2,\"nano-rating\",{\"value\":[1538],\"max\":[2],\"precision\":[2],\"readonly\":[4],\"disabled\":[4],\"name\":[1],\"symbolName\":[1,\"symbol-name\"],\"symbol\":[16],\"hoverValue\":[32],\"isHovering\":[32],\"setFocus\":[64],\"removeFocus\":[64]}]]],[\"nano-slide\",[[1,\"nano-slide\",{\"ready\":[1540]}]]],[\"nano-slides\",[[1,\"nano-slides\",{\"options\":[1040],\"navbtns\":[4],\"pager\":[4],\"fullscreenbtn\":[4],\"fullscreen\":[1540],\"animation\":[513],\"currentSlide\":[1538,\"current-slide\"],\"autoplay\":[8],\"ready\":[1540],\"iCurrentSlide\":[32],\"slidesReady\":[32],\"didInit\":[32],\"update\":[64],\"updateAutoHeight\":[64],\"slideTo\":[64],\"slideNext\":[64],\"slidePrev\":[64],\"getActiveIndex\":[64],\"length\":[64],\"isEnd\":[64],\"isBeginning\":[64],\"startAutoplay\":[64],\"stopAutoplay\":[64],\"lockSwipes\":[64],\"getflickity\":[64],\"reload\":[64]}]]],[\"nano-tab-content\",[[1,\"nano-tab-content\",{\"name\":[513],\"active\":[516],\"ready\":[32]}]]],[\"nano-spinner\",[[1,\"nano-spinner\",{\"type\":[1],\"overlay\":[516],\"hasText\":[32]}]]],[\"nano-table\",[[4,\"nano-table\",{\"type\":[1],\"caption\":[1],\"showCaption\":[4,\"show-caption\"],\"loading\":[4],\"placeholderSize\":[2,\"placeholder-size\"],\"rows\":[1040],\"columns\":[1040],\"headRender\":[16],\"rowRender\":[16],\"footRender\":[16],\"showFooter\":[4,\"show-footer\"],\"perBlock\":[2,\"per-block\"],\"blocksLength\":[2050,\"blocks-length\"],\"searchTerm\":[1,\"search-term\"],\"customFilterFn\":[16],\"customSortFn\":[16],\"defaultSort\":[4,\"default-sort\"],\"defaultColDraggable\":[4,\"default-col-draggable\"],\"virtualTotalItems\":[2,\"virtual-total-items\"],\"internalLoading\":[32],\"blocks\":[32],\"activeBlocks\":[32],\"resetSorting\":[64],\"addSort\":[64],\"resetFilters\":[64],\"addFilters\":[64],\"removeFilters\":[64],\"updateRow\":[64]}]]],[\"nano-algolia\",[[1,\"nano-algolia\",{\"showResults\":[1028,\"show-results\"],\"resultsPage\":[1026,\"results-page\"],\"appId\":[1025,\"app-id\"],\"apiKey\":[1025,\"api-key\"],\"searchIndex\":[1040],\"searchIndexName\":[1025,\"search-index-name\"],\"listenTo\":[1,\"listen-to\"],\"query\":[1025],\"operator\":[1],\"filters\":[16],\"tplEngine\":[16],\"tplRenderFn\":[16],\"replicaIndex\":[1025,\"replica-index\"],\"browseIndex\":[1028,\"browse-index\"],\"minChars\":[2,\"min-chars\"],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"_dynFacetFilters\":[32],\"inputField\":[32],\"algoliaIndex\":[32],\"indeces\":[32],\"resultsEmitterEle\":[32],\"indexResults\":[32],\"filterChanged\":[32],\"currentHits\":[32],\"changeEvent\":[32],\"isLoading\":[32],\"wormholeState\":[32],\"removeFilters\":[64]},[[0,\"nanoTplUpdated\",\"onAllTplUpdate\"],[0,\"nanoPageChanged\",\"onPageChange\"],[0,\"nanoFilterChanged\",\"onFilterChange\"],[16,\"nanoChange\",\"handleInputChange\"],[16,\"change\",\"handleInputChange\"]]]]],[\"nano-icon\",[[1,\"nano-icon\",{\"color\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"flipRtl\":[4,\"flip-rtl\"],\"name\":[1],\"src\":[1],\"icon\":[8],\"size\":[1],\"lazy\":[4],\"svgContent\":[32],\"isVisible\":[32],\"isLoading\":[32]}]]],[\"nano-date-picker\",[[1,\"nano-date-picker\",{\"selectedDate\":[1025,\"selected-date\"],\"min\":[1],\"max\":[1],\"firstDayOfWeek\":[2,\"first-day-of-week\"],\"localization\":[16],\"color\":[1],\"isDateDisabled\":[16],\"isModal\":[4,\"is-modal\"],\"firstFocusEle\":[16],\"activeFocus\":[32],\"focusedDay\":[32],\"setFocus\":[64]}]]],[\"nano-input\",[[6,\"nano-input\",{\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"color\":[1],\"accept\":[1],\"autocapitalise\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"clearInput\":[4,\"clear-input\"],\"clearOnEdit\":[4,\"clear-on-edit\"],\"debounce\":[2],\"disabled\":[516],\"inputmode\":[1],\"validateOn\":[1025,\"validate-on\"],\"showInlineError\":[516,\"show-inline-error\"],\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"floatLabel\":[4,\"float-label\"],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"multiple\":[4],\"name\":[1],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[4],\"spellcheck\":[4],\"step\":[1],\"size\":[2],\"type\":[513],\"form\":[1],\"value\":[1025],\"resize\":[1],\"rows\":[2],\"showCharCount\":[4,\"show-char-count\"],\"hasFocus\":[32],\"hasLabelSlot\":[32],\"hasHelperSlot\":[32],\"hasHelperEndSlot\":[32],\"errorMessage\":[32],\"datalist\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"select\":[64],\"getInputElement\":[64],\"showError\":[64]},[[16,\"reset\",\"onReset\"],[17,\"mousedown\",\"handleBlur\"],[0,\"keydown\",\"handleBlur\"]]]]],[\"nano-progress-bar\",[[1,\"nano-progress-bar\",{\"value\":[2],\"indeterminate\":[4],\"showPercent\":[4,\"show-percent\"]}]]],[\"nano-sticker\",[[1,\"nano-sticker\",{\"autoResize\":[4,\"auto-resize\"],\"isSticky\":[1028,\"is-sticky\"],\"offset\":[1026],\"position\":[1],\"quietMode\":[1,\"quiet-mode\"],\"hideOnNewStickers\":[4,\"hide-on-new-stickers\"],\"breakPointMax\":[2,\"break-point-max\"],\"breakPointMin\":[2,\"break-point-min\"],\"scrollParent\":[1040],\"stickTo\":[1,\"stick-to\"],\"isStuck\":[32],\"isRootSticker\":[32],\"hide\":[32],\"scrollHide\":[32],\"multiStickerHide\":[32],\"scrollingTo\":[32],\"quietModeIsOn\":[32],\"stuckCounter\":[32],\"stickerIndex\":[32],\"stickToEle\":[32],\"triggerPos\":[32],\"trigger\":[32],\"_offset\":[32],\"isHiding\":[64],\"isSticking\":[64],\"setTriggerPos\":[64],\"getTriggerPos\":[64],\"pauseHiding\":[64]}]]],[\"nano-dropdown\",[[1,\"nano-dropdown\",{\"autoOpen\":[4,\"auto-open\"],\"open\":[1540],\"closeOnSelect\":[4,\"close-on-select\"],\"containingElement\":[1040],\"tetherTo\":[16],\"placement\":[1],\"distance\":[2],\"skidding\":[2],\"hoist\":[4],\"dialogTitle\":[1,\"dialog-title\"],\"eventType\":[16],\"show\":[64],\"hide\":[64]},[[0,\"nanoOpen\",\"secondaryOpen\"],[0,\"nanoClose\",\"secondaryClose\"],[0,\"nanoSelect\",\"handlePanelSelect\"]]]]],[\"nano-datalist_3\",[[1,\"nano-datalist\",{\"selected\":[1040],\"dropDownConfig\":[6160],\"options\":[16],\"input\":[1],\"type\":[1],\"activeOptions\":[2064],\"open\":[1028],\"disableFilter\":[4,\"disable-filter\"],\"disabled\":[4],\"actvOptEles\":[32],\"connectedInput\":[32],\"inputLabel\":[32],\"hasNoResult\":[32],\"shouldOpen\":[32],\"canOpen\":[32],\"optionIds\":[32]}],[1,\"nano-option\",{\"value\":[1537],\"label\":[1537],\"selected\":[516],\"disabled\":[516],\"filterMeta\":[1,\"filter-meta\"],\"hasFocus\":[32]},[[0,\"keydown\",\"handleKeyDown\"]]],[1,\"nano-menu\",{\"hasFocus\":[2052,\"has-focus\"],\"type\":[1],\"label\":[1],\"setFocus\":[64],\"removeFocus\":[64],\"showActiveElement\":[64],\"resetActiveItem\":[64]},[[17,\"mousedown\",\"handleBlur\"],[0,\"keydown\",\"handleBlur\"]]]]],[\"nano-global-nav-user-profile_3\",[[6,\"nano-select\",{\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"color\":[1],\"autofocus\":[4],\"disabled\":[516],\"validateOn\":[1025,\"validate-on\"],\"showInlineError\":[516,\"show-inline-error\"],\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"floatLabel\":[4,\"float-label\"],\"multiple\":[4],\"name\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[4],\"size\":[2],\"max\":[2],\"min\":[2],\"form\":[1],\"allowCustomValues\":[4,\"allow-custom-values\"],\"value\":[6145],\"options\":[6160],\"clearSelect\":[4,\"clear-select\"],\"mask\":[4],\"debounce\":[2],\"dropDownConfig\":[1040],\"currInsertIndex\":[32],\"showErrorMsg\":[32],\"errorMessage\":[32],\"hasFocus\":[32],\"hasLabelSlot\":[32],\"hasHelperSlot\":[32],\"hasHelperEndSlot\":[32],\"inputSearchVal\":[32],\"_invalid\":[32],\"_eOptions\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getSelectElement\":[64],\"showError\":[64]},[[16,\"reset\",\"onReset\"],[17,\"mousedown\",\"handleBlur\"],[0,\"keydown\",\"handleBlur\"]]],[0,\"nano-global-nav-user-profile\",{\"myAccountUser\":[16],\"userProfileUrl\":[1,\"user-profile-url\"]}],[1,\"nano-nav-item\",{\"href\":[1025],\"target\":[1],\"disabled\":[4],\"open\":[1540],\"selected\":[516],\"secondaryActiveWidth\":[2,\"secondary-active-width\"],\"secondaryFallback\":[16],\"closeOnBlur\":[4,\"close-on-blur\"],\"notification\":[4],\"hasAnchorEle\":[32],\"didOpen\":[32],\"isInGlobalNav\":[32],\"isInMenuDrawer\":[32],\"isInMenu\":[32],\"hasFocus\":[32],\"setFocus\":[64]},[[16,\"click\",\"handleClose\"],[16,\"keyup\",\"handleClose\"]]]]],[\"nano-resize-observe_2\",[[1,\"nano-resize-observe\",{\"notifyContentFit\":[1,\"notify-content-fit\"],\"states\":[1],\"currentWidth\":[32],\"currentHeight\":[32],\"classNames\":[32],\"contentFitX\":[32],\"contentFitY\":[32]}],[1,\"nano-skeleton\",{\"animated\":[4]}]]],[\"nano-grid_3\",[[1,\"nano-img\",{\"alt\":[1],\"src\":[1],\"srcSet\":[1,\"src-set\"],\"lazy\":[4],\"background\":[4],\"autoHeight\":[1,\"auto-height\"],\"loadSrc\":[32],\"loadError\":[32],\"hasLoaded\":[32],\"imgStates\":[32],\"_src\":[32]}],[1,\"nano-grid\",{\"sSize\":[2,\"s-size\"],\"mSize\":[2,\"m-size\"],\"lSize\":[2,\"l-size\"],\"xlSize\":[2,\"xl-size\"],\"sCols\":[2,\"s-cols\"],\"mCols\":[2,\"m-cols\"],\"lCols\":[2,\"l-cols\"],\"xlCols\":[2,\"xl-cols\"],\"xxlCols\":[2,\"xxl-cols\"],\"showHelper\":[516,\"show-helper\"],\"contentPanel\":[516,\"content-panel\"],\"fullHeight\":[516,\"full-height\"],\"ready\":[32],\"isSmall\":[32],\"isMedium\":[32],\"isLarge\":[32],\"isXL\":[32],\"isXXL\":[32]}],[1,\"nano-grid-item\",{\"gridStates\":[1,\"grid-states\"],\"changeBP\":[64]}]]],[\"nano-icon-button_2\",[[2,\"nano-icon-button\",{\"iconName\":[1,\"icon-name\"],\"iconSrc\":[1,\"icon-src\"],\"type\":[513],\"name\":[513],\"value\":[513],\"label\":[1],\"showTooltip\":[4,\"show-tooltip\"],\"disabled\":[516],\"href\":[1],\"target\":[1],\"setFocus\":[64]}],[1,\"nano-tooltip\",{\"content\":[1],\"placement\":[1],\"disabled\":[4],\"distance\":[2],\"open\":[1540],\"skidding\":[2],\"hoist\":[4],\"trigger\":[1],\"show\":[64],\"hide\":[64]}]]]]"), options);
|
44
|
+
return bootstrapLazy(JSON.parse("[[\"nano-global-nav\",[[1,\"nano-global-nav\",{\"env\":[1],\"ssoDataUrl\":[1,\"sso-data-url\"],\"myAccountData\":[16],\"ssoRedirect\":[1,\"sso-redirect\"],\"getMyAccountData\":[4,\"get-my-account-data\"],\"activeMyAccountSections\":[16],\"showSearch\":[4,\"show-search\"],\"showLogo\":[4,\"show-logo\"],\"logoUrl\":[1,\"logo-url\"],\"searchIndeces\":[16],\"myAccountUser\":[1040],\"searchAppId\":[1025,\"search-app-id\"],\"searchApiKey\":[1025,\"search-api-key\"],\"searchValue\":[1025,\"search-value\"],\"searchIndex\":[1025,\"search-index\"],\"cartCount\":[1026,\"cart-count\"],\"msgCount\":[1026,\"msg-count\"],\"cartUrl\":[1025,\"cart-url\"],\"msgUrl\":[1025,\"msg-url\"],\"userProfileUrl\":[32],\"hasLoggedinSlot\":[32],\"hasSiteSlot\":[32],\"hasPromotionSlot\":[32],\"aboutSlotLen\":[32],\"iconSlotLen\":[32],\"mainSlotLen\":[32],\"overflowSlotLen\":[32],\"searchSlotLen\":[32],\"thresholdReady\":[32],\"remoteDataReady\":[32],\"ready\":[32],\"isResizing\":[32],\"intersectRatio\":[32],\"threshold\":[32],\"modalOpen\":[32],\"modalIsOpen\":[32],\"searchBarShown\":[32],\"scrollingUp\":[32],\"showAutocomplete\":[32],\"secondaryMenuOpen\":[32],\"userMenuOpen\":[32],\"menuFullScreen\":[32],\"searchLoading\":[32],\"searchValInternal\":[32],\"internalSearchIndeces\":[32],\"submitSearch\":[64],\"toggleOverflowMenu\":[64]},[[0,\"nanoOpen\",\"secondaryOpen\"],[0,\"nanoClose\",\"secondaryClose\"],[16,\"click\",\"menuClose\"]]]]],[\"nano-demo\",[[1,\"nano-demo\"]]],[\"nano-hero\",[[1,\"nano-hero\",{\"imgSrc\":[1,\"img-src\"],\"imgSrcSet\":[1,\"img-src-set\"],\"largeScreenBP\":[2,\"large-screen-b-p\"],\"theme\":[1],\"level\":[1],\"gridSizes\":[32],\"hasIconBox\":[32],\"hasScrim\":[32],\"hasSecondaryContent\":[32],\"hasQuote\":[32],\"hasBg\":[32],\"hasBackBtn\":[32],\"hasCtas\":[32],\"breadCrumbs\":[32],\"iconBoxItems\":[32]}]]],[\"nano-date-input\",[[6,\"nano-date-input\",{\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"helperText\":[4,\"helper-text\"],\"helperTextFormat\":[16],\"floatLabel\":[4,\"float-label\"],\"name\":[1],\"readonly\":[4],\"size\":[2],\"form\":[1],\"firstDayOfWeek\":[2,\"first-day-of-week\"],\"localization\":[16],\"disabled\":[4],\"color\":[1],\"autofocus\":[4],\"clearInput\":[4,\"clear-input\"],\"label\":[1],\"placeholder\":[1025],\"value\":[1537],\"validateOn\":[1,\"validate-on\"],\"showInlineError\":[516,\"show-inline-error\"],\"dateOrder\":[1,\"date-order\"],\"required\":[4],\"min\":[1],\"max\":[1],\"hideLabel\":[4,\"hide-label\"],\"picker\":[4],\"initialPickerDate\":[1,\"initial-picker-date\"],\"pickerOpen\":[1540,\"picker-open\"],\"closeAfterPicked\":[4,\"close-after-picked\"],\"dropDownConfig\":[6160],\"dateValue\":[2064],\"isDateDisabled\":[16],\"pattern\":[32],\"inputValue\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getInputElement\":[64],\"showError\":[64]}]]],[\"nano-dialog\",[[1,\"nano-dialog\",{\"showRibbon\":[4,\"show-ribbon\"],\"open\":[1540],\"label\":[1],\"noHeader\":[4,\"no-header\"],\"noFooter\":[4,\"no-footer\"],\"noUserDismiss\":[4,\"no-user-dismiss\"],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"hoist\":[4],\"isVisible\":[32],\"noDismiss\":[32],\"hasFooter\":[32],\"show\":[64],\"hide\":[64]}]]],[\"nano-alert\",[[1,\"nano-alert\",{\"open\":[1540],\"closable\":[516],\"color\":[513],\"duration\":[2],\"hoist\":[4],\"isModal\":[32],\"isToast\":[32],\"isShowing\":[32],\"label\":[32],\"show\":[64],\"hide\":[64],\"toast\":[64],\"alert\":[64]}]]],[\"nano-file-upload\",[[6,\"nano-file-upload\",{\"name\":[1],\"accept\":[1],\"capture\":[1],\"maxFileSize\":[2,\"max-file-size\"],\"maxFiles\":[2,\"max-files\"],\"label\":[1],\"placeholder\":[1],\"hideLabel\":[4,\"hide-label\"],\"required\":[4],\"disabled\":[516],\"clearInput\":[4,\"clear-input\"],\"showInlineError\":[516,\"show-inline-error\"],\"validateOn\":[1025,\"validate-on\"],\"form\":[1],\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"files\":[6160],\"value\":[6145],\"hasHelperSlot\":[32],\"hasLabelSlot\":[32],\"errorMessage\":[32],\"isDragging\":[32],\"fileList\":[32],\"hasFocus\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getInputElement\":[64],\"showError\":[64]},[[8,\"click\",\"globalClickHandler\"],[8,\"keydown\",\"globalKeydownHandler\"],[16,\"reset\",\"onReset\"]]]]],[\"nano-overflow-nav\",[[1,\"nano-overflow-nav\",{\"scrollControls\":[4,\"scroll-controls\"],\"orientation\":[513],\"activeHandler\":[16],\"inActiveHandler\":[16],\"isActiveHandler\":[16],\"instantReCalc\":[32],\"hasScrollControls\":[32],\"hideControlEnd\":[32],\"hideControlStart\":[32],\"syncActiveItem\":[64]}]]],[\"nano-tab\",[[1,\"nano-tab\",{\"panel\":[513],\"active\":[516],\"disabled\":[516],\"closable\":[4],\"setFocus\":[64],\"removeFocus\":[64]}]]],[\"nano-global-search-results\",[[1,\"nano-global-search-results\",{\"algoliaEle\":[32],\"currentWidth\":[32],\"apiKey\":[32],\"appId\":[32],\"index\":[32]},[[16,\"nanoSearchReset\",\"handleGlobalNavReset\"],[16,\"nanoSearchResult\",\"handleGlobalNavSearch\"],[0,\"nanoChange\",\"handleReorder\"],[0,\"nanoResultsShown\",\"attachListeners\"],[16,\"nanoNewResults\",\"attachResultListeners\"]]]]],[\"nano-menu-drawer\",[[1,\"nano-menu-drawer\",{\"open\":[1028],\"saveState\":[4,\"save-state\"],\"hideWidth\":[2,\"hide-width\"],\"hideHeight\":[4,\"hide-height\"],\"reset\":[32],\"widthOk\":[32],\"heightOk\":[32],\"isLoading\":[32],\"hide\":[32]},[[0,\"nanoOpen\",\"cancelNavItemEvents\"],[0,\"nanoClose\",\"cancelNavItemEvents\"],[16,\"nanoIsReady\",\"handleGlobalNavReady\"]]]]],[\"nano-split-pane\",[[1,\"nano-split-pane\",{\"position\":[6146],\"positionInPixels\":[1026,\"position-in-pixels\"],\"vertical\":[516],\"disabled\":[516],\"primary\":[1],\"snap\":[1],\"snapThreshold\":[2,\"snap-threshold\"],\"animationDuration\":[2,\"animation-duration\"],\"getPercentageToPixels\":[64],\"getPixelsToPercentage\":[64]}]]],[\"nano-tab-group\",[[1,\"nano-tab-group\",{\"placement\":[1],\"noScrollControls\":[4,\"no-scroll-controls\"],\"color\":[1],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"disableSwipe\":[4,\"disable-swipe\"],\"hasScrollControls\":[32],\"hideControlRight\":[32],\"hideControlLeft\":[32],\"tab\":[32],\"show\":[64]},[[0,\"nanoTabClose\",\"handleTabClose\"]]]]],[\"nano-accordion\",[[1,\"nano-accordion\",{\"color\":[1],\"itemOpened\":[32]},[[0,\"nanoOpened\",\"onToggleHandler\"],[0,\"nanoClosed\",\"onClosedHandler\"]]]]],[\"nano-algolia-filter\",[[1,\"nano-algolia-filter\",{\"filterName\":[1,\"filter-name\"],\"value\":[1025],\"operator\":[1],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"changeEvent\":[32],\"internalValue\":[32],\"showFilter\":[32],\"indexResults\":[32],\"filterChanged\":[32],\"facets\":[32],\"tplRenderFn\":[32],\"globalStoreMethod\":[32]},[[0,\"nanoChange\",\"handleChangeEvent\"],[0,\"change\",\"handleChangeEvent\"]]]]],[\"nano-algolia-input\",[[1,\"nano-algolia-input\",{\"appId\":[1,\"app-id\"],\"apiKey\":[1,\"api-key\"],\"searchIndex\":[1040],\"searchIndexName\":[1,\"search-index-name\"],\"minChars\":[2,\"min-chars\"],\"autoEmit\":[4,\"auto-emit\"],\"browseIndex\":[1028,\"browse-index\"],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"searchStr\":[32],\"algoliaIndex\":[32],\"currentResults\":[32],\"search\":[64]},[[0,\"nanoChange\",\"searchSubmit\"]]]]],[\"nano-algolia-pagination\",[[1,\"nano-algolia-pagination\",{\"maxToShow\":[2,\"max-to-show\"],\"currentPage\":[32],\"canGoPrev\":[32],\"canGoNext\":[32],\"show\":[32],\"tplRenderFn\":[32],\"indexResults\":[32],\"infiniteScroll\":[32],\"nextPage\":[64],\"prevPage\":[64],\"goToPage\":[64]}]]],[\"nano-algolia-results\",[[1,\"nano-algolia-results\",{\"infiniteScroll\":[4,\"infinite-scroll\"],\"appendPages\":[4,\"append-pages\"],\"showResults\":[32],\"tplRenderFn\":[32],\"results\":[32],\"indexResults\":[32],\"resultsPage\":[32],\"changeEvent\":[32],\"facets\":[32],\"isLoading\":[32]}]]],[\"nano-aspect-ratio\",[[1,\"nano-aspect-ratio\",{\"aspectRatio\":[1,\"aspect-ratio\"],\"fit\":[1]}]]],[\"nano-checkbox\",[[6,\"nano-checkbox\",{\"hasFocus\":[1540,\"has-focus\"],\"checked\":[1540],\"disabled\":[516],\"value\":[513],\"name\":[513],\"required\":[516],\"type\":[513],\"label\":[1],\"indeterminate\":[1540],\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"color\":[1],\"form\":[1],\"inputType\":[32],\"_invalid\":[32],\"getInputElement\":[64],\"reportValidity\":[64],\"setError\":[64],\"setFocus\":[64],\"removeFocus\":[64]},[[16,\"reset\",\"onReset\"]]]]],[\"nano-checkbox-group\",[[6,\"nano-checkbox-group\",{\"validateOn\":[1025,\"validate-on\"],\"showInlineError\":[4,\"show-inline-error\"],\"min\":[2],\"max\":[2],\"disabled\":[516],\"legend\":[1],\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"value\":[1025],\"checkboxes\":[32],\"nativeCbs\":[32],\"errorMessage\":[32],\"showErrorMsg\":[32],\"hasHelperSlot\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"showError\":[64]},[[0,\"nanoChange\",\"handleValueChange\"],[0,\"nanoChange\",\"handleCbChange\"]]]]],[\"nano-details\",[[1,\"nano-details\",{\"label\":[1],\"open\":[1540],\"noHandle\":[4,\"no-handle\"],\"iconRotation\":[2,\"icon-rotation\"],\"color\":[1],\"isLoading\":[32]}]]],[\"nano-drawer\",[[1,\"nano-drawer\",{\"open\":[1540],\"label\":[1],\"placement\":[1],\"contained\":[4],\"noHeader\":[4,\"no-header\"],\"type\":[1],\"contentSelector\":[1,\"content-selector\"],\"hasFooter\":[32],\"isVisible\":[32],\"show\":[64],\"hide\":[64]}]]],[\"nano-field-validator\",[[4,\"nano-field-validator\",{\"validateOn\":[1025,\"validate-on\"],\"scrollToInvalid\":[4,\"scroll-to-invalid\"],\"dirty\":[2564],\"valid\":[2564],\"store\":[2064],\"payload\":[2064],\"showValidation\":[2052,\"show-validation\"],\"validationState\":[2064],\"extraFieldSelector\":[1,\"extra-field-selector\"],\"validation\":[16],\"submitted\":[32],\"userForm\":[32],\"_dirty\":[32],\"_valid\":[32],\"_store\":[32],\"setStore\":[64],\"setCustomValidity\":[64],\"resetValidity\":[64],\"scrollToFirstInvalid\":[64]},[[0,\"nanoChange\",\"handleFieldChange\"],[0,\"input\",\"handlePlainFieldChange\"],[0,\"change\",\"handlePlainFieldChange\"],[0,\"submit\",\"handleSubmit\"]]]]],[\"nano-range\",[[6,\"nano-range\",{\"color\":[1],\"debounce\":[2],\"name\":[1],\"dualKnobs\":[4,\"dual-knobs\"],\"min\":[2],\"max\":[2],\"pin\":[4],\"snaps\":[4],\"step\":[2],\"ticks\":[4],\"disabled\":[4],\"value\":[1026],\"ratioA\":[32],\"ratioB\":[32],\"pressedKnob\":[32]}]]],[\"nano-rating\",[[2,\"nano-rating\",{\"value\":[1538],\"max\":[2],\"precision\":[2],\"readonly\":[4],\"disabled\":[4],\"name\":[1],\"symbolName\":[1,\"symbol-name\"],\"symbol\":[16],\"hoverValue\":[32],\"isHovering\":[32],\"setFocus\":[64],\"removeFocus\":[64]}]]],[\"nano-slide\",[[1,\"nano-slide\",{\"ready\":[1540]}]]],[\"nano-slides\",[[1,\"nano-slides\",{\"options\":[1040],\"navbtns\":[4],\"pager\":[4],\"fullscreenbtn\":[4],\"fullscreen\":[1540],\"animation\":[513],\"currentSlide\":[1538,\"current-slide\"],\"autoplay\":[8],\"ready\":[1540],\"iCurrentSlide\":[32],\"slidesReady\":[32],\"didInit\":[32],\"update\":[64],\"updateAutoHeight\":[64],\"slideTo\":[64],\"slideNext\":[64],\"slidePrev\":[64],\"getActiveIndex\":[64],\"length\":[64],\"isEnd\":[64],\"isBeginning\":[64],\"startAutoplay\":[64],\"stopAutoplay\":[64],\"lockSwipes\":[64],\"getflickity\":[64],\"reload\":[64]}]]],[\"nano-tab-content\",[[1,\"nano-tab-content\",{\"name\":[513],\"active\":[516],\"ready\":[32]}]]],[\"nano-spinner\",[[1,\"nano-spinner\",{\"type\":[1],\"overlay\":[516],\"hasText\":[32]}]]],[\"nano-table\",[[4,\"nano-table\",{\"type\":[1],\"caption\":[1],\"showCaption\":[4,\"show-caption\"],\"loading\":[4],\"placeholderSize\":[2,\"placeholder-size\"],\"rows\":[1040],\"columns\":[1040],\"headRender\":[16],\"rowRender\":[16],\"footRender\":[16],\"showFooter\":[4,\"show-footer\"],\"perBlock\":[2,\"per-block\"],\"blocksLength\":[2050,\"blocks-length\"],\"searchTerm\":[1,\"search-term\"],\"customFilterFn\":[16],\"customSortFn\":[16],\"defaultSort\":[4,\"default-sort\"],\"defaultColDraggable\":[4,\"default-col-draggable\"],\"virtualTotalItems\":[2,\"virtual-total-items\"],\"internalLoading\":[32],\"blocks\":[32],\"activeBlocks\":[32],\"resetSorting\":[64],\"addSort\":[64],\"resetFilters\":[64],\"addFilters\":[64],\"removeFilters\":[64],\"updateRow\":[64]}]]],[\"nano-algolia\",[[1,\"nano-algolia\",{\"showResults\":[1028,\"show-results\"],\"resultsPage\":[1026,\"results-page\"],\"appId\":[1025,\"app-id\"],\"apiKey\":[1025,\"api-key\"],\"searchIndex\":[1040],\"searchIndexName\":[1025,\"search-index-name\"],\"listenTo\":[1,\"listen-to\"],\"query\":[1025],\"operator\":[1],\"filters\":[16],\"tplEngine\":[16],\"tplRenderFn\":[16],\"replicaIndex\":[1025,\"replica-index\"],\"browseIndex\":[1028,\"browse-index\"],\"minChars\":[2,\"min-chars\"],\"storeId\":[1,\"store-id\"],\"storeMethod\":[1,\"store-method\"],\"_dynFacetFilters\":[32],\"inputField\":[32],\"algoliaIndex\":[32],\"indeces\":[32],\"resultsEmitterEle\":[32],\"indexResults\":[32],\"filterChanged\":[32],\"currentHits\":[32],\"changeEvent\":[32],\"isLoading\":[32],\"wormholeState\":[32],\"removeFilters\":[64]},[[0,\"nanoTplUpdated\",\"onAllTplUpdate\"],[0,\"nanoPageChanged\",\"onPageChange\"],[0,\"nanoFilterChanged\",\"onFilterChange\"],[16,\"nanoChange\",\"handleInputChange\"],[16,\"change\",\"handleInputChange\"]]]]],[\"nano-icon\",[[1,\"nano-icon\",{\"color\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"flipRtl\":[4,\"flip-rtl\"],\"name\":[1],\"src\":[1],\"icon\":[8],\"size\":[1],\"lazy\":[4],\"svgContent\":[32],\"isVisible\":[32],\"isLoading\":[32]}]]],[\"nano-date-picker\",[[1,\"nano-date-picker\",{\"selectedDate\":[1025,\"selected-date\"],\"min\":[1],\"max\":[1],\"firstDayOfWeek\":[2,\"first-day-of-week\"],\"localization\":[16],\"color\":[1],\"isDateDisabled\":[16],\"isModal\":[4,\"is-modal\"],\"firstFocusEle\":[16],\"activeFocus\":[32],\"focusedDay\":[32],\"setFocus\":[64]}]]],[\"nano-input\",[[6,\"nano-input\",{\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"color\":[1],\"accept\":[1],\"autocapitalise\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"clearInput\":[4,\"clear-input\"],\"clearOnEdit\":[4,\"clear-on-edit\"],\"debounce\":[2],\"disabled\":[516],\"inputmode\":[1],\"validateOn\":[1025,\"validate-on\"],\"showInlineError\":[516,\"show-inline-error\"],\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"floatLabel\":[4,\"float-label\"],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"multiple\":[4],\"name\":[1],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[4],\"spellcheck\":[4],\"step\":[1],\"size\":[2],\"type\":[513],\"form\":[1],\"value\":[1025],\"resize\":[1],\"rows\":[2],\"showCharCount\":[4,\"show-char-count\"],\"hasFocus\":[32],\"hasLabelSlot\":[32],\"hasHelperSlot\":[32],\"hasHelperEndSlot\":[32],\"errorMessage\":[32],\"datalist\":[32],\"_invalid\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"select\":[64],\"getInputElement\":[64],\"showError\":[64]},[[16,\"reset\",\"onReset\"],[17,\"mousedown\",\"handleBlur\"],[0,\"keydown\",\"handleBlur\"]]]]],[\"nano-progress-bar\",[[1,\"nano-progress-bar\",{\"value\":[2],\"indeterminate\":[4],\"showPercent\":[4,\"show-percent\"]}]]],[\"nano-sticker\",[[1,\"nano-sticker\",{\"autoResize\":[4,\"auto-resize\"],\"isSticky\":[1028,\"is-sticky\"],\"offset\":[1026],\"position\":[1],\"quietMode\":[1,\"quiet-mode\"],\"hideOnNewStickers\":[4,\"hide-on-new-stickers\"],\"breakPointMax\":[2,\"break-point-max\"],\"breakPointMin\":[2,\"break-point-min\"],\"scrollParent\":[1040],\"stickTo\":[1,\"stick-to\"],\"isStuck\":[32],\"isRootSticker\":[32],\"hide\":[32],\"scrollHide\":[32],\"multiStickerHide\":[32],\"scrollingTo\":[32],\"quietModeIsOn\":[32],\"stuckCounter\":[32],\"stickerIndex\":[32],\"stickToEle\":[32],\"triggerPos\":[32],\"trigger\":[32],\"_offset\":[32],\"isHiding\":[64],\"isSticking\":[64],\"setTriggerPos\":[64],\"getTriggerPos\":[64],\"pauseHiding\":[64]}]]],[\"nano-dropdown\",[[1,\"nano-dropdown\",{\"autoOpen\":[4,\"auto-open\"],\"open\":[1540],\"closeOnSelect\":[4,\"close-on-select\"],\"containingElement\":[1040],\"tetherTo\":[16],\"placement\":[1],\"distance\":[2],\"skidding\":[2],\"hoist\":[4],\"dialogTitle\":[1,\"dialog-title\"],\"eventType\":[16],\"show\":[64],\"hide\":[64]},[[0,\"nanoOpen\",\"secondaryOpen\"],[0,\"nanoClose\",\"secondaryClose\"],[0,\"nanoSelect\",\"handlePanelSelect\"]]]]],[\"nano-datalist_3\",[[1,\"nano-datalist\",{\"selected\":[1040],\"dropDownConfig\":[6160],\"options\":[16],\"input\":[1],\"type\":[1],\"activeOptions\":[2064],\"open\":[1028],\"disableFilter\":[4,\"disable-filter\"],\"disabled\":[4],\"actvOptEles\":[32],\"connectedInput\":[32],\"inputLabel\":[32],\"hasNoResult\":[32],\"shouldOpen\":[32],\"canOpen\":[32],\"optionIds\":[32]}],[1,\"nano-option\",{\"value\":[1537],\"label\":[1537],\"selected\":[516],\"disabled\":[516],\"filterMeta\":[1,\"filter-meta\"],\"hasFocus\":[32]},[[0,\"keydown\",\"handleKeyDown\"]]],[1,\"nano-menu\",{\"hasFocus\":[2052,\"has-focus\"],\"type\":[1],\"label\":[1],\"setFocus\":[64],\"removeFocus\":[64],\"showActiveElement\":[64],\"resetActiveItem\":[64]},[[17,\"mousedown\",\"handleBlur\"],[0,\"keydown\",\"handleBlur\"]]]]],[\"nano-global-nav-user-profile_3\",[[6,\"nano-select\",{\"invalid\":[2564],\"validityMessage\":[2049,\"validity-message\"],\"color\":[1],\"autofocus\":[4],\"disabled\":[516],\"validateOn\":[1025,\"validate-on\"],\"showInlineError\":[516,\"show-inline-error\"],\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"floatLabel\":[4,\"float-label\"],\"multiple\":[4],\"name\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[4],\"size\":[2],\"max\":[2],\"min\":[2],\"form\":[1],\"allowCustomValues\":[4,\"allow-custom-values\"],\"value\":[6145],\"options\":[6160],\"clearSelect\":[4,\"clear-select\"],\"mask\":[4],\"debounce\":[2],\"dropDownConfig\":[1040],\"currInsertIndex\":[32],\"showErrorMsg\":[32],\"errorMessage\":[32],\"hasFocus\":[32],\"hasLabelSlot\":[32],\"hasHelperSlot\":[32],\"hasHelperEndSlot\":[32],\"inputSearchVal\":[32],\"_invalid\":[32],\"_eOptions\":[32],\"reportValidity\":[64],\"setFocus\":[64],\"getSelectElement\":[64],\"showError\":[64]},[[16,\"reset\",\"onReset\"],[17,\"mousedown\",\"handleBlur\"],[0,\"keydown\",\"handleBlur\"]]],[0,\"nano-global-nav-user-profile\",{\"myAccountUser\":[16],\"userProfileUrl\":[1,\"user-profile-url\"]}],[1,\"nano-nav-item\",{\"href\":[1025],\"target\":[1],\"disabled\":[4],\"open\":[1540],\"selected\":[516],\"secondaryActiveWidth\":[2,\"secondary-active-width\"],\"secondaryFallback\":[16],\"closeOnBlur\":[4,\"close-on-blur\"],\"notification\":[4],\"hasAnchorEle\":[32],\"didOpen\":[32],\"isInGlobalNav\":[32],\"isInMenuDrawer\":[32],\"isInMenu\":[32],\"hasFocus\":[32],\"setFocus\":[64]},[[16,\"click\",\"handleClose\"],[16,\"keyup\",\"handleClose\"]]]]],[\"nano-resize-observe_2\",[[1,\"nano-resize-observe\",{\"notifyContentFit\":[1,\"notify-content-fit\"],\"states\":[1],\"currentWidth\":[32],\"currentHeight\":[32],\"classNames\":[32],\"contentFitX\":[32],\"contentFitY\":[32]}],[1,\"nano-skeleton\",{\"animated\":[4]}]]],[\"nano-grid_3\",[[1,\"nano-img\",{\"alt\":[1],\"src\":[1],\"srcSet\":[1,\"src-set\"],\"lazy\":[4],\"background\":[4],\"autoHeight\":[1,\"auto-height\"],\"loadSrc\":[32],\"loadError\":[32],\"hasLoaded\":[32],\"imgStates\":[32],\"_src\":[32]}],[1,\"nano-grid\",{\"sSize\":[2,\"s-size\"],\"mSize\":[2,\"m-size\"],\"lSize\":[2,\"l-size\"],\"xlSize\":[2,\"xl-size\"],\"sCols\":[2,\"s-cols\"],\"mCols\":[2,\"m-cols\"],\"lCols\":[2,\"l-cols\"],\"xlCols\":[2,\"xl-cols\"],\"xxlCols\":[2,\"xxl-cols\"],\"showHelper\":[516,\"show-helper\"],\"contentPanel\":[516,\"content-panel\"],\"fullHeight\":[516,\"full-height\"],\"ready\":[32],\"isSmall\":[32],\"isMedium\":[32],\"isLarge\":[32],\"isXL\":[32],\"isXXL\":[32]}],[1,\"nano-grid-item\",{\"gridStates\":[1,\"grid-states\"],\"changeBP\":[64]}]]],[\"nano-icon-button_2\",[[2,\"nano-icon-button\",{\"iconName\":[1,\"icon-name\"],\"iconSrc\":[1,\"icon-src\"],\"type\":[513],\"name\":[513],\"value\":[513],\"label\":[1],\"showTooltip\":[4,\"show-tooltip\"],\"disabled\":[516],\"href\":[1],\"target\":[1],\"setFocus\":[64]}],[1,\"nano-tooltip\",{\"content\":[1],\"placement\":[1],\"disabled\":[4],\"distance\":[2],\"open\":[1540],\"skidding\":[2],\"hoist\":[4],\"trigger\":[1],\"show\":[64],\"hide\":[64]}]]]]"), options);
|
45
45
|
});
|
46
46
|
|
47
47
|
//# sourceMappingURL=nano-components.js.map
|
@@ -173,7 +173,7 @@ const Dialog = class {
|
|
173
173
|
'dialog--has-header': !this.noHeader,
|
174
174
|
'dialog--nodismiss': this.noDismiss,
|
175
175
|
'dialog--with-ribbon': this.showRibbon,
|
176
|
-
}, onKeyDown: this.handleKeyDown }, h("div", { part: "overlay", class: "dialog__overlay", ref: (el) => (this.overlay = el), onClick: this.requestClose }), h("div", { ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: 0 }, h("div", { class: "dialog__body-wrap" }, !this.noHeader && (h("nano-sticker", null, h("header", { part: "header", class: "dialog__header" }, h("span", { part: "title", class: "dialog__title", id: `${this.componentId}-title` }, h("slot", { name: "label" }, this.label || String.fromCharCode(65279))), !this.noUserDismiss && (h("nano-icon-button", { exportparts: "base:close-button", class: "dialog__close-icon", label: "close dialog", onClick: this.requestClose, iconName: "light/times" }))))), h("div", { part: "body", class: "dialog__body" }, h("slot", null)), !this.noFooter && (this.hasFooter || !this.noUserDismiss) && (h("nano-sticker", { position: "bottom" }, h("footer", { part: "footer", class: "dialog__footer" }, h("slot", { name: "footer", onSlotchange: this.handleSlotChange }), !this.noUserDismiss && (h("button", { class: "dialog__close-txt", onClick: this.requestClose }, "Close"))))))))));
|
176
|
+
}, onKeyDown: this.handleKeyDown }, h("div", { part: "overlay", class: "dialog__overlay", ref: (el) => (this.overlay = el), onClick: this.requestClose }), h("div", { ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: 0 }, h("div", { class: "dialog__body-wrap" }, !this.noHeader && (h("nano-sticker", null, h("header", { part: "header", class: "dialog__header" }, h("span", { part: "title", class: "dialog__title", id: `${this.componentId}-title` }, h("slot", { name: "label" }, this.label || String.fromCharCode(65279))), !this.noUserDismiss && (h("nano-icon-button", { exportparts: "base:close-button", class: "dialog__close-icon", label: "close dialog", onClick: this.requestClose, iconName: "light/times" }))))), h("div", { part: "body", class: "dialog__body", style: { display: !this.isVisible ? 'none' : '' } }, h("slot", null)), !this.noFooter && (this.hasFooter || !this.noUserDismiss) && (h("nano-sticker", { position: "bottom" }, h("footer", { part: "footer", class: "dialog__footer" }, h("slot", { name: "footer", onSlotchange: this.handleSlotChange }), !this.noUserDismiss && (h("button", { class: "dialog__close-txt", onClick: this.requestClose }, "Close"))))))))));
|
177
177
|
}
|
178
178
|
get host() { return getElement(this); }
|
179
179
|
static get watchers() { return {
|
@@ -1 +1 @@
|
|
1
|
-
{"file":"nano-dialog.entry.js","mappings":"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","names":[],"sources":["./src/components/dialog/dialog.scss?tag=nano-dialog&encapsulation=shadow","./src/components/dialog/dialog.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n@import '../../global/style/nano-theme/form';\n\n/**\n * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n * @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --content-background: defaults to #{$layer-bg-color};\n * @prop --footer-background: defaults to #{map.get($colors, celsius)};\n * @prop --box-shadow: defaults to $layer-shadow-xlarge;\n * @prop --close-button-color: defaults to #{map.get($colors, mediumgrey)};\n * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n * @prop --tint-color: colour used to highlight items in the dialog - top ribbon, bottom close button. Default #{map.get($colors, blue)};\n * @prop --width: defaults to 31rem;\n */\n:host {\n --border-radius: #{$layer-border-radius};\n --content-background: #fafafa;\n --footer-content: #{map.get($colors, lightgrey)};\n --scrim-color: #{$layer-overlay-dark};\n --box-shadow: #{$layer-shadow-large};\n --close-button-color: #{map.get($colors, palegrey)};\n --width: 60rem;\n --tint-color: #{darken(map.get($colors, blue), 5%)};\n --body-padding-v: #{$spacing-large};\n --body-padding-h: #{$spacing-large};\n --header-padding-v: #{$spacing-medium};\n --header-padding-h: #{$spacing-large};\n --footer-padding-v: #{$spacing-medium};\n --footer-padding-h: #{$spacing-large};\n}\n\n.dialog {\n $self: &;\n\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n inset: 0;\n z-index: #{$layer-index-modal};\n\n &:not(.dialog--visible) {\n @include hidden;\n }\n\n &__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n inline-size: var(--width);\n max-inline-size: calc(100% - #{$spacing-xlarge});\n max-block-size: calc(92% - #{$spacing-xlarge});\n background-color: var(--content-background);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n opacity: 0;\n transform: scale(0.8);\n transition: #{$transition-fast} opacity, #{$transition-fast} transform;\n\n &:focus {\n outline: none;\n }\n\n .dialog--with-ribbon & {\n border-block-start: 5px solid var(--tint-color);\n }\n\n .dialog--open & {\n display: flex;\n opacity: 1;\n transform: none;\n }\n\n .dialog--nodismiss & {\n animation: cannotClose 0.25s ease-in-out 1;\n\n @keyframes cannotClose {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.08);\n }\n\n 100% {\n transform: scale(1);\n }\n }\n }\n }\n\n &__header {\n flex: 0 0 auto;\n display: flex;\n min-inline-size: var(--width);\n inline-size: 100%;\n background-color: var(--content-background);\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n transition: #{$transition-xfast} box-shadow;\n\n .dialog--visible & {\n min-inline-size: auto;\n }\n\n [stuck] & {\n box-shadow: #{$layer-shadow-medium};\n }\n }\n\n &__title {\n flex: 1 1 auto;\n font-size: #{$fontsize-large};\n line-height: 1.6;\n padding-block: var(--header-padding-v);\n padding-inline: var(--header-padding-h);\n }\n\n & &__close-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: #{$fontsize-xlarge};\n padding-block: 0;\n padding-inline: var(--header-padding-h);\n\n --color: var(--close-button-color);\n }\n\n &__body {\n padding-block: 0 var(--body-padding-v);\n padding-inline: var(--body-padding-h);\n\n .dialog:not(.dialog--has-header) & {\n padding-block-start: var(--body-padding-v);\n }\n\n & ::slotted(*) {\n max-inline-size: 100%;\n }\n\n &-wrap {\n flex: 1 1 auto;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n border-radius: var(--border-radius);\n\n .dialog:not(.dialog--has-header) & {\n border-radius: 0 0 inherit inherit;\n }\n\n .dialog:not(.dialog--has-footer) & {\n border-radius: inherit inherit 0 0;\n }\n }\n }\n\n &__footer {\n inline-size: 100%;\n padding-block: var(--footer-padding-v);\n padding-inline: var(--footer-padding-h);\n background: var(--footer-content);\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n position: relative;\n inset-block-start: 1px;\n\n .dialog--visible & {\n min-inline-size: auto;\n }\n\n ::slotted(button) {\n margin-inline-end: #{$spacing-small} !important;\n }\n\n .dialog:not(.dialog--has-footer) & {\n display: none;\n }\n }\n\n &__close-txt {\n color: var(--tint-color);\n border: none;\n text-decoration: underline;\n margin: 0;\n text-underline-offset: 4px;\n background-color: transparent;\n font: inherit;\n -webkit-box-align: center;\n cursor: pointer;\n font-size: #{$fontsize-small};\n padding: 0.5rem;\n border-radius: #{$border-radius-small};\n transition: box-shadow 100ms ease-in-out;\n\n &:focus {\n outline: none;\n box-shadow: #{$control-focus-style};\n }\n }\n\n &__overlay {\n position: fixed;\n inset: 0;\n background-color: var(--scrim-color);\n opacity: 0;\n transition: #{$transition-fast} opacity;\n backdrop-filter: blur(#{$layer-overlay-blur});\n\n .dialog--open & {\n opacity: 1;\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n ComponentInterface,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\n\nlet id = 0;\n\n/**\n * Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n *\n * @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n */\n@Component({\n tag: 'nano-dialog',\n styleUrl: 'dialog.scss',\n shadow: true,\n})\nexport class Dialog implements ComponentInterface {\n private componentId = `dialog-${++id}`;\n private modal: Modal;\n private panel: HTMLElement;\n private willShow = false;\n private willHide = false;\n private originalTrigger: HTMLElement | null;\n private overlay: HTMLElement;\n private addedTransEnd = false;\n\n @Element() host: HTMLNanoDialogElement;\n @State() isVisible = false;\n @State() noDismiss = false;\n @State() hasFooter = false;\n\n /** Show a colour ribbon at the top of the modal */\n @Prop() showRibbon = true;\n\n /** Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /** The dialog's label as displayed in the header. You should always include a relevant\n * label even when using `no-header`, as it is required for proper accessibility. */\n @Prop() label!: string;\n\n /** Set to true to disable the header. This will also remove the default close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. */\n @Prop() noHeader = false;\n\n /** Set to true to disable the footer. This will also remove the footer close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. */\n @Prop() noFooter = false;\n\n /** An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key */\n @Prop() noUserDismiss = false;\n\n /** Store search queries (against this ID) to the component store. Use in conjunction with storeMethod */\n @Prop() storeId?: string;\n\n /** The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). */\n @Prop() storeMethod: StorageMethods = 'url-hash';\n\n /** Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` */\n @Prop() hoist = false;\n\n @Watch('hoist')\n handleHoistChange() {\n if (!this.hoist || document.body.children[0] === this.host) return;\n document.body.prepend(this.host);\n }\n\n /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n @Event() nanoShow: EventEmitter;\n\n /** Emitted after the dialog opens and all transitions are complete. */\n @Event() nanoAfterShow: EventEmitter;\n\n /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n @Event() nanoHide: EventEmitter;\n\n /** Emitted after the dialog closes and all transitions are complete. */\n @Event() nanoAfterHide: EventEmitter;\n\n /** Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent\n * focus and allow you to set it on a different element in the dialog, such as an input or button. */\n @Event() nanoInitialFocus: EventEmitter;\n\n /** Emitted when the user clicks the close button, clicks the overlay, or presses the `Escape` key. Calling `event.preventDefault()` will prevent the dialog from closing. */\n @Event() nanoRequestClose: EventEmitter;\n\n /** Shows the dialog */\n @Method()\n async show() {\n if (this.willShow) {\n return;\n }\n\n const nanoShow = this.nanoShow.emit();\n if (nanoShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.originalTrigger = document.activeElement as HTMLElement;\n this.willShow = true;\n this.isVisible = true;\n this.open = true;\n this.modal.activate();\n\n lockBodyScrolling(this.host);\n\n if (this.open) {\n // Wait for the next frame before setting initial focus so the dialog is technically visible\n this.host.addEventListener(\n 'nanoAfterShow',\n () => {\n const nanoInitialFocus = this.nanoInitialFocus.emit();\n if (!nanoInitialFocus.defaultPrevented) {\n this.panel.focus({ preventScroll: true });\n }\n },\n { once: true }\n );\n }\n }\n\n /** Hides the dialog */\n @Method()\n async hide() {\n if (this.willHide) {\n return;\n }\n\n const nanoHide = this.nanoHide.emit();\n if (nanoHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n this.modal.deactivate();\n unlockBodyScrolling(this.host);\n this.stopVideos();\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (trigger && typeof trigger.focus === 'function') {\n setTimeout(() => trigger.focus());\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.requestClose();\n }\n };\n\n private requestClose = () => {\n const nanoOverlayDismiss = this.nanoRequestClose.emit();\n\n if (!nanoOverlayDismiss.defaultPrevented && !this.noUserDismiss) {\n this.hide();\n } else {\n this.noDismiss = true;\n setTimeout((_) => (this.noDismiss = false), 250);\n }\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (\n event.propertyName === 'opacity' &&\n event\n .composedPath()\n .find((node) => node === this.panel || node === this.overlay)\n ) {\n // Ensure we only emit one event when the target element is no longer visible\n this.isVisible = this.open;\n this.willShow = false;\n this.willHide = false;\n this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n }\n };\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, 'footer');\n };\n\n private stopVideos() {\n const videos: (HTMLVideoElement | HTMLIFrameElement)[] = Array.from(\n this.host.querySelectorAll('iframe,video')\n );\n videos.forEach((video) => {\n if (video.tagName.toLowerCase() === 'video')\n (video as HTMLVideoElement).pause();\n else {\n const src = video.src;\n video.src = src;\n }\n });\n }\n\n connectedCallback() {\n this.handleHoistChange();\n this.modal = new Modal(this.host);\n if (this.panel) {\n this.addedTransEnd = true;\n this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n }\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n // Show on init if open\n if (this.open) this.show();\n if (this.storeId)\n ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n }\n\n componentDidLoad() {\n if (!this.addedTransEnd) {\n this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n }\n }\n\n disconnectedCallback() {\n if (!this.panel) return;\n unlockBodyScrolling(this.host);\n this.addedTransEnd = false;\n this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n }\n\n render() {\n return (\n <Host showing={this.isVisible ? true : undefined}>\n <div\n part=\"base\"\n class={{\n dialog: true,\n 'dialog--open': this.open,\n 'dialog--visible': this.isVisible,\n 'dialog--has-footer': !this.noFooter,\n 'dialog--has-header': !this.noHeader,\n 'dialog--nodismiss': this.noDismiss,\n 'dialog--with-ribbon': this.showRibbon,\n }}\n onKeyDown={this.handleKeyDown}\n >\n <div\n part=\"overlay\"\n class=\"dialog__overlay\"\n ref={(el) => (this.overlay = el)}\n onClick={this.requestClose}\n />\n\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"dialog__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : null}\n aria-labelledby={\n !this.noHeader ? `${this.componentId}-title` : null\n }\n tabIndex={0}\n >\n <div class=\"dialog__body-wrap\">\n {!this.noHeader && (\n <nano-sticker>\n <header part=\"header\" class=\"dialog__header\">\n <span\n part=\"title\"\n class=\"dialog__title\"\n id={`${this.componentId}-title`}\n >\n <slot name=\"label\">\n {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n {this.label || String.fromCharCode(65279)}\n </slot>\n </span>\n {!this.noUserDismiss && (\n <nano-icon-button\n exportparts=\"base:close-button\"\n class=\"dialog__close-icon\"\n label=\"close dialog\"\n onClick={this.requestClose}\n iconName=\"light/times\"\n />\n )}\n </header>\n </nano-sticker>\n )}\n <div part=\"body\" class=\"dialog__body\">\n <slot />\n </div>\n {!this.noFooter && (this.hasFooter || !this.noUserDismiss) && (\n <nano-sticker position=\"bottom\">\n <footer part=\"footer\" class=\"dialog__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n {!this.noUserDismiss && (\n <button\n class=\"dialog__close-txt\"\n onClick={this.requestClose}\n >\n Close\n </button>\n )}\n </footer>\n </nano-sticker>\n )}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
1
|
+
{"file":"nano-dialog.entry.js","mappings":"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","names":[],"sources":["./src/components/dialog/dialog.scss?tag=nano-dialog&encapsulation=shadow","./src/components/dialog/dialog.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n@import '../../global/style/nano-theme/form';\n\n/**\n * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n * @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --content-background: defaults to #{$layer-bg-color};\n * @prop --footer-background: defaults to #{map.get($colors, celsius)};\n * @prop --box-shadow: defaults to $layer-shadow-xlarge;\n * @prop --close-button-color: defaults to #{map.get($colors, mediumgrey)};\n * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n * @prop --tint-color: colour used to highlight items in the dialog - top ribbon, bottom close button. Default #{map.get($colors, blue)};\n * @prop --width: defaults to 31rem;\n * @prop --nano-layer-overlay-blur: inheritable theme applied to backdrop. Default to #{$layer-overlay-blur}\n */\n:host {\n --border-radius: #{$layer-border-radius};\n --content-background: #fafafa;\n --footer-content: #{map.get($colors, lightgrey)};\n --scrim-color: #{$layer-overlay-dark};\n --box-shadow: #{$layer-shadow-large};\n --close-button-color: #{map.get($colors, palegrey)};\n --width: 60rem;\n --tint-color: #{darken(map.get($colors, blue), 5%)};\n --body-padding-v: #{$spacing-large};\n --body-padding-h: #{$spacing-large};\n --header-padding-v: #{$spacing-medium};\n --header-padding-h: #{$spacing-large};\n --footer-padding-v: #{$spacing-medium};\n --footer-padding-h: #{$spacing-large};\n}\n\n.dialog {\n $self: &;\n\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n inset: 0;\n z-index: #{$layer-index-modal};\n\n &:not(.dialog--visible) {\n @include hidden;\n }\n\n &__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n inline-size: var(--width);\n max-inline-size: calc(100% - #{$spacing-xlarge});\n max-block-size: calc(92% - #{$spacing-xlarge});\n background-color: var(--content-background);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n opacity: 0;\n transform: scale(0.8);\n transition: #{$transition-fast} opacity, #{$transition-fast} transform;\n\n &:focus {\n outline: none;\n }\n\n .dialog--with-ribbon & {\n border-block-start: 5px solid var(--tint-color);\n }\n\n .dialog--open & {\n display: flex;\n opacity: 1;\n transform: none;\n }\n\n .dialog--nodismiss & {\n animation: cannotClose 0.25s ease-in-out 1;\n\n @keyframes cannotClose {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.08);\n }\n\n 100% {\n transform: scale(1);\n }\n }\n }\n }\n\n &__header {\n flex: 0 0 auto;\n display: flex;\n min-inline-size: var(--width);\n inline-size: 100%;\n background-color: var(--content-background);\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n transition: #{$transition-xfast} box-shadow;\n\n .dialog--visible & {\n min-inline-size: auto;\n }\n\n [stuck] & {\n box-shadow: #{$layer-shadow-medium};\n }\n }\n\n &__title {\n flex: 1 1 auto;\n font-size: #{$fontsize-large};\n line-height: 1.6;\n padding-block: var(--header-padding-v);\n padding-inline: var(--header-padding-h);\n }\n\n & &__close-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: #{$fontsize-xlarge};\n padding-block: 0;\n padding-inline: var(--header-padding-h);\n\n --color: var(--close-button-color);\n }\n\n &__body {\n padding-block: 0 var(--body-padding-v);\n padding-inline: var(--body-padding-h);\n\n .dialog:not(.dialog--has-header) & {\n padding-block-start: var(--body-padding-v);\n }\n\n & ::slotted(*) {\n max-inline-size: 100%;\n }\n\n &-wrap {\n flex: 1 1 auto;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n border-radius: var(--border-radius);\n\n .dialog:not(.dialog--has-header) & {\n border-radius: 0 0 inherit inherit;\n }\n\n .dialog:not(.dialog--has-footer) & {\n border-radius: inherit inherit 0 0;\n }\n }\n }\n\n &__footer {\n inline-size: 100%;\n padding-block: var(--footer-padding-v);\n padding-inline: var(--footer-padding-h);\n background: var(--footer-content);\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n position: relative;\n inset-block-start: 1px;\n\n .dialog--visible & {\n min-inline-size: auto;\n }\n\n ::slotted(button) {\n margin-inline-end: #{$spacing-small} !important;\n }\n\n .dialog:not(.dialog--has-footer) & {\n display: none;\n }\n }\n\n &__close-txt {\n color: var(--tint-color);\n border: none;\n text-decoration: underline;\n margin: 0;\n text-underline-offset: 4px;\n background-color: transparent;\n font: inherit;\n -webkit-box-align: center;\n cursor: pointer;\n font-size: #{$fontsize-small};\n padding: 0.5rem;\n border-radius: #{$border-radius-small};\n transition: box-shadow 100ms ease-in-out;\n\n &:focus {\n outline: none;\n box-shadow: #{$control-focus-style};\n }\n }\n\n &__overlay {\n position: fixed;\n inset: 0;\n background-color: var(--scrim-color);\n opacity: 0;\n transition: #{$transition-fast} opacity;\n backdrop-filter: blur(#{$layer-overlay-blur});\n\n .dialog--open & {\n opacity: 1;\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n ComponentInterface,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\n\nlet id = 0;\n\n/**\n * Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n *\n * @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n */\n@Component({\n tag: 'nano-dialog',\n styleUrl: 'dialog.scss',\n shadow: true,\n})\nexport class Dialog implements ComponentInterface {\n private componentId = `dialog-${++id}`;\n private modal: Modal;\n private panel: HTMLElement;\n private willShow = false;\n private willHide = false;\n private originalTrigger: HTMLElement | null;\n private overlay: HTMLElement;\n private addedTransEnd = false;\n\n @Element() host: HTMLNanoDialogElement;\n @State() isVisible = false;\n @State() noDismiss = false;\n @State() hasFooter = false;\n\n /** Show a colour ribbon at the top of the modal */\n @Prop() showRibbon = true;\n\n /** Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /** The dialog's label as displayed in the header. You should always include a relevant\n * label even when using `no-header`, as it is required for proper accessibility. */\n @Prop() label!: string;\n\n /** Set to true to disable the header. This will also remove the default close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. */\n @Prop() noHeader = false;\n\n /** Set to true to disable the footer. This will also remove the footer close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. */\n @Prop() noFooter = false;\n\n /** An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key */\n @Prop() noUserDismiss = false;\n\n /** Store search queries (against this ID) to the component store. Use in conjunction with storeMethod */\n @Prop() storeId?: string;\n\n /** The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). */\n @Prop() storeMethod: StorageMethods = 'url-hash';\n\n /** Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` */\n @Prop() hoist = false;\n\n @Watch('hoist')\n handleHoistChange() {\n if (!this.hoist || document.body.children[0] === this.host) return;\n document.body.prepend(this.host);\n }\n\n /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n @Event() nanoShow: EventEmitter;\n\n /** Emitted after the dialog opens and all transitions are complete. */\n @Event() nanoAfterShow: EventEmitter;\n\n /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n @Event() nanoHide: EventEmitter;\n\n /** Emitted after the dialog closes and all transitions are complete. */\n @Event() nanoAfterHide: EventEmitter;\n\n /** Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent\n * focus and allow you to set it on a different element in the dialog, such as an input or button. */\n @Event() nanoInitialFocus: EventEmitter;\n\n /** Emitted when the user clicks the close button, clicks the overlay, or presses the `Escape` key. Calling `event.preventDefault()` will prevent the dialog from closing. */\n @Event() nanoRequestClose: EventEmitter;\n\n /** Shows the dialog */\n @Method()\n async show() {\n if (this.willShow) {\n return;\n }\n\n const nanoShow = this.nanoShow.emit();\n if (nanoShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.originalTrigger = document.activeElement as HTMLElement;\n this.willShow = true;\n this.isVisible = true;\n this.open = true;\n this.modal.activate();\n\n lockBodyScrolling(this.host);\n\n if (this.open) {\n // Wait for the next frame before setting initial focus so the dialog is technically visible\n this.host.addEventListener(\n 'nanoAfterShow',\n () => {\n const nanoInitialFocus = this.nanoInitialFocus.emit();\n if (!nanoInitialFocus.defaultPrevented) {\n this.panel.focus({ preventScroll: true });\n }\n },\n { once: true }\n );\n }\n }\n\n /** Hides the dialog */\n @Method()\n async hide() {\n if (this.willHide) {\n return;\n }\n\n const nanoHide = this.nanoHide.emit();\n if (nanoHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n this.modal.deactivate();\n unlockBodyScrolling(this.host);\n this.stopVideos();\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (trigger && typeof trigger.focus === 'function') {\n setTimeout(() => trigger.focus());\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.requestClose();\n }\n };\n\n private requestClose = () => {\n const nanoOverlayDismiss = this.nanoRequestClose.emit();\n\n if (!nanoOverlayDismiss.defaultPrevented && !this.noUserDismiss) {\n this.hide();\n } else {\n this.noDismiss = true;\n setTimeout((_) => (this.noDismiss = false), 250);\n }\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (\n event.propertyName === 'opacity' &&\n event\n .composedPath()\n .find((node) => node === this.panel || node === this.overlay)\n ) {\n // Ensure we only emit one event when the target element is no longer visible\n this.isVisible = this.open;\n this.willShow = false;\n this.willHide = false;\n this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n }\n };\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, 'footer');\n };\n\n private stopVideos() {\n const videos: (HTMLVideoElement | HTMLIFrameElement)[] = Array.from(\n this.host.querySelectorAll('iframe,video')\n );\n videos.forEach((video) => {\n if (video.tagName.toLowerCase() === 'video')\n (video as HTMLVideoElement).pause();\n else {\n const src = video.src;\n video.src = src;\n }\n });\n }\n\n connectedCallback() {\n this.handleHoistChange();\n this.modal = new Modal(this.host);\n if (this.panel) {\n this.addedTransEnd = true;\n this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n }\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n // Show on init if open\n if (this.open) this.show();\n if (this.storeId)\n ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n }\n\n componentDidLoad() {\n if (!this.addedTransEnd) {\n this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n }\n }\n\n disconnectedCallback() {\n if (!this.panel) return;\n unlockBodyScrolling(this.host);\n this.addedTransEnd = false;\n this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n }\n\n render() {\n return (\n <Host showing={this.isVisible ? true : undefined}>\n <div\n part=\"base\"\n class={{\n dialog: true,\n 'dialog--open': this.open,\n 'dialog--visible': this.isVisible,\n 'dialog--has-footer': !this.noFooter,\n 'dialog--has-header': !this.noHeader,\n 'dialog--nodismiss': this.noDismiss,\n 'dialog--with-ribbon': this.showRibbon,\n }}\n onKeyDown={this.handleKeyDown}\n >\n <div\n part=\"overlay\"\n class=\"dialog__overlay\"\n ref={(el) => (this.overlay = el)}\n onClick={this.requestClose}\n />\n\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"dialog__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : null}\n aria-labelledby={\n !this.noHeader ? `${this.componentId}-title` : null\n }\n tabIndex={0}\n >\n <div class=\"dialog__body-wrap\">\n {!this.noHeader && (\n <nano-sticker>\n <header part=\"header\" class=\"dialog__header\">\n <span\n part=\"title\"\n class=\"dialog__title\"\n id={`${this.componentId}-title`}\n >\n <slot name=\"label\">\n {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n {this.label || String.fromCharCode(65279)}\n </slot>\n </span>\n {!this.noUserDismiss && (\n <nano-icon-button\n exportparts=\"base:close-button\"\n class=\"dialog__close-icon\"\n label=\"close dialog\"\n onClick={this.requestClose}\n iconName=\"light/times\"\n />\n )}\n </header>\n </nano-sticker>\n )}\n <div\n part=\"body\"\n class=\"dialog__body\"\n style={{ display: !this.isVisible ? 'none' : '' }}\n >\n <slot />\n </div>\n {!this.noFooter && (this.hasFooter || !this.noUserDismiss) && (\n <nano-sticker position=\"bottom\">\n <footer part=\"footer\" class=\"dialog__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n {!this.noUserDismiss && (\n <button\n class=\"dialog__close-txt\"\n onClick={this.requestClose}\n >\n Close\n </button>\n )}\n </footer>\n </nano-sticker>\n )}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|