npm - @nanoporetech-digital/components - Versions diffs - 2.10.1 → 2.11.0 - Mend

@nanoporetech-digital/components 2.10.1 → 2.11.0

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

Files changed (333) hide show

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

	@@ -1 +1 @@
1	- {"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":["gridCss","STATEOPTS","CANSHADOW","document","head","attachShadow","Grid","hostRef","this","generalClasses","gridClass","isSizes","ready","isSmall","isMedium","isLarge","isXL","isXXL","sSize","mSize","lSize","xlSize","showHelper","contentPanel","fullHeight","stateChange","debounce","bind","prototype","propChanged","applySizeClasses","_this","size","currentWidth","push","sCols","active","mCols","lCols","xlCols","xxlCols","el","style","setProperty","slice","pop","applyChildrenClasses","setTimeout","nanoBpChange","emit","gridItems","querySelectorAll","length","forEach","gridItem","changeBP","stateArr","itemState","found","itemStates","classes","ctx","querySelector","map","call","children","gItem","hasAttribute","className","split","filter","c","startsWith","join","trim","getAttribute","stateOpt","reverse","find","state","indexOf","includes","shift","classList","add","componentWillLoad","wrapper","ele","contains","nodeName","createElement","setAttribute","removeAttribute","insertBefore","appendChild","componentDidLoad","ro","ResizeObserver","entries","_i","entries_1","entry","contentRect","width","observe","disconnectedCallback","disconnect","render","h","Host","class","_a","is-legacy","undefined","grid","gridItemCss","GridItem","class_1","currGridSizes","gridStates","updateGridClasses","newGridSizes","imgCss","Img","_srcSet","hasLoaded","imgStates","lazy","autoHeight","onLoad","nanoImgDidLoad","onError","nanoImgError","onResize","e","Object","detail","bp","srcOpts","keys","sort","src","_src","_srcChanged","addIO","srcChanged","srcSetChanged","srcSet","bpSrc","lazyChanged","load","window","IntersectionObserverEntry","removeIO","io","IntersectionObserver","data","isIntersecting","host","loadError","loadSrc","nanoImgWillLoad","connectedCallback","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\n display: block;\n opacity: 0;\n transition: 0.2s ease opacity;\n\n .grid {\n / autoprefixer: ignore next /\n display: grid;\n\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\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) -0.5);\n margin-top: calc(var(--grid-row-gap) * -0.5);\n margin-left: calc(var(--grid-col-gap) * -0.5);\n margin-right: calc(var(--grid-col-gap) * -0.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 background-image:\n 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 {\n Component,\n h,\n Prop,\n Element,\n Host,\n State,\n Watch,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { GridSizes } from '../../interface';\nimport { debounce } from '../../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 constructor() {\n this.stateChange = debounce(this.stateChange.bind(this), 100);\n }\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 /\n Emitted when the `nano-grid` changes breakpoint\n /\n @Event() nanoBpChange: EventEmitter<string[]>;\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 @Watch('isSmall')\n @Watch('isMedium')\n @Watch('isLarge')\n @Watch('isXL')\n @Watch('isXXL')\n stateChange() {\n this.nanoBpChange.emit(this.generalClasses);\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 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 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}\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 object-fit: cover;\n object-position: center;\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 object-fit: inherit;\n object-position: inherit;\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,\n.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,\n.img__bg {\n border-radius: inherit;\n display: block;\n opacity: 0;\n transition: 0.5s ease opacity, 0.3s ease filter 0.4s;\n filter: blur(5px);\n\n &.loaded {\n opacity: 1;\n filter: blur(0.1px);\n\n @media not all and (min-resolution: 0.001dpcm) {\n @supports (-webkit-appearance: none) {\n filter: blur(0);\n }\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 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!: HTMLNanoImgElement;\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"]}
1	+ {"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":["gridCss","STATEOPTS","CANSHADOW","document","head","attachShadow","Grid","hostRef","this","generalClasses","gridClass","isSizes","ready","isSmall","isMedium","isLarge","isXL","isXXL","sSize","mSize","lSize","xlSize","showHelper","contentPanel","fullHeight","stateChange","debounce","bind","prototype","propChanged","applySizeClasses","_this","size","currentWidth","push","sCols","active","mCols","lCols","xlCols","xxlCols","el","style","setProperty","slice","pop","applyChildrenClasses","setTimeout","nanoBpChange","emit","gridItems","querySelectorAll","length","forEach","gridItem","changeBP","stateArr","itemState","found","itemStates","classes","ctx","querySelector","map","call","children","gItem","hasAttribute","className","split","filter","c","startsWith","join","trim","getAttribute","stateOpt","reverse","find","state","indexOf","includes","shift","classList","add","componentWillLoad","wrapper","ele","contains","nodeName","createElement","setAttribute","removeAttribute","insertBefore","appendChild","componentDidLoad","ro","ResizeObserver","entries","_i","entries_1","entry","contentRect","width","observe","disconnectedCallback","disconnect","render","h","Host","class","_a","is-legacy","undefined","grid","gridItemCss","GridItem","class_1","currGridSizes","gridStates","updateGridClasses","newGridSizes","imgCss","Img","_srcSet","hasLoaded","imgStates","lazy","autoHeight","onLoad","nanoImgDidLoad","onError","nanoImgError","onResize","e","Object","detail","bp","srcOpts","keys","sort","src","_src","_srcChanged","addIO","srcChanged","srcSetChanged","srcSet","bpSrc","lazyChanged","load","window","IntersectionObserverEntry","removeIO","io","IntersectionObserver","data","isIntersecting","host","loadError","loadSrc","nanoImgWillLoad","connectedCallback","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\n display: block;\n opacity: 0;\n transition: 0.2s ease opacity;\n\n .grid {\n / autoprefixer: ignore next /\n display: grid;\n\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\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) -0.5);\n margin-top: calc(var(--grid-row-gap) * -0.5);\n margin-left: calc(var(--grid-col-gap) * -0.5);\n margin-right: calc(var(--grid-col-gap) * -0.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 background-image:\n 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 {\n Component,\n h,\n Prop,\n Element,\n Host,\n State,\n Watch,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { GridSizes } from '../../interface';\nimport { debounce } from '../../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 constructor() {\n this.stateChange = debounce(this.stateChange.bind(this), 100);\n }\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 /\n Emitted when the `nano-grid` changes breakpoint\n /\n @Event() nanoBpChange: EventEmitter<string[]>;\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 @Watch('isSmall')\n @Watch('isMedium')\n @Watch('isLarge')\n @Watch('isXL')\n @Watch('isXXL')\n stateChange() {\n this.nanoBpChange.emit(this.generalClasses);\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 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 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}\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 object-fit: cover;\n object-position: center;\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 object-fit: inherit;\n object-position: inherit;\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,\n.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,\n.img__bg {\n border-radius: inherit;\n display: block;\n opacity: 0;\n transition: 0.5s ease opacity, 0.3s ease filter 0.4s;\n filter: blur(5px);\n\n &.loaded {\n opacity: 1;\n filter: blur(0.1px);\n\n @media not all and (min-resolution: 0.001dpcm) {\n @supports (-webkit-appearance: none) {\n filter: blur(0);\n }\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 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!: HTMLNanoImgElement;\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/esm-es5/nano-icon-button.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
+var __awaiter=this&&this.__awaiter||function(n,o,t,e){function i(n){return n instanceof t?n:new t((function(o){o(n)}))}return new(t||(t=Promise))((function(t,r){function a(n){try{c(e.next(n))}catch(o){r(o)}}function s(n){try{c(e["throw"](n))}catch(o){r(o)}}function c(n){n.done?t(n.value):i(n.value).then(a,s)}c((e=e.apply(n,o||[])).next())}))};var __generator=this&&this.__generator||function(n,o){var t={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},e,i,r,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(n){return function(o){return c([n,o])}}function c(a){if(e)throw new TypeError("Generator is already executing.");while(t)try{if(e=1,i&&(r=a[0]&2?i["return"]:a[0]?i["throw"]||((r=i["return"])&&r.call(i),0):i.next)&&!(r=r.call(i,a[1])).done)return r;if(i=0,r)a=[a[0]&2,r.value];switch(a[0]){case 0:case 1:r=a;break;case 4:t.label++;return{value:a[1],done:false};case 5:t.label++;i=a[1];a=[0];continue;case 7:a=t.ops.pop();t.trys.pop();continue;default:if(!(r=t.trys,r=r.length>0&&r[r.length-1])&&(a[0]===6||a[0]===2)){t=0;continue}if(a[0]===3&&(!r||a[1]>r[0]&&a[1]<r[3])){t.label=a[1];break}if(a[0]===6&&t.label<r[1]){t.label=r[1];r=a;break}if(r&&t.label<r[2]){t.label=r[2];t.ops.push(a);break}if(r[2])t.ops.pop();t.trys.pop();continue}a=o.call(n,t)}catch(s){a=[6,s];i=0}finally{e=r=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};
 /*!
  * Web Components for Nanopore digital Web Apps
- */
-import{r as registerInstance,h}from"./index-c42becad.js";import{f as focusVisible}from"./focus-visible-8b2c14da.js";var iconButtonCss=".sc-nano-icon-button-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-icon-button,*.sc-nano-icon-button::before,*.sc-nano-icon-button::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-icon-button{display:none !important}.sc-nano-icon-button-h{display:inline-block;--border-radius:var(--nano-border-radius-medium, 4px);--active-color:#005c75;--hover-color:#007495;--nano-color-base:var(--color, #687576);--background:transparent;--padding:var(--nano-spacing-small, 8px)}.icon-button.sc-nano-icon-button{-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;border:none;border-radius:var(--border-radius);background:var(--background);font-size:inherit;color:var(--color);padding:var(--padding);cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;-webkit-transition:-webkit-box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;transition:-webkit-box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out, -webkit-box-shadow var(--nano-transition-fast, 0.1s) ease-in-out}.icon-button.sc-nano-icon-button:hover:not(.icon-button--disabled),.icon-button.sc-nano-icon-button:focus:not(.icon-button--disabled){color:var(--hover-color);--nano-color-base:var(--hover-color)}.icon-button.sc-nano-icon-button:active:not(.icon-button--disabled){color:var(--active-color);--nano-color-base:var(--active-color)}.icon-button.sc-nano-icon-button:focus{outline:none}.icon-button--disabled.sc-nano-icon-button{opacity:0.5;cursor:not-allowed;pointer-events:none}.focus-visible.icon-button.sc-nano-icon-button: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)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";var IconButton=function(){function o(o){registerInstance(this,o);this.type="button";this.disabled=false}o.prototype.componentDidLoad=function(){focusVisible.observe(this.button)};o.prototype.connectedCallback=function(){if(this.button)focusVisible.observe(this.button)};o.prototype.disconnectedCallback=function(){focusVisible.unobserve(this.button)};o.prototype.render=function(){var o=this;var n=this.href===undefined?"button":"a";return h(n,{part:"base",ref:function(n){return o.button=n},class:{"icon-button":true,"icon-button--disabled":this.disabled},"aria-label":this.label,name:this.name,value:this.value,href:this.href||undefined,target:this.href&&this.target?this.target:undefined,type:!this.href&&this.type?this.type:undefined},h("nano-icon",{name:this.iconName,src:this.iconSrc,"aria-hidden":"true"}))};return o}();IconButton.style=iconButtonCss;export{IconButton as nano_icon_button};
+ */import{r as registerInstance,h}from"./index-c42becad.js";import{f as focusVisible}from"./focus-visible-8b2c14da.js";var iconButtonCss=".sc-nano-icon-button-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-icon-button,*.sc-nano-icon-button::before,*.sc-nano-icon-button::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-icon-button{display:none !important}.sc-nano-icon-button-h{display:inline-block;--border-radius:var(--nano-border-radius-medium, 4px);--active-color:#005c75;--hover-color:#007495;--nano-color-base:var(--color, #687576);--background:transparent;--padding:var(--nano-spacing-small, 8px)}.icon-button.sc-nano-icon-button{-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;border:none;border-radius:var(--border-radius);background:var(--background);font-size:inherit;color:var(--color);padding:var(--padding);cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;-webkit-transition:-webkit-box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;transition:-webkit-box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out, -webkit-box-shadow var(--nano-transition-fast, 0.1s) ease-in-out}.icon-button.sc-nano-icon-button:hover:not(.icon-button--disabled),.icon-button.sc-nano-icon-button:focus:not(.icon-button--disabled){color:var(--hover-color);--nano-color-base:var(--hover-color)}.icon-button.sc-nano-icon-button:active:not(.icon-button--disabled){color:var(--active-color);--nano-color-base:var(--active-color)}.icon-button.sc-nano-icon-button:focus{outline:none}.icon-button--disabled.sc-nano-icon-button{opacity:0.5;cursor:not-allowed;pointer-events:none}.focus-visible.icon-button.sc-nano-icon-button: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)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";var IconButton=function(){function n(n){registerInstance(this,n);this.type="button";this.disabled=false}n.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){this.button.focus();return[2]}))}))};n.prototype.componentDidLoad=function(){focusVisible.observe(this.button)};n.prototype.connectedCallback=function(){if(this.button)focusVisible.observe(this.button)};n.prototype.disconnectedCallback=function(){focusVisible.unobserve(this.button)};n.prototype.render=function(){var n=this;var o=this.href===undefined?"button":"a";return h(o,{part:"base",ref:function(o){return n.button=o},class:{"icon-button":true,"icon-button--disabled":this.disabled},"aria-label":this.label,name:this.name,value:this.value,href:this.href||undefined,target:this.href&&this.target?this.target:undefined,type:!this.href&&this.type?this.type:undefined},h("nano-icon",{name:this.iconName,src:this.iconSrc,"aria-hidden":"true"}))};return n}();IconButton.style=iconButtonCss;export{IconButton as nano_icon_button};
 //# sourceMappingURL=nano-icon-button.entry.js.map

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

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

package/dist/esm-es5/nano-resize-observe_2.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 var __spreadArray=this&&this.__spreadArray||function(e,t){for(var r=0,i=t.length,n=e.length;r<i;r++,n++)e[n]=t[r];return e};
 /*!
  * Web Components for Nanopore digital Web Apps
- */import{r as registerInstance,c as createEvent,i as readTask,h,e as Host,g as getElement}from"./index-c42becad.js";import{i as index}from"./ResizeObserver.es-724af9fd.js";import{d as debounce}from"./throttle-d3d933cd.js";var ResizeObserve=function(){function e(e){var t=this;registerInstance(this,e);this.nanoResizeStateChange=createEvent(this,"nanoResizeStateChange",7);this.classNames=[];this.assessChanges=function(){if(!t.currentWidth&&!t.currentHeight)return;var e={h:new Map,w:new Map};var r=false;Object.keys(t.appliedStates).forEach((function(i){var n;if(i==="h")n=t.currentHeight;else n=t.currentWidth;t.appliedStates[i].forEach((function(t,s){if(n>=s&&t.applied===false){t.applied=true;e[i].set(s,t);r=true}else if(n<s&&t.applied===true){t.applied=false;e[i].set(s,t);r=true}}))}));if(r)t.applyChanges(e);else if(!t.classNames.includes("is-ready"))t.classNames=["is-ready"]}}e.prototype.dimensionChanged=function(){this.assessChanges()};e.prototype.statesChanged=function(){var e=this;if(!this.states)return;if(!this.ro)this.attachRO();var t=function(e){var t=e.split(/(\d+)/).filter((function(e){return e.length}));return{bp:parseInt(t[0]),dir:t[1]}};this.appliedStates={h:new Map,w:new Map};this.states.split(",").map((function(r){r=r.trim();if(r.includes(" ")){var i=r.split(" "),n=i[0],s=i.slice(1);var a=t(n),o=a.bp,c=a.dir;e.appliedStates[c].set(o,{states:s,applied:false})}else{var l=t(r),o=l.bp,c=l.dir;e.appliedStates[c].set(o,{applied:false})}}))};e.prototype.applyChanges=function(e){var t=__spreadArray([],this.classNames);Object.keys(e).forEach((function(r){e[r].forEach((function(e){if(!e.states)return;e.states.map((function(r){if(e.applied)t.push(r);else t=t.filter((function(e){return e!==r}))}))}))}));this.classNames=__spreadArray(["is-ready"],t);this.nanoResizeStateChange.emit(this.toSimpleObj(e))};e.prototype.toSimpleObj=function(e){var t={};Object.keys(e).forEach((function(r){e[r].forEach((function(e,i){t[i+r]=e.applied}))}));return t};e.prototype.attachRO=function(){var e=this;this.ro=new index((function(t){for(var r=0,i=t;r<i.length;r++){var n=i[r];e.currentWidth=n.contentRect.width;e.currentHeight=n.contentRect.height}}));this.ro.observe(this.host)};e.prototype.connectedCallback=function(){this.assessChanges=debounce(this.assessChanges,50)};e.prototype.componentDidLoad=function(){var e=this;if(!this.states)return;if(!this.currentWidth||!this.currentHeight){readTask((function(){var t=e.host.getBoundingClientRect(),r=t.width,i=t.height;e.currentWidth=r;e.currentHeight=i}))}this.statesChanged()};e.prototype.disconnectedCallback=function(){if(this.ro)this.ro.disconnect()};e.prototype.render=function(){var e;return h(Host,{class:(e={},e[this.classNames.join(" ")]=true,e)},h("slot",null))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{currentHeight:["dimensionChanged"],currentWidth:["dimensionChanged"],states:["statesChanged"]}},enumerable:false,configurable:true});return e}();ResizeObserve.style=":host { display: inline-block } div { height: 100%; }";var skeletonCss=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--base-color-rgb:var(--nano-skeleton-base-rgb, 228, 230, 232);--color:var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));--tint:var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));display:block;position:relative;border-radius:0.25rem;height:1em}.skeleton{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:100%;border-radius:inherit}.skeleton__indicator{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;background:var(--color);border-radius:inherit}.skeleton.animate .skeleton__indicator{background:-webkit-gradient(linear, right top, left top, from(var(--tint)), color-stop(var(--color)), color-stop(var(--color)), to(var(--tint)));background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;-webkit-animation:loader 6s ease-in-out infinite;animation:loader 6s ease-in-out infinite}@-webkit-keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}";var Skeleton=function(){function e(e){registerInstance(this,e);this.animated=true}e.prototype.render=function(){return h("div",{class:{skeleton:true,animate:this.animated}},h("div",{class:"skeleton__indicator"}))};return e}();Skeleton.style=skeletonCss;export{ResizeObserve as nano_resize_observe,Skeleton as nano_skeleton};
+ */import{r as registerInstance,c as createEvent,i as readTask,h,e as Host,g as getElement}from"./index-c42becad.js";import{d as debounce}from"./throttle-d3d933cd.js";var ResizeObserve=function(){function e(e){var t=this;registerInstance(this,e);this.nanoResizeStateChange=createEvent(this,"nanoResizeStateChange",7);this.classNames=[];this.assessChanges=function(){if(!t.currentWidth&&!t.currentHeight)return;var e={h:new Map,w:new Map};var r=false;Object.keys(t.appliedStates).forEach((function(i){var n;if(i==="h")n=t.currentHeight;else n=t.currentWidth;t.appliedStates[i].forEach((function(t,s){if(n>=s&&t.applied===false){t.applied=true;e[i].set(s,t);r=true}else if(n<s&&t.applied===true){t.applied=false;e[i].set(s,t);r=true}}))}));if(r)t.applyChanges(e);else if(!t.classNames.includes("is-ready"))t.classNames=["is-ready"]}}e.prototype.dimensionChanged=function(){this.assessChanges()};e.prototype.statesChanged=function(){var e=this;if(!this.states)return;if(!this.ro)this.attachRO();var t=function(e){var t=e.split(/(\d+)/).filter((function(e){return e.length}));return{bp:parseInt(t[0]),dir:t[1]}};this.appliedStates={h:new Map,w:new Map};this.states.split(",").map((function(r){r=r.trim();if(r.includes(" ")){var i=r.split(" "),n=i[0],s=i.slice(1);var a=t(n),o=a.bp,c=a.dir;e.appliedStates[c].set(o,{states:s,applied:false})}else{var l=t(r),o=l.bp,c=l.dir;e.appliedStates[c].set(o,{applied:false})}}))};e.prototype.applyChanges=function(e){var t=__spreadArray([],this.classNames);Object.keys(e).forEach((function(r){e[r].forEach((function(e){if(!e.states)return;e.states.map((function(r){if(e.applied)t.push(r);else t=t.filter((function(e){return e!==r}))}))}))}));this.classNames=__spreadArray(["is-ready"],t);this.nanoResizeStateChange.emit(this.toSimpleObj(e))};e.prototype.toSimpleObj=function(e){var t={};Object.keys(e).forEach((function(r){e[r].forEach((function(e,i){t[i+r]=e.applied}))}));return t};e.prototype.attachRO=function(){var e=this;this.ro=new ResizeObserver((function(t){for(var r=0,i=t;r<i.length;r++){var n=i[r];e.currentWidth=n.contentRect.width;e.currentHeight=n.contentRect.height}}));this.ro.observe(this.host)};e.prototype.connectedCallback=function(){this.assessChanges=debounce(this.assessChanges,50)};e.prototype.componentDidLoad=function(){var e=this;if(!this.states)return;if(!this.currentWidth||!this.currentHeight){readTask((function(){var t=e.host.getBoundingClientRect(),r=t.width,i=t.height;e.currentWidth=r;e.currentHeight=i}))}this.statesChanged()};e.prototype.disconnectedCallback=function(){if(this.ro)this.ro.disconnect()};e.prototype.render=function(){var e;return h(Host,{class:(e={},e[this.classNames.join(" ")]=true,e)},h("slot",null))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{currentHeight:["dimensionChanged"],currentWidth:["dimensionChanged"],states:["statesChanged"]}},enumerable:false,configurable:true});return e}();ResizeObserve.style=":host { display: inline-block } div { height: 100%; }";var skeletonCss=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--base-color-rgb:var(--nano-skeleton-base-rgb, 228, 230, 232);--color:var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));--tint:var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));display:block;position:relative;border-radius:0.25rem;height:1em}.skeleton{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:100%;border-radius:inherit}.skeleton__indicator{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;background:var(--color);border-radius:inherit}.skeleton.animate .skeleton__indicator{background:-webkit-gradient(linear, right top, left top, from(var(--tint)), color-stop(var(--color)), color-stop(var(--color)), to(var(--tint)));background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;-webkit-animation:loader 6s ease-in-out infinite;animation:loader 6s ease-in-out infinite}@-webkit-keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}";var Skeleton=function(){function e(e){registerInstance(this,e);this.animated=true}e.prototype.render=function(){return h("div",{class:{skeleton:true,animate:this.animated}},h("div",{class:"skeleton__indicator"}))};return e}();Skeleton.style=skeletonCss;export{ResizeObserve as nano_resize_observe,Skeleton as nano_skeleton};
 //# sourceMappingURL=nano-resize-observe_2.entry.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["src/components/resize-observe/resize-observe.tsx","src/components/skeleton/skeleton.scss?tag=nano-skeleton&encapsulation=shadow","src/components/skeleton/skeleton.tsx"],"names":["ResizeObserve","hostRef","_this","this","classNames","assessChanges","currentWidth","currentHeight","changedStates","h","Map","w","hasChanged","Object","keys","appliedStates","forEach","dimType","dim","state","bp","applied","set","applyChanges","includes","prototype","dimensionChanged","statesChanged","states","ro","attachRO","toBpDir","bpDir","bpDirSpl","split","filter","bs","length","parseInt","dir","map","st","trim","_a","key","classes","slice","_b","_c","changes","__spreadArray","push","cl","nanoResizeStateChange","emit","toSimpleObj","stateMaps","retObj","ResizeObserver","entries","_i","entries_1","entry","contentRect","width","height","observe","host","connectedCallback","debounce","componentDidLoad","readTask","getBoundingClientRect","disconnectedCallback","disconnect","render","Host","class","join","skeletonCss","Skeleton","animated","skeleton","animate"],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Host,\n State,\n Watch,\n ComponentInterface,\n Event,\n EventEmitter,\n readTask,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { debounce } from '../../utils';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n h: Map<number, ResizeObserverState>;\n w: Map<number, ResizeObserverState>;\n}\n\n/*\n A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * @slot - Main slot for any content.\n /\n@Component({\n tag: 'nano-resize-observe',\n shadow: true,\n styles: `:host { display: inline-block } div { height: 100%; }`,\n})\nexport class ResizeObserve implements ComponentInterface {\n private ro: ResizeObserver;\n private appliedStates: StateMaps;\n\n @Element() host: HTMLNanoResizeObserveElement;\n @State() currentWidth: number;\n @State() currentHeight: number;\n @State() classNames: string[] = [];\n\n /* string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n * Format: `states=\"800w, 300h class1 class2\"` /\n @Prop() states: string;\n\n /* A resize break point is switched on or off /\n @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n @Watch('currentHeight')\n @Watch('currentWidth')\n dimensionChanged() {\n this.assessChanges();\n }\n\n @Watch('states')\n statesChanged() {\n if (!this.states) return;\n if (!this.ro) this.attachRO();\n\n const toBpDir = (bpDir: string) => {\n const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n };\n this.appliedStates = { h: new Map(), w: new Map() };\n\n // parse state string\n this.states.split(',').map((st) => {\n st = st.trim();\n if (st.includes(' ')) {\n const [key, ...classes] = st.split(' ');\n const { bp, dir } = toBpDir(key);\n this.appliedStates[dir as keyof StateMaps].set(bp, {\n states: classes,\n applied: false,\n });\n } else {\n const { bp, dir } = toBpDir(st);\n this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n }\n });\n }\n\n private assessChanges = () => {\n if (!this.currentWidth && !this.currentHeight) return;\n const changedStates: StateMaps = { h: new Map(), w: new Map() };\n let hasChanged = false;\n\n Object.keys(this.appliedStates).forEach((dimType) => {\n let dim: number;\n if (dimType === 'h') dim = this.currentHeight;\n else dim = this.currentWidth;\n\n this.appliedStates[dimType].forEach(\n (state: ResizeObserverState, bp: number) => {\n if (dim >= bp && state.applied === false) {\n state.applied = true;\n changedStates[dimType].set(bp, state);\n hasChanged = true;\n } else if (dim < bp && state.applied === true) {\n state.applied = false;\n changedStates[dimType].set(bp, state);\n hasChanged = true;\n }\n }\n );\n });\n if (hasChanged) this.applyChanges(changedStates);\n else if (!this.classNames.includes('is-ready'))\n this.classNames = ['is-ready'];\n };\n\n private applyChanges(changes: StateMaps) {\n let classNames = [...this.classNames];\n Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n changes[dimType].forEach((state) => {\n if (!state.states) return;\n state.states.map((st) => {\n if (state.applied) classNames.push(st);\n else classNames = classNames.filter((cl) => cl !== st);\n });\n });\n });\n this.classNames = ['is-ready', ...classNames];\n this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n }\n\n private toSimpleObj(stateMaps: StateMaps) {\n const retObj = {};\n Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n retObj[bp + dimType] = state.applied;\n });\n });\n return retObj;\n }\n\n private attachRO() {\n this.ro = new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.currentWidth = entry.contentRect.width;\n this.currentHeight = entry.contentRect.height;\n }\n });\n this.ro.observe(this.host);\n }\n\n connectedCallback() {\n this.assessChanges = debounce(this.assessChanges, 50);\n }\n\n componentDidLoad() {\n if (!this.states) return;\n if (!this.currentWidth \|\| !this.currentHeight) {\n readTask(() => {\n const { width, height } = this.host.getBoundingClientRect();\n this.currentWidth = width;\n this.currentHeight = height;\n });\n }\n this.statesChanged();\n }\n\n disconnectedCallback() {\n if (this.ro) this.ro.disconnect();\n }\n\n render() {\n return (\n <Host\n class={{\n [this.classNames.join(' ')]: true,\n }}\n >\n <slot />\n </Host>\n );\n }\n}\n","@import '../../global/style/nano-theme/components';\n\n:host {\n /\n @prop --base-color-rgb: default #{$skeleton-color-rgb};\n * @prop --color: default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n * @prop --tint: default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));\n /\n\n --base-color-rgb: #{$skeleton-color-rgb};\n --color: var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n --tint: var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));\n\n display: block;\n position: relative;\n border-radius: 0.25rem;\n height: 1em;\n}\n\n.skeleton {\n display: flex;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n}\n\n.skeleton__indicator {\n flex: 1 1 auto;\n background: var(--color);\n border-radius: inherit;\n}\n\n.skeleton.animate .skeleton__indicator {\n background:\n linear-gradient(\n 270deg,\n var(--tint),\n var(--color),\n var(--color),\n var(--tint)\n );\n background-size: 400% 100%;\n animation: loader 6s ease-in-out infinite;\n}\n\n@keyframes loader {\n 0% {\n background-position: 200% 0;\n }\n\n to {\n background-position: -200% 0;\n }\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\n\n/\n Skeletons are used to show where content will eventually be drawn.\n * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.\n * Prevents large areas of empty space during asynchronous operations.\n /\n@Component({\n tag: 'nano-skeleton',\n styleUrl: 'skeleton.scss',\n shadow: true,\n})\nexport class Skeleton implements ComponentInterface {\n /* When `true`, the skeleton will animate. */\n @Prop() animated = true;\n\n render() {\n return (\n <div\n class={{\n skeleton: true,\n animate: this.animated,\n }}\n >\n <div class=\"skeleton__indicator\" />\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"sources":["src/components/resize-observe/resize-observe.tsx","src/components/skeleton/skeleton.scss?tag=nano-skeleton&encapsulation=shadow","src/components/skeleton/skeleton.tsx"],"names":["ResizeObserve","hostRef","_this","this","classNames","assessChanges","currentWidth","currentHeight","changedStates","h","Map","w","hasChanged","Object","keys","appliedStates","forEach","dimType","dim","state","bp","applied","set","applyChanges","includes","prototype","dimensionChanged","statesChanged","states","ro","attachRO","toBpDir","bpDir","bpDirSpl","split","filter","bs","length","parseInt","dir","map","st","trim","_a","key","classes","slice","_b","_c","changes","__spreadArray","push","cl","nanoResizeStateChange","emit","toSimpleObj","stateMaps","retObj","ResizeObserver","entries","_i","entries_1","entry","contentRect","width","height","observe","host","connectedCallback","debounce","componentDidLoad","readTask","getBoundingClientRect","disconnectedCallback","disconnect","render","Host","class","join","skeletonCss","Skeleton","animated","skeleton","animate"],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Host,\n State,\n Watch,\n ComponentInterface,\n Event,\n EventEmitter,\n readTask,\n} from '@stencil/core';\nimport { debounce } from '../../utils';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n h: Map<number, ResizeObserverState>;\n w: Map<number, ResizeObserverState>;\n}\n\n/*\n A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * @slot - Main slot for any content.\n /\n@Component({\n tag: 'nano-resize-observe',\n shadow: true,\n styles: `:host { display: inline-block } div { height: 100%; }`,\n})\nexport class ResizeObserve implements ComponentInterface {\n private ro: ResizeObserver;\n private appliedStates: StateMaps;\n\n @Element() host: HTMLNanoResizeObserveElement;\n @State() currentWidth: number;\n @State() currentHeight: number;\n @State() classNames: string[] = [];\n\n /* string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n * Format: `states=\"800w, 300h class1 class2\"` /\n @Prop() states: string;\n\n /* A resize break point is switched on or off /\n @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n @Watch('currentHeight')\n @Watch('currentWidth')\n dimensionChanged() {\n this.assessChanges();\n }\n\n @Watch('states')\n statesChanged() {\n if (!this.states) return;\n if (!this.ro) this.attachRO();\n\n const toBpDir = (bpDir: string) => {\n const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n };\n this.appliedStates = { h: new Map(), w: new Map() };\n\n // parse state string\n this.states.split(',').map((st) => {\n st = st.trim();\n if (st.includes(' ')) {\n const [key, ...classes] = st.split(' ');\n const { bp, dir } = toBpDir(key);\n this.appliedStates[dir as keyof StateMaps].set(bp, {\n states: classes,\n applied: false,\n });\n } else {\n const { bp, dir } = toBpDir(st);\n this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n }\n });\n }\n\n private assessChanges = () => {\n if (!this.currentWidth && !this.currentHeight) return;\n const changedStates: StateMaps = { h: new Map(), w: new Map() };\n let hasChanged = false;\n\n Object.keys(this.appliedStates).forEach((dimType) => {\n let dim: number;\n if (dimType === 'h') dim = this.currentHeight;\n else dim = this.currentWidth;\n\n this.appliedStates[dimType].forEach(\n (state: ResizeObserverState, bp: number) => {\n if (dim >= bp && state.applied === false) {\n state.applied = true;\n changedStates[dimType].set(bp, state);\n hasChanged = true;\n } else if (dim < bp && state.applied === true) {\n state.applied = false;\n changedStates[dimType].set(bp, state);\n hasChanged = true;\n }\n }\n );\n });\n if (hasChanged) this.applyChanges(changedStates);\n else if (!this.classNames.includes('is-ready'))\n this.classNames = ['is-ready'];\n };\n\n private applyChanges(changes: StateMaps) {\n let classNames = [...this.classNames];\n Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n changes[dimType].forEach((state) => {\n if (!state.states) return;\n state.states.map((st) => {\n if (state.applied) classNames.push(st);\n else classNames = classNames.filter((cl) => cl !== st);\n });\n });\n });\n this.classNames = ['is-ready', ...classNames];\n this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n }\n\n private toSimpleObj(stateMaps: StateMaps) {\n const retObj = {};\n Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n retObj[bp + dimType] = state.applied;\n });\n });\n return retObj;\n }\n\n private attachRO() {\n this.ro = new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.currentWidth = entry.contentRect.width;\n this.currentHeight = entry.contentRect.height;\n }\n });\n this.ro.observe(this.host);\n }\n\n connectedCallback() {\n this.assessChanges = debounce(this.assessChanges, 50);\n }\n\n componentDidLoad() {\n if (!this.states) return;\n if (!this.currentWidth \|\| !this.currentHeight) {\n readTask(() => {\n const { width, height } = this.host.getBoundingClientRect();\n this.currentWidth = width;\n this.currentHeight = height;\n });\n }\n this.statesChanged();\n }\n\n disconnectedCallback() {\n if (this.ro) this.ro.disconnect();\n }\n\n render() {\n return (\n <Host\n class={{\n [this.classNames.join(' ')]: true,\n }}\n >\n <slot />\n </Host>\n );\n }\n}\n","@import '../../global/style/nano-theme/components';\n\n:host {\n /\n @prop --base-color-rgb: default #{$skeleton-color-rgb};\n * @prop --color: default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n * @prop --tint: default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));\n /\n\n --base-color-rgb: #{$skeleton-color-rgb};\n --color: var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n --tint: var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));\n\n display: block;\n position: relative;\n border-radius: 0.25rem;\n height: 1em;\n}\n\n.skeleton {\n display: flex;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n}\n\n.skeleton__indicator {\n flex: 1 1 auto;\n background: var(--color);\n border-radius: inherit;\n}\n\n.skeleton.animate .skeleton__indicator {\n background:\n linear-gradient(\n 270deg,\n var(--tint),\n var(--color),\n var(--color),\n var(--tint)\n );\n background-size: 400% 100%;\n animation: loader 6s ease-in-out infinite;\n}\n\n@keyframes loader {\n 0% {\n background-position: 200% 0;\n }\n\n to {\n background-position: -200% 0;\n }\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\n\n/\n Skeletons are used to show where content will eventually be drawn.\n * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.\n * Prevents large areas of empty space during asynchronous operations.\n /\n@Component({\n tag: 'nano-skeleton',\n styleUrl: 'skeleton.scss',\n shadow: true,\n})\nexport class Skeleton implements ComponentInterface {\n /* When `true`, the skeleton will animate. */\n @Prop() animated = true;\n\n render() {\n return (\n <div\n class={{\n skeleton: true,\n animate: this.animated,\n }}\n >\n <div class=\"skeleton__indicator\" />\n </div>\n );\n }\n}\n"]}

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

@@ -1,7 +1,7 @@
 var __awaiter=this&&this.__awaiter||function(t,e,i,n){function s(t){return t instanceof i?t:new i((function(e){e(t)}))}return new(i||(i=Promise))((function(i,r){function o(t){try{l(n.next(t))}catch(e){r(e)}}function a(t){try{l(n["throw"](t))}catch(e){r(e)}}function l(t){t.done?i(t.value):s(t.value).then(o,a)}l((n=n.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},n,s,r,o;return o={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function a(t){return function(e){return l([t,e])}}function l(o){if(n)throw new TypeError("Generator is already executing.");while(i)try{if(n=1,s&&(r=o[0]&2?s["return"]:o[0]?s["throw"]||((r=s["return"])&&r.call(s),0):s.next)&&!(r=r.call(s,o[1])).done)return r;if(s=0,r)o=[o[0]&2,r.value];switch(o[0]){case 0:case 1:r=o;break;case 4:i.label++;return{value:o[1],done:false};case 5:i.label++;s=o[1];o=[0];continue;case 7:o=i.ops.pop();i.trys.pop();continue;default:if(!(r=i.trys,r=r.length>0&&r[r.length-1])&&(o[0]===6||o[0]===2)){i=0;continue}if(o[0]===3&&(!r||o[1]>r[0]&&o[1]<r[3])){i.label=o[1];break}if(o[0]===6&&i.label<r[1]){i.label=r[1];r=o;break}if(r&&i.label<r[2]){i.label=r[2];i.ops.push(o);break}if(r[2])i.ops.pop();i.trys.pop();continue}o=e.call(t,i)}catch(a){o=[6,a];s=0}finally{n=r=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};
 /*!
  * Web Components for Nanopore digital Web Apps
- */import{r as registerInstance,c as createEvent,h,e as Host,g as getElement}from"./index-c42becad.js";import{i as index}from"./ResizeObserver.es-724af9fd.js";import{c as createCommonjsModule,a as commonjsGlobal}from"./_commonjsHelpers-e401b2a2.js";var evEmitter=createCommonjsModule((function(t){(function(e,i){if(t.exports){t.exports=i()}else{e.EvEmitter=i()}})(typeof window!="undefined"?window:commonjsGlobal,(function(){function t(){}var e=t.prototype;e.on=function(t,e){if(!t||!e){return}var i=this._events=this._events||{};var n=i[t]=i[t]||[];if(n.indexOf(e)==-1){n.push(e)}return this};e.once=function(t,e){if(!t||!e){return}this.on(t,e);var i=this._onceEvents=this._onceEvents||{};var n=i[t]=i[t]||{};n[e]=true;return this};e.off=function(t,e){var i=this._events&&this._events[t];if(!i||!i.length){return}var n=i.indexOf(e);if(n!=-1){i.splice(n,1)}return this};e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(!i||!i.length){return}i=i.slice(0);e=e||[];var n=this._onceEvents&&this._onceEvents[t];for(var s=0;s<i.length;s++){var r=i[s];var o=n&&n[r];if(o){this.off(t,r);delete n[r]}r.apply(this,e)}return this};e.allOff=function(){delete this._events;delete this._onceEvents};return t}))}));var getSize=createCommonjsModule((function(t){
+ */import{r as registerInstance,c as createEvent,h,e as Host,g as getElement}from"./index-c42becad.js";import{c as createCommonjsModule,a as commonjsGlobal}from"./_commonjsHelpers-e401b2a2.js";var evEmitter=createCommonjsModule((function(t){(function(e,i){if(t.exports){t.exports=i()}else{e.EvEmitter=i()}})(typeof window!="undefined"?window:commonjsGlobal,(function(){function t(){}var e=t.prototype;e.on=function(t,e){if(!t||!e){return}var i=this._events=this._events||{};var n=i[t]=i[t]||[];if(n.indexOf(e)==-1){n.push(e)}return this};e.once=function(t,e){if(!t||!e){return}this.on(t,e);var i=this._onceEvents=this._onceEvents||{};var n=i[t]=i[t]||{};n[e]=true;return this};e.off=function(t,e){var i=this._events&&this._events[t];if(!i||!i.length){return}var n=i.indexOf(e);if(n!=-1){i.splice(n,1)}return this};e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(!i||!i.length){return}i=i.slice(0);e=e||[];var n=this._onceEvents&&this._onceEvents[t];for(var s=0;s<i.length;s++){var r=i[s];var o=n&&n[r];if(o){this.off(t,r);delete n[r]}r.apply(this,e)}return this};e.allOff=function(){delete this._events;delete this._onceEvents};return t}))}));var getSize=createCommonjsModule((function(t){
 /*!
    * getSize v2.0.3
    * measure size of elements
@@ -19,5 +19,5 @@ var __awaiter=this&&this.__awaiter||function(t,e,i,n){function s(t){return t ins
    * Draggable base class
    * MIT license
    */
-(function(e,i){if(t.exports){t.exports=i(e,unipointer)}else{e.Unidragger=i(e,e.Unipointer)}})(window,(function t(e,i){function n(){}var s=n.prototype=Object.create(i.prototype);s.bindHandles=function(){this._bindHandles(true)};s.unbindHandles=function(){this._bindHandles(false)};s._bindHandles=function(t){t=t===undefined?true:t;var i=t?"addEventListener":"removeEventListener";var n=t?this._touchActionValue:"";for(var s=0;s<this.handles.length;s++){var r=this.handles[s];this._bindStartEvent(r,t);r[i]("click",this);if(e.PointerEvent){r.style.touchAction=n}}};s._touchActionValue="none";s.pointerDown=function(t,e){var i=this.okayPointerDown(t);if(!i){return}this.pointerDownPointer={pageX:e.pageX,pageY:e.pageY};t.preventDefault();this.pointerDownBlur();this._bindPostStartEvents(t);this.emitEvent("pointerDown",[t,e])};var r={TEXTAREA:true,INPUT:true,SELECT:true,OPTION:true};var o={radio:true,checkbox:true,button:true,submit:true,image:true,file:true};s.okayPointerDown=function(t){var e=r[t.target.nodeName];var i=o[t.target.type];var n=!e||i;if(!n){this._pointerReset()}return n};s.pointerDownBlur=function(){var t=document.activeElement;var e=t&&t.blur&&t!=document.body;if(e){t.blur()}};s.pointerMove=function(t,e){var i=this._dragPointerMove(t,e);this.emitEvent("pointerMove",[t,e,i]);this._dragMove(t,e,i)};s._dragPointerMove=function(t,e){var i={x:e.pageX-this.pointerDownPointer.pageX,y:e.pageY-this.pointerDownPointer.pageY};if(!this.isDragging&&this.hasDragStarted(i)){this._dragStart(t,e)}return i};s.hasDragStarted=function(t){return Math.abs(t.x)>3||Math.abs(t.y)>3};s.pointerUp=function(t,e){this.emitEvent("pointerUp",[t,e]);this._dragPointerUp(t,e)};s._dragPointerUp=function(t,e){if(this.isDragging){this._dragEnd(t,e)}else{this._staticClick(t,e)}};s._dragStart=function(t,e){this.isDragging=true;this.isPreventingClicks=true;this.dragStart(t,e)};s.dragStart=function(t,e){this.emitEvent("dragStart",[t,e])};s._dragMove=function(t,e,i){if(!this.isDragging){return}this.dragMove(t,e,i)};s.dragMove=function(t,e,i){t.preventDefault();this.emitEvent("dragMove",[t,e,i])};s._dragEnd=function(t,e){this.isDragging=false;setTimeout(function(){delete this.isPreventingClicks}.bind(this));this.dragEnd(t,e)};s.dragEnd=function(t,e){this.emitEvent("dragEnd",[t,e])};s.onclick=function(t){if(this.isPreventingClicks){t.preventDefault()}};s._staticClick=function(t,e){if(this.isIgnoringMouseUp&&t.type=="mouseup"){return}this.staticClick(t,e);if(t.type!="mouseup"){this.isIgnoringMouseUp=true;setTimeout(function(){delete this.isIgnoringMouseUp}.bind(this),400)}};s.staticClick=function(t,e){this.emitEvent("staticClick",[t,e])};n.getPointerPoint=i.getPointerPoint;return n}))}));utils.extend(Flickity.defaults,{draggable:">1",dragThreshold:3});Flickity.createMethods.push("_createDrag");var proto$7=Flickity.prototype;utils.extend(proto$7,unidragger.prototype);proto$7._touchActionValue="pan-y";var isTouch="createTouch"in document;var isTouchmoveScrollCanceled=false;proto$7._createDrag=function(){this.on("activate",this.onActivateDrag);this.on("uiChange",this._uiChangeDrag);this.on("deactivate",this.onDeactivateDrag);this.on("cellChange",this.updateDraggable);if(isTouch&&!isTouchmoveScrollCanceled){window.addEventListener("touchmove",(function(){}));isTouchmoveScrollCanceled=true}};proto$7.onActivateDrag=function(){this.handles=[this.viewport];this.bindHandles();this.updateDraggable()};proto$7.onDeactivateDrag=function(){this.unbindHandles();this.element.classList.remove("is-draggable")};proto$7.updateDraggable=function(){if(this.options.draggable==">1"){this.isDraggable=this.slides.length>1}else{this.isDraggable=this.options.draggable}if(this.isDraggable){this.element.classList.add("is-draggable")}else{this.element.classList.remove("is-draggable")}};proto$7.bindDrag=function(){this.options.draggable=true;this.updateDraggable()};proto$7.unbindDrag=function(){this.options.draggable=false;this.updateDraggable()};proto$7._uiChangeDrag=function(){delete this.isFreeScrolling};proto$7.pointerDown=function(t,e){if(!this.isDraggable){this._pointerDownDefault(t,e);return}var i=this.okayPointerDown(t);if(!i){return}this._pointerDownPreventDefault(t);this.pointerDownFocus(t);if(document.activeElement!=this.element){this.pointerDownBlur()}this.dragX=this.x;this.viewport.classList.add("is-pointer-down");this.pointerDownScroll=getScrollPosition();window.addEventListener("scroll",this);this._pointerDownDefault(t,e)};proto$7._pointerDownDefault=function(t,e){this.pointerDownPointer={pageX:e.pageX,pageY:e.pageY};this._bindPostStartEvents(t);this.dispatchEvent("pointerDown",t,[e])};var focusNodes={INPUT:true,TEXTAREA:true,SELECT:true};proto$7.pointerDownFocus=function(t){var e=focusNodes[t.target.nodeName];if(!e){this.focus()}};proto$7._pointerDownPreventDefault=function(t){var e=t.type=="touchstart";var i=t.pointerType=="touch";var n=focusNodes[t.target.nodeName];if(!e&&!i&&!n){t.preventDefault()}};proto$7.hasDragStarted=function(t){return Math.abs(t.x)>this.options.dragThreshold};proto$7.pointerUp=function(t,e){delete this.isTouchScrolling;this.viewport.classList.remove("is-pointer-down");this.dispatchEvent("pointerUp",t,[e]);this._dragPointerUp(t,e)};proto$7.pointerDone=function(){window.removeEventListener("scroll",this);delete this.pointerDownScroll};proto$7.dragStart=function(t,e){if(!this.isDraggable){return}this.dragStartPosition=this.x;this.startAnimation();window.removeEventListener("scroll",this);this.dispatchEvent("dragStart",t,[e])};proto$7.pointerMove=function(t,e){var i=this._dragPointerMove(t,e);this.dispatchEvent("pointerMove",t,[e,i]);this._dragMove(t,e,i)};proto$7.dragMove=function(t,e,i){if(!this.isDraggable){return}t.preventDefault();this.previousDragX=this.dragX;var n=this.options.rightToLeft?-1:1;if(this.options.wrapAround){i.x=i.x%this.slideableWidth}var s=this.dragStartPosition+i.x*n;if(!this.options.wrapAround&&this.slides.length){var r=Math.max(-this.slides[0].target,this.dragStartPosition);s=s>r?(s+r)*.5:s;var o=Math.min(-this.getLastSlide().target,this.dragStartPosition);s=s<o?(s+o)*.5:s}this.dragX=s;this.dragMoveTime=new Date;this.dispatchEvent("dragMove",t,[e,i])};proto$7.dragEnd=function(t,e){if(!this.isDraggable){return}if(this.options.freeScroll){this.isFreeScrolling=true}var i=this.dragEndRestingSelect();if(this.options.freeScroll&&!this.options.wrapAround){var n=this.getRestingPosition();this.isFreeScrolling=-n>this.slides[0].target&&-n<this.getLastSlide().target}else if(!this.options.freeScroll&&i==this.selectedIndex){i+=this.dragEndBoostSelect()}delete this.previousDragX;this.isDragSelect=this.options.wrapAround;this.select(i);delete this.isDragSelect;this.dispatchEvent("dragEnd",t,[e])};proto$7.dragEndRestingSelect=function(){var t=this.getRestingPosition();var e=Math.abs(this.getSlideDistance(-t,this.selectedIndex));var i=this._getClosestResting(t,e,1);var n=this._getClosestResting(t,e,-1);var s=i.distance<n.distance?i.index:n.index;return s};proto$7._getClosestResting=function(t,e,i){var n=this.selectedIndex;var s=Infinity;var r=this.options.contain&&!this.options.wrapAround?function(t,e){return t<=e}:function(t,e){return t<e};while(r(e,s)){n+=i;s=e;e=this.getSlideDistance(-t,n);if(e===null){break}e=Math.abs(e)}return{distance:s,index:n-i}};proto$7.getSlideDistance=function(t,e){var i=this.slides.length;var n=this.options.wrapAround&&i>1;var s=n?utils.modulo(e,i):e;var r=this.slides[s];if(!r){return null}var o=n?this.slideableWidth*Math.floor(e/i):0;return t-(r.target+o)};proto$7.dragEndBoostSelect=function(){if(this.previousDragX===undefined||!this.dragMoveTime||new Date-this.dragMoveTime>100){return 0}var t=this.getSlideDistance(-this.dragX,this.selectedIndex);var e=this.previousDragX-this.dragX;if(t>0&&e>0){return 1}else if(t<0&&e<0){return-1}return 0};proto$7.staticClick=function(t,e){var i=this.getParentCell(t.target);var n=i&&i.element;var s=i&&this.cells.indexOf(i);this.dispatchEvent("staticClick",t,[e,n,s])};proto$7.onscroll=function(){var t=getScrollPosition();var e=this.pointerDownScroll.x-t.x;var i=this.pointerDownScroll.y-t.y;if(Math.abs(e)>3||Math.abs(i)>3){this._pointerDone()}};function getScrollPosition(){return{x:window.pageXOffset,y:window.pageYOffset}}var svgURI$1="http://www.w3.org/2000/svg";function PrevNextButton(t,e){this.direction=t;this.parent=e;this.parentElement=this.parent.element.shadowRoot||this.parent.element;this._create()}PrevNextButton.prototype=Object.create(unipointer.prototype);PrevNextButton.prototype._create=function(){this.isEnabled=true;this.isPrevious=this.direction==-1;var t=this.parent.options.rightToLeft?1:-1;this.isLeft=this.direction==t;var e=this.element=document.createElement("button");e.className="flickity-button flickity-prev-next-button";e.className+=this.isPrevious?" previous":" next";e.setAttribute("type","button");this.disable();e.setAttribute("aria-label",this.isPrevious?"Previous":"Next");var i=this.createSVG();e.appendChild(i);this.parent.on("select",this.update.bind(this));this.on("pointerDown",this.parent.childUIPointerDown.bind(this.parent))};PrevNextButton.prototype.activate=function(){this.bindStartEvent(this.element);this.element.addEventListener("click",this);this.parentElement.appendChild(this.element)};PrevNextButton.prototype.deactivate=function(){this.parentElement.removeChild(this.element);this.unbindStartEvent(this.element);this.element.removeEventListener("click",this)};PrevNextButton.prototype.createSVG=function(){var t=document.createElementNS(svgURI$1,"svg");t.setAttribute("class","flickity-button-icon");t.setAttribute("viewBox","0 0 100 100");var e=document.createElementNS(svgURI$1,"path");var i=getArrowMovements(this.parent.options.arrowShape);e.setAttribute("d",i);e.setAttribute("class","arrow");if(!this.isLeft){e.setAttribute("transform","translate(100, 100) rotate(180) ")}t.appendChild(e);return t};function getArrowMovements(t){if(typeof t=="string"){return t}return"M "+t.x0+",50"+" L "+t.x1+","+(t.y1+50)+" L "+t.x2+","+(t.y2+50)+" L "+t.x3+",50 "+" L "+t.x2+","+(50-t.y2)+" L "+t.x1+","+(50-t.y1)+" Z"}PrevNextButton.prototype.handleEvent=utils.handleEvent;PrevNextButton.prototype.onclick=function(){if(!this.isEnabled){return}this.parent.uiChange();var t=this.isPrevious?"previous":"next";this.parent[t]()};PrevNextButton.prototype.enable=function(){if(this.isEnabled){return}this.element.disabled=false;this.isEnabled=true};PrevNextButton.prototype.disable=function(){if(!this.isEnabled){return}this.element.disabled=true;this.isEnabled=false};PrevNextButton.prototype.update=function(){var t=this.parent.slides;if(this.parent.options.wrapAround&&t.length>1){this.enable();return}var e=t.length?t.length-1:0;var i=this.isPrevious?0:e;var n=this.parent.selectedIndex==i?"disable":"enable";this[n]()};PrevNextButton.prototype.destroy=function(){this.deactivate();this.allOff()};utils.extend(Flickity.defaults,{prevNextButtons:true,arrowShape:{x0:10,x1:60,y1:50,x2:70,y2:40,x3:30}});Flickity.createMethods.push("_createPrevNextButtons");var proto$6=Flickity.prototype;proto$6._createPrevNextButtons=function(){if(!this.options.prevNextButtons){return}this.prevButton=new PrevNextButton(-1,this);this.nextButton=new PrevNextButton(1,this);this.on("activate",this.activatePrevNextButtons)};proto$6.activatePrevNextButtons=function(){this.prevButton.activate();this.nextButton.activate();this.on("deactivate",this.deactivatePrevNextButtons)};proto$6.deactivatePrevNextButtons=function(){this.prevButton.deactivate();this.nextButton.deactivate();this.off("deactivate",this.deactivatePrevNextButtons)};Flickity.PrevNextButton=PrevNextButton;function PageDots(t){this.parent=t;this.parentElement=this.parent.element.shadowRoot||this.parent.element;this._create()}PageDots.prototype=Object.create(unipointer.prototype);PageDots.prototype._create=function(){this.holder=document.createElement("ol");this.holder.className="flickity-page-dots";this.dots=[];this.handleClick=this.onClick.bind(this);this.on("pointerDown",this.parent.childUIPointerDown.bind(this.parent))};PageDots.prototype.activate=function(){this.setDots();this.holder.addEventListener("click",this.handleClick);this.bindStartEvent(this.holder);this.parentElement.appendChild(this.holder)};PageDots.prototype.deactivate=function(){this.holder.removeEventListener("click",this.handleClick);this.unbindStartEvent(this.holder);this.parentElement.removeChild(this.holder)};PageDots.prototype.setDots=function(){var t=this.parent.slides.length-this.dots.length;if(t>0){this.addDots(t)}else if(t<0){this.removeDots(-t)}};PageDots.prototype.addDots=function(t){var e=document.createDocumentFragment();var i=[];var n=this.dots.length;var s=n+t;for(var r=n;r<s;r++){var o=document.createElement("li");o.classList.add("dot");o.setAttribute("aria-label","Page dot "+(r+1));e.appendChild(o);i.push(o)}this.holder.appendChild(e);this.dots=this.dots.concat(i)};PageDots.prototype.removeDots=function(t){var e=this.dots.splice(this.dots.length-t,t);e.forEach((function(t){this.holder.removeChild(t)}),this)};PageDots.prototype.updateSelected=function(){if(this.selectedDot){this.selectedDot.classList.remove("is-selected");this.selectedDot.removeAttribute("aria-current")}if(!this.dots.length){return}this.selectedDot=this.dots[this.parent.selectedIndex];this.selectedDot.classList.add("is-selected");this.selectedDot.setAttribute("aria-current","step")};PageDots.prototype.onTap=PageDots.prototype.onClick=function(t){var e=t.target;if(e.nodeName!="LI"){return}this.parent.uiChange();var i=this.dots.indexOf(e);this.parent.select(i)};PageDots.prototype.destroy=function(){this.deactivate();this.allOff()};Flickity.PageDots=PageDots;utils.extend(Flickity.defaults,{pageDots:true});Flickity.createMethods.push("_createPageDots");var proto$5=Flickity.prototype;proto$5._createPageDots=function(){if(!this.options.pageDots){return}this.pageDots=new PageDots(this);this.on("activate",this.activatePageDots);this.on("select",this.updateSelectedPageDots);this.on("cellChange",this.updatePageDots);this.on("resize",this.updatePageDots);this.on("deactivate",this.deactivatePageDots)};proto$5.activatePageDots=function(){this.pageDots.activate()};proto$5.updateSelectedPageDots=function(){this.pageDots.updateSelected()};proto$5.updatePageDots=function(){this.pageDots.setDots()};proto$5.deactivatePageDots=function(){this.pageDots.deactivate()};Flickity.PageDots=PageDots;function Player(t){this.parent=t;this.state="stopped";this.onVisibilityChange=this.visibilityChange.bind(this);this.onVisibilityPlay=this.visibilityPlay.bind(this)}Player.prototype=Object.create(evEmitter.prototype);Player.prototype.play=function(){if(this.state=="playing"){return}var t=document.hidden;if(t){document.addEventListener("visibilitychange",this.onVisibilityPlay);return}this.state="playing";document.addEventListener("visibilitychange",this.onVisibilityChange);this.tick()};Player.prototype.tick=function(){if(this.state!="playing"){return}var t=this.parent.options.autoPlay;t=typeof t=="number"?t:3e3;var e=this;this.clear();this.timeout=setTimeout((function(){e.parent.next(true);e.tick()}),t)};Player.prototype.stop=function(){this.state="stopped";this.clear();document.removeEventListener("visibilitychange",this.onVisibilityChange)};Player.prototype.clear=function(){clearTimeout(this.timeout)};Player.prototype.pause=function(){if(this.state=="playing"){this.state="paused";this.clear()}};Player.prototype.unpause=function(){if(this.state=="paused"){this.play()}};Player.prototype.visibilityChange=function(){var t=document.hidden;this[t?"pause":"unpause"]()};Player.prototype.visibilityPlay=function(){this.play();document.removeEventListener("visibilitychange",this.onVisibilityPlay)};utils.extend(Flickity.defaults,{pauseAutoPlayOnHover:true});Flickity.createMethods.push("_createPlayer");var proto$4=Flickity.prototype;proto$4._createPlayer=function(){this.player=new Player(this);this.on("activate",this.activatePlayer);this.on("uiChange",this.stopPlayer);this.on("pointerDown",this.stopPlayer);this.on("deactivate",this.deactivatePlayer)};proto$4.activatePlayer=function(){if(!this.options.autoPlay){return}this.player.play();this.element.addEventListener("mouseenter",this)};proto$4.playPlayer=function(){this.player.play()};proto$4.stopPlayer=function(){this.player.stop()};proto$4.pausePlayer=function(){this.player.pause()};proto$4.unpausePlayer=function(){this.player.unpause()};proto$4.deactivatePlayer=function(){this.player.stop();this.element.removeEventListener("mouseenter",this)};proto$4.onmouseenter=function(){if(!this.options.pauseAutoPlayOnHover){return}this.player.pause();this.element.addEventListener("mouseleave",this)};proto$4.onmouseleave=function(){this.player.unpause();this.element.removeEventListener("mouseleave",this)};Flickity.Player=Player;function getCellsFragment(t){var e=document.createDocumentFragment();t.forEach((function(t){e.appendChild(t.element)}));return e}var proto$3=Flickity.prototype;proto$3.insert=function(t,e){var i=this._makeCells(t);if(!i||!i.length){return}var n=this.cells.length;e=e===undefined?n:e;var s=getCellsFragment(i);var r=e==n;if(r){this.slider.appendChild(s)}else{var o=this.cells[e].element;this.slider.insertBefore(s,o)}if(e===0){this.cells=i.concat(this.cells)}else if(r){this.cells=this.cells.concat(i)}else{var a=this.cells.splice(e,n-e);this.cells=this.cells.concat(i).concat(a)}this._sizeCells(i);this.cellChange(e,true)};proto$3.append=function(t){this.insert(t,this.cells.length)};proto$3.prepend=function(t){this.insert(t,0)};proto$3.remove=function(t){var e=this.getCells(t);if(!e||!e.length){return}var i=this.cells.length-1;e.forEach((function(t){t.remove();var e=this.cells.indexOf(t);i=Math.min(e,i);utils.removeFrom(this.cells,t)}),this);this.cellChange(i,true)};proto$3.cellSizeChange=function(t){var e=this.getCell(t);if(!e){return}e.getSize();var i=this.cells.indexOf(e);this.cellChange(i)};proto$3.cellChange=function(t,e){var i=this.selectedElement;this._positionCells(t);this._getWrapShiftCells();this.setGallerySize();var n=this.getCell(i);if(n){this.selectedIndex=this.getCellSlideIndex(n)}this.selectedIndex=Math.min(this.slides.length-1,this.selectedIndex);this.emitEvent("cellChange",[t]);this.select(this.selectedIndex);if(e){this.positionSliderAtSelected()}};Flickity.createMethods.push("_createLazyload");var proto$2=Flickity.prototype;proto$2._createLazyload=function(){this.on("select",this.lazyLoad)};proto$2.lazyLoad=function(){var t=this.options.lazyLoad;if(!t){return}var e=typeof t=="number"?t:0;var i=this.getAdjacentCellElements(e);var n=[];i.forEach((function(t){var e=getCellLazyImages(t);n=n.concat(e)}));n.forEach((function(t){new LazyLoader(t,this)}),this)};function getCellLazyImages(t){if(t.nodeName=="IMG"){var e=t.getAttribute("data-flickity-lazyload");var i=t.getAttribute("data-flickity-lazyload-src");var n=t.getAttribute("data-flickity-lazyload-srcset");if(e||i||n){return[t]}}var s="img[data-flickity-lazyload], "+"img[data-flickity-lazyload-src], img[data-flickity-lazyload-srcset]";var r=t.querySelectorAll(s);return utils.makeArray(r)}function LazyLoader(t,e){this.img=t;this.flickity=e;this.load()}LazyLoader.prototype.handleEvent=utils.handleEvent;LazyLoader.prototype.load=function(){this.img.addEventListener("load",this);this.img.addEventListener("error",this);var t=this.img.getAttribute("data-flickity-lazyload")||this.img.getAttribute("data-flickity-lazyload-src");var e=this.img.getAttribute("data-flickity-lazyload-srcset");this.img.src=t;if(e){this.img.setAttribute("srcset",e)}this.img.removeAttribute("data-flickity-lazyload");this.img.removeAttribute("data-flickity-lazyload-src");this.img.removeAttribute("data-flickity-lazyload-srcset")};LazyLoader.prototype.onload=function(t){this.complete(t,"flickity-lazyloaded")};LazyLoader.prototype.onerror=function(t){this.complete(t,"flickity-lazyerror")};LazyLoader.prototype.complete=function(t,e){this.img.removeEventListener("load",this);this.img.removeEventListener("error",this);var i=this.flickity.getParentCell(this.img);var n=i&&i.element;this.flickity.cellSizeChange(n);this.img.classList.add(e);this.flickity.dispatchEvent("lazyLoad",t,n)};Flickity.LazyLoader=LazyLoader;Flickity.createMethods.push("_createFullscreen");var proto$1=Flickity.prototype;proto$1._createFullscreen=function(){this.isFullscreen=false;if(!this.options.fullscreen){return}this.viewFullscreenButton=new FullscreenButton("view",this);this.exitFullscreenButton=new FullscreenButton("exit",this);this.on("activate",this._changeFullscreenActive);this.on("deactivate",this._changeFullscreenActive)};proto$1._changeFullscreenActive=function(){var t=this.isActive?"appendChild":"removeChild";this.element[t](this.viewFullscreenButton.element);this.element[t](this.exitFullscreenButton.element);var e=this.isActive?"activate":"deactivate";this.viewFullscreenButton[e]();this.exitFullscreenButton[e]()};proto$1.viewFullscreen=function(){this._changeFullscreen(true);this.focus()};proto$1.exitFullscreen=function(){this._changeFullscreen(false)};proto$1._changeFullscreen=function(t){if(this.isFullscreen==t){return}this.isFullscreen=t;var e=t?"add":"remove";document.documentElement.classList[e]("is-flickity-fullscreen");this.element.classList[e]("is-fullscreen");this.resize();if(this.isFullscreen){this.reposition()}this.dispatchEvent("fullscreenChange",null,[t])};proto$1.toggleFullscreen=function(){this._changeFullscreen(!this.isFullscreen)};var setGallerySize=proto$1.setGallerySize;proto$1.setGallerySize=function(){if(!this.options.setGallerySize){return}if(this.isFullscreen){this.viewport.style.height=""}else{setGallerySize.call(this)}};Flickity.keyboardHandlers[27]=function(){this.exitFullscreen()};function FullscreenButton(t,e){this.name=t;this.createButton();this.createIcon();this.onClick=function(){e[t+"Fullscreen"]()};this.clickHandler=this.onClick.bind(this)}FullscreenButton.prototype.createButton=function(){var t=this.element=document.createElement("button");t.className="flickity-button flickity-fullscreen-button "+"flickity-fullscreen-button-"+this.name;t.setAttribute("type","button");var e=capitalize(this.name+" full-screen");t.setAttribute("aria-label",e);t.title=e};function capitalize(t){return t[0].toUpperCase()+t.slice(1)}var svgURI="http://www.w3.org/2000/svg";var pathDirections={view:"M15,20,7,28h5v4H0V20H4v5l8-8Zm5-5,8-8v5h4V0H20V4h5l-8,8Z",exit:"M32,3l-7,7h5v4H18V2h4V7l7-7ZM3,32l7-7v5h4V18H2v4H7L0,29Z"};FullscreenButton.prototype.createIcon=function(){var t=document.createElementNS(svgURI,"svg");t.setAttribute("class","flickity-button-icon");t.setAttribute("viewBox","0 0 32 32");var e=document.createElementNS(svgURI,"path");var i=pathDirections[this.name];e.setAttribute("d",i);t.appendChild(e);this.element.appendChild(t)};FullscreenButton.prototype.activate=function(){this.element.addEventListener("click",this.clickHandler)};FullscreenButton.prototype.deactivate=function(){this.element.removeEventListener("click",this.clickHandler)};Flickity.FullscreenButton=FullscreenButton;var Slide=Flickity.Slide;var slideUpdateTarget=Slide.prototype.updateTarget;Slide.prototype.updateTarget=function(){slideUpdateTarget.apply(this,arguments);if(!this.parent.options.fade){return}var t=this.target-this.x;var e=this.cells[0].x;this.cells.forEach((function(i){var n=i.x-e-t;i.renderPosition(n)}))};Slide.prototype.setOpacity=function(t){this.cells.forEach((function(e){e.element.style.opacity=t}))};var proto=Flickity.prototype;Flickity.createMethods.push("_createFade");proto._createFade=function(){this.fadeIndex=this.selectedIndex;this.prevSelectedIndex=this.selectedIndex;this.on("select",this.onSelectFade);this.on("dragEnd",this.onDragEndFade);this.on("settle",this.onSettleFade);this.on("activate",this.onActivateFade);this.on("deactivate",this.onDeactivateFade)};var updateSlides=proto.updateSlides;proto.updateSlides=function(){updateSlides.apply(this,arguments);if(!this.options.fade){return}this.slides.forEach((function(t,e){var i=e==this.selectedIndex?1:0;t.setOpacity(i)}),this)};proto.onSelectFade=function(){this.fadeIndex=Math.min(this.prevSelectedIndex,this.slides.length-1);this.prevSelectedIndex=this.selectedIndex};proto.onSettleFade=function(){delete this.didDragEnd;if(!this.options.fade){return}this.selectedSlide.setOpacity(1);var t=this.slides[this.fadeIndex];if(t&&this.fadeIndex!=this.selectedIndex){this.slides[this.fadeIndex].setOpacity(0)}};proto.onDragEndFade=function(){this.didDragEnd=true};proto.onActivateFade=function(){if(this.options.fade){this.element.classList.add("is-fade")}};proto.onDeactivateFade=function(){if(!this.options.fade){return}this.element.classList.remove("is-fade");this.slides.forEach((function(t){t.setOpacity("")}))};var positionSlider=proto.positionSlider;proto.positionSlider=function(){if(!this.options.fade){positionSlider.apply(this,arguments);return}this.fadeSlides();this.dispatchScrollEvent()};var positionSliderAtSelected=proto.positionSliderAtSelected;proto.positionSliderAtSelected=function(){if(this.options.fade){this.setTranslateX(0)}positionSliderAtSelected.apply(this,arguments)};proto.fadeSlides=function(){if(this.slides.length<2){return}var t=this.getFadeIndexes();var e=this.slides[t.a];var i=this.slides[t.b];var n=this.wrapDifference(e.target,i.target);var s=this.wrapDifference(e.target,-this.x);s=s/n;e.setOpacity(1-s);i.setOpacity(s);var r=t.a;if(this.isDragging){r=s>.5?t.a:t.b}var o=this.fadeHideIndex!=undefined&&this.fadeHideIndex!=r&&this.fadeHideIndex!=t.a&&this.fadeHideIndex!=t.b;if(o){this.slides[this.fadeHideIndex].setOpacity(0)}this.fadeHideIndex=r};proto.getFadeIndexes=function(){if(!this.isDragging&&!this.didDragEnd){return{a:this.fadeIndex,b:this.selectedIndex}}if(this.options.wrapAround){return this.getFadeDragWrapIndexes()}else{return this.getFadeDragLimitIndexes()}};proto.getFadeDragWrapIndexes=function(){var t=this.slides.map((function(t,e){return this.getSlideDistance(-this.x,e)}),this);var e=t.map((function(t){return Math.abs(t)}));var i=Math.min.apply(Math,e);var n=e.indexOf(i);var s=t[n];var r=this.slides.length;var o=s>=0?1:-1;return{a:n,b:utils.modulo(n+o,r)}};proto.getFadeDragLimitIndexes=function(){var t=0;for(var e=0;e<this.slides.length-1;e++){var i=this.slides[e];if(-this.x<i.target){break}t=e}return{a:t,b:t+1}};proto.wrapDifference=function(t,e){var i=e-t;if(!this.options.wrapAround){return i}var n=i+this.slideableWidth;var s=i-this.slideableWidth;if(Math.abs(n)<Math.abs(i)){i=n}if(Math.abs(s)<Math.abs(i)){i=s}return i};var _getWrapShiftCells=proto._getWrapShiftCells;proto._getWrapShiftCells=function(){if(!this.options.fade){_getWrapShiftCells.apply(this,arguments)}};var shiftWrapCells=proto.shiftWrapCells;proto.shiftWrapCells=function(){if(!this.options.fade){shiftWrapCells.apply(this,arguments)}};var flickity=Flickity;var slidesCss=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--dot-color:#ccc;--dot-color-active:var(--nano-color-primary, #007495);--navbtns-icon-color:var(--dot-color-active);--navbtns-bg-color:white;--navbtns-icon-color-disabled:var(--dot-color-active);--navbtns-bg-color-disabled:white;--fsbtn-icon-color:var(--dot-color-active);--fsbtn-bg-color:white;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-transition:opacity 0.2s;transition:opacity 0.2s;opacity:0}:host([ready]){opacity:1}.slideshow{height:100%;position:relative}.flickity-container{height:0;opacity:0;-webkit-transition:opacity 0.2s;transition:opacity 0.2s}.flickity-container.slides-ready{height:100%}[hidden]{display:none !important}.ui-extras{pointer-events:none;position:absolute;height:100%;width:100%;top:0;left:0}.ui-extras *{pointer-events:all}/*! Flickity v2.2.1\nhttps://flickity.metafizzy.co\n---------------------------------------------- */.flickity-enabled{position:relative;opacity:1}.flickity-enabled:focus{outline:none}.flickity-viewport{overflow:hidden;position:relative;height:100% !important}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;background:var(--navbtns-bg-color);border:none;color:#333;opacity:0.75}.flickity-button:hover{opacity:1;cursor:pointer}.flickity-button:focus{outline:none;-webkit-box-shadow:0 0 0 5px #19f;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:0.6}.flickity-button:disabled{opacity:0.3;cursor:auto;pointer-events:none;background:var(--navbtns-bg-color-disabled)}.flickity-button-icon{fill:var(--navbtns-icon-color)}.flickity-button:disabled .flickity-button-icon{fill:var(--navbtns-icon-color-disabled)}.flickity-prev-next-button{top:50%;width:44px;height:44px;border-radius:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-page-dots{position:absolute;width:100%;bottom:10px;padding:0;margin:0;list-style:none;text-align:center;line-height:1;z-index:4}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;border-radius:50%;cursor:pointer;background:var(--dot-color)}.flickity-page-dots .dot.is-selected{opacity:1;background:var(--dot-color-active)}.flickity-enabled.is-fullscreen{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.9);padding-bottom:35px;z-index:100}.flickity-enabled.is-fullscreen .flickity-page-dots{bottom:45px}html.is-flickity-fullscreen{overflow:hidden}.flickity-fullscreen-button{display:block;right:10px;top:10px;width:24px;height:24px;border-radius:4px;background:var(--fsbtn-bg-color);fill:var(--fsbtn-icon-color)}.flickity-rtl .flickity-fullscreen-button{right:auto;left:10px}.flickity-fullscreen-button-exit{display:none}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit{display:block}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view{display:none}.flickity-fullscreen-button .flickity-button-icon{position:absolute;width:16px;height:16px;left:4px;top:4px}.flickity-enabled.is-fade .flickity-slider>*{pointer-events:none;z-index:0}.flickity-enabled.is-fade .flickity-slider ::slotted(.is-selected){pointer-events:auto;z-index:1}";var CANSHADOW=!!document.head.attachShadow;var Slides=function(){function t(t){var e=this;registerInstance(this,t);this.nanoSlidesDidLoad=createEvent(this,"nanoSlidesDidLoad",7);this.nanoSlidesReady=createEvent(this,"nanoSlidesReady",7);this.nanoSlidesSelect=createEvent(this,"nanoSlidesSelect",7);this.nanoSlidesChange=createEvent(this,"nanoSlidesChange",7);this.nanoSlidesScroll=createEvent(this,"nanoSlidesScroll",7);this.nanoSlidesTransitionEnd=createEvent(this,"nanoSlidesTransitionEnd",7);this.nanoSlidesDragStart=createEvent(this,"nanoSlidesDragStart",7);this.nanoSlidesDragMove=createEvent(this,"nanoSlidesDragMove",7);this.nanoSlidesDragEnd=createEvent(this,"nanoSlidesDragEnd",7);this.nanoSlidesTap=createEvent(this,"nanoSlidesTap",7);this.nanoSlidesFullscreenChange=createEvent(this,"nanoSlidesFullscreenChange",7);this.flickityReady=false;this.flickity=new Promise((function(t){e.readyflickity=t}));this.didInit=false;this.options={};this.navbtns=false;this.pager=false;this.fullscreenbtn=false;this.fullscreen=false;this.animation="scroll";this.currentSlide=0;this.autoplay=false;this.ready=false;this.parralax=function(){return __awaiter(e,void 0,void 0,(function(){var t;var e=this;return __generator(this,(function(i){switch(i.label){case 0:return[4,this.flickity];case 1:t=i.sent();t.slides.forEach((function(i,n){var s=e.childrenEles[n];var r=(i.target+t.x)*-1/3;s.style["transform"]="translateX("+r+"px)"}));return[2]}}))}))};this.handleFullscreen=function(t){e.fullscreen=t;e.nanoSlidesFullscreenChange.emit(t)};this.handleSlideSelect=function(t){e.iCurrentSlide=t;e.nanoSlidesSelect.emit(t)}}t.prototype.optionsChanged=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:if(!this.flickityReady)return[3,3];return[4,this.getflickity()];case 1:t=e.sent();Object.assign(t.options,this.options);return[4,this.update()];case 2:e.sent();e.label=3;case 3:return[2]}}))}))};t.prototype.navbtnsChanged=function(){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(e){Array.from(this._getRoot().querySelectorAll(".flickity-prev-next-button")).forEach((function(e){e.hidden=!t.navbtns}));return[2]}))}))};t.prototype.pagerChanged=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){t=this._getRoot().querySelector(".flickity-page-dots");t.hidden=!this.pager;return[2]}))}))};t.prototype.fullscreenBtnChanged=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){t=this._getRoot().querySelector(".flickity-fullscreen-button");t.hidden=!this.fullscreenbtn;return[2]}))}))};t.prototype.fullscreenChanged=function(t,e){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(i){switch(i.label){case 0:return[4,this.getflickity()];case 1:t=i.sent();if(this.fullscreen)t.viewFullscreen();else if(typeof e!=="undefined")t.exitFullscreen();return[2]}}))}))};t.prototype.animationChange=function(t,e){return __awaiter(this,void 0,void 0,(function(){var t,i,n;var s=this;return __generator(this,(function(r){switch(r.label){case 0:return[4,Promise.all([this.getflickity(),waitForSlides(this.host)])];case 1:t=r.sent(),i=t[0],n=t[1];n.forEach((function(t){t.style["left"]=undefined}));if(e==="parallax"){i.off("scroll",this.parralax);n.forEach((function(t,e){if(s.childrenEles&&s.childrenEles[e])s.childrenEles[e].style["transform"]=undefined}));this.update()}switch(this.animation){case"fade":this.options={fade:true,percentPosition:true};break;case"parallax":this.options={fade:false,percentPosition:false};i.on("scroll",this.parralax);break;default:this.options={fade:false,percentPosition:true};break}return[2]}}))}))};t.prototype.currentSlideChange=function(){if(this.currentSlide!==this.iCurrentSlide)this.slideTo(this.currentSlide)};t.prototype.internalSlideChange=function(){this.currentSlide=this.iCurrentSlide};t.prototype.autoPlayChange=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,this.stopAutoplay()];case 1:t.sent();if(this.autoplay){if(typeof this.autoplay==="string")this.autoplay=parseInt(this.autoplay);if(this.autoplay>0)this.startAutoplay(this.autoplay)}return[2]}}))}))};t.prototype.update=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:return[4,Promise.all([this.getflickity(),waitForSlides(this.host)])];case 1:t=e.sent()[0];this.childrenEles=this.host.querySelectorAll("nano-slide > *");t.reloadCells();t.resize();t.reposition();return[2]}}))}))};t.prototype.updateAutoHeight=function(t){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(i){e=document.querySelector(".flickity-viewport");if(e)e.style.transition=t+"ms";return[2]}))}))};t.prototype.slideTo=function(t,e){return __awaiter(this,void 0,void 0,(function(){var i;return __generator(this,(function(n){switch(n.label){case 0:return[4,this.getflickity()];case 1:i=n.sent();i.select(t,e);return[2]}}))}))};t.prototype.slideNext=function(t,e){return __awaiter(this,void 0,void 0,(function(){var i;return __generator(this,(function(n){switch(n.label){case 0:return[4,this.getflickity()];case 1:i=n.sent();i.next(e,t);return[2]}}))}))};t.prototype.slidePrev=function(t,e){return __awaiter(this,void 0,void 0,(function(){var i;return __generator(this,(function(n){switch(n.label){case 0:return[4,this.getflickity()];case 1:i=n.sent();i.previous(t,e);return[2]}}))}))};t.prototype.getActiveIndex=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:return[4,this.getflickity()];case 1:t=e.sent();return[2,t.selectedIndex]}}))}))};t.prototype.length=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:return[4,this.getflickity()];case 1:t=e.sent();return[2,t.slides.length]}}))}))};t.prototype.isEnd=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:return[4,this.getflickity()];case 1:t=e.sent();return[2,t.selectedIndex===t.slides.length-1]}}))}))};t.prototype.isBeginning=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:return[4,this.getflickity()];case 1:t=e.sent();return[2,t.selectedIndex===0]}}))}))};t.prototype.startAutoplay=function(t){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(i){switch(i.label){case 0:return[4,this.getflickity()];case 1:e=i.sent();if(t)this.options={autoPlay:t};setTimeout((function(){return e.playPlayer()}));return[2]}}))}))};t.prototype.stopAutoplay=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:return[4,this.getflickity()];case 1:t=e.sent();t.stopPlayer();return[2]}}))}))};t.prototype.lockSwipes=function(t){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(i){switch(i.label){case 0:return[4,this.getflickity()];case 1:e=i.sent();e.options.draggable=!t;e.updateDraggable();return[2]}}))}))};t.prototype.getflickity=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.flickity]}))}))};t.prototype.reload=function(){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(e){this.destroyflickity();setTimeout((function(){return t.initflickity()}),20);return[2]}))}))};t.prototype._getRoot=function(){return this.host.shadowRoot?this.host.shadowRoot:this.host};t.prototype._fixClassNames=function(){var t=this.slideShowEle.className.split(" ").filter((function(t){return t.match(/^sc-nano/)}));var e=this._getRoot().querySelectorAll("*");if(!e)return;Array.from(e).map((function(e){t.map((function(t){return e.classList.add(t)}))}))};t.prototype.destroyflickity=function(){var t=this;var e=this.syncflickity;if(e!==undefined){e.destroy();this.flickity=new Promise((function(e){t.readyflickity=e}));this.flickityReady=false;this.syncflickity=undefined;this.ready=false}this.didInit=false};t.prototype.initflickity=function(){return __awaiter(this,void 0,void 0,(function(){var t;var e=this;return __generator(this,(function(i){switch(i.label){case 0:t=this.normalizeOptions();return[4,waitForSlides(this.host)];case 1:i.sent();this.slidesReady=true;this.flickityEl=this.flickityEl||this._getRoot().querySelector(".flickity-container");if(this.flickityEl.classList.contains("flickity-enabled"))this.destroyflickity();setTimeout((function(){var i=new flickity(e.flickityEl,t);e.flickityReady=true;if(!e.host.shadowRoot||!CANSHADOW)e._fixClassNames();e.syncflickity=i;e.animationChange();e.navbtnsChanged();e.pagerChanged();e.fullscreenChanged();e.fullscreenBtnChanged();e.readyflickity(i);e.ready=true;if(!e.host.getBoundingClientRect().height){var n=e.resizeO=new index((function(){i.resize();e.resizeO.disconnect()}));n.observe(e.host)}}),100);return[2]}}))}))};t.prototype.normalizeOptions=function(){var t=this;var e={cellSelector:"nano-slide",contain:true,prevNextButtons:true,fullscreen:true,accessibility:true,imagesLoaded:true,pageDots:true};if(this.animation==="fade"){e.fade=true}if(this.currentSlide>0){e.initialIndex=this.currentSlide}if(this.autoplay){if(typeof this.autoplay==="string")this.autoplay=parseInt(this.autoplay);if(this.autoplay>0)e.autoPlay=this.autoplay}var i={ready:function(){setTimeout((function(){t.nanoSlidesReady.emit()}),20)},select:this.handleSlideSelect,change:this.nanoSlidesChange.emit,scroll:this.nanoSlidesScroll.emit,settle:this.nanoSlidesTransitionEnd.emit,dragStart:this.nanoSlidesDragStart.emit,dragMove:this.nanoSlidesDragMove.emit,dragEnd:this.nanoSlidesDragEnd.emit,staticClick:this.nanoSlidesTap.emit,fullscreenChange:this.handleFullscreen};var n=!!this.options&&!!this.options.on?this.options.on:{};var s={on:Object.assign(Object.assign({},n),i)};return Object.assign(Object.assign(Object.assign({},e),s),this.options)};t.prototype.componentDidLoad=function(){var t=this;if(typeof window!=="undefined"&&window.MutationObserver){var e=this.mutationO=new MutationObserver((function(e){if(e[0].addedNodes[0]&&e[0].addedNodes[0].nodeName.toLowerCase()==="nano-slide"&&t.flickityReady){t.update()}}));e.observe(this.host,{childList:true,subtree:true})}};t.prototype.componentWillLoad=function(){this.nanoSlidesDidLoad.emit();if(!this.didInit){this.didInit=true;this.initflickity()}};t.prototype.disconnectedCallback=function(){if(this.mutationO){this.mutationO.disconnect();this.mutationO=undefined}if(this.resizeO)this.resizeO.disconnect();this.destroyflickity()};t.prototype.render=function(){var t=this;return h(Host,null,h("div",{class:"slideshow",ref:function(e){return t.slideShowEle=e}},h("div",{ref:function(e){return t.flickityEl=e},class:{"flickity-container":true,"slides-ready":this.slidesReady,"slides-not-ready":!this.slidesReady}},h("slot",null)),h("div",{class:"ui-extras"},h("slot",{name:"ui"}))))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{options:["optionsChanged"],navbtns:["navbtnsChanged"],pager:["pagerChanged"],fullscreenbtn:["fullscreenBtnChanged"],fullscreen:["fullscreenChanged"],animation:["animationChange"],currentSlide:["currentSlideChange"],iCurrentSlide:["internalSlideChange"],autoplay:["autoPlayChange"]}},enumerable:false,configurable:true});return t}();var waitForSlides=function(t){var e=Array.from(t.querySelectorAll("nano-slide"));var i=e.filter((function(t){return!t.ready}));if(!i.length)return Promise.resolve(e);return new Promise((function(n){var s=function(r){i=i.filter((function(t){return t!==r.target}));if(!i.length){n(e);t.removeEventListener("nanoSlideReady",s)}};t.addEventListener("nanoSlideReady",s);t.addEventListener("nanoslideready",s)}))};Slides.style=slidesCss;export{Slides as nano_slides};
+(function(e,i){if(t.exports){t.exports=i(e,unipointer)}else{e.Unidragger=i(e,e.Unipointer)}})(window,(function t(e,i){function n(){}var s=n.prototype=Object.create(i.prototype);s.bindHandles=function(){this._bindHandles(true)};s.unbindHandles=function(){this._bindHandles(false)};s._bindHandles=function(t){t=t===undefined?true:t;var i=t?"addEventListener":"removeEventListener";var n=t?this._touchActionValue:"";for(var s=0;s<this.handles.length;s++){var r=this.handles[s];this._bindStartEvent(r,t);r[i]("click",this);if(e.PointerEvent){r.style.touchAction=n}}};s._touchActionValue="none";s.pointerDown=function(t,e){var i=this.okayPointerDown(t);if(!i){return}this.pointerDownPointer={pageX:e.pageX,pageY:e.pageY};t.preventDefault();this.pointerDownBlur();this._bindPostStartEvents(t);this.emitEvent("pointerDown",[t,e])};var r={TEXTAREA:true,INPUT:true,SELECT:true,OPTION:true};var o={radio:true,checkbox:true,button:true,submit:true,image:true,file:true};s.okayPointerDown=function(t){var e=r[t.target.nodeName];var i=o[t.target.type];var n=!e||i;if(!n){this._pointerReset()}return n};s.pointerDownBlur=function(){var t=document.activeElement;var e=t&&t.blur&&t!=document.body;if(e){t.blur()}};s.pointerMove=function(t,e){var i=this._dragPointerMove(t,e);this.emitEvent("pointerMove",[t,e,i]);this._dragMove(t,e,i)};s._dragPointerMove=function(t,e){var i={x:e.pageX-this.pointerDownPointer.pageX,y:e.pageY-this.pointerDownPointer.pageY};if(!this.isDragging&&this.hasDragStarted(i)){this._dragStart(t,e)}return i};s.hasDragStarted=function(t){return Math.abs(t.x)>3||Math.abs(t.y)>3};s.pointerUp=function(t,e){this.emitEvent("pointerUp",[t,e]);this._dragPointerUp(t,e)};s._dragPointerUp=function(t,e){if(this.isDragging){this._dragEnd(t,e)}else{this._staticClick(t,e)}};s._dragStart=function(t,e){this.isDragging=true;this.isPreventingClicks=true;this.dragStart(t,e)};s.dragStart=function(t,e){this.emitEvent("dragStart",[t,e])};s._dragMove=function(t,e,i){if(!this.isDragging){return}this.dragMove(t,e,i)};s.dragMove=function(t,e,i){t.preventDefault();this.emitEvent("dragMove",[t,e,i])};s._dragEnd=function(t,e){this.isDragging=false;setTimeout(function(){delete this.isPreventingClicks}.bind(this));this.dragEnd(t,e)};s.dragEnd=function(t,e){this.emitEvent("dragEnd",[t,e])};s.onclick=function(t){if(this.isPreventingClicks){t.preventDefault()}};s._staticClick=function(t,e){if(this.isIgnoringMouseUp&&t.type=="mouseup"){return}this.staticClick(t,e);if(t.type!="mouseup"){this.isIgnoringMouseUp=true;setTimeout(function(){delete this.isIgnoringMouseUp}.bind(this),400)}};s.staticClick=function(t,e){this.emitEvent("staticClick",[t,e])};n.getPointerPoint=i.getPointerPoint;return n}))}));utils.extend(Flickity.defaults,{draggable:">1",dragThreshold:3});Flickity.createMethods.push("_createDrag");var proto$7=Flickity.prototype;utils.extend(proto$7,unidragger.prototype);proto$7._touchActionValue="pan-y";var isTouch="createTouch"in document;var isTouchmoveScrollCanceled=false;proto$7._createDrag=function(){this.on("activate",this.onActivateDrag);this.on("uiChange",this._uiChangeDrag);this.on("deactivate",this.onDeactivateDrag);this.on("cellChange",this.updateDraggable);if(isTouch&&!isTouchmoveScrollCanceled){window.addEventListener("touchmove",(function(){}));isTouchmoveScrollCanceled=true}};proto$7.onActivateDrag=function(){this.handles=[this.viewport];this.bindHandles();this.updateDraggable()};proto$7.onDeactivateDrag=function(){this.unbindHandles();this.element.classList.remove("is-draggable")};proto$7.updateDraggable=function(){if(this.options.draggable==">1"){this.isDraggable=this.slides.length>1}else{this.isDraggable=this.options.draggable}if(this.isDraggable){this.element.classList.add("is-draggable")}else{this.element.classList.remove("is-draggable")}};proto$7.bindDrag=function(){this.options.draggable=true;this.updateDraggable()};proto$7.unbindDrag=function(){this.options.draggable=false;this.updateDraggable()};proto$7._uiChangeDrag=function(){delete this.isFreeScrolling};proto$7.pointerDown=function(t,e){if(!this.isDraggable){this._pointerDownDefault(t,e);return}var i=this.okayPointerDown(t);if(!i){return}this._pointerDownPreventDefault(t);this.pointerDownFocus(t);if(document.activeElement!=this.element){this.pointerDownBlur()}this.dragX=this.x;this.viewport.classList.add("is-pointer-down");this.pointerDownScroll=getScrollPosition();window.addEventListener("scroll",this);this._pointerDownDefault(t,e)};proto$7._pointerDownDefault=function(t,e){this.pointerDownPointer={pageX:e.pageX,pageY:e.pageY};this._bindPostStartEvents(t);this.dispatchEvent("pointerDown",t,[e])};var focusNodes={INPUT:true,TEXTAREA:true,SELECT:true};proto$7.pointerDownFocus=function(t){var e=focusNodes[t.target.nodeName];if(!e){this.focus()}};proto$7._pointerDownPreventDefault=function(t){var e=t.type=="touchstart";var i=t.pointerType=="touch";var n=focusNodes[t.target.nodeName];if(!e&&!i&&!n){t.preventDefault()}};proto$7.hasDragStarted=function(t){return Math.abs(t.x)>this.options.dragThreshold};proto$7.pointerUp=function(t,e){delete this.isTouchScrolling;this.viewport.classList.remove("is-pointer-down");this.dispatchEvent("pointerUp",t,[e]);this._dragPointerUp(t,e)};proto$7.pointerDone=function(){window.removeEventListener("scroll",this);delete this.pointerDownScroll};proto$7.dragStart=function(t,e){if(!this.isDraggable){return}this.dragStartPosition=this.x;this.startAnimation();window.removeEventListener("scroll",this);this.dispatchEvent("dragStart",t,[e])};proto$7.pointerMove=function(t,e){var i=this._dragPointerMove(t,e);this.dispatchEvent("pointerMove",t,[e,i]);this._dragMove(t,e,i)};proto$7.dragMove=function(t,e,i){if(!this.isDraggable){return}t.preventDefault();this.previousDragX=this.dragX;var n=this.options.rightToLeft?-1:1;if(this.options.wrapAround){i.x=i.x%this.slideableWidth}var s=this.dragStartPosition+i.x*n;if(!this.options.wrapAround&&this.slides.length){var r=Math.max(-this.slides[0].target,this.dragStartPosition);s=s>r?(s+r)*.5:s;var o=Math.min(-this.getLastSlide().target,this.dragStartPosition);s=s<o?(s+o)*.5:s}this.dragX=s;this.dragMoveTime=new Date;this.dispatchEvent("dragMove",t,[e,i])};proto$7.dragEnd=function(t,e){if(!this.isDraggable){return}if(this.options.freeScroll){this.isFreeScrolling=true}var i=this.dragEndRestingSelect();if(this.options.freeScroll&&!this.options.wrapAround){var n=this.getRestingPosition();this.isFreeScrolling=-n>this.slides[0].target&&-n<this.getLastSlide().target}else if(!this.options.freeScroll&&i==this.selectedIndex){i+=this.dragEndBoostSelect()}delete this.previousDragX;this.isDragSelect=this.options.wrapAround;this.select(i);delete this.isDragSelect;this.dispatchEvent("dragEnd",t,[e])};proto$7.dragEndRestingSelect=function(){var t=this.getRestingPosition();var e=Math.abs(this.getSlideDistance(-t,this.selectedIndex));var i=this._getClosestResting(t,e,1);var n=this._getClosestResting(t,e,-1);var s=i.distance<n.distance?i.index:n.index;return s};proto$7._getClosestResting=function(t,e,i){var n=this.selectedIndex;var s=Infinity;var r=this.options.contain&&!this.options.wrapAround?function(t,e){return t<=e}:function(t,e){return t<e};while(r(e,s)){n+=i;s=e;e=this.getSlideDistance(-t,n);if(e===null){break}e=Math.abs(e)}return{distance:s,index:n-i}};proto$7.getSlideDistance=function(t,e){var i=this.slides.length;var n=this.options.wrapAround&&i>1;var s=n?utils.modulo(e,i):e;var r=this.slides[s];if(!r){return null}var o=n?this.slideableWidth*Math.floor(e/i):0;return t-(r.target+o)};proto$7.dragEndBoostSelect=function(){if(this.previousDragX===undefined||!this.dragMoveTime||new Date-this.dragMoveTime>100){return 0}var t=this.getSlideDistance(-this.dragX,this.selectedIndex);var e=this.previousDragX-this.dragX;if(t>0&&e>0){return 1}else if(t<0&&e<0){return-1}return 0};proto$7.staticClick=function(t,e){var i=this.getParentCell(t.target);var n=i&&i.element;var s=i&&this.cells.indexOf(i);this.dispatchEvent("staticClick",t,[e,n,s])};proto$7.onscroll=function(){var t=getScrollPosition();var e=this.pointerDownScroll.x-t.x;var i=this.pointerDownScroll.y-t.y;if(Math.abs(e)>3||Math.abs(i)>3){this._pointerDone()}};function getScrollPosition(){return{x:window.pageXOffset,y:window.pageYOffset}}var svgURI$1="http://www.w3.org/2000/svg";function PrevNextButton(t,e){this.direction=t;this.parent=e;this.parentElement=this.parent.element.shadowRoot||this.parent.element;this._create()}PrevNextButton.prototype=Object.create(unipointer.prototype);PrevNextButton.prototype._create=function(){this.isEnabled=true;this.isPrevious=this.direction==-1;var t=this.parent.options.rightToLeft?1:-1;this.isLeft=this.direction==t;var e=this.element=document.createElement("button");e.className="flickity-button flickity-prev-next-button";e.className+=this.isPrevious?" previous":" next";e.setAttribute("type","button");this.disable();e.setAttribute("aria-label",this.isPrevious?"Previous":"Next");var i=this.createSVG();e.appendChild(i);this.parent.on("select",this.update.bind(this));this.on("pointerDown",this.parent.childUIPointerDown.bind(this.parent))};PrevNextButton.prototype.activate=function(){this.bindStartEvent(this.element);this.element.addEventListener("click",this);this.parentElement.appendChild(this.element)};PrevNextButton.prototype.deactivate=function(){this.parentElement.removeChild(this.element);this.unbindStartEvent(this.element);this.element.removeEventListener("click",this)};PrevNextButton.prototype.createSVG=function(){var t=document.createElementNS(svgURI$1,"svg");t.setAttribute("class","flickity-button-icon");t.setAttribute("viewBox","0 0 100 100");var e=document.createElementNS(svgURI$1,"path");var i=getArrowMovements(this.parent.options.arrowShape);e.setAttribute("d",i);e.setAttribute("class","arrow");if(!this.isLeft){e.setAttribute("transform","translate(100, 100) rotate(180) ")}t.appendChild(e);return t};function getArrowMovements(t){if(typeof t=="string"){return t}return"M "+t.x0+",50"+" L "+t.x1+","+(t.y1+50)+" L "+t.x2+","+(t.y2+50)+" L "+t.x3+",50 "+" L "+t.x2+","+(50-t.y2)+" L "+t.x1+","+(50-t.y1)+" Z"}PrevNextButton.prototype.handleEvent=utils.handleEvent;PrevNextButton.prototype.onclick=function(){if(!this.isEnabled){return}this.parent.uiChange();var t=this.isPrevious?"previous":"next";this.parent[t]()};PrevNextButton.prototype.enable=function(){if(this.isEnabled){return}this.element.disabled=false;this.isEnabled=true};PrevNextButton.prototype.disable=function(){if(!this.isEnabled){return}this.element.disabled=true;this.isEnabled=false};PrevNextButton.prototype.update=function(){var t=this.parent.slides;if(this.parent.options.wrapAround&&t.length>1){this.enable();return}var e=t.length?t.length-1:0;var i=this.isPrevious?0:e;var n=this.parent.selectedIndex==i?"disable":"enable";this[n]()};PrevNextButton.prototype.destroy=function(){this.deactivate();this.allOff()};utils.extend(Flickity.defaults,{prevNextButtons:true,arrowShape:{x0:10,x1:60,y1:50,x2:70,y2:40,x3:30}});Flickity.createMethods.push("_createPrevNextButtons");var proto$6=Flickity.prototype;proto$6._createPrevNextButtons=function(){if(!this.options.prevNextButtons){return}this.prevButton=new PrevNextButton(-1,this);this.nextButton=new PrevNextButton(1,this);this.on("activate",this.activatePrevNextButtons)};proto$6.activatePrevNextButtons=function(){this.prevButton.activate();this.nextButton.activate();this.on("deactivate",this.deactivatePrevNextButtons)};proto$6.deactivatePrevNextButtons=function(){this.prevButton.deactivate();this.nextButton.deactivate();this.off("deactivate",this.deactivatePrevNextButtons)};Flickity.PrevNextButton=PrevNextButton;function PageDots(t){this.parent=t;this.parentElement=this.parent.element.shadowRoot||this.parent.element;this._create()}PageDots.prototype=Object.create(unipointer.prototype);PageDots.prototype._create=function(){this.holder=document.createElement("ol");this.holder.className="flickity-page-dots";this.dots=[];this.handleClick=this.onClick.bind(this);this.on("pointerDown",this.parent.childUIPointerDown.bind(this.parent))};PageDots.prototype.activate=function(){this.setDots();this.holder.addEventListener("click",this.handleClick);this.bindStartEvent(this.holder);this.parentElement.appendChild(this.holder)};PageDots.prototype.deactivate=function(){this.holder.removeEventListener("click",this.handleClick);this.unbindStartEvent(this.holder);this.parentElement.removeChild(this.holder)};PageDots.prototype.setDots=function(){var t=this.parent.slides.length-this.dots.length;if(t>0){this.addDots(t)}else if(t<0){this.removeDots(-t)}};PageDots.prototype.addDots=function(t){var e=document.createDocumentFragment();var i=[];var n=this.dots.length;var s=n+t;for(var r=n;r<s;r++){var o=document.createElement("li");o.classList.add("dot");o.setAttribute("aria-label","Page dot "+(r+1));e.appendChild(o);i.push(o)}this.holder.appendChild(e);this.dots=this.dots.concat(i)};PageDots.prototype.removeDots=function(t){var e=this.dots.splice(this.dots.length-t,t);e.forEach((function(t){this.holder.removeChild(t)}),this)};PageDots.prototype.updateSelected=function(){if(this.selectedDot){this.selectedDot.classList.remove("is-selected");this.selectedDot.removeAttribute("aria-current")}if(!this.dots.length){return}this.selectedDot=this.dots[this.parent.selectedIndex];this.selectedDot.classList.add("is-selected");this.selectedDot.setAttribute("aria-current","step")};PageDots.prototype.onTap=PageDots.prototype.onClick=function(t){var e=t.target;if(e.nodeName!="LI"){return}this.parent.uiChange();var i=this.dots.indexOf(e);this.parent.select(i)};PageDots.prototype.destroy=function(){this.deactivate();this.allOff()};Flickity.PageDots=PageDots;utils.extend(Flickity.defaults,{pageDots:true});Flickity.createMethods.push("_createPageDots");var proto$5=Flickity.prototype;proto$5._createPageDots=function(){if(!this.options.pageDots){return}this.pageDots=new PageDots(this);this.on("activate",this.activatePageDots);this.on("select",this.updateSelectedPageDots);this.on("cellChange",this.updatePageDots);this.on("resize",this.updatePageDots);this.on("deactivate",this.deactivatePageDots)};proto$5.activatePageDots=function(){this.pageDots.activate()};proto$5.updateSelectedPageDots=function(){this.pageDots.updateSelected()};proto$5.updatePageDots=function(){this.pageDots.setDots()};proto$5.deactivatePageDots=function(){this.pageDots.deactivate()};Flickity.PageDots=PageDots;function Player(t){this.parent=t;this.state="stopped";this.onVisibilityChange=this.visibilityChange.bind(this);this.onVisibilityPlay=this.visibilityPlay.bind(this)}Player.prototype=Object.create(evEmitter.prototype);Player.prototype.play=function(){if(this.state=="playing"){return}var t=document.hidden;if(t){document.addEventListener("visibilitychange",this.onVisibilityPlay);return}this.state="playing";document.addEventListener("visibilitychange",this.onVisibilityChange);this.tick()};Player.prototype.tick=function(){if(this.state!="playing"){return}var t=this.parent.options.autoPlay;t=typeof t=="number"?t:3e3;var e=this;this.clear();this.timeout=setTimeout((function(){e.parent.next(true);e.tick()}),t)};Player.prototype.stop=function(){this.state="stopped";this.clear();document.removeEventListener("visibilitychange",this.onVisibilityChange)};Player.prototype.clear=function(){clearTimeout(this.timeout)};Player.prototype.pause=function(){if(this.state=="playing"){this.state="paused";this.clear()}};Player.prototype.unpause=function(){if(this.state=="paused"){this.play()}};Player.prototype.visibilityChange=function(){var t=document.hidden;this[t?"pause":"unpause"]()};Player.prototype.visibilityPlay=function(){this.play();document.removeEventListener("visibilitychange",this.onVisibilityPlay)};utils.extend(Flickity.defaults,{pauseAutoPlayOnHover:true});Flickity.createMethods.push("_createPlayer");var proto$4=Flickity.prototype;proto$4._createPlayer=function(){this.player=new Player(this);this.on("activate",this.activatePlayer);this.on("uiChange",this.stopPlayer);this.on("pointerDown",this.stopPlayer);this.on("deactivate",this.deactivatePlayer)};proto$4.activatePlayer=function(){if(!this.options.autoPlay){return}this.player.play();this.element.addEventListener("mouseenter",this)};proto$4.playPlayer=function(){this.player.play()};proto$4.stopPlayer=function(){this.player.stop()};proto$4.pausePlayer=function(){this.player.pause()};proto$4.unpausePlayer=function(){this.player.unpause()};proto$4.deactivatePlayer=function(){this.player.stop();this.element.removeEventListener("mouseenter",this)};proto$4.onmouseenter=function(){if(!this.options.pauseAutoPlayOnHover){return}this.player.pause();this.element.addEventListener("mouseleave",this)};proto$4.onmouseleave=function(){this.player.unpause();this.element.removeEventListener("mouseleave",this)};Flickity.Player=Player;function getCellsFragment(t){var e=document.createDocumentFragment();t.forEach((function(t){e.appendChild(t.element)}));return e}var proto$3=Flickity.prototype;proto$3.insert=function(t,e){var i=this._makeCells(t);if(!i||!i.length){return}var n=this.cells.length;e=e===undefined?n:e;var s=getCellsFragment(i);var r=e==n;if(r){this.slider.appendChild(s)}else{var o=this.cells[e].element;this.slider.insertBefore(s,o)}if(e===0){this.cells=i.concat(this.cells)}else if(r){this.cells=this.cells.concat(i)}else{var a=this.cells.splice(e,n-e);this.cells=this.cells.concat(i).concat(a)}this._sizeCells(i);this.cellChange(e,true)};proto$3.append=function(t){this.insert(t,this.cells.length)};proto$3.prepend=function(t){this.insert(t,0)};proto$3.remove=function(t){var e=this.getCells(t);if(!e||!e.length){return}var i=this.cells.length-1;e.forEach((function(t){t.remove();var e=this.cells.indexOf(t);i=Math.min(e,i);utils.removeFrom(this.cells,t)}),this);this.cellChange(i,true)};proto$3.cellSizeChange=function(t){var e=this.getCell(t);if(!e){return}e.getSize();var i=this.cells.indexOf(e);this.cellChange(i)};proto$3.cellChange=function(t,e){var i=this.selectedElement;this._positionCells(t);this._getWrapShiftCells();this.setGallerySize();var n=this.getCell(i);if(n){this.selectedIndex=this.getCellSlideIndex(n)}this.selectedIndex=Math.min(this.slides.length-1,this.selectedIndex);this.emitEvent("cellChange",[t]);this.select(this.selectedIndex);if(e){this.positionSliderAtSelected()}};Flickity.createMethods.push("_createLazyload");var proto$2=Flickity.prototype;proto$2._createLazyload=function(){this.on("select",this.lazyLoad)};proto$2.lazyLoad=function(){var t=this.options.lazyLoad;if(!t){return}var e=typeof t=="number"?t:0;var i=this.getAdjacentCellElements(e);var n=[];i.forEach((function(t){var e=getCellLazyImages(t);n=n.concat(e)}));n.forEach((function(t){new LazyLoader(t,this)}),this)};function getCellLazyImages(t){if(t.nodeName=="IMG"){var e=t.getAttribute("data-flickity-lazyload");var i=t.getAttribute("data-flickity-lazyload-src");var n=t.getAttribute("data-flickity-lazyload-srcset");if(e||i||n){return[t]}}var s="img[data-flickity-lazyload], "+"img[data-flickity-lazyload-src], img[data-flickity-lazyload-srcset]";var r=t.querySelectorAll(s);return utils.makeArray(r)}function LazyLoader(t,e){this.img=t;this.flickity=e;this.load()}LazyLoader.prototype.handleEvent=utils.handleEvent;LazyLoader.prototype.load=function(){this.img.addEventListener("load",this);this.img.addEventListener("error",this);var t=this.img.getAttribute("data-flickity-lazyload")||this.img.getAttribute("data-flickity-lazyload-src");var e=this.img.getAttribute("data-flickity-lazyload-srcset");this.img.src=t;if(e){this.img.setAttribute("srcset",e)}this.img.removeAttribute("data-flickity-lazyload");this.img.removeAttribute("data-flickity-lazyload-src");this.img.removeAttribute("data-flickity-lazyload-srcset")};LazyLoader.prototype.onload=function(t){this.complete(t,"flickity-lazyloaded")};LazyLoader.prototype.onerror=function(t){this.complete(t,"flickity-lazyerror")};LazyLoader.prototype.complete=function(t,e){this.img.removeEventListener("load",this);this.img.removeEventListener("error",this);var i=this.flickity.getParentCell(this.img);var n=i&&i.element;this.flickity.cellSizeChange(n);this.img.classList.add(e);this.flickity.dispatchEvent("lazyLoad",t,n)};Flickity.LazyLoader=LazyLoader;Flickity.createMethods.push("_createFullscreen");var proto$1=Flickity.prototype;proto$1._createFullscreen=function(){this.isFullscreen=false;if(!this.options.fullscreen){return}this.viewFullscreenButton=new FullscreenButton("view",this);this.exitFullscreenButton=new FullscreenButton("exit",this);this.on("activate",this._changeFullscreenActive);this.on("deactivate",this._changeFullscreenActive)};proto$1._changeFullscreenActive=function(){var t=this.isActive?"appendChild":"removeChild";this.element[t](this.viewFullscreenButton.element);this.element[t](this.exitFullscreenButton.element);var e=this.isActive?"activate":"deactivate";this.viewFullscreenButton[e]();this.exitFullscreenButton[e]()};proto$1.viewFullscreen=function(){this._changeFullscreen(true);this.focus()};proto$1.exitFullscreen=function(){this._changeFullscreen(false)};proto$1._changeFullscreen=function(t){if(this.isFullscreen==t){return}this.isFullscreen=t;var e=t?"add":"remove";document.documentElement.classList[e]("is-flickity-fullscreen");this.element.classList[e]("is-fullscreen");this.resize();if(this.isFullscreen){this.reposition()}this.dispatchEvent("fullscreenChange",null,[t])};proto$1.toggleFullscreen=function(){this._changeFullscreen(!this.isFullscreen)};var setGallerySize=proto$1.setGallerySize;proto$1.setGallerySize=function(){if(!this.options.setGallerySize){return}if(this.isFullscreen){this.viewport.style.height=""}else{setGallerySize.call(this)}};Flickity.keyboardHandlers[27]=function(){this.exitFullscreen()};function FullscreenButton(t,e){this.name=t;this.createButton();this.createIcon();this.onClick=function(){e[t+"Fullscreen"]()};this.clickHandler=this.onClick.bind(this)}FullscreenButton.prototype.createButton=function(){var t=this.element=document.createElement("button");t.className="flickity-button flickity-fullscreen-button "+"flickity-fullscreen-button-"+this.name;t.setAttribute("type","button");var e=capitalize(this.name+" full-screen");t.setAttribute("aria-label",e);t.title=e};function capitalize(t){return t[0].toUpperCase()+t.slice(1)}var svgURI="http://www.w3.org/2000/svg";var pathDirections={view:"M15,20,7,28h5v4H0V20H4v5l8-8Zm5-5,8-8v5h4V0H20V4h5l-8,8Z",exit:"M32,3l-7,7h5v4H18V2h4V7l7-7ZM3,32l7-7v5h4V18H2v4H7L0,29Z"};FullscreenButton.prototype.createIcon=function(){var t=document.createElementNS(svgURI,"svg");t.setAttribute("class","flickity-button-icon");t.setAttribute("viewBox","0 0 32 32");var e=document.createElementNS(svgURI,"path");var i=pathDirections[this.name];e.setAttribute("d",i);t.appendChild(e);this.element.appendChild(t)};FullscreenButton.prototype.activate=function(){this.element.addEventListener("click",this.clickHandler)};FullscreenButton.prototype.deactivate=function(){this.element.removeEventListener("click",this.clickHandler)};Flickity.FullscreenButton=FullscreenButton;var Slide=Flickity.Slide;var slideUpdateTarget=Slide.prototype.updateTarget;Slide.prototype.updateTarget=function(){slideUpdateTarget.apply(this,arguments);if(!this.parent.options.fade){return}var t=this.target-this.x;var e=this.cells[0].x;this.cells.forEach((function(i){var n=i.x-e-t;i.renderPosition(n)}))};Slide.prototype.setOpacity=function(t){this.cells.forEach((function(e){e.element.style.opacity=t}))};var proto=Flickity.prototype;Flickity.createMethods.push("_createFade");proto._createFade=function(){this.fadeIndex=this.selectedIndex;this.prevSelectedIndex=this.selectedIndex;this.on("select",this.onSelectFade);this.on("dragEnd",this.onDragEndFade);this.on("settle",this.onSettleFade);this.on("activate",this.onActivateFade);this.on("deactivate",this.onDeactivateFade)};var updateSlides=proto.updateSlides;proto.updateSlides=function(){updateSlides.apply(this,arguments);if(!this.options.fade){return}this.slides.forEach((function(t,e){var i=e==this.selectedIndex?1:0;t.setOpacity(i)}),this)};proto.onSelectFade=function(){this.fadeIndex=Math.min(this.prevSelectedIndex,this.slides.length-1);this.prevSelectedIndex=this.selectedIndex};proto.onSettleFade=function(){delete this.didDragEnd;if(!this.options.fade){return}this.selectedSlide.setOpacity(1);var t=this.slides[this.fadeIndex];if(t&&this.fadeIndex!=this.selectedIndex){this.slides[this.fadeIndex].setOpacity(0)}};proto.onDragEndFade=function(){this.didDragEnd=true};proto.onActivateFade=function(){if(this.options.fade){this.element.classList.add("is-fade")}};proto.onDeactivateFade=function(){if(!this.options.fade){return}this.element.classList.remove("is-fade");this.slides.forEach((function(t){t.setOpacity("")}))};var positionSlider=proto.positionSlider;proto.positionSlider=function(){if(!this.options.fade){positionSlider.apply(this,arguments);return}this.fadeSlides();this.dispatchScrollEvent()};var positionSliderAtSelected=proto.positionSliderAtSelected;proto.positionSliderAtSelected=function(){if(this.options.fade){this.setTranslateX(0)}positionSliderAtSelected.apply(this,arguments)};proto.fadeSlides=function(){if(this.slides.length<2){return}var t=this.getFadeIndexes();var e=this.slides[t.a];var i=this.slides[t.b];var n=this.wrapDifference(e.target,i.target);var s=this.wrapDifference(e.target,-this.x);s=s/n;e.setOpacity(1-s);i.setOpacity(s);var r=t.a;if(this.isDragging){r=s>.5?t.a:t.b}var o=this.fadeHideIndex!=undefined&&this.fadeHideIndex!=r&&this.fadeHideIndex!=t.a&&this.fadeHideIndex!=t.b;if(o){this.slides[this.fadeHideIndex].setOpacity(0)}this.fadeHideIndex=r};proto.getFadeIndexes=function(){if(!this.isDragging&&!this.didDragEnd){return{a:this.fadeIndex,b:this.selectedIndex}}if(this.options.wrapAround){return this.getFadeDragWrapIndexes()}else{return this.getFadeDragLimitIndexes()}};proto.getFadeDragWrapIndexes=function(){var t=this.slides.map((function(t,e){return this.getSlideDistance(-this.x,e)}),this);var e=t.map((function(t){return Math.abs(t)}));var i=Math.min.apply(Math,e);var n=e.indexOf(i);var s=t[n];var r=this.slides.length;var o=s>=0?1:-1;return{a:n,b:utils.modulo(n+o,r)}};proto.getFadeDragLimitIndexes=function(){var t=0;for(var e=0;e<this.slides.length-1;e++){var i=this.slides[e];if(-this.x<i.target){break}t=e}return{a:t,b:t+1}};proto.wrapDifference=function(t,e){var i=e-t;if(!this.options.wrapAround){return i}var n=i+this.slideableWidth;var s=i-this.slideableWidth;if(Math.abs(n)<Math.abs(i)){i=n}if(Math.abs(s)<Math.abs(i)){i=s}return i};var _getWrapShiftCells=proto._getWrapShiftCells;proto._getWrapShiftCells=function(){if(!this.options.fade){_getWrapShiftCells.apply(this,arguments)}};var shiftWrapCells=proto.shiftWrapCells;proto.shiftWrapCells=function(){if(!this.options.fade){shiftWrapCells.apply(this,arguments)}};var flickity=Flickity;var slidesCss=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--dot-color:#ccc;--dot-color-active:var(--nano-color-primary, #007495);--navbtns-icon-color:var(--dot-color-active);--navbtns-bg-color:white;--navbtns-icon-color-disabled:var(--dot-color-active);--navbtns-bg-color-disabled:white;--fsbtn-icon-color:var(--dot-color-active);--fsbtn-bg-color:white;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-transition:opacity 0.2s;transition:opacity 0.2s;opacity:0}:host([ready]){opacity:1}.slideshow{height:100%;position:relative}.flickity-container{height:0;opacity:0;-webkit-transition:opacity 0.2s;transition:opacity 0.2s}.flickity-container.slides-ready{height:100%}[hidden]{display:none !important}.ui-extras{pointer-events:none;position:absolute;height:100%;width:100%;top:0;left:0}.ui-extras *{pointer-events:all}/*! Flickity v2.2.1\nhttps://flickity.metafizzy.co\n---------------------------------------------- */.flickity-enabled{position:relative;opacity:1}.flickity-enabled:focus{outline:none}.flickity-viewport{overflow:hidden;position:relative;height:100% !important}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;background:var(--navbtns-bg-color);border:none;color:#333;opacity:0.75}.flickity-button:hover{opacity:1;cursor:pointer}.flickity-button:focus{outline:none;-webkit-box-shadow:0 0 0 5px #19f;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:0.6}.flickity-button:disabled{opacity:0.3;cursor:auto;pointer-events:none;background:var(--navbtns-bg-color-disabled)}.flickity-button-icon{fill:var(--navbtns-icon-color)}.flickity-button:disabled .flickity-button-icon{fill:var(--navbtns-icon-color-disabled)}.flickity-prev-next-button{top:50%;width:44px;height:44px;border-radius:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-page-dots{position:absolute;width:100%;bottom:10px;padding:0;margin:0;list-style:none;text-align:center;line-height:1;z-index:4}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;border-radius:50%;cursor:pointer;background:var(--dot-color)}.flickity-page-dots .dot.is-selected{opacity:1;background:var(--dot-color-active)}.flickity-enabled.is-fullscreen{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.9);padding-bottom:35px;z-index:100}.flickity-enabled.is-fullscreen .flickity-page-dots{bottom:45px}html.is-flickity-fullscreen{overflow:hidden}.flickity-fullscreen-button{display:block;right:10px;top:10px;width:24px;height:24px;border-radius:4px;background:var(--fsbtn-bg-color);fill:var(--fsbtn-icon-color)}.flickity-rtl .flickity-fullscreen-button{right:auto;left:10px}.flickity-fullscreen-button-exit{display:none}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit{display:block}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view{display:none}.flickity-fullscreen-button .flickity-button-icon{position:absolute;width:16px;height:16px;left:4px;top:4px}.flickity-enabled.is-fade .flickity-slider>*{pointer-events:none;z-index:0}.flickity-enabled.is-fade .flickity-slider ::slotted(.is-selected){pointer-events:auto;z-index:1}";var CANSHADOW=!!document.head.attachShadow;var Slides=function(){function t(t){var e=this;registerInstance(this,t);this.nanoSlidesDidLoad=createEvent(this,"nanoSlidesDidLoad",7);this.nanoSlidesReady=createEvent(this,"nanoSlidesReady",7);this.nanoSlidesSelect=createEvent(this,"nanoSlidesSelect",7);this.nanoSlidesChange=createEvent(this,"nanoSlidesChange",7);this.nanoSlidesScroll=createEvent(this,"nanoSlidesScroll",7);this.nanoSlidesTransitionEnd=createEvent(this,"nanoSlidesTransitionEnd",7);this.nanoSlidesDragStart=createEvent(this,"nanoSlidesDragStart",7);this.nanoSlidesDragMove=createEvent(this,"nanoSlidesDragMove",7);this.nanoSlidesDragEnd=createEvent(this,"nanoSlidesDragEnd",7);this.nanoSlidesTap=createEvent(this,"nanoSlidesTap",7);this.nanoSlidesFullscreenChange=createEvent(this,"nanoSlidesFullscreenChange",7);this.flickityReady=false;this.flickity=new Promise((function(t){e.readyflickity=t}));this.didInit=false;this.options={};this.navbtns=false;this.pager=false;this.fullscreenbtn=false;this.fullscreen=false;this.animation="scroll";this.currentSlide=0;this.autoplay=false;this.ready=false;this.parralax=function(){return __awaiter(e,void 0,void 0,(function(){var t;var e=this;return __generator(this,(function(i){switch(i.label){case 0:return[4,this.flickity];case 1:t=i.sent();t.slides.forEach((function(i,n){var s=e.childrenEles[n];var r=(i.target+t.x)*-1/3;s.style["transform"]="translateX("+r+"px)"}));return[2]}}))}))};this.handleFullscreen=function(t){e.fullscreen=t;e.nanoSlidesFullscreenChange.emit(t)};this.handleSlideSelect=function(t){e.iCurrentSlide=t;e.nanoSlidesSelect.emit(t)}}t.prototype.optionsChanged=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:if(!this.flickityReady)return[3,3];return[4,this.getflickity()];case 1:t=e.sent();Object.assign(t.options,this.options);return[4,this.update()];case 2:e.sent();e.label=3;case 3:return[2]}}))}))};t.prototype.navbtnsChanged=function(){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(e){Array.from(this._getRoot().querySelectorAll(".flickity-prev-next-button")).forEach((function(e){e.hidden=!t.navbtns}));return[2]}))}))};t.prototype.pagerChanged=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){t=this._getRoot().querySelector(".flickity-page-dots");t.hidden=!this.pager;return[2]}))}))};t.prototype.fullscreenBtnChanged=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){t=this._getRoot().querySelector(".flickity-fullscreen-button");t.hidden=!this.fullscreenbtn;return[2]}))}))};t.prototype.fullscreenChanged=function(t,e){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(i){switch(i.label){case 0:return[4,this.getflickity()];case 1:t=i.sent();if(this.fullscreen)t.viewFullscreen();else if(typeof e!=="undefined")t.exitFullscreen();return[2]}}))}))};t.prototype.animationChange=function(t,e){return __awaiter(this,void 0,void 0,(function(){var t,i,n;var s=this;return __generator(this,(function(r){switch(r.label){case 0:return[4,Promise.all([this.getflickity(),waitForSlides(this.host)])];case 1:t=r.sent(),i=t[0],n=t[1];n.forEach((function(t){t.style["left"]=undefined}));if(e==="parallax"){i.off("scroll",this.parralax);n.forEach((function(t,e){if(s.childrenEles&&s.childrenEles[e])s.childrenEles[e].style["transform"]=undefined}));this.update()}switch(this.animation){case"fade":this.options={fade:true,percentPosition:true};break;case"parallax":this.options={fade:false,percentPosition:false};i.on("scroll",this.parralax);break;default:this.options={fade:false,percentPosition:true};break}return[2]}}))}))};t.prototype.currentSlideChange=function(){if(this.currentSlide!==this.iCurrentSlide)this.slideTo(this.currentSlide)};t.prototype.internalSlideChange=function(){this.currentSlide=this.iCurrentSlide};t.prototype.autoPlayChange=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,this.stopAutoplay()];case 1:t.sent();if(this.autoplay){if(typeof this.autoplay==="string")this.autoplay=parseInt(this.autoplay);if(this.autoplay>0)this.startAutoplay(this.autoplay)}return[2]}}))}))};t.prototype.update=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:return[4,Promise.all([this.getflickity(),waitForSlides(this.host)])];case 1:t=e.sent()[0];this.childrenEles=this.host.querySelectorAll("nano-slide > *");t.reloadCells();t.resize();t.reposition();return[2]}}))}))};t.prototype.updateAutoHeight=function(t){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(i){e=document.querySelector(".flickity-viewport");if(e)e.style.transition=t+"ms";return[2]}))}))};t.prototype.slideTo=function(t,e){return __awaiter(this,void 0,void 0,(function(){var i;return __generator(this,(function(n){switch(n.label){case 0:return[4,this.getflickity()];case 1:i=n.sent();i.select(t,e);return[2]}}))}))};t.prototype.slideNext=function(t,e){return __awaiter(this,void 0,void 0,(function(){var i;return __generator(this,(function(n){switch(n.label){case 0:return[4,this.getflickity()];case 1:i=n.sent();i.next(e,t);return[2]}}))}))};t.prototype.slidePrev=function(t,e){return __awaiter(this,void 0,void 0,(function(){var i;return __generator(this,(function(n){switch(n.label){case 0:return[4,this.getflickity()];case 1:i=n.sent();i.previous(t,e);return[2]}}))}))};t.prototype.getActiveIndex=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:return[4,this.getflickity()];case 1:t=e.sent();return[2,t.selectedIndex]}}))}))};t.prototype.length=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:return[4,this.getflickity()];case 1:t=e.sent();return[2,t.slides.length]}}))}))};t.prototype.isEnd=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:return[4,this.getflickity()];case 1:t=e.sent();return[2,t.selectedIndex===t.slides.length-1]}}))}))};t.prototype.isBeginning=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:return[4,this.getflickity()];case 1:t=e.sent();return[2,t.selectedIndex===0]}}))}))};t.prototype.startAutoplay=function(t){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(i){switch(i.label){case 0:return[4,this.getflickity()];case 1:e=i.sent();if(t)this.options={autoPlay:t};setTimeout((function(){return e.playPlayer()}));return[2]}}))}))};t.prototype.stopAutoplay=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:return[4,this.getflickity()];case 1:t=e.sent();t.stopPlayer();return[2]}}))}))};t.prototype.lockSwipes=function(t){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(i){switch(i.label){case 0:return[4,this.getflickity()];case 1:e=i.sent();e.options.draggable=!t;e.updateDraggable();return[2]}}))}))};t.prototype.getflickity=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.flickity]}))}))};t.prototype.reload=function(){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(e){this.destroyflickity();setTimeout((function(){return t.initflickity()}),20);return[2]}))}))};t.prototype._getRoot=function(){return this.host.shadowRoot?this.host.shadowRoot:this.host};t.prototype._fixClassNames=function(){var t=this.slideShowEle.className.split(" ").filter((function(t){return t.match(/^sc-nano/)}));var e=this._getRoot().querySelectorAll("*");if(!e)return;Array.from(e).map((function(e){t.map((function(t){return e.classList.add(t)}))}))};t.prototype.destroyflickity=function(){var t=this;var e=this.syncflickity;if(e!==undefined){e.destroy();this.flickity=new Promise((function(e){t.readyflickity=e}));this.flickityReady=false;this.syncflickity=undefined;this.ready=false}this.didInit=false};t.prototype.initflickity=function(){return __awaiter(this,void 0,void 0,(function(){var t;var e=this;return __generator(this,(function(i){switch(i.label){case 0:t=this.normalizeOptions();return[4,waitForSlides(this.host)];case 1:i.sent();this.slidesReady=true;this.flickityEl=this.flickityEl||this._getRoot().querySelector(".flickity-container");if(this.flickityEl.classList.contains("flickity-enabled"))this.destroyflickity();setTimeout((function(){var i=new flickity(e.flickityEl,t);e.flickityReady=true;if(!e.host.shadowRoot||!CANSHADOW)e._fixClassNames();e.syncflickity=i;e.animationChange();e.navbtnsChanged();e.pagerChanged();e.fullscreenChanged();e.fullscreenBtnChanged();e.readyflickity(i);e.ready=true;if(!e.host.getBoundingClientRect().height){var n=e.resizeO=new ResizeObserver((function(){i.resize();e.resizeO.disconnect()}));n.observe(e.host)}}),100);return[2]}}))}))};t.prototype.normalizeOptions=function(){var t=this;var e={cellSelector:"nano-slide",contain:true,prevNextButtons:true,fullscreen:true,accessibility:true,imagesLoaded:true,pageDots:true};if(this.animation==="fade"){e.fade=true}if(this.currentSlide>0){e.initialIndex=this.currentSlide}if(this.autoplay){if(typeof this.autoplay==="string")this.autoplay=parseInt(this.autoplay);if(this.autoplay>0)e.autoPlay=this.autoplay}var i={ready:function(){setTimeout((function(){t.nanoSlidesReady.emit()}),20)},select:this.handleSlideSelect,change:this.nanoSlidesChange.emit,scroll:this.nanoSlidesScroll.emit,settle:this.nanoSlidesTransitionEnd.emit,dragStart:this.nanoSlidesDragStart.emit,dragMove:this.nanoSlidesDragMove.emit,dragEnd:this.nanoSlidesDragEnd.emit,staticClick:this.nanoSlidesTap.emit,fullscreenChange:this.handleFullscreen};var n=!!this.options&&!!this.options.on?this.options.on:{};var s={on:Object.assign(Object.assign({},n),i)};return Object.assign(Object.assign(Object.assign({},e),s),this.options)};t.prototype.componentDidLoad=function(){var t=this;if(typeof window!=="undefined"&&window.MutationObserver){var e=this.mutationO=new MutationObserver((function(e){if(e[0].addedNodes[0]&&e[0].addedNodes[0].nodeName.toLowerCase()==="nano-slide"&&t.flickityReady){t.update()}}));e.observe(this.host,{childList:true,subtree:true})}};t.prototype.componentWillLoad=function(){this.nanoSlidesDidLoad.emit();if(!this.didInit){this.didInit=true;this.initflickity()}};t.prototype.disconnectedCallback=function(){if(this.mutationO){this.mutationO.disconnect();this.mutationO=undefined}if(this.resizeO)this.resizeO.disconnect();this.destroyflickity()};t.prototype.render=function(){var t=this;return h(Host,null,h("div",{class:"slideshow",ref:function(e){return t.slideShowEle=e}},h("div",{ref:function(e){return t.flickityEl=e},class:{"flickity-container":true,"slides-ready":this.slidesReady,"slides-not-ready":!this.slidesReady}},h("slot",null)),h("div",{class:"ui-extras"},h("slot",{name:"ui"}))))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{options:["optionsChanged"],navbtns:["navbtnsChanged"],pager:["pagerChanged"],fullscreenbtn:["fullscreenBtnChanged"],fullscreen:["fullscreenChanged"],animation:["animationChange"],currentSlide:["currentSlideChange"],iCurrentSlide:["internalSlideChange"],autoplay:["autoPlayChange"]}},enumerable:false,configurable:true});return t}();var waitForSlides=function(t){var e=Array.from(t.querySelectorAll("nano-slide"));var i=e.filter((function(t){return!t.ready}));if(!i.length)return Promise.resolve(e);return new Promise((function(n){var s=function(r){i=i.filter((function(t){return t!==r.target}));if(!i.length){n(e);t.removeEventListener("nanoSlideReady",s)}};t.addEventListener("nanoSlideReady",s);t.addEventListener("nanoslideready",s)}))};Slides.style=slidesCss;export{Slides as nano_slides};
 //# sourceMappingURL=nano-slides.entry.js.map