@nanoporetech-digital/components 5.7.0 → 5.8.1

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 (110) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/nano-components.cjs.js +1 -1
  4. package/dist/cjs/nano-details.cjs.entry.js +74 -56
  5. package/dist/cjs/nano-details.cjs.entry.js.map +1 -1
  6. package/dist/cjs/nano-grid_2.cjs.entry.js +10 -8
  7. package/dist/cjs/nano-grid_2.cjs.entry.js.map +1 -1
  8. package/dist/cjs/nano-slide.cjs.entry.js +1 -1
  9. package/dist/cjs/nano-slide.cjs.entry.js.map +1 -1
  10. package/dist/cjs/nano-slides.cjs.entry.js +1 -1
  11. package/dist/cjs/nano-slides.cjs.entry.js.map +1 -1
  12. package/dist/cjs/nano-tab-group.cjs.entry.js +1 -1
  13. package/dist/cjs/nano-tab-group.cjs.entry.js.map +1 -1
  14. package/dist/cjs/nano-tab.cjs.entry.js +2 -2
  15. package/dist/cjs/nano-tab.cjs.entry.js.map +1 -1
  16. package/dist/cjs/{nano-table-e0a0c40f.js → nano-table-0f4ea38f.js} +15 -5
  17. package/dist/cjs/nano-table-0f4ea38f.js.map +1 -0
  18. package/dist/cjs/nano-table.cjs.entry.js +1 -1
  19. package/dist/cjs/{table.worker-249333f1.js → table.worker-ba6685a0.js} +2 -2
  20. package/dist/cjs/table.worker-ba6685a0.js.map +1 -0
  21. package/dist/collection/components/details/details.css +29 -54
  22. package/dist/collection/components/details/details.js +109 -81
  23. package/dist/collection/components/details/details.js.map +1 -1
  24. package/dist/collection/components/grid/grid.js +19 -17
  25. package/dist/collection/components/grid/grid.js.map +1 -1
  26. package/dist/collection/components/slides/slide.css +4 -0
  27. package/dist/collection/components/slides/slides.css +2 -1
  28. package/dist/collection/components/table/table-interface.js.map +1 -1
  29. package/dist/collection/components/table/table.cell.js +13 -3
  30. package/dist/collection/components/table/table.cell.js.map +1 -1
  31. package/dist/collection/components/table/table.js +5 -2
  32. package/dist/collection/components/table/table.js.map +1 -1
  33. package/dist/collection/components/tabs/tab-group.js +1 -1
  34. package/dist/collection/components/tabs/tab-group.js.map +1 -1
  35. package/dist/collection/components/tabs/tab.js +2 -2
  36. package/dist/collection/components/tabs/tab.js.map +1 -1
  37. package/dist/components/grid.js +19 -17
  38. package/dist/components/grid.js.map +1 -1
  39. package/dist/components/nano-details.js +77 -62
  40. package/dist/components/nano-details.js.map +1 -1
  41. package/dist/components/nano-slide.js +1 -1
  42. package/dist/components/nano-slide.js.map +1 -1
  43. package/dist/components/nano-slides.js +1 -1
  44. package/dist/components/nano-slides.js.map +1 -1
  45. package/dist/components/nano-tab-group.js +1 -1
  46. package/dist/components/nano-tab-group.js.map +1 -1
  47. package/dist/components/nano-tab.js +2 -2
  48. package/dist/components/nano-tab.js.map +1 -1
  49. package/dist/components/table.js +13 -3
  50. package/dist/components/table.js.map +1 -1
  51. package/dist/esm/loader.js +1 -1
  52. package/dist/esm/nano-components.js +1 -1
  53. package/dist/esm/nano-details.entry.js +75 -57
  54. package/dist/esm/nano-details.entry.js.map +1 -1
  55. package/dist/esm/nano-grid_2.entry.js +10 -8
  56. package/dist/esm/nano-grid_2.entry.js.map +1 -1
  57. package/dist/esm/nano-slide.entry.js +1 -1
  58. package/dist/esm/nano-slide.entry.js.map +1 -1
  59. package/dist/esm/nano-slides.entry.js +1 -1
  60. package/dist/esm/nano-slides.entry.js.map +1 -1
  61. package/dist/esm/nano-tab-group.entry.js +1 -1
  62. package/dist/esm/nano-tab-group.entry.js.map +1 -1
  63. package/dist/esm/nano-tab.entry.js +2 -2
  64. package/dist/esm/nano-tab.entry.js.map +1 -1
  65. package/dist/esm/{nano-table-d769b1dd.js → nano-table-cc0fc046.js} +15 -5
  66. package/dist/esm/nano-table-cc0fc046.js.map +1 -0
  67. package/dist/esm/nano-table.entry.js +1 -1
  68. package/dist/esm/{table.worker-cb6af8ab.js → table.worker-ca7b069b.js} +2 -2
  69. package/dist/esm/table.worker-ca7b069b.js.map +1 -0
  70. package/dist/nano-components/nano-components.esm.js +1 -1
  71. package/dist/nano-components/nano-components.esm.js.map +1 -1
  72. package/dist/nano-components/p-20086faa.entry.js +5 -0
  73. package/dist/nano-components/p-20086faa.entry.js.map +1 -0
  74. package/dist/nano-components/{p-d62b48bc.entry.js → p-3cac5f6d.entry.js} +2 -2
  75. package/dist/nano-components/{p-d62b48bc.entry.js.map → p-3cac5f6d.entry.js.map} +1 -1
  76. package/dist/nano-components/p-3d8fb8a1.entry.js +5 -0
  77. package/dist/nano-components/p-3d8fb8a1.entry.js.map +1 -0
  78. package/dist/nano-components/{p-94b4479b.js → p-43573870.js} +2 -2
  79. package/dist/nano-components/{p-6ae6d4a6.entry.js → p-4b7e85b2.entry.js} +2 -2
  80. package/dist/nano-components/p-5ca9275c.entry.js +5 -0
  81. package/dist/nano-components/p-5ca9275c.entry.js.map +1 -0
  82. package/dist/nano-components/{p-bedada62.entry.js → p-92195a83.entry.js} +2 -2
  83. package/dist/nano-components/{p-bedada62.entry.js.map → p-92195a83.entry.js.map} +1 -1
  84. package/dist/nano-components/{p-6106c383.entry.js → p-935968b8.entry.js} +3 -3
  85. package/dist/nano-components/{p-6106c383.entry.js.map → p-935968b8.entry.js.map} +1 -1
  86. package/dist/nano-components/p-d2705006.js +5 -0
  87. package/dist/nano-components/p-d2705006.js.map +1 -0
  88. package/dist/types/components/details/details.d.ts +18 -25
  89. package/dist/types/components/grid/grid.d.ts +1 -0
  90. package/dist/types/components/table/table-interface.d.ts +2 -1
  91. package/dist/types/components/table/table.d.ts +1 -1
  92. package/dist/types/components.d.ts +24 -10
  93. package/docs-json.json +63 -67
  94. package/docs-vscode.json +8 -33
  95. package/hydrate/index.js +118 -82
  96. package/package.json +2 -2
  97. package/dist/cjs/nano-table-e0a0c40f.js.map +0 -1
  98. package/dist/cjs/table.worker-249333f1.js.map +0 -1
  99. package/dist/esm/nano-table-d769b1dd.js.map +0 -1
  100. package/dist/esm/table.worker-cb6af8ab.js.map +0 -1
  101. package/dist/nano-components/p-3018d4df.js +0 -5
  102. package/dist/nano-components/p-3018d4df.js.map +0 -1
  103. package/dist/nano-components/p-50f2fdb3.entry.js +0 -5
  104. package/dist/nano-components/p-50f2fdb3.entry.js.map +0 -1
  105. package/dist/nano-components/p-9d65f5de.entry.js +0 -5
  106. package/dist/nano-components/p-9d65f5de.entry.js.map +0 -1
  107. package/dist/nano-components/p-a03993f9.entry.js +0 -5
  108. package/dist/nano-components/p-a03993f9.entry.js.map +0 -1
  109. /package/dist/nano-components/{p-6ae6d4a6.entry.js.map → p-43573870.js.map} +0 -0
  110. /package/dist/nano-components/{p-94b4479b.js.map → p-4b7e85b2.entry.js.map} +0 -0
package/dist/esm/nano-tab-group.entry.js CHANGED
@@ -417,7 +417,7 @@ const TabGroup = class {
417
417
  }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { class: "nano-tab-group__nav-container", part: "nav" }, this.placement === 'top' && (h("button", { disabled: !this.hasScrollControls, class: {
418
418
  'nano-tab-group__scroll-button': true,
419
419
  'nano-tab-group__scroll-button--left': true,
420
- }, ref: (btn) => (this.leftBtn = btn), onClick: () => this.handleBtnClick(false) }, h("nano-icon", { name: "light/chevron-left" }))), h("div", { ref: (el) => (this.nav = el), class: "nano-tab-group__nav", onScroll: this.handleTabScroll }, h("div", { ref: (el) => (this.tabs = el), part: "tabs", class: "nano-tab-group__tabs", role: "tablist" }, h("div", { ref: (el) => (this.activeTabIndicator = el), part: "active-tab-indicator", class: "nano-tab-group__active-tab-indicator" }), h("slot", { name: "tabs", onSlotchange: this.handleTabSlotChange }))), this.placement === 'top' && (h("button", { disabled: !this.hasScrollControls, class: {
420
+ }, ref: (btn) => (this.leftBtn = btn), onClick: () => this.handleBtnClick(false) }, h("nano-icon", { name: "light/chevron-left" }))), h("div", { ref: (el) => (this.nav = el), class: "nano-tab-group__nav", onScroll: this.handleTabScroll }, h("div", { ref: (el) => (this.tabs = el), part: "tabs", class: "nano-tab-group__tabs", role: "tablist", "aria-orientation": this.placement === 'start' ? 'vertical' : 'horizontal' }, h("div", { ref: (el) => (this.activeTabIndicator = el), part: "active-tab-indicator", class: "nano-tab-group__active-tab-indicator" }), h("slot", { name: "tabs", onSlotchange: this.handleTabSlotChange }))), this.placement === 'top' && (h("button", { disabled: !this.hasScrollControls, class: {
421
421
  'nano-tab-group__scroll-button': true,
422
422
  'nano-tab-group__scroll-button--right': true,
423
423
  }, ref: (btn) => (this.rightBtn = btn), onClick: () => this.handleBtnClick(true) }, h("nano-icon", { name: "light/chevron-right" })))), h("slot", { name: "tab-content-header" }), h("div", { part: "body", class: "nano-tab-group__body", onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("slot", { onSlotchange: this.handleContentSlotChange })))));
package/dist/esm/nano-tab-group.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"nano-tab-group.entry.js","mappings":"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","names":[],"sources":["./src/components/tabs/tab-group.scss?tag=nano-tab-group&encapsulation=shadow","./src/components/tabs/tab-group.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --indicator-transition: Only relevant to placement 'start'. defaults to #{$transition-fast};\n * @prop --indicator-color: defaults to #{map.get($colors, lightblue)} on placement 'top' and #{map.get($colors, blue)} on placement 'start';\n * @prop --indicator-track-color: Only relevant to placement 'start'. defaults to #{map.get($colors, lightgrey)};\n * @prop --indicator-size: defaults to 5px on placement 'top' and 2px on placement 'start';\n\n * @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --background-rgb: will be used as the default background colour for tabs and content. defaults to #{$layer-bg-color-rgb};\n * @prop --shadow-opacity: opacity of the shadow behind tabs. defaults to 0.1;\n * @prop --scroll-btn-color: defaults to 'currentcolor';\n\n * @prop --content-padding: defaults to 2rem 2.5rem;\n * @prop --content-bg: defaults to rgb(var(--background-rgb));\n * @prop --content-border-radius: defaults to `var(--border-radius)` `position=\"top\"`. `0 var(--border-radius) var(--border-radius) 0` `position=\"start\"`;\n\n * @prop --tabs-padding-start: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n * @prop --tabs-padding-end: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n * @prop --tabs-padding-top: defaults to 0;\n * @prop --tabs-padding-bottom: defaults to 0;\n * @prop --tabs-bg-rgb: defaults to var(--bg-color);\n * @prop --tab-border-radius: defaults to `var(--border-radius) var(--border-radius) 0 0` `position=\"top\"`. `0` `position=\"start\"`. ;\n * @prop --tab-text-color: defaults to #{map.get($colors, blue)} on placement 'top' and #{map.get($colors, darkgrey)} on placement 'start';\n * @prop --fade-transparency: controls the strength of the fade on overflowing tabs, defaults to 0;\n */\n\n:host {\n --indicator-transition: #{$transition-fast};\n --indicator-color: #{map.get($colors, lightblue)};\n --indicator-track-color: #{map.get($colors, lightgrey)};\n --indicator-size: 0;\n --border-radius: #{$layer-border-radius};\n --background-rgb: #{$layer-bg-color-rgb};\n --scroll-btn-color: 'currentColor';\n --content-padding: 2rem 2.5rem;\n --content-bg: rgb(var(--background-rgb));\n --content-border-radius: var(--border-radius);\n --tabs-padding-start: 2.5rem;\n --tabs-padding-end: 2.5rem;\n --tabs-padding-top: 0;\n --tabs-padding-bottom: 0;\n --tabs-container-bg: 'transparent';\n --tabs-bg-rgb: var(--background-rgb);\n --tab-border-radius: var(--border-radius) var(--border-radius) 0 0;\n --tab-text-color: #{map.get($colors, blue)};\n --shadow-opacity: 0.1;\n --fade-transparency: 0;\n\n display: block;\n position: relative;\n z-index: #{$layer-index-raised};\n\n @media only screen and (max-width: 768px) {\n --tabs-padding-start: 1.5rem;\n --tabs-padding-end: 1.5rem;\n }\n\n ::slotted(nano-tab) {\n --tab-indicator-color: var(--indicator-color);\n --bg-rgb: var(--tabs-bg-rgb);\n --border-radius: var(--tab-border-radius);\n --grab-offset-x: var(--tabs-padding-start);\n }\n}\n\n:host([placement='start']) {\n --content-border-radius: 0 var(--border-radius) var(--border-radius) 0;\n --content-padding: 1rem;\n --tab-border-radius: 0;\n --tabs-padding-start: 0;\n --tabs-padding-end: 0;\n --tabs-padding-top: 0;\n --tabs-padding-bottom: 0;\n --tab-text-color: #{map.get($colors, darkgrey)};\n --indicator-color: #{map.get($colors, blue)};\n --indicator-size: 2px;\n}\n\n:host(.nano-color) {\n --indicator-color: var(--nano-color-tint, #{nano-color(primary, tint)});\n --tab-text-color: rgb(var(--nano-color-base-rgb) / 70%);\n\n ::slotted(nano-tab) {\n --active-text-color: var(--nano-color-shade, #{nano-color(primary, shade)});\n }\n}\n\n.nano-tab-group {\n display: flex;\n border-radius: 0;\n width: 100%;\n flex: inherit;\n\n &__tabs {\n display: flex;\n position: relative;\n width: 100%;\n }\n\n &__active-tab-indicator {\n position: absolute;\n transition:\n var(--indicator-transition) transform ease,\n var(--indicator-transition) width ease;\n }\n\n &__body {\n background: var(--content-bg);\n }\n\n .nano-tab-group__nav-container {\n position: relative;\n display: flex;\n background: var(--tabs-container-bg);\n }\n\n button {\n appearance: none;\n background-color: transparent;\n }\n\n &__scroll-button {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n inset-block: 0;\n border: unset;\n z-index: 2;\n transition: #{$transition-fast} ease opacity;\n opacity: 0;\n color: var(--scroll-btn-color);\n\n &:focus {\n outline: none;\n }\n\n &.is-shown {\n opacity: 1;\n }\n\n &:focus-visible {\n box-shadow: #{$control-focus-style} inset;\n }\n\n &--left {\n inset-inline-start: 0;\n }\n\n &--right {\n inset-inline-end: 0;\n }\n\n nano-icon {\n font-size: 16px;\n }\n }\n\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n // Top\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n &--top {\n flex-direction: column;\n\n .nano-tab-group__nav-container {\n &::after {\n content: '';\n width: 86%;\n box-shadow: 0 10px 40px 10px rgb(0 0 0 / var(--shadow-opacity));\n height: 10px;\n position: absolute;\n inset-inline-start: 7%;\n inset-block-end: -10px;\n border-radius: 10px;\n z-index: -1;\n }\n }\n\n .nano-tab-group__nav {\n @include hide-scrollbar();\n\n padding-inline: var(--tabs-padding-start) var(--tabs-padding-end);\n padding-block: var(--tabs-padding-top) var(--tabs-padding-bottom);\n display: flex;\n overflow-x: auto;\n overflow-y: hidden;\n transition: #{$transition-medium} ease;\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');\n mask-repeat: no-repeat;\n mask-image:\n linear-gradient(\n to left,\n rgb(0 0 0 / var(--fade-transparency)) 0,\n rgb(0 0 0 / var(--fade-transparency)) var(--tabs-padding-start),\n rgb(0 0 0 / 100%) calc(var(--tabs-padding-start) * 2),\n rgb(0 0 0 / 100%) calc(100% - (var(--tabs-padding-end) * 2)),\n rgb(0 0 0 / var(--fade-transparency))\n calc(100% - var(--tabs-padding-end)),\n rgb(0 0 0 / var(--fade-transparency))\n );\n mask-size: calc(100% + calc(var(--tabs-padding-end) * 4));\n mask-position: calc(var(--tabs-padding-end) * -2);\n\n &::after {\n content: ' ';\n padding-inline: 0 var(--tabs-padding-end);\n padding-block: var(--tabs-padding-top) var(--tabs-padding-bottom);\n line-height: 1;\n flex: 0 0 auto;\n }\n }\n\n &.nano-tab-group--has-scroll-controls-left {\n .nano-tab-group__nav {\n mask-position: 0;\n mask-size: calc(100% + (var(--tabs-padding-end) * 2));\n }\n }\n\n &.nano-tab-group--has-scroll-controls-right {\n .nano-tab-group__nav {\n mask-position: calc(var(--tabs-padding-end) * -1);\n mask-size: calc(100% + var(--tabs-padding-end));\n }\n }\n\n &.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right {\n .nano-tab-group__nav {\n mask-size: 100%;\n mask-position: 0;\n }\n }\n\n .nano-tab-group__tabs {\n flex: 1 1 auto;\n position: relative;\n flex-direction: row;\n text-align: center;\n color: var(--tab-text-color);\n width: auto;\n }\n\n .nano-tab-group__active-tab-indicator {\n inset-block-end: -2px;\n border-block-end: solid var(--indicator-size) var(--indicator-color);\n }\n\n .nano-tab-group__body {\n order: 2;\n background: var(--content-bg);\n position: relative;\n overflow: hidden;\n width: auto;\n display: flex;\n justify-content: center;\n padding: var(--content-padding);\n border-radius: var(--content-border-radius);\n flex: 1 1 auto;\n }\n }\n\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n // Start\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n &--start {\n flex-direction: row;\n\n .nano-tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n color: var(--tab-text-color);\n background: rgb(var(--tabs-bg-rgb));\n border-inline-start:\n solid var(--indicator-size)\n var(--indicator-track-color);\n text-align: start;\n }\n\n .nano-tab-group__active-tab-indicator {\n inset-inline-start: calc(-1 * 2px);\n border-inline-start: solid var(--indicator-size) var(--indicator-color);\n }\n\n .nano-tab-group__body {\n flex: 1 1 auto;\n order: 2;\n padding: var(--content-padding);\n overflow: hidden;\n border-radius: var(--content-border-radius);\n }\n }\n}\n","import {\n Component,\n Element,\n ComponentInterface,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n Listen,\n Build,\n} from '@stencil/core';\n\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { scrollIntoView } from '../../utils/scroll';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils/transitions';\nimport type { Color } from '../../interface';\n\n/**\n * A traditional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.\n *\n * Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.\n * Horizontal tabs that don't fit will overflow and scroll appropriately.\n * Tab-content can also be swiped to change tabs.\n *\n * @slot tabs - Add `nano-tab` elements to add clickable tabs.\n * @slot tab-content-header - a header bar displayed above tab content.\n * @slot - Add `nano-tab-content` elements to add tabbable content.\n *\n * @part base - the main tab-group wrapper\n * @part nav - the bar surrounding all the tabs and nav buttons\n * @part tabs - the wrapper around the `nano-tab` components\n * @part active-tab-indicator - the active indicator line\n * @part body - the wrapper around the `nano-tab-content` components\n */\n\n@Component({\n tag: 'nano-tab-group',\n styleUrl: 'tab-group.scss',\n shadow: true,\n})\nexport class TabGroup implements ComponentInterface {\n private activeTab: HTMLNanoTabElement;\n private activePanel: HTMLNanoTabContentElement;\n private activeTabIndicator: HTMLElement;\n private nav: HTMLElement;\n private tabs: HTMLElement;\n private rightBtn: HTMLButtonElement;\n private leftBtn: HTMLButtonElement;\n\n private isRtl: boolean;\n private initialTouchX: number = null;\n private initialTouchY: number = null;\n\n private resizeObserver: ResizeObserver;\n private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n @Element() host: HTMLNanoTabGroupElement;\n\n @State() hasScrollControls = false;\n @State() hideControlRight = true;\n @State() hideControlLeft = true;\n @State() tab: string;\n\n /**\n * The placement of the tabs.\n */\n @Prop({ reflect: true }) placement: 'top' | 'start' = 'top';\n\n /**\n * Disables the scroll arrows that appear when tabs overflow.\n */\n @Prop() noScrollControls = false;\n\n /**\n * The color to use from the application's color palette.\n */\n @Prop() color?: Color;\n\n /**\n * Store the currently open tab (against this ID) in the component store.\n * Use in conjunction with storeMethod\n */\n @Prop() storeId?: string;\n\n /**\n * The method of storage.\n * Either session storage, url hash (after the '#') or url query (after the '?').\n */\n @Prop() storeMethod: StorageMethods = 'session';\n\n /**\n * Disable 'swipe to change tab' on devices with touch\n */\n @Prop() disableSwipe: boolean;\n\n @Watch('tab')\n handleTabNameChange() {\n if (this.activeTab && this.activeTab.panel === this.tab) return;\n const tab = this.getAllActiveTabs.find((el) => el.panel === this.tab);\n this.setActiveTab(tab);\n }\n\n @Watch('placement')\n handlePlacementChange() {\n this.syncActiveTabIndicator();\n }\n\n @Watch('noScrollControls')\n handleNoScrollControlsChange() {\n this.updateScrollControls();\n }\n\n @Watch('hideControlRight')\n hideRightBtn() {\n if (!this.rightBtn) return;\n displayTransition(this.rightBtn, 'is-shown', !this.hideControlRight);\n }\n\n @Watch('hideControlLeft')\n hideLeftBtn() {\n if (!this.leftBtn) return;\n displayTransition(this.leftBtn, 'is-shown', !this.hideControlLeft);\n }\n\n @Watch('hasScrollControls')\n watchScrollControls() {\n if (this.hasScrollControls) setTimeout((_) => this.handleTabScroll(), 20);\n else\n setTimeout((_) => {\n this.hideControlLeft = this.hideControlRight = true;\n }, 20);\n }\n\n /** Emitted when a tab is shown. */\n @Event() nanoTabShow: EventEmitter<{ name: string }>;\n\n /** Emitted when a tab is hidden. */\n @Event() nanoTabHide: EventEmitter<{ name: string }>;\n\n /** Emitted when the tab is closable and the close button is activated. */\n @Event() nanoTabWillClose: EventEmitter<{ name: string }>;\n\n /** Emitted when a closable tab is removed. */\n @Event() nanoTabClose: EventEmitter<{ name: string }>;\n\n /** Shows the specified tab panel. */\n @Method()\n async show(panel: string) {\n if (this.activeTab && this.activeTab.panel === panel) return;\n\n const tab = this.getAllActiveTabs.find((el) => el.panel === panel);\n\n if (tab) this.setActiveTab(tab);\n }\n\n // Internal Methods\n\n get getAllActiveTabs() {\n return this.getAllTabs.filter((el: any) => !el.disabled);\n }\n\n get getAllTabs() {\n return getDirectChildren<HTMLNanoTabElement>(this.host, 'nano-tab');\n }\n\n get getAllPanels() {\n return getDirectChildren<HTMLNanoTabContentElement>(\n this.host,\n 'nano-tab-content'\n );\n }\n\n get getActiveTab() {\n return this.getAllActiveTabs.find((el) => el.active);\n }\n\n private updateScrollControls = () => {\n if (this.noScrollControls) {\n this.hasScrollControls = false;\n } else {\n this.hasScrollControls =\n ['top'].includes(this.placement) &&\n this.nav.scrollWidth > this.nav.clientWidth &&\n this.nav.scrollWidth > this.tabs.clientWidth;\n }\n };\n\n private setActiveTab(tab: HTMLNanoTabElement, emitEvents = true) {\n if (\n tab &&\n tab !== this.activeTab &&\n !tab.disabled &&\n this.getAllActiveTabs.includes(tab)\n ) {\n const previousTab = this.activeTab;\n this.activeTab = tab;\n this.tab = tab.panel;\n\n // Sync tabs and panels\n this.getAllActiveTabs.map((el) => (el.active = el === this.activeTab));\n this.getAllPanels.map((el) => {\n if (el.name === this.activeTab.panel) {\n el.active = true;\n this.activePanel = el;\n } else el.active = false;\n el.removeAttribute('animation-dir');\n });\n\n this.syncActiveTabIndicator();\n\n // active tab can be changed on init - this won't be ready. No big thing\n if (this.nav && ['top'].includes(this.placement)) {\n scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n }\n\n // Emit events\n if (emitEvents) {\n if (previousTab) {\n this.nanoTabHide.emit({ name: previousTab.panel });\n }\n\n this.nanoTabShow.emit({ name: this.activeTab.panel });\n }\n }\n }\n\n private setAriaLabels() {\n const tabs = this.getAllActiveTabs;\n const panels = this.getAllPanels;\n\n // Link each tab with its corresponding panel\n tabs.map((tab) => {\n const panel = panels.find((el) => el.name === tab.panel);\n if (panel) {\n tab.setAttribute('aria-controls', panel.getAttribute('id'));\n panel.setAttribute('aria-labelledby', tab.getAttribute('id'));\n }\n });\n }\n\n private syncActiveTabIndicator() {\n this.getAllTabs.forEach((tab) =>\n tab.setAttribute(\n 'direction',\n this.placement === 'top' ? 'horizontal' : 'vertical'\n )\n );\n\n const tab = this.getActiveTab;\n if (!tab) return;\n\n const width = tab.shadowRoot.querySelector('.nanotab')?.clientWidth || 0;\n const height = tab.clientHeight;\n const offset = getOffset(tab, this.tabs);\n\n if (!this.activeTabIndicator) return;\n\n const offsetTop = offset.top + this.nav.scrollTop;\n const offsetLeft = offset.left;\n\n switch (this.placement) {\n case 'top':\n this.activeTabIndicator.style.width = `${width}px`;\n this.activeTabIndicator.style.height = null;\n this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;\n break;\n\n case 'start':\n this.activeTabIndicator.style.width = null;\n this.activeTabIndicator.style.height = `${height}px`;\n this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;\n break;\n }\n }\n\n private getNavWidth() {\n if (!this.nav) return 0;\n const computedStyle = getComputedStyle(this.nav);\n let clientWidth = this.nav.clientWidth;\n return (clientWidth -=\n parseFloat(computedStyle.paddingLeft) +\n parseFloat(computedStyle.paddingRight));\n }\n\n // Event handlers\n\n @Listen('nanoTabClose')\n handleTabClose(ev: CustomEvent & { target: HTMLNanoTabElement }) {\n let tabIndex = this.getAllActiveTabs.indexOf(ev.target);\n const tab = ev.target;\n if (tabIndex < 0) return;\n\n const panel = this.getAllPanels.find((el) => el.name === tab.panel);\n if (!panel) return;\n\n ev.stopImmediatePropagation();\n\n const closeEv = this.nanoTabWillClose.emit({ name: tab.panel });\n if (closeEv.defaultPrevented) return;\n\n // Show the previous tab if the tab is currently active\n if (tab.active) {\n tabIndex = tabIndex === 0 ? 1 : tabIndex - 1;\n const prevTab = this.getAllActiveTabs[tabIndex]?.panel;\n if (prevTab) this.host.show(prevTab);\n }\n\n tab.remove();\n panel.remove();\n this.nanoTabClose.emit({ name: tab.panel });\n }\n\n private handleClick = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n const tab = target.closest('nano-tab');\n\n if (tab) this.setActiveTab(tab);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n const activeEl = document.activeElement as any;\n if (!activeEl || activeEl.tagName.toLowerCase() !== 'nano-tab') return;\n\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n const target = event.target as HTMLElement;\n const tab = target.closest('nano-tab');\n\n if (tab) {\n this.setActiveTab(tab);\n event.preventDefault();\n event.stopPropagation();\n }\n }\n\n // Move focus left or right\n if (\n ![\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowDown',\n 'Home',\n 'End',\n ].includes(event.key)\n )\n return;\n\n const tabs = this.getAllActiveTabs;\n let index = tabs.indexOf(activeEl);\n\n if (event.key === 'Home') index = 0;\n if (event.key === 'End') index = tabs.length - 1;\n\n if (this.placement === 'top') {\n if (\n (this.isRtl && event.key === 'ArrowRight') ||\n (!this.isRtl && event.key === 'ArrowLeft')\n ) {\n index = Math.max(0, index - 1);\n }\n if (\n (this.isRtl && event.key === 'ArrowLeft') ||\n (!this.isRtl && event.key === 'ArrowRight')\n ) {\n index = Math.min(tabs.length - 1, index + 1);\n }\n }\n\n if (this.placement === 'start') {\n if (event.key === 'ArrowUp') index = Math.max(0, index - 1);\n if (event.key === 'ArrowDown')\n index = Math.min(tabs.length - 1, index + 1);\n }\n\n tabs[index].setFocus();\n\n if (this.placement === 'top') {\n scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');\n }\n // need to stop bubbling otherwise it will focus on parent tabs if nested\n event.stopPropagation();\n // stop the browser moving about\n event.preventDefault();\n };\n\n private handleTabScroll = () => {\n if (!this.hasScrollControls) {\n this.hideControlLeft = this.hideControlRight = true;\n return;\n }\n const endRight = this.isRtl\n ? this.nav.scrollLeft === 0\n : this.nav.scrollWidth - this.nav.scrollLeft === this.nav.clientWidth;\n const endLeft = this.isRtl\n ? this.nav.scrollWidth + this.nav.scrollLeft === this.nav.clientWidth\n : this.nav.scrollLeft === 0;\n\n if (endLeft) {\n this.hideControlLeft = true;\n this.hideControlRight = false;\n } else if (endRight) {\n this.hideControlLeft = false;\n this.hideControlRight = true;\n } else {\n this.hideControlRight = false;\n this.hideControlLeft = false;\n }\n };\n\n private handleBtnClick = (goRight: boolean = false) => {\n const navWidth = this.getNavWidth();\n let leftAmt;\n if (goRight) leftAmt = this.nav.scrollLeft + navWidth - 20;\n else leftAmt = this.nav.scrollLeft - navWidth + 20;\n\n try {\n this.nav.scroll({\n left: leftAmt,\n behavior: 'smooth',\n });\n } catch (e) {\n this.nav.scrollLeft = leftAmt;\n }\n };\n\n private handleTouchStart = (event: TouchEvent) => {\n if (this.disableSwipe) return;\n const touch = event.changedTouches[0];\n this.initialTouchX = touch.pageX;\n this.initialTouchY = touch.pageY;\n };\n\n private handleTouchEnd = (event: TouchEvent) => {\n if (this.disableSwipe) return;\n const touch = event.changedTouches[0];\n const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n const threshold = 70;\n\n const xDiff = this.initialTouchX - touch.clientX;\n const yDiff = this.initialTouchY - touch.clientY;\n\n const isHorizontalSwipe =\n Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\n\n const tabs = this.getAllActiveTabs;\n const currIndex = tabs.findIndex((el) => el.active);\n\n if (isHorizontalSwipe) {\n const toGo =\n (distX < 0 && this.placement === 'top') ||\n (distX > 0 && this.placement !== 'top')\n ? 1\n : -1;\n\n if (tabs[currIndex + toGo]) {\n this.setActiveTab(tabs[currIndex + toGo]);\n\n if (Math.abs(xDiff) > Math.abs(yDiff)) {\n if (xDiff > 0) this.activePanel.setAttribute('animation-dir', 'left');\n else this.activePanel.setAttribute('animation-dir', 'right');\n }\n }\n }\n this.initialTouchX = null;\n this.initialTouchY = null;\n };\n\n private handleContentSlotChange = () => {\n setTimeout(() => {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n });\n };\n\n private handleTabSlotChange = (ev: Event & { target: HTMLSlotElement }) => {\n setTimeout(() => {\n this.setAriaLabels();\n this.handleTabScroll();\n this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n this.updateScrollControls();\n }, 500);\n\n /** maintain a weakmap of mutation observers to maintain tab / indicator position on all changes. */\n const nodes = ev.target.assignedElements({ flatten: true });\n nodes.forEach((node) => {\n if (!this.mutationObservers.get(node)) {\n const mo = new MutationObserver(() => {\n setTimeout(() => {\n this.syncActiveTabIndicator();\n this.handleTabScroll();\n this.updateScrollControls();\n }, 500);\n });\n this.mutationObservers.set(node, mo);\n\n mo.observe(node, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n }\n });\n };\n\n // Stencil hooks\n\n componentDidLoad() {\n // Initial IO - watching for all content to be loaded\n const observer = new IntersectionObserver((entries, observer) => {\n if (entries[0].intersectionRatio > 0) {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n\n if (this.storeId)\n ComponentStore.init(this, ['tab'], this.storeMethod, this.storeId);\n observer.unobserve(entries[0].target);\n }\n });\n observer.observe(this.host);\n\n requestAnimationFrame(() => this.updateScrollControls());\n\n if (!window['ResizeObserver']) return;\n\n this.resizeObserver = new ResizeObserver(() => {\n setTimeout(() => {\n this.updateScrollControls();\n this.syncActiveTabIndicator();\n scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n }, 500);\n });\n this.resizeObserver.observe(this.nav);\n }\n\n connectedCallback() {\n this.isRtl =\n this.host.dir === 'rtl' ||\n (this.host.ownerDocument as Document).dir === 'rtl';\n\n if (Build.isServer) {\n this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n this.setAriaLabels();\n }\n }\n\n disconnectedCallback() {\n if (this.resizeObserver) this.resizeObserver.unobserve(this.nav);\n }\n\n render() {\n this.isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <Host\n class={{ ...createColorClasses(this.color) }}\n dir={this.isRtl ? 'rtl' : null}\n >\n <div\n part=\"base\"\n class={{\n 'nano-tab-group': true,\n 'nano-tab-group--top': this.placement === 'top',\n 'nano-tab-group--start': this.placement === 'start',\n 'nano-tab-group--has-scroll-controls': this.hasScrollControls,\n 'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,\n 'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"nano-tab-group__nav-container\" part=\"nav\">\n {this.placement === 'top' && (\n <button\n disabled={!this.hasScrollControls}\n class={{\n 'nano-tab-group__scroll-button': true,\n 'nano-tab-group__scroll-button--left': true,\n }}\n ref={(btn) => (this.leftBtn = btn)}\n onClick={() => this.handleBtnClick(false)}\n >\n <nano-icon name=\"light/chevron-left\"></nano-icon>\n </button>\n )}\n <div\n ref={(el) => (this.nav = el)}\n class=\"nano-tab-group__nav\"\n onScroll={this.handleTabScroll}\n >\n <div\n ref={(el) => (this.tabs = el)}\n part=\"tabs\"\n class=\"nano-tab-group__tabs\"\n role=\"tablist\"\n >\n <div\n ref={(el) => (this.activeTabIndicator = el)}\n part=\"active-tab-indicator\"\n class=\"nano-tab-group__active-tab-indicator\"\n />\n <slot name=\"tabs\" onSlotchange={this.handleTabSlotChange} />\n </div>\n </div>\n {this.placement === 'top' && (\n <button\n disabled={!this.hasScrollControls}\n class={{\n 'nano-tab-group__scroll-button': true,\n 'nano-tab-group__scroll-button--right': true,\n }}\n ref={(btn) => (this.rightBtn = btn)}\n onClick={() => this.handleBtnClick(true)}\n >\n <nano-icon name=\"light/chevron-right\"></nano-icon>\n </button>\n )}\n </div>\n <slot name=\"tab-content-header\" />\n <div\n part=\"body\"\n class=\"nano-tab-group__body\"\n onTouchStart={this.handleTouchStart}\n onTouchEnd={this.handleTouchEnd}\n >\n <slot onSlotchange={this.handleContentSlotChange} />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"nano-tab-group.entry.js","mappings":"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","names":[],"sources":["./src/components/tabs/tab-group.scss?tag=nano-tab-group&encapsulation=shadow","./src/components/tabs/tab-group.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --indicator-transition: Only relevant to placement 'start'. defaults to #{$transition-fast};\n * @prop --indicator-color: defaults to #{map.get($colors, lightblue)} on placement 'top' and #{map.get($colors, blue)} on placement 'start';\n * @prop --indicator-track-color: Only relevant to placement 'start'. defaults to #{map.get($colors, lightgrey)};\n * @prop --indicator-size: defaults to 5px on placement 'top' and 2px on placement 'start';\n\n * @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --background-rgb: will be used as the default background colour for tabs and content. defaults to #{$layer-bg-color-rgb};\n * @prop --shadow-opacity: opacity of the shadow behind tabs. defaults to 0.1;\n * @prop --scroll-btn-color: defaults to 'currentcolor';\n\n * @prop --content-padding: defaults to 2rem 2.5rem;\n * @prop --content-bg: defaults to rgb(var(--background-rgb));\n * @prop --content-border-radius: defaults to `var(--border-radius)` `position=\"top\"`. `0 var(--border-radius) var(--border-radius) 0` `position=\"start\"`;\n\n * @prop --tabs-padding-start: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n * @prop --tabs-padding-end: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n * @prop --tabs-padding-top: defaults to 0;\n * @prop --tabs-padding-bottom: defaults to 0;\n * @prop --tabs-bg-rgb: defaults to var(--bg-color);\n * @prop --tab-border-radius: defaults to `var(--border-radius) var(--border-radius) 0 0` `position=\"top\"`. `0` `position=\"start\"`. ;\n * @prop --tab-text-color: defaults to #{map.get($colors, blue)} on placement 'top' and #{map.get($colors, darkgrey)} on placement 'start';\n * @prop --fade-transparency: controls the strength of the fade on overflowing tabs, defaults to 0;\n */\n\n:host {\n --indicator-transition: #{$transition-fast};\n --indicator-color: #{map.get($colors, lightblue)};\n --indicator-track-color: #{map.get($colors, lightgrey)};\n --indicator-size: 0;\n --border-radius: #{$layer-border-radius};\n --background-rgb: #{$layer-bg-color-rgb};\n --scroll-btn-color: 'currentColor';\n --content-padding: 2rem 2.5rem;\n --content-bg: rgb(var(--background-rgb));\n --content-border-radius: var(--border-radius);\n --tabs-padding-start: 2.5rem;\n --tabs-padding-end: 2.5rem;\n --tabs-padding-top: 0;\n --tabs-padding-bottom: 0;\n --tabs-container-bg: 'transparent';\n --tabs-bg-rgb: var(--background-rgb);\n --tab-border-radius: var(--border-radius) var(--border-radius) 0 0;\n --tab-text-color: #{map.get($colors, blue)};\n --shadow-opacity: 0.1;\n --fade-transparency: 0;\n\n display: block;\n position: relative;\n z-index: #{$layer-index-raised};\n\n @media only screen and (max-width: 768px) {\n --tabs-padding-start: 1.5rem;\n --tabs-padding-end: 1.5rem;\n }\n\n ::slotted(nano-tab) {\n --tab-indicator-color: var(--indicator-color);\n --bg-rgb: var(--tabs-bg-rgb);\n --border-radius: var(--tab-border-radius);\n --grab-offset-x: var(--tabs-padding-start);\n }\n}\n\n:host([placement='start']) {\n --content-border-radius: 0 var(--border-radius) var(--border-radius) 0;\n --content-padding: 1rem;\n --tab-border-radius: 0;\n --tabs-padding-start: 0;\n --tabs-padding-end: 0;\n --tabs-padding-top: 0;\n --tabs-padding-bottom: 0;\n --tab-text-color: #{map.get($colors, darkgrey)};\n --indicator-color: #{map.get($colors, blue)};\n --indicator-size: 2px;\n}\n\n:host(.nano-color) {\n --indicator-color: var(--nano-color-tint, #{nano-color(primary, tint)});\n --tab-text-color: rgb(var(--nano-color-base-rgb) / 70%);\n\n ::slotted(nano-tab) {\n --active-text-color: var(--nano-color-shade, #{nano-color(primary, shade)});\n }\n}\n\n.nano-tab-group {\n display: flex;\n border-radius: 0;\n width: 100%;\n flex: inherit;\n\n &__tabs {\n display: flex;\n position: relative;\n width: 100%;\n }\n\n &__active-tab-indicator {\n position: absolute;\n transition:\n var(--indicator-transition) transform ease,\n var(--indicator-transition) width ease;\n }\n\n &__body {\n background: var(--content-bg);\n }\n\n .nano-tab-group__nav-container {\n position: relative;\n display: flex;\n background: var(--tabs-container-bg);\n }\n\n button {\n appearance: none;\n background-color: transparent;\n }\n\n &__scroll-button {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n inset-block: 0;\n border: unset;\n z-index: 2;\n transition: #{$transition-fast} ease opacity;\n opacity: 0;\n color: var(--scroll-btn-color);\n\n &:focus {\n outline: none;\n }\n\n &.is-shown {\n opacity: 1;\n }\n\n &:focus-visible {\n box-shadow: #{$control-focus-style} inset;\n }\n\n &--left {\n inset-inline-start: 0;\n }\n\n &--right {\n inset-inline-end: 0;\n }\n\n nano-icon {\n font-size: 16px;\n }\n }\n\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n // Top\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n &--top {\n flex-direction: column;\n\n .nano-tab-group__nav-container {\n &::after {\n content: '';\n width: 86%;\n box-shadow: 0 10px 40px 10px rgb(0 0 0 / var(--shadow-opacity));\n height: 10px;\n position: absolute;\n inset-inline-start: 7%;\n inset-block-end: -10px;\n border-radius: 10px;\n z-index: -1;\n }\n }\n\n .nano-tab-group__nav {\n @include hide-scrollbar();\n\n padding-inline: var(--tabs-padding-start) var(--tabs-padding-end);\n padding-block: var(--tabs-padding-top) var(--tabs-padding-bottom);\n display: flex;\n overflow-x: auto;\n overflow-y: hidden;\n transition: #{$transition-medium} ease;\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');\n mask-repeat: no-repeat;\n mask-image:\n linear-gradient(\n to left,\n rgb(0 0 0 / var(--fade-transparency)) 0,\n rgb(0 0 0 / var(--fade-transparency)) var(--tabs-padding-start),\n rgb(0 0 0 / 100%) calc(var(--tabs-padding-start) * 2),\n rgb(0 0 0 / 100%) calc(100% - (var(--tabs-padding-end) * 2)),\n rgb(0 0 0 / var(--fade-transparency))\n calc(100% - var(--tabs-padding-end)),\n rgb(0 0 0 / var(--fade-transparency))\n );\n mask-size: calc(100% + calc(var(--tabs-padding-end) * 4));\n mask-position: calc(var(--tabs-padding-end) * -2);\n\n &::after {\n content: ' ';\n padding-inline: 0 var(--tabs-padding-end);\n padding-block: var(--tabs-padding-top) var(--tabs-padding-bottom);\n line-height: 1;\n flex: 0 0 auto;\n }\n }\n\n &.nano-tab-group--has-scroll-controls-left {\n .nano-tab-group__nav {\n mask-position: 0;\n mask-size: calc(100% + (var(--tabs-padding-end) * 2));\n }\n }\n\n &.nano-tab-group--has-scroll-controls-right {\n .nano-tab-group__nav {\n mask-position: calc(var(--tabs-padding-end) * -1);\n mask-size: calc(100% + var(--tabs-padding-end));\n }\n }\n\n &.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right {\n .nano-tab-group__nav {\n mask-size: 100%;\n mask-position: 0;\n }\n }\n\n .nano-tab-group__tabs {\n flex: 1 1 auto;\n position: relative;\n flex-direction: row;\n text-align: center;\n color: var(--tab-text-color);\n width: auto;\n }\n\n .nano-tab-group__active-tab-indicator {\n inset-block-end: -2px;\n border-block-end: solid var(--indicator-size) var(--indicator-color);\n }\n\n .nano-tab-group__body {\n order: 2;\n background: var(--content-bg);\n position: relative;\n overflow: hidden;\n width: auto;\n display: flex;\n justify-content: center;\n padding: var(--content-padding);\n border-radius: var(--content-border-radius);\n flex: 1 1 auto;\n }\n }\n\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n // Start\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n &--start {\n flex-direction: row;\n\n .nano-tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n color: var(--tab-text-color);\n background: rgb(var(--tabs-bg-rgb));\n border-inline-start:\n solid var(--indicator-size)\n var(--indicator-track-color);\n text-align: start;\n }\n\n .nano-tab-group__active-tab-indicator {\n inset-inline-start: calc(-1 * 2px);\n border-inline-start: solid var(--indicator-size) var(--indicator-color);\n }\n\n .nano-tab-group__body {\n flex: 1 1 auto;\n order: 2;\n padding: var(--content-padding);\n overflow: hidden;\n border-radius: var(--content-border-radius);\n }\n }\n}\n","import {\n Component,\n Element,\n ComponentInterface,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n Listen,\n Build,\n} from '@stencil/core';\n\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { scrollIntoView } from '../../utils/scroll';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils/transitions';\nimport type { Color } from '../../interface';\n\n/**\n * A traditional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.\n *\n * Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.\n * Horizontal tabs that don't fit will overflow and scroll appropriately.\n * Tab-content can also be swiped to change tabs.\n *\n * @slot tabs - Add `nano-tab` elements to add clickable tabs.\n * @slot tab-content-header - a header bar displayed above tab content.\n * @slot - Add `nano-tab-content` elements to add tabbable content.\n *\n * @part base - the main tab-group wrapper\n * @part nav - the bar surrounding all the tabs and nav buttons\n * @part tabs - the wrapper around the `nano-tab` components\n * @part active-tab-indicator - the active indicator line\n * @part body - the wrapper around the `nano-tab-content` components\n */\n\n@Component({\n tag: 'nano-tab-group',\n styleUrl: 'tab-group.scss',\n shadow: true,\n})\nexport class TabGroup implements ComponentInterface {\n private activeTab: HTMLNanoTabElement;\n private activePanel: HTMLNanoTabContentElement;\n private activeTabIndicator: HTMLElement;\n private nav: HTMLElement;\n private tabs: HTMLElement;\n private rightBtn: HTMLButtonElement;\n private leftBtn: HTMLButtonElement;\n\n private isRtl: boolean;\n private initialTouchX: number = null;\n private initialTouchY: number = null;\n\n private resizeObserver: ResizeObserver;\n private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n @Element() host: HTMLNanoTabGroupElement;\n\n @State() hasScrollControls = false;\n @State() hideControlRight = true;\n @State() hideControlLeft = true;\n @State() tab: string;\n\n /**\n * The placement of the tabs.\n */\n @Prop({ reflect: true }) placement: 'top' | 'start' = 'top';\n\n /**\n * Disables the scroll arrows that appear when tabs overflow.\n */\n @Prop() noScrollControls = false;\n\n /**\n * The color to use from the application's color palette.\n */\n @Prop() color?: Color;\n\n /**\n * Store the currently open tab (against this ID) in the component store.\n * Use in conjunction with storeMethod\n */\n @Prop() storeId?: string;\n\n /**\n * The method of storage.\n * Either session storage, url hash (after the '#') or url query (after the '?').\n */\n @Prop() storeMethod: StorageMethods = 'session';\n\n /**\n * Disable 'swipe to change tab' on devices with touch\n */\n @Prop() disableSwipe: boolean;\n\n @Watch('tab')\n handleTabNameChange() {\n if (this.activeTab && this.activeTab.panel === this.tab) return;\n const tab = this.getAllActiveTabs.find((el) => el.panel === this.tab);\n this.setActiveTab(tab);\n }\n\n @Watch('placement')\n handlePlacementChange() {\n this.syncActiveTabIndicator();\n }\n\n @Watch('noScrollControls')\n handleNoScrollControlsChange() {\n this.updateScrollControls();\n }\n\n @Watch('hideControlRight')\n hideRightBtn() {\n if (!this.rightBtn) return;\n displayTransition(this.rightBtn, 'is-shown', !this.hideControlRight);\n }\n\n @Watch('hideControlLeft')\n hideLeftBtn() {\n if (!this.leftBtn) return;\n displayTransition(this.leftBtn, 'is-shown', !this.hideControlLeft);\n }\n\n @Watch('hasScrollControls')\n watchScrollControls() {\n if (this.hasScrollControls) setTimeout((_) => this.handleTabScroll(), 20);\n else\n setTimeout((_) => {\n this.hideControlLeft = this.hideControlRight = true;\n }, 20);\n }\n\n /** Emitted when a tab is shown. */\n @Event() nanoTabShow: EventEmitter<{ name: string }>;\n\n /** Emitted when a tab is hidden. */\n @Event() nanoTabHide: EventEmitter<{ name: string }>;\n\n /** Emitted when the tab is closable and the close button is activated. */\n @Event() nanoTabWillClose: EventEmitter<{ name: string }>;\n\n /** Emitted when a closable tab is removed. */\n @Event() nanoTabClose: EventEmitter<{ name: string }>;\n\n /** Shows the specified tab panel. */\n @Method()\n async show(panel: string) {\n if (this.activeTab && this.activeTab.panel === panel) return;\n\n const tab = this.getAllActiveTabs.find((el) => el.panel === panel);\n\n if (tab) this.setActiveTab(tab);\n }\n\n // Internal Methods\n\n get getAllActiveTabs() {\n return this.getAllTabs.filter((el: any) => !el.disabled);\n }\n\n get getAllTabs() {\n return getDirectChildren<HTMLNanoTabElement>(this.host, 'nano-tab');\n }\n\n get getAllPanels() {\n return getDirectChildren<HTMLNanoTabContentElement>(\n this.host,\n 'nano-tab-content'\n );\n }\n\n get getActiveTab() {\n return this.getAllActiveTabs.find((el) => el.active);\n }\n\n private updateScrollControls = () => {\n if (this.noScrollControls) {\n this.hasScrollControls = false;\n } else {\n this.hasScrollControls =\n ['top'].includes(this.placement) &&\n this.nav.scrollWidth > this.nav.clientWidth &&\n this.nav.scrollWidth > this.tabs.clientWidth;\n }\n };\n\n private setActiveTab(tab: HTMLNanoTabElement, emitEvents = true) {\n if (\n tab &&\n tab !== this.activeTab &&\n !tab.disabled &&\n this.getAllActiveTabs.includes(tab)\n ) {\n const previousTab = this.activeTab;\n this.activeTab = tab;\n this.tab = tab.panel;\n\n // Sync tabs and panels\n this.getAllActiveTabs.map((el) => (el.active = el === this.activeTab));\n this.getAllPanels.map((el) => {\n if (el.name === this.activeTab.panel) {\n el.active = true;\n this.activePanel = el;\n } else el.active = false;\n el.removeAttribute('animation-dir');\n });\n\n this.syncActiveTabIndicator();\n\n // active tab can be changed on init - this won't be ready. No big thing\n if (this.nav && ['top'].includes(this.placement)) {\n scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n }\n\n // Emit events\n if (emitEvents) {\n if (previousTab) {\n this.nanoTabHide.emit({ name: previousTab.panel });\n }\n\n this.nanoTabShow.emit({ name: this.activeTab.panel });\n }\n }\n }\n\n private setAriaLabels() {\n const tabs = this.getAllActiveTabs;\n const panels = this.getAllPanels;\n\n // Link each tab with its corresponding panel\n tabs.map((tab) => {\n const panel = panels.find((el) => el.name === tab.panel);\n if (panel) {\n tab.setAttribute('aria-controls', panel.getAttribute('id'));\n panel.setAttribute('aria-labelledby', tab.getAttribute('id'));\n }\n });\n }\n\n private syncActiveTabIndicator() {\n this.getAllTabs.forEach((tab) =>\n tab.setAttribute(\n 'direction',\n this.placement === 'top' ? 'horizontal' : 'vertical'\n )\n );\n\n const tab = this.getActiveTab;\n if (!tab) return;\n\n const width = tab.shadowRoot.querySelector('.nanotab')?.clientWidth || 0;\n const height = tab.clientHeight;\n const offset = getOffset(tab, this.tabs);\n\n if (!this.activeTabIndicator) return;\n\n const offsetTop = offset.top + this.nav.scrollTop;\n const offsetLeft = offset.left;\n\n switch (this.placement) {\n case 'top':\n this.activeTabIndicator.style.width = `${width}px`;\n this.activeTabIndicator.style.height = null;\n this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;\n break;\n\n case 'start':\n this.activeTabIndicator.style.width = null;\n this.activeTabIndicator.style.height = `${height}px`;\n this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;\n break;\n }\n }\n\n private getNavWidth() {\n if (!this.nav) return 0;\n const computedStyle = getComputedStyle(this.nav);\n let clientWidth = this.nav.clientWidth;\n return (clientWidth -=\n parseFloat(computedStyle.paddingLeft) +\n parseFloat(computedStyle.paddingRight));\n }\n\n // Event handlers\n\n @Listen('nanoTabClose')\n handleTabClose(ev: CustomEvent & { target: HTMLNanoTabElement }) {\n let tabIndex = this.getAllActiveTabs.indexOf(ev.target);\n const tab = ev.target;\n if (tabIndex < 0) return;\n\n const panel = this.getAllPanels.find((el) => el.name === tab.panel);\n if (!panel) return;\n\n ev.stopImmediatePropagation();\n\n const closeEv = this.nanoTabWillClose.emit({ name: tab.panel });\n if (closeEv.defaultPrevented) return;\n\n // Show the previous tab if the tab is currently active\n if (tab.active) {\n tabIndex = tabIndex === 0 ? 1 : tabIndex - 1;\n const prevTab = this.getAllActiveTabs[tabIndex]?.panel;\n if (prevTab) this.host.show(prevTab);\n }\n\n tab.remove();\n panel.remove();\n this.nanoTabClose.emit({ name: tab.panel });\n }\n\n private handleClick = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n const tab = target.closest('nano-tab');\n\n if (tab) this.setActiveTab(tab);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n const activeEl = document.activeElement as any;\n if (!activeEl || activeEl.tagName.toLowerCase() !== 'nano-tab') return;\n\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n const target = event.target as HTMLElement;\n const tab = target.closest('nano-tab');\n\n if (tab) {\n this.setActiveTab(tab);\n event.preventDefault();\n event.stopPropagation();\n }\n }\n\n // Move focus left or right\n if (\n ![\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowDown',\n 'Home',\n 'End',\n ].includes(event.key)\n )\n return;\n\n const tabs = this.getAllActiveTabs;\n let index = tabs.indexOf(activeEl);\n\n if (event.key === 'Home') index = 0;\n if (event.key === 'End') index = tabs.length - 1;\n\n if (this.placement === 'top') {\n if (\n (this.isRtl && event.key === 'ArrowRight') ||\n (!this.isRtl && event.key === 'ArrowLeft')\n ) {\n index = Math.max(0, index - 1);\n }\n if (\n (this.isRtl && event.key === 'ArrowLeft') ||\n (!this.isRtl && event.key === 'ArrowRight')\n ) {\n index = Math.min(tabs.length - 1, index + 1);\n }\n }\n\n if (this.placement === 'start') {\n if (event.key === 'ArrowUp') index = Math.max(0, index - 1);\n if (event.key === 'ArrowDown')\n index = Math.min(tabs.length - 1, index + 1);\n }\n\n tabs[index].setFocus();\n\n if (this.placement === 'top') {\n scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');\n }\n // need to stop bubbling otherwise it will focus on parent tabs if nested\n event.stopPropagation();\n // stop the browser moving about\n event.preventDefault();\n };\n\n private handleTabScroll = () => {\n if (!this.hasScrollControls) {\n this.hideControlLeft = this.hideControlRight = true;\n return;\n }\n const endRight = this.isRtl\n ? this.nav.scrollLeft === 0\n : this.nav.scrollWidth - this.nav.scrollLeft === this.nav.clientWidth;\n const endLeft = this.isRtl\n ? this.nav.scrollWidth + this.nav.scrollLeft === this.nav.clientWidth\n : this.nav.scrollLeft === 0;\n\n if (endLeft) {\n this.hideControlLeft = true;\n this.hideControlRight = false;\n } else if (endRight) {\n this.hideControlLeft = false;\n this.hideControlRight = true;\n } else {\n this.hideControlRight = false;\n this.hideControlLeft = false;\n }\n };\n\n private handleBtnClick = (goRight: boolean = false) => {\n const navWidth = this.getNavWidth();\n let leftAmt;\n if (goRight) leftAmt = this.nav.scrollLeft + navWidth - 20;\n else leftAmt = this.nav.scrollLeft - navWidth + 20;\n\n try {\n this.nav.scroll({\n left: leftAmt,\n behavior: 'smooth',\n });\n } catch (e) {\n this.nav.scrollLeft = leftAmt;\n }\n };\n\n private handleTouchStart = (event: TouchEvent) => {\n if (this.disableSwipe) return;\n const touch = event.changedTouches[0];\n this.initialTouchX = touch.pageX;\n this.initialTouchY = touch.pageY;\n };\n\n private handleTouchEnd = (event: TouchEvent) => {\n if (this.disableSwipe) return;\n const touch = event.changedTouches[0];\n const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n const threshold = 70;\n\n const xDiff = this.initialTouchX - touch.clientX;\n const yDiff = this.initialTouchY - touch.clientY;\n\n const isHorizontalSwipe =\n Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\n\n const tabs = this.getAllActiveTabs;\n const currIndex = tabs.findIndex((el) => el.active);\n\n if (isHorizontalSwipe) {\n const toGo =\n (distX < 0 && this.placement === 'top') ||\n (distX > 0 && this.placement !== 'top')\n ? 1\n : -1;\n\n if (tabs[currIndex + toGo]) {\n this.setActiveTab(tabs[currIndex + toGo]);\n\n if (Math.abs(xDiff) > Math.abs(yDiff)) {\n if (xDiff > 0) this.activePanel.setAttribute('animation-dir', 'left');\n else this.activePanel.setAttribute('animation-dir', 'right');\n }\n }\n }\n this.initialTouchX = null;\n this.initialTouchY = null;\n };\n\n private handleContentSlotChange = () => {\n setTimeout(() => {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n });\n };\n\n private handleTabSlotChange = (ev: Event & { target: HTMLSlotElement }) => {\n setTimeout(() => {\n this.setAriaLabels();\n this.handleTabScroll();\n this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n this.updateScrollControls();\n }, 500);\n\n /** maintain a weakmap of mutation observers to maintain tab / indicator position on all changes. */\n const nodes = ev.target.assignedElements({ flatten: true });\n nodes.forEach((node) => {\n if (!this.mutationObservers.get(node)) {\n const mo = new MutationObserver(() => {\n setTimeout(() => {\n this.syncActiveTabIndicator();\n this.handleTabScroll();\n this.updateScrollControls();\n }, 500);\n });\n this.mutationObservers.set(node, mo);\n\n mo.observe(node, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n }\n });\n };\n\n // Stencil hooks\n\n componentDidLoad() {\n // Initial IO - watching for all content to be loaded\n const observer = new IntersectionObserver((entries, observer) => {\n if (entries[0].intersectionRatio > 0) {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n\n if (this.storeId)\n ComponentStore.init(this, ['tab'], this.storeMethod, this.storeId);\n observer.unobserve(entries[0].target);\n }\n });\n observer.observe(this.host);\n\n requestAnimationFrame(() => this.updateScrollControls());\n\n if (!window['ResizeObserver']) return;\n\n this.resizeObserver = new ResizeObserver(() => {\n setTimeout(() => {\n this.updateScrollControls();\n this.syncActiveTabIndicator();\n scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n }, 500);\n });\n this.resizeObserver.observe(this.nav);\n }\n\n connectedCallback() {\n this.isRtl =\n this.host.dir === 'rtl' ||\n (this.host.ownerDocument as Document).dir === 'rtl';\n\n if (Build.isServer) {\n this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n this.setAriaLabels();\n }\n }\n\n disconnectedCallback() {\n if (this.resizeObserver) this.resizeObserver.unobserve(this.nav);\n }\n\n render() {\n this.isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <Host\n class={{ ...createColorClasses(this.color) }}\n dir={this.isRtl ? 'rtl' : null}\n >\n <div\n part=\"base\"\n class={{\n 'nano-tab-group': true,\n 'nano-tab-group--top': this.placement === 'top',\n 'nano-tab-group--start': this.placement === 'start',\n 'nano-tab-group--has-scroll-controls': this.hasScrollControls,\n 'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,\n 'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"nano-tab-group__nav-container\" part=\"nav\">\n {this.placement === 'top' && (\n <button\n disabled={!this.hasScrollControls}\n class={{\n 'nano-tab-group__scroll-button': true,\n 'nano-tab-group__scroll-button--left': true,\n }}\n ref={(btn) => (this.leftBtn = btn)}\n onClick={() => this.handleBtnClick(false)}\n >\n <nano-icon name=\"light/chevron-left\"></nano-icon>\n </button>\n )}\n <div\n ref={(el) => (this.nav = el)}\n class=\"nano-tab-group__nav\"\n onScroll={this.handleTabScroll}\n >\n <div\n ref={(el) => (this.tabs = el)}\n part=\"tabs\"\n class=\"nano-tab-group__tabs\"\n role=\"tablist\"\n aria-orientation={\n this.placement === 'start' ? 'vertical' : 'horizontal'\n }\n >\n <div\n ref={(el) => (this.activeTabIndicator = el)}\n part=\"active-tab-indicator\"\n class=\"nano-tab-group__active-tab-indicator\"\n />\n <slot name=\"tabs\" onSlotchange={this.handleTabSlotChange} />\n </div>\n </div>\n {this.placement === 'top' && (\n <button\n disabled={!this.hasScrollControls}\n class={{\n 'nano-tab-group__scroll-button': true,\n 'nano-tab-group__scroll-button--right': true,\n }}\n ref={(btn) => (this.rightBtn = btn)}\n onClick={() => this.handleBtnClick(true)}\n >\n <nano-icon name=\"light/chevron-right\"></nano-icon>\n </button>\n )}\n </div>\n <slot name=\"tab-content-header\" />\n <div\n part=\"body\"\n class=\"nano-tab-group__body\"\n onTouchStart={this.handleTouchStart}\n onTouchEnd={this.handleTouchEnd}\n >\n <slot onSlotchange={this.handleContentSlotChange} />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/esm/nano-tab.entry.js CHANGED
@@ -32,12 +32,12 @@ const Tab = class {
32
32
  this.tab.blur();
33
33
  }
34
34
  render() {
35
- return (h(Host, { id: this.host.id || this.tabId }, h("div", { part: "base", class: {
35
+ return (h(Host, { id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false' }, h("div", { part: "base", class: {
36
36
  nanotab: true,
37
37
  'nanotab--active': this.active,
38
38
  'nanotab--disabled': this.disabled,
39
39
  'nanotab--closable': this.closable,
40
- } }, h("slot", { name: "start" }), h("div", { part: "tab", ref: (el) => (this.tab = el), role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0', class: "nanotab__tab" }, h("slot", null)), this.closable && !this.disabled && (h("nano-icon-button", { label: "Close this tab", iconName: "light/times", class: "nanotab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-btn" })), h("slot", { name: "end" }))));
40
+ } }, h("slot", { name: "start" }), h("div", { part: "tab", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "nanotab__tab" }, h("slot", null)), this.closable && !this.disabled && (h("nano-icon-button", { label: "Close this tab", iconName: "light/times", class: "nanotab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-btn" })), h("slot", { name: "end" }))));
41
41
  }
42
42
  get host() { return getElement(this); }
43
43
  };
package/dist/esm/nano-tab.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"nano-tab.entry.js","mappings":";;;;;AAAA,MAAM,MAAM,GAAG,2kHAA2kH;;ACY1lH,IAAI,EAAE,GAAG,CAAC,CAAC;MAiBE,GAAG;;;;IACN,UAAK,GAAG,YAAY,EAAE,EAAE,EAAE,CAAC;IAgC3B,qBAAgB,GAAG;MACzB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B,CAAC;IAEM,uBAAkB,GAAG,CAAC,CAAgB;MAC5C,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;QAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC;KAC5C,CAAC;iBAhC+B,EAAE;kBAGD,KAAK;oBAGH,KAAK;oBAGtB,KAAK;;;EAOxB,MAAM,QAAQ;IACZ,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;GACzC;;EAID,MAAM,WAAW;IACf,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;GACjB;EAUD,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK,IAClC,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,iBAAiB,EAAE,IAAI,CAAC,MAAM;QAC9B,mBAAmB,EAAE,IAAI,CAAC,QAAQ;QAClC,mBAAmB,EAAE,IAAI,CAAC,QAAQ;OACnC,IAED,YAAM,IAAI,EAAC,OAAO,GAAG,EACrB,WACE,IAAI,EAAC,KAAK,EACV,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,GAAG,EACpD,KAAK,EAAC,cAAc,IAEpB,eAAQ,CACJ,EACL,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,KAC9B,wBACE,KAAK,EAAC,gBAAgB,EACtB,QAAQ,EAAC,aAAa,EACtB,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAClC,IAAI,EAAC,WAAW,GAChB,CACH,EACD,YAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/tabs/tab.scss?tag=nano-tab&encapsulation=shadow","./src/components/tabs/tab.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --focus-shadow: Defaults to #{$control-focus-style};\n\n * @prop --padding: Defaults to .75rem 1rem on placement 'top' and 1rem on placement 'start';\n\n * @prop --bg-rgb: Defaults to #{$layer-bg-color-rgb};\n * @prop --active-bg: Defaults to rgb(var(--bg-rgb) / 10%);\n * @prop --disabled-bg-rgb: Defaults to var(--bg-rgb);\n * @prop --inactive-bg: Defaults to rgb(var(--bg-rgb) / 70%);\n\n * @prop --text-color: Defaults to #{map.get($colors, blue)};\n * @prop --disabled-text-color: Defaults to #{map.get($colors, darkgrey)};\n * @prop --active-text-color: Defaults to #{map.get($colors, darkblue)};\n\n * @prop --h-font-size: Defaults to .93em;\n * @prop --v-font-size: Defaults to .875em;\n * @prop --tab-spacing: Gap between tabs. Defaults to 1rem;\n * @prop --tab-divider-size: Defaults to 0;\n * @prop --tab-divider-color: Defaults to #{map.get($colors, lightblue)};\n * @prop --border-radius: inherit;\n */\n\n:host {\n --focus-shadow: #{$control-focus-style};\n --padding-v: 0.75rem;\n --padding-h: 1rem;\n --bg-rgb: #{$layer-bg-color-rgb};\n --active-bg: rgb(var(--bg-rgb) / 100%);\n --inactive-bg: rgb(var(--bg-rgb) / 70%);\n --disabled-bg-rgb: var(--bg-rgb);\n --text-color: #{map.get($colors, blue)};\n --disabled-text-color: #{map.get($colors, darkgrey)};\n --active-text-color: #{map.get($colors, darkblue)};\n --h-font-size: 0.93em;\n --v-font-size: 0.875em;\n --tab-spacing: 0.5rem;\n --tab-divider-size: 0;\n --tab-divider-color: #{map.get($colors, lightblue)};\n --tab-indicator-size: 5px;\n --border-radius: inherit;\n\n display: inline-block;\n cursor: pointer;\n border-radius: var(--border-radius);\n}\n\n:host([direction='vertical']) {\n --padding-v: 1rem;\n --padding-h: 1rem;\n\n .nanotab {\n font-size: var(--v-font-size);\n\n &.nanotab--active {\n font-weight: 600;\n color: var(--active-text-color);\n }\n }\n}\n\n:host(.nano-sortable__dragged) {\n box-shadow: none;\n\n .nanotab {\n box-shadow: $layer-shadow-large;\n }\n}\n\n:host([direction='horizontal']) {\n .nanotab {\n font-size: var(--h-font-size);\n margin-block-start: var(--tab-indicator-size);\n border-inline-end: solid var(--tab-divider-size) var(--tab-divider-color);\n\n &.nanotab--active {\n margin-block-start: 0;\n border-block-start:\n solid var(--tab-indicator-size)\n var(--tab-indicator-color);\n background: var(--active-bg);\n color: var(--active-text-color);\n }\n }\n}\n\n.nanotab {\n @include text-inherit();\n\n border-radius: var(--border-radius);\n margin-inline-end: var(--tab-spacing);\n padding-block: var(--padding-v);\n padding-inline: var(--padding-h);\n display: flex;\n block-size: 100%;\n inline-size: auto;\n background: var(--inactive-bg);\n user-select: none;\n overflow: visible;\n white-space: nowrap;\n align-items: center;\n position: relative;\n\n & ::slotted(*) {\n display: flex;\n align-items: center;\n }\n\n & ::slotted(.nano-sortable__keyboard-handle) {\n position: absolute;\n inset-inline-end: -1em;\n background: var(--inactive-bg);\n z-index: 1;\n }\n\n :host(:last-of-type) & {\n margin-inline-end: 0;\n }\n\n &--disabled {\n background: rgb(var(--disabled-bg-rgb) / 100%);\n opacity: 0.5;\n cursor: not-allowed;\n color: var(--disabled-text-color);\n }\n\n &--closable {\n padding-inline-end: 0;\n }\n\n &__tab {\n display: flex;\n border-radius: inherit;\n\n &:hover:not(.tab--disabled) {\n text-shadow: 0 0 0.01px var(--text-color);\n }\n\n &:focus {\n outline: none;\n outline-style: none;\n box-shadow: none;\n border-color: transparent;\n }\n\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n }\n\n &:focus-visible:not(.nanotab--disabled)::before {\n box-shadow: var(--focus-shadow) inset;\n\n .nanotab--active & {\n box-shadow: var(--focus-shadow);\n }\n }\n }\n\n &__close-button {\n margin-inline-start: #{$spacing-small};\n margin-inline-end: calc(var(--padding-h) / 2);\n appearance: none !important;\n\n --padding: #{$spacing-xsmall} !important;\n }\n}\n","import {\n Component,\n Element,\n Host,\n ComponentInterface,\n Method,\n Prop,\n h,\n Event,\n EventEmitter,\n} from '@stencil/core';\n\nlet id = 0;\n\n/**\n * @slot start - start of the tab, content. Outside of the focusable element\n * @slot end - end of the tab, content. Outside of the focusable element\n * @slot - The tab's label.\n *\n * @part base - the wrapper around the whole control\n * @part tab - the main tab control that controls the active state\n * @part close-btn - the close button of the tab (if `closable=true`)\n */\n\n@Component({\n tag: 'nano-tab',\n styleUrl: 'tab.scss',\n shadow: true,\n})\nexport class Tab implements ComponentInterface {\n private tabId = `nano-tab-${++id}`;\n private tab: HTMLElement;\n\n @Element() host: HTMLNanoTabElement;\n\n /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n @Prop({ reflect: true }) panel = '';\n\n /** The active, selected tab. If none active, the first will automatically be selected. */\n @Prop({ reflect: true }) active = false;\n\n /** Set to true to draw the tab in an active state. */\n @Prop({ reflect: true }) disabled = false;\n\n /** When true, the tab will be rendered with a close icon. */\n @Prop() closable = false;\n\n /** Emitted when the tab is closable and the close button is activated. */\n @Event() nanoTabClose: EventEmitter;\n\n /** Sets focus to the tab. */\n @Method()\n async setFocus() {\n this.tab.focus({ preventScroll: true });\n }\n\n /** Removes focus from the tab. */\n @Method()\n async removeFocus() {\n this.tab.blur();\n }\n\n private handleCloseClick = () => {\n this.nanoTabClose.emit();\n };\n\n private handleCloseKeydown = (e: KeyboardEvent) => {\n if (e.key === ' ') this.handleCloseClick();\n };\n\n render() {\n return (\n <Host id={this.host.id || this.tabId}>\n <div\n part=\"base\"\n class={{\n nanotab: true,\n 'nanotab--active': this.active,\n 'nanotab--disabled': this.disabled,\n 'nanotab--closable': this.closable,\n }}\n >\n <slot name=\"start\" />\n <div\n part=\"tab\"\n ref={(el) => (this.tab = el)}\n role=\"tab\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n tabindex={this.disabled || !this.active ? '-1' : '0'}\n class=\"nanotab__tab\"\n >\n <slot />\n </div>\n {this.closable && !this.disabled && (\n <nano-icon-button\n label=\"Close this tab\"\n iconName=\"light/times\"\n class=\"nanotab__close-button\"\n onClick={this.handleCloseClick}\n onKeyDown={this.handleCloseKeydown}\n part=\"close-btn\"\n />\n )}\n <slot name=\"end\" />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"nano-tab.entry.js","mappings":";;;;;AAAA,MAAM,MAAM,GAAG,2kHAA2kH;;ACY1lH,IAAI,EAAE,GAAG,CAAC,CAAC;MAiBE,GAAG;;;;IACN,UAAK,GAAG,YAAY,EAAE,EAAE,EAAE,CAAC;IAgC3B,qBAAgB,GAAG;MACzB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B,CAAC;IAEM,uBAAkB,GAAG,CAAC,CAAgB;MAC5C,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;QAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC;KAC5C,CAAC;iBAhC+B,EAAE;kBAGD,KAAK;oBAGH,KAAK;oBAGtB,KAAK;;;EAOxB,MAAM,QAAQ;IACZ,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;GACzC;;EAID,MAAM,WAAW;IACf,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;GACjB;EAUD,MAAM;IACJ,QACE,EAAC,IAAI,IACH,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK,EAC9B,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,IAE7C,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,iBAAiB,EAAE,IAAI,CAAC,MAAM;QAC9B,mBAAmB,EAAE,IAAI,CAAC,QAAQ;QAClC,mBAAmB,EAAE,IAAI,CAAC,QAAQ;OACnC,IAED,YAAM,IAAI,EAAC,OAAO,GAAG,EACrB,WACE,IAAI,EAAC,KAAK,EACV,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,GAAG,EACpD,KAAK,EAAC,cAAc,IAEpB,eAAQ,CACJ,EACL,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,KAC9B,wBACE,KAAK,EAAC,gBAAgB,EACtB,QAAQ,EAAC,aAAa,EACtB,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAClC,IAAI,EAAC,WAAW,GAChB,CACH,EACD,YAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/tabs/tab.scss?tag=nano-tab&encapsulation=shadow","./src/components/tabs/tab.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --focus-shadow: Defaults to #{$control-focus-style};\n\n * @prop --padding: Defaults to .75rem 1rem on placement 'top' and 1rem on placement 'start';\n\n * @prop --bg-rgb: Defaults to #{$layer-bg-color-rgb};\n * @prop --active-bg: Defaults to rgb(var(--bg-rgb) / 10%);\n * @prop --disabled-bg-rgb: Defaults to var(--bg-rgb);\n * @prop --inactive-bg: Defaults to rgb(var(--bg-rgb) / 70%);\n\n * @prop --text-color: Defaults to #{map.get($colors, blue)};\n * @prop --disabled-text-color: Defaults to #{map.get($colors, darkgrey)};\n * @prop --active-text-color: Defaults to #{map.get($colors, darkblue)};\n\n * @prop --h-font-size: Defaults to .93em;\n * @prop --v-font-size: Defaults to .875em;\n * @prop --tab-spacing: Gap between tabs. Defaults to 1rem;\n * @prop --tab-divider-size: Defaults to 0;\n * @prop --tab-divider-color: Defaults to #{map.get($colors, lightblue)};\n * @prop --border-radius: inherit;\n */\n\n:host {\n --focus-shadow: #{$control-focus-style};\n --padding-v: 0.75rem;\n --padding-h: 1rem;\n --bg-rgb: #{$layer-bg-color-rgb};\n --active-bg: rgb(var(--bg-rgb) / 100%);\n --inactive-bg: rgb(var(--bg-rgb) / 70%);\n --disabled-bg-rgb: var(--bg-rgb);\n --text-color: #{map.get($colors, blue)};\n --disabled-text-color: #{map.get($colors, darkgrey)};\n --active-text-color: #{map.get($colors, darkblue)};\n --h-font-size: 0.93em;\n --v-font-size: 0.875em;\n --tab-spacing: 0.5rem;\n --tab-divider-size: 0;\n --tab-divider-color: #{map.get($colors, lightblue)};\n --tab-indicator-size: 5px;\n --border-radius: inherit;\n\n display: inline-block;\n cursor: pointer;\n border-radius: var(--border-radius);\n}\n\n:host([direction='vertical']) {\n --padding-v: 1rem;\n --padding-h: 1rem;\n\n .nanotab {\n font-size: var(--v-font-size);\n\n &.nanotab--active {\n font-weight: 600;\n color: var(--active-text-color);\n }\n }\n}\n\n:host(.nano-sortable__dragged) {\n box-shadow: none;\n\n .nanotab {\n box-shadow: $layer-shadow-large;\n }\n}\n\n:host([direction='horizontal']) {\n .nanotab {\n font-size: var(--h-font-size);\n margin-block-start: var(--tab-indicator-size);\n border-inline-end: solid var(--tab-divider-size) var(--tab-divider-color);\n\n &.nanotab--active {\n margin-block-start: 0;\n border-block-start:\n solid var(--tab-indicator-size)\n var(--tab-indicator-color);\n background: var(--active-bg);\n color: var(--active-text-color);\n }\n }\n}\n\n.nanotab {\n @include text-inherit();\n\n border-radius: var(--border-radius);\n margin-inline-end: var(--tab-spacing);\n padding-block: var(--padding-v);\n padding-inline: var(--padding-h);\n display: flex;\n block-size: 100%;\n inline-size: auto;\n background: var(--inactive-bg);\n user-select: none;\n overflow: visible;\n white-space: nowrap;\n align-items: center;\n position: relative;\n\n & ::slotted(*) {\n display: flex;\n align-items: center;\n }\n\n & ::slotted(.nano-sortable__keyboard-handle) {\n position: absolute;\n inset-inline-end: -1em;\n background: var(--inactive-bg);\n z-index: 1;\n }\n\n :host(:last-of-type) & {\n margin-inline-end: 0;\n }\n\n &--disabled {\n background: rgb(var(--disabled-bg-rgb) / 100%);\n opacity: 0.5;\n cursor: not-allowed;\n color: var(--disabled-text-color);\n }\n\n &--closable {\n padding-inline-end: 0;\n }\n\n &__tab {\n display: flex;\n border-radius: inherit;\n\n &:hover:not(.tab--disabled) {\n text-shadow: 0 0 0.01px var(--text-color);\n }\n\n &:focus {\n outline: none;\n outline-style: none;\n box-shadow: none;\n border-color: transparent;\n }\n\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n }\n\n &:focus-visible:not(.nanotab--disabled)::before {\n box-shadow: var(--focus-shadow) inset;\n\n .nanotab--active & {\n box-shadow: var(--focus-shadow);\n }\n }\n }\n\n &__close-button {\n margin-inline-start: #{$spacing-small};\n margin-inline-end: calc(var(--padding-h) / 2);\n appearance: none !important;\n\n --padding: #{$spacing-xsmall} !important;\n }\n}\n","import {\n Component,\n Element,\n Host,\n ComponentInterface,\n Method,\n Prop,\n h,\n Event,\n EventEmitter,\n} from '@stencil/core';\n\nlet id = 0;\n\n/**\n * @slot start - start of the tab, content. Outside of the focusable element\n * @slot end - end of the tab, content. Outside of the focusable element\n * @slot - The tab's label.\n *\n * @part base - the wrapper around the whole control\n * @part tab - the main tab control that controls the active state\n * @part close-btn - the close button of the tab (if `closable=true`)\n */\n\n@Component({\n tag: 'nano-tab',\n styleUrl: 'tab.scss',\n shadow: true,\n})\nexport class Tab implements ComponentInterface {\n private tabId = `nano-tab-${++id}`;\n private tab: HTMLElement;\n\n @Element() host: HTMLNanoTabElement;\n\n /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n @Prop({ reflect: true }) panel = '';\n\n /** The active, selected tab. If none active, the first will automatically be selected. */\n @Prop({ reflect: true }) active = false;\n\n /** Set to true to draw the tab in an active state. */\n @Prop({ reflect: true }) disabled = false;\n\n /** When true, the tab will be rendered with a close icon. */\n @Prop() closable = false;\n\n /** Emitted when the tab is closable and the close button is activated. */\n @Event() nanoTabClose: EventEmitter;\n\n /** Sets focus to the tab. */\n @Method()\n async setFocus() {\n this.tab.focus({ preventScroll: true });\n }\n\n /** Removes focus from the tab. */\n @Method()\n async removeFocus() {\n this.tab.blur();\n }\n\n private handleCloseClick = () => {\n this.nanoTabClose.emit();\n };\n\n private handleCloseKeydown = (e: KeyboardEvent) => {\n if (e.key === ' ') this.handleCloseClick();\n };\n\n render() {\n return (\n <Host\n id={this.host.id || this.tabId}\n role=\"tab\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n >\n <div\n part=\"base\"\n class={{\n nanotab: true,\n 'nanotab--active': this.active,\n 'nanotab--disabled': this.disabled,\n 'nanotab--closable': this.closable,\n }}\n >\n <slot name=\"start\" />\n <div\n part=\"tab\"\n ref={(el) => (this.tab = el)}\n tabindex={this.disabled || !this.active ? '-1' : '0'}\n class=\"nanotab__tab\"\n >\n <slot />\n </div>\n {this.closable && !this.disabled && (\n <nano-icon-button\n label=\"Close this tab\"\n iconName=\"light/times\"\n class=\"nanotab__close-button\"\n onClick={this.handleCloseClick}\n onKeyDown={this.handleCloseKeydown}\n part=\"close-btn\"\n />\n )}\n <slot name=\"end\" />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/esm/{nano-table-d769b1dd.js → nano-table-cc0fc046.js} RENAMED
@@ -110,7 +110,7 @@ const createWorkerProxy = (worker, workerMsgId, exportedMethod) => (
110
110
  })
111
111
  );
112
112
 
113
- const workerPromise = import('./table.worker-cb6af8ab.js').then(m => m.worker);
113
+ const workerPromise = import('./table.worker-ca7b069b.js').then(m => m.worker);
114
114
  const createWorkerStore = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'createWorkerStore');
115
115
  const syncConfigToWorker = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'syncConfigToWorker');
116
116
  const syncDataToWorker = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'syncDataToWorker');
@@ -527,8 +527,9 @@ function cellRender(rowIndex, colIndex) {
527
527
  // Render it now and output it later.
528
528
  const templateEle = document.createElement('template');
529
529
  // @ts-expect-error
530
- tableInstance.customRenderer(tplResult, templateEle.content);
531
- tplResult = templateEle;
530
+ const result = tableInstance.customRenderer(tplResult, templateEle.content);
531
+ // custom rendering can render to the templateEle OR return a promise<string>
532
+ tplResult = result && result['then'] ? result : templateEle;
532
533
  }
533
534
  return tplResult ? (tplResult) : model.cellModel !== undefined && model.cellModel !== null ? (h(Fragment, null, (_b = model.cellModel) === null || _b === void 0 ? void 0 : _b.toString())) : ('');
534
535
  }
@@ -566,16 +567,25 @@ const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
566
567
  const ContentWrap = (props) => {
567
568
  const content = Content();
568
569
  return (h("div", Object.assign({ ref: (d) => {
569
- if (d && content instanceof Element) {
570
+ if (!d)
571
+ return;
572
+ if (content instanceof Element) {
573
+ // custom rendered an element
570
574
  d.replaceChildren();
571
575
  d.append(content['content'] || content);
572
576
  }
577
+ else if (content['then']) {
578
+ // custom rendered a promise. Most likely within SSR.
579
+ // @ts-expect-error
580
+ content.then((res) => (d.innerHTML = res));
581
+ }
573
582
  } }, props, { class: {
574
583
  [`${CSSNAMESPACE}__cell-content`]: true,
575
584
  [`${CSSNAMESPACE}__cell-content--wrap`]: !!column.wrap,
576
585
  }, innerHTML: typeof content === 'string' && content.includes('<')
577
586
  ? content
578
587
  : undefined }), (typeof content !== 'string' || !content.includes('<')) &&
588
+ !content['then'] &&
579
589
  !(content instanceof Element) &&
580
590
  content));
581
591
  };
@@ -1791,4 +1801,4 @@ Table.style = tableCss;
1791
1801
 
1792
1802
  export { Table as T, createWorker as c };
1793
1803
 
1794
- //# sourceMappingURL=nano-table-d769b1dd.js.map
1804
+ //# sourceMappingURL=nano-table-cc0fc046.js.map