@infineon/infineon-design-system-stencil 39.4.4-canary.0 → 39.5.0

package/dist/components/p-BODyHBnq.js.map

@@ -1 +0,0 @@
-{"file":"p-BODyHBnq.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/link/link.scss?tag=ifx-link&encapsulation=shadow","src/components/link/link.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  display: inline-flex;\r\n}\r\n\r\n.link {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  font-weight: 400;\r\n  font-size: tokens.$ifxFontSizeM;\r\n  text-decoration: none;\r\n  color: tokens.$ifxColorOcean500;\r\n  gap: tokens.$ifxSpace100;\r\n  line-height: 1.6;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n  &:hover { \r\n    cursor: pointer;\r\n  }\r\n\r\n  &:focus {\r\n    outline-width: 2px;\r\n    outline-style: solid;\r\n    outline-color: #0A8276;\r\n    outline-offset: 4px;\r\n    border-radius: 3px;\r\n  }\r\n\r\n  &.bold {\r\n    font-weight: tokens.$ifxFontWeightSemibold;\r\n\r\n    &:hover {\r\n      text-decoration: underline;\r\n    }\r\n\r\n    &:active {\r\n      color: #08665C;\r\n      font-style: normal;\r\n      font-weight: 600;\r\n      text-decoration: underline;\r\n    }\r\n\r\n  }\r\n\r\n  &.underlined {\r\n    text-decoration: underline;\r\n    text-decoration-color: tokens.$ifxColorOcean500;\r\n    color: #1D1D1D;\r\n    text-underline-offset: 8px;\r\n    \r\n    &:hover {\r\n      color: tokens.$ifxColorOcean500;;\r\n    }\r\n    \r\n    &:active {\r\n      color: #0A8276;\r\n    }\r\n\r\n    &:disabled,\r\n    &.disabled {\r\n      text-decoration-color: tokens.$ifxColorEngineering300;\r\n    }\r\n  }\r\n\r\n  &.title {\r\n    text-decoration: none;\r\n    font-weight: tokens.$ifxFontWeightSemibold;\r\n    color: #1D1D1D;\r\n\r\n    &:hover {\r\n      color: tokens.$ifxColorOcean500;\r\n    }\r\n\r\n    &:active {\r\n      color: #08665C;\r\n    }\r\n  }\r\n\r\n  &.menu {\r\n    font-weight: 400;\r\n    font-style: normal;\r\n    line-height: 26px;\r\n    color: #1D1D1D;\r\n\r\n    &:hover {\r\n      color: tokens.$ifxColorOcean500;\r\n    }\r\n\r\n    &:active {\r\n      color: #08665C;\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    font-size: tokens.$ifxFontSizeS;\r\n  }\r\n\r\n  &.medium {\r\n    font-size: tokens.$ifxFontSizeM;\r\n  }\r\n\r\n  &.large {\r\n    font-size: tokens.$ifxFontSizeL;\r\n  }\r\n\r\n  &.extraLarge {\r\n    font-size: tokens.$ifxFontSizeXl;\r\n  }\r\n\r\n  &.underline {\r\n    text-decoration: underline;\r\n  }\r\n\r\n  &:disabled,\r\n  &.disabled {\r\n    color: tokens.$ifxColorEngineering300;\r\n    cursor: default;\r\n    pointer-events:  none;\r\n  }\r\n\r\n}","import { Component, Prop, h, State, Element } from \"@stencil/core\";\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport classNames from 'classnames';\r\n \r\n@Component({\r\n  tag: 'ifx-link',\r\n  styleUrl: 'link.scss',\r\n  shadow: true\r\n})\r\n\r\nexport class Link {\r\n  @Element() el;\r\n  @Prop() href: string = undefined;\r\n  @Prop() target: string = '_self';\r\n  @Prop() variant: string = 'bold';\r\n  @Prop() size: string;\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() download: string;\r\n  @Prop() ariaLabel: string | null;\r\n  @State() internalHref: string ='';\r\n  @State() internalTarget: string = '';\r\n  @State() internalVariant: string = '';\r\n\r\n  setInternalStates() {\r\n    if(this.href){\r\n      this.internalHref = this.href.trim();\r\n    }else{\r\n      this.internalHref = undefined;\r\n    }\r\n    this.internalTarget = this.target.trim();\r\n    this.internalVariant = this.variant.trim().toLowerCase();\r\n  }\r\n\r\n  componentWillRender(){\r\n    this.setInternalStates();\r\n  }\r\n\r\n  handleKeyDown(event: KeyboardEvent) {\r\n    if (this.disabled) {\r\n      event.preventDefault();\r\n    } else if (event.key === 'Enter') {\r\n      event.preventDefault();\r\n    }\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-link', await framework)\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <a\r\n      tabindex=\"0\"\r\n        role=\"link\"\r\n        aria-label={this.ariaLabel}\r\n        aria-disabled={this.disabled || !this.internalHref}\r\n        href={this.disabled ? undefined : this.internalHref}\r\n        download={this.download}\r\n        target={this.internalTarget}\r\n        class={this.linkClassNames()}>\r\n        <slot></slot>\r\n      </a>)\r\n  }\r\n\r\n  getSizeClass() {\r\n    const small = this.size === 's' ? 'small' : null;\r\n    const medium = this.size === 'm' ? 'medium' : null;\r\n    const large = this.size === 'l' ? 'large' : null;\r\n    const extraLarge = this.size === 'xl' ? 'extraLarge' : null;\r\n\r\n    if (small) {\r\n      return small;\r\n    } else if (medium) {\r\n      return medium;\r\n    } else if (large) {\r\n      return large;\r\n    } else if (extraLarge && this.internalVariant === 'underlined') {\r\n      return 'large';\r\n    } else if (extraLarge && this.internalVariant !== 'underlined') {\r\n      return extraLarge;\r\n    } else return \"\";\r\n  }\r\n\r\n  getVariantClass() {\r\n    const bold = this.internalVariant === 'bold' ? 'bold' : null;\r\n    const title = this.internalVariant === 'title' ? 'title' : null;\r\n    const underlined = this.internalVariant === 'underlined' ? 'underlined' : null;\r\n    const menu = this.internalVariant === 'menu' ? 'menu' : null;\r\n\r\n    if (bold) {\r\n      return bold\r\n    } else if (title) {\r\n      return title;\r\n    } else if (underlined) {\r\n      return underlined;\r\n    } else if (menu) {\r\n      return menu;\r\n    } else return bold;\r\n  }\r\n\r\n  linkClassNames() {\r\n    return classNames(\r\n      'link',\r\n      'primary',\r\n      this.getVariantClass(),\r\n      this.getSizeClass(),\r\n      this.disabled ? 'disabled' : '',\r\n    );\r\n  }\r\n}"],"version":3}

package/dist/components/p-BVontUD4.js.map

@@ -1 +0,0 @@
-{"file":"p-BVontUD4.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,wqBAAwqB;;MCgB/qB,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AANrB,IAAA,WAAA,GAAA;;;;;AAWQ,QAAA,IAAK,CAAA,KAAA,GAAW,SAAS;AACzB,QAAA,IAAA,CAAA,SAAS,GAAc,EAAE,qBAAqB,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE;AACvD,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA4FhE;AAzFD,IAAA,mBAAmB,CAAC,KAAuC,EAAA;QACxD,IAAI,IAAI,CAAC,SAAS,CAAC,OAAO,KAAK,QAAQ,EAAE;AACrC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAgC;;AAErD,YAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,aAAa,KAAK,MAAM,CAAC,aAAa,EAAE;AAClF,gBAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;;;;IAMhC,gBAAgB,CAAC,QAAiB,EAAE,QAAiB,EAAA;AAClD,QAAA,IAAI,QAAQ,KAAK,QAAQ,EAAE;;AAEvB,YAAA,IAAI,IAAI,CAAC,SAAS,CAAC,qBAAqB,EAAC;gBACrC,IAAI,CAAC,0BAA0B,EAAE;;iBAC9B;AACH,gBAAA,IAAI,CAAC,SAAS,CAAC,qBAAqB,GAAG,IAAI;;;;IAKtD,YAAY,GAAA;AACT,QAAA,OAAO,IAAI,CAAC,QAAQ,CAAC,SAAmB;;IAG3C,mBAAmB,GAAA;AAChB,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ;;IAIjC,0BAA0B,CAAC,gBAAyB,IAAI,EAAA;QACrD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,aAAa;AAClC,YAAA,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG;AACvB,YAAA,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE;YAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,YAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;IAG/C,eAAe,GAAA;QACZ,IAAI,CAAC,mBAAmB,EAAE;;AAG7B,IAAA,iBAAiB,CAAC,KAAoB,EAAA;AACnC,QAAA,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;YAClD,IAAI,CAAC,mBAAmB,EAAE;;;IAIjC,mBAAmB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACf,YAAA,IAAI,CAAC,0BAA0B,CAAC,KAAK,CAAC;;;IAK7C,iBAAiB,GAAA;;QAEd,IAAI,CAAC,mBAAmB,EAAE;;IAG7B,MAAM,GAAA;AACH,QAAA,QACI,4DAAK,KAAK,EAAE,CAAA,qBAAA,EAAwB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAA;AAC7B,+BAAA,EAAA,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,CAAC,OAAO,MAAM,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAChG,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,QAAO,IAAI,CAAC,eAAe,EAAE,CAAA,EAAC,EACvC,SAAS,EAAE,CAAC,CAAC,OAAM,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAA,EAAC,EAC7C,IAAI,EAAC,QAAQ,EAAA,eAAA,EACE,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAA,EAGnC,IAAI,CAAC,SAAS,CAAC,OAAO,KAAK,OAAO;AAClC,YAAA,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,OAAO,EAAE,IAAI,CAAC,QAAQ,EAChC,QAAQ,EAAE,EAAE,EACZ,IAAI,EAAC,GAAG,EACG,CAAA,EAGnB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,OAAE,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAAO,GAAA,CAAA,EAG9C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAA,EACtC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,UAAU,QAAa,CACpC,CAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/chip/chip-item/chip-item.scss?tag=ifx-chip-item&encapsulation=shadow","src/components/chip/chip-item/chip-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n.chip-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: tokens.$ifxSpace100;\r\n    \r\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\r\n    \r\n    user-select: none;\r\n    \r\n    transition: all 100ms ease;\r\n    transition-property: background, color;\r\n    \r\n    &:hover {\r\n        cursor: pointer;\r\n        \r\n        background-color: tokens.$ifxColorEngineering200;\r\n    }\r\n    \r\n    &:active {\r\n        background-color: tokens.$ifxColorEngineering300;\r\n    }\r\n\r\n    &:focus {\r\n        outline: 2px solid tokens.$ifxColorOcean500;\r\n    }\r\n    \r\n    &.chip-item--large {\r\n        font: tokens.$ifxBodyBody03;\r\n    }\r\n    \r\n    &.chip-item--small {\r\n        font: tokens.$ifxBodyBody04;\r\n    }\r\n\r\n    &.chip-item--selected {\r\n        color: tokens.$ifxColorOcean500;\r\n\r\n        .chip-item__selected-indicator {\r\n            display: block;\r\n        }\r\n    }\r\n}\r\n\r\n.chip-item__selected-indicator {\r\n    display: none;\r\n    \r\n    margin-left: auto;\r\n}\r\n\r\n","import { h,\r\n    Component,\r\n    Element,\r\n    Event,\r\n    EventEmitter, \r\n    Listen,\r\n    Prop, \r\n    Watch } from '@stencil/core';\r\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\r\n\r\n@Component({\r\ntag: 'ifx-chip-item',\r\nstyleUrl: 'chip-item.scss',\r\nshadow: true\r\n})\r\n\r\nexport class ChipItem {\r\n@Element() chipItem: HTMLIfxChipItemElement;\r\n\r\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\r\n\r\n@Prop() value: string = undefined;\r\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \r\n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\r\n\r\n@Listen('ifxChipItemSelect', { target: 'body' })\r\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\r\n   if (this.chipState.variant === 'single') {\r\n       const target = event.target as HTMLIfxChipItemElement;\r\n       /* Also making sure chip items are from the same group (parent) while unselecting. */\r\n       if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\r\n           this.selected = false;\r\n       }\r\n   }\r\n} \r\n\r\n@Watch('selected')\r\nvalidateSelected(newValue: boolean, oldValue: boolean) {\r\n   if (newValue !== oldValue) {\r\n       /* Do not emit if ChipState does not allow. */\r\n       if (this.chipState.emitIfxChipItemSelect){\r\n           this.emitIfxChipItemSelectEvent();\r\n       } else {\r\n           this.chipState.emitIfxChipItemSelect = true;\r\n       }\r\n   }\r\n} \r\n\r\ngetItemLabel(): string {\r\n   return this.chipItem.innerText as string;\r\n}\r\n\r\ntoggleItemSelection() {\r\n   this.selected = !this.selected;\r\n}\r\n   \r\n\r\nemitIfxChipItemSelectEvent(emitIfxChange: boolean = true) {\r\n   this.ifxChipItemSelect.emit({ emitIfxChange: emitIfxChange,\r\n                           key: this.chipState.key,\r\n                           label: this.getItemLabel(), \r\n                           selected: this.selected, \r\n                           value: this.value });\r\n}\r\n\r\nhandleItemClick() {\r\n   this.toggleItemSelection();\r\n}\r\n\r\nhandleItemKeyDown(event: KeyboardEvent) {\r\n   if (event.code === 'Enter' || event.code === 'Space') {\r\n       this.toggleItemSelection();\r\n   }\r\n}\r\n\r\nhandleSelectedState() {\r\n   if (this.selected) {\r\n       this.emitIfxChipItemSelectEvent(false);\r\n   }\r\n}\r\n\r\n\r\ncomponentWillLoad() {\r\n   /* Propogating the selected state to the Chip (Parent) component if it is set. */\r\n   this.handleSelectedState();\r\n}\r\n\r\nrender() {\r\n   return (\r\n       <div class={`chip-item chip-item--${this.chipState.size} \r\n                    chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \r\n           tabIndex={0}\r\n           onClick={() => {this.handleItemClick()}}\r\n           onKeyDown={(e) => {this.handleItemKeyDown(e)}}\r\n           role=\"option\"\r\n           aria-selected={this.selected.toString()}>    \r\n           {/* Checkbox; renders only in 'multi' variant. */}\r\n           { \r\n               this.chipState.variant === 'multi' &&\r\n               <ifx-checkbox checked={this.selected}\r\n                   tabIndex={-1} \r\n                   size='s'>\r\n               </ifx-checkbox>\r\n           }\r\n\r\n           <div class='chip-item__label'> <slot /> </div>\r\n\r\n           {/* Selected indicator only visible in 'single' variant. */}\r\n           <div class='chip-item__selected-indicator'> \r\n               <ifx-icon icon='check-16'> </ifx-icon> \r\n           </div>\r\n\r\n       </div>\r\n   );\r\n}\r\n}"],"version":3}

package/dist/components/p-BpoV3zpc.js.map

@@ -1 +0,0 @@
-{"file":"p-BpoV3zpc.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/icon-button/icon-button.scss?tag=ifx-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n:host {\r\n  display: inline-flex;\r\n}\r\n\r\n.btn {\r\n  box-sizing: border-box;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-height: tokens.$ifxSize500;\r\n  padding: 8px;\r\n  gap: tokens.$ifxSpace100;\r\n  color: tokens.$ifxColorBaseWhite;\r\n  flex-direction: row;\r\n  font-weight: tokens.$ifxFontWeightSemibold;\r\n  border-radius: tokens.$ifxBorderRadius12;\r\n  line-height: tokens.$ifxLineHeightM;\r\n  outline: none;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n  text-decoration: none;\r\n  user-select: none;\r\n  border: 1px solid rgba(0, 0, 0, 0);\r\n  font-size: tokens.$ifxFontSizeM;\r\n  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\r\n}\r\n\r\n.btn:not(.disabled) {\r\n  cursor: pointer;\r\n}\r\n\r\n.btn-primary {\r\n  color: tokens.$ifxColorBaseWhite;\r\n  background-color: tokens.$ifxColorOcean500;\r\n\r\n  &:disabled,\r\n  &.disabled {\r\n    background-color: tokens.$ifxColorEngineering300;\r\n    color: tokens.$ifxColorBaseWhite;\r\n    pointer-events: none;\r\n\r\n  }\r\n}\r\n\r\n\r\n.btn-secondary {\r\n  color: tokens.$ifxColorOcean500;\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  border-color: tokens.$ifxColorOcean500;\r\n\r\n  &:disabled,\r\n  &.disabled {\r\n    background-color: tokens.$ifxColorBaseWhite;\r\n    border: 1px solid tokens.$ifxColorEngineering300;\r\n    color: tokens.$ifxColorEngineering300;\r\n    pointer-events: none;\r\n\r\n  }\r\n}\r\n\r\n.btn-tertiary {\r\n  background-color: transparent;\r\n  color: tokens.$ifxColorBaseBlack;\r\n\r\n  &:disabled,\r\n  &.disabled {\r\n    color: tokens.$ifxColorEngineering300;\r\n    pointer-events: none;\r\n  }\r\n}\r\n\r\n\r\n.btn {\r\n\r\n  &.icon-button {\r\n    min-width: initial;\r\n    min-height: initial;\r\n    width: tokens.$ifxSize500;\r\n    height: tokens.$ifxSize500;\r\n    padding: 0;\r\n    justify-content: center;\r\n\r\n    &.btn-round {\r\n      border-radius: 100px;\r\n    }\r\n\r\n    &.btn-square {\r\n      border-radius: tokens.$ifxBorderRadius12;\r\n    }\r\n\r\n    &.btn-s {\r\n      width: tokens.$ifxSize400;\r\n      height: tokens.$ifxSize400;\r\n      padding: 8px;\r\n    }\r\n\r\n\r\n    &.btn-l {\r\n      width: tokens.$ifxSize600;\r\n      height: tokens.$ifxSize600;\r\n      padding: 8px;\r\n    }\r\n  }\r\n\r\n  &.btn-primary:not(:disabled, .disabled) {\r\n    &:focus:not(:active, .active) {\r\n      outline: none;\r\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\r\n    }\r\n\r\n    &:hover {\r\n      background-color: tokens.$ifxColorOcean600;\r\n      border-color: tokens.$ifxColorOcean600;\r\n    }\r\n\r\n    &:active,\r\n    &.active {\r\n      background-color: tokens.$ifxColorOcean700;\r\n      border-color: tokens.$ifxColorOcean700;\r\n    }\r\n  }\r\n\r\n\r\n  &.btn-secondary:not(:disabled, .disabled) {\r\n    &:focus:not(:active, .active) {\r\n      outline: none;\r\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\r\n    }\r\n\r\n    &:hover {\r\n      background-color: tokens.$ifxColorOcean600;\r\n      border-color: tokens.$ifxColorOcean600;\r\n      color: tokens.$ifxColorBaseWhite;\r\n    }\r\n\r\n    &:active,\r\n    &.active {\r\n      background-color: tokens.$ifxColorOcean700;\r\n      border-color: tokens.$ifxColorOcean700;\r\n    }\r\n  }\r\n\r\n  &.btn-tertiary:not(:disabled, .disabled) {\r\n    &:focus:not(:active, .active) {\r\n      outline: none;\r\n      color: tokens.$ifxColorBaseBlack;\r\n      box-shadow: 0 0 0 0px tokens.$ifxColorBaseWhite, 0 0 0 2px tokens.$ifxColorOcean500;\r\n    }\r\n\r\n    &:hover {\r\n      color: tokens.$ifxColorOcean500;\r\n    }\r\n\r\n    &:active,\r\n    &.active {\r\n      color: tokens.$ifxColorOcean600;\r\n    }\r\n  }\r\n}","import { Component, Prop, h, Host, Method, Element, Listen, Watch, State } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking'; \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport classNames from 'classnames';\r\n\r\n@Component({\r\n  tag: 'ifx-icon-button',\r\n  styleUrl: 'icon-button.scss',\r\n  shadow: true,\r\n})\r\n\r\nexport class IconButton {\r\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary';\r\n  @Prop() size: string;\r\n  @Prop() disabled: boolean;\r\n  @Prop() icon: string;\r\n  @Prop() href: string;\r\n  @Prop() target: string = '_self';\r\n  @Prop() shape: string = 'round';\r\n  @Prop() ariaLabel: string | null;\r\n  @State() internalIcon: string;\r\n  @Element() el;\r\n\r\n  private focusableElement: HTMLElement;\r\n  \r\n  @Listen('click', { capture: true })\r\n  handleClick(event: Event) {\r\n    if (this.disabled) {\r\n      event.stopImmediatePropagation();\r\n    }\r\n  }\r\n\r\n  @Watch('icon')\r\n  updateIcon(newIcon: string) { \r\n    this.internalIcon = newIcon;\r\n  }\r\n\r\n  @Method()\r\n  async setFocus() {\r\n    this.focusableElement.focus();\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (this.shape === '') {\r\n      this.shape = 'round';\r\n    }\r\n    this.internalIcon = this.icon;\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-icon-button', await framework)\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host \r\n        aria-disabled={this.disabled}\r\n        aria-label={this.ariaLabel}> \r\n        {this.href ? (\r\n          <a\r\n            ref={(el) => (this.focusableElement = el)}\r\n            class={this.getClassNames()}\r\n            href={!this.disabled ? this.href : undefined} \r\n            target={this.target}\r\n            rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\r\n          >\r\n            <ifx-icon icon={this.internalIcon}></ifx-icon>\r\n          </a>\r\n        ) : (\r\n          <button\r\n            class={this.getClassNames()}\r\n            type=\"button\"\r\n            disabled={this.disabled}\r\n          >\r\n            <ifx-icon icon={this.internalIcon}></ifx-icon>\r\n          </button>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  getVariantClass() {\r\n    return `${this.variant}` === \"secondary\"\r\n      ? `secondary`\r\n      : `${this.variant}` === 'tertiary'\r\n        ? `tertiary`\r\n        : `primary`;\r\n  }\r\n\r\n  getSizeClass() {\r\n    if (`${this.size}` === \"xs\") {\r\n      return \"xs\"\r\n    }\r\n    else if (`${this.size}` === \"s\") {\r\n      return \"s\"\r\n    }\r\n    else if (`${this.size}` === \"l\") {\r\n      return \"l\"\r\n    }\r\n    else return \"\";\r\n  }\r\n\r\n  getClassNames() {\r\n    return classNames(\r\n      'btn icon-button',\r\n      `btn-${this.shape}`,\r\n      this.size && `btn-${this.getSizeClass()}`,\r\n      `btn-${this.getVariantClass()}`,\r\n      this.disabled ? 'disabled' : ''\r\n    );\r\n  }\r\n}"],"version":3}