@nanoporetech-digital/components 2.1.4 → 2.2.0

package/dist/nano-components/p-3ad1d5aa.system.entry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["src/components/hero/hero.scss?tag=nano-hero&encapsulation=shadow","src/components/hero/hero.tsx"],"names":["heroCss","Hero","exports","class_1","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"]}
+{"version":3,"sources":["src/components/hero/hero.scss?tag=nano-hero&encapsulation=shadow","src/components/hero/hero.tsx"],"names":["heroCss","Hero","exports","class_1","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/nano-components/{p-3cf35ac4.system.entry.js → p-3f736fa2.system.entry.js}

@@ -1,5 +1,5 @@
 var __awaiter=this&&this.__awaiter||function(t,a,n,o){function e(t){return t instanceof n?t:new n((function(a){a(t)}))}return new(n||(n=Promise))((function(n,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?n(t.value):e(t.value).then(i,s)}l((o=o.apply(t,a||[])).next())}))};var __generator=this&&this.__generator||function(t,a){var n={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},o,e,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(n)try{if(o=1,e&&(r=i[0]&2?e["return"]:i[0]?e["throw"]||((r=e["return"])&&r.call(e),0):e.next)&&!(r=r.call(e,i[1])).done)return r;if(e=0,r)i=[i[0]&2,r.value];switch(i[0]){case 0:case 1:r=i;break;case 4:n.label++;return{value:i[1],done:false};case 5:n.label++;e=i[1];i=[0];continue;case 7:i=n.ops.pop();n.trys.pop();continue;default:if(!(r=n.trys,r=r.length>0&&r[r.length-1])&&(i[0]===6||i[0]===2)){n=0;continue}if(i[0]===3&&(!r||i[1]>r[0]&&i[1]<r[3])){n.label=i[1];break}if(i[0]===6&&n.label<r[1]){n.label=r[1];r=i;break}if(r&&n.label<r[2]){n.label=r[2];n.ops.push(i);break}if(r[2])n.ops.pop();n.trys.pop();continue}i=a.call(t,n)}catch(s){i=[6,s];e=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
- */System.register(["./p-59b3d24b.system.js","./p-b430a9b6.system.js","./p-b370e3ef.system.js","./p-0784f2ad.system.js","./p-1c216ca4.system.js","./p-e1f46998.system.js","./p-1d13dbdf.system.js","./p-89edc042.system.js","./p-9edbf25d.system.js","./p-ef053a2f.system.js"],(function(t){"use strict";var a,n,o,e,r,i,s,l,c,b,d,u,p,h;return{setters:[function(t){a=t.r;n=t.c;o=t.h;e=t.e;r=t.g},function(t){i=t.i},function(t){s=t.s},function(t){l=t.f},function(t){c=t.d;b=t.r},function(t){d=t.C},function(t){u=t.g;p=t.a},function(t){h=t.c},function(){},function(){}],execute:function(){var g=':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 f=t("nano_tab_group",function(){function t(t){var o=this;a(this,t);this.nanoTabShow=n(this,"nanoTabShow",7);this.nanoTabHide=n(this,"nanoTabHide",7);this.nanoTabWillClose=n(this,"nanoTabWillClose",7);this.nanoTabClose=n(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(o.noScrollControls){o.hasScrollControls=false}else{o.hasScrollControls=["top"].includes(o.placement)&&o.nav.scrollWidth>o.nav.clientWidth&&o.nav.scrollWidth>o.tabs.clientWidth}};this.handleClick=function(t){var a=t.target;var n=a.closest("nano-tab");if(n)o.setActiveTab(n)};this.handleKeyDown=function(t){if(["Enter"," "].includes(t.key)){var a=t.target;var n=a.closest("nano-tab");if(n){o.setActiveTab(n);t.preventDefault()}}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){var e=document.activeElement;if(e&&e.tagName.toLowerCase()==="nano-tab"){var r=o.getAllActiveTabs;var i=r.indexOf(e);if(t.key==="Home"){i=0}else if(t.key==="End"){i=r.length-1}else if(o.isRtl&&t.key==="ArrowRight"||!o.isRtl&&t.key==="ArrowLeft"){i=Math.max(0,i-1)}else if(o.isRtl&&t.key==="ArrowLeft"||!o.isRtl&&t.key==="ArrowRight"){i=Math.min(r.length-1,i+1)}r[i].setFocus();if(["top"].includes(o.placement)){s(r[i],o.nav,"horizontal","center")}t.preventDefault()}}};this.handleTabScroll=function(){if(!o.hasScrollControls){o.hideControlLeft=o.hideControlRight=true;return}var t=o.isRtl?o.nav.scrollLeft===0:o.nav.scrollWidth-o.nav.scrollLeft===o.nav.clientWidth;var a=o.isRtl?o.nav.scrollWidth+o.nav.scrollLeft===o.nav.clientWidth:o.nav.scrollLeft===0;if(a){o.hideControlLeft=true;o.hideControlRight=false}else if(t){o.hideControlLeft=false;o.hideControlRight=true}else{o.hideControlRight=false;o.hideControlLeft=false}};this.handleBtnClick=function(t){if(t===void 0){t=false}var a=o.getNavWidth();var n;if(t)n=o.nav.scrollLeft+a-20;else n=o.nav.scrollLeft-a+20;try{o.nav.scroll({left:n,behavior:"smooth"})}catch(e){o.nav.scrollLeft=n}};this.handleTouchStart=function(t){if(o.disableSwipe)return;var a=t.changedTouches[0];o.initialTouchX=a.pageX;o.initialTouchY=a.pageY};this.handleTouchEnd=function(t){if(o.disableSwipe)return;var a=t.changedTouches[0];var n=a.pageX-o.initialTouchX;var e=a.pageY-o.initialTouchY;var r=70;var i=o.initialTouchX-a.clientX;var s=o.initialTouchY-a.clientY;var l=Math.abs(n)>=r&&Math.abs(e)<=r;var c=o.getAllActiveTabs;var b=c.findIndex((function(t){return t.active}));if(l){var d=n<0&&o.placement==="top"||n>0&&o.placement!=="top"?1:-1;if(c[b+d]){o.setActiveTab(c[b+d]);if(Math.abs(i)>Math.abs(s)){if(i>0)o.activePanel.setAttribute("animation-dir","left");else o.activePanel.setAttribute("animation-dir","right")}}}o.initialTouchX=null;o.initialTouchY=null};this.handleContentSlotChange=function(){setTimeout((function(){o.setAriaLabels();o.setActiveTab(o.getActiveTab||o.getAllActiveTabs[0],false)}))};this.handleTabSlotChange=function(t){setTimeout((function(){o.setAriaLabels();o.handleTabScroll();o.setActiveTab(o.getActiveTab||o.getAllActiveTabs[0],false);o.updateScrollControls()}),500);var a=t.target.assignedNodes({flatten:true});a.forEach((function(t){if(!o.mutationObservers.get(t)){var a=new MutationObserver((function(){setTimeout((function(){o.syncActiveTabIndicator();o.handleTabScroll();o.updateScrollControls()}),500)}));o.mutationObservers.set(t,a);a.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;c(this.rightBtn,"is-shown",!this.hideControlRight)};t.prototype.hideLeftBtn=function(){if(!this.leftBtn)return;c(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(n){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 u(this.host,"nano-tab")},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"getAllPanels",{get:function(){return u(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 n=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===n.activeTab}));this.getAllPanels.map((function(t){if(t.name===n.activeTab.panel){t.active=true;n.activePanel=t}else t.active=false;t.removeAttribute("animation-dir")}));this.syncActiveTabIndicator();if(["top"].includes(this.placement)){s(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 n=a.find((function(a){return a.name===t.panel}));if(n){t.setAttribute("aria-controls",n.getAttribute("id"));n.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 n=this.getActiveTab;var o=((a=n.shadowRoot.querySelector(".nanotab"))===null||a===void 0?void 0:a.clientWidth)||0;var e=n.clientHeight;var r=p(n,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=e+"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 n=this.getAllActiveTabs.indexOf(t.target);var o=t.target;if(n<0)return;var e=this.getAllPanels.find((function(t){return t.name===o.panel}));if(!e)return;t.stopImmediatePropagation();var r=this.nanoTabWillClose.emit({name:o.panel});if(r.defaultPrevented)return;if(o.active){n=n===0?1:n-1;var i=(a=this.getAllActiveTabs[n])===null||a===void 0?void 0:a.panel;if(i)this.host.show(i)}o.remove();e.remove();this.nanoTabClose.emit({name:o.panel})};t.prototype.componentDidLoad=function(){var t=this;var a=new IntersectionObserver((function(a,n){if(a[0].intersectionRatio>0){t.setAriaLabels();t.setActiveTab(t.getActiveTab||t.getAllActiveTabs[0],false);if(t.storeId)d.init(t,["tab"],t.storeMethod,t.storeId);n.unobserve(a[0].target)}}));a.observe(this.host);l.observe(this.tabGroup);if(this.leftBtn){l.observe(this.leftBtn);l.observe(this.rightBtn)}this.resizeObserver=new i((function(){setTimeout((function(){t.updateScrollControls();t.syncActiveTabIndicator()}),500)}));this.resizeObserver.observe(this.nav);b((function(){return t.updateScrollControls()}))};t.prototype.connectedCallback=function(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"};t.prototype.disconnectedCallback=function(){l.unobserve(this.tabGroup);if(this.leftBtn){l.unobserve(this.leftBtn);l.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 o(e,{class:Object.assign(Object.assign({},h(this.color)),{legacy:this.isLegacy}),dir:this.isRtl?"rtl":null},o("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},o("div",{class:"nano-tab-group__nav-container",part:"nav"},this.placement==="top"&&o("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)}},o("nano-icon",{name:"light/chevron-left"})),o("div",{ref:function(a){return t.nav=a},class:"nano-tab-group__nav",onScroll:this.handleTabScroll},o("div",{ref:function(a){return t.tabs=a},part:"tabs",class:"nano-tab-group__tabs",role:"tablist"},o("div",{ref:function(a){return t.activeTabIndicator=a},part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),o("slot",{name:"tabs",onSlotchange:this.handleTabSlotChange}))),this.placement==="top"&&o("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)}},o("nano-icon",{name:"light/chevron-right"}))),o("slot",{name:"tab-content-header"}),o("div",{part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},o("slot",{onSlotchange:this.handleContentSlotChange}))))};Object.defineProperty(t.prototype,"host",{get:function(){return r(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}());f.style=g}}}));
-//# sourceMappingURL=p-3cf35ac4.system.entry.js.map
+ */System.register(["./p-59b3d24b.system.js","./p-b430a9b6.system.js","./p-b370e3ef.system.js","./p-0784f2ad.system.js","./p-1c216ca4.system.js","./p-e1f46998.system.js","./p-1d13dbdf.system.js","./p-89edc042.system.js","./p-9edbf25d.system.js","./p-ef053a2f.system.js"],(function(t){"use strict";var a,n,o,e,r,i,s,l,c,b,d,u,p,h;return{setters:[function(t){a=t.r;n=t.c;o=t.h;e=t.e;r=t.g},function(t){i=t.i},function(t){s=t.s},function(t){l=t.f},function(t){c=t.d;b=t.r},function(t){d=t.C},function(t){u=t.g;p=t.a},function(t){h=t.c},function(){},function(){}],execute:function(){var g=':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 f=t("nano_tab_group",function(){function t(t){var o=this;a(this,t);this.nanoTabShow=n(this,"nanoTabShow",7);this.nanoTabHide=n(this,"nanoTabHide",7);this.nanoTabWillClose=n(this,"nanoTabWillClose",7);this.nanoTabClose=n(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(o.noScrollControls){o.hasScrollControls=false}else{o.hasScrollControls=["top"].includes(o.placement)&&o.nav.scrollWidth>o.nav.clientWidth&&o.nav.scrollWidth>o.tabs.clientWidth}};this.handleClick=function(t){var a=t.target;var n=a.closest("nano-tab");if(n)o.setActiveTab(n)};this.handleKeyDown=function(t){if(["Enter"," "].includes(t.key)){var a=t.target;var n=a.closest("nano-tab");if(n){o.setActiveTab(n);t.preventDefault()}}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){var e=document.activeElement;if(e&&e.tagName.toLowerCase()==="nano-tab"){var r=o.getAllActiveTabs;var i=r.indexOf(e);if(t.key==="Home"){i=0}else if(t.key==="End"){i=r.length-1}else if(o.isRtl&&t.key==="ArrowRight"||!o.isRtl&&t.key==="ArrowLeft"){i=Math.max(0,i-1)}else if(o.isRtl&&t.key==="ArrowLeft"||!o.isRtl&&t.key==="ArrowRight"){i=Math.min(r.length-1,i+1)}r[i].setFocus();if(["top"].includes(o.placement)){s(r[i],o.nav,"horizontal","center")}t.preventDefault()}}};this.handleTabScroll=function(){if(!o.hasScrollControls){o.hideControlLeft=o.hideControlRight=true;return}var t=o.isRtl?o.nav.scrollLeft===0:o.nav.scrollWidth-o.nav.scrollLeft===o.nav.clientWidth;var a=o.isRtl?o.nav.scrollWidth+o.nav.scrollLeft===o.nav.clientWidth:o.nav.scrollLeft===0;if(a){o.hideControlLeft=true;o.hideControlRight=false}else if(t){o.hideControlLeft=false;o.hideControlRight=true}else{o.hideControlRight=false;o.hideControlLeft=false}};this.handleBtnClick=function(t){if(t===void 0){t=false}var a=o.getNavWidth();var n;if(t)n=o.nav.scrollLeft+a-20;else n=o.nav.scrollLeft-a+20;try{o.nav.scroll({left:n,behavior:"smooth"})}catch(e){o.nav.scrollLeft=n}};this.handleTouchStart=function(t){if(o.disableSwipe)return;var a=t.changedTouches[0];o.initialTouchX=a.pageX;o.initialTouchY=a.pageY};this.handleTouchEnd=function(t){if(o.disableSwipe)return;var a=t.changedTouches[0];var n=a.pageX-o.initialTouchX;var e=a.pageY-o.initialTouchY;var r=70;var i=o.initialTouchX-a.clientX;var s=o.initialTouchY-a.clientY;var l=Math.abs(n)>=r&&Math.abs(e)<=r;var c=o.getAllActiveTabs;var b=c.findIndex((function(t){return t.active}));if(l){var d=n<0&&o.placement==="top"||n>0&&o.placement!=="top"?1:-1;if(c[b+d]){o.setActiveTab(c[b+d]);if(Math.abs(i)>Math.abs(s)){if(i>0)o.activePanel.setAttribute("animation-dir","left");else o.activePanel.setAttribute("animation-dir","right")}}}o.initialTouchX=null;o.initialTouchY=null};this.handleContentSlotChange=function(){setTimeout((function(){o.setAriaLabels();o.setActiveTab(o.getActiveTab||o.getAllActiveTabs[0],false)}))};this.handleTabSlotChange=function(t){setTimeout((function(){o.setAriaLabels();o.handleTabScroll();o.setActiveTab(o.getActiveTab||o.getAllActiveTabs[0],false);o.updateScrollControls()}),500);var a=t.target.assignedNodes({flatten:true});a.forEach((function(t){if(!o.mutationObservers.get(t)){var a=new MutationObserver((function(){setTimeout((function(){o.syncActiveTabIndicator();o.handleTabScroll();o.updateScrollControls()}),500)}));o.mutationObservers.set(t,a);a.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;c(this.rightBtn,"is-shown",!this.hideControlRight)};t.prototype.hideLeftBtn=function(){if(!this.leftBtn)return;c(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(n){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 u(this.host,"nano-tab")},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"getAllPanels",{get:function(){return u(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 n=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===n.activeTab}));this.getAllPanels.map((function(t){if(t.name===n.activeTab.panel){t.active=true;n.activePanel=t}else t.active=false;t.removeAttribute("animation-dir")}));this.syncActiveTabIndicator();if(["top"].includes(this.placement)){s(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 n=a.find((function(a){return a.name===t.panel}));if(n){t.setAttribute("aria-controls",n.getAttribute("id"));n.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 n=this.getActiveTab;var o=((a=n.shadowRoot.querySelector(".nanotab"))===null||a===void 0?void 0:a.clientWidth)||0;var e=n.clientHeight;var r=p(n,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=e+"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 n=this.getAllActiveTabs.indexOf(t.target);var o=t.target;if(n<0)return;var e=this.getAllPanels.find((function(t){return t.name===o.panel}));if(!e)return;t.stopImmediatePropagation();var r=this.nanoTabWillClose.emit({name:o.panel});if(r.defaultPrevented)return;if(o.active){n=n===0?1:n-1;var i=(a=this.getAllActiveTabs[n])===null||a===void 0?void 0:a.panel;if(i)this.host.show(i)}o.remove();e.remove();this.nanoTabClose.emit({name:o.panel})};t.prototype.componentDidLoad=function(){var t=this;var a=new IntersectionObserver((function(a,n){if(a[0].intersectionRatio>0){t.setAriaLabels();t.setActiveTab(t.getActiveTab||t.getAllActiveTabs[0],false);if(t.storeId)d.init(t,["tab"],t.storeMethod,t.storeId);n.unobserve(a[0].target)}}));a.observe(this.host);l.observe(this.tabGroup);if(this.leftBtn){l.observe(this.leftBtn);l.observe(this.rightBtn)}this.resizeObserver=new i((function(){setTimeout((function(){t.updateScrollControls();t.syncActiveTabIndicator();s(t.activeTab,t.nav,"horizontal","center")}),500)}));this.resizeObserver.observe(this.nav);b((function(){return t.updateScrollControls()}))};t.prototype.connectedCallback=function(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"};t.prototype.disconnectedCallback=function(){l.unobserve(this.tabGroup);if(this.leftBtn){l.unobserve(this.leftBtn);l.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 o(e,{class:Object.assign(Object.assign({},h(this.color)),{legacy:this.isLegacy}),dir:this.isRtl?"rtl":null},o("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},o("div",{class:"nano-tab-group__nav-container",part:"nav"},this.placement==="top"&&o("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)}},o("nano-icon",{name:"light/chevron-left"})),o("div",{ref:function(a){return t.nav=a},class:"nano-tab-group__nav",onScroll:this.handleTabScroll},o("div",{ref:function(a){return t.tabs=a},part:"tabs",class:"nano-tab-group__tabs",role:"tablist"},o("div",{ref:function(a){return t.activeTabIndicator=a},part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),o("slot",{name:"tabs",onSlotchange:this.handleTabSlotChange}))),this.placement==="top"&&o("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)}},o("nano-icon",{name:"light/chevron-right"}))),o("slot",{name:"tab-content-header"}),o("div",{part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},o("slot",{onSlotchange:this.handleContentSlotChange}))))};Object.defineProperty(t.prototype,"host",{get:function(){return r(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}());f.style=g}}}));
+//# sourceMappingURL=p-3f736fa2.system.entry.js.map

package/dist/nano-components/p-3f736fa2.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/tabs/tab-group.scss?tag=nano-tab-group&encapsulation=shadow","src/components/tabs/tab-group.tsx"],"names":["tabGroupCss","TabGroup","exports","class_1","hostRef","_this","this","initialTouchX","initialTouchY","mutationObservers","WeakMap","hasScrollControls","hideControlRight","hideControlLeft","isLegacy","document","head","attachShadow","placement","noScrollControls","storeMethod","updateScrollControls","includes","nav","scrollWidth","clientWidth","tabs","handleClick","event","target","tab","closest","setActiveTab","handleKeyDown","key","preventDefault","activeEl","activeElement","tagName","toLowerCase","getAllActiveTabs","index_1","indexOf","length","isRtl","Math","max","min","setFocus","scrollIntoView","handleTabScroll","endRight","scrollLeft","endLeft","handleBtnClick","goRight","navWidth","getNavWidth","leftAmt","scroll","left","behavior","e","handleTouchStart","disableSwipe","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","distY","threshold","xDiff","clientX","yDiff","clientY","isHorizontalSwipe","abs","currIndex","findIndex","el","active","toGo","activePanel","setAttribute","handleContentSlotChange","setTimeout","setAriaLabels","getActiveTab","handleTabSlotChange","ev","nodes","assignedNodes","flatten","forEach","node","get","mo","MutationObserver","syncActiveTabIndicator","set","observe","characterData","childList","subtree","prototype","handleTabNameChange","activeTab","panel","find","handlePlacementChange","handleNoScrollControlsChange","hideRightBtn","rightBtn","displayTransition","hideLeftBtn","leftBtn","watchScrollControls","_","show","Object","defineProperty","getAllTabs","filter","disabled","getDirectChildren","host","emitEvents","previousTab","map","getAllPanels","name","removeAttribute","nanoTabHide","emit","nanoTabShow","panels","getAttribute","width","_a","shadowRoot","querySelector","height","clientHeight","offset","getOffset","offsetTop","top","scrollTop","offsetLeft","activeTabIndicator","style","transform","computedStyle","getComputedStyle","parseFloat","paddingLeft","paddingRight","handleTabClose","tabIndex","stopImmediatePropagation","closeEv","nanoTabWillClose","defaultPrevented","prevTab","remove","nanoTabClose","componentDidLoad","observer","IntersectionObserver","entries","intersectionRatio","storeId","ComponentStore","init","unobserve","focusVisible","tabGroup","resizeObserver","ResizeObserver","raf","connectedCallback","dir","ownerDocument","disconnectedCallback","render","h","Host","class","assign","createColorClasses","color","legacy","part","ref","nano-tab-group","nano-tab-group--top","nano-tab-group--start","nano-tab-group--has-scroll-controls","nano-tab-group--has-scroll-controls-left","nano-tab-group--has-scroll-controls-right","onClick","onKeyDown","nano-tab-group__scroll-button","nano-tab-group__scroll-button--left","btn","onScroll","role","onSlotchange","nano-tab-group__scroll-button--right","onTouchStart","onTouchEnd"],"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/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/**\n  * @prop --indicator-transition: Only relevant to placement 'start'. defaults to #{$transition-fast};\n  * @prop --indicator-color: defaults to #{map.get($colors, lightblue)} on placement 'top' and #{map.get($colors, blue)} on placement 'start';\n  * @prop --indicator-track-color: Only relevant to placement 'start'. defaults to #{map.get($colors, lightgrey)};\n  * @prop --indicator-size: defaults to 5px on placement 'top' and 2px on placement 'start';\n\n  * @prop --border-radius: defaults to #{$layer-border-radius};\n  * @prop --background-rgb: will be used as the default background colour for tabs and content. defaults to #{$layer-bg-color-rgb};\n  * @prop --shadow-opacity: opacity of the shadow behind tabs. defaults to 0.1;\n  * @prop --scroll-btn-color: defaults to 'currentColor';\n\n  * @prop --content-padding: defaults to 2rem 2.5rem;\n  * @prop --content-bg: defaults to rgb(var(--background-rgb));\n  * @prop --content-border-radius: defaults to var(--border-radius);\n\n  * @prop --tabs-padding-start: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n  * @prop --tabs-padding-end: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n  * @prop --tabs-padding-top: defaults to 0;\n  * @prop --tabs-padding-bottom: defaults to 0;\n  * @prop --tabs-bg-rgb: defaults to var(--bg-color);\n  * @prop --tab-border-radius: defaults to var(--border-radius);\n  * @prop --tab-text-color: defaults to #{map.get($colors, blue)} on placement 'top' and #{map.get($colors, darkgrey)} on placement 'start';\n  */\n\n:host {\n  --indicator-transition: #{$transition-fast};\n  --indicator-color: #{map.get($colors, lightblue)};\n  --indicator-track-color: #{map.get($colors, lightgrey)};\n  --indicator-size: 0;\n  --border-radius: #{$layer-border-radius};\n  --background-rgb: #{$layer-bg-color-rgb};\n  --scroll-btn-color: 'currentColor';\n  --content-padding: 2rem 2.5rem;\n  --content-bg: rgb(var(--background-rgb));\n  --content-border-radius: var(--border-radius);\n  --tabs-padding-start: 2.5rem;\n  --tabs-padding-end: 2.5rem;\n  --tabs-padding-top: 0;\n  --tabs-padding-bottom: 0;\n  --tabs-container-bg: 'transparent';\n  --tabs-bg-rgb: var(--background-rgb);\n  --tab-border-radius: var(--border-radius);\n  --tab-text-color: #{map.get($colors, blue)};\n  --shadow-opacity: 0.1;\n\n  display: block;\n  position: relative;\n  z-index: #{$layer-index-raised};\n\n  @media only screen and (max-width: 768px) {\n    --tabs-padding-start: 1.5rem;\n    --tabs-padding-end: 1.5rem;\n  }\n\n  ::slotted(nano-tab) {\n    --tab-indicator-color: var(--indicator-color);\n    --bg-rgb: var(--tabs-bg-rgb);\n    --border-radius: var(--tab-border-radius);\n  }\n}\n\n// IE bugfix - set this stuff statically\n:host(.legacy) {\n  ::slotted(nano-tab) {\n    --tab-indicator-color: #{map.get($colors, lightblue)};\n    --border-radius: 3px;\n    --tab-indicator-size: 5px;\n    --bg-rgb: 255, 255, 255;\n  }\n}\n\n:host([placement='start']),\n:host([placement='end']) {\n  --content-padding: 1rem;\n  --tabs-padding-start: 0;\n  --tabs-padding-end: 0;\n  --tabs-padding-top: 0;\n  --tabs-padding-bottom: 0;\n  --tab-text-color: #{map.get($colors, darkgrey)};\n  --indicator-color: #{map.get($colors, blue)};\n  --indicator-size: 2px;\n}\n\n:host(.nano-color) {\n  --indicator-color: var(--nano-color-tint, #{nano-color(primary, tint)});\n  --tab-text-color: rgba(var(--nano-color-base-rgb), 0.7);\n\n  ::slotted(nano-tab) {\n    --active-text-color: var(--nano-color-shade, #{nano-color(primary, shade)});\n  }\n}\n\n.nano-tab-group {\n  display: flex;\n  border-radius: 0;\n  width: 100%;\n  flex: inherit;\n\n  &__tabs {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n\n  &__active-tab-indicator {\n    position: absolute;\n    transition: var(--indicator-transition) transform ease, var(--indicator-transition) width ease;\n  }\n\n  &__body {\n    background: var(--content-bg);\n  }\n\n  &:not(.focus-visible) ::slotted(nano-tab) {\n    --focus-shadow: none;\n  }\n\n  .nano-tab-group__nav-container {\n    position: relative;\n    display: flex;\n    background: var(--tabs-container-bg);\n  }\n\n  button {\n    appearance: none;\n    background-color: transparent;\n  }\n\n  &__scroll-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    border: unset;\n    z-index: 2;\n    transition: #{$transition-fast} ease opacity;\n    opacity: 0;\n    color: var(--scroll-btn-color);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.is-shown {\n      opacity: 1;\n    }\n\n    &.focus-visible:focus {\n      box-shadow: #{$control-focus-style} inset;\n    }\n\n    &--left {\n      left: 0;\n    }\n\n    &--right {\n      right: 0;\n    }\n\n    nano-icon {\n      font-size: 16px;\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Top\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n  &--top {\n    flex-direction: column;\n\n    .nano-tab-group__nav-container {\n      &::after {\n        content: '';\n        width: 86%;\n        box-shadow: 0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));\n        height: 10px;\n        position: absolute;\n        left: 7%;\n        bottom: -10px;\n        border-radius: 10px;\n        z-index: -1;\n      }\n    }\n\n    .nano-tab-group__nav {\n      @include hide-scrollbar();\n      @include padding(\n        var(--tabs-padding-top),\n        var(--tabs-padding-end),\n        var(--tabs-padding-bottom),\n        var(--tabs-padding-start)\n      );\n\n      display: flex;\n      overflow-x: auto;\n      overflow-y: hidden;\n      transition: #{$transition-medium} ease;\n      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);\n      mask-repeat: no-repeat;\n      mask-image:\n        linear-gradient(\n          to left,\n          rgba(0, 0, 0, 0) 0,\n          rgba(0, 0, 0, 0) var(--tabs-padding-start),\n          rgba(0, 0, 0, 1) calc(var(--tabs-padding-start) * 2),\n          rgba(0, 0, 0, 1) calc(100% - (var(--tabs-padding-end) * 2)),\n          rgba(0, 0, 0, 0) calc(100% - var(--tabs-padding-end)),\n          rgba(0, 0, 0, 0)\n        );\n      mask-size: calc(100% + calc(var(--tabs-padding-end) * 4));\n      mask-position: calc(var(--tabs-padding-end) * -2);\n\n      &::after {\n        content: ' ';\n\n        @include padding(\n          var(--tabs-padding-top),\n          var(--tabs-padding-end),\n          var(--tabs-padding-bottom),\n          0\n        );\n\n        line-height: 1;\n        flex: 0 0 auto;\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-left {\n      .nano-tab-group__nav {\n        mask-position: 0;\n        mask-size: calc(100% + (var(--tabs-padding-end) * 2));\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-right {\n      .nano-tab-group__nav {\n        mask-position: calc(var(--tabs-padding-end) * -1);\n        mask-size: calc(100% + var(--tabs-padding-end));\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right {\n      .nano-tab-group__nav {\n        mask-size: 100%;\n        mask-position: 0;\n      }\n    }\n\n    .nano-tab-group__tabs {\n      flex: 1 1 auto;\n      position: relative;\n      flex-direction: row;\n      text-align: center;\n      color: var(--tab-text-color);\n      width: auto;\n    }\n\n    .nano-tab-group__active-tab-indicator {\n      bottom: -2px;\n      border-bottom: solid var(--indicator-size) var(--indicator-color);\n    }\n\n    .nano-tab-group__body {\n      order: 2;\n      background: var(--content-bg);\n      position: relative;\n      overflow: hidden;\n      width: auto;\n      display: flex;\n      justify-content: center;\n      padding: var(--content-padding);\n      border-radius: var(--content-border-radius);\n      flex: 1 1 auto;\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Start\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n  &--start {\n    flex-direction: row;\n\n    .nano-tab-group__tabs {\n      flex: 0 0 auto;\n      flex-direction: column;\n      color: var(--tab-text-color);\n      background: rgb(var(--tabs-bg-rgb));\n\n      @include ltr-host() {\n        border-left: solid var(--indicator-size) var(--indicator-track-color);\n        text-align: left;\n      }\n\n      @include rtl-host() {\n        border-right: solid var(--indicator-size) var(--indicator-track-color);\n        text-align: right;\n      }\n    }\n\n    .nano-tab-group__active-tab-indicator {\n      @include ltr-host() {\n        left: calc(-1 * 2px);\n        border-left: solid var(--indicator-size) var(--indicator-color);\n      }\n\n      @include rtl-host() {\n        right: calc(-1 * 2px);\n        border-right: solid var(--indicator-size) var(--indicator-color);\n      }\n    }\n\n    .nano-tab-group__body {\n      flex: 1 1 auto;\n      order: 2;\n      padding: var(--content-padding);\n      overflow: hidden;\n\n      @include border-radius(\n        0,\n        var(--content-border-radius),\n        var(--content-border-radius),\n        0\n      );\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  Listen,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { scrollIntoView } from '../../utils/scroll';\nimport { focusVisible } from '../../utils/focus-visible';\nimport {\n  displayTransition,\n  createColorClasses,\n  getOffset,\n  getDirectChildren,\n  raf,\n} from '../../utils';\nimport { Color } from '../../interface';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\n/**\n * A tradtional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.\n *\n * Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.\n * Horizonal tabs that don't fit will overflow and scroll appropriately.\n * Tab-content can also be swiped to change tabs.\n *\n * @slot tabs - Add `nano-tab` elements to add clickable tabs.\n * @slot tab-content-header - a header bar displayed above tab content.\n * @slot - Add `nano-tab-content` elements to add tabbable content.\n *\n * @part base - the main tab-group wrapper\n * @part nav - the bar surrounding all the tabs and nav buttons\n * @part tabs - the wrapper around the `nano-tab` components\n * @part active-tab-indicator - the active indicator line\n * @part body - the wrapper around the `nano-tab-content` components\n */\n\n@Component({\n  tag: 'nano-tab-group',\n  styleUrl: 'tab-group.scss',\n  shadow: true,\n})\nexport class TabGroup implements ComponentInterface {\n  private activeTab: HTMLNanoTabElement;\n  private activePanel: HTMLNanoTabContentElement;\n  private activeTabIndicator: HTMLElement;\n  private nav: HTMLElement;\n  private tabGroup: HTMLElement;\n  private tabs: HTMLElement;\n  private rightBtn: HTMLButtonElement;\n  private leftBtn: HTMLButtonElement;\n\n  private isRtl: boolean;\n  private initialTouchX: number = null;\n  private initialTouchY: number = null;\n\n  private resizeObserver: ResizeObserver;\n  private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n  @Element() host: HTMLNanoTabGroupElement;\n\n  @State() hasScrollControls = false;\n  @State() hideControlRight = true;\n  @State() hideControlLeft = true;\n  @State() isLegacy = !document.head.attachShadow;\n  @State() tab: string;\n\n  /**\n   * The placement of the tabs.\n   */\n  @Prop() placement: 'top' | 'start' = 'top';\n\n  /**\n   * Disables the scroll arrows that appear when tabs overflow.\n   */\n  @Prop() noScrollControls = false;\n\n  /**\n   * The color to use from the application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Store the currently open tab (against this ID) in the component store.\n   * Use in conjunction with storeMethod\n   */\n  @Prop() storeId?: string;\n\n  /**\n   * The method of storage.\n   * Either session storage, url hash (after the '#') or url query (after the '?').\n   */\n  @Prop() storeMethod: StorageMethods = 'session';\n\n  /**\n   * Disable 'swipe to change tab' on devices with touch\n   */\n  @Prop() disableSwipe: boolean;\n\n  @Watch('tab')\n  handleTabNameChange() {\n    if (this.activeTab && this.activeTab.panel === this.tab) return;\n    const tab = this.getAllActiveTabs.find((el) => el.panel === this.tab);\n    this.setActiveTab(tab);\n  }\n\n  @Watch('placement')\n  handlePlacementChange() {\n    this.syncActiveTabIndicator();\n  }\n\n  @Watch('noScrollControls')\n  handleNoScrollControlsChange() {\n    this.updateScrollControls();\n  }\n\n  @Watch('hideControlRight')\n  hideRightBtn() {\n    if (!this.rightBtn) return;\n    displayTransition(this.rightBtn, 'is-shown', !this.hideControlRight);\n  }\n\n  @Watch('hideControlLeft')\n  hideLeftBtn() {\n    if (!this.leftBtn) return;\n    displayTransition(this.leftBtn, 'is-shown', !this.hideControlLeft);\n  }\n\n  @Watch('hasScrollControls')\n  watchScrollControls() {\n    if (this.hasScrollControls) setTimeout((_) => this.handleTabScroll(), 20);\n    else\n      setTimeout((_) => {\n        this.hideControlLeft = this.hideControlRight = true;\n      }, 20);\n  }\n\n  /** Emitted when a tab is shown. */\n  @Event() nanoTabShow: EventEmitter<{ name: string }>;\n\n  /** Emitted when a tab is hidden. */\n  @Event() nanoTabHide: EventEmitter<{ name: string }>;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event() nanoTabWillClose: EventEmitter<{ name: string }>;\n\n  /** Emitted when a closable tab is removed. */\n  @Event() nanoTabClose: EventEmitter<{ name: string }>;\n\n  /** Shows the specified tab panel. */\n  @Method()\n  async show(panel: string) {\n    if (this.activeTab && this.activeTab.panel === panel) return;\n\n    const tab = this.getAllActiveTabs.find((el) => el.panel === panel);\n\n    if (tab) this.setActiveTab(tab);\n  }\n\n  // Internal Methods\n\n  get getAllActiveTabs() {\n    return this.getAllTabs.filter((el: any) => !el.disabled);\n  }\n\n  get getAllTabs() {\n    return getDirectChildren<HTMLNanoTabElement>(this.host, 'nano-tab');\n  }\n\n  get getAllPanels() {\n    return getDirectChildren<HTMLNanoTabContentElement>(\n      this.host,\n      'nano-tab-content'\n    );\n  }\n\n  get getActiveTab() {\n    return this.getAllActiveTabs.find((el) => el.active);\n  }\n\n  private updateScrollControls = () => {\n    if (this.noScrollControls) {\n      this.hasScrollControls = false;\n    } else {\n      this.hasScrollControls =\n        ['top'].includes(this.placement) &&\n        this.nav.scrollWidth > this.nav.clientWidth &&\n        this.nav.scrollWidth > this.tabs.clientWidth;\n    }\n  };\n\n  private setActiveTab(tab: HTMLNanoTabElement, emitEvents = true) {\n    if (\n      tab &&\n      tab !== this.activeTab &&\n      !tab.disabled &&\n      this.getAllActiveTabs.includes(tab)\n    ) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n      this.tab = tab.panel;\n\n      // Sync tabs and panels\n      this.getAllActiveTabs.map((el) => (el.active = el === this.activeTab));\n      this.getAllPanels.map((el) => {\n        if (el.name === this.activeTab.panel) {\n          el.active = true;\n          this.activePanel = el;\n        } else el.active = false;\n        el.removeAttribute('animation-dir');\n      });\n      // active tab can be changed on init - this won't be ready. No big thing\n      this.syncActiveTabIndicator();\n      if (['top'].includes(this.placement)) {\n        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n      }\n\n      // Emit events\n      if (emitEvents) {\n        if (previousTab) {\n          this.nanoTabHide.emit({ name: previousTab.panel });\n        }\n\n        this.nanoTabShow.emit({ name: this.activeTab.panel });\n      }\n    }\n  }\n\n  private setAriaLabels() {\n    const tabs = this.getAllActiveTabs;\n    const panels = this.getAllPanels;\n\n    // Link each tab with its corresponding panel\n    tabs.map((tab) => {\n      const panel = panels.find((el) => el.name === tab.panel);\n      if (panel) {\n        tab.setAttribute('aria-controls', panel.getAttribute('id'));\n        panel.setAttribute('aria-labelledby', tab.getAttribute('id'));\n      }\n    });\n  }\n\n  private syncActiveTabIndicator() {\n    this.getAllTabs.forEach((tab) =>\n      tab.setAttribute(\n        'direction',\n        this.placement === 'top' ? 'horizontal' : 'vertical'\n      )\n    );\n\n    const tab = this.getActiveTab;\n    const width = tab.shadowRoot.querySelector('.nanotab')?.clientWidth || 0;\n    const height = tab.clientHeight;\n    const offset = getOffset(tab, this.tabs);\n    const offsetTop = offset.top + this.nav.scrollTop;\n    const offsetLeft = offset.left;\n\n    switch (this.placement) {\n      case 'top':\n        this.activeTabIndicator.style.width = `${width}px`;\n        this.activeTabIndicator.style.height = null;\n        this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;\n        break;\n\n      case 'start':\n        this.activeTabIndicator.style.width = null;\n        this.activeTabIndicator.style.height = `${height}px`;\n        this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;\n        break;\n    }\n  }\n\n  private getNavWidth() {\n    if (!this.nav) return 0;\n    const computedStyle = getComputedStyle(this.nav);\n    let clientWidth = this.nav.clientWidth;\n    return (clientWidth -=\n      parseFloat(computedStyle.paddingLeft) +\n      parseFloat(computedStyle.paddingRight));\n  }\n\n  // Event handlers\n\n  @Listen('nanoTabClose')\n  handleTabClose(ev: CustomEvent & { target: HTMLNanoTabElement }) {\n    let tabIndex = this.getAllActiveTabs.indexOf(ev.target);\n    const tab = ev.target;\n    if (tabIndex < 0) return;\n\n    const panel = this.getAllPanels.find((el) => el.name === tab.panel);\n    if (!panel) return;\n\n    ev.stopImmediatePropagation();\n\n    const closeEv = this.nanoTabWillClose.emit({ name: tab.panel });\n    if (closeEv.defaultPrevented) return;\n\n    // Show the previous tab if the tab is currently active\n    if (tab.active) {\n      tabIndex = tabIndex === 0 ? 1 : tabIndex - 1;\n      const prevTab = this.getAllActiveTabs[tabIndex]?.panel;\n      if (prevTab) this.host.show(prevTab);\n    }\n\n    tab.remove();\n    panel.remove();\n    this.nanoTabClose.emit({ name: tab.panel });\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const tab = target.closest('nano-tab');\n\n    if (tab) this.setActiveTab(tab);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Activate a tab\n    if (['Enter', ' '].includes(event.key)) {\n      const target = event.target as HTMLElement;\n      const tab = target.closest('nano-tab');\n\n      if (tab) {\n        this.setActiveTab(tab);\n        event.preventDefault();\n      }\n    }\n\n    // Move focus left or right\n    if (\n      [\n        'ArrowLeft',\n        'ArrowRight',\n        'ArrowUp',\n        'ArrowDown',\n        'Home',\n        'End',\n      ].includes(event.key)\n    ) {\n      const activeEl = document.activeElement as any;\n\n      if (activeEl && activeEl.tagName.toLowerCase() === 'nano-tab') {\n        const tabs = this.getAllActiveTabs;\n        let index = tabs.indexOf(activeEl);\n\n        if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = tabs.length - 1;\n        } else if (\n          (this.isRtl && event.key === 'ArrowRight') ||\n          (!this.isRtl && event.key === 'ArrowLeft')\n        ) {\n          index = Math.max(0, index - 1);\n        } else if (\n          (this.isRtl && event.key === 'ArrowLeft') ||\n          (!this.isRtl && event.key === 'ArrowRight')\n        ) {\n          index = Math.min(tabs.length - 1, index + 1);\n        }\n        tabs[index].setFocus();\n\n        if (['top'].includes(this.placement)) {\n          scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');\n        }\n        event.preventDefault();\n      }\n    }\n  };\n\n  private handleTabScroll = () => {\n    if (!this.hasScrollControls) {\n      this.hideControlLeft = this.hideControlRight = true;\n      return;\n    }\n    let endRight = this.isRtl\n      ? this.nav.scrollLeft === 0\n      : this.nav.scrollWidth - this.nav.scrollLeft === this.nav.clientWidth;\n    let endLeft = this.isRtl\n      ? this.nav.scrollWidth + this.nav.scrollLeft === this.nav.clientWidth\n      : this.nav.scrollLeft === 0;\n\n    if (endLeft) {\n      this.hideControlLeft = true;\n      this.hideControlRight = false;\n    } else if (endRight) {\n      this.hideControlLeft = false;\n      this.hideControlRight = true;\n    } else {\n      this.hideControlRight = false;\n      this.hideControlLeft = false;\n    }\n  };\n\n  private handleBtnClick = (goRight: boolean = false) => {\n    const navWidth = this.getNavWidth();\n    let leftAmt;\n    if (goRight) leftAmt = this.nav.scrollLeft + navWidth - 20;\n    else leftAmt = this.nav.scrollLeft - navWidth + 20;\n\n    try {\n      this.nav.scroll({\n        left: leftAmt,\n        behavior: 'smooth',\n      });\n    } catch (e) {\n      this.nav.scrollLeft = leftAmt;\n    }\n  };\n\n  private handleTouchStart = (event: TouchEvent) => {\n    if (this.disableSwipe) return;\n    const touch = event.changedTouches[0];\n    this.initialTouchX = touch.pageX;\n    this.initialTouchY = touch.pageY;\n  };\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    if (this.disableSwipe) return;\n    const touch = event.changedTouches[0];\n    const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n    const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n    const threshold = 70;\n\n    var xDiff = this.initialTouchX - touch.clientX;\n    var yDiff = this.initialTouchY - touch.clientY;\n\n    const isHorizontalSwipe =\n      Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\n\n    const tabs = this.getAllActiveTabs;\n    const currIndex = tabs.findIndex((el) => el.active);\n\n    if (isHorizontalSwipe) {\n      const toGo =\n        (distX < 0 && this.placement === 'top') ||\n        (distX > 0 && this.placement !== 'top')\n          ? 1\n          : -1;\n\n      if (tabs[currIndex + toGo]) {\n        this.setActiveTab(tabs[currIndex + toGo]);\n\n        if (Math.abs(xDiff) > Math.abs(yDiff)) {\n          if (xDiff > 0) this.activePanel.setAttribute('animation-dir', 'left');\n          else this.activePanel.setAttribute('animation-dir', 'right');\n        }\n      }\n    }\n    this.initialTouchX = null;\n    this.initialTouchY = null;\n  };\n\n  private handleContentSlotChange = () => {\n    setTimeout(() => {\n      this.setAriaLabels();\n      this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n    });\n  };\n\n  private handleTabSlotChange = (ev: Event & { target: HTMLSlotElement }) => {\n    setTimeout(() => {\n      this.setAriaLabels();\n      this.handleTabScroll();\n      this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n      this.updateScrollControls();\n    }, 500);\n\n    /** maintain a weakmap of mutation observers to maintain tab / indicator position on all changes. */\n    const nodes = ev.target.assignedNodes({ flatten: true });\n    nodes.forEach((node) => {\n      if (!this.mutationObservers.get(node)) {\n        const mo = new MutationObserver(() => {\n          setTimeout(() => {\n            this.syncActiveTabIndicator();\n            this.handleTabScroll();\n            this.updateScrollControls();\n          }, 500);\n        });\n        this.mutationObservers.set(node, mo);\n\n        mo.observe(node, {\n          characterData: true,\n          childList: true,\n          subtree: true,\n        });\n      }\n    });\n  };\n\n  // Stencil hooks\n\n  componentDidLoad() {\n    // Initial IO - watching for all content to be loaded\n    const observer = new IntersectionObserver((entries, observer) => {\n      if (entries[0].intersectionRatio > 0) {\n        this.setAriaLabels();\n        this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n\n        if (this.storeId)\n          ComponentStore.init(this, ['tab'], this.storeMethod, this.storeId);\n        observer.unobserve(entries[0].target);\n      }\n    });\n    observer.observe(this.host);\n    focusVisible.observe(this.tabGroup);\n\n    if (this.leftBtn) {\n      focusVisible.observe(this.leftBtn);\n      focusVisible.observe(this.rightBtn);\n    }\n\n    this.resizeObserver = new ResizeObserver(() => {\n      setTimeout(() => {\n        this.updateScrollControls();\n        this.syncActiveTabIndicator();\n        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n      }, 500);\n    });\n    this.resizeObserver.observe(this.nav);\n\n    raf(() => this.updateScrollControls());\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.tabGroup);\n    if (this.leftBtn) {\n      focusVisible.unobserve(this.leftBtn);\n      focusVisible.unobserve(this.rightBtn);\n    }\n    if (this.resizeObserver) this.resizeObserver.unobserve(this.nav);\n  }\n\n  render() {\n    this.isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color), legacy: this.isLegacy }}\n        dir={this.isRtl ? 'rtl' : null}\n      >\n        <div\n          part=\"base\"\n          ref={(el) => (this.tabGroup = el)}\n          class={{\n            'nano-tab-group': true,\n            'nano-tab-group--top': this.placement === 'top',\n            'nano-tab-group--start': this.placement === 'start',\n            'nano-tab-group--has-scroll-controls': this.hasScrollControls,\n            'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,\n            'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,\n          }}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div class=\"nano-tab-group__nav-container\" part=\"nav\">\n            {this.placement === 'top' && (\n              <button\n                class={{\n                  'nano-tab-group__scroll-button': true,\n                  'nano-tab-group__scroll-button--left': true,\n                }}\n                ref={(btn) => (this.leftBtn = btn)}\n                onClick={() => this.handleBtnClick(false)}\n              >\n                <nano-icon name=\"light/chevron-left\"></nano-icon>\n              </button>\n            )}\n            <div\n              ref={(el) => (this.nav = el)}\n              class=\"nano-tab-group__nav\"\n              onScroll={this.handleTabScroll}\n            >\n              <div\n                ref={(el) => (this.tabs = el)}\n                part=\"tabs\"\n                class=\"nano-tab-group__tabs\"\n                role=\"tablist\"\n              >\n                <div\n                  ref={(el) => (this.activeTabIndicator = el)}\n                  part=\"active-tab-indicator\"\n                  class=\"nano-tab-group__active-tab-indicator\"\n                />\n                <slot name=\"tabs\" onSlotchange={this.handleTabSlotChange} />\n              </div>\n            </div>\n            {this.placement === 'top' && (\n              <button\n                class={{\n                  'nano-tab-group__scroll-button': true,\n                  'nano-tab-group__scroll-button--right': true,\n                }}\n                ref={(btn) => (this.rightBtn = btn)}\n                onClick={() => this.handleBtnClick(true)}\n              >\n                <nano-icon name=\"light/chevron-right\"></nano-icon>\n              </button>\n            )}\n          </div>\n          <slot name=\"tab-content-header\" />\n          <div\n            part=\"body\"\n            class=\"nano-tab-group__body\"\n            onTouchStart={this.handleTouchStart}\n            onTouchEnd={this.handleTouchEnd}\n          >\n            <slot onSlotchange={this.handleContentSlotChange} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-4429caac.system.entry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["src/components/alert/alert.scss?tag=nano-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"names":["alertCss","toastStackTr","Object","assign","document","createElement","className","toastStackTl","toastStackBl","toastStackBr","Alert","exports","class_1","hostRef","_this","this","addedTransEnd","goingToHide","goingToShow","isModal","isToast","isShowing","open","closable","duration","Infinity","handleMouseMove","restartAutoHide","handleCloseClick","hide","handleTransitionEnd","event","propertyName","target","panel","overlay","host","hidden","nanoAfterShow","emit","nanoAfterHide","handleButtonClick","e","defaultPrevented","tagName","toLowerCase","clearTimeout","autoHideTimeout","setTimeout","Panel","h","ref","el","part","class","alert","alert--open","alert--toasty","alert--modal","alert--showing","role","aria-live","aria-atomic","aria-hidden","aria-modal","undefined","aria-label","label","onMouseMove","tabIndex","name","iconName","onClick","prototype","handleOpenChange","show","handleDurationChange","nanoShow","raf","nanoHide","toast","position","Promise","resolve","toastStack","parentElement","body","appendChild","connectedCallback","onClose","remove","querySelector","addEventListener","once","contains","modal","activate","lockBodyScrolling","originalTrigger","activeElement","onOpen","focus","preventScroll","deactivate","Modal","disconnectedCallback","unlockBodyScrolling","removeEventListener","componentDidLoad","render","Host","createColorClasses","color","showing","alert__overlay","alert__overlay--open","div"],"mappings":"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","sourcesContent":["@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --border-radius: defaults to #{$layer-border-radius};\n   * @prop --border-color: defaults to #{$layer-border-color};\n   * @prop --border-width: defaults to #{$layer-border-width};\n   * @prop --background: defaults to #{$layer-bg-color};\n   * @prop --tint-color: defaults to var(--nano-color-base, #{nano-color(primary, base)});\n   * @prop --icon-size: defaults to 1.5rem;\n   * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n   * @prop --close-button-color: defaults to #{$color-mediumgrey} ;\n   */\n\n  --border-radius: #{$layer-border-radius};\n  --border-color: #{$layer-border-color};\n  --border-width: #{$layer-border-width};\n  --background: #{$layer-bg-color};\n  --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --icon-size: 2rem;\n  --scrim-color: #{$layer-overlay-dark};\n  --close-button-color: #{$color-palegrey};\n\n  display: block;\n}\n\n:host(.nano-color) {\n  --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n}\n\n.alert {\n  position: relative;\n  background-color: var(--background);\n  border: solid var(--border-width) var(--border-color);\n  border-top-width: 4px;\n  border-top-color: var(--tint-color);\n  border-radius: var(--border-radius);\n  opacity: 0;\n  transform: scale(0.9);\n  transition:\n    #{$transition-medium} opacity ease,\n    #{$transition-fast} transform ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:not(.alert--showing) {\n    @include hidden;\n  }\n\n  &--open {\n    opacity: 1;\n    transform: none;\n  }\n\n  &--toasty,\n  &--modal {\n    box-shadow: #{$layer-shadow-large};\n    margin: #{$spacing-medium};\n  }\n}\n\n.alert__content {\n  display: flex;\n  align-items: stretch;\n}\n\n.alert__modal-wrap {\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: #{$layer-index-alert};\n}\n\n.alert__message {\n  flex: 1 1 auto;\n  padding: #{$spacing-medium};\n  overflow: hidden;\n  line-height: 1.6;\n}\n\n.alert__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.1em;\n\n  @include padding(0, #{$spacing-medium}, 0, 0);\n\n  --color: var(--close-button-color);\n}\n\n.alert__footer {\n  padding: 0 #{$spacing-small} 0;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  align-items: center;\n\n  ::slotted(*),\n  &::slotted(*) {\n    flex: 1;\n    margin: 0 #{$spacing-small} #{$spacing-medium} !important;\n  }\n}\n\n.alert__overlay {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--scrim-color);\n  opacity: 0;\n  transition: #{$transition-fast} opacity;\n  z-index: #{$layer-index-alert};\n  backdrop-filter: blur(#{$layer-overlay-blur});\n\n  &--open {\n    opacity: 1;\n  }\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--icon-size);\n\n  &::slotted(*) {\n    color: var(--tint-color);\n    margin-left: #{$spacing-medium};\n  }\n}\n\n.alert__icon ::slotted(*) {\n  color: var(--tint-color);\n\n  @include margin(0, 0, 0, #{$spacing-medium});\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  VNode,\n} from '@stencil/core';\nimport { Color } from '../../interface';\nimport Modal from '../../utils/modal';\nimport {\n  createColorClasses,\n  lockBodyScrolling,\n  raf,\n  unlockBodyScrolling,\n} from '../../utils';\n\nconst toastStackTr = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--tr',\n});\nconst toastStackTl = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--tl',\n});\nconst toastStackBl = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--bl',\n});\nconst toastStackBr = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--br',\n});\n\n/**\n * Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.\n * @slot - The alert's content.\n * @slot icon - An icon to show in the alert.\n * @slot footer - Place items at the bottom of the alert. Best used with `button` elements - esp when used as with the `alert()` method.\n */\n@Component({\n  tag: 'nano-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert implements ComponentInterface {\n  private autoHideTimeout: ReturnType<typeof setTimeout>;\n  private panel: HTMLElement;\n  private overlay: HTMLElement;\n  private modal: Modal;\n  private originalTrigger: HTMLElement | null;\n  private addedTransEnd = false;\n  private goingToHide = false;\n  private goingToShow = false;\n\n  @State() isModal = false;\n  @State() isToast = false;\n  @State() isShowing = false;\n  @State() label: string;\n\n  @Element() host: HTMLNanoAlertElement;\n\n  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Set to true to make the alert closable. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** The color to use from the application's color palette. */\n  @Prop({ reflect: true }) color?: Color;\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n   * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n   */\n  @Prop() duration = Infinity;\n\n  @Watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the alert opens and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the alert closes and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /** Shows the alert. */\n  @Method()\n  async show() {\n    if (this.goingToShow) {\n      return;\n    }\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return false;\n    }\n\n    this.host.hidden = false;\n    this.goingToShow = true;\n    this.open = true;\n    raf(() => {\n      this.isShowing = true;\n      this.goingToShow = false;\n    });\n\n    if (this.duration < Infinity) {\n      clearTimeout(this.autoHideTimeout);\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  /** Hides the alert */\n  @Method()\n  async hide() {\n    if (this.goingToHide) {\n      return;\n    }\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return false;\n    }\n    this.goingToHide = true;\n    this.open = false;\n\n    raf(() => (this.goingToHide = false));\n    clearTimeout(this.autoHideTimeout);\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   *\n   * @param position options are tr (top-right - default), tl (top-left), br (bottom-right), bl (bottom-left)\n   * @returns a promise which will resolve after the alert has hidden\n   */\n  @Method()\n  async toast(position: 'tr' | 'tl' | 'bl' | 'br' = 'tr') {\n    this.isToast = true;\n    return new Promise<void>((resolve) => {\n      let toastStack: HTMLElement;\n      switch (position) {\n        case 'tl':\n          toastStack = toastStackTl;\n          break;\n        case 'bl':\n          toastStack = toastStackBl;\n          break;\n        case 'br':\n          toastStack = toastStackBr;\n          break;\n        default:\n          toastStack = toastStackTr;\n          break;\n      }\n\n      if (!toastStack.parentElement) {\n        document.body.appendChild(toastStack);\n      }\n\n      toastStack.appendChild(this.host);\n      this.connectedCallback();\n      this.show();\n\n      const onClose = () => {\n        this.host.remove();\n        this.isToast = false;\n        resolve();\n\n        // Remove the toast stack from the DOM when there are no more alerts\n        if (!toastStack.querySelector('nano-alert')) {\n          toastStack.remove();\n        }\n      };\n\n      this.host.addEventListener('nanoAfterHide', onClose, { once: true });\n      this.host.addEventListener('nanoafterhide', onClose, { once: true });\n    });\n  }\n\n  /**\n   * Displays the alert as a dialog / modal - more akin to a traditional js alert().\n   * @param label a label for assistive technology\n   */\n  @Method()\n  async alert(label: string) {\n    this.isModal = true;\n    this.label = label;\n\n    return new Promise<void>((resolve) => {\n      if (!document.body.contains(this.host)) {\n        document.body.appendChild(this.host);\n      }\n\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      raf(() => {\n        this.show();\n      });\n\n      const onOpen = () => raf(() => this.panel.focus({ preventScroll: true }));\n\n      const onClose = () => {\n        this.modal.deactivate();\n        this.host.remove();\n        this.label = undefined;\n        this.isModal = false;\n        resolve();\n\n        // Restore focus to the original trigger\n        if (\n          this.originalTrigger &&\n          typeof this.originalTrigger.focus === 'function'\n        ) {\n          setTimeout(() => this.originalTrigger.focus());\n        }\n      };\n\n      this.host.addEventListener('nanoAfterShow', onOpen, { once: true });\n      this.host.addEventListener('nanoaftershow', onOpen, { once: true });\n\n      this.host.addEventListener('nanoAfterHide', onClose, {\n        once: true,\n      });\n      this.host.addEventListener('nanoafterhide', onClose, {\n        once: true,\n      });\n    });\n  }\n\n  private handleMouseMove = () => {\n    this.restartAutoHide();\n  };\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (\n      event.propertyName === 'opacity' &&\n      (event.target === this.panel || event.target === this.overlay)\n    ) {\n      this.host.hidden = !this.open;\n      this.isShowing = this.open;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleButtonClick = (e: PointerEvent & { target: HTMLElement }) => {\n    if (e.defaultPrevented) return;\n    if (e.target.tagName && e.target.tagName.toLowerCase() === 'button')\n      this.hide();\n  };\n\n  private restartAutoHide = () => {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  };\n\n  connectedCallback() {\n    this.modal = new Modal(this.host);\n    this.host.addEventListener('click', this.handleButtonClick);\n\n    if (this.panel) {\n      this.addedTransEnd = true;\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n    this.host.removeEventListener('click', this.handleButtonClick);\n\n    this.addedTransEnd = false;\n    this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  componentDidLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n    if (!this.addedTransEnd) {\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  private Panel = (): VNode => {\n    return (\n      <div\n        ref={(el) => (this.panel = el)}\n        part=\"panel\"\n        class={{\n          alert: true,\n          'alert--open': this.open,\n          'alert--toasty': this.isToast,\n          'alert--modal': !!this.isModal,\n          'alert--showing': this.isShowing,\n        }}\n        role={!!this.isModal ? 'alertdialog' : 'alert'}\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-hidden={this.open ? 'false' : 'true'}\n        aria-modal={!!this.isModal ? 'true' : undefined}\n        aria-label={this.label ? this.label : undefined}\n        onMouseMove={this.handleMouseMove}\n        tabIndex={!!this.isModal ? 0 : undefined}\n      >\n        <div class=\"alert__content\">\n          <div part=\"icon\" class=\"alert__icon\">\n            <slot name=\"icon\" />\n          </div>\n          <div part=\"message\" class=\"alert__message\">\n            <slot />\n          </div>\n          {this.closable && (\n            <div class=\"alert__close\">\n              <nano-icon-button\n                class=\"alert__close\"\n                iconName=\"light/times\"\n                label=\"close menu\"\n                onClick={this.handleCloseClick}\n              ></nano-icon-button>\n            </div>\n          )}\n        </div>\n        <div class=\"alert__footer\">\n          <slot name=\"footer\" />\n        </div>\n      </div>\n    );\n  };\n\n  render() {\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color) }}\n        showing={this.isShowing}\n      >\n        {this.isModal && [\n          <div\n            part=\"overlay\"\n            class={{\n              alert__overlay: true,\n              'alert__overlay--open': this.open,\n            }}\n            ref={(div) => (this.overlay = div)}\n          />,\n          <div class=\"alert__modal-wrap\">\n            <this.Panel />\n          </div>,\n        ]}\n        {!this.isModal && <this.Panel />}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/alert/alert.scss?tag=nano-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"names":["alertCss","toastStackTr","Object","assign","document","createElement","className","toastStackTl","toastStackBl","toastStackBr","Alert","exports","class_1","hostRef","_this","this","addedTransEnd","goingToHide","goingToShow","isModal","isToast","isShowing","open","closable","duration","Infinity","handleMouseMove","restartAutoHide","handleCloseClick","hide","handleTransitionEnd","event","propertyName","target","panel","overlay","host","hidden","nanoAfterShow","emit","nanoAfterHide","handleButtonClick","e","defaultPrevented","tagName","toLowerCase","clearTimeout","autoHideTimeout","setTimeout","Panel","h","ref","el","part","class","alert","alert--open","alert--toasty","alert--modal","alert--showing","role","aria-live","aria-atomic","aria-hidden","aria-modal","undefined","aria-label","label","onMouseMove","tabIndex","name","iconName","onClick","prototype","handleOpenChange","show","handleDurationChange","nanoShow","raf","nanoHide","toast","position","Promise","resolve","toastStack","parentElement","body","appendChild","connectedCallback","onClose","remove","querySelector","addEventListener","once","contains","modal","activate","lockBodyScrolling","originalTrigger","activeElement","onOpen","focus","preventScroll","deactivate","Modal","disconnectedCallback","unlockBodyScrolling","removeEventListener","componentDidLoad","render","Host","createColorClasses","color","showing","alert__overlay","alert__overlay--open","div"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --border-radius: defaults to #{$layer-border-radius};\n   * @prop --border-color: defaults to #{$layer-border-color};\n   * @prop --border-width: defaults to #{$layer-border-width};\n   * @prop --background: defaults to #{$layer-bg-color};\n   * @prop --tint-color: defaults to var(--nano-color-base, #{nano-color(primary, base)});\n   * @prop --icon-size: defaults to 1.5rem;\n   * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n   * @prop --close-button-color: defaults to #{map.get($colors, mediumgrey)} ;\n   */\n\n  --border-radius: #{$layer-border-radius};\n  --border-color: #{$layer-border-color};\n  --border-width: #{$layer-border-width};\n  --background: #{$layer-bg-color};\n  --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --icon-size: 2rem;\n  --scrim-color: #{$layer-overlay-dark};\n  --close-button-color: #{map.get($colors, palegrey)};\n\n  display: block;\n}\n\n:host(.nano-color) {\n  --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n}\n\n.alert {\n  position: relative;\n  background-color: var(--background);\n  border: solid var(--border-width) var(--border-color);\n  border-top-width: 4px;\n  border-top-color: var(--tint-color);\n  border-radius: var(--border-radius);\n  opacity: 0;\n  transform: scale(0.9);\n  transition:\n    #{$transition-medium} opacity ease,\n    #{$transition-fast} transform ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:not(.alert--showing) {\n    @include hidden;\n  }\n\n  &--open {\n    opacity: 1;\n    transform: none;\n  }\n\n  &--toasty,\n  &--modal {\n    box-shadow: #{$layer-shadow-large};\n    margin: #{$spacing-medium};\n  }\n}\n\n.alert__content {\n  display: flex;\n  align-items: stretch;\n}\n\n.alert__modal-wrap {\n  position: fixed;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: #{$layer-index-alert};\n}\n\n.alert__message {\n  flex: 1 1 auto;\n  padding: #{$spacing-medium};\n  overflow: hidden;\n  line-height: 1.6;\n}\n\n.alert__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.1em;\n\n  @include padding(0, #{$spacing-medium}, 0, 0);\n\n  --color: var(--close-button-color);\n}\n\n.alert__footer {\n  padding: 0 #{$spacing-small} 0;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  align-items: center;\n\n  ::slotted(*),\n  &::slotted(*) {\n    flex: 1;\n    margin: 0 #{$spacing-small} #{$spacing-medium} !important;\n  }\n}\n\n.alert__overlay {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--scrim-color);\n  opacity: 0;\n  transition: #{$transition-fast} opacity;\n  z-index: #{$layer-index-alert};\n  backdrop-filter: blur(#{$layer-overlay-blur});\n\n  &--open {\n    opacity: 1;\n  }\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--icon-size);\n\n  &::slotted(*) {\n    color: var(--tint-color);\n    margin-left: #{$spacing-medium};\n  }\n}\n\n.alert__icon ::slotted(*) {\n  color: var(--tint-color);\n\n  @include margin(0, 0, 0, #{$spacing-medium});\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  VNode,\n} from '@stencil/core';\nimport { Color } from '../../interface';\nimport Modal from '../../utils/modal';\nimport {\n  createColorClasses,\n  lockBodyScrolling,\n  raf,\n  unlockBodyScrolling,\n} from '../../utils';\n\nconst toastStackTr = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--tr',\n});\nconst toastStackTl = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--tl',\n});\nconst toastStackBl = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--bl',\n});\nconst toastStackBr = Object.assign(document.createElement('div'), {\n  className: 'nano-toast-stack nano-toast-stack--br',\n});\n\n/**\n * Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.\n * @slot - The alert's content.\n * @slot icon - An icon to show in the alert.\n * @slot footer - Place items at the bottom of the alert. Best used with `button` elements - esp when used as with the `alert()` method.\n */\n@Component({\n  tag: 'nano-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert implements ComponentInterface {\n  private autoHideTimeout: ReturnType<typeof setTimeout>;\n  private panel: HTMLElement;\n  private overlay: HTMLElement;\n  private modal: Modal;\n  private originalTrigger: HTMLElement | null;\n  private addedTransEnd = false;\n  private goingToHide = false;\n  private goingToShow = false;\n\n  @State() isModal = false;\n  @State() isToast = false;\n  @State() isShowing = false;\n  @State() label: string;\n\n  @Element() host: HTMLNanoAlertElement;\n\n  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Set to true to make the alert closable. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** The color to use from the application's color palette. */\n  @Prop({ reflect: true }) color?: Color;\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n   * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n   */\n  @Prop() duration = Infinity;\n\n  @Watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the alert opens and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the alert closes and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /** Shows the alert. */\n  @Method()\n  async show() {\n    if (this.goingToShow) {\n      return;\n    }\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return false;\n    }\n\n    this.host.hidden = false;\n    this.goingToShow = true;\n    this.open = true;\n    raf(() => {\n      this.isShowing = true;\n      this.goingToShow = false;\n    });\n\n    if (this.duration < Infinity) {\n      clearTimeout(this.autoHideTimeout);\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  /** Hides the alert */\n  @Method()\n  async hide() {\n    if (this.goingToHide) {\n      return;\n    }\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return false;\n    }\n    this.goingToHide = true;\n    this.open = false;\n\n    raf(() => (this.goingToHide = false));\n    clearTimeout(this.autoHideTimeout);\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   *\n   * @param position options are tr (top-right - default), tl (top-left), br (bottom-right), bl (bottom-left)\n   * @returns a promise which will resolve after the alert has hidden\n   */\n  @Method()\n  async toast(position: 'tr' | 'tl' | 'bl' | 'br' = 'tr') {\n    this.isToast = true;\n    return new Promise<void>((resolve) => {\n      let toastStack: HTMLElement;\n      switch (position) {\n        case 'tl':\n          toastStack = toastStackTl;\n          break;\n        case 'bl':\n          toastStack = toastStackBl;\n          break;\n        case 'br':\n          toastStack = toastStackBr;\n          break;\n        default:\n          toastStack = toastStackTr;\n          break;\n      }\n\n      if (!toastStack.parentElement) {\n        document.body.appendChild(toastStack);\n      }\n\n      toastStack.appendChild(this.host);\n      this.connectedCallback();\n      this.show();\n\n      const onClose = () => {\n        this.host.remove();\n        this.isToast = false;\n        resolve();\n\n        // Remove the toast stack from the DOM when there are no more alerts\n        if (!toastStack.querySelector('nano-alert')) {\n          toastStack.remove();\n        }\n      };\n\n      this.host.addEventListener('nanoAfterHide', onClose, { once: true });\n      this.host.addEventListener('nanoafterhide', onClose, { once: true });\n    });\n  }\n\n  /**\n   * Displays the alert as a dialog / modal - more akin to a traditional js alert().\n   * @param label a label for assistive technology\n   */\n  @Method()\n  async alert(label: string) {\n    this.isModal = true;\n    this.label = label;\n\n    return new Promise<void>((resolve) => {\n      if (!document.body.contains(this.host)) {\n        document.body.appendChild(this.host);\n      }\n\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      raf(() => {\n        this.show();\n      });\n\n      const onOpen = () => raf(() => this.panel.focus({ preventScroll: true }));\n\n      const onClose = () => {\n        this.modal.deactivate();\n        this.host.remove();\n        this.label = undefined;\n        this.isModal = false;\n        resolve();\n\n        // Restore focus to the original trigger\n        if (\n          this.originalTrigger &&\n          typeof this.originalTrigger.focus === 'function'\n        ) {\n          setTimeout(() => this.originalTrigger.focus());\n        }\n      };\n\n      this.host.addEventListener('nanoAfterShow', onOpen, { once: true });\n      this.host.addEventListener('nanoaftershow', onOpen, { once: true });\n\n      this.host.addEventListener('nanoAfterHide', onClose, {\n        once: true,\n      });\n      this.host.addEventListener('nanoafterhide', onClose, {\n        once: true,\n      });\n    });\n  }\n\n  private handleMouseMove = () => {\n    this.restartAutoHide();\n  };\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (\n      event.propertyName === 'opacity' &&\n      (event.target === this.panel || event.target === this.overlay)\n    ) {\n      this.host.hidden = !this.open;\n      this.isShowing = this.open;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleButtonClick = (e: PointerEvent & { target: HTMLElement }) => {\n    if (e.defaultPrevented) return;\n    if (e.target.tagName && e.target.tagName.toLowerCase() === 'button')\n      this.hide();\n  };\n\n  private restartAutoHide = () => {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  };\n\n  connectedCallback() {\n    this.modal = new Modal(this.host);\n    this.host.addEventListener('click', this.handleButtonClick);\n\n    if (this.panel) {\n      this.addedTransEnd = true;\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n    this.host.removeEventListener('click', this.handleButtonClick);\n\n    this.addedTransEnd = false;\n    this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  componentDidLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n    if (!this.addedTransEnd) {\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  private Panel = (): VNode => {\n    return (\n      <div\n        ref={(el) => (this.panel = el)}\n        part=\"panel\"\n        class={{\n          alert: true,\n          'alert--open': this.open,\n          'alert--toasty': this.isToast,\n          'alert--modal': !!this.isModal,\n          'alert--showing': this.isShowing,\n        }}\n        role={!!this.isModal ? 'alertdialog' : 'alert'}\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-hidden={this.open ? 'false' : 'true'}\n        aria-modal={!!this.isModal ? 'true' : undefined}\n        aria-label={this.label ? this.label : undefined}\n        onMouseMove={this.handleMouseMove}\n        tabIndex={!!this.isModal ? 0 : undefined}\n      >\n        <div class=\"alert__content\">\n          <div part=\"icon\" class=\"alert__icon\">\n            <slot name=\"icon\" />\n          </div>\n          <div part=\"message\" class=\"alert__message\">\n            <slot />\n          </div>\n          {this.closable && (\n            <div class=\"alert__close\">\n              <nano-icon-button\n                class=\"alert__close\"\n                iconName=\"light/times\"\n                label=\"close menu\"\n                onClick={this.handleCloseClick}\n              ></nano-icon-button>\n            </div>\n          )}\n        </div>\n        <div class=\"alert__footer\">\n          <slot name=\"footer\" />\n        </div>\n      </div>\n    );\n  };\n\n  render() {\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color) }}\n        showing={this.isShowing}\n      >\n        {this.isModal && [\n          <div\n            part=\"overlay\"\n            class={{\n              alert__overlay: true,\n              'alert__overlay--open': this.open,\n            }}\n            ref={(div) => (this.overlay = div)}\n          />,\n          <div class=\"alert__modal-wrap\">\n            <this.Panel />\n          </div>,\n        ]}\n        {!this.isModal && <this.Panel />}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-531d5275.system.entry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["src/components/dialog/dialog.scss?tag=nano-dialog&encapsulation=shadow","src/components/dialog/dialog.tsx"],"names":["dialogCss","id","Dialog","exports","class_1","hostRef","_this","this","componentId","willShow","willHide","addedTransEnd","isVisible","noDismiss","hasFooter","showRibbon","open","noHeader","noFooter","noUserDismiss","storeMethod","handleKeyDown","event","key","requestClose","nanoOverlayDismiss","nanoRequestClose","emit","defaultPrevented","hide","setTimeout","_","handleTransitionEnd","propertyName","composedPath","find","node","panel","overlay","nanoAfterShow","nanoAfterHide","handleSlotChange","hasSlot","host","prototype","handleOpenChange","show","nanoShow","originalTrigger","document","activeElement","modal","activate","lockBodyScrolling","addEventListener","nanoInitialFocus","focus","preventScroll","once","nanoHide","deactivate","unlockBodyScrolling","stopVideos","trigger","videos","Array","from","querySelectorAll","forEach","video","tagName","toLowerCase","pause","src","connectedCallback","Modal","componentWillLoad","storeId","ComponentStore","init","componentDidLoad","disconnectedCallback","removeEventListener","render","h","Host","showing","undefined","part","class","dialog","dialog--open","dialog--visible","dialog--has-footer","dialog--has-header","dialog--nodismiss","dialog--with-ribbon","onKeyDown","ref","el","onClick","role","aria-modal","aria-hidden","aria-label","label","aria-labelledby","tabIndex","name","String","fromCharCode","exportparts","iconName","position","onSlotchange"],"mappings":"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","sourcesContent":["@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n@import '../../global/style/nano-theme/form';\n\n/**\n * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n * @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --content-background: defaults to #{$layer-bg-color};\n * @prop --footer-background: defaults to  #{$color-celsius};\n * @prop --box-shadow: defaults to $layer-shadow-xlarge;\n * @prop --close-button-color: defaults to #{$color-mediumgrey};\n * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n * @prop --tint-color: colour used to highlight items in the dialog - top ribbon, bottom close button. Default #{$color-blue};\n * @prop --width: defaults to 31rem;\n */\n:host {\n  --border-radius: #{$layer-border-radius};\n  --content-background: #fafafa;\n  --footer-content: #{$color-lightgrey};\n  --scrim-color: #{$layer-overlay-dark};\n  --box-shadow: #{$layer-shadow-large};\n  --close-button-color: #{$color-palegrey};\n  --width: 60rem;\n  --tint-color: #{darken($color-blue, 5%)};\n  --body-padding-v: #{$spacing-large};\n  --body-padding-h: #{$spacing-large};\n  --header-padding-v: #{$spacing-medium};\n  --header-padding-h: #{$spacing-large};\n  --footer-padding-v: #{$spacing-medium};\n  --footer-padding-h: #{$spacing-large};\n}\n\n.dialog {\n  $self: &;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: #{$layer-index-modal};\n\n  &:not(.dialog--visible) {\n    @include hidden;\n  }\n\n  &__panel {\n    display: flex;\n    flex-direction: column;\n    z-index: 2;\n    width: var(--width);\n    max-width: calc(100% - #{$spacing-xlarge});\n    max-height: calc(92% - #{$spacing-xlarge});\n    background-color: var(--content-background);\n    border-radius: var(--border-radius);\n    box-shadow: var(--box-shadow);\n    opacity: 0;\n    transform: scale(0.8);\n    transition: #{$transition-fast} opacity, #{$transition-fast} transform;\n\n    &:focus {\n      outline: none;\n    }\n\n    .dialog--with-ribbon & {\n      border-top: 5px solid var(--tint-color);\n    }\n\n    .dialog--open & {\n      display: flex;\n      opacity: 1;\n      transform: none;\n    }\n\n    .dialog--nodismiss & {\n      animation: cannotClose 0.25s ease-in-out 1;\n\n      @keyframes cannotClose {\n        0% {\n          transform: scale(1);\n        }\n\n        50% {\n          transform: scale(1.08);\n        }\n\n        100% {\n          transform: scale(1);\n        }\n      }\n    }\n  }\n\n  &__header {\n    flex: 0 0 auto;\n    display: flex;\n    min-width: var(--width);\n    width: 100%;\n    background-color: var(--content-background);\n    border-radius: var(--border-radius) var(--border-radius) 0 0;\n    transition: #{$transition-xfast} box-shadow;\n\n    .dialog--visible & {\n      min-width: auto;\n    }\n\n    [stuck] & {\n      box-shadow: #{$layer-shadow-medium};\n    }\n  }\n\n  &__title {\n    flex: 1 1 auto;\n    font-size: #{$fontsize-large};\n    line-height: 1.6;\n    padding: var(--header-padding-v) var(--header-padding-h);\n  }\n\n  & &__close-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: #{$fontsize-xlarge};\n    padding: 0 var(--header-padding-h);\n\n    --color: var(--close-button-color);\n  }\n\n  &__body {\n    padding: 0 var(--body-padding-h) var(--body-padding-v);\n\n    .dialog:not(.dialog--has-header) & {\n      padding-top: var(--body-padding-v);\n    }\n\n    & ::slotted(*) {\n      max-width: 100%;\n    }\n\n    &-wrap {\n      flex: 1 1 auto;\n      overflow: auto;\n      -webkit-overflow-scrolling: touch;\n      border-radius: var(--border-radius);\n\n      .dialog:not(.dialog--has-header) & {\n        border-radius: 0 0 inherit inherit;\n      }\n\n      .dialog:not(.dialog--has-footer) & {\n        border-radius: inherit inherit 0 0;\n      }\n    }\n  }\n\n  &__footer {\n    width: 100%;\n    padding: var(--footer-padding-v) var(--footer-padding-h);\n    background: var(--footer-content);\n    border-radius: 0 0 var(--border-radius) var(--border-radius);\n    position: relative;\n    top: 1px;\n\n    .dialog--visible & {\n      min-width: auto;\n    }\n\n    ::slotted(button) {\n      margin-right: #{$spacing-small} !important;\n    }\n\n    .dialog:not(.dialog--has-footer) & {\n      display: none;\n    }\n  }\n\n  &__close-txt {\n    color: var(--tint-color);\n    border: none;\n    text-decoration: underline;\n    margin: 0;\n    text-underline-offset: 4px;\n    background-color: transparent;\n    font: inherit;\n    -webkit-box-align: center;\n    cursor: pointer;\n    font-size: #{$fontsize-small};\n    padding: 0.5rem;\n    border-radius: #{$border-radius-small};\n    transition: box-shadow 100ms ease-in-out;\n\n    &:focus {\n      outline: none;\n      box-shadow: #{$control-focus-style};\n    }\n  }\n\n  &__overlay {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: var(--scrim-color);\n    opacity: 0;\n    transition: #{$transition-fast} opacity;\n    backdrop-filter: blur(#{$layer-overlay-blur});\n\n    .dialog--open & {\n      opacity: 1;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  ComponentInterface,\n} from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport Modal from '../../utils/modal';\nimport { hasSlot } from '../../utils';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\nlet id = 0;\n\n/**\n * Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n *\n * @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n */\n@Component({\n  tag: 'nano-dialog',\n  styleUrl: 'dialog.scss',\n  shadow: true,\n})\nexport class Dialog implements ComponentInterface {\n  private componentId = `dialog-${++id}`;\n  private modal: Modal;\n  private panel: HTMLElement;\n  private willShow = false;\n  private willHide = false;\n  private originalTrigger: HTMLElement | null;\n  private overlay: HTMLElement;\n  private addedTransEnd = false;\n\n  @Element() host: HTMLNanoDialogElement;\n  @State() isVisible = false;\n  @State() noDismiss = false;\n  @State() hasFooter = false;\n\n  /** Show a colour ribbon at the top of the modal */\n  @Prop() showRibbon = true;\n\n  /** Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The dialog's label as displayed in the header. You should always include a relevant\n   * label even when using `no-header`, as it is required for proper accessibility. */\n  @Prop() label!: string;\n\n  /** Set to true to disable the header. This will also remove the default close button,\n   * so please ensure you  provide an easy, accessible way for users to dismiss the dialog. */\n  @Prop() noHeader = false;\n\n  /** Set to true to disable the footer. This will also remove the footer close button,\n   * so please ensure you  provide an easy, accessible way for users to dismiss the dialog. */\n  @Prop() noFooter = false;\n\n  /** An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key  */\n  @Prop() noUserDismiss = false;\n\n  /** Store search queries (against this ID) to the component store. Use in conjunction with storeMethod */\n  @Prop() storeId?: string;\n\n  /** The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). */\n  @Prop() storeMethod: StorageMethods = 'url-hash';\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the dialog opens and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the dialog closes and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /** Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent\n   * focus and allow you to set it on a different element in the dialog, such as an input or button. */\n  @Event() nanoInitialFocus: EventEmitter;\n\n  /** Emitted when the user clicks the close button, clicks the overlay, or presses the `Escape` key. Calling `event.preventDefault()` will prevent the dialog from closing. */\n  @Event() nanoRequestClose: EventEmitter;\n\n  /** Shows the dialog */\n  @Method()\n  async show() {\n    if (this.willShow) {\n      return;\n    }\n\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.originalTrigger = document.activeElement as HTMLElement;\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n    this.modal.activate();\n\n    lockBodyScrolling(this.host);\n\n    if (this.open) {\n      // Wait for the next frame before setting initial focus so the dialog is technically visible\n      this.host.addEventListener(\n        'nanoAfterShow',\n        () => {\n          const nanoInitialFocus = this.nanoInitialFocus.emit();\n          if (!nanoInitialFocus.defaultPrevented) {\n            this.panel.focus({ preventScroll: true });\n          }\n        },\n        { once: true }\n      );\n    }\n  }\n\n  /** Hides the dialog */\n  @Method()\n  async hide() {\n    if (this.willHide) {\n      return;\n    }\n\n    const nanoHide = this.nanoHide.emit();\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n    unlockBodyScrolling(this.host);\n    this.stopVideos();\n\n    // Restore focus to the original trigger\n    const trigger = this.originalTrigger;\n    if (trigger && typeof trigger.focus === 'function') {\n      setTimeout(() => trigger.focus());\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.requestClose();\n    }\n  };\n\n  private requestClose = () => {\n    const nanoOverlayDismiss = this.nanoRequestClose.emit();\n\n    if (!nanoOverlayDismiss.defaultPrevented && !this.noUserDismiss) {\n      this.hide();\n    } else {\n      this.noDismiss = true;\n      setTimeout((_) => (this.noDismiss = false), 250);\n    }\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (\n      event.propertyName === 'opacity' &&\n      event\n        .composedPath()\n        .find((node) => node === this.panel || node === this.overlay)\n    ) {\n      // Ensure we only emit one event when the target element is no longer visible\n      this.isVisible = this.open;\n      this.willShow = false;\n      this.willHide = false;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  private stopVideos() {\n    var videos: (HTMLVideoElement | HTMLIFrameElement)[] = Array.from(\n      this.host.querySelectorAll('iframe,video')\n    );\n    videos.forEach((video) => {\n      if (video.tagName.toLowerCase() === 'video')\n        (video as HTMLVideoElement).pause();\n      else {\n        const src = video.src;\n        video.src = src;\n      }\n    });\n  }\n\n  connectedCallback() {\n    this.modal = new Modal(this.host);\n    if (this.panel) {\n      this.addedTransEnd = true;\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n    // Show on init if open\n    if (this.open) this.show();\n    if (this.storeId)\n      ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n  }\n\n  componentDidLoad() {\n    if (!this.addedTransEnd) {\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n    this.addedTransEnd = false;\n    this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  render() {\n    return (\n      <Host showing={this.isVisible ? true : undefined}>\n        <div\n          part=\"base\"\n          class={{\n            dialog: true,\n            'dialog--open': this.open,\n            'dialog--visible': this.isVisible,\n            'dialog--has-footer': !this.noFooter,\n            'dialog--has-header': !this.noHeader,\n            'dialog--nodismiss': this.noDismiss,\n            'dialog--with-ribbon': this.showRibbon,\n          }}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div\n            part=\"overlay\"\n            class=\"dialog__overlay\"\n            ref={(el) => (this.overlay = el)}\n            onClick={this.requestClose}\n          />\n\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class=\"dialog__panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-hidden={this.open ? 'false' : 'true'}\n            aria-label={this.noHeader ? this.label : null}\n            aria-labelledby={\n              !this.noHeader ? `${this.componentId}-title` : null\n            }\n            tabIndex={0}\n          >\n            <div class=\"dialog__body-wrap\">\n              {!this.noHeader && (\n                <nano-sticker>\n                  <header part=\"header\" class=\"dialog__header\">\n                    <span\n                      part=\"title\"\n                      class=\"dialog__title\"\n                      id={`${this.componentId}-title`}\n                    >\n                      <slot name=\"label\">\n                        {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                        {this.label || String.fromCharCode(65279)}\n                      </slot>\n                    </span>\n                    {!this.noUserDismiss && (\n                      <nano-icon-button\n                        exportparts=\"base:close-button\"\n                        class=\"dialog__close-icon\"\n                        label=\"close dialog\"\n                        onClick={this.requestClose}\n                        iconName=\"light/times\"\n                      />\n                    )}\n                  </header>\n                </nano-sticker>\n              )}\n              <div part=\"body\" class=\"dialog__body\">\n                <slot />\n              </div>\n              {!this.noFooter && (this.hasFooter || !this.noUserDismiss) && (\n                <nano-sticker position=\"bottom\">\n                  <footer part=\"footer\" class=\"dialog__footer\">\n                    <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n                    {!this.noUserDismiss && (\n                      <button\n                        class=\"dialog__close-txt\"\n                        onClick={this.requestClose}\n                      >\n                        Close\n                      </button>\n                    )}\n                  </footer>\n                </nano-sticker>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/dialog/dialog.scss?tag=nano-dialog&encapsulation=shadow","src/components/dialog/dialog.tsx"],"names":["dialogCss","id","Dialog","exports","class_1","hostRef","_this","this","componentId","willShow","willHide","addedTransEnd","isVisible","noDismiss","hasFooter","showRibbon","open","noHeader","noFooter","noUserDismiss","storeMethod","handleKeyDown","event","key","requestClose","nanoOverlayDismiss","nanoRequestClose","emit","defaultPrevented","hide","setTimeout","_","handleTransitionEnd","propertyName","composedPath","find","node","panel","overlay","nanoAfterShow","nanoAfterHide","handleSlotChange","hasSlot","host","prototype","handleOpenChange","show","nanoShow","originalTrigger","document","activeElement","modal","activate","lockBodyScrolling","addEventListener","nanoInitialFocus","focus","preventScroll","once","nanoHide","deactivate","unlockBodyScrolling","stopVideos","trigger","videos","Array","from","querySelectorAll","forEach","video","tagName","toLowerCase","pause","src","connectedCallback","Modal","componentWillLoad","storeId","ComponentStore","init","componentDidLoad","disconnectedCallback","removeEventListener","render","h","Host","showing","undefined","part","class","dialog","dialog--open","dialog--visible","dialog--has-footer","dialog--has-header","dialog--nodismiss","dialog--with-ribbon","onKeyDown","ref","el","onClick","role","aria-modal","aria-hidden","aria-label","label","aria-labelledby","tabIndex","name","String","fromCharCode","exportparts","iconName","position","onSlotchange"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n@import '../../global/style/nano-theme/form';\n\n/**\n * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n * @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --content-background: defaults to #{$layer-bg-color};\n * @prop --footer-background: defaults to  #{map.get($colors, celsius)};\n * @prop --box-shadow: defaults to $layer-shadow-xlarge;\n * @prop --close-button-color: defaults to #{map.get($colors, mediumgrey)};\n * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n * @prop --tint-color: colour used to highlight items in the dialog - top ribbon, bottom close button. Default #{map.get($colors, blue)};\n * @prop --width: defaults to 31rem;\n */\n:host {\n  --border-radius: #{$layer-border-radius};\n  --content-background: #fafafa;\n  --footer-content: #{map.get($colors, lightgrey)};\n  --scrim-color: #{$layer-overlay-dark};\n  --box-shadow: #{$layer-shadow-large};\n  --close-button-color: #{map.get($colors, palegrey)};\n  --width: 60rem;\n  --tint-color: #{darken(map.get($colors, blue), 5%)};\n  --body-padding-v: #{$spacing-large};\n  --body-padding-h: #{$spacing-large};\n  --header-padding-v: #{$spacing-medium};\n  --header-padding-h: #{$spacing-large};\n  --footer-padding-v: #{$spacing-medium};\n  --footer-padding-h: #{$spacing-large};\n}\n\n.dialog {\n  $self: &;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: #{$layer-index-modal};\n\n  &:not(.dialog--visible) {\n    @include hidden;\n  }\n\n  &__panel {\n    display: flex;\n    flex-direction: column;\n    z-index: 2;\n    width: var(--width);\n    max-width: calc(100% - #{$spacing-xlarge});\n    max-height: calc(92% - #{$spacing-xlarge});\n    background-color: var(--content-background);\n    border-radius: var(--border-radius);\n    box-shadow: var(--box-shadow);\n    opacity: 0;\n    transform: scale(0.8);\n    transition: #{$transition-fast} opacity, #{$transition-fast} transform;\n\n    &:focus {\n      outline: none;\n    }\n\n    .dialog--with-ribbon & {\n      border-top: 5px solid var(--tint-color);\n    }\n\n    .dialog--open & {\n      display: flex;\n      opacity: 1;\n      transform: none;\n    }\n\n    .dialog--nodismiss & {\n      animation: cannotClose 0.25s ease-in-out 1;\n\n      @keyframes cannotClose {\n        0% {\n          transform: scale(1);\n        }\n\n        50% {\n          transform: scale(1.08);\n        }\n\n        100% {\n          transform: scale(1);\n        }\n      }\n    }\n  }\n\n  &__header {\n    flex: 0 0 auto;\n    display: flex;\n    min-width: var(--width);\n    width: 100%;\n    background-color: var(--content-background);\n    border-radius: var(--border-radius) var(--border-radius) 0 0;\n    transition: #{$transition-xfast} box-shadow;\n\n    .dialog--visible & {\n      min-width: auto;\n    }\n\n    [stuck] & {\n      box-shadow: #{$layer-shadow-medium};\n    }\n  }\n\n  &__title {\n    flex: 1 1 auto;\n    font-size: #{$fontsize-large};\n    line-height: 1.6;\n    padding: var(--header-padding-v) var(--header-padding-h);\n  }\n\n  & &__close-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: #{$fontsize-xlarge};\n    padding: 0 var(--header-padding-h);\n\n    --color: var(--close-button-color);\n  }\n\n  &__body {\n    padding: 0 var(--body-padding-h) var(--body-padding-v);\n\n    .dialog:not(.dialog--has-header) & {\n      padding-top: var(--body-padding-v);\n    }\n\n    & ::slotted(*) {\n      max-width: 100%;\n    }\n\n    &-wrap {\n      flex: 1 1 auto;\n      overflow: auto;\n      -webkit-overflow-scrolling: touch;\n      border-radius: var(--border-radius);\n\n      .dialog:not(.dialog--has-header) & {\n        border-radius: 0 0 inherit inherit;\n      }\n\n      .dialog:not(.dialog--has-footer) & {\n        border-radius: inherit inherit 0 0;\n      }\n    }\n  }\n\n  &__footer {\n    width: 100%;\n    padding: var(--footer-padding-v) var(--footer-padding-h);\n    background: var(--footer-content);\n    border-radius: 0 0 var(--border-radius) var(--border-radius);\n    position: relative;\n    top: 1px;\n\n    .dialog--visible & {\n      min-width: auto;\n    }\n\n    ::slotted(button) {\n      margin-right: #{$spacing-small} !important;\n    }\n\n    .dialog:not(.dialog--has-footer) & {\n      display: none;\n    }\n  }\n\n  &__close-txt {\n    color: var(--tint-color);\n    border: none;\n    text-decoration: underline;\n    margin: 0;\n    text-underline-offset: 4px;\n    background-color: transparent;\n    font: inherit;\n    -webkit-box-align: center;\n    cursor: pointer;\n    font-size: #{$fontsize-small};\n    padding: 0.5rem;\n    border-radius: #{$border-radius-small};\n    transition: box-shadow 100ms ease-in-out;\n\n    &:focus {\n      outline: none;\n      box-shadow: #{$control-focus-style};\n    }\n  }\n\n  &__overlay {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: var(--scrim-color);\n    opacity: 0;\n    transition: #{$transition-fast} opacity;\n    backdrop-filter: blur(#{$layer-overlay-blur});\n\n    .dialog--open & {\n      opacity: 1;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  ComponentInterface,\n} from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport Modal from '../../utils/modal';\nimport { hasSlot } from '../../utils';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\nlet id = 0;\n\n/**\n * Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n *\n * @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n */\n@Component({\n  tag: 'nano-dialog',\n  styleUrl: 'dialog.scss',\n  shadow: true,\n})\nexport class Dialog implements ComponentInterface {\n  private componentId = `dialog-${++id}`;\n  private modal: Modal;\n  private panel: HTMLElement;\n  private willShow = false;\n  private willHide = false;\n  private originalTrigger: HTMLElement | null;\n  private overlay: HTMLElement;\n  private addedTransEnd = false;\n\n  @Element() host: HTMLNanoDialogElement;\n  @State() isVisible = false;\n  @State() noDismiss = false;\n  @State() hasFooter = false;\n\n  /** Show a colour ribbon at the top of the modal */\n  @Prop() showRibbon = true;\n\n  /** Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The dialog's label as displayed in the header. You should always include a relevant\n   * label even when using `no-header`, as it is required for proper accessibility. */\n  @Prop() label!: string;\n\n  /** Set to true to disable the header. This will also remove the default close button,\n   * so please ensure you  provide an easy, accessible way for users to dismiss the dialog. */\n  @Prop() noHeader = false;\n\n  /** Set to true to disable the footer. This will also remove the footer close button,\n   * so please ensure you  provide an easy, accessible way for users to dismiss the dialog. */\n  @Prop() noFooter = false;\n\n  /** An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key  */\n  @Prop() noUserDismiss = false;\n\n  /** Store search queries (against this ID) to the component store. Use in conjunction with storeMethod */\n  @Prop() storeId?: string;\n\n  /** The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). */\n  @Prop() storeMethod: StorageMethods = 'url-hash';\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the dialog opens and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the dialog closes and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /** Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent\n   * focus and allow you to set it on a different element in the dialog, such as an input or button. */\n  @Event() nanoInitialFocus: EventEmitter;\n\n  /** Emitted when the user clicks the close button, clicks the overlay, or presses the `Escape` key. Calling `event.preventDefault()` will prevent the dialog from closing. */\n  @Event() nanoRequestClose: EventEmitter;\n\n  /** Shows the dialog */\n  @Method()\n  async show() {\n    if (this.willShow) {\n      return;\n    }\n\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.originalTrigger = document.activeElement as HTMLElement;\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n    this.modal.activate();\n\n    lockBodyScrolling(this.host);\n\n    if (this.open) {\n      // Wait for the next frame before setting initial focus so the dialog is technically visible\n      this.host.addEventListener(\n        'nanoAfterShow',\n        () => {\n          const nanoInitialFocus = this.nanoInitialFocus.emit();\n          if (!nanoInitialFocus.defaultPrevented) {\n            this.panel.focus({ preventScroll: true });\n          }\n        },\n        { once: true }\n      );\n    }\n  }\n\n  /** Hides the dialog */\n  @Method()\n  async hide() {\n    if (this.willHide) {\n      return;\n    }\n\n    const nanoHide = this.nanoHide.emit();\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n    unlockBodyScrolling(this.host);\n    this.stopVideos();\n\n    // Restore focus to the original trigger\n    const trigger = this.originalTrigger;\n    if (trigger && typeof trigger.focus === 'function') {\n      setTimeout(() => trigger.focus());\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.requestClose();\n    }\n  };\n\n  private requestClose = () => {\n    const nanoOverlayDismiss = this.nanoRequestClose.emit();\n\n    if (!nanoOverlayDismiss.defaultPrevented && !this.noUserDismiss) {\n      this.hide();\n    } else {\n      this.noDismiss = true;\n      setTimeout((_) => (this.noDismiss = false), 250);\n    }\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (\n      event.propertyName === 'opacity' &&\n      event\n        .composedPath()\n        .find((node) => node === this.panel || node === this.overlay)\n    ) {\n      // Ensure we only emit one event when the target element is no longer visible\n      this.isVisible = this.open;\n      this.willShow = false;\n      this.willHide = false;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  private stopVideos() {\n    var videos: (HTMLVideoElement | HTMLIFrameElement)[] = Array.from(\n      this.host.querySelectorAll('iframe,video')\n    );\n    videos.forEach((video) => {\n      if (video.tagName.toLowerCase() === 'video')\n        (video as HTMLVideoElement).pause();\n      else {\n        const src = video.src;\n        video.src = src;\n      }\n    });\n  }\n\n  connectedCallback() {\n    this.modal = new Modal(this.host);\n    if (this.panel) {\n      this.addedTransEnd = true;\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n    // Show on init if open\n    if (this.open) this.show();\n    if (this.storeId)\n      ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n  }\n\n  componentDidLoad() {\n    if (!this.addedTransEnd) {\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n    this.addedTransEnd = false;\n    this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  render() {\n    return (\n      <Host showing={this.isVisible ? true : undefined}>\n        <div\n          part=\"base\"\n          class={{\n            dialog: true,\n            'dialog--open': this.open,\n            'dialog--visible': this.isVisible,\n            'dialog--has-footer': !this.noFooter,\n            'dialog--has-header': !this.noHeader,\n            'dialog--nodismiss': this.noDismiss,\n            'dialog--with-ribbon': this.showRibbon,\n          }}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div\n            part=\"overlay\"\n            class=\"dialog__overlay\"\n            ref={(el) => (this.overlay = el)}\n            onClick={this.requestClose}\n          />\n\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class=\"dialog__panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-hidden={this.open ? 'false' : 'true'}\n            aria-label={this.noHeader ? this.label : null}\n            aria-labelledby={\n              !this.noHeader ? `${this.componentId}-title` : null\n            }\n            tabIndex={0}\n          >\n            <div class=\"dialog__body-wrap\">\n              {!this.noHeader && (\n                <nano-sticker>\n                  <header part=\"header\" class=\"dialog__header\">\n                    <span\n                      part=\"title\"\n                      class=\"dialog__title\"\n                      id={`${this.componentId}-title`}\n                    >\n                      <slot name=\"label\">\n                        {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                        {this.label || String.fromCharCode(65279)}\n                      </slot>\n                    </span>\n                    {!this.noUserDismiss && (\n                      <nano-icon-button\n                        exportparts=\"base:close-button\"\n                        class=\"dialog__close-icon\"\n                        label=\"close dialog\"\n                        onClick={this.requestClose}\n                        iconName=\"light/times\"\n                      />\n                    )}\n                  </header>\n                </nano-sticker>\n              )}\n              <div part=\"body\" class=\"dialog__body\">\n                <slot />\n              </div>\n              {!this.noFooter && (this.hasFooter || !this.noUserDismiss) && (\n                <nano-sticker position=\"bottom\">\n                  <footer part=\"footer\" class=\"dialog__footer\">\n                    <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n                    {!this.noUserDismiss && (\n                      <button\n                        class=\"dialog__close-txt\"\n                        onClick={this.requestClose}\n                      >\n                        Close\n                      </button>\n                    )}\n                  </footer>\n                </nano-sticker>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}