@infineon/infineon-design-system-stencil 39.4.4--canary.2134.cd83647d2771e1e22b8c6c80a0df75f24ca168b6.0 → 39.4.4--canary.2134.bb609f61311d4fde41e8336aa402a4fd507e0769.0

package/dist/infineon-design-system-stencil/p-7b705420.entry.js

@@ -1,2 +0,0 @@
-import{r as s,c as i,h as e,a as t}from"./p-PqnYwNKt.js";import{d as n,t as o}from"./p-DcmcuUOA.js";import{i as r}from"./p-Bw2fh5LT.js";import{c as h}from"./p-Beav1bNT.js";const a=':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}';const l=class{constructor(e){s(this,e);this.ifxInput=i(this,"ifxInput",7);this.ifxSuggestionRequested=i(this,"ifxSuggestionRequested",7);this.ifxSuggestionSelected=i(this,"ifxSuggestionSelected",7);this.ifxFocus=i(this,"ifxFocus",7);this.ifxBlur=i(this,"ifxBlur",7);this.value="";this.suggestions=[];this.showSuggestions=false;this.maxSuggestions=10;this.maxHistoryItems=5;this.enableHistory=true;this.historyKey="ifx-search-history";this.historyHeaderText="Recent Searches";this.ariaLabel="Search Field";this.deleteIconAriaLabel="Clear search";this.historyDeleteAriaLabel="Remove from history";this.dropdownAriaLabel="Search suggestions and history";this.suggestionAriaLabel="Search suggestion";this.historyItemAriaLabel="Search history item";this.showDropdown=false;this.filteredSuggestions=[];this.selectedSuggestionIndex=-1;this.searchHistory=[];this.showDeleteIcon=false;this.showDeleteIconInternalState=false;this.disabled=false;this.size="l";this.isFocused=false;this.placeholder="Search...";this.autocomplete="off";this.maxlength=null;this.focusEmitted=false;this.handleInput=()=>{const s=this.inputElement.value;this.value=s;this.ifxInput.emit(this.value);if(this.showSuggestions){this.showDropdown=true;this.selectedSuggestionIndex=-1;this.requestSuggestions(s)}};this.handleDelete=()=>{if(!this.disabled){this.inputElement.value="";this.value="";this.ifxInput.emit(this.value);this.hideDropdown()}};this.handleSearch=()=>{if(this.value.trim()&&this.enableHistory){if(this.filteredSuggestions.length>0){this.addToHistory(this.value)}}this.hideDropdown()};this.handleHistoryDelete=(s,i)=>{s.stopPropagation();this.removeFromHistory(i)}}handleOutsideClick(s){const i=s.composedPath();if(!i.includes(this.inputElement)&&!i.includes(this.dropdownElement)){this.hideDropdown()}}handleKeyDown(s){if(!this.showDropdown)return;switch(s.key){case"ArrowDown":s.preventDefault();this.navigateSuggestions(1);break;case"ArrowUp":s.preventDefault();this.navigateSuggestions(-1);break;case"Enter":s.preventDefault();if(this.selectedSuggestionIndex>=0){this.selectSuggestion(this.filteredSuggestions[this.selectedSuggestionIndex])}else{this.handleSearch()}break;case"Escape":this.hideDropdown();break}}valueWatcher(s){if(this.inputElement&&s!==this.inputElement.value){this.inputElement.value=s}this.updateSuggestions()}suggestionsWatcher(){this.updateSuggestions()}focusInput(){if(!this.focusEmitted){this.focusEmitted=true;this.isFocused=true;this.ifxFocus.emit()}if(this.showSuggestions){if(this.value.length===0){this.showHistoryDropdown();this.showDropdown=this.enableHistory&&this.searchHistory.length>0}else{this.updateSuggestions();this.showDropdown=this.filteredSuggestions.length>0}}}blurInput(){setTimeout((()=>{this.isFocused=false;this.focusEmitted=false;this.ifxBlur.emit()}),150)}loadSearchHistory(){if(this.enableHistory&&typeof localStorage!=="undefined"){const s=localStorage.getItem(this.historyKey);this.searchHistory=s?JSON.parse(s):[];this.updateSuggestions();if(this.value.length===0&&this.searchHistory.length===0){this.showDropdown=false}}}clearSearchHistory(){if(this.enableHistory&&typeof localStorage!=="undefined"){localStorage.removeItem(this.historyKey);this.searchHistory=[];this.filteredSuggestions=[];this.selectedSuggestionIndex=-1;this.showDropdown=false;this.updateSuggestions()}}addToHistory(s){if(!this.enableHistory||!s.trim())return;const i=[...this.searchHistory];const e=i.indexOf(s);if(e>-1){i.splice(e,1)}i.unshift(s);this.searchHistory=i.slice(0,this.maxHistoryItems);if(typeof localStorage!=="undefined"){localStorage.setItem(this.historyKey,JSON.stringify(this.searchHistory))}}removeFromHistory(s){if(!this.enableHistory)return;const i=[...this.searchHistory];const e=i.indexOf(s);if(e>-1){i.splice(e,1);this.searchHistory=i;if(typeof localStorage!=="undefined"){localStorage.setItem(this.historyKey,JSON.stringify(this.searchHistory))}this.updateSuggestions();if(this.searchHistory.length===0&&this.value.length===0){this.showDropdown=false}}}requestSuggestions(s){this.ifxSuggestionRequested.emit(s);this.updateSuggestions()}updateSuggestions(){const s=this.value.toLowerCase();let i=[];if(s.length>0){if(this.suggestions&&this.suggestions.length>0){const e=this.suggestions.filter((i=>i.text.toLowerCase().includes(s)));i=[...i,...e]}if(this.enableHistory&&this.searchHistory.length>0){const e=this.searchHistory.filter((i=>i.toLowerCase().includes(s))).map(((s,i)=>({id:`history-${i}`,text:s,type:"history"})));i=[...i,...e]}i.sort(((i,e)=>{const t=i.text.toLowerCase();const n=e.text.toLowerCase();if(t===s&&n!==s)return-1;if(n===s&&t!==s)return 1;const o=t.startsWith(s);const r=n.startsWith(s);if(o&&!r)return-1;if(r&&!o)return 1;if(i.type==="suggestion"&&e.type==="history")return-1;if(i.type==="history"&&e.type==="suggestion")return 1;return t.localeCompare(n)}))}else{if(this.enableHistory&&this.searchHistory.length>0){const s=this.searchHistory.map(((s,i)=>({id:`history-${i}`,text:s,type:"history"})));i=s}}const e=i.reduce(((s,i)=>{const e=s.findIndex((s=>s.text.toLowerCase()===i.text.toLowerCase()&&s.scope===i.scope));if(e===-1){s.push(i)}else{if(i.type==="history"&&s[e].type!=="history"){s[e]=i}}return s}),[]);this.filteredSuggestions=e.slice(0,this.maxSuggestions);this.selectedSuggestionIndex=-1}navigateSuggestions(s){const i=this.filteredSuggestions.length-1;if(s>0){this.selectedSuggestionIndex=this.selectedSuggestionIndex<i?this.selectedSuggestionIndex+1:0}else{this.selectedSuggestionIndex=this.selectedSuggestionIndex>0?this.selectedSuggestionIndex-1:i}}selectSuggestion(s){this.value=s.text;this.inputElement.value=s.text;this.ifxSuggestionSelected.emit(s);this.ifxInput.emit(this.value);if(this.enableHistory){this.addToHistory(s.text)}this.hideDropdown()}hideDropdown(){this.showDropdown=false;this.selectedSuggestionIndex=-1;this.isFocused=false}showHistoryDropdown(){if(this.enableHistory&&this.searchHistory.length>0){const s=this.searchHistory.map(((s,i)=>({id:`history-${i}`,text:s,type:"history"})));this.filteredSuggestions=s.slice(0,this.maxSuggestions);this.selectedSuggestionIndex=-1}else{this.filteredSuggestions=[]}}isShowingOnlyHistory(){return this.value.length===0&&this.filteredSuggestions.length>0&&this.filteredSuggestions.every((s=>s.type==="history"))}renderHighlightedText(s,i){if(!i||i.length===0){return s}const t=s.toLowerCase();const n=i.toLowerCase();const o=t.indexOf(n);if(o===-1){return s}const r=s.substring(0,o);const h=s.substring(o,o+i.length);const a=s.substring(o+i.length);return[r,e("strong",null,h),a]}componentWillLoad(){this.loadSearchHistory()}async componentDidLoad(){if(!r(this.el)){const s=n();o("ifx-search-field",await s)}}componentWillUpdate(){if(this.value!==""){this.showDeleteIconInternalState=true}else this.showDeleteIconInternalState=false}render(){return e("div",{key:"d355ec7cdbe980ea99e4238cf02d907ddd76d59b","aria-disabled":this.disabled,"aria-value":this.value,class:"search-field"},e("div",{key:"2aa3d943caab35213ca10f071586c80358515f1c",class:this.getWrapperClassNames(),tabindex:1,onClick:()=>this.focusInput()},e("ifx-icon",{key:"eaa300dd0f8466a2396c55f3f2fffe9dcf5bbf44",icon:"search-16",class:"search-icon"}),e("input",{key:"cce86ee892ec624fe8671d7567434ae5433b8702",ref:s=>this.inputElement=s,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?e("ifx-icon",{icon:"cRemove16",class:"delete-icon",onClick:this.handleDelete,role:"button",tabindex:"0","aria-label":this.deleteIconAriaLabel,onKeyDown:s=>{if(s.key==="Enter"||s.key===" "){s.preventDefault();this.handleDelete()}}}):null),this.showDropdown&&this.filteredSuggestions.length>0&&e("div",{key:"d447e63087ac5b41d2109a16b8db37df4c9db860",ref:s=>this.dropdownElement=s,id:"suggestions-dropdown",class:"suggestions-dropdown",role:"listbox","aria-label":this.dropdownAriaLabel},this.isShowingOnlyHistory()&&e("div",{key:"6a4662d31fd8c755ec1ec9da4bb871750aa63a57",class:"suggestions-header"},this.historyHeaderText),this.filteredSuggestions.map(((s,i)=>e("div",{key:s.id,id:`suggestion-${i}`,class:this.getSuggestionClassNames(i),role:"option","aria-selected":i===this.selectedSuggestionIndex,"aria-label":`${s.type==="history"?this.historyItemAriaLabel:this.suggestionAriaLabel}: ${s.text}${s.scope?`, ${s.scope}`:""}${s.resultCount?`, ${s.resultCount} results`:""}`,onClick:()=>this.selectSuggestion(s),onMouseEnter:()=>this.selectedSuggestionIndex=i},e("div",{class:"suggestion-content"},s.type==="history"&&e("ifx-icon",{icon:"history-16",class:"suggestion-icon suggestion-icon--history"}),s.type==="suggestion"&&e("ifx-icon",{icon:"search-16",class:"suggestion-icon suggestion-icon--suggestion"}),e("span",{class:"suggestion-text"},e("span",{class:"suggestion-main-text"},this.renderHighlightedText(s.text,this.value)),s.scope&&e("span",{class:"suggestion-scope"},"– ",s.scope)),s.resultCount!==undefined&&s.scope&&e("span",{class:"suggestion-count"},s.resultCount),s.type==="history"&&e("ifx-icon",{icon:"cross16",class:"suggestion-delete-icon",role:"button",tabindex:"0","aria-label":`${this.historyDeleteAriaLabel}: ${s.text}`,onClick:i=>this.handleHistoryDelete(i,s.text),onKeyDown:i=>{if(i.key==="Enter"||i.key===" "){i.preventDefault();this.handleHistoryDelete(i,s.text)}}})))))))}getSizeClass(){return`${this.size}`==="s"?"search-field__wrapper-s":""}getWrapperClassNames(){return h(`search-field__wrapper`,`search-field__wrapper ${this.getSizeClass()}`,`${this.isFocused?"focused":""}`,`${this.showDropdown?"dropdown-open":""}`,`${this.disabled?"disabled":""}`)}getSuggestionClassNames(s){var i;return h("suggestion-item",{"suggestion-item--selected":s===this.selectedSuggestionIndex,"suggestion-item--history":((i=this.filteredSuggestions[s])===null||i===void 0?void 0:i.type)==="history"})}get el(){return t(this)}static get watchers(){return{value:["valueWatcher"],suggestions:["suggestionsWatcher"]}}};l.style=a;export{l as ifx_search_field};
-//# sourceMappingURL=p-7b705420.entry.js.map

package/dist/infineon-design-system-stencil/p-81f0d6ad.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as i,a as t}from"./p-PqnYwNKt.js";import{d as n,t as l}from"./p-DcmcuUOA.js";import{i as o}from"./p-Bw2fh5LT.js";import{c as r}from"./p-Beav1bNT.js";const s=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex}.link{display:inline-flex;align-items:center;font-weight:400;font-size:1rem;text-decoration:none;color:#0A8276;gap:8px;line-height:1.6;font-family:var(--ifx-font-family)}.link:hover{cursor:pointer}.link:focus{outline-width:2px;outline-style:solid;outline-color:#0A8276;outline-offset:4px;border-radius:3px}.link.bold{font-weight:600}.link.bold:hover{text-decoration:underline}.link.bold:active{color:#08665C;font-style:normal;font-weight:600;text-decoration:underline}.link.underlined{text-decoration:underline;text-decoration-color:#0A8276;color:#1D1D1D;text-underline-offset:8px}.link.underlined:hover{color:#0A8276}.link.underlined:active{color:#0A8276}.link.underlined:disabled,.link.underlined.disabled{text-decoration-color:#BFBBBB}.link.title{text-decoration:none;font-weight:600;color:#1D1D1D}.link.title:hover{color:#0A8276}.link.title:active{color:#08665C}.link.menu{font-weight:400;font-style:normal;line-height:26px;color:#1D1D1D}.link.menu:hover{color:#0A8276}.link.menu:active{color:#08665C}.link.small{font-size:0.875rem}.link.medium{font-size:1rem}.link.large{font-size:1.125rem}.link.extraLarge{font-size:1.25rem}.link.underline{text-decoration:underline}.link:disabled,.link.disabled{color:#BFBBBB;cursor:default;pointer-events:none}';const a=class{constructor(i){e(this,i);this.href=undefined;this.target="_self";this.variant="bold";this.disabled=false;this.internalHref="";this.internalTarget="";this.internalVariant=""}setInternalStates(){if(this.href){this.internalHref=this.href.trim()}else{this.internalHref=undefined}this.internalTarget=this.target.trim();this.internalVariant=this.variant.trim().toLowerCase()}componentWillRender(){this.setInternalStates()}handleKeyDown(e){if(this.disabled){e.preventDefault()}else if(e.key==="Enter"){e.preventDefault()}}async componentDidLoad(){if(!o(this.el)){const e=n();l("ifx-link",await e)}}render(){return i("a",{key:"8b3aaa77c9de243e5a6c8c25eb1173ddb4cb0aef",tabindex:"0",role:"link","aria-label":this.ariaLabel,"aria-disabled":this.disabled||!this.internalHref,href:this.disabled?undefined:this.internalHref,download:this.download,target:this.internalTarget,class:this.linkClassNames()},i("slot",{key:"5ed92a06a4564b6c94324117edc49420a2dd21be"}))}getSizeClass(){const e=this.size==="s"?"small":null;const i=this.size==="m"?"medium":null;const t=this.size==="l"?"large":null;const n=this.size==="xl"?"extraLarge":null;if(e){return e}else if(i){return i}else if(t){return t}else if(n&&this.internalVariant==="underlined"){return"large"}else if(n&&this.internalVariant!=="underlined"){return n}else return""}getVariantClass(){const e=this.internalVariant==="bold"?"bold":null;const i=this.internalVariant==="title"?"title":null;const t=this.internalVariant==="underlined"?"underlined":null;const n=this.internalVariant==="menu"?"menu":null;if(e){return e}else if(i){return i}else if(t){return t}else if(n){return n}else return e}linkClassNames(){return r("link","primary",this.getVariantClass(),this.getSizeClass(),this.disabled?"disabled":"")}get el(){return t(this)}};a.style=s;export{a as ifx_link};
-//# sourceMappingURL=p-81f0d6ad.entry.js.map