npm - @nanoporetech-digital/components - Versions diffs - 3.13.0 → 4.0.0 - Mend

@nanoporetech-digital/components 3.13.0 → 4.0.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 (374) hide show

package/dist/collection/components/slides/slides.css CHANGED Viewed

@@ -51,13 +51,17 @@
   position: relative;
 }
 .slideshow.not-ready {
-  max-width: 100vw;
+  max-width: 98vw;
 }
 .flickity-container {
   opacity: 0;
   transition: opacity 0.2s;
   display: flex;
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
 }
 .not-ready .flickity-container {
   width: -moz-fit-content;

package/dist/collection/components/slides/slides.js CHANGED Viewed

@@ -283,6 +283,7 @@ export class Slides {
       this.flickityEl.classList.contains('flickity-enabled'))
       this.destroyflickity();
     setTimeout(() => {
+      this.flickityEl.style.height = '';
       const flick = new flickity(this.flickityEl, finalOptions);
       this.flickityReady = true;
       this.syncflickity = flick;
@@ -293,18 +294,14 @@ export class Slides {
       this.fullscreenBtnChanged();
       this.readyflickity(flick);
       this.ready = true;
-      this.flickityEl.style.height = '';
-      // the slideshow has been initialised without any dimensions - let's add a one shot
-      // resize observer to kick it off when it gets some dimensions
-      if (!this.host.getBoundingClientRect().height) {
-        if (!window['ResizeObserver'])
-          return;
-        const ro = (this.resizeO = new ResizeObserver(() => {
-          flick.resize();
-          this.resizeO.disconnect();
-        }));
-        ro.observe(this.host);
-      }
+      if (!window['ResizeObserver'])
+        return;
+      // just boots and brances to make sure it's the correct size oninit
+      const ro = (this.resizeO = new ResizeObserver(() => {
+        flick.resize();
+        // this.resizeO.disconnect();
+      }));
+      ro.observe(this.host);
     }, 100);
   }
   normalizeOptions() {

package/dist/collection/components/slides/slides.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"slides.js","sourceRoot":"","sources":["../../../src/components/slides/slides.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Prop,\n h,\n Host,\n Watch,\n Method,\n State,\n Build,\n} from '@stencil/core';\nimport { flickity } from './lib/js';\nimport type {\n FlickityOptions,\n FlickityEvents,\n Flickity,\n DragEvent,\n FlickitySlide,\n SlideAnimation,\n} from '../../interface';\n\n/*\n The Slides component is a multi-section container. Each section can be swiped or dragged between.\n * It contains any number of Slide components.\n \n Uses [Flickity](https://flickity.metafizzy.co/) under the hood.\n \n @slot - default slot of nano-slide components\n * @slot ui - An absolutely positioned element that will be placed over the slider. Any custom ui can be housed here.\n /\n@Component({\n tag: 'nano-slides',\n styleUrl: 'slides.scss',\n shadow: true,\n})\nexport class Slides implements ComponentInterface {\n private flickityEl: HTMLElement;\n private flickityReady = false;\n private mutationO?: MutationObserver;\n private resizeO?: ResizeObserver;\n private readyflickity!: (slider: Flickity) => void;\n private flickity: Promise<Flickity> = new Promise((resolve) => {\n this.readyflickity = resolve;\n });\n private syncflickity?: Flickity;\n private childrenEles: NodeList;\n\n @State() iCurrentSlide: number;\n @State() slidesReady: boolean;\n @State() didInit = false;\n\n @Element() host!: HTMLNanoSlidesElement;\n\n /\n Options to pass to the flickity instance.\n * See https://flickity.metafizzy.co/options.html for valid options\n /\n @Prop({ mutable: true }) options: FlickityOptions = {};\n\n @Watch('options')\n async optionsChanged() {\n if (this.flickityReady) {\n const flickity = await this.getflickity();\n Object.assign(flickity.options, this.options);\n await this.update();\n }\n }\n\n /\n If `true`, show the next / prev buttons.\n /\n @Prop() navbtns = false;\n\n @Watch('navbtns')\n async navbtnsChanged() {\n Array.from(\n this._getRoot().querySelectorAll('.flickity-prev-next-button')\n ).forEach((btn) => {\n (btn as HTMLElement).hidden = !this.navbtns;\n });\n }\n\n /\n If `true`, show the pagination.\n /\n @Prop() pager = false;\n\n @Watch('pager')\n async pagerChanged() {\n const dots = this._getRoot().querySelector(\n '.flickity-page-dots'\n ) as HTMLElement;\n dots.hidden = !this.pager;\n }\n\n /\n If `true`, show a fullscreen button.\n /\n @Prop() fullscreenbtn = false;\n\n @Watch('fullscreenbtn')\n async fullscreenBtnChanged() {\n const btn = this._getRoot().querySelector(\n '.flickity-fullscreen-button'\n ) as HTMLElement;\n btn.hidden = !this.fullscreenbtn;\n }\n\n /\n If `true`, make the slider fullscreen.\n /\n @Prop({ reflect: true, mutable: true }) fullscreen = false;\n\n @Watch('fullscreen')\n async fullscreenChanged(_?, oldFs?: boolean) {\n const flickity = await this.getflickity();\n if (this.fullscreen) flickity.viewFullscreen();\n else if (typeof oldFs !== 'undefined') flickity.exitFullscreen();\n }\n\n /\n Animation presets.\n /\n @Prop({ reflect: true }) animation: SlideAnimation = 'scroll';\n\n @Watch('animation')\n async animationChange(_?, oldAnim?: SlideAnimation) {\n const [flkty, slides] = await Promise.all([\n this.getflickity(),\n waitForSlides(this.host),\n ]);\n\n // clear old stuff\n slides.forEach((slide) => {\n slide.style['left'] = undefined;\n });\n\n if (oldAnim === 'parallax') {\n flkty.off('scroll', this.parralax);\n slides.forEach((_, i) => {\n if (this.childrenEles && this.childrenEles[i])\n (this.childrenEles[i] as HTMLElement).style['transform'] = undefined;\n });\n this.update();\n }\n\n // setup new stuff\n switch (this.animation) {\n case 'fade':\n this.options = { fade: true, percentPosition: true };\n break;\n case 'parallax':\n this.options = { fade: false, percentPosition: false };\n flkty.on('scroll', this.parralax);\n break;\n default:\n this.options = { fade: false, percentPosition: true };\n break;\n }\n }\n\n /\n Zero-based index of the selected cell.\n /\n @Prop({ reflect: true, mutable: true }) currentSlide: number = 0;\n\n @Watch('currentSlide')\n currentSlideChange() {\n if (this.currentSlide !== this.iCurrentSlide)\n this.slideTo(this.currentSlide);\n }\n\n @Watch('iCurrentSlide')\n internalSlideChange() {\n this.currentSlide = this.iCurrentSlide;\n }\n\n /\n time duration, in ms, to automatically advance slides\n /\n @Prop() autoplay: string \| false \| number = false;\n\n @Watch('autoplay')\n async autoPlayChange() {\n await this.stopAutoplay();\n if (this.autoplay) {\n if (typeof this.autoplay === 'string')\n this.autoplay = parseInt(this.autoplay);\n if (this.autoplay > 0) this.startAutoplay(this.autoplay as number);\n }\n }\n\n /\n @internal\n /\n @Prop({ reflect: true, mutable: true }) ready = false;\n\n /\n Emitted after component initialization\n /\n @Event() nanoSlidesDidLoad!: EventEmitter<void>;\n\n /\n Emitted after flickity initialization\n /\n @Event() nanoSlidesReady!: EventEmitter<void>;\n\n /\n Emitted when a slide is selected, even on the same slide\n /\n @Event() nanoSlidesSelect!: EventEmitter<number>;\n\n /\n Emitted when the selected slide is changed.\n /\n @Event() nanoSlidesChange!: EventEmitter<number>;\n\n /\n Emitted when the slider moves.\n /\n @Event() nanoSlidesScroll!: EventEmitter<number>;\n\n /\n Emitted when the slide transition has finished.\n /\n @Event() nanoSlidesTransitionEnd!: EventEmitter<number>;\n\n /\n Emitted when the slider starts actively being moved.\n /\n @Event() nanoSlidesDragStart!: EventEmitter<DragEvent>;\n\n /\n Emitted when the slider is being dragged.\n /\n @Event() nanoSlidesDragMove!: EventEmitter<DragEvent>;\n\n /\n Emitted when the slider has finished being dragged.\n /\n @Event() nanoSlidesDragEnd!: EventEmitter<DragEvent>;\n\n /\n Emitted when the user taps/clicks on the slide's container.\n /\n @Event() nanoSlidesTap!: EventEmitter<DragEvent>;\n\n /\n Emitted when the user taps/clicks on the slide's container.\n /\n @Event() nanoSlidesFullscreenChange!: EventEmitter<boolean>;\n\n /\n Update the underlying flickity implementation. Call this if you've added or removed\n * child slides.\n /\n @Method()\n async update() {\n const [flickity] = await Promise.all([\n this.getflickity(),\n waitForSlides(this.host),\n ]);\n this.childrenEles = this.host.querySelectorAll('nano-slide > ');\n flickity.reloadCells();\n flickity.resize();\n flickity.reposition();\n }\n\n /*\n Force flickity to update its height (when adaptiveHeight is enabled) for the duration\n * equal to 'speed' parameter.\n \n @param speed The transition duration (in ms).\n /\n @Method()\n async updateAutoHeight(speed?: number) {\n const vp = document.querySelector('.flickity-viewport') as HTMLElement;\n if (vp) vp.style.transition = speed + 'ms';\n }\n\n /\n Transition to the specified slide.\n \n @param index The index of the slide to transition to.\n * @param instant Immediately view the selected slide without animation.\n /\n @Method()\n async slideTo(index: number, instant?: boolean) {\n const flickity = await this.getflickity();\n flickity.select(index, instant);\n }\n\n /\n Transition to the next slide.\n \n @param instant The transition duration (in ms).\n * @param wrap If true, the first slide will be selected if at the last slide.\n /\n @Method()\n async slideNext(instant?: boolean, wrap?: boolean) {\n const flickity = await this.getflickity();\n flickity.next(wrap, instant);\n }\n\n /\n Transition to the previous slide.\n \n @param instant The transition duration (in ms).\n * @param wrap If true, the last slide will be selected if at the first slide.\n /\n @Method()\n async slidePrev(instant?: boolean, wrap?: boolean) {\n const flickity = await this.getflickity();\n flickity.previous(instant, wrap);\n }\n\n /\n Get the index of the active slide.\n /\n @Method()\n async getActiveIndex() {\n const flickity = await this.getflickity();\n return flickity.selectedIndex;\n }\n\n /\n Get the total number of slides.\n /\n @Method()\n async length() {\n const flickity = await this.getflickity();\n return flickity.slides.length;\n }\n\n /\n Get whether or not the current slide is the last slide.\n /\n @Method()\n async isEnd() {\n const flickity = await this.getflickity();\n return flickity.selectedIndex === flickity.slides.length - 1;\n }\n\n /\n Get whether or not the current slide is the first slide.\n /\n @Method()\n async isBeginning() {\n const flickity = await this.getflickity();\n return flickity.selectedIndex === 0;\n }\n\n /\n Start auto play.\n * @param time - optional time duration to show slides\n /\n @Method()\n async startAutoplay(time?: number) {\n const flickity = await this.getflickity();\n if (time) this.options = { autoPlay: time };\n setTimeout(() => flickity.playPlayer());\n }\n\n /\n Stop auto play.\n /\n @Method()\n async stopAutoplay() {\n const flickity = await this.getflickity();\n flickity.stopPlayer();\n }\n\n /\n Lock or unlock the ability to slide to the next slide.\n \n @param lock If `true`, disable swiping\n /\n @Method()\n async lockSwipes(lock: boolean) {\n const flickity = await this.getflickity();\n flickity.options.draggable = !lock;\n flickity.updateDraggable();\n }\n\n /\n Get the flickity instance.\n * Use this to access the full flickity API.\n * See https://flickity.metafizzy.co/ for all API options.\n /\n @Method()\n async getflickity() {\n return this.flickity;\n }\n\n /\n Hard destroy / create.\n * Certain flickity options, you will require the instance to be re-initialised\n /\n @Method()\n async reload() {\n this.destroyflickity();\n setTimeout(() => this.initflickity(), 20);\n }\n\n private _getRoot() {\n return this.host.shadowRoot ? this.host.shadowRoot : this.host;\n }\n\n private parralax = async () => {\n const flkty = await this.flickity;\n flkty.slides.forEach((slide: FlickitySlide, i) => {\n const ele = this.childrenEles[i] as HTMLElement;\n const x = ((slide.target + flkty.x) -1) / 3;\n ele.style['transform'] = 'translateX(' + x + 'px)';\n });\n };\n\n private handleFullscreen = (isFullScreen: boolean) => {\n this.fullscreen = isFullScreen;\n this.nanoSlidesFullscreenChange.emit(isFullScreen);\n };\n\n private handleSlideSelect = (slide: number) => {\n this.iCurrentSlide = slide;\n this.nanoSlidesSelect.emit(slide);\n };\n\n private destroyflickity() {\n /*\n We need to synchronously destroy\n * flickity otherwise it is possible\n * that it will be left in a\n * destroyed state if connectedCallback\n * is called multiple times\n */\n const flickity = this.syncflickity;\n\n if (flickity !== undefined) {\n flickity.destroy();\n this.flickity = new Promise((resolve) => {\n this.readyflickity = resolve;\n });\n this.flickityReady = false;\n this.syncflickity = undefined;\n this.ready = false;\n }\n this.didInit = false;\n }\n\n private async initflickity() {\n const finalOptions = this.normalizeOptions();\n\n // init flickity core\n await waitForSlides(this.host);\n\n this.flickityEl.style.height =\n this.flickityEl.getBoundingClientRect().height + 'px';\n this.slidesReady = true;\n\n this.flickityEl =\n this.flickityEl \|\| this._getRoot().querySelector('.flickity-container');\n if (\n this.flickityEl &&\n this.flickityEl.classList.contains('flickity-enabled')\n )\n this.destroyflickity();\n\n setTimeout(() => {\n const flick = new flickity(this.flickityEl, finalOptions) as Flickity;\n this.flickityReady = true;\n\n this.syncflickity = flick;\n\n this.animationChange();\n this.navbtnsChanged();\n this.pagerChanged();\n this.fullscreenChanged();\n this.fullscreenBtnChanged();\n\n this.readyflickity(flick);\n this.ready = true;\n this.flickityEl.style.height = '';\n\n // the slideshow has been initialised without any dimensions - let's add a one shot\n // resize observer to kick it off when it gets some dimensions\n if (!this.host.getBoundingClientRect().height) {\n if (!window['ResizeObserver']) return;\n\n const ro = (this.resizeO = new ResizeObserver(() => {\n flick.resize();\n this.resizeO.disconnect();\n }));\n ro.observe(this.host);\n }\n }, 100);\n }\n\n private normalizeOptions(): FlickityOptions {\n // Base options, can be changed\n const flickityOptions: FlickityOptions = {\n cellSelector: 'nano-slide',\n contain: true,\n prevNextButtons: true,\n fullscreen: true,\n accessibility: true,\n imagesLoaded: true,\n pageDots: true,\n };\n\n if (this.animation === 'fade') {\n flickityOptions.fade = true;\n }\n if (this.currentSlide > 0) {\n flickityOptions.initialIndex = this.currentSlide;\n }\n if (this.autoplay) {\n if (typeof this.autoplay === 'string')\n this.autoplay = parseInt(this.autoplay);\n if (this.autoplay > 0) flickityOptions.autoPlay = this.autoplay as number;\n }\n\n // Keep the event options separate, we dont want users\n // overwriting these\n const eventOptions: FlickityEvents = {\n ready: () => {\n setTimeout(() => {\n this.nanoSlidesReady.emit();\n }, 20);\n },\n select: this.handleSlideSelect,\n change: this.nanoSlidesChange.emit,\n scroll: this.nanoSlidesScroll.emit,\n settle: this.nanoSlidesTransitionEnd.emit,\n dragStart: this.nanoSlidesDragStart.emit,\n dragMove: this.nanoSlidesDragMove.emit,\n dragEnd: this.nanoSlidesDragEnd.emit,\n staticClick: this.nanoSlidesTap.emit,\n fullscreenChange: this.handleFullscreen,\n };\n\n const customEvents =\n !!this.options && !!this.options.on ? this.options.on : {};\n // merge \"on\" event listeners, while giving our event listeners priority\n const mergedEventOptions = { on: { ...customEvents, ...eventOptions } };\n // Merge the base, user options, and events together then pass to flickity\n // @ts-ignore\n return { ...flickityOptions, ...mergedEventOptions, ...this.options };\n }\n\n componentDidLoad() {\n if (\n Build.isBrowser &&\n typeof window !== 'undefined' &&\n (window as any).MutationObserver\n ) {\n const mut = (this.mutationO = new MutationObserver(\n (e: MutationRecord[]) => {\n if (\n e[0].addedNodes[0] &&\n e[0].addedNodes[0].nodeName.toLowerCase() === 'nano-slide' &&\n this.flickityReady\n ) {\n this.update();\n }\n }\n ));\n\n mut.observe(this.host, {\n childList: true,\n subtree: true,\n });\n }\n }\n\n componentWillLoad() {\n this.nanoSlidesDidLoad.emit();\n\n if (!this.didInit) {\n this.didInit = true;\n this.initflickity();\n }\n }\n\n disconnectedCallback() {\n if (this.mutationO) {\n this.mutationO.disconnect();\n this.mutationO = undefined;\n }\n if (this.resizeO) this.resizeO.disconnect();\n this.destroyflickity();\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n slideshow: true,\n ready: this.ready,\n 'not-ready': !this.ready,\n }}\n >\n <div\n ref={(div) => (this.flickityEl = div)}\n class={{\n 'flickity-container': true,\n 'slides-ready': this.slidesReady,\n 'slides-not-ready': !this.slidesReady,\n }}\n >\n <slot />\n </div>\n <div class=\"ui-extras\">\n <slot name=\"ui\" />\n </div>\n </div>\n </Host>\n );\n }\n}\n\nconst waitForSlides = (host: HTMLElement): Promise<HTMLNanoSlideElement[]> => {\n const allSlides = Array.from(host.querySelectorAll('nano-slide'));\n let toLoadSlides = allSlides.filter(\n (ele: HTMLNanoSlideElement) => !ele.ready\n );\n\n if (!toLoadSlides.length) return Promise.resolve(allSlides);\n\n return new Promise((resolve) => {\n const slideResolver = (ev: CustomEvent) => {\n toLoadSlides = toLoadSlides.filter((ele) => ele !== ev.target);\n if (!toLoadSlides.length) {\n resolve(allSlides);\n host.removeEventListener('nanoSlideReady', slideResolver);\n }\n };\n host.addEventListener('nanoSlideReady', slideResolver);\n // fallback for vue who can't handle camelcase event names\n host.addEventListener('nano-slide-ready', slideResolver);\n });\n};\n"]}
1	+ {"version":3,"file":"slides.js","sourceRoot":"","sources":["../../../src/components/slides/slides.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Prop,\n h,\n Host,\n Watch,\n Method,\n State,\n Build,\n} from '@stencil/core';\nimport { flickity } from './lib/js';\nimport type {\n FlickityOptions,\n FlickityEvents,\n Flickity,\n DragEvent,\n FlickitySlide,\n SlideAnimation,\n} from '../../interface';\n\n/*\n The Slides component is a multi-section container. Each section can be swiped or dragged between.\n * It contains any number of Slide components.\n \n Uses [Flickity](https://flickity.metafizzy.co/) under the hood.\n \n @slot - default slot of nano-slide components\n * @slot ui - An absolutely positioned element that will be placed over the slider. Any custom ui can be housed here.\n /\n@Component({\n tag: 'nano-slides',\n styleUrl: 'slides.scss',\n shadow: true,\n})\nexport class Slides implements ComponentInterface {\n private flickityEl: HTMLElement;\n private flickityReady = false;\n private mutationO?: MutationObserver;\n private resizeO?: ResizeObserver;\n private readyflickity!: (slider: Flickity) => void;\n private flickity: Promise<Flickity> = new Promise((resolve) => {\n this.readyflickity = resolve;\n });\n private syncflickity?: Flickity;\n private childrenEles: NodeList;\n\n @State() iCurrentSlide: number;\n @State() slidesReady: boolean;\n @State() didInit = false;\n\n @Element() host!: HTMLNanoSlidesElement;\n\n /\n Options to pass to the flickity instance.\n * See https://flickity.metafizzy.co/options.html for valid options\n /\n @Prop({ mutable: true }) options: FlickityOptions = {};\n\n @Watch('options')\n async optionsChanged() {\n if (this.flickityReady) {\n const flickity = await this.getflickity();\n Object.assign(flickity.options, this.options);\n await this.update();\n }\n }\n\n /\n If `true`, show the next / prev buttons.\n /\n @Prop() navbtns = false;\n\n @Watch('navbtns')\n async navbtnsChanged() {\n Array.from(\n this._getRoot().querySelectorAll('.flickity-prev-next-button')\n ).forEach((btn) => {\n (btn as HTMLElement).hidden = !this.navbtns;\n });\n }\n\n /\n If `true`, show the pagination.\n /\n @Prop() pager = false;\n\n @Watch('pager')\n async pagerChanged() {\n const dots = this._getRoot().querySelector(\n '.flickity-page-dots'\n ) as HTMLElement;\n dots.hidden = !this.pager;\n }\n\n /\n If `true`, show a fullscreen button.\n /\n @Prop() fullscreenbtn = false;\n\n @Watch('fullscreenbtn')\n async fullscreenBtnChanged() {\n const btn = this._getRoot().querySelector(\n '.flickity-fullscreen-button'\n ) as HTMLElement;\n btn.hidden = !this.fullscreenbtn;\n }\n\n /\n If `true`, make the slider fullscreen.\n /\n @Prop({ reflect: true, mutable: true }) fullscreen = false;\n\n @Watch('fullscreen')\n async fullscreenChanged(_?, oldFs?: boolean) {\n const flickity = await this.getflickity();\n if (this.fullscreen) flickity.viewFullscreen();\n else if (typeof oldFs !== 'undefined') flickity.exitFullscreen();\n }\n\n /\n Animation presets.\n /\n @Prop({ reflect: true }) animation: SlideAnimation = 'scroll';\n\n @Watch('animation')\n async animationChange(_?, oldAnim?: SlideAnimation) {\n const [flkty, slides] = await Promise.all([\n this.getflickity(),\n waitForSlides(this.host),\n ]);\n\n // clear old stuff\n slides.forEach((slide) => {\n slide.style['left'] = undefined;\n });\n\n if (oldAnim === 'parallax') {\n flkty.off('scroll', this.parralax);\n slides.forEach((_, i) => {\n if (this.childrenEles && this.childrenEles[i])\n (this.childrenEles[i] as HTMLElement).style['transform'] = undefined;\n });\n this.update();\n }\n\n // setup new stuff\n switch (this.animation) {\n case 'fade':\n this.options = { fade: true, percentPosition: true };\n break;\n case 'parallax':\n this.options = { fade: false, percentPosition: false };\n flkty.on('scroll', this.parralax);\n break;\n default:\n this.options = { fade: false, percentPosition: true };\n break;\n }\n }\n\n /\n Zero-based index of the selected cell.\n /\n @Prop({ reflect: true, mutable: true }) currentSlide: number = 0;\n\n @Watch('currentSlide')\n currentSlideChange() {\n if (this.currentSlide !== this.iCurrentSlide)\n this.slideTo(this.currentSlide);\n }\n\n @Watch('iCurrentSlide')\n internalSlideChange() {\n this.currentSlide = this.iCurrentSlide;\n }\n\n /\n time duration, in ms, to automatically advance slides\n /\n @Prop() autoplay: string \| false \| number = false;\n\n @Watch('autoplay')\n async autoPlayChange() {\n await this.stopAutoplay();\n if (this.autoplay) {\n if (typeof this.autoplay === 'string')\n this.autoplay = parseInt(this.autoplay);\n if (this.autoplay > 0) this.startAutoplay(this.autoplay as number);\n }\n }\n\n /\n @internal\n /\n @Prop({ reflect: true, mutable: true }) ready = false;\n\n /\n Emitted after component initialization\n /\n @Event() nanoSlidesDidLoad!: EventEmitter<void>;\n\n /\n Emitted after flickity initialization\n /\n @Event() nanoSlidesReady!: EventEmitter<void>;\n\n /\n Emitted when a slide is selected, even on the same slide\n /\n @Event() nanoSlidesSelect!: EventEmitter<number>;\n\n /\n Emitted when the selected slide is changed.\n /\n @Event() nanoSlidesChange!: EventEmitter<number>;\n\n /\n Emitted when the slider moves.\n /\n @Event() nanoSlidesScroll!: EventEmitter<number>;\n\n /\n Emitted when the slide transition has finished.\n /\n @Event() nanoSlidesTransitionEnd!: EventEmitter<number>;\n\n /\n Emitted when the slider starts actively being moved.\n /\n @Event() nanoSlidesDragStart!: EventEmitter<DragEvent>;\n\n /\n Emitted when the slider is being dragged.\n /\n @Event() nanoSlidesDragMove!: EventEmitter<DragEvent>;\n\n /\n Emitted when the slider has finished being dragged.\n /\n @Event() nanoSlidesDragEnd!: EventEmitter<DragEvent>;\n\n /\n Emitted when the user taps/clicks on the slide's container.\n /\n @Event() nanoSlidesTap!: EventEmitter<DragEvent>;\n\n /\n Emitted when the user taps/clicks on the slide's container.\n /\n @Event() nanoSlidesFullscreenChange!: EventEmitter<boolean>;\n\n /\n Update the underlying flickity implementation. Call this if you've added or removed\n * child slides.\n /\n @Method()\n async update() {\n const [flickity] = await Promise.all([\n this.getflickity(),\n waitForSlides(this.host),\n ]);\n this.childrenEles = this.host.querySelectorAll('nano-slide > ');\n flickity.reloadCells();\n flickity.resize();\n flickity.reposition();\n }\n\n /*\n Force flickity to update its height (when adaptiveHeight is enabled) for the duration\n * equal to 'speed' parameter.\n \n @param speed The transition duration (in ms).\n /\n @Method()\n async updateAutoHeight(speed?: number) {\n const vp = document.querySelector('.flickity-viewport') as HTMLElement;\n if (vp) vp.style.transition = speed + 'ms';\n }\n\n /\n Transition to the specified slide.\n \n @param index The index of the slide to transition to.\n * @param instant Immediately view the selected slide without animation.\n /\n @Method()\n async slideTo(index: number, instant?: boolean) {\n const flickity = await this.getflickity();\n flickity.select(index, instant);\n }\n\n /\n Transition to the next slide.\n \n @param instant The transition duration (in ms).\n * @param wrap If true, the first slide will be selected if at the last slide.\n /\n @Method()\n async slideNext(instant?: boolean, wrap?: boolean) {\n const flickity = await this.getflickity();\n flickity.next(wrap, instant);\n }\n\n /\n Transition to the previous slide.\n \n @param instant The transition duration (in ms).\n * @param wrap If true, the last slide will be selected if at the first slide.\n /\n @Method()\n async slidePrev(instant?: boolean, wrap?: boolean) {\n const flickity = await this.getflickity();\n flickity.previous(instant, wrap);\n }\n\n /\n Get the index of the active slide.\n /\n @Method()\n async getActiveIndex() {\n const flickity = await this.getflickity();\n return flickity.selectedIndex;\n }\n\n /\n Get the total number of slides.\n /\n @Method()\n async length() {\n const flickity = await this.getflickity();\n return flickity.slides.length;\n }\n\n /\n Get whether or not the current slide is the last slide.\n /\n @Method()\n async isEnd() {\n const flickity = await this.getflickity();\n return flickity.selectedIndex === flickity.slides.length - 1;\n }\n\n /\n Get whether or not the current slide is the first slide.\n /\n @Method()\n async isBeginning() {\n const flickity = await this.getflickity();\n return flickity.selectedIndex === 0;\n }\n\n /\n Start auto play.\n * @param time - optional time duration to show slides\n /\n @Method()\n async startAutoplay(time?: number) {\n const flickity = await this.getflickity();\n if (time) this.options = { autoPlay: time };\n setTimeout(() => flickity.playPlayer());\n }\n\n /\n Stop auto play.\n /\n @Method()\n async stopAutoplay() {\n const flickity = await this.getflickity();\n flickity.stopPlayer();\n }\n\n /\n Lock or unlock the ability to slide to the next slide.\n \n @param lock If `true`, disable swiping\n /\n @Method()\n async lockSwipes(lock: boolean) {\n const flickity = await this.getflickity();\n flickity.options.draggable = !lock;\n flickity.updateDraggable();\n }\n\n /\n Get the flickity instance.\n * Use this to access the full flickity API.\n * See https://flickity.metafizzy.co/ for all API options.\n /\n @Method()\n async getflickity() {\n return this.flickity;\n }\n\n /\n Hard destroy / create.\n * Certain flickity options, you will require the instance to be re-initialised\n /\n @Method()\n async reload() {\n this.destroyflickity();\n setTimeout(() => this.initflickity(), 20);\n }\n\n private _getRoot() {\n return this.host.shadowRoot ? this.host.shadowRoot : this.host;\n }\n\n private parralax = async () => {\n const flkty = await this.flickity;\n flkty.slides.forEach((slide: FlickitySlide, i) => {\n const ele = this.childrenEles[i] as HTMLElement;\n const x = ((slide.target + flkty.x) -1) / 3;\n ele.style['transform'] = 'translateX(' + x + 'px)';\n });\n };\n\n private handleFullscreen = (isFullScreen: boolean) => {\n this.fullscreen = isFullScreen;\n this.nanoSlidesFullscreenChange.emit(isFullScreen);\n };\n\n private handleSlideSelect = (slide: number) => {\n this.iCurrentSlide = slide;\n this.nanoSlidesSelect.emit(slide);\n };\n\n private destroyflickity() {\n /*\n We need to synchronously destroy\n * flickity otherwise it is possible\n * that it will be left in a\n * destroyed state if connectedCallback\n * is called multiple times\n */\n const flickity = this.syncflickity;\n\n if (flickity !== undefined) {\n flickity.destroy();\n this.flickity = new Promise((resolve) => {\n this.readyflickity = resolve;\n });\n this.flickityReady = false;\n this.syncflickity = undefined;\n this.ready = false;\n }\n this.didInit = false;\n }\n\n private async initflickity() {\n const finalOptions = this.normalizeOptions();\n\n // init flickity core\n await waitForSlides(this.host);\n\n this.flickityEl.style.height =\n this.flickityEl.getBoundingClientRect().height + 'px';\n this.slidesReady = true;\n\n this.flickityEl =\n this.flickityEl \|\| this._getRoot().querySelector('.flickity-container');\n if (\n this.flickityEl &&\n this.flickityEl.classList.contains('flickity-enabled')\n )\n this.destroyflickity();\n\n setTimeout(() => {\n this.flickityEl.style.height = '';\n const flick = new flickity(this.flickityEl, finalOptions) as Flickity;\n this.flickityReady = true;\n this.syncflickity = flick;\n\n this.animationChange();\n this.navbtnsChanged();\n this.pagerChanged();\n this.fullscreenChanged();\n this.fullscreenBtnChanged();\n\n this.readyflickity(flick);\n this.ready = true;\n\n if (!window['ResizeObserver']) return;\n\n // just boots and brances to make sure it's the correct size oninit\n const ro = (this.resizeO = new ResizeObserver(() => {\n flick.resize();\n // this.resizeO.disconnect();\n }));\n ro.observe(this.host);\n }, 100);\n }\n\n private normalizeOptions(): FlickityOptions {\n // Base options, can be changed\n const flickityOptions: FlickityOptions = {\n cellSelector: 'nano-slide',\n contain: true,\n prevNextButtons: true,\n fullscreen: true,\n accessibility: true,\n imagesLoaded: true,\n pageDots: true,\n };\n\n if (this.animation === 'fade') {\n flickityOptions.fade = true;\n }\n if (this.currentSlide > 0) {\n flickityOptions.initialIndex = this.currentSlide;\n }\n if (this.autoplay) {\n if (typeof this.autoplay === 'string')\n this.autoplay = parseInt(this.autoplay);\n if (this.autoplay > 0) flickityOptions.autoPlay = this.autoplay as number;\n }\n\n // Keep the event options separate, we dont want users\n // overwriting these\n const eventOptions: FlickityEvents = {\n ready: () => {\n setTimeout(() => {\n this.nanoSlidesReady.emit();\n }, 20);\n },\n select: this.handleSlideSelect,\n change: this.nanoSlidesChange.emit,\n scroll: this.nanoSlidesScroll.emit,\n settle: this.nanoSlidesTransitionEnd.emit,\n dragStart: this.nanoSlidesDragStart.emit,\n dragMove: this.nanoSlidesDragMove.emit,\n dragEnd: this.nanoSlidesDragEnd.emit,\n staticClick: this.nanoSlidesTap.emit,\n fullscreenChange: this.handleFullscreen,\n };\n\n const customEvents =\n !!this.options && !!this.options.on ? this.options.on : {};\n // merge \"on\" event listeners, while giving our event listeners priority\n const mergedEventOptions = { on: { ...customEvents, ...eventOptions } };\n // Merge the base, user options, and events together then pass to flickity\n // @ts-ignore\n return { ...flickityOptions, ...mergedEventOptions, ...this.options };\n }\n\n componentDidLoad() {\n if (\n Build.isBrowser &&\n typeof window !== 'undefined' &&\n (window as any).MutationObserver\n ) {\n const mut = (this.mutationO = new MutationObserver(\n (e: MutationRecord[]) => {\n if (\n e[0].addedNodes[0] &&\n e[0].addedNodes[0].nodeName.toLowerCase() === 'nano-slide' &&\n this.flickityReady\n ) {\n this.update();\n }\n }\n ));\n\n mut.observe(this.host, {\n childList: true,\n subtree: true,\n });\n }\n }\n\n componentWillLoad() {\n this.nanoSlidesDidLoad.emit();\n\n if (!this.didInit) {\n this.didInit = true;\n this.initflickity();\n }\n }\n\n disconnectedCallback() {\n if (this.mutationO) {\n this.mutationO.disconnect();\n this.mutationO = undefined;\n }\n if (this.resizeO) this.resizeO.disconnect();\n this.destroyflickity();\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n slideshow: true,\n ready: this.ready,\n 'not-ready': !this.ready,\n }}\n >\n <div\n ref={(div) => (this.flickityEl = div)}\n class={{\n 'flickity-container': true,\n 'slides-ready': this.slidesReady,\n 'slides-not-ready': !this.slidesReady,\n }}\n >\n <slot />\n </div>\n <div class=\"ui-extras\">\n <slot name=\"ui\" />\n </div>\n </div>\n </Host>\n );\n }\n}\n\nconst waitForSlides = (host: HTMLElement): Promise<HTMLNanoSlideElement[]> => {\n const allSlides = Array.from(host.querySelectorAll('nano-slide'));\n let toLoadSlides = allSlides.filter(\n (ele: HTMLNanoSlideElement) => !ele.ready\n );\n\n if (!toLoadSlides.length) return Promise.resolve(allSlides);\n\n return new Promise((resolve) => {\n const slideResolver = (ev: CustomEvent) => {\n toLoadSlides = toLoadSlides.filter((ele) => ele !== ev.target);\n if (!toLoadSlides.length) {\n resolve(allSlides);\n host.removeEventListener('nanoSlideReady', slideResolver);\n }\n };\n host.addEventListener('nanoSlideReady', slideResolver);\n // fallback for vue who can't handle camelcase event names\n host.addEventListener('nano-slide-ready', slideResolver);\n });\n};\n"]}

package/dist/collection/components/spinner/spinner.css CHANGED Viewed

@@ -13,8 +13,8 @@
 :host {
   /**
    * @prop --base-color-rgb: default var(--nano-indicator-rgb, 84 140 175)
-   * @prop --indicator-color: default var(--nano-indicator-color, rgba(var(--base-color-rgb), 1));
-   * @prop --track-color: default var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));
+   * @prop --indicator-color: default var(--nano-indicator-color, rgb(var(--base-color-rgb) / 10%));
+   * @prop --track-color: default var(--nano-track-color, rgb(var(--base-color-rgb) / 20%));
    * @prop --spinner-scale: optional scaling of the spinner. default contextual font-size
    * @prop --overlay-color: var(--nano-layer-overlay-light, rgb(255 255 255 / 70%));
    */

package/dist/collection/components/tabs/tab.css CHANGED Viewed

@@ -16,9 +16,9 @@
   * @prop --padding: Defaults to .75rem 1rem on placement 'top' and 1rem on placement 'start';
   * @prop --bg-rgb: Defaults to var(--nano-layer-bg-rgb, 255 255 255);
-  * @prop --active-bg: Defaults to rgba(var(--bg-rgb), 1);
+  * @prop --active-bg: Defaults to rgb(var(--bg-rgb) / 10%);
   * @prop --disabled-bg-rgb: Defaults to var(--bg-rgb);
-  * @prop --inactive-bg: Defaults to rgba(var(--bg-rgb), 0.7);
+  * @prop --inactive-bg: Defaults to rgb(var(--bg-rgb) / 70%);
   * @prop --text-color: Defaults to #007495;
   * @prop --disabled-text-color: Defaults to #455556;
@@ -135,5 +135,5 @@
           margin-inline-start: var(--nano-spacing-small, 8px);
   -webkit-appearance: none !important;
           appearance: none !important;
-  --padding: var(--nano-spacing-xsmall, 4px) !important;
+  --padding: var(--nano-spacing-xsmall, 4px) 0 var(--nano-spacing-xsmall, 4px) var(--nano-spacing-xsmall, 4px) !important;
 }

package/dist/collection/utils/scroll.js CHANGED Viewed

@@ -55,17 +55,24 @@ export function scrollIntoView(element, container, direction = 'vertical', posit
       else if (offsetLeft + element.clientWidth > maxX)
         scrollTo(container, offsetLeft - container.offsetWidth + element.clientWidth);
     }
-    else
+    else {
       scrollTo(container, container.scrollLeft +
         offset.left -
-        container.offsetWidth / 2 +
-        element.offsetWidth / 2);
+        (container.offsetWidth / 2 + element.offsetWidth / 2));
+    }
   }
   if (direction === 'vertical' || direction === 'both') {
-    if (offsetTop < minY)
-      scrollTo(container, offsetTop, true);
-    else if (offsetTop + element.clientHeight > maxY) {
-      scrollTo(container, offsetTop - container.offsetHeight + element.clientHeight, true);
+    if (position === 'start') {
+      if (offsetTop < minY)
+        scrollTo(container, offsetTop, true);
+      else if (offsetTop + element.clientHeight > maxY) {
+        scrollTo(container, offsetTop - container.offsetHeight + element.clientHeight, true);
+      }
+    }
+    else {
+      scrollTo(container, container.scrollTop +
+        offset.top -
+        (container.offsetHeight / 2 + element.offsetHeight / 2), true);
     }
   }
 }

package/dist/collection/utils/scroll.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"scroll.js","sourceRoot":"","sources":["../../src/utils/scroll.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,KAAK,GAAG,IAAI,GAAG,EAAE,CAAC;AAExB;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAAC,SAAsB;EACtD,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;EACrB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;AAClD,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,mBAAmB,CAAC,SAAsB;EACxD,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;EAExB,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,EAAE;IACpB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;GACpD;AACH,CAAC;AAED,SAAS,QAAQ,CACf,OAAoB,EACpB,SAAiB,EACjB,WAAoB,KAAK;EAEzB,IAAI,CAAC,QAAQ,EAAE;IACb,IAAI;MACF,OAAO,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;KAC3D;IAAC,OAAO,CAAC,EAAE;MACV,OAAO,CAAC,UAAU,GAAG,SAAS,CAAC;KAChC;IACD,OAAO;GACR;EACD,IAAI;IACF,OAAO,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;GAC1D;EAAC,OAAO,CAAC,EAAE;IACV,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;GAC/B;AACH,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,cAAc,CAC5B,OAAoB,EACpB,SAAsB,EACtB,YAAgD,UAAU,EAC1D,WAA+B,OAAO;EAEtC,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;EAC7C,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,GAAG,SAAS,CAAC,SAAS,CAAC;EACnD,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,SAAS,CAAC,UAAU,CAAC;EACtD,MAAM,IAAI,GAAG,SAAS,CAAC,UAAU,CAAC;EAClC,MAAM,IAAI,GAAG,SAAS,CAAC,UAAU,GAAG,SAAS,CAAC,WAAW,CAAC;EAC1D,MAAM,IAAI,GAAG,SAAS,CAAC,SAAS,CAAC;EACjC,MAAM,IAAI,GAAG,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,YAAY,CAAC;EAE1D,IAAI,SAAS,KAAK,YAAY,IAAI,SAAS,KAAK,MAAM,EAAE;IACtD,IAAI,QAAQ,KAAK,OAAO,EAAE;MACxB,IAAI,UAAU,GAAG,IAAI;QAAE,QAAQ,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;WAClD,IAAI,UAAU,GAAG,OAAO,CAAC,WAAW,GAAG,IAAI;QAC9C,QAAQ,CACN,SAAS,EACT,UAAU,GAAG,SAAS,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CACzD,CAAC;KACL~~;;MACC~~,QAAQ,CACN,SAAS,EACT,SAAS,CAAC,UAAU;QAClB,MAAM,CAAC,IAAI;QACX,SAAS,CAAC,WAAW,GAAG,CAAC~~;QACzB~~,OAAO,CAAC,WAAW,GAAG,CAAC,~~CAC1B~~,CAAC;~~GACL~~;EAED,IAAI,SAAS,KAAK,UAAU,IAAI,SAAS,KAAK,MAAM,EAAE;IACpD,IAAI,SAAS,GAAG,IAAI;~~MAAE~~,QAAQ,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;~~SACtD~~,IAAI,SAAS,GAAG,OAAO,CAAC,YAAY,GAAG,IAAI,EAAE;~~MAChD~~,QAAQ,CACN,SAAS,EACT,SAAS,GAAG,SAAS,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,EACzD,IAAI,CACL,CAAC;KACH;GACF;AACH,CAAC","sourcesContent":["import { getOffset } from './dom';\n\nconst locks = new Set();\n\n/*\n Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n * without premature unlocking.\n /\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n locks.add(lockingEl);\n document.body.classList.add('nano-scroll-lock');\n}\n\n/\n Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n /\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n locks.delete(lockingEl);\n\n if (locks.size === 0) {\n document.body.classList.remove('nano-scroll-lock');\n }\n}\n\nfunction scrollTo(\n element: HTMLElement,\n scrollAmt: number,\n vertical: boolean = false\n) {\n if (!vertical) {\n try {\n element.scrollTo({ left: scrollAmt, behavior: 'smooth' });\n } catch (e) {\n element.scrollLeft = scrollAmt;\n }\n return;\n }\n try {\n element.scrollTo({ top: scrollAmt, behavior: 'smooth' });\n } catch (e) {\n element.scrollTop = scrollAmt;\n }\n}\n\n/\n Scrolls an element into view of its container. If the element is already in view, nothing will happen.\n */\nexport function scrollIntoView(\n element: HTMLElement,\n container: HTMLElement,\n direction: 'horizontal' \| 'vertical' \| 'both' = 'vertical',\n position: 'center' \| 'start' = 'start'\n) {\n const offset = getOffset(element, container);\n const offsetTop = offset.top + container.scrollTop;\n const offsetLeft = offset.left + container.scrollLeft;\n const minX = container.scrollLeft;\n const maxX = container.scrollLeft + container.offsetWidth;\n const minY = container.scrollTop;\n const maxY = container.scrollTop + container.offsetHeight;\n\n if (direction === 'horizontal' \|\| direction === 'both') {\n if (position === 'start') {\n if (offsetLeft < minX) scrollTo(container, offsetLeft);\n else if (offsetLeft + element.clientWidth > maxX)\n scrollTo(\n container,\n offsetLeft - container.offsetWidth + element.clientWidth\n );\n } else\n scrollTo(\n container,\n container.scrollLeft +\n offset.left -\n container.offsetWidth / 2 ~~+\n~~ element.offsetWidth / 2\n );\n }\n\n if (direction === 'vertical' \|\| direction === 'both') {\n if (offsetTop < minY) scrollTo(container, offsetTop, true);\n else if (offsetTop + element.clientHeight > maxY) {\n scrollTo(\n container,\n offsetTop - container.offsetHeight + element.clientHeight,\n true\n );\n }\n }\n}\n"]}
1	+ {"version":3,"file":"scroll.js","sourceRoot":"","sources":["../../src/utils/scroll.ts"],"names":[],"mappings":"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","sourcesContent":["import { getOffset } from './dom';\n\nconst locks = new Set();\n\n/*\n Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n * without premature unlocking.\n /\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n locks.add(lockingEl);\n document.body.classList.add('nano-scroll-lock');\n}\n\n/\n Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n /\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n locks.delete(lockingEl);\n\n if (locks.size === 0) {\n document.body.classList.remove('nano-scroll-lock');\n }\n}\n\nfunction scrollTo(\n element: HTMLElement,\n scrollAmt: number,\n vertical: boolean = false\n) {\n if (!vertical) {\n try {\n element.scrollTo({ left: scrollAmt, behavior: 'smooth' });\n } catch (e) {\n element.scrollLeft = scrollAmt;\n }\n return;\n }\n try {\n element.scrollTo({ top: scrollAmt, behavior: 'smooth' });\n } catch (e) {\n element.scrollTop = scrollAmt;\n }\n}\n\n/\n Scrolls an element into view of its container. If the element is already in view, nothing will happen.\n */\nexport function scrollIntoView(\n element: HTMLElement,\n container: HTMLElement,\n direction: 'horizontal' \| 'vertical' \| 'both' = 'vertical',\n position: 'center' \| 'start' = 'start'\n) {\n const offset = getOffset(element, container);\n const offsetTop = offset.top + container.scrollTop;\n const offsetLeft = offset.left + container.scrollLeft;\n const minX = container.scrollLeft;\n const maxX = container.scrollLeft + container.offsetWidth;\n const minY = container.scrollTop;\n const maxY = container.scrollTop + container.offsetHeight;\n\n if (direction === 'horizontal' \|\| direction === 'both') {\n if (position === 'start') {\n if (offsetLeft < minX) scrollTo(container, offsetLeft);\n else if (offsetLeft + element.clientWidth > maxX)\n scrollTo(\n container,\n offsetLeft - container.offsetWidth + element.clientWidth\n );\n } else {\n scrollTo(\n container,\n container.scrollLeft +\n offset.left -\n (container.offsetWidth / 2 + element.offsetWidth / 2)\n );\n }\n }\n\n if (direction === 'vertical' \|\| direction === 'both') {\n if (position === 'start') {\n if (offsetTop < minY) scrollTo(container, offsetTop, true);\n else if (offsetTop + element.clientHeight > maxY) {\n scrollTo(\n container,\n offsetTop - container.offsetHeight + element.clientHeight,\n true\n );\n }\n } else {\n scrollTo(\n container,\n container.scrollTop +\n offset.top -\n (container.offsetHeight / 2 + element.offsetHeight / 2),\n true\n );\n }\n }\n}\n"]}

package/dist/collection/utils/transitions.js CHANGED Viewed

@@ -25,7 +25,7 @@ export const transitionDone = (el) => {
  * @param show
  * @returns a promise of resolving as either 'show' or 'hidden'
  */
-export const displayTransition = (el, className, show = true) => {
+export const displayTransition = (el, className, show = true, showDisplay = 'block') => {
   return new Promise((resolve) => {
     if (show) {
       el.addEventListener('transitionend', (e) => {
@@ -34,7 +34,7 @@ export const displayTransition = (el, className, show = true) => {
           resolve('shown');
         }
       }, { once: true });
-      el.style.display = 'block';
+      el.style.display = showDisplay;
       el.dataset.displayTransition = 'true';
       setTimeout(() => el.classList.add(className), 20);
     }

package/dist/collection/utils/transitions.js.map CHANGED Viewed

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

package/dist/components/global-nav-user-profile.js CHANGED Viewed

@@ -14,7 +14,7 @@ const GlobalNavUserProfile = /*@__PURE__*/ proxyCustomElement(class extends HTML
   // Render output
   render() {
     var _a;
-    return (!!this.myAccountUser && (h("a", { href: this.userProfileUrl, class: "user-profile" }, h("div", { class: "left" }, h("div", { class: "avatar-container" }, h("img", { class: "avatar", src: (_a = this.myAccountUser) === null || _a === void 0 ? void 0 : _a.small_avatar_url, alt: "User Avatar", height: 75, width: 75 }), this.myAccountUser.is_nanopore_user && (h("img", { class: "logo-small", src: getAssetPath(`../nano-assets/ont-wheel-light.svg`), alt: "Nanopore Logo" }))), h("div", { class: "user-details" }, h("span", { class: "name" }, this.myAccountUser.name), h("span", { class: "bio" }, this.myAccountUser.job_title, " at ", this.myAccountUser.company))), h("div", { class: "right" }, h("div", { class: "chevron-right" }, h("nano-icon", { slot: "icon-end", name: "light/chevron-right", "aria-label": "navigate to ..." }))))));
+    return (!!this.myAccountUser && (h("a", { href: this.userProfileUrl, class: "user-profile" }, h("div", { class: "left" }, h("div", { class: "avatar-container" }, h("img", { class: "avatar", src: (_a = this.myAccountUser) === null || _a === void 0 ? void 0 : _a.small_avatar_url, alt: "User Avatar", height: 75, width: 75 }), this.myAccountUser.is_nanopore_user && (h("img", { class: "logo-small", src: getAssetPath(`/nano-assets/ont-wheel-light.svg`), alt: "Nanopore Logo" }))), h("div", { class: "user-details" }, h("span", { class: "name" }, this.myAccountUser.name), h("span", { class: "bio" }, this.myAccountUser.job_title, " at ", this.myAccountUser.company))), h("div", { class: "right" }, h("div", { class: "chevron-right" }, h("nano-icon", { slot: "icon-end", name: "light/chevron-right", "aria-label": "navigate to ..." }))))));
   }
 }, [0, "nano-global-nav-user-profile", {
     "myAccountUser": [16],

package/dist/components/global-nav-user-profile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"global-nav-user-profile.js","mappings":";;;;;;MAea,oBAAoB;;;;;;;;EAa/B,MAAM;;IACJ,QACE,CAAC,CAAC,IAAI,CAAC,aAAa,KAClB,SAAG,IAAI,EAAE,IAAI,CAAC,cAAc,EAAE,KAAK,EAAC,cAAc,IAChD,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,kBAAkB,IAC3B,WACE,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,MAAA,IAAI,CAAC,aAAa,0CAAE,gBAAgB,EACzC,GAAG,EAAC,aAAa,EACjB,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,GACT,EACD,IAAI,CAAC,aAAa,CAAC,gBAAgB,KAClC,WACE,KAAK,EAAC,YAAY,EAClB,GAAG,EAAE,YAAY,CAAC,~~oCAAoC~~,CAAC,~~EACvD~~,GAAG,EAAC,eAAe,GACnB,CACH,CACG,EAEN,WAAK,KAAK,EAAC,cAAc,IACvB,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAQ,EAEnD,YAAM,KAAK,EAAC,KAAK,IACd,IAAI,CAAC,aAAa,CAAC,SAAS,UAAM,IAAI,CAAC,aAAa,CAAC,OAAO,CACxD,CACH,CACF,EAEN,WAAK,KAAK,EAAC,OAAO,IAChB,WAAK,KAAK,EAAC,eAAe,IACxB,iBACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,qBAAqB,gBACf,iBAAiB,GACjB,CACT,CACF,CACJ,CACL,EACD;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/global-nav/global-nav-user-profile.tsx"],"sourcesContent":["import {\n Component,\n h,\n Prop,\n getAssetPath,\n ComponentInterface,\n} from '@stencil/core';\nimport { MyAccountUser } from './global-nav-interface';\n\n/*\n Nanopore digital global navigation user profile.\n /\n@Component({\n tag: 'nano-global-nav-user-profile',\n})\nexport class GlobalNavUserProfile implements ComponentInterface {\n /\n Logged in user details automatically populated from MyAccount\n /\n @Prop() myAccountUser: MyAccountUser;\n\n /\n Link to the user profile\n */\n @Prop() userProfileUrl: string;\n\n // Render output\n\n render() {\n return (\n !!this.myAccountUser && (\n <a href={this.userProfileUrl} class=\"user-profile\">\n <div class=\"left\">\n <div class=\"avatar-container\">\n <img\n class=\"avatar\"\n src={this.myAccountUser?.small_avatar_url}\n alt=\"User Avatar\"\n height={75}\n width={75}\n />\n {this.myAccountUser.is_nanopore_user && (\n <img\n class=\"logo-small\"\n src={getAssetPath(~~`../~~nano-assets/ont-wheel-light.svg`)}\n alt=\"Nanopore Logo\"\n />\n )}\n </div>\n\n <div class=\"user-details\">\n <span class=\"name\">{this.myAccountUser.name}</span>\n\n <span class=\"bio\">\n {this.myAccountUser.job_title} at {this.myAccountUser.company}\n </span>\n </div>\n </div>\n\n <div class=\"right\">\n <div class=\"chevron-right\">\n <nano-icon\n slot=\"icon-end\"\n name=\"light/chevron-right\"\n aria-label=\"navigate to ...\"\n ></nano-icon>\n </div>\n </div>\n </a>\n )\n );\n }\n}\n"],"version":3}
1	+ {"file":"global-nav-user-profile.js","mappings":";;;;;;MAea,oBAAoB;;;;;;;;EAa/B,MAAM;;IACJ,QACE,CAAC,CAAC,IAAI,CAAC,aAAa,KAClB,SAAG,IAAI,EAAE,IAAI,CAAC,cAAc,EAAE,KAAK,EAAC,cAAc,IAChD,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,kBAAkB,IAC3B,WACE,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,MAAA,IAAI,CAAC,aAAa,0CAAE,gBAAgB,EACzC,GAAG,EAAC,aAAa,EACjB,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,GACT,EACD,IAAI,CAAC,aAAa,CAAC,gBAAgB,KAClC,WACE,KAAK,EAAC,YAAY,EAClB,GAAG,EAAE,YAAY,CAAC,kCAAkC,CAAC,EACrD,GAAG,EAAC,eAAe,GACnB,CACH,CACG,EAEN,WAAK,KAAK,EAAC,cAAc,IACvB,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAQ,EAEnD,YAAM,KAAK,EAAC,KAAK,IACd,IAAI,CAAC,aAAa,CAAC,SAAS,UAAM,IAAI,CAAC,aAAa,CAAC,OAAO,CACxD,CACH,CACF,EAEN,WAAK,KAAK,EAAC,OAAO,IAChB,WAAK,KAAK,EAAC,eAAe,IACxB,iBACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,qBAAqB,gBACf,iBAAiB,GACjB,CACT,CACF,CACJ,CACL,EACD;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/global-nav/global-nav-user-profile.tsx"],"sourcesContent":["import {\n Component,\n h,\n Prop,\n getAssetPath,\n ComponentInterface,\n} from '@stencil/core';\nimport { MyAccountUser } from './global-nav-interface';\n\n/*\n Nanopore digital global navigation user profile.\n /\n@Component({\n tag: 'nano-global-nav-user-profile',\n})\nexport class GlobalNavUserProfile implements ComponentInterface {\n /\n Logged in user details automatically populated from MyAccount\n /\n @Prop() myAccountUser: MyAccountUser;\n\n /\n Link to the user profile\n */\n @Prop() userProfileUrl: string;\n\n // Render output\n\n render() {\n return (\n !!this.myAccountUser && (\n <a href={this.userProfileUrl} class=\"user-profile\">\n <div class=\"left\">\n <div class=\"avatar-container\">\n <img\n class=\"avatar\"\n src={this.myAccountUser?.small_avatar_url}\n alt=\"User Avatar\"\n height={75}\n width={75}\n />\n {this.myAccountUser.is_nanopore_user && (\n <img\n class=\"logo-small\"\n src={getAssetPath(`/nano-assets/ont-wheel-light.svg`)}\n alt=\"Nanopore Logo\"\n />\n )}\n </div>\n\n <div class=\"user-details\">\n <span class=\"name\">{this.myAccountUser.name}</span>\n\n <span class=\"bio\">\n {this.myAccountUser.job_title} at {this.myAccountUser.company}\n </span>\n </div>\n </div>\n\n <div class=\"right\">\n <div class=\"chevron-right\">\n <nano-icon\n slot=\"icon-end\"\n name=\"light/chevron-right\"\n aria-label=\"navigate to ...\"\n ></nano-icon>\n </div>\n </div>\n </a>\n )\n );\n }\n}\n"],"version":3}

package/dist/components/icon.js CHANGED Viewed

@@ -35,7 +35,7 @@ const getNamedUrl = (iconName) => {
   if (url) {
     return url;
   }
-  return getAssetPath(`../nano-assets/fontawesome-pro/svgs/${iconName}.svg`);
+  return getAssetPath(`/nano-assets/fontawesome-pro/svgs/${iconName}.svg`);
 };
 const getName = (iconName, icon) => {
   if (!iconName && icon && !isSrc(icon)) {

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

	@@ -1 +1 @@
1	- {"file":"icon.js","mappings":"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","names":[],"sources":["./src/components/icon/utils.ts","./src/components/icon/validate.ts","./src/components/icon/request.ts","./src/components/icon/icon.scss?tag=nano-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["import { getAssetPath } from '@stencil/core';\nimport { Icon } from './icon';\n\nlet CACHED_MAP: Map<string, string>;\n\nexport const getIconMap = (): Map<string, string> => {\n if (!CACHED_MAP) {\n const win = window as any;\n win.Nanoicons = win.Nanoicons \|\| {};\n CACHED_MAP = win.Nanoicons.map = win.Nanoicons.map \|\| new Map();\n }\n return CACHED_MAP;\n};\n\nexport const addIcons = (icons: { [name: string]: string }) => {\n const map = getIconMap();\n Object.keys(icons).forEach((name) => map.set(name, icons[name]));\n};\n\nexport const getUrl = (i: Icon) => {\n let url = getSrc(i.src);\n if (url) {\n return url;\n }\n\n url = getName(i.name, i.icon);\n if (url) {\n return getNamedUrl(url);\n }\n\n if (i.icon) {\n url = getSrc(i.icon);\n if (url) {\n return url;\n }\n }\n return null;\n};\n\nconst getNamedUrl = (iconName: string) => {\n const url = getIconMap().get(iconName);\n if (url) {\n return url;\n }\n return getAssetPath(`../nano-assets/fontawesome-pro/svgs/${iconName}.svg`);\n};\n\nexport const getName = (\n iconName: string \| undefined,\n icon: string \| undefined\n) => {\n if (!iconName && icon && !isSrc(icon)) {\n iconName = icon;\n }\n if (isStr(iconName)) {\n iconName = toLower(iconName);\n }\n\n if (!isStr(iconName) \|\| iconName.trim() === '') {\n return null;\n }\n\n // only allow alpha characters and dash\n const invalidChars = iconName.replace(/[a-z]\|-\|\\/\|\\d/gi, '');\n if (invalidChars !== '') {\n console.warn('invalid characters in icon name ' + iconName);\n return null;\n }\n return iconName;\n};\n\nexport const getSrc = (src: string \| undefined) => {\n if (isStr(src)) {\n src = src.trim();\n if (isSrc(src)) {\n return src;\n }\n }\n return null;\n};\n\nexport const isSrc = (str: string) => str.length > 0 && /(\\/\|\\.)/.test(str);\nexport const isStr = (val: any): val is string => typeof val === 'string';\nexport const toLower = (val: string) => val.toLowerCase();\n","import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string \| null) => {\n if (svgContent) {\n const div = document.createElement('div');\n div.innerHTML = svgContent;\n\n // setup this way to ensure it works on our buddy IE\n for (let i = div.childNodes.length - 1; i >= 0; i--) {\n if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n div.removeChild(div.childNodes[i]);\n }\n }\n\n // must only have 1 root element\n const svgElm = div.firstElementChild;\n if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n const svgClass = svgElm.getAttribute('class') \|\| '';\n svgElm.setAttribute(\n 'class',\n (svgClass + ' sc-nano-icon s-nano-icon svg').trim()\n );\n\n // root element must be an svg\n // lets double check we've got valid elements\n // do not allow scripts\n if (isValid(svgElm as any)) {\n return div.innerHTML;\n }\n }\n }\n return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n if (elm.nodeType === 1) {\n if (elm.nodeName.toLowerCase() === 'script') {\n return false;\n }\n\n for (let i = 0; i < elm.attributes.length; i++) {\n const val = elm.attributes[i].value;\n if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {\n return false;\n }\n }\n\n for (let i = 0; i < elm.childNodes.length; i++) {\n if (!isValid(elm.childNodes[i] as any)) {\n return false;\n }\n }\n }\n return true;\n};\n","import { validateContent } from './validate';\nexport const iconContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>();\n\nexport const getSvgContent = (url: string) => {\n // see if we already have a request for this url\n let req = requests.get(url);\n if (!req) {\n // we don't already have a request\n req = fetch(url).then((rsp) => {\n if (rsp.ok) {\n return rsp.text().then((svgContent) => {\n iconContent.set(url, validateContent(svgContent));\n });\n }\n iconContent.set(url, '');\n });\n\n // cache for the same requests\n requests.set(url, req);\n }\n return req;\n};\n","@import '../../global/style/utilities/globals';\n\n:host {\n /*\n @prop --color: defaults to current context color\n * @prop --primary-color: used for duotone icons to set the primary color\n * @prop --secondary-color: used for duotone icons to set the secondary color\n * @prop --primary-opacity: used for duotone icons to set the primary opacity\n * @prop --secondary-opacity: used for duotone icons to set the secondary opacity\n * @prop --stroke-width: 32px default stroke width\n /\n\n --color: var(--nano-color-base, currentcolor);\n --primary-color: var(--nano-color-tint, currentcolor);\n --secondary-color: var(--nano-color-shade, currentcolor);\n --stroke-width: 32px;\n --primary-opacity: 0.8;\n --secondary-opacity: 1;\n --icon-size: var(--nano-icon-size, 1em);\n --icon-margin-top: var(--nano-icon-margin-top, 0);\n --icon-margin-end: var(--nano-icon-margin-end, 0);\n --icon-margin-bottom: var(--nano-icon-margin-bottom, 0);\n --icon-margin-start: var(--nano-icon-margin-start, 0);\n\n display: inline-block;\n width: var(--icon-size);\n height: var(--icon-size);\n min-width: var(--icon-size);\n min-height: var(--icon-size);\n contain: strict;\n fill: currentcolor;\n box-sizing: content-box !important;\n transition: opacity 0.3s ease;\n color: var(--color);\n margin-inline: var(--icon-margin-start) var(--icon-margin-end);\n margin-block: var(--icon-margin-top) var(--icon-margin-bottom);\n}\n\n:host .nanoicon {\n stroke: currentcolor;\n}\n\n.nanoicon-fill-none {\n fill: none;\n}\n\n.nanoicon-stroke-width {\n stroke-width: 32px;\n stroke-width: var(--stroke-width);\n}\n\n.icon-inner,\n.nanoicon,\nsvg,\n.svg {\n display: block;\n height: 100%;\n width: 100%;\n overflow: visible;\n}\n\n:host(.loading) {\n opacity: 0;\n}\n\n.fa-primary {\n color: var(--primary-color);\n opacity: var(--primary-opacity, 1);\n}\n\n.fa-secondary {\n color: var(--secondary-color);\n opacity: var(--secondary-opacity) !important;\n}\n\n/ Icon RTL\n * -----------------------------------------------------------\n /\n:host(.flip-rtl) .icon-inner {\n transform: scaleX(-1);\n}\n\n/ Icon Sizes\n * -----------------------------------------------------------\n /\n:host(.icon-small) {\n font-size: 18px !important;\n}\n\n:host(.icon-large) {\n font-size: 32px !important;\n}\n","import {\n Build,\n Component,\n Element,\n Host,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { createColorClasses } from '../../utils/theme';\nimport { getSvgContent, iconContent } from './request';\nimport { getName, getUrl } from './utils';\nimport type { Color } from '../../interface';\n\n/\n An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path). Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.\n /\n@Component({\n tag: 'nano-icon',\n styleUrl: 'icon.scss',\n shadow: true,\n})\nexport class Icon {\n private io?: IntersectionObserver;\n\n @Element() el!: HTMLNanoIconElement;\n\n @State() svgContent?: string;\n @State() isVisible = false;\n @State() isLoading = true;\n\n /\n Color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n /\n @Prop() color?: Color;\n\n /\n Specifies the label to use for accessibility. Defaults to the icon name.\n /\n @Prop({ mutable: true, reflect: true }) ariaLabel: string;\n\n /\n Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.\n /\n @Prop() flipRtl?: boolean;\n\n /\n Specifies which icon to use from the built-in set of icons.\n /\n @Prop() name?: string;\n\n /\n Specifies the exact `src` of an SVG file to use.\n /\n @Prop() src?: string;\n\n /\n A combination of both `name` and `src`. If a `src` url is detected\n * it will set the `src` property. Otherwise it assumes it's a built-in named\n * SVG and set the `name` property.\n /\n @Prop() icon?: any;\n\n /\n The size of the icon.\n * Available options are: `\"small\"` and `\"large\"`.\n /\n @Prop() size?: 'small' \| 'large';\n\n /\n If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\n * Default, `true`.\n */\n @Prop() lazy = true;\n\n private setAriaLabel() {\n if (!this.ariaLabel) {\n const label = getName(this.name, this.icon);\n // user did not provide a label\n // come up with the label based on the icon name\n if (label) {\n this.ariaLabel = label.split('/').slice(-1)[0].replace(/\\-/g, ' ');\n }\n }\n }\n\n connectedCallback() {\n // purposely do not return the promise here because loading\n // the svg file should not hold up loading the app\n // only load the svg if it's visible\n this.waitUntilVisible(this.el, '50px', () => {\n this.isVisible = true;\n this.loadIcon();\n });\n }\n\n disconnectedCallback() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n componentWillLoad() {\n this.setAriaLabel();\n }\n\n private waitUntilVisible(\n el: HTMLElement,\n rootMargin: string,\n cb: () => void\n ) {\n if (\n Build.isBrowser &&\n this.lazy &&\n typeof window !== 'undefined' &&\n (window as any).IntersectionObserver\n ) {\n const io = (this.io = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].isIntersecting \|\| (data[1] && data[1].isIntersecting)) {\n io.disconnect();\n this.io = undefined;\n cb();\n }\n },\n { rootMargin }\n ));\n\n io.observe(el);\n } else {\n // browser doesn't support IntersectionObserver\n // so just fallback to always show it\n cb();\n }\n }\n\n @Watch('name')\n @Watch('src')\n @Watch('icon')\n loadIcon() {\n if (Build.isBrowser && this.isVisible) {\n const url = getUrl(this);\n if (url) {\n if (iconContent.has(url)) {\n // sync if it's already loaded\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n } else {\n // async if it hasn't been loaded\n getSvgContent(url).then(() => {\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n });\n }\n }\n }\n this.setAriaLabel();\n }\n\n render() {\n const flipRtl =\n this.flipRtl \|\|\n (this.name &&\n (this.name.indexOf('arrow') > -1 \|\|\n this.name.indexOf('chevron') > -1) &&\n (this.el.ownerDocument as Document).dir === 'rtl' &&\n this.flipRtl !== false);\n\n return (\n <Host\n role=\"img\"\n class={{\n ...createColorClasses(this.color),\n loading: this.isLoading,\n [`icon-${this.size}`]: !!this.size,\n 'flip-rtl': !!flipRtl,\n }}\n >\n {Build.isBrowser && this.svgContent ? (\n <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n ) : (\n <div class=\"icon-inner\"></div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"icon.js","mappings":"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","names":[],"sources":["./src/components/icon/utils.ts","./src/components/icon/validate.ts","./src/components/icon/request.ts","./src/components/icon/icon.scss?tag=nano-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["import { getAssetPath } from '@stencil/core';\nimport { Icon } from './icon';\n\nlet CACHED_MAP: Map<string, string>;\n\nexport const getIconMap = (): Map<string, string> => {\n if (!CACHED_MAP) {\n const win = window as any;\n win.Nanoicons = win.Nanoicons \|\| {};\n CACHED_MAP = win.Nanoicons.map = win.Nanoicons.map \|\| new Map();\n }\n return CACHED_MAP;\n};\n\nexport const addIcons = (icons: { [name: string]: string }) => {\n const map = getIconMap();\n Object.keys(icons).forEach((name) => map.set(name, icons[name]));\n};\n\nexport const getUrl = (i: Icon) => {\n let url = getSrc(i.src);\n if (url) {\n return url;\n }\n\n url = getName(i.name, i.icon);\n if (url) {\n return getNamedUrl(url);\n }\n\n if (i.icon) {\n url = getSrc(i.icon);\n if (url) {\n return url;\n }\n }\n return null;\n};\n\nconst getNamedUrl = (iconName: string) => {\n const url = getIconMap().get(iconName);\n if (url) {\n return url;\n }\n return getAssetPath(`/nano-assets/fontawesome-pro/svgs/${iconName}.svg`);\n};\n\nexport const getName = (\n iconName: string \| undefined,\n icon: string \| undefined\n) => {\n if (!iconName && icon && !isSrc(icon)) {\n iconName = icon;\n }\n if (isStr(iconName)) {\n iconName = toLower(iconName);\n }\n\n if (!isStr(iconName) \|\| iconName.trim() === '') {\n return null;\n }\n\n // only allow alpha characters and dash\n const invalidChars = iconName.replace(/[a-z]\|-\|\\/\|\\d/gi, '');\n if (invalidChars !== '') {\n console.warn('invalid characters in icon name ' + iconName);\n return null;\n }\n return iconName;\n};\n\nexport const getSrc = (src: string \| undefined) => {\n if (isStr(src)) {\n src = src.trim();\n if (isSrc(src)) {\n return src;\n }\n }\n return null;\n};\n\nexport const isSrc = (str: string) => str.length > 0 && /(\\/\|\\.)/.test(str);\nexport const isStr = (val: any): val is string => typeof val === 'string';\nexport const toLower = (val: string) => val.toLowerCase();\n","import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string \| null) => {\n if (svgContent) {\n const div = document.createElement('div');\n div.innerHTML = svgContent;\n\n // setup this way to ensure it works on our buddy IE\n for (let i = div.childNodes.length - 1; i >= 0; i--) {\n if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n div.removeChild(div.childNodes[i]);\n }\n }\n\n // must only have 1 root element\n const svgElm = div.firstElementChild;\n if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n const svgClass = svgElm.getAttribute('class') \|\| '';\n svgElm.setAttribute(\n 'class',\n (svgClass + ' sc-nano-icon s-nano-icon svg').trim()\n );\n\n // root element must be an svg\n // lets double check we've got valid elements\n // do not allow scripts\n if (isValid(svgElm as any)) {\n return div.innerHTML;\n }\n }\n }\n return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n if (elm.nodeType === 1) {\n if (elm.nodeName.toLowerCase() === 'script') {\n return false;\n }\n\n for (let i = 0; i < elm.attributes.length; i++) {\n const val = elm.attributes[i].value;\n if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {\n return false;\n }\n }\n\n for (let i = 0; i < elm.childNodes.length; i++) {\n if (!isValid(elm.childNodes[i] as any)) {\n return false;\n }\n }\n }\n return true;\n};\n","import { validateContent } from './validate';\nexport const iconContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>();\n\nexport const getSvgContent = (url: string) => {\n // see if we already have a request for this url\n let req = requests.get(url);\n if (!req) {\n // we don't already have a request\n req = fetch(url).then((rsp) => {\n if (rsp.ok) {\n return rsp.text().then((svgContent) => {\n iconContent.set(url, validateContent(svgContent));\n });\n }\n iconContent.set(url, '');\n });\n\n // cache for the same requests\n requests.set(url, req);\n }\n return req;\n};\n","@import '../../global/style/utilities/globals';\n\n:host {\n /*\n @prop --color: defaults to current context color\n * @prop --primary-color: used for duotone icons to set the primary color\n * @prop --secondary-color: used for duotone icons to set the secondary color\n * @prop --primary-opacity: used for duotone icons to set the primary opacity\n * @prop --secondary-opacity: used for duotone icons to set the secondary opacity\n * @prop --stroke-width: 32px default stroke width\n /\n\n --color: var(--nano-color-base, currentcolor);\n --primary-color: var(--nano-color-tint, currentcolor);\n --secondary-color: var(--nano-color-shade, currentcolor);\n --stroke-width: 32px;\n --primary-opacity: 0.8;\n --secondary-opacity: 1;\n --icon-size: var(--nano-icon-size, 1em);\n --icon-margin-top: var(--nano-icon-margin-top, 0);\n --icon-margin-end: var(--nano-icon-margin-end, 0);\n --icon-margin-bottom: var(--nano-icon-margin-bottom, 0);\n --icon-margin-start: var(--nano-icon-margin-start, 0);\n\n display: inline-block;\n width: var(--icon-size);\n height: var(--icon-size);\n min-width: var(--icon-size);\n min-height: var(--icon-size);\n contain: strict;\n fill: currentcolor;\n box-sizing: content-box !important;\n transition: opacity 0.3s ease;\n color: var(--color);\n margin-inline: var(--icon-margin-start) var(--icon-margin-end);\n margin-block: var(--icon-margin-top) var(--icon-margin-bottom);\n}\n\n:host .nanoicon {\n stroke: currentcolor;\n}\n\n.nanoicon-fill-none {\n fill: none;\n}\n\n.nanoicon-stroke-width {\n stroke-width: 32px;\n stroke-width: var(--stroke-width);\n}\n\n.icon-inner,\n.nanoicon,\nsvg,\n.svg {\n display: block;\n height: 100%;\n width: 100%;\n overflow: visible;\n}\n\n:host(.loading) {\n opacity: 0;\n}\n\n.fa-primary {\n color: var(--primary-color);\n opacity: var(--primary-opacity, 1);\n}\n\n.fa-secondary {\n color: var(--secondary-color);\n opacity: var(--secondary-opacity) !important;\n}\n\n/ Icon RTL\n * -----------------------------------------------------------\n /\n:host(.flip-rtl) .icon-inner {\n transform: scaleX(-1);\n}\n\n/ Icon Sizes\n * -----------------------------------------------------------\n /\n:host(.icon-small) {\n font-size: 18px !important;\n}\n\n:host(.icon-large) {\n font-size: 32px !important;\n}\n","import {\n Build,\n Component,\n Element,\n Host,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { createColorClasses } from '../../utils/theme';\nimport { getSvgContent, iconContent } from './request';\nimport { getName, getUrl } from './utils';\nimport type { Color } from '../../interface';\n\n/\n An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path). Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.\n /\n@Component({\n tag: 'nano-icon',\n styleUrl: 'icon.scss',\n shadow: true,\n})\nexport class Icon {\n private io?: IntersectionObserver;\n\n @Element() el!: HTMLNanoIconElement;\n\n @State() svgContent?: string;\n @State() isVisible = false;\n @State() isLoading = true;\n\n /\n Color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n /\n @Prop() color?: Color;\n\n /\n Specifies the label to use for accessibility. Defaults to the icon name.\n /\n @Prop({ mutable: true, reflect: true }) ariaLabel: string;\n\n /\n Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.\n /\n @Prop() flipRtl?: boolean;\n\n /\n Specifies which icon to use from the built-in set of icons.\n /\n @Prop() name?: string;\n\n /\n Specifies the exact `src` of an SVG file to use.\n /\n @Prop() src?: string;\n\n /\n A combination of both `name` and `src`. If a `src` url is detected\n * it will set the `src` property. Otherwise it assumes it's a built-in named\n * SVG and set the `name` property.\n /\n @Prop() icon?: any;\n\n /\n The size of the icon.\n * Available options are: `\"small\"` and `\"large\"`.\n /\n @Prop() size?: 'small' \| 'large';\n\n /\n If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\n * Default, `true`.\n */\n @Prop() lazy = true;\n\n private setAriaLabel() {\n if (!this.ariaLabel) {\n const label = getName(this.name, this.icon);\n // user did not provide a label\n // come up with the label based on the icon name\n if (label) {\n this.ariaLabel = label.split('/').slice(-1)[0].replace(/\\-/g, ' ');\n }\n }\n }\n\n connectedCallback() {\n // purposely do not return the promise here because loading\n // the svg file should not hold up loading the app\n // only load the svg if it's visible\n this.waitUntilVisible(this.el, '50px', () => {\n this.isVisible = true;\n this.loadIcon();\n });\n }\n\n disconnectedCallback() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n componentWillLoad() {\n this.setAriaLabel();\n }\n\n private waitUntilVisible(\n el: HTMLElement,\n rootMargin: string,\n cb: () => void\n ) {\n if (\n Build.isBrowser &&\n this.lazy &&\n typeof window !== 'undefined' &&\n (window as any).IntersectionObserver\n ) {\n const io = (this.io = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].isIntersecting \|\| (data[1] && data[1].isIntersecting)) {\n io.disconnect();\n this.io = undefined;\n cb();\n }\n },\n { rootMargin }\n ));\n\n io.observe(el);\n } else {\n // browser doesn't support IntersectionObserver\n // so just fallback to always show it\n cb();\n }\n }\n\n @Watch('name')\n @Watch('src')\n @Watch('icon')\n loadIcon() {\n if (Build.isBrowser && this.isVisible) {\n const url = getUrl(this);\n if (url) {\n if (iconContent.has(url)) {\n // sync if it's already loaded\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n } else {\n // async if it hasn't been loaded\n getSvgContent(url).then(() => {\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n });\n }\n }\n }\n this.setAriaLabel();\n }\n\n render() {\n const flipRtl =\n this.flipRtl \|\|\n (this.name &&\n (this.name.indexOf('arrow') > -1 \|\|\n this.name.indexOf('chevron') > -1) &&\n (this.el.ownerDocument as Document).dir === 'rtl' &&\n this.flipRtl !== false);\n\n return (\n <Host\n role=\"img\"\n class={{\n ...createColorClasses(this.color),\n loading: this.isLoading,\n [`icon-${this.size}`]: !!this.size,\n 'flip-rtl': !!flipRtl,\n }}\n >\n {Build.isBrowser && this.svgContent ? (\n <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n ) : (\n <div class=\"icon-inner\"></div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/img.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Build } from '@stencil
 import { d as defineCustomElement$2 } from './resize-observe.js';
 import { d as defineCustomElement$1 } from './skeleton.js';
-const imgCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding:0;display:inline-block;object-fit:cover;object-position:center;background-size:cover;background-position:center}:host *{border-radius:inherit}:host([background]:not([background=false])){display:block}.img{position:relative;object-fit:inherit;object-position:inherit;background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;flex:1 1 100%;display:flex;flex-direction:column;min-block-size:inherit;max-block-size:inherit;max-inline-size:inherit;min-height:inherit;min-width:inherit;block-size:inherit;inline-size:inherit;height:inherit;width:inherit;max-height:inherit;max-width:inherit;aspect-ratio:inherit}.img__loader,.img__observer{position:absolute;inset:0;block-size:100%;inline-size:100%;z-index:-1}.img__image,.img__bg{border-radius:inherit;display:block;opacity:0;transition:0.5s ease opacity, 0.3s ease filter 0.4s;filter:blur(5px);flex:1}.img__image.loaded,.img__bg.loaded{opacity:1;filter:blur(0.1px)}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none){.img__image.loaded,.img__bg.loaded{filter:blur(0)}}}.img__image{object-fit:inherit;object-position:inherit;max-inline-size:100%;min-block-size:inherit;max-block-size:inherit;min-height:inherit;min-width:inherit;block-size:auto;inline-size:inherit;height:inherit;width:inherit;max-height:inherit;max-width:inherit;aspect-ratio:inherit}.img__image.hide{visibility:hidden}.img__image.hide.no-height{block-size:1px;position:absolute;z-index:-1}.img__bg{background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;overflow:auto;padding:var(--padding)}.img__bg.no-height{position:absolute;inset:0}";
+const imgCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding:0;display:inline-block;object-fit:cover;object-position:center;background-size:cover;background-position:center}:host *{border-radius:inherit}:host([background]:not([background=false])){display:block}.img{position:relative;object-fit:inherit;object-position:inherit;background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;flex:1 1 100%;display:flex;flex-direction:column;min-block-size:inherit;max-block-size:inherit;max-inline-size:inherit;min-height:inherit;min-width:inherit;block-size:inherit;inline-size:inherit;height:inherit;width:inherit;max-height:inherit;max-width:inherit;aspect-ratio:inherit}.img__loader,.img__observer{position:absolute;inset:0;block-size:100%;inline-size:100%;z-index:-1}.img__image,.img__bg{border-radius:inherit;display:block;opacity:0;transition:0.5s ease opacity, 0.3s ease filter 0.4s;filter:blur(5px);flex:1}.img__image.loaded,.img__bg.loaded{opacity:1;filter:blur(0)}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none){.img__image.loaded,.img__bg.loaded{filter:blur(0)}}}.img__image{object-fit:inherit;object-position:inherit;max-inline-size:100%;min-block-size:inherit;max-block-size:inherit;min-height:inherit;min-width:inherit;block-size:auto;inline-size:inherit;height:inherit;width:inherit;max-height:inherit;max-width:inherit;aspect-ratio:inherit}.img__image.hide{visibility:hidden}.img__image.hide.no-height{block-size:1px;position:absolute;z-index:-1}.img__bg{background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;overflow:auto;padding:var(--padding)}.img__bg.no-height{position:absolute;inset:0}";
 const Img = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

	@@ -1 +1 @@
1	- {"file":"img.js","mappings":"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","names":[],"sources":["./src/components/img/img.scss?tag=nano-img&encapsulation=shadow","./src/components/img/img.tsx"],"sourcesContent":[":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 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 flex: 1 1 100%;\n display: flex;\n flex-direction: column;\n min-block-size: inherit;\n max-block-size: inherit;\n max-inline-size: inherit;\n min-height: inherit;\n min-width: inherit;\n block-size: inherit;\n inline-size: inherit;\n height: inherit;\n width: inherit;\n max-height: inherit;\n max-width: inherit;\n aspect-ratio: inherit;\n}\n\n.img__loader,\n.img__observer {\n position: absolute;\n inset: 0;\n block-size: 100%;\n inline-size: 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 flex: 1;\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-inline-size: 100%;\n min-block-size: inherit;\n max-block-size: inherit;\n min-height: inherit;\n min-width: inherit;\n block-size: auto;\n inline-size: inherit;\n height: inherit;\n width: inherit;\n max-height: inherit;\n max-width: inherit;\n aspect-ratio: inherit;\n\n &.hide {\n visibility: hidden;\n\n &.no-height {\n block-size: 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 inset: 0;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n State,\n Prop,\n Watch,\n h,\n ComponentInterface,\n Build,\n} from '@stencil/core';\nimport type { 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 ) {\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\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={Build.isServer ? this.src : this.loadSrc}\n loading={Build.isServer && this.lazy ? 'lazy' : undefined}\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"],"version":3}
1	+ {"file":"img.js","mappings":"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","names":[],"sources":["./src/components/img/img.scss?tag=nano-img&encapsulation=shadow","./src/components/img/img.tsx"],"sourcesContent":[":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 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 flex: 1 1 100%;\n display: flex;\n flex-direction: column;\n min-block-size: inherit;\n max-block-size: inherit;\n max-inline-size: inherit;\n min-height: inherit;\n min-width: inherit;\n block-size: inherit;\n inline-size: inherit;\n height: inherit;\n width: inherit;\n max-height: inherit;\n max-width: inherit;\n aspect-ratio: inherit;\n}\n\n.img__loader,\n.img__observer {\n position: absolute;\n inset: 0;\n block-size: 100%;\n inline-size: 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 flex: 1;\n\n &.loaded {\n opacity: 1;\n filter: blur(0);\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-inline-size: 100%;\n min-block-size: inherit;\n max-block-size: inherit;\n min-height: inherit;\n min-width: inherit;\n block-size: auto;\n inline-size: inherit;\n height: inherit;\n width: inherit;\n max-height: inherit;\n max-width: inherit;\n aspect-ratio: inherit;\n\n &.hide {\n visibility: hidden;\n\n &.no-height {\n block-size: 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 inset: 0;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n State,\n Prop,\n Watch,\n h,\n ComponentInterface,\n Build,\n} from '@stencil/core';\nimport type { 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 ) {\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\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={Build.isServer ? this.src : this.loadSrc}\n loading={Build.isServer && this.lazy ? 'lazy' : undefined}\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"],"version":3}

package/dist/components/index.d.ts CHANGED Viewed

@@ -33,6 +33,7 @@ export { Menu as NanoMenu } from '../types/components/menu/menu';
 export { MenuDrawer as NanoMenuDrawer } from '../types/components/menu-drawer/menu-drawer';
 export { NavItem as NanoNavItem } from '../types/components/nav-item/nav-item';
 export { Option as NanoOption } from '../types/components/option/option';
+export { OverflowNav as NanoOverflowNav } from '../types/components/overflow-nav/overflow-nav';
 export { ProgressBar as NanoProgressBar } from '../types/components/progress-bar/progress-bar';
 export { Range as NanoRange } from '../types/components/range/range';
 export { Rating as NanoRating } from '../types/components/rating/rating';

package/dist/components/index.js CHANGED Viewed

@@ -37,6 +37,7 @@ export { NanoMenu, defineCustomElement as defineCustomElementNanoMenu } from './
 export { NanoMenuDrawer, defineCustomElement as defineCustomElementNanoMenuDrawer } from './nano-menu-drawer.js';
 export { NanoNavItem, defineCustomElement as defineCustomElementNanoNavItem } from './nano-nav-item.js';
 export { NanoOption, defineCustomElement as defineCustomElementNanoOption } from './nano-option.js';
+export { NanoOverflowNav, defineCustomElement as defineCustomElementNanoOverflowNav } from './nano-overflow-nav.js';
 export { NanoProgressBar, defineCustomElement as defineCustomElementNanoProgressBar } from './nano-progress-bar.js';
 export { NanoRange, defineCustomElement as defineCustomElementNanoRange } from './nano-range.js';
 export { NanoRating, defineCustomElement as defineCustomElementNanoRating } from './nano-rating.js';