npm - @nanoporetech-digital/components - Versions diffs - 2.1.3 → 2.2.1 - Mend

@nanoporetech-digital/components 2.1.3 → 2.2.1

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 (199) hide show

package/dist/esm-es5/nano-hero.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["src/components/hero/hero.scss?tag=nano-hero&encapsulation=shadow","src/components/hero/hero.tsx"],"names":["heroCss","Hero","hostRef","_this","this","isLegacy","gridSizes","imgSrcSet","largeScreenBP","theme","level","handleGridChange","e","detail","HeroContent","hasIconBox","hasCtas","h","class","name","onNanoBpChange","xlCols","xlSize","gridStates","hasSecondaryContent","hasQuote","prototype","breadCrumbChange","breadCrumbs","filter","crumb","tagName","nextElementSibling","classList","contains","forEach","insertAdjacentHTML","iconBoxItemChange","iconBoxItems","item","remove","length","add","slotChangeObserver","mo","disconnect","MutationObserver","processSlottedContent","observe","host","childList","querySelector","Array","from","querySelectorAll","hasScrim","hasBg","imgSrc","hasBackBtn","connectedCallback","hasShadowDom","disconnectedCallback","componentDidLoad","componentWillLoad","render","rtl","dir","ownerDocument","Host","_a","join","hero","hero--light","hero--secondary","hero--iconbox","hero--rtl","hero--scrim","hero--legacy","hero--breadcrumb","hero--hasbg","hero--backbtn","hero--sub","lazy","background","srcSet","src"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n:host {\n /*\n @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n * @prop --theme-color: Text color. Default depends on theme;\n * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #{$color-lightblue};\n * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n /\n\n display: block;\n\n --nano-loader-base: #{$color-black};\n --nano-loader-tint: #{lighten($color-black, 20%)};\n --theme-color: #{$color-white};\n --theme-tint-color: #{$color-lightblue};\n --scrim-color: 0, 0, 0;\n --scrim-direction: 90deg;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 0.7;\n --padding: 0;\n --quote-size: 1.3rem;\n\n color: var(--theme-color);\n}\n\n:host(.is-xl) {\n --quote-size: 3rem;\n}\n\n:host([theme='light']) {\n --nano-loader-base: #{$color-white};\n --nano-loader-tint: #{lighten($color-white, 20%)};\n --theme-color: #{$color-black};\n --scrim-color: 255, 255, 255;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 1;\n --scrim-direction: 270deg;\n\n color: var(--theme-color);\n\n .hero__primary-content {\n --color: #{$color-black};\n }\n}\n\n.hero {\n position: relative;\n\n &--rtl {\n --scrim-direction: 270deg;\n }\n\n &--secondary:not(.hero--iconbox) {\n --scrim-direction: 0deg;\n }\n\n &__bg-wrap {\n overflow: hidden;\n }\n\n &__bg-slot {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n }\n\n &__ctas {\n @media (max-width: 52em) {\n display: none;\n }\n\n @media (max-width: 58em) {\n margin-bottom: -48px;\n }\n\n display: flex;\n justify-content: flex-end;\n padding: 32px 32px 0;\n margin-bottom: -64px;\n position: relative;\n z-index: 1;\n\n ::slotted(a.button[slot='secondary-ctas']),\n &::slotted(a.button[slot='secondary-ctas']) {\n padding: 0.25rem 0.5rem !important;\n font-size: 0.875rem !important;\n margin: 0 0.25rem !important;\n }\n }\n\n &__img {\n display: block;\n\n --padding: inherit;\n }\n\n &__breadcrumbs {\n display: none;\n margin: 20px 14px 0;\n line-height: 14px;\n\n .hero--breadcrumb & {\n display: block;\n }\n\n .is-xl & {\n margin: 0 50px;\n max-width: 50%;\n }\n\n .is-xxl & {\n margin: 0 83px;\n }\n\n ::slotted([slot='breadcrumb']),\n &::slotted([slot='breadcrumb']) {\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n font-weight: 600;\n font-stretch: 125%;\n display: inline-block;\n margin-bottom: 16px;\n position: relative;\n z-index: 2;\n\n .hero--hasbg & {\n text-shadow: 1px 1px rgb(0 0 0 / 15%);\n }\n }\n\n ::slotted(a[slot='breadcrumb']),\n &::slotted(a[slot='breadcrumb']) {\n color: var(--theme-tint-color) !important;\n cursor: pointer;\n }\n\n ::slotted(.slash[slot='breadcrumb']),\n &::slotted(.slash[slot='breadcrumb']) {\n color: var(--theme-color);\n position: relative;\n margin: 0 0.5rem;\n display: inline-block;\n }\n }\n\n &__scrim {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n z-index: 0;\n background:\n linear-gradient(\n var(--scrim-direction),\n rgba(var(--scrim-color), var(--scrim-opacity-from)) 0%,\n rgba(var(--scrim-color), var(--scrim-opacity-to)) 100%\n );\n\n .hero--scrim & {\n background: none;\n }\n }\n\n &__content {\n max-width: 1440px;\n\n --grid-row-gap: 0;\n\n margin: 0 auto;\n position: relative;\n\n &.is-xl {\n margin-top: 50px;\n max-width: 1540px;\n }\n\n &.is-xxl {\n margin-top: 83px;\n max-width: 1606px;\n }\n }\n\n &__primary {\n margin: 16px;\n\n .hero--breadcrumb & {\n margin: 0 16px;\n }\n\n .hero--backbtn & {\n margin-left: 0;\n }\n\n ::slotted(nano-icon-button[slot='back-btn']),\n &::slotted(nano-icon-button[slot='back-btn']) {\n font-size: 2rem;\n }\n\n .is-xl & {\n margin: 0 0 50px 50px;\n\n ::slotted(nano-icon-button[slot='back-btn']),\n &::slotted(nano-icon-button[slot='back-btn']) {\n @include margin(0, 0, 0, -3rem);\n }\n }\n\n .is-xxl & {\n margin: 0 0 83px 83px;\n }\n }\n\n &__primary-content {\n max-width: 45rem;\n\n --color: #fff;\n\n display: flex;\n\n .hero--backbtn & {\n > div {\n padding: 10px 0 0 0;\n }\n }\n\n ::slotted(h1[slot='primary-content']),\n &::slotted(h1[slot='primary-content']) {\n line-height: 26px !important;\n margin-top: 0 !important;\n margin-bottom: 18px !important;\n font-size: 2rem !important;\n }\n\n .is-xl & {\n ::slotted(h1[slot='primary-content']),\n &::slotted(h1[slot='primary-content']) {\n line-height: 31px !important;\n margin-bottom: 30px !important;\n }\n\n ::slotted(.button[slot='primary-content']),\n &::slotted(.button[slot='primary-content']) {\n margin-top: 20px !important;\n }\n }\n }\n\n &__secondary {\n display: none;\n height: 100%;\n padding: 0 14px 20px;\n\n .hero--secondary & {\n display: flex;\n align-items: center;\n }\n\n .is-xl & {\n padding: 0 50px 50px;\n justify-content: flex-end;\n }\n\n .is-xxl & {\n padding: 0 83px 83px;\n }\n }\n\n &__icon-box {\n background: rgba(0, 0, 0, 0.7);\n padding: 24px;\n width: 100%;\n margin-bottom: auto;\n display: flex;\n flex-direction: column;\n color: white;\n\n .is-xl & {\n max-width: 410px;\n flex: 0 1 410px;\n }\n\n // for silly IE\n &::slotted([slot='icon-box-item'] nano-icon) {\n color: var(--theme-tint-color);\n\n --nano-icon-size: 32px;\n --nano-icon-margin-end: 20px;\n }\n\n ::slotted([slot='icon-box-item']) {\n --nano-color-base: var(--theme-tint-color);\n --nano-icon-size: 32px;\n --nano-icon-margin-end: 20px;\n\n display: flex;\n align-items: center;\n font-size: 0.8125rem;\n margin-bottom: 20px;\n }\n\n ::slotted(.last[slot='icon-box-item']),\n &::slotted(.last[slot='icon-box-item']) {\n margin-bottom: 0;\n }\n }\n\n &__quote-content {\n margin-top: auto;\n text-align: center;\n width: 100%;\n\n .is-xl & {\n max-width: 500px;\n flex: 0 1 500px;\n text-align: initial;\n }\n }\n\n &__quote {\n &::before,\n &::after {\n content: '\"';\n font-size: var(--quote-size);\n font-weight: 700;\n font-style: italic;\n line-height: 0;\n color: #abb6b8;\n display: inline;\n position: relative;\n }\n\n ::slotted([slot='quote']),\n &::slotted([slot='quote']) {\n font-size: var(--quote-size);\n font-weight: 300;\n font-style: italic;\n display: inline;\n }\n }\n\n &__quote-author {\n text-align: right;\n text-align: end;\n font-size: 1rem;\n opacity: 0.8;\n }\n\n &--sub {\n .hero__content.is-xl {\n margin-top: 40px;\n\n .hero__primary {\n margin: 0 0 40px 50px;\n }\n\n .hero__secondary {\n padding: 0 50px 50px 40px;\n }\n\n ::slotted(.button[slot='primary-content']),\n &::slotted(.button[slot='primary-content']) {\n margin-top: 8px !important;\n }\n\n ::slotted(h1[slot='primary-content']),\n &::slotted(h1[slot='primary-content']) {\n margin-bottom: 18px !important;\n }\n }\n\n .hero__content.is-xxl {\n .hero__primary {\n margin: 0 0 40px 83px;\n }\n\n .hero__secondary {\n padding: 0 83px 83px 40px;\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n h,\n ComponentInterface,\n VNode,\n State,\n Element,\n Watch,\n Host,\n} from '@stencil/core';\nimport { hasShadowDom } from '../../utils';\n\n/\n Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.\n * @slot primary-content - title, leading paragraph and CTA\n * @slot breadcrumb - each individual bread crumb should be assigned seperately\n * @slot secondary-content - free form secondary content.\n * @slot icon-box - free form icon box container\n * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.\n * @slot secondary-ctas - CTAs. each individual button should be assigned seperately\n * @slot quote - quote content\n * @slot quote-author - quote author\n * @slot scrim - optional background overlay (e.g. faded colour or gradient)\n * @slot background - custom background. Only active when img-src is empty\n * @slot back-btn - a back button.\n /\n@Component({\n tag: 'nano-hero',\n styleUrl: 'hero.scss',\n shadow: true,\n})\nexport class Hero implements ComponentInterface {\n private mo?: MutationObserver;\n private isLegacy = false;\n\n @Element() host: HTMLNanoHeroElement;\n\n @State() gridSizes: string[] = [];\n @State() hasIconBox: boolean;\n @State() hasScrim: boolean;\n @State() hasSecondaryContent: boolean;\n @State() hasQuote: boolean;\n @State() hasBg: boolean;\n @State() hasBackBtn: boolean;\n @State() hasCtas: boolean;\n @State() breadCrumbs: Element[];\n @Watch('breadCrumbs')\n breadCrumbChange() {\n // safari doesn't support ::slotted()::after ... so this :/\n this.breadCrumbs\n .filter(\n (crumb) =>\n crumb.tagName === 'A' &&\n !crumb.nextElementSibling.classList.contains('slash')\n )\n .forEach((crumb) => {\n crumb.insertAdjacentHTML(\n 'afterend',\n '<span slot=\"breadcrumb\" class=\"slash\">/</span>'\n );\n });\n }\n @State() iconBoxItems: Element[];\n @Watch('iconBoxItems')\n iconBoxItemChange() {\n this.iconBoxItems.forEach((item) => item.classList.remove('last'));\n if (\n this.iconBoxItems[this.iconBoxItems.length - 1] &&\n this.iconBoxItems[this.iconBoxItems.length - 1].classList\n )\n this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');\n }\n\n /* src for backgronund image. For more control use the `background` slot instead. /\n @Prop() imgSrc?: string;\n\n /* Optional list string providing media sizes with corresponding image srcs.\n * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` /\n @Prop() imgSrcSet?: string = null;\n\n /* The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) /\n @Prop() largeScreenBP: number = 900;\n\n /* Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) /\n @Prop() theme: 'dark' \| 'light' = 'dark';\n\n /* Set the content structure level of the hero. Defaults to 'top' */\n @Prop() level: 'top' \| 'sub' = 'top';\n\n private slotChangeObserver() {\n if (this.mo) this.mo.disconnect();\n const mo = (this.mo = new MutationObserver(() =>\n this.processSlottedContent()\n ));\n mo.observe(this.host, { childList: true });\n }\n\n // Event handlers\n\n private processSlottedContent() {\n this.hasCtas = !!this.host.querySelector('[slot=\"secondary-ctas\"]');\n this.iconBoxItems = Array.from(\n this.host.querySelectorAll('[slot=\"icon-box-item\"]')\n );\n this.hasIconBox =\n !!this.host.querySelector('[slot=\"icon-box\"]') \|\|\n !!this.iconBoxItems.length;\n this.hasScrim = !!this.host.querySelector('[slot=\"scrim\"]');\n this.breadCrumbs = Array.from(\n this.host.querySelectorAll('[slot=\"breadcrumb\"]')\n );\n this.hasSecondaryContent =\n !!this.host.querySelector('[slot=\"icon-box\"]') \|\|\n !!this.host.querySelector('[slot=\"quote\"]') \|\|\n !!this.host.querySelector('[slot=\"icon-box-item\"]') \|\|\n !!this.host.querySelector('[slot=\"secondary-content\"]');\n this.hasBg =\n !!this.host.querySelector('[slot=\"background\"]') \|\| !!this.imgSrc;\n this.hasBackBtn = !!this.host.querySelector('[slot=\"back-btn\"]');\n this.hasQuote = !!this.host.querySelector('[slot=\"quote\"]');\n }\n\n private handleGridChange = (e: CustomEvent & { detail: string[] }) => {\n this.gridSizes = e.detail;\n };\n\n // Component lifecycle\n\n connectedCallback() {\n this.isLegacy = !hasShadowDom(this.host);\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n }\n\n componentWillLoad() {\n this.processSlottedContent();\n }\n\n private HeroContent = (): VNode[] => {\n return [\n !this.hasIconBox && this.hasCtas ? (\n <div class=\"hero__ctas\">\n <slot name=\"secondary-ctas\" />\n </div>\n ) : (\n ''\n ),\n <div class=\"hero__scrim\">\n <slot name=\"scrim\" />\n </div>,\n <nano-grid\n onNanoBpChange={this.handleGridChange}\n class=\"hero__content\"\n xlCols={2}\n xlSize={this.largeScreenBP}\n >\n <nano-grid-item gridStates=\"xl-col-span-2\">\n <div class=\"hero__breadcrumbs\">\n <slot name=\"breadcrumb\" />\n </div>\n </nano-grid-item>\n <nano-grid-item\n gridStates={\n this.hasSecondaryContent\n ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'\n : 'xl-col-span-2 xl-col-start-1 xl-row-start-2'\n }\n >\n <div class=\"hero__primary\">\n <div class=\"hero__primary-content\">\n <slot name=\"back-btn\" />\n <div>\n <slot name=\"primary-content\" />\n </div>\n </div>\n </div>\n </nano-grid-item>\n {this.hasSecondaryContent && (\n <nano-grid-item gridStates=\"xl-col-span-1 xl-col-start-2 xl-row-start-2\">\n <div class=\"hero__secondary\">\n <slot name=\"secondary-content\" />\n {this.hasIconBox && (\n <div class=\"hero__icon-box\">\n <slot name=\"icon-box\" />\n <slot name=\"icon-box-item\" />\n </div>\n )}\n {this.hasQuote && (\n <div class=\"hero__quote-content\">\n <span class=\"hero__quote\">\n <slot name=\"quote\" />\n </span>\n <div class=\"hero__quote-author\">\n <slot name=\"quote-author\" />\n </div>\n </div>\n )}\n </div>\n </nano-grid-item>\n )}\n </nano-grid>,\n ];\n };\n\n render() {\n const rtl =\n this.host.dir === 'rtl' \|\|\n (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <Host\n class={{\n [this.gridSizes.join(' ')]: true,\n }}\n >\n <div\n class={{\n hero: true,\n 'hero--light': this.theme === 'light',\n 'hero--secondary': this.hasSecondaryContent,\n 'hero--iconbox': this.hasIconBox,\n 'hero--rtl': rtl,\n 'hero--scrim': this.hasScrim,\n 'hero--legacy': this.isLegacy,\n 'hero--breadcrumb': !!this.breadCrumbs.length,\n 'hero--hasbg': this.hasBg,\n 'hero--backbtn': this.hasBackBtn,\n 'hero--sub': this.level === 'sub',\n }}\n >\n <div class=\"hero__bg-wrap\">\n {!!this.imgSrc && (\n <nano-img\n class=\"hero__img\"\n lazy={false}\n background\n srcSet={this.imgSrcSet}\n src={this.imgSrc}\n >\n <this.HeroContent />\n </nano-img>\n )}\n {!this.imgSrc && [\n <div class=\"hero__bg-slot\">\n <slot name=\"background\" />\n </div>,\n <this.HeroContent />,\n ]}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"sources":["src/components/hero/hero.scss?tag=nano-hero&encapsulation=shadow","src/components/hero/hero.tsx"],"names":["heroCss","Hero","hostRef","_this","this","isLegacy","gridSizes","imgSrcSet","largeScreenBP","theme","level","handleGridChange","e","detail","HeroContent","hasIconBox","hasCtas","h","class","name","onNanoBpChange","xlCols","xlSize","gridStates","hasSecondaryContent","hasQuote","prototype","breadCrumbChange","breadCrumbs","filter","crumb","tagName","nextElementSibling","classList","contains","forEach","insertAdjacentHTML","iconBoxItemChange","iconBoxItems","item","remove","length","add","slotChangeObserver","mo","disconnect","MutationObserver","processSlottedContent","observe","host","childList","querySelector","Array","from","querySelectorAll","hasScrim","hasBg","imgSrc","hasBackBtn","connectedCallback","hasShadowDom","disconnectedCallback","componentDidLoad","componentWillLoad","render","rtl","dir","ownerDocument","Host","_a","join","hero","hero--light","hero--secondary","hero--iconbox","hero--rtl","hero--scrim","hero--legacy","hero--breadcrumb","hero--hasbg","hero--backbtn","hero--sub","lazy","background","srcSet","src"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n:host {\n /*\n @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n * @prop --theme-color: Text color. Default depends on theme;\n * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #{map.get($colors, lightblue)};\n * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n /\n\n display: block;\n\n --nano-loader-base: #{map.get($colors, black)};\n --nano-loader-tint: #{lighten(map.get($colors, black), 20%)};\n --theme-color: #{map.get($colors, white)};\n --theme-tint-color: #{map.get($colors, lightblue)};\n --scrim-color: 0, 0, 0;\n --scrim-direction: 90deg;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 0.7;\n --padding: 0;\n --quote-size: 1.3rem;\n\n color: var(--theme-color);\n}\n\n:host(.is-xl) {\n --quote-size: 3rem;\n}\n\n:host([theme='light']) {\n --nano-loader-base: #{map.get($colors, white)};\n --nano-loader-tint: #{lighten(map.get($colors, white), 20%)};\n --theme-color: #{map.get($colors, black)};\n --scrim-color: 255, 255, 255;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 1;\n --scrim-direction: 270deg;\n\n color: var(--theme-color);\n\n .hero__primary-content {\n --color: #{map.get($colors, black)};\n }\n}\n\n.hero {\n position: relative;\n\n &--rtl {\n --scrim-direction: 270deg;\n }\n\n &--secondary:not(.hero--iconbox) {\n --scrim-direction: 0deg;\n }\n\n &__bg-wrap {\n overflow: hidden;\n }\n\n &__bg-slot {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n }\n\n &__ctas {\n @media (max-width: 52em) {\n display: none;\n }\n\n @media (max-width: 58em) {\n margin-bottom: -48px;\n }\n\n display: flex;\n justify-content: flex-end;\n padding: 32px 32px 0;\n margin-bottom: -64px;\n position: relative;\n z-index: 1;\n\n ::slotted(a.button[slot='secondary-ctas']),\n &::slotted(a.button[slot='secondary-ctas']) {\n padding: 0.25rem 0.5rem !important;\n font-size: 0.875rem !important;\n margin: 0 0.25rem !important;\n }\n }\n\n &__img {\n display: block;\n\n --padding: inherit;\n }\n\n &__breadcrumbs {\n display: none;\n margin: 20px 14px 0;\n line-height: 14px;\n\n .hero--breadcrumb & {\n display: block;\n }\n\n .is-xl & {\n margin: 0 50px;\n max-width: 50%;\n }\n\n .is-xxl & {\n margin: 0 83px;\n }\n\n ::slotted([slot='breadcrumb']),\n &::slotted([slot='breadcrumb']) {\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n font-weight: 600;\n font-stretch: 125%;\n display: inline-block;\n margin-bottom: 16px;\n position: relative;\n z-index: 2;\n\n .hero--hasbg & {\n text-shadow: 1px 1px rgb(0 0 0 / 15%);\n }\n }\n\n ::slotted(a[slot='breadcrumb']),\n &::slotted(a[slot='breadcrumb']) {\n color: var(--theme-tint-color) !important;\n cursor: pointer;\n }\n\n ::slotted(.slash[slot='breadcrumb']),\n &::slotted(.slash[slot='breadcrumb']) {\n color: var(--theme-color);\n position: relative;\n margin: 0 0.5rem;\n display: inline-block;\n }\n }\n\n &__scrim {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n z-index: 0;\n background:\n linear-gradient(\n var(--scrim-direction),\n rgba(var(--scrim-color), var(--scrim-opacity-from)) 0%,\n rgba(var(--scrim-color), var(--scrim-opacity-to)) 100%\n );\n\n .hero--scrim & {\n background: none;\n }\n }\n\n &__content {\n max-width: 1440px;\n\n --grid-row-gap: 0;\n\n margin: 0 auto;\n position: relative;\n\n &.is-xl {\n margin-top: 50px;\n max-width: 1540px;\n }\n\n &.is-xxl {\n margin-top: 83px;\n max-width: 1606px;\n }\n }\n\n &__primary {\n margin: 16px;\n\n .hero--breadcrumb & {\n margin: 0 16px;\n }\n\n .hero--backbtn & {\n margin-left: 0;\n }\n\n ::slotted(nano-icon-button[slot='back-btn']),\n &::slotted(nano-icon-button[slot='back-btn']) {\n font-size: 2rem;\n }\n\n .is-xl & {\n margin: 0 0 50px 50px;\n\n ::slotted(nano-icon-button[slot='back-btn']),\n &::slotted(nano-icon-button[slot='back-btn']) {\n @include margin(0, 0, 0, -3rem);\n }\n }\n\n .is-xxl & {\n margin: 0 0 83px 83px;\n }\n }\n\n &__primary-content {\n max-width: 45rem;\n\n --color: #fff;\n\n display: flex;\n\n .hero--backbtn & {\n > div {\n padding: 10px 0 0 0;\n }\n }\n\n ::slotted(h1[slot='primary-content']),\n &::slotted(h1[slot='primary-content']) {\n line-height: 26px !important;\n margin-top: 0 !important;\n margin-bottom: 18px !important;\n font-size: 2rem !important;\n }\n\n .is-xl & {\n ::slotted(h1[slot='primary-content']),\n &::slotted(h1[slot='primary-content']) {\n line-height: 31px !important;\n margin-bottom: 30px !important;\n }\n\n ::slotted(.button[slot='primary-content']),\n &::slotted(.button[slot='primary-content']) {\n margin-top: 20px !important;\n }\n }\n }\n\n &__secondary {\n display: none;\n height: 100%;\n padding: 0 14px 20px;\n\n .hero--secondary & {\n display: flex;\n align-items: center;\n }\n\n .is-xl & {\n padding: 0 50px 50px;\n justify-content: flex-end;\n }\n\n .is-xxl & {\n padding: 0 83px 83px;\n }\n }\n\n &__icon-box {\n background: rgba(0, 0, 0, 0.7);\n padding: 24px;\n width: 100%;\n margin-bottom: auto;\n display: flex;\n flex-direction: column;\n color: white;\n\n .is-xl & {\n max-width: 410px;\n flex: 0 1 410px;\n }\n\n // for silly IE\n &::slotted([slot='icon-box-item'] nano-icon) {\n color: var(--theme-tint-color);\n\n --nano-icon-size: 32px;\n --nano-icon-margin-end: 20px;\n }\n\n ::slotted([slot='icon-box-item']) {\n --nano-color-base: var(--theme-tint-color);\n --nano-icon-size: 32px;\n --nano-icon-margin-end: 20px;\n\n display: flex;\n align-items: center;\n font-size: 0.8125rem;\n margin-bottom: 20px;\n }\n\n ::slotted(.last[slot='icon-box-item']),\n &::slotted(.last[slot='icon-box-item']) {\n margin-bottom: 0;\n }\n }\n\n &__quote-content {\n margin-top: auto;\n text-align: center;\n width: 100%;\n\n .is-xl & {\n max-width: 500px;\n flex: 0 1 500px;\n text-align: initial;\n }\n }\n\n &__quote {\n &::before,\n &::after {\n content: '\"';\n font-size: var(--quote-size);\n font-weight: 700;\n font-style: italic;\n line-height: 0;\n color: #abb6b8;\n display: inline;\n position: relative;\n }\n\n ::slotted([slot='quote']),\n &::slotted([slot='quote']) {\n font-size: var(--quote-size);\n font-weight: 300;\n font-style: italic;\n display: inline;\n }\n }\n\n &__quote-author {\n text-align: right;\n text-align: end;\n font-size: 1rem;\n opacity: 0.8;\n }\n\n &--sub {\n .hero__content.is-xl {\n margin-top: 40px;\n\n .hero__primary {\n margin: 0 0 40px 50px;\n }\n\n .hero__secondary {\n padding: 0 50px 50px 40px;\n }\n\n ::slotted(.button[slot='primary-content']),\n &::slotted(.button[slot='primary-content']) {\n margin-top: 8px !important;\n }\n\n ::slotted(h1[slot='primary-content']),\n &::slotted(h1[slot='primary-content']) {\n margin-bottom: 18px !important;\n }\n }\n\n .hero__content.is-xxl {\n .hero__primary {\n margin: 0 0 40px 83px;\n }\n\n .hero__secondary {\n padding: 0 83px 83px 40px;\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n h,\n ComponentInterface,\n VNode,\n State,\n Element,\n Watch,\n Host,\n} from '@stencil/core';\nimport { hasShadowDom } from '../../utils';\n\n/\n Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.\n * @slot primary-content - title, leading paragraph and CTA\n * @slot breadcrumb - each individual bread crumb should be assigned seperately\n * @slot secondary-content - free form secondary content.\n * @slot icon-box - free form icon box container\n * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.\n * @slot secondary-ctas - CTAs. each individual button should be assigned seperately\n * @slot quote - quote content\n * @slot quote-author - quote author\n * @slot scrim - optional background overlay (e.g. faded colour or gradient)\n * @slot background - custom background. Only active when img-src is empty\n * @slot back-btn - a back button.\n /\n@Component({\n tag: 'nano-hero',\n styleUrl: 'hero.scss',\n shadow: true,\n})\nexport class Hero implements ComponentInterface {\n private mo?: MutationObserver;\n private isLegacy = false;\n\n @Element() host: HTMLNanoHeroElement;\n\n @State() gridSizes: string[] = [];\n @State() hasIconBox: boolean;\n @State() hasScrim: boolean;\n @State() hasSecondaryContent: boolean;\n @State() hasQuote: boolean;\n @State() hasBg: boolean;\n @State() hasBackBtn: boolean;\n @State() hasCtas: boolean;\n @State() breadCrumbs: Element[];\n @Watch('breadCrumbs')\n breadCrumbChange() {\n // safari doesn't support ::slotted()::after ... so this :/\n this.breadCrumbs\n .filter(\n (crumb) =>\n crumb.tagName === 'A' &&\n !crumb.nextElementSibling.classList.contains('slash')\n )\n .forEach((crumb) => {\n crumb.insertAdjacentHTML(\n 'afterend',\n '<span slot=\"breadcrumb\" class=\"slash\">/</span>'\n );\n });\n }\n @State() iconBoxItems: Element[];\n @Watch('iconBoxItems')\n iconBoxItemChange() {\n this.iconBoxItems.forEach((item) => item.classList.remove('last'));\n if (\n this.iconBoxItems[this.iconBoxItems.length - 1] &&\n this.iconBoxItems[this.iconBoxItems.length - 1].classList\n )\n this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');\n }\n\n /* src for backgronund image. For more control use the `background` slot instead. /\n @Prop() imgSrc?: string;\n\n /* Optional list string providing media sizes with corresponding image srcs.\n * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` /\n @Prop() imgSrcSet?: string = null;\n\n /* The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) /\n @Prop() largeScreenBP: number = 900;\n\n /* Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) /\n @Prop() theme: 'dark' \| 'light' = 'dark';\n\n /* Set the content structure level of the hero. Defaults to 'top' */\n @Prop() level: 'top' \| 'sub' = 'top';\n\n private slotChangeObserver() {\n if (this.mo) this.mo.disconnect();\n const mo = (this.mo = new MutationObserver(() =>\n this.processSlottedContent()\n ));\n mo.observe(this.host, { childList: true });\n }\n\n // Event handlers\n\n private processSlottedContent() {\n this.hasCtas = !!this.host.querySelector('[slot=\"secondary-ctas\"]');\n this.iconBoxItems = Array.from(\n this.host.querySelectorAll('[slot=\"icon-box-item\"]')\n );\n this.hasIconBox =\n !!this.host.querySelector('[slot=\"icon-box\"]') \|\|\n !!this.iconBoxItems.length;\n this.hasScrim = !!this.host.querySelector('[slot=\"scrim\"]');\n this.breadCrumbs = Array.from(\n this.host.querySelectorAll('[slot=\"breadcrumb\"]')\n );\n this.hasSecondaryContent =\n !!this.host.querySelector('[slot=\"icon-box\"]') \|\|\n !!this.host.querySelector('[slot=\"quote\"]') \|\|\n !!this.host.querySelector('[slot=\"icon-box-item\"]') \|\|\n !!this.host.querySelector('[slot=\"secondary-content\"]');\n this.hasBg =\n !!this.host.querySelector('[slot=\"background\"]') \|\| !!this.imgSrc;\n this.hasBackBtn = !!this.host.querySelector('[slot=\"back-btn\"]');\n this.hasQuote = !!this.host.querySelector('[slot=\"quote\"]');\n }\n\n private handleGridChange = (e: CustomEvent & { detail: string[] }) => {\n this.gridSizes = e.detail;\n };\n\n // Component lifecycle\n\n connectedCallback() {\n this.isLegacy = !hasShadowDom(this.host);\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n }\n\n componentWillLoad() {\n this.processSlottedContent();\n }\n\n private HeroContent = (): VNode[] => {\n return [\n !this.hasIconBox && this.hasCtas ? (\n <div class=\"hero__ctas\">\n <slot name=\"secondary-ctas\" />\n </div>\n ) : (\n ''\n ),\n <div class=\"hero__scrim\">\n <slot name=\"scrim\" />\n </div>,\n <nano-grid\n onNanoBpChange={this.handleGridChange}\n class=\"hero__content\"\n xlCols={2}\n xlSize={this.largeScreenBP}\n >\n <nano-grid-item gridStates=\"xl-col-span-2\">\n <div class=\"hero__breadcrumbs\">\n <slot name=\"breadcrumb\" />\n </div>\n </nano-grid-item>\n <nano-grid-item\n gridStates={\n this.hasSecondaryContent\n ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'\n : 'xl-col-span-2 xl-col-start-1 xl-row-start-2'\n }\n >\n <div class=\"hero__primary\">\n <div class=\"hero__primary-content\">\n <slot name=\"back-btn\" />\n <div>\n <slot name=\"primary-content\" />\n </div>\n </div>\n </div>\n </nano-grid-item>\n {this.hasSecondaryContent && (\n <nano-grid-item gridStates=\"xl-col-span-1 xl-col-start-2 xl-row-start-2\">\n <div class=\"hero__secondary\">\n <slot name=\"secondary-content\" />\n {this.hasIconBox && (\n <div class=\"hero__icon-box\">\n <slot name=\"icon-box\" />\n <slot name=\"icon-box-item\" />\n </div>\n )}\n {this.hasQuote && (\n <div class=\"hero__quote-content\">\n <span class=\"hero__quote\">\n <slot name=\"quote\" />\n </span>\n <div class=\"hero__quote-author\">\n <slot name=\"quote-author\" />\n </div>\n </div>\n )}\n </div>\n </nano-grid-item>\n )}\n </nano-grid>,\n ];\n };\n\n render() {\n const rtl =\n this.host.dir === 'rtl' \|\|\n (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <Host\n class={{\n [this.gridSizes.join(' ')]: true,\n }}\n >\n <div\n class={{\n hero: true,\n 'hero--light': this.theme === 'light',\n 'hero--secondary': this.hasSecondaryContent,\n 'hero--iconbox': this.hasIconBox,\n 'hero--rtl': rtl,\n 'hero--scrim': this.hasScrim,\n 'hero--legacy': this.isLegacy,\n 'hero--breadcrumb': !!this.breadCrumbs.length,\n 'hero--hasbg': this.hasBg,\n 'hero--backbtn': this.hasBackBtn,\n 'hero--sub': this.level === 'sub',\n }}\n >\n <div class=\"hero__bg-wrap\">\n {!!this.imgSrc && (\n <nano-img\n class=\"hero__img\"\n lazy={false}\n background\n srcSet={this.imgSrcSet}\n src={this.imgSrc}\n >\n <this.HeroContent />\n </nano-img>\n )}\n {!this.imgSrc && [\n <div class=\"hero__bg-slot\">\n <slot name=\"background\" />\n </div>,\n <this.HeroContent />,\n ]}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/esm-es5/nano-icon-button.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["src/components/icon-button/icon-button.scss?tag=nano-icon-button&encapsulation=scoped","src/components/icon-button/icon-button.tsx"],"names":["iconButtonCss","IconButton","hostRef","this","type","disabled","prototype","componentDidLoad","focusVisible","observe","button","connectedCallback","disconnectedCallback","unobserve","render","_this","TagType","href","undefined","h","part","ref","el","class","icon-button","icon-button--disabled","aria-label","label","name","value","target","iconName","src","iconSrc","aria-hidden"],"mappings":";;;oHAAA,IAAMA,cAAgB,qhECUTC,WAAU,WALvB,SAAAA,EAAAC,4BAe2BC,KAAAC,KAAsC,SAatCD,KAAAE,SAAW,MAUpCJ,EAAAK,UAAAC,iBAAA,WACEC,aAAaC,QAAQN,KAAKO,SAG5BT,EAAAK,UAAAK,kBAAA,WACE,GAAIR,KAAKO,OAAQF,aAAaC,QAAQN,KAAKO,SAG7CT,EAAAK,UAAAM,qBAAA,WACEJ,aAAaK,UAAUV,KAAKO,SAG9BT,EAAAK,UAAAQ,OAAA,WAAA,IAAAC,EAAAZ,KACE,IAAMa,EAAUb,KAAKc,OAASC,UAAY,SAAY,IAEtD,OACEC,EAACH,EAAO,CACNI,KAAK,OACLC,IAAK,SAACC,GAAE,OAAMP,EAAKL,OAASY,GAC5BC,MAAO,CACLC,cAAe,KACfC,wBAAyBtB,KAAKE,UAC/BqB,aACWvB,KAAKwB,MACjBC,KAAMzB,KAAKyB,KACXC,MAAO1B,KAAK0B,MACZZ,KAAMd,KAAKc,MAAQC,UACnBY,OAAQ3B,KAAKc,MAAQd,KAAK2B,OAAS3B,KAAK2B,OAASZ,UACjDd,MAAOD,KAAKc,MAAQd,KAAKC,KAAOD,KAAKC,KAAOc,WAE5CC,EAAA,YAAA,CAAWS,KAAMzB,KAAK4B,SAAUC,IAAK7B,KAAK8B,QAAOC,cAAc,oBA/DhD","sourcesContent":["@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n /*\n @prop --border-radius: defaults to #{$border-radius-medium};\n * @prop --border-radius: defaults to #{$border-radius-medium};\n * @prop --color: defaults to #{$~~color-~~palegrey};\n * @prop --active-color: defaults to #{$~~color-~~darkblue--faded};\n * @prop --hover-color: defaults to #{$~~color-~~blue};\n * @prop --background: defaults to transparent;\n * @prop --padding: defaults to #{$spacing-small};\n /\n display: inline-block;\n\n --border-radius: #{$border-radius-medium};\n --active-color: #{$~~color-~~darkblue--faded};\n --hover-color: #{$~~color-~~blue};\n --nano-color-base: var(--color, #{$~~color-~~mediumgrey});\n --background: transparent;\n --padding: #{$spacing-small};\n}\n\n.icon-button {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n border: none;\n border-radius: var(--border-radius);\n background: var(--background);\n font-size: inherit;\n color: var(--color);\n padding: var(--padding);\n cursor: pointer;\n appearance: none;\n -webkit-appearance: none;\n transition: box-shadow #{$transition-xfast} ease-in-out;\n\n &:hover:not(.icon-button--disabled),\n &:focus:not(.icon-button--disabled) {\n color: var(--hover-color);\n\n --nano-color-base: var(--hover-color);\n }\n\n &:active:not(.icon-button--disabled) {\n color: var(--active-color);\n\n --nano-color-base: var(--active-color);\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.icon-button--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.focus-visible.icon-button:focus {\n box-shadow: #{$control-focus-style};\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/* Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars. /\n\n@Component({\n tag: 'nano-icon-button',\n styleUrl: 'icon-button.scss',\n scoped: true,\n})\nexport class IconButton implements ComponentInterface {\n private button: HTMLButtonElement;\n\n /* The name of the icon to draw. /\n @Prop() iconName?: string;\n\n /* An external URL of an SVG file. /\n @Prop() iconSrc?: string;\n\n /* The default behavior of the button. /\n @Prop({ reflect: true }) type: 'submit' \| 'reset' \| 'button' = 'button';\n\n /* The name of the button, submitted as a pair with the button’s value as part of the form data. /\n @Prop({ reflect: true }) name?: string;\n\n /* Defines the value associated with the button’s name when it’s submitted with the form data. /\n @Prop({ reflect: true }) value?: string;\n\n /* A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n * always include a label that describes what the icon button does. /\n @Prop() label!: string;\n\n /* Set to true to disable the button. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered. /\n @Prop() href: string \| undefined;\n\n /* Specifies where to display the linked URL. Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`. */\n @Prop() target: string \| undefined;\n\n componentDidLoad() {\n focusVisible.observe(this.button);\n }\n\n connectedCallback() {\n if (this.button) focusVisible.observe(this.button);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.button);\n }\n\n render() {\n const TagType = this.href === undefined ? 'button' : ('a' as any);\n\n return (\n <TagType\n part=\"base\"\n ref={(el) => (this.button = el)}\n class={{\n 'icon-button': true,\n 'icon-button--disabled': this.disabled,\n }}\n aria-label={this.label}\n name={this.name}\n value={this.value}\n href={this.href \|\| undefined}\n target={this.href && this.target ? this.target : undefined}\n type={!this.href && this.type ? this.type : undefined}\n >\n <nano-icon name={this.iconName} src={this.iconSrc} aria-hidden=\"true\" />\n </TagType>\n );\n }\n}\n"]}
1	+ {"version":3,"sources":["src/components/icon-button/icon-button.scss?tag=nano-icon-button&encapsulation=scoped","src/components/icon-button/icon-button.tsx"],"names":["iconButtonCss","IconButton","hostRef","this","type","disabled","prototype","componentDidLoad","focusVisible","observe","button","connectedCallback","disconnectedCallback","unobserve","render","_this","TagType","href","undefined","h","part","ref","el","class","icon-button","icon-button--disabled","aria-label","label","name","value","target","iconName","src","iconSrc","aria-hidden"],"mappings":";;;oHAAA,IAAMA,cAAgB,qhECUTC,WAAU,WALvB,SAAAA,EAAAC,4BAe2BC,KAAAC,KAAsC,SAatCD,KAAAE,SAAW,MAUpCJ,EAAAK,UAAAC,iBAAA,WACEC,aAAaC,QAAQN,KAAKO,SAG5BT,EAAAK,UAAAK,kBAAA,WACE,GAAIR,KAAKO,OAAQF,aAAaC,QAAQN,KAAKO,SAG7CT,EAAAK,UAAAM,qBAAA,WACEJ,aAAaK,UAAUV,KAAKO,SAG9BT,EAAAK,UAAAQ,OAAA,WAAA,IAAAC,EAAAZ,KACE,IAAMa,EAAUb,KAAKc,OAASC,UAAY,SAAY,IAEtD,OACEC,EAACH,EAAO,CACNI,KAAK,OACLC,IAAK,SAACC,GAAE,OAAMP,EAAKL,OAASY,GAC5BC,MAAO,CACLC,cAAe,KACfC,wBAAyBtB,KAAKE,UAC/BqB,aACWvB,KAAKwB,MACjBC,KAAMzB,KAAKyB,KACXC,MAAO1B,KAAK0B,MACZZ,KAAMd,KAAKc,MAAQC,UACnBY,OAAQ3B,KAAKc,MAAQd,KAAK2B,OAAS3B,KAAK2B,OAASZ,UACjDd,MAAOD,KAAKc,MAAQd,KAAKC,KAAOD,KAAKC,KAAOc,WAE5CC,EAAA,YAAA,CAAWS,KAAMzB,KAAK4B,SAAUC,IAAK7B,KAAK8B,QAAOC,cAAc,oBA/DhD","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n /*\n @prop --border-radius: defaults to #{$border-radius-medium};\n * @prop --border-radius: defaults to #{$border-radius-medium};\n * @prop --color: defaults to #{map.get($colors, palegrey)};\n * @prop --active-color: defaults to #{map.get($colors, darkblue--faded)};\n * @prop --hover-color: defaults to #{map.get($colors, blue)};\n * @prop --background: defaults to transparent;\n * @prop --padding: defaults to #{$spacing-small};\n /\n display: inline-block;\n\n --border-radius: #{$border-radius-medium};\n --active-color: #{map.get($colors, darkblue--faded)};\n --hover-color: #{map.get($colors, blue)};\n --nano-color-base: var(--color, #{map.get($colors, mediumgrey)});\n --background: transparent;\n --padding: #{$spacing-small};\n}\n\n.icon-button {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n border: none;\n border-radius: var(--border-radius);\n background: var(--background);\n font-size: inherit;\n color: var(--color);\n padding: var(--padding);\n cursor: pointer;\n appearance: none;\n -webkit-appearance: none;\n transition: box-shadow #{$transition-xfast} ease-in-out;\n\n &:hover:not(.icon-button--disabled),\n &:focus:not(.icon-button--disabled) {\n color: var(--hover-color);\n\n --nano-color-base: var(--hover-color);\n }\n\n &:active:not(.icon-button--disabled) {\n color: var(--active-color);\n\n --nano-color-base: var(--active-color);\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.icon-button--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.focus-visible.icon-button:focus {\n box-shadow: #{$control-focus-style};\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/* Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars. /\n\n@Component({\n tag: 'nano-icon-button',\n styleUrl: 'icon-button.scss',\n scoped: true,\n})\nexport class IconButton implements ComponentInterface {\n private button: HTMLButtonElement;\n\n /* The name of the icon to draw. /\n @Prop() iconName?: string;\n\n /* An external URL of an SVG file. /\n @Prop() iconSrc?: string;\n\n /* The default behavior of the button. /\n @Prop({ reflect: true }) type: 'submit' \| 'reset' \| 'button' = 'button';\n\n /* The name of the button, submitted as a pair with the button’s value as part of the form data. /\n @Prop({ reflect: true }) name?: string;\n\n /* Defines the value associated with the button’s name when it’s submitted with the form data. /\n @Prop({ reflect: true }) value?: string;\n\n /* A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n * always include a label that describes what the icon button does. /\n @Prop() label!: string;\n\n /* Set to true to disable the button. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered. /\n @Prop() href: string \| undefined;\n\n /* Specifies where to display the linked URL. Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`. */\n @Prop() target: string \| undefined;\n\n componentDidLoad() {\n focusVisible.observe(this.button);\n }\n\n connectedCallback() {\n if (this.button) focusVisible.observe(this.button);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.button);\n }\n\n render() {\n const TagType = this.href === undefined ? 'button' : ('a' as any);\n\n return (\n <TagType\n part=\"base\"\n ref={(el) => (this.button = el)}\n class={{\n 'icon-button': true,\n 'icon-button--disabled': this.disabled,\n }}\n aria-label={this.label}\n name={this.name}\n value={this.value}\n href={this.href \|\| undefined}\n target={this.href && this.target ? this.target : undefined}\n type={!this.href && this.type ? this.type : undefined}\n >\n <nano-icon name={this.iconName} src={this.iconSrc} aria-hidden=\"true\" />\n </TagType>\n );\n }\n}\n"]}

package/dist/esm-es5/nano-menu-drawer.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["src/components/menu-drawer/menu-drawer.scss?tag=nano-menu-drawer&encapsulation=shadow","src/components/menu-drawer/menu-drawer.tsx"],"names":["menuDrawerCss","CANSHADOW","document","head","attachShadow","MenuDrawer","hostRef","_this","this","children","currHeight","window","innerHeight","reset","widthOk","heightOk","isLoading","hide","open","saveState","hideWidth","hideHeight","onWindowResize","innerWidth","vh","el","style","setProperty","moveItemsToDrawer","toggle","e","preventDefault","onToggleKeyDown","ev","key","prototype","cancelNavItemEvents","detail","secondaryMenu","stopPropagation","openChange","localStorage","setItem","toString","containerDiv","writeTask","width","contentDiv","scrollWidth","widthChange","moveItemsToGlobalNav","hideHeightChange","io","attachIO","disconnect","undefined","currNavItems","querySelectorAll","forEach","element","push","slot","getAttribute","setAttribute","classList","add","globalNav","appendChild","length","child","removeAttribute","remove","IntersectionObserver","data","intersectionRatio","threshold","observe","measureEle","handleGlobalNavReady","target","tagName","setTimeout","componentWillLoad","closestElement","localState","getItem","componentDidLoad","addEventListener","disconnectedCallback","removeEventListener","debounceResize","render","h","Host","class","legacy","loading","has-global-nav","dir","ownerDocument","ref","div","onMouseDown","onKeyDown","name","aria-label"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n\n:host(.legacy) {\n ::slotted(),\n {\n --global-nav-height: 61px;\n --padding-top: 13px;\n --padding-end: 13px;\n --padding-bottom: 13px;\n --padding-start: 13px;\n --secondary-padding-end: 13px;\n --secondary-padding-bottom: 13px;\n --secondary-padding-start: 13px;\n --secondary-padding-top: 61px;\n --icon-size: 19px;\n --font-size: 11px;\n --bg-color: #001a21;\n --bg-color-hover: rgba(28, 62, 72, 0.8);\n --bg-color-selected: #274048;\n --bg-color-open: #274048;\n --bg-color-focus: rgba(28, 62, 72, 0.8);\n --focus-outline: none;\n --content-color: #{$color-white};\n --secondary-bg-color: rgb(28, 62, 72);\n }\n}\n\n:host {\n --padding-top: 13px;\n --padding-end: 12px;\n --padding-bottom: 13px;\n --padding-start: 12px;\n --icon-size: 19px;\n --font-size: 11px;\n --global-nav-height: 61px;\n --bg-color: #001a21;\n --bg-color-hover: rgba(28, 62, 72, 0.8);\n --bg-color-selected: #274048;\n --bg-color-focus: rgba(28, 62, 72, 0.8);\n --focus-outline: none;\n --content-color: #{$color-white};\n --secondary-bg-color: rgb(28, 62, 72);\n\n @include text-inherit();\n\n display: block;\n z-index: 1;\n background: var(--bg-color);\n\n ::slotted(nano-nav-item) {\n --secondary-padding-top: var(--global-nav-height);\n --nano-icon-size: var(--icon-size);\n\n color: var(--content-color);\n font-size: var(--font-size);\n // font-weight: bold;\n text-decoration: none;\n box-sizing: border-box;\n }\n\n ,\n ::before,\n ::after {\n box-sizing: border-box;\n }\n}\n\n:host(.hide) {\n display: none;\n}\n\n:host(.has-global-nav) {\n .content-wrap {\n padding-top: var(--global-nav-height);\n\n @at-root {\n @supports ((position: sticky)) {\n & {\n margin-top: calc(var(--global-nav-height) -1);\n }\n }\n }\n }\n}\n\n.container {\n right: auto;\n flex: 0 0 calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n background: var(--bg-color);\n color: var(--content-color);\n z-index: 1;\n width: calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n height: 100%;\n}\n\n:host(.open) {\n .container {\n width: auto;\n }\n}\n\n:host(:not(.loading)) {\n .container {\n transition: width 0.3s ease;\n }\n}\n\n.content-wrap {\n left: 0;\n top: 0;\n width: inherit;\n max-width: inherit;\n background: var(--bg-color);\n color: $color-white;\n position: fixed;\n position: sticky;\n font-size: var(--icon-size);\n line-height: 1;\n display: flex;\n min-height: calc(100vh - 61px);\n min-height: calc((var(--vh, 1vh) * 100) - 61px);\n z-index: 1;\n\n @include rtl-host {\n right: 0;\n left: auto;\n }\n}\n\n.content {\n width: auto;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n background: var(--bg-color);\n flex: 1;\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n background: var(--bg-color);\n z-index: -1;\n height: 100vh;\n }\n}\n\n.collapse-btn {\n background: var(--bg-color-selected);\n border: none;\n color: inherit;\n font-size: var(--icon-size);\n margin:\n var(--padding-top) auto var(--padding-bottom)\n calc(var(--padding-start) / 2);\n border-radius: 4px;\n padding: 6px 5px;\n display: flex;\n align-content: center;\n width: 30px;\n flex: 0 0 auto;\n\n nano-icon {\n font-size: var(--icon-size);\n transition: 0.2s transform ease-in-out;\n transform: translateZ(0) rotate(0deg);\n\n :host(.open) & {\n transform: translateZ(0) rotate(180deg);\n }\n }\n}\n\n.foot {\n margin-top: auto;\n}\n\n.measure-ele {\n height: 1px;\n}\n","import {\n Component,\n h,\n Host,\n Prop,\n writeTask,\n State,\n Element,\n Watch,\n Listen,\n Build,\n} from '@stencil/core';\nimport { closestElement } from '../../utils';\nimport { NavItemEventDetail } from '../../interface';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\n/*\n Menu drawer - digital specific navigation strip designed to be open (default) or closed.\n * Shows menu item logos only on minimised, expands to show entire menu item.\n * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.\n * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.\n * @slot foot - nav items to be placed at the bottom of the drawer\n * @slot - default slot for nav items\n /\n@Component({\n tag: 'nano-menu-drawer',\n styleUrl: 'menu-drawer.scss',\n shadow: true,\n})\nexport class MenuDrawer {\n private containerDiv: HTMLDivElement;\n private contentDiv: HTMLElement;\n private measureEle: HTMLElement;\n private debounceResize: () => {};\n private globalNav: HTMLNanoGlobalNavElement;\n private children: Array<{ slot: string; element: HTMLNanoNavItemElement }> =\n [];\n private io: IntersectionObserver;\n private currHeight: number = window.innerHeight;\n\n @Element() private el: HTMLNanoMenuDrawerElement;\n\n @State() reset: boolean = false;\n @State() widthOk: boolean = true;\n @State() heightOk: boolean = true;\n @State() isLoading: boolean = true;\n @State() hide: boolean = false;\n\n /\n Set the initial menu drawer open or closed\n /\n @Prop() open: boolean = true;\n\n /\n Save open state to localStorage\n /\n @Prop() saveState: boolean = true;\n\n /\n Screen width to hide the menu drawer and move the items into the nano-global-nav\n /\n @Prop() hideWidth: number = 576;\n\n /\n Should element hide and move items into the nano-global-nav when items are cut off\n * (this will only work when nano-menu-drawer is displayed at full screen)\n /\n @Prop() hideHeight: boolean = true;\n\n @Listen('nanoOpen')\n @Listen('nanoClose')\n cancelNavItemEvents(ev: CustomEvent) {\n if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n ev.stopPropagation();\n }\n\n @Watch('open')\n openChange() {\n if (this.saveState)\n localStorage.setItem('nanoMenuDrawerOpen', this.open.toString());\n if (this.containerDiv) {\n if (this.open)\n writeTask(\n () =>\n (this.containerDiv.style.width = this.contentDiv.scrollWidth + 'px')\n );\n else writeTask(() => (this.containerDiv.style.width = null));\n }\n }\n\n @Watch('widthOk')\n widthChange() {\n if (this.widthOk) this.moveItemsToDrawer();\n else this.moveItemsToGlobalNav();\n }\n\n @Watch('hideHeight')\n hideHeightChange() {\n if (this.hideHeight && !this.io) this.attachIO();\n else if (!this.hideHeight && this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n private moveItemsToGlobalNav() {\n let currNavItems = this.el.querySelectorAll('nano-nav-item');\n // dimensions not cool - move items out of element and into global nav\n currNavItems.forEach((element) => {\n this.children.push({\n slot: element.getAttribute('slot'),\n element: element,\n });\n element.setAttribute('slot', 'overflow');\n element.classList.add('nano-global-nav-menu');\n this.globalNav.appendChild(element);\n });\n this.hide = true;\n }\n\n private moveItemsToDrawer() {\n if (!this.children \|\| !this.children.length) return;\n\n this.children.forEach((child) => {\n child.element.removeAttribute('slot');\n child.element.classList.remove('nano-global-nav-menu');\n if (child.slot && child.slot.length)\n child.element.setAttribute('slot', child.slot);\n this.el.appendChild(child.element);\n });\n this.children = [];\n this.hide = false;\n if (!this.io) this.attachIO();\n }\n\n private onWindowResize = () => {\n if (window.innerWidth > this.hideWidth) this.widthOk = true;\n else this.widthOk = false;\n\n let vh = window.innerHeight 0.01;\n this.el.style.setProperty('--vh', `${vh}px`);\n\n if (\n window.innerHeight > this.currHeight &&\n this.widthOk &&\n !this.heightOk\n ) {\n this.moveItemsToDrawer();\n }\n this.currHeight = window.innerHeight;\n };\n\n private toggle = (e: MouseEvent) => {\n e.preventDefault();\n this.open = !this.open;\n };\n\n private onToggleKeyDown = (ev: KeyboardEvent) => {\n switch (ev.key) {\n case 'Enter':\n case ' ':\n this.open = !this.open;\n break;\n }\n };\n\n private attachIO() {\n if (!this.hideHeight) return;\n const io: IntersectionObserver = (this.io = new (\n window as any\n ).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n this.heightOk = data[0].intersectionRatio !== 0;\n if (!this.heightOk) {\n this.moveItemsToGlobalNav();\n this.io.disconnect();\n this.io = undefined;\n }\n },\n { threshold: 1 }\n ));\n io.observe(this.measureEle);\n }\n\n @Listen('nanoIsReady', { target: 'body' })\n handleGlobalNavReady(e: CustomEvent & { target: HTMLNanoGlobalNavElement }) {\n if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n\n setTimeout(() => {\n this.attachIO();\n this.openChange();\n this.onWindowResize();\n this.isLoading = false;\n }, 500);\n }\n\n componentWillLoad() {\n this.globalNav = closestElement(\n 'nano-global-nav',\n this.el\n ) as HTMLNanoGlobalNavElement;\n\n this.widthOk = window.innerWidth > this.hideWidth;\n this.currHeight = window.innerHeight;\n\n if (this.saveState) {\n let localState = localStorage.getItem('nanoMenuDrawerOpen');\n this.open = localState ? localState === 'true' : this.open;\n }\n }\n\n componentDidLoad() {\n if (Build.isBrowser) {\n window.addEventListener('resize', this.onWindowResize);\n }\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.debounceResize);\n if (this.io) {\n this.io.disconnect();\n this.io = null;\n }\n }\n\n render() {\n return (\n <Host\n class={{\n open: this.open,\n hide: this.hide,\n legacy: !CANSHADOW,\n loading: this.isLoading,\n 'has-global-nav': !!this.globalNav,\n }}\n dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n >\n <div ref={(div) => (this.containerDiv = div)} class=\"container\">\n <div class=\"content-wrap\">\n <nav ref={(div) => (this.contentDiv = div)} class=\"content\">\n <button\n onMouseDown={this.toggle}\n onKeyDown={this.onToggleKeyDown}\n class=\"collapse-btn\"\n >\n <nano-icon\n name=\"light/arrow-alt-to-right\"\n aria-label=\"collapse / expand\"\n ></nano-icon>\n </button>\n <slot />\n <div class=\"foot\">\n <div\n class=\"measure-ele\"\n ref={(div) => (this.measureEle = div)}\n ></div>\n <slot name=\"foot\" />\n </div>\n </nav>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"sources":["src/components/menu-drawer/menu-drawer.scss?tag=nano-menu-drawer&encapsulation=shadow","src/components/menu-drawer/menu-drawer.tsx"],"names":["menuDrawerCss","CANSHADOW","document","head","attachShadow","MenuDrawer","hostRef","_this","this","children","currHeight","window","innerHeight","reset","widthOk","heightOk","isLoading","hide","open","saveState","hideWidth","hideHeight","onWindowResize","innerWidth","vh","el","style","setProperty","moveItemsToDrawer","toggle","e","preventDefault","onToggleKeyDown","ev","key","prototype","cancelNavItemEvents","detail","secondaryMenu","stopPropagation","openChange","localStorage","setItem","toString","containerDiv","writeTask","width","contentDiv","scrollWidth","widthChange","moveItemsToGlobalNav","hideHeightChange","io","attachIO","disconnect","undefined","currNavItems","querySelectorAll","forEach","element","push","slot","getAttribute","setAttribute","classList","add","globalNav","appendChild","length","child","removeAttribute","remove","IntersectionObserver","data","intersectionRatio","threshold","observe","measureEle","handleGlobalNavReady","target","tagName","setTimeout","componentWillLoad","closestElement","localState","getItem","componentDidLoad","addEventListener","disconnectedCallback","removeEventListener","debounceResize","render","h","Host","class","legacy","loading","has-global-nav","dir","ownerDocument","ref","div","onMouseDown","onKeyDown","name","aria-label"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n\n:host(.legacy) {\n ::slotted(),\n {\n --global-nav-height: 61px;\n --padding-top: 13px;\n --padding-end: 13px;\n --padding-bottom: 13px;\n --padding-start: 13px;\n --secondary-padding-end: 13px;\n --secondary-padding-bottom: 13px;\n --secondary-padding-start: 13px;\n --secondary-padding-top: 61px;\n --icon-size: 19px;\n --font-size: 11px;\n --bg-color: #001a21;\n --bg-color-hover: rgba(28, 62, 72, 0.8);\n --bg-color-selected: #274048;\n --bg-color-open: #274048;\n --bg-color-focus: rgba(28, 62, 72, 0.8);\n --focus-outline: none;\n --content-color: #{map.get($colors, white)};\n --secondary-bg-color: rgb(28, 62, 72);\n }\n}\n\n:host {\n --padding-top: 13px;\n --padding-end: 12px;\n --padding-bottom: 13px;\n --padding-start: 12px;\n --icon-size: 19px;\n --font-size: 11px;\n --global-nav-height: 61px;\n --bg-color: #001a21;\n --bg-color-hover: rgba(28, 62, 72, 0.8);\n --bg-color-selected: #274048;\n --bg-color-focus: rgba(28, 62, 72, 0.8);\n --focus-outline: none;\n --content-color: #{map.get($colors, white)};\n --secondary-bg-color: rgb(28, 62, 72);\n\n @include text-inherit();\n\n display: block;\n z-index: 1;\n background: var(--bg-color);\n\n ::slotted(nano-nav-item) {\n --secondary-padding-top: var(--global-nav-height);\n --nano-icon-size: var(--icon-size);\n\n color: var(--content-color);\n font-size: var(--font-size);\n // font-weight: bold;\n text-decoration: none;\n box-sizing: border-box;\n }\n\n ,\n ::before,\n ::after {\n box-sizing: border-box;\n }\n}\n\n:host(.hide) {\n display: none;\n}\n\n:host(.has-global-nav) {\n .content-wrap {\n padding-top: var(--global-nav-height);\n\n @at-root {\n @supports ((position: sticky)) {\n & {\n margin-top: calc(var(--global-nav-height) -1);\n }\n }\n }\n }\n}\n\n.container {\n right: auto;\n flex: 0 0 calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n background: var(--bg-color);\n color: var(--content-color);\n z-index: 1;\n width: calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n height: 100%;\n}\n\n:host(.open) {\n .container {\n width: auto;\n }\n}\n\n:host(:not(.loading)) {\n .container {\n transition: width 0.3s ease;\n }\n}\n\n.content-wrap {\n left: 0;\n top: 0;\n width: inherit;\n max-width: inherit;\n background: var(--bg-color);\n color: map.get($colors, white);\n position: fixed;\n position: sticky;\n font-size: var(--icon-size);\n line-height: 1;\n display: flex;\n min-height: calc(100vh - 61px);\n min-height: calc((var(--vh, 1vh) * 100) - 61px);\n z-index: 1;\n\n @include rtl-host {\n right: 0;\n left: auto;\n }\n}\n\n.content {\n width: auto;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n background: var(--bg-color);\n flex: 1;\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n background: var(--bg-color);\n z-index: -1;\n height: 100vh;\n }\n}\n\n.collapse-btn {\n background: var(--bg-color-selected);\n border: none;\n color: inherit;\n font-size: var(--icon-size);\n margin:\n var(--padding-top) auto var(--padding-bottom)\n calc(var(--padding-start) / 2);\n border-radius: 4px;\n padding: 6px 5px;\n display: flex;\n align-content: center;\n width: 30px;\n flex: 0 0 auto;\n\n nano-icon {\n font-size: var(--icon-size);\n transition: 0.2s transform ease-in-out;\n transform: translateZ(0) rotate(0deg);\n\n :host(.open) & {\n transform: translateZ(0) rotate(180deg);\n }\n }\n}\n\n.foot {\n margin-top: auto;\n}\n\n.measure-ele {\n height: 1px;\n}\n","import {\n Component,\n h,\n Host,\n Prop,\n writeTask,\n State,\n Element,\n Watch,\n Listen,\n Build,\n} from '@stencil/core';\nimport { closestElement } from '../../utils';\nimport { NavItemEventDetail } from '../../interface';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\n/*\n Menu drawer - digital specific navigation strip designed to be open (default) or closed.\n * Shows menu item logos only on minimised, expands to show entire menu item.\n * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.\n * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.\n * @slot foot - nav items to be placed at the bottom of the drawer\n * @slot - default slot for nav items\n /\n@Component({\n tag: 'nano-menu-drawer',\n styleUrl: 'menu-drawer.scss',\n shadow: true,\n})\nexport class MenuDrawer {\n private containerDiv: HTMLDivElement;\n private contentDiv: HTMLElement;\n private measureEle: HTMLElement;\n private debounceResize: () => {};\n private globalNav: HTMLNanoGlobalNavElement;\n private children: Array<{ slot: string; element: HTMLNanoNavItemElement }> =\n [];\n private io: IntersectionObserver;\n private currHeight: number = window.innerHeight;\n\n @Element() private el: HTMLNanoMenuDrawerElement;\n\n @State() reset: boolean = false;\n @State() widthOk: boolean = true;\n @State() heightOk: boolean = true;\n @State() isLoading: boolean = true;\n @State() hide: boolean = false;\n\n /\n Set the initial menu drawer open or closed\n /\n @Prop() open: boolean = true;\n\n /\n Save open state to localStorage\n /\n @Prop() saveState: boolean = true;\n\n /\n Screen width to hide the menu drawer and move the items into the nano-global-nav\n /\n @Prop() hideWidth: number = 576;\n\n /\n Should element hide and move items into the nano-global-nav when items are cut off\n * (this will only work when nano-menu-drawer is displayed at full screen)\n /\n @Prop() hideHeight: boolean = true;\n\n @Listen('nanoOpen')\n @Listen('nanoClose')\n cancelNavItemEvents(ev: CustomEvent) {\n if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n ev.stopPropagation();\n }\n\n @Watch('open')\n openChange() {\n if (this.saveState)\n localStorage.setItem('nanoMenuDrawerOpen', this.open.toString());\n if (this.containerDiv) {\n if (this.open)\n writeTask(\n () =>\n (this.containerDiv.style.width = this.contentDiv.scrollWidth + 'px')\n );\n else writeTask(() => (this.containerDiv.style.width = null));\n }\n }\n\n @Watch('widthOk')\n widthChange() {\n if (this.widthOk) this.moveItemsToDrawer();\n else this.moveItemsToGlobalNav();\n }\n\n @Watch('hideHeight')\n hideHeightChange() {\n if (this.hideHeight && !this.io) this.attachIO();\n else if (!this.hideHeight && this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n private moveItemsToGlobalNav() {\n let currNavItems = this.el.querySelectorAll('nano-nav-item');\n // dimensions not cool - move items out of element and into global nav\n currNavItems.forEach((element) => {\n this.children.push({\n slot: element.getAttribute('slot'),\n element: element,\n });\n element.setAttribute('slot', 'overflow');\n element.classList.add('nano-global-nav-menu');\n this.globalNav.appendChild(element);\n });\n this.hide = true;\n }\n\n private moveItemsToDrawer() {\n if (!this.children \|\| !this.children.length) return;\n\n this.children.forEach((child) => {\n child.element.removeAttribute('slot');\n child.element.classList.remove('nano-global-nav-menu');\n if (child.slot && child.slot.length)\n child.element.setAttribute('slot', child.slot);\n this.el.appendChild(child.element);\n });\n this.children = [];\n this.hide = false;\n if (!this.io) this.attachIO();\n }\n\n private onWindowResize = () => {\n if (window.innerWidth > this.hideWidth) this.widthOk = true;\n else this.widthOk = false;\n\n let vh = window.innerHeight 0.01;\n this.el.style.setProperty('--vh', `${vh}px`);\n\n if (\n window.innerHeight > this.currHeight &&\n this.widthOk &&\n !this.heightOk\n ) {\n this.moveItemsToDrawer();\n }\n this.currHeight = window.innerHeight;\n };\n\n private toggle = (e: MouseEvent) => {\n e.preventDefault();\n this.open = !this.open;\n };\n\n private onToggleKeyDown = (ev: KeyboardEvent) => {\n switch (ev.key) {\n case 'Enter':\n case ' ':\n this.open = !this.open;\n break;\n }\n };\n\n private attachIO() {\n if (!this.hideHeight) return;\n const io: IntersectionObserver = (this.io = new (\n window as any\n ).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n this.heightOk = data[0].intersectionRatio !== 0;\n if (!this.heightOk) {\n this.moveItemsToGlobalNav();\n this.io.disconnect();\n this.io = undefined;\n }\n },\n { threshold: 1 }\n ));\n io.observe(this.measureEle);\n }\n\n @Listen('nanoIsReady', { target: 'body' })\n handleGlobalNavReady(e: CustomEvent & { target: HTMLNanoGlobalNavElement }) {\n if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n\n setTimeout(() => {\n this.attachIO();\n this.openChange();\n this.onWindowResize();\n this.isLoading = false;\n }, 500);\n }\n\n componentWillLoad() {\n this.globalNav = closestElement(\n 'nano-global-nav',\n this.el\n ) as HTMLNanoGlobalNavElement;\n\n this.widthOk = window.innerWidth > this.hideWidth;\n this.currHeight = window.innerHeight;\n\n if (this.saveState) {\n let localState = localStorage.getItem('nanoMenuDrawerOpen');\n this.open = localState ? localState === 'true' : this.open;\n }\n }\n\n componentDidLoad() {\n if (Build.isBrowser) {\n window.addEventListener('resize', this.onWindowResize);\n }\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.debounceResize);\n if (this.io) {\n this.io.disconnect();\n this.io = null;\n }\n }\n\n render() {\n return (\n <Host\n class={{\n open: this.open,\n hide: this.hide,\n legacy: !CANSHADOW,\n loading: this.isLoading,\n 'has-global-nav': !!this.globalNav,\n }}\n dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n >\n <div ref={(div) => (this.containerDiv = div)} class=\"container\">\n <div class=\"content-wrap\">\n <nav ref={(div) => (this.contentDiv = div)} class=\"content\">\n <button\n onMouseDown={this.toggle}\n onKeyDown={this.onToggleKeyDown}\n class=\"collapse-btn\"\n >\n <nano-icon\n name=\"light/arrow-alt-to-right\"\n aria-label=\"collapse / expand\"\n ></nano-icon>\n </button>\n <slot />\n <div class=\"foot\">\n <div\n class=\"measure-ele\"\n ref={(div) => (this.measureEle = div)}\n ></div>\n <slot name=\"foot\" />\n </div>\n </nav>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/esm-es5/nano-rating.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["src/components/rating/rating.scss?tag=nano-rating&encapsulation=scoped","src/components/rating/rating.tsx"],"names":["ratingCss","CANSHADOW","document","head","attachShadow","Rating","class_1","hostRef","_this","this","hoverValue","isHovering","value","max","precision","readonly","disabled","name","symbolName","symbol","_","handleClick","event","newValue","getValueFromMousePosition","handleKeyDown","key","decrement","shiftKey","roundToPrecision","Math","preventDefault","increment","min","handleMouseEnter","handleMouseLeave","handleFocus","nanoFocus","emit","handleBlur","nanoBlur","handleMouseMove","prototype","handleValueChange","nanoChange","handleSymbolChange","setFocus","rating","focus","removeFocus","blur","containerLeft","getBoundingClientRect","left","containerWidth","width","num","clientX","isRtl","clamp","numberToRound","multiplier","ceil","clip","displayValue","tw","_getRoot","host","shadowRoot","_fixClassNames","ctxClasses","className","split","filter","classStr","match","eles","querySelectorAll","Array","from","map","ele","classList","add","componentDidLoad","focusVisible","observe","setTimeout","indicator","style","connectedCallback","dir","ownerDocument","disconnectedCallback","unobserve","componentDidRender","render","counter","keys","h","class","ref","el","part","rating--readonly","rating--disabled","aria-disabled","aria-readonly","aria-valuenow","aria-valuemin","aria-valuemax","tabIndex","onClick","onKeyDown","onMouseEnter","onMouseLeave","onMouseMove","onFocus","onBlur","index","rating__symbol","rating__symbol--hover","role","innerHTML","span","type"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n /*\n @prop --symbol-color: The inactive color for symbols. Defaults to #{$color-palegrey}\n * @prop --symbol-color-active: The active color for symbols. Defaults to #{$color-palegrey}\n * @prop --symbol-size: The size of symbols. Defaults to contextual font size\n * @prop --symbol-spacing: The spacing to use around symbols. Defaults to .25rem\n * @prop --focus-shadow: Box shadow style when focused. Defaults to #{$control-focus-style}\n /\n\n --symbol-color: #{$color-palegrey};\n --symbol-color-active: #{$color-yellow};\n --symbol-spacing: 0.25rem;\n --focus-shadow: #{$control-focus-style};\n\n display: inline-block;\n}\n\n.rating-wrap {\n position: relative;\n margin: 0 calc(var(--symbol-spacing) -1);\n}\n\n.rating {\n position: relative;\n border-radius: 5px;\n vertical-align: middle;\n width: 100%;\n transition: box-shadow 0.15s ease;\n\n &:focus {\n outline: none;\n }\n\n &.focus-visible:focus {\n box-shadow: var(--focus-shadow);\n }\n\n &__symbols {\n display: flex;\n align-items: center;\n position: relative;\n font-size: var(--symbol-size);\n color: var(--symbol-color);\n white-space: nowrap;\n cursor: pointer;\n line-height: 0;\n justify-content: space-between;\n\n &--inactive {\n .rating__symbol > :not(nano-icon) {\n background-color: currentColor !important;\n }\n }\n\n > * {\n margin: var(--symbol-spacing);\n }\n\n &--indicator {\n position: absolute;\n top: 0;\n left: 0;\n color: var(--symbol-color-active);\n pointer-events: none;\n width: 100%;\n }\n }\n\n &__symbol {\n transition: 0.2s transform;\n text-align: center;\n\n &--hover {\n transform: scale(1.2);\n }\n }\n\n &--disabled,\n &--readonly {\n .rating__symbols {\n cursor: default;\n }\n\n .rating__symbol {\n transform: none !important;\n }\n }\n\n &--disabled {\n opacity: 0.5;\n\n .rating__symbols {\n cursor: not-allowed;\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n ComponentInterface,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { clamp } from '../../utils';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\n/*\n Rating - a form element to allow the viewing and input of user feedback.\n /\n@Component({\n tag: 'nano-rating',\n styleUrl: 'rating.scss',\n scoped: true,\n})\nexport class Rating implements ComponentInterface {\n private rating: HTMLElement;\n private isRtl: boolean;\n private indicator: HTMLElement;\n\n @Element() host: HTMLNanoRatingElement;\n\n @State() hoverValue = 0;\n @State() isHovering = false;\n\n /\n The current rating.\n /\n @Prop({ mutable: true, reflect: true }) value = 0;\n\n /\n The highest rating to show.\n /\n @Prop() max = 5;\n\n /\n The minimum increment value allowed by the control.\n /\n @Prop() precision = 1;\n\n /\n Makes the rating readonly.\n /\n @Prop() readonly = false;\n\n /\n Disables the rating.\n /\n @Prop() disabled = false;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name = '';\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() symbolName = 'solid/star';\n\n /\n A function that returns the symbols to display.\n * Allows for more granular control than `symbol-name`.\n * Accepts an option `value` parameter you can use to map a specific symbol to a value.\n /\n @Prop() symbol = (_: number) =>\n '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n\n @Watch('value')\n handleValueChange() {\n this.nanoChange.emit();\n }\n\n @Watch('symbolName')\n handleSymbolChange() {\n this.symbol = (_: number) =>\n '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n }\n\n /\n Emitted when the rating's value changes.\n /\n @Event() nanoChange!: EventEmitter<void>;\n\n /\n Emitted when the input loses focus.\n /\n @Event() nanoBlur!: EventEmitter<void>;\n\n /\n Emitted when the input has focus.\n /\n @Event() nanoFocus!: EventEmitter<void>;\n\n /\n Sets focus on the rating.\n /\n @Method()\n async setFocus() {\n this.rating.focus();\n }\n\n /\n Removes focus from the rating.\n /\n @Method()\n async removeFocus() {\n this.rating.blur();\n }\n\n private getValueFromMousePosition(event: MouseEvent) {\n const containerLeft = this.rating.getBoundingClientRect().left;\n const containerWidth = this.rating.getBoundingClientRect().width;\n\n let num: number;\n num = this.roundToPrecision(\n ((event.clientX - containerLeft) / containerWidth) this.max,\n this.precision\n );\n if (this.isRtl) num = this.max + this.precision - num;\n\n return clamp(num, 0, this.max);\n }\n\n private roundToPrecision(numberToRound: number, precision = 0.5) {\n const multiplier = 1 / precision;\n return Math.ceil(numberToRound * multiplier) / multiplier;\n }\n\n private handleClick = (event: MouseEvent) => {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n const newValue = this.getValueFromMousePosition(event);\n this.value = newValue === this.value ? 0 : newValue;\n this.isHovering = false;\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n if (event.key === 'ArrowLeft') {\n const decrement = event.shiftKey ? 1 : this.precision;\n this.value = this.roundToPrecision(Math.max(0, this.value - decrement));\n event.preventDefault();\n }\n\n if (event.key === 'ArrowRight') {\n const increment = event.shiftKey ? 1 : this.precision;\n this.value = this.roundToPrecision(\n Math.min(this.max, this.value + increment)\n );\n event.preventDefault();\n }\n\n if (event.key === 'Home') {\n this.value = 0;\n event.preventDefault();\n }\n\n if (event.key === 'End') {\n this.value = this.max;\n event.preventDefault();\n }\n };\n\n private handleMouseEnter = () => {\n this.isHovering = true;\n };\n\n private handleMouseLeave = () => {\n this.isHovering = false;\n };\n\n private handleFocus = () => {\n this.nanoFocus.emit();\n };\n\n private handleBlur = () => {\n this.nanoBlur.emit();\n };\n\n private handleMouseMove = (event: MouseEvent) => {\n this.hoverValue = this.getValueFromMousePosition(event);\n };\n\n private clip(displayValue: number) {\n if (!this.rating) return;\n const tw = this.rating.getBoundingClientRect().width;\n if (this.isRtl)\n return `rect(0, ${tw}px, 2em, ${\n tw - (tw / 100) * ((displayValue / this.max) * 100)\n }px)`;\n return `rect(0, ${\n (tw / 100) * ((displayValue / this.max) * 100)\n }px, 2em, 0)`;\n }\n\n private _getRoot() {\n return this.host.shadowRoot ? this.host.shadowRoot : this.host;\n }\n\n private _fixClassNames() {\n let ctxClasses = this.rating.className\n .split(' ')\n .filter((classStr) => classStr.match(/^sc-nano/));\n let eles = this._getRoot().querySelectorAll('*');\n if (!eles) return;\n Array.from(eles).map((ele: HTMLElement) => {\n ctxClasses.map((classStr) => ele.classList.add(classStr));\n });\n }\n\n componentDidLoad() {\n focusVisible.observe(this.rating);\n setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);\n }\n\n connectedCallback() {\n this.isRtl =\n this.host.dir === 'rtl' \|\|\n (this.host.ownerDocument as Document).dir === 'rtl';\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.rating);\n }\n\n componentDidRender() {\n if (!this.host.shadowRoot \|\| !CANSHADOW) this._fixClassNames();\n }\n\n render() {\n this.isRtl =\n this.host.dir === 'rtl' \|\|\n (this.host.ownerDocument as Document).dir === 'rtl';\n\n let counter = Array.from(Array(this.max).keys());\n\n let displayValue = 0;\n if (this.disabled \|\| this.readonly) {\n displayValue = this.value;\n } else {\n displayValue = this.isHovering ? this.hoverValue : this.value;\n }\n\n return (\n <div class=\"rating-wrap\">\n <div\n dir={this.isRtl ? 'rtl' : null}\n ref={(el) => (this.rating = el)}\n part=\"base\"\n class={{\n rating: true,\n 'rating--readonly': this.readonly,\n 'rating--disabled': this.disabled,\n }}\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-readonly={this.readonly ? 'true' : 'false'}\n aria-valuenow={this.value}\n aria-valuemin={0}\n aria-valuemax={this.max}\n tabIndex={this.disabled ? -1 : 0}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onMouseMove={this.handleMouseMove}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n >\n <span class=\"rating__symbols rating__symbols--inactive\">\n {counter.map((index) => (\n <span\n class={{\n rating__symbol: true,\n 'rating__symbol--hover':\n this.isHovering && Math.ceil(displayValue) === index + 1,\n }}\n role=\"presentation\"\n // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n onMouseEnter={this.handleMouseEnter}\n innerHTML={this.symbol(index + 1)}\n />\n ))}\n </span>\n\n <span\n ref={(span) => (this.indicator = span)}\n class=\"rating__symbols rating__symbols--indicator\"\n style={{\n clip: this.clip(displayValue),\n }}\n >\n {counter.map((index) => (\n <span\n class={{\n rating__symbol: true,\n 'rating__symbol--hover':\n this.isHovering && Math.ceil(displayValue) === index + 1,\n }}\n role=\"presentation\"\n innerHTML={this.symbol(index + 1)}\n />\n ))}\n </span>\n <input\n type=\"hidden\"\n name={this.name}\n value={this.value}\n disabled={this.disabled \|\| this.readonly}\n />\n </div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"sources":["src/components/rating/rating.scss?tag=nano-rating&encapsulation=scoped","src/components/rating/rating.tsx"],"names":["ratingCss","CANSHADOW","document","head","attachShadow","Rating","class_1","hostRef","_this","this","hoverValue","isHovering","value","max","precision","readonly","disabled","name","symbolName","symbol","_","handleClick","event","newValue","getValueFromMousePosition","handleKeyDown","key","decrement","shiftKey","roundToPrecision","Math","preventDefault","increment","min","handleMouseEnter","handleMouseLeave","handleFocus","nanoFocus","emit","handleBlur","nanoBlur","handleMouseMove","prototype","handleValueChange","nanoChange","handleSymbolChange","setFocus","rating","focus","removeFocus","blur","containerLeft","getBoundingClientRect","left","containerWidth","width","num","clientX","isRtl","clamp","numberToRound","multiplier","ceil","clip","displayValue","tw","_getRoot","host","shadowRoot","_fixClassNames","ctxClasses","className","split","filter","classStr","match","eles","querySelectorAll","Array","from","map","ele","classList","add","componentDidLoad","focusVisible","observe","setTimeout","indicator","style","connectedCallback","dir","ownerDocument","disconnectedCallback","unobserve","componentDidRender","render","counter","keys","h","class","ref","el","part","rating--readonly","rating--disabled","aria-disabled","aria-readonly","aria-valuenow","aria-valuemin","aria-valuemax","tabIndex","onClick","onKeyDown","onMouseEnter","onMouseLeave","onMouseMove","onFocus","onBlur","index","rating__symbol","rating__symbol--hover","role","innerHTML","span","type"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n /*\n @prop --symbol-color: The inactive color for symbols. Defaults to #{map.get($colors, palegrey)}\n * @prop --symbol-color-active: The active color for symbols. Defaults to #{map.get($colors, palegrey)}\n * @prop --symbol-size: The size of symbols. Defaults to contextual font size\n * @prop --symbol-spacing: The spacing to use around symbols. Defaults to .25rem\n * @prop --focus-shadow: Box shadow style when focused. Defaults to #{$control-focus-style}\n /\n\n --symbol-color: #{map.get($colors, palegrey)};\n --symbol-color-active: #{map.get($colors, yellow)};\n --symbol-spacing: 0.25rem;\n --focus-shadow: #{$control-focus-style};\n\n display: inline-block;\n}\n\n.rating-wrap {\n position: relative;\n margin: 0 calc(var(--symbol-spacing) -1);\n}\n\n.rating {\n position: relative;\n border-radius: 5px;\n vertical-align: middle;\n width: 100%;\n transition: box-shadow 0.15s ease;\n\n &:focus {\n outline: none;\n }\n\n &.focus-visible:focus {\n box-shadow: var(--focus-shadow);\n }\n\n &__symbols {\n display: flex;\n align-items: center;\n position: relative;\n font-size: var(--symbol-size);\n color: var(--symbol-color);\n white-space: nowrap;\n cursor: pointer;\n line-height: 0;\n justify-content: space-between;\n\n &--inactive {\n .rating__symbol > :not(nano-icon) {\n background-color: currentColor !important;\n }\n }\n\n > * {\n margin: var(--symbol-spacing);\n }\n\n &--indicator {\n position: absolute;\n top: 0;\n left: 0;\n color: var(--symbol-color-active);\n pointer-events: none;\n width: 100%;\n }\n }\n\n &__symbol {\n transition: 0.2s transform;\n text-align: center;\n\n &--hover {\n transform: scale(1.2);\n }\n }\n\n &--disabled,\n &--readonly {\n .rating__symbols {\n cursor: default;\n }\n\n .rating__symbol {\n transform: none !important;\n }\n }\n\n &--disabled {\n opacity: 0.5;\n\n .rating__symbols {\n cursor: not-allowed;\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n ComponentInterface,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { clamp } from '../../utils';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\n/*\n Rating - a form element to allow the viewing and input of user feedback.\n /\n@Component({\n tag: 'nano-rating',\n styleUrl: 'rating.scss',\n scoped: true,\n})\nexport class Rating implements ComponentInterface {\n private rating: HTMLElement;\n private isRtl: boolean;\n private indicator: HTMLElement;\n\n @Element() host: HTMLNanoRatingElement;\n\n @State() hoverValue = 0;\n @State() isHovering = false;\n\n /\n The current rating.\n /\n @Prop({ mutable: true, reflect: true }) value = 0;\n\n /\n The highest rating to show.\n /\n @Prop() max = 5;\n\n /\n The minimum increment value allowed by the control.\n /\n @Prop() precision = 1;\n\n /\n Makes the rating readonly.\n /\n @Prop() readonly = false;\n\n /\n Disables the rating.\n /\n @Prop() disabled = false;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name = '';\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() symbolName = 'solid/star';\n\n /\n A function that returns the symbols to display.\n * Allows for more granular control than `symbol-name`.\n * Accepts an option `value` parameter you can use to map a specific symbol to a value.\n /\n @Prop() symbol = (_: number) =>\n '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n\n @Watch('value')\n handleValueChange() {\n this.nanoChange.emit();\n }\n\n @Watch('symbolName')\n handleSymbolChange() {\n this.symbol = (_: number) =>\n '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n }\n\n /\n Emitted when the rating's value changes.\n /\n @Event() nanoChange!: EventEmitter<void>;\n\n /\n Emitted when the input loses focus.\n /\n @Event() nanoBlur!: EventEmitter<void>;\n\n /\n Emitted when the input has focus.\n /\n @Event() nanoFocus!: EventEmitter<void>;\n\n /\n Sets focus on the rating.\n /\n @Method()\n async setFocus() {\n this.rating.focus();\n }\n\n /\n Removes focus from the rating.\n /\n @Method()\n async removeFocus() {\n this.rating.blur();\n }\n\n private getValueFromMousePosition(event: MouseEvent) {\n const containerLeft = this.rating.getBoundingClientRect().left;\n const containerWidth = this.rating.getBoundingClientRect().width;\n\n let num: number;\n num = this.roundToPrecision(\n ((event.clientX - containerLeft) / containerWidth) this.max,\n this.precision\n );\n if (this.isRtl) num = this.max + this.precision - num;\n\n return clamp(num, 0, this.max);\n }\n\n private roundToPrecision(numberToRound: number, precision = 0.5) {\n const multiplier = 1 / precision;\n return Math.ceil(numberToRound * multiplier) / multiplier;\n }\n\n private handleClick = (event: MouseEvent) => {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n const newValue = this.getValueFromMousePosition(event);\n this.value = newValue === this.value ? 0 : newValue;\n this.isHovering = false;\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n if (event.key === 'ArrowLeft') {\n const decrement = event.shiftKey ? 1 : this.precision;\n this.value = this.roundToPrecision(Math.max(0, this.value - decrement));\n event.preventDefault();\n }\n\n if (event.key === 'ArrowRight') {\n const increment = event.shiftKey ? 1 : this.precision;\n this.value = this.roundToPrecision(\n Math.min(this.max, this.value + increment)\n );\n event.preventDefault();\n }\n\n if (event.key === 'Home') {\n this.value = 0;\n event.preventDefault();\n }\n\n if (event.key === 'End') {\n this.value = this.max;\n event.preventDefault();\n }\n };\n\n private handleMouseEnter = () => {\n this.isHovering = true;\n };\n\n private handleMouseLeave = () => {\n this.isHovering = false;\n };\n\n private handleFocus = () => {\n this.nanoFocus.emit();\n };\n\n private handleBlur = () => {\n this.nanoBlur.emit();\n };\n\n private handleMouseMove = (event: MouseEvent) => {\n this.hoverValue = this.getValueFromMousePosition(event);\n };\n\n private clip(displayValue: number) {\n if (!this.rating) return;\n const tw = this.rating.getBoundingClientRect().width;\n if (this.isRtl)\n return `rect(0, ${tw}px, 2em, ${\n tw - (tw / 100) * ((displayValue / this.max) * 100)\n }px)`;\n return `rect(0, ${\n (tw / 100) * ((displayValue / this.max) * 100)\n }px, 2em, 0)`;\n }\n\n private _getRoot() {\n return this.host.shadowRoot ? this.host.shadowRoot : this.host;\n }\n\n private _fixClassNames() {\n let ctxClasses = this.rating.className\n .split(' ')\n .filter((classStr) => classStr.match(/^sc-nano/));\n let eles = this._getRoot().querySelectorAll('*');\n if (!eles) return;\n Array.from(eles).map((ele: HTMLElement) => {\n ctxClasses.map((classStr) => ele.classList.add(classStr));\n });\n }\n\n componentDidLoad() {\n focusVisible.observe(this.rating);\n setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);\n }\n\n connectedCallback() {\n this.isRtl =\n this.host.dir === 'rtl' \|\|\n (this.host.ownerDocument as Document).dir === 'rtl';\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.rating);\n }\n\n componentDidRender() {\n if (!this.host.shadowRoot \|\| !CANSHADOW) this._fixClassNames();\n }\n\n render() {\n this.isRtl =\n this.host.dir === 'rtl' \|\|\n (this.host.ownerDocument as Document).dir === 'rtl';\n\n let counter = Array.from(Array(this.max).keys());\n\n let displayValue = 0;\n if (this.disabled \|\| this.readonly) {\n displayValue = this.value;\n } else {\n displayValue = this.isHovering ? this.hoverValue : this.value;\n }\n\n return (\n <div class=\"rating-wrap\">\n <div\n dir={this.isRtl ? 'rtl' : null}\n ref={(el) => (this.rating = el)}\n part=\"base\"\n class={{\n rating: true,\n 'rating--readonly': this.readonly,\n 'rating--disabled': this.disabled,\n }}\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-readonly={this.readonly ? 'true' : 'false'}\n aria-valuenow={this.value}\n aria-valuemin={0}\n aria-valuemax={this.max}\n tabIndex={this.disabled ? -1 : 0}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onMouseMove={this.handleMouseMove}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n >\n <span class=\"rating__symbols rating__symbols--inactive\">\n {counter.map((index) => (\n <span\n class={{\n rating__symbol: true,\n 'rating__symbol--hover':\n this.isHovering && Math.ceil(displayValue) === index + 1,\n }}\n role=\"presentation\"\n // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n onMouseEnter={this.handleMouseEnter}\n innerHTML={this.symbol(index + 1)}\n />\n ))}\n </span>\n\n <span\n ref={(span) => (this.indicator = span)}\n class=\"rating__symbols rating__symbols--indicator\"\n style={{\n clip: this.clip(displayValue),\n }}\n >\n {counter.map((index) => (\n <span\n class={{\n rating__symbol: true,\n 'rating__symbol--hover':\n this.isHovering && Math.ceil(displayValue) === index + 1,\n }}\n role=\"presentation\"\n innerHTML={this.symbol(index + 1)}\n />\n ))}\n </span>\n <input\n type=\"hidden\"\n name={this.name}\n value={this.value}\n disabled={this.disabled \|\| this.readonly}\n />\n </div>\n </div>\n );\n }\n}\n"]}

package/dist/esm-es5/nano-split-pane.entry.js ADDED Viewed

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as registerInstance,c as createEvent,h,e as Host,g as getElement}from"./index-5f8d16e7.js";import{c as clamp,r as raf}from"./index-bf53664b.js";import{d as debounce}from"./throttle-d3d933cd.js";function drag(e,i){function t(t){var n=e.getBoundingClientRect();var o=e.ownerDocument.defaultView;var r=n.left+o.pageXOffset;var a=n.top+o.pageYOffset;var s=t.pageX-r;var d=t.pageY-a;i(s,d)}function n(){document.removeEventListener("pointermove",t);document.removeEventListener("pointerup",n)}document.addEventListener("pointermove",t,{passive:true});document.addEventListener("pointerup",n)}var splitPaneCss=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--divider-width:12px;--divider-hit-area:14px;--min:0%;--max:100%;--background-color:#e4e6e8;--content-color:#918b86;display:-ms-grid;display:grid}.start,.end{overflow:hidden}.divider{-webkit-box-flex:0;-ms-flex:0 0 var(--divider-width);flex:0 0 var(--divider-width);display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:var(--background-color);color:var(--content-color);z-index:1;font-size:0.8rem}.divider:focus{outline:none}:host(:not([disabled])) .divider:focus-visible{background-color:var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}:host([disabled]) .divider{cursor:not-allowed}:host(:not([vertical],[disabled])) .divider{cursor:col-resize}:host(:not([vertical])) .divider::after{display:-webkit-box;display:-ms-flexbox;display:flex;content:"";position:absolute;height:100%;left:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);width:var(--divider-hit-area)}:host([vertical]){-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}:host([vertical]:not([disabled])) .divider{cursor:row-resize}:host([vertical]) .divider::after{content:"";position:absolute;width:100%;top:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);height:var(--divider-hit-area)}';var SplitPane=function(){function e(e){var i=this;registerInstance(this,e);this.nanoReposition=createEvent(this,"nanoReposition",7);this.nanoDragging=createEvent(this,"nanoDragging",7);this.isAnimating=false;this.didLoad=false;this._shouldAnimate=true;this.vertical=false;this.disabled=false;this.snapThreshold=12;this.animationDuration=.6;this.handleDrag=function(e){if(i.disabled){return}e.preventDefault();drag(i.host,(function(e,t){var n=i.vertical?t:e;i.nanoDragging.emit(n);if(i.primary==="end"){n=i.size-n}if(i.snap){var o=i.snap.split(" ");o.forEach((function(e){var t;if(e.endsWith("%")){t=i.size*(parseFloat(e)/100)}else{t=parseFloat(e)}if(n>=t-i.snapThreshold&&n<=t+i.snapThreshold){n=t}}))}i.shouldAnimate=false;i.position=clamp(i.pixelsToPercentage(n),0,100);raf((function(){return i.shouldAnimate=true}))}))};this.handleKeyDown=function(e){if(i.disabled){return}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(e.key)){var t=i.position;var n=(e.shiftKey?10:1)*(i.primary==="end"?-1:1);e.preventDefault();if(e.key==="ArrowLeft"&&!i.vertical||e.key==="ArrowUp"&&i.vertical){t-=n}if(e.key==="ArrowRight"&&!i.vertical||e.key==="ArrowDown"&&i.vertical){t+=n}if(e.key==="Home"){t=i.primary==="end"?100:0}if(e.key==="End"){t=i.primary==="end"?0:100}i.shouldAnimate=false;i.position=clamp(t,0,100);raf((function(){return i.shouldAnimate=true}))}};this.handleResize=function(){if(!i.didLoad||i.isAnimating)return;if(i.primary){i.shouldAnimate=false;i.position=i.pixelsToPercentage(i.cachedPositionInPixels);raf((function(){return i.shouldAnimate=true}))}};this.handlePositionChange=debounce(this.handlePositionChange.bind(this),100)}Object.defineProperty(e.prototype,"size",{get:function(){var e=this.host.getBoundingClientRect(),i=e.width,t=e.height;return this.vertical?t:i},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"shouldAnimate",{get:function(){return this.didLoad&&this._shouldAnimate},set:function(e){this._shouldAnimate=e},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"position",{get:function(){return this._position},set:function(e){e=Math.min(Math.max(e,0),100);if(isNaN(e)||e===this._position)return;if(this.shouldAnimate&&this.animationDuration>0&&!isNaN(this.position)){this.animatePosition(e);return}this._position=e},enumerable:false,configurable:true});e.prototype.handlePositionChange=function(){this.cachedPositionInPixels=this.percentageToPixels(this.position);this.positionInPixels=this.percentageToPixels(this.position);this.nanoReposition.emit()};e.prototype.handlePositionInPixelsChange=function(){this.position=this.pixelsToPercentage(this.positionInPixels)};e.prototype.animatePosition=function(e){var i=this;if(this.isAnimating)return;var t=this.animationDuration;var n=60;var o=this.position;var r=e-o;var a=o;var s=0;function d(e,i,t,n){if((e/=n/2)<1)return t/2*e*e+i;else return-t/2*(--e*(e-2)-1)+i}var l=function(){s+=1/n;a=d(s,o,r,t);if(e>o&&a>=e||e<o&&a<=e){i.position=e;i.shouldAnimate=true;i.isAnimating=false;return}i.position=a;raf(l)};this.shouldAnimate=false;this.isAnimating=true;raf(l)};e.prototype.percentageToPixels=function(e){return this.size*(e/100)};e.prototype.pixelsToPercentage=function(e){return e/this.size*100};e.prototype.attachRO=function(){var e=this;this.detachRO();this.ro=new ResizeObserver((function(){return e.handleResize()}));this.ro.observe(this.host)};e.prototype.detachRO=function(){if(!this.ro)return;this.ro.unobserve(this.host);this.ro=undefined};e.prototype.componentDidLoad=function(){var e=this;if(this.positionInPixels)this.handlePositionInPixelsChange();setTimeout((function(){return e.didLoad=true}))};e.prototype.connectedCallback=function(){this.cachedPositionInPixels=this.percentageToPixels(this.position);this.attachRO()};e.prototype.disconnectedCallback=function(){this.detachRO()};e.prototype.componentDidRender=function(){var e=this;raf((function(){if(typeof e.position==="undefined"){e.position=50}}))};e.prototype.render=function(){if(typeof this.position==="undefined")return;var e={};var i=this.vertical?"gridTemplateRows":"gridTemplateColumns";var t="\n      clamp(\n        0%,\n        clamp(\n          var(--min),\n          "+this.position+"% - var(--divider-width) / 2,\n          var(--max)\n        ),\n        calc(100% - var(--divider-width))\n      )\n    ";var n="auto";if(this.primary==="end"){e[i]=n+" var(--divider-width) "+t}else{e[i]=t+" var(--divider-width) "+n}return h(Host,{style:e},h("div",{part:"panel start",class:"start"},h("slot",{name:"start"})),h("div",{part:"divider",class:"divider",tabindex:this.disabled?undefined:"0",role:"separator","aria-label":"Resize",onKeyDown:this.handleKeyDown,onMouseDown:this.handleDrag,onTouchStart:this.handleDrag},h("slot",{name:"handle"},!this.disabled&&this.vertical?h("nano-icon",{slot:"handle",name:"solid/grip-lines"}):h("nano-icon",{slot:"handle",name:"solid/grip-lines-vertical"}))),h("div",{part:"panel end",class:"end"},h("slot",{name:"end"})))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{position:["handlePositionChange"],positionInPixels:["handlePositionInPixelsChange"]}},enumerable:false,configurable:true});return e}();SplitPane.style=splitPaneCss;export{SplitPane as nano_split_pane};
+//# sourceMappingURL=nano-split-pane.entry.js.map

package/dist/esm-es5/nano-split-pane.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/utils/drag.ts","src/components/split-pane/split-pane.scss?tag=nano-split-pane&encapsulation=shadow","src/components/split-pane/split-pane.tsx"],"names":["drag","container","onMove","move","pointerEvent","dims","getBoundingClientRect","defaultView","ownerDocument","offsetX","left","pageXOffset","offsetY","top","pageYOffset","x","pageX","y","pageY","stop","document","removeEventListener","addEventListener","passive","splitPaneCss","SplitPane","hostRef","_this","this","isAnimating","didLoad","_shouldAnimate","vertical","disabled","snapThreshold","animationDuration","handleDrag","e","preventDefault","host","newPositionInPixels","nanoDragging","emit","primary","size","snap","snaps","split","forEach","value","snapPoint","endsWith","parseFloat","shouldAnimate","position","clamp","pixelsToPercentage","raf","handleKeyDown","event","includes","key","newPosition","incr","shiftKey","handleResize","cachedPositionInPixels","handlePositionChange","debounce","bind","Object","defineProperty","prototype","_a","width","height","sa","_position","pos","Math","min","max","isNaN","animatePosition","percentageToPixels","positionInPixels","nanoReposition","handlePositionInPixelsChange","end","duration","fps","start","distance","time","easeInOutQuad","t","s","d","go","attachRO","detachRO","ro","ResizeObserver","observe","unobserve","undefined","componentDidLoad","setTimeout","connectedCallback","disconnectedCallback","componentDidRender","render","styles","gridTemplate","secondary","h","Host","style","part","class","name","tabindex","role","aria-label","onKeyDown","onMouseDown","onTouchStart","slot"],"mappings":"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","sourcesContent":["export function drag(\n container: HTMLElement,\n onMove: (x: number, y: number) => void\n) {\n function move(pointerEvent: PointerEvent) {\n const dims = container.getBoundingClientRect();\n const defaultView = container.ownerDocument.defaultView!;\n const offsetX = dims.left + defaultView.pageXOffset;\n const offsetY = dims.top + defaultView.pageYOffset;\n const x = pointerEvent.pageX - offsetX;\n const y = pointerEvent.pageY - offsetY;\n\n onMove(x, y);\n }\n\n function stop() {\n document.removeEventListener('pointermove', move);\n document.removeEventListener('pointerup', stop);\n }\n\n document.addEventListener('pointermove', move, { passive: true });\n document.addEventListener('pointerup', stop);\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/form';\n\n:host {\n /**\n * @prop --divider-width: The width of the visible divider. Default 4px.\n * @prop --divider-hit-area: The invisible region around the divider where dragging can occur. This is\n * usually wider than the divider to facilitate easier dragging. Default 12px.\n * @prop --min: The minimum allowed size of the primary panel. Default 0.\n * @prop --max: The maximum allowed size of the primary panel. Default 100%.\n * @prop --background-color: Handle background. Default #{map.get($colors, lightgrey)}.\n * @prop --content-color: Handle color. Default #{map.get($colors, dimgrey)}.\n */\n --divider-width: 12px;\n --divider-hit-area: 14px;\n --min: 0%;\n --max: 100%;\n --background-color: #{map.get($colors, lightgrey)};\n --content-color: #{map.get($colors, dimgrey)};\n\n display: grid;\n}\n\n.start,\n.end {\n overflow: hidden;\n}\n\n.divider {\n flex: 0 0 var(--divider-width);\n display: flex;\n position: relative;\n align-items: center;\n justify-content: center;\n background-color: var(--background-color);\n color: var(--content-color);\n z-index: 1;\n font-size: 0.8rem;\n}\n\n.divider:focus {\n outline: none;\n}\n\n:host(:not([disabled])) .divider:focus-visible {\n background-color: #{$control-focus-color};\n}\n\n:host([disabled]) .divider {\n cursor: not-allowed;\n}\n\n/* Horizontal */\n:host(:not([vertical], [disabled])) .divider {\n cursor: col-resize;\n}\n\n:host(:not([vertical])) .divider::after {\n display: flex;\n content: '';\n position: absolute;\n height: 100%;\n left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n width: var(--divider-hit-area);\n}\n\n/* Vertical */\n:host([vertical]) {\n flex-direction: column;\n}\n\n:host([vertical]:not([disabled])) .divider {\n cursor: row-resize;\n}\n\n:host([vertical]) .divider::after {\n content: '';\n position: absolute;\n width: 100%;\n top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n height: var(--divider-hit-area);\n}\n","import {\n Prop,\n Component,\n Watch,\n Event,\n EventEmitter,\n ComponentInterface,\n Element,\n Host,\n h,\n} from '@stencil/core';\nimport { clamp, raf, debounce } from '../../utils';\nimport { drag } from '../../utils/drag';\n\n/**\n * Split panes display two adjacent panels, allowing the user to reposition them.\n *\n * @part start - The start panel.\n * @part end - The end panel.\n * @part panel - Targets both the start and end panels.\n * @part divider - The divider that separates the start and end panels.\n *\n * @slot start - The start panel.\n * @slot end - The end panel.\n * @slot handle - An optional handle to render at the center of the divider.\n */\n@Component({\n tag: 'nano-split-pane',\n styleUrl: 'split-pane.scss',\n shadow: true,\n})\nexport class SplitPane implements ComponentInterface {\n @Element() host: HTMLNanoSplitPaneElement;\n private cachedPositionInPixels: number;\n private ro: ResizeObserver;\n private isAnimating = false;\n private didLoad = false;\n\n private get size() {\n const { width, height } = this.host.getBoundingClientRect();\n return this.vertical ? height : width;\n }\n\n private get shouldAnimate() {\n return this.didLoad && this._shouldAnimate;\n }\n private set shouldAnimate(sa: boolean) {\n this._shouldAnimate = sa;\n }\n private _shouldAnimate: boolean = true;\n\n constructor() {\n this.handlePositionChange = debounce(\n this.handlePositionChange.bind(this),\n 100\n );\n }\n\n /**\n * The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the\n * container's initial size.\n */\n @Prop()\n get position() {\n return this._position;\n }\n set position(pos: number) {\n // override too high / low\n pos = Math.min(Math.max(pos, 0), 100);\n if (isNaN(pos) || pos === this._position) return;\n\n if (\n this.shouldAnimate &&\n this.animationDuration > 0 &&\n !isNaN(this.position)\n ) {\n this.animatePosition(pos);\n return;\n }\n this._position = pos;\n }\n private _position: number;\n\n // eslint-disable-next-line @stencil/no-unused-watch\n @Watch('position')\n handlePositionChange() {\n this.cachedPositionInPixels = this.percentageToPixels(this.position);\n this.positionInPixels = this.percentageToPixels(this.position);\n this.nanoReposition.emit();\n }\n\n /**\n * The current position of the divider from the primary panel's edge in pixels.\n */\n @Prop({ mutable: true }) positionInPixels: number;\n\n @Watch('positionInPixels')\n handlePositionInPixelsChange() {\n this.position = this.pixelsToPercentage(this.positionInPixels);\n }\n\n /** Draws the split panel in a vertical orientation with the start and end panels stacked. */\n @Prop({ reflect: true }) vertical = false;\n\n /** Disables resizing. Note that the position may still change as a result of resizing the host element. */\n @Prop({ reflect: true }) disabled = false;\n\n /**\n * If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\n * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\n * host element is resized.\n */\n @Prop() primary?: 'start' | 'end';\n\n /**\n * One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n * `\"100px 50%\"`.\n */\n @Prop() snap?: string;\n\n /** How close the divider must be to a snap point until snapping occurs. */\n @Prop() snapThreshold = 12;\n\n /** When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable. */\n @Prop() animationDuration = 0.6;\n\n /** Emitted when the divider's position changes. */\n @Event() nanoReposition: EventEmitter;\n\n /** Emitted when the divider is being dragged. */\n @Event() nanoDragging: EventEmitter<number>;\n\n // Private logic\n\n private animatePosition(end: number) {\n if (this.isAnimating) return;\n\n const duration = this.animationDuration; // seconds\n const fps = 60;\n const start = this.position;\n const distance = end - start;\n\n let position = start;\n let time = 0;\n\n function easeInOutQuad(t: number, s: number, e: number, d: number) {\n if ((t /= d / 2) < 1) return (e / 2) * t * t + s;\n else return (-e / 2) * (--t * (t - 2) - 1) + s;\n }\n\n const go = () => {\n time += 1 / fps;\n position = easeInOutQuad(time, start, distance, duration);\n\n if (\n (end > start && position >= end) ||\n (end < start && position <= end)\n ) {\n this.position = end;\n this.shouldAnimate = true;\n this.isAnimating = false;\n return;\n }\n this.position = position;\n raf(go);\n };\n\n this.shouldAnimate = false;\n this.isAnimating = true;\n raf(go);\n }\n\n private percentageToPixels(value: number) {\n return this.size * (value / 100);\n }\n\n private pixelsToPercentage(value: number) {\n return (value / this.size) * 100;\n }\n\n private attachRO() {\n this.detachRO();\n this.ro = new ResizeObserver(() => this.handleResize());\n this.ro.observe(this.host);\n }\n\n private detachRO() {\n if (!this.ro) return;\n this.ro.unobserve(this.host);\n this.ro = undefined;\n }\n\n // Event handlers\n\n private handleDrag = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n // Prevent text selection when dragging\n e.preventDefault();\n\n drag(this.host, (x, y) => {\n let newPositionInPixels = this.vertical ? y : x;\n\n this.nanoDragging.emit(newPositionInPixels);\n\n // Flip for end panels\n if (this.primary === 'end') {\n newPositionInPixels = this.size - newPositionInPixels;\n }\n\n // Check snap points\n if (this.snap) {\n const snaps = this.snap.split(' ');\n\n snaps.forEach((value) => {\n let snapPoint: number;\n\n if (value.endsWith('%')) {\n snapPoint = this.size * (parseFloat(value) / 100);\n } else {\n snapPoint = parseFloat(value);\n }\n\n if (\n newPositionInPixels >= snapPoint - this.snapThreshold &&\n newPositionInPixels <= snapPoint + this.snapThreshold\n ) {\n newPositionInPixels = snapPoint;\n }\n });\n }\n this.shouldAnimate = false;\n this.position = clamp(\n this.pixelsToPercentage(newPositionInPixels),\n 0,\n 100\n );\n raf(() => (this.shouldAnimate = true));\n });\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.disabled) {\n return;\n }\n\n if (\n [\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowDown',\n 'Home',\n 'End',\n ].includes(event.key)\n ) {\n let newPosition = this.position;\n const incr =\n (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);\n\n event.preventDefault();\n\n if (\n (event.key === 'ArrowLeft' && !this.vertical) ||\n (event.key === 'ArrowUp' && this.vertical)\n ) {\n newPosition -= incr;\n }\n\n if (\n (event.key === 'ArrowRight' && !this.vertical) ||\n (event.key === 'ArrowDown' && this.vertical)\n ) {\n newPosition += incr;\n }\n\n if (event.key === 'Home') {\n newPosition = this.primary === 'end' ? 100 : 0;\n }\n\n if (event.key === 'End') {\n newPosition = this.primary === 'end' ? 0 : 100;\n }\n\n this.shouldAnimate = false;\n\n this.position = clamp(newPosition, 0, 100);\n raf(() => (this.shouldAnimate = true));\n }\n };\n\n private handleResize = () => {\n if (!this.didLoad || this.isAnimating) return;\n\n // Resize when a primary panel is set\n if (this.primary) {\n this.shouldAnimate = false;\n this.position = this.pixelsToPercentage(this.cachedPositionInPixels);\n raf(() => (this.shouldAnimate = true));\n }\n };\n\n componentDidLoad(): void {\n if (this.positionInPixels) this.handlePositionInPixelsChange();\n setTimeout(() => (this.didLoad = true));\n }\n\n connectedCallback() {\n this.cachedPositionInPixels = this.percentageToPixels(this.position);\n this.attachRO();\n }\n\n disconnectedCallback() {\n this.detachRO();\n }\n\n componentDidRender(): void {\n // bit hacky ... because we use getter / setter for position, there's a render *before* `position` is passed in via attribute\n // if we set a default position in the class, this causes the divider to jump (from default to user set position)\n // so - wait a render, see if there's a position passed in via attribute, *then* set default if not\n raf(() => {\n if (typeof this.position === 'undefined') {\n this.position = 50;\n }\n });\n }\n\n render() {\n if (typeof this.position === 'undefined') return;\n const styles: { gridTemplateRows?: string; gridTemplateColumns?: string } =\n {};\n const gridTemplate = this.vertical\n ? 'gridTemplateRows'\n : 'gridTemplateColumns';\n const primary = `\n clamp(\n 0%,\n clamp(\n var(--min),\n ${this.position}% - var(--divider-width) / 2,\n var(--max)\n ),\n calc(100% - var(--divider-width))\n )\n `;\n const secondary = 'auto';\n\n if (this.primary === 'end') {\n styles[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n } else {\n styles[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n }\n\n return (\n <Host style={styles}>\n <div part=\"panel start\" class=\"start\">\n <slot name=\"start\"></slot>\n </div>\n <div\n part=\"divider\"\n class=\"divider\"\n tabindex={this.disabled ? undefined : '0'}\n role=\"separator\"\n aria-label=\"Resize\"\n onKeyDown={this.handleKeyDown}\n onMouseDown={this.handleDrag}\n onTouchStart={this.handleDrag}\n >\n <slot name=\"handle\">\n {!this.disabled && this.vertical ? (\n <nano-icon slot=\"handle\" name=\"solid/grip-lines\" />\n ) : (\n <nano-icon slot=\"handle\" name=\"solid/grip-lines-vertical\" />\n )}\n </slot>\n </div>\n <div part=\"panel end\" class=\"end\">\n <slot name=\"end\"></slot>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/esm-es5/nano-tab-group.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 var __awaiter=this&&this.__awaiter||function(t,a,e,o){function n(t){return t instanceof e?t:new e((function(a){a(t)}))}return new(e||(e=Promise))((function(e,r){function i(t){try{l(o.next(t))}catch(a){r(a)}}function s(t){try{l(o["throw"](t))}catch(a){r(a)}}function l(t){t.done?e(t.value):n(t.value).then(i,s)}l((o=o.apply(t,a||[])).next())}))};var __generator=this&&this.__generator||function(t,a){var e={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},o,n,r,i;return i={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function s(t){return function(a){return l([t,a])}}function l(i){if(o)throw new TypeError("Generator is already executing.");while(e)try{if(o=1,n&&(r=i[0]&2?n["return"]:i[0]?n["throw"]||((r=n["return"])&&r.call(n),0):n.next)&&!(r=r.call(n,i[1])).done)return r;if(n=0,r)i=[i[0]&2,r.value];switch(i[0]){case 0:case 1:r=i;break;case 4:e.label++;return{value:i[1],done:false};case 5:e.label++;n=i[1];i=[0];continue;case 7:i=e.ops.pop();e.trys.pop();continue;default:if(!(r=e.trys,r=r.length>0&&r[r.length-1])&&(i[0]===6||i[0]===2)){e=0;continue}if(i[0]===3&&(!r||i[1]>r[0]&&i[1]<r[3])){e.label=i[1];break}if(i[0]===6&&e.label<r[1]){e.label=r[1];r=i;break}if(r&&e.label<r[2]){e.label=r[2];e.ops.push(i);break}if(r[2])e.ops.pop();e.trys.pop();continue}i=a.call(t,e)}catch(s){i=[6,s];n=0}finally{o=r=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};
 /*!
  * Web Components for Nanopore digital Web Apps
- */import{r as registerInstance,c as createEvent,h,e as Host,g as getElement}from"./index-5f8d16e7.js";import{i as index}from"./ResizeObserver.es-724af9fd.js";import{s as scrollIntoView}from"./scroll-881feb46.js";import{f as focusVisible}from"./focus-visible-8b2c14da.js";import{d as displayTransition,r as raf}from"./index-bf53664b.js";import{C as ComponentStore}from"./component-store-b6fbfa35.js";import{g as getDirectChildren,a as getOffset}from"./dom-faa69d29.js";import{c as createColorClasses}from"./theme-1d4c8719.js";import"./_commonjsHelpers-e401b2a2.js";import"./throttle-d3d933cd.js";var tabGroupCss=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:0;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255, 255, 255);--scroll-btn-color:"currentColor";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-container-bg:"transparent";--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius);--tab-text-color:#007495;--shadow-opacity:0.1;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (max-width: 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(nano-tab){--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius)}:host(.legacy) ::slotted(nano-tab){--tab-indicator-color:#90c6e7;--border-radius:3px;--tab-indicator-size:5px;--bg-rgb:255, 255, 255}:host([placement=start]),:host([placement=end]){--content-padding:1rem;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgba(var(--nano-color-base-rgb), 0.7)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:0;width:100%;-webkit-box-flex:inherit;-ms-flex:inherit;flex:inherit}.nano-tab-group__tabs{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.nano-tab-group__active-tab-indicator{position:absolute;-webkit-transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group:not(.focus-visible) ::slotted(nano-tab){--focus-shadow:none}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;top:0;bottom:0;border:unset;z-index:2;-webkit-transition:var(--nano-transition-fast, 0.3s) ease opacity;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}.nano-tab-group__scroll-button:focus{outline:none}.nano-tab-group__scroll-button.is-shown{opacity:1}.nano-tab-group__scroll-button.focus-visible:focus{-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tab-group__scroll-button--left{left:0}.nano-tab-group__scroll-button--right{right:0}.nano-tab-group__scroll-button nano-icon{font-size:16px}.nano-tab-group--top{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:"";width:86%;-webkit-box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));height:10px;position:absolute;left:7%;bottom:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-left:var(--tabs-padding-start);padding-right:var(--tabs-padding-end);padding-top:var(--tabs-padding-top);padding-bottom:var(--tabs-padding-bottom);display:-webkit-box;display:-ms-flexbox;display:flex;overflow-x:auto;overflow-y:hidden;-webkit-transition:var(--nano-transition-medium, 0.5s) ease;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0)), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));-webkit-mask-image:linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - (var(--tabs-padding-end) * 2)), rgba(0, 0, 0, 0) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, 0));mask-image:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0)), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));mask-image:linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - (var(--tabs-padding-end) * 2)), rgba(0, 0, 0, 0) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, 0));-webkit-mask-size:calc(100% + calc(var(--tabs-padding-end) * 4));mask-size:calc(100% + calc(var(--tabs-padding-end) * 4));-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar{width:0;height:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nano-tab-group--top .nano-tab-group__nav{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--tabs-padding-start);padding-inline-start:var(--tabs-padding-start);-webkit-padding-end:var(--tabs-padding-end);padding-inline-end:var(--tabs-padding-end)}}.nano-tab-group--top .nano-tab-group__nav::after{content:" ";padding-left:0;padding-right:var(--tabs-padding-end);padding-top:var(--tabs-padding-top);padding-bottom:var(--tabs-padding-bottom);line-height:1;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nano-tab-group--top .nano-tab-group__nav::after{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--tabs-padding-end);padding-inline-end:var(--tabs-padding-end)}}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + (var(--tabs-padding-end) * 2));mask-size:calc(100% + (var(--tabs-padding-end) * 2))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.nano-tab-group--top .nano-tab-group__tabs{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;text-align:center;color:var(--tab-text-color);width:auto}.nano-tab-group--top .nano-tab-group__active-tab-indicator{bottom:-2px;border-bottom:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--top .nano-tab-group__body{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;background:var(--content-bg);position:relative;overflow:hidden;width:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.nano-tab-group--start{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.nano-tab-group--start .nano-tab-group__tabs{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb))}:host(:not([dir=rtl])) .nano-tab-group--start .nano-tab-group__tabs{border-left:solid var(--indicator-size) var(--indicator-track-color);text-align:left}:host([dir=rtl]) .nano-tab-group--start .nano-tab-group__tabs{border-right:solid var(--indicator-size) var(--indicator-track-color);text-align:right}:host(:not([dir=rtl])) .nano-tab-group--start .nano-tab-group__active-tab-indicator{left:calc(-1 * 2px);border-left:solid var(--indicator-size) var(--indicator-color)}:host([dir=rtl]) .nano-tab-group--start .nano-tab-group__active-tab-indicator{right:calc(-1 * 2px);border-right:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:var(--content-padding);overflow:hidden;border-top-left-radius:0;border-top-right-radius:var(--content-border-radius);border-bottom-right-radius:var(--content-border-radius);border-bottom-left-radius:0}.nano-tab-group--start .nano-tab-group__body[dir=rtl]{border-top-left-radius:var(--content-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--content-border-radius)}';var TabGroup=function(){function t(t){var a=this;registerInstance(this,t);this.nanoTabShow=createEvent(this,"nanoTabShow",7);this.nanoTabHide=createEvent(this,"nanoTabHide",7);this.nanoTabWillClose=createEvent(this,"nanoTabWillClose",7);this.nanoTabClose=createEvent(this,"nanoTabClose",7);this.initialTouchX=null;this.initialTouchY=null;this.mutationObservers=new WeakMap;this.hasScrollControls=false;this.hideControlRight=true;this.hideControlLeft=true;this.isLegacy=!document.head.attachShadow;this.placement="top";this.noScrollControls=false;this.storeMethod="session";this.updateScrollControls=function(){if(a.noScrollControls){a.hasScrollControls=false}else{a.hasScrollControls=["top"].includes(a.placement)&&a.nav.scrollWidth>a.nav.clientWidth&&a.nav.scrollWidth>a.tabs.clientWidth}};this.handleClick=function(t){var e=t.target;var o=e.closest("nano-tab");if(o)a.setActiveTab(o)};this.handleKeyDown=function(t){if(["Enter"," "].includes(t.key)){var e=t.target;var o=e.closest("nano-tab");if(o){a.setActiveTab(o);t.preventDefault()}}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){var n=document.activeElement;if(n&&n.tagName.toLowerCase()==="nano-tab"){var r=a.getAllActiveTabs;var i=r.indexOf(n);if(t.key==="Home"){i=0}else if(t.key==="End"){i=r.length-1}else if(a.isRtl&&t.key==="ArrowRight"||!a.isRtl&&t.key==="ArrowLeft"){i=Math.max(0,i-1)}else if(a.isRtl&&t.key==="ArrowLeft"||!a.isRtl&&t.key==="ArrowRight"){i=Math.min(r.length-1,i+1)}r[i].setFocus();if(["top"].includes(a.placement)){scrollIntoView(r[i],a.nav,"horizontal","center")}t.preventDefault()}}};this.handleTabScroll=function(){if(!a.hasScrollControls){a.hideControlLeft=a.hideControlRight=true;return}var t=a.isRtl?a.nav.scrollLeft===0:a.nav.scrollWidth-a.nav.scrollLeft===a.nav.clientWidth;var e=a.isRtl?a.nav.scrollWidth+a.nav.scrollLeft===a.nav.clientWidth:a.nav.scrollLeft===0;if(e){a.hideControlLeft=true;a.hideControlRight=false}else if(t){a.hideControlLeft=false;a.hideControlRight=true}else{a.hideControlRight=false;a.hideControlLeft=false}};this.handleBtnClick=function(t){if(t===void 0){t=false}var e=a.getNavWidth();var o;if(t)o=a.nav.scrollLeft+e-20;else o=a.nav.scrollLeft-e+20;try{a.nav.scroll({left:o,behavior:"smooth"})}catch(n){a.nav.scrollLeft=o}};this.handleTouchStart=function(t){if(a.disableSwipe)return;var e=t.changedTouches[0];a.initialTouchX=e.pageX;a.initialTouchY=e.pageY};this.handleTouchEnd=function(t){if(a.disableSwipe)return;var e=t.changedTouches[0];var o=e.pageX-a.initialTouchX;var n=e.pageY-a.initialTouchY;var r=70;var i=a.initialTouchX-e.clientX;var s=a.initialTouchY-e.clientY;var l=Math.abs(o)>=r&&Math.abs(n)<=r;var c=a.getAllActiveTabs;var b=c.findIndex((function(t){return t.active}));if(l){var d=o<0&&a.placement==="top"||o>0&&a.placement!=="top"?1:-1;if(c[b+d]){a.setActiveTab(c[b+d]);if(Math.abs(i)>Math.abs(s)){if(i>0)a.activePanel.setAttribute("animation-dir","left");else a.activePanel.setAttribute("animation-dir","right")}}}a.initialTouchX=null;a.initialTouchY=null};this.handleContentSlotChange=function(){setTimeout((function(){a.setAriaLabels();a.setActiveTab(a.getActiveTab||a.getAllActiveTabs[0],false)}))};this.handleTabSlotChange=function(t){setTimeout((function(){a.setAriaLabels();a.handleTabScroll();a.setActiveTab(a.getActiveTab||a.getAllActiveTabs[0],false);a.updateScrollControls()}),500);var e=t.target.assignedNodes({flatten:true});e.forEach((function(t){if(!a.mutationObservers.get(t)){var e=new MutationObserver((function(){setTimeout((function(){a.syncActiveTabIndicator();a.handleTabScroll();a.updateScrollControls()}),500)}));a.mutationObservers.set(t,e);e.observe(t,{characterData:true,childList:true,subtree:true})}}))}}t.prototype.handleTabNameChange=function(){var t=this;if(this.activeTab&&this.activeTab.panel===this.tab)return;var a=this.getAllActiveTabs.find((function(a){return a.panel===t.tab}));this.setActiveTab(a)};t.prototype.handlePlacementChange=function(){this.syncActiveTabIndicator()};t.prototype.handleNoScrollControlsChange=function(){this.updateScrollControls()};t.prototype.hideRightBtn=function(){if(!this.rightBtn)return;displayTransition(this.rightBtn,"is-shown",!this.hideControlRight)};t.prototype.hideLeftBtn=function(){if(!this.leftBtn)return;displayTransition(this.leftBtn,"is-shown",!this.hideControlLeft)};t.prototype.watchScrollControls=function(){var t=this;if(this.hasScrollControls)setTimeout((function(a){return t.handleTabScroll()}),20);else setTimeout((function(a){t.hideControlLeft=t.hideControlRight=true}),20)};t.prototype.show=function(t){return __awaiter(this,void 0,void 0,(function(){var a;return __generator(this,(function(e){if(this.activeTab&&this.activeTab.panel===t)return[2];a=this.getAllActiveTabs.find((function(a){return a.panel===t}));if(a)this.setActiveTab(a);return[2]}))}))};Object.defineProperty(t.prototype,"getAllActiveTabs",{get:function(){return this.getAllTabs.filter((function(t){return!t.disabled}))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"getAllTabs",{get:function(){return getDirectChildren(this.host,"nano-tab")},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"getAllPanels",{get:function(){return getDirectChildren(this.host,"nano-tab-content")},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"getActiveTab",{get:function(){return this.getAllActiveTabs.find((function(t){return t.active}))},enumerable:false,configurable:true});t.prototype.setActiveTab=function(t,a){var e=this;if(a===void 0){a=true}if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){var o=this.activeTab;this.activeTab=t;this.tab=t.panel;this.getAllActiveTabs.map((function(t){return t.active=t===e.activeTab}));this.getAllPanels.map((function(t){if(t.name===e.activeTab.panel){t.active=true;e.activePanel=t}else t.active=false;t.removeAttribute("animation-dir")}));this.syncActiveTabIndicator();if(["top"].includes(this.placement)){scrollIntoView(this.activeTab,this.nav,"horizontal","center")}if(a){if(o){this.nanoTabHide.emit({name:o.panel})}this.nanoTabShow.emit({name:this.activeTab.panel})}}};t.prototype.setAriaLabels=function(){var t=this.getAllActiveTabs;var a=this.getAllPanels;t.map((function(t){var e=a.find((function(a){return a.name===t.panel}));if(e){t.setAttribute("aria-controls",e.getAttribute("id"));e.setAttribute("aria-labelledby",t.getAttribute("id"))}}))};t.prototype.syncActiveTabIndicator=function(){var t=this;var a;this.getAllTabs.forEach((function(a){return a.setAttribute("direction",t.placement==="top"?"horizontal":"vertical")}));var e=this.getActiveTab;var o=((a=e.shadowRoot.querySelector(".nanotab"))===null||a===void 0?void 0:a.clientWidth)||0;var n=e.clientHeight;var r=getOffset(e,this.tabs);var i=r.top+this.nav.scrollTop;var s=r.left;switch(this.placement){case"top":this.activeTabIndicator.style.width=o+"px";this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform="translateX("+s+"px)";break;case"start":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=n+"px";this.activeTabIndicator.style.transform="translateY("+i+"px)";break}};t.prototype.getNavWidth=function(){if(!this.nav)return 0;var t=getComputedStyle(this.nav);var a=this.nav.clientWidth;return a-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)};t.prototype.handleTabClose=function(t){var a;var e=this.getAllActiveTabs.indexOf(t.target);var o=t.target;if(e<0)return;var n=this.getAllPanels.find((function(t){return t.name===o.panel}));if(!n)return;t.stopImmediatePropagation();var r=this.nanoTabWillClose.emit({name:o.panel});if(r.defaultPrevented)return;if(o.active){e=e===0?1:e-1;var i=(a=this.getAllActiveTabs[e])===null||a===void 0?void 0:a.panel;if(i)this.host.show(i)}o.remove();n.remove();this.nanoTabClose.emit({name:o.panel})};t.prototype.componentDidLoad=function(){var t=this;var a=new IntersectionObserver((function(a,e){if(a[0].intersectionRatio>0){t.setAriaLabels();t.setActiveTab(t.getActiveTab||t.getAllActiveTabs[0],false);if(t.storeId)ComponentStore.init(t,["tab"],t.storeMethod,t.storeId);e.unobserve(a[0].target)}}));a.observe(this.host);focusVisible.observe(this.tabGroup);if(this.leftBtn){focusVisible.observe(this.leftBtn);focusVisible.observe(this.rightBtn)}this.resizeObserver=new index((function(){setTimeout((function(){t.updateScrollControls();t.syncActiveTabIndicator()}),500)}));this.resizeObserver.observe(this.nav);raf((function(){return t.updateScrollControls()}))};t.prototype.connectedCallback=function(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"};t.prototype.disconnectedCallback=function(){focusVisible.unobserve(this.tabGroup);if(this.leftBtn){focusVisible.unobserve(this.leftBtn);focusVisible.unobserve(this.rightBtn)}if(this.resizeObserver)this.resizeObserver.unobserve(this.nav)};t.prototype.render=function(){var t=this;this.isRtl=this.host.ownerDocument.dir==="rtl";return h(Host,{class:Object.assign(Object.assign({},createColorClasses(this.color)),{legacy:this.isLegacy}),dir:this.isRtl?"rtl":null},h("div",{part:"base",ref:function(a){return t.tabGroup=a},class:{"nano-tab-group":true,"nano-tab-group--top":this.placement==="top","nano-tab-group--start":this.placement==="start","nano-tab-group--has-scroll-controls":this.hasScrollControls,"nano-tab-group--has-scroll-controls-left":!this.hideControlLeft,"nano-tab-group--has-scroll-controls-right":!this.hideControlRight},onClick:this.handleClick,onKeyDown:this.handleKeyDown},h("div",{class:"nano-tab-group__nav-container",part:"nav"},this.placement==="top"&&h("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--left":true},ref:function(a){return t.leftBtn=a},onClick:function(){return t.handleBtnClick(false)}},h("nano-icon",{name:"light/chevron-left"})),h("div",{ref:function(a){return t.nav=a},class:"nano-tab-group__nav",onScroll:this.handleTabScroll},h("div",{ref:function(a){return t.tabs=a},part:"tabs",class:"nano-tab-group__tabs",role:"tablist"},h("div",{ref:function(a){return t.activeTabIndicator=a},part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),h("slot",{name:"tabs",onSlotchange:this.handleTabSlotChange}))),this.placement==="top"&&h("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--right":true},ref:function(a){return t.rightBtn=a},onClick:function(){return t.handleBtnClick(true)}},h("nano-icon",{name:"light/chevron-right"}))),h("slot",{name:"tab-content-header"}),h("div",{part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},h("slot",{onSlotchange:this.handleContentSlotChange}))))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}},enumerable:false,configurable:true});return t}();TabGroup.style=tabGroupCss;export{TabGroup as nano_tab_group};
+ */import{r as registerInstance,c as createEvent,h,e as Host,g as getElement}from"./index-5f8d16e7.js";import{i as index}from"./ResizeObserver.es-724af9fd.js";import{s as scrollIntoView}from"./scroll-881feb46.js";import{f as focusVisible}from"./focus-visible-8b2c14da.js";import{d as displayTransition,r as raf}from"./index-bf53664b.js";import{C as ComponentStore}from"./component-store-b6fbfa35.js";import{g as getDirectChildren,a as getOffset}from"./dom-faa69d29.js";import{c as createColorClasses}from"./theme-1d4c8719.js";import"./_commonjsHelpers-e401b2a2.js";import"./throttle-d3d933cd.js";var tabGroupCss=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:0;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255, 255, 255);--scroll-btn-color:"currentColor";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-container-bg:"transparent";--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius);--tab-text-color:#007495;--shadow-opacity:0.1;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (max-width: 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(nano-tab){--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius)}:host(.legacy) ::slotted(nano-tab){--tab-indicator-color:#90c6e7;--border-radius:3px;--tab-indicator-size:5px;--bg-rgb:255, 255, 255}:host([placement=start]),:host([placement=end]){--content-padding:1rem;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgba(var(--nano-color-base-rgb), 0.7)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:0;width:100%;-webkit-box-flex:inherit;-ms-flex:inherit;flex:inherit}.nano-tab-group__tabs{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.nano-tab-group__active-tab-indicator{position:absolute;-webkit-transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group:not(.focus-visible) ::slotted(nano-tab){--focus-shadow:none}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;top:0;bottom:0;border:unset;z-index:2;-webkit-transition:var(--nano-transition-fast, 0.3s) ease opacity;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}.nano-tab-group__scroll-button:focus{outline:none}.nano-tab-group__scroll-button.is-shown{opacity:1}.nano-tab-group__scroll-button.focus-visible:focus{-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tab-group__scroll-button--left{left:0}.nano-tab-group__scroll-button--right{right:0}.nano-tab-group__scroll-button nano-icon{font-size:16px}.nano-tab-group--top{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:"";width:86%;-webkit-box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));height:10px;position:absolute;left:7%;bottom:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-left:var(--tabs-padding-start);padding-right:var(--tabs-padding-end);padding-top:var(--tabs-padding-top);padding-bottom:var(--tabs-padding-bottom);display:-webkit-box;display:-ms-flexbox;display:flex;overflow-x:auto;overflow-y:hidden;-webkit-transition:var(--nano-transition-medium, 0.5s) ease;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0)), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));-webkit-mask-image:linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - (var(--tabs-padding-end) * 2)), rgba(0, 0, 0, 0) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, 0));mask-image:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0)), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));mask-image:linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - (var(--tabs-padding-end) * 2)), rgba(0, 0, 0, 0) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, 0));-webkit-mask-size:calc(100% + calc(var(--tabs-padding-end) * 4));mask-size:calc(100% + calc(var(--tabs-padding-end) * 4));-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar{width:0;height:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nano-tab-group--top .nano-tab-group__nav{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--tabs-padding-start);padding-inline-start:var(--tabs-padding-start);-webkit-padding-end:var(--tabs-padding-end);padding-inline-end:var(--tabs-padding-end)}}.nano-tab-group--top .nano-tab-group__nav::after{content:" ";padding-left:0;padding-right:var(--tabs-padding-end);padding-top:var(--tabs-padding-top);padding-bottom:var(--tabs-padding-bottom);line-height:1;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nano-tab-group--top .nano-tab-group__nav::after{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--tabs-padding-end);padding-inline-end:var(--tabs-padding-end)}}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + (var(--tabs-padding-end) * 2));mask-size:calc(100% + (var(--tabs-padding-end) * 2))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.nano-tab-group--top .nano-tab-group__tabs{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;text-align:center;color:var(--tab-text-color);width:auto}.nano-tab-group--top .nano-tab-group__active-tab-indicator{bottom:-2px;border-bottom:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--top .nano-tab-group__body{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;background:var(--content-bg);position:relative;overflow:hidden;width:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.nano-tab-group--start{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.nano-tab-group--start .nano-tab-group__tabs{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb))}:host(:not([dir=rtl])) .nano-tab-group--start .nano-tab-group__tabs{border-left:solid var(--indicator-size) var(--indicator-track-color);text-align:left}:host([dir=rtl]) .nano-tab-group--start .nano-tab-group__tabs{border-right:solid var(--indicator-size) var(--indicator-track-color);text-align:right}:host(:not([dir=rtl])) .nano-tab-group--start .nano-tab-group__active-tab-indicator{left:calc(-1 * 2px);border-left:solid var(--indicator-size) var(--indicator-color)}:host([dir=rtl]) .nano-tab-group--start .nano-tab-group__active-tab-indicator{right:calc(-1 * 2px);border-right:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:var(--content-padding);overflow:hidden;border-top-left-radius:0;border-top-right-radius:var(--content-border-radius);border-bottom-right-radius:var(--content-border-radius);border-bottom-left-radius:0}.nano-tab-group--start .nano-tab-group__body[dir=rtl]{border-top-left-radius:var(--content-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--content-border-radius)}';var TabGroup=function(){function t(t){var a=this;registerInstance(this,t);this.nanoTabShow=createEvent(this,"nanoTabShow",7);this.nanoTabHide=createEvent(this,"nanoTabHide",7);this.nanoTabWillClose=createEvent(this,"nanoTabWillClose",7);this.nanoTabClose=createEvent(this,"nanoTabClose",7);this.initialTouchX=null;this.initialTouchY=null;this.mutationObservers=new WeakMap;this.hasScrollControls=false;this.hideControlRight=true;this.hideControlLeft=true;this.isLegacy=!document.head.attachShadow;this.placement="top";this.noScrollControls=false;this.storeMethod="session";this.updateScrollControls=function(){if(a.noScrollControls){a.hasScrollControls=false}else{a.hasScrollControls=["top"].includes(a.placement)&&a.nav.scrollWidth>a.nav.clientWidth&&a.nav.scrollWidth>a.tabs.clientWidth}};this.handleClick=function(t){var e=t.target;var o=e.closest("nano-tab");if(o)a.setActiveTab(o)};this.handleKeyDown=function(t){if(["Enter"," "].includes(t.key)){var e=t.target;var o=e.closest("nano-tab");if(o){a.setActiveTab(o);t.preventDefault()}}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){var n=document.activeElement;if(n&&n.tagName.toLowerCase()==="nano-tab"){var r=a.getAllActiveTabs;var i=r.indexOf(n);if(t.key==="Home"){i=0}else if(t.key==="End"){i=r.length-1}else if(a.isRtl&&t.key==="ArrowRight"||!a.isRtl&&t.key==="ArrowLeft"){i=Math.max(0,i-1)}else if(a.isRtl&&t.key==="ArrowLeft"||!a.isRtl&&t.key==="ArrowRight"){i=Math.min(r.length-1,i+1)}r[i].setFocus();if(["top"].includes(a.placement)){scrollIntoView(r[i],a.nav,"horizontal","center")}t.preventDefault()}}};this.handleTabScroll=function(){if(!a.hasScrollControls){a.hideControlLeft=a.hideControlRight=true;return}var t=a.isRtl?a.nav.scrollLeft===0:a.nav.scrollWidth-a.nav.scrollLeft===a.nav.clientWidth;var e=a.isRtl?a.nav.scrollWidth+a.nav.scrollLeft===a.nav.clientWidth:a.nav.scrollLeft===0;if(e){a.hideControlLeft=true;a.hideControlRight=false}else if(t){a.hideControlLeft=false;a.hideControlRight=true}else{a.hideControlRight=false;a.hideControlLeft=false}};this.handleBtnClick=function(t){if(t===void 0){t=false}var e=a.getNavWidth();var o;if(t)o=a.nav.scrollLeft+e-20;else o=a.nav.scrollLeft-e+20;try{a.nav.scroll({left:o,behavior:"smooth"})}catch(n){a.nav.scrollLeft=o}};this.handleTouchStart=function(t){if(a.disableSwipe)return;var e=t.changedTouches[0];a.initialTouchX=e.pageX;a.initialTouchY=e.pageY};this.handleTouchEnd=function(t){if(a.disableSwipe)return;var e=t.changedTouches[0];var o=e.pageX-a.initialTouchX;var n=e.pageY-a.initialTouchY;var r=70;var i=a.initialTouchX-e.clientX;var s=a.initialTouchY-e.clientY;var l=Math.abs(o)>=r&&Math.abs(n)<=r;var c=a.getAllActiveTabs;var b=c.findIndex((function(t){return t.active}));if(l){var d=o<0&&a.placement==="top"||o>0&&a.placement!=="top"?1:-1;if(c[b+d]){a.setActiveTab(c[b+d]);if(Math.abs(i)>Math.abs(s)){if(i>0)a.activePanel.setAttribute("animation-dir","left");else a.activePanel.setAttribute("animation-dir","right")}}}a.initialTouchX=null;a.initialTouchY=null};this.handleContentSlotChange=function(){setTimeout((function(){a.setAriaLabels();a.setActiveTab(a.getActiveTab||a.getAllActiveTabs[0],false)}))};this.handleTabSlotChange=function(t){setTimeout((function(){a.setAriaLabels();a.handleTabScroll();a.setActiveTab(a.getActiveTab||a.getAllActiveTabs[0],false);a.updateScrollControls()}),500);var e=t.target.assignedNodes({flatten:true});e.forEach((function(t){if(!a.mutationObservers.get(t)){var e=new MutationObserver((function(){setTimeout((function(){a.syncActiveTabIndicator();a.handleTabScroll();a.updateScrollControls()}),500)}));a.mutationObservers.set(t,e);e.observe(t,{characterData:true,childList:true,subtree:true})}}))}}t.prototype.handleTabNameChange=function(){var t=this;if(this.activeTab&&this.activeTab.panel===this.tab)return;var a=this.getAllActiveTabs.find((function(a){return a.panel===t.tab}));this.setActiveTab(a)};t.prototype.handlePlacementChange=function(){this.syncActiveTabIndicator()};t.prototype.handleNoScrollControlsChange=function(){this.updateScrollControls()};t.prototype.hideRightBtn=function(){if(!this.rightBtn)return;displayTransition(this.rightBtn,"is-shown",!this.hideControlRight)};t.prototype.hideLeftBtn=function(){if(!this.leftBtn)return;displayTransition(this.leftBtn,"is-shown",!this.hideControlLeft)};t.prototype.watchScrollControls=function(){var t=this;if(this.hasScrollControls)setTimeout((function(a){return t.handleTabScroll()}),20);else setTimeout((function(a){t.hideControlLeft=t.hideControlRight=true}),20)};t.prototype.show=function(t){return __awaiter(this,void 0,void 0,(function(){var a;return __generator(this,(function(e){if(this.activeTab&&this.activeTab.panel===t)return[2];a=this.getAllActiveTabs.find((function(a){return a.panel===t}));if(a)this.setActiveTab(a);return[2]}))}))};Object.defineProperty(t.prototype,"getAllActiveTabs",{get:function(){return this.getAllTabs.filter((function(t){return!t.disabled}))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"getAllTabs",{get:function(){return getDirectChildren(this.host,"nano-tab")},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"getAllPanels",{get:function(){return getDirectChildren(this.host,"nano-tab-content")},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"getActiveTab",{get:function(){return this.getAllActiveTabs.find((function(t){return t.active}))},enumerable:false,configurable:true});t.prototype.setActiveTab=function(t,a){var e=this;if(a===void 0){a=true}if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){var o=this.activeTab;this.activeTab=t;this.tab=t.panel;this.getAllActiveTabs.map((function(t){return t.active=t===e.activeTab}));this.getAllPanels.map((function(t){if(t.name===e.activeTab.panel){t.active=true;e.activePanel=t}else t.active=false;t.removeAttribute("animation-dir")}));this.syncActiveTabIndicator();if(["top"].includes(this.placement)){scrollIntoView(this.activeTab,this.nav,"horizontal","center")}if(a){if(o){this.nanoTabHide.emit({name:o.panel})}this.nanoTabShow.emit({name:this.activeTab.panel})}}};t.prototype.setAriaLabels=function(){var t=this.getAllActiveTabs;var a=this.getAllPanels;t.map((function(t){var e=a.find((function(a){return a.name===t.panel}));if(e){t.setAttribute("aria-controls",e.getAttribute("id"));e.setAttribute("aria-labelledby",t.getAttribute("id"))}}))};t.prototype.syncActiveTabIndicator=function(){var t=this;var a;this.getAllTabs.forEach((function(a){return a.setAttribute("direction",t.placement==="top"?"horizontal":"vertical")}));var e=this.getActiveTab;var o=((a=e.shadowRoot.querySelector(".nanotab"))===null||a===void 0?void 0:a.clientWidth)||0;var n=e.clientHeight;var r=getOffset(e,this.tabs);var i=r.top+this.nav.scrollTop;var s=r.left;switch(this.placement){case"top":this.activeTabIndicator.style.width=o+"px";this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform="translateX("+s+"px)";break;case"start":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=n+"px";this.activeTabIndicator.style.transform="translateY("+i+"px)";break}};t.prototype.getNavWidth=function(){if(!this.nav)return 0;var t=getComputedStyle(this.nav);var a=this.nav.clientWidth;return a-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)};t.prototype.handleTabClose=function(t){var a;var e=this.getAllActiveTabs.indexOf(t.target);var o=t.target;if(e<0)return;var n=this.getAllPanels.find((function(t){return t.name===o.panel}));if(!n)return;t.stopImmediatePropagation();var r=this.nanoTabWillClose.emit({name:o.panel});if(r.defaultPrevented)return;if(o.active){e=e===0?1:e-1;var i=(a=this.getAllActiveTabs[e])===null||a===void 0?void 0:a.panel;if(i)this.host.show(i)}o.remove();n.remove();this.nanoTabClose.emit({name:o.panel})};t.prototype.componentDidLoad=function(){var t=this;var a=new IntersectionObserver((function(a,e){if(a[0].intersectionRatio>0){t.setAriaLabels();t.setActiveTab(t.getActiveTab||t.getAllActiveTabs[0],false);if(t.storeId)ComponentStore.init(t,["tab"],t.storeMethod,t.storeId);e.unobserve(a[0].target)}}));a.observe(this.host);focusVisible.observe(this.tabGroup);if(this.leftBtn){focusVisible.observe(this.leftBtn);focusVisible.observe(this.rightBtn)}this.resizeObserver=new index((function(){setTimeout((function(){t.updateScrollControls();t.syncActiveTabIndicator();scrollIntoView(t.activeTab,t.nav,"horizontal","center")}),500)}));this.resizeObserver.observe(this.nav);raf((function(){return t.updateScrollControls()}))};t.prototype.connectedCallback=function(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"};t.prototype.disconnectedCallback=function(){focusVisible.unobserve(this.tabGroup);if(this.leftBtn){focusVisible.unobserve(this.leftBtn);focusVisible.unobserve(this.rightBtn)}if(this.resizeObserver)this.resizeObserver.unobserve(this.nav)};t.prototype.render=function(){var t=this;this.isRtl=this.host.ownerDocument.dir==="rtl";return h(Host,{class:Object.assign(Object.assign({},createColorClasses(this.color)),{legacy:this.isLegacy}),dir:this.isRtl?"rtl":null},h("div",{part:"base",ref:function(a){return t.tabGroup=a},class:{"nano-tab-group":true,"nano-tab-group--top":this.placement==="top","nano-tab-group--start":this.placement==="start","nano-tab-group--has-scroll-controls":this.hasScrollControls,"nano-tab-group--has-scroll-controls-left":!this.hideControlLeft,"nano-tab-group--has-scroll-controls-right":!this.hideControlRight},onClick:this.handleClick,onKeyDown:this.handleKeyDown},h("div",{class:"nano-tab-group__nav-container",part:"nav"},this.placement==="top"&&h("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--left":true},ref:function(a){return t.leftBtn=a},onClick:function(){return t.handleBtnClick(false)}},h("nano-icon",{name:"light/chevron-left"})),h("div",{ref:function(a){return t.nav=a},class:"nano-tab-group__nav",onScroll:this.handleTabScroll},h("div",{ref:function(a){return t.tabs=a},part:"tabs",class:"nano-tab-group__tabs",role:"tablist"},h("div",{ref:function(a){return t.activeTabIndicator=a},part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),h("slot",{name:"tabs",onSlotchange:this.handleTabSlotChange}))),this.placement==="top"&&h("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--right":true},ref:function(a){return t.rightBtn=a},onClick:function(){return t.handleBtnClick(true)}},h("nano-icon",{name:"light/chevron-right"}))),h("slot",{name:"tab-content-header"}),h("div",{part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},h("slot",{onSlotchange:this.handleContentSlotChange}))))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}},enumerable:false,configurable:true});return t}();TabGroup.style=tabGroupCss;export{TabGroup as nano_tab_group};
 //# sourceMappingURL=nano-tab-group.entry.js.map