@infineon/infineon-design-system-stencil 39.5.3--canary.2143.37c9c6064cb09c60045fa874476272b9551d2e41.0 → 39.5.3--canary.2143.7e22c74e4f4e08bfb2cb8d5e5811adf79267a112.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.
- package/dist/cjs/ifx-alert_2.cjs.entry.js +1 -1
- package/dist/cjs/ifx-basic-table.cjs.entry.js +1 -1
- package/dist/cjs/ifx-faq.cjs.entry.js +1 -1
- package/dist/cjs/ifx-filter-accordion.cjs.entry.js +2 -2
- package/dist/cjs/ifx-filter-bar.cjs.entry.js +1 -1
- package/dist/cjs/ifx-filter-search.cjs.entry.js +1 -1
- package/dist/cjs/ifx-filter-type-group.cjs.entry.js +1 -1
- package/dist/cjs/ifx-list-entry.cjs.entry.js +1 -1
- package/dist/cjs/ifx-multiselect_2.cjs.entry.js +10 -10
- package/dist/cjs/ifx-search-field.cjs.entry.js +2 -59
- package/dist/cjs/ifx-search-field.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-search-field.entry.cjs.js.map +1 -1
- package/dist/cjs/ifx-segment.cjs.entry.js +1 -1
- package/dist/cjs/ifx-segmented-control.cjs.entry.js +2 -2
- package/dist/cjs/ifx-select.cjs.entry.js +2 -2
- package/dist/cjs/ifx-slider.cjs.entry.js +2 -2
- package/dist/cjs/ifx-spinner_2.cjs.entry.js +4 -4
- package/dist/cjs/ifx-status.cjs.entry.js +1 -1
- package/dist/cjs/ifx-step.cjs.entry.js +4 -4
- package/dist/cjs/ifx-stepper.cjs.entry.js +2 -2
- package/dist/cjs/ifx-switch.cjs.entry.js +1 -1
- package/dist/cjs/ifx-tab.cjs.entry.js +1 -1
- package/dist/cjs/ifx-table.cjs.entry.js +2 -2
- package/dist/cjs/ifx-tabs.cjs.entry.js +2 -2
- package/dist/cjs/ifx-templates-ui.cjs.entry.js +1 -1
- package/dist/cjs/ifx-textarea.cjs.entry.js +2 -2
- package/dist/cjs/ifx-tooltip.cjs.entry.js +4 -4
- package/dist/cjs/ifx-tree-view-item.cjs.entry.js +2 -2
- package/dist/cjs/ifx-tree-view.cjs.entry.js +1 -1
- package/dist/collection/components/search-field/search-field.js +2 -59
- package/dist/collection/components/search-field/search-field.js.map +1 -1
- package/dist/collection/components/segmented-control/segment/segment.js +1 -1
- package/dist/collection/components/segmented-control/segmented-control.js +2 -2
- package/dist/collection/components/select/multi-select/multiselect-option.js +4 -4
- package/dist/collection/components/select/multi-select/multiselect.js +6 -6
- package/dist/collection/components/select/single-select/select.js +2 -2
- package/dist/collection/components/slider/slider.js +2 -2
- package/dist/collection/components/spinner/spinner.js +2 -2
- package/dist/collection/components/status/status.js +1 -1
- package/dist/collection/components/stepper/step/step.js +4 -4
- package/dist/collection/components/stepper/stepper.js +2 -2
- package/dist/collection/components/switch/switch.js +1 -1
- package/dist/collection/components/table-advanced-version/filter-bar/filter-bar.js +1 -1
- package/dist/collection/components/table-advanced-version/filter-type-group/filter-accordion/filter-accordion.js +2 -2
- package/dist/collection/components/table-advanced-version/filter-type-group/filter-search/filter-search.js +1 -1
- package/dist/collection/components/table-advanced-version/filter-type-group/filter-type-group.js +1 -1
- package/dist/collection/components/table-advanced-version/list/list-entry/list-entry.js +1 -1
- package/dist/collection/components/table-advanced-version/table.js +2 -2
- package/dist/collection/components/table-basic-version/table.js +1 -1
- package/dist/collection/components/tabs/tab.js +1 -1
- package/dist/collection/components/tabs/tabs.js +2 -2
- package/dist/collection/components/templates/template/template.js +1 -1
- package/dist/collection/components/templates/templates-ui/templates-ui.js +1 -1
- package/dist/collection/components/text-field/text-field.js +2 -2
- package/dist/collection/components/textarea/textarea.js +2 -2
- package/dist/collection/components/tooltip/tooltip.js +4 -4
- package/dist/collection/components/tree-view/tree-view-item.js +2 -2
- package/dist/collection/components/tree-view/tree-view.js +1 -1
- package/dist/collection/stories/setup-and-installation/faq/faq.js +1 -1
- package/dist/components/ifx-basic-table.js +1 -1
- package/dist/components/ifx-faq.js +1 -1
- package/dist/components/ifx-filter-accordion.js +2 -2
- package/dist/components/ifx-filter-bar.js +1 -1
- package/dist/components/ifx-filter-search.js +2 -2
- package/dist/components/ifx-filter-type-group.js +1 -1
- package/dist/components/ifx-icons-preview.js +1 -1
- package/dist/components/ifx-list-entry.js +1 -1
- package/dist/components/ifx-multiselect-option.js +1 -1
- package/dist/components/ifx-multiselect.js +1 -1
- package/dist/components/ifx-pagination.js +1 -1
- package/dist/components/ifx-search-bar.js +1 -1
- package/dist/components/ifx-search-field.js +1 -1
- package/dist/components/ifx-segment.js +1 -1
- package/dist/components/ifx-segmented-control.js +2 -2
- package/dist/components/ifx-select.js +1 -1
- package/dist/components/ifx-set-filter.js +5 -5
- package/dist/components/ifx-slider.js +2 -2
- package/dist/components/ifx-spinner.js +1 -1
- package/dist/components/ifx-status.js +1 -1
- package/dist/components/ifx-step.js +4 -4
- package/dist/components/ifx-stepper.js +2 -2
- package/dist/components/ifx-switch.js +1 -1
- package/dist/components/ifx-tab.js +1 -1
- package/dist/components/ifx-table.js +4 -4
- package/dist/components/ifx-tabs.js +2 -2
- package/dist/components/ifx-template.js +1 -1
- package/dist/components/ifx-templates-ui.js +4 -4
- package/dist/components/ifx-text-field.js +1 -1
- package/dist/components/ifx-textarea.js +2 -2
- package/dist/components/ifx-tooltip.js +4 -4
- package/dist/components/ifx-tree-view-item.js +2 -2
- package/dist/components/ifx-tree-view.js +1 -1
- package/dist/components/{p-Bcpf7l3H.js → p-BO6nWGLo.js} +4 -61
- package/dist/components/p-BO6nWGLo.js.map +1 -0
- package/dist/components/{p-DdOsLLJc.js → p-BxWZjkxk.js} +4 -4
- package/dist/components/{p-DdOsLLJc.js.map → p-BxWZjkxk.js.map} +1 -1
- package/dist/components/{p-C53lC4vo.js → p-D7r3u21_.js} +3 -3
- package/dist/components/{p-C53lC4vo.js.map → p-D7r3u21_.js.map} +1 -1
- package/dist/components/{p-B61i82g5.js → p-DGAOPH_P.js} +4 -4
- package/dist/components/{p-B61i82g5.js.map → p-DGAOPH_P.js.map} +1 -1
- package/dist/components/{p-BFlcr2_N.js → p-DQYngnHn.js} +9 -9
- package/dist/components/{p-BFlcr2_N.js.map → p-DQYngnHn.js.map} +1 -1
- package/dist/components/{p-DmM40b2X.js → p-Dce2xAGf.js} +5 -5
- package/dist/components/{p-DmM40b2X.js.map → p-Dce2xAGf.js.map} +1 -1
- package/dist/components/{p-Cmd43Oxg.js → p-DxKWinW1.js} +6 -6
- package/dist/components/{p-Cmd43Oxg.js.map → p-DxKWinW1.js.map} +1 -1
- package/dist/components/{p-GP5uSTr1.js → p-kFkxPh9g.js} +4 -4
- package/dist/components/{p-GP5uSTr1.js.map → p-kFkxPh9g.js.map} +1 -1
- package/dist/esm/ifx-alert_2.entry.js +1 -1
- package/dist/esm/ifx-basic-table.entry.js +1 -1
- package/dist/esm/ifx-faq.entry.js +1 -1
- package/dist/esm/ifx-filter-accordion.entry.js +2 -2
- package/dist/esm/ifx-filter-bar.entry.js +1 -1
- package/dist/esm/ifx-filter-search.entry.js +1 -1
- package/dist/esm/ifx-filter-type-group.entry.js +1 -1
- package/dist/esm/ifx-list-entry.entry.js +1 -1
- package/dist/esm/ifx-multiselect_2.entry.js +10 -10
- package/dist/esm/ifx-search-field.entry.js +2 -59
- package/dist/esm/ifx-search-field.entry.js.map +1 -1
- package/dist/esm/ifx-segment.entry.js +1 -1
- package/dist/esm/ifx-segmented-control.entry.js +2 -2
- package/dist/esm/ifx-select.entry.js +2 -2
- package/dist/esm/ifx-slider.entry.js +2 -2
- package/dist/esm/ifx-spinner_2.entry.js +4 -4
- package/dist/esm/ifx-status.entry.js +1 -1
- package/dist/esm/ifx-step.entry.js +4 -4
- package/dist/esm/ifx-stepper.entry.js +2 -2
- package/dist/esm/ifx-switch.entry.js +1 -1
- package/dist/esm/ifx-tab.entry.js +1 -1
- package/dist/esm/ifx-table.entry.js +2 -2
- package/dist/esm/ifx-tabs.entry.js +2 -2
- package/dist/esm/ifx-templates-ui.entry.js +1 -1
- package/dist/esm/ifx-textarea.entry.js +2 -2
- package/dist/esm/ifx-tooltip.entry.js +4 -4
- package/dist/esm/ifx-tree-view-item.entry.js +2 -2
- package/dist/esm/ifx-tree-view.entry.js +1 -1
- package/dist/infineon-design-system-stencil/ifx-search-field.entry.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/{p-98c2e3a9.entry.js → p-07e1efa5.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-9ea43bb7.entry.js → p-0d5a32ec.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-fe373208.entry.js → p-1fcb504e.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-2537f7fe.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-2a7e30cf.entry.js +2 -0
- package/dist/infineon-design-system-stencil/{p-22a45c93.entry.js.map → p-2a7e30cf.entry.js.map} +1 -1
- package/dist/infineon-design-system-stencil/{p-242fc6b0.entry.js → p-2b4778da.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-54785004.entry.js → p-39a29970.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-dcc7240e.entry.js → p-3b5cf4ca.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-0d9da371.entry.js → p-44026267.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-e7b72d33.entry.js → p-4fca78a6.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-6504f8d0.entry.js → p-6162a610.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-8ab64504.entry.js → p-8aabbd26.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-8d19ae4f.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-8d19ae4f.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-0d4211db.entry.js → p-8eef85bc.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-913a8693.entry.js → p-9577d799.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-9c93e258.entry.js +2 -0
- package/dist/infineon-design-system-stencil/{p-b5efb1d6.entry.js → p-9dbede78.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-f5811026.entry.js → p-a827c4bc.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-13fed6df.entry.js → p-b3ba9994.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-bfbe3ddc.entry.js +2 -0
- package/dist/infineon-design-system-stencil/{p-c9d594e1.entry.js.map → p-bfbe3ddc.entry.js.map} +1 -1
- package/dist/infineon-design-system-stencil/{p-453bd9bd.entry.js → p-c3362d41.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-3f3a5140.entry.js → p-ddff8e4e.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-372fa9eb.entry.js → p-ebce6648.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-6407c496.entry.js → p-f06af3d9.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-af1e0cb5.entry.js → p-f855d12d.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-83816596.entry.js → p-fc030370.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-eed36710.entry.js → p-fef185c2.entry.js} +2 -2
- package/dist/types/components/search-field/search-field.d.ts +0 -4
- package/package.json +1 -1
- package/dist/components/p-Bcpf7l3H.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-22a45c93.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-5b955e4e.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-5b955e4e.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-ba4ee343.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-c9d594e1.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-d3a6bbf7.entry.js +0 -2
- /package/dist/infineon-design-system-stencil/{p-98c2e3a9.entry.js.map → p-07e1efa5.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-9ea43bb7.entry.js.map → p-0d5a32ec.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-fe373208.entry.js.map → p-1fcb504e.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-d3a6bbf7.entry.js.map → p-2537f7fe.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-242fc6b0.entry.js.map → p-2b4778da.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-54785004.entry.js.map → p-39a29970.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-dcc7240e.entry.js.map → p-3b5cf4ca.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-0d9da371.entry.js.map → p-44026267.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-e7b72d33.entry.js.map → p-4fca78a6.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-6504f8d0.entry.js.map → p-6162a610.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-8ab64504.entry.js.map → p-8aabbd26.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-0d4211db.entry.js.map → p-8eef85bc.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-913a8693.entry.js.map → p-9577d799.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-ba4ee343.entry.js.map → p-9c93e258.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-b5efb1d6.entry.js.map → p-9dbede78.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-f5811026.entry.js.map → p-a827c4bc.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-13fed6df.entry.js.map → p-b3ba9994.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-453bd9bd.entry.js.map → p-c3362d41.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-3f3a5140.entry.js.map → p-ddff8e4e.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-372fa9eb.entry.js.map → p-ebce6648.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-6407c496.entry.js.map → p-f06af3d9.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-af1e0cb5.entry.js.map → p-f855d12d.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-83816596.entry.js.map → p-fc030370.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-eed36710.entry.js.map → p-fef185c2.entry.js.map} +0 -0
|
@@ -13,7 +13,7 @@ export class ListEntry {
|
|
|
13
13
|
this.ifxListEntryChange.emit({ label: this.label, value: this.value, type: this.type });
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
|
-
return (h("div", { key: '
|
|
16
|
+
return (h("div", { key: 'a141d7bb36e2a1b02b38f72fb4d299fc4b3b3d9f', class: "wrapper" }, this.type === 'checkbox' ? (h("div", { class: "list-entry" }, h("ifx-checkbox", { size: "s", checked: this.value }, this.label))) : (h("div", { class: "list-entry" }, h("ifx-radio-button", { size: "s", checked: this.value }, this.label)))));
|
|
17
17
|
}
|
|
18
18
|
static get is() { return "ifx-list-entry"; }
|
|
19
19
|
static get encapsulation() { return "shadow"; }
|
|
@@ -829,12 +829,12 @@ export class Table {
|
|
|
829
829
|
};
|
|
830
830
|
}
|
|
831
831
|
const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : this.filterOrientation === 'none' ? '' : 'sidebar-layout';
|
|
832
|
-
return (h(Host, { key: '
|
|
832
|
+
return (h(Host, { key: '5ca9a98b3d9f3643267347c129448807ef091b1d' }, h("div", { key: 'a43cc367677b3d5503d1777e7d3387c3e7728552', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '2d8515b2a51d6ff0ea994bbbe9bb2ec61102893e', class: "sidebar-btn" }, h("ifx-button", { key: 'e25b8b82e77540add84ddf8d2441b003e583f686', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: '0d24681cb5b94738ae0c20b155624f24338a81be', icon: "cross-16" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: '18e2c75dee361e00af080121ff55cf65cd387f0d', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: '1faca6366ba119a0c6a705592cfe445bf76942c1', class: "sidebar-container" }, h("div", { key: '0a3fff14a7bc66ce75d6ae61952394cc7a3d00dc', class: "filters-title-container" }, h("span", { key: '7ec37d5e1851031742175e3a49dfc5a3dd8bba96', class: "filters-title" }, "Filters")), h("div", { key: 'd2e266618507e331cd16f59aa14dfbcee59dc466', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && h("slot", { key: '141ecfc63215d1c1dd1eaa2a6a3c078a6e7c1a8b', name: "sidebar-filter" })))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '2d6074ee94f2fe8ee6810bdf803c10914407943f', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && h("slot", { key: '02db348ae21095d84af9f7a9f248e1c677cb4690', name: "topbar-filter" }))), h("div", { key: '30ddc0cf786081cdae981b4b03768913883f9919', class: "table-pagination-wrapper" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (h("div", { key: 'e60cd824cc2cd7728a70e88f87c89f493060ebd7', class: "filter-chips" }, Object.keys(this.currentFilters).map(name => {
|
|
833
833
|
const filter = this.currentFilters[name];
|
|
834
834
|
const filterValues = filter.filterValues;
|
|
835
835
|
const isMultiSelect = filter.type !== 'text';
|
|
836
836
|
return filterValues.length > 0 ? (h("ifx-chip", { placeholder: name, size: "large", variant: isMultiSelect ? 'multi' : 'single', readOnly: true, value: filterValues, key: name }, filterValues.map(filterValue => (h("ifx-chip-item", { value: filterValue, selected: true, key: filterValue }, filterValue))))) : null;
|
|
837
|
-
}))), h("div", { key: '
|
|
837
|
+
}))), h("div", { key: 'f6bed921978fd2b696c0944e7b3dc80eb98f621a', class: "headline-wrapper" }, this.filterOrientation !== 'none' && this.headline && (h("div", { key: 'a911e4fb2f05eab480ffca0dc4ae3007a531e419', class: "matching-results-container" }, h("span", { key: '2675ad1c927e07127d022b7c193319c6b17c7682', class: "matching-results-count" }, "(", this.matchingResultsCount, ")"), h("span", { key: '199e4cca5e5bd42852ede1b8deb450cd66e8e685', class: "matching-results-text" }, this.headline))), h("div", { key: '8ec43a83a2bdd6baebc640dfbdf8ead4596e6f50', class: "inner-buttons-wrapper" }, h("slot", { key: '3cd7b3ac89922c1fdd8fe3fef401a2fc5ac0d9e4', name: "inner-button" }))), h("div", { key: '8e9815ae1df4d270b7a76637d99895701a608615', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: '81f9d463af05d07a1d1b0713ce9b495705788d84', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ''}`, style: style, ref: el => (this.container = el) })), h("div", { key: '91088c9560df8fe0bc4f6f3388aa604621c3797e', class: "pagination-wrapper" }, this.pagination ? (h("ifx-pagination", { total: this.serverSidePagination ? this.matchingResultsCount : this.allRowData.length, "current-page": this.currentPage, "items-per-page": this.internalItemsPerPage })) : null))))));
|
|
838
838
|
}
|
|
839
839
|
hasButtonCol() {
|
|
840
840
|
return this.getColData().some(column => column.field === 'button');
|
|
@@ -152,7 +152,7 @@ export class Table {
|
|
|
152
152
|
return {};
|
|
153
153
|
}
|
|
154
154
|
render() {
|
|
155
|
-
return (h(Host, { key: '
|
|
155
|
+
return (h(Host, { key: 'f6d04d5333ee1e105a65b9e39b79c80856d19854' }, h("div", { key: 'ad141399ab5fc164a8750ff6ed0b695ddd784fd5', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '8393218ed13358ec0cd59a9a410dbe5bc48aca4e', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
|
|
156
156
|
}
|
|
157
157
|
static get is() { return "ifx-basic-table"; }
|
|
158
158
|
static get originalStyleUrls() {
|
|
@@ -8,7 +8,7 @@ export class IfxTab {
|
|
|
8
8
|
this.tabHeaderChange.emit(this.header);
|
|
9
9
|
}
|
|
10
10
|
render() {
|
|
11
|
-
return h("slot", { key: '
|
|
11
|
+
return h("slot", { key: '9e488e9a6cf5496a6e0ccfb3790786f4b6295ad7' });
|
|
12
12
|
}
|
|
13
13
|
static get is() { return "ifx-tab"; }
|
|
14
14
|
static get originalStyleUrls() {
|
|
@@ -285,11 +285,11 @@ export class IfxTabs {
|
|
|
285
285
|
}
|
|
286
286
|
render() {
|
|
287
287
|
var _a, _b;
|
|
288
|
-
return (h("div", { key: '
|
|
288
|
+
return (h("div", { key: 'f70ff288c22c6e17d9af254f9b6f4f874a76b4ec', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation} ${this.fullWidth ? 'full-width-enabled' : ''}` }, this.internalOrientation === 'horizontal' ? (h("div", { class: "tabs-container" }, h("ifx-icon-button", { shape: "round", variant: "tertiary", icon: "chevronLeft16", size: "s", disabled: false, "aria-label": "Scroll tabs left", onClick: () => this.scrollLeft(), class: `scroll-button scroll-left ${!this.canScrollLeft ? 'hidden' : ''}` }), h("ul", { role: "tablist", class: "tabs-list scrollable", ref: (el) => (this.tabsListElement = el), onScroll: () => this.onTabsListScroll() }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
|
|
289
289
|
_a.map((tab, index) => (h("li", { class: this.getTabItemClass(index), ref: (el) => (this.tabHeaderRefs[index] = el), onMouseDown: (event) => event.preventDefault(), onClick: () => this.handleClick(tab, index), "aria-selected": index === this.internalActiveTabIndex ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', role: "tab" }, (tab === null || tab === void 0 ? void 0 : tab.icon) ? h("ifx-icon", { icon: tab.icon }) : '', tab === null || tab === void 0 ? void 0 :
|
|
290
290
|
tab.header))), h("div", { class: "active-border" })), h("ifx-icon-button", { shape: "round", variant: "tertiary", icon: "chevronRight16", size: "s", disabled: false, "aria-label": "Scroll tabs right", onClick: () => this.scrollRight(), class: `scroll-button scroll-right ${!this.canScrollRight ? 'hidden' : ''}` }))) : (h("ul", { role: "tablist", class: "tabs-list" }, (_b = this.tabObjects) === null || _b === void 0 ? void 0 :
|
|
291
291
|
_b.map((tab, index) => (h("li", { class: this.getTabItemClass(index), ref: (el) => (this.tabHeaderRefs[index] = el), onMouseDown: (event) => event.preventDefault(), onClick: () => this.handleClick(tab, index), "aria-selected": index === this.internalActiveTabIndex ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', role: "tab" }, (tab === null || tab === void 0 ? void 0 : tab.icon) ? h("ifx-icon", { icon: tab.icon }) : '', tab === null || tab === void 0 ? void 0 :
|
|
292
|
-
tab.header))), h("div", { class: "active-border" }))), h("div", { key: '
|
|
292
|
+
tab.header))), h("div", { class: "active-border" }))), h("div", { key: '87ad3a3d79ae5bcbaa7e21eb8765e79498db94a4', class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
|
|
293
293
|
}
|
|
294
294
|
static get is() { return "ifx-tabs"; }
|
|
295
295
|
static get encapsulation() { return "shadow"; }
|
|
@@ -128,7 +128,7 @@ export class Template {
|
|
|
128
128
|
}
|
|
129
129
|
}
|
|
130
130
|
render() {
|
|
131
|
-
return (h("div", { key: '
|
|
131
|
+
return (h("div", { key: 'd08a82aa561c8fcf22ef3175f49ef8f52df575ae' }, this.isTemplatePage
|
|
132
132
|
?
|
|
133
133
|
h("div", { class: "template__page-wrapper" }, !this.repoUrl && !this.repoError &&
|
|
134
134
|
h("div", null, h("h3", null, "Your repository is getting ready.."), h("p", null, "This will only take a minute.")), this.isLoading && !this.repoError && h("div", null, h("ifx-spinner", { variant: 'default', size: 's' })), this.repoUrl && h("ifx-link", { href: this.repoUrl, target: "_parent", size: "m", variant: "underlined" }, "Your repository"), this.repoError && h("div", null, this.repoError))
|
|
@@ -40,7 +40,7 @@ export class TemplatesUI {
|
|
|
40
40
|
alertWrapper.classList.remove('show');
|
|
41
41
|
}
|
|
42
42
|
render() {
|
|
43
|
-
return (h("div", { key: '
|
|
43
|
+
return (h("div", { key: '7e5705948cf3ba1031ca8bafadbfd10c544c135d', class: 'templates__container' }, h("div", { key: '5d366e0447f6f08906df46ec4c27581a373b06b8', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: 'a9e11e69c744dc7480695eaa2c7db1f01f5421c6', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: 'fd0ada1d1eb601524bf20b1d3393247a0c5f0b3c', class: "alert__wrapper" }, h("ifx-alert", { key: '0f85662514116d2b8095519f3c42ec4b881a291e', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-16" }, "All fields are mandatory"))), h("h2", { key: '0af9c8f92803187b7675c3f355b9f462341f8a46', class: "templates__title" }, "Choose your template"), h("div", { key: 'e45bcc48f668a5c558e74df6569456a609be5051', class: "templates__wrapper" }, h("ifx-template", { key: '2f5847e8614d6592bcae5ee526e9499907e8602d', name: 'template-01', thumbnail: this.tableTemplate }), h("ifx-template", { key: '487784c48c78d411b57fac0cb876e683b2ede53d', name: 'template-02', thumbnail: this.wizardTemplate }))));
|
|
44
44
|
}
|
|
45
45
|
static get is() { return "ifx-templates-ui"; }
|
|
46
46
|
static get encapsulation() { return "shadow"; }
|
|
@@ -58,11 +58,11 @@ export class TextField {
|
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
60
|
render() {
|
|
61
|
-
return (h("div", { key: '
|
|
61
|
+
return (h("div", { key: '12e6b8d26ccc0eab73dcb19b4018078674927dc8', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.readOnly ? 'readonly' : ''} ${this.disabled && !this.error ? 'disabled' : ''}` }, h("div", { key: 'b95924485acf48899929fcb8a26e3c8720db95e5', class: "textInput__top-wrapper" }, this.label && (h("label", { key: '05288ae127992d7ded1c084bc1a3757ae7511d0a', htmlFor: this.internalId }, h("span", { key: 'a5decc45b22e36cca90df463902281c2c482a5ea' }, this.label), this.required && h("span", { key: '557e2b1c472ae0eda179bb0b24397a1e70d85885', class: `required ${this.error && !this.readOnly ? 'error' : ''}` }, "*")))), h("div", { key: '9cd072b6e7a1b0fe13de34a5ee050e3c43ad2f91', class: "textInput__bottom-wrapper" }, h("div", { key: '5141ca10eb838e18205975294f2761b2c810912c', class: "input-container" }, this.icon && h("ifx-icon", { key: '0b1d853a3f6254b082abf0c56a2ebf3a2d74aab0', class: "input-icon", icon: this.icon }), h("input", { key: 'fb29bae557549e825ae194a6b2aa36577c019e3f', ref: el => (this.inputElement = el), disabled: this.disabled && !this.error, autocomplete: this.autocomplete, type: this.internalType, id: this.internalId, value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, readonly: this.readOnly, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ''}
|
|
62
62
|
${this.error ? 'error' : ''}
|
|
63
63
|
${this.readOnly ? 'readonly' : ''}
|
|
64
64
|
${this.size === 's' ? 'input-s' : ''}
|
|
65
|
-
${this.success ? 'success' : ''}` }), this.showDeleteIcon && this.value && h("ifx-icon", { key: '
|
|
65
|
+
${this.success ? 'success' : ''}` }), this.showDeleteIcon && this.value && h("ifx-icon", { key: 'd2136e27a8754b0c12ecdc658fa450c8dbdd6bae', class: "delete-icon", icon: "cRemove16", onClick: () => this.handleDeleteContent() })), this.caption && (h("div", { key: 'f4bc3ffb027f90259d1b97c5918fb2f4b005d263', class: `textInput__bottom-wrapper-caption ${this.error && !this.readOnly ? 'error' : ''} ${this.disabled && !this.readOnly && !this.error ? 'disabled' : ''}` }, this.caption)))));
|
|
66
66
|
}
|
|
67
67
|
static get is() { return "ifx-text-field"; }
|
|
68
68
|
static get encapsulation() { return "shadow"; }
|
|
@@ -54,8 +54,8 @@ export class TextArea {
|
|
|
54
54
|
}
|
|
55
55
|
render() {
|
|
56
56
|
var _a, _b;
|
|
57
|
-
return (h(Host, { key: '
|
|
58
|
-
_a.trim(), this.required && (h("span", { key: '
|
|
57
|
+
return (h(Host, { key: '3acb2b92e5b68b2a1225261ee0436cd933f58423', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled && !this.error ? 'disabled' : ''}` }, h("label", { key: '2701b117fb7b8b90f5152b7f90903cfd18062068', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
|
|
58
|
+
_a.trim(), this.required && (h("span", { key: 'd5e19fc76636ad43b721e304e20ac2dc94e6b142', class: `required ${this.error ? 'error' : ""}` }, "*"))), h("div", { key: '5bd302b25a710280c25fd0f846f241f9b70ec025', class: 'wrapper__textarea' }, h("textarea", { key: 'fc5467fabf5455aa11fe2f63d817bec2057b367f', "aria-label": 'a textarea', "aria-value": this.value, "aria-disabled": this.disabled && !this.error, id: this.inputId, style: { resize: this.resize }, name: this.name ? this.name : this.inputId, cols: this.cols, rows: this.rows, maxlength: this.maxlength, wrap: this.wrap, disabled: this.disabled && !this.error, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, onInput: (e) => this.handleOnInput(e) })), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: '47fde67f68dad5cd1c5345f800a3c1be191b16a2', class: 'wrapper__caption' }, this.caption.trim()))));
|
|
59
59
|
}
|
|
60
60
|
static get is() { return "ifx-textarea"; }
|
|
61
61
|
static get encapsulation() { return "shadow"; }
|
|
@@ -155,10 +155,10 @@ export class Tooltip {
|
|
|
155
155
|
'tooltip-extended': true,
|
|
156
156
|
'visible': this.tooltipVisible,
|
|
157
157
|
};
|
|
158
|
-
return (h("div", { key: '
|
|
159
|
-
h("div", { key: '
|
|
160
|
-
h("div", { key: '
|
|
161
|
-
h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("path", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" }))), h("div", { key: '
|
|
158
|
+
return (h("div", { key: '44e197c5cfd7555bf022706c5613cf58c52e500f', "aria-label": this.ariaLabel, "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: '92e9885b407e5b4d75ac42a99f4c8e38c605282c' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: 'cfd8ca047febd3c90dc6e21e4cb7f43ffa074714', class: tooltipDismissible }, h("button", { key: 'ca118e710c828c1f2fa4e51e32c5393f1edb658a', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '16540451287b0e44312cebf0e350f300f46df1c2', icon: "cross16" })), h("div", { key: '1d28cf9e797d9379e58ec5a7af46df8003d5c10a', class: "tooltip-dismissible-content" }, this.header && h("div", { key: '5b987564d09dac6811d29f580a0bbccd0767ec04', class: "tooltip-dismissible-header" }, this.header), h("div", { key: 'f35e8cb22e955402c86a259573519d2e617dced3', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: '82390b33fcd8a73b9e807aa90bad90cd0ad91b74', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '960cfd69559097c32d7ae4121ebe651c6b8697d7', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
|
|
159
|
+
h("div", { key: '73d834f2482371bb501ee364b051529a597b1525', class: tooltipCompact }, this.text, h("svg", { key: '065c392dcc7c5a5415e45cb52f5caceb3c92df31', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '202d11b6991ae634094325080361eec7403266f6', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
|
|
160
|
+
h("div", { key: '70578c0e99df473b0e0210fb1e56244811834173', class: tooltipExtended }, h("slot", { key: '02b35b375b0c0d1cb494830086ae4edfc38fbfa6', name: "icon" }, this.icon ? h("div", { class: "extended_icon" }, h("ifx-icon", { icon: this.icon })) :
|
|
161
|
+
h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("path", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" }))), h("div", { key: '625be0ce900bc797d0c05f6f8498f12e19f6794c', class: "tooltip-extended-content" }, this.header && h("div", { key: 'd3479203fc56f319f80ec3f979b1aed21634a49a', class: "tooltip-extended-header" }, this.header), h("div", { key: '5e13b3f016eecf9bb626e21a42e729892779d15a', class: "tooltip-extended-body" }, this.text)), h("svg", { key: '10ac50c0dd8f34c3c8f72035a767322a44944a9b', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'dacdc6382309cddfb8561c71c5a02f078dc3839d', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
|
|
162
162
|
}
|
|
163
163
|
static get is() { return "ifx-tooltip"; }
|
|
164
164
|
static get encapsulation() { return "shadow"; }
|
|
@@ -356,12 +356,12 @@ export class TreeViewItem {
|
|
|
356
356
|
};
|
|
357
357
|
}
|
|
358
358
|
render() {
|
|
359
|
-
return (h("div", { key: '
|
|
359
|
+
return (h("div", { key: '7f82fd451f8afdfb0ae1ca36983e13dd3b6a277e', class: {
|
|
360
360
|
'tree-item': true,
|
|
361
361
|
'tree-item--expanded': this.isExpanded,
|
|
362
362
|
'tree-item--has-children': this.hasChildren,
|
|
363
363
|
'tree-item--disabled': this.disabled,
|
|
364
|
-
}, role: "treeitem", "aria-expanded": this.isExpanded ? 'true' : 'false', "data-level": this.level, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel }, h("div", { key: '
|
|
364
|
+
}, role: "treeitem", "aria-expanded": this.isExpanded ? 'true' : 'false', "data-level": this.level, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel }, h("div", { key: 'fedfbc6127aeb90e3b337abb8914aae17cf5877f', class: "tree-item__content" }, h("div", { key: '7dbe913bfb86cc146f050b17369d4217eeca62cc', class: "tree-item__checkbox-container", onClick: e => e.stopPropagation() }, h("ifx-checkbox", { key: 'f83f76a3625ea5749093a72adfb1931d0ceee39e', size: 's', checked: this.partialChecked ? false : this.isChecked, indeterminate: this.partialChecked, onIfxChange: this.handleCheckboxChange, disabled: this.disabled })), h("div", { key: 'fa7286c93820bb5a310f14dca49b4d80bf4ce1fd', class: "tree-item__header", style: { paddingLeft: `${this.level * 24 + 10}px` }, onClick: this.handleHeaderClick, tabIndex: -1, "aria-disabled": this.disabled ? 'true' : undefined }, this.hasChildren && (h("div", { key: '3c2e63dbb58adb139ec1921d91d9bc7d8741f2d2', class: "tree-item__chevron-container", onClick: this.toggleExpand }, h("ifx-icon", { key: '87a2bee50224be75079be1d66c25d71a7d5923e7', class: `tree-item__chevron ${this.isExpanded ? 'chevron-down' : 'chevron-right'}`, icon: "chevron-right-16" }), h("div", { key: '3a8c047a59035c06386688205e65887b48f59b26', class: "tree-item__line" }))), h("div", { key: '0139bd68957970a31837d004a24eb7f51238e298', class: "tree-item__label-icon-container", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown }, h("div", { key: 'd7c3998bd26140932eb3de30876836dd7aa73b17', class: "tree-item__icon-container" }, this.hasChildren ? (h(Fragment, null, h("ifx-icon", { class: { 'icon--hidden': this.isExpanded }, icon: "folder-16" }), h("ifx-icon", { class: { 'icon--hidden': !this.isExpanded }, icon: "folder-open-16" }))) : (h("ifx-icon", { icon: "file-16" }))), h("span", { key: 'fb8a2e209e272ba63f985aef2bb7df61465a2dc1', class: "tree-item__label" }, h("slot", { key: '4f40641dca3c6c59ab33b6510aa0bc54e05a7f49' }))))), this.isExpanded && h("div", { key: 'b24f1f5c2e68a27767178923b6cce7acb0b4a90a', class: "tree-item__children" }, h("slot", { key: 'd35b26f99069bd40ca09063d1cf3a1ffc6eb5344', name: "children" }))));
|
|
365
365
|
}
|
|
366
366
|
static get is() { return "ifx-tree-view-item"; }
|
|
367
367
|
static get encapsulation() { return "shadow"; }
|
|
@@ -36,7 +36,7 @@ export class TreeView {
|
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
38
|
render() {
|
|
39
|
-
return (h("div", { key: '
|
|
39
|
+
return (h("div", { key: 'a1cb9d3bc5e45cde24190496116a807f86306445', class: `tree-view ${this.disableAllItems ? ' tree-view--disabled' : ''}`, role: "tree", "aria-label": this.ariaLabel }, this.label && this.label.trim() !== '' && h("div", { key: '0805e6d215da159bed4ad41d725d6daa0be9cfad', class: "tree-view__label" }, this.label), h("slot", { key: '83ab34ccac29c740d47310fcfd47ecabc0081ce2', ref: this.handleSlotRef })));
|
|
40
40
|
}
|
|
41
41
|
static get is() { return "ifx-tree-view"; }
|
|
42
42
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
export class Faq {
|
|
3
3
|
render() {
|
|
4
|
-
return (h("div", { key: '
|
|
4
|
+
return (h("div", { key: 'd9d7bd3c764cf067643c553edec9ef4fee4fd67e', class: 'container' }, h("ifx-accordion", { key: 'f275a73f5beb84d14ca616341994098300a9609a' }, h("ifx-accordion-item", { key: 'e99f371ca8e210b4a75d877e4dd4c9b224a66ddb', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), h("ifx-accordion-item", { key: '94ff35a6859266b9ba7d89776eb7c6c203ba37cf', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), h("ifx-accordion-item", { key: '2e98a643ad287859b90eff1a843410ec58291792', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), h("ifx-accordion-item", { key: 'ecd64d4fd87408466f64e3a9f1dc89f2a2529bd4', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), h("ifx-accordion-item", { key: 'fb92e8c982211992ebf99d886d2223e2fbdc5afe', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
|
|
5
5
|
}
|
|
6
6
|
static get is() { return "ifx-faq"; }
|
|
7
7
|
static get encapsulation() { return "shadow"; }
|
|
@@ -185,7 +185,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
|
|
|
185
185
|
return {};
|
|
186
186
|
}
|
|
187
187
|
render() {
|
|
188
|
-
return (h(Host, { key: '
|
|
188
|
+
return (h(Host, { key: 'f6d04d5333ee1e105a65b9e39b79c80856d19854' }, h("div", { key: 'ad141399ab5fc164a8750ff6ed0b695ddd784fd5', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '8393218ed13358ec0cd59a9a410dbe5bc48aca4e', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
|
|
189
189
|
}
|
|
190
190
|
get host() { return this; }
|
|
191
191
|
static get style() { return tableCss; }
|
|
@@ -12,7 +12,7 @@ const Faq = /*@__PURE__*/ proxyCustomElement(class Faq extends H {
|
|
|
12
12
|
this.__attachShadow();
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return (h("div", { key: '
|
|
15
|
+
return (h("div", { key: 'd9d7bd3c764cf067643c553edec9ef4fee4fd67e', class: 'container' }, h("ifx-accordion", { key: 'f275a73f5beb84d14ca616341994098300a9609a' }, h("ifx-accordion-item", { key: 'e99f371ca8e210b4a75d877e4dd4c9b224a66ddb', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), h("ifx-accordion-item", { key: '94ff35a6859266b9ba7d89776eb7c6c203ba37cf', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), h("ifx-accordion-item", { key: '2e98a643ad287859b90eff1a843410ec58291792', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), h("ifx-accordion-item", { key: 'ecd64d4fd87408466f64e3a9f1dc89f2a2529bd4', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), h("ifx-accordion-item", { key: 'fb92e8c982211992ebf99d886d2223e2fbdc5afe', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
|
|
16
16
|
}
|
|
17
17
|
static get style() { return faqCss; }
|
|
18
18
|
}, [257, "ifx-faq"]);
|
|
@@ -52,8 +52,8 @@ const FilterAccordion = /*@__PURE__*/ proxyCustomElement(class FilterAccordion e
|
|
|
52
52
|
this.el.removeEventListener('ifxListUpdate', this.handleCheckedChange);
|
|
53
53
|
}
|
|
54
54
|
render() {
|
|
55
|
-
return (h("div", { key: '
|
|
56
|
-
h("div", { key: '
|
|
55
|
+
return (h("div", { key: 'b4a21b89e0d939e05deae72440aef2159a6c1bda', class: `accordion ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '270907a017f3fcd0130f1aaf979df5570884c04b', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, h("div", { key: 'cff21898f155ab2ba80d8bbfd5b299f2c013674e', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, h("div", { key: 'a3a72e8c8e5b27e7d583dd79e495b07e6627996d', class: "text" }, h("span", { key: '88fb60623b86205e8212e4a86f1d3870964112e2' }, this.filterGroupName), h("ifx-indicator", { key: 'ef21b584256849cae07b792cc072dfc404454fc8', variant: 'number', number: this.count })), h("ifx-icon", { key: '49b73fdb66254dcd887b8640dc016bd76e027546', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: '9d08f6314056b2c0c44e37976c5102a762a5f086', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
|
|
56
|
+
h("div", { key: '22152489e3de743eff22354cfe12c413261ce488', class: "filter-accordion-container" }, h("slot", { key: '68b884d7fd28e8d68157ab05cd07b329a34b7dae', name: "list" }))));
|
|
57
57
|
}
|
|
58
58
|
get el() { return this; }
|
|
59
59
|
static get style() { return filterAccordionCss; }
|
|
@@ -96,7 +96,7 @@ const FilterBar = /*@__PURE__*/ proxyCustomElement(class FilterBar extends H {
|
|
|
96
96
|
// Calculate slotsToShow safely
|
|
97
97
|
const slotsToShow = Math.min(safeVisibleSlots, actualNumberOfComponents, Number.MAX_SAFE_INTEGER);
|
|
98
98
|
const slots = Array.from({ length: slotsToShow }, (_, i) => (h("div", { class: "filter-slot-wrapper" }, h("slot", { name: `filter-component-${i + 1}` }))));
|
|
99
|
-
return (h(Host, { key: '
|
|
99
|
+
return (h(Host, { key: '02000df6ef2931de33429f8c0c7e170a5d47d4dc' }, h("div", { key: '6d0f05f8f25ed15cd429307ee6b4806a243d2d2f', class: "search-container" }, h("slot", { key: '9d6960ae3bb4ee1febebe5a214ef91bc7d268719', name: "filter-search" }), " "), h("div", { key: '331f5a5d98e4bae8ecd4ba060e31eb14fe272a9f', class: "components-container" }, slots.length > 0 ? slots : h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (h("div", { key: '0021278e9914ade252e9e69560884d53c6e7d46f', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, h("ifx-button", { key: '093ac3688331f0bddbd5a3d10ec43bc9c2ea5c0f', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, h("ifx-icon", { key: '0878577d5870cbffe310234b0b81b9ec334f90ce', icon: "filter-16" }), "More filters"))))));
|
|
100
100
|
}
|
|
101
101
|
get el() { return this; }
|
|
102
102
|
static get style() { return filterBarCss; }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
|
|
2
2
|
import { d as defineCustomElement$3 } from './p-Bm-eGlq5.js';
|
|
3
|
-
import { d as defineCustomElement$2 } from './p-
|
|
3
|
+
import { d as defineCustomElement$2 } from './p-BO6nWGLo.js';
|
|
4
4
|
|
|
5
5
|
const filterSearchCss = ".sidebar-filter-search-wrapper{display:flex;padding:12px 16px 16px 16px;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px;font-family:var(--ifx-font-family);background:#EEEDED}.topbar-filter-search-wrapper{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px;font-family:var(--ifx-font-family)}.topbar-filter-search-wrapper ifx-search-field{width:100%;}.filter-name{font-size:1rem;line-height:1.5rem;font-weight:600}";
|
|
6
6
|
|
|
@@ -32,7 +32,7 @@ const FilterSearch = /*@__PURE__*/ proxyCustomElement(class FilterSearch extends
|
|
|
32
32
|
this.ifxFilterSearchChange.emit({ filterName: this.filterName, filterValue: this.filterValue, filterKey: this.filterKey }); // Emitting filterKey along with other properties
|
|
33
33
|
}
|
|
34
34
|
render() {
|
|
35
|
-
return (h("div", { key: '
|
|
35
|
+
return (h("div", { key: '36a21542c911a805093270bab4338b5a4ba81c94', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, h("div", { key: 'dbfdbdf56e5c540a465fdfa099d84628b1539bf6', class: "filter-name" }, this.filterName), h("ifx-search-field", { key: '48ca7812defbd768675ab49bae081664c5630892', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
|
|
36
36
|
}
|
|
37
37
|
get host() { return this; }
|
|
38
38
|
static get watchers() { return {
|
|
@@ -126,7 +126,7 @@ const IfxFilterTypeGroup$1 = /*@__PURE__*/ proxyCustomElement(class IfxFilterTyp
|
|
|
126
126
|
window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);
|
|
127
127
|
}
|
|
128
128
|
render() {
|
|
129
|
-
return (h(Host, { key: '
|
|
129
|
+
return (h(Host, { key: 'f7718698368335b6f2dba728a7d0bb04ee108122' }, h("div", { key: '9d24441d487b7a8be2194b0024a29dc42703b5d4', class: "filter-type-group" }, h("slot", { key: '918ab2eac7736bfd96f8b407f12c1bed4844ba70', name: "filter-search" }), h("slot", { key: 'fb69779d06e7da53479ea8cd6936c36cc2bc48f3', name: "filter-accordion" }))));
|
|
130
130
|
}
|
|
131
131
|
get el() { return this; }
|
|
132
132
|
static get style() { return filterTypeGroupCss; }
|
|
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h } from './index.js';
|
|
|
2
2
|
import { i as icons, d as defineCustomElement$5 } from './p-Bm-eGlq5.js';
|
|
3
3
|
import { d as defineCustomElement$4 } from './p-BxvlRqa4.js';
|
|
4
4
|
import { d as defineCustomElement$3 } from './p-BMQLGfWX.js';
|
|
5
|
-
import { d as defineCustomElement$2 } from './p-
|
|
5
|
+
import { d as defineCustomElement$2 } from './p-BO6nWGLo.js';
|
|
6
6
|
|
|
7
7
|
const iconsPreviewCss = ".container{display:flex;flex-direction:column;gap:10px}.alert__wrapper{margin-bottom:40px}.snippet__wrapper{display:flex;flex-direction:column;gap:5px;position:sticky;top:0;left:0;z-index:99;background-color:white}.html-wrapper{background:rgb(38, 38, 38);padding:20px;color:white;font-family:monospace}.html-wrapper button{position:absolute;right:0px;bottom:0px;background:rgba(0, 0, 0, 0.85);color:#C9CDCF;border:0 none;padding:4px 10px;font-size:0.75rem;font-family:\"Nunito Sans\";font-weight:700;border-top:1px solid rgba(255, 255, 255, 0.1);border-left:1px solid rgba(255, 255, 255, 0.1);margin-left:-1px;border-radius:4px 0 0 0;cursor:pointer}.html-wrapper .component-name{color:#A8FF60}.html-wrapper .attribute-name{color:rgb(150, 203, 254)}.html-wrapper .attribute-value{color:rgb(180, 116, 221)}.preview__container{box-sizing:border-box;display:flex;align-items:center;padding:2px;flex-wrap:wrap;gap:4px}.preview__container .no-results{width:100%;text-align:center}.preview__container .preview__container-item{display:flex;justify-content:center;align-items:center;border:1px solid #f1f1f1;padding:2px;width:50px;height:50px;position:relative}.preview__container .preview__container-item:active{border-color:#378375}.preview__container .preview__container-item:hover{cursor:pointer}.preview__container .preview__container-item.copied::after{z-index:50;content:\"copied!\";position:absolute;top:0;left:50px;background-color:#000;color:white;padding:3px;border-radius:4px}";
|
|
8
8
|
|
|
@@ -25,7 +25,7 @@ const ListEntry = /*@__PURE__*/ proxyCustomElement(class ListEntry extends H {
|
|
|
25
25
|
this.ifxListEntryChange.emit({ label: this.label, value: this.value, type: this.type });
|
|
26
26
|
}
|
|
27
27
|
render() {
|
|
28
|
-
return (h("div", { key: '
|
|
28
|
+
return (h("div", { key: 'a141d7bb36e2a1b02b38f72fb4d299fc4b3b3d9f', class: "wrapper" }, this.type === 'checkbox' ? (h("div", { class: "list-entry" }, h("ifx-checkbox", { size: "s", checked: this.value }, this.label))) : (h("div", { class: "list-entry" }, h("ifx-radio-button", { size: "s", checked: this.value }, this.label)))));
|
|
29
29
|
}
|
|
30
30
|
get host() { return this; }
|
|
31
31
|
static get watchers() { return {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { M as MultiselectOption, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { M as MultiselectOption, d as defineCustomElement$1 } from './p-DxKWinW1.js';
|
|
2
2
|
|
|
3
3
|
const IfxMultiselectOption = MultiselectOption;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
|
|
2
2
|
import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';
|
|
3
3
|
import { d as defineCustomElement$3 } from './p-Bm-eGlq5.js';
|
|
4
|
-
import { d as defineCustomElement$2 } from './p-
|
|
4
|
+
import { d as defineCustomElement$2 } from './p-BO6nWGLo.js';
|
|
5
5
|
|
|
6
6
|
const searchBarCss = ":root{--ifx-font-family:\"Source Sans 3\", 'Arial, sans-serif'}:host{width:100%;display:flex}.search-bar{box-sizing:border-box;height:40px;background-color:#FFFFFF;display:flex;flex-direction:row;align-items:center;width:100%;font-family:var(--ifx-font-family)}.search-bar.closed{display:flex;width:auto;justify-content:flex-start}.search-bar .search-bar-wrapper{display:flex;align-items:center;gap:16px;width:100%}.search-bar .search-bar-wrapper a{text-decoration:none;font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;color:#0A8276;cursor:pointer}.search-bar .search-bar-wrapper a:focus{outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.search-bar .search-bar-wrapper ifx-search-field{width:100%}.search-bar .search-bar__icon-wrapper{display:none;flex-direction:row;align-items:center}.search-bar .search-bar__icon-wrapper ifx-icon:hover{cursor:pointer}.search-bar.closed .search-bar__icon-wrapper{display:flex}.search-bar.closed .search-bar-wrapper{display:none}";
|
|
7
7
|
|
|
@@ -26,7 +26,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends H {
|
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
render() {
|
|
29
|
-
return (h("div", { key: '
|
|
29
|
+
return (h("div", { key: '63649c105328d122b919f2da84580004df440910', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: '447e5fbc0e119e47bf8be81e9cff9115f160ef61', icon: this.icon }), " ", h("slot", { key: '7459f68f4e25b097b8125888e230c0bf9c9adb69' })));
|
|
30
30
|
}
|
|
31
31
|
static get style() { return segmentCss; }
|
|
32
32
|
}, [257, "ifx-segment", {
|
|
@@ -73,8 +73,8 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
|
|
|
73
73
|
this.setActiveSegment();
|
|
74
74
|
}
|
|
75
75
|
render() {
|
|
76
|
-
return (h("div", { key: '
|
|
77
|
-
h("div", { key: '
|
|
76
|
+
return (h("div", { key: '5daf0ce5b40c031c88607641a64bad4376795d40', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: "group" }, h("div", { key: '2e089a49080a926635ca36aaffe38447338f9c0f', class: 'group__label' }, this.label.trim(), this.required && this.label.trim().toLowerCase() !== "" && h("span", { key: '65028e32098990164ffb0c8b6c37f619321ef8e1', class: `required ${this.error ? 'error' : ''}` }, "*")), h("div", { key: 'b42ad8dfc28a1c9a2c19f163eb01c18e7c807a2c', class: 'group__controls' }, h("slot", { key: '58f4e4bfd448298cc2d8ea3db37ac720fdba1e5a' })), this.caption.trim() &&
|
|
77
|
+
h("div", { key: '6c4116c66e1f636010c62a4d040e386d6df345ab', class: `group__caption ${this.error ? 'error' : ''}` }, h("ifx-icon", { key: '8b52235a0376b3e49b5e5c18d05b30c91131032e', icon: 'c-info-16' }), " ", this.caption.trim())));
|
|
78
78
|
}
|
|
79
79
|
componentDidRender() {
|
|
80
80
|
this.setSegmentSize();
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
|
|
2
2
|
import { d as defineCustomElement$8 } from './p-CtzLf4yZ.js';
|
|
3
3
|
import { d as defineCustomElement$7 } from './p-Bm-eGlq5.js';
|
|
4
|
-
import { d as defineCustomElement$6 } from './p-
|
|
5
|
-
import { d as defineCustomElement$5 } from './p-
|
|
6
|
-
import { d as defineCustomElement$4 } from './p-
|
|
7
|
-
import { d as defineCustomElement$3 } from './p-
|
|
8
|
-
import { d as defineCustomElement$2 } from './p-
|
|
4
|
+
import { d as defineCustomElement$6 } from './p-DQYngnHn.js';
|
|
5
|
+
import { d as defineCustomElement$5 } from './p-DxKWinW1.js';
|
|
6
|
+
import { d as defineCustomElement$4 } from './p-BO6nWGLo.js';
|
|
7
|
+
import { d as defineCustomElement$3 } from './p-kFkxPh9g.js';
|
|
8
|
+
import { d as defineCustomElement$2 } from './p-DGAOPH_P.js';
|
|
9
9
|
|
|
10
10
|
const setFilterCss = "";
|
|
11
11
|
|
|
@@ -149,10 +149,10 @@ const IfxSlider$1 = /*@__PURE__*/ proxyCustomElement(class IfxSlider extends H {
|
|
|
149
149
|
this.updateValuePercent();
|
|
150
150
|
}
|
|
151
151
|
render() {
|
|
152
|
-
return (h("div", { key: '
|
|
152
|
+
return (h("div", { key: 'c847455fa1b0596452e847e36359ec44ae1adf42', class: "ifx-slider" }, this.leftText && (h("span", { key: 'c14c665defbfc9a70b0c11d08d7ca5e0a41f62eb', class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { key: 'fea79aa8e724d40b89d7611a3ad9b2796d4582d4', icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), (this.type !== 'double') ?
|
|
153
153
|
h("input", { type: "range", min: this.min, max: this.max, step: this.step, value: this.internalValue, disabled: this.disabled, ref: (el) => (this.inputRef = el), onInput: (event) => this.handleInputChange(event), "aria-label": "Slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.internalValue, "aria-disabled": this.disabled ? "true" : "false" })
|
|
154
154
|
:
|
|
155
|
-
h("div", { class: 'range-slider__wrapper', "aria-label": this.ariaLabel, role: "group" }, h("input", { id: 'min-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMinValue, disabled: this.disabled, ref: (el) => (this.minInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event), "aria-label": "Minimum value slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.internalMinValue, "aria-disabled": this.disabled ? "true" : "false" }), h("input", { id: 'max-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMaxValue, disabled: this.disabled, ref: (el) => (this.maxInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event), "aria-label": "Maximum value slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.internalMaxValue, "aria-disabled": this.disabled ? "true" : "false" })), this.rightIcon && (h("ifx-icon", { key: '
|
|
155
|
+
h("div", { class: 'range-slider__wrapper', "aria-label": this.ariaLabel, role: "group" }, h("input", { id: 'min-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMinValue, disabled: this.disabled, ref: (el) => (this.minInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event), "aria-label": "Minimum value slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.internalMinValue, "aria-disabled": this.disabled ? "true" : "false" }), h("input", { id: 'max-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMaxValue, disabled: this.disabled, ref: (el) => (this.maxInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event), "aria-label": "Maximum value slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.internalMaxValue, "aria-disabled": this.disabled ? "true" : "false" })), this.rightIcon && (h("ifx-icon", { key: '47c29cf189aa68190cc190f0f478669e9fa76637', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { key: '65f2fd910a5254000bc51f66931eff23c0d0cf1a', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (h("span", { key: '449c1a5c65e656bfb819738babe3da93af830709', class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.percentage, "%"))));
|
|
156
156
|
}
|
|
157
157
|
get el() { return this; }
|
|
158
158
|
static get watchers() { return {
|
|
@@ -21,7 +21,7 @@ const Status = /*@__PURE__*/ proxyCustomElement(class Status extends H {
|
|
|
21
21
|
var _a;
|
|
22
22
|
const effectiveColor = ((_a = this.color) === null || _a === void 0 ? void 0 : _a.trim()) ? this.color : 'orange-500';
|
|
23
23
|
const containerClass = this.border ? `container border-${effectiveColor}` : 'container no-border';
|
|
24
|
-
return (h("div", { key: '
|
|
24
|
+
return (h("div", { key: '7de92ae631477ee2334aeb95cd02d68f4e54e112', role: "status", class: containerClass }, h("span", { key: 'c6d819a3be750301fe179d5dc50874aa41cfeef8', class: `dot ${effectiveColor}` }), h("p", { key: '4a00e2033f705a6755d609f6bd9f7fe44a619f75', class: "text" }, this.label)));
|
|
25
25
|
}
|
|
26
26
|
get el() { return this; }
|
|
27
27
|
static get style() { return statusCss; }
|
|
@@ -49,7 +49,7 @@ const Step = /*@__PURE__*/ proxyCustomElement(class Step extends H {
|
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
render() {
|
|
52
|
-
return (h("div", { key: '
|
|
52
|
+
return (h("div", { key: 'f04d8d577271e80ad17d76d5bb06c8d3573f1694', "aria-current": this.active ? 'step' : false, "aria-disabled": this.active || this.complete ? false : true, onClick: (e) => this.stopOnClickPropogation(e), class: `step-wrapper ${this.stepId === 1 ? 'first-step' : ''}
|
|
53
53
|
${this.error ? 'error' : ''}
|
|
54
54
|
${this.stepperState.variant}
|
|
55
55
|
${this.complete ? 'complete' : ''}
|
|
@@ -57,11 +57,11 @@ const Step = /*@__PURE__*/ proxyCustomElement(class Step extends H {
|
|
|
57
57
|
indicator-${this.stepperState.indicatorPosition}
|
|
58
58
|
${this.active ? 'active' : ''}
|
|
59
59
|
${this.clickable ? 'clickable' : ''}
|
|
60
|
-
${this.disabled ? 'disabled' : ''}` }, h("div", { key: '
|
|
61
|
-
h("div", { key: '
|
|
60
|
+
${this.disabled ? 'disabled' : ''}` }, h("div", { key: '3afa068f62d84076f5c78cc2b97c1abbc5259801', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '7968ecd6aac7571e79f801f2bff1be015f387b72', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
|
|
61
|
+
h("div", { key: '9f7a4e9c985e5f8cb6cf01688df38ef0464c656a', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: 'dd9368f074a2e2fcf0096cca695b988a4c538475', icon: 'check16' }), this.active && h("span", { key: 'a92e374974003d195fa71136050aadaf9017d2c0', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: 'd0bd222969602594634512c9f07c2bab23d3b908', icon: 'warningF16' }), this.stepperState.variant !== 'compact' && h("span", { key: '15065728b19e049979428d95cc520e012da965e1', class: `step-connector-r ${this.active ? 'active' : ''}` })),
|
|
62
62
|
/* Step labels */
|
|
63
63
|
(this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep + 1))) &&
|
|
64
|
-
h("div", { key: '
|
|
64
|
+
h("div", { key: 'f3cf745a7fe67f2471ca616a19ac02754ea03c16', tabIndex: !this.disabled && this.complete && !this.active ? 0 : -1, class: `step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`, onClick: () => { this.handleStepClick(); }, onKeyDown: (e) => { this.handleStepKeyDown(e); } }, (this.stepperState.variant !== 'compact') && h("slot", { key: 'c8467f39704fed5bcd10c93f9321b292760eb46c' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: '2d215e7d12e7dc6b0aace6ba88728cc3e5138f39' }))));
|
|
65
65
|
}
|
|
66
66
|
;
|
|
67
67
|
static get watchers() { return {
|
|
@@ -130,10 +130,10 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends H {
|
|
|
130
130
|
this.syncIfxSteps();
|
|
131
131
|
}
|
|
132
132
|
render() {
|
|
133
|
-
return (h("div", { key: '
|
|
133
|
+
return (h("div", { key: '1cec8cf9471951efacc238f5a6516213b114d5cd', "aria-label": this.ariaLabel, "aria-current": this.ariaCurrent, role: 'navigation', class: `stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-' + this.indicatorPosition : ''}` },
|
|
134
134
|
/* Progress bar for compact variant. */
|
|
135
135
|
(this.variant === 'compact') &&
|
|
136
|
-
h("div", { key: '
|
|
136
|
+
h("div", { key: 'dcf4316816d04a89dd77c7fdfe053e8a013d7b45', class: 'stepper-progress' }, h("div", { key: '6556ed5128cec3cd49104b99b7ebec2cbef6df14', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '1c845e6a471beb6d73ae73bcbebdeb461a656b42', class: `stepper-wrapper` }, h("slot", { key: '158fe4ab39f82a50fb6c384c31979ba219f4ed8a' }))));
|
|
137
137
|
}
|
|
138
138
|
;
|
|
139
139
|
componentDidRender() {
|