{"version":3,"names":["createSchemes","newSchemes","AllColors.CONTEXT_MENU_ITEM_SCHEMES","forEach","element","schemeName","itemBackgroundColor","AllColors","toConstantCase","itemLabelColor","itemIconActiveColor","scheme","CONTEXT_MENU_ITEM_SCHEME_CONFIG","CONTEXT_MENU_ITEM_SCHEME_MAP","Map","Object","entries","createContextMenuItemMapDefinition","map","background","config","contextMenuItemCss","EonUiContextMenuItemStyle0","ContextMenuItem","this","schemeConfig","schemeMap","CONTEXT_MENU_SIZE_NORMAL","componentWillLoad","applyScheme","applyFocus","componentDidLoad","setCssVariables","applySchemeDelegate","setCssVariablesDelegate","focusedItem","menuItem","focus","render","h","Host","key","ConditionalWrapper","condition","href","wrapper","children","class","pfx","selectedItem","size","ref","el","label","target","defaultWrapper","innerHTML","activeIconName","CONTEXT_MENU_ITEM_ACTIVE_ICON_SIZE","name"],"sources":["src/components/context-menu/context-menu-item/constants/context-menu-item-constants.ts","src/components/context-menu/context-menu-item/context-menu-item.scss?tag=eon-ui-context-menu-item&encapsulation=shadow","src/components/context-menu/context-menu-item/context-menu-item.tsx"],"sourcesContent":["import { ContextMenuItemSchemeDefinition } from \"./context-menu-item-types\";\nimport { BackgroundColor } from \"../../../background/constants/background-types\";\nimport { toConstantCase } from \"../../../../utils/string-format\";\nimport * as AllColors from \"../../../../constants/colors\";\nimport { createContextMenuItemMapDefinition } from \"../../../../utils/scheme-helper\";\n\nfunction createSchemes() {\n  let newSchemes: AllColors.ContextMenuItemSchemeConfiguration<ContextMenuItemSchemeDefinition> = {};\n  AllColors.CONTEXT_MENU_ITEM_SCHEMES.forEach((element) => {\n    newSchemes[element.schemeName] = {\n      itemBackgroundColor: AllColors[`COLOR_${toConstantCase(element.schemeName)}`],\n      itemLabelColor: AllColors[`COLOR_${toConstantCase(element.schemeName)}_FONT`],\n      itemIconActiveColor: AllColors[`COLOR_${toConstantCase(element.schemeName)}`]\n    };\n    if (element.scheme) {\n      newSchemes[element.schemeName] = { ...newSchemes[element.schemeName], ...element.scheme };\n    }\n  });\n  return newSchemes;\n}\n\nexport const CONTEXT_MENU_ITEM_SCHEME_CONFIG: AllColors.ContextMenuItemSchemeConfiguration<ContextMenuItemSchemeDefinition> = createSchemes();\n\nexport const CONTEXT_MENU_ITEM_SCHEME_MAP: Map<BackgroundColor | \"default\", ContextMenuItemSchemeDefinition> = new Map(\n  Object.entries(createContextMenuItemMapDefinition()).map(([background, config]) => [\n    background as BackgroundColor,\n    CONTEXT_MENU_ITEM_SCHEME_CONFIG[config as string]\n  ])\n);\n",":host {\n  display: block;\n  width: 100%;\n  position: relative;\n  font-family: $font-family-base;\n\n  * {\n    box-sizing: border-box;\n    outline: none;\n  }\n}\n\n.#{$prefix}context-menu-item-element {\n  width: 100%;\n  display: flex;\n  position: relative;\n  max-height: 48px;\n  align-items: center;\n  background: v(itemBackgroundColor);\n  cursor: pointer;\n\n  > * {\n    padding: 12px;\n  }\n\n  &:hover {\n    background: $context-menu-item-background-hover-color;\n    text-decoration: underline;\n    text-decoration-color: v(itemLabelColor);\n\n    .#{$prefix}context-menu-item-link {\n      background: $context-menu-item-background-hover-color;\n      text-decoration: underline;\n      text-decoration-color: v(itemLabelColor);\n    }\n  }\n\n  &:focus {\n    background: $context-menu-item-background-active-color;\n    .#{$prefix}context-menu-item-link {\n      background: $context-menu-item-background-active-color;\n    }\n  }\n\n  .#{$prefix}context-menu-item-link {\n    width: 100%;\n    display: flex;\n    position: relative;\n    align-items: center;\n    background: v(itemBackgroundColor);\n\n    &:hover {\n      // background: $context-menu-item-background-hover-color;\n      text-decoration: underline;\n      text-decoration-color: v(itemLabelColor);\n    }\n\n    /* &:focus {\n      background: $context-menu-item-background-active-color;\n    } */\n  }\n\n  .#{$prefix}context-menu-item-label {\n    text-align: left;\n    width: 100%;\n    flex: 1;\n    justify-content: flex-start;\n    font-weight: normal;\n    font-size: 18px;\n    line-height: 24px;\n    color: v(itemLabelColor);\n    cursor: pointer;\n    word-break: break-word;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n\n  .#{$prefix}context-menu-item-active-icon {\n    justify-content: flex-end;\n    width: 100%;\n    flex: 0;\n    fill: v(itemIconActiveColor);\n  }\n\n  &.#{$prefix}focused-item {\n    background: $context-menu-item-background-hover-color;\n    text-decoration: underline;\n    text-decoration-color: v(itemLabelColor);\n\n    .#{$prefix}context-menu-item-link {\n      background: $context-menu-item-background-hover-color;\n      text-decoration: underline;\n      text-decoration-color: v(itemLabelColor);\n    }\n  }\n\n  &.#{$prefix}selected-item {\n    background: $context-menu-item-background-active-color;\n\n    .#{$prefix}context-menu-item-link {\n      background: $context-menu-item-background-active-color;\n    }\n  }\n\n  a {\n    text-decoration: none;\n    &:hover {\n      text-decoration: underline;\n      text-decoration-color: v(itemLabelColor);\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &:focus-within {\n      outline: none;\n    }\n  }\n\n  &.#{$prefix}small {\n    max-height: 33px;\n\n    .#{$prefix}context-menu-item-label {\n      font-size: 16px;\n      line-height: 22px;\n    }\n\n    > * {\n      padding: 10px;\n    }\n  }\n}\n","import { h, Component, Host, State, Element, Prop, Watch } from \"@stencil/core\";\nimport { ColorableComponent, applySchemeDelegate, setCssVariablesDelegate } from \"../../../common/colorable-component\";\nimport { ContextMenuItemSchemeDefinition, ContextMenuItemSchemeName } from \"./constants/context-menu-item-types\";\nimport { CONTEXT_MENU_ITEM_SCHEME_CONFIG, CONTEXT_MENU_ITEM_SCHEME_MAP } from \"./constants/context-menu-item-constants\";\nimport { ContextMenuItemSchemeConfiguration } from \"../../../constants/colors\";\nimport pfx from \"../../../utils/style-class-prefix-helper\";\nimport { ConditionalWrapper } from \"../../../common/conditional-wrapper\";\nimport { ContextMenuSize } from \"../constants/context-menu-types\";\nimport { CONTEXT_MENU_SIZE_NORMAL } from \"../constants/context-menu-constants\";\nimport { CONTEXT_MENU_ITEM_ACTIVE_ICON_SIZE } from \"../../../constants/global-constants\";\n// import { InitLogging } from \"../../../decorators/init-logging\";\n\n/**\n * @slot [unnamed] - holds any number of HTML elements.\n */\n@Component({\n  tag: \"eon-ui-context-menu-item\",\n  styleUrl: \"context-menu-item.scss\",\n  shadow: true\n})\nexport class ContextMenuItem\n  implements ColorableComponent<ContextMenuItemSchemeConfiguration<ContextMenuItemSchemeDefinition>> {\n  // @InitLogging() sentryTransaction;\n  schemeConfig: ContextMenuItemSchemeConfiguration<ContextMenuItemSchemeDefinition> = CONTEXT_MENU_ITEM_SCHEME_CONFIG;\n  schemeMap = CONTEXT_MENU_ITEM_SCHEME_MAP;\n\n  menuItem: HTMLElement;\n\n  /**\n   * The components active scheme. If {@link scheme} is set, it will be set to the corresponding scheme.\n   * If not set, the component will try to calculate it based on the nearest enclosing background information given by inner-background attribute or eon-ui-background component.\n   */\n  @State() activeScheme: ContextMenuItemSchemeDefinition;\n\n  @Element() hostElement: HTMLEonUiContextMenuItemElement;\n\n  /**\n   * The name of the color scheme of the component.\n   * If not set, the component will try to calculate it based on the nearest enclosing background information given by inner-background attribute or eon-ui-background component.\n   */\n  @Prop({ reflect: true }) scheme: ContextMenuItemSchemeName;\n\n  /**\n   * Label for each item\n   */\n  @Prop({ reflect: true }) label: string;\n\n  /**\n   * Reflects the native html value attribute. There is no Default Value.\n   */\n  @Prop({ reflect: true }) value: string;\n\n  /**\n   * Label for each item\n   */\n  @Prop() activeIconName: string;\n\n  /**\n   * Selected Menu Item\n   */\n  @Prop() selectedItem: boolean;\n\n  /**\n   * Focus on Menu Item\n   */\n  @Prop() focusedItem: boolean;\n\n  /**\n   * Assign value to href if Menu Items are to be used as link\n   * else on selection Menu Items will work as part of default Context Menu\n   */\n  @Prop() href: string;\n\n  /**\n   * target if Menu Items are used as link\n   */\n  @Prop() target: string;\n\n  /**\n   * Set the size of the component\n   */\n  @Prop() size: ContextMenuSize = CONTEXT_MENU_SIZE_NORMAL;\n\n  componentWillLoad() {\n    this.applyScheme();\n    this.applyFocus();\n  }\n\n  componentDidLoad() {\n    this.setCssVariables();\n  }\n\n  @Watch(\"scheme\")\n  applyScheme() {\n    applySchemeDelegate(this);\n  }\n\n  @Watch(\"activeScheme\")\n  setCssVariables(): void {\n    setCssVariablesDelegate(this);\n  }\n\n  @Watch(\"focusedItem\")\n  applyFocus() {\n    if (this.focusedItem) {\n      this.menuItem.focus();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <ConditionalWrapper\n          condition={!!this.href}\n          wrapper={(children) => (\n            <div\n              class={pfx({\n                \"context-menu-item-element\": true,\n                [\"selected-item\"]: !!this.selectedItem,\n                [\"focused-item\"]: !!this.focusedItem,\n                [this.size]: this.size\n              })}\n              ref={(el) => (this.menuItem = el as HTMLElement)}\n            >\n              <a\n                class={pfx({\n                  \"context-menu-item-link\": true\n                })}\n                aria-label={this.label}\n                href={this.href}\n                target={this.target}\n              >\n                {children}\n              </a>\n            </div>\n          )}\n          defaultWrapper={(children) => (\n            <div\n              class={pfx({\n                \"context-menu-item-element\": true,\n                [\"selected-item\"]: !!this.selectedItem,\n                [\"focused-item\"]: !!this.focusedItem,\n                [this.size]: this.size\n              })}\n              ref={(el) => (this.menuItem = el as HTMLElement)}\n            >\n              {children}\n            </div>\n          )}\n        >\n          {\n            // eslint-disable-next-line jsx-a11y/label-has-associated-control\n            <label class={pfx({ \"context-menu-item-label\": true })} innerHTML={this.label}></label>\n          }\n          {this.selectedItem && (\n            <eon-ui-icon\n              aria-label={this.activeIconName}\n              class={pfx({\n                \"context-menu-item-active-icon\": true\n              })}\n              size={CONTEXT_MENU_ITEM_ACTIVE_ICON_SIZE}\n              no-space\n              name={this.activeIconName}\n            ></eon-ui-icon>\n          )}\n        </ConditionalWrapper>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+XAMA,SAASA,IACP,IAAIC,EAA4F,GAChGC,EAAoCC,SAASC,IAC3CH,EAAWG,EAAQC,YAAc,CAC/BC,oBAAqBC,EAAU,SAASC,EAAeJ,EAAQC,eAC/DI,eAAgBF,EAAU,SAASC,EAAeJ,EAAQC,oBAC1DK,oBAAqBH,EAAU,SAASC,EAAeJ,EAAQC,gBAEjE,GAAID,EAAQO,OAAQ,CAClBV,EAAWG,EAAQC,YAAc,IAAKJ,EAAWG,EAAQC,eAAgBD,EAAQO,O,KAGrF,OAAOV,CACT,CAEO,MAAMW,EAAiHZ,IAEvH,MAAMa,EAAkG,IAAIC,IACjHC,OAAOC,QAAQC,KAAsCC,KAAI,EAAEC,EAAYC,KAAY,CACjFD,EACAP,EAAgCQ,OC1BpC,MAAMC,EAAqB,uziDAC3B,MAAAC,EAAeD,E,MCmBFE,EAAe,M,yBAG1BC,KAAAC,aAAoFb,EACpFY,KAAAE,UAAYb,E,qOAyDoBc,C,CAEhC,iBAAAC,GACEJ,KAAKK,cACLL,KAAKM,Y,CAGP,gBAAAC,GACEP,KAAKQ,iB,CAIP,WAAAH,GACEI,EAAoBT,K,CAItB,eAAAQ,GACEE,EAAwBV,K,CAI1B,UAAAM,GACE,GAAIN,KAAKW,YAAa,CACpBX,KAAKY,SAASC,O,EAIlB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAACG,EAAkB,CAAAD,IAAA,2CACjBE,YAAanB,KAAKoB,KAClBC,QAAUC,GACRP,EAAA,OACEQ,MAAOC,EAAI,CACT,4BAA6B,KAC7B,CAAC,mBAAoBxB,KAAKyB,aAC1B,CAAC,kBAAmBzB,KAAKW,YACzB,CAACX,KAAK0B,MAAO1B,KAAK0B,OAEpBC,IAAMC,GAAQ5B,KAAKY,SAAWgB,GAE9Bb,EAAA,KACEQ,MAAOC,EAAI,CACT,yBAA0B,OAC1B,aACUxB,KAAK6B,MACjBT,KAAMpB,KAAKoB,KACXU,OAAQ9B,KAAK8B,QAEZR,IAIPS,eAAiBT,GACfP,EAAA,OACEQ,MAAOC,EAAI,CACT,4BAA6B,KAC7B,CAAC,mBAAoBxB,KAAKyB,aAC1B,CAAC,kBAAmBzB,KAAKW,YACzB,CAACX,KAAK0B,MAAO1B,KAAK0B,OAEpBC,IAAMC,GAAQ5B,KAAKY,SAAWgB,GAE7BN,IAMHP,EAAA,SAAOQ,MAAOC,EAAI,CAAE,0BAA2B,OAASQ,UAAWhC,KAAK6B,QAEzE7B,KAAKyB,cACJV,EAAA,4BACcf,KAAKiC,eACjBV,MAAOC,EAAI,CACT,gCAAiC,OAEnCE,KAAMQ,EAAkC,gBAExCC,KAAMnC,KAAKiC,kB"}