@infineon/infineon-design-system-stencil 35.2.1--canary.1923.85f4a97bda6510f44b7c7e47e8cd9b8183844346.0 → 35.2.1--canary.1915.36639a15386e1d21092f01b66809b4485e01ce54.0

package/dist/infineon-design-system-stencil/p-2d89c5e0.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["queryShadowRoot","root","skipNode","isMatch","maxDepth","depth","matches","traverseSlot","$slot","assignedNodes","filter","node","nodeType","length","$slotParent","parentElement","children","Array","from","$child","push","shadowRoot","tagName","isHidden","$elem","hasAttribute","getAttribute","style","display","opacity","visibility","isDisabled","isFocusable","HTMLAnchorElement","HTMLAreaElement","HTMLButtonElement","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","HTMLIFrameElement","animationTo","element","keyframes","options","animated","animate","Object","assign","fill","addEventListener","commitStyles","cancel","keyframeDefaults","easing","KEYFRAMES","fadeIn","offset","fadeOut","modalCss","IfxModalStyle0","IfxModal","constructor","hostRef","this","opened","showModal","caption","closeOnOverlayClick","variant","size","alertIcon","okButtonLabel","cancelButtonLabel","slotButtonsPresent","showCloseButton","focusableElements","handleTopFocus","attemptFocus","getLastFocusableElement","handleBottomFocus","getFirstFocusableElement","handleKeypress","event","key","doBeforeClose","componentDidLoad","hostElement","el","componentWillRender","handleComponentOverflow","modalContentContainer","querySelector","isModalContentContainerHeightReachedViewport","classList","add","contains","remove","setTimeout","closeButton","focus","open","anim","modalContainer","duration","_a","_b","blur","ifxOpen","emit","err","close","ifxClose","removeEventListener","trigger","triggers","prevented","some","defaultPrevented","openedChanged","newValue","handleOverlayClick","handleContentUpdate","e","slotElement","target","nodes","forEach","observer","disconnect","MutationObserver","mutationsList","_","mutation","type","observe","attributes","childList","subtree","handleButtonsSlotChange","currentTarget","assignedElements","childElementCount","Promise","resolve","modalContent","modalContentHeight","offsetHeight","viewportHeight","window","innerHeight","render","isAlertVariant","h","Host","ref","class","onClick","onFocus","tabindex","role","icon","name","onSlotchange"],"sources":["src/global/utils/focus-trap.ts","src/global/utils/animation.ts","src/components/modal/modal.scss?tag=ifx-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["/**\n * Copy/pasted from https://github.com/andreasbm/focus-trap\n */\n\n/**\n * Traverses the slots of the open shadowroots and returns all children matching the query.\n * We need to traverse each child-depth one at a time because if an element should be skipped\n * (for example because it is hidden) we need to skip all of it's children. If we use querySelectorAll(\"*\")\n * the information of whether the children is within a hidden parent is lost.\n * @param {ShadowRoot | HTMLElement} root\n * @param skipNode\n * @param isMatch\n * @param {number} maxDepth\n * @param {number} depth\n * @returns {HTMLElement[]}\n */\nexport function queryShadowRoot(\n  root: ShadowRoot | HTMLElement,\n  skipNode: ($elem: HTMLElement) => boolean,\n  isMatch: ($elem: HTMLElement) => boolean,\n  maxDepth: number = 20,\n  depth: number = 0\n): HTMLElement[] {\n  const matches: HTMLElement[] = [];\n\n  // If the depth is above the max depth, abort the searching here.\n  if (depth >= maxDepth) {\n    return matches;\n  }\n\n  // Traverses a slot element\n  const traverseSlot = ($slot: HTMLSlotElement) => {\n    // Only check nodes that are of the type Node.ELEMENT_NODE\n    // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\n    const assignedNodes = $slot\n      .assignedNodes()\n      .filter((node) => node.nodeType === 1);\n    if (assignedNodes.length > 0) {\n      const $slotParent = assignedNodes[0].parentElement!;\n      return queryShadowRoot(\n        $slotParent,\n        skipNode,\n        isMatch,\n        maxDepth,\n        depth + 1\n      );\n    }\n\n    return [];\n  };\n\n  // Go through each child and continue the traversing if necessary\n  // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.\n  // Therefore we fallback to an empty array if it is undefined.\n  const children = Array.from(root.children || []) as HTMLElement[];\n  for (const $child of children) {\n    // Check if the element and its descendants should be skipped\n    if (skipNode($child)) {\n      // console.log('-- SKIP', $child);\n      continue;\n    }\n\n    // console.log('$child', $child);\n\n    // If the element matches we always add it\n    if (isMatch($child)) {\n      matches.push($child);\n    }\n\n    if ($child.shadowRoot != null) {\n      // If the element has a shadow root we need to traverse it\n      matches.push(\n        ...queryShadowRoot(\n          $child.shadowRoot,\n          skipNode,\n          isMatch,\n          maxDepth,\n          depth + 1\n        )\n      );\n    } else if ($child.tagName === 'SLOT') {\n      // If the child is a slot we need to traverse each assigned node\n      matches.push(...traverseSlot($child as HTMLSlotElement));\n    } else {\n      // Traverse the children of the element\n      matches.push(\n        ...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1)\n      );\n    }\n  }\n\n  return matches;\n}\n\n/**\n * Returns whether the element is hidden.\n * @param $elem\n */\nexport function isHidden($elem: HTMLElement): boolean {\n  return (\n    $elem.hasAttribute('hidden') ||\n    ($elem.hasAttribute('aria-hidden') &&\n      $elem.getAttribute('aria-hidden') !== 'false') ||\n    // A quick and dirty way to check whether the element is hidden.\n    // For a more fine-grained check we could use \"window.getComputedStyle\" but we don't because of bad performance.\n    // If the element has visibility set to \"hidden\" or \"collapse\", display set to \"none\" or opacity set to \"0\" through CSS\n    // we won't be able to catch it here. We accept it due to the huge performance benefits.\n    $elem.style.display === `none` ||\n    $elem.style.opacity === `0` ||\n    $elem.style.visibility === `hidden` ||\n    $elem.style.visibility === `collapse`\n  );\n\n  // If offsetParent is null we can assume that the element is hidden\n  // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null\n  // || $elem.offsetParent == null;\n}\n\n/**\n * Returns whether the element is disabled.\n * @param $elem\n */\nexport function isDisabled($elem: HTMLElement): boolean {\n  return (\n    $elem.hasAttribute('disabled') ||\n    ($elem.hasAttribute('aria-disabled') &&\n      $elem.getAttribute('aria-disabled') !== 'false')\n  );\n}\n\n/**\n * Determines whether an element is focusable.\n * Read more here: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus/1600194#1600194\n * Or here: https://stackoverflow.com/questions/18261595/how-to-check-if-a-dom-element-is-focusable\n * @param $elem\n */\nexport function isFocusable($elem: HTMLElement): boolean {\n  // Discard elements that are removed from the tab order.\n  if (\n    $elem.getAttribute('tabindex') === '-1' ||\n    isHidden($elem) ||\n    isDisabled($elem)\n  ) {\n    return false;\n  }\n\n  return (\n    // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists\n    $elem.hasAttribute('tabindex') ||\n    // Anchor tags or area tags with a href set\n    (($elem instanceof HTMLAnchorElement || $elem instanceof HTMLAreaElement) &&\n      $elem.hasAttribute('href')) ||\n    // Form elements which are not disabled\n    $elem instanceof HTMLButtonElement ||\n    $elem instanceof HTMLInputElement ||\n    $elem instanceof HTMLTextAreaElement ||\n    $elem instanceof HTMLSelectElement ||\n    // IFrames\n    $elem instanceof HTMLIFrameElement\n  );\n}","export function animationTo(\n  element: HTMLElement,\n  keyframes: Keyframe | Keyframe[],\n  options?: KeyframeAnimationOptions\n) {\n  const animated = element.animate(keyframes, { ...options, fill: 'both' });\n  animated.addEventListener('finish', () => {\n    // @ts-ignore\n    animated.commitStyles();\n    animated.cancel();\n  });\n\n  return animated;\n}\n\nconst keyframeDefaults = {\n  easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n};\n\nexport const KEYFRAMES = {\n  fadeIn: [\n    {\n      offset: 0,\n      ...keyframeDefaults,\n      opacity: 0,\n    },\n    {\n      offset: 1,\n      ...keyframeDefaults,\n      opacity: 1,\n    },\n  ],\n  fadeOut: [\n    {\n      offset: 0,\n      ...keyframeDefaults,\n      opacity: 1,\n    },\n    {\n      offset: 1,\n      ...keyframeDefaults,\n      opacity: 0,\n    },\n  ],\n};","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.modal-container {\n  display: none;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1060;\n  overflow-y: auto;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n}\n\n.modal-container.open {\n  display: flex;\n}\n\n.modal-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: tokens.$ifxColorBaseBlack;\n  opacity: 0.5;\n  z-index: 0;\n}\n\n.modal-content-container {\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  width: 90%;\n  min-height: 218px;\n  background-color: #fff;\n  border-radius: tokens.$ifxBorderRadiusNone;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n  \n  //overflow: hidden;\n\n  box-sizing: border-box;\n  align-items: stretch;\n}\n\n.modal-content-container {\n  &.no-overflow { \n    overflow: hidden;\n    & .modal-body { \n      overflow-y: auto;\n    }\n  }\n}\n\n/* Add desktop size here */\n@media screen and (min-width: 768px) {\n  .modal-content-container {\n    width: 540px;\n    min-height: 132px;\n\n    &.m,\n    &.l,\n    &.s {\n      width: 90%;\n    }\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .modal-content-container {\n\n    &.s {\n      width: 47vw;\n    }\n\n    &.m {\n      width: 63vw;\n    }\n\n    &.l {\n      width: 80%;\n    }\n  }\n}\n\n.modal-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-height: 90vh;\n}\n\n.modal-icon-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  background-color: tokens.$ifxColorOcean500;\n  align-self: stretch;\n\n  &.danger {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  & ifx-icon {\n    color: tokens.$ifxColorBaseWhite;\n  }\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  min-height: 76px;\n  max-height: 105px;\n  box-sizing: border-box;\n  border-radius: 1px 1px 0px 0px;\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\n}\n\n.modal-caption {\n  max-height: 56px;\n  display: -webkit-box;\n  overflow: hidden;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical; \n}\n\n.modal-header h2 {\n  margin: 0;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeXl;\n  line-height: 28px;\n}\n\n.modal-header button {\n  background: none;\n  border: none;\n  font-size: 1.5em;\n  padding: 0;\n  cursor: pointer;\n}\n\n.modal-close-button {\n  align-self: flex-start;\n  margin-right: -8px;\n}\n\n.modal-body {\n  padding: 16px 24px;\n  min-height: 56px;\n  box-sizing: border-box;\n  flex: 1;\n  \n  //overflow-y: auto;\n}\n\n.modal-footer.buttons-present ::slotted(*){\n  display: flex;\n  justify-content: flex-end;\n  gap: 16px;\n  padding: 16px 24px 32px 16px\n}\n\n.modal-border {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  font-size: 1.5em;\n  flex-grow: 1;\n\n  &.primary {\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  &.secondary {\n    background-color: tokens.$ifxColorEngineering500;\n  }\n\n  &.danger {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  &.success {\n    background-color: tokens.$ifxColorGreen500;\n  }\n\n  &.warning {\n    background-color: tokens.$ifxColorOrange500;\n  }\n\n  &.orange {\n    background-color: tokens.$ifxColorOrange500;\n  }\n\n  &.ocean {\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  &.grey {\n    background-color: tokens.$ifxColorEngineering500;\n  }\n\n  &.grey-200 {\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &.red {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  &.green {\n    background-color: tokens.$ifxColorGreen500;\n  }\n\n  &.berry {\n    background-color: tokens.$ifxColorBerry500;\n  }\n}","import { Component, Prop, Element, State, Event, Host, EventEmitter, h, Watch } from '@stencil/core';\nimport { queryShadowRoot, isHidden, isFocusable } from '../../global/utils/focus-trap';\nimport { animationTo, KEYFRAMES } from '../../global/utils/animation';\n \n\ntype CloseEventTrigger = 'CLOSE_BUTTON' | 'ESCAPE_KEY' | 'BACKDROP';\n\nexport interface BeforeCloseEventDetail {\n  trigger: CloseEventTrigger;\n}\n@Component({\n  tag: 'ifx-modal',\n  styleUrl: 'modal.scss',\n  shadow: true\n})\nexport class IfxModal {\n  @Prop({ reflect: true, mutable: true }) opened?: boolean = false;\n  @State() showModal: boolean = this.opened || false;\n\n  @Prop() caption: string = 'Modal Title';\n  @Prop() closeOnOverlayClick: boolean = true;\n\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n\n  @Prop() variant: 'default' | 'alert-brand' | 'alert-danger' = 'default';\n  \n  @Prop() size: 's' | 'm' | 'l' = 's';\n\n  @Prop() alertIcon: string = '';\n  @Prop() okButtonLabel: string = 'OK';\n  @Prop() cancelButtonLabel: string = 'Cancel';\n  @Element() hostElement: HTMLElement;\n\n  @State() slotButtonsPresent: boolean = false;\n\n  @Prop() showCloseButton: boolean = true;\n\n  private modalContainer: HTMLElement;\n  private focusableElements: HTMLElement[] = [];\n  private closeButton: HTMLButtonElement | HTMLIfxIconButtonElement;\n\n  componentDidLoad() {\n    // Query all focusable elements and store them in `focusableElements`.\n    // Needed for the \"focus trap\" functionality.\n    this.focusableElements = queryShadowRoot(\n      this.hostElement.shadowRoot,\n      (el) => isHidden(el) || el.matches('[data-focus-trap-edge]'),\n      isFocusable\n    );\n  }\n\n  componentWillRender() { \n    if(this.showModal) { \n      this.handleComponentOverflow();\n    }\n  }\n\n  handleComponentOverflow() { \n    const modalContentContainer = this.hostElement.shadowRoot.querySelector('.modal-content-container');\n    if (this.showModal && this.isModalContentContainerHeightReachedViewport()) {\n      modalContentContainer.classList.add('no-overflow')\n    } else if(modalContentContainer?.classList.contains('no-overflow')) { \n      modalContentContainer?.classList.remove('no-overflow')\n    }\n  }\n\n  getFirstFocusableElement(): HTMLElement | null {\n    return this.focusableElements[0];\n  }\n\n  getLastFocusableElement(): HTMLElement | null {\n    return this.focusableElements[this.focusableElements.length - 1];\n  }\n\n  handleTopFocus = () => {\n    this.attemptFocus(this.getLastFocusableElement());\n  };\n\n  handleBottomFocus = () => {\n    this.attemptFocus(this.getFirstFocusableElement());\n  };\n\n  attemptFocus(element: HTMLElement | null) {\n    if (element == null) {\n      setTimeout(() => { //wait until DOM is fully loaded\n        this.closeButton.focus();\n      },);\n      return;\n    }\n\n    setTimeout(() => { //wait until DOM is fully loaded\n      element.focus();\n    }, 0);\n  }\n\n  open() {\n    this.showModal = true;\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        // Setting focus on last item and removing immediately\n        // so, on tab press first element is focused\n        setTimeout(() => {\n          this.getLastFocusableElement()?.focus();\n          this.getLastFocusableElement()?.blur();\n        }, 0);\n\n        this.ifxOpen.emit();\n      });\n\n      this.hostElement.addEventListener('keydown', this.handleKeypress);\n    } catch (err) {\n      this.ifxOpen.emit();\n    }\n  }\n\n  close() {\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        this.showModal = false;\n        this.ifxClose.emit();\n      });\n      this.hostElement.removeEventListener('keydown', this.handleKeypress);\n    } catch (err) {\n      this.showModal = false;\n      this.ifxClose.emit();\n    }\n  }\n\n  handleKeypress = (event: KeyboardEvent) => {\n    if (!this.showModal) {\n      return;\n    }\n    if (event.key === 'Escape') {\n      this.doBeforeClose('ESCAPE_KEY');\n    }\n  };\n\n  doBeforeClose(trigger: CloseEventTrigger) {\n    const triggers = [];\n    triggers.push(trigger);\n    const prevented = triggers.some((event) => event.defaultPrevented);\n    if (!prevented) {\n      this.opened = false;\n    }\n  }\n\n  @Watch('opened')\n  openedChanged(newValue) {\n    if (newValue === true) {\n      this.open();\n    } else {\n      this.close()\n    }\n  }\n\n  handleOverlayClick() {\n    if (this.closeOnOverlayClick) {\n      this.doBeforeClose('BACKDROP')\n    }\n  }\n\n  handleContentUpdate(e) {\n  const slotElement = e.target;\n  const nodes = slotElement.assignedNodes();\n  if(nodes.length > 0) {\n    nodes.forEach(node => {\n      if (node.observer) {\n        node.observer.disconnect();\n        delete node.observer;\n      }\n      const observer = new MutationObserver((mutationsList, _) => {\n        for(let mutation of mutationsList) {\n          if (mutation.type === 'childList') {\n            if(this.showModal) { \n              this.handleComponentOverflow();\n            }\n          }\n        }\n        });\n        observer.observe(node, { attributes: true, childList: true, subtree: true });\n        node.observer = observer;\n      });\n    } \n  }\n\n  handleButtonsSlotChange(e) {\n    if(e.currentTarget.assignedElements()[0]?.childElementCount > 0) {\n      this.slotButtonsPresent = true;\n    }else{\n      this.slotButtonsPresent = false;\n    }\n  }\n\n isModalContentContainerHeightReachedViewport() {\n  //Adding timeout for proper height detection on Edge browser\n  return new Promise(resolve => {\n    setTimeout(() => {\n      const modalContent = this.hostElement.shadowRoot.querySelector('.modal-content') as HTMLElement;\n      const modalContentHeight = modalContent.offsetHeight;\n      const viewportHeight = window.innerHeight;\n      resolve(modalContentHeight >= viewportHeight * 0.9);\n    }, 100);\n  });\n}\n\n\n  render() {\n    const isAlertVariant = this.variant !== 'default';\n    return (\n      <Host>\n        <div\n          ref={(el) => (this.modalContainer = el)}\n          class={`modal-container ${this.showModal ? 'open' : ''}`}\n        >\n          <div\n            class=\"modal-overlay\"\n            onClick={() => this.handleOverlayClick()}\n          ></div>\n          <div\n            data-focus-trap-edge\n            onFocus={this.handleTopFocus}\n            tabindex=\"0\"\n          ></div>\n          <div\n            class={`modal-content-container ${this.size}`}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={this.caption}>\n            {isAlertVariant ? (\n              <div class={`modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}`}>\n                {this.alertIcon ? <ifx-icon icon={this.alertIcon} /> : null}\n              </div>\n            ) : null}\n            <div class=\"modal-content\">\n              <div class=\"modal-header\">\n                <h2 class=\"modal-caption\">{this.caption}</h2>\n                { \n                  this.showCloseButton && \n                  <ifx-icon-button class = 'modal-close-button' ref={(el) => (this.closeButton = el)} icon=\"cross-16\" variant=\"tertiary\" onClick={() => this.doBeforeClose('CLOSE_BUTTON') }>\n                  </ifx-icon-button>\n                }\n              </div>\n              <div class=\"modal-body\">\n                <slot name=\"content\" onSlotchange={(e) => this.handleContentUpdate(e)} />\n              </div>\n              <div class={`modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}`}>\n                <slot name=\"buttons\" onSlotchange={(e)=>this.handleButtonsSlotChange(e)}>\n                </slot>\n              </div>\n            </div>\n          </div>\n          <div\n            data-focus-trap-edge\n            onFocus={this.handleBottomFocus}\n            tabindex=\"0\"\n          ></div>\n        </div>\n      </Host>\n\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-4e8f2b8b.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as t,g as n}from"./p-b7a462e5.js";const i=':host(.hidden){display:none}.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0px 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:16px;color:#1D1D1D}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s;display:flex}.navbar__item.open .navItemIconWrapper{transform:rotate(-180deg);transition:0.3s}.navbar__item:hover{color:#0A8276;cursor:pointer}.navbar__item:hover .username__tooltip{display:block}.navbar__item:hover .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{cursor:pointer;background-color:#08665C}.navbar__item.remove{display:none}.navbar__item.removeLabel .label__wrapper{display:none}.navbar__item .number__indicator-wrapper{position:relative;top:-11px}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .username__tooltip{display:none;position:absolute;top:35px;right:0;text-wrap:nowrap;padding:1px 5px;font-size:13px;font-family:"Source Sans 3";background-color:black;color:#fff;z-index:99}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper:hover .username__tooltip{display:block}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;border-radius:100%;background-color:#0A8276}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper .initials{color:#FFF;text-align:center;font-family:"Source Sans 3";font-size:14px;font-style:normal;font-weight:600;line-height:20px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper img{width:24px;height:24px;border-radius:100%}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.removeWrapper{display:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.hide{display:none}.container{position:relative}.container .sub__layer-back-button{display:none}.container .sub__layer-back-button.show{display:flex;justify-content:flex-start}.container .sub__layer-back-button.show .back__button-wrapper{display:flex;align-items:center;gap:8px;padding:8px 0 16px 0;color:#0A8276;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.container .sub__layer-back-button.show .back__button-wrapper span:hover,.container .sub__layer-back-button.show .back__button-wrapper ifx-icon:hover{cursor:pointer}.container.hide{display:none}.container .inner__content-wrapper{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px}.container .inner__content-wrapper.no-gap{gap:0px}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper.no-gap{gap:0px}.container .inner__content-wrapper .number__indicator-wrapper{position:relative;top:-11px}.navbar-menu{position:absolute;display:none;list-style-type:none;visibility:visible;flex-direction:column;width:224px;min-width:224px;background:#FFFFFF;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;padding:8px 0px;font-family:var(--ifx-font-family)}.navbar-menu.open:not(.itemInMobileMenu){display:flex}.navbar-menu.itemInMobileMenu{display:none}.navbar-menu.right{left:100%;top:-40%}.navbar-menu.left{top:-40%;right:100%}.navbar-menu.rightSideItemMenu{left:initial;right:0px}.navbar__item.layer__item-parent{color:#1D1D1D;font-size:24px;font-style:normal;font-weight:600;line-height:32px;letter-spacing:-0.24px;cursor:initial}.navbar__item.layer__item-parent .navbar__container-right-content-navigation-item-icon-wrapper ifx-icon svg{width:24px;height:24px}.navbar__item.sidebarMenuItem{justify-content:space-between;padding:0}.navbar__item.menuItem{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.navbar__item.menuItem.hide{display:none}.navbar__item.menuItem .label__wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__item.menuItem:hover{cursor:pointer;background-color:#EEEDED}.navbar__item.menuItem:active{background-color:#BFBBBB}.sub__layer-menu{padding:5px;display:none}.sub__layer-menu.remove__margin{margin:0;padding:0}.sub__layer-menu.open{display:block}.navbar__item.hide{display:none}.menuItemRightIconWrapper.hide{display:none}.navItemIconWrapper.hide{display:none}';const a=i;const r=class{constructor(t){e(this,t);this.showLabel=true;this.href="";this.imageUrl="";this.target="_self";this.alt="";this.userName="";this.internalHref="";this.isMenuItem=false;this.hasChildNavItems=false;this.internalImageUrl={type:"",value:""};this.defaultProfileImage=`<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">\n<rect width="48" height="48" fill="#0A8276"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M24 14C21.7909 14 20 15.7909 20 18C20 20.2091 21.7909 22 24 22C26.2091 22 28 20.2091 28 18C28 15.7909 26.2091 14 24 14ZM18 18C18 14.6863 20.6863 12 24 12C27.3137 12 30 14.6863 30 18C30 21.3137 27.3137 24 24 24C20.6863 24 18 21.3137 18 18ZM16.5869 28.3984C18.2683 27.0179 20.7466 26 24 26C27.2541 26 29.7324 27.0209 31.4134 28.4024C33.0562 29.7526 34 31.5119 34 33V35C34 35.5523 33.5523 36 33 36H15C14.4477 36 14 35.5523 14 35V33C14 31.5074 14.9433 29.7479 16.5869 28.3984ZM17.8561 29.9441C16.5187 31.0421 16 32.2826 16 33V34H32V33C32 32.2881 31.4818 31.0474 30.1436 29.9476C28.8436 28.8791 26.8219 28 24 28C21.1774 28 19.1557 28.8771 17.8561 29.9441Z" fill="white"/>\n</svg>`}handleOutsideClick(e){const t=e.composedPath();const n=this.getItemMenu();if(n){if(n.classList.contains("open")){if(!t.includes(this.el)){this.closeItemMenu()}}}}componentWillLoad(){this.setHref();this.setImage();const e=this.getNavbarItems();if(e.length!==0){this.hasChildNavItems=true}else{this.hasChildNavItems=false}}componentDidLoad(){this.setProfileGap();if(this.hasChildNavItems){const e=this.getNavbarItems();this.appendNavItemToMenu(e)}}async hideComponent(){this.el.style.display="none"}async showComponent(){this.el.style.display=""}handleClassList(e,t,n){e.classList[t](n);if(t==="contains"){return e.classList.contains(n)}}getNavbarItems(){const e=this.el.querySelectorAll("ifx-navbar-item");return e}getNavBarItem(){const e=this.el.shadowRoot.querySelector(".navbar__item");return e}relocateUsingSlot(e){e.forEach((e=>{e.setAttribute("slot","first__layer")}))}appendNavItemToMenu(e){this.relocateUsingSlot(e)}isValidHttpUrl(e){let t;try{t=new URL(e)}catch(e){return false}return t.protocol==="http:"||t.protocol==="https:"}setImage(){if(this.imageUrl.toLowerCase().trim()===""){this.internalImageUrl={type:undefined,value:""}}else if(this.isValidHttpUrl(this.imageUrl)){this.internalImageUrl={type:"url",value:this.imageUrl}}else{this.internalImageUrl={type:"initials",value:this.imageUrl}}}setHref(){if(this.href.toLowerCase().trim()===""){this.internalHref=undefined}else this.internalHref=this.href}setProfileGap(){const e=this.el.shadowRoot.querySelector(".inner__content-wrapper");const t=this.el.shadowRoot.querySelector(".label__wrapper");const n=t.querySelector("slot");const i=n.assignedNodes();if(!i.length){this.handleClassList(e,"add","no-gap")}else{this.handleClassList(e,"remove","no-gap")}}getItemMenu(){const e=this.el.shadowRoot.querySelector(".navbar-menu");return e}closeItemMenu(){const e=this.getItemMenu();const t=this.getNavBarItem();if(e){this.handleClassList(e,"remove","open");this.handleClassList(t,"remove","open")}}toggleItemMenu(){if(!this.internalHref){if(this.isMenuItem&&this.hasChildNavItems){const e=this.getItemMenu();this.handleClassList(e,"add","right")}if(this.hasChildNavItems){const e=this.getItemMenu();const t=this.getNavBarItem();this.handleClassList(e,"toggle","open");this.handleClassList(t,"toggle","open")}}}itemHasNestedItems(){const e=this.el.shadowRoot.querySelector("ifx-navbar-item");if(e){return true}else{return false}}render(){return t("div",{key:"8ecc7a4bfb1f0567c36f7feb7871071795442e46",class:"container"},t("a",{key:"72ee8139fcd89ff4f942e48106007e0e405c6848",href:this.internalHref,target:this.target,onClick:()=>this.toggleItemMenu(),class:`navbar__item ${!this.showLabel?"removeLabel":""} ${this.hasChildNavItems?"isParent":""}`},t("div",{key:"52a4b16952c82671c9baf03985639c3abf87cd10",class:"inner__content-wrapper"},t("div",{key:"d0690e50912aad27e734126151b497ab6a97ea53",class:`navbar__container-right-content-navigation-item-icon-wrapper`},this.userName.trim()!==""&&t("div",{key:"4bf55d1b2c612cf077d0a8be069460aa10bae990",class:"username__tooltip"},this.userName),this.internalImageUrl.type!=="initials"&&t("img",{key:"b1347b123a5dd8d13e368f0662891bb06fa7e375",src:this.internalImageUrl.type==="url"?this.internalImageUrl.value:`data:image/svg+xml,${encodeURIComponent(this.defaultProfileImage)}`,alt:this.alt}),this.internalImageUrl.type==="initials"&&t("div",{key:"cc0dce453c29e2e6b7323e8c5f89aba9d233a933",class:"initials__wrapper"},t("span",{key:"e14fda7b01a57332292a760726c7187b2f0b1506",class:"initials"},this.internalImageUrl.value))),t("span",{key:"480d5c605421eb1e0150c805a61f7b4ff9141d9d",class:"label__wrapper"},t("slot",{key:"99167bd48bc34154101445e91bbe4b20e862bf6f",onSlotchange:()=>this.setProfileGap()})))),this.hasChildNavItems&&t("ul",{key:"2b3826ea51c4967999fe536139c739d597e4079a",class:"navbar-menu rightSideItemMenu"}," ",t("slot",{key:"499f9a61dfff2d1016c8da8145f6e671fdbe3b28",name:"first__layer"})," "))}static get assetsDirs(){return["assets"]}get el(){return n(this)}};r.style=a;export{r as ifx_navbar_profile};
+//# sourceMappingURL=p-4e8f2b8b.entry.js.map

package/dist/infineon-design-system-stencil/p-4e8f2b8b.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["navbarItemCss","IfxNavbarProfileStyle0","NavbarProfile","constructor","hostRef","this","showLabel","href","imageUrl","target","alt","userName","internalHref","isMenuItem","hasChildNavItems","internalImageUrl","type","value","defaultProfileImage","handleOutsideClick","event","path","composedPath","itemMenu","getItemMenu","classList","contains","includes","el","closeItemMenu","componentWillLoad","setHref","setImage","sidebarItems","getNavbarItems","length","componentDidLoad","setProfileGap","navItems","appendNavItemToMenu","hideComponent","style","display","showComponent","handleClassList","className","querySelectorAll","getNavBarItem","navItem","shadowRoot","querySelector","relocateUsingSlot","forEach","item","setAttribute","isValidHttpUrl","string","url","URL","_","protocol","toLowerCase","trim","undefined","innerContentWrapper","labelWrapper","labelSlot","nodes","assignedNodes","menu","menuItem","toggleItemMenu","itemHasNestedItems","childNavItem","render","h","key","class","onClick","src","encodeURIComponent","onSlotchange","name"],"sources":["src/components/navigation/navbar/navbar-item.scss?tag=ifx-navbar-profile&encapsulation=shadow","src/components/navigation/navbar/navbar-profile.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host(.hidden) {\n  display: none;\n}\n\n.navbar__item {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0px 8px;\n  flex: none;\n  order: 0;\n  flex-grow: 0;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  text-decoration: none;\n  font-weight: 400;\n  font-size: 16px;\n  color: tokens.$ifxColorBaseBlack;\n\n  &.hide { \n    display: none;\n  }\n\n  &.isParent { \n    gap: 8px;\n  }\n\n  & .navItemIconWrapper { \n    transition: .3s;\n    display: flex;\n  }\n\n  &.open { \n    & .navItemIconWrapper { \n      transform: rotate(-180deg);\n      transition: .3s;\n    }\n  }\n\n  &:hover {\n    color: tokens.$ifxColorOcean500;\n    cursor: pointer;\n\n    & .username__tooltip { \n      display: block;\n    }\n\n    & .navbar__container-right-content-navigation-item-icon-wrapper { \n      & .initials__wrapper { \n        cursor: pointer;\n        background-color: tokens.$ifxColorOcean600;\n      }\n    }\n  }\n\n  &.remove {\n    display: none;\n  }\n\n  &.removeLabel {\n    & .label__wrapper {\n      display: none;\n    }\n  }\n\n  & .number__indicator-wrapper { \n    position: relative;\n    top: -11px;\n  }\n\n  & .navbar__container-right-content-navigation-item-icon-wrapper {\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    padding: 0px;\n    gap: 8px;\n    flex: none;\n    order: 0;\n    flex-grow: 0;\n\n \n    & .username__tooltip { \n      display: none;\n      position: absolute;\n      top: 35px;\n      right: 0;\n      text-wrap: nowrap;\n      padding: 1px 5px;\n      font-size: 13px;\n      font-family: \"Source Sans 3\";\n      background-color: black;\n      color: #fff;\n      z-index: 99;\n    }\n\n    &:hover { \n      & .username__tooltip { \n        display: block;\n      }\n    }\n\n    & .initials__wrapper { \n      display: flex;\n      width: 24px;\n      height: 24px;\n      justify-content: center;\n      align-items: center;\n      border-radius: 100%;\n      background-color: tokens.$ifxColorOcean500;\n\n      & .initials { \n        color: #FFF;\n        text-align: center;\n        font-family: \"Source Sans 3\";\n        font-size: 14px;\n        font-style: normal;\n        font-weight: 600;\n        line-height: 20px; \n\n        -webkit-touch-callout: none;\n        -webkit-user-select: none;\n        -khtml-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n      \n      }\n    }\n\n    & img { \n      width: 24px; \n      height: 24px;\n      border-radius: 100%;\n    }\n\n    &.removeWrapper {\n      display: none;\n    }\n\n    &.hide {\n      display: none;\n    }\n  }\n}\n\n.container { \n  position: relative;\n\n  & .sub__layer-back-button { \n    display: none;\n    &.show { \n      display: flex;\n      justify-content: flex-start;\n\n      & .back__button-wrapper { \n        display: flex;\n        align-items: center;\n        gap: tokens.$ifxSpace100;\n        padding: tokens.$ifxSpace100 0 tokens.$ifxSpace200 0;\n        color: tokens.$ifxColorOcean500;\n        font-size: 16px;\n        font-style: normal;\n        font-weight: 600;\n        line-height: 24px;\n\n        & span, & ifx-icon { \n          &:hover { \n            cursor: pointer;\n          }\n        }\n\n      }\n    }\n  }\n\n  &.hide { \n    display: none;\n  }\n\n  & .inner__content-wrapper { \n    position: relative;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 8px;\n    &.no-gap { \n      gap: 0px;\n    }\n\n    & .navbar__container-right-content-navigation-item-icon-wrapper {\n      &.no-gap { \n        gap: 0px;\n      }\n    }\n\n    & .number__indicator-wrapper { \n      position: relative;\n      top: -11px;\n    }\n\n  }\n}\n\n.navbar-menu  {\n  position: absolute;\n  display: none;\n  list-style-type: none;\n  visibility: visible;\n  flex-direction: column;\n  width: 224px;\n  min-width: 224px;\n  background: tokens.$ifxColorBaseWhite;\n  box-shadow: 0px 6px 9px 0px #1d1d1d1a;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  padding: 8px 0px;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  &.open:not(.itemInMobileMenu) {\n    display: flex;\n  }\n\n  &.itemInMobileMenu { \n    display: none;\n  }\n\n  &.right { \n    left: 100%;\n    top: -40%;\n  }\n\n  &.left { \n    top: -40%;\n    right: 100%;\n  }\n\n  &.rightSideItemMenu { \n    left: initial;\n    right: 0px;\n  }\n}\n\n.navbar__item { \n    &.layer__item-parent { \n      color: tokens.$ifxColorBaseBlack;\n      font-size: 24px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 32px; \n      letter-spacing: -0.24px;\n      cursor: initial;\n\n      & .navbar__container-right-content-navigation-item-icon-wrapper { \n        & ifx-icon { \n          & svg { \n            width: 24px;\n            height: 24px;\n          }\n        }\n      }\n    }\n\n\n  &.sidebarMenuItem { \n    justify-content: space-between;\n    padding: 0;\n  }\n\n\n  &.menuItem {\n    text-decoration: none;\n    color: tokens.$ifxColorBaseBlack;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 16px;\n    gap: 8px;\n    font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  \n    &.hide {\n      display: none;\n    }\n  \n    & .label__wrapper {\n      color: tokens.$ifxColorBaseBlack;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 24px;\n    }\n  \n    &:hover {\n      cursor: pointer;\n      background-color: tokens.$ifxColorEngineering200;\n    }\n  \n    &:active {\n      background-color: tokens.$ifxColorEngineering300;\n    }\n  }\n}\n\n.sub__layer-menu { \n  padding: 5px;\n  display: none;\n\n  &.remove__margin { \n    margin: 0;\n    padding: 0;\n  }\n \n  &.open { \n    display: block;\n  }\n}\n\n.navbar__item { \n  &.hide { \n    display: none;\n  }\n}\n\n.menuItemRightIconWrapper { \n  &.hide { \n    display: none;\n  }\n}\n\n.navItemIconWrapper { \n  &.hide { \n    display: none;\n  }\n}\n\n","import { Component, h, Element, Prop, State, Listen, Method } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-navbar-profile',\n  styleUrl: 'navbar-item.scss',\n  shadow: true,\n  assetsDirs: ['assets']\n})\n\nexport class NavbarProfile {\n\n  @Element() el;\n  @Prop() showLabel: boolean = true;\n  @Prop() href: string = \"\"\n  @Prop() imageUrl: string = \"\"\n  @Prop() target: string = \"_self\";\n  @Prop() alt: string = \"\"\n  @Prop() userName: string = \"\";\n  @State() internalHref: string = \"\"\n  @State() isMenuItem: boolean = false;\n  @State() hasChildNavItems: boolean = false;\n  @State() internalImageUrl: any = {type: \"\", value: \"\"}\n \n  private defaultProfileImage = `<svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect width=\"48\" height=\"48\" fill=\"#0A8276\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M24 14C21.7909 14 20 15.7909 20 18C20 20.2091 21.7909 22 24 22C26.2091 22 28 20.2091 28 18C28 15.7909 26.2091 14 24 14ZM18 18C18 14.6863 20.6863 12 24 12C27.3137 12 30 14.6863 30 18C30 21.3137 27.3137 24 24 24C20.6863 24 18 21.3137 18 18ZM16.5869 28.3984C18.2683 27.0179 20.7466 26 24 26C27.2541 26 29.7324 27.0209 31.4134 28.4024C33.0562 29.7526 34 31.5119 34 33V35C34 35.5523 33.5523 36 33 36H15C14.4477 36 14 35.5523 14 35V33C14 31.5074 14.9433 29.7479 16.5869 28.3984ZM17.8561 29.9441C16.5187 31.0421 16 32.2826 16 33V34H32V33C32 32.2881 31.4818 31.0474 30.1436 29.9476C28.8436 28.8791 26.8219 28 24 28C21.1774 28 19.1557 28.8771 17.8561 29.9441Z\" fill=\"white\"/>\n</svg>`\n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    const itemMenu = this.getItemMenu()\n    if(itemMenu) { \n      if(itemMenu.classList.contains('open')) { \n        if (!path.includes(this.el)) {\n          this.closeItemMenu();\n        }\n      }\n    }\n  }\n\n  componentWillLoad() {\n    this.setHref()\n    this.setImage()\n    const sidebarItems = this.getNavbarItems();\n    if (sidebarItems.length !== 0) {\n      this.hasChildNavItems = true;\n    } else {\n      this.hasChildNavItems = false;\n    }\n  }\n\n  componentDidLoad() { \n    this.setProfileGap()\n    if(this.hasChildNavItems) { \n      const navItems = this.getNavbarItems();\n      this.appendNavItemToMenu(navItems)\n    }\n  }\n\n  @Method()\n  async hideComponent() { \n    this.el.style.display = 'none';\n  }\n\n  @Method()\n  async showComponent() { \n    this.el.style.display = '';\n  }\n\n  handleClassList(el, type, className) {\n    el.classList[type](className)\n    if (type === 'contains') {\n      return el.classList.contains(className)\n    }\n  }\n\n  getNavbarItems() {\n    const navItems = this.el.querySelectorAll('ifx-navbar-item')\n    return navItems;\n  }\n  \n  getNavBarItem() { \n    const navItem = this.el.shadowRoot.querySelector('.navbar__item')\n    return navItem;\n  }\n\n  relocateUsingSlot(navItems) { \n    navItems.forEach(item => {\n     item.setAttribute('slot', 'first__layer')\n   })\n }\n\n  appendNavItemToMenu(navItems) { \n    this.relocateUsingSlot(navItems)\n  }\n\n  isValidHttpUrl(string) {\n    let url;\n    \n    try {\n      url = new URL(string);\n    } catch (_) {\n      return false;  \n    }\n  \n    return url.protocol === \"http:\" || url.protocol === \"https:\";\n  }\n\n  setImage() { \n    if (this.imageUrl.toLowerCase().trim() === \"\") {\n      this.internalImageUrl = {type: undefined, value: \"\"}\n    } else if(this.isValidHttpUrl(this.imageUrl)) {\n      this.internalImageUrl = { type: 'url', value: this.imageUrl}\n    } else { \n      this.internalImageUrl = { type: 'initials', value: this.imageUrl}\n    }\n  }\n\n  setHref() {\n    if (this.href.toLowerCase().trim() === \"\") {\n      this.internalHref = undefined;\n    } else this.internalHref = this.href;\n  }\n\n  setProfileGap() { \n    const innerContentWrapper = this.el.shadowRoot.querySelector('.inner__content-wrapper')\n    const labelWrapper = this.el.shadowRoot.querySelector('.label__wrapper')\n    const labelSlot = labelWrapper.querySelector('slot')\n    const nodes = labelSlot.assignedNodes();\n    if(!nodes.length) { \n      this.handleClassList(innerContentWrapper, 'add', 'no-gap')\n    } else { \n      this.handleClassList(innerContentWrapper, 'remove', 'no-gap')\n    }\n  }\n\n  getItemMenu() { \n    const menu = this.el.shadowRoot.querySelector('.navbar-menu');\n    return menu;\n  }\n\n  closeItemMenu() { \n    const itemMenu = this.getItemMenu()\n    const menuItem = this.getNavBarItem()\n    if(itemMenu) { \n      this.handleClassList(itemMenu, 'remove', 'open')\n      this.handleClassList(menuItem, 'remove', 'open')\n    }\n  }\n\n  toggleItemMenu() {\n    if(!this.internalHref) {     \n      if(this.isMenuItem && this.hasChildNavItems) { \n        const itemMenu = this.getItemMenu()\n        this.handleClassList(itemMenu, 'add', 'right')\n      }\n   \n      if(this.hasChildNavItems) { \n        const itemMenu = this.getItemMenu();\n        const menuItem = this.getNavBarItem()\n        this.handleClassList(itemMenu, 'toggle', 'open');\n        this.handleClassList(menuItem, 'toggle', 'open');\n      } \n    }\n  }\n\n  itemHasNestedItems() { \n    const childNavItem = this.el.shadowRoot.querySelector('ifx-navbar-item')\n    if(childNavItem) { \n      return true;\n    } else {\n      return false;\n    }\n  }\n\n\n  render() {\n    return (\n      <div class=\"container\">\n        <a href={this.internalHref} target={this.target} onClick={() => this.toggleItemMenu()} class=   {`navbar__item ${!this.showLabel ? 'removeLabel' : \"\"} ${this.hasChildNavItems ? 'isParent' : \"\"}`}>\n          <div class=\"inner__content-wrapper\">\n            <div class={`navbar__container-right-content-navigation-item-icon-wrapper`}>\n             {this.userName.trim() !== \"\" && <div class='username__tooltip'>{this.userName}</div>}\n\n             {this.internalImageUrl.type !== 'initials' && \n              <img src={ this.internalImageUrl.type === 'url' ? this.internalImageUrl.value : `data:image/svg+xml,${encodeURIComponent(this.defaultProfileImage)}`} alt={this.alt} />}\n\n              {this.internalImageUrl.type === 'initials' && \n              <div class=\"initials__wrapper\">\n                <span class=\"initials\">{this.internalImageUrl.value}</span>\n              </div>}\n              \n            </div>\n            <span class=\"label__wrapper\">\n              <slot onSlotchange={() => this.setProfileGap()} />\n            </span>\n          </div>\n          {/* {this.userName.trim() !== \"\" && <div class='username__tooltip'>{this.userName}</div>} */}\n        </a>\n        \n        {this.hasChildNavItems && <ul class='navbar-menu rightSideItemMenu'> <slot name=\"first__layer\" /> </ul>}\n      </div>\n    )\n  }\n}"],"mappings":"kDAAA,MAAMA,EAAgB,owJACtB,MAAAC,EAAeD,E,MCQFE,EAAa,MAP1B,WAAAC,CAAAC,G,UAUUC,KAAAC,UAAqB,KACrBD,KAAAE,KAAe,GACfF,KAAAG,SAAmB,GACnBH,KAAAI,OAAiB,QACjBJ,KAAAK,IAAc,GACdL,KAAAM,SAAmB,GAClBN,KAAAO,aAAuB,GACvBP,KAAAQ,WAAsB,MACtBR,KAAAS,iBAA4B,MAC5BT,KAAAU,iBAAwB,CAACC,KAAM,GAAIC,MAAO,IAE3CZ,KAAAa,oBAAsB,q2B,CAM9B,kBAAAC,CAAmBC,GACjB,MAAMC,EAAOD,EAAME,eACnB,MAAMC,EAAWlB,KAAKmB,cACtB,GAAGD,EAAU,CACX,GAAGA,EAASE,UAAUC,SAAS,QAAS,CACtC,IAAKL,EAAKM,SAAStB,KAAKuB,IAAK,CAC3BvB,KAAKwB,e,IAMb,iBAAAC,GACEzB,KAAK0B,UACL1B,KAAK2B,WACL,MAAMC,EAAe5B,KAAK6B,iBAC1B,GAAID,EAAaE,SAAW,EAAG,CAC7B9B,KAAKS,iBAAmB,I,KACnB,CACLT,KAAKS,iBAAmB,K,EAI5B,gBAAAsB,GACE/B,KAAKgC,gBACL,GAAGhC,KAAKS,iBAAkB,CACxB,MAAMwB,EAAWjC,KAAK6B,iBACtB7B,KAAKkC,oBAAoBD,E,EAK7B,mBAAME,GACJnC,KAAKuB,GAAGa,MAAMC,QAAU,M,CAI1B,mBAAMC,GACJtC,KAAKuB,GAAGa,MAAMC,QAAU,E,CAG1B,eAAAE,CAAgBhB,EAAIZ,EAAM6B,GACxBjB,EAAGH,UAAUT,GAAM6B,GACnB,GAAI7B,IAAS,WAAY,CACvB,OAAOY,EAAGH,UAAUC,SAASmB,E,EAIjC,cAAAX,GACE,MAAMI,EAAWjC,KAAKuB,GAAGkB,iBAAiB,mBAC1C,OAAOR,C,CAGT,aAAAS,GACE,MAAMC,EAAU3C,KAAKuB,GAAGqB,WAAWC,cAAc,iBACjD,OAAOF,C,CAGT,iBAAAG,CAAkBb,GAChBA,EAASc,SAAQC,IAChBA,EAAKC,aAAa,OAAQ,eAAe,G,CAI5C,mBAAAf,CAAoBD,GAClBjC,KAAK8C,kBAAkBb,E,CAGzB,cAAAiB,CAAeC,GACb,IAAIC,EAEJ,IACEA,EAAM,IAAIC,IAAIF,E,CACd,MAAOG,GACP,OAAO,K,CAGT,OAAOF,EAAIG,WAAa,SAAWH,EAAIG,WAAa,Q,CAGtD,QAAA5B,GACE,GAAI3B,KAAKG,SAASqD,cAAcC,SAAW,GAAI,CAC7CzD,KAAKU,iBAAmB,CAACC,KAAM+C,UAAW9C,MAAO,G,MAC5C,GAAGZ,KAAKkD,eAAelD,KAAKG,UAAW,CAC5CH,KAAKU,iBAAmB,CAAEC,KAAM,MAAOC,MAAOZ,KAAKG,S,KAC9C,CACLH,KAAKU,iBAAmB,CAAEC,KAAM,WAAYC,MAAOZ,KAAKG,S,EAI5D,OAAAuB,GACE,GAAI1B,KAAKE,KAAKsD,cAAcC,SAAW,GAAI,CACzCzD,KAAKO,aAAemD,S,MACf1D,KAAKO,aAAeP,KAAKE,I,CAGlC,aAAA8B,GACE,MAAM2B,EAAsB3D,KAAKuB,GAAGqB,WAAWC,cAAc,2BAC7D,MAAMe,EAAe5D,KAAKuB,GAAGqB,WAAWC,cAAc,mBACtD,MAAMgB,EAAYD,EAAaf,cAAc,QAC7C,MAAMiB,EAAQD,EAAUE,gBACxB,IAAID,EAAMhC,OAAQ,CAChB9B,KAAKuC,gBAAgBoB,EAAqB,MAAO,S,KAC5C,CACL3D,KAAKuC,gBAAgBoB,EAAqB,SAAU,S,EAIxD,WAAAxC,GACE,MAAM6C,EAAOhE,KAAKuB,GAAGqB,WAAWC,cAAc,gBAC9C,OAAOmB,C,CAGT,aAAAxC,GACE,MAAMN,EAAWlB,KAAKmB,cACtB,MAAM8C,EAAWjE,KAAK0C,gBACtB,GAAGxB,EAAU,CACXlB,KAAKuC,gBAAgBrB,EAAU,SAAU,QACzClB,KAAKuC,gBAAgB0B,EAAU,SAAU,O,EAI7C,cAAAC,GACE,IAAIlE,KAAKO,aAAc,CACrB,GAAGP,KAAKQ,YAAcR,KAAKS,iBAAkB,CAC3C,MAAMS,EAAWlB,KAAKmB,cACtBnB,KAAKuC,gBAAgBrB,EAAU,MAAO,Q,CAGxC,GAAGlB,KAAKS,iBAAkB,CACxB,MAAMS,EAAWlB,KAAKmB,cACtB,MAAM8C,EAAWjE,KAAK0C,gBACtB1C,KAAKuC,gBAAgBrB,EAAU,SAAU,QACzClB,KAAKuC,gBAAgB0B,EAAU,SAAU,O,GAK/C,kBAAAE,GACE,MAAMC,EAAepE,KAAKuB,GAAGqB,WAAWC,cAAc,mBACtD,GAAGuB,EAAc,CACf,OAAO,I,KACF,CACL,OAAO,K,EAKX,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,aACTF,EAAA,KAAAC,IAAA,2CAAGrE,KAAMF,KAAKO,aAAcH,OAAQJ,KAAKI,OAAQqE,QAAS,IAAMzE,KAAKkE,iBAAkBM,MAAU,iBAAiBxE,KAAKC,UAAY,cAAgB,MAAMD,KAAKS,iBAAmB,WAAa,MAC5L6D,EAAA,OAAAC,IAAA,2CAAKC,MAAM,0BACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAO,gEACVxE,KAAKM,SAASmD,SAAW,IAAMa,EAAA,OAAAC,IAAA,2CAAKC,MAAM,qBAAqBxE,KAAKM,UAEpEN,KAAKU,iBAAiBC,OAAS,YAC/B2D,EAAA,OAAAC,IAAA,2CAAKG,IAAM1E,KAAKU,iBAAiBC,OAAS,MAAQX,KAAKU,iBAAiBE,MAAQ,sBAAsB+D,mBAAmB3E,KAAKa,uBAAwBR,IAAKL,KAAKK,MAE/JL,KAAKU,iBAAiBC,OAAS,YAChC2D,EAAA,OAAAC,IAAA,2CAAKC,MAAM,qBACTF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,YAAYxE,KAAKU,iBAAiBE,SAIlD0D,EAAA,QAAAC,IAAA,2CAAMC,MAAM,kBACVF,EAAA,QAAAC,IAAA,2CAAMK,aAAc,IAAM5E,KAAKgC,qBAMpChC,KAAKS,kBAAoB6D,EAAA,MAAAC,IAAA,2CAAIC,MAAM,iCAA+B,IAAEF,EAAA,QAAAC,IAAA,2CAAMM,KAAK,iBAAiB,K","ignoreList":[]}