@infineon/infineon-design-system-stencil 34.5.2--canary.1896.1c783910e5c2e80d78bfd5f298722597fb56d319.0 → 35.0.0--canary.1896.bd752bd5c16c367ec3fb0493b8ca8e6508a16e48.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (105) hide show
  1. package/dist/cjs/{icons-dcc9a6f6.js → icons-b9fd1601.js} +397 -397
  2. package/dist/cjs/{icons-dcc9a6f6.js.map → icons-b9fd1601.js.map} +1 -1
  3. package/dist/cjs/ifx-icon.cjs.entry.js +8 -3
  4. package/dist/cjs/ifx-icon.cjs.entry.js.map +1 -1
  5. package/dist/cjs/ifx-icons-preview.cjs.entry.js +1 -1
  6. package/dist/cjs/ifx-templates-ui.cjs.entry.js +1 -1
  7. package/dist/cjs/ifx-templates-ui.cjs.entry.js.map +1 -1
  8. package/dist/collection/components/icon/infineonIconStencil.js +7 -2
  9. package/dist/collection/components/icon/infineonIconStencil.js.map +1 -1
  10. package/dist/collection/components/templates/templates-ui/templates-ui.js +1 -1
  11. package/dist/collection/components/templates/templates-ui/templates-ui.js.map +1 -1
  12. package/dist/components/ifx-accordion-item.js +1 -1
  13. package/dist/components/ifx-alert.js +1 -1
  14. package/dist/components/ifx-breadcrumb-item-label.js +1 -1
  15. package/dist/components/ifx-checkbox-group.js +1 -1
  16. package/dist/components/ifx-checkbox.js +1 -1
  17. package/dist/components/ifx-chip-item.js +1 -1
  18. package/dist/components/ifx-chip.js +1 -1
  19. package/dist/components/ifx-date-picker.js +1 -1
  20. package/dist/components/ifx-dropdown-item.js +1 -1
  21. package/dist/components/ifx-dropdown-trigger-button.js +1 -1
  22. package/dist/components/ifx-faq.js +2 -2
  23. package/dist/components/ifx-file-upload.js +2 -2
  24. package/dist/components/ifx-filter-accordion.js +1 -1
  25. package/dist/components/ifx-filter-bar.js +1 -1
  26. package/dist/components/ifx-filter-search.js +2 -2
  27. package/dist/components/ifx-icon-button.js +1 -1
  28. package/dist/components/ifx-icon.js +1 -1
  29. package/dist/components/ifx-icons-preview.js +2 -2
  30. package/dist/components/ifx-list-entry.js +2 -2
  31. package/dist/components/ifx-list.js +1 -1
  32. package/dist/components/ifx-modal.js +2 -2
  33. package/dist/components/ifx-multiselect.js +1 -1
  34. package/dist/components/ifx-navbar-item.js +1 -1
  35. package/dist/components/ifx-navbar.js +1 -1
  36. package/dist/components/ifx-notification.js +1 -1
  37. package/dist/components/ifx-overview-table.js +1 -1
  38. package/dist/components/ifx-pagination.js +1 -1
  39. package/dist/components/ifx-radio-button-group.js +1 -1
  40. package/dist/components/ifx-search-bar.js +2 -2
  41. package/dist/components/ifx-search-field.js +1 -1
  42. package/dist/components/ifx-segment.js +1 -1
  43. package/dist/components/ifx-segmented-control.js +1 -1
  44. package/dist/components/ifx-select.js +1 -1
  45. package/dist/components/ifx-set-filter.js +5 -5
  46. package/dist/components/ifx-sidebar-item.js +1 -1
  47. package/dist/components/ifx-slider.js +1 -1
  48. package/dist/components/ifx-step.js +1 -1
  49. package/dist/components/ifx-table.js +7 -7
  50. package/dist/components/ifx-tabs.js +1 -1
  51. package/dist/components/ifx-tag.js +1 -1
  52. package/dist/components/ifx-template.js +1 -1
  53. package/dist/components/ifx-templates-ui.js +6 -6
  54. package/dist/components/ifx-templates-ui.js.map +1 -1
  55. package/dist/components/ifx-text-field.js +1 -1
  56. package/dist/components/ifx-tooltip.js +1 -1
  57. package/dist/components/ifx-tree-view-item.js +2 -2
  58. package/dist/components/{p-3c89d8bc.js → p-0579fe19.js} +2 -2
  59. package/dist/components/{p-3c89d8bc.js.map → p-0579fe19.js.map} +1 -1
  60. package/dist/components/{p-5840faf6.js → p-059709d0.js} +3 -3
  61. package/dist/components/{p-5840faf6.js.map → p-059709d0.js.map} +1 -1
  62. package/dist/components/{p-b9c43f3f.js → p-08e3be43.js} +3 -3
  63. package/dist/components/{p-b9c43f3f.js.map → p-08e3be43.js.map} +1 -1
  64. package/dist/components/{p-d2ceee1e.js → p-59b3c1f0.js} +2 -2
  65. package/dist/components/{p-d2ceee1e.js.map → p-59b3c1f0.js.map} +1 -1
  66. package/dist/components/{p-fd57f6da.js → p-73014925.js} +4 -4
  67. package/dist/components/{p-fd57f6da.js.map → p-73014925.js.map} +1 -1
  68. package/dist/components/{p-92ff14ab.js → p-7a4fa8b6.js} +2 -2
  69. package/dist/components/{p-92ff14ab.js.map → p-7a4fa8b6.js.map} +1 -1
  70. package/dist/components/{p-6b8238fd.js → p-88962325.js} +404 -399
  71. package/dist/components/p-88962325.js.map +1 -0
  72. package/dist/components/{p-d8654e8a.js → p-a9b659df.js} +2 -2
  73. package/dist/components/{p-d8654e8a.js.map → p-a9b659df.js.map} +1 -1
  74. package/dist/components/{p-dec7aa0b.js → p-bd905594.js} +2 -2
  75. package/dist/components/{p-dec7aa0b.js.map → p-bd905594.js.map} +1 -1
  76. package/dist/components/{p-d9063275.js → p-c11d7ab3.js} +3 -3
  77. package/dist/components/{p-d9063275.js.map → p-c11d7ab3.js.map} +1 -1
  78. package/dist/components/{p-2029412f.js → p-d6ba69e2.js} +2 -2
  79. package/dist/components/{p-2029412f.js.map → p-d6ba69e2.js.map} +1 -1
  80. package/dist/components/{p-ed2bcd51.js → p-e3091464.js} +2 -2
  81. package/dist/components/{p-ed2bcd51.js.map → p-e3091464.js.map} +1 -1
  82. package/dist/components/{p-0c563507.js → p-e9f53aae.js} +2 -2
  83. package/dist/components/{p-0c563507.js.map → p-e9f53aae.js.map} +1 -1
  84. package/dist/components/{p-b1ad0588.js → p-f0ee192b.js} +2 -2
  85. package/dist/components/{p-b1ad0588.js.map → p-f0ee192b.js.map} +1 -1
  86. package/dist/esm/{icons-4945fd80.js → icons-f814ed16.js} +397 -397
  87. package/dist/esm/{icons-4945fd80.js.map → icons-f814ed16.js.map} +1 -1
  88. package/dist/esm/ifx-icon.entry.js +8 -3
  89. package/dist/esm/ifx-icon.entry.js.map +1 -1
  90. package/dist/esm/ifx-icons-preview.entry.js +1 -1
  91. package/dist/esm/ifx-templates-ui.entry.js +1 -1
  92. package/dist/esm/ifx-templates-ui.entry.js.map +1 -1
  93. package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
  94. package/dist/infineon-design-system-stencil/{p-44d373c7.entry.js → p-02634b6e.entry.js} +2 -2
  95. package/dist/infineon-design-system-stencil/{p-03c9d3fe.entry.js → p-18b80502.entry.js} +2 -2
  96. package/dist/infineon-design-system-stencil/{p-03c9d3fe.entry.js.map → p-18b80502.entry.js.map} +1 -1
  97. package/dist/infineon-design-system-stencil/{p-574657e9.js → p-2c8c0e87.js} +2 -2
  98. package/dist/infineon-design-system-stencil/{p-574657e9.js.map → p-2c8c0e87.js.map} +1 -1
  99. package/dist/infineon-design-system-stencil/p-6483ca08.entry.js +2 -0
  100. package/dist/infineon-design-system-stencil/p-6483ca08.entry.js.map +1 -0
  101. package/package.json +1 -1
  102. package/dist/components/p-6b8238fd.js.map +0 -1
  103. package/dist/infineon-design-system-stencil/p-b14347ef.entry.js +0 -2
  104. package/dist/infineon-design-system-stencil/p-b14347ef.entry.js.map +0 -1
  105. /package/dist/infineon-design-system-stencil/{p-44d373c7.entry.js.map → p-02634b6e.entry.js.map} +0 -0
@@ -1,10 +1,10 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
2
- import { d as defineCustomElement$7 } from './p-d8654e8a.js';
2
+ import { d as defineCustomElement$7 } from './p-a9b659df.js';
3
3
  import { d as defineCustomElement$6 } from './p-68016aea.js';
4
- import { d as defineCustomElement$5 } from './p-6b8238fd.js';
5
- import { d as defineCustomElement$4 } from './p-b9c43f3f.js';
6
- import { d as defineCustomElement$3 } from './p-b1ad0588.js';
7
- import { d as defineCustomElement$2 } from './p-92ff14ab.js';
4
+ import { d as defineCustomElement$5 } from './p-88962325.js';
5
+ import { d as defineCustomElement$4 } from './p-08e3be43.js';
6
+ import { d as defineCustomElement$3 } from './p-f0ee192b.js';
7
+ import { d as defineCustomElement$2 } from './p-7a4fa8b6.js';
8
8
 
9
9
  const setFilterCss = "";
10
10
  const IfxSetFilterStyle0 = setFilterCss;
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
2
- import { d as defineCustomElement$3 } from './p-6b8238fd.js';
2
+ import { d as defineCustomElement$3 } from './p-88962325.js';
3
3
  import { d as defineCustomElement$2 } from './p-643bcbdf.js';
4
4
 
5
5
  const sidebarItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{position:relative}.sidebar__nav-item:focus,.sidebar__nav-item.header__section:focus{outline:none}.sidebar__nav-item:focus .sidebar__nav-item-icon-wrapper,.sidebar__nav-item.header__section:focus .sidebar__nav-item-icon-wrapper{color:#08665C}.sidebar__nav-item:focus .sidebar__nav-item-label,.sidebar__nav-item.header__section:focus .sidebar__nav-item-label{outline:none;color:#08665C}.sidebar__nav-item:focus .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon,.sidebar__nav-item.header__section:focus .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{color:#08665C}.sidebar__nav-item:hover,.sidebar__nav-item.header__section:hover{outline:none}.sidebar__nav-item:hover .sidebar__nav-item-icon-wrapper,.sidebar__nav-item.header__section:hover .sidebar__nav-item-icon-wrapper{color:#08665C}.sidebar__nav-item:hover .sidebar__nav-item-label,.sidebar__nav-item.header__section:hover .sidebar__nav-item-label{outline:none;color:#08665C}.sidebar__nav-item:hover .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon,.sidebar__nav-item.header__section:hover .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{color:#08665C}.sidebar__nav-item{display:flex;flex-direction:row;align-items:center;width:100%;padding:8px 0px;gap:4px;flex:none;order:0;flex-grow:0;text-decoration:none;color:#1D1D1D;cursor:pointer;font-family:var(--ifx-font-family)}.sidebar__nav-item.extra-padding__bottom{padding:8px 0px 16px 0px}.sidebar__nav-item.active{color:#0A8276}.sidebar__nav-item.active-section::before{content:\"\";position:absolute;left:-32px;height:40px;width:2px;background:#0A8276}.sidebar__nav-item.open{padding:8px 0px}.sidebar__nav-item.open .sidebar__nav-item-label{font-size:16px;font-style:normal;font-weight:400;line-height:24px}.sidebar__nav-item.open .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{transform:rotate(-180deg)}.sidebar__nav-item.header__section{box-sizing:padding-box;border-top:1px solid #EEEDED;padding:16px 0px;display:-webkit-flex;-webkit-line-clamp:1;-webkit-box-orient:horizontal;overflow:hidden;text-overflow:ellipsis}.sidebar__nav-item.header__section.no-top-border{border-top:none}.sidebar__nav-item.header__section.active-section::before{content:\"\";position:absolute;left:-32px;height:40px;width:2px;background:#0A8276}.sidebar__nav-item.header__section.open{padding:16px 0px 8px 0px}.sidebar__nav-item.header__section.open .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{transform:rotate(-180deg)}.sidebar__nav-item.header__section .sidebar__nav-item-label{color:#1D1D1D;font-family:Source Sans 3;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.sidebar__nav-item.submenu__item{padding:4px 0px}.sidebar__nav-item.submenu__item.extra-padding__bottom{padding:4px 0px 16px 0px}.sidebar__nav-item .sidebar__nav-item-icon-wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;gap:8px;flex-shrink:0}.sidebar__nav-item .sidebar__nav-item-icon-wrapper.noIcon{display:none}.sidebar__nav-item .sidebar__nav-item-icon-wrapper ifx-icon{width:16px;height:16px}.sidebar__nav-item .sidebar__nav-item-label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;display:flex;align-items:center;flex:none;order:1;flex-grow:1;cursor:pointer}.sidebar__nav-item .sidebar__nav-item-indicator{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px 4px;flex:none;order:2;flex-grow:0}.expandable__submenu{display:none;list-style-type:none;flex-direction:column;padding:0;margin:0;padding-left:40px}.expandable__submenu.open{display:flex}.header__section+.expandable__submenu{padding-left:0}";
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
2
- import { d as defineCustomElement$2 } from './p-6b8238fd.js';
2
+ import { d as defineCustomElement$2 } from './p-88962325.js';
3
3
 
4
4
  const sliderCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-block}.left-icon,.right-icon,.left-text,.right-text,.percentage-display{font-size:0.875rem;color:#575352;margin-left:8px}.left-icon.disabled,.right-icon.disabled,.left-text.disabled,.right-text.disabled,.percentage-display.disabled{color:#BFBBBB}.left-icon,.left-text{margin-right:8px}.right-icon,.right-text,.percentage-display{margin-left:8px}.ifx-slider{display:flex;align-items:center;padding:2px 16px;border-radius:9999px}.ifx-slider input[type=range]{-webkit-appearance:none;width:100%;height:4px;background:linear-gradient(to right, #0A8276 0%, #0A8276 var(--value-percent, 0%), #EEEDED var(--value-percent, 0%), #EEEDED 100%);outline:none;cursor:pointer;transition:0.2s}.ifx-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#0A8276;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#0A8276;border-radius:50%;cursor:pointer;transition:box-shadow 0.2s}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:hover{background:#08665C}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:active{background:#06534B}.ifx-slider input[type=range]:disabled{background:#BFBBBB;cursor:default}.ifx-slider input[type=range]:disabled::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#BFBBBB;border-radius:50%;cursor:default}.ifx-slider .range-slider__wrapper{position:relative;width:129px;height:4px;display:flex;align-items:center;justify-content:center;margin:0px 2px;background:linear-gradient(to right, #EEEDED 0%, #EEEDED var(--min-value-percent, 100%), #0A8276 var(--min-value-percent, 100%), #0A8276 var(--max-value-percent, 100%), #EEEDED var(--max-value-percent, 100%), #EEEDED 100%)}.ifx-slider .range-slider__wrapper:has(input[type=range]:disabled){background:#BFBBBB}.ifx-slider .range-slider__wrapper input[type=range]{position:absolute;pointer-events:none;background:none}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-ms-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;border:none;background:none;width:100%}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-track{-webkit-appearance:none;border:none;background:none;width:100%}";
5
5
  const IfxSliderStyle0 = sliderCss;
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
2
- import { d as defineCustomElement$2 } from './p-6b8238fd.js';
2
+ import { d as defineCustomElement$2 } from './p-88962325.js';
3
3
 
4
4
  const stepCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.step-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;gap:8px;font:400 1rem/1.5rem \"Source Sans 3\"}.step-wrapper.vertical{flex-direction:row;gap:12px;width:unset;height:100%}.step-wrapper.vertical .step-icon-wrapper{flex-direction:column;width:unset;height:100%}.step-wrapper.compact{gap:0;max-width:100%}.step-wrapper.compact .step-label{max-width:100%;cursor:auto;align-self:flex-start}.step-wrapper.compact.indicator-left{align-items:flex-end;text-align:right}.step-wrapper.compact.indicator-right{align-items:flex-start}.step-wrapper .step-label{max-width:90%;color:#8D8786;word-wrap:break-word}.step-wrapper .step-label.curr-label{font:600 1.25rem/1.75rem \"Source Sans 3\"}.step-wrapper .step-label.next-label{font:400 0.75rem/1rem \"Source Sans 3\"}.step-wrapper .step-label :hover{color:#8D8786}.step-wrapper.first-step .step-connector-l{height:0px}.step-wrapper.last-step .step-connector-r{height:0px}.step-wrapper.vertical.first-step .step-connector-l,.step-wrapper.vertical.last-step .step-connector-r{width:0px}.step-wrapper.complete .step-connector-l,.step-wrapper.complete .step-connector-r,.step-wrapper.complete .step-icon{background:#0A8276}.step-wrapper.complete .step-connector-l.active,.step-wrapper.complete .step-connector-l.error,.step-wrapper.complete .step-connector-r.active,.step-wrapper.complete .step-connector-r.error,.step-wrapper.complete .step-icon.active,.step-wrapper.complete .step-icon.error{background:#8D8786}.step-wrapper.complete:not(.disabled) .step-label{cursor:pointer;color:#1D1D1D}.step-wrapper.complete:not(.disabled) .step-label :hover{color:#08665C}.step-wrapper.disabled .step-connector-l,.step-wrapper.disabled .step-connector-r,.step-wrapper.disabled .step-icon{background-color:#8D8786}.step-wrapper.disabled .step-label,.step-wrapper.disabled .step-label :hover{color:#8D8786}.step-wrapper.active .step-connector-l,.step-wrapper.active .step-connector-r,.step-wrapper.active .step-icon{background:#0A8276}.step-wrapper.active .step-connector-l.active,.step-wrapper.active .step-connector-l.error,.step-wrapper.active .step-connector-r.active,.step-wrapper.active .step-connector-r.error,.step-wrapper.active .step-icon.active,.step-wrapper.active .step-icon.error{background:#8D8786}.step-wrapper.active .step-label,.step-wrapper.active .step-label :hover{color:#1D1D1D}.step-wrapper.active.complete .step-label{cursor:auto}.step-wrapper.clickable:not(.active) .step-label{cursor:pointer}.step-wrapper.error:not(.active){color:#CD002F}.step-wrapper.error:not(.active) .step-label{color:#CD002F}.step-wrapper.error:not(.active) .step-label :hover{color:#0A8276}.step-wrapper.disabled .step-label{cursor:auto}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon{background:#08665C}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.error{background:#8D8786}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-label{color:#08665C}.active-indic{width:16px;height:16px;border-radius:9999px;background:white}.step-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.step-icon{width:24px;height:24px;background-color:#8D8786;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white}.step-connector-r,.step-connector-l{height:2px;min-width:40px;flex-grow:1;background-color:#8D8786}.vertical .step-connector-r,.vertical .step-connector-l{height:unset;min-width:unset;width:2px;min-height:40px}";
5
5
  const IfxStepStyle0 = stepCss;
@@ -2,14 +2,14 @@ import { p as proxyCustomElement, H, h, d as Host } from './p-f8e6a4ef.js';
2
2
  import { c as classNames } from './p-5cdc6210.js';
3
3
  import { c as createGrid } from './p-1429e9ea.js';
4
4
  import { d as defineCustomElement$a } from './p-17df0350.js';
5
- import { d as defineCustomElement$9 } from './p-d8654e8a.js';
6
- import { d as defineCustomElement$8 } from './p-ed2bcd51.js';
7
- import { d as defineCustomElement$7 } from './p-5840faf6.js';
8
- import { d as defineCustomElement$6 } from './p-6b8238fd.js';
9
- import { d as defineCustomElement$5 } from './p-0c563507.js';
5
+ import { d as defineCustomElement$9 } from './p-a9b659df.js';
6
+ import { d as defineCustomElement$8 } from './p-e3091464.js';
7
+ import { d as defineCustomElement$7 } from './p-059709d0.js';
8
+ import { d as defineCustomElement$6 } from './p-88962325.js';
9
+ import { d as defineCustomElement$5 } from './p-e9f53aae.js';
10
10
  import { d as defineCustomElement$4 } from './p-643bcbdf.js';
11
- import { d as defineCustomElement$3 } from './p-fd57f6da.js';
12
- import { d as defineCustomElement$2 } from './p-b1ad0588.js';
11
+ import { d as defineCustomElement$3 } from './p-73014925.js';
12
+ import { d as defineCustomElement$2 } from './p-f0ee192b.js';
13
13
 
14
14
  class ButtonCellRenderer {
15
15
  init(params) {
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
2
- import { d as defineCustomElement$2 } from './p-6b8238fd.js';
2
+ import { d as defineCustomElement$2 } from './p-88962325.js';
3
3
 
4
4
  const tabsCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:flex}.tabs{display:flex;font-family:var(--ifx-font-family);width:100%}.tabs.horizontal{flex-direction:column}.tabs.vertical{flex-direction:row}.tabs-list{display:flex;list-style:none;padding:0;margin:0;position:relative;font-weight:600}.tabs-list:focus-within .active-border{display:none}.active-border{content:\"\";position:absolute;transition:left 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out}.tabs.horizontal .active-border{bottom:0;left:0;height:2px;background-color:#0A8276}.tabs.vertical .tabs-list{flex-direction:column;border-bottom:none}.tabs.vertical .tab-content{padding-top:0px;padding-left:32px}.tabs:not(.vertical) .tab-item.full-width{flex:1}.tab-item{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;cursor:pointer;position:relative}.tab-item.icon__right{flex-direction:row-reverse;justify-content:flex-end}.tab-item:hover{color:#0A8276}.tab-item:active,.tab-item.active{color:#0A8276}.tab-item:focus,.tab-item.focus{outline:none;border-radius:1px;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.tab-item:focus+.active-border,.tab-item.focus+.active-border{display:none}.tab-item.disabled{color:#BFBBBB;pointer-events:none}.tabs.vertical .tab-item{border-right:2px solid transparent;min-width:7em}.tabs.vertical .active-border{left:0;top:0;width:2px;background-color:#0A8276}.tab-content{padding-top:24px;padding-left:0px;flex-grow:1}.tabs.small .tab-item{font-size:0.875rem}";
5
5
  const IfxTabsStyle0 = tabsCss;
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
2
- import { d as defineCustomElement$2 } from './p-6b8238fd.js';
2
+ import { d as defineCustomElement$2 } from './p-88962325.js';
3
3
 
4
4
  const tagCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-flex}.container{display:inline-flex;align-items:center;padding:4px 16px;border:1px solid #BFBBBB;border-radius:9999px;background-color:#FFFFFF;gap:8px;font-family:var(--ifx-font-family)}.container:hover{cursor:pointer;border-color:#8D8786}.container:active,.container.active{border-color:#1D1D1D}.container:focus:not(:active,.active){outline:none;border-color:#1D1D1D}.container .label-wrapper{text-decoration:none}.container .label-wrapper .label{margin:0;font-weight:400;font-size:1rem;line-height:20px;color:#1D1D1D}";
5
5
  const IfxTagStyle0 = tagCss;
@@ -1,4 +1,4 @@
1
- import { T as Template, d as defineCustomElement$1 } from './p-d9063275.js';
1
+ import { T as Template, d as defineCustomElement$1 } from './p-c11d7ab3.js';
2
2
 
3
3
  const IfxTemplate = Template;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,12 +1,12 @@
1
1
  import { p as proxyCustomElement, H, g as getAssetPath, h } from './p-f8e6a4ef.js';
2
- import { d as defineCustomElement$9 } from './p-2029412f.js';
2
+ import { d as defineCustomElement$9 } from './p-d6ba69e2.js';
3
3
  import { d as defineCustomElement$8 } from './p-17df0350.js';
4
- import { d as defineCustomElement$7 } from './p-6b8238fd.js';
5
- import { d as defineCustomElement$6 } from './p-0c563507.js';
4
+ import { d as defineCustomElement$7 } from './p-88962325.js';
5
+ import { d as defineCustomElement$6 } from './p-e9f53aae.js';
6
6
  import { d as defineCustomElement$5 } from './p-38037d65.js';
7
7
  import { d as defineCustomElement$4 } from './p-3b6a432e.js';
8
- import { d as defineCustomElement$3 } from './p-d9063275.js';
9
- import { d as defineCustomElement$2 } from './p-92ff14ab.js';
8
+ import { d as defineCustomElement$3 } from './p-c11d7ab3.js';
9
+ import { d as defineCustomElement$2 } from './p-7a4fa8b6.js';
10
10
 
11
11
  const templatesUiCss = "*{padding:0;margin:0}.templates__container{display:flex;flex-direction:column;align-items:center}.templates__container .back__btn-wrapper{display:none}.templates__container .back__btn-wrapper.show{display:flex;justify-content:space-between;width:100%}.templates__container .back__btn-wrapper .alert__wrapper{display:none}.templates__container .back__btn-wrapper .alert__wrapper.show{display:block}.templates__container .templates__wrapper{display:flex;padding:20px 0px;gap:20px;flex-wrap:wrap}.templates__container .templates__title.hide{display:none}";
12
12
  const IfxTemplatesUiStyle0 = templatesUiCss;
@@ -55,7 +55,7 @@ const TemplatesUI = /*@__PURE__*/ proxyCustomElement(class TemplatesUI extends H
55
55
  alertWrapper.classList.remove('show');
56
56
  }
57
57
  render() {
58
- return (h("div", { key: 'dc69ec5ae88df9781d1b2d8deae6f63e9230ae94', class: 'templates__container' }, h("div", { key: '23e3cf121644963d2e9fb4f8ee6412567d324281', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: '87c39a2a5e879e4257ef8785d740a4ded69bdd38', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: '4403c1ec6974adb7b97fb050799a5899411fcd23', class: "alert__wrapper" }, h("ifx-alert", { key: 'edfb5324a6f5d74060a9517bf78bd680b1f0b02b', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-24" }, "All fields are mandatory"))), h("h2", { key: '83730e8f99c814b03e912d228d2a580727a6fbbb', class: "templates__title" }, "Choose your template"), h("div", { key: 'edc2d51d615b9c27c32643c07cf48c567be5f35a', class: "templates__wrapper" }, h("ifx-template", { key: 'ab9f760b656e245e2c9e1f20a99ef2f4876a7cd2', name: 'template-01', thumbnail: this.tableTemplate }), h("ifx-template", { key: '17c5ee462dc6d332e1d4cb70a34f91675fe09462', name: 'template-02', thumbnail: this.wizardTemplate }))));
58
+ return (h("div", { key: 'dc69ec5ae88df9781d1b2d8deae6f63e9230ae94', class: 'templates__container' }, h("div", { key: '23e3cf121644963d2e9fb4f8ee6412567d324281', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: '87c39a2a5e879e4257ef8785d740a4ded69bdd38', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: '4403c1ec6974adb7b97fb050799a5899411fcd23', class: "alert__wrapper" }, h("ifx-alert", { key: 'edfb5324a6f5d74060a9517bf78bd680b1f0b02b', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-16" }, "All fields are mandatory"))), h("h2", { key: '83730e8f99c814b03e912d228d2a580727a6fbbb', class: "templates__title" }, "Choose your template"), h("div", { key: 'edc2d51d615b9c27c32643c07cf48c567be5f35a', class: "templates__wrapper" }, h("ifx-template", { key: 'ab9f760b656e245e2c9e1f20a99ef2f4876a7cd2', name: 'template-01', thumbnail: this.tableTemplate }), h("ifx-template", { key: '17c5ee462dc6d332e1d4cb70a34f91675fe09462', name: 'template-02', thumbnail: this.wizardTemplate }))));
59
59
  }
60
60
  static get assetsDirs() { return ["assets"]; }
61
61
  get el() { return this; }
@@ -1 +1 @@
1
- {"file":"ifx-templates-ui.js","mappings":"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","names":[],"sources":["src/components/templates/templates-ui/templates-ui.scss?tag=ifx-templates-ui&encapsulation=shadow","src/components/templates/templates-ui/templates-ui.tsx"],"sourcesContent":["* { \n padding: 0;\n margin: 0;\n}\n\n.templates__container { \n display: flex;\n flex-direction: column;\n align-items: center;\n\n & .back__btn-wrapper { \n display: none;\n &.show { \n display: flex;\n justify-content: space-between;\n width: 100%;\n }\n\n & .alert__wrapper { \n display: none;\n\n &.show { \n display: block;\n }\n }\n }\n\n & .templates__wrapper { \n display: flex;\n padding: 20px 0px;\n gap: 20px;\n // justify-content: space-evenly;\n flex-wrap: wrap;\n }\n\n & .templates__title { \n &.hide { \n display: none;\n }\n }\n}\n\n\n\n","import { Component, h, Listen, Element, getAssetPath } from '@stencil/core';\n\n@Component({\n tag: 'ifx-templates-ui',\n styleUrl: 'templates-ui.scss',\n shadow: true,\n assetsDirs: ['assets']\n})\n\nexport class TemplatesUI {\n @Element() el: HTMLElement;\n\n private tableTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/table_template.png`);\n private wizardTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/wizard_template.png`);\n\n\n toggleTemplate(currTemp) { \n const templates = this.el.shadowRoot.querySelector('.templates__wrapper').querySelectorAll('ifx-template');\n templates.forEach((template) => { \n template.toggleTemplate(currTemp)\n })\n }\n\n @Listen('fieldError')\n handleError(e) { \n const alertWrapper = this.el.shadowRoot.querySelector('.alert__wrapper');\n if(e.detail) { \n alertWrapper.classList.add('show');\n } else { \n alertWrapper.classList.remove('show');\n }\n }\n\n @Listen('toggleTemplates')\n filterTemplates(e) {\n const title = this.el.shadowRoot.querySelector('.templates__title');\n const backBtn = this.el.shadowRoot.querySelector('.back__btn-wrapper');\n if(e.detail) { \n title.classList.add('hide');\n if(e.detail !== 'details') { \n backBtn.classList.add('show');\n }\n this.toggleTemplate(e.detail)\n } else { \n title.classList.remove('hide');\n backBtn.classList.remove('show');\n this.toggleTemplate(null)\n }\n }\n\n closeAlert() { \n const alertWrapper = this.el.shadowRoot.querySelector('.alert__wrapper');\n alertWrapper.classList.remove('show');\n }\n\n render() {\n return (\n <div class='templates__container'>\n <div class=\"back__btn-wrapper\">\n <ifx-icon-button onClick={() => this.filterTemplates(false)} shape=\"round\" variant=\"tertiary\" icon=\"arrow-left-16\" target=\"_blank\" size=\"m\" />\n <div class=\"alert__wrapper\">\n <ifx-alert onClick={() => this.closeAlert()} aria-live=\"assertive\" variant=\"danger\" icon=\"c-info-24\">All fields are mandatory</ifx-alert>\n </div>\n </div>\n <h2 class=\"templates__title\">Choose your template</h2>\n <div class=\"templates__wrapper\">\n <ifx-template name='template-01' thumbnail={this.tableTemplate} />\n <ifx-template name='template-02' thumbnail={this.wizardTemplate} />\n </div>\n </div>\n )\n }\n}\n"],"version":3}
1
+ {"file":"ifx-templates-ui.js","mappings":";;;;;;;;;;AAAA,MAAM,cAAc,GAAG,yiBAAyiB,CAAC;AACjkB,6BAAe,cAAc;;MCQhB,WAAW;IAPxB;;;;QAUU,kBAAa,GAAG,YAAY,CAAC,6FAA6F,CAAC,CAAC;QAC5H,mBAAc,GAAG,YAAY,CAAC,8FAA8F,CAAC,CAAC;KA2DvI;IAxDC,cAAc,CAAC,QAAQ;QACrB,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;QACzG,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ;YACzB,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;SAClC,CAAC,CAAA;KACL;IAGD,WAAW,CAAC,CAAC;QACX,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QACzE,IAAG,CAAC,CAAC,MAAM,EAAE;YACX,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;SACpC;aAAM;YACL,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;SACvC;KACF;IAGD,eAAe,CAAC,CAAC;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QACpE,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QACvE,IAAG,CAAC,CAAC,MAAM,EAAE;YACX,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YAC5B,IAAG,CAAC,CAAC,MAAM,KAAK,SAAS,EAAE;gBACzB,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;aAC/B;YACD,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;SAC9B;aAAM;YACL,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YAC/B,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YACjC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;SAC1B;KACF;IAED,UAAU;QACR,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QACzE,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;KACvC;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,wEAAiB,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,KAAK,EAAC,OAAO,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,eAAe,EAAC,MAAM,EAAC,QAAQ,EAAC,IAAI,EAAC,GAAG,GAAG,EAC9I,4DAAK,KAAK,EAAC,gBAAgB,IACzB,kEAAW,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,eAAY,WAAW,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,WAAW,+BAAqC,CACrI,CACF,EACN,2DAAI,KAAK,EAAC,kBAAkB,2BAA0B,EACtD,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,qEAAc,IAAI,EAAC,aAAa,EAAC,SAAS,EAAE,IAAI,CAAC,aAAa,GAAI,EAClE,qEAAc,IAAI,EAAC,aAAa,EAAC,SAAS,EAAE,IAAI,CAAC,cAAc,GAAI,CAC/D,CACF,EACP;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/templates/templates-ui/templates-ui.scss?tag=ifx-templates-ui&encapsulation=shadow","src/components/templates/templates-ui/templates-ui.tsx"],"sourcesContent":["* { \n padding: 0;\n margin: 0;\n}\n\n.templates__container { \n display: flex;\n flex-direction: column;\n align-items: center;\n\n & .back__btn-wrapper { \n display: none;\n &.show { \n display: flex;\n justify-content: space-between;\n width: 100%;\n }\n\n & .alert__wrapper { \n display: none;\n\n &.show { \n display: block;\n }\n }\n }\n\n & .templates__wrapper { \n display: flex;\n padding: 20px 0px;\n gap: 20px;\n // justify-content: space-evenly;\n flex-wrap: wrap;\n }\n\n & .templates__title { \n &.hide { \n display: none;\n }\n }\n}\n\n\n\n","import { Component, h, Listen, Element, getAssetPath } from '@stencil/core';\n\n@Component({\n tag: 'ifx-templates-ui',\n styleUrl: 'templates-ui.scss',\n shadow: true,\n assetsDirs: ['assets']\n})\n\nexport class TemplatesUI {\n @Element() el: HTMLElement;\n\n private tableTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/table_template.png`);\n private wizardTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/wizard_template.png`);\n\n\n toggleTemplate(currTemp) { \n const templates = this.el.shadowRoot.querySelector('.templates__wrapper').querySelectorAll('ifx-template');\n templates.forEach((template) => { \n template.toggleTemplate(currTemp)\n })\n }\n\n @Listen('fieldError')\n handleError(e) { \n const alertWrapper = this.el.shadowRoot.querySelector('.alert__wrapper');\n if(e.detail) { \n alertWrapper.classList.add('show');\n } else { \n alertWrapper.classList.remove('show');\n }\n }\n\n @Listen('toggleTemplates')\n filterTemplates(e) {\n const title = this.el.shadowRoot.querySelector('.templates__title');\n const backBtn = this.el.shadowRoot.querySelector('.back__btn-wrapper');\n if(e.detail) { \n title.classList.add('hide');\n if(e.detail !== 'details') { \n backBtn.classList.add('show');\n }\n this.toggleTemplate(e.detail)\n } else { \n title.classList.remove('hide');\n backBtn.classList.remove('show');\n this.toggleTemplate(null)\n }\n }\n\n closeAlert() { \n const alertWrapper = this.el.shadowRoot.querySelector('.alert__wrapper');\n alertWrapper.classList.remove('show');\n }\n\n render() {\n return (\n <div class='templates__container'>\n <div class=\"back__btn-wrapper\">\n <ifx-icon-button onClick={() => this.filterTemplates(false)} shape=\"round\" variant=\"tertiary\" icon=\"arrow-left-16\" target=\"_blank\" size=\"m\" />\n <div class=\"alert__wrapper\">\n <ifx-alert onClick={() => this.closeAlert()} aria-live=\"assertive\" variant=\"danger\" icon=\"c-info-16\">All fields are mandatory</ifx-alert>\n </div>\n </div>\n <h2 class=\"templates__title\">Choose your template</h2>\n <div class=\"templates__wrapper\">\n <ifx-template name='template-01' thumbnail={this.tableTemplate} />\n <ifx-template name='template-02' thumbnail={this.wizardTemplate} />\n </div>\n </div>\n )\n }\n}\n"],"version":3}
@@ -1,4 +1,4 @@
1
- import { T as TextField, d as defineCustomElement$1 } from './p-92ff14ab.js';
1
+ import { T as TextField, d as defineCustomElement$1 } from './p-7a4fa8b6.js';
2
2
 
3
3
  const IfxTextField = TextField;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
2
- import { d as defineCustomElement$2 } from './p-6b8238fd.js';
2
+ import { d as defineCustomElement$2 } from './p-88962325.js';
3
3
  import { c as createPopper } from './p-e459974a.js';
4
4
 
5
5
  const tooltipCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-flex}.tooltip__container{display:inline-flex;flex-direction:column;position:relative;font-family:var(--ifx-font-family)}.tooltip-extended,.tooltip-compact,.tooltip-dismissible{background-color:#1D1D1D;border:1px solid black;z-index:1080;display:none;transition:opacity 0.3s;position:absolute;font-size:14px;font-style:normal;font-weight:400;line-height:20px;color:#FFFFFF;width:max-content;box-sizing:border-box;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.visible.tooltip-extended,.visible.tooltip-compact,.visible.tooltip-dismissible{display:flex !important;align-items:start}.tooltip-dismissible .close-button{all:unset;cursor:pointer;position:relative;order:2;margin-top:12px;margin-right:12px;line-height:0px}.tooltip-dismissible .tooltip-dismissible-content{display:flex;flex-direction:column;gap:12px;padding:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-dismissible .tooltip-dismissible-header,.tooltip-dismissible .tooltip-dismissible-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-dismissible .tooltip-dismissible-header{font-weight:600}.tooltip-dismissible .tooltip-dismissible-body{font-weight:400}.tooltip-compact{padding:4px 8px;text-align:center;flex-grow:1}.tooltip-extended{align-items:center;padding:12px;gap:10px}.tooltip-extended .extended_icon{display:flex;align-self:flex-start;align-items:center;cursor:pointer}.tooltip-extended .tooltip-extended-content{display:flex;flex-direction:column;gap:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-extended .tooltip-extended-header,.tooltip-extended .tooltip-extended-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-extended .tooltip-extended-header{font-weight:600}.tooltip-extended .tooltip-extended-body{font-weight:400}.tooltip__container .tooltip-arrow-svg{position:absolute;width:8px;height:8px}[data-placement=top].tooltip-extended>.tooltip-arrow-svg,[data-placement=top].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:50%;transform:rotate(180deg) translateX(-50%)}[data-placement=top-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-start].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:10px;transform:rotate(180deg)}[data-placement=top-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-end].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;right:10px;transform:rotate(180deg)}[data-placement=bottom].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:50%;transform:translateX(-50%)}[data-placement=bottom-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:10px}[data-placement=bottom-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-compact>.tooltip-arrow-svg{top:-7px;right:10px}[data-placement=left].tooltip-extended>.tooltip-arrow-svg,[data-placement=left].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=left].tooltip-compact>.tooltip-arrow-svg{right:-3px;top:50%;transform:rotate(90deg) translateY(-50%) translateX(-50%)}[data-placement=right].tooltip-extended>.tooltip-arrow-svg,[data-placement=right].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=right].tooltip-compact>.tooltip-arrow-svg{left:-3px;top:50%;transform:rotate(270deg) translateY(-50%) translateX(50%)}.tooltip-compact{min-width:28px !important;max-width:145px !important}.tooltip-dismissible{min-width:145px !important;max-width:310px !important}.tooltip-extended{min-width:145px !important;max-width:310px !important}";
@@ -1,6 +1,6 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './p-f8e6a4ef.js';
2
- import { d as defineCustomElement$3 } from './p-d8654e8a.js';
3
- import { d as defineCustomElement$2 } from './p-6b8238fd.js';
2
+ import { d as defineCustomElement$3 } from './p-a9b659df.js';
3
+ import { d as defineCustomElement$2 } from './p-88962325.js';
4
4
 
5
5
  const treeViewItemCss = ".tree-item{position:relative;cursor:pointer;list-style:none}.tree-item.tree-item--expanded{position:relative}.tree-item.tree-item--has-children{position:relative}.tree-item.tree-item--has-children .tree-item__header>.tree-item__chevron-container{display:flex}.tree-item.tree-item--has-children.tree-item--expanded .tree-item__header>.tree-item__chevron-container::after{display:block}.tree-item--disabled{cursor:not-allowed;pointer-events:none;color:#BFBBBB}.tree-item__content{display:flex;flex-direction:row}.tree-item__content:hover .tree-item__checkbox-container,.tree-item__content:hover .tree-item__header{background-color:#F7F7F7}.tree-item__checkbox-container{position:sticky;left:0;z-index:10;padding:4px;background-color:#FFFFFF}.tree-item__header{flex-grow:1;display:flex;align-items:center;white-space:nowrap;height:20px;padding-top:4px;padding-right:16px;padding-bottom:4px;padding-left:8px}.tree-item__chevron-container{display:none;align-items:center;margin-right:8px;height:20px}.tree-item__chevron-container::after{--height-line-start:28px;display:none;content:\"\";position:absolute;z-index:1;top:var(--height-line-start);left:auto;margin-left:8px;width:1px;height:calc(100% - var(--height-line-start));background-color:#EEEDED}.tree-item--disabled .tree-item__chevron-container::after{color:#EEEDED}.tree-item__chevron.chevron-down{transform:rotate(90deg)}.tree-item__chevron.chevron-right{transform:rotate(0)}.tree-item__label-icon-container{display:flex;align-items:center}.tree-item__label-icon-container:focus{outline:none}.tree-item__label-icon-container:focus-visible{outline:2px solid #0A8276;outline-offset:2px;border-radius:1px}.tree-item__icon-container{position:relative;width:16px;height:16px}.tree-item__icon-container ifx-icon{position:absolute;left:0;top:0;opacity:1;transition:opacity 0.2s ease-in-out}.tree-item__icon-container ifx-icon.icon--hidden{opacity:0}.tree-item__label{padding-left:8px}.tree-item__children{display:none}.tree-item[aria-expanded=true]>.tree-item__children{display:block}";
6
6
  const IfxTreeViewItemStyle0 = treeViewItemCss;
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
2
- import { d as defineCustomElement$1 } from './p-6b8238fd.js';
2
+ import { d as defineCustomElement$1 } from './p-88962325.js';
3
3
 
4
4
  const accordionItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.accordion-item{border-radius:3px;overflow:hidden;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}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;max-height:0;overflow:hidden;transition:max-height 0.3s ease-in-out;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:24px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;}.accordion-icon{font-weight:bold;display:inline-block;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}";
5
5
  const IfxAccordionItemStyle0 = accordionItemCss;
@@ -116,4 +116,4 @@ function defineCustomElement() {
116
116
 
117
117
  export { IfxAccordionItem as I, defineCustomElement as d };
118
118
 
119
- //# sourceMappingURL=p-3c89d8bc.js.map
119
+ //# sourceMappingURL=p-0579fe19.js.map
@@ -1 +1 @@
1
- {"file":"p-3c89d8bc.js","mappings":"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","names":[],"sources":["src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// 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 overflow: hidden;\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;\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 max-height: 0;\n overflow: hidden;\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.$ifxSpace300;\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: inline-block;\n transition: transform 0.3s;\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n\n }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n transform: rotate(-180deg);\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 IfxAccordionItem {\n @Element() el;\n @Prop() caption: string;\n @Prop({\n mutable: true,\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\n\n componentWillLoad() {\n this.internalOpen = this.open;\n }\n\n componentDidLoad() {\n this.openAccordionItem()\n }\n\n componentDidUpdate() {\n this.openAccordionItem()\n }\n\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.internalOpen) {\n this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n } else {\n this.contentEl.style.maxHeight = '0';\n }\n }\n\n handleSlotChange(e) {\n const slotElement = e.target;\n const nodes = slotElement.assignedNodes();\n \n if(nodes.length > 0) {\n nodes.forEach(node => {\n const observer = new MutationObserver((mutationsList, _) => {\n for(let mutation of mutationsList) {\n if (mutation.type === 'childList') {\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n }\n }\n });\n observer.observe(node, { attributes: true, childList: true, subtree: true });\n });\n }\n\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n }\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\n render() {\n return (\n <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0' ref={(el) => (this.titleEl = el as HTMLElement)}>\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\">{this.caption}</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 onSlotchange={(e) => this.handleSlotChange(e)} />\n </div>\n </div>\n </div>\n );\n }\n}"],"version":3}
1
+ {"file":"p-0579fe19.js","mappings":"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","names":[],"sources":["src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// 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 overflow: hidden;\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;\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 max-height: 0;\n overflow: hidden;\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.$ifxSpace300;\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: inline-block;\n transition: transform 0.3s;\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n\n }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n transform: rotate(-180deg);\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 IfxAccordionItem {\n @Element() el;\n @Prop() caption: string;\n @Prop({\n mutable: true,\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\n\n componentWillLoad() {\n this.internalOpen = this.open;\n }\n\n componentDidLoad() {\n this.openAccordionItem()\n }\n\n componentDidUpdate() {\n this.openAccordionItem()\n }\n\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.internalOpen) {\n this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n } else {\n this.contentEl.style.maxHeight = '0';\n }\n }\n\n handleSlotChange(e) {\n const slotElement = e.target;\n const nodes = slotElement.assignedNodes();\n \n if(nodes.length > 0) {\n nodes.forEach(node => {\n const observer = new MutationObserver((mutationsList, _) => {\n for(let mutation of mutationsList) {\n if (mutation.type === 'childList') {\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n }\n }\n });\n observer.observe(node, { attributes: true, childList: true, subtree: true });\n });\n }\n\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n }\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\n render() {\n return (\n <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0' ref={(el) => (this.titleEl = el as HTMLElement)}>\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\">{this.caption}</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 onSlotchange={(e) => this.handleSlotChange(e)} />\n </div>\n </div>\n </div>\n );\n }\n}"],"version":3}
@@ -1,6 +1,6 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
2
- import { d as defineCustomElement$2 } from './p-d8654e8a.js';
3
- import { d as defineCustomElement$1 } from './p-6b8238fd.js';
2
+ import { d as defineCustomElement$2 } from './p-a9b659df.js';
3
+ import { d as defineCustomElement$1 } from './p-88962325.js';
4
4
 
5
5
  const chipItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.chip-item{display:flex;align-items:center;gap:8px;padding:8px 16px;user-select:none;transition:all 100ms ease;transition-property:background, color}.chip-item:hover{cursor:pointer;background-color:#EEEDED}.chip-item:active{background-color:#BFBBBB}.chip-item:focus{outline:2px solid #0A8276}.chip-item.chip-item--large{font:400 1rem/1.5rem \"Source Sans 3\"}.chip-item.chip-item--small{font:400 0.875rem/1.25rem \"Source Sans 3\"}.chip-item.chip-item--selected{color:#0A8276}.chip-item.chip-item--selected .chip-item__selected-indicator{display:block}.chip-item__selected-indicator{display:none;margin-left:auto}";
6
6
  const IfxChipItemStyle0 = chipItemCss;
@@ -108,4 +108,4 @@ function defineCustomElement() {
108
108
 
109
109
  export { ChipItem as C, defineCustomElement as d };
110
110
 
111
- //# sourceMappingURL=p-5840faf6.js.map
111
+ //# sourceMappingURL=p-059709d0.js.map
@@ -1 +1 @@
1
- {"file":"p-5840faf6.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,wqBAAwqB,CAAC;AAC7rB,0BAAe,WAAW;;MCeb,QAAQ;IANrB;;;;;QAWQ,UAAK,GAAW,SAAS,CAAC;QAC1B,cAAS,GAAc,EAAE,qBAAqB,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;QACxD,aAAQ,GAAY,KAAK,CAAC;KA4FjE;IAzFD,mBAAmB,CAAC,KAAuC;QACxD,IAAI,IAAI,CAAC,SAAS,CAAC,OAAO,KAAK,QAAQ,EAAE;YACrC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAgC,CAAC;;YAEtD,IAAI,IAAI,CAAC,QAAQ,KAAK,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,aAAa,KAAK,MAAM,CAAC,aAAa,EAAE;gBAClF,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;aACzB;SACJ;KACH;IAGD,gBAAgB,CAAC,QAAiB,EAAE,QAAiB;QAClD,IAAI,QAAQ,KAAK,QAAQ,EAAE;;YAEvB,IAAI,IAAI,CAAC,SAAS,CAAC,qBAAqB,EAAC;gBACrC,IAAI,CAAC,0BAA0B,EAAE,CAAC;aACrC;iBAAM;gBACH,IAAI,CAAC,SAAS,CAAC,qBAAqB,GAAG,IAAI,CAAC;aAC/C;SACJ;KACH;IAED,YAAY;QACT,OAAO,IAAI,CAAC,QAAQ,CAAC,SAAmB,CAAC;KAC3C;IAED,mBAAmB;QAChB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;KACjC;IAGD,0BAA0B,CAAC,gBAAyB,IAAI;QACrD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,aAAa;YAClC,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG;YACvB,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE;YAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;KAC/C;IAED,eAAe;QACZ,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC7B;IAED,iBAAiB,CAAC,KAAoB;QACnC,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;YAClD,IAAI,CAAC,mBAAmB,EAAE,CAAC;SAC9B;KACH;IAED,mBAAmB;QAChB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,IAAI,CAAC,0BAA0B,CAAC,KAAK,CAAC,CAAC;SAC1C;KACH;IAGD,iBAAiB;;QAEd,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC7B;IAED,MAAM;QACH,QACI,4DAAK,KAAK,EAAE,wBAAwB,IAAI,CAAC,SAAS,CAAC,IAAI;iCAC7B,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,mBACE,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,IAGnC,IAAI,CAAC,SAAS,CAAC,OAAO,KAAK,OAAO;YAClC,qEAAc,OAAO,EAAE,IAAI,CAAC,QAAQ,EAChC,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,GAAG,GACG,EAGnB,4DAAK,KAAK,EAAC,kBAAkB,SAAE,8DAAQ,MAAO,EAG9C,4DAAK,KAAK,EAAC,+BAA+B,IACtC,iEAAU,IAAI,EAAC,UAAU,QAAa,CACpC,CAEJ,EACR;KACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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\";\n@use \"../../../global/font.scss\";\n\n.chip-item {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n \n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n \n user-select: none;\n \n transition: all 100ms ease;\n transition-property: background, color;\n \n &:hover {\n cursor: pointer;\n \n background-color: tokens.$ifxColorEngineering200;\n }\n \n &:active {\n background-color: tokens.$ifxColorEngineering300;\n }\n\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500;\n }\n \n &.chip-item--large {\n font: tokens.$ifxBodyBody03;\n }\n \n &.chip-item--small {\n font: tokens.$ifxBodyBody04;\n }\n\n &.chip-item--selected {\n color: tokens.$ifxColorOcean500;\n\n .chip-item__selected-indicator {\n display: block;\n }\n }\n}\n\n.chip-item__selected-indicator {\n display: none;\n \n margin-left: auto;\n}\n\n","import { h,\n Component,\n Element,\n Event,\n EventEmitter, \n Listen,\n Prop, \n Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n if (this.chipState.variant === 'single') {\n const target = event.target as HTMLIfxChipItemElement;\n /* Also making sure chip items are from the same group (parent) while unselecting. */\n if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n this.selected = false;\n }\n }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n /* Do not emit if ChipState does not allow. */\n if (this.chipState.emitIfxChipItemSelect){\n this.emitIfxChipItemSelectEvent();\n } else {\n this.chipState.emitIfxChipItemSelect = true;\n }\n }\n} \n\ngetItemLabel(): string {\n return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n this.selected = !this.selected;\n}\n \n\nemitIfxChipItemSelectEvent(emitIfxChange: boolean = true) {\n this.ifxChipItemSelect.emit({ emitIfxChange: emitIfxChange,\n key: this.chipState.key,\n label: this.getItemLabel(), \n selected: this.selected, \n value: this.value });\n}\n\nhandleItemClick() {\n this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n if (event.code === 'Enter' || event.code === 'Space') {\n this.toggleItemSelection();\n }\n}\n\nhandleSelectedState() {\n if (this.selected) {\n this.emitIfxChipItemSelectEvent(false);\n }\n}\n\n\ncomponentWillLoad() {\n /* Propogating the selected state to the Chip (Parent) component if it is set. */\n this.handleSelectedState();\n}\n\nrender() {\n return (\n <div class={`chip-item chip-item--${this.chipState.size} \n chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n tabIndex={0}\n onClick={() => {this.handleItemClick()}}\n onKeyDown={(e) => {this.handleItemKeyDown(e)}}\n role=\"option\"\n aria-selected={this.selected.toString()}> \n {/* Checkbox; renders only in 'multi' variant. */}\n { \n this.chipState.variant === 'multi' &&\n <ifx-checkbox checked={this.selected}\n tabIndex={-1} \n size='s'>\n </ifx-checkbox>\n }\n\n <div class='chip-item__label'> <slot /> </div>\n\n {/* Selected indicator only visible in 'single' variant. */}\n <div class='chip-item__selected-indicator'> \n <ifx-icon icon='check-16'> </ifx-icon> \n </div>\n\n </div>\n );\n}\n}"],"version":3}
1
+ {"file":"p-059709d0.js","mappings":"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","names":[],"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\";\n@use \"../../../global/font.scss\";\n\n.chip-item {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n \n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n \n user-select: none;\n \n transition: all 100ms ease;\n transition-property: background, color;\n \n &:hover {\n cursor: pointer;\n \n background-color: tokens.$ifxColorEngineering200;\n }\n \n &:active {\n background-color: tokens.$ifxColorEngineering300;\n }\n\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500;\n }\n \n &.chip-item--large {\n font: tokens.$ifxBodyBody03;\n }\n \n &.chip-item--small {\n font: tokens.$ifxBodyBody04;\n }\n\n &.chip-item--selected {\n color: tokens.$ifxColorOcean500;\n\n .chip-item__selected-indicator {\n display: block;\n }\n }\n}\n\n.chip-item__selected-indicator {\n display: none;\n \n margin-left: auto;\n}\n\n","import { h,\n Component,\n Element,\n Event,\n EventEmitter, \n Listen,\n Prop, \n Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n if (this.chipState.variant === 'single') {\n const target = event.target as HTMLIfxChipItemElement;\n /* Also making sure chip items are from the same group (parent) while unselecting. */\n if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n this.selected = false;\n }\n }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n /* Do not emit if ChipState does not allow. */\n if (this.chipState.emitIfxChipItemSelect){\n this.emitIfxChipItemSelectEvent();\n } else {\n this.chipState.emitIfxChipItemSelect = true;\n }\n }\n} \n\ngetItemLabel(): string {\n return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n this.selected = !this.selected;\n}\n \n\nemitIfxChipItemSelectEvent(emitIfxChange: boolean = true) {\n this.ifxChipItemSelect.emit({ emitIfxChange: emitIfxChange,\n key: this.chipState.key,\n label: this.getItemLabel(), \n selected: this.selected, \n value: this.value });\n}\n\nhandleItemClick() {\n this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n if (event.code === 'Enter' || event.code === 'Space') {\n this.toggleItemSelection();\n }\n}\n\nhandleSelectedState() {\n if (this.selected) {\n this.emitIfxChipItemSelectEvent(false);\n }\n}\n\n\ncomponentWillLoad() {\n /* Propogating the selected state to the Chip (Parent) component if it is set. */\n this.handleSelectedState();\n}\n\nrender() {\n return (\n <div class={`chip-item chip-item--${this.chipState.size} \n chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n tabIndex={0}\n onClick={() => {this.handleItemClick()}}\n onKeyDown={(e) => {this.handleItemKeyDown(e)}}\n role=\"option\"\n aria-selected={this.selected.toString()}> \n {/* Checkbox; renders only in 'multi' variant. */}\n { \n this.chipState.variant === 'multi' &&\n <ifx-checkbox checked={this.selected}\n tabIndex={-1} \n size='s'>\n </ifx-checkbox>\n }\n\n <div class='chip-item__label'> <slot /> </div>\n\n {/* Selected indicator only visible in 'single' variant. */}\n <div class='chip-item__selected-indicator'> \n <ifx-icon icon='check-16'> </ifx-icon> \n </div>\n\n </div>\n );\n}\n}"],"version":3}
@@ -1,7 +1,7 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
2
- import { d as defineCustomElement$3 } from './p-d8654e8a.js';
2
+ import { d as defineCustomElement$3 } from './p-a9b659df.js';
3
3
  import { d as defineCustomElement$2 } from './p-68016aea.js';
4
- import { d as defineCustomElement$1 } from './p-6b8238fd.js';
4
+ import { d as defineCustomElement$1 } from './p-88962325.js';
5
5
 
6
6
  const multiselectCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.ifx-multiselect-container{position:relative;box-sizing:border-box;font-family:var(--ifx-font-family)}.ifx-multiselect-container.small-select{height:36px}.ifx-multiselect-container.medium-select{height:40px}.ifx-multiselect-container:hover{cursor:pointer}.ifx-multiselect-container .ifx-label-wrapper{font-size:1rem;line-height:1.5rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-error-message-wrapper{color:#CD002F;font-size:0.75rem;line-height:1rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-multiselect-wrapper{background-color:#FFFFFF;box-sizing:border-box;position:relative;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;width:100%;font-weight:400;font-style:normal}.ifx-multiselect-container .ifx-multiselect-wrapper.small-select{height:36px;padding:8px 12px;font-size:0.875rem;line-height:1.25rem}.ifx-multiselect-container .ifx-multiselect-wrapper.medium-select{height:40px;padding:8px 16px;font-size:1rem;line-height:1.5rem}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible{outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active){outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active)::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:2px}.ifx-multiselect-container .ifx-multiselect-wrapper.disabled{background:#EEEDED;color:#575352;border-color:#575352;cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-multiselect-container .ifx-multiselect-wrapper.error{border-color:#CD002F}.ifx-multiselect-container .ifx-multiselect-wrapper:hover:not(.focus,:focus){border-color:#575352}.ifx-multiselect-container .ifx-multiselect-wrapper.active{border-color:#0A8276 !important}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-up{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-down{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-up{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-down{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.is-flipped .ifx-multiselect-dropdown-menu{top:auto;bottom:100%}.ifx-multiselect-container .ifx-multiselect-input{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ifx-multiselect-container .ifx-multiselect-input.placeholder{opacity:0.5}.ifx-multiselect-container .ifx-multiselect-icon-container{margin-left:auto;align-items:center;display:flex}.ifx-multiselect-container .ifx-clear-button{display:flex}.ifx-multiselect-container .ifx-clear-button.hide{display:none}.ifx-multiselect-container .ifx-multiselect-dropdown-menu{position:absolute;top:100%;left:0;width:100%;margin-top:2px;background-color:#fff;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1);max-height:300px;overflow-y:auto;z-index:1000}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input{position:sticky;top:0;left:0;z-index:1;width:100%;padding:8px 16px;font-size:1rem;line-height:1.5rem;font-style:normal;font-weight:400;box-sizing:border-box;background-color:#FFFFFF;border:none;border-bottom:1px solid #8D8786}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input:focus{outline:none;border:1px solid #0A8276}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input::placeholder{color:#999}.ifx-multiselect-container .option{position:relative;padding:8px 16px;gap:8px;align-items:center;display:flex;font-style:normal;font-weight:400}.ifx-multiselect-container .option.small-select{font-size:0.875rem;line-height:1.25rem}.ifx-multiselect-container .option.medium-select{font-size:1rem;line-height:1.5rem}.ifx-multiselect-container .option:hover{background-color:#EEEDED}.ifx-multiselect-container .option:focus:not(.disabled){background-color:#BFBBBB;outline:none}.ifx-multiselect-container .option.is-highlighted{background-color:#EEEDED}.ifx-multiselect-container .option.sub-option{padding-left:30px;}.ifx-multiselect-container .option.disabled:hover{cursor:default}.ifx-multiselect-container .option label{cursor:inherit}.select-all-wrapper{padding-top:8px}";
7
7
  const IfxMultiselectStyle0 = multiselectCss;
@@ -595,4 +595,4 @@ function defineCustomElement() {
595
595
 
596
596
  export { Multiselect as M, defineCustomElement as d };
597
597
 
598
- //# sourceMappingURL=p-b9c43f3f.js.map
598
+ //# sourceMappingURL=p-08e3be43.js.map