@nanoporetech-digital/components 1.13.13 → 1.13.14

package/dist/nano-components/p-5d5645a5.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/grid/grid.scss?tag=nano-grid&encapsulation=shadow","src/components/grid/grid.tsx","src/components/grid/grid-item.scss?tag=nano-grid-item&encapsulation=shadow","src/components/grid/grid-item.tsx","src/components/img/img.scss?tag=nano-img&encapsulation=shadow","src/components/img/img.tsx"],"names":["STATEOPTS","CANSHADOW","document","head","attachShadow","Grid","[object Object]","hostRef","this","generalClasses","gridClass","isSizes","ready","isSmall","isMedium","isLarge","isXL","isXXL","sSize","mSize","lSize","xlSize","showHelper","contentPanel","fullHeight","applySizeClasses","size","currentWidth","push","sCols","active","mCols","lCols","xlCols","xxlCols","el","style","setProperty","slice","pop","applyChildrenClasses","setTimeout","gridItems","querySelectorAll","length","forEach","gridItem","changeBP","found","itemStates","classes","ctx","stateArr","itemState","querySelector","map","call","children","gItem","hasAttribute","className","split","filter","c","startsWith","join","trim","getAttribute","stateOpt","reverse","find","state","indexOf","includes","shift","classList","add","wrapper","ele","nodeName","contains","createElement","setAttribute","removeAttribute","insertBefore","appendChild","ro","ResizeObserver","entries","entry","contentRect","width","observe","disconnect","h","Host","class","has-grid","is-legacy","undefined","grid","GridItem","currGridSizes","gridStates","newGridSizes","Img","_srcSet","hasLoaded","imgStates","lazy","autoHeight","onLoad","nanoImgDidLoad","emit","onError","nanoImgError","onResize","e","Object","detail","bp","srcOpts","keys","sort","src","_src","addIO","srcSet","bpSrc","load","window","IntersectionObserverEntry","prototype","removeIO","io","IntersectionObserver","data","isIntersecting","host","loadError","loadSrc","nanoImgWillLoad","srcChanged","srcSetChanged","lazyChanged","bgStyle","background-image","background","loaded","img__bg","no-height","img__image","hide","decoding","alt","onNanoResizeStateChange","states"],"mappings":"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","sourcesContent":["// we use &::slotted selectors to target ie ... this is a due to a bug with how stencil makes css scoping for browsers without shadow-dom. Need to be mindful incase they ever fix this!\n\n@import '../../global/style/nano-theme/base';\n\n// ie 11 fixes ... maximum numbers we can place on the grid ... upping this number decreases performance a lot.\n$max-grid-cols: 10;\n\n@mixin grid($size: 1) {\n  @at-root :host(.nano-grid-#{$size}) {\n    --current-grid-size: \"grid size: #{$size}\";\n    --col-width: calc(#{100 / $size}% - var(--grid-col-gap));\n    --repeat-width: calc(100% / #{$size});\n\n    .grid {\n      grid-template-columns: repeat(#{$size}, minmax(var(--col-width), 1fr));\n\n      $current-column: 1;\n      $current-row: 1;\n\n      @for $i from 1 through ($max-grid-cols * 2) {\n        @if $current-column > $size {\n          $current-column: 1;\n          $current-row: $current-row + 1;\n        }\n\n        &::slotted(:nth-child(#{$i})) {\n          -ms-grid-row: $current-row;\n          -ms-grid-column: $current-column;\n          // use margin because there's no grid gap.\n        }\n        $current-column: $current-column + 1;\n      }\n    }\n  }\n}\n\n@mixin grid-spans {\n  @for $i from 1 through $max-grid-cols {\n    ::slotted(.nano-grid-col-start-#{$i}),\n    &::slotted(.nano-grid-col-start-#{$i}) {\n      grid-column-start: #{$i} !important;\n    }\n\n    ::slotted(.nano-grid-row-start-#{$i}),\n    &::slotted(.nano-grid-row-start-#{$i}) {\n      grid-row-start: #{$i} !important;\n    }\n\n    ::slotted(.nano-grid-col-span-#{$i}),\n    &::slotted(.nano-grid-col-span-#{$i}) {\n      grid-column-end: span #{$i} !important;\n    }\n\n    ::slotted(.nano-grid-row-span-#{$i}),\n    &::slotted(.nano-grid-row-span-#{$i}) {\n      grid-row-end: span #{$i} !important;\n    }\n  }\n}\n\n:host {\n  /**\n  * @prop --grid-col-gap: gap between all columns. Defaults to theme's global padding\n  * @prop --grid-row-gap: gap between all rows. Defaults to theme's global padding\n  */\n\n  --grid-col-gap: #{$spacing-medium};\n  --grid-row-gap: #{$spacing-medium};\n  --current-grid-size: \"\\'grid size: sm\\'\";\n  display: block;\n  opacity: 0;\n  transition: .2s ease opacity;\n\n  .grid {\n    /* autoprefixer: ignore next */\n    display: grid;\n    /* autoprefixer: ignore next */\n    grid-gap: var(--grid-row-gap) var(--grid-col-gap);\n    height: inherit;\n    min-height: inherit;\n\n    &::slotted(*) {\n      border: 0 solid transparent;\n      background-clip: padding-box;\n      border-width: var(--grid-row-gap) calc(var(--grid-col-gap) / 2);\n    }\n  }\n}\n\n:host(.ready) {\n  opacity: 1;\n}\n\n:host(.has-grid) {\n  .grid {\n    display: grid;\n    @include grid-spans;\n\n    // ie 'grid gap'. use border because there's no grid gap.\n    &::slotted(*) {\n      border-width: calc(var(--grid-row-gap) / 2) calc(var(--grid-col-gap) / 2);\n    }\n  }\n}\n\n// All sorts of IE fuckery to recreate grid-gap when nested etc\n:host([is-legacy]) {\n  overflow: hidden;\n\n  .grid {\n    margin-bottom: calc(var(--grid-row-gap) * -.5);\n    margin-top: calc(var(--grid-row-gap) * -.5);\n    margin-left: calc(var(--grid-col-gap) * -.5);\n    margin-right: calc(var(--grid-col-gap) * -.5);\n  }\n}\n\n// nested\nnano-grid :host-context[is-legacy] {\n  overflow: visible;\n\n  .grid {\n    &::slotted(:first-child) {\n      border-top-width: calc(var(--grid-row-gap) / 2);\n    }\n\n    &::slotted(:last-child) {\n      border-bottom-width: calc(var(--grid-row-gap) / 2);\n    }\n  }\n}\n\n:host([content-panel]:not([content-panel=\"false\"])) {\n  display: -ms-flexbox;\n  -ms-flex-direction: column;\n\n  .grid {\n    grid-template-rows: auto 1fr;\n  }\n}\n\n:host([full-height]:not([full-height=\"false\"])) {\n  height: 100%;\n\n  .grid {\n    grid-template-rows: 1fr;\n\n    &::slotted(*) {\n      min-height: 100%;\n    }\n  }\n}\n\n:host([show-helper]:not([show-helper=\"false\"])) {\n  .grid {\n    position: relative;\n\n    &::after {\n      content: '';\n      position: absolute;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      top: 0;\n      pointer-events: none;\n\n      background-image: repeating-linear-gradient(\n        to right,\n        hsla(204, 80%, 72%, 0.25),\n        hsla(204, 80%, 72%, 0.25) var(--col-width),\n        transparent var(--col-width),\n        transparent var(--repeat-width)\n      );\n      background-size: calc(100% + var(--grid-col-gap)) 100%;\n      z-index: 100;\n    }\n\n    &::before {\n      content: var(--current-grid-size);\n      font-size: 30px;\n      position: absolute;\n      width: 100%;\n      left: 0;\n      text-align: center;\n      top: 50%;\n      transform: translateY(-50%);\n      color: rgba(0, 0, 0, 0.2);\n      text-transform: uppercase;\n      z-index: 99;\n      pointer-events: none;\n    }\n  }\n}\n\n@for $i from 1 through $max-grid-cols {\n  @include grid($i);\n}\n","import { Component, h, Prop, Element, Host, State, Watch } from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { GridSizes } from '../../interface';\nimport { testLegacyStyle } from '../../utils/utils';\n\nconst STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];\nconst CANSHADOW = !!document.head.attachShadow;\n\n/**\n * A context-aware CSS grid implementation.\n * Uses it's own width to choose column number - not screen width.\n */\n@Component({\n  tag: 'nano-grid',\n  styleUrl: 'grid.scss',\n  shadow: true,\n})\nexport class Grid {\n  @Element() private el: HTMLNanoGridElement;\n  private ro: ResizeObserver;\n  private generalClasses: Array<string> = [''];\n  private gridClass: string = null;\n  private isSizes: GridSizes[] = [null];\n  private currentWidth: number;\n\n  @State() ready: boolean = false;\n  @State() isSmall = false;\n  @State() isMedium = false;\n  @State() isLarge = false;\n  @State() isXL = false;\n  @State() isXXL = false;\n\n  /**\n   * the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\n   */\n  @Prop() sSize: number = 300;\n\n  /**\n   * the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\n   */\n  @Prop() mSize: number = 550;\n\n  /**\n   * the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\n   */\n  @Prop() lSize: number = 800;\n\n  /**\n   * the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\n   */\n  @Prop() xlSize: number = 1000;\n\n  /**\n   * the number of columns the grid has at the small breakpoint.\n   */\n  @Prop() sCols: number;\n\n  /**\n   * the number of columns the grid has at the medium breakpoint.\n   */\n  @Prop() mCols: number;\n\n  /**\n   * the number of columns the grid has at the large breakpoint.\n   */\n  @Prop() lCols: number;\n\n  /**\n   * the number of columns the grid has at the xl breakpoint.\n   */\n  @Prop() xlCols: number;\n\n  /**\n   * the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint)\n   */\n  @Prop() xxlCols: number;\n\n  /**\n   * shows a grid helper to visualise where columns are\n   */\n  @Prop({ reflect: true }) showHelper: boolean = false;\n\n  /**\n   * shortcut for a traditional website like grid (requires more than one row). The second row will auto expand to fill the grid height. The first row and > 2nd row will be the size of their content. e.g. header, body and footer.\n   */\n  @Prop({ reflect: true }) contentPanel: boolean = false;\n\n  /**\n   * Helper to make grid items expand to full height in IE11\n   */\n  @Prop({ reflect: true }) fullHeight: boolean = false;\n\n  @Watch('sSize')\n  @Watch('mSize')\n  @Watch('lSize')\n  @Watch('xlSize')\n  @Watch('sCols')\n  @Watch('mCols')\n  @Watch('lCols')\n  @Watch('xlCols')\n  @Watch('xxlCols')\n  propChanged() {\n    this.applySizeClasses();\n  }\n\n  private applySizeClasses() {\n    let size = this.currentWidth;\n\n    this.isSmall = false;\n    this.isMedium = false;\n    this.isLarge = false;\n    this.isXL = false;\n    this.isXXL = false;\n\n    this.generalClasses = [];\n    this.gridClass = null;\n    this.isSizes = [null];\n\n    this.isSmall = true;\n    this.generalClasses.push('is-small');\n    if (this.sCols) this.gridClass = `nano-grid-${this.sCols}`;\n    this.isSizes.push({ size: 's', active: true });\n\n    if (size > this.sSize) {\n      this.isMedium = true;\n      this.generalClasses.push('is-medium');\n      if (this.mCols) this.gridClass = `nano-grid-${this.mCols}`;\n      this.isSizes.push({ size: 'm', active: true });\n    }\n\n    if (size > this.mSize) {\n      this.isLarge = true;\n      this.generalClasses.push('is-large');\n      if (this.lCols) this.gridClass = `nano-grid-${this.lCols}`;\n      this.isSizes.push({ size: 'l', active: true });\n    }\n\n    if (size > this.lSize) {\n      this.isXL = true;\n      this.generalClasses.push('is-xl');\n      if (this.xlCols) this.gridClass = `nano-grid-${this.xlCols}`;\n      this.isSizes.push({ size: 'xl', active: true });\n    }\n\n    if (size > this.xlSize) {\n      this.isXXL = true;\n      this.generalClasses.push('is-xxl');\n      if (this.xxlCols) this.gridClass = `nano-grid-${this.xxlCols}`;\n      this.isSizes.push({ size: 'xxl', active: true });\n    }\n\n    this.el.style.setProperty(\n      '--current-grid-size',\n      `'grid size: ${this.isSizes.slice().pop().size}'`\n    );\n    this.applyChildrenClasses();\n    setTimeout(() => (this.ready = true), 0);\n  }\n\n  private applyChildrenClasses() {\n    let gridItems = this.el.querySelectorAll('nano-grid-item');\n    if (gridItems.length) {\n      gridItems.forEach((gridItem: HTMLNanoGridItemElement) => {\n        gridItem.changeBP(this.isSizes);\n      });\n      return;\n    }\n\n    // this logic has been put into grid-item. Keep here for legacy for now\n    let stateArr: Array<string> = [''],\n      itemState: string = '',\n      found: any,\n      itemStates: Array<string>,\n      classes: Array<string>,\n      ctx: HTMLElement;\n\n    if (!CANSHADOW) ctx = this.el.querySelector('.grid') || this.el;\n    else ctx = this.el;\n\n    // item states come in 4 possible flavours at every breakpoint. E.g.\n    // xl-col-span-2\n    // xl-col-start-2\n    // xl-row-span-2\n    // xl-row-start-2\n\n    // loop through all grid items with states.\n    [].map.call(ctx.children, (gItem: HTMLElement) => {\n      if (!gItem.hasAttribute('grid-states')) return;\n\n      // gridItems.forEach(gItem => {\n\n      // clear all previous grid state classnames\n      classes = gItem.className\n        .split(' ')\n        .filter((c) => !c.startsWith('nano-grid-'));\n      gItem.className = classes.join(' ').trim();\n\n      // get all potential states this element can have\n      itemStates = gItem.getAttribute('grid-states').split(' ');\n\n      // loop through all potential state options: col & row span & start\n      STATEOPTS.forEach((stateOpt) => {\n        // reset found flag\n        found = false;\n\n        // loop through all the current valid breakpoints / sizes backwards because\n        // we only care about the item's state at the largest current breakpoint.\n        this.isSizes\n          .slice()\n          .reverse()\n          .forEach(function (size) {\n            if (found || !size) return;\n            found = itemStates.find(\n              (state) => state.indexOf(`${size.size}-${stateOpt}`) === 0\n            );\n\n            // found a state at this current size. apply class.\n            if (found) {\n              // clear previous grid state classname\n              classes = gItem.className\n                .split(' ')\n                .filter((c) => !c.includes('nano-grid-${stateOpt}'));\n              gItem.className = classes.join(' ').trim();\n\n              stateArr = found.split('-');\n\n              // remove the size of the state\n              stateArr.shift();\n              itemState = stateArr.join('-');\n\n              // add new class\n              gItem.classList.add(`nano-grid-${itemState}`);\n            }\n          });\n      });\n    });\n  }\n\n  connectedCallback() {\n    testLegacyStyle(this.el);\n  }\n\n  componentWillLoad() {\n    let wrapper: HTMLElement, ctx;\n\n    if (!CANSHADOW) ctx = this.el.querySelector('.grid') || this.el;\n    else ctx = this.el;\n\n    [].map.call(ctx.children, (ele: HTMLElement) => {\n      if (!CANSHADOW) {\n        if (\n          ele.classList.contains('nano-griditem') ||\n          ele.nodeName === 'NANO-GRID-ITEM'\n        )\n          return;\n\n        wrapper = document.createElement('div');\n        if (ele.hasAttribute('grid-states')) {\n          wrapper.setAttribute('grid-states', ele.getAttribute('grid-states'));\n          ele.removeAttribute('grid-states');\n        }\n\n        this.el.insertBefore(wrapper, ele);\n        wrapper.appendChild(ele);\n        wrapper.classList.add('nano-griditem');\n      } else if (ele.nodeName !== 'NANO-GRID-ITEM')\n        ele.classList.add('nano-griditem');\n    });\n  }\n\n  componentDidLoad() {\n    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (!entry.contentRect.width) return;\n        this.currentWidth = entry.contentRect.width;\n        this.applySizeClasses();\n      }\n    });\n    this.ro.observe(this.el);\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    // console.log(this.currentWidth, this.generalClasses.join(' '), this.gridClass, this.showHelper, this.gridClass)\n    return (\n      <Host\n        class={{\n          [this.generalClasses.join(' ')]: true,\n          'has-grid': !!this.gridClass,\n          ready: this.ready,\n          [this.gridClass]: true,\n        }}\n        is-legacy={!CANSHADOW ? true : undefined}\n      >\n        <div\n          class={{\n            grid: true,\n          }}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n\n// <Host class={{\n//         [this.generalClasses.join(' ')]: true,\n//         [this.gridClass]: true,\n//         'helper': this.showHelper,\n//         'has-grid': !!this.gridClass,\n//         'legacy': !CANSHADOW,\n//         'content-panel': this.contentPanel,\n//         'full-height': this.fullHeight,\n//         'ready': this.ready\n//       }}></Host>\n",":host {\n  display: block;\n}","import { Component, h, Prop, Element, Method, Watch } from '@stencil/core';\nimport { GridSizes } from '../../interface';\n\nconst STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];\n\n/**\n * Grid items to be used with [grid](/story/nano-components-grid) elements\n */\n@Component({\n  tag: 'nano-grid-item',\n  styleUrl: 'grid-item.scss',\n  shadow: true,\n})\nexport class GridItem {\n  private currGridSizes: GridSizes[] = [null];\n\n  @Element() private el: HTMLNanoGridItemElement;\n  /**\n   * How to position this item within it's parent grid at different break points. Examples:\n   * xl-col-span-2\n   * l-col-start-2\n   * xxl-row-span-2\n   * m-row-start-2\n   */\n  @Prop() gridStates: string = '';\n\n  @Watch('gridStates')\n  updateGridClasses() {\n    this.applyChildrenClasses();\n  }\n\n  /**\n   * Called by parent grid to trigger new classes\n   * @internal\n   */\n  @Method()\n  async changeBP(newGridSizes: GridSizes[]) {\n    if (this.currGridSizes === newGridSizes) return;\n    this.currGridSizes = newGridSizes;\n\n    if (!this.gridStates.length) return;\n    this.applyChildrenClasses();\n  }\n\n  private applyChildrenClasses() {\n    let stateArr: Array<string> = [''],\n      itemState: string = '',\n      found: any,\n      itemStates: Array<string>,\n      classes: Array<string>;\n\n    // item states come in 4 possible flavours at every breakpoint. E.g.\n    // xl-col-span-2\n    // xl-col-start-2\n    // xl-row-span-2\n    // xl-row-start-2\n\n    // clear all previous grid state classnames\n    classes = this.el.className\n      .split(' ')\n      .filter((c) => !c.startsWith('nano-grid-'));\n    this.el.className = classes.join(' ').trim();\n\n    // get all potential states this element can have\n    itemStates = this.gridStates.split(' ');\n\n    // loop through all potential state options: col & row span & start\n    STATEOPTS.forEach((stateOpt) => {\n      // reset found flag\n      found = false;\n\n      // loop through all the current valid breakpoints / sizes backwards because\n      // we only care about the item's state at the largest current breakpoint.\n      this.currGridSizes\n        .slice()\n        .reverse()\n        .forEach((size) => {\n          if (found || !size) return;\n          found = itemStates.find(\n            (state) => state.indexOf(`${size.size}-${stateOpt}`) === 0\n          );\n\n          // found a state at this current size. apply class.\n          if (found) {\n            // clear previous grid state classname\n            classes = this.el.className\n              .split(' ')\n              .filter((c) => !c.includes('nano-grid-${stateOpt}'));\n            this.el.className = classes.join(' ').trim();\n\n            stateArr = found.split('-');\n\n            // remove the size of the state\n            stateArr.shift();\n            itemState = stateArr.join('-');\n\n            // add new class\n            this.el.classList.add(`nano-grid-${itemState}`);\n          }\n        });\n    });\n  }\n\n  render() {\n    return <slot />;\n  }\n}\n",":host {\n  /**\n   * @prop --padding: padding around any content. Only relevent on `<nano-img background>`\n  */\n  --padding: 0;\n\n  display: inline-block;\n\n  object-fit: cover;\n  object-position: center;\n\n  background-size: cover;\n  background-position: center;\n\n  * {\n    border-radius: inherit;\n  }\n}\n\n:host([background]:not([background=\"false\"])) {\n  display: block;\n}\n\n.img {\n  position: relative;\n  min-height: inherit;\n  height: 100%;\n  display: block;\n\n  object-fit: inherit;\n  object-position: inherit;\n\n  background-color: inherit;\n  background-position: inherit;\n  background-size: inherit;\n  background-origin: inherit;\n  background-attachment: inherit;\n  background-repeat: inherit;\n}\n\n.img__loader, .img__observer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  height: 100%;\n  width: 100%;\n  z-index: -1;\n}\n\n.img__image, .img__bg {\n  border-radius: inherit;\n  display: block;\n  opacity: 0;\n  transition: .5s ease opacity, .3s ease filter .4s;\n  filter: blur(5px);\n\n  &.loaded {\n    opacity: 1;\n    filter: blur(.1px);\n\n    @media not all and (min-resolution:.001dpcm)\n    { @supports (-webkit-appearance:none) {\n      filter: blur(0px);\n    }}\n  }\n}\n\n.img__image {\n  object-fit: inherit;\n  object-position: inherit;\n  max-width: 100%;\n  height: auto;\n\n  &.hide {\n    visibility: hidden;\n\n    &.no-height {\n      height: 1px;\n      position: absolute;\n      z-index: -1;\n    }\n  }\n}\n\n.img__bg {\n  background-color: inherit;\n  background-position: inherit;\n  background-size: inherit;\n  background-origin: inherit;\n  background-attachment: inherit;\n  background-repeat: inherit;\n  overflow: auto;\n\n  padding: var(--padding);\n\n  &.no-height {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Prop,\n  Watch,\n  h,\n  ComponentInterface,\n} from '@stencil/core';\nimport { ResizeStateChangeEventDetail } from '../../interface';\n\n/**\n * Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.\n * @slot - Main slot. Only relevant with `<nano-img background>`\n */\n@Component({\n  tag: 'nano-img',\n  styleUrl: 'img.scss',\n  shadow: true,\n})\nexport class Img implements ComponentInterface {\n  private io?: IntersectionObserver;\n  private _srcSet: { [key: string]: { src: string; active: boolean } } = {};\n\n  @Element() host!: HTMLElement;\n\n  @State() loadSrc?: string;\n  @State() loadError?: () => void;\n  @State() hasLoaded: boolean = false;\n  @State() imgStates: string = null;\n  @State() _src: string;\n  @Watch('_src')\n  _srcChanged() {\n    this.hasLoaded = false;\n    this.addIO();\n  }\n\n  /** This attribute defines the alternative text describing the image.\n   * Users will see this text displayed if the image URL is wrong, or if the image is not yet downloaded. */\n  @Prop() alt?: string;\n\n  /** The image URL. This attribute is mandatory for the `<img>` element. */\n  @Prop() src!: string;\n  @Watch('src')\n  srcChanged() {\n    this._src = this.src;\n  }\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() srcSet?: string;\n  @Watch('srcSet')\n  srcSetChanged() {\n    if (!this.srcSet) return;\n\n    delete this._srcSet;\n    this._srcSet = {};\n\n    this.imgStates = this.srcSet\n      .split(',')\n      .map((bpSrc) => {\n        const [bp, src] = bpSrc.split(' ').filter((bp) => bp.length);\n        this._srcSet[bp] = { src: src, active: false };\n        return bp;\n      })\n      .join(', ');\n  }\n\n  /** Render image lazily, when it comes into the browser viewport **/\n  @Prop() lazy: boolean = true;\n  @Watch('lazy')\n  lazyChanged() {\n    if (!this.lazy) this.load();\n  }\n\n  /** Render the image as a background image **/\n  @Prop() background?: boolean;\n\n  /** When the image is rendered as a background, and there is no preset dimensions of the component,\n   * you can set how the component height will be set. Via image size or via the content **/\n  @Prop() autoHeight: 'content' | 'image' = 'content';\n\n  /** Emitted when the img src has been set */\n  @Event() nanoImgWillLoad!: EventEmitter<void>;\n\n  /** Emitted when the image has finished loading */\n  @Event() nanoImgDidLoad!: EventEmitter<void>;\n\n  /** Emitted when the img fails to load */\n  @Event() nanoImgError!: EventEmitter<void>;\n\n  private addIO() {\n    if (!this._src || this.hasLoaded) return;\n    if (!this.lazy) {\n      this.load();\n      return;\n    }\n    if (\n      typeof (window as any) !== 'undefined' &&\n      'IntersectionObserver' in window &&\n      'isIntersecting' in window.IntersectionObserverEntry.prototype\n    ) {\n      this.removeIO();\n      this.io = new IntersectionObserver((data) => {\n        if (data[0].isIntersecting) {\n          this.load();\n          this.removeIO();\n        }\n      });\n\n      this.io.observe(this.host);\n    } else setTimeout(() => this.load(), 200);\n  }\n\n  private load() {\n    this.loadError = this.onError;\n    this.loadSrc = this._src;\n    this.nanoImgWillLoad.emit();\n  }\n\n  private onLoad = () => {\n    this.nanoImgDidLoad.emit();\n    setTimeout(() => (this.hasLoaded = true), 50);\n  };\n\n  private onError = () => {\n    this.nanoImgError.emit();\n  };\n\n  private onResize = (e: { detail: ResizeStateChangeEventDetail }) => {\n    Object.entries(e.detail).forEach(([bp, active]) => {\n      this._srcSet[bp].active = active;\n    });\n\n    // sort and find the highest sized matching image.\n    const srcOpts = [];\n    Object.keys(this._srcSet)\n      .sort()\n      .forEach((bp) => {\n        if (this._srcSet[bp].active) srcOpts.push(this._srcSet[bp].src);\n      });\n\n    if (srcOpts.length) this._src = srcOpts.slice(-1)[0];\n    // no matching image? Set back to default\n    else this._src = this.src;\n  };\n\n  private removeIO() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  connectedCallback() {\n    this.srcChanged();\n    this.srcSetChanged();\n    this.lazyChanged();\n  }\n\n  componentDidLoad() {\n    this.addIO();\n  }\n\n  disconnectedCallback() {\n    this.removeIO();\n  }\n\n  render() {\n    const bgStyle = !!this.loadSrc\n      ? { 'background-image': `url(${this.loadSrc})` }\n      : {};\n    return (\n      <div class=\"img\">\n        <nano-skeleton class=\"img__loader\"></nano-skeleton>\n        {!!this.background && (\n          <div\n            class={{\n              loaded: this.hasLoaded,\n              img__bg: true,\n              'no-height': this.autoHeight === 'image',\n            }}\n            style={bgStyle}\n          >\n            <slot />\n          </div>\n        )}\n        <img\n          class={{\n            img__image: true,\n            loaded: this.hasLoaded,\n            hide: this.background,\n            'no-height': this.autoHeight === 'content',\n          }}\n          decoding=\"async\"\n          src={this.loadSrc}\n          alt={this.alt}\n          onLoad={this.onLoad}\n          onError={this.loadError}\n        />\n        <nano-resize-observe\n          class=\"img__observer\"\n          onNanoResizeStateChange={this.onResize}\n          states={this.imgStates}\n        />\n      </div>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-60dc5bad.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as s,e as h,g as e}from"./p-7a6bc3c5.js";import{a}from"./p-23da4de5.js";import{W as n}from"./p-e8aace3d.js";import{C as o}from"./p-3cc4cb2a.js";import"./p-dfe5a97d.js";import"./p-0e826935.js";const l=class{constructor(s){t(this,s),this.nanoSearchResult=i(this,"nanoSearchResult",7),this.nanoSearch=i(this,"nanoSearch",7),this.nanoSearchReset=i(this,"nanoSearchReset",7),this.searchStr="",this.algoliaIndex=null,this.appId="",this.apiKey="",this.searchIndex=null,this.minChars=2,this.autoEmit=!0,this.browseIndex=!1,this.storeMethod="session",this.handleFocus=()=>{this.inputField&&this.inputField.setFocus()}}async search(){this.emitResults()}searchIndexNameChange(){this.searchIndexName&&this.searchIndexName.length&&(this.searchIndex={index:this.searchIndexName})}algoliaChange(){this.internalIndex=this.algoliaIndex}browseIndexChange(){this.browseIndex&&(this.searchStr="*",this.searchSubmit())}initAlgoliaClient(){!this.isNested&&this.appId&&this.apiKey&&(this.algoliaClient=a(this.appId,this.apiKey),this.searchIndex&&(this.algoliaIndex=this.algoliaClient.initIndex(this.searchIndex.index)))}async searchSubmit(t){if(!this.internalIndex)return void console.error("No algolia index set");if(t){if("nano-input"!==t.target.tagName.toLowerCase())return;this.searchStr=t.detail.value}else{if(this.inputField=this.inputField||this.host.querySelector("nano-input"),!this.inputField)return;this.searchStr=this.inputField.value}if(this.searchStr.length<this.minChars)if(this.browseIndex)this.searchStr="*";else{if(0===this.searchStr.length)return void this.nanoSearchResult.emit({results:[],client:{apiKey:this.appId,appId:this.appId}});if(this.searchStr.length<this.minChars)return}let i={};this.searchIndex.filters&&(i={facets:this.searchIndex.filters});let s=this.fixDomain(await this.internalIndex.search(this.searchStr,i));s.indexName=this.searchIndex.name,s.selected=!0,s.domain=this.searchIndex.domain||null,s.index=this.searchIndex.index,this.currentResults=s,this.nanoSearch.emit({results:[this.currentResults],client:{apiKey:this.appId,appId:this.appId}}),this.autoEmit&&this.emitResults()}emitResults(){this.nanoSearchResult.emit({results:[this.currentResults],client:{apiKey:this.appId,appId:this.appId}})}fixDomain(t){return this.searchIndex.domain?(t.hits.map((t=>{t.url&&!t.url.match(/^http/)&&(t.url=location.protocol+"//"+this.searchIndex.domain+t.url)})),t):t}connectedCallback(){this.isNested="nano-algolia"===this.host.parentElement.tagName.toLowerCase()&&this.host.hasAttribute("slot")&&"search-input"===this.host.getAttribute("slot"),this.isNested||this.host.addEventListener("openWormhole",(t=>{t.detail.onOpen.resolve(),this.searchIndexNameChange(),this.initAlgoliaClient()}))}componentWillLoad(){this.inputField=this.host.querySelector("nano-input"),this.storeId&&o.init(this,["searchStr"],this.storeMethod,this.storeId)}render(){return s(h,{onFocus:this.handleFocus,tabindex:"-1"},s("slot",null))}get host(){return e(this)}static get watchers(){return{searchIndexName:["searchIndexNameChange"],algoliaIndex:["algoliaChange"],browseIndex:["browseIndexChange"],apiKey:["initAlgoliaClient"],appId:["initAlgoliaClient"],searchIndex:["initAlgoliaClient"]}}};n(l,["algoliaIndex","searchIndex","browseIndex"]),l.style="";export{l as nano_algolia_input}
-//# sourceMappingURL=p-60dc5bad.entry.js.map

package/dist/nano-components/p-60dc5bad.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/algolia/algolia-input.scss?tag=nano-algolia-input&encapsulation=shadow","src/components/algolia/algolia-input.tsx"],"names":["AlgoliaInput","[object Object]","hostRef","this","searchStr","algoliaIndex","appId","apiKey","searchIndex","minChars","autoEmit","browseIndex","storeMethod","handleFocus","inputField","setFocus","emitResults","searchIndexName","length","index","internalIndex","searchSubmit","isNested","algoliaClient","algoliasearch","initIndex","ev","console","error","target","tagName","toLowerCase","detail","value","host","querySelector","nanoSearchResult","emit","results","client","options","filters","facets","fixDomain","search","indexName","name","selected","domain","currentResults","nanoSearch","hits","map","hit","url","match","location","protocol","parentElement","hasAttribute","getAttribute","addEventListener","onOpen","resolve","searchIndexNameChange","initAlgoliaClient","storeId","ComponentStore","init","h","Host","onFocus","tabindex","Wormhole"],"mappings":"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","sourcesContent":[null,"import {\n  Component,\n  h,\n  Element,\n  Host,\n  Prop,\n  State,\n  EventEmitter,\n  Event,\n  Listen,\n  Method,\n  Watch,\n  ComponentInterface,\n} from '@stencil/core';\nimport algoliasearch, {\n  SearchClient as AlgoliaClient,\n  SearchIndex as AlgoliaIndex,\n} from 'algoliasearch';\nimport {\n  InputChangeEventDetail,\n  AloliaSearchResultDetail,\n  SearchIndex,\n  AlgoliaMultiResult,\n} from '../../interface';\nimport { Wormhole } from '../algolia/algolia-data';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\n/**\n * @deprecated\n * Component for querying Algolia Indeces.\n * Can be nested within an algolia element or used outside as a 'resultsEmitter' (see algolia component documentation)\n * Must include one 'nano-input' component\n */\n@Component({\n  tag: 'nano-algolia-input',\n  shadow: true,\n  styleUrl: 'algolia-input.scss',\n})\nexport class AlgoliaInput implements ComponentInterface {\n  private internalIndex: AlgoliaIndex;\n  private algoliaClient: AlgoliaClient;\n  private isNested: boolean;\n  private inputField: HTMLNanoInputElement;\n\n  @Element() host: HTMLNanoAlgoliaInputElement;\n\n  @State() searchStr: string = '';\n  @State() algoliaIndex: AlgoliaIndex = null;\n  @State() currentResults: AlgoliaMultiResult;\n\n  /**\n   * An Algolia App ID key. Used in conjunction with 'searchIndex' & 'apiKey'.\n   * Alternatively this will be set automatically when nested within an algolia component\n   */\n  @Prop() appId: string = '';\n\n  /**\n   * An Algolia API Key. Used in conjunction with 'searchIndex' & 'appId'.\n   * Alternatively this will be set automatically when nested within an algolia component\n   */\n  @Prop() apiKey: string = '';\n\n  /**\n   * Algolia search index. Used in conjunction with 'searchIndex' & 'appId'.\n   * Alternatively this will be set automatically if you're using a 'resultsEmitter' element.\n   * ```\n   * { index: string, // algolia index name\n   *   domain?: string, // used in template filers to resolve incomplete url fields\n   *   filters?: [string], // algolia facets to retrive\n   *   hitsPerPage?: number,\n   *   name?: string // human readable index name\n   * }\n   * ```\n   */\n  @Prop({ mutable: true }) searchIndex: SearchIndex = null;\n\n  /**\n   * Algolia search index name. Alternative to 'searchIndex'.\n   * A simplified shortcut for setting an index.\n   * properties such as hitsPerPage and facets will come from the algolia index\n   */\n  @Prop({ mutable: true }) searchIndexName: string;\n\n  /**\n   * Minimum number of characters before performing a search\n   */\n  @Prop() minChars: number = 2;\n\n  /**\n   * Automatically emit results data to algolia components.\n   * For example, if you wanted to provide an 'autocomplete' style dropdown\n   * before showing the main results with a submit button\n   */\n  @Prop() autoEmit: boolean = true;\n\n  /**\n   * Will maintain a search all / '*' on init and reset allowing for a view\n   * then filter experience rather than a search first experience\n   */\n  @Prop({ mutable: true }) browseIndex: boolean = false;\n\n  /**\n   * Store search queries (against this ID) to 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   * Manually emit search results to algolia components.\n   * Useful if you don't wish to search on input change / want to provide 'autocomplete' options\n   * or / and want to use a submit button */\n  @Method()\n  async search() {\n    this.emitResults();\n  }\n\n  /**\n   * Emitted when search results are successfully returned from Algolia.\n   * @internal\n   */\n  @Event() nanoSearchResult!: EventEmitter<AloliaSearchResultDetail>;\n\n  /**\n   * Emitted when search results are successfully returned from Algolia.\n   */\n  @Event() nanoSearch!: EventEmitter<AloliaSearchResultDetail>;\n\n  /**\n   * Emitted when search field is cleared.\n   */\n  @Event() nanoSearchReset!: EventEmitter<AloliaSearchResultDetail>;\n\n  @Watch('searchIndexName')\n  searchIndexNameChange() {\n    if (!this.searchIndexName || !this.searchIndexName.length) return;\n    this.searchIndex = { index: this.searchIndexName };\n  }\n\n  @Watch('algoliaIndex')\n  algoliaChange() {\n    this.internalIndex = this.algoliaIndex;\n  }\n\n  @Watch('browseIndex')\n  browseIndexChange() {\n    if (this.browseIndex) {\n      this.searchStr = '*';\n      this.searchSubmit();\n    }\n  }\n\n  @Watch('apiKey')\n  @Watch('appId')\n  @Watch('searchIndex')\n  initAlgoliaClient() {\n    if (this.isNested || !this.appId || !this.apiKey) return;\n    this.algoliaClient = algoliasearch(this.appId, this.apiKey);\n    if (this.searchIndex)\n      this.algoliaIndex = this.algoliaClient.initIndex(this.searchIndex.index);\n  }\n\n  @Listen('nanoChange')\n  async searchSubmit(ev?: CustomEvent<InputChangeEventDetail>) {\n    if (!this.internalIndex) {\n      console.error('No algolia index set');\n      return;\n    }\n\n    if (ev) {\n      if ((ev.target as HTMLElement).tagName.toLowerCase() !== 'nano-input')\n        return;\n      this.searchStr = ev.detail.value;\n    } else {\n      this.inputField =\n        this.inputField || this.host.querySelector('nano-input');\n      if (!this.inputField) return;\n      this.searchStr = this.inputField.value;\n    }\n\n    if (this.searchStr.length < this.minChars) {\n      if (this.browseIndex) this.searchStr = '*';\n      else {\n        if (this.searchStr.length === 0) {\n          this.nanoSearchResult.emit({\n            results: [],\n            client: { apiKey: this.appId, appId: this.appId },\n          });\n          return;\n        }\n        if (this.searchStr.length < this.minChars) return;\n      }\n    }\n\n    let options = {};\n    if (this.searchIndex.filters)\n      options = { facets: this.searchIndex.filters };\n\n    let results = this.fixDomain(\n      await this.internalIndex.search(this.searchStr, options)\n    );\n    results.indexName = this.searchIndex.name;\n    results.selected = true;\n    results.domain = this.searchIndex.domain || null;\n    results.index = this.searchIndex.index;\n\n    this.currentResults = results;\n    this.nanoSearch.emit({\n      results: [this.currentResults],\n      client: { apiKey: this.appId, appId: this.appId },\n    });\n\n    if (this.autoEmit) this.emitResults();\n  }\n\n  private emitResults() {\n    this.nanoSearchResult.emit({\n      results: [this.currentResults],\n      client: { apiKey: this.appId, appId: this.appId },\n    });\n  }\n\n  private fixDomain(results: AlgoliaMultiResult) {\n    if (!this.searchIndex.domain) return results;\n    results.hits.map((hit) => {\n      if (hit.url && !hit.url.match(/^http/))\n        hit.url = location.protocol + '//' + this.searchIndex.domain + hit.url;\n    });\n    return results;\n  }\n\n  private handleFocus = () => {\n    if (this.inputField) this.inputField.setFocus();\n  };\n\n  connectedCallback() {\n    this.isNested =\n      this.host.parentElement.tagName.toLowerCase() === 'nano-algolia' &&\n      this.host.hasAttribute('slot') &&\n      this.host.getAttribute('slot') === 'search-input';\n\n    if (!this.isNested) {\n      this.host.addEventListener(\n        'openWormhole',\n        (ev: CustomEvent<{ onOpen: any }>) => {\n          ev.detail.onOpen.resolve();\n          this.searchIndexNameChange();\n          this.initAlgoliaClient();\n        }\n      );\n    }\n  }\n\n  componentWillLoad() {\n    this.inputField = this.host.querySelector('nano-input');\n    if (this.storeId)\n      ComponentStore.init(this, ['searchStr'], this.storeMethod, this.storeId);\n  }\n\n  render() {\n    return (\n      <Host onFocus={this.handleFocus} tabindex=\"-1\">\n        <slot />\n      </Host>\n    );\n  }\n}\n\nWormhole(AlgoliaInput, ['algoliaIndex', 'searchIndex', 'browseIndex']);\n"]}

package/dist/nano-components/p-63c4fbd6.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./p-3b21dfce.system.js","./p-a057ad2d.system.js","./p-3d1c1c19.system.js"],(function(e){"use strict";var t,o,n,i,r,s,a;return{setters:[function(e){t=e.r;o=e.c;n=e.h;i=e.e;r=e.g},function(e){s=e.c},function(e){a=e.g}],execute:function(){var c=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:block}";var l=e("nano_accordion",function(){function e(e){t(this,e);this.nanoToggle=o(this,"nanoToggle",7)}e.prototype.onToggleHandler=function(e){var t=this;e.stopPropagation();var o=a(this.el,"nano-details")||this.el.querySelectorAll("nano-details");o.forEach((function(o,n){if(o!==e.target)o.open=false;else t.itemOpened=n}));this.nanoToggle.emit()};e.prototype.onClosedHandler=function(e){e.stopPropagation();this.itemOpened=null;this.nanoToggle.emit()};e.prototype.render=function(){var e;return n(i,{class:Object.assign(Object.assign({},s(this.color)),(e={},e["nano-color-"+this.itemOpened]=typeof this.itemOpened==="number",e))},n("slot",null))};e.prototype.connectedCallback=function(){};Object.defineProperty(e.prototype,"el",{get:function(){return r(this)},enumerable:false,configurable:true});return e}());l.style=c}}}));
-//# sourceMappingURL=p-63c4fbd6.system.entry.js.map

package/dist/nano-components/p-63c4fbd6.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/accordion/accordion.scss?tag=nano-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"names":["accordionCss","Accordion","exports","class_1","prototype","onToggleHandler","event","_this","this","stopPropagation","items","getDirectChildren","el","querySelectorAll","forEach","item","i","target","open","itemOpened","nanoToggle","emit","onClosedHandler","render","h","Host","class","Object","assign","createColorClasses","color","_a","connectedCallback"],"mappings":"8PAAA,IAAMA,EAAe,8JCwBRC,EAASC,EAAA,iBAAA,0EAgBpBC,EAAAC,UAAAC,gBAAA,SAAgBC,GAAhB,IAAAC,EAAAC,KACEF,EAAMG,kBAEN,IAAIC,EACFC,EAAkBH,KAAKI,GAAI,iBAC3BJ,KAAKI,GAAGC,iBAAiB,gBAC3BH,EAAMI,SAAQ,SAACC,EAA8BC,GAC3C,GAAID,IAAST,EAAMW,OAAQF,EAAKG,KAAO,WAClCX,EAAKY,WAAaH,KAEzBR,KAAKY,WAAWC,QAIlBlB,EAAAC,UAAAkB,gBAAA,SAAgBhB,GACdA,EAAMG,kBACND,KAAKW,WAAa,KAClBX,KAAKY,WAAWC,QAGlBlB,EAAAC,UAAAmB,OAAA,iBACE,OACEC,EAACC,EAAI,CACHC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACAC,EAAmBrB,KAAKsB,SAAMC,EAAA,GACjCA,EAAC,cAAcvB,KAAKW,mBACXX,KAAKW,aAAe,SAAQY,KAGvCP,EAAA,OAAA,QAKNrB,EAAAC,UAAA4B,kBAAA,kIAlDoB","sourcesContent":[":host {\n  display: block;\n}\n","import {\n  Component,\n  h,\n  Listen,\n  Element,\n  Host,\n  Prop,\n  EventEmitter,\n  Event,\n  State,\n} from '@stencil/core';\n\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils/theme';\nimport { testLegacyStyle, getDirectChildren } from '../../utils/utils';\n\n/**\n * Simple accordion - only one item open at a time - must be used with [details](story/components-accordion--details) elements.\n */\n@Component({\n  tag: 'nano-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: true,\n})\nexport class Accordion {\n  @State() itemOpened?: number;\n\n  @Element() el: HTMLNanoAccordionElement;\n\n  /**\n   * Fires when accordion elements toggle\n   */\n  @Event() nanoToggle: EventEmitter;\n\n  /**\n   * Color to use from the color palette.\n   */\n  @Prop() color?: Color;\n\n  @Listen('nanoOpened')\n  onToggleHandler(event: CustomEvent) {\n    event.stopPropagation();\n\n    let items =\n      getDirectChildren(this.el, 'nano-details') ||\n      this.el.querySelectorAll('nano-details');\n    items.forEach((item: HTMLNanoDetailsElement, i) => {\n      if (item !== event.target) item.open = false;\n      else this.itemOpened = i;\n    });\n    this.nanoToggle.emit();\n  }\n\n  @Listen('nanoClosed')\n  onClosedHandler(event: CustomEvent) {\n    event.stopPropagation();\n    this.itemOpened = null;\n    this.nanoToggle.emit();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          ...createColorClasses(this.color),\n          [`nano-color-${this.itemOpened}`]:\n            typeof this.itemOpened === 'number',\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n\n  connectedCallback() {\n    testLegacyStyle(this.el);\n  }\n}\n"]}

package/dist/nano-components/p-6941b7ca.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as a,e,g as s}from"./p-7a6bc3c5.js";import{M as o}from"./p-8c9e74c7.js";import{r as n}from"./p-c930d4f5.js";import{l as r,u as l}from"./p-5af040f4.js";import{c}from"./p-d3af43d2.js";import"./p-a5917bdc.js";import"./p-a0ddf496.js";const h=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tr"}),d=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tl"}),b=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--bl"}),m=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--br"}),p=class{constructor(e){t(this,e),this.nanoShow=i(this,"nanoShow",7),this.nanoAfterShow=i(this,"nanoAfterShow",7),this.nanoHide=i(this,"nanoHide",7),this.nanoAfterHide=i(this,"nanoAfterHide",7),this.addedTransEnd=!1,this.goingToHide=!1,this.goingToShow=!1,this.isModal=!1,this.isToast=!1,this.isShowing=!1,this.open=!1,this.closable=!1,this.duration=1/0,this.handleMouseMove=()=>{this.restartAutoHide()},this.handleCloseClick=()=>{this.hide()},this.handleTransitionEnd=t=>{"opacity"!==t.propertyName||t.target!==this.panel&&t.target!==this.overlay||(this.host.hidden=!this.open,this.isShowing=this.open,this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit())},this.handleButtonClick=t=>{const i=t.target;t.defaultPrevented||i.tagName&&"button"===i.tagName.toLowerCase()&&this.hide()},this.restartAutoHide=()=>{clearTimeout(this.autoHideTimeout),this.open&&this.duration<1/0&&(this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration))},this.Panel=()=>a("div",{ref:t=>this.panel=t,part:"panel",class:{alert:!0,"alert--open":this.open,"alert--toasty":this.isToast,"alert--modal":!!this.isModal,"alert--showing":this.isShowing},role:this.isModal?"alertdialog":"alert","aria-live":"assertive","aria-atomic":"true","aria-hidden":this.open?"false":"true","aria-modal":this.isModal?"true":void 0,"aria-label":this.label?this.label:void 0,onMouseMove:this.handleMouseMove,tabIndex:this.isModal?0:void 0},a("div",{class:"alert__content"},a("div",{part:"icon",class:"alert__icon"},a("slot",{name:"icon"})),a("div",{part:"message",class:"alert__message"},a("slot",null)),this.closable&&a("div",{class:"alert__close"},a("nano-icon-button",{class:"alert__close",iconName:"light/times",label:"close menu",onClick:this.handleCloseClick}))),a("div",{class:"alert__footer"},a("slot",{name:"footer"})))}handleOpenChange(){this.open?this.show():this.hide()}handleDurationChange(){this.restartAutoHide()}async show(){if(!this.goingToShow)return this.nanoShow.emit().defaultPrevented?(this.open=!1,!1):(this.host.hidden=!1,this.goingToShow=!0,this.open=!0,n((()=>{this.isShowing=!0,this.goingToShow=!1})),void(this.duration<1/0&&(clearTimeout(this.autoHideTimeout),this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration))))}async hide(){if(!this.goingToHide)return this.nanoHide.emit().defaultPrevented?(this.open=!0,!1):(this.goingToHide=!0,this.open=!1,n((()=>this.goingToHide=!1)),void clearTimeout(this.autoHideTimeout))}async toast(t="tr"){return this.isToast=!0,new Promise((i=>{let a;switch(t){case"tl":a=d;break;case"bl":a=b;break;case"br":a=m;break;default:a=h}a.parentElement||document.body.appendChild(a),a.appendChild(this.host),this.connectedCallback(),this.show(),this.host.addEventListener("nanoAfterHide",(()=>{this.host.remove(),this.isToast=!1,i(),a.querySelector("nano-alert")||a.remove()}),{once:!0})}))}async alert(t){return this.isModal=!0,this.label=t,new Promise((t=>{document.body.contains(this.host)||document.body.appendChild(this.host),this.modal.activate(),r(this.host),this.originalTrigger=document.activeElement,n((()=>{this.show()})),this.host.addEventListener("nanoAfterShow",(()=>{n((()=>this.panel.focus({preventScroll:!0})))}),{once:!0}),this.host.addEventListener("nanoAfterHide",(()=>{this.modal.deactivate(),this.host.remove(),this.label=void 0,this.isModal=!1,t(),this.originalTrigger&&"function"==typeof this.originalTrigger.focus&&setTimeout((()=>this.originalTrigger.focus()))}),{once:!0})}))}connectedCallback(){this.modal=new o(this.host),this.host.addEventListener("click",this.handleButtonClick),this.panel&&(this.addedTransEnd=!0,this.panel.addEventListener("transitionend",this.handleTransitionEnd))}disconnectedCallback(){l(this.host),this.host.removeEventListener("click",this.handleButtonClick),this.addedTransEnd=!1,this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}componentDidLoad(){this.open&&this.show(),this.addedTransEnd||this.panel.addEventListener("transitionend",this.handleTransitionEnd)}render(){return a(e,{class:Object.assign({},c(this.color)),showing:this.isShowing},this.isModal&&[a("div",{part:"overlay",class:{alert__overlay:!0,"alert__overlay--open":this.open},ref:t=>this.overlay=t}),a("div",{class:"alert__modal-wrap"},a(this.Panel,null))],!this.isModal&&a(this.Panel,null))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"],duration:["handleDurationChange"]}}};p.style=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--border-color:var(--nano-layer-border-color, rgba(0, 0, 0, 0.1));--border-width:var(--nano-layer-border-width, 1px);--background:var(--nano-layer-bg, #fff);--tint-color:var(--nano-color-base, var(--nano-color-primary, #0084a9));--icon-size:2rem;--scrim-color:var(--nano-layer-overlay-dark, rgba(74, 74, 74, .5));--close-button-color:#b5aea7;display:block}:host(.nano-color){--tint-color:var(--nano-color-base, var(--nano-color-primary, #0084a9))}.alert{position:relative;background-color:var(--background);border:solid var(--border-width) var(--border-color);border-top-width:4px;border-top-color:var(--tint-color);border-radius:var(--border-radius);opacity:0;-webkit-transform:scale(0.9);transform:scale(0.9);-webkit-transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease;transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease}.alert:focus{outline:none}.alert:not(.alert--showing){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--open{opacity:1;-webkit-transform:none;transform:none}.alert--toasty,.alert--modal{-webkit-box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.3));box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.3));margin:var(--nano-spacing-medium, 16px)}.alert__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.alert__modal-wrap{position:fixed;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:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--nano-layer-index-alert, 800)}.alert__message{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:var(--nano-spacing-medium, 16px);overflow:hidden;line-height:1.6}.alert__close{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.1em;padding-left:0;padding-right:var(--nano-spacing-medium, 16px);padding-top:0;padding-bottom:0;--color:var(--close-button-color)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.alert__close{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--nano-spacing-medium, 16px);padding-inline-end:var(--nano-spacing-medium, 16px)}}.alert__footer{padding:0 var(--nano-spacing-small, 8px) 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.alert__footer ::slotted(*),.alert__footer::slotted(*){-webkit-box-flex:1;-ms-flex:1;flex:1;margin:0 var(--nano-spacing-small, 8px) var(--nano-spacing-medium, 16px) !important}.alert__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--scrim-color);opacity:0;-webkit-transition:var(--nano-transition-fast, 0.3s) opacity;transition:var(--nano-transition-fast, 0.3s) opacity;z-index:var(--nano-layer-index-alert, 800);-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.alert__overlay--open{opacity:1}.alert__icon{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--icon-size)}.alert__icon::slotted(*){color:var(--tint-color);margin-left:var(--nano-spacing-medium, 16px)}.alert__icon ::slotted(*){color:var(--tint-color);margin-left:var(--nano-spacing-medium, 16px);margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.alert__icon ::slotted(*){margin-left:unset;margin-right:unset;-webkit-margin-start:var(--nano-spacing-medium, 16px);margin-inline-start:var(--nano-spacing-medium, 16px);-webkit-margin-end:0;margin-inline-end:0}}";export{p as nano_alert}
-//# sourceMappingURL=p-6941b7ca.entry.js.map

package/dist/nano-components/p-6941b7ca.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/alert/alert.scss?tag=nano-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"names":["toastStackTr","Object","assign","document","createElement","className","toastStackTl","toastStackBl","toastStackBr","Alert","[object Object]","hostRef","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","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","show","nanoShow","raf","nanoHide","position","Promise","resolve","toastStack","parentElement","body","appendChild","connectedCallback","addEventListener","remove","querySelector","once","contains","modal","activate","lockBodyScrolling","originalTrigger","activeElement","focus","preventScroll","deactivate","Modal","unlockBodyScrolling","removeEventListener","Host","createColorClasses","color","showing","alert__overlay","alert__overlay--open","div"],"mappings":"6PAAA,MCuBMA,EAAeC,OAAOC,OAAOC,SAASC,cAAc,OAAQ,CAChEC,UAAW,0CAEPC,EAAeL,OAAOC,OAAOC,SAASC,cAAc,OAAQ,CAChEC,UAAW,0CAEPE,EAAeN,OAAOC,OAAOC,SAASC,cAAc,OAAQ,CAChEC,UAAW,0CAEPG,EAAeP,OAAOC,OAAOC,SAASC,cAAc,OAAQ,CAChEC,UAAW,0CAcAI,EAAK,MALlBC,YAAAC,6KAWUC,KAAAC,eAAgB,EAChBD,KAAAE,aAAc,EACdF,KAAAG,aAAc,EAEbH,KAAAI,SAAU,EACVJ,KAAAK,SAAU,EACVL,KAAAM,WAAY,EAMmBN,KAAAO,MAAO,EAQtBP,KAAAQ,UAAW,EAS5BR,KAAAS,SAAWC,EAAAA,EAyKXV,KAAAW,gBAAkB,KACxBX,KAAKY,mBAGCZ,KAAAa,iBAAmB,KACzBb,KAAKc,QAGCd,KAAAe,oBAAuBC,IAEJ,YAAvBA,EAAMC,cACLD,EAAME,SAAWlB,KAAKmB,OAASH,EAAME,SAAWlB,KAAKoB,UAEtDpB,KAAKqB,KAAKC,QAAUtB,KAAKO,KACzBP,KAAKM,UAAYN,KAAKO,KACtBP,KAAKO,KAAOP,KAAKuB,cAAcC,OAASxB,KAAKyB,cAAcD,SAIvDxB,KAAA0B,kBAAqBV,IAC3B,MAAME,EAASF,EAAME,OACjBF,EAAMW,kBACNT,EAAOU,SAA4C,WAAjCV,EAAOU,QAAQC,eACnC7B,KAAKc,QAGDd,KAAAY,gBAAkB,KACxBkB,aAAa9B,KAAK+B,iBACd/B,KAAKO,MAAQP,KAAKS,SAAWC,EAAAA,IAC/BV,KAAK+B,gBAAkBC,YAAW,IAAMhC,KAAKc,QAAQd,KAAKS,YAgCtDT,KAAAiC,MAAQ,IAEZC,EAAA,MAAA,CACEC,IAAMC,GAAQpC,KAAKmB,MAAQiB,EAC3BC,KAAK,QACLC,MAAO,CACLC,OAAO,EACPC,cAAexC,KAAKO,KACpBkC,gBAAiBzC,KAAKK,QACtBqC,iBAAkB1C,KAAKI,QACvBuC,iBAAkB3C,KAAKM,WAEzBsC,KAAQ5C,KAAKI,QAAU,cAAgB,QAAOyC,YACpC,YAAWC,cACT,OAAMC,cACL/C,KAAKO,KAAO,QAAU,OAAMyC,aAC3BhD,KAAKI,QAAU,YAAS6C,EAASC,aACnClD,KAAKmD,MAAQnD,KAAKmD,WAAQF,EACtCG,YAAapD,KAAKW,gBAClB0C,SAAYrD,KAAKI,QAAU,OAAI6C,GAE/Bf,EAAA,MAAA,CAAKI,MAAM,kBACTJ,EAAA,MAAA,CAAKG,KAAK,OAAOC,MAAM,eACrBJ,EAAA,OAAA,CAAMoB,KAAK,UAEbpB,EAAA,MAAA,CAAKG,KAAK,UAAUC,MAAM,kBACxBJ,EAAA,OAAA,OAEDlC,KAAKQ,UACJ0B,EAAA,MAAA,CAAKI,MAAM,gBACTJ,EAAA,mBAAA,CACEI,MAAM,eACNiB,SAAS,cACTJ,MAAM,aACNK,QAASxD,KAAKa,qBAKtBqB,EAAA,MAAA,CAAKI,MAAM,iBACTJ,EAAA,OAAA,CAAMoB,KAAK,aA5RnBxD,mBACEE,KAAKO,KAAOP,KAAKyD,OAASzD,KAAKc,OAgBjChB,uBACEE,KAAKY,kBAiBPd,aACE,IAAIE,KAAKG,YAIT,OADiBH,KAAK0D,SAASlC,OAClBG,kBACX3B,KAAKO,MAAO,GACL,IAGTP,KAAKqB,KAAKC,QAAS,EACnBtB,KAAKG,aAAc,EACnBH,KAAKO,MAAO,EACZoD,GAAI,KACF3D,KAAKM,WAAY,EACjBN,KAAKG,aAAc,UAGjBH,KAAKS,SAAWC,EAAAA,IAClBoB,aAAa9B,KAAK+B,iBAClB/B,KAAK+B,gBAAkBC,YAAW,IAAMhC,KAAKc,QAAQd,KAAKS,aAM9DX,aACE,IAAIE,KAAKE,YAKT,OAFiBF,KAAK4D,SAASpC,OAElBG,kBACX3B,KAAKO,MAAO,GACL,IAETP,KAAKE,aAAc,EACnBF,KAAKO,MAAO,EAEZoD,GAAI,IAAO3D,KAAKE,aAAc,SAC9B4B,aAAa9B,KAAK+B,kBAYpBjC,YAAY+D,EAAsC,MAEhD,OADA7D,KAAKK,SAAU,EACR,IAAIyD,SAAeC,IACxB,IAAIC,EACJ,OAAQH,GACN,IAAK,KACHG,EAAatE,EACb,MACF,IAAK,KACHsE,EAAarE,EACb,MACF,IAAK,KACHqE,EAAapE,EACb,MACF,QACEoE,EAAa5E,EAIZ4E,EAAWC,eACd1E,SAAS2E,KAAKC,YAAYH,GAG5BA,EAAWG,YAAYnE,KAAKqB,MAC5BrB,KAAKoE,oBACLpE,KAAKyD,OAELzD,KAAKqB,KAAKgD,iBACR,iBACA,KACErE,KAAKqB,KAAKiD,SACVtE,KAAKK,SAAU,EACf0D,IAGKC,EAAWO,cAAc,eAC5BP,EAAWM,WAGf,CAAEE,MAAM,OAUd1E,YAAYqD,GAIV,OAHAnD,KAAKI,SAAU,EACfJ,KAAKmD,MAAQA,EAEN,IAAIW,SAAeC,IACnBxE,SAAS2E,KAAKO,SAASzE,KAAKqB,OAC/B9B,SAAS2E,KAAKC,YAAYnE,KAAKqB,MAGjCrB,KAAK0E,MAAMC,WACXC,EAAkB5E,KAAKqB,MACvBrB,KAAK6E,gBAAkBtF,SAASuF,cAEhCnB,GAAI,KACF3D,KAAKyD,UAGPzD,KAAKqB,KAAKgD,iBACR,iBACA,KACEV,GAAI,IAAM3D,KAAKmB,MAAM4D,MAAM,CAAEC,eAAe,QAE9C,CAAER,MAAM,IAGVxE,KAAKqB,KAAKgD,iBACR,iBACA,KACErE,KAAK0E,MAAMO,aACXjF,KAAKqB,KAAKiD,SACVtE,KAAKmD,WAAQF,EACbjD,KAAKI,SAAU,EACf2D,IAIE/D,KAAK6E,iBACiC,mBAA/B7E,KAAK6E,gBAAgBE,OAE5B/C,YAAW,IAAMhC,KAAK6E,gBAAgBE,YAG1C,CAAEP,MAAM,OAsCd1E,oBACEE,KAAK0E,MAAQ,IAAIQ,EAAMlF,KAAKqB,MAC5BrB,KAAKqB,KAAKgD,iBAAiB,QAASrE,KAAK0B,mBAErC1B,KAAKmB,QACPnB,KAAKC,eAAgB,EACrBD,KAAKmB,MAAMkD,iBAAiB,gBAAiBrE,KAAKe,sBAItDjB,uBACEqF,EAAoBnF,KAAKqB,MACzBrB,KAAKqB,KAAK+D,oBAAoB,QAASpF,KAAK0B,mBAE5C1B,KAAKC,eAAgB,EACrBD,KAAKmB,MAAMiE,oBAAoB,gBAAiBpF,KAAKe,qBAGvDjB,mBAEME,KAAKO,MACPP,KAAKyD,OAEFzD,KAAKC,eACRD,KAAKmB,MAAMkD,iBAAiB,gBAAiBrE,KAAKe,qBAkDtDjB,SACE,OACEoC,EAACmD,EAAI,CACH/C,MAAKjD,OAAAC,OAAA,GAAOgG,EAAmBtF,KAAKuF,QACpCC,QAASxF,KAAKM,WAEbN,KAAKI,SAAW,CACf8B,EAAA,MAAA,CACEG,KAAK,UACLC,MAAO,CACLmD,gBAAgB,EAChBC,uBAAwB1F,KAAKO,MAE/B4B,IAAMwD,GAAS3F,KAAKoB,QAAUuE,IAEhCzD,EAAA,MAAA,CAAKI,MAAM,qBACTJ,EAAClC,KAAKiC,MAAK,SAGbjC,KAAKI,SAAW8B,EAAClC,KAAKiC,MAAK,qIDzXpB","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: #{$transition-medium} opacity ease, #{$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, &--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  position: fixed;\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  @include padding(0, #{$spacing-medium}, 0, 0);\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  @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/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      this.host.addEventListener(\n        'nanoAfterHide',\n        () => {\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        { once: true }\n      );\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      this.host.addEventListener(\n        'nanoAfterShow',\n        () => {\n          raf(() => this.panel.focus({ preventScroll: true }));\n        },\n        { once: true }\n      );\n\n      this.host.addEventListener(\n        'nanoAfterHide',\n        () => {\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        { 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 = (event: Event) => {\n    const target = event.target as HTMLElement;\n    if (event.defaultPrevented) return;\n    if (target.tagName && 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-6a284815.js

@@ -1,2 +0,0 @@
-var t=function(){if("undefined"!=typeof Map)return Map;function t(t,n){var i=-1;return t.some((function(t,e){return t[0]===n&&(i=e,!0)})),i}return function(){function n(){this.__entries__=[]}return Object.defineProperty(n.prototype,"size",{get:function(){return this.__entries__.length},enumerable:!0,configurable:!0}),n.prototype.get=function(n){var i=t(this.__entries__,n),e=this.__entries__[i];return e&&e[1]},n.prototype.set=function(n,i){var e=t(this.__entries__,n);~e?this.__entries__[e][1]=i:this.__entries__.push([n,i])},n.prototype.delete=function(n){var i=this.__entries__,e=t(i,n);~e&&i.splice(e,1)},n.prototype.has=function(n){return!!~t(this.__entries__,n)},n.prototype.clear=function(){this.__entries__.splice(0)},n.prototype.forEach=function(t,n){void 0===n&&(n=null);for(var i=0,e=this.__entries__;i<e.length;i++){var r=e[i];t.call(n,r[1],r[0])}},n}()}(),n="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,i="undefined"!=typeof global&&global.Math===Math?global:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),e="function"==typeof requestAnimationFrame?requestAnimationFrame.bind(i):function(t){return setTimeout((function(){return t(Date.now())}),1e3/60)},r=["top","right","bottom","left","width","height","size","weight"],o="undefined"!=typeof MutationObserver,u=function(){function t(){this.connected_=!1,this.mutationEventsAdded_=!1,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(t){var n=!1,i=!1,r=0;function o(){n&&(n=!1,t()),i&&s()}function u(){e(o)}function s(){var t=Date.now();if(n){if(t-r<2)return;i=!0}else n=!0,i=!1,setTimeout(u,20);r=t}return s}(this.refresh.bind(this))}return t.prototype.addObserver=function(t){~this.observers_.indexOf(t)||this.observers_.push(t),this.connected_||this.connect_()},t.prototype.removeObserver=function(t){var n=this.observers_,i=n.indexOf(t);~i&&n.splice(i,1),!n.length&&this.connected_&&this.disconnect_()},t.prototype.refresh=function(){this.updateObservers_()&&this.refresh()},t.prototype.updateObservers_=function(){var t=this.observers_.filter((function(t){return t.gatherActive(),t.hasActive()}));return t.forEach((function(t){return t.broadcastActive()})),t.length>0},t.prototype.connect_=function(){n&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),o?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},t.prototype.disconnect_=function(){n&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},t.prototype.onTransitionEnd_=function(t){var n=t.propertyName,i=void 0===n?"":n;r.some((function(t){return!!~i.indexOf(t)}))&&this.refresh()},t.getInstance=function(){return this.instance_||(this.instance_=new t),this.instance_},t.instance_=null,t}(),s=function(t,n){for(var i=0,e=Object.keys(n);i<e.length;i++){var r=e[i];Object.defineProperty(t,r,{value:n[r],enumerable:!1,writable:!1,configurable:!0})}return t},f=function(t){return t&&t.ownerDocument&&t.ownerDocument.defaultView||i},h=p(0,0,0,0);function a(t){return parseFloat(t)||0}function c(t){for(var n=[],i=1;i<arguments.length;i++)n[i-1]=arguments[i];return n.reduce((function(n,i){return n+a(t["border-"+i+"-width"])}),0)}var d="undefined"!=typeof SVGGraphicsElement?function(t){return t instanceof f(t).SVGGraphicsElement}:function(t){return t instanceof f(t).SVGElement&&"function"==typeof t.getBBox};function l(t){return n?d(t)?function(t){var n=t.getBBox();return p(0,0,n.width,n.height)}(t):function(t){var n=t.clientWidth,i=t.clientHeight;if(!n&&!i)return h;var e=f(t).getComputedStyle(t),r=function(t){for(var n={},i=0,e=["top","right","bottom","left"];i<e.length;i++){var r=e[i];n[r]=a(t["padding-"+r])}return n}(e),o=r.left+r.right,u=r.top+r.bottom,s=a(e.width),d=a(e.height);if("border-box"===e.boxSizing&&(Math.round(s+o)!==n&&(s-=c(e,"left","right")+o),Math.round(d+u)!==i&&(d-=c(e,"top","bottom")+u)),!function(t){return t===f(t).document.documentElement}(t)){var l=Math.round(s+o)-n,v=Math.round(d+u)-i;1!==Math.abs(l)&&(s-=l),1!==Math.abs(v)&&(d-=v)}return p(r.left,r.top,s,d)}(t):h}function p(t,n,i,e){return{x:t,y:n,width:i,height:e}}var v=function(){function t(t){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=p(0,0,0,0),this.target=t}return t.prototype.isActive=function(){var t=l(this.target);return this.contentRect_=t,t.width!==this.broadcastWidth||t.height!==this.broadcastHeight},t.prototype.broadcastRect=function(){var t=this.contentRect_;return this.broadcastWidth=t.width,this.broadcastHeight=t.height,t},t}(),w=function(t,n){var i,e,r,o,u,f,h,a=(e=(i=n).x,r=i.y,o=i.width,u=i.height,f="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,h=Object.create(f.prototype),s(h,{x:e,y:r,width:o,height:u,top:r,right:e+o,bottom:u+r,left:e}),h);s(this,{target:t,contentRect:a})},b=function(){function n(n,i,e){if(this.activeObservations_=[],this.observations_=new t,"function"!=typeof n)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=n,this.controller_=i,this.callbackCtx_=e}return n.prototype.observe=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(t instanceof f(t).Element))throw new TypeError('parameter 1 is not of type "Element".');var n=this.observations_;n.has(t)||(n.set(t,new v(t)),this.controller_.addObserver(this),this.controller_.refresh())}},n.prototype.unobserve=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(t instanceof f(t).Element))throw new TypeError('parameter 1 is not of type "Element".');var n=this.observations_;n.has(t)&&(n.delete(t),n.size||this.controller_.removeObserver(this))}},n.prototype.disconnect=function(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)},n.prototype.gatherActive=function(){var t=this;this.clearActive(),this.observations_.forEach((function(n){n.isActive()&&t.activeObservations_.push(n)}))},n.prototype.broadcastActive=function(){if(this.hasActive()){var t=this.callbackCtx_,n=this.activeObservations_.map((function(t){return new w(t.target,t.broadcastRect())}));this.callback_.call(t,n,t),this.clearActive()}},n.prototype.clearActive=function(){this.activeObservations_.splice(0)},n.prototype.hasActive=function(){return this.activeObservations_.length>0},n}(),m="undefined"!=typeof WeakMap?new WeakMap:new t,y=function t(n){if(!(this instanceof t))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var i=u.getInstance(),e=new b(n,i,this);m.set(this,e)};["observe","unobserve","disconnect"].forEach((function(t){y.prototype[t]=function(){var n;return(n=m.get(this))[t].apply(n,arguments)}}));var M=void 0!==i.ResizeObserver?i.ResizeObserver:y;export{M as i}
-//# sourceMappingURL=p-6a284815.js.map

package/dist/nano-components/p-6a284815.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js"],"names":["MapShim","Map","getIndex","arr","key","result","some","entry","index","class_1","this","__entries__","Object","defineProperty","prototype","get","length","enumerable","configurable","set","value","push","delete","entries","splice","has","clear","forEach","callback","ctx","_i","_a","call","isBrowser","window","document","global$1","global","Math","self","Function","requestAnimationFrame$1","requestAnimationFrame","bind","setTimeout","Date","now","transitionKeys","mutationObserverSupported","MutationObserver","ResizeObserverController","connected_","mutationEventsAdded_","mutationsObserver_","observers_","onTransitionEnd_","refresh","leadingCall","trailingCall","lastCallTime","resolvePending","proxy","timeoutCallback","timeStamp","throttle","addObserver","observer","indexOf","connect_","removeObserver","observers","disconnect_","updateObservers_","activeObservers","filter","gatherActive","hasActive","broadcastActive","addEventListener","observe","attributes","childList","characterData","subtree","removeEventListener","disconnect","_b","propertyName","getInstance","instance_","defineConfigurable","target","props","keys","writable","getWindowOf","ownerDocument","defaultView","emptyRect","createRectInit","toFloat","parseFloat","getBordersSize","styles","positions","arguments","reduce","size","position","isSVGGraphicsElement","SVGGraphicsElement","SVGElement","getBBox","getContentRect","bbox","width","height","getSVGContentRect","clientWidth","clientHeight","getComputedStyle","paddings","positions_1","getPaddings","horizPad","left","right","vertPad","top","bottom","boxSizing","round","documentElement","isDocumentElement","vertScrollbar","horizScrollbar","abs","getHTMLElementContentRect","x","y","ResizeObservation","broadcastWidth","broadcastHeight","contentRect_","isActive","rect","broadcastRect","ResizeObserverEntry","rectInit","Constr","contentRect","DOMRectReadOnly","create","ResizeObserverSPI","controller","callbackCtx","activeObservations_","observations_","TypeError","callback_","controller_","callbackCtx_","Element","observations","unobserve","clearActive","_this","observation","map","WeakMap","ResizeObserver","method","apply"],"mappings":"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","sourcesContent":["/**\r\n * A collection of shims that provide minimal functionality of the ES6 collections.\r\n *\r\n * These implementations are not meant to be used outside of the ResizeObserver\r\n * modules as they cover only a limited range of use cases.\r\n */\r\n/* eslint-disable require-jsdoc, valid-jsdoc */\r\nvar MapShim = (function () {\r\n    if (typeof Map !== 'undefined') {\r\n        return Map;\r\n    }\r\n    /**\r\n     * Returns index in provided array that matches the specified key.\r\n     *\r\n     * @param {Array<Array>} arr\r\n     * @param {*} key\r\n     * @returns {number}\r\n     */\r\n    function getIndex(arr, key) {\r\n        var result = -1;\r\n        arr.some(function (entry, index) {\r\n            if (entry[0] === key) {\r\n                result = index;\r\n                return true;\r\n            }\r\n            return false;\r\n        });\r\n        return result;\r\n    }\r\n    return /** @class */ (function () {\r\n        function class_1() {\r\n            this.__entries__ = [];\r\n        }\r\n        Object.defineProperty(class_1.prototype, \"size\", {\r\n            /**\r\n             * @returns {boolean}\r\n             */\r\n            get: function () {\r\n                return this.__entries__.length;\r\n            },\r\n            enumerable: true,\r\n            configurable: true\r\n        });\r\n        /**\r\n         * @param {*} key\r\n         * @returns {*}\r\n         */\r\n        class_1.prototype.get = function (key) {\r\n            var index = getIndex(this.__entries__, key);\r\n            var entry = this.__entries__[index];\r\n            return entry && entry[1];\r\n        };\r\n        /**\r\n         * @param {*} key\r\n         * @param {*} value\r\n         * @returns {void}\r\n         */\r\n        class_1.prototype.set = function (key, value) {\r\n            var index = getIndex(this.__entries__, key);\r\n            if (~index) {\r\n                this.__entries__[index][1] = value;\r\n            }\r\n            else {\r\n                this.__entries__.push([key, value]);\r\n            }\r\n        };\r\n        /**\r\n         * @param {*} key\r\n         * @returns {void}\r\n         */\r\n        class_1.prototype.delete = function (key) {\r\n            var entries = this.__entries__;\r\n            var index = getIndex(entries, key);\r\n            if (~index) {\r\n                entries.splice(index, 1);\r\n            }\r\n        };\r\n        /**\r\n         * @param {*} key\r\n         * @returns {void}\r\n         */\r\n        class_1.prototype.has = function (key) {\r\n            return !!~getIndex(this.__entries__, key);\r\n        };\r\n        /**\r\n         * @returns {void}\r\n         */\r\n        class_1.prototype.clear = function () {\r\n            this.__entries__.splice(0);\r\n        };\r\n        /**\r\n         * @param {Function} callback\r\n         * @param {*} [ctx=null]\r\n         * @returns {void}\r\n         */\r\n        class_1.prototype.forEach = function (callback, ctx) {\r\n            if (ctx === void 0) { ctx = null; }\r\n            for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {\r\n                var entry = _a[_i];\r\n                callback.call(ctx, entry[1], entry[0]);\r\n            }\r\n        };\r\n        return class_1;\r\n    }());\r\n})();\n\n/**\r\n * Detects whether window and document objects are available in current environment.\r\n */\r\nvar isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;\n\n// Returns global object of a current environment.\r\nvar global$1 = (function () {\r\n    if (typeof global !== 'undefined' && global.Math === Math) {\r\n        return global;\r\n    }\r\n    if (typeof self !== 'undefined' && self.Math === Math) {\r\n        return self;\r\n    }\r\n    if (typeof window !== 'undefined' && window.Math === Math) {\r\n        return window;\r\n    }\r\n    // eslint-disable-next-line no-new-func\r\n    return Function('return this')();\r\n})();\n\n/**\r\n * A shim for the requestAnimationFrame which falls back to the setTimeout if\r\n * first one is not supported.\r\n *\r\n * @returns {number} Requests' identifier.\r\n */\r\nvar requestAnimationFrame$1 = (function () {\r\n    if (typeof requestAnimationFrame === 'function') {\r\n        // It's required to use a bounded function because IE sometimes throws\r\n        // an \"Invalid calling object\" error if rAF is invoked without the global\r\n        // object on the left hand side.\r\n        return requestAnimationFrame.bind(global$1);\r\n    }\r\n    return function (callback) { return setTimeout(function () { return callback(Date.now()); }, 1000 / 60); };\r\n})();\n\n// Defines minimum timeout before adding a trailing call.\r\nvar trailingTimeout = 2;\r\n/**\r\n * Creates a wrapper function which ensures that provided callback will be\r\n * invoked only once during the specified delay period.\r\n *\r\n * @param {Function} callback - Function to be invoked after the delay period.\r\n * @param {number} delay - Delay after which to invoke callback.\r\n * @returns {Function}\r\n */\r\nfunction throttle (callback, delay) {\r\n    var leadingCall = false, trailingCall = false, lastCallTime = 0;\r\n    /**\r\n     * Invokes the original callback function and schedules new invocation if\r\n     * the \"proxy\" was called during current request.\r\n     *\r\n     * @returns {void}\r\n     */\r\n    function resolvePending() {\r\n        if (leadingCall) {\r\n            leadingCall = false;\r\n            callback();\r\n        }\r\n        if (trailingCall) {\r\n            proxy();\r\n        }\r\n    }\r\n    /**\r\n     * Callback invoked after the specified delay. It will further postpone\r\n     * invocation of the original function delegating it to the\r\n     * requestAnimationFrame.\r\n     *\r\n     * @returns {void}\r\n     */\r\n    function timeoutCallback() {\r\n        requestAnimationFrame$1(resolvePending);\r\n    }\r\n    /**\r\n     * Schedules invocation of the original function.\r\n     *\r\n     * @returns {void}\r\n     */\r\n    function proxy() {\r\n        var timeStamp = Date.now();\r\n        if (leadingCall) {\r\n            // Reject immediately following calls.\r\n            if (timeStamp - lastCallTime < trailingTimeout) {\r\n                return;\r\n            }\r\n            // Schedule new call to be in invoked when the pending one is resolved.\r\n            // This is important for \"transitions\" which never actually start\r\n            // immediately so there is a chance that we might miss one if change\r\n            // happens amids the pending invocation.\r\n            trailingCall = true;\r\n        }\r\n        else {\r\n            leadingCall = true;\r\n            trailingCall = false;\r\n            setTimeout(timeoutCallback, delay);\r\n        }\r\n        lastCallTime = timeStamp;\r\n    }\r\n    return proxy;\r\n}\n\n// Minimum delay before invoking the update of observers.\r\nvar REFRESH_DELAY = 20;\r\n// A list of substrings of CSS properties used to find transition events that\r\n// might affect dimensions of observed elements.\r\nvar transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];\r\n// Check if MutationObserver is available.\r\nvar mutationObserverSupported = typeof MutationObserver !== 'undefined';\r\n/**\r\n * Singleton controller class which handles updates of ResizeObserver instances.\r\n */\r\nvar ResizeObserverController = /** @class */ (function () {\r\n    /**\r\n     * Creates a new instance of ResizeObserverController.\r\n     *\r\n     * @private\r\n     */\r\n    function ResizeObserverController() {\r\n        /**\r\n         * Indicates whether DOM listeners have been added.\r\n         *\r\n         * @private {boolean}\r\n         */\r\n        this.connected_ = false;\r\n        /**\r\n         * Tells that controller has subscribed for Mutation Events.\r\n         *\r\n         * @private {boolean}\r\n         */\r\n        this.mutationEventsAdded_ = false;\r\n        /**\r\n         * Keeps reference to the instance of MutationObserver.\r\n         *\r\n         * @private {MutationObserver}\r\n         */\r\n        this.mutationsObserver_ = null;\r\n        /**\r\n         * A list of connected observers.\r\n         *\r\n         * @private {Array<ResizeObserverSPI>}\r\n         */\r\n        this.observers_ = [];\r\n        this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);\r\n        this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);\r\n    }\r\n    /**\r\n     * Adds observer to observers list.\r\n     *\r\n     * @param {ResizeObserverSPI} observer - Observer to be added.\r\n     * @returns {void}\r\n     */\r\n    ResizeObserverController.prototype.addObserver = function (observer) {\r\n        if (!~this.observers_.indexOf(observer)) {\r\n            this.observers_.push(observer);\r\n        }\r\n        // Add listeners if they haven't been added yet.\r\n        if (!this.connected_) {\r\n            this.connect_();\r\n        }\r\n    };\r\n    /**\r\n     * Removes observer from observers list.\r\n     *\r\n     * @param {ResizeObserverSPI} observer - Observer to be removed.\r\n     * @returns {void}\r\n     */\r\n    ResizeObserverController.prototype.removeObserver = function (observer) {\r\n        var observers = this.observers_;\r\n        var index = observers.indexOf(observer);\r\n        // Remove observer if it's present in registry.\r\n        if (~index) {\r\n            observers.splice(index, 1);\r\n        }\r\n        // Remove listeners if controller has no connected observers.\r\n        if (!observers.length && this.connected_) {\r\n            this.disconnect_();\r\n        }\r\n    };\r\n    /**\r\n     * Invokes the update of observers. It will continue running updates insofar\r\n     * it detects changes.\r\n     *\r\n     * @returns {void}\r\n     */\r\n    ResizeObserverController.prototype.refresh = function () {\r\n        var changesDetected = this.updateObservers_();\r\n        // Continue running updates if changes have been detected as there might\r\n        // be future ones caused by CSS transitions.\r\n        if (changesDetected) {\r\n            this.refresh();\r\n        }\r\n    };\r\n    /**\r\n     * Updates every observer from observers list and notifies them of queued\r\n     * entries.\r\n     *\r\n     * @private\r\n     * @returns {boolean} Returns \"true\" if any observer has detected changes in\r\n     *      dimensions of it's elements.\r\n     */\r\n    ResizeObserverController.prototype.updateObservers_ = function () {\r\n        // Collect observers that have active observations.\r\n        var activeObservers = this.observers_.filter(function (observer) {\r\n            return observer.gatherActive(), observer.hasActive();\r\n        });\r\n        // Deliver notifications in a separate cycle in order to avoid any\r\n        // collisions between observers, e.g. when multiple instances of\r\n        // ResizeObserver are tracking the same element and the callback of one\r\n        // of them changes content dimensions of the observed target. Sometimes\r\n        // this may result in notifications being blocked for the rest of observers.\r\n        activeObservers.forEach(function (observer) { return observer.broadcastActive(); });\r\n        return activeObservers.length > 0;\r\n    };\r\n    /**\r\n     * Initializes DOM listeners.\r\n     *\r\n     * @private\r\n     * @returns {void}\r\n     */\r\n    ResizeObserverController.prototype.connect_ = function () {\r\n        // Do nothing if running in a non-browser environment or if listeners\r\n        // have been already added.\r\n        if (!isBrowser || this.connected_) {\r\n            return;\r\n        }\r\n        // Subscription to the \"Transitionend\" event is used as a workaround for\r\n        // delayed transitions. This way it's possible to capture at least the\r\n        // final state of an element.\r\n        document.addEventListener('transitionend', this.onTransitionEnd_);\r\n        window.addEventListener('resize', this.refresh);\r\n        if (mutationObserverSupported) {\r\n            this.mutationsObserver_ = new MutationObserver(this.refresh);\r\n            this.mutationsObserver_.observe(document, {\r\n                attributes: true,\r\n                childList: true,\r\n                characterData: true,\r\n                subtree: true\r\n            });\r\n        }\r\n        else {\r\n            document.addEventListener('DOMSubtreeModified', this.refresh);\r\n            this.mutationEventsAdded_ = true;\r\n        }\r\n        this.connected_ = true;\r\n    };\r\n    /**\r\n     * Removes DOM listeners.\r\n     *\r\n     * @private\r\n     * @returns {void}\r\n     */\r\n    ResizeObserverController.prototype.disconnect_ = function () {\r\n        // Do nothing if running in a non-browser environment or if listeners\r\n        // have been already removed.\r\n        if (!isBrowser || !this.connected_) {\r\n            return;\r\n        }\r\n        document.removeEventListener('transitionend', this.onTransitionEnd_);\r\n        window.removeEventListener('resize', this.refresh);\r\n        if (this.mutationsObserver_) {\r\n            this.mutationsObserver_.disconnect();\r\n        }\r\n        if (this.mutationEventsAdded_) {\r\n            document.removeEventListener('DOMSubtreeModified', this.refresh);\r\n        }\r\n        this.mutationsObserver_ = null;\r\n        this.mutationEventsAdded_ = false;\r\n        this.connected_ = false;\r\n    };\r\n    /**\r\n     * \"Transitionend\" event handler.\r\n     *\r\n     * @private\r\n     * @param {TransitionEvent} event\r\n     * @returns {void}\r\n     */\r\n    ResizeObserverController.prototype.onTransitionEnd_ = function (_a) {\r\n        var _b = _a.propertyName, propertyName = _b === void 0 ? '' : _b;\r\n        // Detect whether transition may affect dimensions of an element.\r\n        var isReflowProperty = transitionKeys.some(function (key) {\r\n            return !!~propertyName.indexOf(key);\r\n        });\r\n        if (isReflowProperty) {\r\n            this.refresh();\r\n        }\r\n    };\r\n    /**\r\n     * Returns instance of the ResizeObserverController.\r\n     *\r\n     * @returns {ResizeObserverController}\r\n     */\r\n    ResizeObserverController.getInstance = function () {\r\n        if (!this.instance_) {\r\n            this.instance_ = new ResizeObserverController();\r\n        }\r\n        return this.instance_;\r\n    };\r\n    /**\r\n     * Holds reference to the controller's instance.\r\n     *\r\n     * @private {ResizeObserverController}\r\n     */\r\n    ResizeObserverController.instance_ = null;\r\n    return ResizeObserverController;\r\n}());\n\n/**\r\n * Defines non-writable/enumerable properties of the provided target object.\r\n *\r\n * @param {Object} target - Object for which to define properties.\r\n * @param {Object} props - Properties to be defined.\r\n * @returns {Object} Target object.\r\n */\r\nvar defineConfigurable = (function (target, props) {\r\n    for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {\r\n        var key = _a[_i];\r\n        Object.defineProperty(target, key, {\r\n            value: props[key],\r\n            enumerable: false,\r\n            writable: false,\r\n            configurable: true\r\n        });\r\n    }\r\n    return target;\r\n});\n\n/**\r\n * Returns the global object associated with provided element.\r\n *\r\n * @param {Object} target\r\n * @returns {Object}\r\n */\r\nvar getWindowOf = (function (target) {\r\n    // Assume that the element is an instance of Node, which means that it\r\n    // has the \"ownerDocument\" property from which we can retrieve a\r\n    // corresponding global object.\r\n    var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;\r\n    // Return the local global object if it's not possible extract one from\r\n    // provided element.\r\n    return ownerGlobal || global$1;\r\n});\n\n// Placeholder of an empty content rectangle.\r\nvar emptyRect = createRectInit(0, 0, 0, 0);\r\n/**\r\n * Converts provided string to a number.\r\n *\r\n * @param {number|string} value\r\n * @returns {number}\r\n */\r\nfunction toFloat(value) {\r\n    return parseFloat(value) || 0;\r\n}\r\n/**\r\n * Extracts borders size from provided styles.\r\n *\r\n * @param {CSSStyleDeclaration} styles\r\n * @param {...string} positions - Borders positions (top, right, ...)\r\n * @returns {number}\r\n */\r\nfunction getBordersSize(styles) {\r\n    var positions = [];\r\n    for (var _i = 1; _i < arguments.length; _i++) {\r\n        positions[_i - 1] = arguments[_i];\r\n    }\r\n    return positions.reduce(function (size, position) {\r\n        var value = styles['border-' + position + '-width'];\r\n        return size + toFloat(value);\r\n    }, 0);\r\n}\r\n/**\r\n * Extracts paddings sizes from provided styles.\r\n *\r\n * @param {CSSStyleDeclaration} styles\r\n * @returns {Object} Paddings box.\r\n */\r\nfunction getPaddings(styles) {\r\n    var positions = ['top', 'right', 'bottom', 'left'];\r\n    var paddings = {};\r\n    for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {\r\n        var position = positions_1[_i];\r\n        var value = styles['padding-' + position];\r\n        paddings[position] = toFloat(value);\r\n    }\r\n    return paddings;\r\n}\r\n/**\r\n * Calculates content rectangle of provided SVG element.\r\n *\r\n * @param {SVGGraphicsElement} target - Element content rectangle of which needs\r\n *      to be calculated.\r\n * @returns {DOMRectInit}\r\n */\r\nfunction getSVGContentRect(target) {\r\n    var bbox = target.getBBox();\r\n    return createRectInit(0, 0, bbox.width, bbox.height);\r\n}\r\n/**\r\n * Calculates content rectangle of provided HTMLElement.\r\n *\r\n * @param {HTMLElement} target - Element for which to calculate the content rectangle.\r\n * @returns {DOMRectInit}\r\n */\r\nfunction getHTMLElementContentRect(target) {\r\n    // Client width & height properties can't be\r\n    // used exclusively as they provide rounded values.\r\n    var clientWidth = target.clientWidth, clientHeight = target.clientHeight;\r\n    // By this condition we can catch all non-replaced inline, hidden and\r\n    // detached elements. Though elements with width & height properties less\r\n    // than 0.5 will be discarded as well.\r\n    //\r\n    // Without it we would need to implement separate methods for each of\r\n    // those cases and it's not possible to perform a precise and performance\r\n    // effective test for hidden elements. E.g. even jQuery's ':visible' filter\r\n    // gives wrong results for elements with width & height less than 0.5.\r\n    if (!clientWidth && !clientHeight) {\r\n        return emptyRect;\r\n    }\r\n    var styles = getWindowOf(target).getComputedStyle(target);\r\n    var paddings = getPaddings(styles);\r\n    var horizPad = paddings.left + paddings.right;\r\n    var vertPad = paddings.top + paddings.bottom;\r\n    // Computed styles of width & height are being used because they are the\r\n    // only dimensions available to JS that contain non-rounded values. It could\r\n    // be possible to utilize the getBoundingClientRect if only it's data wasn't\r\n    // affected by CSS transformations let alone paddings, borders and scroll bars.\r\n    var width = toFloat(styles.width), height = toFloat(styles.height);\r\n    // Width & height include paddings and borders when the 'border-box' box\r\n    // model is applied (except for IE).\r\n    if (styles.boxSizing === 'border-box') {\r\n        // Following conditions are required to handle Internet Explorer which\r\n        // doesn't include paddings and borders to computed CSS dimensions.\r\n        //\r\n        // We can say that if CSS dimensions + paddings are equal to the \"client\"\r\n        // properties then it's either IE, and thus we don't need to subtract\r\n        // anything, or an element merely doesn't have paddings/borders styles.\r\n        if (Math.round(width + horizPad) !== clientWidth) {\r\n            width -= getBordersSize(styles, 'left', 'right') + horizPad;\r\n        }\r\n        if (Math.round(height + vertPad) !== clientHeight) {\r\n            height -= getBordersSize(styles, 'top', 'bottom') + vertPad;\r\n        }\r\n    }\r\n    // Following steps can't be applied to the document's root element as its\r\n    // client[Width/Height] properties represent viewport area of the window.\r\n    // Besides, it's as well not necessary as the <html> itself neither has\r\n    // rendered scroll bars nor it can be clipped.\r\n    if (!isDocumentElement(target)) {\r\n        // In some browsers (only in Firefox, actually) CSS width & height\r\n        // include scroll bars size which can be removed at this step as scroll\r\n        // bars are the only difference between rounded dimensions + paddings\r\n        // and \"client\" properties, though that is not always true in Chrome.\r\n        var vertScrollbar = Math.round(width + horizPad) - clientWidth;\r\n        var horizScrollbar = Math.round(height + vertPad) - clientHeight;\r\n        // Chrome has a rather weird rounding of \"client\" properties.\r\n        // E.g. for an element with content width of 314.2px it sometimes gives\r\n        // the client width of 315px and for the width of 314.7px it may give\r\n        // 314px. And it doesn't happen all the time. So just ignore this delta\r\n        // as a non-relevant.\r\n        if (Math.abs(vertScrollbar) !== 1) {\r\n            width -= vertScrollbar;\r\n        }\r\n        if (Math.abs(horizScrollbar) !== 1) {\r\n            height -= horizScrollbar;\r\n        }\r\n    }\r\n    return createRectInit(paddings.left, paddings.top, width, height);\r\n}\r\n/**\r\n * Checks whether provided element is an instance of the SVGGraphicsElement.\r\n *\r\n * @param {Element} target - Element to be checked.\r\n * @returns {boolean}\r\n */\r\nvar isSVGGraphicsElement = (function () {\r\n    // Some browsers, namely IE and Edge, don't have the SVGGraphicsElement\r\n    // interface.\r\n    if (typeof SVGGraphicsElement !== 'undefined') {\r\n        return function (target) { return target instanceof getWindowOf(target).SVGGraphicsElement; };\r\n    }\r\n    // If it's so, then check that element is at least an instance of the\r\n    // SVGElement and that it has the \"getBBox\" method.\r\n    // eslint-disable-next-line no-extra-parens\r\n    return function (target) { return (target instanceof getWindowOf(target).SVGElement &&\r\n        typeof target.getBBox === 'function'); };\r\n})();\r\n/**\r\n * Checks whether provided element is a document element (<html>).\r\n *\r\n * @param {Element} target - Element to be checked.\r\n * @returns {boolean}\r\n */\r\nfunction isDocumentElement(target) {\r\n    return target === getWindowOf(target).document.documentElement;\r\n}\r\n/**\r\n * Calculates an appropriate content rectangle for provided html or svg element.\r\n *\r\n * @param {Element} target - Element content rectangle of which needs to be calculated.\r\n * @returns {DOMRectInit}\r\n */\r\nfunction getContentRect(target) {\r\n    if (!isBrowser) {\r\n        return emptyRect;\r\n    }\r\n    if (isSVGGraphicsElement(target)) {\r\n        return getSVGContentRect(target);\r\n    }\r\n    return getHTMLElementContentRect(target);\r\n}\r\n/**\r\n * Creates rectangle with an interface of the DOMRectReadOnly.\r\n * Spec: https://drafts.fxtf.org/geometry/#domrectreadonly\r\n *\r\n * @param {DOMRectInit} rectInit - Object with rectangle's x/y coordinates and dimensions.\r\n * @returns {DOMRectReadOnly}\r\n */\r\nfunction createReadOnlyRect(_a) {\r\n    var x = _a.x, y = _a.y, width = _a.width, height = _a.height;\r\n    // If DOMRectReadOnly is available use it as a prototype for the rectangle.\r\n    var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;\r\n    var rect = Object.create(Constr.prototype);\r\n    // Rectangle's properties are not writable and non-enumerable.\r\n    defineConfigurable(rect, {\r\n        x: x, y: y, width: width, height: height,\r\n        top: y,\r\n        right: x + width,\r\n        bottom: height + y,\r\n        left: x\r\n    });\r\n    return rect;\r\n}\r\n/**\r\n * Creates DOMRectInit object based on the provided dimensions and the x/y coordinates.\r\n * Spec: https://drafts.fxtf.org/geometry/#dictdef-domrectinit\r\n *\r\n * @param {number} x - X coordinate.\r\n * @param {number} y - Y coordinate.\r\n * @param {number} width - Rectangle's width.\r\n * @param {number} height - Rectangle's height.\r\n * @returns {DOMRectInit}\r\n */\r\nfunction createRectInit(x, y, width, height) {\r\n    return { x: x, y: y, width: width, height: height };\r\n}\n\n/**\r\n * Class that is responsible for computations of the content rectangle of\r\n * provided DOM element and for keeping track of it's changes.\r\n */\r\nvar ResizeObservation = /** @class */ (function () {\r\n    /**\r\n     * Creates an instance of ResizeObservation.\r\n     *\r\n     * @param {Element} target - Element to be observed.\r\n     */\r\n    function ResizeObservation(target) {\r\n        /**\r\n         * Broadcasted width of content rectangle.\r\n         *\r\n         * @type {number}\r\n         */\r\n        this.broadcastWidth = 0;\r\n        /**\r\n         * Broadcasted height of content rectangle.\r\n         *\r\n         * @type {number}\r\n         */\r\n        this.broadcastHeight = 0;\r\n        /**\r\n         * Reference to the last observed content rectangle.\r\n         *\r\n         * @private {DOMRectInit}\r\n         */\r\n        this.contentRect_ = createRectInit(0, 0, 0, 0);\r\n        this.target = target;\r\n    }\r\n    /**\r\n     * Updates content rectangle and tells whether it's width or height properties\r\n     * have changed since the last broadcast.\r\n     *\r\n     * @returns {boolean}\r\n     */\r\n    ResizeObservation.prototype.isActive = function () {\r\n        var rect = getContentRect(this.target);\r\n        this.contentRect_ = rect;\r\n        return (rect.width !== this.broadcastWidth ||\r\n            rect.height !== this.broadcastHeight);\r\n    };\r\n    /**\r\n     * Updates 'broadcastWidth' and 'broadcastHeight' properties with a data\r\n     * from the corresponding properties of the last observed content rectangle.\r\n     *\r\n     * @returns {DOMRectInit} Last observed content rectangle.\r\n     */\r\n    ResizeObservation.prototype.broadcastRect = function () {\r\n        var rect = this.contentRect_;\r\n        this.broadcastWidth = rect.width;\r\n        this.broadcastHeight = rect.height;\r\n        return rect;\r\n    };\r\n    return ResizeObservation;\r\n}());\n\nvar ResizeObserverEntry = /** @class */ (function () {\r\n    /**\r\n     * Creates an instance of ResizeObserverEntry.\r\n     *\r\n     * @param {Element} target - Element that is being observed.\r\n     * @param {DOMRectInit} rectInit - Data of the element's content rectangle.\r\n     */\r\n    function ResizeObserverEntry(target, rectInit) {\r\n        var contentRect = createReadOnlyRect(rectInit);\r\n        // According to the specification following properties are not writable\r\n        // and are also not enumerable in the native implementation.\r\n        //\r\n        // Property accessors are not being used as they'd require to define a\r\n        // private WeakMap storage which may cause memory leaks in browsers that\r\n        // don't support this type of collections.\r\n        defineConfigurable(this, { target: target, contentRect: contentRect });\r\n    }\r\n    return ResizeObserverEntry;\r\n}());\n\nvar ResizeObserverSPI = /** @class */ (function () {\r\n    /**\r\n     * Creates a new instance of ResizeObserver.\r\n     *\r\n     * @param {ResizeObserverCallback} callback - Callback function that is invoked\r\n     *      when one of the observed elements changes it's content dimensions.\r\n     * @param {ResizeObserverController} controller - Controller instance which\r\n     *      is responsible for the updates of observer.\r\n     * @param {ResizeObserver} callbackCtx - Reference to the public\r\n     *      ResizeObserver instance which will be passed to callback function.\r\n     */\r\n    function ResizeObserverSPI(callback, controller, callbackCtx) {\r\n        /**\r\n         * Collection of resize observations that have detected changes in dimensions\r\n         * of elements.\r\n         *\r\n         * @private {Array<ResizeObservation>}\r\n         */\r\n        this.activeObservations_ = [];\r\n        /**\r\n         * Registry of the ResizeObservation instances.\r\n         *\r\n         * @private {Map<Element, ResizeObservation>}\r\n         */\r\n        this.observations_ = new MapShim();\r\n        if (typeof callback !== 'function') {\r\n            throw new TypeError('The callback provided as parameter 1 is not a function.');\r\n        }\r\n        this.callback_ = callback;\r\n        this.controller_ = controller;\r\n        this.callbackCtx_ = callbackCtx;\r\n    }\r\n    /**\r\n     * Starts observing provided element.\r\n     *\r\n     * @param {Element} target - Element to be observed.\r\n     * @returns {void}\r\n     */\r\n    ResizeObserverSPI.prototype.observe = function (target) {\r\n        if (!arguments.length) {\r\n            throw new TypeError('1 argument required, but only 0 present.');\r\n        }\r\n        // Do nothing if current environment doesn't have the Element interface.\r\n        if (typeof Element === 'undefined' || !(Element instanceof Object)) {\r\n            return;\r\n        }\r\n        if (!(target instanceof getWindowOf(target).Element)) {\r\n            throw new TypeError('parameter 1 is not of type \"Element\".');\r\n        }\r\n        var observations = this.observations_;\r\n        // Do nothing if element is already being observed.\r\n        if (observations.has(target)) {\r\n            return;\r\n        }\r\n        observations.set(target, new ResizeObservation(target));\r\n        this.controller_.addObserver(this);\r\n        // Force the update of observations.\r\n        this.controller_.refresh();\r\n    };\r\n    /**\r\n     * Stops observing provided element.\r\n     *\r\n     * @param {Element} target - Element to stop observing.\r\n     * @returns {void}\r\n     */\r\n    ResizeObserverSPI.prototype.unobserve = function (target) {\r\n        if (!arguments.length) {\r\n            throw new TypeError('1 argument required, but only 0 present.');\r\n        }\r\n        // Do nothing if current environment doesn't have the Element interface.\r\n        if (typeof Element === 'undefined' || !(Element instanceof Object)) {\r\n            return;\r\n        }\r\n        if (!(target instanceof getWindowOf(target).Element)) {\r\n            throw new TypeError('parameter 1 is not of type \"Element\".');\r\n        }\r\n        var observations = this.observations_;\r\n        // Do nothing if element is not being observed.\r\n        if (!observations.has(target)) {\r\n            return;\r\n        }\r\n        observations.delete(target);\r\n        if (!observations.size) {\r\n            this.controller_.removeObserver(this);\r\n        }\r\n    };\r\n    /**\r\n     * Stops observing all elements.\r\n     *\r\n     * @returns {void}\r\n     */\r\n    ResizeObserverSPI.prototype.disconnect = function () {\r\n        this.clearActive();\r\n        this.observations_.clear();\r\n        this.controller_.removeObserver(this);\r\n    };\r\n    /**\r\n     * Collects observation instances the associated element of which has changed\r\n     * it's content rectangle.\r\n     *\r\n     * @returns {void}\r\n     */\r\n    ResizeObserverSPI.prototype.gatherActive = function () {\r\n        var _this = this;\r\n        this.clearActive();\r\n        this.observations_.forEach(function (observation) {\r\n            if (observation.isActive()) {\r\n                _this.activeObservations_.push(observation);\r\n            }\r\n        });\r\n    };\r\n    /**\r\n     * Invokes initial callback function with a list of ResizeObserverEntry\r\n     * instances collected from active resize observations.\r\n     *\r\n     * @returns {void}\r\n     */\r\n    ResizeObserverSPI.prototype.broadcastActive = function () {\r\n        // Do nothing if observer doesn't have active observations.\r\n        if (!this.hasActive()) {\r\n            return;\r\n        }\r\n        var ctx = this.callbackCtx_;\r\n        // Create ResizeObserverEntry instance for every active observation.\r\n        var entries = this.activeObservations_.map(function (observation) {\r\n            return new ResizeObserverEntry(observation.target, observation.broadcastRect());\r\n        });\r\n        this.callback_.call(ctx, entries, ctx);\r\n        this.clearActive();\r\n    };\r\n    /**\r\n     * Clears the collection of active observations.\r\n     *\r\n     * @returns {void}\r\n     */\r\n    ResizeObserverSPI.prototype.clearActive = function () {\r\n        this.activeObservations_.splice(0);\r\n    };\r\n    /**\r\n     * Tells whether observer has active observations.\r\n     *\r\n     * @returns {boolean}\r\n     */\r\n    ResizeObserverSPI.prototype.hasActive = function () {\r\n        return this.activeObservations_.length > 0;\r\n    };\r\n    return ResizeObserverSPI;\r\n}());\n\n// Registry of internal observers. If WeakMap is not available use current shim\r\n// for the Map collection as it has all required methods and because WeakMap\r\n// can't be fully polyfilled anyway.\r\nvar observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();\r\n/**\r\n * ResizeObserver API. Encapsulates the ResizeObserver SPI implementation\r\n * exposing only those methods and properties that are defined in the spec.\r\n */\r\nvar ResizeObserver = /** @class */ (function () {\r\n    /**\r\n     * Creates a new instance of ResizeObserver.\r\n     *\r\n     * @param {ResizeObserverCallback} callback - Callback that is invoked when\r\n     *      dimensions of the observed elements change.\r\n     */\r\n    function ResizeObserver(callback) {\r\n        if (!(this instanceof ResizeObserver)) {\r\n            throw new TypeError('Cannot call a class as a function.');\r\n        }\r\n        if (!arguments.length) {\r\n            throw new TypeError('1 argument required, but only 0 present.');\r\n        }\r\n        var controller = ResizeObserverController.getInstance();\r\n        var observer = new ResizeObserverSPI(callback, controller, this);\r\n        observers.set(this, observer);\r\n    }\r\n    return ResizeObserver;\r\n}());\r\n// Expose public methods of ResizeObserver.\r\n[\r\n    'observe',\r\n    'unobserve',\r\n    'disconnect'\r\n].forEach(function (method) {\r\n    ResizeObserver.prototype[method] = function () {\r\n        var _a;\r\n        return (_a = observers.get(this))[method].apply(_a, arguments);\r\n    };\r\n});\n\nvar index = (function () {\r\n    // Export existing implementation if available.\r\n    if (typeof global$1.ResizeObserver !== 'undefined') {\r\n        return global$1.ResizeObserver;\r\n    }\r\n    return ResizeObserver;\r\n})();\n\nexport default index;\n"]}

package/dist/nano-components/p-6b9ed3c2.system.entry.js

@@ -1,2 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(r,n,e,a){function t(r){return r instanceof e?r:new e((function(n){n(r)}))}return new(e||(e=Promise))((function(e,o){function i(r){try{c(a.next(r))}catch(n){o(n)}}function s(r){try{c(a["throw"](r))}catch(n){o(n)}}function c(r){r.done?e(r.value):t(r.value).then(i,s)}c((a=a.apply(r,n||[])).next())}))};var __generator=this&&this.__generator||function(r,n){var e={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},a,t,o,i;return i={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function s(r){return function(n){return c([r,n])}}function c(i){if(a)throw new TypeError("Generator is already executing.");while(e)try{if(a=1,t&&(o=i[0]&2?t["return"]:i[0]?t["throw"]||((o=t["return"])&&o.call(t),0):t.next)&&!(o=o.call(t,i[1])).done)return o;if(t=0,o)i=[i[0]&2,o.value];switch(i[0]){case 0:case 1:o=i;break;case 4:e.label++;return{value:i[1],done:false};case 5:e.label++;t=i[1];i=[0];continue;case 7:i=e.ops.pop();e.trys.pop();continue;default:if(!(o=e.trys,o=o.length>0&&o[o.length-1])&&(i[0]===6||i[0]===2)){e=0;continue}if(i[0]===3&&(!o||i[1]>o[0]&&i[1]<o[3])){e.label=i[1];break}if(i[0]===6&&e.label<o[1]){e.label=o[1];o=i;break}if(o&&e.label<o[2]){e.label=o[2];e.ops.push(i);break}if(o[2])e.ops.pop();e.trys.pop();continue}i=n.call(r,e)}catch(s){i=[6,s];t=0}finally{a=o=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};System.register(["./p-3b21dfce.system.js","./p-89a5c54a.system.js","./p-a057ad2d.system.js","./p-22b50344.system.js"],(function(r,n){"use strict";var e,a,t,o,i,s,c,b,l;return{setters:[function(r){e=r.r;a=r.c;t=r.h;o=r.e;i=r.g},function(r){s=r.c;c=r.a},function(r){b=r.c},function(r){l=r.a}],execute:function(){var g='.sc-nano-range-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-range:export{screen:1000}.sc-nano-range-h{--knob-handle-size:(var(--knob-size) * 2);--rgb-inactive:165, 165, 165;--knob-border-radius:50%;--knob-background:var(--nano-color-primary, #0084a9);--knob-box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.3);--knob-size:30px;--bar-height:8px;--bar-background:#e2e1e0;--bar-background-active:#a5a5a5;--bar-border-radius:4px;--height:42px;--pin-background:var(--nano-color-primary, #0084a9);--pin-color:var(--nano-color-primary-contrast, #fff);--focus-style:0 0 0 5px var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}.range-wrap.sc-nano-range{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:3;-ms-flex:3;flex:3;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.range-wrap.sc-nano-range-s>ion-icon[slot],.range-wrap .sc-nano-range-s>ion-icon[slot]{font-size:1.5em}.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-left:0;margin-right:14px;margin-top:0;margin-bottom:0;font-size:0.9em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:14px;margin-inline-end:14px}}.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-left:14px;margin-right:0;margin-top:0;margin-bottom:0;font-size:0.9em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-left:unset;margin-right:unset;-webkit-margin-start:14px;margin-inline-start:14px;-webkit-margin-end:0;margin-inline-end:0}}.range-slider.sc-nano-range{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:-webkit-grab;cursor:grab;-ms-touch-action:pan-y;touch-action:pan-y}.range-pressed.sc-nano-range-h .range-slider.sc-nano-range{cursor:-webkit-grabbing;cursor:grabbing}.range-bar.sc-nano-range{border-radius:var(--bar-border-radius);left:0;top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-bar[dir=rtl].sc-nano-range{left:unset;right:unset;right:0}.range-snaps.sc-nano-range-h .range-bar.sc-nano-range{border-top-left-radius:var(--bar-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--bar-border-radius)}.range-snaps.sc-nano-range-h .range-bar[dir=rtl].sc-nano-range{border-top-left-radius:0;border-top-right-radius:var(--bar-border-radius);border-bottom-right-radius:var(--bar-border-radius);border-bottom-left-radius:0}.range-bar[dir=rtl].sc-nano-range{left:unset}.range-bar-active.sc-nano-range{bottom:0;width:auto;background:var(--bar-background-active)}.range-bar-active .range-pressed.sc-nano-range-h{will-change:left, right}.range-knob.sc-nano-range{border-radius:var(--knob-border-radius);left:calc(50% - var(--knob-size) / 2);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);-webkit-box-shadow:var(--knob-box-shadow);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none;-webkit-transform:scale(0.67);transform:scale(0.67);-webkit-transition-duration:120ms;transition-duration:120ms;-webkit-transition-property:background-color, border, -webkit-transform;transition-property:background-color, border, -webkit-transform;transition-property:transform, background-color, border;transition-property:transform, background-color, border, -webkit-transform;-webkit-transition-timing-function:ease;transition-timing-function:ease}.range-knob[dir=rtl].sc-nano-range{left:unset;right:unset;right:calc(50% - var(--knob-size) / 2)}.range-knob[dir=rtl].sc-nano-range{left:unset}.sc-nano-range-h:not(.range-has-pin) .range-knob-pressed.sc-nano-range .range-knob.sc-nano-range{-webkit-transform:scale(1);transform:scale(1)}.range-knob-handle.sc-nano-range{left:0;top:calc((var(--height) - var(--knob-handle-size)) / 2);margin-left:calc(0px - var(--knob-handle-size) / 2);position:absolute;width:calc(var(--knob-handle-size));height:calc(var(--knob-handle-size));text-align:center}.range-knob-handle[dir=rtl].sc-nano-range{left:unset;right:unset;right:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-knob-handle.sc-nano-range{margin-left:unset;-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2)}}.range-knob-handle[dir=rtl].sc-nano-range{left:unset}.range-knob-handle.sc-nano-range:active,.range-knob-handle.sc-nano-range:focus{outline:none}.range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{-webkit-box-shadow:var(--knob-box-shadow), var(--focus-style);box-shadow:var(--knob-box-shadow), var(--focus-style)}.range-tick.sc-nano-range{position:absolute;top:calc((var(--height) - var(--bar-height)) / 2);width:var(--bar-height);height:var(--bar-height);background:var(--bar-background-active);z-index:1;pointer-events:none}.range-tick.sc-nano-range:first-of-type{border-top-left-radius:var(--bar-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--bar-border-radius)}.range-tick.sc-nano-range:first-of-type[dir=rtl]{border-top-left-radius:0;border-top-right-radius:var(--bar-border-radius);border-bottom-right-radius:var(--bar-border-radius);border-bottom-left-radius:0}.range-tick.sc-nano-range:last-of-type{border-top-left-radius:0;border-top-right-radius:var(--bar-border-radius);border-bottom-right-radius:var(--bar-border-radius);border-bottom-left-radius:0}.range-tick.sc-nano-range:last-of-type[dir=rtl]{border-top-left-radius:var(--bar-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--bar-border-radius)}.range-tick-active.sc-nano-range{background:transparent}.range-pin.sc-nano-range{-webkit-transform:translate3d(0, 0, 0) scale(0.01);transform:translate3d(0, 0, 0) scale(0.01);-webkit-transform-origin:center top;transform-origin:center top;padding:0.66em 0;border-radius:50%;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;position:relative;min-width:2.33em;height:2.33em;-webkit-transition:background 120ms ease, -webkit-transform 120ms ease;transition:background 120ms ease, -webkit-transform 120ms ease;transition:transform 120ms ease, background 120ms ease;transition:transform 120ms ease, background 120ms ease, -webkit-transform 120ms ease;background:var(--pin-background);color:var(--pin-color);font-size:0.75em}.range-pin.sc-nano-range::before{left:50%;top:0.25em;margin-left:-1.08em;border-radius:50% 50% 50% 0;position:absolute;width:2.16em;height:2.16em;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:background 120ms ease;transition:background 120ms ease;background:var(--pin-background);content:"";z-index:-1}.range-pin.sc-nano-range::before[dir=rtl]{left:unset;right:unset;right:50%}.range-pin.sc-nano-range::before[dir=rtl]{left:unset}.range-knob-pressed.sc-nano-range .range-pin.sc-nano-range{-webkit-transform:translate3d(0, -50%, 0) scale(1);transform:translate3d(0, -50%, 0) scale(1);-webkit-transform:translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);transform:translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1)}.range-disabled.sc-nano-range-h{pointer-events:none}.range-disabled.sc-nano-range-h .range-bar-active.sc-nano-range,.range-disabled.sc-nano-range-h .range-bar.sc-nano-range,.range-disabled.sc-nano-range-h .range-tick.sc-nano-range{background-color:rgba(var(--rgb-inactive), 0.5)}.range-disabled.sc-nano-range-h .range-knob.sc-nano-range{-webkit-transform:scale(0.55);transform:scale(0.55);outline:5px solid #fff;background-color:rgba(var(--rgb-inactive), 0.5)}.nano-color.sc-nano-range-h .range-bar-active.sc-nano-range,.nano-color.sc-nano-range-h .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range::before,.nano-color.sc-nano-range-h .range-tick.sc-nano-range{background:var(--nano-color-base);color:var(--nano-color-contrast)}.nano-color.sc-nano-range-h .range-bar.sc-nano-range{background:rgba(var(--nano-color-base-rgb), 0.26)}.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{-webkit-box-shadow:var(--knob-box-shadow), 0 0 0 5px rgba(var(--nano-color-tint-rgb), 0.56);box-shadow:var(--knob-box-shadow), 0 0 0 5px rgba(var(--nano-color-tint-rgb), 0.56)}';var d=r("nano_range",function(){function r(r){var n=this;e(this,r);this.nanoChange=a(this,"nanoChange",7);this.nanoStyle=a(this,"nanoStyle",7);this.nanoFocus=a(this,"nanoFocus",7);this.nanoBlur=a(this,"nanoBlur",7);this.noUpdate=false;this.hasFocus=false;this.ratioA=0;this.ratioB=0;this.debounce=0;this.name="";this.dualKnobs=false;this.min=0;this.max=100;this.pin=false;this.snaps=false;this.step=1;this.ticks=false;this.disabled=false;this.value=0;this.clampBounds=function(r){return s(n.min,r,n.max)};this.ensureValueInBounds=function(r){if(n.dualKnobs){return{lower:n.clampBounds(r.lower),upper:n.clampBounds(r.upper)}}else{return n.clampBounds(r)}};this.handleKeyboard=function(r,e){var a=n.step;a=a>0?a:1;a=a/(n.max-n.min);if(!e){a*=-1}if(r==="A"){n.ratioA=s(0,n.ratioA+a,1)}else{n.ratioB=s(0,n.ratioB+a,1)}n.updateValue()};this.onBlur=function(){if(n.hasFocus){n.hasFocus=false;n.nanoBlur.emit();n.emitStyle()}};this.onFocus=function(){if(!n.hasFocus){n.hasFocus=true;n.nanoFocus.emit();n.emitStyle()}}}r.prototype.debounceChanged=function(){this.nanoChange=l(this.nanoChange,this.debounce)};r.prototype.minChanged=function(){if(!this.noUpdate){this.updateRatio()}};r.prototype.maxChanged=function(){if(!this.noUpdate){this.updateRatio()}};r.prototype.disabledChanged=function(){if(this.gesture){this.gesture.enable(!this.disabled)}this.emitStyle()};r.prototype.valueChanged=function(r){if(!this.noUpdate){this.updateRatio()}r=this.ensureValueInBounds(r);this.nanoChange.emit({value:r})};r.prototype.connectedCallback=function(){this.updateRatio();this.debounceChanged();this.disabledChanged()};r.prototype.disconnectedCallback=function(){if(this.gesture){this.gesture.destroy();this.gesture=undefined}};r.prototype.componentDidLoad=function(){return __awaiter(this,void 0,void 0,(function(){var r,e;var a=this;return __generator(this,(function(t){switch(t.label){case 0:r=this.rangeSlider;if(!r)return[3,2];e=this;return[4,n.import("./p-979116ca.system.js")];case 1:e.gesture=t.sent().createGesture({el:r,gestureName:"range",gesturePriority:100,threshold:0,onStart:function(r){return a.onStart(r)},onMove:function(r){return a.onMove(r)},onEnd:function(r){return a.onEnd(r)}});this.gesture.enable(!this.disabled);t.label=2;case 2:return[2]}}))}))};r.prototype.getValue=function(){var r=this.value||0;if(this.dualKnobs){if(typeof r==="object"){return r}return{lower:0,upper:r}}else{if(typeof r==="object"){return r.upper}return r}};r.prototype.emitStyle=function(){this.nanoStyle.emit({interactive:true,"interactive-disabled":this.disabled})};r.prototype.onStart=function(r){var n=this.rect=this.rangeSlider.getBoundingClientRect();var e=r.currentX;var a=s(0,(e-n.left)/n.width,1);if(document.dir==="rtl"){a=1-a}this.pressedKnob=!this.dualKnobs||Math.abs(this.ratioA-a)<Math.abs(this.ratioB-a)?"A":"B";this.setFocus(this.pressedKnob);this.update(e)};r.prototype.onMove=function(r){this.update(r.currentX)};r.prototype.onEnd=function(r){this.update(r.currentX);this.pressedKnob=undefined};r.prototype.update=function(r){var n=this.rect;var e=s(0,(r-n.left)/n.width,1);if(document.dir==="rtl"){e=1-e}if(this.snaps){e=p(h(e,this.min,this.max,this.step),this.min,this.max)}if(this.pressedKnob==="A"){this.ratioA=e}else{this.ratioB=e}this.updateValue()};Object.defineProperty(r.prototype,"valA",{get:function(){return h(this.ratioA,this.min,this.max,this.step)},enumerable:false,configurable:true});Object.defineProperty(r.prototype,"valB",{get:function(){return h(this.ratioB,this.min,this.max,this.step)},enumerable:false,configurable:true});Object.defineProperty(r.prototype,"ratioLower",{get:function(){if(this.dualKnobs){return Math.min(this.ratioA,this.ratioB)}return 0},enumerable:false,configurable:true});Object.defineProperty(r.prototype,"ratioUpper",{get:function(){if(this.dualKnobs){return Math.max(this.ratioA,this.ratioB)}return this.ratioA},enumerable:false,configurable:true});r.prototype.updateRatio=function(){var r=this.getValue();var n=this,e=n.min,a=n.max;if(this.dualKnobs){this.ratioA=p(r.lower,e,a);this.ratioB=p(r.upper,e,a)}else{this.ratioA=p(r,e,a)}};r.prototype.updateValue=function(){this.noUpdate=true;var r=this,n=r.valA,e=r.valB;this.value=!this.dualKnobs?n:{lower:Math.min(n,e),upper:Math.max(n,e)};this.noUpdate=false};r.prototype.setFocus=function(r){if(this.el.shadowRoot){var n=this.el.shadowRoot.querySelector(r==="A"?".range-knob-a":".range-knob-b");if(n){n.focus()}}};r.prototype.render=function(){var r;var n=this;var e=this,a=e.min,i=e.max,s=e.step,l=e.el,g=e.handleKeyboard,d=e.pressedKnob,h=e.disabled,f=e.pin,m=e.ratioLower,v=e.ratioUpper;var k=m*100+"%";var w=100-v*100+"%";var y=document;var x=y.dir==="rtl";var z=x?"right":"left";var B=x?"left":"right";var A=function(r){var n;return n={},n[z]=r[z],n};var C=(r={},r[z]=k,r[B]=w,r);var K=[];if(this.snaps&&this.ticks){for(var S=a;S<=i;S+=s){var F=p(S,a,i);var j={ratio:F,active:F>=m&&F<=v};j[z]=F*100+"%";K.push(j)}}c(true,l,this.name,JSON.stringify(this.getValue()),h);return t(o,{onFocusin:this.onFocus,onFocusout:this.onBlur,class:b(this.color,{"range-disabled":h,"range-pressed":d!==undefined,"range-has-pin":f,"range-snaps":this.snaps})},t("div",{class:"range-wrap"},t("slot",{name:"start"}),t("div",{class:"range-slider",ref:function(r){return n.rangeSlider=r}},K.map((function(r){return t("span",{style:A(r),role:"presentation",class:{"range-tick":true,"range-tick-active":r.active},part:r.active?"tick-active":"tick"})})),t("div",{class:"range-bar",role:"presentation",part:"bar"}),t("div",{class:"range-bar range-bar-active",role:"presentation",style:C,part:"bar-active"}),u(x,{knob:"A",pressed:d==="A",value:this.valA,ratio:this.ratioA,pin:f,disabled:h,handleKeyboard:g,min:a,max:i}),this.dualKnobs&&u(x,{knob:"B",pressed:d==="B",value:this.valB,ratio:this.ratioB,pin:f,disabled:h,handleKeyboard:g,min:a,max:i})),t("slot",{name:"end"})))};Object.defineProperty(r.prototype,"el",{get:function(){return i(this)},enumerable:false,configurable:true});Object.defineProperty(r,"watchers",{get:function(){return{debounce:["debounceChanged"],min:["minChanged"],max:["maxChanged"],disabled:["disabledChanged"],value:["valueChanged"]}},enumerable:false,configurable:true});return r}());var u=function(r,n){var e=n.knob,a=n.value,o=n.ratio,i=n.min,s=n.max,c=n.disabled,b=n.pressed,l=n.pin,g=n.handleKeyboard;var d=r?"right":"left";var u=function(){var r={};r[d]=o*100+"%";return r};return t("div",{onKeyDown:function(r){var n=r.key;if(n==="ArrowLeft"||n==="ArrowDown"){g(e,false);r.preventDefault();r.stopPropagation()}else if(n==="ArrowRight"||n==="ArrowUp"){g(e,true);r.preventDefault();r.stopPropagation()}},class:{"range-knob-handle":true,"range-knob-a":e==="A","range-knob-b":e==="B","range-knob-pressed":b,"range-knob-min":a===i,"range-knob-max":a===s},style:u(),role:"slider",tabindex:c?-1:0,"aria-valuemin":i,"aria-valuemax":s,"aria-disabled":c?"true":null,"aria-valuenow":a},l&&t("div",{class:"range-pin",role:"presentation",part:"pin"},Math.round(a)),t("div",{class:"range-knob",role:"presentation",part:"knob"}))};var h=function(r,n,e,a){var t=(e-n)*r;if(a>0){t=Math.round(t/a)*a+n}return s(n,t,e)};var p=function(r,n,e){return s(0,(r-n)/(e-n),1)};d.style=g}}}));
-//# sourceMappingURL=p-6b9ed3c2.system.entry.js.map

package/dist/nano-components/p-6b9ed3c2.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/range/range.scss?tag=nano-range&encapsulation=scoped","src/components/range/range.tsx"],"names":["rangeCss","Range","exports","class_1","hostRef","_this","this","noUpdate","hasFocus","ratioA","ratioB","debounce","name","dualKnobs","min","max","pin","snaps","step","ticks","disabled","value","clampBounds","clamp","ensureValueInBounds","lower","upper","handleKeyboard","knob","isIncrease","updateValue","onBlur","nanoBlur","emit","emitStyle","onFocus","nanoFocus","prototype","debounceChanged","nanoChange","debounceEvent","minChanged","updateRatio","maxChanged","disabledChanged","gesture","enable","valueChanged","connectedCallback","disconnectedCallback","destroy","undefined","componentDidLoad","rangeSlider","_a","module","import","_b","sent","createGesture","el","gestureName","gesturePriority","threshold","onStart","ev","onMove","onEnd","getValue","nanoStyle","interactive","interactive-disabled","detail","rect","getBoundingClientRect","currentX","ratio","left","width","document","dir","pressedKnob","Math","abs","setFocus","update","valueToRatio","ratioToValue","Object","defineProperty","valA","valB","shadowRoot","knobEl","querySelector","focus","render","ratioLower","ratioUpper","barStart","barEnd","doc","isRTL","start","end","tickStyle","tick","barStyle","active","push","renderHiddenInput","JSON","stringify","h","Host","onFocusin","onFocusout","class","createColorClasses","color","range-disabled","range-pressed","range-has-pin","range-snaps","ref","rangeEl","map","style","role","range-tick","range-tick-active","part","renderKnob","pressed","knobStyle","onKeyDown","key","preventDefault","stopPropagation","range-knob-handle","range-knob-a","range-knob-b","range-knob-pressed","range-knob-min","range-knob-max","tabindex","aria-valuemin","aria-valuemax","aria-disabled","aria-valuenow","round"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n// Range\n// --------------------------------------------------\n\n:host {\n  /**\n   * @prop --knob-handle-size: defaults to calc(var(--knob-size) * 2);\n   * @prop --rgb-inactive: defaults to #{color-to-rgb-list(#a5a5a5)};\n   * @prop --bar-background: Background of the range bar; Defaults to #e2e1e0;\n   * @prop --bar-background-active: Background of the active range bar; Defaults to #a5a5a5;\n   * @prop --bar-height: Height of the range bar; Defaults to 8px;\n   * @prop --bar-border-radius: Border radius of the range bar; Defaults to 4px;\n   * @prop --height: Height of the range. Defaults to 42px;\n   * @prop --knob-background: Background of the range knob. Defaults to #{nano-color(primary, base)};\n   * @prop --knob-border-radius: Border radius of the range knob. Defaults to 50%;\n   * @prop --knob-box-shadow: Box shadow of the range knob; Defaults to 0 2px 4px 0 rgba(0, 0, 0, 0.3);\n   * @prop --knob-size: Size of the range knob; Defaults to 30px;\n   * @prop --pin-background: Background of the range pin; Defaults to #{nano-color(primary, base)};\n   * @prop --pin-color: Color of the range pin; Defaults to #{nano-color(primary, contrast)};\n   * @prop --focus-style: Focus shadow around knob; Defaults to 0 0 0 5px #{$control-focus-color};\n   */\n  --knob-handle-size: (var(--knob-size) * 2);\n  --rgb-inactive: #{color-to-rgb-list(#a5a5a5)};\n  --knob-border-radius: 50%;\n  --knob-background: #{nano-color(primary, base)};\n  --knob-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);\n  --knob-size: 30px;\n  --bar-height: 8px;\n  --bar-background: #e2e1e0;\n  --bar-background-active: #a5a5a5;\n  --bar-border-radius: 4px;\n  --height: 42px;\n  --pin-background: #{nano-color(primary, base)};\n  --pin-color: #{nano-color(primary, contrast)};\n  --focus-style: 0 0 0 5px #{$control-focus-color};\n}\n\n.range-wrap {\n  display: flex;\n  position: relative;\n  flex: 3;\n  align-items: center;\n  user-select: none;\n\n  &::slotted(ion-icon[slot]),\n  ::slotted(ion-icon[slot]) {\n    font-size: 1.5em;\n  }\n\n  &::slotted([slot=\"start\"]),\n  ::slotted([slot=\"start\"]) {\n    @include margin(0, 14px, 0, 0);\n    font-size: .9em;\n  }\n\n  &::slotted([slot=\"end\"]),\n  ::slotted([slot=\"end\"]) {\n    @include margin(0, 0, 0, 14px);\n    font-size: .9em;\n  }\n}\n\n.range-slider {\n  position: relative;\n  flex: 1;\n  width: 100%;\n  height: var(--height);\n  contain: size layout style;\n  cursor: grab;\n  touch-action: pan-y;\n}\n\n:host(.range-pressed) .range-slider {\n  cursor: grabbing;\n}\n\n// bar\n\n.range-bar {\n  @include border-radius(var(--bar-border-radius));\n  @include position(calc((var(--height) - var(--bar-height)) / 2), null, null, 0);\n\n  :host(.range-snaps) & {\n    @include border-radius(var(--bar-border-radius), 0, 0, var(--bar-border-radius));\n  }\n\n  @include rtl() {\n    /* stylelint-disable-next-line property-blacklist */\n    left: unset;\n  }\n\n  position: absolute;\n  width: 100%;\n  height: var(--bar-height);\n  background: var(--bar-background);\n  pointer-events: none;\n}\n\n.range-bar-active {\n  bottom: 0;\n  width: auto;\n  background: var(--bar-background-active);\n\n  :host(.range-pressed) {\n    will-change: left, right;\n  }\n}\n\n// knob\n\n.range-knob {\n  @include border-radius(var(--knob-border-radius));\n  @include position(calc(50% - var(--knob-size) / 2),\n    null, null,\n    calc(50% - var(--knob-size) / 2));\n\n  @include rtl() {\n    /* stylelint-disable-next-line property-blacklist */\n    left: unset;\n  }\n\n  position: absolute;\n  width: var(--knob-size);\n  height: var(--knob-size);\n  background: var(--knob-background);\n  box-shadow: var(--knob-box-shadow);\n  z-index: 2;\n  pointer-events: none;\n  transform: scale(.67);\n  transition-duration: 120ms;\n  transition-property: transform,\n  background-color,\n  border;\n  transition-timing-function: ease;\n\n  :host(:not(.range-has-pin)) .range-knob-pressed & {\n    transform: scale(1);\n  }\n}\n\n.range-knob-handle {\n  @include position(calc((var(--height) - var(--knob-handle-size)) / 2),\n    null, null, 0);\n  @include margin-horizontal(calc(0px - var(--knob-handle-size) / 2),\n    null);\n\n  @include rtl() {\n    /* stylelint-disable-next-line property-blacklist */\n    left: unset;\n  }\n\n  position: absolute;\n  width: calc(var(--knob-handle-size));\n  height: calc(var(--knob-handle-size));\n  text-align: center;\n\n  &:active,\n  &:focus {\n    outline: none;\n\n    .range-knob {\n      box-shadow: var(--knob-box-shadow), var(--focus-style);\n    }\n  }\n}\n\n// ticks\n\n.range-tick {\n  position: absolute;\n  top: calc((var(--height) - var(--bar-height)) / 2);\n  width: var(--bar-height);\n  height: var(--bar-height);\n  background: var(--bar-background-active);\n  z-index: 1;\n  pointer-events: none;\n\n  &:first-of-type {\n    @include border-radius(var(--bar-border-radius), 0, 0, var(--bar-border-radius));\n  }\n\n  &:last-of-type {\n    @include border-radius(0, var(--bar-border-radius), var(--bar-border-radius), 0);\n  }\n\n  &-active {\n    background: transparent;\n  }\n}\n\n// pin\n\n.range-pin {\n  transform: translate3d(0, 0, 0) scale(.01);\n  transform-origin: center top;\n  padding: .66em 0;\n  border-radius: 50%;\n  text-align: center;\n  box-sizing: border-box;\n  display: inline-block;\n  position: relative;\n  min-width: 2.33em;\n  height: 2.33em;\n  transition: transform 120ms ease, background 120ms ease;\n  background: var(--pin-background);\n  color: var(--pin-color);\n  font-size: .75em;\n\n  &::before {\n    @include position(.25em, null, null, 50%);\n    margin-left: -1.08em;\n\n    @include multi-dir() {\n      /* stylelint-disable-next-line property-blacklist */\n      border-radius: 50% 50% 50% 0;\n    }\n\n    @include rtl() {\n      /* stylelint-disable-next-line property-blacklist */\n      left: unset;\n    }\n\n    position: absolute;\n    width: 2.16em;\n    height: 2.16em;\n    transform: rotate(-45deg);\n    transition: background 120ms ease;\n    background: var(--pin-background);\n    content: \"\";\n    z-index: -1;\n  }\n\n  .range-knob-pressed & {\n    transform: translate3d(0, -50%, 0) scale(1);\n    transform: translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);\n  }\n}\n\n// disabled\n\n:host(.range-disabled) {\n  pointer-events: none;\n\n  .range-bar-active,\n  .range-bar,\n  .range-tick {\n    background-color: rgba(var(--rgb-inactive), .5);\n  }\n\n  .range-knob {\n    transform: scale(.55);\n    outline: 5px solid #fff;\n    background-color: rgba(var(--rgb-inactive), .5);\n  }\n}\n\n// theme\n\n:host(.nano-color) {\n  .range-bar-active,\n  .range-knob,\n  .range-pin,\n  .range-pin::before,\n  .range-tick {\n    background: current-color(base);\n    color: current-color(contrast);\n  }\n\n  .range-bar {\n    background: current-color(base, 0.26);\n  }\n\n  .range-knob-handle {\n    &:active,\n    &:focus {\n\n      .range-knob {\n        box-shadow: var(--knob-box-shadow), 0 0 0 5px current-color(tint, 0.56);\n      }\n    }\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport {\n  Color,\n  Gesture,\n  GestureDetail,\n  KnobName,\n  RangeChangeEventDetail,\n  RangeValue,\n  StyleEventDetail,\n} from '../../interface';\nimport { clamp, debounceEvent, renderHiddenInput } from '../../utils/utils';\nimport { createColorClasses } from '../../utils/theme';\n\n/**\n * The Range slider lets users select from a range of values by moving\n * the slider knob. It can accept dual knobs, but by default one knob controls the value of the range.\n *\n * Labels can be placed on either side of the range by adding the\n * `slot=\"start\"` or `slot=\"end\"` to the element.\n *\n * @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.\n * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.\n */\n@Component({\n  tag: 'nano-range',\n  styleUrl: 'range.scss',\n  scoped: true,\n})\nexport class Range implements ComponentInterface {\n  private noUpdate = false;\n  private rect!: ClientRect;\n  private hasFocus = false;\n  private rangeSlider?: HTMLElement;\n  private gesture?: Gesture;\n\n  @Element() el!: HTMLNanoRangeElement;\n\n  @State() private ratioA = 0;\n  @State() private ratioB = 0;\n  @State() private pressedKnob: KnobName;\n\n  /**\n   * The color to use from your application's color palette.\n   * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`\n   */\n  @Prop() color?: Color;\n\n  /**\n   * How long, in milliseconds, to wait to trigger the\n   * `nanoChange` event after each change in the range value.\n   */\n  @Prop() debounce = 0;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoChange = debounceEvent(this.nanoChange, this.debounce);\n  }\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = '';\n\n  /**\n   * Show two knobs.\n   */\n  @Prop() dualKnobs = false;\n\n  /**\n   * Minimum integer value of the range.\n   */\n  @Prop() min = 0;\n  @Watch('min')\n  protected minChanged() {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n  }\n\n  /**\n   * Maximum integer value of the range.\n   */\n  @Prop() max = 100;\n  @Watch('max')\n  protected maxChanged() {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n  }\n\n  /**\n   * If `true`, a pin with integer value is shown when the knob\n   * is pressed.\n   */\n  @Prop() pin = false;\n\n  /**\n   * If `true`, the knob snaps to tick marks evenly spaced based\n   * on the step property value.\n   */\n  @Prop() snaps = false;\n\n  /**\n   * Specifies the value granularity.\n   */\n  @Prop() step = 1;\n\n  /**\n   * If `true`, tick marks are displayed based on the step value.\n   * Only applies when `snaps` is `true`.\n   */\n  @Prop() ticks = false;\n\n  /**\n   * If `true`, the user cannot interact with the range.\n   */\n  @Prop() disabled = false;\n  @Watch('disabled')\n  protected disabledChanged() {\n    if (this.gesture) {\n      this.gesture.enable(!this.disabled);\n    }\n    this.emitStyle();\n  }\n\n  /**\n   * the value of the range.\n   */\n  @Prop({ mutable: true }) value: RangeValue = 0;\n  @Watch('value')\n  protected valueChanged(value: RangeValue) {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n\n    value = this.ensureValueInBounds(value);\n\n    this.nanoChange.emit({ value });\n  }\n\n  private clampBounds = (value: any): number => {\n    return clamp(this.min, value, this.max);\n  };\n\n  private ensureValueInBounds = (value: any) => {\n    if (this.dualKnobs) {\n      return {\n        lower: this.clampBounds(value.lower),\n        upper: this.clampBounds(value.upper),\n      };\n    } else {\n      return this.clampBounds(value);\n    }\n  };\n\n  /**\n   * Emitted when the value property has changed.\n   */\n  @Event() nanoChange!: EventEmitter<RangeChangeEventDetail>;\n\n  /**\n   * Emitted when the styles change.\n   * @internal\n   */\n  @Event() nanoStyle!: EventEmitter<StyleEventDetail>;\n\n  /**\n   * Emitted when the range has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the range loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  connectedCallback() {\n    this.updateRatio();\n    this.debounceChanged();\n    this.disabledChanged();\n  }\n\n  disconnectedCallback() {\n    if (this.gesture) {\n      this.gesture.destroy();\n      this.gesture = undefined;\n    }\n  }\n\n  async componentDidLoad() {\n    const rangeSlider = this.rangeSlider;\n    if (rangeSlider) {\n      this.gesture = (await import('../../utils/gesture/index')).createGesture({\n        el: rangeSlider,\n        gestureName: 'range',\n        gesturePriority: 100,\n        threshold: 0,\n        onStart: (ev) => this.onStart(ev),\n        onMove: (ev) => this.onMove(ev),\n        onEnd: (ev) => this.onEnd(ev),\n      });\n      this.gesture.enable(!this.disabled);\n    }\n  }\n\n  private handleKeyboard = (knob: KnobName, isIncrease: boolean) => {\n    let step = this.step;\n    step = step > 0 ? step : 1;\n    step = step / (this.max - this.min);\n    if (!isIncrease) {\n      step *= -1;\n    }\n    if (knob === 'A') {\n      this.ratioA = clamp(0, this.ratioA + step, 1);\n    } else {\n      this.ratioB = clamp(0, this.ratioB + step, 1);\n    }\n    this.updateValue();\n  };\n\n  private getValue(): RangeValue {\n    const value = this.value || 0;\n    if (this.dualKnobs) {\n      if (typeof value === 'object') {\n        return value;\n      }\n      return {\n        lower: 0,\n        upper: value,\n      };\n    } else {\n      if (typeof value === 'object') {\n        return value.upper;\n      }\n      return value;\n    }\n  }\n\n  private emitStyle() {\n    this.nanoStyle.emit({\n      interactive: true,\n      'interactive-disabled': this.disabled,\n    });\n  }\n\n  private onStart(detail: GestureDetail) {\n    const rect = (this.rect = this.rangeSlider!.getBoundingClientRect() as any);\n    const currentX = detail.currentX;\n\n    // figure out which knob they started closer to\n    let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n    if (document.dir === 'rtl') {\n      ratio = 1 - ratio;\n    }\n\n    this.pressedKnob =\n      !this.dualKnobs ||\n      Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)\n        ? 'A'\n        : 'B';\n\n    this.setFocus(this.pressedKnob);\n\n    // update the active knob's position\n    this.update(currentX);\n  }\n\n  private onMove(detail: GestureDetail) {\n    this.update(detail.currentX);\n  }\n\n  private onEnd(detail: GestureDetail) {\n    this.update(detail.currentX);\n    this.pressedKnob = undefined;\n  }\n\n  private update(currentX: number) {\n    // figure out where the pointer is currently at\n    // update the knob being interacted with\n    const rect = this.rect;\n    let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n    if (document.dir === 'rtl') {\n      ratio = 1 - ratio;\n    }\n\n    if (this.snaps) {\n      // snaps the ratio to the current value\n      ratio = valueToRatio(\n        ratioToValue(ratio, this.min, this.max, this.step),\n        this.min,\n        this.max\n      );\n    }\n\n    // update which knob is pressed\n    if (this.pressedKnob === 'A') {\n      this.ratioA = ratio;\n    } else {\n      this.ratioB = ratio;\n    }\n\n    // Update input value\n    this.updateValue();\n  }\n\n  private get valA() {\n    return ratioToValue(this.ratioA, this.min, this.max, this.step);\n  }\n\n  private get valB() {\n    return ratioToValue(this.ratioB, this.min, this.max, this.step);\n  }\n\n  private get ratioLower() {\n    if (this.dualKnobs) {\n      return Math.min(this.ratioA, this.ratioB);\n    }\n    return 0;\n  }\n\n  private get ratioUpper() {\n    if (this.dualKnobs) {\n      return Math.max(this.ratioA, this.ratioB);\n    }\n    return this.ratioA;\n  }\n\n  private updateRatio() {\n    const value = this.getValue() as any;\n    const { min, max } = this;\n    if (this.dualKnobs) {\n      this.ratioA = valueToRatio(value.lower, min, max);\n      this.ratioB = valueToRatio(value.upper, min, max);\n    } else {\n      this.ratioA = valueToRatio(value, min, max);\n    }\n  }\n\n  private updateValue() {\n    this.noUpdate = true;\n\n    const { valA, valB } = this;\n    this.value = !this.dualKnobs\n      ? valA\n      : {\n          lower: Math.min(valA, valB),\n          upper: Math.max(valA, valB),\n        };\n\n    this.noUpdate = false;\n  }\n\n  private setFocus(knob: KnobName) {\n    if (this.el.shadowRoot) {\n      const knobEl = this.el.shadowRoot.querySelector(\n        knob === 'A' ? '.range-knob-a' : '.range-knob-b'\n      ) as HTMLElement | undefined;\n      if (knobEl) {\n        knobEl.focus();\n      }\n    }\n  }\n\n  private onBlur = () => {\n    if (this.hasFocus) {\n      this.hasFocus = false;\n      this.nanoBlur.emit();\n      this.emitStyle();\n    }\n  };\n\n  private onFocus = () => {\n    if (!this.hasFocus) {\n      this.hasFocus = true;\n      this.nanoFocus.emit();\n      this.emitStyle();\n    }\n  };\n\n  render() {\n    const {\n      min,\n      max,\n      step,\n      el,\n      handleKeyboard,\n      pressedKnob,\n      disabled,\n      pin,\n      ratioLower,\n      ratioUpper,\n    } = this;\n\n    const barStart = `${ratioLower * 100}%`;\n    const barEnd = `${100 - ratioUpper * 100}%`;\n\n    const doc = document;\n    const isRTL = doc.dir === 'rtl';\n    const start = isRTL ? 'right' : 'left';\n    const end = isRTL ? 'left' : 'right';\n\n    const tickStyle = (tick: any) => {\n      return {\n        [start]: tick[start],\n      };\n    };\n\n    const barStyle = {\n      [start]: barStart,\n      [end]: barEnd,\n    };\n\n    const ticks = [];\n    if (this.snaps && this.ticks) {\n      for (let value = min; value <= max; value += step) {\n        const ratio = valueToRatio(value, min, max);\n\n        const tick: any = {\n          ratio,\n          active: ratio >= ratioLower && ratio <= ratioUpper,\n        };\n\n        tick[start] = `${ratio * 100}%`;\n\n        ticks.push(tick);\n      }\n    }\n\n    renderHiddenInput(\n      true,\n      el,\n      this.name,\n      JSON.stringify(this.getValue()),\n      disabled\n    );\n\n    return (\n      <Host\n        onFocusin={this.onFocus}\n        onFocusout={this.onBlur}\n        class={createColorClasses(this.color, {\n          'range-disabled': disabled,\n          'range-pressed': pressedKnob !== undefined,\n          'range-has-pin': pin,\n          'range-snaps': this.snaps,\n        })}\n      >\n        <div class=\"range-wrap\">\n          <slot name=\"start\"></slot>\n          <div\n            class=\"range-slider\"\n            ref={(rangeEl) => (this.rangeSlider = rangeEl)}\n          >\n            {ticks.map((tick) => (\n              <span\n                style={tickStyle(tick)}\n                role=\"presentation\"\n                class={{\n                  'range-tick': true,\n                  'range-tick-active': tick.active,\n                }}\n                part={tick.active ? 'tick-active' : 'tick'}\n              />\n            ))}\n\n            <div class=\"range-bar\" role=\"presentation\" part=\"bar\" />\n            <div\n              class=\"range-bar range-bar-active\"\n              role=\"presentation\"\n              style={barStyle}\n              part=\"bar-active\"\n            />\n\n            {renderKnob(isRTL, {\n              knob: 'A',\n              pressed: pressedKnob === 'A',\n              value: this.valA,\n              ratio: this.ratioA,\n              pin,\n              disabled,\n              handleKeyboard,\n              min,\n              max,\n            })}\n\n            {this.dualKnobs &&\n              renderKnob(isRTL, {\n                knob: 'B',\n                pressed: pressedKnob === 'B',\n                value: this.valB,\n                ratio: this.ratioB,\n                pin,\n                disabled,\n                handleKeyboard,\n                min,\n                max,\n              })}\n          </div>\n          <slot name=\"end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\ninterface RangeKnob {\n  knob: KnobName;\n  value: number;\n  ratio: number;\n  min: number;\n  max: number;\n  disabled: boolean;\n  pressed: boolean;\n  pin: boolean;\n\n  handleKeyboard: (name: KnobName, isIncrease: boolean) => void;\n}\n\nconst renderKnob = (\n  isRTL: boolean,\n  {\n    knob,\n    value,\n    ratio,\n    min,\n    max,\n    disabled,\n    pressed,\n    pin,\n    handleKeyboard,\n  }: RangeKnob\n) => {\n  const start = isRTL ? 'right' : 'left';\n\n  const knobStyle = () => {\n    const style: any = {};\n    style[start] = `${ratio * 100}%`;\n    return style;\n  };\n\n  return (\n    <div\n      onKeyDown={(ev: KeyboardEvent) => {\n        const key = ev.key;\n        if (key === 'ArrowLeft' || key === 'ArrowDown') {\n          handleKeyboard(knob, false);\n          ev.preventDefault();\n          ev.stopPropagation();\n        } else if (key === 'ArrowRight' || key === 'ArrowUp') {\n          handleKeyboard(knob, true);\n          ev.preventDefault();\n          ev.stopPropagation();\n        }\n      }}\n      class={{\n        'range-knob-handle': true,\n        'range-knob-a': knob === 'A',\n        'range-knob-b': knob === 'B',\n        'range-knob-pressed': pressed,\n        'range-knob-min': value === min,\n        'range-knob-max': value === max,\n      }}\n      style={knobStyle()}\n      role=\"slider\"\n      tabindex={disabled ? -1 : 0}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-disabled={disabled ? 'true' : null}\n      aria-valuenow={value}\n    >\n      {pin && (\n        <div class=\"range-pin\" role=\"presentation\" part=\"pin\">\n          {Math.round(value)}\n        </div>\n      )}\n      <div class=\"range-knob\" role=\"presentation\" part=\"knob\" />\n    </div>\n  );\n};\n\nconst ratioToValue = (\n  ratio: number,\n  min: number,\n  max: number,\n  step: number\n): number => {\n  let value = (max - min) * ratio;\n  if (step > 0) {\n    value = Math.round(value / step) * step + min;\n  }\n  return clamp(min, value, max);\n};\n\nconst valueToRatio = (value: number, min: number, max: number): number => {\n  return clamp(0, (value - min) / (max - min), 1);\n};\n"]}

package/dist/nano-components/p-6e10a36a.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as a,h as o,e as i,g as r}from"./p-7a6bc3c5.js";import{i as n}from"./p-6a284815.js";import{s}from"./p-5af040f4.js";import{f as e}from"./p-c14d5f7d.js";import{d as b}from"./p-c930d4f5.js";import{C as d}from"./p-3cc4cb2a.js";import{a as l}from"./p-a0ddf496.js";import{c}from"./p-d3af43d2.js";import"./p-dfe5a97d.js";import"./p-0e826935.js";const h=class{constructor(o){t(this,o),this.nanoTabShow=a(this,"nanoTabShow",7),this.nanoTabHide=a(this,"nanoTabHide",7),this.initialTouchX=null,this.initialTouchY=null,this.hasScrollControls=!1,this.hideControlRight=!0,this.hideControlLeft=!0,this.isLegacy=!document.head.attachShadow,this.placement="top",this.noScrollControls=!1,this.storeMethod="session",this.updateScrollControls=()=>{this.hasScrollControls=!this.noScrollControls&&["top"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth&&this.nav.scrollWidth>this.tabs.clientWidth},this.handleClick=t=>{const a=t.target.closest("nano-tab");a&&this.setActiveTab(a)},this.handleKeyDown=t=>{if(["Enter"," "].includes(t.key)){const a=t.target.closest("nano-tab");a&&(this.setActiveTab(a),t.preventDefault())}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const a=document.activeElement;if(a&&"nano-tab"===a.tagName.toLowerCase()){const o=this.getAllTabs();let i=o.indexOf(a);"Home"===t.key?i=0:"End"===t.key?i=o.length-1:this.isRtl&&"ArrowRight"===t.key||!this.isRtl&&"ArrowLeft"===t.key?i=Math.max(0,i-1):(this.isRtl&&"ArrowLeft"===t.key||!this.isRtl&&"ArrowRight"===t.key)&&(i=Math.min(o.length-1,i+1)),o[i].setFocus(),["top"].includes(this.placement)&&s(o[i],this.nav,"horizontal","center"),t.preventDefault()}}},this.handleTabScroll=()=>{if(!this.hasScrollControls)return void(this.hideControlLeft=this.hideControlRight=!0);let t=this.isRtl?0===this.nav.scrollLeft:this.nav.scrollWidth-this.nav.scrollLeft===this.nav.clientWidth;(this.isRtl?this.nav.scrollWidth+this.nav.scrollLeft===this.nav.clientWidth:0===this.nav.scrollLeft)?(this.hideControlLeft=!0,this.hideControlRight=!1):t?(this.hideControlLeft=!1,this.hideControlRight=!0):(this.hideControlRight=!1,this.hideControlLeft=!1)},this.handleBtnClick=(t=!1)=>{const a=this.getNavWidth();let o;o=t?this.nav.scrollLeft+a-20:this.nav.scrollLeft-a+20;try{this.nav.scroll({left:o,behavior:"smooth"})}catch(i){this.nav.scrollLeft=o}},this.handleTouchStart=t=>{const a=t.changedTouches[0];this.initialTouchX=a.pageX,this.initialTouchY=a.pageY},this.handleTouchEnd=t=>{const a=t.changedTouches[0],o=a.pageX-this.initialTouchX,i=a.pageY-this.initialTouchY;var r=this.initialTouchX-a.clientX,n=this.initialTouchY-a.clientY;const s=Math.abs(o)>=70&&Math.abs(i)<=70,e=this.getAllTabs(),b=e.findIndex((t=>t.active));if(s){const t=o<0&&"top"===this.placement||o>0&&"top"!==this.placement?1:-1;e[b+t]&&(this.setActiveTab(e[b+t]),Math.abs(r)>Math.abs(n)&&this.activePanel.setAttribute("animation-dir",r>0?"left":"right"))}this.initialTouchX=null,this.initialTouchY=null}}handleTabNameChange(){if(this.activeTab&&this.activeTab.panel===this.tab)return;const t=this.getAllTabs().find((t=>t.panel===this.tab));this.setActiveTab(t)}handlePlacementChange(){this.syncActiveTabIndicator()}handleNoScrollControlsChange(){this.updateScrollControls()}hideRightBtn(){this.rightBtn&&b(this.rightBtn,"is-shown",!this.hideControlRight)}hideLeftBtn(){this.leftBtn&&b(this.leftBtn,"is-shown",!this.hideControlLeft)}watchScrollControls(){this.hasScrollControls?setTimeout((()=>this.handleTabScroll()),20):setTimeout((()=>{this.hideControlLeft=this.hideControlRight=!0}),20)}async show(t){if(this.activeTab&&this.activeTab.panel===t)return;const a=this.getAllTabs().find((a=>a.panel===t));a&&this.setActiveTab(a)}getAllTabs(t=!1){const a=Array.from(this.host.querySelectorAll("nano-tab"));return t?a:a.filter((t=>!t.disabled))}getAllPanels(){return Array.from(this.host.querySelectorAll("nano-tab-content"))}getActiveTab(){return this.getAllTabs().find((t=>t.active))}setActiveTab(t,a=!0){if(t&&t!==this.activeTab&&!t.disabled){const o=this.activeTab;this.activeTab=t,this.tab=t.panel,this.getAllTabs().map((t=>t.active=t===this.activeTab)),this.getAllPanels().map((t=>{t.name===this.activeTab.panel?(t.active=!0,this.activePanel=t):t.active=!1,t.removeAttribute("animation-dir")})),this.syncActiveTabIndicator(),["top"].includes(this.placement)&&s(this.activeTab,this.nav,"horizontal","center"),a&&(o&&this.nanoTabHide.emit({name:o.panel}),this.nanoTabShow.emit({name:this.activeTab.panel}))}}setAriaLabels(){const t=this.getAllTabs(),a=this.getAllPanels();t.map((t=>{const o=a.find((a=>a.name===t.panel));o&&(t.setAttribute("aria-controls",o.getAttribute("id")),o.setAttribute("aria-labelledby",t.getAttribute("id")))}))}syncActiveTabIndicator(){this.getAllTabs(!0).forEach((t=>t.setAttribute("direction","top"===this.placement?"horizontal":"vertical")));const t=this.getActiveTab(),a=t.clientWidth,o=t.clientHeight,i=l(t,this.nav),r=i.top+this.nav.scrollTop,n=i.left+this.nav.scrollLeft;switch(this.placement){case"top":this.activeTabIndicator.style.width=`${a}px`,this.activeTabIndicator.style.height=null,this.activeTabIndicator.style.transform=`translateX(${n}px)`;break;case"start":this.activeTabIndicator.style.width=null,this.activeTabIndicator.style.height=`${o}px`,this.activeTabIndicator.style.transform=`translateY(${r}px)`}}getNavWidth(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);return this.nav.clientWidth-(parseFloat(t.paddingLeft)+parseFloat(t.paddingRight))}componentDidLoad(){new IntersectionObserver(((t,a)=>{t[0].intersectionRatio>0&&(this.setAriaLabels(),this.setActiveTab(this.getActiveTab()||this.getAllTabs()[0],!1),this.storeId&&d.init(this,["tab"],this.storeMethod,this.storeId),a.unobserve(t[0].target))})).observe(this.host),e.observe(this.tabGroup),this.leftBtn&&(e.observe(this.leftBtn),e.observe(this.rightBtn)),this.resizeObserver=new n((()=>this.updateScrollControls())),this.resizeObserver.observe(this.nav),this.mutationObserver=new MutationObserver((t=>{t.some((t=>!["aria-labelledby","aria-controls"].includes(t.attributeName)))&&setTimeout((()=>this.setAriaLabels())),setTimeout((()=>this.handleTabScroll()),500)})),this.mutationObserver.observe(this.host,{attributes:!0,childList:!0,subtree:!0}),requestAnimationFrame((()=>this.updateScrollControls()))}connectedCallback(){this.isRtl="rtl"===this.host.dir||"rtl"===this.host.ownerDocument.dir}disconnectedCallback(){this.mutationObserver&&this.mutationObserver.disconnect(),e.unobserve(this.tabGroup),this.leftBtn&&(e.unobserve(this.leftBtn),e.unobserve(this.rightBtn)),this.resizeObserver&&this.resizeObserver.unobserve(this.nav)}render(){return this.isRtl="rtl"===this.host.ownerDocument.dir,o(i,{class:Object.assign(Object.assign({},c(this.color)),{legacy:this.isLegacy}),dir:this.isRtl?"rtl":null},o("div",{part:"base",ref:t=>this.tabGroup=t,class:{"nano-tab-group":!0,"nano-tab-group--top":"top"===this.placement,"nano-tab-group--start":"start"===this.placement,"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"},"top"===this.placement&&o("button",{class:{"nano-tab-group__scroll-button":!0,"nano-tab-group__scroll-button--left":!0},ref:t=>this.leftBtn=t,onClick:()=>this.handleBtnClick(!1)},o("nano-icon",{name:"light/chevron-left"})),o("div",{ref:t=>this.nav=t,key:"nav",part:"nav",class:"nano-tab-group__nav",onScroll:this.handleTabScroll},o("div",{ref:t=>this.tabs=t,part:"tabs",class:"nano-tab-group__tabs",role:"tablist"},o("div",{ref:t=>this.activeTabIndicator=t,part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),o("slot",{name:"tabs"}))),"top"===this.placement&&o("button",{class:{"nano-tab-group__scroll-button":!0,"nano-tab-group__scroll-button--right":!0},ref:t=>this.rightBtn=t,onClick:()=>this.handleBtnClick(!0)},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",null))))}get host(){return r(this)}static get watchers(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}}};h.style=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:export{screen:1000}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:5px;--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-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius);--tab-text-color:#0084a9;--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);--tab-indicator-size:var(--indicator-size);--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:#0084a9;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2696b6));--tab-text-color:rgba(var(--nano-color-base-rgb), .7)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #007090))}.nano-tab-group{display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:0;width:100%}.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;transition:var(--indicator-transition) transform 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;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}.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:0px;mask-position:0px;-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__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)}.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)}';export{h as nano_tab_group}
-//# sourceMappingURL=p-6e10a36a.entry.js.map