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

@nanoporetech-digital/components 4.5.2 → 4.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (95) hide show

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

@@ -73,6 +73,11 @@ export class Tooltip {
       .map((node) => node.textContent)
       .join(' ')
       .trim();
+    if (!this.target) {
+      this.target = this.getTarget();
+      if (!this.target)
+        return;
+    }
     this.label = textContent || this.content;
     this.target.setAttribute('aria-label', this.label);
   }
@@ -151,7 +156,8 @@ export class Tooltip {
     this.syncOptions();
   }
   disconnectedCallback() {
-    this.popover.destroy();
+    if (this.popover)
+      this.popover.destroy();
   }
   render() {
     return (h(Host, { onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick }, h("slot", { onSlotchange: this.handleSlotChange }), h("div", { ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner" }, h("div", { part: "base", ref: (el) => (this.tooltip = el), class: {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n Watch,\n h,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\n\n/*\n Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n /\n@Component({\n tag: 'nano-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true,\n})\nexport class Tooltip {\n private isVisible = false;\n private popover: Popover;\n private tooltipPositioner: HTMLElement;\n private tooltip: any;\n\n private _target: HTMLElement;\n private get target() {\n return this._target;\n }\n private set target(newTarget) {\n if (newTarget !== this._target && this._target) {\n this._target.removeAttribute('aria-label');\n }\n newTarget.setAttribute('aria-label', this.label);\n this._target = newTarget;\n }\n\n private label = '';\n\n @Element() host: HTMLNanoTooltipElement;\n\n /* The tooltip's content. Alternatively, you can use the content slot. /\n @Prop() content = '';\n\n @Watch('content')\n setLabel() {\n const contentSlotNodes = Array.from(\n this.host.querySelectorAll('[slot=\"content\"]')\n );\n const textContent = contentSlotNodes\n .map((node) => node.textContent)\n .join(' ')\n .trim();\n\n this.label = textContent \|\| this.content;\n this.target.setAttribute('aria-label', this.label);\n }\n\n /\n The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n * inside of the viewport.\n /\n @Prop() placement:\n \| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end' = 'top';\n\n /* Set to true to disable the tooltip so it won't show when triggered. /\n @Prop() disabled = false;\n\n /* The distance in pixels from which to offset the tooltip away from its target. /\n @Prop() distance = 10;\n\n /* Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* The distance in pixels from which to offset the tooltip along its target. /\n @Prop() skidding = 0;\n\n /\n Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n * `overflow: auto\|scroll`.\n /\n @Prop() hoist = false;\n\n /\n Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n /\n @Prop() trigger: string = 'hover focus';\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n // Events\n\n /* Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. /\n @Event() nanoShow: EventEmitter;\n\n /* Emitted after the tooltip has shown and all transitions are complete. /\n @Event() nanoAfterShow: EventEmitter;\n\n /* Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. /\n @Event() nanoHide: EventEmitter;\n\n /* Emitted after the tooltip has hidden and all transitions are complete. /\n @Event() nanoAfterHide: EventEmitter;\n\n // Public methods\n\n /* Shows the tooltip. /\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible \|\| this.disabled) {\n return;\n }\n const slShow = this.nanoShow.emit();\n if (slShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.isVisible = true;\n this.open = true;\n this.popover.show();\n }\n\n /* Hides the tooltip. */\n @Method()\n async hide() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible) {\n return;\n }\n\n const slHide = this.nanoHide.emit();\n if (slHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.isVisible = false;\n this.open = false;\n this.popover.hide();\n }\n\n // Private methods\n\n private getTarget() {\n // Get the first child that isn't a <style> or content slot\n const target = [...Array.from(this.host.children)].find(\n (el) =>\n el.tagName.toLowerCase() !== 'style' &&\n el.getAttribute('slot') !== 'content'\n ) as HTMLElement;\n\n if (!target) {\n throw new Error('Invalid tooltip target: no child element was found.');\n }\n\n return target;\n }\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n private syncOptions() {\n this.popover.setOptions({\n strategy: this.hoist ? 'fixed' : 'absolute',\n placement: this.placement,\n distance: this.distance,\n skidding: this.skidding,\n transitionElement: this.tooltip,\n onAfterHide: () => this.nanoAfterHide.emit(),\n onAfterShow: () => this.nanoAfterShow.emit(),\n });\n }\n\n // Event Handlers\n\n private handleBlur = () => {\n if (this.hasTrigger('focus')) {\n this.hide();\n }\n };\n\n private handleClick = () => {\n if (this.hasTrigger('click')) {\n this.open ? this.hide() : this.show();\n }\n };\n\n private handleFocus = () => {\n if (this.hasTrigger('focus')) {\n this.show();\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Pressing escape when the target element has focus should dismiss the tooltip\n if (this.open && event.key === 'Escape') {\n event.stopPropagation();\n this.hide();\n }\n };\n\n private handleMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.show();\n }\n };\n\n private handleMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.hide();\n }\n };\n\n private handleSlotChange = () => {\n this.target = this.getTarget();\n };\n\n // Stencil hooks\n\n componentDidLoad() {\n this.target = this.getTarget();\n this.popover = new Popover(this.target, this.tooltipPositioner);\n this.syncOptions();\n this.setLabel();\n\n // Show on init if open\n this.tooltipPositioner.hidden = !this.open;\n if (this.open) {\n this.show();\n }\n }\n\n componentDidUpdate() {\n this.syncOptions();\n }\n\n disconnectedCallback() {\n this.popover.destroy();\n }\n\n render() {\n return (\n <Host\n onKeyDown={this.handleKeyDown}\n onMouseOver={this.handleMouseOver}\n onMouseOut={this.handleMouseOut}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onClick={this.handleClick}\n >\n <slot onSlotchange={this.handleSlotChange} />\n <div\n ref={(el) => (this.tooltipPositioner = el)}\n class=\"tooltip-positioner\"\n >\n <div\n part=\"base\"\n ref={(el) => (this.tooltip = el)}\n class={{\n tooltip: true,\n 'tooltip--open': this.open,\n }}\n role=\"tooltip\"\n aria-hidden={this.open ? 'false' : 'true'}\n >\n <slot name=\"content\" onSlotchange={() => this.setLabel()}>\n {this.content}\n </slot>\n <div class=\"tooltip-arrow\" data-popper-arrow></div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n Watch,\n h,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\n\n/*\n Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n /\n@Component({\n tag: 'nano-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true,\n})\nexport class Tooltip {\n private isVisible = false;\n private popover: Popover;\n private tooltipPositioner: HTMLElement;\n private tooltip: any;\n\n private _target: HTMLElement;\n private get target() {\n return this._target;\n }\n private set target(newTarget) {\n if (newTarget !== this._target && this._target) {\n this._target.removeAttribute('aria-label');\n }\n newTarget.setAttribute('aria-label', this.label);\n this._target = newTarget;\n }\n\n private label = '';\n\n @Element() host: HTMLNanoTooltipElement;\n\n /* The tooltip's content. Alternatively, you can use the content slot. /\n @Prop() content = '';\n\n @Watch('content')\n setLabel() {\n const contentSlotNodes = Array.from(\n this.host.querySelectorAll('[slot=\"content\"]')\n );\n const textContent = contentSlotNodes\n .map((node) => node.textContent)\n .join(' ')\n .trim();\n\n if (!this.target) {\n this.target = this.getTarget();\n\n if (!this.target) return;\n }\n\n this.label = textContent \|\| this.content;\n this.target.setAttribute('aria-label', this.label);\n }\n\n /\n The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n * inside of the viewport.\n /\n @Prop() placement:\n \| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end' = 'top';\n\n /* Set to true to disable the tooltip so it won't show when triggered. /\n @Prop() disabled = false;\n\n /* The distance in pixels from which to offset the tooltip away from its target. /\n @Prop() distance = 10;\n\n /* Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* The distance in pixels from which to offset the tooltip along its target. /\n @Prop() skidding = 0;\n\n /\n Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n * `overflow: auto\|scroll`.\n /\n @Prop() hoist = false;\n\n /\n Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n /\n @Prop() trigger: string = 'hover focus';\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n // Events\n\n /* Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. /\n @Event() nanoShow: EventEmitter;\n\n /* Emitted after the tooltip has shown and all transitions are complete. /\n @Event() nanoAfterShow: EventEmitter;\n\n /* Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. /\n @Event() nanoHide: EventEmitter;\n\n /* Emitted after the tooltip has hidden and all transitions are complete. /\n @Event() nanoAfterHide: EventEmitter;\n\n // Public methods\n\n /* Shows the tooltip. /\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible \|\| this.disabled) {\n return;\n }\n const slShow = this.nanoShow.emit();\n if (slShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.isVisible = true;\n this.open = true;\n this.popover.show();\n }\n\n /* Hides the tooltip. */\n @Method()\n async hide() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible) {\n return;\n }\n\n const slHide = this.nanoHide.emit();\n if (slHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.isVisible = false;\n this.open = false;\n this.popover.hide();\n }\n\n // Private methods\n\n private getTarget() {\n // Get the first child that isn't a <style> or content slot\n const target = [...Array.from(this.host.children)].find(\n (el) =>\n el.tagName.toLowerCase() !== 'style' &&\n el.getAttribute('slot') !== 'content'\n ) as HTMLElement;\n\n if (!target) {\n throw new Error('Invalid tooltip target: no child element was found.');\n }\n\n return target;\n }\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n private syncOptions() {\n this.popover.setOptions({\n strategy: this.hoist ? 'fixed' : 'absolute',\n placement: this.placement,\n distance: this.distance,\n skidding: this.skidding,\n transitionElement: this.tooltip,\n onAfterHide: () => this.nanoAfterHide.emit(),\n onAfterShow: () => this.nanoAfterShow.emit(),\n });\n }\n\n // Event Handlers\n\n private handleBlur = () => {\n if (this.hasTrigger('focus')) {\n this.hide();\n }\n };\n\n private handleClick = () => {\n if (this.hasTrigger('click')) {\n this.open ? this.hide() : this.show();\n }\n };\n\n private handleFocus = () => {\n if (this.hasTrigger('focus')) {\n this.show();\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Pressing escape when the target element has focus should dismiss the tooltip\n if (this.open && event.key === 'Escape') {\n event.stopPropagation();\n this.hide();\n }\n };\n\n private handleMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.show();\n }\n };\n\n private handleMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.hide();\n }\n };\n\n private handleSlotChange = () => {\n this.target = this.getTarget();\n };\n\n // Stencil hooks\n\n componentDidLoad() {\n this.target = this.getTarget();\n this.popover = new Popover(this.target, this.tooltipPositioner);\n this.syncOptions();\n this.setLabel();\n\n // Show on init if open\n this.tooltipPositioner.hidden = !this.open;\n if (this.open) {\n this.show();\n }\n }\n\n componentDidUpdate() {\n this.syncOptions();\n }\n\n disconnectedCallback() {\n if (this.popover) this.popover.destroy();\n }\n\n render() {\n return (\n <Host\n onKeyDown={this.handleKeyDown}\n onMouseOver={this.handleMouseOver}\n onMouseOut={this.handleMouseOut}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onClick={this.handleClick}\n >\n <slot onSlotchange={this.handleSlotChange} />\n <div\n ref={(el) => (this.tooltipPositioner = el)}\n class=\"tooltip-positioner\"\n >\n <div\n part=\"base\"\n ref={(el) => (this.tooltip = el)}\n class={{\n tooltip: true,\n 'tooltip--open': this.open,\n }}\n role=\"tooltip\"\n aria-hidden={this.open ? 'false' : 'true'}\n >\n <slot name=\"content\" onSlotchange={() => this.setLabel()}>\n {this.content}\n </slot>\n <div class=\"tooltip-arrow\" data-popper-arrow></div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/components/nano-alert.js CHANGED Viewed

@@ -220,8 +220,8 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     });
   }
   connectedCallback() {
-    this.handleHoistChange();
     this.modal = new Modal(this.host);
+    this.handleHoistChange();
     this.host.addEventListener('click', this.handleButtonClick);
     if (this.panel) {
       this.addedTransEnd = true;
@@ -232,7 +232,8 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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/components/nano-alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-alert.js","mappings":"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","names":[],"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.js","mappings":"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","names":[],"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/components/nano-checkbox-group.js CHANGED Viewed

@@ -109,6 +109,8 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
    */
   async showError(message, optVal) {
     let cb;
+    if (!this.checkboxes)
+      return;
     if (optVal)
       cb = this.checkboxes.find((c) => c.value === optVal);
     if (!cb)
@@ -187,12 +189,14 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     return invalid;
   }
   handleComponentChange() {
-    if (!this.checkboxes.length)
+    var _a;
+    if (!((_a = this.checkboxes) === null || _a === void 0 ? void 0 : _a.length))
       return;
     this.checkboxTypes = 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/components/nano-checkbox-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-checkbox-group.js","mappings":"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","names":[],"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.js","mappings":"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","names":[],"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/components/nano-dialog.js CHANGED Viewed

@@ -175,7 +175,7 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         'dialog--has-header': !this.noHeader,
         'dialog--nodismiss': this.noDismiss,
         'dialog--with-ribbon': this.showRibbon,
-      }, onKeyDown: this.handleKeyDown }, h("div", { part: "overlay", class: "dialog__overlay", ref: (el) => (this.overlay = el), onClick: this.requestClose }), h("div", { ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: 0 }, h("div", { class: "dialog__body-wrap" }, !this.noHeader && (h("nano-sticker", null, h("header", { part: "header", class: "dialog__header" }, h("span", { part: "title", class: "dialog__title", id: `${this.componentId}-title` }, h("slot", { name: "label" }, this.label || String.fromCharCode(65279))), !this.noUserDismiss && (h("nano-icon-button", { exportparts: "base:close-button", class: "dialog__close-icon", label: "close dialog", onClick: this.requestClose, iconName: "light/times" }))))), h("div", { part: "body", class: "dialog__body" }, h("slot", null)), !this.noFooter && (this.hasFooter || !this.noUserDismiss) && (h("nano-sticker", { position: "bottom" }, h("footer", { part: "footer", class: "dialog__footer" }, h("slot", { name: "footer", onSlotchange: this.handleSlotChange }), !this.noUserDismiss && (h("button", { class: "dialog__close-txt", onClick: this.requestClose }, "Close"))))))))));
+      }, onKeyDown: this.handleKeyDown }, h("div", { part: "overlay", class: "dialog__overlay", ref: (el) => (this.overlay = el), onClick: this.requestClose }), h("div", { ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: 0 }, h("div", { class: "dialog__body-wrap" }, !this.noHeader && (h("nano-sticker", null, h("header", { part: "header", class: "dialog__header" }, h("span", { part: "title", class: "dialog__title", id: `${this.componentId}-title` }, h("slot", { name: "label" }, this.label || String.fromCharCode(65279))), !this.noUserDismiss && (h("nano-icon-button", { exportparts: "base:close-button", class: "dialog__close-icon", label: "close dialog", onClick: this.requestClose, iconName: "light/times" }))))), h("div", { part: "body", class: "dialog__body", style: { display: !this.isVisible ? 'none' : '' } }, h("slot", null)), !this.noFooter && (this.hasFooter || !this.noUserDismiss) && (h("nano-sticker", { position: "bottom" }, h("footer", { part: "footer", class: "dialog__footer" }, h("slot", { name: "footer", onSlotchange: this.handleSlotChange }), !this.noUserDismiss && (h("button", { class: "dialog__close-txt", onClick: this.requestClose }, "Close"))))))))));
   }
   get host() { return this; }
   static get watchers() { return {

package/dist/components/nano-dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-dialog.js","mappings":"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","names":[],"sources":["./src/components/dialog/dialog.scss?tag=nano-dialog&encapsulation=shadow","./src/components/dialog/dialog.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@import '../../global/style/nano-theme/form';\n\n/*\n @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n * @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --content-background: defaults to #{$layer-bg-color};\n * @prop --footer-background: defaults to #{map.get($colors, celsius)};\n * @prop --box-shadow: defaults to $layer-shadow-xlarge;\n * @prop --close-button-color: defaults to #{map.get($colors, mediumgrey)};\n * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n * @prop --tint-color: colour used to highlight items in the dialog - top ribbon, bottom close button. Default #{map.get($colors, blue)};\n * @prop --width: defaults to 31rem;\n /\n:host {\n --border-radius: #{$layer-border-radius};\n --content-background: #fafafa;\n --footer-content: #{map.get($colors, lightgrey)};\n --scrim-color: #{$layer-overlay-dark};\n --box-shadow: #{$layer-shadow-large};\n --close-button-color: #{map.get($colors, palegrey)};\n --width: 60rem;\n --tint-color: #{darken(map.get($colors, blue), 5%)};\n --body-padding-v: #{$spacing-large};\n --body-padding-h: #{$spacing-large};\n --header-padding-v: #{$spacing-medium};\n --header-padding-h: #{$spacing-large};\n --footer-padding-v: #{$spacing-medium};\n --footer-padding-h: #{$spacing-large};\n}\n\n.dialog {\n $self: &;\n\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n inset: 0;\n z-index: #{$layer-index-modal};\n\n &:not(.dialog--visible) {\n @include hidden;\n }\n\n &__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n inline-size: var(--width);\n max-inline-size: calc(100% - #{$spacing-xlarge});\n max-block-size: calc(92% - #{$spacing-xlarge});\n background-color: var(--content-background);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n opacity: 0;\n transform: scale(0.8);\n transition: #{$transition-fast} opacity, #{$transition-fast} transform;\n\n &:focus {\n outline: none;\n }\n\n .dialog--with-ribbon & {\n border-block-start: 5px solid var(--tint-color);\n }\n\n .dialog--open & {\n display: flex;\n opacity: 1;\n transform: none;\n }\n\n .dialog--nodismiss & {\n animation: cannotClose 0.25s ease-in-out 1;\n\n @keyframes cannotClose {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.08);\n }\n\n 100% {\n transform: scale(1);\n }\n }\n }\n }\n\n &__header {\n flex: 0 0 auto;\n display: flex;\n min-inline-size: var(--width);\n inline-size: 100%;\n background-color: var(--content-background);\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n transition: #{$transition-xfast} box-shadow;\n\n .dialog--visible & {\n min-inline-size: auto;\n }\n\n [stuck] & {\n box-shadow: #{$layer-shadow-medium};\n }\n }\n\n &__title {\n flex: 1 1 auto;\n font-size: #{$fontsize-large};\n line-height: 1.6;\n padding-block: var(--header-padding-v);\n padding-inline: var(--header-padding-h);\n }\n\n & &__close-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: #{$fontsize-xlarge};\n padding-block: 0;\n padding-inline: var(--header-padding-h);\n\n --color: var(--close-button-color);\n }\n\n &__body {\n padding-block: 0 var(--body-padding-v);\n padding-inline: var(--body-padding-h);\n\n .dialog:not(.dialog--has-header) & {\n padding-block-start: var(--body-padding-v);\n }\n\n & ::slotted() {\n max-inline-size: 100%;\n }\n\n &-wrap {\n flex: 1 1 auto;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n border-radius: var(--border-radius);\n\n .dialog:not(.dialog--has-header) & {\n border-radius: 0 0 inherit inherit;\n }\n\n .dialog:not(.dialog--has-footer) & {\n border-radius: inherit inherit 0 0;\n }\n }\n }\n\n &__footer {\n inline-size: 100%;\n padding-block: var(--footer-padding-v);\n padding-inline: var(--footer-padding-h);\n background: var(--footer-content);\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n position: relative;\n inset-block-start: 1px;\n\n .dialog--visible & {\n min-inline-size: auto;\n }\n\n ::slotted(button) {\n margin-inline-end: #{$spacing-small} !important;\n }\n\n .dialog:not(.dialog--has-footer) & {\n display: none;\n }\n }\n\n &__close-txt {\n color: var(--tint-color);\n border: none;\n text-decoration: underline;\n margin: 0;\n text-underline-offset: 4px;\n background-color: transparent;\n font: inherit;\n -webkit-box-align: center;\n cursor: pointer;\n font-size: #{$fontsize-small};\n padding: 0.5rem;\n border-radius: #{$border-radius-small};\n transition: box-shadow 100ms ease-in-out;\n\n &:focus {\n outline: none;\n box-shadow: #{$control-focus-style};\n }\n }\n\n &__overlay {\n position: fixed;\n inset: 0;\n background-color: var(--scrim-color);\n opacity: 0;\n transition: #{$transition-fast} opacity;\n backdrop-filter: blur(#{$layer-overlay-blur});\n\n .dialog--open & {\n opacity: 1;\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n ComponentInterface,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\n\nlet id = 0;\n\n/*\n Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n \n @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n /\n@Component({\n tag: 'nano-dialog',\n styleUrl: 'dialog.scss',\n shadow: true,\n})\nexport class Dialog implements ComponentInterface {\n private componentId = `dialog-${++id}`;\n private modal: Modal;\n private panel: HTMLElement;\n private willShow = false;\n private willHide = false;\n private originalTrigger: HTMLElement \| null;\n private overlay: HTMLElement;\n private addedTransEnd = false;\n\n @Element() host: HTMLNanoDialogElement;\n @State() isVisible = false;\n @State() noDismiss = false;\n @State() hasFooter = false;\n\n /* Show a colour ribbon at the top of the modal /\n @Prop() showRibbon = true;\n\n /* Indicates whether or not the dialog 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 /* The dialog's label as displayed in the header. You should always include a relevant\n * label even when using `no-header`, as it is required for proper accessibility. /\n @Prop() label!: string;\n\n /* Set to true to disable the header. This will also remove the default close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. /\n @Prop() noHeader = false;\n\n /* Set to true to disable the footer. This will also remove the footer close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. /\n @Prop() noFooter = false;\n\n /* An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key /\n @Prop() noUserDismiss = false;\n\n /* Store search queries (against this ID) to the component store. Use in conjunction with storeMethod /\n @Prop() storeId?: string;\n\n /* The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). /\n @Prop() storeMethod: StorageMethods = 'url-hash';\n\n /* Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` /\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 dialog opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event() nanoShow: EventEmitter;\n\n /* Emitted after the dialog opens and all transitions are complete. /\n @Event() nanoAfterShow: EventEmitter;\n\n /* Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event() nanoHide: EventEmitter;\n\n /* Emitted after the dialog closes and all transitions are complete. /\n @Event() nanoAfterHide: EventEmitter;\n\n /* Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent\n * focus and allow you to set it on a different element in the dialog, such as an input or button. /\n @Event() nanoInitialFocus: EventEmitter;\n\n /* Emitted when the user clicks the close button, clicks the overlay, or presses the `Escape` key. Calling `event.preventDefault()` will prevent the dialog from closing. /\n @Event() nanoRequestClose: EventEmitter;\n\n /* Shows the dialog /\n @Method()\n async show() {\n if (this.willShow) {\n return;\n }\n\n const nanoShow = this.nanoShow.emit();\n if (nanoShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.originalTrigger = document.activeElement as HTMLElement;\n this.willShow = true;\n this.isVisible = true;\n this.open = true;\n this.modal.activate();\n\n lockBodyScrolling(this.host);\n\n if (this.open) {\n // Wait for the next frame before setting initial focus so the dialog is technically visible\n this.host.addEventListener(\n 'nanoAfterShow',\n () => {\n const nanoInitialFocus = this.nanoInitialFocus.emit();\n if (!nanoInitialFocus.defaultPrevented) {\n this.panel.focus({ preventScroll: true });\n }\n },\n { once: true }\n );\n }\n }\n\n /* Hides the dialog /\n @Method()\n async hide() {\n if (this.willHide) {\n return;\n }\n\n const nanoHide = this.nanoHide.emit();\n if (nanoHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n this.modal.deactivate();\n unlockBodyScrolling(this.host);\n this.stopVideos();\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (trigger && typeof trigger.focus === 'function') {\n setTimeout(() => trigger.focus());\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.requestClose();\n }\n };\n\n private requestClose = () => {\n const nanoOverlayDismiss = this.nanoRequestClose.emit();\n\n if (!nanoOverlayDismiss.defaultPrevented && !this.noUserDismiss) {\n this.hide();\n } else {\n this.noDismiss = true;\n setTimeout((_) => (this.noDismiss = false), 250);\n }\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (\n event.propertyName === 'opacity' &&\n event\n .composedPath()\n .find((node) => node === this.panel \|\| node === this.overlay)\n ) {\n // Ensure we only emit one event when the target element is no longer visible\n this.isVisible = this.open;\n this.willShow = false;\n this.willHide = false;\n this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n }\n };\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, 'footer');\n };\n\n private stopVideos() {\n const videos: (HTMLVideoElement \| HTMLIFrameElement)[] = Array.from(\n this.host.querySelectorAll('iframe,video')\n );\n videos.forEach((video) => {\n if (video.tagName.toLowerCase() === 'video')\n (video as HTMLVideoElement).pause();\n else {\n const src = video.src;\n video.src = src;\n }\n });\n }\n\n connectedCallback() {\n this.handleHoistChange();\n this.modal = new Modal(this.host);\n if (this.panel) {\n this.addedTransEnd = true;\n this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n }\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n // Show on init if open\n if (this.open) this.show();\n if (this.storeId)\n ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n }\n\n componentDidLoad() {\n if (!this.addedTransEnd) {\n this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n }\n }\n\n disconnectedCallback() {\n if (!this.panel) return;\n unlockBodyScrolling(this.host);\n this.addedTransEnd = false;\n this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n }\n\n render() {\n return (\n <Host showing={this.isVisible ? true : undefined}>\n <div\n part=\"base\"\n class={{\n dialog: true,\n 'dialog--open': this.open,\n 'dialog--visible': this.isVisible,\n 'dialog--has-footer': !this.noFooter,\n 'dialog--has-header': !this.noHeader,\n 'dialog--nodismiss': this.noDismiss,\n 'dialog--with-ribbon': this.showRibbon,\n }}\n onKeyDown={this.handleKeyDown}\n >\n <div\n part=\"overlay\"\n class=\"dialog__overlay\"\n ref={(el) => (this.overlay = el)}\n onClick={this.requestClose}\n />\n\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"dialog__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : null}\n aria-labelledby={\n !this.noHeader ? `${this.componentId}-title` : null\n }\n tabIndex={0}\n >\n <div class=\"dialog__body-wrap\">\n {!this.noHeader && (\n <nano-sticker>\n <header part=\"header\" class=\"dialog__header\">\n <span\n part=\"title\"\n class=\"dialog__title\"\n id={`${this.componentId}-title`}\n >\n <slot name=\"label\">\n {/ If there's no label, use an invisible character to prevent the heading from collapsing */}\n {this.label \|\| String.fromCharCode(65279)}\n </slot>\n </span>\n {!this.noUserDismiss && (\n <nano-icon-button\n exportparts=\"base:close-button\"\n class=\"dialog__close-icon\"\n label=\"close dialog\"\n onClick={this.requestClose}\n iconName=\"light/times\"\n />\n )}\n </header>\n </nano-sticker>\n )}\n <div part=\"body\" class=\"dialog__body\">\n <slot />\n </div>\n {!this.noFooter && (this.hasFooter \|\| !this.noUserDismiss) && (\n <nano-sticker position=\"bottom\">\n <footer part=\"footer\" class=\"dialog__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n {!this.noUserDismiss && (\n <button\n class=\"dialog__close-txt\"\n onClick={this.requestClose}\n >\n Close\n </button>\n )}\n </footer>\n </nano-sticker>\n )}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nano-dialog.js","mappings":"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","names":[],"sources":["./src/components/dialog/dialog.scss?tag=nano-dialog&encapsulation=shadow","./src/components/dialog/dialog.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@import '../../global/style/nano-theme/form';\n\n/*\n @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n * @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --content-background: defaults to #{$layer-bg-color};\n * @prop --footer-background: defaults to #{map.get($colors, celsius)};\n * @prop --box-shadow: defaults to $layer-shadow-xlarge;\n * @prop --close-button-color: defaults to #{map.get($colors, mediumgrey)};\n * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n * @prop --tint-color: colour used to highlight items in the dialog - top ribbon, bottom close button. Default #{map.get($colors, blue)};\n * @prop --width: defaults to 31rem;\n * @prop --nano-layer-overlay-blur: inheritable theme applied to backdrop. Default to #{$layer-overlay-blur}\n /\n:host {\n --border-radius: #{$layer-border-radius};\n --content-background: #fafafa;\n --footer-content: #{map.get($colors, lightgrey)};\n --scrim-color: #{$layer-overlay-dark};\n --box-shadow: #{$layer-shadow-large};\n --close-button-color: #{map.get($colors, palegrey)};\n --width: 60rem;\n --tint-color: #{darken(map.get($colors, blue), 5%)};\n --body-padding-v: #{$spacing-large};\n --body-padding-h: #{$spacing-large};\n --header-padding-v: #{$spacing-medium};\n --header-padding-h: #{$spacing-large};\n --footer-padding-v: #{$spacing-medium};\n --footer-padding-h: #{$spacing-large};\n}\n\n.dialog {\n $self: &;\n\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n inset: 0;\n z-index: #{$layer-index-modal};\n\n &:not(.dialog--visible) {\n @include hidden;\n }\n\n &__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n inline-size: var(--width);\n max-inline-size: calc(100% - #{$spacing-xlarge});\n max-block-size: calc(92% - #{$spacing-xlarge});\n background-color: var(--content-background);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n opacity: 0;\n transform: scale(0.8);\n transition: #{$transition-fast} opacity, #{$transition-fast} transform;\n\n &:focus {\n outline: none;\n }\n\n .dialog--with-ribbon & {\n border-block-start: 5px solid var(--tint-color);\n }\n\n .dialog--open & {\n display: flex;\n opacity: 1;\n transform: none;\n }\n\n .dialog--nodismiss & {\n animation: cannotClose 0.25s ease-in-out 1;\n\n @keyframes cannotClose {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.08);\n }\n\n 100% {\n transform: scale(1);\n }\n }\n }\n }\n\n &__header {\n flex: 0 0 auto;\n display: flex;\n min-inline-size: var(--width);\n inline-size: 100%;\n background-color: var(--content-background);\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n transition: #{$transition-xfast} box-shadow;\n\n .dialog--visible & {\n min-inline-size: auto;\n }\n\n [stuck] & {\n box-shadow: #{$layer-shadow-medium};\n }\n }\n\n &__title {\n flex: 1 1 auto;\n font-size: #{$fontsize-large};\n line-height: 1.6;\n padding-block: var(--header-padding-v);\n padding-inline: var(--header-padding-h);\n }\n\n & &__close-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: #{$fontsize-xlarge};\n padding-block: 0;\n padding-inline: var(--header-padding-h);\n\n --color: var(--close-button-color);\n }\n\n &__body {\n padding-block: 0 var(--body-padding-v);\n padding-inline: var(--body-padding-h);\n\n .dialog:not(.dialog--has-header) & {\n padding-block-start: var(--body-padding-v);\n }\n\n & ::slotted() {\n max-inline-size: 100%;\n }\n\n &-wrap {\n flex: 1 1 auto;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n border-radius: var(--border-radius);\n\n .dialog:not(.dialog--has-header) & {\n border-radius: 0 0 inherit inherit;\n }\n\n .dialog:not(.dialog--has-footer) & {\n border-radius: inherit inherit 0 0;\n }\n }\n }\n\n &__footer {\n inline-size: 100%;\n padding-block: var(--footer-padding-v);\n padding-inline: var(--footer-padding-h);\n background: var(--footer-content);\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n position: relative;\n inset-block-start: 1px;\n\n .dialog--visible & {\n min-inline-size: auto;\n }\n\n ::slotted(button) {\n margin-inline-end: #{$spacing-small} !important;\n }\n\n .dialog:not(.dialog--has-footer) & {\n display: none;\n }\n }\n\n &__close-txt {\n color: var(--tint-color);\n border: none;\n text-decoration: underline;\n margin: 0;\n text-underline-offset: 4px;\n background-color: transparent;\n font: inherit;\n -webkit-box-align: center;\n cursor: pointer;\n font-size: #{$fontsize-small};\n padding: 0.5rem;\n border-radius: #{$border-radius-small};\n transition: box-shadow 100ms ease-in-out;\n\n &:focus {\n outline: none;\n box-shadow: #{$control-focus-style};\n }\n }\n\n &__overlay {\n position: fixed;\n inset: 0;\n background-color: var(--scrim-color);\n opacity: 0;\n transition: #{$transition-fast} opacity;\n backdrop-filter: blur(#{$layer-overlay-blur});\n\n .dialog--open & {\n opacity: 1;\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n ComponentInterface,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\n\nlet id = 0;\n\n/*\n Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n \n @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n /\n@Component({\n tag: 'nano-dialog',\n styleUrl: 'dialog.scss',\n shadow: true,\n})\nexport class Dialog implements ComponentInterface {\n private componentId = `dialog-${++id}`;\n private modal: Modal;\n private panel: HTMLElement;\n private willShow = false;\n private willHide = false;\n private originalTrigger: HTMLElement \| null;\n private overlay: HTMLElement;\n private addedTransEnd = false;\n\n @Element() host: HTMLNanoDialogElement;\n @State() isVisible = false;\n @State() noDismiss = false;\n @State() hasFooter = false;\n\n /* Show a colour ribbon at the top of the modal /\n @Prop() showRibbon = true;\n\n /* Indicates whether or not the dialog 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 /* The dialog's label as displayed in the header. You should always include a relevant\n * label even when using `no-header`, as it is required for proper accessibility. /\n @Prop() label!: string;\n\n /* Set to true to disable the header. This will also remove the default close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. /\n @Prop() noHeader = false;\n\n /* Set to true to disable the footer. This will also remove the footer close button,\n * so please ensure you provide an easy, accessible way for users to dismiss the dialog. /\n @Prop() noFooter = false;\n\n /* An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key /\n @Prop() noUserDismiss = false;\n\n /* Store search queries (against this ID) to the component store. Use in conjunction with storeMethod /\n @Prop() storeId?: string;\n\n /* The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). /\n @Prop() storeMethod: StorageMethods = 'url-hash';\n\n /* Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` /\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 dialog opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event() nanoShow: EventEmitter;\n\n /* Emitted after the dialog opens and all transitions are complete. /\n @Event() nanoAfterShow: EventEmitter;\n\n /* Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event() nanoHide: EventEmitter;\n\n /* Emitted after the dialog closes and all transitions are complete. /\n @Event() nanoAfterHide: EventEmitter;\n\n /* Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent\n * focus and allow you to set it on a different element in the dialog, such as an input or button. /\n @Event() nanoInitialFocus: EventEmitter;\n\n /* Emitted when the user clicks the close button, clicks the overlay, or presses the `Escape` key. Calling `event.preventDefault()` will prevent the dialog from closing. /\n @Event() nanoRequestClose: EventEmitter;\n\n /* Shows the dialog /\n @Method()\n async show() {\n if (this.willShow) {\n return;\n }\n\n const nanoShow = this.nanoShow.emit();\n if (nanoShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.originalTrigger = document.activeElement as HTMLElement;\n this.willShow = true;\n this.isVisible = true;\n this.open = true;\n this.modal.activate();\n\n lockBodyScrolling(this.host);\n\n if (this.open) {\n // Wait for the next frame before setting initial focus so the dialog is technically visible\n this.host.addEventListener(\n 'nanoAfterShow',\n () => {\n const nanoInitialFocus = this.nanoInitialFocus.emit();\n if (!nanoInitialFocus.defaultPrevented) {\n this.panel.focus({ preventScroll: true });\n }\n },\n { once: true }\n );\n }\n }\n\n /* Hides the dialog /\n @Method()\n async hide() {\n if (this.willHide) {\n return;\n }\n\n const nanoHide = this.nanoHide.emit();\n if (nanoHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n this.modal.deactivate();\n unlockBodyScrolling(this.host);\n this.stopVideos();\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (trigger && typeof trigger.focus === 'function') {\n setTimeout(() => trigger.focus());\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.requestClose();\n }\n };\n\n private requestClose = () => {\n const nanoOverlayDismiss = this.nanoRequestClose.emit();\n\n if (!nanoOverlayDismiss.defaultPrevented && !this.noUserDismiss) {\n this.hide();\n } else {\n this.noDismiss = true;\n setTimeout((_) => (this.noDismiss = false), 250);\n }\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (\n event.propertyName === 'opacity' &&\n event\n .composedPath()\n .find((node) => node === this.panel \|\| node === this.overlay)\n ) {\n // Ensure we only emit one event when the target element is no longer visible\n this.isVisible = this.open;\n this.willShow = false;\n this.willHide = false;\n this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n }\n };\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, 'footer');\n };\n\n private stopVideos() {\n const videos: (HTMLVideoElement \| HTMLIFrameElement)[] = Array.from(\n this.host.querySelectorAll('iframe,video')\n );\n videos.forEach((video) => {\n if (video.tagName.toLowerCase() === 'video')\n (video as HTMLVideoElement).pause();\n else {\n const src = video.src;\n video.src = src;\n }\n });\n }\n\n connectedCallback() {\n this.handleHoistChange();\n this.modal = new Modal(this.host);\n if (this.panel) {\n this.addedTransEnd = true;\n this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n }\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n // Show on init if open\n if (this.open) this.show();\n if (this.storeId)\n ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n }\n\n componentDidLoad() {\n if (!this.addedTransEnd) {\n this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n }\n }\n\n disconnectedCallback() {\n if (!this.panel) return;\n unlockBodyScrolling(this.host);\n this.addedTransEnd = false;\n this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n }\n\n render() {\n return (\n <Host showing={this.isVisible ? true : undefined}>\n <div\n part=\"base\"\n class={{\n dialog: true,\n 'dialog--open': this.open,\n 'dialog--visible': this.isVisible,\n 'dialog--has-footer': !this.noFooter,\n 'dialog--has-header': !this.noHeader,\n 'dialog--nodismiss': this.noDismiss,\n 'dialog--with-ribbon': this.showRibbon,\n }}\n onKeyDown={this.handleKeyDown}\n >\n <div\n part=\"overlay\"\n class=\"dialog__overlay\"\n ref={(el) => (this.overlay = el)}\n onClick={this.requestClose}\n />\n\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"dialog__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : null}\n aria-labelledby={\n !this.noHeader ? `${this.componentId}-title` : null\n }\n tabIndex={0}\n >\n <div class=\"dialog__body-wrap\">\n {!this.noHeader && (\n <nano-sticker>\n <header part=\"header\" class=\"dialog__header\">\n <span\n part=\"title\"\n class=\"dialog__title\"\n id={`${this.componentId}-title`}\n >\n <slot name=\"label\">\n {/ If there's no label, use an invisible character to prevent the heading from collapsing */}\n {this.label \|\| String.fromCharCode(65279)}\n </slot>\n </span>\n {!this.noUserDismiss && (\n <nano-icon-button\n exportparts=\"base:close-button\"\n class=\"dialog__close-icon\"\n label=\"close dialog\"\n onClick={this.requestClose}\n iconName=\"light/times\"\n />\n )}\n </header>\n </nano-sticker>\n )}\n <div\n part=\"body\"\n class=\"dialog__body\"\n style={{ display: !this.isVisible ? 'none' : '' }}\n >\n <slot />\n </div>\n {!this.noFooter && (this.hasFooter \|\| !this.noUserDismiss) && (\n <nano-sticker position=\"bottom\">\n <footer part=\"footer\" class=\"dialog__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n {!this.noUserDismiss && (\n <button\n class=\"dialog__close-txt\"\n onClick={this.requestClose}\n >\n Close\n </button>\n )}\n </footer>\n </nano-sticker>\n )}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}