npm - @nanoporetech-digital/components - Versions diffs - 2.1.4 → 2.3.0 - Mend

@nanoporetech-digital/components 2.1.4 → 2.3.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 (258) hide show

package/dist/components/menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"menu.js","mappings":"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","names":[],"sources":["./src/components/menu/menu.scss?tag=nano-menu&encapsulation=shadow","./src/components/menu/menu.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n /*\n @prop --padding-start: padding at the start of nav-items (left r2l / right l2r). Defaults to '10px'\n * @prop --padding-end: padding at the end of nav-items (right r2l / left l2r). Defaults to '10px'\n * @prop --padding-top: padding at the top of nav-items. Defaults to '10px'\n * @prop --padding-bottom: padding at the bottom of nav-items. Defaults to '10px'\n\n * @prop --secondary-padding-top: padding at the top of nested nav-items. Defaults to 0\n * @prop --secondary-padding-bottom: padding at the bottom of nested nav-items. Defaults to 0\n\n * @prop --bg-color-hover: bg hover color of nav-items. Defaults to #{$color-blue--faded};\n * @prop --bg-color-focus: bg focus color of nav-items. Defaults to #{$color-blue--faded};\n * @prop --bg-color-selected: bg selected color of nav-items. Defaults to #{$color-blue--faded};\n\n * @prop --color-hover: text hover color of nav-items. Defaults to #{$color-blue}\n * @prop --color-selected: text selected color of nav-items. Defaults to #{$color-blue}\n * @prop --color-focus: text focus color of nav-items. Defaults to #{$color-blue}\n\n * @prop --focus-outline: the focus style of nav-items. Defaults to 'none'\n * @prop --font-size: default font-size for all items. Defaults .9em;\n /\n\n --padding-start: #{$spacing-medium};\n --padding-end: #{$spacing-medium};\n --padding-top: #{$spacing-small};\n --padding-bottom: #{$spacing-small};\n --secondary-padding-top: 0;\n --secondary-padding-bottom: 0;\n --bg-color-hover: #{$color-blue--faded};\n --bg-color-focus: #{$color-blue--faded};\n --bg-color-selected: #{$color-blue--faded};\n --color-hover: #{$color-blue};\n --color-selected: #{$color-blue};\n --color-focus: #{$color-blue};\n --focus-outline: none;\n --font-size: 0.9em;\n\n display: block;\n}\n\n.menu {\n font-size: var(--font-size, 0.9em);\n overscroll-behavior: none;\n min-width: var(--width);\n position: relative;\n\n &:focus {\n outline: none;\n }\n}\n\n::slotted(:not(nano-nav-item):not(nano-option):not(hr):not(slot)) {\n @include padding(\n var(--padding-top),\n var(--padding-end),\n var(--padding-bottom),\n var(--padding-start)\n );\n\n display: block;\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Method,\n h,\n Host,\n Element,\n Prop,\n Listen,\n} from '@stencil/core';\nimport {\n getTextContent,\n getDirectChildren,\n getActiveElement,\n} from '../../utils';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\ntype ValidElement = HTMLNanoNavItemElement \| HTMLNanoOptionElement;\ntype NNI = HTMLNanoNavItemElement;\n\n/*\n Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.\n * Manages focus state / active.\n * @slot - The menu's content; `nano-option`, `nano-nav-item` elements as well as <hr> and more.\n /\n@Component({\n tag: 'nano-menu',\n styleUrl: 'menu.scss',\n shadow: true,\n})\nexport class Menu {\n private ignoreMouseEvents = false;\n private ignoreMouseTimeout: any;\n private menu: HTMLElement;\n private typeToSelect = '';\n private typeToSelectTimeout: any;\n\n @Element() private el: HTMLNanoMenuElement;\n\n // Public API\n\n /* get the focus state of the menu @readonly /\n @Prop()\n get hasFocus() {\n return this._hasFocus;\n }\n private _hasFocus = false;\n\n /* changes the role of the underlying control - sometimes required for semantics /\n @Prop() type: 'menu' \| 'listbox' = 'menu';\n\n /* an accessible label /\n @Prop() label: string;\n\n // Events\n\n /* Emitted when the menu gains focus. /\n @Event() nanoFocus: EventEmitter;\n\n /* Emitted when the menu loses focus. /\n @Event() nanoBlur: EventEmitter;\n\n /* Emitted when a menu item is selected. /\n @Event() nanoSelect: EventEmitter<\n HTMLNanoOptionElement \| HTMLNanoNavItemElement\n >;\n\n // Public Methods\n\n /* Sets focus on the menu. /\n @Method()\n async setFocus() {\n if (this.menu?.focus) this.menu.focus({ preventScroll: true });\n }\n\n /* Removes focus from the menu. /\n @Method()\n async removeFocus() {\n if (this.menu?.blur) this.menu.blur();\n }\n\n /* Sets the current active item /\n @Method()\n async showActiveElement() {\n if (this.selectedItem)\n this.selectedItem.scrollIntoView({ block: 'nearest' });\n }\n\n /* Removes any active item's state */\n @Method()\n async resetActiveItem() {\n this.getItems\n .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n .map((i) => i.setAttribute('tabindex', '-1'));\n }\n\n // Private methods\n\n get getItems() {\n let items: ValidElement[];\n let opened = this.el.querySelectorAll('nano-nav-item.secondary-open');\n if (opened.length) {\n const ctx = opened[opened.length - 1] as HTMLNanoNavItemElement;\n items = Array.from(ctx.querySelectorAll('nano-nav-item, nano-option'));\n } else {\n items = getDirectChildren(\n this.el,\n 'nano-nav-item, nano-option',\n 'slot'\n ) as ValidElement[];\n }\n return items.filter((el) => !el.disabled && !el.hidden);\n }\n\n get activeItem() {\n const activeElement = getActiveElement();\n return this.getItems.find(\n (i) =>\n i.getAttribute('tabindex') === '0' \|\|\n i === activeElement \|\|\n i.classList.contains('has-focus')\n );\n }\n\n get selectedItem() {\n const activeElement = getActiveElement();\n return this.getItems.find((i) => i.selected \|\| i === activeElement);\n }\n\n private async setActiveFocusItem(item?: ValidElement, focus = true) {\n const items = this.getItems;\n let activeItem =\n !item \|\| item.disabled ? items.find((i) => i.selected) \|\| items[0] : item;\n\n items\n .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n .map((i: HTMLNanoOptionElement) =>\n i.setAttribute('tabindex', i === activeItem ? '0' : '-1')\n );\n\n if (!focus) return;\n\n if (activeItem) {\n (activeItem as NNI).setFocus\n ? (activeItem as NNI).setFocus()\n : activeItem.focus();\n } else this.menu.focus();\n }\n\n // Event Handlers\n\n @Listen('mousedown', { target: 'body' })\n @Listen('keydown')\n handleBlur(e: KeyboardEvent \| MouseEvent) {\n if (!this.hasFocus) return;\n\n const kev = e as KeyboardEvent;\n let found: boolean;\n\n if (kev.key) {\n if (kev.key !== 'Tab') return;\n found =\n getActiveElement() &&\n getActiveElement().closest(this.el.tagName.toLowerCase()) === this.el;\n } else found = !!e.composedPath().find((el) => el === this.el);\n\n if (!found) {\n this.resetActiveItem();\n this._hasFocus = false;\n this.nanoBlur.emit();\n }\n }\n\n private handleFocus = () => {\n this.setActiveFocusItem(this.selectedItem \|\| this.getItems[0]);\n\n this._hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private handleClick = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n const item = target.closest('nano-nav-item');\n\n if (item && !item.disabled) {\n this.nanoSelect.emit(item);\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the\n // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives\n // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.\n clearTimeout(this.ignoreMouseTimeout);\n this.ignoreMouseTimeout = setTimeout(\n () => (this.ignoreMouseEvents = false),\n 500\n );\n this.ignoreMouseEvents = true;\n\n // Make a selection when pressing enter\n switch (event.key) {\n case ' ':\n if (this.activeItem) this.activeItem.click();\n break;\n case 'ArrowDown':\n case 'ArrowUp':\n case 'PageDown':\n case 'PageUp':\n case 'Home':\n case 'End':\n const items = this.getItems;\n const selectedItem = this.activeItem;\n let index = items.indexOf(selectedItem);\n\n if (items.length) {\n event.preventDefault();\n\n if (event.key === 'ArrowDown') {\n index++;\n } else if (event.key === 'ArrowUp') {\n index--;\n } else if (event.key === 'Home' \|\| event.key === 'PageUp') {\n index = 0;\n } else if (event.key === 'End' \|\| event.key === 'PageDown') {\n index = items.length - 1;\n }\n\n if (index < 0) index = items.length - 1;\n if (index > items.length - 1) index = 0;\n\n this.setActiveFocusItem(items[index]);\n if (items[index]) items[index].scrollIntoView({ block: 'nearest' });\n return;\n }\n break;\n }\n\n // Handle type-to-search behavior when non-control characters are entered\n if (event.key === ' ' \|\| /^[a-z0-9]+$/i.test(event.key)) {\n clearTimeout(this.typeToSelectTimeout);\n this.typeToSelectTimeout = setTimeout(\n () => (this.typeToSelect = ''),\n 750\n );\n this.typeToSelect += event.key;\n\n const items = this.getItems;\n for (const item of items) {\n const slot = item.shadowRoot.querySelector(\n 'slot:not([name])'\n ) as HTMLSlotElement;\n const label = getTextContent(slot).toLowerCase().trim();\n if (\n label.substring(0, this.typeToSelect.length) === this.typeToSelect\n ) {\n this.setActiveFocusItem(item);\n break;\n }\n }\n }\n };\n\n private handleMouseOver = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n const item =\n target.closest('nano-nav-item') \|\| target.closest('nano-option');\n\n if (item && !this.ignoreMouseEvents) {\n this.setActiveFocusItem(item);\n }\n };\n\n // Component Lifecycle\n\n render() {\n return (\n <Host\n class={{\n legacy: !CANSHADOW,\n }}\n >\n <div\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n onMouseOver={this.handleMouseOver}\n onFocus={this.handleFocus}\n aria-label={this.label ? this.label : undefined}\n role={this.type}\n ref={(el) => (this.menu = el)}\n part=\"base\"\n class={{\n menu: true,\n ['menu--' + this.type]: true,\n 'menu--has-focus': this.hasFocus,\n }}\n tabIndex={-1}\n >\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"menu.js","mappings":"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","names":[],"sources":["./src/components/menu/menu.scss?tag=nano-menu&encapsulation=shadow","./src/components/menu/menu.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n /*\n @prop --padding-start: padding at the start of nav-items (left r2l / right l2r). Defaults to '10px'\n * @prop --padding-end: padding at the end of nav-items (right r2l / left l2r). Defaults to '10px'\n * @prop --padding-top: padding at the top of nav-items. Defaults to '10px'\n * @prop --padding-bottom: padding at the bottom of nav-items. Defaults to '10px'\n\n * @prop --secondary-padding-top: padding at the top of nested nav-items. Defaults to 0\n * @prop --secondary-padding-bottom: padding at the bottom of nested nav-items. Defaults to 0\n\n * @prop --bg-color-hover: bg hover color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n * @prop --bg-color-focus: bg focus color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n * @prop --bg-color-selected: bg selected color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n\n * @prop --color-hover: text hover color of nav-items. Defaults to #{map.get($colors, blue)}\n * @prop --color-selected: text selected color of nav-items. Defaults to #{map.get($colors, blue)}\n * @prop --color-focus: text focus color of nav-items. Defaults to #{map.get($colors, blue)}\n\n * @prop --focus-outline: the focus style of nav-items. Defaults to 'none'\n * @prop --font-size: default font-size for all items. Defaults .9em;\n /\n\n --padding-start: #{$spacing-medium};\n --padding-end: #{$spacing-medium};\n --padding-top: #{$spacing-small};\n --padding-bottom: #{$spacing-small};\n --secondary-padding-top: 0;\n --secondary-padding-bottom: 0;\n --bg-color-hover: #{map.get($colors, blue--faded)};\n --bg-color-focus: #{map.get($colors, blue--faded)};\n --bg-color-selected: #{map.get($colors, blue--faded)};\n --color-hover: #{map.get($colors, blue)};\n --color-selected: #{map.get($colors, blue)};\n --color-focus: #{map.get($colors, blue)};\n --focus-outline: none;\n --font-size: 0.9em;\n\n display: block;\n}\n\n.menu {\n font-size: var(--font-size, 0.9em);\n overscroll-behavior: none;\n min-width: var(--width);\n position: relative;\n\n &:focus {\n outline: none;\n }\n}\n\n::slotted(:not(nano-nav-item):not(nano-option):not(hr):not(slot)) {\n @include padding(\n var(--padding-top),\n var(--padding-end),\n var(--padding-bottom),\n var(--padding-start)\n );\n\n display: block;\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Method,\n h,\n Host,\n Element,\n Prop,\n Listen,\n} from '@stencil/core';\nimport {\n getTextContent,\n getDirectChildren,\n getActiveElement,\n} from '../../utils';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\ntype ValidElement = HTMLNanoNavItemElement \| HTMLNanoOptionElement;\ntype NNI = HTMLNanoNavItemElement;\n\n/*\n Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.\n * Manages focus state / active.\n * @slot - The menu's content; `nano-option`, `nano-nav-item` elements as well as <hr> and more.\n /\n@Component({\n tag: 'nano-menu',\n styleUrl: 'menu.scss',\n shadow: true,\n})\nexport class Menu {\n private ignoreMouseEvents = false;\n private ignoreMouseTimeout: any;\n private menu: HTMLElement;\n private typeToSelect = '';\n private typeToSelectTimeout: any;\n\n @Element() private el: HTMLNanoMenuElement;\n\n // Public API\n\n /* get the focus state of the menu @readonly /\n @Prop()\n get hasFocus() {\n return this._hasFocus;\n }\n private _hasFocus = false;\n\n /* changes the role of the underlying control - sometimes required for semantics /\n @Prop() type: 'menu' \| 'listbox' = 'menu';\n\n /* an accessible label /\n @Prop() label: string;\n\n // Events\n\n /* Emitted when the menu gains focus. /\n @Event() nanoFocus: EventEmitter;\n\n /* Emitted when the menu loses focus. /\n @Event() nanoBlur: EventEmitter;\n\n /* Emitted when a menu item is selected. /\n @Event() nanoSelect: EventEmitter<\n HTMLNanoOptionElement \| HTMLNanoNavItemElement\n >;\n\n // Public Methods\n\n /* Sets focus on the menu. /\n @Method()\n async setFocus() {\n if (this.menu?.focus) this.menu.focus({ preventScroll: true });\n }\n\n /* Removes focus from the menu. /\n @Method()\n async removeFocus() {\n if (this.menu?.blur) this.menu.blur();\n }\n\n /* Sets the current active item /\n @Method()\n async showActiveElement() {\n if (this.selectedItem)\n this.selectedItem.scrollIntoView({ block: 'nearest' });\n }\n\n /* Removes any active item's state */\n @Method()\n async resetActiveItem() {\n this.getItems\n .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n .map((i) => i.setAttribute('tabindex', '-1'));\n }\n\n // Private methods\n\n get getItems() {\n let items: ValidElement[];\n let opened = this.el.querySelectorAll('nano-nav-item.secondary-open');\n if (opened.length) {\n const ctx = opened[opened.length - 1] as HTMLNanoNavItemElement;\n items = Array.from(ctx.querySelectorAll('nano-nav-item, nano-option'));\n } else {\n items = getDirectChildren(\n this.el,\n 'nano-nav-item, nano-option',\n 'slot'\n ) as ValidElement[];\n }\n return items.filter((el) => !el.disabled && !el.hidden);\n }\n\n get activeItem() {\n const activeElement = getActiveElement();\n return this.getItems.find(\n (i) =>\n i.getAttribute('tabindex') === '0' \|\|\n i === activeElement \|\|\n i.classList.contains('has-focus')\n );\n }\n\n get selectedItem() {\n const activeElement = getActiveElement();\n return this.getItems.find((i) => i.selected \|\| i === activeElement);\n }\n\n private async setActiveFocusItem(item?: ValidElement, focus = true) {\n const items = this.getItems;\n let activeItem =\n !item \|\| item.disabled ? items.find((i) => i.selected) \|\| items[0] : item;\n\n items\n .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n .map((i: HTMLNanoOptionElement) =>\n i.setAttribute('tabindex', i === activeItem ? '0' : '-1')\n );\n\n if (!focus) return;\n\n if (activeItem) {\n (activeItem as NNI).setFocus\n ? (activeItem as NNI).setFocus()\n : activeItem.focus();\n } else this.menu.focus();\n }\n\n // Event Handlers\n\n @Listen('mousedown', { target: 'body' })\n @Listen('keydown')\n handleBlur(e: KeyboardEvent \| MouseEvent) {\n if (!this.hasFocus) return;\n\n const kev = e as KeyboardEvent;\n let found: boolean;\n\n if (kev.key) {\n if (kev.key !== 'Tab') return;\n found =\n getActiveElement() &&\n getActiveElement().closest(this.el.tagName.toLowerCase()) === this.el;\n } else found = !!e.composedPath().find((el) => el === this.el);\n\n if (!found) {\n this.resetActiveItem();\n this._hasFocus = false;\n this.nanoBlur.emit();\n }\n }\n\n private handleFocus = () => {\n this.setActiveFocusItem(this.selectedItem \|\| this.getItems[0]);\n\n this._hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private handleClick = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n const item = target.closest('nano-nav-item');\n\n if (item && !item.disabled) {\n this.nanoSelect.emit(item);\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the\n // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives\n // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.\n clearTimeout(this.ignoreMouseTimeout);\n this.ignoreMouseTimeout = setTimeout(\n () => (this.ignoreMouseEvents = false),\n 500\n );\n this.ignoreMouseEvents = true;\n\n // Make a selection when pressing enter\n switch (event.key) {\n case ' ':\n if (this.activeItem) this.activeItem.click();\n break;\n case 'ArrowDown':\n case 'ArrowUp':\n case 'PageDown':\n case 'PageUp':\n case 'Home':\n case 'End':\n const items = this.getItems;\n const selectedItem = this.activeItem;\n let index = items.indexOf(selectedItem);\n\n if (items.length) {\n event.preventDefault();\n\n if (event.key === 'ArrowDown') {\n index++;\n } else if (event.key === 'ArrowUp') {\n index--;\n } else if (event.key === 'Home' \|\| event.key === 'PageUp') {\n index = 0;\n } else if (event.key === 'End' \|\| event.key === 'PageDown') {\n index = items.length - 1;\n }\n\n if (index < 0) index = items.length - 1;\n if (index > items.length - 1) index = 0;\n\n this.setActiveFocusItem(items[index]);\n if (items[index]) items[index].scrollIntoView({ block: 'nearest' });\n return;\n }\n break;\n }\n\n // Handle type-to-search behavior when non-control characters are entered\n if (event.key === ' ' \|\| /^[a-z0-9]+$/i.test(event.key)) {\n clearTimeout(this.typeToSelectTimeout);\n this.typeToSelectTimeout = setTimeout(\n () => (this.typeToSelect = ''),\n 750\n );\n this.typeToSelect += event.key;\n\n const items = this.getItems;\n for (const item of items) {\n const slot = item.shadowRoot.querySelector(\n 'slot:not([name])'\n ) as HTMLSlotElement;\n const label = getTextContent(slot).toLowerCase().trim();\n if (\n label.substring(0, this.typeToSelect.length) === this.typeToSelect\n ) {\n this.setActiveFocusItem(item);\n break;\n }\n }\n }\n };\n\n private handleMouseOver = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n const item =\n target.closest('nano-nav-item') \|\| target.closest('nano-option');\n\n if (item && !this.ignoreMouseEvents) {\n this.setActiveFocusItem(item);\n }\n };\n\n // Component Lifecycle\n\n render() {\n return (\n <Host\n class={{\n legacy: !CANSHADOW,\n }}\n >\n <div\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n onMouseOver={this.handleMouseOver}\n onFocus={this.handleFocus}\n aria-label={this.label ? this.label : undefined}\n role={this.type}\n ref={(el) => (this.menu = el)}\n part=\"base\"\n class={{\n menu: true,\n ['menu--' + this.type]: true,\n 'menu--has-focus': this.hasFocus,\n }}\n tabIndex={-1}\n >\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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":["@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n /*\n @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --border-color: defaults to #{$layer-border-color};\n * @prop --border-width: defaults to #{$layer-border-width};\n * @prop --background: defaults to #{$layer-bg-color};\n * @prop --tint-color: defaults to var(--nano-color-base, #{nano-color(primary, base)});\n * @prop --icon-size: defaults to 1.5rem;\n * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n * @prop --close-button-color: defaults to #{$color-mediumgrey} ;\n /\n\n --border-radius: #{$layer-border-radius};\n --border-color: #{$layer-border-color};\n --border-width: #{$layer-border-width};\n --background: #{$layer-bg-color};\n --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n --icon-size: 2rem;\n --scrim-color: #{$layer-overlay-dark};\n --close-button-color: #{$color-palegrey};\n\n display: block;\n}\n\n:host(.nano-color) {\n --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n}\n\n.alert {\n position: relative;\n background-color: var(--background);\n border: solid var(--border-width) var(--border-color);\n border-top-width: 4px;\n border-top-color: var(--tint-color);\n border-radius: var(--border-radius);\n opacity: 0;\n transform: scale(0.9);\n transition:\n #{$transition-medium} opacity ease,\n #{$transition-fast} transform ease;\n\n &:focus {\n outline: none;\n }\n\n &:not(.alert--showing) {\n @include hidden;\n }\n\n &--open {\n opacity: 1;\n transform: none;\n }\n\n &--toasty,\n &--modal {\n box-shadow: #{$layer-shadow-large};\n margin: #{$spacing-medium};\n }\n}\n\n.alert__content {\n display: flex;\n align-items: stretch;\n}\n\n.alert__modal-wrap {\n position: fixed;\n display: flex;\n align-items: center;\n justify-content: center;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: #{$layer-index-alert};\n}\n\n.alert__message {\n flex: 1 1 auto;\n padding: #{$spacing-medium};\n overflow: hidden;\n line-height: 1.6;\n}\n\n.alert__close {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: 1.1em;\n\n @include padding(0, #{$spacing-medium}, 0, 0);\n\n --color: var(--close-button-color);\n}\n\n.alert__footer {\n padding: 0 #{$spacing-small} 0;\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n align-items: center;\n\n ::slotted(),\n &::slotted() {\n flex: 1;\n margin: 0 #{$spacing-small} #{$spacing-medium} !important;\n }\n}\n\n.alert__overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: var(--scrim-color);\n opacity: 0;\n transition: #{$transition-fast} opacity;\n z-index: #{$layer-index-alert};\n backdrop-filter: blur(#{$layer-overlay-blur});\n\n &--open {\n opacity: 1;\n }\n}\n\n.alert__icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--icon-size);\n\n &::slotted() {\n color: var(--tint-color);\n margin-left: #{$spacing-medium};\n }\n}\n\n.alert__icon ::slotted() {\n color: var(--tint-color);\n\n @include margin(0, 0, 0, #{$spacing-medium});\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n VNode,\n} from '@stencil/core';\nimport { Color } from '../../interface';\nimport Modal from '../../utils/modal';\nimport {\n createColorClasses,\n lockBodyScrolling,\n raf,\n unlockBodyScrolling,\n} from '../../utils';\n\nconst toastStackTr = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--tr',\n});\nconst toastStackTl = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--tl',\n});\nconst toastStackBl = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--bl',\n});\nconst toastStackBr = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--br',\n});\n\n/\n Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.\n * @slot - The alert's content.\n * @slot icon - An icon to show in the alert.\n * @slot footer - Place items at the bottom of the alert. Best used with `button` elements - esp when used as with the `alert()` method.\n /\n@Component({\n tag: 'nano-alert',\n styleUrl: 'alert.scss',\n shadow: true,\n})\nexport class Alert implements ComponentInterface {\n private autoHideTimeout: ReturnType<typeof setTimeout>;\n private panel: HTMLElement;\n private overlay: HTMLElement;\n private modal: Modal;\n private originalTrigger: HTMLElement \| null;\n private addedTransEnd = false;\n private goingToHide = false;\n private goingToShow = false;\n\n @State() isModal = false;\n @State() isToast = false;\n @State() isShowing = false;\n @State() label: string;\n\n @Element() host: HTMLNanoAlertElement;\n\n /* Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /* Set to true to make the alert closable. /\n @Prop({ reflect: true }) closable = false;\n\n /* The color to use from the application's color palette. /\n @Prop({ reflect: true }) color?: Color;\n\n /\n The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n /\n @Prop() duration = Infinity;\n\n @Watch('duration')\n handleDurationChange() {\n this.restartAutoHide();\n }\n\n /* Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event() nanoShow: EventEmitter;\n\n /* Emitted after the alert opens and all transitions are complete. /\n @Event() nanoAfterShow: EventEmitter;\n\n /* Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event() nanoHide: EventEmitter;\n\n /* Emitted after the alert closes and all transitions are complete. /\n @Event() nanoAfterHide: EventEmitter;\n\n /* Shows the alert. /\n @Method()\n async show() {\n if (this.goingToShow) {\n return;\n }\n const nanoShow = this.nanoShow.emit();\n if (nanoShow.defaultPrevented) {\n this.open = false;\n return false;\n }\n\n this.host.hidden = false;\n this.goingToShow = true;\n this.open = true;\n raf(() => {\n this.isShowing = true;\n this.goingToShow = false;\n });\n\n if (this.duration < Infinity) {\n clearTimeout(this.autoHideTimeout);\n this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n }\n }\n\n /* Hides the alert /\n @Method()\n async hide() {\n if (this.goingToHide) {\n return;\n }\n const nanoHide = this.nanoHide.emit();\n\n if (nanoHide.defaultPrevented) {\n this.open = true;\n return false;\n }\n this.goingToHide = true;\n this.open = false;\n\n raf(() => (this.goingToHide = false));\n clearTimeout(this.autoHideTimeout);\n }\n\n /\n Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n * calling this method again. The returned promise will resolve after the alert is hidden.\n \n @param position options are tr (top-right - default), tl (top-left), br (bottom-right), bl (bottom-left)\n * @returns a promise which will resolve after the alert has hidden\n /\n @Method()\n async toast(position: 'tr' \| 'tl' \| 'bl' \| 'br' = 'tr') {\n this.isToast = true;\n return new Promise<void>((resolve) => {\n let toastStack: HTMLElement;\n switch (position) {\n case 'tl':\n toastStack = toastStackTl;\n break;\n case 'bl':\n toastStack = toastStackBl;\n break;\n case 'br':\n toastStack = toastStackBr;\n break;\n default:\n toastStack = toastStackTr;\n break;\n }\n\n if (!toastStack.parentElement) {\n document.body.appendChild(toastStack);\n }\n\n toastStack.appendChild(this.host);\n this.connectedCallback();\n this.show();\n\n 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('nanoafterhide', 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 raf(() => {\n this.show();\n });\n\n const onOpen = () => raf(() => 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('nanoaftershow', onOpen, { once: true });\n\n this.host.addEventListener('nanoAfterHide', onClose, {\n once: true,\n });\n this.host.addEventListener('nanoafterhide', 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.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-top-width: 4px;\n border-top-color: var(--tint-color);\n border-radius: var(--border-radius);\n opacity: 0;\n transform: scale(0.9);\n transition:\n #{$transition-medium} opacity ease,\n #{$transition-fast} transform ease;\n\n &:focus {\n outline: none;\n }\n\n &:not(.alert--showing) {\n @include hidden;\n }\n\n &--open {\n opacity: 1;\n transform: none;\n }\n\n &--toasty,\n &--modal {\n box-shadow: #{$layer-shadow-large};\n margin: #{$spacing-medium};\n }\n}\n\n.alert__content {\n display: flex;\n align-items: stretch;\n}\n\n.alert__modal-wrap {\n position: fixed;\n display: flex;\n align-items: center;\n justify-content: center;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: #{$layer-index-alert};\n}\n\n.alert__message {\n flex: 1 1 auto;\n padding: #{$spacing-medium};\n overflow: hidden;\n line-height: 1.6;\n}\n\n.alert__close {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: 1.1em;\n\n @include padding(0, #{$spacing-medium}, 0, 0);\n\n --color: var(--close-button-color);\n}\n\n.alert__footer {\n padding: 0 #{$spacing-small} 0;\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n align-items: center;\n\n ::slotted(),\n &::slotted() {\n flex: 1;\n margin: 0 #{$spacing-small} #{$spacing-medium} !important;\n }\n}\n\n.alert__overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: var(--scrim-color);\n opacity: 0;\n transition: #{$transition-fast} opacity;\n z-index: #{$layer-index-alert};\n backdrop-filter: blur(#{$layer-overlay-blur});\n\n &--open {\n opacity: 1;\n }\n}\n\n.alert__icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--icon-size);\n\n &::slotted() {\n color: var(--tint-color);\n margin-left: #{$spacing-medium};\n }\n}\n\n.alert__icon ::slotted() {\n color: var(--tint-color);\n\n @include margin(0, 0, 0, #{$spacing-medium});\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n VNode,\n} from '@stencil/core';\nimport { Color } from '../../interface';\nimport Modal from '../../utils/modal';\nimport {\n createColorClasses,\n lockBodyScrolling,\n raf,\n unlockBodyScrolling,\n} from '../../utils';\n\nconst toastStackTr = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--tr',\n});\nconst toastStackTl = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--tl',\n});\nconst toastStackBl = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--bl',\n});\nconst toastStackBr = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--br',\n});\n\n/\n Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.\n * @slot - The alert's content.\n * @slot icon - An icon to show in the alert.\n * @slot footer - Place items at the bottom of the alert. Best used with `button` elements - esp when used as with the `alert()` method.\n /\n@Component({\n tag: 'nano-alert',\n styleUrl: 'alert.scss',\n shadow: true,\n})\nexport class Alert implements ComponentInterface {\n private autoHideTimeout: ReturnType<typeof setTimeout>;\n private panel: HTMLElement;\n private overlay: HTMLElement;\n private modal: Modal;\n private originalTrigger: HTMLElement \| null;\n private addedTransEnd = false;\n private goingToHide = false;\n private goingToShow = false;\n\n @State() isModal = false;\n @State() isToast = false;\n @State() isShowing = false;\n @State() label: string;\n\n @Element() host: HTMLNanoAlertElement;\n\n /* Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /* Set to true to make the alert closable. /\n @Prop({ reflect: true }) closable = false;\n\n /* The color to use from the application's color palette. /\n @Prop({ reflect: true }) color?: Color;\n\n /\n The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n /\n @Prop() duration = Infinity;\n\n @Watch('duration')\n handleDurationChange() {\n this.restartAutoHide();\n }\n\n /* Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event() nanoShow: EventEmitter;\n\n /* Emitted after the alert opens and all transitions are complete. /\n @Event() nanoAfterShow: EventEmitter;\n\n /* Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event() nanoHide: EventEmitter;\n\n /* Emitted after the alert closes and all transitions are complete. /\n @Event() nanoAfterHide: EventEmitter;\n\n /* Shows the alert. /\n @Method()\n async show() {\n if (this.goingToShow) {\n return;\n }\n const nanoShow = this.nanoShow.emit();\n if (nanoShow.defaultPrevented) {\n this.open = false;\n return false;\n }\n\n this.host.hidden = false;\n this.goingToShow = true;\n this.open = true;\n raf(() => {\n this.isShowing = true;\n this.goingToShow = false;\n });\n\n if (this.duration < Infinity) {\n clearTimeout(this.autoHideTimeout);\n this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n }\n }\n\n /* Hides the alert /\n @Method()\n async hide() {\n if (this.goingToHide) {\n return;\n }\n const nanoHide = this.nanoHide.emit();\n\n if (nanoHide.defaultPrevented) {\n this.open = true;\n return false;\n }\n this.goingToHide = true;\n this.open = false;\n\n raf(() => (this.goingToHide = false));\n clearTimeout(this.autoHideTimeout);\n }\n\n /\n Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n * calling this method again. The returned promise will resolve after the alert is hidden.\n \n @param position options are tr (top-right - default), tl (top-left), br (bottom-right), bl (bottom-left)\n * @returns a promise which will resolve after the alert has hidden\n /\n @Method()\n async toast(position: 'tr' \| 'tl' \| 'bl' \| 'br' = 'tr') {\n this.isToast = true;\n return new Promise<void>((resolve) => {\n let toastStack: HTMLElement;\n switch (position) {\n case 'tl':\n toastStack = toastStackTl;\n break;\n case 'bl':\n toastStack = toastStackBl;\n break;\n case 'br':\n toastStack = toastStackBr;\n break;\n default:\n toastStack = toastStackTr;\n break;\n }\n\n if (!toastStack.parentElement) {\n document.body.appendChild(toastStack);\n }\n\n toastStack.appendChild(this.host);\n this.connectedCallback();\n this.show();\n\n 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('nanoafterhide', 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 raf(() => {\n this.show();\n });\n\n const onOpen = () => raf(() => 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('nanoaftershow', onOpen, { once: true });\n\n this.host.addEventListener('nanoAfterHide', onClose, {\n once: true,\n });\n this.host.addEventListener('nanoafterhide', 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.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}

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

	@@ -1 +1 @@
1	- {"file":"nano-checkbox.js","mappings":"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","names":[],"sources":["./src/components/checkbox/checkbox.scss?tag=nano-checkbox&encapsulation=scoped","./src/components/checkbox/checkbox.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-invalid-style: Control box-shadow when invalid. Defaults to to #{$control-invalid-style};\n * @prop --focus-shadow: Control focus box-shadow. Defaults to to #{$control-focus-style};\n * @prop --padding: padding around radio and checkbox controls. Defaults to initial;\n * @prop --control-padding: padding around tag and segmented controls text. Various defaults.\n\n * @prop --check-bg-color: Initial Bg color of radio / checkbox controls. Changes for [checked] and [disabled] states. Defaults to #{$color-white};\n * @prop --check-border-style: Initial border style. Defaults to 1px solid #{$color-palegrey};\n * @prop --check-checked-bg-color: Checked bg of controls (not tag). Defaults to #{$color-darkgrey};\n * @prop --check-checked-border-color: Checked border color of radio / checkbox controls. Defaults to #{$color-darkgrey};\n * @prop --check-checked-higlight-color: Checked forgrdound / icon color. Defaults to #{$color-white};\n * @prop --check-base-size: Relative scaling size for check controls. Defaults to to inherit;\n\n * @prop --cb-border-radius: Checkbox border radius. Defaults to to 2px and 5px on [has-focus];\n * @prop --radio-border-radius: Radio border radius. Defaults to to 50%;\n * @prop --tagbox-rgb: an rba list for tags which can be used to generate --tagbox-border-color and --tagbox-bg-color. Defaults to #{color-to-rgb-list($color-lightblue)};\n * @prop --tagbox-border-color: Defaults to rgba(var(--tagbox-rgb), .5);\n * @prop --tagbox-bg-color: Defaults to rgba(var(--tagbox-rgb), .1);\n * @prop --segment-color: Segment, unselected text color. (selected color is --check-checked-higlight-color). Defaults to #{$color-blue};\n * @prop --segment-border-radius: Defaults to 3px;\n * @prop --segment-shadow: 0 1px 4px rgba(0,0,0,.2);\n /\n\n --focus-shadow: #{$control-focus-style};\n --invalid-shadow: #{$control-invalid-style};\n --padding: initial;\n --check-bg-color: #{$color-white};\n --check-border-style: 1px solid #{$color-palegrey};\n --check-checked-bg-color: #{$color-darkgrey};\n --check-checked-border-color: #{$color-darkgrey};\n --check-checked-higlight-color: #{$color-white};\n --check-base-size: inherit;\n\n // type specific\n\n --tagbox-rgb: #{color-to-rgb-list($color-lightblue)};\n --tagbox-border-color: rgba(var(--tagbox-rgb), 0.5);\n --tagbox-bg-color: rgba(var(--tagbox-rgb), 0.2);\n --tagbox-border-radius: 0;\n --segment-color: #{$color-blue};\n --segment-border-radius: 3px;\n --segment-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);\n --cb-border-radius: 2px;\n --radio-border-radius: 50%;\n\n display: inline-block;\n max-width: 100%;\n\n {\n box-sizing: inherit;\n }\n}\n\n:host([type='tag']) {\n text-transform: uppercase;\n\n --control-padding: 0.2rem 1rem;\n}\n\n:host([type='segment']) {\n --check-border-style: none;\n --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host([type='segment-pill']) {\n --check-border-style: 1px solid #{rgba($color-palegrey, 0.5)};\n --segment-border-radius: 5px;\n --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host(.nano-color) {\n --tagbox-rgb: var(--nano-color-base-rgb);\n --focus-shadow: #{$control-focus-size} var(--nano-color-shade);\n}\n\n:host([checked]:not([checked='false'])) {\n --tagbox-border-color: rgba(var(--tagbox-rgb), 0.8);\n --tagbox-bg-color: rgba(var(--tagbox-rgb), 0.5);\n}\n\n:host([has-focus]:not([has-focus='false'])) {\n --cb-border-radius: 5px;\n}\n\n:host([disabled]:not([disabled='false'])) {\n opacity: 0.7;\n\n --tagbox-rgb: #{color-to-rgb-list($color-mediumgrey)};\n --check-bg-color: #{rgba($color-mediumgrey, 0.5)};\n --check-checked-bg-color: #{rgba($color-mediumgrey, 0.5)};\n --segment-color: #{$color-darkgrey};\n}\n\n.nanocb {\n padding: var(--padding);\n cursor: pointer;\n display: flex;\n align-items: center;\n line-height: 1.2;\n position: relative;\n\n &__input {\n @include border-radius(var(--cb-border-radius, 3px));\n\n font-size: var(--check-base-size);\n position: relative;\n height: 1.5em;\n width: 1.5em;\n min-width: 1.5em;\n border: var(--check-border-style);\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);\n\n &::before {\n @include border-radius(var(--cb-border-radius));\n\n position: absolute;\n content: '';\n left: 0.625em;\n top: 0.625em;\n width: 0;\n height: 0;\n border: 2px solid var(--check-checked-higlight-color);\n transform: scale(0);\n }\n\n &--radio {\n @include border-radius(var(--radio-border-radius));\n\n background-color: var(--check-bg-color);\n }\n\n &--checkbox {\n background-color: var(--check-bg-color);\n\n &::after {\n @include border-radius(var(--cb-border-radius));\n\n position: absolute;\n content: '';\n left: 0.75em;\n top: 0.75em;\n height: 0;\n width: 0;\n border: solid var(--check-checked-higlight-color);\n border-width: 0 0.1875em 0.1875em 0;\n transform: rotate(0deg) scale(0);\n opacity: 1;\n transition: all 0.15s ease-out;\n\n .nanocb--indeterminate & {\n border-width: 0 0 0.1875em 0;\n }\n }\n }\n\n &--segment,\n &--segment-pill {\n @include visually-hide();\n\n &::before {\n display: none;\n }\n }\n\n &--tag {\n @include visually-hide();\n\n &::before {\n display: none;\n }\n }\n }\n\n &--invalid:not(.nanocb--focused) {\n .nanocb__input {\n box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow);\n\n &--tag + .nanocb__label,\n &--segment + .nanocb__label,\n &--segment-pill + .nanocb__label {\n box-shadow: var(--invalid-shadow);\n z-index: 1;\n }\n }\n }\n\n input {\n @include visually-hide();\n\n &:focus ~ .nanocb__input {\n box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow);\n }\n\n &.focus-visible:focus ~ .nanocb__input {\n &--tag + .nanocb__label,\n &--segment + .nanocb__label,\n &--segment-pill + .nanocb__label {\n box-shadow: var(--focus-shadow);\n z-index: 1;\n }\n }\n\n &:checked ~ .nanocb__input {\n @include border-radius(var(--cb-border-radius));\n\n background-color: var(--check-checked-bg-color);\n transform: rotate(0deg) scale(1);\n opacity: 1;\n border: 0.125em solid var(--check-checked-border-color);\n\n &--segment + .nanocb__label,\n &--segment-pill + .nanocb__label {\n color: var(--check-checked-higlight-color);\n background-color: var(--check-checked-bg-color);\n box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.2);\n }\n\n &--radio {\n border-radius: var(--radio-border-radius);\n border-width: 0.3125em;\n background-color: var(--check-checked-higlight-color);\n\n &::after {\n border: solid var(--check-checked-border-color);\n border-width: 0 0.125em 0.125em 0;\n opacity: 0;\n }\n\n &::before {\n border-radius: var(--radio-border-radius);\n }\n }\n\n &--checkbox {\n &::after {\n transform: rotate(45deg) scale(1);\n opacity: 1;\n left: 0.475em;\n top: 0.1875em;\n width: 0.375em;\n height: 0.75em;\n border-radius: 0;\n }\n }\n\n &--tag + .nanocb__label::after {\n transform: rotate(45deg);\n }\n }\n\n &:indeterminate ~ .nanocb__input--checkbox {\n @include border-radius(var(--input-border-radius, 5px));\n\n background-color: var(--check-checked-bg-color);\n transform: rotate(0deg) scale(1);\n opacity: 1;\n border: 0.125em solid var(--check-checked-bg-color);\n\n &::after {\n transform: scale(1);\n opacity: 1;\n left: 0.3125em;\n top: 0;\n width: 0.7em;\n height: 0.7em;\n border-radius: 0;\n }\n }\n }\n\n &__label {\n @include padding(0, 0, 0, 10px);\n\n display: flex;\n align-items: center;\n font-stretch: condensed;\n line-height: 1;\n flex: 1;\n justify-content: space-between;\n\n &--segment,\n &--segment-pill {\n border: var(--check-border-style);\n border-radius: var(--segment-border-radius);\n box-shadow: var(--segment-shadow);\n display: inline-flex;\n padding: var(--control-padding);\n background: var(--check-bg-color);\n color: var(--segment-color);\n align-items: center;\n width: 100%;\n }\n\n &--segment-pill {\n // first\n @include ltr-host(':first-of-type') {\n border-radius:\n var(--segment-border-radius) 0 0\n var(--segment-border-radius);\n border-right: none;\n }\n\n @include rtl-host(':first-of-type') {\n border-radius:\n 0 var(--segment-border-radius)\n var(--segment-border-radius) 0;\n border-left: none;\n }\n // middle\n @include ltr-host(':not(:last-of-type):not(:first-of-type)') {\n border-radius: 0 0 0 0;\n border-right: none;\n }\n\n @include rtl-host(':not(:last-of-type):not(:first-of-type)') {\n border-left: none;\n }\n // last\n @include ltr-host(':last-of-type') {\n border-radius:\n 0 var(--segment-border-radius)\n var(--segment-border-radius) 0;\n }\n\n @include rtl-host(':last-of-type') {\n border-radius:\n var(--segment-border-radius) 0 0\n var(--segment-border-radius);\n }\n // single\n @include host(':first-of-type:last-of-type') {\n border-radius: var(--segment-border-radius);\n border: var(--check-border-style);\n }\n }\n\n &--tag {\n letter-spacing: 2px;\n font-weight: 500;\n font-size: 0.65em;\n line-height: 1.4;\n padding: var(--control-padding);\n border: 2px solid #b5aea7;\n border-color: var(--tagbox-border-color);\n background-color: var(--tagbox-bg-color);\n transition: all 0.2s;\n border-radius: var(--cb-border-radius);\n width: 100%;\n\n &::after {\n content: '+';\n\n @include margin(0, 0, 0, 0.3125em);\n\n font-weight: 200;\n position: relative;\n font-family: inherit;\n font-size: 1.8em;\n display: inline-block;\n transform: rotate(0deg);\n transform-origin: center;\n }\n\n span {\n display: block;\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n Event,\n EventEmitter,\n h,\n ComponentInterface,\n State,\n Watch,\n Method,\n Element,\n Host,\n} from '@stencil/core';\nimport { CheckboxChangeEventDetail, ControlValidity } from '../../interface';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils';\nimport { focusVisible } from '../../utils/focus-visible';\n\nlet checkboxIds = 0;\n\n/*\n `nano-checkbox` is used to let a user choose one or more options from a limited number of options.\n * They appear as checked when activated.\n * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.\n \n @slot - if you do not set a label attribute, you can use this slot for more complex markup\n /\n@Component({\n tag: 'nano-checkbox',\n styleUrl: 'checkbox.scss',\n scoped: true,\n})\nexport class Checkbox implements ComponentInterface {\n private inputId = `nano-cb-${checkboxIds++}`;\n private input: HTMLInputElement;\n private shouldReport = false;\n\n @Element() private host: HTMLNanoCheckboxElement;\n\n @State() _invalid = false;\n @State() inputType: 'checkbox' \| 'radio' = 'checkbox';\n\n /* @internal /\n @Prop({ mutable: true, reflect: true }) hasFocus = false;\n\n /\n checked property that can be used to get/set the value. accepts only boolean values\n /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n @Watch('checked')\n async handleCheckedChange() {\n this.input.checked = this.checked;\n\n if (this.inputType === 'radio' && this.name && this.checked) {\n let form = this.host.closest('form');\n let radios: Element[];\n if (form) {\n radios = Array.from(\n form.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n );\n } else {\n radios = Array.from(\n document.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n ).filter((radio) => !radio.closest('form'));\n }\n radios.map((el: HTMLNanoCheckboxElement) => {\n if (el !== this.host) el.checked = false;\n });\n }\n this.nanoChange.emit({ value: this.value, checked: this.checked });\n }\n\n /\n If `true`, the user cannot interact with the checkbox.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\n * it's only present when `checked` is true.\n /\n @Prop() value: string = 'on';\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string;\n\n /\n Set to true to make the field required.\n /\n @Prop() required: boolean = false;\n\n /\n Controls the underlying field type and style.\n /\n @Prop({ reflect: true }) type:\n \| 'radio'\n \| 'checkbox'\n \| 'tag'\n \| 'segment'\n \| 'segment-pill' = 'checkbox';\n\n @Watch('type')\n typeChange() {\n if (this.type === 'checkbox' \|\| this.type === 'tag')\n this.inputType = 'checkbox';\n else this.inputType = 'radio';\n }\n\n /\n label property that can be used to set the label text. Alternatively you may use a label slot.\n /\n @Prop() label?: string;\n\n /\n If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")\n /\n @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n\n @Watch('indeterminate')\n handleIndeterminateChange() {\n this.checked = false;\n this.input.indeterminate = this.indeterminate;\n }\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 if (!this.shouldReport) return false;\n return !this.input.validity.valid;\n }\n\n /\n Color to use from your application's color palette.\n /\n @Prop() color?: Color;\n\n /\n Emited when the checkbox is toggled\n /\n @Event() nanoChange: EventEmitter<CheckboxChangeEventDetail>;\n\n /\n Emited when the checkbox is focused\n /\n @Event() nanoFocus: EventEmitter;\n\n /\n Emited when the checkbox is blurred\n /\n @Event() nanoBlur: EventEmitter;\n\n // public methods\n\n /\n Returns the native input control\n /\n @Method()\n async getInputElement() {\n if (this.input) return this.input;\n }\n\n /\n Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `Promise<{ isValid: boolean, errorMessage: string }>`\n /\n @Method()\n async reportValidity(\n validateFirst: boolean = false\n ): Promise<ControlValidity> {\n if (validateFirst) {\n this.shouldReport = true;\n this._invalid = !this.input.reportValidity();\n }\n return {\n isValid: !this.invalid,\n errorMessage: this.input.validationMessage,\n };\n }\n\n /\n Sets a custom validation message.\n * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`\n /\n @Method()\n async setError(message: string) {\n if (!this.input) return;\n\n this._invalid = !!message.length;\n this.input.setCustomValidity(message);\n }\n\n /\n Sets focus on the checkbox.\n /\n @Method()\n async setFocus() {\n if (this.input) {\n this.input.focus();\n focusVisible.force(this.input);\n }\n }\n\n /\n Removes focus from the checkbox.\n /\n @Method()\n async removeFocus() {\n if (this.input) {\n this.input.blur();\n focusVisible.force(this.input, false);\n }\n }\n\n // private handlers\n\n private handleInvalid = (ev: Event) => {\n this.shouldReport = true;\n this._invalid = !(ev.target as HTMLInputElement).validity.valid;\n };\n\n private handleChange = (ev: InputEvent) => {\n this.checked = (ev.target as HTMLInputElement).checked;\n this.indeterminate = false;\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n / Although many radio components can be 'checked',\n the underlying control may not be. Check */\n private isRadioChecked() {\n setTimeout(() => (this.checked = this.input.checked), 20);\n }\n\n // Stencil hooks\n\n componentWillLoad() {\n this.typeChange();\n }\n\n componentDidLoad() {\n this.input.indeterminate = this.indeterminate;\n this.isRadioChecked();\n focusVisible.observe(this.input);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.input);\n }\n\n render() {\n const labelId = this.inputId + '-lbl';\n let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <Host\n class={{ ...createColorClasses(this.color) }}\n dir={isRtl ? 'rtl' : null}\n >\n <label\n class={{\n nanocb: true,\n 'nanocb--checked': this.checked,\n 'nanocb--invalid': this.invalid,\n 'nanocb--disabled': this.disabled,\n 'nanocb--focused': this.hasFocus,\n 'nanocb--indeterminate': this.indeterminate,\n }}\n htmlFor={this.inputId}\n >\n <input\n type={this.inputType}\n name={this.name}\n required={this.required}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-labelledby={labelId}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onChange={this.handleChange}\n ref={(input) => (this.input = input)}\n id={this.inputId}\n onInvalid={this.handleInvalid}\n />\n <span class={'nanocb__input nanocb__input--' + this.type}></span>\n\n <div id={labelId} class={'nanocb__label nanocb__label--' + this.type}>\n {this.label && !!this.label.length && <span>{this.label}</span>}\n <span hidden={this.label && !!this.label.length}>\n <slot />\n </span>\n </div>\n </label>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nano-checkbox.js","mappings":"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","names":[],"sources":["./src/components/checkbox/checkbox.scss?tag=nano-checkbox&encapsulation=scoped","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n\n:host {\n /*\n @prop --control-invalid-style: Control box-shadow when invalid. Defaults to to #{$control-invalid-style};\n * @prop --focus-shadow: Control focus box-shadow. Defaults to to #{$control-focus-style};\n * @prop --padding: padding around radio and checkbox controls. Defaults to initial;\n * @prop --control-padding: padding around tag and segmented controls text. Various defaults.\n\n * @prop --check-bg-color: Initial Bg color of radio / checkbox controls. Changes for [checked] and [disabled] states. Defaults to #{map.get($colors, white)};\n * @prop --check-border-style: Initial border style. Defaults to 1px solid #{map.get($colors, palegrey)};\n * @prop --check-checked-bg-color: Checked bg of controls (not tag). Defaults to #{map.get($colors, darkgrey)};\n * @prop --check-checked-border-color: Checked border color of radio / checkbox controls. Defaults to #{map.get($colors, darkgrey)};\n * @prop --check-checked-higlight-color: Checked forgrdound / icon color. Defaults to #{map.get($colors, white)};\n * @prop --check-base-size: Relative scaling size for check controls. Defaults to to inherit;\n\n * @prop --cb-border-radius: Checkbox border radius. Defaults to to 2px and 5px on [has-focus];\n * @prop --radio-border-radius: Radio border radius. Defaults to to 50%;\n * @prop --tagbox-rgb: an rba list for tags which can be used to generate --tagbox-border-color and --tagbox-bg-color. Defaults to #{color-to-rgb-list(map.get($colors, lightblue))};\n * @prop --tagbox-border-color: Defaults to rgba(var(--tagbox-rgb), .5);\n * @prop --tagbox-bg-color: Defaults to rgba(var(--tagbox-rgb), .1);\n * @prop --segment-color: Segment, unselected text color. (selected color is --check-checked-higlight-color). Defaults to #{map.get($colors, blue)};\n * @prop --segment-border-radius: Defaults to 3px;\n * @prop --segment-shadow: 0 1px 4px rgba(0,0,0,.2);\n /\n\n --focus-shadow: #{$control-focus-style};\n --invalid-shadow: #{$control-invalid-style};\n --padding: initial;\n --check-bg-color: #{map.get($colors, white)};\n --check-border-style: 1px solid #{map.get($colors, palegrey)};\n --check-checked-bg-color: #{map.get($colors, darkgrey)};\n --check-checked-border-color: #{map.get($colors, darkgrey)};\n --check-checked-higlight-color: #{map.get($colors, white)};\n --check-base-size: inherit;\n\n // type specific\n\n --tagbox-rgb: #{color-to-rgb-list(map.get($colors, lightblue))};\n --tagbox-border-color: rgba(var(--tagbox-rgb), 0.5);\n --tagbox-bg-color: rgba(var(--tagbox-rgb), 0.2);\n --tagbox-border-radius: 0;\n --segment-color: #{map.get($colors, blue)};\n --segment-border-radius: 3px;\n --segment-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);\n --cb-border-radius: 2px;\n --radio-border-radius: 50%;\n\n display: inline-block;\n max-width: 100%;\n\n {\n box-sizing: inherit;\n }\n}\n\n:host([type='tag']) {\n text-transform: uppercase;\n\n --control-padding: 0.2rem 1rem;\n}\n\n:host([type='segment']) {\n --check-border-style: none;\n --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host([type='segment-pill']) {\n --check-border-style: 1px solid #{rgba(map.get($colors, palegrey), 0.5)};\n --segment-border-radius: 5px;\n --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host(.nano-color) {\n --tagbox-rgb: var(--nano-color-base-rgb);\n --focus-shadow: #{$control-focus-size} var(--nano-color-shade);\n}\n\n:host([checked]:not([checked='false'])) {\n --tagbox-border-color: rgba(var(--tagbox-rgb), 0.8);\n --tagbox-bg-color: rgba(var(--tagbox-rgb), 0.5);\n}\n\n:host([has-focus]:not([has-focus='false'])) {\n --cb-border-radius: 5px;\n}\n\n:host([disabled]:not([disabled='false'])) {\n opacity: 0.7;\n\n --tagbox-rgb: #{color-to-rgb-list(map.get($colors, mediumgrey))};\n --check-bg-color: #{rgba(map.get($colors, mediumgrey), 0.5)};\n --check-checked-bg-color: #{rgba(map.get($colors, mediumgrey), 0.5)};\n --segment-color: #{map.get($colors, darkgrey)};\n}\n\n.nanocb {\n padding: var(--padding);\n cursor: pointer;\n display: flex;\n align-items: center;\n line-height: 1.2;\n position: relative;\n\n &__input {\n @include border-radius(var(--cb-border-radius, 3px));\n\n font-size: var(--check-base-size);\n position: relative;\n height: 1.5em;\n width: 1.5em;\n min-width: 1.5em;\n border: var(--check-border-style);\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);\n\n &::before {\n @include border-radius(var(--cb-border-radius));\n\n position: absolute;\n content: '';\n left: 0.625em;\n top: 0.625em;\n width: 0;\n height: 0;\n border: 2px solid var(--check-checked-higlight-color);\n transform: scale(0);\n }\n\n &--radio {\n @include border-radius(var(--radio-border-radius));\n\n background-color: var(--check-bg-color);\n }\n\n &--checkbox {\n background-color: var(--check-bg-color);\n\n &::after {\n @include border-radius(var(--cb-border-radius));\n\n position: absolute;\n content: '';\n left: 0.75em;\n top: 0.75em;\n height: 0;\n width: 0;\n border: solid var(--check-checked-higlight-color);\n border-width: 0 0.1875em 0.1875em 0;\n transform: rotate(0deg) scale(0);\n opacity: 1;\n transition: all 0.15s ease-out;\n\n .nanocb--indeterminate & {\n border-width: 0 0 0.1875em 0;\n }\n }\n }\n\n &--segment,\n &--segment-pill {\n @include visually-hide();\n\n &::before {\n display: none;\n }\n }\n\n &--tag {\n @include visually-hide();\n\n &::before {\n display: none;\n }\n }\n }\n\n &--invalid:not(.nanocb--focused) {\n .nanocb__input {\n box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow);\n\n &--tag + .nanocb__label,\n &--segment + .nanocb__label,\n &--segment-pill + .nanocb__label {\n box-shadow: var(--invalid-shadow);\n z-index: 1;\n }\n }\n }\n\n input {\n @include visually-hide();\n\n &:focus ~ .nanocb__input {\n box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow);\n }\n\n &.focus-visible:focus ~ .nanocb__input {\n &--tag + .nanocb__label,\n &--segment + .nanocb__label,\n &--segment-pill + .nanocb__label {\n box-shadow: var(--focus-shadow);\n z-index: 1;\n }\n }\n\n &:checked ~ .nanocb__input {\n @include border-radius(var(--cb-border-radius));\n\n background-color: var(--check-checked-bg-color);\n transform: rotate(0deg) scale(1);\n opacity: 1;\n border: 0.125em solid var(--check-checked-border-color);\n\n &--segment + .nanocb__label,\n &--segment-pill + .nanocb__label {\n color: var(--check-checked-higlight-color);\n background-color: var(--check-checked-bg-color);\n box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.2);\n }\n\n &--radio {\n border-radius: var(--radio-border-radius);\n border-width: 0.3125em;\n background-color: var(--check-checked-higlight-color);\n\n &::after {\n border: solid var(--check-checked-border-color);\n border-width: 0 0.125em 0.125em 0;\n opacity: 0;\n }\n\n &::before {\n border-radius: var(--radio-border-radius);\n }\n }\n\n &--checkbox {\n &::after {\n transform: rotate(45deg) scale(1);\n opacity: 1;\n left: 0.475em;\n top: 0.1875em;\n width: 0.375em;\n height: 0.75em;\n border-radius: 0;\n }\n }\n\n &--tag + .nanocb__label::after {\n transform: rotate(45deg);\n }\n }\n\n &:indeterminate ~ .nanocb__input--checkbox {\n @include border-radius(var(--input-border-radius, 5px));\n\n background-color: var(--check-checked-bg-color);\n transform: rotate(0deg) scale(1);\n opacity: 1;\n border: 0.125em solid var(--check-checked-bg-color);\n\n &::after {\n transform: scale(1);\n opacity: 1;\n left: 0.3125em;\n top: 0;\n width: 0.7em;\n height: 0.7em;\n border-radius: 0;\n }\n }\n }\n\n &__label {\n @include padding(0, 0, 0, 10px);\n\n display: flex;\n align-items: center;\n font-stretch: condensed;\n line-height: 1;\n flex: 1;\n justify-content: space-between;\n\n &--segment,\n &--segment-pill {\n border: var(--check-border-style);\n border-radius: var(--segment-border-radius);\n box-shadow: var(--segment-shadow);\n display: inline-flex;\n padding: var(--control-padding);\n background: var(--check-bg-color);\n color: var(--segment-color);\n align-items: center;\n width: 100%;\n }\n\n &--segment-pill {\n // first\n @include ltr-host(':first-of-type') {\n border-radius:\n var(--segment-border-radius) 0 0\n var(--segment-border-radius);\n border-right: none;\n }\n\n @include rtl-host(':first-of-type') {\n border-radius:\n 0 var(--segment-border-radius)\n var(--segment-border-radius) 0;\n border-left: none;\n }\n // middle\n @include ltr-host(':not(:last-of-type):not(:first-of-type)') {\n border-radius: 0 0 0 0;\n border-right: none;\n }\n\n @include rtl-host(':not(:last-of-type):not(:first-of-type)') {\n border-left: none;\n }\n // last\n @include ltr-host(':last-of-type') {\n border-radius:\n 0 var(--segment-border-radius)\n var(--segment-border-radius) 0;\n }\n\n @include rtl-host(':last-of-type') {\n border-radius:\n var(--segment-border-radius) 0 0\n var(--segment-border-radius);\n }\n // single\n @include host(':first-of-type:last-of-type') {\n border-radius: var(--segment-border-radius);\n border: var(--check-border-style);\n }\n }\n\n &--tag {\n letter-spacing: 2px;\n font-weight: 500;\n font-size: 0.65em;\n line-height: 1.4;\n padding: var(--control-padding);\n border: 2px solid #b5aea7;\n border-color: var(--tagbox-border-color);\n background-color: var(--tagbox-bg-color);\n transition: all 0.2s;\n border-radius: var(--cb-border-radius);\n width: 100%;\n\n &::after {\n content: '+';\n\n @include margin(0, 0, 0, 0.3125em);\n\n font-weight: 200;\n position: relative;\n font-family: inherit;\n font-size: 1.8em;\n display: inline-block;\n transform: rotate(0deg);\n transform-origin: center;\n }\n\n span {\n display: block;\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n Event,\n EventEmitter,\n h,\n ComponentInterface,\n State,\n Watch,\n Method,\n Element,\n Host,\n} from '@stencil/core';\nimport { CheckboxChangeEventDetail, ControlValidity } from '../../interface';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils';\nimport { focusVisible } from '../../utils/focus-visible';\n\nlet checkboxIds = 0;\n\n/*\n `nano-checkbox` is used to let a user choose one or more options from a limited number of options.\n * They appear as checked when activated.\n * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.\n \n @slot - if you do not set a label attribute, you can use this slot for more complex markup\n /\n@Component({\n tag: 'nano-checkbox',\n styleUrl: 'checkbox.scss',\n scoped: true,\n})\nexport class Checkbox implements ComponentInterface {\n private inputId = `nano-cb-${checkboxIds++}`;\n private input: HTMLInputElement;\n private shouldReport = false;\n\n @Element() private host: HTMLNanoCheckboxElement;\n\n @State() _invalid = false;\n @State() inputType: 'checkbox' \| 'radio' = 'checkbox';\n\n /* @internal /\n @Prop({ mutable: true, reflect: true }) hasFocus = false;\n\n /\n checked property that can be used to get/set the value. accepts only boolean values\n /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n @Watch('checked')\n async handleCheckedChange() {\n this.input.checked = this.checked;\n\n if (this.inputType === 'radio' && this.name && this.checked) {\n let form = this.host.closest('form');\n let radios: Element[];\n if (form) {\n radios = Array.from(\n form.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n );\n } else {\n radios = Array.from(\n document.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n ).filter((radio) => !radio.closest('form'));\n }\n radios.map((el: HTMLNanoCheckboxElement) => {\n if (el !== this.host) el.checked = false;\n });\n }\n this.nanoChange.emit({ value: this.value, checked: this.checked });\n }\n\n /\n If `true`, the user cannot interact with the checkbox.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\n * it's only present when `checked` is true.\n /\n @Prop() value: string = 'on';\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string;\n\n /\n Set to true to make the field required.\n /\n @Prop() required: boolean = false;\n\n /\n Controls the underlying field type and style.\n /\n @Prop({ reflect: true }) type:\n \| 'radio'\n \| 'checkbox'\n \| 'tag'\n \| 'segment'\n \| 'segment-pill' = 'checkbox';\n\n @Watch('type')\n typeChange() {\n if (this.type === 'checkbox' \|\| this.type === 'tag')\n this.inputType = 'checkbox';\n else this.inputType = 'radio';\n }\n\n /\n label property that can be used to set the label text. Alternatively you may use a label slot.\n /\n @Prop() label?: string;\n\n /\n If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")\n /\n @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n\n @Watch('indeterminate')\n handleIndeterminateChange() {\n this.checked = false;\n this.input.indeterminate = this.indeterminate;\n }\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 if (!this.shouldReport) return false;\n return !this.input.validity.valid;\n }\n\n /\n Color to use from your application's color palette.\n /\n @Prop() color?: Color;\n\n /\n Emited when the checkbox is toggled\n /\n @Event() nanoChange: EventEmitter<CheckboxChangeEventDetail>;\n\n /\n Emited when the checkbox is focused\n /\n @Event() nanoFocus: EventEmitter;\n\n /\n Emited when the checkbox is blurred\n /\n @Event() nanoBlur: EventEmitter;\n\n // public methods\n\n /\n Returns the native input control\n /\n @Method()\n async getInputElement() {\n if (this.input) return this.input;\n }\n\n /\n Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `Promise<{ isValid: boolean, errorMessage: string }>`\n /\n @Method()\n async reportValidity(\n validateFirst: boolean = false\n ): Promise<ControlValidity> {\n if (validateFirst) {\n this.shouldReport = true;\n this._invalid = !this.input.reportValidity();\n }\n return {\n isValid: !this.invalid,\n errorMessage: this.input.validationMessage,\n };\n }\n\n /\n Sets a custom validation message.\n * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`\n /\n @Method()\n async setError(message: string) {\n if (!this.input) return;\n\n this._invalid = !!message.length;\n this.input.setCustomValidity(message);\n }\n\n /\n Sets focus on the checkbox.\n /\n @Method()\n async setFocus() {\n if (this.input) {\n this.input.focus();\n focusVisible.force(this.input);\n }\n }\n\n /\n Removes focus from the checkbox.\n /\n @Method()\n async removeFocus() {\n if (this.input) {\n this.input.blur();\n focusVisible.force(this.input, false);\n }\n }\n\n // private handlers\n\n private handleInvalid = (ev: Event) => {\n this.shouldReport = true;\n this._invalid = !(ev.target as HTMLInputElement).validity.valid;\n };\n\n private handleChange = (ev: InputEvent) => {\n this.checked = (ev.target as HTMLInputElement).checked;\n this.indeterminate = false;\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n / Although many radio components can be 'checked',\n the underlying control may not be. Check */\n private isRadioChecked() {\n setTimeout(() => (this.checked = this.input.checked), 20);\n }\n\n // Stencil hooks\n\n componentWillLoad() {\n this.typeChange();\n }\n\n componentDidLoad() {\n this.input.indeterminate = this.indeterminate;\n this.isRadioChecked();\n focusVisible.observe(this.input);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.input);\n }\n\n render() {\n const labelId = this.inputId + '-lbl';\n let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <Host\n class={{ ...createColorClasses(this.color) }}\n dir={isRtl ? 'rtl' : null}\n >\n <label\n class={{\n nanocb: true,\n 'nanocb--checked': this.checked,\n 'nanocb--invalid': this.invalid,\n 'nanocb--disabled': this.disabled,\n 'nanocb--focused': this.hasFocus,\n 'nanocb--indeterminate': this.indeterminate,\n }}\n htmlFor={this.inputId}\n >\n <input\n type={this.inputType}\n name={this.name}\n required={this.required}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-labelledby={labelId}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onChange={this.handleChange}\n ref={(input) => (this.input = input)}\n id={this.inputId}\n onInvalid={this.handleInvalid}\n />\n <span class={'nanocb__input nanocb__input--' + this.type}></span>\n\n <div id={labelId} class={'nanocb__label nanocb__label--' + this.type}>\n {this.label && !!this.label.length && <span>{this.label}</span>}\n <span hidden={this.label && !!this.label.length}>\n <slot />\n </span>\n </div>\n </label>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nano-date-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-date-input.js","mappings":"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","names":[],"sources":["./src/components/date-input/date-input.scss?tag=nano-date-input&encapsulation=scoped","./src/components/date-input/date-input.tsx"],"sourcesContent":["@import '../../global/style/nano-theme/form';\n@import '../../global/style/utilities/globals';\n\n:host {\n /*\n @prop --focus-shadow: defaults to #{$control-focus-style};\n * @prop --open-btn-color: defaults to #{$button-bg-color};\n * @prop --open-btn-border: defaults to none;\n * @prop --close-btn-color: defaults to #{$color-celsius};\n * @prop --picker-base-size: Base font size of the date picker component. Defaults to 16px;\n /\n\n display: inline-block;\n width: 100%;\n\n --focus-shadow: #{$control-focus-style};\n --open-btn-color: #{$button-bg-color};\n --open-btn-border: none;\n --close-btn-color: #{$button-bg-color};\n --picker-base-size: 16px;\n}\n\n:host(.nano-color) {\n --focus-shadow: #{$control-focus-size current-color(tint, 0.56)};\n}\n\nnano-icon {\n pointer-events: none;\n}\n\n.date-field {\n display: flex;\n flex-direction: column;\n position: relative;\n\n @media (max-width: 35.9375em) {\n &::before {\n content: '';\n position: fixed;\n background: rgba(0, 0, 0, 0);\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n z-index: -1;\n transition: z-index 0.001s ease 1s, background 0.2s ease;\n\n :host([picker-open]) & {\n transition: z-index 0.001s ease, background 0.2s ease 0.001s;\n background: rgba(0, 0, 0, 0.5);\n z-index: 100;\n }\n }\n }\n\n &__dropdown {\n --padding: 0;\n --overflow: visible;\n\n padding: 0 !important;\n width: 0 !important;\n width: 100%;\n }\n\n &__close-bar {\n align-items: center;\n display: flex;\n justify-content: space-between;\n text-overflow: ellipsis;\n white-space: nowrap;\n border: 0;\n margin: 0;\n overflow: visible;\n padding: 0;\n position: absolute;\n right: -8px;\n top: -8px;\n width: auto;\n z-index: 1;\n }\n\n &__open {\n background: var(--open-btn-color);\n border: var(--open-btn-border);\n margin: 0;\n appearance: none;\n\n &:focus {\n box-shadow: var(--focus-shadow);\n outline: none;\n }\n }\n\n &__close {\n -webkit-appearance: none;\n align-items: center;\n appearance: none;\n background: var(--close-btn-color);\n border: 0;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n height: 24px;\n justify-content: center;\n padding: 0;\n width: 24px;\n\n @media (min-width: 36em) {\n opacity: 0;\n }\n\n &:focus {\n box-shadow: var(--focus-shadow);\n outline: none;\n\n @media (min-width: 36em) {\n opacity: 1;\n }\n }\n\n nano-icon {\n margin: 0 auto;\n }\n }\n\n nano-date-picker {\n font-size: var(--picker-base-size);\n }\n}\n\n.vhidden {\n @include visually-hide();\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n h,\n Prop,\n Watch,\n State,\n Event,\n EventEmitter,\n Host,\n Method,\n} from '@stencil/core';\nimport {\n createDate,\n DaysOfWeek,\n printISODate,\n parseISODate,\n} from '../../utils/date-utils';\n\nimport {\n PickerChangeEvent,\n DateInputChangeEventDetail,\n Color,\n LocalDateOpts,\n DuetLocalizedText,\n ControlValidity,\n ControlValidityEventDetail,\n} from '../../interface';\nimport { createColorClasses } from '../../utils';\n\nconst DateRegxps = {\n d: '(\\\\d{1,2})',\n m: '(\\\\d{1,2})',\n y: '(\\\\d{4})',\n};\n\nlet inputIds = 0;\n\n/\n The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field. It has specific options for localisation, date formatting and validation.\n \n @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n * @slot start - input start slot\n * @slot end - input end slot\n /\n@Component({\n tag: 'nano-date-input',\n styleUrl: 'date-input.scss',\n scoped: true,\n})\nexport class DateInput implements ComponentInterface {\n private pickerEle!: HTMLNanoDatePickerElement;\n private trigger!: HTMLButtonElement;\n private pickerCloseBtn!: HTMLButtonElement;\n private dropdown!: HTMLNanoDropdownElement;\n private input: HTMLNanoInputElement;\n private pickerOpenSource: 'key' \| 'mouse';\n\n private directInput = false;\n private dateOrderIndeces = { d: 0, m: 1, y: 3 };\n private inputId = `nano-input-${inputIds++}`;\n private locale =\n (window.navigator.languages as string[]) \|\|\n window.navigator.language \|\|\n undefined;\n\n @Element() host: HTMLNanoDateInputElement;\n\n // Private state\n\n @State() pattern!: string;\n @State() inputValue: string;\n\n // Public Api / Prop\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 Whether to show a long form, confirmation date string of the one currently entered\n /\n @Prop() helperText: boolean = true;\n\n /\n Options for the date string display. Refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString.\n /\n @Prop() helperTextFormat: LocalDateOpts = {\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n };\n\n /\n Enable floating label behaviour. Will disable placeholder if set.\n /\n @Prop() floatLabel: boolean = false;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.inputId;\n\n /\n If `true`, the user cannot modify the value.\n /\n @Prop() readonly = false;\n\n /\n The initial size (number of characters) of the control.\n /\n @Prop() size?: number;\n\n /\n The form element to associate the select with (its form owner). Must be the id of a form.\n /\n @Prop() form?: string \| null;\n\n /\n Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n * Default is Monday.\n /\n @Prop() firstDayOfWeek?: DaysOfWeek;\n\n /\n Button labels, day names, month names, etc, used for localization.\n * Default is English.\n /\n @Prop() localization?: DuetLocalizedText;\n\n /\n If `true`, the user cannot interact with the input.\n /\n @Prop() disabled = false;\n\n /\n The color to use from the application's color palette.\n /\n @Prop() color?: Color;\n\n /\n This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n /\n @Prop() autofocus = false;\n\n /\n If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n /\n @Prop() clearInput = false;\n\n /\n String to place within a label element. Alternatively you may use a label slot.\n /\n @Prop() label?: string;\n\n /\n Instructional text that shows before the input has a value.\n * The pattern prop will be used to create a placeholder automatically if unused.\n /\n @Prop({ mutable: true }) placeholder: string;\n\n /\n Current value. Must be in IS0-8601 format: YYYY-MM-DD.\n /\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n @Watch('value')\n handleValueChange() {\n if (!this.directInput) this.inputValue = this.formatIsoDate(this.value);\n this.nanoChange.emit({ value: this.value, date: parseISODate(this.value) });\n this.directInput = false;\n }\n\n /\n When should the field perform validation\n /\n @Prop() validateOn?: 'dirty' \| 'submit' \| 'submitThenDirty' = 'submit';\n\n /\n Whether to show validation errors underneath input\n /\n @Prop({ reflect: true }) showInlineError = true;\n\n /\n The order of the date parts for entry and display.\n * e.g. dmy = dd mm yyyy\n /\n @Prop() dateOrder: 'dmy' \| 'mdy' \| 'ymd' \| 'dym' = 'dmy';\n\n @Watch('dateOrder')\n handleDateOrderChange() {\n this.setDatePattern();\n }\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required = false;\n\n /\n Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the max property.\n /\n @Prop() min?: string;\n\n /\n Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the min property.\n /\n @Prop() max?: string;\n\n /\n Visually hide the label - but make it accessible.\n /\n @Prop() hideLabel?: boolean = false;\n\n @Watch('min')\n @Watch('max')\n @Watch('value')\n testDateValidity() {\n const valueDate = parseISODate(this.value);\n let min: Date,\n max: Date,\n error: string = '';\n\n if (this.value && valueDate) {\n if (this.min && (min = parseISODate(this.min)) && valueDate < min) {\n error =\n 'Date below the minimum: ' +\n min.toLocaleDateString(this.locale, this.helperTextFormat);\n } else if (\n this.max &&\n (max = parseISODate(this.max)) &&\n valueDate > max\n ) {\n error =\n 'Date above the maximum: ' +\n max.toLocaleDateString(this.locale, this.helperTextFormat);\n }\n }\n\n setTimeout(async (_) => {\n if (!this.input) return;\n const input = await this.input.getInputElement();\n if (this.value.length && !valueDate) error = 'Please enter a valid date';\n\n input.setCustomValidity(error);\n if (this.input.validateOn === 'dirty') {\n this.input.showError(error);\n }\n }, 100);\n }\n\n /\n Show a date picker. Date pickers are not very useful\n * if the potential input is too far in the distance or past\n * e.g. Birthdays\n /\n @Prop() picker: boolean = true;\n\n /\n Initial picker date. Will be to `value` if set. Will be today's date if nothing set.\n * Must be in IS0-8601 format: YYYY-MM-DD.\n /\n @Prop() initialPickerDate?: string;\n\n /\n Set / read whether the picker is currently open.\n /\n @Prop({ reflect: true, mutable: true }) pickerOpen: boolean = false;\n\n @Watch('pickerOpen')\n handlePickerOpenChange() {\n this.dropdown.open = this.pickerOpen;\n }\n\n /\n Close the picker after a date is selected\n /\n @Prop() closeAfterPicked: boolean = true;\n\n // Event emitters\n\n /\n Event emitted when a date is selected.\n /\n @Event() nanoChange: EventEmitter<DateInputChangeEventDetail>;\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 // 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 await this.input.reportValidity(validateFirst);\n }\n\n /\n Sets focus on the child `nano-input`.\n /\n @Method()\n async setFocus() {\n if (this.input) this.input.setFocus();\n }\n\n /\n Returns the native `<input>` element used under the hood.\n /\n @Method()\n async getInputElement() {\n return await this.input.getInputElement();\n }\n\n /\n Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.\n */\n @Method()\n async showError(message: string) {\n if (!this.input) return;\n this.input.showError(message);\n }\n\n // Event handlers\n\n private onInputChange = (\n e: CustomEvent & {\n target: HTMLInputElement;\n }\n ) => {\n e.stopPropagation();\n this.setValue(e.target.value);\n };\n\n private onInputValidate = (e: CustomEvent<ControlValidityEventDetail>) => {\n e.stopPropagation();\n this._invalid = !e.detail.isValid;\n this.nanoValidate.emit({\n isValid: e.detail.isValid,\n errorMessage: e.detail.errorMessage,\n originalEvent: e.detail.originalEvent,\n });\n };\n\n private onInputKey = () => {\n this.directInput = true;\n };\n\n private onDatePicked = (e: { detail: PickerChangeEvent }) => {\n this.directInput = false;\n this.value = e.detail.value;\n if (this.closeAfterPicked) this.pickerOpen = false;\n };\n\n private onDropdownHide = () => {\n setTimeout((_) => (this.pickerOpen = false), 200);\n setTimeout((_) => this.trigger.focus(), 50);\n };\n\n private onDropdownShow = () => {\n setTimeout((_) => {\n this.pickerEle.setFocus(false, this.pickerOpenSource === 'key');\n this.pickerOpenSource = null;\n }, 200);\n };\n\n private onTriggerClick = () => {\n if (!this.pickerOpen) {\n this.pickerOpen = true;\n this.pickerOpenSource = 'mouse';\n }\n };\n\n private onTriggerKey = (e: KeyboardEvent) => {\n if ([' ', 'Enter'].includes(e.key)) {\n if (!this.pickerOpen) {\n this.pickerOpen = true;\n this.pickerOpenSource = 'key';\n }\n }\n };\n\n private onCloseClick = () => {\n if (this.pickerOpen) this.pickerOpen = false;\n };\n\n private onCloseKeyDown = (e: KeyboardEvent) => {\n // this ensures focus is trapped inside the picker\n if (e.key === 'Tab' && e.shiftKey) {\n this.pickerEle.setFocus(true);\n e.preventDefault();\n }\n if (e.key === ' ' \|\| e.key === 'Enter') {\n if (this.pickerOpen) this.pickerOpen = false;\n }\n };\n\n // Private logic\n\n // set the regexp input pattern and placeholder (if necessary)\n private setDatePattern() {\n let dateRegexOrdered = [];\n let dateStrOrd = [];\n Array.from(this.dateOrder).map((datepart, i) => {\n dateRegexOrdered.push(DateRegxps[datepart]);\n this.dateOrderIndeces[datepart] = i;\n dateStrOrd.push(datepart === 'y' ? 'yyyy' : datepart + datepart);\n });\n this.pattern = dateRegexOrdered.join('\\\\W+');\n\n if (!this.placeholder && this.placeholder !== 'false')\n this.placeholder = dateStrOrd.join(' ');\n }\n\n // set the public facing date string\n private formatIsoDate(isoDate: string) {\n let dateRegexOrdered = [];\n Array.from('ymd').map((datepart) =>\n dateRegexOrdered.push(DateRegxps[datepart])\n );\n const matches = isoDate.match(new RegExp(dateRegexOrdered.join('\\\\W+')));\n if (!matches) return '';\n\n let formatted = [];\n formatted[this.dateOrderIndeces.d] = matches[3];\n formatted[this.dateOrderIndeces.m] = matches[2];\n formatted[this.dateOrderIndeces.y] = matches[1];\n\n return formatted.join(' ');\n }\n\n // on manual user entry, set the value that will be sent with the form field\n private setValue(inputValue: string) {\n const matches = inputValue.match(new RegExp(this.pattern));\n\n // it's an invalid date, but we still need to set it\n if (!matches) {\n this.value = inputValue;\n return;\n }\n\n let date = createDate(\n matches[this.dateOrderIndeces.y + 1],\n matches[this.dateOrderIndeces.m + 1],\n matches[this.dateOrderIndeces.d + 1]\n );\n\n if (!date) {\n // last ditch attempt - see if the browser can get something\n date = new Date(inputValue);\n\n // it's definitely an invalid date, but set it anyway for validation messages\n if (!date) {\n this.value = inputValue;\n return;\n }\n }\n\n const dateStr = printISODate(date);\n this.value = dateStr;\n return dateStr;\n }\n\n connectedCallback() {\n this.setDatePattern();\n this.handleValueChange();\n }\n\n componentDidLoad() {\n if (!this.pickerCloseBtn \|\| !this.picker) return;\n this.pickerEle.firstFocusEle = this.pickerCloseBtn;\n this.dropdown.tetherTo = this.trigger;\n setTimeout((_) => this.handlePickerOpenChange(), 300);\n }\n\n render() {\n this.locale =\n (navigator.languages as string[]) \|\| navigator.language \|\| undefined;\n let placement: 'bottom-start' \| 'bottom-end' =\n (this.host.ownerDocument as Document).dir === 'rtl'\n ? 'bottom-start'\n : 'bottom-end';\n const valueDate = parseISODate(this.value);\n const hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n return (\n <Host class={{ ...createColorClasses(this.color) }}>\n <div class=\"date-field\">\n <nano-input\n class=\"date-field__input\"\n slot=\"trigger\"\n required={this.required \|\| undefined}\n showInlineError={this.showInlineError}\n validateOn={this.validateOn}\n placeholder={\n this.placeholder !== 'false' ? this.placeholder : undefined\n }\n pattern={this.pattern}\n label={this.label}\n disabled={this.disabled \|\| undefined}\n color={this.color \|\| undefined}\n autofocus={this.autofocus \|\| undefined}\n clearInput={this.clearInput \|\| undefined}\n onNanoChange={this.onInputChange}\n onNanoInput={this.onInputKey}\n onNanoValidate={this.onInputValidate}\n name=\"\"\n form={this.form \|\| undefined}\n size={this.size \|\| undefined}\n readonly={this.readonly}\n value={this.inputValue}\n ref={(input) => (this.input = input)}\n floatLabel={this.floatLabel}\n hideLabel={this.hideLabel}\n inputmode={'numeric'}\n >\n <slot name=\"start\" slot=\"start\" />\n <slot name=\"label\" />\n <slot name=\"end\" slot=\"end\" />\n {this.picker && [\n <button\n slot=\"end\"\n class=\"date-field__open\"\n type=\"button\"\n onKeyDown={this.onTriggerKey}\n onClick={this.onTriggerClick}\n ref={(trigger) => (this.trigger = trigger)}\n disabled={this.disabled \|\| this.readonly}\n >\n <nano-icon name=\"light/calendar-alt\"></nano-icon>\n </button>,\n\n <nano-dropdown\n slot=\"end\"\n placement={placement}\n onNanoHide={this.onDropdownHide}\n onNanoShow={this.onDropdownShow}\n dialogTitle=\"Choose a date\"\n class=\"date-field__dropdown\"\n ref={(dropdown) => (this.dropdown = dropdown)}\n >\n <div>\n <div class=\"date-field__close-bar\">\n <button\n class=\"date-field__close\"\n type=\"button\"\n onMouseDown={this.onCloseClick}\n onKeyDown={this.onCloseKeyDown}\n ref={(pickerClose) => (this.pickerCloseBtn = pickerClose)}\n >\n <nano-icon name=\"light/times\"></nano-icon>\n <span class=\"vhidden\">Close window</span>\n </button>\n </div>\n <nano-date-picker\n onNanoDatePicked={this.onDatePicked}\n min={this.min \|\| undefined}\n max={this.max \|\| undefined}\n is-modal={true}\n ref={(picker) => (this.pickerEle = picker)}\n localization={this.localization}\n selectedDate={this.value \|\| this.initialPickerDate}\n firstDayOfWeek={this.firstDayOfWeek}\n color={this.color \|\| undefined}\n ></nano-date-picker>\n </div>\n </nano-dropdown>,\n ]}\n {(hasHelperSlot \|\| this.helperText \|\| this.showInlineError) && (\n <span slot=\"helper\">\n <span class={{ vhidden: !!this.value.length }}>\n <slot name=\"helper\" />\n </span>\n {this.helperText && !!valueDate && (\n <span>\n {valueDate.toLocaleDateString(\n this.locale,\n this.helperTextFormat\n )}\n </span>\n )}\n </span>\n )}\n </nano-input>\n <input type=\"hidden\" value={this.value} name={this.name} />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nano-date-input.js","mappings":";;;;;;;;;;AAAA,MAAM,YAAY,GAAG,0vGAA0vG;;AC+B/wG,MAAM,UAAU,GAAG;EACjB,CAAC,EAAE,YAAY;EACf,CAAC,EAAE,YAAY;EACf,CAAC,EAAE,UAAU;CACd,CAAC;AAEF,IAAI,QAAQ,GAAG,CAAC,CAAC;IAeJ,SAAS;EALtB;;;;;IAaU,gBAAW,GAAG,KAAK,CAAC;IACpB,qBAAgB,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;IACxC,YAAO,GAAG,cAAc,QAAQ,EAAE,EAAE,CAAC;IACrC,WAAM,GACX,MAAM,CAAC,SAAS,CAAC,SAAsB;MACxC,MAAM,CAAC,SAAS,CAAC,QAAQ;MACzB,SAAS,CAAC;IAmBH,aAAQ,GAAG,KAAK,CAAC;;;;IAKlB,eAAU,GAAY,IAAI,CAAC;;;;IAK3B,qBAAgB,GAAkB;MACxC,IAAI,EAAE,SAAS;MACf,KAAK,EAAE,MAAM;MACb,GAAG,EAAE,SAAS;KACf,CAAC;;;;IAKM,eAAU,GAAY,KAAK,CAAC;;;;IAK5B,SAAI,GAAW,IAAI,CAAC,OAAO,CAAC;;;;IAK5B,aAAQ,GAAG,KAAK,CAAC;;;;IA2BjB,aAAQ,GAAG,KAAK,CAAC;;;;IAUjB,cAAS,GAAG,KAAK,CAAC;;;;IAKlB,eAAU,GAAG,KAAK,CAAC;;;;IAgBa,UAAK,GAAW,EAAE,CAAC;;;;IAYnD,eAAU,GAA4C,QAAQ,CAAC;;;;IAK9C,oBAAe,GAAG,IAAI,CAAC;;;;;IAMxC,cAAS,GAAkC,KAAK,CAAC;;;;IAUjD,aAAQ,GAAG,KAAK,CAAC;;;;IAiBjB,cAAS,GAAa,KAAK,CAAC;;;;;;IA4C5B,WAAM,GAAY,IAAI,CAAC;;;;IAWS,eAAU,GAAY,KAAK,CAAC;;;;IAU5D,qBAAgB,GAAY,IAAI,CAAC;;IAsDjC,kBAAa,GAAG,CACtB,CAEC;MAED,CAAC,CAAC,eAAe,EAAE,CAAC;MACpB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;KAC/B,CAAC;IAEM,oBAAe,GAAG,CAAC,CAA0C;MACnE,CAAC,CAAC,eAAe,EAAE,CAAC;MACpB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;MAClC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;QACrB,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO;QACzB,YAAY,EAAE,CAAC,CAAC,MAAM,CAAC,YAAY;QACnC,aAAa,EAAE,CAAC,CAAC,MAAM,CAAC,aAAa;OACtC,CAAC,CAAC;KACJ,CAAC;IAEM,eAAU,GAAG;MACnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;KACzB,CAAC;IAEM,iBAAY,GAAG,CAAC,CAAgC;MACtD,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;MACzB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;MAC5B,IAAI,IAAI,CAAC,gBAAgB;QAAE,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;KACpD,CAAC;IAEM,mBAAc,GAAG;MACvB,UAAU,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC;MAClD,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;KAC7C,CAAC;IAEM,mBAAc,GAAG;MACvB,UAAU,CAAC,CAAC,CAAC;QACX,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,KAAK,KAAK,CAAC,CAAC;QAChE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;OAC9B,EAAE,GAAG,CAAC,CAAC;KACT,CAAC;IAEM,mBAAc,GAAG;MACvB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC;OACjC;KACF,CAAC;IAEM,iBAAY,GAAG,CAAC,CAAgB;MACtC,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;QAClC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;UACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;UACvB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;SAC/B;OACF;KACF,CAAC;IAEM,iBAAY,GAAG;MACrB,IAAI,IAAI,CAAC,UAAU;QAAE,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;KAC9C,CAAC;IAEM,mBAAc,GAAG,CAAC,CAAgB;;MAExC,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC,QAAQ,EAAE;QACjC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC9B,CAAC,CAAC,cAAc,EAAE,CAAC;OACpB;MACD,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;QACtC,IAAI,IAAI,CAAC,UAAU;UAAE,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;OAC9C;KACF,CAAC;GAkMH;;;;;;EA5gBC,IACI,OAAO;IACT,OAAO,IAAI,CAAC,QAAQ,CAAC;GACtB;EA2FD,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,WAAW;MAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACxE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAC5E,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;GAC1B;EAmBD,qBAAqB;IACnB,IAAI,CAAC,cAAc,EAAE,CAAC;GACvB;EA2BD,gBAAgB;IACd,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3C,IAAI,GAAS,EACX,GAAS,EACT,KAAK,GAAW,EAAE,CAAC;IAErB,IAAI,IAAI,CAAC,KAAK,IAAI,SAAS,EAAE;MAC3B,IAAI,IAAI,CAAC,GAAG,KAAK,GAAG,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,SAAS,GAAG,GAAG,EAAE;QACjE,KAAK;UACH,0BAA0B;YAC1B,GAAG,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;OAC9D;WAAM,IACL,IAAI,CAAC,GAAG;SACP,GAAG,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC9B,SAAS,GAAG,GAAG,EACf;QACA,KAAK;UACH,0BAA0B;YAC1B,GAAG,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;OAC9D;KACF;IAED,UAAU,CAAC,OAAO,CAAC;MACjB,IAAI,CAAC,IAAI,CAAC,KAAK;QAAE,OAAO;MACxB,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;MACjD,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,SAAS;QAAE,KAAK,GAAG,2BAA2B,CAAC;MAEzE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;MAC/B,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,KAAK,OAAO,EAAE;QACrC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;OAC7B;KACF,EAAE,GAAG,CAAC,CAAC;GACT;EAqBD,sBAAsB;IACpB,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC;GACtC;;;;;;;EA4BD,MAAM,cAAc,CAAC,aAAsB;IACzC,OAAO,MAAM,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;GACvD;;;;EAMD,MAAM,QAAQ;IACZ,IAAI,IAAI,CAAC,KAAK;MAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;GACvC;;;;EAMD,MAAM,eAAe;IACnB,OAAO,MAAM,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;GAC3C;;;;EAMD,MAAM,SAAS,CAAC,OAAe;IAC7B,IAAI,CAAC,IAAI,CAAC,KAAK;MAAE,OAAO;IACxB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;GAC/B;;;EA+EO,cAAc;IACpB,IAAI,gBAAgB,GAAG,EAAE,CAAC;IAC1B,IAAI,UAAU,GAAG,EAAE,CAAC;IACpB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAC;MACzC,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC;MAC5C,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;MACpC,UAAU,CAAC,IAAI,CAAC,QAAQ,KAAK,GAAG,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC,CAAC;KAClE,CAAC,CAAC;IACH,IAAI,CAAC,OAAO,GAAG,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAE7C,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,KAAK,OAAO;MACnD,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;GAC3C;;EAGO,aAAa,CAAC,OAAe;IACnC,IAAI,gBAAgB,GAAG,EAAE,CAAC;IAC1B,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,KAC7B,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAC5C,CAAC;IACF,MAAM,OAAO,GAAG,OAAO,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACzE,IAAI,CAAC,OAAO;MAAE,OAAO,EAAE,CAAC;IAExB,IAAI,SAAS,GAAG,EAAE,CAAC;IACnB,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;IAChD,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;IAChD,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;IAEhD,OAAO,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;GAC5B;;EAGO,QAAQ,CAAC,UAAkB;IACjC,MAAM,OAAO,GAAG,UAAU,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;;IAG3D,IAAI,CAAC,OAAO,EAAE;MACZ,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC;MACxB,OAAO;KACR;IAED,IAAI,IAAI,GAAG,UAAU,CACnB,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,GAAG,CAAC,CAAC,EACpC,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,GAAG,CAAC,CAAC,EACpC,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,GAAG,CAAC,CAAC,CACrC,CAAC;IAEF,IAAI,CAAC,IAAI,EAAE;;MAET,IAAI,GAAG,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;;MAG5B,IAAI,CAAC,IAAI,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC;QACxB,OAAO;OACR;KACF;IAED,MAAM,OAAO,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACnC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;IACrB,OAAO,OAAO,CAAC;GAChB;EAED,iBAAiB;IACf,IAAI,CAAC,cAAc,EAAE,CAAC;IACtB,IAAI,CAAC,iBAAiB,EAAE,CAAC;GAC1B;EAED,gBAAgB;IACd,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,MAAM;MAAE,OAAO;IACjD,IAAI,CAAC,SAAS,CAAC,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC;IACnD,IAAI,CAAC,QAAQ,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;IACtC,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,sBAAsB,EAAE,EAAE,GAAG,CAAC,CAAC;GACvD;EAED,MAAM;IACJ,IAAI,CAAC,MAAM;MACR,SAAS,CAAC,SAAsB,IAAI,SAAS,CAAC,QAAQ,IAAI,SAAS,CAAC;IACvE,IAAI,SAAS,GACV,IAAI,CAAC,IAAI,CAAC,aAA0B,CAAC,GAAG,KAAK,KAAK;QAC/C,cAAc;QACd,YAAY,CAAC;IACnB,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3C,MAAM,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAEnE,QACE,EAAC,IAAI,IAAC,KAAK,oBAAO,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,KAC9C,WAAK,KAAK,EAAC,YAAY,IACrB,kBACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,EACpC,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,WAAW,EACT,IAAI,CAAC,WAAW,KAAK,OAAO,GAAG,IAAI,CAAC,WAAW,GAAG,SAAS,EAE7D,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,EACpC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS,EAC9B,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,SAAS,EACtC,UAAU,EAAE,IAAI,CAAC,UAAU,IAAI,SAAS,EACxC,YAAY,EAAE,IAAI,CAAC,aAAa,EAChC,WAAW,EAAE,IAAI,CAAC,UAAU,EAC5B,cAAc,EAAE,IAAI,CAAC,eAAe,EACpC,IAAI,EAAC,EAAE,EACP,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,SAAS,EAC5B,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,SAAS,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,GAAG,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,EACpC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,SAAS,IAEpB,YAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAG,EAClC,YAAM,IAAI,EAAC,OAAO,GAAG,EACrB,YAAM,IAAI,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,GAAG,EAC7B,IAAI,CAAC,MAAM,IAAI;MACd,cACE,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,YAAY,EAC5B,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,EAC1C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAExC,iBAAW,IAAI,EAAC,oBAAoB,GAAa,CAC1C;MAET,qBACE,IAAI,EAAC,KAAK,EACV,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,IAAI,CAAC,cAAc,EAC/B,UAAU,EAAE,IAAI,CAAC,cAAc,EAC/B,WAAW,EAAC,eAAe,EAC3B,KAAK,EAAC,sBAAsB,EAC5B,GAAG,EAAE,CAAC,QAAQ,MAAM,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,IAE7C,eACE,WAAK,KAAK,EAAC,uBAAuB,IAChC,cACE,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,SAAS,EAAE,IAAI,CAAC,cAAc,EAC9B,GAAG,EAAE,CAAC,WAAW,MAAM,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC,IAEzD,iBAAW,IAAI,EAAC,aAAa,GAAa,EAC1C,YAAM,KAAK,EAAC,SAAS,mBAAoB,CAClC,CACL,EACN,wBACE,gBAAgB,EAAE,IAAI,CAAC,YAAY,EACnC,GAAG,EAAE,IAAI,CAAC,GAAG,IAAI,SAAS,EAC1B,GAAG,EAAE,IAAI,CAAC,GAAG,IAAI,SAAS,cAChB,IAAI,EACd,GAAG,EAAE,CAAC,MAAM,MAAM,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,EAC1C,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,YAAY,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,iBAAiB,EAClD,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS,GACZ,CAChB,CACQ;KACjB,EACA,CAAC,aAAa,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,eAAe,MACxD,YAAM,IAAI,EAAC,QAAQ,IACjB,YAAM,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,IAC3C,YAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,EACN,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,SAAS,KAC7B,gBACG,SAAS,CAAC,kBAAkB,CAC3B,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,gBAAgB,CACtB,CACI,CACR,CACI,CACR,CACU,EACb,aAAO,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CACvD,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/date-input/date-input.scss?tag=nano-date-input&encapsulation=scoped","./src/components/date-input/date-input.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/utilities/globals';\n\n:host {\n /*\n @prop --focus-shadow: defaults to #{$control-focus-style};\n * @prop --open-btn-color: defaults to #{$button-bg-color};\n * @prop --open-btn-border: defaults to none;\n * @prop --close-btn-color: defaults to #{map.get($colors, celsius)};\n * @prop --picker-base-size: Base font size of the date picker component. Defaults to 16px;\n /\n\n display: inline-block;\n width: 100%;\n\n --focus-shadow: #{$control-focus-style};\n --open-btn-color: #{$button-bg-color};\n --open-btn-border: none;\n --close-btn-color: #{$button-bg-color};\n --picker-base-size: 16px;\n}\n\n:host(.nano-color) {\n --focus-shadow: #{$control-focus-size current-color(tint, 0.56)};\n}\n\nnano-icon {\n pointer-events: none;\n}\n\n.date-field {\n display: flex;\n flex-direction: column;\n position: relative;\n\n @media (max-width: 35.9375em) {\n &::before {\n content: '';\n position: fixed;\n background: rgba(0, 0, 0, 0);\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n z-index: -1;\n transition: z-index 0.001s ease 1s, background 0.2s ease;\n\n :host([picker-open]) & {\n transition: z-index 0.001s ease, background 0.2s ease 0.001s;\n background: rgba(0, 0, 0, 0.5);\n z-index: 100;\n }\n }\n }\n\n &__dropdown {\n --padding: 0;\n --overflow: visible;\n\n padding: 0 !important;\n width: 0 !important;\n width: 100%;\n }\n\n &__close-bar {\n align-items: center;\n display: flex;\n justify-content: space-between;\n text-overflow: ellipsis;\n white-space: nowrap;\n border: 0;\n margin: 0;\n overflow: visible;\n padding: 0;\n position: absolute;\n right: -8px;\n top: -8px;\n width: auto;\n z-index: 1;\n }\n\n &__open {\n background: var(--open-btn-color);\n border: var(--open-btn-border);\n margin: 0;\n appearance: none;\n\n &:focus {\n box-shadow: var(--focus-shadow);\n outline: none;\n }\n }\n\n &__close {\n -webkit-appearance: none;\n align-items: center;\n appearance: none;\n background: var(--close-btn-color);\n border: 0;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n height: 24px;\n justify-content: center;\n padding: 0;\n width: 24px;\n\n @media (min-width: 36em) {\n opacity: 0;\n }\n\n &:focus {\n box-shadow: var(--focus-shadow);\n outline: none;\n\n @media (min-width: 36em) {\n opacity: 1;\n }\n }\n\n nano-icon {\n margin: 0 auto;\n }\n }\n\n nano-date-picker {\n font-size: var(--picker-base-size);\n }\n}\n\n.vhidden {\n @include visually-hide();\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n h,\n Prop,\n Watch,\n State,\n Event,\n EventEmitter,\n Host,\n Method,\n} from '@stencil/core';\nimport {\n createDate,\n DaysOfWeek,\n printISODate,\n parseISODate,\n} from '../../utils/date-utils';\n\nimport {\n PickerChangeEvent,\n DateInputChangeEventDetail,\n Color,\n LocalDateOpts,\n DuetLocalizedText,\n ControlValidity,\n ControlValidityEventDetail,\n} from '../../interface';\nimport { createColorClasses } from '../../utils';\n\nconst DateRegxps = {\n d: '(\\\\d{1,2})',\n m: '(\\\\d{1,2})',\n y: '(\\\\d{4})',\n};\n\nlet inputIds = 0;\n\n/\n The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field. It has specific options for localisation, date formatting and validation.\n \n @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n * @slot start - input start slot\n * @slot end - input end slot\n /\n@Component({\n tag: 'nano-date-input',\n styleUrl: 'date-input.scss',\n scoped: true,\n})\nexport class DateInput implements ComponentInterface {\n private pickerEle!: HTMLNanoDatePickerElement;\n private trigger!: HTMLButtonElement;\n private pickerCloseBtn!: HTMLButtonElement;\n private dropdown!: HTMLNanoDropdownElement;\n private input: HTMLNanoInputElement;\n private pickerOpenSource: 'key' \| 'mouse';\n\n private directInput = false;\n private dateOrderIndeces = { d: 0, m: 1, y: 3 };\n private inputId = `nano-input-${inputIds++}`;\n private locale =\n (window.navigator.languages as string[]) \|\|\n window.navigator.language \|\|\n undefined;\n\n @Element() host: HTMLNanoDateInputElement;\n\n // Private state\n\n @State() pattern!: string;\n @State() inputValue: string;\n\n // Public Api / Prop\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 Whether to show a long form, confirmation date string of the one currently entered\n /\n @Prop() helperText: boolean = true;\n\n /\n Options for the date string display. Refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString.\n /\n @Prop() helperTextFormat: LocalDateOpts = {\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n };\n\n /\n Enable floating label behaviour. Will disable placeholder if set.\n /\n @Prop() floatLabel: boolean = false;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.inputId;\n\n /\n If `true`, the user cannot modify the value.\n /\n @Prop() readonly = false;\n\n /\n The initial size (number of characters) of the control.\n /\n @Prop() size?: number;\n\n /\n The form element to associate the select with (its form owner). Must be the id of a form.\n /\n @Prop() form?: string \| null;\n\n /\n Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n * Default is Monday.\n /\n @Prop() firstDayOfWeek?: DaysOfWeek;\n\n /\n Button labels, day names, month names, etc, used for localization.\n * Default is English.\n /\n @Prop() localization?: DuetLocalizedText;\n\n /\n If `true`, the user cannot interact with the input.\n /\n @Prop() disabled = false;\n\n /\n The color to use from the application's color palette.\n /\n @Prop() color?: Color;\n\n /\n This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n /\n @Prop() autofocus = false;\n\n /\n If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n /\n @Prop() clearInput = false;\n\n /\n String to place within a label element. Alternatively you may use a label slot.\n /\n @Prop() label?: string;\n\n /\n Instructional text that shows before the input has a value.\n * The pattern prop will be used to create a placeholder automatically if unused.\n /\n @Prop({ mutable: true }) placeholder: string;\n\n /\n Current value. Must be in IS0-8601 format: YYYY-MM-DD.\n /\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n @Watch('value')\n handleValueChange() {\n if (!this.directInput) this.inputValue = this.formatIsoDate(this.value);\n this.nanoChange.emit({ value: this.value, date: parseISODate(this.value) });\n this.directInput = false;\n }\n\n /\n When should the field perform validation\n /\n @Prop() validateOn?: 'dirty' \| 'submit' \| 'submitThenDirty' = 'submit';\n\n /\n Whether to show validation errors underneath input\n /\n @Prop({ reflect: true }) showInlineError = true;\n\n /\n The order of the date parts for entry and display.\n * e.g. dmy = dd mm yyyy\n /\n @Prop() dateOrder: 'dmy' \| 'mdy' \| 'ymd' \| 'dym' = 'dmy';\n\n @Watch('dateOrder')\n handleDateOrderChange() {\n this.setDatePattern();\n }\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required = false;\n\n /\n Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the max property.\n /\n @Prop() min?: string;\n\n /\n Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the min property.\n /\n @Prop() max?: string;\n\n /\n Visually hide the label - but make it accessible.\n /\n @Prop() hideLabel?: boolean = false;\n\n @Watch('min')\n @Watch('max')\n @Watch('value')\n testDateValidity() {\n const valueDate = parseISODate(this.value);\n let min: Date,\n max: Date,\n error: string = '';\n\n if (this.value && valueDate) {\n if (this.min && (min = parseISODate(this.min)) && valueDate < min) {\n error =\n 'Date below the minimum: ' +\n min.toLocaleDateString(this.locale, this.helperTextFormat);\n } else if (\n this.max &&\n (max = parseISODate(this.max)) &&\n valueDate > max\n ) {\n error =\n 'Date above the maximum: ' +\n max.toLocaleDateString(this.locale, this.helperTextFormat);\n }\n }\n\n setTimeout(async (_) => {\n if (!this.input) return;\n const input = await this.input.getInputElement();\n if (this.value.length && !valueDate) error = 'Please enter a valid date';\n\n input.setCustomValidity(error);\n if (this.input.validateOn === 'dirty') {\n this.input.showError(error);\n }\n }, 100);\n }\n\n /\n Show a date picker. Date pickers are not very useful\n * if the potential input is too far in the distance or past\n * e.g. Birthdays\n /\n @Prop() picker: boolean = true;\n\n /\n Initial picker date. Will be to `value` if set. Will be today's date if nothing set.\n * Must be in IS0-8601 format: YYYY-MM-DD.\n /\n @Prop() initialPickerDate?: string;\n\n /\n Set / read whether the picker is currently open.\n /\n @Prop({ reflect: true, mutable: true }) pickerOpen: boolean = false;\n\n @Watch('pickerOpen')\n handlePickerOpenChange() {\n this.dropdown.open = this.pickerOpen;\n }\n\n /\n Close the picker after a date is selected\n /\n @Prop() closeAfterPicked: boolean = true;\n\n // Event emitters\n\n /\n Event emitted when a date is selected.\n /\n @Event() nanoChange: EventEmitter<DateInputChangeEventDetail>;\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 // 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 await this.input.reportValidity(validateFirst);\n }\n\n /\n Sets focus on the child `nano-input`.\n /\n @Method()\n async setFocus() {\n if (this.input) this.input.setFocus();\n }\n\n /\n Returns the native `<input>` element used under the hood.\n /\n @Method()\n async getInputElement() {\n return await this.input.getInputElement();\n }\n\n /\n Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.\n */\n @Method()\n async showError(message: string) {\n if (!this.input) return;\n this.input.showError(message);\n }\n\n // Event handlers\n\n private onInputChange = (\n e: CustomEvent & {\n target: HTMLInputElement;\n }\n ) => {\n e.stopPropagation();\n this.setValue(e.target.value);\n };\n\n private onInputValidate = (e: CustomEvent<ControlValidityEventDetail>) => {\n e.stopPropagation();\n this._invalid = !e.detail.isValid;\n this.nanoValidate.emit({\n isValid: e.detail.isValid,\n errorMessage: e.detail.errorMessage,\n originalEvent: e.detail.originalEvent,\n });\n };\n\n private onInputKey = () => {\n this.directInput = true;\n };\n\n private onDatePicked = (e: { detail: PickerChangeEvent }) => {\n this.directInput = false;\n this.value = e.detail.value;\n if (this.closeAfterPicked) this.pickerOpen = false;\n };\n\n private onDropdownHide = () => {\n setTimeout((_) => (this.pickerOpen = false), 200);\n setTimeout((_) => this.trigger.focus(), 50);\n };\n\n private onDropdownShow = () => {\n setTimeout((_) => {\n this.pickerEle.setFocus(false, this.pickerOpenSource === 'key');\n this.pickerOpenSource = null;\n }, 200);\n };\n\n private onTriggerClick = () => {\n if (!this.pickerOpen) {\n this.pickerOpen = true;\n this.pickerOpenSource = 'mouse';\n }\n };\n\n private onTriggerKey = (e: KeyboardEvent) => {\n if ([' ', 'Enter'].includes(e.key)) {\n if (!this.pickerOpen) {\n this.pickerOpen = true;\n this.pickerOpenSource = 'key';\n }\n }\n };\n\n private onCloseClick = () => {\n if (this.pickerOpen) this.pickerOpen = false;\n };\n\n private onCloseKeyDown = (e: KeyboardEvent) => {\n // this ensures focus is trapped inside the picker\n if (e.key === 'Tab' && e.shiftKey) {\n this.pickerEle.setFocus(true);\n e.preventDefault();\n }\n if (e.key === ' ' \|\| e.key === 'Enter') {\n if (this.pickerOpen) this.pickerOpen = false;\n }\n };\n\n // Private logic\n\n // set the regexp input pattern and placeholder (if necessary)\n private setDatePattern() {\n let dateRegexOrdered = [];\n let dateStrOrd = [];\n Array.from(this.dateOrder).map((datepart, i) => {\n dateRegexOrdered.push(DateRegxps[datepart]);\n this.dateOrderIndeces[datepart] = i;\n dateStrOrd.push(datepart === 'y' ? 'yyyy' : datepart + datepart);\n });\n this.pattern = dateRegexOrdered.join('\\\\W+');\n\n if (!this.placeholder && this.placeholder !== 'false')\n this.placeholder = dateStrOrd.join(' ');\n }\n\n // set the public facing date string\n private formatIsoDate(isoDate: string) {\n let dateRegexOrdered = [];\n Array.from('ymd').map((datepart) =>\n dateRegexOrdered.push(DateRegxps[datepart])\n );\n const matches = isoDate.match(new RegExp(dateRegexOrdered.join('\\\\W+')));\n if (!matches) return '';\n\n let formatted = [];\n formatted[this.dateOrderIndeces.d] = matches[3];\n formatted[this.dateOrderIndeces.m] = matches[2];\n formatted[this.dateOrderIndeces.y] = matches[1];\n\n return formatted.join(' ');\n }\n\n // on manual user entry, set the value that will be sent with the form field\n private setValue(inputValue: string) {\n const matches = inputValue.match(new RegExp(this.pattern));\n\n // it's an invalid date, but we still need to set it\n if (!matches) {\n this.value = inputValue;\n return;\n }\n\n let date = createDate(\n matches[this.dateOrderIndeces.y + 1],\n matches[this.dateOrderIndeces.m + 1],\n matches[this.dateOrderIndeces.d + 1]\n );\n\n if (!date) {\n // last ditch attempt - see if the browser can get something\n date = new Date(inputValue);\n\n // it's definitely an invalid date, but set it anyway for validation messages\n if (!date) {\n this.value = inputValue;\n return;\n }\n }\n\n const dateStr = printISODate(date);\n this.value = dateStr;\n return dateStr;\n }\n\n connectedCallback() {\n this.setDatePattern();\n this.handleValueChange();\n }\n\n componentDidLoad() {\n if (!this.pickerCloseBtn \|\| !this.picker) return;\n this.pickerEle.firstFocusEle = this.pickerCloseBtn;\n this.dropdown.tetherTo = this.trigger;\n setTimeout((_) => this.handlePickerOpenChange(), 300);\n }\n\n render() {\n this.locale =\n (navigator.languages as string[]) \|\| navigator.language \|\| undefined;\n let placement: 'bottom-start' \| 'bottom-end' =\n (this.host.ownerDocument as Document).dir === 'rtl'\n ? 'bottom-start'\n : 'bottom-end';\n const valueDate = parseISODate(this.value);\n const hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n return (\n <Host class={{ ...createColorClasses(this.color) }}>\n <div class=\"date-field\">\n <nano-input\n class=\"date-field__input\"\n slot=\"trigger\"\n required={this.required \|\| undefined}\n showInlineError={this.showInlineError}\n validateOn={this.validateOn}\n placeholder={\n this.placeholder !== 'false' ? this.placeholder : undefined\n }\n pattern={this.pattern}\n label={this.label}\n disabled={this.disabled \|\| undefined}\n color={this.color \|\| undefined}\n autofocus={this.autofocus \|\| undefined}\n clearInput={this.clearInput \|\| undefined}\n onNanoChange={this.onInputChange}\n onNanoInput={this.onInputKey}\n onNanoValidate={this.onInputValidate}\n name=\"\"\n form={this.form \|\| undefined}\n size={this.size \|\| undefined}\n readonly={this.readonly}\n value={this.inputValue}\n ref={(input) => (this.input = input)}\n floatLabel={this.floatLabel}\n hideLabel={this.hideLabel}\n inputmode={'numeric'}\n >\n <slot name=\"start\" slot=\"start\" />\n <slot name=\"label\" />\n <slot name=\"end\" slot=\"end\" />\n {this.picker && [\n <button\n slot=\"end\"\n class=\"date-field__open\"\n type=\"button\"\n onKeyDown={this.onTriggerKey}\n onClick={this.onTriggerClick}\n ref={(trigger) => (this.trigger = trigger)}\n disabled={this.disabled \|\| this.readonly}\n >\n <nano-icon name=\"light/calendar-alt\"></nano-icon>\n </button>,\n\n <nano-dropdown\n slot=\"end\"\n placement={placement}\n onNanoHide={this.onDropdownHide}\n onNanoShow={this.onDropdownShow}\n dialogTitle=\"Choose a date\"\n class=\"date-field__dropdown\"\n ref={(dropdown) => (this.dropdown = dropdown)}\n >\n <div>\n <div class=\"date-field__close-bar\">\n <button\n class=\"date-field__close\"\n type=\"button\"\n onMouseDown={this.onCloseClick}\n onKeyDown={this.onCloseKeyDown}\n ref={(pickerClose) => (this.pickerCloseBtn = pickerClose)}\n >\n <nano-icon name=\"light/times\"></nano-icon>\n <span class=\"vhidden\">Close window</span>\n </button>\n </div>\n <nano-date-picker\n onNanoDatePicked={this.onDatePicked}\n min={this.min \|\| undefined}\n max={this.max \|\| undefined}\n is-modal={true}\n ref={(picker) => (this.pickerEle = picker)}\n localization={this.localization}\n selectedDate={this.value \|\| this.initialPickerDate}\n firstDayOfWeek={this.firstDayOfWeek}\n color={this.color \|\| undefined}\n ></nano-date-picker>\n </div>\n </nano-dropdown>,\n ]}\n {(hasHelperSlot \|\| this.helperText \|\| this.showInlineError) && (\n <span slot=\"helper\">\n <span class={{ vhidden: !!this.value.length }}>\n <slot name=\"helper\" />\n </span>\n {this.helperText && !!valueDate && (\n <span>\n {valueDate.toLocaleDateString(\n this.locale,\n this.helperTextFormat\n )}\n </span>\n )}\n </span>\n )}\n </nano-input>\n <input type=\"hidden\" value={this.value} name={this.name} />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

	@@ -1 +1 @@
1	- {"file":"nano-details.js","mappings":"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","names":["ResizeObserver"],"sources":["./src/components/details/details.scss?tag=nano-details&encapsulation=shadow","./src/components/details/details.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/form';\n\n:host {\n /*\n @prop --padding: Default to 1em;\n\n * @prop --btn-padding: Defaults to var(--padding);\n * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);\n * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);\n * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #{$color-offwhite});\n\n * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);\n * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n\n * @prop --content-bg-color: Defaults to transparent;\n * @prop --content-text-color: Defaults to #455556;\n * @prop --content-transition: Defaults to height .2s ease-out;\n\n * @prop --border-width: Defaults to none;\n * @prop --border-color: Defaults to none;\n * @prop --border-style: Defaults to none;\n * @prop --border-radius: Defaults to none;\n * @prop --box-shadow: Defaults to none;\n * @prop --focus-style: Defaults to #{$control-focus-style}\n /\n\n @include text-inherit();\n\n --padding: 1em;\n --btn-padding: var(--padding);\n --btn-bg-color: var(--nano-color-contrast, #dad6d3);\n --btn-bg-color--open: var(--nano-color-base, #dad6d3);\n --btn-bg-color--hover: var(--nano-color-tint, #{$color-offwhite});\n --btn-text-color: var(--nano-color-base, #455556);\n --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));\n --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));\n --content-bg-color: transparent;\n --content-text-color: #455556;\n --content-transition: height 0.2s ease-out;\n --border-width: none;\n --border-color: none;\n --border-style: none;\n --border-radius: none;\n --box-shadow: none;\n --focus-style: #{$control-focus-style};\n\n display: block;\n border-style: var(--border-style);\n border-width: var(--border-width-dims);\n border-color: var(--border-color);\n border-radius: var(--border-radius-dims);\n box-shadow: var(--box-shadow);\n}\n\n:host(:last-of-type) {\n --border-width-dims: 0 var(--border-width) var(--border-width);\n --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);\n\n .open .content {\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n }\n}\n\n:host(:first-of-type) {\n --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;\n --border-width-dims: var(--border-width);\n}\n\n:host(:first-of-type:last-of-type) {\n --border-radius-dims: var(--border-radius);\n --border-width-dims: var(--border-width);\n}\n\n:host(:not(:last-of-type):not(:first-of-type)) {\n --border-width-dims: 0 var(--border-width) var(--border-width);\n}\n\n:host(.nano-color) {\n --btn-bg-color: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n --btn-bg-color--open: var(--nano-color-base, #{nano-color(primary, base)});\n --btn-bg-color--hover: var(--nano-color-tint, #{nano-color(primary, tint)});\n --btn-text-color: var(--nano-color-base, #{nano-color(primary, base)});\n --btn-text-color--open:\n var(\n --nano-color-contrast,\n #{nano-color(primary, contrast)}\n );\n --btn-text-color--hover:\n var(\n --nano-color-contrast,\n #{nano-color(primary, contrast)}\n );\n}\n\nbutton {\n @include input-cover;\n\n padding: var(--btn-padding);\n text-align: inherit;\n position: relative;\n font-size: 1em;\n margin: 0;\n transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;\n display: flex;\n align-items: center;\n background: var(--btn-bg-color);\n color: var(--btn-text-color);\n border-radius: var(--border-radius-dims);\n\n &:focus {\n box-shadow: var(--focus-style);\n outline: none;\n position: relative;\n z-index: 1;\n }\n\n :hover & {\n background: var(--btn-bg-color--hover);\n color: var(--btn-text-color--hover);\n }\n\n .open & {\n background: var(--btn-bg-color--open);\n color: var(--btn-text-color--open);\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .label {\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n flex: 1;\n display: inline-block;\n }\n\n .icon {\n line-height: 0;\n flex-direction: column;\n justify-content: center;\n display: inline-block;\n color: currentColor;\n transition: 0.3s ease transform;\n transform-origin: center;\n\n &--start {\n @include margin(0, var(--padding), 0, 0);\n }\n\n &--end {\n @include margin(0, 0, 0, var(--padding));\n }\n\n ::slotted(nano-icon) {\n --color: 'currentColor';\n }\n }\n}\n\n.content {\n color: var(--content-text-color);\n background: var(--content-bg-color);\n height: 0;\n overflow: hidden;\n transition: 0.2s ease border-radius;\n outline: none;\n\n .loaded & {\n transition: var(--content-transition), 0.2s ease border-radius;\n }\n\n > {\n opacity: 0;\n transition: opacity 0.2s ease-out;\n\n .open & {\n opacity: 1;\n }\n }\n\n &__area {\n padding: var(--padding);\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Prop,\n h,\n Element,\n Watch,\n Host,\n State,\n writeTask,\n readTask,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils';\n\n/*\n A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n /\n/\n @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n /\n@Component({\n tag: 'nano-details',\n styleUrl: 'details.scss',\n shadow: true,\n})\nexport class Details {\n private hasStartSlot: boolean;\n private hasEndSlot: boolean;\n private slideId = `nano-details-${slideIds++}`;\n private mo?: MutationObserver;\n private ro?: ResizeObserver;\n private contentArea: HTMLDivElement;\n private stateChanging: boolean = false;\n\n @State() isLoading = true;\n\n @Element() private el: HTMLNanoDetailsElement;\n\n private contentEl: HTMLElement;\n\n /\n Button / handle text to be used if no complex markup required.\n * Otherwise use label slot.\n /\n @Prop() label: string = '';\n\n /\n Should item be open on load\n /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /\n Have no handle - you will need to control the hiding / showing of content with script\n /\n @Prop() noHandle: boolean = false;\n\n /\n Icon slot rotation amount (degrees) on open\n /\n @Prop() iconRotation: number = 90;\n\n /\n Color to use from your application's color palette.\n /\n @Prop() color?: Color;\n\n /\n Emitted when the component opens.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n /\n @Event() nanoOpened: EventEmitter;\n\n /\n Emitted when the component closes.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n */\n @Event() nanoClosed: EventEmitter;\n\n @Watch('open')\n toggleClick() {\n this.stateChanging = true;\n if (this.open) this.show();\n else this.hide();\n }\n\n private onKeyDown = (ev: KeyboardEvent) => {\n switch (ev.key) {\n case 'Enter':\n case ' ':\n this.open = !this.open;\n break;\n }\n };\n\n private onMouseDown = () => {\n if (this.stateChanging) return;\n this.open = !this.open;\n };\n\n private hide() {\n this.nanoClosed.emit(this.open);\n displayTransition(this.contentEl, 'is-shown', false).then(\n () => (this.stateChanging = false)\n );\n this.contentEl.style.height = '0px';\n }\n\n private show() {\n this.nanoOpened.emit();\n displayTransition(this.contentEl, 'is-shown', true).then(() => {\n this.stateChanging = false;\n });\n this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n }\n\n private resize() {\n if (\n !this.open \|\|\n !this.contentArea \|\|\n !this.contentEl \|\|\n this.stateChanging\n )\n return;\n readTask(() => {\n if (this.contentArea.scrollHeight > 0) {\n writeTask(() => {\n this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n });\n }\n });\n }\n\n private attachRO() {\n if (this.ro \|\| !this.contentArea) return;\n\n const ro = (this.ro = new ResizeObserver(() => this.resize()));\n ro.observe(this.contentArea);\n }\n\n componentWillLoad() {\n this.hasStartSlot = !!this.el.querySelector('[slot=\"icon-start\"]');\n this.hasEndSlot = !!this.el.querySelector('[slot=\"icon-end\"]');\n setTimeout(() => {\n this.isLoading = false;\n }, 100);\n }\n\n componentDidLoad() {\n if (this.open) {\n // disable animation on start\n setTimeout(() => {\n this.show();\n }, 0);\n }\n this.attachRO();\n }\n\n connectedCallback() {\n const mo = (this.mo = new MutationObserver(() => this.resize()));\n mo.observe(this.el, { childList: true, subtree: true, attributes: false });\n this.attachRO();\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n if (this.ro) this.ro.disconnect();\n }\n\n render() {\n return (\n <Host class={{ ...createColorClasses(this.color) }}>\n <div\n class={{\n open: this.open,\n loaded: !this.isLoading,\n }}\n >\n <button\n onKeyDown={this.onKeyDown}\n onMouseDown={this.onMouseDown}\n aria-controls={this.slideId}\n aria-expanded={this.open ? 'true' : 'false'}\n style={{ display: this.noHandle ? 'none' : '' }}\n >\n {this.hasStartSlot ? (\n <span\n class=\"icon icon--start\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-start\" />\n </span>\n ) : (\n ''\n )}\n <div class=\"label\">\n {this.label ? this.label : <slot name=\"label\" />}\n </div>\n {this.hasEndSlot ? (\n <span\n class=\"icon icon--end\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-end\" />\n </span>\n ) : (\n ''\n )}\n </button>\n <div\n class=\"content\"\n ref={(div) => (this.contentEl = div)}\n tabindex=\"-1\"\n id={this.slideId}\n >\n <div ref={(div) => (this.contentArea = div)} class=\"content__area\">\n <slot />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\nlet slideIds = 0;\n"],"version":3}
1	+ {"file":"nano-details.js","mappings":"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","names":["ResizeObserver"],"sources":["./src/components/details/details.scss?tag=nano-details&encapsulation=shadow","./src/components/details/details.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/form';\n\n:host {\n /*\n @prop --padding: Default to 1em;\n\n * @prop --btn-padding: Defaults to var(--padding);\n * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);\n * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);\n * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #{map.get($colors, offwhite)});\n\n * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);\n * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n\n * @prop --content-bg-color: Defaults to transparent;\n * @prop --content-text-color: Defaults to #455556;\n * @prop --content-transition: Defaults to height .2s ease-out;\n\n * @prop --border-width: Defaults to none;\n * @prop --border-color: Defaults to none;\n * @prop --border-style: Defaults to none;\n * @prop --border-radius: Defaults to none;\n * @prop --box-shadow: Defaults to none;\n * @prop --focus-style: Defaults to #{$control-focus-style}\n /\n\n @include text-inherit();\n\n --padding: 1em;\n --btn-padding: var(--padding);\n --btn-bg-color: var(--nano-color-contrast, #dad6d3);\n --btn-bg-color--open: var(--nano-color-base, #dad6d3);\n --btn-bg-color--hover: var(--nano-color-tint, #{map.get($colors, offwhite)});\n --btn-text-color: var(--nano-color-base, #455556);\n --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));\n --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));\n --content-bg-color: transparent;\n --content-text-color: #455556;\n --content-transition: height 0.2s ease-out;\n --border-width: none;\n --border-color: none;\n --border-style: none;\n --border-radius: none;\n --box-shadow: none;\n --focus-style: #{$control-focus-style};\n\n display: block;\n border-style: var(--border-style);\n border-width: var(--border-width-dims);\n border-color: var(--border-color);\n border-radius: var(--border-radius-dims);\n box-shadow: var(--box-shadow);\n}\n\n:host(:last-of-type) {\n --border-width-dims: 0 var(--border-width) var(--border-width);\n --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);\n\n .open .content {\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n }\n}\n\n:host(:first-of-type) {\n --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;\n --border-width-dims: var(--border-width);\n}\n\n:host(:first-of-type:last-of-type) {\n --border-radius-dims: var(--border-radius);\n --border-width-dims: var(--border-width);\n}\n\n:host(:not(:last-of-type):not(:first-of-type)) {\n --border-width-dims: 0 var(--border-width) var(--border-width);\n}\n\n:host(.nano-color) {\n --btn-bg-color: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n --btn-bg-color--open: var(--nano-color-base, #{nano-color(primary, base)});\n --btn-bg-color--hover: var(--nano-color-tint, #{nano-color(primary, tint)});\n --btn-text-color: var(--nano-color-base, #{nano-color(primary, base)});\n --btn-text-color--open:\n var(\n --nano-color-contrast,\n #{nano-color(primary, contrast)}\n );\n --btn-text-color--hover:\n var(\n --nano-color-contrast,\n #{nano-color(primary, contrast)}\n );\n}\n\nbutton {\n @include input-cover;\n\n padding: var(--btn-padding);\n text-align: inherit;\n position: relative;\n font-size: 1em;\n margin: 0;\n transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;\n display: flex;\n align-items: center;\n background: var(--btn-bg-color);\n color: var(--btn-text-color);\n border-radius: var(--border-radius-dims);\n\n &:focus {\n box-shadow: var(--focus-style);\n outline: none;\n position: relative;\n z-index: 1;\n }\n\n :hover & {\n background: var(--btn-bg-color--hover);\n color: var(--btn-text-color--hover);\n }\n\n .open & {\n background: var(--btn-bg-color--open);\n color: var(--btn-text-color--open);\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .label {\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n flex: 1;\n display: inline-block;\n }\n\n .icon {\n line-height: 0;\n flex-direction: column;\n justify-content: center;\n display: inline-block;\n color: currentColor;\n transition: 0.3s ease transform;\n transform-origin: center;\n\n &--start {\n @include margin(0, var(--padding), 0, 0);\n }\n\n &--end {\n @include margin(0, 0, 0, var(--padding));\n }\n\n ::slotted(nano-icon) {\n --color: 'currentColor';\n }\n }\n}\n\n.content {\n color: var(--content-text-color);\n background: var(--content-bg-color);\n height: 0;\n overflow: hidden;\n transition: 0.2s ease border-radius;\n outline: none;\n\n .loaded & {\n transition: var(--content-transition), 0.2s ease border-radius;\n }\n\n > {\n opacity: 0;\n transition: opacity 0.2s ease-out;\n\n .open & {\n opacity: 1;\n }\n }\n\n &__area {\n padding: var(--padding);\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Prop,\n h,\n Element,\n Watch,\n Host,\n State,\n writeTask,\n readTask,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils';\n\n/*\n A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n /\n/\n @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n /\n@Component({\n tag: 'nano-details',\n styleUrl: 'details.scss',\n shadow: true,\n})\nexport class Details {\n private hasStartSlot: boolean;\n private hasEndSlot: boolean;\n private slideId = `nano-details-${slideIds++}`;\n private mo?: MutationObserver;\n private ro?: ResizeObserver;\n private contentArea: HTMLDivElement;\n private stateChanging: boolean = false;\n\n @State() isLoading = true;\n\n @Element() private el: HTMLNanoDetailsElement;\n\n private contentEl: HTMLElement;\n\n /\n Button / handle text to be used if no complex markup required.\n * Otherwise use label slot.\n /\n @Prop() label: string = '';\n\n /\n Should item be open on load\n /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /\n Have no handle - you will need to control the hiding / showing of content with script\n /\n @Prop() noHandle: boolean = false;\n\n /\n Icon slot rotation amount (degrees) on open\n /\n @Prop() iconRotation: number = 90;\n\n /\n Color to use from your application's color palette.\n /\n @Prop() color?: Color;\n\n /\n Emitted when the component opens.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n /\n @Event() nanoOpened: EventEmitter;\n\n /\n Emitted when the component closes.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n */\n @Event() nanoClosed: EventEmitter;\n\n @Watch('open')\n toggleClick() {\n this.stateChanging = true;\n if (this.open) this.show();\n else this.hide();\n }\n\n private onKeyDown = (ev: KeyboardEvent) => {\n switch (ev.key) {\n case 'Enter':\n case ' ':\n this.open = !this.open;\n break;\n }\n };\n\n private onMouseDown = () => {\n if (this.stateChanging) return;\n this.open = !this.open;\n };\n\n private hide() {\n this.nanoClosed.emit(this.open);\n displayTransition(this.contentEl, 'is-shown', false).then(\n () => (this.stateChanging = false)\n );\n this.contentEl.style.height = '0px';\n }\n\n private show() {\n this.nanoOpened.emit();\n displayTransition(this.contentEl, 'is-shown', true).then(() => {\n this.stateChanging = false;\n });\n this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n }\n\n private resize() {\n if (\n !this.open \|\|\n !this.contentArea \|\|\n !this.contentEl \|\|\n this.stateChanging\n )\n return;\n readTask(() => {\n if (this.contentArea.scrollHeight > 0) {\n writeTask(() => {\n this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n });\n }\n });\n }\n\n private attachRO() {\n if (this.ro \|\| !this.contentArea) return;\n\n const ro = (this.ro = new ResizeObserver(() => this.resize()));\n ro.observe(this.contentArea);\n }\n\n componentWillLoad() {\n this.hasStartSlot = !!this.el.querySelector('[slot=\"icon-start\"]');\n this.hasEndSlot = !!this.el.querySelector('[slot=\"icon-end\"]');\n setTimeout(() => {\n this.isLoading = false;\n }, 100);\n }\n\n componentDidLoad() {\n if (this.open) {\n // disable animation on start\n setTimeout(() => {\n this.show();\n }, 0);\n }\n this.attachRO();\n }\n\n connectedCallback() {\n const mo = (this.mo = new MutationObserver(() => this.resize()));\n mo.observe(this.el, { childList: true, subtree: true, attributes: false });\n this.attachRO();\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n if (this.ro) this.ro.disconnect();\n }\n\n render() {\n return (\n <Host class={{ ...createColorClasses(this.color) }}>\n <div\n class={{\n open: this.open,\n loaded: !this.isLoading,\n }}\n >\n <button\n onKeyDown={this.onKeyDown}\n onMouseDown={this.onMouseDown}\n aria-controls={this.slideId}\n aria-expanded={this.open ? 'true' : 'false'}\n style={{ display: this.noHandle ? 'none' : '' }}\n >\n {this.hasStartSlot ? (\n <span\n class=\"icon icon--start\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-start\" />\n </span>\n ) : (\n ''\n )}\n <div class=\"label\">\n {this.label ? this.label : <slot name=\"label\" />}\n </div>\n {this.hasEndSlot ? (\n <span\n class=\"icon icon--end\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-end\" />\n </span>\n ) : (\n ''\n )}\n </button>\n <div\n class=\"content\"\n ref={(div) => (this.contentEl = div)}\n tabindex=\"-1\"\n id={this.slideId}\n >\n <div ref={(div) => (this.contentArea = div)} class=\"content__area\">\n <slot />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\nlet slideIds = 0;\n"],"version":3}