@nanoporetech-digital/components 1.13.20 → 1.13.21

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 (44) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/nano-alert.cjs.entry.js +1 -1
  3. package/dist/cjs/nano-alert.cjs.entry.js.map +1 -1
  4. package/dist/collection/components/accordion/accordion.js +1 -1
  5. package/dist/collection/components/alert/alert.css +4 -0
  6. package/dist/collection/components/alert/alert.js +1 -1
  7. package/dist/collection/components/algolia/algolia-filter.js +2 -2
  8. package/dist/collection/components/algolia/algolia-input.js +5 -5
  9. package/dist/collection/components/algolia/algolia-results.js +1 -1
  10. package/dist/collection/components/algolia/algolia.js +5 -5
  11. package/dist/collection/components/checkbox/checkbox-group.js +2 -2
  12. package/dist/collection/components/checkbox/checkbox.js +2 -2
  13. package/dist/collection/components/date-input/date-input.js +7 -7
  14. package/dist/collection/components/date-picker/date-picker.js +5 -5
  15. package/dist/collection/components/details/details.js +1 -1
  16. package/dist/collection/components/dialog/dialog.js +1 -1
  17. package/dist/collection/components/file-upload/file-upload.js +3 -3
  18. package/dist/collection/components/global-nav/global-nav.js +4 -4
  19. package/dist/collection/components/grid/grid-item.js +1 -1
  20. package/dist/collection/components/icon/icon.js +1 -1
  21. package/dist/collection/components/input/input.js +5 -5
  22. package/dist/collection/components/nav-item/nav-item.js +4 -4
  23. package/dist/collection/components/range/range.js +4 -4
  24. package/dist/collection/components/resize-observe/resize-observe.js +1 -1
  25. package/dist/collection/components/select/select.js +5 -5
  26. package/dist/collection/components/slides/slides.js +7 -7
  27. package/dist/collection/components/tabs/tab-group.js +2 -2
  28. package/dist/custom-elements/index.js +1 -1
  29. package/dist/custom-elements/index.js.map +1 -1
  30. package/dist/esm/nano-alert.entry.js +1 -1
  31. package/dist/esm/nano-alert.entry.js.map +1 -1
  32. package/dist/esm-es5/nano-alert.entry.js +1 -1
  33. package/dist/esm-es5/nano-alert.entry.js.map +1 -1
  34. package/dist/nano-components/nano-components.esm.js +1 -1
  35. package/dist/nano-components/p-1fd60eec.system.js +1 -1
  36. package/dist/nano-components/p-5918ac51.entry.js +2 -0
  37. package/dist/nano-components/p-5918ac51.entry.js.map +1 -0
  38. package/dist/nano-components/{p-6f8baf7c.system.entry.js → p-a897cfae.system.entry.js} +2 -2
  39. package/dist/nano-components/p-a897cfae.system.entry.js.map +1 -0
  40. package/docs-json.json +1 -1
  41. package/package.json +2 -2
  42. package/dist/nano-components/p-0e1d7b66.entry.js +0 -2
  43. package/dist/nano-components/p-0e1d7b66.entry.js.map +0 -1
  44. package/dist/nano-components/p-6f8baf7c.system.entry.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.13.21](https://git.oxfordnanolabs.local/Digital/nano-components/compare/v1.13.20...v1.13.21) (2021-09-29)
7
+
8
+ **Note:** Version bump only for package @nanoporetech-digital/components
9
+
10
+
11
+
12
+
13
+
6
14
  ## [1.13.20](https://git.oxfordnanolabs.local/Digital/nano-components/compare/v1.13.19...v1.13.20) (2021-09-29)
7
15
 
8
16
  **Note:** Version bump only for package @nanoporetech-digital/components
@@ -10,7 +10,7 @@ const theme = require('./theme-5d49fd3e.js');
10
10
  require('./tabbable-69807c03.js');
11
11
  require('./dom-2fcf8654.js');
12
12
 
13
- const alertCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--border-color:var(--nano-layer-border-color, rgba(0, 0, 0, 0.1));--border-width:var(--nano-layer-border-width, 1px);--background:var(--nano-layer-bg, #fff);--tint-color:var(--nano-color-base, var(--nano-color-primary, #0084a9));--icon-size:2rem;--scrim-color:var(--nano-layer-overlay-dark, rgba(74, 74, 74, .5));--close-button-color:#b5aea7;display:block}:host(.nano-color){--tint-color:var(--nano-color-base, var(--nano-color-primary, #0084a9))}.alert{position:relative;background-color:var(--background);border:solid var(--border-width) var(--border-color);border-top-width:4px;border-top-color:var(--tint-color);border-radius:var(--border-radius);opacity:0;-webkit-transform:scale(0.9);transform:scale(0.9);-webkit-transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease;transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease}.alert:focus{outline:none}.alert:not(.alert--showing){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--open{opacity:1;-webkit-transform:none;transform:none}.alert--toasty,.alert--modal{-webkit-box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.3));box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.3));margin:var(--nano-spacing-medium, 16px)}.alert__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.alert__modal-wrap{position:fixed;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;top:0;right:0;bottom:0;left:0;z-index:var(--nano-layer-index-alert, 800)}.alert__message{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:var(--nano-spacing-medium, 16px);overflow:hidden;line-height:1.6}.alert__close{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.1em;padding-left:0;padding-right:var(--nano-spacing-medium, 16px);padding-top:0;padding-bottom:0;--color:var(--close-button-color)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.alert__close{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--nano-spacing-medium, 16px);padding-inline-end:var(--nano-spacing-medium, 16px)}}.alert__footer{padding:0 var(--nano-spacing-small, 8px) 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.alert__footer ::slotted(*),.alert__footer::slotted(*){-webkit-box-flex:1;-ms-flex:1;flex:1;margin:0 var(--nano-spacing-small, 8px) var(--nano-spacing-medium, 16px) !important}.alert__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--scrim-color);opacity:0;-webkit-transition:var(--nano-transition-fast, 0.3s) opacity;transition:var(--nano-transition-fast, 0.3s) opacity;z-index:var(--nano-layer-index-alert, 800);-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.alert__overlay--open{opacity:1}.alert__icon{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--icon-size)}.alert__icon::slotted(*){color:var(--tint-color);margin-left:var(--nano-spacing-medium, 16px)}.alert__icon ::slotted(*){color:var(--tint-color);margin-left:var(--nano-spacing-medium, 16px);margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.alert__icon ::slotted(*){margin-left:unset;margin-right:unset;-webkit-margin-start:var(--nano-spacing-medium, 16px);margin-inline-start:var(--nano-spacing-medium, 16px);-webkit-margin-end:0;margin-inline-end:0}}";
13
+ const alertCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--border-color:var(--nano-layer-border-color, rgba(0, 0, 0, 0.1));--border-width:var(--nano-layer-border-width, 1px);--background:var(--nano-layer-bg, #fff);--tint-color:var(--nano-color-base, var(--nano-color-primary, #0084a9));--icon-size:2rem;--scrim-color:var(--nano-layer-overlay-dark, rgba(74, 74, 74, .5));--close-button-color:#b5aea7;display:block}:host(.nano-color){--tint-color:var(--nano-color-base, var(--nano-color-primary, #0084a9))}.alert{position:relative;background-color:var(--background);border:solid var(--border-width) var(--border-color);border-top-width:4px;border-top-color:var(--tint-color);border-radius:var(--border-radius);opacity:0;-webkit-transform:scale(0.9);transform:scale(0.9);-webkit-transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease;transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease}.alert:focus{outline:none}.alert:not(.alert--showing){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--open{opacity:1;-webkit-transform:none;transform:none}.alert--toasty,.alert--modal{-webkit-box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.3));box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.3));margin:var(--nano-spacing-medium, 16px)}.alert__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.alert__modal-wrap{position:fixed;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;top:0;right:0;bottom:0;left:0;z-index:var(--nano-layer-index-alert, 800)}.alert__message{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:var(--nano-spacing-medium, 16px);overflow:hidden;line-height:1.6}.alert__close{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.1em;padding-left:0;padding-right:var(--nano-spacing-medium, 16px);padding-top:0;padding-bottom:0;--color:var(--close-button-color)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.alert__close{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--nano-spacing-medium, 16px);padding-inline-end:var(--nano-spacing-medium, 16px)}}.alert__footer{padding:0 var(--nano-spacing-small, 8px) 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.alert__footer ::slotted(*),.alert__footer::slotted(*){-webkit-box-flex:1;-ms-flex:1;flex:1;margin:0 var(--nano-spacing-small, 8px) var(--nano-spacing-medium, 16px) !important}.alert__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--scrim-color);opacity:0;-webkit-transition:var(--nano-transition-fast, 0.3s) opacity;transition:var(--nano-transition-fast, 0.3s) opacity;z-index:var(--nano-layer-index-alert, 800);-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.alert__overlay--open{opacity:1}.alert__icon{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--icon-size)}.alert__icon::slotted(*){color:var(--tint-color);margin-left:var(--nano-spacing-medium, 16px)}.alert__icon ::slotted(*){color:var(--tint-color);margin-left:var(--nano-spacing-medium, 16px);margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.alert__icon ::slotted(*){margin-left:unset;margin-right:unset;-webkit-margin-start:var(--nano-spacing-medium, 16px);margin-inline-start:var(--nano-spacing-medium, 16px);-webkit-margin-end:0;margin-inline-end:0}}.something{color:black}";
14
14
 
15
15
  const toastStackTr = Object.assign(document.createElement('div'), {
16
16
  className: 'nano-toast-stack nano-toast-stack--tr',
@@ -1 +1 @@
1
- {"file":"nano-alert.entry.cjs.js","mappings":"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","names":["h","raf","lockBodyScrolling","Modal","unlockBodyScrolling","Host","createColorClasses"],"sources":["./src/components/alert/alert.scss?tag=nano-alert&encapsulation=shadow","./src/components/alert/alert.tsx"],"sourcesContent":["@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n /**\n * @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --border-color: defaults to #{$layer-border-color};\n * @prop --border-width: defaults to #{$layer-border-width};\n * @prop --background: defaults to #{$layer-bg-color};\n * @prop --tint-color: defaults to var(--nano-color-base, #{nano-color(primary, base)});\n * @prop --icon-size: defaults to 1.5rem;\n * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n * @prop --close-button-color: defaults to #{$color-mediumgrey} ;\n */\n\n --border-radius: #{$layer-border-radius};\n --border-color: #{$layer-border-color};\n --border-width: #{$layer-border-width};\n --background: #{$layer-bg-color};\n --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n --icon-size: 2rem;\n --scrim-color: #{$layer-overlay-dark};\n --close-button-color: #{$color-palegrey};\n\n display: block;\n}\n\n:host(.nano-color) {\n --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n}\n\n.alert {\n position: relative;\n background-color: var(--background);\n border: solid var(--border-width) var(--border-color);\n border-top-width: 4px;\n border-top-color: var(--tint-color);\n border-radius: var(--border-radius);\n opacity: 0;\n transform: scale(0.9);\n transition:\n #{$transition-medium} opacity ease,\n #{$transition-fast} transform ease;\n\n &:focus {\n outline: none;\n }\n\n &:not(.alert--showing) {\n @include hidden;\n }\n\n &--open {\n opacity: 1;\n transform: none;\n }\n\n &--toasty,\n &--modal {\n box-shadow: #{$layer-shadow-large};\n margin: #{$spacing-medium};\n }\n}\n\n.alert__content {\n display: flex;\n align-items: stretch;\n}\n\n.alert__modal-wrap {\n position: fixed;\n display: flex;\n align-items: center;\n justify-content: center;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: #{$layer-index-alert};\n}\n\n.alert__message {\n flex: 1 1 auto;\n padding: #{$spacing-medium};\n overflow: hidden;\n line-height: 1.6;\n}\n\n.alert__close {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: 1.1em;\n\n @include padding(0, #{$spacing-medium}, 0, 0);\n\n --color: var(--close-button-color);\n}\n\n.alert__footer {\n padding: 0 #{$spacing-small} 0;\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n align-items: center;\n\n ::slotted(*),\n &::slotted(*) {\n flex: 1;\n margin: 0 #{$spacing-small} #{$spacing-medium} !important;\n }\n}\n\n.alert__overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: var(--scrim-color);\n opacity: 0;\n transition: #{$transition-fast} opacity;\n z-index: #{$layer-index-alert};\n backdrop-filter: blur(#{$layer-overlay-blur});\n\n &--open {\n opacity: 1;\n }\n}\n\n.alert__icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--icon-size);\n\n &::slotted(*) {\n color: var(--tint-color);\n margin-left: #{$spacing-medium};\n }\n}\n\n.alert__icon ::slotted(*) {\n color: var(--tint-color);\n\n @include margin(0, 0, 0, #{$spacing-medium});\n}\n\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n VNode,\n} from '@stencil/core';\nimport { Color } from '../../interface';\nimport Modal from '../../utils/modal';\nimport {\n createColorClasses,\n lockBodyScrolling,\n raf,\n unlockBodyScrolling,\n} from '../../utils/utils';\n\nconst toastStackTr = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--tr',\n});\nconst toastStackTl = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--tl',\n});\nconst toastStackBl = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--bl',\n});\nconst toastStackBr = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--br',\n});\n\n/**\n * Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.\n * @slot - The alert's content.\n * @slot icon - An icon to show in the alert.\n * @slot footer - Place items at the bottom of the alert. Best used with `button` elements - esp when used as with the `alert()` method.\n */\n@Component({\n tag: 'nano-alert',\n styleUrl: 'alert.scss',\n shadow: true,\n})\nexport class Alert implements ComponentInterface {\n private autoHideTimeout: ReturnType<typeof setTimeout>;\n private panel: HTMLElement;\n private overlay: HTMLElement;\n private modal: Modal;\n private originalTrigger: HTMLElement | null;\n private addedTransEnd = false;\n private goingToHide = false;\n private goingToShow = false;\n\n @State() isModal = false;\n @State() isToast = false;\n @State() isShowing = false;\n @State() label: string;\n\n @Element() host: HTMLNanoAlertElement;\n\n /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /** Set to true to make the alert closable. */\n @Prop({ reflect: true }) closable = false;\n\n /** The color to use from the application's color palette. */\n @Prop({ reflect: true }) color?: Color;\n\n /**\n * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n */\n @Prop() duration = Infinity;\n\n @Watch('duration')\n handleDurationChange() {\n this.restartAutoHide();\n }\n\n /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */\n @Event() nanoShow: EventEmitter;\n\n /** Emitted after the alert opens and all transitions are complete. */\n @Event() nanoAfterShow: EventEmitter;\n\n /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */\n @Event() nanoHide: EventEmitter;\n\n /** Emitted after the alert closes and all transitions are complete. */\n @Event() nanoAfterHide: EventEmitter;\n\n /** Shows the alert. */\n @Method()\n async show() {\n if (this.goingToShow) {\n return;\n }\n const nanoShow = this.nanoShow.emit();\n if (nanoShow.defaultPrevented) {\n this.open = false;\n return false;\n }\n\n this.host.hidden = false;\n this.goingToShow = true;\n this.open = true;\n raf(() => {\n this.isShowing = true;\n this.goingToShow = false;\n });\n\n if (this.duration < Infinity) {\n clearTimeout(this.autoHideTimeout);\n this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n }\n }\n\n /** Hides the alert */\n @Method()\n async hide() {\n if (this.goingToHide) {\n return;\n }\n const nanoHide = this.nanoHide.emit();\n\n if (nanoHide.defaultPrevented) {\n this.open = true;\n return false;\n }\n this.goingToHide = true;\n this.open = false;\n\n raf(() => (this.goingToHide = false));\n clearTimeout(this.autoHideTimeout);\n }\n\n /**\n * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n * calling this method again. The returned promise will resolve after the alert is hidden.\n *\n * @param position options are tr (top-right - default), tl (top-left), br (bottom-right), bl (bottom-left)\n * @returns a promise which will resolve after the alert has hidden\n */\n @Method()\n async toast(position: 'tr' | 'tl' | 'bl' | 'br' = 'tr') {\n this.isToast = true;\n return new Promise<void>((resolve) => {\n let toastStack: HTMLElement;\n switch (position) {\n case 'tl':\n toastStack = toastStackTl;\n break;\n case 'bl':\n toastStack = toastStackBl;\n break;\n case 'br':\n toastStack = toastStackBr;\n break;\n default:\n toastStack = toastStackTr;\n break;\n }\n\n if (!toastStack.parentElement) {\n document.body.appendChild(toastStack);\n }\n\n toastStack.appendChild(this.host);\n this.connectedCallback();\n this.show();\n\n this.host.addEventListener(\n 'nanoAfterHide',\n () => {\n this.host.remove();\n this.isToast = false;\n resolve();\n\n // Remove the toast stack from the DOM when there are no more alerts\n if (!toastStack.querySelector('nano-alert')) {\n toastStack.remove();\n }\n },\n { once: true }\n );\n });\n }\n\n /**\n * Displays the alert as a dialog / modal - more akin to a traditional js alert().\n * @param label a label for assistive technology\n */\n @Method()\n async alert(label: string) {\n this.isModal = true;\n this.label = label;\n\n return new Promise<void>((resolve) => {\n if (!document.body.contains(this.host)) {\n document.body.appendChild(this.host);\n }\n\n this.modal.activate();\n lockBodyScrolling(this.host);\n this.originalTrigger = document.activeElement as HTMLElement;\n\n raf(() => {\n this.show();\n });\n\n this.host.addEventListener(\n 'nanoAfterShow',\n () => {\n raf(() => this.panel.focus({ preventScroll: true }));\n },\n { once: true }\n );\n\n this.host.addEventListener(\n 'nanoAfterHide',\n () => {\n this.modal.deactivate();\n this.host.remove();\n this.label = undefined;\n this.isModal = false;\n resolve();\n\n // Restore focus to the original trigger\n if (\n this.originalTrigger &&\n typeof this.originalTrigger.focus === 'function'\n ) {\n setTimeout(() => this.originalTrigger.focus());\n }\n },\n { once: true }\n );\n });\n }\n\n private handleMouseMove = () => {\n this.restartAutoHide();\n };\n\n private handleCloseClick = () => {\n this.hide();\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (\n event.propertyName === 'opacity' &&\n (event.target === this.panel || event.target === this.overlay)\n ) {\n this.host.hidden = !this.open;\n this.isShowing = this.open;\n this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n }\n };\n\n private handleButtonClick = (event: Event) => {\n const target = event.target as HTMLElement;\n if (event.defaultPrevented) return;\n if (target.tagName && target.tagName.toLowerCase() === 'button')\n this.hide();\n };\n\n private restartAutoHide = () => {\n clearTimeout(this.autoHideTimeout);\n if (this.open && this.duration < Infinity) {\n this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n }\n };\n\n connectedCallback() {\n this.modal = new Modal(this.host);\n this.host.addEventListener('click', this.handleButtonClick);\n\n if (this.panel) {\n this.addedTransEnd = true;\n this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n }\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n this.host.removeEventListener('click', this.handleButtonClick);\n\n this.addedTransEnd = false;\n this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n }\n\n componentDidLoad() {\n // Show on init if open\n if (this.open) {\n this.show();\n }\n if (!this.addedTransEnd) {\n this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n }\n }\n\n private Panel = (): VNode => {\n return (\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class={{\n alert: true,\n 'alert--open': this.open,\n 'alert--toasty': this.isToast,\n 'alert--modal': !!this.isModal,\n 'alert--showing': this.isShowing,\n }}\n role={!!this.isModal ? 'alertdialog' : 'alert'}\n aria-live=\"assertive\"\n aria-atomic=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-modal={!!this.isModal ? 'true' : undefined}\n aria-label={this.label ? this.label : undefined}\n onMouseMove={this.handleMouseMove}\n tabIndex={!!this.isModal ? 0 : undefined}\n >\n <div class=\"alert__content\">\n <div part=\"icon\" class=\"alert__icon\">\n <slot name=\"icon\" />\n </div>\n <div part=\"message\" class=\"alert__message\">\n <slot />\n </div>\n {this.closable && (\n <div class=\"alert__close\">\n <nano-icon-button\n class=\"alert__close\"\n iconName=\"light/times\"\n label=\"close menu\"\n onClick={this.handleCloseClick}\n ></nano-icon-button>\n </div>\n )}\n </div>\n <div class=\"alert__footer\">\n <slot name=\"footer\" />\n </div>\n </div>\n );\n };\n\n render() {\n return (\n <Host\n class={{ ...createColorClasses(this.color) }}\n showing={this.isShowing}\n >\n {this.isModal && [\n <div\n part=\"overlay\"\n class={{\n alert__overlay: true,\n 'alert__overlay--open': this.open,\n }}\n ref={(div) => (this.overlay = div)}\n />,\n <div class=\"alert__modal-wrap\">\n <this.Panel />\n </div>,\n ]}\n {!this.isModal && <this.Panel />}\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"nano-alert.entry.cjs.js","mappings":"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","names":["h","raf","lockBodyScrolling","Modal","unlockBodyScrolling","Host","createColorClasses"],"sources":["./src/components/alert/alert.scss?tag=nano-alert&encapsulation=shadow","./src/components/alert/alert.tsx"],"sourcesContent":["@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n /**\n * @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --border-color: defaults to #{$layer-border-color};\n * @prop --border-width: defaults to #{$layer-border-width};\n * @prop --background: defaults to #{$layer-bg-color};\n * @prop --tint-color: defaults to var(--nano-color-base, #{nano-color(primary, base)});\n * @prop --icon-size: defaults to 1.5rem;\n * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n * @prop --close-button-color: defaults to #{$color-mediumgrey} ;\n */\n\n --border-radius: #{$layer-border-radius};\n --border-color: #{$layer-border-color};\n --border-width: #{$layer-border-width};\n --background: #{$layer-bg-color};\n --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n --icon-size: 2rem;\n --scrim-color: #{$layer-overlay-dark};\n --close-button-color: #{$color-palegrey};\n\n display: block;\n}\n\n:host(.nano-color) {\n --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n}\n\n.alert {\n position: relative;\n background-color: var(--background);\n border: solid var(--border-width) var(--border-color);\n border-top-width: 4px;\n border-top-color: var(--tint-color);\n border-radius: var(--border-radius);\n opacity: 0;\n transform: scale(0.9);\n transition:\n #{$transition-medium} opacity ease,\n #{$transition-fast} transform ease;\n\n &:focus {\n outline: none;\n }\n\n &:not(.alert--showing) {\n @include hidden;\n }\n\n &--open {\n opacity: 1;\n transform: none;\n }\n\n &--toasty,\n &--modal {\n box-shadow: #{$layer-shadow-large};\n margin: #{$spacing-medium};\n }\n}\n\n.alert__content {\n display: flex;\n align-items: stretch;\n}\n\n.alert__modal-wrap {\n position: fixed;\n display: flex;\n align-items: center;\n justify-content: center;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: #{$layer-index-alert};\n}\n\n.alert__message {\n flex: 1 1 auto;\n padding: #{$spacing-medium};\n overflow: hidden;\n line-height: 1.6;\n}\n\n.alert__close {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: 1.1em;\n\n @include padding(0, #{$spacing-medium}, 0, 0);\n\n --color: var(--close-button-color);\n}\n\n.alert__footer {\n padding: 0 #{$spacing-small} 0;\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n align-items: center;\n\n ::slotted(*),\n &::slotted(*) {\n flex: 1;\n margin: 0 #{$spacing-small} #{$spacing-medium} !important;\n }\n}\n\n.alert__overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: var(--scrim-color);\n opacity: 0;\n transition: #{$transition-fast} opacity;\n z-index: #{$layer-index-alert};\n backdrop-filter: blur(#{$layer-overlay-blur});\n\n &--open {\n opacity: 1;\n }\n}\n\n.alert__icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--icon-size);\n\n &::slotted(*) {\n color: var(--tint-color);\n margin-left: #{$spacing-medium};\n }\n}\n\n.alert__icon ::slotted(*) {\n color: var(--tint-color);\n\n @include margin(0, 0, 0, #{$spacing-medium});\n}\n// just testing - rm later\n.something {\n color: black;\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n VNode,\n} from '@stencil/core';\nimport { Color } from '../../interface';\nimport Modal from '../../utils/modal';\nimport {\n createColorClasses,\n lockBodyScrolling,\n raf,\n unlockBodyScrolling,\n} from '../../utils/utils';\n\nconst toastStackTr = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--tr',\n});\nconst toastStackTl = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--tl',\n});\nconst toastStackBl = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--bl',\n});\nconst toastStackBr = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--br',\n});\n\n/**\n * Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.\n * @slot - The alert's content.\n * @slot icon - An icon to show in the alert.\n * @slot footer - Place items at the bottom of the alert. Best used with `button` elements - esp when used as with the `alert()` method.\n */\n@Component({\n tag: 'nano-alert',\n styleUrl: 'alert.scss',\n shadow: true,\n})\nexport class Alert implements ComponentInterface {\n private autoHideTimeout: ReturnType<typeof setTimeout>;\n private panel: HTMLElement;\n private overlay: HTMLElement;\n private modal: Modal;\n private originalTrigger: HTMLElement | null;\n private addedTransEnd = false;\n private goingToHide = false;\n private goingToShow = false;\n\n @State() isModal = false;\n @State() isToast = false;\n @State() isShowing = false;\n @State() label: string;\n\n @Element() host: HTMLNanoAlertElement;\n\n /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /** Set to true to make the alert closable. */\n @Prop({ reflect: true }) closable = false;\n\n /** The color to use from the application's color palette. */\n @Prop({ reflect: true }) color?: Color;\n\n /**\n * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n */\n @Prop() duration = Infinity;\n\n @Watch('duration')\n handleDurationChange() {\n this.restartAutoHide();\n }\n\n /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */\n @Event() nanoShow: EventEmitter;\n\n /** Emitted after the alert opens and all transitions are complete. */\n @Event() nanoAfterShow: EventEmitter;\n\n /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */\n @Event() nanoHide: EventEmitter;\n\n /** Emitted after the alert closes and all transitions are complete. */\n @Event() nanoAfterHide: EventEmitter;\n\n /** Shows the alert. */\n @Method()\n async show() {\n if (this.goingToShow) {\n return;\n }\n const nanoShow = this.nanoShow.emit();\n if (nanoShow.defaultPrevented) {\n this.open = false;\n return false;\n }\n\n this.host.hidden = false;\n this.goingToShow = true;\n this.open = true;\n raf(() => {\n this.isShowing = true;\n this.goingToShow = false;\n });\n\n if (this.duration < Infinity) {\n clearTimeout(this.autoHideTimeout);\n this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n }\n }\n\n /** Hides the alert */\n @Method()\n async hide() {\n if (this.goingToHide) {\n return;\n }\n const nanoHide = this.nanoHide.emit();\n\n if (nanoHide.defaultPrevented) {\n this.open = true;\n return false;\n }\n this.goingToHide = true;\n this.open = false;\n\n raf(() => (this.goingToHide = false));\n clearTimeout(this.autoHideTimeout);\n }\n\n /**\n * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n * calling this method again. The returned promise will resolve after the alert is hidden.\n *\n * @param position options are tr (top-right - default), tl (top-left), br (bottom-right), bl (bottom-left)\n * @returns a promise which will resolve after the alert has hidden\n */\n @Method()\n async toast(position: 'tr' | 'tl' | 'bl' | 'br' = 'tr') {\n this.isToast = true;\n return new Promise<void>((resolve) => {\n let toastStack: HTMLElement;\n switch (position) {\n case 'tl':\n toastStack = toastStackTl;\n break;\n case 'bl':\n toastStack = toastStackBl;\n break;\n case 'br':\n toastStack = toastStackBr;\n break;\n default:\n toastStack = toastStackTr;\n break;\n }\n\n if (!toastStack.parentElement) {\n document.body.appendChild(toastStack);\n }\n\n toastStack.appendChild(this.host);\n this.connectedCallback();\n this.show();\n\n this.host.addEventListener(\n 'nanoAfterHide',\n () => {\n this.host.remove();\n this.isToast = false;\n resolve();\n\n // Remove the toast stack from the DOM when there are no more alerts\n if (!toastStack.querySelector('nano-alert')) {\n toastStack.remove();\n }\n },\n { once: true }\n );\n });\n }\n\n /**\n * Displays the alert as a dialog / modal - more akin to a traditional js alert().\n * @param label a label for assistive technology\n */\n @Method()\n async alert(label: string) {\n this.isModal = true;\n this.label = label;\n\n return new Promise<void>((resolve) => {\n if (!document.body.contains(this.host)) {\n document.body.appendChild(this.host);\n }\n\n this.modal.activate();\n lockBodyScrolling(this.host);\n this.originalTrigger = document.activeElement as HTMLElement;\n\n raf(() => {\n this.show();\n });\n\n this.host.addEventListener(\n 'nanoAfterShow',\n () => {\n raf(() => this.panel.focus({ preventScroll: true }));\n },\n { once: true }\n );\n\n this.host.addEventListener(\n 'nanoAfterHide',\n () => {\n this.modal.deactivate();\n this.host.remove();\n this.label = undefined;\n this.isModal = false;\n resolve();\n\n // Restore focus to the original trigger\n if (\n this.originalTrigger &&\n typeof this.originalTrigger.focus === 'function'\n ) {\n setTimeout(() => this.originalTrigger.focus());\n }\n },\n { once: true }\n );\n });\n }\n\n private handleMouseMove = () => {\n this.restartAutoHide();\n };\n\n private handleCloseClick = () => {\n this.hide();\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (\n event.propertyName === 'opacity' &&\n (event.target === this.panel || event.target === this.overlay)\n ) {\n this.host.hidden = !this.open;\n this.isShowing = this.open;\n this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n }\n };\n\n private handleButtonClick = (event: Event) => {\n const target = event.target as HTMLElement;\n if (event.defaultPrevented) return;\n if (target.tagName && target.tagName.toLowerCase() === 'button')\n this.hide();\n };\n\n private restartAutoHide = () => {\n clearTimeout(this.autoHideTimeout);\n if (this.open && this.duration < Infinity) {\n this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n }\n };\n\n connectedCallback() {\n this.modal = new Modal(this.host);\n this.host.addEventListener('click', this.handleButtonClick);\n\n if (this.panel) {\n this.addedTransEnd = true;\n this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n }\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n this.host.removeEventListener('click', this.handleButtonClick);\n\n this.addedTransEnd = false;\n this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n }\n\n componentDidLoad() {\n // Show on init if open\n if (this.open) {\n this.show();\n }\n if (!this.addedTransEnd) {\n this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n }\n }\n\n private Panel = (): VNode => {\n return (\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class={{\n alert: true,\n 'alert--open': this.open,\n 'alert--toasty': this.isToast,\n 'alert--modal': !!this.isModal,\n 'alert--showing': this.isShowing,\n }}\n role={!!this.isModal ? 'alertdialog' : 'alert'}\n aria-live=\"assertive\"\n aria-atomic=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-modal={!!this.isModal ? 'true' : undefined}\n aria-label={this.label ? this.label : undefined}\n onMouseMove={this.handleMouseMove}\n tabIndex={!!this.isModal ? 0 : undefined}\n >\n <div class=\"alert__content\">\n <div part=\"icon\" class=\"alert__icon\">\n <slot name=\"icon\" />\n </div>\n <div part=\"message\" class=\"alert__message\">\n <slot />\n </div>\n {this.closable && (\n <div class=\"alert__close\">\n <nano-icon-button\n class=\"alert__close\"\n iconName=\"light/times\"\n label=\"close menu\"\n onClick={this.handleCloseClick}\n ></nano-icon-button>\n </div>\n )}\n </div>\n <div class=\"alert__footer\">\n <slot name=\"footer\" />\n </div>\n </div>\n );\n };\n\n render() {\n return (\n <Host\n class={{ ...createColorClasses(this.color) }}\n showing={this.isShowing}\n >\n {this.isModal && [\n <div\n part=\"overlay\"\n class={{\n alert__overlay: true,\n 'alert__overlay--open': this.open,\n }}\n ref={(div) => (this.overlay = div)}\n />,\n <div class=\"alert__modal-wrap\">\n <this.Panel />\n </div>,\n ]}\n {!this.isModal && <this.Panel />}\n </Host>\n );\n }\n}\n"],"version":3}
@@ -47,7 +47,7 @@ export class Accordion {
47
47
  "references": {
48
48
  "Color": {
49
49
  "location": "import",
50
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
50
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
51
51
  }
52
52
  }
53
53
  },
@@ -216,4 +216,8 @@
216
216
  /* autoprefixer: ignore next */
217
217
  margin-inline-end: 0;
218
218
  }
219
+ }
220
+
221
+ .something {
222
+ color: black;
219
223
  }
@@ -295,7 +295,7 @@ export class Alert {
295
295
  "references": {
296
296
  "Color": {
297
297
  "location": "import",
298
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
298
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
299
299
  }
300
300
  }
301
301
  },
@@ -377,7 +377,7 @@ export class AlgoliaFilter {
377
377
  "references": {
378
378
  "StorageMethods": {
379
379
  "location": "import",
380
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
380
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
381
381
  }
382
382
  }
383
383
  },
@@ -420,7 +420,7 @@ export class AlgoliaFilter {
420
420
  "references": {
421
421
  "FilterChangeEventDetail": {
422
422
  "location": "import",
423
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
423
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
424
424
  }
425
425
  }
426
426
  }
@@ -225,7 +225,7 @@ export class AlgoliaInput {
225
225
  "references": {
226
226
  "SearchIndex": {
227
227
  "location": "import",
228
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
228
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
229
229
  }
230
230
  }
231
231
  },
@@ -346,7 +346,7 @@ export class AlgoliaInput {
346
346
  "references": {
347
347
  "StorageMethods": {
348
348
  "location": "import",
349
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
349
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
350
350
  }
351
351
  }
352
352
  },
@@ -387,7 +387,7 @@ export class AlgoliaInput {
387
387
  "references": {
388
388
  "AloliaSearchResultDetail": {
389
389
  "location": "import",
390
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
390
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
391
391
  }
392
392
  }
393
393
  }
@@ -407,7 +407,7 @@ export class AlgoliaInput {
407
407
  "references": {
408
408
  "AloliaSearchResultDetail": {
409
409
  "location": "import",
410
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
410
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
411
411
  }
412
412
  }
413
413
  }
@@ -427,7 +427,7 @@ export class AlgoliaInput {
427
427
  "references": {
428
428
  "AloliaSearchResultDetail": {
429
429
  "location": "import",
430
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
430
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
431
431
  }
432
432
  }
433
433
  }
@@ -248,7 +248,7 @@ export class AlgoliaResults {
248
248
  "references": {
249
249
  "PageChangeEventDetail": {
250
250
  "location": "import",
251
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
251
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
252
252
  }
253
253
  }
254
254
  }
@@ -756,7 +756,7 @@ export class Algolia {
756
756
  "references": {
757
757
  "SearchIndex": {
758
758
  "location": "import",
759
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
759
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
760
760
  }
761
761
  }
762
762
  },
@@ -1000,7 +1000,7 @@ export class Algolia {
1000
1000
  "references": {
1001
1001
  "StorageMethods": {
1002
1002
  "location": "import",
1003
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
1003
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
1004
1004
  }
1005
1005
  }
1006
1006
  },
@@ -1065,7 +1065,7 @@ export class Algolia {
1065
1065
  "references": {
1066
1066
  "IndexResult": {
1067
1067
  "location": "import",
1068
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
1068
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
1069
1069
  }
1070
1070
  }
1071
1071
  }
@@ -1085,7 +1085,7 @@ export class Algolia {
1085
1085
  "references": {
1086
1086
  "IndexResult": {
1087
1087
  "location": "import",
1088
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
1088
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
1089
1089
  }
1090
1090
  }
1091
1091
  }
@@ -1105,7 +1105,7 @@ export class Algolia {
1105
1105
  "references": {
1106
1106
  "IndexResult": {
1107
1107
  "location": "import",
1108
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
1108
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
1109
1109
  }
1110
1110
  }
1111
1111
  }
@@ -351,7 +351,7 @@ export class CheckboxGroup {
351
351
  "references": {
352
352
  "ControlValidityEventDetail": {
353
353
  "location": "import",
354
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
354
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
355
355
  }
356
356
  }
357
357
  }
@@ -373,7 +373,7 @@ export class CheckboxGroup {
373
373
  },
374
374
  "ControlValidity": {
375
375
  "location": "import",
376
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
376
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
377
377
  }
378
378
  },
379
379
  "return": "Promise<ControlValidity>"
@@ -384,7 +384,7 @@ export class Checkbox {
384
384
  "references": {
385
385
  "Color": {
386
386
  "location": "import",
387
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
387
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
388
388
  }
389
389
  }
390
390
  },
@@ -419,7 +419,7 @@ export class Checkbox {
419
419
  "references": {
420
420
  "CheckboxChangeEventDetail": {
421
421
  "location": "import",
422
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
422
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
423
423
  }
424
424
  }
425
425
  }
@@ -331,7 +331,7 @@ export class DateInput {
331
331
  "references": {
332
332
  "LocalDateOpts": {
333
333
  "location": "import",
334
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
334
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
335
335
  }
336
336
  }
337
337
  },
@@ -452,7 +452,7 @@ export class DateInput {
452
452
  "references": {
453
453
  "DaysOfWeek": {
454
454
  "location": "import",
455
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/utils/date-utils.ts"
455
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/utils/date-utils.ts"
456
456
  }
457
457
  }
458
458
  },
@@ -476,7 +476,7 @@ export class DateInput {
476
476
  "references": {
477
477
  "DuetLocalizedText": {
478
478
  "location": "import",
479
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
479
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
480
480
  }
481
481
  }
482
482
  },
@@ -518,7 +518,7 @@ export class DateInput {
518
518
  "references": {
519
519
  "Color": {
520
520
  "location": "import",
521
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
521
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
522
522
  }
523
523
  }
524
524
  },
@@ -869,7 +869,7 @@ export class DateInput {
869
869
  "references": {
870
870
  "DateInputChangeEventDetail": {
871
871
  "location": "import",
872
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
872
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
873
873
  }
874
874
  }
875
875
  }
@@ -892,7 +892,7 @@ export class DateInput {
892
892
  "references": {
893
893
  "ControlValidityEventDetail": {
894
894
  "location": "import",
895
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
895
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
896
896
  }
897
897
  }
898
898
  }
@@ -914,7 +914,7 @@ export class DateInput {
914
914
  },
915
915
  "ControlValidity": {
916
916
  "location": "import",
917
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
917
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
918
918
  }
919
919
  },
920
920
  "return": "Promise<ControlValidity>"
@@ -348,7 +348,7 @@ export class NanoDatePicker {
348
348
  "references": {
349
349
  "DaysOfWeek": {
350
350
  "location": "import",
351
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/utils/date-utils.ts"
351
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/utils/date-utils.ts"
352
352
  }
353
353
  }
354
354
  },
@@ -373,7 +373,7 @@ export class NanoDatePicker {
373
373
  "references": {
374
374
  "DuetLocalizedText": {
375
375
  "location": "import",
376
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
376
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
377
377
  }
378
378
  }
379
379
  },
@@ -396,7 +396,7 @@ export class NanoDatePicker {
396
396
  "references": {
397
397
  "Color": {
398
398
  "location": "import",
399
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
399
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
400
400
  }
401
401
  }
402
402
  },
@@ -420,7 +420,7 @@ export class NanoDatePicker {
420
420
  "references": {
421
421
  "DateDisabledPredicate": {
422
422
  "location": "import",
423
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
423
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
424
424
  }
425
425
  }
426
426
  },
@@ -499,7 +499,7 @@ export class NanoDatePicker {
499
499
  "references": {
500
500
  "PickerChangeEvent": {
501
501
  "location": "import",
502
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
502
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
503
503
  }
504
504
  }
505
505
  }
@@ -226,7 +226,7 @@ export class Details {
226
226
  "references": {
227
227
  "Color": {
228
228
  "location": "import",
229
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
229
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
230
230
  }
231
231
  }
232
232
  },
@@ -337,7 +337,7 @@ export class Dialog {
337
337
  "references": {
338
338
  "StorageMethods": {
339
339
  "location": "import",
340
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
340
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
341
341
  }
342
342
  }
343
343
  },
@@ -713,7 +713,7 @@ export class FileUpload {
713
713
  "references": {
714
714
  "FileInputChangeEventDetail": {
715
715
  "location": "import",
716
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
716
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
717
717
  }
718
718
  }
719
719
  }
@@ -766,7 +766,7 @@ export class FileUpload {
766
766
  "references": {
767
767
  "ControlValidityEventDetail": {
768
768
  "location": "import",
769
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
769
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
770
770
  }
771
771
  }
772
772
  }
@@ -788,7 +788,7 @@ export class FileUpload {
788
788
  },
789
789
  "ControlValidity": {
790
790
  "location": "import",
791
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
791
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
792
792
  }
793
793
  },
794
794
  "return": "Promise<ControlValidity>"
@@ -1367,7 +1367,7 @@ export class GlobalNav {
1367
1367
  },
1368
1368
  "SearchIndex": {
1369
1369
  "location": "import",
1370
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
1370
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
1371
1371
  }
1372
1372
  }
1373
1373
  },
@@ -1616,7 +1616,7 @@ export class GlobalNav {
1616
1616
  "references": {
1617
1617
  "AloliaSearchResultDetail": {
1618
1618
  "location": "import",
1619
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
1619
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
1620
1620
  }
1621
1621
  }
1622
1622
  }
@@ -1636,7 +1636,7 @@ export class GlobalNav {
1636
1636
  "references": {
1637
1637
  "AlgoliaNetworkError": {
1638
1638
  "location": "import",
1639
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
1639
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
1640
1640
  }
1641
1641
  }
1642
1642
  }
@@ -1656,7 +1656,7 @@ export class GlobalNav {
1656
1656
  "references": {
1657
1657
  "AloliaSearchResultDetail": {
1658
1658
  "location": "import",
1659
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
1659
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
1660
1660
  }
1661
1661
  }
1662
1662
  }
@@ -121,7 +121,7 @@ export class GridItem {
121
121
  },
122
122
  "GridSizes": {
123
123
  "location": "import",
124
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
124
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
125
125
  }
126
126
  },
127
127
  "return": "Promise<void>"
@@ -113,7 +113,7 @@ export class Icon {
113
113
  "references": {
114
114
  "Color": {
115
115
  "location": "import",
116
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
116
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
117
117
  }
118
118
  }
119
119
  },
@@ -425,7 +425,7 @@ export class Input {
425
425
  "references": {
426
426
  "Color": {
427
427
  "location": "import",
428
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
428
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
429
429
  }
430
430
  }
431
431
  },
@@ -996,7 +996,7 @@ export class Input {
996
996
  "references": {
997
997
  "TextFieldTypes": {
998
998
  "location": "import",
999
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
999
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
1000
1000
  }
1001
1001
  }
1002
1002
  },
@@ -1155,7 +1155,7 @@ export class Input {
1155
1155
  "references": {
1156
1156
  "InputChangeEventDetail": {
1157
1157
  "location": "import",
1158
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
1158
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
1159
1159
  }
1160
1160
  }
1161
1161
  }
@@ -1244,7 +1244,7 @@ export class Input {
1244
1244
  "references": {
1245
1245
  "ControlValidityEventDetail": {
1246
1246
  "location": "import",
1247
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
1247
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
1248
1248
  }
1249
1249
  }
1250
1250
  }
@@ -1266,7 +1266,7 @@ export class Input {
1266
1266
  },
1267
1267
  "ControlValidity": {
1268
1268
  "location": "import",
1269
- "path": "/builds/ca3VH5WE/0/Digital/nano-components/packages/components/src/interface.d.ts"
1269
+ "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
1270
1270
  }
1271
1271
  },
1272
1272
  "return": "Promise<ControlValidity>"