npm - @infineon/infineon-design-system-stencil - Versions diffs - 30.10.0--canary.1696.b831179ac32ae02cdeaa1c4b607f326c7553bc3a.0 → 30.10.0--canary.1702.2f8c24c808faa60bcf4fb75afba38278325cc5a8.0 - Mend

@infineon/infineon-design-system-stencil 30.10.0--canary.1696.b831179ac32ae02cdeaa1c4b607f326c7553bc3a.0 → 30.10.0--canary.1702.2f8c24c808faa60bcf4fb75afba38278325cc5a8.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-e8b6810f.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,h as c,g as a}from"./p-e244bae4.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:"94ef0cd5e94c2cd278b42251bd942ef7bed3bc9e",class:"container"},c("header",{key:"29fa237275093d906d19dd7c4f7ef103ebe23a91",class:"header"},c("div",{key:"983ce63f77dafd26ed5b25da2cc518f8b7834e35",class:"header__info-wrapper"},c("div",{key:"6a909d8f1fbd3efdc928ae99aace2fbe2d6ce888",class:"title"},"DDS Components Overview"),c("div",{key:"95ec497b9e4b65d6e1e48a9dd8754a052ee79281",class:"infoboard__wrapper"},c("div",{key:"fedd769a5cda6dcc7320d0b259d58e9482f750a3",class:"basic__info"},c("div",{key:"18e40e6b586afeae9ca1ec9a9edb4c849acad717"},"Total Number:"),c("div",{key:"0327edd0557b74ef60a1fde6a4f4b1b66b190cb2"},c("ifx-number-indicator",{key:"37206eb3e0e30bc54906745c45b312805cdc9453",id:"number__indicator-total"}))),c("div",{key:"92d6dea0710d1e2d2193049543530b205e514bd3",class:"basic__info"},c("div",{key:"497953be0cb32f373757140ad4f39f087e83d41c"},"Completed:"),c("div",{key:"5d353eedddeb5adc70b8f2cdfaa7d82eb5358587"},c("ifx-number-indicator",{key:"837f9bb96855ea0c8bc6a58017bf2b93f22527d4",id:"number__indicator-completed"}))),c("div",{key:"8dee70161f789692a569643bf24fac938b06539a",class:"basic__info"},c("div",{key:"26f4a5ea75d6d3f91cf3fcd301807a43ae1b132a"},"In Progress:"),c("div",{key:"6b36c07112366eb3ea0d12f4704823ead18a892c"},c("ifx-number-indicator",{key:"454c1b760527366374b46a32a7f9a26e6746399a",id:"number__indicator-planned"})))))),c("div",{key:"4e2349c5d71032a0fc4ec18bf3753ffc4ebb9bfd",class:"view"},c("div",{key:"201ded58bf4b595562445677c08cff1944426ea2",class:"wrapper"},c("table",{key:"a27ee204659d8ad1ca6bfd2015ab2a6dfc42954c"},c("thead",{key:"0fe9b4e836cf884e708a40e98711e397e9988268"},c("tr",{key:"9189ba17125982fda16a0a05dbbe73279b0d81f8"},c("th",{key:"67d5182d415ee892696b7a33ff4024824e53046c",class:"sticky-col second-col"},"Component"),c("th",{key:"6f546e2b5681d14124e7f6c7be96194eb7156771"},c("div",{key:"cb01f34d8d0d05e553bbc1cee742bd46a238b149",class:"version__wrapper"},c("span",{key:"92aa213436a98e7794f37ba573cc0e7e1ea1524d"},"Version 1"))),c("th",{key:"df61570f92d456836c3755ab0f62dd7fd4d89426"},c("div",{key:"50489ed3424003794a5b8344422f2b0a624d75d3",class:"version__wrapper"},c("span",{key:"78629e20c10b5bac6e4293a361b8a0067d3d940c"},"Version 2"))),c("th",{key:"6c8115976c082ba1122f922d9cdaa72df2791b1b"},"Version 3"))),c("tbody",{key:"0a6455ddce92d1c25b3bd45db290af7deefe3707"},c("tr",{key:"b598af041a6f3e51094a200c4b3084dbceb1c555"},c("td",{key:"e795f6e5abf128f2fcf1336d114bf77468f28a96",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"e1c3ecf42c3433a1708e0ae5d9088b99536496d5",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-accordion--development",size:"s",variant:"bold"},"Accordion")),c("td",{key:"40ebc65154f49ee09f504ef5782c4191bba27e92"},c("ul",{key:"60d9ee3c1a25fad5edf6c5bf0f2313a8d263f973"},c("li",{key:"37f79e0e57c08d7dcb9f25ad86884038fdc79ff2"},c("span",{key:"be049cf79476587d212746e0c1a5914eab273eb7"},c("ifx-icon",{key:"dc61a02131094abf32fb715b593e439ce596a9b9",class:"check__icon",icon:"check12"})),c("span",{key:"d5a2d994fccedeadc8cb0ecd3d8e6efe71314e05"},"Includes essential functionality such as expand/collapse behavior and minimal customization options")),c("li",{key:"457b623dc3fcd451ba736a7c8f327817b6574e87"},c("span",{key:"5cbe8527c814ff3e5689ad5875f2c959882d5c2c"},c("ifx-icon",{key:"faeab4af2670659cf2f58ceeb87b6d2f8a978ce8",class:"check__icon",icon:"check12"})),c("span",{key:"ebd7a5db84eca81da34d77ba2522a3659221de03"},"Adheres to web standards")),c("li",{key:"cb4a6d8ae95e77adce24376eb42acd21a64cdb6a"},c("span",{key:"ec31aaff74855da2ac91c18f1fbaea34d8f4dc69"},c("ifx-icon",{key:"6b48f88000731fc782b514b97b987b7ac22ce5c0",class:"check__icon",icon:"check12"})),c("span",{key:"7a2949072e16cf4467798477ca393dc4c0f6ae88"},"Provides a simple and lightweight way to organize and display collapsible content")))),c("td",{key:"c61fde63a81278555182cbb27991ab5461c6611e"},c("ul",{key:"5ee77d58854bad176f43011292e958e1dbd27dda"},c("li",{key:"e95be64eb112ee39495e2c6fbcba20676cbb747f"},c("span",{key:"f8f1570fed7d9e829d8c3503d2e41986617eea24"},c("ifx-icon",{key:"45baa82725ca721045d65cce34792fa65a353b83",class:"check__icon",icon:"check12"})),c("span",{key:"6c3ce948145b2a9d3ceb70dfcbfac7e56f0cbe47"},"Auto collapse feature")),c("li",{key:"2698e9963be778a4ac34424d3444ffd67c7ef788"},c("span",{key:"b08e4aaf2273da66bdae9be6dd0397e7d713f8dd"},c("ifx-icon",{key:"f422aa2a0185ad088f3613f8feacef03f9f5c11a",class:"check__icon",icon:"check12"})),c("span",{key:"a4adfa592feec11645a5454fe2afe4bd98b336fa"},"Initial collapse feature")),c("li",{key:"4d3edb6fe01f8d753f2defbb012e0dbb7896046b"},c("span",{key:"4150c87dec05ff04cf89761038fb33977933b195"},c("ifx-icon",{key:"ccf693d2aef10d111c6a1ab3a401f7e0c54cdc41",class:"check__icon",icon:"check12"})),c("span",{key:"eed5a5b3e1709fbf49e34d96d05610890f9180c5"},"React, Vue and Angular wrapper integration")))),c("td",{key:"928dbf258b958e858b056f8ed3584711e7c283c0"})),c("tr",{key:"42535b2c12485e7a213ccd721a733ac70c996c32"},c("td",{key:"0052287ec495d253bd4c012c4b9da78e3cc66d15",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"0f027f26ecc5ba509e92caa43873b1b8921d2c94",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-alert--development",size:"s",variant:"bold"},"Alert")),c("td",{key:"69243d98a53e6acd24575e914b215ca4961877f4"},c("ul",{key:"1af9ff86ac0eb84705b14cc246afeb9d387e6ec1"},c("li",{key:"eddeb4c11d034ece0ca658b09d7257956582d42f"},c("span",{key:"0e73c3cdbb0528837055fe515cd2d02ba92317b6"},c("ifx-icon",{key:"9c6068398ac45636bb058ec023019b3e29c05678",class:"check__icon",icon:"check12"})),c("span",{key:"bc9353bc9c18a19e792834c73aae38ee2758440e"},"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:"8cfefe626c93e464e502ffca2cdf94f52c9ac88f"},c("span",{key:"7b00ac3fc8a8d8ccd49654d2d704e7441259fa06"},c("ifx-icon",{key:"cc58cd630c7336f0ae7d87ccc9150046df8dca22",class:"check__icon",icon:"check12"})),c("span",{key:"ce428ab59abc1d5febc458a1b2b94f4f951ad30e"},"Adheres to web standards")))),c("td",{key:"40128f668e879d4cc63ae71994dab826217eea9f"},c("ul",{key:"54ae983a69edbc9917a65740ce2797e538f09188"},c("li",{key:"a4ea0f0b88664e87ab77aee96195806cdc677c47"},c("span",{key:"ec96ce45f2be131790a7d34db1d332f821841e1f"},c("ifx-icon",{key:"e264dac478022217205a442580521a297dc88fab",class:"check__icon",icon:"check12"})),c("span",{key:"7a0f0646a2769fecdfc2b6f70ea115975f6823b9"},"Configurable close button")),c("li",{key:"a8f745131d982aa5b35e3cddc469f23d959ae763"},c("span",{key:"f3a48f12774d4a5e40143891c0b58f65692595e1"},c("ifx-icon",{key:"db45b84b32389ff4366856304a929dd82899d78e",class:"check__icon",icon:"check12"})),c("span",{key:"fcf7143a144e46b4f951c61f5f42e0de51c73acd"},"Additional Info variant")),c("li",{key:"f061934669df125b1bc644e780a4502d7658e091"},c("span",{key:"2bedaf5fa2c3ce77aac7a618d98b4654d62cb4bc"},c("ifx-icon",{key:"1ab37982bb0390df92e96a6d3dd475e569e3d5b3",class:"check__icon",icon:"check12"})),c("span",{key:"7e6a1031e3668eaa688eae46a8b229bd6517a50e"},"React, Vue and Angular wrapper integration")))),c("td",{key:"7e2b72ba9c3aa90d871d8dae4fb9a1e75adab631"})),c("tr",{key:"a912b471325929c5c4e98a8ac23d11dad38562b2"},c("td",{key:"12c144973a5787b9af186e0f453c3377a9a854d2",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"18925f2858448cc69ceeadb4ad0e8367146df30e",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-badge--development",size:"s",variant:"bold"},"Badge")),c("td",{key:"0266b9a7306d83836324a8e9644ed0f652dbe076"},c("ul",{key:"df73eb97dba110daf14f05f821b976eec8179558"},c("li",{key:"943918ba87c3e42c961bad97c7105eb1d13729d7"},c("span",{key:"709f65596aa279f72b59fe0bef047ddcb20079cd"},c("ifx-icon",{key:"e921c062a3ca815159a31592802419a073db1188",class:"check__icon",icon:"check12"})),c("span",{key:"21083e88f63ccd7e0887852495c091cf1809f99c"},"Offers simple customization options for displaying badges, allowing developers to indicate specific actions, statuses, or categories with visual cues")),c("li",{key:"70ee9c1ad01837ba045f1c7934760de863dc31bf"},c("span",{key:"86d1d054ebe753a1e03c04706beebed45bc0a5c3"},c("ifx-icon",{key:"78406b1778129d994ec2431387477e4390d028c2",class:"check__icon",icon:"check12"})),c("span",{key:"805c8fe88d898eeaeec23cb907b422549bbe2b83"},"Designed to seamlessly integrate with existing UI elements and adhere to web standards")))),c("td",{key:"6c83cb9b1f8277c67c5b8ce035436dd14ab6e9c9"},c("ul",{key:"8d75a3f4909d2dffe373d892eb8010672442e2f6"},c("li",{key:"5b77fea0b304db06f29189463ec46398fab6e64c"},c("span",{key:"3e3d35cd4b75a412c6d67dacb262d1595e1ef99e"},c("ifx-icon",{key:"280665ef569e73f344855b07f089f5d164b59090",class:"check__icon",icon:"check12"})),c("span",{key:"7e0e13d3c2a36f7a71646d0f0bc64708d4a51f4d"},"React, Vue and Angular wrapper integration")))),c("td",{key:"a86b3c17d08b071cb10b11b55f85c5deb3f59550"})),c("tr",{key:"88bfaebe869023ef94a9b54f274e6aa159caba95"},c("td",{key:"af9bec690861fac6be6d31207dd4c9b0c0af8369",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"6d6ac5ffa4e1ec3f11ce6bfb93a999dc2a99e69b",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-breadcrumb--development",size:"s",variant:"bold"},"Breadcrumb")),c("td",{key:"a629edab0452e8873d8b22ee3e33377fc75169e0"},c("ul",{key:"280b762ab5aa19ca05c1e1db28e0368413dc5217"},c("li",{key:"2c60125c0ac3f67eeea8480a135d1b6f26803312"},c("span",{key:"803c59b077ad0d8eb2f31b575f73d22e7b73cddd"},c("ifx-icon",{key:"2008d8469a576f5fab435c1e75ea7eb05204057b",class:"check__icon",icon:"check12"})),c("span",{key:"9d1331cadb11f207534c99d3f565b1f4d4543165"},"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:"44476725da6b6d0ae2b0398e21eb24f0d4bc5695"},c("span",{key:"b17fdabaa095dc599066b4fd68c93d5f4e3b7344"},c("ifx-icon",{key:"7b8a58bee3f180c17e3f0ca636ffd3e54e63e48f",class:"check__icon",icon:"check12"})),c("span",{key:"d1519645e6d2f28cb3ee6a289163303e321241d3"},"Adheres to web standards")))),c("td",{key:"ea8cb1822e12f785bcfb544d64567ad274530376"},c("ul",{key:"aac603b96593e05989dfbc01a4183234aa07d02b"},c("li",{key:"3e78b3aa72cff2718928050f3ccfbbc00193cdd5"},c("span",{key:"459b5a0a5252d638f88a79b6ff9a849e950b1502"},c("ifx-icon",{key:"c696691ce31ec51d784ad4eb8b1d427e2327f6c3",class:"check__icon",icon:"check12"})),c("span",{key:"8cbfb840e7a7b261c7dae636acc10025b5b9798c"},"Possibility to add an icon")),c("li",{key:"d1ddd1f1bfc1c1a155eb85558dad34bd4b35703e"},c("span",{key:"aefdd11b822003eb68b264de592763efe6ab8fc9"},c("ifx-icon",{key:"0152b25b6d4e1bfc46446ba45c84c79f29a3f06d",class:"check__icon",icon:"check12"})),c("span",{key:"91b0c2ab2f373e2849806f61cd637c87b1646e99"},"Incorporated dropdown-menu for individual items")),c("li",{key:"eb5ec0e139cc0106b9e78136c84ad3f660b965b2"},c("span",{key:"08128db435df9fb59ddd734e33fd178725bc1119"},c("ifx-icon",{key:"26d71651eb3ba22501b1fb43900b24cdc1e4df5f",class:"check__icon",icon:"check12"})),c("span",{key:"fb53e44ce6d5e563f33f53bb96f337a0b08c88b6"},"React, Vue and Angular wrapper integration")))),c("td",{key:"530c4772c140f8cb6fee0e7757c8bfeb3bce2881"})),c("tr",{key:"e9869f920d1dbade1a67c4721f49303bd73bdff9"},c("td",{key:"a51b7e1cfcb1990107cfa0f647b1afb59dfb13a5",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"f6232318bc58777423bbb449e10b46d16c2b8ae1",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-button--development",size:"s",variant:"bold"},"Button")),c("td",{key:"fcdefdf15949b715d961159c2dcddf504fbdd673"},c("ul",{key:"36d525e48a7df25afdd447996b04bc9d73ec96cd"},c("li",{key:"0493b3ffb5d9a72b16bb9d8878cf402173b500e6"},c("span",{key:"5791ef78a6cecc527f44dba3013bcfb2fbc49cd2"},c("ifx-icon",{key:"18deb22a8638d3483dab2fc356ddaac739b5f5c3",class:"check__icon",icon:"check12"})),c("span",{key:"5bf054b09332de983bf5563940ecfd9cefc73d87"},"Includes basic styling options such as colors, sizes, and states, providing essential functionality for initiating actions")),c("li",{key:"43b43b6d21392fdd420e4d5de9156527d0be0d6b"},c("span",{key:"21c8e421b141575855735e9e6883910a39c7bec4"},c("ifx-icon",{key:"57579c0ff62da49adcdf3cddb1e3bf1e84b71a1f",class:"check__icon",icon:"check12"})),c("span",{key:"78d641b6f05eeeb6a814be86863fd609e2eb78aa"},"Adheres to web standards")))),c("td",{key:"e151102e6d1086c310415a2c33f3b80008f68e2b"},c("ul",{key:"b6e177c354f511b6c3827d609bae988d93dde3ac"},c("li",{key:"97dfc9b18ea758002589fb71e2c7a9e46caaf216"},c("span",{key:"af8bfb54a35f066c0b958457255ae70882018d5a"},c("ifx-icon",{key:"950e77cc7939c6d18f5b4ca2fcc8e089283980a3",class:"check__icon",icon:"check12"})),c("span",{key:"8e62043c26ad0ce65ad41bba072cd0e600ec0b11"},"fullWidth feature")),c("li",{key:"d78251795f4ca2cfe931bf7c7aa1662679573d73"},c("span",{key:"de20563fd28bc87fb2854638b744b66529723733"},c("ifx-icon",{key:"0f19319f77093efc0ac7c41456ae52087b9ea85d",class:"check__icon",icon:"check12"})),c("span",{key:"85bbe99ff7aca59084ac3a8014f5b66b019d729b"},"Icon integration")),c("li",{key:"6ad8b71217454fad5aff9b2a80ea35cc88563484"},c("span",{key:"ccbecb192b20f199dfbb2ba67ce1af7c339c438b"},c("ifx-icon",{key:"997c35faa553f3907df4c0876be728b3651e4f5d",class:"check__icon",icon:"check12"})),c("span",{key:"dd0d5db341741435ad450343b7c305747b92018c"},"Link integration")),c("li",{key:"c5eaaff12880b0196783b191574dc44f92421bea"},c("span",{key:"c96eec7fe549c422c508c2dc994ea01663ef5c5a"},c("ifx-icon",{key:"eadbb622bf64b9a3c8ae949fc3a5938891223875",class:"check__icon",icon:"check12"})),c("span",{key:"588b5199a7062d6bab67056c9b87932d54125c98"},"React, Vue and Angular wrapper integration")))),c("td",{key:"908d173f46640ecb4cc5c3e315c87047a45d2c05"},c("ul",{key:"0271a6c781fc850752e27c9446f66ca11145676b"},c("li",{key:"2ecad646d03baa8e0a8ef505dde2235b3ac08869"},c("span",{key:"eb059f2484d52054d1217e97170f759b30e2143c"},c("ifx-icon",{key:"0950cde5d1888a74672786a9c03a0f1939d8b800",class:"check__icon",icon:"check12"})),c("span",{key:"58ffac6e58bbe36fcae213f6ad6e8e7b2dcae08d"},"Form integration"))))),c("tr",{key:"62bf201d672843a3659742c3c0974a1df03fa610"},c("td",{key:"b81dcfae5ef6d64e75ad2c13d3e94dd774e4fe13",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"17c2850979ff42007cf91a06aee453967aef790a",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-card--development",size:"s",variant:"bold"},"Card")),c("td",{key:"f8f10063b913ae90d4a31832849c2d51098225f1"},c("ul",{key:"276a9bc25010aa7059b7898041e3e8f9d4685213"},c("li",{key:"91be80d95e13731290db11fbf126c9296b1cd835"},c("span",{key:"804f1cd8dc601820957e5d5937b018ac5b85ddfa"},c("ifx-icon",{key:"117355d111a36a824c3531c1d05563552ae00ad5",class:"check__icon",icon:"check12"})),c("span",{key:"1137a5058d66e16c642b53f6085a18be127206f9"},"Provides a structured and customizable layout, featuring elements such as headings, images, text, and buttons")),c("li",{key:"27af1fcde3f2d03958e91b47f64cd3dd4f8f5b06"},c("span",{key:"f390da2994a4afd01554a04128b4f5bda3169953"},c("ifx-icon",{key:"1d835e545a75e4600d9ac57841aa21228727beac",class:"check__icon",icon:"check12"})),c("span",{key:"2b476badd5bd2d7d587d59fac8f8da7001537241"},"Adheres to web standards")),c("li",{key:"c29e2cb4c31129893e8da47923ca4915d545b3b1"},c("span",{key:"3798871acd1a68b512fb1f358b99fe25b9b2031e"},c("ifx-icon",{key:"ff4bfe8132064cea4a20a86cc505567a828fea90",class:"check__icon",icon:"check12"})),c("span",{key:"4610fe22f9b666d5cabca62353d3f7296ad079c4"},"Horizontal and Vertical layout")))),c("td",{key:"515164d2489a6183cd3639ca2498637fe1f212c4"},c("ul",{key:"9cd69b209a60cac0bd7d4a37cfc5b1e6f574f593"},c("li",{key:"6e43f28144571ffd461f461a210e7d392d9302b8"},c("span",{key:"d5f86e578029475ea732117f9900affdc5fb8789"},c("ifx-icon",{key:"ca2f09237e82b74dd82707c1967e547f2345d194",class:"check__icon",icon:"check12"})),c("span",{key:"d7b8d78858342803b0ec1d1f7ecb8ece8951ab0c"},"Possibility to embed multiple buttons")),c("li",{key:"3162580c38dd88ecdc5966502d867d4092119b1e"},c("span",{key:"5a3da3fea3f8aca11e216958e654fcfbe46912e6"},c("ifx-icon",{key:"e01cc056299fa160bfadb63a75878ab3f798de87",class:"check__icon",icon:"check12"})),c("span",{key:"2a127996bdf745d267a3d8904ae8f39d13c6d76e"},"A switch between a Link and a Button")),c("li",{key:"82f487e46d51cfc47433f230d91059ad2fcffdab"},c("span",{key:"8fcdb02e90b02067f5a0f45747adeea010d1da93"},c("ifx-icon",{key:"d31d54ea56f73b8bf30894e3bd2086f40d24b441",class:"check__icon",icon:"check12"})),c("span",{key:"6671674f90a9509e3e9c7ed5456d6046ad5b5de4"},"Enhanced stylying behavior")),c("li",{key:"e7623c3195b7fa278db2669fc35785a83de64f73"},c("span",{key:"b4e1ee37c8c9100afcd46db6964ce743dc3f6761"},c("ifx-icon",{key:"3d6c530613323a145f5c190c4d4b61cd4452f4aa",class:"check__icon",icon:"check12"})),c("span",{key:"8ad6e6fa5718aadd8647aa5083910f52f2ee1b77"},"React, Vue and Angular wrapper integration")))),c("td",{key:"44e5bac77cc8037d5d25c93283fc3554e2f93e21"})),c("tr",{key:"482c4a07fa26b97e37930b7e86d43c22aba7cd58"},c("td",{key:"1da5efdbb5e692ad09b0eac4cae20d5446b0b8c2",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"54c5609814760b280633bc6cc5648ea946c6e20e",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-checkbox--development",size:"s",variant:"bold"},"Checkbox")),c("td",{key:"327d5d5a57c216b127505b0e964ffd743e705136"},c("ul",{key:"06f7ca321b5e1c9a3310ac10d4c9012bba74173e"},c("li",{key:"c1be0d6ba7f2833938d0691d1e20a597c5603936"},c("span",{key:"d4477a320c3dbb92a564cb67f48faec32929faa8"},c("ifx-icon",{key:"15954e9093eb86ffa19e1ea91e2a827e5b4752d6",class:"check__icon",icon:"check12"})),c("span",{key:"df80e616dfd039834ff2e45534cfe23ec691bc55"},"Offers a simple and customizable checkbox input, allowing users to toggle between checked and unchecked states")),c("li",{key:"c8ea1229a046f0d0e23f87661a6ca192ea9f819d"},c("span",{key:"eb6534e61918e63b7b2f93c566bba5751ba31829"},c("ifx-icon",{key:"03f9abd29e525ad819aacb4b37d3da4cf6bfc9fb",class:"check__icon",icon:"check12"})),c("span",{key:"867c6b854b755bb0cc7be8bffd6e999763e00e8f"},"Adheres to web standards")))),c("td",{key:"2fd48fc3135c39abf065e0f5d03c0fe31a96cdb1"},c("ul",{key:"a888984d2df2c404fecbd709ba3a3c3808af2461"},c("li",{key:"d9220a36335ff4a65f9813ee3ebc0606a486c3f4"},c("span",{key:"757377e5060d96c44a2ff169925ddd3d35b357e4"},c("ifx-icon",{key:"e937e4a6c47680e83162f00e7f745ab532d11173",class:"check__icon",icon:"check12"})),c("span",{key:"4363044a97c05fdd68e2d7b74eb8b96260909f11"},"Indeterminate state variant")),c("li",{key:"a5105da5764d95915a3c5ae2e3e479219ad90e78"},c("span",{key:"b37f8591962c25ca24f0d2968117005acf85bc1e"},c("ifx-icon",{key:"11e3aabfc01dec22157fb258d64b808cc87a0b40",class:"check__icon",icon:"check12"})),c("span",{key:"c0c8d800db702e3fd2f53641a15c533b802ecd44"},"React, Vue and Angular wrapper integration")))),c("td",{key:"8c1793f4998ff4f3741f2931145bf718d5fa89ab"})),c("tr",{key:"f6f571ad63ba685376e98b51933c6999f574054f"},c("td",{key:"0d1dcaa8f774d63a53b09ad03a3e9d12c11c2671",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"355792182617c017fb87936e322b4c52748c60c7",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-chip--development",size:"s",variant:"bold"},"Chip")),c("td",{key:"0fa5cbfc9fb379ff9d1a93ae234987625d320f12"},c("ul",{key:"1113170a696cba283594825f786d12595f67c252"},c("li",{key:"5e25521216fffdb373c5b137147e54adf5f07b45"},c("span",{key:"436eb79c84c27c43640ae5a91c134ae6d66dfd39"},c("ifx-icon",{key:"f3fc8d01abce2c270a1c0febfc9f66bf92751308",class:"check__icon",icon:"check12"})),c("span",{key:"ae690e461a8319a098ffbd26f5a50f635b5123d3"},"Provides a simple and customizable interface, representing discrete units of information or user interactions, such as labels, categories, or removable entities")),c("li",{key:"9921d90399b8f11634b2637f15eae4c45f6142f4"},c("span",{key:"52f0519a23f8b5e136dd07476f144badafb86c6b"},c("ifx-icon",{key:"2ca127b36bb11d81639c6683091fe7a870bc9e9c",class:"check__icon",icon:"check12"})),c("span",{key:"f1a027d5a78a468622c4b53e801673d7b866ab9f"},"Adheres to web standards")))),c("td",{key:"d59a3f50cc59e0acde1b726dfc8f9935e555b935"},c("ul",{key:"3ce7ac973c5e4306a1ad0128e14d9105679d1a56"},c("li",{key:"e3e4d1092c7a53e34580de4bd3a19544119ee4a2"},c("span",{key:"5050a30e808713707bc8857178a7e17f6a0b5a08"},c("ifx-icon",{key:"30dc35bd1fea23d7298afe3fe366cd9d67b288e9",class:"check__icon",icon:"check12"})),c("span",{key:"fb60be48055dc83babf6d435edd9a8989266cf35"},"Incorporated dropdown-menu for individual item selection")),c("li",{key:"5b6edab1edeb9fa7a3cb16d484404764948ec112"},c("span",{key:"01cf48db9323ed58660e8de6669c218c23138e21"},c("ifx-icon",{key:"6f712b193c14388ede4615ceeae0dab06627757d",class:"check__icon",icon:"check12"})),c("span",{key:"e6eacc979b07f468d9bf49bcc73ee28d49bb23a0"},"React, Vue and Angular wrapper integration")))),c("td",{key:"beb7d2a2aa21113378eaadbc0cda48cf0bbad5f4"})),c("tr",{key:"49e6b4769c2ba4319d3b0ec052ea4f74a6e448a9"},c("td",{key:"e193176fad7f1fa7d1c84c193dbc8f3b47c970f0",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"20bbed9a7ab0c8fd3d2a70742540cecc689b332f",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:"6b23022ba9b820cae9bdc153a4271f1914f08c88"},c("ul",{key:"2bcd78af106ae04e6b5128c47a9f5b3ab6039afd"},c("li",{key:"2980e14f53b99deccbc0c4c8845543e1c647900c"},c("span",{key:"e6b3496809a94d214d580f941c010c467ab5d549"},c("ifx-icon",{key:"e9645270065d9745e5523427699b7e8f54662f9d",class:"check__icon",icon:"check12"})),c("span",{key:"f0cda89dcdda2e115d8f5ffbf35ef8fe4f1c20ca"},"Provides a customized wrapper and theming for the standard date picker element, enhancing its appearance and user interaction")),c("li",{key:"c6ca28a3978257ba2619b19406e7e7f81155ae0d"},c("span",{key:"f2c6f0e9f4416365cc75e0c7430e0a7af3cc1643"},c("ifx-icon",{key:"bb56f728c795450f5023d2e9dcd19f21fdfe385c",class:"check__icon",icon:"check12"})),c("span",{key:"80b94dfdc93f2823e34f7cd52f0ce9dadf819448"},"Cross browser compatibility")),c("li",{key:"8f645e32c0f72f43347a07623b2304c672fa70db"},c("span",{key:"a93bad2033f92f43a03499713f421c9fb4eac3bc"},c("ifx-icon",{key:"9e6d9e617d8ad0e1e01c9b829efc6759f801769a",class:"check__icon",icon:"check12"})),c("span",{key:"faba747262a06d53aa7ca8d583d82144ae992eb2"},"Form integration")),c("li",{key:"c12e9657c1787f548c3734f93126ae3c6b3e11b9"},c("span",{key:"2c37bc6b43d1262c5f6d23f9c4e28bad4e4846df"},c("ifx-icon",{key:"f8698a13a004ab4c63e6faaa53e1851b14cee9a7",class:"check__icon",icon:"check12"})),c("span",{key:"5020f035c8b9f2f3ad49ed9092a3c77cb602cd37"},"Adheres to web standards")))),c("td",{key:"392404ca7627f9b1d0e66dbb5dc2a8530fd542a6"},c("ul",{key:"891b9291e1bfbf3c5836a8ae544c81918a0b6f7c"})),c("td",{key:"c139a8f9ffb46b7386581c9aa0a6c28fbb0bd5af"})),c("tr",{key:"e44ff916a39710289e0a444793751b9ccad39380"},c("td",{key:"567566ef534594919ce673ae4140df40a4e07d7b",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"c451695485a1f623b566d30009352bf0ad439e07",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-dropdown--development",size:"s",variant:"bold"},"Dropdown")),c("td",{key:"95193f92205b27b50a6ad575e539421521ba83bf"},c("ul",{key:"feef40944c1ad9ac455fc58fe5b8f1485ba3e32a"},c("li",{key:"8f1457cdf0610f66ce790c553a623b1c60010afa"},c("span",{key:"a466cb739050acaf288d74866c4da6caad8906d5"},c("ifx-icon",{key:"7ca4e74d9fc3798116d3d3adbeb76883c9fa6b44",class:"check__icon",icon:"check12"})),c("span",{key:"82d530aa2f6951c0d5eba1fa0726858377528682"},"Offers a versatile and interactive user interface element for presenting a list of options or actions")),c("li",{key:"923543da3cd0f6bc073dcd287fd3aa39383e6322"},c("span",{key:"f0e1b3f7def06f728121972555e947189631cd7f"},c("ifx-icon",{key:"b2c3fe4c3d76b800cbc38c10230e114d2dec0737",class:"check__icon",icon:"check12"})),c("span",{key:"57d90ecfba886068a3d53027a8dd4bd5c1cd7497"},"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:"d5e814c400a681484f122c94d29f98870e615544"},c("ul",{key:"6471b37fcc6c0a22abd597375bf7840654eb552f"},c("li",{key:"c5b07279dcb78736de48b8a5784b2b1bfc90c11c"},c("span",{key:"bc985c43e9cda8bba83808fc2f176dbbacf1df13"},c("ifx-icon",{key:"1da95fa81da61610eb3f2ff3a5b2a70f4e5cacc3",class:"check__icon",icon:"check12"})),c("span",{key:"fc3c5ce60b5fa49cccf4e2a12d3513256c404604"},"Search filter")),c("li",{key:"b442adbbc1bbb3861e37ee927c3386cd7705ae97"},c("span",{key:"78f800918f837a5af49a9cfdd61f877565e4ff00"},c("ifx-icon",{key:"8d603ef01a089f3e721287c6eddf85cddaae447e",class:"check__icon",icon:"check12"})),c("span",{key:"ea5f22400d6542d76f0c83b1c2de8879010dcc5f"},"Header section")),c("li",{key:"33c4b5dffa1b9d236cc215da2a87e1348b3e9914"},c("span",{key:"f33df46940f26762a3d9b8000b7cee614c444043"},c("ifx-icon",{key:"30a6394b71c138f1e6b26ad838b5ab3e5e9b820d",class:"check__icon",icon:"check12"})),c("span",{key:"5722eb4a20cd1ed32255618e6d66b1367d80768a"},"Menu Item Divider")),c("li",{key:"67529d67ab04bac2e49434a8819f0b5f534b21f5"},c("span",{key:"d0b78895707a9aa1311413c35db7aaab632b4625"},c("ifx-icon",{key:"60e166497d8062db30d3c55385737c31a38f9016",class:"check__icon",icon:"check12"})),c("span",{key:"9cfc50cec84ed59e3371de0743e8d45c4b0fd787"},"Icon incorporated")),c("li",{key:"0301c64cc58a7743fa7f34ffd4cd9faff90368b5"},c("span",{key:"b0e792fa8a3d5d82b954f0a4b883cd2371c954f5"},c("ifx-icon",{key:"bed85becd424e7f53c1861938b3833233b61242e",class:"check__icon",icon:"check12"})),c("span",{key:"28ca4c2f3489ceff111d0b6e6360a6fb0b303f78"},"Extended customization and configurations")),c("li",{key:"12c59c6d360c7702af24111300f6b2758d7ace84"},c("span",{key:"0638e790c9095413aa4896b6fda70240b3511297"},c("ifx-icon",{key:"c8b6c4c7a17517345d3fd6871004f238e2a86b2b",class:"check__icon",icon:"check12"})),c("span",{key:"d0fc2c09b8ab834d1a90141d0d728b68dccb873b"},"Separate label trigger")),c("li",{key:"f22b404fef6c1d1de432340299537109cc36657f"},c("span",{key:"4518abde1d5b8c38d32908c543dffe5b5d1fb1e8"},c("ifx-icon",{key:"0808beda85f74e980be7948cbec02d2db9dc9c06",class:"check__icon",icon:"check12"})),c("span",{key:"818c5554b6586473979f28fc52ae34d8c2681346"},"React, Vue and Angular wrapper integration")))),c("td",{key:"da1378f890d022d00357cb55a3924e48ad583897"})),c("tr",{key:"9fb46ee1437a004a039d2433cd83d214dce2afd5"},c("td",{key:"728315afb2baffdcbde414c0485bd5f0a390ef37",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"95ce76bbad0f4e8cf2eb0618c0cdd818877d29ea",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-footer--development",size:"s",variant:"bold"},"Footer")),c("td",{key:"14651310e86444ee431e0cd6d0b72e0c325dc04f"},c("ul",{key:"dff90b2b1b1c7ca69c428bab06bd2117ca376481"},c("li",{key:"5bd24e9b739f12321ca536f6915262715b4ddcde"},c("span",{key:"34e68cdd1839d4941f40bfe5cd543702991dae2e"},c("ifx-icon",{key:"aaad6b102a653cf250e9310105f614a76a074eae",class:"check__icon",icon:"check12"})),c("span",{key:"ae959ff906f0ab99a04895b557af608e636f6a49"},"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:"187730323dd1da4b23e579d276d78627a9bee9f8"},c("span",{key:"25095ddf1eede47d17fe8f8735235529ad988f16"},c("ifx-icon",{key:"999f1c4bf75a609ff9620001b82e25e88059c3d1",class:"check__icon",icon:"check12"})),c("span",{key:"3a387ba813b4619a87d93df238db1a410fb40084"},"Offers a flexible and configurable layout for organizing copyright notices, contact details, sitemap links, and other pertinent information")),c("li",{key:"61cffdf3d651b8c0ba60d0dbb0a31c97458cd429"},c("span",{key:"37c17a81551e7f55e7e668afc5b5789e93e5bf02"},c("ifx-icon",{key:"e50568269e95ccde30cf989e96c084fbe2d80205",class:"check__icon",icon:"check12"})),c("span",{key:"e430c879ed1b814e5e38b9bedb4f041e8d37c2e4"},"Adheres to web standards")))),c("td",{key:"f6970a978a911cc105f85c9778782ab39e602af7"},c("ul",{key:"ca199580b08200265132596d44940277abd34536"},c("li",{key:"b65e3385a917ab17334d62bdc3fbe01a31bc3a88"},c("span",{key:"e1a01da293a1cd4b0ae22ed1693b0b05df0d346a"},c("ifx-icon",{key:"54c5e7b436c4162b8e8dd1356c738dc946059da6",class:"check__icon",icon:"check12"})),c("span",{key:"142dbc4946406db985e96f0dbea26c90e3e8c159"},"Small, Medium and Large variants")),c("li",{key:"3d145fb5fb39ebacb36a4a82bc66b3408dfdab00"},c("span",{key:"e77bc6cee9539684188a6dbf603e6faf953ec023"},c("ifx-icon",{key:"4e847d240e18bba21591dff32df658b06ad666f4",class:"check__icon",icon:"check12"})),c("span",{key:"597fd4eda0e8747de872ca6d6efb9df53de53fe8"},"React, Vue and Angular wrapper integration")))),c("td",{key:"00b8e85052f2f2bfbea1581a32d602698b49b93b"},c("ul",{key:"fbff99b6afce07866fe6fbf4a241841d68771cc6"},c("li",{key:"aa8e3cc8a8206836bba05ff62129a7a07b3a16ae"},c("span",{key:"0398b8e944d3c4e1bc98b22c51df55d9629431ba"},c("ifx-icon",{key:"615c6c346082cfa09e9d7269dfbd7bebac942ca9",class:"check__icon",icon:"check12"})),c("span",{key:"c9972926283d45e489408438e15ffe327eef245b"},"Customizable and removable links"))))),c("tr",{key:"aabb8165009b711e910701510a3b9ff8d7e4a0cd"},c("td",{key:"ae8128b4b0b104077eb826e8691d34d150b6d2c2",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"7c3c8117f0d8f0c2a3e8d1754f75239c4ec3dd5f",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:"5b39734ac076a7842fb8ffe0c4034ceb36f093cd"},c("ul",{key:"62ca73ce89113a7f7aa763c38e1475ee9e9b81f6"},c("li",{key:"9131318cc5588d85cc1ada5d76621693b83fc949"},c("span",{key:"1f0e07277fcf2b9f0d787345a557186980edf1ca"},c("ifx-icon",{key:"40a92d82bace94832531b3e8bc3f521ea3370715",class:"check__icon",icon:"check12"})),c("span",{key:"9d278561527e50f1a3a580197d231418ea5f9944"},"Offers a compact and interactive icon-based button element")),c("li",{key:"792f39e47a5c1155e1413be2f90edc0c77dbe372"},c("span",{key:"9b5ab00b94bca814b35698df4811ab49e2742204"},c("ifx-icon",{key:"96d5c74385a059593df6f88724baca3e3796e71e",class:"check__icon",icon:"check12"})),c("span",{key:"41d88ca4562e5bbf2fadafc7002dc7ebb25b9c65"},"Provides a limited scope of customization")),c("li",{key:"1740655a1952a744925a0be6866fcd2808f201ec"},c("span",{key:"ea7feeb90ccbb213e5ebe1bd32da8f19f8f92be7"},c("ifx-icon",{key:"be9a053aa12341d6ee69ea61c14a0cb822cc18c6",class:"check__icon",icon:"check12"})),c("span",{key:"9fe177014d285632b8fa16f132025d910cb67859"},"Adheres to web standards")))),c("td",{key:"5a2c6ea0dcab3a5e1a31e58aa845c723df5cd0bd"},c("ul",{key:"c900d15f7ae3e8bfe7fd67fd7fdcbe12dbf8104a"},c("li",{key:"8771b7e7261bbbb85be9f7dc884e6245553b5526"},c("span",{key:"affdb864318d8a889af20b9d5c02c94857aa97e6"},c("ifx-icon",{key:"789764f990b34973c3d371bc2eed34d79c4447aa",class:"check__icon",icon:"check12"})),c("span",{key:"99c9a38830078e9be8e3cfb984fe18ec4b266e5f"},"Additional Round and Square shape variants")),c("li",{key:"ebb0923282865af0337fcb60149fa6c2387db2da"},c("span",{key:"2ed1bff80ffff006f4fbca27abdf535e3fdf17a6"},c("ifx-icon",{key:"0ecbfb8d3e7adc79c61985ccc9cbcd52ec427887",class:"check__icon",icon:"check12"})),c("span",{key:"f32cc9a65897d14c5f2f284a3f59ccb4d9c00ccc"},"Small, Medium and Large size")),c("li",{key:"6249ba6c5b7a5b36968962c6b2c3575e1b7d2be6"},c("span",{key:"2fd8a3e6f45853f5c8f269b5b554435571d88d98"},c("ifx-icon",{key:"84861f34fbf304feaf36f92dc5134de615795b89",class:"check__icon",icon:"check12"})),c("span",{key:"791b79f8bba7e2682a92f1651a3f56bfd9190cec"},"React, Vue and Angular wrapper integration")))),c("td",{key:"35466bf352a20534a45d6b302f8ef1a8bdb2901f"})),c("tr",{key:"c8c884181e2e1574ea751856109303fea6c5c06c"},c("td",{key:"ef50a3d35efe264cf1997bf2127a7a7c49ef91b5",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"977d0fad03d3f40fb9f6265b7bb8c54713293f05",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-icon--development",size:"s",variant:"bold"},"Icon")),c("td",{key:"3f92b6c293cc76e428e4710906a62d520c7bbe5f"},c("ul",{key:"0d84b5f30bdfdf32dcbff863d62a087bbc133bb7"},c("li",{key:"1c838e64aca217aaa3a3cdd6a1b50dad70096ec1"},c("span",{key:"3f55e2f2ed6e4076109bef4b4f8388b7723df6a2"},c("ifx-icon",{key:"2daa206af9f4acf854729c5cbf07046c32bc7832",class:"check__icon",icon:"check12"})),c("span",{key:"d38f99a632534d3cea23b062613c1ea7f9ef15e4"},"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:"a6f1a4fb5a0b54c84e939cca5455bd1f0bb2a8c0"},c("ul",{key:"d39b2fa701dc0a9deb6fb95115972d2e5652bcbc"},c("li",{key:"c73e5cf56a548486ec0f784463e3b64eaaee8700"},c("span",{key:"e0514cd27447dfe1cc25124a553574c8603cf1df"},c("ifx-icon",{key:"ddddea0e675de187eba1ce281cd110be2083654a",class:"check__icon",icon:"check12"})),c("span",{key:"1ab3150fa51702ab47f1be11a514e769ce39a743"},"React, Vue and Angular wrapper integration")))),c("td",{key:"9e6ed2fed1d756f6cd79484c9e2dd6b388f2786b"})),c("tr",{key:"a03cdfb8b6509a8baf6c5e82543e290944d467f0"},c("td",{key:"3f6371271680d895cfdc2bfb379423c96724409d",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"a78b2068d9ca9e29712f645c635263ae041a85e4",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-link--development",size:"s",variant:"bold"},"Link")),c("td",{key:"e75934d89b80451a85c3b774ed6a2ae140d73240"},c("ul",{key:"2145967a05bb9fb968394df03c23ce00348c6c9e"},c("li",{key:"0115e88a5101e19a904db699a24a67d5695106dd"},c("span",{key:"ac17b81c9b61a936b11fa8f3d939e3550a51a7f8"},c("ifx-icon",{key:"cdbc2b9369830dbadf2a761f27117139b19d4bc3",class:"check__icon",icon:"check12"})),c("span",{key:"e4d904d2ce63dbd3ddb6dc8532b6b180322e047f"},"Provides a flexible and customizable element for creating hyperlinks within a web application")),c("li",{key:"8d2cf03d3a1d94da802cd018a50edbcc9193312f"},c("span",{key:"59411689802bfc642b1b437b6be2aaca27b39cb8"},c("ifx-icon",{key:"af09857c248349ab2f457e15ae4c9f5b74e3fa90",class:"check__icon",icon:"check12"})),c("span",{key:"ef059fa2433a442b686e6799d19563e0515a1b99"},"Offers essential functionality for defining clickable text or elements")),c("li",{key:"f87c2a2871e103ea505a0413f33eca19324e2424"},c("span",{key:"ab74be5a0fe21eaafcdd2d2e671358a32c26edaf"},c("ifx-icon",{key:"a1a077033b342133424f19f355d88d192166d338",class:"check__icon",icon:"check12"})),c("span",{key:"7f41fd1a240658b821aad73a40a7d8b5af1fca9e"},"Adheres to web standards")))),c("td",{key:"dc077f0e1dcbb72b817b66b48e754eec7bc32690"},c("ul",{key:"66780bb8ce5a58c9917d14b00a56a8110cb86fff"},c("li",{key:"5191ac9d2f1380c611fd8ae244f2935d083b62f1"},c("span",{key:"61b48545fa5c9d647610f96415c9fb76a7b33ecb"},c("ifx-icon",{key:"c2ae470d0953c27fc02bdab0858f6f42df9aef9b",class:"check__icon",icon:"check12"})),c("span",{key:"5ef7249d515a5401b958c1fa2edd3a3951231441"},"Small, Medium, Large, Extra Large size variants")),c("li",{key:"d2ce60893009285863e9b80c06a48c46421e426e"},c("span",{key:"f48701a964420e68d2491b87d0d1736c5e5f3e93"},c("ifx-icon",{key:"4c77456de4a3d78fc041bd4ab17cba45c42a7b1b",class:"check__icon",icon:"check12"})),c("span",{key:"f27f3d83563b8a4de48d694a3c9bcaa373eaaf3d"},"Icon incorporated")),c("li",{key:"e5b1ddca259685a8683eefa3da26502d1edf6991"},c("span",{key:"c9fd9dd671d43836f2d152232dce5c4f73cba1aa"},c("ifx-icon",{key:"35a96227d1652e3f0e78818f000bd18371b2c4cc",class:"check__icon",icon:"check12"})),c("span",{key:"aee622a84e2cf4e75ce71937746ea74345c791eb"},"React, Vue and Angular wrapper integration")))),c("td",{key:"5568236a74dd8fafa877a9d71f76ff8e92d1bc8c"},c("ul",{key:"e11deec1925bf77bdd1e4bfaa3331dbd43316348"},c("li",{key:"ff2f8269c0efaa641bf0aeb4803d6885707c2550"},c("span",{key:"111206f28aa392032ecac3e167ab993edaf48852"},c("ifx-icon",{key:"a2ace7418053c31aeb299b68e3030dca94e5abe3",class:"check__icon",icon:"check12"})),c("span",{key:"101f2cfeaae94062770c42144c8919e5a900fd67"},"Bold, Underlined, Title, Menu state variants"))))),c("tr",{key:"05ec0bc42c07d499aa2153b1a55561c54b774ea5"},c("td",{key:"6ae6ca48d3b4314b4426b46e40c813c02746bd80",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"646457b1e32173b290d975f5ef041314842a5d0f",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-modal--development",size:"s",variant:"bold"},"Modal")),c("td",{key:"dd84665956480727649b9837acf199b30b1d4210"},c("ul",{key:"d8850db37bf5b4eb93faa36c9e365d83e7725e06"},c("li",{key:"cf85f1dc2e0489f5181f21bc460cfb5a719ef007"},c("span",{key:"cc405355a081971fd8fad050855e7df162f61977"},c("ifx-icon",{key:"4313f0e89c582edfa22ae9f7ec8226fbea4af8d2",class:"check__icon",icon:"check12"})),c("span",{key:"019838eda51bda3fdd7cff1463e08ab7a58d71b7"},"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:"c930ccbcdf43ca3bb789d518d31eeec3b89c1c0b"},c("span",{key:"9389eb10ef01adbd55a762bad7d730545789b021"},c("ifx-icon",{key:"52e8621ca25391d7a50016214343be9165fad428",class:"check__icon",icon:"check12"})),c("span",{key:"debd7c0e40f7af90749b5481224aad3ced96c5fa"},"Adheres to webstandards")))),c("td",{key:"17d0610b952a6be9f4f054c53965ee26b7d995fa"},c("ul",{key:"d4b18830d393082fd44169c8a8aced1ba019f3a8"},c("li",{key:"e93132160fd9e25d4189babc5a1143149eeb5870"},c("span",{key:"032d1d84c315ffed90399a3d469ed92f63a413cc"},c("ifx-icon",{key:"98422e673011df1cfb3bc70e4d29ead686c5d104",class:"check__icon",icon:"check12"})),c("span",{key:"5dd465ad11c62f22884b1002dea3240a03c41b87"},"Alert-brand and Alert-danger theme variants")),c("li",{key:"70f62c812d67ce313c3836f34ef5c2b8163faa3f"},c("span",{key:"f00d79d076b3fe41b7521fee77f98c6749d324d4"},c("ifx-icon",{key:"f572c38c6aa6c7e9527596de2761e0933dc59261",class:"check__icon",icon:"check12"})),c("span",{key:"43c67bd5971c33fa1a2a652f84f45813e1fd80de"},"Extended customization")),c("li",{key:"401914a7937e0b6465c5270b88264fc1a368e8b0"},c("span",{key:"fe9f1273ed287d68401b60d89c2325db5ba34749"},c("ifx-icon",{key:"d172f64e06d93764e0be226e961eb61de7d3bb3f",class:"check__icon",icon:"check12"})),c("span",{key:"80dce73e8b107684bb7d79972bb1c4991bee63fc"},"React, Vue and Angular wrapper integration")))),c("td",{key:"b169b20d3390352f82cfb9960e48e1ca36ed35ac"},c("ul",{key:"7dc92ccce6118f9adef2ba08e178e3d271ae0307"},c("li",{key:"749bfb9e44dba4a8312a90d676780a071c86cb52"},c("span",{key:"dc3e2891ddf3bbe1c42f216a8d66c3d1ea627d86"},c("ifx-icon",{key:"8d80a0dd9308f193bc1b604a511df4d9f1c2167e",class:"check__icon",icon:"check12"})),c("span",{key:"c475a0fb5bde06583c0af8aa96cfbc39025150a2"},"Removable close button"))))),c("tr",{key:"18774968cc39062d0dcd127ddadd24a718963442"},c("td",{key:"06e2a109d7de454118f2120ae30ba8d482c8fbb2",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"e4480ba9286525b3c0e1a7f4e1249a69b48cde45",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:"748ab8290bd5406ae1f84fdb2a4f626f262818b5"},c("ul",{key:"a97c767eea79f29093603796787a95eb2cef8683"},c("li",{key:"3a3aa1adc318f98022c914e7adabdcbbc10e31f2"},c("span",{key:"e38628da0a0f09f9deb9e61aa631bff67817b98e"},c("ifx-icon",{key:"7856aac9f6c198b012e3f8f021f673c4fddcc04d",class:"check__icon",icon:"check12"})),c("span",{key:"2cac67f2c58138bce98ed86cd6a3c5bb5687c3b1"},"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:"464ff6c7cae0d629e4af74bdcce0387250829364"},c("span",{key:"c3ef7338f56d8aaf816e1bd3286939f6aa32b1ba"},c("ifx-icon",{key:"94c771c2ef01ca174a0e41ce5bbbc535ea39bbcd",class:"check__icon",icon:"check12"})),c("span",{key:"b79d05c15cc0aaca5c7dd54d979cc4e21048e419"},"Adheres to web stadards")))),c("td",{key:"ce9af8c9562fc0bb8e773bec28926cf1732bf6d0"},c("ul",{key:"8d98b973f057e9eef8a877deadb1063bd5c7ed3a"},c("li",{key:"37a9ea9cc97bbb9a7bdd67e6e686232161c64dcc"},c("span",{key:"18553da2626a8b96b305388cc29344c035644c66"},c("ifx-icon",{key:"b20f7b8cd837576211807d198813d6f8a382440d",class:"check__icon",icon:"check12"})),c("span",{key:"321bddfd42af078e320997302811ce8a41a37730"},"Navbar-profile component")),c("li",{key:"cac53b8190e8ff7d68f438a3f7965046d1d6ac15"},c("span",{key:"358b47c2ce49d78f59afec750e78370672b63f5f"},c("ifx-icon",{key:"d0659384fa6c92dbbc99cf38cc03a18e8b09c21b",class:"check__icon",icon:"check12"})),c("span",{key:"bad0bde68ca10b5d0683ed6ba2da9f412043703c"},"Mobile Responsiveness")),c("li",{key:"3f06ae63684373be411714917e065db04e3d7d79"},c("span",{key:"1c8157402de4310bf83397760d6bb00d1c80c96b"},c("ifx-icon",{key:"b2c075d83dd68aff5e27e83e165e473d6cf46e13",class:"check__icon",icon:"check12"})),c("span",{key:"3163f33910d907c3500b660fd54e3a1504eca5e5"},"Mobile Sidebar")),c("li",{key:"ab254d6379f2ab1efac9941b88725093650fbe9d"},c("span",{key:"37b8dc21effc07da002fa722070643ac3a1cfa84"},c("ifx-icon",{key:"9c937cfc47f2d81c94e95e67db78cac578eeaef6",class:"check__icon",icon:"check12"})),c("span",{key:"aa60428ee5f15cf5143cabee20af9383e422284e"},"Extended customization")),c("li",{key:"72d19e238bde800a7f2eb35c8f17a5539bbff04a"},c("span",{key:"2b3041bf00dfe560950606d1d9c906b3a60774a5"},c("ifx-icon",{key:"8aea4cc1eb87ae757cdba81514258ac28847b68d",class:"check__icon",icon:"check12"})),c("span",{key:"a9905731b8880220bc6a34e04e7df228c3c609ee"},"React, Vue and Angular wrapper integration")))),c("td",{key:"9d1284ac73571fcc7f1dcf6ab1afcd879200a98c"})),c("tr",{key:"b2cd02b083757b577cb0984a6d1bdf551933a428"},c("td",{key:"6361379b147922cf3dcb6d813238d4861b9f7c09",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"e14560ae384528fce680c486a6a2ca57a64c50ba",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:"e5db543fe8d92e86dce6048db61fed937f7da132"},c("ul",{key:"de1e5a69f3a3b9b556b2e356203b050f587d615d"},c("li",{key:"b09cba833d9c43a0472aedc723a9809eb4c9a374"},c("span",{key:"a9230aadb49f69deba72c371006a3ea3e2e3dc47"},c("ifx-icon",{key:"a80453b4068e2bed48e82001d852f3d4332d182c",class:"check__icon",icon:"check12"})),c("span",{key:"9789215477f9c49b028e9f3c7d502cf4551504b0"},"Provides a compact and configurable display for showcasing numeric data")),c("li",{key:"107e6268161cb4527ea0e93246cffa67b87eec8b"},c("span",{key:"57bb8b0dbbc72c53d855091b785559b109b08d7b"},c("ifx-icon",{key:"500bd24a19cd14d0acc2e7b2558dda73c050af65",class:"check__icon",icon:"check12"})),c("span",{key:"62f4d3308d6d5aeae291277aa6008687faf2a3fa"},"Adheres to web standards")))),c("td",{key:"1d111ca3a521d1779eb4264a4fd61ecce272f99f"},c("ul",{key:"9131f667ccec07f243b9fdf59a0eef968ebcfdcc"},c("li",{key:"3008d1774f640e292261c166389d8c5f02342ad8"},c("span",{key:"ff2a33f311c6de5f7d3cc6723f373fca995230b5"},c("ifx-icon",{key:"a14288bd6364b5724cd6d42c58b9afc52e27c1c6",class:"check__icon",icon:"check12"})),c("span",{key:"5773089f863acdf09fef8506a4a7895422422932"},"Inverted option")),c("li",{key:"0adb390f5579caef3dd239ebe7490889a2d0609e"},c("span",{key:"b6393942de9b358c90b9f065ff2b7b9ec6cb52ac"},c("ifx-icon",{key:"74270825d9886fda257ad65ed4d8a8ac4400e565",class:"check__icon",icon:"check12"})),c("span",{key:"b9e23dec31991efc41cfa25ddd17a249b53163d3"},"React, Vue and Angular wrapper integration")))),c("td",{key:"8099b05b2a7359f57e73547f73ebb0ecff00c1e6"})),c("tr",{key:"6208fa654a59d2be77e3641907a652985610317c"},c("td",{key:"5c20585b3257397de70435a1305b343ffa0bcfc1",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"ca097601979a9729bf2c797b0c187ce697c12d5a",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-pagination--development",size:"s",variant:"bold"},"Pagination")),c("td",{key:"7a26eb27da63191d0d6afd57101ba51940bce14e"},c("ul",{key:"8944927c6119433d51a3ba25d5783820be311b0a"},c("li",{key:"ee4c3cdb64b6b6bbc8dda6bb8ac3478f60f56ae1"},c("span",{key:"5d1d2de64e69b1e4d8009925599faf727954f1f5"},c("ifx-icon",{key:"d74e8911696b97f4f19da779149367d9b8f184ab",class:"check__icon",icon:"check12"})),c("span",{key:"392346157874184bc56e7460d844075fa4907c52"},"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:"9ba67762225bc2f33c650fa81b7bc0d5db2da8ed"},c("span",{key:"a45bb7bf8bf9ca6b6234d038b4656a80328e1cd2"},c("ifx-icon",{key:"fd7dd2581191b438df6b1d657f488a9b9453d807",class:"check__icon",icon:"check12"})),c("span",{key:"efce0c23625ac31544e048d5bb2add7a7d37c171"},"Adheres to web standards")))),c("td",{key:"e9381bf74aa2a06d7be98540462bf5909ce1b95c"},c("ul",{key:"31b458963338a1b6f784f85bc84f97f58f34303e"},c("li",{key:"a4200e1fb90fb88c72331fb6c82f395aafaabb17"},c("span",{key:"b88ae065b2fe2d223c0eb288bea5d099057246d1"},c("ifx-icon",{key:"262c845c7410a1b65b5793fb83e64c75f08246e6",class:"check__icon",icon:"check12"})),c("span",{key:"dc50da4465bf3798deadfc097ba293c802724a5c"},"Extended customization")),c("li",{key:"ab31505b7af7559424cd8582a0e77d1a12619f06"},c("span",{key:"05140888564e08ad487f03ccb142c986acde996a"},c("ifx-icon",{key:"ba2c584e1741dfc9fc25cf610d5d54ab5a899b5a",class:"check__icon",icon:"check12"})),c("span",{key:"72354d76f21fe658ea22e2d2c915efb7efaa852e"},"Configurable Results Per Page option")),c("li",{key:"b57641dc098d5f76a5ddbd0c9bde2eaeb36f2e80"},c("span",{key:"90439299e92b4e0a46cf04fb135cad8ad045f025"},c("ifx-icon",{key:"aacc8f26e411f22718ae1add447dc3ebcca4eff8",class:"check__icon",icon:"check12"})),c("span",{key:"aa7e7a5f2599e0fb36c1adb5d2925abce91793c9"},"React, Vue and Angular wrapper integration")))),c("td",{key:"61f2cc3a46bca6430e8c6d8bcaf2a583173cf942"})),c("tr",{key:"e25838f6be8a55337423bfbc0ccc551dd5df3247"},c("td",{key:"f8b7b857550b93d33e39346013a38cc537e982cb",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"9b13557e130768e2aa0772fa30d80ce8810586ae",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:"fac1af56f63b261f8ff9a63eb91e8fe83bc7a110"},c("ul",{key:"c12c4b5e2d3d430e143e90cd0952eb0b02523ef6"},c("li",{key:"4cc977e63405eeea0fb090f07d24ebdf7f756c87"},c("span",{key:"bc42129ad6825a91983fdb9e60d55785332df617"},c("ifx-icon",{key:"0b75e22c7a7cd0ffa27c04a330c4dbf2a53a6829",class:"check__icon",icon:"check12"})),c("span",{key:"14778b24a2921d0a7ec5820b000b0ba3ea608f74"},"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:"b1cce934d2f912aa34c24d487103002fd5614ef4"},c("span",{key:"5c7b14b2974d43f7673c8031350d941dff8845c0"},c("ifx-icon",{key:"d15a686a1233837be9a2687b9ae492c1f047a586",class:"check__icon",icon:"check12"})),c("span",{key:"94c777a8744278398ba4ae0176ba123af00efdb0"},"Adheres to web standards")))),c("td",{key:"1ede2e834cc7ca623b92c9a2dacb43027482ae16"},c("ul",{key:"829866392d02e19f1640567209a2724bd22ed0b4"},c("li",{key:"e53e2ef0cec285bdec46e322ef0c5bc7fa7a2696"},c("span",{key:"bbd92e6743dc4b42394308bf24cf900fd8f253fc"},c("ifx-icon",{key:"c477c1ba1090bebf1e9e7e90e7270497e1cd3bd9",class:"check__icon",icon:"check12"})),c("span",{key:"cd77fc94eb8b221cb5608f229589110dd189781f"},"Extended customization")),c("li",{key:"194ef786af8bf3792658f353cd32efaca1f80c71"},c("span",{key:"30d3bd5ff52c9330dc2867edfa7f0f0c2bdc8210"},c("ifx-icon",{key:"a381138f9324efcfe2736bf0af4d6bae9dc23d42",class:"check__icon",icon:"check12"})),c("span",{key:"70df5120c9a334407cf5a10a862d3af53420a2d2"},"Show percentage option")),c("li",{key:"892984b3cc22f9ca049fe2fd44f9201790d39283"},c("span",{key:"8f656f68faf0b9802f570dcac620e8d650031b0d"},c("ifx-icon",{key:"12fa30ea60e0924333616c97725048fcbae7a506",class:"check__icon",icon:"check12"})),c("span",{key:"859fbc8067254c8055d55f003e52232db580aad5"},"Small and With Label variants included")),c("li",{key:"5a949fa214f9a1325197012a5d3ed871420dfc04"},c("span",{key:"4fb9c8564416cfc605b906114ac30551914a4f6c"},c("ifx-icon",{key:"333cbfee01ebc6daa676f33dc247b2fc1583c200",class:"check__icon",icon:"check12"})),c("span",{key:"d835dffb139c677425b913c854e235e6c42aba29"},"React, Vue and Angular wrapper integration")))),c("td",{key:"f1e65eaac1ab3186a36f51eee7b891f70c129e55"})),c("tr",{key:"a313b8830dc08fc873c446311cc5cd8120b449d3"},c("td",{key:"4af6c9c21232ba14ceadd60732dc32e4c98c9824",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"ba17401fa1a0080a23092742111cebe836ef7eee",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:"f826bb923fe53c104fc59b59c3f65491c4237a45"},c("ul",{key:"c89394d1d790a26b57b42da2aeb52bb2dbe07e7d"},c("li",{key:"14f83d9cfc01b9bdfb0fc3dceb7ee8d7e70c2678"},c("span",{key:"2439fba6de8877054e181256834b80cd0b36a544"},c("ifx-icon",{key:"9c0f854506bf6bebaec1c9ce650f2e357fb7e5f6",class:"check__icon",icon:"check12"})),c("span",{key:"bd2dd2655db92a155295f0e1dd1d83bb095b03e3"},"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:"eddb8ea6d720043c6012171c752041a0f6a10c5b"},c("span",{key:"4f20f215d39c7542a4016eb09143a2c0896de7c4"},c("ifx-icon",{key:"96f7b8fb29cad4a9054995bd95e05fa95d66d0f7",class:"check__icon",icon:"check12"})),c("span",{key:"82990e6590b672f7150216cd037f2e4c31e7209f"},"Adheres to web standards")))),c("td",{key:"a10f835f10ae7ae5fa2c0836be37c36d12ac43bc"},c("ul",{key:"bc0e1c0acb92c0e292ea174c7eebecf0f0265ec4"},c("li",{key:"cf3cdfb54ae68430856f72f6fbbf9ba733e1dbd3"},c("span",{key:"c1aa9b1ba070b3436328f7fddcabac9513277ffb"},c("ifx-icon",{key:"982442e4738884f2375bdad1d061abcd4b0394f5",class:"check__icon",icon:"check12"})),c("span",{key:"b93792daea1a9ef489b3147fb9523007da9abdc8"},"React, Vue and Angular wrapper integration")))),c("td",{key:"a17d6b5b855970415ce388207e7ffb7911006994"})),c("tr",{key:"89e0b2fb93142b41aad906158ae92fbbe9edb92f"},c("td",{key:"d47f79a4e73a0b54017b78cd566ee0dc1f22f694",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"e28b68a8acbf871a7ff2549b307c7e4a6ba8e51b",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:"1d76b89a94a570b8263a5c44f63c96346a60e48b"},c("ul",{key:"6831c75da3f9af5e3c3333cac316932dae1adb00"},c("li",{key:"b811e74485d2a49a45facf094732ba091a163936"},c("span",{key:"597e2002f6cac92432a5cea1491933e8325eef5a"},c("ifx-icon",{key:"3d1db5419eb2c0ddc5a92f1e52be46de120b39bc",class:"check__icon",icon:"check12"})),c("span",{key:"67407793dfe18d939258601caff7d3d7855362af"},"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:"f0f0d83a0ff42252ffc088e21926fa2e001d7f33"},c("span",{key:"19e92abeb2aa6874d428cf310b0ea771686ba84a"},c("ifx-icon",{key:"bda978fd1eeb362dd1e6630b2bd8fb4f64f2778a",class:"check__icon",icon:"check12"})),c("span",{key:"cb372daf89cfe467da1beeca51f172f8f1c6c46e"},"Adheres to web standards")))),c("td",{key:"101381c9e77dbed42a392a7050e40727c422d466"},c("ul",{key:"2515be70bb9b545b4d20d7ee04c698b9ef214106"},c("li",{key:"743dc27eb46d91f6cf290613c6973a41c97f4977"},c("span",{key:"d8ef23e76fc4566d5820a8c59136c6c7a6234819"},c("ifx-icon",{key:"34e890bde4a2776c0d0ce0d22aa02d9a51ee746d",class:"check__icon",icon:"check12"})),c("span",{key:"c8bbf39e2fb679d8bec4d52b29d54b15974f512b"},"Collapsable option")),c("li",{key:"848d3059d1558bd6b214d9c4be7bb44626e63ffd"},c("span",{key:"ef2082fd97c022a0dbb2967cdb5e418d6d0e79b1"},c("ifx-icon",{key:"44d5e29e221f1eae4bd06922b14e73735ec9592c",class:"check__icon",icon:"check12"})),c("span",{key:"245e42e6b7d73b9ae4ee3dcd118aa81c5b3dee12"},"React, Vue and Angular wrapper integration")))),c("td",{key:"faddf648847bc24df7b11fda4e7a28bd24822cc2"})),c("tr",{key:"b5dc391136e162b64f57fdedb126b917d2a72df7"},c("td",{key:"023f28d2f79d368939be9a5a901603f41fcff66b",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"2d7e0a269cd3df67d27748875f04b33f3097eb7f",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:"31a156b2b4ddbf8bafb51b3a3a0b592c60a7a733"},c("ul",{key:"1b8e593199a0a113da12ab79987c417b799db5e6"},c("li",{key:"bf15e109d7b4cc685d82dec4f7675f33bd29105a"},c("span",{key:"86a75c8f3d4b668d025f6a26787fbd84fe13f1d6"},c("ifx-icon",{key:"7111319cceff05c14e4a060ab92a59679182d799",class:"check__icon",icon:"check12"})),c("span",{key:"7213bf4d64dcea845714efebdfcb28f487132cfa"},"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:"bf2a380b3373f723dc287dcab58d8b015c63652f"},c("span",{key:"38ae6db8fb80f8b64824cf19e5a4c375959c4f90"},c("ifx-icon",{key:"816083ff03d92257e2fd0d9af9a2d0081b85c4fc",class:"check__icon",icon:"check12"})),c("span",{key:"40b6cd9595cebe4371041b6a266c6d32f02e92dd"},"Adheres to web standards")))),c("td",{key:"e3c71b960bbd782518423c5b862c673e3ba8803e"},c("ul",{key:"46de47dc6cf3cc31ff1bc9cfe5b2b9adda19eaba"},c("li",{key:"46928495a960be3d3c59949c2c7016585b82182a"},c("span",{key:"b183936adb39333e6084979f267f69061d67846f"},c("ifx-icon",{key:"3d6486b9509a7cc2e731c759b9fdbeb9e93400ce",class:"check__icon",icon:"check12"})),c("span",{key:"923d224fc2d2d706d0d96e6a43e7d69d32cd943e"},"Show Delete Icon option")),c("li",{key:"01a7f07b1b2813e5df76c63fa591ad6901a6dd5b"},c("span",{key:"af1c98ffad3cb5b0dba99b60fab976edfa29f961"},c("ifx-icon",{key:"c223b1f3e93ac60f4674d949d896ee3b6b7de8ec",class:"check__icon",icon:"check12"})),c("span",{key:"33d10a0d1b718c8ea29758ff9818aa85c0ab7604"},"React, Vue and Angular wrapper integration")))),c("td",{key:"76f81bf3a936805f0e30fd8a7e2623512af5531e"})),c("tr",{key:"5aecb528424559e728a9a6a1654c1419c5eafe69"},c("td",{key:"f4d42db01992c178fe984893f032af2668d455fa",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"b90845079f70c75bd70740f277c6cecab014a8ca",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:"4c17958ffbe33f76ad70935cf59fa9dc8cfad987"},c("ul",{key:"192e32e8d8d311572c9a8065613829b2a1d1235c"},c("li",{key:"25546c68dcce792f3543504310918d7b5c1b7cf2"},c("span",{key:"833e82aa4932646ebf13b19c4f62a76f185a8c5e"},c("ifx-icon",{key:"9dd657ea14e05e4af5deb3e183679e97c2740fa8",class:"check__icon",icon:"check12"})),c("span",{key:"98724750cf988e28b728ad4d0e5638fea5d35abf"},"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:"e90367a95551eb5be87f3775f266c3484945967a"},c("ul",{key:"e41861425c7fb6ab8a508077016933117e826b1c"},c("li",{key:"f29004816faabdc9d2e0b634d8706ad6fd459653"},c("span",{key:"d335fc6e550246c8e582b83ff73fce242d8f85ef"},c("ifx-icon",{key:"994dbb3a01628847c4fdd1ee51cf71a8810ddf55",class:"check__icon",icon:"check12"})),c("span",{key:"cd843622131a11c458e18f62f5d32d1f2de4baa1"},"Extended customization")),c("li",{key:"fd8a5d19aea87ecee072cc18c0eb6d05debc61ea"},c("span",{key:"3f36e498b0bdbaceaba4479c43e50246f122dcc7"},c("ifx-icon",{key:"b286be96cfb98c24a12302050aae3f7a4bbf8a57",class:"check__icon",icon:"check12"})),c("span",{key:"a6f7d91dac450e0238eea0d47d76a3c8db5f2f27"},"Option to enable and disable the search")),c("li",{key:"e5dbe1c58a66dd41143317281bb2e70ba7fc1b8f"},c("span",{key:"4bd6ae0932accb86df129dd98f10162c1a11d598"},c("ifx-icon",{key:"e0917d27f2309eff36c8723bdf65b0b571a45504",class:"check__icon",icon:"check12"})),c("span",{key:"a506c1b421b61dc89a2c5656dde8604d746aa00f"},"React, Vue and Angular wrapper integration")))),c("td",{key:"34bef425acce2a771ae1f2fe280ea5252a03ecb9"})),c("tr",{key:"f512db444aa994d1cfd920acc71482c236f20776"},c("td",{key:"0cdf04af9e1fc2c9a8986ebe0c2b5b3a4d5cc8dd",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"6b45c9fed530db669a5c21d2c11d633d4232e9f8",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:"aeda84b983aae4a1270d821477222571cae9c2d3"},c("ul",{key:"a305d4f314de6801056f0ef8d8c23b893bb99a20"},c("li",{key:"35c023525a43c9f52f6ff510450f00c65953697f"},c("span",{key:"078870f05db7fe29cb019298a559cb5d528845a3"},c("ifx-icon",{key:"9d2fb18d65a1617a5e352060e9f08b81c3e5d61c",class:"check__icon",icon:"check12"})),c("span",{key:"5cb8aed542b571720922fbb11ac5305b51eee7bd"},"Provides a dynamic and customizable dropdown list that allows users to make multiple selections from a list of options")),c("li",{key:"8e3a261555924dce06e83cf977995b2ae9418999"},c("span",{key:"dddbb7c67bc85ac02df189d545af8dbe9b4b2ce8"},c("ifx-icon",{key:"3aede00d4f2f792839341fe7a31510020a2e6df6",class:"check__icon",icon:"check12"})),c("span",{key:"6b535c214be3053fc9750c70004ee940420c504f"},"Adheres to web standards")))),c("td",{key:"15165a36f9a1201483bc71ffe0b0059f91a2d917"},c("ul",{key:"6e5b4506197ac9a0322fecc0fdd0a59f08d73f5e"},c("li",{key:"665f7f9d64340580a484a5b8a9ca56821cf0fd4d"},c("span",{key:"896e396cac37c63e522e42fd11ddb98498809fc6"},c("ifx-icon",{key:"61aeacd4a5e3efdc74a599a2eb9c4a4f6109e438",class:"check__icon",icon:"check12"})),c("span",{key:"45ba48261f1f876a2557f1c8dc8812c62b500527"},"Extended customization")),c("li",{key:"1b84455d0acc9327a5bef58677684812b60867d9"},c("span",{key:"c28934fe25a422a1a16f3156a97b652d24322681"},c("ifx-icon",{key:"bd7e08b5f53f428a2a75e8dfd0715061c0d30b5d",class:"check__icon",icon:"check12"})),c("span",{key:"a12de59e4da55301d99b5f1d863900e02d4ec776"},"Nestable options")),c("li",{key:"8904c109df64ec59dc537b24904fcf3c1d8e707f"},c("span",{key:"bec64906f3b761dadb2b7a1867e1a4c82daad619"},c("ifx-icon",{key:"f7769570bd66a415dfcf6dfd39597e3334510ba6",class:"check__icon",icon:"check12"})),c("span",{key:"9dd091e833b973f41d383f7f271b9d5bf1074cb4"},"React, Vue and Angular wrapper integration")))),c("td",{key:"5d3e55ab33c31133dd7ce4f7d338c82f8ac24b29"},c("ul",{key:"1d4b7a786ade0a52a78d8a0253229caf2a225eee"},c("li",{key:"1712fe7eae66901f7ec29c99a02edd6425fa64be"},c("span",{key:"54015814c3b3d6d30cd5cf8aab7ef3282d1c2bf5"},c("ifx-icon",{key:"0c6efeeb5ce6aa7273604606a3a5a8176e84739c",class:"check__icon",icon:"check12"})),c("span",{key:"4855f3613c1ac3f10c3ef36b1f00bdbd28921dba"},"Option to enable and disable the search"))))),c("tr",{key:"705e0ae33b011c5ec6104c15108b340dd3dbdc9e"},c("td",{key:"f7f74ae2b3ee074d704e9e8439ab402116e2ebe0",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"883d33b56a2d5ffc71c56c1135ac6416f6497457",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:"d0fcf6b2918402d3e20f32b691251aa1f8899086"},c("ul",{key:"7517f26f825bb4b57bc262079604924bb3ee795b"},c("li",{key:"21df1a9ef8c18ecbb2062b38aebe3b2da1c4d0b8"},c("span",{key:"d1fc4cc2d3aa7bf334904fcac19bffe0d92b422f"},c("ifx-icon",{key:"8b7f8553ed55b70fac053292f3217728fbd09668",class:"check__icon",icon:"check12"})),c("span",{key:"1467d81198ec7acb94bd845ac06fe8301e139eb9"},"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:"29f569e4603dd561702dcba35f17018886d9eccf"},c("span",{key:"6a61a701a372df41aa8deff400ceb35b98967db5"},c("ifx-icon",{key:"9b053ab00e7dff3aecbaa4270e16435d6585bc5b",class:"check__icon",icon:"check12"})),c("span",{key:"61dea4eaffac3b08629afba66da6e71136cf1126"},"Adheres to web standards")))),c("td",{key:"d93724a43c465832029606dd036ee195c8c14f31"},c("ul",{key:"428658c01c721d41852dbf0207f111af20becd3e"},c("li",{key:"e016687ec82f217ab27e34a594baf42a69b05392"},c("span",{key:"bc2f2db4f1ac69a6babfe40d305356f689166a42"},c("ifx-icon",{key:"78039e0e07002f88d8f5ad465ea55bf72ae10993",class:"check__icon",icon:"check12"})),c("span",{key:"d1dc47b26a7e35b7a51626ef29f951ce426df786"},"Extended customization")),c("li",{key:"819b300d0907a8f96b42cd6ffea1ce0958cc468b"},c("span",{key:"b1a93dfd6a92af85d684a36b3bf311ea6ba0e2e5"},c("ifx-icon",{key:"e0d470745fc59ccedbe9a6d399a394b1b2e28271",class:"check__icon",icon:"check12"})),c("span",{key:"8ae7a74b2a7d3b0c8eef64e1c3739738175bce8a"},"Multi-layer nestable items and menu")),c("li",{key:"b97633ee34767b7f02d2ffd32827d1907725479a"},c("span",{key:"c304fa20d795bec822f8010acd539d8c2e785d9f"},c("ifx-icon",{key:"27e821bc73925542a673f00c777bbbe87b1f6a68",class:"check__icon",icon:"check12"})),c("span",{key:"aca669f77ac196eea4e5d4051cdcf44a6988aa10"},"Initial collapse option")),c("li",{key:"179cd2518d5acd8b2d330f88f2f749d865a285d7"},c("span",{key:"d2047b88cd12795dafcd557bfb96371a5cda8a80"},c("ifx-icon",{key:"de995764ed654e3a26911c8e6e312b6bf2fce1f6",class:"check__icon",icon:"check12"})),c("span",{key:"1b9eface102342c43e214ab5d626a9e726656759"},"Active and action item feature")),c("li",{key:"6d9ab8036cc4ccab722b9d60135af646c7991a53"},c("span",{key:"fda7a810ec2be79c716b0f3c7485293b819f0e9e"},c("ifx-icon",{key:"3ca1ead9554ddeae68bba2ad625ed7cb2ffac64a",class:"check__icon",icon:"check12"})),c("span",{key:"f27ebeccd63e99f65d632f59102cee327b6624e6"},"Number indicator integration")),c("li",{key:"eb791399f4c7981e061822baddf22992a10028d6"},c("span",{key:"55e57c644ad645f8abf340fabd451e4fcccb9b76"},c("ifx-icon",{key:"5052e466f52153ca7071a6800a84c5b988e22bce",class:"check__icon",icon:"check12"})),c("span",{key:"f008b9262196bc5bb82d43eb407a187509e25df0"},"React, Vue and Angular wrapper integration")))),c("td",{key:"2d0f01d01c967d60de2ecbec05cbb09712442051"},c("ul",{key:"aad7ff5ea9a7862d21e040623ae916f67aa02f59"},c("li",{key:"6efd67354909ad8fb19a255cb1aa1fccddfca5c8"},c("span",{key:"fa61eeff2a18086bed52e3c48310408806fa5a73"},c("ifx-icon",{key:"a92aba79c3098cb24bf04fb0c0236144082fcdc7",class:"check__icon",icon:"check12"})),c("span",{key:"7eeb86d2301144e72f8baa3b0ff3edef57441459"},"Removable Footer, Header and Logo")),c("li",{key:"117721a53a337720cea2b52feb243a25651e00c6"},c("span",{key:"812c1464713b7944cd745ae74d66a38f54b3d2bf"},c("ifx-icon",{key:"339b3ae2715feeeb25871e81573011b9e4c0804b",class:"check__icon",icon:"check12"})),c("span",{key:"d43480c555c381be8a782b3fad72bc9d5c5303cf"},"Removable and customizable Links"))))),c("tr",{key:"b6d565fbb3896f8e413b935736dee4c46203dd3d"},c("td",{key:"5aff960ff40e9a31dc53bd6caf9d48e35dad1eca",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"bf51507b750e2887862e00fc4fb70959fcf7adbd",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-slider--development",size:"s",variant:"bold"},"Slider")),c("td",{key:"714a90696a65b5bd8001416d5156535a731b82c9"},c("ul",{key:"4715bd811c98ab35ba91ab9ec9a56c647e745d54"},c("li",{key:"10bb8ce975801c5ccbd767d656121208fc0c597a"},c("span",{key:"4cac73583cc2bdc5b77b1abdaa8a4c8824beb994"},c("ifx-icon",{key:"d07cd9d48a697d206b6afa1a15594b6b2dc6513d",class:"check__icon",icon:"check12"})),c("span",{key:"7efc03d0f89ad9dfd309139669a98aca4bd4423a"},"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:"c8b1c1b7b2d41b6e3ec96fa60ee5ec2f50165e05"},c("span",{key:"6ad1e950a1b4e45fcfe34e3ac5e78872e54b3af5"},c("ifx-icon",{key:"afa3e5cf6da01d89fbae5a67af7d076934212852",class:"check__icon",icon:"check12"})),c("span",{key:"0b60db41b1d6675bcf1dfa756b6202c05678ea52"},"Adheres to web standards")))),c("td",{key:"7df54e3214cf2d023d4b90888445f715fccd54f7"},c("ul",{key:"e82e4a2520b3ef2d1eef9656649af34af821aa34"},c("li",{key:"4240953213c7859754b5f9531b20b5b60e5a8692"},c("span",{key:"d303ca46baef7fba05cf39eb4e7584b33ef6eee8"},c("ifx-icon",{key:"8940c381e2d3981c5f730398288dc36440908015",class:"check__icon",icon:"check12"})),c("span",{key:"5cbeb5566a9d631c5d7c766f505ff49138f6aada"},"Icon incorporated")),c("li",{key:"683ab12b7c1f65f9e41ca666ea9dc203006c8ea7"},c("span",{key:"afc0b1c83683c530a0ee926a584857c509920419"},c("ifx-icon",{key:"b932ddbb5c5370c1845aac4ae74d260e46445d31",class:"check__icon",icon:"check12"})),c("span",{key:"1ff0cce43f8eeaec4b95acb37910142b9136a05b"},"Percentage variant")),c("li",{key:"0903ada5988fb0d82ee8b78f89cdd6819c5b432d"},c("span",{key:"4a7ca53f027818e707e422f6bae013a071e58a56"},c("ifx-icon",{key:"10b714082de13aac9e3809c7dc88260cd32a4ae6",class:"check__icon",icon:"check12"})),c("span",{key:"ea1ed6c2006124409e9369e8da7a18ba0d687255"},"Text variant")),c("li",{key:"904ff32cc32e09884f7c1fafa5ef4e3abf27ff8a"},c("span",{key:"e4560732d7dd0f64f41d329457169e8866dc13de"},c("ifx-icon",{key:"0e3e1fd9c5b86026491d02d19ba4c2bea89f2867",class:"check__icon",icon:"check12"})),c("span",{key:"012bc0c65cce31eb15b27f2e8cd2ed9802c7ea77"},"React, Vue and Angular wrapper integration")))),c("td",{key:"fec8fbaf2f8af680ff488fabc9c04415a1dc3ca0"})),c("tr",{key:"ad617ef4815e3c164a38a864055c1ac85280a676"},c("td",{key:"41b57c25825ad4282fa51d7ed8e377df52a7ec88",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"6528a672f3866745458ef444e9b82c91731b9140",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-spinner--development",size:"s",variant:"bold"},"Spinner")),c("td",{key:"a075b4a52686495bfbb8fe627ffc5ff4ed887506"},c("ul",{key:"7ea9ba74a1caef6d17ff591af45cea8eacde9674"},c("li",{key:"289d692e06965e75fa112977b0e1dc6589820037"},c("span",{key:"2dda7116ac195bf2ce9c381df741f221e3971f39"},c("ifx-icon",{key:"94245cac5e26e815c0a19166df201f1ae04f25fa",class:"check__icon",icon:"check12"})),c("span",{key:"fd8fa184a21f40c25795d99f6b2681aace38d680"},"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:"9c229c4b12704a07816eb7c955edd7958b04b3e7"},c("span",{key:"2a96311c6970c6c30f22b83a2bcf4cc57f7eb632"},c("ifx-icon",{key:"ba0ad02c4ca388cc0cef4747767b87cc197a30d4",class:"check__icon",icon:"check12"})),c("span",{key:"688c8faca39ecfc2be82783fee93d87243470423"},"Adheres to web standards")))),c("td",{key:"d4d22caaaa9fe0aa6e979aec7ddb5d1600a5df82"},c("ul",{key:"2ccd8a338377b830de3bd63d5a2f745dab85252e"},c("li",{key:"9b9f430acde27a9dc87a6de5e2a0bed33cff2263"},c("span",{key:"759edd8a8a8a828ef75a0280a78da9a7c6340509"},c("ifx-icon",{key:"2ae24ab7ffd672aa50a4175a2414d7ee52a226b7",class:"check__icon",icon:"check12"})),c("span",{key:"1a75297eb4bac13e3dd50533be945119355b7fb2"},"Brand variant")),c("li",{key:"9a860b4dada8c3c3d40e0a9b2cf9ced8b0ec619d"},c("span",{key:"38fcad81591154cd7217e94047e5bdb51af8079f"},c("ifx-icon",{key:"0878623da1241ab8b67ab86eb6a83ade71aa4f86",class:"check__icon",icon:"check12"})),c("span",{key:"7c4008954f20a96e50ac9ed1f52c68095bc0a617"},"React, Vue and Angular wrapper integration")))),c("td",{key:"48a56752e8e76e8f01cf4cc4d1d1abacf8071513"})),c("tr",{key:"84dac3fa1bd3847a327b1b3d8695f68e41545b86"},c("td",{key:"113a762249bb467f3eff9ba2d8de52b41ab482ad",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"60695ef6333e66db539afdff08c457987575838a",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-status--development",size:"s",variant:"bold"},"Status")),c("td",{key:"50684105947a4f44d4d75c13bb4619f431fce16b"},c("ul",{key:"e263feda2e675d950adba8d902a5186266c78063"},c("li",{key:"eb06528b7f5c29d09a338f16adcd3a58e0d10343"},c("span",{key:"4fe3174ed0aa369be7030a7aab611fed436c5b26"},c("ifx-icon",{key:"8cfdba8541131804d2e2963b1950bb29ea4af642",class:"check__icon",icon:"check12"})),c("span",{key:"40860196cca96989572c89af6ff4913bff7bdb9e"},"Provides a visual indicator for conveying the state, status, or condition of an item, process, or entity within a web application")))),c("td",{key:"cdaa6336dcf81f46bb1c6e00ce42e9e2a1a9e085"},c("ul",{key:"6bf64b66dbdba395071dd881d914291f7c66e627"},c("li",{key:"31cf384d045928fe0ad6fdc64b9e4b45f7b23302"},c("span",{key:"5104a2c2512126079cc053444c7984428159a8bd"},c("ifx-icon",{key:"a0e766279cf3ff66cbceaec94c756c42e2ceb89f",class:"check__icon",icon:"check12"})),c("span",{key:"da39e0abab29af669b598e8ade2afe72cefbab4a"},"Ocean, Orange, Grey, Light-grey, Red, Green and Berry color variants")),c("li",{key:"eb7f2d3ff667650fb8d9acfd92ac392ff69e07d1"},c("span",{key:"8b4c4c1c33afdced1493f03ee3f7840631b4547d"},c("ifx-icon",{key:"450bfde70c116b74c09be67dad864538fcfd5db1",class:"check__icon",icon:"check12"})),c("span",{key:"d6bcab3cd5794dc3dcf69bc69d98d43b8c25f103"},"Removable border")),c("li",{key:"8a05fe9ca7dbb8ee9e6ed233de64567dee5b5fc0"},c("span",{key:"d946fac84b02d53c43db0ad2842e46412f8d00bf"},c("ifx-icon",{key:"6a88e2f04df562c958970b4cfaca831273075d58",class:"check__icon",icon:"check12"})),c("span",{key:"e6ee0410cad390db7e769e6f73c6f9949baaff7b"},"React, Vue and Angular wrapper integration")))),c("td",{key:"0e77f61cd8d5dca0063471b6dc062e8a9244da7c"})),c("tr",{key:"ab42c9ad253485a5f50e840394f0cda8b18f3db0"},c("td",{key:"00d027e169c97b3d714917b4fe35c54fadb56ec8",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"5ee1af1f884c3618bcdb4777d8a399b3fee2b523",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-stepper--development",size:"s",variant:"bold"},"Stepper")),c("td",{key:"9ccda34e7f607671333ea2d6de759af73e52ff0e"},c("ul",{key:"305f7de029f21b1e6da63fa620defd43ebf96ff6"},c("li",{key:"f800e2f88e30f3b57ace9864577cd60911f7f131"},c("span",{key:"8060f6d094f292e5853172809a785c3261d4b953"},c("ifx-icon",{key:"9473a08395e2b9f141e077725c094a4a0ddaef56",class:"check__icon",icon:"check12"})),c("span",{key:"0d9dd8e071c051e7b621dc6efb8e4ab285b9e2d1"},"Offers a customizable and intuitive control that allows users to navigate through sequential steps")),c("li",{key:"8d2b3f92e0b17fd439e7e2f2da1c3d83aa6d2df9"},c("span",{key:"4755c8b56dc5e20a3ab54d1e8dd743d9e20d18ac"},c("ifx-icon",{key:"7c484c5a78d4df50ae455a414dabd4c65cec660c",class:"check__icon",icon:"check12"})),c("span",{key:"9f4c4b2bc529d8b65ea1b21c19e677a02d96d9fa"},"Default and Compact variants")),c("li",{key:"3cc335e46a4c2eae3d815a71b4a2f50bd657bbe6"},c("span",{key:"fe5b04ee183dbc24c068c5bd97e431083466d0f9"},c("ifx-icon",{key:"9b30cbcd2bd83735ec793227006716d71d2fb816",class:"check__icon",icon:"check12"})),c("span",{key:"d79cc50ea4794614bde8b20ca8122b31541afdd7"},"React, Vue and Angular wrapper integration")))),c("td",{key:"c9bf97c163620be6c792e86dfd8957e37de2d619"},c("ul",{key:"a624efcba7e6fd71f03e67db5b8d0d2a3cd9aa13"},c("li",{key:"68f419d2bdecf68fa81e437807bb6999fe90f4a6"},c("span",{key:"8bbe95bd02424f931678969b5b042515890f3578"},c("ifx-icon",{key:"6c03771e48eda2db8cdfcc7daee9354b724267b4",class:"check__icon",icon:"check12"})),c("span",{key:"67c4207024a50a4631daa84e4a75370baf574848"},"Vertical variant")))),c("td",{key:"bb3162c2522e4d9ae4b6390416d4a09167d7981e"})),c("tr",{key:"2d1cceb0bf3964a8376845fd0e8e51debadb877b"},c("td",{key:"a48721e5d63dcff5ea98c9d24393fff3b8b3068c",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"3218029f18c9912e8bb63af07d64212c858bed73",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-switch--development",size:"s",variant:"bold"},"Switch")),c("td",{key:"af0344b52b10abcd795c6f4cd8d24587c4f12199"},c("ul",{key:"bf2ad056a5453553c0ef57b207854c076703c178"},c("li",{key:"579c7ca7c61ca8a491cdeb2085ac97c4236455e1"},c("span",{key:"2542b7ee798e8e0b44975560bc856225e964f5be"},c("ifx-icon",{key:"101045e320703f606c3fa18c9286d72713f8c626",class:"check__icon",icon:"check12"})),c("span",{key:"b183aee580eb3714a0fe8b010041b55087a61770"},"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:"94d75af962f9470432f278b93deaba97f1177975"},c("span",{key:"481cc366f76e5e84b2162a1ed5f4fda4244d4cc1"},c("ifx-icon",{key:"4ab2f6865d61f541cce85ce6b29c70415bfd7894",class:"check__icon",icon:"check12"})),c("span",{key:"48614460f8da0223cc51a7c89443044fa85689a9"},"Adheres to web standards")))),c("td",{key:"d59296cef49fce838d8746dd70f9b2199eb9839d"},c("ul",{key:"ba6871f7eeb3b51e9010e854225cb74f52163f77"},c("li",{key:"95a2733f5f228fa3bb3eda6635904d421bb7fa47"},c("span",{key:"667b7d1e8ea066c777db97e44892a26bebfa183c"},c("ifx-icon",{key:"6b6ad61bdadb8179e93ba2a978ceb5504b9a433f",class:"check__icon",icon:"check12"})),c("span",{key:"31a395f88371406a758944a830ebc26352d6b968"},"Incorporated label feature")),c("li",{key:"ed5219b05c29bbaa6b37353702291425ec207042"},c("span",{key:"31ce7a259f7935f3491b2d5c7f78e38dc49f98ed"},c("ifx-icon",{key:"5e78ee4743154b17053a03f74714389ab9125726",class:"check__icon",icon:"check12"})),c("span",{key:"c3aecfe6b6cf9860083d79150360b9e94cad192f"},"React, Vue and Angular wrapper integration")))),c("td",{key:"dd365640adb41fbbfa4472ff19dda01a5a4bfeb7"})),c("tr",{key:"3e627d5b0bce1e97b13538517a46cafbc8945193"},c("td",{key:"d6a3de87b88372f5e27bc468618dd5d573ff9368",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"94167b5011d190faeb9bc0c17c0947082c39eb96",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:"75092d0dad6b80e02895a24df5594cbe7e3c2fa9"},c("ul",{key:"85488d8a3fe93e411d5ceecc7f83fa0020ea37a4"},c("li",{key:"41c94c80411ad6b24156b2912a28f55f71c0cba5"},c("span",{key:"6fe13c04b2d220afd2be9ef3d67d078eabd65cb5"},c("ifx-icon",{key:"f62974cb1f9f27e3d849dd3d19f67eb82190303c",class:"check__icon",icon:"check12"})),c("span",{key:"90f3e4d16168643f9f91a562ff6730afb1ac44f2"},"Offers essential functionality for organizing data into rows and columns, allowing users to view, sort, and interact with structured information efficiently")),c("li",{key:"46ee1e89ceadf93a088488e50496725bd8b5d700"},c("span",{key:"d4810fd5dc78a86e21e143b64f8ebe6c1441d0b5"},c("ifx-icon",{key:"e17eba9ca43e375ac60594b291e821b63204cddc",class:"check__icon",icon:"check12"})),c("span",{key:"9c5f234c87412dce38733e5f447569878fe4e7a9"},"Includes basic features such as column sorting")))),c("td",{key:"223aaa0faa8ff75b75745ecedbcec8f98b884b4d"},c("ul",{key:"cf8b543323c76f8a26c33daf841ee849b75de5c2"},c("li",{key:"6209562e87d12f9b82a509d9db6c547527aa5054"},c("span",{key:"8df09f4ba5fd652294340489c8d725466f5aefe8"},c("ifx-icon",{key:"a76fc27aab98d9b54dc8753f35d934b447dcf86d",class:"check__icon",icon:"check12"})),c("span",{key:"fb3311069a6bf72132ea374fee90ba6368072410"},"Compact and Default variant")),c("li",{key:"2614077bb988b9314fe0824c4c55dd65ef4f10ec"},c("span",{key:"6ca9734520d0dab1a144c23fae6dc95fe93ffd3e"},c("ifx-icon",{key:"e494ef1aecfa45cc47a5cd87dfe0eddbbc5ee480",class:"check__icon",icon:"check12"})),c("span",{key:"dc291bd7b1ccc963cb8ec219ed31a3709f316bfa"},"React, Vue and Angular wrapper integration")))),c("td",{key:"21815db3b6a0f8ea0644061ef97f1a9e754cf5c3"})),c("tr",{key:"114ddbe2717131708792a38c087876242661a6fe"},c("td",{key:"813c3639842b203c5a36a05b2887e9bd0c5129fe",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"bd564718599921c0dd0d02c29327bf80f994933f",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:"77e83448d0e5b1e65da1e1ebb43fecf254c0fc6f"},c("ul",{key:"e98d4d6fcdb69c2dc2e458cfef5f88c95befa239"},c("li",{key:"bb78c32c7c96e15e478bed0d836c8d7ea35bf5d7"},c("span",{key:"a8a9eae0c3f7797ae9ea9607408e5a97edb8af3b"},c("ifx-icon",{key:"98d643d989bcc8fe9a0ebf64272fa6b5b6f56d2b",class:"check__icon",icon:"check12"})),c("span",{key:"f401baa434c4c701761e4503d4d0b59ebd16b59e"},"Pagination")),c("li",{key:"3780cba51cd4f1c5a55d1ec9db3ea7160fce92ba"},c("span",{key:"9abd9ee12ddb92c51c35d84d5b688370692f0a06"},c("ifx-icon",{key:"8a5c01d0c98a8726fdceb93de586d8aa39940f42",class:"check__icon",icon:"check12"})),c("span",{key:"2e5ee8140b6f97ac898a003f202ef8a84fb0dc2c"},"Sidebar filter")),c("li",{key:"2b7bfc0a8612aecd35e8f53ee597d9e373e2d233"},c("span",{key:"cfdd3c33629f3ccfd5347f8a3f9af2b39db34fcd"},c("ifx-icon",{key:"8fbab33e435b1a101a4e85c2c07bb4b7e05b4e8d",class:"check__icon",icon:"check12"})),c("span",{key:"0af9c4e64287a01f6dc95ac5dd04c53a8d00fd37"},"Topbar filter")),c("li",{key:"de6ace9b471905eeae01bc624ac39c5f33c4ecc1"},c("span",{key:"3fc574499bbe0da91084da6049b007f8147c03af"},c("ifx-icon",{key:"b509d0c51d83d4f3cca196bc3b9f9bc7e84be69a",class:"check__icon",icon:"check12"})),c("span",{key:"33eaf5b4707e6b2a0e32c7711a579d926c467b76"},"Nestable buttons")))),c("td",{key:"86be1b64e8eec16bbffd11d17926c066a871c102"}),c("td",{key:"d35b8211d646094ea32abd0d5b5549d2bdfaef3a"})),c("tr",{key:"7bd77abc04f415bb744f4f4bb6fec9bcdc6b2240"},c("td",{key:"de6b94bf6ae5786780c4e2af73f91faaef4ef8c2",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"7419e4064938920e12ef3c8792f5724c7e908e25",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tabs--development",size:"s",variant:"bold"},"Tabs")),c("td",{key:"12298e76dc41262fb52d1d6a8e899afa4c0d04b2"},c("ul",{key:"f7855012b31fb52dd966a3d990c7cda9d0cfafab"},c("li",{key:"5605eaae73fc6383d4ace29af3572d455abe1d9e"},c("span",{key:"0c060ad8d7f2ea07a522d30676308626a32e34c0"},c("ifx-icon",{key:"23f778fe1251c052bd3ffe2f8f671f415c4fd4de",class:"check__icon",icon:"check12"})),c("span",{key:"ceca875ba701010900ed515416dfb6978abcb8f2"},"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:"8eebfadbfdc315e4f8c143b81cfe80b1881ae266"},c("span",{key:"dfb71ba2058808ae3aaff1d42130925b390a3dc0"},c("ifx-icon",{key:"91272f29c61520846b02fa380b0c0ae3c52662f2",class:"check__icon",icon:"check12"})),c("span",{key:"c43c8ce40b4d85b4fc36015252ac6e9a67770079"},"Adheres to web standards")))),c("td",{key:"d62fc8b51caa0203256c517226162251e145e749"},c("ul",{key:"8ca1886cf23d623b2b7c96d797f5d5108cd70819"},c("li",{key:"ae7c73d7b7ad9efc05ab177e5673174a887a955b"},c("span",{key:"552d68604aa42888a8466a6bf4c98d117b92714c"},c("ifx-icon",{key:"715e2aeb13010e31e77cd806161791cb98ccad25",class:"check__icon",icon:"check12"})),c("span",{key:"28b8bcd345ec57345565f230807b4cce54d5178c"},"Horizontal and Vertical orientation")),c("li",{key:"70f5f429829397b0169720bbcf6c214852c87260"},c("span",{key:"7bfca205468dc4842534de13b8f7f3fdcfa14c1c"},c("ifx-icon",{key:"5ac4563ab3ec0945b8e94f9b35b109e63f9b5af0",class:"check__icon",icon:"check12"})),c("span",{key:"2e5eccf140b9420c474219f2d32a2dd1e76e2461"},"Extended customization")),c("li",{key:"80071c2fce5a293865e7b6d8643400fedb537909"},c("span",{key:"e170e1d2037966589466b111b8f8e2fef8f9a294"},c("ifx-icon",{key:"38d7b651e69812b5ba98b32cb199910279859d9f",class:"check__icon",icon:"check12"})),c("span",{key:"2dccec6c3220ee92e7ae946091e0abd1c33d0f1e"},"React, Vue and Angular wrapper integration")))),c("td",{key:"613114b61f39d33b3ed7836a3f79b951bcc05210"})),c("tr",{key:"c84be0a62d1223ada11705760e44829499bb8421"},c("td",{key:"259f6fe66ff8d728ef112ca4668735bef26c744e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"d056b9b536e5dde80cbae5be78a3bfb17d14e447",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tag--development",size:"s",variant:"bold"},"Tag")),c("td",{key:"43a9032e4b210e0da3f928e1db720f72a1b36954"},c("ul",{key:"4315595ebb3931b45ef2e30d599a858f18df5a6f"},c("li",{key:"9051203c54c82194d855dd55b0a7332ce802fe4d"},c("span",{key:"317f00d34c516df7e5cecdd56e9eab8c25619b67"},c("ifx-icon",{key:"151f5d16b4c8200b5700acd8a18f341256374653",class:"check__icon",icon:"check12"})),c("span",{key:"6ef0da0c30ce95873186c97fff17d284c44f27da"},"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:"68c43bf99ebef86fe3978b974f0270a7336b18af"},c("ul",{key:"1f9483705a7abd1857e36cf7d5e593af5223a30b"},c("li",{key:"6d732637aeaaff0f5bd6ced17c6ee26162f3e406"},c("span",{key:"97365b9946fbc64b9b095158fdc63ab613a57110"},c("ifx-icon",{key:"8ff5c746d6e9827c283f80d18f84fa6fe9aa0993",class:"check__icon",icon:"check12"})),c("span",{key:"064245a73940d14d6df654a7075caccc48bf8664"},"Icon incorporated")),c("li",{key:"123b7611d3da42afff7ff992875fe8f92bb7c750"},c("span",{key:"f66a8d8c76ffa49a75bffb0f87a1fc49115c5994"},c("ifx-icon",{key:"cbc28a408f3b9959dc363564a097cf99132bc6c9",class:"check__icon",icon:"check12"})),c("span",{key:"ec8d1f7c28986daba654f005d0215a222a410466"},"React, Vue and Angular wrapper integration")))),c("td",{key:"5e49928bb6558a688a00e031d58f4f6384c8838b"})),c("tr",{key:"e8bae905dd890e601cff045b1c73125d3344715c"},c("td",{key:"b7d8f7d5d27ba586118160de2c9c92b36e68054e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"19278a56f5ec7bda647275882d81bce86b3175e4",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:"6e64dc8e83e1bbc6cf2787c43726a8ed2990aa1c"},c("ul",{key:"aa082bf48d258036a8a96deb8fd486bec44f5537"},c("li",{key:"9c47715bc641cb143b5c136e6575acbf54c671d0"},c("span",{key:"ecc6f497195e7f3e9d6033a0ea6f847aef8aa05a"},c("ifx-icon",{key:"d7481b776fbdc59879e976c5007ec3ecf9c0d884",class:"check__icon",icon:"check12"})),c("span",{key:"ff59473f213279b5175057e601bfb9c9dfd77953"},"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:"2c3a689380aacd589484249ea966e89bce0c7231"},c("span",{key:"f4322b4872c0bc6cf0940cae43e32e6456ae2307"},c("ifx-icon",{key:"ea7ad7f037d8192b45b934d054f47d88d098504f",class:"check__icon",icon:"check12"})),c("span",{key:"2bc7b82ec13416f4859dd273abd77fd41dd76acf"},"Adheres to web standards")))),c("td",{key:"6336a675f45a79eb17d751c5be4f35f8a77aa8dd"},c("ul",{key:"6c6a273a03c29e6b9b74cb0c49b0c07d4ccdb30c"},c("li",{key:"a3799d68b2b5a4dfeb0f4524d8f6c660ff337a81"},c("span",{key:"edfd3fa4e40be482e45ed2b13d50ac4e19bbc375"},c("ifx-icon",{key:"60b94b305a2913cd0ddf996968e4a18f5d3ce1a9",class:"check__icon",icon:"check12"})),c("span",{key:"8afc08a29120e4459cdeb24719ed8b78d6002b6c"},"Extended customization")),c("li",{key:"f66b5c8ab755fa5d1eb19599ffce03d0589b6993"},c("span",{key:"3137a35291099a50684aa42a825f975714655327"},c("ifx-icon",{key:"2c72eaf13795ffa2757cb52be2ebc06d837f8f59",class:"check__icon",icon:"check12"})),c("span",{key:"77bd783a82173da337bc2825addc02170909389c"},"Possibility for icon configuration")),c("li",{key:"6087cfa2d8affa80c1fcf46d31f3f1d220ad4587"},c("span",{key:"ad11531ef4c3f577f900a42cde7497365918e377"},c("ifx-icon",{key:"57a0f39ef15cc0abfe01c9ac7c105675f8e31b6c",class:"check__icon",icon:"check12"})),c("span",{key:"6e1aa9f9688ef95957297b457d976b052a2655fe"},"React, Vue and Angular wrapper integration")))),c("td",{key:"f25c630824d071dcf571fe73407fe3cc19a9ad96"},c("ul",{key:"e6e0ccb07967398c7199c4dd5d80ef997557f54a"},c("li",{key:"569916a7e9ac68eac126687e9e8dcc963ec5e053"},c("span",{key:"60e019c2ca1c56abb26474cb751a421ef0cfd1de"},c("ifx-icon",{key:"13c94a1458aa67428ba9962323b8a173e9072236",class:"check__icon",icon:"check12"})),c("span",{key:"d31e35e2d9ff3be0ec7ac1b3d34745136c8fb8ed"},"Form integration"))))),c("tr",{key:"588cfcf955b3c6e46df2bd5f55b290665354d435"},c("td",{key:"74478b54a6e939d5f53544f2b3059fe72da013e9",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"bb86be0a547b84627d1e67bcf063ced127a0e0d9",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tooltip--development",size:"s",variant:"bold"},"Tooltip")),c("td",{key:"93bcc5ac55fda6d2ede81ba78bb95d65e138d1ad"},c("ul",{key:"f66c010f72574815ca39f0edebcb50e4c688b195"},c("li",{key:"610548e0f5610df70248f060a6152a5e4f195d91"},c("span",{key:"ae88a9dab205273b6eaa5739473c752f3fb71e4a"},c("ifx-icon",{key:"3fcc0f8ee36653604a6382408f0d21ee8169d7d3",class:"check__icon",icon:"check12"})),c("span",{key:"47fc470ff7cbafe196f010f2180985595387b672"},"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:"2c0936ebb7c050f91bbb7832100b9ce737f2f137"},c("span",{key:"c78b82ebe46a5701e51d032c7e7cd0dfef84f0af"},c("ifx-icon",{key:"5e8db58ae2fb2246a488664e09c0924a041fa439",class:"check__icon",icon:"check12"})),c("span",{key:"01bce1d870072b1e3f20477f9c4b3a20c8ae8ef0"},"Adheres to web standards")))),c("td",{key:"5b682a5c01a6733fc0e54f8d752ba8caa7f27c51"},c("ul",{key:"564889ccd8603346a3d83443c1ee1777d32d33e6"},c("li",{key:"c7615b70ff6fa436da82764031a9dcfdd132613d"},c("span",{key:"16061d76fb6727ef158d3ef8c4bf5dbf6c562c74"},c("ifx-icon",{key:"78fb4818352bf7c65b1511fb4ca0aebbcc914ac3",class:"check__icon",icon:"check12"})),c("span",{key:"fb2b29b92fb6548fde95b161124541213a00a8e5"},"Compact, dismissible and Extended variants")),c("li",{key:"be8c59f265282cd7175eeeb776012de77b158042"},c("span",{key:"f9972567b3c9e0f355a2abe6ad74017a72f9dd12"},c("ifx-icon",{key:"3b7ba05fed1eb68a9f97890cacacdb8ec490a97f",class:"check__icon",icon:"check12"})),c("span",{key:"925087968d81459b0a1f96df491f32c116e44ac6"},"Auto-adjusting position")),c("li",{key:"4f4c88bdfcd5a1898618be048d716f98ea52470d"},c("span",{key:"f89f9db8d828033d3d6d198f2f365ced29584cdb"},c("ifx-icon",{key:"2ca886e14984ddefbfa58daa4924c86ce21138b1",class:"check__icon",icon:"check12"})),c("span",{key:"7c5bc05aa1503494f7c72a1589444ebb49d841db"},"Icon incorporated")),c("li",{key:"a9cab61bee68861de82ea300cbbaa17ac6ca71ea"},c("span",{key:"6e58f43cb12039a3f6b9c400f65cc2949fc978e1"},c("ifx-icon",{key:"653ac365b7bef261514bd9eff8d6d6cc45698b63",class:"check__icon",icon:"check12"})),c("span",{key:"8220fdcceaeb579c8e625761482cce0e0e0372e8"},"React, Vue and Angular wrapper integration")))),c("td",{key:"aa7521d7ba06645fb1f670c9e271de7bc0ab6b12"})),c("tr",{key:"aa83d1e9163cfe78e25e2675c347cb44890a028a"},c("td",{key:"4005a7a3951dcb52a52a33d15063849b77524499",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"68ab9e095b0a3bf2b8dcff5c4bee9d5c2489a08a",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-notification--development",size:"s",variant:"bold"},"Notification")),c("td",{key:"3e1472164ba823d84996e42ba121f01dd8281d63"},c("ul",{key:"47b5c409bd58a13f00b75ebe023d3255393a565e"},c("li",{key:"cd47ab66fb342317264ef99b90e464ca7db99b86"},c("span",{key:"d356ab976a493e7e3f34cf16f644768d2c748800"},c("ifx-icon",{key:"b01b5eb3e79d31664e35132ba89578ce968382ea",class:"check__icon",icon:"check12"})),c("span",{key:"068b27577015cb43295154d37aeb82f0585d6211"},"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:"72cba783aa291368d4f03f063d10be4946184147"},c("span",{key:"4cd4393718207a4d9076e2ea311d41f50514b222"},c("ifx-icon",{key:"bc98ef0971b01e37ff532c5fba5f067d3849df1a",class:"check__icon",icon:"check12"})),c("span",{key:"33ece591dc82767c5c291788532030c41e722796"},"Adheres to web standards")))),c("td",{key:"7a8f8dec5813e5f080020d23fbdbd2cdfd5ea34f"}),c("td",{key:"ad6c7a98bf08d77e96e2a68c5d977da2175df9f0"})),c("tr",{key:"74c401d2bf614a501b912146fc50924259e5f414"},c("td",{key:"ac4f14121718442d908803a2f9552cea59e7ac52",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"87498c093a0a7c54e5bd798b3a4bab8546819931",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:"e79ef48d7c317b98f2e6e741f6a7f59ef5e94107"},c("ul",{key:"7081fda18dce309726ac78154d7e87744fb475e2"},c("li",{key:"d8c473a038a82ed99475cb0af359cc9c824b82d7"},c("span",{key:"6750d6baf81297c5c736389d8f8e51adb62a14d7"},c("ifx-icon",{key:"95c3f1f879be3c900731441dde9bd2dc1d116aa4",class:"check__icon",icon:"check12"})),c("span",{key:"148f7ca2beb4f07074146ded1009b90b60596b0e"},"Provides a flexible and intuitive interface for dynamically switching between different content sections or views within a web application")),c("li",{key:"e6ffac829347dcb3c155591543e020c4b6c4e247"},c("span",{key:"2c9f891d3795a8fd691d22f2dc7bd8ea7f1950d3"},c("ifx-icon",{key:"d402fae7b081c621d86510b16747d9224c2c9ab3",class:"check__icon",icon:"check12"})),c("span",{key:"e762af68490045183d9f6a1b79e234b7650edbe4"},"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:"6afad5378fe6c505874c8d1a4068a888c908e35d"},c("span",{key:"ce03646e071a931584d829e8974425fbba8a8090"},c("ifx-icon",{key:"462e7208ec66939bb85ea257836123c98cb7fddf",class:"check__icon",icon:"check12"})),c("span",{key:"8b7905119c7076d0ac586ad5a0c5d4a91c963afd"},"Adheres to web standards")))),c("td",{key:"76d13d87fc704862e12cda08b6f36ddd53c36475"}),c("td",{key:"01f18bb756a894bff9da033e958bbccdbf30c65e"})),c("tr",{key:"e0ee06ddfbf6a3a5a09f886dc3837b318bd92040"},c("td",{key:"f1108afd6e803aeb9eabb89eb327dd68eb328e7c",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"ae1fefe4a095ad36548a92b482bf687e625f9c8b",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:"91b2be355933d2b4ea38d7ea0e127be37600090e"},c("ul",{key:"cce35b3a55c29d9b9402feca3f6a2b2472b4a833"},c("li",{key:"1679a63cfd25854ce03bc13488d972bbb34939d2"},c("span",{key:"f67fd18196e14381ec9d8bfcf9904efaeaa02d35"},c("ifx-icon",{key:"d5d35d3dfceba76f69125c8fa0f9ccd81fdcc65b",class:"check__icon",icon:"check12"})),c("span",{key:"b8a7afe9ef863f0a8a0a5942df02a2f1d66a56e1"},"Provides a clear and interactive interface for users to make mutually exclusive selections among multiple options within a web application")),c("li",{key:"01ce9438af356c8eff3ea7f648b777ee35591eb7"},c("span",{key:"c8d2c37a0e01207fbc554eba3f136551aac5926f"},c("ifx-icon",{key:"8ca5520e8d2b865084a738988540c87959458374",class:"check__icon",icon:"check12"})),c("span",{key:"12a36cd1db507fa85b4ea2408357b3629e9b662b"},"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:"e3c5a590b5da285f3393fd1d25c0056a09746fcb"},c("span",{key:"7f8bc720de71c19e1dd7c00cc42a54d40bc5f5bb"},c("ifx-icon",{key:"9c0b77c746e1f1c12807103468146d8495e1d171",class:"check__icon",icon:"check12"})),c("span",{key:"a1be543abbd64ad15f4f8e7b8e1f74207823eea1"},"Adheres to web standards")))),c("td",{key:"43296fbd4746b7c22cc0eed607efc279162089ec"}),c("td",{key:"36edf5fc0d4d11be7e1eee16161d05f62362debc"})),c("tr",{key:"9d8c4ddeabbba7c7fff4c07241186d064973d8c2"},c("td",{key:"faea8cef696f4fb72f742600794c395cdd4806e7",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"1086d8d459b16dd8fa6d2c33aa1a27a84dab4d81",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:"8a1d299dae87128934b08139ddde6e77d110d946"},c("ul",{key:"f7cc8f0384a7fdac87050d66062f9ed839bcd7d8"},c("li",{key:"1a605c7c35e43e01739870b8392c9f0982868b81"},c("span",{key:"3ffeceebc9a765bc51720de126d686f812f68ec7"},c("ifx-icon",{key:"70220c7716dc638acf5659b6bb99297f0bb79ff0",class:"check__icon",icon:"check12"})),c("span",{key:"75445dfcb5d6fec62f78eba96cf55b88f083e8a3"},"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:"4a2bd2168fe9c81c89b4ffb8b6fe1fbfaff1c45c"},c("span",{key:"010d8fcfaf74dfda3d15da7e9557bac859f20a40"},c("ifx-icon",{key:"8bbcfaedaeac9f64a83396a1e7d18917b61972c7",class:"check__icon",icon:"check12"})),c("span",{key:"3ea2add2ed48e99ee01b739121366a902eeef56b"},"Form integration")))),c("td",{key:"48e8a62e11e70af3fcdafaebb6b08566304cd823"}),c("td",{key:"046a92062d5512c84c234f43bf97e23373595c81"})),c("tr",{key:"ef5f0a67adf64a474d06027bb387b29b5ea9076a"},c("td",{key:"0967c3523d56204d17aa6dcc97afd86fe151cd86",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"4f2c2dd154c5dd0d4a58bfde1e7019bcbf464236",href:"",size:"s",variant:"bold"},"Card Group")),c("td",{key:"e467f5a55bf58bafebb7c77ee1a2feca11c78425"},c("ul",{key:"648ea6e12ed5b3b164a67e57765f218133a4a688"},c("li",{key:"2182e53ae8fb82d885ad2ca44c8c14902fd753de",class:"planned__component-wrapper"},c("span",{key:"5e2e9ed5560946ba53a0261336a9bf259b818760"},c("ifx-icon",{key:"0401fc8661a42cb176478cbc8bb73dfc969d7607",class:"planned__icon",icon:"clock24"})),c("span",{key:"38748e9d68def3fbf93a58985c05169ed14062f3"},"On Hold")))),c("td",{key:"95da21efed48691e92f7ff596de7912b64b7f102"}),c("td",{key:"75c24066b7fbcddd6b5bf671c252617287b101f8"})),c("tr",{key:"3ef2df6b2df5e41c97aeaf08b613bdbf3a59053a"},c("td",{key:"fdb75fd44d68ccbf38bd711c632da61e78f8521e",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"67d388b187d0ac81c1646a1f727f3cafb206cd6f",href:"",size:"s",variant:"bold"},"Advanced Date Picker")),c("td",{key:"5152b89ee2acbbdbdaa98be8e3004ed3c9603dac"},c("ul",{key:"859733b009d75cc11312b28175c5da3cb795f2d2"},c("li",{key:"b1b3d65103332a0c0b52e00c54c3b7911bc435e5",class:"planned__component-wrapper"},c("span",{key:"530327318e0864cd3df33f3251abba1066e3c437"},c("ifx-icon",{key:"6650610c4b04a8ee88876fd450ea8dd620ea4dff",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"5d2a3e9865ac82e62b8ec8518addb10fef1b9034"},"In Progress")))),c("td",{key:"1e8d14ddbbbb3164caa02d8b12a698cc0bb27ff4"}),c("td",{key:"6acfa6eded08a9f94d3d50c241214aa0a873ee47"})),c("tr",{key:"ff7df586aca1a3c72342bb4c77f1f1501806c2c3"},c("td",{key:"1b170045badbe42bfec7b47a81429d7335a30218",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"44a42f34b747f671a322856254fc1caeeef9d317",href:"",size:"s",variant:"bold"},"Upload")),c("td",{key:"2ecaf3a6e5c54f896827d30234f2ad16c15bba92"},c("ul",{key:"9e4e36dd9e095be8d149605649c81b1df779e3e9"},c("li",{key:"4196752fd4778c4713f17cf41ec7e20c5d3a9e37",class:"planned__component-wrapper"},c("span",{key:"dfcd312fde2b976ce5d84643f1bfa7ae65cdfc66"},c("ifx-icon",{key:"a1069119c52b340bf930d28b8a7ca1cdb03ef736",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"40d3bffc46155d349e9e99a836a93bdc95835574"},"In Progress")))),c("td",{key:"03df88d158be82fce55098b4afff9fa810df783c"}),c("td",{key:"e1872576858dc8f91011840577f08744be4fb3d2"})),c("tr",{key:"f4f548ff8b7efa253a17287cc0ad63fe33319b59"},c("td",{key:"fabcbfb17e48be84489bfe3ec0729632436b4fe2",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"28cb080849629a13b320a3894557af044f40c66e",href:"",size:"s",variant:"bold"},"Checkbox Group")),c("td",{key:"b26a30ad9863db3f16c5506264248d5c905fa17e"},c("ul",{key:"aeeb78e332d5096a097bbac6b51b2b0ae7ca5333"},c("li",{key:"8ff79d8cea2dfb8d69398c4545b00970455df08b",class:"planned__component-wrapper"},c("span",{key:"3cfbff1f115cc695a0991275df101e704b0fdb16"},c("ifx-icon",{key:"5db5902ec16f7dbe800b7cd31688dfbc30d29e93",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"f7bde841295bfb35647d6d71d320dd027208e68d"},"In Progress")))),c("td",{key:"3f77a89dd8564e2da0cfd6b5b951fdc1c33773c2"}),c("td",{key:"edb1e6b8333412636c51e700cbe944715d2a23f6"})),c("tr",{key:"3a40cf1c9d2c003e876a22f1c0a17a0aad32679f"},c("td",{key:"5cea57e4b22051d14cd3c31da3e25ab54269069b",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"bd35f5f5e00c44ce715943b7bc737d17b9ff6db9",href:"",size:"s",variant:"bold"},"Radio Group")),c("td",{key:"ea55f5108f24e306ecc43e373d5eb076c9714f59"},c("ul",{key:"9e6b1e483b45f9e6450aca744f580fb5fb4130f1"},c("li",{key:"5e06624787cde846ef69c5d3cb76f9763630cf69",class:"planned__component-wrapper"},c("span",{key:"04c2ffb2d89a440ee619af326c17eba3f68b2e87"},c("ifx-icon",{key:"6c4a29997b2ee517b1d466ddd1744a1d0d0805be",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"077fe01b2350c9dc356b2a6c9b73c897b7107140"},"In Progress")))),c("td",{key:"9b3d733f585b93e44a17adb9f3e5600f1060ff09"}),c("td",{key:"3ba88df9105918659c48c721baeb73b80a92356d"})),c("tr",{key:"2ec71f898c70a754d242ad370624345b15d90786"},c("td",{key:"e39031cdeffb72da83045f31da2bff753048b016",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"22af53f5860c0c3abb72b821d8fcc508e9566f00",href:"",size:"s",variant:"bold"},"Tree View")),c("td",{key:"f9aabc4fd6f5a87123bb4e0170cbe97818d70bcf"},c("ul",{key:"b938cca97cdafa7b4aa8033c996fc1fc1afe232d"},c("li",{key:"e851182a4c5750f8f333cbcff098af51554394a1",class:"planned__component-wrapper"},c("span",{key:"84159ba390fea003752bd8fd49a1d67ca6982d86"},c("ifx-icon",{key:"0e7dd85ceb7b3352764ca04e63ad06ab2d0a17ff",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"2cc9b6ecb5c3049f1343cc39c0efb163e57ae1d9"},"In Progress")))),c("td",{key:"02ed0181094204e0d9de74d78d47f75a02ceb11c"}),c("td",{key:"c55d488d64b4dcfcdd6c4f778e2db173fc38c2a6"})),c("tr",{key:"f69b27cbde3b02899f454ddb5bbc5b1f33e8ddcb"},c("td",{key:"1cb31362ce2a3edbb137be2a6b5a8533caaa7a8e",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"fb893b2adb32fe8e5e8dfedaad80796001eefaca",href:"",size:"s",variant:"bold"},"Popover")),c("td",{key:"1a1231803fcbac78d7340cdfb1838d8b6c856225"},c("ul",{key:"6db01514d6c62396a51c72c8327f94782fb70685"},c("li",{key:"9200e2111d37cf5bfc5f8ea8f62b99875cab4deb",class:"planned__component-wrapper"},c("span",{key:"87ca51b415f2da81c0f57b609ec8ba8edaf436be"},c("ifx-icon",{key:"5d4e4598d57b59a0aab153c67ff655cd84de3291",class:"planned__icon",icon:"clock24"})),c("span",{key:"368664401eafa27407113b4b94f97454e793da24"},"On Hold")))),c("td",{key:"7d7f29264f374481d5cd1420f11d78904b575592"}),c("td",{key:"a9d816f9ae4fb8f5fea38c70bb68f7ab800f1c28"})))))))}get el(){return a(this)}};b.style=f;export{b as ifx_overview_table};
2	+ //# sourceMappingURL=p-e8b6810f.entry.js.map

package/dist/infineon-design-system-stencil/p-ebb196ae.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as e,h as s,g as i}from"./p-e244bae4.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.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:"717c5de3dd19bba21b84ee182974fe95a5668d41","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:"b0502d8ddf1d0617ba481b47afd8040139323c83",class:"stepper-progress"},s("div",{key:"efea8c4a1038802bf66c27b780724a9a640f60b7",class:"progress-detail"},`${Math.min(this.activeStep,this.stepsCount)} of ${this.stepsCount}`)),s("div",{key:"193397aafdda31d67b33991e6b7fac0f886a2477",class:`stepper-wrapper`},s("slot",{key:"e4d31312f64282a929991bec647b7e3e0942605e"})))}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-ebb196ae.entry.js.map

package/dist/infineon-design-system-stencil/p-ebb196ae.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["stepperCss","IfxStepperStyle0","Stepper","constructor","hostRef","this","activeStep","indicatorPosition","showStepNumber","variant","shouldEmitEvent","emittedByClick","onStepChange","event","steps","getSteps","previousActiveStep","detail","complete","setAttribute","handleActiveStep","newStep","oldStep","disabled","emitIfxChange","i","stepsCount","ifxChange","emit","totalSteps","el","querySelectorAll","addStepIdsToStepsAndCountSteps","length","lastStep","stepId","setActiveStep","setByClick","setStepsBeforeActiveToComplete","forEach","step","syncIfxSteps","stepperState","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":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-ed9670dd.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as e,h as i,g as s}from"./p-e244bae4.js";const n=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.ifx-multiselect-container{position:relative;box-sizing:border-box;font-family:var(--ifx-font-family)}.ifx-multiselect-container.small-select{height:36px}.ifx-multiselect-container.medium-select{height:40px}.ifx-multiselect-container:hover{cursor:pointer}.ifx-multiselect-container .ifx-label-wrapper{font-size:1rem;line-height:1.5rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-error-message-wrapper{color:#CD002F;font-size:0.75rem;line-height:1rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-multiselect-wrapper{background-color:#FFFFFF;box-sizing:border-box;position:relative;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;width:100%;font-weight:400;font-style:normal}.ifx-multiselect-container .ifx-multiselect-wrapper.small-select{height:36px;padding:8px 12px;font-size:0.875rem;line-height:1.25rem}.ifx-multiselect-container .ifx-multiselect-wrapper.medium-select{height:40px;padding:8px 16px;font-size:1rem;line-height:1.5rem}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible{outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active){outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active)::before{content:"";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:2px}.ifx-multiselect-container .ifx-multiselect-wrapper.disabled{background:#EEEDED;color:#575352;border-color:#575352;cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-multiselect-container .ifx-multiselect-wrapper.error{border-color:#CD002F}.ifx-multiselect-container .ifx-multiselect-wrapper:hover:not(.focus,:focus){border-color:#575352}.ifx-multiselect-container .ifx-multiselect-wrapper.active{border-color:#0A8276 !important}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-up{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-down{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-up{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-down{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.is-flipped .ifx-multiselect-dropdown-menu{top:auto;bottom:100%}.ifx-multiselect-container .ifx-multiselect-input{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ifx-multiselect-container .ifx-multiselect-input.placeholder{opacity:0.5}.ifx-multiselect-container .ifx-multiselect-icon-container{margin-left:auto;align-items:center;display:flex}.ifx-multiselect-container .ifx-clear-button{display:flex}.ifx-multiselect-container .ifx-multiselect-dropdown-menu{position:absolute;top:100%;left:0;width:100%;margin-top:2px;background-color:#fff;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1);max-height:300px;overflow-y:auto;z-index:var(--dynamic-z-index, 1)}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input{position:sticky;top:0;left:0;z-index:1;width:100%;padding:8px 16px;font-size:1rem;line-height:1.5rem;font-style:normal;font-weight:400;box-sizing:border-box;background-color:#FFFFFF;border:none;border-bottom:1px solid #8D8786}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input:focus{outline:none;border:1px solid #0A8276}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input::placeholder{color:#999}.ifx-multiselect-container .option{position:relative;padding:8px 16px;gap:8px;align-items:center;display:flex;font-style:normal;font-weight:400}.ifx-multiselect-container .option.small-select{font-size:0.875rem;line-height:1.25rem}.ifx-multiselect-container .option.medium-select{font-size:1rem;line-height:1.5rem}.ifx-multiselect-container .option:hover{background-color:#EEEDED}.ifx-multiselect-container .option:focus:not(.disabled){background-color:#BFBBBB;outline:none}.ifx-multiselect-container .option.is-highlighted{background-color:#EEEDED}.ifx-multiselect-container .option.sub-option{padding-left:30px;}.ifx-multiselect-container .option.disabled:hover{cursor:default}.ifx-multiselect-container .option label{cursor:inherit}.select-all-wrapper{padding-top:8px}';const o=n;function r(t,e){let i;return function s(...n){const o=()=>{clearTimeout(i);t(...n)};clearTimeout(i);i=setTimeout(o,e)}}const l=class{constructor(i){t(this,i);this.ifxSelect=e(this,"ifxSelect",7);this.ifxMultiselectIsOpen=e(this,"ifxMultiselectIsOpen",7);if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}this.batchSize=50;this.size="medium (40px)";this.disabled=false;this.error=false;this.internalError=false;this.errorMessage="Error";this.label="";this.persistentSelectedOptions=[];this.placeholder="";this.dropdownOpen=false;this.zIndex=1;this.currentIndex=0;this.isLoading=false;this.loadedOptions=[];this.filteredOptions=[];this.showSearch=true;this.showSelectAll=true;this.optionCount=0;this.optionsProcessed=false;this.handleSearch=r((t=>{const e=t.value.toLowerCase();if(e===""){this.filteredOptions=this.loadedOptions}else{this.filteredOptions=this.loadedOptions.filter((t=>t.label.toLowerCase().includes(e)))}}),300);this.handleDocumentClick=t=>{const e=t.composedPath();if(!e.includes(this.dropdownElement)){this.dropdownOpen=false;document.removeEventListener("click",this.handleDocumentClick);this.ifxMultiselectIsOpen.emit(this.dropdownOpen)}}}updateOptions(){this.loadedOptions=[];this.filteredOptions=[];this.optionCount=0;this.optionsProcessed=false;this.persistentSelectedOptions=[];this.loadInitialOptions()}async loadInitialOptions(){this.isLoading=true;this.internalError=this.error;this.internalErrorMessage=this.errorMessage;this.loadedOptions=await this.fetchOptions(0,this.batchSize);this.isLoading=false}async fetchMoreOptions(){this.isLoading=true;const t=await this.fetchOptions(this.loadedOptions.length,this.batchSize);this.loadedOptions=[...this.loadedOptions,...t];this.isLoading=false}handleScroll(t){const e=t.target;const i=Math.floor((e.scrollHeight-e.clientHeight)/2);if(e.scrollTop>=i){this.fetchMoreOptions()}}async fetchOptions(t,e){let i=[];if(typeof this.options==="string"){try{i=JSON.parse(this.options)}catch(t){console.error("Failed to parse options:",t)}}else if(Array.isArray(this.options)){i=this.options}else{console.error("Unexpected value for options:",this.options)}if(!this.optionsProcessed){this.optionCount=this.countOptions(i);const t=this.collectSelectedOptions(i);const e=t.filter((t=>!this.persistentSelectedOptions.some((e=>e.value==t.value))));this.persistentSelectedOptions=[...this.persistentSelectedOptions,...e];this.optionsProcessed=true}const s=i.slice(t,t+e);return s}collectSelectedOptions(t){let e=[];for(const i of t){if(i.selected){if(i.children&&i.children.length>0){e=e.concat(this.collectLeafOptions(i.children))}else{e.push(i)}}else{if(i.children&&i.children.length>0){e=e.concat(this.collectSelectedOptions(i.children))}}}return e}collectLeafOptions(t){let e=[];for(const i of t){if(i.children&&i.children.length>0){e=e.concat(this.collectLeafOptions(i.children))}else{e.push(i)}}return e}countOptions(t){let e=0;for(const i of t){if(i.children&&i.children.length>=0){e+=this.countOptions(i.children)}else{e++}}return e}componentDidLoad(){setTimeout((()=>{this.positionDropdown()}),500)}componentWillLoad(){this.loadInitialOptions();this.filteredOptions=[...this.loadedOptions]}updateInternalError(){this.internalError=this.error}updateInternalErrorMessage(){this.internalErrorMessage=this.errorMessage}loadedOptionsChanged(){this.filteredOptions=[...this.loadedOptions]}onSelectionChange(t,e){const i=new FormData;t.forEach((t=>i.append(this.name,t.value)));this.internals.setFormValue(i)}handleOptionClick(t){this.internalError=false;if(!t.selected&&this.isSelectionLimitReached(t)){t.checkboxRef.toggleCheckedState(false);this.internalError=true;this.internalErrorMessage="Please consider the maximum number of items to choose from";return}this.updateSelection(t);this.ifxSelect.emit(this.persistentSelectedOptions)}isSelectionLimitReached(t){let e=t.children?t.children.length:1;return this.maxItemCount&&this.persistentSelectedOptions.length+e>this.maxItemCount&&!this.persistentSelectedOptions.some((e=>e.value===t.value))}updateSelection(t){const e=this.persistentSelectedOptions.some((e=>e.value===t.value));if(t.children&&t.children.length>0){this.handleParentOptionClick(t)}else{this.handleChildOptionClick(t,e)}}async selectAll(){const t=await this.fetchOptions(0,this.optionCount);this.selectAllRecursive(t);this.ifxSelect.emit(this.persistentSelectedOptions)}selectAllRecursive(t){for(const e of t){if(e.children&&e.children.length>0){this.selectAllRecursive(e.children)}else{if(!this.persistentSelectedOptions.some((t=>t.value===e.value))){e.selected=true;this.persistentSelectedOptions=[...this.persistentSelectedOptions,e]}}}}handleParentOptionClick(t){const e=t.children.every((t=>this.persistentSelectedOptions.some((e=>e.value===t.value))));if(e){this.persistentSelectedOptions=[...this.persistentSelectedOptions.filter((e=>!t.children.some((t=>t.value===e.value))))];t.selected=false;t.children.forEach((t=>{t.selected=false}))}else{const e=[...t.children.filter((t=>!this.persistentSelectedOptions.some((e=>e.value===t.value))))];t.selected=true;t.children.forEach((t=>{t.selected=true}));this.persistentSelectedOptions=[...this.persistentSelectedOptions,...e]}}handleChildOptionClick(t,e){if(e){this.persistentSelectedOptions=[...this.persistentSelectedOptions.filter((e=>e.value!==t.value))];t.selected=false}else{this.persistentSelectedOptions=[...this.persistentSelectedOptions,t];t.selected=true}this.updateParentSelectedState()}updateParentSelectedState(){this.loadedOptions.forEach((t=>{var e;if(((e=t.children)===null\|\|e===void 0?void 0:e.length)>0){if(t.children.every((t=>t.selected===true)))t.selected=true;else{t.selected=false;if(this.isOptionIndeterminate(t)){t.indeterminate=true}else{t.indeterminate=false}}}}))}getSizeClass(){return`${this.size}`==="s"?"small-select":"medium-select"}toggleDropdown(){this.dropdownOpen=!this.dropdownOpen;setTimeout((()=>{if(this.dropdownOpen){document.addEventListener("click",this.handleDocumentClick)}this.ifxMultiselectIsOpen.emit(this.dropdownOpen)}),0);this.zIndex=l.globalZIndex++}waitForElement(t,e,i=50){let s=0;function n(){requestAnimationFrame((()=>{const o=t();if(o.length>0\|\|s>i){e(o)}else{s++;n()}}))}n()}handleKeyDown(t){if(this.disabled)return;const e=this.dropdownElement.querySelectorAll(".option");switch(t.code){case"Enter":this.toggleDropdown();this.waitForElement((()=>this.dropdownElement.querySelectorAll(".option")),(t=>{this.updateHighlightedOption(t)}));break;case"Space":this.toggleDropdown();this.waitForElement((()=>this.dropdownElement.querySelectorAll(".option")),(t=>{this.updateHighlightedOption(t)}));break;case"ArrowDown":this.handleArrowDown(e);if(this.dropdownOpen){this.updateHighlightedOption(e)}break;case"ArrowUp":this.handleArrowUp(e);if(this.dropdownOpen){this.updateHighlightedOption(e)}break}}handleWrapperClick(t){this.positionDropdown();if(t.currentTarget===t.target){this.toggleDropdown()}}clearSelection(){this.persistentSelectedOptions=[];this.ifxSelect.emit(this.persistentSelectedOptions)}positionDropdown(){var t;const e=(t=this.el.shadowRoot.querySelector(".ifx-multiselect-wrapper"))===null\|\|t===void 0?void 0:t.getBoundingClientRect();const i=window.innerHeight-e.bottom;const s=e.top;if(s>i&&e.height>i\|\|e.bottom>window.innerHeight){this.dropdownFlipped=true}else{this.dropdownFlipped=false}}updateHighlightedOption(t){t.forEach((t=>t.classList.remove("is-highlighted")));if(this.currentIndex>=0&&this.currentIndex<t.length){t[this.currentIndex].classList.add("is-highlighted");t[this.currentIndex].focus()}}handleArrowDown(t){if(this.currentIndex<t.length-1){this.currentIndex++}else{this.currentIndex=0}}handleArrowUp(t){if(this.currentIndex>0){this.currentIndex--}else{this.currentIndex=t.length-1}}handleOptionKeyDown(t,e){if(t.key!=="ArrowUp"&&t.key!=="ArrowDown")t.stopPropagation();if(t.key==="Enter"\|\|t.key===" "){this.handleOptionClick(e)}}renderOption(t,e){var s;const n=this.isOptionIndeterminate(t);const o=t.children?n\|\|this.isOptionSelected(t):this.persistentSelectedOptions.some((e=>e.value===t.value));const r=!o&&this.maxItemCount&&this.persistentSelectedOptions.length>=this.maxItemCount;const l=`checkbox-${t.value}-${e}`;return i("div",{class:"option-wrapper"},i("div",{class:`option ${o?"selected":""} ${r?"disabled":""} \n ${this.getSizeClass()}`,"data-value":t.value,onKeyDown:e=>!r&&this.handleOptionKeyDown(e,t),onClick:()=>!r&&this.handleOptionClick(t),tabindex:"0",role:`${((s=t.children)===null\|\|s===void 0?void 0:s.length)>0?"treeitem":"option"}`},i("ifx-checkbox",{tabIndex:-1,ref:e=>t.checkboxRef=e,id:l,size:"s",checked:n?false:o,indeterminate:n,disabled:r}),i("label",{htmlFor:l,onClick:t=>t.stopPropagation()},t.label)),t.children&&t.children.map(((t,i)=>this.renderSubOption(t,`${e}-${i}`))))}isOptionSelected(t){if(!t.children)return false;return t.children.every((t=>this.persistentSelectedOptions.some((e=>e.value===t.value))))}isOptionIndeterminate(t){if(!t.children)return false;const e=t.children.filter((t=>this.persistentSelectedOptions.some((e=>e.value===t.value)))).length;return e>0&&e<t.children.length}findInOptions(t,e){for(const i of t){if(i.value===e){return i}if(i.children){const t=this.findInOptions(i.children,e);if(t){return t}}}return null}renderSubOption(t,e){var s;const n=this.persistentSelectedOptions.some((e=>e.value===t.value));const o=!n&&this.maxItemCount&&this.persistentSelectedOptions.length>=this.maxItemCount;const r=`checkbox-${t.value}-${e}`;return i("div",{class:`option sub-option ${n?"selected":""} ${this.getSizeClass()} ${o?"disabled":""}`,"data-value":t.value,role:`${((s=t.children)===null\|\|s===void 0?void 0:s.length)>0?"option":"treeitem"}`,onKeyDown:e=>!o&&this.handleOptionKeyDown(e,t),onClick:()=>!o&&this.handleOptionClick(t),tabindex:"0"},i("ifx-checkbox",{tabIndex:-1,ref:e=>t.checkboxRef=e,id:r,size:"s",checked:n,disabled:o}),i("label",{htmlFor:r,onClick:t=>t.stopPropagation()},t.label))}renderSelectAll(){const t=this.persistentSelectedOptions.length===this.optionCount;const e=this.persistentSelectedOptions.length===0;const s=this.optionCount>0&&!e&&!t;const n=this;function o(){if(t){n.clearSelection()}else{n.selectAll()}}function r(t){if(t.key!=="ArrowUp"&&t.key!=="ArrowDown")t.stopPropagation();if(t.key==="Enter"\|\|t.key===" "){o()}}return i("div",{class:"select-all-wrapper"},i("div",{class:`option ${this.getSizeClass()}`,tabindex:"0",onKeyDown:t=>r(t),onClick:o},i("ifx-checkbox",{tabIndex:-1,id:"selectAll",checked:t,indeterminate:s,size:"s"}),i("label",{htmlFor:"selectAll"},"Select all")),i("ifx-dropdown-separator",null))}render(){const t=this.persistentSelectedOptions.filter((t=>{const e=this.persistentSelectedOptions.some((e=>e.children&&e.children.some((e=>e.value===t.value))&&e.selected));return!e})).map((t=>t.label)).join(", ");return i("div",{class:`ifx-multiselect-container`,ref:t=>this.dropdownElement=t},this.label?i("div",{class:"ifx-label-wrapper"},i("span",null,this.label)):null,i("div",{class:`ifx-multiselect-wrapper \n ${this.getSizeClass()} \n ${this.dropdownOpen?"active":""} \n ${this.dropdownFlipped?"is-flipped":""}\n ${this.internalError?"error":""}\n ${this.disabled?"disabled":""}`,tabindex:"0",onClick:this.disabled?undefined:t=>this.handleWrapperClick(t),onKeyDown:this.disabled?undefined:t=>this.handleKeyDown(t)},i("div",{class:`ifx-multiselect-input \n ${this.persistentSelectedOptions.length===0?"placeholder":""}\n `,onClick:this.disabled?undefined:()=>this.toggleDropdown()},this.persistentSelectedOptions.length>0?t:this.placeholder),this.dropdownOpen&&i("div",{class:"ifx-multiselect-dropdown-menu",onScroll:t=>this.handleScroll(t),style:{"--dynamic-z-index":this.zIndex.toString()}},this.showSearch&&i("input",{type:"text",role:"textbox",class:"search-input",onKeyDown:t=>{t.stopPropagation()},onInput:t=>this.handleSearch(t.target),placeholder:"Search..."}),this.showSelectAll&&this.renderSelectAll(),this.filteredOptions.map(((t,e)=>this.renderOption(t,e))),this.isLoading&&i("div",null,"Loading more options...")),i("div",{class:"ifx-multiselect-icon-container"},this.persistentSelectedOptions.length>0&&i("div",{class:"ifx-clear-button",onClick:this.disabled?undefined:()=>this.clearSelection()},i("ifx-icon",{icon:"cremove16"})),i("div",{class:"icon-wrapper-up",onClick:this.disabled?undefined:()=>this.toggleDropdown()},i("ifx-icon",{key:"icon-up",icon:"chevronup-16"})),i("div",{class:"icon-wrapper-down",onClick:this.disabled?undefined:()=>this.toggleDropdown()},i("ifx-icon",{key:"icon-down",icon:"chevron-down-16"})))),this.internalError?i("div",{class:"ifx-error-message-wrapper"},i("span",null,this.internalErrorMessage)):null)}static get formAssociated(){return true}get el(){return s(this)}static get watchers(){return{options:["updateOptions"],error:["updateInternalError"],errorMessage:["updateInternalErrorMessage"],loadedOptions:["loadedOptionsChanged"],persistentSelectedOptions:["onSelectionChange"]}}};l.globalZIndex=1;l.style=o;const a=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex}.textInput__container{display:flex;flex-direction:column;align-items:flex-start;padding:0px;width:100%;flex:none;order:0;align-self:stretch;flex-grow:0;font-family:var(--ifx-font-family)}.textInput__container.disabled .textInput__top-wrapper label{color:#575352}.textInput__container.disabled .textInput__bottom-wrapper input{border:1px solid #575352;background-color:#EEEDED}.textInput__container.disabled .textInput__bottom-wrapper input::placeholder{font-size:0.875rem;color:#575352}.textInput__container .textInput__top-wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:0px;gap:4px;flex:none;order:0;align-self:stretch;flex-grow:0}.textInput__container .textInput__top-wrapper label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;display:flex;align-items:center;color:#1D1D1D;flex:none;order:0;flex-grow:0}.textInput__container .textInput__top-wrapper label .optional-required{margin-left:4px}.textInput__container .textInput__top-wrapper label .optional{margin-left:4px}.textInput__container .textInput__top-wrapper label .required{margin-left:4px}.textInput__container .textInput__top-wrapper label .required.error{color:#CD002F}.textInput__container .input-container{position:relative;display:flex;align-items:center;width:100%}.textInput__container .textInput__bottom-wrapper{flex-grow:1;position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:0px;gap:4px;flex:none;order:1;align-self:stretch;flex-grow:0}.textInput__container .textInput__bottom-wrapper input{width:100%;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;padding:8px 16px;gap:8px;height:40px;background-color:#FFFFFF;color:#1D1D1D;font-family:"Source Sans 3";font-size:1rem;line-height:1.5rem;border:1px solid #8D8786;border-radius:1px;flex:none;order:0;align-self:stretch;flex-grow:0;text-overflow:ellipsis}.textInput__container .textInput__bottom-wrapper input.input-s{height:36px;font-size:0.875rem;line-height:1.25rem}.textInput__container .textInput__bottom-wrapper input.input-s::placeholder{font-size:0.875rem;line-height:1.25rem}.textInput__container .textInput__bottom-wrapper input.icon{padding-left:40px}.textInput__container .textInput__bottom-wrapper input.error{border:1px solid #CD002F}.textInput__container .textInput__bottom-wrapper input.error:focus{outline:none}.textInput__container .textInput__bottom-wrapper input.success{border:1px solid #4CA460}.textInput__container .textInput__bottom-wrapper input.success:focus{outline:none}.textInput__container .textInput__bottom-wrapper input:focus:not(.error,.success){outline:none;border:1px solid #0A8276}.textInput__container .textInput__bottom-wrapper input:hover:not(:disabled,:focus,.error,.success){border:1px solid #575352}.textInput__container .textInput__bottom-wrapper input::placeholder{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;color:#8D8786;flex:none;order:1;flex-grow:1}.textInput__container .textInput__bottom-wrapper .input-icon{position:absolute;top:50%;transform:translateY(-50%);left:16px;transition:0.3s;color:#8D8786}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;letter-spacing:0.2px;color:#1D1D1D;flex:none;order:1;align-self:stretch;flex-grow:0}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.error{color:#CD002F}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.disabled{color:#575352}.textInput__container .delete-icon{position:absolute;right:16px}.textInput__container .delete-icon :hover{cursor:pointer}';const c=a;const p=class{constructor(i){t(this,i);this.ifxInput=e(this,"ifxInput",7);if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}this.placeholder="Placeholder";this.value="";this.error=false;this.label="";this.icon="";this.caption="";this.size="m";this.required=false;this.optional=false;this.success=false;this.disabled=false;this.showDeleteIcon=false}valueWatcher(t){if(t!==this.inputElement.value){this.inputElement.value=t}}async reset(){this.value="";this.inputElement.value=""}handleDeleteContent(){this.reset();this.ifxInput.emit(this.value)}handleInput(){const t=this.inputElement.value;this.value=t;this.internals.setFormValue(t);this.ifxInput.emit(this.value)}formResetCallback(){this.internals.setValidity({});this.internals.setFormValue("")}render(){return i("div",{key:"8d742d3a60998d4648040fab5d5d50853b12c7b4","aria-label":"a text field for user input","aria-value":this.value,"aria-disabled":this.disabled,class:`textInput__container ${this.disabled?"disabled":""}`},i("div",{key:"4965d888690874e8775bfc83602340b6b83d3e5e",class:"textInput__top-wrapper"},i("label",{key:"d5224921d5c26fc62d551bf10dd1207d8ff5e67f",htmlFor:"text-field"},i("slot",{key:"eb5758011376ace0664b074fd4e755b1920fa7f4"}),this.optional&&this.required?i("span",{class:"optional-required"},"(optional) "):this.optional?i("span",{class:"optional"},"(optional)"):this.required?i("span",{class:`required ${this.error?"error":""}`},""):null)),i("div",{key:"ec295037f306f2cd6ee6c3ba3310dc858c4a74f6",class:"textInput__bottom-wrapper"},i("div",{key:"bfb3f3e2c47c6f57f29f3fb16cc5e5b50a5e11f4",class:"input-container"},this.icon&&i("ifx-icon",{key:"e94e39b0426900264b834b79e9b7667563311b3c",class:"input-icon",icon:this.icon}),i("input",{key:"08ba76dbe8ac6ab62ffbcb4d0aa44437f8c6b057",ref:t=>this.inputElement=t,disabled:this.disabled,type:"text",id:"text-field",value:this.value,onInput:()=>this.handleInput(),placeholder:this.placeholder,maxlength:this.maxlength,class:`${this.icon?"icon":""}\n ${this.error?"error":""} \n ${this.size==="s"?"input-s":""}\n ${this.success?"success":""}`}),this.showDeleteIcon&&this.value&&i("ifx-icon",{key:"f0df7c42fe70e05928e2db93017db15d1f8c659c",class:"delete-icon",icon:"cremove16",onClick:()=>this.handleDeleteContent()})),this.caption&&!this.error&&i("div",{key:"ac6811a80b1728eb7ecea350a2821990d3e49b40",class:`textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""`},this.caption),this.error&&i("div",{key:"deba470325e740fc058a67bfcf056af34ab4d8ef",class:"textInput__bottom-wrapper-caption error"},this.caption)))}static get formAssociated(){return true}get el(){return s(this)}static get watchers(){return{value:["valueWatcher"]}}};p.style=c;export{l as ifx_multiselect,p as ifx_text_field};
2	+ //# sourceMappingURL=p-ed9670dd.entry.js.map

package/dist/infineon-design-system-stencil/p-ed9670dd.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["multiselectCss","IfxMultiselectStyle0","debounce","func","wait","timeout","executedFunction","args","later","clearTimeout","setTimeout","Multiselect","constructor","hostRef","this","batchSize","size","disabled","error","internalError","errorMessage","label","persistentSelectedOptions","placeholder","dropdownOpen","zIndex","currentIndex","isLoading","loadedOptions","filteredOptions","showSearch","showSelectAll","optionCount","optionsProcessed","handleSearch","targetElement","searchTerm","value","toLowerCase","filter","option","includes","handleDocumentClick","event","path","composedPath","dropdownElement","document","removeEventListener","ifxMultiselectIsOpen","emit","updateOptions","loadInitialOptions","internalErrorMessage","fetchOptions","fetchMoreOptions","moreOptions","length","handleScroll","element","target","halfwayPoint","Math","floor","scrollHeight","clientHeight","scrollTop","startIndex","count","allOptions","options","JSON","parse","err","console","Array","isArray","countOptions","initiallySelected","collectSelectedOptions","initallySelectedNotInState","init","some","opt","slicedOptions","slice","selectedOptions","selected","children","concat","collectLeafOptions","push","leafOptions","child","componentDidLoad","positionDropdown","componentWillLoad","updateInternalError","updateInternalErrorMessage","loadedOptionsChanged","onSelectionChange","newValue","_","formData","FormData","forEach","append","name","internals","setFormValue","handleOptionClick","isSelectionLimitReached","checkboxRef","toggleCheckedState","updateSelection","ifxSelect","newOptionsLength","maxItemCount","selectedOption","wasSelected","handleParentOptionClick","handleChildOptionClick","selectAll","selectAllRecursive","allChildrenSelected","every","newChildren","childOption","updateParentSelectedState","_a","isOptionIndeterminate","indeterminate","getSizeClass","toggleDropdown","addEventListener","globalZIndex","waitForElement","querySelectorFunc","callback","maxTries","tries","request","requestAnimationFrame","elements","handleKeyDown","querySelectorAll","code","updateHighlightedOption","handleArrowDown","handleArrowUp","handleWrapperClick","currentTarget","clearSelection","wrapperRect","el","shadowRoot","querySelector","getBoundingClientRect","spaceBelow","window","innerHeight","bottom","spaceAbove","top","height","dropdownFlipped","classList","remove","add","focus","handleOptionKeyDown","e","key","stopPropagation","renderOption","index","isIndeterminate","isSelected","isOptionSelected","disableCheckbox","uniqueId","h","class","onKeyDown","onClick","tabindex","role","tabIndex","ref","id","checked","htmlFor","map","childIndex","renderSubOption","persistentOption","selectedChildren","findInOptions","foundInChildren","renderSelectAll","allSelected","noneSelected","that","toggleSelectAll","handleSelectAllKeydown","render","selectedOptionsLabels","isChildSelectedWithParent","parentOption","join","undefined","onScroll","style","toString","type","onInput","icon","textFieldCss","IfxTextFieldStyle0","TextField","caption","required","optional","success","showDeleteIcon","valueWatcher","inputElement","reset","handleDeleteContent","ifxInput","handleInput","query","formResetCallback","setValidity","maxlength"],"sources":["src/components/select/multi-select/multiselect.scss?tag=ifx-multiselect&encapsulation=shadow","src/components/select/multi-select/multiselect.tsx","src/components/text-field/text-field.scss?tag=ifx-text-field&encapsulation=shadow","src/components/text-field/text-field.tsx"],"sourcesContent":["// @import '~choices.js/public/assets/styles/choices.css';\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.ifx-multiselect-container {\n position: relative;\n box-sizing: border-box;\n font-family: var(--ifx-font-family);\n\n &.small-select {\n height: 36px;\n }\n\n &.medium-select {\n height: 40px;\n }\n\n &:hover {\n cursor: pointer;\n }\n\n\n .ifx-label-wrapper {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n }\n\n .ifx-error-message-wrapper {\n color: #CD002F;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n }\n\n .ifx-multiselect-wrapper {\n background-color: tokens.$ifxColorBaseWhite;\n box-sizing: border-box;\n position: relative;\n display: flex;\n align-items: center;\n border: 1px solid tokens.$ifxColorEngineering400;\n border-radius: tokens.$ifxBorderRadius12;\n width: 100%;\n font-weight: 400;\n font-style: normal;\n\n\n &.small-select {\n height: 36px;\n padding: 8px 12px;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n &.medium-select {\n height: 40px;\n padding: 8px 16px;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &:focus-visible {\n outline: none;\n }\n\n &:focus-visible:not(.active):not(:active) {\n outline: none;\n\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 2px;\n\n }\n }\n\n &.disabled {\n background: tokens.$ifxColorEngineering200;\n color: #575352;\n border-color: #575352;\n cursor: default;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n &.error {\n border-color: #CD002F;\n }\n\n &:hover:not(.focus, :focus) {\n border-color: tokens.$ifxColorEngineering500;\n }\n\n &.active {\n border-color: tokens.$ifxColorOcean500 !important; // Active border color\n\n & .icon-wrapper-up {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: tokens.$ifxSpace100;\n }\n\n & .icon-wrapper-down {\n display: none\n }\n }\n\n\n & .icon-wrapper-up {\n display: none;\n }\n\n & .icon-wrapper-down {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: tokens.$ifxSpace100;\n }\n\n &.is-flipped {\n .ifx-multiselect-dropdown-menu {\n top: auto;\n bottom: 100%;\n }\n }\n }\n\n .ifx-multiselect-input {\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &.placeholder {\n opacity: 0.5;\n }\n\n }\n\n\n .ifx-multiselect-icon-container {\n margin-left: auto;\n align-items: center;\n display: flex;\n }\n\n\n .ifx-clear-button {\n display: flex;\n }\n\n .ifx-multiselect-dropdown-menu {\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n margin-top: 2px;\n background-color: #fff;\n box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.10);\n max-height: 300px;\n /* Adjust based on your design */\n overflow-y: auto;\n z-index: var(--dynamic-z-index, 1); // Fallback to 1\n\n .search-input {\n position: sticky;\n top: 0;\n left: 0;\n z-index: 1;\n width: 100%;\n padding: 8px 16px;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n font-style: normal;\n font-weight: 400;\n box-sizing: border-box;\n background-color: tokens.$ifxColorBaseWhite;\n border: none;\n border-bottom: 1px solid tokens.$ifxColorEngineering400;\n\n &:focus {\n outline: none;\n border: 1px solid tokens.$ifxColorOcean500;\n }\n\n // Optional: Placeholder style\n &::placeholder {\n color: #999;\n }\n }\n }\n\n .option {\n position: relative;\n padding: 8px 16px;\n gap: 8px;\n align-items: center;\n display: flex;\n font-style: normal;\n font-weight: 400;\n\n &.small-select {\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n &.medium-select {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:focus:not(.disabled) {\n background-color: tokens.$ifxColorEngineering300;\n outline: none;\n }\n\n &.is-highlighted {\n background-color: tokens.$ifxColorEngineering200;\n ;\n }\n\n &.selected {\n // color: #0A8276;\n }\n\n &.sub-option {\n padding-left: 30px;\n /* or however much indentation you want */\n }\n\n &.disabled {\n &:hover {\n cursor: default;\n }\n }\n\n label {\n cursor: inherit;\n }\n }\n\n\n\n}\n\n.select-all-wrapper {\n padding-top: 8px;\n}","import { Component, Prop, State, Event, EventEmitter, Element, h, Watch, AttachInternals } from '@stencil/core';\nimport { Option } from './interfaces';\n\n// Debounce function\nfunction debounce(func, wait) {\n let timeout;\n return function executedFunction(...args) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n};\n\n@Component({\n tag: 'ifx-multiselect',\n styleUrl: 'multiselect.scss',\n shadow: true,\n formAssociated: true\n})\n\n\n\nexport class Multiselect {\n\n @Prop() name: string;\n @Prop() options: any[] | string;\n @Prop() batchSize: number = 50;\n @Prop() size: string = 'medium (40px)';\n @Prop() disabled: boolean = false;\n @Prop() error: boolean = false;\n @State() internalError: boolean = false;\n @Prop() errorMessage: string = \"Error\";\n @State() internalErrorMessage: string;\n @Prop() label: string = \"\";\n @State() persistentSelectedOptions: Option[] = [];\n @Prop() placeholder: string = \"\";\n @State() dropdownOpen = false;\n @State() dropdownFlipped: boolean;\n @Prop() maxItemCount: number;\n @State() zIndex: number = 1; // default z-index value\n static globalZIndex = 1; // This will be shared among all instances of the component.\n private currentIndex: number = 0; //needed for option selection using keyboard\n @State() isLoading: boolean = false;\n @State() loadedOptions: Option[] = [];\n @State() filteredOptions: Option[] = [];\n @Prop() showSearch: boolean = true;\n @Prop() showSelectAll: boolean = true;\n @State() optionCount: number = 0; // number of all options (leaves of the tree)\n @State() optionsProcessed: boolean = false; // flag whether options have already been counted, intial selections saved\n\n\n @Event() ifxSelect: EventEmitter;\n @Event() ifxMultiselectIsOpen: EventEmitter;\n\n @Element() el: HTMLElement;\n dropdownElement!: HTMLElement;\n\n @AttachInternals() internals: ElementInternals;\n\n\n @Watch('options')\n updateOptions() { \n this.loadedOptions = [];\n this.filteredOptions = [];\n this.optionCount = 0;\n this.optionsProcessed = false;\n this.persistentSelectedOptions = [];\n\n this.loadInitialOptions();\n }\n\n\n async loadInitialOptions() {\n this.isLoading = true;\n this.internalError = this.error;\n this.internalErrorMessage = this.errorMessage;\n // Load the first batch of options (e.g., first 20)\n this.loadedOptions = await this.fetchOptions(0, this.batchSize);\n this.isLoading = false;\n }\n\n async fetchMoreOptions() {\n this.isLoading = true;\n const moreOptions = await this.fetchOptions(this.loadedOptions.length, this.batchSize);\n this.loadedOptions = [...this.loadedOptions, ...moreOptions];\n this.isLoading = false;\n }\n\n\n handleScroll(event: UIEvent) {\n const element = event.target as HTMLElement;\n const halfwayPoint = Math.floor((element.scrollHeight - element.clientHeight) / 2); //loading more options when the user has scrolled halfway through the current list\n\n if (element.scrollTop >= halfwayPoint) {\n this.fetchMoreOptions();\n }\n }\n\n\n\n\n async fetchOptions(startIndex: number, count: number): Promise<Option[]> {\n let allOptions: Option[] = [];\n\n // Parse options if it's a string, or use directly if it's an array\n if (typeof this.options === 'string') {\n try {\n allOptions = JSON.parse(this.options);\n \n } catch (err) {\n console.error('Failed to parse options:', err);\n }\n } else if (Array.isArray(this.options)) {\n allOptions = this.options;\n } else {\n console.error('Unexpected value for options:', this.options);\n }\n\n if (!this.optionsProcessed) {\n this.optionCount = this.countOptions(allOptions);\n const initiallySelected = this.collectSelectedOptions(allOptions);\n const initallySelectedNotInState = initiallySelected.filter(init => !this.persistentSelectedOptions.some(opt => opt.value == init.value));\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initallySelectedNotInState];\n this.optionsProcessed = true;\n }\n \n // Slice the options array based on startIndex and count\n const slicedOptions = allOptions.slice(startIndex, startIndex + count);\n return slicedOptions;\n }\n\n /**\n * Collects and returns all options that are selected.\n * When the parent is selected, then the value of the children will be overriden with selected as well.\n * It will only collect the leaves of the tree.\n * \n * @param options A list of options.\n * @returns A list with all selected options\n */\n private collectSelectedOptions(options: Option[]): Option[] {\n let selectedOptions: Option[] = [];\n \n for (const option of options) {\n if (option.selected) {\n if (option.children && option.children.length > 0) {\n // if parent is selected, then select all child options\n selectedOptions = selectedOptions.concat(this.collectLeafOptions(option.children));\n } else {\n selectedOptions.push(option);\n }\n } else {\n if (option.children && option.children.length > 0) {\n selectedOptions = selectedOptions.concat(this.collectSelectedOptions(option.children));\n }\n }\n }\n return selectedOptions;\n }\n\n /**\n * Collects all leaf children options.\n * \n * @param option A list with all leaf-children.\n */\n private collectLeafOptions(children: Option[]): Option[] {\n let leafOptions = [];\n \n for (const child of children) {\n if (child.children && child.children.length > 0) {\n leafOptions = leafOptions.concat(this.collectLeafOptions(child.children));\n } else {\n leafOptions.push(child);\n }\n } \n return leafOptions;\n }\n\n /**\n * Count the number of options. Only counts the leaves of the options tree.\n */\n countOptions(options: Option[]): number {\n let count = 0;\n for (const option of options) {\n if (option.children && option.children.length >= 0) {\n count += this.countOptions(option.children);\n } else {\n count++;\n }\n }\n return count;\n }\n\n\n handleSearch = debounce((targetElement: HTMLInputElement) => {\n const searchTerm = targetElement.value.toLowerCase();\n if (searchTerm === '') {\n this.filteredOptions = this.loadedOptions;\n } else {\n this.filteredOptions = this.loadedOptions.filter(option => option.label.toLowerCase().includes(searchTerm))\n }\n }, 300);\n\n componentDidLoad() {\n setTimeout(() => {\n this.positionDropdown();\n }, 500);\n\n // setInterval(this.handleScroll, 5000); // Runs every 5 seconds (5000 milliseconds)\n }\n\n componentWillLoad() {\n this.loadInitialOptions();\n this.filteredOptions = [...this.loadedOptions];\n }\n\n @Watch('error')\n updateInternalError() {\n this.internalError = this.error;\n }\n\n @Watch('errorMessage')\n updateInternalErrorMessage() {\n this.internalErrorMessage = this.errorMessage;\n }\n\n @Watch('loadedOptions')\n loadedOptionsChanged() {\n this.filteredOptions = [...this.loadedOptions];\n }\n\n @Watch('persistentSelectedOptions')\n onSelectionChange(newValue: Option[], _: Option[]) {\n const formData = new FormData();\n newValue.forEach(option => formData.append(this.name, option.value));\n this.internals.setFormValue(formData);\n }\n\n handleOptionClick(option: Option) {\n this.internalError = false;\n\n if (!option.selected && this.isSelectionLimitReached(option)) {\n option.checkboxRef.toggleCheckedState(false)\n this.internalError = true;\n this.internalErrorMessage = \"Please consider the maximum number of items to choose from\";\n return;\n }\n \n this.updateSelection(option);\n this.ifxSelect.emit(this.persistentSelectedOptions);\n }\n\n\n isSelectionLimitReached(option: Option): boolean {\n let newOptionsLength = option.children ? option.children.length : 1;\n return this.maxItemCount && this.persistentSelectedOptions.length + newOptionsLength > this.maxItemCount &&\n !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value)\n }\n\n updateSelection(option: Option) {\n const wasSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n\n if (option.children && option.children.length > 0) {\n this.handleParentOptionClick(option);\n } else {\n this.handleChildOptionClick(option, wasSelected);\n }\n }\n\n async selectAll() {\n const allOptions = await this.fetchOptions(0, this.optionCount);\n this.selectAllRecursive(allOptions);\n \n this.ifxSelect.emit(this.persistentSelectedOptions);\n }\n\n private selectAllRecursive(options: Option[]) {\n for (const opt of options) {\n if (opt.children && opt.children.length > 0) {\n this.selectAllRecursive(opt.children);\n } else {\n if (!this.persistentSelectedOptions.some((some) => some.value === opt.value )) {\n opt.selected = true;\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, opt];\n }\n }\n }\n\n }\n\n handleParentOptionClick(option: Option) {\n const allChildrenSelected = option.children.every(child =>\n this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value)\n );\n\n if (allChildrenSelected) {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(\n selectedOption => !option.children.some(child => child.value === selectedOption.value)\n )];\n\n option.selected = false;\n option.children.forEach(child => {\n child.selected = false;\n })\n\n } else {\n const newChildren = [...option.children.filter(childOption =>\n !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === childOption.value)\n )];\n option.selected = true;\n option.children.forEach(child => {\n child.selected = true;\n })\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...newChildren];\n }\n }\n\n handleChildOptionClick(option: Option, wasSelected: boolean) {\n if (wasSelected) {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value)];\n option.selected = false;\n } else {\n this.persistentSelectedOptions = [...this.persistentSelectedOptions, option];\n option.selected = true;\n }\n this.updateParentSelectedState();\n }\n\n updateParentSelectedState() {\n this.loadedOptions.forEach(option => {\n if(option.children?.length > 0) {\n if(option.children.every(child => child.selected === true)) option.selected = true;\n else {\n option.selected = false;\n if(this.isOptionIndeterminate(option)) {\n option.indeterminate = true;\n }else{\n option.indeterminate = false;\n }\n }\n }\n });\n }\n\n\n\n handleDocumentClick = (event: Event) => {\n const path = event.composedPath();\n if (!path.includes(this.dropdownElement)) {\n this.dropdownOpen = false;\n document.removeEventListener('click', this.handleDocumentClick);\n\n // Dispatch the ifxMultiselectIsOpen event\n this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n }\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"small-select\"\n : \"medium-select\";\n }\n\n toggleDropdown() {\n this.dropdownOpen = !this.dropdownOpen;\n setTimeout(() => {\n if (this.dropdownOpen) {\n document.addEventListener('click', this.handleDocumentClick);\n }\n // Dispatch the ifxMultiselectIsOpen event\n this.ifxMultiselectIsOpen.emit(this.dropdownOpen);\n }, 0);\n this.zIndex = Multiselect.globalZIndex++;\n }\n\n\n waitForElement(querySelectorFunc: Function, callback: Function, maxTries = 50) {\n let tries = 0;\n function request() {\n requestAnimationFrame(() => {\n const elements = querySelectorFunc();\n if (elements.length > 0 || tries > maxTries) {\n callback(elements);\n } else {\n tries++;\n request();\n }\n });\n }\n request();\n }\n\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return; // If it's disabled, don't do anything.\n\n const options = this.dropdownElement.querySelectorAll('.option');\n \n switch (event.code) {\n case 'Enter':\n this.toggleDropdown();\n // Wait a bit for the dropdown to finish rendering\n this.waitForElement(() => {\n return this.dropdownElement.querySelectorAll('.option');\n }, (options) => {\n this.updateHighlightedOption(options);\n });\n break;\n case 'Space': \n this.toggleDropdown();\n // Wait a bit for the dropdown to finish rendering\n this.waitForElement(() => {\n return this.dropdownElement.querySelectorAll('.option');\n }, (options) => {\n this.updateHighlightedOption(options);\n });\n break;\n case 'ArrowDown':\n this.handleArrowDown(options);\n if (this.dropdownOpen) {\n this.updateHighlightedOption(options);\n }\n break;\n case 'ArrowUp':\n this.handleArrowUp(options);\n if (this.dropdownOpen) {\n this.updateHighlightedOption(options);\n }\n break;\n }\n }\n\n handleWrapperClick(event: MouseEvent) {\n // This is your existing logic for positioning the dropdown\n this.positionDropdown();\n\n // Check if the event target is the wrapper itself and not a child element.\n if (event.currentTarget === event.target) {\n this.toggleDropdown();\n }\n }\n\n clearSelection() {\n this.persistentSelectedOptions = [];\n this.ifxSelect.emit(this.persistentSelectedOptions); // if you want to emit empty selection after clearing\n }\n\n positionDropdown() {\n const wrapperRect = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')?.getBoundingClientRect();\n const spaceBelow = window.innerHeight - wrapperRect.bottom;\n const spaceAbove = wrapperRect.top;\n\n // If there's more space above than below the trigger and the dropdown doesn't fit below\n if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) || (wrapperRect.bottom > window.innerHeight)) {\n this.dropdownFlipped = true;\n } else {\n this.dropdownFlipped = false;\n }\n }\n\n\n\n // Helper function to update highlighted option based on currentIndex\n private updateHighlightedOption(options: NodeList) {\n // Clear all highlights\n options.forEach((option: Element) => option.classList.remove('is-highlighted'));\n\n // Apply highlight to the current option\n if (this.currentIndex >= 0 && this.currentIndex < options.length) {\n (options[this.currentIndex] as Element).classList.add('is-highlighted');\n (options[this.currentIndex] as HTMLElement).focus();\n }\n }\n\n // Helper function to handle arrow down navigation\n private handleArrowDown(options: NodeList) {\n if (this.currentIndex < options.length - 1) {\n this.currentIndex++;\n } else {\n this.currentIndex = 0; // Wrap to the beginning.\n }\n }\n\n // Helper function to handle arrow up navigation\n private handleArrowUp(options: NodeList) {\n if (this.currentIndex > 0) {\n this.currentIndex--;\n } else {\n this.currentIndex = options.length - 1; // Wrap to the end.\n }\n }\n \n handleOptionKeyDown(e: KeyboardEvent, option: Option) {\n if(e.key !== 'ArrowUp' && e.key !== 'ArrowDown') e.stopPropagation();\n if(e.key === 'Enter' || e.key === ' ') {\n this.handleOptionClick(option);\n }\n }\n\n renderOption(option: Option, index: number) {\n const isIndeterminate = this.isOptionIndeterminate(option);\n const isSelected = option.children ? isIndeterminate || this.isOptionSelected(option) : this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n const uniqueId = `checkbox-${option.value}-${index}`; // Generate a unique ID using the index\n\n return (\n <div class=\"option-wrapper\">\n <div class={`option ${isSelected ? 'selected' : ''} ${disableCheckbox ? 'disabled' : ''} \n ${this.getSizeClass()}`}\n data-value={option.value}\n onKeyDown={(e) => !disableCheckbox && this.handleOptionKeyDown(e, option)}\n onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n tabindex=\"0\"\n role={`${option.children?.length > 0 ? \"treeitem\" : \"option\"}`}>\n <ifx-checkbox tabIndex={-1} ref={(el) => option.checkboxRef = el} id={uniqueId} size=\"s\" checked={isIndeterminate ? false : isSelected} indeterminate={isIndeterminate} disabled={disableCheckbox}></ifx-checkbox>\n <label htmlFor={uniqueId} onClick={(e) => e.stopPropagation()}>{option.label}</label>\n </div>\n {option.children && option.children.map((child, childIndex) => this.renderSubOption(child, `${index}-${childIndex}`))}\n </div>\n );\n }\n\n isOptionSelected(option: Option): boolean {\n if (!option.children) return false;\n\n return option.children.every(child =>\n this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n );\n }\n\n\n isOptionIndeterminate(option: Option): boolean {\n if (!option.children) return false;\n\n const selectedChildren = option.children.filter(child =>\n this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n ).length;\n\n return selectedChildren > 0 && selectedChildren < option.children.length;\n }\n\n\n findInOptions(options: Option[], searchTerm: string): Option | null {\n for (const option of options) {\n if (option.value === searchTerm) {\n return option;\n }\n if (option.children) {\n const foundInChildren = this.findInOptions(option.children, searchTerm);\n if (foundInChildren) {\n return foundInChildren;\n }\n }\n }\n return null;\n }\n\n\n renderSubOption(option: Option, index: string) {\n const isSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n const uniqueId = `checkbox-${option.value}-${index}`;\n\n return (\n <div class={`option sub-option ${isSelected ? 'selected' : ''} ${this.getSizeClass()} ${disableCheckbox ? 'disabled' : ''}`}\n data-value={option.value}\n role={`${option.children?.length > 0 ? \"option\" : \"treeitem\"}`}\n onKeyDown={(e) => !disableCheckbox && this.handleOptionKeyDown(e, option)}\n onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n tabindex=\"0\">\n <ifx-checkbox tabIndex={-1} ref={(el) => option.checkboxRef = el} id={uniqueId} size=\"s\" checked={isSelected} disabled={disableCheckbox}></ifx-checkbox>\n <label htmlFor={uniqueId} onClick={(e) => e.stopPropagation()}>{option.label}</label>\n </div>\n );\n }\n\n private renderSelectAll() {\n const allSelected = this.persistentSelectedOptions.length === this.optionCount;\n const noneSelected = this.persistentSelectedOptions.length === 0;\n const indeterminate = this.optionCount > 0 && !noneSelected && !allSelected;\n\n const that = this;\n function toggleSelectAll() {\n if (allSelected) {\n that.clearSelection();\n } else {\n that.selectAll();\n }\n }\n\n function handleSelectAllKeydown(e: KeyboardEvent) {\n if(e.key !== 'ArrowUp' && e.key !== 'ArrowDown') e.stopPropagation();\n if(e.key === 'Enter' || e.key === ' ') {\n toggleSelectAll();\n }\n }\n\n return <div class=\"select-all-wrapper\">\n <div class={`option ${this.getSizeClass()}`} tabindex='0' onKeyDown={(e) => handleSelectAllKeydown(e)} onClick={toggleSelectAll}>\n <ifx-checkbox tabIndex={-1} id='selectAll' checked={allSelected} indeterminate={indeterminate} size=\"s\"></ifx-checkbox>\n <label htmlFor='selectAll'>Select all</label>\n </div>\n <ifx-dropdown-separator></ifx-dropdown-separator>\n </div>;\n }\n\n\n render() {\n // Create a label for the selected options\n const selectedOptionsLabels = this.persistentSelectedOptions\n .filter(option => {\n // check if option is a child and its parent is selected\n const isChildSelectedWithParent = this.persistentSelectedOptions.some(parentOption =>\n parentOption.children &&\n parentOption.children.some(child => child.value === option.value) &&\n parentOption.selected\n );\n return !isChildSelectedWithParent;\n })\n .map(option => option.label)\n .join(', ');\n\n return (\n <div class={`ifx-multiselect-container`} ref={el => this.dropdownElement = el as HTMLElement}>\n {\n this.label ?\n <div class=\"ifx-label-wrapper\">\n <span>{this.label}</span>\n </div> : null\n }\n <div class={`ifx-multiselect-wrapper \n ${this.getSizeClass()} \n ${this.dropdownOpen ? 'active' : ''} \n ${this.dropdownFlipped ? 'is-flipped' : ''}\n ${this.internalError ? 'error' : \"\"}\n ${this.disabled ? 'disabled' : \"\"}`}\n tabindex=\"0\"\n onClick={this.disabled ? undefined : (event) => this.handleWrapperClick(event)}\n onKeyDown={this.disabled ? undefined : (event) => this.handleKeyDown(event)} >\n <div class={`ifx-multiselect-input \n ${this.persistentSelectedOptions.length === 0 ? 'placeholder' : \"\"}\n `}\n onClick={this.disabled ? undefined : () => this.toggleDropdown()}\n >\n {this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder}\n </div>\n {this.dropdownOpen && (\n <div class=\"ifx-multiselect-dropdown-menu\"\n onScroll={(event) => this.handleScroll(event)}\n style={{ '--dynamic-z-index': this.zIndex.toString() }}>\n {this.showSearch && <input type=\"text\" role=\"textbox\" class=\"search-input\" onKeyDown={(e) => { e.stopPropagation() }} onInput={(event) => this.handleSearch(event.target)} placeholder=\"Search...\"></input>}\n {this.showSelectAll && this.renderSelectAll()}\n {this.filteredOptions.map((option, index) => this.renderOption(option, index))}\n {this.isLoading && <div>Loading more options...</div>}\n </div>\n )}\n <div class=\"ifx-multiselect-icon-container\">\n\n {/* Clear Button - will show only if there's a selection */}\n {this.persistentSelectedOptions.length > 0 && ( \n <div class=\"ifx-clear-button\" onClick={this.disabled ? undefined : () => this.clearSelection()}>\n <ifx-icon icon=\"cremove16\"></ifx-icon>\n </div>\n )}\n <div class=\"icon-wrapper-up\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n <ifx-icon\n key='icon-up'\n icon='chevronup-16'></ifx-icon>\n </div>\n <div class=\"icon-wrapper-down\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n <ifx-icon\n key='icon-down'\n icon='chevron-down-16'></ifx-icon>\n </div>\n </div>\n\n </div>\n {\n this.internalError ?\n <div class=\"ifx-error-message-wrapper\">\n <span>{this.internalErrorMessage}</span>\n </div> : null\n }\n </div>\n );\n }\n\n}\n","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n}\n\n.textInput__container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n width: 100%;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n font-family: var(--ifx-font-family);\n\n\n &.disabled {\n & .textInput__top-wrapper {\n & label {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n & .textInput__bottom-wrapper {\n input {\n border: 1px solid tokens.$ifxColorEngineering500;\n background-color: tokens.$ifxColorEngineering200;\n\n &::placeholder {\n font-size: tokens.$ifxFontSizeS;\n color: tokens.$ifxColorEngineering500;\n }\n }\n }\n }\n\n & .textInput__top-wrapper {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 0px;\n gap: 4px;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n\n & label {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n display: flex;\n align-items: center;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & .optional-required {\n margin-left: 4px;\n }\n\n & .optional {\n margin-left: 4px;\n }\n\n & .required {\n margin-left: 4px;\n \n &.error {\n color: #CD002F;\n }\n }\n }\n }\n\n .input-container {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n }\n\n\n & .textInput__bottom-wrapper {\n flex-grow: 1;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n gap: 4px;\n flex: none;\n order: 1;\n align-self: stretch;\n flex-grow: 0;\n\n & input {\n width: 100%;\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace100;\n height: tokens.$ifxSize500;\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorBaseBlack;\n font-family: tokens.$ifxFontFamilyBody;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n border: 1px solid tokens.$ifxColorEngineering400;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n text-overflow: ellipsis;\n\n &.input-s {\n height: tokens.$ifxSize450;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n\n &::placeholder {\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n }\n\n &.icon {\n padding-left: tokens.$ifxSpace500;\n }\n\n &.error {\n border: 1px solid #CD002F;\n\n &:focus {\n outline: none;\n }\n }\n\n &.success {\n border: 1px solid #4CA460;\n\n &:focus {\n outline: none;\n }\n }\n\n\n &:focus:not(.error, .success) {\n outline: none;\n border: 1px solid tokens.$ifxColorOcean500;\n }\n\n &:hover:not(:disabled, :focus, .error, .success) {\n border: 1px solid tokens.$ifxColorEngineering500;\n }\n\n &::placeholder {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n color: #8D8786;\n flex: none;\n order: 1;\n flex-grow: 1;\n }\n }\n\n & .input-icon {\n // Position the icon within the icon container\n // Adjust the positioning as needed\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: tokens.$ifxSpace200;\n /* Adjust this value to control the icon's left offset */\n transition: .3s;\n color: tokens.$ifxColorEngineering400;\n }\n\n & .textInput__bottom-wrapper-caption {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n letter-spacing: 0.2px;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n align-self: stretch;\n flex-grow: 0;\n\n &.error {\n color: #CD002F;\n\n }\n\n &.disabled {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n \n }\n .delete-icon {\n position: absolute;\n right: tokens.$ifxSpace200;\n\n :hover {\n cursor: pointer;\n }\n }\n}","import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-text-field',\n styleUrl: 'text-field.scss',\n shadow: true,\n formAssociated: true\n})\n\nexport class TextField {\n private inputElement: HTMLInputElement;\n @Element() el;\n @Prop() placeholder: string = \"Placeholder\"\n @Prop({ mutable: true }) value: string = '';\n @Prop() error: boolean = false;\n @Prop() label: string = \"\";\n @Prop() icon: string = \"\";\n @Prop() caption: string = \"\";\n @Prop() size: string = 'm';\n @Prop() required: boolean = false;\n @Prop() optional: boolean = false;\n @Prop() success: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() maxlength?: number;\n @Prop() showDeleteIcon: boolean = false;\n @Event() ifxInput: EventEmitter<String>;\n // @Prop({ reflect: true })\n // resetOnSubmit: boolean = false;\n\n @AttachInternals() internals: ElementInternals;\n\n\n @Watch('value')\n valueWatcher(newValue: string) {\n if (newValue !== this.inputElement.value) {\n this.inputElement.value = newValue;\n }\n }\n\n @Method()\n async reset() {\n this.value = '';\n this.inputElement.value = '';\n }\n\n handleDeleteContent() {\n this.reset();\n this.ifxInput.emit(this.value);\n }\n\n handleInput() {\n const query = this.inputElement.value;\n this.value = query; // update the value property when input changes\n this.internals.setFormValue(query) // update form value\n this.ifxInput.emit(this.value);\n }\n\n formResetCallback() {\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n\n render() {\n return (\n <div aria-label=\"a text field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`textInput__container ${this.disabled ? 'disabled' : \"\"}`}>\n <div class=\"textInput__top-wrapper\">\n <label htmlFor=\"text-field\">\n <slot></slot>\n {this.optional && this.required ? (\n <span class=\"optional-required\">(optional) *</span>\n ) : this.optional ? (\n <span class=\"optional\">(optional)</span>\n ) : this.required ? (\n <span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n ) : null}\n </label>\n </div>\n\n <div class=\"textInput__bottom-wrapper\">\n <div class=\"input-container\">\n {this.icon && (\n <ifx-icon class='input-icon' icon={this.icon} />\n )}\n <input\n ref={(el) => (this.inputElement = el)}\n disabled={this.disabled}\n type=\"text\"\n id='text-field'\n value={this.value}\n onInput={() => this.handleInput()}\n placeholder={this.placeholder}\n maxlength={this.maxlength}\n class={\n `${this.icon ? 'icon' : \"\"}\n ${this.error ? 'error' : \"\"} \n ${this.size === \"s\" ? \"input-s\" : \"\"}\n ${this.success ? \"success\" : \"\"}`} />\n\n { (this.showDeleteIcon && this.value) && (\n <ifx-icon class=\"delete-icon\" icon=\"cremove16\" onClick={() => this.handleDeleteContent()}></ifx-icon> \n )}\n </div>\n {this.caption && !this.error &&\n <div class={`textInput__bottom-wrapper-caption ${this.disabled} ? disabled : \"\"`}>\n {this.caption}\n </div>}\n {this.error &&\n <div class=\"textInput__bottom-wrapper-caption error\">\n {this.caption}\n </div>}\n </div>\n </div>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-ee32b31a.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as i,h as t,g as c}from"./p-e244bae4.js";const s=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-block;user-select:none}.container{display:flex;flex-direction:row;align-items:center}.container.gap{gap:16px}.switch__checkbox-container{padding:4px;display:flex;align-items:center;position:relative;width:32px;height:16px;background-color:#FFFFFF;border:1px solid #575352;border-radius:20px;cursor:pointer;transition:background-color 0.3s ease;outline:none}.switch__checkbox-container:focus{outline:4px solid #0A8276;outline-offset:2px}.switch__checkbox-container:focus:not(:focus-visible){outline:none}.switch__checkbox-container:focus-visible{outline:2px solid #0A8276;outline-offset:2px}.switch__checkbox-container.disabled{cursor:default;border-color:#BFBBBB}.switch__label-wrapper label:hover{cursor:pointer}.switch__label-wrapper.disabled{color:#BFBBBB}.switch__checkbox-wrapper .switch{width:16px;height:16px;background-color:#575352;border-radius:50%;transition:transform 0.3s ease, background-color 0.3s ease}.switch__checkbox-wrapper .switch.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}.switch__checkbox-wrapper .switch.checked{transform:translateX(16px);background-color:#FFFFFF}.switch__checkbox-wrapper .switch.checked.disabled{cursor:default}.switch__checkbox-container:hover .toggle-switch{box-shadow:0 0 5px rgba(0, 0, 0, 0.2)}.switch__checkbox-container.checked{background-color:#0A8276;border-color:#0A8276}.switch__checkbox-container.checked.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}';const o=s;const a=class{constructor(t){e(this,t);this.ifxChange=i(this,"ifxChange",7);if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.checked=false;this.name="";this.disabled=false;this.internalChecked=false}async isChecked(){return this.internalChecked}componentWillLoad(){this.internalChecked=this.checked}toggleLabelGap(){const e=this.el.shadowRoot.querySelector("slot");const i=this.el.shadowRoot.querySelector(".container");if(e.assignedNodes().length){i.classList.add("gap")}else{i.classList.remove("gap")}}componentDidLoad(){this.toggleLabelGap()}valueChanged(e,i){if(e!==i){this.internalChecked=e}}toggleSwitch(){if(this.disabled)return;this.internalChecked=!this.internalChecked;if(this.internalChecked){if(this.value!==undefined){this.internals.setFormValue(this.value)}else{this.internals.setFormValue("on")}}else{this.internals.setFormValue(null)}this.ifxChange.emit(this.internalChecked)}handleKeyDown(e){if(this.disabled)return;if(e.key==="Enter"\|\|e.key===" "){this.toggleSwitch()}}formResetCallback(){this.internals.setFormValue(null)}render(){return t("div",{key:"de6389b77c207826d77a570abe5478c6367d1a2f",class:"container",role:"switch","aria-checked":this.internalChecked?"true":"false","aria-label":this.name,onClick:()=>this.toggleSwitch(),onKeyDown:e=>this.handleKeyDown(e)},t("div",{key:"1106e7915d271968cfb7e492416e4c4d3880c79f",class:`switch__checkbox-container ${this.internalChecked?"checked":""} ${this.disabled?"disabled":""}`,tabindex:"0"},t("div",{key:"28e9a3a6b19b15e0bf7728de60d0096b0105e479",class:"switch__checkbox-wrapper"},t("input",{key:"707c0926234f0efd3e89add4de113a60d93fa0f6",type:"checkbox",hidden:true,name:this.name,disabled:this.disabled,checked:this.internalChecked,value:`${this.value}`}),t("div",{key:"c49f39e736dedca763a5e64c244150511002b362",class:`switch ${this.internalChecked?"checked":""} ${this.disabled?"disabled":""}`}))),t("div",{key:"11b0ea462a831639c84aa58cfaffed801881dc6a",class:`switch__label-wrapper ${this.disabled?"disabled":""}`},t("label",{key:"dc3fd52e702f0630283d871fff9b47184db4e535",htmlFor:"switch"},t("slot",{key:"4b77fbdea92c23c4d056b71ad5ac889f24e34277",onSlotchange:()=>this.toggleLabelGap()}))))}static get formAssociated(){return true}get el(){return c(this)}static get watchers(){return{checked:["valueChanged"]}}};a.style=o;export{a as ifx_switch};
2	+ //# sourceMappingURL=p-ee32b31a.entry.js.map