@infineon/infineon-design-system-stencil 39.3.1--canary.2120.1c467763c53a3cb468accc942e4e88953b0b9626.0 → 39.3.1--canary.2118.a60360f4f6d6f0d6b993cc68d1be10f2536c481f.0

package/dist/infineon-design-system-stencil/p-3244fc8c.entry.js

@@ -0,0 +1,2 @@
+import{r as o,h as i,a as t,c as e}from"./p-PqnYwNKt.js";import{d as n,t as s}from"./p-DcmcuUOA.js";import{i as c}from"./p-Bw2fh5LT.js";const a=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px;font-family:var(--ifx-font-family)}';const r=class{constructor(i){o(this,i);this.autoCollapse=false}async componentDidLoad(){if(!c(this.el)){const o=n();s("ifx-accordion",await o)}}async onItemOpen(o){if(this.autoCollapse){const i=Array.from(this.el.querySelectorAll("ifx-accordion-item"));for(const t of i){const i=t;if(i!==o.target&&await i.open){i.open=false}}}}render(){return i("div",{key:"903cc44b4886b77e59e66ab2a5cdf681dafeb9bc",class:"accordion-wrapper"},i("slot",{key:"e0abec42188606e8c80fc3db44fba19a7aa69ed8"}))}static get delegatesFocus(){return true}get el(){return t(this)}};r.style=a;const d=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.accordion-item{border-radius:3px;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:"";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px 4px 0px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:16px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;}.accordion-icon{font-weight:bold;display:flex;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}.accordion-item.open .inner-content{border:1px solid #EEEDED;border-top:none;margin:0 4px 4px}.inner-content.no-content{border:none;padding:0}';const f=class{constructor(i){o(this,i);this.ifxOpen=e(this,"ifxOpen",7);this.ifxClose=e(this,"ifxClose",7);this.open=false;this.AriaLevel=3;this.internalOpen=false}componentWillLoad(){this.internalOpen=this.open}componentDidLoad(){this.checkSlotContent();this.openAccordionItem();this.contentEl=this.el.shadowRoot.querySelector("#accordion-content");if(this.contentEl){this.attachResizeObserver()}}componentDidUpdate(){this.checkSlotContent();this.openAccordionItem()}openChanged(o){this.internalOpen=o}toggleOpen(){this.internalOpen=!this.internalOpen;this.open=this.internalOpen;if(this.internalOpen){this.ifxOpen.emit({isOpen:this.internalOpen})}else{this.ifxClose.emit({isClosed:!this.internalOpen})}}openAccordionItem(){if(this.contentEl){if(this.internalOpen){this.contentEl.style.height="auto";const o=this.contentEl.scrollHeight;this.contentEl.style.height=`${o}px`;this.contentEl.style.overflow="visible"}else{this.contentEl.style.height="0";this.contentEl.style.overflow="hidden"}}}getInnerContentWrapper(){const o=this.el.shadowRoot.querySelector(".inner-content");return o}attachResizeObserver(){const o=this.getInnerContentWrapper();if(o){this.resizeObserver=new ResizeObserver((()=>{if(this.internalOpen){this.openAccordionItem()}}));this.resizeObserver.observe(o)}}handleKeydown(o){const i=o.composedPath();if(!i.includes(this.titleEl)){return}switch(o.key){case"Enter":case" ":o.preventDefault();this.toggleOpen();break}}checkSlotContent(){const o=this.el.shadowRoot.querySelector("slot");const i=o.assignedNodes().length>0;const t=this.getInnerContentWrapper();if(!i){t.classList.add("no-content")}else if(t.classList.contains("no-content")){t.classList.remove("no-content")}}render(){return i("div",{key:"ac0d35621b7f06c3dd0bcde1b400dd173a1fcabd",class:`accordion-item ${this.internalOpen?"open":""}`},i("div",{key:"88eaf8e286c71444636256f3b8d249912624dbd5",role:"button","aria-expanded":this.internalOpen,"aria-controls":"accordion-content",class:"accordion-title",onClick:()=>this.toggleOpen(),tabindex:"0",ref:o=>this.titleEl=o},i("span",{key:"4dee92a98b178f371592b69723fc24b7606e916f","aria-hidden":"true",role:"heading","aria-level":String(this.AriaLevel),class:"accordion-icon"},i("ifx-icon",{key:"cfab69fc24b3c7e442379701612827d8564a1572",icon:"chevron-down-16"})),i("span",{key:"e3f2864b2987b47e4f4f80e033198dda06f25805",id:"accordion-caption",class:"accordion-caption"},this.caption)),i("div",{key:"8a5c24c39e6366f1bdbbe4360113f4bda340fa19",id:"accordion-content",class:"accordion-content",ref:o=>this.contentEl=o,role:"region","aria-labelledby":"accordion-caption"},i("div",{key:"2d9585a6958af61c60b98d4b1dc2763bfdddf603",class:"inner-content"},i("slot",{key:"2fe3539eb389112be66e8bfe729b6b2bbadec2df"}))))}get el(){return t(this)}static get watchers(){return{open:["openChanged"]}}};f.style=d;export{r as ifx_accordion,f as ifx_accordion_item};
+//# sourceMappingURL=p-3244fc8c.entry.js.map

package/dist/infineon-design-system-stencil/p-3244fc8c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["accordionCss","Accordion","constructor","hostRef","this","autoCollapse","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","onItemOpen","event","items","Array","from","querySelectorAll","item","itemElement","target","open","render","h","key","class","accordionItemCss","AccordionItem","AriaLevel","internalOpen","componentWillLoad","checkSlotContent","openAccordionItem","contentEl","shadowRoot","querySelector","attachResizeObserver","componentDidUpdate","openChanged","newValue","toggleOpen","ifxOpen","emit","isOpen","ifxClose","isClosed","style","height","updatedHeight","scrollHeight","overflow","getInnerContentWrapper","innerContentEl","resizeObserver","ResizeObserver","observe","handleKeydown","ev","path","composedPath","includes","titleEl","preventDefault","slot","hasContent","assignedNodes","length","innerContent","classList","add","contains","remove","role","onClick","tabindex","ref","String","icon","id","caption"],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.accordion-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: tokens.$ifxSpace100;\n  font-family:  var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n}","import { Component, h, Listen, Element, Prop } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n  @Element() el: HTMLElement;\n  @Prop() autoCollapse: boolean = false;\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-accordion', await framework)\n    }\n  }\n\n  @Listen('ifxOpen')\n  async onItemOpen(event: CustomEvent) {\n    if (this.autoCollapse) {\n      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n      for (const item of items) {\n        const itemElement = item as HTMLIfxAccordionItemElement;\n        if (itemElement !== event.target && (await itemElement.open)) {\n          itemElement.open = false;\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"accordion-wrapper\">\n        <slot />\n      </div>\n    );\n  }\n}\n","// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n  border-radius: 3px;\n  transition: all 0.3s;\n  font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n  outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n  content: '';\n  display: block;\n  position: absolute;\n  top: -4px;\n  bottom: -4px;\n  left: -4px;\n  right: -4px;\n  border-radius: 5px;\n  border: 2px solid tokens.$ifxColorOcean500;\n  box-sizing: border-box;\n}\n\n.accordion-title:hover {\n  border: 1px solid tokens.$ifxColorEngineering200;\n  color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n  gap: tokens.$ifxSpace150;\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  cursor: pointer;\n  margin: 4px 4px 0px;\n}\n\n.accordion-caption {\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n  gap: tokens.$ifxSpace100;\n  //transition: max-height 0.3s ease-in-out;\n  line-height: 24px;\n  font-size: tokens.$ifxFontSizeM;\n  font-weight: 400;\n}\n\n.inner-content {\n  background-color: tokens.$ifxColorBaseWhite;\n  padding: tokens.$ifxSpace200;\n  // white-space: pre-wrap;\n  /* wraps text at spaces and within words */\n  word-wrap: break-word;\n  /* breaks text within a word if necessary */\n  overflow-wrap: anywhere;\n  align-self: stretch;\n\n  /* breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n  font-weight: bold;\n  display: flex;\n  transition: transform 0.3s;\n\n  &:hover {\n    color: tokens.$ifxColorOcean600;\n\n  }\n}\n\n.accordion-item.open .accordion-icon {\n  transform: rotate(-180deg);\n}\n\n.accordion-item.open .inner-content {\n  border: 1px solid tokens.$ifxColorEngineering200;\n  border-top: none;\n  margin: 0 4px 4px;\n}\n\n.inner-content {\n  &.no-content { \n    border: none;\n    padding: 0;\n  }\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion-item',\n  styleUrl: 'accordionItem.scss',\n  shadow: true,\n})\nexport class AccordionItem {\n  @Element() el;\n  @Prop() caption: string;\n  @Prop({\n    mutable: true,\n  })\n  open: boolean = false;\n  @Prop() AriaLevel = 3;\n  @State() internalOpen: boolean = false;\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n  private contentEl!: HTMLElement;\n  private titleEl!: HTMLElement;\n  private resizeObserver!: ResizeObserver;\n\n  componentWillLoad() {\n    this.internalOpen = this.open;\n  }\n\n  componentDidLoad() {\n    this.checkSlotContent()\n    this.openAccordionItem();\n    this.contentEl = this.el.shadowRoot.querySelector('#accordion-content');\n    if (this.contentEl) {\n      this.attachResizeObserver();\n    }\n  }\n\n  componentDidUpdate() {\n    this.checkSlotContent()\n    this.openAccordionItem();\n  }\n\n  @Watch('open')\n  openChanged(newValue: boolean) {\n    this.internalOpen = newValue;\n  }\n\n  toggleOpen() {\n    this.internalOpen = !this.internalOpen;\n    this.open = this.internalOpen;\n\n    if (this.internalOpen) {\n      this.ifxOpen.emit({ isOpen: this.internalOpen });\n    } else {\n      this.ifxClose.emit({ isClosed: !this.internalOpen });\n    }\n  }\n\n  openAccordionItem() {\n    if (this.contentEl) {\n      if (this.internalOpen) {\n        this.contentEl.style.height = 'auto';\n        const updatedHeight = this.contentEl.scrollHeight;\n        this.contentEl.style.height = `${updatedHeight}px`;\n        this.contentEl.style.overflow = 'visible';\n      } else {\n        this.contentEl.style.height = '0';\n        this.contentEl.style.overflow = 'hidden';\n      }\n    }\n  }\n\n  getInnerContentWrapper() {\n    const innerContentEl = this.el.shadowRoot.querySelector('.inner-content');\n    return innerContentEl;\n  }\n\n  attachResizeObserver() {\n    const innerContentEl = this.getInnerContentWrapper();\n\n    if (innerContentEl) {\n      this.resizeObserver = new ResizeObserver(() => {\n        if (this.internalOpen) {\n          this.openAccordionItem();\n        }\n      });\n\n      this.resizeObserver.observe(innerContentEl);\n    }\n  }\n\n  @Listen('keydown')\n  handleKeydown(ev: KeyboardEvent) {\n    const path = ev.composedPath();\n\n    if (!path.includes(this.titleEl)) {\n      return;\n    }\n\n    switch (ev.key) {\n      case 'Enter': // fallthrough\n      case ' ': // space\n        ev.preventDefault();\n        this.toggleOpen();\n        break;\n    }\n  }\n\n  checkSlotContent() {\n    const slot = this.el.shadowRoot.querySelector('slot') as HTMLSlotElement;\n    const hasContent = slot.assignedNodes().length > 0;\n    const innerContent = this.getInnerContentWrapper();\n    if (!hasContent) {\n      innerContent.classList.add('no-content');\n    } else if (innerContent.classList.contains('no-content')) {\n      innerContent.classList.remove('no-content');\n    }\n  }\n\n  render() {\n    return (\n      <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n        <div\n          role=\"button\"\n          aria-expanded={this.internalOpen}\n          aria-controls=\"accordion-content\"\n          class=\"accordion-title\"\n          onClick={() => this.toggleOpen()}\n          tabindex=\"0\"\n          ref={el => (this.titleEl = el as HTMLElement)}\n        >\n          <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n            <ifx-icon icon=\"chevron-down-16\" />\n          </span>\n          <span id=\"accordion-caption\" class=\"accordion-caption\">\n            {this.caption}\n          </span>\n        </div>\n        <div id=\"accordion-content\" class=\"accordion-content\" ref={el => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n          <div class=\"inner-content\">\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}