npm - @nanoporetech-digital/components - Versions diffs - 3.0.0 → 3.1.0 - Mend

@nanoporetech-digital/components 3.0.0 → 3.1.0

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

Files changed (171) hide show

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

	@@ -1 +1 @@
1	- {"file":"nav-item.js","mappings":"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","names":[],"sources":["./src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","./src/components/nav-item/nav-item.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n // These can be overwritten, but are autatically set from context components\n\n // --padding-top: inherit;\n // --padding-bottom: inherit;\n // --padding-start: inherit;\n // --padding-end: inherit;\n // --margin: inherit;\n\n // --secondary-padding-top: inherit;\n // --secondary-padding-bottom: inherit;\n // --secondary-padding-start: inherit;\n // --secondary-padding-end: inherit;\n\n // --border-bottom: inherit;\n // --icon-size: inherit;\n\n // --color: inherit;\n // --color-hover: inherit;\n // --color-focus: inherit;\n // --color-selected: inherit;\n // --color-open: inherit;\n\n // --bg-color: inherit;\n // --bg-color-hover: inherit;\n // --bg-color-selected: inherit;\n // --bg-color-open: inherit;\n // --bg-color-focus: inherit;\n\n // --secondary-bg-color: inherit;\n // --secondary-color: inherit;\n\n opacity: inherit;\n display: block;\n color: var(--color) !important;\n margin: var(--margin);\n\n ::slotted(),\n {\n box-sizing: border-box;\n }\n\n ::slotted(button),\n button {\n background: none;\n border: none;\n margin: 0;\n }\n\n ::slotted(button),\n ::slotted(a),\n ::slotted(a:visited),\n button,\n a,\n a:visited {\n @include text-inherit();\n\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: var(--padding-top) var(--padding-bottom);\n display: var(--display, block);\n white-space: nowrap;\n color: var(--color) !important;\n background-color: var(--bg-color);\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline-end: var(--padding-end);\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding-inline-start: var(--padding-start);\n }\n\n .link {\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline-start: var(--padding-start);\n padding-inline-end: 0;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding-inline-end: var(--padding-end);\n padding-inline-start: 0;\n }\n }\n\n .link,\n button,\n a {\n border-block-end: var(--border-bottom);\n display: flex;\n align-items: center;\n }\n\n .secondary-menu {\n display: none;\n }\n\n ::slotted(a:hover),\n ::slotted(button:hover),\n .link:hover,\n button:hover,\n a:hover {\n text-decoration: inherit !important;\n }\n\n button:focus,\n a:focus {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n outline: var(--focus-outline, none);\n }\n\n ::slotted(a:focus),\n ::slotted(button:focus) {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n outline: none;\n }\n}\n\n.nav-item {\n &.selected {\n .link,\n button,\n a {\n color: var(--color-selected, var(--color-open, var(--color))) !important;\n background-color:\n var(\n --bg-color-selected,\n var(--bg-color-open, var(--bg-color))\n );\n }\n }\n\n &.secondary-open {\n button,\n a {\n color: var(--color-open, var(--color-selected, var(--color))) !important;\n background-color:\n var(\n --bg-color-open,\n var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color)))\n );\n }\n }\n\n &.disabled {\n opacity: 0.6;\n\n button,\n a {\n color: var(--color-disabled, var(--color)) !important;\n }\n }\n\n &:not(.nano-menu) {\n ::slotted(a:hover),\n ::slotted(button:hover),\n .link:hover,\n button:hover,\n a:hover {\n color: var(--color-hover, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-hover,\n var(--bg-color-focus, var(--bg-color))\n );\n }\n }\n}\n\n:host(.has-focus) {\n .link {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n outline: var(--focus-outline, 5px auto -webkit-focus-ring-color);\n }\n}\n\n:host(.nano-global-nav-menu),\n:host(.nano-menu) {\n a,\n a:visited,\n button,\n .link {\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n color: 'currentColor';\n text-decoration: inherit;\n white-space: normal;\n cursor: pointer;\n line-height: 1.2;\n width: 100%;\n }\n\n .text {\n padding-inline-start: 0;\n padding-inline-end: var(--padding-end);\n flex: 1;\n }\n\n ::slotted(a),\n ::slotted(button) {\n flex: 1;\n }\n\n ::slotted(a:focus),\n ::slotted(button:focus) {\n box-shadow: none;\n }\n\n .secondary-menu {\n display: none;\n position: absolute;\n color: var(--secondary-color, 'currentColor');\n min-height: 100%;\n inset-block-start: 0;\n inset-inline-start: 0;\n width: 100%;\n z-index: 1;\n opacity: 0;\n transition: opacity 0.2s ease, transform 0.3s ease;\n background-color: var(--secondary-bg-color, white);\n transform: translateX(100%);\n\n &:focus {\n outline: none;\n }\n\n &.open {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 0.3s ease, transform 0.2s ease;\n }\n }\n}\n\n:host(.nano-global-nav-menu) {\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline: 0 var(--padding-end);\n padding-block: 0;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding-inline: 0 var(--padding-end);\n padding-block: 0;\n font-size: 10px;\n flex: 0 0 10px;\n pointer-events: none;\n }\n\n button,\n a {\n ::slotted(nano-icon[slot='icon-end']) {\n padding: 0;\n }\n }\n}\n\n:host(.nano-global-nav-menu[dir='rtl']),\n:host(.nano-menu[dir='rtl']) {\n .secondary-menu {\n transform: translateX(-100%);\n\n &.open {\n transform: translateX(0);\n }\n }\n}\n\n:host(.nano-menu) {\n .secondary-menu-content {\n padding-inline: var(--secondary-padding-start) var(--secondary-padding-end);\n padding-block: var(--secondary-padding-top) var(--secondary-padding-bottom);\n }\n}\n\n:host(.nano-global-nav-bar) {\n .link,\n a,\n button {\n display: flex;\n align-items: center;\n cursor: pointer;\n font-stretch: expanded;\n }\n\n .text {\n flex: 1 0 auto;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n margin-inline: var(--padding-end) 0;\n margin-block: 0;\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n margin-inline: 0 var(--padding-start);\n margin-block: 0;\n }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n button {\n position: relative;\n font-stretch: expanded;\n\n &::before {\n content: '';\n background: rgb(134, 190, 226);\n height: 3px;\n inset-inline: 0 5px;\n inset-block-end: -14px;\n position: absolute;\n transform: translateZ(0) scaleX(0);\n transform-origin: 0;\n transition: 0.2s ease transform;\n }\n }\n\n .selected button::before,\n .secondary-open button::before {\n transform: translateZ(0) scaleX(1);\n }\n\n .secondary-open button::before {\n opacity: 0.5;\n }\n\n .secondary-menu {\n display: none;\n transition: transform 0.3s ease;\n transform: translateY(-100%) translateZ(0);\n background-color: var(--secondary-bg-color, #196c82);\n color: var(--secondary-color);\n position: absolute;\n box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);\n inset-inline: 0;\n z-index: -2;\n outline: none;\n\n &.open {\n transform: translateY(12px) translateZ(0);\n }\n }\n}\n\n:host(.nano-menu-drawer) {\n .link,\n a,\n button {\n padding-block-start: calc(var(--padding-top) / 2);\n padding-inline-end: 0;\n padding-block-end: calc(var(--padding-bottom) / 2);\n padding-inline-start: var(--padding-start);\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n color: currentColor;\n text-decoration: inherit;\n white-space: normal;\n border: none;\n cursor: pointer;\n line-height: 1.2;\n width: 100%;\n }\n\n .text {\n padding-inline-end: var(--padding-end);\n padding-inline-start: 0;\n text-align: start;\n flex: 0 1 auto;\n min-width: 130px;\n width: 130px;\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline: 0 var(--padding-end);\n padding-block: 0;\n font-size: var(--icon-size);\n width: var(--icon-size);\n flex: 0 0 var(--icon-size);\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding: 0 var(--padding-end) 0 0;\n font-size: 10px;\n flex: 0 0 20px;\n min-width: 20px;\n }\n\n .secondary-menu {\n display: none;\n position: absolute;\n background-color: var(--secondary-bg-color);\n color: var(--secondary-color);\n height: 100vh;\n inset-inline: auto 0;\n inset-block: 0;\n transform: translateX(0);\n z-index: -1;\n transition: transform 0.3s ease, opacity 0.2s ease;\n overflow-y: auto;\n width: var(--secondary-width, 400px);\n max-width: 62vw;\n opacity: 1;\n padding-inline: var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));\n padding-block: var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom));\n\n &:focus {\n outline: none;\n }\n\n &.open {\n transform: translateX(100%);\n // opacity: 1;\n }\n }\n\n .notification {\n position: relative;\n\n &::after {\n content: '';\n display: block;\n position: absolute;\n width: 6px;\n height: 6px;\n background-color: #ef4135;\n inset-inline-start: 10px;\n inset-block-start: 7px;\n border-radius: 50%;\n\n @media (min-width: 52em) {\n width: 7px;\n height: 7px;\n inset-inline-start: 8px;\n inset-block-start: 5px;\n }\n }\n }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n .secondary-menu {\n transform: translateX(0%);\n\n &.open {\n transform: translateX(-100%);\n opacity: 1;\n }\n }\n}\n","import {\n Component,\n h,\n Host,\n Element,\n Prop,\n Watch,\n EventEmitter,\n Event,\n State,\n Method,\n ComponentInterface,\n} from '@stencil/core';\nimport { getDirectChildren, getSiblings } from '../../utils/dom';\nimport { displayTransition } from '../../utils/transitions';\nimport type { NavItemEventDetail } from '../../interface';\n\n/*\n Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n /\n@Component({\n tag: 'nano-nav-item',\n styleUrl: 'nav-item.scss',\n shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n private hasSecondarySlot: boolean = false;\n private hasAnchorEle: boolean = false;\n private secondaryDiv: HTMLDivElement;\n private btn: HTMLButtonElement \| HTMLAnchorElement;\n private didBlur: boolean = false;\n private fromHover: boolean;\n private animating: boolean = false;\n private waitHide: number;\n private waitShow: number;\n private globalNavEle?: HTMLNanoGlobalNavElement;\n\n @State() didOpen: boolean = false;\n @State() isInGlobalNav: boolean = false;\n @State() isInMenuDrawer: boolean = false;\n @State() isInMenu: boolean = false;\n @State() hasFocus: boolean = false;\n @Element() private el: HTMLNanoNavItemElement;\n\n /\n Href to link to\n /\n @Prop({ mutable: true }) href: string = null;\n\n /\n Target to use for links\n /\n @Prop() target: '_self' \| '_blank' \| '_parent' \| '_top' = '_self';\n\n /\n Disable the nav item\n /\n @Prop() disabled: boolean = false;\n\n /\n Whether a secondary menu should be or is currently open\n /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /\n Whether this menu item is currently 'selected'\n /\n @Prop({ reflect: true }) selected: boolean = false;\n\n /\n Screen pixel width to activate the secondary menu\n /\n @Prop() secondaryActiveWidth: number = 0;\n\n /\n Secondary fallback function for when the secondary menu is no longer active.\n /\n @Prop() secondaryFallback = () => {};\n\n /\n Whether secondary menus should close on blur\n /\n @Prop() closeOnBlur: boolean = true;\n\n /\n Will show an indicator badge - only when placed in a nano-menu-draw\n /\n @Prop() notification: boolean = false;\n\n /\n Emitted when the nav item closes it's secondary navigation.\n /\n @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item opens it's secondary navigation.\n /\n @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item is about to open it's secondary navigation.\n /\n @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item is about to close it's secondary navigation.\n /\n @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item loses focus.\n /\n @Event() nanoBlur!: EventEmitter<void>;\n\n /\n Emitted when the nav item has focus.\n /\n @Event() nanoFocus!: EventEmitter<void>;\n\n /\n Sets focus on the first button or anchor present. Use this method instead of the global\n * `element.focus()`.\n /\n @Method()\n async setFocus() {\n if (!this.btn) return;\n this.btn.focus();\n }\n\n /\n Public open watcher\n /\n @Watch('open')\n openChange() {\n this.open ? this.openSecondary() : this.closeSecondary();\n }\n\n /\n Internal open watcher\n /\n @Watch('didOpen')\n didOpenChange() {\n if (!this.hasSecondarySlot) return;\n\n if (!this.didOpen) {\n / the secondadry panel is not closing via hover,\n remove blur events, add focus back to originating button /\n if (!this.fromHover) {\n this.btn.removeEventListener('focusout', this.blur);\n this.secondaryDiv.removeEventListener('focusout', this.blur);\n }\n setTimeout(() => {\n if (!this.fromHover && !this.didBlur)\n this.btn.focus({ preventScroll: true });\n this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n }, 50);\n } else {\n this.didBlur = false;\n\n / the secondadry panel is not opening via hover,\n scroll content into view, focus on it and add blur events /\n if (!this.fromHover) {\n const panelio = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].boundingClientRect.top < 0) {\n this.secondaryDiv.scrollIntoView({\n behavior: 'smooth',\n });\n }\n panelio.disconnect();\n },\n { threshold: 1 }\n );\n panelio.observe(this.secondaryDiv);\n this.secondaryDiv.focus({ preventScroll: true });\n\n this.btn.addEventListener('focusout', this.blur);\n this.secondaryDiv.addEventListener('focusout', this.blur);\n window.addEventListener('blur', this.blur);\n\n this.el.tabIndex = -1;\n this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n }\n }\n }\n\n private closeSecondary = async () => {\n this.open = false;\n if (!this.hasSecondarySlot \|\| !this.didOpen) return;\n\n this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n const status = await displayTransition(this.secondaryDiv, 'open', false);\n this.didOpen = status !== 'hidden';\n };\n\n private openSecondary = async () => {\n if (window.innerWidth < this.secondaryActiveWidth) {\n this.secondaryFallback.call(this);\n return;\n }\n this.open = true;\n if (!this.hasSecondarySlot \|\| this.didOpen) return;\n\n this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n const status = await displayTransition(this.secondaryDiv, 'open', true);\n this.didOpen = status === 'shown';\n };\n\n private toggleSecondary = () => {\n if (!this.hasSecondarySlot) return;\n if (this.didOpen) this.closeSecondary();\n else this.openSecondary();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n // opens secondary panel when activated via hover\n if (this.href && !this.animating && this.hasSecondarySlot)\n this.openSecondary();\n this.nanoFocus.emit();\n };\n\n private handleHostBlur = () => {\n if (this.animating) return;\n\n // tab index is added to host when secondary panel opens\n // to return focus after secondary panel closes. Remove now if it was added\n this.el.removeAttribute('tabindex');\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n // direct host clicks to internal button\n private handleHostClick = (ev: MouseEvent) => {\n if (!this.hasAnchorEle) return;\n const foundlink = (ev.target as HTMLElement).closest('a, button');\n if (!foundlink) this.btn.click();\n };\n\n // handles secondary menu hover behaviour.\n private handleMouseEnter = async () => {\n if (\n !this.href \|\|\n this.animating \|\|\n !this.hasSecondarySlot \|\|\n (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n )\n return;\n\n // if there are sibling secondary panels currently open,\n // we need to wait before opening otherwise we get unwanted overlapping\n let timeToWait = 0;\n if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n timeToWait = 300;\n\n clearTimeout(this.waitHide);\n this.fromHover = true;\n this.animating = true;\n this.waitShow = window.setTimeout(\n async () => await this.openSecondary(),\n timeToWait\n );\n this.animating = false;\n };\n\n // handles secondary menu hover-out behaviour.\n private handleMouseLeave = () => {\n if (!this.href) return;\n clearTimeout(this.waitShow);\n this.fromHover = true;\n this.animating = true;\n\n // prevent closing immediately - makes navigating to items within more forgiving\n this.waitHide = window.setTimeout(\n async () => await this.closeSecondary(),\n 300\n );\n this.animating = false;\n };\n\n private handleClick = () => {\n this.fromHover = false;\n if (this.hasSecondarySlot) this.toggleSecondary();\n else this.el.querySelector<HTMLElement>('')?.click();\n };\n\n // utility to traverse up, to see if element is nested within current nav-item\n private foundThisNavEle(el: HTMLElement): boolean {\n let found = el.closest('nano-nav-item');\n found = found === el ? el.parentElement.closest('nano-nav-item') : found;\n\n if (!found) return false;\n if (found === this.el) return true;\n return this.foundThisNavEle(found);\n }\n\n private blur = (ev: FocusEvent) => {\n if (!this.didOpen \|\| this.animating) return;\n if (!this.closeOnBlur) return;\n\n // if event is associated with this element don't close\n if (ev && ev.relatedTarget) {\n if (\n ev.relatedTarget === this.el \|\|\n ev.relatedTarget === this.btn \|\|\n this.foundThisNavEle(ev.relatedTarget as HTMLElement)\n ) {\n this.secondaryDiv.focus({ preventScroll: true });\n return;\n }\n }\n\n this.btn.removeEventListener('focusout', this.blur);\n this.secondaryDiv.removeEventListener('focusout', this.blur);\n window.removeEventListener('blur', this.blur);\n\n this.didBlur = true;\n\n this.open = false;\n if (!ev.relatedTarget)\n setTimeout(() => {\n this.el.focus({ preventScroll: true });\n }, 50);\n };\n\n componentWillLoad() {\n const secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n this.hasSecondarySlot = !!secondaryEle;\n\n const link = getDirectChildren(this.el, 'a, button')[0] as\n \| HTMLAnchorElement\n \| HTMLButtonElement;\n this.hasAnchorEle = !!link;\n\n if (link) {\n this.href = (link as HTMLAnchorElement).href\n ? (link as HTMLAnchorElement).href\n : null;\n this.btn = link;\n if (this.hasSecondarySlot)\n this.btn.addEventListener('click', this.toggleSecondary);\n\n this.btn.addEventListener('focus', this.handleFocus);\n this.btn.addEventListener('blur', this.handleHostBlur);\n }\n }\n\n connectedCallback() {\n this.isInGlobalNav = false;\n this.isInMenuDrawer = false;\n this.globalNavEle = this.el.closest('nano-global-nav');\n\n this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');\n this.isInMenu = !!this.el.closest('nano-menu');\n this.isInGlobalNav =\n this.el.parentElement === this.globalNavEle \|\|\n !!this.el.closest('.global-nav');\n }\n\n render() {\n return (\n <Host\n class={{\n 'has-secondary': this.hasSecondarySlot,\n 'secondary-open': this.open,\n selected: this.selected,\n 'has-focus': this.hasFocus,\n disabled: this.disabled,\n 'nano-global-nav': this.isInGlobalNav,\n 'nano-menu-drawer': this.isInMenuDrawer,\n 'nano-menu': this.isInMenu,\n }}\n onBlur={this.handleHostBlur}\n dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onClick={this.handleHostClick}\n role=\"menuitem\"\n >\n <div\n class={{\n 'nav-item': true,\n 'secondary-open': this.open,\n selected: this.selected,\n }}\n >\n {this.href && !this.hasAnchorEle && !this.disabled && (\n <a\n target={this.target}\n ref={(a) => (this.btn = a)}\n href={this.href}\n onFocus={this.handleFocus}\n class={{\n notification: this.notification,\n }}\n >\n <slot name=\"icon-start\" />\n <span class=\"text\">\n <slot />\n </span>\n <slot name=\"icon-end\" />\n </a>\n )}\n {((!this.hasAnchorEle && !this.href) \|\| this.disabled) && (\n <button\n ref={(btn) => (this.btn = btn)}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n disabled={this.disabled}\n class={{\n notification: this.notification,\n }}\n >\n <slot name=\"icon-start\" />\n <span class=\"text\">\n <slot />\n </span>\n <slot name=\"icon-end\" />\n </button>\n )}\n {this.hasAnchorEle && !this.disabled && (\n <div class=\"link\">\n <slot name=\"icon-start\" />\n <slot />\n <slot name=\"icon-end\" />\n </div>\n )}\n {this.hasSecondarySlot && !this.disabled && (\n <div\n class=\"secondary-menu\"\n ref={(div) => (this.secondaryDiv = div)}\n tabindex=\"-1\"\n >\n <div class=\"secondary-menu-content\">\n <slot name=\"secondary\" />\n </div>\n <div\n class=\"secondary-menu-mask\"\n onClick={this.closeSecondary}\n ></div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nav-item.js","mappings":"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","names":[],"sources":["./src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","./src/components/nav-item/nav-item.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n // These can be overwritten, but are automatically set from context components\n\n // --padding-top: inherit;\n // --padding-bottom: inherit;\n // --padding-start: inherit;\n // --padding-end: inherit;\n // --margin: inherit;\n\n // --secondary-padding-top: inherit;\n // --secondary-padding-bottom: inherit;\n // --secondary-padding-start: inherit;\n // --secondary-padding-end: inherit;\n\n // --border-bottom: inherit;\n // --icon-size: inherit;\n\n // --color: inherit;\n // --color-hover: inherit;\n // --color-focus: inherit;\n // --color-selected: inherit;\n // --color-open: inherit;\n\n // --bg-color: inherit;\n // --bg-color-hover: inherit;\n // --bg-color-selected: inherit;\n // --bg-color-open: inherit;\n // --bg-color-focus: inherit;\n\n // --secondary-bg-color: inherit;\n // --secondary-color: inherit;\n\n opacity: inherit;\n display: block;\n color: var(--color) !important;\n margin: var(--margin);\n\n ::slotted(),\n {\n box-sizing: border-box;\n }\n\n ::slotted(button),\n button {\n background: none;\n border: none;\n margin: 0;\n }\n\n ::slotted(button),\n ::slotted(a),\n ::slotted(a:visited),\n button,\n a,\n a:visited {\n @include text-inherit();\n\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: var(--padding-top) var(--padding-bottom);\n display: var(--display, block);\n white-space: nowrap;\n color: var(--color) !important;\n background-color: var(--bg-color);\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline-end: var(--padding-end);\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding-inline-start: var(--padding-start);\n }\n\n .link {\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline-start: var(--padding-start);\n padding-inline-end: 0;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding-inline-end: var(--padding-end);\n padding-inline-start: 0;\n }\n }\n\n .link,\n button,\n a {\n border-block-end: var(--border-bottom);\n display: flex;\n align-items: center;\n }\n\n .secondary-menu {\n display: none;\n }\n\n ::slotted(a:hover),\n ::slotted(button:hover),\n .link:hover,\n button:hover,\n a:hover {\n text-decoration: inherit !important;\n }\n\n button:focus,\n a:focus {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n outline: var(--focus-outline, none);\n }\n\n ::slotted(a:focus),\n ::slotted(button:focus) {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n outline: none;\n }\n}\n\n.nav-item {\n &.selected {\n .link,\n button,\n a {\n color: var(--color-selected, var(--color-open, var(--color))) !important;\n background-color:\n var(\n --bg-color-selected,\n var(--bg-color-open, var(--bg-color))\n );\n }\n }\n\n &.secondary-open {\n button,\n a {\n color: var(--color-open, var(--color-selected, var(--color))) !important;\n background-color:\n var(\n --bg-color-open,\n var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color)))\n );\n }\n }\n\n &.disabled {\n opacity: 0.6;\n\n button,\n a {\n color: var(--color-disabled, var(--color)) !important;\n }\n }\n\n &:not(.nano-menu) {\n ::slotted(a:hover),\n ::slotted(button:hover),\n .link:hover,\n button:hover,\n a:hover {\n color: var(--color-hover, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-hover,\n var(--bg-color-focus, var(--bg-color))\n );\n }\n }\n}\n\n:host(.has-focus) {\n .link {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n outline: var(--focus-outline, 5px auto -webkit-focus-ring-color);\n }\n}\n\n:host(.nano-global-nav-menu),\n:host(.nano-menu) {\n a,\n a:visited,\n button,\n .link {\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n color: 'currentColor';\n text-decoration: inherit;\n white-space: normal;\n cursor: pointer;\n line-height: 1.2;\n width: 100%;\n }\n\n .text {\n padding-inline-start: 0;\n padding-inline-end: var(--padding-end);\n flex: 1;\n }\n\n ::slotted(a),\n ::slotted(button) {\n flex: 1;\n }\n\n ::slotted(a:focus),\n ::slotted(button:focus) {\n box-shadow: none;\n }\n\n .secondary-menu {\n display: none;\n position: absolute;\n color: var(--secondary-color, 'currentColor');\n min-height: 100%;\n inset-block-start: 0;\n inset-inline-start: 0;\n width: 100%;\n z-index: 1;\n opacity: 0;\n transition: opacity 0.2s ease, transform 0.3s ease;\n background-color: var(--secondary-bg-color, white);\n transform: translateX(100%);\n\n &:focus {\n outline: none;\n }\n\n &.open {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 0.3s ease, transform 0.2s ease;\n }\n }\n}\n\n:host(.nano-global-nav-menu) {\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline: 0 var(--padding-end);\n padding-block: 0;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding-inline: 0 var(--padding-end);\n padding-block: 0;\n font-size: 10px;\n flex: 0 0 10px;\n pointer-events: none;\n }\n\n button,\n a {\n ::slotted(nano-icon[slot='icon-end']) {\n padding: 0;\n }\n }\n}\n\n:host(.nano-global-nav-menu[dir='rtl']),\n:host(.nano-menu[dir='rtl']) {\n .secondary-menu {\n transform: translateX(-100%);\n\n &.open {\n transform: translateX(0);\n }\n }\n}\n\n:host(.nano-menu) {\n .secondary-menu-content {\n padding-inline: var(--secondary-padding-start) var(--secondary-padding-end);\n padding-block: var(--secondary-padding-top) var(--secondary-padding-bottom);\n }\n}\n\n:host(.nano-global-nav-bar) {\n .link,\n a,\n button {\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n\n .text {\n flex: 1 0 auto;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n margin-inline: var(--padding-end) 0;\n margin-block: 0;\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n margin-inline: 0 var(--padding-start);\n margin-block: 0;\n }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n button {\n position: relative;\n\n &::before {\n content: '';\n background-color: rgb(12, 90, 113);\n height: 9px;\n inset-inline: 0 5px;\n inset-block-end: -24px;\n position: absolute;\n transform: translateZ(0) scaleX(0);\n transform-origin: 0;\n transition: 0.2s ease transform;\n }\n }\n\n .selected button::before,\n .secondary-open button::before {\n transform: translateZ(0) scaleX(1);\n }\n\n .secondary-open button::before {\n opacity: 0.7;\n }\n\n .secondary-menu {\n display: none;\n transition: transform 0.3s ease;\n transform: translateY(-100%) translateZ(0);\n background-color: var(--secondary-bg-color, #196c82);\n color: var(--secondary-color);\n position: absolute;\n box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);\n inset-inline: 0;\n z-index: -2;\n outline: none;\n\n &.open {\n transform: translateY(12px) translateZ(0);\n }\n }\n}\n\n:host(.nano-menu-drawer) {\n .link,\n a,\n button {\n padding-block-start: calc(var(--padding-top) / 2);\n padding-inline-end: 0;\n padding-block-end: calc(var(--padding-bottom) / 2);\n padding-inline-start: var(--padding-start);\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n color: currentColor;\n text-decoration: inherit;\n white-space: normal;\n border: none;\n cursor: pointer;\n line-height: 1.2;\n width: 100%;\n }\n\n .text {\n padding-inline-end: var(--padding-end);\n padding-inline-start: 0;\n text-align: start;\n flex: 0 1 auto;\n min-width: 130px;\n width: 130px;\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline: 0 var(--padding-end);\n padding-block: 0;\n font-size: var(--icon-size);\n width: var(--icon-size);\n flex: 0 0 var(--icon-size);\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding: 0 var(--padding-end) 0 0;\n font-size: 10px;\n flex: 0 0 20px;\n min-width: 20px;\n }\n\n .secondary-menu {\n display: none;\n position: absolute;\n background-color: var(--secondary-bg-color);\n color: var(--secondary-color);\n height: 100vh;\n inset-inline: auto 0;\n inset-block: 0;\n transform: translateX(0);\n z-index: -1;\n transition: transform 0.3s ease, opacity 0.2s ease;\n overflow-y: auto;\n width: var(--secondary-width, 400px);\n max-width: 62vw;\n opacity: 1;\n padding-inline: var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));\n padding-block: var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom));\n\n &:focus {\n outline: none;\n }\n\n &.open {\n transform: translateX(100%);\n // opacity: 1;\n }\n }\n\n .notification {\n position: relative;\n\n &::after {\n content: '';\n display: block;\n position: absolute;\n width: 6px;\n height: 6px;\n background-color: #ef4135;\n inset-inline-start: 10px;\n inset-block-start: 7px;\n border-radius: 50%;\n\n @media (min-width: 52em) {\n width: 7px;\n height: 7px;\n inset-inline-start: 8px;\n inset-block-start: 5px;\n }\n }\n }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n .secondary-menu {\n transform: translateX(0%);\n\n &.open {\n transform: translateX(-100%);\n opacity: 1;\n }\n }\n}\n","import {\n Component,\n h,\n Host,\n Element,\n Prop,\n Watch,\n EventEmitter,\n Event,\n State,\n Method,\n ComponentInterface,\n} from '@stencil/core';\nimport { getDirectChildren, getSiblings } from '../../utils/dom';\nimport { displayTransition } from '../../utils/transitions';\nimport type { NavItemEventDetail } from '../../interface';\n\n/*\n Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n /\n@Component({\n tag: 'nano-nav-item',\n styleUrl: 'nav-item.scss',\n shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n private hasSecondarySlot: boolean = false;\n private hasAnchorEle: boolean = false;\n private secondaryDiv: HTMLDivElement;\n private btn: HTMLButtonElement \| HTMLAnchorElement;\n private didBlur: boolean = false;\n private fromHover: boolean;\n private animating: boolean = false;\n private waitHide: number;\n private waitShow: number;\n private globalNavEle?: HTMLNanoGlobalNavElement;\n\n @State() didOpen: boolean = false;\n @State() isInGlobalNav: boolean = false;\n @State() isInMenuDrawer: boolean = false;\n @State() isInMenu: boolean = false;\n @State() hasFocus: boolean = false;\n @Element() private el: HTMLNanoNavItemElement;\n\n /\n Href to link to\n /\n @Prop({ mutable: true }) href: string = null;\n\n /\n Target to use for links\n /\n @Prop() target: '_self' \| '_blank' \| '_parent' \| '_top' = '_self';\n\n /\n Disable the nav item\n /\n @Prop() disabled: boolean = false;\n\n /\n Whether a secondary menu should be or is currently open\n /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /\n Whether this menu item is currently 'selected'\n /\n @Prop({ reflect: true }) selected: boolean = false;\n\n /\n Screen pixel width to activate the secondary menu\n /\n @Prop() secondaryActiveWidth: number = 0;\n\n /\n Secondary fallback function for when the secondary menu is no longer active.\n /\n @Prop() secondaryFallback = () => {};\n\n /\n Whether secondary menus should close on blur\n /\n @Prop() closeOnBlur: boolean = true;\n\n /\n Will show an indicator badge - only when placed in a nano-menu-draw\n /\n @Prop() notification: boolean = false;\n\n /\n Emitted when the nav item closes it's secondary navigation.\n /\n @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item opens it's secondary navigation.\n /\n @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item is about to open it's secondary navigation.\n /\n @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item is about to close it's secondary navigation.\n /\n @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n /\n Emitted when the nav item loses focus.\n /\n @Event() nanoBlur!: EventEmitter<void>;\n\n /\n Emitted when the nav item has focus.\n /\n @Event() nanoFocus!: EventEmitter<void>;\n\n /\n Sets focus on the first button or anchor present. Use this method instead of the global\n * `element.focus()`.\n /\n @Method()\n async setFocus() {\n if (!this.btn) return;\n this.btn.focus();\n }\n\n /\n Public open watcher\n /\n @Watch('open')\n openChange() {\n this.open ? this.openSecondary() : this.closeSecondary();\n }\n\n /\n Internal open watcher\n /\n @Watch('didOpen')\n didOpenChange() {\n if (!this.hasSecondarySlot) return;\n\n if (!this.didOpen) {\n / the secondadry panel is not closing via hover,\n remove blur events, add focus back to originating button /\n if (!this.fromHover) {\n this.btn.removeEventListener('focusout', this.blur);\n this.secondaryDiv.removeEventListener('focusout', this.blur);\n }\n setTimeout(() => {\n if (!this.fromHover && !this.didBlur)\n this.btn.focus({ preventScroll: true });\n this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n }, 50);\n } else {\n this.didBlur = false;\n\n / the secondadry panel is not opening via hover,\n scroll content into view, focus on it and add blur events /\n if (!this.fromHover) {\n const panelio = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].boundingClientRect.top < 0) {\n this.secondaryDiv.scrollIntoView({\n behavior: 'smooth',\n });\n }\n panelio.disconnect();\n },\n { threshold: 1 }\n );\n panelio.observe(this.secondaryDiv);\n this.secondaryDiv.focus({ preventScroll: true });\n\n this.btn.addEventListener('focusout', this.blur);\n this.secondaryDiv.addEventListener('focusout', this.blur);\n window.addEventListener('blur', this.blur);\n\n this.el.tabIndex = -1;\n this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n }\n }\n }\n\n private closeSecondary = async () => {\n this.open = false;\n if (!this.hasSecondarySlot \|\| !this.didOpen) return;\n\n this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n const status = await displayTransition(this.secondaryDiv, 'open', false);\n this.didOpen = status !== 'hidden';\n };\n\n private openSecondary = async () => {\n if (window.innerWidth < this.secondaryActiveWidth) {\n this.secondaryFallback.call(this);\n return;\n }\n this.open = true;\n if (!this.hasSecondarySlot \|\| this.didOpen) return;\n\n this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n const status = await displayTransition(this.secondaryDiv, 'open', true);\n this.didOpen = status === 'shown';\n };\n\n private toggleSecondary = () => {\n if (!this.hasSecondarySlot) return;\n if (this.didOpen) this.closeSecondary();\n else this.openSecondary();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n // opens secondary panel when activated via hover\n if (this.href && !this.animating && this.hasSecondarySlot)\n this.openSecondary();\n this.nanoFocus.emit();\n };\n\n private handleHostBlur = () => {\n if (this.animating) return;\n\n // tab index is added to host when secondary panel opens\n // to return focus after secondary panel closes. Remove now if it was added\n this.el.removeAttribute('tabindex');\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n // direct host clicks to internal button\n private handleHostClick = (ev: MouseEvent) => {\n if (!this.hasAnchorEle) return;\n const foundlink = (ev.target as HTMLElement).closest('a, button');\n if (!foundlink) this.btn.click();\n };\n\n // handles secondary menu hover behaviour.\n private handleMouseEnter = async () => {\n if (\n !this.href \|\|\n this.animating \|\|\n !this.hasSecondarySlot \|\|\n (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n )\n return;\n\n // if there are sibling secondary panels currently open,\n // we need to wait before opening otherwise we get unwanted overlapping\n let timeToWait = 0;\n if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n timeToWait = 300;\n\n clearTimeout(this.waitHide);\n this.fromHover = true;\n this.animating = true;\n this.waitShow = window.setTimeout(\n async () => await this.openSecondary(),\n timeToWait\n );\n this.animating = false;\n };\n\n // handles secondary menu hover-out behaviour.\n private handleMouseLeave = () => {\n if (!this.href) return;\n clearTimeout(this.waitShow);\n this.fromHover = true;\n this.animating = true;\n\n // prevent closing immediately - makes navigating to items within more forgiving\n this.waitHide = window.setTimeout(\n async () => await this.closeSecondary(),\n 300\n );\n this.animating = false;\n };\n\n private handleClick = () => {\n this.fromHover = false;\n if (this.hasSecondarySlot) this.toggleSecondary();\n else this.el.querySelector<HTMLElement>('')?.click();\n };\n\n // utility to traverse up, to see if element is nested within current nav-item\n private foundThisNavEle(el: HTMLElement): boolean {\n let found = el.closest('nano-nav-item');\n found = found === el ? el.parentElement.closest('nano-nav-item') : found;\n\n if (!found) return false;\n if (found === this.el) return true;\n return this.foundThisNavEle(found);\n }\n\n private blur = (ev: FocusEvent) => {\n if (!this.didOpen \|\| this.animating) return;\n if (!this.closeOnBlur) return;\n\n // if event is associated with this element don't close\n if (ev && ev.relatedTarget) {\n if (\n ev.relatedTarget === this.el \|\|\n ev.relatedTarget === this.btn \|\|\n this.foundThisNavEle(ev.relatedTarget as HTMLElement)\n ) {\n this.secondaryDiv.focus({ preventScroll: true });\n return;\n }\n }\n\n this.btn.removeEventListener('focusout', this.blur);\n this.secondaryDiv.removeEventListener('focusout', this.blur);\n window.removeEventListener('blur', this.blur);\n\n this.didBlur = true;\n\n this.open = false;\n if (!ev.relatedTarget)\n setTimeout(() => {\n this.el.focus({ preventScroll: true });\n }, 50);\n };\n\n componentWillLoad() {\n const secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n this.hasSecondarySlot = !!secondaryEle;\n\n const link = getDirectChildren(this.el, 'a, button')[0] as\n \| HTMLAnchorElement\n \| HTMLButtonElement;\n this.hasAnchorEle = !!link;\n\n if (link) {\n this.href = (link as HTMLAnchorElement).href\n ? (link as HTMLAnchorElement).href\n : null;\n this.btn = link;\n if (this.hasSecondarySlot)\n this.btn.addEventListener('click', this.toggleSecondary);\n\n this.btn.addEventListener('focus', this.handleFocus);\n this.btn.addEventListener('blur', this.handleHostBlur);\n }\n }\n\n connectedCallback() {\n this.isInGlobalNav = false;\n this.isInMenuDrawer = false;\n this.globalNavEle = this.el.closest('nano-global-nav');\n\n this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');\n this.isInMenu = !!this.el.closest('nano-menu');\n this.isInGlobalNav =\n this.el.parentElement === this.globalNavEle \|\|\n !!this.el.closest('.global-nav');\n }\n\n render() {\n return (\n <Host\n class={{\n 'has-secondary': this.hasSecondarySlot,\n 'secondary-open': this.open,\n selected: this.selected,\n 'has-focus': this.hasFocus,\n disabled: this.disabled,\n 'nano-global-nav': this.isInGlobalNav,\n 'nano-menu-drawer': this.isInMenuDrawer,\n 'nano-menu': this.isInMenu,\n }}\n onBlur={this.handleHostBlur}\n dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onClick={this.handleHostClick}\n role=\"menuitem\"\n >\n <div\n class={{\n 'nav-item': true,\n 'secondary-open': this.open,\n selected: this.selected,\n }}\n >\n {this.href && !this.hasAnchorEle && !this.disabled && (\n <a\n target={this.target}\n ref={(a) => (this.btn = a)}\n href={this.href}\n onFocus={this.handleFocus}\n class={{\n notification: this.notification,\n }}\n >\n <slot name=\"icon-start\" />\n <span class=\"text\">\n <slot />\n </span>\n <slot name=\"icon-end\" />\n </a>\n )}\n {((!this.hasAnchorEle && !this.href) \|\| this.disabled) && (\n <button\n ref={(btn) => (this.btn = btn)}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n disabled={this.disabled}\n class={{\n notification: this.notification,\n }}\n >\n <slot name=\"icon-start\" />\n <span class=\"text\">\n <slot />\n </span>\n <slot name=\"icon-end\" />\n </button>\n )}\n {this.hasAnchorEle && !this.disabled && (\n <div class=\"link\">\n <slot name=\"icon-start\" />\n <slot />\n <slot name=\"icon-end\" />\n </div>\n )}\n {this.hasSecondarySlot && !this.disabled && (\n <div\n class=\"secondary-menu\"\n ref={(div) => (this.secondaryDiv = div)}\n tabindex=\"-1\"\n >\n <div class=\"secondary-menu-content\">\n <slot name=\"secondary\" />\n </div>\n <div\n class=\"secondary-menu-mask\"\n onClick={this.closeSecondary}\n ></div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/progress-bar.js ADDED Viewed

@@ -0,0 +1,48 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+const progressBarCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--height:1em;--track-color:rgba(var(--nano-track-rgb, 228, 230, 232), 1);--indicator-color:rgba(var(--nano-indicator-rgb, 84, 140, 175), 1);--label-color:var(--nano-color-white, white);display:block}.progress-bar{position:relative;background-color:var(--track-color);height:var(--height);border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));overflow:hidden}.progress-bar__indicator{height:100%;font-size:0.75em;background-color:var(--indicator-color);color:var(--label-color);text-align:center;white-space:nowrap;overflow:hidden;-webkit-transition:0.4s width, 0.4s background-color;transition:0.4s width, 0.4s background-color;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transform-origin:left;transform-origin:left}.progress-bar--indeterminate .progress-bar__indicator{-webkit-animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1)}@-webkit-keyframes indeterminate{0%{scale:1 1;-webkit-transform:translateX(-100%) translateZ(0);transform:translateX(-100%) translateZ(0)}75%,100%{scale:1 1;-webkit-transform:translateX(100%) translateZ(0);transform:translateX(100%) translateZ(0)}}@keyframes indeterminate{0%{scale:1 1;-webkit-transform:translateX(-100%) translateZ(0);transform:translateX(-100%) translateZ(0)}75%,100%{scale:1 1;-webkit-transform:translateX(100%) translateZ(0);transform:translateX(100%) translateZ(0)}}";
+const ProgressBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.value = 0;
+    this.indeterminate = false;
+    this.showPercent = false;
+  }
+  render() {
+    return (h("div", { part: "base", class: {
+        'progress-bar': true,
+        'progress-bar--indeterminate': this.indeterminate,
+      }, role: "progressbar", title: this.host.title || undefined, "aria-label": "Progress", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.value }, h("div", { part: "indicator", class: "progress-bar__indicator", style: {
+        width: `${this.value}%`,
+      } }, h("span", { part: "label", class: "progress-bar__label" }, h("slot", null, !this.indeterminate && this.showPercent ? `${this.value}%` : '')))));
+  }
+  get host() { return this; }
+  static get style() { return progressBarCss; }
+}, [1, "nano-progress-bar", {
+    "value": [2],
+    "indeterminate": [4],
+    "showPercent": [4, "show-percent"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["nano-progress-bar"];
+  components.forEach(tagName => { switch (tagName) {
+    case "nano-progress-bar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ProgressBar);
+      }
+      break;
+  } });
+}
+export { ProgressBar as P, defineCustomElement as d };
+//# sourceMappingURL=progress-bar.js.map

package/dist/components/progress-bar.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"progress-bar.js","mappings":";;;;;AAAA,MAAM,cAAc,GAAG,onDAAonD;;MCiB9nD,WAAW;;;;;iBAIN,CAAC;yBAGO,KAAK;uBAGP,KAAK;;EAE3B,MAAM;IACJ,QACE,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,6BAA6B,EAAE,IAAI,CAAC,aAAa;OAClD,EACD,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,gBACxB,UAAU,mBACP,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,IAErD,WACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;QACL,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG;OACxB,IAED,YAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB,IAC5C,gBACG,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,WAAW,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,EAAE,CAC3D,CACF,CACH,CACF,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/progress-bar/progress-bar.scss?tag=nano-progress-bar&encapsulation=shadow","./src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --height: The progress bar's height. Default 1em\n * @prop --track-color: The track color. Default rgba(#{$progress-track-color-rgb}, 1);\n * @prop --indicator-color: The indicator color. Default rgba(#{$progress-indicator-color-rgb}, 1);\n * @prop --label-color: The label color. Default var(--nano-color-white, white);\n */\n:host {\n --height: 1em;\n --track-color: rgba(#{$progress-track-color-rgb}, 1);\n --indicator-color: rgba(#{$progress-indicator-color-rgb}, 1);\n --label-color: var(--nano-color-white, white);\n\n display: block;\n}\n\n.progress-bar {\n position: relative;\n background-color: var(--track-color);\n height: var(--height);\n border-radius: $layer-border-radius;\n overflow: hidden;\n}\n\n.progress-bar__indicator {\n height: 100%;\n font-size: 0.75em;\n background-color: var(--indicator-color);\n color: var(--label-color);\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n transition: 0.4s width, 0.4s background-color;\n transform: translateZ(0);\n user-select: none;\n transform-origin: left;\n}\n\n// Indeterminate\n.progress-bar--indeterminate .progress-bar__indicator {\n animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);\n}\n\n@keyframes indeterminate {\n 0% {\n scale: 1 1;\n transform: translateX(-100%) translateZ(0);\n }\n\n 75%,\n 100% {\n scale: 1 1;\n transform: translateX(100%) translateZ(0);\n }\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n/**\n * Used to show the status of an ongoing operation.\n *\n * @slot - A label to show inside the indicator.\n *\n * @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n */\n\n@Component({\n tag: 'nano-progress-bar',\n styleUrl: 'progress-bar.scss',\n shadow: true,\n})\nexport class ProgressBar {\n @Element() host: HTMLNanoProgressBarElement;\n\n /** The progress bar's percentage, 0 to 100. */\n @Prop() value = 0;\n\n /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n @Prop() indeterminate = false;\n\n /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot. */\n @Prop() showPercent = false;\n\n render() {\n return (\n <div\n part=\"base\"\n class={{\n 'progress-bar': true,\n 'progress-bar--indeterminate': this.indeterminate,\n }}\n role=\"progressbar\"\n title={this.host.title || undefined}\n aria-label=\"Progress\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-valuenow={this.indeterminate ? null : this.value}\n >\n <div\n part=\"indicator\"\n class=\"progress-bar__indicator\"\n style={{\n width: `${this.value}%`,\n }}\n >\n <span part=\"label\" class=\"progress-bar__label\">\n <slot>\n {!this.indeterminate && this.showPercent ? `${this.value}%` : ''}\n </slot>\n </span>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/skeleton.js CHANGED Viewed

@@ -3,7 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-const skeletonCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--base-color-rgb:var(--nano-skeleton-base-rgb, 228, 230, 232);--color:var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));--tint:var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));display:block;position:relative;border-radius:0.25rem;block-size:1em}.skeleton{display:-webkit-box;display:-ms-flexbox;display:flex;inline-size:100%;block-size:100%;border-radius:inherit}.skeleton__indicator{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;background:var(--color);border-radius:inherit}.skeleton.animate .skeleton__indicator{background:-webkit-gradient(linear, right top, left top, from(var(--tint)), color-stop(var(--color)), color-stop(var(--color)), to(var(--tint)));background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;-webkit-animation:loader 6s ease-in-out infinite;animation:loader 6s ease-in-out infinite}@-webkit-keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}";
+const skeletonCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--base-color-rgb:var(--nano-skeleton-rgb, 228, 230, 232);--color:var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));--tint:var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));display:block;position:relative;border-radius:0.25rem;min-block-size:1em;line-height:inherit}.skeleton{display:-webkit-box;display:-ms-flexbox;display:flex;min-inline-size:100%;min-block-size:100%;border-radius:inherit;line-height:inherit}.skeleton__indicator{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;background:var(--color);border-radius:inherit;line-height:inherit}.skeleton.animate .skeleton__indicator{background:-webkit-gradient(linear, right top, left top, from(var(--tint)), color-stop(var(--color)), color-stop(var(--color)), to(var(--tint)));background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;-webkit-animation:loader 6s ease-in-out infinite;animation:loader 6s ease-in-out infinite}@-webkit-keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}";
 const Skeleton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -16,7 +16,7 @@ const Skeleton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return (h("div", { class: {
         skeleton: true,
         animate: this.animated,
-      } }, h("div", { class: "skeleton__indicator" })));
+      } }, h("div", { class: "skeleton__indicator" }, "\u00A0")));
   }
   static get style() { return skeletonCss; }
 }, [1, "nano-skeleton", {

package/dist/components/skeleton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"skeleton.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,~~kpCAAkpC~~;;~~MCYzpC~~,QAAQ;;;;;oBAEA,IAAI;;EAEvB,MAAM;IACJ,QACE,WACE,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE,IAAI,CAAC,QAAQ;OACvB,IAED,WAAK,KAAK,EAAC,qBAAqB,~~GAAG~~,~~CAC/B~~,EACN;GACH;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/skeleton/skeleton.scss?tag=nano-skeleton&encapsulation=shadow","./src/components/skeleton/skeleton.tsx"],"sourcesContent":["@import '../../global/style/nano-theme/components';\n\n:host {\n /*\n @prop --base-color-rgb: default #{$skeleton-color-rgb};\n * @prop --color: default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n * @prop --tint: default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));\n /\n\n --base-color-rgb: #{$skeleton-color-rgb};\n --color: var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n --tint: var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));\n\n display: block;\n position: relative;\n border-radius: 0.25rem;\n block-size: 1em;\n}\n\n.skeleton {\n display: flex;\n inline-size: 100%;\n block-size: 100%;\n border-radius: inherit;\n}\n\n.skeleton__indicator {\n flex: 1 1 auto;\n background: var(--color);\n border-radius: inherit;\n}\n\n.skeleton.animate .skeleton__indicator {\n background:\n linear-gradient(\n 270deg,\n var(--tint),\n var(--color),\n var(--color),\n var(--tint)\n );\n background-size: 400% 100%;\n animation: loader 6s ease-in-out infinite;\n}\n\n@keyframes loader {\n 0% {\n background-position: 200% 0;\n }\n\n to {\n background-position: -200% 0;\n }\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\n\n/\n Skeletons are used to show where content will eventually be drawn.\n * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.\n * Prevents large areas of empty space during asynchronous operations.\n /\n@Component({\n tag: 'nano-skeleton',\n styleUrl: 'skeleton.scss',\n shadow: true,\n})\nexport class Skeleton implements ComponentInterface {\n /* When `true`, the skeleton will animate. */\n @Prop() animated = true;\n\n render() {\n return (\n <div\n class={{\n skeleton: true,\n animate: this.animated,\n }}\n >\n <div class=\"skeleton__indicator\" ~~/>\~~n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"skeleton.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,qtCAAqtC;;MCY5tC,QAAQ;;;;;oBAEA,IAAI;;EAEvB,MAAM;IACJ,QACE,WACE,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE,IAAI,CAAC,QAAQ;OACvB,IAED,WAAK,KAAK,EAAC,qBAAqB,aAAa,CACzC,EACN;GACH;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/skeleton/skeleton.scss?tag=nano-skeleton&encapsulation=shadow","./src/components/skeleton/skeleton.tsx"],"sourcesContent":["@import '../../global/style/nano-theme/components';\n\n:host {\n /*\n @prop --base-color-rgb: default #{$skeleton-color-rgb};\n * @prop --color: default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n * @prop --tint: default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));\n /\n\n --base-color-rgb: #{$skeleton-color-rgb};\n --color: var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n --tint: var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));\n\n display: block;\n position: relative;\n border-radius: 0.25rem;\n min-block-size: 1em;\n line-height: inherit;\n}\n\n.skeleton {\n display: flex;\n min-inline-size: 100%;\n min-block-size: 100%;\n border-radius: inherit;\n line-height: inherit;\n}\n\n.skeleton__indicator {\n flex: 1 1 auto;\n background: var(--color);\n border-radius: inherit;\n line-height: inherit;\n}\n\n.skeleton.animate .skeleton__indicator {\n background:\n linear-gradient(\n 270deg,\n var(--tint),\n var(--color),\n var(--color),\n var(--tint)\n );\n background-size: 400% 100%;\n animation: loader 6s ease-in-out infinite;\n}\n\n@keyframes loader {\n 0% {\n background-position: 200% 0;\n }\n\n to {\n background-position: -200% 0;\n }\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\n\n/\n Skeletons are used to show where content will eventually be drawn.\n * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.\n * Prevents large areas of empty space during asynchronous operations.\n /\n@Component({\n tag: 'nano-skeleton',\n styleUrl: 'skeleton.scss',\n shadow: true,\n})\nexport class Skeleton implements ComponentInterface {\n /* When `true`, the skeleton will animate. */\n @Prop() animated = true;\n\n render() {\n return (\n <div\n class={{\n skeleton: true,\n animate: this.animated,\n }}\n >\n <div class=\"skeleton__indicator\"> </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/spinner.js CHANGED Viewed

@@ -3,7 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-const spinnerCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:inline-block;--base-color-rgb:var(--nano-spinner-base-rgb, 0, 116, 149);--indicator-color:var(\n      --nano-spinner-indicator-color,\n      rgba(var(--base-color-rgb), 1)\n    );--track-color:var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));--overlay-color:var(--nano-layer-overlay-light, rgba(255, 255, 255, .7))}.spinner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}:host([overlay]:not([overlay=false])) .spinner{position:absolute;inset:0}:host([overlay]:not([overlay=false])) .spinner .spinner__loader,:host([overlay]:not([overlay=false])) .spinner .spinner__text{z-index:1}.spinner__overlay{background:var(--overlay-color);position:absolute;inset:0;z-index:0;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.spinner__loader{font-size:var(--spinner-scale, 1em)}.spinner__spin{display:block;margin:auto;inline-size:1em;block-size:1em;border-radius:50%;border:solid 0.1em var(--track-color);border-block-start-color:var(--indicator-color);border-inline-end-color:var(--indicator-color);border-inline-start-color:var(--indicator-color);-webkit-animation:1s linear infinite spin;animation:1s linear infinite spin}.spinner__dna{font-size:0.2286em;display:-webkit-box;display:-ms-flexbox;display:flex}.spinner__dnatrack{position:relative;padding-block:0;padding-inline:0.625em;block-size:4.375em;inline-size:0.625em;overflow:hidden}.spinner__dnatrack::before{content:\"\";position:absolute;inset-block-start:1.875em;inset-inline-start:50%;-webkit-transform:translateX(-50%) translateZ(0);transform:translateX(-50%) translateZ(0);inline-size:0.0625em;inline-size:max(.0625em, 1px);block-size:0.625em;background:var(--track-color);-webkit-animation:flex 1.5s linear infinite;animation:flex 1.5s linear infinite;-webkit-transform-origin:center center;transform-origin:center center}.spinner__dnatrack--2::before{-webkit-animation:flex 1.5s -1.3s linear infinite;animation:flex 1.5s -1.3s linear infinite}.spinner__dnatrack--3::before{-webkit-animation:flex 1.5s -1.1s linear infinite;animation:flex 1.5s -1.1s linear infinite}.spinner__dnatrack--4::before{-webkit-animation:flex 1.5s -0.9s linear infinite;animation:flex 1.5s -0.9s linear infinite}.spinner__dnatrack--5::before{-webkit-animation:flex 1.5s -0.75s linear infinite;animation:flex 1.5s -0.75s linear infinite}.spinner__dnadot{position:absolute;inline-size:0.5em;block-size:0.5em;border-radius:50% 50%;background:var(--indicator-color);-webkit-animation:rotate 1.5s linear infinite;animation:rotate 1.5s linear infinite;-webkit-transform-origin:center center;transform-origin:center center;inset-inline-start:50%;-webkit-transform:translateX(-50%) translateZ(0) translateY(0);transform:translateX(-50%) translateZ(0) translateY(0)}.spinner__dnadot--2{-webkit-animation:rotate 1.5s -0.75s linear infinite;animation:rotate 1.5s -0.75s linear infinite}.spinner__dnadot--3{-webkit-animation:rotate 1.5s -1.3s linear infinite;animation:rotate 1.5s -1.3s linear infinite}.spinner__dnadot--4{-webkit-animation:rotate 1.5s -0.55s linear infinite;animation:rotate 1.5s -0.55s linear infinite}.spinner__dnadot--5{-webkit-animation:rotate 1.5s -1.1s linear infinite;animation:rotate 1.5s -1.1s linear infinite}.spinner__dnadot--6{-webkit-animation:rotate 1.5s -0.35s linear infinite;animation:rotate 1.5s -0.35s linear infinite}.spinner__dnadot--7{-webkit-animation:rotate 1.5s -0.9s linear infinite;animation:rotate 1.5s -0.9s linear infinite}.spinner__dnadot--8{-webkit-animation:rotate 1.5s -0.15s linear infinite;animation:rotate 1.5s -0.15s linear infinite}.spinner__dnadot--9{-webkit-animation:rotate 1.5s -0.75s linear infinite;animation:rotate 1.5s -0.75s linear infinite}.spinner__dnadot--10{-webkit-animation:rotate 1.5s 0s linear infinite;animation:rotate 1.5s 0s linear infinite}.spinner__text{text-align:center;position:relative;-webkit-margin-before:0.5em;margin-block-start:0.5em}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes rotate{0%,100%{-webkit-transform:translateX(-50%) translateY(0) scale(1);transform:translateX(-50%) translateY(0) scale(1)}25%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(2);transform:translateX(-50%) translateY(1.875em) scale(2)}50%{-webkit-transform:translateX(-50%) translateY(3.75em) scale(1);transform:translateX(-50%) translateY(3.75em) scale(1)}75%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(0.3);transform:translateX(-50%) translateY(1.875em) scale(0.3)}}@keyframes rotate{0%,100%{-webkit-transform:translateX(-50%) translateY(0) scale(1);transform:translateX(-50%) translateY(0) scale(1)}25%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(2);transform:translateX(-50%) translateY(1.875em) scale(2)}50%{-webkit-transform:translateX(-50%) translateY(3.75em) scale(1);transform:translateX(-50%) translateY(3.75em) scale(1)}75%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(0.3);transform:translateX(-50%) translateY(1.875em) scale(0.3)}}@-webkit-keyframes flex{0%,100%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}25%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}50%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}75%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}}@keyframes flex{0%,100%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}25%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}50%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}75%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}}";
+const spinnerCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:inline-block;--base-color-rgb:var(--nano-indicator-rgb, 84, 140, 175);--indicator-color:var(--nano-indicator-color, rgba(var(--base-color-rgb), 1));--track-color:var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));--overlay-color:var(--nano-layer-overlay-light, rgba(255, 255, 255, .7))}.spinner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}:host([overlay]:not([overlay=false])) .spinner{position:absolute;inset:0}:host([overlay]:not([overlay=false])) .spinner .spinner__loader,:host([overlay]:not([overlay=false])) .spinner .spinner__text{z-index:1}.spinner__overlay{background:var(--overlay-color);position:absolute;inset:0;z-index:0;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.spinner__loader{font-size:var(--spinner-scale, 1em)}.spinner__spin{display:block;margin:auto;inline-size:1em;block-size:1em;border-radius:50%;border:solid 0.1em var(--track-color);border-block-start-color:var(--indicator-color);border-inline-end-color:var(--indicator-color);border-inline-start-color:var(--indicator-color);-webkit-animation:1s linear infinite spin;animation:1s linear infinite spin}.spinner__dna{font-size:0.2286em;display:-webkit-box;display:-ms-flexbox;display:flex}.spinner__dnatrack{position:relative;padding-block:0;padding-inline:0.625em;block-size:4.375em;inline-size:0.625em;overflow:hidden}.spinner__dnatrack::before{content:\"\";position:absolute;inset-block-start:1.875em;inset-inline-start:50%;-webkit-transform:translateX(-50%) translateZ(0);transform:translateX(-50%) translateZ(0);inline-size:0.0625em;inline-size:max(.0625em, 1px);block-size:0.625em;background:var(--track-color);-webkit-animation:flex 1.5s linear infinite;animation:flex 1.5s linear infinite;-webkit-transform-origin:center center;transform-origin:center center}.spinner__dnatrack--2::before{-webkit-animation:flex 1.5s -1.3s linear infinite;animation:flex 1.5s -1.3s linear infinite}.spinner__dnatrack--3::before{-webkit-animation:flex 1.5s -1.1s linear infinite;animation:flex 1.5s -1.1s linear infinite}.spinner__dnatrack--4::before{-webkit-animation:flex 1.5s -0.9s linear infinite;animation:flex 1.5s -0.9s linear infinite}.spinner__dnatrack--5::before{-webkit-animation:flex 1.5s -0.75s linear infinite;animation:flex 1.5s -0.75s linear infinite}.spinner__dnadot{position:absolute;inline-size:0.5em;block-size:0.5em;border-radius:50% 50%;background:var(--indicator-color);-webkit-animation:rotate 1.5s linear infinite;animation:rotate 1.5s linear infinite;-webkit-transform-origin:center center;transform-origin:center center;inset-inline-start:50%;-webkit-transform:translateX(-50%) translateZ(0) translateY(0);transform:translateX(-50%) translateZ(0) translateY(0)}.spinner__dnadot--2{-webkit-animation:rotate 1.5s -0.75s linear infinite;animation:rotate 1.5s -0.75s linear infinite}.spinner__dnadot--3{-webkit-animation:rotate 1.5s -1.3s linear infinite;animation:rotate 1.5s -1.3s linear infinite}.spinner__dnadot--4{-webkit-animation:rotate 1.5s -0.55s linear infinite;animation:rotate 1.5s -0.55s linear infinite}.spinner__dnadot--5{-webkit-animation:rotate 1.5s -1.1s linear infinite;animation:rotate 1.5s -1.1s linear infinite}.spinner__dnadot--6{-webkit-animation:rotate 1.5s -0.35s linear infinite;animation:rotate 1.5s -0.35s linear infinite}.spinner__dnadot--7{-webkit-animation:rotate 1.5s -0.9s linear infinite;animation:rotate 1.5s -0.9s linear infinite}.spinner__dnadot--8{-webkit-animation:rotate 1.5s -0.15s linear infinite;animation:rotate 1.5s -0.15s linear infinite}.spinner__dnadot--9{-webkit-animation:rotate 1.5s -0.75s linear infinite;animation:rotate 1.5s -0.75s linear infinite}.spinner__dnadot--10{-webkit-animation:rotate 1.5s 0s linear infinite;animation:rotate 1.5s 0s linear infinite}.spinner__text{text-align:center;position:relative;-webkit-margin-before:0.5em;margin-block-start:0.5em}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes rotate{0%,100%{-webkit-transform:translateX(-50%) translateY(0) scale(1);transform:translateX(-50%) translateY(0) scale(1)}25%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(2);transform:translateX(-50%) translateY(1.875em) scale(2)}50%{-webkit-transform:translateX(-50%) translateY(3.75em) scale(1);transform:translateX(-50%) translateY(3.75em) scale(1)}75%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(0.3);transform:translateX(-50%) translateY(1.875em) scale(0.3)}}@keyframes rotate{0%,100%{-webkit-transform:translateX(-50%) translateY(0) scale(1);transform:translateX(-50%) translateY(0) scale(1)}25%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(2);transform:translateX(-50%) translateY(1.875em) scale(2)}50%{-webkit-transform:translateX(-50%) translateY(3.75em) scale(1);transform:translateX(-50%) translateY(3.75em) scale(1)}75%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(0.3);transform:translateX(-50%) translateY(1.875em) scale(0.3)}}@-webkit-keyframes flex{0%,100%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}25%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}50%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}75%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}}@keyframes flex{0%,100%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}25%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}50%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}75%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}}";
 const Spinner = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/spinner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"spinner.js","mappings":";;;;;AAAA,MAAM,UAAU,GAAG,~~msMAAmsM~~;;~~MCkBzsM~~,OAAO;;;;;mBAEU,KAAK;gBAGA,KAAK;mBAGM,KAAK;;EAEjD,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC;GAC5C;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,SAAS,eAAW,MAAM,eAAW,QAAQ,IACtD,WAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,IAAI,KAAK,KAAK,KAClB,WAAK,KAAK,EAAC,cAAc,IACvB,WAAK,KAAK,EAAC,wCAAwC,IACjD,WAAK,KAAK,EAAC,oCAAoC,GAAO,EACtD,WAAK,KAAK,EAAC,oCAAoC,GAAO,CAClD,EACN,WAAK,KAAK,EAAC,wCAAwC,IACjD,WAAK,KAAK,EAAC,oCAAoC,GAAO,EACtD,WAAK,KAAK,EAAC,oCAAoC,GAAO,CAClD,EACN,WAAK,KAAK,EAAC,wCAAwC,IACjD,WAAK,KAAK,EAAC,oCAAoC,GAAO,EACtD,WAAK,KAAK,EAAC,oCAAoC,GAAO,CAClD,EACN,WAAK,KAAK,EAAC,wCAAwC,IACjD,WAAK,KAAK,EAAC,oCAAoC,GAAO,EACtD,WAAK,KAAK,EAAC,oCAAoC,GAAO,CAClD,EACN,WAAK,KAAK,EAAC,wCAAwC,IACjD,WAAK,KAAK,EAAC,oCAAoC,GAAO,EACtD,WAAK,KAAK,EAAC,qCAAqC,GAAO,CACnD,CACF,CACP,EACA,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,YAAM,KAAK,EAAC,eAAe,GAAQ,CAC1D,EACL,IAAI,CAAC,OAAO,KACX,WAAK,KAAK,EAAC,eAAe,IACxB,eAAQ,CACJ,CACP,EACA,IAAI,CAAC,OAAO,IAAI,WAAK,KAAK,EAAC,kBAAkB,GAAO,CACjD,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/spinner/spinner.scss?tag=nano-spinner&encapsulation=shadow","./src/components/spinner/spinner.tsx"],"sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n /*\n @prop --base-color-rgb: default #{$~~spinner~~-color-rgb}\n * @prop --indicator-color: default var(--nano-~~spinner-~~indicator-color, rgba(var(--base-color-rgb), 1))\n * @prop --track-color: default var(--nano-track-color, rgba(var(--base-color-rgb), .2))\n * @prop --spinner-scale: optional scaling of the spinner. default contextual font-size\n * @prop --overlay-color: #{$layer-overlay-light};\n /\n\n display: inline-block;\n\n // --spinner-scale: 5em;\n --base-color-rgb: #{$~~spinner~~-color-rgb};\n --indicator-color~~:\n~~ var(\n --nano-~~spinner-~~indicator-color~~,\n~~ rgba(var(--base-color-rgb), 1)\n );\n --track-color: var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));\n --overlay-color: #{$layer-overlay-light};\n}\n\n.spinner {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n :host([overlay]:not([overlay='false'])) & {\n position: absolute;\n inset: 0;\n\n .spinner__loader,\n .spinner__text {\n z-index: 1;\n }\n }\n\n &__overlay {\n background: var(--overlay-color);\n position: absolute;\n inset: 0;\n z-index: 0;\n backdrop-filter: blur(#{$layer-overlay-blur});\n }\n\n &__loader {\n font-size: var(--spinner-scale, 1em);\n }\n\n &__spin {\n display: block;\n margin: auto;\n inline-size: 1em;\n block-size: 1em;\n border-radius: 50%;\n border: solid 0.1em var(--track-color);\n border-block-start-color: var(--indicator-color);\n border-inline-end-color: var(--indicator-color);\n border-inline-start-color: var(--indicator-color);\n animation: 1s linear infinite spin;\n }\n\n &__dna {\n font-size: 0.2286em;\n display: flex;\n }\n\n &__dnatrack {\n position: relative;\n padding-block: 0;\n padding-inline: 0.625em;\n block-size: 4.375em;\n inline-size: 0.625em;\n overflow: hidden;\n\n &::before {\n content: '';\n position: absolute;\n inset-block-start: 1.875em;\n inset-inline-start: 50%;\n transform: translateX(-50%) translateZ(0);\n inline-size: 0.0625em;\n inline-size: #{'max(.0625em, 1px)'};\n block-size: 0.625em;\n background: var(--track-color);\n animation: flex 1.5s linear infinite;\n transform-origin: center center;\n }\n\n &--2::before {\n animation: flex 1.5s -1.3s linear infinite;\n }\n\n &--3::before {\n animation: flex 1.5s -1.1s linear infinite;\n }\n\n &--4::before {\n animation: flex 1.5s -0.9s linear infinite;\n }\n\n &--5::before {\n animation: flex 1.5s -0.75s linear infinite;\n }\n }\n\n &__dnadot {\n position: absolute;\n inline-size: 0.5em;\n block-size: 0.5em;\n border-radius: 50% 50%;\n background: var(--indicator-color);\n animation: rotate 1.5s linear infinite;\n transform-origin: center center;\n inset-inline-start: 50%;\n transform: translateX(-50%) translateZ(0) translateY(0);\n\n &--2 {\n animation: rotate 1.5s -0.75s linear infinite;\n }\n\n &--3 {\n animation: rotate 1.5s -1.3s linear infinite;\n }\n\n &--4 {\n animation: rotate 1.5s -0.55s linear infinite;\n }\n\n &--5 {\n animation: rotate 1.5s -1.1s linear infinite;\n }\n\n &--6 {\n animation: rotate 1.5s -0.35s linear infinite;\n }\n\n &--7 {\n animation: rotate 1.5s -0.9s linear infinite;\n }\n\n &--8 {\n animation: rotate 1.5s -0.15s linear infinite;\n }\n\n &--9 {\n animation: rotate 1.5s -0.75s linear infinite;\n }\n\n &--10 {\n animation: rotate 1.5s 0s linear infinite;\n }\n }\n\n &__text {\n text-align: center;\n position: relative;\n margin-block-start: 0.5em;\n }\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes rotate {\n 0%,\n 100% {\n transform: translateX(-50%) translateY(0) scale(1);\n }\n\n 25% {\n transform: translateX(-50%) translateY(1.875em) scale(2);\n }\n\n 50% {\n transform: translateX(-50%) translateY(3.75em) scale(1);\n }\n\n 75% {\n transform: translateX(-50%) translateY(1.875em) scale(0.3);\n }\n }\n\n @keyframes flex {\n 0%,\n 100% {\n transform: translateX(-50%) scaleY(5);\n }\n\n 25% {\n transform: translateX(-50%) scaleY(1);\n }\n\n 50% {\n transform: translateX(-50%) scaleY(5);\n }\n\n 75% {\n transform: translateX(-50%) scaleY(1);\n }\n }\n}\n","import {\n Component,\n h,\n ComponentInterface,\n Prop,\n Element,\n State,\n} from '@stencil/core';\n\n/\n Spinners are used to show the progress of an indeterminate operation.\n * @slot - Used for loading messages\n /\n@Component({\n tag: 'nano-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner implements ComponentInterface {\n @Element() el: HTMLNanoSpinnerElement;\n @State() hasText: boolean = false;\n\n /* The type of spinner animation. dna should be used for larger, page loads. Circle for smaller component loaders. /\n @Prop() type: 'dna' \| 'circle' = 'dna';\n\n /* Displays absolutely with an overlay */\n @Prop({ reflect: true }) overlay: boolean = false;\n\n componentWillLoad() {\n this.hasText = !!this.el.childNodes.length;\n }\n\n render() {\n return (\n <div class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\">\n <div class=\"spinner__loader\">\n {this.type === 'dna' && (\n <div class=\"spinner__dna\">\n <div class=\"spinner__dnatrack spinner__dnatrack--1\">\n <div class=\"spinner__dnadot spinner__dnadot--1\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--2\"></div>\n </div>\n <div class=\"spinner__dnatrack spinner__dnatrack--2\">\n <div class=\"spinner__dnadot spinner__dnadot--3\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--4\"></div>\n </div>\n <div class=\"spinner__dnatrack spinner__dnatrack--3\">\n <div class=\"spinner__dnadot spinner__dnadot--5\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--6\"></div>\n </div>\n <div class=\"spinner__dnatrack spinner__dnatrack--4\">\n <div class=\"spinner__dnadot spinner__dnadot--7\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--8\"></div>\n </div>\n <div class=\"spinner__dnatrack spinner__dnatrack--5\">\n <div class=\"spinner__dnadot spinner__dnadot--9\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--10\"></div>\n </div>\n </div>\n )}\n {this.type === 'circle' && <span class=\"spinner__spin\"></span>}\n </div>\n {this.hasText && (\n <div class=\"spinner__text\">\n <slot />\n </div>\n )}\n {this.overlay && <div class=\"spinner__overlay\"></div>}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"spinner.js","mappings":";;;;;AAAA,MAAM,UAAU,GAAG,oqMAAoqM;;MCkB1qM,OAAO;;;;;mBAEU,KAAK;gBAGA,KAAK;mBAGM,KAAK;;EAEjD,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC;GAC5C;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,SAAS,eAAW,MAAM,eAAW,QAAQ,IACtD,WAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,IAAI,KAAK,KAAK,KAClB,WAAK,KAAK,EAAC,cAAc,IACvB,WAAK,KAAK,EAAC,wCAAwC,IACjD,WAAK,KAAK,EAAC,oCAAoC,GAAO,EACtD,WAAK,KAAK,EAAC,oCAAoC,GAAO,CAClD,EACN,WAAK,KAAK,EAAC,wCAAwC,IACjD,WAAK,KAAK,EAAC,oCAAoC,GAAO,EACtD,WAAK,KAAK,EAAC,oCAAoC,GAAO,CAClD,EACN,WAAK,KAAK,EAAC,wCAAwC,IACjD,WAAK,KAAK,EAAC,oCAAoC,GAAO,EACtD,WAAK,KAAK,EAAC,oCAAoC,GAAO,CAClD,EACN,WAAK,KAAK,EAAC,wCAAwC,IACjD,WAAK,KAAK,EAAC,oCAAoC,GAAO,EACtD,WAAK,KAAK,EAAC,oCAAoC,GAAO,CAClD,EACN,WAAK,KAAK,EAAC,wCAAwC,IACjD,WAAK,KAAK,EAAC,oCAAoC,GAAO,EACtD,WAAK,KAAK,EAAC,qCAAqC,GAAO,CACnD,CACF,CACP,EACA,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,YAAM,KAAK,EAAC,eAAe,GAAQ,CAC1D,EACL,IAAI,CAAC,OAAO,KACX,WAAK,KAAK,EAAC,eAAe,IACxB,eAAQ,CACJ,CACP,EACA,IAAI,CAAC,OAAO,IAAI,WAAK,KAAK,EAAC,kBAAkB,GAAO,CACjD,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/spinner/spinner.scss?tag=nano-spinner&encapsulation=shadow","./src/components/spinner/spinner.tsx"],"sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n /*\n @prop --base-color-rgb: default #{$progress-indicator-color-rgb}\n * @prop --indicator-color: default var(--nano-indicator-color, rgba(var(--base-color-rgb), 1));\n * @prop --track-color: default var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));\n * @prop --spinner-scale: optional scaling of the spinner. default contextual font-size\n * @prop --overlay-color: #{$layer-overlay-light};\n /\n\n display: inline-block;\n\n // --spinner-scale: 5em;\n --base-color-rgb: #{$progress-indicator-color-rgb};\n --indicator-color: var(--nano-indicator-color, rgba(var(--base-color-rgb), 1));\n --track-color: var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));\n --overlay-color: #{$layer-overlay-light};\n}\n\n.spinner {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n :host([overlay]:not([overlay='false'])) & {\n position: absolute;\n inset: 0;\n\n .spinner__loader,\n .spinner__text {\n z-index: 1;\n }\n }\n\n &__overlay {\n background: var(--overlay-color);\n position: absolute;\n inset: 0;\n z-index: 0;\n backdrop-filter: blur(#{$layer-overlay-blur});\n }\n\n &__loader {\n font-size: var(--spinner-scale, 1em);\n }\n\n &__spin {\n display: block;\n margin: auto;\n inline-size: 1em;\n block-size: 1em;\n border-radius: 50%;\n border: solid 0.1em var(--track-color);\n border-block-start-color: var(--indicator-color);\n border-inline-end-color: var(--indicator-color);\n border-inline-start-color: var(--indicator-color);\n animation: 1s linear infinite spin;\n }\n\n &__dna {\n font-size: 0.2286em;\n display: flex;\n }\n\n &__dnatrack {\n position: relative;\n padding-block: 0;\n padding-inline: 0.625em;\n block-size: 4.375em;\n inline-size: 0.625em;\n overflow: hidden;\n\n &::before {\n content: '';\n position: absolute;\n inset-block-start: 1.875em;\n inset-inline-start: 50%;\n transform: translateX(-50%) translateZ(0);\n inline-size: 0.0625em;\n inline-size: #{'max(.0625em, 1px)'};\n block-size: 0.625em;\n background: var(--track-color);\n animation: flex 1.5s linear infinite;\n transform-origin: center center;\n }\n\n &--2::before {\n animation: flex 1.5s -1.3s linear infinite;\n }\n\n &--3::before {\n animation: flex 1.5s -1.1s linear infinite;\n }\n\n &--4::before {\n animation: flex 1.5s -0.9s linear infinite;\n }\n\n &--5::before {\n animation: flex 1.5s -0.75s linear infinite;\n }\n }\n\n &__dnadot {\n position: absolute;\n inline-size: 0.5em;\n block-size: 0.5em;\n border-radius: 50% 50%;\n background: var(--indicator-color);\n animation: rotate 1.5s linear infinite;\n transform-origin: center center;\n inset-inline-start: 50%;\n transform: translateX(-50%) translateZ(0) translateY(0);\n\n &--2 {\n animation: rotate 1.5s -0.75s linear infinite;\n }\n\n &--3 {\n animation: rotate 1.5s -1.3s linear infinite;\n }\n\n &--4 {\n animation: rotate 1.5s -0.55s linear infinite;\n }\n\n &--5 {\n animation: rotate 1.5s -1.1s linear infinite;\n }\n\n &--6 {\n animation: rotate 1.5s -0.35s linear infinite;\n }\n\n &--7 {\n animation: rotate 1.5s -0.9s linear infinite;\n }\n\n &--8 {\n animation: rotate 1.5s -0.15s linear infinite;\n }\n\n &--9 {\n animation: rotate 1.5s -0.75s linear infinite;\n }\n\n &--10 {\n animation: rotate 1.5s 0s linear infinite;\n }\n }\n\n &__text {\n text-align: center;\n position: relative;\n margin-block-start: 0.5em;\n }\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes rotate {\n 0%,\n 100% {\n transform: translateX(-50%) translateY(0) scale(1);\n }\n\n 25% {\n transform: translateX(-50%) translateY(1.875em) scale(2);\n }\n\n 50% {\n transform: translateX(-50%) translateY(3.75em) scale(1);\n }\n\n 75% {\n transform: translateX(-50%) translateY(1.875em) scale(0.3);\n }\n }\n\n @keyframes flex {\n 0%,\n 100% {\n transform: translateX(-50%) scaleY(5);\n }\n\n 25% {\n transform: translateX(-50%) scaleY(1);\n }\n\n 50% {\n transform: translateX(-50%) scaleY(5);\n }\n\n 75% {\n transform: translateX(-50%) scaleY(1);\n }\n }\n}\n","import {\n Component,\n h,\n ComponentInterface,\n Prop,\n Element,\n State,\n} from '@stencil/core';\n\n/\n Spinners are used to show the progress of an indeterminate operation.\n * @slot - Used for loading messages\n /\n@Component({\n tag: 'nano-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner implements ComponentInterface {\n @Element() el: HTMLNanoSpinnerElement;\n @State() hasText: boolean = false;\n\n /* The type of spinner animation. dna should be used for larger, page loads. Circle for smaller component loaders. /\n @Prop() type: 'dna' \| 'circle' = 'dna';\n\n /* Displays absolutely with an overlay */\n @Prop({ reflect: true }) overlay: boolean = false;\n\n componentWillLoad() {\n this.hasText = !!this.el.childNodes.length;\n }\n\n render() {\n return (\n <div class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\">\n <div class=\"spinner__loader\">\n {this.type === 'dna' && (\n <div class=\"spinner__dna\">\n <div class=\"spinner__dnatrack spinner__dnatrack--1\">\n <div class=\"spinner__dnadot spinner__dnadot--1\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--2\"></div>\n </div>\n <div class=\"spinner__dnatrack spinner__dnatrack--2\">\n <div class=\"spinner__dnadot spinner__dnadot--3\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--4\"></div>\n </div>\n <div class=\"spinner__dnatrack spinner__dnatrack--3\">\n <div class=\"spinner__dnadot spinner__dnadot--5\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--6\"></div>\n </div>\n <div class=\"spinner__dnatrack spinner__dnatrack--4\">\n <div class=\"spinner__dnadot spinner__dnadot--7\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--8\"></div>\n </div>\n <div class=\"spinner__dnatrack spinner__dnatrack--5\">\n <div class=\"spinner__dnadot spinner__dnadot--9\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--10\"></div>\n </div>\n </div>\n )}\n {this.type === 'circle' && <span class=\"spinner__spin\"></span>}\n </div>\n {this.hasText && (\n <div class=\"spinner__text\">\n <slot />\n </div>\n )}\n {this.overlay && <div class=\"spinner__overlay\"></div>}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/transitions.js CHANGED Viewed

@@ -19,9 +19,10 @@ const displayTransition = (el, className, show = true) => {
   return new Promise((resolve) => {
     if (show) {
       el.addEventListener('transitionend', (e) => {
-        if (e.target !== el)
-          return;
-        resolve('shown');
+        if (e.target === el ||
+          e.composedPath().some((el) => el === e.target)) {
+          resolve('shown');
+        }
       }, { once: true });
       el.style.display = 'block';
       el.dataset.displayTransition = 'true';
@@ -29,10 +30,11 @@ const displayTransition = (el, className, show = true) => {
     }
     else {
       el.addEventListener('transitionend', (e) => {
-        if (e.target !== el)
-          return;
-        el.style.display = 'none';
-        resolve('hidden');
+        if (e.target === el ||
+          e.composedPath().some((el) => el === e.target)) {
+          el.style.display = 'none';
+          resolve('hidden');
+        }
       }, { once: true });
       el.classList.remove(className);
     }

package/dist/components/transitions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"transitions.js","mappings":";;;AAAA;;;;AAiBA;;;;;;;;;;MAUa,iBAAiB,GAAG,CAC/B,EAAe,EACf,SAAiB,EACjB,OAAgB,IAAI;EAEpB,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO;IACzB,IAAI,IAAI,EAAE;MACR,EAAE,CAAC,gBAAgB,CACjB,eAAe,EACf,CAAC,CAAQ;QACP,~~IAAI~~,CAAC,CAAC,MAAM,KAAK,EAAE;~~UAAE~~,~~OAAO~~;~~QAC5B~~,OAAO,CAAC,OAAO,CAAC,CAAC;~~OAClB~~,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;MACF,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;MAC3B,EAAE,CAAC,OAAO,CAAC,iBAAiB,GAAG,MAAM,CAAC;MACtC,UAAU,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC;KACnD;SAAM;MACL,EAAE,CAAC,gBAAgB,CACjB,eAAe,EACf,CAAC,CAAQ;QACP,~~IAAI~~,CAAC,CAAC,MAAM,KAAK,EAAE;~~UAAE~~,~~OAAO~~;~~QAC5B~~,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;~~QAC1B~~,OAAO,CAAC,QAAQ,CAAC,CAAC;~~OACnB~~,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;MACF,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;KAChC;GACF,CAAC,CAAC;AACL;;;;","names":[],"sources":["./src/utils/transitions.ts"],"sourcesContent":["/*\n Quality of life for transition handling.\n * Adds / removes transitionend events. Resolves on complete\n /\nexport const transitionDone = (\n el: HTMLElement\n): Promise<'shown' \| 'hidden'> => {\n return new Promise((resolve) => {\n const callback = () => {\n el.removeEventListener('transitionend', callback);\n resolve;\n };\n el.addEventListener('transitionend', callback);\n // ??\n });\n};\n\n/\n handles hiding and showing elements properly (with display),\n * along with transitions, so they are no longer viewable in the dom.\n * - OnHide remove show class, listen for transition end, then display: none on finish\n * - OnShow, display block on start then add a show class\n * @param el\n * @param className\n * @param show\n * @returns a promise of resolving as either 'show' or 'hidden'\n */\nexport const displayTransition = (\n el: HTMLElement,\n className: string,\n show: boolean = true\n): Promise<'shown' \| 'hidden'> => {\n return new Promise((resolve) => {\n if (show) {\n el.addEventListener(\n 'transitionend',\n (e: Event) => {\n if (e.target ~~!==~~ el) ~~return;\~~n resolve('shown');\n },\n { once: true }\n );\n el.style.display = 'block';\n el.dataset.displayTransition = 'true';\n setTimeout(() => el.classList.add(className), 20);\n } else {\n el.addEventListener(\n 'transitionend',\n (e: Event) => {\n if (e.target ~~!==~~ el) ~~return;\~~n el.style.display = 'none';\n resolve('hidden');\n },\n { once: true }\n );\n el.classList.remove(className);\n }\n });\n};\n"],"version":3}
1	+ {"file":"transitions.js","mappings":";;;AAAA;;;;AAiBA;;;;;;;;;;MAUa,iBAAiB,GAAG,CAC/B,EAAe,EACf,SAAiB,EACjB,OAAgB,IAAI;EAEpB,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO;IACzB,IAAI,IAAI,EAAE;MACR,EAAE,CAAC,gBAAgB,CACjB,eAAe,EACf,CAAC,CAAQ;QACP,IACE,CAAC,CAAC,MAAM,KAAK,EAAE;UACf,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAC9C;UACA,OAAO,CAAC,OAAO,CAAC,CAAC;SAClB;OACF,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;MACF,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;MAC3B,EAAE,CAAC,OAAO,CAAC,iBAAiB,GAAG,MAAM,CAAC;MACtC,UAAU,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC;KACnD;SAAM;MACL,EAAE,CAAC,gBAAgB,CACjB,eAAe,EACf,CAAC,CAAQ;QACP,IACE,CAAC,CAAC,MAAM,KAAK,EAAE;UACf,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAC9C;UACA,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;UAC1B,OAAO,CAAC,QAAQ,CAAC,CAAC;SACnB;OACF,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;MACF,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;KAChC;GACF,CAAC,CAAC;AACL;;;;","names":[],"sources":["./src/utils/transitions.ts"],"sourcesContent":["/*\n Quality of life for transition handling.\n * Adds / removes transitionend events. Resolves on complete\n /\nexport const transitionDone = (\n el: HTMLElement\n): Promise<'shown' \| 'hidden'> => {\n return new Promise((resolve) => {\n const callback = () => {\n el.removeEventListener('transitionend', callback);\n resolve;\n };\n el.addEventListener('transitionend', callback);\n // ??\n });\n};\n\n/\n handles hiding and showing elements properly (with display),\n * along with transitions, so they are no longer viewable in the dom.\n * - OnHide remove show class, listen for transition end, then display: none on finish\n * - OnShow, display block on start then add a show class\n * @param el\n * @param className\n * @param show\n * @returns a promise of resolving as either 'show' or 'hidden'\n */\nexport const displayTransition = (\n el: HTMLElement,\n className: string,\n show: boolean = true\n): Promise<'shown' \| 'hidden'> => {\n return new Promise((resolve) => {\n if (show) {\n el.addEventListener(\n 'transitionend',\n (e: Event) => {\n if (\n e.target === el \|\|\n e.composedPath().some((el) => el === e.target)\n ) {\n resolve('shown');\n }\n },\n { once: true }\n );\n el.style.display = 'block';\n el.dataset.displayTransition = 'true';\n setTimeout(() => el.classList.add(className), 20);\n } else {\n el.addEventListener(\n 'transitionend',\n (e: Event) => {\n if (\n e.target === el \|\|\n e.composedPath().some((el) => el === e.target)\n ) {\n el.style.display = 'none';\n resolve('hidden');\n }\n },\n { once: true }\n );\n el.classList.remove(className);\n }\n });\n};\n"],"version":3}

package/dist/custom-elements/index.d.ts CHANGED Viewed

@@ -200,6 +200,12 @@ export const NanoOption: {
   new (): NanoOption;
 };
+interface NanoProgressBar extends Components.NanoProgressBar, HTMLElement {}
+export const NanoProgressBar: {
+  prototype: NanoProgressBar;
+  new (): NanoProgressBar;
+};
 interface NanoRange extends Components.NanoRange, HTMLElement {}
 export const NanoRange: {
   prototype: NanoRange;