@smileid/web-components 11.4.4 → 11.5.0

package/dist/esm/Navigation-nvehze1F.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Navigation-nvehze1F.js","sources":["../../lib/components/navigation/src/Navigation.js"],"sourcesContent":["import { t, getDirection } from '../../../domain/localisation';\n\nclass Navigation extends HTMLElement {\n  connectedCallback() {\n    const shadow = this.attachShadow({ mode: 'open' });\n    const direction = getDirection();\n    const hostPadding = '0px';\n    const buttonSize = '40px';\n    const buttonBackground = 'rgba(132, 130, 130, 0.9)';\n    const buttonBorder = '1px solid rgba(255, 255, 255, 0.1)';\n    const iconSize = '20px';\n    const iconColor = this.hasThemeColor ? this.themeColor : '#FFFFFF';\n    const focusColor = '#FFFFFF';\n\n    const style = document.createElement('style');\n    style.textContent = `\n:host {\n  display: flex;\n  max-inline-size: 100%;\n  justify-content: ${this.showBackButton ? 'space-between' : 'flex-end'};\n  direction: ${direction};\n  padding: var(--smileid-navigation-padding, ${hostPadding});\n  gap: 1rem;\n}\n\n:host([dir=\"rtl\"]) .back-button svg,\n:host .back-button svg[data-rtl=\"true\"] {\n  transform: scaleX(-1);\n}\n\nbutton {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  width: ${buttonSize};\n  height: ${buttonSize};\n  border-radius: 50%;\n  background: var(--smileid-navigation-button-bg, ${buttonBackground});\n  border: ${buttonBorder};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--smileid-navigation-icon-color, ${iconColor});\n  cursor: pointer;\n  padding: 0;\n  flex-shrink: 0;\n  transition: box-shadow 0.15s ease;\n}\n\nbutton:hover {\n  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.15);\n}\n\nbutton:focus-visible {\n  outline: 2px solid var(--smileid-navigation-focus-color, ${focusColor});\n  outline-offset: 3px;\n}\n\nbutton svg {\n  width: ${iconSize};\n  height: ${iconSize};\n}\n\n:host::part(back-button) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n:host::part(close-button) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  block-size: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  inline-size: 1px;\n}\n    `;\n\n    const backButton = document.createElement('button');\n    backButton.setAttribute('class', 'back-button');\n    backButton.setAttribute('part', 'back-button');\n    backButton.setAttribute('type', 'button');\n    backButton.setAttribute('aria-label', t('navigation.back'));\n    backButton.innerHTML = `\n      <svg\n        aria-hidden=\"true\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        data-rtl=\"${direction === 'rtl'}\"\n      >\n        <path\n          d=\"M19 12H5M5 12L12 19M5 12L12 5\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n      <span part=\"back-button-text\" class=\"visually-hidden\">${t('navigation.back')}</span>\n    `;\n\n    const closeButton = document.createElement('button');\n    closeButton.setAttribute('class', 'close-button');\n    closeButton.setAttribute('part', 'close-button');\n    closeButton.setAttribute('type', 'button');\n    closeButton.setAttribute(\n      'aria-label',\n      t('navigation.closeVerificationFrame'),\n    );\n    closeButton.innerHTML = `\n      <svg\n        aria-hidden=\"true\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M18 6L6 18M6 6L18 18\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    `;\n\n    shadow.appendChild(style);\n    if (this.showBackButton) shadow.appendChild(backButton);\n    shadow.appendChild(closeButton);\n\n    // Set language direction attribute on host for CSS selectors\n    this.setAttribute('dir', direction);\n\n    // Back Button Controls\n    this.backButton = backButton;\n    this.backButton.addEventListener('click', () => this.handleBack());\n\n    // Close Button Controls\n    this.closeButton = closeButton;\n    this.closeButton.addEventListener('click', () => this.handleClose());\n  }\n\n  disconnectedCallback() {\n    this.backButton.removeEventListener('click', () => this.handleBack());\n    this.closeButton.removeEventListener('click', () => this.handleClose());\n  }\n\n  handleBack() {\n    this.dispatchEvent(new CustomEvent('navigation.back'));\n  }\n\n  handleClose() {\n    this.dispatchEvent(new CustomEvent('navigation.close'));\n  }\n\n  get showBackButton() {\n    return !this.hasAttribute('hide-back');\n  }\n\n  get themeColor() {\n    return this.getAttribute('theme-color') || '#001096';\n  }\n\n  get hasThemeColor() {\n    return this.getAttribute('theme-color')?.trim();\n  }\n}\n\nif (\n  'customElements' in window &&\n  !window.customElements.get('smileid-navigation')\n) {\n  window.customElements.define('smileid-navigation', Navigation);\n}\n\nexport default Navigation;\n"],"names":["Navigation","shadow","direction","getDirection","hostPadding","buttonSize","buttonBackground","buttonBorder","iconSize","iconColor","focusColor","style","backButton","t","closeButton"],"mappings":"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"}