npm - @infineon/infineon-design-system-stencil - Versions diffs - 39.4.4-canary.0 → 39.5.0 - Mend

@infineon/infineon-design-system-stencil 39.4.4-canary.0 → 39.5.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 (1210) hide show

package/dist/cjs/ifx-breadcrumb-item.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-breadcrumb-item.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/breadcrumb/breadcrumb-item.scss?tag=ifx-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.breadcrumb-parent {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n padding: 0px;\r\n gap: tokens.$ifxSpace150;\r\n min-height: tokens.$ifxSize300;\r\n justify-content: center;\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n\r\n & .breadcrumb-wrapper {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n padding: 0px;\r\n gap: tokens.$ifxSpace100;\r\n position: relative;\r\n\r\n & .dropdown-menu {\r\n display: none;\r\n position: absolute;\r\n top: 20px;\r\n\r\n &.open {\r\n display: block;\r\n }\r\n }\r\n\r\n & a {\r\n text-decoration: none;\r\n color: tokens.$ifxColorBaseBlack;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n font-style: normal;\r\n font-weight: 400;\r\n font-size: tokens.$ifxFontSizeS;\r\n line-height: tokens.$ifxLineHeightS;\r\n display: flex;\r\n align-items: center;\r\n color: tokens.$ifxColorBaseBlack;\r\n flex-direction: column;\r\n justify-content: center;\r\n padding: 0px;\r\n border-bottom: 1px solid #1D1D1D;\r\n }\r\n }\r\n\r\n & .breadcrumb-divider {\r\n width: 10px;\r\n height: tokens.$ifxSize200;\r\n color: tokens.$ifxColorEngineering200;\r\n line-height: 13px;\r\n font-size: tokens.$ifxFontSizeXl;\r\n\r\n margin-right: 12px;\r\n }\r\n}","import { Component, h, Element, State, Listen } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-breadcrumb-item',\r\n styleUrl: 'breadcrumb-item.scss',\r\n shadow: true,\r\n})\r\nexport class BreadcrumbItem {\r\n\r\n @State() isLastItem: boolean = false;\r\n @Element() el;\r\n private emittedElement: HTMLElement;\r\n @State() uniqueId: string;\r\n @State() hasDropdownMenu: boolean = false;\r\n\r\n @Listen('mousedown', { target: 'document' })\r\n handleOutsideClick(event: MouseEvent) {\r\n const path = event.composedPath();\r\n if (!path.includes(this.el)) {\r\n this.closeDropdownMenu();\r\n }\r\n }\r\n\r\n @Listen('keydown')\r\n handleKeyDown(ev: KeyboardEvent) {\r\n if (ev.key === 'Enter' \|\| ev.key === ' ') {\r\n this.toggleDropdownMenu();\r\n } else if (ev.key === 'Escape') {\r\n this.closeDropdownMenu();\r\n }\r\n }\r\n\r\n getDropdownMenu() {\r\n const dropdownMenu = this.el.shadowRoot.querySelector('.dropdown-menu');\r\n return dropdownMenu\r\n }\r\n\r\n @Listen('breadcrumbMenuIconWrapper')\r\n menuWrapperEventReEmitter(event: CustomEvent<HTMLElement>) { \r\n this.emittedElement = event.detail;\r\n }\r\n\r\n getMenuIconWrapper(): HTMLElement \| undefined {\r\n return this.emittedElement;\r\n }\r\n\r\n handleClassList(el, type, className) {\r\n el.classList[type](className)\r\n }\r\n\r\n closeDropdownMenu() {\r\n if(this.hasDropdownMenu) {\r\n const dropdownMenu = this.getDropdownMenu()\r\n const menuWrapper = this.getMenuIconWrapper()\r\n this.handleClassList(dropdownMenu, 'remove', 'open')\r\n this.handleClassList(menuWrapper, 'remove', 'show')\r\n }\r\n }\r\n\r\n toggleDropdownMenu() { \r\n if(this.hasDropdownMenu) {\r\n const dropdownMenu = this.getDropdownMenu()\r\n const menuWrapper = this.getMenuIconWrapper()\r\n this.handleClassList(dropdownMenu, 'toggle', 'open')\r\n this.handleClassList(menuWrapper, 'toggle', 'show')\r\n }\r\n }\r\n\r\n isDropdownMenuOpen(): boolean {\r\n const dropdownMenu = this.getDropdownMenu()\r\n return this.hasDropdownMenu && dropdownMenu && dropdownMenu.classList.contains('open')\r\n }\r\n\r\n handleLastItem() { \r\n const breadcrumbItems = this.el.closest('ifx-breadcrumb').querySelectorAll('ifx-breadcrumb-item')\r\n if(this.el === breadcrumbItems[breadcrumbItems.length-1]) { \r\n this.isLastItem = true;\r\n } else this.isLastItem = false;\r\n }\r\n\r\n generateUniqueId(prefix = 'id') {\r\n return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\r\n }\r\n\r\n componentWillLoad() { \r\n if (!this.uniqueId) {\r\n this.uniqueId = this.generateUniqueId('breadcrumb-dropdown');\r\n }\r\n this.handleLastItem()\r\n }\r\n\r\n componentDidUpdate() {\r\n this.handleLastItem()\r\n }\r\n\r\n componentWillRender() { \r\n this.setHasDropdownMenuState()\r\n }\r\n\r\n setHasDropdownMenuState() { \r\n const dropdownMenu = this.getIfxDropdownMenuComponent();\r\n if(dropdownMenu) {\r\n this.hasDropdownMenu = !!dropdownMenu;\r\n }\r\n }\r\n\r\n getIfxDropdownMenuComponent() { \r\n const dropdownMenu = this.el.querySelector('ifx-dropdown-menu');\r\n return dropdownMenu;\r\n }\r\n\r\n componentDidLoad() { \r\n const dropdownMenu = this.getIfxDropdownMenuComponent();\r\n\r\n if(!this.hasDropdownMenu) { \r\n const iconMenuWrapper = this.getMenuIconWrapper();\r\n this.handleClassList(iconMenuWrapper, 'toggle', 'hide');\r\n } else { \r\n dropdownMenu.isOpen = true;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <li class='breadcrumb-parent' aria-current={`${this.isLastItem ? 'page' : \"\"}`}>\r\n <li role=\"button\" tabindex={this.hasDropdownMenu ? 0 : -1} class=\"breadcrumb-wrapper\" onClick={() => this.toggleDropdownMenu()} aria-controls={this.uniqueId} aria-haspopup=\"menu\" aria-label=\"Toggle dropdown menu\">\r\n <slot name='label'/>\r\n <div id={this.uniqueId} class=\"dropdown-menu\" aria-expanded={this.isDropdownMenuOpen()} aria-label=\"Dropdown menu\">\r\n <slot />\r\n </div>\r\n </li>\r\n {!this.isLastItem && <span class=\"breadcrumb-divider\" aria-hidden=\"true\">/</span>}\r\n </li>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"ifx-breadcrumb-item.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/breadcrumb/breadcrumb-item.scss?tag=ifx-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-parent {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace150;\n min-height: tokens.$ifxSize300;\n justify-content: center;\n\n &:hover {\n cursor: pointer;\n }\n\n & .breadcrumb-wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n position: relative;\n\n & .dropdown-menu {\n display: none;\n position: absolute;\n top: 20px;\n\n &.open {\n display: block;\n }\n }\n\n & a {\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n display: flex;\n align-items: center;\n color: tokens.$ifxColorBaseBlack;\n flex-direction: column;\n justify-content: center;\n padding: 0px;\n border-bottom: 1px solid #1D1D1D;\n }\n }\n\n & .breadcrumb-divider {\n width: 10px;\n height: tokens.$ifxSize200;\n color: tokens.$ifxColorEngineering200;\n line-height: 13px;\n font-size: tokens.$ifxFontSizeXl;\n\n margin-right: 12px;\n }\n}","import { Component, h, Element, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-breadcrumb-item',\n styleUrl: 'breadcrumb-item.scss',\n shadow: true,\n})\nexport class BreadcrumbItem {\n\n @State() isLastItem: boolean = false;\n @Element() el;\n private emittedElement: HTMLElement;\n @State() uniqueId: string;\n @State() hasDropdownMenu: boolean = false;\n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n if (!path.includes(this.el)) {\n this.closeDropdownMenu();\n }\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Enter' \|\| ev.key === ' ') {\n this.toggleDropdownMenu();\n } else if (ev.key === 'Escape') {\n this.closeDropdownMenu();\n }\n }\n\n getDropdownMenu() {\n const dropdownMenu = this.el.shadowRoot.querySelector('.dropdown-menu');\n return dropdownMenu\n }\n\n @Listen('breadcrumbMenuIconWrapper')\n menuWrapperEventReEmitter(event: CustomEvent<HTMLElement>) { \n this.emittedElement = event.detail;\n }\n\n getMenuIconWrapper(): HTMLElement \| undefined {\n return this.emittedElement;\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n }\n\n closeDropdownMenu() {\n if(this.hasDropdownMenu) {\n const dropdownMenu = this.getDropdownMenu()\n const menuWrapper = this.getMenuIconWrapper()\n this.handleClassList(dropdownMenu, 'remove', 'open')\n this.handleClassList(menuWrapper, 'remove', 'show')\n }\n }\n\n toggleDropdownMenu() { \n if(this.hasDropdownMenu) {\n const dropdownMenu = this.getDropdownMenu()\n const menuWrapper = this.getMenuIconWrapper()\n this.handleClassList(dropdownMenu, 'toggle', 'open')\n this.handleClassList(menuWrapper, 'toggle', 'show')\n }\n }\n\n isDropdownMenuOpen(): boolean {\n const dropdownMenu = this.getDropdownMenu()\n return this.hasDropdownMenu && dropdownMenu && dropdownMenu.classList.contains('open')\n }\n\n handleLastItem() { \n const breadcrumbItems = this.el.closest('ifx-breadcrumb').querySelectorAll('ifx-breadcrumb-item')\n if(this.el === breadcrumbItems[breadcrumbItems.length-1]) { \n this.isLastItem = true;\n } else this.isLastItem = false;\n }\n\n generateUniqueId(prefix = 'id') {\n return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n }\n\n componentWillLoad() { \n if (!this.uniqueId) {\n this.uniqueId = this.generateUniqueId('breadcrumb-dropdown');\n }\n this.handleLastItem()\n }\n\n componentDidUpdate() {\n this.handleLastItem()\n }\n\n componentWillRender() { \n this.setHasDropdownMenuState()\n }\n\n setHasDropdownMenuState() { \n const dropdownMenu = this.getIfxDropdownMenuComponent();\n if(dropdownMenu) {\n this.hasDropdownMenu = !!dropdownMenu;\n }\n }\n\n getIfxDropdownMenuComponent() { \n const dropdownMenu = this.el.querySelector('ifx-dropdown-menu');\n return dropdownMenu;\n }\n\n componentDidLoad() { \n const dropdownMenu = this.getIfxDropdownMenuComponent();\n\n if(!this.hasDropdownMenu) { \n const iconMenuWrapper = this.getMenuIconWrapper();\n this.handleClassList(iconMenuWrapper, 'toggle', 'hide');\n } else { \n dropdownMenu.isOpen = true;\n }\n }\n\n render() {\n return (\n <li class='breadcrumb-parent' aria-current={`${this.isLastItem ? 'page' : \"\"}`}>\n <li role=\"button\" tabindex={this.hasDropdownMenu ? 0 : -1} class=\"breadcrumb-wrapper\" onClick={() => this.toggleDropdownMenu()} aria-controls={this.uniqueId} aria-haspopup=\"menu\" aria-label=\"Toggle dropdown menu\">\n <slot name='label'/>\n <div id={this.uniqueId} class=\"dropdown-menu\" aria-expanded={this.isDropdownMenuOpen()} aria-label=\"Dropdown menu\">\n <slot />\n </div>\n </li>\n {!this.isLastItem && <span class=\"breadcrumb-divider\" aria-hidden=\"true\">/</span>}\n </li>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ifx-breadcrumb-item.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-breadcrumb-item.entry.cjs.js","sources":["src/components/breadcrumb/breadcrumb-item.scss?tag=ifx-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.breadcrumb-parent {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n padding: 0px;\r\n gap: tokens.$ifxSpace150;\r\n min-height: tokens.$ifxSize300;\r\n justify-content: center;\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n\r\n & .breadcrumb-wrapper {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n padding: 0px;\r\n gap: tokens.$ifxSpace100;\r\n position: relative;\r\n\r\n & .dropdown-menu {\r\n display: none;\r\n position: absolute;\r\n top: 20px;\r\n\r\n &.open {\r\n display: block;\r\n }\r\n }\r\n\r\n & a {\r\n text-decoration: none;\r\n color: tokens.$ifxColorBaseBlack;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n font-style: normal;\r\n font-weight: 400;\r\n font-size: tokens.$ifxFontSizeS;\r\n line-height: tokens.$ifxLineHeightS;\r\n display: flex;\r\n align-items: center;\r\n color: tokens.$ifxColorBaseBlack;\r\n flex-direction: column;\r\n justify-content: center;\r\n padding: 0px;\r\n border-bottom: 1px solid #1D1D1D;\r\n }\r\n }\r\n\r\n & .breadcrumb-divider {\r\n width: 10px;\r\n height: tokens.$ifxSize200;\r\n color: tokens.$ifxColorEngineering200;\r\n line-height: 13px;\r\n font-size: tokens.$ifxFontSizeXl;\r\n\r\n margin-right: 12px;\r\n }\r\n}","import { Component, h, Element, State, Listen } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-breadcrumb-item',\r\n styleUrl: 'breadcrumb-item.scss',\r\n shadow: true,\r\n})\r\nexport class BreadcrumbItem {\r\n\r\n @State() isLastItem: boolean = false;\r\n @Element() el;\r\n private emittedElement: HTMLElement;\r\n @State() uniqueId: string;\r\n @State() hasDropdownMenu: boolean = false;\r\n\r\n @Listen('mousedown', { target: 'document' })\r\n handleOutsideClick(event: MouseEvent) {\r\n const path = event.composedPath();\r\n if (!path.includes(this.el)) {\r\n this.closeDropdownMenu();\r\n }\r\n }\r\n\r\n @Listen('keydown')\r\n handleKeyDown(ev: KeyboardEvent) {\r\n if (ev.key === 'Enter' \|\| ev.key === ' ') {\r\n this.toggleDropdownMenu();\r\n } else if (ev.key === 'Escape') {\r\n this.closeDropdownMenu();\r\n }\r\n }\r\n\r\n getDropdownMenu() {\r\n const dropdownMenu = this.el.shadowRoot.querySelector('.dropdown-menu');\r\n return dropdownMenu\r\n }\r\n\r\n @Listen('breadcrumbMenuIconWrapper')\r\n menuWrapperEventReEmitter(event: CustomEvent<HTMLElement>) { \r\n this.emittedElement = event.detail;\r\n }\r\n\r\n getMenuIconWrapper(): HTMLElement \| undefined {\r\n return this.emittedElement;\r\n }\r\n\r\n handleClassList(el, type, className) {\r\n el.classList[type](className)\r\n }\r\n\r\n closeDropdownMenu() {\r\n if(this.hasDropdownMenu) {\r\n const dropdownMenu = this.getDropdownMenu()\r\n const menuWrapper = this.getMenuIconWrapper()\r\n this.handleClassList(dropdownMenu, 'remove', 'open')\r\n this.handleClassList(menuWrapper, 'remove', 'show')\r\n }\r\n }\r\n\r\n toggleDropdownMenu() { \r\n if(this.hasDropdownMenu) {\r\n const dropdownMenu = this.getDropdownMenu()\r\n const menuWrapper = this.getMenuIconWrapper()\r\n this.handleClassList(dropdownMenu, 'toggle', 'open')\r\n this.handleClassList(menuWrapper, 'toggle', 'show')\r\n }\r\n }\r\n\r\n isDropdownMenuOpen(): boolean {\r\n const dropdownMenu = this.getDropdownMenu()\r\n return this.hasDropdownMenu && dropdownMenu && dropdownMenu.classList.contains('open')\r\n }\r\n\r\n handleLastItem() { \r\n const breadcrumbItems = this.el.closest('ifx-breadcrumb').querySelectorAll('ifx-breadcrumb-item')\r\n if(this.el === breadcrumbItems[breadcrumbItems.length-1]) { \r\n this.isLastItem = true;\r\n } else this.isLastItem = false;\r\n }\r\n\r\n generateUniqueId(prefix = 'id') {\r\n return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\r\n }\r\n\r\n componentWillLoad() { \r\n if (!this.uniqueId) {\r\n this.uniqueId = this.generateUniqueId('breadcrumb-dropdown');\r\n }\r\n this.handleLastItem()\r\n }\r\n\r\n componentDidUpdate() {\r\n this.handleLastItem()\r\n }\r\n\r\n componentWillRender() { \r\n this.setHasDropdownMenuState()\r\n }\r\n\r\n setHasDropdownMenuState() { \r\n const dropdownMenu = this.getIfxDropdownMenuComponent();\r\n if(dropdownMenu) {\r\n this.hasDropdownMenu = !!dropdownMenu;\r\n }\r\n }\r\n\r\n getIfxDropdownMenuComponent() { \r\n const dropdownMenu = this.el.querySelector('ifx-dropdown-menu');\r\n return dropdownMenu;\r\n }\r\n\r\n componentDidLoad() { \r\n const dropdownMenu = this.getIfxDropdownMenuComponent();\r\n\r\n if(!this.hasDropdownMenu) { \r\n const iconMenuWrapper = this.getMenuIconWrapper();\r\n this.handleClassList(iconMenuWrapper, 'toggle', 'hide');\r\n } else { \r\n dropdownMenu.isOpen = true;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <li class='breadcrumb-parent' aria-current={`${this.isLastItem ? 'page' : \"\"}`}>\r\n <li role=\"button\" tabindex={this.hasDropdownMenu ? 0 : -1} class=\"breadcrumb-wrapper\" onClick={() => this.toggleDropdownMenu()} aria-controls={this.uniqueId} aria-haspopup=\"menu\" aria-label=\"Toggle dropdown menu\">\r\n <slot name='label'/>\r\n <div id={this.uniqueId} class=\"dropdown-menu\" aria-expanded={this.isDropdownMenuOpen()} aria-label=\"Dropdown menu\">\r\n <slot />\r\n </div>\r\n </li>\r\n {!this.isLastItem && <span class=\"breadcrumb-divider\" aria-hidden=\"true\">/</span>}\r\n </li>\r\n );\r\n }\r\n}\r\n"],"names":["h"],"mappings":"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"}
1	+ {"version":3,"file":"ifx-breadcrumb-item.entry.cjs.js","sources":["src/components/breadcrumb/breadcrumb-item.scss?tag=ifx-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-parent {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace150;\n min-height: tokens.$ifxSize300;\n justify-content: center;\n\n &:hover {\n cursor: pointer;\n }\n\n & .breadcrumb-wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n position: relative;\n\n & .dropdown-menu {\n display: none;\n position: absolute;\n top: 20px;\n\n &.open {\n display: block;\n }\n }\n\n & a {\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n display: flex;\n align-items: center;\n color: tokens.$ifxColorBaseBlack;\n flex-direction: column;\n justify-content: center;\n padding: 0px;\n border-bottom: 1px solid #1D1D1D;\n }\n }\n\n & .breadcrumb-divider {\n width: 10px;\n height: tokens.$ifxSize200;\n color: tokens.$ifxColorEngineering200;\n line-height: 13px;\n font-size: tokens.$ifxFontSizeXl;\n\n margin-right: 12px;\n }\n}","import { Component, h, Element, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-breadcrumb-item',\n styleUrl: 'breadcrumb-item.scss',\n shadow: true,\n})\nexport class BreadcrumbItem {\n\n @State() isLastItem: boolean = false;\n @Element() el;\n private emittedElement: HTMLElement;\n @State() uniqueId: string;\n @State() hasDropdownMenu: boolean = false;\n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n if (!path.includes(this.el)) {\n this.closeDropdownMenu();\n }\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Enter' \|\| ev.key === ' ') {\n this.toggleDropdownMenu();\n } else if (ev.key === 'Escape') {\n this.closeDropdownMenu();\n }\n }\n\n getDropdownMenu() {\n const dropdownMenu = this.el.shadowRoot.querySelector('.dropdown-menu');\n return dropdownMenu\n }\n\n @Listen('breadcrumbMenuIconWrapper')\n menuWrapperEventReEmitter(event: CustomEvent<HTMLElement>) { \n this.emittedElement = event.detail;\n }\n\n getMenuIconWrapper(): HTMLElement \| undefined {\n return this.emittedElement;\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n }\n\n closeDropdownMenu() {\n if(this.hasDropdownMenu) {\n const dropdownMenu = this.getDropdownMenu()\n const menuWrapper = this.getMenuIconWrapper()\n this.handleClassList(dropdownMenu, 'remove', 'open')\n this.handleClassList(menuWrapper, 'remove', 'show')\n }\n }\n\n toggleDropdownMenu() { \n if(this.hasDropdownMenu) {\n const dropdownMenu = this.getDropdownMenu()\n const menuWrapper = this.getMenuIconWrapper()\n this.handleClassList(dropdownMenu, 'toggle', 'open')\n this.handleClassList(menuWrapper, 'toggle', 'show')\n }\n }\n\n isDropdownMenuOpen(): boolean {\n const dropdownMenu = this.getDropdownMenu()\n return this.hasDropdownMenu && dropdownMenu && dropdownMenu.classList.contains('open')\n }\n\n handleLastItem() { \n const breadcrumbItems = this.el.closest('ifx-breadcrumb').querySelectorAll('ifx-breadcrumb-item')\n if(this.el === breadcrumbItems[breadcrumbItems.length-1]) { \n this.isLastItem = true;\n } else this.isLastItem = false;\n }\n\n generateUniqueId(prefix = 'id') {\n return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n }\n\n componentWillLoad() { \n if (!this.uniqueId) {\n this.uniqueId = this.generateUniqueId('breadcrumb-dropdown');\n }\n this.handleLastItem()\n }\n\n componentDidUpdate() {\n this.handleLastItem()\n }\n\n componentWillRender() { \n this.setHasDropdownMenuState()\n }\n\n setHasDropdownMenuState() { \n const dropdownMenu = this.getIfxDropdownMenuComponent();\n if(dropdownMenu) {\n this.hasDropdownMenu = !!dropdownMenu;\n }\n }\n\n getIfxDropdownMenuComponent() { \n const dropdownMenu = this.el.querySelector('ifx-dropdown-menu');\n return dropdownMenu;\n }\n\n componentDidLoad() { \n const dropdownMenu = this.getIfxDropdownMenuComponent();\n\n if(!this.hasDropdownMenu) { \n const iconMenuWrapper = this.getMenuIconWrapper();\n this.handleClassList(iconMenuWrapper, 'toggle', 'hide');\n } else { \n dropdownMenu.isOpen = true;\n }\n }\n\n render() {\n return (\n <li class='breadcrumb-parent' aria-current={`${this.isLastItem ? 'page' : \"\"}`}>\n <li role=\"button\" tabindex={this.hasDropdownMenu ? 0 : -1} class=\"breadcrumb-wrapper\" onClick={() => this.toggleDropdownMenu()} aria-controls={this.uniqueId} aria-haspopup=\"menu\" aria-label=\"Toggle dropdown menu\">\n <slot name='label'/>\n <div id={this.uniqueId} class=\"dropdown-menu\" aria-expanded={this.isDropdownMenuOpen()} aria-label=\"Dropdown menu\">\n <slot />\n </div>\n </li>\n {!this.isLastItem && <span class=\"breadcrumb-divider\" aria-hidden=\"true\">/</span>}\n </li>\n );\n }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,o9BAAo9B;;MCOj+B,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOW,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAI3B,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AA0H1C;AAvHC,IAAA,kBAAkB,CAAC,KAAiB,EAAA;AAClC,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE;QACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YAC3B,IAAI,CAAC,iBAAiB,EAAE;;;AAK5B,IAAA,aAAa,CAAC,EAAiB,EAAA;AAC7B,QAAA,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE;YACxC,IAAI,CAAC,kBAAkB,EAAE;;AACpB,aAAA,IAAI,EAAE,CAAC,GAAG,KAAK,QAAQ,EAAE;YAC9B,IAAI,CAAC,iBAAiB,EAAE;;;IAI5B,eAAe,GAAA;AACb,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAC;AACvE,QAAA,OAAO,YAAY;;AAIrB,IAAA,yBAAyB,CAAC,KAA+B,EAAA;AACvD,QAAA,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM;;IAGpC,kBAAkB,GAAA;QAChB,OAAO,IAAI,CAAC,cAAc;;AAG5B,IAAA,eAAe,CAAC,EAAE,EAAE,IAAI,EAAE,SAAS,EAAA;QACjC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC;;IAG/B,iBAAiB,GAAA;AACf,QAAA,IAAG,IAAI,CAAC,eAAe,EAAE;AACvB,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE;AAC3C,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,EAAE;YAC7C,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,QAAQ,EAAE,MAAM,CAAC;YACpD,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC;;;IAIvD,kBAAkB,GAAA;AAChB,QAAA,IAAG,IAAI,CAAC,eAAe,EAAE;AACvB,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE;AAC3C,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,EAAE;YAC7C,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,QAAQ,EAAE,MAAM,CAAC;YACpD,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC;;;IAIvD,kBAAkB,GAAA;AAChB,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE;AAC3C,QAAA,OAAO,IAAI,CAAC,eAAe,IAAI,YAAY,IAAI,YAAY,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC;;IAGxF,cAAc,GAAA;AACZ,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,qBAAqB,CAAC;AACjG,QAAA,IAAG,IAAI,CAAC,EAAE,KAAK,eAAe,CAAC,eAAe,CAAC,MAAM,GAAC,CAAC,CAAC,EAAE;AACxD,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI;;;AACjB,YAAA,IAAI,CAAC,UAAU,GAAG,KAAK;;IAGhC,gBAAgB,CAAC,MAAM,GAAG,IAAI,EAAA;QAC5B,OAAO,CAAA,EAAG,MAAM,CAAI,CAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE;;IAGlE,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,qBAAqB,CAAC;;QAE9D,IAAI,CAAC,cAAc,EAAE;;IAGvB,kBAAkB,GAAA;QAChB,IAAI,CAAC,cAAc,EAAE;;IAGvB,mBAAmB,GAAA;QACjB,IAAI,CAAC,uBAAuB,EAAE;;IAGhC,uBAAuB,GAAA;AACrB,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,2BAA2B,EAAE;QACvD,IAAG,YAAY,EAAE;AACf,YAAA,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,YAAY;;;IAIzC,2BAA2B,GAAA;QACzB,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC;AAC/D,QAAA,OAAO,YAAY;;IAGrB,gBAAgB,GAAA;AACd,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,2BAA2B,EAAE;AAEvD,QAAA,IAAG,CAAC,IAAI,CAAC,eAAe,EAAE;AACxB,YAAA,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE;YACjD,IAAI,CAAC,eAAe,CAAC,eAAe,EAAE,QAAQ,EAAE,MAAM,CAAC;;aAClD;AACL,YAAA,YAAY,CAAC,MAAM,GAAG,IAAI;;;IAI9B,MAAM,GAAA;AACJ,QAAA,QACEA,OAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,cAAA,EAAe,CAAA,EAAG,IAAI,CAAC,UAAU,GAAG,MAAM,GAAG,EAAE,EAAE,EAAA,EAC7EA,OAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,GAAG,CAAC,GAAG,EAAE,EAAE,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE,mBAAiB,IAAI,CAAC,QAAQ,EAAgB,eAAA,EAAA,MAAM,gBAAY,sBAAsB,EAAA,EACjNA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAE,CAAA,EACpBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,kBAAkB,EAAE,gBAAa,eAAe,EAAA,EAChHA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACH,EACJ,CAAC,IAAI,CAAC,UAAU,IAAIA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAa,aAAA,EAAA,MAAM,EAAS,EAAA,GAAA,CAAA,CAC9E;;;;;;;;"}

package/dist/cjs/ifx-breadcrumb.cjs.entry.js CHANGED Viewed

@@ -40,7 +40,7 @@ const Breadcrumb = class {
         }
     }
     render() {
-        return (index.h("nav", { key: '1ac077037d44b72f6a284ace72dd43bad0b3ebeb', "aria-label": "Page navigation breadcrumb" }, index.h("ol", { key: '7192480afed229bee5c54e4d6a3454ca3eb4636f', class: "breadcrumb" }, index.h("slot", { key: 'fa901a096a659d87f3ce0d6f1c366f9e874f4e22' }))));
+        return (index.h("nav", { key: 'edf76204e96413a39d1a543735bbb0a2530d8348', "aria-label": "Page navigation breadcrumb" }, index.h("ol", { key: '1b64075586076eb4f6ca73cf41202a52a180d1c3', class: "breadcrumb" }, index.h("slot", { key: '352a0be161eb7b0ab45bdbbb59d023bd9da6ff73' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ifx-breadcrumb.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-breadcrumb.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,sPAAsP;;MCU/P,UAAU,GAAA,MAAA;;;;AAGrB,IAAA,MAAM,gBAAgB,GAAA;QACnB,IAAG,CAACA,+BAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACpC,YAAA,MAAM,SAAS,GAAGC,kCAAe,EAAE;AACnC,YAAAC,iCAAc,CAAC,gBAAgB,EAAE,MAAM,SAAS,CAAC;;QAEnD,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU;AAC7C,QAAA,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC;;AAGvC,IAAA,+BAA+B,CAAC,OAAoB,EAAA;QAC1D,IAAI,CAAC,OAAO,EAAE;AACZ,YAAA,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC;YAClC;;QAGF,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC;QAC1C,IAAG,IAAI,EAAE;AACP,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE;AAE1C,YAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAC7C,gBAAA,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC;AAC7B,gBAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE;oBAC3C,MAAM,cAAc,GAAG,IAAoC;oBAC3D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,2BAA2B,CAAC;oBACrF,MAAM,kBAAkB,GAAG,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC;oBAC5E,IAAI,mBAAmB,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,kBAAkB,EAAE;AAClE,wBAAA,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC;;;;;;IAO7F,MAAM,GAAA;AACJ,QAAA,QACEC,gFAAgB,4BAA4B,EAAA,EAC1CA,OAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACpBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACL,CACD;;;;;;;;","names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=ifx-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n display: flex;\r\n}\r\n\r\n.breadcrumb {\r\n list-style: none;\r\n padding: 0px;\r\n margin: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n font-size: tokens.$ifxFontSizeS;\r\n align-items: flex-start;\r\n //gap: tokens.$ifxSpace200; //this is where the gap comes from\r\n\r\n}\r\n\r\n// .separator {\r\n// color: tokens.$ifxColorEngineering300;\r\n// margin: 0 16px;\r\n// }","import { Component, h, 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\n\r\n@Component({\r\n tag: 'ifx-breadcrumb',\r\n styleUrl: 'breadcrumb.scss',\r\n shadow: true\r\n})\r\nexport class Breadcrumb {\r\n @Element() el;\r\n\r\n async componentDidLoad() {\r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-breadcrumb', await framework)\r\n }\r\n const element = this.el.shadowRoot.firstChild;\r\n this.validateBreadcrumbItemStructure(element);\r\n }\r\n\r\n private validateBreadcrumbItemStructure(element: HTMLElement) {\r\n if (!element) {\r\n console.error('element not found');\r\n return;\r\n }\r\n \r\n const slot = element.querySelector('slot');\r\n if(slot) { \r\n const assignedNodes = slot.assignedNodes();\r\n \r\n for (let i = 0; i < assignedNodes.length; i++) {\r\n const node = assignedNodes[i];\r\n if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\r\n const breadcrumbItem = node as HTMLIfxBreadcrumbItemElement;\r\n const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');\r\n const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');\r\n if (breadcrumbItemLabel.hasAttribute('href') && breadcrumbDropdown) {\r\n throw new Error('ifx-breadcrumb-item cannot have both a href and a dropdown menu.');\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <nav aria-label=\"Page navigation breadcrumb\">\r\n <ol class=\"breadcrumb\">\r\n <slot />\r\n </ol>\r\n </nav>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"ifx-breadcrumb.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,sPAAsP;;MCU/P,UAAU,GAAA,MAAA;;;;AAGrB,IAAA,MAAM,gBAAgB,GAAA;QACnB,IAAG,CAACA,+BAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACpC,YAAA,MAAM,SAAS,GAAGC,kCAAe,EAAE;AACnC,YAAAC,iCAAc,CAAC,gBAAgB,EAAE,MAAM,SAAS,CAAC;;QAEnD,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU;AAC7C,QAAA,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC;;AAGvC,IAAA,+BAA+B,CAAC,OAAoB,EAAA;QAC1D,IAAI,CAAC,OAAO,EAAE;AACZ,YAAA,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC;YAClC;;QAGF,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC;QAC1C,IAAG,IAAI,EAAE;AACP,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE;AAE1C,YAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAC7C,gBAAA,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC;AAC7B,gBAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE;oBAC3C,MAAM,cAAc,GAAG,IAAoC;oBAC3D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,2BAA2B,CAAC;oBACrF,MAAM,kBAAkB,GAAG,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC;oBAC5E,IAAI,mBAAmB,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,kBAAkB,EAAE;AAClE,wBAAA,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC;;;;;;IAO7F,MAAM,GAAA;AACJ,QAAA,QACEC,gFAAgB,4BAA4B,EAAA,EAC1CA,OAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACpBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACL,CACD;;;;;;;;","names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=ifx-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n}\n\n.breadcrumb {\n list-style: none;\n padding: 0px;\n margin: 0px;\n display: flex;\n flex-direction: row;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n font-size: tokens.$ifxFontSizeS;\n align-items: flex-start;\n //gap: tokens.$ifxSpace200; //this is where the gap comes from\n\n}\n\n// .separator {\n// color: tokens.$ifxColorEngineering300;\n// margin: 0 16px;\n// }","import { Component, h, Element } 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-breadcrumb',\n styleUrl: 'breadcrumb.scss',\n shadow: true\n})\nexport class Breadcrumb {\n @Element() el;\n\n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-breadcrumb', await framework)\n }\n const element = this.el.shadowRoot.firstChild;\n this.validateBreadcrumbItemStructure(element);\n }\n\n private validateBreadcrumbItemStructure(element: HTMLElement) {\n if (!element) {\n console.error('element not found');\n return;\n }\n \n const slot = element.querySelector('slot');\n if(slot) { \n const assignedNodes = slot.assignedNodes();\n \n for (let i = 0; i < assignedNodes.length; i++) {\n const node = assignedNodes[i];\n if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\n const breadcrumbItem = node as HTMLIfxBreadcrumbItemElement;\n const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');\n const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');\n if (breadcrumbItemLabel.hasAttribute('href') && breadcrumbDropdown) {\n throw new Error('ifx-breadcrumb-item cannot have both a href and a dropdown menu.');\n }\n }\n }\n }\n }\n\n render() {\n return (\n <nav aria-label=\"Page navigation breadcrumb\">\n <ol class=\"breadcrumb\">\n <slot />\n </ol>\n </nav>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ifx-breadcrumb.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-breadcrumb.entry.cjs.js","sources":["src/components/breadcrumb/breadcrumb.scss?tag=ifx-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n display: flex;\r\n}\r\n\r\n.breadcrumb {\r\n list-style: none;\r\n padding: 0px;\r\n margin: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n font-size: tokens.$ifxFontSizeS;\r\n align-items: flex-start;\r\n //gap: tokens.$ifxSpace200; //this is where the gap comes from\r\n\r\n}\r\n\r\n// .separator {\r\n// color: tokens.$ifxColorEngineering300;\r\n// margin: 0 16px;\r\n// }","import { Component, h, 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\n\r\n@Component({\r\n tag: 'ifx-breadcrumb',\r\n styleUrl: 'breadcrumb.scss',\r\n shadow: true\r\n})\r\nexport class Breadcrumb {\r\n @Element() el;\r\n\r\n async componentDidLoad() {\r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-breadcrumb', await framework)\r\n }\r\n const element = this.el.shadowRoot.firstChild;\r\n this.validateBreadcrumbItemStructure(element);\r\n }\r\n\r\n private validateBreadcrumbItemStructure(element: HTMLElement) {\r\n if (!element) {\r\n console.error('element not found');\r\n return;\r\n }\r\n \r\n const slot = element.querySelector('slot');\r\n if(slot) { \r\n const assignedNodes = slot.assignedNodes();\r\n \r\n for (let i = 0; i < assignedNodes.length; i++) {\r\n const node = assignedNodes[i];\r\n if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\r\n const breadcrumbItem = node as HTMLIfxBreadcrumbItemElement;\r\n const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');\r\n const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');\r\n if (breadcrumbItemLabel.hasAttribute('href') && breadcrumbDropdown) {\r\n throw new Error('ifx-breadcrumb-item cannot have both a href and a dropdown menu.');\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <nav aria-label=\"Page navigation breadcrumb\">\r\n <ol class=\"breadcrumb\">\r\n <slot />\r\n </ol>\r\n </nav>\r\n );\r\n }\r\n}\r\n"],"names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,sPAAsP;;MCU/P,UAAU,GAAA,MAAA;;;;AAGrB,IAAA,MAAM,gBAAgB,GAAA;QACnB,IAAG,CAACA,+BAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACpC,YAAA,MAAM,SAAS,GAAGC,kCAAe,EAAE;AACnC,YAAAC,iCAAc,CAAC,gBAAgB,EAAE,MAAM,SAAS,CAAC;;QAEnD,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU;AAC7C,QAAA,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC;;AAGvC,IAAA,+BAA+B,CAAC,OAAoB,EAAA;QAC1D,IAAI,CAAC,OAAO,EAAE;AACZ,YAAA,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC;YAClC;;QAGF,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC;QAC1C,IAAG,IAAI,EAAE;AACP,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE;AAE1C,YAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAC7C,gBAAA,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC;AAC7B,gBAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE;oBAC3C,MAAM,cAAc,GAAG,IAAoC;oBAC3D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,2BAA2B,CAAC;oBACrF,MAAM,kBAAkB,GAAG,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC;oBAC5E,IAAI,mBAAmB,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,kBAAkB,EAAE;AAClE,wBAAA,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC;;;;;;IAO7F,MAAM,GAAA;AACJ,QAAA,QACEC,gFAAgB,4BAA4B,EAAA,EAC1CA,OAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACpBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACL,CACD;;;;;;;;"}
1	+ {"version":3,"file":"ifx-breadcrumb.entry.cjs.js","sources":["src/components/breadcrumb/breadcrumb.scss?tag=ifx-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n}\n\n.breadcrumb {\n list-style: none;\n padding: 0px;\n margin: 0px;\n display: flex;\n flex-direction: row;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n font-size: tokens.$ifxFontSizeS;\n align-items: flex-start;\n //gap: tokens.$ifxSpace200; //this is where the gap comes from\n\n}\n\n// .separator {\n// color: tokens.$ifxColorEngineering300;\n// margin: 0 16px;\n// }","import { Component, h, Element } 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-breadcrumb',\n styleUrl: 'breadcrumb.scss',\n shadow: true\n})\nexport class Breadcrumb {\n @Element() el;\n\n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-breadcrumb', await framework)\n }\n const element = this.el.shadowRoot.firstChild;\n this.validateBreadcrumbItemStructure(element);\n }\n\n private validateBreadcrumbItemStructure(element: HTMLElement) {\n if (!element) {\n console.error('element not found');\n return;\n }\n \n const slot = element.querySelector('slot');\n if(slot) { \n const assignedNodes = slot.assignedNodes();\n \n for (let i = 0; i < assignedNodes.length; i++) {\n const node = assignedNodes[i];\n if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\n const breadcrumbItem = node as HTMLIfxBreadcrumbItemElement;\n const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');\n const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');\n if (breadcrumbItemLabel.hasAttribute('href') && breadcrumbDropdown) {\n throw new Error('ifx-breadcrumb-item cannot have both a href and a dropdown menu.');\n }\n }\n }\n }\n }\n\n render() {\n return (\n <nav aria-label=\"Page navigation breadcrumb\">\n <ol class=\"breadcrumb\">\n <slot />\n </ol>\n </nav>\n );\n }\n}\n"],"names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,sPAAsP;;MCU/P,UAAU,GAAA,MAAA;;;;AAGrB,IAAA,MAAM,gBAAgB,GAAA;QACnB,IAAG,CAACA,+BAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACpC,YAAA,MAAM,SAAS,GAAGC,kCAAe,EAAE;AACnC,YAAAC,iCAAc,CAAC,gBAAgB,EAAE,MAAM,SAAS,CAAC;;QAEnD,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU;AAC7C,QAAA,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC;;AAGvC,IAAA,+BAA+B,CAAC,OAAoB,EAAA;QAC1D,IAAI,CAAC,OAAO,EAAE;AACZ,YAAA,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC;YAClC;;QAGF,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC;QAC1C,IAAG,IAAI,EAAE;AACP,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE;AAE1C,YAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAC7C,gBAAA,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC;AAC7B,gBAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE;oBAC3C,MAAM,cAAc,GAAG,IAAoC;oBAC3D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,2BAA2B,CAAC;oBACrF,MAAM,kBAAkB,GAAG,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC;oBAC5E,IAAI,mBAAmB,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,kBAAkB,EAAE;AAClE,wBAAA,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC;;;;;;IAO7F,MAAM,GAAA;AACJ,QAAA,QACEC,gFAAgB,4BAA4B,EAAA,EAC1CA,OAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACpBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACL,CACD;;;;;;;;"}

package/dist/cjs/ifx-button.cjs.entry.js CHANGED Viewed

@@ -108,7 +108,7 @@ const Button = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'a0ccc7f723475c894275ccd0ac6585165a9616a7' }, index.h("a", { key: 'e83891c14e8808caad6bb028f76072cd15397e2d', role: this.href ? 'link' : 'button', tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.internalHref : undefined, target: this.target, onClick: this.handleClick, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, onFocus: (event) => this.handleFocus(event), "aria-disabled": this.disabled ? 'true' : null, "aria-describedby": this.theme === 'danger' ? 'Dangerous action' : undefined, "aria-label": this.ariaLabel || undefined }, index.h("slot", { key: '5b38794f154c049ceba977ded7e4ada9854f6656' }))));
+        return (index.h(index.Host, { key: 'c04892373b37cea4d0ea2e539c6fde9757ba4bcf' }, index.h("a", { key: 'eb107f3b40cddc93f9e642788ba25dc77e7e5169', role: this.href ? 'link' : 'button', tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.internalHref : undefined, target: this.target, onClick: this.handleClick, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, onFocus: (event) => this.handleFocus(event), "aria-disabled": this.disabled ? 'true' : null, "aria-describedby": this.theme === 'danger' ? 'Dangerous action' : undefined, "aria-label": this.ariaLabel || undefined }, index.h("slot", { key: '77ed12eeef09759fe4fb776e012d052c2c1b3383' }))));
     }
     getVariantClass() {
         return `${this.variant}` === "secondary"

package/dist/cjs/ifx-button.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-button.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","h","Host","classNames"],"sources":["src/components/button/button.scss?tag=ifx-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n vertical-align: bottom;\r\n display: inline-flex;\r\n width: var(--bw, fit-content);\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 height: tokens.$ifxSize500;\r\n padding: 0px tokens.$ifxSpace200;\r\n gap: tokens.$ifxSpace100;\r\n color: tokens.$ifxColorBaseWhite;\r\n font-weight: tokens.$ifxFontWeightSemibold;\r\n border-radius: tokens.$ifxBorderRadius12;\r\n line-height: tokens.$ifxLineHeightM;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n font-style: normal;\r\n text-decoration: none;\r\n user-select: none;\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 width: var(--bw, fit-content);\r\n}\r\n\r\n.btn:not(.disabled) {\r\n cursor: pointer;\r\n}\r\n\r\n.btn.disabled {\r\n pointer-events: none;\r\n}\r\n\r\n.btn-default {\r\n //default variant=primary; default color=default\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.btn-secondary-default {\r\n background-color: tokens.$ifxColorBaseWhite;\r\n color: tokens.$ifxColorOcean500;\r\n border: 1px solid 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-default {\r\n background-color: tokens.$ifxColorBaseTransparent;\r\n color: tokens.$ifxColorOcean500;\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\r\n.btn-danger {\r\n color: tokens.$ifxColorBaseWhite;\r\n background-color: tokens.$ifxColorRed500;\r\n border-color: tokens.$ifxColorRed500;\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.btn-secondary-danger {\r\n background-color: tokens.$ifxColorBaseWhite;\r\n color: tokens.$ifxColorRed500;\r\n border: 1px solid tokens.$ifxColorRed500;\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-danger {\r\n //combination tertiary + danger not in design\r\n background-color: tokens.$ifxColorBaseTransparent;\r\n color: tokens.$ifxColorRed500;\r\n\r\n &:disabled,\r\n &.disabled {\r\n background-color: tokens.$ifxColorBaseWhite;\r\n color: tokens.$ifxColorEngineering300;\r\n pointer-events: none;\r\n\r\n }\r\n}\r\n\r\n.btn-inverse {\r\n color: tokens.$ifxColorOcean500;\r\n background-color: tokens.$ifxColorBaseWhite;\r\n\r\n &:disabled,\r\n &.disabled {\r\n opacity: tokens.$ifxOpacity100;\r\n background-color: tokens.$ifxColorBaseWhite;\r\n color: tokens.$ifxColorEngineering300;\r\n pointer-events: none;\r\n }\r\n}\r\n\r\n.btn-secondary-inverse {\r\n color: tokens.$ifxColorBaseWhite;\r\n border: 1px solid tokens.$ifxColorBaseWhite;\r\n\r\n &:disabled,\r\n &.disabled {\r\n border: 1px solid tokens.$ifxColorBaseWhite;\r\n color: tokens.$ifxColorBaseWhite;\r\n pointer-events: none;\r\n\r\n }\r\n}\r\n\r\n\r\n.btn-tertiary-inverse {\r\n color: tokens.$ifxColorBaseWhite;\r\n\r\n &:disabled,\r\n &.disabled {\r\n color: tokens.$ifxColorBaseWhite;\r\n opacity: tokens.$ifxOpacity100;\r\n pointer-events: none;\r\n\r\n }\r\n}\r\n\r\n.btn {\r\n & ifx-icon:empty {\r\n display: none;\r\n }\r\n\r\n &.btn-xs {\r\n font-size: tokens.$ifxFontSizeS;\r\n height: tokens.$ifxSize400;\r\n line-height: tokens.$ifxLineHeightXs;\r\n }\r\n\r\n &.btn-s {\r\n font-size: tokens.$ifxFontSizeS;\r\n height: tokens.$ifxSize450;\r\n line-height: tokens.$ifxLineHeightS;\r\n }\r\n\r\n // &.btn-m { //default\r\n // font-size: tokens.$ifxFontSizeM;\r\n // height: tokens.$ifxSize400;\r\n // line-height: tokens.$ifxLineHeightM;\r\n // }\r\n\r\n\r\n &.btn-l {\r\n font-size: tokens.$ifxFontSizeXl;\r\n height: tokens.$ifxSize600;\r\n line-height: tokens.$ifxLineHeightXl;\r\n }\r\n\r\n\r\n\r\n &.btn-default: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 }\r\n\r\n &:active,\r\n &.active {\r\n background-color: tokens.$ifxColorOcean700;\r\n }\r\n }\r\n\r\n &.btn-secondary-default: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 color: tokens.$ifxColorBaseWhite;\r\n background-color: tokens.$ifxColorOcean600;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n background-color: tokens.$ifxColorOcean700;\r\n }\r\n }\r\n\r\n &.btn-secondary:not(:disabled, .disabled) {\r\n\r\n &:hover {\r\n background-color: tokens.$ifxColorBerry500;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n background-color: tokens.$ifxColorBerry500;\r\n }\r\n }\r\n\r\n\r\n\r\n &.btn-danger: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.$ifxColorRed600;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n background-color: tokens.$ifxColorRed700;\r\n }\r\n }\r\n\r\n &.btn-secondary-danger:not(:disabled, .disabled) {\r\n\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 color: tokens.$ifxColorBaseWhite;\r\n background-color: tokens.$ifxColorRed600;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n background-color: tokens.$ifxColorRed700;\r\n }\r\n }\r\n\r\n\r\n &.btn-inverse:not(:disabled, .disabled) {\r\n &:focus:not(:active, .active) {\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\r\n }\r\n\r\n &:hover {\r\n background-color: tokens.$ifxColorEngineering200;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n background-color: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n\r\n &.btn-secondary-inverse:not(:disabled, .disabled) {\r\n &:focus:not(:active, .active) {\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\r\n }\r\n\r\n &:hover {\r\n color: tokens.$ifxColorOcean500;\r\n background-color: tokens.$ifxColorEngineering200;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n color: tokens.$ifxColorOcean500;\r\n background-color: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n\r\n\r\n\r\n &.btn-tertiary-default: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.$ifxColorOcean600;\r\n }\r\n\r\n &:hover {\r\n color: tokens.$ifxColorOcean600;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n color: tokens.$ifxColorOcean700;\r\n }\r\n\r\n\r\n }\r\n\r\n\r\n\r\n\r\n\r\n &.btn-tertiary-danger: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.$ifxColorRed600;\r\n }\r\n\r\n &:hover {\r\n color: tokens.$ifxColorRed600;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n color: tokens.$ifxColorRed700;\r\n }\r\n\r\n }\r\n\r\n\r\n &.btn-tertiary-inverse:not(:disabled, .disabled) {\r\n &:focus:not(:active, .active) {\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\r\n }\r\n\r\n &:hover {\r\n color: tokens.$ifxColorEngineering200;\r\n\r\n }\r\n\r\n &:active,\r\n &.active {\r\n color: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n}","import { Component, Prop, h, Host, Method, Element, Listen, State, Watch } 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-button',\r\n styleUrl: 'button.scss',\r\n shadow: true,\r\n})\r\nexport class Button {\r\n @Prop() variant: 'primary' \| 'secondary' \| 'tertiary' = 'primary';\r\n @Prop() theme: 'default' \| 'danger' \| 'inverse' = 'default';\r\n @Prop() size: string = 'm';\r\n @Prop() disabled: boolean = false;\r\n @State() internalHref: string;\r\n @Prop() href: string;\r\n @Prop() target: string = '_self';\r\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" = \"button\";\r\n @Prop() fullWidth: boolean = false;\r\n @Prop() ariaLabel: string \| null;\r\n @Element() el;\r\n\r\n private focusableElement: HTMLElement;\r\n private nativeButton: HTMLButtonElement \| HTMLInputElement;\r\n\r\n @Watch('href')\r\n setInternalHref(newValue: string) {\r\n this.internalHref = newValue;\r\n }\r\n\r\n @Method()\r\n async setFocus() {\r\n this.focusableElement.focus();\r\n }\r\n\r\n insertNativeButton() {\r\n this.nativeButton = document.createElement('button');\r\n this.nativeButton.type = this.type;\r\n this.nativeButton.style.display = 'none';\r\n this.el.closest('form').appendChild(this.nativeButton);\r\n }\r\n\r\n handleFormAndInternalHref() {\r\n if (this.el.closest('form')) {\r\n if (this.el.href) {\r\n this.el.internalHref = undefined;\r\n }\r\n this.insertNativeButton()\r\n } else {\r\n this.internalHref = this.href;\r\n }\r\n }\r\n\r\n handleButtonWidth() {\r\n if (this.fullWidth) {\r\n this.el.style.setProperty('--bw', '100%');\r\n } else {\r\n this.el.style.setProperty('--bw', 'fit-content');\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n this.handleFormAndInternalHref()\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-button', await framework)\r\n }\r\n }\r\n\r\n componentWillRender() {\r\n this.handleButtonWidth()\r\n }\r\n\r\n\r\n\r\n handleClick = (ev: Event) => {\r\n if (this.el.shadowRoot) {\r\n const parentForm = this.el.closest('form');\r\n if (parentForm) {\r\n ev.preventDefault();\r\n\r\n if (this.type === 'reset') {\r\n // If the button type is 'reset', manually reset all custom form fields\r\n this.resetClickHandler(); //this will reset all ifx-text-fields within a form\r\n } else {\r\n const fakeButton = document.createElement('button');\r\n if (this.type) {\r\n fakeButton.type = this.type;\r\n }\r\n fakeButton.style.display = 'none';\r\n parentForm.appendChild(fakeButton);\r\n fakeButton.click();\r\n fakeButton.remove();\r\n }\r\n }\r\n }\r\n }\r\n\r\n resetClickHandler() {\r\n const formElement = this.el.closest('form');\r\n const customElements = formElement.querySelectorAll('ifx-text-field, ifx-textarea');\r\n customElements.forEach(element => {\r\n element.reset();\r\n });\r\n }\r\n\r\n @Listen('keydown')\r\n handleKeyDown(ev: KeyboardEvent) {\r\n if ( ev.key === \" \" \|\| ev.key === 'Enter' && !this.disabled) {\r\n this.focusableElement.click();\r\n }\r\n }\r\n\r\n @Listen('click', { capture: true })\r\n handleHostClick(event: Event) {\r\n if (this.disabled === true) {\r\n event.stopImmediatePropagation();\r\n }\r\n }\r\n\r\n handleFocus(event: FocusEvent) {\r\n if (this.disabled) {\r\n event.preventDefault();\r\n this.focusableElement.blur();\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <a\r\n role={this.href ? 'link' : 'button'}\r\n tabIndex={this.disabled ? -1 : 0}\r\n ref={(el) => (this.focusableElement = el)}\r\n class={this.getClassNames()}\r\n href={!this.disabled ? this.internalHref : undefined}\r\n target={this.target}\r\n onClick={this.handleClick}\r\n rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\r\n onFocus={(event) => this.handleFocus(event)}\r\n aria-disabled={this.disabled ? 'true' : null}\r\n aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}\r\n aria-label={this.ariaLabel \|\| undefined}\r\n >\r\n <slot></slot>\r\n </a>\r\n </Host>\r\n );\r\n }\r\n\r\n\r\n getVariantClass() {\r\n return `${this.variant}` === \"secondary\"\r\n ? `secondary-${this.theme}`\r\n : `${this.variant}` === 'tertiary'\r\n ? `tertiary-${this.theme}`\r\n : `${this.theme}`;\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',\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}
1	+ {"file":"ifx-button.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","h","Host","classNames"],"sources":["src/components/button/button.scss?tag=ifx-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n vertical-align: bottom;\n display: inline-flex;\n width: var(--bw, fit-content);\n}\n\n.btn {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: tokens.$ifxSize500;\n padding: 0px tokens.$ifxSpace200;\n gap: tokens.$ifxSpace100;\n color: tokens.$ifxColorBaseWhite;\n font-weight: tokens.$ifxFontWeightSemibold;\n border-radius: tokens.$ifxBorderRadius12;\n line-height: tokens.$ifxLineHeightM;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n font-style: normal;\n text-decoration: none;\n user-select: none;\n font-size: tokens.$ifxFontSizeM;\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;\n width: var(--bw, fit-content);\n}\n\n.btn:not(.disabled) {\n cursor: pointer;\n}\n\n.btn.disabled {\n pointer-events: none;\n}\n\n.btn-default {\n //default variant=primary; default color=default\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorOcean500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorBaseWhite;\n pointer-events: none;\n\n }\n}\n\n.btn-secondary-default {\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorOcean500;\n border: 1px solid tokens.$ifxColorOcean500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n.btn-tertiary-default {\n background-color: tokens.$ifxColorBaseTransparent;\n color: tokens.$ifxColorOcean500;\n\n &:disabled,\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n\n.btn-danger {\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorRed500;\n border-color: tokens.$ifxColorRed500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorBaseWhite;\n pointer-events: none;\n\n }\n}\n\n.btn-secondary-danger {\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorRed500;\n border: 1px solid tokens.$ifxColorRed500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n.btn-tertiary-danger {\n //combination tertiary + danger not in design\n background-color: tokens.$ifxColorBaseTransparent;\n color: tokens.$ifxColorRed500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n.btn-inverse {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n\n &:disabled,\n &.disabled {\n opacity: tokens.$ifxOpacity100;\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n }\n}\n\n.btn-secondary-inverse {\n color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorBaseWhite;\n\n &:disabled,\n &.disabled {\n border: 1px solid tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorBaseWhite;\n pointer-events: none;\n\n }\n}\n\n\n.btn-tertiary-inverse {\n color: tokens.$ifxColorBaseWhite;\n\n &:disabled,\n &.disabled {\n color: tokens.$ifxColorBaseWhite;\n opacity: tokens.$ifxOpacity100;\n pointer-events: none;\n\n }\n}\n\n.btn {\n & ifx-icon:empty {\n display: none;\n }\n\n &.btn-xs {\n font-size: tokens.$ifxFontSizeS;\n height: tokens.$ifxSize400;\n line-height: tokens.$ifxLineHeightXs;\n }\n\n &.btn-s {\n font-size: tokens.$ifxFontSizeS;\n height: tokens.$ifxSize450;\n line-height: tokens.$ifxLineHeightS;\n }\n\n // &.btn-m { //default\n // font-size: tokens.$ifxFontSizeM;\n // height: tokens.$ifxSize400;\n // line-height: tokens.$ifxLineHeightM;\n // }\n\n\n &.btn-l {\n font-size: tokens.$ifxFontSizeXl;\n height: tokens.$ifxSize600;\n line-height: tokens.$ifxLineHeightXl;\n }\n\n\n\n &.btn-default:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n background-color: tokens.$ifxColorOcean600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorOcean700;\n }\n }\n\n &.btn-secondary-default:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorOcean600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorOcean700;\n }\n }\n\n &.btn-secondary:not(:disabled, .disabled) {\n\n &:hover {\n background-color: tokens.$ifxColorBerry500;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorBerry500;\n }\n }\n\n\n\n &.btn-danger:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n background-color: tokens.$ifxColorRed600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorRed700;\n }\n }\n\n &.btn-secondary-danger:not(:disabled, .disabled) {\n\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorRed600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorRed700;\n }\n }\n\n\n &.btn-inverse:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorEngineering300;\n }\n }\n\n &.btn-secondary-inverse:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n }\n\n &:hover {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorEngineering300;\n }\n }\n\n\n\n &.btn-tertiary-default:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean600;\n }\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorOcean700;\n }\n\n\n }\n\n\n\n\n\n &.btn-tertiary-danger:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorRed600;\n }\n\n &:hover {\n color: tokens.$ifxColorRed600;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorRed700;\n }\n\n }\n\n\n &.btn-tertiary-inverse:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n }\n\n &:hover {\n color: tokens.$ifxColorEngineering200;\n\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorEngineering300;\n }\n }\n}","import { Component, Prop, h, Host, Method, Element, Listen, State, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n \n@Component({\n tag: 'ifx-button',\n styleUrl: 'button.scss',\n shadow: true,\n})\nexport class Button {\n @Prop() variant: 'primary' \| 'secondary' \| 'tertiary' = 'primary';\n @Prop() theme: 'default' \| 'danger' \| 'inverse' = 'default';\n @Prop() size: string = 'm';\n @Prop() disabled: boolean = false;\n @State() internalHref: string;\n @Prop() href: string;\n @Prop() target: string = '_self';\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" = \"button\";\n @Prop() fullWidth: boolean = false;\n @Prop() ariaLabel: string \| null;\n @Element() el;\n\n private focusableElement: HTMLElement;\n private nativeButton: HTMLButtonElement \| HTMLInputElement;\n\n @Watch('href')\n setInternalHref(newValue: string) {\n this.internalHref = newValue;\n }\n\n @Method()\n async setFocus() {\n this.focusableElement.focus();\n }\n\n insertNativeButton() {\n this.nativeButton = document.createElement('button');\n this.nativeButton.type = this.type;\n this.nativeButton.style.display = 'none';\n this.el.closest('form').appendChild(this.nativeButton);\n }\n\n handleFormAndInternalHref() {\n if (this.el.closest('form')) {\n if (this.el.href) {\n this.el.internalHref = undefined;\n }\n this.insertNativeButton()\n } else {\n this.internalHref = this.href;\n }\n }\n\n handleButtonWidth() {\n if (this.fullWidth) {\n this.el.style.setProperty('--bw', '100%');\n } else {\n this.el.style.setProperty('--bw', 'fit-content');\n }\n }\n\n componentWillLoad() {\n this.handleFormAndInternalHref()\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-button', await framework)\n }\n }\n\n componentWillRender() {\n this.handleButtonWidth()\n }\n\n\n\n handleClick = (ev: Event) => {\n if (this.el.shadowRoot) {\n const parentForm = this.el.closest('form');\n if (parentForm) {\n ev.preventDefault();\n\n if (this.type === 'reset') {\n // If the button type is 'reset', manually reset all custom form fields\n this.resetClickHandler(); //this will reset all ifx-text-fields within a form\n } else {\n const fakeButton = document.createElement('button');\n if (this.type) {\n fakeButton.type = this.type;\n }\n fakeButton.style.display = 'none';\n parentForm.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n }\n }\n }\n\n resetClickHandler() {\n const formElement = this.el.closest('form');\n const customElements = formElement.querySelectorAll('ifx-text-field, ifx-textarea');\n customElements.forEach(element => {\n element.reset();\n });\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if ( ev.key === \" \" \|\| ev.key === 'Enter' && !this.disabled) {\n this.focusableElement.click();\n }\n }\n\n @Listen('click', { capture: true })\n handleHostClick(event: Event) {\n if (this.disabled === true) {\n event.stopImmediatePropagation();\n }\n }\n\n handleFocus(event: FocusEvent) {\n if (this.disabled) {\n event.preventDefault();\n this.focusableElement.blur();\n }\n }\n\n render() {\n return (\n <Host>\n <a\n role={this.href ? 'link' : 'button'}\n tabIndex={this.disabled ? -1 : 0}\n ref={(el) => (this.focusableElement = el)}\n class={this.getClassNames()}\n href={!this.disabled ? this.internalHref : undefined}\n target={this.target}\n onClick={this.handleClick}\n rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n onFocus={(event) => this.handleFocus(event)}\n aria-disabled={this.disabled ? 'true' : null}\n aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}\n aria-label={this.ariaLabel \|\| undefined}\n >\n <slot></slot>\n </a>\n </Host>\n );\n }\n\n\n getVariantClass() {\n return `${this.variant}` === \"secondary\"\n ? `secondary-${this.theme}`\n : `${this.variant}` === 'tertiary'\n ? `tertiary-${this.theme}`\n : `${this.theme}`;\n }\n\n getSizeClass() {\n if (`${this.size}` === \"xs\") {\n return \"xs\"\n }\n else if (`${this.size}` === \"s\") {\n return \"s\"\n }\n else if (`${this.size}` === \"l\") {\n return \"l\"\n }\n else return \"\";\n }\n\n getClassNames() {\n return classNames(\n 'btn',\n this.size && `btn-${this.getSizeClass()}`,\n `btn-${this.getVariantClass()}`,\n this.disabled ? 'disabled' : ''\n );\n }\n}"],"version":3}

package/dist/cjs/ifx-button.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-button.entry.cjs.js","sources":["src/components/button/button.scss?tag=ifx-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n vertical-align: bottom;\r\n display: inline-flex;\r\n width: var(--bw, fit-content);\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 height: tokens.$ifxSize500;\r\n padding: 0px tokens.$ifxSpace200;\r\n gap: tokens.$ifxSpace100;\r\n color: tokens.$ifxColorBaseWhite;\r\n font-weight: tokens.$ifxFontWeightSemibold;\r\n border-radius: tokens.$ifxBorderRadius12;\r\n line-height: tokens.$ifxLineHeightM;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n font-style: normal;\r\n text-decoration: none;\r\n user-select: none;\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 width: var(--bw, fit-content);\r\n}\r\n\r\n.btn:not(.disabled) {\r\n cursor: pointer;\r\n}\r\n\r\n.btn.disabled {\r\n pointer-events: none;\r\n}\r\n\r\n.btn-default {\r\n //default variant=primary; default color=default\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.btn-secondary-default {\r\n background-color: tokens.$ifxColorBaseWhite;\r\n color: tokens.$ifxColorOcean500;\r\n border: 1px solid 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-default {\r\n background-color: tokens.$ifxColorBaseTransparent;\r\n color: tokens.$ifxColorOcean500;\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\r\n.btn-danger {\r\n color: tokens.$ifxColorBaseWhite;\r\n background-color: tokens.$ifxColorRed500;\r\n border-color: tokens.$ifxColorRed500;\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.btn-secondary-danger {\r\n background-color: tokens.$ifxColorBaseWhite;\r\n color: tokens.$ifxColorRed500;\r\n border: 1px solid tokens.$ifxColorRed500;\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-danger {\r\n //combination tertiary + danger not in design\r\n background-color: tokens.$ifxColorBaseTransparent;\r\n color: tokens.$ifxColorRed500;\r\n\r\n &:disabled,\r\n &.disabled {\r\n background-color: tokens.$ifxColorBaseWhite;\r\n color: tokens.$ifxColorEngineering300;\r\n pointer-events: none;\r\n\r\n }\r\n}\r\n\r\n.btn-inverse {\r\n color: tokens.$ifxColorOcean500;\r\n background-color: tokens.$ifxColorBaseWhite;\r\n\r\n &:disabled,\r\n &.disabled {\r\n opacity: tokens.$ifxOpacity100;\r\n background-color: tokens.$ifxColorBaseWhite;\r\n color: tokens.$ifxColorEngineering300;\r\n pointer-events: none;\r\n }\r\n}\r\n\r\n.btn-secondary-inverse {\r\n color: tokens.$ifxColorBaseWhite;\r\n border: 1px solid tokens.$ifxColorBaseWhite;\r\n\r\n &:disabled,\r\n &.disabled {\r\n border: 1px solid tokens.$ifxColorBaseWhite;\r\n color: tokens.$ifxColorBaseWhite;\r\n pointer-events: none;\r\n\r\n }\r\n}\r\n\r\n\r\n.btn-tertiary-inverse {\r\n color: tokens.$ifxColorBaseWhite;\r\n\r\n &:disabled,\r\n &.disabled {\r\n color: tokens.$ifxColorBaseWhite;\r\n opacity: tokens.$ifxOpacity100;\r\n pointer-events: none;\r\n\r\n }\r\n}\r\n\r\n.btn {\r\n & ifx-icon:empty {\r\n display: none;\r\n }\r\n\r\n &.btn-xs {\r\n font-size: tokens.$ifxFontSizeS;\r\n height: tokens.$ifxSize400;\r\n line-height: tokens.$ifxLineHeightXs;\r\n }\r\n\r\n &.btn-s {\r\n font-size: tokens.$ifxFontSizeS;\r\n height: tokens.$ifxSize450;\r\n line-height: tokens.$ifxLineHeightS;\r\n }\r\n\r\n // &.btn-m { //default\r\n // font-size: tokens.$ifxFontSizeM;\r\n // height: tokens.$ifxSize400;\r\n // line-height: tokens.$ifxLineHeightM;\r\n // }\r\n\r\n\r\n &.btn-l {\r\n font-size: tokens.$ifxFontSizeXl;\r\n height: tokens.$ifxSize600;\r\n line-height: tokens.$ifxLineHeightXl;\r\n }\r\n\r\n\r\n\r\n &.btn-default: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 }\r\n\r\n &:active,\r\n &.active {\r\n background-color: tokens.$ifxColorOcean700;\r\n }\r\n }\r\n\r\n &.btn-secondary-default: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 color: tokens.$ifxColorBaseWhite;\r\n background-color: tokens.$ifxColorOcean600;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n background-color: tokens.$ifxColorOcean700;\r\n }\r\n }\r\n\r\n &.btn-secondary:not(:disabled, .disabled) {\r\n\r\n &:hover {\r\n background-color: tokens.$ifxColorBerry500;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n background-color: tokens.$ifxColorBerry500;\r\n }\r\n }\r\n\r\n\r\n\r\n &.btn-danger: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.$ifxColorRed600;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n background-color: tokens.$ifxColorRed700;\r\n }\r\n }\r\n\r\n &.btn-secondary-danger:not(:disabled, .disabled) {\r\n\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 color: tokens.$ifxColorBaseWhite;\r\n background-color: tokens.$ifxColorRed600;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n background-color: tokens.$ifxColorRed700;\r\n }\r\n }\r\n\r\n\r\n &.btn-inverse:not(:disabled, .disabled) {\r\n &:focus:not(:active, .active) {\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\r\n }\r\n\r\n &:hover {\r\n background-color: tokens.$ifxColorEngineering200;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n background-color: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n\r\n &.btn-secondary-inverse:not(:disabled, .disabled) {\r\n &:focus:not(:active, .active) {\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\r\n }\r\n\r\n &:hover {\r\n color: tokens.$ifxColorOcean500;\r\n background-color: tokens.$ifxColorEngineering200;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n color: tokens.$ifxColorOcean500;\r\n background-color: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n\r\n\r\n\r\n &.btn-tertiary-default: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.$ifxColorOcean600;\r\n }\r\n\r\n &:hover {\r\n color: tokens.$ifxColorOcean600;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n color: tokens.$ifxColorOcean700;\r\n }\r\n\r\n\r\n }\r\n\r\n\r\n\r\n\r\n\r\n &.btn-tertiary-danger: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.$ifxColorRed600;\r\n }\r\n\r\n &:hover {\r\n color: tokens.$ifxColorRed600;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n color: tokens.$ifxColorRed700;\r\n }\r\n\r\n }\r\n\r\n\r\n &.btn-tertiary-inverse:not(:disabled, .disabled) {\r\n &:focus:not(:active, .active) {\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\r\n }\r\n\r\n &:hover {\r\n color: tokens.$ifxColorEngineering200;\r\n\r\n }\r\n\r\n &:active,\r\n &.active {\r\n color: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n}","import { Component, Prop, h, Host, Method, Element, Listen, State, Watch } 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-button',\r\n styleUrl: 'button.scss',\r\n shadow: true,\r\n})\r\nexport class Button {\r\n @Prop() variant: 'primary' \| 'secondary' \| 'tertiary' = 'primary';\r\n @Prop() theme: 'default' \| 'danger' \| 'inverse' = 'default';\r\n @Prop() size: string = 'm';\r\n @Prop() disabled: boolean = false;\r\n @State() internalHref: string;\r\n @Prop() href: string;\r\n @Prop() target: string = '_self';\r\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" = \"button\";\r\n @Prop() fullWidth: boolean = false;\r\n @Prop() ariaLabel: string \| null;\r\n @Element() el;\r\n\r\n private focusableElement: HTMLElement;\r\n private nativeButton: HTMLButtonElement \| HTMLInputElement;\r\n\r\n @Watch('href')\r\n setInternalHref(newValue: string) {\r\n this.internalHref = newValue;\r\n }\r\n\r\n @Method()\r\n async setFocus() {\r\n this.focusableElement.focus();\r\n }\r\n\r\n insertNativeButton() {\r\n this.nativeButton = document.createElement('button');\r\n this.nativeButton.type = this.type;\r\n this.nativeButton.style.display = 'none';\r\n this.el.closest('form').appendChild(this.nativeButton);\r\n }\r\n\r\n handleFormAndInternalHref() {\r\n if (this.el.closest('form')) {\r\n if (this.el.href) {\r\n this.el.internalHref = undefined;\r\n }\r\n this.insertNativeButton()\r\n } else {\r\n this.internalHref = this.href;\r\n }\r\n }\r\n\r\n handleButtonWidth() {\r\n if (this.fullWidth) {\r\n this.el.style.setProperty('--bw', '100%');\r\n } else {\r\n this.el.style.setProperty('--bw', 'fit-content');\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n this.handleFormAndInternalHref()\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-button', await framework)\r\n }\r\n }\r\n\r\n componentWillRender() {\r\n this.handleButtonWidth()\r\n }\r\n\r\n\r\n\r\n handleClick = (ev: Event) => {\r\n if (this.el.shadowRoot) {\r\n const parentForm = this.el.closest('form');\r\n if (parentForm) {\r\n ev.preventDefault();\r\n\r\n if (this.type === 'reset') {\r\n // If the button type is 'reset', manually reset all custom form fields\r\n this.resetClickHandler(); //this will reset all ifx-text-fields within a form\r\n } else {\r\n const fakeButton = document.createElement('button');\r\n if (this.type) {\r\n fakeButton.type = this.type;\r\n }\r\n fakeButton.style.display = 'none';\r\n parentForm.appendChild(fakeButton);\r\n fakeButton.click();\r\n fakeButton.remove();\r\n }\r\n }\r\n }\r\n }\r\n\r\n resetClickHandler() {\r\n const formElement = this.el.closest('form');\r\n const customElements = formElement.querySelectorAll('ifx-text-field, ifx-textarea');\r\n customElements.forEach(element => {\r\n element.reset();\r\n });\r\n }\r\n\r\n @Listen('keydown')\r\n handleKeyDown(ev: KeyboardEvent) {\r\n if ( ev.key === \" \" \|\| ev.key === 'Enter' && !this.disabled) {\r\n this.focusableElement.click();\r\n }\r\n }\r\n\r\n @Listen('click', { capture: true })\r\n handleHostClick(event: Event) {\r\n if (this.disabled === true) {\r\n event.stopImmediatePropagation();\r\n }\r\n }\r\n\r\n handleFocus(event: FocusEvent) {\r\n if (this.disabled) {\r\n event.preventDefault();\r\n this.focusableElement.blur();\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <a\r\n role={this.href ? 'link' : 'button'}\r\n tabIndex={this.disabled ? -1 : 0}\r\n ref={(el) => (this.focusableElement = el)}\r\n class={this.getClassNames()}\r\n href={!this.disabled ? this.internalHref : undefined}\r\n target={this.target}\r\n onClick={this.handleClick}\r\n rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\r\n onFocus={(event) => this.handleFocus(event)}\r\n aria-disabled={this.disabled ? 'true' : null}\r\n aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}\r\n aria-label={this.ariaLabel \|\| undefined}\r\n >\r\n <slot></slot>\r\n </a>\r\n </Host>\r\n );\r\n }\r\n\r\n\r\n getVariantClass() {\r\n return `${this.variant}` === \"secondary\"\r\n ? `secondary-${this.theme}`\r\n : `${this.variant}` === 'tertiary'\r\n ? `tertiary-${this.theme}`\r\n : `${this.theme}`;\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',\r\n this.size && `btn-${this.getSizeClass()}`,\r\n `btn-${this.getVariantClass()}`,\r\n this.disabled ? 'disabled' : ''\r\n );\r\n }\r\n}"],"names":["isNestedInIfxComponent","detectFramework","trackComponent","h","Host","classNames"],"mappings":"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"}
1	+ {"version":3,"file":"ifx-button.entry.cjs.js","sources":["src/components/button/button.scss?tag=ifx-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n vertical-align: bottom;\n display: inline-flex;\n width: var(--bw, fit-content);\n}\n\n.btn {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: tokens.$ifxSize500;\n padding: 0px tokens.$ifxSpace200;\n gap: tokens.$ifxSpace100;\n color: tokens.$ifxColorBaseWhite;\n font-weight: tokens.$ifxFontWeightSemibold;\n border-radius: tokens.$ifxBorderRadius12;\n line-height: tokens.$ifxLineHeightM;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n font-style: normal;\n text-decoration: none;\n user-select: none;\n font-size: tokens.$ifxFontSizeM;\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;\n width: var(--bw, fit-content);\n}\n\n.btn:not(.disabled) {\n cursor: pointer;\n}\n\n.btn.disabled {\n pointer-events: none;\n}\n\n.btn-default {\n //default variant=primary; default color=default\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorOcean500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorBaseWhite;\n pointer-events: none;\n\n }\n}\n\n.btn-secondary-default {\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorOcean500;\n border: 1px solid tokens.$ifxColorOcean500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n.btn-tertiary-default {\n background-color: tokens.$ifxColorBaseTransparent;\n color: tokens.$ifxColorOcean500;\n\n &:disabled,\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n\n.btn-danger {\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorRed500;\n border-color: tokens.$ifxColorRed500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorBaseWhite;\n pointer-events: none;\n\n }\n}\n\n.btn-secondary-danger {\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorRed500;\n border: 1px solid tokens.$ifxColorRed500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n.btn-tertiary-danger {\n //combination tertiary + danger not in design\n background-color: tokens.$ifxColorBaseTransparent;\n color: tokens.$ifxColorRed500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n.btn-inverse {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n\n &:disabled,\n &.disabled {\n opacity: tokens.$ifxOpacity100;\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n }\n}\n\n.btn-secondary-inverse {\n color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorBaseWhite;\n\n &:disabled,\n &.disabled {\n border: 1px solid tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorBaseWhite;\n pointer-events: none;\n\n }\n}\n\n\n.btn-tertiary-inverse {\n color: tokens.$ifxColorBaseWhite;\n\n &:disabled,\n &.disabled {\n color: tokens.$ifxColorBaseWhite;\n opacity: tokens.$ifxOpacity100;\n pointer-events: none;\n\n }\n}\n\n.btn {\n & ifx-icon:empty {\n display: none;\n }\n\n &.btn-xs {\n font-size: tokens.$ifxFontSizeS;\n height: tokens.$ifxSize400;\n line-height: tokens.$ifxLineHeightXs;\n }\n\n &.btn-s {\n font-size: tokens.$ifxFontSizeS;\n height: tokens.$ifxSize450;\n line-height: tokens.$ifxLineHeightS;\n }\n\n // &.btn-m { //default\n // font-size: tokens.$ifxFontSizeM;\n // height: tokens.$ifxSize400;\n // line-height: tokens.$ifxLineHeightM;\n // }\n\n\n &.btn-l {\n font-size: tokens.$ifxFontSizeXl;\n height: tokens.$ifxSize600;\n line-height: tokens.$ifxLineHeightXl;\n }\n\n\n\n &.btn-default:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n background-color: tokens.$ifxColorOcean600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorOcean700;\n }\n }\n\n &.btn-secondary-default:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorOcean600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorOcean700;\n }\n }\n\n &.btn-secondary:not(:disabled, .disabled) {\n\n &:hover {\n background-color: tokens.$ifxColorBerry500;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorBerry500;\n }\n }\n\n\n\n &.btn-danger:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n background-color: tokens.$ifxColorRed600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorRed700;\n }\n }\n\n &.btn-secondary-danger:not(:disabled, .disabled) {\n\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorRed600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorRed700;\n }\n }\n\n\n &.btn-inverse:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorEngineering300;\n }\n }\n\n &.btn-secondary-inverse:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n }\n\n &:hover {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorEngineering300;\n }\n }\n\n\n\n &.btn-tertiary-default:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean600;\n }\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorOcean700;\n }\n\n\n }\n\n\n\n\n\n &.btn-tertiary-danger:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorRed600;\n }\n\n &:hover {\n color: tokens.$ifxColorRed600;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorRed700;\n }\n\n }\n\n\n &.btn-tertiary-inverse:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n }\n\n &:hover {\n color: tokens.$ifxColorEngineering200;\n\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorEngineering300;\n }\n }\n}","import { Component, Prop, h, Host, Method, Element, Listen, State, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n \n@Component({\n tag: 'ifx-button',\n styleUrl: 'button.scss',\n shadow: true,\n})\nexport class Button {\n @Prop() variant: 'primary' \| 'secondary' \| 'tertiary' = 'primary';\n @Prop() theme: 'default' \| 'danger' \| 'inverse' = 'default';\n @Prop() size: string = 'm';\n @Prop() disabled: boolean = false;\n @State() internalHref: string;\n @Prop() href: string;\n @Prop() target: string = '_self';\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" = \"button\";\n @Prop() fullWidth: boolean = false;\n @Prop() ariaLabel: string \| null;\n @Element() el;\n\n private focusableElement: HTMLElement;\n private nativeButton: HTMLButtonElement \| HTMLInputElement;\n\n @Watch('href')\n setInternalHref(newValue: string) {\n this.internalHref = newValue;\n }\n\n @Method()\n async setFocus() {\n this.focusableElement.focus();\n }\n\n insertNativeButton() {\n this.nativeButton = document.createElement('button');\n this.nativeButton.type = this.type;\n this.nativeButton.style.display = 'none';\n this.el.closest('form').appendChild(this.nativeButton);\n }\n\n handleFormAndInternalHref() {\n if (this.el.closest('form')) {\n if (this.el.href) {\n this.el.internalHref = undefined;\n }\n this.insertNativeButton()\n } else {\n this.internalHref = this.href;\n }\n }\n\n handleButtonWidth() {\n if (this.fullWidth) {\n this.el.style.setProperty('--bw', '100%');\n } else {\n this.el.style.setProperty('--bw', 'fit-content');\n }\n }\n\n componentWillLoad() {\n this.handleFormAndInternalHref()\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-button', await framework)\n }\n }\n\n componentWillRender() {\n this.handleButtonWidth()\n }\n\n\n\n handleClick = (ev: Event) => {\n if (this.el.shadowRoot) {\n const parentForm = this.el.closest('form');\n if (parentForm) {\n ev.preventDefault();\n\n if (this.type === 'reset') {\n // If the button type is 'reset', manually reset all custom form fields\n this.resetClickHandler(); //this will reset all ifx-text-fields within a form\n } else {\n const fakeButton = document.createElement('button');\n if (this.type) {\n fakeButton.type = this.type;\n }\n fakeButton.style.display = 'none';\n parentForm.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n }\n }\n }\n\n resetClickHandler() {\n const formElement = this.el.closest('form');\n const customElements = formElement.querySelectorAll('ifx-text-field, ifx-textarea');\n customElements.forEach(element => {\n element.reset();\n });\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if ( ev.key === \" \" \|\| ev.key === 'Enter' && !this.disabled) {\n this.focusableElement.click();\n }\n }\n\n @Listen('click', { capture: true })\n handleHostClick(event: Event) {\n if (this.disabled === true) {\n event.stopImmediatePropagation();\n }\n }\n\n handleFocus(event: FocusEvent) {\n if (this.disabled) {\n event.preventDefault();\n this.focusableElement.blur();\n }\n }\n\n render() {\n return (\n <Host>\n <a\n role={this.href ? 'link' : 'button'}\n tabIndex={this.disabled ? -1 : 0}\n ref={(el) => (this.focusableElement = el)}\n class={this.getClassNames()}\n href={!this.disabled ? this.internalHref : undefined}\n target={this.target}\n onClick={this.handleClick}\n rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n onFocus={(event) => this.handleFocus(event)}\n aria-disabled={this.disabled ? 'true' : null}\n aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}\n aria-label={this.ariaLabel \|\| undefined}\n >\n <slot></slot>\n </a>\n </Host>\n );\n }\n\n\n getVariantClass() {\n return `${this.variant}` === \"secondary\"\n ? `secondary-${this.theme}`\n : `${this.variant}` === 'tertiary'\n ? `tertiary-${this.theme}`\n : `${this.theme}`;\n }\n\n getSizeClass() {\n if (`${this.size}` === \"xs\") {\n return \"xs\"\n }\n else if (`${this.size}` === \"s\") {\n return \"s\"\n }\n else if (`${this.size}` === \"l\") {\n return \"l\"\n }\n else return \"\";\n }\n\n getClassNames() {\n return classNames(\n 'btn',\n this.size && `btn-${this.getSizeClass()}`,\n `btn-${this.getVariantClass()}`,\n this.disabled ? 'disabled' : ''\n );\n }\n}"],"names":["isNestedInIfxComponent","detectFramework","trackComponent","h","Host","classNames"],"mappings":"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"}

package/dist/cjs/ifx-card-headline.cjs.entry.js CHANGED Viewed

@@ -23,7 +23,7 @@ const CardHeadline = class {
         }
     }
     render() {
-        return (index.h("div", { key: '7b846b52f7e7670cddd83065b41b64a2de219474', class: `card__headline-wrapper ${this.hasDesc ? 'withDesc' : ""}` }, index.h("div", { key: '048113ed2085a872f6aa31cc22fd721f3978752c', class: `card-headline ${this.direction}` }, index.h("slot", { key: '8c82191f16af04d476a09a50b6208b01c109e41d' }))));
+        return (index.h("div", { key: '46766a6fd8ea2e16ad47662ad5ad06d25359f5e0', class: `card__headline-wrapper ${this.hasDesc ? 'withDesc' : ""}` }, index.h("div", { key: '2368c853f7f8ce565ab00628b925c86eae56eae1', class: `card-headline ${this.direction}` }, index.h("slot", { key: '8c99851e5308f19672df8aa625ca428464fea515' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ifx-card-headline.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-card-headline.entry.cjs.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,qeAAqe;;MCQhf,YAAY,GAAA,MAAA;;;;IAKvB,iBAAiB,GAAA;;QACf,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC;QAE/C,IAAI,WAAW,EAAE;AACf,YAAA,MAAM,SAAS,GAAG,CAAA,EAAA,GAAA,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,SAAS;YAE1E,IAAI,SAAS,IAAI,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;AACjD,gBAAA,IAAI,CAAC,SAAS,GAAG,YAAY;;YAG/B,MAAM,IAAI,GAAG,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC;YACvD,IAAI,IAAI,EAAE;AACR,gBAAA,IAAI,CAAC,OAAO,GAAG,IAAI;;;;IAMzB,MAAM,GAAA;QACJ,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,uBAAA,EAA0B,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,EAAE,CAAA,CAAE,EAAA,EACpEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAiB,cAAA,EAAA,IAAI,CAAC,SAAS,CAAE,CAAA,EAAA,EAC3CA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACF;;;;;;;;","names":["h"],"sources":["src/components/card/card-headline/card-headline.scss?tag=ifx-card-headline&encapsulation=shadow","src/components/card/card-headline/card-headline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n:host {\r\n pointer-events: none;\r\n}\r\n\r\n.card__headline-wrapper {\r\n padding-bottom: 16px;\r\n\r\n &.withDesc {\r\n padding-bottom: 8px;\r\n }\r\n}\r\n\r\n.card-headline {\r\n margin-top: 0;\r\n padding-top: 0;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n font-weight: tokens.$ifxFontWeightSemibold;\r\n font-size: tokens.$ifxFontSize3xl;\r\n line-height: tokens.$ifxLineHeight3xl;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n\r\n &.horizontal {\r\n font-size: tokens.$ifxFontSizeXl;\r\n line-height: 28px;\r\n }\r\n\r\n}","import { Component, h, Element, State } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-card-headline',\r\n styleUrl: 'card-headline.scss',\r\n shadow: true,\r\n})\r\n\r\nexport class CardHeadline {\r\n @Element() el;\r\n @State() direction: string;\r\n @State() hasDesc: boolean;\r\n\r\n componentWillLoad() {\r\n const cardElement = this.el.closest('ifx-card');\r\n\r\n if (cardElement) {\r\n const cardClass = cardElement.shadowRoot.querySelector('.card')?.className;\r\n\r\n if (cardClass && cardClass.includes('horizontal')) {\r\n this.direction = 'horizontal'\r\n }\r\n\r\n const desc = cardElement.querySelector('ifx-card-text');\r\n if (desc) {\r\n this.hasDesc = true;\r\n }\r\n }\r\n }\r\n\r\n\r\n render() {\r\n return (\r\n <div class={`card__headline-wrapper ${this.hasDesc ? 'withDesc' : \"\"}`}>\r\n <div class={`card-headline ${this.direction}`}>\r\n <slot />\r\n </div>\r\n </div>\r\n )\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"ifx-card-headline.entry.cjs.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,qeAAqe;;MCQhf,YAAY,GAAA,MAAA;;;;IAKvB,iBAAiB,GAAA;;QACf,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC;QAE/C,IAAI,WAAW,EAAE;AACf,YAAA,MAAM,SAAS,GAAG,CAAA,EAAA,GAAA,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,SAAS;YAE1E,IAAI,SAAS,IAAI,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;AACjD,gBAAA,IAAI,CAAC,SAAS,GAAG,YAAY;;YAG/B,MAAM,IAAI,GAAG,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC;YACvD,IAAI,IAAI,EAAE;AACR,gBAAA,IAAI,CAAC,OAAO,GAAG,IAAI;;;;IAMzB,MAAM,GAAA;QACJ,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,uBAAA,EAA0B,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,EAAE,CAAA,CAAE,EAAA,EACpEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAiB,cAAA,EAAA,IAAI,CAAC,SAAS,CAAE,CAAA,EAAA,EAC3CA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACF;;;;;;;;","names":["h"],"sources":["src/components/card/card-headline/card-headline.scss?tag=ifx-card-headline&encapsulation=shadow","src/components/card/card-headline/card-headline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n pointer-events: none;\n}\n\n.card__headline-wrapper {\n padding-bottom: 16px;\n\n &.withDesc {\n padding-bottom: 8px;\n }\n}\n\n.card-headline {\n margin-top: 0;\n padding-top: 0;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSize3xl;\n line-height: tokens.$ifxLineHeight3xl;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &.horizontal {\n font-size: tokens.$ifxFontSizeXl;\n line-height: 28px;\n }\n\n}","import { Component, h, Element, State } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-headline',\n styleUrl: 'card-headline.scss',\n shadow: true,\n})\n\nexport class CardHeadline {\n @Element() el;\n @State() direction: string;\n @State() hasDesc: boolean;\n\n componentWillLoad() {\n const cardElement = this.el.closest('ifx-card');\n\n if (cardElement) {\n const cardClass = cardElement.shadowRoot.querySelector('.card')?.className;\n\n if (cardClass && cardClass.includes('horizontal')) {\n this.direction = 'horizontal'\n }\n\n const desc = cardElement.querySelector('ifx-card-text');\n if (desc) {\n this.hasDesc = true;\n }\n }\n }\n\n\n render() {\n return (\n <div class={`card__headline-wrapper ${this.hasDesc ? 'withDesc' : \"\"}`}>\n <div class={`card-headline ${this.direction}`}>\n <slot />\n </div>\n </div>\n )\n }\n}\n"],"version":3}

package/dist/cjs/ifx-card-headline.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-card-headline.entry.cjs.js","sources":["src/components/card/card-headline/card-headline.scss?tag=ifx-card-headline&encapsulation=shadow","src/components/card/card-headline/card-headline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n:host {\r\n pointer-events: none;\r\n}\r\n\r\n.card__headline-wrapper {\r\n padding-bottom: 16px;\r\n\r\n &.withDesc {\r\n padding-bottom: 8px;\r\n }\r\n}\r\n\r\n.card-headline {\r\n margin-top: 0;\r\n padding-top: 0;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n font-weight: tokens.$ifxFontWeightSemibold;\r\n font-size: tokens.$ifxFontSize3xl;\r\n line-height: tokens.$ifxLineHeight3xl;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n\r\n &.horizontal {\r\n font-size: tokens.$ifxFontSizeXl;\r\n line-height: 28px;\r\n }\r\n\r\n}","import { Component, h, Element, State } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-card-headline',\r\n styleUrl: 'card-headline.scss',\r\n shadow: true,\r\n})\r\n\r\nexport class CardHeadline {\r\n @Element() el;\r\n @State() direction: string;\r\n @State() hasDesc: boolean;\r\n\r\n componentWillLoad() {\r\n const cardElement = this.el.closest('ifx-card');\r\n\r\n if (cardElement) {\r\n const cardClass = cardElement.shadowRoot.querySelector('.card')?.className;\r\n\r\n if (cardClass && cardClass.includes('horizontal')) {\r\n this.direction = 'horizontal'\r\n }\r\n\r\n const desc = cardElement.querySelector('ifx-card-text');\r\n if (desc) {\r\n this.hasDesc = true;\r\n }\r\n }\r\n }\r\n\r\n\r\n render() {\r\n return (\r\n <div class={`card__headline-wrapper ${this.hasDesc ? 'withDesc' : \"\"}`}>\r\n <div class={`card-headline ${this.direction}`}>\r\n <slot />\r\n </div>\r\n </div>\r\n )\r\n }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,eAAe,GAAG,qeAAqe;;MCQhf,YAAY,GAAA,MAAA;;;;IAKvB,iBAAiB,GAAA;;QACf,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC;QAE/C,IAAI,WAAW,EAAE;AACf,YAAA,MAAM,SAAS,GAAG,CAAA,EAAA,GAAA,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,SAAS;YAE1E,IAAI,SAAS,IAAI,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;AACjD,gBAAA,IAAI,CAAC,SAAS,GAAG,YAAY;;YAG/B,MAAM,IAAI,GAAG,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC;YACvD,IAAI,IAAI,EAAE;AACR,gBAAA,IAAI,CAAC,OAAO,GAAG,IAAI;;;;IAMzB,MAAM,GAAA;QACJ,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,uBAAA,EAA0B,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,EAAE,CAAA,CAAE,EAAA,EACpEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAiB,cAAA,EAAA,IAAI,CAAC,SAAS,CAAE,CAAA,EAAA,EAC3CA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACF;;;;;;;;"}
1	+ {"version":3,"file":"ifx-card-headline.entry.cjs.js","sources":["src/components/card/card-headline/card-headline.scss?tag=ifx-card-headline&encapsulation=shadow","src/components/card/card-headline/card-headline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n pointer-events: none;\n}\n\n.card__headline-wrapper {\n padding-bottom: 16px;\n\n &.withDesc {\n padding-bottom: 8px;\n }\n}\n\n.card-headline {\n margin-top: 0;\n padding-top: 0;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSize3xl;\n line-height: tokens.$ifxLineHeight3xl;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &.horizontal {\n font-size: tokens.$ifxFontSizeXl;\n line-height: 28px;\n }\n\n}","import { Component, h, Element, State } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-headline',\n styleUrl: 'card-headline.scss',\n shadow: true,\n})\n\nexport class CardHeadline {\n @Element() el;\n @State() direction: string;\n @State() hasDesc: boolean;\n\n componentWillLoad() {\n const cardElement = this.el.closest('ifx-card');\n\n if (cardElement) {\n const cardClass = cardElement.shadowRoot.querySelector('.card')?.className;\n\n if (cardClass && cardClass.includes('horizontal')) {\n this.direction = 'horizontal'\n }\n\n const desc = cardElement.querySelector('ifx-card-text');\n if (desc) {\n this.hasDesc = true;\n }\n }\n }\n\n\n render() {\n return (\n <div class={`card__headline-wrapper ${this.hasDesc ? 'withDesc' : \"\"}`}>\n <div class={`card-headline ${this.direction}`}>\n <slot />\n </div>\n </div>\n )\n }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,eAAe,GAAG,qeAAqe;;MCQhf,YAAY,GAAA,MAAA;;;;IAKvB,iBAAiB,GAAA;;QACf,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC;QAE/C,IAAI,WAAW,EAAE;AACf,YAAA,MAAM,SAAS,GAAG,CAAA,EAAA,GAAA,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,SAAS;YAE1E,IAAI,SAAS,IAAI,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;AACjD,gBAAA,IAAI,CAAC,SAAS,GAAG,YAAY;;YAG/B,MAAM,IAAI,GAAG,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC;YACvD,IAAI,IAAI,EAAE;AACR,gBAAA,IAAI,CAAC,OAAO,GAAG,IAAI;;;;IAMzB,MAAM,GAAA;QACJ,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,uBAAA,EAA0B,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,EAAE,CAAA,CAAE,EAAA,EACpEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAiB,cAAA,EAAA,IAAI,CAAC,SAAS,CAAE,CAAA,EAAA,EAC3CA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACF;;;;;;;;"}

package/dist/cjs/ifx-card-image.cjs.entry.js CHANGED Viewed

@@ -19,7 +19,7 @@ const CardImage = class {
         this.handlePosition(this.position);
     }
     render() {
-        return (index.h("img", { key: 'ed999c190110ba94ee2a57d0e7b3097b047cfb1f', src: this.src, alt: this.alt, class: "card-image" }));
+        return (index.h("img", { key: '74204d35691d617c897b876c6efee1b9a6722f64', src: this.src, alt: this.alt, class: "card-image" }));
     }
 };
 CardImage.style = cardImageCss;

package/dist/cjs/ifx-card-image.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-card-image.entry.cjs.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,4EAA4E;;MCQpF,SAAS,GAAA,MAAA;;;;;AAMpB,IAAA,cAAc,CAAC,QAAQ,EAAA;AACrB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAGjC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAGpC,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAGpC,MAAM,GAAA;AACJ,QAAA,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,YAAY,EAAA,CAAG;;;;;;;","names":["h"],"sources":["src/components/card/card-image/card-image.scss?tag=ifx-card-image&encapsulation=shadow","src/components/card/card-image/card-image.tsx"],"sourcesContent":[".card-image {\r\n width: 100%;\r\n height: 100%;\r\n vertical-align: bottom;\r\n object-fit: cover;\r\n}","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-card-image',\r\n styleUrl: 'card-image.scss',\r\n shadow: true,\r\n})\r\n\r\nexport class CardImage {\r\n @Prop() src: string;\r\n @Prop() alt: string;\r\n @Prop() position: string;\r\n @Event() imgPosition: EventEmitter;\r\n\r\n handlePosition(position) {\r\n this.imgPosition.emit(position)\r\n }\r\n\r\n componentWillLoad() {\r\n this.handlePosition(this.position)\r\n }\r\n\r\n componentDidUpdate() {\r\n this.handlePosition(this.position)\r\n }\r\n\r\n render() {\r\n return (\r\n <img src={this.src} alt={this.alt} class=\"card-image\" />\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"ifx-card-image.entry.cjs.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,4EAA4E;;MCQpF,SAAS,GAAA,MAAA;;;;;AAMpB,IAAA,cAAc,CAAC,QAAQ,EAAA;AACrB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAGjC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAGpC,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAGpC,MAAM,GAAA;AACJ,QAAA,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,YAAY,EAAA,CAAG;;;;;;;","names":["h"],"sources":["src/components/card/card-image/card-image.scss?tag=ifx-card-image&encapsulation=shadow","src/components/card/card-image/card-image.tsx"],"sourcesContent":[".card-image {\n width: 100%;\n height: 100%;\n vertical-align: bottom;\n object-fit: cover;\n}","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-image',\n styleUrl: 'card-image.scss',\n shadow: true,\n})\n\nexport class CardImage {\n @Prop() src: string;\n @Prop() alt: string;\n @Prop() position: string;\n @Event() imgPosition: EventEmitter;\n\n handlePosition(position) {\n this.imgPosition.emit(position)\n }\n\n componentWillLoad() {\n this.handlePosition(this.position)\n }\n\n componentDidUpdate() {\n this.handlePosition(this.position)\n }\n\n render() {\n return (\n <img src={this.src} alt={this.alt} class=\"card-image\" />\n );\n }\n}\n"],"version":3}

package/dist/cjs/ifx-card-image.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-card-image.entry.cjs.js","sources":["src/components/card/card-image/card-image.scss?tag=ifx-card-image&encapsulation=shadow","src/components/card/card-image/card-image.tsx"],"sourcesContent":[".card-image {\r\n width: 100%;\r\n height: 100%;\r\n vertical-align: bottom;\r\n object-fit: cover;\r\n}","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-card-image',\r\n styleUrl: 'card-image.scss',\r\n shadow: true,\r\n})\r\n\r\nexport class CardImage {\r\n @Prop() src: string;\r\n @Prop() alt: string;\r\n @Prop() position: string;\r\n @Event() imgPosition: EventEmitter;\r\n\r\n handlePosition(position) {\r\n this.imgPosition.emit(position)\r\n }\r\n\r\n componentWillLoad() {\r\n this.handlePosition(this.position)\r\n }\r\n\r\n componentDidUpdate() {\r\n this.handlePosition(this.position)\r\n }\r\n\r\n render() {\r\n return (\r\n <img src={this.src} alt={this.alt} class=\"card-image\" />\r\n );\r\n }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,4EAA4E;;MCQpF,SAAS,GAAA,MAAA;;;;;AAMpB,IAAA,cAAc,CAAC,QAAQ,EAAA;AACrB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAGjC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAGpC,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAGpC,MAAM,GAAA;AACJ,QAAA,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,YAAY,EAAA,CAAG;;;;;;;"}
1	+ {"version":3,"file":"ifx-card-image.entry.cjs.js","sources":["src/components/card/card-image/card-image.scss?tag=ifx-card-image&encapsulation=shadow","src/components/card/card-image/card-image.tsx"],"sourcesContent":[".card-image {\n width: 100%;\n height: 100%;\n vertical-align: bottom;\n object-fit: cover;\n}","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-image',\n styleUrl: 'card-image.scss',\n shadow: true,\n})\n\nexport class CardImage {\n @Prop() src: string;\n @Prop() alt: string;\n @Prop() position: string;\n @Event() imgPosition: EventEmitter;\n\n handlePosition(position) {\n this.imgPosition.emit(position)\n }\n\n componentWillLoad() {\n this.handlePosition(this.position)\n }\n\n componentDidUpdate() {\n this.handlePosition(this.position)\n }\n\n render() {\n return (\n <img src={this.src} alt={this.alt} class=\"card-image\" />\n );\n }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,4EAA4E;;MCQpF,SAAS,GAAA,MAAA;;;;;AAMpB,IAAA,cAAc,CAAC,QAAQ,EAAA;AACrB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAGjC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAGpC,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAGpC,MAAM,GAAA;AACJ,QAAA,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,YAAY,EAAA,CAAG;;;;;;;"}

package/dist/cjs/ifx-card-links.cjs.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const CardLinks = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: 'c2ad16092f513de6ea485ab418fcf2e62b276859', class: 'container' }, index.h("slot", { key: 'e4a80833b3a1de998967120d85fcab706926e3ec' })));
+        return (index.h("div", { key: '744455878787fca646306c9ef81e3e49e0fa7543', class: 'container' }, index.h("slot", { key: '096ab98134aa896969c6a5c674dcd66b6a9219d6' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ifx-card-links.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-card-links.entry.cjs.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,iRAAiR;;MCQzR,SAAS,GAAA,MAAA;;;;IAGpB,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;","names":["h"],"sources":["src/components/card/card-links/card-links.scss?tag=ifx-card-links&encapsulation=shadow","src/components/card/card-links/card-links.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n.container {\r\n display: flex;\r\n align-items: center;\r\n gap: tokens.$ifxSpace250;\r\n flex-wrap: wrap;\r\n text-decoration: none;\r\n color: tokens.$ifxColorBaseBlack;\r\n padding: 0px 24px 24px 24px;\r\n\r\n /* wraps text at spaces and within words /\r\n word-wrap: break-word;\r\n / breaks text within a word if necessary /\r\n overflow-wrap: anywhere;\r\n / breaks text at arbitrary points when needed */\r\n\r\n &:hover {\r\n cursor: initial;\r\n }\r\n}","import { Component, h, Element } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-card-links',\r\n styleUrl: 'card-links.scss',\r\n shadow: true,\r\n})\r\n\r\nexport class CardLinks {\r\n @Element() el;\r\n\r\n render() {\r\n return (\r\n <div class='container'>\r\n <slot />\r\n </div>\r\n )\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"ifx-card-links.entry.cjs.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,iRAAiR;;MCQzR,SAAS,GAAA,MAAA;;;;IAGpB,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;","names":["h"],"sources":["src/components/card/card-links/card-links.scss?tag=ifx-card-links&encapsulation=shadow","src/components/card/card-links/card-links.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.container {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace250;\n flex-wrap: wrap;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n padding: 0px 24px 24px 24px;\n\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 / breaks text at arbitrary points when needed */\n\n &:hover {\n cursor: initial;\n }\n}","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-links',\n styleUrl: 'card-links.scss',\n shadow: true,\n})\n\nexport class CardLinks {\n @Element() el;\n\n render() {\n return (\n <div class='container'>\n <slot />\n </div>\n )\n }\n}\n"],"version":3}

package/dist/cjs/ifx-card-links.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-card-links.entry.cjs.js","sources":["src/components/card/card-links/card-links.scss?tag=ifx-card-links&encapsulation=shadow","src/components/card/card-links/card-links.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n.container {\r\n display: flex;\r\n align-items: center;\r\n gap: tokens.$ifxSpace250;\r\n flex-wrap: wrap;\r\n text-decoration: none;\r\n color: tokens.$ifxColorBaseBlack;\r\n padding: 0px 24px 24px 24px;\r\n\r\n /* wraps text at spaces and within words /\r\n word-wrap: break-word;\r\n / breaks text within a word if necessary /\r\n overflow-wrap: anywhere;\r\n / breaks text at arbitrary points when needed */\r\n\r\n &:hover {\r\n cursor: initial;\r\n }\r\n}","import { Component, h, Element } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-card-links',\r\n styleUrl: 'card-links.scss',\r\n shadow: true,\r\n})\r\n\r\nexport class CardLinks {\r\n @Element() el;\r\n\r\n render() {\r\n return (\r\n <div class='container'>\r\n <slot />\r\n </div>\r\n )\r\n }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,iRAAiR;;MCQzR,SAAS,GAAA,MAAA;;;;IAGpB,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;"}
1	+ {"version":3,"file":"ifx-card-links.entry.cjs.js","sources":["src/components/card/card-links/card-links.scss?tag=ifx-card-links&encapsulation=shadow","src/components/card/card-links/card-links.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.container {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace250;\n flex-wrap: wrap;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n padding: 0px 24px 24px 24px;\n\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 / breaks text at arbitrary points when needed */\n\n &:hover {\n cursor: initial;\n }\n}","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-links',\n styleUrl: 'card-links.scss',\n shadow: true,\n})\n\nexport class CardLinks {\n @Element() el;\n\n render() {\n return (\n <div class='container'>\n <slot />\n </div>\n )\n }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,iRAAiR;;MCQzR,SAAS,GAAA,MAAA;;;;IAGpB,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;"}

package/dist/cjs/ifx-card-overline.cjs.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const CardOverline = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: 'e707ef390549c1d7ee1035a8b6630466a296b78b', class: "card-overline" }, index.h("slot", { key: '3d7f0d857315b739162bf1989fe2035b90599049' })));
+        return (index.h("div", { key: '181762fa666e11ebc4d8c11430f878494d6ff378', class: "card-overline" }, index.h("slot", { key: 'bbbc7a81dca17cef1ea809f9f87e9a010e5f212d' })));
     }
 };
 CardOverline.style = cardOverlineCss;

package/dist/cjs/ifx-card-overline.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-card-overline.entry.cjs.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,6SAA6S;;MCQxT,YAAY,GAAA,MAAA;;;;IAEvB,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACxBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;","names":["h"],"sources":["src/components/card/card-overline/card-overline.scss?tag=ifx-card-overline&encapsulation=shadow","src/components/card/card-overline/card-overline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n:host {\r\n pointer-events: none;\r\n}\r\n\r\n.card-overline {\r\n font-size: tokens.$ifxFontSizeM;\r\n font-weight: tokens.$ifxFontWeightRegular;\r\n color: tokens.$ifxColorEngineering500;\r\n padding-bottom: 4px;\r\n\r\n display: -webkit-box;\r\n -webkit-line-clamp: 1;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n\r\n word-break: break-all;\r\n\r\n}","import { Component, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-card-overline',\r\n styleUrl: 'card-overline.scss',\r\n shadow: true,\r\n})\r\n\r\nexport class CardOverline {\r\n\r\n render() {\r\n return (\r\n <div class=\"card-overline\">\r\n <slot />\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"ifx-card-overline.entry.cjs.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,6SAA6S;;MCQxT,YAAY,GAAA,MAAA;;;;IAEvB,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACxBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;","names":["h"],"sources":["src/components/card/card-overline/card-overline.scss?tag=ifx-card-overline&encapsulation=shadow","src/components/card/card-overline/card-overline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n pointer-events: none;\n}\n\n.card-overline {\n font-size: tokens.$ifxFontSizeM;\n font-weight: tokens.$ifxFontWeightRegular;\n color: tokens.$ifxColorEngineering500;\n padding-bottom: 4px;\n\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n\n word-break: break-all;\n\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-overline',\n styleUrl: 'card-overline.scss',\n shadow: true,\n})\n\nexport class CardOverline {\n\n render() {\n return (\n <div class=\"card-overline\">\n <slot />\n </div>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ifx-card-overline.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-card-overline.entry.cjs.js","sources":["src/components/card/card-overline/card-overline.scss?tag=ifx-card-overline&encapsulation=shadow","src/components/card/card-overline/card-overline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n:host {\r\n pointer-events: none;\r\n}\r\n\r\n.card-overline {\r\n font-size: tokens.$ifxFontSizeM;\r\n font-weight: tokens.$ifxFontWeightRegular;\r\n color: tokens.$ifxColorEngineering500;\r\n padding-bottom: 4px;\r\n\r\n display: -webkit-box;\r\n -webkit-line-clamp: 1;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n\r\n word-break: break-all;\r\n\r\n}","import { Component, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-card-overline',\r\n styleUrl: 'card-overline.scss',\r\n shadow: true,\r\n})\r\n\r\nexport class CardOverline {\r\n\r\n render() {\r\n return (\r\n <div class=\"card-overline\">\r\n <slot />\r\n </div>\r\n );\r\n }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,eAAe,GAAG,6SAA6S;;MCQxT,YAAY,GAAA,MAAA;;;;IAEvB,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACxBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;"}
1	+ {"version":3,"file":"ifx-card-overline.entry.cjs.js","sources":["src/components/card/card-overline/card-overline.scss?tag=ifx-card-overline&encapsulation=shadow","src/components/card/card-overline/card-overline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n pointer-events: none;\n}\n\n.card-overline {\n font-size: tokens.$ifxFontSizeM;\n font-weight: tokens.$ifxFontWeightRegular;\n color: tokens.$ifxColorEngineering500;\n padding-bottom: 4px;\n\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n\n word-break: break-all;\n\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-overline',\n styleUrl: 'card-overline.scss',\n shadow: true,\n})\n\nexport class CardOverline {\n\n render() {\n return (\n <div class=\"card-overline\">\n <slot />\n </div>\n );\n }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,eAAe,GAAG,6SAA6S;;MCQxT,YAAY,GAAA,MAAA;;;;IAEvB,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACxBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;"}

package/dist/cjs/ifx-card-text.cjs.entry.js CHANGED Viewed

@@ -16,7 +16,7 @@ const CardText = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'e1633c3f7bf8438b839ad4df9ec64e2a5afce629', class: `card__text-wrapper ${this.hasBtn ? 'hasBtn' : ""}` }, index.h("div", { key: 'f6dd6376eb3763f41dca8d77b7094277d8a08053', class: `card-text` }, index.h("slot", { key: 'b468bcf96960f91232cb394fb737f2f88d11da29' }))));
+        return (index.h("div", { key: '5a2aabfe888a3828a6017412ee91188efe4d64c2', class: `card__text-wrapper ${this.hasBtn ? 'hasBtn' : ""}` }, index.h("div", { key: '39aa1e521652e4b323dd571614e297a5a600cfa9', class: `card-text` }, index.h("slot", { key: 'b72bc79a33bb48e96ae9f825dd48ca9b9b44725f' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ifx-card-text.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-card-text.entry.cjs.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,6WAA6W;;MCQpX,QAAQ,GAAA,MAAA;;;;IAInB,iBAAiB,GAAA;AACf,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC;AAClE,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC;AACtE,QAAA,IAAG,IAAI,IAAI,MAAM,EAAE;AACjB,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI;;;IAItB,MAAM,GAAA;QACJ,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,sBAAsB,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAA,CAAE,EAAA,EAC7DA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,SAAA,CAAW,EAAA,EACrBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACF;;;;;;;;","names":["h"],"sources":["src/components/card/card-text/card-text.scss?tag=ifx-card-text&encapsulation=shadow","src/components/card/card-text/card-text.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n:host {\r\n pointer-events: none;\r\n}\r\n\r\n.card__text-wrapper {\r\n padding-bottom: 0px;\r\n\r\n &.hasBtn {\r\n padding-bottom: 16px;\r\n }\r\n}\r\n\r\n.card-text {\r\n line-height: tokens.$ifxLineHeightM;\r\n font-size: tokens.$ifxFontSizeM;\r\n font-weight: 400;\r\n white-space: wrap;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 3;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}","import { Component, h, Element, State} from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-card-text',\r\n styleUrl: './card-text.scss',\r\n shadow: true,\r\n})\r\n\r\nexport class CardText {\r\n @Element() el;\r\n @State() hasBtn: boolean;\r\n\r\n componentWillLoad() { \r\n const link = this.el.closest('ifx-card').querySelector('ifx-link');\r\n const button = this.el.closest('ifx-card').querySelector('ifx-button');\r\n if(link \|\| button) { \r\n this.hasBtn = true;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`card__text-wrapper ${this.hasBtn ? 'hasBtn' : \"\"}`}>\r\n <div class={`card-text`}>\r\n <slot />\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"ifx-card-text.entry.cjs.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,6WAA6W;;MCQpX,QAAQ,GAAA,MAAA;;;;IAInB,iBAAiB,GAAA;AACf,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC;AAClE,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC;AACtE,QAAA,IAAG,IAAI,IAAI,MAAM,EAAE;AACjB,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI;;;IAItB,MAAM,GAAA;QACJ,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,sBAAsB,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAA,CAAE,EAAA,EAC7DA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,SAAA,CAAW,EAAA,EACrBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACF;;;;;;;;","names":["h"],"sources":["src/components/card/card-text/card-text.scss?tag=ifx-card-text&encapsulation=shadow","src/components/card/card-text/card-text.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n pointer-events: none;\n}\n\n.card__text-wrapper {\n padding-bottom: 0px;\n\n &.hasBtn {\n padding-bottom: 16px;\n }\n}\n\n.card-text {\n line-height: tokens.$ifxLineHeightM;\n font-size: tokens.$ifxFontSizeM;\n font-weight: 400;\n white-space: wrap;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n}","import { Component, h, Element, State} from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-text',\n styleUrl: './card-text.scss',\n shadow: true,\n})\n\nexport class CardText {\n @Element() el;\n @State() hasBtn: boolean;\n\n componentWillLoad() { \n const link = this.el.closest('ifx-card').querySelector('ifx-link');\n const button = this.el.closest('ifx-card').querySelector('ifx-button');\n if(link \|\| button) { \n this.hasBtn = true;\n }\n }\n\n render() {\n return (\n <div class={`card__text-wrapper ${this.hasBtn ? 'hasBtn' : \"\"}`}>\n <div class={`card-text`}>\n <slot />\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ifx-card-text.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-card-text.entry.cjs.js","sources":["src/components/card/card-text/card-text.scss?tag=ifx-card-text&encapsulation=shadow","src/components/card/card-text/card-text.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n:host {\r\n pointer-events: none;\r\n}\r\n\r\n.card__text-wrapper {\r\n padding-bottom: 0px;\r\n\r\n &.hasBtn {\r\n padding-bottom: 16px;\r\n }\r\n}\r\n\r\n.card-text {\r\n line-height: tokens.$ifxLineHeightM;\r\n font-size: tokens.$ifxFontSizeM;\r\n font-weight: 400;\r\n white-space: wrap;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 3;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}","import { Component, h, Element, State} from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-card-text',\r\n styleUrl: './card-text.scss',\r\n shadow: true,\r\n})\r\n\r\nexport class CardText {\r\n @Element() el;\r\n @State() hasBtn: boolean;\r\n\r\n componentWillLoad() { \r\n const link = this.el.closest('ifx-card').querySelector('ifx-link');\r\n const button = this.el.closest('ifx-card').querySelector('ifx-button');\r\n if(link \|\| button) { \r\n this.hasBtn = true;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`card__text-wrapper ${this.hasBtn ? 'hasBtn' : \"\"}`}>\r\n <div class={`card-text`}>\r\n <slot />\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,WAAW,GAAG,6WAA6W;;MCQpX,QAAQ,GAAA,MAAA;;;;IAInB,iBAAiB,GAAA;AACf,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC;AAClE,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC;AACtE,QAAA,IAAG,IAAI,IAAI,MAAM,EAAE;AACjB,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI;;;IAItB,MAAM,GAAA;QACJ,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,sBAAsB,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAA,CAAE,EAAA,EAC7DA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,SAAA,CAAW,EAAA,EACrBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACF;;;;;;;;"}
1	+ {"version":3,"file":"ifx-card-text.entry.cjs.js","sources":["src/components/card/card-text/card-text.scss?tag=ifx-card-text&encapsulation=shadow","src/components/card/card-text/card-text.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n pointer-events: none;\n}\n\n.card__text-wrapper {\n padding-bottom: 0px;\n\n &.hasBtn {\n padding-bottom: 16px;\n }\n}\n\n.card-text {\n line-height: tokens.$ifxLineHeightM;\n font-size: tokens.$ifxFontSizeM;\n font-weight: 400;\n white-space: wrap;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n}","import { Component, h, Element, State} from '@stencil/core';\n\n@Component({\n tag: 'ifx-card-text',\n styleUrl: './card-text.scss',\n shadow: true,\n})\n\nexport class CardText {\n @Element() el;\n @State() hasBtn: boolean;\n\n componentWillLoad() { \n const link = this.el.closest('ifx-card').querySelector('ifx-link');\n const button = this.el.closest('ifx-card').querySelector('ifx-button');\n if(link \|\| button) { \n this.hasBtn = true;\n }\n }\n\n render() {\n return (\n <div class={`card__text-wrapper ${this.hasBtn ? 'hasBtn' : \"\"}`}>\n <div class={`card-text`}>\n <slot />\n </div>\n </div>\n );\n }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,WAAW,GAAG,6WAA6W;;MCQpX,QAAQ,GAAA,MAAA;;;;IAInB,iBAAiB,GAAA;AACf,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC;AAClE,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC;AACtE,QAAA,IAAG,IAAI,IAAI,MAAM,EAAE;AACjB,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI;;;IAItB,MAAM,GAAA;QACJ,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,sBAAsB,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAA,CAAE,EAAA,EAC7DA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,SAAA,CAAW,EAAA,EACrBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACF;;;;;;;;"}