npm - @postnord/pn-marketweb-components - Versions diffs - 3.5.3 → 4.0.0 - Mend

@postnord/pn-marketweb-components 3.5.3 → 4.0.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 (1509) hide show

package/umd/modules/@postnord/web-components/cjs/pn-action-menu.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-action-menu.entry.cjs.js","mappings":"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","names":["uuidv4","awaitTopbar","en","isSmallScreen","reduceMotion","getTotalHeightOffset","getMenuWidth","chevron_down","ripple","chevron_right","open_in_new","h","chevron_left","Host"],"sources":["src/components/buttons/pn-action-menu/translation.ts","src/components/buttons/pn-action-menu/pn-action-menu.scss?tag=pn-action-menu","src/components/buttons/pn-action-menu/pn-action-menu.tsx"],"sourcesContent":["export const translations = {\n BACK: {\n sv: 'Tillbaka',\n en: 'Back',\n da: 'Tilbage',\n fi: 'Takaisin',\n no: 'Tilbake',\n },\n};\n\nexport type PnMenuTextProp = keyof typeof translations;\n","@use 'src/globals/main';\n\npn-action-menu {\n --pn-menu-height: unset;\n display: inline-block;\n position: relative;\n}\n\npn-action-menu .pn-action-menu {\n position: relative;\n\n &-container {\n --pn-action-menu-offset: 0;\n\n scroll-behavior: smooth;\n list-style: none;\n text-align: left;\n\n position: absolute;\n z-index: 100;\n\n top: calc(100% + 0.5em);\n left: var(--pn-action-menu-offset);\n right: 0;\n\n background-color: main.$white;\n box-shadow:\n 0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1),\n 0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);\n\n border-radius: main.$border-radius;\n margin: 0;\n padding: 0;\n width: 16em;\n\n visibility: hidden;\n overflow: hidden;\n\n &[data-open] {\n visibility: visible;\n overflow: unset;\n }\n\n &[data-left] {\n right: 0;\n left: unset;\n }\n\n &[data-upwards] {\n top: unset;\n bottom: calc(100% + 0.5em);\n transform-origin: bottom left;\n }\n\n &[data-moving] {\n overflow: hidden;\n visibility: visible;\n pointer-events: none;\n }\n\n /** Special rules for the small menu /\n &[data-small] {\n .pn-action-menu-list {\n border-radius: 0.5em;\n visibility: hidden;\n @include main.pn-transition('visibility');\n transition-delay: main.$timing;\n &[data-current] {\n overflow-x: auto;\n visibility: visible;\n transition-delay: 0s;\n }\n }\n\n &[data-moving] > .pn-action-menu-list {\n visibility: visible;\n }\n\n .pn-action-menu-item {\n position: unset;\n }\n\n .pn-action-menu-sub {\n left: 0;\n height: 100%;\n box-shadow: unset;\n transform: translateX(0);\n visibility: hidden;\n &[data-current] {\n visibility: visible;\n overflow-x: auto;\n }\n }\n }\n\n @include main.pn-scrollbar();\n }\n\n &-list {\n margin: 0;\n padding: 0;\n list-style: none;\n height: var(--pn-menu-height);\n @include main.pn-scrollbar();\n }\n\n &-group {\n margin: 0;\n padding: 0;\n list-style: none;\n &-label {\n display: block;\n color: main.$gray900;\n font-weight: 700;\n font-size: 0.875em;\n padding: 1em 1em 0.5em;\n }\n &-helpertext {\n display: block;\n color: main.$gray700;\n font-weight: 400;\n margin: 0.25em 0 0;\n }\n }\n\n &-sub {\n z-index: 110;\n position: absolute;\n top: 0;\n\n width: 100%;\n min-width: 12em;\n\n margin: 0;\n padding: 0;\n\n list-style: none;\n background: main.$white;\n border-radius: main.$border-radius;\n box-shadow:\n 0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1),\n 0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);\n\n transform: translateX(-0.5em);\n opacity: 0;\n visibility: hidden;\n\n @include main.pn-scrollbar();\n @include main.pn-transition('transform, opacity, visibility');\n transition-delay: 0s, 0s, main.$timing;\n\n &[data-open='true'] {\n transform: translateX(0);\n opacity: 1;\n visibility: visible;\n transition-delay: 0s, 0s, 0s;\n }\n\n &[data-open='false'] {\n pointer-events: none;\n }\n\n &[data-x='left'] {\n left: -100%;\n }\n\n &[data-x='center'] {\n left: 0;\n }\n\n &[data-x='right'] {\n left: 100%;\n }\n\n &[data-y='top'] {\n top: unset;\n bottom: 0;\n }\n\n &[data-y='bottom'] {\n top: 0;\n }\n }\n\n &-item {\n position: relative;\n\n &:first-child > .pn-action-menu-item-content > .pn-action-menu-button {\n border-top-left-radius: 0.5em;\n border-top-right-radius: 0.5em;\n }\n &:last-child > .pn-action-menu-item-content > .pn-action-menu-button {\n border-bottom-right-radius: 0.5em;\n border-bottom-left-radius: 0.5em;\n }\n\n &-text {\n display: flex;\n flex-direction: column;\n margin-right: auto;\n }\n\n &-label {\n color: main.$blue700;\n font-weight: 500;\n text-decoration: none;\n }\n\n &-suffix {\n margin-left: auto;\n font-weight: 400;\n color: main.$gray700;\n }\n\n &-helpertext {\n color: main.$gray700;\n font-weight: 400;\n }\n\n &-content {\n display: flex;\n align-items: center;\n flex-direction: row;\n flex: 1 1 100%;\n gap: 0.5em;\n position: relative;\n\n &[data-close] {\n border-bottom: 0.0625em solid main.$gray200;\n }\n\n > pn-icon {\n padding: 0 0.25em;\n }\n }\n\n &[data-group],\n &[data-sub] {\n flex-direction: column;\n }\n }\n\n &-button {\n cursor: pointer;\n position: relative;\n -webkit-tap-highlight-color: transparent;\n\n line-height: 1.5;\n padding: 0.75em 1em;\n border: 0;\n width: 100%;\n text-align: left;\n text-decoration-color: transparent;\n\n overflow: hidden;\n\n display: flex;\n align-items: center;\n flex: 1 1 100%;\n gap: 0.5em;\n\n font-size: 1em;\n min-height: 1.5em;\n background-color: main.$white;\n\n @include main.pn-transition('background-color, color, outline-color, text-decoration-color');\n @include main.pn-ripple(main.$blue900);\n @include main.pn-focus();\n outline-offset: -0.2rem;\n\n > pn-icon {\n .pn-icon-svg > path {\n transform-origin: center;\n transform: rotate(0deg);\n @include main.pn-transition('transform');\n }\n\n &[data-suffix][data-active] > .pn-icon-svg > path {\n transform: rotate(180deg);\n }\n\n &:last-child {\n margin-left: auto;\n }\n }\n\n &:disabled {\n pointer-events: none;\n color: main.$gray700;\n background-color: main.$gray50;\n }\n\n &:hover {\n background-color: main.$blue25;\n }\n\n &:focus {\n background-color: main.$blue50;\n }\n\n &[href] {\n &:hover,\n &:focus {\n text-decoration-color: main.$blue700;\n }\n }\n\n /\n &::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n width: 0.25em;\n height: 100%;\n background-color: transparent;\n @include main.pn-transition('background-color');\n }\n\n &[aria-expanded='true']::before {\n background-color: main.$blue700;\n }\n /\n }\n\n &-checkbox {\n background-color: main.$white;\n flex: 0 0 1.5em;\n width: 1.5em;\n height: 1.5em;\n border: 0.0625em solid main.$gray400;\n border-radius: 0.25em;\n margin-left: auto;\n\n @include main.pn-focus-base;\n @include main.pn-transition('background-color, border-color, outline-color');\n\n svg polyline {\n stroke: main.$white;\n stroke-linecap: round;\n stroke-dasharray: 23;\n @include main.pn-transition('stroke-dashoffset');\n transition-delay: 0s;\n\n &.pn-action-menu-checkbox-checkmark-path {\n stroke-dashoffset: 23;\n }\n }\n }\n\n &-radio {\n display: flex;\n gap: 0.75em;\n padding: 0;\n margin-left: auto;\n\n &-outer {\n background-color: main.$input-background;\n border: main.$input-border;\n border-radius: 50%;\n height: 1.5em;\n width: 1.5em;\n display: flex;\n justify-content: center;\n align-items: center;\n\n @include main.pn-focus-base;\n @include main.pn-transition('border-color, background-color, outline-color');\n }\n\n &-inner {\n transform: scale(0);\n height: 0.75em;\n width: 0.75em;\n background-color: main.$input-button-background-box-active;\n border-radius: 50%;\n transform-origin: center center;\n @include main.pn-transition('background-color, transform');\n }\n }\n\n &-input {\n position: absolute;\n z-index: 10;\n cursor: pointer;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n margin: 0;\n opacity: 0;\n -webkit-tap-highlight-color: transparent;\n\n &:checked {\n + .pn-action-menu-button {\n background-color: main.$blue25;\n .pn-action-menu-checkbox {\n border-color: main.$blue700;\n background-color: main.$blue700;\n polyline.pn-action-menu-checkbox-checkmark-path {\n transition-delay: main.$timing;\n stroke-dashoffset: 0;\n }\n }\n .pn-action-menu-radio {\n &-outer {\n border-color: main.$border-color-default-active;\n }\n &-inner {\n transform: scale(1);\n background-color: main.$input-button-background-box-active;\n }\n }\n }\n\n &:hover {\n background-color: main.$blue50;\n }\n }\n\n &:focus-visible + .pn-action-menu-button {\n background-color: main.$blue50;\n }\n\n &:disabled {\n pointer-events: none;\n + .pn-action-menu-button {\n pointer-events: none;\n color: main.$gray700;\n background-color: main.$gray50;\n\n .pn-action-menu-item-label {\n color: main.$gray700;\n }\n .pn-action-menu-checkbox {\n background-color: main.$gray50;\n }\n .pn-action-menu-radio-outer {\n border-color: main.$gray400;\n background-color: main.$gray50;\n }\n .pn-icon-svg path {\n fill: main.$gray700;\n }\n }\n\n &:checked + .pn-action-menu-button {\n .pn-action-menu-radio-inner {\n background-color: main.$gray400;\n }\n .pn-action-menu-checkbox {\n border-color: main.$gray400;\n background-color: main.$gray400;\n }\n }\n }\n\n &:hover + .pn-action-menu-button {\n background-color: main.$blue50;\n .pn-action-menu-radio-outer {\n border-color: main.$input-button-background-box-active;\n background-color: main.$input-button-background-hover;\n }\n }\n\n &:focus-visible + .pn-action-menu-button {\n background-color: main.$blue50;\n .pn-action-menu-checkbox,\n .pn-action-menu-radio .pn-action-menu-radio-outer {\n @include main.pn-focus-visible();\n }\n }\n }\n\n &-p {\n margin: 0;\n }\n\n > pn-button[data-default-icon] .pn-button {\n &[aria-expanded='true'] .pn-icon-svg {\n transform: rotate(180deg);\n transition-delay: 0s;\n }\n .pn-icon-svg {\n transform: rotate(0deg);\n transition-delay: main.$timing;\n @include main.pn-transition('transform');\n }\n }\n}\n","import { Component, Prop, State, Watch, Element, h, Host, Event, EventEmitter, Listen } from '@stencil/core';\n\nimport {\n awaitTopbar,\n en,\n getMenuWidth,\n getTotalHeightOffset,\n isSmallScreen,\n reduceMotion,\n ripple,\n uuidv4,\n} from '@/index';\nimport type {\n PnLanguages,\n PnActionMenuItem,\n Components,\n PnActionMenuInput,\n PnActionMenuGroup,\n PnMeasurements,\n} from '@/index';\n\nimport { translations, PnMenuTextProp } from './translation';\n\nimport { chevron_down, chevron_left, chevron_right, open_in_new } from 'pn-design-assets/pn-assets/icons.js';\n\n/\n Create a list of actions in an accessible way.\n \n Option types include:\n \n - Regular button, click and it will collapse the menu,\n * - Checkbox/radio, toggle the option on/off\n * - Link, behaves like a regular `a[href]` element.\n \n You can group these actions in groups and/or sub menus.\n \n - `group`, an array of options. The label will act as a title for the items.\n * - `options`, an array of options. These items will appear in a sub-menu that can be toggled.\n \n @see {@link PnActionMenuItem}\n /\n@Component({\n tag: 'pn-action-menu',\n styleUrl: 'pn-action-menu.scss',\n})\nexport class PnActionMenu {\n private readonly id: string = `pn-action-menu-${uuidv4()}`;\n\n private menuButtonId: string = `${this.id}-button`;\n private menuListId: string = `${this.id}-list`;\n\n private menuTrigger: HTMLPnButtonElement;\n private menuContainer: HTMLDivElement;\n private menuList: HTMLMenuElement;\n\n private animation: Animation;\n private readonly duration: number = 400;\n private animationDuration: number = this.duration;\n\n private timeout: NodeJS.Timeout;\n\n /* 16em /\n private readonly menuWidth: number = 256;\n\n @Element() private hostElement: HTMLElement;\n\n @State() private smallMenu: boolean = null;\n @State() private upwards: boolean = false;\n\n @State() private activeSubmenu: PnActionMenuItem['value'][] = [];\n\n @State() private isClosing = false;\n @State() private isExpanding = false;\n\n /* Array of action menu options. @see {@link PnActionMenuItem} /\n @Prop() options: PnActionMenuItem[] = [];\n /* Set any prop from the `pn-button` component here. @see {@link Components.PnButton} /\n @Prop() button: Components.PnButton;\n\n /* Set a custom ID for the menu. /\n @Prop() menuId?: string = this.id;\n /* Manually set the language. /\n @Prop({ mutable: true }) language?: PnLanguages = null;\n\n /* Open/close the action menu manually. @category Features /\n @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n /* Prefer that the menu open upwards, if there is enough space. @category Features /\n @Prop() menuUp?: boolean = false;\n /* Prefer that the submenus opens to the left, if there is enough space. @category Features /\n @Prop() menuLeft?: boolean = false;\n\n /* Emitted when the menu is opened or closed. /\n @Event() private menuToggle: EventEmitter<{ open: boolean }>;\n /* Emitted when the menu is fully hidden/visible after the animation has played. /\n @Event() private menuVisible: EventEmitter<{ visible: boolean }>;\n /* Emitted when an option is clicked (button, link, input or submenus). /\n @Event() private menuOption: EventEmitter<{\n /* Which type of menu item was clicked. /\n type: 'button' \| 'link' \| 'input' \| 'submenu';\n /* If its an `input` type (checkbox/radio), it will be a generic `Event` (ChangeEvent) instead of `MouseEvent`. /\n click: MouseEvent \| Event;\n /* The full {@link PnActionMenuItem} object. /\n option: PnActionMenuItem;\n /* If the submenu is open/closed. /\n open?: Boolean;\n }>;\n\n @Watch('options')\n handleOptions() {\n this.setMenuLayout();\n }\n\n @Watch('open')\n openHandler() {\n this.setAnimationDuration();\n\n requestAnimationFrame(() => {\n if (this.open && !(this.isClosing \|\| this.isExpanding)) {\n this.setOffset();\n this.setMenuLayout();\n }\n\n this.gridHandler();\n\n this.menuToggle.emit({ open: this.open });\n\n clearTimeout(this.timeout);\n this.timeout = setTimeout(() => {\n if (!this.open) {\n this.activeSubmenu = [];\n const subMenus = this.hostElement.querySelectorAll<HTMLUListElement>('[data-x]');\n Array.from(subMenus).forEach(el => {\n el.removeAttribute('data-x');\n el.removeAttribute('data-y');\n });\n }\n\n this.menuVisible.emit({ visible: this.open });\n }, this.animationDuration);\n });\n }\n\n @Watch('menuId')\n handleMenuId() {\n this.menuButtonId = `${this.menuId}-button`;\n this.menuListId = `${this.menuId}-list`;\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n if (this.open) this.toggleActionMenu(false);\n }\n\n async componentWillLoad() {\n if (!this.options.length) console.warn(`${this.hostElement.localName}: No options set.`);\n\n this.handleMenuId();\n this.setAnimationDuration();\n\n if (this.language !== null) await awaitTopbar(this.hostElement);\n }\n\n componentDidLoad() {\n this.setOffset();\n\n if (this.open) this.gridHandler();\n }\n\n private translate(prop: PnMenuTextProp) {\n return translations[prop][this.language \|\| en];\n }\n\n private globalEvents = (event: PointerEvent \| KeyboardEvent) => {\n const target = event.target as HTMLElement;\n const isWithinActionMenu = target?.closest(this.hostElement.localName);\n if (!isWithinActionMenu) this.closeEachSubMenu(true);\n };\n\n private addGlobalEventListeners() {\n const root: Document = this.hostElement.getRootNode() as Document;\n\n root.addEventListener('click', this.globalEvents);\n }\n\n private removeGlobalEventListeners() {\n const root: Document = this.hostElement.getRootNode() as Document;\n\n root.removeEventListener('click', this.globalEvents);\n }\n\n /* Open/close the action menu. /\n private toggleActionMenu(state?: boolean) {\n this.open = state ?? !this.open;\n }\n\n private setMenuLayout() {\n if (!this.menuContainer) return;\n\n if (!(this.isClosing \|\| this.isExpanding)) this.resetMaxHeight();\n\n const measurements = this.getMenuMeasurements();\n\n this.setDirection(measurements);\n this.setMenuSize(measurements);\n this.setMaxHeight(measurements);\n }\n\n private setDirection({ hUp, hDown, sUp, sDown }: PnMeasurements) {\n const fitsUpwards = sUp > hUp;\n const fitsDownards = sDown > hDown;\n const moreSpaceDown = sDown > sUp;\n this.upwards = (this.menuUp && fitsUpwards) \|\| (!fitsDownards && !moreSpaceDown);\n }\n\n private setMenuSize({ hUp, hDown, sUp, sDown }: PnMeasurements) {\n const isWidthSmall = isSmallScreen();\n const menuFits = this.upwards ? sUp > hUp : sDown > hDown;\n const isSmall = isWidthSmall \|\| !menuFits;\n\n if (isSmall !== this.smallMenu) {\n this.smallMenu = isSmall;\n }\n }\n\n private setMaxHeight({ hUp, hDown, sUp, sDown }: PnMeasurements) {\n if (this.smallMenu) {\n const heightUp = hUp > sUp ? hUp - 16 : hUp;\n const heightDown = hDown > sDown ? hDown - 8 : hDown;\n this.hostElement.style.setProperty('--pn-menu-height', `${this.upwards ? heightUp : heightDown}px`);\n } else this.resetMaxHeight();\n }\n\n private resetMaxHeight() {\n this.hostElement.style.setProperty('--pn-menu-height', 'unset');\n }\n\n private setAnimationDuration() {\n if (reduceMotion()) this.animationDuration = 0;\n else this.animationDuration = this.duration;\n }\n\n private getRect(element: HTMLElement): DOMRect {\n return element.getBoundingClientRect();\n }\n\n private getMenuMeasurements(): PnMeasurements {\n const allLists = Array.from(this.menuContainer.querySelectorAll('menu'));\n const maxHeight = Math.max(...allLists.map(el => el.scrollHeight));\n\n const rectButton = this.getRect(this.menuTrigger);\n const rectMenu = this.getRect(this.menuContainer);\n\n /* Measurements upwards. /\n const sUp = rectButton.top - getTotalHeightOffset();\n const hUp = sUp > maxHeight ? maxHeight : sUp;\n\n /* Measurements downwards. /\n const sDown = innerHeight - rectMenu.top;\n const hDown = sDown > maxHeight ? maxHeight : sDown;\n\n return {\n hUp,\n hDown,\n sUp,\n sDown,\n };\n }\n\n private setOffset() {\n const data = this.getRect(this.hostElement);\n const sideMenuWidth = getMenuWidth();\n\n // Calculate potential menu position\n const menuLeft = data.left;\n const menuRight = data.left + this.menuWidth;\n\n // Define boundaries\n const leftBoundary = sideMenuWidth + 16; // Left menu + buffer\n const rightBoundary = innerWidth - 16; // Right edge - buffer\n\n let offset = 0;\n\n // Check if menu would overlap left menu or go off left edge\n if (menuLeft < leftBoundary) {\n offset = leftBoundary - menuLeft;\n }\n // Check if menu would go off right edge\n else if (menuRight > rightBoundary) {\n offset = rightBoundary - menuRight;\n }\n\n if (this.menuContainer) this.menuContainer.style.setProperty('--pn-action-menu-offset', `${offset}px`);\n }\n\n private getListId(option: PnActionMenuItem) {\n return `pn-menu-${option.value}-list`;\n }\n\n private getButtonId(option: PnActionMenuItem) {\n return `pn-menu-${option.value}-button`;\n }\n\n private getTriggerIcon() {\n if (this.button?.icon) return;\n return chevron_down;\n }\n\n /* Set the path of open sub menus. /\n private getSubMenuPath(options: PnActionMenuItem[], value: string, path = []): string[] {\n for (const item of options) {\n const newPath = [...path, item.value];\n if (item.value === value) return newPath;\n\n if (item.options \|\| item.group) {\n const result = this.getSubMenuPath(item.options \|\| item.group, value, newPath);\n if (result) return result;\n }\n }\n return null;\n }\n\n private closeEachSubMenu(preventFocus: boolean = false) {\n if (!preventFocus) this.menuTrigger?.querySelector('button')?.focus({ preventScroll: true });\n\n const interval = setInterval(() => {\n if (this.smallMenu \|\| this.activeSubmenu.length === 0) {\n clearInterval(interval);\n this.toggleActionMenu(false);\n } else {\n this.activeSubmenu.pop();\n this.activeSubmenu = [...this.activeSubmenu];\n }\n }, 150);\n }\n\n private escButton(event: KeyboardEvent, option: PnActionMenuItem) {\n const { key } = event;\n\n if (key === 'Escape') {\n event.preventDefault();\n event.stopImmediatePropagation();\n\n this.isSubmenuActive(option.value) ? this.toggleSub(option) : this.toggleActionMenu();\n }\n }\n\n // Animation Start\n\n private gridHandler() {\n if (this.open) this.openGrid();\n else this.closeGrid();\n }\n\n private openGrid() {\n this.addGlobalEventListeners();\n\n const list = this.getRect(this.menuList);\n\n const { clientHeight } = this.menuContainer;\n const height = this.isClosing ? clientHeight : 0;\n this.menuContainer.style.height = `${list.height}px`;\n\n this.isExpanding = true;\n this.animateGrid(true, `${height}px`, `${list.height}px`);\n }\n\n private closeGrid() {\n this.removeGlobalEventListeners();\n\n const list = this.getRect(this.menuList);\n\n const { clientHeight } = this.menuContainer;\n const height = this.isExpanding ? clientHeight : list.height;\n this.menuContainer.style.height = `0px`;\n\n this.isClosing = true;\n this.animateGrid(false, `${height}px`, `0px`);\n }\n\n private animateGrid(open: boolean, startHeight: string, endHeight: string) {\n this.cancelAnimations();\n this.animation = this.menuContainer.animate(\n {\n height: [startHeight, endHeight],\n },\n {\n duration: this.animationDuration,\n easing: 'cubic-bezier(0.6, 0, 0.2, 1)',\n },\n );\n this.animation.onfinish = () => this.animationFinish();\n this.animation.oncancel = () => (open ? (this.isExpanding = false) : (this.isClosing = false));\n }\n\n private animationFinish() {\n this.cancelAnimations();\n this.menuContainer.style.height = this.isClosing ? '0px' : '';\n this.isClosing = false;\n this.isExpanding = false;\n }\n\n private cancelAnimations() {\n if (this.animation) this.animation.cancel();\n }\n\n // Animation end\n\n private async optionSelect(option: PnActionMenuItem, click: MouseEvent \| Event) {\n const type = option?.options?.length ? 'submenu' : !!option.input ? 'input' : option.href ? 'link' : 'button';\n const isSubMenu = type === 'submenu';\n\n if (isSubMenu) this.toggleSub(option);\n else if (type === 'button') this.closeEachSubMenu();\n else if (type === 'input') option.checked = (click.target as HTMLInputElement).checked;\n\n this.menuOption.emit({\n option,\n type,\n click,\n open: isSubMenu ? this.isSubmenuActive(option.value) : null,\n });\n\n const target = click.target as HTMLElement;\n const element =\n target.localName === 'input'\n ? (target.nextElementSibling as HTMLElement)\n : target.className === 'pn-action-menu-button'\n ? target\n : target.closest<HTMLElement>('.pn-action-menu-button');\n\n const { x, width, y, top } = this.getRect(element as HTMLElement);\n const clientCor = { clientX: x + width - 24, clientY: y - top };\n\n ripple(click.type === 'click' ? (click as MouseEvent) : clientCor, element);\n\n this.menuContainer.scrollTo({ top: 0 });\n }\n\n /* Toggle individual sub-menus inside the action menu by using the `option['value']`. /\n private toggleSub(option: PnActionMenuItem) {\n const { value } = option;\n\n const path = this.getSubMenuPath(this.options, value);\n const isActive = this.activeSubmenu.includes(value);\n isActive && path.splice(this.activeSubmenu.indexOf(value), 1);\n\n const item = this.hostElement.querySelector<HTMLElement>(`#${this.getListId(option)}`);\n const data = this.getRect(item);\n\n const spaceLeft = data.left;\n const spaceRight = innerWidth - data.right - 8;\n\n const fitsLeft = spaceLeft > data.width;\n const fitsRight = spaceRight > data.width;\n\n const climbUp = this.menuUp && data.top - data.height > 0;\n const yDirection = climbUp ? 'top' : 'bottom';\n\n if (!isActive && !item.dataset.x)\n item.setAttribute(\n 'data-x',\n this.menuLeft && fitsLeft ? 'left' : fitsRight ? 'right' : fitsLeft ? 'left' : 'center',\n );\n if (!isActive && !item.dataset.y) item.setAttribute('data-y', yDirection);\n\n if (JSON.stringify(path) === JSON.stringify(this.activeSubmenu))\n this.activeSubmenu = this.activeSubmenu.filter(item => item !== value);\n else this.activeSubmenu = [...path];\n }\n\n /* Check if a sub-menu is active. /\n private isSubmenuActive(value: string): boolean {\n return this.activeSubmenu.includes(value);\n }\n\n private isMenuActive() {\n const isRootSubInsideGroup = this.options.find(({ value }) => this.activeSubmenu.every(val => val === value));\n return this.smallMenu && (this.activeSubmenu?.length === 0 \|\| isRootSubInsideGroup);\n }\n\n private isCurrentSubMenu(value: string) {\n return Boolean(this.activeSubmenu[this.activeSubmenu.length - 1] === value);\n }\n\n private getOptionTrailing(option: PnActionMenuItem) {\n const useButtonIcon = option.options?.length && chevron_right;\n const useTrailingIcon = option.trailingIcon;\n const useLinkIcon = option.target === '_blank' && open_in_new;\n\n /* If the user has defined a trialing icon, use it first. */\n const icon = useButtonIcon \|\| useTrailingIcon \|\| useLinkIcon;\n\n if (icon) {\n return <pn-icon icon={icon} color=\"blue700\" data-suffix data-active={this.isSubmenuActive(option.value)} />;\n }\n if (option.suffix) {\n return <span class=\"pn-action-menu-item-suffix\">{option.suffix}</span>;\n }\n }\n\n private renderCheckbox(option: PnActionMenuInput) {\n const id = `pn-menu-${option.value}-label`;\n const idHelper = `pn-menu-${option.value}-helpertext`;\n return (\n <div class=\"pn-action-menu-item-content\">\n <input\n type={option.input}\n id={id}\n class=\"pn-action-menu-input\"\n name={option.name}\n value={option.value}\n checked={option.checked}\n disabled={option.disabled}\n aria-describedby={option.helpertext ? idHelper : null}\n onInput={event => this.optionSelect(option, event)}\n tabIndex={this.open ? null : -1}\n />\n\n <div class=\"pn-action-menu-button\">\n {!!option.icon && <pn-icon icon={option.icon} color=\"blue700\" />}\n\n <div class=\"pn-action-menu-item-text\">\n <label htmlFor={id} class=\"pn-action-menu-item-label\">\n {option.label}\n </label>\n {option.helpertext && (\n <p id={idHelper} class=\"pn-action-menu-item-helpertext\">\n <span>{option.helpertext}</span>\n </p>\n )}\n </div>\n {option.input === 'checkbox' ? (\n <div class=\"pn-action-menu-checkbox\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <polyline class=\"pn-action-menu-checkbox-checkmark-path\" points=\"4,12 9,17 20,6\" stroke-width=\"3\" />\n </svg>\n </div>\n ) : (\n <div class=\"pn-action-menu-radio\">\n <div class=\"pn-action-menu-radio-outer\">\n <div class=\"pn-action-menu-radio-inner\" />\n </div>\n </div>\n )}\n </div>\n </div>\n );\n }\n\n private renderButton(option: PnActionMenuItem) {\n const isCloseButton = option.label === 'BACK';\n const isSub = !!option?.options?.length;\n const isGroup = !!option?.group?.length;\n const isLink = !!option.href && !isSub && !isGroup;\n\n const appendedId = isCloseButton ? '-close' : '';\n const hasIcon = isCloseButton \|\| !!option.icon;\n\n const trailingObject = isCloseButton ? null : this.getOptionTrailing(option);\n const open = this.isSubmenuActive(option.value);\n const subMenuAttrs = isSub\n ? {\n 'aria-haspopup': 'true',\n 'aria-controls': open ? this.getListId(option) : null,\n 'aria-expanded': open?.toString(),\n }\n : {};\n\n const attrs = isLink\n ? {\n href: option.href,\n target: option.target,\n }\n : {\n disabled: option.disabled,\n };\n\n const Tag = isLink ? 'a' : 'button';\n\n return isGroup ? (\n <div class=\"pn-action-menu-group-label\">\n <p class=\"pn-action-menu-p\">{option.label}</p>\n {option.helpertext && <p class=\"pn-action-menu-group-helpertext\">{option.helpertext}</p>}\n </div>\n ) : (\n <div class=\"pn-action-menu-item-content\" data-close={isCloseButton}>\n <Tag\n id={this.getButtonId(option) + appendedId}\n class=\"pn-action-menu-button\"\n {...subMenuAttrs}\n {...attrs}\n tabIndex={this.open ? null : -1}\n onClick={event => this.optionSelect(option, event)}\n onKeyDown={(event: KeyboardEvent) => this.escButton(event, option)}\n >\n {hasIcon && <pn-icon icon={isCloseButton ? chevron_left : option.icon} color=\"blue700\" />}\n <div class=\"pn-action-menu-item-text\">\n <span class=\"pn-action-menu-item-label\">{isCloseButton ? this.translate('BACK') : option.label}</span>\n {option.helpertext && !isLink && <span class=\"pn-action-menu-item-helpertext\">{option.helpertext}</span>}\n </div>\n {trailingObject}\n </Tag>\n </div>\n );\n }\n\n private renderSub(option: PnActionMenuItem) {\n return (\n <menu\n id={this.getListId(option)}\n aria-labelledby={this.getButtonId(option)}\n class=\"pn-action-menu-sub\"\n data-open={this.isSubmenuActive(option.value)?.toString()}\n data-current={this.isCurrentSubMenu(option.value)}\n >\n {this.smallMenu && (\n <li class=\"pn-action-menu-item\">\n {this.renderButton({\n label: 'BACK',\n value: option.value,\n options: option.options,\n })}\n </li>\n )}\n {option.options.map(item => this.renderMenuItem(item))}\n </menu>\n );\n }\n\n private renderGroup(option: PnActionMenuGroup) {\n return <menu class=\"pn-action-menu-group\">{option.group.map(item => this.renderMenuItem(item))}</menu>;\n }\n\n private renderMenuItem(option: PnActionMenuItem) {\n const isSub = !!option?.options?.length;\n const isGroup = !isSub && !!option?.group?.length;\n\n const isCheckbox = !!option.input && !isSub && !isGroup;\n\n return (\n <li class=\"pn-action-menu-item\" data-group={isGroup} data-sub={isSub}>\n {isCheckbox ? this.renderCheckbox(option) : this.renderButton(option)}\n {isSub ? this.renderSub(option) : isGroup && this.renderGroup(option)}\n </li>\n );\n }\n\n private renderMenu() {\n return (\n <div\n id={this.menuListId}\n class=\"pn-action-menu-container\"\n role=\"region\"\n aria-labelledby={this.menuButtonId}\n data-open={this.open}\n data-moving={this.isClosing \|\| this.isExpanding}\n data-upwards={this.upwards}\n data-small={this.smallMenu}\n style={{ height: '0px' }}\n ref={el => (this.menuContainer = el)}\n >\n <menu class=\"pn-action-menu-list\" ref={el => (this.menuList = el)} data-current={this.isMenuActive()}>\n {this.options?.map(option => this.renderMenuItem(option))}\n </menu>\n </div>\n );\n }\n\n render() {\n return (\n <Host>\n <div id={this.menuId !== this.id ? this.menuId : null} class=\"pn-action-menu\">\n <pn-button\n icon={this.getTriggerIcon()}\n {...this.button}\n buttonId={this.menuButtonId}\n tooltipUp={!this.upwards}\n ariahaspopup=\"true\"\n ariacontrols={this.open ? this.menuListId : null}\n ariaexpanded={this.open.toString()}\n data-default-icon={!this.button?.icon}\n onPnClick={() => this.toggleActionMenu()}\n ref={el => (this.menuTrigger = el)}\n />\n {this.renderMenu()}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-action-menu.entry.cjs.js","mappings":"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","names":["uuidv4","awaitTopbar","en","isSmallScreen","reduceMotion","getTotalHeightOffset","getMenuWidth","angle_down","ripple","angle_right","open_in_new","h","angle_left","Host"],"sources":["src/components/buttons/pn-action-menu/translation.ts","src/components/buttons/pn-action-menu/pn-action-menu.scss?tag=pn-action-menu","src/components/buttons/pn-action-menu/pn-action-menu.tsx"],"sourcesContent":["export const translations = {\n BACK: {\n sv: 'Tillbaka',\n en: 'Back',\n da: 'Tilbage',\n fi: 'Takaisin',\n no: 'Tilbake',\n },\n};\n\nexport type PnMenuTextProp = keyof typeof translations;\n","@use 'src/globals/main';\n\npn-action-menu {\n --pn-menu-height: unset;\n display: inline-block;\n position: relative;\n}\n\npn-action-menu .pn-action-menu {\n position: relative;\n\n &-container {\n --pn-action-menu-offset: 0;\n\n scroll-behavior: smooth;\n list-style: none;\n text-align: left;\n\n position: absolute;\n z-index: 100;\n\n top: calc(100% + 0.5em);\n left: var(--pn-action-menu-offset);\n right: 0;\n\n background-color: main.$white;\n box-shadow:\n 0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1),\n 0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);\n\n border-radius: main.$border-radius;\n margin: 0;\n padding: 0;\n width: 16em;\n\n visibility: hidden;\n overflow: hidden;\n\n &[data-open] {\n visibility: visible;\n overflow: unset;\n }\n\n &[data-left] {\n right: 0;\n left: unset;\n }\n\n &[data-upwards] {\n top: unset;\n bottom: calc(100% + 0.5em);\n transform-origin: bottom left;\n }\n\n &[data-moving] {\n overflow: hidden;\n visibility: visible;\n pointer-events: none;\n }\n\n /** Special rules for the small menu /\n &[data-small] {\n .pn-action-menu-list {\n border-radius: 0.5em;\n visibility: hidden;\n @include main.pn-transition('visibility');\n transition-delay: main.$timing;\n &[data-current] {\n overflow-x: auto;\n visibility: visible;\n transition-delay: 0s;\n }\n }\n\n &[data-moving] > .pn-action-menu-list {\n visibility: visible;\n }\n\n .pn-action-menu-item {\n position: unset;\n }\n\n .pn-action-menu-sub {\n left: 0;\n height: 100%;\n box-shadow: unset;\n transform: translateX(0);\n visibility: hidden;\n &[data-current] {\n visibility: visible;\n overflow-x: auto;\n }\n }\n }\n\n @include main.pn-scrollbar();\n }\n\n &-list {\n margin: 0;\n padding: 0;\n list-style: none;\n height: var(--pn-menu-height);\n @include main.pn-scrollbar();\n }\n\n &-group {\n margin: 0;\n padding: 0;\n list-style: none;\n &-label {\n display: block;\n color: main.$gray900;\n font-weight: 700;\n font-size: 0.875em;\n padding: 1em 1em 0.5em;\n }\n &-helpertext {\n display: block;\n color: main.$gray700;\n font-weight: 400;\n margin: 0.25em 0 0;\n }\n }\n\n &-sub {\n z-index: 110;\n position: absolute;\n top: 0;\n\n width: 100%;\n min-width: 12em;\n\n margin: 0;\n padding: 0;\n\n list-style: none;\n background: main.$white;\n border-radius: main.$border-radius;\n box-shadow:\n 0em 0.075em 0.225em 0em rgba(0, 0, 0, 0.1),\n 0em 0.4em 0.9em 0em rgba(0, 0, 0, 0.13);\n\n transform: translateX(-0.5em);\n opacity: 0;\n visibility: hidden;\n\n @include main.pn-scrollbar();\n @include main.pn-transition('transform, opacity, visibility');\n transition-delay: 0s, 0s, main.$timing;\n\n &[data-open='true'] {\n transform: translateX(0);\n opacity: 1;\n visibility: visible;\n transition-delay: 0s, 0s, 0s;\n }\n\n &[data-open='false'] {\n pointer-events: none;\n }\n\n &[data-x='left'] {\n left: -100%;\n }\n\n &[data-x='center'] {\n left: 0;\n }\n\n &[data-x='right'] {\n left: 100%;\n }\n\n &[data-y='top'] {\n top: unset;\n bottom: 0;\n }\n\n &[data-y='bottom'] {\n top: 0;\n }\n }\n\n &-item {\n position: relative;\n\n &:first-child > .pn-action-menu-item-content > .pn-action-menu-button {\n border-top-left-radius: 0.5em;\n border-top-right-radius: 0.5em;\n }\n &:last-child > .pn-action-menu-item-content > .pn-action-menu-button {\n border-bottom-right-radius: 0.5em;\n border-bottom-left-radius: 0.5em;\n }\n\n &-text {\n display: flex;\n flex-direction: column;\n margin-right: auto;\n }\n\n &-label {\n color: main.$blue700;\n font-weight: 500;\n text-decoration: none;\n }\n\n &-suffix {\n margin-left: auto;\n font-weight: 400;\n color: main.$gray700;\n }\n\n &-helpertext {\n color: main.$gray700;\n font-weight: 400;\n }\n\n &-content {\n display: flex;\n align-items: center;\n flex-direction: row;\n flex: 1 1 100%;\n gap: 0.5em;\n position: relative;\n\n &[data-close] {\n border-bottom: 0.0625em solid main.$gray200;\n }\n\n > pn-icon {\n padding: 0 0.25em;\n }\n }\n\n &[data-group],\n &[data-sub] {\n flex-direction: column;\n }\n }\n\n &-button {\n cursor: pointer;\n position: relative;\n -webkit-tap-highlight-color: transparent;\n\n line-height: 1.5;\n padding: 0.75em 1em;\n border: 0;\n width: 100%;\n text-align: left;\n text-decoration-color: transparent;\n\n overflow: hidden;\n\n display: flex;\n align-items: center;\n flex: 1 1 100%;\n gap: 0.5em;\n\n font-size: 1em;\n min-height: 1.5em;\n background-color: main.$white;\n\n @include main.pn-transition('background-color, color, outline-color, text-decoration-color');\n @include main.pn-ripple(main.$blue900);\n @include main.pn-focus();\n outline-offset: -0.2rem;\n\n > pn-icon {\n .pn-icon-svg > path {\n transform-origin: center;\n transform: rotate(0deg);\n @include main.pn-transition('transform');\n }\n\n &[data-suffix][data-active] > .pn-icon-svg > path {\n transform: rotate(180deg);\n }\n\n &:last-child {\n margin-left: auto;\n }\n }\n\n &:disabled {\n pointer-events: none;\n color: main.$gray700;\n background-color: main.$gray50;\n }\n\n &:hover {\n background-color: main.$blue25;\n }\n\n &:focus {\n background-color: main.$blue50;\n }\n\n &[href] {\n &:hover,\n &:focus {\n text-decoration-color: main.$blue700;\n }\n }\n\n /\n &::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n width: 0.25em;\n height: 100%;\n background-color: transparent;\n @include main.pn-transition('background-color');\n }\n\n &[aria-expanded='true']::before {\n background-color: main.$blue700;\n }\n /\n }\n\n &-checkbox {\n background-color: main.$white;\n flex: 0 0 1.5em;\n width: 1.5em;\n height: 1.5em;\n border: 0.0625em solid main.$gray400;\n border-radius: 0.25em;\n margin-left: auto;\n\n @include main.pn-focus-base;\n @include main.pn-transition('background-color, border-color, outline-color');\n\n svg polyline {\n stroke: main.$white;\n stroke-linecap: round;\n stroke-dasharray: 23;\n @include main.pn-transition('stroke-dashoffset');\n transition-delay: 0s;\n\n &.pn-action-menu-checkbox-checkmark-path {\n stroke-dashoffset: 23;\n }\n }\n }\n\n &-radio {\n display: flex;\n gap: 0.75em;\n padding: 0;\n margin-left: auto;\n\n &-outer {\n background-color: main.$input-background;\n border: main.$input-border;\n border-radius: 50%;\n height: 1.5em;\n width: 1.5em;\n display: flex;\n justify-content: center;\n align-items: center;\n\n @include main.pn-focus-base;\n @include main.pn-transition('border-color, background-color, outline-color');\n }\n\n &-inner {\n transform: scale(0);\n height: 0.75em;\n width: 0.75em;\n background-color: main.$input-button-background-box-active;\n border-radius: 50%;\n transform-origin: center center;\n @include main.pn-transition('background-color, transform');\n }\n }\n\n &-input {\n position: absolute;\n z-index: 10;\n cursor: pointer;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n margin: 0;\n opacity: 0;\n -webkit-tap-highlight-color: transparent;\n\n &:checked {\n + .pn-action-menu-button {\n background-color: main.$blue25;\n .pn-action-menu-checkbox {\n border-color: main.$blue700;\n background-color: main.$blue700;\n polyline.pn-action-menu-checkbox-checkmark-path {\n transition-delay: main.$timing;\n stroke-dashoffset: 0;\n }\n }\n .pn-action-menu-radio {\n &-outer {\n border-color: main.$border-color-default-active;\n }\n &-inner {\n transform: scale(1);\n background-color: main.$input-button-background-box-active;\n }\n }\n }\n\n &:hover {\n background-color: main.$blue50;\n }\n }\n\n &:focus-visible + .pn-action-menu-button {\n background-color: main.$blue50;\n }\n\n &:disabled {\n pointer-events: none;\n + .pn-action-menu-button {\n pointer-events: none;\n color: main.$gray700;\n background-color: main.$gray50;\n\n .pn-action-menu-item-label {\n color: main.$gray700;\n }\n .pn-action-menu-checkbox {\n background-color: main.$gray50;\n }\n .pn-action-menu-radio-outer {\n border-color: main.$gray400;\n background-color: main.$gray50;\n }\n .pn-icon-svg path {\n fill: main.$gray700;\n }\n }\n\n &:checked + .pn-action-menu-button {\n .pn-action-menu-radio-inner {\n background-color: main.$gray400;\n }\n .pn-action-menu-checkbox {\n border-color: main.$gray400;\n background-color: main.$gray400;\n }\n }\n }\n\n &:hover + .pn-action-menu-button {\n background-color: main.$blue50;\n .pn-action-menu-radio-outer {\n border-color: main.$input-button-background-box-active;\n background-color: main.$input-button-background-hover;\n }\n }\n\n &:focus-visible + .pn-action-menu-button {\n background-color: main.$blue50;\n .pn-action-menu-checkbox,\n .pn-action-menu-radio .pn-action-menu-radio-outer {\n @include main.pn-focus-visible();\n }\n }\n }\n\n &-p {\n margin: 0;\n }\n\n > pn-button[data-default-icon] .pn-button {\n &[aria-expanded='true'] .pn-icon-svg {\n transform: rotate(180deg);\n transition-delay: 0s;\n }\n .pn-icon-svg {\n transform: rotate(0deg);\n transition-delay: main.$timing;\n @include main.pn-transition('transform');\n }\n }\n}\n","import { Component, Prop, State, Watch, Element, h, Host, Event, EventEmitter, Listen } from '@stencil/core';\n\nimport {\n awaitTopbar,\n en,\n getMenuWidth,\n getTotalHeightOffset,\n isSmallScreen,\n reduceMotion,\n ripple,\n uuidv4,\n} from '@/index';\nimport type {\n PnLanguages,\n PnActionMenuItem,\n Components,\n PnActionMenuInput,\n PnActionMenuGroup,\n PnMeasurements,\n} from '@/index';\n\nimport { translations, PnMenuTextProp } from './translation';\n\nimport { angle_down, angle_left, angle_right, open_in_new } from 'pn-design-assets/pn-assets/icons.js';\n\n/\n Create a list of actions in an accessible way.\n \n Option types include:\n \n - Regular button, click and it will collapse the menu,\n * - Checkbox/radio, toggle the option on/off\n * - Link, behaves like a regular `a[href]` element.\n \n You can group these actions in groups and/or sub menus.\n \n - `group`, an array of options. The label will act as a title for the items.\n * - `options`, an array of options. These items will appear in a sub-menu that can be toggled.\n \n @see {@link PnActionMenuItem}\n /\n@Component({\n tag: 'pn-action-menu',\n styleUrl: 'pn-action-menu.scss',\n})\nexport class PnActionMenu {\n private readonly id: string = `pn-action-menu-${uuidv4()}`;\n\n private menuButtonId: string = `${this.id}-button`;\n private menuListId: string = `${this.id}-list`;\n\n private menuTrigger: HTMLPnButtonElement;\n private menuContainer: HTMLDivElement;\n private menuList: HTMLMenuElement;\n\n private animation: Animation;\n private readonly duration: number = 400;\n private animationDuration: number = this.duration;\n\n private timeout: NodeJS.Timeout;\n\n /* 16em /\n private readonly menuWidth: number = 256;\n\n @Element() private hostElement: HTMLElement;\n\n @State() private smallMenu: boolean = null;\n @State() private upwards: boolean = false;\n\n @State() private activeSubmenu: PnActionMenuItem['value'][] = [];\n\n @State() private isClosing = false;\n @State() private isExpanding = false;\n\n /* Array of action menu options. @see {@link PnActionMenuItem} /\n @Prop() options: PnActionMenuItem[] = [];\n /* Set any prop from the `pn-button` component here. @see {@link Components.PnButton} /\n @Prop() button: Components.PnButton;\n\n /* Set a custom ID for the menu. /\n @Prop() menuId?: string = this.id;\n /* Manually set the language. /\n @Prop({ mutable: true }) language?: PnLanguages = null;\n\n /* Open/close the action menu manually. @category Features /\n @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n /* Prefer that the menu open upwards, if there is enough space. @category Features /\n @Prop() menuUp?: boolean = false;\n /* Prefer that the submenus opens to the left, if there is enough space. @category Features /\n @Prop() menuLeft?: boolean = false;\n\n /* Emitted when the menu is opened or closed. /\n @Event() private menuToggle: EventEmitter<{ open: boolean }>;\n /* Emitted when the menu is fully hidden/visible after the animation has played. /\n @Event() private menuVisible: EventEmitter<{ visible: boolean }>;\n /* Emitted when an option is clicked (button, link, input or submenus). /\n @Event() private menuOption: EventEmitter<{\n /* Which type of menu item was clicked. /\n type: 'button' \| 'link' \| 'input' \| 'submenu';\n /* If its an `input` type (checkbox/radio), it will be a generic `Event` (ChangeEvent) instead of `MouseEvent`. /\n click: MouseEvent \| Event;\n /* The full {@link PnActionMenuItem} object. /\n option: PnActionMenuItem;\n /* If the submenu is open/closed. /\n open?: Boolean;\n }>;\n\n @Watch('options')\n handleOptions() {\n this.setMenuLayout();\n }\n\n @Watch('open')\n openHandler() {\n this.setAnimationDuration();\n\n requestAnimationFrame(() => {\n if (this.open && !(this.isClosing \|\| this.isExpanding)) {\n this.setOffset();\n this.setMenuLayout();\n }\n\n this.gridHandler();\n\n this.menuToggle.emit({ open: this.open });\n\n clearTimeout(this.timeout);\n this.timeout = setTimeout(() => {\n if (!this.open) {\n this.activeSubmenu = [];\n const subMenus = this.hostElement.querySelectorAll<HTMLUListElement>('[data-x]');\n Array.from(subMenus).forEach(el => {\n el.removeAttribute('data-x');\n el.removeAttribute('data-y');\n });\n }\n\n this.menuVisible.emit({ visible: this.open });\n }, this.animationDuration);\n });\n }\n\n @Watch('menuId')\n handleMenuId() {\n this.menuButtonId = `${this.menuId}-button`;\n this.menuListId = `${this.menuId}-list`;\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n if (this.open) this.toggleActionMenu(false);\n }\n\n async componentWillLoad() {\n if (!this.options.length) console.warn(`${this.hostElement.localName}: No options set.`);\n\n this.handleMenuId();\n this.setAnimationDuration();\n\n if (this.language !== null) await awaitTopbar(this.hostElement);\n }\n\n componentDidLoad() {\n this.setOffset();\n\n if (this.open) this.gridHandler();\n }\n\n private translate(prop: PnMenuTextProp) {\n return translations[prop][this.language \|\| en];\n }\n\n /* Open/close the action menu. /\n private toggleActionMenu(state?: boolean) {\n this.open = state ?? !this.open;\n }\n\n private setMenuLayout() {\n if (!this.menuContainer) return;\n\n if (!(this.isClosing \|\| this.isExpanding)) this.resetMaxHeight();\n\n const measurements = this.getMenuMeasurements();\n\n this.setDirection(measurements);\n this.setMenuSize(measurements);\n this.setMaxHeight(measurements);\n }\n\n private setDirection({ hUp, hDown, sUp, sDown }: PnMeasurements) {\n const fitsUpwards = sUp > hUp;\n const fitsDownards = sDown > hDown;\n const moreSpaceDown = sDown > sUp;\n this.upwards = (this.menuUp && fitsUpwards) \|\| (!fitsDownards && !moreSpaceDown);\n }\n\n private setMenuSize({ hUp, hDown, sUp, sDown }: PnMeasurements) {\n const isWidthSmall = isSmallScreen();\n const menuFits = this.upwards ? sUp > hUp : sDown > hDown;\n const isSmall = isWidthSmall \|\| !menuFits;\n\n if (isSmall !== this.smallMenu) {\n this.smallMenu = isSmall;\n }\n }\n\n private setMaxHeight({ hUp, hDown, sUp, sDown }: PnMeasurements) {\n if (this.smallMenu) {\n const heightUp = hUp > sUp ? hUp - 16 : hUp;\n const heightDown = hDown > sDown ? hDown - 8 : hDown;\n this.hostElement.style.setProperty('--pn-menu-height', `${this.upwards ? heightUp : heightDown}px`);\n } else this.resetMaxHeight();\n }\n\n private resetMaxHeight() {\n this.hostElement.style.setProperty('--pn-menu-height', 'unset');\n }\n\n private setAnimationDuration() {\n if (reduceMotion()) this.animationDuration = 0;\n else this.animationDuration = this.duration;\n }\n\n private getRect(element: HTMLElement): DOMRect {\n return element.getBoundingClientRect();\n }\n\n private getMenuMeasurements(): PnMeasurements {\n const allLists = Array.from(this.menuContainer.querySelectorAll('menu'));\n const maxHeight = Math.max(...allLists.map(el => el.scrollHeight));\n\n const rectButton = this.getRect(this.menuTrigger);\n const rectMenu = this.getRect(this.menuContainer);\n\n /* Measurements upwards. /\n const sUp = rectButton.top - getTotalHeightOffset();\n const hUp = sUp > maxHeight ? maxHeight : sUp;\n\n /* Measurements downwards. /\n const sDown = innerHeight - rectMenu.top;\n const hDown = sDown > maxHeight ? maxHeight : sDown;\n\n return {\n hUp,\n hDown,\n sUp,\n sDown,\n };\n }\n\n private setOffset() {\n const data = this.getRect(this.hostElement);\n const fullWidth = data.left - getMenuWidth() + this.menuWidth;\n const isWide = fullWidth > innerWidth;\n const offset = isWide ? fullWidth - innerWidth + 16 : 0;\n\n if (this.menuContainer) this.menuContainer.style.setProperty('--pn-action-menu-offset', `-${offset}px`);\n }\n\n private getListId(option: PnActionMenuItem) {\n return `pn-menu-${option.value}-list`;\n }\n\n private getButtonId(option: PnActionMenuItem) {\n return `pn-menu-${option.value}-button`;\n }\n\n private getTriggerIcon() {\n if (this.button?.icon) return;\n return angle_down;\n }\n\n /* Set the path of open sub menus. /\n private getSubMenuPath(options: PnActionMenuItem[], value: string, path = []): string[] {\n for (const item of options) {\n const newPath = [...path, item.value];\n if (item.value === value) return newPath;\n\n if (item.options \|\| item.group) {\n const result = this.getSubMenuPath(item.options \|\| item.group, value, newPath);\n if (result) return result;\n }\n }\n return null;\n }\n\n private closeEachSubMenu() {\n this.menuTrigger?.querySelector('button')?.focus({ preventScroll: true });\n\n const interval = setInterval(() => {\n if (this.smallMenu \|\| this.activeSubmenu.length === 0) {\n clearInterval(interval);\n this.toggleActionMenu(false);\n } else {\n this.activeSubmenu.pop();\n this.activeSubmenu = [...this.activeSubmenu];\n }\n }, 150);\n }\n\n private escButton(event: KeyboardEvent, option: PnActionMenuItem) {\n const { key } = event;\n\n if (key === 'Escape') {\n event.preventDefault();\n event.stopImmediatePropagation();\n\n this.isSubmenuActive(option.value) ? this.toggleSub(option) : this.toggleActionMenu();\n }\n }\n\n // Animation Start\n\n private gridHandler() {\n if (this.open) this.openGrid();\n else this.closeGrid();\n }\n\n private openGrid() {\n const list = this.getRect(this.menuList);\n\n const { clientHeight } = this.menuContainer;\n const height = this.isClosing ? clientHeight : 0;\n this.menuContainer.style.height = `${list.height}px`;\n\n this.isExpanding = true;\n this.animateGrid(true, `${height}px`, `${list.height}px`);\n }\n\n private closeGrid() {\n const list = this.getRect(this.menuList);\n\n const { clientHeight } = this.menuContainer;\n const height = this.isExpanding ? clientHeight : list.height;\n this.menuContainer.style.height = `0px`;\n\n this.isClosing = true;\n this.animateGrid(false, `${height}px`, `0px`);\n }\n\n private animateGrid(open: boolean, startHeight: string, endHeight: string) {\n this.cancelAnimations();\n this.animation = this.menuContainer.animate(\n {\n height: [startHeight, endHeight],\n },\n {\n duration: this.animationDuration,\n easing: 'cubic-bezier(0.6, 0, 0.2, 1)',\n },\n );\n this.animation.onfinish = () => this.animationFinish();\n this.animation.oncancel = () => (open ? (this.isExpanding = false) : (this.isClosing = false));\n }\n\n private animationFinish() {\n this.cancelAnimations();\n this.menuContainer.style.height = this.isClosing ? '0px' : '';\n this.isClosing = false;\n this.isExpanding = false;\n }\n\n private cancelAnimations() {\n if (this.animation) this.animation.cancel();\n }\n\n // Animation end\n\n private async optionSelect(option: PnActionMenuItem, click: MouseEvent \| Event) {\n const type = option?.options?.length ? 'submenu' : !!option.input ? 'input' : option.href ? 'link' : 'button';\n const isSubMenu = type === 'submenu';\n\n if (isSubMenu) this.toggleSub(option);\n else if (type === 'button') this.closeEachSubMenu();\n else if (type === 'input') option.checked = (click.target as HTMLInputElement).checked;\n\n this.menuOption.emit({\n option,\n type,\n click,\n open: isSubMenu ? this.isSubmenuActive(option.value) : null,\n });\n\n const target = click.target as HTMLElement;\n const element =\n target.localName === 'input'\n ? (target.nextElementSibling as HTMLElement)\n : target.className === 'pn-action-menu-button'\n ? target\n : target.closest<HTMLElement>('.pn-action-menu-button');\n\n const { x, width, y, top } = this.getRect(element as HTMLElement);\n const clientCor = { clientX: x + width - 24, clientY: y - top };\n\n ripple(click.type === 'click' ? (click as MouseEvent) : clientCor, element);\n\n this.menuContainer.scrollTo({ top: 0 });\n }\n\n /* Toggle individual sub-menus inside the action menu by using the `option['value']`. /\n private toggleSub(option: PnActionMenuItem) {\n const { value } = option;\n\n const path = this.getSubMenuPath(this.options, value);\n const isActive = this.activeSubmenu.includes(value);\n isActive && path.splice(this.activeSubmenu.indexOf(value), 1);\n\n const item = this.hostElement.querySelector<HTMLElement>(`#${this.getListId(option)}`);\n const data = this.getRect(item);\n\n const spaceLeft = data.left;\n const spaceRight = innerWidth - data.right - 8;\n\n const fitsLeft = spaceLeft > data.width;\n const fitsRight = spaceRight > data.width;\n\n const climbUp = this.menuUp && data.top - data.height > 0;\n const yDirection = climbUp ? 'top' : 'bottom';\n\n if (!isActive && !item.dataset.x)\n item.setAttribute(\n 'data-x',\n this.menuLeft && fitsLeft ? 'left' : fitsRight ? 'right' : fitsLeft ? 'left' : 'center',\n );\n if (!isActive && !item.dataset.y) item.setAttribute('data-y', yDirection);\n\n if (JSON.stringify(path) === JSON.stringify(this.activeSubmenu))\n this.activeSubmenu = this.activeSubmenu.filter(item => item !== value);\n else this.activeSubmenu = [...path];\n }\n\n /* Check if a sub-menu is active. /\n private isSubmenuActive(value: string): boolean {\n return this.activeSubmenu.includes(value);\n }\n\n private isMenuActive() {\n const isRootSubInsideGroup = this.options.find(({ value }) => this.activeSubmenu.every(val => val === value));\n return this.smallMenu && (this.activeSubmenu?.length === 0 \|\| isRootSubInsideGroup);\n }\n\n private isCurrentSubMenu(value: string) {\n return Boolean(this.activeSubmenu[this.activeSubmenu.length - 1] === value);\n }\n\n private getOptionTrailing(option: PnActionMenuItem) {\n const useButtonIcon = option.options?.length && angle_right;\n const useTrailingIcon = option.trailingIcon;\n const useLinkIcon = option.target === '_blank' && open_in_new;\n\n /* If the user has defined a trialing icon, use it first. */\n const icon = useButtonIcon \|\| useTrailingIcon \|\| useLinkIcon;\n\n if (icon) {\n return <pn-icon icon={icon} color=\"blue700\" data-suffix data-active={this.isSubmenuActive(option.value)} />;\n }\n if (option.suffix) {\n return <span class=\"pn-action-menu-item-suffix\">{option.suffix}</span>;\n }\n }\n\n private renderCheckbox(option: PnActionMenuInput) {\n const id = `pn-menu-${option.value}-label`;\n const idHelper = `pn-menu-${option.value}-helpertext`;\n return (\n <div class=\"pn-action-menu-item-content\">\n <input\n type={option.input}\n id={id}\n class=\"pn-action-menu-input\"\n name={option.name}\n value={option.value}\n checked={option.checked}\n disabled={option.disabled}\n aria-describedby={option.helpertext ? idHelper : null}\n onInput={event => this.optionSelect(option, event)}\n tabIndex={this.open ? null : -1}\n />\n\n <div class=\"pn-action-menu-button\">\n {!!option.icon && <pn-icon icon={option.icon} color=\"blue700\" />}\n\n <div class=\"pn-action-menu-item-text\">\n <label htmlFor={id} class=\"pn-action-menu-item-label\">\n {option.label}\n </label>\n {option.helpertext && (\n <p id={idHelper} class=\"pn-action-menu-item-helpertext\">\n <span>{option.helpertext}</span>\n </p>\n )}\n </div>\n {option.input === 'checkbox' ? (\n <div class=\"pn-action-menu-checkbox\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n <polyline class=\"pn-action-menu-checkbox-checkmark-path\" points=\"4,12 9,17 20,6\" stroke-width=\"3\" />\n </svg>\n </div>\n ) : (\n <div class=\"pn-action-menu-radio\">\n <div class=\"pn-action-menu-radio-outer\">\n <div class=\"pn-action-menu-radio-inner\" />\n </div>\n </div>\n )}\n </div>\n </div>\n );\n }\n\n private renderButton(option: PnActionMenuItem) {\n const isCloseButton = option.label === 'BACK';\n const isSub = !!option?.options?.length;\n const isGroup = !!option?.group?.length;\n const isLink = !!option.href && !isSub && !isGroup;\n\n const appendedId = isCloseButton ? '-close' : '';\n const hasIcon = isCloseButton \|\| !!option.icon;\n\n const trailingObject = isCloseButton ? null : this.getOptionTrailing(option);\n const open = this.isSubmenuActive(option.value);\n const subMenuAttrs = isSub\n ? {\n 'aria-haspopup': 'true',\n 'aria-controls': open ? this.getListId(option) : null,\n 'aria-expanded': open?.toString(),\n }\n : {};\n\n const attrs = isLink\n ? {\n href: option.href,\n target: option.target,\n }\n : {\n disabled: option.disabled,\n };\n\n const Tag = isLink ? 'a' : 'button';\n\n return isGroup ? (\n <div class=\"pn-action-menu-group-label\">\n <p class=\"pn-action-menu-p\">{option.label}</p>\n {option.helpertext && <p class=\"pn-action-menu-group-helpertext\">{option.helpertext}</p>}\n </div>\n ) : (\n <div class=\"pn-action-menu-item-content\" data-close={isCloseButton}>\n <Tag\n id={this.getButtonId(option) + appendedId}\n class=\"pn-action-menu-button\"\n {...subMenuAttrs}\n {...attrs}\n tabIndex={this.open ? null : -1}\n onClick={event => this.optionSelect(option, event)}\n onKeyDown={(event: KeyboardEvent) => this.escButton(event, option)}\n >\n {hasIcon && <pn-icon icon={isCloseButton ? angle_left : option.icon} color=\"blue700\" />}\n <div class=\"pn-action-menu-item-text\">\n <span class=\"pn-action-menu-item-label\">{isCloseButton ? this.translate('BACK') : option.label}</span>\n {option.helpertext && !isLink && <span class=\"pn-action-menu-item-helpertext\">{option.helpertext}</span>}\n </div>\n {trailingObject}\n </Tag>\n </div>\n );\n }\n\n private renderSub(option: PnActionMenuItem) {\n return (\n <menu\n id={this.getListId(option)}\n aria-labelledby={this.getButtonId(option)}\n class=\"pn-action-menu-sub\"\n data-open={this.isSubmenuActive(option.value)?.toString()}\n data-current={this.isCurrentSubMenu(option.value)}\n >\n {this.smallMenu && (\n <li class=\"pn-action-menu-item\">\n {this.renderButton({\n label: 'BACK',\n value: option.value,\n options: option.options,\n })}\n </li>\n )}\n {option.options.map(item => this.renderMenuItem(item))}\n </menu>\n );\n }\n\n private renderGroup(option: PnActionMenuGroup) {\n return <menu class=\"pn-action-menu-group\">{option.group.map(item => this.renderMenuItem(item))}</menu>;\n }\n\n private renderMenuItem(option: PnActionMenuItem) {\n const isSub = !!option?.options?.length;\n const isGroup = !isSub && !!option?.group?.length;\n\n const isCheckbox = !!option.input && !isSub && !isGroup;\n\n return (\n <li class=\"pn-action-menu-item\" data-group={isGroup} data-sub={isSub}>\n {isCheckbox ? this.renderCheckbox(option) : this.renderButton(option)}\n {isSub ? this.renderSub(option) : isGroup && this.renderGroup(option)}\n </li>\n );\n }\n\n private renderMenu() {\n return (\n <div\n id={this.menuListId}\n class=\"pn-action-menu-container\"\n role=\"region\"\n aria-labelledby={this.menuButtonId}\n data-open={this.open}\n data-moving={this.isClosing \|\| this.isExpanding}\n data-upwards={this.upwards}\n data-small={this.smallMenu}\n style={{ height: '0px' }}\n ref={el => (this.menuContainer = el)}\n >\n <menu class=\"pn-action-menu-list\" ref={el => (this.menuList = el)} data-current={this.isMenuActive()}>\n {this.options?.map(option => this.renderMenuItem(option))}\n </menu>\n </div>\n );\n }\n\n render() {\n return (\n <Host>\n <div id={this.menuId !== this.id ? this.menuId : null} class=\"pn-action-menu\">\n <pn-button\n icon={this.getTriggerIcon()}\n {...this.button}\n buttonId={this.menuButtonId}\n tooltipUp={!this.upwards}\n ariahaspopup=\"true\"\n ariacontrols={this.open ? this.menuListId : null}\n ariaexpanded={this.open.toString()}\n data-default-icon={!this.button?.icon}\n onPnClick={() => this.toggleActionMenu()}\n ref={el => (this.menuTrigger = el)}\n />\n {this.renderMenu()}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/umd/modules/@postnord/web-components/cjs/pn-button_2.cjs.entry.js CHANGED Viewed

@@ -179,7 +179,7 @@ const PnSpinner = class {
         return `${this.size}em`;
     }
     render() {
-        return (index.h(index.Host, { key: 'a9ecba01b5b30a660a44439c714b7ad57cf02a88' }, index.h("svg", { key: '03fbe990bf1ae0402fcb27707e0c1712d8a84492', class: "pn-spinner", style: { '--pn-spinner-size': this.getSize(), '--pn-spinner-color': this.getColor() }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, index.h("circle", { key: 'c48784865cd9c8c3d55cd9b1bd3e0dff7a4ebe35', class: "pn-spinner-circle", cx: "12", cy: "12", r: "10", "stroke-width": "3" }), index.h("circle", { key: '5f69d1bbbf864842f9ae54dc9a29b61603a83bff', class: "pn-spinner-dot", cx: "21.3", cy: "16", r: "1.48" }))));
+        return (index.h(index.Host, { key: '70929226e52cdda66312d599b0f8d4c83e902263' }, index.h("svg", { key: '0e4a3843737f29304996b5eb81b772b904f2d1c7', class: "pn-spinner", style: { '--pn-spinner-size': this.getSize(), '--pn-spinner-color': this.getColor() }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, index.h("circle", { key: '09d5ab69786a82fa44fc8b62aeb00b93ae4e8c0d', class: "pn-spinner-circle", cx: "12", cy: "12", r: "10", "stroke-width": "3" }), index.h("circle", { key: 'de94ea674640b278406a32486d8dbac3ebaec156', class: "pn-spinner-dot", cx: "21.3", cy: "16", r: "1.48" }))));
     }
 };
 PnSpinner.style = PnSpinnerStyle0;

package/umd/modules/@postnord/web-components/cjs/pn-card.cjs.entry.js CHANGED Viewed

@@ -78,7 +78,7 @@ const PnCard = class {
     }
     render() {
         const TitleTag = this.getHeadingTag();
-        return (index.h(index.Host, { key: '821cee3f202421ab0e60bbba012b8ad8dbb05793' }, index.h("article", { key: '41ff1c612af9e2be99b446b549088e5892771fb2', id: this.cardId, class: "pn-card", "data-link": !!this.href, "data-horizontal": this.horizontal, "data-reverse": this.reverse, "data-focus": this.visibleOutline }, index.h("div", { key: '780140151f04b678c9c74bb722a9b45447f66645', class: "pn-card-image" }, index.h("picture", { key: '94f932a7b6bf22e6f13789c1bae776cbcf99291d', class: "pn-card-picture", style: { '--pn-card-aspect-ratio': this.aspectRatio || 'unset' } }, index.h("slot", { key: 'ccb5f90249e4f5cd73924a15fcd86ccb1ce08f87', name: "image" }))), index.h("div", { key: '2cc59cc4c75444be12802a3bc723f59c225b4336', class: "pn-card-content" }, index.h("header", { key: '4f5824bad2bff67c416c177138703ec6b2e9baeb', class: "pn-card-header" }, index.h("div", { key: 'cef69f9a720f8cd69df4f5dbc34973b3ebc2750a', class: "pn-card-tags" }, index.h("slot", { key: 'c6b93db08c9b0bcd268b6d9faaf9f4a8d9cd86c6', name: "tags" })), !!this.overline && index.h("p", { key: 'ca27f600423daf37e77cfefec9e8ab9710998d98', class: "pn-card-label-overline" }, this.overline), !!this.label && (index.h(TitleTag, { key: 'c6c4803f194c727c9bc3f0bf6592a4ea77e99a4a', id: this.getTitleId(), class: "pn-card-label" }, this.label)), index.h("slot", { key: 'cb5757f5575590542047bd07282481601c5f399f', name: "header" })), index.h("section", { key: '19c80b379dff1a6c3f734498b6b32a0a486d0183', class: "pn-card-section" }, !!this.text && index.h("p", { key: 'b807218d4d0554ea65462caf013e0208dcfd340d', class: "pn-card-section-paragraph" }, this.text), index.h("slot", { key: '15638a8de80d16b8779415aa2d23cdf0a56e08c9' })), index.h("nav", { key: 'ff50a2c165936be2feff4cb0f1f821c60e6da204', class: "pn-card-navigation" }, this.showHref() && (index.h("a", { key: '7994139742f0a623e0e9ce17a8cd3f1088f9753d', class: "pn-card-link", href: this.href, target: this.target, rel: this.rel, "aria-labelledby": this.getLabelledby(), onClick: event => this.handleClick(event), onFocus: event => this.handleFocus(event), onBlur: event => this.handleFocus(event) }, this.hrefLabel, index.h("pn-icon", { key: 'bfac7739393db47a446b987a631143601ca33ceb', color: "blue700", icon: this.getIcon() }))), index.h("slot", { key: '3fab25b3c69c45c6b09536a6454f20a0735f80e2', name: "navigation" }))))));
+        return (index.h(index.Host, { key: '4c1a897e5b6fd69663aa076de44231cbde9b85b1' }, index.h("article", { key: 'a93fb7255cd352eed29814f010f0111eebcf0d46', id: this.cardId, class: "pn-card", "data-link": !!this.href, "data-horizontal": this.horizontal, "data-reverse": this.reverse, "data-focus": this.visibleOutline }, index.h("div", { key: '1861f3a85267df00d8d974ed2f014fb097288d4c', class: "pn-card-image" }, index.h("picture", { key: 'd0acfe747efd63762ddb0dd7cbe67baadb7ad4e1', class: "pn-card-picture", style: { '--pn-card-aspect-ratio': this.aspectRatio || 'unset' } }, index.h("slot", { key: 'e8360ba8b54d5ad376b549189102eb6412fb6a3e', name: "image" }))), index.h("div", { key: '1b613813ac38d257cd2c64cb3e7f053950b8d58a', class: "pn-card-content" }, index.h("header", { key: '4048f0f93b62c71f3caa553ba0f217064f1f8b80', class: "pn-card-header" }, index.h("div", { key: '071f1f13e492909e27aa4fb860c8ba3a9e88efc4', class: "pn-card-tags" }, index.h("slot", { key: 'bb4ad165fc8443b55784fcad35d8733f89e34b55', name: "tags" })), !!this.overline && index.h("p", { key: 'c75cfc0045739d7dfa4c2c6aef79dd57d64ccbc1', class: "pn-card-label-overline" }, this.overline), !!this.label && (index.h(TitleTag, { key: 'e65289e4307c08f8c92e9b83b3981cd8413a63d4', id: this.getTitleId(), class: "pn-card-label" }, this.label)), index.h("slot", { key: 'd901c192ed2e029f9b2a0a7df421d6c008f80ea6', name: "header" })), index.h("section", { key: 'da99e7c8a01924e670a9cbee424ac899870c1a8f', class: "pn-card-section" }, !!this.text && index.h("p", { key: 'c27938d4704111825dca3ab621133bdd99e401f0', class: "pn-card-section-paragraph" }, this.text), index.h("slot", { key: '6dfd91ac2b404b23522812c22247d01c5da6a557' })), index.h("nav", { key: '10252f1454848d360a727c2a85b9ab5461d73b0b', class: "pn-card-navigation" }, this.showHref() && (index.h("a", { key: '82640b1972e9f740694a5c135857e8b3c87e7a2b', class: "pn-card-link", href: this.href, target: this.target, rel: this.rel, "aria-labelledby": this.getLabelledby(), onClick: event => this.handleClick(event), onFocus: event => this.handleFocus(event), onBlur: event => this.handleFocus(event) }, this.hrefLabel, index.h("pn-icon", { key: '50d3021b2f7f2722426f5299fea249b596e8f28b', color: "blue700", icon: this.getIcon() }))), index.h("slot", { key: 'be97f6fc934ccd5f55fb577028c52757ada6c128', name: "navigation" }))))));
     }
     static get watchers() { return {
         "cardId": ["watchCardId"]

package/umd/modules/@postnord/web-components/cjs/pn-checkbox.cjs.entry.js CHANGED Viewed

@@ -41,7 +41,7 @@ const PnCheckbox = class {
         this.handleId();
     }
     render() {
-        return (index.h(index.Host, { key: 'c3bcdee583919c5f6f11f2e21cb5362f96ac1633' }, index.h("input", { key: '10e34d60ff748c2d99c9e3740c69a17016ca3223', type: "checkbox", id: this.checkboxid, value: this.value, name: this.name || this.checkboxid, disabled: this.disabled, checked: this.checked, required: this.required, indeterminate: this.indeterminate, "aria-invalid": this.invalid?.toString(), "aria-describedby": this.helpertext && this.idHelpertext }), index.h("div", { key: '15e4f62557b23b99ab344f32dcfa2103c395b9ed', class: "pn-checkbox", "data-tile": this.tile, "data-invalid": this.invalid }, index.h("div", { key: '98e4eb05092b3fe4d9e30b748e89d3bd104925ff', class: "pn-checkbox-outer" }, index.h("svg", { key: 'a39edd1e675ba5b131059f1bd8b0d7f6fea9370b', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, index.h("polyline", { key: 'a355d7729c12497f133cde364c7ff9601f9940db', class: "pn-checkbox-checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" }), index.h("polyline", { key: '18c274c70036a5a3aae8b333c513d053061945cf', class: "pn-checkbox-indeterminate-path", points: "4,12 20,12", "stroke-width": "3" }))), (!!this.label || !!this.helpertext) && (index.h("p", { key: '1499f1e5d14dc15cc5691429fd8565c1e16b4fda', class: "pn-checkbox-content" }, !!this.label && (index.h("label", { key: '87ca925b4af005c6cbec279a3209fcd5d92a4ae8', htmlFor: this.checkboxid, class: "pn-checkbox-label" }, this.label)), !!this.helpertext && (index.h("span", { key: '6808421c4151d5ad4711477d165e0d8a9bdaceae', id: this.idHelpertext, class: "pn-checkbox-helpertext" }, this.helpertext)))), this.tile && this.icon && index.h("pn-icon", { key: '0f182a49401f04adf6944a82490d838bd114f38b', icon: this.icon, color: "gray900" }))));
+        return (index.h(index.Host, { key: 'f0639bf5c45347c39ef933b7f4967be10e671e46' }, index.h("input", { key: '560e64e32b38b40a847b3b7283255dc9e9f36f72', type: "checkbox", id: this.checkboxid, value: this.value, name: this.name || this.checkboxid, disabled: this.disabled, checked: this.checked, required: this.required, indeterminate: this.indeterminate, "aria-invalid": this.invalid?.toString(), "aria-describedby": this.helpertext && this.idHelpertext }), index.h("div", { key: 'ac86d6c2bd460ce3b29fe8862b9a7b64ca23e2dd', class: "pn-checkbox", "data-tile": this.tile, "data-invalid": this.invalid }, index.h("div", { key: '6df97a9582503dc04946f3e590dff276bf87d885', class: "pn-checkbox-outer" }, index.h("svg", { key: '37d8212ac1b0088ebcbe28cd02d5cc6e59352e63', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, index.h("polyline", { key: 'b19a548634e5fe186291a0d24c4c3f81efe8eab1', class: "pn-checkbox-checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" }), index.h("polyline", { key: '040639fc42060dff6db8fab45dc713ccf81631bf', class: "pn-checkbox-indeterminate-path", points: "4,12 20,12", "stroke-width": "3" }))), (!!this.label || !!this.helpertext) && (index.h("p", { key: '3006b0ba0826003608453423259914a3b9622168', class: "pn-checkbox-content" }, !!this.label && (index.h("label", { key: '2de986fd9df0d639e5b398c24b4aa95e6e416c5d', htmlFor: this.checkboxid, class: "pn-checkbox-label" }, this.label)), !!this.helpertext && (index.h("span", { key: '13c417fef46e456a1e036a22c9655da2fa19de24', id: this.idHelpertext, class: "pn-checkbox-helpertext" }, this.helpertext)))), this.tile && this.icon && index.h("pn-icon", { key: '204b119d1bf7da4ce2fb90d1f53114b6a5ada7dd', icon: this.icon, color: "gray900" }))));
     }
     static get watchers() { return {
         "checkboxid": ["handleId"]

package/umd/modules/@postnord/web-components/cjs/pn-choice-chip.cjs.entry.js CHANGED Viewed

@@ -31,7 +31,7 @@ const PnChoiceChip = class {
     }
     get hostElement() { return index.getElement(this); }
     render() {
-        return (index.h(index.Host, { key: '163abbbcca43588ea04866d4826bd7b30b88324d' }, index.h("div", { key: '2af33c1a26f70b59d22db00a943c09b43eaf3523', class: "pn-choice-chip" }, index.h("input", { key: '23dbbfe5102e681efbf6d08c30e64fb6f8761300', type: this.radio ? 'radio' : 'checkbox', id: this.choiceid, value: this.value, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled }), index.h("div", { key: 'c57f848d0458880a41f030691e9fa6bef497bf18', class: "pn-choice-chip-container", "data-icon": !!this.icon, "data-small": this.small, "data-large": this.large }, index.h("div", { key: '2978e8c81a0f4057a70e1cb29d94768040ecfd95', class: "pn-choice-chip-icon" }, index.h("pn-icon", { key: '62101eaa67f7351df8657b4df56e145d54ca4468', color: "blue700", class: "pn-choice-chip-icon-check", icon: check.check }), !!this.icon && index.h("pn-icon", { key: '06c50dad1d7e2b78a36d4c923878633d489b0d55', color: "blue700", class: "pn-choice-chip-icon-user", icon: this.icon })), index.h("label", { key: '502b02b9c9e30d56a39aa425af8b6c9bf755b8c9', class: "pn-choice-chip-label", htmlFor: this.choiceid }, index.h("span", { key: '79f7c5b812fbd06c54af2d14f08d2e0a7ae1f520' }, this.label), index.h("slot", { key: 'f90c14659d035a662fca81e4045e7523b60f8a46' }))))));
+        return (index.h(index.Host, { key: '5ff90532fb75531aa8fcb23fd4dd0ae0dfc7d33a' }, index.h("div", { key: '500cb322689763c229ac303d1d62643a620c74ed', class: "pn-choice-chip" }, index.h("input", { key: '88feb0c54e20951c8c6e9d761323e1806e4583bd', type: this.radio ? 'radio' : 'checkbox', id: this.choiceid, value: this.value, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled }), index.h("div", { key: 'd1ed91ded7233f9229bdbde4f9c40b5c86a67fba', class: "pn-choice-chip-container", "data-icon": !!this.icon, "data-small": this.small, "data-large": this.large }, index.h("div", { key: '29f8378c640a6553416507e2ca0454bca47c557c', class: "pn-choice-chip-icon" }, index.h("pn-icon", { key: 'f70f7191ade89323265b312cc881141edffc4296', color: "blue700", class: "pn-choice-chip-icon-check", icon: check.check }), !!this.icon && index.h("pn-icon", { key: '87d85e74effe1b65d949b0735a50f5b4a56acf25', color: "blue700", class: "pn-choice-chip-icon-user", icon: this.icon })), index.h("label", { key: '772f0726fcaada44af2c10ab922bb3eb151886b7', class: "pn-choice-chip-label", htmlFor: this.choiceid }, index.h("span", { key: '7c5bf78b2811a70308663bfb1be95420ce7ca30d' }, this.label), index.h("slot", { key: '6fd6ee5beb63f38285b273f0a73d41e5895cc8e6' }))))));
     }
 };
 PnChoiceChip.style = PnChoiceChipStyle0;

package/umd/modules/@postnord/web-components/cjs/pn-counter.cjs.entry.js CHANGED Viewed

@@ -214,7 +214,7 @@ const PnCounter = class {
             this.counterElement.style.setProperty('--pn-counter-ch', '0ch');
     }
     render() {
-        return (index.h(index.Host, { key: 'ae9451959e2ebc720b69af2942deaa5d94e36565' }, index.h("div", { key: 'f631dd7d8c7acbb4a459b46da53ea3445ae96480', class: "pn-counter", role: "group", "aria-labelledby": this.idLabel, "aria-describedby": this.describedbyIds() }, index.h("label", { key: '2538568f65666aedc3a0f9e2f3f681b4b9647cd6', htmlFor: this.counterid, class: "pn-counter-label", id: this.idLabel }, index.h("span", { key: '73abf4ec6f185201f95799910a70518f61f85577' }, this.label)), index.h("div", { key: '8e99e77f67aae105b90052ed74ba6c3a438e22ca', class: "pn-counter-items", "data-hidebuttons": this.noButtons() }, index.h("pn-button", { key: '8d6f5c4af2a524bb43a3023c130b2a6e1814c53d', "data-decrease": true, appearance: "light", variant: "outlined", "no-tab": this.noButtons(), icon: minus, iconOnly: true, arialabel: this.labelDecrease || this.translate('DECREASE'), onClick: () => this.decreaseAmount() }), index.h("input", { key: '93ab63799f90cdecdbf3694ca56dfe92a5fe9e80', id: this.counterid, class: "pn-counter-input", type: "number", min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, required: this.required, readonly: this.readonly, disabled: this.disabled, "aria-describedby": this.describedbyIds(), onInput: e => this.setVal(e), onKeyDown: (e) => this.keyBoardInput(e) }), index.h("pn-button", { key: 'a39f90c5ace631d8973a700f72d57a2490cad342', "data-increase": true, appearance: "light", variant: "outlined", "no-tab": this.noButtons(), icon: plus, iconOnly: true, arialabel: this.labelIncrease || this.translate('INCREASE'), onClick: () => this.increaseAmount() })), !!this.getTextMessage() && (index.h("p", { key: '0ed6cc20cb56637faa7d70c6fe903a5e412fff0e', id: this.idText, class: "pn-counter-helpertext" }, index.h("span", { key: 'def00a454a70d4ebc952cdfbfdb5b11eece74452' }, this.getTextMessage()))), index.h("p", { key: 'eef2cf6b2f193779d616e09c32a9fc0ece4c5104', id: this.idAmount, class: "pn-counter-sr-only", "aria-live": "assertive" }, this.displaySrValue ? this.getTextMessage(true) : ''))));
+        return (index.h(index.Host, { key: '2fe59aa7c06e3005cd3f9c8b633bf3ee3c85833b' }, index.h("div", { key: '206308ce9ff21a303013164a3ec4015074d494b2', class: "pn-counter", role: "group", "aria-labelledby": this.idLabel, "aria-describedby": this.describedbyIds() }, index.h("label", { key: '6843e23ed0c46cf33aaa6b83c9c7304775dba549', htmlFor: this.counterid, class: "pn-counter-label", id: this.idLabel }, index.h("span", { key: 'cbc609092923ef8806d7b5e77beb26021b490d44' }, this.label)), index.h("div", { key: 'df51b364dc11c020d390f3bed823caf7063a9c94', class: "pn-counter-items", "data-hidebuttons": this.noButtons() }, index.h("pn-button", { key: '52413b869322b9398eddfb81713609205594d59f', "data-decrease": true, appearance: "light", variant: "outlined", "no-tab": this.noButtons(), icon: minus, iconOnly: true, arialabel: this.labelDecrease || this.translate('DECREASE'), onClick: () => this.decreaseAmount() }), index.h("input", { key: '8c9dd73dba29a17df0515758a48be4f4f8798bbf', id: this.counterid, class: "pn-counter-input", type: "number", min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, required: this.required, readonly: this.readonly, disabled: this.disabled, "aria-describedby": this.describedbyIds(), onInput: e => this.setVal(e), onKeyDown: (e) => this.keyBoardInput(e) }), index.h("pn-button", { key: 'c10fc2e4f25708ed81dc95b8ea07c0c07803df1f', "data-increase": true, appearance: "light", variant: "outlined", "no-tab": this.noButtons(), icon: plus, iconOnly: true, arialabel: this.labelIncrease || this.translate('INCREASE'), onClick: () => this.increaseAmount() })), !!this.getTextMessage() && (index.h("p", { key: 'e01ab71ae17a042681b5c3a87766bac914c6be10', id: this.idText, class: "pn-counter-helpertext" }, index.h("span", { key: 'd51a1a0e851e7a6afe79a3c384167324c906939a' }, this.getTextMessage()))), index.h("p", { key: 'c89af26fd950c7166cec80b08feb1651feb54bba', id: this.idAmount, class: "pn-counter-sr-only", "aria-live": "assertive" }, this.displaySrValue ? this.getTextMessage(true) : ''))));
     }
     static get watchers() { return {
         "value": ["watchValue"],

package/umd/modules/@postnord/web-components/cjs/pn-date-picker.cjs.entry.js CHANGED Viewed

@@ -400,7 +400,7 @@ function getCode(code) {
     };
 }
-const pnDatePickerCss = "/* Global utility variables */\n/* Input styles */\n/* Transition variables */\npn-date-picker {\n  position: relative;\n  display: block;\n}\n\npn-date-picker .pn-date-picker {\n  width: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25em;\n  container-type: inline-size;\n  /** The calendar dropdown */\n  /* Month list */\n}\n@container (max-width: 24em) {\n  pn-date-picker .pn-date-picker .pn-date-picker-container {\n    flex: 1 1 20em;\n  }\n  pn-date-picker .pn-date-picker .pn-date-picker-range-icon {\n    display: none;\n  }\n}\npn-date-picker .pn-date-picker-container {\n  display: block;\n  flex: 1 1 11em;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-label {\n  color: #a70707;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input {\n  border-color: #a70707;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input:hover {\n  border-color: #500715;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input:focus-visible {\n  background-color: #ffffff;\n  border-color: #a70707;\n  outline-color: #a70707;\n}\npn-date-picker .pn-date-picker-label {\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n  font-weight: 400;\n  color: #2d2013;\n  margin: 0 0 0.25em 0;\n  gap: 0.5em;\n  -webkit-tap-highlight-color: transparent;\n  transition-property: color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-label {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-label > span {\n  font-size: 0.875em;\n}\npn-date-picker .pn-date-picker-field {\n  position: relative;\n  display: flex;\n}\npn-date-picker .pn-date-picker-input {\n  color: #2d2013;\n  background-color: #ffffff;\n  border: 0.0625em solid #969087;\n  border-radius: 0.5em;\n  padding: 0.75em;\n  font-family: inherit;\n  font-size: 1em;\n  font-weight: 500;\n  line-height: 1.5em;\n  -webkit-font-smoothing: antialiased;\n  -webkit-tap-highlight-color: transparent;\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n  transition-property: outline-color, background-color, border-color, color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  padding-right: 3em;\n  flex: auto;\n  width: 100%;\n}\npn-date-picker .pn-date-picker-input:-webkit-autofill, pn-date-picker .pn-date-picker-input:-webkit-autofill:hover, pn-date-picker .pn-date-picker-input:-webkit-autofill:focus, pn-date-picker .pn-date-picker-input:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 10em #e0f8ff inset;\n  -webkit-text-fill-color: #2d2013;\n}\npn-date-picker .pn-date-picker-input:focus-visible {\n  outline-color: #005d92;\n  background-color: #ffffff;\n  border-color: #005d92;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-input {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-input::placeholder {\n  color: #5e554a;\n  font-weight: normal;\n}\npn-date-picker .pn-date-picker-input:hover {\n  border-color: #005d92;\n}\npn-date-picker .pn-date-picker-input:disabled {\n  color: #5e554a;\n  background-color: #f3f2f2;\n  border-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-input::-webkit-calendar-picker-indicator {\n  visibility: hidden;\n  inline-size: 0;\n}\npn-date-picker .pn-date-picker-input::-webkit-textfield-decoration-container, pn-date-picker .pn-date-picker-input::-webkit-search-cancel-button, pn-date-picker .pn-date-picker-input::-webkit-inner-spin-button, pn-date-picker .pn-date-picker-input::-webkit-outer-spin-button, pn-date-picker .pn-date-picker-input::-webkit-search-decoration {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\npn-date-picker .pn-date-picker-input[data-active] {\n  border-color: #005d92;\n}\npn-date-picker .pn-date-picker-input:read-only {\n  border-color: #ffffff;\n}\npn-date-picker .pn-date-picker-range-icon {\n  width: 1.5em;\n  margin-bottom: 0.8125em;\n  align-self: end;\n}\npn-date-picker .pn-date-picker-helpertext, pn-date-picker .pn-date-picker-error {\n  color: #5e554a;\n  font-size: 0.875em;\n  font-weight: 400;\n  margin: 0.25em 0 0 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25em;\n  text-align: left;\n}\npn-date-picker .pn-date-picker-helpertext[hidden], pn-date-picker .pn-date-picker-error[hidden] {\n  display: none;\n}\npn-date-picker .pn-date-picker-error {\n  color: #a70707;\n}\npn-date-picker .pn-date-picker-toggle {\n  position: absolute;\n  top: 0.5em;\n  right: 0.5em;\n  border-radius: 50%;\n}\npn-date-picker .pn-date-picker-button {\n  cursor: pointer;\n  font-size: 1em;\n  background-color: transparent;\n  border: 0.0625em solid #969087;\n  border-color: transparent;\n  padding: 0.25em;\n  margin: 0;\n  flex: auto;\n  border-radius: 3em;\n  transition-property: outline-color, background-color, border-color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n}\npn-date-picker .pn-date-picker-button:first-child, pn-date-picker .pn-date-picker-button:last-child {\n  flex: 0 0 auto;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-button {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-button:focus {\n  background-color: #ffffff;\n  outline-color: #005d92;\n}\npn-date-picker .pn-date-picker-button:hover {\n  background-color: #e0f8ff;\n}\npn-date-picker .pn-date-picker-button[data-active], pn-date-picker .pn-date-picker-button[data-range] {\n  background-color: #e0f8ff;\n  border-color: #005d92;\n}\npn-date-picker .pn-date-picker-button:disabled {\n  cursor: not-allowed;\n}\npn-date-picker .pn-date-picker-button:disabled:hover {\n  background-color: transparent;\n}\npn-date-picker .pn-date-picker-month {\n  text-transform: capitalize;\n}\npn-date-picker .pn-date-picker-month[data-full] {\n  display: none;\n}\n@media (min-width: 25em) {\n  pn-date-picker .pn-date-picker-month[data-full] {\n    display: inline;\n  }\n}\npn-date-picker .pn-date-picker-month[data-abbr] {\n  display: inline;\n}\n@media (min-width: 25em) {\n  pn-date-picker .pn-date-picker-month[data-abbr] {\n    display: none;\n  }\n}\npn-date-picker .pn-date-picker-sr-only {\n  position: absolute;\n  height: 1px;\n  width: 1px;\n  overflow: hidden;\n  clip: rect(1px, 1px, 1px, 1px);\n  margin: -1px;\n  white-space: nowrap;\n}\npn-date-picker .pn-date-picker-calendar {\n  position: absolute;\n  z-index: 4;\n  top: calc(100% + 0.5em);\n  left: var(--pn-calendar-offset-left);\n  width: clamp(100%, 95vw, 20em);\n  max-width: 20em;\n  text-align: center;\n  border-radius: 0.5em;\n  background-color: #ffffff;\n  overflow: hidden;\n  visibility: hidden;\n  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);\n}\npn-date-picker .pn-date-picker-calendar[data-range] {\n  max-width: unset;\n}\npn-date-picker .pn-date-picker-calendar[data-open], pn-date-picker .pn-date-picker-calendar[data-moving] {\n  visibility: visible;\n}\npn-date-picker .pn-date-picker-calendar[data-direction=top] {\n  top: unset;\n  bottom: calc(100% + 0.5em);\n  transform-origin: bottom left;\n}\npn-date-picker .pn-date-picker-calendar pn-button[hidden] {\n  display: none;\n}\npn-date-picker .pn-date-picker-calendar pn-button span {\n  text-transform: capitalize;\n}\npn-date-picker .pn-date-picker-wrapper {\n  padding: 0.5em;\n}\npn-date-picker .pn-date-picker-title {\n  margin: 0.5em auto 0;\n  font-size: 0.875em;\n  font-weight: 500;\n  color: #2d2013;\n}\npn-date-picker .pn-date-picker-nav {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-bottom: 1em;\n}\npn-date-picker .pn-date-picker-table {\n  width: 100%;\n  table-layout: fixed;\n  border-spacing: 0;\n  border: 0;\n  margin: 0 0 0.5em;\n}\npn-date-picker .pn-date-picker-th {\n  font-size: 0.75em;\n  font-weight: 500;\n  color: #5e554a;\n  padding: 0.25em;\n  border: 0;\n  text-transform: capitalize;\n}\npn-date-picker .pn-date-picker-td {\n  cursor: pointer;\n  position: relative;\n  padding: 0.25em;\n  outline: 0;\n  border: 0;\n  line-height: 0;\n  width: 2em;\n  height: 2em;\n  -webkit-tap-highlight-color: transparent;\n}\npn-date-picker .pn-date-picker-td-text {\n  position: relative;\n  display: block;\n  line-height: 1.5em;\n  border-radius: 0.5em;\n  color: #2d2013;\n  padding: 0.25em;\n  transition-property: color, background-color, outline-color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-td-text {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-td[data-blank] {\n  cursor: auto;\n}\npn-date-picker .pn-date-picker-td[data-blank] .pn-date-picker-td-text {\n  background-color: transparent;\n}\npn-date-picker .pn-date-picker-td-week {\n  font-size: 0.75em;\n  color: #5e554a;\n  display: block;\n}\npn-date-picker .pn-date-picker-td:before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 0.25em;\n  height: calc(100% - 0.5em);\n  width: 100%;\n  background-color: transparent;\n  border: 0.0625em solid transparent;\n  border-radius: 0.5em;\n  transition-property: border-color, background-color, width, transform, left;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-td:before {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true] {\n  cursor: not-allowed;\n  pointer-events: none;\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true] > .pn-date-picker-td-text {\n  color: #5e554a;\n  background-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true]:focus > .pn-date-picker-td-text {\n  outline-color: #a70707;\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true]:hover > .pn-date-picker-td-text, pn-date-picker .pn-date-picker-td[aria-disabled=true]:focus > .pn-date-picker-td-text {\n  background-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true] .pn-date-picker-td-text {\n  font-weight: 500;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true]:before {\n  border-color: #005d92;\n  background-color: #effbff;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-single]:before {\n  width: 2em;\n  left: 50%;\n  transform: translateX(-50%);\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-range]:before {\n  border-radius: 0;\n  border-left-width: 0;\n  border-right-width: 0;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-range-from]:before {\n  border-radius: 0.5em 0 0 0.5em;\n  border-right-width: 0;\n  border-left-width: 0.0625em;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-range-to]:before {\n  border-radius: 0 0.5em 0.5em 0;\n  border-right-width: 0.0625em;\n  border-left-width: 0;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][aria-disabled=true]:before {\n  border-color: #a70707;\n  background-color: #fdefee;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][aria-disabled=true] > .pn-date-picker-td-text {\n  background-color: unset;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][aria-disabled=true]:focus > .pn-date-picker-td-text {\n  background-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-td[aria-selected=false]:hover > .pn-date-picker-td-text {\n  background-color: #e0f8ff;\n}\npn-date-picker .pn-date-picker-td[data-today] > .pn-date-picker-td-text {\n  font-weight: 500;\n}\npn-date-picker .pn-date-picker-td[data-today] > .pn-date-picker-td-text::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0.25em;\n  left: calc(50% - 0.125em);\n  height: 0.25em;\n  width: 0.25em;\n  background-color: #005d92;\n  border-radius: 50%;\n}\npn-date-picker .pn-date-picker-td[data-today] > .pn-date-picker-td-text:after {\n  bottom: 0.15em;\n}\npn-date-picker .pn-date-picker-td[data-active][data-today] > .pn-date-picker-td-text:after {\n  background-color: #005d92;\n}\npn-date-picker .pn-date-picker-td:focus-visible > .pn-date-picker-td-text {\n  outline-color: #005d92;\n}\npn-date-picker .pn-date-picker-list {\n  margin: 0 0 1em;\n  padding: 0;\n  list-style: none;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-gap: 0.5em;\n}\npn-date-picker .pn-date-picker-item > .pn-date-picker-button {\n  display: block;\n  width: 100%;\n  border-radius: 0.5em;\n  padding: 0.5em 0.25em;\n}\npn-date-picker .pn-date-picker-item > .pn-date-picker-button[data-today] {\n  position: relative;\n  font-weight: 500;\n}\npn-date-picker .pn-date-picker-item > .pn-date-picker-button[data-today]::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0.25em;\n  left: calc(50% - 0.125em);\n  height: 0.25em;\n  width: 0.25em;\n  background-color: #005d92;\n  border-radius: 50%;\n}\npn-date-picker .pn-date-picker-chips > [slot=chips] {\n  display: flex;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  gap: 0.5em;\n  margin-bottom: 0.5em;\n}\npn-date-picker .pn-date-picker-chips > [slot=chips]:empty {\n  display: none;\n}\npn-date-picker .pn-date-picker-bottom {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5em;\n}\npn-date-picker .pn-date-picker-bottom[hidden] {\n  display: none;\n}";
+const pnDatePickerCss = "/* Global utility variables */\n/* Input styles */\n/* Transition variables */\npn-date-picker {\n  position: relative;\n  display: block;\n}\n\npn-date-picker .pn-date-picker {\n  width: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25em;\n  container-type: inline-size;\n  /** The calendar dropdown */\n  /* Month list */\n}\n@container (max-width: 24em) {\n  pn-date-picker .pn-date-picker .pn-date-picker-container {\n    flex: 1 1 20em;\n  }\n  pn-date-picker .pn-date-picker .pn-date-picker-range-icon {\n    display: none;\n  }\n}\npn-date-picker .pn-date-picker-container {\n  display: block;\n  flex: 1 1 11em;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-label {\n  color: #a70707;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input {\n  border-color: #a70707;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input:hover {\n  border-color: #500715;\n}\npn-date-picker .pn-date-picker-container[data-error] > .pn-date-picker-field .pn-date-picker-input:focus-visible {\n  background-color: #ffffff;\n  border-color: #a70707;\n  outline-color: #a70707;\n}\npn-date-picker .pn-date-picker-label {\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n  font-weight: 400;\n  color: #2d2013;\n  margin: 0 0 0.25em 0;\n  gap: 0.5em;\n  -webkit-tap-highlight-color: transparent;\n  transition-property: color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-label {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-label > span {\n  font-size: 0.875em;\n}\npn-date-picker .pn-date-picker-field {\n  position: relative;\n  display: flex;\n}\npn-date-picker .pn-date-picker-input {\n  color: #2d2013;\n  background-color: #ffffff;\n  border: 0.0625em solid #969087;\n  border-radius: 0.5em;\n  padding: 0.75em;\n  font-family: inherit;\n  font-size: 1em;\n  font-weight: 500;\n  line-height: 1.5em;\n  -webkit-font-smoothing: antialiased;\n  -webkit-tap-highlight-color: transparent;\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n  transition-property: outline-color, background-color, border-color, color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  padding-right: 3em;\n  flex: auto;\n  width: 100%;\n}\npn-date-picker .pn-date-picker-input:-webkit-autofill, pn-date-picker .pn-date-picker-input:-webkit-autofill:hover, pn-date-picker .pn-date-picker-input:-webkit-autofill:focus, pn-date-picker .pn-date-picker-input:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 10em #e0f8ff inset;\n  -webkit-text-fill-color: #2d2013;\n}\npn-date-picker .pn-date-picker-input:focus-visible {\n  outline-color: #005d92;\n  background-color: #ffffff;\n  border-color: #005d92;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-input {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-input::placeholder {\n  color: #5e554a;\n  font-weight: normal;\n}\npn-date-picker .pn-date-picker-input:hover {\n  border-color: #005d92;\n}\npn-date-picker .pn-date-picker-input:disabled {\n  color: #5e554a;\n  background-color: #f3f2f2;\n  border-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-input::-webkit-calendar-picker-indicator {\n  visibility: hidden;\n  inline-size: 0;\n}\npn-date-picker .pn-date-picker-input::-webkit-textfield-decoration-container, pn-date-picker .pn-date-picker-input::-webkit-search-cancel-button, pn-date-picker .pn-date-picker-input::-webkit-inner-spin-button, pn-date-picker .pn-date-picker-input::-webkit-outer-spin-button, pn-date-picker .pn-date-picker-input::-webkit-search-decoration {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\npn-date-picker .pn-date-picker-input[data-active] {\n  border-color: #005d92;\n}\npn-date-picker .pn-date-picker-input:read-only {\n  border-color: #ffffff;\n}\npn-date-picker .pn-date-picker-range-icon {\n  width: 1.5em;\n  margin-bottom: 0.8125em;\n  align-self: end;\n}\npn-date-picker .pn-date-picker-helpertext, pn-date-picker .pn-date-picker-error {\n  color: #5e554a;\n  font-size: 0.875em;\n  font-weight: 400;\n  margin: 0.25em 0 0 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25em;\n  text-align: left;\n}\npn-date-picker .pn-date-picker-helpertext[hidden], pn-date-picker .pn-date-picker-error[hidden] {\n  display: none;\n}\npn-date-picker .pn-date-picker-error {\n  color: #a70707;\n}\npn-date-picker .pn-date-picker-toggle {\n  position: absolute;\n  top: 0.5em;\n  right: 0.5em;\n  border-radius: 50%;\n}\npn-date-picker .pn-date-picker-button {\n  cursor: pointer;\n  font-size: 1em;\n  background-color: transparent;\n  border: 0.0625em solid #969087;\n  border-color: transparent;\n  padding: 0.25em;\n  margin: 0;\n  flex: auto;\n  border-radius: 3em;\n  transition-property: outline-color, background-color, border-color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n}\npn-date-picker .pn-date-picker-button:first-child, pn-date-picker .pn-date-picker-button:last-child {\n  flex: 0 0 auto;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-button {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-button:focus {\n  background-color: #ffffff;\n  outline-color: #005d92;\n}\npn-date-picker .pn-date-picker-button:hover {\n  background-color: #e0f8ff;\n}\npn-date-picker .pn-date-picker-button[data-active], pn-date-picker .pn-date-picker-button[data-range] {\n  background-color: #e0f8ff;\n  border-color: #005d92;\n}\npn-date-picker .pn-date-picker-button:disabled {\n  cursor: not-allowed;\n}\npn-date-picker .pn-date-picker-button:disabled:hover {\n  background-color: transparent;\n}\npn-date-picker .pn-date-picker-month {\n  text-transform: capitalize;\n}\npn-date-picker .pn-date-picker-month[data-full] {\n  display: none;\n}\n@media (min-width: 25em) {\n  pn-date-picker .pn-date-picker-month[data-full] {\n    display: inline;\n  }\n}\npn-date-picker .pn-date-picker-month[data-abbr] {\n  display: inline;\n}\n@media (min-width: 25em) {\n  pn-date-picker .pn-date-picker-month[data-abbr] {\n    display: none;\n  }\n}\npn-date-picker .pn-date-picker-sr-only {\n  position: absolute;\n  height: 1px;\n  width: 1px;\n  overflow: hidden;\n  clip: rect(1px, 1px, 1px, 1px);\n  margin: -1px;\n  white-space: nowrap;\n}\npn-date-picker .pn-date-picker-calendar {\n  position: absolute;\n  z-index: 4;\n  top: calc(100% + 0.5em);\n  left: var(--pn-calendar-offset-left);\n  width: clamp(100%, 95vw, 20em);\n  max-width: 20em;\n  text-align: center;\n  border-radius: 0.5em;\n  background-color: #ffffff;\n  overflow: hidden;\n  visibility: hidden;\n  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);\n}\npn-date-picker .pn-date-picker-calendar[data-range] {\n  width: 100%;\n  max-width: unset;\n}\npn-date-picker .pn-date-picker-calendar[data-open], pn-date-picker .pn-date-picker-calendar[data-moving] {\n  visibility: visible;\n}\npn-date-picker .pn-date-picker-calendar[data-direction=top] {\n  top: unset;\n  bottom: calc(100% + 0.5em);\n  transform-origin: bottom left;\n}\npn-date-picker .pn-date-picker-calendar pn-button[hidden] {\n  display: none;\n}\npn-date-picker .pn-date-picker-calendar pn-button span {\n  text-transform: capitalize;\n}\npn-date-picker .pn-date-picker-wrapper {\n  padding: 0.5em;\n}\npn-date-picker .pn-date-picker-title {\n  margin: 0.5em auto 0;\n  font-size: 0.875em;\n  font-weight: 500;\n  color: #2d2013;\n}\npn-date-picker .pn-date-picker-nav {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-bottom: 1em;\n}\npn-date-picker .pn-date-picker-table {\n  width: 100%;\n  table-layout: fixed;\n  border-spacing: 0;\n  border: 0;\n  margin: 0 0 0.5em;\n}\npn-date-picker .pn-date-picker-th {\n  font-size: 0.75em;\n  font-weight: 500;\n  color: #5e554a;\n  padding: 0.25em;\n  border: 0;\n  text-transform: capitalize;\n}\npn-date-picker .pn-date-picker-td {\n  cursor: pointer;\n  position: relative;\n  padding: 0.25em;\n  outline: 0;\n  border: 0;\n  line-height: 0;\n  width: 2em;\n  height: 2em;\n  -webkit-tap-highlight-color: transparent;\n}\npn-date-picker .pn-date-picker-td-text {\n  position: relative;\n  display: block;\n  line-height: 1.5em;\n  border-radius: 0.5em;\n  color: #2d2013;\n  padding: 0.25em;\n  transition-property: color, background-color, outline-color;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-td-text {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-td[data-blank] {\n  cursor: auto;\n}\npn-date-picker .pn-date-picker-td[data-blank] .pn-date-picker-td-text {\n  background-color: transparent;\n}\npn-date-picker .pn-date-picker-td-week {\n  font-size: 0.75em;\n  color: #5e554a;\n  display: block;\n}\npn-date-picker .pn-date-picker-td:before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 0.25em;\n  height: calc(100% - 0.5em);\n  width: 100%;\n  background-color: transparent;\n  border: 0.0625em solid transparent;\n  border-radius: 0.5em;\n  transition-property: border-color, background-color, width, transform, left;\n  transition-duration: 0.2s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-date-picker .pn-date-picker-td:before {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true] {\n  cursor: not-allowed;\n  pointer-events: none;\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true] > .pn-date-picker-td-text {\n  color: #5e554a;\n  background-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true]:focus > .pn-date-picker-td-text {\n  outline-color: #a70707;\n}\npn-date-picker .pn-date-picker-td[aria-disabled=true]:hover > .pn-date-picker-td-text, pn-date-picker .pn-date-picker-td[aria-disabled=true]:focus > .pn-date-picker-td-text {\n  background-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true] .pn-date-picker-td-text {\n  font-weight: 500;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true]:before {\n  border-color: #005d92;\n  background-color: #effbff;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-single]:before {\n  width: 2em;\n  left: 50%;\n  transform: translateX(-50%);\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-range]:before {\n  border-radius: 0;\n  border-left: 0;\n  border-right: 0;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-range-from]:before {\n  border-radius: 0.5em 0 0 0.5em;\n  border-right-width: 0;\n  border-left-width: 0.0625em;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][data-range-to]:before {\n  border-radius: 0 0.5em 0.5em 0;\n  border-right-width: 0.0625em;\n  border-left-width: 0;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][aria-disabled=true]:before {\n  border-color: #a70707;\n  background-color: #fdefee;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][aria-disabled=true] > .pn-date-picker-td-text {\n  background-color: unset;\n}\npn-date-picker .pn-date-picker-td[aria-selected=true][aria-disabled=true]:focus > .pn-date-picker-td-text {\n  background-color: #f3f2f2;\n}\npn-date-picker .pn-date-picker-td[aria-selected=false]:hover > .pn-date-picker-td-text {\n  background-color: #e0f8ff;\n}\npn-date-picker .pn-date-picker-td[data-today] > .pn-date-picker-td-text {\n  font-weight: 500;\n}\npn-date-picker .pn-date-picker-td[data-today] > .pn-date-picker-td-text::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0.25em;\n  left: calc(50% - 0.125em);\n  height: 0.25em;\n  width: 0.25em;\n  background-color: #005d92;\n  border-radius: 50%;\n}\npn-date-picker .pn-date-picker-td[data-today] > .pn-date-picker-td-text:after {\n  bottom: 0.15em;\n}\npn-date-picker .pn-date-picker-td[data-active][data-today] > .pn-date-picker-td-text:after {\n  background-color: #005d92;\n}\npn-date-picker .pn-date-picker-td:focus-visible > .pn-date-picker-td-text {\n  outline-color: #005d92;\n}\npn-date-picker .pn-date-picker-list {\n  margin: 0 0 1em;\n  padding: 0;\n  list-style: none;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-gap: 0.5em;\n}\npn-date-picker .pn-date-picker-item > .pn-date-picker-button {\n  display: block;\n  width: 100%;\n  border-radius: 0.5em;\n  padding: 0.5em 0.25em;\n}\npn-date-picker .pn-date-picker-item > .pn-date-picker-button[data-today] {\n  position: relative;\n  font-weight: 500;\n}\npn-date-picker .pn-date-picker-item > .pn-date-picker-button[data-today]::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0.25em;\n  left: calc(50% - 0.125em);\n  height: 0.25em;\n  width: 0.25em;\n  background-color: #005d92;\n  border-radius: 50%;\n}\npn-date-picker .pn-date-picker-chips > [slot=chips] {\n  display: flex;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  gap: 0.5em;\n  margin-bottom: 0.5em;\n}\npn-date-picker .pn-date-picker-chips > [slot=chips]:empty {\n  display: none;\n}\npn-date-picker .pn-date-picker-bottom {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5em;\n}\npn-date-picker .pn-date-picker-bottom[hidden] {\n  display: none;\n}";
 const PnDatePickerStyle0 = pnDatePickerCss;
 const PnDatePicker = class {
@@ -553,27 +553,11 @@ const PnDatePicker = class {
             const fitDownwards = spaceDownwards > scrollHeight;
             const openTop = (this.openUp && (fitUpwards || spaceUpwards > spaceDownwards)) || (!fitDownwards && fitUpwards);
             this.openUp = openTop;
-            // Calc horizontal positioning - center calendar relative to host element
+            // Calc y-axis
             const rectCal = this.getRect(this.calendarElement);
-            const menuWidth = helpers.getMenuWidth();
-            // Calculate center position: host center minus half of calendar width
-            const hostCenterX = rectHost.x + rectHost.width / 2;
-            const calendarHalfWidth = rectCal.width / 2;
-            const idealCenterOffset = hostCenterX - calendarHalfWidth - rectCal.x;
-            // Check boundaries, accounting for menu width on the left
-            const calendarLeftEdge = rectCal.x + idealCenterOffset;
-            const calendarRightEdge = calendarLeftEdge + rectCal.width;
-            const leftBoundary = menuWidth + 16; // Menu width + buffer
-            let finalOffset = idealCenterOffset;
-            // Adjust if calendar would go beyond left edge of viewport or over the menu
-            if (calendarLeftEdge < leftBoundary) {
-                finalOffset = leftBoundary - rectCal.x;
-            }
-            // Adjust if calendar would go beyond right edge of viewport
-            else if (calendarRightEdge > innerWidth - 16) {
-                finalOffset = innerWidth - 16 - rectCal.width - rectCal.x;
-            }
-            this.calendarElement.style.setProperty('--pn-calendar-offset-left', `${Math.floor(finalOffset)}px`);
+            const widthMinusRight = innerWidth - rectCal.right;
+            const offset = 0 > widthMinusRight ? widthMinusRight - 8 : 0;
+            this.calendarElement.style.setProperty('--pn-calendar-offset-left', `${Math.floor(offset)}px`);
         });
     }
     handleMessage() {
@@ -1066,7 +1050,7 @@ const PnDatePicker = class {
         return (index.h("div", { class: "pn-date-picker-container", "data-error": this.hasError() }, index.h("label", { class: "pn-date-picker-label", htmlFor: id }, index.h("span", null, label)), index.h("div", { class: "pn-date-picker-field" }, index.h("input", { type: "text", id: id, class: "pn-date-picker-input", name: this.name, placeholder: placeholder, autocomplete: this.autocomplete, maxlength: this.disableMaxLength ? null : this.format.length, list: list, pattern: this.pattern, value: value, disabled: this.disabled, required: this.required, readonly: this.readonly, "aria-describedby": this.ariaDescribedby(), "aria-invalid": this.hasError()?.toString(), onInput: e => this.inputHandler(e, to), "data-active": editing }), showButton && (index.h("pn-button", { class: "pn-date-picker-toggle", buttonId: idButton, icon: calendar, iconOnly: true, appearance: "light", arialabel: textButton, ariaexpanded: this.open.toString(), ariacontrols: this.idCalendar, "data-active": this.open, "data-input": true, small: true, onPnClick: () => this.toggleGrid(null, to), onKeyDown: e => this.handleButtonBlur(e) })))));
     }
     render() {
-        return (index.h(index.Host, { key: '683125ae4363ce235cc3aec68a1d4003593425d1' }, index.h("div", { key: 'cf4cf8baae7d387533013fe59722bb4401431dbd', class: "pn-date-picker" }, this.renderInput(), this.range && (index.h("div", { key: 'fae36c22bd631fde3313c2240cd33e6f871ff405', class: "pn-date-picker-range-icon test" }, index.h("pn-icon", { key: 'd0f18d8a7ff81248471b27975eb24242fc8b5157', icon: arrow_right.arrow_right }))), this.range && this.renderInput({ to: this.range })), index.h("div", { key: '6f4f250edc36dd15d4a5a330bf5d8c5125289a09', id: this.idCalendar, class: "pn-date-picker-calendar", role: "dialog", "aria-label": this.translate('CALENDAR_NAVIGATION'), "data-open": this.open, "data-moving": this.isClosing || this.isExpanding, "data-direction": this.openUp ? 'top' : 'bottom', "data-range": this.range, style: { height: '0px' }, ref: el => (this.calendarElement = el), onKeyDown: e => this.handleCalendarTabEsc(e) }, index.h("div", { key: 'a8821cca04a6301bd148c3dbfee28bf86c94e543', class: "pn-date-picker-wrapper" }, index.h("nav", { key: '38f404ea6187d754ac44160bcda2291e0739610d', class: "pn-date-picker-nav", "aria-labelledby": this.idCalendar }, index.h("pn-button", { key: '923845f5df9f35ff74ffeb2ed63c903696a4399d', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`PREVIOUS_${this.viewType().toUpperCase()}`), icon: arrow_left.arrow_left, iconOnly: true, onPnClick: () => this.setNavView({ minus: true }) }), index.h("pn-button", { key: '32e6f337bc1b82adcf11b2668974c0c4b9f2c730', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(MONTHS) }, index.h("span", { key: 'e1bcc4e89726d5c25e94d87b283b543987674f2d', class: "pn-date-picker-month", "data-full": true }, this.translateDateText({ date: 1 }, 'MMMM')), index.h("span", { key: 'b93becc6c92ef4693f158e08276aa21e496d10c3', class: "pn-date-picker-month", "data-abbr": true }, this.translateDateText({ date: 1 }, 'MMM'))), index.h("h2", { key: '1aa3fc4c553858c947205610a4958fc153f63527', hidden: this.viewingCalendar(), class: "pn-date-picker-title" }, this.translate(`SELECT_${this.viewType().toUpperCase()}`)), index.h("pn-button", { key: '16fdeb8efb9744d9fb5db3b41eea172ad9b49c32', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(YEARS) }, index.h("span", { key: '491246d413dd42fe794d155720f847d9339bf81f' }, this.dateViewYear)), index.h("pn-button", { key: '8a2acfd530f049d13972125dd6e6fc8120020b18', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`NEXT_${this.viewType().toUpperCase()}`), icon: arrow_right.arrow_right, iconOnly: true, onPnClick: () => this.setNavView({ plus: true }) })), this.viewingYears() && this.renderYearGrid(), this.viewingMonth() && this.renderMonthGrid(), this.viewingCalendar() && this.renderDateGrid(), index.h("aside", { key: '7905780579fdbea9ff9bc03c05208c6714a1b690', class: "pn-date-picker-chips" }, index.h("slot", { key: '3aacde33dde852b97b75327c378248395bf74b03', name: "chips" })), index.h("nav", { key: '37bf1f4447f480986bf905375149d40d42318374', class: "pn-date-picker-bottom", hidden: this.viewingCalendar() }, index.h("pn-button", { key: '0ba2954cf4f994e5befcf0546e45333b1a0030c2', appearance: "light", variant: "outlined", small: true, icon: pn_return, onPnClick: () => this.setView(CALENDAR) }, index.h("span", { key: 'f6af5dbb4dff963d6b07147f1573f22797abd4e4' }, this.translate('GO_CALENDAR')))))), index.h("p", { key: '4ceaeea86eeeb3e6cafa2b09343ee1b3ff7fada8', id: this.idHelper, class: "pn-date-picker-helpertext", hidden: !this.hasHelperText() || this.hasError() }, index.h("span", { key: 'b40445ded778af04b0313e84645226fe59e0bc9a' }, this.helpertext), index.h("slot", { key: '0cf4aee251e8aaf33618c9f318451069b6bfe22f', name: "helpertext" })), index.h("p", { key: 'dbcc74e7fdea8f7b1053226448cbc419ebaf9498', id: this.idError, class: "pn-date-picker-error", role: "alert", hidden: !this.hasErrorMessage() }, index.h("span", { key: '9cc3055b8389abadd3f7d2303cc755b71cc238b3' }, this.error), index.h("slot", { key: '4c1eef7f48dba08b33f05b836f55abcc39b5abe3', name: "error" }))));
+        return (index.h(index.Host, { key: '6122e6224b4aa8570a714522dc323088074f5185' }, index.h("div", { key: 'd7d3c86378c680d3ddd14d9f3cb073f4bb42e2cf', class: "pn-date-picker" }, this.renderInput(), this.range && (index.h("div", { key: '3f02b31a0e03aef31b84777d6047d1b328ff633d', class: "pn-date-picker-range-icon test" }, index.h("pn-icon", { key: 'ad328bd870726dea04b2496d2059a67de218ceac', icon: arrow_right.arrow_right }))), this.range && this.renderInput({ to: this.range })), index.h("div", { key: '71c8518c6500591a4c0d7dc72681d9bcad264641', id: this.idCalendar, class: "pn-date-picker-calendar", role: "dialog", "aria-label": this.translate('CALENDAR_NAVIGATION'), "data-open": this.open, "data-moving": this.isClosing || this.isExpanding, "data-direction": this.openUp ? 'top' : 'bottom', "data-range": this.range, style: { height: '0px' }, ref: el => (this.calendarElement = el), onKeyDown: e => this.handleCalendarTabEsc(e) }, index.h("div", { key: '277f45e3372d096521889fa4bca4c1971346f0d3', class: "pn-date-picker-wrapper" }, index.h("nav", { key: '06336288e1d9a65ba4aa796328b09003cb79271d', class: "pn-date-picker-nav", "aria-labelledby": this.idCalendar }, index.h("pn-button", { key: '6361907855287330a3e9c537ce02bd948baccaa4', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`PREVIOUS_${this.viewType().toUpperCase()}`), icon: arrow_left.arrow_left, iconOnly: true, onPnClick: () => this.setNavView({ minus: true }) }), index.h("pn-button", { key: '21ae6b846df3bd12b314cb6b40f6d60dc8a0cc02', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(MONTHS) }, index.h("span", { key: '9f555bfea7f07abb32d8e96e6d84b547b4946899', class: "pn-date-picker-month", "data-full": true }, this.translateDateText({ date: 1 }, 'MMMM')), index.h("span", { key: '0a434038cb6ceb7fb52e89161408da00c8f3e0e3', class: "pn-date-picker-month", "data-abbr": true }, this.translateDateText({ date: 1 }, 'MMM'))), index.h("h2", { key: 'c63bfdcb83caf9fe9aec34416060d4ffe6ae6b08', hidden: this.viewingCalendar(), class: "pn-date-picker-title" }, this.translate(`SELECT_${this.viewType().toUpperCase()}`)), index.h("pn-button", { key: '502e44a09ca6194365542c1223e3e994e2fbe9d0', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(YEARS) }, index.h("span", { key: 'e0e9bbe7234ae0ce544fc3b89c94c798f3a60123' }, this.dateViewYear)), index.h("pn-button", { key: 'f93f7301ab9b61cd386dcdb19df482a7b1f4a15d', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`NEXT_${this.viewType().toUpperCase()}`), icon: arrow_right.arrow_right, iconOnly: true, onPnClick: () => this.setNavView({ plus: true }) })), this.viewingYears() && this.renderYearGrid(), this.viewingMonth() && this.renderMonthGrid(), this.viewingCalendar() && this.renderDateGrid(), index.h("aside", { key: '3473b9b53b3d0007828a367f05dcbb6fb3959e7e', class: "pn-date-picker-chips" }, index.h("slot", { key: '94e47d8d7feb1caa5db4fd24d97500258e1c4f98', name: "chips" })), index.h("nav", { key: '2245cab78f67e9ecf3932bda19075b13cfa27d61', class: "pn-date-picker-bottom", hidden: this.viewingCalendar() }, index.h("pn-button", { key: 'e8163e75c8197331f7ab77ed6a2fb94fde445131', appearance: "light", variant: "outlined", small: true, icon: pn_return, onPnClick: () => this.setView(CALENDAR) }, index.h("span", { key: '3a9028867b88cb831ef4cfc35039a10299c8fdeb' }, this.translate('GO_CALENDAR')))))), index.h("p", { key: 'dd4412fdfff7ef9c1c254a09c38831908c10c010', id: this.idHelper, class: "pn-date-picker-helpertext", hidden: !this.hasHelperText() || this.hasError() }, index.h("span", { key: 'd61ee102ecb131c481e220c073fe268b9228ebbb' }, this.helpertext), index.h("slot", { key: '3d54b17455d0e7a2a72564856978eee3e3f8ef45', name: "helpertext" })), index.h("p", { key: 'f42fd4bdff5c0ad22c3de99725bf1dbedd5788c8', id: this.idError, class: "pn-date-picker-error", role: "alert", hidden: !this.hasErrorMessage() }, index.h("span", { key: '69d7fd68b1157960d095ace9a423a1a3a08702fc' }, this.error), index.h("slot", { key: 'd2676dccff19ee3a22fe62b077f44c509500f267', name: "error" }))));
     }
     static get watchers() { return {
         "minDate": ["watchMin"],