npm - @nanoporetech-digital/components - Versions diffs - 4.5.2 → 4.5.3 - Mend

@nanoporetech-digital/components 4.5.2 → 4.5.3

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 (65) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [4.5.3](https://git.oxfordnanolabs.local/Digital/nano-components/compare/v4.5.2...v4.5.3) (2023-05-09)
+### Bug Fixes
+* **alert:** fixed error where disconnectedCallback is fired on init due to `hoist: true` ([de25b89](https://git.oxfordnanolabs.local/Digital/nano-components/commits/de25b89eb87fe40ed2abd09bd707dcfa80944802))
+* **checkbox-group:** stop trying to loop through checkboxes if they're not there! ([819b063](https://git.oxfordnanolabs.local/Digital/nano-components/commits/819b0631ed150fdfba6dd4fa3c577db5ac5da8ef))
+* **global-nav:** stopped assigning role on `nano-global-nav`. Fixes a11y issues of nested primary landmarks ([733b1aa](https://git.oxfordnanolabs.local/Digital/nano-components/commits/733b1aa39adbac603ab94553aab3081fffe41e48))
+* **tooltip:** fixed error. Make sure there's a target to put text in before putting text there ([89a28ee](https://git.oxfordnanolabs.local/Digital/nano-components/commits/89a28eea97bd7606efc8370a091d21b9c633ded4))
 ## [4.5.2](https://git.oxfordnanolabs.local/Digital/nano-components/compare/v4.5.1...v4.5.2) (2023-04-21)
 **Note:** Version bump only for package @nanoporetech-digital/components

package/dist/cjs/nano-alert.cjs.entry.js CHANGED Viewed

@@ -221,8 +221,8 @@ const Alert = class {
     });
   }
   connectedCallback() {
-    this.handleHoistChange();
     this.modal = new modal.Modal(this.host);
+    this.handleHoistChange();
     this.host.addEventListener('click', this.handleButtonClick);
     if (this.panel) {
       this.addedTransEnd = true;
@@ -233,7 +233,8 @@ const Alert = class {
     scroll.unlockBodyScrolling(this.host);
     this.host.removeEventListener('click', this.handleButtonClick);
     this.addedTransEnd = false;
-    this.panel.removeEventListener('transitionend', this.handleTransitionEnd);
+    if (this.panel)
+      this.panel.removeEventListener('transitionend', this.handleTransitionEnd);
   }
   componentDidLoad() {
     // Show on init if open

package/dist/cjs/nano-alert.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-alert.entry.cjs.js","mappings":"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","names":["h","lockBodyScrolling","Modal","unlockBodyScrolling","Host","createColorClasses"],"sources":["./src/components/alert/alert.scss?tag=nano-alert&encapsulation=shadow","./src/components/alert/alert.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/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 #{map.get($colors, 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: #{map.get($colors, 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-block-start-width: 4px;\n border-block-start-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 inset: 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 --color: var(--close-button-color);\n\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: 1.1em;\n padding-inline: 0 #{$spacing-medium};\n padding-block: 0;\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 flex: 1;\n margin: 0 #{$spacing-small} #{$spacing-medium} !important;\n }\n}\n\n.alert__overlay {\n position: fixed;\n inset: 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-inline-start: #{$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 Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { createColorClasses } from '../../utils/theme';\nimport type { Color } from '../../interface';\n\nlet toastStackTr: HTMLElement;\nlet toastStackTl: HTMLElement;\nlet toastStackBl: HTMLElement;\nlet toastStackBr: HTMLElement;\n\nif (globalThis['document']) {\n toastStackTr = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--tr',\n });\n toastStackTl = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--tl',\n });\n toastStackBl = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--bl',\n });\n toastStackBr = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--br',\n });\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 /\n Relocate the dialog to the root of the DOM.\n * Most useful in conjunction with `alert()` when parental elements\n * have css stacking constraints which don't allow for `position: fixed`\n /\n @Prop() hoist = false;\n\n @Watch('hoist')\n handleHoistChange() {\n if (!this.hoist \|\| document.body.children[0] === this.host) return;\n document.body.prepend(this.host);\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 requestAnimationFrame(() => {\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 requestAnimationFrame(() => (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 const onClose = () => {\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\n this.host.addEventListener('nanoAfterHide', onClose, { once: true });\n this.host.addEventListener('nano-after-hide', onClose, { once: true });\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 requestAnimationFrame(() => {\n this.show();\n });\n\n const onOpen = () =>\n requestAnimationFrame(() => this.panel.focus({ preventScroll: true }));\n\n const onClose = () => {\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\n this.host.addEventListener('nanoAfterShow', onOpen, { once: true });\n this.host.addEventListener('nano-after-show', onOpen, { once: true });\n\n this.host.addEventListener('nanoAfterHide', onClose, {\n once: true,\n });\n this.host.addEventListener('nano-after-hide', onClose, {\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 = (e: PointerEvent & { target: HTMLElement }) => {\n if (e.defaultPrevented) return;\n if (e.target.tagName && e.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.handleHoistChange();\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","lockBodyScrolling","Modal","unlockBodyScrolling","Host","createColorClasses"],"sources":["./src/components/alert/alert.scss?tag=nano-alert&encapsulation=shadow","./src/components/alert/alert.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/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 #{map.get($colors, 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: #{map.get($colors, 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-block-start-width: 4px;\n border-block-start-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 inset: 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 --color: var(--close-button-color);\n\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: 1.1em;\n padding-inline: 0 #{$spacing-medium};\n padding-block: 0;\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 flex: 1;\n margin: 0 #{$spacing-small} #{$spacing-medium} !important;\n }\n}\n\n.alert__overlay {\n position: fixed;\n inset: 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-inline-start: #{$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 Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { createColorClasses } from '../../utils/theme';\nimport type { Color } from '../../interface';\n\nlet toastStackTr: HTMLElement;\nlet toastStackTl: HTMLElement;\nlet toastStackBl: HTMLElement;\nlet toastStackBr: HTMLElement;\n\nif (globalThis['document']) {\n toastStackTr = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--tr',\n });\n toastStackTl = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--tl',\n });\n toastStackBl = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--bl',\n });\n toastStackBr = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--br',\n });\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 /\n Relocate the dialog to the root of the DOM.\n * Most useful in conjunction with `alert()` when parental elements\n * have css stacking constraints which don't allow for `position: fixed`\n /\n @Prop() hoist = false;\n\n @Watch('hoist')\n handleHoistChange() {\n if (!this.hoist \|\| document.body.children[0] === this.host) return;\n document.body.prepend(this.host);\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 requestAnimationFrame(() => {\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 requestAnimationFrame(() => (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 const onClose = () => {\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\n this.host.addEventListener('nanoAfterHide', onClose, { once: true });\n this.host.addEventListener('nano-after-hide', onClose, { once: true });\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 requestAnimationFrame(() => {\n this.show();\n });\n\n const onOpen = () =>\n requestAnimationFrame(() => this.panel.focus({ preventScroll: true }));\n\n const onClose = () => {\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\n this.host.addEventListener('nanoAfterShow', onOpen, { once: true });\n this.host.addEventListener('nano-after-show', onOpen, { once: true });\n\n this.host.addEventListener('nanoAfterHide', onClose, {\n once: true,\n });\n this.host.addEventListener('nano-after-hide', onClose, {\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 = (e: PointerEvent & { target: HTMLElement }) => {\n if (e.defaultPrevented) return;\n if (e.target.tagName && e.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.handleHoistChange();\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 if (this.panel)\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}

package/dist/cjs/nano-checkbox-group.cjs.entry.js CHANGED Viewed

@@ -112,6 +112,8 @@ const CheckboxGroup = class {
    */
   async showError(message, optVal) {
     let cb;
+    if (!this.checkboxes)
+      return;
     if (optVal)
       cb = this.checkboxes.find((c) => c.value === optVal);
     if (!cb)
@@ -190,12 +192,14 @@ const CheckboxGroup = class {
     return invalid;
   }
   handleComponentChange() {
-    if (!this.checkboxes.length)
+    var _a;
+    if (!((_a = this.checkboxes) === null || _a === void 0 ? void 0 : _a.length))
       return;
     this.checkboxTypes = theme.getClassMap(this.checkboxes.map((cb) => 'types-' + cb.type));
   }
   handleDisabledChange() {
-    if (this.disabled === null)
+    var _a;
+    if (this.disabled === null || !((_a = this.checkboxes) === null || _a === void 0 ? void 0 : _a.length))
       return;
     this.checkboxes.map((cb) => (cb.disabled = this.disabled));
   }

package/dist/cjs/nano-checkbox-group.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-checkbox-group.entry.cjs.js","mappings":"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","names":["getClassMap","debounce","h","Host"],"sources":["./src/components/checkbox/checkbox-group.scss?tag=nano-checkbox-group&encapsulation=scoped","./src/components/checkbox/checkbox-group.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n\n:host {\n /*\n @prop --control-margin-top: Margin between controls. Default depends on control type;\n * @prop --control-margin-end: Margin between controls. Default depends on control type;\n * @prop --control-margin-bottom: Margin between controls. Default depends on control type;\n * @prop --control-margin-start: Margin between controls. Default depends on control type;\n\n * @prop --invalid-msg-color: Default #{nano-color(danger, base)};\n * @prop --invalid-msg-font-size: Default #{$input-help-font-size};\n\n * @prop --help-msg-color: Font color applied to slot=\"helper\". Default #{$input-help-color};\n\n * @prop --label-color: Default #{$label-color};\n * @prop --label-color--invalid: Default #{$label-color-invalid};\n * @prop --label-font-size: Default #{$label-font-size};\n * @prop --label-padding: space between legend and control. Default #{$input-padding-bottom};\n /\n\n --control-margin-top: 0;\n --control-margin-end: 0;\n --control-margin-bottom: 0;\n --control-margin-start: 0;\n --invalid-msg-color: #{nano-color(danger, base)};\n --invalid-msg-font-size: #{$input-help-font-size};\n --help-msg-color: #{$input-help-color};\n --label-color: #{$label-color};\n --label-color--invalid: #{$label-color-invalid};\n --label-font-size: #{$label-font-size};\n --label-padding: #{$input-padding-bottom};\n\n display: block;\n\n {\n box-sizing: inherit;\n }\n}\n\n:host([types-tag]),\n:host([types-segment]) {\n --control-margin-top: 0;\n --control-margin-end: 8px;\n --control-margin-bottom: 6px;\n --control-margin-start: 0;\n}\n\n:host([types-checkbox]),\n:host([types-radio]) {\n --control-margin-top: 0;\n --control-margin-end: 10px;\n --control-margin-bottom: 6px;\n --control-margin-start: 0;\n}\n\n.nanogroupcb {\n border: none;\n margin: 0;\n padding: 0;\n\n &__error,\n &__help,\n &__more {\n display: block;\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n &__legend {\n font-size: var(--label-font-size);\n padding: 0 0 var(--label-padding);\n margin: 0;\n line-height: 1.5;\n white-space: normal;\n display: block;\n width: 100%;\n\n :host([invalid]:not([invalid='false'])) & {\n color: var(--label-color--invalid);\n }\n }\n\n &__more {\n height: 1em;\n margin-block-start:\n calc(\n var(--label-padding) - var(--control-margin-bottom)\n );\n margin-inline-end: 0;\n margin-block-end: var(--label-padding);\n margin-inline-start: 3px;\n position: relative;\n }\n\n &__error,\n &__help {\n inset-block-start: 0;\n inset-inline-start: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n\n .show-error & {\n opacity: 1;\n }\n }\n\n &__error {\n color: var(--invalid-msg-color);\n font-stretch: condensed;\n opacity: 0;\n\n .show-error & {\n opacity: 1;\n }\n }\n\n &__help {\n font-style: italic;\n opacity: 1;\n color: var(--help-msg-color);\n\n .show-error & {\n opacity: 0;\n }\n }\n\n &__cbs {\n margin: 0;\n padding: 0;\n line-height: 1;\n display: flex;\n flex-wrap: wrap;\n\n ::slotted(:not([type='tag']):not([type='segment']):not([type='segment-pill'])) {\n --check-base-size: 1.2em;\n\n font-size: 0.85em;\n }\n\n ::slotted() {\n margin-inline: var(--control-margin-start) var(--control-margin-end);\n margin-block: var(--control-margin-top) var(--control-margin-bottom);\n }\n }\n}\n\n/* autoprefixer: ignore next /\n@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {\n .nanogroupcb__cbs {\n &::slotted(),\n ::slotted() {\n margin-inline-start: var(--control-margin-start);\n margin-inline-end: var(--control-margin-end);\n }\n }\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n ComponentInterface,\n State,\n Listen,\n Watch,\n Host,\n Method,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { getClassMap } from '../../utils/theme';\nimport { debounce } from '../../utils/throttle';\nimport type {\n CssClassMap,\n ControlValidityEventDetail,\n ControlValidity,\n} from '../../interface';\n\n/\n `nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.\n * It provides a convenient place to anchor a collective label and any validation issues.\n \n @slot - Used for grouping checkboxes inside the group wrapper\n * @slot helper - helper text to accompany the form field underneath.\n /\n@Component({\n tag: 'nano-checkbox-group',\n styleUrl: 'checkbox-group.scss',\n scoped: true,\n})\nexport class CheckboxGroup implements ComponentInterface {\n private mo?: MutationObserver;\n private checkboxTypes: CssClassMap;\n private grpId = `nano-checkbox-group-${grpIds++}`;\n private ignoreValueSet = false;\n\n @Element() host: HTMLNanoCheckboxGroupElement;\n\n // internal state\n\n @State() checkboxes: HTMLNanoCheckboxElement[];\n @State() nativeCbs: HTMLInputElement[];\n @State() errorMessage: string = '';\n @State() showErrorMsg = false;\n @State() hasHelperSlot = false;\n\n // public properties\n\n /\n When should the field perform validation\n /\n @Prop({ mutable: true }) validateOn?: 'dirty' \| 'submit' \| 'submitThenDirty' =\n 'submitThenDirty';\n\n /\n Whether to show validation errors underneath input\n /\n @Prop() showInlineError = true;\n\n /\n The minimum number of checkboxes required to be valid. Only relevant for checkbox type controls.\n * A validation error will be thrown if not enough controls are checked.\n /\n @Prop() min: number = 0;\n\n /\n The maximum number of checkboxes allowed. Only relevant for checkbox type controls.\n * Other controls will automatically be disabled upon reaching this number.\n /\n @Prop() max: number = null;\n\n /\n Disable all the nested form controls\n /\n @Prop({ reflect: true }) disabled: boolean \| null = null;\n\n /\n A common label for children controls\n /\n @Prop() legend: string = '';\n\n /\n This will be true when the control is in an invalid state.\n * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n /\n @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n @State() _invalid = false;\n\n /\n Current validation message - if any. @readonly\n /\n @Prop()\n get validityMessage() {\n return this.errorMessage;\n }\n\n /* The current, collective checkbox value /\n @Prop({ mutable: true }) value: string[] \| string;\n\n @Watch('value')\n handleValuePropChange() {\n this.nanoChange.emit(this.value);\n\n // this change is coming from a checkbox being checked\n // so don't then change the checkbox state\n // (would cause an infinite loop)\n if (this.ignoreValueSet) return;\n\n // value has changed via prop directly, so update the checkbox's state\n this.setCbValue();\n }\n\n // Public methods\n\n /\n Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `{ isValid: boolean, errorMessage: string }`\n /\n @Method()\n async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n return new Promise((resolve) => {\n if (validateFirst) {\n this.customValidate();\n this.showInlineValidation();\n }\n setTimeout(() => {\n resolve({\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n });\n }, 50);\n });\n }\n\n /\n Invalidate the field and show a custom error message.\n * To clear the error you will need to re-call this method with an empty string.\n * @param message - the error message to show\n * @param optVal - optionally supply an option value to target which checkbox to show invalidate against (default is the first)\n /\n @Method()\n async showError(message: string, optVal?: string) {\n let cb: HTMLNanoCheckboxElement;\n if (optVal) cb = this.checkboxes.find((c) => c.value === optVal);\n if (!cb) cb = this.checkboxes[0];\n if (!cb) return;\n\n this.errorMessage = message;\n await cb.setError(message);\n if (!!this.showInlineError) this.showInlineValidation();\n }\n\n // Events\n\n /\n Called when a nested checkbox changes\n /\n @Event() nanoChange: EventEmitter<string \| string[]>;\n\n /\n Called when validation is performed (which depends on `validateOn`).\n * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n /\n @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n // listeners & watchers\n\n @Listen('nanoChange')\n handleValueChange(ev: CustomEvent) {\n if (ev.target === this.host) return;\n this.setInteralValue();\n }\n\n /\n Notes on validation... custom validation messages should be set\n * no matter whether we show inline messages or native html5.\n * this will mean forms cannot submit when there are pending validation issues.\n */\n @Listen('nanoChange')\n @Watch('min')\n @Watch('max')\n handleCbChange() {\n if (this.invalid) this.showErrorMsg = this._invalid = false;\n this.customValidate();\n\n if (this.validateOn !== 'dirty') return;\n this.showInlineValidation();\n }\n\n @Watch('nativeCbs')\n customValidate() {\n if (!this.nativeCbs \|\| !this.nativeCbs.length \|\| !this.checkboxes) return;\n\n const onlyRadios = this.nativeCbs.filter((cb) => cb?.type === 'radio');\n\n if (\n onlyRadios &&\n onlyRadios.length &&\n (this.showErrorMsg \|\| this.validateOn === 'dirty')\n ) {\n const required = onlyRadios.find((cb) => cb.required);\n const checked = onlyRadios.filter((cb) => cb.checked);\n\n if (required && checked) {\n this.checkboxes.forEach((rd) => rd.reportValidity(false));\n return false;\n } else if (required && !checked) return true;\n }\n\n // we only care about checkbox controls.\n const onlyCbs = this.nativeCbs.filter((cb) => cb?.type === 'checkbox');\n if (!onlyCbs \|\| !onlyCbs.length) return;\n\n const checked = onlyCbs.filter((cb) => cb.checked);\n const required = onlyCbs.find((cb) => cb.required);\n let invalid = false;\n\n if (required && !checked.find((cb) => cb === required)) return true;\n\n this.checkboxes.forEach((cb, i) => {\n const nativeCb = this.nativeCbs[i];\n cb.setError('');\n nativeCb.setCustomValidity('');\n\n if (this.min && checked.length < this.min) {\n this.errorMessage = `You must select a minimum of ${this.min} values.`;\n invalid = true;\n }\n if (this.max && checked.length > this.max) {\n this.errorMessage = `Only up to ${this.max} values are allowed.`;\n invalid = true;\n }\n\n if (invalid) {\n cb.setError(this.errorMessage, this.showErrorMsg);\n // bit fugly. We're just doing this 'cos stencil\n // methods are async and we want the validity message\n // asap to keep things in sync\n nativeCb.setCustomValidity(this.errorMessage);\n }\n });\n return invalid;\n }\n\n @Watch('checkboxes')\n handleComponentChange() {\n if (!this.checkboxes.length) return;\n\n this.checkboxTypes = getClassMap(\n this.checkboxes.map((cb) => 'types-' + cb.type)\n );\n }\n\n @Watch('disabled')\n @Watch('checkboxes')\n handleDisabledChange() {\n if (this.disabled === null) return;\n this.checkboxes.map((cb) => (cb.disabled = this.disabled));\n }\n\n // private methods\n\n private setInteralValue() {\n this.ignoreValueSet = true;\n const radios = this.nativeCbs.filter((cb) => cb?.type === 'radio');\n if (radios?.length) {\n this.value = radios.find((cb) => cb.checked)?.value \|\| null;\n return;\n }\n this.value = this.checkboxes.flatMap((cb) =>\n cb.checked ? [cb.value] : []\n );\n requestAnimationFrame(() => (this.ignoreValueSet = false));\n }\n\n private setCbValue() {\n this.checkboxes.forEach((cb) => {\n if (\n cb.value === this.value \|\|\n (Array.isArray(this.value) && this.value.includes(cb.value))\n ) {\n cb.checked = true;\n }\n });\n }\n\n private attachSlotObserver() {\n if (!!this.mo \|\| !window['MutationObserver']) return;\n const mo = (this.mo = new MutationObserver(() => this.handleSlotChange()));\n mo.observe(this.host, { childList: true });\n }\n\n private async handleSlotChange() {\n this.checkboxes = Array.from(this.host.querySelectorAll('nano-checkbox'));\n this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n this.nativeCbs = await Promise.all(\n this.checkboxes.reduce((acc: Array<Promise<HTMLInputElement>>, cb) => {\n acc.push(cb.getInputElement());\n return acc;\n }, [])\n );\n\n this.nativeCbs.forEach((cb) => {\n if (cb) cb.addEventListener('invalid', this.handleInvalid);\n });\n }\n\n private handleInvalid = (ev: Event) => {\n this._invalid = true;\n\n if (this.validateOn === 'submit') {\n this._invalid = this.showErrorMsg = this.customValidate();\n }\n if (!!this.showInlineError) ev.preventDefault();\n\n this.showInlineValidation(ev);\n };\n\n private showInlineValidation = (ev?: Event) => {\n if (!this.nativeCbs \|\| !this.nativeCbs.length) return;\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n this.showErrorMsg = false;\n this._invalid = false;\n\n this.nativeCbs.forEach((cb, _i) => {\n if (!cb.validity.valid) {\n this.errorMessage = cb.validationMessage;\n this.showErrorMsg = true;\n this._invalid = true;\n }\n });\n\n this.nanoValidate.emit({\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n originalEvent: ev,\n });\n };\n\n // stencil hooks\n\n componentWillLoad() {\n this.showInlineValidation = debounce(this.showInlineValidation, 50);\n this.customValidate = this.customValidate.bind(this);\n this.handleDisabledChange();\n this.handleSlotChange();\n }\n\n connectedCallback() {\n this.attachSlotObserver();\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.handleComponentChange();\n }\n\n render() {\n const legendId = this.grpId + '-lbl';\n const moreId =\n this.showInlineError \|\| this.hasHelperSlot ? this.grpId + '-more' : '';\n\n return (\n <Host {...this.checkboxTypes}>\n <fieldset\n disabled={this.disabled}\n class={{ nanogroupcb: true, 'show-error': this.showErrorMsg }}\n >\n <legend class=\"nanogroupcb__legend\" id={legendId}>\n {this.legend}\n </legend>\n <div\n class=\"nanogroupcb__cbs\"\n role=\"group\"\n aria-labelledby={legendId + ' ' + moreId}\n >\n <slot />\n </div>\n {(this.showInlineError \|\| this.hasHelperSlot) && (\n <div class=\"nanogroupcb__more\" id={moreId}>\n {!!this.showInlineError ? (\n <div class=\"nanogroupcb__error\">{this.errorMessage}</div>\n ) : (\n ''\n )}\n <div class=\"nanogroupcb__help\">\n <slot name=\"helper\" />\n </div>\n </div>\n )}\n </fieldset>\n </Host>\n );\n }\n}\n\nlet grpIds = 0;\n"],"version":3}
1	+ {"file":"nano-checkbox-group.entry.cjs.js","mappings":";;;;;;;;;;;AAAA,MAAM,gBAAgB,GAAG,s1HAAs1H;;MCkCl2H,aAAa;;;;;IAGhB,UAAK,GAAG,uBAAuB,MAAM,EAAE,EAAE,CAAC;IAC1C,mBAAc,GAAG,KAAK,CAAC;IAuRvB,kBAAa,GAAG,CAAC,EAAS;MAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;MAErB,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE;QAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;OAC3D;MACD,IAAI,CAAC,CAAC,IAAI,CAAC,eAAe;QAAE,EAAE,CAAC,cAAc,EAAE,CAAC;MAEhD,IAAI,CAAC,oBAAoB,CAAC,EAAE,CAAC,CAAC;KAC/B,CAAC;IAEM,yBAAoB,GAAG,CAAC,EAAU;MACxC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM;QAAE,OAAO;MACtD,IAAI,IAAI,CAAC,UAAU,KAAK,iBAAiB;QAAE,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;MACrE,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;MAC1B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;MAEtB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;QAC5B,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE;UACtB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,iBAAiB,CAAC;UACzC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;UACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;OACF,CAAC,CAAC;MAEH,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;QACrB,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;QACtB,YAAY,EAAE,IAAI,CAAC,YAAY;QAC/B,aAAa,EAAE,EAAE;OAClB,CAAC,CAAC;KACJ,CAAC;;;wBA7S8B,EAAE;wBACV,KAAK;yBACJ,KAAK;sBAQ5B,iBAAiB;2BAKO,IAAI;eAMR,CAAC;eAMD,IAAI;oBAK0B,IAAI;kBAK/B,EAAE;oBAUP,KAAK;;;;;;;EAJzB,IACI,OAAO;IACT,OAAO,IAAI,CAAC,QAAQ,CAAC;GACtB;;;;EAMD,IACI,eAAe;IACjB,OAAO,IAAI,CAAC,YAAY,CAAC;GAC1B;EAMD,qBAAqB;IACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;;;IAKjC,IAAI,IAAI,CAAC,cAAc;MAAE,OAAO;;IAGhC,IAAI,CAAC,UAAU,EAAE,CAAC;GACnB;;;;;;;EAUD,MAAM,cAAc,CAAC,aAAsB;IACzC,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO;MACzB,IAAI,aAAa,EAAE;QACjB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,oBAAoB,EAAE,CAAC;OAC7B;MACD,UAAU,CAAC;QACT,OAAO,CAAC;UACN,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;UACtB,YAAY,EAAE,IAAI,CAAC,YAAY;SAChC,CAAC,CAAC;OACJ,EAAE,EAAE,CAAC,CAAC;KACR,CAAC,CAAC;GACJ;;;;;;;EASD,MAAM,SAAS,CAAC,OAAe,EAAE,MAAe;IAC9C,IAAI,EAA2B,CAAC;IAChC,IAAI,CAAC,IAAI,CAAC,UAAU;MAAE,OAAO;IAC7B,IAAI,MAAM;MAAE,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC;IACjE,IAAI,CAAC,EAAE;MAAE,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE;MAAE,OAAO;IAEhB,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC;IAC5B,MAAM,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC3B,IAAI,CAAC,CAAC,IAAI,CAAC,eAAe;MAAE,IAAI,CAAC,oBAAoB,EAAE,CAAC;GACzD;;EAkBD,iBAAiB,CAAC,EAAe;IAC/B,IAAI,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,IAAI;MAAE,OAAO;IACpC,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;;;;;;EAUD,cAAc;IACZ,IAAI,IAAI,CAAC,OAAO;MAAE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IAC5D,IAAI,CAAC,cAAc,EAAE,CAAC;IAEtB,IAAI,IAAI,CAAC,UAAU,KAAK,OAAO;MAAE,OAAO;IACxC,IAAI,CAAC,oBAAoB,EAAE,CAAC;GAC7B;EAGD,cAAc;IACZ,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU;MAAE,OAAO;IAE1E,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,IAAI,MAAK,OAAO,CAAC,CAAC;IAEvE,IACE,UAAU;MACV,UAAU,CAAC,MAAM;OAChB,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,UAAU,KAAK,OAAO,CAAC,EAClD;MACA,MAAM,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,QAAQ,CAAC,CAAC;MACtD,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,OAAO,CAAC,CAAC;MAEtD,IAAI,QAAQ,IAAI,OAAO,EAAE;QACvB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;QAC1D,OAAO,KAAK,CAAC;OACd;WAAM,IAAI,QAAQ,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;KAC9C;;IAGD,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,IAAI,MAAK,UAAU,CAAC,CAAC;IACvE,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM;MAAE,OAAO;IAExC,MAAM,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,OAAO,CAAC,CAAC;IACnD,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,QAAQ,CAAC,CAAC;IACnD,IAAI,OAAO,GAAG,KAAK,CAAC;IAEpB,IAAI,QAAQ,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,QAAQ,CAAC;MAAE,OAAO,IAAI,CAAC;IAEpE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC;MAC5B,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;MACnC,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;MAChB,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;MAE/B,IAAI,IAAI,CAAC,GAAG,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,EAAE;QACzC,IAAI,CAAC,YAAY,GAAG,gCAAgC,IAAI,CAAC,GAAG,UAAU,CAAC;QACvE,OAAO,GAAG,IAAI,CAAC;OAChB;MACD,IAAI,IAAI,CAAC,GAAG,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,EAAE;QACzC,IAAI,CAAC,YAAY,GAAG,cAAc,IAAI,CAAC,GAAG,sBAAsB,CAAC;QACjE,OAAO,GAAG,IAAI,CAAC;OAChB;MAED,IAAI,OAAO,EAAE;QACX,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;;;;QAIlD,QAAQ,CAAC,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;OAC/C;KACF,CAAC,CAAC;IACH,OAAO,OAAO,CAAC;GAChB;EAGD,qBAAqB;;IACnB,IAAI,EAAC,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,CAAA;MAAE,OAAO;IAErC,IAAI,CAAC,aAAa,GAAGA,iBAAW,CAC9B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,QAAQ,GAAG,EAAE,CAAC,IAAI,CAAC,CAChD,CAAC;GACH;EAID,oBAAoB;;IAClB,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,EAAC,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,CAAA;MAAE,OAAO;IAC/D,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;GAC5D;;EAIO,eAAe;;IACrB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,IAAI,MAAK,OAAO,CAAC,CAAC;IACnE,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,EAAE;MAClB,IAAI,CAAC,KAAK,GAAG,CAAA,MAAA,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,OAAO,CAAC,0CAAE,KAAK,KAAI,IAAI,CAAC;MAC5D,OAAO;KACR;IACD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,EAAE,KACtC,EAAE,CAAC,OAAO,GAAG,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,CAC7B,CAAC;IACF,qBAAqB,CAAC,OAAO,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,CAAC,CAAC;GAC5D;EAEO,UAAU;IAChB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,EAAE;MACzB,IACE,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;SACtB,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAC5D;QACA,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC;OACnB;KACF,CAAC,CAAC;GACJ;EAEO,kBAAkB;IACxB,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC;MAAE,OAAO;IACrD,MAAM,EAAE,IAAI,IAAI,CAAC,EAAE,GAAG,IAAI,gBAAgB,CAAC,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC;IAC3E,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;GAC5C;EAEO,MAAM,gBAAgB;IAC5B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;IAC1E,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAElE,IAAI,CAAC,SAAS,GAAG,MAAM,OAAO,CAAC,GAAG,CAChC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,GAAqC,EAAE,EAAE;MAC/D,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,eAAe,EAAE,CAAC,CAAC;MAC/B,OAAO,GAAG,CAAC;KACZ,EAAE,EAAE,CAAC,CACP,CAAC;IAEF,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE;MACxB,IAAI,EAAE;QAAE,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KAC5D,CAAC,CAAC;GACJ;;EAoCD,iBAAiB;IACf,IAAI,CAAC,oBAAoB,GAAGC,iBAAQ,CAAC,IAAI,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;IACpE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrD,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC5B,IAAI,CAAC,gBAAgB,EAAE,CAAC;GACzB;EAED,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,EAAE;MAAE,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;GACnC;EAED,gBAAgB;IACd,IAAI,CAAC,qBAAqB,EAAE,CAAC;GAC9B;EAED,MAAM;IACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;IACrC,MAAM,MAAM,GACV,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,CAAC;IAEzE,QACEC,QAACC,UAAI,oBAAK,IAAI,CAAC,aAAa,GAC1BD,sBACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,IAE7DA,oBAAQ,KAAK,EAAC,qBAAqB,EAAC,EAAE,EAAE,QAAQ,IAC7C,IAAI,CAAC,MAAM,CACL,EACTA,iBACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,OAAO,qBACK,QAAQ,GAAG,GAAG,GAAG,MAAM,IAExCA,qBAAQ,CACJ,EACL,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,aAAa,MAC1CA,iBAAK,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,MAAM,IACtC,CAAC,CAAC,IAAI,CAAC,eAAe,IACrBA,iBAAK,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,YAAY,CAAO,KAEzD,EAAE,CACH,EACDA,iBAAK,KAAK,EAAC,mBAAmB,IAC5BA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACF,CACP,CACQ,CACN,EACP;GACH;;;;;;;;;;;AAGH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;","names":["getClassMap","debounce","h","Host"],"sources":["./src/components/checkbox/checkbox-group.scss?tag=nano-checkbox-group&encapsulation=scoped","./src/components/checkbox/checkbox-group.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n\n:host {\n /*\n @prop --control-margin-top: Margin between controls. Default depends on control type;\n * @prop --control-margin-end: Margin between controls. Default depends on control type;\n * @prop --control-margin-bottom: Margin between controls. Default depends on control type;\n * @prop --control-margin-start: Margin between controls. Default depends on control type;\n\n * @prop --invalid-msg-color: Default #{nano-color(danger, base)};\n * @prop --invalid-msg-font-size: Default #{$input-help-font-size};\n\n * @prop --help-msg-color: Font color applied to slot=\"helper\". Default #{$input-help-color};\n\n * @prop --label-color: Default #{$label-color};\n * @prop --label-color--invalid: Default #{$label-color-invalid};\n * @prop --label-font-size: Default #{$label-font-size};\n * @prop --label-padding: space between legend and control. Default #{$input-padding-bottom};\n /\n\n --control-margin-top: 0;\n --control-margin-end: 0;\n --control-margin-bottom: 0;\n --control-margin-start: 0;\n --invalid-msg-color: #{nano-color(danger, base)};\n --invalid-msg-font-size: #{$input-help-font-size};\n --help-msg-color: #{$input-help-color};\n --label-color: #{$label-color};\n --label-color--invalid: #{$label-color-invalid};\n --label-font-size: #{$label-font-size};\n --label-padding: #{$input-padding-bottom};\n\n display: block;\n\n {\n box-sizing: inherit;\n }\n}\n\n:host([types-tag]),\n:host([types-segment]) {\n --control-margin-top: 0;\n --control-margin-end: 8px;\n --control-margin-bottom: 6px;\n --control-margin-start: 0;\n}\n\n:host([types-checkbox]),\n:host([types-radio]) {\n --control-margin-top: 0;\n --control-margin-end: 10px;\n --control-margin-bottom: 6px;\n --control-margin-start: 0;\n}\n\n.nanogroupcb {\n border: none;\n margin: 0;\n padding: 0;\n\n &__error,\n &__help,\n &__more {\n display: block;\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n &__legend {\n font-size: var(--label-font-size);\n padding: 0 0 var(--label-padding);\n margin: 0;\n line-height: 1.5;\n white-space: normal;\n display: block;\n width: 100%;\n\n :host([invalid]:not([invalid='false'])) & {\n color: var(--label-color--invalid);\n }\n }\n\n &__more {\n height: 1em;\n margin-block-start:\n calc(\n var(--label-padding) - var(--control-margin-bottom)\n );\n margin-inline-end: 0;\n margin-block-end: var(--label-padding);\n margin-inline-start: 3px;\n position: relative;\n }\n\n &__error,\n &__help {\n inset-block-start: 0;\n inset-inline-start: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n\n .show-error & {\n opacity: 1;\n }\n }\n\n &__error {\n color: var(--invalid-msg-color);\n font-stretch: condensed;\n opacity: 0;\n\n .show-error & {\n opacity: 1;\n }\n }\n\n &__help {\n font-style: italic;\n opacity: 1;\n color: var(--help-msg-color);\n\n .show-error & {\n opacity: 0;\n }\n }\n\n &__cbs {\n margin: 0;\n padding: 0;\n line-height: 1;\n display: flex;\n flex-wrap: wrap;\n\n ::slotted(:not([type='tag']):not([type='segment']):not([type='segment-pill'])) {\n --check-base-size: 1.2em;\n\n font-size: 0.85em;\n }\n\n ::slotted() {\n margin-inline: var(--control-margin-start) var(--control-margin-end);\n margin-block: var(--control-margin-top) var(--control-margin-bottom);\n }\n }\n}\n\n/* autoprefixer: ignore next /\n@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {\n .nanogroupcb__cbs {\n &::slotted(),\n ::slotted() {\n margin-inline-start: var(--control-margin-start);\n margin-inline-end: var(--control-margin-end);\n }\n }\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n ComponentInterface,\n State,\n Listen,\n Watch,\n Host,\n Method,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { getClassMap } from '../../utils/theme';\nimport { debounce } from '../../utils/throttle';\nimport type {\n CssClassMap,\n ControlValidityEventDetail,\n ControlValidity,\n} from '../../interface';\n\n/\n `nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.\n * It provides a convenient place to anchor a collective label and any validation issues.\n \n @slot - Used for grouping checkboxes inside the group wrapper\n * @slot helper - helper text to accompany the form field underneath.\n /\n@Component({\n tag: 'nano-checkbox-group',\n styleUrl: 'checkbox-group.scss',\n scoped: true,\n})\nexport class CheckboxGroup implements ComponentInterface {\n private mo?: MutationObserver;\n private checkboxTypes: CssClassMap;\n private grpId = `nano-checkbox-group-${grpIds++}`;\n private ignoreValueSet = false;\n\n @Element() host: HTMLNanoCheckboxGroupElement;\n\n // internal state\n\n @State() checkboxes?: HTMLNanoCheckboxElement[];\n @State() nativeCbs: HTMLInputElement[];\n @State() errorMessage: string = '';\n @State() showErrorMsg = false;\n @State() hasHelperSlot = false;\n\n // public properties\n\n /\n When should the field perform validation\n /\n @Prop({ mutable: true }) validateOn?: 'dirty' \| 'submit' \| 'submitThenDirty' =\n 'submitThenDirty';\n\n /\n Whether to show validation errors underneath input\n /\n @Prop() showInlineError = true;\n\n /\n The minimum number of checkboxes required to be valid. Only relevant for checkbox type controls.\n * A validation error will be thrown if not enough controls are checked.\n /\n @Prop() min: number = 0;\n\n /\n The maximum number of checkboxes allowed. Only relevant for checkbox type controls.\n * Other controls will automatically be disabled upon reaching this number.\n /\n @Prop() max: number = null;\n\n /\n Disable all the nested form controls\n /\n @Prop({ reflect: true }) disabled: boolean \| null = null;\n\n /\n A common label for children controls\n /\n @Prop() legend: string = '';\n\n /\n This will be true when the control is in an invalid state.\n * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n /\n @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n @State() _invalid = false;\n\n /\n Current validation message - if any. @readonly\n /\n @Prop()\n get validityMessage() {\n return this.errorMessage;\n }\n\n /* The current, collective checkbox value /\n @Prop({ mutable: true }) value: string[] \| string;\n\n @Watch('value')\n handleValuePropChange() {\n this.nanoChange.emit(this.value);\n\n // this change is coming from a checkbox being checked\n // so don't then change the checkbox state\n // (would cause an infinite loop)\n if (this.ignoreValueSet) return;\n\n // value has changed via prop directly, so update the checkbox's state\n this.setCbValue();\n }\n\n // Public methods\n\n /\n Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `{ isValid: boolean, errorMessage: string }`\n /\n @Method()\n async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n return new Promise((resolve) => {\n if (validateFirst) {\n this.customValidate();\n this.showInlineValidation();\n }\n setTimeout(() => {\n resolve({\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n });\n }, 50);\n });\n }\n\n /\n Invalidate the field and show a custom error message.\n * To clear the error you will need to re-call this method with an empty string.\n * @param message - the error message to show\n * @param optVal - optionally supply an option value to target which checkbox to show invalidate against (default is the first)\n /\n @Method()\n async showError(message: string, optVal?: string) {\n let cb: HTMLNanoCheckboxElement;\n if (!this.checkboxes) return;\n if (optVal) cb = this.checkboxes.find((c) => c.value === optVal);\n if (!cb) cb = this.checkboxes[0];\n if (!cb) return;\n\n this.errorMessage = message;\n await cb.setError(message);\n if (!!this.showInlineError) this.showInlineValidation();\n }\n\n // Events\n\n /\n Called when a nested checkbox changes\n /\n @Event() nanoChange: EventEmitter<string \| string[]>;\n\n /\n Called when validation is performed (which depends on `validateOn`).\n * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n /\n @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n // listeners & watchers\n\n @Listen('nanoChange')\n handleValueChange(ev: CustomEvent) {\n if (ev.target === this.host) return;\n this.setInteralValue();\n }\n\n /\n Notes on validation... custom validation messages should be set\n * no matter whether we show inline messages or native html5.\n * this will mean forms cannot submit when there are pending validation issues.\n */\n @Listen('nanoChange')\n @Watch('min')\n @Watch('max')\n handleCbChange() {\n if (this.invalid) this.showErrorMsg = this._invalid = false;\n this.customValidate();\n\n if (this.validateOn !== 'dirty') return;\n this.showInlineValidation();\n }\n\n @Watch('nativeCbs')\n customValidate() {\n if (!this.nativeCbs \|\| !this.nativeCbs.length \|\| !this.checkboxes) return;\n\n const onlyRadios = this.nativeCbs.filter((cb) => cb?.type === 'radio');\n\n if (\n onlyRadios &&\n onlyRadios.length &&\n (this.showErrorMsg \|\| this.validateOn === 'dirty')\n ) {\n const required = onlyRadios.find((cb) => cb.required);\n const checked = onlyRadios.filter((cb) => cb.checked);\n\n if (required && checked) {\n this.checkboxes.forEach((rd) => rd.reportValidity(false));\n return false;\n } else if (required && !checked) return true;\n }\n\n // we only care about checkbox controls.\n const onlyCbs = this.nativeCbs.filter((cb) => cb?.type === 'checkbox');\n if (!onlyCbs \|\| !onlyCbs.length) return;\n\n const checked = onlyCbs.filter((cb) => cb.checked);\n const required = onlyCbs.find((cb) => cb.required);\n let invalid = false;\n\n if (required && !checked.find((cb) => cb === required)) return true;\n\n this.checkboxes.forEach((cb, i) => {\n const nativeCb = this.nativeCbs[i];\n cb.setError('');\n nativeCb.setCustomValidity('');\n\n if (this.min && checked.length < this.min) {\n this.errorMessage = `You must select a minimum of ${this.min} values.`;\n invalid = true;\n }\n if (this.max && checked.length > this.max) {\n this.errorMessage = `Only up to ${this.max} values are allowed.`;\n invalid = true;\n }\n\n if (invalid) {\n cb.setError(this.errorMessage, this.showErrorMsg);\n // bit fugly. We're just doing this 'cos stencil\n // methods are async and we want the validity message\n // asap to keep things in sync\n nativeCb.setCustomValidity(this.errorMessage);\n }\n });\n return invalid;\n }\n\n @Watch('checkboxes')\n handleComponentChange() {\n if (!this.checkboxes?.length) return;\n\n this.checkboxTypes = getClassMap(\n this.checkboxes.map((cb) => 'types-' + cb.type)\n );\n }\n\n @Watch('disabled')\n @Watch('checkboxes')\n handleDisabledChange() {\n if (this.disabled === null \|\| !this.checkboxes?.length) return;\n this.checkboxes.map((cb) => (cb.disabled = this.disabled));\n }\n\n // private methods\n\n private setInteralValue() {\n this.ignoreValueSet = true;\n const radios = this.nativeCbs.filter((cb) => cb?.type === 'radio');\n if (radios?.length) {\n this.value = radios.find((cb) => cb.checked)?.value \|\| null;\n return;\n }\n this.value = this.checkboxes.flatMap((cb) =>\n cb.checked ? [cb.value] : []\n );\n requestAnimationFrame(() => (this.ignoreValueSet = false));\n }\n\n private setCbValue() {\n this.checkboxes.forEach((cb) => {\n if (\n cb.value === this.value \|\|\n (Array.isArray(this.value) && this.value.includes(cb.value))\n ) {\n cb.checked = true;\n }\n });\n }\n\n private attachSlotObserver() {\n if (!!this.mo \|\| !window['MutationObserver']) return;\n const mo = (this.mo = new MutationObserver(() => this.handleSlotChange()));\n mo.observe(this.host, { childList: true });\n }\n\n private async handleSlotChange() {\n this.checkboxes = Array.from(this.host.querySelectorAll('nano-checkbox'));\n this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n this.nativeCbs = await Promise.all(\n this.checkboxes.reduce((acc: Array<Promise<HTMLInputElement>>, cb) => {\n acc.push(cb.getInputElement());\n return acc;\n }, [])\n );\n\n this.nativeCbs.forEach((cb) => {\n if (cb) cb.addEventListener('invalid', this.handleInvalid);\n });\n }\n\n private handleInvalid = (ev: Event) => {\n this._invalid = true;\n\n if (this.validateOn === 'submit') {\n this._invalid = this.showErrorMsg = this.customValidate();\n }\n if (!!this.showInlineError) ev.preventDefault();\n\n this.showInlineValidation(ev);\n };\n\n private showInlineValidation = (ev?: Event) => {\n if (!this.nativeCbs \|\| !this.nativeCbs.length) return;\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n this.showErrorMsg = false;\n this._invalid = false;\n\n this.nativeCbs.forEach((cb, _i) => {\n if (!cb.validity.valid) {\n this.errorMessage = cb.validationMessage;\n this.showErrorMsg = true;\n this._invalid = true;\n }\n });\n\n this.nanoValidate.emit({\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n originalEvent: ev,\n });\n };\n\n // stencil hooks\n\n componentWillLoad() {\n this.showInlineValidation = debounce(this.showInlineValidation, 50);\n this.customValidate = this.customValidate.bind(this);\n this.handleDisabledChange();\n this.handleSlotChange();\n }\n\n connectedCallback() {\n this.attachSlotObserver();\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.handleComponentChange();\n }\n\n render() {\n const legendId = this.grpId + '-lbl';\n const moreId =\n this.showInlineError \|\| this.hasHelperSlot ? this.grpId + '-more' : '';\n\n return (\n <Host {...this.checkboxTypes}>\n <fieldset\n disabled={this.disabled}\n class={{ nanogroupcb: true, 'show-error': this.showErrorMsg }}\n >\n <legend class=\"nanogroupcb__legend\" id={legendId}>\n {this.legend}\n </legend>\n <div\n class=\"nanogroupcb__cbs\"\n role=\"group\"\n aria-labelledby={legendId + ' ' + moreId}\n >\n <slot />\n </div>\n {(this.showInlineError \|\| this.hasHelperSlot) && (\n <div class=\"nanogroupcb__more\" id={moreId}>\n {!!this.showInlineError ? (\n <div class=\"nanogroupcb__error\">{this.errorMessage}</div>\n ) : (\n ''\n )}\n <div class=\"nanogroupcb__help\">\n <slot name=\"helper\" />\n </div>\n </div>\n )}\n </fieldset>\n </Host>\n );\n }\n}\n\nlet grpIds = 0;\n"],"version":3}

package/dist/cjs/nano-global-nav.cjs.entry.js CHANGED Viewed

@@ -918,7 +918,7 @@ const GlobalNav = class {
         'search-auto-complete-shown': this.showAutocomplete && this.scrollingUp,
         'modal-open': this.modalIsOpen,
         resizing: this.isResizing,
-      }, dir: isRtl ? 'rtl' : null, role: "navigation" }, index.h("div", { class: {
+      }, dir: isRtl ? 'rtl' : null }, index.h("div", { class: {
         'global-nav': true,
         'scrolling-down': !this.scrollingUp,
       } }, index.h("nav", { id: "global-nav-menu", class: {