@infineon/infineon-design-system-stencil 32.1.3--canary.1732.2bc029849272d81bd448a751c8e07d74d3a481c1.0 → 32.1.3--canary.1723.ad5f2fc11d6ebec72c1f4c82bf17683c829ea518.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-chip_3.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-overview-table.cjs.entry.js +1 -1
- package/dist/cjs/ifx-overview-table.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/ifx-radio-button.cjs.entry.js +4 -11
- package/dist/cjs/ifx-radio-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-search-bar.cjs.entry.js +1 -1
- package/dist/cjs/ifx-search-field.cjs.entry.js +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 +6 -6
- 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-tag.cjs.entry.js +1 -1
- package/dist/cjs/ifx-templates-ui.cjs.entry.js +1 -1
- package/dist/cjs/ifx-textarea.cjs.entry.js +1 -1
- package/dist/cjs/ifx-tooltip.cjs.entry.js +4 -4
- package/dist/cjs/index-1ce5aae1.js +0 -4
- package/dist/cjs/infineon-design-system-stencil.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +0 -1
- package/dist/collection/components/overview-table/overview-table.js +1 -1
- package/dist/collection/components/overview-table/overview-table.js.map +1 -1
- package/dist/collection/components/pagination/pagination.js +1 -1
- package/dist/collection/components/progress-bar/progress-bar.js +1 -1
- package/dist/collection/components/radio-button/radio-button.css +0 -4
- package/dist/collection/components/radio-button/radio-button.js +2 -25
- package/dist/collection/components/radio-button/radio-button.js.map +1 -1
- package/dist/collection/components/radio-button/radio-button.stories.js +1 -13
- package/dist/collection/components/radio-button/radio-button.stories.js.map +1 -1
- package/dist/collection/components/search-bar/search-bar.js +1 -1
- package/dist/collection/components/search-field/search-field.js +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/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/tag/tag.js +1 -1
- 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 +4 -4
- package/dist/collection/components/textarea/textarea.js +1 -1
- package/dist/collection/components/tooltip/tooltip.js +4 -4
- 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-list-entry.js +2 -2
- package/dist/components/ifx-overview-table.js +1 -1
- package/dist/components/ifx-overview-table.js.map +1 -1
- package/dist/components/ifx-pagination.js +1 -1
- package/dist/components/ifx-progress-bar.js +1 -1
- package/dist/components/ifx-radio-button.js +1 -1
- package/dist/components/ifx-search-bar.js +2 -2
- 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 +2 -2
- 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-tag.js +1 -1
- 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 +1 -1
- package/dist/components/ifx-tooltip.js +4 -4
- package/dist/components/{p-6758b716.js → p-25dce5bf.js} +2 -2
- package/dist/components/{p-6758b716.js.map → p-25dce5bf.js.map} +1 -1
- package/dist/components/{p-1ab9b2d3.js → p-30f4f454.js} +3 -3
- package/dist/components/{p-1ab9b2d3.js.map → p-30f4f454.js.map} +1 -1
- package/dist/components/{p-c24216e7.js → p-3d46d2af.js} +5 -5
- package/dist/components/{p-c24216e7.js.map → p-3d46d2af.js.map} +1 -1
- package/dist/components/{p-efb9a50a.js → p-47853a7b.js} +3 -3
- package/dist/components/{p-efb9a50a.js.map → p-47853a7b.js.map} +1 -1
- package/dist/components/{p-da211009.js → p-8002e444.js} +3 -3
- package/dist/components/{p-da211009.js.map → p-8002e444.js.map} +1 -1
- package/dist/components/{p-bf0b6855.js → p-80856f14.js} +4 -4
- package/dist/components/{p-bf0b6855.js.map → p-80856f14.js.map} +1 -1
- package/dist/components/{p-e3b1b73d.js → p-977668df.js} +6 -14
- package/dist/components/p-977668df.js.map +1 -0
- package/dist/esm/ifx-alert_2.entry.js +1 -1
- package/dist/esm/ifx-basic-table.entry.js +1 -1
- package/dist/esm/ifx-chip_3.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-overview-table.entry.js +1 -1
- package/dist/esm/ifx-overview-table.entry.js.map +1 -1
- package/dist/esm/ifx-progress-bar.entry.js +1 -1
- package/dist/esm/ifx-radio-button.entry.js +4 -11
- package/dist/esm/ifx-radio-button.entry.js.map +1 -1
- package/dist/esm/ifx-search-bar.entry.js +1 -1
- package/dist/esm/ifx-search-field.entry.js +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 +6 -6
- 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-tag.entry.js +1 -1
- package/dist/esm/ifx-templates-ui.entry.js +1 -1
- package/dist/esm/ifx-textarea.entry.js +1 -1
- package/dist/esm/ifx-tooltip.entry.js +4 -4
- package/dist/esm/index-b4eaf00e.js +0 -4
- package/dist/esm/infineon-design-system-stencil.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/p-094349b2.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-094349b2.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-0ed489eb.entry.js → p-0c747aac.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-a2616b8d.entry.js → p-16430d76.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-44c3ef6d.entry.js → p-182854c8.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-19ebd7a9.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-19ebd7a9.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-48701f83.entry.js → p-1a93de53.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-137b4109.entry.js → p-1b907dbd.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-ce37b499.entry.js → p-1c869534.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-2c83ff9d.entry.js → p-260c4f53.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-e58a1c25.entry.js → p-272aab7f.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-0682ec9e.entry.js → p-2d8c79bc.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-9bc3708f.entry.js → p-37e5b4b4.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-8a92bb07.entry.js → p-386f62f0.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-73b7e3a5.entry.js → p-4ea09b73.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-6ede583b.entry.js → p-65b50486.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-724a6be7.entry.js → p-70e4a919.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-bb2885be.entry.js → p-7b9fd2df.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-1d4fc278.entry.js → p-8276469c.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-89c4fae2.entry.js +2 -0
- package/dist/infineon-design-system-stencil/{p-ece5ec08.entry.js → p-8ab52cac.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-e69d348c.entry.js → p-8c0927d0.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-939f2f37.entry.js +2 -0
- package/dist/infineon-design-system-stencil/{p-484ab7c4.entry.js.map → p-939f2f37.entry.js.map} +1 -1
- package/dist/infineon-design-system-stencil/{p-ebef8ea8.entry.js → p-9901114e.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-62396204.entry.js → p-b0156752.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-a8fdba36.entry.js → p-b1bd480b.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-daa1ac45.entry.js → p-c8fecc8e.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-b4982f52.entry.js → p-ccba569e.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-c70eddd7.entry.js → p-d2998185.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-6cf93534.entry.js → p-f8f10567.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-42103a85.entry.js → p-f9298124.entry.js} +2 -2
- package/dist/types/components/radio-button/radio-button.d.ts +0 -2
- package/dist/types/components/radio-button/radio-button.stories.d.ts +0 -11
- package/dist/types/components.d.ts +0 -30
- package/package.json +1 -1
- package/dist/cjs/ifx-radio-button-group.cjs.entry.js +0 -61
- package/dist/cjs/ifx-radio-button-group.cjs.entry.js.map +0 -1
- package/dist/collection/components/radio-button-group/radio-button-group.css +0 -59
- package/dist/collection/components/radio-button-group/radio-button-group.js +0 -238
- package/dist/collection/components/radio-button-group/radio-button-group.js.map +0 -1
- package/dist/collection/components/radio-button-group/radio-button-group.stories.js +0 -143
- package/dist/collection/components/radio-button-group/radio-button-group.stories.js.map +0 -1
- package/dist/components/ifx-radio-button-group.d.ts +0 -11
- package/dist/components/ifx-radio-button-group.js +0 -91
- package/dist/components/ifx-radio-button-group.js.map +0 -1
- package/dist/components/p-e3b1b73d.js.map +0 -1
- package/dist/esm/ifx-radio-button-group.entry.js +0 -57
- package/dist/esm/ifx-radio-button-group.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-484ab7c4.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-71b5d16a.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-71b5d16a.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-778a65ae.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-9631e187.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-9631e187.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-e5b0bae9.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-e5b0bae9.entry.js.map +0 -1
- package/dist/types/components/radio-button-group/radio-button-group.d.ts +0 -19
- package/dist/types/components/radio-button-group/radio-button-group.stories.d.ts +0 -171
- /package/dist/infineon-design-system-stencil/{p-0ed489eb.entry.js.map → p-0c747aac.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-a2616b8d.entry.js.map → p-16430d76.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-44c3ef6d.entry.js.map → p-182854c8.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-48701f83.entry.js.map → p-1a93de53.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-137b4109.entry.js.map → p-1b907dbd.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-ce37b499.entry.js.map → p-1c869534.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-2c83ff9d.entry.js.map → p-260c4f53.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-e58a1c25.entry.js.map → p-272aab7f.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-0682ec9e.entry.js.map → p-2d8c79bc.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-9bc3708f.entry.js.map → p-37e5b4b4.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-8a92bb07.entry.js.map → p-386f62f0.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-73b7e3a5.entry.js.map → p-4ea09b73.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-6ede583b.entry.js.map → p-65b50486.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-724a6be7.entry.js.map → p-70e4a919.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-bb2885be.entry.js.map → p-7b9fd2df.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-1d4fc278.entry.js.map → p-8276469c.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-778a65ae.entry.js.map → p-89c4fae2.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-ece5ec08.entry.js.map → p-8ab52cac.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-e69d348c.entry.js.map → p-8c0927d0.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-ebef8ea8.entry.js.map → p-9901114e.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-62396204.entry.js.map → p-b0156752.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-a8fdba36.entry.js.map → p-b1bd480b.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-daa1ac45.entry.js.map → p-c8fecc8e.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-b4982f52.entry.js.map → p-ccba569e.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-c70eddd7.entry.js.map → p-d2998185.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-6cf93534.entry.js.map → p-f8f10567.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-42103a85.entry.js.map → p-f9298124.entry.js.map} +0 -0
|
@@ -148,7 +148,7 @@ export class Pagination {
|
|
|
148
148
|
this.initPagination(paginationElement);
|
|
149
149
|
}
|
|
150
150
|
render() {
|
|
151
|
-
return (h("div", { key: '
|
|
151
|
+
return (h("div", { key: '20357dde8f0ba56b682ff31588053338e38c3218', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: 'dd1dc66c932352ee8050f429510743848dd29c97', class: 'items__per-page-wrapper' }, h("div", { key: 'd268ee42ada05f972a8b963b2dd9686bb5e64270', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: 'e5d79d9452b3cd620492c36c99b102c361faeca3', class: 'items__per-page-field' }, h("ifx-select", { key: '0a760ee3e0a092c828b42f9d4570e3d5b75e9aa2', value: 'undefined', size: 's', placeholder: 'false', "show-search": 'false', "search-placeholder-value": 'Search...', disabled: false, error: false, "error-message": 'Error', label: '', "placeholder-value": 'Placeholder', options: this.filteredItemsPerPage }))), h("div", { key: '7eb4e9629e04b42911aac866021e167a07cb58e3', class: 'items__total-wrapper' }, h("div", { key: 'fb43a909f1ab9185ded1db0192b17a427d5b32a1', class: 'page__numbers-wrapper' }, h("div", { key: 'dd8eca06bac07cf2eeb8f9e5d66bc92357d5bc19', class: "pagination" }, h("ifx-icon-button", { key: 'd5b224dfe8001cfd533093290f4bd295df329f1d', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: '94f1429b479b96c630c1198038d1cbabb4280de5' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: '4b03d03277d03cd6732fd4cc4fd4577edd3206fc', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
|
|
152
152
|
}
|
|
153
153
|
static get is() { return "ifx-pagination"; }
|
|
154
154
|
static get encapsulation() { return "shadow"; }
|
|
@@ -13,7 +13,7 @@ export class ProgressBar {
|
|
|
13
13
|
this.internalValue = this.value;
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
|
-
return (h("div", { key: '
|
|
16
|
+
return (h("div", { key: '9a1fc68c768dc22c5926f0eae299862f2d2de371', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: '6e847900044f4bc04eacbcc194ffac8bf6b83e0a', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '8e6fa2713fbcd0b956b8f27b873816adc0c3cb7f', class: "label" }, `${this.internalValue}%`))));
|
|
17
17
|
}
|
|
18
18
|
static get is() { return "ifx-progress-bar"; }
|
|
19
19
|
static get encapsulation() { return "shadow"; }
|
|
@@ -112,10 +112,6 @@
|
|
|
112
112
|
.radioButton__container .radioButton__wrapper.checked.disabled .radioButton__wrapper-mark {
|
|
113
113
|
background-color: #BFBBBB;
|
|
114
114
|
}
|
|
115
|
-
.radioButton__container .radioButton__wrapper.checked.error::after {
|
|
116
|
-
border-color: #CD002F;
|
|
117
|
-
background-color: #CD002F;
|
|
118
|
-
}
|
|
119
115
|
.radioButton__container .radioButton__wrapper.error:not(.disabled) {
|
|
120
116
|
border-color: #CD002F;
|
|
121
117
|
}
|
|
@@ -51,11 +51,6 @@ export class RadioButton {
|
|
|
51
51
|
this.fallbackInput.value = this.value;
|
|
52
52
|
this.fallbackInput.disabled = this.disabled;
|
|
53
53
|
}
|
|
54
|
-
errorChanged(newValue, oldValue) {
|
|
55
|
-
if (newValue !== oldValue) {
|
|
56
|
-
this.ifxError.emit(newValue);
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
54
|
handleRadioButtonClick(event) {
|
|
60
55
|
if (this.disabled) {
|
|
61
56
|
event.stopPropagation();
|
|
@@ -87,10 +82,10 @@ export class RadioButton {
|
|
|
87
82
|
}
|
|
88
83
|
}
|
|
89
84
|
render() {
|
|
90
|
-
return (h("div", { key: '
|
|
85
|
+
return (h("div", { key: '4a69126345effabdb522d209b4fb867ae55373bb', role: "radio", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: (e) => this.handleRadioButtonClick(e), tabindex: this.disabled ? -1 : 0 }, h("div", { key: '66c27180f8f00aff7599a09368e740a8654917bd', class: `radioButton__wrapper
|
|
91
86
|
${this.internalChecked ? 'checked' : ''}
|
|
92
87
|
${this.disabled ? 'disabled' : ''}
|
|
93
|
-
${this.error ? 'error' : ''}` }, this.internalChecked && h("div", { key: '
|
|
88
|
+
${this.error ? 'error' : ''}` }, this.internalChecked && h("div", { key: '9012278070740bc5bfe976b66e1ca5098ca21bdc', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: '4a82098a237a794405ac69ec8a7898ca1ca3f41b', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '805092a6667be8a22cead7a830dc483a8e53d42a' }))), h("input", { key: 'a9efb84dc6d54d9df3e704235702e7c1ea9587e0', type: "radio", hidden: true, ref: el => this.inputElement = el, name: this.name, value: this.value, checked: this.internalChecked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
|
|
94
89
|
}
|
|
95
90
|
static get is() { return "ifx-radio-button"; }
|
|
96
91
|
static get encapsulation() { return "shadow"; }
|
|
@@ -248,21 +243,6 @@ export class RadioButton {
|
|
|
248
243
|
"resolved": "any",
|
|
249
244
|
"references": {}
|
|
250
245
|
}
|
|
251
|
-
}, {
|
|
252
|
-
"method": "ifxError",
|
|
253
|
-
"name": "ifxError",
|
|
254
|
-
"bubbles": true,
|
|
255
|
-
"cancelable": true,
|
|
256
|
-
"composed": true,
|
|
257
|
-
"docs": {
|
|
258
|
-
"tags": [],
|
|
259
|
-
"text": ""
|
|
260
|
-
},
|
|
261
|
-
"complexType": {
|
|
262
|
-
"original": "any",
|
|
263
|
-
"resolved": "any",
|
|
264
|
-
"references": {}
|
|
265
|
-
}
|
|
266
246
|
}];
|
|
267
247
|
}
|
|
268
248
|
static get elementRef() { return "el"; }
|
|
@@ -273,9 +253,6 @@ export class RadioButton {
|
|
|
273
253
|
}, {
|
|
274
254
|
"propName": "internalChecked",
|
|
275
255
|
"methodName": "updateFormValue"
|
|
276
|
-
}, {
|
|
277
|
-
"propName": "error",
|
|
278
|
-
"methodName": "errorChanged"
|
|
279
256
|
}];
|
|
280
257
|
}
|
|
281
258
|
static get listeners() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQvG,MAAM,OAAO,WAAW;IANxB;QAQU,aAAQ,GAAY,KAAK,CAAC;QAE1B,UAAK,GAAY,KAAK,CAAC;QACN,SAAI,GAAc,GAAG,CAAC;QAGtC,oBAAe,GAAY,KAAK,CAAC;QACjC,YAAO,GAAY,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQvG,MAAM,OAAO,WAAW;IANxB;QAQU,aAAQ,GAAY,KAAK,CAAC;QAE1B,UAAK,GAAY,KAAK,CAAC;QACN,SAAI,GAAc,GAAG,CAAC;QAGtC,oBAAe,GAAY,KAAK,CAAC;QACjC,YAAO,GAAY,KAAK,CAAC;KAoInC;IA5HC,iBAAiB;QACf,gCAAgC;QAChC,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACrD,IAAI,CAAC,aAAa,CAAC,IAAI,GAAG,OAAO,CAAC;QAClC,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,IAAI,CAAC;QACjC,IAAI,CAAC,aAAa,CAAC,SAAS,GAAG,2BAA2B,CAAC;QAC3D,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,GAAG;;;;;;;KAOlC,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;QACvD,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;QACjC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAExC,2CAA2C;QAC3C,IAAI,iBAAiB,IAAI,WAAW,CAAC,SAAS,EAAE,CAAC;YAC/C,IAAI,CAAC;gBACH,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,eAAe,EAAE,CAAC;YAC7C,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC;gBACX,OAAO,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAC;YACjD,CAAC;QACH,CAAC;QAED,gBAAgB;QAChB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,IAAI,KAAK,CAAC;QAC7C,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;IACtF,CAAC;IAGD,mBAAmB,CAAC,QAAiB;QACnC,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC;IAClC,CAAC;IAGD,eAAe;;QACb,kDAAkD;QAClD,IAAI,MAAA,IAAI,CAAC,SAAS,0CAAE,YAAY,EAAE,CAAC;YACjC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QACxE,CAAC;QACD,IAAI,CAAC,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC;QAClD,IAAI,CAAC,aAAa,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACpC,IAAI,CAAC,aAAa,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACtC,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;IAC9C,CAAC;IAED,sBAAsB,CAAC,KAAY;QACjC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;QACjD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC;QACpC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QAE1C,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,QAAQ,EAAE;YAC5C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,EAAE;SAC1C,CAAC,CAAC;QACH,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACrC,CAAC;IAGD,aAAa,CAAC,EAAiB;QAC7B,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC;YACpC,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,IAAI,CAAC,sBAAsB,CAAC,IAAI,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;QACzD,CAAC;IACH,CAAC;IAGD,oBAAoB,CAAC,KAAY;QAC/B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC3C,IAAI,MAAM,KAAK,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,kBAAkB;YAAE,OAAO;QAEtF,IAAI,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;YAC9C,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DACE,IAAI,EAAC,OAAO,kBACE,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,mBAC3B,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,EACpC,KAAK,EAAE,0BAA0B,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,EAC/E,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAC9C,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAEhC,4DACE,KAAK,EAAE;cACH,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;cACrC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;cAC/B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,IAE9B,IAAI,CAAC,eAAe,IAAI,4DAAK,KAAK,EAAC,2BAA2B,GAAO,CAClE;YAEL,IAAI,CAAC,OAAO,IAAI,CACf,4DAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;gBAC1F,8DAAQ,CACJ,CACP;YAED,8DACE,IAAI,EAAC,OAAO,EACZ,MAAM,QACN,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,GACnC,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Watch } from '@stencil/core';\n\n@Component({\n tag: 'ifx-radio-button',\n styleUrl: 'radio-button.scss',\n shadow: true,\n formAssociated: true\n})\nexport class RadioButton {\n @Element() el: HTMLElement;\n @Prop() disabled: boolean = false;\n @Prop() value: string;\n @Prop() error: boolean = false;\n @Prop({ reflect: true }) size: \"s\" | \"m\" = \"s\";\n @Prop({ reflect: true }) name: string;\n @Prop({ mutable: true }) checked: boolean;\n @State() internalChecked: boolean = false;\n @State() hasSlot: boolean = false;\n\n private inputElement: HTMLInputElement;\n private internals: ElementInternals;\n private fallbackInput: HTMLInputElement;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n\n componentWillLoad() {\n // Fallback for form association\n this.fallbackInput = document.createElement('input');\n this.fallbackInput.type = 'radio';\n this.fallbackInput.hidden = true;\n this.fallbackInput.className = '_ifx-radiobutton-fallback';\n this.fallbackInput.style.cssText = `\n display: none !important;\n position: absolute !important;\n opacity: 0 !important;\n pointer-events: none !important;\n width: 0 !important;\n height: 0 !important;\n `;\n this.fallbackInput.setAttribute('aria-hidden', 'true');\n this.fallbackInput.tabIndex = -1;\n this.el.appendChild(this.fallbackInput);\n\n // Initialize ElementInternals if supported\n if ('attachInternals' in HTMLElement.prototype) {\n try {\n this.internals = this.el.attachInternals();\n } catch (e) {\n console.warn('ElementInternals not supported');\n }\n }\n\n // Initial state\n this.internalChecked = this.checked || false;\n this.hasSlot = !!this.el.querySelector('[slot]') || this.el.innerHTML.trim() !== '';\n }\n\n @Watch('checked')\n handleCheckedChange(newValue: boolean) {\n this.internalChecked = newValue;\n }\n\n @Watch('internalChecked')\n updateFormValue() {\n // Update both ElementInternals and fallback input\n if (this.internals?.setFormValue) {\n this.internals.setFormValue(this.internalChecked ? this.value : null);\n }\n this.fallbackInput.checked = this.internalChecked;\n this.fallbackInput.name = this.name;\n this.fallbackInput.value = this.value;\n this.fallbackInput.disabled = this.disabled;\n }\n\n handleRadioButtonClick(event: Event) {\n if (this.disabled) {\n event.stopPropagation();\n return;\n }\n\n this.inputElement.click();\n this.internalChecked = this.inputElement.checked;\n this.checked = this.internalChecked;\n this.ifxChange.emit(this.internalChecked);\n\n const changeEvent = new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { checked: this.internalChecked }\n });\n this.el.dispatchEvent(changeEvent);\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if ([' ', 'Enter'].includes(ev.key)) {\n ev.preventDefault();\n this.handleRadioButtonClick(new PointerEvent('click'));\n }\n }\n\n @Listen('change', { target: 'document' })\n handleExternalChange(event: Event) {\n const target = event.target as HTMLElement;\n if (target === this.el || target.tagName.toLowerCase() !== 'ifx-radio-button') return;\n \n if (target.getAttribute('name') === this.name) {\n this.internalChecked = false;\n }\n }\n\n render() {\n return (\n <div\n role=\"radio\"\n aria-checked={String(this.internalChecked)}\n aria-disabled={String(this.disabled)}\n class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n onClick={(e) => this.handleRadioButtonClick(e)}\n tabindex={this.disabled ? -1 : 0}\n >\n <div\n class={`radioButton__wrapper \n ${this.internalChecked ? 'checked' : ''} \n ${this.disabled ? 'disabled' : ''} \n ${this.error ? 'error' : ''}`}\n >\n {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n </div>\n\n {this.hasSlot && (\n <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n <slot />\n </div>\n )}\n\n <input\n type=\"radio\"\n hidden\n ref={el => this.inputElement = el}\n name={this.name}\n value={this.value}\n checked={this.internalChecked}\n disabled={this.disabled}\n onClick={(e) => e.stopPropagation()}\n />\n </div>\n );\n }\n}"]}
|
|
@@ -77,7 +77,6 @@ export default {
|
|
|
77
77
|
},
|
|
78
78
|
ifxChange: {
|
|
79
79
|
description: 'Custom event emitted when radio button checked and unchecked.',
|
|
80
|
-
action: 'ifxChange',
|
|
81
80
|
table: {
|
|
82
81
|
category: 'custom events',
|
|
83
82
|
type: {
|
|
@@ -85,17 +84,7 @@ export default {
|
|
|
85
84
|
detail: 'React: onIfxChange={handleChange}\nVue:@ifxChange="handleChange"\nAngular:(ifxChange)="handleChange()"\nVanillaJs:.addEventListener("ifxChange", (event) => {//handle change});',
|
|
86
85
|
},
|
|
87
86
|
},
|
|
88
|
-
|
|
89
|
-
ifxError: {
|
|
90
|
-
description: 'Custom event emitted when radio button is in error state.',
|
|
91
|
-
action: 'ifxError',
|
|
92
|
-
table: {
|
|
93
|
-
category: 'custom events',
|
|
94
|
-
type: {
|
|
95
|
-
summary: 'Framework integration',
|
|
96
|
-
detail: 'React: onIfxError={handleError}\nVue:@ifxError="handleError"\nAngular:(ifxError)="handleError()"\nVanillaJs:.addEventListener("ifxError", (event) => {//handle error});',
|
|
97
|
-
},
|
|
98
|
-
},
|
|
87
|
+
action: 'ifxChange',
|
|
99
88
|
}
|
|
100
89
|
},
|
|
101
90
|
};
|
|
@@ -113,7 +102,6 @@ const DefaultTemplate = args => {
|
|
|
113
102
|
element.appendChild(document.createTextNode(args.label));
|
|
114
103
|
// Add the event listener
|
|
115
104
|
element.addEventListener('ifxChange', action('ifxChange'));
|
|
116
|
-
element.addEventListener('ifxError', action('ifxError'));
|
|
117
105
|
// Return the element
|
|
118
106
|
return element;
|
|
119
107
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-button.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,sBAAsB;IAEtB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,KAAK;QACd,IAAI,EAAE,GAAG;QACT,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,OAAO;KACf;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,WAAW,EAAE,0DAA0D;YACvE,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,4BAA4B;YACzC,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,6DAA6D;YAC1E,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;QACD,KAAK,EAAE;YACL,IAAI,EAAE,uBAAuB;YAC7B,WAAW,EAAE,uDAAuD;YACpE,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,yEAAyE;YACtF,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,GAAG;iBACb;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,OAAO;iBACjB;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,0EAA0E;YACvF,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;aACnC;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,kEAAkE;YAC/E,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;aACnC;SACF;QACD,SAAS,EAAE;YACT,WAAW,EAAE,+DAA+D;YAC5E,
|
|
1
|
+
{"version":3,"file":"radio-button.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Radio Button',\n // tags: ['autodocs'],\n\n args: {\n label: 'Text',\n error: false,\n disabled: false,\n checked: false,\n size: 's',\n name: 'radio-button',\n value: 'radio',\n },\n argTypes: {\n error: {\n description: 'Indicates whether the radio button is in an error state.',\n control: 'boolean',\n table: {\n category: 'ifx-radio-button props',\n defaultValue: {\n summary: false\n }\n }\n },\n disabled: {\n description: 'Disables the radio button.',\n control: 'boolean',\n table: {\n category: 'ifx-radio-button props',\n defaultValue: {\n summary: false\n }\n }\n },\n checked: {\n description: 'Determines whether the radio button is selected by default.',\n control: 'boolean',\n table: {\n category: 'ifx-radio-button props',\n defaultValue: {\n summary: false\n }\n }\n },\n label: {\n name: 'Label of Radio Button',\n description: 'Set the label displayed next to *<ifx-radio-button>*.',\n table: {\n category: 'story controls',\n }\n },\n size: {\n description: 'Specifies the size of the radio button. Options: s (20px) and m (24px).',\n control: 'radio',\n options: ['s', 'm'],\n table: {\n category: 'ifx-radio-button props',\n defaultValue: {\n summary: 's'\n },\n type: {\n summary: 's | m'\n }\n }\n },\n name: {\n description: 'Name of the element, that is used as reference when a form is submitted.',\n table: {\n category: 'ifx-radio-button props'\n }\n },\n value: {\n description: 'The value that gets submitted, when the radio button is checked.',\n table: {\n category: 'ifx-radio-button props'\n }\n },\n ifxChange: {\n description: 'Custom event emitted when radio button checked and unchecked.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n },\n },\n\n action: 'ifxChange',\n }\n },\n};\n\nconst DefaultTemplate = args => {\n // Create the radio button element\n const element = document.createElement('ifx-radio-button');\n\n // Set the attributes\n element.setAttribute('error', args.error);\n element.setAttribute('disabled', args.disabled);\n element.setAttribute('checked', args.checked);\n element.setAttribute('size', args.size);\n element.setAttribute('name', args.name);\n element.setAttribute('value', args.value);\n\n // Add the label as a text node\n element.appendChild(document.createTextNode(args.label));\n\n // Add the event listener\n element.addEventListener('ifxChange', action('ifxChange'));\n\n // Return the element\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
|
|
@@ -29,7 +29,7 @@ export class SearchBar {
|
|
|
29
29
|
this.value = event.detail;
|
|
30
30
|
}
|
|
31
31
|
render() {
|
|
32
|
-
return (h("div", { key: '
|
|
32
|
+
return (h("div", { key: '9a6033dd56aecd4444cf7b5bee7916ce8d534760', "aria-label": 'a search bar', "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), h("a", { tabindex: "-1", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton }, h("ifx-icon", { icon: "search-16" })))));
|
|
33
33
|
}
|
|
34
34
|
static get is() { return "ifx-search-bar"; }
|
|
35
35
|
static get encapsulation() { return "shadow"; }
|
|
@@ -45,7 +45,7 @@ export class SearchField {
|
|
|
45
45
|
this.showDeleteIconInternalState = false;
|
|
46
46
|
}
|
|
47
47
|
render() {
|
|
48
|
-
return (h("div", { key: '
|
|
48
|
+
return (h("div", { key: 'dd5d16c933ec70acb8950279f4642ac93ab8b801', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: '92159e695d65890de079c49c25dba47a0243e56b', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, h("ifx-icon", { key: '27c96d542775740161ea3630851b0b19d90a177f', icon: "search-16", class: "search-icon" }), h("input", { key: 'df87749e87af361855083fc54ff76826d2ca12b2', ref: (el) => (this.inputElement = el), type: "text", onInput: () => this.handleInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value }), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cremove16", class: "delete-icon", onClick: this.handleDelete })) : null)));
|
|
49
49
|
}
|
|
50
50
|
getSizeClass() {
|
|
51
51
|
return `${this.size}` === "s"
|
|
@@ -18,7 +18,7 @@ export class Segment {
|
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
render() {
|
|
21
|
-
return (h("div", { key: '
|
|
21
|
+
return (h("div", { key: '82774e43f27d8995c36d7d356780bbe14b76f70c', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: '58ea805311f071bf39562bb043a4ea4e77b6cd57', icon: this.icon }), " ", h("slot", { key: '659727a8768c1988b251d795c9a7ae5b9554b1f0' })));
|
|
22
22
|
}
|
|
23
23
|
static get is() { return "ifx-segment"; }
|
|
24
24
|
static get encapsulation() { return "shadow"; }
|
|
@@ -62,8 +62,8 @@ export class SegmentedControl {
|
|
|
62
62
|
this.setActiveSegment();
|
|
63
63
|
}
|
|
64
64
|
render() {
|
|
65
|
-
return (h("div", { key: '
|
|
66
|
-
h("div", { key: '
|
|
65
|
+
return (h("div", { key: '9fb656fefd8b61e7c563ac77a20a303d40c6f146', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, h("div", { key: 'de4f8bf1f2404f106ff180167bf4c79abd2b165b', class: 'group__label' }, this.label.trim()), h("div", { key: 'e110c6c98b981142df08e7dda574b2d3e102a19d', class: 'group__controls' }, h("slot", { key: '3dd13439a68201c2f42104c4853b371c669e18df' })), this.caption.trim() &&
|
|
66
|
+
h("div", { key: '946fe774c7cf3f9642447b9a8cb0e258d3f9d493', class: 'group__caption' }, h("ifx-icon", { key: '39f21a9eae4961da05f38d6930bcc373671e9794', icon: 'cinfo16' }), " ", this.caption.trim())));
|
|
67
67
|
}
|
|
68
68
|
componentDidRender() {
|
|
69
69
|
this.setSegmentSize();
|
|
@@ -209,9 +209,9 @@ export class Choices {
|
|
|
209
209
|
// destroy choices element to restore previous dom structure
|
|
210
210
|
// so vdom can replace the element correctly
|
|
211
211
|
this.destroy();
|
|
212
|
-
return (h("div", { key: '
|
|
212
|
+
return (h("div", { key: '9f22a991b500016c41a63d7aa46fff087227f90b', class: `ifx-select-container` }, this.label ? (h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label))) : null, h("div", { key: '259b6f62d0e5c60ea8fa11734fda41f969555a96', class: `${choicesWrapperClass}
|
|
213
213
|
${this.disabled ? 'disabled' : ''}
|
|
214
|
-
${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : () => this.toggleDropdown(), onKeyDown: event => this.handleKeyDown(event) }, h("select", Object.assign({ key: '
|
|
214
|
+
${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : () => this.toggleDropdown(), onKeyDown: event => this.handleKeyDown(event) }, h("select", Object.assign({ key: '9358b42323bf7828676c6423c89fb5179b8e4651', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: 'f1d7ce031e84ca4c55c1b2228c7cf2501cf8c78d', class: "single__select-icon-container" }, this.optionIsSelected && (h("div", { key: '3e72d6ecf1d7a5649baa99131ac76a1287678293', class: "ifx-choices__icon-wrapper-delete" }, h("ifx-icon", { key: '7e0e78337c13e780c3c3ee80b5252fd35dd103e0', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), h("div", { key: '8037dfe8733b35760da9fba0d63886c5086819b9', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), h("div", { key: 'd3d78aec55206c83b2cf81c5d43a6bf8f4a3c37f', class: "ifx-choices__icon-wrapper-down" }, h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.error ? (h("div", { class: "ifx-error-message-wrapper" }, h("span", null, this.errorMessage))) : null));
|
|
215
215
|
}
|
|
216
216
|
toggleDropdown() {
|
|
217
217
|
const div = this.root.querySelector('.ifx-choices__wrapper');
|
|
@@ -136,10 +136,10 @@ export class IfxSlider {
|
|
|
136
136
|
this.updateValuePercent();
|
|
137
137
|
}
|
|
138
138
|
render() {
|
|
139
|
-
return (h("div", { key: '
|
|
139
|
+
return (h("div", { key: '3a43035d99bb5ae166d215994ba35dcc0a72f800', class: "ifx-slider" }, this.leftText && (h("span", { key: 'b5b672dd97b5fbe71f4e23ac0f35311fb4014112', class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { key: '1b167231afc1aba9165c7b0e340ba692ffb3ec04', icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), (this.type !== 'double') ?
|
|
140
140
|
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": 'a slider', "aria-value": this.value, "aria-disabled": this.disabled })
|
|
141
141
|
:
|
|
142
|
-
h("div", { class: 'range-slider__wrapper', "aria-label": 'a range slider', "aria-value": this.value, "aria-disabled": this.disabled }, 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) }), 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) })), this.rightIcon && (h("ifx-icon", { key: '
|
|
142
|
+
h("div", { class: 'range-slider__wrapper', "aria-label": 'a range slider', "aria-value": this.value, "aria-disabled": this.disabled }, 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) }), 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) })), this.rightIcon && (h("ifx-icon", { key: '7b199e3e1024289bfde3e200c3b03b1a7600f7fd', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { key: 'a77ecafe2e47167c7014fdf5aa710d59cfc18659', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (h("span", { key: '344dd484214e0a5cbd4a530cfaec229f90dc7e7a', class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.percentage, "%"))));
|
|
143
143
|
}
|
|
144
144
|
static get is() { return "ifx-slider"; }
|
|
145
145
|
static get encapsulation() { return "shadow"; }
|
|
@@ -5,8 +5,8 @@ export class Spinner {
|
|
|
5
5
|
this.inverted = false;
|
|
6
6
|
}
|
|
7
7
|
render() {
|
|
8
|
-
return (h("div", { key: '
|
|
9
|
-
&& h("div", { key: '
|
|
8
|
+
return (h("div", { key: 'd81d2a7692cb71c15f4aa895abcdf0d4441d2b3a', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, h("div", { key: '7813885c276e55354c47f2ff735a16f498b1e39f', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
|
|
9
|
+
&& h("div", { key: 'c4163967c2a5f58795ac974716cc4e831ec6264b', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: '0feafe9cdf7cfa8138a1d104824c8e5dff1b3caf', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'ca3cdd02b91de714c12e1d2d6ad800fee938ac03', id: "spinner/conductor" }, h("path", { key: 'aedaa84532c0c51f8e0a7a8683fb7c24379b73a8', id: "Vector", d: "M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z" }))))));
|
|
10
10
|
}
|
|
11
11
|
getSizeClass() {
|
|
12
12
|
return `${this.size}` === "s"
|
|
@@ -8,7 +8,7 @@ export class Status {
|
|
|
8
8
|
var _a;
|
|
9
9
|
const effectiveColor = ((_a = this.color) === null || _a === void 0 ? void 0 : _a.trim()) ? this.color : 'orange-500';
|
|
10
10
|
const containerClass = this.border ? `container border-${effectiveColor}` : 'container no-border';
|
|
11
|
-
return (h("div", { key: '
|
|
11
|
+
return (h("div", { key: 'd6594837b2884bfcb3aa73a47f335a240c6567b2', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, h("span", { key: 'ebb8c7eaeb4a951ade8568b5fa08ba479e2f614d', class: `dot ${effectiveColor}` }), h("p", { key: '3061c0fa17b6f1f4895f43e627496c3469976191', class: "text" }, this.label)));
|
|
12
12
|
}
|
|
13
13
|
static get is() { return "ifx-status"; }
|
|
14
14
|
static get encapsulation() { return "shadow"; }
|
|
@@ -42,7 +42,7 @@ export class Step {
|
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
render() {
|
|
45
|
-
return (h("div", { key: '
|
|
45
|
+
return (h("div", { key: 'cbee70d7f0f5c76a09d48423566bc3d485cd929a', "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' : ''}
|
|
46
46
|
${this.error ? 'error' : ''}
|
|
47
47
|
${this.stepperState.variant}
|
|
48
48
|
${this.complete ? 'complete' : ''}
|
|
@@ -50,11 +50,11 @@ export class Step {
|
|
|
50
50
|
indicator-${this.stepperState.indicatorPosition}
|
|
51
51
|
${this.active ? 'active' : ''}
|
|
52
52
|
${this.clickable ? 'clickable' : ''}
|
|
53
|
-
${this.disabled ? 'disabled' : ''}` }, h("div", { key: '
|
|
54
|
-
h("div", { key: '
|
|
53
|
+
${this.disabled ? 'disabled' : ''}` }, h("div", { key: 'fee2738c8478680320ec50c53a92d6e7b92a86e3', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '96aa1a741cd013b6ae17f32de2725c368ea51618', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
|
|
54
|
+
h("div", { key: 'c9c696ac8898befd165fed334c36e7f77c91aa4f', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: '98ff6e603c94aa1a57c5f8491dcf2a17cd4a4864', icon: 'check16' }), this.active && h("span", { key: '2fc5ce8a43ef62ecae07fbf25688af0b629b8e6d', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: '72db4eb91a114022e470d14e035c1ff4364f6f00', icon: 'warningf24' }), this.stepperState.variant !== 'compact' && h("span", { key: '0a215fa7c2df964b4743f0fb0b16652b92003bfa', class: `step-connector-r ${this.active ? 'active' : ''}` })),
|
|
55
55
|
/* Step labels */
|
|
56
56
|
(this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep + 1))) &&
|
|
57
|
-
h("div", { key: '
|
|
57
|
+
h("div", { key: '9b77faa804a42714b79535bfe530854c68ca6372', 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: 'a84af39da90db9e59e3b614f63de9802161a0e51' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: 'bdfaff2aed9faf5503fb89b7e2105c48d721dbe2' }))));
|
|
58
58
|
}
|
|
59
59
|
;
|
|
60
60
|
static get is() { return "ifx-step"; }
|
|
@@ -116,10 +116,10 @@ export class Stepper {
|
|
|
116
116
|
this.syncIfxSteps();
|
|
117
117
|
}
|
|
118
118
|
render() {
|
|
119
|
-
return (h("div", { key: '
|
|
119
|
+
return (h("div", { key: 'c7e51b5fe17beb80cac38fe0da1600f44b4ca111', "aria-label": 'a stepper', role: 'navigation', class: `stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-' + this.indicatorPosition : ''}` },
|
|
120
120
|
/* Progress bar for compact variant. */
|
|
121
121
|
(this.variant === 'compact') &&
|
|
122
|
-
h("div", { key: '
|
|
122
|
+
h("div", { key: '233c1234510997adab316ffb47e341c575036b95', class: 'stepper-progress' }, h("div", { key: '45c775b8727bac00e4c57a6e6e6129fe320e5a5b', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '35ad66a86c1b1f6d008a232ae33944a3d7e122a6', class: `stepper-wrapper` }, h("slot", { key: '671a05ed6ce3927369e202f2a9218944bb6bb7cf' }))));
|
|
123
123
|
}
|
|
124
124
|
;
|
|
125
125
|
componentDidRender() {
|
|
@@ -63,7 +63,7 @@ export class Switch {
|
|
|
63
63
|
this.internals.setFormValue(null);
|
|
64
64
|
}
|
|
65
65
|
render() {
|
|
66
|
-
return (h("div", { key: '
|
|
66
|
+
return (h("div", { key: '0481403a878470cdb42c03be663b88f19fe59c58', class: "container", role: "switch", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-label": this.name, onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { key: 'c84f8e06349d1ffa03efb077e64881b12c4ac640', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: '533ca85af87c3edff93c76aaa0860f997b107e67', class: "switch__checkbox-wrapper" }, h("input", { key: 'fd9a8c6442c321a81161645c7e84f1d03cae3002', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: 'ad951898b5b38de29aff0be91f734d443399f050', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '14219d030661fed97b8210d67ec3794147884225', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '3892d20ad28a1f1823e8302e9820973df938ee70', htmlFor: "switch" }, h("slot", { key: 'e350367180975d30978ec7c7d026b34e86c79741', onSlotchange: () => this.toggleLabelGap() })))));
|
|
67
67
|
}
|
|
68
68
|
static get is() { return "ifx-switch"; }
|
|
69
69
|
static get encapsulation() { return "shadow"; }
|
|
@@ -88,7 +88,7 @@ export class FilterBar {
|
|
|
88
88
|
// Calculate slotsToShow safely
|
|
89
89
|
const slotsToShow = Math.min(safeVisibleSlots, actualNumberOfComponents, Number.MAX_SAFE_INTEGER);
|
|
90
90
|
const slots = Array.from({ length: slotsToShow }, (_, i) => (h("div", { class: "filter-slot-wrapper" }, h("slot", { name: `filter-component-${i + 1}` }))));
|
|
91
|
-
return (h(Host, { key: '
|
|
91
|
+
return (h(Host, { key: 'd5aad85edc16369a3487a18f3e3f24a5b914e820' }, h("div", { key: '7f49a493bd5bafec1286794e89ae67adea9e1967', class: "search-container" }, h("slot", { key: '9d7ab3a3294ac64f7cc47ae33b1839871d06df94', name: "filter-search" }), " "), h("div", { key: '9bf93a1030392d67940228df88b11b52685b757f', class: "components-container" }, slots.length > 0 ? slots : h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (h("div", { key: 'fc4c6c9e15cf96fc1c129638688fdf2a27f91dc7', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, h("ifx-button", { key: '8f26ef634ef3e27d893e1998167f07a4315cb59a', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, h("ifx-icon", { key: '23cece990fc63afda2e9864887865467bec55e6f', icon: "filter-16" }), "More filters"))))));
|
|
92
92
|
}
|
|
93
93
|
static get is() { return "ifx-filter-bar"; }
|
|
94
94
|
static get encapsulation() { return "shadow"; }
|
|
@@ -31,8 +31,8 @@ export class FilterAccordion {
|
|
|
31
31
|
this.el.removeEventListener('ifxListUpdate', this.handleCheckedChange);
|
|
32
32
|
}
|
|
33
33
|
render() {
|
|
34
|
-
return (h("div", { key: '
|
|
35
|
-
h("div", { key: '
|
|
34
|
+
return (h("div", { key: 'b5be6a4c8e2b8406e20b4139461d75d1acc5e88c', class: `accordion ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '88ce1afb0ab07d2b3b1351d698632d24521f6870', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, h("div", { key: '2c850d5b01d985473ba69ca347fbfcfa076670b5', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, h("div", { key: 'b50240640314ca9d971f1db017d8f2bf4fae5cc1', class: "text" }, h("span", { key: '12a6ef3c45f33540669af8dc60f2d8c104e07953' }, this.filterGroupName), h("ifx-number-indicator", { key: '049ecf530b429920f6f977e240de3913fbd0c013' }, this.count)), h("ifx-icon", { key: 'fee323359acf051fb4bd0040c0eb1bea7a9696fe', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: 'f7b60e6232b404bc5f4345dd9db80e513c4a6dcd', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
|
|
35
|
+
h("div", { key: 'f802a7ec2ff47ecf22b3f69ec5b4adbcdb599522', class: "filter-accordion-container" }, h("slot", { key: '5877962924effa0e52163d9ec5a2d436ac8a3ac7', name: "list" }))));
|
|
36
36
|
}
|
|
37
37
|
static get is() { return "ifx-filter-accordion"; }
|
|
38
38
|
static get encapsulation() { return "shadow"; }
|
|
@@ -23,7 +23,7 @@ export class FilterSearch {
|
|
|
23
23
|
this.ifxFilterSearchChange.emit({ filterName: this.filterName, filterValue: this.filterValue, filterKey: this.filterKey }); // Emitting filterKey along with other properties
|
|
24
24
|
}
|
|
25
25
|
render() {
|
|
26
|
-
return (h("div", { key: '
|
|
26
|
+
return (h("div", { key: '7b5ee1b95e95e19d2fc959c2a9ed59fa1d90a4e6', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, h("div", { key: 'c7dfdabe9e9eb6dcea53361df02a2a5e4325f43f', class: "filter-name" }, this.filterName), h("ifx-search-field", { key: '5a396959e4ab983a06796203a3efbcc608f1a16c', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
|
|
27
27
|
}
|
|
28
28
|
static get is() { return "ifx-filter-search"; }
|
|
29
29
|
static get encapsulation() { return "shadow"; }
|
package/dist/collection/components/table-advanced-version/filter-type-group/filter-type-group.js
CHANGED
|
@@ -119,7 +119,7 @@ export class IfxFilterTypeGroup {
|
|
|
119
119
|
window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);
|
|
120
120
|
}
|
|
121
121
|
render() {
|
|
122
|
-
return (h(Host, { key: '
|
|
122
|
+
return (h(Host, { key: 'd794c0d53d4cdf1d9e7a233dc36da89b7407bc57' }, h("div", { key: 'f59f81f2402e974ce04c937c620907fc553b3752', class: "filter-type-group" }, h("slot", { key: '35b06d9b7d04566fce7497c81a641a76bcf987e4', name: "filter-search" }), h("slot", { key: '86614c6a09e9d42392cef57017965abd337582e4', name: "filter-accordion" }))));
|
|
123
123
|
}
|
|
124
124
|
static get is() { return "ifx-filter-type-group"; }
|
|
125
125
|
static get encapsulation() { return "shadow"; }
|
|
@@ -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: 'd79aed51b0aa9c96e3b99450af4a67fe9c9cd9c1', 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"; }
|
|
@@ -354,12 +354,12 @@ export class Table {
|
|
|
354
354
|
};
|
|
355
355
|
}
|
|
356
356
|
const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : 'sidebar-layout';
|
|
357
|
-
return (h(Host, { key: '
|
|
357
|
+
return (h(Host, { key: 'ef6d50ee7b08b86a5534feed83df514f7de1ca6d' }, h("div", { key: 'c3d3184293fe3b7bb34ca87126f56acc5abe2812', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: 'f0cd79a6d7a912f629a170998f53575c047529df', class: "sidebar-btn" }, h("ifx-button", { key: 'd4ac7961a437f6e18628693e3dee32ff357326c0', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: 'a46b1fc02a4a7888ed02aa7b7599f2687bb43291', icon: "cross-12" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: '6f76f786bb6d06f02cbd54735bf042adbf892ae8', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: 'bc5966d2c801c7a660949ede006c3b9e81d228dc', class: "sidebar-container" }, h("div", { key: '646d3a6b689bedac78db621b50ba49b3f235f590', class: "filters-title-container" }, h("span", { key: '75420b67f11bd70a7bf88f6733a960b3b12a0877', class: "filters-title" }, "Filters")), h("div", { key: '4a26a7e37038cc124c5602871e9ae3efd03ece38', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: 'b57db55a41c57f5421c5a1cf1f41e1a895d70752', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: 'd44dd84651cd5a88736adb2ee3b93105569ea621', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '75cd86d074b880b9227df048222e6e1f71444c5c', name: "topbar-filter" })))), h("div", { key: '22ce3434d5073daac916a81975347c2635ebface', class: "table-pagination-wrapper" }, h("div", { key: '9986934e5c38ef7801523ba32edc9bc96d28cf91', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
|
|
358
358
|
const filter = this.currentFilters[name];
|
|
359
359
|
const filterValues = filter.filterValues;
|
|
360
360
|
const isMultiSelect = filter.type !== 'text';
|
|
361
361
|
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;
|
|
362
|
-
})), this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (h("ifx-button", { key: '
|
|
362
|
+
})), this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (h("ifx-button", { key: 'c4bfcc611183bac5a09d0b4abc50e072e22c8bad', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, h("ifx-icon", { key: 'a0a23f693e59bb22d4d6d70d3a7fe37c4da70c87', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (h("div", { key: '2d8e228d37046165d08054ba76cd3888224e2567', class: "matching-results-container" }, h("span", { key: 'fa68665c33fa576c64fd3def0eb0d1a2be287458', class: "matching-results-count" }, this.matchingResultsCount), h("span", { key: '6ce30960e908bc45f4d9d61f008174035ebd0f73', class: "matching-results-text" }, "matching results"))), h("div", { key: 'e888428f6e43473ccc1b18ee0a75f49c750ec70e', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: 'c01494f8e3648908326f65d914c91a3a071f8c8d', id: `ifxTable-${this.uniqueKey}`, class: 'ifx-ag-grid', style: style, ref: (el) => this.container = el })), this.pagination ? h("ifx-pagination", { total: this.allRowData.length, "current-page": this.currentPage, "items-per-page": '[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]' }) : null)))));
|
|
363
363
|
}
|
|
364
364
|
hasButtonCol() {
|
|
365
365
|
return this.getColData().some(column => column.field === 'button');
|
|
@@ -143,7 +143,7 @@ export class Table {
|
|
|
143
143
|
return {};
|
|
144
144
|
}
|
|
145
145
|
render() {
|
|
146
|
-
return (h(Host, { key: '
|
|
146
|
+
return (h(Host, { key: '56d342732bf6d49e668f0fc3e2f34f604ecc50fc' }, h("div", { key: '672ef798fa5d47b3c219a772c5256cc0a670f180', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '66c21033cebeb0df7a41d7ffe7f6b66fadd6be96', id: `ifxTable-${this.uniqueKey}`, class: "ifx-ag-grid", style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
|
|
147
147
|
}
|
|
148
148
|
static get is() { return "ifx-basic-table"; }
|
|
149
149
|
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: '845e795d2a758c1612b8601ea2eafab0385f02dc' });
|
|
12
12
|
}
|
|
13
13
|
static get is() { return "ifx-tab"; }
|
|
14
14
|
static get originalStyleUrls() {
|
|
@@ -193,9 +193,9 @@ export class IfxTabs {
|
|
|
193
193
|
}
|
|
194
194
|
render() {
|
|
195
195
|
var _a;
|
|
196
|
-
return (h("div", { key: '
|
|
196
|
+
return (h("div", { key: 'd4e05ff054e60c53638ed293d85986b20a831f9c', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: '6815e7449952ed21744ffe024d356bbd1e1ebc8a', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
|
|
197
197
|
_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 :
|
|
198
|
-
tab.header))), h("div", { key: '
|
|
198
|
+
tab.header))), h("div", { key: '77b59e1fca18afe592610a35a26569538851b2b1', class: "active-border" })), h("div", { key: '89c6c472aee1a525e8be3a7d19008b372300b06c', class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
|
|
199
199
|
}
|
|
200
200
|
static get is() { return "ifx-tabs"; }
|
|
201
201
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
export class Tag {
|
|
3
3
|
render() {
|
|
4
|
-
return (h("div", { key: '
|
|
4
|
+
return (h("div", { key: 'ebe5d8e2f3bc59ad1bdef92eb7e4fbc7a07f9c4c', "aria-label": "a tag", class: "container" }, this.icon && (h("ifx-icon", { key: 'accc8280c6248bb81a2d139e85da8a048329e917', icon: this.icon })), h("a", { key: '1282f2372cc961db61fefee89e2a21bf1a998537', href: "javascript:void(null);", class: "label-wrapper" }, h("p", { key: '76534734832475e44606e0fed6d3577802525d2f', class: "label" }, h("slot", { key: '6d422addc814889fc71d851bc2dc3ab65a7cb3e6' })))));
|
|
5
5
|
}
|
|
6
6
|
static get is() { return "ifx-tag"; }
|
|
7
7
|
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: '8bbad6a5aed64cdf08d55d949307d1f6e6833dad' }, 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))
|