npm - @infineon/infineon-design-system-stencil - Versions diffs - 30.10.0--canary.1696.b831179ac32ae02cdeaa1c4b607f326c7553bc3a.0 → 31.0.0--canary.1697.e5e5c4da838c535d0e5399b759dcee2325e38b03.0 - Mend

@infineon/infineon-design-system-stencil 30.10.0--canary.1696.b831179ac32ae02cdeaa1c4b607f326c7553bc3a.0 → 31.0.0--canary.1697.e5e5c4da838c535d0e5399b759dcee2325e38b03.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 (825) hide show

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

	@@ -1,2 +0,0 @@
1	- import{r as e,h as c,g as a}from"./p-6b122987.js";const d='*{font-family:"Source Sans 3";box-sizing:border-box}body{margin:0;padding:0;overflow-x:hidden}header{margin-bottom:15px;display:flex;justify-content:center}.header__info-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}.infoboard__wrapper{display:flex;gap:15px;background-color:#f1f1f1;padding:5px 10px;border-radius:10px}.title{font-size:30px;font-weight:bold}.view{margin:auto}.wrapper{position:relative;width:100%;height:calc(100vh - var(--header-height) - 15px);overflow:auto}table{width:100%;table-layout:fixed;border-spacing:0}thead tr th{border-top:1px solid #dddddd}td,th{padding:10px;background-color:white;border:none;box-shadow:0 0 0 1px #dddddd;box-sizing:border-box}table th:nth-child(1){width:150px}table th:not(:nth-child(1)){width:240px}th{position:sticky;top:0;background-color:white}.sticky-col{position:sticky;z-index:1}th.sticky-col{z-index:2}.second-col{left:0;border-left:1px solid #ddd}.wrapped-content{width:250px;white-space:normal}a{text-decoration:none;color:black}.basic__info{display:flex;gap:5px}ul{padding:0 5px;margin:0 15px;list-style-type:none}tr:nth-child(even) td{background-color:#f1f1f1}ul li{font-size:12px;display:flex;gap:5px;line-height:13px}li.planned__component-wrapper{align-items:center;line-height:16px}.version__wrapper{display:flex;flex-direction:column}ifx-icon{color:rgb(10, 130, 118)}.check__icon{width:10px;height:10px}.planned__icon{width:12px;height:12px;vertical-align:sub}';const f=d;const b=class{constructor(c){e(this,c);this.getPlannedComponents=()=>{const e=this.el.shadowRoot.querySelectorAll(".planned__component");return e.length};this.setPlannedComponentsNumber=()=>{const e=this.getPlannedComponents();const c=this.el.shadowRoot.getElementById("number__indicator-planned");c.innerHTML=e};this.getCompletedComponents=()=>{const e=this.el.shadowRoot.querySelectorAll(".completed__component");return e.length};this.setCompletedComponentsNumber=()=>{const e=this.getCompletedComponents();const c=this.el.shadowRoot.getElementById("number__indicator-completed");c.innerHTML=e};this.setTotalComponentsNumber=()=>{const e=this.getPlannedComponents();const c=this.getCompletedComponents();const a=this.el.shadowRoot.getElementById("number__indicator-total");const d=e+c;a.innerHTML=d}}componentWillLoad(){let e=this.el.parentElement;if(e){e=e.parentElement;e.style.padding="0px"}}componentDidLoad(){const e=this.el.shadowRoot.querySelector("header");const c=e.offsetHeight;const a=this.el.shadowRoot.querySelector(".wrapper");a.style.setProperty("--header-height",`${c}px`);this.setPlannedComponentsNumber();this.setCompletedComponentsNumber();this.setTotalComponentsNumber()}render(){return c("div",{key:"024f5a930c210544c6f563c0d7f906e5bfa38bbc",class:"container"},c("header",{key:"bbb6bdc0dad0226ccb0653319e2da13b540c65e4",class:"header"},c("div",{key:"1978c15414e46530532523a41ce714faa1db6eb9",class:"header__info-wrapper"},c("div",{key:"28fd5d40f40e7bc0a745d14e0e459e3aa2b23026",class:"title"},"DDS Components Overview"),c("div",{key:"3405f48ed07a1b01c43f7bd30d93a83b899014a6",class:"infoboard__wrapper"},c("div",{key:"dd8068e7ed66f62c5f8e74fbb48500205da7af3d",class:"basic__info"},c("div",{key:"5df0c8545cd6f3d12df72fc48aeb7829aadd38f7"},"Total Number:"),c("div",{key:"7de166b707b734e3758f6dffe1ead817e5c0c899"},c("ifx-number-indicator",{key:"791125adba985924da67036c4063c3169344cedf",id:"number__indicator-total"}))),c("div",{key:"cc45aef8d898c4fbaf3e6750908a8364d6413d33",class:"basic__info"},c("div",{key:"8ab1a09336d6dcb1df5b45aac9b6fcfcdf374fa3"},"Completed:"),c("div",{key:"2ec32943e48207a4a5a70014c5a100ff32da4ef6"},c("ifx-number-indicator",{key:"8fa2ebc4960940c2038d4bb59d61e7e698dc5169",id:"number__indicator-completed"}))),c("div",{key:"cb5233a0001f11732aa3931dfa6048d4ad68784c",class:"basic__info"},c("div",{key:"692eb6a2ed325f938b166db9a2e94f21ed264027"},"In Progress:"),c("div",{key:"f59382b9b961c7a1e339b95fa057a15d42b0cff8"},c("ifx-number-indicator",{key:"41a0cc66f29582189f90ded365348730b263d43d",id:"number__indicator-planned"})))))),c("div",{key:"8ed5925b8764e0342890040238aad71a65003d3c",class:"view"},c("div",{key:"01a4c9952c8335dd4f3b84e155a61851531d0597",class:"wrapper"},c("table",{key:"1c779ac8d3459fc6e670737a277bc5d1126ad2d6"},c("thead",{key:"2c69217d978cb0bd71eea3f70d4c32065fc9bcc1"},c("tr",{key:"f08c9bd749ee3dfc0198e06dbe12a9eef8de803b"},c("th",{key:"a685152e69f9e064e4bbd3adcc76303de3d87b21",class:"sticky-col second-col"},"Component"),c("th",{key:"6b6009a3ac2f2cb8111570cde5a8dfc803838ae4"},c("div",{key:"c393d76fb793227d653a810c629698f47d5a6c98",class:"version__wrapper"},c("span",{key:"25388d0561b8a5a7356a4e73d9c384a823c45f86"},"Version 1"))),c("th",{key:"08f9666f450c23887481cb6a875ba1ba282b3eaf"},c("div",{key:"a2e06277927afb3649d37b45c860bc2c7eaf8741",class:"version__wrapper"},c("span",{key:"c5e1cdb8feef147b0e5f878d78c4cac5127e8154"},"Version 2"))),c("th",{key:"b3938834dde276ae8aaabdba2f8a7748a611032f"},"Version 3"))),c("tbody",{key:"9f0d531823f49e6b50373d0e70a63168531c9443"},c("tr",{key:"41b7212975067877a5abcb8dc87041baada7adf3"},c("td",{key:"0564ff534e9f694ae20bda0d6fafde2b6591d82a",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"80a28b61841632932aeba24c294dea5f27c1fcd5",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-accordion--development",size:"s",variant:"bold"},"Accordion")),c("td",{key:"d02a9fb1c4f87307769a08b7193e7f93bd879775"},c("ul",{key:"d1df497ab6508dc2310827cba0ff94461439985d"},c("li",{key:"32f7e8b97c3ad60852b60dc4b120e8502538afbc"},c("span",{key:"8c354ef64de9939d42cfeabc858c127952fe0aea"},c("ifx-icon",{key:"d4bb314df1de5a2cafeb01cfc2cc6f8ceb845d55",class:"check__icon",icon:"check12"})),c("span",{key:"a449d6f817ebe030aebfa11401de789d5bccb141"},"Includes essential functionality such as expand/collapse behavior and minimal customization options")),c("li",{key:"1735f59911d56a27cd36d7b449fbb11f8e414285"},c("span",{key:"677a933c97cd8ba1530fca1ff21120bd3a4970a2"},c("ifx-icon",{key:"99fe44f18ec7cd8a3a336e47c469ef3cdfbef051",class:"check__icon",icon:"check12"})),c("span",{key:"139910276471a95b2f1d34d913974e6e74c9641b"},"Adheres to web standards")),c("li",{key:"2d26bde58bf4b80d3e65ae53f01881eaa9d45773"},c("span",{key:"d88130d648d0caaeccf1dfbd57cbc07d5a7c5ea3"},c("ifx-icon",{key:"9254a7be3d53fd746a8f95c87573bcbd57587b01",class:"check__icon",icon:"check12"})),c("span",{key:"347274c1c7e05c685e9ef37a4bb139a5b8c24fe0"},"Provides a simple and lightweight way to organize and display collapsible content")))),c("td",{key:"d1e1eea966b74e75494ff9cab1db60c4e0f4ae92"},c("ul",{key:"c432aa206278aad277197e1a23d7e7f67efe9019"},c("li",{key:"625f3981bc42bc6bccb3ba768369b9c4409356eb"},c("span",{key:"856c23969718aac1f7f4bb646844719742f870d1"},c("ifx-icon",{key:"d92b21be949db912db1924aea9a17959a9ab6a81",class:"check__icon",icon:"check12"})),c("span",{key:"e2170619294e9501918721a7db56d4ee7d6cd9f6"},"Auto collapse feature")),c("li",{key:"9fe97d06274dfcfe0dfb450d16aabacecc635582"},c("span",{key:"996cf903bf8b11b676171d4c1e175ec08c396ccd"},c("ifx-icon",{key:"0178faa360335c535e28a82787d5216165d91935",class:"check__icon",icon:"check12"})),c("span",{key:"8fa194677f397f510a4c399d8130d65be6ff281e"},"Initial collapse feature")),c("li",{key:"8c3f3b67147247430656685eb7cacc86a0a94d61"},c("span",{key:"68c481ce09af4eac72a62c1fe0b021510c3fe300"},c("ifx-icon",{key:"a14cccc9d4029df644f66431d695faecde2b8813",class:"check__icon",icon:"check12"})),c("span",{key:"23e6a629a1bf6a91d6d1e01febccc1752fee84ad"},"React, Vue and Angular wrapper integration")))),c("td",{key:"ef09c8a1d0d8971a2782ef069f2eaef69f9eba5d"})),c("tr",{key:"81c6366e2b8baae15c4c562085d15dee7539ed98"},c("td",{key:"8017e0166666f2c2c708dac2453363f1c5e6c747",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"96dc66f73384da3ebe7f9c9f7a6945a43109f74f",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-alert--development",size:"s",variant:"bold"},"Alert")),c("td",{key:"6402731e8d7ebbc5671b1af5e1d20045c2dfe60b"},c("ul",{key:"6178aeedf62eb0a0bf10810fe3f7c26a2eeaa5f1"},c("li",{key:"f03bce671a54e31f4bca7a943f08519196503c94"},c("span",{key:"e0b4d387d8e646fbba0350d5044974213dceceec"},c("ifx-icon",{key:"92e2f6871773cd6505fdd6b8aaef9c3521ba6b9f",class:"check__icon",icon:"check12"})),c("span",{key:"7dfc9cb9e697cf344f9c250cb72e379a527b5c4c"},"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:"6a43ed9b716bc74169941bbb02abc7268f8f7f16"},c("span",{key:"47657d6af2f658836e5edd7b751d3c76d8387b7f"},c("ifx-icon",{key:"174791b3ef7294604d9f0524c4a6a6ad06ecca72",class:"check__icon",icon:"check12"})),c("span",{key:"e4be71da76c86470c7a7e8b217e49b7ad0fae834"},"Adheres to web standards")))),c("td",{key:"91d89a82069f14febb676c9397cc887cae3b8d2d"},c("ul",{key:"1243b0ab7452a716ef2b8ce7e54c98a5080a7758"},c("li",{key:"a9f5ad8a71ae61a3751fd33e9c5eb1a01e26a777"},c("span",{key:"9129b9653841f8104c990ff12f3e1e320d6617cf"},c("ifx-icon",{key:"4f3ac573de16d6ed251b2f41cbd822951096c6d5",class:"check__icon",icon:"check12"})),c("span",{key:"e2894e584971f5e890b6ae4414c7c7109e5b873c"},"Configurable close button")),c("li",{key:"3a75ca35e7df88d470a85221f92a68cb8c51dc41"},c("span",{key:"672f0f7f0dc91f0058ff27f241caeccda0509249"},c("ifx-icon",{key:"371930d271a86f1cb3f09dbfd29477806751aaee",class:"check__icon",icon:"check12"})),c("span",{key:"6e3cb3c11289f5cf759444848157ffce7a539b37"},"Additional Info variant")),c("li",{key:"d96d03d7a958c26f6243f375c96fd76a096c820c"},c("span",{key:"ac12afb5990462431a2d6c96aed7d0d30afa15c4"},c("ifx-icon",{key:"6b7673dd6aa4bb4370cca0436e9a952092faac29",class:"check__icon",icon:"check12"})),c("span",{key:"c16ddae5aa2426e33d4b795b9bd5546f822f165d"},"React, Vue and Angular wrapper integration")))),c("td",{key:"a5c38fc4d205716a1ca08b7879633f258c5fb9b0"})),c("tr",{key:"afd19aa60bfcbd274dd6004c12f872a0b7410a32"},c("td",{key:"289afbd46c7e8ecd5e5340e091f9baab7a772f9e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"3c176207a570d9634a3024cdb3705448c863b28d",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-badge--development",size:"s",variant:"bold"},"Badge")),c("td",{key:"eb589b7953f9a0772e5fe6b112f8cb9ac165bf24"},c("ul",{key:"4998754db19729da7301333ddb9a1bfad46b2557"},c("li",{key:"0965dbe3ff65ed8afab4464b9c4eeadf5535bbb0"},c("span",{key:"e6de68c9c635fd01f37bff6212fb2d2137c9dde1"},c("ifx-icon",{key:"e2ab18c6bacb2b2a7edb833355b4a985d65b2fdc",class:"check__icon",icon:"check12"})),c("span",{key:"e87fa997b213e5e5878c79e0dd07d3c82f0eb1c7"},"Offers simple customization options for displaying badges, allowing developers to indicate specific actions, statuses, or categories with visual cues")),c("li",{key:"396e6d97572991eea29ceb0ce62f07b0c78ec98e"},c("span",{key:"0ad85732f66dc3da8bcf055963a5dc73a371d012"},c("ifx-icon",{key:"567aacbd96ceaf78cb5e96b33399db803f391a20",class:"check__icon",icon:"check12"})),c("span",{key:"c01eb115e103658b1eb38b43dc1024cd1fbc70df"},"Designed to seamlessly integrate with existing UI elements and adhere to web standards")))),c("td",{key:"73cf7fb9a4558e116df201b144e0da4a70466d85"},c("ul",{key:"ff654ef238261e41874980c4908f2594c74f1ae3"},c("li",{key:"4fc687732ee6233f37987ed7f8554d816c00f4bf"},c("span",{key:"397970fc07e6f219223b28cc8c82c5644ceb0efb"},c("ifx-icon",{key:"170221b52ee488e1c50e27a81eacba97422b1009",class:"check__icon",icon:"check12"})),c("span",{key:"71507dab368f140c26eb5619a55ffcf7bc4b0c4e"},"React, Vue and Angular wrapper integration")))),c("td",{key:"45a1eed050d7eeaace58f255130062e9ebd4958a"})),c("tr",{key:"757be787474282c79573f753c24deecb06181676"},c("td",{key:"0b153dc33a02779c191ee4b5e7c0f88c8da2e52c",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"8fbf7954c69c5f87fc9b0da199f6284738287ac3",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-breadcrumb--development",size:"s",variant:"bold"},"Breadcrumb")),c("td",{key:"a74f363b9bf36e0b044930a82c43fde911f9332d"},c("ul",{key:"33d271b586ca025c087015dfe901bb7b86dd2025"},c("li",{key:"d7da5a9fdd2d6a72854f40ba8d848dc135a58416"},c("span",{key:"eca9d9646000e1f16212d05676a211287489fbc4"},c("ifx-icon",{key:"49b2124b03906d045de9d79f8259e3145f2877cc",class:"check__icon",icon:"check12"})),c("span",{key:"0629ac76abb661a3d57821493213f765efb067ec"},"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:"c1a376c0d47b27a00ba0d7fd0bfbfc0513d9e289"},c("span",{key:"72581b144c80b77bb2447df3a0cd7b6dbc9260de"},c("ifx-icon",{key:"9f1ca11e32a08d078f4d32cde6020d4e20dad54e",class:"check__icon",icon:"check12"})),c("span",{key:"47e311d02befa248d480e960fc59ab791957c2d1"},"Adheres to web standards")))),c("td",{key:"888e2a0d02d3f3c2e5ab13c0ff4b41bae62d5c2f"},c("ul",{key:"863c2346b61cb52f57b5106a23577b6512574e6a"},c("li",{key:"0768c0318ce3bb24da91c6ff3750e204be5f807e"},c("span",{key:"af59228b94cb967b75b306d221c299556a547e57"},c("ifx-icon",{key:"003e0dee0c7fb11a97b78835e8d544498e9606ab",class:"check__icon",icon:"check12"})),c("span",{key:"ba1997af54f1947b69f2784cd70d4eaf0f0ef4a8"},"Possibility to add an icon")),c("li",{key:"68db61667a8b62b985be524a7a5dec826d1647e7"},c("span",{key:"8dc59d285e0eff18aa423970e8d70dd998c2e571"},c("ifx-icon",{key:"ce6f6789c5adec373e918d43094c2d838c7b6f6c",class:"check__icon",icon:"check12"})),c("span",{key:"50dc222125795561ca64ff3436fd49a86ae82b3d"},"Incorporated dropdown-menu for individual items")),c("li",{key:"81f352ae692e3c229021fb935066851eead19d33"},c("span",{key:"3a6a340b44ca89dc5d45e0201fd440c3ea9a1ea1"},c("ifx-icon",{key:"3b6a56012e89dcf99cd0f0784a6a4984a656075f",class:"check__icon",icon:"check12"})),c("span",{key:"8174c247e12734faa78f2656e8ce56760b884f1d"},"React, Vue and Angular wrapper integration")))),c("td",{key:"b257529e9f5d7bf76f119ebce39395f8853a23d0"})),c("tr",{key:"64899eecba152983fa2f5adf811611a76c25382b"},c("td",{key:"050f8ae17c916bd30f5c94bf45397a7355599919",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"22ac670df969befcb336904ce8df7e732c6de8b4",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-button--development",size:"s",variant:"bold"},"Button")),c("td",{key:"3cc1663f56fe6bda6a34701c7400bd33b829593f"},c("ul",{key:"8685deffa3b7ed1a59892bc1c357e4aa4eeffa20"},c("li",{key:"6687c704067088ecc3f164a1a771433a7e1a457c"},c("span",{key:"f622a8950d7bcfabcb15cd847396a97668bdfda1"},c("ifx-icon",{key:"18f66ad396cad2fca170b88fae26ed2c83b42c5a",class:"check__icon",icon:"check12"})),c("span",{key:"6cf3b30e4e25265d370706675a259904ff86d018"},"Includes basic styling options such as colors, sizes, and states, providing essential functionality for initiating actions")),c("li",{key:"abe99e0de1655887b063df90b6d450346ef487a4"},c("span",{key:"3ddc9dc1388f740018f5b9fae2ebcfa33f65fcea"},c("ifx-icon",{key:"cd0eb511ca714ac7875a53ec3a0fc9c90e8fb977",class:"check__icon",icon:"check12"})),c("span",{key:"94f04e082eb8450325ce6a2d5527647e1c65a111"},"Adheres to web standards")))),c("td",{key:"55193a9c68493f6eab04e1f1ee04a12afe957a56"},c("ul",{key:"5718928a908207c98ed5f5c95f92bf1cb7eaddd3"},c("li",{key:"9d57df617605643123b6602c8977c65e0ce7bdba"},c("span",{key:"4a7c9aa82e7a0d95682bc25506de4ffbf3250949"},c("ifx-icon",{key:"fa01ac88389fe570e3bb2f5b5712ccff6e457d21",class:"check__icon",icon:"check12"})),c("span",{key:"e312ba8e34fd656d0960c752dfe8004310e97638"},"fullWidth feature")),c("li",{key:"363b74613bade83d11446b889f935ad51c897c3f"},c("span",{key:"5f974c8bfbdb9500a0f12fb1f4bd38d9d62a7856"},c("ifx-icon",{key:"1932b0b2bfa6a6f9e9254061e3407927b81a5966",class:"check__icon",icon:"check12"})),c("span",{key:"06fff395f974c6377c25f888a7dfab1fe995e15a"},"Icon integration")),c("li",{key:"0fbaa0bd639c301309b881a2e3907f4dc64e9f70"},c("span",{key:"76a72e1b9a4aeab250a7d20f34551b1b841cea81"},c("ifx-icon",{key:"a52980ba86899c6d43d20d580732f4cd4157217b",class:"check__icon",icon:"check12"})),c("span",{key:"a3cec53326119a69eacbc1160291de5595183c4f"},"Link integration")),c("li",{key:"968d8075b7fee2005706e836220319c90bafff2a"},c("span",{key:"a18715904ca92559a2eef9984ff4efa7ed08ee79"},c("ifx-icon",{key:"0edaa267ea18479f51688f7da46d95299c200bfb",class:"check__icon",icon:"check12"})),c("span",{key:"d0ae907783a451950289921eb73d3a1057186711"},"React, Vue and Angular wrapper integration")))),c("td",{key:"2dcfb92302c5090232a27dab5551d3a01fd89916"},c("ul",{key:"6e13b1dcd22dcba2ff592b50b1b2490fe778ebb2"},c("li",{key:"6c82d7b9cbe7fe1bfc193b9437c3ba890317c6a5"},c("span",{key:"7e40f298e5dfb4b1f5fee08bdb4525ca28e14792"},c("ifx-icon",{key:"45547ea6e52ad67a33c518d07dcf973902967c6b",class:"check__icon",icon:"check12"})),c("span",{key:"ddda9c68e92399f9c9fbebd7b04973a8e7311e4e"},"Form integration"))))),c("tr",{key:"fa13e113c5782b061469fae2a4c151765dc37abc"},c("td",{key:"32474666b8ffb065e642ecca09c3a8846e36d97f",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"a196c5bd48127a7bb6d64ee0a5e9f5fb793c3bd4",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-card--development",size:"s",variant:"bold"},"Card")),c("td",{key:"ad6a9094822bc44012cdc719e915ac6aa3df05c2"},c("ul",{key:"f57d85c5917646d5b4bdfd20a933b7d2b2da4e93"},c("li",{key:"2b9e896fee90c45903b7f7795e3db69ec6f1a6b1"},c("span",{key:"adfc3ac85da65497a05997e320ce8b735a162c96"},c("ifx-icon",{key:"5ec13578db1adb457b1779adb1b278cef6cf7cb6",class:"check__icon",icon:"check12"})),c("span",{key:"02b3c9fc35b5555b120a5ae633af59b9d05dd005"},"Provides a structured and customizable layout, featuring elements such as headings, images, text, and buttons")),c("li",{key:"d9379fb3a64634cb48340eeb4ab76714929dfa88"},c("span",{key:"e8ac86b39942f205100f550338773cf411aefc68"},c("ifx-icon",{key:"b4f14e49e4afb0686611ac6bcd9a16c80751d782",class:"check__icon",icon:"check12"})),c("span",{key:"f3561b63b0d7b75d792d2f0a5fb59ab13e23c13f"},"Adheres to web standards")),c("li",{key:"6c16008ff9fc550a26300490eccf1e56811755e6"},c("span",{key:"406c0cfb5e9bf5cf1b8bf433e73783093fb44749"},c("ifx-icon",{key:"09c7ebce970671ba3e3cdb30b64d5cb76a026921",class:"check__icon",icon:"check12"})),c("span",{key:"17aaccb9bb1944e93c303171e616fdca981bbf64"},"Horizontal and Vertical layout")))),c("td",{key:"64735ce8cd0798f911122726eb1422724c65ab66"},c("ul",{key:"d6aa6cef0d58527ef40cb70758c9d2e423e6071f"},c("li",{key:"eb2c9a13e711d0344d1104cdf402290967d98e2b"},c("span",{key:"85601b6ab10b871522606ef67ce16a709302cc7a"},c("ifx-icon",{key:"0d0abe57e5c1c2a0743b3bf5b02c11e2df4839ba",class:"check__icon",icon:"check12"})),c("span",{key:"85c16213e2cfacd273f42926a7ef5d50b93ca374"},"Possibility to embed multiple buttons")),c("li",{key:"f3d4f3053f331ad3863864c34f12fec2d443a5fe"},c("span",{key:"b1459aefe1bf0709ac70dd15b058cffa65d68919"},c("ifx-icon",{key:"437490aba84d04e1cd7437b0d4db85e42d1692c8",class:"check__icon",icon:"check12"})),c("span",{key:"b0ae08ce414acffdf551a3c2bbd771c52b6311cf"},"A switch between a Link and a Button")),c("li",{key:"a1007c9b80631173d6842d091fd013194316fffe"},c("span",{key:"06b580bd628dca3991cf951b19935455e6fdf7f1"},c("ifx-icon",{key:"017bb965de0bb73d0097e84e3bc42300598b6bc2",class:"check__icon",icon:"check12"})),c("span",{key:"8ceb31ae1cbc981b66db0bed14b93474fd174873"},"Enhanced stylying behavior")),c("li",{key:"1ad66f169138b79286601bfe84da77a10b2a6fcf"},c("span",{key:"c7364abb272204a26e609d58060ef4a9a8bc7345"},c("ifx-icon",{key:"9dda3a31c6196e2460063d431007b40a5880b2d9",class:"check__icon",icon:"check12"})),c("span",{key:"f997144a987377c632207c52a33cf790af4b6c78"},"React, Vue and Angular wrapper integration")))),c("td",{key:"82c29baa241b696ee3e1da2880acfdf9fe50e7ce"})),c("tr",{key:"a317160e694784aef25ddc92cf4fe9408f06cf60"},c("td",{key:"8dce93ceb5976de970d8cf5f0914e2cd5c2eacd7",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"3bea45275c33ef2083faa95da1df87d8059ac56a",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-checkbox--development",size:"s",variant:"bold"},"Checkbox")),c("td",{key:"743c57e0a4d7fbbd6f72c825c68ee49bc3fe3ac7"},c("ul",{key:"2c89b620f31f45d54f76815713a3d07077e10864"},c("li",{key:"0df978eeab5f347dccba43c4a5f7d5b070fda653"},c("span",{key:"b929e001bafdb02519bcc699372c7609fbc21b87"},c("ifx-icon",{key:"2466fd89eb1fb5d8aaba230dc13de1b6dcc0c030",class:"check__icon",icon:"check12"})),c("span",{key:"13943c3be0730fb7d61f241a2327c2202cd95bde"},"Offers a simple and customizable checkbox input, allowing users to toggle between checked and unchecked states")),c("li",{key:"f69d5db7e59ddac4db264ff4c19f3b7a37b04fcb"},c("span",{key:"09ad3e87df465a5bf175c15d8ee121e04e24a0f4"},c("ifx-icon",{key:"3b76c35ef396b4d8ea100adcca413090742ba20c",class:"check__icon",icon:"check12"})),c("span",{key:"e27e2de96c6a3c893e6c42b764590f24ce470aec"},"Adheres to web standards")))),c("td",{key:"e3e2e95369c48541318d7513d0fba1b32bf6abad"},c("ul",{key:"38c46d8f81f19bcf1712df7fd0b5bf055a4165f3"},c("li",{key:"ef4cbe007d532bde665a362cabb4584c64767faf"},c("span",{key:"b7a0016cc993be1b9df0c5e1aa0b3d58a0395e11"},c("ifx-icon",{key:"a5dc2dfdec165483f75c5300e3e9fe41d08249fa",class:"check__icon",icon:"check12"})),c("span",{key:"0a23ab4776599425d3a9ff15f27baa37bc9bbc8a"},"Indeterminate state variant")),c("li",{key:"b1c91d3ceaf2c2d57e65897c8065d730b9eec1c2"},c("span",{key:"68ff9ed92af002dee741545718261a8d75a79899"},c("ifx-icon",{key:"6129f3be6bceccbb6283214ad9fb611f8b3cf1e4",class:"check__icon",icon:"check12"})),c("span",{key:"641a6c938d6cbcece002fcf444382b7ff734f9b3"},"React, Vue and Angular wrapper integration")))),c("td",{key:"9f002de1931069e50ffb193fe78ce4161c26d9a7"})),c("tr",{key:"59397f1e538892ebc35cce3ce4e0e90ab08626c8"},c("td",{key:"3b89ac430c3123285874e92727d284ee360dc0c9",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"d5b9946d4bcbaf922f8fcf728093611b1456c283",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-chip--development",size:"s",variant:"bold"},"Chip")),c("td",{key:"64c6b56ef3da7607a22882d090cc2d4f4b5ef6ba"},c("ul",{key:"d4a1c5d2b644418b27090819cb942e7aad966ca2"},c("li",{key:"31479d1d4903dad746d278d9108d3ae9660c46bd"},c("span",{key:"c426d336bfb969d2d44d78c4f3401fbee400d3a1"},c("ifx-icon",{key:"22f1e1ef5cc146083a2f2e40b3e3fcdbaedad3d0",class:"check__icon",icon:"check12"})),c("span",{key:"b126bec3b82c731c4acb8bd075899e476a853544"},"Provides a simple and customizable interface, representing discrete units of information or user interactions, such as labels, categories, or removable entities")),c("li",{key:"e610bbde5edcdb94ff4298d181a993587ab5f162"},c("span",{key:"c934f7bcabba156fb434c97e70f4ea0a901a44ec"},c("ifx-icon",{key:"5502b3dfecdfce1fb782385aaa3398c023ce2e16",class:"check__icon",icon:"check12"})),c("span",{key:"21f5e131b8a9028be3037308cac37af067af8f4e"},"Adheres to web standards")))),c("td",{key:"b6fec207feb4fcfcc83f8fc9ca038a77bf5c6272"},c("ul",{key:"43392b02f8522b6e2cab9da4370b365688cf550a"},c("li",{key:"ef5bbde0b9c75defb7059b6e101e909fef52257d"},c("span",{key:"bfc79400f23d8f9a9bd62d90b6f723500bda69e3"},c("ifx-icon",{key:"4d4c319988a4065630a7805e5e74c612ed360f92",class:"check__icon",icon:"check12"})),c("span",{key:"fc7178ecbce1e9299a68ea236eb492c28a696c42"},"Incorporated dropdown-menu for individual item selection")),c("li",{key:"4d5906794be2fd1f2c11735babb94e5c56f677fa"},c("span",{key:"36a90612e7a8ba8157c3005e3226b67441a3f3df"},c("ifx-icon",{key:"2bd20337f676afe66e1ddd8e5a2ef6f37235e535",class:"check__icon",icon:"check12"})),c("span",{key:"98f3c5855cc5170f11feab37b920199aa068f227"},"React, Vue and Angular wrapper integration")))),c("td",{key:"374de22e37526e080960414077e2c27d4f073a79"})),c("tr",{key:"e4418c8b6de9ffd1e628f8e6d272bb07a87d9282"},c("td",{key:"9fbf995b80a5345e57872787282fba4ba0455476",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"8a263ee2c5e10ee08c74ed95ec9994b8db78d633",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:"228f2ea64b27e263a0ad371cfc6d0256b40141e5"},c("ul",{key:"96d816b2c4e277f5035602b884933b16e194ee07"},c("li",{key:"87a5f61a3953f9d44dd3a4e66a8c8f38cf65212d"},c("span",{key:"9849d93bf119427acaab44edebbd3b578809c4cc"},c("ifx-icon",{key:"8c8e303fb51a16f7b42780b0efb7b9dbc4b43f41",class:"check__icon",icon:"check12"})),c("span",{key:"e0c62be333216947842263eac5ddda4ea684faa1"},"Provides a customized wrapper and theming for the standard date picker element, enhancing its appearance and user interaction")),c("li",{key:"0b83fe51cb073a4ce40842a96bc89af15894dd65"},c("span",{key:"46ea06d899dc579f5220d5be75723421d3a974c4"},c("ifx-icon",{key:"9b383976a949a207e2b2c00bac10212d57bde81a",class:"check__icon",icon:"check12"})),c("span",{key:"f8d567670be5a5958dea9964cda28db413b70699"},"Cross browser compatibility")),c("li",{key:"e9136d3ec2984e9a91088e2a259f4fb4db024601"},c("span",{key:"6de025645f276f7db3b1b6d4df4cbe31848a3a5e"},c("ifx-icon",{key:"40c2f3faef7774eadba00eaa799630aaeb08593a",class:"check__icon",icon:"check12"})),c("span",{key:"7f755241301b0e6ab14525d04a1e09b0c621fc62"},"Form integration")),c("li",{key:"518d88d2847f5450d387c2aedb637a285b329815"},c("span",{key:"bf1aa1c2fd0163ab5dbfc3b207e998774b25f4d1"},c("ifx-icon",{key:"f540a3ed08996d3ad234ad999f424eb308694a1b",class:"check__icon",icon:"check12"})),c("span",{key:"29da17070ad94048966549369a05ad12c8e83e60"},"Adheres to web standards")))),c("td",{key:"65041b7d9d96629b7d2963e95cc24b1d8d8751fd"},c("ul",{key:"68231112e4dfa9380df78d1db9c7bb26063e1958"})),c("td",{key:"2e4df9d2a69429bb7c81d4ca1c3c068f550f0e77"})),c("tr",{key:"cadc2ef14189795db2289864a4f09dde0f5f3ff5"},c("td",{key:"3544a0c71520ddba4b03daf20b3cf54f8d30577e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"eb479ce594908b6d5aacd965d283aac1155d99da",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-dropdown--development",size:"s",variant:"bold"},"Dropdown")),c("td",{key:"4becabc30289b5f965e4f8b15d7de940a764ee44"},c("ul",{key:"d1bd3587f2d1053ae1573e02dd34d734e19d2363"},c("li",{key:"0e219a76b7dca1ea537374387f8cab2c577b458d"},c("span",{key:"78a36ab09c85749d3ed2ac1b3462d42ba972aab7"},c("ifx-icon",{key:"196e6f3c4bf9c586ff27544894fe6380f9f382c6",class:"check__icon",icon:"check12"})),c("span",{key:"feb107ca0fc75890cffbf33769bdc2a5c9d4ce6e"},"Offers a versatile and interactive user interface element for presenting a list of options or actions")),c("li",{key:"7e86fefca31725b6206a4890bd62727662fa5667"},c("span",{key:"92086c04f93f8de926a618bdc7fd51ac63636c01"},c("ifx-icon",{key:"b97ff87bca4a0604e91108543fc6918461c8db95",class:"check__icon",icon:"check12"})),c("span",{key:"228a7d5b0e0e8f73d912ff1ebe552d6ebabf029f"},"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:"8e722a5246a61dfd1aa8b833c61b87d3320337ab"},c("ul",{key:"f267391b04bd496ae1a0367ea5174ea3f23954e2"},c("li",{key:"bf6e7ae459025080e0e9968b7632d1804811cac3"},c("span",{key:"1e28b1ac02e22beffa2c7cab754c7dff8317e5f4"},c("ifx-icon",{key:"1f8fb0ba51b5b37de9e10130cc9c330bbfeee329",class:"check__icon",icon:"check12"})),c("span",{key:"fe16ad4ab885773057cad7b873a5432359a9c3f9"},"Search filter")),c("li",{key:"1e9805ad9cca9a1ac1a067a4142b629d6489d8d5"},c("span",{key:"f47df0a693c18174d87260f3bccf5df5520000ba"},c("ifx-icon",{key:"46961f50d6fe5b0164f5faa56af34d62457a1365",class:"check__icon",icon:"check12"})),c("span",{key:"84afa508251d685ad5d07b19971bfd6bf83f6b28"},"Header section")),c("li",{key:"fd95002fcc727b048a1444166bd6c87fe5ec91e1"},c("span",{key:"234d8ddc2de1faeecf6212e4b554f9da994b31c1"},c("ifx-icon",{key:"517348a9949106d30649466c84ad2e84c82ef396",class:"check__icon",icon:"check12"})),c("span",{key:"77de0560cb4caf06076bbd1a275f0ba61c78608f"},"Menu Item Divider")),c("li",{key:"8887aaf19754ca3876070cd2e89f0a4c60a95db6"},c("span",{key:"b60f91e7a558c7add2b116b3f87b94ef0f65ea6b"},c("ifx-icon",{key:"ecf259f9a0609dab10da71bfd7edc4fa2296b0af",class:"check__icon",icon:"check12"})),c("span",{key:"c3ad5cfbd22cb9e8beb2bfbb896708fc6add2c05"},"Icon incorporated")),c("li",{key:"e029f047fa05aeef6ad900162980bf7bfac46e86"},c("span",{key:"c33d23f279abb0833e8aaed56af85fb9f7a436fc"},c("ifx-icon",{key:"372ee68258f100ba971104e31b5f3344e28bb289",class:"check__icon",icon:"check12"})),c("span",{key:"45a5c35fae86996cc66190f7576fc419a397ed0c"},"Extended customization and configurations")),c("li",{key:"2baa19e22ea333a004a391ac71e0c23159b6bae8"},c("span",{key:"178cc70ea2f03983179826e4230ebc433a6289da"},c("ifx-icon",{key:"d5d09781f1a29db6a58d33fb83ec46c726cf729b",class:"check__icon",icon:"check12"})),c("span",{key:"65529a922ecc569271dd2ce70b01603f071049eb"},"Separate label trigger")),c("li",{key:"2c439342666bff50d28b0eca4f187c0164036a12"},c("span",{key:"a31b821c1de0f96bced79e3c92ca654f326caaeb"},c("ifx-icon",{key:"4754ce6d70486a81a017e1abb0a50028dfbfea2b",class:"check__icon",icon:"check12"})),c("span",{key:"a459a86d4506c56af0d974a36c4b46bb7778f1c4"},"React, Vue and Angular wrapper integration")))),c("td",{key:"c0e81a77056993aef103400eb2c50865d322b013"})),c("tr",{key:"4e3898f14a6bf25f3b59e00b1bf1bd4e5d614f2c"},c("td",{key:"6130263769e2e565f747d957103d75908d4e32d0",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"00eda7b436aceab70b038e9e4fe334592a9a7e72",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-footer--development",size:"s",variant:"bold"},"Footer")),c("td",{key:"58f9cca0e3b7871b34bb04e766b64c3a866a6303"},c("ul",{key:"7eb6ece87cc9ec1876cb19da3ccb6d84b8a5c9f4"},c("li",{key:"eedc4f8eba056c6fba6c9db043a298acb1d8adf3"},c("span",{key:"c417124774c377b9de2c641c351194d6119253d4"},c("ifx-icon",{key:"0abed78eed155491d384600c4903049fbbdd21dc",class:"check__icon",icon:"check12"})),c("span",{key:"a686444ad65897493178f8e2e98765a0cba67471"},"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:"0e8cf9d915148d2b65518a0b24d4504f039be52f"},c("span",{key:"716edc5f6d91ad2622d06c9640da58d586258c46"},c("ifx-icon",{key:"de1c94e4f1e9a08f8ca9a4c40525219751ebe66b",class:"check__icon",icon:"check12"})),c("span",{key:"9d9c8695b17ef3ddbc9d2b1cf6d76759bba7658a"},"Offers a flexible and configurable layout for organizing copyright notices, contact details, sitemap links, and other pertinent information")),c("li",{key:"98a4335c2233f4d13c3c6d69add6eb5ef4e2281f"},c("span",{key:"ea4be34ded17eec21feed43424deb928fe2809f8"},c("ifx-icon",{key:"9c02fe2311dc7ac27997bddd70c0260d2cfaf152",class:"check__icon",icon:"check12"})),c("span",{key:"3eba5110d76df4f37be9ae57cee72dba300ff1e6"},"Adheres to web standards")))),c("td",{key:"6a7d0b53a7bfb8c7741c0977165ff85b3bbe5511"},c("ul",{key:"72d2d9b8a8b629afb52b30c96bbc291190d22b13"},c("li",{key:"fc72df716f0e9512a49abe4f5e5c577a1dc1bce3"},c("span",{key:"1ef2d18208825ed625b36d5f27270a2b34266eb6"},c("ifx-icon",{key:"aa91458437ef2ca2bac499f51ea84df3ed5b8723",class:"check__icon",icon:"check12"})),c("span",{key:"ff630f5e3324dbade806d5584291ea3e4ecfecb2"},"Small, Medium and Large variants")),c("li",{key:"8c1b6fdb61b5a170025e9da51e8aeb314716197c"},c("span",{key:"46a1835dec635e53f89a60357110245a19159336"},c("ifx-icon",{key:"a8ddfd7eaf25db7fa6df1bcebab493e4b237ebd1",class:"check__icon",icon:"check12"})),c("span",{key:"cfcb6c5210fba5634f83ae03abde91435c5d73b8"},"React, Vue and Angular wrapper integration")))),c("td",{key:"c4e1d12ae92797867900fad3cb16fb867537c3a7"},c("ul",{key:"5dfcd05665a4650a579a2720f2e7672664ef6074"},c("li",{key:"1b004dfff1074078ebe825094c42948f8a7e10ba"},c("span",{key:"23c330856431a59fea96bdc9b3ed94347ef85a39"},c("ifx-icon",{key:"8d859898693eb0c3034dfe816bed4be9b0933053",class:"check__icon",icon:"check12"})),c("span",{key:"0939428d7e843f5071c1f85ce3cee12f519b32ec"},"Customizable and removable links"))))),c("tr",{key:"85ec2281700f726cb9a17bbb2e329bb38399cf05"},c("td",{key:"f0594430a25db07d591dfbaf59d081be09d05ce8",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"1a0041325ec9ca94a83edbb08a5d723332c1ef25",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:"91777b3556066a673d50692d1a2e2e0479f1f302"},c("ul",{key:"432ecdb746eec90b23657f36f33fd38d71e7c401"},c("li",{key:"6e4db1612a42ef42dd4b84898500d02368b66084"},c("span",{key:"30be875b59094c3fba09301a40eeb2fa576c814b"},c("ifx-icon",{key:"24aefd7939ed96d90779d0934d9ea169fecaeea0",class:"check__icon",icon:"check12"})),c("span",{key:"99cb1e9795e13e911252ebc21e3e189f2ee3955b"},"Offers a compact and interactive icon-based button element")),c("li",{key:"6ef1307ced1cfe89d3b0a4259704baa05af11e1a"},c("span",{key:"fbdbba3cd6027b159f30929f6e3071ea92d767f9"},c("ifx-icon",{key:"18011c76252d2f23327244daebd29146dd17af11",class:"check__icon",icon:"check12"})),c("span",{key:"2526c793067c3e8e55ba5b360fa2210484782c48"},"Provides a limited scope of customization")),c("li",{key:"91268f1b16bb97e9e3c9cbda00f81d88ceff6ef6"},c("span",{key:"59c0ae627e549f72d1af7c9c4204d3050a0b9135"},c("ifx-icon",{key:"8482f4d1e9c389829eaaef4d22ec489f7079ca73",class:"check__icon",icon:"check12"})),c("span",{key:"381ad7b709d63fd6fe13d3781b141c4542cb109a"},"Adheres to web standards")))),c("td",{key:"a38528a8508229f5d202f987c5f4ca813b7cd77d"},c("ul",{key:"c536b449c62e44d9719d3ddf0736970b12055cbb"},c("li",{key:"1dc1706f10e4d5d80d805d37e3d2dafe8a148941"},c("span",{key:"6ba8ebf08dcfada9944124d64ac4f7b7e7939b62"},c("ifx-icon",{key:"b265aa936864c13859e24c88ceb2457f505cebee",class:"check__icon",icon:"check12"})),c("span",{key:"f3b59f90ee35e72c608579d94f70595281b8f0c9"},"Additional Round and Square shape variants")),c("li",{key:"a99142d3189be5a0da3d938fd0b0d96e6e785adb"},c("span",{key:"6dde57bb2f38ae18e66c31aefba058592e8accfb"},c("ifx-icon",{key:"6cc9230f603ad6ef2711a8cd114c645544f208d7",class:"check__icon",icon:"check12"})),c("span",{key:"d69fbfa77393c4bfa865cda7f5cb415cc841dd09"},"Small, Medium and Large size")),c("li",{key:"c83906cef9f0f4cae440ed1937c85c4624eaa020"},c("span",{key:"37d193aa5eb472cc4b4468ae21d454bf7cf738bb"},c("ifx-icon",{key:"7457067828f15d48a95e9befee400172c4e43dae",class:"check__icon",icon:"check12"})),c("span",{key:"0fdb75f560ef409624dbe362006fbeca4ec19cb9"},"React, Vue and Angular wrapper integration")))),c("td",{key:"9bb5b495675cbaf3e5036687756130ca948223e5"})),c("tr",{key:"dbc047258d9d8ba2fdb520b61f56a2e95a80aec4"},c("td",{key:"2f94caf7be265caac4f0d707e7d02bc09fc99e1d",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"faee6ec3c314859247d81ed5c0c9b081fd4a981a",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-icon--development",size:"s",variant:"bold"},"Icon")),c("td",{key:"7b1d6e9c659874ba6d792a92bd739d8417e72434"},c("ul",{key:"dd1d1e58f268cf160ce5e415f9d951aba6485bb6"},c("li",{key:"e845485fba1eb73225b8c4166c9351cb975ca601"},c("span",{key:"2b4f62ad053a759ce4bce092eeee1ec96db8fb14"},c("ifx-icon",{key:"f87b0977eed830c43dd3fd69ea8d40e725215716",class:"check__icon",icon:"check12"})),c("span",{key:"2b77bde5391cba32779b0d2a8ff40d91b5767d83"},"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:"f497ab7a191817b5a2d1d57d1f3e278a8632002f"},c("ul",{key:"1af7b38c3fe2d92abe7bb4132fd6a7291772b7bf"},c("li",{key:"c31897dbb0d73843f5c300214d791bdf29742baa"},c("span",{key:"c198acd25f5f8e7d527643529833510adb36403d"},c("ifx-icon",{key:"029f23ad68f3492903b4fbbe2553ae31e372da2a",class:"check__icon",icon:"check12"})),c("span",{key:"756ea453d0273dd2a04fb13c942e9ff5af08e873"},"React, Vue and Angular wrapper integration")))),c("td",{key:"797a609e21ba6c0493ad5472e1518a97609722bd"})),c("tr",{key:"b78cc00071b3b0a6c86bc40b337119ea2c9a6bd2"},c("td",{key:"91909cb53578ad5ea40af6e650ad68bd31bc603e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"f6b389b8249c29abf2d25e70c9b0cdd9fd29657f",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-link--development",size:"s",variant:"bold"},"Link")),c("td",{key:"70c825a55223511b2a45838cc443e8c58ac4490b"},c("ul",{key:"3c430fdc5ff01e8a2316ee68196b7e7b1a7d5e9f"},c("li",{key:"bb2b7d24c9608001fcc3feacd5fc554c5e8f7b53"},c("span",{key:"1c87ca16757f91a25450be66c496b27b252a4294"},c("ifx-icon",{key:"a4bb2be8da41c7df5b9f60332846fbbd21f0cc5b",class:"check__icon",icon:"check12"})),c("span",{key:"fef919c76db873fb325ccd7ee59e2aaf3ed972e4"},"Provides a flexible and customizable element for creating hyperlinks within a web application")),c("li",{key:"de083863d1ef719e4db65becc1c51e5b0576b5ca"},c("span",{key:"24ece0a82f90f2749839887473eef2f8213f1209"},c("ifx-icon",{key:"1a3dea866d371f4804b30594c96c37dbd4a7e9ec",class:"check__icon",icon:"check12"})),c("span",{key:"c0440d2701d9017a5a8db91cb23b3c775bf8b868"},"Offers essential functionality for defining clickable text or elements")),c("li",{key:"e8f98cb73131b271251b833408a14dda63cf519a"},c("span",{key:"348ad5c3de5a24c54ebdc8b9a9eb53ebf1ea9a90"},c("ifx-icon",{key:"a3378ea0a041078aec6e4739809555d1128f7396",class:"check__icon",icon:"check12"})),c("span",{key:"313c5dd43db23501bcb0643c1766c657d2622433"},"Adheres to web standards")))),c("td",{key:"0a1ae80fb860a915f2be4596f5912d4837a42ba0"},c("ul",{key:"aa7c341bf6c3f1cfc7c340cff90f0f27d05c1848"},c("li",{key:"ff035e821d5c5f8685f66981caa36fb60ab8175a"},c("span",{key:"4fc1c15a39888f944b8ee5716bfe4cc22eb9caf2"},c("ifx-icon",{key:"601e4775edd501604d82c8b2ea707a0de2106142",class:"check__icon",icon:"check12"})),c("span",{key:"88ddee3293adb1cde3149ea8ef96fea53f391213"},"Small, Medium, Large, Extra Large size variants")),c("li",{key:"2b35dd05c2570dc5a7a7d78b1769b663ead44d3d"},c("span",{key:"ee8dff47f14114a57b9a3fa04253b5e17c103632"},c("ifx-icon",{key:"10436c4442628e1014435ca0001354b5f49f36ff",class:"check__icon",icon:"check12"})),c("span",{key:"05d8fb804104e9a90283869220c27e1f3aad75f7"},"Icon incorporated")),c("li",{key:"35d631fbc842e334837478b85bdbd01ded164abd"},c("span",{key:"86911f849bfe13af1b2634a903f16f03d1107a49"},c("ifx-icon",{key:"29c08ee1a32cbc1a9c663caafab2099e0a8d6d94",class:"check__icon",icon:"check12"})),c("span",{key:"186198c34f5915377756df03922d48b679594015"},"React, Vue and Angular wrapper integration")))),c("td",{key:"b2e711aebe06bcdb69e555904b2f9ffee524abb7"},c("ul",{key:"2b2979854f722071c95e9ec1c8e362064712df12"},c("li",{key:"7b67b32edb51d21522d8709038106f4882871cb1"},c("span",{key:"473b4de77179228198727ee444182da1a7a26797"},c("ifx-icon",{key:"ba62b1152f1134a90cf5e1a3525b40440b83ebd1",class:"check__icon",icon:"check12"})),c("span",{key:"95f7f714feb5a1c11ac78d514e45feb0e65f2ea5"},"Bold, Underlined, Title, Menu state variants"))))),c("tr",{key:"71359123d33433dba9ca0f88070e84db2cb12ecd"},c("td",{key:"7a8f6a55bda5a8a5a9aed59b997c907ca04cb5dc",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"abfe74d3fb84e10439265a2caa91fd1574fe91a3",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-modal--development",size:"s",variant:"bold"},"Modal")),c("td",{key:"097aec4d3bf20f4d92b5754b12ec7c463d7e415a"},c("ul",{key:"4c600e91a9694d2be9a04779e39de7b1a27330fb"},c("li",{key:"c862833b6da790d93764f9c28807c79d2e857de4"},c("span",{key:"7b7d05e087d711b12d8143ceaf1cb35c2beb2c5b"},c("ifx-icon",{key:"ec80c9a09ed387aa377174a4af246c595f725a53",class:"check__icon",icon:"check12"})),c("span",{key:"7b2ad3688f71a968e4a6d6278869e0f022a90803"},"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:"0c5e11b63101e0cf96b222f47dea8fb97a71c178"},c("span",{key:"53ffd3d463f5aec3bd5ea6ed9764dfc7f269cd05"},c("ifx-icon",{key:"3df7b08d4f3876ef40da24dd0689302b96a51600",class:"check__icon",icon:"check12"})),c("span",{key:"b5ad72c30d86133019a3f31980028f85c35fc94c"},"Adheres to webstandards")))),c("td",{key:"57ba659372749e96f1dd0a7b7eb1e6e836c6c299"},c("ul",{key:"b3b46f5f3bc1fc0d7af6e3c9be93e9b3eb1774e2"},c("li",{key:"619818bb373a833a8d42f896e22b460c44bf9251"},c("span",{key:"7778cf812aa6f4d8da63d4d403a8ffd682abe2a8"},c("ifx-icon",{key:"77f386a466c758057cd73a50efd928a9c875f026",class:"check__icon",icon:"check12"})),c("span",{key:"cfa3c73f02e5a51277cf3033f58813b78fa01cd9"},"Alert-brand and Alert-danger theme variants")),c("li",{key:"351045eb90d7a6a60db730d6e6f45dbd31d15530"},c("span",{key:"d337d4d6b96679865416e91fcaf69c060af3bb68"},c("ifx-icon",{key:"9f26c05bfbce979b58325a07dcad2b4d8feff63a",class:"check__icon",icon:"check12"})),c("span",{key:"57f677e071ef93a7a372d14e17999ac288830853"},"Extended customization")),c("li",{key:"5f521fa3fe2cb2707c5050c355db5a8e59aacb32"},c("span",{key:"a975482f7a983bf51c63b8f2d9499adf3dc4d90e"},c("ifx-icon",{key:"2648c017962405bbaa65892f0177b9b79cc0951b",class:"check__icon",icon:"check12"})),c("span",{key:"8a2404ebd1b494a1b1cd63f38894cc93ec0b44b2"},"React, Vue and Angular wrapper integration")))),c("td",{key:"97ae037ee463995d75907548b61acfb0b324b0af"},c("ul",{key:"14f1c49a9f82b68e7e15f410d2811f69a228d696"},c("li",{key:"cf1dbdf94fa0010c2367fc96d0eeea6db946a8c7"},c("span",{key:"75aeaedb2aa690b6fbde78ed62759eb9bd4fd858"},c("ifx-icon",{key:"135537ef3fc57eca8634e42dd9857e5b56f3e9ba",class:"check__icon",icon:"check12"})),c("span",{key:"4af3f758a7fbccc47ad596bfe88eaeea01d09d7c"},"Removable close button"))))),c("tr",{key:"c61b5451a023d194687cb6f84eae96daa9539779"},c("td",{key:"e483e44d7b71669dbc82646b589563e973392938",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"5fa023031004c7a9941a56a4efb3bcd5ff1b2466",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:"40010f854c15594349aa8390eea85bb30b3c83d8"},c("ul",{key:"99d6a8afd4f671b6c38f6d07e8fbead33c3b2ccc"},c("li",{key:"ff180945cf1f62ea44ba2a46e17388476e83a950"},c("span",{key:"7db08e6bbda92a94de2597ff1f23c50c9e16441e"},c("ifx-icon",{key:"7fd0ff6171db2b40557a87763dcb051b52504ab9",class:"check__icon",icon:"check12"})),c("span",{key:"e2defa625cff26131ba8caadd2f10aabd08a327a"},"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:"56316b72e087bb984fd334d3503af3a5aef1378b"},c("span",{key:"3ffa031978ebf1c83892b65b5f8dd7d5671e3f15"},c("ifx-icon",{key:"38e4831131aaf0d76188854afad60b120478efdd",class:"check__icon",icon:"check12"})),c("span",{key:"f3d360854eb2d3c1aa5a95429387752c6835fe32"},"Adheres to web stadards")))),c("td",{key:"02ea950ee10ae776e45cdb03d4ed111e102409ec"},c("ul",{key:"2af8350c056f45f7e3272b8ae1310f7f7b56c151"},c("li",{key:"e8c639e12daa86b9c5328d342d760bba3eb5b354"},c("span",{key:"1617480d44ae5f913497e7c3a5e5424e47549d88"},c("ifx-icon",{key:"a8b96d3b9e761db92c355f72cec56916db7ad19a",class:"check__icon",icon:"check12"})),c("span",{key:"d44b23ffd06d31266d8ba96c9ee97bb26cb0159f"},"Navbar-profile component")),c("li",{key:"0b55bf992ce960c3c541f6ed6f474b9937b2794e"},c("span",{key:"010652544976dc176814236bcadfd4e3ac00b5d6"},c("ifx-icon",{key:"28ded51ae50d03cc30b63bb5fc34dbd9e94078d3",class:"check__icon",icon:"check12"})),c("span",{key:"155a1cf0f4c8e72a3eeaf4356fdacce17ef511e3"},"Mobile Responsiveness")),c("li",{key:"31e9678a2ef1edc489918eccfc6cfa806777cd4a"},c("span",{key:"df2dd62408ae89e27442b80bd9a7573454caade9"},c("ifx-icon",{key:"ee10e3c6bd2910b1a89925df6ad9d9191a756c1a",class:"check__icon",icon:"check12"})),c("span",{key:"1a64d2e8af802740fe31ddff5cea1c45d7da7a3f"},"Mobile Sidebar")),c("li",{key:"89c472c8212dfa799b90946b07e96278a0996422"},c("span",{key:"234ea1694605fd892f22c3b7d667b711238b7d92"},c("ifx-icon",{key:"743b1034aa7016c95878532c7374b4c251235916",class:"check__icon",icon:"check12"})),c("span",{key:"12abfaf15c529d1b9bd91a0802eb45a853454a1a"},"Extended customization")),c("li",{key:"3ce20212478e6b98005ea9ccefd8224ec3ae8585"},c("span",{key:"c882739a378c8835ac41c34c427d30a56fcc3a9d"},c("ifx-icon",{key:"3f028f05a33ddab491e87a1d482f900e2a02920d",class:"check__icon",icon:"check12"})),c("span",{key:"030c0105537e64c4330f27c1eefe58ea8780f9f3"},"React, Vue and Angular wrapper integration")))),c("td",{key:"2764630b9f949855d2b3719e58085f4c970f4cd0"})),c("tr",{key:"9da06d1de37e346fe7e380a305888d0eaa358f5c"},c("td",{key:"ed1df53b0f1db708619c213958bb3f113b4d899e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"8ebf1abc06922806ac69557f37bd97998a50045a",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:"163dff733348c16755dd6020d2c92d5005f37c82"},c("ul",{key:"8a0b90f1b4335645e9d78a376e2aa00f66b3c9a3"},c("li",{key:"6f605da987d0f473cd5da33ddec73dc3557087a7"},c("span",{key:"7fe927caef94614b14a6cf3f3a3e041731391c49"},c("ifx-icon",{key:"2e058f24ac22977c2a37485cebf942cfbd7c80b5",class:"check__icon",icon:"check12"})),c("span",{key:"42d68160f87bfb35aca278c67580c9d3f2bb5197"},"Provides a compact and configurable display for showcasing numeric data")),c("li",{key:"1e29e43b361275ebd215dc413ef82e91a714c7b2"},c("span",{key:"7fd167556829c87bfce7494d686cb743610e2e62"},c("ifx-icon",{key:"960f12e2390993302d51bb27aa9afa5ec4859304",class:"check__icon",icon:"check12"})),c("span",{key:"0cfe8f15bea202897e8872a2f3e08489a69ee4d4"},"Adheres to web standards")))),c("td",{key:"b0b0c7011a8f0a47197b28d017b52adcf156095a"},c("ul",{key:"5ee0d980f26be4f1350164341222021ac8a230fe"},c("li",{key:"75f428693c8dd6ac739b16ee1aabc15aeac80d54"},c("span",{key:"49cf4103118dcfee848a8a930cdf3f765e319f9f"},c("ifx-icon",{key:"ebcff0c1c19118678bf97240938b2bf220f9702b",class:"check__icon",icon:"check12"})),c("span",{key:"2e883227f02bc87922ba4315466e4e514639525c"},"Inverted option")),c("li",{key:"ec2f621af2fb7112a3be5ec8949f89e2c2b225f9"},c("span",{key:"21474ece682c12fa851979f5097d07c4fb3a449c"},c("ifx-icon",{key:"ecb982e804f6a85bb14aa3eab38da50b02bdc412",class:"check__icon",icon:"check12"})),c("span",{key:"957b8727276a4040882ca6dc3de5896935e88443"},"React, Vue and Angular wrapper integration")))),c("td",{key:"337483ba0e2bab1fa46178fa42c096b500149dbd"})),c("tr",{key:"4bad01b5d00a643584338d31efa63103752e9f1c"},c("td",{key:"6fdfbb8b1a6a434119d450c9bf84fb9ffba295da",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"00d215e2404cccd2b65caa67cbd8aaa3f918da27",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-pagination--development",size:"s",variant:"bold"},"Pagination")),c("td",{key:"283d3946e8919529aa4cefa910d0f49d5f5f3f5d"},c("ul",{key:"d0df30c81dc817db85e91831839e8475d80519cd"},c("li",{key:"6d825881351865f68db8c12f20a4aca9bb23382c"},c("span",{key:"30116030d9cd725605a871639c6b1e4462a32639"},c("ifx-icon",{key:"d8f4208a0071beb1f41c68c95414f71636e3d2ff",class:"check__icon",icon:"check12"})),c("span",{key:"681a4ec51e6891c0e3864ecf64e6afe16d5f6583"},"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:"868dae935ba014b15a3e414ee27a7856cd3d8779"},c("span",{key:"815f66cf5cc1c8b54df184b7da463fb6b8b096e8"},c("ifx-icon",{key:"ca5453796cba5768f54a6e98c2cae6ba8af52bc6",class:"check__icon",icon:"check12"})),c("span",{key:"3bab88979dd97632370628843ad42e3ab960fdae"},"Adheres to web standards")))),c("td",{key:"9edb4571e11ae8b3a266d56cb7d54918a1cc0519"},c("ul",{key:"7224ae69a38208cea2c7656350bb1ad7986985d7"},c("li",{key:"9f2265f0dd41b6352e91f625a9405fdaae5dc956"},c("span",{key:"1d37a5054bba4036837d649a335ca231617458bc"},c("ifx-icon",{key:"c5dbfdd23fee5f119ed2e8d6888662fae1019621",class:"check__icon",icon:"check12"})),c("span",{key:"a640ae96b4af4103789ac780c3d37c75ce9814d9"},"Extended customization")),c("li",{key:"8a20bb20a79b2430f8882c687614b2e2b342dace"},c("span",{key:"de3d46cab54b8911598fac5fd51f181100c266cf"},c("ifx-icon",{key:"bf4b0d5996b535f14b13ccaafa208c129d9f045c",class:"check__icon",icon:"check12"})),c("span",{key:"a105b7a8b893eafa9a82d378663c6c1d9eea4c30"},"Configurable Results Per Page option")),c("li",{key:"5023e8a2f0a3dae400396c39d81ff31858e1d3f9"},c("span",{key:"74a9cb3e4cc3df5416088ab9c2d3c683b7a75d6e"},c("ifx-icon",{key:"9ec3f679233de6e379786fe6971ebf646d1a192f",class:"check__icon",icon:"check12"})),c("span",{key:"81a4efe0b1ce8bf48585993391ae4104c87f1362"},"React, Vue and Angular wrapper integration")))),c("td",{key:"3d9591db1d8769b276474efd61d5d62a5cb91f4e"})),c("tr",{key:"f4e73f12c3326c0e71b203693bbf4005a0a74ab4"},c("td",{key:"6cedf075ba2428d7e71f05ae991b98ec18177aa5",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"cf5bddf8f8f4fc8ba2daee272a85332a6df4e97d",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:"a85deb2684b96ebd9a604f53810c28132e9c53d1"},c("ul",{key:"029f87f361c0a04775b7758daf8631177cfe925b"},c("li",{key:"86fc33c0c3b651784bad4c95f4e27578224f1483"},c("span",{key:"8b5ab3cbcd8e6d9642a5cddca4726ef1d69e1d4b"},c("ifx-icon",{key:"f1edef7a7af4c48981814243b9d1c85aa9cc7b9f",class:"check__icon",icon:"check12"})),c("span",{key:"1a1926b306ead3da63882fc76917a34f753ab0c3"},"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:"1287a3e286de67b242958271905a1f8ce58eb1c3"},c("span",{key:"c05a9de8053ef63d13f91e45018ddf9c1e88bd0d"},c("ifx-icon",{key:"cdb5aac71a510393e0f4463582536984c7c2a09b",class:"check__icon",icon:"check12"})),c("span",{key:"d4704d019e255923b0cbc7fab6dbf60c88fa6d80"},"Adheres to web standards")))),c("td",{key:"71019dd738f607a9ce80bc04046393b3bec63bb1"},c("ul",{key:"ecc5b4f0ce318caa5c8e2c1fd2903488c0b1f42a"},c("li",{key:"39ee4ff8ad5e0c75aeb42725e105f0410a920c84"},c("span",{key:"d603f5f0e4f1553d4d09d977aa6065a7a6e0723d"},c("ifx-icon",{key:"89bc0bbc9c93fbc0fabca2de9129a6f6b8602eb3",class:"check__icon",icon:"check12"})),c("span",{key:"5c0e266e821a1838d12bfd6b7b6e5970fcfbb579"},"Extended customization")),c("li",{key:"c56aac11f3dd220baba64248e8b9cfe2dedef364"},c("span",{key:"0816e3d08185192e182055ab6e443f31c781083e"},c("ifx-icon",{key:"8626c66fe89c83ee7707e54d61e60ed1a8bf7969",class:"check__icon",icon:"check12"})),c("span",{key:"956494417effa796c32ab2beddf7e94612c4d7b8"},"Show percentage option")),c("li",{key:"251d36e1a01a0293021598a1d49a9be863b98202"},c("span",{key:"e819cb7d533e2fad8c713fbfbfbe7d65ad67a852"},c("ifx-icon",{key:"a4b031e5dc458308835ae3cc30a1a98fd5342771",class:"check__icon",icon:"check12"})),c("span",{key:"9403fc87ab163004beeab87921dd034a61467520"},"Small and With Label variants included")),c("li",{key:"23ae44da27fbb68104570ee7cda0220eeba1e3cb"},c("span",{key:"0c21f3927d0d795d25f5ad306243690517fd8d0c"},c("ifx-icon",{key:"0d9e621dc0d7e8d55e44c4f8b865c7977d06451a",class:"check__icon",icon:"check12"})),c("span",{key:"c22a184b961e8310ffc05e3a4848e47b601b4d06"},"React, Vue and Angular wrapper integration")))),c("td",{key:"92978f6f9f69423312676955e6762f28066e0e19"})),c("tr",{key:"290745e4477b9a27b59142b70769f58048d4d02c"},c("td",{key:"c67266a4cc1f3a698e6e95e151a0fc2dc66b3398",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"3576c1544e3b2884de0e9cce7c0c601c0a9ee825",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:"df66ebbc872881c7b9e318b1bdea5a38602733a0"},c("ul",{key:"68efec686bb9b0d4ae38e0fc23b61d61f1a9431d"},c("li",{key:"229d944270a9155701bca7d906c8b98d2a363d85"},c("span",{key:"d8b095a6a5be8f3a4aa6dee353e45da3a2f375f0"},c("ifx-icon",{key:"52024341b346eb466724866b1645f0214130590c",class:"check__icon",icon:"check12"})),c("span",{key:"fd9925aa803fdef9899d5fd1b6797d8179a0f345"},"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:"057933e1c71ef3e40b061829dde0ad1aa1ede100"},c("span",{key:"638aca9bb384feca2acba33ccfbc4fa9fc4052d5"},c("ifx-icon",{key:"edf9b376e59d53d211c77607d24c162ab0e0838e",class:"check__icon",icon:"check12"})),c("span",{key:"0a2557a824b5996c231a10c33878b08201e5df50"},"Adheres to web standards")))),c("td",{key:"f8b4d15ed322550423bb7c580dc9883d2d7201f0"},c("ul",{key:"71a04f179ceef06abdecab96ac84ee84259c09a1"},c("li",{key:"cb1870b0dca9578b5cdc5b40da22c8ac7a42c00e"},c("span",{key:"4c43fedcece389b5e4d7b40c4adfff9df3165078"},c("ifx-icon",{key:"71434297b57dde48f7921e2df7574221bcd8be8f",class:"check__icon",icon:"check12"})),c("span",{key:"19c9b31205f5a93de13e66a2b168b5349f81fa6d"},"React, Vue and Angular wrapper integration")))),c("td",{key:"70e39c891950b9cdd46a3bf56284bafbe839baa5"})),c("tr",{key:"c54c72c3171909e3acc88837a70f949d32561ca3"},c("td",{key:"15380e8b3901d98af332270d9bd19796f239d7f0",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"f6f7db8b442b9be16c314c49208f881d98762fb5",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:"3236bc567739c5a57115b903f980f0e23aa8b2ea"},c("ul",{key:"0bb35217be0d944b96d11c2b1dbfcf6824e4885b"},c("li",{key:"be038cfda78eb76f0e271e7b9888cd40b518d157"},c("span",{key:"c1fc226fd10af7b849d813e19de469f84c08075f"},c("ifx-icon",{key:"6db8e85944062d68cab1cd864503a299d141fcf2",class:"check__icon",icon:"check12"})),c("span",{key:"5c17d1c8611c7d5e691b11ee69296116e3604729"},"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:"09b82dea0125ff7531d158a690370042a29dd23f"},c("span",{key:"1f1062232ca03755610b1af7fb3e3462fb049429"},c("ifx-icon",{key:"182012e53fed3fc032be4ac65453d74abae7a899",class:"check__icon",icon:"check12"})),c("span",{key:"1873b91d4d36b22260064bf150b5316d44d5843c"},"Adheres to web standards")))),c("td",{key:"2407a121aeb669413c407e2405478579dc55454e"},c("ul",{key:"5006a7a590a4d6c7916f0c3c38623092187d5ca3"},c("li",{key:"4f37967889357e22182a0ef67eb14928291e5ab9"},c("span",{key:"be1c9b397fedd33469383d720daad710c621d158"},c("ifx-icon",{key:"e017b22eebfd05caea0164f39463885109b68016",class:"check__icon",icon:"check12"})),c("span",{key:"4df0ff29d19053dd0cd2d878fd880645b5913842"},"Collapsable option")),c("li",{key:"d9b4da907951302d05b4844ebeef6ec5e59b4e1f"},c("span",{key:"6c9d736ebd40a7cc26a74a6d558e06de7e81a26a"},c("ifx-icon",{key:"2c05c96a0ac9f320e847db13e88f28b05b619044",class:"check__icon",icon:"check12"})),c("span",{key:"7556def2c10c5d2b8b026b6e5c23c59459458524"},"React, Vue and Angular wrapper integration")))),c("td",{key:"e9a171ffc532977263a6caf2dd8d4466e1814788"})),c("tr",{key:"29da4f4adab63bfe67c3e52da9d6e9a83be630ea"},c("td",{key:"8622435ef287bf8973cc6d26ca60925162133128",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"45b10f1aa9c473e257ccc312c78dbf38960e6a56",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:"9d4482019d6e1f800c422f9be891f0fc6a2d33c5"},c("ul",{key:"69f6baafbda0b7e75fbe7eddea1876c9a582b8a8"},c("li",{key:"3c36d58d8f0135dcdd5b3944705b7293b80ae6d3"},c("span",{key:"f73e0f46ab4ca260c893336d2b556ef4d865a37d"},c("ifx-icon",{key:"d6067b90b7da047a21a64f9955822671b22aaa95",class:"check__icon",icon:"check12"})),c("span",{key:"1945cc7fc02fab8c5ff9100033f524e3f1c9d51f"},"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:"fc9647716a724135729b79f9eda0e46772dc0c3b"},c("span",{key:"44dcf4d5e01ade3057d41095a1f729485eb060bb"},c("ifx-icon",{key:"c613ea6dafa6f83b328fc85c8259d856338aef3a",class:"check__icon",icon:"check12"})),c("span",{key:"0d5e4ff1500d2badd16621a23c0b2eec2c26ad60"},"Adheres to web standards")))),c("td",{key:"042e540dbbaa1ba169dd52193a1c78b099dfc3f0"},c("ul",{key:"48171a46ba58e182d1da83dc326b301dc61afb36"},c("li",{key:"3e4a4a0ac707fb9e607392d06775de1a3439236d"},c("span",{key:"a3d5f354d6d3cf318829fa8c257d77a7fbba2006"},c("ifx-icon",{key:"cd8addc68e6ea1812b358793d047c47e828203cb",class:"check__icon",icon:"check12"})),c("span",{key:"ce6ea7a337ae9793aa6de6bc42633d95ed8849f5"},"Show Delete Icon option")),c("li",{key:"7a79487eb9500f4564823706734789696860c4dd"},c("span",{key:"b0e57f9c8b6c80d608c090126aa3ee1354c294bb"},c("ifx-icon",{key:"f474160574e12ae60e0f060b9f5133b18f3c11b2",class:"check__icon",icon:"check12"})),c("span",{key:"d46ef5f23eaa418dc47d9744232b9a116d3064f6"},"React, Vue and Angular wrapper integration")))),c("td",{key:"237d965ad8ef4bf362bd903cc31f180d5d9cd56c"})),c("tr",{key:"ea9725031c390ada873c26f6aef1a243b3d7c4b6"},c("td",{key:"53775c7c2996ef20df2df48e9dc4ea64b0cafeb1",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"c1ec8a3853fb332c5b55d092fd3492e38c08a55c",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:"01460ac8902b030b47e6a1343a067390b93a29c0"},c("ul",{key:"e7bf81e0a25012366c6208d1bdd44e642cf8b973"},c("li",{key:"2fd76264702cbd89de2c6dafdaabf8f7fd2fe4f7"},c("span",{key:"505c4c755ab80e57b5aa77c4bd6c9a3ee71794f0"},c("ifx-icon",{key:"446e216915f38a4848de4327825b81043227ca5a",class:"check__icon",icon:"check12"})),c("span",{key:"7f23cdca278d9be97f4a9e79c36fcad29c3d77c3"},"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:"4777a657b06685ef0227ee61e3149142bad9fcbb"},c("ul",{key:"4ac7f4a52192dc631a3aa6900d5523e20d0fd169"},c("li",{key:"6c0068b5ce3faaaf8eb1873fada1261722fc642e"},c("span",{key:"98bc276679b600c704339bc4695521c31df1df29"},c("ifx-icon",{key:"ffd5465571d680a25b21269b0d893ba0603797e4",class:"check__icon",icon:"check12"})),c("span",{key:"1e905960bf658ba24684fcd82de757a7bd49a1fa"},"Extended customization")),c("li",{key:"05291095340404364544bacdcc1c340935ca0779"},c("span",{key:"5c7a7837e7edc280ba53d6f07da393bd201d010f"},c("ifx-icon",{key:"c72727a204da081e645cf8b6eefc5a64fa10bf28",class:"check__icon",icon:"check12"})),c("span",{key:"a5cd5d4223e43f8a5dc2ddafc0ecc6d002ab7028"},"Option to enable and disable the search")),c("li",{key:"12c17dd027688684e39ab158a5eb5ba2b67716a1"},c("span",{key:"0b522d27c083026c5698602bf814eeae4b8ab358"},c("ifx-icon",{key:"4a2992bf1ca236a7a030f0214b32ea44445efc03",class:"check__icon",icon:"check12"})),c("span",{key:"391a5bfdf5704de068cd73977bbce3da00ce4607"},"React, Vue and Angular wrapper integration")))),c("td",{key:"50808780e4981f2fc32ce5df8f871e2fc3cafceb"})),c("tr",{key:"26667fe246c0e48d22e88489f7c0775b2ac0fe76"},c("td",{key:"954e0d8cc93ef8b59e495568d4d1556b7b92f64d",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"1858d4f44ffe014948020f65578d553ae45c0b0d",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:"91be180884788beb3dc70fbafba912fe161a9d57"},c("ul",{key:"7fb1a7019c594c77667130b4861c1945ea8eece6"},c("li",{key:"d4aaa941a623cc5e51a75678f7775f9e16e31627"},c("span",{key:"3dde1428affc56147d4fc1cae43e82e1359881b3"},c("ifx-icon",{key:"e91452861be619acffff7cd3f58331e4395e51a9",class:"check__icon",icon:"check12"})),c("span",{key:"7f397d530220d4259e50820115f9869e8d8d3a1a"},"Provides a dynamic and customizable dropdown list that allows users to make multiple selections from a list of options")),c("li",{key:"101419eb24926e2dadf294ded0c503763ca0332d"},c("span",{key:"4f5421ab2f2f7f2f724fadda536112e20b9f7893"},c("ifx-icon",{key:"d088fe92f00966149a7a81d40575eceee8d7518b",class:"check__icon",icon:"check12"})),c("span",{key:"8855127fcfff4a17bd8fd1eeaf50997be2e6bd35"},"Adheres to web standards")))),c("td",{key:"53f192ab9dcf8d0d350ef4a3442851b0a2f2c612"},c("ul",{key:"1e6091d620a74676d020d782933fed1ac5041f16"},c("li",{key:"bfa518cd3b6af13842a5f7a1f9f063ebea701527"},c("span",{key:"79fef02f0d150521385171f75f09f979bf906013"},c("ifx-icon",{key:"6341dc684c3403223415e53712bf04d76071a3f3",class:"check__icon",icon:"check12"})),c("span",{key:"7931c34734f391663b4819efb8cfb6da8e96d837"},"Extended customization")),c("li",{key:"a4d5e9ee05234dfd28ff21d9fcb23bac03138201"},c("span",{key:"7f3173dc53ce934832ed83c02e373f2cf669c207"},c("ifx-icon",{key:"a1de129f23f992db8664b4335fdd4ab604b66fba",class:"check__icon",icon:"check12"})),c("span",{key:"d5e29196bad81b1a04aaaef280f8a4aadd1c4931"},"Nestable options")),c("li",{key:"4f20f5034f4dec5f0848184040c23392f176b3c3"},c("span",{key:"a17bc48513258685af0cc57116dbe4a98dcaec12"},c("ifx-icon",{key:"c7798eb42eaf8a0797da3b2b2cc6f7dd62b1404c",class:"check__icon",icon:"check12"})),c("span",{key:"59320d453a6135af3aae093469d4182a0b48b8e5"},"React, Vue and Angular wrapper integration")))),c("td",{key:"e0c13143a3a460676f1c3b7093a5692a126b25a7"},c("ul",{key:"2d542403ee0c9a7068c5f1e3e6795728c71e2597"},c("li",{key:"df28d217cd8cb0b689926fd96a84b47ee0ef1d21"},c("span",{key:"2384e48ce82aab5b6d25d6b9cd2b94d9d51b6ef7"},c("ifx-icon",{key:"9ab65905881229c753448ecd5013fd7129166d91",class:"check__icon",icon:"check12"})),c("span",{key:"3b7c340bf519e7492d8ea74c6fdc947ccf5ce3ff"},"Option to enable and disable the search"))))),c("tr",{key:"6637dbc5dfc6df535e823c8ca3d1d4688def4579"},c("td",{key:"891860aec6c8505a50da78dc8ffb91039d9193c9",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"bba05e96234c73f0618d30a30eb3502719984885",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:"9903d5d5d75099e43e4e5005014d53636da3f41a"},c("ul",{key:"2c8bfb862fa158573d81d530f205a3a98b2fb4cf"},c("li",{key:"4189732de9821fca6ec8f4626ee1c99adba10707"},c("span",{key:"dc71d478be216d265295d35457055413f8eafe72"},c("ifx-icon",{key:"280187b098c448d58f009dc97209f361ebbfac11",class:"check__icon",icon:"check12"})),c("span",{key:"7a37a93203ad7f3faf4c354278eaf5f8f9b9a850"},"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:"91d471d0256b95ca2cbae1ce5dcb6073c45a7b0c"},c("span",{key:"e71394cd4c18d7014dd28ec9a90f794997515b8c"},c("ifx-icon",{key:"dec87fb428c2b8b5e5f30bdf30a20d21c5362639",class:"check__icon",icon:"check12"})),c("span",{key:"79ea90afc0e745cfad64c62921c9193108ea0f6a"},"Adheres to web standards")))),c("td",{key:"4eb49d1bea3078fd097784b283dae725e068f11c"},c("ul",{key:"c214b00bf5cf06acf26a911d1f5775e62dbe4a14"},c("li",{key:"30d920f9c2af0c3cf5c75f65cde1533b204daeaa"},c("span",{key:"02f7a2801899f1d0aa27ab3925d7bd28678d0933"},c("ifx-icon",{key:"83349cad38ef0e13ee5da5824007bf5a35078640",class:"check__icon",icon:"check12"})),c("span",{key:"339fa2afbb52bf22e614f8311eed5d4f9c1d6b0f"},"Extended customization")),c("li",{key:"97e60e05c1fc6943d5a7b1b62400011f93ed836e"},c("span",{key:"0ccdf9421b7e7dc5bf1d48f2a4f436c3814a3ff0"},c("ifx-icon",{key:"1805500cf2fd1c7437abc382c2acdb542388aca0",class:"check__icon",icon:"check12"})),c("span",{key:"3b25936772a4690af18999a72acb680493777098"},"Multi-layer nestable items and menu")),c("li",{key:"805398def542f51f61d82c55b04427f46fe3861d"},c("span",{key:"84b110879991da490ffb39304ec6ba5776d0c4a1"},c("ifx-icon",{key:"bb0009e4ee9bbd07d32939d47eccab70ead99cc0",class:"check__icon",icon:"check12"})),c("span",{key:"6c65e2c5412468009374a3aff5f68b8ad1ec9bb1"},"Initial collapse option")),c("li",{key:"afb1b22931626e3faafa9a8774c23a3db5730bc1"},c("span",{key:"e2fe0943ffc089a168df93d26222eec83c89fd68"},c("ifx-icon",{key:"9f34225feb0e43969ee111f54a9d510f17612f10",class:"check__icon",icon:"check12"})),c("span",{key:"bed0634af0c7289682eac298d7ecc21020440916"},"Active and action item feature")),c("li",{key:"6a7d14975ed4aba9aee77b5d21811460f80e8e81"},c("span",{key:"4e8f8d36aa6e8edcdb6b823fe89b57b72e9965f4"},c("ifx-icon",{key:"9dec553c1aa61823cf6bb6d7d03f444a0d90306c",class:"check__icon",icon:"check12"})),c("span",{key:"7625a2a0c3a2e95eb8bfcdaa4be4c242690b77e9"},"Number indicator integration")),c("li",{key:"8ff1bb71c704e69fafbc10b8a3aed47ed6d764e0"},c("span",{key:"0ed5042e2321ad861229c340e3a5f0587536a241"},c("ifx-icon",{key:"876b7508f1b9df6ead0a346af45b29a813e7e721",class:"check__icon",icon:"check12"})),c("span",{key:"7bd54348c7c26c8100b06c999182d1996655ec72"},"React, Vue and Angular wrapper integration")))),c("td",{key:"a9f0a2e1ab88c5e11f50a5e60e4ebee3272a1bbf"},c("ul",{key:"6eecdae935f7ccc7917ff95646c7dce307a13e07"},c("li",{key:"80e6f2d14b39e89943f1b074f7afc3294af14c66"},c("span",{key:"7594b18da48c3d08948b1ab1e796c7d919fdfd29"},c("ifx-icon",{key:"09c0afa6f794359296afc6607bd00de7a2c8df5d",class:"check__icon",icon:"check12"})),c("span",{key:"ea1a1e3bf548ce17cf263a72d3a25871fbca4dd8"},"Removable Footer, Header and Logo")),c("li",{key:"4e841fd39ab048e7e97fa7adfd7149f3d4c631dd"},c("span",{key:"037f9fa24514ee1abc5758c779e7d3a6b44c715c"},c("ifx-icon",{key:"f209a7378c7bdf022f41fa3fbca3d62ec6c32240",class:"check__icon",icon:"check12"})),c("span",{key:"1d6660c4c13ffccdc7e7c59bef2500ea540efa95"},"Removable and customizable Links"))))),c("tr",{key:"a95c497d79457422e198316dba988790b0e7f599"},c("td",{key:"2674b4ab7e563b998d6b943f640cbfa41b637ae0",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"0dadcb02b98b7ca7a966e24e54e5e8b4aea5b9d9",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-slider--development",size:"s",variant:"bold"},"Slider")),c("td",{key:"fc09c6db65c72af3bf6503155ee1dff5271dd4a9"},c("ul",{key:"7b77f097471d449c006c0972208511b7de4eb462"},c("li",{key:"ce11dfc687cb10eb9a3f88588ea5c1b83d67e3f2"},c("span",{key:"02e53316f008ca6a1f3d9c90e4e62bc91751a746"},c("ifx-icon",{key:"ec022bade4fe01c777e1556838c5a97c4a1bdc04",class:"check__icon",icon:"check12"})),c("span",{key:"065fec31970c114f3d70938992e7b242ad257dde"},"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:"c706e0ea70f2e6955dbd059b63e0903d07d402db"},c("span",{key:"e9186d5a498ba4b529b9c9e88d0700934e1d5a3a"},c("ifx-icon",{key:"463e4d1b66e92b4e6654786a9b0a9c40c6fb2e9c",class:"check__icon",icon:"check12"})),c("span",{key:"d712402c16efd1f2d71e05225723dd62839c824f"},"Adheres to web standards")))),c("td",{key:"cc672142834f7179fa7ff439186febdfed0f13ac"},c("ul",{key:"30c0f7daab3d54f847bc4c988eb45ca4f79ee7e4"},c("li",{key:"e205fb7f0ce3c9a71e11de0686d4729d01689ce8"},c("span",{key:"8eaeb35856c6722ee4f4a08a949e1f82948ab90a"},c("ifx-icon",{key:"b12b29b8b9d9749a38b832791773b09dd4fd486e",class:"check__icon",icon:"check12"})),c("span",{key:"3bfdd78c945693ab8213231df4c113e1c0ca51bf"},"Icon incorporated")),c("li",{key:"d98e94ac08b275f35ece601895b175a0f68d6b49"},c("span",{key:"17ffc9291dcdd8fdeed1cd37b84f4aec7dd570ac"},c("ifx-icon",{key:"227c88cd5bd3fd23f100a384065ffd6b344b93d9",class:"check__icon",icon:"check12"})),c("span",{key:"322fd25d56cf3faa425abe42c0cf0f225e8cc3bd"},"Percentage variant")),c("li",{key:"0aa381127414b9c16c6aaa7a33b219be2a208c37"},c("span",{key:"8676725ecace99792e4df80d1fc91911685e6f5f"},c("ifx-icon",{key:"9b651395232652b3179d4ef68fa7421c200fcf1b",class:"check__icon",icon:"check12"})),c("span",{key:"bd17409b934afe8e5fabb9ed27c407bf89561e85"},"Text variant")),c("li",{key:"ebdcf8af09f3e860a76acdfebaba34b59bf6d123"},c("span",{key:"5e20b6ca77dd0b4563ed58d6574751b664002a52"},c("ifx-icon",{key:"6e4cee86f5e140c229d8a39972957ec2f5cbceb2",class:"check__icon",icon:"check12"})),c("span",{key:"1611ece248927b5b791f75b4b5b08723e8cddefe"},"React, Vue and Angular wrapper integration")))),c("td",{key:"e7518af9e2121e2d6697ec45ba1b3359c02d5c69"})),c("tr",{key:"051f4397db5707d1510d85e6776d1f6cc580e8ca"},c("td",{key:"d7ad9535d6d88c5844b2753625c21c1b42fdb977",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"1c7e748b0bee8b3293ac63067356b1a4e44451a3",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-spinner--development",size:"s",variant:"bold"},"Spinner")),c("td",{key:"6d0f2edaf6bcf8658a9e58ec9682a622b9d38c94"},c("ul",{key:"c0529af67a85c190a266ed8bf410fc86cbd41cdc"},c("li",{key:"6642aaa64d57f545989969ea25dfe532b4de6800"},c("span",{key:"ca3a074fcf2f55b896ec67519eb30b9e7b75a6b6"},c("ifx-icon",{key:"457e48b846b2d18690cda5cfffcf92f308ffdcb4",class:"check__icon",icon:"check12"})),c("span",{key:"ddc7c580e3aacf86bfe3d3fb749aa49543b9dc19"},"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:"889d0cbaf013e69c692d3e5ae04f8f786ba945c4"},c("span",{key:"986f7ae5db6b896ae5e79a85d2ee5472bc4c2c6e"},c("ifx-icon",{key:"9b52f460910a0427e3a3b9bed9f7aac1fa29fce0",class:"check__icon",icon:"check12"})),c("span",{key:"980a2e70ccb9eb60d4aec38b121804edd837c1e4"},"Adheres to web standards")))),c("td",{key:"c2bc116db533c8217b43575004391bb18d408bbb"},c("ul",{key:"e9c47dc8e1484ff643d0b5cec82fcc96797d88c4"},c("li",{key:"fb04bb64e9fa707a7cce888d3876fbb45c886cc4"},c("span",{key:"d97763062b41ded1528f92da940294fa7fd961cb"},c("ifx-icon",{key:"85c4b7125ddff7e6cbcd4e0a8024650173027a52",class:"check__icon",icon:"check12"})),c("span",{key:"c09a73b9e68136d6d5dae3a02d5103b3e5e4e758"},"Brand variant")),c("li",{key:"98fbf267f39b88eecd2efb0e46d59d58290770e5"},c("span",{key:"7b79920c947fa64557055afbac3b8c1eafdf47b5"},c("ifx-icon",{key:"c2aa6549d4f90c6e4200dfdd92482681fb3429d1",class:"check__icon",icon:"check12"})),c("span",{key:"bde5e079eadcf641f94835dbde90ea55c96d333c"},"React, Vue and Angular wrapper integration")))),c("td",{key:"b2dc0408189265f638525a3755bfb23710bd5939"})),c("tr",{key:"d9ea33ef702e0c29746744d2d35aed35e2207465"},c("td",{key:"540a6734daa313cae2515eb66243865664b1ae8d",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"ac99f2f647366a5197ad68cc1c1e93da060c718d",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-status--development",size:"s",variant:"bold"},"Status")),c("td",{key:"811fd812921feab92d2896218c9c8d13cbd49d81"},c("ul",{key:"208a2b1e01baad5bec3e0e932f5ced70e19c8d40"},c("li",{key:"62a79003c4aa49d19b44518a9d0d07ff96498ab7"},c("span",{key:"ce2b22e48168c760e96d569c7aba9bd04a431791"},c("ifx-icon",{key:"3483900ea25cdbe3ca899fcc606bab69f2641312",class:"check__icon",icon:"check12"})),c("span",{key:"475b18c663c3798b18e8d7d3270bfca3f8648790"},"Provides a visual indicator for conveying the state, status, or condition of an item, process, or entity within a web application")))),c("td",{key:"077470252d972bba28c7aed324fce207a79d1c12"},c("ul",{key:"69333e14e3ce2920df98f28b8b904c2bffba4ff3"},c("li",{key:"511960322852434bc3c3178797610f0db89bac0b"},c("span",{key:"1d973bda503689c51944cd4610e8750ec3a1f539"},c("ifx-icon",{key:"2f84104dce3bdc8392cd12b881a003793affb8f0",class:"check__icon",icon:"check12"})),c("span",{key:"a409d7b1a8473709a9b2adba6fff3fc7ce41e222"},"Ocean, Orange, Grey, Light-grey, Red, Green and Berry color variants")),c("li",{key:"bf9c5c6906afec756cc81a893884a2983e3cbbf7"},c("span",{key:"9d4f95a25380fe931120bbb2cf4dd8868be1c392"},c("ifx-icon",{key:"ba24714c912bca083543df19627ed1843210bbd6",class:"check__icon",icon:"check12"})),c("span",{key:"bf52c94caa8d71cad73263e1238be6a2fe896f06"},"Removable border")),c("li",{key:"c9955ea05294b1fbc0208769062bad82602e69b3"},c("span",{key:"d547b55a1a5993a29d77bf659c46223981c9d577"},c("ifx-icon",{key:"7457e30ba1c45604e4f0e477e348fed75f861cac",class:"check__icon",icon:"check12"})),c("span",{key:"b5458afeb58792baac18770ac743ff17f12ecec9"},"React, Vue and Angular wrapper integration")))),c("td",{key:"d46fc45255b640b3f3b6d0b5ec854a8aa752296f"})),c("tr",{key:"6e1644c8905beb13fbf1b360c0005143c293f763"},c("td",{key:"9a66457cb692aa440f03c96af7fc40f39ee7668a",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"52b1953fd27ea766467c0c5f779eb1cc0b3bbd82",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-stepper--development",size:"s",variant:"bold"},"Stepper")),c("td",{key:"3caaa3b6f853ae599d659b63bfc13987cb301d14"},c("ul",{key:"3f67f48f119948eada8e13df1abc1d9b64caabf4"},c("li",{key:"7ac4a4b1344f0654bc09e11765abac06947e4c4f"},c("span",{key:"73fd83c52b5668b4891e2bd84271612eaea6b648"},c("ifx-icon",{key:"d05261d72827cc9bee310a17c0619f8ff694c84d",class:"check__icon",icon:"check12"})),c("span",{key:"cb8cc18ad7f7ec33d99c7a0904b56b93682bdd74"},"Offers a customizable and intuitive control that allows users to navigate through sequential steps")),c("li",{key:"dd584509e2c4d7650d2d09ebe2c98d9d2b50a7f0"},c("span",{key:"ad8237ca441bc3941e872dcde9007db4e3ff93a7"},c("ifx-icon",{key:"8c98c7fae7f8ceb9ab87faa3f3c7a28897f1a3a5",class:"check__icon",icon:"check12"})),c("span",{key:"317e5e6fba9e33df95dce7fc99917731c63f4e48"},"Default and Compact variants")),c("li",{key:"4a7e9eaefd2967c6e1d5a2184babc8b840d61046"},c("span",{key:"63dd744e0e2fab75404f30abb01b531713e7e145"},c("ifx-icon",{key:"4e89df70ed67423300fda6383b849e8f7d3005b7",class:"check__icon",icon:"check12"})),c("span",{key:"70512af57b577d4657cf1c32e17bd252cc1c32a6"},"React, Vue and Angular wrapper integration")))),c("td",{key:"ec20ec78dc2d370d6c47d71796e47c41bb123e43"},c("ul",{key:"0c74185670644ded35d6404858fcb84ea1e36fe8"},c("li",{key:"f7c10af849e033bb5ae8681760aecf93a5fbad8a"},c("span",{key:"25339a9b569f513ceef3f85f25c81e6a575f4e92"},c("ifx-icon",{key:"490470b8b9f57af97cf52dd731b1329d448bb5a3",class:"check__icon",icon:"check12"})),c("span",{key:"473ed774f4791b3f56e994162cd8fe26bd9067be"},"Vertical variant")))),c("td",{key:"f190f7ffbf8dc5f9d40ba22971cd8c4504522080"})),c("tr",{key:"1cc512cce550f91936815f7d202f6d10a3d3b9b4"},c("td",{key:"e455884b8557e515399756718ebd4fd5706ab87e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"9ee75b5c201dbc4a1d996c8cb284603f155367c0",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-switch--development",size:"s",variant:"bold"},"Switch")),c("td",{key:"537601cb78626f0ef7ba29517a56e1400853e909"},c("ul",{key:"8b9ac2f9554e543339115f3013dddd0f97710fd3"},c("li",{key:"1c351baf593ef0600d3d34f34462d710626150b8"},c("span",{key:"24594d90985585da4fd5b334718fc02a5f57a826"},c("ifx-icon",{key:"5e82126ae1195627aac67285166104ccd8c0bb2f",class:"check__icon",icon:"check12"})),c("span",{key:"e0055875dd10efb857abc25bb2b3af78d7e42852"},"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:"fc85b2e2a5c16074ba66e9390928352448b6736a"},c("span",{key:"d734f65d012783f44f4534fcc8ea06b1daed4151"},c("ifx-icon",{key:"1fabbe66a741801a4268be77ef4a916a60cf3500",class:"check__icon",icon:"check12"})),c("span",{key:"106a4bd09d8ccff2fb926a000e34a28cd54aeac9"},"Adheres to web standards")))),c("td",{key:"3752f49f29acfabd02d6affddd4cfaeceb69f9a1"},c("ul",{key:"04e3052b92fc25fcb1bcb67ff5a89a969a26771a"},c("li",{key:"a3a4221e9f5d30953fe2e3db36453f7b8a1a9b66"},c("span",{key:"919aea3831894914a58aaf79eb9cbb0252c40c93"},c("ifx-icon",{key:"0fab41530b26aa98fe4262eb16c0329f5d4121b3",class:"check__icon",icon:"check12"})),c("span",{key:"1e0d45284cca2e0a7612adfdb7d8f79a86c634a1"},"Incorporated label feature")),c("li",{key:"a960703e0a59f8b0313d5245cd9c2b9214d714b8"},c("span",{key:"0e021beeddc7ffd89e77d16c272fc0d0e3bb34d1"},c("ifx-icon",{key:"73e432fbeab35a059eb382c51b6b741a0647145d",class:"check__icon",icon:"check12"})),c("span",{key:"ba044265cb932efbcb9e0bc236d3275d9b2aa38b"},"React, Vue and Angular wrapper integration")))),c("td",{key:"2ee65199c1f05ccfe6328b00683dbf0222fef1a2"})),c("tr",{key:"7b039553dcd2e23966ca5d7f1bbf733f1ddb76eb"},c("td",{key:"1c93517b5e3903098532b517a90257d2a97f51eb",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"043a49666d44a724a902b8eb4398382c17975eaa",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:"50b296a54ec5671fbd276fc35b8cf15a06ca0b6d"},c("ul",{key:"8f06fb368a6e0ec6e90b2692b6cd02f30c3f7343"},c("li",{key:"c51d599a722bac2360f631d34c4250cfa2844412"},c("span",{key:"7cc419e0d9893efee10354639ce007d9709d47c9"},c("ifx-icon",{key:"7d631380ef24f32bb8c791c6da3736b44e913c5c",class:"check__icon",icon:"check12"})),c("span",{key:"4c14a5df5af52489c1a170e9535625279b618970"},"Offers essential functionality for organizing data into rows and columns, allowing users to view, sort, and interact with structured information efficiently")),c("li",{key:"3a277eb8c2c801ecaeba5321e162856649fd37ff"},c("span",{key:"8a06b0d2025547d09ddfb9f9383eaec469bc1fca"},c("ifx-icon",{key:"46bbe776b010956e728fee82786dedc320fb51ff",class:"check__icon",icon:"check12"})),c("span",{key:"2786855e8b506f06bfd35a6b7c9df1cd219f63a3"},"Includes basic features such as column sorting")))),c("td",{key:"1f628db26fc818c688d5906a91248649ab528a3c"},c("ul",{key:"815eef98a1880d8d09c04b6a6e65faa9466c672d"},c("li",{key:"134a1320e7196656b53dcc02b973e586e2ab3863"},c("span",{key:"ba5ed8c55d2549265a7ee69e236ad2347e7ba1c4"},c("ifx-icon",{key:"3030ecc5c1cb97e5cad905ed2767b72ef1a2c92f",class:"check__icon",icon:"check12"})),c("span",{key:"ab4b1d86e3df1a3ce12f0c68937b1491a1929a0a"},"Compact and Default variant")),c("li",{key:"d24bb3e755d46d4b6a23d436ce8db2d7beea364d"},c("span",{key:"c1933c7a96aaa00dc452e891655ae6881f31fe8f"},c("ifx-icon",{key:"0de34e18c6851c4a3607e7431ea2fc0ede394ee1",class:"check__icon",icon:"check12"})),c("span",{key:"0c66a68d0db131215703b7d5fcda823bada74a61"},"React, Vue and Angular wrapper integration")))),c("td",{key:"6e16f9a1b8f86e4e76b311ef759493dd2b616a4a"})),c("tr",{key:"a8fa79133771ee0937fdeeffdb4bf0c8cee19331"},c("td",{key:"a6724de0ff3d5dbe61e7eb78eb2276c0ea48ca3c",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"2f91a1125318ee2826c1dfe63ed1ea49eddb8e18",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:"efa871613239a3909dc4be18ba60fbc6b78a6f34"},c("ul",{key:"5f847403d22bae31b8bbec390895b02d2ee07f0e"},c("li",{key:"12c3f2c52622b7bfa4dce027cb25650c22b48af1"},c("span",{key:"13e9039fe3725500c61d1f7a2af050e348fc5e92"},c("ifx-icon",{key:"8114d9315604dc9ffd8566b1dd53a9e4797623dd",class:"check__icon",icon:"check12"})),c("span",{key:"af27c29139f962008d02f3f6971a5f6f9d0554bd"},"Pagination")),c("li",{key:"5ccc6d03564788bdf10423e0184f0c0dbfe8c832"},c("span",{key:"4870a2dae6341f59afedbfbda8fbe94ee5cbb8e7"},c("ifx-icon",{key:"cf312c3a60d5edcf03038596a94471764024e42e",class:"check__icon",icon:"check12"})),c("span",{key:"1dedd7d46f04bea4aee9f13ea10c68f2544d5304"},"Sidebar filter")),c("li",{key:"bb7fd91f5915425c8d0ac7c768b798fbd24b1f68"},c("span",{key:"8e5dc2eaabc87fd9f9d8d1eab276c4f28b059986"},c("ifx-icon",{key:"b8674edede15a3f212d923b2e7e46886ee9e74ec",class:"check__icon",icon:"check12"})),c("span",{key:"f2b3fca53b6f20ea9f8aff08ff2385bce66cf219"},"Topbar filter")),c("li",{key:"85a80f1329739c361aeda5068e3dfe0d7b59c0f4"},c("span",{key:"53e884d7044791ffead8c7d787d3dde56852dcd9"},c("ifx-icon",{key:"444726f312a736389206a905d1f65b18e65a36ca",class:"check__icon",icon:"check12"})),c("span",{key:"5e91ba567ffd443afdbff3dc08724ed9bac86284"},"Nestable buttons")))),c("td",{key:"4d5a316db37a36f864e50e80e19d4473a4ec3540"}),c("td",{key:"e9f4388d0e0939263c1be5f7627793b6d9dffe99"})),c("tr",{key:"6ce10b2c5c662c1046c3eae3eae9b293ee801b60"},c("td",{key:"099e85cb8910168ce2dc495a7484aa13f6b72f85",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"02efe310387a53e39b13f462e533cce93353897d",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tabs--development",size:"s",variant:"bold"},"Tabs")),c("td",{key:"640dd56807bcb5d97ab909558c53388d24295fb5"},c("ul",{key:"7fa23f4e8a947a8f4e39c8c1e8bb8c7ce7816721"},c("li",{key:"21bcbf6170c17bd054d516869cfe4b223006ab6c"},c("span",{key:"6b79955c42112765debb93def97612ce848bb90d"},c("ifx-icon",{key:"b54ba950475cf936ac9a3960fa2752c5e81e7673",class:"check__icon",icon:"check12"})),c("span",{key:"beb29518ef6659473414c684624476ef4f41a4e8"},"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:"b906945d947c330aa5253e2dc7f849a0907844fe"},c("span",{key:"20fbbcbad741ae189ffa2a8736615e7b169edb21"},c("ifx-icon",{key:"0a7d436cbebb70ef0df29da652132212a83057bb",class:"check__icon",icon:"check12"})),c("span",{key:"98551cf695e2f1fa5d90db9a5f75771053be5b1f"},"Adheres to web standards")))),c("td",{key:"3070daac52b20cafbe34e27208ae88ad3e385a5b"},c("ul",{key:"97f0cfd07836332656ecd4465b26080935caba4f"},c("li",{key:"96515546503c1cc45130f5135deca44fa4fd3a76"},c("span",{key:"1b89ae160b334bc392263a50e36dc42e4ae811e5"},c("ifx-icon",{key:"e811ffa967d0aead9a52b9048b784f7dc45a7289",class:"check__icon",icon:"check12"})),c("span",{key:"2d3e736bbb82045f6b32bd441b1aaf9ba8d64a6a"},"Horizontal and Vertical orientation")),c("li",{key:"aefc5c282191d97caf777075454ba4788289f05f"},c("span",{key:"185929c8d18c1c4f78c2e112c9b5f4950155aaf4"},c("ifx-icon",{key:"b9ba8781c72f5c06a19f7f8fbdf41e385335417d",class:"check__icon",icon:"check12"})),c("span",{key:"6a051fee8b617af5640ae847b2ff1a3188d44f9e"},"Extended customization")),c("li",{key:"b1c8bed7196f56f03bcfa2d274398943122018c1"},c("span",{key:"e023a4fdf6bd889a18305110013a0e7cd56fce2c"},c("ifx-icon",{key:"531f1b7b97c30859eea5476cb643b4b29d99a804",class:"check__icon",icon:"check12"})),c("span",{key:"49e6acb75c8a1029c70aad7531a0400462a3c950"},"React, Vue and Angular wrapper integration")))),c("td",{key:"d49a2b9fc9a1d44bd990b3946990b4a20bfa9336"})),c("tr",{key:"7da7e58df412766b3128af1372248b292bdb9878"},c("td",{key:"19a3ccb4305e8bb288dc18327cc07ad788ec973a",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"1db94d61724b790f4e528d51c28f8fb8d1504bcb",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tag--development",size:"s",variant:"bold"},"Tag")),c("td",{key:"ca5154aa325a2c848c74b76f2f589fded241209e"},c("ul",{key:"0dd572a0c5a15eba96ab767756170bfd2d7f133c"},c("li",{key:"f16ff94fea358ed5e62bb727c6907fa3b3b958cd"},c("span",{key:"2d40a694b687b668858bb16a89e40dd946ff77b5"},c("ifx-icon",{key:"7064f7c66ab5099533aadcb893e0a6d05f81cbd4",class:"check__icon",icon:"check12"})),c("span",{key:"28dd6ea9125bd19b282a4140d737b8198adcf11f"},"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:"3c63cec055285151075e8ee39941ae86c87acfe6"},c("ul",{key:"8a6b65062830e5fc417a62f300da853135fa65bc"},c("li",{key:"845be0a7d890bcc2b42f22990df219eaa4bd5b3a"},c("span",{key:"d9c469a6ac620a8c7886aab3df812379cc13dc0c"},c("ifx-icon",{key:"bdf975cd5e05066c7ace6960f99a5cf2b7f8e444",class:"check__icon",icon:"check12"})),c("span",{key:"96fa32b3c76314ab95838f4909397b121c40ec8c"},"Icon incorporated")),c("li",{key:"de54712bdb0fa9015e2fed48e83a8cbb00c3b910"},c("span",{key:"e40bf08951378fedd2345a9f503c5b865003d6c4"},c("ifx-icon",{key:"23a92d01bbe0db223b34d2b97c9e84bc8d005e8b",class:"check__icon",icon:"check12"})),c("span",{key:"ea727fe68ffa79f72ebc63a2ab27241dd0bfae33"},"React, Vue and Angular wrapper integration")))),c("td",{key:"f25bcfca5ffdc4e19919519aa827afb791b3c305"})),c("tr",{key:"82b1e5730638424ce3a3a3ea39895950e17e3022"},c("td",{key:"60aeb5293814e39f188650eeed393362e713815c",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"582ddfb76d781c2cbfd644414ba4daa90371bfa9",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:"0b627edd6a4401dcdbe64fe08ed3893c0075056d"},c("ul",{key:"cab6206d986e0cd4835523dd4bd96566707145ea"},c("li",{key:"6d15f567a93c1db1f36eeb353ba0c74d9b94edb4"},c("span",{key:"a4772d13372aaee0759b2bb986729de260444469"},c("ifx-icon",{key:"e7fb35095695b5b93117cf2d2023a3352c2912b4",class:"check__icon",icon:"check12"})),c("span",{key:"8985a895a8d344af37cad045be5d4778c091a8d6"},"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:"01bd0b2e17817767af44b22ff3ad9242462de683"},c("span",{key:"3c4aa89c1313b8622e54bc46e5696a26370133d3"},c("ifx-icon",{key:"69940e6cc7c6975aacad130f9d7fc5a1df1b7545",class:"check__icon",icon:"check12"})),c("span",{key:"94a8700afb9f8406ea6672b7a216f525c2a4ba15"},"Adheres to web standards")))),c("td",{key:"f9d107d61870e668c0ea7d91f6b5b1a5697a43f7"},c("ul",{key:"d8e0b9df746bc1f63b757fd2ea293b8d6cfb383b"},c("li",{key:"3a440f45fad133cdad0be8e06110847aae93bff9"},c("span",{key:"17a5697ba0d007ae9eeb387994795522c8e32dc6"},c("ifx-icon",{key:"75abb7a44b6ea6ecad251495517f3f3a52ae5093",class:"check__icon",icon:"check12"})),c("span",{key:"b7c7838df4c5c64b435115845efe83a7ca889b7d"},"Extended customization")),c("li",{key:"9e6b6050d5c6e8df4e30731a2e7a05fd533789fa"},c("span",{key:"d64fdd51c98493a749a8ab853e6707f4c4c86be5"},c("ifx-icon",{key:"fbaa444edddb9421b9c067fc2f04d5ab1ba29e54",class:"check__icon",icon:"check12"})),c("span",{key:"d26cbc4278e81fdf62e5fac3a59a7ce1dd05d78f"},"Possibility for icon configuration")),c("li",{key:"71e55d06e89a61f50d53ccbf14c5025243bd0677"},c("span",{key:"d6bf483a1a5f59235acb56292591ed2ee867081c"},c("ifx-icon",{key:"6e56db7991839e6223ded681915de58e23619dc8",class:"check__icon",icon:"check12"})),c("span",{key:"f1223c9987819550465ceb8fcf7ceb9b85ae3d9c"},"React, Vue and Angular wrapper integration")))),c("td",{key:"2beaed543aaeb206ce56d02a74b04acf9385a849"},c("ul",{key:"efa9b65b334e7cf5d2ea5dbc5e9b62b4b0bc659d"},c("li",{key:"e26d818f427cb860943237aef04948a7bb3cfeba"},c("span",{key:"9630a3e1b323f0072048ebf625cad748d2407d52"},c("ifx-icon",{key:"8ab001016f58bec85137a9bd11630f995dbc8a27",class:"check__icon",icon:"check12"})),c("span",{key:"7b3f4f895e8eae0e463bafa4bd6037eeed3516fb"},"Form integration"))))),c("tr",{key:"66d3d56a5c44b6e06dc27ae89476c17ba56056a4"},c("td",{key:"60441dba5a1b0ec092637a5f528d3576a92ce9bb",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"b967275e377176b089e8298b3fdc64e5143aaafc",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tooltip--development",size:"s",variant:"bold"},"Tooltip")),c("td",{key:"8870d3ce3d21a929911c39336c15ab8d05211834"},c("ul",{key:"b44782e1be23e3bd671ac62fee62a5d4339d763f"},c("li",{key:"c77fe843163d02cee804f4996fcf6fdd4161d19f"},c("span",{key:"2d8003a7c809945e227a4feaa36cbc28214dc046"},c("ifx-icon",{key:"cf1d42e7aba07abfdd665ed4f8918a46838acf79",class:"check__icon",icon:"check12"})),c("span",{key:"7d9c37d3f6e65eaf0eee84aa04edf1ed1af00dfd"},"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:"717a42a3bc8ae503a76d4db467dea50216314f76"},c("span",{key:"4d777ea383135648e9173d151772fd51b033adff"},c("ifx-icon",{key:"b89ed10847c878074652bf1cbf08837ad5b7c06d",class:"check__icon",icon:"check12"})),c("span",{key:"3a3d7ea2e66e99ea6fafddbe18e7afd70a6da11b"},"Adheres to web standards")))),c("td",{key:"fb42821c7d4169868fb073893ab298481097eacd"},c("ul",{key:"fdeeecbea4ea363a93d984d9f1954746e0975fa7"},c("li",{key:"7ee9b3b30bffd91a3d77ca490d21a4794118b871"},c("span",{key:"69366234fd8f0b9b0de3c641d29d8cfdf93f9dbc"},c("ifx-icon",{key:"5a539e1aa2f375c7258e3fc9b5e0d3f3247abb03",class:"check__icon",icon:"check12"})),c("span",{key:"0b30179a8deb5d956438f721e1bb89d750642458"},"Compact, dismissible and Extended variants")),c("li",{key:"d8d2908d95211c9243ae5ac13b6004868fcc0546"},c("span",{key:"0cd33f6ef52b25ea8a4e5a938810760aa27d0b45"},c("ifx-icon",{key:"b25c553b20d29f586cfe63208e995a44bac26072",class:"check__icon",icon:"check12"})),c("span",{key:"ac26889094a1e26eeb80897ba37705d1278510ba"},"Auto-adjusting position")),c("li",{key:"e8e521149b91f80d04ba709e08df157f8da58d9f"},c("span",{key:"6d81f918441a26e07bf1aad4aa276c26f6f64386"},c("ifx-icon",{key:"0ee4479f6286259ce250082057dbf096d3b61e8d",class:"check__icon",icon:"check12"})),c("span",{key:"9f3ce17d71f9caf59bafd59a1f6731d3da084029"},"Icon incorporated")),c("li",{key:"3e19419fc4b2b00ed2276bb1fadbd13dff2efc8c"},c("span",{key:"2602299bc1e27b0368e446f70dda4f0b9f42894a"},c("ifx-icon",{key:"4211f6b5f045523f1f5c513dfd1cfdaff7aa9f65",class:"check__icon",icon:"check12"})),c("span",{key:"2f7d478e424612e5ee62fd82cd11a50bd6909a1c"},"React, Vue and Angular wrapper integration")))),c("td",{key:"81382e3b4c31b6612ddacd7118ec530231ad8a90"})),c("tr",{key:"56878f209fe6633baeb97793df3f39eb92a569f9"},c("td",{key:"8bf484246a1d02a7c6973386776d474eeaf36028",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"a6d91b7d965243c8ad360169997fca1d962eb899",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-notification--development",size:"s",variant:"bold"},"Notification")),c("td",{key:"0de800337155f963e9dc4746e81975911f05441e"},c("ul",{key:"26997e64b01fc937181da4d246f44d058a2cb33b"},c("li",{key:"8fa89077c3327283cfc31e8eb1577af728ae9ee9"},c("span",{key:"7750ac3f855240960d8fc13f3262a77813cd342b"},c("ifx-icon",{key:"123e813646ea04aa27425760a766317d08f44468",class:"check__icon",icon:"check12"})),c("span",{key:"c9533dafa80a2055008266c56f6c5803809aef70"},"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:"ba0632f108106d26e0a9d5426a834d92d5669bfe"},c("span",{key:"3fb105275bcebcc49f5abbb62dacb74cc9d42865"},c("ifx-icon",{key:"c792cf9433cd281fcc0400c050f8bbfd49647b47",class:"check__icon",icon:"check12"})),c("span",{key:"9a1136d25de84643d0c3d95c12143a272956933a"},"Adheres to web standards")))),c("td",{key:"7f514ffad7093941c2e974208af0786feff9c5c0"}),c("td",{key:"d7e376a5f739894c0a280a3aae461398b2acf851"})),c("tr",{key:"220a5e0889ea02c3e50257ed280b091b5c8f7d02"},c("td",{key:"86aa8e07b3b06f17c1304203bcf63da0a344b81d",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"bc841a65c8f8306b47b8e44128d774819b4268c2",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:"eba7f2066a6ae2ba498c7c05168c27c41e0f10b2"},c("ul",{key:"45fd0cea2fd88f08cb9988b834177716fd1557ee"},c("li",{key:"a71f86e9869fe2fd5f2a367921293812d54c9c1e"},c("span",{key:"d8edec0f4de6179c8e68c9ab1ba81cbc4533b45a"},c("ifx-icon",{key:"335912a7f7d375f74c60603122c7938d4265f6a6",class:"check__icon",icon:"check12"})),c("span",{key:"1640356cbc1dd568bc87c9d0db16c74acb5de9a3"},"Provides a flexible and intuitive interface for dynamically switching between different content sections or views within a web application")),c("li",{key:"0db766f95be27add7b83eab1c429e6d46fa91b02"},c("span",{key:"7adb4f59c1468c3826fcd5f87ab6f929703e199e"},c("ifx-icon",{key:"576783255e330e147009133ec3046eb4a9d12f34",class:"check__icon",icon:"check12"})),c("span",{key:"569b0b52789715c7cec57cdd0e9b6b8350ed1095"},"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:"98363c886d050563318b61c60bc1ba6e5d50527f"},c("span",{key:"6896e3129469c4c77001109bf92fa83e7989d006"},c("ifx-icon",{key:"4ca1ec0a5f8805d85cbe426a653fe3cd69c896c3",class:"check__icon",icon:"check12"})),c("span",{key:"43650365ea688e194b7c32d0148e039019acc688"},"Adheres to web standards")))),c("td",{key:"c95c9cbcafb3db85a50be4974a5d3f05a862f76b"}),c("td",{key:"7e66eb27044a007e820b977b74bbae1cffacca4f"})),c("tr",{key:"119885ebc8ac0684803828579b8a231c758162ea"},c("td",{key:"ee0831c534aaab5683e0523353b1fba5cfabb2f9",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"4391eb111e6ac9bf56f80d158cb5da99a77e7a51",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:"150437a1b2dd1df815c5afcd9a127c1b4be95302"},c("ul",{key:"229ccc3c5e18ed0816666cc119ef9def0cd96bbd"},c("li",{key:"56321caec30bd35657ad93e7702f49e5198ba1d8"},c("span",{key:"78825338ab33ec3952b1742a7a8e210773d72152"},c("ifx-icon",{key:"3aa29b79feb2e98fda7c53a084dd3f0bfb6c0a73",class:"check__icon",icon:"check12"})),c("span",{key:"a29f1eeb1adbd658b2af24ba7b185aef56e1ebe0"},"Provides a clear and interactive interface for users to make mutually exclusive selections among multiple options within a web application")),c("li",{key:"55eb4a152ff630eea9872fce4aac7f53a8fcccaa"},c("span",{key:"b4e5193c02dd89b743b6fab9524bf979d188391f"},c("ifx-icon",{key:"3f01c74ba9466688e20c0df751828e0b67334294",class:"check__icon",icon:"check12"})),c("span",{key:"37a7ce7f4e776cd33aa6774a251c1839e2ffae7f"},"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:"32f1595d5296660670829727eafcdd0b19f23963"},c("span",{key:"97ddb2a02704e88e4ae79c16bddf1dcc800b4b9e"},c("ifx-icon",{key:"483bfc8ce86e114988e101dfb202b78b73ae8305",class:"check__icon",icon:"check12"})),c("span",{key:"70a3699d531a235f88476acf81d48891dadf0c8c"},"Adheres to web standards")))),c("td",{key:"827962c0529d26f3739eb9673ac251a5135b71dc"}),c("td",{key:"fdf69e0f4efc456f7bd846092a245481a53f4226"})),c("tr",{key:"924ac55b6557a0b3445096ba81f29a785be8dcd3"},c("td",{key:"f6b8686c021806e812d068491907fbd0fc938d1b",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"008d37db68684bb7daedc3c53ef106654bcb268a",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:"d1539202c6df512bfb71064bc38b95c4e087f2f3"},c("ul",{key:"77c331b7a2768722a105be02433905428d4017fb"},c("li",{key:"d2e8221c8ae88a9b3385806ec001ed9e19661e08"},c("span",{key:"9222e4e8d707b50902da58880a72e3df3f7cc811"},c("ifx-icon",{key:"64453fa102a19c64e87cfbd500fceed4c84b6b96",class:"check__icon",icon:"check12"})),c("span",{key:"8fff2fe92098ff362e13368db674670e8bdc9eaf"},"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:"b9603ce065ff72161c2104e6135a510bff7cd7d0"},c("span",{key:"25e9610073e76f030e3871ab6b43cc2e71de2d7e"},c("ifx-icon",{key:"db46f6256737c84e83c0291777c12ae08bdbfd67",class:"check__icon",icon:"check12"})),c("span",{key:"e9350960901640ae46f6b1a047cd0525be66ca7f"},"Form integration")))),c("td",{key:"3d1d6cb075a7cfc7bc73c17fbc8a626d534b1306"}),c("td",{key:"74dc1e4656d4a674b03efd986b0e4edce464cc68"})),c("tr",{key:"92905e8e39c1ff7d321dcb80c396137abdd83e54"},c("td",{key:"88d9f2fbaee1ac4a138e75f71ec603c1d5eff21c",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"aab58129f15bd6651927bd808e9cbb58f9e0b418",href:"",size:"s",variant:"bold"},"Card Group")),c("td",{key:"5ae97b1886cfb2f4fecc0273e44f56ae62d5e7e0"},c("ul",{key:"2b9fad548edeea7aed97ba8ddcc0a6dabff351c8"},c("li",{key:"fb7e5d6e5ef249d35398d1600d9fd8bd9f8c45bc",class:"planned__component-wrapper"},c("span",{key:"4754e3b8c0b5f6764d3d95e645f67d87887ed6ac"},c("ifx-icon",{key:"92cc6538a2752d401cb2476acd2df0c38bf45dab",class:"planned__icon",icon:"clock24"})),c("span",{key:"2040d76256ae2d66f2cc6de789263ba97c9224a4"},"On Hold")))),c("td",{key:"f5e2e5ab43e4eea78fee545678db2cd7a0ef9cd7"}),c("td",{key:"707dc5c28b469fb11f43a6888e5a57c99bb54680"})),c("tr",{key:"6f69e1a69e051d62c33ec0d49b10ef13048f6413"},c("td",{key:"22ad05e2865e566ecee90edc4e2babf42a426147",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"0d388ed312a71b1848a32d023f0d80b2e5fa5040",href:"",size:"s",variant:"bold"},"Advanced Date Picker")),c("td",{key:"b942f37f8e681b2a8649e82cd874ba8ecdc27f19"},c("ul",{key:"324c1040c67a06590319ac3ff19e459f2d9ab963"},c("li",{key:"7a5a71f2bd1b2c853e24bd3b74d4a0c8c5dd6005",class:"planned__component-wrapper"},c("span",{key:"34c390cb934b452f46646ee9154d0571bd8fcf30"},c("ifx-icon",{key:"d4c5400564e835c66de82b4831d6b3abd7d1136e",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"dea7360c02ecacdcac565bf96d37ea9f24877b54"},"In Progress")))),c("td",{key:"6d3bd13000ada6b608e30a4ca47345bf1b27539b"}),c("td",{key:"ff7fccc7f36be1af0c6c550e3c7b65fa461d68fc"})),c("tr",{key:"47ba22f0fc047d419aaf4dc7d416492f882e1d3b"},c("td",{key:"a60a3b017f84d3f2d126fb646537cf347b9d7c1a",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"31e361c957b4e2925f03fbf6f5b82ddcc0bd82f8",href:"",size:"s",variant:"bold"},"Upload")),c("td",{key:"4b4184635839b6464d05ff6902347c28ae097074"},c("ul",{key:"24a8d34888216d66ddc42ac509277d89714856df"},c("li",{key:"5cd2a32524ff59ca2ee2c19f7993f85b674f850f",class:"planned__component-wrapper"},c("span",{key:"bd578d41d8fdc2dd4a34eee4418d47c69bc3556e"},c("ifx-icon",{key:"95bc0315acbf1d02834b3d24764dcf3eac7e69f5",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"e798720c9ffc1c37833b4d15f94fdb42ce0e28c5"},"In Progress")))),c("td",{key:"3faafaaca5c6f6c023feeb7c12dc3d5da005357a"}),c("td",{key:"afd9cf73a533fedcb7bc8d62e3fac85487b9d367"})),c("tr",{key:"28c49655c1d7d24c8f0d11ffb02745a7561566cf"},c("td",{key:"3637165cd3029a1c18e7a8360cde4ad7887b5d56",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"ad9ea525033b0fe6bbf6ec8e3a04a3cba96b6aed",href:"",size:"s",variant:"bold"},"Checkbox Group")),c("td",{key:"2a97ab3e5152cb2fe4dd23d2de44c0d165327ca2"},c("ul",{key:"0488b3c9da40f6b31e35501e9117fb87c038c45f"},c("li",{key:"314d3e7a7565b73e756b47a83b419f79083ff16a",class:"planned__component-wrapper"},c("span",{key:"962b8faff5a0dbccef8cd0877943acf0111788ab"},c("ifx-icon",{key:"e8eb2b2b3fce58c126d3a8e994a6e5b721f85179",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"01c53329aaa4203950e3664017c28b3570c07a2f"},"In Progress")))),c("td",{key:"3ce2362901c9463d5b623faff0f1d1285ddaa5a6"}),c("td",{key:"33bf742a01781beeecdeb6173909e412d1a527f4"})),c("tr",{key:"96b6c3d04f1eda4a370602da8cafed8ec8533293"},c("td",{key:"de17d897441e4c04cdbec83e3819d58990283f23",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"83574bd40e10513dc7e89bdb1ee4fba8bcc29939",href:"",size:"s",variant:"bold"},"Radio Group")),c("td",{key:"587de9fd8dc8cd808d01f0847a23c180b981cc47"},c("ul",{key:"3e2b735ffab10228e8ac7f68351c645337f12c2c"},c("li",{key:"6b15f5ac0656f98cefd1bf77e7d66b63ece4fe3f",class:"planned__component-wrapper"},c("span",{key:"0cfcb35c35949b5f6488bbf5cdd67a6d2ad995f4"},c("ifx-icon",{key:"e1b2cc2f12bce8c1dd6e33cf182617cd09d50c48",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"2cafa57559f9f248feea7e6eb988922a434b61b7"},"In Progress")))),c("td",{key:"4b7cf0d6d971fed2b8646ceffed3e80c352b11eb"}),c("td",{key:"2fa2d79dd82348574b7d2b0771e8f31748ec0bd2"})),c("tr",{key:"e012e51ded4037c15204d89f8a9f95327b404abf"},c("td",{key:"157d98c86fa7452bdbc053a5753cd4b145a77463",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"cd401d6ef26fb9e07f9491515c549f655bcd0610",href:"",size:"s",variant:"bold"},"Tree View")),c("td",{key:"8746d03ad5397fdcb257ad79fd3cdbcbeb47d882"},c("ul",{key:"0b975cbf4913c779a2fe176dd0a512dd26d2b1f5"},c("li",{key:"ba9b3c06db67a73056fd9b82178cc9cf707e9b85",class:"planned__component-wrapper"},c("span",{key:"0b87a0560894857508552ffa06200448b1ed0573"},c("ifx-icon",{key:"dccdd74b141d8f3e27d7980a7c6113cc4e65a930",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"f330b9848076faa01e0554ba4bf6e4bd04671acf"},"In Progress")))),c("td",{key:"3456a3c881eb19754c6f7f3884e6bb7f67e02c4e"}),c("td",{key:"ae567dc704cf65a9771c86f56b71513c1f89e1e2"})),c("tr",{key:"91f0a88d0eb45f41790b4a1626cdfd40f02670e1"},c("td",{key:"6b021c7c15803835984a56cbf274c75e786002d6",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"7a6d85cb8082fbef9a3961526057a32b22543b05",href:"",size:"s",variant:"bold"},"Popover")),c("td",{key:"7136442350f196931fd140c74ed59c7f37058c69"},c("ul",{key:"2daffe00ca561fd2e6d0970e4799ef40ecaa0680"},c("li",{key:"4458a8d586d55984162d9d3b5e3f8e5dbe7692cb",class:"planned__component-wrapper"},c("span",{key:"70a67af1c1e9f593ef1e5dfa52ec2d771b87f897"},c("ifx-icon",{key:"fc36b0d0d347143a5c1b21520638171c843cd724",class:"planned__icon",icon:"clock24"})),c("span",{key:"c4f18c4adc3a047d24971b81cf25757d26f5efa1"},"On Hold")))),c("td",{key:"9ca0842a27419c919d56113814227b043e132805"}),c("td",{key:"0d72d2c9478c752fe5a5027083bbf41fec79cb85"})))))))}get el(){return a(this)}};b.style=f;export{b as ifx_overview_table};
2	- //# sourceMappingURL=p-3bb4e495.entry.js.map

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

	@@ -1,2 +0,0 @@
1	- import{r as i,h as o,a as f}from"./p-6b122987.js";const a=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.ifx-notification__wrapper{display:flex;flex-direction:row;align-items:center;padding:8px 16px;background-color:#FFFFFF;font-family:var(--ifx-font-family);color:#1D1D1D;border:1px solid #EEEDED}.ifx-notification__wrapper.ifx-notification__wrapper--success{border-left:4px solid #4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--success .ifx-notification__icon{color:#4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--warning{border-left:4px solid #E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--warning .ifx-notification__icon{color:#E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--error{border-left:4px solid #CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--error .ifx-notification__icon{color:#CD002F}.ifx-notification__wrapper .ifx-notification__icon{margin-right:8px;display:flex;align-self:flex-start;padding-top:2px}.ifx-notification__wrapper .ifx-notification__body{display:flex;flex-direction:row;flex-grow:1}.ifx-notification__wrapper .ifx-notification__body .ifx-notification__slot{flex-grow:1}@media (max-width: 576px){.ifx-notification__wrapper .ifx-notification__icon{align-self:flex-start}.ifx-notification__wrapper .ifx-notification__body{flex-direction:column}.ifx-notification__wrapper .ifx-notification__link{margin-top:8px}}';const n=a;const t=class{constructor(o){i(this,o);this.icon=undefined;this.variant="success";this.linkText=undefined;this.linkHref=undefined;this.linkTarget="_blank"}getClassName(){switch(this.variant){case"success":return"ifx-notification__wrapper--success";case"warning":return"ifx-notification__wrapper--warning";case"error":return"ifx-notification__wrapper--error";default:return"ifx-notification__wrapper--success"}}render(){return o(f,{key:"15fc8bb864e2b2035e17618d9a2437a8a86ef3aa"},o("div",{key:"65cdc0b522b8a3f935d1b0986d478cd9022da082",class:"ifx-notification__wrapper "+this.getClassName()},o("div",{key:"9bdda40bb3b4046e8fd4d49f8f0e0efe9a650ae3",class:"ifx-notification__icon"},o("ifx-icon",{key:"b44b944d4959b386d9164d251e915526c27887c9",icon:this.icon})),o("div",{key:"1f39fa1c7457f7623770ccc2a0cbde24ae56864a",class:"ifx-notification__body"},o("div",{key:"5e2aa9da6c21318aca4b20efcac1ee59f0569223",class:"ifx-notification__slot"},o("slot",{key:"9aa124797f45fa47bb3a13dccda5f8443fa96bb5"})),this.linkText&&this.linkHref&&o("div",{key:"c2cc0c129c15ffb8131e084f87470fdc3fac977d",class:"ifx-notification__link"},o("ifx-link",{key:"3bff6f7b8d2fbb7e58a71e57a9c8f8c2bef34f8c",href:this.linkHref,target:this.linkTarget},this.linkText,o("ifx-icon",{key:"da061685975412b44c18d071b4c1c2aba745548e",icon:"arrow-right-16"}))))))}};t.style=n;export{t as ifx_notification};
2	- //# sourceMappingURL=p-3bfb84ea.entry.js.map

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

@@ -1 +0,0 @@

- {"version":3,"names":["notificationCss","IfxNotificationStyle0","Notification","getClassName","this","variant","render","h","Host","key","class","icon","linkText","linkHref","href","target","linkTarget"],"sources":["src/components/notification/notification.scss?tag=ifx-notification&encapsulation=shadow","src/components/notification/notification.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.ifx-notification__wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n\n background-color: tokens.$ifxColorBaseWhite;\n font-family: var(--ifx-font-family);\n color: tokens.$ifxColorBaseBlack;\n\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n\n &.ifx-notification__wrapper--success {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorGreen500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorGreen500;\n }\n }\n\n &.ifx-notification__wrapper--warning {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOrange500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorOrange500;\n }\n }\n\n &.ifx-notification__wrapper--error {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorRed500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorRed500;\n }\n }\n\n & .ifx-notification__icon {\n margin-right: tokens.$ifxSpace100;\n display: flex;\n align-self: flex-start;\n padding-top: 2px;\n }\n\n & .ifx-notification__body {\n display: flex;\n flex-direction: row;\n flex-grow: 1;\n\n & .ifx-notification__slot {\n flex-grow: 1;\n }\n }\n\n @media (max-width: tokens.$ifxBreakpointXs) {\n & .ifx-notification__icon {\n align-self: flex-start;\n }\n\n & .ifx-notification__body {\n flex-direction: column;\n }\n\n & .ifx-notification__link {\n margin-top: tokens.$ifxSpace100;\n }\n }\n}","import { Component, h, Host, Prop } from '@stencil/core';\n \nexport type NotificationVariant = 'success' | 'warning' | 'error';\n\n@Component({\n tag: 'ifx-notification',\n styleUrl: 'notification.scss',\n shadow: true\n})\nexport class Notification {\n @Prop() icon: string;\n @Prop() variant: NotificationVariant = 'success';\n @Prop() linkText: string; \n @Prop() linkHref: string;\n @Prop() linkTarget: string = '_blank';\n\n\n private getClassName(): string {\n switch (this.variant) {\n case 'success':\n return 'ifx-notification__wrapper--success';\n case 'warning':\n return 'ifx-notification__wrapper--warning';\n case 'error':\n return 'ifx-notification__wrapper--error';\n default:\n return 'ifx-notification__wrapper--success';\n }\n }\n\n render() {\n return (\n <Host>\n <div class={\"ifx-notification__wrapper \" + this.getClassName()}>\n <div class=\"ifx-notification__icon\">\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>\n <div class=\"ifx-notification__body\">\n <div class=\"ifx-notification__slot\">\n <slot/>\n </div>\n { this.linkText && this.linkHref && \n <div class=\"ifx-notification__link\">\n <ifx-link href={this.linkHref} target={this.linkTarget}>\n {this.linkText}<ifx-icon icon=\"arrow-right-16\">\n </ifx-icon>\n </ifx-link>\n </div>\n }\n </div>\n </div>\n </Host>\n );\n }\n}"],"mappings":"kDAAA,MAAMA,EAAkB,o3CACxB,MAAAC,EAAeD,E,MCQFE,EAAY,M,0DAEgB,U,gEAGV,Q,CAGrB,YAAAC,GACN,OAAQC,KAAKC,SACX,IAAK,UACH,MAAO,qCACT,IAAK,UACH,MAAO,qCACT,IAAK,QACH,MAAO,mCACT,QACE,MAAO,qC,CAIb,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAO,6BAA+BN,KAAKD,gBAC9CI,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTH,EAAA,YAAAE,IAAA,2CAAUE,KAAMP,KAAKO,QAEvBJ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTH,EAAA,QAAAE,IAAA,8CAEAL,KAAKQ,UAAYR,KAAKS,UACxBN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTH,EAAA,YAAAE,IAAA,2CAAUK,KAAMV,KAAKS,SAAUE,OAAQX,KAAKY,YACzCZ,KAAKQ,SAASL,EAAA,YAAAE,IAAA,2CAAUE,KAAK,uB","ignoreList":[]}

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

	@@ -1,2 +0,0 @@
1	- import{r as e,c as t,h as i,g as n}from"./p-6b122987.js";const a='.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0px 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:16px;color:#1D1D1D}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s}.navbar__item.open .navItemIconWrapper{transform:rotate(-180deg);transition:0.3s}.navbar__item:hover{color:#0A8276;cursor:pointer}.navbar__item:hover .username__tooltip{display:block}.navbar__item:hover .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{cursor:pointer;background-color:#08665C}.navbar__item.remove{display:none}.navbar__item.removeLabel .label__wrapper{display:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .username__tooltip{display:none;position:absolute;top:35px;right:0;text-wrap:nowrap;padding:1px 5px;font-size:13px;font-family:"Source Sans 3";background-color:black;color:#fff;z-index:99}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper:hover .username__tooltip{display:block}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;border-radius:100%;background-color:#0A8276}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper .initials{color:#FFF;text-align:center;font-family:"Source Sans 3";font-size:14px;font-style:normal;font-weight:600;line-height:20px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper img{width:24px;height:24px;border-radius:100%}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.removeWrapper{display:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.hide{display:none}.container{position:relative}.container .sub__layer-back-button{display:none}.container .sub__layer-back-button.show{display:flex;justify-content:flex-start}.container .sub__layer-back-button.show .back__button-wrapper{display:flex;align-items:center;gap:8px;padding:8px 0 16px 0;color:#0A8276;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.container .sub__layer-back-button.show .back__button-wrapper span:hover,.container .sub__layer-back-button.show .back__button-wrapper ifx-icon:hover{cursor:pointer}.container.hide{display:none}.container .inner__content-wrapper{display:flex;justify-content:space-between;align-items:center;gap:8px}.container .inner__content-wrapper.no-gap{gap:0px}.navbar-menu{position:absolute;display:none;list-style-type:none;visibility:visible;flex-direction:column;width:224px;min-width:224px;background:#FFFFFF;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;padding:8px 0px;font-family:var(--ifx-font-family)}.navbar-menu.open:not(.itemInMobileMenu){display:flex}.navbar-menu.itemInMobileMenu{display:none}.navbar-menu.right{left:100%;top:-40%}.navbar-menu.left{top:-40%;right:100%}.navbar-menu.rightSideItemMenu{left:initial;right:0px}.navbar__item.layer__item-parent{color:#1D1D1D;font-size:24px;font-style:normal;font-weight:600;line-height:32px;letter-spacing:-0.24px;cursor:initial}.navbar__item.layer__item-parent .navbar__container-right-content-navigation-item-icon-wrapper ifx-icon svg{width:24px;height:24px}.navbar__item.sidebarMenuItem{justify-content:space-between;padding:0}.navbar__item.menuItem{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.navbar__item.menuItem.hide{display:none}.navbar__item.menuItem .label__wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__item.menuItem:hover{cursor:pointer;background-color:#EEEDED}.navbar__item.menuItem:active{background-color:#BFBBBB}.sub__layer-menu{padding:5px;display:none}.sub__layer-menu.remove__margin{margin:0;padding:0}.sub__layer-menu.open{display:block}.navbar__item.hide{display:none}.menuItemRightIconWrapper.hide{display:none}.navItemIconWrapper.hide{display:none}';const s=a;const o=class{constructor(i){e(this,i);this.ifxNavItem=t(this,"ifxNavItem",7);this.showLabel=true;this.icon="";this.href="";this.target="_self";this.hideOnMobile=true;this.internalHref="";this.isMenuItem=false;this.hasChildNavItems=false;this.isSidebarMenuItem=false;this.itemPosition=undefined}handleOutsideClick(e){const t=e.composedPath();const i=this.getItemMenu();if(i){if(i.classList.contains("open")){if(!t.includes(this.el)){this.closeItemMenu()}}}}async hideComponent(){this.el.style.display="none"}async showComponent(){this.el.style.display=""}async toggleChildren(e){const t=this.getItemMenu();const i=this.getChevronDownIconWrapper();if(t){this.handleClassList(i,e,"hide");this.handleClassList(t,e,"itemInMobileMenu")}}async moveChildComponentsIntoSubLayerMenu(){const e=this.getItemMenu();if(e){const t=this.handleClassList(e,"contains","open");if(t){const e=this.getNavBarItem();const t=this.getSubLayerBackButton();this.handleClassList(e,"add","layer__item-parent");this.handleClassList(t,"add","show");this.ifxNavItem.emit({component:this.el,action:"hideFirstLayer"})}}const t=this.el.querySelectorAll('[slot="first__layer"]');this.isSidebarMenuItem=true;for(let e=0;e<t.length;e++){t[e].setAttribute("slot","second__layer");t[e].moveChildComponentsIntoSubLayerMenu()}}getSubLayerBackButton(){const e=this.el.shadowRoot.querySelector(".sub__layer-back-button");return e}async toggleFirstLayerItem(e,t){const i=this.getNavBarItem();const n=this.getSubLayerMenu();const a=this.getSubLayerBackButton();this.handleClassList(a,[e],"show");this.handleClassList(i,[t],"hide");this.handleClassList(n,[t],"remove__margin")}openSubLayerMenu(){if(this.hasChildNavItems){const e=this.getSubLayerBackButton();const t=this.getRightArrowIcon();const i=this.getNavBarItem();const n=this.getSubLayerMenu();const a=this.el.getAttribute("slot");this.handleClassList(e,"add","show");this.handleClassList(t,"add","hide");this.handleClassList(i,"add","layer__item-parent");this.handleClassList(n,"add","open");if(a.toLowerCase()==="second__layer"){this.ifxNavItem.emit({component:this.el,parent:this.el.parentElement,action:"hideSecondLayer"});this.handleClassList(i,"remove","menuItem")}else{this.ifxNavItem.emit({component:this.el,action:"hideFirstLayer"})}}}async addMenuItemClass(){const e=this.getNavBarItem();this.handleClassList(e,"add","menuItem");const t=this.getRightArrowIcon();if(this.hasChildNavItems){this.handleClassList(t,"remove","hide")}}async moveChildComponentsBackIntoNavbar(){const e=this.getSubLayerBackButton();const t=this.getNavBarItem();const i=this.getSubLayerMenu();this.handleClassList(e,"remove","show");this.handleClassList(t,"remove","layer__item-parent");this.handleClassList(i,"remove","remove__margin");this.ifxNavItem.emit({component:this.el,action:"show"});const n=this.el.querySelectorAll('[slot="second__layer"]');this.isSidebarMenuItem=false;this.showComponent();this.handleClassList(t,"remove","hide");for(let e=0;e<n.length;e++){n[e].setAttribute("slot","first__layer");n[e].moveChildComponentsBackIntoNavbar();n[e].addMenuItemClass();n[e].returnToFirstLayer()}}getRightArrowIcon(){const e=this.el.shadowRoot.querySelector(".menuItemRightIconWrapper");return e}getChevronDownIconWrapper(){const e=this.el.shadowRoot.querySelector(".navItemIconWrapper");return e}async returnToFirstLayer(){const e=this.getSubLayerBackButton();const t=this.getNavBarItem();const i=this.getRightArrowIcon();const n=this.getSubLayerMenu();const a=this.el.getAttribute("slot");this.handleClassList(e,"remove","show");this.handleClassList(t,"remove","layer__item-parent");this.handleClassList(n,"remove","open");if(this.hasChildNavItems){this.handleClassList(i,"remove","hide")}if(a.toLowerCase()==="second__layer"){this.ifxNavItem.emit({component:this.el,parent:this.el.parentElement,action:"returnToSecondLayer"});this.handleClassList(t,"add","menuItem")}else{this.ifxNavItem.emit({component:this.el,action:"return"})}}componentWillLoad(){this.setHref();this.checkIfItemIsNested();this.checkIfItemHasChildren()}componentDidLoad(){if(this.hasChildNavItems){const e=this.getNavbarItems();this.relocateItemsToFirstlayer(e)}}componentDidUpdate(){const e=this.getNavBarItem();const t=this.handleClassList(e,"contains","layer__item-parent");if(this.isSidebarMenuItem&&t){const e=this.getRightArrowIcon();this.handleClassList(e,"add","hide")}}async setMenuItemPosition(){if(this.isMenuItem&&this.hasChildNavItems){const e=this.getItemMenuPosition();if(e==="left"){this.itemPosition="left"}else if(e==="right"){this.itemPosition="right"}}}handleClassList(e,t,i){e.classList[t](i);if(t==="contains"){return e.classList.contains(i)}}getNavbarItems(){const e=this.el.querySelectorAll("ifx-navbar-item");return e}getNavBarItem(){const e=this.el.shadowRoot.querySelector(".navbar__item");return e}getSubLayerMenu(){const e=this.el.shadowRoot.querySelector(".sub__layer-menu");return e}relocateItemsToFirstlayer(e){e.forEach((e=>{e.setAttribute("slot","first__layer")}))}setHref(){if(this.href.toLowerCase().trim()===""){this.internalHref=undefined}else this.internalHref=this.href}checkIfItemIsNested(){const e=this.el.parentElement;if(e.tagName.toUpperCase()==="IFX-NAVBAR-ITEM"\|\|e.tagName.toUpperCase()==="IFX-NAVBAR-PROFILE"){this.isMenuItem=true;return}else{this.isMenuItem=false}}checkIfItemHasChildren(){const e=this.getNavbarItems();if(e.length!==0){this.hasChildNavItems=true}else{this.hasChildNavItems=false}}async setItemSideSpecifications(){const e=this.el;const t=this.getItemMenu();const i=e.getAttribute("slot");if(i.toLowerCase().trim()==="right-item"){this.handleClassList(t,"add","rightSideItemMenu")}return true}getItemMenu(){const e=this.el.shadowRoot.querySelector(".navbar-menu");return e}closeItemMenu(){const e=this.getItemMenu();const t=this.getNavBarItem();if(e){this.handleClassList(e,"remove","open");this.handleClassList(t,"remove","open")}}getItemMenuPosition(){let e=this.el;while(e){if(e.tagName==="IFX-NAVBAR-PROFILE"\|\|e.slot==="right-item"){return"left"}e=e.parentElement\|\|e.getRootNode().host}return"right"}toggleItemMenu(){const e=this.el.getAttribute("slot");if(e.toLowerCase()==="mobile-menu-top"\|\|e.toLowerCase()==="second__layer"){this.openSubLayerMenu()}if(!this.internalHref&&e.toLowerCase()!=="mobile-menu-top"&&e.toLowerCase()!=="second__layer"){const e=this.getItemMenu();if(this.hasChildNavItems){const t=this.getNavBarItem();this.handleClassList(e,"toggle","open");this.handleClassList(t,"toggle","open")}}}handleNestedLayerMenu(e){if(this.isMenuItem&&this.hasChildNavItems&&!this.isSidebarMenuItem){const t=this.getItemMenu();const i=this.getItemMenuPosition();if(e.type.toUpperCase()==="MOUSEENTER"){this.handleClassList(t,"add","open");if(i==="left"){this.handleClassList(t,"add","left")}else if(i==="right"){this.handleClassList(t,"add","right")}}if(e.type.toUpperCase()==="MOUSELEAVE"){this.handleClassList(t,"remove","open");if(i==="left"){this.handleClassList(t,"remove","left")}else if(i==="right"){this.handleClassList(t,"remove","right")}}}}render(){return i("div",{key:"2cf3fe40e89dc56b9b9b37aa952b2c3ddd99b726",class:"container",onMouseLeave:e=>this.handleNestedLayerMenu(e),onMouseEnter:e=>this.handleNestedLayerMenu(e)},i("div",{key:"3956db4f68aa62215c5b2834129f1f9285c29c35",class:"sub__layer-back-button"},i("div",{key:"ba17b48172c391bed25caa2c71c865adcd6c73ed",class:"back__button-wrapper",onClick:()=>this.returnToFirstLayer()},i("ifx-icon",{key:"5d238a0b663e78eb68799573ef91a1188d53718f",icon:"arrow-left-16"}),i("span",{key:"1ccc0531ff6c6727e5bc56c636b340930e588795"},"Back"))),i("a",{key:"d814b9f953b5a74aa6888434a2f138d57ca8ae9c",href:this.internalHref,target:this.target,onClick:()=>this.toggleItemMenu(),class:`navbar__item ${this.isSidebarMenuItem?"sidebarMenuItem":""} ${!this.showLabel?"removeLabel":""} ${this.isMenuItem?"menuItem":""} ${this.hasChildNavItems?"isParent":""}`},i("div",{key:"2489d46849cc6caa9cdce1d4c57c34317df32371",class:"inner__content-wrapper"},i("div",{key:"4b3dc860a0cfc9aa433dc9d53c2ff796fbaec0e3",class:`navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon?"removeWrapper":""}`},this.icon&&i("ifx-icon",{key:"95f2e25306669fe82bc8d1a71795d73b2328ead0",icon:this.icon})),this.itemPosition==="left"&&this.hasChildNavItems&&this.isMenuItem&&i("div",{key:"144b334c2b0a8cf36aade2d3f859ab3dbfd94175",class:"menuItemLeftIconWrapper"},i("ifx-icon",{key:"567e3a49952791c0f1269803b0348478a918aea3",icon:"chevron-left-12"})),i("span",{key:"506d11f1aaafaaa677ef2db86497d9417dd317dc",class:"label__wrapper"},i("slot",{key:"f4205e457a8c4d4c4612908c41532268d1959122"}))),i("div",{key:"13ee21962cd1e53aaeba4405f93f10a81b1f6ea8",class:`navItemIconWrapper ${this.hasChildNavItems&&!this.isMenuItem&&!this.isSidebarMenuItem?"":"hide"}`},i("ifx-icon",{key:"759f5af919ef5febf0e4dbcb9ca1bbc946d39070",icon:"chevron-down-12"})),i("div",{key:"4ad8a15af7bf5922d6def0d3ba75f9801a8e7ae4",class:`menuItemRightIconWrapper ${this.itemPosition==="right"&&this.hasChildNavItems&&this.isMenuItem\|\|this.isSidebarMenuItem&&this.hasChildNavItems?"":"hide"}`},i("ifx-icon",{key:"b94dfc4859bd774fcf2057596287db6dbcd77241",icon:"chevron-right-12"}))),this.hasChildNavItems&&!this.isSidebarMenuItem&&i("ul",{key:"af709a33829f0aeafc8bc70ff58a4b8b4c698e7b",class:"navbar-menu"}," ",i("slot",{key:"234b5b25f6c422cbc97741128bd268a0371ce6a4",name:"first__layer"})," "),this.isSidebarMenuItem&&i("ul",{key:"faa60852031f1b6048fd866c276689b4905d23d6",class:"sub__layer-menu"}," ",i("slot",{key:"4d7ac641f7c0421f6edc039c40bfe186c4449374",name:"second__layer"})," "))}get el(){return n(this)}};o.style=s;export{o as ifx_navbar_item};
2	- //# sourceMappingURL=p-3e9d8f36.entry.js.map

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

@@ -1 +0,0 @@

- {"version":3,"names":["navbarItemCss","IfxNavbarItemStyle0","NavbarItem","handleOutsideClick","event","path","composedPath","itemMenu","this","getItemMenu","classList","contains","includes","el","closeItemMenu","hideComponent","style","display","showComponent","toggleChildren","action","arrowIcon","getChevronDownIconWrapper","handleClassList","moveChildComponentsIntoSubLayerMenu","subLayerMenu","subLayerMenuIsOpened","navbarItem","getNavBarItem","subLayerBackButton","getSubLayerBackButton","ifxNavItem","emit","component","navItems","querySelectorAll","isSidebarMenuItem","i","length","setAttribute","sublayerBackButton","shadowRoot","querySelector","toggleFirstLayerItem","actionOne","actionTwo","secondLayerMenu","getSubLayerMenu","openSubLayerMenu","hasChildNavItems","rightArrowIcon","getRightArrowIcon","slotName","getAttribute","toLowerCase","parent","parentElement","addMenuItemClass","moveChildComponentsBackIntoNavbar","returnToFirstLayer","menuItemRightIconWrapper","componentWillLoad","setHref","checkIfItemIsNested","checkIfItemHasChildren","componentDidLoad","getNavbarItems","relocateItemsToFirstlayer","componentDidUpdate","isLayerItemParent","setMenuItemPosition","isMenuItem","menuPosition","getItemMenuPosition","itemPosition","type","className","navItem","forEach","item","href","trim","internalHref","undefined","tagName","toUpperCase","sidebarItems","setItemSideSpecifications","menuItem","slotValue","menu","slot","getRootNode","host","toggleItemMenu","handleNestedLayerMenu","e","render","h","key","class","onMouseLeave","onMouseEnter","onClick","icon","target","showLabel","name"],"sources":["src/components/navigation/navbar/navbar-item.scss?tag=ifx-navbar-item&encapsulation=shadow","src/components/navigation/navbar/navbar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n.navbar__item {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px 8px;\n flex: none;\n order: 0;\n flex-grow: 0;\n font-family: var(--ifx-font-family);\n text-decoration: none;\n font-weight: 400;\n font-size: 16px;\n color: tokens.$ifxColorBaseBlack;\n\n &.hide { \n display: none;\n }\n\n &.isParent { \n gap: 8px;\n }\n\n & .navItemIconWrapper { \n transition: .3s;\n }\n\n &.open { \n & .navItemIconWrapper { \n transform: rotate(-180deg);\n transition: .3s;\n }\n }\n\n &:hover {\n color: tokens.$ifxColorOcean500;\n cursor: pointer;\n\n & .username__tooltip { \n display: block;\n }\n\n & .navbar__container-right-content-navigation-item-icon-wrapper { \n & .initials__wrapper { \n cursor: pointer;\n background-color: tokens.$ifxColorOcean600;\n }\n }\n }\n\n &.remove {\n display: none;\n }\n\n &.removeLabel {\n & .label__wrapper {\n display: none;\n }\n }\n\n & .navbar__container-right-content-navigation-item-icon-wrapper {\n position: relative;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px;\n gap: 8px;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & .username__tooltip { \n display: none;\n position: absolute;\n top: 35px;\n right: 0;\n text-wrap: nowrap;\n padding: 1px 5px;\n font-size: 13px;\n font-family: \"Source Sans 3\";\n background-color: black;\n color: #fff;\n z-index: 99;\n }\n\n &:hover { \n & .username__tooltip { \n display: block;\n }\n }\n\n & .initials__wrapper { \n display: flex;\n width: 24px;\n height: 24px;\n justify-content: center;\n align-items: center;\n border-radius: 100%;\n background-color: tokens.$ifxColorOcean500;\n\n & .initials { \n color: #FFF;\n text-align: center;\n font-family: \"Source Sans 3\";\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px; \n\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n \n }\n }\n\n & img { \n width: 24px; \n height: 24px;\n border-radius: 100%;\n }\n\n &.removeWrapper {\n display: none;\n }\n\n &.hide {\n display: none;\n }\n }\n}\n\n.container { \n position: relative;\n\n & .sub__layer-back-button { \n display: none;\n &.show { \n display: flex;\n justify-content: flex-start;\n\n & .back__button-wrapper { \n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n padding: tokens.$ifxSpace100 0 tokens.$ifxSpace200 0;\n color: tokens.$ifxColorOcean500;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n\n & span, & ifx-icon { \n &:hover { \n cursor: pointer;\n }\n }\n\n }\n }\n }\n\n &.hide { \n display: none;\n }\n\n & .inner__content-wrapper { \n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 8px;\n &.no-gap { \n gap: 0px;\n }\n }\n}\n\n.navbar-menu {\n position: absolute;\n display: none;\n list-style-type: none;\n visibility: visible;\n flex-direction: column;\n width: 224px;\n min-width: 224px;\n background: tokens.$ifxColorBaseWhite;\n box-shadow: 0px 6px 9px 0px #1d1d1d1a;\n border: 1px solid tokens.$ifxColorEngineering200;\n padding: 8px 0px;\n font-family: var(--ifx-font-family);\n\n &.open:not(.itemInMobileMenu) {\n display: flex;\n }\n\n &.itemInMobileMenu { \n display: none;\n }\n\n &.right { \n left: 100%;\n top: -40%;\n }\n\n &.left { \n top: -40%;\n right: 100%;\n }\n\n &.rightSideItemMenu { \n left: initial;\n right: 0px;\n }\n}\n\n.navbar__item { \n &.layer__item-parent { \n color: tokens.$ifxColorBaseBlack;\n font-size: 24px;\n font-style: normal;\n font-weight: 600;\n line-height: 32px; \n letter-spacing: -0.24px;\n cursor: initial;\n\n & .navbar__container-right-content-navigation-item-icon-wrapper { \n & ifx-icon { \n & svg { \n width: 24px;\n height: 24px;\n }\n }\n }\n }\n\n\n &.sidebarMenuItem { \n justify-content: space-between;\n padding: 0;\n }\n\n\n &.menuItem {\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 16px;\n gap: 8px;\n font-family: var(--ifx-font-family);\n \n &.hide {\n display: none;\n }\n \n & .label__wrapper {\n color: tokens.$ifxColorBaseBlack;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n \n &:hover {\n cursor: pointer;\n background-color: tokens.$ifxColorEngineering200;\n }\n \n &:active {\n background-color: tokens.$ifxColorEngineering300;\n }\n }\n}\n\n.sub__layer-menu { \n padding: 5px;\n display: none;\n\n &.remove__margin { \n margin: 0;\n padding: 0;\n }\n \n &.open { \n display: block;\n }\n}\n\n.navbar__item { \n &.hide { \n display: none;\n }\n}\n\n.menuItemRightIconWrapper { \n &.hide { \n display: none;\n }\n}\n\n.navItemIconWrapper { \n &.hide { \n display: none;\n }\n}\n\n","import { Component, h, Element, Prop, State, Listen, Method, Event, EventEmitter } from \"@stencil/core\";\n\n@Component({\n tag: 'ifx-navbar-item',\n styleUrl: 'navbar-item.scss',\n shadow: true\n})\n\nexport class NavbarItem {\n\n @Element() el;\n @Prop() showLabel: boolean = true;\n @Prop() icon: string = \"\"\n @Prop() href: string = \"\"\n @Prop() target: string = \"_self\";\n @Prop() hideOnMobile: boolean = true;\n @State() internalHref: string = \"\"\n @State() isMenuItem: boolean = false;\n @State() hasChildNavItems: boolean = false;\n @State() isSidebarMenuItem: boolean = false;\n @State() itemPosition: string;\n @Event() ifxNavItem: EventEmitter;\n \n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n const itemMenu = this.getItemMenu()\n if(itemMenu) { \n if(itemMenu.classList.contains('open')) { \n if (!path.includes(this.el)) {\n this.closeItemMenu();\n }\n }\n }\n }\n\n @Method()\n async hideComponent() { \n this.el.style.display = 'none';\n }\n\n @Method()\n async showComponent() { \n this.el.style.display = '';\n }\n\n @Method()\n async toggleChildren(action) { \n const itemMenu = this.getItemMenu()\n const arrowIcon = this.getChevronDownIconWrapper()\n if(itemMenu) { \n this.handleClassList(arrowIcon, action, 'hide')\n this.handleClassList(itemMenu, action, 'itemInMobileMenu')\n }\n }\n\n @Method()\n async moveChildComponentsIntoSubLayerMenu() { \n const subLayerMenu = this.getItemMenu()\n if(subLayerMenu) { \n const subLayerMenuIsOpened = this.handleClassList(subLayerMenu, 'contains', 'open')\n if(subLayerMenuIsOpened) { \n const navbarItem = this.getNavBarItem()\n const subLayerBackButton = this.getSubLayerBackButton()\n this.handleClassList(navbarItem, 'add', 'layer__item-parent')\n this.handleClassList(subLayerBackButton, 'add', 'show')\n this.ifxNavItem.emit({component: this.el, action: 'hideFirstLayer'})\n }\n }\n\n const navItems = this.el.querySelectorAll('[slot=\"first__layer\"]')\n this.isSidebarMenuItem = true;\n\n for(let i = 0; i < navItems.length; i++) { \n navItems[i].setAttribute('slot', 'second__layer')\n navItems[i].moveChildComponentsIntoSubLayerMenu()\n }\n }\n\n getSubLayerBackButton() { \n const sublayerBackButton = this.el.shadowRoot.querySelector('.sub__layer-back-button')\n return sublayerBackButton\n }\n\n @Method()\n async toggleFirstLayerItem(actionOne, actionTwo) { \n const navbarItem = this.getNavBarItem()\n const secondLayerMenu = this.getSubLayerMenu()\n const subLayerBackButton = this.getSubLayerBackButton()\n this.handleClassList(subLayerBackButton, [actionOne], 'show')\n this.handleClassList(navbarItem, [actionTwo], 'hide')\n this.handleClassList(secondLayerMenu, [actionTwo], 'remove__margin')\n }\n\n openSubLayerMenu() { \n if(this.hasChildNavItems) { \n const subLayerBackButton = this.getSubLayerBackButton()\n const rightArrowIcon = this.getRightArrowIcon()\n const navbarItem = this.getNavBarItem()\n const subLayerMenu = this.getSubLayerMenu()\n const slotName = this.el.getAttribute('slot')\n\n this.handleClassList(subLayerBackButton, 'add', 'show')\n this.handleClassList(rightArrowIcon, 'add', 'hide')\n this.handleClassList(navbarItem, 'add', 'layer__item-parent')\n this.handleClassList(subLayerMenu, 'add', 'open')\n \n if(slotName.toLowerCase() === 'second__layer') {\n this.ifxNavItem.emit({component: this.el, parent: this.el.parentElement, action: 'hideSecondLayer'})\n this.handleClassList(navbarItem, 'remove', 'menuItem')\n } else { \n this.ifxNavItem.emit({component: this.el, action: 'hideFirstLayer'})\n }\n }\n }\n\n @Method()\n async addMenuItemClass() { \n const navbarItem = this.getNavBarItem()\n this.handleClassList(navbarItem, 'add', 'menuItem')\n const rightArrowIcon = this.getRightArrowIcon()\n if(this.hasChildNavItems) { \n this.handleClassList(rightArrowIcon, 'remove', 'hide')\n }\n }\n\n @Method()\n async moveChildComponentsBackIntoNavbar() { \n const subLayerBackButton = this.getSubLayerBackButton()\n const navbarItem = this.getNavBarItem()\n const secondLayerMenu = this.getSubLayerMenu()\n\n this.handleClassList(subLayerBackButton, 'remove', 'show')\n this.handleClassList(navbarItem, 'remove', 'layer__item-parent')\n this.handleClassList(secondLayerMenu, 'remove', 'remove__margin')\n\n this.ifxNavItem.emit({component: this.el, action: 'show'})\n\n const navItems = this.el.querySelectorAll('[slot=\"second__layer\"]')\n this.isSidebarMenuItem = false;\n this.showComponent()\n this.handleClassList(navbarItem, 'remove', 'hide')\n\n for(let i = 0; i < navItems.length; i++) { \n navItems[i].setAttribute('slot', 'first__layer')\n navItems[i].moveChildComponentsBackIntoNavbar()\n navItems[i].addMenuItemClass()\n navItems[i].returnToFirstLayer()\n }\n }\n\n getRightArrowIcon() { \n const menuItemRightIconWrapper = this.el.shadowRoot.querySelector('.menuItemRightIconWrapper')\n return menuItemRightIconWrapper;\n }\n\n getChevronDownIconWrapper() { \n const arrowIcon = this.el.shadowRoot.querySelector('.navItemIconWrapper');\n return arrowIcon;\n }\n\n @Method()\n async returnToFirstLayer() { \n const subLayerBackButton = this.getSubLayerBackButton()\n const navbarItem = this.getNavBarItem()\n const rightArrowIcon = this.getRightArrowIcon()\n const subLayerMenu = this.getSubLayerMenu()\n const slotName = this.el.getAttribute('slot')\n\n this.handleClassList(subLayerBackButton, 'remove', 'show')\n this.handleClassList(navbarItem, 'remove', 'layer__item-parent')\n this.handleClassList(subLayerMenu, 'remove', 'open')\n if(this.hasChildNavItems) { \n this.handleClassList(rightArrowIcon, 'remove', 'hide')\n }\n\n if(slotName.toLowerCase() === 'second__layer') {\n this.ifxNavItem.emit({component: this.el, parent: this.el.parentElement, action: 'returnToSecondLayer'})\n this.handleClassList(navbarItem, 'add', 'menuItem')\n } else { \n this.ifxNavItem.emit({component: this.el, action: 'return'})\n }\n }\n\n componentWillLoad() {\n this.setHref()\n this.checkIfItemIsNested()\n this.checkIfItemHasChildren()\n }\n\n componentDidLoad() { \n if(this.hasChildNavItems) { \n const navItems = this.getNavbarItems();\n this.relocateItemsToFirstlayer(navItems)\n }\n }\n\n componentDidUpdate() { \n const navbarItem = this.getNavBarItem()\n const isLayerItemParent = this.handleClassList(navbarItem, 'contains', 'layer__item-parent')\n if(this.isSidebarMenuItem && isLayerItemParent) {\n const rightArrowIcon = this.getRightArrowIcon()\n this.handleClassList(rightArrowIcon, 'add', 'hide')\n }\n }\n \n @Method()\n async setMenuItemPosition() { \n if(this.isMenuItem && this.hasChildNavItems) { \n const menuPosition = this.getItemMenuPosition()\n if(menuPosition === 'left') { \n this.itemPosition = 'left'\n } else if(menuPosition === 'right') { \n this.itemPosition = 'right'\n }\n }\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n if (type === 'contains') {\n return el.classList.contains(className)\n }\n }\n\n getNavbarItems() {\n const navItems = this.el.querySelectorAll('ifx-navbar-item')\n return navItems;\n }\n \n getNavBarItem() { \n const navItem = this.el.shadowRoot.querySelector('.navbar__item')\n return navItem;\n }\n\n getSubLayerMenu() { \n const subLayerMenu = this.el.shadowRoot.querySelector('.sub__layer-menu')\n return subLayerMenu;\n }\n\n relocateItemsToFirstlayer(navItems) { \n navItems.forEach(item => {\n item.setAttribute('slot', 'first__layer')\n })\n }\n\n setHref() {\n if (this.href.toLowerCase().trim() === \"\") {\n this.internalHref = undefined;\n } else this.internalHref = this.href;\n }\n\n checkIfItemIsNested() {\n const parentElement = this.el.parentElement;\n if (parentElement.tagName.toUpperCase() === 'IFX-NAVBAR-ITEM' \n || parentElement.tagName.toUpperCase() === 'IFX-NAVBAR-PROFILE') {\n this.isMenuItem = true;\n return;\n } else {\n this.isMenuItem = false;\n }\n }\n\n checkIfItemHasChildren() { \n const sidebarItems = this.getNavbarItems();\n if (sidebarItems.length !== 0) {\n this.hasChildNavItems = true;\n } else {\n this.hasChildNavItems = false;\n } \n }\n\n @Method()\n async setItemSideSpecifications() { \n const menuItem = this.el;\n const itemMenu = this.getItemMenu()\n const slotValue = menuItem.getAttribute('slot')\n \n if(slotValue.toLowerCase().trim() === \"right-item\") { \n this.handleClassList(itemMenu, 'add', 'rightSideItemMenu')\n }\n\n return true;\n }\n\n getItemMenu() { \n const menu = this.el.shadowRoot.querySelector('.navbar-menu');\n return menu;\n }\n\n closeItemMenu() { \n const itemMenu = this.getItemMenu()\n const menuItem = this.getNavBarItem()\n if(itemMenu) { \n this.handleClassList(itemMenu, 'remove', 'open')\n this.handleClassList(menuItem, 'remove', 'open')\n }\n }\n\n getItemMenuPosition() {\n let parentElement = this.el;\n while(parentElement) {\n if(parentElement.tagName === 'IFX-NAVBAR-PROFILE' || parentElement.slot === 'right-item') {\n return 'left'\n }\n parentElement = parentElement.parentElement || parentElement.getRootNode().host;\n }\n return 'right'\n }\n \n toggleItemMenu() {\n const slotName = this.el.getAttribute('slot')\n\n if(slotName.toLowerCase() === 'mobile-menu-top' || slotName.toLowerCase() === 'second__layer') { \n this.openSubLayerMenu()\n }\n\n if(!this.internalHref && slotName.toLowerCase() !== 'mobile-menu-top' && slotName.toLowerCase() !== 'second__layer' ) { \n const itemMenu = this.getItemMenu()\n \n if(this.hasChildNavItems) { \n const menuItem = this.getNavBarItem()\n this.handleClassList(itemMenu, 'toggle', 'open');\n this.handleClassList(menuItem, 'toggle', 'open');\n } \n }\n }\n\n handleNestedLayerMenu(e) { \n if(this.isMenuItem && this.hasChildNavItems && !this.isSidebarMenuItem) { \n const itemMenu = this.getItemMenu()\n const menuPosition = this.getItemMenuPosition()\n if(e.type.toUpperCase() === 'MOUSEENTER') { \n this.handleClassList(itemMenu, 'add', 'open')\n if(menuPosition === 'left') { \n this.handleClassList(itemMenu, 'add', 'left')\n } else if(menuPosition === 'right') { \n this.handleClassList(itemMenu, 'add', 'right')\n }\n }\n\n if(e.type.toUpperCase() === 'MOUSELEAVE') { \n this.handleClassList(itemMenu, 'remove', 'open')\n if(menuPosition === 'left') { \n this.handleClassList(itemMenu, 'remove', 'left')\n } else if (menuPosition === 'right') { \n this.handleClassList(itemMenu, 'remove', 'right')\n }\n }\n }\n }\n\n render() {\n return (\n <div class=\"container\" onMouseLeave={e => this.handleNestedLayerMenu(e)} onMouseEnter={e => this.handleNestedLayerMenu(e)}>\n <div class=\"sub__layer-back-button\">\n <div class=\"back__button-wrapper\" onClick={() => this.returnToFirstLayer()}>\n <ifx-icon icon=\"arrow-left-16\" />\n <span>Back</span>\n </div>\n </div>\n <a href={this.internalHref} target={this.target} onClick={() => this.toggleItemMenu()} class= {`navbar__item ${this.isSidebarMenuItem ? 'sidebarMenuItem' : \"\"} ${!this.showLabel ? 'removeLabel' : \"\"} ${this.isMenuItem ? 'menuItem' : \"\"} ${this.hasChildNavItems ? 'isParent' : \"\"}`}>\n <div class=\"inner__content-wrapper\">\n <div class={`navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon ? \"removeWrapper\" : \"\"}`}>\n {this.icon && <ifx-icon icon={this.icon}></ifx-icon>}\n </div>\n\n {this.itemPosition === 'left' \n && this.hasChildNavItems \n && this.isMenuItem && \n <div class=\"menuItemLeftIconWrapper\">\n <ifx-icon icon=\"chevron-left-12\" />\n </div>}\n\n <span class=\"label__wrapper\">\n <slot />\n </span>\n </div>\n\n <div class={`navItemIconWrapper ${this.hasChildNavItems && !this.isMenuItem && !this.isSidebarMenuItem ? '' : \"hide\"}`}>\n <ifx-icon icon=\"chevron-down-12\" />\n </div>\n \n {<div class={`menuItemRightIconWrapper ${((this.itemPosition === 'right' && this.hasChildNavItems && this.isMenuItem) || (this.isSidebarMenuItem && this.hasChildNavItems)) ? '' : \"hide\"}`}>\n <ifx-icon icon=\"chevron-right-12\" />\n </div>}\n </a>\n \n {this.hasChildNavItems && !this.isSidebarMenuItem && <ul class='navbar-menu'> <slot name=\"first__layer\" /> </ul>}\n {this.isSidebarMenuItem && <ul class='sub__layer-menu'> <slot name=\"second__layer\" /> </ul>}\n\n </div>\n )\n }\n}"],"mappings":"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","ignoreList":[]}

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

	@@ -1,2 +0,0 @@
1	- import{r as t,c as i,h as s,g as e}from"./p-6b122987.js";const a=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex}.tabs{display:flex;font-family:var(--ifx-font-family);width:100%}.tabs.horizontal{flex-direction:column}.tabs.vertical{flex-direction:row}.tabs-list{display:flex;list-style:none;padding:0;margin:0;position:relative;font-weight:600}.tabs-list:focus-within .active-border{display:none}.active-border{content:"";position:absolute;transition:left 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out}.tabs.horizontal .active-border{bottom:0;left:0;height:2px;background-color:#0A8276}.tabs.vertical .tabs-list{flex-direction:column;border-bottom:none}.tabs.vertical .tab-content{padding-top:0px;padding-left:32px}.tabs:not(.vertical) .tab-item.full-width{flex:1}.tab-item{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;cursor:pointer;position:relative}.tab-item.icon__right{flex-direction:row-reverse;justify-content:flex-end}.tab-item:hover{color:#0A8276}.tab-item:active,.tab-item.active{color:#0A8276}.tab-item:focus,.tab-item.focus{outline:none;border-radius:1px;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.tab-item:focus+.active-border,.tab-item.focus+.active-border{display:none}.tab-item.disabled{color:#BFBBBB;pointer-events:none}.tabs.vertical .tab-item{border-right:2px solid transparent;min-width:7em}.tabs.vertical .active-border{left:0;top:0;width:2px;background-color:#0A8276}.tab-content{padding-top:24px;padding-left:0px;flex-grow:1}.tabs.small .tab-item{font-size:0.875rem}';const o=a;const n=class{constructor(s){t(this,s);this.ifxTabChange=i(this,"ifxTabChange",7);this.orientation="horizontal";this.activeTabIndex=0;this.fullWidth=false;this.internalOrientation=undefined;this.internalActiveTabIndex=0;this.internalFocusedTabIndex=0;this.tabRefs=[];this.tabHeaderRefs=[];this.disabledTabs=[];this.tabObjects=[]}updateBorderOnWindowResize(){this.updateBorderAndFocus()}setActiveAndFocusedTab(t){var i;if(t>=this.tabObjects.length){t=this.tabObjects.length-1}if(t<0){t=0}if(!((i=this.tabObjects[t])===null\|\|i===void 0?void 0:i.disabled)){this.internalActiveTabIndex=t;this.internalFocusedTabIndex=t}}handleTabHeaderChange(t){const i=t.target.getAttribute("slot").replace("tab-","");this.tabObjects[i].header=t.detail;this.tabObjects=[...this.tabObjects]}activeTabIndexChanged(t,i){if(t!==i){this.setActiveAndFocusedTab(t)}}componentWillLoad(){this.internalOrientation=this.orientation.toLowerCase()==="vertical"?"vertical":"horizontal";if(this.internalActiveTabIndex!==this.activeTabIndex){this.ifxTabChange.emit({previousTab:this.internalActiveTabIndex,currentTab:this.activeTabIndex})}this.onSlotChange();this.setActiveAndFocusedTab(this.activeTabIndex);this.updateTabStyles()}updateTabStyles(){this.tabHeaderRefs.forEach(((t,i)=>{t.classList.toggle("active",i===this.internalActiveTabIndex);t.setAttribute("aria-selected",i===this.internalActiveTabIndex?"true":"false")}))}reRenderBorder(){const t=this.el.shadowRoot.querySelector(".active-border");if(t&&this.tabHeaderRefs[this.internalActiveTabIndex]){if(this.orientation==="horizontal"){t.style.left=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;t.style.width=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;t.style.top="";t.style.height=""}else{t.style.top=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;t.style.height=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;t.style.left="";t.style.width=""}}}onSlotChange(){const t=this.el.querySelectorAll("ifx-tab");this.tabObjects=Array.from(t).map((t=>({header:t===null\|\|t===void 0?void 0:t.header,disabled:(t===null\|\|t===void 0?void 0:t.disabled)===true,icon:t===null\|\|t===void 0?void 0:t.icon,iconPosition:t===null\|\|t===void 0?void 0:t.iconPosition})));this.tabRefs=Array.from(t);this.tabRefs.forEach(((t,i)=>{t.setAttribute("slot",`tab-${i}`)}))}setDefaultOrientation(){const t=["horizontal","vertical"];const i=this.orientation.toLowerCase();if(!t.includes(i)){this.internalOrientation="horizontal"}else this.internalOrientation=this.orientation}componentDidLoad(){this.updateBorderAndFocus();this.tabHeaderRefs.forEach(((t,i)=>{t.addEventListener("focus",this.onTabFocus(i))}))}onTabFocus(t){return()=>{this.internalFocusedTabIndex=t}}disconnectedCallback(){this.tabHeaderRefs.forEach(((t,i)=>{t.removeEventListener("focus",this.onTabFocus(i))}))}componentDidUpdate(){this.updateBorderAndFocus()}updateBorderAndFocus(){this.reRenderBorder();this.updateTabFocusability()}updateTabFocusability(){this.tabHeaderRefs.forEach(((t,i)=>{t.tabIndex=i===this.internalActiveTabIndex?0:-1}))}focusNextTab(){let t=this.internalFocusedTabIndex+1;while(t<this.tabHeaderRefs.length&&this.tabObjects[t].disabled){t++}if(t>=0&&t<this.tabHeaderRefs.length){this.internalFocusedTabIndex=t;this.tabHeaderRefs[t].focus()}}focusPreviousTab(){let t=this.internalFocusedTabIndex-1;while(t>=0&&this.tabObjects[t].disabled){t--}if(t>=0&&t<this.tabHeaderRefs.length){this.internalFocusedTabIndex=t;this.tabHeaderRefs[t].focus()}}getTabItemClass(t){const i=t===this.internalActiveTabIndex&&!this.tabObjects[t].disabled;const s=this.tabObjects[t].disabled;const e=this.tabObjects[t].iconPosition;return`tab-item ${this.fullWidth?"full-width":""} ${i?"active":""} ${s?"disabled":""} ${"icon__"+e}`}handleClick(t,i){this.ifxTabChange.emit({previousTab:this.internalActiveTabIndex,currentTab:i});if(!t.disabled)this.internalActiveTabIndex=i}handleKeyDown(t){if(t.key==="Tab"){if(t.shiftKey){if(this.internalFocusedTabIndex===0){return}else{t.preventDefault();this.focusPreviousTab()}}else{if(this.internalFocusedTabIndex===this.tabHeaderRefs.length-1){return}else{t.preventDefault();this.focusNextTab()}}}else if(t.key==="Enter"){if(this.internalFocusedTabIndex!==-1&&!this.tabObjects[this.internalFocusedTabIndex].disabled){const t=this.internalActiveTabIndex;this.internalActiveTabIndex=this.internalFocusedTabIndex;this.ifxTabChange.emit({previousTab:t,currentTab:this.internalFocusedTabIndex})}}}render(){var t;return s("div",{key:"2616757aeee64761cb775d7a647846f226494647","aria-label":"navigation tabs",class:`tabs ${this.internalOrientation}`},s("ul",{key:"37f459c65c219e7d661c567d6b75384f86c4eb22",role:"tablist",class:"tabs-list"},(t=this.tabObjects)===null\|\|t===void 0?void 0:t.map(((t,i)=>s("li",{class:this.getTabItemClass(i),ref:t=>this.tabHeaderRefs[i]=t,onMouseDown:t=>t.preventDefault(),onClick:()=>this.handleClick(t,i),"aria-selected":i===this.internalActiveTabIndex?"true":"false","aria-disabled":t.disabled?"true":"false",role:"tab"},(t===null\|\|t===void 0?void 0:t.icon)?s("ifx-icon",{icon:t.icon}):"",t===null\|\|t===void 0?void 0:t.header))),s("div",{key:"53098862bc4a64329344029c61c5652b41505db6",class:"active-border"})),s("div",{key:"5524ce0fec911af26bdeef4dc7ab2a1546aac53a",class:"tab-content"},Array.from(this.tabObjects).map(((t,i)=>s("div",{style:{display:i===this.internalActiveTabIndex?"block":"none"}},s("slot",{name:`tab-${i}`}))))))}get el(){return e(this)}static get watchers(){return{activeTabIndex:["activeTabIndexChanged"]}}};n.style=o;export{n as ifx_tabs};
2	- //# sourceMappingURL=p-42001a96.entry.js.map

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

@@ -1 +0,0 @@

- {"version":3,"names":["tabsCss","IfxTabsStyle0","IfxTabs","updateBorderOnWindowResize","this","updateBorderAndFocus","setActiveAndFocusedTab","index","tabObjects","length","_a","disabled","internalActiveTabIndex","internalFocusedTabIndex","handleTabHeaderChange","e","tabIndex","target","getAttribute","replace","header","detail","activeTabIndexChanged","newValue","oldValue","componentWillLoad","internalOrientation","orientation","toLowerCase","activeTabIndex","ifxTabChange","emit","previousTab","currentTab","onSlotChange","updateTabStyles","tabHeaderRefs","forEach","tab","classList","toggle","setAttribute","reRenderBorder","borderElement","el","shadowRoot","querySelector","style","left","offsetLeft","width","offsetWidth","top","height","offsetTop","offsetHeight","tabs","querySelectorAll","Array","from","map","icon","iconPosition","tabRefs","setDefaultOrientation","validOrientations","lowercaseOrientation","includes","componentDidLoad","addEventListener","onTabFocus","disconnectedCallback","removeEventListener","componentDidUpdate","updateTabFocusability","focusNextTab","nextIndex","focus","focusPreviousTab","prevIndex","getTabItemClass","isActive","isDisabled","fullWidth","handleClick","handleKeyDown","ev","key","shiftKey","preventDefault","previouslyActiveTabIndex","render","h","class","role","ref","onMouseDown","event","onClick","_","display","name"],"sources":["src/components/tabs/tabs.scss?tag=ifx-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["//ifxTabs.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n}\n\n.tabs {\n display: flex;\n font-family: var(--ifx-font-family);\n width: 100%;\n}\n\n.tabs.horizontal {\n flex-direction: column;\n}\n\n.tabs.vertical {\n flex-direction: row;\n}\n\n.tabs-list {\n display: flex;\n list-style: none;\n padding: 0;\n margin: 0;\n position: relative;\n font-weight: tokens.$ifxFontWeightSemibold;\n}\n\n.tabs-list:focus-within .active-border {\n display: none;\n}\n\n.active-border {\n content: \"\";\n position: absolute;\n transition: left 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out;\n}\n\n.tabs.horizontal .active-border {\n bottom: 0;\n left: 0;\n height: 2px;\n background-color: tokens.$ifxColorOcean500;\n}\n\n.tabs.vertical .tabs-list {\n flex-direction: column;\n border-bottom: none;\n}\n\n.tabs.vertical .tab-content {\n padding-top: 0px;\n padding-left: 32px;\n}\n\n.tabs:not(.vertical) {\n & .tab-item {\n &.full-width { \n flex: 1;\n }\n }\n}\n\n.tab-item {\n // Reduced padding values\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n cursor: pointer;\n position: relative;\n\n &.icon__right {\n flex-direction: row-reverse;\n justify-content: flex-end;\n }\n \n &:hover {\n color: tokens.$ifxColorOcean500;\n }\n \n &:active,\n &.active {\n color: tokens.$ifxColorOcean500;\n }\n\n &:focus,\n &.focus {\n outline: none;\n border-radius: 1px;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n \n // Assuming .active-border is a sibling of .tab-item\n +.active-border {\n display: none; // Hide the active border when the tab is in focus\n }\n }\n \n &.disabled {\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n }\n}\n\n.tabs.vertical .tab-item {\n border-right: 2px solid transparent;\n min-width: 7em;\n}\n\n.tabs.vertical .active-border {\n left: 0;\n top: 0;\n width: 2px;\n background-color: tokens.$ifxColorOcean500;\n}\n\n\n.tab-content {\n padding-top: 24px;\n padding-left: 0px;\n flex-grow: 1;\n}\n\n.tabs.small .tab-item {\n font-size: tokens.$ifxFontSizeS;\n}","//ifxTabs.tsx\nimport { Component, h, Prop, State, Element, Listen, Event, EventEmitter, Watch } from '@stencil/core';\n \n\n\n@Component({\n tag: 'ifx-tabs',\n styleUrl: 'tabs.scss',\n shadow: true\n})\nexport class IfxTabs {\n @Element() el: HTMLElement;\n\n @Prop() orientation: string = \"horizontal\";\n @Prop({ mutable: true }) activeTabIndex: number = 0;\n @Prop() fullWidth: boolean = false;\n\n @State() internalOrientation: string;\n @State() internalActiveTabIndex: number = 0;\n @State() internalFocusedTabIndex: number = 0;\n @State() tabRefs: HTMLElement[] = [];\n @State() tabHeaderRefs: HTMLElement[] = [];\n @State() disabledTabs: string[] = [];\n @State() tabObjects: any[] = [];\n\n @Event() ifxTabChange: EventEmitter;\n\n @Listen('resize', {target: 'window'})\n updateBorderOnWindowResize() {\n this.updateBorderAndFocus();\n }\n\n setActiveAndFocusedTab(index: number) {\n if (index >= this.tabObjects.length) {\n index = this.tabObjects.length - 1;\n }\n if (index < 0) {\n index = 0;\n }\n if (!this.tabObjects[index]?.disabled) {\n this.internalActiveTabIndex = index;\n this.internalFocusedTabIndex = index;\n }\n }\n\n @Listen('tabHeaderChange')\n handleTabHeaderChange(e) { \n const tabIndex = e.target.getAttribute('slot').replace('tab-', '');\n this.tabObjects[tabIndex].header = e.detail;\n this.tabObjects = [...this.tabObjects]; \n }\n \n\n @Watch('activeTabIndex')\n activeTabIndexChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n this.setActiveAndFocusedTab(newValue);\n }\n }\n\n\n\n componentWillLoad() {\n this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';\n if (this.internalActiveTabIndex !== this.activeTabIndex) {\n this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: this.activeTabIndex });\n };\n this.onSlotChange();\n this.setActiveAndFocusedTab(this.activeTabIndex);\n this.updateTabStyles();\n }\n\n updateTabStyles() {\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.classList.toggle('active', index === this.internalActiveTabIndex);\n tab.setAttribute('aria-selected', index === this.internalActiveTabIndex ? 'true' : 'false')\n });\n }\n\n\n // needed for smooth border transition\n reRenderBorder() {\n const borderElement = this.el.shadowRoot.querySelector('.active-border') as HTMLElement;\n if (borderElement && this.tabHeaderRefs[this.internalActiveTabIndex]) {\n if (this.orientation === 'horizontal') {\n\n borderElement.style.left = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;\n borderElement.style.width = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;\n borderElement.style.top = '';\n borderElement.style.height = '';\n } else {\n borderElement.style.top = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;\n borderElement.style.height = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;\n borderElement.style.left = '';\n borderElement.style.width = '';\n }\n }\n }\n\n\n // when a slot is removed / added\n @Listen('slotchange')\n onSlotChange() {\n const tabs = this.el.querySelectorAll('ifx-tab');\n this.tabObjects = Array.from(tabs).map((tab) => {\n return {\n header: tab?.header,\n disabled: tab?.disabled === true,\n icon: tab?.icon,\n iconPosition: tab?.iconPosition\n }\n });\n\n this.tabRefs = Array.from(tabs);\n this.tabRefs.forEach((tab, index) => {\n tab.setAttribute('slot', `tab-${index}`);\n });\n }\n\n setDefaultOrientation() {\n const validOrientations = ['horizontal', 'vertical'];\n const lowercaseOrientation = this.orientation.toLowerCase();\n\n if (!validOrientations.includes(lowercaseOrientation)) {\n this.internalOrientation = 'horizontal';\n } else this.internalOrientation = this.orientation;\n }\n\n componentDidLoad() {\n this.updateBorderAndFocus();\n // Add keyboard event listeners for each tab header\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.addEventListener('focus', this.onTabFocus(index));\n });\n\n }\n\n onTabFocus(index) {\n return () => {\n this.internalFocusedTabIndex = index;\n };\n }\n\n disconnectedCallback() {\n // Remove keyboard event listeners when component is unmounted\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.removeEventListener('focus', this.onTabFocus(index));\n });\n }\n componentDidUpdate() {\n this.updateBorderAndFocus();\n }\n\n private updateBorderAndFocus() {\n this.reRenderBorder()\n this.updateTabFocusability();\n }\n\n private updateTabFocusability() {\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;\n })\n }\n\n\n private focusNextTab() {\n let nextIndex = this.internalFocusedTabIndex + 1;\n while (nextIndex < this.tabHeaderRefs.length && this.tabObjects[nextIndex].disabled) {\n nextIndex++;\n }\n if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {\n this.internalFocusedTabIndex = nextIndex;\n this.tabHeaderRefs[nextIndex].focus();\n }\n }\n\n private focusPreviousTab() {\n let prevIndex = this.internalFocusedTabIndex - 1;\n while ((prevIndex >= 0) && (this.tabObjects[prevIndex].disabled)) {\n prevIndex--;\n }\n if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {\n this.internalFocusedTabIndex = prevIndex;\n this.tabHeaderRefs[prevIndex].focus();\n }\n }\n\n\n private getTabItemClass(index: number) {\n const isActive = index === this.internalActiveTabIndex && !this.tabObjects[index].disabled;\n const isDisabled = this.tabObjects[index].disabled;\n const iconPosition = this.tabObjects[index].iconPosition\n return `tab-item ${this.fullWidth ? 'full-width' : \"\"} ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''} ${'icon__'+iconPosition}`;\n }\n\n private handleClick(tab, index) {\n this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: index })\n if (!tab.disabled) this.internalActiveTabIndex = index;\n\n }\n\n\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Tab') {\n\n if (ev.shiftKey) {\n // Shift + Tab\n if (this.internalFocusedTabIndex === 0) {\n // Allow default behavior to move focus out of component\n return;\n } else {\n ev.preventDefault();\n this.focusPreviousTab();\n }\n } else {\n // Tab\n if (this.internalFocusedTabIndex === this.tabHeaderRefs.length - 1) {\n // Allow default behavior to move focus out of component\n return;\n } else {\n ev.preventDefault();\n this.focusNextTab();\n }\n }\n } else if (ev.key === 'Enter') {\n if (this.internalFocusedTabIndex !== -1 && !this.tabObjects[this.internalFocusedTabIndex].disabled) {\n const previouslyActiveTabIndex = this.internalActiveTabIndex;\n this.internalActiveTabIndex = this.internalFocusedTabIndex;\n this.ifxTabChange.emit({ previousTab: previouslyActiveTabIndex, currentTab: this.internalFocusedTabIndex })\n }\n }\n }\n\n\n render() {\n return (\n <div aria-label=\"navigation tabs\" class={`tabs ${this.internalOrientation}`}>\n <ul role=\"tablist\" class=\"tabs-list\">\n {this.tabObjects?.map((tab, index) => (\n <li\n class={this.getTabItemClass(index)}\n ref={(el) => (this.tabHeaderRefs[index] = el)}\n onMouseDown={(event) => event.preventDefault()}\n onClick={() => this.handleClick(tab, index)}\n aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\n aria-disabled={tab.disabled ? 'true' : 'false'}\n role=\"tab\"\n > \n {tab?.icon ? <ifx-icon icon = {tab.icon}></ifx-icon> : ''}\n {tab?.header}\n </li>\n ))}\n <div class=\"active-border\"></div>\n </ul>\n <div class=\"tab-content\">\n {Array.from(this.tabObjects).map((_, index) => (\n <div style={{ display: index === this.internalActiveTabIndex ? 'block' : 'none' }}>\n <slot name={`tab-${index}`} />\n </div>\n ))}\n </div>\n </div>\n );\n }\n\n}"],"mappings":"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","ignoreList":[]}