@ukic/web-components 3.12.0 → 3.13.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 (143) hide show
  1. package/dist/cjs/core.cjs.js +1 -1
  2. package/dist/cjs/helpers-478d1107.js.map +1 -1
  3. package/dist/cjs/ic-alert.cjs.entry.js +3 -3
  4. package/dist/cjs/ic-alert.cjs.entry.js.map +1 -1
  5. package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
  6. package/dist/cjs/ic-checkbox-group.cjs.entry.js +8 -4
  7. package/dist/cjs/ic-checkbox-group.cjs.entry.js.map +1 -1
  8. package/dist/cjs/ic-dialog.cjs.entry.js +35 -10
  9. package/dist/cjs/ic-dialog.cjs.entry.js.map +1 -1
  10. package/dist/cjs/ic-input-component-container_3.cjs.entry.js +12 -9
  11. package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -1
  12. package/dist/cjs/ic-navigation-item.cjs.entry.js +1 -1
  13. package/dist/cjs/ic-navigation-item.cjs.entry.js.map +1 -1
  14. package/dist/cjs/ic-page-header.cjs.entry.js +1 -1
  15. package/dist/cjs/ic-page-header.cjs.entry.js.map +1 -1
  16. package/dist/cjs/ic-status-tag.cjs.entry.js +1 -1
  17. package/dist/cjs/ic-status-tag.cjs.entry.js.map +1 -1
  18. package/dist/cjs/ic-step.cjs.entry.js +14 -13
  19. package/dist/cjs/ic-step.cjs.entry.js.map +1 -1
  20. package/dist/cjs/ic-stepper.cjs.entry.js +3 -2
  21. package/dist/cjs/ic-stepper.cjs.entry.js.map +1 -1
  22. package/dist/cjs/ic-top-navigation.cjs.entry.js +1 -1
  23. package/dist/cjs/ic-top-navigation.cjs.entry.js.map +1 -1
  24. package/dist/cjs/loader.cjs.js +1 -1
  25. package/dist/collection/components/ic-alert/ic-alert.css +13 -23
  26. package/dist/collection/components/ic-alert/ic-alert.js +2 -2
  27. package/dist/collection/components/ic-alert/ic-alert.js.map +1 -1
  28. package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js +34 -4
  29. package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js.map +1 -1
  30. package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.stories.js +163 -0
  31. package/dist/collection/components/ic-dialog/ic-dialog.js +36 -11
  32. package/dist/collection/components/ic-dialog/ic-dialog.js.map +1 -1
  33. package/dist/collection/components/ic-menu/ic-menu.js +12 -9
  34. package/dist/collection/components/ic-menu/ic-menu.js.map +1 -1
  35. package/dist/collection/components/ic-navigation-item/ic-navigation-item.css +9 -0
  36. package/dist/collection/components/ic-page-header/ic-page-header.css +4 -0
  37. package/dist/collection/components/ic-select/ic-select_(single).stories.js +74 -1
  38. package/dist/collection/components/ic-status-tag/ic-status-tag.css +1 -4
  39. package/dist/collection/components/ic-step/ic-step.js +16 -15
  40. package/dist/collection/components/ic-step/ic-step.js.map +1 -1
  41. package/dist/collection/components/ic-step/ic-step.types.js.map +1 -1
  42. package/dist/collection/components/ic-stepper/ic-stepper.js +5 -4
  43. package/dist/collection/components/ic-stepper/ic-stepper.js.map +1 -1
  44. package/dist/collection/components/ic-stepper/ic-stepper.stories.js +2 -1
  45. package/dist/collection/components/ic-top-navigation/ic-top-navigation.css +13 -10
  46. package/dist/collection/utils/types.js.map +1 -1
  47. package/dist/components/helpers.js.map +1 -1
  48. package/dist/components/ic-alert.js +3 -3
  49. package/dist/components/ic-alert.js.map +1 -1
  50. package/dist/components/ic-checkbox-group.js +9 -4
  51. package/dist/components/ic-checkbox-group.js.map +1 -1
  52. package/dist/components/ic-dialog.js +35 -10
  53. package/dist/components/ic-dialog.js.map +1 -1
  54. package/dist/components/ic-menu2.js +12 -9
  55. package/dist/components/ic-menu2.js.map +1 -1
  56. package/dist/components/ic-navigation-item.js +1 -1
  57. package/dist/components/ic-navigation-item.js.map +1 -1
  58. package/dist/components/ic-page-header.js +1 -1
  59. package/dist/components/ic-page-header.js.map +1 -1
  60. package/dist/components/ic-popover-menu.js.map +1 -1
  61. package/dist/components/ic-radio-option.js.map +1 -1
  62. package/dist/components/ic-status-tag.js +1 -1
  63. package/dist/components/ic-status-tag.js.map +1 -1
  64. package/dist/components/ic-step.js +14 -13
  65. package/dist/components/ic-step.js.map +1 -1
  66. package/dist/components/ic-stepper.js +3 -2
  67. package/dist/components/ic-stepper.js.map +1 -1
  68. package/dist/components/ic-top-navigation.js +1 -1
  69. package/dist/components/ic-top-navigation.js.map +1 -1
  70. package/dist/core/core.css +6 -6
  71. package/dist/core/core.esm.js +1 -1
  72. package/dist/core/core.esm.js.map +1 -1
  73. package/dist/core/p-0123dde7.entry.js.map +1 -1
  74. package/dist/core/p-19f9d292.entry.js +2 -0
  75. package/dist/core/p-19f9d292.entry.js.map +1 -0
  76. package/dist/core/p-45f743e4.entry.js +2 -0
  77. package/dist/core/p-45f743e4.entry.js.map +1 -0
  78. package/dist/core/{p-cf868a24.entry.js → p-511aa329.entry.js} +2 -2
  79. package/dist/core/p-511aa329.entry.js.map +1 -0
  80. package/dist/core/p-621b0770.entry.js +2 -0
  81. package/dist/core/p-621b0770.entry.js.map +1 -0
  82. package/dist/core/p-6f50d2e0.entry.js +2 -0
  83. package/dist/core/p-6f50d2e0.entry.js.map +1 -0
  84. package/dist/core/p-71c86e71.entry.js +2 -0
  85. package/dist/core/p-71c86e71.entry.js.map +1 -0
  86. package/dist/core/{p-d58ad080.entry.js → p-96a6cff2.entry.js} +2 -2
  87. package/dist/core/p-96a6cff2.entry.js.map +1 -0
  88. package/dist/core/{p-b1838ad8.entry.js → p-9f12b20c.entry.js} +2 -2
  89. package/dist/core/p-9f12b20c.entry.js.map +1 -0
  90. package/dist/core/p-a08c360b.entry.js +2 -0
  91. package/dist/core/p-a08c360b.entry.js.map +1 -0
  92. package/dist/core/{p-33789b23.entry.js → p-a97b8082.entry.js} +3 -3
  93. package/dist/core/p-a97b8082.entry.js.map +1 -0
  94. package/dist/core/p-b57e59b7.js.map +1 -1
  95. package/dist/esm/core.js +1 -1
  96. package/dist/esm/helpers-4ddac6ed.js.map +1 -1
  97. package/dist/esm/ic-alert.entry.js +3 -3
  98. package/dist/esm/ic-alert.entry.js.map +1 -1
  99. package/dist/esm/ic-button_3.entry.js.map +1 -1
  100. package/dist/esm/ic-checkbox-group.entry.js +8 -4
  101. package/dist/esm/ic-checkbox-group.entry.js.map +1 -1
  102. package/dist/esm/ic-dialog.entry.js +35 -10
  103. package/dist/esm/ic-dialog.entry.js.map +1 -1
  104. package/dist/esm/ic-input-component-container_3.entry.js +12 -9
  105. package/dist/esm/ic-input-component-container_3.entry.js.map +1 -1
  106. package/dist/esm/ic-navigation-item.entry.js +1 -1
  107. package/dist/esm/ic-navigation-item.entry.js.map +1 -1
  108. package/dist/esm/ic-page-header.entry.js +1 -1
  109. package/dist/esm/ic-page-header.entry.js.map +1 -1
  110. package/dist/esm/ic-status-tag.entry.js +1 -1
  111. package/dist/esm/ic-status-tag.entry.js.map +1 -1
  112. package/dist/esm/ic-step.entry.js +14 -13
  113. package/dist/esm/ic-step.entry.js.map +1 -1
  114. package/dist/esm/ic-stepper.entry.js +3 -2
  115. package/dist/esm/ic-stepper.entry.js.map +1 -1
  116. package/dist/esm/ic-top-navigation.entry.js +1 -1
  117. package/dist/esm/ic-top-navigation.entry.js.map +1 -1
  118. package/dist/esm/loader.js +1 -1
  119. package/dist/types/components/ic-checkbox-group/ic-checkbox-group.d.ts +5 -1
  120. package/dist/types/components/ic-dialog/ic-dialog.d.ts +2 -1
  121. package/dist/types/components/ic-step/ic-step.types.d.ts +1 -0
  122. package/dist/types/components.d.ts +9 -1
  123. package/dist/types/utils/types.d.ts +6 -2
  124. package/hydrate/index.js +80 -45
  125. package/hydrate/index.mjs +80 -45
  126. package/package.json +2 -2
  127. package/vscode-data.json +15 -0
  128. package/dist/core/p-33789b23.entry.js.map +0 -1
  129. package/dist/core/p-3e36f281.entry.js +0 -2
  130. package/dist/core/p-3e36f281.entry.js.map +0 -1
  131. package/dist/core/p-80e0f66e.entry.js +0 -2
  132. package/dist/core/p-80e0f66e.entry.js.map +0 -1
  133. package/dist/core/p-a1e2e029.entry.js +0 -2
  134. package/dist/core/p-a1e2e029.entry.js.map +0 -1
  135. package/dist/core/p-b1838ad8.entry.js.map +0 -1
  136. package/dist/core/p-c2d5e301.entry.js +0 -2
  137. package/dist/core/p-c2d5e301.entry.js.map +0 -1
  138. package/dist/core/p-cf868a24.entry.js.map +0 -1
  139. package/dist/core/p-d58ad080.entry.js.map +0 -1
  140. package/dist/core/p-e9d28e02.entry.js +0 -2
  141. package/dist/core/p-e9d28e02.entry.js.map +0 -1
  142. package/dist/core/p-fb69fbc0.entry.js +0 -2
  143. package/dist/core/p-fb69fbc0.entry.js.map +0 -1
@@ -1,2 +0,0 @@
1
- import{r as i,c as t,h as e,f as a,H as n,g as o}from"./p-8e4e97b4.js";import{z as s,D as r,g as d,f as l,y as c}from"./p-b57e59b7.js";import{C as v}from"./p-3b185c32.js";import{O as h}from"./p-426ec638.js";import"./p-bddf799a.js";const g='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;--navigation-link-colour:var(--ic-brand-text-color)}:host(:focus-within){z-index:var(--ic-z-index-navigation-item)}svg{width:var(--ic-space-xl);fill:var(--ic-brand-text-color)}.svg{margin-left:auto}.chevron-container svg,.chevron-container .svg{width:var(--ic-space-lg);height:var(--ic-space-lg)}.chevron-container{flex-grow:1}:host(.expandable.navigation-item) .link,:host(.expandable.navigation-item) ::slotted(a){padding-right:0}:host(.navigation-item) .link,:host(.navigation-item) ::slotted(a){height:calc(100% - var(--ic-space-xxs));width:-moz-fit-content;width:fit-content;color:var(--navigation-link-colour);display:flex;align-items:center;justify-content:center;padding:0 var(--ic-space-md) var(--ic-space-xxs);text-decoration:none;transition:var(--ic-easing-transition-fast);position:relative;white-space:nowrap}:host(.navigation-item) ::slotted(a){height:100%;font:var(--ic-font-label) !important;letter-spacing:var(--ic-font-letter-spacing-0pt025) !important;padding:0 var(--ic-space-md) !important}:host(.navigation-item-selected) .link::after,:host(.navigation-item-selected) ::slotted(a.active)::after,:host(.navigation-item-top-nav) ::slotted(a.active)::after{content:"";height:0.25rem;width:100%;position:absolute;bottom:0;background-color:var(--ic-top-navigation-theme)}:host(.navigation-item-selected.navigation-item-page-header) ::slotted(a.active)::after,:host(.navigation-item-selected.navigation-item-page-header) .link::after,:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,:host(.navigation-item-top-nav-child) ::slotted(a.active)::after{content:none}:host(.navigation-item-side-menu-selected) .link,:host(.navigation-item-side-menu) ::slotted(a.active),:host(.navigation-item-top-nav-child) ::slotted(a.active){box-shadow:none}:host(.navigation-item) .link:hover:not(:focus){background-color:var(--ic-brand-hover);cursor:pointer}:host(.navigation-item:not(.navigation-item-page-header,.navigation-item-side-menu,.navigation-item-top-nav-child)) ::slotted(a:hover:not(:focus)),:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus){background-color:var(--ic-brand-hover) !important}:host(.navigation-item:not(.navigation-item-top-nav-child,.navigation-item-side-menu,.navigation-item-top-nav-child-selected .navigation-item-side-menu-selected)) .focus-indicator:focus-within{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius)}:host(.navigation-item) .link:focus,:host(.navigation-item) ::slotted(a:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline);outline-offset:calc(-1 * (var(--ic-space-xxxs) + var(--ic-space-1px) / 2))}:host(.navigation-item-selected) .link:focus,:host(.navigation-item) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline);outline-offset:calc(-1 * (var(--ic-space-xxxs) + var(--ic-space-1px) / 2))}:host(.navigation-item) .link:active:not(:focus),:host(.navigation-item) ::slotted(a:active:not(:focus)){background-color:var(--ic-brand-active)}:host(.navigation-item-side-menu) .link,:host(.navigation-item-side-menu) ::slotted(a){min-height:2.5rem;height:auto;width:100%;box-sizing:border-box;color:var(--ic-top-navigation-nav-item);--ic-typography-color:var(--ic-top-navigation-nav-item);display:flex;align-items:center;justify-content:flex-start;text-decoration:none;text-wrap:wrap;white-space:normal;transition:box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-fast)}:host(.navigation-item-top-nav-child) ::slotted(svg),:host(.navigation-item-side-menu) ::slotted(svg),:host(.navigation-item-page-header) ::slotted(svg){fill:var(--ic-color-text-primary)}:host(.navigation-item-side-menu) ::slotted(a){font:var(--ic-font-body) !important;letter-spacing:var(--ic-font-letter-spacing-0pt005) !important;transition:box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast)}:host(.navigation-item-side-menu) .link:hover:not(:focus){background-color:var(--ic-top-navigation-nav-item-hover)}:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)){background-color:var(--ic-top-navigation-nav-item-hover) !important}:host(.navigation-item-side-menu) .focus-indicator:focus-within{box-shadow:none}:host(.navigation-item-side-menu) .link:focus,:host(.navigation-item-side-menu) ::slotted(a:focus){box-shadow:var(--ic-border-focus-inset) !important;width:auto;border-radius:var(--ic-border-radius-inset) !important}:host(.navigation-item-side-menu-selected) .link,:host(.navigation-item-side-menu-selected) ::slotted(a){transition:box-shadow var(--ic-easing-transition-slow),\n background-color var(--ic-easing-transition-slow)}:host(.navigation-item-side-menu-selected) .link:focus,:host(.navigation-item-side-menu) ::slotted(a.active:focus),:host(.navigation-item-top-nav-child) ::slotted(a.active:focus){margin-left:var(--ic-space-xs) !important;padding-left:var(--ic-space-xs) !important}:host(.navigation-item-top-nav-child) .link,:host(.navigation-item-top-nav-child) ::slotted(a){height:2.5rem;width:calc(100% - var(--ic-space-xl));min-width:9.063rem;color:var(--ic-top-navigation-nav-item);display:flex;align-items:center;justify-content:flex-start;padding:0 var(--ic-space-md) !important;text-decoration:none;position:relative;transition:box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-slow)}:host(.navigation-item-top-nav-child) ::slotted(a){font:var(--ic-font-body) !important;letter-spacing:var(--ic-font-letter-spacing-0pt005) !important}:host(.navigation-item-top-nav-child) .link:hover:not(:focus),:host(.navigation-item-top-nav-child) ::slotted(a:hover:not(:focus)){background-color:var(--ic-top-navigation-nav-item-hover) !important}:host(.navigation-item-top-nav-child) .link:focus,:host(.navigation-item-top-nav-child) ::slotted(a:focus){z-index:1;outline:var(--ic-hc-focus-outline);border-radius:var(--ic-border-radius-inset);box-shadow:var(--ic-border-focus-inset);transition:border-radius 0s, box-shadow var(--ic-transition-duration-fast)}:host(.navigation-item-top-nav-child) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}:host(.navigation-item-side-menu) .link:active:not(:focus){background-color:var(--ic-top-navigation-nav-item-pressed)}:host(.navigation-item-top-nav-child) .link:active:not(:focus),:host(.navigation-item-top-nav-child) ::slotted(a:active:not(:focus)){outline:var(--ic-hc-focus-outline);background-color:var(--ic-top-navigation-nav-item-pressed)}:host(.navigation-item-top-nav-child) ::slotted(a:active:not(:focus)),:host(.navigation-item-side-menu) ::slotted(a:active:not(:focus)){background-color:var(--ic-top-navigation-nav-item-pressed) !important}:host(.navigation-item-side-menu-selected) *,:host(.navigation-item-top-nav-child-selected) *,:host(.navigation-item-side-menu) ::slotted(a.active),:host(.navigation-item-top-nav-child) ::slotted(a.active){font-weight:700 !important}:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,:host(.navigation-item-top-nav-child-selected) .link::before,:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu) ::slotted(a.active)::before,:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before{content:"";position:absolute;left:0;width:var(--ic-space-xs);height:inherit;min-height:2.5rem;background-color:var(--ic-top-navigation-nav-item-banner);transition:left 0s}:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu-selected) .link:focus::before{margin-top:var(--ic-space-xxs)}:host(.navigation-item-top-nav-child-selected) .link:focus{margin-left:var(--ic-space-xs);margin-right:calc(-1 * var(--ic-space-xs));padding-left:var(--ic-space-xs) !important}:host(.navigation-item-top-nav-child-selected) .link:focus::before{left:calc(-1 * var(--ic-space-xs));z-index:1}:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu) ::slotted(a.active)::before,:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before{z-index:1}:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before,:host(.navigation-item-top-nav-child) ::slotted(a.active:focus)::before{left:calc(-1 * var(--ic-space-xs))}:host(.navigation-item-side-menu-selected) .link::after{display:none}:host(.navigation-item-side-nav-collapsed) .link{height:100%}:host(.navigation-item-side-nav-collapsed) ::slotted(svg),:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(svg){margin:auto;pointer-events:none}:host(.navigation-item-side-nav-collapsed) .icon,:host(.navigation-item-side-nav-collapsed-with-label) .icon,:host(.navigation-item-side-nav-collapsed-with-label) ic-typography{align-items:center;padding:0;margin:auto 0;width:-moz-fit-content;width:fit-content;pointer-events:none}:host(.navigation-item-side-nav-collapsed-with-label) ic-typography{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center}:host(.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content;padding:var(--ic-space-xs) !important;gap:var(--ic-space-xxs)}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) ::slotted(a){height:auto !important;gap:0;width:auto;padding:var(--ic-space-xs) !important}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:block;text-align:center}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link ic-typography{opacity:1;min-width:-moz-min-content;min-width:min-content}:host(.navigation-item-side-nav-collapsed) svg,:host(.navigation-item-side-nav-collapsed-with-label) svg{display:none}::slotted(svg){fill:var(--ic-brand-text-color);height:var(--ic-space-lg);width:var(--ic-space-lg);margin-left:var(--ic-space-md)}.icon{height:1.5rem;width:var(--ic-space-xxl);margin-left:calc(-1 * var(--ic-space-md));flex:0 1 0%;position:relative}.icon>::slotted(*){margin-left:var(--ic-space-md) !important;margin-right:var(--ic-space-xs)}.inline-badge{margin-left:var(--ic-space-xs)}.badge{margin-left:0}:host(.navigation-item-side-nav-collapsed) .icon>::slotted(*){margin:auto !important}:host(.navigation-item-side-nav) .icon>::slotted(*){margin-right:0}:host(.navigation-item-side-nav) .link,:host(.navigation-item-side-nav) ::slotted(a){height:var(--navigation-item-height, 4rem);min-height:var(--navigation-item-min-height);width:var(--navigation-item-width, auto);justify-content:var(--navigation-item-justify-content);display:flex;gap:var(--ic-space-xs);box-sizing:border-box;color:var(--navigation-item-child-color) !important;text-decoration:none !important;white-space:nowrap;padding:0 var(--ic-space-md);text-wrap:wrap}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a){height:var(--navigation-item-child-height);width:var(--navigation-group-width);color:var(--navigation-item-child-color) !important;display:flex;gap:0.625rem;box-sizing:border-box;min-width:0;transition:box-shadow var(--ic-easing-transition-fast);text-decoration:none !important;white-space:nowrap}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:focus,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a:focus){box-shadow:var(--ic-border-focus-dark)}:host(.navigation-item-side-nav.navigation-item-side-menu) .link:active{background-color:var(--navigation-item-child-active)}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:active,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a:active){background-color:var(--navigation-item-child-active)}:host(.navigation-item-side-nav) a.link ic-typography,:host(.navigation-item-side-nav.navigation-item-top-nav-child) a.link ic-typography,:host(.navigation-item-side-nav) div.link ic-typography,:host(.navigation-item-side-nav.navigation-item-top-nav-child) div.link ic-typography,.navigation-item-side-nav-slotted-text{opacity:var(--navigation-item-label-opacity);transition:opacity var(--ic-easing-transition-slow);white-space:wrap;text-overflow:ellipsis;overflow:hidden}:host(.navigation-item-side-nav.navigation-item-selected) .link,:host(.navigation-item-side-nav.navigation-item) ::slotted(a.active){box-shadow:inset 0.313rem 0 0 var(--ic-brand-text-color)}:host(.navigation-item-side-nav.navigation-item-selected) .link::before,:host(.navigation-item-side-nav) ::slotted(a.active)::before{content:"";display:block;position:absolute;inset:0 0 0 0.313rem;border-radius:0.688rem !important;transition:var(--ic-easing-transition-slow)}:host(.navigation-item-side-nav.navigation-item-selected) .link:focus::before,:host(.navigation-item-side-nav) ::slotted(a.active:focus)::before{box-shadow:var(--ic-border-focus-inset)}:host(:not(.navigation-item-side-nav-collapsed).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link{opacity:var(--navigation-item-label-opacity);height:auto}:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) ::slotted(a){min-width:var(--navigation-group-item-min-width);padding:var(--ic-space-xs) !important;height:auto;gap:0}:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:block}:host(.navigation-item-side-nav.navigation-item-selected) .link::after,:host(.navigation-item-side-nav) ::slotted(a.active)::after{display:none}:host(.navigation-item-side-nav.navigation-item) .link:focus,:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background-color:transparent}:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,:host(.navigation-item-side-nav) ::slotted(a.active:focus){margin:0 auto;box-shadow:inset 0.313rem 0 0 var(--ic-brand-text-color);border-radius:0}:host(.navigation-item-page-header).link,:host(.navigation-item-page-header) a,:host(.navigation-item-page-header) ::slotted(a){height:2.5rem !important;color:var(--ic-color-text-primary) !important;transition:all var(--ic-easing-transition-fast) !important;box-shadow:rgba(23 89 188 / 0%) !important}:host(.navigation-item-page-header.navigation-item-selected) .link::after,:host(.navigation-item-page-header) ::slotted(a.active)::after{content:" " !important;position:absolute;bottom:0;left:0;right:0;height:var(--ic-space-xxs);background-color:var(--ic-action-default) !important}:host(.navigation-item-page-header) .link:hover,:host(.navigation-item-page-header) ::slotted(.link:hover),:host(.navigation-item-page-header) ::slotted(a:hover),:host(.navigation-item-page-header) .link:hover:not(:focus){background-color:var(--ic-action-default-bg-hover) !important;cursor:pointer}:host(.navigation-item-page-header) .link:focus,:host(.navigation-item-page-header) ::slotted(a:focus){box-shadow:var(--ic-border-focus)}:host(.navigation-item-page-header) .link:active,:host(.navigation-item-page-header) ::slotted(a:active){background-color:var(--ic-action-default-bg-pressed) !important}:host(.navigation-item-page-header.navigation-item-selected) .link:focus::after,:host(.navigation-item-page-header) ::slotted(a.active:focus)::after{border-bottom-left-radius:var(--ic-border-radius);border-bottom-right-radius:var(--ic-border-radius)}:host(.navigation-item-page-header.navigation-item-selected.with-transition) .link,:host(.navigation-item-page-header.navigation-item-selected.with-transition) ::slotted(a.active){transition:all var(--ic-easing-transition-fast),\n border-color var(--ic-transition-duration-fast)}:host(.navigation-item-page-header) ::slotted(a.active)::before,:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,:host(.navigation-item-page-header.navigation-item-selected) .link:focus::before{display:none}.open-in-new-icon{flex:1}.open-in-new-icon svg{margin-top:var(--ic-space-xxs);padding-left:var(--ic-space-xs)}:host(.navigation-item-side-nav) .open-in-new-icon{margin-left:calc(-1 * var(--ic-space-xs))}:host(.navigation-item-top-nav) .open-in-new-icon svg,:host(.navigation-item-page-header) .open-in-new-icon svg,:host(.navigation-item-side-nav) .open-in-new-icon svg{height:0.875rem;width:0.875rem}:host(.navigation-item-side-menu) .open-in-new-icon svg,:host(.navigation-item-top-nav-child) .open-in-new-icon svg{height:var(--ic-space-md);width:var(--ic-space-md)}:host(.navigation-item-page-header) .open-in-new-icon svg,:host(.navigation-item-top-nav-child) .open-in-new-icon svg,:host(.navigation-item-side-menu) .open-in-new-icon svg{fill:var(--ic-color-text-primary)}@media (forced-colors: active){.open-in-new-icon svg{fill:currentcolor}}';const m=g;const p=class{constructor(n){i(this,n);this.childBlur=t(this,"childBlur",7);this.navItemClicked=t(this,"navItemClicked",7);this.isInitialRender=true;this.hostMutationObserver=null;this.ANIMATION_DURATION=parseInt(s("--ic-transition-duration-slow"))||0;this.ARIA_LABEL_STRING="aria-label";this.isInSideNav=false;this.deviceSize=r.XL;this.focusStyle=d();this.inTopNavSideMenu=false;this.isSideNavMobile=false;this.isTopNavChild=false;this.sideNavExpanded=false;this.ariaLabel="";this.collapsedIconLabel=false;this.displayNavigationTooltip=false;this.download=false;this.expandable=false;this.href="";this.selected=false;this.theme="inherit";this.displayDefaultNavigationItem=(i,t,a,n,o,s,r)=>{const d=this.isTopNavChild||this.inTopNavSideMenu?"body":"label";const l=this.expandable&&e("div",{class:{svg:true},innerHTML:v});const c=this.el.querySelector('[slot="badge"]');const g=c&&e("div",{class:"inline-badge"},e("slot",{name:"badge"}));const m=this.el.querySelector('[slot="icon"]')&&e("div",{class:"icon"},e("slot",{name:"icon"}),this.isInSideNav&&g);return i!==""?e("a",{href:i,target:n,rel:o,hreflang:a,referrerPolicy:s,download:r!==false?r:null,class:"link",ref:i=>this.itemEl=i,part:"link","aria-label":this.ariaLabel?this.ariaLabel:null},m,e("ic-typography",{variant:d},t),n==="_blank"&&e("span",{class:"open-in-new-icon",innerHTML:h}),g,e("div",{class:"chevron-container"},l)):e("div",{tabindex:"0",class:"link",ref:i=>this.itemEl=i},m,e("ic-typography",{variant:d},t),l,g)};this.topNavResizedHandler=({detail:i})=>{var t;const{size:e}=i;if(e!==this.deviceSize){this.deviceSize=e;this.inTopNavSideMenu=e<=(((t=this.parentEl)===null||t===void 0?void 0:t.customMobileBreakpoint)||r.L)}};this.sideNavExpandHandler=({detail:i})=>{const{sideNavExpanded:t,sideNavMobile:e}=i;this.sideNavExpanded=t;this.isSideNavMobile=e;this.sideNavToggleTooltip(!t&&!e)};this.handleBlur=({relatedTarget:i})=>{if(i===null||i.tagName!=="IC-NAVIGATION-ITEM"){this.childBlur.emit()}};this.handleClick=()=>this.navItemClicked.emit();this.hostMutationCallback=i=>{let t=false;i.forEach((({attributeName:i})=>{if(i){const e=this.el.getAttribute(i);if(e&&i===this.ARIA_LABEL_STRING){this.ariaLabel=e;t=true}}}));if(t){a(this)}};this.generateTooltipLabel=()=>{var i;if(this.label){return this.label}if(this.navigationSlot){return this.navigationSlot.textContent||""}return((i=this.el.children[0])===null||i===void 0?void 0:i.textContent)||""};this.renderNavigationItemContent=()=>{if(!this.label&&!this.navigationSlot)return e("slot",null);return this.label?this.displayDefaultNavigationItem(this.href,this.label,this.hreflang,this.target,this.rel,this.referrerpolicy,this.download):e("slot",{name:"navigation-item"})};this.sideNavToggleTooltip=i=>{var t;const e=(t=this.el.shadowRoot)===null||t===void 0?void 0:t.querySelector("ic-tooltip");const a="tooltip-navigation-item-side-nav-collapsed";let n;if(!e)return;if(i){e.displayTooltip(false);n=setTimeout((()=>{e.classList.add(a)}),this.ANIMATION_DURATION)}else{clearTimeout(n);e.classList.remove(a)}}}navigationTypeChangeHandler(){this.isInSideNav=this.navigationType==="side"}disconnectedCallback(){var i,t,e;if(this.isInSideNav){(i=this.parentEl)===null||i===void 0?void 0:i.removeEventListener("icSideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){(t=this.parentEl)===null||t===void 0?void 0:t.removeEventListener("icTopNavResized",this.topNavResizedHandler)}(e=this.hostMutationObserver)===null||e===void 0?void 0:e.disconnect()}componentWillLoad(){var i,t,e,a,n,o;const{navType:s,parent:r}=c(this.el);this.navigationType=s;this.isInSideNav=this.navigationType==="side";this.parentEl=r;this.deviceSize=l();this.sideNavExpanded=((i=this.parentEl)===null||i===void 0?void 0:i.classList.contains("sm-expanded"))||((t=this.parentEl)===null||t===void 0?void 0:t.classList.contains("xs-menu-open"))||false;if(this.isInSideNav){(e=this.parentEl)===null||e===void 0?void 0:e.addEventListener("icSideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){(a=this.parentEl)===null||a===void 0?void 0:a.addEventListener("icTopNavResized",this.topNavResizedHandler);if(((n=this.el.parentElement)===null||n===void 0?void 0:n.tagName)==="IC-NAVIGATION-GROUP")this.isTopNavChild=true;if(this.deviceSize<=this.parentEl.customMobileBreakpoint)this.inTopNavSideMenu=true}this.navigationSlot=this.el.querySelector('[slot="navigation-item"]');if(this.navigationSlot){this.navigationSlot.ariaLabel=((o=this.navigationSlot.textContent)===null||o===void 0?void 0:o.trim())||null}if(this.el.hasAttribute(this.ARIA_LABEL_STRING)){this.ariaLabel=this.el.getAttribute(this.ARIA_LABEL_STRING)||""}}componentDidLoad(){this.hostMutationObserver=new MutationObserver(this.hostMutationCallback);this.hostMutationObserver.observe(this.el,{attributes:true})}componentDidUpdate(){this.isInitialRender=false}brandChangeHandler({detail:i}){this.focusStyle=i.mode}async setFocus(){var i;this.itemEl?this.itemEl.focus():(i=this.el.querySelector("a"))===null||i===void 0?void 0:i.focus()}render(){const{inTopNavSideMenu:i,isTopNavChild:t,selected:a,navigationType:o,focusStyle:s,isInitialRender:r,sideNavExpanded:d,displayNavigationTooltip:l,collapsedIconLabel:c,isSideNavMobile:v,expandable:h,isInSideNav:g,theme:m}=this;const p=t&&!i;return e(n,{key:"6d3d330011cb09ae9fd95b59f98a9d18ffc25ba0",class:{"navigation-item":true,"navigation-item-selected":!t&&a,"navigation-item-top-nav":!i&&o==="top","navigation-item-top-nav-child":p,"navigation-item-top-nav-child-selected":p&&a,"navigation-item-side-menu":i,"navigation-item-side-menu-selected":i&&a,"navigation-item-page-header":o==="page-header","navigation-item-side-nav":g,"navigation-item-side-nav-collapsed":(!d||l)&&g,"navigation-item-side-nav-collapsed-with-label":!d&&g&&c&&!v,"with-transition":!r,expandable:h,[s]:t?g:!i,[`ic-theme-${m}`]:m!=="inherit"},onBlur:p?this.handleBlur:null,onClick:this.handleClick,"aria-current":a?"page":null,role:"listitem"},e("ic-tooltip",{key:"af3a3de698b102182ff030ffcfb66b419d7ac857",label:this.generateTooltipLabel(),target:"navigation-item",placement:"right",class:{"tooltip-navigation-item":true,"tooltip-navigation-item-side-nav-collapsed":l&&g,"tooltip-long-label-navigation-item-side-nav-expanded":this.el.hasAttribute("[display-navigation-tooltip = 'true']")}},this.renderNavigationItemContent()))}static get delegatesFocus(){return true}get el(){return o(this)}static get watchers(){return{navigationType:["navigationTypeChangeHandler"]}}};p.style=m;export{p as ic_navigation_item};
2
- //# sourceMappingURL=p-80e0f66e.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["icNavigationItemCss","IcNavigationItemStyle0","NavigationItem","constructor","hostRef","this","isInitialRender","hostMutationObserver","ANIMATION_DURATION","parseInt","getCssProperty","ARIA_LABEL_STRING","isInSideNav","deviceSize","DEVICE_SIZES","XL","focusStyle","getBrandForegroundAppearance","inTopNavSideMenu","isSideNavMobile","isTopNavChild","sideNavExpanded","ariaLabel","collapsedIconLabel","displayNavigationTooltip","download","expandable","href","selected","theme","displayDefaultNavigationItem","label","hreflang","target","rel","referrerpolicy","variant","ChevronIconComponent","h","class","svg","innerHTML","chevronIcon","slottedBadgeEl","el","querySelector","BadgeComponent","name","IconComponent","referrerPolicy","ref","itemEl","part","OpenInNew","tabindex","topNavResizedHandler","detail","size","_a","parentEl","customMobileBreakpoint","L","sideNavExpandHandler","sideNavMobile","sideNavToggleTooltip","handleBlur","relatedTarget","tagName","childBlur","emit","handleClick","navItemClicked","hostMutationCallback","mutationList","forceComponentUpdate","forEach","attributeName","attribute","getAttribute","forceUpdate","generateTooltipLabel","navigationSlot","textContent","children","renderNavigationItemContent","showTooltip","tooltip","shadowRoot","collapsedClass","timer","displayTooltip","setTimeout","classList","add","clearTimeout","remove","navigationTypeChangeHandler","navigationType","disconnectedCallback","removeEventListener","_b","_c","disconnect","componentWillLoad","navType","parent","getNavItemParentDetails","getCurrentDeviceSize","contains","addEventListener","_d","_e","parentElement","_f","trim","hasAttribute","componentDidLoad","MutationObserver","observe","attributes","componentDidUpdate","brandChangeHandler","mode","setFocus","focus","render","isTopNavChildDesktop","Host","key","onBlur","onClick","role","placement"],"sources":["src/components/ic-navigation-item/ic-navigation-item.css?tag=ic-navigation-item&encapsulation=shadow","src/components/ic-navigation-item/ic-navigation-item.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-navigation-item: z-index of navigation item\n */\n\n:host {\n display: block;\n\n --navigation-link-colour: var(--ic-brand-text-color);\n}\n\n:host(:focus-within) {\n z-index: var(--ic-z-index-navigation-item);\n}\n\n/* chevron */\nsvg {\n width: var(--ic-space-xl);\n fill: var(--ic-brand-text-color);\n}\n\n.svg {\n margin-left: auto;\n}\n\n.chevron-container svg,\n.chevron-container .svg {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n.chevron-container {\n flex-grow: 1;\n}\n\n:host(.expandable.navigation-item) .link,\n:host(.expandable.navigation-item) ::slotted(a) {\n padding-right: 0;\n}\n\n:host(.navigation-item) .link,\n:host(.navigation-item) ::slotted(a) {\n height: calc(100% - var(--ic-space-xxs));\n width: fit-content;\n color: var(--navigation-link-colour);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 var(--ic-space-md) var(--ic-space-xxs);\n text-decoration: none;\n transition: var(--ic-easing-transition-fast);\n position: relative;\n white-space: nowrap;\n}\n\n:host(.navigation-item) ::slotted(a) {\n height: 100%;\n font: var(--ic-font-label) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt025) !important;\n padding: 0 var(--ic-space-md) !important;\n}\n\n:host(.navigation-item-selected) .link::after,\n:host(.navigation-item-selected) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav) ::slotted(a.active)::after {\n content: \"\";\n height: 0.25rem;\n width: 100%;\n position: absolute;\n bottom: 0;\n background-color: var(--ic-top-navigation-theme);\n}\n\n:host(.navigation-item-selected.navigation-item-page-header)\n ::slotted(a.active)::after,\n:host(.navigation-item-selected.navigation-item-page-header) .link::after,\n:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::after {\n content: none;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n box-shadow: none;\n}\n\n:host(.navigation-item) .link:hover:not(:focus) {\n background-color: var(--ic-brand-hover);\n cursor: pointer;\n}\n\n:host(.navigation-item:not(.navigation-item-page-header, .navigation-item-side-menu, .navigation-item-top-nav-child))\n ::slotted(a:hover:not(:focus)),\n:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus) {\n background-color: var(--ic-brand-hover) !important;\n}\n\n:host(.navigation-item:not(.navigation-item-top-nav-child, .navigation-item-side-menu, .navigation-item-top-nav-child-selected\n .navigation-item-side-menu-selected))\n .focus-indicator:focus-within {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item) .link:focus,\n:host(.navigation-item) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n outline-offset: calc(-1 * (var(--ic-space-xxxs) + var(--ic-space-1px) / 2));\n}\n\n:host(.navigation-item-selected) .link:focus,\n:host(.navigation-item) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n outline-offset: calc(-1 * (var(--ic-space-xxxs) + var(--ic-space-1px) / 2));\n}\n\n:host(.navigation-item) .link:active:not(:focus),\n:host(.navigation-item) ::slotted(a:active:not(:focus)) {\n background-color: var(--ic-brand-active);\n}\n\n:host(.navigation-item-side-menu) .link,\n:host(.navigation-item-side-menu) ::slotted(a) {\n min-height: 2.5rem;\n height: auto;\n width: 100%;\n box-sizing: border-box;\n color: var(--ic-top-navigation-nav-item);\n\n --ic-typography-color: var(--ic-top-navigation-nav-item);\n\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-decoration: none;\n text-wrap: wrap;\n white-space: normal;\n transition: box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(svg),\n:host(.navigation-item-side-menu) ::slotted(svg),\n:host(.navigation-item-page-header) ::slotted(svg) {\n fill: var(--ic-color-text-primary);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a) {\n font: var(--ic-font-body) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n transition: box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast);\n}\n\n:host(.navigation-item-side-menu) .link:hover:not(:focus) {\n background-color: var(--ic-top-navigation-nav-item-hover);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)) {\n background-color: var(--ic-top-navigation-nav-item-hover) !important;\n}\n\n:host(.navigation-item-side-menu) .focus-indicator:focus-within {\n box-shadow: none;\n}\n\n:host(.navigation-item-side-menu) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-inset) !important;\n width: auto;\n border-radius: var(--ic-border-radius-inset) !important;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu-selected) ::slotted(a) {\n transition: box-shadow var(--ic-easing-transition-slow),\n background-color var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n margin-left: var(--ic-space-xs) !important;\n padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link,\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n height: 2.5rem;\n width: calc(100% - var(--ic-space-xl));\n min-width: 9.063rem;\n color: var(--ic-top-navigation-nav-item);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 0 var(--ic-space-md) !important;\n text-decoration: none;\n position: relative;\n transition: box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-slow);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n font: var(--ic-font-body) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:hover:not(:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a:hover:not(:focus)) {\n background-color: var(--ic-top-navigation-nav-item-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-top-nav-child) ::slotted(a:focus) {\n z-index: 1;\n outline: var(--ic-hc-focus-outline);\n border-radius: var(--ic-border-radius-inset);\n box-shadow: var(--ic-border-focus-inset);\n transition: border-radius 0s, box-shadow var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n}\n\n:host(.navigation-item-side-menu) .link:active:not(:focus) {\n background-color: var(--ic-top-navigation-nav-item-pressed);\n}\n\n:host(.navigation-item-top-nav-child) .link:active:not(:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a:active:not(:focus)) {\n outline: var(--ic-hc-focus-outline);\n background-color: var(--ic-top-navigation-nav-item-pressed);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:active:not(:focus)),\n:host(.navigation-item-side-menu) ::slotted(a:active:not(:focus)) {\n background-color: var(--ic-top-navigation-nav-item-pressed) !important;\n}\n\n:host(.navigation-item-side-menu-selected) *,\n:host(.navigation-item-top-nav-child-selected) *,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n font-weight: 700 !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,\n:host(.navigation-item-top-nav-child-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n content: \"\";\n position: absolute;\n left: 0;\n width: var(--ic-space-xs);\n height: inherit;\n min-height: 2.5rem;\n background-color: var(--ic-top-navigation-nav-item-banner);\n transition: left 0s;\n}\n\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before {\n margin-top: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus {\n margin-left: var(--ic-space-xs);\n margin-right: calc(-1 * var(--ic-space-xs));\n padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus::before {\n left: calc(-1 * var(--ic-space-xs));\n z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before,\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus)::before {\n left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.navigation-item-side-menu-selected) .link::after {\n display: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .link {\n height: 100%;\n}\n\n:host(.navigation-item-side-nav-collapsed) ::slotted(svg),\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(svg) {\n margin: auto;\n pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n align-items: center;\n padding: 0;\n margin: auto 0;\n width: fit-content;\n pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n text-align: center;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) .link,\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(a) {\n display: flex;\n flex-direction: column;\n height: fit-content;\n padding: var(--ic-space-xs) !important;\n gap: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link,\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n height: auto !important;\n gap: 0;\n width: auto;\n padding: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n display: block;\n text-align: center;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link\n ic-typography {\n opacity: 1;\n min-width: min-content;\n}\n\n:host(.navigation-item-side-nav-collapsed) svg,\n:host(.navigation-item-side-nav-collapsed-with-label) svg {\n display: none;\n}\n\n::slotted(svg) {\n fill: var(--ic-brand-text-color);\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n margin-left: var(--ic-space-md);\n}\n\n.icon {\n height: 1.5rem;\n width: var(--ic-space-xxl);\n margin-left: calc(-1 * var(--ic-space-md));\n flex: 0 1 0%;\n position: relative;\n}\n\n.icon > ::slotted(*) {\n margin-left: var(--ic-space-md) !important;\n margin-right: var(--ic-space-xs);\n}\n\n.inline-badge {\n margin-left: var(--ic-space-xs);\n}\n\n.badge {\n margin-left: 0;\n}\n\n:host(.navigation-item-side-nav-collapsed) .icon > ::slotted(*) {\n margin: auto !important;\n}\n\n:host(.navigation-item-side-nav) .icon > ::slotted(*) {\n margin-right: 0;\n}\n\n:host(.navigation-item-side-nav) .link,\n:host(.navigation-item-side-nav) ::slotted(a) {\n height: var(--navigation-item-height, 4rem);\n min-height: var(--navigation-item-min-height);\n width: var(--navigation-item-width, auto);\n justify-content: var(--navigation-item-justify-content);\n display: flex;\n gap: var(--ic-space-xs);\n box-sizing: border-box;\n color: var(--navigation-item-child-color) !important;\n text-decoration: none !important;\n white-space: nowrap;\n padding: 0 var(--ic-space-md);\n text-wrap: wrap;\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a) {\n height: var(--navigation-item-child-height);\n width: var(--navigation-group-width);\n color: var(--navigation-item-child-color) !important;\n display: flex;\n gap: 0.625rem;\n box-sizing: border-box;\n min-width: 0;\n transition: box-shadow var(--ic-easing-transition-fast);\n text-decoration: none !important;\n white-space: nowrap;\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-dark);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-menu) .link:active {\n background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:active,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n ::slotted(a:active) {\n background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav) a.link ic-typography,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n a.link\n ic-typography,\n:host(.navigation-item-side-nav) div.link ic-typography,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n div.link\n ic-typography,\n.navigation-item-side-nav-slotted-text {\n opacity: var(--navigation-item-label-opacity);\n transition: opacity var(--ic-easing-transition-slow);\n white-space: wrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a.active) {\n box-shadow: inset 0.313rem 0 0 var(--ic-brand-text-color);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::before,\n:host(.navigation-item-side-nav) ::slotted(a.active)::before {\n content: \"\";\n display: block;\n position: absolute;\n inset: 0 0 0 0.313rem;\n border-radius: 0.688rem !important;\n transition: var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus::before,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus)::before {\n box-shadow: var(--ic-border-focus-inset);\n}\n\n:host(:not(.navigation-item-side-nav-collapsed).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link {\n opacity: var(--navigation-item-label-opacity);\n height: auto;\n}\n\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n .link,\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n min-width: var(--navigation-group-item-min-width);\n padding: var(--ic-space-xs) !important;\n height: auto;\n gap: 0;\n}\n\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n display: block;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::after,\n:host(.navigation-item-side-nav) ::slotted(a.active)::after {\n display: none;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:focus,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n background-color: transparent;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus) {\n margin: 0 auto;\n box-shadow: inset 0.313rem 0 0 var(--ic-brand-text-color);\n border-radius: 0;\n}\n\n:host(.navigation-item-page-header).link,\n:host(.navigation-item-page-header) a,\n:host(.navigation-item-page-header) ::slotted(a) {\n height: 2.5rem !important;\n color: var(--ic-color-text-primary) !important;\n transition: all var(--ic-easing-transition-fast) !important;\n box-shadow: rgba(23 89 188 / 0%) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link::after,\n:host(.navigation-item-page-header) ::slotted(a.active)::after {\n content: \" \" !important;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: var(--ic-space-xxs);\n background-color: var(--ic-action-default) !important;\n}\n\n:host(.navigation-item-page-header) .link:hover,\n:host(.navigation-item-page-header) ::slotted(.link:hover),\n:host(.navigation-item-page-header) ::slotted(a:hover),\n:host(.navigation-item-page-header) .link:hover:not(:focus) {\n background-color: var(--ic-action-default-bg-hover) !important;\n cursor: pointer;\n}\n\n:host(.navigation-item-page-header) .link:focus,\n:host(.navigation-item-page-header) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n}\n\n:host(.navigation-item-page-header) .link:active,\n:host(.navigation-item-page-header) ::slotted(a:active) {\n background-color: var(--ic-action-default-bg-pressed) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link:focus::after,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::after {\n border-bottom-left-radius: var(--ic-border-radius);\n border-bottom-right-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n .link,\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n ::slotted(a.active) {\n transition: all var(--ic-easing-transition-fast),\n border-color var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-page-header) ::slotted(a.active)::before,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,\n:host(.navigation-item-page-header.navigation-item-selected)\n .link:focus::before {\n display: none;\n}\n\n.open-in-new-icon {\n flex: 1;\n}\n\n.open-in-new-icon svg {\n margin-top: var(--ic-space-xxs);\n padding-left: var(--ic-space-xs);\n}\n\n:host(.navigation-item-side-nav) .open-in-new-icon {\n margin-left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.navigation-item-top-nav) .open-in-new-icon svg,\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-side-nav) .open-in-new-icon svg {\n height: 0.875rem;\n width: 0.875rem;\n}\n\n:host(.navigation-item-side-menu) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg {\n height: var(--ic-space-md);\n width: var(--ic-space-md);\n}\n\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg,\n:host(.navigation-item-side-menu) .open-in-new-icon svg {\n fill: var(--ic-color-text-primary);\n}\n\n@media (forced-colors: active) {\n .open-in-new-icon svg {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n forceUpdate,\n Listen,\n Method,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from \"@stencil/core\";\n\nimport {\n DEVICE_SIZES,\n getCssProperty,\n getCurrentDeviceSize,\n getBrandForegroundAppearance,\n getNavItemParentDetails,\n} from \"../../utils/helpers\";\nimport {\n IcNavType,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundNoDefault,\n IcThemeMode,\n} from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { IcExpandedDetail } from \"../ic-side-navigation/ic-side-navigation.types\";\n\n/**\n * @part link - The `<a>` within ic-navigation-item\n * @slot badge - Badge component overlaying the top right of the icon.\n * @slot icon - Content will be displayed to the left of the label for expanded navigation items, and in replacement of the label for collapsed navigation items.\n */\n\n@Component({\n tag: \"ic-navigation-item\",\n styleUrl: \"ic-navigation-item.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class NavigationItem {\n private navigationSlot: HTMLElement | null;\n private isInitialRender = true;\n private itemEl?: HTMLElement;\n private hostMutationObserver: MutationObserver | null = null;\n private ANIMATION_DURATION =\n parseInt(getCssProperty(\"--ic-transition-duration-slow\")) || 0;\n private ARIA_LABEL_STRING = \"aria-label\";\n private isInSideNav = false;\n\n @Element() el: HTMLIcNavigationItemElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() focusStyle: IcBrandForegroundNoDefault | IcBrandForeground =\n getBrandForegroundAppearance();\n @State() inTopNavSideMenu = false;\n @State() isSideNavMobile = false;\n @State() isTopNavChild = false;\n\n @State() navigationType: IcNavType | \"\";\n @Watch(\"navigationType\")\n navigationTypeChangeHandler(): void {\n this.isInSideNav = this.navigationType === \"side\";\n }\n\n @State() parentEl: HTMLElement | null;\n @State() sideNavExpanded = false;\n @State() ariaLabel = \"\";\n\n /**\n * @internal If `true`, the icon and label will be displayed when side navigation is collapsed.\n */\n @Prop() collapsedIconLabel = false;\n\n /**\n * @internal If `true`, the navigation item will be displayed within a tooltip.\n */\n @Prop() displayNavigationTooltip = false;\n\n /**\n * If `true`, the user can save the linked URL instead of navigating to it.\n */\n @Prop() download: string | boolean = false;\n\n /**\n * @internal If `true`, the navigation item will be expandable.\n */\n @Prop() expandable = false;\n\n /**\n * The destination of the navigation item.\n */\n @Prop() href = \"\";\n\n /**\n * The human language of the linked URL.\n */\n @Prop() hreflang?: string;\n\n /**\n * The label of the navigation item.\n */\n @Prop() label?: string;\n\n /**\n * The relationship of the linked URL as space-separated link types.\n */\n @Prop() rel?: string;\n\n /**\n * How much of the referrer to send when following the link.\n */\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /**\n * If `true`, the navigation item will be set in a selected state.\n */\n @Prop() selected = false;\n\n /**\n * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n */\n @Prop() target?: string;\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme: IcThemeMode = \"inherit\";\n\n /**\n * @internal - Emitted when item loses focus.\n */\n @Event() childBlur: EventEmitter<void>;\n\n /**\n * @internal - Emitted when navigation item clicked.\n */\n @Event() navItemClicked: EventEmitter<void>;\n\n disconnectedCallback(): void {\n if (this.isInSideNav) {\n this.parentEl?.removeEventListener(\n \"icSideNavExpanded\",\n this.sideNavExpandHandler as EventListener\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl?.removeEventListener(\n \"icTopNavResized\",\n this.topNavResizedHandler as EventListener\n );\n }\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n const { navType, parent } = getNavItemParentDetails(this.el);\n this.navigationType = navType;\n this.isInSideNav = this.navigationType === \"side\";\n this.parentEl = parent;\n this.deviceSize = getCurrentDeviceSize();\n\n this.sideNavExpanded =\n this.parentEl?.classList.contains(\"sm-expanded\") ||\n this.parentEl?.classList.contains(\"xs-menu-open\") ||\n false;\n\n if (this.isInSideNav) {\n this.parentEl?.addEventListener(\n \"icSideNavExpanded\",\n this.sideNavExpandHandler as EventListener\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl?.addEventListener(\n \"icTopNavResized\",\n this.topNavResizedHandler as EventListener\n );\n if (this.el.parentElement?.tagName === \"IC-NAVIGATION-GROUP\")\n this.isTopNavChild = true;\n if (\n this.deviceSize <=\n (this.parentEl as HTMLIcTopNavigationElement).customMobileBreakpoint\n )\n this.inTopNavSideMenu = true;\n }\n\n this.navigationSlot = this.el.querySelector('[slot=\"navigation-item\"]');\n if (this.navigationSlot) {\n this.navigationSlot.ariaLabel =\n this.navigationSlot.textContent?.trim() || null;\n }\n\n if (this.el.hasAttribute(this.ARIA_LABEL_STRING)) {\n this.ariaLabel = this.el.getAttribute(this.ARIA_LABEL_STRING) || \"\";\n }\n }\n\n componentDidLoad(): void {\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n });\n }\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n this.focusStyle = detail.mode;\n }\n\n /**\n * Sets focus on the nav item.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.itemEl ? this.itemEl.focus() : this.el.querySelector(\"a\")?.focus();\n }\n\n private displayDefaultNavigationItem = (\n href: string,\n label: string,\n hreflang?: string,\n target?: string,\n rel?: string,\n referrerpolicy?: ReferrerPolicy,\n download?: string | boolean\n ) => {\n const variant =\n this.isTopNavChild || this.inTopNavSideMenu ? \"body\" : \"label\";\n const ChevronIconComponent = this.expandable && (\n <div class={{ svg: true }} innerHTML={chevronIcon}></div>\n );\n const slottedBadgeEl = this.el.querySelector('[slot=\"badge\"]');\n const BadgeComponent = slottedBadgeEl && (\n <div class=\"inline-badge\">\n <slot name=\"badge\"></slot>\n </div>\n );\n const IconComponent = this.el.querySelector('[slot=\"icon\"]') && (\n <div class=\"icon\">\n <slot name=\"icon\"></slot>\n {this.isInSideNav && BadgeComponent}\n </div>\n );\n\n return href !== \"\" ? (\n <a\n href={href}\n target={target}\n rel={rel}\n hreflang={hreflang}\n referrerPolicy={referrerpolicy}\n download={download !== false ? download : null}\n class=\"link\"\n ref={(el) => (this.itemEl = el)}\n part=\"link\"\n aria-label={this.ariaLabel ? this.ariaLabel : null}\n >\n {IconComponent}\n <ic-typography variant={variant}>{label}</ic-typography>\n {target === \"_blank\" && (\n <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n )}\n {BadgeComponent}\n <div class=\"chevron-container\">{ChevronIconComponent}</div>\n </a>\n ) : (\n <div tabindex=\"0\" class=\"link\" ref={(el) => (this.itemEl = el)}>\n {IconComponent}\n <ic-typography variant={variant}>{label}</ic-typography>\n {ChevronIconComponent}\n {BadgeComponent}\n </div>\n );\n };\n\n private topNavResizedHandler = ({\n detail,\n }: CustomEvent<{ size: number }>) => {\n const { size } = detail;\n if (size !== this.deviceSize) {\n this.deviceSize = size;\n this.inTopNavSideMenu =\n size <=\n ((this.parentEl as HTMLIcTopNavigationElement)\n ?.customMobileBreakpoint || DEVICE_SIZES.L);\n }\n };\n\n private sideNavExpandHandler = ({\n detail,\n }: CustomEvent<IcExpandedDetail>) => {\n const { sideNavExpanded, sideNavMobile } = detail;\n this.sideNavExpanded = sideNavExpanded;\n this.isSideNavMobile = sideNavMobile;\n this.sideNavToggleTooltip(!sideNavExpanded && !sideNavMobile);\n };\n\n private handleBlur = ({ relatedTarget }: FocusEvent) => {\n if (\n relatedTarget === null ||\n (relatedTarget as HTMLElement).tagName !== \"IC-NAVIGATION-ITEM\"\n ) {\n this.childBlur.emit();\n }\n };\n\n private handleClick = () => this.navItemClicked.emit();\n\n // triggered when attributes of host element change\n private hostMutationCallback = (mutationList: MutationRecord[]) => {\n let forceComponentUpdate = false;\n mutationList.forEach(({ attributeName }) => {\n if (attributeName) {\n const attribute = this.el.getAttribute(attributeName);\n if (attribute && attributeName === this.ARIA_LABEL_STRING) {\n this.ariaLabel = attribute;\n forceComponentUpdate = true;\n }\n }\n });\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n private generateTooltipLabel = () => {\n if (this.label) {\n return this.label;\n }\n\n if (this.navigationSlot) {\n return this.navigationSlot.textContent || \"\";\n }\n\n return this.el.children[0]?.textContent || \"\";\n };\n\n private renderNavigationItemContent = () => {\n if (!this.label && !this.navigationSlot) return <slot></slot>;\n\n return this.label ? (\n this.displayDefaultNavigationItem(\n this.href,\n this.label,\n this.hreflang,\n this.target,\n this.rel,\n this.referrerpolicy,\n this.download\n )\n ) : (\n <slot name=\"navigation-item\"></slot>\n );\n };\n\n // Displays tooltip only once the collapsing animation is finished\n private sideNavToggleTooltip = (showTooltip: boolean) => {\n const tooltip = this.el.shadowRoot?.querySelector(\"ic-tooltip\");\n const collapsedClass = \"tooltip-navigation-item-side-nav-collapsed\";\n let timer;\n\n if (!tooltip) return;\n\n if (showTooltip) {\n tooltip.displayTooltip(false); // Hides tooltip for when mouse is hovering over icon\n timer = setTimeout(() => {\n tooltip.classList.add(collapsedClass);\n }, this.ANIMATION_DURATION);\n } else {\n clearTimeout(timer);\n tooltip.classList.remove(collapsedClass);\n }\n };\n\n render() {\n const {\n inTopNavSideMenu,\n isTopNavChild,\n selected,\n navigationType,\n focusStyle,\n isInitialRender,\n sideNavExpanded,\n displayNavigationTooltip,\n collapsedIconLabel,\n isSideNavMobile,\n expandable,\n isInSideNav,\n theme,\n } = this;\n\n const isTopNavChildDesktop = isTopNavChild && !inTopNavSideMenu;\n\n return (\n <Host\n class={{\n \"navigation-item\": true,\n \"navigation-item-selected\": !isTopNavChild && selected,\n \"navigation-item-top-nav\":\n !inTopNavSideMenu && navigationType === \"top\",\n \"navigation-item-top-nav-child\": isTopNavChildDesktop,\n \"navigation-item-top-nav-child-selected\":\n isTopNavChildDesktop && selected,\n \"navigation-item-side-menu\": inTopNavSideMenu,\n \"navigation-item-side-menu-selected\": inTopNavSideMenu && selected,\n \"navigation-item-page-header\": navigationType === \"page-header\",\n \"navigation-item-side-nav\": isInSideNav,\n \"navigation-item-side-nav-collapsed\":\n (!sideNavExpanded || displayNavigationTooltip) && isInSideNav,\n \"navigation-item-side-nav-collapsed-with-label\":\n !sideNavExpanded &&\n isInSideNav &&\n collapsedIconLabel &&\n !isSideNavMobile,\n \"with-transition\": !isInitialRender,\n expandable,\n [focusStyle]: isTopNavChild ? isInSideNav : !inTopNavSideMenu,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n onBlur={isTopNavChildDesktop ? this.handleBlur : null}\n onClick={this.handleClick}\n aria-current={selected ? \"page\" : null}\n role=\"listitem\"\n >\n {/* Tooltip enabled by applying navigation-item-side-nav-collapsed class to host */}\n <ic-tooltip\n label={this.generateTooltipLabel()}\n target=\"navigation-item\"\n placement=\"right\"\n class={{\n \"tooltip-navigation-item\": true,\n \"tooltip-navigation-item-side-nav-collapsed\":\n displayNavigationTooltip && isInSideNav,\n \"tooltip-long-label-navigation-item-side-nav-expanded\":\n this.el.hasAttribute(\"[display-navigation-tooltip = 'true']\"),\n }}\n >\n {this.renderNavigationItemContent()}\n </ic-tooltip>\n </Host>\n );\n }\n}\n"],"mappings":"uOAAA,MAAMA,EAAsB,izmBAC5B,MAAAC,EAAeD,E,MC+CFE,EAAc,MAP3B,WAAAC,CAAAC,G,8FASUC,KAAAC,gBAAkB,KAElBD,KAAAE,qBAAgD,KAChDF,KAAAG,mBACNC,SAASC,EAAe,mCAAqC,EACvDL,KAAAM,kBAAoB,aACpBN,KAAAO,YAAc,MAIbP,KAAAQ,WAAqBC,EAAaC,GAClCV,KAAAW,WACPC,IACOZ,KAAAa,iBAAmB,MACnBb,KAAAc,gBAAkB,MAClBd,KAAAe,cAAgB,MAShBf,KAAAgB,gBAAkB,MAClBhB,KAAAiB,UAAY,GAKbjB,KAAAkB,mBAAqB,MAKrBlB,KAAAmB,yBAA2B,MAK3BnB,KAAAoB,SAA6B,MAK7BpB,KAAAqB,WAAa,MAKbrB,KAAAsB,KAAO,GAyBPtB,KAAAuB,SAAW,MAUXvB,KAAAwB,MAAqB,UA6FrBxB,KAAAyB,6BAA+B,CACrCH,EACAI,EACAC,EACAC,EACAC,EACAC,EACAV,KAEA,MAAMW,EACJ/B,KAAKe,eAAiBf,KAAKa,iBAAmB,OAAS,QACzD,MAAMmB,EAAuBhC,KAAKqB,YAChCY,EAAA,OAAKC,MAAO,CAAEC,IAAK,MAAQC,UAAWC,IAExC,MAAMC,EAAiBtC,KAAKuC,GAAGC,cAAc,kBAC7C,MAAMC,EAAiBH,GACrBL,EAAA,OAAKC,MAAM,gBACTD,EAAA,QAAMS,KAAK,WAGf,MAAMC,EAAgB3C,KAAKuC,GAAGC,cAAc,kBAC1CP,EAAA,OAAKC,MAAM,QACTD,EAAA,QAAMS,KAAK,SACV1C,KAAKO,aAAekC,GAIzB,OAAOnB,IAAS,GACdW,EAAA,KACEX,KAAMA,EACNM,OAAQA,EACRC,IAAKA,EACLF,SAAUA,EACViB,eAAgBd,EAChBV,SAAUA,IAAa,MAAQA,EAAW,KAC1Cc,MAAM,OACNW,IAAMN,GAAQvC,KAAK8C,OAASP,EAC5BQ,KAAK,OAAM,aACC/C,KAAKiB,UAAYjB,KAAKiB,UAAY,MAE7C0B,EACDV,EAAA,iBAAeF,QAASA,GAAUL,GACjCE,IAAW,UACVK,EAAA,QAAMC,MAAM,mBAAmBE,UAAWY,IAE3CP,EACDR,EAAA,OAAKC,MAAM,qBAAqBF,IAGlCC,EAAA,OAAKgB,SAAS,IAAIf,MAAM,OAAOW,IAAMN,GAAQvC,KAAK8C,OAASP,GACxDI,EACDV,EAAA,iBAAeF,QAASA,GAAUL,GACjCM,EACAS,EAEJ,EAGKzC,KAAAkD,qBAAuB,EAC7BC,a,MAEA,MAAMC,KAAEA,GAASD,EACjB,GAAIC,IAASpD,KAAKQ,WAAY,CAC5BR,KAAKQ,WAAa4C,EAClBpD,KAAKa,iBACHuC,MACCC,EAACrD,KAAKsD,YAAuC,MAAAD,SAAA,SAAAA,EAC1CE,yBAA0B9C,EAAa+C,E,GAIzCxD,KAAAyD,qBAAuB,EAC7BN,aAEA,MAAMnC,gBAAEA,EAAe0C,cAAEA,GAAkBP,EAC3CnD,KAAKgB,gBAAkBA,EACvBhB,KAAKc,gBAAkB4C,EACvB1D,KAAK2D,sBAAsB3C,IAAoB0C,EAAc,EAGvD1D,KAAA4D,WAAa,EAAGC,oBACtB,GACEA,IAAkB,MACjBA,EAA8BC,UAAY,qBAC3C,CACA9D,KAAK+D,UAAUC,M,GAIXhE,KAAAiE,YAAc,IAAMjE,KAAKkE,eAAeF,OAGxChE,KAAAmE,qBAAwBC,IAC9B,IAAIC,EAAuB,MAC3BD,EAAaE,SAAQ,EAAGC,oBACtB,GAAIA,EAAe,CACjB,MAAMC,EAAYxE,KAAKuC,GAAGkC,aAAaF,GACvC,GAAIC,GAAaD,IAAkBvE,KAAKM,kBAAmB,CACzDN,KAAKiB,UAAYuD,EACjBH,EAAuB,I,MAI7B,GAAIA,EAAsB,CACxBK,EAAY1E,K,GAIRA,KAAA2E,qBAAuB,K,MAC7B,GAAI3E,KAAK0B,MAAO,CACd,OAAO1B,KAAK0B,K,CAGd,GAAI1B,KAAK4E,eAAgB,CACvB,OAAO5E,KAAK4E,eAAeC,aAAe,E,CAG5C,QAAOxB,EAAArD,KAAKuC,GAAGuC,SAAS,MAAE,MAAAzB,SAAA,SAAAA,EAAEwB,cAAe,EAAE,EAGvC7E,KAAA+E,4BAA8B,KACpC,IAAK/E,KAAK0B,QAAU1B,KAAK4E,eAAgB,OAAO3C,EAAA,aAEhD,OAAOjC,KAAK0B,MACV1B,KAAKyB,6BACHzB,KAAKsB,KACLtB,KAAK0B,MACL1B,KAAK2B,SACL3B,KAAK4B,OACL5B,KAAK6B,IACL7B,KAAK8B,eACL9B,KAAKoB,UAGPa,EAAA,QAAMS,KAAK,mBACZ,EAIK1C,KAAA2D,qBAAwBqB,I,MAC9B,MAAMC,GAAU5B,EAAArD,KAAKuC,GAAG2C,cAAU,MAAA7B,SAAA,SAAAA,EAAEb,cAAc,cAClD,MAAM2C,EAAiB,6CACvB,IAAIC,EAEJ,IAAKH,EAAS,OAEd,GAAID,EAAa,CACfC,EAAQI,eAAe,OACvBD,EAAQE,YAAW,KACjBL,EAAQM,UAAUC,IAAIL,EAAe,GACpCnF,KAAKG,mB,KACH,CACLsF,aAAaL,GACbH,EAAQM,UAAUG,OAAOP,E,GAxT7B,2BAAAQ,GACE3F,KAAKO,YAAcP,KAAK4F,iBAAmB,M,CA6E7C,oBAAAC,G,UACE,GAAI7F,KAAKO,YAAa,EACpB8C,EAAArD,KAAKsD,YAAQ,MAAAD,SAAA,SAAAA,EAAEyC,oBACb,oBACA9F,KAAKyD,qB,MAEF,GAAIzD,KAAK4F,iBAAmB,MAAO,EACxCG,EAAA/F,KAAKsD,YAAQ,MAAAyC,SAAA,SAAAA,EAAED,oBACb,kBACA9F,KAAKkD,qB,EAGT8C,EAAAhG,KAAKE,wBAAoB,MAAA8F,SAAA,SAAAA,EAAEC,Y,CAG7B,iBAAAC,G,gBACE,MAAMC,QAAEA,EAAOC,OAAEA,GAAWC,EAAwBrG,KAAKuC,IACzDvC,KAAK4F,eAAiBO,EACtBnG,KAAKO,YAAcP,KAAK4F,iBAAmB,OAC3C5F,KAAKsD,SAAW8C,EAChBpG,KAAKQ,WAAa8F,IAElBtG,KAAKgB,kBACHqC,EAAArD,KAAKsD,YAAQ,MAAAD,SAAA,SAAAA,EAAEkC,UAAUgB,SAAS,mBAClCR,EAAA/F,KAAKsD,YAAQ,MAAAyC,SAAA,SAAAA,EAAER,UAAUgB,SAAS,kBAClC,MAEF,GAAIvG,KAAKO,YAAa,EACpByF,EAAAhG,KAAKsD,YAAQ,MAAA0C,SAAA,SAAAA,EAAEQ,iBACb,oBACAxG,KAAKyD,qB,MAEF,GAAIzD,KAAK4F,iBAAmB,MAAO,EACxCa,EAAAzG,KAAKsD,YAAQ,MAAAmD,SAAA,SAAAA,EAAED,iBACb,kBACAxG,KAAKkD,sBAEP,KAAIwD,EAAA1G,KAAKuC,GAAGoE,iBAAa,MAAAD,SAAA,SAAAA,EAAE5C,WAAY,sBACrC9D,KAAKe,cAAgB,KACvB,GACEf,KAAKQ,YACJR,KAAKsD,SAAwCC,uBAE9CvD,KAAKa,iBAAmB,I,CAG5Bb,KAAK4E,eAAiB5E,KAAKuC,GAAGC,cAAc,4BAC5C,GAAIxC,KAAK4E,eAAgB,CACvB5E,KAAK4E,eAAe3D,YAClB2F,EAAA5G,KAAK4E,eAAeC,eAAW,MAAA+B,SAAA,SAAAA,EAAEC,SAAU,I,CAG/C,GAAI7G,KAAKuC,GAAGuE,aAAa9G,KAAKM,mBAAoB,CAChDN,KAAKiB,UAAYjB,KAAKuC,GAAGkC,aAAazE,KAAKM,oBAAsB,E,EAIrE,gBAAAyG,GACE/G,KAAKE,qBAAuB,IAAI8G,iBAAiBhH,KAAKmE,sBACtDnE,KAAKE,qBAAqB+G,QAAQjH,KAAKuC,GAAI,CACzC2E,WAAY,M,CAIhB,kBAAAC,GACEnH,KAAKC,gBAAkB,K,CAIzB,kBAAAmH,EAAmBjE,OAAEA,IACnBnD,KAAKW,WAAawC,EAAOkE,I,CAO3B,cAAMC,G,MACJtH,KAAK8C,OAAS9C,KAAK8C,OAAOyE,SAAUlE,EAAArD,KAAKuC,GAAGC,cAAc,QAAI,MAAAa,SAAA,SAAAA,EAAEkE,O,CAgKlE,MAAAC,GACE,MAAM3G,iBACJA,EAAgBE,cAChBA,EAAaQ,SACbA,EAAQqE,eACRA,EAAcjF,WACdA,EAAUV,gBACVA,EAAee,gBACfA,EAAeG,yBACfA,EAAwBD,mBACxBA,EAAkBJ,gBAClBA,EAAeO,WACfA,EAAUd,YACVA,EAAWiB,MACXA,GACExB,KAEJ,MAAMyH,EAAuB1G,IAAkBF,EAE/C,OACEoB,EAACyF,EAAI,CAAAC,IAAA,2CACHzF,MAAO,CACL,kBAAmB,KACnB,4BAA6BnB,GAAiBQ,EAC9C,2BACGV,GAAoB+E,IAAmB,MAC1C,gCAAiC6B,EACjC,yCACEA,GAAwBlG,EAC1B,4BAA6BV,EAC7B,qCAAsCA,GAAoBU,EAC1D,8BAA+BqE,IAAmB,cAClD,2BAA4BrF,EAC5B,uCACIS,GAAmBG,IAA6BZ,EACpD,iDACGS,GACDT,GACAW,IACCJ,EACH,mBAAoBb,EACpBoB,aACAV,CAACA,GAAaI,EAAgBR,GAAeM,EAC7C,CAAC,YAAYW,KAAUA,IAAU,WAEnCoG,OAAQH,EAAuBzH,KAAK4D,WAAa,KACjDiE,QAAS7H,KAAKiE,YAAW,eACX1C,EAAW,OAAS,KAClCuG,KAAK,YAGL7F,EAAA,cAAA0F,IAAA,2CACEjG,MAAO1B,KAAK2E,uBACZ/C,OAAO,kBACPmG,UAAU,QACV7F,MAAO,CACL,0BAA2B,KAC3B,6CACEf,GAA4BZ,EAC9B,uDACEP,KAAKuC,GAAGuE,aAAa,2CAGxB9G,KAAK+E,+B","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{r as e,h as t,H as a,g as i}from"./p-8e4e97b4.js";import{D as s,i as n,f as o,h as d}from"./p-b57e59b7.js";import"./p-bddf799a.js";const r='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;z-index:var(--ic-z-index-page-header)}:host(.ic-page-header-sticky){position:sticky;top:0;box-shadow:var(--ic-elevation-overlay);z-index:var(--ic-z-index-sticky-page-header)}header{background-color:var(--ic-page-header-background)}header.border-bottom{border-bottom:var(--ic-border-default);border-bottom:var(--ic-space-1px) solid var(--ic-page-header-border)}header.tabs{padding-top:var(--ic-space-md)}.breadcrumb-area{margin-bottom:var(--ic-space-md)}.main-content{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"title-area action-area"\n "input-area action-area";-moz-column-gap:var(--ic-space-md);column-gap:var(--ic-space-md);justify-content:space-between;width:100%}.title-area{display:flex;flex-direction:column;flex:1;min-width:19rem;grid-area:title-area}.header-content{display:flex;align-items:center;width:100%;flex-wrap:wrap;-moz-column-gap:var(--ic-space-md);column-gap:var(--ic-space-md)}.heading{display:inline-block;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.subheading-content{margin-top:var(--ic-space-xs)}.subheading-content.small{margin-top:var(--ic-space-md)}.action-area{display:flex;gap:var(--ic-space-md);flex-flow:row wrap;justify-self:end;justify-content:flex-end;height:-moz-fit-content;height:fit-content;grid-area:action-area}.input-area,.navigation-area{margin-top:var(--ic-space-md);width:100%}.tabs-slot{display:flex;overflow-x:auto;padding:0.5rem;margin:-0.5rem}.tabs-slot::-webkit-scrollbar{display:none}.input-area{grid-area:input-area}@media screen and (max-width: 576px){::slotted(ic-text-field){--input-width:100%;max-width:20rem}.main-content{grid-template-areas:"title-area"\n "action-area"\n "input-area";justify-content:flex-start}.title-area{min-width:0}.action-area{min-width:100%;margin-top:var(--ic-space-md);justify-content:start}}@media screen and (min-width: 992px){:host(.ic-page-header-sticky-desktop){position:sticky;top:0;box-shadow:var(--ic-elevation-overlay);z-index:var(--ic-z-index-sticky-page-header)}}';const c=r;const l=class{constructor(t){e(this,t);this.resizeObserver=null;this.areButtonsReversed=false;this.deviceSize=s.XL;this.aligned="left";this.border=true;this.reverseOrder=false;this.size="medium";this.sticky=false;this.stickyDesktopOnly=false;this.theme="inherit";this.resizeObserverCallback=()=>{if(this.reverseOrder&&n(this.el,"actions")){this.applyReverseOrder()}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{this.resizeObserverCallback()}));this.resizeObserver.observe(this.el)};this.applyReverseOrder=()=>{var e;const t=o();if(t!==this.deviceSize){this.deviceSize=t}const a=(e=this.el.shadowRoot)===null||e===void 0?void 0:e.querySelector("div.action-area");const i=[];for(let e=0;e<this.actionContent.length;e++){const t=this.actionContent[e];let a=t.offsetHeight;if(a===undefined){a=0}i.push(a)}const n=Math.max(...i);let d=a.offsetHeight;if(d===undefined){d=0}const r=()=>{this.actionContent=this.actionContent.reverse();this.actionContent.forEach((e=>{this.el.append(e)}));this.areButtonsReversed=!this.areButtonsReversed};if(this.deviceSize>s.S&&d<=n&&!this.areButtonsReversed||(this.deviceSize>s.S&&d>n||this.deviceSize<=s.S)&&this.areButtonsReversed){r()}}}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}componentWillLoad(){this.actionContent=Array.from(this.el.querySelectorAll(`[slot="actions"]`))}componentDidLoad(){d(this.runResizeObserver)}render(){var e,i;const{size:s,border:o,heading:d,subheading:r,aligned:c,sticky:l,stickyDesktopOnly:b,theme:h}=this;const p=`${n(this.el,"heading")?(i=(e=this.el.querySelector('[slot="heading"]'))===null||e===void 0?void 0:e.textContent)!==null&&i!==void 0?i:"":d!==null&&d!==void 0?d:""} page sections`;return t(a,{key:"ef9b1c5acf30851bedddd8f840fae60b545dfd3f",class:{["ic-page-header-sticky"]:!!l,["ic-page-header-sticky-desktop"]:!l&&!!b,[`ic-theme-${h}`]:h!=="inherit"},"aria-label":this.el.ariaLabel||"page header"},t("header",{key:"e3f5ec39b13afbd9be424125fa43ea4634a90418",class:{["border-bottom"]:!!o,["tabs"]:n(this.el,"tabs")},role:"presentation"},t("ic-section-container",{key:"7b58d10dbc3e72c05db7fdc67342eedfde9ed139",aligned:c,fullHeight:n(this.el,"tabs")},n(this.el,"breadcrumbs")&&t("div",{key:"386e595418e6234228b2518c430d59248b68641f",class:"breadcrumb-area"},t("slot",{key:"c11be2d0fdccd46ff3ac512a2816b7d6ceceac72",name:"breadcrumbs"})),t("div",{key:"d9d1bd5b030a28dbdccbdbb80a5ef609bcc927df",class:"main-content"},t("div",{key:"4743493c932b474fad24fc708ca05648d516f3fe",class:"title-area"},t("div",{key:"34fb35fd36f2ef0d8edf3efa0b7e62323be512bb",class:"header-content"},t("slot",{key:"1830379330d7f2a2742dd5ed75c5ea1755d7f8aa",name:"heading"},t("ic-typography",{key:"44e86892aa90b0af8eb1def5733852a4e8225dbb",variant:s==="small"?"h4":"h2",class:"heading"},t("h2",{key:"be25fb99e3e8e5c81c209d1bcd57680718bdc5b8"},d))),t("slot",{key:"c907d0d661b042a77232979fd99a375dcfcc96fe",name:"heading-adornment"})),t("div",{key:"a7561b492f4d5135b4d8957694e498a50ca42645",class:{["subheading-content"]:!!r||n(this.el,"subheading"),["small"]:s==="small"}},t("slot",{key:"6dc20fc584493c88e1a3baaf5badf583ad4bf694",name:"subheading"},t("ic-typography",{key:"a1baec7c38856a1d982e7be6cdba10f59ca01351",variant:"body"},r)))),n(this.el,"actions")&&t("div",{key:"1b5c8bc9cdcb8398379665c2ca60a470a8e5a486",class:"action-area"},t("slot",{key:"dcc940cea6c4a0b5871aa1501752fed22cc5f932",name:"actions"})),n(this.el,"input")&&t("div",{key:"8d0ff957c398f1ac9d8cbc7c78ec18c9b2710a43",class:"input-area"},t("slot",{key:"3dc09d1512ad8ce911ddee0a2dddafb8ae52450c",name:"input"}))),(n(this.el,"stepper")||n(this.el,"tabs"))&&t("div",{key:"9f527e5a1c67ec718a55fa4756249bb0f4c6a6fe",class:"navigation-area"},n(this.el,"stepper")&&!n(this.el,"tabs")&&t("slot",{key:"c8f71660620ec8d74dcefb02f2663a625e539a4d",name:"stepper"}),n(this.el,"tabs")&&t("nav",{key:"b2aef6529f53572613bf7a0996e6f1644c98463b","aria-label":p},t("ic-horizontal-scroll",{key:"fcb0cd4af39f445f6dd6e84d46e9289a2623ce8f"},t("ul",{key:"20c1b075f4f784856f4b067d25d4b1aff1720327",class:"tabs-slot"},t("slot",{key:"3f35ee8f7b07edbe36f979aee6638e0e430d9ea0",name:"tabs"}))))))))}get el(){return i(this)}};l.style=c;export{l as ic_page_header};
2
- //# sourceMappingURL=p-a1e2e029.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["icPageHeaderCss","IcPageHeaderStyle0","PageHeader","constructor","hostRef","this","resizeObserver","areButtonsReversed","deviceSize","DEVICE_SIZES","XL","aligned","border","reverseOrder","size","sticky","stickyDesktopOnly","theme","resizeObserverCallback","isSlotUsed","el","applyReverseOrder","runResizeObserver","ResizeObserver","observe","currSize","getCurrentDeviceSize","actionArea","_a","shadowRoot","querySelector","actionHeights","i","actionContent","length","action","actionHeight","offsetHeight","undefined","push","max","Math","actionAreaHeight","appendActionContent","reverse","forEach","btn","append","S","disconnectedCallback","disconnect","componentWillLoad","Array","from","querySelectorAll","componentDidLoad","checkResizeObserver","render","heading","subheading","navAriaLabel","_b","textContent","h","Host","key","class","ariaLabel","role","fullHeight","name","variant"],"sources":["src/components/ic-page-header/ic-page-header.css?tag=ic-page-header&encapsulation=shadow","src/components/ic-page-header/ic-page-header.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-page-header: z-index of page-header\n */\n\n:host {\n display: block;\n z-index: var(--ic-z-index-page-header);\n}\n\n:host(.ic-page-header-sticky) {\n position: sticky;\n top: 0;\n box-shadow: var(--ic-elevation-overlay);\n z-index: var(--ic-z-index-sticky-page-header);\n}\n\nheader {\n background-color: var(--ic-page-header-background);\n}\n\nheader.border-bottom {\n border-bottom: var(--ic-border-default);\n border-bottom: var(--ic-space-1px) solid var(--ic-page-header-border);\n}\n\nheader.tabs {\n padding-top: var(--ic-space-md);\n}\n\n.breadcrumb-area {\n margin-bottom: var(--ic-space-md);\n}\n\n.main-content {\n display: grid;\n grid-template-columns: auto 1fr;\n grid-template-areas:\n \"title-area action-area\"\n \"input-area action-area\";\n column-gap: var(--ic-space-md);\n justify-content: space-between;\n width: 100%;\n}\n\n.title-area {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 19rem;\n grid-area: title-area;\n}\n\n.header-content {\n display: flex;\n align-items: center;\n width: 100%;\n flex-wrap: wrap;\n column-gap: var(--ic-space-md);\n}\n\n.heading {\n display: inline-block;\n overflow-wrap: break-word;\n hyphens: auto;\n}\n\n.subheading-content {\n margin-top: var(--ic-space-xs);\n}\n\n.subheading-content.small {\n margin-top: var(--ic-space-md);\n}\n\n.action-area {\n display: flex;\n gap: var(--ic-space-md);\n flex-flow: row wrap;\n justify-self: end;\n justify-content: flex-end;\n height: fit-content;\n grid-area: action-area;\n}\n\n.input-area,\n.navigation-area {\n margin-top: var(--ic-space-md);\n width: 100%;\n}\n\n.tabs-slot {\n display: flex;\n overflow-x: auto;\n padding: 0.5rem;\n margin: -0.5rem;\n}\n\n.tabs-slot::-webkit-scrollbar {\n display: none;\n}\n\n.input-area {\n grid-area: input-area;\n}\n\n@media screen and (max-width: 576px) {\n ::slotted(ic-text-field) {\n --input-width: 100%;\n\n max-width: 20rem;\n }\n\n .main-content {\n grid-template-areas:\n \"title-area\"\n \"action-area\"\n \"input-area\";\n justify-content: flex-start;\n }\n\n .title-area {\n min-width: 0;\n }\n\n .action-area {\n min-width: 100%;\n margin-top: var(--ic-space-md);\n justify-content: start;\n }\n}\n\n@media screen and (min-width: 992px) {\n :host(.ic-page-header-sticky-desktop) {\n position: sticky;\n top: 0;\n box-shadow: var(--ic-elevation-overlay);\n z-index: var(--ic-z-index-sticky-page-header);\n }\n}\n","import { Component, Host, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { IcAlignment, IcSizesNoLarge, IcThemeMode } from \"../../utils/types\";\n\nimport {\n isSlotUsed,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n checkResizeObserver,\n} from \"../../utils/helpers\";\n\n/**\n * @slot breadcrumbs - Content will be rendered in the breadcrumb area, above the title and action areas.\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot heading-adornment - Content will be rendered in the title area, adjacent to the heading.\n * @slot actions - Content will be rendered in the action area, adjacent to the title area.\n * @slot input - Content will be rendered in the input area, below the title area and adjacent to the action area.\n * @slot stepper - Content will be rendered in the navigation area, below the title and action areas. Note: stepper slot cannot be used when the tabs slot is being used.\n * @slot tabs - Content will be rendered in the navigation area, below the title and action areas. Note: the stepper slot cannot be used when the tabs slot is being used.\n */\n\n@Component({\n tag: \"ic-page-header\",\n styleUrl: \"ic-page-header.css\",\n shadow: true,\n})\nexport class PageHeader {\n private resizeObserver: ResizeObserver | null = null;\n\n @Element() el: HTMLIcPageHeaderElement;\n\n @State() actionContent: Node[];\n @State() areButtonsReversed: boolean = false;\n @State() deviceSize: number = DEVICE_SIZES.XL;\n\n /**\n * The alignment of the page header.\n */\n @Prop() aligned?: IcAlignment = \"left\";\n\n /**\n * If `true`, a border will be displayed along the bottom of the page header.\n */\n @Prop() border?: boolean = true;\n\n /**\n * The title to render on the page header.\n */\n @Prop() heading?: string;\n\n /**\n * If `true`, the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped.\n */\n @Prop() reverseOrder?: boolean = false;\n\n /**\n * The size of the page header component.\n */\n @Prop() size?: IcSizesNoLarge = \"medium\";\n\n /**\n * If `true`, the page header will be sticky at all breakpoints.\n */\n @Prop() sticky?: boolean = false;\n\n /**\n * If `true`, the page header will only be sticky for viewport widths of 992px and above.\n */\n @Prop() stickyDesktopOnly?: boolean = false;\n\n /**\n * The subtitle to render on the page header.\n */\n @Prop() subheading?: string;\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n componentWillLoad(): void {\n this.actionContent = Array.from(\n this.el.querySelectorAll(`[slot=\"actions\"]`)\n );\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n }\n\n private resizeObserverCallback = () => {\n if (this.reverseOrder && isSlotUsed(this.el, \"actions\")) {\n this.applyReverseOrder();\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback();\n });\n this.resizeObserver.observe(this.el);\n };\n\n private applyReverseOrder = (): void => {\n const currSize = getCurrentDeviceSize();\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n }\n\n const actionArea = this.el.shadowRoot?.querySelector(\n \"div.action-area\"\n ) as HTMLElement;\n const actionHeights: number[] = [];\n\n /* For each button in the actions slot, check the height of the button and push this number into the actionHeights array and then find the greatest number in this array (i.e. find the height of the tallest button) */\n for (let i = 0; i < this.actionContent.length; i++) {\n const action = this.actionContent[i] as HTMLElement;\n let actionHeight = action.offsetHeight;\n if (actionHeight === undefined) {\n actionHeight = 0;\n }\n actionHeights.push(actionHeight);\n }\n\n const max = Math.max(...actionHeights);\n\n /* The smallest breakpoint displays buttons in the same order the user has slotted them in. When the device size is larger than the small breakpoint then the order of the button reverses due to best practice for reading patterns. If the device size is larger than the small breakpoint and the buttons have started to wrap then they follow the order the user has slotted them in. This logic is programmed based on the height of the action-area div that wraps the actions slot. If the height of the action-area div is taller than the height of the tallest button, then it is assumed that the taller height is caused by the buttons wrapping */\n let actionAreaHeight = actionArea.offsetHeight;\n\n if (actionAreaHeight === undefined) {\n actionAreaHeight = 0;\n }\n\n const appendActionContent = () => {\n this.actionContent = this.actionContent.reverse();\n this.actionContent.forEach((btn: string | Node) => {\n this.el.append(btn);\n });\n this.areButtonsReversed = !this.areButtonsReversed;\n };\n\n if (\n (this.deviceSize > DEVICE_SIZES.S &&\n actionAreaHeight <= max &&\n !this.areButtonsReversed) ||\n (((this.deviceSize > DEVICE_SIZES.S && actionAreaHeight > max) ||\n this.deviceSize <= DEVICE_SIZES.S) &&\n this.areButtonsReversed)\n ) {\n appendActionContent();\n }\n };\n\n render() {\n const {\n size,\n border,\n heading,\n subheading,\n aligned,\n sticky,\n stickyDesktopOnly,\n theme,\n } = this;\n\n const navAriaLabel = `${\n isSlotUsed(this.el, \"heading\")\n ? this.el.querySelector('[slot=\"heading\"]')?.textContent ?? \"\"\n : heading ?? \"\"\n } page sections`;\n\n return (\n <Host\n class={{\n [\"ic-page-header-sticky\"]: !!sticky,\n [\"ic-page-header-sticky-desktop\"]: !sticky && !!stickyDesktopOnly,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n aria-label={this.el.ariaLabel || \"page header\"}\n >\n <header\n class={{\n [\"border-bottom\"]: !!border,\n [\"tabs\"]: isSlotUsed(this.el, \"tabs\"),\n }}\n role=\"presentation\"\n >\n <ic-section-container\n aligned={aligned}\n fullHeight={isSlotUsed(this.el, \"tabs\")}\n >\n {isSlotUsed(this.el, \"breadcrumbs\") && (\n <div class=\"breadcrumb-area\">\n <slot name=\"breadcrumbs\" />\n </div>\n )}\n <div class=\"main-content\">\n <div class=\"title-area\">\n <div class=\"header-content\">\n <slot name=\"heading\">\n <ic-typography\n variant={size === \"small\" ? \"h4\" : \"h2\"}\n class=\"heading\"\n >\n <h2>{heading}</h2>\n </ic-typography>\n </slot>\n <slot name=\"heading-adornment\" />\n </div>\n <div\n class={{\n [\"subheading-content\"]:\n !!subheading || isSlotUsed(this.el, \"subheading\"),\n [\"small\"]: size === \"small\",\n }}\n >\n <slot name=\"subheading\">\n <ic-typography variant=\"body\">{subheading}</ic-typography>\n </slot>\n </div>\n </div>\n {isSlotUsed(this.el, \"actions\") && (\n <div class=\"action-area\">\n <slot name=\"actions\" />\n </div>\n )}\n {isSlotUsed(this.el, \"input\") && (\n <div class=\"input-area\">\n <slot name=\"input\" />\n </div>\n )}\n </div>\n\n {(isSlotUsed(this.el, \"stepper\") ||\n isSlotUsed(this.el, \"tabs\")) && (\n <div class=\"navigation-area\">\n {isSlotUsed(this.el, \"stepper\") &&\n !isSlotUsed(this.el, \"tabs\") && <slot name=\"stepper\" />}\n {isSlotUsed(this.el, \"tabs\") && (\n <nav aria-label={navAriaLabel}>\n <ic-horizontal-scroll>\n <ul class=\"tabs-slot\">\n <slot name=\"tabs\" />\n </ul>\n </ic-horizontal-scroll>\n </nav>\n )}\n </div>\n )}\n </ic-section-container>\n </header>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1 +0,0 @@
1
- {"version":3,"names":["icStepCss","IcStepStyle0","Step","constructor","hostRef","this","current","icI18n","next","step","of","lastStep","completed","notRequired","required","optional","theme","type","typeChangeHandler","variant","render","compactStepStyling","heading","lastStepNum","nextStepHeading","progress","status","stepNum","subheading","ariaLabel","stepStatus","isPropDefined","toUpperCase","slice","stepType","statusIcon","h","key","class","innerHTML","checkIcon","warningIcon","compactStep","size","undefined","icon","partialBar","finalStep","_a","el","parentElement","classList","contains","defaultStep","Host","role","_b"],"sources":["src/components/ic-step/ic-step.css?tag=ic-step&encapsulation=shadow","src/components/ic-step/ic-step.tsx"],"sourcesContent":["/* SHARED STYLING */\n:host {\n display: flex;\n flex: auto;\n\n --ic-typography-color: currentcolor;\n}\n\n.step {\n display: flex;\n flex: 1 1 0;\n}\n\n.step-icon {\n display: flex;\n justify-content: center;\n}\n\n.heading,\n.subheading,\n.step-status,\n.next-step {\n white-space: pre-line;\n}\n\n.next-step {\n color: var(--ic-stepper-compact-step-next-text);\n}\n\n.visually-hidden {\n position: absolute;\n left: -9999px;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n}\n\n.visually-hidden:dir(rtl) {\n right: -9999px;\n}\n\n/* COMPACT STEP STYLING */\n:host(.ic-step-compact) {\n column-gap: var(--ic-space-sm);\n\n --compact-step-inner-color: var(--ic-step-indicator-status-current);\n --compact-step-outer-color: var(--ic-step-indicator-status-remaining);\n --compact-step-circular-line-width: var(--ic-space-xxs);\n}\n\n:host(.ic-step-compact) .step {\n column-gap: var(--ic-space-sm);\n}\n\n:host(.ic-step-compact) .step:not(.current) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n\n.compact-step-progress-indicator {\n margin: var(--ic-space-xs) 0 0;\n}\n\n:host ic-loading-indicator::part(ic-loading-container) {\n border-radius: 50%;\n}\n\n:host() ic-loading-indicator::part(ic-loading-container) {\n background-color: var(--ic-step-indicator-background);\n}\n\n:host(.ic-step-compact) .heading-area {\n display: flex;\n flex-direction: column;\n width: 14.25rem;\n}\n\n:host(.ic-step-compact) .heading {\n color: var(--ic-stepper-compact-step-title);\n}\n\n:host(.ic-step-compact) .disabled .heading {\n color: var(--ic-stepper-compact-step-title-disabled);\n}\n\n.info-line {\n display: flex;\n column-gap: var(--ic-space-xs);\n}\n\n.step-status {\n display: flex;\n color: var(--ic-stepper-compact-step-requirement-text);\n column-gap: var(--ic-space-xxxs);\n}\n\n.compact-step-completed .step-status {\n color: var(--ic-stepper-compact-step-completed-text);\n}\n\n.compact-step-disabled :is(.heading, .step-status) {\n color: var(--ic-stepper-compact-step-requirement-text-disabled);\n}\n\n.step-num {\n color: var(--ic-stepper-compact-step-stage-text);\n white-space: nowrap;\n}\n\n:host(.ic-step-compact) .step-icon {\n margin: var(--ic-space-xxxs);\n}\n\n:host(.ic-step-compact) .step-icon svg {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n/* DEFAULT STEP STYLING */\n:host(.ic-step-default) .step {\n flex-direction: column;\n}\n\n:host(.ic-step-default.last-step) {\n flex-grow: initial;\n}\n\n.step-top {\n display: flex;\n width: 100%;\n align-items: center;\n align-self: flex-start;\n height: 2.5rem;\n}\n\n:host(.ic-step-default) .step-icon {\n border-radius: 50%;\n background-color: var(--ic-step-number-inactive);\n}\n\n.step-icon-inner {\n width: var(--ic-space-xl);\n height: var(--ic-space-xl);\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n color: var(--ic-step-number-text-inactive);\n}\n\n:host(.ic-step-default) .current {\n color: var(--ic-status-info-default);\n}\n\n:host(.ic-step-default) .heading-area {\n margin: var(--ic-space-xs) 0;\n padding-right: var(--ic-space-xs);\n width: 100%;\n}\n\n:host(.ic-step-default) .heading,\n.subheading {\n width: fit-content;\n}\n\n.heading {\n color: var(--ic-step-title);\n}\n\n.current .heading {\n color: var(--ic-step-title-current);\n}\n\n.completed .heading {\n color: var(--ic-step-title-success);\n}\n\n.disabled .heading {\n color: var(--ic-step-title-disabled);\n}\n\n.subheading {\n color: var(--ic-step-title-status-text-inactive);\n}\n\n.current .subheading {\n color: var(--ic-step-title-status-text-current);\n}\n\n.disabled .subheading {\n color: var(--ic-step-title-status-text-disabled);\n}\n\n:host(.ic-step-default) .completed {\n color: var(--ic-status-success-default);\n}\n\n.active .step-icon-inner {\n box-shadow: inset var(--ic-step-number-inactive-outline) 0 0 0 0.125rem;\n}\n\n.current .step-icon-inner {\n background-color: var(--ic-step-number-background-active);\n color: var(--ic-step-number-text-current);\n}\n\n.disabled {\n color: var(--ic-color-text-disabled-mid);\n}\n\n.disabled .step-icon-inner {\n border: var(--ic-border-width) dashed var(--ic-step-number-disabled);\n width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n color: var(--ic-step-number-text-disabled);\n}\n\n.disabled .step-icon {\n background-color: transparent !important;\n}\n\n.completed .step-icon-inner {\n background: var(--ic-step-number-background-success);\n box-shadow: inset var(--ic-step-number-background-success) 0 0 0\n var(--ic-space-xxxs);\n border-radius: 100%;\n}\n\n:host(.ic-step-default) .current .step-icon {\n border: var(--ic-space-xxxs) solid var(--ic-step-number-current-outline);\n padding: var(--ic-space-xxxs);\n margin: 0 calc(-1 * var(--ic-space-xxxs));\n background-color: var(--ic-step-number-current-outer-fill);\n\n /* compensating for the circle being bigger than other steps */\n}\n\n.step-connect {\n height: var(--ic-space-xxxs);\n background-color: var(--ic-stepper-connector-remaining-status);\n margin: 0 var(--ic-space-xs);\n border-radius: var(--ic-space-xxs);\n width: 100%;\n}\n\n.aligned-full-width.step-connect {\n min-width: 6.25rem;\n width: 100%;\n}\n\n.disabled .step-connect {\n height: 0;\n background-color: rgb(0 0 0 / 0%);\n border-top: 0.125rem dashed var(--ic-stepper-connector-disabled);\n border-radius: 0;\n}\n\n.completed .step-connect {\n background-color: var(--ic-stepper-connector-success);\n}\n\n.step-connect-inner {\n width: 70%;\n display: flex;\n flex: auto;\n height: var(--ic-space-xxxs);\n border-radius: var(--ic-space-xxs);\n background-color: var(--ic-stepper-connector-current-status);\n}\n\n.step-icon-inner .check-icon {\n padding-top: var(--ic-space-xxs);\n}\n\n.step-icon-inner .check-icon svg {\n width: var(--ic-space-md);\n height: auto;\n}\n\n.step-icon-inner .check-icon > svg > path {\n fill: var(--ic-step-number-icon-success);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n /* COMPACT STEP */\n .compact-step-disabled :is(.heading, .step-status) {\n color: GrayText;\n }\n\n /* DEFAULT STEP */\n .step-connect:not(.disabled .step-connect) {\n border: var(--ic-border-hc);\n }\n\n .active .step-icon-inner,\n .completed .step-icon-inner,\n .current .step-icon-inner {\n forced-color-adjust: none;\n box-shadow: inset canvastext 0 0 0 0.125rem;\n background-color: transparent;\n color: canvastext;\n }\n\n :host(.ic-step-default) .current .step-icon {\n padding: 0;\n border: none;\n }\n\n .disabled,\n .disabled .heading-area,\n .disabled .step-icon-inner,\n .disabled .heading {\n color: GrayText;\n }\n\n .step-connect-inner,\n .completed .step-connect {\n background-color: canvastext;\n }\n\n .step-icon-inner .check-icon > svg > path {\n fill: canvastext;\n }\n}\n","import { Component, Host, h, Prop, Element, Watch } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon-outline.svg\";\nimport {\n IcStepVariants,\n IcStepStatuses,\n IcStepTypes,\n IcStepI18n,\n} from \"./ic-step.types\";\nimport { isPropDefined } from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-step\",\n styleUrl: \"ic-step.css\",\n shadow: true,\n})\nexport class Step {\n @Element() el: HTMLIcStepElement;\n\n /**\n * @internal If a compact stepper is being used, this sets the styling of the step.\n */\n @Prop() compactStepStyling?: IcStepTypes;\n\n /**\n * @internal If `true`, and a compact stepper is being used, the current step will be the only step in view.\n */\n @Prop({ mutable: true }) current?: boolean = false;\n\n /**\n * Words within the component that can be replaced to translate the component into a different language\n */\n @Prop() icI18n: IcStepI18n = {\n next: \"Next\",\n step: \"Step\",\n of: \"of\",\n lastStep: \"Last step\",\n completed: \"Completed\",\n notRequired: \"Not required\",\n required: \"Required\",\n optional: \"Optional\",\n };\n\n /**\n * @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.\n */\n @Prop() lastStep!: boolean;\n\n /**\n * @internal The step number of the final step. This is managed by ic-stepper.\n */\n @Prop() lastStepNum?: number;\n\n /**\n * @internal The name of the next step. This is managed by ic-stepper.\n */\n @Prop() nextStepHeading?: string;\n\n /**\n * @internal The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper.\n */\n @Prop() progress?: number;\n\n /**\n * @internal The step number, managed by ic-stepper.\n */\n @Prop() stepNum?: number;\n\n /**\n * The status of the step. Use this prop to display a status message on the step if it is required or optional.\n */\n @Prop() status?: IcStepStatuses;\n\n /**\n * Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.\n */\n @Prop() subheading?: string;\n\n /**\n * The title of the step within the stepper.\n */\n @Prop() heading?: string;\n\n /**\n * @internal Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /**\n * @internal The variant of the step. This is managed by ic-stepper.\n */\n @Prop() variant!: IcStepVariants;\n\n /**\n * The state of the step within the stepper.\n */\n @Prop() type?: IcStepTypes = \"active\";\n\n @Watch(\"type\")\n typeChangeHandler(): void {\n if (this.variant === \"compact\" && this.type === \"current\") {\n this.current = true;\n } else {\n this.current = false;\n }\n }\n\n render() {\n const {\n compactStepStyling,\n current,\n heading,\n icI18n,\n lastStep,\n lastStepNum,\n nextStepHeading,\n progress,\n status,\n stepNum,\n subheading,\n theme,\n type,\n variant,\n } = this;\n\n // ARIA LABEL\n let ariaLabel = \"\";\n\n if (type === \"completed\") {\n ariaLabel = `. ${icI18n.completed}`;\n } else if (type === \"disabled\") {\n ariaLabel = `. ${icI18n.notRequired}`;\n } else if (status === \"required\") {\n ariaLabel = `. ${icI18n.required}`;\n } else if (status === \"optional\") {\n ariaLabel = `. ${icI18n.optional}`;\n }\n\n // STEP STATUS\n let stepStatus;\n if (status && isPropDefined(status)) {\n stepStatus = status[0].toUpperCase() + status.slice(1);\n }\n\n // STEP TYPE\n let stepType;\n if (type === \"disabled\" || compactStepStyling === \"disabled\") {\n stepType = icI18n.notRequired;\n } else if (compactStepStyling === \"completed\") {\n stepType = icI18n.completed;\n }\n\n // STATUS ICON FOR COMPACT STEP\n let statusIcon;\n if (type === \"completed\" || compactStepStyling === \"completed\") {\n statusIcon = (\n <span\n class=\"check-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={checkIcon}\n ></span>\n );\n } else if (type === \"disabled\" || compactStepStyling === \"disabled\") {\n statusIcon = (\n <span\n class=\"warning-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={warningIcon}\n ></span>\n );\n }\n\n // COMPACT STEP COMPONENT\n const compactStep = (\n <div\n class={{\n [\"step\"]: true,\n [\"current\"]: !!current,\n [`compact-step-${compactStepStyling}`]: !!compactStepStyling,\n [\"disabled\"]:\n type === \"disabled\" || compactStepStyling === \"disabled\",\n }}\n >\n <ic-loading-indicator\n class={{\n \"compact-step-progress-indicator\": true,\n \"not-required\":\n type === \"disabled\" || compactStepStyling === \"disabled\",\n }}\n aria-hidden=\"true\"\n size=\"small\"\n inner-label={stepNum}\n progress={progress}\n ></ic-loading-indicator>\n <div class=\"heading-area\">\n <ic-typography variant=\"h4\" class=\"heading\">\n {heading}\n </ic-typography>\n <div class=\"info-line\">\n <ic-typography variant=\"caption\" class=\"step-num\">\n {`${stepNum} ${icI18n.of} ${lastStepNum}`}\n <span class=\"visually-hidden\"> steps</span>\n </ic-typography>\n {(this.subheading ||\n type === \"completed\" ||\n type === \"disabled\" ||\n (this.variant === \"compact\" &&\n !!compactStepStyling &&\n compactStepStyling !== \"active\") ||\n !!status) && (\n <div class=\"step-status\">\n {statusIcon !== undefined && statusIcon}\n {(subheading || stepType) && (\n <ic-typography variant=\"caption\">\n {subheading !== null && isPropDefined(subheading)\n ? subheading\n : type === \"disabled\" ||\n (variant === \"compact\" &&\n compactStepStyling === \"disabled\") ||\n type === \"completed\" ||\n (variant === \"compact\" &&\n compactStepStyling === \"completed\")\n ? stepType\n : status && stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n {lastStep ? (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n {icI18n.lastStep}\n </ic-typography>\n ) : (\n isPropDefined(nextStepHeading) && (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n {icI18n.next}\n <span class=\"visually-hidden\"> {icI18n.step}</span>:{\" \"}\n {this.nextStepHeading}\n </ic-typography>\n )\n )}\n </div>\n </div>\n );\n\n // ICON FOR DEFAULT STEP\n let icon;\n if (type !== \"completed\") {\n icon = (\n <ic-typography variant=\"subtitle-small\">\n <span class=\"step-icon-inner\" aria-hidden=\"true\">\n {this.stepNum}\n </span>\n </ic-typography>\n );\n } else {\n icon = (\n <div class=\"step-icon-inner\" aria-hidden=\"true\">\n <span class=\"check-icon\" innerHTML={checkIcon}></span>\n </div>\n );\n }\n\n // STEP CONNECT FOR DEFAULT STEP\n const partialBar = type === \"current\" && (\n <div class=\"step-connect-inner\"></div>\n );\n\n const finalStep = !lastStep && (\n <div\n class={{\n [\"step-connect\"]: true,\n [\"aligned-full-width\"]: !!(\n this.el.parentElement?.classList.contains(\"ic-stepper-default\") &&\n !this.el.parentElement.classList.contains(\"ic-stepper-aligned-left\")\n ),\n }}\n >\n {partialBar}\n </div>\n );\n\n // DEFAULT STEP COMPONENT\n const defaultStep = (\n <div\n class={{\n [\"step\"]: true,\n [`${type}`]: true,\n }}\n >\n <div class=\"step-top\">\n <div class=\"step-icon\">{icon}</div>\n {finalStep}\n </div>\n {(heading || subheading || status) && (\n <div class=\"heading-area\">\n {heading && (\n <ic-typography variant=\"subtitle-large\" class=\"heading\">\n {heading}\n </ic-typography>\n )}\n {heading && (subheading || status) && (\n <ic-typography variant=\"caption\" class=\"subheading\">\n {subheading !== null && isPropDefined(subheading)\n ? subheading\n : stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n );\n\n return (\n <Host\n role=\"listitem\"\n aria-label={`${icI18n.step} ${stepNum}${ariaLabel}`}\n aria-current={(current || type === \"current\") && \"step\"}\n class={{\n [\"aligned-full-width\"]: !!(\n this.el.parentElement?.classList.contains(\"ic-stepper-default\") &&\n !this.el.parentElement.classList.contains(\"ic-stepper-aligned-left\")\n ),\n [`ic-step-${variant}`]: true,\n [`ic-theme-${theme}`]: this.theme !== \"inherit\",\n }}\n >\n {variant === \"compact\" ? compactStep : defaultStep}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{r as t,h as i,H as s,g as e}from"./p-8e4e97b4.js";import{p as h,h as l}from"./p-b57e59b7.js";import"./p-bddf799a.js";const a=":host{display:flex;width:100%}.step-item-list{display:flex;margin:0;padding:0}:host(.ic-stepper-default:not(.ic-stepper-aligned-left)) .step-item-list{flex:auto}:host(.ic-stepper-compact) ul ::slotted(ic-step){display:none}:host(.ic-stepper-compact) ul ::slotted(ic-step.show){display:flex}:host(.ic-stepper-compact) ul ::slotted(ic-step.hide){display:none;opacity:0;visibility:hidden}";const o=a;const d=class{constructor(i){t(this,i);var s;this.resizeObserver=null;this.visuallyHidden="visually-hidden";this.alignedFullWidth=true;this.autoSetStepTitles=true;this.lastStepWidth=0;this.noOfResizes=0;this.stepperWidth=(s=document.querySelector("ic-stepper"))===null||s===void 0?void 0:s.getBoundingClientRect().width;this.stepTypes=[];this.variantOverride=this.variant!=="compact";this.aligned="full-width";this.connectorWidth=100;this.hideStepInfo=false;this.icI18n={next:"Next",step:"Step",of:"of",lastStep:"Last step",completed:"Completed",notRequired:"Not required",required:"Required",optional:"Optional"};this.theme="inherit";this.variant="default";this.getChildren=()=>{this.steps=Array.from(this.el.querySelectorAll("ic-step"));this.stepsWithStepTitles=Array.from(this.el.querySelectorAll("ic-step[heading]"))};this.checkStepTitles=()=>{if(this.stepsWithStepTitles.length<this.steps.length&&this.variantOverride&&this.variant==="compact"){this.noOfResizes=this.noOfResizes+1;if(this.noOfResizes===1){console.error(`The prop 'heading' is required for all steps of the Stepper component (compact variant)`)}}};this.setStepTypes=()=>{this.getChildren();this.stepTypes=[];for(let t=0;t<this.steps.length;t++){this.stepTypes.push("active")}};this.setStepperWidth=()=>{this.alignedFullWidth=this.variant==="default"&&this.aligned==="full-width";const t=this.steps[this.steps.length-1];t.style.maxWidth="none";if(this.alignedFullWidth){this.stepperWidth=this.el.offsetWidth;t.style.maxWidth=h(`${this.stepperWidth/this.steps.length}px`);this.lastStepWidth=t.offsetWidth}};this.initialiseStepStates=()=>{this.steps.forEach(((t,i)=>{var s,e,l;if(this.icI18n!==undefined){t.icI18n=this.icI18n}t.variant=this.variant;t.stepNum=i+1;t.lastStep=i===this.steps.length-1;t.lastStepNum=this.steps.length;if(t.type!=="current"){t.current=false;this.stepTypes[i]=t.type}else{t.current=true}const a=t.shadowRoot&&t.shadowRoot.querySelector(".step > .heading-area");if(this.stepsWithStepTitles.length==0&&this.variantOverride){if(this.variant==="compact"){this.autoSetStepTitles=true;if(this.autoSetStepTitles){t.heading="Step "+t.stepNum;a&&((s=a===null||a===void 0?void 0:a.querySelector(".heading"))===null||s===void 0?void 0:s.setAttribute("aria-hidden","true"))}}if(this.variant==="default"){this.autoSetStepTitles=false;if(!this.autoSetStepTitles){t.heading=undefined;a&&((e=a===null||a===void 0?void 0:a.querySelector(".heading"))===null||e===void 0?void 0:e.removeAttribute("aria-hidden"))}}}if(this.variant==="compact"){if(t.current===true||t.type==="current"){t.classList.remove("hide");t.classList.add("show")}else if(t.classList.contains("show")){t.classList.remove("show");t.classList.add("hide")}if(!t.lastStep){t.nextStepHeading=this.steps[i+1].heading;t.progress=t.stepNum/this.steps.length*100}else if(t.lastStep&&this.stepTypes[i]!=="completed"){t.progress=95}else{t.progress=100}if(this.hideStepInfo&&a!==null){a.classList.remove(this.visuallyHidden)}t.compactStepStyling=this.stepTypes[i]}if(this.variant==="default"){if(!t.lastStep){if(this.alignedFullWidth&&this.stepperWidth!==undefined){t.style.width=h(`${(this.stepperWidth-this.lastStepWidth)/(this.steps.length-1)}px`);t.style.minWidth=h("148px")}}else if(t.lastStep){t.classList.add("last-step");if(this.alignedFullWidth){t.style.maxWidth=`${this.lastStepWidth}px`}else if(this.connectorWidth){t.style.maxWidth=this.connectorWidth>100?h(`${this.connectorWidth+48}px`):h("148px")}}if(this.aligned==="left"&&this.connectorWidth){t.style.width=this.connectorWidth>100?h(`${this.connectorWidth+48}px`):h("148px");const i=(l=t.shadowRoot)===null||l===void 0?void 0:l.querySelector(".step > .step-top > .step-connect");if(i){i.style.width=this.connectorWidth>100?h(`${this.connectorWidth}px`):h("100px")}}if(this.hideStepInfo&&a!==null){a.classList.add(this.visuallyHidden)}}}))};this.setHideStepInfo=()=>{this.steps.forEach((t=>{var i,s,e;const h=(i=t.shadowRoot)===null||i===void 0?void 0:i.querySelector(".step > .heading-area");if(h){if(this.hideStepInfo){(s=h.classList)===null||s===void 0?void 0:s.add(this.visuallyHidden)}else{(e=h.classList)===null||e===void 0?void 0:e.remove(this.visuallyHidden)}}}))};this.overrideVariant=()=>{if(this.variantOverride){let t=148*this.steps.length;if(this.aligned==="left"&&this.connectorWidth&&this.connectorWidth>100){t=(this.connectorWidth+48)*this.steps.length}if(this.el.clientWidth<t){this.variant="compact"}else{this.variant="default"}}};this.resizeObserverCallback=()=>{this.getChildren();this.checkStepTitles();this.overrideVariant();this.setStepperWidth();this.initialiseStepStates();this.handleThemeChange()};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{this.resizeObserverCallback()}));this.resizeObserver.observe(this.el)}}handleThemeChange(){this.getChildren();this.steps.forEach((t=>{t.theme=this.theme}))}handlePropChange(){this.setHideStepInfo();this.getChildren()}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}componentWillLoad(){this.setStepTypes();this.handleThemeChange();if(this.variant==="compact"){this.variantOverride=false}}componentWillRender(){this.initialiseStepStates()}componentDidLoad(){l(this.runResizeObserver)}render(){return i(s,{key:"a5ec9b8d778ba54adf1b3034455e64df0a51fd7c",class:{[`ic-stepper-${this.variant}`]:true,["ic-stepper-aligned-left"]:this.variant==="default"&&this.aligned==="left",[`ic-theme-${this.theme}`]:this.theme!=="inherit"}},i("ul",{key:"4140f5cb20325ee4c5c98c855c4b822a448294e8",class:"step-item-list"},i("slot",{key:"cda080de502e7760bb3f9a1519f0261b554b0b77"})))}get el(){return e(this)}static get watchers(){return{theme:["handleThemeChange"],hideStepInfo:["handlePropChange"],variant:["handlePropChange"]}}};d.style=o;export{d as ic_stepper};
2
- //# sourceMappingURL=p-c2d5e301.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["icStepperCss","IcStepperStyle0","Stepper","constructor","hostRef","this","resizeObserver","visuallyHidden","alignedFullWidth","autoSetStepTitles","lastStepWidth","noOfResizes","stepperWidth","_a","document","querySelector","getBoundingClientRect","width","stepTypes","variantOverride","variant","aligned","connectorWidth","hideStepInfo","icI18n","next","step","of","lastStep","completed","notRequired","required","optional","theme","getChildren","steps","Array","from","el","querySelectorAll","stepsWithStepTitles","checkStepTitles","length","console","error","setStepTypes","i","push","setStepperWidth","style","maxWidth","offsetWidth","pxToRem","initialiseStepStates","forEach","index","undefined","stepNum","lastStepNum","type","current","stepTitleArea","shadowRoot","heading","setAttribute","_b","removeAttribute","classList","remove","add","contains","nextStepHeading","progress","compactStepStyling","minWidth","stepConnect","_c","setHideStepInfo","overrideVariant","minDefaultStepperWidth","clientWidth","resizeObserverCallback","handleThemeChange","runResizeObserver","ResizeObserver","observe","handlePropChange","disconnectedCallback","disconnect","componentWillLoad","componentWillRender","componentDidLoad","checkResizeObserver","render","h","Host","key","class"],"sources":["src/components/ic-stepper/ic-stepper.css?tag=ic-stepper&encapsulation=shadow","src/components/ic-stepper/ic-stepper.tsx"],"sourcesContent":[":host {\n display: flex;\n width: 100%;\n}\n\n.step-item-list {\n display: flex;\n margin: 0;\n padding: 0;\n}\n\n:host(.ic-stepper-default:not(.ic-stepper-aligned-left)) .step-item-list {\n flex: auto;\n}\n\n:host(.ic-stepper-compact) ul ::slotted(ic-step) {\n display: none;\n}\n\n:host(.ic-stepper-compact) ul ::slotted(ic-step.show) {\n display: flex;\n}\n\n:host(.ic-stepper-compact) ul ::slotted(ic-step.hide) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n","import { Component, Element, Host, Prop, h, State, Watch } from \"@stencil/core\";\nimport { checkResizeObserver, pxToRem } from \"../../utils/helpers\";\nimport { IcStepperAlignment } from \"./ic-stepper.types\";\nimport {\n IcStepTypes,\n IcStepVariants,\n IcStepI18n,\n} from \"../ic-step/ic-step.types\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-stepper\",\n styleUrl: \"ic-stepper.css\",\n shadow: true,\n})\nexport class Stepper {\n private resizeObserver: ResizeObserver | null = null;\n private steps: HTMLIcStepElement[];\n private stepsWithStepTitles: HTMLIcStepElement[];\n private visuallyHidden: string = \"visually-hidden\";\n\n @Element() el: HTMLIcStepperElement;\n\n @State() alignedFullWidth: boolean = true;\n @State() autoSetStepTitles: boolean = true;\n @State() lastStepWidth: number = 0;\n @State() noOfResizes?: number = 0;\n @State() stepperWidth: number | undefined = document\n .querySelector(\"ic-stepper\")\n ?.getBoundingClientRect().width;\n @State() stepTypes: IcStepTypes[] = [];\n @State() variantOverride?: boolean = this.variant !== \"compact\";\n\n /**\n * The alignment of the default stepper within its container.\n */\n @Prop() aligned?: IcStepperAlignment = \"full-width\";\n\n /**\n * The length of the connector between each step in pixels. Minimum length is 100px.\n */\n @Prop() connectorWidth?: number = 100;\n\n /**\n * If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.\n */\n @Prop() hideStepInfo?: boolean = false;\n\n /**\n * Provide alternative values for text in all child steps. For the purpose of translating the application into other languages.\n */\n @Prop() icI18n?: IcStepI18n = {\n next: \"Next\",\n step: \"Step\",\n of: \"of\",\n lastStep: \"Last step\",\n completed: \"Completed\",\n notRequired: \"Not required\",\n required: \"Required\",\n optional: \"Optional\",\n };\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n handleThemeChange(): void {\n this.getChildren();\n this.steps.forEach((step) => {\n step.theme = this.theme;\n });\n }\n\n /**\n * The variant of the stepper.\n */\n @Prop({ mutable: true }) variant?: IcStepVariants = \"default\";\n\n @Watch(\"hideStepInfo\")\n @Watch(\"variant\")\n handlePropChange(): void {\n this.setHideStepInfo();\n this.getChildren();\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n componentWillLoad(): void {\n this.setStepTypes();\n this.handleThemeChange();\n\n if (this.variant === \"compact\") {\n this.variantOverride = false;\n }\n }\n\n componentWillRender(): void {\n this.initialiseStepStates();\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n }\n\n // Get all steps currently within this stepper\n private getChildren = (): void => {\n this.steps = Array.from(this.el.querySelectorAll(\"ic-step\"));\n\n this.stepsWithStepTitles = Array.from(\n this.el.querySelectorAll(\"ic-step[heading]\")\n );\n };\n\n // Inform the user that stepTitles are required on all steps in a compact stepper\n private checkStepTitles = (): void => {\n if (\n this.stepsWithStepTitles.length < this.steps.length &&\n this.variantOverride &&\n this.variant === \"compact\"\n ) {\n this.noOfResizes = this.noOfResizes! + 1;\n if (this.noOfResizes === 1) {\n console.error(\n `The prop 'heading' is required for all steps of the Stepper component (compact variant)`\n );\n }\n }\n };\n\n private setStepTypes = (): void => {\n this.getChildren();\n this.stepTypes = [];\n for (let i = 0; i < this.steps.length; i++) {\n this.stepTypes.push(\"active\");\n }\n };\n\n private setStepperWidth = (): void => {\n this.alignedFullWidth =\n this.variant === \"default\" && this.aligned === \"full-width\";\n\n const lastStep = this.steps[this.steps.length - 1];\n lastStep.style.maxWidth = \"none\";\n\n if (this.alignedFullWidth) {\n this.stepperWidth = this.el.offsetWidth;\n lastStep.style.maxWidth = pxToRem(\n `${this.stepperWidth / this.steps.length}px`\n );\n this.lastStepWidth = lastStep.offsetWidth;\n }\n };\n\n private initialiseStepStates = (): void => {\n this.steps.forEach((step, index) => {\n // Set language\n if (this.icI18n !== undefined) {\n step.icI18n = this.icI18n;\n }\n // Set variant\n step.variant = this.variant!;\n // Assign stepNum to each step\n step.stepNum = index + 1;\n // Assign lastStep to final step\n step.lastStep = index === this.steps.length - 1;\n step.lastStepNum = this.steps.length;\n\n if (step.type !== \"current\") {\n step.current = false;\n this.stepTypes[index] = step.type!;\n } else {\n step.current = true;\n }\n\n const stepTitleArea =\n step.shadowRoot &&\n step.shadowRoot.querySelector(\".step > .heading-area\");\n\n if (this.stepsWithStepTitles.length == 0 && this.variantOverride) {\n if (this.variant === \"compact\") {\n this.autoSetStepTitles = true;\n if (this.autoSetStepTitles) {\n step.heading = \"Step \" + step.stepNum;\n stepTitleArea &&\n stepTitleArea\n ?.querySelector(\".heading\")\n ?.setAttribute(\"aria-hidden\", \"true\");\n }\n }\n if (this.variant === \"default\") {\n this.autoSetStepTitles = false;\n if (!this.autoSetStepTitles) {\n step.heading = undefined;\n stepTitleArea &&\n stepTitleArea\n ?.querySelector(\".heading\")\n ?.removeAttribute(\"aria-hidden\");\n }\n }\n }\n\n if (this.variant === \"compact\") {\n if (step.current === true || step.type === \"current\") {\n step.classList.remove(\"hide\");\n step.classList.add(\"show\");\n } else if (step.classList.contains(\"show\")) {\n step.classList.remove(\"show\");\n step.classList.add(\"hide\");\n }\n\n if (!step.lastStep) {\n step.nextStepHeading = this.steps[index + 1].heading;\n step.progress = (step.stepNum / this.steps.length) * 100;\n } else if (step.lastStep && this.stepTypes[index] !== \"completed\") {\n step.progress = 95;\n } else {\n step.progress = 100;\n }\n\n if (this.hideStepInfo && stepTitleArea !== null) {\n stepTitleArea.classList.remove(this.visuallyHidden);\n }\n\n step.compactStepStyling = this.stepTypes[index];\n }\n\n if (this.variant === \"default\") {\n if (!step.lastStep) {\n if (this.alignedFullWidth && this.stepperWidth !== undefined) {\n step.style.width = pxToRem(\n `${\n (this.stepperWidth - this.lastStepWidth) /\n (this.steps.length - 1)\n }px`\n );\n step.style.minWidth = pxToRem(\"148px\");\n }\n } else if (step.lastStep) {\n step.classList.add(\"last-step\");\n if (this.alignedFullWidth) {\n step.style.maxWidth = `${this.lastStepWidth}px`;\n } else if (this.connectorWidth) {\n step.style.maxWidth =\n this.connectorWidth > 100\n ? pxToRem(`${this.connectorWidth + 48}px`)\n : pxToRem(\"148px\");\n }\n }\n\n if (this.aligned === \"left\" && this.connectorWidth) {\n step.style.width =\n this.connectorWidth > 100\n ? pxToRem(`${this.connectorWidth + 48}px`)\n : pxToRem(\"148px\");\n const stepConnect = step.shadowRoot?.querySelector(\n \".step > .step-top > .step-connect\"\n ) as HTMLElement;\n\n if (stepConnect) {\n stepConnect.style.width =\n this.connectorWidth > 100\n ? pxToRem(`${this.connectorWidth}px`)\n : pxToRem(\"100px\");\n }\n }\n\n if (this.hideStepInfo && stepTitleArea !== null) {\n stepTitleArea.classList.add(this.visuallyHidden);\n }\n }\n });\n };\n\n private setHideStepInfo = (): void => {\n this.steps.forEach((step) => {\n const stepTitleArea = step.shadowRoot?.querySelector(\n \".step > .heading-area\"\n );\n\n if (stepTitleArea) {\n if (this.hideStepInfo) {\n stepTitleArea.classList?.add(this.visuallyHidden);\n } else {\n stepTitleArea.classList?.remove(this.visuallyHidden);\n }\n }\n });\n };\n\n private overrideVariant = () => {\n if (this.variantOverride) {\n let minDefaultStepperWidth = 148 * this.steps.length;\n\n if (\n this.aligned === \"left\" &&\n this.connectorWidth &&\n this.connectorWidth > 100\n ) {\n minDefaultStepperWidth = (this.connectorWidth + 48) * this.steps.length;\n }\n if (this.el.clientWidth < minDefaultStepperWidth) {\n this.variant = \"compact\";\n } else {\n this.variant = \"default\";\n }\n }\n };\n\n private resizeObserverCallback = () => {\n this.getChildren();\n this.checkStepTitles();\n this.overrideVariant();\n this.setStepperWidth();\n this.initialiseStepStates();\n this.handleThemeChange();\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback();\n });\n this.resizeObserver.observe(this.el);\n };\n\n render() {\n return (\n <Host\n class={{\n [`ic-stepper-${this.variant}`]: true,\n [\"ic-stepper-aligned-left\"]:\n this.variant === \"default\" && this.aligned === \"left\",\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <ul class=\"step-item-list\">\n <slot></slot>\n </ul>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1 +0,0 @@
1
- {"version":3,"names":["icCheckboxGroupCss","IcCheckboxGroupStyle0","CHECKBOX_SELECTOR","CheckboxGroup","constructor","hostRef","this","disabled","helperText","hideLabel","required","size","theme","validationStatus","validationText","watchDisabledHandler","removeDisabledFalse","el","labelNameHandler","newValue","oldValue","propName","Array","from","querySelectorAll","forEach","checkbox","groupLabel","name","watchThemeHandler","handleChange","ev","target","tagName","stopImmediatePropagation","componentWillLoad","componentDidLoad","onComponentRequiredPropUndefined","prop","label","selectHandler","checkedOptions","filter","checked","icChange","emit","value","map","opt","textFieldValue","_a","querySelector","selectedOption","render","describedBy","getInputDescribedByText","renderSRText","showValidation","hasValidationStatus","h","Host","key","class","id","trim","useLabelTag","slot","for","ariaLiveMode","status","message"],"sources":["src/components/ic-checkbox-group/ic-checkbox-group.css?tag=ic-checkbox-group&encapsulation=shadow","src/components/ic-checkbox-group/ic-checkbox-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n\n --ic-input-label-text-color: var(--ic-checkbox-group-label);\n --ic-input-label-helper-text-color: var(--ic-checkbox-group-subtitle);\n --ic-input-validation-error: var(--ic-checkbox-state-icon-error);\n --ic-input-validation-status-text-color: var(--ic-checkbox-state-text);\n}\n\n:host(.ic-checkbox-group-disabled) {\n --ic-input-label-text-color: var(--ic-checkbox-group-label-disabled);\n --ic-input-label-helper-text-color: var(\n --ic-checkbox-group-subtitle-disabled\n );\n}\n\nic-input-label.error {\n color: var(--ic-checkbox-group-label-error);\n\n --ic-typography-color: var(--ic-checkbox-group-label-error);\n --ic-input-label-helper-text-color: var(--ic-checkbox-group-subtitle-error);\n}\n\nic-input-label:not(.with-helper) .ic-typography-label,\nic-input-label .helpertext {\n margin-bottom: var(--ic-space-sm);\n}\n\n:host(.ic-checkbox-group-small)\n ic-input-label:not(.with-helper)\n .ic-typography-label,\n:host(.ic-checkbox-group-small) ic-input-label .helpertext {\n margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\n:host(.ic-checkbox-group-large)\n ic-input-label:not(.with-helper)\n .ic-typography-label,\n:host(.ic-checkbox-group-large) ic-input-label .helpertext {\n margin-bottom: calc(var(--ic-space-sm) * 1.5);\n}\n\nic-input-label .helpertext {\n display: block;\n}\n\nic-input-validation.show-validation {\n margin-top: var(--ic-space-sm);\n}\n\n:host(.ic-checkbox-group-small) ic-input-validation.show-validation {\n margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n:host(.ic-checkbox-group-large) ic-input-validation.show-validation {\n margin-top: calc(var(--ic-space-sm) * 1.5);\n}\n\n.checkboxes-container {\n margin-bottom: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.ic-checkbox-group-small) .checkboxes-container {\n margin-bottom: calc(-1 * var(--ic-space-xxxs));\n}\n\n.screen-reader-only-text {\n position: absolute;\n left: -9999px;\n background-color: #fff;\n color: #000;\n text-transform: none;\n}\n\n.screen-reader-only-text:dir(rtl) {\n right: -9999px;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Listen,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\nimport {\n getInputDescribedByText,\n hasValidationStatus,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport {\n IcInformationStatusOrEmpty,\n IcSizes,\n IcThemeMode,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-checkbox-group.types\";\n\nconst CHECKBOX_SELECTOR = \"ic-checkbox\";\n\n/**\n * @slot helper-text - Content is set as the helper text for the checkbox group.\n */\n@Component({\n tag: \"ic-checkbox-group\",\n styleUrl: \"ic-checkbox-group.css\",\n shadow: true,\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class CheckboxGroup {\n @Element() el: HTMLIcCheckboxGroupElement;\n\n /**\n * If `true`, the checkbox group will be set to the disabled state.\n */\n @Prop() disabled: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * The helper text that will be displayed for additional field guidance.\n */\n @Prop() helperText: string = \"\";\n\n /**\n * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n */\n @Prop() hideLabel: boolean = false;\n\n /**\n * The label for the checkbox group to be displayed.\n */\n @Prop() label!: string;\n\n /**\n * The name for the checkbox group to differentiate from other groups.\n */\n @Prop() name!: string;\n\n @Watch(\"label\")\n @Watch(\"name\")\n labelNameHandler(\n newValue: string,\n oldValue: string,\n propName: \"label\" | \"name\"\n ): void {\n Array.from(this.el.querySelectorAll(CHECKBOX_SELECTOR)).forEach(\n (checkbox) => {\n if (propName === \"label\") checkbox.groupLabel = newValue;\n else if (checkbox.name === oldValue) {\n // If the checkbox name has been set by the parent, then override it\n checkbox.name = newValue;\n }\n }\n );\n }\n\n /**\n * If `true`, the checkbox group will require a value.\n */\n @Prop() required: boolean = false;\n\n /**\n * The size of the checkboxes to be displayed. This does not affect the font size of the label.\n */\n @Prop() size: IcSizes = \"medium\";\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n watchThemeHandler(newValue: IcThemeMode): void {\n Array.from(this.el.querySelectorAll(CHECKBOX_SELECTOR)).forEach(\n (checkbox) => {\n checkbox.theme = newValue;\n }\n );\n }\n\n /**\n * The validation status - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n /**\n * The text to display as the validation message.\n */\n @Prop() validationText: string = \"\";\n\n /**\n * Emitted when a checkbox is checked.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n @Listen(\"icChange\")\n handleChange(ev: CustomEvent): void {\n //don't pass on the event if it has come from slotted text field\n //otherwise any icChange handler bound to the checkbox group will also run\n if ((ev.target as HTMLElement).tagName === \"IC-TEXT-FIELD\") {\n ev.stopImmediatePropagation();\n }\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n this.watchThemeHandler(this.theme);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Checkbox Group\"\n );\n }\n\n @Listen(\"icCheck\")\n selectHandler({ target }: CustomEvent): void {\n const checkedOptions = Array.from(\n this.el.querySelectorAll(CHECKBOX_SELECTOR)\n ).filter(({ checked, disabled }) => checked && !disabled);\n this.icChange.emit({\n value: checkedOptions.map(({ value }) => value),\n checkedOptions: checkedOptions.map((opt) => ({\n checkbox: opt,\n textFieldValue: opt.querySelector(\"ic-text-field\")?.value,\n })),\n selectedOption: target as HTMLIcCheckboxElement,\n });\n }\n\n render() {\n const {\n disabled,\n helperText,\n hideLabel,\n label,\n name,\n required,\n size,\n theme,\n validationStatus,\n validationText,\n } = this;\n\n const describedBy = getInputDescribedByText(\n this.el,\n name,\n helperText !== \"\",\n validationStatus !== \"\"\n );\n\n const renderSRText = validationStatus === \"error\" || required || hideLabel;\n\n const showValidation = hasValidationStatus(validationStatus, disabled);\n\n return (\n <Host\n class={{\n \"ic-checkbox-group-disabled\": !!disabled,\n [`ic-checkbox-group-${size}`]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n {renderSRText && (\n <span\n id=\"screenReaderOnlyText\"\n class=\"screen-reader-only-text\"\n aria-hidden=\"true\"\n >\n {label} {validationStatus === \"error\" ? \"invalid data \" : null}{\" \"}\n {required ? \"required\" : null}\n </span>\n )}\n <fieldset\n id={name}\n aria-labelledby={`${\n renderSRText ? \"screenReaderOnlyText\" : \"\"\n } ${describedBy}`.trim()}\n disabled={disabled}\n >\n {!hideLabel && (\n <legend>\n <ic-input-label\n class={{ [`${validationStatus}`]: true }}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabled}\n useLabelTag={false}\n >\n <slot name=\"helper-text\" slot=\"helper-text\"></slot>\n </ic-input-label>\n </legend>\n )}\n <div class=\"checkboxes-container\">\n <slot></slot>\n </div>\n </fieldset>\n {showValidation && (\n <ic-input-validation\n class={{\n \"show-validation\": showValidation,\n }}\n for={name}\n ariaLiveMode=\"polite\"\n status={validationStatus}\n message={validationText}\n ></ic-input-validation>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1 +0,0 @@
1
- {"version":3,"names":["icStatusTagCss","IcStatusTagStyle0","StatusTag","constructor","hostRef","this","announced","size","status","theme","uppercase","variant","componentDidLoad","onComponentRequiredPropUndefined","prop","label","propName","render","h","Host","key","class","role"],"sources":["src/components/ic-status-tag/ic-status-tag.css?tag=ic-status-tag&encapsulation=shadow","src/components/ic-status-tag/ic-status-tag.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n.tag {\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n font-size: 0.875rem;\n border-radius: var(--ic-space-md);\n display: inline-block;\n min-width: 2.5rem;\n text-align: center;\n\n --ic-typography-color: var(--ic-status-tag-text);\n}\n\n.small {\n padding: var(--ic-space-xxxs) var(--ic-space-sm);\n border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n}\n\n.large {\n padding: var(--ic-space-xs) var(--ic-space-sm);\n border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n.filled-neutral {\n background-color: var(--ic-status-tag-neutral);\n}\n\n.filled-success {\n background-color: var(--ic-status-tag-success);\n}\n\n.filled-warning {\n background-color: var(--ic-status-tag-warning);\n\n --ic-typography-color: var(--ic-status-tag-filled-warning-text);\n}\n\n.filled-danger {\n background-color: var(--ic-status-tag-error);\n}\n\n.outlined {\n padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px))\n calc(var(--ic-space-sm) - var(--ic-space-1px));\n}\n\n.outlined.small {\n padding: var(--ic-space-1px) calc(var(--ic-space-sm) - var(--ic-space-1px));\n}\n\n.outlined.large {\n padding: calc(var(--ic-space-xs) - var(--ic-space-1px))\n calc(var(--ic-space-sm) - var(--ic-space-1px));\n}\n\n.outlined-neutral {\n background-color: var(--ic-status-tag-outlined-background-neutral);\n border: var(--ic-border-width) solid var(--ic-status-tag-outlined-neutral);\n\n --ic-typography-color: var(--ic-status-tag-text-inverted);\n}\n\n.outlined-success {\n background-color: var(--ic-status-tag-outlined-background-success);\n border: var(--ic-border-width) solid var(--ic-status-tag-outlined-success);\n\n --ic-typography-color: var(--ic-status-tag-text-inverted);\n}\n\n.outlined-warning {\n background-color: var(--ic-status-tag-outlined-background-warning);\n border: var(--ic-border-width) solid var(--ic-status-tag-outlined-warning);\n\n --ic-typography-color: var(--ic-status-tag-text-inverted);\n}\n\n.outlined-danger {\n background-color: var(--ic-status-tag-outlined-background-error);\n border: var(--ic-border-width) solid var(--ic-status-tag-outlined-error);\n\n --ic-typography-color: var(--ic-status-tag-text-inverted);\n}\n\n@media (forced-colors: active) {\n .tag {\n border: var(--ic-border-hc);\n -ms-high-contrast-adjust: none;\n forced-color-adjust: none;\n\n --ic-typography-color: var(--ic-status-tag-text);\n }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcStatusTagStatuses } from \"./ic-status-tag.types\";\nimport { IcEmphasisType, IcSizes } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-status-tag\",\n styleUrl: \"ic-status-tag.css\",\n shadow: true,\n})\nexport class StatusTag {\n /**\n * If `true`, role='status' is added to the component and it will act as an 'aria-live' region.\n * Screen readers will announce changes to the `label`, but not the initial value.\n */\n @Prop() announced?: boolean = false;\n\n /**\n * The content rendered within the status tag.\n */\n @Prop() label!: string;\n\n /**\n * The size of the status tag component.\n */\n @Prop() size?: IcSizes = \"medium\";\n\n /**\n * The colour of the status tag.\n */\n @Prop() status?: IcStatusTagStatuses = \"neutral\";\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: \"dark\" | \"light\" | \"inherit\" = \"inherit\";\n\n /**\n * The letter case of the status tag's label.\n */\n @Prop() uppercase?: boolean = true;\n\n /**\n * The emphasis of the status tag.\n */\n @Prop() variant?: IcEmphasisType = \"filled\";\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Status Tag\"\n );\n }\n\n render() {\n const { label, status, variant, size, announced, theme, uppercase } = this;\n return (\n <Host\n class={{ [`ic-theme-${theme}`]: theme !== \"inherit\" }}\n role={announced ? \"status\" : null}\n aria-label=\"Status\"\n >\n <strong\n class={{\n [\"tag\"]: true,\n [`${variant}-${status}`]: true,\n [\"outlined\"]: variant === \"outlined\",\n [`${size}`]: true,\n }}\n >\n <ic-typography\n variant={uppercase ? \"label-uppercase\" : \"label\"}\n apply-vertical-margins={false}\n >\n <span>{label}</span>\n </ic-typography>\n </strong>\n </Host>\n );\n }\n}\n"],"mappings":"8GAAA,MAAMA,EAAiB,05IACvB,MAAAC,EAAeD,E,MCSFE,EAAS,MALtB,WAAAC,CAAAC,G,UAUUC,KAAAC,UAAsB,MAUtBD,KAAAE,KAAiB,SAKjBF,KAAAG,OAA+B,UAK/BH,KAAAI,MAAuC,UAKvCJ,KAAAK,UAAsB,KAKtBL,KAAAM,QAA2B,Q,CAEnC,gBAAAC,GACEC,EACE,CAAC,CAAEC,KAAMT,KAAKU,MAAOC,SAAU,UAC/B,a,CAIJ,MAAAC,GACE,MAAMF,MAAEA,EAAKP,OAAEA,EAAMG,QAAEA,EAAOJ,KAAEA,EAAID,UAAEA,EAASG,MAAEA,EAAKC,UAAEA,GAAcL,KACtE,OACEa,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CAAE,CAAC,YAAYZ,KAAUA,IAAU,WAC1Ca,KAAMhB,EAAY,SAAW,KAAI,aACtB,UAEXY,EAAA,UAAAE,IAAA,2CACEC,MAAO,CACL,CAAC,OAAQ,KACT,CAAC,GAAGV,KAAWH,KAAW,KAC1B,CAAC,YAAaG,IAAY,WAC1B,CAAC,GAAGJ,KAAS,OAGfW,EAAA,iBAAAE,IAAA,2CACET,QAASD,EAAY,kBAAoB,QAAO,yBACxB,OAExBQ,EAAA,QAAAE,IAAA,4CAAOL,K","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{r as i,c as t,h as e,F as s,H as a,g as o}from"./p-8e4e97b4.js";import{c as n}from"./p-f074ef5b.js";import{h as r,u as l,i as h,o as d}from"./p-b57e59b7.js";import"./p-bddf799a.js";const c='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;min-height:100% !important;background:rgb(0 0 0 / 60%);z-index:var(--ic-z-index-dialog);opacity:0}:host(.ic-dialog-fade-in){opacity:1}:host(.disable-height-constraint){background:none;justify-content:unset;align-items:unset}.dialog.disable-height-constraint{max-height:none;position:relative}.dialog.disable-height-constraint .content-area{overflow-y:visible}@media (prefers-reduced-motion: no-preference){:host{transition:opacity var(--ic-easing-transition-slow)}.dialog{transform:translateY(-3rem);transition:transform 1000s}:host(.ic-dialog-fade-in) .dialog{transform:translateY(0);transition:transform var(--ic-easing-transition-slow)}}:host(.ic-dialog-hidden){display:none}.dialog{background-color:var(--ic-dialog-background);color:var(--ic-dialog-text-primary);--ic-typography-color:var(--ic-dialog-text-primary);border:var(--ic-space-1px) solid var(--ic-dialog-border);border-radius:var(--ic-border-radius);padding:var(--ic-space-xs) 0 var(--ic-space-md);display:flex;flex-direction:column;box-sizing:border-box;overflow-x:visible}.small{width:50%;max-width:25rem;min-height:11rem;max-height:70vh}.medium{width:70vw;max-width:44rem;min-height:12.5rem;max-height:70vh}.large{width:90vw;max-width:62.5rem;min-height:12.5rem;max-height:90vh}.heading-area{display:flex;margin-bottom:var(--ic-space-xs);padding:0 var(--ic-space-md)}.heading{overflow-wrap:break-word}.close-icon{margin-left:auto}.close-icon>svg{color:var(--ic-dialog-clear-button)}.content-area{padding:0 var(--ic-space-md);margin:0;overflow-y:auto}#dialog-content{margin-bottom:var(--ic-space-sm)}#dialog-content ::slotted(ic-typography){overflow-wrap:break-word}#dialog-content ::slotted(*){position:relative}.dialog-controls{margin-top:auto;padding:var(--ic-space-xs) var(--ic-space-md) 0;display:flex;justify-content:flex-end;gap:var(--ic-space-md)}.dialog-control-button{width:-moz-fit-content;width:fit-content}.backdrop{overflow-y:auto;position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgb(0 0 0 / 60%);z-index:var(--ic-z-index-dialog);padding-top:16px;padding-bottom:16px}.heading ic-typography{--ic-typography-color:var(--ic-dialog-text-primary)}.label ic-typography{--ic-typography-color:var(--ic-dialog-label)}@media (min-width: 800px){:host([size="large"]) .dialog:not(.disable-width-constraint)>.content-area{width:75%}}@media (max-width: 576px){.dialog{width:100vw;height:100vh;max-width:none;max-height:none;box-sizing:border-box}.backdrop{padding:0}.dialog.disable-height-constraint{height:auto;min-height:100vh}}@media (max-width: 364px){.dialog-control-button{width:unset}}';const g=c;const b=class{constructor(a){i(this,a);this.icDialogCancelled=t(this,"icDialogCancelled",7);this.icDialogClosed=t(this,"icDialogClosed",7);this.icDialogConfirmed=t(this,"icDialogConfirmed",7);this.icDialogOpened=t(this,"icDialogOpened",7);this.contentAreaMutationObserver=null;this.DATA_GETS_FOCUS="data-gets-focus";this.DIALOG_CONTROLS="dialog-controls";this.dialogHeight=0;this.focusedElementIndex=0;this.IC_TEXT_FIELD="IC-TEXT-FIELD";this.IC_ACCORDION="IC-ACCORDION";this.IC_ACCORDION_GROUP="IC-ACCORDION-GROUP";this.IC_CHECKBOX="IC-CHECKBOX";this.IC_SEARCH_BAR="IC-SEARCH-BAR";this.IC_TAB_CONTEXT="IC-TAB-CONTEXT";this.resizeObserver=null;this.dialogRendered=false;this.fadeIn=false;this.closeOnBackdropClick=true;this.destructive=false;this.dismissLabel="Dismiss";this.disableHeightConstraint=false;this.disableWidthConstraint=false;this.hideCloseButton=false;this.hideDefaultControls=false;this.open=false;this.size="small";this.theme="inherit";this.dialogOpened=()=>{var i,t;this.dialogRendered=true;if(this.disableHeightConstraint){(i=this.dialogEl)===null||i===void 0?void 0:i.show()}else{(t=this.dialogEl)===null||t===void 0?void 0:t.showModal()}setTimeout((()=>{this.fadeIn=true;if(this.backdropEl&&this.disableHeightConstraint&&this.backdropEl.scrollTop!==0){this.backdropEl.scrollTop=0}}),10);setTimeout((()=>{this.setInitialFocus();r(this.runResizeObserver)}),75);setTimeout((()=>{this.icDialogOpened.emit()}),80)};this.runResizeObserver=()=>{if(this.dialogEl){this.resizeObserver=new ResizeObserver((()=>{clearTimeout(this.resizeTimeout);this.resizeTimeout=window.setTimeout(this.resizeObserverCallback,80)}));this.resizeObserver.observe(this.dialogEl)}};this.resizeObserverCallback=()=>{if(this.dialogEl&&this.dialogEl.clientHeight!==this.dialogHeight){this.dialogHeight=this.dialogEl.clientHeight}};this.refreshInteractiveElementsOnSlotChange=()=>{var i,t,e;const s=(i=this.el.shadowRoot)===null||i===void 0?void 0:i.querySelector("#dialog-content");if(s){this.contentArea=s.querySelector("slot");(t=this.contentArea)===null||t===void 0?void 0:t.addEventListener("slotchange",this.getInteractiveElements);this.contentAreaMutationObserver=new MutationObserver((()=>{this.getInteractiveElements()}));(e=l(s))===null||e===void 0?void 0:e.forEach((i=>{var t;(t=this.contentAreaMutationObserver)===null||t===void 0?void 0:t.observe(i,{childList:true,subtree:true})}))}};this.removeSlotChangeListener=()=>{var i;if(this.contentArea){this.contentArea.removeEventListener("slotchange",this.getInteractiveElements);(i=this.contentAreaMutationObserver)===null||i===void 0?void 0:i.disconnect()}};this.setInitialFocus=()=>{this.sourceElement=document.activeElement;this.focusedElementIndex=this.interactiveElementList?this.interactiveElementList.findIndex((i=>i.hasAttribute(this.DATA_GETS_FOCUS))):0;this.focusElement(this.interactiveElementList[this.focusedElementIndex])};this.getFocusedElementIndex=()=>{var i;for(let t=0;t<this.interactiveElementList.length;t++){if(this.interactiveElementList[t]===(((i=this.el.shadowRoot)===null||i===void 0?void 0:i.activeElement)||document.activeElement)){this.focusedElementIndex=t}}};this.closeIconClick=()=>{this.open=false};this.getInteractiveElements=()=>{var i;this.interactiveElementList=Array.from(((i=this.el.shadowRoot)===null||i===void 0?void 0:i.querySelectorAll("ic-button"))||[]);const t=Array.from(this.el.querySelectorAll(`a[href], button, input:not(.ic-input), textarea, select, details, [tabindex]:not([tabindex="-1"]),\n ic-button, ic-checkbox, ic-select, ic-search-bar, ic-tab-context,\n ic-back-to-top, ic-breadcrumb, ic-chip[dismissible="true"], ic-footer-link, ic-link, ic-navigation-button,\n ic-navigation-item, ic-switch, ic-text-field, ic-accordion-group, ic-accordion, ic-date-input, ic-date-picker`));if(t.length>0){if(t[0].slot!==this.DIALOG_CONTROLS){t[0].setAttribute(this.DATA_GETS_FOCUS,"")}else if(!this.destructive){t[t.length-1].setAttribute(this.DATA_GETS_FOCUS,"")}}for(let i=0;i<t.length;i++){this.interactiveElementList.splice(1+i,0,t[i])}};this.getNextFocusEl=i=>this.interactiveElementList[i];this.onTabKeyPress=i=>{this.getFocusedElementIndex();if(this.interactiveElementList[this.focusedElementIndex].tagName===this.IC_SEARCH_BAR){return false}this.setFocusIndexBasedOnShiftKey(i);this.loopNextFocusIndexIfLastElement();this.focusElement(this.getNextFocusEl(this.focusedElementIndex),i);return true};this.shouldSkipElement=i=>{const t=getComputedStyle(i).visibility==="hidden"||i.offsetHeight===0||i.hasAttribute("disabled")||i.tagName===this.IC_ACCORDION_GROUP&&i.hasAttribute("single-expansion");const e=i.closest("ic-radio-option");return t||i.getAttribute("type")==="radio"&&!!e&&!(e.hasAttribute("selected")||i.tabIndex===0)};this.focusElement=(i,t=false)=>{let e=i;if(this.shouldSkipElement(i)){this.setFocusIndexBasedOnShiftKey(t);this.loopNextFocusIndexIfLastElement();e=this.getNextFocusEl(this.focusedElementIndex);this.focusElement(e,t)}else{switch(i.tagName){case this.IC_ACCORDION_GROUP:case this.IC_ACCORDION:case this.IC_SEARCH_BAR:case this.IC_TEXT_FIELD:case this.IC_CHECKBOX:case this.IC_TAB_CONTEXT:i.setFocus();break;default:i.focus()}}};this.renderDialog=()=>{const{hideDefaultControls:i,size:t,heading:a,label:o,destructive:r,dismissLabel:l,hideCloseButton:d,disableHeightConstraint:c,disableWidthConstraint:g,closeIconClick:b,DIALOG_CONTROLS:p}=this;const u=h(this.el,p);return e("dialog",{class:{dialog:true,[`${t}`]:true,"disable-height-constraint":!!c,"disable-width-constraint":!!g},"aria-labelledby":"dialog-label dialog-heading","aria-describedby":"dialog-alert dialog-content",ref:i=>this.dialogEl=i},e("div",{class:"heading-area"},e("div",{class:"heading-content"},e("div",{class:"label"},e("slot",{name:"label"},e("ic-typography",{variant:"label",id:"dialog-label"},o))),e("div",{class:"heading"},e("slot",{name:"heading"},e("ic-typography",{variant:"h4",id:"dialog-heading"},a)))),!d&&e("ic-button",{class:"close-icon",variant:"icon-tertiary",innerHTML:n,"aria-label":l,onClick:b,"data-gets-focus":r||i&&!u?"":null})),e("div",{class:"content-area"},h(this.el,"alert")&&e("slot",{name:"alert"}),e("div",{id:"dialog-content"},e("slot",null))),(u||!i)&&e("div",{class:{[p]:true}},u?e("slot",{name:p}):e(s,null,e("ic-button",{variant:"tertiary",onClick:()=>this.cancelDialog(),class:"dialog-control-button","data-gets-focus":null},"Cancel"),e("ic-button",{variant:r?"destructive":"primary",onClick:()=>this.confirmDialog(),class:"dialog-control-button","data-gets-focus":""},"Confirm"))))}}watchOpenHandler(){if(this.open){this.dialogOpened()}else{this.fadeIn=false;if(this.resizeObserver!==null){this.resizeObserver.disconnect()}setTimeout((()=>{var i,t;this.dialogRendered=false;(i=this.dialogEl)===null||i===void 0?void 0:i.close();(t=this.sourceElement)===null||t===void 0?void 0:t.focus();this.dialogHeight=0;this.icDialogClosed.emit()}),80)}}disconnectedCallback(){this.removeSlotChangeListener()}componentDidLoad(){this.getInteractiveElements();this.refreshInteractiveElementsOnSlotChange();if(this.open){this.dialogOpened()}!h(this.el,"heading")&&d([{prop:this.heading,propName:"heading"}],"Dialog")}componentDidRender(){document.body.style.overflow=getComputedStyle(this.el).display!=="none"&&this.disableHeightConstraint?"hidden":"auto"}handleKeyboard(i){if(this.dialogRendered){switch(i.key){case"Tab":if(this.onTabKeyPress(i.shiftKey)){i.preventDefault()}break;case"Escape":if(!i.repeat){this.open=false}i.stopImmediatePropagation();break}}}handleClick(i){if(this.dialogEl&&this.closeOnBackdropClick&&i.composedPath().indexOf(this.dialogEl)<=0){const{top:t,height:e,left:s,width:a}=this.dialogEl.getBoundingClientRect();const o=t<=i.clientY&&i.clientY<=t+e&&s<=i.clientX&&i.clientX<=s+a;if(!o){this.open=false}}}async cancelDialog(){this.icDialogCancelled.emit();this.open=false}async confirmDialog(){this.icDialogConfirmed.emit()}loopNextFocusIndexIfLastElement(){if(this.focusedElementIndex>this.interactiveElementList.length-1)this.focusedElementIndex=0;else if(this.focusedElementIndex<0){this.focusedElementIndex=this.interactiveElementList.length-1}}setFocusIndexBasedOnShiftKey(i){if(i){this.focusedElementIndex-=1}else{this.focusedElementIndex+=1}}render(){const{dialogRendered:i,disableHeightConstraint:t,fadeIn:s,theme:o}=this;return e(a,{key:"6de63d3d94afa349dc9bb5b30296837bbf89f810",class:{"ic-dialog-hidden":!i,"ic-dialog-fade-in":s,"disable-height-constraint":!!t,[`ic-theme-${o}`]:o!=="inherit"}},t?e("div",{class:"backdrop",ref:i=>this.backdropEl=i},this.renderDialog()):this.renderDialog())}get el(){return o(this)}static get watchers(){return{open:["watchOpenHandler"]}}};b.style=g;export{b as ic_dialog};
2
- //# sourceMappingURL=p-e9d28e02.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["icDialogCss","IcDialogStyle0","Dialog","constructor","hostRef","this","contentAreaMutationObserver","DATA_GETS_FOCUS","DIALOG_CONTROLS","dialogHeight","focusedElementIndex","IC_TEXT_FIELD","IC_ACCORDION","IC_ACCORDION_GROUP","IC_CHECKBOX","IC_SEARCH_BAR","IC_TAB_CONTEXT","resizeObserver","dialogRendered","fadeIn","closeOnBackdropClick","destructive","dismissLabel","disableHeightConstraint","disableWidthConstraint","hideCloseButton","hideDefaultControls","open","size","theme","dialogOpened","_a","dialogEl","show","_b","showModal","setTimeout","backdropEl","scrollTop","setInitialFocus","checkResizeObserver","runResizeObserver","icDialogOpened","emit","ResizeObserver","clearTimeout","resizeTimeout","window","resizeObserverCallback","observe","clientHeight","refreshInteractiveElementsOnSlotChange","contentWrapper","el","shadowRoot","querySelector","contentArea","addEventListener","getInteractiveElements","MutationObserver","_c","getSlotElements","forEach","childList","subtree","removeSlotChangeListener","removeEventListener","disconnect","sourceElement","document","activeElement","interactiveElementList","findIndex","element","hasAttribute","focusElement","getFocusedElementIndex","i","length","closeIconClick","Array","from","querySelectorAll","slottedInteractiveElements","slot","setAttribute","splice","getNextFocusEl","onTabKeyPress","shiftKey","tagName","setFocusIndexBasedOnShiftKey","loopNextFocusIndexIfLastElement","shouldSkipElement","isHidden","getComputedStyle","visibility","offsetHeight","radioEl","closest","getAttribute","tabIndex","nextFocusEl","setFocus","focus","renderDialog","heading","label","controlsSlotUsed","isSlotUsed","h","class","dialog","ref","name","variant","id","innerHTML","closeIcon","onClick","Fragment","cancelDialog","confirmDialog","watchOpenHandler","close","icDialogClosed","disconnectedCallback","componentDidLoad","onComponentRequiredPropUndefined","prop","propName","componentDidRender","body","style","overflow","display","handleKeyboard","ev","key","preventDefault","repeat","stopImmediatePropagation","handleClick","composedPath","indexOf","top","height","left","width","getBoundingClientRect","isInDialog","clientY","clientX","icDialogCancelled","icDialogConfirmed","render","Host"],"sources":["src/components/ic-dialog/ic-dialog.css?tag=ic-dialog&encapsulation=shadow","src/components/ic-dialog/ic-dialog.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-dialog: z-index of dialog \n */\n\n:host {\n position: fixed;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100% !important;\n background: rgb(0 0 0 / 60%);\n z-index: var(--ic-z-index-dialog);\n opacity: 0;\n}\n\n:host(.ic-dialog-fade-in) {\n opacity: 1;\n}\n\n:host(.disable-height-constraint) {\n background: none;\n justify-content: unset;\n align-items: unset;\n}\n\n.dialog.disable-height-constraint {\n max-height: none;\n position: relative;\n}\n\n.dialog.disable-height-constraint .content-area {\n overflow-y: visible;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n :host {\n transition: opacity var(--ic-easing-transition-slow);\n }\n\n .dialog {\n transform: translateY(-3rem);\n transition: transform 1000s;\n }\n\n :host(.ic-dialog-fade-in) .dialog {\n transform: translateY(0);\n transition: transform var(--ic-easing-transition-slow);\n }\n}\n\n:host(.ic-dialog-hidden) {\n display: none;\n}\n\n.dialog {\n background-color: var(--ic-dialog-background);\n color: var(--ic-dialog-text-primary);\n\n --ic-typography-color: var(--ic-dialog-text-primary);\n\n border: var(--ic-space-1px) solid var(--ic-dialog-border);\n border-radius: var(--ic-border-radius);\n padding: var(--ic-space-xs) 0 var(--ic-space-md);\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n overflow-x: visible;\n}\n\n.small {\n width: 50%;\n max-width: 25rem;\n min-height: 11rem;\n max-height: 70vh;\n}\n\n.medium {\n width: 70vw;\n max-width: 44rem;\n min-height: 12.5rem;\n max-height: 70vh;\n}\n\n.large {\n width: 90vw;\n max-width: 62.5rem;\n min-height: 12.5rem;\n max-height: 90vh;\n}\n\n.heading-area {\n display: flex;\n margin-bottom: var(--ic-space-xs);\n padding: 0 var(--ic-space-md);\n}\n\n.heading {\n overflow-wrap: break-word;\n}\n\n.close-icon {\n margin-left: auto;\n}\n\n.close-icon > svg {\n color: var(--ic-dialog-clear-button);\n}\n\n.content-area {\n padding: 0 var(--ic-space-md);\n margin: 0;\n overflow-y: auto;\n}\n\n#dialog-content {\n margin-bottom: var(--ic-space-sm);\n}\n\n#dialog-content ::slotted(ic-typography) {\n overflow-wrap: break-word;\n}\n\n#dialog-content ::slotted(*) {\n position: relative;\n}\n\n.dialog-controls {\n margin-top: auto;\n padding: var(--ic-space-xs) var(--ic-space-md) 0;\n display: flex;\n justify-content: flex-end;\n gap: var(--ic-space-md);\n}\n\n.dialog-control-button {\n width: fit-content;\n}\n\n.backdrop {\n overflow-y: auto;\n position: fixed;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgb(0 0 0 / 60%);\n z-index: var(--ic-z-index-dialog);\n padding-top: 16px;\n padding-bottom: 16px;\n}\n\n.heading ic-typography {\n --ic-typography-color: var(--ic-dialog-text-primary);\n}\n\n.label ic-typography {\n --ic-typography-color: var(--ic-dialog-label);\n}\n\n@media (min-width: 800px) {\n :host([size=\"large\"]) .dialog:not(.disable-width-constraint) > .content-area {\n width: 75%;\n }\n}\n\n@media (max-width: 576px) {\n .dialog {\n width: 100vw;\n height: 100vh;\n max-width: none;\n max-height: none;\n box-sizing: border-box;\n }\n\n .backdrop {\n padding: 0;\n }\n\n .dialog.disable-height-constraint {\n height: auto;\n min-height: 100vh;\n }\n}\n\n@media (max-width: 364px) {\n .dialog-control-button {\n width: unset;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n Method,\n Listen,\n Watch,\n h,\n Fragment,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport {\n isSlotUsed,\n checkResizeObserver,\n onComponentRequiredPropUndefined,\n getSlotElements,\n} from \"../../utils/helpers\";\nimport { IcFocusableComponents, IcThemeMode } from \"../../utils/types\";\n\n/**\n * @slot dialog-controls - Content will be place at the bottom of the dialog.\n * @slot heading - Content will be placed at the top of the dialog.\n * @slot label - Content will be placed above the dialog heading.\n * @slot alert - Content will be placed at the top of the content area of the dialog.\n */\n@Component({\n tag: \"ic-dialog\",\n styleUrl: \"ic-dialog.css\",\n shadow: true,\n})\nexport class Dialog {\n private backdropEl?: HTMLDivElement;\n private contentArea: HTMLSlotElement | null;\n private contentAreaMutationObserver: MutationObserver | null = null;\n private DATA_GETS_FOCUS: string = \"data-gets-focus\";\n private DIALOG_CONTROLS: string = \"dialog-controls\";\n private dialogEl?: HTMLDialogElement;\n private dialogHeight: number = 0;\n private focusedElementIndex = 0;\n private IC_TEXT_FIELD: string = \"IC-TEXT-FIELD\";\n private IC_ACCORDION: string = \"IC-ACCORDION\";\n private IC_ACCORDION_GROUP: string = \"IC-ACCORDION-GROUP\";\n private IC_CHECKBOX = \"IC-CHECKBOX\";\n private IC_SEARCH_BAR: string = \"IC-SEARCH-BAR\";\n private IC_TAB_CONTEXT: string = \"IC-TAB-CONTEXT\";\n private interactiveElementList: HTMLElement[];\n private resizeObserver: ResizeObserver | null = null;\n private resizeTimeout: number;\n private sourceElement: HTMLElement;\n\n @Element() el: HTMLIcDialogElement;\n\n @State() dialogRendered: boolean = false;\n @State() fadeIn: boolean = false;\n\n /**\n * If set to `false`, the dialog will not close when the backdrop is clicked.\n */\n @Prop() closeOnBackdropClick?: boolean = true;\n\n /**\n * If 'true', sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button.\n */\n @Prop() destructive?: boolean = false;\n\n /**\n * Sets the dismiss label tooltip and aria label.\n */\n @Prop() dismissLabel?: string = \"Dismiss\";\n\n /**\n * If set to `true`, the content area max height and overflow properties are removed allowing the dialog to stretch below the fold.\n * This prop also prevents popover elements from being cut off within the content area.\n */\n @Prop() disableHeightConstraint?: boolean = false;\n\n /**\n * If set to `true`, the content area width property is removed, allowing content to take the full width of the dialog when using the large variant.\n */\n @Prop() disableWidthConstraint?: boolean = false;\n\n /**\n * If `true`, the close button will not be displayed.\n */\n @Prop() hideCloseButton?: boolean = false;\n\n /**\n * If set to `true`, default button controls will not be shown, but slotted dialog controls will still be displayed.\n */\n @Prop() hideDefaultControls: boolean = false;\n\n /**\n * Sets the heading for the dialog.\n */\n @Prop() heading?: string;\n\n /**\n * Sets the optional label for the dialog which appears above the heading.\n */\n @Prop() label?: string;\n\n /**\n * If `true`, the dialog will be displayed.\n */\n @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n @Watch(\"open\")\n watchOpenHandler(): void {\n if (this.open) {\n this.dialogOpened();\n } else {\n this.fadeIn = false;\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n setTimeout(() => {\n this.dialogRendered = false;\n this.dialogEl?.close();\n this.sourceElement?.focus();\n this.dialogHeight = 0;\n this.icDialogClosed.emit();\n }, 80);\n }\n }\n\n /**\n * Sets the maximum and minimum height and width for the dialog.\n */\n @Prop() size?: \"small\" | \"medium\" | \"large\" = \"small\";\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /**\n * Cancelation event emitted when default 'Cancel' button clicked or 'cancelDialog' method is called.\n */\n @Event() icDialogCancelled: EventEmitter<void>;\n\n /**\n * Emitted when dialog has closed.\n */\n @Event() icDialogClosed: EventEmitter<void>;\n\n /**\n * Confirmation event emitted when default 'Confirm' primary button clicked or 'confirmDialog' method is called.\n */\n @Event() icDialogConfirmed: EventEmitter<void>;\n\n /**\n * Emitted when dialog has opened.\n */\n @Event() icDialogOpened: EventEmitter<void>;\n\n disconnectedCallback(): void {\n this.removeSlotChangeListener();\n }\n\n componentDidLoad(): void {\n this.getInteractiveElements();\n\n this.refreshInteractiveElementsOnSlotChange();\n\n if (this.open) {\n this.dialogOpened();\n }\n\n !isSlotUsed(this.el, \"heading\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Dialog\"\n );\n }\n\n componentDidRender(): void {\n document.body.style.overflow =\n getComputedStyle(this.el).display !== \"none\" &&\n this.disableHeightConstraint\n ? \"hidden\"\n : \"auto\";\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeyboard(ev: KeyboardEvent): void {\n if (this.dialogRendered) {\n switch (ev.key) {\n case \"Tab\":\n if (this.onTabKeyPress(ev.shiftKey)) {\n ev.preventDefault();\n }\n break;\n case \"Escape\":\n if (!ev.repeat) {\n this.open = false;\n }\n ev.stopImmediatePropagation();\n break;\n }\n }\n }\n\n @Listen(\"click\", {})\n handleClick(ev: MouseEvent): void {\n if (\n this.dialogEl &&\n this.closeOnBackdropClick &&\n ev.composedPath().indexOf(this.dialogEl) <= 0\n ) {\n const { top, height, left, width } =\n this.dialogEl.getBoundingClientRect();\n const isInDialog =\n top <= ev.clientY &&\n ev.clientY <= top + height &&\n left <= ev.clientX &&\n ev.clientX <= left + width;\n if (!isInDialog) {\n this.open = false;\n }\n }\n }\n\n /**\n * Cancels the dialog. Used by the default 'Cancel' button or can be called manually to trigger cancelling of dialog.\n */\n @Method()\n async cancelDialog(): Promise<void> {\n this.icDialogCancelled.emit();\n this.open = false;\n }\n\n /**\n * Confirms the dialog. Used by the default 'Confirm' button or can be called manually to trigger confirming of dialog.\n */\n @Method()\n async confirmDialog(): Promise<void> {\n this.icDialogConfirmed.emit();\n }\n\n private dialogOpened = () => {\n this.dialogRendered = true;\n\n if (this.disableHeightConstraint) {\n this.dialogEl?.show();\n } else {\n this.dialogEl?.showModal();\n }\n\n setTimeout(() => {\n this.fadeIn = true;\n\n /**\n * This is required to set scroll back to top if:\n * - dialog content goes below the fold\n * - is closed using cancel or confirm and reopened.\n *\n * Without this, the scroll bar will start from the dialog's last scroll-x coordinate.\n */\n if (\n this.backdropEl &&\n this.disableHeightConstraint &&\n this.backdropEl.scrollTop !== 0\n ) {\n this.backdropEl.scrollTop = 0;\n }\n }, 10);\n\n setTimeout(() => {\n this.setInitialFocus();\n checkResizeObserver(this.runResizeObserver);\n }, 75);\n\n setTimeout(() => {\n this.icDialogOpened.emit();\n }, 80);\n };\n\n private runResizeObserver = () => {\n if (this.dialogEl) {\n this.resizeObserver = new ResizeObserver(() => {\n clearTimeout(this.resizeTimeout);\n this.resizeTimeout = window.setTimeout(this.resizeObserverCallback, 80);\n });\n this.resizeObserver.observe(this.dialogEl);\n }\n };\n\n private resizeObserverCallback = () => {\n if (this.dialogEl && this.dialogEl.clientHeight !== this.dialogHeight) {\n this.dialogHeight = this.dialogEl.clientHeight;\n }\n };\n\n private refreshInteractiveElementsOnSlotChange = () => {\n const contentWrapper = this.el.shadowRoot?.querySelector(\"#dialog-content\");\n\n if (contentWrapper) {\n this.contentArea = contentWrapper.querySelector(\"slot\");\n\n // Detect changes to slotted elements\n this.contentArea?.addEventListener(\n \"slotchange\",\n this.getInteractiveElements\n );\n\n this.contentAreaMutationObserver = new MutationObserver(() => {\n this.getInteractiveElements();\n });\n\n // Detect changes to children of slotted elements\n getSlotElements(contentWrapper)?.forEach((el) => {\n this.contentAreaMutationObserver?.observe(el, {\n childList: true,\n subtree: true,\n });\n });\n }\n };\n\n private removeSlotChangeListener = () => {\n if (this.contentArea) {\n this.contentArea.removeEventListener(\n \"slotchange\",\n this.getInteractiveElements\n );\n\n this.contentAreaMutationObserver?.disconnect();\n }\n };\n\n private setInitialFocus = () => {\n this.sourceElement = document.activeElement as HTMLElement;\n this.focusedElementIndex = this.interactiveElementList\n ? this.interactiveElementList.findIndex((element) =>\n element.hasAttribute(this.DATA_GETS_FOCUS)\n )\n : 0;\n this.focusElement(this.interactiveElementList[this.focusedElementIndex]);\n };\n\n private getFocusedElementIndex = () => {\n for (let i = 0; i < this.interactiveElementList.length; i++) {\n if (\n (this.interactiveElementList[i] as HTMLElement) ===\n (this.el.shadowRoot?.activeElement || document.activeElement)\n ) {\n this.focusedElementIndex = i;\n }\n }\n };\n\n private closeIconClick = () => {\n this.open = false;\n };\n\n private getInteractiveElements = () => {\n this.interactiveElementList = Array.from(\n this.el.shadowRoot?.querySelectorAll(\"ic-button\") || []\n );\n const slottedInteractiveElements = Array.from(\n this.el.querySelectorAll(\n `a[href], button, input:not(.ic-input), textarea, select, details, [tabindex]:not([tabindex=\"-1\"]),\n ic-button, ic-checkbox, ic-select, ic-search-bar, ic-tab-context,\n ic-back-to-top, ic-breadcrumb, ic-chip[dismissible=\"true\"], ic-footer-link, ic-link, ic-navigation-button,\n ic-navigation-item, ic-switch, ic-text-field, ic-accordion-group, ic-accordion, ic-date-input, ic-date-picker`\n )\n );\n if (slottedInteractiveElements.length > 0) {\n if (slottedInteractiveElements[0].slot !== this.DIALOG_CONTROLS) {\n slottedInteractiveElements[0].setAttribute(this.DATA_GETS_FOCUS, \"\");\n } else if (!this.destructive) {\n slottedInteractiveElements[\n slottedInteractiveElements.length - 1\n ].setAttribute(this.DATA_GETS_FOCUS, \"\");\n }\n }\n for (let i = 0; i < slottedInteractiveElements.length; i++) {\n this.interactiveElementList.splice(\n 1 + i,\n 0,\n slottedInteractiveElements[i] as HTMLElement\n );\n }\n };\n\n private getNextFocusEl = (focusedElementIndex: number) =>\n this.interactiveElementList[focusedElementIndex];\n\n private onTabKeyPress = (shiftKey: boolean): boolean => {\n this.getFocusedElementIndex();\n\n if (\n this.interactiveElementList[this.focusedElementIndex].tagName ===\n this.IC_SEARCH_BAR\n ) {\n return false;\n }\n\n this.setFocusIndexBasedOnShiftKey(shiftKey);\n this.loopNextFocusIndexIfLastElement();\n\n this.focusElement(this.getNextFocusEl(this.focusedElementIndex), shiftKey);\n return true;\n };\n\n private shouldSkipElement = (element: HTMLElement): boolean => {\n const isHidden =\n getComputedStyle(element).visibility === \"hidden\" ||\n element.offsetHeight === 0 ||\n element.hasAttribute(\"disabled\") ||\n (element.tagName === this.IC_ACCORDION_GROUP &&\n element.hasAttribute(\"single-expansion\"));\n\n const radioEl = element.closest(\"ic-radio-option\");\n\n return (\n isHidden ||\n (element.getAttribute(\"type\") === \"radio\" &&\n !!radioEl &&\n !(radioEl.hasAttribute(\"selected\") || element.tabIndex === 0))\n );\n };\n\n private focusElement = (element: HTMLElement, shiftKey = false) => {\n let nextFocusEl = element;\n\n if (this.shouldSkipElement(element)) {\n this.setFocusIndexBasedOnShiftKey(shiftKey);\n this.loopNextFocusIndexIfLastElement();\n\n nextFocusEl = this.getNextFocusEl(this.focusedElementIndex);\n this.focusElement(nextFocusEl, shiftKey);\n } else {\n switch (element.tagName) {\n case this.IC_ACCORDION_GROUP:\n case this.IC_ACCORDION:\n case this.IC_SEARCH_BAR:\n case this.IC_TEXT_FIELD:\n case this.IC_CHECKBOX:\n case this.IC_TAB_CONTEXT:\n (element as IcFocusableComponents).setFocus();\n break;\n default:\n (element as HTMLElement).focus();\n }\n }\n };\n\n private loopNextFocusIndexIfLastElement() {\n if (this.focusedElementIndex > this.interactiveElementList.length - 1)\n this.focusedElementIndex = 0;\n else if (this.focusedElementIndex < 0) {\n this.focusedElementIndex = this.interactiveElementList.length - 1;\n }\n }\n\n private setFocusIndexBasedOnShiftKey(shiftKey: boolean) {\n if (shiftKey) {\n this.focusedElementIndex -= 1;\n } else {\n this.focusedElementIndex += 1;\n }\n }\n\n private renderDialog = () => {\n const {\n hideDefaultControls,\n size,\n heading,\n label,\n destructive,\n dismissLabel,\n hideCloseButton,\n disableHeightConstraint,\n disableWidthConstraint,\n closeIconClick,\n DIALOG_CONTROLS,\n } = this;\n\n const controlsSlotUsed = isSlotUsed(this.el, DIALOG_CONTROLS);\n\n return (\n <dialog\n class={{\n dialog: true,\n [`${size}`]: true,\n \"disable-height-constraint\": !!disableHeightConstraint,\n \"disable-width-constraint\": !!disableWidthConstraint,\n }}\n aria-labelledby=\"dialog-label dialog-heading\"\n aria-describedby=\"dialog-alert dialog-content\"\n ref={(el) => (this.dialogEl = el)}\n >\n <div class=\"heading-area\">\n <div class=\"heading-content\">\n <div class=\"label\">\n <slot name=\"label\">\n <ic-typography variant=\"label\" id=\"dialog-label\">\n {label}\n </ic-typography>\n </slot>\n </div>\n <div class=\"heading\">\n <slot name=\"heading\">\n <ic-typography variant=\"h4\" id=\"dialog-heading\">\n {heading}\n </ic-typography>\n </slot>\n </div>\n </div>\n {!hideCloseButton && (\n <ic-button\n class=\"close-icon\"\n variant=\"icon-tertiary\"\n innerHTML={closeIcon}\n aria-label={dismissLabel}\n onClick={closeIconClick}\n data-gets-focus={\n destructive || (hideDefaultControls && !controlsSlotUsed)\n ? \"\"\n : null\n }\n ></ic-button>\n )}\n </div>\n <div class=\"content-area\">\n {isSlotUsed(this.el, \"alert\") && <slot name=\"alert\" />}\n <div id=\"dialog-content\">\n <slot />\n </div>\n </div>\n {(controlsSlotUsed || !hideDefaultControls) && (\n <div\n class={{\n [DIALOG_CONTROLS]: true,\n }}\n >\n {controlsSlotUsed ? (\n <slot name={DIALOG_CONTROLS} />\n ) : (\n <Fragment>\n <ic-button\n variant=\"tertiary\"\n onClick={() => this.cancelDialog()}\n class=\"dialog-control-button\"\n data-gets-focus={null}\n >\n Cancel\n </ic-button>\n <ic-button\n variant={destructive ? \"destructive\" : \"primary\"}\n onClick={() => this.confirmDialog()}\n class=\"dialog-control-button\"\n data-gets-focus=\"\"\n >\n Confirm\n </ic-button>\n </Fragment>\n )}\n </div>\n )}\n </dialog>\n );\n };\n\n render() {\n const { dialogRendered, disableHeightConstraint, fadeIn, theme } = this;\n\n return (\n <Host\n class={{\n \"ic-dialog-hidden\": !dialogRendered,\n \"ic-dialog-fade-in\": fadeIn,\n \"disable-height-constraint\": !!disableHeightConstraint,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n {disableHeightConstraint ? (\n <div class=\"backdrop\" ref={(el) => (this.backdropEl = el)}>\n {this.renderDialog()}\n </div>\n ) : (\n this.renderDialog()\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{r as t,c as i,h as a,F as e,H as o,g as n}from"./p-8e4e97b4.js";import{D as s,g as r,i as c,M as l,f as d,c as h,h as p,o as b,K as m,I as v,e as f}from"./p-b57e59b7.js";import"./p-bddf799a.js";const g='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;color:var(--ic-top-navigation-text);width:100%;position:relative;--ic-typography-color:var(--ic-top-navigation-text);--ic-button-secondary-text-monochrome:var(--ic-brand-text-color);--ic-button-secondary-border-monochrome:var(--ic-brand-text-color);--navigation-link-colour:var(--ic-top-navigation-text)}:host(.dark){color:var(--ic-color-text-primary-light);--ic-typography-color:var(--ic-color-text-primary-light);--ic-top-navigation-logo:var(--ic-color-icon-neutral);--ic-top-navigation-icon:var(--ic-color-icon-neutral);--ic-top-navigation-icon-and-label:var(--ic-color-text-primary-light);--ic-top-navigation-theme:var(--ic-color-icon-neutral);--ic-top-navigation-status-tag:var(--ic-color-background-primary-dark);--ic-top-navigation-status-tag-text:var(--ic-color-brand-text);--ic-top-navigation-status-tag-secondary:var(--ic-state-layer-darken-10);--ic-top-navigation-title-hover:var(--ic-action-dark-bg-hover);--ic-top-navigation-title-pressed:var(--ic-action-dark-bg-pressed);--navigation-link-colour:var(--ic-color-text-primary-light)}:host(.dark) ::slotted(ic-navigation-button){--ic-button-icon-monochrome:var(--ic-color-text-primary-light)}::slotted(ic-navigation-button){--ic-button-icon-monochrome:white}:host .top-navigation{background-color:var(--ic-top-navigation-background);height:-moz-max-content;height:max-content}:host(.fullwidth-searchbar) slot[name="search"]::slotted(form){width:100%}:host .title-link{display:inline-flex;align-items:center;text-decoration:none;padding:var(--ic-space-xxs);transition:var(--ic-easing-transition-fast)}:host .title-link,:host .title-link:visited,:host .title-link:active,:host .title-link ::slotted(a),:host .title-link:visited ::slotted(a),:host .title-link:active ::slotted(a){color:var(--ic-top-navigation-icon-and-label);text-decoration:none;outline:none}:host .title-link:hover:not(:focus){background-color:var(--ic-top-navigation-title-hover)}:host .title-link:active:not(:focus){background-color:var(--ic-top-navigation-title-pressed)}:host .title-link:hover{border-radius:var(--ic-border-radius)}:host .title-link:focus,:host .title-link:focus-within{border-radius:var(--ic-border-radius);box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline)}:host .title-link ic-typography{font-weight:600}:host .nav-panel-container{border-top:var(--ic-space-1px) solid var(--ic-top-navigation-keyline);padding:0 var(--ic-space-lg);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin));display:flex}:host(.dark) .nav-panel-container{border-top:var(--ic-border-keyline-darken)}.top-panel-container{display:flex;padding-top:0.5rem;padding-bottom:0.5rem}.navigation-tabs{margin-top:calc(-1 * var(--ic-space-1px))}.app-details-container{display:flex;align-items:center;flex:1 1 auto;margin-right:var(--ic-space-md)}.app-icon-container{display:flex;padding-right:var(--ic-space-xs)}.icon-buttons-container{display:flex;margin-left:var(--ic-space-md)}.icon-buttons-container ::slotted(nav){display:flex}.title-wrap{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}:host .app-status{border-radius:var(--ic-space-md);background-color:var(--ic-top-navigation-status-tag);color:var(--ic-top-navigation-status-tag-text);--ic-typography-color:var(--ic-top-navigation-status-tag-text);padding:var(--ic-space-xxs) var(--ic-space-lg);margin-left:var(--ic-space-md);flex:1 1 0;max-width:-moz-fit-content;max-width:fit-content}:host .app-version{border-radius:var(--ic-space-md);background-color:var(--ic-top-navigation-status-tag-secondary);color:var(--ic-top-navigation-status-tag);padding:var(--ic-space-xxs) var(--ic-space-sm);margin-left:var(--ic-space-xs);flex:1 1 0;max-width:-moz-fit-content;max-width:fit-content}slot[name="app-icon"]::slotted(*){fill:var(--ic-top-navigation-logo);width:2em;height:2em;cursor:pointer}slot[name="toggle-icon"] svg{fill:var(--ic-top-navigation-icon)}.search-menu-container{justify-content:right;display:flex;align-items:center}.menu-button-container{margin-left:var(--ic-space-md)}.menu-button-container .navigation-landmark-button-text{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.menu-button-container .navigation-landmark-button-text:dir(rtl){right:-9999px}.search-actions-container{display:flex}.menu-buttons-slot{display:flex;flex-direction:column}.navigation-landmark-text{position:absolute;width:var(--ic-space-1px);height:var(--ic-space-1px);padding:0;margin:calc(-1 * var(--ic-space-1px));overflow:hidden}.navigation-item-list{display:flex;list-style:none;height:2.75rem}.navigation-item-list::-webkit-scrollbar{display:none}:host ic-section-container{padding-bottom:0 !important;padding-top:0 !important}@media screen and (min-width: 993px){.app-details-container{margin-right:var(--ic-space-lg)}}@media screen and (max-width: 1200px){:host .nav-panel-container{padding:0 var(--ic-space-md)}}:host(.mobile-mode) .app-status,:host(.mobile-mode) .app-version{display:none}:host(.mobile-mode) .title-link{margin-right:var(--ic-space-xs)}:host(.mobile-mode) .search-menu-container{max-width:10rem}:host(.mobile-mode) .search-bar-container{display:flex;justify-content:center;align-items:center;border-top:var(--ic-border-keyline-darken);height:4rem;padding-left:var(--ic-space-md);padding-right:var(--ic-space-md);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin))}@media screen and (max-width: 576px){:host .title-link{margin-right:var(--ic-space-xxxs);word-break:break-word;-webkit-hyphens:none;hyphens:none}.top-panel-container{min-height:2.5rem}.search-bar-container{margin-top:0;height:3.5rem;padding-left:var(--ic-space-xs);padding-right:var(--ic-space-xs)}.menu-button-container{margin-left:var(--ic-space-sm)}slot[name="app-icon"]::slotted(*){width:1.5em;height:1.5em}slot[name="toggle-icon"] svg{width:1.5em;height:1.5em}}@media (forced-colors: active){:host .top-navigation{border-bottom:var(--ic-border-hc)}.app-status,.app-version{border:var(--ic-border-hc)}slot[name="app-icon"]::slotted(*){fill:currentcolor}slot[name="toggle-icon"] svg{fill:currentcolor}}';const u=g;const y=class{constructor(a){t(this,a);this.icNavigationMenuClosed=i(this,"icNavigationMenuClosed",7);this.icNavigationMenuOpened=i(this,"icNavigationMenuOpened",7);this.icTopNavResized=i(this,"icTopNavResized",7);this.hasAppIcon=false;this.hasAppTitleSlot=false;this.hasIconButtons=false;this.hasNavigation=false;this.hasSearchSlotContent=false;this.resizeObserver=null;this.searchBar=null;this.deviceSize=s.XL;this.foregroundColor=r();this.hasFullWidthSearchBar=false;this.mobileSearchBarVisible=false;this.mobileSearchHiddenOnBlur=false;this.navMenuVisible=false;this.searchButtonClick=false;this.searchValue="";this.contentAligned="full-width";this.customMobileBreakpoint=s.L;this.href="/";this.inline=false;this.shortAppTitle="";this.status="";this.theme="inherit";this.version="";this.checkSlots=()=>{this.hasAppIcon=c(this.el,"app-icon");this.hasAppTitleSlot=c(this.el,"app-title");this.hasNavigation=c(this.el,"navigation");this.hasIconButtons=c(this.el,"buttons");this.hasSearchSlotContent=c(this.el,"search");if(this.hasAppIcon){const t=this.el.querySelector('[slot="app-icon"]');if(t&&t.tagName==="A")t.tabIndex=-1}};this.initialiseSearchBar=()=>{if(!this.hasSearchSlotContent)return;const t=l(this.el,"search");if((t===null||t===void 0?void 0:t.tagName)==="IC-SEARCH-BAR"){this.searchBar=t}else if((t===null||t===void 0?void 0:t.tagName)==="FORM"){this.searchBar=t.querySelector("ic-search-bar")}if(this.searchBar!==null){this.searchBar.hideLabel=true}};this.toggleSearchBar=()=>{var t;this.mobileSearchBarVisible=!this.mobileSearchBarVisible;if(!this.searchBar)return;(t=this.mobileSearchButtonEl)===null||t===void 0?void 0:t.setAttribute("aria-label",`${this.mobileSearchBarVisible?"Hide":"Show"} search`);this.hasFullWidthSearchBar=this.mobileSearchBarVisible;this.searchBar.fullWidth=this.mobileSearchBarVisible;if(this.mobileSearchBarVisible){setTimeout((()=>{var t;(t=this.searchBar)===null||t===void 0?void 0:t.focus()}),100)}};this.menuButtonClick=()=>{this.showNavMenu(true)};this.showNavMenu=t=>{this.navMenuVisible=t;(t?this.icNavigationMenuOpened:this.icNavigationMenuClosed).emit();document.body.style.height=t?"100%":"auto";document.body.style.overflow=t?"hidden":"auto"};this.searchButtonMouseDownHandler=()=>{this.searchButtonClick=true};this.searchButtonClickHandler=()=>{this.toggleSearchBar();this.searchButtonClick=false};this.resizeObserverCallback=t=>{if(t===this.deviceSize)return;this.deviceSize=t;if(t>this.customMobileBreakpoint){this.showNavMenu(false);if(this.mobileSearchBarVisible){this.toggleSearchBar()}}this.icTopNavResized.emit({size:t});if(this.searchBar&&document.activeElement===this.searchBar){this.searchBar.setAttribute("hidden","true");this.searchBar.removeAttribute("hidden");setTimeout((()=>{var t;(t=this.searchBar)===null||t===void 0?void 0:t.focus()}),100)}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{this.resizeObserverCallback(d())}));this.resizeObserver.observe(this.el)}}watchPropHandler(t,i){h(i,t,this.initialiseSearchBar)}disconnectedCallback(){var t;(t=this.resizeObserver)===null||t===void 0?void 0:t.disconnect()}componentWillLoad(){this.checkSlots();this.deviceSize=d();this.initialiseSearchBar()}componentDidLoad(){p(this.runResizeObserver);if(!this.hasAppTitleSlot){b([{prop:this.appTitle,propName:"app-title"}],"Top Navigation")}}componentWillRender(){this.checkSlots()}navBarMenuCloseHandler(){var t;this.showNavMenu(false);(t=this.menuButtonEl)===null||t===void 0?void 0:t.setFocus()}searchInputBlurHandler({detail:t}){if(t!==null){if(this.mobileSearchBarVisible&&!this.searchButtonClick){this.toggleSearchBar()}this.searchValue=t.value}}searchValueChangeHandler({detail:t}){this.searchValue=t.value}brandChangeHandler({detail:t}){this.foregroundColor=t.mode}render(){const{appTitle:t,contentAligned:i,customMobileBreakpoint:n,deviceSize:r,el:l,foregroundColor:d,hasAppIcon:h,hasAppTitleSlot:p,hasFullWidthSearchBar:b,hasIconButtons:g,hasNavigation:u,hasSearchSlotContent:y,href:k,inline:x,menuButtonClick:w,mobileSearchBarVisible:z,navMenuVisible:H,searchButtonClickHandler:M,searchButtonMouseDownHandler:C,shortAppTitle:B,status:S,version:T,theme:j}=this;const A=S!=="";const $=T!=="";const I=u||g||A||$;const N=r<=s.S;const R=N?"medium":"large";const V=t!==""&&f(t);const O=r<=n;const D=O?N?"subtitle-small":"h4":"h3";const L=`${z?"Hide":"Show"} search`;const F=N?"small":"medium";const W=c(l,"short-app-title");const q=p?"div":"a";const P=q=="a"&&{href:k};return a(o,{key:"b0d2e6aebeb66ddb4ca659cfba83e2cdbd6ec3f4",class:{"fullwidth-searchbar":b,"mobile-mode":O,[v.Dark]:d===v.Dark,[`ic-theme-${j}`]:j!=="inherit"}},a("div",{key:"4a4576c41289fc356d5cfd4e0414901bd8d21a88",class:"top-navigation"},a("ic-section-container",{key:"ec7aa4c1ce015f80c3850c2eba3b1e6b6d00c475",aligned:i,"full-height":true},a("header",{key:"b388f01d5e3084e0530dcc5b460d773b8f51d1f2",role:"banner"},a("div",{key:"a733f85700e1abccdf8aeceb97198359c53f9960",class:"top-panel-container"},a("div",{key:"948679467aee550281cdec8c5e43c6d5b4e7fd29",class:"app-details-container"},(V||p)&&a(q,Object.assign({key:"4054a371178c53cf2794e7a9a653575b95a9354c",class:"title-link"},P),h&&a("div",{key:"11616acef1f4ff274320f24da803eab7cc52fa1d",class:"app-icon-container"},a("slot",{key:"b36a9b7f67c72851dd11fd8f356a6735f4676814",name:"app-icon"})),N&&(!m(B)||W)?a("ic-typography",{variant:"subtitle-small","aria-label":(!p||!W)&&`${t} (${B})`},a("h1",null,W?a("slot",{name:"short-app-title"}):B)):a("ic-typography",{variant:D},a("h1",{class:"title-wrap"},p?a("slot",{name:"app-title"}):t))),A&&a("div",{key:"42f5c01069f02f82abd34b4a540050154bdafec5",class:"app-status"},a("ic-typography",{key:"6052ad2c828b533ec121ee45d71c0afcdaae0622","aria-label":"app tag",variant:"label-uppercase",class:"app-status-text"},S)),$&&a("div",{key:"173b8c98351d425e843aae093902b91feaa7fd05",class:"app-version"},a("ic-typography",{key:"f46ecb51ac2c1f2c01beabf4590ac76681d94733",variant:"label",class:"app-version-text","aria-label":"app version"},T))),(y||I)&&a("div",{key:"8f85b0505a04f7a3affb88ceaa81fe9eccd72ea1",class:"search-menu-container"},a("div",{key:"ff332cfc554fef6856becd5fb87b9f315565bc1e",class:"search-actions-container"},!O?a(e,null,a("slot",{name:"search"}),g&&a("div",{class:"icon-buttons-container"},a("slot",{name:"buttons"}))):a(e,null,y&&a("ic-button",{id:"search-toggle-button",ref:t=>this.mobileSearchButtonEl=t,onMouseDown:C,variant:"icon-tertiary",monochrome:true,size:R,"aria-label":L,theme:d,onClick:M},a("slot",{name:"toggle-icon"},a("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"#ffffff"},a("path",{d:"M0 0h24v24H0V0z",fill:"none"}),a("path",{d:"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"})))),I&&a("div",{class:"menu-button-container"},a("span",{id:"navigation-landmark-button-text",class:"navigation-landmark-button-text","aria-hidden":"true"},"Main navigation button"),a("nav",{"aria-labelledby":"navigation-landmark-button-text","aria-hidden":`${H}`},a("ic-button",{id:"menu-button",ref:t=>this.menuButtonEl=t,theme:d,variant:"secondary",monochrome:true,"aria-expanded":"false","aria-haspopup":"true","aria-label":`Open ${u?"navigation":"app"} menu`,size:F,onClick:w},"Menu",a("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#ffffff",slot:"left-icon"},a("path",{d:"M0 0h24v24H0V0z",fill:"none"}),a("path",{d:"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"}))))))))),z&&a("div",{key:"ef7c477979320e20293484f6594eb89a38973540",class:"search-bar-container"},a("slot",{key:"b19e53fc019ff1d16c0da99d7d38bc6428dd7cc8",name:"search"})),u&&!O&&a("div",{key:"bdd8f9b982328135f06fc010828bbf0dc803a788",class:"navigation-tabs"},a("span",{key:"e231e5a002a04ff6275aa2d6a39c66d83787367a",id:"navigation-landmark-text",class:"navigation-landmark-text","aria-hidden":"true"},"Main pages"),a("nav",{key:"201327e158e97d601a8fb93b8174af6091bd0295","aria-labelledby":"navigation-landmark-text",class:"nav-panel-container"},a("ic-horizontal-scroll",{key:"df8f402d0da993079b7378292cba17e85259c53c",monochrome:true,appearance:d},a("ul",{key:"22aa05880499690dcd43572705234bdb6fd386b0",class:"navigation-item-list",tabindex:"-1"},a("slot",{key:"effb669cef379880d7b45ca4e74ef096c10a1afb",name:"navigation"})))))))),H&&a("ic-navigation-menu",{key:"a0a45fb9db2ea99414cdc2570f6c9697a96f01ad",version:T,status:S,class:{inline:x}},g&&a("div",{key:"8c74bfd6c807022ccb315bd4718fa8a521fb08ae",class:"menu-buttons-slot",slot:"buttons"},a("slot",{key:"1720467597b353122e907f7c83e1f9e0ef62c9ad",name:"buttons"})),a("ul",{key:"ccdc85df3febad2d603caeccafbd675be4d3d9a2",slot:"navigation"},a("slot",{key:"1f465185f8937c81b279e8823127e0e8bc7d6841",name:"navigation"}))))}get el(){return n(this)}static get watchers(){return{appTitle:["watchPropHandler"]}}};y.style=u;export{y as ic_top_navigation};
2
- //# sourceMappingURL=p-fb69fbc0.entry.js.map