npm - @nanoporetech-digital/components - Versions diffs - 3.14.0 → 4.1.0 - Mend

@nanoporetech-digital/components 3.14.0 → 4.1.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 (319) hide show

package/dist/collection/components/overflow-nav/overflow-nav.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"overflow-nav.js","sourceRoot":"","sources":["../../../src/components/overflow-nav/overflow-nav.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Host,\n h,\n Element,\n Prop,\n Watch,\n State,\n} from '@stencil/core';\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\n\n/**\n * Primarily used to display navigational items that may not fit on smaller screens.\n *\n * - Accepts any collection of elements\n * - Gives visual cues of 'more' with auto display fade effect and scroll buttons\n * - Auto scrolls to the active item onload\n *\n * @slot - Default slot to place items.\n *\n * @part base - root, wrapper element\n * @part scroller - the scrolling element\n * @part items - the item wrapper element\n * @part indicator - the animated, indicator element\n * @part scroll-button - The buttons shown at either side of the scrolling area\n * @part scroll-button-prev - The button shown at the start of the scrolling area\n * @part scroll-button-next - The button shown at the end of the scrolling area\n */\n\n@Component({\n tag: 'nano-overflow-nav',\n styleUrl: 'overflow-nav.scss',\n shadow: true,\n})\nexport class OverflowNav implements ComponentInterface {\n // public surface\n\n /** Disables the scroll arrow buttons that appear when content overflows */\n @Prop() scrollControls = true;\n\n /** The flex direction of the element */\n @Prop({ reflect: true }) orientation: 'horizontal' | 'vertical' =\n 'horizontal';\n\n /**\n * A function called when an item becomes 'active' (via click or keyboard)\n * @param item\n * @returns void */\n @Prop() activeHandler = (item: HTMLElement) => item.classList.add('active');\n\n /**\n * A function called when an item becomes 'inactive'\n * (because another item was made active)\n * @param item\n * @returns void */\n @Prop() inActiveHandler = (item: HTMLElement) =>\n item.classList.remove('active');\n\n /**\n * A function called to assess an initial, active item\n * @param item\n * @returns void */\n @Prop() isActiveHandler = (item: HTMLElement) =>\n item.classList.contains('active');\n\n // private state\n\n constructor() {\n this.recalculatePositions = debounce(this.recalculatePositions, 50);\n }\n\n private ro?: ResizeObserver;\n private nav?: HTMLElement;\n private itemContainer?: HTMLElement;\n private isRtl?: boolean;\n private endBtn: HTMLNanoIconButtonElement;\n private startBtn: HTMLNanoIconButtonElement;\n private activeIndicator: HTMLElement;\n\n get scrollProp() {\n return this.orientation === 'horizontal' ? 'scrollWidth' : 'scrollHeight';\n }\n\n get clientDimProp() {\n return this.orientation === 'horizontal' ? 'clientWidth' : 'clientHeight';\n }\n\n get scrollOffset() {\n return this.orientation === 'horizontal' ? 'scrollLeft' : 'scrollTop';\n }\n\n @Element() host: HTMLNanoOverflowNavElement;\n\n @State() hasScrollControls = false;\n\n @Watch('hasScrollControls')\n watchScrollControls() {\n if (this.hasScrollControls) this.handleScroll();\n else this.hideControlStart = this.hideControlEnd = true;\n }\n\n @State() hideControlEnd = true;\n\n @Watch('hideControlEnd')\n hideEndBtn() {\n if (!this.endBtn) return;\n this.activateBtn(this.endBtn, !this.hideControlEnd);\n }\n\n @State() hideControlStart = true;\n\n @Watch('hideControlStart')\n hideStartBtn() {\n if (!this.startBtn) return;\n this.activateBtn(this.startBtn, !this.hideControlStart);\n }\n\n // private logic\n\n private activateBtn(btn: HTMLNanoIconButtonElement, activate = true) {\n if (!activate) {\n btn.tabIndex = -1;\n btn.disabled = true;\n btn.classList.remove('is-shown');\n return;\n }\n btn.tabIndex = 0;\n btn.disabled = false;\n btn.classList.add('is-shown');\n }\n\n get allActiveItems() {\n return this.allItems.filter(\n (el: any) => !el.disabled || el.classList.contains('disabled')\n );\n }\n\n get allItems() {\n return getDirectChildren<HTMLElement>(this.host, '*', true);\n }\n\n get activeItem() {\n if (this._activeItem) return this._activeItem;\n return this.allActiveItems.find((el) => this.isActiveHandler(el));\n }\n\n set activeItem(item: HTMLElement) {\n if (\n !item ||\n item === this.activeItem ||\n (item as any).disabled ||\n !this.allActiveItems.includes(item)\n ) {\n return;\n }\n\n this._activeItem = item;\n this.allActiveItems.forEach((el) => {\n if (el === this._activeItem) this.activeHandler(el);\n else this.inActiveHandler(el);\n });\n this.syncActiveItemIndicator();\n this.scrollToActiveItem();\n }\n private _activeItem: HTMLElement;\n\n get navDim() {\n if (!this.nav) return 0;\n\n const computedStyle = getComputedStyle(this.nav);\n let clientDim = this.nav[this.clientDimProp];\n\n if (this.orientation === 'horizontal') {\n return (clientDim -=\n parseFloat(computedStyle.paddingLeft) +\n parseFloat(computedStyle.paddingRight));\n } else {\n return (clientDim -=\n parseFloat(computedStyle.paddingTop) +\n parseFloat(computedStyle.paddingBottom));\n }\n }\n\n private scrollToActiveItem(instant?: boolean) {\n if (!this.nav || !this.activeItem) return;\n requestAnimationFrame(() => {\n this.activeItem.scrollIntoView({\n behavior: instant ? 'auto' : 'smooth',\n block: 'center',\n inline: 'center',\n });\n });\n }\n\n private syncActiveItemIndicator(instant?: boolean) {\n if (!this.activeItem) return;\n\n const item = this.activeItem;\n const width = item.clientWidth || 0;\n const height = item.clientHeight + 2 || 0;\n const offset = getOffset(item, this.itemContainer);\n\n if (!this.activeIndicator) return;\n\n const offsetTop = offset.top;\n const offsetLeft = offset.left;\n\n if (instant) this.activeIndicator.style.transition = 'none';\n\n switch (this.orientation) {\n case 'horizontal':\n this.activeIndicator.style.width = `${width}px`;\n this.activeIndicator.style.height = null;\n this.activeIndicator.style.transform = `translateX(${offsetLeft}px)`;\n break;\n\n case 'vertical':\n this.activeIndicator.style.width = null;\n this.activeIndicator.style.height = `${height}px`;\n this.activeIndicator.style.transform = `translateY(${offsetTop}px)`;\n break;\n }\n setTimeout(() => (this.activeIndicator.style.transition = null), 400);\n }\n\n private updateScrollControls = () => {\n this.hasScrollControls =\n this.nav[this.scrollProp] > this.nav[this.clientDimProp] &&\n this.nav[this.scrollProp] > this.itemContainer[this.clientDimProp];\n this.handleScroll();\n };\n\n private handleScroll = () => {\n if (!this.hasScrollControls) {\n this.hideControlStart = this.hideControlEnd = true;\n return;\n }\n const finishEnd = this.isRtl\n ? this.nav[this.scrollOffset] === 0\n : Math.abs(\n this.nav[this.clientDimProp] -\n (this.nav[this.scrollProp] - this.nav[this.scrollOffset])\n ) < 2;\n\n const finishStart = this.isRtl\n ? Math.abs(\n this.nav[this.scrollProp] +\n this.nav[this.scrollOffset] -\n this.nav[this.clientDimProp]\n ) < 2\n : this.nav[this.scrollOffset] === 0;\n\n if (finishStart) {\n this.hideControlStart = true;\n this.hideControlEnd = false;\n } else if (finishEnd) {\n this.hideControlStart = false;\n this.hideControlEnd = true;\n } else {\n this.hideControlEnd = false;\n this.hideControlStart = false;\n }\n };\n\n private handleBtnClick = (goEnd: boolean = false) => {\n const navDim = this.navDim;\n let scrollAmt;\n if (goEnd) scrollAmt = this.nav[this.scrollOffset] + navDim - 20;\n else scrollAmt = this.nav[this.scrollOffset] - navDim + 20;\n\n try {\n this.nav.scroll({\n left: this.orientation === 'horizontal' ? scrollAmt : 0,\n top: this.orientation === 'vertical' ? scrollAmt : 0,\n behavior: 'smooth',\n });\n } catch (e) {\n this.nav[this.scrollOffset] = scrollAmt;\n }\n };\n\n private slotChangeHandler = () => {\n if (this.allActiveItems.length < 2) return;\n const item = this.allActiveItems.find((el) => this.isActiveHandler(el));\n if (item) this.activeItem = item;\n this.recalculatePositions();\n };\n\n private handleClick = (event: MouseEvent) => {\n if (this.allActiveItems.length < 2) return;\n const foundItem = event\n .composedPath()\n .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n if (foundItem) this.activeItem = foundItem;\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n const foundItem = event\n .composedPath()\n .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n if (foundItem) this.activeItem = foundItem;\n }\n };\n\n private recalculatePositions = (init?: any) => {\n this.updateScrollControls();\n this.syncActiveItemIndicator(init);\n setTimeout(() => this.scrollToActiveItem(init), 300);\n };\n\n // lifecycle\n\n connectedCallback(): void {\n this.isRtl =\n this.orientation === 'horizontal' && !!this.host.closest('[dir=\"rtl\"]');\n\n if (!window['ResizeObserver']) return;\n\n if (this.ro) {\n this.ro.disconnect();\n this.ro = undefined;\n }\n const mo = (this.ro = new ResizeObserver(this.recalculatePositions));\n mo.observe(this.host);\n }\n\n componentDidLoad(): void {\n this.recalculatePositions(true);\n }\n\n disconnectedCallback(): void {\n if (this.ro) {\n this.ro.disconnect();\n this.ro = undefined;\n }\n }\n\n render() {\n return (\n <Host dir={this.isRtl ? 'rtl' : null}>\n <div\n part=\"base\"\n class={{\n onav: true,\n [`onav--${this.orientation}`]: true,\n 'onav--has-scroll-controls': this.hasScrollControls,\n 'onav--has-scroll-controls-start': !this.hideControlStart,\n 'onav--has-scroll-controls-end': !this.hideControlEnd,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"onav__nav\">\n {this.scrollControls && (\n <nano-icon-button\n part=\"scroll-button scroll-button-prev\"\n class={{\n 'onav__scroll-button': true,\n 'onav__scroll-button--start': true,\n }}\n ref={(btn) => (this.startBtn = btn)}\n onClick={() => this.handleBtnClick(false)}\n label=\"Click to scroll\"\n iconName={\n this.orientation === 'horizontal'\n ? 'light/chevron-left'\n : 'light/chevron-up'\n }\n />\n )}\n\n <div\n part=\"scroller\"\n ref={(el) => (this.nav = el)}\n class=\"onav__scroller\"\n onScroll={this.handleScroll}\n >\n <div\n part=\"items\"\n ref={(el) => (this.itemContainer = el)}\n class=\"onav__items\"\n >\n <div\n part=\"indicator\"\n ref={(el) => (this.activeIndicator = el)}\n class=\"onav__active-indicator\"\n />\n <slot onSlotchange={this.slotChangeHandler} />\n </div>\n </div>\n\n {this.scrollControls && (\n <nano-icon-button\n part=\"scroll-button scroll-button-next\"\n class={{\n 'onav__scroll-button': true,\n 'onav__scroll-button--end': true,\n }}\n ref={(btn) => (this.endBtn = btn)}\n onClick={() => this.handleBtnClick(true)}\n label=\"Click to scroll\"\n iconName={\n this.orientation === 'horizontal'\n ? 'light/chevron-right'\n : 'light/chevron-down'\n }\n />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/resize-observe/resize-observe.js CHANGED Viewed

@@ -46,7 +46,7 @@ export class ResizeObserve {
       if (hasChanged)
         this.applyChanges(changedStates);
       else if (!this.classNames.includes('is-ready'))
-        this.classNames = ['is-ready'];
+        this.classNames = [...this.classNames, 'is-ready'];
     };
     this.currentWidth = undefined;
     this.currentHeight = undefined;
@@ -187,10 +187,10 @@ export class ResizeObserve {
     this.ro.observe(this.host);
   }
   componentWillLoad() {
+    this.classNames = Array.from(this.host.classList);
     this.statesChanged();
     // set all class as 'not-' by deafult
     this.applyChanges(this.appliedStates);
-    this.classNames = Array.from(this.host.classList);
     if (!this.currentWidth && !this.currentHeight) {
       readTask(() => {
         const { width, height } = this.host.getBoundingClientRect();
@@ -219,7 +219,7 @@ export class ResizeObserve {
   }
   static get is() { return "nano-resize-observe"; }
   static get encapsulation() { return "shadow"; }
-  static get styles() { return "nano-resize-observe { display: block }"; }
+  static get styles() { return "nano-resize-observe { display: contents }"; }
   static get properties() {
     return {
       "notifyContentFit": {
@@ -253,7 +253,7 @@ export class ResizeObserve {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\nFormat: `states=\"800w, 300h class1 class2\"`"
+          "text": "string list of sizes and optional class-names.\nAdds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\nFormat: `states=\"800w, 300h class1 class2\"`"
         },
         "getter": false,
         "setter": false,
@@ -315,7 +315,7 @@ export class ResizeObserve {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Fires when the content either begins or stops to fit. Will only work when `notifyContentFit` is set."
+          "text": "Fires when the content either begins or stops fitting.\nWill only work when `notifyContentFit` is set."
         },
         "complexType": {
           "original": "{\n    x: boolean;\n    y: boolean;\n  }",

package/dist/collection/components/resize-observe/resize-observe.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"resize-observe.js","sourceRoot":"","sources":["../../../src/components/resize-observe/resize-observe.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Host,\n State,\n Watch,\n ComponentInterface,\n Event,\n EventEmitter,\n readTask,\n} from '@stencil/core';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n h: Map<number, ResizeObserverState>;\n w: Map<number, ResizeObserverState>;\n}\n\n/*\n A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names.\n * Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * Additionally, can fire events when content no-longer fits within the element.\n * @slot - Main slot for any content.\n * @slot content-fit-x - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-x - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n * @slot content-fit-y - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-y - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n /\n@Component({\n tag: 'nano-resize-observe',\n styles: `nano-resize-observe { display: block }`,\n shadow: true,\n})\nexport class ResizeObserve implements ComponentInterface {\n private ro: ResizeObserver;\n private appliedStates: StateMaps;\n private isReady = false;\n\n @Element() host: HTMLNanoResizeObserveElement;\n @State() currentWidth: number;\n @State() currentHeight: number;\n @State() classNames: string[] = [];\n @State() contentFitX = null;\n @State() contentFitY = null;\n\n @Watch('classNames')\n classNameChange() {\n this.host.className = this.classNames.join(' ');\n if (!this.isReady && this.classNames.includes('is-ready')) {\n this.isReady = true;\n this.nanoResizeObserverReady.emit();\n }\n }\n\n /* Fire `nanoResizeContentFitChange` events notifying\n * whether content currently fits or does not on the x, y or both axis'.\n * Also makes the `content-fit-...` slots available /\n @Prop() notifyContentFit: 'x' \| 'y' \| 'xy';\n\n /* string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n * Format: `states=\"800w, 300h class1 class2\"` /\n @Prop() states: string;\n\n @Watch('states')\n newStatesProp() {\n this.statesChanged();\n }\n\n /* A resize break point is switched on or off /\n @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n /* Fires after the initial loading and assessment /\n @Event() nanoResizeObserverReady!: EventEmitter<void>;\n\n /* Fires when the content either begins or stops to fit. Will only work when `notifyContentFit` is set. */\n @Event() nanoResizeContentFitChange!: EventEmitter<{\n x: boolean;\n y: boolean;\n }>;\n\n @Watch('currentHeight')\n @Watch('currentWidth')\n dimensionChanged() {\n this.assessChanges();\n }\n\n @Watch('states')\n statesChanged() {\n if (!this.states) return;\n\n const toBpDir = (bpDir: string) => {\n const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n };\n this.appliedStates = { h: new Map(), w: new Map() };\n\n // parse state string\n this.states.split(',').map((st) => {\n st = st.trim();\n if (st.includes(' ')) {\n const [key, ...classes] = st.split(' ');\n const { bp, dir } = toBpDir(key);\n this.appliedStates[dir as keyof StateMaps].set(bp, {\n states: classes,\n applied: false,\n });\n } else {\n const { bp, dir } = toBpDir(st);\n this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n }\n });\n }\n\n private assesContentFit() {\n if (!this.notifyContentFit) return;\n\n const findNonContentsEle = (ele: Element) => {\n if (window.getComputedStyle(ele).display !== 'contents') return ele;\n\n const recurse = (e: Element): Element \| null => {\n return Array.from(e.children).find((cEle: HTMLElement) => {\n if (window.getComputedStyle(cEle).display !== 'contents') return cEle;\n recurse(cEle);\n });\n };\n return recurse(ele);\n };\n\n let didChange = false;\n const measureEle = findNonContentsEle(this.host.firstElementChild);\n\n if (measureEle) {\n if (this.notifyContentFit && this.notifyContentFit.includes('x')) {\n if (\n this.currentWidth < measureEle.scrollWidth &&\n this.contentFitX !== false\n ) {\n didChange = true;\n this.contentFitX = false;\n } else if (\n this.currentWidth >= measureEle.scrollWidth &&\n this.contentFitX !== true\n ) {\n didChange = true;\n this.contentFitX = true;\n }\n }\n\n if (this.notifyContentFit && this.notifyContentFit.includes('y')) {\n if (\n this.currentHeight < measureEle.scrollHeight &&\n this.contentFitY !== false\n ) {\n didChange = true;\n this.contentFitY = false;\n } else if (\n this.currentHeight >= measureEle.scrollHeight &&\n this.contentFitY !== true\n ) {\n didChange = true;\n this.contentFitY = true;\n }\n }\n\n if (didChange) {\n this.nanoResizeContentFitChange.emit({\n x: this.contentFitX,\n y: this.contentFitY,\n });\n }\n }\n }\n\n private assessChanges = () => {\n if (!this.currentWidth && !this.currentHeight) return;\n readTask(() => this.assesContentFit());\n\n if (!this.states \|\| !this.appliedStates) return;\n\n const changedStates: StateMaps = { h: new Map(), w: new Map() };\n let hasChanged = false;\n\n Object.keys(this.appliedStates).forEach((dimType) => {\n let dim: number;\n if (dimType === 'h') dim = this.currentHeight;\n else dim = this.currentWidth;\n\n this.appliedStates[dimType].forEach(\n (state: ResizeObserverState, bp: number) => {\n if (dim >= bp && state.applied === false) {\n state.applied = true;\n changedStates[dimType].set(bp, state);\n hasChanged = true;\n } else if (dim < bp && state.applied === true) {\n state.applied = false;\n changedStates[dimType].set(bp, state);\n hasChanged = true;\n }\n }\n );\n });\n if (hasChanged) this.applyChanges(changedStates);\n else if (!this.classNames.includes('is-ready'))\n this.classNames = ['is-ready'];\n };\n\n private applyChanges(changes: StateMaps) {\n if (!this.states) return;\n\n let classNames = [...this.classNames];\n Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n changes[dimType].forEach((state) => {\n if (!state.states) return;\n state.states.map((st) => {\n if (state.applied) {\n classNames.push(st);\n classNames = classNames.filter((cl) => cl !== 'not-' + st);\n } else {\n classNames.push('not-' + st);\n classNames = classNames.filter((cl) => cl !== st);\n }\n });\n });\n });\n this.classNames = ['is-ready', ...classNames];\n this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n }\n\n private toSimpleObj(stateMaps: StateMaps) {\n const retObj = {};\n Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n retObj[bp + dimType] = state.applied;\n });\n });\n return retObj;\n }\n\n private attachRO() {\n if (!window['ResizeObserver']) return;\n\n this.ro = new ResizeObserver(() => {\n const { width, height } = this.host.getBoundingClientRect();\n this.currentWidth = Math.ceil(width);\n this.currentHeight = Math.ceil(height);\n });\n this.ro.observe(this.host);\n }\n\n componentWillLoad() {\n this.statesChanged();\n // set all class as 'not-' by deafult\n this.applyChanges(this.appliedStates);\n\n this.classNames = Array.from(this.host.classList);\n\n if (!this.currentWidth && !this.currentHeight) {\n readTask(() => {\n const { width, height } = this.host.getBoundingClientRect();\n this.currentWidth = Math.ceil(width);\n this.currentHeight = Math.ceil(height);\n });\n } else {\n this.assessChanges();\n }\n }\n\n connectedCallback() {\n if (!this.ro) this.attachRO();\n }\n\n disconnectedCallback() {\n if (this.ro) this.ro.disconnect();\n }\n\n render() {\n return (\n <Host>\n <slot />\n {!!this.notifyContentFit &&\n (this.contentFitX !== null \|\| this.contentFitY !== null) && [\n !!this.contentFitX ? (\n <slot name=\"content-fit-x\" />\n ) : (\n <slot name=\"content-nofit-x\" />\n ),\n !!this.contentFitY ? (\n <slot name=\"content-fit-y\" />\n ) : (\n <slot name=\"content-nofit-y\" />\n ),\n ]}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"resize-observe.js","sourceRoot":"","sources":["../../../src/components/resize-observe/resize-observe.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Host,\n State,\n Watch,\n ComponentInterface,\n Event,\n EventEmitter,\n readTask,\n} from '@stencil/core';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n h: Map<number, ResizeObserverState>;\n w: Map<number, ResizeObserverState>;\n}\n\n/*\n A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names.\n * Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * Additionally, can fire events when content no-longer fits within the element.\n * @slot - Main slot for any content.\n * @slot content-fit-x - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-x - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n * @slot content-fit-y - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-y - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n /\n@Component({\n tag: 'nano-resize-observe',\n styles: `nano-resize-observe { display: contents }`,\n shadow: true,\n})\nexport class ResizeObserve implements ComponentInterface {\n private ro: ResizeObserver;\n private appliedStates: StateMaps;\n private isReady = false;\n\n @Element() host: HTMLNanoResizeObserveElement;\n @State() currentWidth: number;\n @State() currentHeight: number;\n @State() classNames: string[] = [];\n @State() contentFitX = null;\n @State() contentFitY = null;\n\n @Watch('classNames')\n classNameChange() {\n this.host.className = this.classNames.join(' ');\n if (!this.isReady && this.classNames.includes('is-ready')) {\n this.isReady = true;\n this.nanoResizeObserverReady.emit();\n }\n }\n\n /* Fire `nanoResizeContentFitChange` events notifying\n * whether content currently fits or does not on the x, y or both axis'.\n * Also makes the `content-fit-...` slots available /\n @Prop() notifyContentFit: 'x' \| 'y' \| 'xy';\n\n /* string list of sizes and optional class-names.\n * Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n * Format: `states=\"800w, 300h class1 class2\"` /\n @Prop() states: string;\n\n @Watch('states')\n newStatesProp() {\n this.statesChanged();\n }\n\n /* A resize break point is switched on or off /\n @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n /* Fires after the initial loading and assessment /\n @Event() nanoResizeObserverReady!: EventEmitter<void>;\n\n /* Fires when the content either begins or stops fitting.\n * Will only work when `notifyContentFit` is set. */\n @Event() nanoResizeContentFitChange!: EventEmitter<{\n x: boolean;\n y: boolean;\n }>;\n\n @Watch('currentHeight')\n @Watch('currentWidth')\n dimensionChanged() {\n this.assessChanges();\n }\n\n @Watch('states')\n statesChanged() {\n if (!this.states) return;\n\n const toBpDir = (bpDir: string) => {\n const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n };\n this.appliedStates = { h: new Map(), w: new Map() };\n\n // parse state string\n this.states.split(',').map((st) => {\n st = st.trim();\n if (st.includes(' ')) {\n const [key, ...classes] = st.split(' ');\n const { bp, dir } = toBpDir(key);\n this.appliedStates[dir as keyof StateMaps].set(bp, {\n states: classes,\n applied: false,\n });\n } else {\n const { bp, dir } = toBpDir(st);\n this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n }\n });\n }\n\n private assesContentFit() {\n if (!this.notifyContentFit) return;\n\n const findNonContentsEle = (ele: Element) => {\n if (window.getComputedStyle(ele).display !== 'contents') return ele;\n\n const recurse = (e: Element): Element \| null => {\n return Array.from(e.children).find((cEle: HTMLElement) => {\n if (window.getComputedStyle(cEle).display !== 'contents') return cEle;\n recurse(cEle);\n });\n };\n return recurse(ele);\n };\n\n let didChange = false;\n const measureEle = findNonContentsEle(this.host.firstElementChild);\n\n if (measureEle) {\n if (this.notifyContentFit && this.notifyContentFit.includes('x')) {\n if (\n this.currentWidth < measureEle.scrollWidth &&\n this.contentFitX !== false\n ) {\n didChange = true;\n this.contentFitX = false;\n } else if (\n this.currentWidth >= measureEle.scrollWidth &&\n this.contentFitX !== true\n ) {\n didChange = true;\n this.contentFitX = true;\n }\n }\n\n if (this.notifyContentFit && this.notifyContentFit.includes('y')) {\n if (\n this.currentHeight < measureEle.scrollHeight &&\n this.contentFitY !== false\n ) {\n didChange = true;\n this.contentFitY = false;\n } else if (\n this.currentHeight >= measureEle.scrollHeight &&\n this.contentFitY !== true\n ) {\n didChange = true;\n this.contentFitY = true;\n }\n }\n\n if (didChange) {\n this.nanoResizeContentFitChange.emit({\n x: this.contentFitX,\n y: this.contentFitY,\n });\n }\n }\n }\n\n private assessChanges = () => {\n if (!this.currentWidth && !this.currentHeight) return;\n readTask(() => this.assesContentFit());\n\n if (!this.states \|\| !this.appliedStates) return;\n\n const changedStates: StateMaps = { h: new Map(), w: new Map() };\n let hasChanged = false;\n\n Object.keys(this.appliedStates).forEach((dimType) => {\n let dim: number;\n if (dimType === 'h') dim = this.currentHeight;\n else dim = this.currentWidth;\n\n this.appliedStates[dimType].forEach(\n (state: ResizeObserverState, bp: number) => {\n if (dim >= bp && state.applied === false) {\n state.applied = true;\n changedStates[dimType].set(bp, state);\n hasChanged = true;\n } else if (dim < bp && state.applied === true) {\n state.applied = false;\n changedStates[dimType].set(bp, state);\n hasChanged = true;\n }\n }\n );\n });\n if (hasChanged) this.applyChanges(changedStates);\n else if (!this.classNames.includes('is-ready'))\n this.classNames = [...this.classNames, 'is-ready'];\n };\n\n private applyChanges(changes: StateMaps) {\n if (!this.states) return;\n\n let classNames = [...this.classNames];\n Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n changes[dimType].forEach((state) => {\n if (!state.states) return;\n state.states.map((st) => {\n if (state.applied) {\n classNames.push(st);\n classNames = classNames.filter((cl) => cl !== 'not-' + st);\n } else {\n classNames.push('not-' + st);\n classNames = classNames.filter((cl) => cl !== st);\n }\n });\n });\n });\n this.classNames = ['is-ready', ...classNames];\n this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n }\n\n private toSimpleObj(stateMaps: StateMaps) {\n const retObj = {};\n Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n retObj[bp + dimType] = state.applied;\n });\n });\n return retObj;\n }\n\n private attachRO() {\n if (!window['ResizeObserver']) return;\n\n this.ro = new ResizeObserver(() => {\n const { width, height } = this.host.getBoundingClientRect();\n this.currentWidth = Math.ceil(width);\n this.currentHeight = Math.ceil(height);\n });\n this.ro.observe(this.host);\n }\n\n componentWillLoad() {\n this.classNames = Array.from(this.host.classList);\n\n this.statesChanged();\n // set all class as 'not-' by deafult\n this.applyChanges(this.appliedStates);\n\n if (!this.currentWidth && !this.currentHeight) {\n readTask(() => {\n const { width, height } = this.host.getBoundingClientRect();\n this.currentWidth = Math.ceil(width);\n this.currentHeight = Math.ceil(height);\n });\n } else {\n this.assessChanges();\n }\n }\n\n connectedCallback() {\n if (!this.ro) this.attachRO();\n }\n\n disconnectedCallback() {\n if (this.ro) this.ro.disconnect();\n }\n\n render() {\n return (\n <Host>\n <slot />\n {!!this.notifyContentFit &&\n (this.contentFitX !== null \|\| this.contentFitY !== null) && [\n !!this.contentFitX ? (\n <slot name=\"content-fit-x\" />\n ) : (\n <slot name=\"content-nofit-x\" />\n ),\n !!this.contentFitY ? (\n <slot name=\"content-fit-y\" />\n ) : (\n <slot name=\"content-nofit-y\" />\n ),\n ]}\n </Host>\n );\n }\n}\n"]}

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

@@ -13,8 +13,8 @@
 :host {
   /**
    * @prop --base-color-rgb: default var(--nano-skeleton-rgb, 228 230 232);
-   * @prop --color: default var(--nano-skeleton-color, rgb(var(--base-color-rgb), 1));
-   * @prop --tint: default var(--nano-skeleton-tint, rgb(var(--base-color-rgb), .3));
+   * @prop --color: default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));
+   * @prop --tint: default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));
    */
   --base-color-rgb: var(--nano-skeleton-rgb, 228 230 232);
   --color: var(--nano-skeleton-color, rgb(var(--base-color-rgb) / 100%));

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

@@ -299,7 +299,7 @@ export class Slides {
       // just boots and brances to make sure it's the correct size oninit
       const ro = (this.resizeO = new ResizeObserver(() => {
         flick.resize();
-        this.resizeO.disconnect();
+        // this.resizeO.disconnect();
       }));
       ro.observe(this.host);
     }, 100);

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 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"]}
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/tabs/tab.css CHANGED Viewed

@@ -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/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';