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

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

package/dist/components/ifx-action-list-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-action-list-item.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/action-list/action-list-item.scss?tag=ifx-action-list-item&encapsulation=shadow","src/components/action-list/action-list-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.action-list-item {\n display: flex;\n align-items: center;\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n background: tokens.$ifxColorBaseWhite;\n transition: background-color 0.2s ease;\n cursor: default;\n\n &--clickable {\n cursor: pointer;\n\n &:hover:not(.action-list-item--disabled) {\n background: tokens.$ifxColorEngineering100;\n }\n\n &:focus:not(.action-list-item--disabled) {\n outline: none;\n //outline: 2px solid tokens.$ifxColorOcean500;\n //outline-offset: -2px;\n background: tokens.$ifxColorEngineering100;\n }\n\n &:active:not(.action-list-item--disabled) {\n background: tokens.$ifxColorEngineering200;\n }\n }\n\n &--disabled {\n // Apply disabled color to all slotted icons\n ::slotted(ifx-icon) {\n color: tokens.$ifxColorEngineering300;\n }\n\n // Also apply to nested icons within slotted elements\n ::slotted() {\n ifx-icon {\n color: tokens.$ifxColorEngineering300;\n }\n }\n }\n\n &__leading {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: tokens.$ifxSpace200;\n flex-shrink: 0;\n }\n\n &__content {\n flex: 1;\n min-width: 0; // Allows text to truncate\n }\n\n &__title {\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n color: tokens.$ifxColorBaseBlack;\n\n // Truncate long titles\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n // Disabled state\n .action-list-item--disabled & {\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n &__description {\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorEngineering500;\n margin-top: tokens.$ifxSpace25;\n\n // Disabled state\n .action-list-item--disabled & {\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n &__trailing {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: tokens.$ifxSpace200;\n flex-shrink: 0;\n gap: 16px;\n }\n}","import { Component, h, Prop, Element, Event, EventEmitter, Watch } from '@stencil/core';\nimport classNames from 'classnames';\n\nexport interface ActionListItemClickEvent {\n value?: string;\n href?: string;\n target?: string;\n component?: ActionListItem;\n}\n\n@Component({\n tag: 'ifx-action-list-item',\n styleUrl: 'action-list-item.scss',\n shadow: true,\n})\nexport class ActionListItem {\n @Element() host: HTMLElement;\n\n /\n The title text displayed in the item\n /\n @Prop() itemTitle: string;\n\n /\n The description text displayed below the title\n /\n @Prop() description?: string;\n\n /\n Value associated with this item\n /\n @Prop() value?: string;\n\n /\n URL to navigate to when item is clicked\n /\n @Prop() href?: string;\n\n /\n Target for the link navigation\n * @default '_self'\n /\n @Prop() target: string = '_self';\n\n /\n Controls whether the item is disabled\n * @default false\n /\n @Prop() disabled: boolean = false;\n\n /\n Aria label for accessibility support\n /\n @Prop() itemAriaLabel?: string;\n\n /\n Event emitted when the main item area is clicked\n /\n @Event() ifxActionListItemClick: EventEmitter<ActionListItemClickEvent>;\n\n @Watch('disabled')\n onDisabledChange() {\n // Update interactive elements when disabled state changes\n this.updateSlotElementsDisabledState();\n }\n\n private handleMainClick = (event: MouseEvent) => {\n if (this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n // Check if clicked element is inside leading or trailing areas\n const leadingElement = this.host.shadowRoot?.querySelector('.action-list-item__leading');\n const trailingElement = this.host.shadowRoot?.querySelector('.action-list-item__trailing');\n\n if (leadingElement?.contains(event.target as Node) \|\| trailingElement?.contains(event.target as Node)) {\n return; // Don't trigger main click if clicking on leading/trailing areas\n }\n\n // Always emit main event when clicking on content area (text), regardless of interactive elements\n this.ifxActionListItemClick.emit({\n value: this.value,\n href: this.href,\n target: this.target,\n component: this,\n });\n\n // If href is provided, automatically navigate (Link mode)\n // If no href is provided, only the event is emitted (Event mode)\n if (this.href) {\n if (this.target === '_blank') {\n window.open(this.href, this.target);\n } else {\n window.location.href = this.href;\n }\n }\n };\n\n private handleLeadingClick = (event: MouseEvent) => {\n if (this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n const target = event.target as HTMLElement;\n\n // Check if the clicked element or any of its parents is an interactive component\n let currentElement = target;\n while (currentElement && currentElement !== this.host) {\n if (this.isInteractiveElement(currentElement)) {\n // Interactive element clicked - stop propagation to prevent main event\n event.stopPropagation();\n return;\n }\n currentElement = currentElement.parentElement;\n }\n\n // Non-interactive element clicked - trigger main action\n event.stopPropagation();\n this.ifxActionListItemClick.emit({\n value: this.value,\n href: this.href,\n target: this.target,\n component: this,\n });\n\n // If href is provided, automatically navigate\n if (this.href) {\n if (this.target === '_blank') {\n window.open(this.href, this.target);\n } else {\n window.location.href = this.href;\n }\n }\n };\n\n private handleTrailingClick = (event: MouseEvent) => {\n if (this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n const target = event.target as HTMLElement;\n\n // Check if the clicked element or any of its parents is an interactive component\n let currentElement = target;\n while (currentElement && currentElement !== this.host) {\n if (this.isInteractiveElement(currentElement)) {\n // Interactive element clicked - stop propagation to prevent main event\n event.stopPropagation();\n return;\n }\n currentElement = currentElement.parentElement;\n }\n\n // Non-interactive element clicked - trigger main action\n event.stopPropagation();\n this.ifxActionListItemClick.emit({\n value: this.value,\n href: this.href,\n target: this.target,\n component: this,\n });\n\n // If href is provided, automatically navigate\n if (this.href) {\n if (this.target === '_blank') {\n window.open(this.href, this.target);\n } else {\n window.location.href = this.href;\n }\n }\n };\n\n private isInteractiveElement = (element: HTMLElement): boolean => {\n // Get the tag name, handling both custom elements and standard HTML\n const tagName = element.tagName.toUpperCase();\n\n // List of Infineon components that should block main event\n const interactiveInfineonComponents = [\n 'IFX-BUTTON',\n 'IFX-CHECKBOX',\n 'IFX-SWITCH'\n ];\n\n // Check if it's an interactive Infineon component\n return interactiveInfineonComponents.includes(tagName);\n };\n\n private handleMainKeyDown = (event: KeyboardEvent) => {\n if (this.disabled) return;\n\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n\n // Always trigger main action via keyboard, regardless of interactive elements\n this.handleMainClick(event as any);\n }\n };\n\n private handleLeadingKeyDown = (event: KeyboardEvent) => {\n if (this.disabled) return;\n\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n\n const leadingSlot = this.host.shadowRoot?.querySelector('slot[name=\"leading\"]') as HTMLSlotElement;\n const assignedElements = leadingSlot?.assignedElements() \|\| [];\n\n // Find first interactive element and activate it\n const firstInteractive = assignedElements.find(el =>\n this.isInteractiveElement(el as HTMLElement)\n ) as HTMLElement;\n\n if (firstInteractive) {\n firstInteractive.focus();\n firstInteractive.click();\n }\n }\n };\n\n private handleTrailingKeyDown = (event: KeyboardEvent) => {\n if (this.disabled) return;\n\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n\n const trailingSlot = this.host.shadowRoot?.querySelector('slot[name=\"trailing\"]') as HTMLSlotElement;\n const assignedElements = trailingSlot?.assignedElements() \|\| [];\n\n // Find first interactive element and activate it\n const firstInteractive = assignedElements.find(el =>\n this.isInteractiveElement(el as HTMLElement)\n ) as HTMLElement;\n\n if (firstInteractive) {\n firstInteractive.focus();\n firstInteractive.click();\n }\n }\n };\n\n private hasSlotContent(slotName: string): boolean {\n const slot = this.host.querySelector(`[slot=\"${slotName}\"]`);\n return !!slot;\n }\n\n componentDidLoad() {\n // Apply disabled state to interactive elements in slots\n this.updateSlotElementsDisabledState();\n }\n\n componentDidUpdate() {\n // Apply disabled state to interactive elements in slots when disabled prop changes\n this.updateSlotElementsDisabledState();\n }\n\n private updateSlotElementsDisabledState = () => {\n // Only handle interactive components that should be disabled\n const interactiveComponents = ['ifx-checkbox', 'ifx-switch', 'ifx-button'];\n\n // Get all slotted elements\n const slots = this.host.querySelectorAll('[slot]');\n\n slots.forEach(slottedElement => {\n // Check if the slotted element itself is an interactive component\n if (interactiveComponents.includes(slottedElement.tagName.toLowerCase())) {\n this.setElementDisabledState(slottedElement as HTMLElement);\n }\n\n // Also check for nested interactive components within the slotted element\n interactiveComponents.forEach(componentTag => {\n const nestedElements = slottedElement.querySelectorAll(componentTag);\n nestedElements.forEach(nestedElement => {\n this.setElementDisabledState(nestedElement as HTMLElement);\n });\n });\n });\n };\n\n private setElementDisabledState = (element: HTMLElement) => {\n if (this.disabled) {\n element.setAttribute('disabled', 'true');\n } else {\n element.removeAttribute('disabled');\n }\n }; render() {\n const isClickable = !this.disabled && (this.href \|\| this.value);\n const ariaLabel = this.itemAriaLabel \|\| `${this.itemTitle}${this.description ? ` - ${this.description}` : ''}`;\n const hasLeadingContent = this.hasSlotContent('leading');\n const hasTrailingContent = this.hasSlotContent('trailing');\n\n return (\n <div\n class={classNames(\n 'action-list-item',\n this.disabled && 'action-list-item--disabled',\n isClickable && 'action-list-item--clickable'\n )}\n role=\"listitem\"\n tabIndex={isClickable ? 0 : -1}\n aria-label={ariaLabel}\n aria-disabled={this.disabled ? 'true' : undefined}\n onClick={this.handleMainClick}\n onKeyDown={this.handleMainKeyDown}\n >\n {/ Leading Item Container - only render if content exists /}\n {hasLeadingContent && (\n <div\n class=\"action-list-item__leading\"\n onClick={this.handleLeadingClick}\n onKeyDown={this.handleLeadingKeyDown}\n >\n <slot name=\"leading\"></slot>\n </div>\n )}\n\n {/ Text Container /}\n <div class=\"action-list-item__content\">\n <div class=\"action-list-item__title\">\n {this.itemTitle}\n </div>\n {this.description && (\n <div class=\"action-list-item__description\">\n {this.description}\n </div>\n )}\n </div>\n\n {/ Trailing Item Container - only render if content exists */}\n {hasTrailingContent && (\n <div\n class=\"action-list-item__trailing\"\n onClick={this.handleTrailingClick}\n onKeyDown={this.handleTrailingKeyDown}\n >\n <slot name=\"trailing\"></slot>\n </div>\n )}\n </div>\n );\n }\n}"],"version":3}
1	+ {"file":"ifx-action-list-item.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/action-list/action-list-item.scss?tag=ifx-action-list-item&encapsulation=shadow","src/components/action-list/action-list-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.action-list-item {\r\n display: flex;\r\n align-items: center;\r\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\r\n background: tokens.$ifxColorBaseWhite;\r\n transition: background-color 0.2s ease;\r\n cursor: default;\r\n\r\n &--clickable {\r\n cursor: pointer;\r\n\r\n &:hover:not(.action-list-item--disabled) {\r\n background: tokens.$ifxColorEngineering100;\r\n }\r\n\r\n &:focus:not(.action-list-item--disabled) {\r\n outline: none;\r\n //outline: 2px solid tokens.$ifxColorOcean500;\r\n //outline-offset: -2px;\r\n background: tokens.$ifxColorEngineering100;\r\n }\r\n\r\n &:active:not(.action-list-item--disabled) {\r\n background: tokens.$ifxColorEngineering200;\r\n }\r\n }\r\n\r\n &--disabled {\r\n // Apply disabled color to all slotted icons\r\n ::slotted(ifx-icon) {\r\n color: tokens.$ifxColorEngineering300;\r\n }\r\n\r\n // Also apply to nested icons within slotted elements\r\n ::slotted() {\r\n ifx-icon {\r\n color: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n }\r\n\r\n &__leading {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-right: tokens.$ifxSpace200;\r\n flex-shrink: 0;\r\n }\r\n\r\n &__content {\r\n flex: 1;\r\n min-width: 0; // Allows text to truncate\r\n }\r\n\r\n &__title {\r\n font-weight: tokens.$ifxFontWeightSemibold;\r\n font-size: tokens.$ifxFontSizeM;\r\n line-height: tokens.$ifxLineHeightM;\r\n color: tokens.$ifxColorBaseBlack;\r\n\r\n // Truncate long titles\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n\r\n // Disabled state\r\n .action-list-item--disabled & {\r\n color: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n\r\n &__description {\r\n font-size: tokens.$ifxFontSizeS;\r\n line-height: tokens.$ifxLineHeightS;\r\n color: tokens.$ifxColorEngineering500;\r\n margin-top: tokens.$ifxSpace25;\r\n\r\n // Disabled state\r\n .action-list-item--disabled & {\r\n color: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n\r\n &__trailing {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-left: tokens.$ifxSpace200;\r\n flex-shrink: 0;\r\n gap: 16px;\r\n }\r\n}","import { Component, h, Prop, Element, Event, EventEmitter, Watch } from '@stencil/core';\r\nimport classNames from 'classnames';\r\n\r\nexport interface ActionListItemClickEvent {\r\n value?: string;\r\n href?: string;\r\n target?: string;\r\n component?: ActionListItem;\r\n}\r\n\r\n@Component({\r\n tag: 'ifx-action-list-item',\r\n styleUrl: 'action-list-item.scss',\r\n shadow: true,\r\n})\r\nexport class ActionListItem {\r\n @Element() host: HTMLElement;\r\n\r\n /\r\n The title text displayed in the item\r\n /\r\n @Prop() itemTitle: string;\r\n\r\n /\r\n The description text displayed below the title\r\n /\r\n @Prop() description?: string;\r\n\r\n /\r\n Value associated with this item\r\n /\r\n @Prop() value?: string;\r\n\r\n /\r\n URL to navigate to when item is clicked\r\n /\r\n @Prop() href?: string;\r\n\r\n /\r\n Target for the link navigation\r\n * @default '_self'\r\n /\r\n @Prop() target: string = '_self';\r\n\r\n /\r\n Controls whether the item is disabled\r\n * @default false\r\n /\r\n @Prop() disabled: boolean = false;\r\n\r\n /\r\n Aria label for accessibility support\r\n /\r\n @Prop() itemAriaLabel?: string;\r\n\r\n /\r\n Event emitted when the main item area is clicked\r\n /\r\n @Event() ifxActionListItemClick: EventEmitter<ActionListItemClickEvent>;\r\n\r\n @Watch('disabled')\r\n onDisabledChange() {\r\n // Update interactive elements when disabled state changes\r\n this.updateSlotElementsDisabledState();\r\n }\r\n\r\n private handleMainClick = (event: MouseEvent) => {\r\n if (this.disabled) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n return;\r\n }\r\n\r\n // Check if clicked element is inside leading or trailing areas\r\n const leadingElement = this.host.shadowRoot?.querySelector('.action-list-item__leading');\r\n const trailingElement = this.host.shadowRoot?.querySelector('.action-list-item__trailing');\r\n\r\n if (leadingElement?.contains(event.target as Node) \|\| trailingElement?.contains(event.target as Node)) {\r\n return; // Don't trigger main click if clicking on leading/trailing areas\r\n }\r\n\r\n // Always emit main event when clicking on content area (text), regardless of interactive elements\r\n this.ifxActionListItemClick.emit({\r\n value: this.value,\r\n href: this.href,\r\n target: this.target,\r\n component: this,\r\n });\r\n\r\n // If href is provided, automatically navigate (Link mode)\r\n // If no href is provided, only the event is emitted (Event mode)\r\n if (this.href) {\r\n if (this.target === '_blank') {\r\n window.open(this.href, this.target);\r\n } else {\r\n window.location.href = this.href;\r\n }\r\n }\r\n };\r\n\r\n private handleLeadingClick = (event: MouseEvent) => {\r\n if (this.disabled) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n return;\r\n }\r\n\r\n const target = event.target as HTMLElement;\r\n\r\n // Check if the clicked element or any of its parents is an interactive component\r\n let currentElement = target;\r\n while (currentElement && currentElement !== this.host) {\r\n if (this.isInteractiveElement(currentElement)) {\r\n // Interactive element clicked - stop propagation to prevent main event\r\n event.stopPropagation();\r\n return;\r\n }\r\n currentElement = currentElement.parentElement;\r\n }\r\n\r\n // Non-interactive element clicked - trigger main action\r\n event.stopPropagation();\r\n this.ifxActionListItemClick.emit({\r\n value: this.value,\r\n href: this.href,\r\n target: this.target,\r\n component: this,\r\n });\r\n\r\n // If href is provided, automatically navigate\r\n if (this.href) {\r\n if (this.target === '_blank') {\r\n window.open(this.href, this.target);\r\n } else {\r\n window.location.href = this.href;\r\n }\r\n }\r\n };\r\n\r\n private handleTrailingClick = (event: MouseEvent) => {\r\n if (this.disabled) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n return;\r\n }\r\n\r\n const target = event.target as HTMLElement;\r\n\r\n // Check if the clicked element or any of its parents is an interactive component\r\n let currentElement = target;\r\n while (currentElement && currentElement !== this.host) {\r\n if (this.isInteractiveElement(currentElement)) {\r\n // Interactive element clicked - stop propagation to prevent main event\r\n event.stopPropagation();\r\n return;\r\n }\r\n currentElement = currentElement.parentElement;\r\n }\r\n\r\n // Non-interactive element clicked - trigger main action\r\n event.stopPropagation();\r\n this.ifxActionListItemClick.emit({\r\n value: this.value,\r\n href: this.href,\r\n target: this.target,\r\n component: this,\r\n });\r\n\r\n // If href is provided, automatically navigate\r\n if (this.href) {\r\n if (this.target === '_blank') {\r\n window.open(this.href, this.target);\r\n } else {\r\n window.location.href = this.href;\r\n }\r\n }\r\n };\r\n\r\n private isInteractiveElement = (element: HTMLElement): boolean => {\r\n // Get the tag name, handling both custom elements and standard HTML\r\n const tagName = element.tagName.toUpperCase();\r\n\r\n // List of Infineon components that should block main event\r\n const interactiveInfineonComponents = [\r\n 'IFX-BUTTON',\r\n 'IFX-CHECKBOX',\r\n 'IFX-SWITCH'\r\n ];\r\n\r\n // Check if it's an interactive Infineon component\r\n return interactiveInfineonComponents.includes(tagName);\r\n };\r\n\r\n private handleMainKeyDown = (event: KeyboardEvent) => {\r\n if (this.disabled) return;\r\n\r\n if (event.key === 'Enter' \|\| event.key === ' ') {\r\n event.preventDefault();\r\n\r\n // Always trigger main action via keyboard, regardless of interactive elements\r\n this.handleMainClick(event as any);\r\n }\r\n };\r\n\r\n private handleLeadingKeyDown = (event: KeyboardEvent) => {\r\n if (this.disabled) return;\r\n\r\n if (event.key === 'Enter' \|\| event.key === ' ') {\r\n event.preventDefault();\r\n\r\n const leadingSlot = this.host.shadowRoot?.querySelector('slot[name=\"leading\"]') as HTMLSlotElement;\r\n const assignedElements = leadingSlot?.assignedElements() \|\| [];\r\n\r\n // Find first interactive element and activate it\r\n const firstInteractive = assignedElements.find(el =>\r\n this.isInteractiveElement(el as HTMLElement)\r\n ) as HTMLElement;\r\n\r\n if (firstInteractive) {\r\n firstInteractive.focus();\r\n firstInteractive.click();\r\n }\r\n }\r\n };\r\n\r\n private handleTrailingKeyDown = (event: KeyboardEvent) => {\r\n if (this.disabled) return;\r\n\r\n if (event.key === 'Enter' \|\| event.key === ' ') {\r\n event.preventDefault();\r\n\r\n const trailingSlot = this.host.shadowRoot?.querySelector('slot[name=\"trailing\"]') as HTMLSlotElement;\r\n const assignedElements = trailingSlot?.assignedElements() \|\| [];\r\n\r\n // Find first interactive element and activate it\r\n const firstInteractive = assignedElements.find(el =>\r\n this.isInteractiveElement(el as HTMLElement)\r\n ) as HTMLElement;\r\n\r\n if (firstInteractive) {\r\n firstInteractive.focus();\r\n firstInteractive.click();\r\n }\r\n }\r\n };\r\n\r\n private hasSlotContent(slotName: string): boolean {\r\n const slot = this.host.querySelector(`[slot=\"${slotName}\"]`);\r\n return !!slot;\r\n }\r\n\r\n componentDidLoad() {\r\n // Apply disabled state to interactive elements in slots\r\n this.updateSlotElementsDisabledState();\r\n }\r\n\r\n componentDidUpdate() {\r\n // Apply disabled state to interactive elements in slots when disabled prop changes\r\n this.updateSlotElementsDisabledState();\r\n }\r\n\r\n private updateSlotElementsDisabledState = () => {\r\n // Only handle interactive components that should be disabled\r\n const interactiveComponents = ['ifx-checkbox', 'ifx-switch', 'ifx-button'];\r\n\r\n // Get all slotted elements\r\n const slots = this.host.querySelectorAll('[slot]');\r\n\r\n slots.forEach(slottedElement => {\r\n // Check if the slotted element itself is an interactive component\r\n if (interactiveComponents.includes(slottedElement.tagName.toLowerCase())) {\r\n this.setElementDisabledState(slottedElement as HTMLElement);\r\n }\r\n\r\n // Also check for nested interactive components within the slotted element\r\n interactiveComponents.forEach(componentTag => {\r\n const nestedElements = slottedElement.querySelectorAll(componentTag);\r\n nestedElements.forEach(nestedElement => {\r\n this.setElementDisabledState(nestedElement as HTMLElement);\r\n });\r\n });\r\n });\r\n };\r\n\r\n private setElementDisabledState = (element: HTMLElement) => {\r\n if (this.disabled) {\r\n element.setAttribute('disabled', 'true');\r\n } else {\r\n element.removeAttribute('disabled');\r\n }\r\n }; render() {\r\n const isClickable = !this.disabled && (this.href \|\| this.value);\r\n const ariaLabel = this.itemAriaLabel \|\| `${this.itemTitle}${this.description ? ` - ${this.description}` : ''}`;\r\n const hasLeadingContent = this.hasSlotContent('leading');\r\n const hasTrailingContent = this.hasSlotContent('trailing');\r\n\r\n return (\r\n <div\r\n class={classNames(\r\n 'action-list-item',\r\n this.disabled && 'action-list-item--disabled',\r\n isClickable && 'action-list-item--clickable'\r\n )}\r\n role=\"listitem\"\r\n tabIndex={isClickable ? 0 : -1}\r\n aria-label={ariaLabel}\r\n aria-disabled={this.disabled ? 'true' : undefined}\r\n onClick={this.handleMainClick}\r\n onKeyDown={this.handleMainKeyDown}\r\n >\r\n {/ Leading Item Container - only render if content exists /}\r\n {hasLeadingContent && (\r\n <div\r\n class=\"action-list-item__leading\"\r\n onClick={this.handleLeadingClick}\r\n onKeyDown={this.handleLeadingKeyDown}\r\n >\r\n <slot name=\"leading\"></slot>\r\n </div>\r\n )}\r\n\r\n {/ Text Container /}\r\n <div class=\"action-list-item__content\">\r\n <div class=\"action-list-item__title\">\r\n {this.itemTitle}\r\n </div>\r\n {this.description && (\r\n <div class=\"action-list-item__description\">\r\n {this.description}\r\n </div>\r\n )}\r\n </div>\r\n\r\n {/ Trailing Item Container - only render if content exists */}\r\n {hasTrailingContent && (\r\n <div\r\n class=\"action-list-item__trailing\"\r\n onClick={this.handleTrailingClick}\r\n onKeyDown={this.handleTrailingKeyDown}\r\n >\r\n <slot name=\"trailing\"></slot>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}"],"version":3}

package/dist/components/ifx-action-list.js CHANGED Viewed

@@ -16,7 +16,7 @@ const ActionList = /*@__PURE__*/ proxyCustomElement(class ActionList extends H {
         }
     }
     render() {
-        return (h("div", { key: 'a9da34b5b948204642b94582781d1b74a86dc6f5', class: "action-list", role: "list", "aria-label": this.listAriaLabel }, h("slot", { key: 'bf5dea0baf869e9e072ebe7bfd0ae2104ceb477b' })));
+        return (h("div", { key: '3b5dd123b84e88c458e22fd83e592735c006684b', class: "action-list", role: "list", "aria-label": this.listAriaLabel }, h("slot", { key: 'ed92d35c40ad4b1330296414f61f565c4bf30468' })));
     }
     get el() { return this; }
     static get style() { return actionListCss; }

package/dist/components/ifx-action-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-action-list.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,+LAA+L;;MCUxM,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;;;;;;AAQrB,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACpC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,iBAAiB,EAAE,MAAM,SAAS,CAAC;;;IAItD,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,MAAM,EAAA,YAAA,EACC,IAAI,CAAC,aAAa,EAAA,EAE9B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/action-list/action-list.scss?tag=ifx-action-list&encapsulation=shadow","src/components/action-list/action-list.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.action-list {\n background: tokens.$ifxColorBaseWhite;\n border-radius: tokens.$ifxBorderRadiusNone;\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}","import { Component, h, Prop, 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-action-list',\n styleUrl: 'action-list.scss',\n shadow: true,\n})\nexport class ActionList {\n @Element() el: HTMLElement;\n\n /*\n Aria label for accessibility support\n */\n @Prop() listAriaLabel?: string;\n\n async componentDidLoad() {\n if (!isNestedInIfxComponent(this.el)) {\n const framework = detectFramework();\n trackComponent('ifx-action-list', await framework);\n }\n }\n\n render() {\n return (\n <div\n class=\"action-list\"\n role=\"list\"\n aria-label={this.listAriaLabel}\n >\n <slot></slot>\n </div>\n );\n }\n}"],"version":3}
1	+ {"file":"ifx-action-list.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,+LAA+L;;MCUxM,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;;;;;;AAQrB,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACpC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,iBAAiB,EAAE,MAAM,SAAS,CAAC;;;IAItD,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,MAAM,EAAA,YAAA,EACC,IAAI,CAAC,aAAa,EAAA,EAE9B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/action-list/action-list.scss?tag=ifx-action-list&encapsulation=shadow","src/components/action-list/action-list.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.action-list {\r\n background: tokens.$ifxColorBaseWhite;\r\n border-radius: tokens.$ifxBorderRadiusNone;\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}","import { Component, h, Prop, 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-action-list',\r\n styleUrl: 'action-list.scss',\r\n shadow: true,\r\n})\r\nexport class ActionList {\r\n @Element() el: HTMLElement;\r\n\r\n /*\r\n Aria label for accessibility support\r\n */\r\n @Prop() listAriaLabel?: string;\r\n\r\n async componentDidLoad() {\r\n if (!isNestedInIfxComponent(this.el)) {\r\n const framework = detectFramework();\r\n trackComponent('ifx-action-list', await framework);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div\r\n class=\"action-list\"\r\n role=\"list\"\r\n aria-label={this.listAriaLabel}\r\n >\r\n <slot></slot>\r\n </div>\r\n );\r\n }\r\n}"],"version":3}

package/dist/components/ifx-alert.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { A as Alert, d as defineCustomElement$1 } from './p-CnXEcTdH.js';
+import { A as Alert, d as defineCustomElement$1 } from './p-TR-rcXLt.js';
 const IfxAlert = Alert;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-basic-table.js CHANGED Viewed

@@ -6,10 +6,10 @@ import { c as classNames } from './p-DMLRPGid.js';
 class CustomNoRowsOverlay {
     init(params) {
         this.eGui = document.createElement('div');
-        this.eGui.innerHTML = `
-            <div role="presentation" class="ag-overlay-loading-center" >
-               ${params.noRowsMessageFunc()}
-            </div>
+        this.eGui.innerHTML = `
+            <div role="presentation" class="ag-overlay-loading-center" >
+               ${params.noRowsMessageFunc()}
+            </div>
         `;
     }
     getGui() {
@@ -23,8 +23,8 @@ class CustomNoRowsOverlay {
 class CustomLoadingOverlay {
     init(_params) {
         this.eGui = document.createElement('div');
-        this.eGui.innerHTML = `<div class="ag-overlay-loading-center" role="presentation">
-<ifx-spinner></ifx-spinner>
+        this.eGui.innerHTML = `<div class="ag-overlay-loading-center" role="presentation">
+<ifx-spinner></ifx-spinner>
             </div>`;
     }
     getGui() {
@@ -185,7 +185,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
         return {};
     }
     render() {
-        return (h(Host, { key: '9942dac43b669841cc6ce4175cbd95c49b8fdc70' }, h("div", { key: '27f2391f4b757f2042bf5fcb510cf67c07cfe0c6', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '3ebbc1941e0142bdd1078a5d99e8bf63b3d82a47', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
+        return (h(Host, { key: '3989f32445eaad3e4f248bcb4f071caecd08af3c' }, h("div", { key: 'd20a1025b3964cbd523d364adf78d5213824c231', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: 'fe97e0dccf8b45aec5603085fa8a97ebac594340', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
     }
     get host() { return this; }
     static get style() { return tableCss; }

package/dist/components/ifx-basic-table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-basic-table.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/table-basic-version/customNoRowsOverlay.ts","src/components/table-basic-version/customLoadingOverlay.ts","src/components/table-basic-version/table.scss?tag=ifx-basic-table","src/components/table-basic-version/table.tsx"],"sourcesContent":["import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomNoRowsOverlay implements ICellRendererComp {\n eGui!: HTMLElement;\n\n init(params: ICellRendererParams & { noRowsMessageFunc: () => string }) {\n this.eGui = document.createElement('div');\n this.eGui.innerHTML = `\n <div role=\"presentation\" class=\"ag-overlay-loading-center\" >\n ${params.noRowsMessageFunc()}\n </div>\n `;\n }\n\n getGui() {\n return this.eGui;\n }\n\n refresh(_params: ICellRendererParams): boolean {\n return false;\n }\n}","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomLoadingOverlay implements ICellRendererComp {\n eGui!: HTMLElement;\n\n init(_params: ICellRendererParams & { loadingMessage: string }) {\n this.eGui = document.createElement('div');\n this.eGui.innerHTML = `<div class=\"ag-overlay-loading-center\" role=\"presentation\">\n<ifx-spinner></ifx-spinner>\n </div>`;\n }\n\n getGui() {\n return this.eGui;\n }\n\n refresh(_params: ICellRendererParams): boolean {\n return false;\n }\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n@import \"~ag-grid-community/styles/ag-grid.css\";\n// @import \"~ag-grid-community/styles/ag-theme-alpine.css\";\n\n// :host {\n// --table-height: '200px';\n// /* Default value /\n// } ag-ltr .ag-header-cell-resize\n\n.zebra {\n & .ag-row-odd {\n background-color: tokens.$ifxColorEngineering100!important;\n }\n\n & .ag-row {\n border-bottom: none!important;\n }\n}\n\n.ag-header-viewport {\n background-color: tokens.$ifxColorEngineering200!important;\n}\n\n.table-wrapper {\n overflow-x: auto;\n width: 100%;\n}\n\n.table-wrapper .ag-root-wrapper-body {\n height: auto !important;\n min-height: 100px !important;\n min-width: 100px;\n}\n\n.ifx-ag-grid {\n display: grid;\n height: 100%;\n width: 100%;\n min-width: 100px;\n padding-bottom: tokens.$ifxSpace100;\n overflow-x: auto;\n}\n\n\n.ifx-ag-grid .ag-header-cell::after {\n outline: none !important;\n border: none !important;\n box-shadow: none !important;\n}\n\n.ifx-ag-grid .ag-header-cell:focus {\n outline: none !important;\n}\n\n.ifx-ag-grid :not(.ag-header-cell):focus {\n outline: none;\n}\n\n.ifx-ag-grid .ag-header-cell:not(:last-child)::before {\n content: '';\n position: absolute;\n right: 0;\n top: calc(50% - 12px);\n height: 24px;\n width: 1px;\n background-color: tokens.$ifxColorEngineering300;\n}\n\n.ag-overlay-loading-center {\n border: none;\n background: none;\n border-radius: none;\n box-shadow: none;\n}\n\n\n.ag-root-wrapper {\n border: 1px solid tokens.$ifxColorEngineering200;\n}\n\n.ag-header {\n background-color: tokens.$ifxColorEngineering100;\n border-bottom: none;\n\n &.ag-header-active {\n outline: none !important;\n border-color: #0A8276 !important;\n }\n}\n\n.ag-header-cell {\n padding-left: 16px;\n padding-right: 16px;\n gap: 4px;\n}\n\n\n.ag-header-cell-focus {\n border: none !important;\n outline: none !important;\n}\n\n.ag-header-cell-text {\n font-size: 13px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px;\n color: tokens.$ifxColorBaseBlack;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n}\n\n.ag-row-focus {\n background-color: inherit !important;\n /* Reset the hover color to the row's original color /\n}\n\n.ag-row-hover {\n background-color: tokens.$ifxColorBaseWhite !important; //inherit !important;\n / Reset the hover color to the row's original color /\n}\n\n\n.ag-cell-focus {\n border: none !important;\n outline: none !important;\n background-color: inherit !important;\n}\n\n\n\n.ag-row {\n background-color: tokens.$ifxColorBaseWhite;\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n z-index: 1; //ensure the stacking order when used inside js frameworks\n}\n\n.ag-row-odd {\n background-color: tokens.$ifxColorBaseWhite;\n}\n\n.ag-cell {\n display: flex;\n padding-left: 16px;\n padding-right: 16px;\n white-space: pre-line;\n min-height: 40px; \n height: auto;\n}\n\n.ag-ltr .ag-sort-indicator-icon {\n padding-left: 0px;\n vertical-align: bottom;\n line-height: 12px;\n}\n\n.unsort-icon-custom-color {\n color: tokens.$ifxColorEngineering400;\n}\n\n// Mobile optimization for horizontal scrolling\n@media (max-width: tokens.$ifxBreakpointM) {\n .table-wrapper {\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n }\n\n .ifx-ag-grid {\n min-width: 400px;\n }\n\n .ag-root-wrapper {\n min-width: 100%;\n }\n\n .ag-header-cell,\n .ag-cell {\n min-width: 100px;\n white-space: nowrap;\n }\n\n .table-wrapper {\n margin-bottom: tokens.$ifxSpace200;\n }\n}\n","import { Component, h, Element, Host, Prop, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport { createGrid, FirstDataRenderedEvent, GridApi, GridOptions } from 'ag-grid-community';\nimport { CustomNoRowsOverlay } from './customNoRowsOverlay';\nimport { CustomLoadingOverlay } from './customLoadingOverlay';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'ifx-basic-table',\n styleUrl: 'table.scss',\n shadow: false // only works with shadowdom off because we are using an external library\n})\nexport class Table {\n @State() gridOptions: GridOptions;\n @Prop() cols: any[] \| string;\n @Prop() rows: any[] \| string;\n @State() columnDefs: any[] = [];\n @State() rowData: any[] = [];\n @Prop() rowHeight: string = 'default';\n @Prop() tableHeight: string = 'auto';\n @Prop() variant: string = 'default'\n @State() uniqueKey: string;\n @Element() host: HTMLElement;\n \n private container: HTMLDivElement;\n private gridApi: GridApi; \n private gridInitialized = false;\n\n componentWillLoad() {\n this.uniqueKey = `unique-${Math.floor(Math.random() 1000000)}`;\n this.setColsAndRows(); //needed?\n this.setGridOptions();\n }\n\n setGridOptions() {\n this.gridOptions = {\n rowHeight: this.rowHeight === 'default' ? 40 : 32,\n headerHeight: 40,\n defaultColDef: {\n resizable: true,\n autoHeight: true,\n },\n suppressCellFocus: false,\n enableCellTextSelection: true,\n suppressDragLeaveHidesColumns: true,\n suppressRowHoverHighlight: true,\n onFirstDataRendered: this.onFirstDataRendered,\n columnDefs: this.columnDefs,\n rowData: this.rowData,\n loadingOverlayComponent: CustomLoadingOverlay,\n noRowsOverlayComponent: CustomNoRowsOverlay,\n noRowsOverlayComponentParams: {\n noRowsMessageFunc: () =>\n 'No rows found at: ' + new Date().toLocaleTimeString(),\n },\n icons: {\n sortAscending: '<ifx-icon icon=\"arrow-triangle-up-16\"></ifx-icon>',\n sortDescending: '<ifx-icon icon=\"arrow-triangle-down-16\"></ifx-icon>',\n sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrow-triangle-vertikal-16\"></ifx-icon></a>',\n },\n rowDragManaged: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\n animateRows: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\n };\n }\n\n setColsAndRows() {\n if (typeof this.rows === 'string' && typeof this.cols === 'string') {\n try {\n if(this.cols) {\n this.columnDefs = JSON.parse(this.cols);\n }\n if(this.rows) {\n this.rowData = JSON.parse(this.rows);\n }\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if ((Array.isArray(this.rows) \|\| typeof this.rows === 'object') && (Array.isArray(this.cols) \|\| typeof this.cols === 'object')) {\n this.columnDefs = this.cols;\n this.rowData = this.rows;\n } else {\n console.error('Unexpected value for cols and rows:', this.rows, this.cols);\n }\n }\n\n getRowData() {\n let rows: any[] = [];\n if (typeof this.rows === 'string') {\n try {\n if(this.rows) {\n rows = JSON.parse(this.rows);\n }\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if (Array.isArray(this.rows) \|\| typeof this.rows === 'object') {\n rows = this.rows;\n } else {\n console.error('Unexpected value for rows: ', this.rows);\n }\n\n return rows;\n }\n\n getColData() {\n let cols: any[] = [];\n\n if (typeof this.cols === 'string') {\n try {\n if(this.cols) { \n cols = JSON.parse(this.cols);\n }\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if (Array.isArray(this.cols) \|\| typeof this.cols === 'object') {\n cols = this.cols;\n } else {\n console.error('Unexpected value for cols: ', this.cols);\n }\n return cols;\n }\n\n onFirstDataRendered(params: FirstDataRenderedEvent) {\n params.api.sizeColumnsToFit();\n }\n\n componentWillUpdate() {\n this.setColsAndRows();\n this.gridOptions.columnDefs = this.columnDefs;\n this.gridOptions.rowData = this.rowData;\n if (this.gridApi) {\n this.gridApi.setGridOption('rowData', this.rowData);\n this.gridApi.setGridOption('columnDefs', this.columnDefs);\n }\n }\n\n async componentDidLoad() {\n if (this.container && !this.gridInitialized) {\n if(!isNestedInIfxComponent(this.host)) { \n const framework = detectFramework();\n trackComponent('ifx-basic-table', await framework)\n }\n this.gridApi = createGrid(this.container, this.gridOptions);\n if (this.gridApi) {\n this.gridApi.sizeColumnsToFit({\n defaultMinWidth: 100,\n });\n this.gridApi.setGridOption('columnDefs', this.getColData());\n this.gridApi.setGridOption('rowData', this.getRowData());\n this.gridInitialized = true; \n }\n }\n }\n\n getClassNames() {\n return classNames(\n this.tableHeight === 'auto' && 'table-wrapper ag-root-wrapper-body',\n 'table-wrapper',\n );\n }\n\n getTableStyle() {\n if (this.tableHeight !== 'auto') {\n return {\n height: this.tableHeight,\n };\n }\n return {};\n }\n\n render() {\n return (\n <Host>\n <div id=\"table-wrapper\" class={this.getClassNames()}>\n <div id={`ifxTable-${this.uniqueKey}`} class={`ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : \"\"}`} style={this.getTableStyle()} ref={(el) => (this.container = el)}></div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ifx-basic-table.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/table-basic-version/customNoRowsOverlay.ts","src/components/table-basic-version/customLoadingOverlay.ts","src/components/table-basic-version/table.scss?tag=ifx-basic-table","src/components/table-basic-version/table.tsx"],"sourcesContent":["import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\r\n\r\nexport class CustomNoRowsOverlay implements ICellRendererComp {\r\n eGui!: HTMLElement;\r\n\r\n init(params: ICellRendererParams & { noRowsMessageFunc: () => string }) {\r\n this.eGui = document.createElement('div');\r\n this.eGui.innerHTML = `\r\n <div role=\"presentation\" class=\"ag-overlay-loading-center\" >\r\n ${params.noRowsMessageFunc()}\r\n </div>\r\n `;\r\n }\r\n\r\n getGui() {\r\n return this.eGui;\r\n }\r\n\r\n refresh(_params: ICellRendererParams): boolean {\r\n return false;\r\n }\r\n}","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\r\n\r\nexport class CustomLoadingOverlay implements ICellRendererComp {\r\n eGui!: HTMLElement;\r\n\r\n init(_params: ICellRendererParams & { loadingMessage: string }) {\r\n this.eGui = document.createElement('div');\r\n this.eGui.innerHTML = `<div class=\"ag-overlay-loading-center\" role=\"presentation\">\r\n<ifx-spinner></ifx-spinner>\r\n </div>`;\r\n }\r\n\r\n getGui() {\r\n return this.eGui;\r\n }\r\n\r\n refresh(_params: ICellRendererParams): boolean {\r\n return false;\r\n }\r\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n@import \"~ag-grid-community/styles/ag-grid.css\";\r\n// @import \"~ag-grid-community/styles/ag-theme-alpine.css\";\r\n\r\n// :host {\r\n// --table-height: '200px';\r\n// /* Default value /\r\n// } ag-ltr .ag-header-cell-resize\r\n\r\n.zebra {\r\n & .ag-row-odd {\r\n background-color: tokens.$ifxColorEngineering100!important;\r\n }\r\n\r\n & .ag-row {\r\n border-bottom: none!important;\r\n }\r\n}\r\n\r\n.ag-header-viewport {\r\n background-color: tokens.$ifxColorEngineering200!important;\r\n}\r\n\r\n.table-wrapper {\r\n overflow-x: auto;\r\n width: 100%;\r\n}\r\n\r\n.table-wrapper .ag-root-wrapper-body {\r\n height: auto !important;\r\n min-height: 100px !important;\r\n min-width: 100px;\r\n}\r\n\r\n.ifx-ag-grid {\r\n display: grid;\r\n height: 100%;\r\n width: 100%;\r\n min-width: 100px;\r\n padding-bottom: tokens.$ifxSpace100;\r\n overflow-x: auto;\r\n}\r\n\r\n\r\n.ifx-ag-grid .ag-header-cell::after {\r\n outline: none !important;\r\n border: none !important;\r\n box-shadow: none !important;\r\n}\r\n\r\n.ifx-ag-grid .ag-header-cell:focus {\r\n outline: none !important;\r\n}\r\n\r\n.ifx-ag-grid :not(.ag-header-cell):focus {\r\n outline: none;\r\n}\r\n\r\n.ifx-ag-grid .ag-header-cell:not(:last-child)::before {\r\n content: '';\r\n position: absolute;\r\n right: 0;\r\n top: calc(50% - 12px);\r\n height: 24px;\r\n width: 1px;\r\n background-color: tokens.$ifxColorEngineering300;\r\n}\r\n\r\n.ag-overlay-loading-center {\r\n border: none;\r\n background: none;\r\n border-radius: none;\r\n box-shadow: none;\r\n}\r\n\r\n\r\n.ag-root-wrapper {\r\n border: 1px solid tokens.$ifxColorEngineering200;\r\n}\r\n\r\n.ag-header {\r\n background-color: tokens.$ifxColorEngineering100;\r\n border-bottom: none;\r\n\r\n &.ag-header-active {\r\n outline: none !important;\r\n border-color: #0A8276 !important;\r\n }\r\n}\r\n\r\n.ag-header-cell {\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n gap: 4px;\r\n}\r\n\r\n\r\n.ag-header-cell-focus {\r\n border: none !important;\r\n outline: none !important;\r\n}\r\n\r\n.ag-header-cell-text {\r\n font-size: 13px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: 20px;\r\n color: tokens.$ifxColorBaseBlack;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n}\r\n\r\n.ag-row-focus {\r\n background-color: inherit !important;\r\n /* Reset the hover color to the row's original color /\r\n}\r\n\r\n.ag-row-hover {\r\n background-color: tokens.$ifxColorBaseWhite !important; //inherit !important;\r\n / Reset the hover color to the row's original color /\r\n}\r\n\r\n\r\n.ag-cell-focus {\r\n border: none !important;\r\n outline: none !important;\r\n background-color: inherit !important;\r\n}\r\n\r\n\r\n\r\n.ag-row {\r\n background-color: tokens.$ifxColorBaseWhite;\r\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\r\n font-size: 13px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n z-index: 1; //ensure the stacking order when used inside js frameworks\r\n}\r\n\r\n.ag-row-odd {\r\n background-color: tokens.$ifxColorBaseWhite;\r\n}\r\n\r\n.ag-cell {\r\n display: flex;\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n white-space: pre-line;\r\n min-height: 40px; \r\n height: auto;\r\n}\r\n\r\n.ag-ltr .ag-sort-indicator-icon {\r\n padding-left: 0px;\r\n vertical-align: bottom;\r\n line-height: 12px;\r\n}\r\n\r\n.unsort-icon-custom-color {\r\n color: tokens.$ifxColorEngineering400;\r\n}\r\n\r\n// Mobile optimization for horizontal scrolling\r\n@media (max-width: tokens.$ifxBreakpointM) {\r\n .table-wrapper {\r\n overflow-x: auto;\r\n -webkit-overflow-scrolling: touch;\r\n }\r\n\r\n .ifx-ag-grid {\r\n min-width: 400px;\r\n }\r\n\r\n .ag-root-wrapper {\r\n min-width: 100%;\r\n }\r\n\r\n .ag-header-cell,\r\n .ag-cell {\r\n min-width: 100px;\r\n white-space: nowrap;\r\n }\r\n\r\n .table-wrapper {\r\n margin-bottom: tokens.$ifxSpace200;\r\n }\r\n}\r\n","import { Component, h, Element, Host, Prop, State } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport { createGrid, FirstDataRenderedEvent, GridApi, GridOptions } from 'ag-grid-community';\r\nimport { CustomNoRowsOverlay } from './customNoRowsOverlay';\r\nimport { CustomLoadingOverlay } from './customLoadingOverlay';\r\nimport classNames from 'classnames';\r\n\r\n@Component({\r\n tag: 'ifx-basic-table',\r\n styleUrl: 'table.scss',\r\n shadow: false // only works with shadowdom off because we are using an external library\r\n})\r\nexport class Table {\r\n @State() gridOptions: GridOptions;\r\n @Prop() cols: any[] \| string;\r\n @Prop() rows: any[] \| string;\r\n @State() columnDefs: any[] = [];\r\n @State() rowData: any[] = [];\r\n @Prop() rowHeight: string = 'default';\r\n @Prop() tableHeight: string = 'auto';\r\n @Prop() variant: string = 'default'\r\n @State() uniqueKey: string;\r\n @Element() host: HTMLElement;\r\n \r\n private container: HTMLDivElement;\r\n private gridApi: GridApi; \r\n private gridInitialized = false;\r\n\r\n componentWillLoad() {\r\n this.uniqueKey = `unique-${Math.floor(Math.random() 1000000)}`;\r\n this.setColsAndRows(); //needed?\r\n this.setGridOptions();\r\n }\r\n\r\n setGridOptions() {\r\n this.gridOptions = {\r\n rowHeight: this.rowHeight === 'default' ? 40 : 32,\r\n headerHeight: 40,\r\n defaultColDef: {\r\n resizable: true,\r\n autoHeight: true,\r\n },\r\n suppressCellFocus: false,\r\n enableCellTextSelection: true,\r\n suppressDragLeaveHidesColumns: true,\r\n suppressRowHoverHighlight: true,\r\n onFirstDataRendered: this.onFirstDataRendered,\r\n columnDefs: this.columnDefs,\r\n rowData: this.rowData,\r\n loadingOverlayComponent: CustomLoadingOverlay,\r\n noRowsOverlayComponent: CustomNoRowsOverlay,\r\n noRowsOverlayComponentParams: {\r\n noRowsMessageFunc: () =>\r\n 'No rows found at: ' + new Date().toLocaleTimeString(),\r\n },\r\n icons: {\r\n sortAscending: '<ifx-icon icon=\"arrow-triangle-up-16\"></ifx-icon>',\r\n sortDescending: '<ifx-icon icon=\"arrow-triangle-down-16\"></ifx-icon>',\r\n sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrow-triangle-vertikal-16\"></ifx-icon></a>',\r\n },\r\n rowDragManaged: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\r\n animateRows: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\r\n };\r\n }\r\n\r\n setColsAndRows() {\r\n if (typeof this.rows === 'string' && typeof this.cols === 'string') {\r\n try {\r\n if(this.cols) {\r\n this.columnDefs = JSON.parse(this.cols);\r\n }\r\n if(this.rows) {\r\n this.rowData = JSON.parse(this.rows);\r\n }\r\n } catch (err) {\r\n console.error('Failed to parse input:', err);\r\n }\r\n } else if ((Array.isArray(this.rows) \|\| typeof this.rows === 'object') && (Array.isArray(this.cols) \|\| typeof this.cols === 'object')) {\r\n this.columnDefs = this.cols;\r\n this.rowData = this.rows;\r\n } else {\r\n console.error('Unexpected value for cols and rows:', this.rows, this.cols);\r\n }\r\n }\r\n\r\n getRowData() {\r\n let rows: any[] = [];\r\n if (typeof this.rows === 'string') {\r\n try {\r\n if(this.rows) {\r\n rows = JSON.parse(this.rows);\r\n }\r\n } catch (err) {\r\n console.error('Failed to parse input:', err);\r\n }\r\n } else if (Array.isArray(this.rows) \|\| typeof this.rows === 'object') {\r\n rows = this.rows;\r\n } else {\r\n console.error('Unexpected value for rows: ', this.rows);\r\n }\r\n\r\n return rows;\r\n }\r\n\r\n getColData() {\r\n let cols: any[] = [];\r\n\r\n if (typeof this.cols === 'string') {\r\n try {\r\n if(this.cols) { \r\n cols = JSON.parse(this.cols);\r\n }\r\n } catch (err) {\r\n console.error('Failed to parse input:', err);\r\n }\r\n } else if (Array.isArray(this.cols) \|\| typeof this.cols === 'object') {\r\n cols = this.cols;\r\n } else {\r\n console.error('Unexpected value for cols: ', this.cols);\r\n }\r\n return cols;\r\n }\r\n\r\n onFirstDataRendered(params: FirstDataRenderedEvent) {\r\n params.api.sizeColumnsToFit();\r\n }\r\n\r\n componentWillUpdate() {\r\n this.setColsAndRows();\r\n this.gridOptions.columnDefs = this.columnDefs;\r\n this.gridOptions.rowData = this.rowData;\r\n if (this.gridApi) {\r\n this.gridApi.setGridOption('rowData', this.rowData);\r\n this.gridApi.setGridOption('columnDefs', this.columnDefs);\r\n }\r\n }\r\n\r\n async componentDidLoad() {\r\n if (this.container && !this.gridInitialized) {\r\n if(!isNestedInIfxComponent(this.host)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-basic-table', await framework)\r\n }\r\n this.gridApi = createGrid(this.container, this.gridOptions);\r\n if (this.gridApi) {\r\n this.gridApi.sizeColumnsToFit({\r\n defaultMinWidth: 100,\r\n });\r\n this.gridApi.setGridOption('columnDefs', this.getColData());\r\n this.gridApi.setGridOption('rowData', this.getRowData());\r\n this.gridInitialized = true; \r\n }\r\n }\r\n }\r\n\r\n getClassNames() {\r\n return classNames(\r\n this.tableHeight === 'auto' && 'table-wrapper ag-root-wrapper-body',\r\n 'table-wrapper',\r\n );\r\n }\r\n\r\n getTableStyle() {\r\n if (this.tableHeight !== 'auto') {\r\n return {\r\n height: this.tableHeight,\r\n };\r\n }\r\n return {};\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div id=\"table-wrapper\" class={this.getClassNames()}>\r\n <div id={`ifxTable-${this.uniqueKey}`} class={`ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : \"\"}`} style={this.getTableStyle()} ref={(el) => (this.container = el)}></div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/ifx-breadcrumb-item-label.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
-import { d as defineCustomElement$2 } from './p-DhNY6ZGA.js';
+import { d as defineCustomElement$2 } from './p-BnjY2AJX.js';
 const breadcrumbItemLabelCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.breadcrumb-item-label-container{display:flex;align-items:center;gap:8px;text-decoration:none;color:#1D1D1D}.breadcrumb-item-label-container.margin{margin-left:16px}.breadcrumb-item-label-container ifx-icon:empty{display:none}.breadcrumb-item-label-container .label-icon-wrapper{display:inline-flex}.breadcrumb-item-label-container .menu-icon-wrapper{display:flex;justify-content:center;align-items:center;width:16px;height:16px}.breadcrumb-item-label-container .menu-icon-wrapper.hide{display:none}.breadcrumb-item-label-container .menu-icon-wrapper ifx-icon{transition:0.3s}.breadcrumb-item-label-container .menu-icon-wrapper.show ifx-icon{transition:0.3s;transform:rotate(180deg)}";
@@ -17,7 +17,7 @@ const BreadcrumbItemLabel = /*@__PURE__*/ proxyCustomElement(class BreadcrumbIte
         this.breadcrumbMenuIconWrapper.emit(menuWrapper);
     }
     render() {
-        return (h("a", { key: '7e5dbe02aa52451f7a5d972635efe4a43ecb1f6c', href: this.href, target: this.target, class: "breadcrumb-item-label-container", role: 'link' }, h("ifx-icon", { key: 'f441ce13b8c16b94511f75d18de8296e7c6b468e', icon: this.icon, "aria-hidden": "true" }), h("span", { key: 'cbeb92d41edb4ba9d7a2c44b1d024eb41f6344e8', class: "label-wrapper" }, h("slot", { key: '8e5d86e84c1005ec8cf4ec1066d4c33a72f848e2' })), h("span", { key: 'b2f401a1ee8c6a5f792c42a06f3a5534773c8158', class: "menu-icon-wrapper", "aria-hiden": "true" }, h("ifx-icon", { key: 'e93b04e4fa9f8b916eb11be53f613668808dce5f', icon: "chevron-down-16" }))));
+        return (h("a", { key: '0df8c85ff6842301df2c75f00ced6a0d0ab09fe8', href: this.href, target: this.target, class: "breadcrumb-item-label-container", role: 'link' }, h("ifx-icon", { key: '64622dca43720e5e648716eda0e2e82b41e3c05a', icon: this.icon, "aria-hidden": "true" }), h("span", { key: '303111b07a09ad6cacd0543886a30c870b5c954a', class: "label-wrapper" }, h("slot", { key: '6d1ffb7974ff5b99cd683a7ba7bdc843801c49fc' })), h("span", { key: '2dc0bf3fecba920428d7070c0c7f21a9642d203c', class: "menu-icon-wrapper", "aria-hiden": "true" }, h("ifx-icon", { key: '13b8fe74cad022079aade7c495d69e9cd3935aac', icon: "chevron-down-16" }))));
     }
     get el() { return this; }
     static get style() { return breadcrumbItemLabelCss; }

package/dist/components/ifx-breadcrumb-item-label.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-breadcrumb-item-label.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,8uBAA8uB;;MCOhwB,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;AALhC,IAAA,WAAA,GAAA;;;;;AAQU,QAAA,IAAM,CAAA,MAAA,GAAW,OAAO;AAuBjC;IAnBC,gBAAgB,GAAA;AACd,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kCAAkC,CAAC;QACtF,MAAM,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,oBAAoB,CAAC;AACjE,QAAA,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,WAAW,CAAC;;IAGlD,MAAM,GAAA;QACJ,QACE,0DAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM,EAAA,EAC1F,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,aAAA,EAAc,MAAM,EAAY,CAAA,EACzD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACR,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,mBAAmB,EAAA,YAAA,EAAY,MAAM,EAAA,EAChD,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/breadcrumb/breadcrumb-item-label.scss?tag=ifx-breadcrumb-item-label&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item-label.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-item-label-container {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n\n &.margin {\n margin-left: 16px;\n }\n\n & ifx-icon:empty {\n display: none;\n }\n\n & .label-icon-wrapper {\n display: inline-flex;\n }\n\n & .menu-icon-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n\n &.hide {\n display: none;\n }\n\n & ifx-icon {\n transition: .3s;\n }\n\n &.show {\n & ifx-icon {\n transition: .3s;\n transform: rotate(180deg);\n }\n }\n }\n}","import { Component, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-breadcrumb-item-label',\n styleUrl: 'breadcrumb-item-label.scss',\n shadow: true,\n})\nexport class BreadcrumbItemLabel {\n @Prop() icon: string;\n @Prop() href: string;\n @Prop() target: string = \"_self\"\n @Element() el;\n @Event() breadcrumbMenuIconWrapper: EventEmitter<CustomEvent>;\n\n componentDidLoad() { \n const container = this.el.shadowRoot.querySelector('.breadcrumb-item-label-container')\n const menuWrapper = container.querySelector('.menu-icon-wrapper')\n this.breadcrumbMenuIconWrapper.emit(menuWrapper)\n }\n\n render() {\n return (\n <a href={this.href} target={this.target} class=\"breadcrumb-item-label-container\" role='link'>\n <ifx-icon icon={this.icon} aria-hidden=\"true\"></ifx-icon>\n <span class=\"label-wrapper\">\n <slot />\n </span>\n <span class=\"menu-icon-wrapper\" aria-hiden=\"true\">\n <ifx-icon icon=\"chevron-down-16\"></ifx-icon>\n </span>\n </a>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ifx-breadcrumb-item-label.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,8uBAA8uB;;MCOhwB,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;AALhC,IAAA,WAAA,GAAA;;;;;AAQU,QAAA,IAAM,CAAA,MAAA,GAAW,OAAO;AAuBjC;IAnBC,gBAAgB,GAAA;AACd,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kCAAkC,CAAC;QACtF,MAAM,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,oBAAoB,CAAC;AACjE,QAAA,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,WAAW,CAAC;;IAGlD,MAAM,GAAA;QACJ,QACE,0DAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM,EAAA,EAC1F,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,aAAA,EAAc,MAAM,EAAY,CAAA,EACzD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACR,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,mBAAmB,EAAA,YAAA,EAAY,MAAM,EAAA,EAChD,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/breadcrumb/breadcrumb-item-label.scss?tag=ifx-breadcrumb-item-label&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item-label.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.breadcrumb-item-label-container {\r\n display: flex;\r\n align-items: center;\r\n gap: tokens.$ifxSpace100;\r\n text-decoration: none;\r\n color: tokens.$ifxColorBaseBlack;\r\n\r\n &.margin {\r\n margin-left: 16px;\r\n }\r\n\r\n & ifx-icon:empty {\r\n display: none;\r\n }\r\n\r\n & .label-icon-wrapper {\r\n display: inline-flex;\r\n }\r\n\r\n & .menu-icon-wrapper {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: tokens.$ifxSize200;\r\n height: tokens.$ifxSize200;\r\n\r\n &.hide {\r\n display: none;\r\n }\r\n\r\n & ifx-icon {\r\n transition: .3s;\r\n }\r\n\r\n &.show {\r\n & ifx-icon {\r\n transition: .3s;\r\n transform: rotate(180deg);\r\n }\r\n }\r\n }\r\n}","import { Component, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-breadcrumb-item-label',\r\n styleUrl: 'breadcrumb-item-label.scss',\r\n shadow: true,\r\n})\r\nexport class BreadcrumbItemLabel {\r\n @Prop() icon: string;\r\n @Prop() href: string;\r\n @Prop() target: string = \"_self\"\r\n @Element() el;\r\n @Event() breadcrumbMenuIconWrapper: EventEmitter<CustomEvent>;\r\n\r\n componentDidLoad() { \r\n const container = this.el.shadowRoot.querySelector('.breadcrumb-item-label-container')\r\n const menuWrapper = container.querySelector('.menu-icon-wrapper')\r\n this.breadcrumbMenuIconWrapper.emit(menuWrapper)\r\n }\r\n\r\n render() {\r\n return (\r\n <a href={this.href} target={this.target} class=\"breadcrumb-item-label-container\" role='link'>\r\n <ifx-icon icon={this.icon} aria-hidden=\"true\"></ifx-icon>\r\n <span class=\"label-wrapper\">\r\n <slot />\r\n </span>\r\n <span class=\"menu-icon-wrapper\" aria-hiden=\"true\">\r\n <ifx-icon icon=\"chevron-down-16\"></ifx-icon>\r\n </span>\r\n </a>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/ifx-breadcrumb-item.js CHANGED Viewed

@@ -101,7 +101,7 @@ const BreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class BreadcrumbItem ext
         }
     }
     render() {
-        return (h("li", { key: 'a089ea29fc59af41abc50c33749e5ae1b10ca676', class: 'breadcrumb-parent', "aria-current": `${this.isLastItem ? 'page' : ""}` }, h("li", { key: 'f4b3fb7d67b7dee11607194a6193cd55f3f80963', 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" }, h("slot", { key: '5b6b54e8d95d2378e12a4ce891a1ce3c0ab4fa57', name: 'label' }), h("div", { key: '073d8a8be471e4b7fc2e9082026a19ada1c30d17', id: this.uniqueId, class: "dropdown-menu", "aria-expanded": this.isDropdownMenuOpen(), "aria-label": "Dropdown menu" }, h("slot", { key: 'e40bed7c7686a96ffaf6b560b32215c5dd65e26b' }))), !this.isLastItem && h("span", { key: '1b992e7d60c09a445146be12f0cc06aa7ef40dc0', class: "breadcrumb-divider", "aria-hidden": "true" }, "/")));
+        return (h("li", { key: '0ee6ed799adc858ad01d1b2d9460eafc1e613fd2', class: 'breadcrumb-parent', "aria-current": `${this.isLastItem ? 'page' : ""}` }, h("li", { key: 'dd4a8bb50869e19a9eadc468096e4b12728c0e27', 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" }, h("slot", { key: 'ec4d8d34298aeb16be0083a993836bb4b8faf9f8', name: 'label' }), h("div", { key: '8ed7c0e83f3ebea4d64f27d86a05e41f33317e6e', id: this.uniqueId, class: "dropdown-menu", "aria-expanded": this.isDropdownMenuOpen(), "aria-label": "Dropdown menu" }, h("slot", { key: '53a60855930e991a71d88d39e9bda3ffcd8d7b8a' }))), !this.isLastItem && h("span", { key: '4bebb7c1c4756010812fa11ceb786b05aac97d31', class: "breadcrumb-divider", "aria-hidden": "true" }, "/")));
     }
     get el() { return this; }
     static get style() { return breadcrumbItemCss; }

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

	@@ -1 +1 @@
1	- {"file":"ifx-breadcrumb-item.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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}
1	+ {"file":"ifx-breadcrumb-item.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,o9BAAo9B;;MCOj+B,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,GAAA;;;;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,QACE,CAAI,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,EAC7E,CAAA,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,EACjN,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAE,CAAA,EACpB,CAAA,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,EAChH,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACH,EACJ,CAAC,IAAI,CAAC,UAAU,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAa,aAAA,EAAA,MAAM,EAAS,EAAA,GAAA,CAAA,CAC9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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}

package/dist/components/ifx-breadcrumb.js CHANGED Viewed

@@ -39,7 +39,7 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends H {
         }
     }
     render() {
-        return (h("nav", { key: 'edf76204e96413a39d1a543735bbb0a2530d8348', "aria-label": "Page navigation breadcrumb" }, h("ol", { key: '1b64075586076eb4f6ca73cf41202a52a180d1c3', class: "breadcrumb" }, h("slot", { key: '352a0be161eb7b0ab45bdbbb59d023bd9da6ff73' }))));
+        return (h("nav", { key: '1ac077037d44b72f6a284ace72dd43bad0b3ebeb', "aria-label": "Page navigation breadcrumb" }, h("ol", { key: '7192480afed229bee5c54e4d6a3454ca3eb4636f', class: "breadcrumb" }, h("slot", { key: 'fa901a096a659d87f3ce0d6f1c366f9e874f4e22' }))));
     }
     get el() { return this; }
     static get style() { return breadcrumbCss; }

package/dist/components/ifx-breadcrumb.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-breadcrumb.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,sPAAsP;;MCU/P,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;;;;;;AAGrB,IAAA,MAAM,gBAAgB,GAAA;QACnB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACpC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,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,QACE,0EAAgB,4BAA4B,EAAA,EAC1C,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACpB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACL,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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}
1	+ {"file":"ifx-breadcrumb.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,sPAAsP;;MCU/P,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;;;;;;AAGrB,IAAA,MAAM,gBAAgB,GAAA;QACnB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACpC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,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,QACE,0EAAgB,4BAA4B,EAAA,EAC1C,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACpB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACL,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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}

package/dist/components/ifx-button.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { B as Button, d as defineCustomElement$1 } from './p-R79iWjuc.js';
+import { B as Button, d as defineCustomElement$1 } from './p-DrBheHJU.js';
 const IfxButton = Button;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-card-headline.js CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"file":"ifx-card-headline.js","mappings":";;AAAA,MAAM,eAAe,GAAG,qeAAqe;;MCQhf,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;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,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,uBAAA,EAA0B,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,EAAE,CAAA,CAAE,EAAA,EACpE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAiB,cAAA,EAAA,IAAI,CAAC,SAAS,CAAE,CAAA,EAAA,EAC3C,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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}
1	+ {"file":"ifx-card-headline.js","mappings":";;AAAA,MAAM,eAAe,GAAG,qeAAqe;;MCQhf,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;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,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,uBAAA,EAA0B,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,EAAE,CAAA,CAAE,EAAA,EACpE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAiB,cAAA,EAAA,IAAI,CAAC,SAAS,CAAE,CAAA,EAAA,EAC3C,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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}

package/dist/components/ifx-card-image.js CHANGED Viewed

@@ -19,7 +19,7 @@ const CardImage = /*@__PURE__*/ proxyCustomElement(class CardImage extends H {
         this.handlePosition(this.position);
     }
     render() {
-        return (h("img", { key: '74204d35691d617c897b876c6efee1b9a6722f64', src: this.src, alt: this.alt, class: "card-image" }));
+        return (h("img", { key: 'ed999c190110ba94ee2a57d0e7b3097b047cfb1f', src: this.src, alt: this.alt, class: "card-image" }));
     }
     static get style() { return cardImageCss; }
 }, [257, "ifx-card-image", {

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

	@@ -1 +1 @@
1	- {"file":"ifx-card-image.js","mappings":";;AAAA,MAAM,YAAY,GAAG,4EAA4E;;MCQpF,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;;;;;;;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,QACE,CAAK,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":["__stencil_proxyCustomElement","HTMLElement"],"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}
1	+ {"file":"ifx-card-image.js","mappings":";;AAAA,MAAM,YAAY,GAAG,4EAA4E;;MCQpF,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;;;;;;;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,QACE,CAAK,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":["__stencil_proxyCustomElement","HTMLElement"],"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}

package/dist/components/ifx-card-links.js CHANGED Viewed

@@ -9,7 +9,7 @@ const CardLinks = /*@__PURE__*/ proxyCustomElement(class CardLinks extends H {
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: '744455878787fca646306c9ef81e3e49e0fa7543', class: 'container' }, h("slot", { key: '096ab98134aa896969c6a5c674dcd66b6a9219d6' })));
+        return (h("div", { key: 'c2ad16092f513de6ea485ab418fcf2e62b276859', class: 'container' }, h("slot", { key: 'e4a80833b3a1de998967120d85fcab706926e3ec' })));
     }
     get el() { return this; }
     static get style() { return cardLinksCss; }

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

	@@ -1 +1 @@
1	- {"file":"ifx-card-links.js","mappings":";;AAAA,MAAM,YAAY,GAAG,iRAAiR;;MCQzR,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;;;;;;IAGpB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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}
1	+ {"file":"ifx-card-links.js","mappings":";;AAAA,MAAM,YAAY,GAAG,iRAAiR;;MCQzR,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;;;;;;IAGpB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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}

package/dist/components/ifx-card-overline.js CHANGED Viewed

@@ -9,7 +9,7 @@ const CardOverline = /*@__PURE__*/ proxyCustomElement(class CardOverline extends
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: '181762fa666e11ebc4d8c11430f878494d6ff378', class: "card-overline" }, h("slot", { key: 'bbbc7a81dca17cef1ea809f9f87e9a010e5f212d' })));
+        return (h("div", { key: 'e707ef390549c1d7ee1035a8b6630466a296b78b', class: "card-overline" }, h("slot", { key: '3d7f0d857315b739162bf1989fe2035b90599049' })));
     }
     static get style() { return cardOverlineCss; }
 }, [257, "ifx-card-overline"]);

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

	@@ -1 +1 @@
1	- {"file":"ifx-card-overline.js","mappings":";;AAAA,MAAM,eAAe,GAAG,6SAA6S;;MCQxT,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;IAEvB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACxB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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}
1	+ {"file":"ifx-card-overline.js","mappings":";;AAAA,MAAM,eAAe,GAAG,6SAA6S;;MCQxT,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;IAEvB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACxB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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}

package/dist/components/ifx-card-text.js CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"file":"ifx-card-text.js","mappings":";;AAAA,MAAM,WAAW,GAAG,6WAA6W;;MCQpX,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;;;;;;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,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,sBAAsB,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAA,CAAE,EAAA,EAC7D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,SAAA,CAAW,EAAA,EACrB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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}
1	+ {"file":"ifx-card-text.js","mappings":";;AAAA,MAAM,WAAW,GAAG,6WAA6W;;MCQpX,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;;;;;;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,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,sBAAsB,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAA,CAAE,EAAA,EAC7D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,SAAA,CAAW,EAAA,EACrB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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}

package/dist/components/ifx-card.js CHANGED Viewed

@@ -41,12 +41,12 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends H {
         this.handleComponentAdjustment();
     }
     render() {
-        return (h(Host, { key: 'd1342011d31f6978702f5a193191c97c40620d3a' }, h("div", { key: '0fad34f8282119b8a32647abaadb9c4d8c596b40', "aria-label": this.ariaLabel, class: `card
-            ${this.noBtns ? 'noBtns' : ""}
-            ${this.direction}
+        return (h(Host, { key: 'a0867e2b30baa55cfda18303340586a23b3cf501' }, h("div", { key: 'df2511659c0ece48955c313de9d67bc338858201', "aria-label": this.ariaLabel, class: `card
+            ${this.noBtns ? 'noBtns' : ""}
+            ${this.direction}
             ${this.alignment}`, role: "group" }, this.direction === 'horizontal' &&
-            h("div", { key: '14bbc106ff828fc268bd5636d71ed66b85b3971e', class: "horizontal" }, h("a", { key: '7cd3f0f394d067ef375490fc96d71c15937b784a', class: `card-img ${this.noImg ? 'noImage' : ""} ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref }, h("slot", { key: 'ce3be286399a863d0535b7886be602eda1da1e3a', name: "img" })), h("div", { key: '19d526f169cfdfc5921b3104e642b0390d40f57c', class: 'lower__body-wrapper' }, h("a", { key: 'e4af1b4915b38e8f31b6e539072142c8ab85e334', class: `upper-body ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref, id: "upper-body-content" }, h("slot", { key: '28c6e43c2e4f4a47968c7b1054d8fe8eb2d148c6' })), h("div", { key: '708536495fed3c351f85823b7dfd52b56e7e7d97' }, h("slot", { key: '926da9864476efaa413ac167101a71ed265d8fa8', name: 'buttons' })))), this.direction === 'vertical' &&
-            h("div", { key: '23350f711ef5cfbb298812f23d120927a67879c3', class: "vertical" }, h("a", { key: 'c740bb3957d400c7f0cc06a2052bbe80a1b184a7', class: `upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref, target: this.target }, h("div", { key: '9027ad5864dab44e18b2c9bd10c704d8329122f5', class: `card-img ${this.noImg ? 'noImage' : ""}` }, h("slot", { key: '509b69f84d36075351cbec657232b2c859c8cd9e', name: "img" })), h("div", { key: '3d7590db496cd6aaf0603ebf224a015324a86ce9', class: 'upper-body', id: "upper-body-content" }, h("slot", { key: '142c46ccd143f00c62e07c70b5ffcec5674666fd' }))), h("div", { key: '8245deceb8ff7e14408386eaeba2f5025ab75229', class: 'lower__body-wrapper', role: "group", "aria-labelledby": "upper-body-content" }, h("slot", { key: '0a0e0124cde655ccfddc59cbc91f2cd373e545b5', name: 'buttons' }))))));
+            h("div", { key: '1332b8643ad72eb0659915c82caba62db959fec4', class: "horizontal" }, h("a", { key: '7c6cef7c4332c93f2f6de6069647d8554faa4886', class: `card-img ${this.noImg ? 'noImage' : ""} ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref }, h("slot", { key: 'f3013c93645e78748dc19f2f5b42810a2a251a60', name: "img" })), h("div", { key: '16e7444a54d3360a31a1a07407a0b49f35a650e3', class: 'lower__body-wrapper' }, h("a", { key: '263f15a09371605b8bc87dd94e9fea5bcc25fb7a', class: `upper-body ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref, id: "upper-body-content" }, h("slot", { key: '34cd76c02d8fdc927d461e184918f12d7e196184' })), h("div", { key: 'bab33a01f255fd5ed2fc866f3d2d7b2fc62f8963' }, h("slot", { key: 'ae8ec1595f6a70370aefb47f14354b66b688f6f6', name: 'buttons' })))), this.direction === 'vertical' &&
+            h("div", { key: 'ba3665f7e757454bf5727b72e1bd2b4871ea075e', class: "vertical" }, h("a", { key: '3bcdb561473d50a45656cf0e51fb01d0bec4aa31', class: `upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref, target: this.target }, h("div", { key: '45f39609addede060b1a6d99e934e4699a02eb90', class: `card-img ${this.noImg ? 'noImage' : ""}` }, h("slot", { key: '3810e2b4ea80fd6c8e0581b9767c1df3ce67687b', name: "img" })), h("div", { key: 'abf08dcb3aafba84a5b5e6391e03ef638517a688', class: 'upper-body', id: "upper-body-content" }, h("slot", { key: '069c46ec890037e85087e87395c6cb12f67febd9' }))), h("div", { key: 'bfe6816f195766ed9de36601e002c63957f69fd7', class: 'lower__body-wrapper', role: "group", "aria-labelledby": "upper-body-content" }, h("slot", { key: '509c367955c8013a19389b06de4db70de7b706ec', name: 'buttons' }))))));
     }
     get el() { return this; }
     static get style() { return cardCss; }