@siemens/ix 2.0.3 → 2.0.4-beta.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/components/base-button.js +1 -1
- package/components/base-button.js.map +1 -1
- package/components/breadcrumb-item.js +1 -1
- package/components/breadcrumb-item.js.map +1 -1
- package/components/button.js +1 -1
- package/components/button.js.map +1 -1
- package/components/dropdown.js +53 -2
- package/components/dropdown.js.map +1 -1
- package/components/group-context-menu.js +1 -1
- package/components/group-context-menu.js.map +1 -1
- package/components/icon-button.js +1 -1
- package/components/icon-button.js.map +1 -1
- package/components/ix-blind.js +9 -14
- package/components/ix-blind.js.map +1 -1
- package/components/ix-category-filter.js +1 -1
- package/components/ix-category-filter.js.map +1 -1
- package/components/ix-dropdown-button.js +1 -1
- package/components/ix-dropdown-button.js.map +1 -1
- package/components/ix-dropdown-quick-actions.js +1 -1
- package/components/ix-dropdown-quick-actions.js.map +1 -1
- package/components/ix-event-list-item.js +1 -1
- package/components/ix-event-list-item.js.map +1 -1
- package/components/ix-expanding-search.js +1 -1
- package/components/ix-expanding-search.js.map +1 -1
- package/components/ix-form-field.js +1 -1
- package/components/ix-form-field.js.map +1 -1
- package/components/ix-group.js +1 -1
- package/components/ix-group.js.map +1 -1
- package/components/ix-icon-toggle-button.js +1 -1
- package/components/ix-icon-toggle-button.js.map +1 -1
- package/components/ix-input-group.js +7 -4
- package/components/ix-input-group.js.map +1 -1
- package/components/ix-kpi.js +1 -1
- package/components/ix-kpi.js.map +1 -1
- package/components/ix-map-navigation.js +1 -1
- package/components/ix-map-navigation.js.map +1 -1
- package/components/ix-menu.js +1 -1
- package/components/ix-menu.js.map +1 -1
- package/components/ix-modal-header.js +7 -5
- package/components/ix-modal-header.js.map +1 -1
- package/components/ix-modal.js +6 -3
- package/components/ix-modal.js.map +1 -1
- package/components/ix-pagination.js +1 -1
- package/components/ix-pagination.js.map +1 -1
- package/components/ix-row.js +1 -1
- package/components/ix-row.js.map +1 -1
- package/components/ix-slider.js +26 -4
- package/components/ix-slider.js.map +1 -1
- package/components/ix-tile.js +1 -1
- package/components/ix-tile.js.map +1 -1
- package/components/ix-toast-container.js +1 -1
- package/components/ix-toast-container.js.map +1 -1
- package/components/ix-tree.js +3 -2
- package/components/ix-tree.js.map +1 -1
- package/components/ix-upload.js +1 -1
- package/components/ix-upload.js.map +1 -1
- package/components/listener.js +69 -0
- package/components/listener.js.map +1 -0
- package/components/map-navigation-overlay.js +1 -1
- package/components/map-navigation-overlay.js.map +1 -1
- package/components/menu-service.js +7 -2
- package/components/menu-service.js.map +1 -1
- package/components/select.js +31 -5
- package/components/select.js.map +1 -1
- package/components/tabs.js +44 -12
- package/components/tabs.js.map +1 -1
- package/components/time-picker.js +1 -1
- package/components/time-picker.js.map +1 -1
- package/components/typography.js +1 -1
- package/components/typography.js.map +1 -1
- package/dist/cjs/{base-button-c158438e.js → base-button-7af4dae7.js} +2 -2
- package/dist/cjs/base-button-7af4dae7.js.map +1 -0
- package/dist/cjs/{base-icon-button-bbca2582.js → base-icon-button-d085fd45.js} +2 -2
- package/dist/cjs/{base-icon-button-bbca2582.js.map → base-icon-button-d085fd45.js.map} +1 -1
- package/dist/cjs/ix-application-header.cjs.entry.js +1 -1
- package/dist/cjs/ix-application.cjs.entry.js +1 -1
- package/dist/cjs/ix-basic-navigation.cjs.entry.js +1 -1
- package/dist/cjs/ix-blind.cjs.entry.js +8 -13
- package/dist/cjs/ix-blind.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-breadcrumb-item.cjs.entry.js +2 -2
- package/dist/cjs/ix-breadcrumb-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-burger-menu.cjs.entry.js +1 -1
- package/dist/cjs/ix-button.cjs.entry.js +2 -2
- package/dist/cjs/ix-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-category-filter.cjs.entry.js +2 -2
- package/dist/cjs/ix-category-filter.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-date-picker_2.cjs.entry.js +1 -1
- package/dist/cjs/ix-date-picker_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-dropdown-button.cjs.entry.js +1 -1
- package/dist/cjs/ix-dropdown-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-dropdown-quick-actions.cjs.entry.js +1 -1
- package/dist/cjs/ix-dropdown-quick-actions.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-dropdown.cjs.entry.js +52 -1
- package/dist/cjs/ix-dropdown.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-event-list-item.cjs.entry.js +1 -1
- package/dist/cjs/ix-event-list-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-expanding-search.cjs.entry.js +1 -1
- package/dist/cjs/ix-expanding-search.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-form-field.cjs.entry.js +1 -1
- package/dist/cjs/ix-form-field.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-group-context-menu_2.cjs.entry.js +1 -1
- package/dist/cjs/ix-group-context-menu_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-group.cjs.entry.js +1 -1
- package/dist/cjs/ix-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-icon-button_2.cjs.entry.js +3 -3
- package/dist/cjs/ix-icon-button_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-icon-toggle-button.cjs.entry.js +3 -3
- package/dist/cjs/ix-icon-toggle-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-input-group.cjs.entry.js +7 -4
- package/dist/cjs/ix-input-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-kpi.cjs.entry.js +1 -1
- package/dist/cjs/ix-kpi.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-map-navigation-overlay.cjs.entry.js +1 -1
- package/dist/cjs/ix-map-navigation-overlay.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-map-navigation.cjs.entry.js +1 -1
- package/dist/cjs/ix-map-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-menu.cjs.entry.js +2 -2
- package/dist/cjs/ix-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-modal-header.cjs.entry.js +7 -5
- package/dist/cjs/ix-modal-header.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-modal.cjs.entry.js +6 -3
- package/dist/cjs/ix-modal.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-pagination.cjs.entry.js +2 -2
- package/dist/cjs/ix-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-row.cjs.entry.js +1 -1
- package/dist/cjs/ix-row.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-select.cjs.entry.js +30 -4
- package/dist/cjs/ix-select.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-slider.cjs.entry.js +25 -3
- package/dist/cjs/ix-slider.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-tab-item_2.cjs.entry.js +44 -10
- package/dist/cjs/ix-tab-item_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-tile.cjs.entry.js +1 -1
- package/dist/cjs/ix-tile.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-toast-container.cjs.entry.js +1 -1
- package/dist/cjs/ix-toast-container.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-toggle-button.cjs.entry.js +1 -1
- package/dist/cjs/ix-tree.cjs.entry.js +3 -2
- package/dist/cjs/ix-tree.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-typography.cjs.entry.js +1 -1
- package/dist/cjs/ix-typography.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-upload.cjs.entry.js +1 -1
- package/dist/cjs/ix-upload.cjs.entry.js.map +1 -1
- package/dist/cjs/listener-0cce68b2.js +71 -0
- package/dist/cjs/listener-0cce68b2.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{menu-service-000df68d.js → menu-service-777bf5ce.js} +8 -3
- package/dist/cjs/menu-service-777bf5ce.js.map +1 -0
- package/dist/cjs/siemens-ix.cjs.js +1 -1
- package/dist/collection/components/blind/blind.css +151 -70
- package/dist/collection/components/blind/blind.js +8 -13
- package/dist/collection/components/blind/blind.js.map +1 -1
- package/dist/collection/components/blind/test/blind.ct.js +16 -0
- package/dist/collection/components/blind/test/blind.ct.js.map +1 -0
- package/dist/collection/components/breadcrumb-item/breadcrumb-item.css +6 -0
- package/dist/collection/components/button/base-button.js +1 -1
- package/dist/collection/components/button/base-button.js.map +1 -1
- package/dist/collection/components/button/button.css +3 -0
- package/dist/collection/components/button/test/button.ct.js +1 -1
- package/dist/collection/components/button/test/button.ct.js.map +1 -1
- package/dist/collection/components/category-filter/category-filter.css +24 -35
- package/dist/collection/components/dropdown/dropdown.js +44 -16
- package/dist/collection/components/dropdown/dropdown.js.map +1 -1
- package/dist/collection/components/dropdown-button/dropdown-button.css +2 -4
- package/dist/collection/components/dropdown-quick-actions/dropdown-quick-actions.css +4 -8
- package/dist/collection/components/event-list-item/event-list-item.css +1 -0
- package/dist/collection/components/expanding-search/expanding-search.css +10 -31
- package/dist/collection/components/form-field/form-field.css +7 -0
- package/dist/collection/components/group/group-context-menu.css +3 -6
- package/dist/collection/components/group/group.css +1 -2
- package/dist/collection/components/icon-button/icon-button.css +3 -0
- package/dist/collection/components/icon-toggle-button/icon-toggle-button.css +3 -0
- package/dist/collection/components/input-group/input-group.js +7 -4
- package/dist/collection/components/input-group/input-group.js.map +1 -1
- package/dist/collection/components/input-group/tests/input-group.ct.js +66 -0
- package/dist/collection/components/input-group/tests/input-group.ct.js.map +1 -1
- package/dist/collection/components/kpi/kpi.css +4 -8
- package/dist/collection/components/map-navigation/map-navigation.css +1 -2
- package/dist/collection/components/map-navigation-overlay/map-navigation-overlay.css +4 -8
- package/dist/collection/components/menu/menu.css +1 -7
- package/dist/collection/components/modal/modal.js +6 -3
- package/dist/collection/components/modal/modal.js.map +1 -1
- package/dist/collection/components/modal-header/modal-header.js +7 -5
- package/dist/collection/components/modal-header/modal-header.js.map +1 -1
- package/dist/collection/components/pagination/pagination.css +16 -37
- package/dist/collection/components/pagination/test/pagination.ct.js +1 -1
- package/dist/collection/components/pagination/test/pagination.ct.js.map +1 -1
- package/dist/collection/components/row/row.css +1 -2
- package/dist/collection/components/select/select.js +22 -10
- package/dist/collection/components/select/select.js.map +1 -1
- package/dist/collection/components/select/test/select.ct.js +19 -0
- package/dist/collection/components/select/test/select.ct.js.map +1 -1
- package/dist/collection/components/slider/slider.js +15 -10
- package/dist/collection/components/slider/slider.js.map +1 -1
- package/dist/collection/components/tabs/tabs.js +21 -12
- package/dist/collection/components/tabs/tabs.js.map +1 -1
- package/dist/collection/components/tile/tile.css +2 -4
- package/dist/collection/components/time-picker/time-picker.css +17 -30
- package/dist/collection/components/toast/styles/toast-container.css +1 -2
- package/dist/collection/components/tooltip/test/tooltip.ct.js +22 -0
- package/dist/collection/components/tooltip/test/tooltip.ct.js.map +1 -0
- package/dist/collection/components/tree/tree.js +3 -2
- package/dist/collection/components/tree/tree.js.map +1 -1
- package/dist/collection/components/typography/typography.css +1 -1
- package/dist/collection/components/upload/upload.css +4 -8
- package/dist/collection/components/utils/application-layout/service.js +7 -2
- package/dist/collection/components/utils/application-layout/service.js.map +1 -1
- package/dist/collection/components/utils/listener.js +65 -0
- package/dist/collection/components/utils/listener.js.map +1 -0
- package/dist/collection/components/utils/requestAnimationFrame.js +24 -0
- package/dist/collection/components/utils/requestAnimationFrame.js.map +1 -0
- package/dist/esm/{base-button-87048318.js → base-button-a4078c61.js} +2 -2
- package/dist/esm/base-button-a4078c61.js.map +1 -0
- package/dist/esm/{base-icon-button-afac2d95.js → base-icon-button-a3dc30a2.js} +2 -2
- package/dist/esm/{base-icon-button-afac2d95.js.map → base-icon-button-a3dc30a2.js.map} +1 -1
- package/dist/esm/ix-application-header.entry.js +1 -1
- package/dist/esm/ix-application.entry.js +1 -1
- package/dist/esm/ix-basic-navigation.entry.js +1 -1
- package/dist/esm/ix-blind.entry.js +9 -14
- package/dist/esm/ix-blind.entry.js.map +1 -1
- package/dist/esm/ix-breadcrumb-item.entry.js +2 -2
- package/dist/esm/ix-breadcrumb-item.entry.js.map +1 -1
- package/dist/esm/ix-burger-menu.entry.js +1 -1
- package/dist/esm/ix-button.entry.js +2 -2
- package/dist/esm/ix-button.entry.js.map +1 -1
- package/dist/esm/ix-category-filter.entry.js +2 -2
- package/dist/esm/ix-category-filter.entry.js.map +1 -1
- package/dist/esm/ix-date-picker_2.entry.js +1 -1
- package/dist/esm/ix-date-picker_2.entry.js.map +1 -1
- package/dist/esm/ix-dropdown-button.entry.js +1 -1
- package/dist/esm/ix-dropdown-button.entry.js.map +1 -1
- package/dist/esm/ix-dropdown-quick-actions.entry.js +1 -1
- package/dist/esm/ix-dropdown-quick-actions.entry.js.map +1 -1
- package/dist/esm/ix-dropdown.entry.js +52 -1
- package/dist/esm/ix-dropdown.entry.js.map +1 -1
- package/dist/esm/ix-event-list-item.entry.js +1 -1
- package/dist/esm/ix-event-list-item.entry.js.map +1 -1
- package/dist/esm/ix-expanding-search.entry.js +1 -1
- package/dist/esm/ix-expanding-search.entry.js.map +1 -1
- package/dist/esm/ix-form-field.entry.js +1 -1
- package/dist/esm/ix-form-field.entry.js.map +1 -1
- package/dist/esm/ix-group-context-menu_2.entry.js +1 -1
- package/dist/esm/ix-group-context-menu_2.entry.js.map +1 -1
- package/dist/esm/ix-group.entry.js +1 -1
- package/dist/esm/ix-group.entry.js.map +1 -1
- package/dist/esm/ix-icon-button_2.entry.js +3 -3
- package/dist/esm/ix-icon-button_2.entry.js.map +1 -1
- package/dist/esm/ix-icon-toggle-button.entry.js +3 -3
- package/dist/esm/ix-icon-toggle-button.entry.js.map +1 -1
- package/dist/esm/ix-input-group.entry.js +7 -4
- package/dist/esm/ix-input-group.entry.js.map +1 -1
- package/dist/esm/ix-kpi.entry.js +1 -1
- package/dist/esm/ix-kpi.entry.js.map +1 -1
- package/dist/esm/ix-map-navigation-overlay.entry.js +1 -1
- package/dist/esm/ix-map-navigation-overlay.entry.js.map +1 -1
- package/dist/esm/ix-map-navigation.entry.js +1 -1
- package/dist/esm/ix-map-navigation.entry.js.map +1 -1
- package/dist/esm/ix-menu.entry.js +2 -2
- package/dist/esm/ix-menu.entry.js.map +1 -1
- package/dist/esm/ix-modal-header.entry.js +7 -5
- package/dist/esm/ix-modal-header.entry.js.map +1 -1
- package/dist/esm/ix-modal.entry.js +6 -3
- package/dist/esm/ix-modal.entry.js.map +1 -1
- package/dist/esm/ix-pagination.entry.js +2 -2
- package/dist/esm/ix-pagination.entry.js.map +1 -1
- package/dist/esm/ix-row.entry.js +1 -1
- package/dist/esm/ix-row.entry.js.map +1 -1
- package/dist/esm/ix-select.entry.js +30 -4
- package/dist/esm/ix-select.entry.js.map +1 -1
- package/dist/esm/ix-slider.entry.js +25 -3
- package/dist/esm/ix-slider.entry.js.map +1 -1
- package/dist/esm/ix-tab-item_2.entry.js +44 -10
- package/dist/esm/ix-tab-item_2.entry.js.map +1 -1
- package/dist/esm/ix-tile.entry.js +1 -1
- package/dist/esm/ix-tile.entry.js.map +1 -1
- package/dist/esm/ix-toast-container.entry.js +1 -1
- package/dist/esm/ix-toast-container.entry.js.map +1 -1
- package/dist/esm/ix-toggle-button.entry.js +1 -1
- package/dist/esm/ix-tree.entry.js +3 -2
- package/dist/esm/ix-tree.entry.js.map +1 -1
- package/dist/esm/ix-typography.entry.js +1 -1
- package/dist/esm/ix-typography.entry.js.map +1 -1
- package/dist/esm/ix-upload.entry.js +1 -1
- package/dist/esm/ix-upload.entry.js.map +1 -1
- package/dist/esm/listener-3ed639e6.js +69 -0
- package/dist/esm/listener-3ed639e6.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{menu-service-5555b4fa.js → menu-service-04c1257c.js} +8 -3
- package/dist/esm/menu-service-04c1257c.js.map +1 -0
- package/dist/esm/siemens-ix.js +1 -1
- package/dist/siemens-ix/{p-aef14f96.entry.js → p-08420b3b.entry.js} +2 -2
- package/dist/siemens-ix/{p-aef14f96.entry.js.map → p-08420b3b.entry.js.map} +1 -1
- package/dist/siemens-ix/p-222b1672.entry.js +2 -0
- package/dist/siemens-ix/p-222b1672.entry.js.map +1 -0
- package/dist/siemens-ix/p-28633ffb.entry.js +2 -0
- package/dist/siemens-ix/{p-b803c716.entry.js.map → p-28633ffb.entry.js.map} +1 -1
- package/dist/siemens-ix/p-2ff2382a.entry.js +2 -0
- package/dist/siemens-ix/{p-737fca1b.entry.js.map → p-2ff2382a.entry.js.map} +1 -1
- package/dist/siemens-ix/p-3733b547.entry.js +2 -0
- package/dist/siemens-ix/{p-655d177c.entry.js.map → p-3733b547.entry.js.map} +1 -1
- package/dist/siemens-ix/{p-fa7f3eef.entry.js → p-37e0706d.entry.js} +2 -2
- package/dist/siemens-ix/{p-fa7f3eef.entry.js.map → p-37e0706d.entry.js.map} +1 -1
- package/dist/siemens-ix/p-39a2bd9d.entry.js +2 -0
- package/dist/siemens-ix/p-39a2bd9d.entry.js.map +1 -0
- package/dist/siemens-ix/p-51853519.entry.js +2 -0
- package/dist/siemens-ix/{p-302cd093.entry.js.map → p-51853519.entry.js.map} +1 -1
- package/dist/siemens-ix/{p-ad94f795.entry.js → p-556c4b0c.entry.js} +2 -2
- package/dist/siemens-ix/p-556c4b0c.entry.js.map +1 -0
- package/dist/siemens-ix/{p-f97f2394.entry.js → p-58fe5c24.entry.js} +2 -2
- package/dist/siemens-ix/p-5a0d7f95.entry.js +2 -0
- package/dist/siemens-ix/{p-355f9085.entry.js.map → p-5a0d7f95.entry.js.map} +1 -1
- package/dist/siemens-ix/p-5d907f16.entry.js +2 -0
- package/dist/siemens-ix/{p-b6d40648.entry.js.map → p-5d907f16.entry.js.map} +1 -1
- package/dist/siemens-ix/p-616b1eba.entry.js +2 -0
- package/dist/siemens-ix/{p-634da7f2.entry.js.map → p-616b1eba.entry.js.map} +1 -1
- package/dist/siemens-ix/p-68809439.entry.js +2 -0
- package/dist/siemens-ix/{p-9e0af149.entry.js.map → p-68809439.entry.js.map} +1 -1
- package/dist/siemens-ix/p-68b2dcca.entry.js +2 -0
- package/dist/siemens-ix/p-68b2dcca.entry.js.map +1 -0
- package/dist/siemens-ix/p-70bfeb3d.entry.js +2 -0
- package/dist/siemens-ix/{p-9249df8d.entry.js.map → p-70bfeb3d.entry.js.map} +1 -1
- package/dist/siemens-ix/p-79405d11.entry.js +2 -0
- package/dist/siemens-ix/{p-59dc0873.entry.js.map → p-79405d11.entry.js.map} +1 -1
- package/dist/siemens-ix/{p-ab452b82.js → p-7c5fc1c9.js} +2 -2
- package/dist/siemens-ix/{p-ab452b82.js.map → p-7c5fc1c9.js.map} +1 -1
- package/dist/siemens-ix/{p-5516480a.entry.js → p-8968a070.entry.js} +2 -2
- package/dist/siemens-ix/{p-5516480a.entry.js.map → p-8968a070.entry.js.map} +1 -1
- package/dist/siemens-ix/p-8b0793be.js +2 -0
- package/dist/siemens-ix/p-8b0fa98a.entry.js +2 -0
- package/dist/siemens-ix/{p-32265ee2.entry.js.map → p-8b0fa98a.entry.js.map} +1 -1
- package/dist/siemens-ix/p-8ba5f3c5.entry.js +2 -0
- package/dist/siemens-ix/p-8ba5f3c5.entry.js.map +1 -0
- package/dist/siemens-ix/{p-d7e974a8.entry.js → p-939376fb.entry.js} +2 -2
- package/dist/siemens-ix/p-939376fb.entry.js.map +1 -0
- package/dist/siemens-ix/p-9594dcfb.entry.js +2 -0
- package/dist/siemens-ix/{p-9848e4de.entry.js.map → p-9594dcfb.entry.js.map} +1 -1
- package/dist/siemens-ix/p-9dda017b.entry.js +2 -0
- package/dist/siemens-ix/p-9dda017b.entry.js.map +1 -0
- package/dist/siemens-ix/{p-b2042a15.entry.js → p-a00079d9.entry.js} +2 -2
- package/dist/siemens-ix/p-a00079d9.entry.js.map +1 -0
- package/dist/siemens-ix/p-aa89afe7.entry.js +2 -0
- package/dist/siemens-ix/{p-5a5e155c.entry.js.map → p-aa89afe7.entry.js.map} +1 -1
- package/dist/siemens-ix/{p-847da072.entry.js → p-aaef1367.entry.js} +2 -2
- package/dist/siemens-ix/{p-847da072.entry.js.map → p-aaef1367.entry.js.map} +1 -1
- package/dist/siemens-ix/p-b59e7155.js +2 -0
- package/dist/siemens-ix/p-b59e7155.js.map +1 -0
- package/dist/siemens-ix/p-bdc0c1f8.entry.js +2 -0
- package/dist/siemens-ix/{p-b735ee5e.entry.js.map → p-bdc0c1f8.entry.js.map} +1 -1
- package/dist/siemens-ix/p-c996a0ba.entry.js +2 -0
- package/dist/siemens-ix/p-c996a0ba.entry.js.map +1 -0
- package/dist/siemens-ix/p-ccf212e4.entry.js +2 -0
- package/dist/siemens-ix/{p-4968df15.entry.js.map → p-ccf212e4.entry.js.map} +1 -1
- package/dist/siemens-ix/p-cd8c86e2.entry.js +2 -0
- package/dist/siemens-ix/{p-da133606.entry.js.map → p-cd8c86e2.entry.js.map} +1 -1
- package/dist/siemens-ix/p-ce050115.entry.js +2 -0
- package/dist/siemens-ix/{p-167c037c.entry.js.map → p-ce050115.entry.js.map} +1 -1
- package/dist/siemens-ix/p-ceeefa96.entry.js +2 -0
- package/dist/siemens-ix/{p-dcb957d8.entry.js.map → p-ceeefa96.entry.js.map} +1 -1
- package/dist/siemens-ix/p-d0630de9.entry.js +2 -0
- package/dist/siemens-ix/p-d0630de9.entry.js.map +1 -0
- package/dist/siemens-ix/{p-042b8889.entry.js → p-d11781e7.entry.js} +2 -2
- package/dist/siemens-ix/{p-574e3cd1.entry.js → p-db7a632e.entry.js} +2 -2
- package/dist/siemens-ix/{p-228c5657.entry.js → p-e483ad44.entry.js} +2 -2
- package/dist/siemens-ix/p-e7406217.entry.js +2 -0
- package/dist/siemens-ix/{p-d29bcf75.entry.js.map → p-e7406217.entry.js.map} +1 -1
- package/dist/siemens-ix/p-f18c11c5.js +2 -0
- package/dist/siemens-ix/p-f18c11c5.js.map +1 -0
- package/dist/siemens-ix/siemens-ix-core.css +1 -1
- package/dist/siemens-ix/siemens-ix.css +26 -48
- package/dist/siemens-ix/siemens-ix.esm.js +1 -1
- package/dist/siemens-ix/siemens-ix.esm.js.map +1 -1
- package/dist/types/components/blind/test/blind.ct.d.ts +1 -0
- package/dist/types/components/dropdown/dropdown.d.ts +1 -0
- package/dist/types/components/slider/slider.d.ts +1 -1
- package/dist/types/components/tabs/tabs.d.ts +3 -2
- package/dist/types/components/tooltip/test/tooltip.ct.d.ts +1 -0
- package/dist/types/components/utils/listener.d.ts +11 -0
- package/dist/types/components/utils/requestAnimationFrame.d.ts +7 -0
- package/package.json +1 -1
- package/scss/components/form/_input.scss +8 -1
- package/scss/legacy/components/_forms.scss +0 -13
- package/scss/mixins/_fonts.scss +1 -1
- package/dist/cjs/base-button-c158438e.js.map +0 -1
- package/dist/cjs/menu-service-000df68d.js.map +0 -1
- package/dist/esm/base-button-87048318.js.map +0 -1
- package/dist/esm/menu-service-5555b4fa.js.map +0 -1
- package/dist/siemens-ix/p-167c037c.entry.js +0 -2
- package/dist/siemens-ix/p-1b9b19e6.js +0 -2
- package/dist/siemens-ix/p-28d29e36.entry.js +0 -2
- package/dist/siemens-ix/p-28d29e36.entry.js.map +0 -1
- package/dist/siemens-ix/p-302cd093.entry.js +0 -2
- package/dist/siemens-ix/p-32265ee2.entry.js +0 -2
- package/dist/siemens-ix/p-355f9085.entry.js +0 -2
- package/dist/siemens-ix/p-3ab30153.entry.js +0 -2
- package/dist/siemens-ix/p-3ab30153.entry.js.map +0 -1
- package/dist/siemens-ix/p-4968df15.entry.js +0 -2
- package/dist/siemens-ix/p-59dc0873.entry.js +0 -2
- package/dist/siemens-ix/p-5a5e155c.entry.js +0 -2
- package/dist/siemens-ix/p-5d172daa.js +0 -2
- package/dist/siemens-ix/p-5d172daa.js.map +0 -1
- package/dist/siemens-ix/p-634da7f2.entry.js +0 -2
- package/dist/siemens-ix/p-655d177c.entry.js +0 -2
- package/dist/siemens-ix/p-737fca1b.entry.js +0 -2
- package/dist/siemens-ix/p-9249df8d.entry.js +0 -2
- package/dist/siemens-ix/p-9848e4de.entry.js +0 -2
- package/dist/siemens-ix/p-9e0af149.entry.js +0 -2
- package/dist/siemens-ix/p-ad94f795.entry.js.map +0 -1
- package/dist/siemens-ix/p-b2042a15.entry.js.map +0 -1
- package/dist/siemens-ix/p-b6d40648.entry.js +0 -2
- package/dist/siemens-ix/p-b735ee5e.entry.js +0 -2
- package/dist/siemens-ix/p-b803c716.entry.js +0 -2
- package/dist/siemens-ix/p-bd873b87.entry.js +0 -2
- package/dist/siemens-ix/p-bd873b87.entry.js.map +0 -1
- package/dist/siemens-ix/p-c1318e16.entry.js +0 -2
- package/dist/siemens-ix/p-c1318e16.entry.js.map +0 -1
- package/dist/siemens-ix/p-d16a4670.entry.js +0 -2
- package/dist/siemens-ix/p-d16a4670.entry.js.map +0 -1
- package/dist/siemens-ix/p-d214f57a.entry.js +0 -2
- package/dist/siemens-ix/p-d214f57a.entry.js.map +0 -1
- package/dist/siemens-ix/p-d29bcf75.entry.js +0 -2
- package/dist/siemens-ix/p-d7e974a8.entry.js.map +0 -1
- package/dist/siemens-ix/p-da133606.entry.js +0 -2
- package/dist/siemens-ix/p-dcb957d8.entry.js +0 -2
- package/dist/siemens-ix/p-fd6006d2.entry.js +0 -2
- package/dist/siemens-ix/p-fd6006d2.entry.js.map +0 -1
- /package/dist/siemens-ix/{p-f97f2394.entry.js.map → p-58fe5c24.entry.js.map} +0 -0
- /package/dist/siemens-ix/{p-1b9b19e6.js.map → p-8b0793be.js.map} +0 -0
- /package/dist/siemens-ix/{p-042b8889.entry.js.map → p-d11781e7.entry.js.map} +0 -0
- /package/dist/siemens-ix/{p-574e3cd1.entry.js.map → p-db7a632e.entry.js.map} +0 -0
- /package/dist/siemens-ix/{p-228c5657.entry.js.map → p-e483ad44.entry.js.map} +0 -0
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as o,c as e,h as t,H as r,g as n}from"./p-76a509c7.js";import{B as i}from"./p-7c5fc1c9.js";import{L as a,I as d}from"./p-6f819085.js";const l=":host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none}:host(.disabled){cursor:default}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{min-width:5rem}.dropdown-group{margin:0.687rem;display:block;position:relative;width:21.562rem;border-radius:0.25rem;background-color:#f8f9fa;border:solid 0.062rem rgba(0, 0, 0, 0.25)}.dropdown-group .dropdown-group-title{display:block;position:relative;font-size:0.875rem;text-align:left;margin:0.937rem 0 1.25rem 0.937rem}.dropdown-group .dropdown-group-content{position:relative;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:11.562rem;margin:0.937rem 0 0.937rem 0.937rem}.dropdown-group .dropdown-group-content>*{margin-bottom:1rem}.dropdown-group-submit{display:flex;justify-content:space-between;margin:0 0.687rem 0 0.687rem}.dropdown-menu{position:absolute;background-color:var(--theme-menu--background);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);border:var(--theme-menu--border-thickness) solid var(--theme-menu--border--color);border-radius:var(--theme-menu--border-radius);max-width:100vw;padding:0.25rem 0;transition:background-color 150ms;box-shadow:var(--theme-menu--box-shadow)}.dropdown-menu.xl>.dropdown-item{height:2.5rem;line-height:2.187rem}.dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}.dropdown-buttons{display:flex;padding:0.25rem 0.5rem}.dropdown-buttons ix-icon-button+ix-icon-button{margin-inline-start:0.5rem}.dropdown-item{display:flex;height:2.5rem;position:relative;align-items:center;cursor:pointer;padding:0 2rem;border:1px solid transparent;color:var(--theme-menu-item--color);background-color:transparent}.dropdown-item:focus-visible{background-color:var(--theme-menu-item--background);color:var(--theme-menu-item--color)}.dropdown-item:focus-visible{outline:none;background-color:var(--theme-menu-item--background);border-color:#119fff;color:var(--theme-menu-item--color--focus)}.dropdown-item:not(.disabled):not(:disabled){cursor:pointer}.dropdown-item:not(.disabled):not(:disabled):hover{color:var(--theme-menu-item--color--hover);background-color:var(--theme-menu-item--background--hover)}.dropdown-item:not(.disabled):not(:disabled){cursor:pointer}.dropdown-item:not(.disabled):not(:disabled):active,.dropdown-item:not(.disabled):not(:disabled).active{color:var(--theme-menu-item--color--active);background-color:var(--theme-menu-item--background--active)}.dropdown-item.disabled,.dropdown-item:disabled{color:var(--theme-menu-item--color--disabled);background-color:var(--theme-menu-item--background--disabled)}.dropdown-item>a,.dropdown-item a:hover,.dropdown-item a:active{color:var(--theme-color-std-text)}.dropdown-item>.glyph{color:var(--theme-menu-item-icon--color);margin-inline-end:0.5rem}.dropdown-item>.glyph.disabled{color:var(--color-weak-text)}.dropdown-item>.glyph.glyph-single-check{color:var(--theme-menu-item-icon-check--color)}.dropdown-item>input[type=checkbox]+label{margin-bottom:0px}.dropdown-item>input[type=checkbox]+label::before{margin-right:1rem}.dropdown-divider{border-top:1px solid var(--theme-menu-separator--background);margin:0.25rem 0}button.dropdown-toggle{position:relative;padding-right:1.5rem}button.dropdown-toggle::after{position:absolute;top:45%;right:0.5rem}.form-control,.form-control-plaintext{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);color:var(--theme-input--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--theme-input--border-radius);height:2rem;min-height:2rem;min-width:2rem;background-color:var(--theme-input--background);border:solid 1px var(--theme-input--border-color);box-shadow:var(--theme-input--box-shadow);padding-inline-start:0.5rem;padding-inline-end:0.5rem}.form-control::-moz-placeholder,.form-control-plaintext::-moz-placeholder{color:var(--theme-input-hint--color)}.form-control::placeholder,.form-control-plaintext::placeholder{color:var(--theme-input-hint--color)}.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.form-control:focus-visible{color:var(--theme-input--color)}.form-control[type=number]{text-align:right}.form-control[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}.form-control.readonly,.form-control[readonly]{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem}.form-control:-moz-read-only{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.form-control:read-only,.form-control[readonly],.form-control[readOnly],.form-control.readonly{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.form-control:read-only::-moz-placeholder,.form-control[readonly]::-moz-placeholder,.form-control[readOnly]::-moz-placeholder,.form-control.readonly::-moz-placeholder{color:transparent}.form-control:-moz-read-only::placeholder{color:transparent}.form-control:read-only::placeholder,.form-control[readonly]::placeholder,.form-control[readOnly]::placeholder,.form-control.readonly::placeholder{color:transparent}.form-control:disabled,.form-control.disabled{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem;color:var(--theme-color-weak-text);border-color:var(--theme-input--border-color-bottom--disabled)}.form-control:disabled::-moz-placeholder,.form-control.disabled::-moz-placeholder{color:transparent}.form-control:disabled::placeholder,.form-control.disabled::placeholder{color:transparent}.form-control-plaintext{outline:0}.form-group{position:relative}.input-wrapper{display:flex;position:relative;align-items:center;flex-wrap:nowrap}.input-wrapper>.glyph{display:block;position:absolute;margin-inline-start:0.312rem;color:var(--theme-color-std-text)}.input-wrapper>input{padding-inline-start:2.2rem}select.form-control{padding:0 0.312rem}textarea.form-control{padding:0.375rem 0.5rem}input.disabled,input:disabled{color:var(--theme-input--color--disabled)}input:-moz-read-only{cursor:default}input:read-only,input.readonly{cursor:default}label{color:var(--theme-color-soft-text);padding:2px 0px}label.label-alignment-left{padding:6px 0px}input,input:-webkit-autofill{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-input--background) inset !important;-webkit-text-fill-color:var(--theme-input--color) !important;border-color:var(--theme-input--border-color) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input.hover,input:hover{border-color:var(--theme-input--border-color--hover);background-color:var(--theme-input--background--hover)}input.focus,input:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus)}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}input:disabled::-moz-placeholder{color:transparent}input:disabled::placeholder{color:transparent}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea{height:3.25rem;padding:0.375rem 1.25rem 0.375rem 0.5rem}textarea,textarea:-webkit-autofill{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-input--background) inset !important;-webkit-text-fill-color:var(--theme-input--color) !important;border-color:var(--theme-input--border-color) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea.hover,textarea:hover{border-color:var(--theme-input--border-color--hover);background-color:var(--theme-input--background--hover)}textarea.focus,textarea:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus)}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}textarea:disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder{color:transparent}textarea~.valid-feedback,textarea~.invalid-feedback,input~.valid-feedback,input~.invalid-feedback{display:none;font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}form textarea~.valid-feedback,form input~.valid-feedback{color:var(--theme-color-success)}form textarea~.invalid-feedback,form input~.invalid-feedback{color:var(--theme-color-alarm-text)}form:not([novalidate]) :invalid,form:not([novalidate]) .is-invalid,form.was-validated :invalid,form.was-validated .is-invalid{background-color:var(--theme-input-error--background);border-color:var(--theme-input-error--border-color);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}form:not([novalidate]) :invalid~.invalid-feedback,form:not([novalidate]) .is-invalid~.invalid-feedback,form.was-validated :invalid~.invalid-feedback,form.was-validated .is-invalid~.invalid-feedback{display:block}form:not([novalidate]) :valid~.valid-feedback,form:not([novalidate]) .is-valid~.valid-feedback,form.was-validated :valid~.valid-feedback,form.was-validated .is-valid~.valid-feedback{display:block}form:not(.was-validated) .invalid-feedback,form:not(.was-validated) .valid-feedback{display:none !important}:host{display:block;position:relative;height:auto}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host :host(:focus-visible:not(.disabled):not(:disabled)){border-color:var(--theme-color-primary);box-shadow:0 0 0.25rem 0 var(--theme-color-primary) !important}:host .reset-button{position:absolute;top:0.25rem;right:0.25rem}:host .reset-button.hide-reset-button{display:none}:host .input-container{display:flex;height:auto;max-height:3.75rem;padding:1px 1.5rem 1px 2rem !important}:host .input-container:not(.readonly):not(.disabled),:host .input-container:not(.readonly):not(.disabled):-webkit-autofill{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}:host .input-container:not(.readonly):not(.disabled):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-input--background) inset !important;-webkit-text-fill-color:var(--theme-input--color) !important;border-color:var(--theme-input--border-color) !important}:host .input-container:not(.readonly):not(.disabled)::-moz-placeholder{color:var(--theme-input-hint--color)}:host .input-container:not(.readonly):not(.disabled)::placeholder{color:var(--theme-input-hint--color)}:host .input-container:not(.readonly):not(.disabled).hover,:host .input-container:not(.readonly):not(.disabled):hover{border-color:var(--theme-input--border-color--hover);background-color:var(--theme-input--background--hover)}:host .input-container:not(.readonly):not(.disabled).focus,:host .input-container:not(.readonly):not(.disabled):focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus)}:host .input-container:not(.readonly):not(.disabled):disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}:host .input-container:not(.readonly):not(.disabled):disabled::-moz-placeholder{color:transparent}:host .input-container:not(.readonly):not(.disabled):disabled::placeholder{color:transparent}:host .input-container.disabled{color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}:host .input-container.readonly,:host .input-container.readonly:-webkit-autofill{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}:host .input-container.readonly:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-input--background) inset !important;-webkit-text-fill-color:var(--theme-input--color) !important;border-color:var(--theme-input--border-color) !important}:host .input-container.readonly::-moz-placeholder{color:var(--theme-input-hint--color)}:host .input-container.readonly::placeholder{color:var(--theme-input-hint--color)}:host .input-container.readonly.hover,:host .input-container.readonly:hover{border-color:var(--theme-input--border-color--hover);background-color:var(--theme-input--background--hover)}:host .input-container.readonly.focus,:host .input-container.readonly:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus)}:host .input-container.readonly:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}:host .input-container.readonly.read-only,:host .input-container.readonly:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}:host .input-container.readonly.read-only::-moz-placeholder,:host .input-container.readonly:read-only::-moz-placeholder{color:transparent}:host .input-container.readonly:-moz-read-only::placeholder{color:transparent}:host .input-container.readonly.read-only::placeholder,:host .input-container.readonly:read-only::placeholder{color:transparent}:host .input-container.readonly:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}:host .input-container.readonly:disabled::-moz-placeholder{color:transparent}:host .input-container.readonly:disabled::placeholder{color:transparent}:host .input-container.no-icon{padding-left:0.25rem}:host .token-container{flex-grow:1;overflow:hidden}:host .text-input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);width:auto;height:1.75rem;min-height:1.5rem;background:transparent;flex-grow:1;box-shadow:none}:host .text-input,:host .text-input:hover,:host .text-input:focus-visible{border:none;outline:none}:host .text-input.hide-placeholder::-moz-placeholder{opacity:0}:host .text-input.hide-placeholder::placeholder{opacity:0}:host .list-unstyled{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0;overflow-y:auto}:host ix-icon{position:absolute;top:0.5rem;left:0.5rem}:host ix-filter-chip{margin-right:0.5rem}:host .category-preview{display:flex;align-items:center;height:1.5rem;background-color:var(--theme-bg-3);border-top-left-radius:1rem;border-bottom-left-radius:1rem;padding:0.5rem;margin:2px 0}:host ul{height:100%}:host ul>li,:host input{padding-top:2px;padding-bottom:2px}:host ix-dropdown{min-width:10rem !important}:host ix-dropdown .dropdown-item-container{display:flex;flex-direction:column}:host ix-dropdown .dropdown-item-container .dropdown-item{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:2.5rem;margin:0.25rem 0.5rem;padding-inline:0.5rem;border:1px solid transparent;border-radius:100rem;width:auto;justify-content:flex-start;flex-grow:1}:host ix-dropdown .dropdown-item-container .dropdown-item:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr)}:host ix-dropdown .dropdown-item-container .category-item{border-end-end-radius:0;border-start-end-radius:0}:host ix-dropdown .dropdown-item-container .category-item-value{border-start-start-radius:0;border-end-start-radius:0}:host ix-dropdown .btn-toggle-operator{width:2rem;height:2rem;margin-inline:0.5rem}:host .d-none{display:none}";const s=class{constructor(t){o(this,t);this.categoryChanged=e(this,"categoryChanged",7);this.inputChanged=e(this,"inputChanged",7);this.filterChanged=e(this,"filterChanged",7);this.ID_CUSTOM_FILTER_VALUE="CW_CUSTOM_FILTER_VALUE";this.textInput=undefined;this.hasFocus=undefined;this.categoryLogicalOperator=a.EQUAL;this.inputValue=undefined;this.category=undefined;this.filterTokens=[];this.disabled=false;this.readonly=false;this.filterState=undefined;this.placeholder=undefined;this.categories=undefined;this.nonSelectableCategories={};this.suggestions=undefined;this.icon="search";this.hideIcon=undefined;this.repeatCategories=true;this.tmpDisableScrollIntoView=true;this.labelCategories="Categories";this.i18nPlainText="Filter by text"}watchFilterState(o){this.setFilterState(o)}componentDidLoad(){var o,e;if(this.filterState!==undefined){setTimeout((()=>this.setFilterState(this.filterState)))}(o=this.hostElement)===null||o===void 0?void 0:o.addEventListener("keydown",this.handleFormElementKeyDown.bind(this));(e=this.formElement)===null||e===void 0?void 0:e.addEventListener("submit",(o=>o.preventDefault()));if(this.textInput==null){console.warn("ix-category-filter - unable to add event listeners to native input element");return}this.textInput.addEventListener("focusin",(()=>{this.hasFocus=true}));this.textInput.addEventListener("focusout",(()=>this.hasFocus=false));this.textInput.addEventListener("input",(()=>{this.inputValue=this.textInput.value;const o=new d(this.inputValue,this.category);this.inputChanged.emit(o)}));this.textInput.addEventListener("keydown",this.handleInputElementKeyDown.bind(this))}setFilterState(o){this.filterTokens=[];for(const e of o.tokens){this.addToken(e,this.ID_CUSTOM_FILTER_VALUE,this.categoryLogicalOperator,false)}for(const e of o.categories){this.addToken(e.value,e.id,e.operator,false)}this.emitFilterEvent()}closeDropdown(){if(this.disabled||this.readonly){return}this.hostElement.shadowRoot.querySelector("ix-dropdown").show=false}handleFormElementKeyDown(o){switch(o.code){case"Enter":case"NumpadEnter":if(!document.activeElement.classList.contains("dropdown-item")){return}const e=document.activeElement.getAttribute("data-id");if(this.hasCategorySelection()){if(this.category!==undefined){this.addToken(e,this.category)}else if(document.activeElement.classList.contains("category-item-id")){this.selectCategory(e)}}else{this.addToken(e)}o.preventDefault();break;case"ArrowUp":this.focusPreviousItem();o.preventDefault();break;case"ArrowDown":this.focusNextItem();o.preventDefault();break;case"Escape":this.closeDropdown();break}}focusPreviousItem(){const o=document.activeElement.previousSibling;if(o instanceof HTMLElement){o.focus()}}focusNextItem(){const o=document.activeElement.nextSibling;if(o instanceof HTMLElement){o.focus()}}handleInputElementKeyDown(o){var e;switch(o.code){case"ArrowDown":const t=`.category-item-${this.category!==undefined?"value":"id"}`;let r=this.hostElement.shadowRoot.querySelector(t);if(r instanceof HTMLElement){r.focus();o.stopPropagation()}else if((e=this.suggestions)===null||e===void 0?void 0:e.length){r=this.hostElement.shadowRoot.querySelector(".category-item");if(r instanceof HTMLElement){r.focus();o.stopPropagation()}}break;case"Backspace":if(this.textInput.value!==""){return}if(this.category!==undefined){this.category=undefined;return}const n=this.filterTokens.length;if(n>0){this.removeToken(n-1)}break;case"Enter":case"NumpadEnter":this.addToken(this.inputValue,this.category);o.preventDefault();break}}emitFilterEvent(){const o=this.filterTokens.filter((o=>o.id===this.ID_CUSTOM_FILTER_VALUE)).map((o=>o.value));const e=this.filterTokens.filter((o=>o.id!==this.ID_CUSTOM_FILTER_VALUE));const t={tokens:o,categories:e};this.filterChanged.emit(t)}addToken(o,e=this.ID_CUSTOM_FILTER_VALUE,t=this.categoryLogicalOperator,r=true){if(o===undefined||o===null){return}const n=o.trim();if(n===""){return}if(this.hasToken(n)){return}const i={id:e,value:n,operator:t};this.filterTokens=[...this.filterTokens,i];this.textInput.value="";this.inputValue="";this.categoryLogicalOperator=a.EQUAL;if(this.category!==undefined){this.category=undefined}this.isScrollStateDirty=true;this.textInput.focus();if(r){this.emitFilterEvent()}this.closeDropdown()}removeToken(o){this.filterTokens=this.filterTokens.filter(((e,t)=>t!==o));this.emitFilterEvent()}getCategoryIds(){const o=[];for(const e in this.categories){if(Object.prototype.hasOwnProperty.call(this.categories,e)){o.push(e)}}return o}selectCategory(o){this.category=o;this.textInput.value="";this.inputValue="";this.textInput.focus();this.categoryChanged.emit(o)}resetFilter(){this.closeDropdown();this.filterTokens=[];this.emitFilterEvent()}filterMultiples(o){if(this.repeatCategories){return true}const e=this.filterTokens.find((e=>e.id===o));return!e}hasToken(o){return this.filterTokens.some((e=>{const t=e.value===o;if(!t){return false}if(this.category!==undefined){return this.category===e.id}if(e.id){return e.id===this.ID_CUSTOM_FILTER_VALUE}return t}))}filterDuplicateTokens(o){return!this.hasToken(o)}filterByInput(o){if(this.inputValue===undefined||this.inputValue===""){return true}return o.toLowerCase().indexOf(this.inputValue.toLowerCase())!==-1}toggleCategoryOperator(){switch(this.categoryLogicalOperator){case a.EQUAL:this.categoryLogicalOperator=a.NOT_EQUAL;break;case a.NOT_EQUAL:this.categoryLogicalOperator=a.EQUAL;break}}getFilterChipLabel(o){var e,t,r;if(o.id===this.ID_CUSTOM_FILTER_VALUE){return o.value}const n=o.operator===a.EQUAL?"=":"!=";const i=(r=(t=(e=this.categories[o.id])===null||e===void 0?void 0:e.label)!==null&&t!==void 0?t:this.nonSelectableCategories[o.id])!==null&&r!==void 0?r:o.id;return`${i} ${n} ${o.value}`}getFilteredSuggestions(){var o,e;if(!((o=this.suggestions)===null||o===void 0?void 0:o.length)){return[]}return(e=this.suggestions)===null||e===void 0?void 0:e.filter((o=>this.filterByInput(o))).filter((o=>this.filterDuplicateTokens(o)))}hasCategorySelection(){return this.categories!==undefined}renderPlainSuggestions(){return t("div",{class:"dropdown-item-container"},this.getFilteredSuggestions().map((o=>t("button",{class:"dropdown-item","data-id":o,onClick:()=>this.addToken(o),key:o,title:o},o))))}renderOperatorButton(){const o={type:"button",variant:"secondary",outline:false,ghost:true,iconOnly:true,iconOval:false,selected:false,disabled:this.disabled,loading:false,icon:"",onClick:o=>{o.stopPropagation();this.toggleCategoryOperator()},extraClasses:{"btn-icon-32":true,"btn-toggle-operator":true}};return t(i,Object.assign({},o),this.categoryLogicalOperator===a.NOT_EQUAL?"=":"!=")}renderCategoryValues(){var o,e;return t("div",{class:"dropdown-item-container"},this.renderOperatorButton(),t("div",{class:"dropdown-header"},(o=this.categories[this.category])===null||o===void 0?void 0:o.label),(e=this.categories[this.category])===null||e===void 0?void 0:e.options.filter((o=>this.filterByInput(o))).filter((o=>this.filterDuplicateTokens(o))).map((o=>t("button",{class:"dropdown-item category-item-value","data-id":o,title:o,key:o,onClick:()=>this.addToken(o,this.category)},`${this.categoryLogicalOperator===a.EQUAL?"=":"!="} ${o}`))))}renderDropdownContent(){if(this.hasCategorySelection()){if(this.category!==undefined){return this.renderCategoryValues()}else{return this.renderCategorySelection()}}else return this.renderPlainSuggestions()}renderCategorySelection(){var o;return t("div",{class:"dropdown-item-container"},(o=this.getCategoryIds())===null||o===void 0?void 0:o.filter((o=>this.filterByInput(this.categories[o].label))).filter((o=>this.filterMultiples(o))).map((o=>{var e;return t("button",{class:"dropdown-item category-item category-item-id","data-id":o,title:this.categories[o].label,key:o,onClick:e=>{e.preventDefault();this.selectCategory(o)},tabindex:"0"},(e=this.categories[o])===null||e===void 0?void 0:e.label)})))}getDropdownHeader(){if(this.categories!==undefined){if(this.category!==undefined){return null}else{return this.labelCategories}}return this.i18nPlainText}componentDidRender(){if(this.isScrollStateDirty){if(!this.tmpDisableScrollIntoView){this.textInput.scrollIntoView()}this.isScrollStateDirty=false}}getResetButton(){return t("ix-icon-button",{onClick:()=>this.resetFilter(),class:{"reset-button":true,"hide-reset-button":!this.filterTokens.length&&this.category===undefined},ghost:true,oval:true,icon:"clear",size:"16"})}getIconColor(){if(this.disabled){return"color-componentn-1"}if(this.readonly){return"color-std-txt"}return"color-primary"}render(){var o;return t(r,null,t("form",{ref:o=>this.formElement=o},t("div",{"read-only":this.readonly,class:{"input-container":true,disabled:this.disabled,focus:this.hasFocus,readonly:this.readonly,"no-icon":this.hideIcon}},t("ix-icon",{color:this.getIconColor(),class:{"d-none":this.hideIcon},name:this.icon,size:"16"}),t("div",{class:"token-container"},t("ul",{class:"list-unstyled"},this.filterTokens.map(((o,e)=>t("li",{key:o.toString(),class:{animate__animated:true,animate__fadein:true}},t("ix-filter-chip",{disabled:this.disabled,readonly:this.readonly,onCloseClick:()=>this.removeToken(e)},this.getFilterChipLabel(o))))),this.categories===undefined?"":t("li",{class:{"category-preview":true,"d-none":this.category===undefined}},(o=this.categories[this.category])===null||o===void 0?void 0:o.label),t("input",{class:{"text-input":true,"hide-placeholder":this.readonly||this.disabled||this.category!==undefined},disabled:this.disabled,readonly:this.readonly,ref:o=>this.textInput=o,type:"text",placeholder:this.placeholder}))),this.getResetButton())),this.disabled||this.readonly?"":t("ix-dropdown",{closeBehavior:"outside",offset:{mainAxis:2},trigger:this.textInput,triggerEvent:["click","focus"],header:this.getDropdownHeader()},this.renderDropdownContent()))}get hostElement(){return n(this)}static get watchers(){return{filterState:["watchFilterState"]}}};s.style=l;export{s as ix_category_filter};
|
|
2
|
+
//# sourceMappingURL=p-70bfeb3d.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["categoryFilterCss","CategoryFilter","this","ID_CUSTOM_FILTER_VALUE","LogicalFilterOperator","EQUAL","watchFilterState","newValue","setFilterState","componentDidLoad","filterState","undefined","setTimeout","_a","hostElement","addEventListener","handleFormElementKeyDown","bind","_b","formElement","e","preventDefault","textInput","console","warn","hasFocus","inputValue","value","inputState","InputState","category","inputChanged","emit","handleInputElementKeyDown","state","filterTokens","token","tokens","addToken","categoryLogicalOperator","categories","id","operator","emitFilterEvent","closeDropdown","disabled","readonly","shadowRoot","querySelector","show","code","document","activeElement","classList","contains","getAttribute","hasCategorySelection","selectCategory","focusPreviousItem","focusNextItem","sibling","previousSibling","HTMLElement","focus","nextSibling","selector","item","stopPropagation","suggestions","length","tokenCount","removeToken","filter","map","filterChanged","emitEvent","newToken","trim","hasToken","pair","isScrollStateDirty","index","_","i","getCategoryIds","ids","Object","prototype","hasOwnProperty","call","push","categoryChanged","resetFilter","filterMultiples","repeatCategories","isCategoryAlreadySet","find","some","filterToken","hasSameValue","filterDuplicateTokens","filterByInput","toLowerCase","indexOf","toggleCategoryOperator","NOT_EQUAL","getFilterChipLabel","operatorString","label","_c","nonSelectableCategories","getFilteredSuggestions","renderPlainSuggestions","h","class","suggestion","onClick","key","title","renderOperatorButton","params","type","variant","outline","ghost","iconOnly","iconOval","selected","loading","icon","extraClasses","BaseButton","assign","renderCategoryValues","options","renderDropdownContent","renderCategorySelection","tabindex","getDropdownHeader","labelCategories","i18nPlainText","componentDidRender","tmpDisableScrollIntoView","scrollIntoView","getResetButton","oval","size","getIconColor","render","Host","ref","el","hideIcon","color","name","toString","animate__animated","animate__fadein","onCloseClick","placeholder","closeBehavior","offset","mainAxis","trigger","triggerEvent","header"],"sources":["./src/components/category-filter/category-filter.scss?tag=ix-category-filter&encapsulation=shadow","./src/components/category-filter/category-filter.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/shadows';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/text-truncation';\n@import '../button/button';\n@import 'legacy/components/dropdown';\n@import 'legacy/components/forms';\n@import 'components/form/input';\n\n:host {\n @include ix-component;\n\n display: block;\n position: relative;\n height: auto;\n\n @include host-focus-visible {\n border-color: var(--theme-color-primary);\n box-shadow: 0 0 $tiny-space 0 var(--theme-color-primary) !important;\n }\n\n .reset-button {\n position: absolute;\n top: $tiny-space;\n right: $tiny-space;\n }\n\n .reset-button.hide-reset-button {\n display: none;\n }\n\n .input-container {\n &:not(.readonly):not(.disabled) {\n @include element-input('false');\n }\n\n &.disabled {\n color: var(--theme-input--color--disabled);\n border-bottom: var(--theme-input--border-thickness, 1px) solid\n var(--theme-input--border-color-bottom--disabled);\n }\n\n &.readonly {\n @include element-input;\n }\n\n display: flex;\n height: auto;\n max-height: 3.75rem;\n padding: 1px $large-space 1px $x-large-space !important;\n\n &.no-icon {\n padding-left: $tiny-space;\n }\n }\n\n .token-container {\n flex-grow: 1;\n overflow: hidden;\n }\n\n .text-input {\n @include ellipsis;\n @include text-default;\n width: auto;\n height: 1.75rem;\n min-height: $large-space;\n background: transparent;\n flex-grow: 1;\n box-shadow: none;\n\n &,\n &:hover,\n &:focus-visible {\n border: none;\n outline: none;\n }\n\n &.hide-placeholder::placeholder {\n opacity: 0;\n }\n }\n\n .list-unstyled {\n display: flex;\n flex-wrap: wrap;\n list-style: none;\n padding: 0;\n margin: 0;\n overflow-y: auto;\n }\n\n ix-icon {\n position: absolute;\n top: $small-space;\n left: $small-space;\n }\n\n ix-filter-chip {\n margin-right: $small-space;\n }\n\n .category-preview {\n display: flex;\n align-items: center;\n height: $large-space;\n background-color: var(--theme-bg-3);\n border-top-left-radius: $default-space;\n border-bottom-left-radius: $default-space;\n padding: $small-space;\n margin: 2px 0;\n }\n\n ul {\n height: 100%;\n }\n\n ul > li,\n input {\n padding-top: 2px;\n padding-bottom: 2px;\n }\n\n ix-dropdown {\n min-width: 10rem !important;\n\n .dropdown-item-container {\n display: flex;\n flex-direction: column;\n\n .dropdown-item {\n @include text-default-single;\n @include ellipsis;\n @include focus-visible {\n border-color: var(--theme-color-focus-bdr);\n }\n\n height: $large-control-height;\n margin: $tiny-space $small-space;\n padding-inline: $small-space;\n border: 1px solid transparent;\n border-radius: 100rem;\n width: auto;\n justify-content: flex-start;\n flex-grow: 1;\n }\n\n .category-item {\n border-end-end-radius: 0;\n border-start-end-radius: 0;\n }\n\n .category-item-value {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n }\n\n .btn-toggle-operator {\n width: 2rem;\n height: 2rem;\n margin-inline: $small-space;\n }\n }\n\n .d-none {\n display: none;\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { FilterState } from './filter-state';\nimport { InputState } from './input-state';\nimport { LogicalFilterOperator } from './logical-filter-operator';\n\n@Component({\n tag: 'ix-category-filter',\n styleUrl: 'category-filter.scss',\n shadow: true,\n})\nexport class CategoryFilter {\n private readonly ID_CUSTOM_FILTER_VALUE = 'CW_CUSTOM_FILTER_VALUE';\n\n @State() private textInput?: HTMLInputElement;\n private formElement?: HTMLFormElement;\n private isScrollStateDirty: boolean;\n\n @Element() hostElement: HTMLIxCategoryFilterElement;\n\n @State() hasFocus: boolean;\n @State() categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n @State() inputValue: string;\n @State() category: string;\n @State() filterTokens: Array<{\n id: string;\n value: string;\n operator: LogicalFilterOperator;\n }> = [];\n\n /**\n * If true the filter will be in disabled state\n */\n @Prop() disabled = false;\n\n /**\n * If true the filter will be in readonly mode\n */\n @Prop() readonly = false;\n\n /**\n * A set of search criteria to populate the component with.\n */\n @Prop() filterState: FilterState;\n\n /**\n * Placeholder text to be displayed in an empty input field.\n */\n @Prop() placeholder: string;\n\n /**\n * Configuration object hash used to populate the dropwdown menu for typeahead and quick selection functionality.\n * Each ID maps to an object with a label and an array of options to select from.\n */\n @Prop() categories: {\n [id: string]: {\n label: string;\n options: string[];\n };\n };\n\n /**\n * In certain use cases some categories may not be available for selection anymore.\n * To allow proper display of set filters with these categories this ID to label mapping can be populated.\n *\n * Configuration object hash used to supply labels to the filter chips in the input field.\n * Each ID maps to a string representing the label to display.\n */\n @Prop() nonSelectableCategories?: {\n [id: string]: string;\n } = {};\n\n /**\n * A list of strings that will be supplied as typeahead suggestions not tied to any categories.\n */\n @Prop() suggestions: string[];\n\n /**\n * The icon next to the actual text input\n * Defaults to 'search'\n */\n @Prop() icon = 'search';\n\n /**\n * Allows to hide the icon inside the text input.\n * Defaults to false\n */\n @Prop() hideIcon: boolean;\n\n /**\n * If set to true allows that a single category can be set more than once.\n * An already set category will not appear in the category dropdown if set to false.\n *\n * Defaults to true\n */\n @Prop() repeatCategories = true;\n\n /**\n * @internal For debugging purposes only!\n */\n @Prop() tmpDisableScrollIntoView = true;\n\n /**\n * i18n\n */\n @Prop() labelCategories = 'Categories';\n\n /**\n * i18n\n */\n @Prop() i18nPlainText = 'Filter by text';\n\n /**\n * Event dispatched whenever the a category gets selected in the dropdown\n */\n @Event() categoryChanged: EventEmitter<string>;\n\n /**\n * Event dispatched whenever the text input changes.\n */\n @Event() inputChanged: EventEmitter<InputState>;\n\n /**\n * Event dispatched whenever the filter state changes.\n */\n @Event() filterChanged: EventEmitter<FilterState>;\n\n @Watch('filterState')\n watchFilterState(newValue) {\n this.setFilterState(newValue);\n }\n\n componentDidLoad() {\n if (this.filterState !== undefined) {\n setTimeout(() => this.setFilterState(this.filterState));\n }\n\n this.hostElement?.addEventListener(\n 'keydown',\n this.handleFormElementKeyDown.bind(this)\n );\n\n this.formElement?.addEventListener('submit', (e) => e.preventDefault());\n\n if (this.textInput == null) {\n console.warn(\n 'ix-category-filter - unable to add event listeners to native input element'\n );\n return;\n }\n\n this.textInput.addEventListener('focusin', () => {\n this.hasFocus = true;\n });\n this.textInput.addEventListener('focusout', () => (this.hasFocus = false));\n this.textInput.addEventListener('input', () => {\n this.inputValue = this.textInput.value;\n const inputState = new InputState(this.inputValue, this.category);\n this.inputChanged.emit(inputState);\n });\n this.textInput.addEventListener(\n 'keydown',\n this.handleInputElementKeyDown.bind(this)\n );\n }\n\n private setFilterState(state: FilterState) {\n this.filterTokens = [];\n\n for (const token of state.tokens) {\n this.addToken(\n token,\n this.ID_CUSTOM_FILTER_VALUE,\n this.categoryLogicalOperator,\n false\n );\n }\n\n for (const category of state.categories) {\n this.addToken(category.value, category.id, category.operator, false);\n }\n\n this.emitFilterEvent();\n }\n\n private closeDropdown() {\n if (this.disabled || this.readonly) {\n return;\n }\n\n this.hostElement.shadowRoot.querySelector('ix-dropdown').show = false;\n }\n\n private handleFormElementKeyDown(e: KeyboardEvent) {\n switch (e.code) {\n case 'Enter':\n case 'NumpadEnter':\n if (!document.activeElement.classList.contains('dropdown-item')) {\n return;\n }\n\n const token = document.activeElement.getAttribute('data-id');\n\n if (this.hasCategorySelection()) {\n if (this.category !== undefined) {\n this.addToken(token, this.category);\n } else if (\n document.activeElement.classList.contains('category-item-id')\n ) {\n this.selectCategory(token);\n }\n } else {\n this.addToken(token);\n }\n\n e.preventDefault();\n break;\n\n case 'ArrowUp':\n this.focusPreviousItem();\n e.preventDefault();\n break;\n\n case 'ArrowDown':\n this.focusNextItem();\n e.preventDefault();\n break;\n\n case 'Escape':\n this.closeDropdown();\n break;\n }\n }\n\n private focusPreviousItem() {\n const sibling = document.activeElement.previousSibling;\n if (sibling instanceof HTMLElement) {\n sibling.focus();\n }\n }\n\n private focusNextItem() {\n const sibling = document.activeElement.nextSibling;\n if (sibling instanceof HTMLElement) {\n sibling.focus();\n }\n }\n\n private handleInputElementKeyDown(e: KeyboardEvent) {\n switch (e.code) {\n case 'ArrowDown':\n const selector = `.category-item-${\n this.category !== undefined ? 'value' : 'id'\n }`;\n let item = this.hostElement.shadowRoot.querySelector(selector);\n\n if (item instanceof HTMLElement) {\n item.focus();\n e.stopPropagation();\n } else if (this.suggestions?.length) {\n item = this.hostElement.shadowRoot.querySelector('.category-item');\n if (item instanceof HTMLElement) {\n item.focus();\n e.stopPropagation();\n }\n }\n break;\n\n case 'Backspace':\n if (this.textInput.value !== '') {\n return;\n }\n\n if (this.category !== undefined) {\n this.category = undefined;\n return;\n }\n\n const tokenCount = this.filterTokens.length;\n if (tokenCount > 0) {\n this.removeToken(tokenCount - 1);\n }\n break;\n\n case 'Enter':\n case 'NumpadEnter':\n this.addToken(this.inputValue, this.category);\n e.preventDefault();\n break;\n }\n }\n\n private emitFilterEvent() {\n const tokens = this.filterTokens\n .filter((item) => item.id === this.ID_CUSTOM_FILTER_VALUE)\n .map((item) => item.value);\n const categories = this.filterTokens.filter(\n (item) => item.id !== this.ID_CUSTOM_FILTER_VALUE\n );\n const filterState: FilterState = {\n tokens,\n categories,\n };\n\n this.filterChanged.emit(filterState);\n }\n\n private addToken(\n token: string,\n category: string = this.ID_CUSTOM_FILTER_VALUE,\n operator = this.categoryLogicalOperator,\n emitEvent = true\n ) {\n if (token === undefined || token === null) {\n return;\n }\n\n const newToken = token.trim();\n\n if (newToken === '') {\n return;\n }\n\n if (this.hasToken(newToken)) {\n return;\n }\n\n const pair = { id: category, value: newToken, operator };\n this.filterTokens = [...this.filterTokens, pair];\n this.textInput.value = '';\n this.inputValue = '';\n this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n\n if (this.category !== undefined) {\n this.category = undefined;\n }\n\n this.isScrollStateDirty = true;\n\n this.textInput.focus();\n\n if (emitEvent) {\n this.emitFilterEvent();\n }\n\n this.closeDropdown();\n }\n\n private removeToken(index: number) {\n this.filterTokens = this.filterTokens.filter((_, i) => i !== index);\n this.emitFilterEvent();\n }\n\n private getCategoryIds() {\n const ids = [];\n for (const id in this.categories) {\n if (Object.prototype.hasOwnProperty.call(this.categories, id)) {\n ids.push(id);\n }\n }\n\n return ids;\n }\n\n private selectCategory(category: string) {\n this.category = category;\n this.textInput.value = '';\n this.inputValue = '';\n this.textInput.focus();\n this.categoryChanged.emit(category);\n }\n\n private resetFilter() {\n this.closeDropdown();\n this.filterTokens = [];\n this.emitFilterEvent();\n }\n\n private filterMultiples(value: string) {\n if (this.repeatCategories) {\n return true;\n }\n\n const isCategoryAlreadySet = this.filterTokens.find(\n (token) => token.id === value\n );\n\n return !isCategoryAlreadySet;\n }\n\n private hasToken(token: string) {\n return this.filterTokens.some((filterToken) => {\n const hasSameValue = filterToken.value === token;\n\n if (!hasSameValue) {\n return false;\n }\n\n if (this.category !== undefined) {\n return this.category === filterToken.id;\n }\n\n if (filterToken.id) {\n return filterToken.id === this.ID_CUSTOM_FILTER_VALUE;\n }\n\n return hasSameValue;\n });\n }\n\n private filterDuplicateTokens(value: string) {\n return !this.hasToken(value);\n }\n\n private filterByInput(value: string) {\n if (this.inputValue === undefined || this.inputValue === '') {\n return true;\n }\n\n return value.toLowerCase().indexOf(this.inputValue.toLowerCase()) !== -1;\n }\n\n private toggleCategoryOperator() {\n switch (this.categoryLogicalOperator) {\n case LogicalFilterOperator.EQUAL:\n this.categoryLogicalOperator = LogicalFilterOperator.NOT_EQUAL;\n break;\n\n case LogicalFilterOperator.NOT_EQUAL:\n this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n break;\n }\n }\n\n private getFilterChipLabel(value: {\n id: string;\n value: string;\n operator: LogicalFilterOperator;\n }): string {\n if (value.id === this.ID_CUSTOM_FILTER_VALUE) {\n return value.value;\n }\n\n const operatorString =\n value.operator === LogicalFilterOperator.EQUAL ? '=' : '!=';\n const label =\n this.categories[value.id]?.label ??\n this.nonSelectableCategories[value.id] ??\n value.id;\n\n return `${label} ${operatorString} ${value.value}`;\n }\n\n private getFilteredSuggestions() {\n if (!this.suggestions?.length) {\n return [];\n }\n\n return this.suggestions\n ?.filter((value) => this.filterByInput(value))\n .filter((value) => this.filterDuplicateTokens(value));\n }\n\n private hasCategorySelection() {\n return this.categories !== undefined;\n }\n\n private renderPlainSuggestions() {\n return (\n <div class=\"dropdown-item-container\">\n {this.getFilteredSuggestions().map((suggestion) => (\n <button\n class=\"dropdown-item\"\n data-id={suggestion}\n onClick={() => this.addToken(suggestion)}\n key={suggestion}\n title={suggestion}\n >\n {suggestion}\n </button>\n ))}\n </div>\n );\n }\n\n private renderOperatorButton() {\n const params: BaseButtonProps = {\n type: 'button',\n variant: 'secondary',\n outline: false,\n ghost: true,\n iconOnly: true,\n iconOval: false,\n selected: false,\n disabled: this.disabled,\n loading: false,\n icon: '',\n onClick: (e: Event) => {\n e.stopPropagation();\n this.toggleCategoryOperator();\n },\n extraClasses: {\n 'btn-icon-32': true,\n 'btn-toggle-operator': true,\n },\n };\n\n return (\n <BaseButton {...params}>\n {this.categoryLogicalOperator === LogicalFilterOperator.NOT_EQUAL\n ? '='\n : '!='}\n </BaseButton>\n );\n }\n\n private renderCategoryValues() {\n return (\n <div class=\"dropdown-item-container\">\n {this.renderOperatorButton()}\n <div class=\"dropdown-header\">\n {this.categories[this.category]?.label}\n </div>\n {this.categories[this.category]?.options\n .filter((value) => this.filterByInput(value))\n .filter((value) => this.filterDuplicateTokens(value))\n .map((id) => (\n <button\n class=\"dropdown-item category-item-value\"\n data-id={id}\n title={id}\n key={id}\n onClick={() => this.addToken(id, this.category)}\n >\n {`${\n this.categoryLogicalOperator === LogicalFilterOperator.EQUAL\n ? '='\n : '!='\n } ${id}`}\n </button>\n ))}\n </div>\n );\n }\n\n private renderDropdownContent() {\n if (this.hasCategorySelection()) {\n if (this.category !== undefined) {\n return this.renderCategoryValues();\n } else {\n return this.renderCategorySelection();\n }\n } else return this.renderPlainSuggestions();\n }\n\n private renderCategorySelection() {\n return (\n <div class=\"dropdown-item-container\">\n {this.getCategoryIds()\n ?.filter((id) => this.filterByInput(this.categories[id].label))\n .filter((id) => this.filterMultiples(id))\n .map((id) => (\n <button\n class=\"dropdown-item category-item category-item-id\"\n data-id={id}\n title={this.categories[id].label}\n key={id}\n onClick={(e) => {\n e.preventDefault();\n this.selectCategory(id);\n }}\n tabindex=\"0\"\n >\n {this.categories[id]?.label}\n </button>\n ))}\n </div>\n );\n }\n\n private getDropdownHeader() {\n if (this.categories !== undefined) {\n if (this.category !== undefined) {\n return null;\n } else {\n return this.labelCategories;\n }\n }\n\n return this.i18nPlainText;\n }\n\n componentDidRender() {\n if (this.isScrollStateDirty) {\n if (!this.tmpDisableScrollIntoView) {\n this.textInput.scrollIntoView();\n }\n this.isScrollStateDirty = false;\n }\n }\n\n private getResetButton() {\n return (\n <ix-icon-button\n onClick={() => this.resetFilter()}\n class={{\n 'reset-button': true,\n 'hide-reset-button':\n !this.filterTokens.length && this.category === undefined,\n }}\n ghost\n oval\n icon={'clear'}\n size=\"16\"\n ></ix-icon-button>\n );\n }\n\n private getIconColor() {\n if (this.disabled) {\n return 'color-componentn-1';\n }\n\n if (this.readonly) {\n return 'color-std-txt';\n }\n\n return 'color-primary';\n }\n\n render() {\n return (\n <Host>\n <form ref={(el) => (this.formElement = el)}>\n <div\n read-only={this.readonly}\n class={{\n 'input-container': true,\n disabled: this.disabled,\n focus: this.hasFocus,\n readonly: this.readonly,\n 'no-icon': this.hideIcon,\n }}\n >\n <ix-icon\n color={this.getIconColor()}\n class={{ 'd-none': this.hideIcon }}\n name={this.icon}\n size=\"16\"\n ></ix-icon>\n <div class=\"token-container\">\n <ul class=\"list-unstyled\">\n {this.filterTokens.map((value, index) => (\n <li\n key={value.toString()}\n class={{\n animate__animated: true,\n animate__fadein: true,\n }}\n >\n <ix-filter-chip\n disabled={this.disabled}\n readonly={this.readonly}\n onCloseClick={() => this.removeToken(index)}\n >\n {this.getFilterChipLabel(value)}\n </ix-filter-chip>\n </li>\n ))}\n {this.categories === undefined ? (\n ''\n ) : (\n <li\n class={{\n 'category-preview': true,\n 'd-none': this.category === undefined,\n }}\n >\n {this.categories[this.category]?.label}\n </li>\n )}\n <input\n class={{\n 'text-input': true,\n 'hide-placeholder':\n this.readonly ||\n this.disabled ||\n this.category !== undefined,\n }}\n disabled={this.disabled}\n readonly={this.readonly}\n ref={(el) => (this.textInput = el)}\n type=\"text\"\n placeholder={this.placeholder}\n ></input>\n </ul>\n </div>\n {this.getResetButton()}\n </div>\n </form>\n\n {this.disabled || this.readonly ? (\n ''\n ) : (\n <ix-dropdown\n closeBehavior=\"outside\"\n offset={{ mainAxis: 2 }}\n trigger={this.textInput}\n triggerEvent={['click', 'focus']}\n header={this.getDropdownHeader()}\n >\n {this.renderDropdownContent()}\n </ix-dropdown>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["categoryFilterCss","CategoryFilter","this","ID_CUSTOM_FILTER_VALUE","LogicalFilterOperator","EQUAL","watchFilterState","newValue","setFilterState","componentDidLoad","filterState","undefined","setTimeout","_a","hostElement","addEventListener","handleFormElementKeyDown","bind","_b","formElement","e","preventDefault","textInput","console","warn","hasFocus","inputValue","value","inputState","InputState","category","inputChanged","emit","handleInputElementKeyDown","state","filterTokens","token","tokens","addToken","categoryLogicalOperator","categories","id","operator","emitFilterEvent","closeDropdown","disabled","readonly","shadowRoot","querySelector","show","code","document","activeElement","classList","contains","getAttribute","hasCategorySelection","selectCategory","focusPreviousItem","focusNextItem","sibling","previousSibling","HTMLElement","focus","nextSibling","selector","item","stopPropagation","suggestions","length","tokenCount","removeToken","filter","map","filterChanged","emitEvent","newToken","trim","hasToken","pair","isScrollStateDirty","index","_","i","getCategoryIds","ids","Object","prototype","hasOwnProperty","call","push","categoryChanged","resetFilter","filterMultiples","repeatCategories","isCategoryAlreadySet","find","some","filterToken","hasSameValue","filterDuplicateTokens","filterByInput","toLowerCase","indexOf","toggleCategoryOperator","NOT_EQUAL","getFilterChipLabel","operatorString","label","_c","nonSelectableCategories","getFilteredSuggestions","renderPlainSuggestions","h","class","suggestion","onClick","key","title","renderOperatorButton","params","type","variant","outline","ghost","iconOnly","iconOval","selected","loading","icon","extraClasses","BaseButton","assign","renderCategoryValues","options","renderDropdownContent","renderCategorySelection","tabindex","getDropdownHeader","labelCategories","i18nPlainText","componentDidRender","tmpDisableScrollIntoView","scrollIntoView","getResetButton","oval","size","getIconColor","render","Host","ref","el","hideIcon","color","name","toString","animate__animated","animate__fadein","onCloseClick","placeholder","closeBehavior","offset","mainAxis","trigger","triggerEvent","header"],"sources":["./src/components/category-filter/category-filter.scss?tag=ix-category-filter&encapsulation=shadow","./src/components/category-filter/category-filter.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/shadows';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/text-truncation';\n@import '../button/button';\n@import 'legacy/components/dropdown';\n@import 'legacy/components/forms';\n@import 'components/form/input';\n\n:host {\n @include ix-component;\n\n display: block;\n position: relative;\n height: auto;\n\n @include host-focus-visible {\n border-color: var(--theme-color-primary);\n box-shadow: 0 0 $tiny-space 0 var(--theme-color-primary) !important;\n }\n\n .reset-button {\n position: absolute;\n top: $tiny-space;\n right: $tiny-space;\n }\n\n .reset-button.hide-reset-button {\n display: none;\n }\n\n .input-container {\n &:not(.readonly):not(.disabled) {\n @include element-input('false');\n }\n\n &.disabled {\n color: var(--theme-input--color--disabled);\n border-bottom: var(--theme-input--border-thickness, 1px) solid\n var(--theme-input--border-color-bottom--disabled);\n }\n\n &.readonly {\n @include element-input;\n }\n\n display: flex;\n height: auto;\n max-height: 3.75rem;\n padding: 1px $large-space 1px $x-large-space !important;\n\n &.no-icon {\n padding-left: $tiny-space;\n }\n }\n\n .token-container {\n flex-grow: 1;\n overflow: hidden;\n }\n\n .text-input {\n @include ellipsis;\n @include text-default;\n width: auto;\n height: 1.75rem;\n min-height: $large-space;\n background: transparent;\n flex-grow: 1;\n box-shadow: none;\n\n &,\n &:hover,\n &:focus-visible {\n border: none;\n outline: none;\n }\n\n &.hide-placeholder::placeholder {\n opacity: 0;\n }\n }\n\n .list-unstyled {\n display: flex;\n flex-wrap: wrap;\n list-style: none;\n padding: 0;\n margin: 0;\n overflow-y: auto;\n }\n\n ix-icon {\n position: absolute;\n top: $small-space;\n left: $small-space;\n }\n\n ix-filter-chip {\n margin-right: $small-space;\n }\n\n .category-preview {\n display: flex;\n align-items: center;\n height: $large-space;\n background-color: var(--theme-bg-3);\n border-top-left-radius: $default-space;\n border-bottom-left-radius: $default-space;\n padding: $small-space;\n margin: 2px 0;\n }\n\n ul {\n height: 100%;\n }\n\n ul > li,\n input {\n padding-top: 2px;\n padding-bottom: 2px;\n }\n\n ix-dropdown {\n min-width: 10rem !important;\n\n .dropdown-item-container {\n display: flex;\n flex-direction: column;\n\n .dropdown-item {\n @include text-default-single;\n @include ellipsis;\n @include focus-visible {\n border-color: var(--theme-color-focus-bdr);\n }\n\n height: $large-control-height;\n margin: $tiny-space $small-space;\n padding-inline: $small-space;\n border: 1px solid transparent;\n border-radius: 100rem;\n width: auto;\n justify-content: flex-start;\n flex-grow: 1;\n }\n\n .category-item {\n border-end-end-radius: 0;\n border-start-end-radius: 0;\n }\n\n .category-item-value {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n }\n\n .btn-toggle-operator {\n width: 2rem;\n height: 2rem;\n margin-inline: $small-space;\n }\n }\n\n .d-none {\n display: none;\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { FilterState } from './filter-state';\nimport { InputState } from './input-state';\nimport { LogicalFilterOperator } from './logical-filter-operator';\n\n@Component({\n tag: 'ix-category-filter',\n styleUrl: 'category-filter.scss',\n shadow: true,\n})\nexport class CategoryFilter {\n private readonly ID_CUSTOM_FILTER_VALUE = 'CW_CUSTOM_FILTER_VALUE';\n\n @State() private textInput?: HTMLInputElement;\n private formElement?: HTMLFormElement;\n private isScrollStateDirty: boolean;\n\n @Element() hostElement: HTMLIxCategoryFilterElement;\n\n @State() hasFocus: boolean;\n @State() categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n @State() inputValue: string;\n @State() category: string;\n @State() filterTokens: Array<{\n id: string;\n value: string;\n operator: LogicalFilterOperator;\n }> = [];\n\n /**\n * If true the filter will be in disabled state\n */\n @Prop() disabled = false;\n\n /**\n * If true the filter will be in readonly mode\n */\n @Prop() readonly = false;\n\n /**\n * A set of search criteria to populate the component with.\n */\n @Prop() filterState: FilterState;\n\n /**\n * Placeholder text to be displayed in an empty input field.\n */\n @Prop() placeholder: string;\n\n /**\n * Configuration object hash used to populate the dropwdown menu for typeahead and quick selection functionality.\n * Each ID maps to an object with a label and an array of options to select from.\n */\n @Prop() categories: {\n [id: string]: {\n label: string;\n options: string[];\n };\n };\n\n /**\n * In certain use cases some categories may not be available for selection anymore.\n * To allow proper display of set filters with these categories this ID to label mapping can be populated.\n *\n * Configuration object hash used to supply labels to the filter chips in the input field.\n * Each ID maps to a string representing the label to display.\n */\n @Prop() nonSelectableCategories?: {\n [id: string]: string;\n } = {};\n\n /**\n * A list of strings that will be supplied as typeahead suggestions not tied to any categories.\n */\n @Prop() suggestions: string[];\n\n /**\n * The icon next to the actual text input\n * Defaults to 'search'\n */\n @Prop() icon = 'search';\n\n /**\n * Allows to hide the icon inside the text input.\n * Defaults to false\n */\n @Prop() hideIcon: boolean;\n\n /**\n * If set to true allows that a single category can be set more than once.\n * An already set category will not appear in the category dropdown if set to false.\n *\n * Defaults to true\n */\n @Prop() repeatCategories = true;\n\n /**\n * @internal For debugging purposes only!\n */\n @Prop() tmpDisableScrollIntoView = true;\n\n /**\n * i18n\n */\n @Prop() labelCategories = 'Categories';\n\n /**\n * i18n\n */\n @Prop() i18nPlainText = 'Filter by text';\n\n /**\n * Event dispatched whenever the a category gets selected in the dropdown\n */\n @Event() categoryChanged: EventEmitter<string>;\n\n /**\n * Event dispatched whenever the text input changes.\n */\n @Event() inputChanged: EventEmitter<InputState>;\n\n /**\n * Event dispatched whenever the filter state changes.\n */\n @Event() filterChanged: EventEmitter<FilterState>;\n\n @Watch('filterState')\n watchFilterState(newValue) {\n this.setFilterState(newValue);\n }\n\n componentDidLoad() {\n if (this.filterState !== undefined) {\n setTimeout(() => this.setFilterState(this.filterState));\n }\n\n this.hostElement?.addEventListener(\n 'keydown',\n this.handleFormElementKeyDown.bind(this)\n );\n\n this.formElement?.addEventListener('submit', (e) => e.preventDefault());\n\n if (this.textInput == null) {\n console.warn(\n 'ix-category-filter - unable to add event listeners to native input element'\n );\n return;\n }\n\n this.textInput.addEventListener('focusin', () => {\n this.hasFocus = true;\n });\n this.textInput.addEventListener('focusout', () => (this.hasFocus = false));\n this.textInput.addEventListener('input', () => {\n this.inputValue = this.textInput.value;\n const inputState = new InputState(this.inputValue, this.category);\n this.inputChanged.emit(inputState);\n });\n this.textInput.addEventListener(\n 'keydown',\n this.handleInputElementKeyDown.bind(this)\n );\n }\n\n private setFilterState(state: FilterState) {\n this.filterTokens = [];\n\n for (const token of state.tokens) {\n this.addToken(\n token,\n this.ID_CUSTOM_FILTER_VALUE,\n this.categoryLogicalOperator,\n false\n );\n }\n\n for (const category of state.categories) {\n this.addToken(category.value, category.id, category.operator, false);\n }\n\n this.emitFilterEvent();\n }\n\n private closeDropdown() {\n if (this.disabled || this.readonly) {\n return;\n }\n\n this.hostElement.shadowRoot.querySelector('ix-dropdown').show = false;\n }\n\n private handleFormElementKeyDown(e: KeyboardEvent) {\n switch (e.code) {\n case 'Enter':\n case 'NumpadEnter':\n if (!document.activeElement.classList.contains('dropdown-item')) {\n return;\n }\n\n const token = document.activeElement.getAttribute('data-id');\n\n if (this.hasCategorySelection()) {\n if (this.category !== undefined) {\n this.addToken(token, this.category);\n } else if (\n document.activeElement.classList.contains('category-item-id')\n ) {\n this.selectCategory(token);\n }\n } else {\n this.addToken(token);\n }\n\n e.preventDefault();\n break;\n\n case 'ArrowUp':\n this.focusPreviousItem();\n e.preventDefault();\n break;\n\n case 'ArrowDown':\n this.focusNextItem();\n e.preventDefault();\n break;\n\n case 'Escape':\n this.closeDropdown();\n break;\n }\n }\n\n private focusPreviousItem() {\n const sibling = document.activeElement.previousSibling;\n if (sibling instanceof HTMLElement) {\n sibling.focus();\n }\n }\n\n private focusNextItem() {\n const sibling = document.activeElement.nextSibling;\n if (sibling instanceof HTMLElement) {\n sibling.focus();\n }\n }\n\n private handleInputElementKeyDown(e: KeyboardEvent) {\n switch (e.code) {\n case 'ArrowDown':\n const selector = `.category-item-${\n this.category !== undefined ? 'value' : 'id'\n }`;\n let item = this.hostElement.shadowRoot.querySelector(selector);\n\n if (item instanceof HTMLElement) {\n item.focus();\n e.stopPropagation();\n } else if (this.suggestions?.length) {\n item = this.hostElement.shadowRoot.querySelector('.category-item');\n if (item instanceof HTMLElement) {\n item.focus();\n e.stopPropagation();\n }\n }\n break;\n\n case 'Backspace':\n if (this.textInput.value !== '') {\n return;\n }\n\n if (this.category !== undefined) {\n this.category = undefined;\n return;\n }\n\n const tokenCount = this.filterTokens.length;\n if (tokenCount > 0) {\n this.removeToken(tokenCount - 1);\n }\n break;\n\n case 'Enter':\n case 'NumpadEnter':\n this.addToken(this.inputValue, this.category);\n e.preventDefault();\n break;\n }\n }\n\n private emitFilterEvent() {\n const tokens = this.filterTokens\n .filter((item) => item.id === this.ID_CUSTOM_FILTER_VALUE)\n .map((item) => item.value);\n const categories = this.filterTokens.filter(\n (item) => item.id !== this.ID_CUSTOM_FILTER_VALUE\n );\n const filterState: FilterState = {\n tokens,\n categories,\n };\n\n this.filterChanged.emit(filterState);\n }\n\n private addToken(\n token: string,\n category: string = this.ID_CUSTOM_FILTER_VALUE,\n operator = this.categoryLogicalOperator,\n emitEvent = true\n ) {\n if (token === undefined || token === null) {\n return;\n }\n\n const newToken = token.trim();\n\n if (newToken === '') {\n return;\n }\n\n if (this.hasToken(newToken)) {\n return;\n }\n\n const pair = { id: category, value: newToken, operator };\n this.filterTokens = [...this.filterTokens, pair];\n this.textInput.value = '';\n this.inputValue = '';\n this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n\n if (this.category !== undefined) {\n this.category = undefined;\n }\n\n this.isScrollStateDirty = true;\n\n this.textInput.focus();\n\n if (emitEvent) {\n this.emitFilterEvent();\n }\n\n this.closeDropdown();\n }\n\n private removeToken(index: number) {\n this.filterTokens = this.filterTokens.filter((_, i) => i !== index);\n this.emitFilterEvent();\n }\n\n private getCategoryIds() {\n const ids = [];\n for (const id in this.categories) {\n if (Object.prototype.hasOwnProperty.call(this.categories, id)) {\n ids.push(id);\n }\n }\n\n return ids;\n }\n\n private selectCategory(category: string) {\n this.category = category;\n this.textInput.value = '';\n this.inputValue = '';\n this.textInput.focus();\n this.categoryChanged.emit(category);\n }\n\n private resetFilter() {\n this.closeDropdown();\n this.filterTokens = [];\n this.emitFilterEvent();\n }\n\n private filterMultiples(value: string) {\n if (this.repeatCategories) {\n return true;\n }\n\n const isCategoryAlreadySet = this.filterTokens.find(\n (token) => token.id === value\n );\n\n return !isCategoryAlreadySet;\n }\n\n private hasToken(token: string) {\n return this.filterTokens.some((filterToken) => {\n const hasSameValue = filterToken.value === token;\n\n if (!hasSameValue) {\n return false;\n }\n\n if (this.category !== undefined) {\n return this.category === filterToken.id;\n }\n\n if (filterToken.id) {\n return filterToken.id === this.ID_CUSTOM_FILTER_VALUE;\n }\n\n return hasSameValue;\n });\n }\n\n private filterDuplicateTokens(value: string) {\n return !this.hasToken(value);\n }\n\n private filterByInput(value: string) {\n if (this.inputValue === undefined || this.inputValue === '') {\n return true;\n }\n\n return value.toLowerCase().indexOf(this.inputValue.toLowerCase()) !== -1;\n }\n\n private toggleCategoryOperator() {\n switch (this.categoryLogicalOperator) {\n case LogicalFilterOperator.EQUAL:\n this.categoryLogicalOperator = LogicalFilterOperator.NOT_EQUAL;\n break;\n\n case LogicalFilterOperator.NOT_EQUAL:\n this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n break;\n }\n }\n\n private getFilterChipLabel(value: {\n id: string;\n value: string;\n operator: LogicalFilterOperator;\n }): string {\n if (value.id === this.ID_CUSTOM_FILTER_VALUE) {\n return value.value;\n }\n\n const operatorString =\n value.operator === LogicalFilterOperator.EQUAL ? '=' : '!=';\n const label =\n this.categories[value.id]?.label ??\n this.nonSelectableCategories[value.id] ??\n value.id;\n\n return `${label} ${operatorString} ${value.value}`;\n }\n\n private getFilteredSuggestions() {\n if (!this.suggestions?.length) {\n return [];\n }\n\n return this.suggestions\n ?.filter((value) => this.filterByInput(value))\n .filter((value) => this.filterDuplicateTokens(value));\n }\n\n private hasCategorySelection() {\n return this.categories !== undefined;\n }\n\n private renderPlainSuggestions() {\n return (\n <div class=\"dropdown-item-container\">\n {this.getFilteredSuggestions().map((suggestion) => (\n <button\n class=\"dropdown-item\"\n data-id={suggestion}\n onClick={() => this.addToken(suggestion)}\n key={suggestion}\n title={suggestion}\n >\n {suggestion}\n </button>\n ))}\n </div>\n );\n }\n\n private renderOperatorButton() {\n const params: BaseButtonProps = {\n type: 'button',\n variant: 'secondary',\n outline: false,\n ghost: true,\n iconOnly: true,\n iconOval: false,\n selected: false,\n disabled: this.disabled,\n loading: false,\n icon: '',\n onClick: (e: Event) => {\n e.stopPropagation();\n this.toggleCategoryOperator();\n },\n extraClasses: {\n 'btn-icon-32': true,\n 'btn-toggle-operator': true,\n },\n };\n\n return (\n <BaseButton {...params}>\n {this.categoryLogicalOperator === LogicalFilterOperator.NOT_EQUAL\n ? '='\n : '!='}\n </BaseButton>\n );\n }\n\n private renderCategoryValues() {\n return (\n <div class=\"dropdown-item-container\">\n {this.renderOperatorButton()}\n <div class=\"dropdown-header\">\n {this.categories[this.category]?.label}\n </div>\n {this.categories[this.category]?.options\n .filter((value) => this.filterByInput(value))\n .filter((value) => this.filterDuplicateTokens(value))\n .map((id) => (\n <button\n class=\"dropdown-item category-item-value\"\n data-id={id}\n title={id}\n key={id}\n onClick={() => this.addToken(id, this.category)}\n >\n {`${\n this.categoryLogicalOperator === LogicalFilterOperator.EQUAL\n ? '='\n : '!='\n } ${id}`}\n </button>\n ))}\n </div>\n );\n }\n\n private renderDropdownContent() {\n if (this.hasCategorySelection()) {\n if (this.category !== undefined) {\n return this.renderCategoryValues();\n } else {\n return this.renderCategorySelection();\n }\n } else return this.renderPlainSuggestions();\n }\n\n private renderCategorySelection() {\n return (\n <div class=\"dropdown-item-container\">\n {this.getCategoryIds()\n ?.filter((id) => this.filterByInput(this.categories[id].label))\n .filter((id) => this.filterMultiples(id))\n .map((id) => (\n <button\n class=\"dropdown-item category-item category-item-id\"\n data-id={id}\n title={this.categories[id].label}\n key={id}\n onClick={(e) => {\n e.preventDefault();\n this.selectCategory(id);\n }}\n tabindex=\"0\"\n >\n {this.categories[id]?.label}\n </button>\n ))}\n </div>\n );\n }\n\n private getDropdownHeader() {\n if (this.categories !== undefined) {\n if (this.category !== undefined) {\n return null;\n } else {\n return this.labelCategories;\n }\n }\n\n return this.i18nPlainText;\n }\n\n componentDidRender() {\n if (this.isScrollStateDirty) {\n if (!this.tmpDisableScrollIntoView) {\n this.textInput.scrollIntoView();\n }\n this.isScrollStateDirty = false;\n }\n }\n\n private getResetButton() {\n return (\n <ix-icon-button\n onClick={() => this.resetFilter()}\n class={{\n 'reset-button': true,\n 'hide-reset-button':\n !this.filterTokens.length && this.category === undefined,\n }}\n ghost\n oval\n icon={'clear'}\n size=\"16\"\n ></ix-icon-button>\n );\n }\n\n private getIconColor() {\n if (this.disabled) {\n return 'color-componentn-1';\n }\n\n if (this.readonly) {\n return 'color-std-txt';\n }\n\n return 'color-primary';\n }\n\n render() {\n return (\n <Host>\n <form ref={(el) => (this.formElement = el)}>\n <div\n read-only={this.readonly}\n class={{\n 'input-container': true,\n disabled: this.disabled,\n focus: this.hasFocus,\n readonly: this.readonly,\n 'no-icon': this.hideIcon,\n }}\n >\n <ix-icon\n color={this.getIconColor()}\n class={{ 'd-none': this.hideIcon }}\n name={this.icon}\n size=\"16\"\n ></ix-icon>\n <div class=\"token-container\">\n <ul class=\"list-unstyled\">\n {this.filterTokens.map((value, index) => (\n <li\n key={value.toString()}\n class={{\n animate__animated: true,\n animate__fadein: true,\n }}\n >\n <ix-filter-chip\n disabled={this.disabled}\n readonly={this.readonly}\n onCloseClick={() => this.removeToken(index)}\n >\n {this.getFilterChipLabel(value)}\n </ix-filter-chip>\n </li>\n ))}\n {this.categories === undefined ? (\n ''\n ) : (\n <li\n class={{\n 'category-preview': true,\n 'd-none': this.category === undefined,\n }}\n >\n {this.categories[this.category]?.label}\n </li>\n )}\n <input\n class={{\n 'text-input': true,\n 'hide-placeholder':\n this.readonly ||\n this.disabled ||\n this.category !== undefined,\n }}\n disabled={this.disabled}\n readonly={this.readonly}\n ref={(el) => (this.textInput = el)}\n type=\"text\"\n placeholder={this.placeholder}\n ></input>\n </ul>\n </div>\n {this.getResetButton()}\n </div>\n </form>\n\n {this.disabled || this.readonly ? (\n ''\n ) : (\n <ix-dropdown\n closeBehavior=\"outside\"\n offset={{ mainAxis: 2 }}\n trigger={this.textInput}\n triggerEvent={['click', 'focus']}\n header={this.getDropdownHeader()}\n >\n {this.renderDropdownContent()}\n </ix-dropdown>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as o,h as e,H as r,g as t}from"./p-76a509c7.js";import{B as i}from"./p-8b0793be.js";import"./p-7c5fc1c9.js";const a=":host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none}:host(.disabled){cursor:default}*,*::after,*::before{box-sizing:border-box}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar{width:0.5rem;height:0.5rem}::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}::-webkit-scrollbar-corner{display:none}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{display:inline-flex;justify-content:center;align-items:center}:host button{width:100%;height:100%;overflow:hidden;padding:0}:host button.btn-oval{border-radius:6.25rem}:host ix-icon{color:var(--ix-icon-button-color, currentColor);margin:0}:host ix-spinner{margin:0}:host(.btn-icon-12){height:1rem;width:1rem;min-width:1rem;min-height:1rem}:host(.btn-icon-16){height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}:host(.btn-icon-32){height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host(.btn-icon-12) ix-spinner{height:12px;width:12px}:host(.btn-icon-16) ix-spinner{height:16px;width:16px}:host(.btn-icon-32) ix-spinner{height:24px;width:24px}";const n=class{constructor(e){o(this,e);this.variant="secondary";this.outline=undefined;this.ghost=undefined;this.oval=undefined;this.icon=undefined;this.size="24";this.color=undefined;this.disabled=false;this.type="button";this.loading=false}componentDidLoad(){if(this.type==="submit"){const o=document.createElement("button");o.style.display="none";o.type="submit";o.tabIndex=-1;this.hostElement.appendChild(o);this.submitButtonElement=o}}dispatchFormEvents(){if(this.type==="submit"&&this.submitButtonElement){this.submitButtonElement.click()}}getIconSizeClass(){return{"btn-icon-12":this.size==="12","btn-icon-16":this.size==="16","btn-icon-32":this.size==="32"||this.size==="24"||!this.size}}render(){const o={variant:this.variant,outline:this.outline,ghost:this.ghost,iconOnly:true,iconOval:this.oval,selected:false,disabled:this.disabled||this.loading,icon:this.icon,iconColor:this.color,iconSize:this.size,loading:this.loading,onClick:()=>this.dispatchFormEvents(),type:this.type,extraClasses:this.getIconSizeClass()};return e(r,{class:Object.assign(Object.assign({},this.getIconSizeClass()),{disabled:this.disabled||this.loading})},e(i,Object.assign({},o)))}get hostElement(){return t(this)}};n.style=a;const l=':host(.xx-small){display:block;position:relative;width:0.75rem;height:0.75rem;min-width:0.75rem;min-height:0.75rem;max-width:0.75rem;max-height:0.75rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.xx-small) *,:host(.xx-small) *::after,:host(.xx-small) *::before{box-sizing:border-box}:host(.xx-small) ::-webkit-scrollbar-button{display:none}:host(.xx-small) ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host(.xx-small) ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host(.xx-small) ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host(.xx-small) ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host(.xx-small) ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host(.xx-small) ::-webkit-scrollbar-corner{display:none}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.xx-small)::after{content:"";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:1px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.xx-small)::before{content:"";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:1px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}:host(.x-small){display:block;position:relative;width:1.25rem;height:1.25rem;min-width:1.25rem;min-height:1.25rem;max-width:1.25rem;max-height:1.25rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.x-small) *,:host(.x-small) *::after,:host(.x-small) *::before{box-sizing:border-box}:host(.x-small) ::-webkit-scrollbar-button{display:none}:host(.x-small) ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host(.x-small) ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host(.x-small) ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host(.x-small) ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host(.x-small) ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host(.x-small) ::-webkit-scrollbar-corner{display:none}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.x-small)::after{content:"";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.x-small)::before{content:"";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}:host(.small){display:block;position:relative;width:1.5rem;height:1.5rem;min-width:1.5rem;min-height:1.5rem;max-width:1.5rem;max-height:1.5rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.small) *,:host(.small) *::after,:host(.small) *::before{box-sizing:border-box}:host(.small) ::-webkit-scrollbar-button{display:none}:host(.small) ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host(.small) ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host(.small) ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host(.small) ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host(.small) ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host(.small) ::-webkit-scrollbar-corner{display:none}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.small)::after{content:"";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.small)::before{content:"";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}:host(.medium){display:block;position:relative;width:2rem;height:2rem;min-width:2rem;min-height:2rem;max-width:2rem;max-height:2rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.medium) *,:host(.medium) *::after,:host(.medium) *::before{box-sizing:border-box}:host(.medium) ::-webkit-scrollbar-button{display:none}:host(.medium) ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host(.medium) ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host(.medium) ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host(.medium) ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host(.medium) ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host(.medium) ::-webkit-scrollbar-corner{display:none}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.medium)::after{content:"";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.medium)::before{content:"";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}:host(.large){display:block;position:relative;width:6rem;height:6rem;min-width:6rem;min-height:6rem;max-width:6rem;max-height:6rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.large) *,:host(.large) *::after,:host(.large) *::before{box-sizing:border-box}:host(.large) ::-webkit-scrollbar-button{display:none}:host(.large) ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host(.large) ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host(.large) ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host(.large) ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host(.large) ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host(.large) ::-webkit-scrollbar-corner{display:none}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.large)::after{content:"";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:4px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.large)::before{content:"";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:4px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}';const s=class{constructor(e){o(this,e);this.variant="secondary";this.size="medium";this.hideTrack=false}render(){return e(r,{class:{primary:this.variant==="primary","xx-small":this.size==="xx-small","x-small":this.size==="x-small",small:this.size==="small",medium:this.size==="medium",large:this.size==="large","hide-track":this.hideTrack}})}get hostElement(){return t(this)}};s.style=l;export{n as ix_icon_button,s as ix_spinner};
|
|
2
|
+
//# sourceMappingURL=p-79405d11.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["iconButtonCss","IconButton","componentDidLoad","this","type","submitButton","document","createElement","style","display","tabIndex","hostElement","appendChild","submitButtonElement","dispatchFormEvents","click","getIconSizeClass","size","render","baseButtonProps","variant","outline","ghost","iconOnly","iconOval","oval","selected","disabled","loading","icon","iconColor","color","iconSize","onClick","extraClasses","h","Host","class","Object","assign","BaseIconButton","spinnerCss","Spinner","primary","small","medium","large","hideTrack"],"sources":["./src/components/icon-button/icon-button.scss?tag=ix-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx","./src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=shadow","./src/components/spinner/spinner.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import './icon-button-mixin.scss';\n\n@include base-icon-button;\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\n\nexport type IconButtonVariant = ButtonVariant;\n\n@Component({\n tag: 'ix-icon-button',\n styleUrl: 'icon-button.scss',\n shadow: true,\n})\nexport class IconButton {\n @Element() hostElement: HTMLIxIconButtonElement;\n\n /**\n * Variant of button\n */\n @Prop() variant: IconButtonVariant = 'secondary';\n\n /**\n * Button outline\n */\n @Prop() outline: boolean;\n\n /**\n * Button invisible\n */\n @Prop() ghost: boolean;\n\n /**\n * Button in oval shape\n */\n @Prop() oval: boolean;\n\n /**\n * Icon name\n */\n @Prop() icon: string;\n\n /**\n * Size of icon in button\n *\n * @deprecated Only size 32 will be removed in 3.0.0\n */\n @Prop() size: '32' | '24' | '16' | '12' = '24';\n\n /**\n * Color of icon in button\n */\n @Prop() color: string;\n\n /**\n * Disabled\n */\n @Prop() disabled = false;\n\n /**\n * Type of the button\n */\n @Prop() type: 'button' | 'submit' = 'button';\n\n /**\n * Loading button\n *\n * @since 2.0.0\n */\n @Prop() loading = false;\n\n /**\n * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n */\n submitButtonElement: HTMLButtonElement;\n\n componentDidLoad() {\n if (this.type === 'submit') {\n const submitButton = document.createElement('button');\n submitButton.style.display = 'none';\n submitButton.type = 'submit';\n submitButton.tabIndex = -1;\n this.hostElement.appendChild(submitButton);\n\n this.submitButtonElement = submitButton;\n }\n }\n\n dispatchFormEvents() {\n if (this.type === 'submit' && this.submitButtonElement) {\n this.submitButtonElement.click();\n }\n }\n\n private getIconSizeClass() {\n return {\n 'btn-icon-12': this.size === '12',\n 'btn-icon-16': this.size === '16',\n 'btn-icon-32': this.size === '32' || this.size === '24' || !this.size,\n };\n }\n\n render() {\n const baseButtonProps: BaseButtonProps = {\n variant: this.variant,\n outline: this.outline,\n ghost: this.ghost,\n iconOnly: true,\n iconOval: this.oval,\n selected: false,\n disabled: this.disabled || this.loading,\n icon: this.icon,\n iconColor: this.color,\n iconSize: this.size,\n loading: this.loading,\n onClick: () => this.dispatchFormEvents(),\n type: this.type,\n extraClasses: this.getIconSizeClass(),\n };\n\n return (\n <Host\n class={{\n ...this.getIconSizeClass(),\n disabled: this.disabled || this.loading,\n }}\n >\n <BaseIconButton {...baseButtonProps}></BaseIconButton>\n </Host>\n );\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'mixins/shadow-dom/component';\n\n@mixin ix-spinner($host-class: 'medium', $size: 2rem, $track-size: 4px) {\n :host(.#{$host-class}) {\n @include ix-component;\n display: block;\n position: relative;\n\n width: $size;\n height: $size;\n min-width: $size;\n min-height: $size;\n max-width: $size;\n max-height: $size;\n border-radius: 100%;\n position: relative;\n animation: rotate 2s linear infinite;\n\n @keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes clipMask {\n 0% {\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n 12.5% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n }\n 25% {\n clip-path: polygon(\n 50% 50%,\n 0 0,\n 100% 0,\n 100% 100%,\n 100% 100%,\n 100% 100%\n );\n }\n 37.5% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n }\n 50% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n 62.5% {\n clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n 75% {\n clip-path: polygon(\n 50% 50%,\n 100% 100%,\n 100% 100%,\n 100% 100%,\n 0 100%,\n 0 0\n );\n }\n 87.5% {\n clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);\n }\n 100% {\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n }\n }\n\n :host(.#{$host-class})::after {\n content: '';\n box-sizing: border-box;\n position: absolute;\n inset: 8.33%;\n border-radius: 100%;\n border: $track-size solid\n var(--ix-button-color, var(--theme-color-soft-text));\n animation: clipMask 3s linear infinite;\n }\n\n :host(:not(.hide-track)):host(.#{$host-class})::before {\n content: '';\n box-sizing: border-box;\n position: absolute;\n inset: 8.33%;\n border-radius: 100%;\n border: $track-size solid var(--theme-color-ghost--hover);\n }\n\n :host(.primary)::after {\n border-color: var(--theme-color-dynamic);\n }\n\n :host(.primary)::before {\n border-color: var(--theme-color-ghost--hover);\n }\n}\n\n@include ix-spinner($host-class: 'xx-small', $size: 0.75rem, $track-size: 1px);\n@include ix-spinner($host-class: 'x-small', $size: 1.25rem, $track-size: 2px);\n@include ix-spinner($host-class: 'small', $size: 1.5rem, $track-size: 2px);\n@include ix-spinner($host-class: 'medium', $size: 2rem, $track-size: 2px);\n@include ix-spinner($host-class: 'large', $size: 6rem, $track-size: 4px);\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner {\n @Element() hostElement!: HTMLIxSpinnerElement;\n\n /**\n * Variant of spinner\n */\n @Prop() variant: 'primary' | 'secondary' = 'secondary';\n\n /**\n * Size of spinner\n */\n @Prop() size: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' =\n 'medium';\n\n /**\n * @internal\n */\n @Prop() hideTrack = false;\n\n render() {\n return (\n <Host\n class={{\n primary: this.variant === 'primary',\n 'xx-small': this.size === 'xx-small',\n 'x-small': this.size === 'x-small',\n small: this.size === 'small',\n medium: this.size === 'medium',\n large: this.size === 'large',\n 'hide-track': this.hideTrack,\n }}\n ></Host>\n );\n }\n}\n"],"mappings":"qHAAA,MAAMA,EAAgB,
|
|
1
|
+
{"version":3,"names":["iconButtonCss","IconButton","componentDidLoad","this","type","submitButton","document","createElement","style","display","tabIndex","hostElement","appendChild","submitButtonElement","dispatchFormEvents","click","getIconSizeClass","size","render","baseButtonProps","variant","outline","ghost","iconOnly","iconOval","oval","selected","disabled","loading","icon","iconColor","color","iconSize","onClick","extraClasses","h","Host","class","Object","assign","BaseIconButton","spinnerCss","Spinner","primary","small","medium","large","hideTrack"],"sources":["./src/components/icon-button/icon-button.scss?tag=ix-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx","./src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=shadow","./src/components/spinner/spinner.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import './icon-button-mixin.scss';\n\n@include base-icon-button;\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\n\nexport type IconButtonVariant = ButtonVariant;\n\n@Component({\n tag: 'ix-icon-button',\n styleUrl: 'icon-button.scss',\n shadow: true,\n})\nexport class IconButton {\n @Element() hostElement: HTMLIxIconButtonElement;\n\n /**\n * Variant of button\n */\n @Prop() variant: IconButtonVariant = 'secondary';\n\n /**\n * Button outline\n */\n @Prop() outline: boolean;\n\n /**\n * Button invisible\n */\n @Prop() ghost: boolean;\n\n /**\n * Button in oval shape\n */\n @Prop() oval: boolean;\n\n /**\n * Icon name\n */\n @Prop() icon: string;\n\n /**\n * Size of icon in button\n *\n * @deprecated Only size 32 will be removed in 3.0.0\n */\n @Prop() size: '32' | '24' | '16' | '12' = '24';\n\n /**\n * Color of icon in button\n */\n @Prop() color: string;\n\n /**\n * Disabled\n */\n @Prop() disabled = false;\n\n /**\n * Type of the button\n */\n @Prop() type: 'button' | 'submit' = 'button';\n\n /**\n * Loading button\n *\n * @since 2.0.0\n */\n @Prop() loading = false;\n\n /**\n * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n */\n submitButtonElement: HTMLButtonElement;\n\n componentDidLoad() {\n if (this.type === 'submit') {\n const submitButton = document.createElement('button');\n submitButton.style.display = 'none';\n submitButton.type = 'submit';\n submitButton.tabIndex = -1;\n this.hostElement.appendChild(submitButton);\n\n this.submitButtonElement = submitButton;\n }\n }\n\n dispatchFormEvents() {\n if (this.type === 'submit' && this.submitButtonElement) {\n this.submitButtonElement.click();\n }\n }\n\n private getIconSizeClass() {\n return {\n 'btn-icon-12': this.size === '12',\n 'btn-icon-16': this.size === '16',\n 'btn-icon-32': this.size === '32' || this.size === '24' || !this.size,\n };\n }\n\n render() {\n const baseButtonProps: BaseButtonProps = {\n variant: this.variant,\n outline: this.outline,\n ghost: this.ghost,\n iconOnly: true,\n iconOval: this.oval,\n selected: false,\n disabled: this.disabled || this.loading,\n icon: this.icon,\n iconColor: this.color,\n iconSize: this.size,\n loading: this.loading,\n onClick: () => this.dispatchFormEvents(),\n type: this.type,\n extraClasses: this.getIconSizeClass(),\n };\n\n return (\n <Host\n class={{\n ...this.getIconSizeClass(),\n disabled: this.disabled || this.loading,\n }}\n >\n <BaseIconButton {...baseButtonProps}></BaseIconButton>\n </Host>\n );\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'mixins/shadow-dom/component';\n\n@mixin ix-spinner($host-class: 'medium', $size: 2rem, $track-size: 4px) {\n :host(.#{$host-class}) {\n @include ix-component;\n display: block;\n position: relative;\n\n width: $size;\n height: $size;\n min-width: $size;\n min-height: $size;\n max-width: $size;\n max-height: $size;\n border-radius: 100%;\n position: relative;\n animation: rotate 2s linear infinite;\n\n @keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes clipMask {\n 0% {\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n 12.5% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n }\n 25% {\n clip-path: polygon(\n 50% 50%,\n 0 0,\n 100% 0,\n 100% 100%,\n 100% 100%,\n 100% 100%\n );\n }\n 37.5% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n }\n 50% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n 62.5% {\n clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n 75% {\n clip-path: polygon(\n 50% 50%,\n 100% 100%,\n 100% 100%,\n 100% 100%,\n 0 100%,\n 0 0\n );\n }\n 87.5% {\n clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);\n }\n 100% {\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n }\n }\n\n :host(.#{$host-class})::after {\n content: '';\n box-sizing: border-box;\n position: absolute;\n inset: 8.33%;\n border-radius: 100%;\n border: $track-size solid\n var(--ix-button-color, var(--theme-color-soft-text));\n animation: clipMask 3s linear infinite;\n }\n\n :host(:not(.hide-track)):host(.#{$host-class})::before {\n content: '';\n box-sizing: border-box;\n position: absolute;\n inset: 8.33%;\n border-radius: 100%;\n border: $track-size solid var(--theme-color-ghost--hover);\n }\n\n :host(.primary)::after {\n border-color: var(--theme-color-dynamic);\n }\n\n :host(.primary)::before {\n border-color: var(--theme-color-ghost--hover);\n }\n}\n\n@include ix-spinner($host-class: 'xx-small', $size: 0.75rem, $track-size: 1px);\n@include ix-spinner($host-class: 'x-small', $size: 1.25rem, $track-size: 2px);\n@include ix-spinner($host-class: 'small', $size: 1.5rem, $track-size: 2px);\n@include ix-spinner($host-class: 'medium', $size: 2rem, $track-size: 2px);\n@include ix-spinner($host-class: 'large', $size: 6rem, $track-size: 4px);\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner {\n @Element() hostElement!: HTMLIxSpinnerElement;\n\n /**\n * Variant of spinner\n */\n @Prop() variant: 'primary' | 'secondary' = 'secondary';\n\n /**\n * Size of spinner\n */\n @Prop() size: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' =\n 'medium';\n\n /**\n * @internal\n */\n @Prop() hideTrack = false;\n\n render() {\n return (\n <Host\n class={{\n primary: this.variant === 'primary',\n 'xx-small': this.size === 'xx-small',\n 'x-small': this.size === 'x-small',\n small: this.size === 'small',\n medium: this.size === 'medium',\n large: this.size === 'large',\n 'hide-track': this.hideTrack,\n }}\n ></Host>\n );\n }\n}\n"],"mappings":"qHAAA,MAAMA,EAAgB,wpgB,MCqBTC,EAAU,M,sCAMgB,Y,8FA2BK,K,mCAUvB,M,UAKiB,S,aAOlB,K,CAOlBC,mBACE,GAAIC,KAAKC,OAAS,SAAU,CAC1B,MAAMC,EAAeC,SAASC,cAAc,UAC5CF,EAAaG,MAAMC,QAAU,OAC7BJ,EAAaD,KAAO,SACpBC,EAAaK,UAAY,EACzBP,KAAKQ,YAAYC,YAAYP,GAE7BF,KAAKU,oBAAsBR,C,EAI/BS,qBACE,GAAIX,KAAKC,OAAS,UAAYD,KAAKU,oBAAqB,CACtDV,KAAKU,oBAAoBE,O,EAIrBC,mBACN,MAAO,CACL,cAAeb,KAAKc,OAAS,KAC7B,cAAed,KAAKc,OAAS,KAC7B,cAAed,KAAKc,OAAS,MAAQd,KAAKc,OAAS,OAASd,KAAKc,K,CAIrEC,SACE,MAAMC,EAAmC,CACvCC,QAASjB,KAAKiB,QACdC,QAASlB,KAAKkB,QACdC,MAAOnB,KAAKmB,MACZC,SAAU,KACVC,SAAUrB,KAAKsB,KACfC,SAAU,MACVC,SAAUxB,KAAKwB,UAAYxB,KAAKyB,QAChCC,KAAM1B,KAAK0B,KACXC,UAAW3B,KAAK4B,MAChBC,SAAU7B,KAAKc,KACfW,QAASzB,KAAKyB,QACdK,QAAS,IAAM9B,KAAKW,qBACpBV,KAAMD,KAAKC,KACX8B,aAAc/B,KAAKa,oBAGrB,OACEmB,EAACC,EAAI,CACHC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACApC,KAAKa,oBAAkB,CAC1BW,SAAUxB,KAAKwB,UAAYxB,KAAKyB,WAGlCO,EAACK,EAAcF,OAAAC,OAAA,GAAKpB,I,8CCtI5B,MAAMsB,EAAa,mib,MCgBNC,EAAO,M,sCAMyB,Y,UAMzC,S,eAKkB,K,CAEpBxB,SACE,OACEiB,EAACC,EAAI,CACHC,MAAO,CACLM,QAASxC,KAAKiB,UAAY,UAC1B,WAAYjB,KAAKc,OAAS,WAC1B,UAAWd,KAAKc,OAAS,UACzB2B,MAAOzC,KAAKc,OAAS,QACrB4B,OAAQ1C,KAAKc,OAAS,SACtB6B,MAAO3C,KAAKc,OAAS,QACrB,aAAcd,KAAK4C,Y"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{h as n}from"./p-76a509c7.js";const t=n=>n.toUpperCase()==="Primary".toUpperCase();const e=n=>n.toUpperCase()==="Secondary".toUpperCase();const i=(n,i,l,o=false,
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{h as n}from"./p-76a509c7.js";const t=n=>n.toUpperCase()==="Primary".toUpperCase();const e=n=>n.toUpperCase()==="Secondary".toUpperCase();const i=(n,i,l,o=false,s=false,c,r)=>({btn:true,"btn-primary":t(n)&&!i&&!l,"btn-outline-primary":t(n)&&i&&!l,"btn-invisible-primary":t(n)&&!i&&l,"btn-secondary":e(n)&&!i&&!l,"btn-outline-secondary":e(n)&&i&&!l,"btn-invisible-secondary":e(n)&&!i&&l,"btn-icon":o,"btn-oval":s,selected:c,disabled:r});function l(t,e){var l,o;const s=(l=t.extraClasses)!==null&&l!==void 0?l:{};return n("button",Object.assign({},t.ariaAttributes,{onClick:n=>t.onClick?t.onClick(n):undefined,tabindex:t.disabled?-1:(o=t.tabIndex)!==null&&o!==void 0?o:0,type:t.type,class:Object.assign(Object.assign({},i(t.variant,t.outline,t.ghost,t.iconOnly,t.iconOval,t.selected,t.disabled||t.loading)),s)}),t.loading?n("ix-spinner",{size:"small",hideTrack:true}):null,t.icon&&!t.loading?n("ix-icon",{class:"icon",name:t.icon,size:t.iconSize,color:t.iconColor}):null,n("div",{class:{content:true,[`content-${t.alignment}`]:!!t.alignment}},e),t.afterContent?t.afterContent:null)}export{l as B,i as g};
|
|
2
|
+
//# sourceMappingURL=p-7c5fc1c9.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["isPrimary","variant","toUpperCase","isSecondary","getButtonClasses","outline","ghost","iconOnly","iconOval","selected","disabled","btn","BaseButton","props","children","extraClasses","_a","h","Object","assign","ariaAttributes","onClick","e","undefined","tabindex","_b","tabIndex","type","class","loading","size","hideTrack","icon","name","iconSize","color","iconColor","content","alignment","afterContent"],"sources":["./src/components/button/base-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { h } from '@stencil/core';\nimport { A11yAttributes } from '../utils/a11y';\nimport { ButtonVariant } from './button';\n\nexport type ButtonAlignment = 'center' | 'start';\n\nconst isPrimary = (variant: string) => {\n return variant.toUpperCase() === 'Primary'.toUpperCase();\n};\n\nconst isSecondary = (variant: string) => {\n return variant.toUpperCase() === 'Secondary'.toUpperCase();\n};\n\nexport const getButtonClasses = (\n variant: ButtonVariant,\n outline: boolean,\n ghost: boolean,\n iconOnly = false,\n iconOval = false,\n selected: boolean,\n disabled: boolean\n) => {\n return {\n btn: true,\n 'btn-primary': isPrimary(variant) && !outline && !ghost,\n 'btn-outline-primary': isPrimary(variant) && outline && !ghost,\n 'btn-invisible-primary': isPrimary(variant) && !outline && ghost,\n 'btn-secondary': isSecondary(variant) && !outline && !ghost,\n 'btn-outline-secondary': isSecondary(variant) && outline && !ghost,\n 'btn-invisible-secondary': isSecondary(variant) && !outline && ghost,\n 'btn-icon': iconOnly,\n 'btn-oval': iconOval,\n selected: selected,\n disabled: disabled,\n };\n};\n\nexport type BaseButtonProps = {\n type: string;\n variant: ButtonVariant;\n outline: boolean;\n ghost: boolean;\n iconOnly: boolean;\n iconOval: boolean;\n selected: boolean;\n disabled: boolean;\n loading: boolean;\n icon: string;\n onClick?: Function;\n ariaAttributes?: A11yAttributes;\n extraClasses?: { [key: string]: boolean };\n iconSize?: string;\n iconColor?: string;\n alignment?: ButtonAlignment;\n tabIndex?: number;\n afterContent?: any;\n};\n\nexport function BaseButton(props: BaseButtonProps, children) {\n const extraClasses = props.extraClasses ?? {};\n\n return (\n <button\n {...props.ariaAttributes}\n onClick={(e: Event) => (props.onClick ? props.onClick(e) : undefined)}\n tabindex={props.disabled ? -1 : props.tabIndex ?? 0}\n type={props.type}\n class={{\n ...getButtonClasses(\n props.variant,\n props.outline,\n props.ghost,\n props.iconOnly,\n props.iconOval,\n props.selected,\n props.disabled || props.loading\n ),\n ...extraClasses,\n }}\n >\n {props.loading ? <ix-spinner size=\"small\" hideTrack></ix-spinner> : null}\n {props.icon && !props.loading ? (\n <ix-icon\n name={props.icon}\n size={props.iconSize as any}\n color={props.iconColor}\n ></ix-icon>\n ) : null}\n <div\n class={{\n content: true,\n [`content-${props.alignment}`]: !!props.alignment,\n }}\n >\n {children}\n </div>\n {props.afterContent ? props.afterContent : null}\n </button>\n );\n}\n"],"mappings":"oCAcA,MAAMA,EAAaC,GACVA,EAAQC,gBAAkB,UAAUA,cAG7C,MAAMC,EAAeF,GACZA,EAAQC,gBAAkB,YAAYA,c,MAGlCE,EAAmB,CAC9BH,EACAI,EACAC,EACAC,EAAW,MACXC,EAAW,MACXC,EACAC,KAEO,CACLC,IAAK,KACL,cAAeX,EAAUC,KAAaI,IAAYC,EAClD,sBAAuBN,EAAUC,IAAYI,IAAYC,EACzD,wBAAyBN,EAAUC,KAAaI,GAAWC,EAC3D,gBAAiBH,EAAYF,KAAaI,IAAYC,EACtD,wBAAyBH,EAAYF,IAAYI,IAAYC,EAC7D,0BAA2BH,EAAYF,KAAaI,GAAWC,EAC/D,WAAYC,EACZ,WAAYC,EACZC,SAAUA,EACVC,SAAUA,I,SAyBEE,EAAWC,EAAwBC,G,QACjD,MAAMC,GAAeC,EAAAH,EAAME,gBAAY,MAAAC,SAAA,EAAAA,EAAI,GAE3C,OACEC,EAAA,SAAAC,OAAAC,OAAA,GACMN,EAAMO,eAAc,CACxBC,QAAUC,GAAcT,EAAMQ,QAAUR,EAAMQ,QAAQC,GAAKC,UAC3DC,SAAUX,EAAMH,UAAY,GAAIe,EAAAZ,EAAMa,YAAQ,MAAAD,SAAA,EAAAA,EAAI,EAClDE,KAAMd,EAAMc,KACZC,MAAKV,OAAAC,OAAAD,OAAAC,OAAA,GACAf,EACDS,EAAMZ,QACNY,EAAMR,QACNQ,EAAMP,MACNO,EAAMN,SACNM,EAAML,SACNK,EAAMJ,SACNI,EAAMH,UAAYG,EAAMgB,UAEvBd,KAGJF,EAAMgB,QAAUZ,EAAA,cAAYa,KAAK,QAAQC,UAAS,OAAiB,KACnElB,EAAMmB,OAASnB,EAAMgB,QACpBZ,EAAA,
|
|
1
|
+
{"version":3,"names":["isPrimary","variant","toUpperCase","isSecondary","getButtonClasses","outline","ghost","iconOnly","iconOval","selected","disabled","btn","BaseButton","props","children","extraClasses","_a","h","Object","assign","ariaAttributes","onClick","e","undefined","tabindex","_b","tabIndex","type","class","loading","size","hideTrack","icon","name","iconSize","color","iconColor","content","alignment","afterContent"],"sources":["./src/components/button/base-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { h } from '@stencil/core';\nimport { A11yAttributes } from '../utils/a11y';\nimport { ButtonVariant } from './button';\n\nexport type ButtonAlignment = 'center' | 'start';\n\nconst isPrimary = (variant: string) => {\n return variant.toUpperCase() === 'Primary'.toUpperCase();\n};\n\nconst isSecondary = (variant: string) => {\n return variant.toUpperCase() === 'Secondary'.toUpperCase();\n};\n\nexport const getButtonClasses = (\n variant: ButtonVariant,\n outline: boolean,\n ghost: boolean,\n iconOnly = false,\n iconOval = false,\n selected: boolean,\n disabled: boolean\n) => {\n return {\n btn: true,\n 'btn-primary': isPrimary(variant) && !outline && !ghost,\n 'btn-outline-primary': isPrimary(variant) && outline && !ghost,\n 'btn-invisible-primary': isPrimary(variant) && !outline && ghost,\n 'btn-secondary': isSecondary(variant) && !outline && !ghost,\n 'btn-outline-secondary': isSecondary(variant) && outline && !ghost,\n 'btn-invisible-secondary': isSecondary(variant) && !outline && ghost,\n 'btn-icon': iconOnly,\n 'btn-oval': iconOval,\n selected: selected,\n disabled: disabled,\n };\n};\n\nexport type BaseButtonProps = {\n type: string;\n variant: ButtonVariant;\n outline: boolean;\n ghost: boolean;\n iconOnly: boolean;\n iconOval: boolean;\n selected: boolean;\n disabled: boolean;\n loading: boolean;\n icon: string;\n onClick?: Function;\n ariaAttributes?: A11yAttributes;\n extraClasses?: { [key: string]: boolean };\n iconSize?: string;\n iconColor?: string;\n alignment?: ButtonAlignment;\n tabIndex?: number;\n afterContent?: any;\n};\n\nexport function BaseButton(props: BaseButtonProps, children) {\n const extraClasses = props.extraClasses ?? {};\n\n return (\n <button\n {...props.ariaAttributes}\n onClick={(e: Event) => (props.onClick ? props.onClick(e) : undefined)}\n tabindex={props.disabled ? -1 : props.tabIndex ?? 0}\n type={props.type}\n class={{\n ...getButtonClasses(\n props.variant,\n props.outline,\n props.ghost,\n props.iconOnly,\n props.iconOval,\n props.selected,\n props.disabled || props.loading\n ),\n ...extraClasses,\n }}\n >\n {props.loading ? <ix-spinner size=\"small\" hideTrack></ix-spinner> : null}\n {props.icon && !props.loading ? (\n <ix-icon\n class=\"icon\"\n name={props.icon}\n size={props.iconSize as any}\n color={props.iconColor}\n ></ix-icon>\n ) : null}\n <div\n class={{\n content: true,\n [`content-${props.alignment}`]: !!props.alignment,\n }}\n >\n {children}\n </div>\n {props.afterContent ? props.afterContent : null}\n </button>\n );\n}\n"],"mappings":"oCAcA,MAAMA,EAAaC,GACVA,EAAQC,gBAAkB,UAAUA,cAG7C,MAAMC,EAAeF,GACZA,EAAQC,gBAAkB,YAAYA,c,MAGlCE,EAAmB,CAC9BH,EACAI,EACAC,EACAC,EAAW,MACXC,EAAW,MACXC,EACAC,KAEO,CACLC,IAAK,KACL,cAAeX,EAAUC,KAAaI,IAAYC,EAClD,sBAAuBN,EAAUC,IAAYI,IAAYC,EACzD,wBAAyBN,EAAUC,KAAaI,GAAWC,EAC3D,gBAAiBH,EAAYF,KAAaI,IAAYC,EACtD,wBAAyBH,EAAYF,IAAYI,IAAYC,EAC7D,0BAA2BH,EAAYF,KAAaI,GAAWC,EAC/D,WAAYC,EACZ,WAAYC,EACZC,SAAUA,EACVC,SAAUA,I,SAyBEE,EAAWC,EAAwBC,G,QACjD,MAAMC,GAAeC,EAAAH,EAAME,gBAAY,MAAAC,SAAA,EAAAA,EAAI,GAE3C,OACEC,EAAA,SAAAC,OAAAC,OAAA,GACMN,EAAMO,eAAc,CACxBC,QAAUC,GAAcT,EAAMQ,QAAUR,EAAMQ,QAAQC,GAAKC,UAC3DC,SAAUX,EAAMH,UAAY,GAAIe,EAAAZ,EAAMa,YAAQ,MAAAD,SAAA,EAAAA,EAAI,EAClDE,KAAMd,EAAMc,KACZC,MAAKV,OAAAC,OAAAD,OAAAC,OAAA,GACAf,EACDS,EAAMZ,QACNY,EAAMR,QACNQ,EAAMP,MACNO,EAAMN,SACNM,EAAML,SACNK,EAAMJ,SACNI,EAAMH,UAAYG,EAAMgB,UAEvBd,KAGJF,EAAMgB,QAAUZ,EAAA,cAAYa,KAAK,QAAQC,UAAS,OAAiB,KACnElB,EAAMmB,OAASnB,EAAMgB,QACpBZ,EAAA,WACEW,MAAM,OACNK,KAAMpB,EAAMmB,KACZF,KAAMjB,EAAMqB,SACZC,MAAOtB,EAAMuB,YAEb,KACJnB,EAAA,OACEW,MAAO,CACLS,QAAS,KACT,CAAC,WAAWxB,EAAMyB,eAAgBzB,EAAMyB,YAGzCxB,GAEFD,EAAM0B,aAAe1B,EAAM0B,aAAe,KAGjD,Q"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,c as t,h as o,H as i,g as
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,c as t,h as o,H as i,g as s}from"./p-76a509c7.js";import{a as n}from"./p-810b5232.js";const a=".text-xs{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}.text-default-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}.text-xl{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}a{color:var(--theme-color-primary)}:host{position:absolute;width:100%;height:100%;z-index:2;top:0;left:0;background-color:var(--theme-overlay--background)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .overlay-header{display:flex;position:relative;justify-content:flex-start;align-items:center;height:3.5rem;background-color:var(--theme-overlay-header--background)}:host .overlay-header-content{display:flex;align-items:center;min-width:0}:host .overlay-header-content ix-icon{margin-inline-start:1rem;color:var(--theme-overlay-header--color)}:host .overlay-header-content .overlay-header-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-overlay-header--color);margin-inline-start:1rem}:host .color-indicator{display:inline-block;position:relative;width:0.5rem;height:100%;background-color:var(--theme-color-neutral)}:host .overlay-close{margin-inline-start:auto;margin-inline-end:1rem}:host .d-none{display:none}:host(.d-none){display:none}";const r=class{constructor(o){e(this,o);this.closeClick=t(this,"closeClick",7);this.name=undefined;this.icon=undefined;this.color=undefined}componentWillLoad(){n({targets:this.hostElement,duration:r.slowTime,backdropFilter:[0,"blur(1rem)"],translateX:["-4rem",0],opacity:[0,1],easing:"easeOutSine",begin:()=>{this.hostElement.classList.remove("d-none")}})}closeOverlay(){n({targets:this.hostElement,duration:r.slowTime,backdropFilter:["blur(1rem)",0],translateX:[0,"-4rem"],opacity:[1,0],easing:"easeInSine",complete:()=>{this.closeClick.emit();this.hostElement.classList.add("d-none")}})}render(){return o(i,null,o("div",{class:"overlay-header"},o("div",{class:{"color-indicator":true,"d-none":this.color==="undefined"||this.color===undefined},style:{"background-color":this.color?`var(--theme-${this.color})`:""}}),o("div",{class:"overlay-header-content"},o("ix-icon",{size:"32",name:this.icon}),o("span",{class:"overlay-header-title",title:this.name},this.name)),o("ix-icon-button",{class:"overlay-close",ghost:true,icon:"close",size:"24",onClick:()=>this.closeOverlay()})),o("slot",null))}get hostElement(){return s(this)}};r.slowTime=500;r.style=a;export{r as ix_map_navigation_overlay};
|
|
2
|
+
//# sourceMappingURL=p-8968a070.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["mapNavigationOverlayCss","MapNavigationOverlay","componentWillLoad","anime","targets","this","hostElement","duration","slowTime","backdropFilter","translateX","opacity","easing","begin","classList","remove","closeOverlay","complete","closeClick","emit","add","render","h","Host","class","color","undefined","style","size","name","icon","title","ghost","onClick"],"sources":["./src/components/map-navigation-overlay/map-navigation-overlay.scss?tag=ix-map-navigation-overlay&encapsulation=shadow","./src/components/map-navigation-overlay/map-navigation-overlay.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'common-variables';\n@import 'legacy/fonts';\n@import 'mixins/text-truncation';\n\n:host {\n @include ix-component;\n\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 2;\n top: 0;\n left: 0;\n\n background-color: var(--theme-overlay--background);\n\n .overlay-header {\n display: flex;\n position: relative;\n justify-content: flex-start;\n align-items: center;\n height: 3.5rem;\n\n background-color: var(--theme-overlay-header--background);\n }\n\n .overlay-header-content {\n display: flex;\n align-items: center;\n min-width: 0;\n\n ix-icon {\n margin-inline-start: $default-space;\n color: var(--theme-overlay-header--color);\n }\n\n .overlay-header-title {\n @include text-h2;\n @include ellipsis;\n color: var(--theme-overlay-header--color);\n margin-inline-start: $default-space;\n }\n }\n\n .color-indicator {\n display: inline-block;\n position: relative;\n width: $small-space;\n height: 100%;\n background-color: var(--theme-color-neutral);\n }\n\n .overlay-close {\n margin-inline-start: auto;\n margin-inline-end: $default-space;\n }\n\n .d-none {\n display: none;\n }\n}\n\n:host(.d-none) {\n display: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n tag: 'ix-map-navigation-overlay',\n styleUrl: 'map-navigation-overlay.scss',\n shadow: true,\n})\nexport class MapNavigationOverlay {\n private static readonly slowTime = 500;\n\n @Element() hostElement: HTMLIxMapNavigationOverlayElement;\n\n /**\n * Title of overlay\n */\n @Prop() name: string;\n\n /**\n * Icon of overlay\n */\n @Prop() icon: string;\n\n /**\n * Color of icon\n */\n @Prop() color: string;\n\n /**\n * Event closed\n */\n @Event() closeClick: EventEmitter;\n\n componentWillLoad() {\n anime({\n targets: this.hostElement,\n duration: MapNavigationOverlay.slowTime,\n backdropFilter: [0, 'blur(1rem)'],\n translateX: ['-4rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n this.hostElement.classList.remove('d-none');\n },\n });\n }\n\n private closeOverlay() {\n anime({\n targets: this.hostElement,\n duration: MapNavigationOverlay.slowTime,\n backdropFilter: ['blur(1rem)', 0],\n translateX: [0, '-4rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n this.closeClick.emit();\n this.hostElement.classList.add('d-none');\n },\n });\n }\n\n render() {\n return (\n <Host>\n <div class=\"overlay-header\">\n <div\n class={{\n 'color-indicator': true,\n 'd-none': this.color === 'undefined' || this.color === undefined,\n }}\n style={{\n 'background-color': this.color\n ? `var(--theme-${this.color})`\n : '',\n }}\n ></div>\n <div class=\"overlay-header-content\">\n <ix-icon size=\"32\" name={this.icon}></ix-icon>\n <span class=\"overlay-header-title\" title={this.name}>\n {this.name}\n </span>\n </div>\n <ix-icon-button\n class=\"overlay-close\"\n ghost\n icon={'close'}\n size=\"24\"\n onClick={() => this.closeOverlay()}\n ></ix-icon-button>\n </div>\n\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"oGAAA,MAAMA,EAA0B,
|
|
1
|
+
{"version":3,"names":["mapNavigationOverlayCss","MapNavigationOverlay","componentWillLoad","anime","targets","this","hostElement","duration","slowTime","backdropFilter","translateX","opacity","easing","begin","classList","remove","closeOverlay","complete","closeClick","emit","add","render","h","Host","class","color","undefined","style","size","name","icon","title","ghost","onClick"],"sources":["./src/components/map-navigation-overlay/map-navigation-overlay.scss?tag=ix-map-navigation-overlay&encapsulation=shadow","./src/components/map-navigation-overlay/map-navigation-overlay.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'common-variables';\n@import 'legacy/fonts';\n@import 'mixins/text-truncation';\n\n:host {\n @include ix-component;\n\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 2;\n top: 0;\n left: 0;\n\n background-color: var(--theme-overlay--background);\n\n .overlay-header {\n display: flex;\n position: relative;\n justify-content: flex-start;\n align-items: center;\n height: 3.5rem;\n\n background-color: var(--theme-overlay-header--background);\n }\n\n .overlay-header-content {\n display: flex;\n align-items: center;\n min-width: 0;\n\n ix-icon {\n margin-inline-start: $default-space;\n color: var(--theme-overlay-header--color);\n }\n\n .overlay-header-title {\n @include text-h2;\n @include ellipsis;\n color: var(--theme-overlay-header--color);\n margin-inline-start: $default-space;\n }\n }\n\n .color-indicator {\n display: inline-block;\n position: relative;\n width: $small-space;\n height: 100%;\n background-color: var(--theme-color-neutral);\n }\n\n .overlay-close {\n margin-inline-start: auto;\n margin-inline-end: $default-space;\n }\n\n .d-none {\n display: none;\n }\n}\n\n:host(.d-none) {\n display: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n tag: 'ix-map-navigation-overlay',\n styleUrl: 'map-navigation-overlay.scss',\n shadow: true,\n})\nexport class MapNavigationOverlay {\n private static readonly slowTime = 500;\n\n @Element() hostElement: HTMLIxMapNavigationOverlayElement;\n\n /**\n * Title of overlay\n */\n @Prop() name: string;\n\n /**\n * Icon of overlay\n */\n @Prop() icon: string;\n\n /**\n * Color of icon\n */\n @Prop() color: string;\n\n /**\n * Event closed\n */\n @Event() closeClick: EventEmitter;\n\n componentWillLoad() {\n anime({\n targets: this.hostElement,\n duration: MapNavigationOverlay.slowTime,\n backdropFilter: [0, 'blur(1rem)'],\n translateX: ['-4rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n this.hostElement.classList.remove('d-none');\n },\n });\n }\n\n private closeOverlay() {\n anime({\n targets: this.hostElement,\n duration: MapNavigationOverlay.slowTime,\n backdropFilter: ['blur(1rem)', 0],\n translateX: [0, '-4rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n this.closeClick.emit();\n this.hostElement.classList.add('d-none');\n },\n });\n }\n\n render() {\n return (\n <Host>\n <div class=\"overlay-header\">\n <div\n class={{\n 'color-indicator': true,\n 'd-none': this.color === 'undefined' || this.color === undefined,\n }}\n style={{\n 'background-color': this.color\n ? `var(--theme-${this.color})`\n : '',\n }}\n ></div>\n <div class=\"overlay-header-content\">\n <ix-icon size=\"32\" name={this.icon}></ix-icon>\n <span class=\"overlay-header-title\" title={this.name}>\n {this.name}\n </span>\n </div>\n <ix-icon-button\n class=\"overlay-close\"\n ghost\n icon={'close'}\n size=\"24\"\n onClick={() => this.closeOverlay()}\n ></ix-icon-button>\n </div>\n\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"oGAAA,MAAMA,EAA0B,khJ,MCyBnBC,EAAoB,M,6HAyB/BC,oBACEC,EAAM,CACJC,QAASC,KAAKC,YACdC,SAAUN,EAAqBO,SAC/BC,eAAgB,CAAC,EAAG,cACpBC,WAAY,CAAC,QAAS,GACtBC,QAAS,CAAC,EAAG,GACbC,OAAQ,cACRC,MAAO,KACLR,KAAKC,YAAYQ,UAAUC,OAAO,SAAS,G,CAKzCC,eACNb,EAAM,CACJC,QAASC,KAAKC,YACdC,SAAUN,EAAqBO,SAC/BC,eAAgB,CAAC,aAAc,GAC/BC,WAAY,CAAC,EAAG,SAChBC,QAAS,CAAC,EAAG,GACbC,OAAQ,aACRK,SAAU,KACRZ,KAAKa,WAAWC,OAChBd,KAAKC,YAAYQ,UAAUM,IAAI,SAAS,G,CAK9CC,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAM,kBACTF,EAAA,OACEE,MAAO,CACL,kBAAmB,KACnB,SAAUnB,KAAKoB,QAAU,aAAepB,KAAKoB,QAAUC,WAEzDC,MAAO,CACL,mBAAoBtB,KAAKoB,MACrB,eAAepB,KAAKoB,SACpB,MAGRH,EAAA,OAAKE,MAAM,0BACTF,EAAA,WAASM,KAAK,KAAKC,KAAMxB,KAAKyB,OAC9BR,EAAA,QAAME,MAAM,uBAAuBO,MAAO1B,KAAKwB,MAC5CxB,KAAKwB,OAGVP,EAAA,kBACEE,MAAM,gBACNQ,MAAK,KACLF,KAAM,QACNF,KAAK,KACLK,QAAS,IAAM5B,KAAKW,kBAIxBM,EAAA,a,oCAnFkBrB,EAAAO,SAAW,I"}
|