npm - @nanoporetech-digital/components - Versions diffs - 7.4.5 → 7.5.1 - Mend

@nanoporetech-digital/components 7.4.5 → 7.5.1

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

Files changed (400) hide show

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

	@@ -1 +1 @@
1	- {"file":"nano-drawer.js","mappings":"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","names":[],"sources":["src/components/drawer/drawer.scss?tag=nano-drawer&encapsulation=shadow","src/components/drawer/drawer.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n\n:host {\n /*\n @prop --size: The preferred size of the drawer; width or height depending on placement. Note that the drawer will shrink to accommodate smaller screens. Defaults to 25rem\n * @prop --panel-background: background color of panel. Default to 'white'\n * @prop --panel-shadow: Defaults to #{tokens.$layer-shadow-xlarge};\n * @prop --scrim-color: overlay colour of alert display. Defaults to #{tokens.$layer-overlay-dark};\n * @prop --footer-background: Defaults to #{map.get(tokens.$colors, lightgrey)};\n * @prop --header-spacing: The amount of padding to use for the header.\n * @prop --body-spacing: The amount of padding to use for the body.\n * @prop --footer-spacing: The amount of padding to use for the footer. Defaults to #{tokens.$spacing-medium} #{tokens.$spacing-large}\n * @prop --header-button-color: defaults to #{map.get(tokens.$colors, palegrey)};\n /\n\n --size: 25rem;\n --panel-background: white;\n --panel-shadow: #{tokens.$layer-shadow-xlarge};\n --scrim-color: #{tokens.$layer-overlay-dark};\n --header-button-color: #{map.get(tokens.$colors, palegrey)};\n --footer-background: #{map.get(tokens.$colors, lightgrey)};\n --header-background: var(--panel-background);\n --header-spacing: #{tokens.$spacing-large};\n --body-spacing: #{tokens.$spacing-large};\n --footer-spacing: #{tokens.$spacing-medium} #{tokens.$spacing-large};\n --dir: 1;\n}\n\n@include mx.rtl-host() {\n --dir: -1;\n}\n\n.drawer {\n inset-block-start: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n block-size: 100%;\n pointer-events: none;\n overflow: hidden;\n\n &--contained {\n position: absolute;\n z-index: initial;\n }\n\n &--fixed {\n position: fixed;\n z-index: #{tokens.$layer-index-modal};\n }\n}\n\n.drawer__panel {\n position: absolute;\n z-index: 2;\n max-inline-size: 100%;\n max-block-size: 100%;\n background-color: var(--panel-background);\n box-shadow: var(--panel-shadow);\n pointer-events: all;\n transition: #{tokens.$transition-fast} opacity, #{tokens.$transition-fast} transform;\n display: flex;\n flex-direction: column;\n\n @media (forced-colors: active) {\n border: solid 1px #{map.get(tokens.$colors, black)};\n }\n\n &:focus {\n outline: none;\n }\n\n .drawer--nodismiss & {\n animation: cannotClose 0.25s ease-in-out 1;\n\n @keyframes cannotClose {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.08);\n }\n\n 100% {\n transform: scale(1);\n }\n }\n }\n\n .drawer--top & {\n inset-block: 0 auto;\n inset-inline: 0 auto;\n inline-size: 100%;\n block-size: var(--size);\n opacity: 0;\n transform: translateY(-100%);\n }\n\n .drawer--bottom & {\n inset-block: auto 0;\n inset-inline: 0 auto;\n inline-size: 100%;\n block-size: var(--size);\n opacity: 0;\n transform: translateY(100%);\n }\n\n .drawer--top.drawer--open &,\n .drawer--bottom.drawer--open & {\n opacity: 1;\n transform: translateY(0);\n }\n\n .drawer--start & {\n inset-block: 0 auto;\n inset-inline: 0 auto;\n inline-size: var(--size);\n block-size: 100%;\n opacity: 0;\n transform: translateX(calc(var(--dir) -100%));\n }\n\n .drawer--end & {\n inset-block: 0 auto;\n inset-inline: auto 0;\n inline-size: var(--size);\n block-size: 100%;\n opacity: 0;\n transform: translateX(calc(var(--dir) * 100%));\n }\n\n .drawer--start.drawer--open &,\n .drawer--end.drawer--open & {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n.drawer__header {\n inline-size: 100%;\n display: flex;\n background-color: var(--header-background);\n\n [stuck] & {\n box-shadow: #{tokens.$layer-shadow-medium};\n }\n}\n\n.drawer__title {\n flex: 1 1 auto;\n font: inherit;\n font-size: #{tokens.$fontsize-large};\n line-height: 1.2;\n padding: var(--header-spacing);\n margin: 0;\n}\n\n.drawer__header-actions {\n flex-shrink: 0;\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: #{tokens.$spacing-xsmall};\n padding: 0 var(--header-spacing);\n\n .drawer__close,\n ::slotted(nano-icon-button) {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: #{tokens.$fontsize-xlarge};\n\n --color: var(--header-button-color);\n }\n}\n\n.drawer__main {\n display: flex;\n flex-direction: column;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n flex: 1 1 auto;\n}\n\n.drawer__body {\n display: block;\n flex: 1 1 auto;\n padding: var(--body-spacing);\n padding-block: 0 var(--body-spacing);\n padding-inline: var(--body-spacing);\n\n .drawer:not(.drawer--has-header) & {\n padding-block-start: var(--body-spacing);\n }\n}\n\n.drawer__footer {\n inline-size: 100%;\n text-align: end;\n padding: var(--footer-spacing);\n background: var(--footer-background);\n inset-block-start: 1px;\n position: relative;\n\n ::slotted(button:not(:last-of-type)) {\n margin-inline-end: #{tokens.$spacing-xsmall};\n }\n\n .drawer:not(.drawer--has-footer) & {\n display: none;\n }\n}\n\n.drawer__overlay {\n display: block;\n position: fixed;\n inset: 0;\n background-color: var(--scrim-color);\n pointer-events: all;\n backdrop-filter: blur(#{tokens.$layer-overlay-blur});\n opacity: 0;\n transition: #{tokens.$transition-fast} opacity;\n\n .drawer--open & {\n opacity: 1;\n }\n\n .drawer--contained & {\n display: none;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Prop,\n State,\n Watch,\n h,\n ComponentInterface,\n Method,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { waitForEvent } from '../../utils/events';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\n\n/*\n Drawers slide in from a container to expose additional options and information.\n \n @slot - The drawer's main content\n * @slot label - The drawer's label. Alternatively, you can use the `label` attribute\n * @slot header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`\n * @slot footer - The drawer's footer, usually one or more buttons representing various options\n \n @part base - The component's base wrapper\n * @part overlay - The overlay that covers the screen behind the drawer\n * @part panel - The drawer's panel (where the drawer and its content are rendered)\n * @part header - The drawer's header. This element wraps the title and header actions\n * @part header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`\n * @part title - The drawer's title\n * @part close-button - The close button, an `<nano-icon-button>`\n * @part close-button__base - The close button's exported `base` part\n * @part body - The drawer's body\n * @part footer - The drawer's footer\n /\n\n@Component({\n tag: 'nano-drawer',\n shadow: true,\n styleUrl: 'drawer.scss',\n})\nexport class Drawer implements ComponentInterface {\n // Private State\n\n @Element() host: HTMLNanoDrawerElement;\n\n private originalTrigger: HTMLElement \| null;\n private drawer: HTMLElement;\n private overlay: HTMLElement;\n private modal: Modal;\n\n get panel() {\n return this._panel;\n }\n set panel(ele: HTMLElement) {\n if (this._panel) {\n this.panel.removeEventListener('animationend', this.handleTransitionEnd);\n }\n if (!ele) return;\n\n ele.addEventListener('transitionend', this.handleTransitionEnd);\n this._panel = ele;\n }\n private _panel: HTMLElement;\n\n @State() noDismiss = false;\n @State() hasFooter: boolean;\n\n // Public API\n\n /\n Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\n * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n /\n @Prop({ reflect: true, mutable: true }) open = false;\n\n /\n The drawer's label as displayed in the header. You should always include a relevant label even when using\n * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n /\n @Prop({ reflect: true }) label!: string;\n\n /* The direction from which the drawer will open. /\n @Prop({ reflect: true }) placement: 'top' \| 'end' \| 'bottom' \| 'start' =\n 'end';\n\n /\n By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n * its parent element, set this attribute and add `position: relative` to the parent.\n /\n @Prop({ reflect: true }) contained = false;\n\n /\n Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n * accessible way for users to dismiss the drawer.\n /\n @Prop({ reflect: true }) noHeader = false;\n\n /* Store search queries (against this ID) to the component store. Use in conjunction with storeMethod /\n @Prop() storeId?: string;\n\n /* The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). /\n @Prop() storeMethod: StorageMethods = 'url-hash';\n\n /* An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key /\n @Prop() noUserDismiss = false;\n\n /* Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` /\n @Prop() hoist = false;\n\n @Watch('hoist')\n handleHoistChange() {\n if (!this.hoist \|\| Array.from(document.body.children).includes(this.host))\n return;\n document.body.prepend(this.host);\n }\n\n /* Emitted when the drawer opens. /\n @Event() nanoShow: EventEmitter;\n\n /* Emitted when the drawer closes. /\n @Event() nanoHide: EventEmitter;\n\n /* Emitted after the drawer closes and all animations are complete. /\n @Event() nanoAfterHide: EventEmitter;\n\n /* Emitted after the drawer opens and all animations are complete. /\n @Event() nanoAfterShow: EventEmitter;\n\n /\n Emitted when the drawer opens and is ready to receive focus. Calling\n * `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n /\n @Event() nanoInitialFocus: EventEmitter;\n\n /\n Emitted when the user attempts to\n * close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n * `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n * destructive behavior such as data loss.\n /\n @Event() nanoRquestClose: EventEmitter<{\n source: 'close-button' \| 'keyboard' \| 'overlay';\n }>;\n\n /\n Shows the drawer.\n * @returns a promise that resolves when the drawer has finished opening\n /\n @Method()\n async show() {\n if (this.open) return undefined;\n\n this.open = true;\n return waitForEvent(this.host, 'nanoAfterShow');\n }\n\n /\n Hides the drawer\n * @returns a promise that resolves when the drawer has finished closing\n /\n @Method()\n async hide() {\n if (!this.open) return undefined;\n\n this.open = false;\n return waitForEvent(this.host, 'nanoAfterHide');\n }\n\n private requestClose(source: 'close-button' \| 'keyboard' \| 'overlay') {\n const nanoRequestClose = this.nanoRquestClose.emit({ source });\n\n if (nanoRequestClose.defaultPrevented \|\| this.noUserDismiss) {\n this.noDismiss = true;\n setTimeout(() => (this.noDismiss = false), 250);\n return;\n }\n\n this.hide();\n }\n\n // Prop Change Handlers\n\n @Watch('contained')\n handleNoModalChange() {\n if (this.open && !this.contained) {\n this.modal.activate();\n lockBodyScrolling(this.host);\n }\n\n if (this.open && this.contained) {\n this.modal.deactivate();\n unlockBodyScrolling(this.host);\n }\n }\n\n @Watch('open')\n async handleOpenChange() {\n if (this.open) {\n // Show\n this.nanoShow.emit();\n this.addOpenListeners();\n this.originalTrigger = document.activeElement as HTMLElement;\n\n // Lock body scrolling only if the drawer isn't contained\n if (!this.contained) {\n this.modal.activate();\n lockBodyScrolling(this.host);\n }\n\n // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the\n // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`\n // ourselves, and add the attribute back afterwards.\n const autoFocusTarget = this.host.querySelector('[autofocus]');\n if (autoFocusTarget) {\n autoFocusTarget.removeAttribute('autofocus');\n }\n this.drawer.hidden = false;\n\n // Set initial focus\n requestAnimationFrame(() => {\n const nanoInitialFocus = this.nanoInitialFocus.emit();\n\n if (!nanoInitialFocus.defaultPrevented) {\n // Set focus to the autofocus target and restore the attribute\n if (autoFocusTarget) {\n (autoFocusTarget as HTMLInputElement).focus({\n preventScroll: true,\n });\n } else {\n this.panel.focus({ preventScroll: true });\n }\n }\n\n // Restore the autofocus attribute\n if (autoFocusTarget) {\n autoFocusTarget.setAttribute('autofocus', '');\n }\n });\n\n this.nanoAfterShow.emit();\n return;\n }\n\n // Hide\n this.nanoHide.emit();\n this.removeOpenListeners();\n\n if (!this.contained) {\n this.modal.deactivate();\n unlockBodyScrolling(this.host);\n }\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (typeof trigger?.focus === 'function') {\n setTimeout(() => trigger.focus());\n }\n }\n\n // Event Handling\n\n private addOpenListeners() {\n document.addEventListener('keydown', this.handleDocumentKeyDown);\n }\n\n private removeOpenListeners() {\n document.removeEventListener('keydown', this.handleDocumentKeyDown);\n }\n\n private handleDocumentKeyDown = (event: KeyboardEvent) => {\n // Contained drawers aren't modal and don't response to the escape key\n if (this.contained) {\n return;\n }\n\n if (event.key === 'Escape' && this.modal.isActive() && this.open) {\n event.stopImmediatePropagation();\n this.requestClose('keyboard');\n }\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (\n event.propertyName === 'opacity' &&\n event\n .composedPath()\n .find((node) => node === this.panel \|\| node === this.overlay)\n ) {\n if (!this.open) {\n this.drawer.hidden = true;\n // Now that the dialog is hidden, restore the overlay and panel for next time\n this.overlay.hidden = false;\n this.panel.hidden = false;\n }\n if (this.open) this.nanoAfterShow.emit();\n else this.nanoAfterHide.emit();\n }\n };\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, 'footer');\n };\n\n // Component Lifecycle\n\n connectedCallback() {\n this.handleHoistChange();\n this.modal = new Modal(this.host);\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n // Show on init if open\n if (this.open) this.show();\n if (this.storeId)\n ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n }\n\n componentDidLoad() {\n this.drawer.hidden = !this.open;\n\n if (this.open) {\n this.addOpenListeners();\n\n if (!this.contained) {\n this.modal.activate();\n lockBodyScrolling(this.host);\n }\n }\n }\n\n render() {\n return (\n <div\n ref={(ele) => (this.drawer = ele)}\n part=\"base\"\n class={{\n drawer: true,\n 'drawer--open': this.open,\n [`drawer--${this.placement}`]: true,\n 'drawer--contained': this.contained,\n 'drawer--fixed': !this.contained,\n 'drawer--has-footer': hasSlot(this.host, 'footer'),\n 'drawer--has-header': !this.noHeader,\n 'drawer--nodismiss': this.noDismiss,\n }}\n >\n <div\n ref={(ele) => (this.overlay = ele)}\n part=\"overlay\"\n class=\"drawer__overlay\"\n onClick={() => this.requestClose('overlay')}\n tabindex=\"-1\"\n />\n\n <div\n ref={(ele) => (this.panel = ele)}\n part=\"panel\"\n class=\"drawer__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : undefined}\n aria-labelledby={!this.noHeader ? 'title' : undefined}\n tabindex=\"0\"\n >\n <div class=\"drawer__main\">\n {!this.noHeader && (\n <nano-sticker>\n <div part=\"header\" class=\"drawer__header\">\n <h2 part=\"title\" class=\"drawer__title\" id=\"title\">\n {/ If there's no label, use an invisible character to prevent the header from collapsing */}\n <slot name=\"label\">\n {this.label.length > 0\n ? this.label\n : String.fromCharCode(65279)}\n </slot>\n </h2>\n <div part=\"header-actions\" class=\"drawer__header-actions\">\n <slot name=\"header-actions\" />\n\n {!this.noUserDismiss && (\n <nano-icon-button\n part=\"close-button\"\n exportparts=\"base:close-button__base\"\n class=\"drawer__close\"\n iconName=\"light/xmark\"\n label=\"Close\"\n onClick={() => this.requestClose('close-button')}\n />\n )}\n </div>\n </div>\n </nano-sticker>\n )}\n\n <div part=\"body\" class=\"drawer__body\">\n <slot />\n </div>\n\n <nano-sticker position=\"bottom\">\n <footer part=\"footer\" class=\"drawer__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n </footer>\n </nano-sticker>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nano-drawer.js","mappings":"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","names":[],"sources":["src/components/drawer/drawer.scss?tag=nano-drawer&encapsulation=shadow","src/components/drawer/drawer.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n\n:host {\n /*\n @prop --size: The preferred size of the drawer; width or height depending on placement. Note that the drawer will shrink to accommodate smaller screens. Defaults to 25rem\n * @prop --panel-background: background color of panel. Default to 'white'\n * @prop --panel-shadow: Defaults to #{tokens.$layer-shadow-xlarge};\n * @prop --scrim-color: overlay colour of alert display. Defaults to #{tokens.$layer-overlay-dark};\n * @prop --footer-background: Defaults to #{map.get(tokens.$colors, lightgrey)};\n * @prop --header-spacing: The amount of padding to use for the header.\n * @prop --body-spacing: The amount of padding to use for the body.\n * @prop --footer-spacing: The amount of padding to use for the footer. Defaults to #{tokens.$spacing-medium} #{tokens.$spacing-large}\n * @prop --header-button-color: defaults to #{map.get(tokens.$colors, palegrey)};\n /\n\n --size: 25rem;\n --panel-background: white;\n --panel-shadow: #{tokens.$layer-shadow-xlarge};\n --scrim-color: #{tokens.$layer-overlay-dark};\n --header-button-color: #{map.get(tokens.$colors, palegrey)};\n --footer-background: #{map.get(tokens.$colors, lightgrey)};\n --header-background: var(--panel-background);\n --header-spacing: #{tokens.$spacing-large};\n --body-spacing: #{tokens.$spacing-large};\n --footer-spacing: #{tokens.$spacing-medium} #{tokens.$spacing-large};\n --dir: 1;\n}\n\n@include mx.rtl-host() {\n --dir: -1;\n}\n\n.drawer {\n inset-block-start: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n block-size: 100%;\n pointer-events: none;\n overflow: hidden;\n\n &--contained {\n position: absolute;\n z-index: initial;\n }\n\n &--fixed {\n position: fixed;\n z-index: #{tokens.$layer-index-modal};\n }\n}\n\n.drawer__panel {\n position: absolute;\n z-index: 2;\n max-inline-size: 100%;\n max-block-size: 100%;\n background-color: var(--panel-background);\n box-shadow: var(--panel-shadow);\n pointer-events: all;\n transition: #{tokens.$transition-fast} opacity, #{tokens.$transition-fast} transform;\n display: flex;\n flex-direction: column;\n\n @media (forced-colors: active) {\n border: solid 1px #{map.get(tokens.$colors, black)};\n }\n\n &:focus {\n outline: none;\n }\n\n .drawer--nodismiss & {\n animation: cannotClose 0.25s ease-in-out 1;\n // transform-origin: center center;\n\n @keyframes cannotClose {\n 0% {\n scale: 1;\n }\n\n 50% {\n scale: 1.08;\n }\n\n 100% {\n scale: 1;\n }\n }\n }\n\n .drawer--top & {\n inset-block: 0 auto;\n inset-inline: 0 auto;\n inline-size: 100%;\n block-size: var(--size);\n opacity: 0;\n transform: translateY(-100%);\n }\n\n .drawer--bottom & {\n inset-block: auto 0;\n inset-inline: 0 auto;\n inline-size: 100%;\n block-size: var(--size);\n opacity: 0;\n transform: translateY(100%);\n }\n\n .drawer--top.drawer--open &,\n .drawer--bottom.drawer--open & {\n opacity: 1;\n transform: translateY(0);\n }\n\n .drawer--start & {\n inset-block: 0 auto;\n inset-inline: 0 auto;\n inline-size: var(--size);\n block-size: 100%;\n opacity: 0;\n transform: translateX(calc(var(--dir) -100%));\n }\n\n .drawer--end & {\n inset-block: 0 auto;\n inset-inline: auto 0;\n inline-size: var(--size);\n block-size: 100%;\n opacity: 0;\n transform: translateX(calc((var(--dir) * 100%)));\n }\n\n .drawer--start.drawer--open & {\n opacity: 1;\n transform: translateX(0);\n }\n\n .drawer--end.drawer--open & {\n opacity: 1;\n transform: translateX(calc(var(--nano-scroll-lock-size) * -1));\n }\n}\n\n.drawer__header {\n inline-size: 100%;\n display: flex;\n background-color: var(--header-background);\n\n [stuck] & {\n box-shadow: #{tokens.$layer-shadow-medium};\n }\n}\n\n.drawer__title {\n flex: 1 1 auto;\n font: inherit;\n font-size: #{tokens.$fontsize-large};\n line-height: 1.2;\n padding: var(--header-spacing);\n margin: 0;\n}\n\n.drawer__header-actions {\n flex-shrink: 0;\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: #{tokens.$spacing-xsmall};\n padding: 0 var(--header-spacing);\n\n .drawer__close,\n ::slotted(nano-icon-button) {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: #{tokens.$fontsize-xlarge};\n\n --color: var(--header-button-color);\n }\n}\n\n.drawer__main {\n display: flex;\n flex-direction: column;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n flex: 1 1 auto;\n}\n\n.drawer__body {\n display: block;\n flex: 1 1 auto;\n padding: var(--body-spacing);\n padding-block: 0 var(--body-spacing);\n padding-inline: var(--body-spacing);\n\n .drawer:not(.drawer--has-header) & {\n padding-block-start: var(--body-spacing);\n }\n}\n\n.drawer__footer {\n inline-size: 100%;\n text-align: end;\n padding: var(--footer-spacing);\n background: var(--footer-background);\n inset-block-start: 1px;\n position: relative;\n\n ::slotted(button:not(:last-of-type)) {\n margin-inline-end: #{tokens.$spacing-xsmall};\n }\n\n .drawer:not(.drawer--has-footer) & {\n display: none;\n }\n}\n\n.drawer__overlay {\n display: block;\n position: fixed;\n inset: 0;\n background-color: var(--scrim-color);\n pointer-events: all;\n backdrop-filter: blur(#{tokens.$layer-overlay-blur});\n opacity: 0;\n transition: #{tokens.$transition-fast} opacity;\n\n .drawer--open & {\n opacity: 1;\n }\n\n .drawer--contained & {\n display: none;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Prop,\n State,\n Watch,\n h,\n ComponentInterface,\n Method,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { waitForEvent } from '../../utils/events';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\n\n/*\n Drawers slide in from a container to expose additional options and information.\n \n @slot - The drawer's main content\n * @slot label - The drawer's label. Alternatively, you can use the `label` attribute\n * @slot header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`\n * @slot footer - The drawer's footer, usually one or more buttons representing various options\n \n @part base - The component's base wrapper\n * @part overlay - The overlay that covers the screen behind the drawer\n * @part panel - The drawer's panel (where the drawer and its content are rendered)\n * @part header - The drawer's header. This element wraps the title and header actions\n * @part header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`\n * @part title - The drawer's title\n * @part close-button - The close button, an `<nano-icon-button>`\n * @part close-button__base - The close button's exported `base` part\n * @part body - The drawer's body\n * @part footer - The drawer's footer\n /\n\n@Component({\n tag: 'nano-drawer',\n shadow: true,\n styleUrl: 'drawer.scss',\n})\nexport class Drawer implements ComponentInterface {\n // Private State\n\n @Element() host: HTMLNanoDrawerElement;\n\n private originalTrigger: HTMLElement \| null;\n private drawer: HTMLElement;\n private overlay: HTMLElement;\n private modal: Modal;\n\n get panel() {\n return this._panel;\n }\n set panel(ele: HTMLElement) {\n if (this._panel) {\n this.panel.removeEventListener('animationend', this.handleTransitionEnd);\n }\n if (!ele) return;\n\n ele.addEventListener('transitionend', this.handleTransitionEnd);\n this._panel = ele;\n }\n private _panel: HTMLElement;\n\n @State() noDismiss = false;\n @State() hasFooter: boolean;\n\n // Public API\n\n /\n Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\n * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n /\n @Prop({ reflect: true, mutable: true }) open = false;\n\n /\n The drawer's label as displayed in the header. You should always include a relevant label even when using\n * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n /\n @Prop({ reflect: true }) label!: string;\n\n /* The direction from which the drawer will open. /\n @Prop({ reflect: true }) placement: 'top' \| 'end' \| 'bottom' \| 'start' =\n 'end';\n\n /\n By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n * its parent element, set this attribute and add `position: relative` to the parent.\n /\n @Prop({ reflect: true }) contained = false;\n\n /\n Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n * accessible way for users to dismiss the drawer.\n /\n @Prop({ reflect: true }) noHeader = false;\n\n /* Store search queries (against this ID) to the component store. Use in conjunction with storeMethod /\n @Prop() storeId?: string;\n\n /* The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). /\n @Prop() storeMethod: StorageMethods = 'url-hash';\n\n /* An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key /\n @Prop() noUserDismiss = false;\n\n /* Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` /\n @Prop() hoist = false;\n\n @Watch('hoist')\n handleHoistChange() {\n if (!this.hoist \|\| Array.from(document.body.children).includes(this.host))\n return;\n document.body.prepend(this.host);\n }\n\n /* Emitted when the drawer opens. /\n @Event() nanoShow: EventEmitter;\n\n /* Emitted when the drawer closes. /\n @Event() nanoHide: EventEmitter;\n\n /* Emitted after the drawer closes and all animations are complete. /\n @Event() nanoAfterHide: EventEmitter;\n\n /* Emitted after the drawer opens and all animations are complete. /\n @Event() nanoAfterShow: EventEmitter;\n\n /\n Emitted when the drawer opens and is ready to receive focus. Calling\n * `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n /\n @Event() nanoInitialFocus: EventEmitter;\n\n /\n Emitted when the user attempts to\n * close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n * `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n * destructive behavior such as data loss.\n /\n @Event() nanoRquestClose: EventEmitter<{\n source: 'close-button' \| 'keyboard' \| 'overlay';\n }>;\n\n /\n Shows the drawer.\n * @returns a promise that resolves when the drawer has finished opening\n /\n @Method()\n async show() {\n if (this.open) return undefined;\n\n this.open = true;\n return waitForEvent(this.host, 'nanoAfterShow');\n }\n\n /\n Hides the drawer\n * @returns a promise that resolves when the drawer has finished closing\n /\n @Method()\n async hide() {\n if (!this.open) return undefined;\n\n this.open = false;\n return waitForEvent(this.host, 'nanoAfterHide');\n }\n\n private requestClose(source: 'close-button' \| 'keyboard' \| 'overlay') {\n const nanoRequestClose = this.nanoRquestClose.emit({ source });\n\n if (nanoRequestClose.defaultPrevented \|\| this.noUserDismiss) {\n this.noDismiss = true;\n setTimeout(() => (this.noDismiss = false), 250);\n return;\n }\n\n this.hide();\n }\n\n // Prop Change Handlers\n\n @Watch('contained')\n handleNoModalChange() {\n if (this.open && !this.contained) {\n this.modal.activate();\n lockBodyScrolling(this.host);\n }\n\n if (this.open && this.contained) {\n this.modal.deactivate();\n unlockBodyScrolling(this.host);\n }\n }\n\n @Watch('open')\n async handleOpenChange() {\n if (this.open) {\n // Show\n this.nanoShow.emit();\n this.addOpenListeners();\n this.originalTrigger = document.activeElement as HTMLElement;\n\n // Lock body scrolling only if the drawer isn't contained\n if (!this.contained) {\n this.modal.activate();\n lockBodyScrolling(this.host);\n }\n\n // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the\n // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`\n // ourselves, and add the attribute back afterwards.\n const autoFocusTarget = this.host.querySelector('[autofocus]');\n if (autoFocusTarget) {\n autoFocusTarget.removeAttribute('autofocus');\n }\n this.drawer.hidden = false;\n\n // Set initial focus\n requestAnimationFrame(() => {\n const nanoInitialFocus = this.nanoInitialFocus.emit();\n\n if (!nanoInitialFocus.defaultPrevented) {\n // Set focus to the autofocus target and restore the attribute\n if (autoFocusTarget) {\n (autoFocusTarget as HTMLInputElement).focus({\n preventScroll: true,\n });\n } else {\n this.panel.focus({ preventScroll: true });\n }\n }\n\n // Restore the autofocus attribute\n if (autoFocusTarget) {\n autoFocusTarget.setAttribute('autofocus', '');\n }\n });\n\n this.nanoAfterShow.emit();\n return;\n }\n\n // Hide\n this.nanoHide.emit();\n this.removeOpenListeners();\n\n if (!this.contained) {\n this.modal.deactivate();\n unlockBodyScrolling(this.host);\n }\n\n // Restore focus to the original trigger\n const trigger = this.originalTrigger;\n if (typeof trigger?.focus === 'function') {\n setTimeout(() => trigger.focus());\n }\n }\n\n // Event Handling\n\n private addOpenListeners() {\n document.addEventListener('keydown', this.handleDocumentKeyDown);\n }\n\n private removeOpenListeners() {\n document.removeEventListener('keydown', this.handleDocumentKeyDown);\n }\n\n private handleDocumentKeyDown = (event: KeyboardEvent) => {\n // Contained drawers aren't modal and don't response to the escape key\n if (this.contained) {\n return;\n }\n\n if (event.key === 'Escape' && this.modal.isActive() && this.open) {\n event.stopImmediatePropagation();\n this.requestClose('keyboard');\n }\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (\n event.propertyName === 'opacity' &&\n event\n .composedPath()\n .find((node) => node === this.panel \|\| node === this.overlay)\n ) {\n if (!this.open) {\n this.drawer.hidden = true;\n // Now that the dialog is hidden, restore the overlay and panel for next time\n this.overlay.hidden = false;\n this.panel.hidden = false;\n }\n if (this.open) this.nanoAfterShow.emit();\n else this.nanoAfterHide.emit();\n }\n };\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, 'footer');\n };\n\n // Component Lifecycle\n\n connectedCallback() {\n this.handleHoistChange();\n this.modal = new Modal(this.host);\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n // Show on init if open\n if (this.open) this.show();\n if (this.storeId)\n ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n }\n\n componentDidLoad() {\n this.drawer.hidden = !this.open;\n\n if (this.open) {\n this.addOpenListeners();\n\n if (!this.contained) {\n this.modal.activate();\n lockBodyScrolling(this.host);\n }\n }\n }\n\n render() {\n return (\n <div\n ref={(ele) => (this.drawer = ele)}\n part=\"base\"\n class={{\n drawer: true,\n 'drawer--open': this.open,\n [`drawer--${this.placement}`]: true,\n 'drawer--contained': this.contained,\n 'drawer--fixed': !this.contained,\n 'drawer--has-footer': hasSlot(this.host, 'footer'),\n 'drawer--has-header': !this.noHeader,\n 'drawer--nodismiss': this.noDismiss,\n }}\n >\n <div\n ref={(ele) => (this.overlay = ele)}\n part=\"overlay\"\n class=\"drawer__overlay\"\n onClick={() => this.requestClose('overlay')}\n tabindex=\"-1\"\n />\n\n <div\n ref={(ele) => (this.panel = ele)}\n part=\"panel\"\n class=\"drawer__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : undefined}\n aria-labelledby={!this.noHeader ? 'title' : undefined}\n tabindex=\"0\"\n >\n <div class=\"drawer__main\">\n {!this.noHeader && (\n <nano-sticker>\n <div part=\"header\" class=\"drawer__header\">\n <h2 part=\"title\" class=\"drawer__title\" id=\"title\">\n {/ If there's no label, use an invisible character to prevent the header from collapsing */}\n <slot name=\"label\">\n {this.label.length > 0\n ? this.label\n : String.fromCharCode(65279)}\n </slot>\n </h2>\n <div part=\"header-actions\" class=\"drawer__header-actions\">\n <slot name=\"header-actions\" />\n\n {!this.noUserDismiss && (\n <nano-icon-button\n part=\"close-button\"\n exportparts=\"base:close-button__base\"\n class=\"drawer__close\"\n iconName=\"light/xmark\"\n label=\"Close\"\n onClick={() => this.requestClose('close-button')}\n />\n )}\n </div>\n </div>\n </nano-sticker>\n )}\n\n <div part=\"body\" class=\"drawer__body\">\n <slot />\n </div>\n\n <nano-sticker position=\"bottom\">\n <footer part=\"footer\" class=\"drawer__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n </footer>\n </nano-sticker>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/nano-intersection-observe.js CHANGED Viewed

@@ -38,7 +38,7 @@ const IntersectionObserve = /*@__PURE__*/ proxyCustomElement(class IntersectionO
         });
     }
     get host() { return this; }
-    /** The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target.
+    /** The element that is used as the viewport for checking visibility of the target. Must be an ancestor of the target.
      * Defaults to an automatic check for ancestors that `overflow: auto` or otherwise the `Document`. */
     root = 'auto';
     handleRootChange() {
@@ -138,7 +138,7 @@ const IntersectionObserve = /*@__PURE__*/ proxyCustomElement(class IntersectionO
         this.root = this._root = undefined;
     }
     render() {
-        return (h("slot", { key: '0da262d253c86deab79c0917360eec9b918e4fa0', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange }));
+        return (h("slot", { key: '75dfdac47190d025c8682bbc2756270130bdbc00', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange }));
     }
     static get watchers() { return {
         "root": ["handleRootChange"],

package/dist/components/nano-intersection-observe.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-intersection-observe.js","mappings":"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","names":[],"sources":["src/components/intersection-observe/intersection-observe.tsx"],"sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Watch,\n ComponentInterface,\n Event,\n EventEmitter,\n State,\n} from '@stencil/core';\nimport { findScrollParent } from '../../utils/scroll-parent';\n\n/*\n A thin, declarative interface to the IntersectionObserver API.\n * @slot - Main slot for any content.\n /\n@Component({\n tag: 'nano-intersection-observe',\n styles: `nano-intersection-observe { display: contents }`,\n shadow: true,\n})\nexport class IntersectionObserve implements ComponentInterface {\n private io: IntersectionObserver;\n private _root: Element \| Document;\n private _threshold: number \| number[];\n\n @State() defaultSlot: HTMLSlotElement;\n\n get observerOptions() {\n const opts: IntersectionObserverInit = {};\n\n if (this._root) opts.root = this._root;\n if (this.rootMargin) opts.rootMargin = this.rootMargin;\n if (this.threshold) opts.threshold = this._threshold;\n\n return opts;\n }\n\n get elements(): Element[] \| undefined {\n const slotted = this.defaultSlot?.assignedElements() \|\| [];\n\n return slotted.flatMap((el) => {\n const style = getComputedStyle(el);\n if (style.display.includes('contents')) return Array.from(el.children);\n else return el;\n });\n }\n\n @Element() host: HTMLNanoIntersectionObserveElement;\n\n /* The element that is used as the viewport for checking visibility of the target. Must be ~~the~~ ancestor of the target.\n * Defaults to an automatic check for ancestors that `overflow: auto` or otherwise the `Document`. /\n @Prop() root: globalThis.Element \| 'root' \| 'auto' = 'auto';\n\n @Watch('root')\n handleRootChange() {\n if (!this.root) {\n this._root = undefined;\n this.removeIO();\n return;\n }\n\n let newRoot;\n\n if (this.root === 'auto') {\n // try to find nearest scrolling parent\n newRoot = findScrollParent(this.host);\n } else if (this.root === 'root') {\n newRoot = undefined;\n } else {\n // root is set explicitly\n newRoot = this.root;\n }\n\n // if it's the document - unset as that's IO's default\n if (newRoot === document.documentElement) newRoot = undefined;\n // if new root is what we already have - ignore\n if (newRoot === this._root) return;\n\n // cache and setup io\n this._root = newRoot;\n this.addIO();\n }\n\n /\n Margin around the root. Can be similar to CSS margins property, e.g. \"10px 20px 30px 40px\" (top, right, bottom, left).\n * The values can be percentages. This set of values serves to grow or shrink each side of the root element's\n * bounding box before computing intersections. Defaults to zeros. /\n @Prop() rootMargin?: string;\n\n /\n Indicate at what percentage of the target's visibility the observer's callback should be executed.\n * If you only want to detect when visibility passes the 50% mark, you can use a value of '0.5'.\n * If you want the callback to run every time visibility passes another '25%',\n * you would specify a string of values (separated by ',') array '0, 0.25, 0.5, 0.75, 1'.\n * A value of '1.0' means that the threshold isn't considered passed until every pixel is visible.\n /\n @Prop() threshold?: string;\n\n @Watch('threshold')\n handleThresholdChange() {\n if (!this.threshold) {\n this._threshold = undefined;\n return;\n }\n\n if (this.threshold.includes(',')) {\n this._threshold = this.threshold\n .split(',')\n .map((numStr) => Number(numStr));\n return;\n }\n\n this._threshold = Number(this.threshold);\n }\n\n /* A resize break point is switched on or off /\n @Event() nanoIntersectionChange!: EventEmitter<IntersectionObserverEntry>;\n\n /* A resize break point is switched on or off /\n @Event() nanoIntersecting!: EventEmitter<IntersectionObserverEntry>;\n\n /* A resize break point is switched on or off */\n @Event() nanoNotIntersecting!: EventEmitter<IntersectionObserverEntry>;\n\n private ioCallback: IntersectionObserverCallback = (entries) => {\n entries.forEach((entry) => {\n this.nanoIntersectionChange.emit(entry);\n if (entry.isIntersecting) this.nanoIntersecting.emit(entry);\n if (!entry.isIntersecting) this.nanoNotIntersecting.emit(entry);\n });\n };\n\n private handleSlotChange = () => {\n this.addIO();\n };\n\n @Watch('defaultSlot')\n addIO() {\n if (!window['IntersectionObserver'] \|\| !this.elements?.length) return;\n if (this.io) this.removeIO();\n\n const io = (this.io = new IntersectionObserver(\n this.ioCallback,\n this.observerOptions\n ));\n this.elements?.forEach((el) => {\n io.observe(el);\n });\n }\n\n private removeIO() {\n if (!this.io) return;\n\n this.io.disconnect();\n this.io = undefined;\n }\n\n connectedCallback(): void {\n this.handleThresholdChange();\n this.handleRootChange();\n }\n\n disconnectedCallback(): void {\n this.removeIO();\n this.root = this._root = undefined;\n }\n\n render() {\n return (\n <slot\n ref={(slot) => (this.defaultSlot = slot as HTMLSlotElement)}\n onSlotchange={this.handleSlotChange}\n />\n );\n }\n}\n"],"version":3}
1	+ {"file":"nano-intersection-observe.js","mappings":"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","names":[],"sources":["src/components/intersection-observe/intersection-observe.tsx"],"sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Watch,\n ComponentInterface,\n Event,\n EventEmitter,\n State,\n} from '@stencil/core';\nimport { findScrollParent } from '../../utils/scroll-parent';\n\n/*\n A thin, declarative interface to the IntersectionObserver API.\n * @slot - Main slot for any content.\n /\n@Component({\n tag: 'nano-intersection-observe',\n styles: `nano-intersection-observe { display: contents }`,\n shadow: true,\n})\nexport class IntersectionObserve implements ComponentInterface {\n private io: IntersectionObserver;\n private _root: Element \| Document;\n private _threshold: number \| number[];\n\n @State() defaultSlot: HTMLSlotElement;\n\n get observerOptions() {\n const opts: IntersectionObserverInit = {};\n\n if (this._root) opts.root = this._root;\n if (this.rootMargin) opts.rootMargin = this.rootMargin;\n if (this.threshold) opts.threshold = this._threshold;\n\n return opts;\n }\n\n get elements(): Element[] \| undefined {\n const slotted = this.defaultSlot?.assignedElements() \|\| [];\n\n return slotted.flatMap((el) => {\n const style = getComputedStyle(el);\n if (style.display.includes('contents')) return Array.from(el.children);\n else return el;\n });\n }\n\n @Element() host: HTMLNanoIntersectionObserveElement;\n\n /* The element that is used as the viewport for checking visibility of the target. Must be an ancestor of the target.\n * Defaults to an automatic check for ancestors that `overflow: auto` or otherwise the `Document`. /\n @Prop() root: globalThis.Element \| 'root' \| 'auto' = 'auto';\n\n @Watch('root')\n handleRootChange() {\n if (!this.root) {\n this._root = undefined;\n this.removeIO();\n return;\n }\n\n let newRoot;\n\n if (this.root === 'auto') {\n // try to find nearest scrolling parent\n newRoot = findScrollParent(this.host);\n } else if (this.root === 'root') {\n newRoot = undefined;\n } else {\n // root is set explicitly\n newRoot = this.root;\n }\n\n // if it's the document - unset as that's IO's default\n if (newRoot === document.documentElement) newRoot = undefined;\n // if new root is what we already have - ignore\n if (newRoot === this._root) return;\n\n // cache and setup io\n this._root = newRoot;\n this.addIO();\n }\n\n /\n Margin around the root. Can be similar to CSS margins property, e.g. \"10px 20px 30px 40px\" (top, right, bottom, left).\n * The values can be percentages. This set of values serves to grow or shrink each side of the root element's\n * bounding box before computing intersections. Defaults to zeros. /\n @Prop() rootMargin?: string;\n\n /\n Indicate at what percentage of the target's visibility the observer's callback should be executed.\n * If you only want to detect when visibility passes the 50% mark, you can use a value of '0.5'.\n * If you want the callback to run every time visibility passes another '25%',\n * you would specify a string of values (separated by ',') array '0, 0.25, 0.5, 0.75, 1'.\n * A value of '1.0' means that the threshold isn't considered passed until every pixel is visible.\n /\n @Prop() threshold?: string;\n\n @Watch('threshold')\n handleThresholdChange() {\n if (!this.threshold) {\n this._threshold = undefined;\n return;\n }\n\n if (this.threshold.includes(',')) {\n this._threshold = this.threshold\n .split(',')\n .map((numStr) => Number(numStr));\n return;\n }\n\n this._threshold = Number(this.threshold);\n }\n\n /* A resize break point is switched on or off /\n @Event() nanoIntersectionChange!: EventEmitter<IntersectionObserverEntry>;\n\n /* A resize break point is switched on or off /\n @Event() nanoIntersecting!: EventEmitter<IntersectionObserverEntry>;\n\n /* A resize break point is switched on or off */\n @Event() nanoNotIntersecting!: EventEmitter<IntersectionObserverEntry>;\n\n private ioCallback: IntersectionObserverCallback = (entries) => {\n entries.forEach((entry) => {\n this.nanoIntersectionChange.emit(entry);\n if (entry.isIntersecting) this.nanoIntersecting.emit(entry);\n if (!entry.isIntersecting) this.nanoNotIntersecting.emit(entry);\n });\n };\n\n private handleSlotChange = () => {\n this.addIO();\n };\n\n @Watch('defaultSlot')\n addIO() {\n if (!window['IntersectionObserver'] \|\| !this.elements?.length) return;\n if (this.io) this.removeIO();\n\n const io = (this.io = new IntersectionObserver(\n this.ioCallback,\n this.observerOptions\n ));\n this.elements?.forEach((el) => {\n io.observe(el);\n });\n }\n\n private removeIO() {\n if (!this.io) return;\n\n this.io.disconnect();\n this.io = undefined;\n }\n\n connectedCallback(): void {\n this.handleThresholdChange();\n this.handleRootChange();\n }\n\n disconnectedCallback(): void {\n this.removeIO();\n this.root = this._root = undefined;\n }\n\n render() {\n return (\n <slot\n ref={(slot) => (this.defaultSlot = slot as HTMLSlotElement)}\n onSlotchange={this.handleSlotChange}\n />\n );\n }\n}\n"],"version":3}

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

@@ -62,7 +62,8 @@ const Rating = /*@__PURE__*/ proxyCustomElement(class Rating extends HTMLElement
         this.nanoChange.emit();
     }
     handleSymbolChange() {
-        this.symbol = (_) => '<nano-icon name="' + this.symbolName + '"></nano-icon>';
+        if (!this.symbol)
+            this.symbol = (_) => '<nano-icon name="' + this.symbolName + '"></nano-icon>';
     }
     /**
      * Emitted when the rating's value changes.
@@ -177,23 +178,23 @@ const Rating = /*@__PURE__*/ proxyCustomElement(class Rating extends HTMLElement
         else {
             displayValue = this.isHovering ? this.hoverValue : this.value;
         }
-        return (h("div", { key: '218618f9d68f36dac8599a03d43b0bb0ffd0e633', class: "rating-wrap" }, h("div", { key: 'b734d72f8e7ea5d5a30ad3ad606b4756bcd47d63', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
+        return (h("div", { key: '71577f298741ece02dc6655e5275d00dedd37b86', class: "rating-wrap" }, h("div", { key: '1970dd80f9783316eddb98501f1e5f1e8e0325c9', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
                 rating: true,
                 'rating--readonly': this.readonly,
                 'rating--disabled': this.disabled,
-            }, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: '099ecafd98a5963c46bc50054578cc03fa937e74', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (h("span", { class: {
+            }, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: '4d341aa10271c68e94379babdd4f88d9c436dbcb', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (h("span", { class: {
                 rating__symbol: true,
                 'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
-            }, role: "presentation",
+            },
             // Users can click the current value to clear the rating. When this happens, we set this.isHovering to
             // false to prevent the hover state from confusing them as they move the mouse out of the control. This
             // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.
-            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: 'bf493923e4a27254b2b19b269aec30deab30d9b5', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
+            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: '13a214cc0d52fedcf48953e17e0d2e2e14ded9f9', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
                 clip: this.clip(displayValue),
             } }, counter.map((index) => (h("span", { class: {
                 rating__symbol: true,
                 'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
-            }, role: "presentation", innerHTML: this.symbol(index + 1) })))), h("input", { key: '6e546fa434f529b14b8f6f8019a7fd4d6a51d76b', type: "hidden", name: this.name, value: this.value, disabled: this.disabled || this.readonly }))));
+            }, innerHTML: this.symbol(index + 1) })))), h("input", { key: '4dd7a72137134862bea4524ce4e54a828640ba3d', type: "hidden", name: this.name, value: this.value, disabled: this.disabled || this.readonly }))));
     }
     static get watchers() { return {
         "value": ["handleValueChange"],

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

	@@ -1 +1 @@
1	- {"file":"nano-rating.js","mappings":"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","names":[],"sources":["src/components/rating/rating.scss?tag=nano-rating&encapsulation=scoped","src/components/rating/rating.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n /*\n @prop --symbol-color: The inactive color for symbols. Defaults to #{map.get(tokens.$colors, palegrey)}\n * @prop --symbol-color-active: The active color for symbols. Defaults to #{map.get(tokens.$colors, palegrey)}\n * @prop --symbol-size: The size of symbols. Defaults to contextual font size\n * @prop --symbol-spacing: The spacing to use around symbols. Defaults to .25rem\n * @prop --focus-shadow: Box shadow style when focused. Defaults to #{tokens.$control-focus-style}\n /\n\n --symbol-color: #{map.get(tokens.$colors, palegrey)};\n --symbol-color-active: #{map.get(tokens.$colors, yellow)};\n --symbol-spacing: 0.25rem;\n --focus-shadow: #{tokens.$control-focus-style};\n\n display: inline-block;\n}\n\n.rating-wrap {\n position: relative;\n margin-block: 0;\n margin-inline: calc(var(--symbol-spacing) -1);\n}\n\n.rating {\n position: relative;\n border-radius: 5px;\n vertical-align: middle;\n inline-size: 100%;\n transition: box-shadow 0.15s ease;\n\n &:focus {\n outline: none;\n }\n\n &.focus-visible:focus {\n box-shadow: var(--focus-shadow);\n }\n\n &__symbols {\n display: flex;\n align-items: center;\n position: relative;\n font-size: var(--symbol-size);\n color: var(--symbol-color);\n white-space: nowrap;\n cursor: pointer;\n line-height: 0;\n justify-content: space-between;\n\n &--inactive {\n .rating__symbol > :not(nano-icon) {\n background-color: currentcolor !important;\n }\n }\n\n > * {\n margin: var(--symbol-spacing);\n }\n\n &--indicator {\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n color: var(--symbol-color-active);\n pointer-events: none;\n inline-size: 100%;\n }\n }\n\n &__symbol {\n transition: 0.2s transform;\n text-align: center;\n\n &--hover {\n transform: scale(1.2);\n }\n }\n\n &--disabled,\n &--readonly {\n .rating__symbols {\n cursor: default;\n }\n\n .rating__symbol {\n transform: none !important;\n }\n }\n\n &--disabled {\n opacity: 0.5;\n\n .rating__symbols {\n cursor: not-allowed;\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n ComponentInterface,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { clamp } from '../../utils/math';\n\n/*\n Rating - a form element to allow the viewing and input of user feedback.\n /\n@Component({\n tag: 'nano-rating',\n styleUrl: 'rating.scss',\n scoped: true,\n})\nexport class Rating implements ComponentInterface {\n private rating: HTMLElement;\n private isRtl: boolean;\n private indicator: HTMLElement;\n\n @Element() host: HTMLNanoRatingElement;\n\n @State() hoverValue = 0;\n @State() isHovering = false;\n\n /\n The current rating.\n /\n @Prop({ mutable: true, reflect: true }) value = 0;\n\n /\n The highest rating to show.\n /\n @Prop() max = 5;\n\n /\n The minimum increment value allowed by the control.\n /\n @Prop() precision = 1;\n\n /\n Makes the rating readonly.\n /\n @Prop() readonly = false;\n\n /\n Disables the rating.\n /\n @Prop() disabled = false;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name = '';\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() symbolName = 'solid/star';\n\n /\n A function that returns the symbols to display.\n * Allows for more granular control than `symbol-name`.\n * Accepts an option `value` parameter you can use to map a specific symbol to a value.\n * @param _number\n * @returns an html string used to render your rating symbol\n /\n @Prop() symbol = (_number: number) =>\n '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n\n @Watch('value')\n handleValueChange() {\n this.nanoChange.emit();\n }\n\n @Watch('symbolName')\n handleSymbolChange() {\n this.symbol = (_: number) =>\n '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n }\n\n /\n Emitted when the rating's value changes.\n /\n @Event() nanoChange!: EventEmitter<void>;\n\n /\n Emitted when the input loses focus.\n /\n @Event() nanoBlur!: EventEmitter<void>;\n\n /\n Emitted when the input has focus.\n /\n @Event() nanoFocus!: EventEmitter<void>;\n\n /\n Sets focus on the rating.\n /\n @Method()\n async setFocus() {\n this.rating.focus();\n }\n\n /\n Removes focus from the rating.\n /\n @Method()\n async removeFocus() {\n this.rating.blur();\n }\n\n private getValueFromMousePosition(event: MouseEvent) {\n const containerLeft = this.rating.getBoundingClientRect().left;\n const containerWidth = this.rating.getBoundingClientRect().width;\n\n let num: number;\n num = this.roundToPrecision(\n ((event.clientX - containerLeft) / containerWidth) this.max,\n this.precision\n );\n if (this.isRtl) num = this.max + this.precision - num;\n\n return clamp(num, 0, this.max);\n }\n\n private roundToPrecision(numberToRound: number, precision = 0.5) {\n const multiplier = 1 / precision;\n return Math.ceil(numberToRound * multiplier) / multiplier;\n }\n\n private handleClick = (event: MouseEvent) => {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n const newValue = this.getValueFromMousePosition(event);\n this.value = newValue === this.value ? 0 : newValue;\n this.isHovering = false;\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n if (event.key === 'ArrowLeft') {\n const decrement = event.shiftKey ? 1 : this.precision;\n this.value = this.roundToPrecision(Math.max(0, this.value - decrement));\n event.preventDefault();\n }\n\n if (event.key === 'ArrowRight') {\n const increment = event.shiftKey ? 1 : this.precision;\n this.value = this.roundToPrecision(\n Math.min(this.max, this.value + increment)\n );\n event.preventDefault();\n }\n\n if (event.key === 'Home') {\n this.value = 0;\n event.preventDefault();\n }\n\n if (event.key === 'End') {\n this.value = this.max;\n event.preventDefault();\n }\n };\n\n private handleMouseEnter = () => {\n this.isHovering = true;\n };\n\n private handleMouseLeave = () => {\n this.isHovering = false;\n };\n\n private handleFocus = () => {\n this.nanoFocus.emit();\n };\n\n private handleBlur = () => {\n this.nanoBlur.emit();\n };\n\n private handleMouseMove = (event: MouseEvent) => {\n this.hoverValue = this.getValueFromMousePosition(event);\n };\n\n private clip(displayValue: number) {\n if (!this.rating) return;\n const tw = this.rating.getBoundingClientRect().width;\n if (this.isRtl)\n return `rect(0, ${tw}px, 2em, ${\n tw - (tw / 100) * ((displayValue / this.max) * 100)\n }px)`;\n return `rect(0, ${\n (tw / 100) * ((displayValue / this.max) * 100)\n }px, 2em, 0)`;\n }\n\n componentDidLoad() {\n focusVisible.observe(this.rating);\n setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);\n }\n\n connectedCallback() {\n this.isRtl =\n this.host.dir === 'rtl' \|\| this.host.ownerDocument.dir === 'rtl';\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.rating);\n }\n\n render() {\n this.isRtl =\n this.host.dir === 'rtl' \|\| this.host.ownerDocument.dir === 'rtl';\n\n const counter = Array.from(Array(this.max).keys());\n\n let displayValue = 0;\n if (this.disabled \|\| this.readonly) {\n displayValue = this.value;\n } else {\n displayValue = this.isHovering ? this.hoverValue : this.value;\n }\n\n return (\n <div class=\"rating-wrap\">\n <div\n dir={this.isRtl ? 'rtl' : null}\n ref={(el) => (this.rating = el)}\n part=\"base\"\n class={{\n rating: true,\n 'rating--readonly': this.readonly,\n 'rating--disabled': this.disabled,\n }}\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-readonly={this.readonly ? 'true' : 'false'}\n aria-valuenow={this.value}\n aria-valuemin={0}\n aria-valuemax={this.max}\n tabIndex={this.disabled ? -1 : 0}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onMouseMove={this.handleMouseMove}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n >\n <span class=\"rating__symbols rating__symbols--inactive\">\n {counter.map((index) => (\n <span\n class={{\n rating__symbol: true,\n 'rating__symbol--hover':\n this.isHovering && Math.ceil(displayValue) === index + 1,\n }}\n role=\"presentation\"\n // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n onMouseEnter={this.handleMouseEnter}\n innerHTML={this.symbol(index + 1)}\n />\n ))}\n </span>\n\n <span\n ref={(span) => (this.indicator = span)}\n class=\"rating__symbols rating__symbols--indicator\"\n style={{\n clip: this.clip(displayValue),\n }}\n >\n {counter.map((index) => (\n <span\n class={{\n rating__symbol: true,\n 'rating__symbol--hover':\n this.isHovering && Math.ceil(displayValue) === index + 1,\n }}\n role=\"presentation\"\n innerHTML={this.symbol(index + 1)}\n />\n ))}\n </span>\n <input\n type=\"hidden\"\n name={this.name}\n value={this.value}\n disabled={this.disabled \|\| this.readonly}\n />\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nano-rating.js","mappings":"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","names":[],"sources":["src/components/rating/rating.scss?tag=nano-rating&encapsulation=scoped","src/components/rating/rating.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n /*\n @prop --symbol-color: The inactive color for symbols. Defaults to #{map.get(tokens.$colors, palegrey)}\n * @prop --symbol-color-active: The active color for symbols. Defaults to #{map.get(tokens.$colors, palegrey)}\n * @prop --symbol-size: The size of symbols. Defaults to contextual font size\n * @prop --symbol-spacing: The spacing to use around symbols. Defaults to .25rem\n * @prop --focus-shadow: Box shadow style when focused. Defaults to #{tokens.$control-focus-style}\n /\n\n --symbol-color: #{map.get(tokens.$colors, palegrey)};\n --symbol-color-active: #{map.get(tokens.$colors, yellow)};\n --symbol-spacing: 0.25rem;\n --focus-shadow: #{tokens.$control-focus-style};\n\n display: inline-block;\n}\n\n.rating-wrap {\n position: relative;\n margin-block: 0;\n margin-inline: calc(var(--symbol-spacing) -1);\n}\n\n.rating {\n position: relative;\n border-radius: 5px;\n vertical-align: middle;\n inline-size: 100%;\n transition: box-shadow 0.15s ease;\n\n &:focus {\n outline: none;\n }\n\n &.focus-visible:focus {\n box-shadow: var(--focus-shadow);\n }\n\n &__symbols {\n display: flex;\n align-items: center;\n position: relative;\n font-size: var(--symbol-size);\n color: var(--symbol-color);\n white-space: nowrap;\n cursor: pointer;\n line-height: 0;\n justify-content: space-between;\n\n &--inactive {\n .rating__symbol > :not(nano-icon) {\n background-color: currentcolor !important;\n }\n }\n\n > * {\n margin: var(--symbol-spacing);\n }\n\n &--indicator {\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n color: var(--symbol-color-active);\n pointer-events: none;\n inline-size: 100%;\n }\n }\n\n &__symbol {\n transition: 0.2s transform;\n text-align: center;\n\n &--hover {\n transform: scale(1.2);\n }\n }\n\n &--disabled,\n &--readonly {\n .rating__symbols {\n cursor: default;\n }\n\n .rating__symbol {\n transform: none !important;\n }\n }\n\n &--disabled {\n opacity: 0.5;\n\n .rating__symbols {\n cursor: not-allowed;\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n ComponentInterface,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { clamp } from '../../utils/math';\n\n/*\n Rating - a form element to allow the viewing and input of user feedback.\n /\n@Component({\n tag: 'nano-rating',\n styleUrl: 'rating.scss',\n scoped: true,\n})\nexport class Rating implements ComponentInterface {\n private rating: HTMLElement;\n private isRtl: boolean;\n private indicator: HTMLElement;\n\n @Element() host: HTMLNanoRatingElement;\n\n @State() hoverValue = 0;\n @State() isHovering = false;\n\n /\n The current rating.\n /\n @Prop({ mutable: true, reflect: true }) value = 0;\n\n /\n The highest rating to show.\n /\n @Prop() max = 5;\n\n /\n The minimum increment value allowed by the control.\n /\n @Prop() precision = 1;\n\n /\n Makes the rating readonly.\n /\n @Prop() readonly = false;\n\n /\n Disables the rating.\n /\n @Prop() disabled = false;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name = '';\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() symbolName = 'solid/star';\n\n /\n A function that returns the symbols to display.\n * Allows for more granular control than `symbol-name`.\n * Accepts an option `value` parameter you can use to map a specific symbol to a value.\n * @param _number\n * @returns an html string used to render your rating symbol\n /\n @Prop() symbol = (_number: number) =>\n '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n\n @Watch('value')\n handleValueChange() {\n this.nanoChange.emit();\n }\n\n @Watch('symbolName')\n handleSymbolChange() {\n if (!this.symbol)\n this.symbol = (_: number) =>\n '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n }\n\n /\n Emitted when the rating's value changes.\n /\n @Event() nanoChange!: EventEmitter<void>;\n\n /\n Emitted when the input loses focus.\n /\n @Event() nanoBlur!: EventEmitter<void>;\n\n /\n Emitted when the input has focus.\n /\n @Event() nanoFocus!: EventEmitter<void>;\n\n /\n Sets focus on the rating.\n /\n @Method()\n async setFocus() {\n this.rating.focus();\n }\n\n /\n Removes focus from the rating.\n /\n @Method()\n async removeFocus() {\n this.rating.blur();\n }\n\n private getValueFromMousePosition(event: MouseEvent) {\n const containerLeft = this.rating.getBoundingClientRect().left;\n const containerWidth = this.rating.getBoundingClientRect().width;\n\n let num: number;\n num = this.roundToPrecision(\n ((event.clientX - containerLeft) / containerWidth) this.max,\n this.precision\n );\n if (this.isRtl) num = this.max + this.precision - num;\n\n return clamp(num, 0, this.max);\n }\n\n private roundToPrecision(numberToRound: number, precision = 0.5) {\n const multiplier = 1 / precision;\n return Math.ceil(numberToRound * multiplier) / multiplier;\n }\n\n private handleClick = (event: MouseEvent) => {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n const newValue = this.getValueFromMousePosition(event);\n this.value = newValue === this.value ? 0 : newValue;\n this.isHovering = false;\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n if (event.key === 'ArrowLeft') {\n const decrement = event.shiftKey ? 1 : this.precision;\n this.value = this.roundToPrecision(Math.max(0, this.value - decrement));\n event.preventDefault();\n }\n\n if (event.key === 'ArrowRight') {\n const increment = event.shiftKey ? 1 : this.precision;\n this.value = this.roundToPrecision(\n Math.min(this.max, this.value + increment)\n );\n event.preventDefault();\n }\n\n if (event.key === 'Home') {\n this.value = 0;\n event.preventDefault();\n }\n\n if (event.key === 'End') {\n this.value = this.max;\n event.preventDefault();\n }\n };\n\n private handleMouseEnter = () => {\n this.isHovering = true;\n };\n\n private handleMouseLeave = () => {\n this.isHovering = false;\n };\n\n private handleFocus = () => {\n this.nanoFocus.emit();\n };\n\n private handleBlur = () => {\n this.nanoBlur.emit();\n };\n\n private handleMouseMove = (event: MouseEvent) => {\n this.hoverValue = this.getValueFromMousePosition(event);\n };\n\n private clip(displayValue: number) {\n if (!this.rating) return;\n const tw = this.rating.getBoundingClientRect().width;\n if (this.isRtl)\n return `rect(0, ${tw}px, 2em, ${\n tw - (tw / 100) * ((displayValue / this.max) * 100)\n }px)`;\n return `rect(0, ${\n (tw / 100) * ((displayValue / this.max) * 100)\n }px, 2em, 0)`;\n }\n\n componentDidLoad() {\n focusVisible.observe(this.rating);\n setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);\n }\n\n connectedCallback() {\n this.isRtl =\n this.host.dir === 'rtl' \|\| this.host.ownerDocument.dir === 'rtl';\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.rating);\n }\n\n render() {\n this.isRtl =\n this.host.dir === 'rtl' \|\| this.host.ownerDocument.dir === 'rtl';\n\n const counter = Array.from(Array(this.max).keys());\n\n let displayValue = 0;\n if (this.disabled \|\| this.readonly) {\n displayValue = this.value;\n } else {\n displayValue = this.isHovering ? this.hoverValue : this.value;\n }\n\n return (\n <div class=\"rating-wrap\">\n <div\n dir={this.isRtl ? 'rtl' : null}\n ref={(el) => (this.rating = el)}\n part=\"base\"\n class={{\n rating: true,\n 'rating--readonly': this.readonly,\n 'rating--disabled': this.disabled,\n }}\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-readonly={this.readonly ? 'true' : 'false'}\n aria-valuenow={this.value}\n aria-valuemin={0}\n aria-valuemax={this.max}\n tabIndex={this.disabled ? -1 : 0}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onMouseMove={this.handleMouseMove}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n >\n <span class=\"rating__symbols rating__symbols--inactive\">\n {counter.map((index) => (\n <span\n class={{\n rating__symbol: true,\n 'rating__symbol--hover':\n this.isHovering && Math.ceil(displayValue) === index + 1,\n }}\n // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n onMouseEnter={this.handleMouseEnter}\n innerHTML={this.symbol(index + 1)}\n />\n ))}\n </span>\n\n <span\n ref={(span) => (this.indicator = span)}\n class=\"rating__symbols rating__symbols--indicator\"\n style={{\n clip: this.clip(displayValue),\n }}\n >\n {counter.map((index) => (\n <span\n class={{\n rating__symbol: true,\n 'rating__symbol--hover':\n this.isHovering && Math.ceil(displayValue) === index + 1,\n }}\n innerHTML={this.symbol(index + 1)}\n />\n ))}\n </span>\n <input\n type=\"hidden\"\n name={this.name}\n value={this.value}\n disabled={this.disabled \|\| this.readonly}\n />\n </div>\n </div>\n );\n }\n}\n"],"version":3}