npm - @infineon/infineon-design-system-stencil - Versions diffs - 30.10.0--canary.1696.f6fc7149013229dfeecb984f52e464c01a339d3d.0 → 30.10.0--canary.1702.4f2ff9ed9726341546ddeb1cd69fcfdd2c1d611b.0 - Mend

@infineon/infineon-design-system-stencil 30.10.0--canary.1696.f6fc7149013229dfeecb984f52e464c01a339d3d.0 → 30.10.0--canary.1702.4f2ff9ed9726341546ddeb1cd69fcfdd2c1d611b.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 (827) hide show

package/dist/infineon-design-system-stencil/p-bddadce2.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,h as c,g as a}from"./p-6b122987.js";const d='*{font-family:"Source Sans 3";box-sizing:border-box}body{margin:0;padding:0;overflow-x:hidden}header{margin-bottom:15px;display:flex;justify-content:center}.header__info-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}.infoboard__wrapper{display:flex;gap:15px;background-color:#f1f1f1;padding:5px 10px;border-radius:10px}.title{font-size:30px;font-weight:bold}.view{margin:auto}.wrapper{position:relative;width:100%;height:calc(100vh - var(--header-height) - 15px);overflow:auto}table{width:100%;table-layout:fixed;border-spacing:0}thead tr th{border-top:1px solid #dddddd}td,th{padding:10px;background-color:white;border:none;box-shadow:0 0 0 1px #dddddd;box-sizing:border-box}table th:nth-child(1){width:150px}table th:not(:nth-child(1)){width:240px}th{position:sticky;top:0;background-color:white}.sticky-col{position:sticky;z-index:1}th.sticky-col{z-index:2}.second-col{left:0;border-left:1px solid #ddd}.wrapped-content{width:250px;white-space:normal}a{text-decoration:none;color:black}.basic__info{display:flex;gap:5px}ul{padding:0 5px;margin:0 15px;list-style-type:none}tr:nth-child(even) td{background-color:#f1f1f1}ul li{font-size:12px;display:flex;gap:5px;line-height:13px}li.planned__component-wrapper{align-items:center;line-height:16px}.version__wrapper{display:flex;flex-direction:column}ifx-icon{color:rgb(10, 130, 118)}.check__icon{width:10px;height:10px}.planned__icon{width:12px;height:12px;vertical-align:sub}';const f=d;const b=class{constructor(c){e(this,c);this.getPlannedComponents=()=>{const e=this.el.shadowRoot.querySelectorAll(".planned__component");return e.length};this.setPlannedComponentsNumber=()=>{const e=this.getPlannedComponents();const c=this.el.shadowRoot.getElementById("number__indicator-planned");c.innerHTML=e};this.getCompletedComponents=()=>{const e=this.el.shadowRoot.querySelectorAll(".completed__component");return e.length};this.setCompletedComponentsNumber=()=>{const e=this.getCompletedComponents();const c=this.el.shadowRoot.getElementById("number__indicator-completed");c.innerHTML=e};this.setTotalComponentsNumber=()=>{const e=this.getPlannedComponents();const c=this.getCompletedComponents();const a=this.el.shadowRoot.getElementById("number__indicator-total");const d=e+c;a.innerHTML=d}}componentWillLoad(){let e=this.el.parentElement;if(e){e=e.parentElement;e.style.padding="0px"}}componentDidLoad(){const e=this.el.shadowRoot.querySelector("header");const c=e.offsetHeight;const a=this.el.shadowRoot.querySelector(".wrapper");a.style.setProperty("--header-height",`${c}px`);this.setPlannedComponentsNumber();this.setCompletedComponentsNumber();this.setTotalComponentsNumber()}render(){return c("div",{key:"ca3c8310ad317f2bce55a18a8a3cffbd4b9809fb",class:"container"},c("header",{key:"0676a8271dbefcc19ea915775889353b78e76aa1",class:"header"},c("div",{key:"f6b9420f624badeef88b363db60030a823c63f16",class:"header__info-wrapper"},c("div",{key:"79f2d7105c0f5f7a4c40e4ed0ad7c3c614ee79ac",class:"title"},"DDS Components Overview"),c("div",{key:"d8b708e9287e055f9164772ba9df1c286a3fa03a",class:"infoboard__wrapper"},c("div",{key:"72ee4009e82b1085c20e4c1042c8cb68bea87e64",class:"basic__info"},c("div",{key:"9d6779ef64d681d255344b1ea24b445bea0bc463"},"Total Number:"),c("div",{key:"926795a2dba61398b78975b532739f19fbcde80b"},c("ifx-number-indicator",{key:"9f84d42a217f7d060b908741281964e111619580",id:"number__indicator-total"}))),c("div",{key:"ea0e7cd607c1f93ca7ceeacf149c3e762fd849ca",class:"basic__info"},c("div",{key:"1ea7782112cafb8031ef385bd79d6c531810f0e7"},"Completed:"),c("div",{key:"e5a7deb30741ebfe49bd4d94db731b69c86e599c"},c("ifx-number-indicator",{key:"7f23f496e092620072611035bb2250bf5919cce5",id:"number__indicator-completed"}))),c("div",{key:"01d0f861f555f0e60c6a8a2d513241649a8301b7",class:"basic__info"},c("div",{key:"6084f3b7bba5810ed16df121a953864c026f86d4"},"In Progress:"),c("div",{key:"74d22aad00e2495c3c9bf3dab3f675ff3257dbc4"},c("ifx-number-indicator",{key:"d59565494d14dffb985a88af24d2d34480574e53",id:"number__indicator-planned"})))))),c("div",{key:"b9f72818d31f4dd85be575312e70abcf3fecaf03",class:"view"},c("div",{key:"9867aee3d100a50b6c9bd83bc9eb29556dce8897",class:"wrapper"},c("table",{key:"18a929925c3236ed37fd3e5c396bd044c7696636"},c("thead",{key:"ad7da6bc1ceaec28456d1c4c16365831ac1a60ff"},c("tr",{key:"09a3847e2f551bc083bac83a5f40af7d9b26e8a5"},c("th",{key:"e9bbfac65fa077813f8f5e57ef0556cfa762fc6e",class:"sticky-col second-col"},"Component"),c("th",{key:"62e6dc93a9091ec67a47ed36304f9323e1758136"},c("div",{key:"71c3cbaaf9c39516a72ee566af0260c8e0c98304",class:"version__wrapper"},c("span",{key:"21d66589a4a581064b17f792006f33dc376ef4c1"},"Version 1"))),c("th",{key:"9a78d5fb14ef287c8756054fc73a9fe0619e1778"},c("div",{key:"16606e8bb412cb0b1f1a77300143acf5fee5afa1",class:"version__wrapper"},c("span",{key:"4e5ee3bfeef2ef951b463b0db12627316c6b2c6d"},"Version 2"))),c("th",{key:"7bb8c744647b69ecdce4bdb9b25960de044392ac"},"Version 3"))),c("tbody",{key:"6a0b5bf697153c17de5239ab5ba5ce2c0b662fec"},c("tr",{key:"4b35600fedb93a7273ed9796309d0b0798eab586"},c("td",{key:"18b1ab8b946a94a0df1f31dab003cd3cd0460ad0",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"9f9583ee46a6fe2df24ef58f0542aa3a318ad946",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-accordion--development",size:"s",variant:"bold"},"Accordion")),c("td",{key:"741df479f3b98f175c64b97e4f9674b85dfcdbfe"},c("ul",{key:"1ee3c54cce8d7933473f9773fc3cee0566e9d36a"},c("li",{key:"caa1247bfce3f8db182b1e30eb376e0c2014ab08"},c("span",{key:"6d1c1bab4aa83db8f22be194d8a41ed554dcf80e"},c("ifx-icon",{key:"db154ba6ed91ece3a7d3d0c0ffeac5fcecff612c",class:"check__icon",icon:"check12"})),c("span",{key:"87623a3a99397d3689e3a18da0b828cbe3452182"},"Includes essential functionality such as expand/collapse behavior and minimal customization options")),c("li",{key:"2ffeebe94235f4302811958badb1f43ff72bde79"},c("span",{key:"b1a092c93b3501d5d11c01a285779a895e77445b"},c("ifx-icon",{key:"10ae6bcb0c9abc5387aa9c78da9d9988be27e7ce",class:"check__icon",icon:"check12"})),c("span",{key:"982485647ec5c8948e2b4c664c471a7f62119ad5"},"Adheres to web standards")),c("li",{key:"d2c6aa8064b4eca8d60efc150ad48bfad4cfa7d8"},c("span",{key:"efe6a75938a88aa241485a4d9aafe8a630f38983"},c("ifx-icon",{key:"bf5352ca14b5fea51f5263446cee7b0b8ea7a9fa",class:"check__icon",icon:"check12"})),c("span",{key:"4f5c4f7cfa49bd35bbecbbe405b6261fa44356c3"},"Provides a simple and lightweight way to organize and display collapsible content")))),c("td",{key:"a93ccb811aa05743ffb6807dffa3c6e2f945a3c3"},c("ul",{key:"f593870bf247ff4173bf9f5ff44e372b4a66682c"},c("li",{key:"2195e3641838269a2e5637f9b13772d8fb248abe"},c("span",{key:"1e00a7bbf2e77b2504c2aefe524a7a4b3dc6e1f3"},c("ifx-icon",{key:"a1b3ae4923fde1e557df0a7d2c89c979e03c75eb",class:"check__icon",icon:"check12"})),c("span",{key:"2ebd7f142b1ab58c5a562cfc468adc8274039e1b"},"Auto collapse feature")),c("li",{key:"6e1c1f711e3867faf440abf53749e22332d74f54"},c("span",{key:"fe7770993702c0ca663cf6698272658645b72571"},c("ifx-icon",{key:"e582aec4f5db995ffb34f461dbfedfd72e8f5381",class:"check__icon",icon:"check12"})),c("span",{key:"ca0750b559365b793c9077466bee1adbc03a1047"},"Initial collapse feature")),c("li",{key:"121d3b2d82e4a599e6947367e3c43280065f1bb0"},c("span",{key:"c2446c01c5d01e5097072190fcbe34b54a708b01"},c("ifx-icon",{key:"e45f4988ad277f08ce959cc614e0d92c7a4b2c22",class:"check__icon",icon:"check12"})),c("span",{key:"aeb7120c154779ddefcdcbc464553b8284670e72"},"React, Vue and Angular wrapper integration")))),c("td",{key:"bf62b55fc1018ae411b4dedc41c253ffca2b28a8"})),c("tr",{key:"aa62b6436dba2de08b625424a5f8713d993900c0"},c("td",{key:"e067e7124ff0651017441c12cdfa56b25613e50b",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"0b96fd8cf83ec03c21f45d76f462d502a1fcfc5c",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-alert--development",size:"s",variant:"bold"},"Alert")),c("td",{key:"28d2767ef999b6e2f96c4e4023a17efa4a2a713e"},c("ul",{key:"ce85adeb9c6aa1adef488006d436b80b4126ebbe"},c("li",{key:"d15b621da623f6c53a6e9a10587ec89cae15e19e"},c("span",{key:"0949fbc63c900cf97af5fb421bcde5050f646e79"},c("ifx-icon",{key:"f3bc5784b0f7420fa22b7b613053d27729b92420",class:"check__icon",icon:"check12"})),c("span",{key:"1ff70705c0859ec8d32bb5805a715c05804855bc"},"Provides a lightweight and customizable interface for presenting alerts, including options for different alert types (e.g., primary, success, danger, warning) and basic styling configurations")),c("li",{key:"a312085284b8b41e984a54d286c68889f3c9e2f8"},c("span",{key:"77831b44f076e197bc679c3e18de497901887222"},c("ifx-icon",{key:"c139c2085c225ce617fddf0d9505075fad107ebb",class:"check__icon",icon:"check12"})),c("span",{key:"bfd821990f7ab177bed7e41a1c0fa8ecb6d3dddc"},"Adheres to web standards")))),c("td",{key:"3812926554da1262c57e36785153ae2e6fa62098"},c("ul",{key:"1f4ef90af889cb8a8714591a2f4c6f57acb721d1"},c("li",{key:"568fac38e691c8f2d62f15918105e443f0752828"},c("span",{key:"d429badfa058903f30dd7d481ab020616080ee06"},c("ifx-icon",{key:"03ac84d67c27dfd06baa7b92ee0c863c9e81eda7",class:"check__icon",icon:"check12"})),c("span",{key:"b7508f13f1af4d71c4999a6894bef0bdddd1fb76"},"Configurable close button")),c("li",{key:"599e26819808b24a889430eee75ec668c9fae8b5"},c("span",{key:"5664a4fb9d062b845cf8573e6d1485d89e8875ef"},c("ifx-icon",{key:"1a18c13b1a9f415472e2d672304d186aeaa1c527",class:"check__icon",icon:"check12"})),c("span",{key:"e836af731eb06b57879480458ce332b1ed284a6f"},"Additional Info variant")),c("li",{key:"d12d18cae3c9bb2d3e55af2265c9b55146dbd060"},c("span",{key:"c9b277ee214281c1c2b53fda5da8b871caaf1904"},c("ifx-icon",{key:"331ec0c0a7b975bde0be5ec182eeef1ebe0ebda8",class:"check__icon",icon:"check12"})),c("span",{key:"c3dadbbcde88e579d36d1088c4ecf8debc4f5a98"},"React, Vue and Angular wrapper integration")))),c("td",{key:"3b83a57a5697393b8cc2cb05de60bf32d0bca49c"})),c("tr",{key:"2dccf2e5c13278a20d726da24f89a17451a2a27c"},c("td",{key:"d69c69443517e3b5a1aede345bc20d4fcb6f377a",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"d32988ba8979f457fa6135f7082f77371822f1cc",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-badge--development",size:"s",variant:"bold"},"Badge")),c("td",{key:"e101c6665e461f3ba5b5fe84f319917435e07db1"},c("ul",{key:"9d7a342ac84c8bdf2039a66bd2e25e1508c0c03c"},c("li",{key:"23a652ccb90e045d439b1c3c349819540c15c5bc"},c("span",{key:"27324d1b95e9c52131c0d29d2f23b9cc0d86af70"},c("ifx-icon",{key:"2a1169980e0a75a8582ed2abe51ac50a44191731",class:"check__icon",icon:"check12"})),c("span",{key:"404bbbf2c3f03325c33fa8f2390e21bff8a249c9"},"Offers simple customization options for displaying badges, allowing developers to indicate specific actions, statuses, or categories with visual cues")),c("li",{key:"d7e6be905641666158c0ac14dab10a3448c8eaf9"},c("span",{key:"2e8c94995c2ed50bf9836eab2b18ec39cead0940"},c("ifx-icon",{key:"e6ac4fa5870783a9a8f76035200029a04f9d07f4",class:"check__icon",icon:"check12"})),c("span",{key:"4b01ad720a616165e750a2f6fc808630306a2fdc"},"Designed to seamlessly integrate with existing UI elements and adhere to web standards")))),c("td",{key:"552193418f94022faeb788421f308ddf50e07fe3"},c("ul",{key:"b773af5bca3d01171db94a998f484a713c761268"},c("li",{key:"9f1fb2f9867ecb0e99040514c4581706b763ee2b"},c("span",{key:"3364a590dbc0edb8e6f2dfa21cd0554450e55b6a"},c("ifx-icon",{key:"7e2195d569f9c431a0e86d17a06b443479f9b01e",class:"check__icon",icon:"check12"})),c("span",{key:"c0cbe3c76778775687368ff1c09a72955c83455b"},"React, Vue and Angular wrapper integration")))),c("td",{key:"5ec4de7627de88554141f36c9e6b0e3ad542afa9"})),c("tr",{key:"bf12833f07b550e93f19fb83a4f7f83c4a62c395"},c("td",{key:"da0f00b020ae6f7f47883535cc1644e42a86b1c5",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"e485092fe443a3640d608d84c67a8c97609134be",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-breadcrumb--development",size:"s",variant:"bold"},"Breadcrumb")),c("td",{key:"10676971314b609f7f2a2af187b7c547cfe0cba6"},c("ul",{key:"1c2eb802b2f029ac176b084f7550b97d7257e720"},c("li",{key:"a888a2a8ade8e28ebc6c616524d3b79c95b81f39"},c("span",{key:"328296aa044e6ae0a3c25e7023fd9769ab3aea23"},c("ifx-icon",{key:"274aac75f05d13e25ec5f59d105f115f823fe032",class:"check__icon",icon:"check12"})),c("span",{key:"b0e3904e34c6f070492ad9c23ba6ff34b01607cd"},"Provides a simple and customizable way to display a sequential trail of links or indicators, representing the user's current location within a hierarchy of content")),c("li",{key:"097559b6b3af05c16fc23336ab332243322097d3"},c("span",{key:"70762e0af7d6b42737181c04c71d8eb067c263b9"},c("ifx-icon",{key:"bb1ae4adfe35a5b8f58d5245534ea36a70569a2a",class:"check__icon",icon:"check12"})),c("span",{key:"8f908cad75050bed5e541d36ed4788cfe5143218"},"Adheres to web standards")))),c("td",{key:"56dfb1f2fd5677ed11debf10df940956a5d1d667"},c("ul",{key:"a2ace425332e2ac50480d1c0894d9757b8d054ac"},c("li",{key:"c65e160123cb83072831c6bd2aad19b98843e233"},c("span",{key:"1982af53e658625d77f8b6b1aed9f2ef375f91f8"},c("ifx-icon",{key:"f948349d328be5ef5514040776a58d74adf6cedf",class:"check__icon",icon:"check12"})),c("span",{key:"46f7535f8b59723c1c923398d72488087dee210c"},"Possibility to add an icon")),c("li",{key:"2f3c2e1118e19e5c7d0d10594bc58ad5066c8d7d"},c("span",{key:"95b15d5d353a9ec4492311202cbe7f2956156576"},c("ifx-icon",{key:"0d251197abf784c238f8e76570ff7543cfbf40cc",class:"check__icon",icon:"check12"})),c("span",{key:"ab0e610fe33259cbc45c973f874096eda7e260b6"},"Incorporated dropdown-menu for individual items")),c("li",{key:"32ed182c76bca5a479055b48483ba00264e72001"},c("span",{key:"160604fd4fbac37f6b9c9d3c486904a2912d2bc8"},c("ifx-icon",{key:"5ec254ed8e1e8b25043362ef9cac50168f9fa03c",class:"check__icon",icon:"check12"})),c("span",{key:"492a770f0ca3df714270d1bf0d30d4e95c98e832"},"React, Vue and Angular wrapper integration")))),c("td",{key:"692b2198f9914ca13c3986e0a6ce45082f73ffc5"})),c("tr",{key:"7d12279f465dd972d36a76bee9a5262c9e6cd175"},c("td",{key:"c9097503fefc6f00766d33c5215ec35539b0b057",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"09940ec0e9078279e9485775224e250b72cffa7f",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-button--development",size:"s",variant:"bold"},"Button")),c("td",{key:"af4521efcbb18ec7bc36a1f9c7b672431ad51ebb"},c("ul",{key:"947d74cce09279d27caa7e107371db12c82c58a9"},c("li",{key:"f048b19f757a6243ec01cf42be27aa9a8c939771"},c("span",{key:"a9da81d448e5aef3f9e5860da8f0102b22c24520"},c("ifx-icon",{key:"56069be8c06b115248df77c48c720a91b3a362ee",class:"check__icon",icon:"check12"})),c("span",{key:"4d420877e70aa9a8f51933bcd708b01e27a2ea16"},"Includes basic styling options such as colors, sizes, and states, providing essential functionality for initiating actions")),c("li",{key:"807072181e5f7a3c94e948b3c8ac374150d9f421"},c("span",{key:"44adc4a96836144e2a98ad88f55f232b7912816c"},c("ifx-icon",{key:"011e0e21f94702858da89d728da91f95443e7a01",class:"check__icon",icon:"check12"})),c("span",{key:"218654d54aa86360e71dffa110a294ef88015b33"},"Adheres to web standards")))),c("td",{key:"c74889ca4cb050942cc4aa93d8640ea2b9944d2a"},c("ul",{key:"5c35b19a459f4c1d72020a87c2fc3c08fcaab23f"},c("li",{key:"03e76534ec5ee676972de7628cc502438d5f94e6"},c("span",{key:"3ff7386ba038ccdbf3a1507f11aaaa83efc0eb37"},c("ifx-icon",{key:"ebd7167aa6df6840c0c10db5c7a42a1d89d48e1f",class:"check__icon",icon:"check12"})),c("span",{key:"1773f81bcabf9c97fe45fc361972d089108c683f"},"fullWidth feature")),c("li",{key:"f80b5e58fed4e86732a32187cff63fa006fe2337"},c("span",{key:"ee49fc369d149610e8dfd5f351b590f0b8ff652f"},c("ifx-icon",{key:"6b833f8dc40aad9562d956deb932ddf86edf5a38",class:"check__icon",icon:"check12"})),c("span",{key:"d8b5ab1e8c08358803b1b6a24281f0d2cde17e6c"},"Icon integration")),c("li",{key:"4035b623d93a6cc6e56576ab0072c50aa01fd267"},c("span",{key:"01774d14dbe12000f485adc51aff4548ebfa6623"},c("ifx-icon",{key:"410b0b1479f48c2b7e4d95d808fc9505d6872d03",class:"check__icon",icon:"check12"})),c("span",{key:"1878a0270ff44a6d91d8eb8ed3a1fe7aee03bfb0"},"Link integration")),c("li",{key:"36245d557c208f7c0813cb3aea31fd397512773c"},c("span",{key:"ac8761299bbb9740c8758fc38b6b273a9f8d42f7"},c("ifx-icon",{key:"a1888a45f80823417b0889128bbc0fe57ca01715",class:"check__icon",icon:"check12"})),c("span",{key:"b699c891f71b1d1e632fa4d74d4ffae9077950dd"},"React, Vue and Angular wrapper integration")))),c("td",{key:"c7f0cd9baa4aefefd02ef3da04d5e97a94d51de5"},c("ul",{key:"743847d49b51c1b48336aa57ab22a28730241f56"},c("li",{key:"17731d6ff85e051f11a67c15a13caeb95c7f756f"},c("span",{key:"2d3c7ff41321e9ed92227ea8ca5d97439bb53dba"},c("ifx-icon",{key:"185e10fcf1f5c4118c61767a6f497dc70e7fdc7a",class:"check__icon",icon:"check12"})),c("span",{key:"65985f67c112452ade82a15be7cbe9b11b87113f"},"Form integration"))))),c("tr",{key:"073978be5a2433cb26d159eb60db96622c9b52b1"},c("td",{key:"966c46a836b5bc4ccb877862794def34db64d161",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"d222ddf565fd49381bc9a3e2001f8faca9ab8553",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-card--development",size:"s",variant:"bold"},"Card")),c("td",{key:"fa37fc021db910b6abd4a45aca2c121fede2cc15"},c("ul",{key:"4ab119e3a221cbfc2b35c7788350e365dcff715c"},c("li",{key:"6e41a8ad9a49c99fdb3eeae9f4fc085af43b36e8"},c("span",{key:"c42065d7a1b2dc3e01b0bc66b4f949149fea008f"},c("ifx-icon",{key:"128af1e24ab7ef10105a0b9bbc55b8f4ee9b49a9",class:"check__icon",icon:"check12"})),c("span",{key:"e74ec08463a610fd340053534e72ab3b251b13c7"},"Provides a structured and customizable layout, featuring elements such as headings, images, text, and buttons")),c("li",{key:"fa6617fa4732dd5b8102f80ee64832daf7b06573"},c("span",{key:"0c58dcb3ff749ba092d3000944ee71c75ad00f05"},c("ifx-icon",{key:"0065adcce90c0c5800d629253058081024a01b70",class:"check__icon",icon:"check12"})),c("span",{key:"afb6313b28899b6784d209d4017244320a134785"},"Adheres to web standards")),c("li",{key:"ab7c0bb0481cd8a815e19165cf6480f3262b761c"},c("span",{key:"6af9d02c0ee64ae9126b5cd7ce282de3fcb2311c"},c("ifx-icon",{key:"a068465736c9774bae8d04a6b084b65e93ef8147",class:"check__icon",icon:"check12"})),c("span",{key:"5ab98bc11512de6966e4de04fdbe9f410916d854"},"Horizontal and Vertical layout")))),c("td",{key:"6461affe6f2169727626bc041f33d3cdb3c69e07"},c("ul",{key:"84363ddf7576f4c4822160ac5972edc289ec0941"},c("li",{key:"e49138d458c088c23a6790fc54ddb82449aaa065"},c("span",{key:"6a3030c16dee6f26caa268a7d99a3a4707ab0572"},c("ifx-icon",{key:"cb149db9244a3034084e4444260cdc1567db45aa",class:"check__icon",icon:"check12"})),c("span",{key:"e7982715ed5eb1979513f2adc61e1a187caa04cc"},"Possibility to embed multiple buttons")),c("li",{key:"ae862a2832efd043229df117de23e37384c5f421"},c("span",{key:"77b213a583708020c7a0f0cedbd7c2998c85bff2"},c("ifx-icon",{key:"62c48da400f8dbee5edc29a6b01d5269e4e21a2e",class:"check__icon",icon:"check12"})),c("span",{key:"5c35dd4b7cd4d0a26a6030c04db9a484436ca61e"},"A switch between a Link and a Button")),c("li",{key:"65fdbbce9db9e9110b7eb8172297461105759b81"},c("span",{key:"f1412ef7154aa6eeef2c354b3f524ffd1e15631b"},c("ifx-icon",{key:"f067209891c3c3b67586f803c5f13362a63d65ea",class:"check__icon",icon:"check12"})),c("span",{key:"af61076669311a485836f870b972a63114420489"},"Enhanced stylying behavior")),c("li",{key:"22de200062fc35c73896eb4b44bb96584a2952a4"},c("span",{key:"136519cd2c996fffd5282425bdb4b59886fffac6"},c("ifx-icon",{key:"9a97641d4723fb006ad73e66c46eb47e5593bffe",class:"check__icon",icon:"check12"})),c("span",{key:"28643f7ff87a9085323dcf1a63ae6586243a3f2b"},"React, Vue and Angular wrapper integration")))),c("td",{key:"25804542691d73bc2fd57f211c2da636a6e272db"})),c("tr",{key:"e5f8b5ace3be4c59db9ba81d407d394baeda11f5"},c("td",{key:"53e5f065d6b078819646eaa36e9de114506f5628",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"2dcfd1775931a6dd35468093d6934d21462cc2e0",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-checkbox--development",size:"s",variant:"bold"},"Checkbox")),c("td",{key:"e1532b4b8a420bd6b0d002a9c358272a960f9343"},c("ul",{key:"1a9af8f007873c07fbc9ace6dfa468a9b82736e2"},c("li",{key:"59c3d0e0447aa8bc362dc91e920423334ac5e2ca"},c("span",{key:"62988d2dce63777274e504688a7d55824b21f197"},c("ifx-icon",{key:"f8409f4aca853fdf5fe841ac4151b42a4b231b0e",class:"check__icon",icon:"check12"})),c("span",{key:"7bf203ddd371641983494c56e5da252e05f2c8ac"},"Offers a simple and customizable checkbox input, allowing users to toggle between checked and unchecked states")),c("li",{key:"cb08b8f49a44ca3ce25eb196ea8825084d24a102"},c("span",{key:"b748594104b57b1e4d97a974c83e90c1438100e2"},c("ifx-icon",{key:"dce9314a00e10ffbca92fe5620be70af37cd6bbb",class:"check__icon",icon:"check12"})),c("span",{key:"69d4d30939b27bf71ff62a5b3e1fc4b839eac6f3"},"Adheres to web standards")))),c("td",{key:"9eab4c00ffaa821f0a37e91e994a148b88ad224f"},c("ul",{key:"79018660bd80be5f655dcef60a29917c0954824a"},c("li",{key:"b174369c51d4669625896ec0ed97559cf32042a7"},c("span",{key:"ae499dc8b4d8cb690e38147bf915c3132a9f65ce"},c("ifx-icon",{key:"7ef8d62dea8d03d9cf4eaa3e63aa2309a178d9d4",class:"check__icon",icon:"check12"})),c("span",{key:"45fce79459412e781f1e5734265a0deb94874c43"},"Indeterminate state variant")),c("li",{key:"1dfd98b62c8f87f3bc9d1db542934ec3a8f003d3"},c("span",{key:"6820901079a529ef1fd7d7c5dd8fb8fda9cc7cb5"},c("ifx-icon",{key:"cedb9bf658130e16111b6c01e9145a6ba0ea1211",class:"check__icon",icon:"check12"})),c("span",{key:"7ee92989d691173ee2a9b3c090c50fe12814d15b"},"React, Vue and Angular wrapper integration")))),c("td",{key:"2c22a72ee0064a2a4d42c23caff25536550572a2"})),c("tr",{key:"8cce7defe303b93086f6cc97c705d0115c9d7443"},c("td",{key:"7a31537ba869231c2417509226e8e8a29381059a",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"8f2dcbe679be1e392d5632f03b381387ea4e87d4",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-chip--development",size:"s",variant:"bold"},"Chip")),c("td",{key:"bfd76a35363bbe9e33b082aec29a53451fc16762"},c("ul",{key:"adfb3282d7bd486f095b45898da20f39b9fe01fd"},c("li",{key:"2aef96de2c378be49fbf78c431714cc0db575e22"},c("span",{key:"5ffa6bc22d6ff0f0e9547fe711a165bdbb796de7"},c("ifx-icon",{key:"1c6b513f222c9251be5f676beca58d728419e89b",class:"check__icon",icon:"check12"})),c("span",{key:"4f80a4318f5fb10c4203918a48a2abf224b42d4b"},"Provides a simple and customizable interface, representing discrete units of information or user interactions, such as labels, categories, or removable entities")),c("li",{key:"7d045c5bae4c5880f815d728097c1055da6bc325"},c("span",{key:"276e13300124cc829bc28ee51adf53909e36f1f0"},c("ifx-icon",{key:"ad643b5be402f68379430b3d66b64ca5442bb93c",class:"check__icon",icon:"check12"})),c("span",{key:"d4ea5de078b3ea557c1faae495e913c67535e379"},"Adheres to web standards")))),c("td",{key:"468a0cc9fd6bacbdcd0b56bd96fabd7a11369c1d"},c("ul",{key:"fb6d7f9c1054d7cdeb17f0269d20fa6276d8ac08"},c("li",{key:"857ca8b843e04c7951da34faa94a64a7a0959ad3"},c("span",{key:"e77b57e4c444ac70736d5368383b61ab684732eb"},c("ifx-icon",{key:"6ad1be409c5c7ea7aa6a78a3a98a48eb69235926",class:"check__icon",icon:"check12"})),c("span",{key:"824f24eca38dfceb8f70288c4c08c798783014d4"},"Incorporated dropdown-menu for individual item selection")),c("li",{key:"81fab2d1a00159658693b3e1e2525d55e09d0ed5"},c("span",{key:"90035feffd96860f95b8e10f36b70c257aced043"},c("ifx-icon",{key:"0535f45b8a6f048ba8f453023c45b13250be836b",class:"check__icon",icon:"check12"})),c("span",{key:"a88606afef47e35921706377b86d55cdc979638c"},"React, Vue and Angular wrapper integration")))),c("td",{key:"811e89d5942fa76a5d83931a92145b0ad3de9b0c"})),c("tr",{key:"96b324792cee3ec3f4e4198c4957852b50c6c167"},c("td",{key:"d8a8fa30f02f5ab92bc9fc2a1e901d95e2a41681",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"e60526485e40d381402147e50af8d7bbc1097abb",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-chip--development",size:"s",variant:"bold"},"Date Picker")),c("td",{key:"25ee1fa072b09a2ad97cb15e1840ee1453583544"},c("ul",{key:"64444eae88f64ed5beab3405c3e0b7ef4279f318"},c("li",{key:"ec9795ca62ad50e179daf254fa9665bf2a0c7df4"},c("span",{key:"cbb8a7e9a1d68833f940893a50f291f47ab88860"},c("ifx-icon",{key:"63ce68a1b077d92bef217bd07dee341f6a84413e",class:"check__icon",icon:"check12"})),c("span",{key:"10a7d47ebaeb7fdac27a913f5a6504d971f484a2"},"Provides a customized wrapper and theming for the standard date picker element, enhancing its appearance and user interaction")),c("li",{key:"0086c0c19124fbab5b25b5ab05a0fb8de8942057"},c("span",{key:"467346a20d64727ea2faf06fbf013a8e22076365"},c("ifx-icon",{key:"5fb3a04fafcbe3e5abb91408b8a8c2d1ac074e76",class:"check__icon",icon:"check12"})),c("span",{key:"1307e293b70767417a945dccf4e6250156856839"},"Cross browser compatibility")),c("li",{key:"e0dcbff2e50f4b2f7ec10c12a4ca159163fa1d9a"},c("span",{key:"2f87d3804766ee944caad52695d09d31a315785c"},c("ifx-icon",{key:"7bb65e3b2c122754f233c5c64dae1b5acdda6096",class:"check__icon",icon:"check12"})),c("span",{key:"b2450d7c9add50e72826b93776b19a9d43f2636e"},"Form integration")),c("li",{key:"3e512eb3e25c28174162a0be695f807d04c31cb9"},c("span",{key:"db10e4885e14d6e321251584b712c08d29cb5228"},c("ifx-icon",{key:"f9058a6d75d2103a8d75567888d717e9b2c88dcb",class:"check__icon",icon:"check12"})),c("span",{key:"f6a0ac9ac19101fa8805097fec38f1ef9c175f09"},"Adheres to web standards")))),c("td",{key:"bf694938195b5bb1cf1d83eb1b7f29a764604cd6"},c("ul",{key:"ee5d4f0bf7fa8ed11e268041eca30984120528e2"})),c("td",{key:"23cb8c120e16c9eb3054efc7e07d598ced620395"})),c("tr",{key:"c0171d0a36fb82c77f0b8081a5c4345b69c79f8a"},c("td",{key:"118c4ea2d58fb6883e2d345cdb8e74ad79894e98",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"e6cc96addccf690622a1bf7c269dff04f25099e1",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-dropdown--development",size:"s",variant:"bold"},"Dropdown")),c("td",{key:"2707c9e69079cb2bf1ae95aa4baad3dda6539dae"},c("ul",{key:"aa79d6d6f8c5733b08d70ce0d8077edefdcd8482"},c("li",{key:"ec917b682f40195c6f16e65a8d7be51f0c5edfbd"},c("span",{key:"cc1c6b0060a132166b2728e5314667be0451b220"},c("ifx-icon",{key:"d01d510e81838e5273458b415c4752482163ac6d",class:"check__icon",icon:"check12"})),c("span",{key:"ff9681f3880a16e89a5d9f230bd86c92f9dac092"},"Offers a versatile and interactive user interface element for presenting a list of options or actions")),c("li",{key:"b7c82a69bc96affc6d051054b74c261fe26f1800"},c("span",{key:"efa35d32ef45bcba8c91ec97313809002e4d7968"},c("ifx-icon",{key:"d882ba9ce126772578ee28125589dba24e704861",class:"check__icon",icon:"check12"})),c("span",{key:"2f8c3e6ac31ec00153148cfab1a39442a37d69fd"},"Ensures consistent behavior and compatibility with web standards for a reliable user experience, while intentionally limiting customization options to emphasize a standardized appearance and behavior")))),c("td",{key:"cdb97b70b3b8c9fd452ac6177eb0beeedef95082"},c("ul",{key:"35aa5d6e8cdbf37c58f3e4e991a2b7fe6af0d0c3"},c("li",{key:"6af4989e3fcd7f8d61d9e652b241ad08da601fd3"},c("span",{key:"e109f1995b265cc7b9539463db6f09b024a7ec6d"},c("ifx-icon",{key:"42fc5475258bf75121ddf282e0c1162e0ac27cef",class:"check__icon",icon:"check12"})),c("span",{key:"fecfbef7bd6b0323ee833bf0b98336dbdf6ac64a"},"Search filter")),c("li",{key:"1ea6f78517c1163a5b58c82021fce9fcb2b7b7ef"},c("span",{key:"2b3c7dbf021aaf43e7a15f5503ace22c983ae9d4"},c("ifx-icon",{key:"954dc0c4d1710ff78ada09dec7560187c77d023f",class:"check__icon",icon:"check12"})),c("span",{key:"afae5f5d2e4e6af1c5967ecfbee33d8d5d8b237d"},"Header section")),c("li",{key:"490aafeff009525c20021f6a32ea527b6b6f7f11"},c("span",{key:"57c30c07c89922a1f869dce945702a167b9aa5d9"},c("ifx-icon",{key:"dfce94da343e230166eefaf5a4cb049a6cee26c0",class:"check__icon",icon:"check12"})),c("span",{key:"9713a24af5a86e5591aedd79475cc0fbc7074c97"},"Menu Item Divider")),c("li",{key:"6805c23fc19d79ca0794629c04d990ce07bc3e96"},c("span",{key:"08b62e400fbc808603da04d1944f0c5d1aca4203"},c("ifx-icon",{key:"e19186e0377a7e57f308ecbf23b1d51e0ba66e86",class:"check__icon",icon:"check12"})),c("span",{key:"9b5cf6c03f156069eaea1799189d97bcce206b9c"},"Icon incorporated")),c("li",{key:"c71546a3a65ed4cb396833049fbb7802a0866b9e"},c("span",{key:"786182cae7ea3102dd8887cac3fe672e3812f8d1"},c("ifx-icon",{key:"7694aceba71165293c827afd1ead24c221d229f3",class:"check__icon",icon:"check12"})),c("span",{key:"087f03b8e740c5e6e518d5aabe08b976857d68ae"},"Extended customization and configurations")),c("li",{key:"51e45342e60edd214c523c10aec57c31fcc86724"},c("span",{key:"bceb6e73cd1cb91d9dedd733cc239e5b407ffe92"},c("ifx-icon",{key:"2a6f98b9305b26255659d902b0ba0f02f464e6b0",class:"check__icon",icon:"check12"})),c("span",{key:"74d7e5160e2e52b4136b66511bbb565e1a41d145"},"Separate label trigger")),c("li",{key:"2e8008ec5672d6b40c39b29595a434327922ce7d"},c("span",{key:"92fd4dc600ae2710ce17597943f13c18cbccc3a7"},c("ifx-icon",{key:"378aeb5f164cbf25ecdbdb09d2286cc79939400a",class:"check__icon",icon:"check12"})),c("span",{key:"fa8a829e2970cc70a3426e683afc28e084e8a65e"},"React, Vue and Angular wrapper integration")))),c("td",{key:"328221ddacab7a3c6e6ac457920a1e9288c6010f"})),c("tr",{key:"8d5eccfc3170d77a35f278343559502a34502c2f"},c("td",{key:"4d072a203a5136fdf5efaf2ed9d80740182c44f8",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"9907973723e6d91ee8ceffc07b39820ced0c1de1",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-footer--development",size:"s",variant:"bold"},"Footer")),c("td",{key:"91b5bd5e45338e44ca1b8d3511dfbba7cf805926"},c("ul",{key:"4832a997cd83b01c43bc4cc2ec27e99f04c10312"},c("li",{key:"3630b0005c0280639d2eb051279417e42815e39f"},c("span",{key:"69ede643b353888140cbe7d5119ed9ac738a4219"},c("ifx-icon",{key:"582b8c9987dde4af433255f6b284bd0098f34856",class:"check__icon",icon:"check12"})),c("span",{key:"d396a6fcf0b0f489a2e25fbed6b76c3c43d4b2be"},"Provides a standardized and customizable way to display essential information, navigation links, and branding at the bottom of web pages or application interfaces")),c("li",{key:"29fa49a5d9994c1ad43e1bb9b9fc3a3bc8dc2439"},c("span",{key:"ba11c1a0b2afea5dfce7b2045e1be763901a4d2d"},c("ifx-icon",{key:"9170816ad9a380d01f3eeb9ad216f387fcdf5c88",class:"check__icon",icon:"check12"})),c("span",{key:"c982526c0f0363bce039661296797281ec9559e4"},"Offers a flexible and configurable layout for organizing copyright notices, contact details, sitemap links, and other pertinent information")),c("li",{key:"4771fcc5d417f91e94e232667b0c76b7caa4802d"},c("span",{key:"efa72201ed9ad3d89b4418375335c0424b7ac467"},c("ifx-icon",{key:"5a6bd94c3eed8443da6b0a5b6e3adb2d4b5bde0d",class:"check__icon",icon:"check12"})),c("span",{key:"02582299a401f42a9124fe2363ecfb0fdfc2e8b6"},"Adheres to web standards")))),c("td",{key:"29712f08809bdcb0068a119b0e857c797950433a"},c("ul",{key:"389d7d2231a12444cd0e2bd701967f1f46d59aa6"},c("li",{key:"8b59bd928f7ac28a62db10145e49928b9370e9e6"},c("span",{key:"67acf63f8fbf30c5685f1703870f105183f9d861"},c("ifx-icon",{key:"6600b31eca6d36fff35dd98e6f162cd61a30f1da",class:"check__icon",icon:"check12"})),c("span",{key:"d22f32e6a9c62407956c7a7b4453125c06a82f37"},"Small, Medium and Large variants")),c("li",{key:"1b76f0042e066f933b26df091323dc5232e38277"},c("span",{key:"c8ef0841f976024be943aa57b1f0e95c4c1b1715"},c("ifx-icon",{key:"70f7579ecfeead701093dd7bd73f2d3d2192fe17",class:"check__icon",icon:"check12"})),c("span",{key:"75fe877aad7ae6d136d93f0a1c2864ad7d4d8b48"},"React, Vue and Angular wrapper integration")))),c("td",{key:"81f6b02c8838dda232cf1e9ba8bbed4efe0ed453"},c("ul",{key:"6e5762385e7379824b6ba9c2b0a21de61221f77b"},c("li",{key:"2fa5b3e91429119c23682e2ff967a0b7808424cf"},c("span",{key:"c5591e10973496a8207797208e939d034f802424"},c("ifx-icon",{key:"8835fb298c8f1773e5e34cb3cfa00e288ec23015",class:"check__icon",icon:"check12"})),c("span",{key:"bf4b2a037236cac6420e21488cb2c12ea9f97d03"},"Customizable and removable links"))))),c("tr",{key:"6e996fc1508f83e821b6cbdccb99031629bd0546"},c("td",{key:"55ec4bcf05dcc003248696402ede0a0d37e5c84e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"761667f9c826a3bbb63ce941569e5b3623f2af60",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-icon-button--development",size:"s",variant:"bold"},"Icon Button")),c("td",{key:"f88e9e940e41b99ee81683ff07ca5a9732fe50fe"},c("ul",{key:"2b0d9757a9f629505b5be27147b28702bf90afcd"},c("li",{key:"824ef54d5fc2226281451983c41bde127e292e6f"},c("span",{key:"aa541de5e682beca239804a08c28602a87413e6a"},c("ifx-icon",{key:"56594a23b85842b4c9636633e6b19c0917715695",class:"check__icon",icon:"check12"})),c("span",{key:"9c25330d8335e3e88de01d3194e087fc1204c24d"},"Offers a compact and interactive icon-based button element")),c("li",{key:"87bec4d96429da044f9bb940f8a8b6de19081b75"},c("span",{key:"5c8f411b8c2dae5b7790f11b554a6b36fef33319"},c("ifx-icon",{key:"e3f98481bbd480b925d5ac78ca86b5aa34d0b2d2",class:"check__icon",icon:"check12"})),c("span",{key:"46a9fc2b07e442410715c6b91e70a2158a792db2"},"Provides a limited scope of customization")),c("li",{key:"4dbd37220c72c04d80d71955bc230d8cf8f5d3ba"},c("span",{key:"5202df891d5397f851b5c511ae13e83dfb2ab257"},c("ifx-icon",{key:"0b2f02ccfddca1caebdbb6648301d08896549df6",class:"check__icon",icon:"check12"})),c("span",{key:"b791fc8f0ddaf735073c5e54aa78acb361f59500"},"Adheres to web standards")))),c("td",{key:"df2a005365f06ee10a371ea733a7af2d20b2c3a7"},c("ul",{key:"c8712ca3b2adafe3169314fe82cd8293d19b240c"},c("li",{key:"7340ed2125fe596b7f25476e02398d4415f05f44"},c("span",{key:"057725d1954ffe8f82080d91fdabef98aa72c2a0"},c("ifx-icon",{key:"0f9908db1573767a397db98837d0a59fc6041635",class:"check__icon",icon:"check12"})),c("span",{key:"25e09beff0098b1e417606069e50dcbf01ae0326"},"Additional Round and Square shape variants")),c("li",{key:"33803b7237de7f35e05d62769da933bd99849eae"},c("span",{key:"81f6572e3d3afab2df2c7d43666059ed67c1609f"},c("ifx-icon",{key:"7ee6ec4bd5c9606d6aed8f6abc06588808b52282",class:"check__icon",icon:"check12"})),c("span",{key:"c1a59aa23c8645ca0b9515e00cf886d04685322a"},"Small, Medium and Large size")),c("li",{key:"dcf75bc67323aacd1316243aaa65800c45ddb3c2"},c("span",{key:"9cede76b35f35638e3abb72d73990e0de1c7dbbe"},c("ifx-icon",{key:"1a1b265ab1035866d5779e204ee3cc4d04e83f12",class:"check__icon",icon:"check12"})),c("span",{key:"a63b9c0fd5eaf606ed4100670cdcbe2989fdd05c"},"React, Vue and Angular wrapper integration")))),c("td",{key:"38c4c72499182567a8b82c875b2b4b9f8d0bb0fa"})),c("tr",{key:"182e95f04f1c066b3ae4e1defe55790c0bf87bde"},c("td",{key:"aaa8311739e6d5be21e1b8e150011e9d8b97ff4a",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"66638bb6e953a3cf150e0021db982058e71ebd7f",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-icon--development",size:"s",variant:"bold"},"Icon")),c("td",{key:"60d49aaa390ac4c84b12bf1ea20e120b6f22f733"},c("ul",{key:"68c397542aaef2cccb934dd88a70b9719595ba0f"},c("li",{key:"89e12288633bdf3100b0c07c71f661875fbbaca1"},c("span",{key:"60eb5f44c5dde7e7a7cc4df10069afa73bb459c8"},c("ifx-icon",{key:"b13d2c75fea097c6fb68edb0247b45371e8be457",class:"check__icon",icon:"check12"})),c("span",{key:"89cd6a9ed6e48249dcb3e89d2fb9b0308773715e"},"Offers a wide range of iconography options, allowing developers to easily incorporate symbols, glyphs, or visual indicators to enhance the user interface and convey information or actions effectively")))),c("td",{key:"a4e9d8e61a2b4ee4db68ff021369462890ae0453"},c("ul",{key:"022658385ac7b8ab0e90a23d2dde2d8e8b35edc2"},c("li",{key:"33dfa8d3d3753bf267feef7e6339d77217d618c9"},c("span",{key:"58d93c30e3d66d8655a6e1a8b8564f09a7859205"},c("ifx-icon",{key:"4eee53ec2b13dc7646a0189c69b9eeee4ac22a27",class:"check__icon",icon:"check12"})),c("span",{key:"163600d953a46b090a0cd875ec17807761956a87"},"React, Vue and Angular wrapper integration")))),c("td",{key:"a6ffe1eab7cf923a808988fec0237fb684c29371"})),c("tr",{key:"a0494f81721d6bbd5f3735f98fbdc03fef9494bb"},c("td",{key:"606462cb480ea7ab21c5bc173c67652e5088afb5",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"38b9cc055e9ba12abe8198d2b688588d04d7039c",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-link--development",size:"s",variant:"bold"},"Link")),c("td",{key:"60ffd8b048a0a05818f232a44807be0b91184888"},c("ul",{key:"a01ba704c63aea8a10b070aacd7a13283907ae31"},c("li",{key:"622cc61211eee33a2fc0d0404d29291863d34043"},c("span",{key:"1988a0e48483ecf3646fdee5d4ef5c81b440178e"},c("ifx-icon",{key:"59d658f7c4e3967b199f22af6e849560917ac4a9",class:"check__icon",icon:"check12"})),c("span",{key:"1d1b662a2d0a7b20e0f52c6950b7057e8e96a84e"},"Provides a flexible and customizable element for creating hyperlinks within a web application")),c("li",{key:"800e4f07c7e14af3c9b853dca4bcac696f1d202e"},c("span",{key:"43a2fd48c8cbebeb3a540098f24bc4880be9148a"},c("ifx-icon",{key:"62f188e7b3a6652b18cdabb893445faa93bdc56e",class:"check__icon",icon:"check12"})),c("span",{key:"9da5cecc588fd8ce47f4964226d6bd531f5d8004"},"Offers essential functionality for defining clickable text or elements")),c("li",{key:"cacb85e3111230b3bf2974fa0d3ec9600b465948"},c("span",{key:"be28abb36ddf1d4e59b620963d4944336c161fc3"},c("ifx-icon",{key:"19faf7363f01a5bb95ea8180796400b8a8a91c93",class:"check__icon",icon:"check12"})),c("span",{key:"392c91059155f55576f4aa1222319cdedc817009"},"Adheres to web standards")))),c("td",{key:"1afe2de119b08f20f7c805867a940d9383f6e83d"},c("ul",{key:"0956120019e8c80a327bdb8a59ad612ec7751019"},c("li",{key:"f9d91720a24969867dee8369bff3d1dd46ebec6c"},c("span",{key:"ed960adc6529bb27b8be3480cfdd41964319308d"},c("ifx-icon",{key:"aec0baed0e0e8f663e9313228b3fdb2733de8b5e",class:"check__icon",icon:"check12"})),c("span",{key:"e20c8a1ca4e4ed95fb97ea627b62c97502e0001d"},"Small, Medium, Large, Extra Large size variants")),c("li",{key:"edf13f16a37b5e0cce7f0210729dc9f054ca8f8a"},c("span",{key:"95abc7133f49e84f13ed28719e6fd9683b01f6f5"},c("ifx-icon",{key:"e4adf1b27094f402baafe1c36f023d0bbd50e3a0",class:"check__icon",icon:"check12"})),c("span",{key:"4af6573845111af3c6e97fd4b83e017d35236bd8"},"Icon incorporated")),c("li",{key:"9f3897af7e5ce93a5ba17411c2e04872db71008c"},c("span",{key:"d60fae366cc491ca835a66065c15deca31908c02"},c("ifx-icon",{key:"b08ef90eb5980755081e16b54744ad3ed5e94b18",class:"check__icon",icon:"check12"})),c("span",{key:"6f7b197ce86fb4a74066b761e07affdac09a227c"},"React, Vue and Angular wrapper integration")))),c("td",{key:"059d50251ad4bcf5ad2e81a7a1c169745a3cedf4"},c("ul",{key:"012c46d9f3c44c8a7d3ca11a7e087081e56cd9b1"},c("li",{key:"cadadcf927ea9e9a94cb0571a7b8db0a9cbc5e3c"},c("span",{key:"4bf99ec3492cc2bbfa02c94ca2f97c2b064e36d3"},c("ifx-icon",{key:"a5d332b0d3ffb8aa3db0a6be95666b40f4085500",class:"check__icon",icon:"check12"})),c("span",{key:"664d2c98e00f33aee8b86d4680508d83feb0a435"},"Bold, Underlined, Title, Menu state variants"))))),c("tr",{key:"9855eafa9b0b195df7182a9827af1eb4565dc21d"},c("td",{key:"0276fd3817e3a2dc60eb35f19666ce1ac34eef00",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"6411775b1ddc2b55142055e1b2b31a2731bf945a",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-modal--development",size:"s",variant:"bold"},"Modal")),c("td",{key:"12cfba7ca1dc9c0fa28c010b4ea7ac4eb2fa16da"},c("ul",{key:"3d41400f5c7fe77866b3376ca8c7b15b1677d63f"},c("li",{key:"c122957bc3a6abeea4a269d469b53f7428856e25"},c("span",{key:"c31373aaef16088bcfdc49ad5ac1e08582dc0ccc"},c("ifx-icon",{key:"7db9561c57cbd46ff02daffe141d7a3fc1b28c39",class:"check__icon",icon:"check12"})),c("span",{key:"9522589526b038f8bb4b7daaeb2d7b11dd8c65fc"},"Provides a customizable modal window, typically used for displaying contextual information, user interactions, or additional content without navigating away from the current context")),c("li",{key:"6ba9e72317c056cfb1dcd072229ab331ad7902dc"},c("span",{key:"5921c05c8836b8a5d8198e3ac9986a286e1d3c23"},c("ifx-icon",{key:"07c3f7af75c45f377ad879283cc4c1a5b6fdc544",class:"check__icon",icon:"check12"})),c("span",{key:"eeccccc4fbcc49eebecbf037f6d268c0ca1de88c"},"Adheres to webstandards")))),c("td",{key:"becb782b1b892994fa248bf9050e5adb033e503e"},c("ul",{key:"9ed9dcf950efe9836bcf28e25884dd918fce01a7"},c("li",{key:"4cda741b4c5d3a79a6991db54f9a1ce82c21d55b"},c("span",{key:"c0ce33b7bbb823290146a864016eef8c759bc1fc"},c("ifx-icon",{key:"4e0fb0be0d4147761f90976970aa2d9549367289",class:"check__icon",icon:"check12"})),c("span",{key:"0b45b046672640cabcaa2b948773909f2048fe0b"},"Alert-brand and Alert-danger theme variants")),c("li",{key:"5b0ba81e9ae05c991ba0dab4ed7dc29e61264d34"},c("span",{key:"03c60f4e16a6ddbfdd5a8e43cfa999b2253c5767"},c("ifx-icon",{key:"11b6fbd8da5df73e6bf09829f3db27dabf51573d",class:"check__icon",icon:"check12"})),c("span",{key:"4f7e5e5ecc329dd08a90620902b6555486a663b2"},"Extended customization")),c("li",{key:"3206ba1d2e5e04dee7e75e8d21825a0e48cd5729"},c("span",{key:"f193a21188dd4ae9778ccc6e50b5ddd1dc84e513"},c("ifx-icon",{key:"2529445ea276c4c4b669d4ec9190e8625a83cf97",class:"check__icon",icon:"check12"})),c("span",{key:"8af9a9d30032dc787e7ac591e9e367092950c4d1"},"React, Vue and Angular wrapper integration")))),c("td",{key:"c1421b319e49aa8085cf63dab85061bc5cbf4d61"},c("ul",{key:"cf7d645c7058232dc952a2322de57e12f5e5383b"},c("li",{key:"826c293c4be77e974d311817059a1731971464fa"},c("span",{key:"1fcfb49f5feb96a484bb14075efd2e243d85cab2"},c("ifx-icon",{key:"eda93ee3f5fe3079b8b04467f3d235d913be5f52",class:"check__icon",icon:"check12"})),c("span",{key:"108273397b97de41812d61ae35f91bd24190338a"},"Removable close button"))))),c("tr",{key:"6777c5124c10084a399218aa3399e33ca6276346"},c("td",{key:"91fb22e1a31636f691d3cf2da694b572b410a28d",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"56f53d6b6ce015d0015e86d0fc94068a96c63227",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-navigation-navbar--development",size:"s",variant:"bold"},"Navbar")),c("td",{key:"59fc242e9c6c06876a93af8e4157f3c7e1afbb31"},c("ul",{key:"7e6de54ebf53ca8cdae4e8560ea5d58a87ab8857"},c("li",{key:"120f07b6fac7be47ccbb74a5ade0e725bff1ac8d"},c("span",{key:"f707bfd38f5b9f5464b06000f16ba6ff6493f04e"},c("ifx-icon",{key:"ac88c1aaf4a85b56e613046fa2d9b1225ae9aec0",class:"check__icon",icon:"check12"})),c("span",{key:"7295a8eba61464248e2b5cc0586ff55f8e73f7a3"},"Provides a standardized and customizable navigation bar for organizing and presenting essential links, menus, branding, and interactive elements within a web application")),c("li",{key:"a4b7e812b8ccbbb751958e38b88ba2d4126aba26"},c("span",{key:"aaef4ee00f0a4e6bbf971ab368bf82b08a5aba58"},c("ifx-icon",{key:"8925646470892811f09960805dfee492fd8dca32",class:"check__icon",icon:"check12"})),c("span",{key:"c30e9d35a146cefd685893eef2a1b44ba39dfa0a"},"Adheres to web stadards")))),c("td",{key:"7c2e083389b6fae01d7f542fbda589388c9a8a1a"},c("ul",{key:"21c57b608d7986d26f104f3902f9ff2f105d8f4b"},c("li",{key:"bb5e5aee4a3bf22619b7fb772f3ae2b9c634e7d9"},c("span",{key:"d8bb43f7ecbc5b0a5af491957813f36d1b77c8b3"},c("ifx-icon",{key:"eca87cf6e106d999af4d5c2926ff428d543bcfa0",class:"check__icon",icon:"check12"})),c("span",{key:"8cd703d5bbd90e01936ce3ddcc312d56187537e5"},"Navbar-profile component")),c("li",{key:"615e7c5bafc13f29035d4407d8646ba0e8e40ef6"},c("span",{key:"0a112bc403c2b143c9156bb81294180f385c941c"},c("ifx-icon",{key:"872618bf901b56459c31174b8948ce7daa6e1bfc",class:"check__icon",icon:"check12"})),c("span",{key:"5b4a1f1f90923849c0bed12b339efdcc5f720cd8"},"Mobile Responsiveness")),c("li",{key:"17898288b7313c8bded68b047f26bf58a8ecab53"},c("span",{key:"9555a7e297bc91577a0b613f6df9e54ccf8d2024"},c("ifx-icon",{key:"e2e8f63d28b05431f23f54a24a21a24d3d7a1646",class:"check__icon",icon:"check12"})),c("span",{key:"0aa79538709d268e4e5b4956774295630c7bd07f"},"Mobile Sidebar")),c("li",{key:"e109f85689ab4a600dd1efaa020cd432fd4e7763"},c("span",{key:"6fcd4f2439fdc30c2402c077605b06c400d0957e"},c("ifx-icon",{key:"4d5050ec9d5deac1cfeae1a8a00ea5de3ef20463",class:"check__icon",icon:"check12"})),c("span",{key:"4fccedd1c41f252c211a5371d75e6d1a19456537"},"Extended customization")),c("li",{key:"85639d8d258eda623d61ed8ca0f4bec8b15d1a96"},c("span",{key:"9fd1b4fd72ae23d3cb55214fc12b775ddccbf97a"},c("ifx-icon",{key:"150cad5099d36dfde29658d148b1f23a19173c3e",class:"check__icon",icon:"check12"})),c("span",{key:"e2e9f1eb3dfa60d43b9db0fc2e997b6eef148388"},"React, Vue and Angular wrapper integration")))),c("td",{key:"0a93fbeb0d24a3a20e988fe44a2729c89ed000d0"})),c("tr",{key:"64fc2f9f76166bbe3033524c6ffa8dddcf37c364"},c("td",{key:"8b5abd509dc9c51934253e2491c775ec100e2a1e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"51400b4119b8a6b86665fc4ffd843619de2e7fb9",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-number-indicator--development",size:"s",variant:"bold"},"Number Indicator")),c("td",{key:"757f3d224c2743af5881ec83012f3242ac5e1b60"},c("ul",{key:"95a9d79b59240e789e6b85293652e7f3c4b47453"},c("li",{key:"58a45f106d27a710e9f16d8c8a8e1036d44a48cf"},c("span",{key:"f9bc04195163452537192fe1d9196b9a238f0ff3"},c("ifx-icon",{key:"310fda6aad31543d24a5e8658061557ebb30807d",class:"check__icon",icon:"check12"})),c("span",{key:"ca7cd823e32db4fc5bfbd3a25261c52da161fb6c"},"Provides a compact and configurable display for showcasing numeric data")),c("li",{key:"1479d11d563383c4819d3f70e62321bbe9f99f2c"},c("span",{key:"d365df35c64793830aa8760409dcdc8d96ee8288"},c("ifx-icon",{key:"67ef87aaaf47344ae44f39bec014dc975077aeba",class:"check__icon",icon:"check12"})),c("span",{key:"0a35e0ca95c7f33528c41134ac4dc6a090b99d52"},"Adheres to web standards")))),c("td",{key:"5fdb482824e30925d51c51d1976d2b227e44bbec"},c("ul",{key:"1a63b3fb485f94b24da13532ae219f9184f1b6a8"},c("li",{key:"a4bbb7136889a8a879c76791167295e40acdfa44"},c("span",{key:"df127dce1c28639635be255285c8201e98b85435"},c("ifx-icon",{key:"b6ff1dad5b8731c90d6bc9d6d2bd3f4737e01d59",class:"check__icon",icon:"check12"})),c("span",{key:"0f5aa1f3612bf061c4b7a60d22b580aff8fd535e"},"Inverted option")),c("li",{key:"4d727507a6a4b020b7847e43960b0f5b079bcfe6"},c("span",{key:"04194f55b899ca0420434edb239c63a9451515ad"},c("ifx-icon",{key:"e90f5ab716eacc2aa62b70514d54557bfce45315",class:"check__icon",icon:"check12"})),c("span",{key:"4e29a4252b2d852fc6193a33258332bcf442a02b"},"React, Vue and Angular wrapper integration")))),c("td",{key:"a529dbbaea9d8a629b4cbc00b8f1191f43b5490c"})),c("tr",{key:"3194a31f3f346318570d2e6d4d4881394f16852f"},c("td",{key:"10e3d137c7af330a013366d4137f4363df015e28",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"78df14d62a208883a642538748b2865a591d3cd3",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-pagination--development",size:"s",variant:"bold"},"Pagination")),c("td",{key:"790e773356af3caa439616b5068970943fe4ac5f"},c("ul",{key:"9f33f4cf707a01b449a075039a765a2148c8d49f"},c("li",{key:"f5d76214788b16f911209d7356e77d6d7a6590aa"},c("span",{key:"f018076e58147ea1335f552b72c12e33a8c07ae7"},c("ifx-icon",{key:"462d681da78ae3c223a95141af5463d1c1388aeb",class:"check__icon",icon:"check12"})),c("span",{key:"f7e3dc68ae0fbd2ae9baa9b02664806632a08e4e"},"Offers a configurable set of controls for navigating through sequential pages of content, typically used for displaying large datasets or segmented information")),c("li",{key:"af2f94d5b60a8797f29e99edc0ae16a86b51d4a6"},c("span",{key:"c0738efc75fc1e6f9ad73c15016de7ef1c0b61b0"},c("ifx-icon",{key:"e145dce2eaafecafaf28b2a4364dd57faea5b337",class:"check__icon",icon:"check12"})),c("span",{key:"ad8db5cd22c3805b69bc28f4fefc2f0e11049c52"},"Adheres to web standards")))),c("td",{key:"1e5b2e6ad9a8f1e3c148f96db23f338b499464fe"},c("ul",{key:"343cc37c09235dd32a7d321083b05e2221e03e4f"},c("li",{key:"99dd2c718b3cdf2eb6bbc3239ac1d406e12f4c01"},c("span",{key:"1d544b9131ed3afa24475838a3f682fe39a3dfe3"},c("ifx-icon",{key:"371ce262f58d0f0b4f09a2f9fb3642bfe58272ee",class:"check__icon",icon:"check12"})),c("span",{key:"5650fa697410a89d7c6f12c4a84ce4f27a7faead"},"Extended customization")),c("li",{key:"43f2cf825d17968745e39ca1dd157b9710ffb2b3"},c("span",{key:"08a527c939a217687f87fd53725c5c4661262928"},c("ifx-icon",{key:"4c729bca60d7ea478f5c3ab2212d7fa3dc925967",class:"check__icon",icon:"check12"})),c("span",{key:"0fbf0f7588cdc662d3c29e6702cf32be5db3d94d"},"Configurable Results Per Page option")),c("li",{key:"66a57927e44c2bbd45ad7e5d595d185ae9efe793"},c("span",{key:"2e389a7bbdf6c7b641d63a6240340ae8f6c4e6bf"},c("ifx-icon",{key:"e939c54eef2db0ce4b2569d4c6fad797a27800fd",class:"check__icon",icon:"check12"})),c("span",{key:"279aa8fc61ff222294198fd72621d7ff626b0b64"},"React, Vue and Angular wrapper integration")))),c("td",{key:"d1bd99e216963cbbf034b832b850e816b8e66fd8"})),c("tr",{key:"c7affe1453159ff505dc445ccd9ba5f9979bd5b8"},c("td",{key:"078973eada04a5ad61caca8721d2ebc0414d87ef",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"7ae0ae244bef1f7920fd63e22a9bb84d0293ea33",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-progress-bar--development",size:"s",variant:"bold"},"Progress Bar")),c("td",{key:"84bacae874ec4fa719337aacbfc960e0baee44b6"},c("ul",{key:"56ca1c1a5d541e3fcca4c4bf520721566e86a77d"},c("li",{key:"19cb92727da1ef3ee0f58acac1fd5e1826d97717"},c("span",{key:"092974bd7423a62fb9636fe8e2b97be5f169e4e7"},c("ifx-icon",{key:"1fee4c5b88e711cbbce39c64609a1713910ed036",class:"check__icon",icon:"check12"})),c("span",{key:"6c7617ad0087694db4bb6c4aca770efa4daadc52"},"Offers a customizable and dynamic bar that visually represents the advancement of a process, typically used to convey loading status, or task completion")),c("li",{key:"0243facd21bac3f1b9d379b9642141b4164917ba"},c("span",{key:"b2d10131ddb84997c6a798e6f2d846e803aaafef"},c("ifx-icon",{key:"5d64888b10a9f18c910bac8a576cf5bdc60e4005",class:"check__icon",icon:"check12"})),c("span",{key:"f506750e2237953a4bc5c2d971a8dc01b95c6936"},"Adheres to web standards")))),c("td",{key:"8f0e0536456a586e176ff195fca33369bf005cc9"},c("ul",{key:"ecf4817ad9f05be30c5806d777cf6649a60fc212"},c("li",{key:"e22bc0fdbb28efdaba41355ac5b2c3df82dc9351"},c("span",{key:"3b704346c23dff97efa45ffca8cc59ec9dfd7c8d"},c("ifx-icon",{key:"063426166b0c9f4e43b08f2140246cc8cb324142",class:"check__icon",icon:"check12"})),c("span",{key:"34ec6e6cb3f4f988830c0ef7dc529578d6189291"},"Extended customization")),c("li",{key:"9871c1e1304f3e321ebf11475847ab5f08a4c1b0"},c("span",{key:"7a2ebadad182cd82659e6a252cb821e78ac2e57d"},c("ifx-icon",{key:"621f2e7105ee4727ccb726ba6984c6c60b163d9e",class:"check__icon",icon:"check12"})),c("span",{key:"f20bee689a3d522bfe33de1919673444c8f50f77"},"Show percentage option")),c("li",{key:"9ba23b958cb09779803fed978d8e4fcab3fe5d1c"},c("span",{key:"255a2a022a0d28dbb403b7bdf6894ba3765884b7"},c("ifx-icon",{key:"cbb119afedb063c07c0e4e44ae27e56fd42f5811",class:"check__icon",icon:"check12"})),c("span",{key:"8325778563a707874461b312b4e568897c3ec3da"},"Small and With Label variants included")),c("li",{key:"6bd6fe416ec0c6cdf38dd0c2f3c45cde1cac6681"},c("span",{key:"8e20348c758738558290a3bcf8cb8cba7f9a642b"},c("ifx-icon",{key:"f8a00abda0c9a69077d71c027873411f4c1b8d16",class:"check__icon",icon:"check12"})),c("span",{key:"a0553a56825961a5c4e498c61fc48401a8e7f162"},"React, Vue and Angular wrapper integration")))),c("td",{key:"c13c98df74a4ca2c814c761bd13896a4fb693d8f"})),c("tr",{key:"233758aafbee5268652f55fefdae962a2e436b2b"},c("td",{key:"b8c006a726975f76990c9f878b731efe7f8889ae",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"da95b7f2922d002d8419f51760c8e339da9df9b4",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-radio-button--development",size:"s",variant:"bold"},"Radio Button")),c("td",{key:"b3342120ae1098f5d6c6079277770a99be1a6460"},c("ul",{key:"74947c9bab786875ffc2153fd37bc961aeae97b3"},c("li",{key:"fd8586312fa52f0f3ce390c3a8f5a2e580ee882f"},c("span",{key:"d571313454de7545c2698a0dfac138b40b79aee2"},c("ifx-icon",{key:"d2e6175df9dfeb03c057b69feae6e9258da0d565",class:"check__icon",icon:"check12"})),c("span",{key:"aee5b357235f3e931f1f02af10c77b37743542c2"},"Offers a customizable radio input, allowing users to make a single selection from a predefined list of options, typically used for multiple-choice selection or exclusive input")),c("li",{key:"38525d0878db18563508204f232cdec9c8c18c40"},c("span",{key:"32d40da8f0a20c287d0ed96ea2338623b214ee65"},c("ifx-icon",{key:"2a5df82e2bff925a427941e35861b92284a57a92",class:"check__icon",icon:"check12"})),c("span",{key:"d4c10f65579b8288f06fc5301e9092acb1ecb6d4"},"Adheres to web standards")))),c("td",{key:"efa3762f96f8a4fb53b1c3f241905b6be36d1e7d"},c("ul",{key:"369556e570a2b9bdc2fcefe95a9e5757e4dc30b0"},c("li",{key:"5e52bb6ba6665440962a19f1bb51b103c0f0a806"},c("span",{key:"e96c4fb55744c32373a660d53d6d8ce4bfc7cd81"},c("ifx-icon",{key:"25ce3da7e7369aa6b890250189d74a90d8a406bc",class:"check__icon",icon:"check12"})),c("span",{key:"5fa4378d94ef242fbb072d067d56f28b704086a3"},"React, Vue and Angular wrapper integration")))),c("td",{key:"ff6c38ddd7a8e2c155bed2d189576f7e5ce7f147"})),c("tr",{key:"b8e0357c3f768b887c21881e1074451a9b36693a"},c("td",{key:"2147507f7d83687c7670ff33dde23762e2a7c14f",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"6c033aa6f561ccfc1a96188d63a2409e22b8ea50",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-search-bar--development",size:"s",variant:"bold"},"Search Bar")),c("td",{key:"552a7e2df5774e90e773a10c9cb582193dc2a90d"},c("ul",{key:"f17d64e77d1afa61f92aa41e18c81557b4762894"},c("li",{key:"07842e5d9d6b73ed661c404949db3a785b01adc7"},c("span",{key:"1fa9c1bb64c10158237bafda67d67d64793006df"},c("ifx-icon",{key:"e25e28e446fd38ddc83170ebe504657ee3c6a2d3",class:"check__icon",icon:"check12"})),c("span",{key:"88ac49d03158a8fa29c2cf2a7b3f6145d8453e46"},"Offers a dynamic and customizable input area that allows users to input search terms and trigger search actions, typically used for querying and filtering content within the application")),c("li",{key:"8947b901923b16224f5488a251a6768725fccf81"},c("span",{key:"c8bd908c2d1c13d06337dd1a6a1c59e53f7f7771"},c("ifx-icon",{key:"a66e5958c0ab3cbe34f986cfde6a43692c0184c2",class:"check__icon",icon:"check12"})),c("span",{key:"e6bfb800f38006f4bf17b4d57026faf7e927bf06"},"Adheres to web standards")))),c("td",{key:"a6d7d46410865e860600689218eb8ab055936f19"},c("ul",{key:"39ae665c700b9827bed7297b7ec4c72d4834656c"},c("li",{key:"b9d427da064a916381f122e0bf12d877e36c44fa"},c("span",{key:"ffe48b3d120dfe1f112e1d6316ff6e458090df71"},c("ifx-icon",{key:"b708d0cafc7dfd0ff477337322c009557678dd5d",class:"check__icon",icon:"check12"})),c("span",{key:"21fd3228dfad6b933b330db7465f0d30045a9802"},"Collapsable option")),c("li",{key:"dfe0eebad51fc7962e1cd790907fa30cd828a833"},c("span",{key:"dcba8762a6a0a453fe69a31819af5fc30ee70f05"},c("ifx-icon",{key:"17b81ded0c959e336e729c4768f8d5ea498260b4",class:"check__icon",icon:"check12"})),c("span",{key:"16fd14af083d5845f4d9f1e319132414c8e1d904"},"React, Vue and Angular wrapper integration")))),c("td",{key:"09f9b648652de11e932c796aa6be74203df0ee24"})),c("tr",{key:"01f1e239e30e991d94858352c9db7300a82d469c"},c("td",{key:"3a4ed4d98ee3dfd441e84eb6a6cd00760cd91fe7",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"458e868086e86e9644f7930e4654118db2272669",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-search-field--development",size:"s",variant:"bold"},"Search Field")),c("td",{key:"0c7ddb9eb8e661d653d819e22cafe73b4b70a310"},c("ul",{key:"87f9ed1ba004272a206945626d7a4da170ddd671"},c("li",{key:"13181adb59b7851655aa32847f3bd4d167df8d6e"},c("span",{key:"b44938d15d65953fb393cb2ba09a0bdfebc052e9"},c("ifx-icon",{key:"b12fc71096aa43143a1008adf8a489f97755a542",class:"check__icon",icon:"check12"})),c("span",{key:"17137faad189e7f859bdd4b753fb51fb1f6204a8"},"Offers an interactive and adaptable input area that allows users to enter search terms and trigger search actions, facilitating efficient querying and filtering of content within the application")),c("li",{key:"11a4e3332c55dd5b60d468a1e932a857229fbd84"},c("span",{key:"89c0f9bbc2744428e07247d774415b6e25ea4567"},c("ifx-icon",{key:"45be5bfc6006a9017a630c4ea15cf1a889c5e2a9",class:"check__icon",icon:"check12"})),c("span",{key:"47d321d060452addc3abc1adc0d08e7d0239e6df"},"Adheres to web standards")))),c("td",{key:"898745fcf1483ea6212f0b8ab4fe11c0d4450f2b"},c("ul",{key:"a0bab411973f4f31ee876e3b25dcb2159747cd31"},c("li",{key:"99168fccdf8bc9bfdac90ebd1b29b9142794fb33"},c("span",{key:"5dbdfa121db3d2383818a7318d56127f3acd00c3"},c("ifx-icon",{key:"7ec330c19ee2cd2af2d5334ae872ff01414508ad",class:"check__icon",icon:"check12"})),c("span",{key:"5688dfc2c87b512336db74e7c05a00846faf4a45"},"Show Delete Icon option")),c("li",{key:"fb4d1eab4da5e085fbc4065542e6c7ef809b3daa"},c("span",{key:"74eb6add9a49dbd9c5155984f6c7bb8e3d0e0b8a"},c("ifx-icon",{key:"b85528ebea9c3557c961fccc26ae20da5db83f20",class:"check__icon",icon:"check12"})),c("span",{key:"9d8566052a1dca5a05283ff20a056930081d4d41"},"React, Vue and Angular wrapper integration")))),c("td",{key:"8ca4a6fcf92ac79ba31ca008748f097d6cfb7f2b"})),c("tr",{key:"0f2f12cdffc407080c27d278e95a53f03260903b"},c("td",{key:"b08357c06e946f7184b051633eb30eda09d19438",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"b20824d016e90c97b3d084085ec9a724a376c245",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-select-single-select--development",size:"s",variant:"bold"},"Single Select")),c("td",{key:"3f48f6e87f7d00e9cd9c475a6187c565fe748b24"},c("ul",{key:"1e1fc70a882d6fdbbd6cfe3decc730c47e93989e"},c("li",{key:"b390eae8b437981ffa98e476dec4fa9c29198517"},c("span",{key:"766a6e895b23d8bb0ecb3fbe81e120d90c68efa4"},c("ifx-icon",{key:"9ff66298da43607271b075b83af92afff9cc4519",class:"check__icon",icon:"check12"})),c("span",{key:"118e30103e45eb46be71ba6a19787ea6e9dc4e25"},"Provides a user-friendly and interactive dropdown list for selecting a single option from a set of choices within a web application")))),c("td",{key:"f588591928002c158773d8b8ea0fcbf7e1386483"},c("ul",{key:"a78cb1274e76e35ce096022e9dfec4fb8753aa14"},c("li",{key:"7f74c768bf2771c12d2292486f896e389a433abc"},c("span",{key:"135fcc103d4d04178608cff8f33b1aac7aca823e"},c("ifx-icon",{key:"02453d0d907f5ca86cccfc179c69fd566f6e5155",class:"check__icon",icon:"check12"})),c("span",{key:"3a683e1b0f108e26c654800d2b5bfdd9359b2a82"},"Extended customization")),c("li",{key:"e3584a80d2d32fc55b47944b6d5ffd63cff0f6fd"},c("span",{key:"520dd7322e4aef495f9721916516f611da67b16a"},c("ifx-icon",{key:"86506ea52587ddea577a060e783e36f3babb2f18",class:"check__icon",icon:"check12"})),c("span",{key:"5d7d158840eeac72d025ef76f4c9f83a6dc56c92"},"Option to enable and disable the search")),c("li",{key:"9e92809bc41ecffbba976b7407b0bc1ffcf0eaa2"},c("span",{key:"ec102f12566e69be3304594c1f4d214319bc7e81"},c("ifx-icon",{key:"dad3f936bc41d14e83591f56a2341813189bdaef",class:"check__icon",icon:"check12"})),c("span",{key:"f0cbcc3d5723e937aa2c39d4401235028ed839cd"},"React, Vue and Angular wrapper integration")))),c("td",{key:"f3c151ba59834667d7b3d544e4e6f9940c952bfd"})),c("tr",{key:"5e4f987c5272579a4bab2bb484b8d01a45ef5a1a"},c("td",{key:"6c7afec441ea703780c7a54b9f8d126c0db1f9f4",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"0ac6ff31f7effdd36d484f392bf020c1577e78e4",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-select-multi-select--development",size:"s",variant:"bold"},"Multi Select")),c("td",{key:"96c61bd31a3c5e459b4b79874cb740bcf6232856"},c("ul",{key:"b8dda46256fd6747b2baccce4927c91de7497e70"},c("li",{key:"3c698276dc11ae7a990b2e37d82848fdacad4429"},c("span",{key:"398cfddc187aee306c34c4c7587e34c948f9fec5"},c("ifx-icon",{key:"35e262204da1407b7d805bce15f907e29228e5a4",class:"check__icon",icon:"check12"})),c("span",{key:"f7366b690d633089bd2ed89f5b2c51f8abf278cc"},"Provides a dynamic and customizable dropdown list that allows users to make multiple selections from a list of options")),c("li",{key:"82386cb2498b0a263e278a1b2b8ea9189e5b86e4"},c("span",{key:"05ad27748c07b7a261dbeb2d58923eac6dff8479"},c("ifx-icon",{key:"ef1305db4682aca0ccbd42b8ba91f5139949a294",class:"check__icon",icon:"check12"})),c("span",{key:"39f9edad06f06dde95c007cc74b2a08afae1ed1f"},"Adheres to web standards")))),c("td",{key:"da869e7dc8313d84af4b9c76d85c185570f00283"},c("ul",{key:"67279e058817a3587c1c375dc722d98eebe4d741"},c("li",{key:"5fb83a4450c7fb7327783f7335f2f027a14016e0"},c("span",{key:"1cb1c9d1343a4210b5918f9f85d9914c34a26012"},c("ifx-icon",{key:"57f6acb0c8d7be54e1b1700ea18c72de29f7b397",class:"check__icon",icon:"check12"})),c("span",{key:"7c10fd7a72eecb2d177e15a487003a053491139f"},"Extended customization")),c("li",{key:"ca3019e1bfa559ff7ffb8c615554adb10e87369a"},c("span",{key:"933d84b9a2e5bbdae7e35bbdd75795d53df8137a"},c("ifx-icon",{key:"313670fe4e8e33855a695d9bcb5006e258c05a20",class:"check__icon",icon:"check12"})),c("span",{key:"2b28773d8737718214f6fa3d8b19dcae9750f0d8"},"Nestable options")),c("li",{key:"bd6dcb8ad05923c377c842279b9ed86bb715a46b"},c("span",{key:"7bff5af5ff3eb7b3cd5951a9917b619f9d787c1b"},c("ifx-icon",{key:"2a0f5cf65d6cc55046df7c9fa8c0d89f17c7d368",class:"check__icon",icon:"check12"})),c("span",{key:"c15a459eb21d8fdb5979bfe7318db050fd08f1bc"},"React, Vue and Angular wrapper integration")))),c("td",{key:"6b1709462b13b6f684aea648d0ab23cb1a992e02"},c("ul",{key:"f2a5d785eec097e66bd29cadbc61c717e444543d"},c("li",{key:"1f96f0e47fec7aa7f7b69d5dada9e4a876aaf1d7"},c("span",{key:"4d7f91ea66eaea14dba623361b3f9fb6cf317065"},c("ifx-icon",{key:"b7340bd387793beb375d9d26ac7c219f474c9e08",class:"check__icon",icon:"check12"})),c("span",{key:"b81d3ff00f3088998b83a33304e82b6c5fe90f7d"},"Option to enable and disable the search"))))),c("tr",{key:"566356213a4f7e5382ef3e47bdfc627e01c2800c"},c("td",{key:"9bb95631eb9b4928e24367e5b982ddbb98ed31cf",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"f9db85eb205f25a86e08d5f5465f9ae46786d71c",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-navigation-sidebar--development",size:"s",variant:"bold"},"Sidebar")),c("td",{key:"21f68d99d1625dbb95664f902648dc549b1d3137"},c("ul",{key:"f90200cc8cf133ac2b923fd0eed695fdf80a7b52"},c("li",{key:"fd9215713b0d376c2144070e91343e1968e0237f"},c("span",{key:"50528c6857e9d93d94c061c13085858c7505e9e5"},c("ifx-icon",{key:"145bf59084646a0b708daf5fd9b4fe3b41897d86",class:"check__icon",icon:"check12"})),c("span",{key:"b1513078417de95b6abd42852659f74cc9dd4c17"},"Offers a configurable and collapsible panel that typically occupies the side of the screen, allowing users to access additional sections, or menus while maintaining the main content area")),c("li",{key:"a3bbb8f433dd109f39ff047c2dc1f76dc7eb43cb"},c("span",{key:"8829f2f48475c0fb1dc546d387cb0748de631af3"},c("ifx-icon",{key:"52736aca29a81cb35fdce17e6a0c11ba6c8ad682",class:"check__icon",icon:"check12"})),c("span",{key:"d28f8f640b822d99527d74a3bc31e3fc668c8127"},"Adheres to web standards")))),c("td",{key:"66a2ff68392a638922751f5b0c4e4ad4f5f70e63"},c("ul",{key:"a6a45104fae370c013b454bf62b9b7f36a51b0f1"},c("li",{key:"0a89cc1bc2d8ea34b268adfcff6602fcfa2a8a24"},c("span",{key:"a7ad65e3bc2150e6b207f9186bf6ed5f84896390"},c("ifx-icon",{key:"be6dbcfde48313f8bef346f7e337c2308fb61c19",class:"check__icon",icon:"check12"})),c("span",{key:"cf5b1cd24fb69f77c381b811c7a38075eef4d190"},"Extended customization")),c("li",{key:"b524fa2452f7b46731b0457c02ca5ad5e9ff8cd3"},c("span",{key:"fec517e567620de54580cb179ea71e8f49236e59"},c("ifx-icon",{key:"3ffd815751650396191189be7e20ec30d5072255",class:"check__icon",icon:"check12"})),c("span",{key:"c4d746f9b5f4ffa9131fb8d919ca13cb27b395b9"},"Multi-layer nestable items and menu")),c("li",{key:"5ae4c28e8d7ad9e050c286d8011fcc4bef4e84fc"},c("span",{key:"8b943f3ab7ea2f43dbc9e99244e7813b65b1b41c"},c("ifx-icon",{key:"43658c80c91fb79475e2f2c7d238bfca3959767a",class:"check__icon",icon:"check12"})),c("span",{key:"f3559e51e643ffdb29283e10a14ff23df803e9da"},"Initial collapse option")),c("li",{key:"29ea7f312e2ef8192a21982deba4b16bff5e2d89"},c("span",{key:"470a1139c3706eb5646825b24cf9c12953842fc4"},c("ifx-icon",{key:"5cdea659a7585a27d7b3a9ebe0fa32a2c2da5e85",class:"check__icon",icon:"check12"})),c("span",{key:"922d523df524c40a543c9968ef4d40b35cb11d7e"},"Active and action item feature")),c("li",{key:"65ddcf5d5a2c700cc4cd4e31fa7fbcdac81bbb29"},c("span",{key:"a87ef4b4fae3c5b66e813bf21f103ee514704953"},c("ifx-icon",{key:"ecdfc93b6ce9315aa8d9217ccf661a8c77536436",class:"check__icon",icon:"check12"})),c("span",{key:"1734b7fd923942d51ffd503fb9738ca4730b22c4"},"Number indicator integration")),c("li",{key:"5956ad0cfd515ff829c8bb2fc46468dec1a20322"},c("span",{key:"4a43396952770bce229080ee81af29011b7bbf02"},c("ifx-icon",{key:"bca6880f850e09fb7e10b833d29034a305ac7fd8",class:"check__icon",icon:"check12"})),c("span",{key:"faa1cf92cb4d10491f3a9049e181b6a25641a218"},"React, Vue and Angular wrapper integration")))),c("td",{key:"446d6675fec35c3158de0b143fbdb8feecb36a57"},c("ul",{key:"a66fc84d0b55f897f3105686fe6ce8f49a7bab28"},c("li",{key:"5cedbb5f9c0305af4d1744ceda968def56cab1c4"},c("span",{key:"d2db6f9177883593105a802ba2e2ebcc0756a3c6"},c("ifx-icon",{key:"4e92d56985e93f6bd90a443d7da74e6b820fec10",class:"check__icon",icon:"check12"})),c("span",{key:"948558ea5263113425740646adb8c40450fd1bc7"},"Removable Footer, Header and Logo")),c("li",{key:"b3d2238d023bd0eeafe79da974d7edf51bb2b12b"},c("span",{key:"a010aaf81cab24cac72dd7b04338bbae7589cab1"},c("ifx-icon",{key:"439d38a8551c605c0cd0cd884003740d34edaf47",class:"check__icon",icon:"check12"})),c("span",{key:"f3fc02091bdff127ba6002bcb9b06854673d1cb7"},"Removable and customizable Links"))))),c("tr",{key:"731f9c107f68ce046bfc643cd8f9612553625d7b"},c("td",{key:"f36625b35500841a5a1f52e6b5448d6997dd8959",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"6c3b7c77d131b23b592b2a085a063de962ae9720",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-slider--development",size:"s",variant:"bold"},"Slider")),c("td",{key:"51cfd978caa6770137cab28e7b19de44e2f31264"},c("ul",{key:"fab737865a90715c701ffed96cdee900f298095f"},c("li",{key:"03326734008f1d21be72eef90084327b7067d5e9"},c("span",{key:"846cf68fe4d7f0c8301f9a1ed4feb484ec2e02f0"},c("ifx-icon",{key:"c247ef9dc569629435dd0fa9e228daa9f4e1ad67",class:"check__icon",icon:"check12"})),c("span",{key:"d2065c569a266f3fceb266b2534eb93a14e0015b"},"Provides an interactive and customizable input control for selecting a value within a defined range, often used for settings such as volume control, data selection, or numerical input")),c("li",{key:"32732b8efcdf79fbedc768ad36fc2586c9c4a7c1"},c("span",{key:"41349166bba70a23e270230bbf47c6965bf13bda"},c("ifx-icon",{key:"521f71c2112d7c89f9e2b386d1251aac432a8da1",class:"check__icon",icon:"check12"})),c("span",{key:"498b3455421febf5f769b31fa97992a388d4d25a"},"Adheres to web standards")))),c("td",{key:"1dab62db3535ff6cbbeee3822b5ac05731c72f91"},c("ul",{key:"ab2f60f46f1eca3add0c4d15fa7717debf7e255a"},c("li",{key:"b75e3f78f33d57073701d3747bfdefd25d3c9cd7"},c("span",{key:"dc522531712a7d62594543fd6a9507460009396c"},c("ifx-icon",{key:"c5d5056d4efef30dbb447339f4ed40e0095260a4",class:"check__icon",icon:"check12"})),c("span",{key:"f744d318b50dede7714471b28ad02eba9944bd2c"},"Icon incorporated")),c("li",{key:"780cad3823bb8dd13c22e3582b6abb69cb555bb4"},c("span",{key:"782e1146d33f4cc7d97f39efe19cdd8b4e44d11e"},c("ifx-icon",{key:"6e5a25d9bd78d75c37595f5bb40e39ad85acfc8f",class:"check__icon",icon:"check12"})),c("span",{key:"500989935e1210bfd3d3ff1b52caecf94ea6f31f"},"Percentage variant")),c("li",{key:"ad66343797114ba3c0a4fcc2220ce263505d1162"},c("span",{key:"3970b2de21de1c3aaa65f3a335eed602d25f4e90"},c("ifx-icon",{key:"8a8b2199d91d8e30d2c7da5fa45c507f08be7c40",class:"check__icon",icon:"check12"})),c("span",{key:"637741b7190f64e2bf0fc49e509c6aadddd06cbe"},"Text variant")),c("li",{key:"a68dcc9adbeeb5cd159ff7c948fed0810d3590c9"},c("span",{key:"825b1a5021bf41472688864275b11c821af2e1e7"},c("ifx-icon",{key:"ac454685e4d7527ac25c014d6f53b19cbab0f6d2",class:"check__icon",icon:"check12"})),c("span",{key:"caa721ac5fa218dbd6272c4c28c64e96ca01f34c"},"React, Vue and Angular wrapper integration")))),c("td",{key:"d2685a74df5aadfa28bdec98522ecb3863058cd6"})),c("tr",{key:"9789b61cc4fe3b3f13e0d0b74428d2eef55404f3"},c("td",{key:"c3f93ffea7948099741868e97dac9fb88d68c4cc",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"a7e80ee8736df65f35151ae89611995ec490311f",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-spinner--development",size:"s",variant:"bold"},"Spinner")),c("td",{key:"552e6fd7c442fe0346bd7df72fc9a83511743d85"},c("ul",{key:"625b4d9a82abd401507498d5ff06cfb05a5a854e"},c("li",{key:"599a13f6e516c30587a7231b14f0952526cf7a2d"},c("span",{key:"cd9b78132ca3836fc528f92f9ee7d6edeb4045f8"},c("ifx-icon",{key:"6940285835a01ae4a8ee641a6cd121989af7f90a",class:"check__icon",icon:"check12"})),c("span",{key:"538b5ddf8b1f5b3b29ed96e27cf017ef0f2df8f4"},"Offers a customizable and animated symbol that conveys to users that a task is in progress, typically used to signify loading content, data retrieval, or pending operations")),c("li",{key:"0ccda6f1d4c3275dd5ecddccc9c481663a3d85bf"},c("span",{key:"7e440b6ca355c88598483f7de2ec91efcedc5e81"},c("ifx-icon",{key:"98f421f1303514f028f184ddc160fd1b36aeee2a",class:"check__icon",icon:"check12"})),c("span",{key:"b3eaf37d1a0101f5f90c636b70741ff2def39d2c"},"Adheres to web standards")))),c("td",{key:"d32441755e7e80bc7b1cd14cf0a6529a7a4175a8"},c("ul",{key:"b6e0f6ba1c7898fcd3d620b831b993ea9009aa04"},c("li",{key:"d42483c443d67c6499944e15a6c28de4325a7d38"},c("span",{key:"bb91417b6687eb90d040099a7d80113857efbee7"},c("ifx-icon",{key:"11575ffd2b9276427efd85e71f813a606a1d677a",class:"check__icon",icon:"check12"})),c("span",{key:"fa7e58af2078862b5ee02d9d66518cf9dda7d6e1"},"Brand variant")),c("li",{key:"88d42e6697d3588e0a44b52e81c050db5d5760e7"},c("span",{key:"c68e3b885c518d8eb7b2bda3a67ef0db8c14b5e1"},c("ifx-icon",{key:"ddac16dd1b74704ac8fb0926315a6b978e0bc21d",class:"check__icon",icon:"check12"})),c("span",{key:"6e449c613c65d147d4e806ddb02e687f367de761"},"React, Vue and Angular wrapper integration")))),c("td",{key:"70eaf515c5d86c3b494d15522301c8d20cee55dc"})),c("tr",{key:"d349a5c3b2f06e06b39b9ac8a34084a0063012e5"},c("td",{key:"483fa877d61029b664fbb1b2ad23d81409c7e4de",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"9fa43fa419de2395bfa949ab656f09b953c74a3b",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-status--development",size:"s",variant:"bold"},"Status")),c("td",{key:"ec41499611f6b969abacf8460203b937960740ee"},c("ul",{key:"15a155c25a415dc3d3d1939a332157d4dc963ba4"},c("li",{key:"2e5a5016dd9d2eeb1c43e534466c460197f3d978"},c("span",{key:"8326b0174c3f2ba89976539d16646637aadd3bf1"},c("ifx-icon",{key:"cf0c1f37247310c2541fb6aa28b9abab50dd66e7",class:"check__icon",icon:"check12"})),c("span",{key:"0390d5577dc7a8b3d6163bf706112fd83b9e3b6d"},"Provides a visual indicator for conveying the state, status, or condition of an item, process, or entity within a web application")))),c("td",{key:"92827439efb185ed527d045aba6170bec483e601"},c("ul",{key:"23d50706268233d665eb089bccd322177a914571"},c("li",{key:"8c4389a34e898d41365b36ad00c64fb1310a69cd"},c("span",{key:"b500596f670a136e52be9d6a44a734fc28814e8b"},c("ifx-icon",{key:"cdbd627a567a25a8fb501c24871f4690ce4e46b2",class:"check__icon",icon:"check12"})),c("span",{key:"d7eabfc71704b1564c6617f8eca7d6737b53b19f"},"Ocean, Orange, Grey, Light-grey, Red, Green and Berry color variants")),c("li",{key:"b34e5debdab5c4ab9aaaad9dcb03ce91aa474e2d"},c("span",{key:"b39cae31aabe8d114af543ed48429e8c18a8f7be"},c("ifx-icon",{key:"49b3f237663524e25e96c3a36e1271b2044ba437",class:"check__icon",icon:"check12"})),c("span",{key:"fbb2436097a122cc9596fc73873311a7c7b97cc9"},"Removable border")),c("li",{key:"4ab34dc3960e0b9b3b2fc4f651e21b0809695a67"},c("span",{key:"bb8a2987e7df67b0e3613c2e5b746475502ada7d"},c("ifx-icon",{key:"50b080dfe4355a9257bbed1e343c49993fbed865",class:"check__icon",icon:"check12"})),c("span",{key:"f499e0a8138b4a4bbb53a40ab82233d106b2f731"},"React, Vue and Angular wrapper integration")))),c("td",{key:"46356c9d03ee5fb3e0db1322ae1367e486665635"})),c("tr",{key:"8dd110303a908b567a15426fb8265d154b35cddb"},c("td",{key:"6b3f16ca47c3927a9796623a83a965b8a8d63824",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"fa85136aa3f858d03dc97326502286cabbb3a86f",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-stepper--development",size:"s",variant:"bold"},"Stepper")),c("td",{key:"5fbf4bfc80dfd5ad0f5eaae8657fcc3bf856afe3"},c("ul",{key:"18df3fdecd319fba90698d152479dc9c33a62dc5"},c("li",{key:"8ec3d8e7e35d9c0d8612a063d4750281680bfc60"},c("span",{key:"0a121e8c0aa07d4bb195433414805ab66dc3a5ed"},c("ifx-icon",{key:"84529c2565999038606520eaf664d990a4b211d5",class:"check__icon",icon:"check12"})),c("span",{key:"a5502541ef52780fc14efe223f852581c1bbe2ef"},"Offers a customizable and intuitive control that allows users to navigate through sequential steps")),c("li",{key:"546465e47313273ca27544f9731f8979271b6952"},c("span",{key:"2e66b66ef1bab7abb678df71875ba0f161809a4b"},c("ifx-icon",{key:"469b28db10ef8a95b99b054524a228277cd6a237",class:"check__icon",icon:"check12"})),c("span",{key:"84642614de147c373f7b0ce74d0983b5463f154f"},"Default and Compact variants")),c("li",{key:"6b83f85dcd7fe1082d2d8944f9b8e7292c519cd7"},c("span",{key:"f4c0db30b60d0b8fb6c7efab416f7dd17d20dccd"},c("ifx-icon",{key:"76014e809b7e1bc0731ef28e52b794f975987bdf",class:"check__icon",icon:"check12"})),c("span",{key:"a795dccd3bd1ea147b09d071224a5366a8f55c76"},"React, Vue and Angular wrapper integration")))),c("td",{key:"733b5cc5f2f7cb9c6696076efe11ef6bea0f9899"},c("ul",{key:"e08d66b520fe9c9ac3e5aaf99600ce3ff6bf7f24"},c("li",{key:"ff9c2491ddcadd6a871e000a432e7257bb1d36cd"},c("span",{key:"846665a6465f4e21250cfdc9649ce059b781c088"},c("ifx-icon",{key:"c461aa5d4ec539108987577fcff66ef0d7974a28",class:"check__icon",icon:"check12"})),c("span",{key:"29f7c9af5c40868f463b89fc0441154a72f408ad"},"Vertical variant")))),c("td",{key:"47b4a3554d5c4f397b79cec6018e58760638a387"})),c("tr",{key:"4d79ad9e66d7c62a593ce320224eb65e30991cde"},c("td",{key:"978b845395ddc51b3d3ea8f54d470dd33be6b36e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"48a2571a820152fa61d8a466cfc55e5378faff4e",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-switch--development",size:"s",variant:"bold"},"Switch")),c("td",{key:"496ced1f0f70ae1051b29714a3fbf522acb84f07"},c("ul",{key:"bfb7e624867e5d94d1e6de45070929608a308a1f"},c("li",{key:"3a0270a473930e652f56c97b5879191351cbbc86"},c("span",{key:"95b6c049b1077f01b695ba94f8a12f31dc5a94c7"},c("ifx-icon",{key:"31b2e7b8f3d2e4a8298d2c87c36e893371c7150d",class:"check__icon",icon:"check12"})),c("span",{key:"1b393b4abeabddabfbca8becfd1339524dadb4cd"},"Provides an interactive and customizable interface for toggling between two states, typically representing an on/off or active/inactive status within a web application")),c("li",{key:"0ef1488943e4ade871e9a8bc89f804d2b94b2acf"},c("span",{key:"7311a302dc3fb05db2875c6e6574b57abd45a84d"},c("ifx-icon",{key:"98296b82fb11d08a90f60c4b7827075e81285bee",class:"check__icon",icon:"check12"})),c("span",{key:"c3aa808ae655528855124e4f67cc740d5abebd0b"},"Adheres to web standards")))),c("td",{key:"c8efd44eea7ed315098329c3146eafa468458f21"},c("ul",{key:"e65ff7874e88f37f58f2c0e318fb53e9566608b0"},c("li",{key:"32ce6b4344a63f64f73b52ec6f17f6833545c306"},c("span",{key:"4afc4505e7c7d674e605958e4da438b26816aef7"},c("ifx-icon",{key:"39abe676eee2f18d9b0c43f86d7a75548849f668",class:"check__icon",icon:"check12"})),c("span",{key:"29a1dc64c7597a009ae714cda231011a1c059ebd"},"Incorporated label feature")),c("li",{key:"6d198ac21f81f2cd4a6d2f8c8bcda516c24644fb"},c("span",{key:"9639e705e58f697e01c58936f2b1567ce1440a4c"},c("ifx-icon",{key:"95bcddc4396d4f89d0b7e37b02359d597d8496a8",class:"check__icon",icon:"check12"})),c("span",{key:"ff5bf90bc38af10c18779fda577b68c9901adb21"},"React, Vue and Angular wrapper integration")))),c("td",{key:"deb3949377b3a8d3f441e63a581c35d10a3acf27"})),c("tr",{key:"14b631cca12c8e9a36f7d119cf13b64d8c6cbe3e"},c("td",{key:"f918456f7f5be25c8c9815763ba82480ab2cfe32",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"d3f8e14487e134d3e4733406ddb04bbe6488112b",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-table-basic--development",size:"s",variant:"bold"},"Basic Table")),c("td",{key:"51e394cde718fdc0ca0ea840bb83d608f8f8c8c1"},c("ul",{key:"ef7a984aaacc08aa1c6ea52ad81c99dfa02e7f65"},c("li",{key:"29de1c6673724ce0529fd18613907ace728fa7a2"},c("span",{key:"6c9c62de043646868fdadba845fd67092f18c509"},c("ifx-icon",{key:"52dd86a047d82aea4347ea58af86b6dec5c81407",class:"check__icon",icon:"check12"})),c("span",{key:"cf3993d17421b630510b75aba196c93e2dfd302f"},"Offers essential functionality for organizing data into rows and columns, allowing users to view, sort, and interact with structured information efficiently")),c("li",{key:"567fc4f4810baf0b87cd8af5687bea0d628b22eb"},c("span",{key:"7163253817c0dcb483cf38771d1cfcf6c55d9076"},c("ifx-icon",{key:"8f4ae5fc7ceb285223b9832c9fa9a0f98b090160",class:"check__icon",icon:"check12"})),c("span",{key:"2604c0b5b52dfef1851c72378568787da87f8f25"},"Includes basic features such as column sorting")))),c("td",{key:"7a6ed2b46cdb2768abdbe877042191cbc0a077ca"},c("ul",{key:"78cd0d5283555d7c833a3592f659aa49c51e12f2"},c("li",{key:"d8122abbf1436b8137dcb27fb783000221394248"},c("span",{key:"e24031426d69666bd31b6a9f333d13899e011e54"},c("ifx-icon",{key:"cb926b616118d924814d366937490475a213051b",class:"check__icon",icon:"check12"})),c("span",{key:"7389068722cb69ae5270073d6dbbf71bd325d805"},"Compact and Default variant")),c("li",{key:"d762674338d703cb0770a80766db6a1c4eb6b57f"},c("span",{key:"23940d27fee2e1a2ebdd64444c0354ad57befecd"},c("ifx-icon",{key:"72aa0b1a0b712152aeed8e0fa62bf2ed8e8db44a",class:"check__icon",icon:"check12"})),c("span",{key:"165762d8c819b4725900cc8c7b106f6c378699d4"},"React, Vue and Angular wrapper integration")))),c("td",{key:"ab43e1a4b00e4ed4203cb203c6bcfe8f5a0d9b1f"})),c("tr",{key:"358ab26b99aca8e5e14a92d68c3448465f2d4e50"},c("td",{key:"9d5cc02809d8695127dd80e9d4bb4af45830408b",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"796763563edd80dc276abf97c88537ff1d0a9217",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-table-advanced--development",size:"s",variant:"bold"},"Advanced Table")),c("td",{key:"da76a581a15c0136925d8eb184754dd15d54537e"},c("ul",{key:"d3193bed1aeb4b4e57f1a8f0f4a0f6915f0cee18"},c("li",{key:"d9e9feefb257b825eadaaa4a7acae635c3978cd7"},c("span",{key:"8b5ded84c10aeb0246858fddfc6456bb8aaf516d"},c("ifx-icon",{key:"e6481c4e8454a65e9a76fe2f67c08c3a99906f20",class:"check__icon",icon:"check12"})),c("span",{key:"35c2f2d74f0c35dbadbd6404a1b76be8bebc4d98"},"Pagination")),c("li",{key:"f219fd2b8624503e9024abf50f84c0d8a4590bea"},c("span",{key:"fef59126978b441c8f07736e709718245609abcd"},c("ifx-icon",{key:"bcfe24c38b94bfc0ce31e9f83e88ad86128bfe1f",class:"check__icon",icon:"check12"})),c("span",{key:"00a89f1bfde990e7216b1d83c22f33a76f19be89"},"Sidebar filter")),c("li",{key:"dfaea5c6fb27e574992913f18ea90c8b8b7bad05"},c("span",{key:"890efd1676fa6f2efdad9a5efafce30787f17b1d"},c("ifx-icon",{key:"7c075dd5e83fad58e6185bef2f03fdd0be289a40",class:"check__icon",icon:"check12"})),c("span",{key:"d2dfc30829a1f93e8bef1806ad1fa17716087b2c"},"Topbar filter")),c("li",{key:"c6ac062dcd47a81360dddd55fc09bc1dd5b05c0b"},c("span",{key:"56610a1fc7ec6bfb98dab05545e25811100f8268"},c("ifx-icon",{key:"1c0f361c28d33ab94235f9f6785795bfdc29413b",class:"check__icon",icon:"check12"})),c("span",{key:"ac82e51e39807b76a5bab9374033db86978da4e7"},"Nestable buttons")))),c("td",{key:"52855a3c71ae185770ad4dbfaae4d52aec704a15"}),c("td",{key:"8d0ad2296f1e1016842ddd4c83871b5e7e4b639f"})),c("tr",{key:"7b4b1272378181ca8957ed975c05662c4c3ea1cf"},c("td",{key:"11787b4b844ceca94fd28f9bbfa40bf2bc35e014",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"3537dad2ab92353b458679dd1d39cfcd1a907d6f",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tabs--development",size:"s",variant:"bold"},"Tabs")),c("td",{key:"230dab3e292657a846771f54bbae6a8c733c68cf"},c("ul",{key:"01dc10634b96fa84a8ba181eb5222d751f722c30"},c("li",{key:"5af5059dc520fe1c44ae916428508a03d1c644f2"},c("span",{key:"f7e927c36ecdec171a8dbd1e7269396ee8039c2f"},c("ifx-icon",{key:"3819fd0623dd9b088717e282b310c08a9c9434ae",class:"check__icon",icon:"check12"})),c("span",{key:"58ca2381f2aee08a103def79648c4d209fb1c07f"},"Offers a customizable and interactive layout that allows users to switch between different content panels, typically used for organizing related information or functional sections")),c("li",{key:"ab84311a9478d8ca7b067cf68ad7b809b5ebf11e"},c("span",{key:"63cab6af3afcc4d109e5868f171dc3e347b28e64"},c("ifx-icon",{key:"da62f9d6ce4fcb6056c359c3adb6ab495fcf6ff9",class:"check__icon",icon:"check12"})),c("span",{key:"606f0b55f7089f61460e9ca9d32d095a61175a24"},"Adheres to web standards")))),c("td",{key:"18b92d8a71008c4916752976fdefbbaf39af15a8"},c("ul",{key:"4b22a14ec925bfb8cb80f3b189cae85c4cd26948"},c("li",{key:"9050255538ab08257ad52d6f76e9fdf950be2712"},c("span",{key:"8d672fb17f3fdaf8ae8ab0b03dd09e40dbb3d7fc"},c("ifx-icon",{key:"9acddbcebb033b61cc781a355e30f407612c5aa7",class:"check__icon",icon:"check12"})),c("span",{key:"51df8123b22a626906c16cafcdb983ea6852b038"},"Horizontal and Vertical orientation")),c("li",{key:"3eb759e08b60d8ba970039fb1626827dec0cd51a"},c("span",{key:"09151ffff502591ad5c5b629ae849d38d1061e3e"},c("ifx-icon",{key:"468f60e9424808c6951992365cba1a41bdcec1b3",class:"check__icon",icon:"check12"})),c("span",{key:"5a8608dd9030f58d7f85c93a683ad0b4ad8646c6"},"Extended customization")),c("li",{key:"195ab62d8508ba0f3085dde787b9bbdb024d6238"},c("span",{key:"61c9af409c1b06d8b3ece3c73c93cd285a1480a8"},c("ifx-icon",{key:"54102a51703ba15ee8f2d8ca8948d41baa58af03",class:"check__icon",icon:"check12"})),c("span",{key:"75f218b81e8b7ca318c247fb296ce4f468d7fe5e"},"React, Vue and Angular wrapper integration")))),c("td",{key:"5c239da3162af47f730de620e3af213139170b17"})),c("tr",{key:"f43e34c7b16f7130b2e474dbfb8bc7602d6ffa32"},c("td",{key:"19a9fd0e0f4da72152921469b963d109819c863a",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"1965ea8cf0766fa1346aecbead5aee96c4fafe10",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tag--development",size:"s",variant:"bold"},"Tag")),c("td",{key:"197a481f9ac0c31b2dfb9943ac0b7b3fcf21bdd5"},c("ul",{key:"7875a27b392334d938f1d23ae204f22a8095bf14"},c("li",{key:"ddbefb178febea439a760ff6c8765af4889e6171"},c("span",{key:"30cf4540d88a3f08c37394256f8616996f3d4a76"},c("ifx-icon",{key:"56074b85323acf03a6b50346a8cc2de7bd21bbc7",class:"check__icon",icon:"check12"})),c("span",{key:"0549a9cc644b0d4ee1fbf2e58b54a9836e51e25d"},"Offers a customizable and stylized marker that allows users to quickly identify and associate specific items or content with descriptive labels or categories")))),c("td",{key:"5faf05b92dc8a215536efb35fd386988e20e69db"},c("ul",{key:"78907e0f7d9a7036f764b68affccdab69d538e52"},c("li",{key:"d042733177b145fb8c45027f9357868b13979617"},c("span",{key:"368f2398f8192a158ff463dfba426f50e34479cc"},c("ifx-icon",{key:"4c04c5ff2c5c7390d266496292d07b6cc74cb634",class:"check__icon",icon:"check12"})),c("span",{key:"3d194247a882fb00924e043ec91c771cd85fb03c"},"Icon incorporated")),c("li",{key:"2d52b72138d029caf0662b3614a0c71d0a54a00c"},c("span",{key:"74f07d52a3d480f12dc69fccf04f725587a36e11"},c("ifx-icon",{key:"8871848b0533f448d6d21014a5c38df997c61e4b",class:"check__icon",icon:"check12"})),c("span",{key:"2f2865b4641fc4b8df935263648dd43cec62711a"},"React, Vue and Angular wrapper integration")))),c("td",{key:"eb97e99f9aea576137d63ec29404627a608e22e9"})),c("tr",{key:"9e27cadb744e5d4c823b26f0958474014b5766d3"},c("td",{key:"76efb3801d993c97bb396c25bac7a4d4f59edef7",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"ee8b8edea181d12fe6210fb00c3afa4a6561e51c",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-text-field--development",size:"s",variant:"bold"},"Text Field")),c("td",{key:"99c3930f898c1e43cf4b2467838904def62c4cd9"},c("ul",{key:"c88f8d72c2dab23fb523db91306646148a7e6335"},c("li",{key:"1d7204938d816251c2f996f93c50336e7f104b17"},c("span",{key:"ab980b7a3373dd5beff597c4268d6185dd2f0baa"},c("ifx-icon",{key:"3cc3d3c62b98bc2144618d33417e4d4748369367",class:"check__icon",icon:"check12"})),c("span",{key:"6c1cf92e67aa8b10a93b95a145a59500137dce12"},"Offers a customizable and accessible interface that allows users to input and modify text, facilitating various data entry and form submission tasks")),c("li",{key:"773c972a3d42ba1d158a3067f7b58f4a192c5f30"},c("span",{key:"80bea8831fabaa7a5dea8b9545a0c5a3db323ba0"},c("ifx-icon",{key:"2d811cc21e15b4bbe6dadf5eea50365b87d4fe73",class:"check__icon",icon:"check12"})),c("span",{key:"2ae629ebcb38e20c6c91eca509c87fc82e5e3910"},"Adheres to web standards")))),c("td",{key:"85da25a2b22b09a77421d914bcf8423b290caae0"},c("ul",{key:"e0c808f4ea56477227c9a3b92e2263340cec4982"},c("li",{key:"b411b5b17a50e294be3966b4447f038eb66351e9"},c("span",{key:"1f000959445a794eb70ca60d2acb25d8a086ff55"},c("ifx-icon",{key:"fea0f88c4ec9c29c3d63eea22336ed1f188944bc",class:"check__icon",icon:"check12"})),c("span",{key:"c216fb18b2289fffcb72ac5b241f787213e3799f"},"Extended customization")),c("li",{key:"b7513d61e2840ba4a7c741edbaac661f8ad42f1f"},c("span",{key:"956cc0149739d9ecc4c2a9dc81d236e040428b72"},c("ifx-icon",{key:"eba5b9804debf3d0a584efea4aaa4a11b68d68cb",class:"check__icon",icon:"check12"})),c("span",{key:"696842f26f0d704e9d78a199866bdfe712b2010f"},"Possibility for icon configuration")),c("li",{key:"5c5e058bcb8a840c9998711c6e81fbe2f7b2c957"},c("span",{key:"9211697b416dd2eddf392649760713143febd64f"},c("ifx-icon",{key:"b9296877b428b5d7ad7f394e7e5857737b16ef5b",class:"check__icon",icon:"check12"})),c("span",{key:"435f6959efed469e7e2c848b780db9d44381097d"},"React, Vue and Angular wrapper integration")))),c("td",{key:"2771d22c0d2a587020e012eb6817ac8b8f87e4e4"},c("ul",{key:"6ec0587f18ac45dbbf55ace6fbee08e637a23154"},c("li",{key:"e63a4de6d29c37c8b11a133ad89048383d09c69f"},c("span",{key:"1c31afe85367f14a4c1aa2fe668e76535cfc28ea"},c("ifx-icon",{key:"c4f1e8ca29333e2740315ddc9f065d757fa652cb",class:"check__icon",icon:"check12"})),c("span",{key:"fbdb9d43dea2ee204dbb9931f7ad50f5aab9f159"},"Form integration"))))),c("tr",{key:"df057fe00aea50416e34dd3205a91dc08194e071"},c("td",{key:"21158d4881fc139cc13bd403eaf4076035dbaccf",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"50be43ee97baac275a1b33988273dbd7e7adb274",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tooltip--development",size:"s",variant:"bold"},"Tooltip")),c("td",{key:"52fde09ed9950baf3d22b19f4710e81cbd6cdd02"},c("ul",{key:"220d52418cdb60193afa5ba0ccdcb5f1e1e0e62c"},c("li",{key:"2508d7c55a9f1c63029e2737cac00a50f7a9752a"},c("span",{key:"5038ae58efca6898fb6cd3d03b41c5fd847f7959"},c("ifx-icon",{key:"3a25ff92b7ca9601e7224d9c6b31d86a4c31aacc",class:"check__icon",icon:"check12"})),c("span",{key:"103d9f37ce6bc64ad0049028f77d5cb30ab18011"},"Provides a simple and informative interface for displaying supplementary text or contextual information when users interact with specific elements within a web application")),c("li",{key:"8affebf1c2fbf3e0d48ca60796d8ecf5393649a3"},c("span",{key:"fbe9e544c41aaed175866431ab04c335c9525378"},c("ifx-icon",{key:"753a19f6cc47d69810af20d8f95f4528ff99f831",class:"check__icon",icon:"check12"})),c("span",{key:"7ec008c1036613644892ba1c2c9162f914a6476f"},"Adheres to web standards")))),c("td",{key:"b5c3c63713e1ec5858c8c0d674acfdb3da27ec86"},c("ul",{key:"add1f2200902f1d43d75ddb7ef573802047d39e4"},c("li",{key:"b930fdcfe9dcb42f737edcd66745baad778e3605"},c("span",{key:"a5f1233d6d73d8e5522d2391b7954286ed19a80f"},c("ifx-icon",{key:"013b45673d68dcdf2469814a7be73a624c1cda3b",class:"check__icon",icon:"check12"})),c("span",{key:"7795ffcf71bfefb1843ee72f2c3d821608c53be4"},"Compact, dismissible and Extended variants")),c("li",{key:"71fd4a09978ac7c67f2c8b277929099ecceff373"},c("span",{key:"3ffd6c7d2a5b13490e572172537fdd599868537b"},c("ifx-icon",{key:"5055d8b00aa3c3847f342daaac95e1e446ab8c79",class:"check__icon",icon:"check12"})),c("span",{key:"5f02bf6daf09481dbcec3fe7ab810090ab4ad8fe"},"Auto-adjusting position")),c("li",{key:"ea9a6b301265c32a448a5c50573084edc19b7e12"},c("span",{key:"28b6a815e7c5e9c27ed55f71a915b9f21de86134"},c("ifx-icon",{key:"667c71092e043997467d2f8a881f496e85f56e8b",class:"check__icon",icon:"check12"})),c("span",{key:"619fb56435e33554a3b3c9309f539c7b247eeb86"},"Icon incorporated")),c("li",{key:"62511d78ec4e5f82cac03d75ef44805278cebd11"},c("span",{key:"e964d302328c1003fb103fd70366f887cf092dc7"},c("ifx-icon",{key:"0b4cd708fc9d646e907d52eca94a217c1b13e416",class:"check__icon",icon:"check12"})),c("span",{key:"cd142ec82ca5050f7d723d7e846bf9cb73538258"},"React, Vue and Angular wrapper integration")))),c("td",{key:"28c703dbc3280e41d5f72a5ef0e084b7c7ef8eec"})),c("tr",{key:"a0018e003c7d2e6fb48d1af2c34e813d68f9e711"},c("td",{key:"5e47528d312368ac054bf9e501a4a1b05e15a9f4",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"1583c2dab084ba1b6356ec82827ef561eed7f395",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-notification--development",size:"s",variant:"bold"},"Notification")),c("td",{key:"407de2a29f248f98d86800b25e4f68b799df1c6e"},c("ul",{key:"778b5f77fb8972cb21db9505639fc16babe10fdf"},c("li",{key:"8326b3b1032649704de9129dadc36625e4f48488"},c("span",{key:"334f75308c89794d767603a63f67757ef8e5abd5"},c("ifx-icon",{key:"da1e250d85f613b968e82e2845fbc49f757c7109",class:"check__icon",icon:"check12"})),c("span",{key:"47ce27ff07a11df34f1692207b48d37b2b14a5d7"},"Offers a flexible and visually distinct container for presenting informative, warning, or error messages to users, enhancing the overall user experience with timely and relevant feedback")),c("li",{key:"21c6e30d457e096bd234f2c7a97a51b0c49ed4ef"},c("span",{key:"ec4da746ab6b01718b2278da60bb0f7e044b7735"},c("ifx-icon",{key:"7de2bf71fbdb3393037b077f5cd3a1025d2a0f9b",class:"check__icon",icon:"check12"})),c("span",{key:"5d1aa03db2ecdd304ed813f356fe416052d5b41f"},"Adheres to web standards")))),c("td",{key:"1ee57572cbfd7b70c117da66d9a4059cd0e08df5"}),c("td",{key:"58c05f6b69294ad5da91c954a6b0e6b19441f956"})),c("tr",{key:"53f9c5ea24ce196d08a66819800e31ae5aed32ab"},c("td",{key:"3559162786fabffecfc54a093fd693c5127ea0c4",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"59e1af0e62db29ecdae765f917486558e52e93e4",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-content-switcher--development",size:"s",variant:"bold"},"Content Switcher")),c("td",{key:"d70e757f17d4f850f52121375cc54a186e734bfd"},c("ul",{key:"2fc4b1643fd1a21ae79c1f4fb16aed1e18d973b1"},c("li",{key:"9f3cbec1e517f5e2851cbdb722f388e09798eb21"},c("span",{key:"0f5ae21846126fdcc0f2874b66d07113c69055a3"},c("ifx-icon",{key:"e425429f146a20cc401b69252ddb00a1c23c257d",class:"check__icon",icon:"check12"})),c("span",{key:"c85f377b58d1aed7c2beab0ca04f1ff5038f4208"},"Provides a flexible and intuitive interface for dynamically switching between different content sections or views within a web application")),c("li",{key:"31a7089f368ebf7be48e7e0cbba0d4b5797cf1f5"},c("span",{key:"9ca36078d8993d6cfc02b9540ac8251892ac72d1"},c("ifx-icon",{key:"7933c4843d1123bc1558da9dda6dfbe9b82f2f32",class:"check__icon",icon:"check12"})),c("span",{key:"8f348b57c6ba776bcce2cc2b439fac60cfdaa1bd"},"Offers a customizable mechanism for users to toggle and display diverse content panels, facilitating seamless navigation and interaction with varying information or functional contexts")),c("li",{key:"0f0405141535770cd3dfce134194db9b8926ac20"},c("span",{key:"2ed349cafb15dea67256d507a34ba4406d0d48c7"},c("ifx-icon",{key:"c8d2aa390d360816f5b83af9329dfd701be619c9",class:"check__icon",icon:"check12"})),c("span",{key:"f6db0b246ac3eda066664d57f818973f6343ab8e"},"Adheres to web standards")))),c("td",{key:"f56e7d9273bbaa0b32260421bfc3e398056a0f16"}),c("td",{key:"d16d4eea1473fe518b90b950f65c1baa897f9d91"})),c("tr",{key:"c840a366cdb63379e5dc8b695046134e8bf698be"},c("td",{key:"546ddfec4b4761f3c6cc55a627fd91905e78a880",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"09f5be3225492a75cebc53cd32561e4c07424ff3",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-segmented-control--development",size:"s",variant:"bold"},"Segmented Control")),c("td",{key:"c637536cf084f53e8b39d7c6fa89b2444a167106"},c("ul",{key:"8da7749f6734e5d377319dfe4aa046f922e2610c"},c("li",{key:"82ece308c35da76941676cbef59114839b3e544f"},c("span",{key:"1dcda73665675272811e71af24bc52d9e00f2349"},c("ifx-icon",{key:"ff7adcb3e0c91525e51e017bddc65d41319a559c",class:"check__icon",icon:"check12"})),c("span",{key:"6a54b2c471a7d7701c7758609fce2b89ae7b1503"},"Provides a clear and interactive interface for users to make mutually exclusive selections among multiple options within a web application")),c("li",{key:"e33fd3e95f70196ebc8d1ad0d71b67397d16cf21"},c("span",{key:"75d9860e4794d940c775c265c114154af683deaa"},c("ifx-icon",{key:"039d99a1f8c1789f49fe454aa2ad4f06b33eafc3",class:"check__icon",icon:"check12"})),c("span",{key:"bb8cae4dcc0e363fe53ecccd0228539b5420d800"},"Offers a customizable set of segmented buttons or tabs, allowing users to toggle between different choices or views, typically used for filtering, categorization, or navigation purposes")),c("li",{key:"196050c2335f146e1de736935a2ddefab3ed5b90"},c("span",{key:"9add7e2bc45173490e00e7fe0c398fdeff6392f9"},c("ifx-icon",{key:"65a7ebb5488ff0386646337f8fdd0305943e10c1",class:"check__icon",icon:"check12"})),c("span",{key:"37733206ef648dd81d49e6076bdff17ae62475aa"},"Adheres to web standards")))),c("td",{key:"5e9f2131ab797d4e20b99f2e1f590ace9ca3b548"}),c("td",{key:"764fe8df5425d6f7d7ed211ab2b372dbc1fb6ba0"})),c("tr",{key:"459a0a8af1f83fbf08a85fd6ad441cf2afe7b374"},c("td",{key:"15bbefbe30714efc9eedf831b7a5b203bbf84d96",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"9a4e4ee7796fa31e90b248e1ae89ac03bd8410a1",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-segmented-controls--development",size:"s",variant:"bold"},"Textarea")),c("td",{key:"3f25f2a0c5e026d3f00645ff9c84c55ccd0c7fa6"},c("ul",{key:"6ff09d0633fb469d0be74a593eb7e545c2cc3e76"},c("li",{key:"f708bc03c1fb5d050a596a7c8491b010594adb6d"},c("span",{key:"9f663b17e7230d1a2465469051adf9bcaeb81d6d"},c("ifx-icon",{key:"a150669cd3fc6b10ec96fca38226e9c0281c2be0",class:"check__icon",icon:"check12"})),c("span",{key:"c2601ed22efc333ed311f5aab58229510cd3b2ff"},"Provides a customizable multi-line text input interface, enabling users to input, edit, and view large amounts of text, while adhering to web standards for accessibility and usability.")),c("li",{key:"8bdec1ccb2519b7e17ca2aafa3764e0c2d5a3fe7"},c("span",{key:"e62d91bcd67ac5ef2278be51f07285fb067f89ab"},c("ifx-icon",{key:"eade2297abea474ab8eb963627fdbe937a2d651b",class:"check__icon",icon:"check12"})),c("span",{key:"8543e454ff263760736744b41c4c4bd69981bb21"},"Form integration")))),c("td",{key:"efad6903d2240ad61d8620ee96e4ad580c7f2b02"}),c("td",{key:"072928685ece9bcac54f38806e5cb4767a188d9e"})),c("tr",{key:"7abebc34140f84a8d244069ae402a14a882fec18"},c("td",{key:"e5e1b5f185bac9bb7944b7068b557f183d5af86e",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"d3243d9a588d96219314b62f43df369689390a9b",href:"",size:"s",variant:"bold"},"Card Group")),c("td",{key:"4dbfa791ad3efac5e318884ba510559c3fd80890"},c("ul",{key:"7d8033447e4ec9a25f1ab072562d51580e77f264"},c("li",{key:"345028b8a181debad4c7b7e3ab7b86b99348b048",class:"planned__component-wrapper"},c("span",{key:"38fe12c226757113479c66177944c53cec982ab4"},c("ifx-icon",{key:"f98890ae790101de639e3423a430876aaf51aa45",class:"planned__icon",icon:"clock24"})),c("span",{key:"131dc596f5f5030c0ea24727bc6d7bf3b9a9eea4"},"On Hold")))),c("td",{key:"7827283c600e89477ca7302e9d3578b64a6b1bc4"}),c("td",{key:"6bd658b17cc013ddd20be10c32507fa7001ccff8"})),c("tr",{key:"729e5a62719d9e533e66ea7d6811177d4bc9a22f"},c("td",{key:"143a70ac4dffce2e885556e6d7fee69dab37b604",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"d0871143e42fc5d84d85deaea278f1e2d68e507c",href:"",size:"s",variant:"bold"},"Advanced Date Picker")),c("td",{key:"8924917266c7993bb4952a712af9a624f1890b67"},c("ul",{key:"5940e445f837654a998e0a440d3128c1847be5a3"},c("li",{key:"568e00e93f86349e65b7cc4b76df7c95d4de11e3",class:"planned__component-wrapper"},c("span",{key:"857896b4354b042f872573b8d9fa5c390ab57298"},c("ifx-icon",{key:"445dd3a148f08c23080555045b1d9c0ba11cf573",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"1ed3b20a13ca29f8a617291069c5dc3b88e1c540"},"In Progress")))),c("td",{key:"ca4dadaa94d9d685c89c0ae5fd293289c4881d3f"}),c("td",{key:"2184956d75cea7240a6ce9448db3036a6defc7c3"})),c("tr",{key:"b2d11657deefac194c1231adde12780d143a320f"},c("td",{key:"0c3c3c8a60376bc2b1feff989129a40ab638a744",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"62bcdce64dd851be1f70e2eb496e443a4d6a3a2a",href:"",size:"s",variant:"bold"},"Upload")),c("td",{key:"4ce05f0c5bc132e97ff9a2641e5ea9ccae50fb31"},c("ul",{key:"e22945232e3db4881de2b561b3f42dd73364aacc"},c("li",{key:"907e09d3ad221bef3db4cbce1c1d021f0352bf26",class:"planned__component-wrapper"},c("span",{key:"9d714c9900d6b3664ba833a81bd4238a91d9ade4"},c("ifx-icon",{key:"63ef8d000a6deef281e0b5c38ff5ebc1c3f36919",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"846766678acfc37cc9045f06540384edea420cb8"},"In Progress")))),c("td",{key:"15d4dd6f5ca5192c279d5491fce6ad34035b85b3"}),c("td",{key:"42515e741f9bc324c2422ec9e96448c58b37561a"})),c("tr",{key:"816979f1c8bb14952dc31a25a4ae9bb627a5b229"},c("td",{key:"3e7e3da9528bf66f43d9ba0f900b58084cf423ec",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"6d8825a9b676191bf9e513e4772e035057a526ff",href:"",size:"s",variant:"bold"},"Checkbox Group")),c("td",{key:"23e9a1f91346e9d0de2878a36c3076967a71fbcb"},c("ul",{key:"d7eee2fdb4850d938fdb6772d96c5d983abd9db1"},c("li",{key:"92710d43462537ea3f44bab00b0e5b380d8ddc7f",class:"planned__component-wrapper"},c("span",{key:"d49a97e7e5ad2fde098bd97c043ecf113fe2c695"},c("ifx-icon",{key:"9879f487b5959cf56493d7b747c7cd4b0c9fee25",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"430fc9e68b9ff457430d568f276feb0d09ed2018"},"In Progress")))),c("td",{key:"3d1ac78b5d664c807862d9372cada0fa87703aa4"}),c("td",{key:"664bef6e5fb5c5f15483b7138027dc6992e6f1ed"})),c("tr",{key:"914726ac342ff09e459d81e83ca63ee186a67143"},c("td",{key:"95e2f0db2618c1a7cb6a54d8eea57072b3a5588e",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"11df183554e30218193f677b350de545798150ee",href:"",size:"s",variant:"bold"},"Radio Group")),c("td",{key:"6ef1eb914ccc32676ee4064fdda51effa0893806"},c("ul",{key:"22f7f59ff7982538db9fc7717e48447a6c6cee3e"},c("li",{key:"344198991b46962c5614831f75fd9ce6279a321d",class:"planned__component-wrapper"},c("span",{key:"bbbd72c6538b3f89cf1056079fa214148f40e37d"},c("ifx-icon",{key:"d58aa1366c31dd548a2740afa112c625f9fddadb",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"db20d9ca3ee44b094e33c05193664c1088707033"},"In Progress")))),c("td",{key:"58743ee67fa198663f91aca60cbf6b34732d0693"}),c("td",{key:"ad4702d11e68fd1b51f513d8b7bcdbb34c990c07"})),c("tr",{key:"b8e10a922d964395a55b62f1decef918cc451506"},c("td",{key:"47458554b621f5e289e882db40843d1cdbb96def",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"217d963d47b7b4ad0fdf79e2f371c33eda98a4c7",href:"",size:"s",variant:"bold"},"Tree View")),c("td",{key:"2db5fd71ab911d2f0160f656004d08aff4002be2"},c("ul",{key:"8e60a39d1119e9dfa5a09699cc3c88d6dcea3231"},c("li",{key:"58fec154c2c28a41b0d5998c05d90afeab326c56",class:"planned__component-wrapper"},c("span",{key:"ee9884eb15527d2e022a0a5e589fff75ff61507e"},c("ifx-icon",{key:"ded6c2f577fea65a35cd9ae9b0f7e5e8a3fc1b62",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"8af333006e85c0bf4aebc5c8d51b8dab97864d33"},"In Progress")))),c("td",{key:"c02581f366e8e4696935cbf236736190e322e5b8"}),c("td",{key:"8249972a5661c7fd64f9bd6052fb86e53eaa17ab"})),c("tr",{key:"15ccf26eb82a3146e980f969bfdc71553c287a90"},c("td",{key:"2a4b168c106eea86367e353b6b8a4201cac5509f",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"e85ecb9332ddba9ab3bc577e839dab45224b7581",href:"",size:"s",variant:"bold"},"Popover")),c("td",{key:"9ba7416ee265d202afd0485e4ddb26167eb9bc71"},c("ul",{key:"9c2406276b8380ac66a4b84bfc10d4e2b4a8516e"},c("li",{key:"8ae284251d4e4b80e69785899a9ffaca856271f8",class:"planned__component-wrapper"},c("span",{key:"42034062df255e35efbac0131bf25d8098af7c49"},c("ifx-icon",{key:"fe2e47d6011e7a88ab64d46ab9247d7dcbb65321",class:"planned__icon",icon:"clock24"})),c("span",{key:"69f87906cc490e94d177210c6a8211217902fc71"},"On Hold")))),c("td",{key:"4f7b32995b80e05146d77649956e201af2da9ff4"}),c("td",{key:"592a53f3597ea92cf801d90c5734171618254dec"})))))))}get el(){return a(this)}};b.style=f;export{b as ifx_overview_table};
2	- //# sourceMappingURL=p-bddadce2.entry.js.map

package/dist/infineon-design-system-stencil/p-bddc382a.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,c as i,h as e,a as s,g as h}from"./p-6b122987.js";const n=".ifx-content-switcher{background-color:#FFFFFF;border:1px solid #BFBBBB;border-radius:9999px;height:36px;width:fit-content;box-sizing:border-box;display:flex;flex-direction:row;align-items:center}.ifx-content-switcher ::slotted(ifx-content-switcher-item){position:relative}.ifx-content-switcher ::slotted(ifx-content-switcher-item:first-child){left:-1px;margin-right:-1px}.ifx-content-switcher ::slotted(ifx-content-switcher-item:last-child){right:-1px;margin-left:-1px}.ifx-content-switcher ::slotted(.ifx-content-switcher-divider){width:1px;height:20px;background-color:#8D8786;margin:0px 1px;visibility:visible}.ifx-content-switcher ::slotted(.ifx-content-switcher-divider.hidden){visibility:hidden}";const r=n;const c=class{constructor(e){t(this,e);this.ifxChange=i(this,"ifxChange",7);this.eventHandlers=new Map;this.items=undefined;this.activeIndex=-1;this.hoverIndex=-1;this.focusIndex=-1;this.dividers=Array()}componentWillLoad(){this.items=Array.from(this.el.children);this.initializeDividers();this.addEventListeners();this.ensureSingleSelectedItem()}disconnectedCallback(){this.removeEventListeners()}initializeDividers(){this.items.forEach(((t,i)=>{if(i<this.items.length-1){const i=document.createElement("div");i.classList.add("ifx-content-switcher-divider");t.after(i);this.dividers.push(i)}}))}addEventListeners(){this.items.forEach(((t,i)=>{const e={click:()=>this.selectItem(i),mouseenter:()=>this.handleHover(i,true),mouseleave:()=>this.handleHover(i,false),focus:()=>this.handleFocus(i,true),blur:()=>this.handleFocus(i,false)};Object.keys(e).forEach((i=>{t.addEventListener(i,e[i])}));this.eventHandlers.set(t,e)}))}removeEventListeners(){this.eventHandlers.forEach(((t,i)=>{Object.keys(t).forEach((e=>{i.removeEventListener(e,t[e])}))}));this.eventHandlers.clear()}ensureSingleSelectedItem(){this.items.forEach(((t,i)=>{if(t.hasAttribute("selected")){if(this.activeIndex<0){this.selectItem(i)}else{t.removeAttribute("selected")}}}))}handleHover(t,i){this.hoverIndex=i?t:-1;this.updateDividersOfItem(t)}handleFocus(t,i){this.focusIndex=i?t:-1;this.updateDividersOfItem(t)}updateDividersOfItem(t){if(t<this.items.length-1){this.updateDividerVisibility(t)}if(t>0){this.updateDividerVisibility(t-1)}}updateDividerVisibility(t){const i=new Set([this.activeIndex,this.activeIndex-1,this.hoverIndex,this.hoverIndex-1,this.focusIndex,this.focusIndex-1]);this.setDividerVisibility(t,i.has(t))}setDividerVisibility(t,i){if(this.dividers[t]){this.dividers[t].classList.toggle("hidden",i)}}selectItem(t){if(t===this.activeIndex)return;const i=this.activeIndex;if(i>=0){this.items[i].removeAttribute("selected")}this.activeIndex=t;this.items[t].setAttribute("selected","true");this.ifxChange.emit({oldValue:this.getValueOfItem(i),newValue:this.getValueOfItem(t)});this.updateDividersOfItem(i);this.updateDividersOfItem(t)}getValueOfItem(t){if(this.items[t]==null)return t.toLocaleString();return this.items[t].getAttribute("value")\|\|t.toLocaleString()}render(){return e(s,{key:"0c50e18a9ac86fb7be75a049c82bb73bbad834ec"},e("div",{key:"6b17a332e6be8a261d7e70143dd60bc51bf637df",class:"ifx-content-switcher",role:"group"},e("slot",{key:"23a9d14ad25b16d4b3f6411199765b74ef1b9d62"})))}get el(){return h(this)}};c.style=r;export{c as ifx_content_switcher};
2	- //# sourceMappingURL=p-bddc382a.entry.js.map

package/dist/infineon-design-system-stencil/p-bddc382a.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["contentSwitcherCss","IfxContentSwitcherStyle0","ContentSwitcher","this","eventHandlers","Map","Array","componentWillLoad","items","from","el","children","initializeDividers","addEventListeners","ensureSingleSelectedItem","disconnectedCallback","removeEventListeners","forEach","item","index","length","divider","document","createElement","classList","add","after","dividers","push","handlers","click","selectItem","mouseenter","handleHover","mouseleave","focus","handleFocus","blur","Object","keys","event","addEventListener","set","removeEventListener","clear","hasAttribute","activeIndex","removeAttribute","isActive","hoverIndex","updateDividersOfItem","focusIndex","itemIndex","updateDividerVisibility","dividerIndex","hiddenDividers","Set","setDividerVisibility","has","hidden","toggle","oldIndex","setAttribute","ifxChange","emit","oldValue","getValueOfItem","newValue","toLocaleString","getAttribute","render","h","Host","key","class","role"],"sources":["src/components/content-switcher/content-switcher.scss?tag=ifx-content-switcher&encapsulation=shadow","src/components/content-switcher/content-switcher.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.ifx-content-switcher {\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering300;\n border-radius: tokens.$ifxBorderRadiusRound;\n height: tokens.$ifxSize450;\n width: fit-content;\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n & ::slotted(ifx-content-switcher-item) {\n position: relative;\n // top: -1px;\n }\n\n & ::slotted(ifx-content-switcher-item:first-child) {\n left: -1px;\n margin-right: -1px;\n }\n\n & ::slotted(ifx-content-switcher-item:last-child) {\n right: -1px;\n margin-left: -1px;\n }\n\n // Dividers\n & ::slotted(.ifx-content-switcher-divider) {\n width: tokens.$ifxSize12;\n height: tokens.$ifxSize250;\n background-color: tokens.$ifxColorEngineering400;\n margin: 0px 1px;\n visibility: visible;\n }\n\n & ::slotted(.ifx-content-switcher-divider.hidden) {\n visibility: hidden;\n }\n}","import { Component, h, Element, Event, EventEmitter, Host, State } from '@stencil/core';\n\nexport type ChangeEvent = { oldValue: string; newValue: string };\n\n@Component({\n tag: 'ifx-content-switcher',\n styleUrl: './content-switcher.scss',\n shadow: true,\n})\nexport class ContentSwitcher {\n @Element() el: HTMLElement;\n\n @State() items: Element[];\n @State() activeIndex = -1;\n @State() hoverIndex: number = -1;\n @State() focusIndex: number = -1;\n\n @State() dividers: Element[] = Array();\n\n @Event() ifxChange: EventEmitter<ChangeEvent>;\n\n private eventHandlers: Map<Element, { [key: string]: EventListener }> = new Map();\n\n componentWillLoad() {\n this.items = Array.from(this.el.children);\n this.initializeDividers();\n this.addEventListeners();\n this.ensureSingleSelectedItem();\n }\n\n disconnectedCallback() {\n this.removeEventListeners();\n }\n\n /**\n * Initialize the dividers between items.\n */\n initializeDividers() {\n this.items.forEach((item, index) => {\n if (index < this.items.length - 1) {\n const divider = document.createElement('div');\n divider.classList.add('ifx-content-switcher-divider');\n item.after(divider);\n this.dividers.push(divider);\n }\n });\n }\n\n /**\n * Add event listeners for each item.\n */\n addEventListeners() {\n this.items.forEach((item, index) => {\n const handlers = {\n click: () => this.selectItem(index),\n mouseenter: () => this.handleHover(index, true),\n mouseleave: () => this.handleHover(index, false),\n focus: () => this.handleFocus(index, true),\n blur: () => this.handleFocus(index, false),\n };\n\n Object.keys(handlers).forEach(event => {\n item.addEventListener(event, handlers[event]);\n });\n\n this.eventHandlers.set(item, handlers);\n });\n }\n\n /**\n * Remove all event listeners.\n */\n removeEventListeners() {\n this.eventHandlers.forEach((handlers, item) => {\n Object.keys(handlers).forEach(event => {\n item.removeEventListener(event, handlers[event]);\n });\n });\n this.eventHandlers.clear();\n }\n\n /**\n * Ensure that only one item is selected at a time.\n */\n ensureSingleSelectedItem() {\n this.items.forEach((item, index) => {\n if (item.hasAttribute('selected')) {\n if (this.activeIndex < 0) {\n this.selectItem(index);\n } else {\n item.removeAttribute('selected');\n }\n }\n });\n }\n\n /**\n * Handle hover events on an item.\n * @param index - Index of the item.\n * @param isActive - Whether the item is hovered.\n */\n handleHover(index: number, isActive: boolean) {\n this.hoverIndex = isActive ? index : -1;\n this.updateDividersOfItem(index);\n }\n\n /**\n * Handle hover events on an item.\n * @param index - Index of the item.\n * @param isActive - Whether the item is focused.\n */\n handleFocus(index: number, isActive: boolean) {\n this.focusIndex = isActive ? index : -1;\n this.updateDividersOfItem(index);\n }\n\n /**\n * Update visibility of dividers adjacent to a specific item.\n * @param itemIndex - Index of the item.\n */\n updateDividersOfItem(itemIndex: number) {\n if (itemIndex < this.items.length - 1) {\n this.updateDividerVisibility(itemIndex);\n }\n if (itemIndex > 0) {\n this.updateDividerVisibility(itemIndex - 1);\n }\n }\n\n /**\n * Update visibility of a specific divider.\n * @param dividerIndex - Index of the divider.\n */\n updateDividerVisibility(dividerIndex: number) {\n const hiddenDividers = new Set([this.activeIndex, this.activeIndex - 1, this.hoverIndex, this.hoverIndex - 1, this.focusIndex, this.focusIndex - 1]);\n this.setDividerVisibility(dividerIndex, hiddenDividers.has(dividerIndex));\n }\n\n /**\n * Set the visibility of a specific divider.\n * @param dividerIndex - Index of the divider.\n * @param hidden - Whether the divider should be hidden.\n */\n setDividerVisibility(dividerIndex: number, hidden: boolean) {\n if (this.dividers[dividerIndex]) {\n this.dividers[dividerIndex].classList.toggle('hidden', hidden);\n }\n }\n\n /**\n * Select a specific item.\n * @param itemIndex - Index of the item to be selected.\n */\n selectItem(itemIndex: number) {\n if (itemIndex === this.activeIndex) return;\n const oldIndex = this.activeIndex;\n if (oldIndex >= 0) {\n this.items[oldIndex].removeAttribute('selected');\n }\n\n this.activeIndex = itemIndex;\n this.items[itemIndex].setAttribute('selected', 'true');\n\n this.ifxChange.emit({ oldValue: this.getValueOfItem(oldIndex), newValue: this.getValueOfItem(itemIndex) });\n this.updateDividersOfItem(oldIndex);\n this.updateDividersOfItem(itemIndex);\n }\n\n /**\n * Get the value property of the item at a specific index.\n * Falls back to the index if no value is set.\n * \n * @param index - Index of the item. \n * @returns The value of the item.\n */\n getValueOfItem(index: number): string {\n if (this.items[index] == null) return index.toLocaleString();\n return this.items[index].getAttribute('value') || index.toLocaleString();\n }\n\n render() {\n return (\n <Host>\n <div class=\"ifx-content-switcher\" role=\"group\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-c0e021d4.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,c as e,h as s,g as i}from"./p-6b122987.js";const r=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.stepper{display:flex;align-items:center}.stepper.compact{justify-content:space-between;align-items:center}.stepper.compact.compact-right{flex-direction:row-reverse;text-align:left}.stepper.compact .stepper-wrapper{width:unset;flex-direction:column}.stepper.vertical{height:100%}.stepper.vertical .stepper-wrapper{flex-direction:column;width:unset;height:100%}.stepper-wrapper{display:flex;flex-direction:row;width:100%}.stepper-wrapper ::slotted(){display:flex;flex:1;justify-content:flex-start}.stepper-progress{display:flex;justify-content:center;align-items:center;font:600 0.875rem/1.25rem "Source Sans 3";min-width:56px;height:56px;border-radius:9999px;background:conic-gradient(#0A8276 var(--pb, 0%), #8D8786 0)}.stepper-progress .progress-detail{display:flex;justify-content:center;align-items:center;text-align:center;width:48px;height:48px;border-radius:9999px;background:white}';const a=r;const p=class{constructor(s){t(this,s);this.ifxChange=e(this,"ifxChange",7);this.activeStep=1;this.indicatorPosition="left";this.showStepNumber=false;this.variant="default";this.stepsCount=undefined;this.shouldEmitEvent=true;this.emittedByClick=false}onStepChange(t){const e=this.getSteps();const s=e[t.detail.previousActiveStep-1];if(s&&!s.complete){s.setAttribute("error","true")}}handleActiveStep(t,e){const s=this.getSteps();if(!this.shouldEmitEvent){this.shouldEmitEvent=true;return}if(!s[t-1].disabled){this.emitIfxChange(t,e)}else{if(t<e){let i=t;this.shouldEmitEvent=false;while(i>=1&&s[i-1].disabled)i--;if(i<1){this.activeStep=e}else{this.emitIfxChange(i,e);this.activeStep=i}}else{let i=t;this.shouldEmitEvent=false;while(i<=this.stepsCount&&s[i-1].disabled)i++;if(i>this.stepsCount){this.activeStep=e}else{this.emitIfxChange(i,e);this.activeStep=i}}}}emitIfxChange(t,e){this.ifxChange.emit({activeStep:t,previousActiveStep:e,totalSteps:this.stepsCount,emittedByClick:this.emittedByClick});this.emittedByClick=false}getSteps(){const t=this.el.querySelectorAll("ifx-step");return t}addStepIdsToStepsAndCountSteps(){const t=this.getSteps();t[t.length-1].lastStep=true;for(let e=0;e<t.length;e++){t[e].stepId=e+1}this.stepsCount=t.length}setActiveStep(t,e=false){this.emittedByClick=e;this.activeStep=t}setStepsBeforeActiveToComplete(){const t=this.getSteps();t.forEach(((t,e)=>{if(e+1<this.activeStep)t.complete=true}))}syncIfxSteps(){const t=this.getSteps();for(let e=0;e<t.length;e++){const s={activeStep:this.activeStep,indicatorPosition:this.indicatorPosition!=="right"?"left":"right",showStepNumber:this.showStepNumber,variant:this.variant!=="compact"&&this.variant!=="vertical"?"default":this.variant,setActiveStep:this.setActiveStep.bind(this)};t[e].stepperState=s}}setInitialActiveStep(){this.activeStep=Math.max(1,Math.min(this.stepsCount+(this.variant!=="compact"?1:0),this.activeStep))}componentWillLoad(){this.addStepIdsToStepsAndCountSteps();this.setInitialActiveStep();this.setStepsBeforeActiveToComplete()}componentDidLoad(){this.syncIfxSteps()}componentWillUpdate(){this.syncIfxSteps()}render(){return s("div",{key:"c7e51b5fe17beb80cac38fe0da1600f44b4ca111","aria-label":"a stepper",role:"navigation",class:`stepper ${this.variant!=="compact"&&this.variant!=="vertical"?"default":this.variant} ${this.variant==="compact"?"compact-"+this.indicatorPosition:""}`},this.variant==="compact"&&s("div",{key:"233c1234510997adab316ffb47e341c575036b95",class:"stepper-progress"},s("div",{key:"45c775b8727bac00e4c57a6e6e6129fe320e5a5b",class:"progress-detail"},`${Math.min(this.activeStep,this.stepsCount)} of ${this.stepsCount}`)),s("div",{key:"35ad66a86c1b1f6d008a232ae33944a3d7e122a6",class:`stepper-wrapper`},s("slot",{key:"671a05ed6ce3927369e202f2a9218944bb6bb7cf"})))}componentDidRender(){if(this.variant=="compact"){const t=this.el.shadowRoot.querySelector(".stepper-progress");t.style.setProperty("--pb",`${this.activeStep/this.stepsCount100}%`)}}get el(){return i(this)}static get watchers(){return{activeStep:["handleActiveStep"]}}};p.style=a;export{p as ifx_stepper};
2	- //# sourceMappingURL=p-c0e021d4.entry.js.map

package/dist/infineon-design-system-stencil/p-c0e021d4.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["stepperCss","IfxStepperStyle0","Stepper","onStepChange","event","steps","this","getSteps","previousActiveStep","detail","complete","setAttribute","handleActiveStep","newStep","oldStep","shouldEmitEvent","disabled","emitIfxChange","i","activeStep","stepsCount","ifxChange","emit","totalSteps","emittedByClick","el","querySelectorAll","addStepIdsToStepsAndCountSteps","length","lastStep","stepId","setActiveStep","setByClick","setStepsBeforeActiveToComplete","forEach","step","syncIfxSteps","stepperState","indicatorPosition","showStepNumber","variant","bind","setInitialActiveStep","Math","max","min","componentWillLoad","componentDidLoad","componentWillUpdate","render","h","key","role","class","componentDidRender","progressBar","shadowRoot","querySelector","style","setProperty"],"sources":["src/components/stepper/stepper.scss?tag=ifx-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.stepper {\n display: flex;\n align-items: center;\n \n &.compact {\n justify-content: space-between;\n align-items: center;\n \n &.compact-right {\n flex-direction: row-reverse;\n text-align: left;\n }\n \n .stepper-wrapper{\n width: unset;\n flex-direction: column;\n }\n }\n\n &.vertical {\n height: 100%;\n\n .stepper-wrapper {\n flex-direction: column;\n width: unset;\n height: 100%;\n }\n }\n}\n\n.stepper-wrapper {\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n\n.stepper-wrapper ::slotted(*){\n display: flex;\n flex: 1;\n justify-content: flex-start;\n}\n\n.stepper-progress {\n display: flex;\n justify-content: center;\n align-items: center;\n font: tokens.$ifxBodyBodySemibold04;\n min-width: tokens.$ifxSize700;\n height: tokens.$ifxSize700;\n border-radius: tokens.$ifxBorderRadiusRound;\n background: conic-gradient(tokens.$ifxColorOcean500 var(--pb, 0%), tokens.$ifxColorEngineering400 0);\n \n .progress-detail {\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n width: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n height: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n border-radius: tokens.$ifxBorderRadiusRound;\n background: white;\n }\n}\n\n","import { h, \n Component, \n Element, \n Event, \n EventEmitter, \n Listen, \n Prop, \n State, \n Watch } from \"@stencil/core\";\nimport { StepperState } from \"./interfaces\";\n \n\n@Component({\n tag: 'ifx-stepper',\n styleUrl: 'stepper.scss',\n shadow: true\n})\n\nexport class Stepper {\n @Element() el: HTMLElement;\n\n @Event() ifxChange: EventEmitter;\n\n @Prop({ mutable: true }) activeStep: number = 1;\n @Prop() indicatorPosition?: 'left' | 'right' = 'left';\n @Prop() showStepNumber?: boolean = false;\n @Prop() variant?: 'default' | 'compact' | 'vertical' = 'default';\n\n\n @State() stepsCount: number;\n @State() shouldEmitEvent: boolean = true;\n @State() emittedByClick: boolean = false;\n\n @Listen('ifxChange') \n onStepChange(event: CustomEvent) {\n const steps = this.getSteps();\n const previousActiveStep = steps[event.detail.previousActiveStep-1];\n if (previousActiveStep && !previousActiveStep.complete) {\n previousActiveStep.setAttribute('error', 'true');\n }\n } \n\n @Watch('activeStep')\n handleActiveStep(newStep: number, oldStep: number) {\n const steps = this.getSteps();\n if (!this.shouldEmitEvent) {\n this.shouldEmitEvent = true;\n return;\n }\n // Skipping until the enabled step is found \n if (!steps[newStep-1].disabled) {\n this.emitIfxChange(newStep, oldStep);\n } else {\n // If coming from higher step number to the lower step number\n if (newStep < oldStep) {\n let i = newStep;\n this.shouldEmitEvent = false;\n while (i >= 1 && steps[i-1].disabled) i--;\n // if all the steps are disabled no change.\n if (i < 1) {\n this.activeStep = oldStep;\n } else {\n this.emitIfxChange(i, oldStep);\n this.activeStep = i;\n }\n } \n // If coming from lower step number to the higher step number\n else {\n let i = newStep;\n this.shouldEmitEvent = false;\n while (i <= this.stepsCount && steps[i-1].disabled) i++;\n if (i > this.stepsCount) {\n this.activeStep = oldStep;\n } else {\n this.emitIfxChange(i, oldStep);\n this.activeStep = i;\n }\n }\n }\n }\n \n emitIfxChange(activeStep: number, previousActiveStep: number) {\n this.ifxChange.emit({activeStep: activeStep, \n previousActiveStep: previousActiveStep, \n totalSteps: this.stepsCount,\n emittedByClick: this.emittedByClick\n });\n this.emittedByClick = false;\n }\n\n getSteps() {\n const steps: NodeListOf<HTMLIfxStepElement> = this.el.querySelectorAll('ifx-step');\n return steps;\n }\n\n\n addStepIdsToStepsAndCountSteps() {\n const steps = this.getSteps()\n steps[steps.length - 1].lastStep = true;\n for (let i = 0; i < steps.length; i++) {\n steps[i].stepId = i + 1;\n }\n this.stepsCount = steps.length;\n }\n\n\n setActiveStep(stepId: number, setByClick: boolean = false) {\n this.emittedByClick = setByClick;\n this.activeStep = stepId;\n }\n\n setStepsBeforeActiveToComplete() {\n const steps = this.getSteps();\n steps.forEach( (step, stepId) => {\n if (stepId+1 < this.activeStep) step.complete = true;\n });\n }\n\n syncIfxSteps() {\n const steps = this.getSteps()\n for (let i = 0; i < steps.length; i++) {\n const stepperState: StepperState = { \n activeStep: this.activeStep,\n indicatorPosition: (this.indicatorPosition !== 'right' ? 'left' : 'right'), \n showStepNumber: this.showStepNumber, \n variant: ((this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant), \n setActiveStep: this.setActiveStep.bind(this)\n };\n steps[i].stepperState = stepperState;\n }\n }\n\n setInitialActiveStep() {\n this.activeStep = Math.max(1, Math.min(this.stepsCount + (this.variant !== 'compact' ? 1 : 0), this.activeStep));\n }\n\n\n componentWillLoad() {\n this.addStepIdsToStepsAndCountSteps();\n this.setInitialActiveStep();\n this.setStepsBeforeActiveToComplete();\n }\n \n componentDidLoad() {\n this.syncIfxSteps();\n }\n\n componentWillUpdate() {\n this.syncIfxSteps();\n }\n\n render() {\n return (\n <div aria-label = 'a stepper' \n role = 'navigation' \n class = {`stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-'+this.indicatorPosition: ''}`}>\n {\n /* Progress bar for compact variant. */\n (this.variant === 'compact') && \n <div class = 'stepper-progress'>\n <div class = 'progress-detail'>\n {`${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`}\n </div>\n </div>\n }\n \n {/* Slot for ifx-steps. */}\n <div class = {`stepper-wrapper`}>\n <slot />\n </div>\n </div>\n );\n };\n\n componentDidRender() {\n /* Updating progress bar in compact version. */\n if (this.variant == 'compact') {\n const progressBar: HTMLElement = this.el.shadowRoot.querySelector('.stepper-progress');\n progressBar.style.setProperty('--pb', `${(this.activeStep / (this.stepsCount)) * 100}%`);\n }\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAa,m9BACnB,MAAAC,EAAeD,E,MCiBFE,EAAO,M,8EAK8B,E,uBACC,O,oBACZ,M,aACoB,U,+CAInB,K,oBACD,K,CAGnC,YAAAC,CAAaC,GACT,MAAMC,EAAQC,KAAKC,WACnB,MAAMC,EAAqBH,EAAMD,EAAMK,OAAOD,mBAAmB,GACjE,GAAIA,IAAuBA,EAAmBE,SAAU,CACpDF,EAAmBG,aAAa,QAAS,O,EAKjD,gBAAAC,CAAiBC,EAAiBC,GAC9B,MAAMT,EAAQC,KAAKC,WACnB,IAAKD,KAAKS,gBAAiB,CACvBT,KAAKS,gBAAkB,KACvB,M,CAGJ,IAAKV,EAAMQ,EAAQ,GAAGG,SAAU,CAC5BV,KAAKW,cAAcJ,EAASC,E,KACzB,CAEH,GAAID,EAAUC,EAAS,CACnB,IAAII,EAAIL,EACRP,KAAKS,gBAAkB,MACvB,MAAOG,GAAK,GAAKb,EAAMa,EAAE,GAAGF,SAAUE,IAEtC,GAAIA,EAAI,EAAG,CACPZ,KAAKa,WAAaL,C,KACf,CACHR,KAAKW,cAAcC,EAAGJ,GACtBR,KAAKa,WAAaD,C,MAIrB,CACD,IAAIA,EAAIL,EACRP,KAAKS,gBAAkB,MACvB,MAAOG,GAAKZ,KAAKc,YAAcf,EAAMa,EAAE,GAAGF,SAAUE,IACpD,GAAIA,EAAIZ,KAAKc,WAAY,CACrBd,KAAKa,WAAaL,C,KACf,CACHR,KAAKW,cAAcC,EAAGJ,GACtBR,KAAKa,WAAaD,C,IAMlC,aAAAD,CAAcE,EAAoBX,GAC9BF,KAAKe,UAAUC,KAAK,CAACH,WAAYA,EAC7BX,mBAAoBA,EACpBe,WAAYjB,KAAKc,WACjBI,eAAgBlB,KAAKkB,iBAEzBlB,KAAKkB,eAAiB,K,CAG1B,QAAAjB,GACI,MAAMF,EAAwCC,KAAKmB,GAAGC,iBAAiB,YACvE,OAAOrB,C,CAIX,8BAAAsB,GACI,MAAMtB,EAAQC,KAAKC,WACnBF,EAAMA,EAAMuB,OAAS,GAAGC,SAAW,KACnC,IAAK,IAAIX,EAAI,EAAGA,EAAIb,EAAMuB,OAAQV,IAAK,CACnCb,EAAMa,GAAGY,OAASZ,EAAI,C,CAE1BZ,KAAKc,WAAaf,EAAMuB,M,CAI5B,aAAAG,CAAcD,EAAgBE,EAAsB,OAChD1B,KAAKkB,eAAiBQ,EACtB1B,KAAKa,WAAaW,C,CAGtB,8BAAAG,GACI,MAAM5B,EAAQC,KAAKC,WACnBF,EAAM6B,SAAS,CAACC,EAAML,KAClB,GAAIA,EAAO,EAAIxB,KAAKa,WAAYgB,EAAKzB,SAAW,IAAI,G,CAI5D,YAAA0B,GACI,MAAM/B,EAAQC,KAAKC,WACnB,IAAK,IAAIW,EAAI,EAAGA,EAAIb,EAAMuB,OAAQV,IAAK,CACnC,MAAMmB,EAA6B,CAC/BlB,WAAYb,KAAKa,WACjBmB,kBAAoBhC,KAAKgC,oBAAsB,QAAU,OAAS,QAClEC,eAAgBjC,KAAKiC,eACrBC,QAAWlC,KAAKkC,UAAY,WAAalC,KAAKkC,UAAY,WAAc,UAAYlC,KAAKkC,QACzFT,cAAezB,KAAKyB,cAAcU,KAAKnC,OAE3CD,EAAMa,GAAGmB,aAAeA,C,EAIhC,oBAAAK,GACIpC,KAAKa,WAAawB,KAAKC,IAAI,EAAGD,KAAKE,IAAIvC,KAAKc,YAAcd,KAAKkC,UAAY,UAAY,EAAI,GAAIlC,KAAKa,Y,CAIxG,iBAAA2B,GACIxC,KAAKqB,iCACLrB,KAAKoC,uBACLpC,KAAK2B,gC,CAGT,gBAAAc,GACIzC,KAAK8B,c,CAGT,mBAAAY,GACI1C,KAAK8B,c,CAGT,MAAAa,GACI,OACIC,EAAA,OAAAC,IAAA,wDAAkB,YACdC,KAAO,aACPC,MAAS,WAAY/C,KAAKkC,UAAY,WAAalC,KAAKkC,UAAY,WAAc,UAAYlC,KAAKkC,WAAWlC,KAAKkC,UAAY,UAAY,WAAWlC,KAAKgC,kBAAmB,MAGzKhC,KAAKkC,UAAY,WAClBU,EAAA,OAAAC,IAAA,2CAAKE,MAAQ,oBACTH,EAAA,OAAAC,IAAA,2CAAKE,MAAQ,mBACR,GAAGV,KAAKE,IAAIvC,KAAKa,WAAYb,KAAKc,kBAAkBd,KAAKc,eAMtE8B,EAAA,OAAAC,IAAA,2CAAKE,MAAS,mBACVH,EAAA,QAAAC,IAAA,8C,CAMhB,kBAAAG,GAEI,GAAIhD,KAAKkC,SAAW,UAAW,CAC3B,MAAMe,EAA2BjD,KAAKmB,GAAG+B,WAAWC,cAAc,qBAClEF,EAAYG,MAAMC,YAAY,OAAQ,GAAIrD,KAAKa,WAAcb,KAAe,WAAK,O","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-c1b1b593.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["iconButtonCss","IfxIconButtonStyle0","IconButton","handleClick","event","this","disabled","stopImmediatePropagation","setFocus","focusableElement","focus","componentWillLoad","shape","render","h","Host","key","href","ref","el","class","getClassNames","undefined","target","rel","icon","type","getVariantClass","variant","getSizeClass","size","classNames"],"sources":["src/components/icon-button/icon-button.scss?tag=ifx-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-flex;\n}\n\n.btn {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: tokens.$ifxSize500;\n padding: 8px;\n gap: tokens.$ifxSpace100;\n color: tokens.$ifxColorBaseWhite;\n flex-direction: row;\n font-weight: tokens.$ifxFontWeightSemibold;\n border-radius: tokens.$ifxBorderRadius12;\n line-height: tokens.$ifxLineHeightM;\n outline: none;\n font-family: var(--ifx-font-family);\n text-decoration: none;\n user-select: none;\n border: 1px solid rgba(0, 0, 0, 0);\n font-size: tokens.$ifxFontSizeM;\n transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n}\n\n.btn:not(.disabled) {\n cursor: pointer;\n}\n\n.btn-primary {\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorOcean500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorBaseWhite;\n pointer-events: none;\n\n }\n}\n\n\n.btn-secondary {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n border-color: tokens.$ifxColorOcean500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n.btn-tertiary {\n background-color: transparent;\n color: tokens.$ifxColorBaseBlack;\n\n &:disabled,\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n }\n}\n\n\n.btn {\n\n &.icon-button {\n min-width: initial;\n min-height: initial;\n width: tokens.$ifxSize500;\n height: tokens.$ifxSize500;\n padding: 0;\n justify-content: center;\n\n &.btn-round {\n border-radius: 100px;\n }\n\n &.btn-square {\n border-radius: tokens.$ifxBorderRadius12;\n }\n\n &.btn-s {\n width: tokens.$ifxSize400;\n height: tokens.$ifxSize400;\n padding: 8px;\n }\n\n\n &.btn-l {\n width: tokens.$ifxSize600;\n height: tokens.$ifxSize600;\n padding: 8px;\n }\n }\n\n &.btn-primary:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n background-color: tokens.$ifxColorOcean600;\n border-color: tokens.$ifxColorOcean600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorOcean700;\n border-color: tokens.$ifxColorOcean700;\n }\n }\n\n\n &.btn-secondary:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n background-color: tokens.$ifxColorOcean600;\n border-color: tokens.$ifxColorOcean600;\n color: tokens.$ifxColorBaseWhite;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorOcean700;\n border-color: tokens.$ifxColorOcean700;\n }\n }\n\n &.btn-tertiary:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n color: tokens.$ifxColorBaseBlack;\n box-shadow: 0 0 0 0px tokens.$ifxColorBaseWhite, 0 0 0 2px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n color: tokens.$ifxColorOcean500;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorOcean600;\n }\n }\n}","import { Component, Prop, h, Host, Method, Element, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n@Component({\n tag: 'ifx-icon-button',\n styleUrl: 'icon-button.scss',\n shadow: true,\n})\n\nexport class IconButton {\n @Prop() variant: 'primary' | 'secondary' | 'tertiary';\n @Prop() size: string;\n @Prop() disabled: boolean;\n @Prop() icon: string;\n @Prop() href: string;\n @Prop() target: string = '_self';\n @Prop() shape: string = 'round';\n @Element() el;\n\n private focusableElement: HTMLElement;\n\n @Listen('click', { capture: true })\n handleClick(event: Event) {\n if (this.disabled) {\n event.stopImmediatePropagation();\n }\n }\n\n @Method()\n async setFocus() {\n this.focusableElement.focus();\n }\n\n componentWillLoad() {\n if (this.shape === '') {\n this.shape = 'round';\n }\n }\n\n render() {\n return (\n <Host>\n {this.href ? (\n <a\n aria-disabled={this.disabled}\n aria-label='a clickable icon button'\n ref={(el) => (this.focusableElement = el)}\n class={this.getClassNames()}\n href={!this.disabled ? this.href : undefined}\n target={this.target}\n rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n >\n <ifx-icon icon={this.icon}></ifx-icon>\n </a>\n ) : (\n <button\n class={this.getClassNames()}\n type=\"button\"\n >\n <ifx-icon icon={this.icon}></ifx-icon>\n </button>\n )}\n </Host>\n );\n }\n\n getVariantClass() {\n return `${this.variant}` === \"secondary\"\n ? `secondary`\n : `${this.variant}` === 'tertiary'\n ? `tertiary`\n : `primary`;\n }\n\n getSizeClass() {\n if (`${this.size}` === \"xs\") {\n return \"xs\"\n }\n else if (`${this.size}` === \"s\") {\n return \"s\"\n }\n else if (`${this.size}` === \"l\") {\n return \"l\"\n }\n else return \"\";\n }\n\n getClassNames() {\n return classNames(\n 'btn icon-button',\n `btn-${this.shape}`,\n this.size && `btn-${this.getSizeClass()}`,\n `btn-${this.getVariantClass()}`,\n this.disabled ? 'disabled' : ''\n );\n }\n}"],"mappings":"6FAAA,MAAMA,EAAgB,y4EACtB,MAAAC,EAAeD,E,MCSFE,EAAU,M,gJAMI,Q,WACD,O,CAMxB,WAAAC,CAAYC,GACV,GAAIC,KAAKC,SAAU,CACjBF,EAAMG,0B,EAKV,cAAMC,GACJH,KAAKI,iBAAiBC,O,CAGxB,iBAAAC,GACE,GAAIN,KAAKO,QAAU,GAAI,CACrBP,KAAKO,MAAQ,O,EAIjB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACFX,KAAKY,KACJH,EAAA,qBACiBT,KAAKC,SAAQ,aACjB,0BACXY,IAAMC,GAAQd,KAAKI,iBAAmBU,EACtCC,MAAOf,KAAKgB,gBACZJ,MAAOZ,KAAKC,SAAWD,KAAKY,KAAOK,UACnCC,OAAQlB,KAAKkB,OACbC,IAAKnB,KAAKkB,SAAW,SAAW,sBAAwBD,WAExDR,EAAA,YAAUW,KAAMpB,KAAKoB,QAGvBX,EAAA,UACEM,MAAOf,KAAKgB,gBACZK,KAAK,UAELZ,EAAA,YAAUW,KAAMpB,KAAKoB,Q,CAO/B,eAAAE,GACE,MAAO,GAAGtB,KAAKuB,YAAc,YACzB,YACA,GAAGvB,KAAKuB,YAAc,WACpB,WACA,S,CAGR,YAAAC,GACE,GAAI,GAAGxB,KAAKyB,SAAW,KAAM,CAC3B,MAAO,I,MAEJ,GAAI,GAAGzB,KAAKyB,SAAW,IAAK,CAC/B,MAAO,G,MAEJ,GAAI,GAAGzB,KAAKyB,SAAW,IAAK,CAC/B,MAAO,G,MAEJ,MAAO,E,CAGd,aAAAT,GACE,OAAOU,EACL,kBACA,OAAO1B,KAAKO,QACZP,KAAKyB,MAAQ,OAAOzB,KAAKwB,iBACzB,OAAOxB,KAAKsB,oBACZtB,KAAKC,SAAW,WAAa,G","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-c43ec0c8.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,c as e,h as i,a as s,g as a}from"./p-6b122987.js";const l=":host{display:block;width:100%}.search-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-start;margin-bottom:16px}.components-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-end;align-content:flex-end;flex-wrap:wrap;gap:16px}.filter-slot-wrapper{flex-grow:1;flex-basis:100%;max-width:100%}@media (max-width: 1024px){.more-filters-wrapper{order:3;width:100%;display:flex;justify-content:center;padding-top:16px;}}@media (min-width: 720px) and (max-width: 1024px){.filter-slot-wrapper{flex-basis:calc((100% - 16px) / 2);max-width:calc((100% - 16px) / 2)}}@media (min-width: 1025px){.filter-slot-wrapper{flex-basis:auto;max-width:200px}::slotted([slot=filter-search]){max-width:828px}}::slotted([slot=filter-search]){flex-grow:1;flex-basis:100%;width:100%}";const r=l;const f=class{constructor(i){t(this,i);this.ifxTopbarFilterChange=e(this,"ifxTopbarFilterChange",7);this.handleMoreFiltersClick=()=>{this.showAllFilters=true;this.updateVisibleSlots()};this.handleResetEvent=()=>{var t;const e=(t=this.el.shadowRoot)===null\|\|t===void 0?void 0:t.querySelector('slot[name="filter-search"]');if(e instanceof HTMLSlotElement){const t=e.assignedElements({flatten:true});t.forEach((t=>{const e=t.querySelector("ifx-filter-search");const i=e.shadowRoot.querySelectorAll("ifx-search-field");if(i.length>0){i.forEach((t=>{t.value=""}))}}))}this.selectedOptions=[];this.ifxTopbarFilterChange.emit(this.selectedOptions)};this.handleSearchChange=t=>{this.handleTopbarFilterChange(t)};this.handleFilterSelect=t=>{this.handleTopbarFilterChange(t)};this.handleTopbarFilterChange=t=>{const e=[...this.selectedOptions];if(t.type==="ifxFilterSearchChange"){const{filterName:i,filterValue:s}=t.detail;const a=e.findIndex((t=>t.filterName===i));if(a!==-1){e[a].filterValues=[s]}else{e.push({filterName:i,filterValues:[s],type:"text"})}}else if(t.type==="ifxFilterSelect"){const{filterName:i,filterValues:s,type:a}=t.detail;const l=e.findIndex((t=>t.filterName===i));if(l!==-1){e[l].filterValues=s;e[l].type=a}else{e.push({filterName:i,filterValues:s,type:a})}}this.selectedOptions=e;this.ifxTopbarFilterChange.emit(this.selectedOptions)};this.selectedOptions=[];this.showAllFilters=false;this.maxShownFilters=4;this.visibleSlots=undefined;this.showMoreFiltersButton=true}connectedCallback(){this.el.addEventListener("ifxFilterSelect",this.handleTopbarFilterChange);this.el.addEventListener("ifxFilterSearchChange",this.handleSearchChange);window.addEventListener("ifxResetFiltersEvent",this.handleResetEvent)}componentWillUnload(){this.el.removeEventListener("ifxFilterSelect",this.handleTopbarFilterChange);this.el.removeEventListener("ifxFilterSearchChange",this.handleSearchChange);window.removeEventListener("ifxResetFiltersEvent",this.handleResetEvent)}componentDidLoad(){this.updateVisibleSlots()}updateVisibleSlots(){this.visibleSlots=this.showAllFilters?Number.MAX_SAFE_INTEGER:this.maxShownFilters}render(){const t=Math.max(0,this.visibleSlots);const e=this.el.querySelectorAll("ifx-set-filter").length;const a=Math.min(t,e,Number.MAX_SAFE_INTEGER);const l=Array.from({length:a},((t,e)=>i("div",{class:"filter-slot-wrapper"},i("slot",{name:`filter-component-${e+1}`}))));return i(s,{key:"d5aad85edc16369a3487a18f3e3f24a5b914e820"},i("div",{key:"7f49a493bd5bafec1286794e89ae67adea9e1967",class:"search-container"},i("slot",{key:"9d7ab3a3294ac64f7cc47ae33b1839871d06df94",name:"filter-search"})," "),i("div",{key:"9bf93a1030392d67940228df88b11b52685b757f",class:"components-container"},l.length>0?l:i("slot",{name:"filter-component"}),this.showMoreFiltersButton&&!this.showAllFilters&&i("div",{key:"fc4c6c9e15cf96fc1c129638688fdf2a27f91dc7",class:"more-filters-wrapper",onClick:this.handleMoreFiltersClick},i("ifx-button",{key:"8f26ef634ef3e27d893e1998167f07a4315cb59a",type:"button",disabled:false,variant:"tertiary",size:"m",target:"_blank",theme:"default","full-width":"false"},i("ifx-icon",{key:"23cece990fc63afda2e9864887865467bec55e6f",icon:"filter-16"}),"More filters"))))}get el(){return a(this)}};f.style=r;export{f as ifx_filter_bar};
2	- //# sourceMappingURL=p-c43ec0c8.entry.js.map

package/dist/infineon-design-system-stencil/p-c43ec0c8.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["filterBarCss","IfxFilterBarStyle0","FilterBar","this","handleMoreFiltersClick","showAllFilters","updateVisibleSlots","handleResetEvent","filterSearchSlot","_a","el","shadowRoot","querySelector","HTMLSlotElement","filterSearchSlottedElements","assignedElements","flatten","forEach","filterSearchWrapper","filterSearch","searchField","querySelectorAll","length","searchFieldElement","value","selectedOptions","ifxTopbarFilterChange","emit","handleSearchChange","event","handleTopbarFilterChange","handleFilterSelect","newSelectedOptions","type","filterName","filterValue","detail","existingOptionIndex","findIndex","option","filterValues","push","connectedCallback","addEventListener","window","componentWillUnload","removeEventListener","componentDidLoad","visibleSlots","Number","MAX_SAFE_INTEGER","maxShownFilters","render","safeVisibleSlots","Math","max","actualNumberOfComponents","slotsToShow","min","slots","Array","from","_","i","h","class","name","Host","key","showMoreFiltersButton","onClick","disabled","variant","size","target","theme","icon"],"sources":["src/components/table-advanced-version/filter-bar/filter-bar.scss?tag=ifx-filter-bar&encapsulation=shadow","src/components/table-advanced-version/filter-bar/filter-bar.tsx"],"sourcesContent":["/* filter-bar.scss */\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: block;\n width: 100%;\n}\n\n.search-container {\n display: flex;\n width: calc(100% - 48px); /* Adjust width to account for padding */\n padding-left: 24px;\n padding-right: 24px; flex-direction: row;\n align-items: flex-start;\n margin-bottom: tokens.$ifxSpace200;\n}\n\n.components-container {\n display: flex;\n width: calc(100% - 48px); /* Adjust width to account for padding */\n padding-left: 24px;\n padding-right: 24px; flex-direction: row;\n align-items: flex-end;\n align-content:flex-end;\n flex-wrap: wrap;\n gap: tokens.$ifxSpace200;\n}\n\n.filter-slot-wrapper {\n flex-grow: 1;\n flex-basis: 100%; \n max-width: 100%; \n }\n\n@media (max-width: 1024px) { /* Adjust based on your breakpoints for mid/small screens */\n .more-filters-wrapper {\n order: 3; /* Keeps the button at the end/new row */\n width: 100%; /* Takes full width to allow centering */\n display: flex; /* Enables flexbox properties */\n justify-content: center; /* Centers the button horizontally */\n padding-top: tokens.$ifxSpace200; /* Adds space above the button, adjust as needed */\n }\n }\n\n\n @media (min-width: 720px) and (max-width: 1024px) {\n .filter-slot-wrapper {\n flex-basis: calc((100% - tokens.$ifxSpace200) / 2);\n max-width: calc((100% - tokens.$ifxSpace200) / 2);\n }\n \n\n}\n\n @media (min-width: 1025px) {\n .filter-slot-wrapper {\n flex-basis: auto; \n max-width: 200px; \n }\n\n ::slotted([slot=\"filter-search\"]) {\n max-width: 828px;\n }\n }\n \n ::slotted([slot=\"filter-search\"]) {\n flex-grow: 1;\n flex-basis: 100%;\n width: 100%; \n }","// FilterBar.tsx\nimport { Component, h, Host, Element, Event, EventEmitter, State, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ifx-filter-bar',\n styleUrl: 'filter-bar.scss',\n shadow: true\n})\nexport class FilterBar {\n @Element() el: HTMLElement;\n @State() selectedOptions: Array<{ filterName: string, filterValues: [string], type: string }> = [];\n @Event() ifxTopbarFilterChange: EventEmitter;\n @State() showAllFilters: boolean = false;\n @Prop() maxShownFilters: number = 4; // Default to 4, can be overridden by parent component\n @State() visibleSlots: number;\n@Prop() showMoreFiltersButton: boolean = true;\n\n /* If the component is ever removed and then reattached to the DOM, \nconnectedCallback ensures that the event listeners are properly set up again */\n connectedCallback() {\n this.el.addEventListener('ifxFilterSelect', this.handleTopbarFilterChange);\n this.el.addEventListener('ifxFilterSearchChange', this.handleSearchChange);\n window.addEventListener('ifxResetFiltersEvent', this.handleResetEvent);\n }\n\n componentWillUnload() {\n this.el.removeEventListener('ifxFilterSelect', this.handleTopbarFilterChange);\n this.el.removeEventListener('ifxFilterSearchChange', this.handleSearchChange);\n window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);\n }\n\n \n componentDidLoad() {\n this.updateVisibleSlots();\n }\n\n// Modify updateVisibleSlots to use showAllFilters to determine the number of slots\nupdateVisibleSlots() {\n this.visibleSlots = this.showAllFilters ? Number.MAX_SAFE_INTEGER : this.maxShownFilters;\n }\n\n handleMoreFiltersClick = () => {\n this.showAllFilters = true;\n this.updateVisibleSlots(); // Recalculate visible slots based on the new state\n }\n\n handleResetEvent = () => {\n const filterSearchSlot = this.el.shadowRoot?.querySelector('slot[name=\"filter-search\"]');\n if (filterSearchSlot instanceof HTMLSlotElement) { // Ensure it's treated as HTMLSlotElement\n const filterSearchSlottedElements = filterSearchSlot.assignedElements({ flatten: true });\n \n filterSearchSlottedElements.forEach((filterSearchWrapper: HTMLElement) => {\n const filterSearch = filterSearchWrapper.querySelector('ifx-filter-search');\n\n const searchField = filterSearch.shadowRoot.querySelectorAll('ifx-search-field')\n\n if (searchField.length > 0) {\n searchField.forEach((searchFieldElement: any) => {\n searchFieldElement.value = '';\n });\n }\n });\n }\n\n this.selectedOptions = [];\n\n // Emit the change to inform any parent components that the filters have been reset\n this.ifxTopbarFilterChange.emit(this.selectedOptions);\n }\n\n\n handleSearchChange = (event: CustomEvent) => {\n this.handleTopbarFilterChange(event);\n }\n\n handleFilterSelect = (event: CustomEvent) => {\n this.handleTopbarFilterChange(event);\n }\n\n handleTopbarFilterChange = (event: CustomEvent) => {\n const newSelectedOptions = [...this.selectedOptions];\n\n if (event.type === 'ifxFilterSearchChange') {\n const { filterName, filterValue } = event.detail;\n const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterName === filterName);\n\n if (existingOptionIndex !== -1) {\n // If an existing filter is found, update its value\n newSelectedOptions[existingOptionIndex].filterValues = [filterValue];\n } else {\n newSelectedOptions.push({ filterName: filterName, filterValues: [filterValue], type: 'text' });\n }\n } else if (event.type === 'ifxFilterSelect') {\n const { filterName, filterValues, type } = event.detail;\n const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterName === filterName);\n\n if (existingOptionIndex !== -1) {\n newSelectedOptions[existingOptionIndex].filterValues = filterValues;\n newSelectedOptions[existingOptionIndex].type = type; // Update type based on the number of selected items\n } else {\n newSelectedOptions.push({ filterName: filterName, filterValues: filterValues, type: type });\n }\n }\n\n this.selectedOptions = newSelectedOptions;\n this.ifxTopbarFilterChange.emit(this.selectedOptions);\n }\n\n render() {\n const safeVisibleSlots = Math.max(0, this.visibleSlots);\n\n const actualNumberOfComponents = this.el.querySelectorAll('ifx-set-filter').length; \n // Calculate slotsToShow safely\n const slotsToShow = Math.min(safeVisibleSlots, actualNumberOfComponents, Number.MAX_SAFE_INTEGER);\n\n const slots = Array.from({ length: slotsToShow }, (_, i) => (\n <div class=\"filter-slot-wrapper\">\n <slot name={`filter-component-${i + 1}`}></slot>\n </div>\n ));\n\n return (\n <Host>\n <div class=\"search-container\">\n <slot name=\"filter-search\"></slot> {/* Directly place the search slot here */}\n </div>\n <div class=\"components-container\">\n {slots.length > 0 ? slots : <slot name=\"filter-component\"></slot>}\n {this.showMoreFiltersButton && !this.showAllFilters && (\n <div class=\"more-filters-wrapper\" onClick={this.handleMoreFiltersClick}>\n <ifx-button type=\"button\" disabled={false} variant=\"tertiary\" size=\"m\" target=\"_blank\" theme=\"default\" full-width=\"false\">\n <ifx-icon icon=\"filter-16\"></ifx-icon>More filters\n </ifx-button>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-c82d6a95.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["datePickerCss","IfxDatePickerStyle0","DatePicker","this","inputId","datePickerId","getDate","e","inputValue","target","value","selectedDate","Date","day","month","getMonth","year","getFullYear","internals","setFormValue","ifxDate","emit","input","el","shadowRoot","querySelector","classList","add","toISOString","substring","handleInputFocusOnIconClick","focus","getBrowser","navigator","userAgent","indexOf","setFireFoxClasses","browser","contains","remove","componentDidLoad","formResetCallback","render","h","key","class","error","disabled","htmlFor","_a","label","trim","size","type","success","undefined","AriaLabel","max","min","required","onChange","role","onClick","icon","_b","caption"],"sources":["src/components/date-picker/date-picker.scss?tag=ifx-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n\n.date__picker-container {\n display: flex;\n flex-direction: column;\n\n & .label__wrapper {\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody03;\n }\n\n &.disabled {\n .label__wrapper {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n &.error {\n .caption__wrapper {\n color: tokens.$ifxColorRed500;\n }\n }\n\n &.disabled {\n .caption__wrapper {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n & .caption__wrapper {\n margin-top: tokens.$ifxSpace50;\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody05;\n }\n}\n\n.date__picker-input {\n font-family: 'Source Sans 3';\n outline: none;\n width: 100%;\n cursor: pointer;\n border-radius: 1px;\n border: 1px solid tokens.$ifxColorEngineering400;\n height: 100%;\n\n &.firefox__classes {\n padding: 8px 16px;\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n cursor: pointer;\n }\n\n &:focus:not(.error, .success) {\n border-color: tokens.$ifxColorOcean500;\n }\n\n &:hover:not(:disabled, :focus, .error, .success) {\n border-color: tokens.$ifxColorEngineering500;\n }\n\n &:disabled {\n border-color: tokens.$ifxColorEngineering500;\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.error {\n border-color: tokens.$ifxColorRed500;\n }\n\n &.success:not(.error) {\n border-color: tokens.$ifxColorGreen500;\n }\n\n &::-webkit-datetime-edit-text {\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n\n &.has-value::-webkit-datetime-edit-text {\n color: tokens.$ifxColorBaseBlack;\n }\n\n &.has-value::-webkit-datetime-edit {\n color: tokens.$ifxColorBaseBlack;\n }\n}\n\n::-webkit-datetime-edit {\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n padding: 8px 16px;\n padding-bottom: 9px;\n transform: translateY(1px);\n}\n\n::-webkit-inner-spin-button {\n display: none;\n}\n\n::-webkit-calendar-picker-indicator {\n position: absolute;\n right: 15px;\n font-size: 19px;\n cursor: pointer;\n border-radius: 1px;\n &:focus-within {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n}\n\n.input__wrapper {\n display: flex;\n justify-content: space-between;\n align-items: center;\n align-self: stretch;\n background: tokens.$ifxColorBaseWhite;\n position: relative;\n &.large {\n height: 40px;\n }\n\n &.small {\n height: 36px;\n }\n\n &.disabled {\n & .icon__wrapper {\n background-color: tokens.$ifxColorEngineering200;\n }\n }\n}\n\n.icon__wrapper {\n position: absolute;\n right: 17px;\n padding: 2px;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n z-index: 100;\n background-color: tokens.$ifxColorBaseWhite;\n line-height: 16px;\n\n & ifx-icon {\n vertical-align: middle;\n }\n}\n","import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-date-picker',\n styleUrl: 'date-picker.scss',\n shadow: true,\n formAssociated: true,\n})\n\nexport class DatePicker {\n private inputId: string = `ifx-date-picker-${++datePickerId}`;\n\n @Element() el: HTMLElement;\n @Prop() size: string = 's';\n @Prop() error: boolean = false;\n @Prop() success: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() AriaLabel: string;\n @Prop() value: string;\n @Prop() max: string;\n @Prop() min: string;\n @Prop() required: boolean = false;\n @Prop() label: string;\n @Prop() caption: string;\n\n @AttachInternals() internals: ElementInternals;\n\n @Event() ifxDate: EventEmitter;\n\n getDate(e) { \n const inputValue = e.target.value;\n const selectedDate = new Date(inputValue);\n const day = selectedDate.getDate();\n const month = selectedDate.getMonth() + 1; \n const year = selectedDate.getFullYear();\n \n if (!inputValue) {\n this.internals.setFormValue(null);\n this.ifxDate.emit({day, month, year});\n return;\n }\n\n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n input.classList.add('has-value');\n\n this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\n this.ifxDate.emit({day, month, year})\n }\n\n handleInputFocusOnIconClick() { \n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n if(input) { \n input.focus()\n }\n }\n\n getBrowser() {\n if( navigator.userAgent.indexOf(\"Chrome\") != -1 ) {\n return \"Chrome\";\n } else if( navigator.userAgent.indexOf(\"Opera\") != -1 ) {\n return \"Opera\";\n } else if( navigator.userAgent.indexOf(\"MSIE\") != -1 ) {\n return \"IE\";\n } else if( navigator.userAgent.indexOf(\"Firefox\") != -1 ) {\n return \"Firefox\";\n } else {\n return \"unknown\";\n }\n }\n\n setFireFoxClasses() { \n const browser = this.getBrowser()\n const input = this.el.shadowRoot.querySelector('.date__picker-input');\n\n if(browser === 'Firefox') { \n input.classList.add('firefox__classes')\n } else if(input.classList.contains('firefox__classes')) { \n input.classList.remove('firefox__classes')\n }\n }\n\n componentDidLoad() { \n this.setFireFoxClasses()\n if (this.value) {\n this.getDate({ target: { value: this.value } });\n }\n }\n\n formResetCallback() {\n this.internals.setFormValue(null);\n }\n\n render() {\n return (\n <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled': ''}`}>\n\n <label class='label__wrapper' htmlFor={ this.inputId }>\n { this.label?.trim() }\n </label>\n\n <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n <input\n type=\"date\"\n class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\n disabled={this.disabled ? true : undefined}\n aria-invalid={this.error ? true : undefined}\n aria-label={this.AriaLabel}\n max={this.max}\n min={this.min}\n value={this.value}\n required={this.required}\n onChange={(e) => this.getDate(e)} />\n <div class=\"icon__wrapper\" role=\"button\" onClick={() => this.handleInputFocusOnIconClick()}>\n <ifx-icon icon='calendar16' aria-hidden=\"true\"></ifx-icon>\n </div>\n </div>\n\n { this.caption?.trim() && (\n <div class='caption__wrapper'>\n { this.caption.trim() }\n </div> \n )}\n </div>\n )\n }\n}\n\nlet datePickerId = 0;"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-ca1b4c32.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["queryShadowRoot","root","skipNode","isMatch","maxDepth","depth","matches","traverseSlot","$slot","assignedNodes","filter","node","nodeType","length","$slotParent","parentElement","children","Array","from","$child","push","shadowRoot","tagName","isHidden","$elem","hasAttribute","getAttribute","style","display","opacity","visibility","isDisabled","isFocusable","HTMLAnchorElement","HTMLAreaElement","HTMLButtonElement","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","HTMLIFrameElement","animationTo","element","keyframes","options","animated","animate","Object","assign","fill","addEventListener","commitStyles","cancel","keyframeDefaults","easing","KEYFRAMES","fadeIn","offset","fadeOut","modalCss","IfxModalStyle0","IfxModal","this","focusableElements","handleTopFocus","attemptFocus","getLastFocusableElement","handleBottomFocus","getFirstFocusableElement","handleKeypress","event","showModal","key","doBeforeClose","opened","componentDidLoad","hostElement","el","setTimeout","closeButton","focus","open","anim","modalContainer","duration","_a","_b","blur","ifxModalOpen","emit","err","close","ifxModalClose","removeEventListener","trigger","triggers","prevented","some","defaultPrevented","openedChanged","newValue","handleOverlayClick","closeOnOverlayClick","handleButtonsSlotChange","e","currentTarget","assignedElements","childElementCount","slotButtonsPresent","render","isAlertVariant","variant","h","Host","ref","class","onClick","onFocus","tabindex","size","role","caption","alertIcon","icon","showCloseButton","name","onSlotchange"],"sources":["src/global/utils/focus-trap.ts","src/global/utils/animation.ts","src/components/modal/modal.scss?tag=ifx-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["/**\n * Copy/pasted from https://github.com/andreasbm/focus-trap\n */\n\n/**\n * Traverses the slots of the open shadowroots and returns all children matching the query.\n * We need to traverse each child-depth one at a time because if an element should be skipped\n * (for example because it is hidden) we need to skip all of it's children. If we use querySelectorAll(\"*\")\n * the information of whether the children is within a hidden parent is lost.\n * @param {ShadowRoot | HTMLElement} root\n * @param skipNode\n * @param isMatch\n * @param {number} maxDepth\n * @param {number} depth\n * @returns {HTMLElement[]}\n */\nexport function queryShadowRoot(\n root: ShadowRoot | HTMLElement,\n skipNode: ($elem: HTMLElement) => boolean,\n isMatch: ($elem: HTMLElement) => boolean,\n maxDepth: number = 20,\n depth: number = 0\n): HTMLElement[] {\n const matches: HTMLElement[] = [];\n\n // If the depth is above the max depth, abort the searching here.\n if (depth >= maxDepth) {\n return matches;\n }\n\n // Traverses a slot element\n const traverseSlot = ($slot: HTMLSlotElement) => {\n // Only check nodes that are of the type Node.ELEMENT_NODE\n // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\n const assignedNodes = $slot\n .assignedNodes()\n .filter((node) => node.nodeType === 1);\n if (assignedNodes.length > 0) {\n const $slotParent = assignedNodes[0].parentElement!;\n return queryShadowRoot(\n $slotParent,\n skipNode,\n isMatch,\n maxDepth,\n depth + 1\n );\n }\n\n return [];\n };\n\n // Go through each child and continue the traversing if necessary\n // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.\n // Therefore we fallback to an empty array if it is undefined.\n const children = Array.from(root.children || []) as HTMLElement[];\n for (const $child of children) {\n // Check if the element and its descendants should be skipped\n if (skipNode($child)) {\n // console.log('-- SKIP', $child);\n continue;\n }\n\n // console.log('$child', $child);\n\n // If the element matches we always add it\n if (isMatch($child)) {\n matches.push($child);\n }\n\n if ($child.shadowRoot != null) {\n // If the element has a shadow root we need to traverse it\n matches.push(\n ...queryShadowRoot(\n $child.shadowRoot,\n skipNode,\n isMatch,\n maxDepth,\n depth + 1\n )\n );\n } else if ($child.tagName === 'SLOT') {\n // If the child is a slot we need to traverse each assigned node\n matches.push(...traverseSlot($child as HTMLSlotElement));\n } else {\n // Traverse the children of the element\n matches.push(\n ...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1)\n );\n }\n }\n\n return matches;\n}\n\n/**\n * Returns whether the element is hidden.\n * @param $elem\n */\nexport function isHidden($elem: HTMLElement): boolean {\n return (\n $elem.hasAttribute('hidden') ||\n ($elem.hasAttribute('aria-hidden') &&\n $elem.getAttribute('aria-hidden') !== 'false') ||\n // A quick and dirty way to check whether the element is hidden.\n // For a more fine-grained check we could use \"window.getComputedStyle\" but we don't because of bad performance.\n // If the element has visibility set to \"hidden\" or \"collapse\", display set to \"none\" or opacity set to \"0\" through CSS\n // we won't be able to catch it here. We accept it due to the huge performance benefits.\n $elem.style.display === `none` ||\n $elem.style.opacity === `0` ||\n $elem.style.visibility === `hidden` ||\n $elem.style.visibility === `collapse`\n );\n\n // If offsetParent is null we can assume that the element is hidden\n // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null\n // || $elem.offsetParent == null;\n}\n\n/**\n * Returns whether the element is disabled.\n * @param $elem\n */\nexport function isDisabled($elem: HTMLElement): boolean {\n return (\n $elem.hasAttribute('disabled') ||\n ($elem.hasAttribute('aria-disabled') &&\n $elem.getAttribute('aria-disabled') !== 'false')\n );\n}\n\n/**\n * Determines whether an element is focusable.\n * Read more here: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus/1600194#1600194\n * Or here: https://stackoverflow.com/questions/18261595/how-to-check-if-a-dom-element-is-focusable\n * @param $elem\n */\nexport function isFocusable($elem: HTMLElement): boolean {\n // Discard elements that are removed from the tab order.\n if (\n $elem.getAttribute('tabindex') === '-1' ||\n isHidden($elem) ||\n isDisabled($elem)\n ) {\n return false;\n }\n\n return (\n // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists\n $elem.hasAttribute('tabindex') ||\n // Anchor tags or area tags with a href set\n (($elem instanceof HTMLAnchorElement || $elem instanceof HTMLAreaElement) &&\n $elem.hasAttribute('href')) ||\n // Form elements which are not disabled\n $elem instanceof HTMLButtonElement ||\n $elem instanceof HTMLInputElement ||\n $elem instanceof HTMLTextAreaElement ||\n $elem instanceof HTMLSelectElement ||\n // IFrames\n $elem instanceof HTMLIFrameElement\n );\n}","export function animationTo(\n element: HTMLElement,\n keyframes: Keyframe | Keyframe[],\n options?: KeyframeAnimationOptions\n) {\n const animated = element.animate(keyframes, { ...options, fill: 'both' });\n animated.addEventListener('finish', () => {\n // @ts-ignore\n animated.commitStyles();\n animated.cancel();\n });\n\n return animated;\n}\n\nconst keyframeDefaults = {\n easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n};\n\nexport const KEYFRAMES = {\n fadeIn: [\n {\n offset: 0,\n ...keyframeDefaults,\n opacity: 0,\n },\n {\n offset: 1,\n ...keyframeDefaults,\n opacity: 1,\n },\n ],\n fadeOut: [\n {\n offset: 0,\n ...keyframeDefaults,\n opacity: 1,\n },\n {\n offset: 1,\n ...keyframeDefaults,\n opacity: 0,\n },\n ],\n};","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: block;\n}\n\n.modal-container {\n display: none;\n justify-content: center;\n align-items: center;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1060;\n overflow-y: auto;\n font-family: var(--ifx-font-family);\n\n}\n\n.modal-container.open {\n display: flex;\n}\n\n.modal-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: tokens.$ifxColorBaseBlack;\n opacity: 0.5;\n z-index: 0;\n}\n\n.modal-content-container {\n position: absolute;\n display: flex;\n justify-content: center;\n width: 90%;\n min-height: 218px;\n background-color: #fff;\n border-radius: tokens.$ifxBorderRadiusNone;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n box-sizing: border-box;\n align-items: stretch;\n}\n\n/* Add desktop size here */\n@media screen and (min-width: 768px) {\n .modal-content-container {\n width: 540px;\n min-height: 132px;\n\n &.m,\n &.l,\n &.s {\n width: 90%;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .modal-content-container {\n\n &.s {\n width: 47vw;\n }\n\n &.m {\n width: 63vw;\n }\n\n &.l {\n width: 80%;\n }\n }\n}\n\n.modal-content {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-height: 90vh;\n}\n\n.modal-icon-container {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n background-color: tokens.$ifxColorOcean500;\n align-self: stretch;\n\n &.danger {\n background-color: tokens.$ifxColorRed500;\n }\n\n & ifx-icon {\n color: tokens.$ifxColorBaseWhite;\n }\n}\n\n.modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n min-height: 76px;\n max-height: 105px;\n box-sizing: border-box;\n border-radius: 1px 1px 0px 0px;\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\n}\n\n.modal-caption {\n max-height: 56px;\n display: -webkit-box;\n overflow: hidden;\n white-space: pre-wrap;\n word-wrap: break-word;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical; \n}\n\n.modal-header h2 {\n margin: 0;\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSizeXl;\n line-height: 28px;\n}\n\n.modal-header button {\n background: none;\n border: none;\n font-size: 1.5em;\n padding: 0;\n cursor: pointer;\n}\n\n.modal-close-button {\n align-self: flex-start;\n margin-right: -8px;\n}\n\n.modal-body {\n padding: 16px 24px;\n min-height: 56px;\n box-sizing: border-box;\n flex: 1;\n overflow-y: auto;\n}\n\n.modal-footer.buttons-present ::slotted(*){\n display: flex;\n justify-content: flex-end;\n gap: 16px;\n padding: 16px 24px 32px 16px\n}\n\n.modal-border {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n font-size: 1.5em;\n flex-grow: 1;\n\n &.primary {\n background-color: tokens.$ifxColorOcean500;\n }\n\n &.secondary {\n background-color: tokens.$ifxColorEngineering500;\n }\n\n &.danger {\n background-color: tokens.$ifxColorRed500;\n }\n\n &.success {\n background-color: tokens.$ifxColorGreen500;\n }\n\n &.warning {\n background-color: tokens.$ifxColorOrange500;\n }\n\n &.orange {\n background-color: tokens.$ifxColorOrange500;\n }\n\n &.ocean {\n background-color: tokens.$ifxColorOcean500;\n }\n\n &.grey {\n background-color: tokens.$ifxColorEngineering500;\n }\n\n &.grey-200 {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.red {\n background-color: tokens.$ifxColorRed500;\n }\n\n &.green {\n background-color: tokens.$ifxColorGreen500;\n }\n\n &.berry {\n background-color: tokens.$ifxColorBerry500;\n }\n}","import { Component, Prop, Element, State, Event, Host, EventEmitter, h, Watch } from '@stencil/core';\nimport { queryShadowRoot, isHidden, isFocusable } from '../../global/utils/focus-trap';\nimport { animationTo, KEYFRAMES } from '../../global/utils/animation';\n \n\ntype CloseEventTrigger = 'CLOSE_BUTTON' | 'ESCAPE_KEY' | 'BACKDROP';\n\nexport interface BeforeCloseEventDetail {\n trigger: CloseEventTrigger;\n}\n@Component({\n tag: 'ifx-modal',\n styleUrl: 'modal.scss',\n shadow: true\n})\nexport class IfxModal {\n @Prop({ reflect: true, mutable: true }) opened?: boolean = false;\n @State() showModal: boolean = this.opened || false;\n\n @Prop() caption: string = 'Modal Title';\n @Prop() closeOnOverlayClick: boolean = true;\n\n @Event() ifxModalOpen: EventEmitter;\n @Event() ifxModalClose: EventEmitter;\n\n @Prop() variant: 'default' | 'alert-brand' | 'alert-danger' = 'default';\n \n @Prop() size: 's' | 'm' | 'l' = 's';\n\n @Prop() alertIcon: string = '';\n @Prop() okButtonLabel: string = 'OK';\n @Prop() cancelButtonLabel: string = 'Cancel';\n @Element() hostElement: HTMLElement;\n\n @State() slotButtonsPresent: boolean = false;\n\n @Prop() showCloseButton: boolean = true;\n\n private modalContainer: HTMLElement;\n private focusableElements: HTMLElement[] = [];\n private closeButton: HTMLButtonElement | HTMLIfxIconButtonElement;\n\n componentDidLoad() {\n // Query all focusable elements and store them in `focusableElements`.\n // Needed for the \"focus trap\" functionality.\n this.focusableElements = queryShadowRoot(\n this.hostElement.shadowRoot,\n (el) => isHidden(el) || el.matches('[data-focus-trap-edge]'),\n isFocusable\n );\n\n }\n\n getFirstFocusableElement(): HTMLElement | null {\n return this.focusableElements[0];\n }\n\n getLastFocusableElement(): HTMLElement | null {\n return this.focusableElements[this.focusableElements.length - 1];\n }\n\n handleTopFocus = () => {\n this.attemptFocus(this.getLastFocusableElement());\n };\n\n handleBottomFocus = () => {\n this.attemptFocus(this.getFirstFocusableElement());\n };\n\n\n attemptFocus(element: HTMLElement | null) {\n if (element == null) {\n setTimeout(() => { //wait until DOM is fully loaded\n this.closeButton.focus();\n },);\n return;\n }\n\n setTimeout(() => { //wait until DOM is fully loaded\n element.focus();\n }, 0);\n }\n\n\n open() {\n this.showModal = true;\n try {\n const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\n duration: 200,\n });\n anim.addEventListener('finish', () => {\n // Setting focus on last item and removing immediately\n // so, on tab press first element is focused\n setTimeout(() => {\n this.getLastFocusableElement()?.focus();\n this.getLastFocusableElement()?.blur();\n }, 0);\n\n this.ifxModalOpen.emit();\n });\n\n this.hostElement.addEventListener('keydown', this.handleKeypress);\n } catch (err) {\n this.ifxModalOpen.emit();\n\n }\n\n\n }\n\n close() {\n try {\n const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\n duration: 200,\n });\n anim.addEventListener('finish', () => {\n this.showModal = false;\n this.ifxModalClose.emit();\n });\n this.hostElement.removeEventListener('keydown', this.handleKeypress);\n } catch (err) {\n this.showModal = false;\n this.ifxModalClose.emit();\n }\n }\n\n handleKeypress = (event: KeyboardEvent) => {\n if (!this.showModal) {\n return;\n }\n if (event.key === 'Escape') {\n this.doBeforeClose('ESCAPE_KEY');\n }\n };\n\n\n doBeforeClose(trigger: CloseEventTrigger) {\n const triggers = [];\n triggers.push(trigger);\n const prevented = triggers.some((event) => event.defaultPrevented);\n if (!prevented) {\n this.opened = false;\n }\n }\n\n\n\n @Watch('opened')\n openedChanged(newValue) {\n if (newValue === true) {\n this.open();\n } else {\n this.close()\n }\n }\n\n\n handleOverlayClick() {\n if (this.closeOnOverlayClick) {\n this.doBeforeClose('BACKDROP')\n }\n }\n\n\n handleButtonsSlotChange(e) {\n if(e.currentTarget.assignedElements()[0]?.childElementCount > 0) {\n this.slotButtonsPresent = true;\n }else{\n this.slotButtonsPresent = false;\n }\n }\n\n\n render() {\n const isAlertVariant = this.variant !== 'default';\n return (\n <Host>\n <div\n ref={(el) => (this.modalContainer = el)}\n class={`modal-container ${this.showModal ? 'open' : ''}`}\n >\n <div\n class=\"modal-overlay\"\n onClick={() => this.handleOverlayClick()}\n ></div>\n <div\n data-focus-trap-edge\n onFocus={this.handleTopFocus}\n tabindex=\"0\"\n ></div>\n <div\n class={`modal-content-container ${this.size}`}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={this.caption}>\n {isAlertVariant ? (\n <div class={`modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}`}>\n {this.alertIcon ? <ifx-icon icon={this.alertIcon} /> : null}\n </div>\n ) : null}\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2 class=\"modal-caption\">{this.caption}</h2>\n { \n this.showCloseButton && \n <ifx-icon-button class = 'modal-close-button' ref={(el) => (this.closeButton = el)} icon=\"cross-24\" variant=\"tertiary\" onClick={() => this.doBeforeClose('CLOSE_BUTTON') }>\n </ifx-icon-button>\n }\n </div>\n <div class=\"modal-body\">\n <slot name=\"content\" /*onSlotchange={() => console.log('slots children modified')}*/ />\n </div>\n <div class={`modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}`}>\n <slot name=\"buttons\" onSlotchange={(e)=>this.handleButtonsSlotChange(e)}>\n </slot>\n </div>\n </div>\n </div>\n <div\n data-focus-trap-edge\n onFocus={this.handleBottomFocus}\n tabindex=\"0\"\n ></div>\n </div>\n </Host>\n\n );\n }\n}"],"mappings":"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","ignoreList":[]}