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/collection/components/navigation/pn-page-nav/menu/pn-page-nav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pn-page-nav.js","sourceRoot":"","sources":["../../../../../src/components/navigation/pn-page-nav/menu/pn-page-nav.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Prop,\n h,\n Host,\n Listen,\n State,\n Watch,\n forceUpdate,\n EventEmitter,\n Event,\n} from '@stencil/core';\nimport { uuidv4 } from '@/globals/helpers';\nimport { chevron_down, arrow_left, arrow_right } from 'pn-design-assets/pn-assets/icons.js';\n\n/*\n @deprecated This component will be removed in v8. Please use the `pn-tablist` instead.\n * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-navigation-tablist--docs} Use `pn-tablist` instead.\n \n @slot dropdown-item - Place your `pn-page-nav-dropdown-item` components here.\n /\n@Component({\n tag: 'pn-page-nav',\n styleUrl: 'pn-page-nav.scss',\n})\nexport class PnPageNav {\n mo: MutationObserver;\n\n navContainer: HTMLUListElement;\n navWrapper: HTMLElement;\n navItems: HTMLPnPageNavItemElement[] = [];\n\n dropdownButton: HTMLElement;\n dropdownEl: HTMLElement;\n dropdownItems: HTMLPnPageNavItemElement[];\n dropdownEls: HTMLPnPageNavDropdownItemElement[];\n\n eventHandler = this.keyboardEvents.bind(this);\n globalEventHandler = this.globalEvents.bind(this);\n\n activeBg: HTMLDivElement;\n hoverBg: HTMLDivElement;\n\n scrollRegistered: boolean = false;\n\n @Element() hostElement: HTMLElement;\n\n @State() currentSelection: HTMLElement;\n @State() showScrollArrows: boolean = false;\n @State() showLeftArrow: boolean = false;\n @State() showRightArrow: boolean = false;\n @State() dropdownOpen: boolean = false;\n @State() dropdownLinks: Array<string> = [];\n @State() dropdownActive: boolean = false;\n\n /* Currently active menu item value /\n @Prop({ mutable: true }) value: string;\n /* Pass a string which will be the text on the dropdown button. /\n @Prop() dropdown: string \| boolean = false;\n /* Set a unique HTML ID. /\n @Prop() navid: string = `pn-page-nav-${uuidv4()}`;\n\n /* Emits the value of the selected item. /\n @Event() navchange: EventEmitter<string>;\n\n @Listen('itemselection')\n changeHandler({ target }) {\n this.currentSelection = target.closest('pn-page-nav-item');\n if (target.value) this.value = target.value;\n\n if (this.dropdownOpen) this.dropdownOpen = false;\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n this.rerender();\n }\n\n @Watch('value')\n valueHandler() {\n if (!this.value) this.currentSelection = null;\n this.calcHighlight(this.currentSelection, this.activeBg);\n\n this.navchange.emit(this.value);\n\n if (!this.dropdownActive) return;\n this.isDropdownItemActive();\n }\n\n @Watch('dropdownOpen')\n dropdownHandler() {\n if (this.dropdownOpen) {\n requestAnimationFrame(() => {\n this.addGlobalEventListeners();\n });\n\n return;\n }\n\n this.removeGlobalEventListeners();\n }\n\n / ---------------------------------------LIFECYCLE--------------------------------------- /\n componentWillLoad() {\n if (!this.dropdown) return;\n this.dropdownEls = Array.from(this.hostElement.querySelectorAll('pn-page-nav-dropdown-item'));\n if (this.dropdownEls.length) {\n this.dropdownActive = true;\n this.initiateDropdown();\n }\n }\n\n componentDidLoad() {\n if (this.mo) this.mo.disconnect();\n this.mo = new MutationObserver(() => {\n forceUpdate(this.hostElement);\n this.setActiveNavItem();\n this.rerender();\n });\n this.mo.observe(this.hostElement, { childList: true, subtree: true });\n\n this.navWrapper = this.hostElement.querySelector('.pn-page-nav');\n this.navContainer = this.hostElement.querySelector('.pn-page-nav-items');\n this.activeBg = this.hostElement.querySelector('.pn-pn-active');\n this.hoverBg = this.hostElement.querySelector('.pn-pn-hover');\n\n this.hostElement.addEventListener('mouseover', ({ target }) =>\n this.calcHighlight(target as HTMLElement, this.hoverBg),\n );\n\n this.setActiveNavItem();\n this.rerender();\n }\n / ---------------------------------------/LIFECYCLE--------------------------------------- /\n\n setActiveNavItem() {\n this.navItems = Array.from(this.hostElement.querySelectorAll('pn-page-nav-item'));\n this.navItems.forEach(navItemEl => {\n if (this.value === navItemEl.value) {\n this.currentSelection = navItemEl;\n } else {\n navItemEl.removeAttribute('selected');\n }\n\n navItemEl\n .querySelector('a')\n .addEventListener('focus', ({ target }) => this.calcHighlight(target as HTMLElement, this.hoverBg));\n });\n\n / -----------------dropdown------------------ /\n if (!this.dropdownActive) return;\n this.dropdownItems = Array.from(this.hostElement.querySelectorAll('.pn-page-nav-dropdown-item'));\n\n //Check active state on each item\n this.isDropdownItemActive();\n\n //Store all values to check if dropdown button should be active\n this.dropdownLinks = this.dropdownItems.map((el, i) => {\n el.setAttribute('data-index', `${i}`);\n return (el.closest('pn-page-nav-dropdown-item') as any).value;\n });\n / -----------------/dropdown------------------ /\n }\n\n rerender() {\n requestAnimationFrame(() => {\n this.calcHighlight(this.currentSelection, this.activeBg);\n this.scrollArrowRender();\n });\n }\n\n /---------------------------------------HIGHLIGHT LOGIC-------------------------------------------/\n calcHighlight(el: HTMLElement, bgEl: HTMLElement) {\n if (!el?.closest('pn-page-nav-item')) {\n bgEl?.classList.add('hidden');\n return;\n }\n\n if (bgEl) bgEl.classList.remove('hidden');\n\n const elRect = el.closest('pn-page-nav-item').getBoundingClientRect();\n const { left: hostLeft } = this.navContainer.getBoundingClientRect();\n const { left: navLeft, height: navHeight, width: navWidth } = elRect;\n\n const offset = navLeft - hostLeft + this.navContainer.scrollLeft;\n\n bgEl.style.setProperty('transform', `translate(${offset}px, -50%`);\n bgEl.style.setProperty('width', `${navWidth}px`);\n bgEl.style.setProperty('height', `${navHeight}px`);\n }\n /---------------------------------------/HIGHLIGHT LOGIC-------------------------------------------/\n\n /---------------------------------------SCROLL ARROW LOGIC-------------------------------------------/\n scrollArrowRender() {\n if (!this.navWrapper) return;\n if (this.navWrapper.scrollWidth > this.navWrapper.clientWidth) {\n this.showScrollArrows = true;\n\n if (!this.scrollRegistered) {\n this.navWrapper.addEventListener('scroll', this.scrollArrowRender.bind(this));\n this.scrollRegistered = true;\n }\n\n const amountScrolled = Math.round(this.navWrapper.scrollWidth - this.navWrapper.scrollLeft);\n const distanceToEnd = amountScrolled - this.navWrapper.clientWidth;\n const distanceToStart = this.navWrapper.scrollLeft;\n\n this.showLeftArrow = distanceToStart > 0;\n this.showRightArrow = distanceToEnd > 0;\n\n return;\n }\n\n this.showLeftArrow = false;\n this.showRightArrow = false;\n this.showScrollArrows = false;\n }\n\n scroll(val: number) {\n let amount = this.navWrapper.scrollLeft + val;\n\n this.navWrapper.scroll({\n left: amount,\n behavior: 'smooth',\n });\n }\n\n scrollArrowClasses() {\n let classNames = 'pn-pn-arrows ';\n\n if (this.showLeftArrow) classNames += 'pn-pn-left-visible ';\n if (this.showRightArrow) classNames += 'pn-pn-right-visible ';\n\n return classNames;\n }\n /---------------------------------------/SCROLL ARROW LOGIC-------------------------------------------/\n\n / ---------------------------------------DROPDOWN LOGIC--------------------------------------- /\n\n initiateDropdown() {\n requestAnimationFrame(() => {\n this.dropdownButton = this.hostElement.querySelector('.pn-page-nav-dropdown-button');\n this.dropdownEl = this.hostElement.querySelector('.pn-page-nav-dropdown');\n\n this.addDropdownEventListeners();\n });\n }\n\n toggleDropdown() {\n this.dropdownOpen = !this.dropdownOpen;\n }\n\n isDropdownItemActive() {\n this.dropdownEls.forEach(el => {\n if (el.value && this.value === el.value) {\n el.setAttribute('active', 'true');\n return;\n }\n\n el.removeAttribute('active');\n });\n }\n\n / -----------------events------------------ /\n / -----------------temporary events------------------ /\n addDropdownEventListeners() {\n this.hostElement.addEventListener('keydown', this.eventHandler);\n this.hostElement.addEventListener('click', this.eventHandler);\n }\n\n addGlobalEventListeners() {\n const root: Document = this.hostElement.getRootNode() as Document;\n\n root.addEventListener('focusin', this.globalEventHandler);\n root.addEventListener('keydown', this.globalEventHandler);\n root.addEventListener('click', this.globalEventHandler);\n }\n\n removeGlobalEventListeners() {\n const root: Document = this.hostElement.getRootNode() as Document;\n\n root.removeEventListener('focusin', this.globalEventHandler);\n root.removeEventListener('keydown', this.globalEventHandler);\n root.removeEventListener('click', this.globalEventHandler);\n }\n / -----------------/temporary events------------------ /\n\n / -----------------Open dropdown with keyboard------------------ /\n keyboardEvents(e: KeyboardEvent) {\n const target: Element = e.composedPath()[0] as Element;\n\n // As long as the dropdown is closed, we only want it to react to keyboard input\n // is the user has focus on the button\n if (e.type === 'keydown') {\n if (!this.dropdownOpen && target === this.dropdownButton && ['ArrowUp', 'ArrowDown'].includes(e.code)) {\n this.dropdownOpen = true;\n\n requestAnimationFrame(() => {\n this.focusNextDropdownItem();\n });\n }\n }\n }\n / -----------------/Open dropdown with keyboard------------------ /\n\n globalEvents(e) {\n const target: Element = e.composedPath()[0] as Element;\n\n if (e.type === 'keydown' && e.code === 'Escape') {\n this.dropdownOpen = false;\n this.dropdownButton.focus();\n }\n\n if (e.code === 'ArrowDown') this.focusNextDropdownItem();\n if (e.code === 'ArrowUp') this.focusPrevDropdownItem();\n\n if ((e.type === 'click' \|\| e.type === 'focusin') && !this.dropdownEl.contains(target)) {\n this.dropdownOpen = false;\n }\n }\n / -----------------/events------------------ /\n\n / -----------------focusing------------------ /\n focusNextDropdownItem() {\n const { activeElement }: Document = this.hostElement.getRootNode() as Document;\n\n if (!activeElement.classList.contains('pn-page-nav-dropdown-item')) {\n this.dropdownItems[0].focus();\n return;\n }\n\n // focus next item\n const index = parseInt(activeElement.getAttribute('data-index'));\n\n if (index < this.dropdownItems.length - 1) {\n this.dropdownItems[index + 1].focus();\n }\n }\n\n focusPrevDropdownItem() {\n const { activeElement }: Document = this.hostElement.getRootNode() as Document;\n\n if (!activeElement.classList.contains('dropdown-item')) {\n this.dropdownItems[this.dropdownItems.length - 1].focus();\n }\n\n // focus previous item\n const index = parseInt(activeElement.getAttribute('data-index'));\n\n if (index > 0) {\n this.dropdownItems[index - 1].focus();\n return;\n }\n\n this.dropdownButton.focus();\n }\n / -----------------/focusing------------------ /\n\n dropdownButtonClasses() {\n let classList = 'pn-page-nav-dropdown-button ';\n if (this.dropdownLinks.includes(this.value)) classList += 'pn-page-nav-dropdown-active ';\n\n return classList;\n }\n\n dropdownClasses() {\n let classList = 'pn-page-nav-dropdown ';\n\n if (this.dropdownOpen) classList += 'pn-page-nav-dropdown-open ';\n\n return classList;\n }\n / ---------------------------------------/DROPDOWN LOGIC--------------------------------------- */\n\n render() {\n return (\n <Host>\n <div class=\"pn-page-nav-wrapper\">\n <nav class=\"pn-page-nav\">\n {this.dropdownActive && (\n <button\n type=\"button\"\n class={this.dropdownButtonClasses()}\n onClick={() => this.toggleDropdown()}\n aria-controls=\"page-nav-dropdown\"\n aria-expanded={`${this.dropdownOpen}`}\n >\n {this.dropdown}\n <pn-icon icon={chevron_down} color=\"white\" small></pn-icon>\n <div class=\"pn-page-nav-divider\"></div>\n </button>\n )}\n\n <ul class=\"pn-page-nav-items\">\n <slot />\n <li class=\"pn-pn-bg pn-pn-active\" role=\"presentation\"></li>\n <li class=\"pn-pn-bg pn-pn-hover\" role=\"presentation\"></li>\n </ul>\n </nav>\n\n {this.showScrollArrows && (\n <div class={this.scrollArrowClasses()}>\n <button class=\"pn-pn-arrow-left\" onClick={() => this.scroll(-120)} tabindex=\"-1\">\n <pn-icon icon={arrow_left} color=\"white\"></pn-icon>\n </button>\n\n <button class=\"pn-pn-arrow-right\" onClick={() => this.scroll(120)} tabindex=\"-1\">\n <pn-icon icon={arrow_right} color=\"blue700\"></pn-icon>\n </button>\n </div>\n )}\n </div>\n\n {this.dropdownActive && (\n <ul id={this.navid} class={this.dropdownClasses()}>\n <slot name=\"dropdown-item\" />\n </ul>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pn-page-nav.js","sourceRoot":"","sources":["../../../../../src/components/navigation/pn-page-nav/menu/pn-page-nav.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,MAAM,EACN,KAAK,EACL,KAAK,EACL,WAAW,EAEX,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAE1F;;;;;GAKG;AAKH,MAAM,OAAO,SAAS;;;gCAuBiB,KAAK;6BACR,KAAK;8BACJ,KAAK;4BACP,KAAK;6BACE,EAAE;8BACP,KAAK;;wBAKH,KAAK;qBAElB,eAAe,MAAM,EAAE,EAAE;;IAlCjD,EAAE,CAAmB;IAErB,YAAY,CAAmB;IAC/B,UAAU,CAAc;IACxB,QAAQ,GAA+B,EAAE,CAAC;IAE1C,cAAc,CAAc;IAC5B,UAAU,CAAc;IACxB,aAAa,CAA6B;IAC1C,WAAW,CAAqC;IAEhD,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9C,kBAAkB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAElD,QAAQ,CAAiB;IACzB,OAAO,CAAiB;IAExB,gBAAgB,GAAY,KAAK,CAAC;IAEvB,WAAW,CAAc;IAiBpC,4CAA4C;IACnC,SAAS,CAAuB;IAGzC,aAAa,CAAC,EAAE,MAAM,EAAE;QACtB,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;QAC3D,IAAI,MAAM,CAAC,KAAK;YAAE,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAE5C,IAAI,IAAI,CAAC,YAAY;YAAE,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IACnD,CAAC;IAGD,YAAY;QACV,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAGD,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC9C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAEzD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEhC,IAAI,CAAC,IAAI,CAAC,cAAc;YAAE,OAAO;QACjC,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAGD,eAAe;QACb,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,CAAC,uBAAuB,EAAE,CAAC;YACjC,CAAC,CAAC,CAAC;YAEH,OAAO;QACT,CAAC;QAED,IAAI,CAAC,0BAA0B,EAAE,CAAC;IACpC,CAAC;IAED,6FAA6F;IAC7F,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC3B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,2BAA2B,CAAC,CAAC,CAAC;QAC9F,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;YAC5B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC3B,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,EAAE;YAAE,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;QAClC,IAAI,CAAC,EAAE,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YAClC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAC9B,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAEtE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QACjE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QACzE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAChE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAE9D,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAC5D,IAAI,CAAC,aAAa,CAAC,MAAqB,EAAE,IAAI,CAAC,OAAO,CAAC,CACxD,CAAC;QAEF,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IACD,8FAA8F;IAE9F,gBAAgB;QACd,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;QAClF,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;YAChC,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,KAAK,EAAE,CAAC;gBACnC,IAAI,CAAC,gBAAgB,GAAG,SAAS,CAAC;YACpC,CAAC;iBAAM,CAAC;gBACN,SAAS,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;YACxC,CAAC;YAED,SAAS;iBACN,aAAa,CAAC,GAAG,CAAC;iBAClB,gBAAgB,CAAC,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAqB,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;QACxG,CAAC,CAAC,CAAC;QAEH,iDAAiD;QACjD,IAAI,CAAC,IAAI,CAAC,cAAc;YAAE,OAAO;QACjC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,CAAC,CAAC;QAEjG,iCAAiC;QACjC,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAE5B,+DAA+D;QAC/D,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;YACpD,EAAE,CAAC,YAAY,CAAC,YAAY,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;YACtC,OAAQ,EAAE,CAAC,OAAO,CAAC,2BAA2B,CAAS,CAAC,KAAK,CAAC;QAChE,CAAC,CAAC,CAAC;QACH,kDAAkD;IACpD,CAAC;IAED,QAAQ;QACN,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACzD,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC,CAAC,CAAC;IACL,CAAC;IAED,qGAAqG;IACrG,aAAa,CAAC,EAAe,EAAE,IAAiB;QAC9C,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,kBAAkB,CAAC,EAAE,CAAC;YACrC,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YAC9B,OAAO;QACT,CAAC;QAED,IAAI,IAAI;YAAE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAE1C,MAAM,MAAM,GAAG,EAAE,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,qBAAqB,EAAE,CAAC;QACtE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,qBAAqB,EAAE,CAAC;QACrE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC;QAErE,MAAM,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC;QAEjE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,aAAa,MAAM,UAAU,CAAC,CAAC;QACnE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,QAAQ,IAAI,CAAC,CAAC;QACjD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,GAAG,SAAS,IAAI,CAAC,CAAC;IACrD,CAAC;IACD,sGAAsG;IAEtG,wGAAwG;IACxG,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;QAC7B,IAAI,IAAI,CAAC,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;YAC9D,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;YAE7B,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBAC3B,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;gBAC9E,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;YAC/B,CAAC;YAED,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;YAC5F,MAAM,aAAa,GAAG,cAAc,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC;YACnE,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC;YAEnD,IAAI,CAAC,aAAa,GAAG,eAAe,GAAG,CAAC,CAAC;YACzC,IAAI,CAAC,cAAc,GAAG,aAAa,GAAG,CAAC,CAAC;YAExC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC5B,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;IAChC,CAAC;IAED,MAAM,CAAC,GAAW;QAChB,IAAI,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU,GAAG,GAAG,CAAC;QAE9C,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;YACrB,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;IACL,CAAC;IAED,kBAAkB;QAChB,IAAI,UAAU,GAAG,eAAe,CAAC;QAEjC,IAAI,IAAI,CAAC,aAAa;YAAE,UAAU,IAAI,qBAAqB,CAAC;QAC5D,IAAI,IAAI,CAAC,cAAc;YAAE,UAAU,IAAI,sBAAsB,CAAC;QAE9D,OAAO,UAAU,CAAC;IACpB,CAAC;IACD,yGAAyG;IAEzG,kGAAkG;IAElG,gBAAgB;QACd,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,8BAA8B,CAAC,CAAC;YACrF,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;YAE1E,IAAI,CAAC,yBAAyB,EAAE,CAAC;QACnC,CAAC,CAAC,CAAC;IACL,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;IACzC,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;YAC5B,IAAI,EAAE,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC;gBACxC,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;gBAClC,OAAO;YACT,CAAC;YAED,EAAE,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;IACL,CAAC;IAED,+CAA+C;IAC/C,yDAAyD;IACzD,yBAAyB;QACvB,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAChE,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAChE,CAAC;IAED,uBAAuB;QACrB,MAAM,IAAI,GAAa,IAAI,CAAC,WAAW,CAAC,WAAW,EAAc,CAAC;QAElE,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC1D,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC1D,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC1D,CAAC;IAED,0BAA0B;QACxB,MAAM,IAAI,GAAa,IAAI,CAAC,WAAW,CAAC,WAAW,EAAc,CAAC;QAElE,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC7D,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC7D,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC7D,CAAC;IACD,0DAA0D;IAE1D,oEAAoE;IACpE,cAAc,CAAC,CAAgB;QAC7B,MAAM,MAAM,GAAY,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAY,CAAC;QAEvD,gFAAgF;QAChF,sCAAsC;QACtC,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YACzB,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,MAAM,KAAK,IAAI,CAAC,cAAc,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;gBACtG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;gBAEzB,qBAAqB,CAAC,GAAG,EAAE;oBACzB,IAAI,CAAC,qBAAqB,EAAE,CAAC;gBAC/B,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC;IACH,CAAC;IACD,qEAAqE;IAErE,YAAY,CAAC,CAAC;QACZ,MAAM,MAAM,GAAY,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAY,CAAC;QAEvD,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YAChD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;YAC1B,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC;QAC9B,CAAC;QAED,IAAI,CAAC,CAAC,IAAI,KAAK,WAAW;YAAE,IAAI,CAAC,qBAAqB,EAAE,CAAC;QACzD,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS;YAAE,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAEvD,IAAI,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;YACtF,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC5B,CAAC;IACH,CAAC;IACD,gDAAgD;IAEhD,iDAAiD;IACjD,qBAAqB;QACnB,MAAM,EAAE,aAAa,EAAE,GAAa,IAAI,CAAC,WAAW,CAAC,WAAW,EAAc,CAAC;QAE/E,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,2BAA2B,CAAC,EAAE,CAAC;YACnE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;YAC9B,OAAO;QACT,CAAC;QAED,kBAAkB;QAClB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC;QAEjE,IAAI,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC1C,IAAI,CAAC,aAAa,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QACxC,CAAC;IACH,CAAC;IAED,qBAAqB;QACnB,MAAM,EAAE,aAAa,EAAE,GAAa,IAAI,CAAC,WAAW,CAAC,WAAW,EAAc,CAAC;QAE/E,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC;YACvD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QAC5D,CAAC;QAED,sBAAsB;QACtB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC;QAEjE,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YACd,IAAI,CAAC,aAAa,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;YACtC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC;IAC9B,CAAC;IACD,kDAAkD;IAElD,qBAAqB;QACnB,IAAI,SAAS,GAAG,8BAA8B,CAAC;QAC/C,IAAI,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;YAAE,SAAS,IAAI,8BAA8B,CAAC;QAEzF,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,eAAe;QACb,IAAI,SAAS,GAAG,uBAAuB,CAAC;QAExC,IAAI,IAAI,CAAC,YAAY;YAAE,SAAS,IAAI,4BAA4B,CAAC;QAEjE,OAAO,SAAS,CAAC;IACnB,CAAC;IACD,mGAAmG;IAEnG,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,qBAAqB;gBAC9B,4DAAK,KAAK,EAAC,aAAa;oBACrB,IAAI,CAAC,cAAc,IAAI,CACtB,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,mBACtB,mBAAmB,mBAClB,GAAG,IAAI,CAAC,YAAY,EAAE;wBAEpC,IAAI,CAAC,QAAQ;wBACd,gEAAS,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,OAAO,EAAC,KAAK,SAAW;wBACzD,4DAAK,KAAK,EAAC,qBAAqB,GAAO,CAChC,CACV;oBAED,2DAAI,KAAK,EAAC,mBAAmB;wBAC3B,8DAAQ;wBACR,2DAAI,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,cAAc,GAAM;wBAC3D,2DAAI,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,cAAc,GAAM,CACvD,CACD;gBAEL,IAAI,CAAC,gBAAgB,IAAI,CACxB,4DAAK,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE;oBACnC,+DAAQ,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAC,IAAI;wBAC9E,gEAAS,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,OAAO,GAAW,CAC5C;oBAET,+DAAQ,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAC,IAAI;wBAC9E,gEAAS,IAAI,EAAE,WAAW,EAAE,KAAK,EAAC,SAAS,GAAW,CAC/C,CACL,CACP,CACG;YAEL,IAAI,CAAC,cAAc,IAAI,CACtB,2DAAI,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE;gBAC/C,6DAAM,IAAI,EAAC,eAAe,GAAG,CAC1B,CACN,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Element,\n Prop,\n h,\n Host,\n Listen,\n State,\n Watch,\n forceUpdate,\n EventEmitter,\n Event,\n} from '@stencil/core';\nimport { uuidv4 } from '@/globals/helpers';\nimport { angle_down, arrow_left, arrow_right } from 'pn-design-assets/pn-assets/icons.js';\n\n/*\n @deprecated This component will be removed in v8. Please use the `pn-tablist` instead.\n * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-navigation-tablist--docs} Use `pn-tablist` instead.\n \n @slot dropdown-item - Place your `pn-page-nav-dropdown-item` components here.\n /\n@Component({\n tag: 'pn-page-nav',\n styleUrl: 'pn-page-nav.scss',\n})\nexport class PnPageNav {\n mo: MutationObserver;\n\n navContainer: HTMLUListElement;\n navWrapper: HTMLElement;\n navItems: HTMLPnPageNavItemElement[] = [];\n\n dropdownButton: HTMLElement;\n dropdownEl: HTMLElement;\n dropdownItems: HTMLPnPageNavItemElement[];\n dropdownEls: HTMLPnPageNavDropdownItemElement[];\n\n eventHandler = this.keyboardEvents.bind(this);\n globalEventHandler = this.globalEvents.bind(this);\n\n activeBg: HTMLDivElement;\n hoverBg: HTMLDivElement;\n\n scrollRegistered: boolean = false;\n\n @Element() hostElement: HTMLElement;\n\n @State() currentSelection: HTMLElement;\n @State() showScrollArrows: boolean = false;\n @State() showLeftArrow: boolean = false;\n @State() showRightArrow: boolean = false;\n @State() dropdownOpen: boolean = false;\n @State() dropdownLinks: Array<string> = [];\n @State() dropdownActive: boolean = false;\n\n /* Currently active menu item value /\n @Prop({ mutable: true }) value: string;\n /* Pass a string which will be the text on the dropdown button. /\n @Prop() dropdown: string \| boolean = false;\n /* Set a unique HTML ID. /\n @Prop() navid: string = `pn-page-nav-${uuidv4()}`;\n\n /* Emits the value of the selected item. /\n @Event() navchange: EventEmitter<string>;\n\n @Listen('itemselection')\n changeHandler({ target }) {\n this.currentSelection = target.closest('pn-page-nav-item');\n if (target.value) this.value = target.value;\n\n if (this.dropdownOpen) this.dropdownOpen = false;\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n this.rerender();\n }\n\n @Watch('value')\n valueHandler() {\n if (!this.value) this.currentSelection = null;\n this.calcHighlight(this.currentSelection, this.activeBg);\n\n this.navchange.emit(this.value);\n\n if (!this.dropdownActive) return;\n this.isDropdownItemActive();\n }\n\n @Watch('dropdownOpen')\n dropdownHandler() {\n if (this.dropdownOpen) {\n requestAnimationFrame(() => {\n this.addGlobalEventListeners();\n });\n\n return;\n }\n\n this.removeGlobalEventListeners();\n }\n\n / ---------------------------------------LIFECYCLE--------------------------------------- /\n componentWillLoad() {\n if (!this.dropdown) return;\n this.dropdownEls = Array.from(this.hostElement.querySelectorAll('pn-page-nav-dropdown-item'));\n if (this.dropdownEls.length) {\n this.dropdownActive = true;\n this.initiateDropdown();\n }\n }\n\n componentDidLoad() {\n if (this.mo) this.mo.disconnect();\n this.mo = new MutationObserver(() => {\n forceUpdate(this.hostElement);\n this.setActiveNavItem();\n this.rerender();\n });\n this.mo.observe(this.hostElement, { childList: true, subtree: true });\n\n this.navWrapper = this.hostElement.querySelector('.pn-page-nav');\n this.navContainer = this.hostElement.querySelector('.pn-page-nav-items');\n this.activeBg = this.hostElement.querySelector('.pn-pn-active');\n this.hoverBg = this.hostElement.querySelector('.pn-pn-hover');\n\n this.hostElement.addEventListener('mouseover', ({ target }) =>\n this.calcHighlight(target as HTMLElement, this.hoverBg),\n );\n\n this.setActiveNavItem();\n this.rerender();\n }\n / ---------------------------------------/LIFECYCLE--------------------------------------- /\n\n setActiveNavItem() {\n this.navItems = Array.from(this.hostElement.querySelectorAll('pn-page-nav-item'));\n this.navItems.forEach(navItemEl => {\n if (this.value === navItemEl.value) {\n this.currentSelection = navItemEl;\n } else {\n navItemEl.removeAttribute('selected');\n }\n\n navItemEl\n .querySelector('a')\n .addEventListener('focus', ({ target }) => this.calcHighlight(target as HTMLElement, this.hoverBg));\n });\n\n / -----------------dropdown------------------ /\n if (!this.dropdownActive) return;\n this.dropdownItems = Array.from(this.hostElement.querySelectorAll('.pn-page-nav-dropdown-item'));\n\n //Check active state on each item\n this.isDropdownItemActive();\n\n //Store all values to check if dropdown button should be active\n this.dropdownLinks = this.dropdownItems.map((el, i) => {\n el.setAttribute('data-index', `${i}`);\n return (el.closest('pn-page-nav-dropdown-item') as any).value;\n });\n / -----------------/dropdown------------------ /\n }\n\n rerender() {\n requestAnimationFrame(() => {\n this.calcHighlight(this.currentSelection, this.activeBg);\n this.scrollArrowRender();\n });\n }\n\n /---------------------------------------HIGHLIGHT LOGIC-------------------------------------------/\n calcHighlight(el: HTMLElement, bgEl: HTMLElement) {\n if (!el?.closest('pn-page-nav-item')) {\n bgEl?.classList.add('hidden');\n return;\n }\n\n if (bgEl) bgEl.classList.remove('hidden');\n\n const elRect = el.closest('pn-page-nav-item').getBoundingClientRect();\n const { left: hostLeft } = this.navContainer.getBoundingClientRect();\n const { left: navLeft, height: navHeight, width: navWidth } = elRect;\n\n const offset = navLeft - hostLeft + this.navContainer.scrollLeft;\n\n bgEl.style.setProperty('transform', `translate(${offset}px, -50%`);\n bgEl.style.setProperty('width', `${navWidth}px`);\n bgEl.style.setProperty('height', `${navHeight}px`);\n }\n /---------------------------------------/HIGHLIGHT LOGIC-------------------------------------------/\n\n /---------------------------------------SCROLL ARROW LOGIC-------------------------------------------/\n scrollArrowRender() {\n if (!this.navWrapper) return;\n if (this.navWrapper.scrollWidth > this.navWrapper.clientWidth) {\n this.showScrollArrows = true;\n\n if (!this.scrollRegistered) {\n this.navWrapper.addEventListener('scroll', this.scrollArrowRender.bind(this));\n this.scrollRegistered = true;\n }\n\n const amountScrolled = Math.round(this.navWrapper.scrollWidth - this.navWrapper.scrollLeft);\n const distanceToEnd = amountScrolled - this.navWrapper.clientWidth;\n const distanceToStart = this.navWrapper.scrollLeft;\n\n this.showLeftArrow = distanceToStart > 0;\n this.showRightArrow = distanceToEnd > 0;\n\n return;\n }\n\n this.showLeftArrow = false;\n this.showRightArrow = false;\n this.showScrollArrows = false;\n }\n\n scroll(val: number) {\n let amount = this.navWrapper.scrollLeft + val;\n\n this.navWrapper.scroll({\n left: amount,\n behavior: 'smooth',\n });\n }\n\n scrollArrowClasses() {\n let classNames = 'pn-pn-arrows ';\n\n if (this.showLeftArrow) classNames += 'pn-pn-left-visible ';\n if (this.showRightArrow) classNames += 'pn-pn-right-visible ';\n\n return classNames;\n }\n /---------------------------------------/SCROLL ARROW LOGIC-------------------------------------------/\n\n / ---------------------------------------DROPDOWN LOGIC--------------------------------------- /\n\n initiateDropdown() {\n requestAnimationFrame(() => {\n this.dropdownButton = this.hostElement.querySelector('.pn-page-nav-dropdown-button');\n this.dropdownEl = this.hostElement.querySelector('.pn-page-nav-dropdown');\n\n this.addDropdownEventListeners();\n });\n }\n\n toggleDropdown() {\n this.dropdownOpen = !this.dropdownOpen;\n }\n\n isDropdownItemActive() {\n this.dropdownEls.forEach(el => {\n if (el.value && this.value === el.value) {\n el.setAttribute('active', 'true');\n return;\n }\n\n el.removeAttribute('active');\n });\n }\n\n / -----------------events------------------ /\n / -----------------temporary events------------------ /\n addDropdownEventListeners() {\n this.hostElement.addEventListener('keydown', this.eventHandler);\n this.hostElement.addEventListener('click', this.eventHandler);\n }\n\n addGlobalEventListeners() {\n const root: Document = this.hostElement.getRootNode() as Document;\n\n root.addEventListener('focusin', this.globalEventHandler);\n root.addEventListener('keydown', this.globalEventHandler);\n root.addEventListener('click', this.globalEventHandler);\n }\n\n removeGlobalEventListeners() {\n const root: Document = this.hostElement.getRootNode() as Document;\n\n root.removeEventListener('focusin', this.globalEventHandler);\n root.removeEventListener('keydown', this.globalEventHandler);\n root.removeEventListener('click', this.globalEventHandler);\n }\n / -----------------/temporary events------------------ /\n\n / -----------------Open dropdown with keyboard------------------ /\n keyboardEvents(e: KeyboardEvent) {\n const target: Element = e.composedPath()[0] as Element;\n\n // As long as the dropdown is closed, we only want it to react to keyboard input\n // is the user has focus on the button\n if (e.type === 'keydown') {\n if (!this.dropdownOpen && target === this.dropdownButton && ['ArrowUp', 'ArrowDown'].includes(e.code)) {\n this.dropdownOpen = true;\n\n requestAnimationFrame(() => {\n this.focusNextDropdownItem();\n });\n }\n }\n }\n / -----------------/Open dropdown with keyboard------------------ /\n\n globalEvents(e) {\n const target: Element = e.composedPath()[0] as Element;\n\n if (e.type === 'keydown' && e.code === 'Escape') {\n this.dropdownOpen = false;\n this.dropdownButton.focus();\n }\n\n if (e.code === 'ArrowDown') this.focusNextDropdownItem();\n if (e.code === 'ArrowUp') this.focusPrevDropdownItem();\n\n if ((e.type === 'click' \|\| e.type === 'focusin') && !this.dropdownEl.contains(target)) {\n this.dropdownOpen = false;\n }\n }\n / -----------------/events------------------ /\n\n / -----------------focusing------------------ /\n focusNextDropdownItem() {\n const { activeElement }: Document = this.hostElement.getRootNode() as Document;\n\n if (!activeElement.classList.contains('pn-page-nav-dropdown-item')) {\n this.dropdownItems[0].focus();\n return;\n }\n\n // focus next item\n const index = parseInt(activeElement.getAttribute('data-index'));\n\n if (index < this.dropdownItems.length - 1) {\n this.dropdownItems[index + 1].focus();\n }\n }\n\n focusPrevDropdownItem() {\n const { activeElement }: Document = this.hostElement.getRootNode() as Document;\n\n if (!activeElement.classList.contains('dropdown-item')) {\n this.dropdownItems[this.dropdownItems.length - 1].focus();\n }\n\n // focus previous item\n const index = parseInt(activeElement.getAttribute('data-index'));\n\n if (index > 0) {\n this.dropdownItems[index - 1].focus();\n return;\n }\n\n this.dropdownButton.focus();\n }\n / -----------------/focusing------------------ /\n\n dropdownButtonClasses() {\n let classList = 'pn-page-nav-dropdown-button ';\n if (this.dropdownLinks.includes(this.value)) classList += 'pn-page-nav-dropdown-active ';\n\n return classList;\n }\n\n dropdownClasses() {\n let classList = 'pn-page-nav-dropdown ';\n\n if (this.dropdownOpen) classList += 'pn-page-nav-dropdown-open ';\n\n return classList;\n }\n / ---------------------------------------/DROPDOWN LOGIC--------------------------------------- */\n\n render() {\n return (\n <Host>\n <div class=\"pn-page-nav-wrapper\">\n <nav class=\"pn-page-nav\">\n {this.dropdownActive && (\n <button\n type=\"button\"\n class={this.dropdownButtonClasses()}\n onClick={() => this.toggleDropdown()}\n aria-controls=\"page-nav-dropdown\"\n aria-expanded={`${this.dropdownOpen}`}\n >\n {this.dropdown}\n <pn-icon icon={angle_down} color=\"white\" small></pn-icon>\n <div class=\"pn-page-nav-divider\"></div>\n </button>\n )}\n\n <ul class=\"pn-page-nav-items\">\n <slot />\n <li class=\"pn-pn-bg pn-pn-active\" role=\"presentation\"></li>\n <li class=\"pn-pn-bg pn-pn-hover\" role=\"presentation\"></li>\n </ul>\n </nav>\n\n {this.showScrollArrows && (\n <div class={this.scrollArrowClasses()}>\n <button class=\"pn-pn-arrow-left\" onClick={() => this.scroll(-120)} tabindex=\"-1\">\n <pn-icon icon={arrow_left} color=\"white\"></pn-icon>\n </button>\n\n <button class=\"pn-pn-arrow-right\" onClick={() => this.scroll(120)} tabindex=\"-1\">\n <pn-icon icon={arrow_right} color=\"blue700\"></pn-icon>\n </button>\n </div>\n )}\n </div>\n\n {this.dropdownActive && (\n <ul id={this.navid} class={this.dropdownClasses()}>\n <slot name=\"dropdown-item\" />\n </ul>\n )}\n </Host>\n );\n }\n}\n"]}

package/umd/modules/@postnord/web-components/collection/components/navigation/pn-pagination/pn-pagination.js CHANGED Viewed

@@ -158,7 +158,7 @@ export class PnPagination {
         return (h("pn-button", { arialabel: label, ariacurrent: current ? 'page' : null, href: this.getUrl(page), rel: current ? null : rel, appearance: "light", small: true, icon: icon, iconOnly: true, onPnClick: ({ detail }) => this.navigate({ page, event: detail }) }));
     }
     render() {
-        return (h(Host, { key: '1f33db59423d42f0e7803588c1792eab786b8de7' }, h("nav", { key: '540f96e45b8d9f57ee74fa64873c4386ec5c5886', id: this.paginationId, class: "pn-pagination", "aria-label": this.label || this.translate('PAGINATION') }, this.useRowList() && (h("pn-select", { key: '4819db7a03b6ce337210679a72d0e33b684015e3', class: "pn-pagination-rows", label: this.rowsLabel || this.translate('ROWS_PAGE'), onChange: event => this.setRows(event) }, this.getRowList().map(item => (h("option", { value: item, selected: this.rows === Number(item), innerHTML: `${item}` }))))), h("div", { key: '653ae1faeda706b1f58b10597f392f582e758e52', class: "pn-pagination-container", "data-right": this.useRowList() }, this.renderJumpButton(), this.renderButton({ page: 1, dataAttr: 'first' }), this.renderDivider(), h("ol", { key: 'df640b8caf32ae986dbd0523b1a782df4910026f', class: "pn-pagination-list", ref: el => (this.listElement = el) }, this.getPagination().map(item => this.renderItem(item))), this.renderDivider(true), this.renderButton({ page: this.pages, dataAttr: 'last' }), this.renderJumpButton(true)))));
+        return (h(Host, { key: 'd1cd7756a1bf0a5e5d4d59e8a5c8c6f759cee285' }, h("nav", { key: 'f7c4d02b8a1f147f849bf7c8b3093098745933c1', id: this.paginationId, class: "pn-pagination", "aria-label": this.label || this.translate('PAGINATION') }, this.useRowList() && (h("pn-select", { key: '1297805c338445d019524d2a51e11e786529d899', class: "pn-pagination-rows", label: this.rowsLabel || this.translate('ROWS_PAGE'), onChange: event => this.setRows(event) }, this.getRowList().map(item => (h("option", { value: item, selected: this.rows === Number(item), innerHTML: `${item}` }))))), h("div", { key: 'fdb8a131a50ed56deca325db959042a32f8d335b', class: "pn-pagination-container", "data-right": this.useRowList() }, this.renderJumpButton(), this.renderButton({ page: 1, dataAttr: 'first' }), this.renderDivider(), h("ol", { key: '6bb693d0b87cc6d95368525288dc1eaa2eef67fa', class: "pn-pagination-list", ref: el => (this.listElement = el) }, this.getPagination().map(item => this.renderItem(item))), this.renderDivider(true), this.renderButton({ page: this.pages, dataAttr: 'last' }), this.renderJumpButton(true)))));
     }
     static get is() { return "pn-pagination"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/components/navigation/pn-tablist/pn-tablist.js CHANGED Viewed

@@ -3,7 +3,7 @@
  * By PostNord.
  */
 import { h, Host, forceUpdate, } from "@stencil/core";
-import { chevron_left, chevron_right } from "pn-design-assets/pn-assets/icons.js";
+import { angle_left, angle_right } from "pn-design-assets/pn-assets/icons.js";
 import translations from "./translations";
 import { awaitTopbar, en } from "../../../globals/helpers";
 /**
@@ -135,7 +135,7 @@ export class PnTablist {
         return translations?.[prop]?.[this.language || en];
     }
     render() {
-        return (h(Host, { key: '6018119e45b053e16de64bae803b3baaaeafa41d' }, h("nav", { key: '747235504d6129e765cb87de674b7ffeac293b20', class: "pn-tablist", role: this.isMenu ? null : 'tablist', "aria-label": this.label, "data-stacked": this.stackedicons, "data-small": !this.isMenu && this.small, "data-large": this.isMenu, "data-scroll": this.showScrollArrows, ref: el => (this.tabListEl = el) }, h("slot", { key: 'a4e2d984d78fcf9d31d740865fdeb3df588dc772' }), h("div", { key: '29ee0561e19d48d4f974d3844772ca72ad6577af', class: "pn-tablist-line" }, h("div", { key: 'e6a2b93e8e1c696356ddbaff76ecaa3e7bfd3924', ref: el => (this.lineActive = el), class: "pn-tablist-line-item pn-tablist-line-active" }), h("div", { key: '2d884eeeaff74af37abbb46b6e6d6475aeafee0c', ref: el => (this.lineHovered = el), class: "pn-tablist-line-item pn-tablist-line-hovered" }))), h("div", { key: '4674ccbc7aea1a08721b11b121c2a00c56af50a6', class: "pn-tablist-scroll" }, h("pn-button", { key: '8da1137191ccf9f3e76aa05879b76634323553f8', class: "pn-tablist-arrow", "data-show": this.arrowLeft, onClick: () => this.scroll(), noTab: true, appearance: "light", variant: "outlined", icon: chevron_left, iconOnly: true, arialabel: this.translate('LEFT'), small: true }), h("pn-button", { key: '99ce43b13ad34b0326f58e92354265b8bca047e1', class: "pn-tablist-arrow", "data-show": this.arrowRight, onClick: () => this.scroll({ right: true }), noTab: true, appearance: "light", variant: "outlined", icon: chevron_right, iconOnly: true, arialabel: this.translate('RIGHT'), small: true }))));
+        return (h(Host, { key: '1de634d581308a90d175beed6e80d87f9503ba46' }, h("nav", { key: 'c372ea946ce171e4a96b1298f14216c6fe95218a', class: "pn-tablist", role: this.isMenu ? null : 'tablist', "aria-label": this.label, "data-stacked": this.stackedicons, "data-small": !this.isMenu && this.small, "data-large": this.isMenu, "data-scroll": this.showScrollArrows, ref: el => (this.tabListEl = el) }, h("slot", { key: '1040c9e70f6b4a2542913e0695b775dd07c3d1b9' }), h("div", { key: '94e99bc1079bc23f38a629c966af8e4de9e8689d', class: "pn-tablist-line" }, h("div", { key: '713ab47c16b5bc13035f2e28f2333e9dfdc25177', ref: el => (this.lineActive = el), class: "pn-tablist-line-item pn-tablist-line-active" }), h("div", { key: 'aa6a7585dffad93a48900e6a5fa0f74a40ec18ad', ref: el => (this.lineHovered = el), class: "pn-tablist-line-item pn-tablist-line-hovered" }))), h("div", { key: 'e5e45bcd0d68a6bf11d16865f4f2f0ceead66ed5', class: "pn-tablist-scroll" }, h("pn-button", { key: 'a37736842598d230cc392088f5d6ea4ebd82cc4c', class: "pn-tablist-arrow", "data-show": this.arrowLeft, onClick: () => this.scroll(), noTab: true, appearance: "light", variant: "outlined", icon: angle_left, iconOnly: true, arialabel: this.translate('LEFT'), small: true }), h("pn-button", { key: 'bb5524b809761dc965b5d6c68c57fc2b3c605593', class: "pn-tablist-arrow", "data-show": this.arrowRight, onClick: () => this.scroll({ right: true }), noTab: true, appearance: "light", variant: "outlined", icon: angle_right, iconOnly: true, arialabel: this.translate('RIGHT'), small: true }))));
     }
     static get is() { return "pn-tablist"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/components/navigation/pn-tablist/pn-tablist.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pn-tablist.js","sourceRoot":"","sources":["../../../../src/components/navigation/pn-tablist/pn-tablist.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n Listen,\n Element,\n Event,\n EventEmitter,\n State,\n h,\n Host,\n Watch,\n forceUpdate,\n} from '@stencil/core';\nimport { chevron_left, chevron_right } from 'pn-design-assets/pn-assets/icons.js';\nimport translations from './translations';\nimport { awaitTopbar, en } from '@/globals/helpers';\nimport type { PnLanguages } from '@/globals/types';\n\n/*\n @slot menu - Can only be used inside of a `pn-header`. Allows the `href` attribute on the `pn-tab` when active.\n /\n@Component({\n tag: 'pn-tablist',\n styleUrl: 'pn-tablist.scss',\n})\nexport class PnTablist {\n private mo: MutationObserver;\n\n private isMenu: boolean = false;\n private isTabHovered: boolean = false;\n\n private tabListEl: HTMLElement;\n private lineActive: HTMLDivElement;\n private lineHovered: HTMLDivElement;\n private tabElement: HTMLPnTabElement;\n\n @Element() hostElement: HTMLElement;\n\n /* Display the scrolling arrows /\n @State() private showScrollArrows: boolean = false;\n /* Display the scroll arrow to the left /\n @State() private arrowLeft: boolean = false;\n /* Display the scroll arrow to the right /\n @State() private arrowRight: boolean = false;\n\n /* Give the tablist a name for screenreaders /\n @Prop() label!: string;\n /* The value of the tab that is currently active, each `<pn-tab value=\"example-value\">` also expects a unique value /\n @Prop({ reflect: true, mutable: true }) value!: string;\n /* Make the tablist smaller /\n @Prop() small?: boolean;\n /* Icons are stacked vertically instead of the default rows /\n @Prop() stackedicons: boolean = false;\n /* Manually set the language. /\n @Prop() language?: PnLanguages = null;\n\n /\n This will emit when a tab is changed. The detail property of the event will contain the value of the selected tab.\n * This is the event and value you listen to when you toggle the visibility among your tabpanels.\n **/\n @Event() tabchange: EventEmitter<string>;\n\n @Watch('value')\n setValue() {\n const tabs = Array.from(this.hostElement.querySelectorAll('pn-tab'));\n\n tabs.forEach(tab => {\n tab.activeTab = this.value;\n });\n }\n\n @Watch('showScrollArrows')\n scrollHandler() {\n if (this.showScrollArrows) {\n this.tabListEl.addEventListener('scroll', this.scrollIndicators.bind(this));\n } else {\n this.tabListEl.removeEventListener('scroll', this.scrollIndicators);\n }\n }\n\n @Listen('setActiveTab')\n setActiveTabHandler({ detail }) {\n this.tabElement = detail.el;\n requestAnimationFrame(() => this.activateTab(detail.el));\n if (this.value === detail.val) return;\n this.value = detail.val;\n this.tabchange.emit(this.value);\n this.tabElement.querySelector(this.isMenu ? 'a' : 'button').focus();\n }\n\n @Listen('resize', { target: 'window' })\n rerender() {\n requestAnimationFrame(() => {\n this.scrollIndicators();\n this.isTabHovered = false;\n });\n }\n\n @Listen('tabEnter')\n handleEnter(e: { target: HTMLPnTabElement }) {\n this.isTabHovered = true;\n this.styleLines(e.target);\n }\n\n @Listen('tabLeave')\n handleLeave() {\n this.isTabHovered = false;\n setTimeout(() => {\n if (!this.isTabHovered) this.lineHovered.style.setProperty('--pn-hover-opacity', '0');\n }, 500);\n }\n\n async componentWillLoad() {\n this.isMenu = this.hostElement.slot === 'menu';\n\n if (this.language === null) await awaitTopbar(this.hostElement);\n }\n\n componentDidLoad() {\n if (this.mo) this.mo.disconnect();\n this.mo = new MutationObserver(() => {\n forceUpdate(this.hostElement);\n this.rerender();\n });\n\n this.mo.observe(this.hostElement, { childList: true, subtree: true });\n }\n\n componentDidRender() {\n this.rerender();\n this.setValue();\n }\n\n private getRect(element: HTMLElement \| HTMLPnTablistElement): DOMRect {\n return element.getBoundingClientRect();\n }\n\n private activateTab(element: HTMLPnTabElement) {\n this.styleLines(element, true);\n }\n\n private styleLines(element: HTMLElement, active: boolean = false) {\n const tabListCoords = this.getRect(this.tabListEl);\n const scrollOffset = this.tabListEl.scrollLeft;\n\n const line = this.getRect(element);\n\n const width = line.width;\n const offset = line.left + scrollOffset - tabListCoords.left;\n\n const cssVar = active ? 'active' : 'hover';\n const prop = active ? 'lineActive' : 'lineHovered';\n\n this[prop].style.setProperty(`--pn-${cssVar}-width`, `${width}px`);\n this[prop].style.setProperty(`--pn-${cssVar}-offset`, `${offset}px`);\n this[prop].style.setProperty(`--pn-${cssVar}-opacity`, '1');\n }\n\n private scrollIndicators() {\n const { scrollWidth, scrollLeft } = this.tabListEl;\n\n const { clientWidth } = this.hostElement;\n\n this.showScrollArrows = scrollWidth > clientWidth;\n\n this.arrowLeft = this.showScrollArrows && scrollLeft > 0;\n this.arrowRight = this.showScrollArrows && clientWidth + 16 + scrollLeft < scrollWidth;\n }\n\n private scroll({ right = false }: { right?: boolean } = {}) {\n const tabList = this.tabListEl;\n const { scrollLeft, clientWidth } = tabList;\n\n let left: number = scrollLeft;\n // The width of the scroll arrow is 32px, so we remove that from this calculation so the scroll\n const scrollAmount = clientWidth - 64;\n\n if (right) left += scrollAmount;\n else left -= scrollAmount;\n\n tabList.scrollTo({\n left,\n behavior: 'smooth',\n });\n }\n\n private translate(prop: string): string {\n return translations?.[prop]?.[this.language \|\| en];\n }\n\n render() {\n return (\n <Host>\n <nav\n class=\"pn-tablist\"\n role={this.isMenu ? null : 'tablist'}\n aria-label={this.label}\n data-stacked={this.stackedicons}\n data-small={!this.isMenu && this.small}\n data-large={this.isMenu}\n data-scroll={this.showScrollArrows}\n ref={el => (this.tabListEl = el)}\n >\n <slot />\n <div class=\"pn-tablist-line\">\n <div ref={el => (this.lineActive = el)} class=\"pn-tablist-line-item pn-tablist-line-active\" />\n <div ref={el => (this.lineHovered = el)} class=\"pn-tablist-line-item pn-tablist-line-hovered\" />\n </div>\n </nav>\n\n <div class=\"pn-tablist-scroll\">\n <pn-button\n class=\"pn-tablist-arrow\"\n data-show={this.arrowLeft}\n onClick={() => this.scroll()}\n noTab={true}\n appearance=\"light\"\n variant=\"outlined\"\n icon={chevron_left}\n iconOnly={true}\n arialabel={this.translate('LEFT')}\n small\n />\n\n <pn-button\n class=\"pn-tablist-arrow\"\n data-show={this.arrowRight}\n onClick={() => this.scroll({ right: true })}\n noTab={true}\n appearance=\"light\"\n variant=\"outlined\"\n icon={chevron_right}\n iconOnly={true}\n arialabel={this.translate('RIGHT')}\n small\n />\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pn-tablist.js","sourceRoot":"","sources":["../../../../src/components/navigation/pn-tablist/pn-tablist.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n Listen,\n Element,\n Event,\n EventEmitter,\n State,\n h,\n Host,\n Watch,\n forceUpdate,\n} from '@stencil/core';\nimport { angle_left, angle_right } from 'pn-design-assets/pn-assets/icons.js';\nimport translations from './translations';\nimport { awaitTopbar, en } from '@/globals/helpers';\nimport type { PnLanguages } from '@/globals/types';\n\n/*\n @slot menu - Can only be used inside of a `pn-header`. Allows the `href` attribute on the `pn-tab` when active.\n /\n@Component({\n tag: 'pn-tablist',\n styleUrl: 'pn-tablist.scss',\n})\nexport class PnTablist {\n private mo: MutationObserver;\n\n private isMenu: boolean = false;\n private isTabHovered: boolean = false;\n\n private tabListEl: HTMLElement;\n private lineActive: HTMLDivElement;\n private lineHovered: HTMLDivElement;\n private tabElement: HTMLPnTabElement;\n\n @Element() hostElement: HTMLElement;\n\n /* Display the scrolling arrows /\n @State() private showScrollArrows: boolean = false;\n /* Display the scroll arrow to the left /\n @State() private arrowLeft: boolean = false;\n /* Display the scroll arrow to the right /\n @State() private arrowRight: boolean = false;\n\n /* Give the tablist a name for screenreaders /\n @Prop() label!: string;\n /* The value of the tab that is currently active, each `<pn-tab value=\"example-value\">` also expects a unique value /\n @Prop({ reflect: true, mutable: true }) value!: string;\n /* Make the tablist smaller /\n @Prop() small?: boolean;\n /* Icons are stacked vertically instead of the default rows /\n @Prop() stackedicons: boolean = false;\n /* Manually set the language. /\n @Prop() language?: PnLanguages = null;\n\n /\n This will emit when a tab is changed. The detail property of the event will contain the value of the selected tab.\n * This is the event and value you listen to when you toggle the visibility among your tabpanels.\n **/\n @Event() tabchange: EventEmitter<string>;\n\n @Watch('value')\n setValue() {\n const tabs = Array.from(this.hostElement.querySelectorAll('pn-tab'));\n\n tabs.forEach(tab => {\n tab.activeTab = this.value;\n });\n }\n\n @Watch('showScrollArrows')\n scrollHandler() {\n if (this.showScrollArrows) {\n this.tabListEl.addEventListener('scroll', this.scrollIndicators.bind(this));\n } else {\n this.tabListEl.removeEventListener('scroll', this.scrollIndicators);\n }\n }\n\n @Listen('setActiveTab')\n setActiveTabHandler({ detail }) {\n this.tabElement = detail.el;\n requestAnimationFrame(() => this.activateTab(detail.el));\n if (this.value === detail.val) return;\n this.value = detail.val;\n this.tabchange.emit(this.value);\n this.tabElement.querySelector(this.isMenu ? 'a' : 'button').focus();\n }\n\n @Listen('resize', { target: 'window' })\n rerender() {\n requestAnimationFrame(() => {\n this.scrollIndicators();\n this.isTabHovered = false;\n });\n }\n\n @Listen('tabEnter')\n handleEnter(e: { target: HTMLPnTabElement }) {\n this.isTabHovered = true;\n this.styleLines(e.target);\n }\n\n @Listen('tabLeave')\n handleLeave() {\n this.isTabHovered = false;\n setTimeout(() => {\n if (!this.isTabHovered) this.lineHovered.style.setProperty('--pn-hover-opacity', '0');\n }, 500);\n }\n\n async componentWillLoad() {\n this.isMenu = this.hostElement.slot === 'menu';\n\n if (this.language === null) await awaitTopbar(this.hostElement);\n }\n\n componentDidLoad() {\n if (this.mo) this.mo.disconnect();\n this.mo = new MutationObserver(() => {\n forceUpdate(this.hostElement);\n this.rerender();\n });\n\n this.mo.observe(this.hostElement, { childList: true, subtree: true });\n }\n\n componentDidRender() {\n this.rerender();\n this.setValue();\n }\n\n private getRect(element: HTMLElement \| HTMLPnTablistElement): DOMRect {\n return element.getBoundingClientRect();\n }\n\n private activateTab(element: HTMLPnTabElement) {\n this.styleLines(element, true);\n }\n\n private styleLines(element: HTMLElement, active: boolean = false) {\n const tabListCoords = this.getRect(this.tabListEl);\n const scrollOffset = this.tabListEl.scrollLeft;\n\n const line = this.getRect(element);\n\n const width = line.width;\n const offset = line.left + scrollOffset - tabListCoords.left;\n\n const cssVar = active ? 'active' : 'hover';\n const prop = active ? 'lineActive' : 'lineHovered';\n\n this[prop].style.setProperty(`--pn-${cssVar}-width`, `${width}px`);\n this[prop].style.setProperty(`--pn-${cssVar}-offset`, `${offset}px`);\n this[prop].style.setProperty(`--pn-${cssVar}-opacity`, '1');\n }\n\n private scrollIndicators() {\n const { scrollWidth, scrollLeft } = this.tabListEl;\n\n const { clientWidth } = this.hostElement;\n\n this.showScrollArrows = scrollWidth > clientWidth;\n\n this.arrowLeft = this.showScrollArrows && scrollLeft > 0;\n this.arrowRight = this.showScrollArrows && clientWidth + 16 + scrollLeft < scrollWidth;\n }\n\n private scroll({ right = false }: { right?: boolean } = {}) {\n const tabList = this.tabListEl;\n const { scrollLeft, clientWidth } = tabList;\n\n let left: number = scrollLeft;\n // The width of the scroll arrow is 32px, so we remove that from this calculation so the scroll\n const scrollAmount = clientWidth - 64;\n\n if (right) left += scrollAmount;\n else left -= scrollAmount;\n\n tabList.scrollTo({\n left,\n behavior: 'smooth',\n });\n }\n\n private translate(prop: string): string {\n return translations?.[prop]?.[this.language \|\| en];\n }\n\n render() {\n return (\n <Host>\n <nav\n class=\"pn-tablist\"\n role={this.isMenu ? null : 'tablist'}\n aria-label={this.label}\n data-stacked={this.stackedicons}\n data-small={!this.isMenu && this.small}\n data-large={this.isMenu}\n data-scroll={this.showScrollArrows}\n ref={el => (this.tabListEl = el)}\n >\n <slot />\n <div class=\"pn-tablist-line\">\n <div ref={el => (this.lineActive = el)} class=\"pn-tablist-line-item pn-tablist-line-active\" />\n <div ref={el => (this.lineHovered = el)} class=\"pn-tablist-line-item pn-tablist-line-hovered\" />\n </div>\n </nav>\n\n <div class=\"pn-tablist-scroll\">\n <pn-button\n class=\"pn-tablist-arrow\"\n data-show={this.arrowLeft}\n onClick={() => this.scroll()}\n noTab={true}\n appearance=\"light\"\n variant=\"outlined\"\n icon={angle_left}\n iconOnly={true}\n arialabel={this.translate('LEFT')}\n small\n />\n\n <pn-button\n class=\"pn-tablist-arrow\"\n data-show={this.arrowRight}\n onClick={() => this.scroll({ right: true })}\n noTab={true}\n appearance=\"light\"\n variant=\"outlined\"\n icon={angle_right}\n iconOnly={true}\n arialabel={this.translate('RIGHT')}\n small\n />\n </div>\n </Host>\n );\n }\n}\n"]}

package/umd/modules/@postnord/web-components/collection/components/navigation/pn-tablist/tab/pn-tab.js CHANGED Viewed

@@ -98,7 +98,7 @@ export class PnTab {
     }
     render() {
         const Tag = this.tag;
-        return (h(Host, { key: '50c638d4e12ae9011d8efa3606499e906c9cb8c3' }, h(Tag, { key: '79baf88094716a8499801d0becaeb3a5cb3698d4', id: this.tabid, class: "pn-tab", ...this.renderProperties(), onClick: (e) => this.handleClick(e), onMouseEnter: (e) => this.triggerEnter(e), onFocus: (e) => this.triggerEnter(e), onMouseLeave: (e) => this.triggerLeave(e), onBlur: (e) => this.triggerLeave(e), onKeyDown: (e) => this.arrowKeyNav(e) }, !!this.icon && h("pn-icon", { key: '4fd00fa65a2921a5c8197085fc7c2528773b084b', icon: this.icon }), h("slot", { key: '5c72c7d4813f0644a5777b0f4d2575409fcf8c36' }), h("span", { key: 'b6ee7be6b34ac3dc234ec2bc07f948ba612992e4' }, this.label))));
+        return (h(Host, { key: 'ec9df780cc276853bfc6bcbb9af1f6d4f6e8d83e' }, h(Tag, { key: 'aa1b089953f69110583eef6c689973bd118d2fd6', id: this.tabid, class: "pn-tab", ...this.renderProperties(), onClick: (e) => this.handleClick(e), onMouseEnter: (e) => this.triggerEnter(e), onFocus: (e) => this.triggerEnter(e), onMouseLeave: (e) => this.triggerLeave(e), onBlur: (e) => this.triggerLeave(e), onKeyDown: (e) => this.arrowKeyNav(e) }, !!this.icon && h("pn-icon", { key: '583bf623f788662aaa3f612552b52ecfc0edae51', icon: this.icon }), h("slot", { key: 'a5f216eb6ac2ee8fcb7f90daec3f69cc597f9d7e' }), h("span", { key: '26c116fe67ce645c31eed9e37e5529da6fbc97ea' }, this.label))));
     }
     static get is() { return "pn-tab"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/components/navigation/pn-text-link/pn-text-link.js CHANGED Viewed

@@ -21,7 +21,7 @@ export class PnTextLink {
     }
     hostElement;
     render() {
-        return (h("a", { key: '88ee2cf28a906eecb3b77f3bb4c25103368a6be1', id: this.linkid, class: "pn-text-link", href: this.href, rel: this.rel, target: this.target, download: this.download, hreflang: this.hreflang, media: this.media, referrerPolicy: this.referrerpolicy, "data-icon": !!this.icon, "data-icon-left": this.leftIcon, "data-light": this.light }, this.label, h("slot", { key: 'a0ceda16a5282b86356334e0f68872bdf6ddc8dd' }), this.icon && h("pn-icon", { key: '85a9dc141e364134bb258bbdb5a7b76ad76b37bf', icon: this.icon })));
+        return (h("a", { key: 'e3eedcb07dbfb7530142b37f6fa11c2df8eabd08', id: this.linkid, class: "pn-text-link", href: this.href, rel: this.rel, target: this.target, download: this.download, hreflang: this.hreflang, media: this.media, referrerPolicy: this.referrerpolicy, "data-icon": !!this.icon, "data-icon-left": this.leftIcon, "data-light": this.light }, this.label, h("slot", { key: '830b2a522a8c296540c2831d0b5fae2b35933337' }), this.icon && h("pn-icon", { key: '97b8e1c3037cad1d5bd3b9910762508615a9e191', icon: this.icon })));
     }
     static get is() { return "pn-text-link"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/components/navigation/pn-tile/pn-tile.js CHANGED Viewed

@@ -65,7 +65,7 @@ export class PnTile {
         this.pnTile.emit({ click: event });
     }
     render() {
-        return (h(Host, { key: 'c24ec58a47482a67e27c1266accd657cf3e8c54a' }, h("div", { key: '23727e1b4212192010c81fcb7af59f60fede0152', class: "pn-tile", "data-horizontal": this.horizontal, "data-href": !!this.url, "data-focus": this.visibleOutline, ref: el => (this.tile = el) }, h("div", { key: 'b4bd44255ab53ef2dfb130e02aac7809aebcc16b', class: "pn-tile-illustration", "data-circle": !!this.url, "data-icon": this.showIcon(), role: "presentation", hidden: !this.showImage() }, this.showPropIllustration() ? (h("pn-illustration", { illustration: this.illustration })) : (this.showIcon() && h("pn-icon", { color: "blue700", icon: this.icon })), h("div", { key: '3133bd22a2be6d3625dcbe879f98d6aa0c0de723', class: "pn-tile-illustration-slot", hidden: !this.showSlotIllustration(), ref: el => (this.illustrationSlot = el) }, h("slot", { key: '6a87734eb323047682be191c51d58c1f857df589', name: "illustration" }))), h("div", { key: '2a96a865bc30e22c0d4133273b7bbeea81564bce', class: "pn-tile-text" }, h("h3", { key: 'bb9762e899ddb2b879151031b0ad65e61521956e', class: "pn-tile-title" }, this.url ? (h("a", { class: "pn-tile-link", href: this.url, target: this.target, rel: !this.rel && this.isExternal() ? 'noopener noreferrer' : this.rel, onClick: e => this.clickHandler(e), onFocus: event => this.handleFocus(event), onBlur: event => this.handleFocus(event) }, this.label)) : (this.label), this.isExternal() && h("pn-icon", { key: '97a513fdb9c6daedbf5a8b2614a06bbc5baafb01', icon: open_in_new, small: true, color: "blue700" })), h("div", { key: '9d136471d950acd8c7934da681a9a5f332f0fa95', class: "pn-tile-slot" }, !!this.text && h("p", { key: 'abc6a5b7bef04f7708ff22550a8354db625ad94c', class: "pn-tile-paragraph" }, this.text), h("slot", { key: '7df167c895e2b9cde15326b5f22f222e89690971' }))))));
+        return (h(Host, { key: '3aad61d5d06a72a5f2a5cd1808b18c3f7d8e437b' }, h("div", { key: '15c10f8f668544caa32385121caf382626aa1b8f', class: "pn-tile", "data-horizontal": this.horizontal, "data-href": !!this.url, "data-focus": this.visibleOutline, ref: el => (this.tile = el) }, h("div", { key: '9e61d1919dff7343e394ed86b1800284eb750121', class: "pn-tile-illustration", "data-circle": !!this.url, "data-icon": this.showIcon(), role: "presentation", hidden: !this.showImage() }, this.showPropIllustration() ? (h("pn-illustration", { illustration: this.illustration })) : (this.showIcon() && h("pn-icon", { color: "blue700", icon: this.icon })), h("div", { key: '59e5cdf5d9fb09045e215758692d5dc402a2a49a', class: "pn-tile-illustration-slot", hidden: !this.showSlotIllustration(), ref: el => (this.illustrationSlot = el) }, h("slot", { key: '00bc0dafa3ae0f89959d0a61d8221ce1e4bc8c2f', name: "illustration" }))), h("div", { key: 'c88f8daa6ee6f309d71a3205299ab98a1157a9a9', class: "pn-tile-text" }, h("h3", { key: '2cb429bf55430c1fcea8965c4cc73b511738d89d', class: "pn-tile-title" }, this.url ? (h("a", { class: "pn-tile-link", href: this.url, target: this.target, rel: !this.rel && this.isExternal() ? 'noopener noreferrer' : this.rel, onClick: e => this.clickHandler(e), onFocus: event => this.handleFocus(event), onBlur: event => this.handleFocus(event) }, this.label)) : (this.label), this.isExternal() && h("pn-icon", { key: '5ea4aae5bf9328d68da0ee75990d95c590dc6749', icon: open_in_new, small: true, color: "blue700" })), h("div", { key: 'b9d56f8d2ee862215ef7ae7143d3da8073274fe5', class: "pn-tile-slot" }, !!this.text && h("p", { key: '76b95108a202c183f270868959cb4a7bb5fe0c57', class: "pn-tile-paragraph" }, this.text), h("slot", { key: 'fb3b513fd684adbcbd2af81360437ceec1ff9928' }))))));
     }
     static get is() { return "pn-tile"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/components/web-components/pn-ocr-search/pn-ocr-search.js CHANGED Viewed

@@ -73,7 +73,7 @@ export class PnOcrSearch {
         }
     }
     render() {
-        return (h(Host, { key: '917961782b3f330e4271aa6f25427c36398c252e' }, h("pn-search-field", { key: 'e04856aba0427ece6d332e8375313d87212106af', loading: this.loading, label: this.getTranslation('SEARCH_BUTTON'), button: "icon", buttonLabel: this.getTranslation('SEARCH_BUTTON'), placeholder: this.getTranslation('PLACEHOLDER_TEXT'), onSearch: e => this.handleSearch(e) }), this.renderSearchResult(), this.renderErrorMessage()));
+        return (h(Host, { key: 'c4392bef058b06addd7357e34ce304f5804a1b44' }, h("pn-search-field", { key: '2f8f4beedb4c90e97ef63437fb39e649b0ae7d33', loading: this.loading, label: this.getTranslation('SEARCH_BUTTON'), button: "icon", buttonLabel: this.getTranslation('SEARCH_BUTTON'), placeholder: this.getTranslation('PLACEHOLDER_TEXT'), onSearch: e => this.handleSearch(e) }), this.renderSearchResult(), this.renderErrorMessage()));
     }
     static get is() { return "pn-ocr-search"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/components/web-components/pn-zipcode-search/pn-zipcode-search.js CHANGED Viewed

@@ -84,7 +84,7 @@ export class PnZipcodeSearch {
         }
     }
     render() {
-        return (h(Host, { key: 'cc6f1ccb014330d11b8b75fa09e2f39da079a7f4' }, h("pn-search-field", { key: '60bbf5751e937c820afbf997a3f51ba9ac85d762', label: this.translation('PLACEHOLDER_TEXT'), value: this.value, searchid: this.searchId, loading: this.loading, button: "icon", buttonLabel: this.translation('SEARCH'), placeholder: this.translation('PLACEHOLDER_TEXT'), onSearch: e => this.handleSearch(e.detail) }), this.renderSearchResult(), this.renderErrorMessage()));
+        return (h(Host, { key: 'ab60b367efe4208942f13a524f10325323d1f499' }, h("pn-search-field", { key: '6449ae03e55e4bb228b70245863aa0448ce87957', label: this.translation('PLACEHOLDER_TEXT'), value: this.value, searchid: this.searchId, loading: this.loading, button: "icon", buttonLabel: this.translation('SEARCH'), placeholder: this.translation('PLACEHOLDER_TEXT'), onSearch: e => this.handleSearch(e.detail) }), this.renderSearchResult(), this.renderErrorMessage()));
     }
     static get is() { return "pn-zipcode-search"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/globals/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/globals/types.ts"],"names":[],"mappings":"","sourcesContent":["import { SE, DK, FI, NO, sv, en, da, fi, no } from './helpers';\nimport * as colors from 'pn-design-assets/pn-assets/colors.js';\n\nexport interface PnUploadFileItem {\n uuid: string;\n filename: string;\n filesize: number;\n progress: number;\n status: 'queue' \| 'start' \| 'completed' \| 'error';\n base64: string;\n contentType: string;\n error: any;\n errorMessage: string;\n file: File;\n xhr: XMLHttpRequest;\n xhrPromise?: () => Promise<any>;\n}\n\nexport type PnMarkets = '' \| typeof SE \| typeof DK \| typeof FI \| typeof NO;\nexport type PnLanguages = '' \| typeof sv \| typeof en \| typeof da \| typeof fi \| typeof no;\n\nexport type PnButtonAppearance = '' \| 'light' \| 'warning';\nexport type PnButtonVariant = '' \| 'outlined' \| 'borderless';\n\nexport type PnColors = keyof typeof colors;\n\n/** ~~@deprecated~~ ~~Its~~ ~~just~~ ~~numbers~~ ~~now.~~ /\nexport ~~type~~ ~~PnSteps~~ = ~~number~~;\nexport type PnStepProps = 'totalSteps' \| 'currentStep';\n\nexport interface PnTopbar {\n hasLoaded: boolean;\n market: PnMarkets;\n language: PnLanguages;\n}\n\nexport interface PnMultiselectSubOption {\n /* Set the label for the option, required. /\n label: string;\n /* Set the value for the option, required. /\n value: string;\n /* Set the status of the option, required. /\n checked: boolean;\n /* Display a helpertext for the option, optional. /\n helpertext?: string;\n /* Display an icon for the option. optional. /\n icon?: string;\n /* Use a custom HTML id, optional. /\n id?: string;\n /* Invalid /\n invalid?: boolean;\n /* Set the option as disabled, optional. /\n disabled?: boolean;\n /* Internal use for the search feature. Do not use manually. /\n hide?: boolean;\n}\n\nexport interface PnMultiselectOption extends PnMultiselectSubOption {\n /* The list of items that will be nested under this option. /\n group?: PnMultiselectSubOption[];\n}\n\n/* This is the default option. A `label` and `value` is required. /\nexport interface PnActionMenuOption {\n /* The label of the button. /\n label: string;\n /\n Used as a unique identifier when toggling the menus.\n * Also acts as the value for the checkbox/radio if the `input` prop is used.\n /\n value: string;\n / Set a custom SVG icon for the option. /\n icon?: string;\n /* Set a custom SVG icon that appears as a suffix. /\n trailingIcon?: string;\n /* Set a short `string` suffix for the option. /\n suffix?: string;\n /* Disable the button. @see Requires {@link PnActionMenuInput.input input} or default button. /\n disabled?: boolean;\n /* Display a helpertext for the option. Has no effect on {@link PnActionMenuLink}. /\n helpertext?: string;\n}\n\n/* Create a link inside the action menu. /\nexport interface PnActionMenuLink extends PnActionMenuOption {\n /* Setting a `href` will turn the option into a link option. /\n href?: string;\n / Set the `href` target. The value `_blank` will add the `open_in_new` icon automatically. @see Requires {@link href} /\n target?: string;\n}\n\n/* Allow the user to toggle the option with the {@link PnActionMenuInput.input input} prop. /\nexport interface PnActionMenuInput extends PnActionMenuOption {\n /* Turn the option into a `checkbox` or `radio` button. /\n input?: 'checkbox' \| 'radio';\n /* Pre-check the option. @see Requires {@link input} /\n checked?: boolean;\n /* The `name` property used for the input. @see Requires {@link input} /\n name?: string;\n}\n\n/* Create a group of options. /\nexport interface PnActionMenuGroup extends PnActionMenuOption {\n /\n Create a collection of `PnActionMenuOption`s. This group will be visible without the need to toggle.\n * @see {@link label} will act as the label for this collection. Not a separate button.\n /\n group?: PnActionMenuItem[];\n}\n\n/* Create a nested sub menu that you must explicitly toggle to view. /\nexport interface PnActionMenuSubMenu extends PnActionMenuOption {\n /* Assign the array of {@link PnActionMenuItem} objects. /\n options?: PnActionMenuItem[];\n}\n\n/\n The label and value property are required for every `pn-action-menu` option.\n \n See individual items for exact type:\n * - {@link PnActionMenuOption}\n * - {@link PnActionMenuLink}\n * - {@link PnActionMenuInput}\n \n Group multiple items inside one of the following:\n * - {@link PnActionMenuGroup}\n * - {@link PnActionMenuSubMenu}\n /\nexport interface PnActionMenuItem\n extends PnActionMenuOption,\n PnActionMenuLink,\n PnActionMenuInput,\n PnActionMenuGroup,\n PnActionMenuSubMenu {}\nexport interface PnPaginationItem {\n page: number;\n index: number;\n}\n\nexport type PnZipCodeSearchLanguages = '' \| typeof sv \| typeof en;\n\nexport type PnMeasurements = {\n /* The elements height upwards. /\n hUp: number;\n /* The elements height downwards. /\n hDown: number;\n /* Space available upwards /\n sUp: number;\n /* Space available downwards */\n sDown: number;\n};\n"]}
1	+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/globals/types.ts"],"names":[],"mappings":"","sourcesContent":["import { SE, DK, FI, NO, sv, en, da, fi, no } from './helpers';\nimport * as colors from 'pn-design-assets/pn-assets/colors.js';\n\nexport interface PnUploadFileItem {\n uuid: string;\n filename: string;\n filesize: number;\n progress: number;\n status: 'queue' \| 'start' \| 'completed' \| 'error';\n base64: string;\n contentType: string;\n error: any;\n errorMessage: string;\n file: File;\n xhr: XMLHttpRequest;\n xhrPromise?: () => Promise<any>;\n}\n\nexport type PnMarkets = '' \| typeof SE \| typeof DK \| typeof FI \| typeof NO;\nexport type PnLanguages = '' \| typeof sv \| typeof en \| typeof da \| typeof fi \| typeof no;\n\nexport type PnButtonAppearance = '' \| 'light' \| 'warning';\nexport type PnButtonVariant = '' \| 'outlined' \| 'borderless';\n\nexport type PnColors = keyof typeof colors;\n\nexport type PnSteps = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7;\nexport type PnStepProps = 'totalSteps' \| 'currentStep';\n\nexport interface PnTopbar {\n hasLoaded: boolean;\n market: PnMarkets;\n language: PnLanguages;\n}\n\nexport interface PnMultiselectSubOption {\n / Set the label for the option, required*. /\n label: string;\n / Set the value for the option, required*. /\n value: string;\n / Set the status of the option, required*. /\n checked: boolean;\n /** Display a helpertext for the option, optional. /\n helpertext?: string;\n /* Display an icon for the option. optional. /\n icon?: string;\n /* Use a custom HTML id, optional. /\n id?: string;\n /* Invalid /\n invalid?: boolean;\n /* Set the option as disabled, optional. /\n disabled?: boolean;\n /* Internal use for the search feature. Do not use manually. /\n hide?: boolean;\n}\n\nexport interface PnMultiselectOption extends PnMultiselectSubOption {\n /* The list of items that will be nested under this option. /\n group?: PnMultiselectSubOption[];\n}\n\n/* This is the default option. A `label` and `value` is required. /\nexport interface PnActionMenuOption {\n /* The label of the button. /\n label: string;\n /\n Used as a unique identifier when toggling the menus.\n * Also acts as the value for the checkbox/radio if the `input` prop is used.\n /\n value: string;\n / Set a custom SVG icon for the option. /\n icon?: string;\n /* Set a custom SVG icon that appears as a suffix. /\n trailingIcon?: string;\n /* Set a short `string` suffix for the option. /\n suffix?: string;\n /* Disable the button. @see Requires {@link PnActionMenuInput.input input} or default button. /\n disabled?: boolean;\n /* Display a helpertext for the option. Has no effect on {@link PnActionMenuLink}. /\n helpertext?: string;\n}\n\n/* Create a link inside the action menu. /\nexport interface PnActionMenuLink extends PnActionMenuOption {\n /* Setting a `href` will turn the option into a link option. /\n href?: string;\n / Set the `href` target. The value `_blank` will add the `open_in_new` icon automatically. @see Requires {@link href} /\n target?: string;\n}\n\n/* Allow the user to toggle the option with the {@link PnActionMenuInput.input input} prop. /\nexport interface PnActionMenuInput extends PnActionMenuOption {\n /* Turn the option into a `checkbox` or `radio` button. /\n input?: 'checkbox' \| 'radio';\n /* Pre-check the option. @see Requires {@link input} /\n checked?: boolean;\n /* The `name` property used for the input. @see Requires {@link input} /\n name?: string;\n}\n\n/* Create a group of options. /\nexport interface PnActionMenuGroup extends PnActionMenuOption {\n /\n Create a collection of `PnActionMenuOption`s. This group will be visible without the need to toggle.\n * @see {@link label} will act as the label for this collection. Not a separate button.\n /\n group?: PnActionMenuItem[];\n}\n\n/* Create a nested sub menu that you must explicitly toggle to view. /\nexport interface PnActionMenuSubMenu extends PnActionMenuOption {\n /* Assign the array of {@link PnActionMenuItem} objects. /\n options?: PnActionMenuItem[];\n}\n\n/\n The label and value property are required for every `pn-action-menu` option.\n \n See individual items for exact type:\n * - {@link PnActionMenuOption}\n * - {@link PnActionMenuLink}\n * - {@link PnActionMenuInput}\n \n Group multiple items inside one of the following:\n * - {@link PnActionMenuGroup}\n * - {@link PnActionMenuSubMenu}\n /\nexport interface PnActionMenuItem\n extends PnActionMenuOption,\n PnActionMenuLink,\n PnActionMenuInput,\n PnActionMenuGroup,\n PnActionMenuSubMenu {}\nexport interface PnPaginationItem {\n page: number;\n index: number;\n}\n\nexport type PnZipCodeSearchLanguages = '' \| typeof sv \| typeof en;\n\nexport type PnMeasurements = {\n /* The elements height upwards. /\n hUp: number;\n /* The elements height downwards. /\n hDown: number;\n /* Space available upwards /\n sUp: number;\n /* Space available downwards */\n sDown: number;\n};\n"]}

package/umd/modules/@postnord/web-components/components/{chevron_down.js → angle_down.js} RENAMED Viewed

@@ -3,8 +3,8 @@
  * By PostNord.
  */
 const icon = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12.707 16.707a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 1.414-1.414L12 14.586l7.293-7.293a1 1 0 1 1 1.414 1.414z" clip-rule="evenodd"/></svg>';
-const chevron_down = icon;
+const angle_down = icon;
-export { chevron_down as c };
+export { angle_down as a };
-//# sourceMappingURL=chevron_down.js.map
+//# sourceMappingURL=angle_down.js.map

package/umd/modules/@postnord/web-components/components/angle_down.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"angle_down.js","mappings":";;;;AAAA,MAAM,IAAI,GAAG,4QAA4Q,CAAC;AAC9Q,MAAC,UAAU,GAAG;;;;","names":[],"sources":["node_modules/pn-design-assets/pn-assets/icons/angle_down.js"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M12.707 16.707a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 1.414-1.414L12 14.586l7.293-7.293a1 1 0 1 1 1.414 1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const angle_down = icon;\nexport const angleDown = icon;\n"],"version":3}

package/umd/modules/@postnord/web-components/components/{chevron_right.js → angle_right.js} RENAMED Viewed

@@ -3,11 +3,11 @@
  * By PostNord.
  */
 const icon$1 = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6.293 12.707a1 1 0 0 1 0-1.414l8-8a1 1 0 1 1 1.414 1.414L8.414 12l7.293 7.293a1 1 0 0 1-1.414 1.414z" clip-rule="evenodd"/></svg>';
-const chevron_left = icon$1;
+const angle_left = icon$1;
 const icon = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M17.707 11.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414-1.414L15.586 12 8.293 4.707a1 1 0 0 1 1.414-1.414z" clip-rule="evenodd"/></svg>';
-const chevron_right = icon;
+const angle_right = icon;
-export { chevron_right as a, chevron_left as c };
+export { angle_left as a, angle_right as b };
-//# sourceMappingURL=chevron_right.js.map
+//# sourceMappingURL=angle_right.js.map

package/umd/modules/@postnord/web-components/components/angle_right.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"angle_right.js","mappings":";;;;AAAA,MAAMA,MAAI,GAAG,yQAAyQ,CAAC;AAC3Q,MAAC,UAAU,GAAGA;;ACD1B,MAAM,IAAI,GAAG,4QAA4Q,CAAC;AAC9Q,MAAC,WAAW,GAAG;;;;","names":["icon"],"sources":["node_modules/pn-design-assets/pn-assets/icons/angle_left.js","node_modules/pn-design-assets/pn-assets/icons/angle_right.js"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M6.293 12.707a1 1 0 0 1 0-1.414l8-8a1 1 0 1 1 1.414 1.414L8.414 12l7.293 7.293a1 1 0 0 1-1.414 1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const angle_left = icon;\nexport const angleLeft = icon;\n","const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M17.707 11.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414-1.414L15.586 12 8.293 4.707a1 1 0 0 1 1.414-1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const angle_right = icon;\nexport const angleRight = icon;\n"],"version":3}

package/umd/modules/@postnord/web-components/components/pn-accordion-row.js CHANGED Viewed

@@ -3,7 +3,7 @@
  * By PostNord.
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as chevron_down } from './chevron_down.js';
+import { a as angle_down } from './angle_down.js';
 import { o as ripple, r as reduceMotion } from './helpers.js';
 import { d as defineCustomElement$2 } from './pn-icon2.js';
@@ -110,7 +110,7 @@ const PnAccordionRow$1 = /*@__PURE__*/ proxyCustomElement(class PnAccordionRow e
             this.animation.cancel();
     }
     render() {
-        return (h(Host, { key: '0dcedaab706f95589734c04230abbdbeca16cdf1' }, h("details", { key: '58bead8dce64594af81aae11a42beea75ba0db88', class: "pn-accordion-row", open: this.state, ref: (el) => (this.details = el) }, h("summary", { key: '7447539647210cb5b132ce16d7019e310c8ca1f4', id: this.buttonid, class: "pn-accordion-row-summary", onClick: e => this.clickHandler(e), ref: el => (this.summary = el) }, h("div", { key: '83c87346e27703cab3203920848691fc8d3d007f', class: "pn-accordion-row-text", "data-transparent": this.transparent }, this.label ? this.label : '', h("slot", { key: '8904be6cbec811925b0fa935ed10c4b7bc12fb5d', name: "label" }), h("pn-icon", { key: 'cf71062d11b3a20c106dec2bec2aab1dc4bf0c7f', class: "pn-accordion-row-icon", icon: chevron_down }))), h("div", { key: 'ae73f9fa6e7121352979ec2dad9a4620cff58a91', id: this.contentid, class: "pn-accordion-row-content", ref: (el) => (this.content = el) }, h("slot", { key: '4d7d894af656c1b7e95028832611530d04f3d439' })))));
+        return (h(Host, { key: '9f3142a471217bc0656c4d5641c420262a913c13' }, h("details", { key: 'c742d23b97fe2d489166f18f53b3e5f0d12107d8', class: "pn-accordion-row", open: this.state, ref: (el) => (this.details = el) }, h("summary", { key: 'd061093bf3bb58150d4bbb102caf9da3e9559fb8', id: this.buttonid, class: "pn-accordion-row-summary", onClick: e => this.clickHandler(e), ref: el => (this.summary = el) }, h("div", { key: '921e67cc639e701df60a7bc359d3415ccdec39e3', class: "pn-accordion-row-text", "data-transparent": this.transparent }, this.label ? this.label : '', h("slot", { key: 'e355acdeeb2e62e4056837b26f808d3e5663343e', name: "label" }), h("pn-icon", { key: 'c10681330981f5d019db4d6f7f6cd03d3c67234b', class: "pn-accordion-row-icon", icon: angle_down }))), h("div", { key: 'ddb95ef323966c0c55292dde2b5776e0700bf27a', id: this.contentid, class: "pn-accordion-row-content", ref: (el) => (this.content = el) }, h("slot", { key: 'e0ded60210d472842a8aa5cd87a6374ad7120e58' })))));
     }
     static get style() { return PnAccordionRowStyle0; }
 }, [4, "pn-accordion-row", {

package/umd/modules/@postnord/web-components/components/pn-accordion-row.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-accordion-row.js","mappings":"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","names":["PnAccordionRow"],"sources":["src/components/content/pn-accordion/row/pn-accordion-row.scss?tag=pn-accordion-row","src/components/content/pn-accordion/row/pn-accordion-row.tsx"],"sourcesContent":["@use 'src/globals/main';\n\npn-accordion-row {\n position: relative;\n margin: 0 -0.25em 0;\n}\n\npn-accordion-row .pn-accordion-row {\n width: 100%;\n display: flex;\n flex-direction: column;\n\n &-summary {\n color: main.$gray900;\n position: relative;\n border: none;\n outline: 0;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n width: 100%;\n padding: 0.25em;\n font-size: 1em;\n font-weight: 400;\n border-radius: 0.5em;\n\n list-style: none;\n\n &:hover > .pn-accordion-row-text {\n background-color: main.$blue50;\n }\n\n &:focus-visible > .pn-accordion-row-text {\n @include main.pn-focus-visible();\n }\n\n &::-webkit-details-marker {\n display: none;\n }\n }\n\n &-text {\n position: relative;\n overflow: hidden;\n display: flex;\n align-items: center;\n padding: 0.75em;\n background-color: main.$white;\n border-radius: 0.5em;\n -webkit-tap-highlight-color: transparent;\n\n &[data-transparent] {\n background-color: transparent;\n }\n\n @include main.pn-focus-base();\n @include main.pn-transition('background-color, outline-color');\n @include main.pn-ripple(main.$blue700);\n }\n\n &-icon {\n margin-left: auto;\n flex-shrink: 0;\n @include main.pn-transition('transform');\n path {\n fill: main.$blue700;\n }\n }\n\n &[open] .pn-accordion-row-icon {\n transform: rotate(-180deg);\n }\n\n &-content {\n color: main.$gray900;\n display: block;\n padding: 1em;\n }\n}\n","import { Component, h, Host, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\nimport { chevron_down } from 'pn-design-assets/pn-assets/icons.js';\nimport { reduceMotion, ripple } from '@/index';\n\n/*\n Use this row component inside a `pn-accordion` to create an accordion group.\n \n Note: you can use the `pn-accordion-row` without the parent accordion.\n * But you will have to style the gap between each row.\n \n @slot label - Include your own HTML as the label.\n * ```\n * <h3 slot=\"label\">Custom title</h3>\n * ```\n /\n@Component({\n tag: 'pn-accordion-row',\n styleUrl: 'pn-accordion-row.scss',\n})\nexport class PnAccordionRow {\n private details: HTMLDetailsElement;\n private summary: HTMLElement;\n private content: HTMLDivElement;\n private animation: Animation;\n\n private readonly defaultAnimationDuration: number = 400;\n private animationDuration: number = this.defaultAnimationDuration;\n\n @Element() hostElement: HTMLElement;\n\n @State() isClosing = false;\n @State() isExpanding = false;\n\n /* The label/title of the accordion row, you can also pass a slot with the name \"label\" if you want to put custom HTML content in there. /\n @Prop({ mutable: true }) label: string;\n /* The open/close status of the accordion row. /\n @Prop({ mutable: true }) state?: boolean = false;\n\n /* Optional unique id for the `summary` element. @category ID /\n @Prop() buttonid?: string;\n /* Optional unique id for the `div` element containing the content. @category ID /\n @Prop() contentid?: string;\n /* Optional prop that removes the default white background on the accordion row /\n @Prop() transparent: boolean = false;\n\n /* Dispatched every time the row is toggled. Includes the row element and the boolean `state` prop. /\n @Event() togglerow: EventEmitter<{ element: HTMLElement; state: Boolean }>;\n\n /* Internal function for closing rows when using the `single` prop on the `pn-accordion`. */\n @Listen('rowstate')\n handleRowState(event: CustomEvent) {\n if (event.detail !== this.state) {\n this.details.style.overflow = 'hidden';\n this.closeAccordion();\n }\n }\n\n componentWillLoad() {\n const slottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.label = slottedLabel ? null : this.label;\n }\n\n private toggleOpen(open?: boolean) {\n const state = open ?? !this.state;\n if (this.state !== open) this.togglerow.emit({ element: this.details, state });\n this.state = state;\n }\n\n private clickHandler(e: MouseEvent) {\n e.preventDefault();\n\n this.details.style.overflow = 'hidden';\n\n if (this.isClosing \|\| !this.state) this.openAccordion();\n else if (this.isClosing \|\| this.state) this.closeAccordion();\n\n const { x, width, y, top } = this.hostElement.getBoundingClientRect();\n const clientCor = e.clientX === 0 && e.clientY === 0 ? { clientX: x + width - 24, clientY: y - top } : e;\n\n ripple(clientCor, this.hostElement, '.pn-accordion-row-text');\n }\n\n private openAccordion() {\n this.details.style.height = `${this.details.offsetHeight}px`;\n this.toggleOpen(true);\n\n requestAnimationFrame(() => {\n this.isExpanding = true;\n\n const startHeight = `${this.details.offsetHeight}px`;\n const endHeight = `${this.summary.offsetHeight + this.content.offsetHeight}px`;\n\n this.cancelAnimations();\n\n this.animate(true, startHeight, endHeight);\n });\n }\n\n private closeAccordion() {\n this.isClosing = true;\n\n const startHeight = `${this.details.offsetHeight}px`;\n const endHeight = `${this.summary.offsetHeight}px`;\n\n this.cancelAnimations();\n\n this.animate(false, startHeight, endHeight);\n }\n\n private animate(open: boolean, startHeight: string, endHeight: string) {\n if (reduceMotion()) this.animationDuration = 0;\n else this.animationDuration = this.defaultAnimationDuration;\n\n this.animation = this.details.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\n this.animation.onfinish = () => this.animationFinish(open);\n\n this.animation.oncancel = () => {\n if (open) this.isExpanding = false;\n else this.isClosing = false;\n };\n }\n\n private animationFinish(open: boolean) {\n this.toggleOpen(open);\n this.cancelAnimations();\n\n this.isClosing = false;\n this.isExpanding = false;\n\n this.details.style.height = '';\n this.details.style.overflow = '';\n }\n\n private cancelAnimations() {\n if (this.animation) this.animation.cancel();\n }\n\n render() {\n return (\n <Host>\n <details class=\"pn-accordion-row\" open={this.state} ref={(el: HTMLDetailsElement) => (this.details = el)}>\n <summary\n id={this.buttonid}\n class=\"pn-accordion-row-summary\"\n onClick={e => this.clickHandler(e)}\n ref={el => (this.summary = el)}\n >\n <div class=\"pn-accordion-row-text\" data-transparent={this.transparent}>\n {this.label ? this.label : ''}\n <slot name=\"label\" />\n\n <pn-icon class=\"pn-accordion-row-icon\" icon={chevron_down} />\n </div>\n </summary>\n\n <div id={this.contentid} class=\"pn-accordion-row-content\" ref={(el: HTMLDivElement) => (this.content = el)}>\n <slot />\n </div>\n </details>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-accordion-row.js","mappings":"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","names":["PnAccordionRow"],"sources":["src/components/content/pn-accordion/row/pn-accordion-row.scss?tag=pn-accordion-row","src/components/content/pn-accordion/row/pn-accordion-row.tsx"],"sourcesContent":["@use 'src/globals/main';\n\npn-accordion-row {\n position: relative;\n margin: 0 -0.25em 0;\n}\n\npn-accordion-row .pn-accordion-row {\n width: 100%;\n display: flex;\n flex-direction: column;\n\n &-summary {\n color: main.$gray900;\n position: relative;\n border: none;\n outline: 0;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n width: 100%;\n padding: 0.25em;\n font-size: 1em;\n font-weight: 400;\n border-radius: 0.5em;\n\n list-style: none;\n\n &:hover > .pn-accordion-row-text {\n background-color: main.$blue50;\n }\n\n &:focus-visible > .pn-accordion-row-text {\n @include main.pn-focus-visible();\n }\n\n &::-webkit-details-marker {\n display: none;\n }\n }\n\n &-text {\n position: relative;\n overflow: hidden;\n display: flex;\n align-items: center;\n padding: 0.75em;\n background-color: main.$white;\n border-radius: 0.5em;\n -webkit-tap-highlight-color: transparent;\n\n &[data-transparent] {\n background-color: transparent;\n }\n\n @include main.pn-focus-base();\n @include main.pn-transition('background-color, outline-color');\n @include main.pn-ripple(main.$blue700);\n }\n\n &-icon {\n margin-left: auto;\n flex-shrink: 0;\n @include main.pn-transition('transform');\n path {\n fill: main.$blue700;\n }\n }\n\n &[open] .pn-accordion-row-icon {\n transform: rotate(-180deg);\n }\n\n &-content {\n color: main.$gray900;\n display: block;\n padding: 1em;\n }\n}\n","import { Component, h, Host, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\nimport { angle_down } from 'pn-design-assets/pn-assets/icons.js';\nimport { reduceMotion, ripple } from '@/index';\n\n/*\n Use this row component inside a `pn-accordion` to create an accordion group.\n \n Note: you can use the `pn-accordion-row` without the parent accordion.\n * But you will have to style the gap between each row.\n \n @slot label - Include your own HTML as the label.\n * ```\n * <h3 slot=\"label\">Custom title</h3>\n * ```\n /\n@Component({\n tag: 'pn-accordion-row',\n styleUrl: 'pn-accordion-row.scss',\n})\nexport class PnAccordionRow {\n private details: HTMLDetailsElement;\n private summary: HTMLElement;\n private content: HTMLDivElement;\n private animation: Animation;\n\n private readonly defaultAnimationDuration: number = 400;\n private animationDuration: number = this.defaultAnimationDuration;\n\n @Element() hostElement: HTMLElement;\n\n @State() isClosing = false;\n @State() isExpanding = false;\n\n /* The label/title of the accordion row, you can also pass a slot with the name \"label\" if you want to put custom HTML content in there. /\n @Prop({ mutable: true }) label: string;\n /* The open/close status of the accordion row. /\n @Prop({ mutable: true }) state?: boolean = false;\n\n /* Optional unique id for the `summary` element. @category ID /\n @Prop() buttonid?: string;\n /* Optional unique id for the `div` element containing the content. @category ID /\n @Prop() contentid?: string;\n /* Optional prop that removes the default white background on the accordion row /\n @Prop() transparent: boolean = false;\n\n /* Dispatched every time the row is toggled. Includes the row element and the boolean `state` prop. /\n @Event() togglerow: EventEmitter<{ element: HTMLElement; state: Boolean }>;\n\n /* Internal function for closing rows when using the `single` prop on the `pn-accordion`. */\n @Listen('rowstate')\n handleRowState(event: CustomEvent) {\n if (event.detail !== this.state) {\n this.details.style.overflow = 'hidden';\n this.closeAccordion();\n }\n }\n\n componentWillLoad() {\n const slottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.label = slottedLabel ? null : this.label;\n }\n\n private toggleOpen(open?: boolean) {\n const state = open ?? !this.state;\n if (this.state !== open) this.togglerow.emit({ element: this.details, state });\n this.state = state;\n }\n\n private clickHandler(e: MouseEvent) {\n e.preventDefault();\n\n this.details.style.overflow = 'hidden';\n\n if (this.isClosing \|\| !this.state) this.openAccordion();\n else if (this.isClosing \|\| this.state) this.closeAccordion();\n\n const { x, width, y, top } = this.hostElement.getBoundingClientRect();\n const clientCor = e.clientX === 0 && e.clientY === 0 ? { clientX: x + width - 24, clientY: y - top } : e;\n\n ripple(clientCor, this.hostElement, '.pn-accordion-row-text');\n }\n\n private openAccordion() {\n this.details.style.height = `${this.details.offsetHeight}px`;\n this.toggleOpen(true);\n\n requestAnimationFrame(() => {\n this.isExpanding = true;\n\n const startHeight = `${this.details.offsetHeight}px`;\n const endHeight = `${this.summary.offsetHeight + this.content.offsetHeight}px`;\n\n this.cancelAnimations();\n\n this.animate(true, startHeight, endHeight);\n });\n }\n\n private closeAccordion() {\n this.isClosing = true;\n\n const startHeight = `${this.details.offsetHeight}px`;\n const endHeight = `${this.summary.offsetHeight}px`;\n\n this.cancelAnimations();\n\n this.animate(false, startHeight, endHeight);\n }\n\n private animate(open: boolean, startHeight: string, endHeight: string) {\n if (reduceMotion()) this.animationDuration = 0;\n else this.animationDuration = this.defaultAnimationDuration;\n\n this.animation = this.details.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\n this.animation.onfinish = () => this.animationFinish(open);\n\n this.animation.oncancel = () => {\n if (open) this.isExpanding = false;\n else this.isClosing = false;\n };\n }\n\n private animationFinish(open: boolean) {\n this.toggleOpen(open);\n this.cancelAnimations();\n\n this.isClosing = false;\n this.isExpanding = false;\n\n this.details.style.height = '';\n this.details.style.overflow = '';\n }\n\n private cancelAnimations() {\n if (this.animation) this.animation.cancel();\n }\n\n render() {\n return (\n <Host>\n <details class=\"pn-accordion-row\" open={this.state} ref={(el: HTMLDetailsElement) => (this.details = el)}>\n <summary\n id={this.buttonid}\n class=\"pn-accordion-row-summary\"\n onClick={e => this.clickHandler(e)}\n ref={el => (this.summary = el)}\n >\n <div class=\"pn-accordion-row-text\" data-transparent={this.transparent}>\n {this.label ? this.label : ''}\n <slot name=\"label\" />\n\n <pn-icon class=\"pn-accordion-row-icon\" icon={angle_down} />\n </div>\n </summary>\n\n <div id={this.contentid} class=\"pn-accordion-row-content\" ref={(el: HTMLDivElement) => (this.content = el)}>\n <slot />\n </div>\n </details>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -4,8 +4,8 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { u as uuidv4, k as awaitTopbar, e as en, r as reduceMotion, j as getTotalHeightOffset, h as getMenuWidth, o as ripple, i as isSmallScreen } from './helpers.js';
-import { c as chevron_down } from './chevron_down.js';
-import { c as chevron_left, a as chevron_right } from './chevron_right.js';
+import { a as angle_down } from './angle_down.js';
+import { a as angle_left, b as angle_right } from './angle_right.js';
 import { o as open_in_new } from './open_in_new.js';
 import { d as defineCustomElement$4 } from './pn-button2.js';
 import { d as defineCustomElement$3 } from './pn-icon2.js';
@@ -113,20 +113,6 @@ const PnActionMenu$1 = /*@__PURE__*/ proxyCustomElement(class PnActionMenu exten
     translate(prop) {
         return translations[prop][this.language || en];
     }
-    globalEvents = (event) => {
-        const target = event.target;
-        const isWithinActionMenu = target?.closest(this.hostElement.localName);
-        if (!isWithinActionMenu)
-            this.closeEachSubMenu(true);
-    };
-    addGlobalEventListeners() {
-        const root = this.hostElement.getRootNode();
-        root.addEventListener('click', this.globalEvents);
-    }
-    removeGlobalEventListeners() {
-        const root = this.hostElement.getRootNode();
-        root.removeEventListener('click', this.globalEvents);
-    }
     /** Open/close the action menu. */
     toggleActionMenu(state) {
         this.open = state ?? !this.open;
@@ -196,24 +182,11 @@ const PnActionMenu$1 = /*@__PURE__*/ proxyCustomElement(class PnActionMenu exten
     }
     setOffset() {
         const data = this.getRect(this.hostElement);
-        const sideMenuWidth = getMenuWidth();
-        // Calculate potential menu position
-        const menuLeft = data.left;
-        const menuRight = data.left + this.menuWidth;
-        // Define boundaries
-        const leftBoundary = sideMenuWidth + 16; // Left menu + buffer
-        const rightBoundary = innerWidth - 16; // Right edge - buffer
-        let offset = 0;
-        // Check if menu would overlap left menu or go off left edge
-        if (menuLeft < leftBoundary) {
-            offset = leftBoundary - menuLeft;
-        }
-        // Check if menu would go off right edge
-        else if (menuRight > rightBoundary) {
-            offset = rightBoundary - menuRight;
-        }
+        const fullWidth = data.left - getMenuWidth() + this.menuWidth;
+        const isWide = fullWidth > innerWidth;
+        const offset = isWide ? fullWidth - innerWidth + 16 : 0;
         if (this.menuContainer)
-            this.menuContainer.style.setProperty('--pn-action-menu-offset', `${offset}px`);
+            this.menuContainer.style.setProperty('--pn-action-menu-offset', `-${offset}px`);
     }
     getListId(option) {
         return `pn-menu-${option.value}-list`;
@@ -224,7 +197,7 @@ const PnActionMenu$1 = /*@__PURE__*/ proxyCustomElement(class PnActionMenu exten
     getTriggerIcon() {
         if (this.button?.icon)
             return;
-        return chevron_down;
+        return angle_down;
     }
     /** Set the path of open sub menus. */
     getSubMenuPath(options, value, path = []) {
@@ -240,9 +213,8 @@ const PnActionMenu$1 = /*@__PURE__*/ proxyCustomElement(class PnActionMenu exten
         }
         return null;
     }
-    closeEachSubMenu(preventFocus = false) {
-        if (!preventFocus)
-            this.menuTrigger?.querySelector('button')?.focus({ preventScroll: true });
+    closeEachSubMenu() {
+        this.menuTrigger?.querySelector('button')?.focus({ preventScroll: true });
         const interval = setInterval(() => {
             if (this.smallMenu || this.activeSubmenu.length === 0) {
                 clearInterval(interval);
@@ -270,7 +242,6 @@ const PnActionMenu$1 = /*@__PURE__*/ proxyCustomElement(class PnActionMenu exten
             this.closeGrid();
     }
     openGrid() {
-        this.addGlobalEventListeners();
         const list = this.getRect(this.menuList);
         const { clientHeight } = this.menuContainer;
         const height = this.isClosing ? clientHeight : 0;
@@ -279,7 +250,6 @@ const PnActionMenu$1 = /*@__PURE__*/ proxyCustomElement(class PnActionMenu exten
         this.animateGrid(true, `${height}px`, `${list.height}px`);
     }
     closeGrid() {
-        this.removeGlobalEventListeners();
         const list = this.getRect(this.menuList);
         const { clientHeight } = this.menuContainer;
         const height = this.isExpanding ? clientHeight : list.height;
@@ -370,7 +340,7 @@ const PnActionMenu$1 = /*@__PURE__*/ proxyCustomElement(class PnActionMenu exten
         return Boolean(this.activeSubmenu[this.activeSubmenu.length - 1] === value);
     }
     getOptionTrailing(option) {
-        const useButtonIcon = option.options?.length && chevron_right;
+        const useButtonIcon = option.options?.length && angle_right;
         const useTrailingIcon = option.trailingIcon;
         const useLinkIcon = option.target === '_blank' && open_in_new;
         /** If the user has defined a trialing icon, use it first. */
@@ -412,7 +382,7 @@ const PnActionMenu$1 = /*@__PURE__*/ proxyCustomElement(class PnActionMenu exten
                 disabled: option.disabled,
             };
         const Tag = isLink ? 'a' : 'button';
-        return isGroup ? (h("div", { class: "pn-action-menu-group-label" }, h("p", { class: "pn-action-menu-p" }, option.label), option.helpertext && h("p", { class: "pn-action-menu-group-helpertext" }, option.helpertext))) : (h("div", { class: "pn-action-menu-item-content", "data-close": isCloseButton }, h(Tag, { id: this.getButtonId(option) + appendedId, class: "pn-action-menu-button", ...subMenuAttrs, ...attrs, tabIndex: this.open ? null : -1, onClick: event => this.optionSelect(option, event), onKeyDown: (event) => this.escButton(event, option) }, hasIcon && h("pn-icon", { icon: isCloseButton ? chevron_left : option.icon, color: "blue700" }), h("div", { class: "pn-action-menu-item-text" }, h("span", { class: "pn-action-menu-item-label" }, isCloseButton ? this.translate('BACK') : option.label), option.helpertext && !isLink && h("span", { class: "pn-action-menu-item-helpertext" }, option.helpertext)), trailingObject)));
+        return isGroup ? (h("div", { class: "pn-action-menu-group-label" }, h("p", { class: "pn-action-menu-p" }, option.label), option.helpertext && h("p", { class: "pn-action-menu-group-helpertext" }, option.helpertext))) : (h("div", { class: "pn-action-menu-item-content", "data-close": isCloseButton }, h(Tag, { id: this.getButtonId(option) + appendedId, class: "pn-action-menu-button", ...subMenuAttrs, ...attrs, tabIndex: this.open ? null : -1, onClick: event => this.optionSelect(option, event), onKeyDown: (event) => this.escButton(event, option) }, hasIcon && h("pn-icon", { icon: isCloseButton ? angle_left : option.icon, color: "blue700" }), h("div", { class: "pn-action-menu-item-text" }, h("span", { class: "pn-action-menu-item-label" }, isCloseButton ? this.translate('BACK') : option.label), option.helpertext && !isLink && h("span", { class: "pn-action-menu-item-helpertext" }, option.helpertext)), trailingObject)));
     }
     renderSub(option) {
         return (h("menu", { id: this.getListId(option), "aria-labelledby": this.getButtonId(option), class: "pn-action-menu-sub", "data-open": this.isSubmenuActive(option.value)?.toString(), "data-current": this.isCurrentSubMenu(option.value) }, this.smallMenu && (h("li", { class: "pn-action-menu-item" }, this.renderButton({
@@ -434,7 +404,7 @@ const PnActionMenu$1 = /*@__PURE__*/ proxyCustomElement(class PnActionMenu exten
         return (h("div", { id: this.menuListId, class: "pn-action-menu-container", role: "region", "aria-labelledby": this.menuButtonId, "data-open": this.open, "data-moving": this.isClosing || this.isExpanding, "data-upwards": this.upwards, "data-small": this.smallMenu, style: { height: '0px' }, ref: el => (this.menuContainer = el) }, h("menu", { class: "pn-action-menu-list", ref: el => (this.menuList = el), "data-current": this.isMenuActive() }, this.options?.map(option => this.renderMenuItem(option)))));
     }
     render() {
-        return (h(Host, { key: '474e0e58bfa5f3105b98e3bee9d2d0b39f450dac' }, h("div", { key: '262f0895ad57b5edeffa360530cda0a7144cfe33', id: this.menuId !== this.id ? this.menuId : null, class: "pn-action-menu" }, h("pn-button", { key: 'b77ec7bd057e59c795eea8a16db6cba68c5c527c', icon: this.getTriggerIcon(), ...this.button, buttonId: this.menuButtonId, tooltipUp: !this.upwards, ariahaspopup: "true", ariacontrols: this.open ? this.menuListId : null, ariaexpanded: this.open.toString(), "data-default-icon": !this.button?.icon, onPnClick: () => this.toggleActionMenu(), ref: el => (this.menuTrigger = el) }), this.renderMenu())));
+        return (h(Host, { key: '5a1638b9b0f880ebd9f3ebe2571df19c6b852baf' }, h("div", { key: '87bf62a943099ce0a556ade3ce3eb11eedb003b2', id: this.menuId !== this.id ? this.menuId : null, class: "pn-action-menu" }, h("pn-button", { key: 'a3024016a2a5962d9eefc3c4d617f946a3575c23', icon: this.getTriggerIcon(), ...this.button, buttonId: this.menuButtonId, tooltipUp: !this.upwards, ariahaspopup: "true", ariacontrols: this.open ? this.menuListId : null, ariaexpanded: this.open.toString(), "data-default-icon": !this.button?.icon, onPnClick: () => this.toggleActionMenu(), ref: el => (this.menuTrigger = el) }), this.renderMenu())));
     }
     static get watchers() { return {
         "options": ["handleOptions"],