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

@infineon/infineon-design-system-stencil 39.4.4--canary.1723.b577eb08ea34aa81e7d1054220d0f31ca92579a9.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/{p-RF9z92mE.js → p-CIgjv3WT.js} RENAMED Viewed

@@ -28,7 +28,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends H {
         }
     }
     render() {
-        return (h("div", { key: '903cc44b4886b77e59e66ab2a5cdf681dafeb9bc', class: "accordion-wrapper" }, h("slot", { key: 'e0abec42188606e8c80fc3db44fba19a7aa69ed8' })));
+        return (h("div", { key: '9e32f92c7a61c58a537e033e48c57770c4fa60d4', class: "accordion-wrapper" }, h("slot", { key: 'ec234435886b3271ce2f2712f3e3f54fa3dca8ff' })));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
@@ -51,6 +51,6 @@ function defineCustomElement() {
 }
 export { Accordion as A, defineCustomElement as d };
-//# sourceMappingURL=p-RF9z92mE.js.map
+//# sourceMappingURL=p-CIgjv3WT.js.map
-//# sourceMappingURL=p-RF9z92mE.js.map
+//# sourceMappingURL=p-CIgjv3WT.js.map

package/dist/components/p-CIgjv3WT.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-CIgjv3WT.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,wLAAwL;;MCUhM,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,GAAA;;;;AAOU,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AA6BtC;AA3BC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,eAAe,EAAE,MAAM,SAAS,CAAC;;;IAKpD,MAAM,UAAU,CAAC,KAAkB,EAAA;AACjC,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACrB,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;AACxE,YAAA,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;gBACxB,MAAM,WAAW,GAAG,IAAmC;AACvD,gBAAA,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,WAAW,CAAC,IAAI,CAAC,EAAE;AAC5D,oBAAA,WAAW,CAAC,IAAI,GAAG,KAAK;;;;;IAMhC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":["// ifxAccordion.scss\r\n@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.accordion-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n gap: tokens.$ifxSpace100;\r\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\r\n}","import { Component, h, Listen, Element, Prop } 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-accordion',\r\n styleUrl: 'accordion.scss',\r\n shadow: { delegatesFocus: true },\r\n})\r\nexport class Accordion {\r\n @Element() el: HTMLElement;\r\n @Prop() autoCollapse: boolean = false;\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-accordion', await framework)\r\n }\r\n }\r\n\r\n @Listen('ifxOpen')\r\n async onItemOpen(event: CustomEvent) {\r\n if (this.autoCollapse) {\r\n const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\r\n for (const item of items) {\r\n const itemElement = item as HTMLIfxAccordionItemElement;\r\n if (itemElement !== event.target && (await itemElement.open)) {\r\n itemElement.open = false;\r\n }\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"accordion-wrapper\">\r\n <slot />\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/{p-CRSbKJxa.js → p-D3I_SqHt.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
 import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';
 import { c as classNames } from './p-DMLRPGid.js';
-import { d as defineCustomElement$1 } from './p-DhNY6ZGA.js';
+import { d as defineCustomElement$1 } from './p-BnjY2AJX.js';
 const searchFieldCss = ":root {\n  --ifx-font-family: \"Source Sans 3\", \"Arial, sans-serif\";\n}\n\n:host {\n  display: flex;\n}\n\n.search-field {\n  box-sizing: border-box;\n  background-color: #FFFFFF;\n  width: 100%;\n  font-family: var(--ifx-font-family);\n  position: relative;\n}\n.search-field .search-field__wrapper {\n  box-sizing: border-box;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  border: 1px solid #8d8786;\n  border-radius: 1px;\n  padding: 8px 16px;\n  gap: 12px;\n  flex: none;\n  order: 0;\n  align-self: stretch;\n  flex-grow: 0;\n  position: relative;\n  width: 100%;\n  outline: none;\n}\n.search-field .search-field__wrapper:focus-visible:not(.disabled) {\n  outline: 2px solid #0A8276;\n  outline-offset: 2px;\n}\n.search-field .search-field__wrapper.search-field__wrapper-s {\n  height: 36px;\n}\n.search-field .search-field__wrapper:hover:not(.focused, :focus) {\n  border: 1px solid #3c3a39;\n}\n.search-field .search-field__wrapper .delete-icon {\n  outline: 1px solid transparent;\n  right: 12px;\n  cursor: pointer;\n}\n.search-field .search-field__wrapper .delete-icon:focus-visible {\n  outline: 2px solid #0A8276;\n  outline-offset: 1px;\n}\n.search-field .search-field__wrapper input[type=text] {\n  font-style: normal;\n  font-weight: 400;\n  font-size: 16px;\n  color: #8d8786;\n  border: none;\n  width: 100%;\n  outline: none;\n  height: 16px;\n}\n.search-field .search-field__wrapper input[type=text]:focus {\n  outline: none;\n  color: #1d1d1d;\n}\n.search-field .search-field__wrapper input[type=text]:disabled {\n  background: #BFBBBB;\n  color: #FFFFFF;\n}\n.search-field .search-field__wrapper input[type=text]:disabled::placeholder {\n  color: #FFFFFF;\n}\n.search-field .search-field__wrapper.disabled {\n  background: #BFBBBB;\n  border: none;\n  color: #FFFFFF;\n}\n.search-field .search-field__wrapper.disabled:hover {\n  border: none;\n  outline: none;\n}\n.search-field .search-field__wrapper.disabled .delete-icon {\n  cursor: default;\n}\n.search-field .search-field__wrapper.disabled .delete-icon:focus-visible {\n  outline: 1px solid transparent;\n}\n.search-field .suggestions-dropdown {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  background: #FFFFFF;\n  margin-top: 4px;\n  border: 1px solid #EEEDED;\n  box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.1);\n  z-index: 1000;\n  max-height: 300px;\n  overflow-y: auto;\n  container-type: inline-size;\n}\n.search-field .suggestions-dropdown .suggestions-header {\n  font-family: Source Sans 3;\n  font-size: 0.8125rem;\n  font-weight: 600;\n  line-height: 1.25rem;\n  letter-spacing: 0.25em;\n  text-transform: uppercase;\n  color: #575352;\n  border-bottom: 1px solid #EEEDED;\n  padding: 12px 16px;\n}\n.search-field .suggestions-dropdown .suggestion-item {\n  padding: 12px 16px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.search-field .suggestions-dropdown .suggestion-item:last-child {\n  border-bottom: none;\n}\n.search-field .suggestions-dropdown .suggestion-item:hover, .search-field .suggestions-dropdown .suggestion-item--selected {\n  background-color: #EEEDED;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-icon {\n  color: #575352;\n  flex-shrink: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-icon--history {\n  color: #575352;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-main-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex-shrink: 1;\n  min-width: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-scope {\n  color: #8D8786;\n  flex-shrink: 0;\n  white-space: nowrap;\n  margin-left: 2px;\n  font-weight: 600;\n  font-size: 0.75rem;\n}\n@container (max-width: 320px) {\n  .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-main-text {\n    width: 100%;\n    max-width: 100%;\n  }\n  .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-scope {\n    margin-left: 0;\n    margin-top: 0;\n    width: 100%;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex-shrink: 1;\n  }\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-count {\n  color: #8D8786;\n  margin-left: auto;\n  flex-shrink: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-delete-icon {\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.2s ease, visibility 0.2s ease;\n  cursor: pointer;\n  margin-left: auto;\n  flex-shrink: 0;\n  color: #575352;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-delete-icon:hover {\n  color: #3C3A39;\n}\n.search-field .suggestions-dropdown .suggestion-item:hover .suggestion-delete-icon {\n  opacity: 1;\n  visibility: visible;\n}\n.search-field .search-field__wrapper.dropdown-open {\n  border-radius: 1px 1px 0 0;\n  border-color: #0A8276;\n}";
@@ -378,12 +378,12 @@ const SearchField = /*@__PURE__*/ proxyCustomElement(class SearchField extends H
             this.showDeleteIconInternalState = false;
     }
     render() {
-        return (h("div", { key: 'd355ec7cdbe980ea99e4238cf02d907ddd76d59b', "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: '2aa3d943caab35213ca10f071586c80358515f1c', class: this.getWrapperClassNames(), tabindex: 1, onClick: () => this.focusInput() }, h("ifx-icon", { key: 'eaa300dd0f8466a2396c55f3f2fffe9dcf5bbf44', icon: "search-16", class: "search-icon" }), h("input", { key: 'cce86ee892ec624fe8671d7567434ae5433b8702', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), onFocus: () => this.focusInput(), onBlur: () => this.blurInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value, role: "combobox", "aria-controls": this.showDropdown ? 'suggestions-dropdown' : undefined, "aria-expanded": this.showDropdown, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedBy, "aria-owns": this.showDropdown ? 'suggestions-dropdown' : undefined, "aria-activedescendant": this.selectedSuggestionIndex >= 0 ? `suggestion-${this.selectedSuggestionIndex}` : undefined }), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cRemove16", class: "delete-icon", onClick: this.handleDelete, role: "button", tabindex: "0", "aria-label": this.deleteIconAriaLabel, onKeyDown: (event) => {
+        return (h("div", { key: '7e4c393707a14e0fb180b2871db1a0cdd071a245', "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: 'f16ac525d64cdba8c62a52b2c60ede614386d7ba', class: this.getWrapperClassNames(), tabindex: 1, onClick: () => this.focusInput() }, h("ifx-icon", { key: '7556bc15840895f5ca6d7716471c1fbd51e85c4c', icon: "search-16", class: "search-icon" }), h("input", { key: 'a0f2ae89e3d8b515d66f59919d54d209f834a9e0', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), onFocus: () => this.focusInput(), onBlur: () => this.blurInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value, role: "combobox", "aria-controls": this.showDropdown ? 'suggestions-dropdown' : undefined, "aria-expanded": this.showDropdown, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedBy, "aria-owns": this.showDropdown ? 'suggestions-dropdown' : undefined, "aria-activedescendant": this.selectedSuggestionIndex >= 0 ? `suggestion-${this.selectedSuggestionIndex}` : undefined }), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cRemove16", class: "delete-icon", onClick: this.handleDelete, role: "button", tabindex: "0", "aria-label": this.deleteIconAriaLabel, onKeyDown: (event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
                     event.preventDefault();
                     this.handleDelete();
                 }
-            } })) : null), this.showDropdown && this.filteredSuggestions.length > 0 && (h("div", { key: 'd447e63087ac5b41d2109a16b8db37df4c9db860', ref: (el) => (this.dropdownElement = el), id: "suggestions-dropdown", class: "suggestions-dropdown", role: "listbox", "aria-label": this.dropdownAriaLabel }, this.isShowingOnlyHistory() && (h("div", { key: '6a4662d31fd8c755ec1ec9da4bb871750aa63a57', class: "suggestions-header" }, this.historyHeaderText)), this.filteredSuggestions.map((suggestion, index) => (h("div", { key: suggestion.id, id: `suggestion-${index}`, class: this.getSuggestionClassNames(index), role: "option", "aria-selected": index === this.selectedSuggestionIndex, "aria-label": `${suggestion.type === 'history' ? this.historyItemAriaLabel : this.suggestionAriaLabel}: ${suggestion.text}${suggestion.scope ? `, ${suggestion.scope}` : ''}${suggestion.resultCount ? `, ${suggestion.resultCount} results` : ''}`, onClick: () => this.selectSuggestion(suggestion), onMouseEnter: () => this.selectedSuggestionIndex = index }, h("div", { class: "suggestion-content" }, suggestion.type === 'history' && (h("ifx-icon", { icon: "history-16", class: "suggestion-icon suggestion-icon--history" })), suggestion.type === 'suggestion' && (h("ifx-icon", { icon: "search-16", class: "suggestion-icon suggestion-icon--suggestion" })), h("span", { class: "suggestion-text" }, h("span", { class: "suggestion-main-text" }, this.renderHighlightedText(suggestion.text, this.value)), suggestion.scope && (h("span", { class: "suggestion-scope" }, "\u2013 ", suggestion.scope))), suggestion.resultCount !== undefined && suggestion.scope && (h("span", { class: "suggestion-count" }, suggestion.resultCount)), suggestion.type === 'history' && (h("ifx-icon", { icon: "cross16", class: "suggestion-delete-icon", role: "button", tabindex: "0", "aria-label": `${this.historyDeleteAriaLabel}: ${suggestion.text}`, onClick: (event) => this.handleHistoryDelete(event, suggestion.text), onKeyDown: (event) => {
+            } })) : null), this.showDropdown && this.filteredSuggestions.length > 0 && (h("div", { key: '9bf17746181be5acb6b9e33d7155396186daaf3b', ref: (el) => (this.dropdownElement = el), id: "suggestions-dropdown", class: "suggestions-dropdown", role: "listbox", "aria-label": this.dropdownAriaLabel }, this.isShowingOnlyHistory() && (h("div", { key: '2bb36b6c16c734b47eebf72046e9dc59b23b0998', class: "suggestions-header" }, this.historyHeaderText)), this.filteredSuggestions.map((suggestion, index) => (h("div", { key: suggestion.id, id: `suggestion-${index}`, class: this.getSuggestionClassNames(index), role: "option", "aria-selected": index === this.selectedSuggestionIndex, "aria-label": `${suggestion.type === 'history' ? this.historyItemAriaLabel : this.suggestionAriaLabel}: ${suggestion.text}${suggestion.scope ? `, ${suggestion.scope}` : ''}${suggestion.resultCount ? `, ${suggestion.resultCount} results` : ''}`, onClick: () => this.selectSuggestion(suggestion), onMouseEnter: () => this.selectedSuggestionIndex = index }, h("div", { class: "suggestion-content" }, suggestion.type === 'history' && (h("ifx-icon", { icon: "history-16", class: "suggestion-icon suggestion-icon--history" })), suggestion.type === 'suggestion' && (h("ifx-icon", { icon: "search-16", class: "suggestion-icon suggestion-icon--suggestion" })), h("span", { class: "suggestion-text" }, h("span", { class: "suggestion-main-text" }, this.renderHighlightedText(suggestion.text, this.value)), suggestion.scope && (h("span", { class: "suggestion-scope" }, "\u2013 ", suggestion.scope))), suggestion.resultCount !== undefined && suggestion.scope && (h("span", { class: "suggestion-count" }, suggestion.resultCount)), suggestion.type === 'history' && (h("ifx-icon", { icon: "cross16", class: "suggestion-delete-icon", role: "button", tabindex: "0", "aria-label": `${this.historyDeleteAriaLabel}: ${suggestion.text}`, onClick: (event) => this.handleHistoryDelete(event, suggestion.text), onKeyDown: (event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
                     event.preventDefault();
                     this.handleHistoryDelete(event, suggestion.text);
@@ -464,6 +464,6 @@ function defineCustomElement() {
 }
 export { SearchField as S, defineCustomElement as d };
-//# sourceMappingURL=p-CRSbKJxa.js.map
+//# sourceMappingURL=p-D3I_SqHt.js.map
-//# sourceMappingURL=p-CRSbKJxa.js.map
+//# sourceMappingURL=p-D3I_SqHt.js.map

package/dist/components/p-D3I_SqHt.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-D3I_SqHt.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/search-field/search-field.scss?tag=ifx-search-field&encapsulation=shadow","src/components/search-field/search-field.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.search-field {\r\n box-sizing: border-box;\r\n background-color: tokens.$ifxColorBaseWhite;\r\n width: 100%;\r\n font-family: var(--ifx-font-family);\r\n position: relative; // Wichtig für absolute positioning des Dropdowns\r\n\r\n .search-field__wrapper {\r\n box-sizing: border-box;\r\n height: tokens.$ifxSize500;\r\n display: flex;\r\n align-items: center;\r\n border: 1px solid #8d8786;\r\n border-radius: tokens.$ifxBorderRadius12;\r\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\r\n gap: tokens.$ifxSpace150;\r\n flex: none;\r\n order: 0;\r\n align-self: stretch;\r\n flex-grow: 0;\r\n position: relative;\r\n width: 100%;\r\n outline: none;\r\n\r\n &:focus-visible:not(.disabled) {\r\n outline: 2px solid tokens.$ifxColorOcean500;\r\n outline-offset: 2px;\r\n }\r\n\r\n &.search-field__wrapper-s {\r\n height: 36px;\r\n }\r\n\r\n &:hover:not(.focused, :focus) {\r\n border: 1px solid #3c3a39;\r\n }\r\n\r\n & .delete-icon {\r\n outline: 1px solid transparent;\r\n right: 12px;\r\n cursor: pointer;\r\n &:focus-visible {\r\n outline: 2px solid tokens.$ifxColorOcean500;\r\n outline-offset: 1px;\r\n }\r\n }\r\n\r\n input[type='text'] {\r\n font-style: normal;\r\n font-weight: 400;\r\n font-size: 16px;\r\n //line-height: 24px;\r\n color: #8d8786;\r\n border: none;\r\n width: 100%;\r\n outline: none;\r\n //height: 100%;\r\n height: 16px;\r\n\r\n &:focus {\r\n outline: none;\r\n color: #1d1d1d;\r\n }\r\n\r\n &:disabled {\r\n background: tokens.$ifxColorEngineering300;\r\n color: tokens.$ifxColorBaseWhite;\r\n\r\n &::placeholder {\r\n color: tokens.$ifxColorBaseWhite;\r\n }\r\n }\r\n }\r\n\r\n &.disabled {\r\n background: tokens.$ifxColorEngineering300;\r\n border: none;\r\n color: tokens.$ifxColorBaseWhite;\r\n\r\n &:hover {\r\n border: none;\r\n outline: none;\r\n }\r\n\r\n & .delete-icon { \r\n cursor: default;\r\n &:focus-visible { \r\n outline: 1px solid transparent;\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Suggestions Dropdown Styles\r\n .suggestions-dropdown {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n right: 0;\r\n background: tokens.$ifxColorBaseWhite;\r\n margin-top: tokens.$ifxSpace50;\r\n border: 1px solid tokens.$ifxColorEngineering200;\r\n box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.1);\r\n z-index: 1000;\r\n max-height: 300px;\r\n overflow-y: auto;\r\n container-type: inline-size; // Enable container queries\r\n\r\n .suggestions-header {\r\n // font: tokens.$ifxEyebrowEyebrow02; TODO\r\n font-family: Source Sans 3;\r\n font-size: 0.8125rem;\r\n font-weight: 600;\r\n line-height: 1.25rem;\r\n\r\n letter-spacing: 0.25em;\r\n text-transform: uppercase;\r\n color: tokens.$ifxColorEngineering500;\r\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\r\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\r\n }\r\n\r\n .suggestion-item {\r\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\r\n cursor: pointer;\r\n transition: background-color 0.2s ease;\r\n\r\n &:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n &:hover,\r\n &--selected {\r\n background-color: tokens.$ifxColorEngineering200;\r\n }\r\n\r\n .suggestion-content {\r\n display: flex;\r\n align-items: center;\r\n gap: tokens.$ifxSpace150;\r\n\r\n .suggestion-icon {\r\n color: tokens.$ifxColorEngineering500;\r\n flex-shrink: 0;\r\n\r\n &--history {\r\n color: tokens.$ifxColorEngineering500;\r\n }\r\n }\r\n\r\n .suggestion-text {\r\n flex: 1;\r\n display: flex;\r\n align-items: center;\r\n min-width: 0; // Important for flexbox truncation\r\n\r\n .suggestion-main-text {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n flex-shrink: 1;\r\n min-width: 0;\r\n }\r\n\r\n .suggestion-scope {\r\n color: tokens.$ifxColorEngineering400;\r\n flex-shrink: 0; // Never truncate the scope\r\n white-space: nowrap;\r\n margin-left: tokens.$ifxSpace25; // Add space before the scope\r\n font-weight: tokens.$ifxFontWeightSemibold;\r\n font-size: tokens.$ifxFontSizeXs;\r\n }\r\n\r\n // When container is narrow, stack scope below main text\r\n @container (max-width: 320px) {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n\r\n .suggestion-main-text {\r\n width: 100%;\r\n max-width: 100%;\r\n }\r\n\r\n .suggestion-scope {\r\n margin-left: 0;\r\n margin-top: 0;\r\n width: 100%;\r\n max-width: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n flex-shrink: 1; // Allow truncation when narrow\r\n }\r\n }\r\n }\r\n\r\n .suggestion-count {\r\n color: tokens.$ifxColorEngineering400;\r\n margin-left: auto;\r\n flex-shrink: 0;\r\n }\r\n\r\n .suggestion-delete-icon {\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.2s ease, visibility 0.2s ease;\r\n cursor: pointer;\r\n margin-left: auto;\r\n flex-shrink: 0;\r\n color: tokens.$ifxColorEngineering500;\r\n\r\n &:hover {\r\n color: tokens.$ifxColorEngineering600;\r\n }\r\n }\r\n }\r\n\r\n &:hover {\r\n .suggestion-delete-icon {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n }\r\n }\r\n }\r\n\r\n // Wrapper modifications when dropdown is open\r\n .search-field__wrapper.dropdown-open {\r\n border-radius: tokens.$ifxBorderRadius12 tokens.$ifxBorderRadius12 0 0;\r\n border-color: tokens.$ifxColorOcean500;\r\n }\r\n}\r\n","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport classNames from 'classnames';\r\n\r\nexport interface SuggestionItem {\r\n id: string;\r\n text: string;\r\n type?: 'suggestion' | 'history';\r\n scope?: string;\r\n resultCount?: number;\r\n metadata?: any;\r\n}\r\n\r\n@Component({\r\n tag: 'ifx-search-field',\r\n styleUrl: 'search-field.scss',\r\n shadow: true\r\n})\r\n\r\nexport class SearchField {\r\n @Element() el;\r\n private inputElement: HTMLInputElement;\r\n private dropdownElement: HTMLDivElement;\r\n\r\n @Prop({ mutable: true }) value: string = '';\r\n @Prop() suggestions: SuggestionItem[] = [];\r\n @Prop() showSuggestions: boolean = false;\r\n @Prop() maxSuggestions: number = 10;\r\n @Prop() maxHistoryItems: number = 5;\r\n @Prop() enableHistory: boolean = true;\r\n @Prop() historyKey: string = 'ifx-search-history';\r\n @Prop() historyHeaderText: string = 'Recent Searches';\r\n\r\n // ARIA Labels and Accessibility Props\r\n @Prop() ariaLabel: string | null = \"Search Field\"\r\n @Prop() ariaLabelledBy?: string | null;\r\n @Prop() ariaDescribedBy?: string | null;\r\n @Prop() deleteIconAriaLabel: string = 'Clear search';\r\n @Prop() historyDeleteAriaLabel: string = 'Remove from history';\r\n @Prop() dropdownAriaLabel: string = 'Search suggestions and history';\r\n @Prop() suggestionAriaLabel: string = 'Search suggestion';\r\n @Prop() historyItemAriaLabel: string = 'Search history item';\r\n\r\n @Event() ifxInput: EventEmitter<string>;\r\n @Event() ifxSuggestionRequested: EventEmitter<string>;\r\n @Event() ifxSuggestionSelected: EventEmitter<SuggestionItem>;\r\n @Event() ifxFocus: EventEmitter<void>;\r\n @Event() ifxBlur: EventEmitter<void>;\r\n\r\n @State() showDropdown: boolean = false;\r\n @State() filteredSuggestions: SuggestionItem[] = [];\r\n @State() selectedSuggestionIndex: number = -1;\r\n @State() searchHistory: string[] = [];\r\n\r\n @Prop() showDeleteIcon: boolean = false;\r\n @State() showDeleteIconInternalState: boolean = false;\r\n @Prop() disabled: boolean = false;\r\n @Prop() size: string = 'l';\r\n @State() isFocused: boolean = false;\r\n @Prop() placeholder: string = \"Search...\";\r\n @Prop() autocomplete: string = \"off\";\r\n @Prop() maxlength?: number = null;\r\n\r\n private focusEmitted: 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.inputElement) && !path.includes(this.dropdownElement)) {\r\n this.hideDropdown();\r\n }\r\n }\r\n\r\n @Listen('keydown')\r\n handleKeyDown(event: KeyboardEvent) {\r\n if (!this.showDropdown) return;\r\n\r\n switch (event.key) {\r\n case 'ArrowDown':\r\n event.preventDefault();\r\n this.navigateSuggestions(1);\r\n break;\r\n case 'ArrowUp':\r\n event.preventDefault();\r\n this.navigateSuggestions(-1);\r\n break;\r\n case 'Enter':\r\n event.preventDefault();\r\n if (this.selectedSuggestionIndex >= 0) {\r\n this.selectSuggestion(this.filteredSuggestions[this.selectedSuggestionIndex]);\r\n } else {\r\n this.handleSearch();\r\n }\r\n break;\r\n case 'Escape':\r\n this.hideDropdown();\r\n break;\r\n }\r\n }\r\n\r\n @Watch('value')\r\n valueWatcher(newValue: string) {\r\n if (this.inputElement && newValue !== this.inputElement.value) {\r\n this.inputElement.value = newValue;\r\n }\r\n this.updateSuggestions();\r\n }\r\n\r\n @Watch('suggestions')\r\n suggestionsWatcher() {\r\n this.updateSuggestions();\r\n }\r\n\r\n\r\n handleInput = () => {\r\n const query = this.inputElement.value;\r\n this.value = query;\r\n this.ifxInput.emit(this.value);\r\n\r\n if (this.showSuggestions) {\r\n this.showDropdown = true;\r\n this.selectedSuggestionIndex = -1;\r\n this.requestSuggestions(query);\r\n }\r\n };\r\n\r\n handleDelete = () => {\r\n if(!this.disabled) { \r\n this.inputElement.value = '';\r\n this.value = \"\";\r\n this.ifxInput.emit(this.value);\r\n this.hideDropdown();\r\n }\r\n }\r\n\r\n handleSearch = () => {\r\n if (this.value.trim() && this.enableHistory) {\r\n // Only add to history if there are actual results\r\n if (this.filteredSuggestions.length > 0) {\r\n this.addToHistory(this.value);\r\n }\r\n }\r\n this.hideDropdown();\r\n }\r\n\r\n focusInput() {\r\n // Only emit focus event if it hasn't been emitted already\r\n if (!this.focusEmitted) {\r\n this.focusEmitted = true;\r\n this.isFocused = true;\r\n this.ifxFocus.emit();\r\n }\r\n\r\n if (this.showSuggestions) {\r\n // On focus without input: Show only history\r\n if (this.value.length === 0) {\r\n this.showHistoryDropdown();\r\n // Only show dropdown if history is actually present\r\n this.showDropdown = this.enableHistory && this.searchHistory.length > 0;\r\n } else {\r\n // With existing input: Normal suggestion logic\r\n this.updateSuggestions();\r\n this.showDropdown = this.filteredSuggestions.length > 0;\r\n }\r\n }\r\n }\r\n\r\n blurInput() {\r\n setTimeout(() => {\r\n this.isFocused = false;\r\n this.focusEmitted = false; // Reset focus flag when blur occurs\r\n this.ifxBlur.emit();\r\n }, 150);\r\n }\r\n\r\n // Public method to update history from external sources\r\n public loadSearchHistory() {\r\n if (this.enableHistory && typeof localStorage !== 'undefined') {\r\n const stored = localStorage.getItem(this.historyKey);\r\n this.searchHistory = stored ? JSON.parse(stored) : [];\r\n\r\n // Update suggestions when history is loaded\r\n this.updateSuggestions();\r\n\r\n // If no input and no history left, close dropdown\r\n if (this.value.length === 0 && this.searchHistory.length === 0) {\r\n this.showDropdown = false;\r\n }\r\n }\r\n }\r\n\r\n // Public method to completely clear history\r\n public clearSearchHistory() {\r\n if (this.enableHistory && typeof localStorage !== 'undefined') {\r\n // Clear from localStorage\r\n localStorage.removeItem(this.historyKey);\r\n\r\n // Clear internal history\r\n this.searchHistory = [];\r\n\r\n // Reset all dropdown-relevant states\r\n this.filteredSuggestions = [];\r\n this.selectedSuggestionIndex = -1;\r\n this.showDropdown = false;\r\n\r\n // Update suggestions after reset\r\n this.updateSuggestions();\r\n }\r\n }\r\n\r\n // Suggestion Management Methods\r\n private addToHistory(term: string) {\r\n if (!this.enableHistory || !term.trim()) return;\r\n\r\n const history = [...this.searchHistory];\r\n const existingIndex = history.indexOf(term);\r\n\r\n if (existingIndex > -1) {\r\n history.splice(existingIndex, 1);\r\n }\r\n\r\n history.unshift(term);\r\n // Limit history to maxHistoryItems (default 5)\r\n this.searchHistory = history.slice(0, this.maxHistoryItems);\r\n\r\n if (typeof localStorage !== 'undefined') {\r\n localStorage.setItem(this.historyKey, JSON.stringify(this.searchHistory));\r\n }\r\n }\r\n\r\n // Remove individual history entry\r\n private removeFromHistory(term: string) {\r\n if (!this.enableHistory) return;\r\n\r\n const history = [...this.searchHistory];\r\n const index = history.indexOf(term);\r\n\r\n if (index > -1) {\r\n history.splice(index, 1);\r\n this.searchHistory = history;\r\n\r\n // Update localStorage\r\n if (typeof localStorage !== 'undefined') {\r\n localStorage.setItem(this.historyKey, JSON.stringify(this.searchHistory));\r\n }\r\n\r\n // Update suggestions after removal\r\n this.updateSuggestions();\r\n\r\n // Close dropdown if no history remains\r\n if (this.searchHistory.length === 0 && this.value.length === 0) {\r\n this.showDropdown = false;\r\n }\r\n }\r\n }\r\n\r\n // Handle click on history delete button\r\n private handleHistoryDelete = (event: Event, term: string) => {\r\n event.stopPropagation(); // Prevent selection of the entry\r\n this.removeFromHistory(term);\r\n }\r\n\r\n private requestSuggestions(query: string) {\r\n this.ifxSuggestionRequested.emit(query);\r\n this.updateSuggestions();\r\n }\r\n\r\n private updateSuggestions() {\r\n const query = this.value.toLowerCase();\r\n let suggestions: SuggestionItem[] = [];\r\n\r\n if (query.length > 0) {\r\n // For text input: Mix external suggestions and relevant history\r\n\r\n // 1. Filter external suggestions\r\n if (this.suggestions && this.suggestions.length > 0) {\r\n const filteredExternal = this.suggestions.filter(s =>\r\n s.text.toLowerCase().includes(query)\r\n );\r\n suggestions = [...suggestions, ...filteredExternal];\r\n }\r\n\r\n // 2. Filter relevant history entries\r\n if (this.enableHistory && this.searchHistory.length > 0) {\r\n const filteredHistory = this.searchHistory\r\n .filter(term => term.toLowerCase().includes(query))\r\n .map((term, index) => ({\r\n id: `history-${index}`,\r\n text: term,\r\n type: 'history' as const\r\n }));\r\n suggestions = [...suggestions, ...filteredHistory];\r\n }\r\n\r\n // 3. Sort by relevance (exact matches first, then prefix matches)\r\n suggestions.sort((a, b) => {\r\n const aText = a.text.toLowerCase();\r\n const bText = b.text.toLowerCase();\r\n\r\n // Exact match has highest priority\r\n if (aText === query && bText !== query) return -1;\r\n if (bText === query && aText !== query) return 1;\r\n\r\n // Prefix match has second highest priority\r\n const aStartsWith = aText.startsWith(query);\r\n const bStartsWith = bText.startsWith(query);\r\n\r\n if (aStartsWith && !bStartsWith) return -1;\r\n if (bStartsWith && !aStartsWith) return 1;\r\n\r\n // With equal relevance: external suggestions before history\r\n if (a.type === 'suggestion' && b.type === 'history') return -1;\r\n if (a.type === 'history' && b.type === 'suggestion') return 1;\r\n\r\n // Alphabetical sorting as last criterion\r\n return aText.localeCompare(bText);\r\n });\r\n\r\n } else {\r\n // For empty query: Show only history (no external suggestions)\r\n if (this.enableHistory && this.searchHistory.length > 0) {\r\n const historySuggestions = this.searchHistory.map((term, index) => ({\r\n id: `history-${index}`,\r\n text: term,\r\n type: 'history' as const\r\n }));\r\n\r\n suggestions = historySuggestions;\r\n }\r\n // For empty query DO NOT show external suggestions\r\n }\r\n\r\n // Remove duplicates based on text and scope combination (history takes precedence over external)\r\n const uniqueSuggestions = suggestions.reduce((unique: SuggestionItem[], current) => {\r\n const existingIndex = unique.findIndex(item =>\r\n item.text.toLowerCase() === current.text.toLowerCase() &&\r\n item.scope === current.scope\r\n );\r\n if (existingIndex === -1) {\r\n unique.push(current);\r\n } else {\r\n // If already exists, prefer history over external suggestions\r\n if (current.type === 'history' && unique[existingIndex].type !== 'history') {\r\n unique[existingIndex] = current;\r\n }\r\n }\r\n return unique;\r\n }, []);\r\n\r\n this.filteredSuggestions = uniqueSuggestions.slice(0, this.maxSuggestions);\r\n this.selectedSuggestionIndex = -1;\r\n }\r\n\r\n private navigateSuggestions(direction: number) {\r\n const maxIndex = this.filteredSuggestions.length - 1;\r\n\r\n if (direction > 0) {\r\n this.selectedSuggestionIndex = this.selectedSuggestionIndex < maxIndex\r\n ? this.selectedSuggestionIndex + 1\r\n : 0;\r\n } else {\r\n this.selectedSuggestionIndex = this.selectedSuggestionIndex > 0\r\n ? this.selectedSuggestionIndex - 1\r\n : maxIndex;\r\n }\r\n }\r\n\r\n private selectSuggestion(suggestion: SuggestionItem) {\r\n this.value = suggestion.text;\r\n this.inputElement.value = suggestion.text;\r\n this.ifxSuggestionSelected.emit(suggestion);\r\n this.ifxInput.emit(this.value);\r\n\r\n if (this.enableHistory) {\r\n // Always add selected suggestions to history since they are valid results\r\n this.addToHistory(suggestion.text);\r\n }\r\n\r\n this.hideDropdown();\r\n }\r\n\r\n private hideDropdown() {\r\n this.showDropdown = false;\r\n this.selectedSuggestionIndex = -1;\r\n this.isFocused = false;\r\n }\r\n\r\n // Show only history in dropdown (e.g. on focus without input)\r\n private showHistoryDropdown() {\r\n if (this.enableHistory && this.searchHistory.length > 0) {\r\n // Show only history entries\r\n const historySuggestions = this.searchHistory.map((term, index) => ({\r\n id: `history-${index}`,\r\n text: term,\r\n type: 'history' as const\r\n }));\r\n\r\n this.filteredSuggestions = historySuggestions.slice(0, this.maxSuggestions);\r\n this.selectedSuggestionIndex = -1;\r\n } else {\r\n this.filteredSuggestions = [];\r\n }\r\n }\r\n\r\n // Check if only history entries are displayed (without text input)\r\n private isShowingOnlyHistory(): boolean {\r\n return this.value.length === 0 &&\r\n this.filteredSuggestions.length > 0 &&\r\n this.filteredSuggestions.every(s => s.type === 'history');\r\n }\r\n\r\n // Render text with highlighted matches\r\n private renderHighlightedText(text: string, query: string) {\r\n if (!query || query.length === 0) {\r\n return text;\r\n }\r\n\r\n const lowerText = text.toLowerCase();\r\n const lowerQuery = query.toLowerCase();\r\n const index = lowerText.indexOf(lowerQuery);\r\n\r\n if (index === -1) {\r\n return text;\r\n }\r\n\r\n const before = text.substring(0, index);\r\n const match = text.substring(index, index + query.length);\r\n const after = text.substring(index + query.length);\r\n\r\n return [\r\n before,\r\n <strong>{match}</strong>,\r\n after\r\n ];\r\n }\r\n\r\n componentWillLoad() {\r\n this.loadSearchHistory();\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) {\r\n const framework = detectFramework()\r\n trackComponent('ifx-search-field', await framework)\r\n }\r\n }\r\n\r\n componentWillUpdate() {\r\n if (this.value !== \"\") {\r\n this.showDeleteIconInternalState = true;\r\n } else this.showDeleteIconInternalState = false;\r\n }\r\n\r\n render() {\r\n return (\r\n <div\r\n aria-disabled={this.disabled}\r\n aria-value={this.value}\r\n class='search-field'\r\n >\r\n <div\r\n class={this.getWrapperClassNames()}\r\n tabindex={1}\r\n onClick={() => this.focusInput()}\r\n >\r\n <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\r\n <input\r\n ref={(el) => (this.inputElement = el)}\r\n type=\"text\"\r\n autocomplete={this.autocomplete}\r\n onInput={() => this.handleInput()}\r\n onFocus={() => this.focusInput()}\r\n onBlur={() => this.blurInput()}\r\n placeholder={this.placeholder}\r\n disabled={this.disabled}\r\n maxlength={this.maxlength}\r\n value={this.value}\r\n role=\"combobox\"\r\n aria-controls={this.showDropdown ? 'suggestions-dropdown' : undefined}\r\n aria-expanded={this.showDropdown}\r\n aria-autocomplete=\"list\"\r\n aria-haspopup=\"listbox\"\r\n aria-label={this.ariaLabel}\r\n aria-labelledby={this.ariaLabelledBy}\r\n aria-describedby={this.ariaDescribedBy}\r\n aria-owns={this.showDropdown ? 'suggestions-dropdown' : undefined}\r\n aria-activedescendant={this.selectedSuggestionIndex >= 0 ? `suggestion-${this.selectedSuggestionIndex}` : undefined}\r\n />\r\n {this.showDeleteIcon && this.showDeleteIconInternalState ? (\r\n <ifx-icon\r\n icon=\"cRemove16\"\r\n class=\"delete-icon\"\r\n onClick={this.handleDelete}\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-label={this.deleteIconAriaLabel}\r\n onKeyDown={(event) => {\r\n if (event.key === 'Enter' || event.key === ' ') {\r\n event.preventDefault();\r\n this.handleDelete();\r\n }\r\n }}>\r\n </ifx-icon>\r\n ) : null}\r\n </div>\r\n\r\n {/* Suggestions Dropdown */}\r\n {this.showDropdown && this.filteredSuggestions.length > 0 && (\r\n <div\r\n ref={(el) => (this.dropdownElement = el)}\r\n id=\"suggestions-dropdown\"\r\n class=\"suggestions-dropdown\"\r\n role=\"listbox\"\r\n aria-label={this.dropdownAriaLabel}\r\n >\r\n {/* History Header - only show when exclusively showing history entries */}\r\n {this.isShowingOnlyHistory() && (\r\n <div class=\"suggestions-header\">\r\n {this.historyHeaderText}\r\n </div>\r\n )}\r\n\r\n {this.filteredSuggestions.map((suggestion, index) => (\r\n <div\r\n key={suggestion.id}\r\n id={`suggestion-${index}`}\r\n class={this.getSuggestionClassNames(index)}\r\n role=\"option\"\r\n aria-selected={index === this.selectedSuggestionIndex}\r\n aria-label={`${suggestion.type === 'history' ? this.historyItemAriaLabel : this.suggestionAriaLabel}: ${suggestion.text}${suggestion.scope ? `, ${suggestion.scope}` : ''}${suggestion.resultCount ? `, ${suggestion.resultCount} results` : ''}`}\r\n onClick={() => this.selectSuggestion(suggestion)}\r\n onMouseEnter={() => this.selectedSuggestionIndex = index}\r\n >\r\n <div class=\"suggestion-content\">\r\n {suggestion.type === 'history' && (\r\n <ifx-icon icon=\"history-16\" class=\"suggestion-icon suggestion-icon--history\"></ifx-icon>\r\n )}\r\n {suggestion.type === 'suggestion' && (\r\n <ifx-icon icon=\"search-16\" class=\"suggestion-icon suggestion-icon--suggestion\"></ifx-icon>\r\n )}\r\n <span class=\"suggestion-text\">\r\n <span class=\"suggestion-main-text\">\r\n {this.renderHighlightedText(suggestion.text, this.value)}\r\n </span>\r\n {suggestion.scope && (\r\n <span class=\"suggestion-scope\">– {suggestion.scope}</span>\r\n )}\r\n </span>\r\n\r\n {suggestion.resultCount !== undefined && suggestion.scope && (\r\n <span class=\"suggestion-count\">{suggestion.resultCount}</span>\r\n )}\r\n\r\n {/* Delete Button only for history entries */}\r\n {suggestion.type === 'history' && (\r\n <ifx-icon\r\n icon=\"cross16\"\r\n class=\"suggestion-delete-icon\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-label={`${this.historyDeleteAriaLabel}: ${suggestion.text}`}\r\n onClick={(event) => this.handleHistoryDelete(event, suggestion.text)}\r\n onKeyDown={(event) => {\r\n if (event.key === 'Enter' || event.key === ' ') {\r\n event.preventDefault();\r\n this.handleHistoryDelete(event, suggestion.text);\r\n }\r\n }}\r\n ></ifx-icon>\r\n )}\r\n </div>\r\n </div>\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n\r\n getSizeClass() {\r\n return `${this.size}` === \"s\"\r\n ? \"search-field__wrapper-s\"\r\n : \"\";\r\n }\r\n\r\n getWrapperClassNames() {\r\n return classNames(\r\n `search-field__wrapper`,\r\n `search-field__wrapper ${this.getSizeClass()}`,\r\n `${this.isFocused ? 'focused' : \"\"}`,\r\n `${this.showDropdown ? 'dropdown-open' : \"\"}`,\r\n `${this.disabled ? 'disabled' : \"\"}`\r\n );\r\n }\r\n\r\n getSuggestionClassNames(index: number) {\r\n return classNames(\r\n 'suggestion-item',\r\n {\r\n 'suggestion-item--selected': index === this.selectedSuggestionIndex,\r\n 'suggestion-item--history': this.filteredSuggestions[index]?.type === 'history'\r\n }\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/{p-BGgzlGhs.js → p-DcAKq8Jr.js} RENAMED Viewed

@@ -25,13 +25,13 @@ const RadioButton = /*@__PURE__*/ proxyCustomElement(class RadioButton extends H
         this.fallbackInput.type = 'radio';
         this.fallbackInput.hidden = true;
         this.fallbackInput.className = '_ifx-radiobutton-fallback';
-        this.fallbackInput.style.cssText = `
-      display: none !important;
-      position: absolute !important;
-      opacity: 0 !important;
-      pointer-events: none !important;
-      width: 0 !important;
-      height: 0 !important;
+        this.fallbackInput.style.cssText = `
+      display: none !important;
+      position: absolute !important;
+      opacity: 0 !important;
+      pointer-events: none !important;
+      width: 0 !important;
+      height: 0 !important;
     `;
         this.fallbackInput.setAttribute('aria-hidden', 'true');
         this.fallbackInput.tabIndex = -1;
@@ -95,9 +95,9 @@ const RadioButton = /*@__PURE__*/ proxyCustomElement(class RadioButton extends H
         }
     }
     render() {
-        return (h("div", { key: 'cfacddd9fcb1feebcf926fb2a7e441e56e511759', role: "radio", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: (e) => this.handleRadioButtonClick(e), tabindex: this.disabled ? -1 : 0 }, h("div", { key: 'badf42cd6e21d2a2b647da3d1cd29c403590ef26', class: `radioButton__wrapper
-            ${this.internalChecked ? 'checked' : ''}
-            ${this.error ? 'error' : ''}` }, this.internalChecked && h("div", { key: '950b1c9cd2fdaebe227da8d22147f6680652672f', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: '86c20225f259e41f6d55299e91f9cbd3616df8d9', class: `label ${this.size === "m" ? "label-m" : ""}` }, h("slot", { key: '346d7d0732bf33d9363a717e99453b3b32332a11' }))), h("input", { key: '3bddb087935626e217325a290de6ec0444d2b2b2', type: "radio", hidden: true, ref: el => this.inputElement = el, name: this.name, value: this.value, checked: this.internalChecked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
+        return (h("div", { key: 'c5e4fa7c1beea5dcfa20b595d43e21641a6fcae4', role: "radio", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: (e) => this.handleRadioButtonClick(e), tabindex: this.disabled ? -1 : 0 }, h("div", { key: 'bdbd998bb8535930ebbd40ba292bf836bdf42bbd', class: `radioButton__wrapper
+            ${this.internalChecked ? 'checked' : ''}
+            ${this.error ? 'error' : ''}` }, this.internalChecked && h("div", { key: 'b26cc238ace2996722f6485b51f82c49e5873e0a', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: 'd43b4e722fd6f968ce267d6fab4343ad43c287f3', class: `label ${this.size === "m" ? "label-m" : ""}` }, h("slot", { key: 'dc7296c8f126ae54814db1589084f9990aac1b18' }))), h("input", { key: '70fd723f9829972c31e29ace9a97fc1d1d8cfbb3', type: "radio", hidden: true, ref: el => this.inputElement = el, name: this.name, value: this.value, checked: this.internalChecked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -136,6 +136,6 @@ function defineCustomElement() {
 }
 export { RadioButton as R, defineCustomElement as d };
-//# sourceMappingURL=p-BGgzlGhs.js.map
+//# sourceMappingURL=p-DcAKq8Jr.js.map
-//# sourceMappingURL=p-BGgzlGhs.js.map
+//# sourceMappingURL=p-DcAKq8Jr.js.map

package/dist/components/p-DcAKq8Jr.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-DcAKq8Jr.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button&encapsulation=shadow","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\r\n@use '../../global/font.scss';\r\n\r\n:host {\r\n display: inline-flex;\r\n --_ifx-fallback-display: none !important;\r\n}\r\n\r\n._ifx-radiobutton-fallback {\r\n display: var(--_ifx-fallback-display);\r\n position: absolute !important;\r\n width: 1px !important;\r\n height: 1px !important;\r\n padding: 0 !important;\r\n margin: -1px !important;\r\n overflow: hidden !important;\r\n clip: rect(0, 0, 0, 0) !important;\r\n border: 0 !important;\r\n}\r\n\r\n.radioButton__container {\r\n box-sizing: border-box;\r\n display: inline-flex;\r\n flex-direction: row;\r\n align-items: center;\r\n padding: 0px;\r\n gap: tokens.$ifxSpace100;\r\n cursor: pointer;\r\n font-family: var(--ifx-font-family);\r\n outline: none;\r\n\r\n &.disabled {\r\n cursor: default;\r\n \r\n .radioButton__wrapper {\r\n background-color: tokens.$ifxColorEngineering300;\r\n border-color: tokens.$ifxColorEngineering300;\r\n \r\n &:hover {\r\n background-color: tokens.$ifxColorEngineering300;\r\n }\r\n \r\n &.checked {\r\n background-color: tokens.$ifxColorBaseWhite;\r\n border-color: tokens.$ifxColorEngineering300;\r\n \r\n &::after {\r\n background-color: tokens.$ifxColorEngineering300;\r\n }\r\n \r\n .radioButton__wrapper-mark {\r\n background-color: tokens.$ifxColorEngineering300;\r\n }\r\n \r\n &:hover {\r\n border-color: tokens.$ifxColorEngineering300;\r\n \r\n .radioButton__wrapper-mark {\r\n background-color: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n }\r\n }\r\n \r\n .label {\r\n color: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n\r\n &:not(.disabled) .radioButton__wrapper {\r\n &.error {\r\n border-color: tokens.$ifxColorRed500;\r\n \r\n &:hover,\r\n &:focus-visible {\r\n border-color: tokens.$ifxColorRed500;\r\n }\r\n \r\n &.checked::after {\r\n border-color: tokens.$ifxColorRed500;\r\n background-color: tokens.$ifxColorRed500;\r\n }\r\n }\r\n }\r\n\r\n &:focus:not(.disabled) .radioButton__wrapper {\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n width: calc(100% + 4px);\r\n height: calc(100% + 4px);\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n border: 2px solid tokens.$ifxColorOcean500;\r\n border-radius: 50%;\r\n }\r\n }\r\n\r\n &.m .radioButton__wrapper {\r\n width: tokens.$ifxSize300;\r\n height: tokens.$ifxSize300;\r\n }\r\n\r\n .radioButton__wrapper {\r\n width: tokens.$ifxSize250;\r\n height: tokens.$ifxSize250;\r\n position: relative;\r\n display: block;\r\n border-radius: 50%;\r\n background-color: tokens.$ifxColorBaseWhite;\r\n border: 1px solid tokens.$ifxColorEngineering500;\r\n\r\n .radioButton__wrapper-mark {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n background-color: tokens.$ifxColorOcean500;\r\n border-radius: 50%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n border-color: tokens.$ifxColorBaseTransparent;\r\n }\r\n\r\n &:hover {\r\n background-color: tokens.$ifxColorEngineering200;\r\n }\r\n\r\n &.checked {\r\n border-color: tokens.$ifxColorOcean500;\r\n \r\n &::after {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 10px;\r\n height: 10px;\r\n background-color: tokens.$ifxColorOcean500;\r\n border-radius: 50%;\r\n }\r\n\r\n &:hover {\r\n border-color: tokens.$ifxColorOcean600;\r\n \r\n .radioButton__wrapper-mark {\r\n background-color: tokens.$ifxColorOcean600;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .label {\r\n display: flex;\r\n align-items: center;\r\n height: tokens.$ifxSize250;\r\n font-style: normal;\r\n font-weight: 400;\r\n font-size: tokens.$ifxFontSizeS;\r\n line-height: tokens.$ifxLineHeightS;\r\n color: tokens.$ifxColorBaseBlack;\r\n flex: none;\r\n order: 1;\r\n flex-grow: 0;\r\n\r\n &.label-m {\r\n height: tokens.$ifxSize300;\r\n font-size: tokens.$ifxFontSizeM;\r\n line-height: tokens.$ifxLineHeightM;\r\n }\r\n }\r\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Watch, Method } 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-radio-button',\r\n styleUrl: 'radio-button.scss',\r\n shadow: true,\r\n // formAssociated: true\r\n})\r\nexport class RadioButton {\r\n @Element() el: HTMLElement;\r\n @Prop() disabled: boolean = false;\r\n @Prop() value: string;\r\n @Prop() error: boolean = false;\r\n @Prop({ reflect: true }) size: \"s\" | \"m\" = \"s\";\r\n @Prop({ reflect: true }) name: string;\r\n @Prop({ mutable: true }) checked: boolean;\r\n @State() internalChecked: boolean = false;\r\n @State() hasSlot: boolean = false;\r\n\r\n @Method()\r\n async isChecked(): Promise<boolean> {\r\n return this.internalChecked;\r\n }\r\n \r\n private inputElement: HTMLInputElement;\r\n //private internals: ElementInternals;\r\n private fallbackInput: HTMLInputElement;\r\n\r\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\r\n @Event({ eventName: 'ifxError' }) ifxError: EventEmitter;\r\n\r\n componentWillLoad() {\r\n // Fallback for form association\r\n this.fallbackInput = document.createElement('input');\r\n this.fallbackInput.type = 'radio';\r\n this.fallbackInput.hidden = true;\r\n this.fallbackInput.className = '_ifx-radiobutton-fallback';\r\n this.fallbackInput.style.cssText = `\r\n display: none !important;\r\n position: absolute !important;\r\n opacity: 0 !important;\r\n pointer-events: none !important;\r\n width: 0 !important;\r\n height: 0 !important;\r\n `;\r\n this.fallbackInput.setAttribute('aria-hidden', 'true');\r\n this.fallbackInput.tabIndex = -1;\r\n this.el.appendChild(this.fallbackInput);\r\n\r\n // Initialize ElementInternals if supported\r\n if ('attachInternals' in HTMLElement.prototype) {\r\n try {\r\n //this.internals = this.el.attachInternals();\r\n } catch (e) {\r\n console.warn('ElementInternals not supported');\r\n }\r\n }\r\n\r\n // Initial state\r\n this.internalChecked = this.checked || false;\r\n this.hasSlot = !!this.el.querySelector('[slot]') || this.el.innerHTML.trim() !== '';\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-radio-button', await framework)\r\n }\r\n }\r\n\r\n @Watch('checked')\r\n handleCheckedChange(newValue: boolean) {\r\n this.internalChecked = newValue;\r\n }\r\n\r\n @Watch('internalChecked')\r\n updateFormValue() {\r\n // Update both ElementInternals and fallback input\r\n // if (this.internals?.setFormValue) {\r\n // this.internals.setFormValue(this.internalChecked ? this.value : null);\r\n // }\r\n this.fallbackInput.checked = this.internalChecked;\r\n this.fallbackInput.name = this.name;\r\n this.fallbackInput.value = this.value;\r\n this.fallbackInput.disabled = this.disabled;\r\n }\r\n\r\n @Watch('error')\r\n errorChanged(newValue: boolean, oldValue: boolean) {\r\n if (newValue !== oldValue) {\r\n this.ifxError.emit(newValue);\r\n }\r\n }\r\n\r\n handleRadioButtonClick(event: Event) {\r\n if (this.disabled) {\r\n event.stopPropagation();\r\n return;\r\n }\r\n\r\n this.inputElement.click();\r\n this.internalChecked = this.inputElement.checked;\r\n this.checked = this.internalChecked;\r\n this.ifxChange.emit(this.internalChecked);\r\n\r\n const changeEvent = new CustomEvent('change', {\r\n bubbles: true,\r\n composed: true,\r\n detail: { checked: this.internalChecked }\r\n });\r\n this.el.dispatchEvent(changeEvent);\r\n }\r\n\r\n @Listen('keydown')\r\n handleKeyDown(ev: KeyboardEvent) {\r\n if ([' ', 'Enter'].includes(ev.key)) {\r\n ev.preventDefault();\r\n this.handleRadioButtonClick(new PointerEvent('click'));\r\n }\r\n }\r\n\r\n @Listen('change', { target: 'document' })\r\n handleExternalChange(event: Event) {\r\n const target = event.target as HTMLElement;\r\n if (target === this.el || target.tagName.toLowerCase() !== 'ifx-radio-button') return;\r\n \r\n if (target.getAttribute('name') === this.name) {\r\n this.internalChecked = false;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div\r\n role=\"radio\"\r\n aria-checked={String(this.internalChecked)}\r\n aria-disabled={String(this.disabled)}\r\n class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\r\n onClick={(e) => this.handleRadioButtonClick(e)}\r\n tabindex={this.disabled ? -1 : 0}\r\n >\r\n <div\r\n class={`radioButton__wrapper \r\n ${this.internalChecked ? 'checked' : ''} \r\n ${this.error ? 'error' : ''}`}\r\n >\r\n {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\r\n </div>\r\n\r\n {this.hasSlot && (\r\n <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"}`}>\r\n <slot />\r\n </div>\r\n )}\r\n\r\n <input\r\n type=\"radio\"\r\n hidden\r\n ref={el => this.inputElement = el}\r\n name={this.name}\r\n value={this.value}\r\n checked={this.internalChecked}\r\n disabled={this.disabled}\r\n onClick={(e) => e.stopPropagation()}\r\n />\r\n </div>\r\n );\r\n }\r\n}"],"version":3}

package/dist/components/{p-esRQWwdS.js → p-DfhZt04W.js} RENAMED Viewed

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
-import { d as defineCustomElement$5 } from './p-R79iWjuc.js';
-import { d as defineCustomElement$4 } from './p-DhNY6ZGA.js';
-import { d as defineCustomElement$3 } from './p-C12r4j5b.js';
-import { d as defineCustomElement$2 } from './p-DdOsLLJc.js';
-import { d as defineCustomElement$1 } from './p-DFInpODO.js';
+import { d as defineCustomElement$5 } from './p-DrBheHJU.js';
+import { d as defineCustomElement$4 } from './p-BnjY2AJX.js';
+import { d as defineCustomElement$3 } from './p-BODyHBnq.js';
+import { d as defineCustomElement$2 } from './p-BNfoBOb0.js';
+import { d as defineCustomElement$1 } from './p-DzvIkH4S.js';
 const templateCss = ".react__template-wrapper{display:flex;width:300px;height:200px;border-radius:3px;border:1px solid #ccc}.react__template-wrapper.hide{display:none}.react__template-wrapper:hover{cursor:pointer}.template__page-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.template__page-wrapper .repository__url{text-decoration:none}.input__fields-wrapper{display:flex;flex-direction:column;gap:10px}.details__wrapper{display:flex;flex-direction:column;gap:10px}.selection__buttons-wrapper{display:flex;gap:10px;padding-top:10px;align-items:center}.selection__buttons-wrapper .vue__label{color:#ccc}.selection__buttons-wrapper label:not(.vue__label):hover{cursor:pointer}.selection__buttons-wrapper .selection__input{display:flex;align-items:center;gap:5px}.selection__buttons-wrapper .selection__input input{margin:0;height:20px;width:20px}.selection__buttons-wrapper .selection__input input:hover:not(.vue__input){cursor:pointer}.image__wrapper img{position:relative;width:300px;height:100%;border-radius:3px;object-fit:contain;transition:transform 0.2s}.image__wrapper img:hover{transform:scale(2);top:50px;z-index:100}";
@@ -141,7 +141,7 @@ const Template = /*@__PURE__*/ proxyCustomElement(class Template extends H {
         }
     }
     render() {
-        return (h("div", { key: '05eceff653bfdbab6627a338ee585a6f3c7a3c07' }, this.isTemplatePage
+        return (h("div", { key: '3e7b9bcba9d4004b9c4f35a98684eeb11e0f039f' }, this.isTemplatePage
             ?
                 h("div", { class: "template__page-wrapper" }, !this.repoUrl && !this.repoError &&
                     h("div", null, h("h3", null, "Your repository is getting ready.."), h("p", null, "This will only take a minute.")), this.isLoading && !this.repoError && h("div", null, h("ifx-spinner", { variant: 'default', size: 's' })), this.repoUrl && h("ifx-link", { href: this.repoUrl, target: "_parent", size: "m", variant: "underlined" }, "Your repository"), this.repoError && h("div", null, this.repoError))
@@ -202,6 +202,6 @@ function defineCustomElement() {
 }
 export { Template as T, defineCustomElement as d };
-//# sourceMappingURL=p-esRQWwdS.js.map
+//# sourceMappingURL=p-DfhZt04W.js.map
-//# sourceMappingURL=p-esRQWwdS.js.map
+//# sourceMappingURL=p-DfhZt04W.js.map

package/dist/components/p-DfhZt04W.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-DfhZt04W.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/templates/template/template.scss?tag=ifx-template&encapsulation=shadow","src/components/templates/template/template.tsx"],"sourcesContent":["\r\n.react__template-wrapper { \r\n display: flex;\r\n width: 300px;\r\n height: 200px;\r\n border-radius: 3px;\r\n border: 1px solid #ccc;\r\n\r\n &.hide { \r\n display: none;\r\n }\r\n \r\n &:hover { \r\n cursor: pointer;\r\n }\r\n}\r\n\r\n.template__page-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n\r\n & .repository__url { \r\n text-decoration: none;\r\n }\r\n}\r\n\r\n.input__fields-wrapper { \r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n\r\n}\r\n\r\n.details__wrapper { \r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n}\r\n\r\n.selection__buttons-wrapper { \r\n display: flex;\r\n gap: 10px;\r\n padding-top: 10px;\r\n align-items: center;\r\n & .vue__label { \r\n color: #ccc;\r\n }\r\n\r\n & label:not(.vue__label) { \r\n &:hover { \r\n cursor: pointer;\r\n }\r\n }\r\n\r\n & .selection__input { \r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n & input { \r\n margin: 0;\r\n height: 20px;\r\n width: 20px;\r\n &:hover:not(.vue__input) { \r\n cursor: pointer;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.image__wrapper { \r\n img { \r\n position: relative;\r\n width: 300px;\r\n height: 100%;\r\n border-radius: 3px;\r\n object-fit: contain;\r\n transition: transform .2s;\r\n &:hover { \r\n transform: scale(2);\r\n top: 50px;\r\n z-index: 100;\r\n }\r\n }\r\n}","import { Component, h, Element, State, Prop, Event, EventEmitter, Method } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-template',\r\n styleUrl: 'template.scss',\r\n shadow: true,\r\n})\r\nexport class Template {\r\n @Element() el: HTMLElement;\r\n @State() repoDetails: { name: string, desc: string, framework: string } = { name: \"\", desc: \"\", framework: \"\" };\r\n @State() repoUrl: string;\r\n @State() showDetails: boolean = false;\r\n @State() isTemplatePage: boolean = false;\r\n @State() isLoading: boolean = true;\r\n @State() repoError: string;\r\n @Prop() name: string;\r\n @Event() toggleTemplates: EventEmitter;\r\n @Event() fieldError: EventEmitter;\r\n @Prop() thumbnail: string;\r\n \r\n private clientId = 'Ov23lixmXiNTTNb6V5W6'\r\n private redirectUri = 'https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development';\r\n private scope = 'repo workflow'\r\n private state = 'template123'\r\n\r\n authUser() { \r\n const authorizationUrl = `https://github.com/login/oauth/authorize?` +\r\n `client_id=${this.clientId}&` +\r\n `redirect_uri=${this.redirectUri}&` +\r\n `scope=${this.scope}&` +\r\n `state=${this.state}`;\r\n \r\n window.open(authorizationUrl, '_blank'); \r\n }\r\n\r\n componentDidLoad() { \r\n const url = new URL(window.location.href);\r\n const code = url.searchParams.get('code');\r\n const { templateName } = this.getLocalStorageValues()\r\n if(code && this.name === templateName) { \r\n this.isTemplatePage = true;\r\n this.toggleTemplates.emit('details')\r\n this.getUserToken(code)\r\n } \r\n }\r\n\r\n getLocalStorageValues() { \r\n const repoName = localStorage.getItem('repo_name');\r\n const repoDesc = localStorage.getItem('repo_desc');\r\n const repoFramework = localStorage.getItem('repo_framework');\r\n const templateName = localStorage.getItem('selectedTemplate');\r\n return { repoName, repoDesc, repoFramework, templateName }\r\n }\r\n\r\n async getUserToken(authCode) {\r\n const { repoName, repoDesc, repoFramework, templateName } = this.getLocalStorageValues();\r\n\r\n fetch(`https://ddstemplate-srv.cfapps.eu10-004.hana.ondemand.com/token/${authCode}/${repoName}/${repoDesc}/${repoFramework}/${templateName}`)\r\n .then(response => {\r\n if (response.ok) {\r\n return response.text();\r\n } else {\r\n return response.text().then(errorMessage => {\r\n throw new Error(errorMessage);\r\n });\r\n }\r\n })\r\n .then(data => { \r\n if(data) { \r\n this.isLoading = false;\r\n this.repoUrl = data;\r\n localStorage.clear();\r\n } \r\n })\r\n .catch(error => {\r\n this.repoError = error.message;\r\n console.error('Error:', error.message)\r\n });\r\n }\r\n\r\n handleUserInput(e, type) { \r\n if (type === 'name') {\r\n this.repoDetails = { ...this.repoDetails, name: e.target.value };\r\n } else if (type === 'desc') {\r\n this.repoDetails = { ...this.repoDetails, desc: e.target.value };\r\n } else if(type === 'framework') { \r\n this.repoDetails = { ...this.repoDetails, framework: e.target.value };\r\n }\r\n }\r\n\r\n submitUserData() { \r\n if(this.repoDetails.name && this.repoDetails.desc && this.repoDetails.framework) { \r\n localStorage.setItem('repo_name', this.repoDetails.name);\r\n localStorage.setItem('repo_desc', this.repoDetails.desc);\r\n localStorage.setItem('repo_framework', this.repoDetails.framework);\r\n localStorage.setItem('selectedTemplate', this.name);\r\n this.fieldError.emit(false)\r\n this.authUser()\r\n } else { \r\n this.fieldError.emit('All fields are mandatory')\r\n }\r\n }\r\n\r\n togglePadding(action) { \r\n let parent = this.el.parentElement;\r\n if (parent) {\r\n const rootNode = parent.getRootNode();\r\n if (rootNode instanceof ShadowRoot) {\r\n parent = rootNode.host.parentElement;\r\n } else {\r\n parent = parent.parentElement;\r\n }\r\n if(action === 'remove') { \r\n parent.parentElement.style.padding = '0px';\r\n } else if(action === 'add') { \r\n parent.parentElement.style.padding = '4rem 20px';\r\n }\r\n }\r\n }\r\n\r\n handleCurrentTemplate(e) { \r\n if(e && !this.showDetails) { \r\n this.togglePadding('remove')\r\n const targetTemplate = e.currentTarget;\r\n this.toggleTemplates.emit(targetTemplate)\r\n this.showDetails = true;\r\n } \r\n }\r\n\r\n @Method()\r\n async toggleTemplate(currTemp) { \r\n const templateWrapper = this.el.shadowRoot.querySelector('.react__template-wrapper');\r\n if(templateWrapper) { \r\n if(!templateWrapper.classList.contains('hide') && currTemp ) { \r\n if(templateWrapper !== currTemp) {\r\n templateWrapper.classList.add('hide')\r\n }\r\n } else { \r\n if(this.showDetails) { \r\n this.showDetails = false;\r\n }\r\n this.togglePadding('add')\r\n templateWrapper.classList.remove('hide')\r\n }\r\n }\r\n }\r\n\r\n \r\n render() {\r\n return (\r\n <div>\r\n {this.isTemplatePage \r\n ? \r\n <div class=\"template__page-wrapper\">\r\n {!this.repoUrl && !this.repoError && \r\n <div>\r\n <h3>Your repository is getting ready..</h3>\r\n <p>This will only take a minute.</p>\r\n </div>}\r\n {this.isLoading && !this.repoError && <div><ifx-spinner variant='default' size='s' /></div>}\r\n {this.repoUrl && <ifx-link href={this.repoUrl} target=\"_parent\" size=\"m\" variant=\"underlined\">Your repository</ifx-link>}\r\n {this.repoError && <div>{this.repoError}</div>}\r\n </div> \r\n : \r\n <div class=\"react__template-container\">\r\n <div class=\"react__template-wrapper\" onClick={(e) => this.handleCurrentTemplate(e)}>\r\n <div class=\"image__wrapper\">\r\n <img src={this.thumbnail} />\r\n </div>\r\n </div>\r\n {this.showDetails && \r\n <div class=\"details__wrapper\">\r\n <div class=\"selection__buttons-wrapper\">\r\n <div class=\"selection__input\">\r\n <input type=\"radio\" id=\"react\" name=\"chosen_framework\" value=\"react\" onInput={(e) => this.handleUserInput(e, 'framework')} />\r\n <label htmlFor=\"react\">React</label>\r\n </div>\r\n <div class=\"selection__input vue\">\r\n <input class=\"vue__input\" disabled type=\"radio\" id=\"vue\" name=\"chosen_framework\" value=\"vue\" onInput={(e) => this.handleUserInput(e, 'framework')}/>\r\n <label class=\"vue__label\" htmlFor=\"vue\">Vue</label> (Soon)\r\n </div>\r\n </div>\r\n \r\n\r\n <div class=\"input__fields-wrapper\">\r\n <ifx-text-field required={true} onInput={(e) => this.handleUserInput(e, 'name')} size=\"m\" icon=\"c-info-16\" placeholder=\"Your repository name\">Repository Name</ifx-text-field>\r\n\r\n <ifx-text-field required={true} size=\"m\" icon=\"c-info-16\" onInput={(e) => this.handleUserInput(e, 'desc')} placeholder=\"Your repository description\">Repository Description</ifx-text-field>\r\n\r\n <ifx-button fullWidth={true} onClick={() => this.submitUserData()} variant='primary'>Generate template</ifx-button>\r\n </div>\r\n \r\n </div>}\r\n </div>}\r\n </div>\r\n );\r\n }\r\n}"],"version":3}

package/dist/components/{p-R79iWjuc.js → p-DrBheHJU.js} RENAMED Viewed

@@ -106,7 +106,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends H {
         }
     }
     render() {
-        return (h(Host, { key: 'c04892373b37cea4d0ea2e539c6fde9757ba4bcf' }, h("a", { key: 'eb107f3b40cddc93f9e642788ba25dc77e7e5169', role: this.href ? 'link' : 'button', tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.internalHref : undefined, target: this.target, onClick: this.handleClick, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, onFocus: (event) => this.handleFocus(event), "aria-disabled": this.disabled ? 'true' : null, "aria-describedby": this.theme === 'danger' ? 'Dangerous action' : undefined, "aria-label": this.ariaLabel || undefined }, h("slot", { key: '77ed12eeef09759fe4fb776e012d052c2c1b3383' }))));
+        return (h(Host, { key: 'a0ccc7f723475c894275ccd0ac6585165a9616a7' }, h("a", { key: 'e83891c14e8808caad6bb028f76072cd15397e2d', role: this.href ? 'link' : 'button', tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.internalHref : undefined, target: this.target, onClick: this.handleClick, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, onFocus: (event) => this.handleFocus(event), "aria-disabled": this.disabled ? 'true' : null, "aria-describedby": this.theme === 'danger' ? 'Dangerous action' : undefined, "aria-label": this.ariaLabel || undefined }, h("slot", { key: '5b38794f154c049ceba977ded7e4ada9854f6656' }))));
     }
     getVariantClass() {
         return `${this.variant}` === "secondary"
@@ -166,6 +166,6 @@ function defineCustomElement() {
 }
 export { Button as B, defineCustomElement as d };
-//# sourceMappingURL=p-R79iWjuc.js.map
+//# sourceMappingURL=p-DrBheHJU.js.map
-//# sourceMappingURL=p-R79iWjuc.js.map
+//# sourceMappingURL=p-DrBheHJU.js.map

package/dist/components/p-DrBheHJU.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-DrBheHJU.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,uuLAAuuL;;MCW5uL,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AALnB,IAAA,WAAA,GAAA;;;;AAMU,QAAA,IAAO,CAAA,OAAA,GAAyC,SAAS;AACzD,QAAA,IAAK,CAAA,KAAA,GAAqC,SAAS;AACnD,QAAA,IAAI,CAAA,IAAA,GAAW,GAAG;AAClB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAGzB,QAAA,IAAM,CAAA,MAAA,GAAW,OAAO;AACxB,QAAA,IAAI,CAAA,IAAA,GAAkC,QAAQ;AAC9C,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AA4DlC,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,EAAS,KAAI;AAC1B,YAAA,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE;gBACtB,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC;gBAC1C,IAAI,UAAU,EAAE;oBACd,EAAE,CAAC,cAAc,EAAE;AAEnB,oBAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;;AAEzB,wBAAA,IAAI,CAAC,iBAAiB,EAAE,CAAC;;yBACpB;wBACL,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC;AACnD,wBAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,4BAAA,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;;AAE7B,wBAAA,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM;AACjC,wBAAA,UAAU,CAAC,WAAW,CAAC,UAAU,CAAC;wBAClC,UAAU,CAAC,KAAK,EAAE;wBAClB,UAAU,CAAC,MAAM,EAAE;;;;AAI3B,SAAC;AAoFF;AA7JC,IAAA,eAAe,CAAC,QAAgB,EAAA;AAC9B,QAAA,IAAI,CAAC,YAAY,GAAG,QAAQ;;AAI9B,IAAA,MAAM,QAAQ,GAAA;AACZ,QAAA,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE;;IAG/B,kBAAkB,GAAA;QAChB,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC;QACpD,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;QAClC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM;AACxC,QAAA,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC;;IAGxD,yBAAyB,GAAA;QACvB,IAAI,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;AAC3B,YAAA,IAAI,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE;AAChB,gBAAA,IAAI,CAAC,EAAE,CAAC,YAAY,GAAG,SAAS;;YAElC,IAAI,CAAC,kBAAkB,EAAE;;aACpB;AACL,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI;;;IAIjC,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC;;aACpC;YACL,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE,aAAa,CAAC;;;IAIpD,iBAAiB,GAAA;QACf,IAAI,CAAC,yBAAyB,EAAE;;AAGlC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,YAAY,EAAE,MAAM,SAAS,CAAC;;;IAIjD,mBAAmB,GAAA;QACjB,IAAI,CAAC,iBAAiB,EAAE;;IA4B1B,iBAAiB,GAAA;QACf,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC;QAC3C,MAAM,cAAc,GAAG,WAAW,CAAC,gBAAgB,CAAC,8BAA8B,CAAC;AACnF,QAAA,cAAc,CAAC,OAAO,CAAC,OAAO,IAAG;YAC/B,OAAO,CAAC,KAAK,EAAE;AACjB,SAAC,CAAC;;AAIJ,IAAA,aAAa,CAAC,EAAiB,EAAA;AAC7B,QAAA,IAAK,EAAE,CAAC,GAAG,KAAK,GAAG,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAC3D,YAAA,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE;;;AAKjC,IAAA,eAAe,CAAC,KAAY,EAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE;YAC1B,KAAK,CAAC,wBAAwB,EAAE;;;AAIpC,IAAA,WAAW,CAAC,KAAiB,EAAA;AAC3B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE;;;IAIhC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,QAAQ,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,EACzC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAC3B,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,SAAS,EACpD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,GAAG,EAAE,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,EACjE,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAA,eAAA,EAC5B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,sBAC1B,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,kBAAkB,GAAG,SAAS,EAC9D,YAAA,EAAA,IAAI,CAAC,SAAS,IAAI,SAAS,EAAA,EAEvC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACX,CACC;;IAKX,eAAe,GAAA;AACb,QAAA,OAAO,GAAG,IAAI,CAAC,OAAO,CAAA,CAAE,KAAK;AAC3B,cAAE,CAAA,UAAA,EAAa,IAAI,CAAC,KAAK,CAAE;AAC3B,cAAE,CAAG,EAAA,IAAI,CAAC,OAAO,CAAA,CAAE,KAAK;AACtB,kBAAE,CAAA,SAAA,EAAY,IAAI,CAAC,KAAK,CAAE;AAC1B,kBAAE,CAAG,EAAA,IAAI,CAAC,KAAK,EAAE;;IAGvB,YAAY,GAAA;QACV,IAAI,CAAA,EAAG,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI,EAAE;AAC3B,YAAA,OAAO,IAAI;;aAER,IAAI,CAAA,EAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,EAAE;AAC/B,YAAA,OAAO,GAAG;;aAEP,IAAI,CAAA,EAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,EAAE;AAC/B,YAAA,OAAO,GAAG;;;AAEP,YAAA,OAAO,EAAE;;IAGhB,aAAa,GAAA;AACX,QAAA,OAAO,UAAU,CACf,KAAK,EACL,IAAI,CAAC,IAAI,IAAI,CAAA,IAAA,EAAO,IAAI,CAAC,YAAY,EAAE,CAAA,CAAE,EACzC,CAAO,IAAA,EAAA,IAAI,CAAC,eAAe,EAAE,CAAA,CAAE,EAC/B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/button/button.scss?tag=ifx-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n vertical-align: bottom;\r\n display: inline-flex;\r\n width: var(--bw, fit-content);\r\n}\r\n\r\n.btn {\r\n box-sizing: border-box;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: tokens.$ifxSize500;\r\n padding: 0px tokens.$ifxSpace200;\r\n gap: tokens.$ifxSpace100;\r\n color: tokens.$ifxColorBaseWhite;\r\n font-weight: tokens.$ifxFontWeightSemibold;\r\n border-radius: tokens.$ifxBorderRadius12;\r\n line-height: tokens.$ifxLineHeightM;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n font-style: normal;\r\n text-decoration: none;\r\n user-select: none;\r\n font-size: tokens.$ifxFontSizeM;\r\n transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\r\n width: var(--bw, fit-content);\r\n}\r\n\r\n.btn:not(.disabled) {\r\n cursor: pointer;\r\n}\r\n\r\n.btn.disabled {\r\n pointer-events: none;\r\n}\r\n\r\n.btn-default {\r\n //default variant=primary; default color=default\r\n color: tokens.$ifxColorBaseWhite;\r\n background-color: tokens.$ifxColorOcean500;\r\n\r\n &:disabled,\r\n &.disabled {\r\n background-color: tokens.$ifxColorEngineering300;\r\n color: tokens.$ifxColorBaseWhite;\r\n pointer-events: none;\r\n\r\n }\r\n}\r\n\r\n.btn-secondary-default {\r\n background-color: tokens.$ifxColorBaseWhite;\r\n color: tokens.$ifxColorOcean500;\r\n border: 1px solid tokens.$ifxColorOcean500;\r\n\r\n &:disabled,\r\n &.disabled {\r\n background-color: tokens.$ifxColorBaseWhite;\r\n border: 1px solid tokens.$ifxColorEngineering300;\r\n color: tokens.$ifxColorEngineering300;\r\n pointer-events: none;\r\n\r\n }\r\n}\r\n\r\n.btn-tertiary-default {\r\n background-color: tokens.$ifxColorBaseTransparent;\r\n color: tokens.$ifxColorOcean500;\r\n\r\n &:disabled,\r\n &.disabled {\r\n color: tokens.$ifxColorEngineering300;\r\n pointer-events: none;\r\n\r\n }\r\n}\r\n\r\n\r\n.btn-danger {\r\n color: tokens.$ifxColorBaseWhite;\r\n background-color: tokens.$ifxColorRed500;\r\n border-color: tokens.$ifxColorRed500;\r\n\r\n &:disabled,\r\n &.disabled {\r\n background-color: tokens.$ifxColorEngineering300;\r\n color: tokens.$ifxColorBaseWhite;\r\n pointer-events: none;\r\n\r\n }\r\n}\r\n\r\n.btn-secondary-danger {\r\n background-color: tokens.$ifxColorBaseWhite;\r\n color: tokens.$ifxColorRed500;\r\n border: 1px solid tokens.$ifxColorRed500;\r\n\r\n &:disabled,\r\n &.disabled {\r\n background-color: tokens.$ifxColorBaseWhite;\r\n border: 1px solid tokens.$ifxColorEngineering300;\r\n color: tokens.$ifxColorEngineering300;\r\n pointer-events: none;\r\n\r\n }\r\n}\r\n\r\n.btn-tertiary-danger {\r\n //combination tertiary + danger not in design\r\n background-color: tokens.$ifxColorBaseTransparent;\r\n color: tokens.$ifxColorRed500;\r\n\r\n &:disabled,\r\n &.disabled {\r\n background-color: tokens.$ifxColorBaseWhite;\r\n color: tokens.$ifxColorEngineering300;\r\n pointer-events: none;\r\n\r\n }\r\n}\r\n\r\n.btn-inverse {\r\n color: tokens.$ifxColorOcean500;\r\n background-color: tokens.$ifxColorBaseWhite;\r\n\r\n &:disabled,\r\n &.disabled {\r\n opacity: tokens.$ifxOpacity100;\r\n background-color: tokens.$ifxColorBaseWhite;\r\n color: tokens.$ifxColorEngineering300;\r\n pointer-events: none;\r\n }\r\n}\r\n\r\n.btn-secondary-inverse {\r\n color: tokens.$ifxColorBaseWhite;\r\n border: 1px solid tokens.$ifxColorBaseWhite;\r\n\r\n &:disabled,\r\n &.disabled {\r\n border: 1px solid tokens.$ifxColorBaseWhite;\r\n color: tokens.$ifxColorBaseWhite;\r\n pointer-events: none;\r\n\r\n }\r\n}\r\n\r\n\r\n.btn-tertiary-inverse {\r\n color: tokens.$ifxColorBaseWhite;\r\n\r\n &:disabled,\r\n &.disabled {\r\n color: tokens.$ifxColorBaseWhite;\r\n opacity: tokens.$ifxOpacity100;\r\n pointer-events: none;\r\n\r\n }\r\n}\r\n\r\n.btn {\r\n & ifx-icon:empty {\r\n display: none;\r\n }\r\n\r\n &.btn-xs {\r\n font-size: tokens.$ifxFontSizeS;\r\n height: tokens.$ifxSize400;\r\n line-height: tokens.$ifxLineHeightXs;\r\n }\r\n\r\n &.btn-s {\r\n font-size: tokens.$ifxFontSizeS;\r\n height: tokens.$ifxSize450;\r\n line-height: tokens.$ifxLineHeightS;\r\n }\r\n\r\n // &.btn-m { //default\r\n // font-size: tokens.$ifxFontSizeM;\r\n // height: tokens.$ifxSize400;\r\n // line-height: tokens.$ifxLineHeightM;\r\n // }\r\n\r\n\r\n &.btn-l {\r\n font-size: tokens.$ifxFontSizeXl;\r\n height: tokens.$ifxSize600;\r\n line-height: tokens.$ifxLineHeightXl;\r\n }\r\n\r\n\r\n\r\n &.btn-default:not(:disabled, .disabled) {\r\n &:focus:not(:active, .active) {\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\r\n }\r\n\r\n &:hover {\r\n background-color: tokens.$ifxColorOcean600;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n background-color: tokens.$ifxColorOcean700;\r\n }\r\n }\r\n\r\n &.btn-secondary-default:not(:disabled, .disabled) {\r\n &:focus:not(:active, .active) {\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\r\n }\r\n\r\n &:hover {\r\n color: tokens.$ifxColorBaseWhite;\r\n background-color: tokens.$ifxColorOcean600;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n background-color: tokens.$ifxColorOcean700;\r\n }\r\n }\r\n\r\n &.btn-secondary:not(:disabled, .disabled) {\r\n\r\n &:hover {\r\n background-color: tokens.$ifxColorBerry500;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n background-color: tokens.$ifxColorBerry500;\r\n }\r\n }\r\n\r\n\r\n\r\n &.btn-danger:not(:disabled, .disabled) {\r\n &:focus:not(:active, .active) {\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\r\n }\r\n\r\n &:hover {\r\n background-color: tokens.$ifxColorRed600;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n background-color: tokens.$ifxColorRed700;\r\n }\r\n }\r\n\r\n &.btn-secondary-danger:not(:disabled, .disabled) {\r\n\r\n &:focus:not(:active, .active) {\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\r\n }\r\n\r\n &:hover {\r\n color: tokens.$ifxColorBaseWhite;\r\n background-color: tokens.$ifxColorRed600;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n background-color: tokens.$ifxColorRed700;\r\n }\r\n }\r\n\r\n\r\n &.btn-inverse:not(:disabled, .disabled) {\r\n &:focus:not(:active, .active) {\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\r\n }\r\n\r\n &:hover {\r\n background-color: tokens.$ifxColorEngineering200;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n background-color: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n\r\n &.btn-secondary-inverse:not(:disabled, .disabled) {\r\n &:focus:not(:active, .active) {\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\r\n }\r\n\r\n &:hover {\r\n color: tokens.$ifxColorOcean500;\r\n background-color: tokens.$ifxColorEngineering200;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n color: tokens.$ifxColorOcean500;\r\n background-color: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n\r\n\r\n\r\n &.btn-tertiary-default:not(:disabled, .disabled) {\r\n &:focus:not(:active, .active) {\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean600;\r\n }\r\n\r\n &:hover {\r\n color: tokens.$ifxColorOcean600;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n color: tokens.$ifxColorOcean700;\r\n }\r\n\r\n\r\n }\r\n\r\n\r\n\r\n\r\n\r\n &.btn-tertiary-danger:not(:disabled, .disabled) {\r\n &:focus:not(:active, .active) {\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorRed600;\r\n }\r\n\r\n &:hover {\r\n color: tokens.$ifxColorRed600;\r\n }\r\n\r\n &:active,\r\n &.active {\r\n color: tokens.$ifxColorRed700;\r\n }\r\n\r\n }\r\n\r\n\r\n &.btn-tertiary-inverse:not(:disabled, .disabled) {\r\n &:focus:not(:active, .active) {\r\n outline: none;\r\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\r\n }\r\n\r\n &:hover {\r\n color: tokens.$ifxColorEngineering200;\r\n\r\n }\r\n\r\n &:active,\r\n &.active {\r\n color: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n}","import { Component, Prop, h, Host, Method, Element, Listen, State, Watch } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport classNames from 'classnames';\r\n \r\n@Component({\r\n tag: 'ifx-button',\r\n styleUrl: 'button.scss',\r\n shadow: true,\r\n})\r\nexport class Button {\r\n @Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\r\n @Prop() theme: 'default' | 'danger' | 'inverse' = 'default';\r\n @Prop() size: string = 'm';\r\n @Prop() disabled: boolean = false;\r\n @State() internalHref: string;\r\n @Prop() href: string;\r\n @Prop() target: string = '_self';\r\n @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\r\n @Prop() fullWidth: boolean = false;\r\n @Prop() ariaLabel: string | null;\r\n @Element() el;\r\n\r\n private focusableElement: HTMLElement;\r\n private nativeButton: HTMLButtonElement | HTMLInputElement;\r\n\r\n @Watch('href')\r\n setInternalHref(newValue: string) {\r\n this.internalHref = newValue;\r\n }\r\n\r\n @Method()\r\n async setFocus() {\r\n this.focusableElement.focus();\r\n }\r\n\r\n insertNativeButton() {\r\n this.nativeButton = document.createElement('button');\r\n this.nativeButton.type = this.type;\r\n this.nativeButton.style.display = 'none';\r\n this.el.closest('form').appendChild(this.nativeButton);\r\n }\r\n\r\n handleFormAndInternalHref() {\r\n if (this.el.closest('form')) {\r\n if (this.el.href) {\r\n this.el.internalHref = undefined;\r\n }\r\n this.insertNativeButton()\r\n } else {\r\n this.internalHref = this.href;\r\n }\r\n }\r\n\r\n handleButtonWidth() {\r\n if (this.fullWidth) {\r\n this.el.style.setProperty('--bw', '100%');\r\n } else {\r\n this.el.style.setProperty('--bw', 'fit-content');\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n this.handleFormAndInternalHref()\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-button', await framework)\r\n }\r\n }\r\n\r\n componentWillRender() {\r\n this.handleButtonWidth()\r\n }\r\n\r\n\r\n\r\n handleClick = (ev: Event) => {\r\n if (this.el.shadowRoot) {\r\n const parentForm = this.el.closest('form');\r\n if (parentForm) {\r\n ev.preventDefault();\r\n\r\n if (this.type === 'reset') {\r\n // If the button type is 'reset', manually reset all custom form fields\r\n this.resetClickHandler(); //this will reset all ifx-text-fields within a form\r\n } else {\r\n const fakeButton = document.createElement('button');\r\n if (this.type) {\r\n fakeButton.type = this.type;\r\n }\r\n fakeButton.style.display = 'none';\r\n parentForm.appendChild(fakeButton);\r\n fakeButton.click();\r\n fakeButton.remove();\r\n }\r\n }\r\n }\r\n }\r\n\r\n resetClickHandler() {\r\n const formElement = this.el.closest('form');\r\n const customElements = formElement.querySelectorAll('ifx-text-field, ifx-textarea');\r\n customElements.forEach(element => {\r\n element.reset();\r\n });\r\n }\r\n\r\n @Listen('keydown')\r\n handleKeyDown(ev: KeyboardEvent) {\r\n if ( ev.key === \" \" || ev.key === 'Enter' && !this.disabled) {\r\n this.focusableElement.click();\r\n }\r\n }\r\n\r\n @Listen('click', { capture: true })\r\n handleHostClick(event: Event) {\r\n if (this.disabled === true) {\r\n event.stopImmediatePropagation();\r\n }\r\n }\r\n\r\n handleFocus(event: FocusEvent) {\r\n if (this.disabled) {\r\n event.preventDefault();\r\n this.focusableElement.blur();\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <a\r\n role={this.href ? 'link' : 'button'}\r\n tabIndex={this.disabled ? -1 : 0}\r\n ref={(el) => (this.focusableElement = el)}\r\n class={this.getClassNames()}\r\n href={!this.disabled ? this.internalHref : undefined}\r\n target={this.target}\r\n onClick={this.handleClick}\r\n rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\r\n onFocus={(event) => this.handleFocus(event)}\r\n aria-disabled={this.disabled ? 'true' : null}\r\n aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}\r\n aria-label={this.ariaLabel || undefined}\r\n >\r\n <slot></slot>\r\n </a>\r\n </Host>\r\n );\r\n }\r\n\r\n\r\n getVariantClass() {\r\n return `${this.variant}` === \"secondary\"\r\n ? `secondary-${this.theme}`\r\n : `${this.variant}` === 'tertiary'\r\n ? `tertiary-${this.theme}`\r\n : `${this.theme}`;\r\n }\r\n\r\n getSizeClass() {\r\n if (`${this.size}` === \"xs\") {\r\n return \"xs\"\r\n }\r\n else if (`${this.size}` === \"s\") {\r\n return \"s\"\r\n }\r\n else if (`${this.size}` === \"l\") {\r\n return \"l\"\r\n }\r\n else return \"\";\r\n }\r\n\r\n getClassNames() {\r\n return classNames(\r\n 'btn',\r\n this.size && `btn-${this.getSizeClass()}`,\r\n `btn-${this.getVariantClass()}`,\r\n this.disabled ? 'disabled' : ''\r\n );\r\n }\r\n}"],"version":3}

package/dist/components/{p-DFInpODO.js → p-DzvIkH4S.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
 import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';
-import { d as defineCustomElement$1 } from './p-DhNY6ZGA.js';
+import { d as defineCustomElement$1 } from './p-BnjY2AJX.js';
 const textFieldCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:flex}.textInput__container{display:flex;flex-direction:column;align-items:flex-start;padding:0px;width:100%;flex:none;order:0;align-self:stretch;flex-grow:0;font-family:var(--ifx-font-family)}.textInput__container .delete-icon{position:absolute;right:16px}.textInput__container:not(.readonly,.disabled) .delete-icon:hover{cursor:pointer}.textInput__container.disabled:not(.readonly) #text-field{color:#FFFFFF}.textInput__container.disabled:not(.readonly) .delete-icon{color:#FFFFFF}.textInput__container.disabled:not(.readonly) .textInput__top-wrapper label{color:#BFBBBB}.textInput__container.disabled:not(.readonly) .textInput__top-wrapper .required{color:#BFBBBB}.textInput__container.disabled:not(.readonly) .textInput__bottom-wrapper input{border:1px solid #BFBBBB;background-color:#BFBBBB}.textInput__container.disabled:not(.readonly) .textInput__bottom-wrapper input::placeholder{font-size:1rem;color:#FFFFFF}.textInput__container .textInput__top-wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:0px;gap:4px;flex:none;order:0;align-self:stretch;flex-grow:0}.textInput__container .textInput__top-wrapper label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;display:flex;align-items:center;color:#1D1D1D;flex:none;order:0;flex-grow:0}.textInput__container .textInput__top-wrapper label .optional-required{margin-left:4px}.textInput__container .textInput__top-wrapper label .optional{margin-left:4px}.textInput__container .textInput__top-wrapper label .required{color:#575352;margin-left:4px}.textInput__container .textInput__top-wrapper label .required.error{color:#CD002F}.textInput__container .input-container{position:relative;display:flex;align-items:center;width:100%}.textInput__container .textInput__bottom-wrapper{flex-grow:1;position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:0px;gap:4px;flex:none;order:1;align-self:stretch;flex-grow:0}.textInput__container .textInput__bottom-wrapper input{width:100%;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;padding:8px 16px;gap:8px;height:40px;background-color:#FFFFFF;color:#1D1D1D;font-family:var(--ifx-font-family);font-size:1rem;line-height:1.5rem;border:1px solid #8D8786;border-radius:1px;flex:none;order:0;align-self:stretch;flex-grow:0;text-overflow:ellipsis}.textInput__container .textInput__bottom-wrapper input.input-s{height:36px;font-size:0.875rem;line-height:1.25rem}.textInput__container .textInput__bottom-wrapper input.input-s::placeholder{font-size:1rem;line-height:1.25rem}.textInput__container .textInput__bottom-wrapper input.icon{padding-left:40px}.textInput__container .textInput__bottom-wrapper input.error{border:1px solid #CD002F}.textInput__container .textInput__bottom-wrapper input.error:focus{outline:none}.textInput__container .textInput__bottom-wrapper input.readonly{border:none;border-radius:var(--borderRadius-12, 1px);border-bottom:1px solid var(--color-engineering-300, #bfbbbb);background:var(--color-base-white, #fff);padding-left:0}.textInput__container .textInput__bottom-wrapper input.readonly::placeholder{color:#1D1D1D}.textInput__container .textInput__bottom-wrapper input.success{border:1px solid #4CA460}.textInput__container .textInput__bottom-wrapper input.success:focus{outline:none}.textInput__container .textInput__bottom-wrapper input:focus:not(.error,.success):not(.readonly){outline:none;border:1px solid #0A8276}.textInput__container .textInput__bottom-wrapper input.readonly:focus,.textInput__container .textInput__bottom-wrapper input[readonly]:focus{outline:none;box-shadow:none;border:none;border-bottom:1px solid var(--color-engineering-300, #bfbbbb)}.textInput__container .textInput__bottom-wrapper input:hover:not(:disabled,:focus,.error,.success):not(.readonly){border:1px solid #575352}.textInput__container .textInput__bottom-wrapper .input-icon{position:absolute;top:50%;transform:translateY(-50%);left:16px;transition:0.3s;color:#8D8786}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;color:#1D1D1D;flex:none;order:1;align-self:stretch;flex-grow:0}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.error{color:#CD002F}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.disabled{color:#BFBBBB}";
@@ -65,11 +65,11 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class TextField extends H {
         }
     }
     render() {
-        return (h("div", { key: 'fde8ba65931e70265b84ddd75143a78627cbbba7', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.readOnly ? 'readonly' : ''} ${this.disabled && !this.error ? 'disabled' : ''}` }, h("div", { key: '662198ca46ff5a6d568589b5d0ebb4b6117a6205', class: "textInput__top-wrapper" }, this.label && (h("label", { key: 'be2ec4dec1d869c891f8defac11181ca18f06053', htmlFor: this.internalId }, h("span", { key: '46d77c5682c4ed8ac8cfb41a4ef676bc061236a8' }, this.label), this.required && h("span", { key: '28ddfeee2b30168c4c755bdc822fec0ef98c529a', class: `required ${this.error && !this.readOnly ? 'error' : ''}` }, "*")))), h("div", { key: '20457f5caf1857c5e7259763a885ed7c7a9df636', class: "textInput__bottom-wrapper" }, h("div", { key: '7e9a0bfc6a2f590d741ece4639d5f38e4c712085', class: "input-container" }, this.icon && h("ifx-icon", { key: 'ebdc52fb4dcca7912fd6ac428f1f42442fbb2313', class: "input-icon", icon: this.icon }), h("input", { key: '4760819b300477cbac4da643c41b3dfb97d62285', ref: el => (this.inputElement = el), disabled: this.disabled && !this.error, autocomplete: this.autocomplete, type: this.internalType, id: this.internalId, value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, readonly: this.readOnly, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ''}
-                ${this.error ? 'error' : ''}
-                ${this.readOnly ? 'readonly' : ''}
-              ${this.size === 's' ? 'input-s' : ''}
-              ${this.success ? 'success' : ''}` }), this.showDeleteIcon && this.value && h("ifx-icon", { key: '34d4b05f44f3b5a0f4afddf40b2d3a0384482a57', class: "delete-icon", icon: "cRemove16", onClick: () => this.handleDeleteContent() })), this.caption && (h("div", { key: 'da655fe4c12336e535e9f1be649136ce9344c115', class: `textInput__bottom-wrapper-caption ${this.error && !this.readOnly ? 'error' : ''} ${this.disabled && !this.readOnly && !this.error ? 'disabled' : ''}` }, this.caption)))));
+        return (h("div", { key: 'd67359eb3f5b01ca82f3d7e100c932b394f5dd72', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.readOnly ? 'readonly' : ''} ${this.disabled && !this.error ? 'disabled' : ''}` }, h("div", { key: '984feba03b24e932834781c8f816e79817fbec7f', class: "textInput__top-wrapper" }, this.label && (h("label", { key: '02c23276205f851ee2c8807d2b67bccc11fb4350', htmlFor: this.internalId }, h("span", { key: '8473ccc62f76dad8aa84b5f98b36caacaa5c3fb2' }, this.label), this.required && h("span", { key: '60b25e7269a034b0d4fa7fd63e25151c1e0b8de0', class: `required ${this.error && !this.readOnly ? 'error' : ''}` }, "*")))), h("div", { key: 'f9e0d1caa7c5f8774132fbed4857e84af4dbb5a2', class: "textInput__bottom-wrapper" }, h("div", { key: '10ae27bf8edb9a9fc1a35b9e79db46dc07272a76', class: "input-container" }, this.icon && h("ifx-icon", { key: 'e78ef7ef5c27a8366fcc87148112c3f2fd5c6432', class: "input-icon", icon: this.icon }), h("input", { key: 'f384201d840524143d8e9e75dd25e7d09b64ab52', ref: el => (this.inputElement = el), disabled: this.disabled && !this.error, autocomplete: this.autocomplete, type: this.internalType, id: this.internalId, value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, readonly: this.readOnly, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ''}
+                ${this.error ? 'error' : ''}
+                ${this.readOnly ? 'readonly' : ''}
+              ${this.size === 's' ? 'input-s' : ''}
+              ${this.success ? 'success' : ''}` }), this.showDeleteIcon && this.value && h("ifx-icon", { key: 'b2e4e802c696d38c22975c09c1e2737187bf51f6', class: "delete-icon", icon: "cRemove16", onClick: () => this.handleDeleteContent() })), this.caption && (h("div", { key: '870558a1ab7766ffc694ae7e0fcb1b6ba95e5f6b', class: `textInput__bottom-wrapper-caption ${this.error && !this.readOnly ? 'error' : ''} ${this.disabled && !this.readOnly && !this.error ? 'disabled' : ''}` }, this.caption)))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -118,6 +118,6 @@ function defineCustomElement() {
 }
 export { TextField as T, defineCustomElement as d };
-//# sourceMappingURL=p-DFInpODO.js.map
+//# sourceMappingURL=p-DzvIkH4S.js.map
-//# sourceMappingURL=p-DFInpODO.js.map
+//# sourceMappingURL=p-DzvIkH4S.js.map

package/dist/components/p-DzvIkH4S.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-DzvIkH4S.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/text-field/text-field.scss?tag=ifx-text-field&encapsulation=shadow","src/components/text-field/text-field.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.textInput__container {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n padding: 0px;\r\n width: 100%;\r\n flex: none;\r\n order: 0;\r\n align-self: stretch;\r\n flex-grow: 0;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n & .delete-icon {\r\n position: absolute;\r\n right: tokens.$ifxSpace200;\r\n }\r\n\r\n &:not(.readonly, .disabled) .delete-icon {\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n }\r\n\r\n &.disabled:not(.readonly) {\r\n\r\n & #text-field { \r\n color: tokens.$ifxColorBaseWhite;\r\n }\r\n\r\n & .delete-icon { \r\n color: tokens.$ifxColorBaseWhite;\r\n }\r\n \r\n & .textInput__top-wrapper {\r\n & label {\r\n color: tokens.$ifxColorEngineering300;\r\n }\r\n\r\n & .required {\r\n color: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n\r\n & .textInput__bottom-wrapper {\r\n input {\r\n border: 1px solid tokens.$ifxColorEngineering300;\r\n background-color: tokens.$ifxColorEngineering300;\r\n\r\n &::placeholder {\r\n font-size: tokens.$ifxFontSizeM;\r\n color: tokens.$ifxColorBaseWhite;\r\n }\r\n }\r\n }\r\n }\r\n\r\n & .textInput__top-wrapper {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: flex-start;\r\n padding: 0px;\r\n gap: tokens.$ifxSpace50;\r\n flex: none;\r\n order: 0;\r\n align-self: stretch;\r\n flex-grow: 0;\r\n\r\n & label {\r\n font-style: normal;\r\n font-weight: tokens.$ifxFontWeightRegular;\r\n font-size: tokens.$ifxFontSizeM;\r\n line-height: tokens.$ifxLineHeightM;\r\n display: flex;\r\n align-items: center;\r\n color: tokens.$ifxColorBaseBlack;\r\n flex: none;\r\n order: 0;\r\n flex-grow: 0;\r\n\r\n & .optional-required {\r\n margin-left: tokens.$ifxSpace50;\r\n }\r\n\r\n & .optional {\r\n margin-left: tokens.$ifxSpace50;\r\n }\r\n\r\n & .required {\r\n color: tokens.$ifxColorEngineering500;\r\n margin-left: tokens.$ifxSpace50;\r\n\r\n &.error {\r\n color: tokens.$ifxColorRed500;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .input-container {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n }\r\n\r\n & .textInput__bottom-wrapper {\r\n flex-grow: 1;\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n padding: 0px;\r\n gap: tokens.$ifxSpace50;\r\n flex: none;\r\n order: 1;\r\n align-self: stretch;\r\n flex-grow: 0;\r\n\r\n & input {\r\n width: 100%;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\r\n gap: tokens.$ifxSpace100;\r\n height: tokens.$ifxSize500;\r\n background-color: tokens.$ifxColorBaseWhite;\r\n color: tokens.$ifxColorBaseBlack;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n font-size: tokens.$ifxFontSizeM;\r\n line-height: tokens.$ifxLineHeightM;\r\n border: 1px solid tokens.$ifxColorEngineering400;\r\n border-radius: tokens.$ifxBorderRadius12;\r\n flex: none;\r\n order: 0;\r\n align-self: stretch;\r\n flex-grow: 0;\r\n text-overflow: ellipsis;\r\n\r\n &.input-s {\r\n height: tokens.$ifxSize450;\r\n font-size: tokens.$ifxFontSizeS;\r\n line-height: tokens.$ifxLineHeightS;\r\n\r\n &::placeholder {\r\n font-size: tokens.$ifxFontSizeM;\r\n line-height: tokens.$ifxLineHeightS;\r\n }\r\n }\r\n\r\n &.icon {\r\n padding-left: tokens.$ifxSpace500;\r\n }\r\n\r\n &.error {\r\n border: 1px solid tokens.$ifxColorRed500;\r\n\r\n &:focus {\r\n outline: none;\r\n }\r\n }\r\n\r\n &.readonly {\r\n border: none;\r\n border-radius: var(--borderRadius-12, 1px);\r\n border-bottom: 1px solid var(--color-engineering-300, #bfbbbb);\r\n background: var(--color-base-white, #fff);\r\n padding-left: 0;\r\n\r\n &::placeholder {\r\n color: tokens.$ifxColorBaseBlack;\r\n }\r\n }\r\n\r\n &.success {\r\n border: 1px solid tokens.$ifxColorGreen500;\r\n\r\n &:focus {\r\n outline: none;\r\n }\r\n }\r\n\r\n &:focus:not(.error, .success):not(.readonly) {\r\n outline: none;\r\n border: 1px solid tokens.$ifxColorOcean500;\r\n }\r\n\r\n &.readonly:focus,\r\n &[readonly]:focus {\r\n outline: none;\r\n box-shadow: none;\r\n border: none;\r\n border-bottom: 1px solid var(--color-engineering-300, #bfbbbb);\r\n }\r\n\r\n &:hover:not(:disabled, :focus, .error, .success):not(.readonly) {\r\n border: 1px solid tokens.$ifxColorEngineering500;\r\n }\r\n }\r\n\r\n & .input-icon {\r\n // Position the icon within the icon container\r\n // Adjust the positioning as needed\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n left: tokens.$ifxSpace200;\r\n /* Adjust this value to control the icon's left offset */\r\n transition: 0.3s;\r\n color: tokens.$ifxColorEngineering400;\r\n }\r\n\r\n & .textInput__bottom-wrapper-caption {\r\n font-style: normal;\r\n font-weight: tokens.$ifxFontWeightRegular;\r\n font-size: tokens.$ifxFontSizeXs;\r\n line-height: tokens.$ifxLineHeightXs;\r\n color: tokens.$ifxColorBaseBlack;\r\n flex: none;\r\n order: 1;\r\n align-self: stretch;\r\n flex-grow: 0;\r\n\r\n &.error {\r\n color: tokens.$ifxColorRed500;\r\n }\r\n\r\n &.disabled {\r\n color: tokens.$ifxColorEngineering300;\r\n }\r\n }\r\n }\r\n}","import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals, 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\n\r\n@Component({\r\n tag: 'ifx-text-field',\r\n styleUrl: 'text-field.scss',\r\n shadow: true,\r\n // formAssociated: true\r\n})\r\nexport class TextField {\r\n private inputElement: HTMLInputElement;\r\n @Element() el;\r\n @Prop() placeholder: string = 'Placeholder';\r\n @Prop({ mutable: true }) value: string = '';\r\n @Prop() error: boolean = false;\r\n @Prop() label: string = '';\r\n @Prop() icon: string = '';\r\n @Prop() caption: string = '';\r\n @Prop() size: string = 'm';\r\n @Prop() required: boolean = false;\r\n @Prop() success: boolean = false;\r\n @Prop() disabled: boolean = false;\r\n @Prop() readOnly: boolean = false;\r\n @Prop() maxlength?: number;\r\n @Prop() showDeleteIcon: boolean = false;\r\n @Prop() autocomplete: string = 'on';\r\n @Prop() type: 'text' | 'password' = 'text';\r\n @Prop() internalId: string = 'text-field';\r\n @State() internalType: string;\r\n @Event() ifxInput: EventEmitter<String>;\r\n // @Prop({ reflect: true })\r\n // resetOnSubmit: boolean = false;\r\n\r\n @AttachInternals() internals: ElementInternals;\r\n\r\n @Watch('value')\r\n valueWatcher(newValue: string) {\r\n if (newValue !== this.inputElement.value) {\r\n this.inputElement.value = newValue;\r\n }\r\n }\r\n\r\n @Method()\r\n async reset() {\r\n this.value = '';\r\n this.inputElement.value = '';\r\n }\r\n\r\n handleDeleteContent() {\r\n if (!this.disabled && !this.readOnly) {\r\n this.reset();\r\n this.ifxInput.emit(this.value);\r\n }\r\n }\r\n\r\n handleInput() {\r\n const query = this.inputElement.value;\r\n this.value = query;\r\n //this.internals.setFormValue(query) // update form value\r\n this.ifxInput.emit(this.value);\r\n }\r\n\r\n handleTypeProp() {\r\n this.internalType = this.type === 'text' || this.type === 'password' ? this.type : 'text';\r\n }\r\n\r\n // formResetCallback() {\r\n // this.internals.setValidity({});\r\n // this.internals.setFormValue(\"\");\r\n // }\r\n\r\n componentWillLoad() {\r\n this.handleTypeProp();\r\n }\r\n\r\n async componentDidLoad() {\r\n if (!isNestedInIfxComponent(this.el)) {\r\n const framework = detectFramework();\r\n trackComponent('ifx-text-field', await framework);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div\r\n aria-label=\"a text field for user input\"\r\n aria-value={this.value}\r\n aria-disabled={this.disabled}\r\n class={`textInput__container ${this.readOnly ? 'readonly' : ''} ${this.disabled && !this.error ? 'disabled' : ''}`}\r\n >\r\n <div class=\"textInput__top-wrapper\">\r\n {this.label && (\r\n <label htmlFor={this.internalId}>\r\n <span>{this.label}</span>\r\n {this.required && <span class={`required ${this.error && !this.readOnly ? 'error' : ''}`}>*</span>}\r\n </label>\r\n )}\r\n </div>\r\n\r\n <div class=\"textInput__bottom-wrapper\">\r\n <div class=\"input-container\">\r\n {this.icon && <ifx-icon class=\"input-icon\" icon={this.icon} />}\r\n <input\r\n ref={el => (this.inputElement = el)}\r\n disabled={this.disabled && !this.error}\r\n autocomplete={this.autocomplete}\r\n type={this.internalType}\r\n id={this.internalId}\r\n value={this.value}\r\n onInput={() => this.handleInput()}\r\n placeholder={this.placeholder}\r\n readonly={this.readOnly}\r\n maxlength={this.maxlength}\r\n class={`${this.icon ? 'icon' : ''}\r\n ${this.error ? 'error' : ''} \r\n ${this.readOnly ? 'readonly' : ''} \r\n ${this.size === 's' ? 'input-s' : ''}\r\n ${this.success ? 'success' : ''}`}\r\n />\r\n\r\n {this.showDeleteIcon && this.value && <ifx-icon class=\"delete-icon\" icon=\"cRemove16\" onClick={() => this.handleDeleteContent()}></ifx-icon>}\r\n </div>\r\n {this.caption && (\r\n <div class={`textInput__bottom-wrapper-caption ${this.error && !this.readOnly ? 'error' : ''} ${this.disabled && !this.readOnly && !this.error ? 'disabled' : ''}`}>\r\n {this.caption}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/{p-v3vmQuAS.js → p-T-OkJYup.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';
-import { d as defineCustomElement$2 } from './p-DhNY6ZGA.js';
-import { d as defineCustomElement$1 } from './p-C12r4j5b.js';
+import { d as defineCustomElement$2 } from './p-BnjY2AJX.js';
+import { d as defineCustomElement$1 } from './p-BODyHBnq.js';
 const notificationCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.ifx-notification__wrapper{display:flex;flex-direction:row;align-items:center;padding:8px 16px;background-color:#FFFFFF;font-family:var(--ifx-font-family);color:#1D1D1D;border:1px solid #EEEDED}.ifx-notification__wrapper.ifx-notification__wrapper--success{border-left:4px solid #4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--success .ifx-notification__icon{color:#4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--locked{border-left:4px solid #E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--locked .ifx-notification__icon{color:#E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--error{border-left:4px solid #CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--error .ifx-notification__icon{color:#CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--neutral{border-left:4px solid #0A8276}.ifx-notification__wrapper.ifx-notification__wrapper--neutral .ifx-notification__icon{color:#0A8276}.ifx-notification__wrapper .ifx-notification__icon{margin-right:8px;display:flex;align-self:center}.ifx-notification__wrapper .ifx-notification__body{display:flex;flex-direction:row;flex-grow:1;font-size:0.875rem}.ifx-notification__wrapper .ifx-notification__body .ifx-notification__slot{flex-grow:1;display:inline-flex;align-items:center}.ifx-notification__wrapper .ifx-notification__link{font-size:0.875rem}@media (max-width: 576px){.ifx-notification__wrapper .ifx-notification__icon{align-self:flex-start}.ifx-notification__wrapper .ifx-notification__body{flex-direction:column}.ifx-notification__wrapper .ifx-notification__link{margin-top:8px}}";
@@ -34,8 +34,8 @@ const Notification = /*@__PURE__*/ proxyCustomElement(class Notification extends
         }
     }
     render() {
-        return (h(Host, { key: '7bbeaae1a7a9d3717f5aca378041e232d8a60fa3' }, h("div", { key: '06cb1830b2d084e3f3908a1a3e507c429bcec8ec', class: "ifx-notification__wrapper " + this.getClassName() }, h("div", { key: '93dfa7a2463fd2e689b549d05455d771725eaecf', class: "ifx-notification__icon" }, h("ifx-icon", { key: '07d73ca0368cf493cb01d6df1f30374df9663abb', icon: this.icon })), h("div", { key: '9da8c205def2615bb2e3da50c03acce2c3c49712', class: "ifx-notification__body" }, h("div", { key: '22cd9dfabc23b685d983f403e3649d247e97b7fc', class: "ifx-notification__slot" }, h("slot", { key: '1feecd971094e46f36572c1005dacfa943b005f4' })), this.linkText && this.linkHref &&
-            h("div", { key: '2779a104d2b7a0d13114a90b7346c4ef5554704c', class: "ifx-notification__link" }, h("ifx-link", { key: '293725867cdeb88f4fa16efbcf812e58ddc9ab4b', href: this.linkHref, target: this.linkTarget }, this.linkText, h("ifx-icon", { key: 'aca1eae60ca7b17536ad673d9dc236f5bdd456a8', icon: "arrow-right-16" })))))));
+        return (h(Host, { key: '3b2df02932202f33a0987d9b1e4d178e8225b5ea' }, h("div", { key: 'f9356375b41149e9898d54130f6a2c2076100cf8', class: "ifx-notification__wrapper " + this.getClassName() }, h("div", { key: '795ac9462160f623817c3ae3ba7db35ebaea6040', class: "ifx-notification__icon" }, h("ifx-icon", { key: '7b5dd8db9885fa130a544e7b6ae2c256ac36f691', icon: this.icon })), h("div", { key: 'e7be73d9d0505dee08dee83422254efd341292c2', class: "ifx-notification__body" }, h("div", { key: '61d0aa32e02e05a6106d7eeee71eeaee7048da3d', class: "ifx-notification__slot" }, h("slot", { key: '26455970513e9ef8623bc4442be0c7d603bec35d' })), this.linkText && this.linkHref &&
+            h("div", { key: '0977c45c6f1646a7e49305a6e312679b8bcbb478', class: "ifx-notification__link" }, h("ifx-link", { key: '3b7046973abb361a230024a414352b896e8a4f13', href: this.linkHref, target: this.linkTarget }, this.linkText, h("ifx-icon", { key: '8063f2dc7cda7b262b5c6273f9a66732a7c5a000', icon: "arrow-right-16" })))))));
     }
     get el() { return this; }
     static get style() { return notificationCss; }
@@ -71,6 +71,6 @@ function defineCustomElement() {
 }
 export { Notification as N, defineCustomElement as d };
-//# sourceMappingURL=p-v3vmQuAS.js.map
+//# sourceMappingURL=p-T-OkJYup.js.map
-//# sourceMappingURL=p-v3vmQuAS.js.map
+//# sourceMappingURL=p-T-OkJYup.js.map

package/dist/components/p-T-OkJYup.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-T-OkJYup.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,uoDAAuoD;;MCWlpD,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;AAQU,QAAA,IAAO,CAAA,OAAA,GAAwB,SAAS;AAGxC,QAAA,IAAU,CAAA,UAAA,GAAW,QAAQ;AAgDtC;AA9CC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,kBAAkB,EAAE,MAAM,SAAS,CAAC;;;IAI/C,YAAY,GAAA;AAClB,QAAA,QAAQ,IAAI,CAAC,OAAO;AAClB,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,oCAAoC;AAC7C,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,mCAAmC;AAC5C,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,kCAAkC;AAC3C,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,oCAAoC;AAC7C,YAAA;AACE,gBAAA,OAAO,oCAAoC;;;IAIjD,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,4BAA4B,GAAG,IAAI,CAAC,YAAY,EAAE,EAAA,EAC5D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAClC,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAO,CACH,EACJ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAChC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAA,EACnD,IAAI,CAAC,QAAQ,EAAC,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,gBAAgB,EACrC,CAAA,CACA,CACP,CAEF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/notification/notification.scss?tag=ifx-notification&encapsulation=shadow","src/components/notification/notification.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.ifx-notification__wrapper {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\r\n\r\n background-color: tokens.$ifxColorBaseWhite;\r\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n color: tokens.$ifxColorBaseBlack;\r\n\r\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\r\n\r\n &.ifx-notification__wrapper--success {\r\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorGreen500;\r\n\r\n & .ifx-notification__icon {\r\n color: tokens.$ifxColorGreen500;\r\n }\r\n }\r\n\r\n &.ifx-notification__wrapper--locked {\r\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOrange500;\r\n\r\n & .ifx-notification__icon {\r\n color: tokens.$ifxColorOrange500;\r\n }\r\n }\r\n\r\n &.ifx-notification__wrapper--error {\r\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorRed500;\r\n\r\n & .ifx-notification__icon {\r\n color: tokens.$ifxColorRed500;\r\n }\r\n }\r\n\r\n &.ifx-notification__wrapper--neutral{\r\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOcean500;\r\n\r\n & .ifx-notification__icon {\r\n color: tokens.$ifxColorOcean500;\r\n }\r\n }\r\n\r\n & .ifx-notification__icon {\r\n margin-right: tokens.$ifxSpace100;\r\n display: flex;\r\n align-self: center;\r\n }\r\n\r\n & .ifx-notification__body {\r\n display: flex;\r\n flex-direction: row;\r\n flex-grow: 1;\r\n font-size: tokens.$ifxFontSizeS;\r\n\r\n & .ifx-notification__slot {\r\n flex-grow: 1;\r\n display: inline-flex;\r\n align-items: center;\r\n }\r\n }\r\n\r\n & .ifx-notification__link {\r\n font-size: tokens.$ifxFontSizeS;\r\n }\r\n\r\n @media (max-width: tokens.$ifxBreakpointXs) {\r\n & .ifx-notification__icon {\r\n align-self: flex-start;\r\n }\r\n\r\n & .ifx-notification__body {\r\n flex-direction: column;\r\n }\r\n\r\n & .ifx-notification__link {\r\n margin-top: tokens.$ifxSpace100;\r\n }\r\n }\r\n}","import { Component, h, Host, 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\nexport type NotificationVariant = 'success' | 'locked' | 'error' | 'neutral';\r\n\r\n@Component({\r\n tag: 'ifx-notification',\r\n styleUrl: 'notification.scss',\r\n shadow: true\r\n})\r\nexport class Notification {\r\n @Element() el;\r\n @Prop() icon: string;\r\n @Prop() variant: NotificationVariant = 'success';\r\n @Prop() linkText: string; \r\n @Prop() linkHref: string;\r\n @Prop() linkTarget: string = '_blank';\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-notification', await framework)\r\n }\r\n }\r\n\r\n private getClassName(): string {\r\n switch (this.variant) {\r\n case 'success':\r\n return 'ifx-notification__wrapper--success';\r\n case 'locked':\r\n return 'ifx-notification__wrapper--locked';\r\n case 'error':\r\n return 'ifx-notification__wrapper--error';\r\n case 'neutral':\r\n return 'ifx-notification__wrapper--neutral';\r\n default:\r\n return 'ifx-notification__wrapper--success';\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class={\"ifx-notification__wrapper \" + this.getClassName()}>\r\n <div class=\"ifx-notification__icon\">\r\n <ifx-icon icon={this.icon}></ifx-icon>\r\n </div>\r\n <div class=\"ifx-notification__body\">\r\n <div class=\"ifx-notification__slot\">\r\n <slot/>\r\n </div>\r\n { this.linkText && this.linkHref && \r\n <div class=\"ifx-notification__link\">\r\n <ifx-link href={this.linkHref} target={this.linkTarget}>\r\n {this.linkText}<ifx-icon icon=\"arrow-right-16\">\r\n </ifx-icon>\r\n </ifx-link>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}"],"version":3}