@carbon/web-components 2.11.1 → 2.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/16-486ace1a.js +1 -1
- package/dist/16-51a594ce.js +1 -1
- package/dist/16-656090c0.js +1 -1
- package/dist/16-71872213.js +1 -1
- package/dist/16-730a41a2.js +1 -1
- package/dist/16-83a1cd89.js +1 -1
- package/dist/16-b73c677b.js +1 -1
- package/dist/16-d1c73001.js +1 -1
- package/dist/20-d069d8da.js +1 -1
- package/dist/accordion.min.js +8 -14
- package/dist/ai-skeleton.min.js +1 -1
- package/dist/breadcrumb.min.js +4 -4
- package/dist/button-21c75bab.js +1 -1
- package/dist/{button-set-69863a24.js → button-set-984abad1.js} +2 -2
- package/dist/button-skeleton-1abc1fd8.js +1 -1
- package/dist/button.min.js +2 -2
- package/dist/carbon-element-4ca9803f.js +1 -1
- package/dist/chat-button.min.js +1 -1
- package/dist/checkbox-dc5fcaff.js +109 -0
- package/dist/checkbox.min.js +4 -4
- package/dist/class-map-5edb95da.js +1 -1
- package/dist/code-snippet.min.js +3 -3
- package/dist/collection-helpers-4e32fe16.js +1 -1
- package/dist/combo-box.min.js +3 -3
- package/dist/{content-switcher-item-5b8dd42f.js → content-switcher-item-62392ba8.js} +1 -1
- package/dist/content-switcher.min.js +2 -2
- package/dist/{copy-button-d673538b.js → copy-button-8ae404e7.js} +3 -3
- package/dist/copy-button.min.js +2 -2
- package/dist/data-table.min.js +9 -9
- package/dist/date-picker.min.js +6 -6
- package/dist/defineProperty-e448b551.js +1 -1
- package/dist/directive-e2d48b9c.js +1 -1
- package/dist/dropdown-item-8284b402.js +148 -0
- package/dist/dropdown.min.js +2 -2
- package/dist/file-uploader.min.js +2 -2
- package/dist/{floating-menu-46199beb.js → floating-menu-4fdda50e.js} +1 -1
- package/dist/floating-menu.min.js +2 -2
- package/dist/focus-e70d1cbe.js +1 -1
- package/dist/form-group.min.js +3 -3
- package/dist/form.min.js +2 -2
- package/dist/get-52a048b1.js +1 -1
- package/dist/host-listener-b6a3d690.js +1 -1
- package/dist/{icon-button-09275c70.js → icon-button-9889b58b.js} +4 -4
- package/dist/icon-button.min.js +2 -2
- package/dist/if-defined-2e09d22b.js +1 -1
- package/dist/if-non-empty-20ce3c96.js +1 -1
- package/dist/inline-loading.min.js +5 -5
- package/dist/{layer-5f257c4a.js → layer-ee2a047c.js} +1 -1
- package/dist/layer.min.js +2 -2
- package/dist/{link-dc6f9b4e.js → link-c2b4e683.js} +1 -1
- package/dist/link.min.js +2 -2
- package/dist/list.min.js +4 -4
- package/dist/loading-2604f4ad.js +1 -1
- package/dist/loading-icon-85b7e502.js +1 -1
- package/dist/loading.min.js +1 -1
- package/dist/{modal-label-d53c98de.js → modal-label-9ee331a4.js} +1 -1
- package/dist/modal.min.js +2 -2
- package/dist/multi-select.min.js +4 -4
- package/dist/notification.min.js +5 -5
- package/dist/number-input.min.js +4 -4
- package/dist/objectSpread2-46e4de7a.js +1 -1
- package/dist/on-6c264d49.js +1 -1
- package/dist/overflow-menu.min.js +5 -5
- package/dist/pagination.min.js +5 -5
- package/dist/{popover-content-08cf10b0.js → popover-content-d6f3bde5.js} +2 -2
- package/dist/popover-controller-486f0f75.js +73 -0
- package/dist/popover.min.js +2 -2
- package/dist/progress-bar.min.js +1 -1
- package/dist/progress-indicator.min.js +3 -3
- package/dist/query-5f833318.js +1 -1
- package/dist/query-assigned-elements-73bd2544.js +1 -1
- package/dist/radio-button.min.js +2 -2
- package/dist/radio-group-manager-de7f9ab3.js +1 -1
- package/dist/search-09497355.js +102 -0
- package/dist/search.min.js +2 -2
- package/dist/select-95272984.js +141 -0
- package/dist/select.min.js +3 -71
- package/dist/settings-97cd1c3a.js +1 -1
- package/dist/shared-enums-c6fe8c39.js +1 -1
- package/dist/side-panel.min.js +11 -11
- package/dist/skeleton-icon-bfc7d5c8.js +1 -1
- package/dist/skeleton-icon.min.js +1 -1
- package/dist/skeleton-placeholder-403f26a3.js +1 -1
- package/dist/skeleton-placeholder.min.js +1 -1
- package/dist/skeleton-text-9d02604f.js +1 -1
- package/dist/skeleton-text.min.js +1 -1
- package/dist/skip-to-content.min.js +2 -2
- package/dist/slider.min.js +4 -4
- package/dist/slug.min.js +3 -3
- package/dist/spread-d515f3f1.js +1 -1
- package/dist/stack.min.js +1 -1
- package/dist/state-ddd29b9d.js +1 -1
- package/dist/structured-list.min.js +5 -5
- package/dist/tabs.min.js +5 -5
- package/dist/tag.min.js +5 -5
- package/dist/tearsheet.min.js +10 -10
- package/dist/text-input-5ebf4917.js +142 -0
- package/dist/text-input.min.js +2 -2
- package/dist/textarea.min.js +6 -6
- package/dist/tile.min.js +3 -3
- package/dist/toggle-tip.min.js +2 -2
- package/dist/toggle.min.js +2 -2
- package/dist/{toggletip-f95c53b0.js → toggletip-1ef069a9.js} +2 -2
- package/dist/{tooltip-content-d784ae2b.js → tooltip-content-a75c5632.js} +3 -3
- package/dist/tooltip.min.js +2 -2
- package/dist/ui-shell.min.js +14 -14
- package/dist/validity-d86ffa4f.js +1 -1
- package/es/components/accordion/accordion-item-skeleton.js.map +1 -1
- package/es/components/accordion/accordion-item.js +8 -7
- package/es/components/accordion/accordion-item.js.map +1 -1
- package/es/components/accordion/accordion-skeleton.d.ts +1 -1
- package/es/components/accordion/accordion-skeleton.js +5 -6
- package/es/components/accordion/accordion-skeleton.js.map +1 -1
- package/es/components/accordion/accordion.css.js +1 -1
- package/es/components/accordion/accordion.js +4 -3
- package/es/components/accordion/accordion.js.map +1 -1
- package/es/components/ai-skeleton/ai-skeleton-icon.js.map +1 -1
- package/es/components/ai-skeleton/ai-skeleton-placeholder.js.map +1 -1
- package/es/components/ai-skeleton/ai-skeleton-text.js.map +1 -1
- package/es/components/breadcrumb/breadcrumb-item.js +3 -2
- package/es/components/breadcrumb/breadcrumb-item.js.map +1 -1
- package/es/components/breadcrumb/breadcrumb-link.js +3 -2
- package/es/components/breadcrumb/breadcrumb-link.js.map +1 -1
- package/es/components/breadcrumb/breadcrumb-overflow-menu.js.map +1 -1
- package/es/components/breadcrumb/breadcrumb-skeleton.js.map +1 -1
- package/es/components/breadcrumb/breadcrumb.js +3 -2
- package/es/components/breadcrumb/breadcrumb.js.map +1 -1
- package/es/components/button/button-set-base.js +3 -2
- package/es/components/button/button-set-base.js.map +1 -1
- package/es/components/button/button-set.js +1 -1
- package/es/components/button/button-set.js.map +1 -1
- package/es/components/button/button-skeleton.js.map +1 -1
- package/es/components/button/button.js.map +1 -1
- package/es/components/chat-button/chat-button-skeleton.js.map +1 -1
- package/es/components/chat-button/chat-button.js.map +1 -1
- package/es/components/checkbox/checkbox-group.js +2 -2
- package/es/components/checkbox/checkbox-group.js.map +1 -1
- package/es/components/checkbox/checkbox-skeleton.js.map +1 -1
- package/es/components/checkbox/checkbox.css.js +1 -1
- package/es/components/checkbox/checkbox.js +2 -2
- package/es/components/checkbox/checkbox.js.map +1 -1
- package/es/components/code-snippet/code-snippet-skeleton.js.map +1 -1
- package/es/components/code-snippet/code-snippet.js +3 -2
- package/es/components/code-snippet/code-snippet.js.map +1 -1
- package/es/components/combo-box/combo-box.css.js +1 -1
- package/es/components/combo-box/combo-box.js +14 -13
- package/es/components/combo-box/combo-box.js.map +1 -1
- package/es/components/content-switcher/content-switcher-item.js.map +1 -1
- package/es/components/content-switcher/content-switcher.js +6 -6
- package/es/components/content-switcher/content-switcher.js.map +1 -1
- package/es/components/copy/copy.d.ts +1 -1
- package/es/components/copy/copy.js +5 -4
- package/es/components/copy/copy.js.map +1 -1
- package/es/components/copy-button/copy-button.d.ts +1 -1
- package/es/components/copy-button/copy-button.js +1 -1
- package/es/components/copy-button/copy-button.js.map +1 -1
- package/es/components/data-table/data-table.css.js +1 -1
- package/es/components/data-table/table-batch-actions.js +2 -2
- package/es/components/data-table/table-batch-actions.js.map +1 -1
- package/es/components/data-table/table-body.js +3 -2
- package/es/components/data-table/table-body.js.map +1 -1
- package/es/components/data-table/table-cell-content.js.map +1 -1
- package/es/components/data-table/table-cell.js +3 -2
- package/es/components/data-table/table-cell.js.map +1 -1
- package/es/components/data-table/table-expanded-row.js +1 -1
- package/es/components/data-table/table-expanded-row.js.map +1 -1
- package/es/components/data-table/table-head.js +3 -2
- package/es/components/data-table/table-head.js.map +1 -1
- package/es/components/data-table/table-header-cell.js +5 -4
- package/es/components/data-table/table-header-cell.js.map +1 -1
- package/es/components/data-table/table-header-description.js.map +1 -1
- package/es/components/data-table/table-header-row.js +1 -1
- package/es/components/data-table/table-header-row.js.map +1 -1
- package/es/components/data-table/table-header-title.js.map +1 -1
- package/es/components/data-table/table-row.js +12 -11
- package/es/components/data-table/table-row.js.map +1 -1
- package/es/components/data-table/table-skeleton.js +3 -2
- package/es/components/data-table/table-skeleton.js.map +1 -1
- package/es/components/data-table/table-toolbar-content.js.map +1 -1
- package/es/components/data-table/table-toolbar-search.js +5 -4
- package/es/components/data-table/table-toolbar-search.js.map +1 -1
- package/es/components/data-table/table-toolbar.js +4 -3
- package/es/components/data-table/table-toolbar.js.map +1 -1
- package/es/components/data-table/table.js +28 -27
- package/es/components/data-table/table.js.map +1 -1
- package/es/components/date-picker/date-picker-input-skeleton.js.map +1 -1
- package/es/components/date-picker/date-picker-input.js +2 -2
- package/es/components/date-picker/date-picker-input.js.map +1 -1
- package/es/components/date-picker/date-picker.css.js +1 -1
- package/es/components/date-picker/date-picker.js +20 -19
- package/es/components/date-picker/date-picker.js.map +1 -1
- package/es/components/dropdown/dropdown-item.js +3 -2
- package/es/components/dropdown/dropdown-item.js.map +1 -1
- package/es/components/dropdown/dropdown-skeleton.js.map +1 -1
- package/es/components/dropdown/dropdown.css.js +1 -1
- package/es/components/dropdown/dropdown.js +9 -9
- package/es/components/dropdown/dropdown.js.map +1 -1
- package/es/components/file-uploader/demo-file-uploader.js.map +1 -1
- package/es/components/file-uploader/file-uploader-button.js +2 -2
- package/es/components/file-uploader/file-uploader-button.js.map +1 -1
- package/es/components/file-uploader/file-uploader-drop-container.js +2 -2
- package/es/components/file-uploader/file-uploader-drop-container.js.map +1 -1
- package/es/components/file-uploader/file-uploader-item.js +2 -2
- package/es/components/file-uploader/file-uploader-item.js.map +1 -1
- package/es/components/file-uploader/file-uploader-skeleton.js.map +1 -1
- package/es/components/file-uploader/file-uploader.css.js +1 -1
- package/es/components/file-uploader/file-uploader.js +1 -1
- package/es/components/file-uploader/file-uploader.js.map +1 -1
- package/es/components/floating-menu/floating-menu.js +3 -3
- package/es/components/floating-menu/floating-menu.js.map +1 -1
- package/es/components/form/form-item.css.js +1 -1
- package/es/components/form/form-item.js.map +1 -1
- package/es/components/form-group/form-group.css.js +1 -1
- package/es/components/form-group/form-group.js.map +1 -1
- package/es/components/icon-button/icon-button.js +3 -2
- package/es/components/icon-button/icon-button.js.map +1 -1
- package/es/components/inline-loading/inline-loading.js +3 -2
- package/es/components/inline-loading/inline-loading.js.map +1 -1
- package/es/components/layer/layer.js +2 -2
- package/es/components/layer/layer.js.map +1 -1
- package/es/components/link/link.js +1 -1
- package/es/components/link/link.js.map +1 -1
- package/es/components/list/list-item.js +4 -3
- package/es/components/list/list-item.js.map +1 -1
- package/es/components/list/ordered-list.js.map +1 -1
- package/es/components/list/unordered-list.js +4 -3
- package/es/components/list/unordered-list.js.map +1 -1
- package/es/components/loading/loading.js.map +1 -1
- package/es/components/modal/modal-body-content.js.map +1 -1
- package/es/components/modal/modal-body.js.map +1 -1
- package/es/components/modal/modal-close-button.js.map +1 -1
- package/es/components/modal/modal-footer.js +1 -1
- package/es/components/modal/modal-footer.js.map +1 -1
- package/es/components/modal/modal-header.js +1 -1
- package/es/components/modal/modal-header.js.map +1 -1
- package/es/components/modal/modal-heading.js.map +1 -1
- package/es/components/modal/modal-label.js.map +1 -1
- package/es/components/modal/modal.js +8 -8
- package/es/components/modal/modal.js.map +1 -1
- package/es/components/multi-select/multi-select-item.js +1 -1
- package/es/components/multi-select/multi-select-item.js.map +1 -1
- package/es/components/multi-select/multi-select.css.js +1 -1
- package/es/components/multi-select/multi-select.js +18 -17
- package/es/components/multi-select/multi-select.js.map +1 -1
- package/es/components/notification/actionable-notification-button.js +3 -2
- package/es/components/notification/actionable-notification-button.js.map +1 -1
- package/es/components/notification/actionable-notification.js +5 -4
- package/es/components/notification/actionable-notification.js.map +1 -1
- package/es/components/notification/inline-notification.js +5 -4
- package/es/components/notification/inline-notification.js.map +1 -1
- package/es/components/notification/toast-notification.js.map +1 -1
- package/es/components/number-input/number-input-skeleton.js.map +1 -1
- package/es/components/number-input/number-input.css.js +1 -1
- package/es/components/number-input/number-input.js +10 -9
- package/es/components/number-input/number-input.js.map +1 -1
- package/es/components/overflow-menu/overflow-menu-body.js +6 -5
- package/es/components/overflow-menu/overflow-menu-body.js.map +1 -1
- package/es/components/overflow-menu/overflow-menu-item.js +3 -2
- package/es/components/overflow-menu/overflow-menu-item.js.map +1 -1
- package/es/components/overflow-menu/overflow-menu.js +6 -5
- package/es/components/overflow-menu/overflow-menu.js.map +1 -1
- package/es/components/pagination/index.d.ts +2 -1
- package/es/components/pagination/index.js +2 -1
- package/es/components/pagination/index.js.map +1 -1
- package/es/components/pagination/pagination.css.js +1 -1
- package/es/components/pagination/pagination.js +4 -4
- package/es/components/pagination/pagination.js.map +1 -1
- package/es/components/popover/popover-content.js.map +1 -1
- package/es/components/popover/popover.js +3 -3
- package/es/components/popover/popover.js.map +1 -1
- package/es/components/progress-bar/progress-bar.js +1 -1
- package/es/components/progress-bar/progress-bar.js.map +1 -1
- package/es/components/progress-indicator/progress-indicator-skeleton.js +1 -1
- package/es/components/progress-indicator/progress-indicator-skeleton.js.map +1 -1
- package/es/components/progress-indicator/progress-indicator.js +4 -3
- package/es/components/progress-indicator/progress-indicator.js.map +1 -1
- package/es/components/progress-indicator/progress-step-skeleton.js.map +1 -1
- package/es/components/progress-indicator/progress-step.js +3 -2
- package/es/components/progress-indicator/progress-step.js.map +1 -1
- package/es/components/radio-button/radio-button-group.js +4 -4
- package/es/components/radio-button/radio-button-group.js.map +1 -1
- package/es/components/radio-button/radio-button-skeleton.js.map +1 -1
- package/es/components/radio-button/radio-button.css.js +1 -1
- package/es/components/radio-button/radio-button.js +5 -4
- package/es/components/radio-button/radio-button.js.map +1 -1
- package/es/components/search/search-skeleton.js.map +1 -1
- package/es/components/search/search.css.js +1 -1
- package/es/components/search/search.js +1 -1
- package/es/components/search/search.js.map +1 -1
- package/es/components/select/select-skeleton.js.map +1 -1
- package/es/components/select/select.css.js +1 -1
- package/es/components/select/select.js +14 -13
- package/es/components/select/select.js.map +1 -1
- package/es/components/side-panel/side-panel.css.js +1 -1
- package/es/components/side-panel/side-panel.js +10 -9
- package/es/components/side-panel/side-panel.js.map +1 -1
- package/es/components/skeleton-placeholder/skeleton-placeholder.js.map +1 -1
- package/es/components/skeleton-text/skeleton-text.js.map +1 -1
- package/es/components/skip-to-content/skip-to-content.js +3 -2
- package/es/components/skip-to-content/skip-to-content.js.map +1 -1
- package/es/components/slider/slider-input.js +8 -8
- package/es/components/slider/slider-input.js.map +1 -1
- package/es/components/slider/slider-skeleton.js.map +1 -1
- package/es/components/slider/slider.css.js +1 -1
- package/es/components/slider/slider.js +17 -16
- package/es/components/slider/slider.js.map +1 -1
- package/es/components/slug/slug.css.js +1 -1
- package/es/components/slug/slug.js +3 -2
- package/es/components/slug/slug.js.map +1 -1
- package/es/components/stack/stack.js.map +1 -1
- package/es/components/structured-list/structured-list-body.js +3 -2
- package/es/components/structured-list/structured-list-body.js.map +1 -1
- package/es/components/structured-list/structured-list-cell.js +3 -2
- package/es/components/structured-list/structured-list-cell.js.map +1 -1
- package/es/components/structured-list/structured-list-head.js +3 -2
- package/es/components/structured-list/structured-list-head.js.map +1 -1
- package/es/components/structured-list/structured-list-header-cell-skeleton.js.map +1 -1
- package/es/components/structured-list/structured-list-header-cell.js +3 -2
- package/es/components/structured-list/structured-list-header-cell.js.map +1 -1
- package/es/components/structured-list/structured-list-header-row.js +3 -2
- package/es/components/structured-list/structured-list-header-row.js.map +1 -1
- package/es/components/structured-list/structured-list-row.js +4 -3
- package/es/components/structured-list/structured-list-row.js.map +1 -1
- package/es/components/structured-list/structured-list.js +3 -2
- package/es/components/structured-list/structured-list.js.map +1 -1
- package/es/components/tabs/tab-skeleton.js.map +1 -1
- package/es/components/tabs/tab.js +3 -2
- package/es/components/tabs/tab.js.map +1 -1
- package/es/components/tabs/tabs-skeleton.js.map +1 -1
- package/es/components/tabs/tabs.js +13 -12
- package/es/components/tabs/tabs.js.map +1 -1
- package/es/components/tag/tag.css.js +1 -1
- package/es/components/tag/tag.js +3 -3
- package/es/components/tag/tag.js.map +1 -1
- package/es/components/tearsheet/tearsheet.js +11 -10
- package/es/components/tearsheet/tearsheet.js.map +1 -1
- package/es/components/text-input/text-input-skeleton.js.map +1 -1
- package/es/components/text-input/text-input.css.js +1 -1
- package/es/components/text-input/text-input.js +5 -5
- package/es/components/text-input/text-input.js.map +1 -1
- package/es/components/textarea/textarea-skeleton.js.map +1 -1
- package/es/components/textarea/textarea.css.js +1 -1
- package/es/components/textarea/textarea.js.map +1 -1
- package/es/components/tile/clickable-tile.js +5 -4
- package/es/components/tile/clickable-tile.js.map +1 -1
- package/es/components/tile/expandable-tile.js +3 -3
- package/es/components/tile/expandable-tile.js.map +1 -1
- package/es/components/tile/radio-tile.js +1 -1
- package/es/components/tile/radio-tile.js.map +1 -1
- package/es/components/tile/selectable-tile.js +2 -2
- package/es/components/tile/selectable-tile.js.map +1 -1
- package/es/components/tile/tile-group.js +4 -4
- package/es/components/tile/tile-group.js.map +1 -1
- package/es/components/tile/tile.css.js +1 -1
- package/es/components/tile/tile.js +1 -1
- package/es/components/tile/tile.js.map +1 -1
- package/es/components/toggle/toggle.js +1 -1
- package/es/components/toggle/toggle.js.map +1 -1
- package/es/components/toggle-tip/toggletip.js +3 -3
- package/es/components/toggle-tip/toggletip.js.map +1 -1
- package/es/components/tooltip/tooltip-content.js +3 -2
- package/es/components/tooltip/tooltip-content.js.map +1 -1
- package/es/components/tooltip/tooltip.js +8 -7
- package/es/components/tooltip/tooltip.js.map +1 -1
- package/es/components/ui-shell/header-global-action.js +3 -2
- package/es/components/ui-shell/header-global-action.js.map +1 -1
- package/es/components/ui-shell/header-menu-button.js +1 -1
- package/es/components/ui-shell/header-menu-button.js.map +1 -1
- package/es/components/ui-shell/header-menu.js +4 -3
- package/es/components/ui-shell/header-menu.js.map +1 -1
- package/es/components/ui-shell/header-name.js.map +1 -1
- package/es/components/ui-shell/header-nav-item.js.map +1 -1
- package/es/components/ui-shell/header-nav.js +3 -2
- package/es/components/ui-shell/header-nav.js.map +1 -1
- package/es/components/ui-shell/header-panel.js.map +1 -1
- package/es/components/ui-shell/header-side-nav-items.js +3 -2
- package/es/components/ui-shell/header-side-nav-items.js.map +1 -1
- package/es/components/ui-shell/header.js +3 -2
- package/es/components/ui-shell/header.js.map +1 -1
- package/es/components/ui-shell/side-nav-divider.js +3 -2
- package/es/components/ui-shell/side-nav-divider.js.map +1 -1
- package/es/components/ui-shell/side-nav-items.js +3 -2
- package/es/components/ui-shell/side-nav-items.js.map +1 -1
- package/es/components/ui-shell/side-nav-link.js +3 -2
- package/es/components/ui-shell/side-nav-link.js.map +1 -1
- package/es/components/ui-shell/side-nav-menu-item.js +4 -3
- package/es/components/ui-shell/side-nav-menu-item.js.map +1 -1
- package/es/components/ui-shell/side-nav-menu.js +6 -5
- package/es/components/ui-shell/side-nav-menu.js.map +1 -1
- package/es/components/ui-shell/side-nav.js +9 -8
- package/es/components/ui-shell/side-nav.js.map +1 -1
- package/es/components/ui-shell/switcher-divider.js +3 -2
- package/es/components/ui-shell/switcher-divider.js.map +1 -1
- package/es/components/ui-shell/switcher-item.js +3 -2
- package/es/components/ui-shell/switcher-item.js.map +1 -1
- package/es/components/ui-shell/switcher.js +3 -2
- package/es/components/ui-shell/switcher.js.map +1 -1
- package/package.json +6 -6
- package/dist/checkbox-d0a3a79f.js +0 -109
- package/dist/dropdown-item-91b3dc95.js +0 -148
- package/dist/popover-controller-cc6ccb74.js +0 -73
- package/dist/search-23232b04.js +0 -102
- package/dist/select-item-4ebf72a0.js +0 -73
- package/dist/text-input-ead65188.js +0 -142
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selectable-tile.js","names":["classMap","LitElement","html","svg","property","query","ifDefined","Checkbox16","CheckboxCheckedFilled16","prefix","FocusMixin","HostListenerMixin","TILE_COLOR_SCHEME","styles","HostListener","carbonElement","customElement","CDSSelectableTile","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","decorators","key","value","_handleSlotChange","target","hasContent","assignedNodes","filter","elem","_this$constructor","matches","undefined","slugItem","length","_hasSlug","Boolean","setAttribute","requestUpdate","_handleChange","selected","_inputNode","checked","eventChange","dispatchEvent","CustomEvent","bubbles","composed","detail","_renderIcon","checkmarkLabel","_t","_","children","_t2","_t3","event","_event$target","attribute","reflect","REGULAR","type","updated","removeAttribute","render","colorScheme","hasRoundedCorners","name","_inputType","inputType","handleChange","hasSlug","classes","_t4","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/tile/selectable-tile.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html, svg } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport Checkbox16 from '@carbon/icons/lib/checkbox/16';\nimport CheckboxCheckedFilled16 from '@carbon/icons/lib/checkbox--checked--filled/16';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Multi-selectable tile.\n *\n * @element cds-selectable-tile\n * @fires cds-selectable-tile-changed - The custom event fired after this selectable tile changes its selected state.\n */\n@customElement(`${prefix}-selectable-tile`)\nclass CDSSelectableTile extends HostListenerMixin(FocusMixin(LitElement)) {\n @query('input')\n protected _inputNode!: HTMLInputElement;\n\n /**\n * The `type` attribute of the `<input>`.\n */\n protected _inputType = 'checkbox';\n\n /**\n * `true` if there is a slug.\n */\n protected _hasSlug = false;\n\n /**\n * Handles `slotchange` event.\n */\n protected _handleSlotChange({ target }: Event) {\n const hasContent = (target as HTMLSlotElement)\n .assignedNodes()\n .filter((elem) =>\n (elem as HTMLElement).matches !== undefined\n ? (elem as HTMLElement).matches(\n (this.constructor as typeof CDSSelectableTile)?.slugItem\n )\n : false\n );\n if (hasContent.length > 0) {\n this._hasSlug = Boolean(hasContent);\n (hasContent[0] as HTMLElement).setAttribute('size', 'xs');\n }\n this.requestUpdate();\n }\n\n /**\n * Handles `change` event on the `<input>` in the shadow DOM.\n */\n protected _handleChange() {\n this.selected = this._inputNode.checked;\n\n const selected = this.selected;\n const { eventChange } = this.constructor as typeof CDSSelectableTile;\n this.dispatchEvent(\n new CustomEvent(eventChange, {\n bubbles: true,\n composed: true,\n detail: {\n selected,\n },\n })\n );\n }\n\n /**\n * Handles the rendering of the icon.\n */\n protected _renderIcon() {\n const { selected, checkmarkLabel } = this;\n\n return html` ${selected\n ? CheckboxCheckedFilled16({\n children: !checkmarkLabel\n ? undefined\n : svg`<title>${checkmarkLabel}</title>`,\n })\n : Checkbox16({\n children: !checkmarkLabel\n ? undefined\n : svg`<title>${checkmarkLabel}</title>`,\n })}`;\n }\n\n /**\n * Listener function for keyboard interaction.\n *\n * @param event to get the key pressed\n */\n @HostListener('keydown')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleKeydown = (event: KeyboardEvent) => {\n const { key } = event;\n\n if (\n key === ' ' ||\n (key === 'Enter' &&\n !(event.target as HTMLElement)?.matches(\n (this.constructor as typeof CDSSelectableTile).slugItem\n ))\n ) {\n this.selected = !this.selected;\n }\n };\n\n /**\n * The a11y text for the checkmark icon of the selected state.\n */\n @property({ attribute: 'checkmark-label' })\n checkmarkLabel!: string;\n\n /**\n * The color scheme.\n */\n @property({ attribute: 'color-scheme', reflect: true })\n colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n /**\n * Specify if the `SeletableTile` component should be rendered with rounded corners.\n * Only valid when `slug` prop is present\n */\n @property({ type: Boolean, attribute: 'has-rounded-corners' })\n hasRoundedCorners = false;\n\n /**\n * The form name.\n */\n @property()\n name!: string;\n\n /**\n * `true` to show the selected state.\n */\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /**\n * The form value.\n */\n @property()\n value!: string;\n\n updated() {\n if (this._hasSlug) {\n this.setAttribute('slug', '');\n } else {\n this.removeAttribute('slug');\n }\n }\n\n render() {\n const {\n colorScheme,\n hasRoundedCorners: hasRoundedCorners,\n name,\n selected,\n value,\n _inputType: inputType,\n _handleChange: handleChange,\n _hasSlug: hasSlug,\n } = this;\n const classes = classMap({\n [`${prefix}--tile`]: true,\n [`${prefix}--tile--selectable`]: true,\n [`${prefix}--tile--is-selected`]: selected,\n [`${prefix}--tile--${colorScheme}`]: colorScheme,\n [`${prefix}--tile--slug-rounded`]: hasSlug && hasRoundedCorners,\n });\n return html`\n <input\n type=\"${inputType}\"\n id=\"input\"\n class=\"${prefix}--tile-input\"\n tabindex=\"-1\"\n name=\"${ifDefined(name)}\"\n value=\"${ifDefined(value)}\"\n .checked=${selected}\n @change=${handleChange} />\n <label for=\"input\" class=\"${classes}\" tabindex=\"0\">\n <div\n class=\"${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent\">\n ${this._renderIcon()}\n </div>\n <div class=\"${prefix}--tile-content\"><slot></slot></div>\n </label>\n <slot name=\"slug\" @slotchange=\"${this._handleSlotChange}\"></slot>\n `;\n }\n\n /**\n * A selector that will return the slug item.\n */\n static get slugItem() {\n return `${prefix}-slug`;\n }\n\n /**\n * The name of the custom event fired after this selectable tile changes its selected state.\n */\n static get eventChange() {\n return `${prefix}-selectable-tile-changed`;\n }\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n static styles = styles;\n}\n\nexport default CDSSelectableTile;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"selectable-tile.js","names":["classMap","LitElement","html","svg","property","query","ifDefined","Checkbox16","CheckboxCheckedFilled16","prefix","FocusMixin","HostListenerMixin","TILE_COLOR_SCHEME","styles","HostListener","carbonElement","customElement","CDSSelectableTile","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","decorators","key","value","_handleSlotChange","target","hasContent","assignedNodes","filter","elem","_this$constructor","matches","undefined","slugItem","length","_hasSlug","Boolean","setAttribute","requestUpdate","_handleChange","selected","_inputNode","checked","eventChange","dispatchEvent","CustomEvent","bubbles","composed","detail","_renderIcon","checkmarkLabel","_t","_","children","_t2","_t3","event","_event$target","attribute","reflect","REGULAR","type","updated","removeAttribute","render","colorScheme","hasRoundedCorners","name","_inputType","inputType","handleChange","hasSlug","classes","_t4","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/tile/selectable-tile.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html, svg } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport Checkbox16 from '@carbon/icons/lib/checkbox/16';\nimport CheckboxCheckedFilled16 from '@carbon/icons/lib/checkbox--checked--filled/16';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Multi-selectable tile.\n *\n * @element cds-selectable-tile\n * @fires cds-selectable-tile-changed - The custom event fired after this selectable tile changes its selected state.\n */\n@customElement(`${prefix}-selectable-tile`)\nclass CDSSelectableTile extends HostListenerMixin(FocusMixin(LitElement)) {\n @query('input')\n protected _inputNode!: HTMLInputElement;\n\n /**\n * The `type` attribute of the `<input>`.\n */\n protected _inputType = 'checkbox';\n\n /**\n * `true` if there is a slug.\n */\n protected _hasSlug = false;\n\n /**\n * Handles `slotchange` event.\n */\n protected _handleSlotChange({ target }: Event) {\n const hasContent = (target as HTMLSlotElement)\n .assignedNodes()\n .filter((elem) =>\n (elem as HTMLElement).matches !== undefined\n ? (elem as HTMLElement).matches(\n (this.constructor as typeof CDSSelectableTile)?.slugItem\n )\n : false\n );\n if (hasContent.length > 0) {\n this._hasSlug = Boolean(hasContent);\n (hasContent[0] as HTMLElement).setAttribute('size', 'xs');\n }\n this.requestUpdate();\n }\n\n /**\n * Handles `change` event on the `<input>` in the shadow DOM.\n */\n protected _handleChange() {\n this.selected = this._inputNode.checked;\n\n const selected = this.selected;\n const { eventChange } = this.constructor as typeof CDSSelectableTile;\n this.dispatchEvent(\n new CustomEvent(eventChange, {\n bubbles: true,\n composed: true,\n detail: {\n selected,\n },\n })\n );\n }\n\n /**\n * Handles the rendering of the icon.\n */\n protected _renderIcon() {\n const { selected, checkmarkLabel } = this;\n\n return html` ${selected\n ? CheckboxCheckedFilled16({\n children: !checkmarkLabel\n ? undefined\n : svg`<title>${checkmarkLabel}</title>`,\n })\n : Checkbox16({\n children: !checkmarkLabel\n ? undefined\n : svg`<title>${checkmarkLabel}</title>`,\n })}`;\n }\n\n /**\n * Listener function for keyboard interaction.\n *\n * @param event to get the key pressed\n */\n @HostListener('keydown')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleKeydown = (event: KeyboardEvent) => {\n const { key } = event;\n\n if (\n key === ' ' ||\n (key === 'Enter' &&\n !(event.target as HTMLElement)?.matches(\n (this.constructor as typeof CDSSelectableTile).slugItem\n ))\n ) {\n this.selected = !this.selected;\n }\n };\n\n /**\n * The a11y text for the checkmark icon of the selected state.\n */\n @property({ attribute: 'checkmark-label' })\n checkmarkLabel!: string;\n\n /**\n * The color scheme.\n */\n @property({ attribute: 'color-scheme', reflect: true })\n colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n /**\n * Specify if the `SeletableTile` component should be rendered with rounded corners.\n * Only valid when `slug` prop is present\n */\n @property({ type: Boolean, attribute: 'has-rounded-corners' })\n hasRoundedCorners = false;\n\n /**\n * The form name.\n */\n @property()\n name!: string;\n\n /**\n * `true` to show the selected state.\n */\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /**\n * The form value.\n */\n @property()\n value!: string;\n\n updated() {\n if (this._hasSlug) {\n this.setAttribute('slug', '');\n } else {\n this.removeAttribute('slug');\n }\n }\n\n render() {\n const {\n colorScheme,\n hasRoundedCorners: hasRoundedCorners,\n name,\n selected,\n value,\n _inputType: inputType,\n _handleChange: handleChange,\n _hasSlug: hasSlug,\n } = this;\n const classes = classMap({\n [`${prefix}--tile`]: true,\n [`${prefix}--tile--selectable`]: true,\n [`${prefix}--tile--is-selected`]: selected,\n [`${prefix}--tile--${colorScheme}`]: colorScheme,\n [`${prefix}--tile--slug-rounded`]: hasSlug && hasRoundedCorners,\n });\n return html`\n <input\n type=\"${inputType}\"\n id=\"input\"\n class=\"${prefix}--tile-input\"\n tabindex=\"-1\"\n name=\"${ifDefined(name)}\"\n value=\"${ifDefined(value)}\"\n .checked=${selected}\n @change=${handleChange} />\n <label for=\"input\" class=\"${classes}\" tabindex=\"0\">\n <div\n class=\"${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent\">\n ${this._renderIcon()}\n </div>\n <div class=\"${prefix}--tile-content\"><slot></slot></div>\n </label>\n <slot name=\"slug\" @slotchange=\"${this._handleSlotChange}\"></slot>\n `;\n }\n\n /**\n * A selector that will return the slug item.\n */\n static get slugItem() {\n return `${prefix}-slug`;\n }\n\n /**\n * The name of the custom event fired after this selectable tile changes its selected state.\n */\n static get eventChange() {\n return `${prefix}-selectable-tile-changed`;\n }\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n static styles = styles;\n}\n\nexport default CDSSelectableTile;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,QAAQ,QAAQ,6BAA6B;AACtD,SAASC,UAAU,EAAEC,IAAI,EAAEC,GAAG,QAAQ,KAAK;AAC3C,SAASC,QAAQ,EAAEC,KAAK,QAAQ,mBAAmB;AACnD,SAASC,SAAS,QAAQ,8BAA8B;AACxD,OAAOC,UAAU,MAAM,yBAA+B;AACtD,OAAOC,uBAAuB,MAAM,0CAAgD;AACpF,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,UAAU,MAAM,4BAA4B;AACnD,OAAOC,iBAAiB,MAAM,oCAAoC;AAClE,SAASC,iBAAiB,QAAQ,QAAQ;AAC1C,OAAOC,MAAM,MAAM,iBAAa;AAChC,OAAOC,YAAY,MAAM,wCAAwC;AACjE,SAASC,aAAa,IAAIC,aAAa,QAAQ,yCAAyC;;AAExF;AACA;AACA;AACA;AACA;AACA;AALA,IAOMC,iBAAiB,GAAAC,SAAA,EADtBF,aAAa,CAAC,GAAGP,MAAM,kBAAkB,CAAC,aAAAU,WAAA,EAAAC,kBAAA;EAA3C,MACMH,iBAAiB,SAAAG,kBAAA,CAAmD;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAqM1E;EAAC;IAAAI,CAAA,EArMKN,iBAAiB;IAAAO,CAAA;MAAAC,IAAA;MAAAC,UAAA,GACpBrB,KAAK,CAAC,OAAO,CAAC;MAAAsB,GAAA;MAAAC,KAAA;IAAA;MAAAH,IAAA;MAAAE,GAAA;MAAAC,MAAA;QAAA,OAMQ,UAAU;MAAA;IAAA;MAAAH,IAAA;MAAAE,GAAA;MAAAC,MAAA;QAAA,OAKZ,KAAK;MAAA;IAAA;MAAAH,IAAA;MAAAE,GAAA;MAAAC,KAAA;MAR1B;AACF;AACA;;MAGE;AACF;AACA;;MAGE;AACF;AACA;MACE,SAAUC,iBAAiBA,CAAC;QAAEC;MAAc,CAAC,EAAE;QAC7C,MAAMC,UAAU,GAAID,MAAM,CACvBE,aAAa,CAAC,CAAC,CACfC,MAAM,CAAEC,IAAI;UAAA,IAAAC,iBAAA;UAAA,OACVD,IAAI,CAAiBE,OAAO,KAAKC,SAAS,GACtCH,IAAI,CAAiBE,OAAO,EAAAD,iBAAA,GAC1B,IAAI,CAACd,WAAW,cAAAc,iBAAA,uBAAjBA,iBAAA,CAAgDG,QAClD,CAAC,GACD,KAAK;QAAA,CACX,CAAC;QACH,IAAIP,UAAU,CAACQ,MAAM,GAAG,CAAC,EAAE;UACzB,IAAI,CAACC,QAAQ,GAAGC,OAAO,CAACV,UAAU,CAAC;UAClCA,UAAU,CAAC,CAAC,CAAC,CAAiBW,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC;QAC3D;QACA,IAAI,CAACC,aAAa,CAAC,CAAC;MACtB;;MAEA;AACF;AACA;IAFE;MAAAlB,IAAA;MAAAE,GAAA;MAAAC,KAAA,EAGA,SAAUgB,aAAaA,CAAA,EAAG;QACxB,IAAI,CAACC,QAAQ,GAAG,IAAI,CAACC,UAAU,CAACC,OAAO;QAEvC,MAAMF,QAAQ,GAAG,IAAI,CAACA,QAAQ;QAC9B,MAAM;UAAEG;QAAY,CAAC,GAAG,IAAI,CAAC3B,WAAuC;QACpE,IAAI,CAAC4B,aAAa,CAChB,IAAIC,WAAW,CAACF,WAAW,EAAE;UAC3BG,OAAO,EAAE,IAAI;UACbC,QAAQ,EAAE,IAAI;UACdC,MAAM,EAAE;YACNR;UACF;QACF,CAAC,CACH,CAAC;MACH;;MAEA;AACF;AACA;IAFE;MAAApB,IAAA;MAAAE,GAAA;MAAAC,KAAA,EAGA,SAAU0B,WAAWA,CAAA,EAAG;QACtB,MAAM;UAAET,QAAQ;UAAEU;QAAe,CAAC,GAAG,IAAI;QAEzC,OAAOrD,IAAI,CAAAsD,EAAA,KAAAA,EAAA,GAAAC,CAAA,UAAIZ,QAAQ,GACnBrC,uBAAuB,CAAC;UACtBkD,QAAQ,EAAE,CAACH,cAAc,GACrBlB,SAAS,GACTlC,GAAG,CAAAwD,GAAA,KAAAA,GAAA,GAAAF,CAAA,wBAAUF,cAAc;QACjC,CAAC,CAAC,GACFhD,UAAU,CAAC;UACTmD,QAAQ,EAAE,CAACH,cAAc,GACrBlB,SAAS,GACTlC,GAAG,CAAAyD,GAAA,KAAAA,GAAA,GAAAH,CAAA,wBAAUF,cAAc;QACjC,CAAC,CAAC;MACR;;MAEA;AACF;AACA;AACA;AACA;IAJE;MAAA9B,IAAA;MAAAC,UAAA,GAKCZ,YAAY,CAAC,SAAS,CAAC;MAAAa,GAAA;MAAAC,MAAA;QAAA,OAEEiC,KAAoB,IAAK;UAAA,IAAAC,aAAA;UACjD,MAAM;YAAEnC;UAAI,CAAC,GAAGkC,KAAK;UAErB,IACElC,GAAG,KAAK,GAAG,IACVA,GAAG,KAAK,OAAO,IACd,GAAAmC,aAAA,GAAED,KAAK,CAAC/B,MAAM,cAAAgC,aAAA,eAAbA,aAAA,CAA+B1B,OAAO,CACpC,IAAI,CAACf,WAAW,CAA8BiB,QACjD,CAAC,CAAC,EACJ;YACA,IAAI,CAACO,QAAQ,GAAG,CAAC,IAAI,CAACA,QAAQ;UAChC;QACF,CAAC;MAAA;IAAA;MAAApB,IAAA;MAAAC,UAAA,GAKAtB,QAAQ,CAAC;QAAE2D,SAAS,EAAE;MAAkB,CAAC,CAAC;MAAApC,GAAA;MAAAC,KAAA;IAAA;MAAAH,IAAA;MAAAC,UAAA,GAM1CtB,QAAQ,CAAC;QAAE2D,SAAS,EAAE,cAAc;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAAArC,GAAA;MAAAC,MAAA;QAAA,OACzChB,iBAAiB,CAACqD,OAAO;MAAA;IAAA;MAAAxC,IAAA;MAAAC,UAAA,GAMtCtB,QAAQ,CAAC;QAAE8D,IAAI,EAAEzB,OAAO;QAAEsB,SAAS,EAAE;MAAsB,CAAC,CAAC;MAAApC,GAAA;MAAAC,MAAA;QAAA,OAC1C,KAAK;MAAA;IAAA;MAAAH,IAAA;MAAAC,UAAA,GAKxBtB,QAAQ,CAAC,CAAC;MAAAuB,GAAA;MAAAC,KAAA;IAAA;MAAAH,IAAA;MAAAC,UAAA,GAMVtB,QAAQ,CAAC;QAAE8D,IAAI,EAAEzB,OAAO;QAAEuB,OAAO,EAAE;MAAK,CAAC,CAAC;MAAArC,GAAA;MAAAC,MAAA;QAAA,OAChC,KAAK;MAAA;IAAA;MAAAH,IAAA;MAAAC,UAAA,GAKftB,QAAQ,CAAC,CAAC;MAAAuB,GAAA;MAAAC,KAAA;IAAA;MAAAH,IAAA;MAAAE,GAAA;MAAAC,KAAA;MAlCX;AACF;AACA;MAIE;AACF;AACA;MAIE;AACF;AACA;AACA;MAIE;AACF;AACA;MAIE;AACF;AACA;MAIE;AACF;AACA;MAIE,SAAAuC,OAAOA,CAAA,EAAG;QACR,IAAI,IAAI,CAAC3B,QAAQ,EAAE;UACjB,IAAI,CAACE,YAAY,CAAC,MAAM,EAAE,EAAE,CAAC;QAC/B,CAAC,MAAM;UACL,IAAI,CAAC0B,eAAe,CAAC,MAAM,CAAC;QAC9B;MACF;IAAC;MAAA3C,IAAA;MAAAE,GAAA;MAAAC,KAAA,EAED,SAAAyC,MAAMA,CAAA,EAAG;QACP,MAAM;UACJC,WAAW;UACXC,iBAAiB,EAAEA,iBAAiB;UACpCC,IAAI;UACJ3B,QAAQ;UACRjB,KAAK;UACL6C,UAAU,EAAEC,SAAS;UACrB9B,aAAa,EAAE+B,YAAY;UAC3BnC,QAAQ,EAAEoC;QACZ,CAAC,GAAG,IAAI;QACR,MAAMC,OAAO,GAAG7E,QAAQ,CAAC;UACvB,CAAC,GAAGS,MAAM,QAAQ,GAAG,IAAI;UACzB,CAAC,GAAGA,MAAM,oBAAoB,GAAG,IAAI;UACrC,CAAC,GAAGA,MAAM,qBAAqB,GAAGoC,QAAQ;UAC1C,CAAC,GAAGpC,MAAM,WAAW6D,WAAW,EAAE,GAAGA,WAAW;UAChD,CAAC,GAAG7D,MAAM,sBAAsB,GAAGmE,OAAO,IAAIL;QAChD,CAAC,CAAC;QACF,OAAOrE,IAAI,CAAA4E,GAAA,KAAAA,GAAA,GAAArB,CAAA;AACf;AACA,gBAFe;AACf;AACA,iBAFe;AACf;AACA,gBAFe;AACf,iBADe;AACf,mBADe;AACf,kBADe;AACf,kCADe;AACf;AACA,mBAFe;AACf,YADe;AACf;AACA,sBAFe;AACf;AACA,uCAFe;AACf,KADe,GAECiB,SAAS,EAERjE,MAAM,EAEPH,SAAS,CAACkE,IAAI,CAAC,EACdlE,SAAS,CAACsB,KAAK,CAAC,EACdiB,QAAQ,EACT8B,YAAY,EACIE,OAAO,EAEtBpE,MAAM,EAAqBA,MAAM,EACxC,IAAI,CAAC6C,WAAW,CAAC,CAAC,EAER7C,MAAM,EAEW,IAAI,CAACoB,iBAAiB;MAE3D;;MAEA;AACF;AACA;IAFE;MAAAJ,IAAA;MAAAsD,MAAA;MAAApD,GAAA;MAAAC,KAAA,EAGA,SAAAA,CAAA,EAAsB;QACpB,OAAO,GAAGnB,MAAM,OAAO;MACzB;;MAEA;AACF;AACA;IAFE;MAAAgB,IAAA;MAAAsD,MAAA;MAAApD,GAAA;MAAAC,KAAA,EAGA,SAAAA,CAAA,EAAyB;QACvB,OAAO,GAAGnB,MAAM,0BAA0B;MAC5C;IAAC;MAAAgB,IAAA;MAAAsD,MAAA;MAAApD,GAAA;MAAAC,MAAA;QAAA,OAAAoD,aAAA,CAAAA,aAAA,KAGI/E,UAAU,CAACgF,iBAAiB;UAC/BC,cAAc,EAAE;QAAI;MAAA;IAAA;MAAAzD,IAAA;MAAAsD,MAAA;MAAApD,GAAA;MAAAC,MAAA;QAAA,OAGNf,MAAM;MAAA;IAAA;EAAA;AAAA,GApMQF,iBAAiB,CAACD,UAAU,CAACT,UAAU,CAAC,CAAC;AAuMzE,eAAegB,iBAAiB","ignoreList":[]}
|
|
@@ -337,7 +337,7 @@ let CDSTileGroup = _decorate([customElement(`${prefix}-tile-group`)], function (
|
|
|
337
337
|
kind: "get",
|
|
338
338
|
static: true,
|
|
339
339
|
key: "selectorRadioTile",
|
|
340
|
-
value: function
|
|
340
|
+
value: function () {
|
|
341
341
|
return `${prefix}-radio-tile`;
|
|
342
342
|
}
|
|
343
343
|
|
|
@@ -348,7 +348,7 @@ let CDSTileGroup = _decorate([customElement(`${prefix}-tile-group`)], function (
|
|
|
348
348
|
kind: "get",
|
|
349
349
|
static: true,
|
|
350
350
|
key: "selectorSelectableTile",
|
|
351
|
-
value: function
|
|
351
|
+
value: function () {
|
|
352
352
|
return `${prefix}-selectable-tile`;
|
|
353
353
|
}
|
|
354
354
|
|
|
@@ -359,7 +359,7 @@ let CDSTileGroup = _decorate([customElement(`${prefix}-tile-group`)], function (
|
|
|
359
359
|
kind: "get",
|
|
360
360
|
static: true,
|
|
361
361
|
key: "eventCurrentRadioTileSelection",
|
|
362
|
-
value: function
|
|
362
|
+
value: function () {
|
|
363
363
|
return `${prefix}-current-radio-tile-selection`;
|
|
364
364
|
}
|
|
365
365
|
|
|
@@ -370,7 +370,7 @@ let CDSTileGroup = _decorate([customElement(`${prefix}-tile-group`)], function (
|
|
|
370
370
|
kind: "get",
|
|
371
371
|
static: true,
|
|
372
372
|
key: "eventCurrentSelectableTilesSelection",
|
|
373
|
-
value: function
|
|
373
|
+
value: function () {
|
|
374
374
|
return `${prefix}-current-selectable-tile-selections`;
|
|
375
375
|
}
|
|
376
376
|
}, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tile-group.js","names":["LitElement","html","property","prefix","NAVIGATION_DIRECTION","HostListener","HostListenerMixin","styles","carbonElement","customElement","navigationDirectionForKey","ArrowUp","BACKWARD","Up","ArrowDown","FORWARD","Down","CDSTileGroup","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","key","value","_handleRadioClick","event","target","currentRadioSelection","eventCurrentRadioTileSelection","toggleAttribute","dispatchEvent","CustomEvent","bubbles","composed","detail","_handleSelectableClick","currentSelections","eventCurrentSelectableTilesSelection","includes","push","splice","indexOf","stopPropagation","preventDefault","decorators","_handleTileSelect","radioTiles","length","_handleKeydownRadio","nextSibling","focus","_handleKeydownSelectable","selectableTiles","navigationDirection","tiles","currentIndex","findIndex","e","nextIndex","relatedTarget","matches","selectorRadioTile","reflect","attribute","type","Boolean","firstUpdated","hasAttribute","setAttribute","querySelectorAll","selectorSelectableTile","disabled","forEach","render","fieldsetClassName","_t","_","static"],"sources":["components/tile/tile-group.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { NAVIGATION_DIRECTION } from '../../globals/internal/radio-group-manager';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport styles from './tile.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Map of navigation direction by key.\n */\nconst navigationDirectionForKey = {\n ArrowUp: NAVIGATION_DIRECTION.BACKWARD,\n Up: NAVIGATION_DIRECTION.BACKWARD, // IE\n ArrowDown: NAVIGATION_DIRECTION.FORWARD,\n Down: NAVIGATION_DIRECTION.FORWARD, // IE\n};\n\n/**\n * Tile group.\n *\n * @element cds-tile-group\n * @fires cds-current-radio-tile-selection\n * The name of the custom event fired after a radio tile changes its selected state.\n * @fires cds-current-selectable-tile-selections\n * The name of the custom event fired after a selectable tile changes its selected state.\n */\n@customElement(`${prefix}-tile-group`)\nclass CDSTileGroup extends HostListenerMixin(LitElement) {\n private _handleRadioClick(event) {\n const { target } = event;\n const { currentRadioSelection } = this;\n const { eventCurrentRadioTileSelection } = this\n .constructor as typeof CDSTileGroup;\n\n if (!currentRadioSelection) {\n this.currentRadioSelection = target;\n } else if (currentRadioSelection !== target) {\n currentRadioSelection.toggleAttribute('selected');\n this.currentRadioSelection = target;\n }\n\n this.dispatchEvent(\n new CustomEvent(eventCurrentRadioTileSelection, {\n bubbles: true,\n composed: true,\n detail: {\n target,\n },\n })\n );\n }\n\n private _handleSelectableClick(event) {\n const { target } = event;\n const { currentSelections } = this;\n const { eventCurrentSelectableTilesSelection } = this\n .constructor as typeof CDSTileGroup;\n\n if (!currentSelections.includes(target)) {\n currentSelections.push(target);\n } else {\n currentSelections.splice(currentSelections.indexOf(target), 1);\n }\n (target as HTMLElement).toggleAttribute('selected');\n\n this.dispatchEvent(\n new CustomEvent(eventCurrentSelectableTilesSelection, {\n bubbles: true,\n composed: true,\n detail: {\n currentSelections,\n },\n })\n );\n event.stopPropagation();\n event.preventDefault();\n }\n\n /**\n * Click listener to ensure selectability.\n *\n * @param event click\n */\n @HostListener('click')\n // @ts-ignore\n private _handleTileSelect(event: Event) {\n if (this.radioTiles.length) {\n this._handleRadioClick(event);\n } else {\n this._handleSelectableClick(event);\n }\n }\n\n /**\n * Handle keyboard navigation for radio tiles\n *\n * @param nextSibling to focus on\n */\n private _handleKeydownRadio(nextSibling) {\n const { currentRadioSelection } = this;\n\n const { eventCurrentRadioTileSelection } = this\n .constructor as typeof CDSTileGroup;\n\n if (currentRadioSelection) {\n currentRadioSelection.toggleAttribute('selected');\n }\n nextSibling.focus();\n nextSibling.toggleAttribute('selected');\n this.currentRadioSelection = nextSibling;\n\n this.dispatchEvent(\n new CustomEvent(eventCurrentRadioTileSelection, {\n bubbles: true,\n composed: true,\n detail: {\n nextSibling,\n },\n })\n );\n }\n\n /**\n * Handle keyboard navigation for selectable tiles\n *\n * @param event to get target\n * @param nextSibling to focus on\n */\n private _handleKeydownSelectable(event, nextSibling?) {\n const { target } = event;\n const { currentSelections } = this;\n const { eventCurrentSelectableTilesSelection } = this\n .constructor as typeof CDSTileGroup;\n\n if (nextSibling) {\n nextSibling.focus();\n } else {\n if (!currentSelections.includes(target)) {\n currentSelections.push(target);\n } else {\n currentSelections.splice(currentSelections.indexOf(target), 1);\n }\n\n this.dispatchEvent(\n new CustomEvent(eventCurrentSelectableTilesSelection, {\n bubbles: true,\n composed: true,\n detail: {\n currentSelections,\n },\n })\n );\n }\n }\n\n /**\n * Keyboard listener to ensure keyboard navigation.\n *\n * @param event to get key pressed\n */\n @HostListener('keydown')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleKeydown = (event: KeyboardEvent) => {\n const { target, key } = event;\n const { radioTiles, selectableTiles } = this;\n const navigationDirection = navigationDirectionForKey[key];\n\n const tiles = radioTiles.length ? radioTiles : selectableTiles;\n const currentIndex = [...tiles].findIndex((e) => e == target);\n const nextIndex = currentIndex + navigationDirection;\n const nextSibling =\n nextIndex !== -1\n ? tiles[nextIndex % tiles.length]\n : tiles[tiles.length - 1];\n\n if (navigationDirection) {\n event.preventDefault(); // Prevent default (scrolling) behavior\n\n if (this.radioTiles.length) {\n this._handleKeydownRadio(nextSibling);\n } else {\n this._handleKeydownSelectable(event, nextSibling);\n }\n } else if (key === ' ' || key === 'Enter') {\n this._handleKeydownSelectable(event);\n }\n };\n\n /**\n * Focus listener to focus on selected element upon focusing\n *\n * @param event to get focused\n */\n @HostListener('focusin')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleFocus = (event: KeyboardEvent) => {\n const { relatedTarget, target } = event as any;\n\n if (this.radioTiles.length) {\n if (!this.currentRadioSelection) {\n target.toggleAttribute('selected');\n this.currentRadioSelection = target;\n } else if (\n !relatedTarget?.matches(\n (this.constructor as typeof CDSTileGroup).selectorRadioTile\n ) &&\n target !== this.currentRadioSelection\n ) {\n this.currentRadioSelection.focus();\n }\n }\n };\n\n /**\n * Provide an optional className to be applied to the component\n */\n @property({ reflect: true, attribute: 'fieldset-class-name' })\n fieldsetClassName;\n\n /**\n * Specify whether the group is disabled\n */\n @property({ reflect: true, type: Boolean })\n disabled;\n\n @property()\n currentRadioSelection;\n\n @property()\n currentSelections = [] as any;\n\n @property()\n radioTiles;\n\n @property()\n selectableTiles;\n\n firstUpdated() {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'group');\n }\n\n if (!this.radioTiles) {\n this.radioTiles = this.querySelectorAll(\n (this.constructor as typeof CDSTileGroup).selectorRadioTile\n );\n }\n\n if (!this.selectableTiles) {\n this.selectableTiles = this.querySelectorAll(\n (this.constructor as typeof CDSTileGroup).selectorSelectableTile\n );\n }\n\n if (this.disabled) {\n this.radioTiles.forEach((e) => e.toggleAttribute('disabled'));\n this.selectableTiles.forEach((e) => e.toggleAttribute('disabled'));\n }\n }\n\n render() {\n const { fieldsetClassName, disabled } = this;\n return html`\n <fieldset class=\"${fieldsetClassName}\" ?disabled=${disabled}>\n <slot name=\"legend\" class=\"${prefix}--label\"></slot>\n <slot></slot>\n </fieldset>\n `;\n }\n\n /**\n * A selector that selects a radio tile component.\n */\n static get selectorRadioTile() {\n return `${prefix}-radio-tile`;\n }\n\n /**\n * A selector that selects a selectable tile component.\n */\n static get selectorSelectableTile() {\n return `${prefix}-selectable-tile`;\n }\n\n /**\n * The name of the custom event fired after a radio tile changes its selected state.\n */\n static get eventCurrentRadioTileSelection() {\n return `${prefix}-current-radio-tile-selection`;\n }\n\n /**\n * The name of the custom event fired after a radio tile changes its selected state.\n */\n static get eventCurrentSelectableTilesSelection() {\n return `${prefix}-current-selectable-tile-selections`;\n }\n\n static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSTileGroup;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"tile-group.js","names":["LitElement","html","property","prefix","NAVIGATION_DIRECTION","HostListener","HostListenerMixin","styles","carbonElement","customElement","navigationDirectionForKey","ArrowUp","BACKWARD","Up","ArrowDown","FORWARD","Down","CDSTileGroup","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","key","value","_handleRadioClick","event","target","currentRadioSelection","eventCurrentRadioTileSelection","toggleAttribute","dispatchEvent","CustomEvent","bubbles","composed","detail","_handleSelectableClick","currentSelections","eventCurrentSelectableTilesSelection","includes","push","splice","indexOf","stopPropagation","preventDefault","decorators","_handleTileSelect","radioTiles","length","_handleKeydownRadio","nextSibling","focus","_handleKeydownSelectable","selectableTiles","navigationDirection","tiles","currentIndex","findIndex","e","nextIndex","relatedTarget","matches","selectorRadioTile","reflect","attribute","type","Boolean","firstUpdated","hasAttribute","setAttribute","querySelectorAll","selectorSelectableTile","disabled","forEach","render","fieldsetClassName","_t","_","static"],"sources":["components/tile/tile-group.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { NAVIGATION_DIRECTION } from '../../globals/internal/radio-group-manager';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport styles from './tile.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Map of navigation direction by key.\n */\nconst navigationDirectionForKey = {\n ArrowUp: NAVIGATION_DIRECTION.BACKWARD,\n Up: NAVIGATION_DIRECTION.BACKWARD, // IE\n ArrowDown: NAVIGATION_DIRECTION.FORWARD,\n Down: NAVIGATION_DIRECTION.FORWARD, // IE\n};\n\n/**\n * Tile group.\n *\n * @element cds-tile-group\n * @fires cds-current-radio-tile-selection\n * The name of the custom event fired after a radio tile changes its selected state.\n * @fires cds-current-selectable-tile-selections\n * The name of the custom event fired after a selectable tile changes its selected state.\n */\n@customElement(`${prefix}-tile-group`)\nclass CDSTileGroup extends HostListenerMixin(LitElement) {\n private _handleRadioClick(event) {\n const { target } = event;\n const { currentRadioSelection } = this;\n const { eventCurrentRadioTileSelection } = this\n .constructor as typeof CDSTileGroup;\n\n if (!currentRadioSelection) {\n this.currentRadioSelection = target;\n } else if (currentRadioSelection !== target) {\n currentRadioSelection.toggleAttribute('selected');\n this.currentRadioSelection = target;\n }\n\n this.dispatchEvent(\n new CustomEvent(eventCurrentRadioTileSelection, {\n bubbles: true,\n composed: true,\n detail: {\n target,\n },\n })\n );\n }\n\n private _handleSelectableClick(event) {\n const { target } = event;\n const { currentSelections } = this;\n const { eventCurrentSelectableTilesSelection } = this\n .constructor as typeof CDSTileGroup;\n\n if (!currentSelections.includes(target)) {\n currentSelections.push(target);\n } else {\n currentSelections.splice(currentSelections.indexOf(target), 1);\n }\n (target as HTMLElement).toggleAttribute('selected');\n\n this.dispatchEvent(\n new CustomEvent(eventCurrentSelectableTilesSelection, {\n bubbles: true,\n composed: true,\n detail: {\n currentSelections,\n },\n })\n );\n event.stopPropagation();\n event.preventDefault();\n }\n\n /**\n * Click listener to ensure selectability.\n *\n * @param event click\n */\n @HostListener('click')\n // @ts-ignore\n private _handleTileSelect(event: Event) {\n if (this.radioTiles.length) {\n this._handleRadioClick(event);\n } else {\n this._handleSelectableClick(event);\n }\n }\n\n /**\n * Handle keyboard navigation for radio tiles\n *\n * @param nextSibling to focus on\n */\n private _handleKeydownRadio(nextSibling) {\n const { currentRadioSelection } = this;\n\n const { eventCurrentRadioTileSelection } = this\n .constructor as typeof CDSTileGroup;\n\n if (currentRadioSelection) {\n currentRadioSelection.toggleAttribute('selected');\n }\n nextSibling.focus();\n nextSibling.toggleAttribute('selected');\n this.currentRadioSelection = nextSibling;\n\n this.dispatchEvent(\n new CustomEvent(eventCurrentRadioTileSelection, {\n bubbles: true,\n composed: true,\n detail: {\n nextSibling,\n },\n })\n );\n }\n\n /**\n * Handle keyboard navigation for selectable tiles\n *\n * @param event to get target\n * @param nextSibling to focus on\n */\n private _handleKeydownSelectable(event, nextSibling?) {\n const { target } = event;\n const { currentSelections } = this;\n const { eventCurrentSelectableTilesSelection } = this\n .constructor as typeof CDSTileGroup;\n\n if (nextSibling) {\n nextSibling.focus();\n } else {\n if (!currentSelections.includes(target)) {\n currentSelections.push(target);\n } else {\n currentSelections.splice(currentSelections.indexOf(target), 1);\n }\n\n this.dispatchEvent(\n new CustomEvent(eventCurrentSelectableTilesSelection, {\n bubbles: true,\n composed: true,\n detail: {\n currentSelections,\n },\n })\n );\n }\n }\n\n /**\n * Keyboard listener to ensure keyboard navigation.\n *\n * @param event to get key pressed\n */\n @HostListener('keydown')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleKeydown = (event: KeyboardEvent) => {\n const { target, key } = event;\n const { radioTiles, selectableTiles } = this;\n const navigationDirection = navigationDirectionForKey[key];\n\n const tiles = radioTiles.length ? radioTiles : selectableTiles;\n const currentIndex = [...tiles].findIndex((e) => e == target);\n const nextIndex = currentIndex + navigationDirection;\n const nextSibling =\n nextIndex !== -1\n ? tiles[nextIndex % tiles.length]\n : tiles[tiles.length - 1];\n\n if (navigationDirection) {\n event.preventDefault(); // Prevent default (scrolling) behavior\n\n if (this.radioTiles.length) {\n this._handleKeydownRadio(nextSibling);\n } else {\n this._handleKeydownSelectable(event, nextSibling);\n }\n } else if (key === ' ' || key === 'Enter') {\n this._handleKeydownSelectable(event);\n }\n };\n\n /**\n * Focus listener to focus on selected element upon focusing\n *\n * @param event to get focused\n */\n @HostListener('focusin')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleFocus = (event: KeyboardEvent) => {\n const { relatedTarget, target } = event as any;\n\n if (this.radioTiles.length) {\n if (!this.currentRadioSelection) {\n target.toggleAttribute('selected');\n this.currentRadioSelection = target;\n } else if (\n !relatedTarget?.matches(\n (this.constructor as typeof CDSTileGroup).selectorRadioTile\n ) &&\n target !== this.currentRadioSelection\n ) {\n this.currentRadioSelection.focus();\n }\n }\n };\n\n /**\n * Provide an optional className to be applied to the component\n */\n @property({ reflect: true, attribute: 'fieldset-class-name' })\n fieldsetClassName;\n\n /**\n * Specify whether the group is disabled\n */\n @property({ reflect: true, type: Boolean })\n disabled;\n\n @property()\n currentRadioSelection;\n\n @property()\n currentSelections = [] as any;\n\n @property()\n radioTiles;\n\n @property()\n selectableTiles;\n\n firstUpdated() {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'group');\n }\n\n if (!this.radioTiles) {\n this.radioTiles = this.querySelectorAll(\n (this.constructor as typeof CDSTileGroup).selectorRadioTile\n );\n }\n\n if (!this.selectableTiles) {\n this.selectableTiles = this.querySelectorAll(\n (this.constructor as typeof CDSTileGroup).selectorSelectableTile\n );\n }\n\n if (this.disabled) {\n this.radioTiles.forEach((e) => e.toggleAttribute('disabled'));\n this.selectableTiles.forEach((e) => e.toggleAttribute('disabled'));\n }\n }\n\n render() {\n const { fieldsetClassName, disabled } = this;\n return html`\n <fieldset class=\"${fieldsetClassName}\" ?disabled=${disabled}>\n <slot name=\"legend\" class=\"${prefix}--label\"></slot>\n <slot></slot>\n </fieldset>\n `;\n }\n\n /**\n * A selector that selects a radio tile component.\n */\n static get selectorRadioTile() {\n return `${prefix}-radio-tile`;\n }\n\n /**\n * A selector that selects a selectable tile component.\n */\n static get selectorSelectableTile() {\n return `${prefix}-selectable-tile`;\n }\n\n /**\n * The name of the custom event fired after a radio tile changes its selected state.\n */\n static get eventCurrentRadioTileSelection() {\n return `${prefix}-current-radio-tile-selection`;\n }\n\n /**\n * The name of the custom event fired after a radio tile changes its selected state.\n */\n static get eventCurrentSelectableTilesSelection() {\n return `${prefix}-current-selectable-tile-selections`;\n }\n\n static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSTileGroup;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -8,5 +8,5 @@
|
|
|
8
8
|
*/
|
|
9
9
|
import { css } from 'lit';
|
|
10
10
|
export default css([
|
|
11
|
-
":root{--cds-layer:var(--cds-layer-01, #f4f4f4);--cds-layer-active:var(--cds-layer-active-01, #c6c6c6);--cds-layer-hover:var(--cds-layer-hover-01, #e8e8e8);--cds-layer-selected:var(--cds-layer-selected-01, #e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-01, #d1d1d1);--cds-layer-accent:var(--cds-layer-accent-01, #e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-01, #d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-01, #a8a8a8);--cds-field:var(--cds-field-01, #f4f4f4);--cds-field-hover:var(--cds-field-hover-01, #e8e8e8);--cds-border-subtle:var(--cds-border-subtle-00, #e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-01, #c6c6c6);--cds-border-strong:var(--cds-border-strong-01, #8d8d8d);--cds-border-tile:var(--cds-border-tile-01, #c6c6c6)}.cds--layer-one{--cds-layer:var(--cds-layer-01, #f4f4f4);--cds-layer-active:var(--cds-layer-active-01, #c6c6c6);--cds-layer-hover:var(--cds-layer-hover-01, #e8e8e8);--cds-layer-selected:var(--cds-layer-selected-01, #e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-01, #d1d1d1);--cds-layer-accent:var(--cds-layer-accent-01, #e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-01, #d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-01, #a8a8a8);--cds-field:var(--cds-field-01, #f4f4f4);--cds-field-hover:var(--cds-field-hover-01, #e8e8e8);--cds-border-subtle:var(--cds-border-subtle-00, #e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-01, #c6c6c6);--cds-border-strong:var(--cds-border-strong-01, #8d8d8d);--cds-border-tile:var(--cds-border-tile-01, #c6c6c6)}.cds--layer-two{--cds-layer:var(--cds-layer-02, #ffffff);--cds-layer-active:var(--cds-layer-active-02, #c6c6c6);--cds-layer-hover:var(--cds-layer-hover-02, #e8e8e8);--cds-layer-selected:var(--cds-layer-selected-02, #e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-02, #d1d1d1);--cds-layer-accent:var(--cds-layer-accent-02, #e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-02, #d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-02, #a8a8a8);--cds-field:var(--cds-field-02, #ffffff);--cds-field-hover:var(--cds-field-hover-02, #e8e8e8);--cds-border-subtle:var(--cds-border-subtle-01, #c6c6c6);--cds-border-subtle-selected:var(--cds-border-subtle-selected-02, #c6c6c6);--cds-border-strong:var(--cds-border-strong-02, #8d8d8d);--cds-border-tile:var(--cds-border-tile-02, #a8a8a8)}.cds--layer-three{--cds-layer:var(--cds-layer-03, #f4f4f4);--cds-layer-active:var(--cds-layer-active-03, #c6c6c6);--cds-layer-hover:var(--cds-layer-hover-03, #e8e8e8);--cds-layer-selected:var(--cds-layer-selected-03, #e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-03, #d1d1d1);--cds-layer-accent:var(--cds-layer-accent-03, #e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-03, #d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-03, #a8a8a8);--cds-field:var(--cds-field-03, #f4f4f4);--cds-field-hover:var(--cds-field-hover-03, #e8e8e8);--cds-border-subtle:var(--cds-border-subtle-02, #e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-03, #c6c6c6);--cds-border-strong:var(--cds-border-strong-03, #8d8d8d);--cds-border-tile:var(--cds-border-tile-03, #c6c6c6)}.cds--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;padding:0;border:0;margin:-1px;block-size:1px;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.cds--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs, 1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem))}.cds--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs, 1.5rem)}.cds--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs, 1.5rem)}.cds--layout--size-sm{--cds-layout-size-height-context:var(--cds-layout-size-height-sm, 2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem))}.cds--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm, 2rem)}.cds--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm, 2rem)}.cds--layout--size-md{--cds-layout-size-height-context:var(--cds-layout-size-height-md, 2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem))}.cds--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md, 2.5rem)}.cds--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md, 2.5rem)}.cds--layout--size-lg{--cds-layout-size-height-context:var(--cds-layout-size-height-lg, 3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem))}.cds--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg, 3rem)}.cds--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg, 3rem)}.cds--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl, 4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem))}.cds--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl, 4rem)}.cds--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl, 4rem)}.cds--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl, 5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem))}.cds--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl, 5rem)}.cds--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl, 5rem)}.cds--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed, 0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem))}.cds--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed, 0.5rem)}.cds--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed, 0.5rem)}.cds--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal, 1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem))}.cds--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal, 1rem)}.cds--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal, 1rem)}:root{--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}.cds--tile-group html,:host(cds-tile-group) html{font-size:100%}.cds--tile-group body,:host(cds-tile-group) body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--tile-group code,:host(cds-tile-group) code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--tile-group strong,:host(cds-tile-group) strong{font-weight:600}.cds--tile,:host(cds-expandable-tile),:host(cds-tile){font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);--cds-layout-density-padding-inline-local:clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));position:relative;display:block;padding:var(--cds-layout-density-padding-inline-local);background-color:var(--cds-layer);min-block-size:4rem;min-inline-size:8rem;outline:2px solid transparent;outline-offset:-2px}.cds--tile:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--tile:focus{outline-style:dotted}}.cds--tile--light,:host(cds-expandable-tile[color-scheme=light]),:host(cds-tile[color-scheme=light]){background-color:var(--cds-layer-02,#fff)}.cds--tile--clickable,.cds--tile--selectable,:host(cds-clickable-tile) .cds--tile--clickable{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);padding:var(--cds-layout-density-padding-inline-local);cursor:pointer;transition:150ms cubic-bezier(.2,0,.38,.9)}.cds--tile--clickable *,.cds--tile--clickable ::after,.cds--tile--clickable ::before,.cds--tile--selectable *,.cds--tile--selectable ::after,.cds--tile--selectable ::before,:host(cds-clickable-tile) .cds--tile--clickable *,:host(cds-clickable-tile) .cds--tile--clickable ::after,:host(cds-clickable-tile) .cds--tile--clickable ::before{box-sizing:inherit}.cds--tile--clickable:hover,.cds--tile--selectable:hover{background:var(--cds-layer-hover)}.cds--tile--clickable,:host(cds-clickable-tile) .cds--tile--clickable{color:var(--cds-text-primary,#161616);text-decoration:none}.cds--tile--clickable:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px;text-decoration:none}@media screen and (prefers-contrast){.cds--tile--clickable:focus{outline-style:dotted}}.cds--tile--clickable:focus .cds--tile__checkmark,.cds--tile--clickable:hover .cds--tile__checkmark{opacity:1}.cds--tile--expandable::-moz-focus-inner{border:0}.cds--tile--clickable:active,.cds--tile--clickable:hover,.cds--tile--clickable:visited,.cds--tile--clickable:visited:hover{color:var(--cds-text-primary,#161616);text-decoration:none}.cds--tile--clickable.cds--link--disabled,.cds--tile--clickable:hover.cds--link--disabled{display:block;padding:var(--cds-layout-density-padding-inline-local);background-color:var(--cds-layer);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds--tile--clickable .cds--tile--icon,.cds--tile--clickable.cds--link--disabled .cds--tile--disabled-icon{position:absolute;inset-block-end:var(--cds-layout-density-padding-inline-local);inset-inline-end:var(--cds-layout-density-padding-inline-local)}.cds--tile--clickable .cds--tile--icon{fill:var(--cds-icon-interactive,#0f62fe)}.cds--tile--clickable.cds--link--disabled .cds--tile--disabled-icon{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--tile--clickable.cds--link--disabled .cds--tile--icon{display:none}.cds--tile--selectable{border:1px solid transparent;padding-inline-end:calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem)}.cds--tile__checkmark{position:absolute;border:none;background:0 0;block-size:1rem;inset-block-start:var(--cds-layout-density-padding-inline-local);inset-inline-end:var(--cds-layout-density-padding-inline-local);transition:110ms cubic-bezier(.2,0,.38,.9);opacity:0}.cds--tile__checkmark svg{border-radius:50%;fill:var(--cds-icon-secondary,#525252)}.cds--tile__checkmark:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--tile__checkmark:focus{outline-style:dotted}}.cds--tile__checkmark--persistent{opacity:1}.cds--tile__chevron,:host(cds-selectable-tile) .cds--tile__chevron{position:absolute;display:flex;align-items:center;justify-content:center;block-size:calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);inline-size:calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);inset-block-end:0;inset-inline-end:0}.cds--tile__chevron svg,:host(cds-selectable-tile) .cds--tile__chevron svg{fill:var(--cds-icon-primary,#161616);transform-origin:center;transition:110ms cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){.cds--tile__chevron svg,:host(cds-selectable-tile) .cds--tile__chevron svg{transition:none}}@media screen and (-ms-high-contrast:active),screen and (prefers-contrast){.cds--tile__chevron svg,:host(cds-selectable-tile) .cds--tile__chevron svg{fill:ButtonText}}.cds--tile__chevron--interactive{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;inline-size:100%;position:absolute;display:flex;align-items:center;justify-content:center;block-size:calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);inline-size:calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);inset-block-end:0;inset-inline-end:0}.cds--tile__chevron--interactive *,.cds--tile__chevron--interactive ::after,.cds--tile__chevron--interactive ::before{box-sizing:inherit}.cds--tile__chevron--interactive::-moz-focus-inner{border:0}.cds--tile__chevron--interactive:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}.cds--tile__chevron--interactive:hover{background-color:var(--cds-layer-hover);cursor:pointer}.cds--tile--expandable,:host(cds-expandable-tile){position:relative;overflow:hidden;border:0;color:inherit;cursor:pointer;font-family:inherit;font-size:inherit;inline-size:100%;text-align:start;transition:max-height 150ms cubic-bezier(.2,0,.38,.9);font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px)}.cds--tile--expandable:hover{background:var(--cds-layer-hover)}.cds--tile--expandable.cds--tile--expandable--interactive{border:none;cursor:default;transition:max-height 150ms cubic-bezier(.2,0,.38,.9)}.cds--tile--expandable.cds--tile--expandable--interactive:hover{background-color:var(--cds-layer)}.cds--tile--expandable.cds--tile--expandable--interactive:focus{outline:0}.cds--tile--expandable--interactive:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--tile--expandable--interactive:focus{outline-style:dotted}}.cds--tile-content__below-the-fold,:host(cds-expandable-tile) ::slotted(cds-tile-below-the-fold-content){display:block;opacity:0;transition:opacity 110ms cubic-bezier(.2,0,.38,.9),visibility 110ms cubic-bezier(.2,0,.38,.9);visibility:hidden}.cds--tile--is-expanded,:host(cds-expandable-tile[expanded]){overflow:visible;transition:max-height 110ms cubic-bezier(.2,0,.38,.9)}.cds--tile--is-expanded .cds--tile__chevron svg,:host(cds-expandable-tile[expanded]) .cds--tile__chevron svg{transform:rotate(180deg)}.cds--tile--is-expanded .cds--tile-content__below-the-fold,:host(cds-expandable-tile) .cds--tile--is-expanded ::slotted(cds-tile-below-the-fold-content),:host(cds-expandable-tile):host(cds-expandable-tile[expanded]) ::slotted(cds-tile-below-the-fold-content),:host(cds-expandable-tile[expanded]) .cds--tile-content__below-the-fold{opacity:1;transition:opacity 110ms cubic-bezier(.2,0,.38,.9),visibility 110ms cubic-bezier(.2,0,.38,.9);visibility:inherit}@media not all and (resolution >= 0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent){.cds--tile--is-expanded .cds--tile-content__below-the-fold,:host(cds-expandable-tile) .cds--tile--is-expanded ::slotted(cds-tile-below-the-fold-content),:host(cds-expandable-tile):host(cds-expandable-tile[expanded]) ::slotted(cds-tile-below-the-fold-content),:host(cds-expandable-tile[expanded]) .cds--tile-content__below-the-fold{overflow-y:auto}}}.cds--tile--is-selected{border:1px solid var(--cds-layer-selected-inverse,#161616)}.cds--tile--is-selected .cds--tile__checkmark{opacity:1}.cds--tile--is-selected .cds--tile__checkmark svg{fill:var(--cds-icon-primary,#161616)}@media screen and (-ms-high-contrast:active),screen and (prefers-contrast){.cds--tile--is-selected .cds--tile__checkmark svg{fill:ButtonText}}.cds--tile-content{block-size:100%;inline-size:100%}.cds--tile-input{position:absolute;overflow:hidden;padding:0;border:0;margin:-1px;block-size:1px;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.cds--tile-input:focus+.cds--tile,.cds--tile-input:focus+:host(cds-expandable-tile),.cds--tile-input:focus+:host(cds-tile){outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--tile-input:focus+.cds--tile,.cds--tile-input:focus+:host(cds-expandable-tile),.cds--tile-input:focus+:host(cds-tile){outline-style:dotted}}.cds--tile--disabled.cds--tile--selectable{background-color:var(--cds-layer);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds--tile--disabled.cds--tile--selectable.cds--tile--light{background-color:var(--cds-layer-02,#fff)}.cds--tile--disabled.cds--tile--is-selected{border-color:var(--cds-border-disabled,#c6c6c6)}.cds--tile--disabled .cds--tile__checkmark svg{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--tile--clickable .cds--tile--slug-icon,.cds--tile--expandable>div>.cds--slug,.cds--tile>.cds--slug,:host(cds-expandable-tile)>.cds--slug,:host(cds-expandable-tile)>div>.cds--slug,:host(cds-tile)>.cds--slug{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}.cds--tile.cds--tile--selectable>.cds--slug{inset-inline-end:2.5rem}.cds--tile.cds--tile--selectable.cds--tile--radio>.cds--slug{inset-inline-end:1rem;transition:inset-inline-end 110ms cubic-bezier(.2,0,.38,.9)}.cds--tile.cds--tile--selectable.cds--tile--radio.cds--tile--is-selected>.cds--slug{inset-inline-end:2.5rem}.cds--tile.cds--tile--clickable>.cds--slug{pointer-events:none}.cds--tile--slug.cds--tile{background:linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)) 0,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,rgba(255,255,255,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) border-box;border:1px solid transparent;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1)),0 4px 8px 0 var(--cds-ai-drop-shadow,rgba(15,98,254,.1))}.cds--tile--slug.cds--tile--expandable:hover{background:linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)) 0,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,rgba(255,255,255,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) border-box}.cds--tile--slug.cds--tile--clickable::before,.cds--tile--slug.cds--tile--selectable::after,.cds--tile--slug.cds--tile--selectable::before{position:absolute;display:block;block-size:100%;content:\"\";inline-size:100%;inset-block-start:0;inset-inline-start:0;opacity:0;transition:opacity 110ms cubic-bezier(.2,0,.38,.9)}.cds--tile--slug.cds--tile--clickable::before,.cds--tile--slug.cds--tile--selectable::before{background:linear-gradient(to top,var(--cds-ai-aura-hover-start,rgba(69,137,255,.32)) 0,15%,var(--cds-ai-aura-hover-end,rgba(255,255,255,0)) 50%) padding-box,linear-gradient(to top,var(--cds-ai-aura-hover-background,#edf5ff),var(--cds-ai-aura-hover-background,#edf5ff)) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-ai-aura-hover-background,#edf5ff),var(--cds-ai-aura-hover-background,#edf5ff)) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1)),0 4px 10px 2px var(--cds-ai-drop-shadow,rgba(15,98,254,.1))}.cds--tile--slug.cds--tile--clickable:hover::before,.cds--tile--slug.cds--tile--selectable:hover::before{opacity:1}.cds--tile--slug.cds--tile--clickable:focus,.cds--tile--slug.cds--tile--selectable:focus,.cds--tile-input:focus+.cds--tile--slug.cds--tile{outline-offset:-1px}.cds--tile--slug.cds--tile--selectable::after{background:linear-gradient(to top,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,rgba(255,255,255,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer),var(--cds-layer)) padding-box,linear-gradient(to bottom,var(--cds-border-inverse,#161616),var(--cds-border-inverse,#161616)) border-box,linear-gradient(to top,var(--cds-layer),var(--cds-layer)) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1)),0 4px 8px 0 var(--cds-ai-drop-shadow,rgba(15,98,254,.1))}.cds--tile--slug.cds--tile--selectable:hover::after{opacity:0}.cds--tile--slug.cds--tile--is-selected::after{opacity:1}.cds--tile--slug.cds--tile--is-selected{border-color:var(--cds-border-inverse,#161616)}.cds--tile--slug.cds--tile--clickable .cds--tile-content,.cds--tile--slug.cds--tile--selectable .cds--tile-content{position:relative;cursor:pointer}.cds--tile--slug.cds--tile--clickable .cds--tile-content,.cds--tile--slug.cds--tile--is-selected .cds--slug,.cds--tile--slug.cds--tile--selectable .cds--tile-content,.cds--tile--slug.cds--tile--selectable>.cds--tile__checkmark{z-index:1}.cds--tile--slug.cds--tile--selectable .cds--slug:has(>.cds--popover--open){z-index:2}.cds--tile--slug.cds--tile--selectable>.cds--slug,.cds--tile--slug.cds--tile--selectable>.cds--tile__checkmark{z-index:1}.cds--tile--expandable:has(.cds--slug>.cds--popover--open),:has(.cds--slug>.cds--popover--open):host(cds-expandable-tile){overflow:visible}.cds--tile--clickable .cds--tile--slug-icon rect{stroke:var(--cds-icon-primary,#161616)}.cds--tile--clickable .cds--tile--slug-icon path{fill:var(--cds-icon-primary,#161616)}.cds--tile--slug-rounded,.cds--tile--slug-rounded.cds--tile--clickable::before,.cds--tile--slug-rounded.cds--tile--selectable::after,.cds--tile--slug-rounded.cds--tile--selectable::before,:host(cds-clickable-tile[slug][has-rounded-corners]),:host(cds-expandable-tile[slug][has-rounded-corners]),:host(cds-selectable-tile[slug][has-rounded-corners]),:host(cds-tile[slug][has-rounded-corners]){border-radius:.5rem}.cds--tile--slug-rounded .cds--tile__chevron,:host(cds-clickable-tile[slug][has-rounded-corners]) .cds--tile__chevron,:host(cds-expandable-tile[slug][has-rounded-corners]) .cds--tile__chevron,:host(cds-selectable-tile[slug][has-rounded-corners]) .cds--tile__chevron,:host(cds-tile[slug][has-rounded-corners]) .cds--tile__chevron{border-end-end-radius:.5rem}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--tile--is-selected .cds--tile__checkmark svg,.cds--tile__checkmark svg,.cds--tile__chevron svg,:host(cds-selectable-tile) .cds--tile__chevron svg{fill:ButtonText}}.cds--link,:host(cds-tile) ::slotted(.cds--link){box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:inline-flex;color:var(--cds-link-text-color,var(--cds-link-primary,#0f62fe));outline:0;text-decoration:none;transition:color 70ms cubic-bezier(.2,0,.38,.9)}.cds--link *,.cds--link ::after,.cds--link ::before,:host(cds-tile) ::slotted(.cds--link) *,:host(cds-tile) ::slotted(.cds--link) ::after,:host(cds-tile) ::slotted(.cds--link) ::before{box-sizing:inherit}.cds--link:hover,:host(cds-tile) :hover::slotted(.cds--link){color:var(--cds-link-hover-text-color,var(--cds-link-primary-hover,#0043ce));text-decoration:underline}.cds--link:active,.cds--link:active:visited,.cds--link:active:visited:hover,:host(cds-tile) :active::slotted(.cds--link){outline:1px solid var(--cds-focus,#0f62fe);color:var(--cds-link-text-color,var(--cds-link-primary,#0f62fe));outline-color:var(--cds-link-focus-text-color,var(--cds-focus,#0f62fe));text-decoration:underline}@media screen and (prefers-contrast){.cds--link:active,.cds--link:active:visited,.cds--link:active:visited:hover,:host(cds-tile) :active::slotted(.cds--link){outline-style:dotted}}.cds--link:focus,:host(cds-tile) :focus::slotted(.cds--link){outline:1px solid var(--cds-focus,#0f62fe);outline-color:var(--cds-link-focus-text-color,var(--cds-focus,#0f62fe));text-decoration:underline}@media screen and (prefers-contrast){.cds--link:focus,:host(cds-tile) :focus::slotted(.cds--link){outline-style:dotted}}.cds--link:visited,:host(cds-tile) :visited::slotted(.cds--link){color:var(--cds-link-text-color,var(--cds-link-primary,#0f62fe))}.cds--link:visited:hover,:host(cds-tile) :visited:hover::slotted(.cds--link){color:var(--cds-link-hover-text-color,var(--cds-link-primary-hover,#0043ce))}.cds--link--disabled,.cds--link--disabled:hover{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed;font-weight:400;text-decoration:none}.cds--link--disabled *,.cds--link--disabled ::after,.cds--link--disabled ::before,.cds--link--disabled:hover *,.cds--link--disabled:hover ::after,.cds--link--disabled:hover ::before{box-sizing:inherit}.cds--link.cds--link--visited:visited,:host(cds-tile) .cds--link--visited:visited::slotted(.cds--link){color:var(--cds-link-visited-text-color,var(--cds-link-visited,#8a3ffc))}.cds--link.cds--link--visited:visited:hover,:host(cds-tile) .cds--link--visited:visited:hover::slotted(.cds--link){color:var(--cds-link-hover-text-color,var(--cds-link-primary-hover,#0043ce))}.cds--link.cds--link--inline,:host(cds-tile) .cds--link--inline::slotted(.cds--link){display:inline;text-decoration:underline}.cds--link--disabled.cds--link--inline{text-decoration:underline}.cds--link--sm,.cds--link--sm.cds--link--disabled:hover{font-size:var(--cds-helper-text-01-font-size,.75rem);line-height:var(--cds-helper-text-01-line-height,1.33333);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px)}.cds--link--lg,.cds--link--lg.cds--link--disabled:hover{font-size:var(--cds-body-compact-02-font-size,1rem);font-weight:var(--cds-body-compact-02-font-weight,400);line-height:var(--cds-body-compact-02-line-height,1.375);letter-spacing:var(--cds-body-compact-02-letter-spacing,0)}.cds--link__icon{display:inline-flex;align-self:center;margin-inline-start:.5rem}@keyframes cds--hide-feedback{0%{opacity:1;visibility:inherit}100%{opacity:0;visibility:hidden}}@keyframes cds--show-feedback{0%{opacity:0;visibility:hidden}100%{opacity:1;visibility:inherit}}@keyframes cds--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}100%{opacity:.3;transform:scaleX(0);transform-origin:left}}input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover{box-shadow:0 0 0 1000px var(--cds-field) inset;-webkit-text-fill-color:var(--cds-text-primary,#161616)}.cds--fieldset{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline}.cds--fieldset *,.cds--fieldset ::after,.cds--fieldset ::before{box-sizing:inherit}.cds--form-item{font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start}.cds--label{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);display:inline-block;color:var(--cds-text-secondary,#525252);font-weight:400;line-height:1rem;margin-block-end:.5rem;vertical-align:baseline}.cds--label html{font-size:100%}.cds--label body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--label code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--label strong{font-weight:600}.cds--label .cds--toggletip-label{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label--no-margin{margin-block-end:0}.cds--label+.cds--tooltip{position:relative;inset-block-start:.2rem;inset-inline-start:.5rem}.cds--label+.cds--tooltip .cds--tooltip__trigger{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;inline-size:100%;display:flex;align-items:center;justify-content:center;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label+.cds--tooltip .cds--tooltip__trigger *,.cds--label+.cds--tooltip .cds--tooltip__trigger ::after,.cds--label+.cds--tooltip .cds--tooltip__trigger ::before{box-sizing:inherit}.cds--label+.cds--tooltip .cds--tooltip__trigger::-moz-focus-inner{border:0}.cds--label+.cds--tooltip .cds--tooltip__trigger:focus{outline:1px solid var(--cds-focus,#0f62fe)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg{fill:var(--cds-icon-secondary,#525252)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg :hover{fill:var(--cds-icon-primary,#161616)}.cds--label+.cds--toggletip{inset-block-start:.2rem;inset-inline-start:.5rem}.cds--label.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;block-size:.875rem;inline-size:4.6875rem}.cds--label.cds--skeleton:active,.cds--label.cds--skeleton:focus,.cds--label.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--label.cds--skeleton::before{position:absolute;animation:3s ease-in-out cds--skeleton infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:\"\";inline-size:100%;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--label.cds--skeleton::before{animation:none}}input[type=number]{font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif}.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline:2px solid var(--cds-support-error,#da1e28);outline-offset:-2px}@media screen and (prefers-contrast){.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline-style:dotted}}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper--warn~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box--warning~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--number__input-wrapper--warning~.cds--form-requirement,.cds--select--warning .cds--select-input__wrapper~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper--warn~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper--warning>.cds--text-input~.cds--form-requirement,.cds--text-input__field-wrapper--warning~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker--warning~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{display:block;overflow:visible;font-weight:400;max-block-size:12.5rem}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{color:var(--cds-text-error,#da1e28)}.cds--form--fluid .cds--text-input__field-wrapper--warning,.cds--form--fluid .cds--text-input__field-wrapper[data-invalid]{display:block}.cds--form--fluid input[data-invalid]{outline:0}.cds--form--fluid .cds--form-requirement{padding:.5rem 2.5rem .5rem 1rem;margin:0}input:not(output,[data-invalid]):-moz-ui-invalid{box-shadow:none}.cds--form-requirement{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);display:none;overflow:hidden;margin:.25rem 0 0;max-block-size:0}.cds--form-requirement html{font-size:100%}.cds--form-requirement body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--form-requirement code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--form-requirement strong{font-weight:600}.cds--select--inline .cds--form__helper-text{margin-block-start:0}.cds--form__helper-text{font-size:var(--cds-helper-text-01-font-size,.75rem);line-height:var(--cds-helper-text-01-line-height,1.33333);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);z-index:0;color:var(--cds-text-secondary,#525252);inline-size:100%;margin-block-start:.25rem;opacity:1}.cds--form__helper-text--disabled,.cds--label--disabled{color:var(--cds-text-disabled,rgba(22,22,22,.25))}fieldset[disabled] .cds--form__helper-text,fieldset[disabled] .cds--label{color:var(--cds-text-disabled,rgba(22,22,22,.25))}:host(cds-tile){--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}:host(cds-tile-group){background:0 0}:host(cds-tile-group) fieldset{border:none}:host(cds-clickable-tile){--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px;display:grid;outline:0}:host(cds-clickable-tile) .cds--link--disabled{display:block}:host(cds-clickable-tile) .cds--tile,:host(cds-clickable-tile) :host(cds-expandable-tile),:host(cds-clickable-tile) :host(cds-tile){padding:1rem;outline:.125rem solid transparent}:host(cds-clickable-tile) .cds--tile--clickable{display:block;transition:150ms cubic-bezier(.2,0,.38,.9)}:host(cds-clickable-tile) .cds--tile--clickable:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){:host(cds-clickable-tile) .cds--tile--clickable:focus{outline-style:dotted}}:host(cds-clickable-tile):hover .cds--tile--clickable{color:inherit}:host(cds-clickable-tile) ::slotted(cds-slug){pointer-events:none}:host(cds-radio-tile){--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px;display:block;margin-block-end:.5rem;outline:0}:host(cds-selectable-tile){--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px;position:relative;display:content;outline:0}:host(cds-radio-tile) .cds--tile-input:checked~.cds--tile--selectable .cds--tile__checkmark,:host(cds-selectable-tile) .cds--tile-input:checked~.cds--tile--selectable .cds--tile__checkmark{opacity:1}:host(cds-clickable-tile) ::slotted(*),:host(cds-selectable-tile) ::slotted(*){position:relative;z-index:1;cursor:pointer}:host(cds-expandable-tile){--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}:host(cds-expandable-tile) .cds-ce--expandable-tile--below-the-fold-content{max-block-size:0;transition:max-height 110ms cubic-bezier(.2,0,.38,.9)}:host(cds-expandable-tile[expanded]) ::slotted(cds-tile-below-the-fold-content){opacity:1;transition:110ms cubic-bezier(.2,0,.38,.9);visibility:visible}:host(cds-expandable-tile[with-interactive]){cursor:default;transition:max-height 150ms cubic-bezier(.2,0,.38,.9)}:host(cds-expandable-tile[with-interactive]):hover{background-color:var(--cds-layer)}:host(cds-expandable-tile[with-interactive]):focus{outline:0}:host(cds-expandable-tile:not([with-interactive])) .cds--tile__chevron{border:none;background:0 0;cursor:pointer;outline:0}:host(cds-clickable-tile[slug]) .cds--tile,:host(cds-clickable-tile[slug]) :host(cds-expandable-tile),:host(cds-clickable-tile[slug]) :host(cds-tile),:host(cds-expandable-tile[slug]),:host(cds-selectable-tile[slug]) .cds--tile,:host(cds-selectable-tile[slug]) :host(cds-expandable-tile),:host(cds-selectable-tile[slug]) :host(cds-tile),:host(cds-tile[slug]){background:linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)) 0,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,rgba(255,255,255,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) border-box;border:1px solid transparent;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1)),0 24px 40px -24px var(--cds-ai-drop-shadow,rgba(15,98,254,.1))}:host(cds-clickable-tile) ::slotted(cds-slug),:host(cds-expandable-tile) ::slotted(cds-slug),:host(cds-selectable-tile) ::slotted(cds-slug),:host(cds-tile) ::slotted(cds-slug){position:absolute;inset-block-start:1rem;inset-inline-end:1rem}:host(cds-selectable-tile) ::slotted(cds-slug){inset-inline-end:2.5rem}:host(cds-expandable-tile[slug]):hover{background:linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)) 0,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,rgba(255,255,255,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) border-box}:host(cds-clickable-tile[slug]) .cds--tile::before,:host(cds-selectable-tile[slug]) .cds--tile::after,:host(cds-selectable-tile[slug]) .cds--tile::before{position:absolute;display:block;block-size:100%;content:\"\";inline-size:100%;inset-block-start:0;inset-inline-start:0;opacity:0;transition:opacity 110ms cubic-bezier(.2,0,.38,.9)}:host(cds-clickable-tile[slug]) .cds--tile::before,:host(cds-selectable-tile[slug]) .cds--tile::before{background:linear-gradient(to top,var(--cds-ai-aura-hover-start,rgba(69,137,255,.32)) 0,15%,var(--cds-ai-aura-hover-end,rgba(255,255,255,0)) 50%) padding-box,linear-gradient(to top,var(--cds-ai-aura-hover-background,#edf5ff),var(--cds-ai-aura-hover-background,#edf5ff)) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-ai-aura-hover-background,#edf5ff),var(--cds-ai-aura-hover-background,#edf5ff)) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1))}:host(cds-clickable-tile[slug]) .cds--tile:hover::before,:host(cds-selectable-tile[slug]) .cds--tile:hover::before{opacity:1}:host(cds-selectable-tile[slug]) .cds--tile--is-selected{border:1px solid var(--cds-layer-selected-inverse,#161616)}:host(cds-selectable-tile[slug]) .cds--tile--is-selected .cds--tile__checkmark{z-index:1}:host(cds-selectable-tile[slug]) .cds--tile--is-selected::after{background:linear-gradient(to top,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,rgba(255,255,255,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer),var(--cds-layer)) padding-box,linear-gradient(to bottom,var(--cds-border-inverse,#161616),var(--cds-border-inverse,#161616)) border-box,linear-gradient(to top,var(--cds-layer),var(--cds-layer)) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1))}:host(cds-expandable-tile[slug]){overflow:visible}:host(cds-clickable-tile[slug][has-rounded-corners]) .cds--tile__chevron,:host(cds-expandable-tile[slug][has-rounded-corners]) .cds--tile__chevron,:host(cds-selectable-tile[slug][has-rounded-corners]) .cds--tile__chevron,:host(cds-tile[slug][has-rounded-corners]) .cds--tile__chevron{border-end-end-radius:.5rem}",
|
|
11
|
+
":root{--cds-layer:var(--cds-layer-01, #f4f4f4);--cds-layer-active:var(--cds-layer-active-01, #c6c6c6);--cds-layer-hover:var(--cds-layer-hover-01, #e8e8e8);--cds-layer-selected:var(--cds-layer-selected-01, #e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-01, #d1d1d1);--cds-layer-accent:var(--cds-layer-accent-01, #e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-01, #d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-01, #a8a8a8);--cds-field:var(--cds-field-01, #f4f4f4);--cds-field-hover:var(--cds-field-hover-01, #e8e8e8);--cds-border-subtle:var(--cds-border-subtle-00, #e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-01, #c6c6c6);--cds-border-strong:var(--cds-border-strong-01, #8d8d8d);--cds-border-tile:var(--cds-border-tile-01, #c6c6c6)}.cds--layer-one{--cds-layer:var(--cds-layer-01, #f4f4f4);--cds-layer-active:var(--cds-layer-active-01, #c6c6c6);--cds-layer-hover:var(--cds-layer-hover-01, #e8e8e8);--cds-layer-selected:var(--cds-layer-selected-01, #e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-01, #d1d1d1);--cds-layer-accent:var(--cds-layer-accent-01, #e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-01, #d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-01, #a8a8a8);--cds-field:var(--cds-field-01, #f4f4f4);--cds-field-hover:var(--cds-field-hover-01, #e8e8e8);--cds-border-subtle:var(--cds-border-subtle-00, #e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-01, #c6c6c6);--cds-border-strong:var(--cds-border-strong-01, #8d8d8d);--cds-border-tile:var(--cds-border-tile-01, #c6c6c6)}.cds--layer-two{--cds-layer:var(--cds-layer-02, #ffffff);--cds-layer-active:var(--cds-layer-active-02, #c6c6c6);--cds-layer-hover:var(--cds-layer-hover-02, #e8e8e8);--cds-layer-selected:var(--cds-layer-selected-02, #e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-02, #d1d1d1);--cds-layer-accent:var(--cds-layer-accent-02, #e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-02, #d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-02, #a8a8a8);--cds-field:var(--cds-field-02, #ffffff);--cds-field-hover:var(--cds-field-hover-02, #e8e8e8);--cds-border-subtle:var(--cds-border-subtle-01, #c6c6c6);--cds-border-subtle-selected:var(--cds-border-subtle-selected-02, #c6c6c6);--cds-border-strong:var(--cds-border-strong-02, #8d8d8d);--cds-border-tile:var(--cds-border-tile-02, #a8a8a8)}.cds--layer-three{--cds-layer:var(--cds-layer-03, #f4f4f4);--cds-layer-active:var(--cds-layer-active-03, #c6c6c6);--cds-layer-hover:var(--cds-layer-hover-03, #e8e8e8);--cds-layer-selected:var(--cds-layer-selected-03, #e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-03, #d1d1d1);--cds-layer-accent:var(--cds-layer-accent-03, #e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-03, #d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-03, #a8a8a8);--cds-field:var(--cds-field-03, #f4f4f4);--cds-field-hover:var(--cds-field-hover-03, #e8e8e8);--cds-border-subtle:var(--cds-border-subtle-02, #e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-03, #c6c6c6);--cds-border-strong:var(--cds-border-strong-03, #8d8d8d);--cds-border-tile:var(--cds-border-tile-03, #c6c6c6)}.cds--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;padding:0;border:0;margin:-1px;block-size:1px;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.cds--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs, 1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem))}.cds--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs, 1.5rem)}.cds--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs, 1.5rem)}.cds--layout--size-sm{--cds-layout-size-height-context:var(--cds-layout-size-height-sm, 2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem))}.cds--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm, 2rem)}.cds--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm, 2rem)}.cds--layout--size-md{--cds-layout-size-height-context:var(--cds-layout-size-height-md, 2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem))}.cds--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md, 2.5rem)}.cds--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md, 2.5rem)}.cds--layout--size-lg{--cds-layout-size-height-context:var(--cds-layout-size-height-lg, 3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem))}.cds--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg, 3rem)}.cds--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg, 3rem)}.cds--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl, 4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem))}.cds--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl, 4rem)}.cds--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl, 4rem)}.cds--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl, 5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem))}.cds--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl, 5rem)}.cds--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl, 5rem)}.cds--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed, 0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem))}.cds--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed, 0.5rem)}.cds--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed, 0.5rem)}.cds--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal, 1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem))}.cds--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal, 1rem)}.cds--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal, 1rem)}:root{--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}.cds--tile-group html,:host(cds-tile-group) html{font-size:100%}.cds--tile-group body,:host(cds-tile-group) body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--tile-group code,:host(cds-tile-group) code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--tile-group strong,:host(cds-tile-group) strong{font-weight:600}.cds--tile,:host(cds-expandable-tile),:host(cds-tile){font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);--cds-layout-density-padding-inline-local:clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));position:relative;display:block;padding:var(--cds-layout-density-padding-inline-local);background-color:var(--cds-layer);min-block-size:4rem;min-inline-size:8rem;outline:2px solid transparent;outline-offset:-2px}.cds--tile:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--tile:focus{outline-style:dotted}}.cds--tile--light,:host(cds-expandable-tile[color-scheme=light]),:host(cds-tile[color-scheme=light]){background-color:var(--cds-layer-02,#fff)}.cds--tile--clickable,.cds--tile--selectable,:host(cds-clickable-tile) .cds--tile--clickable{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);padding:var(--cds-layout-density-padding-inline-local);cursor:pointer;transition:150ms cubic-bezier(.2,0,.38,.9)}.cds--tile--clickable *,.cds--tile--clickable ::after,.cds--tile--clickable ::before,.cds--tile--selectable *,.cds--tile--selectable ::after,.cds--tile--selectable ::before,:host(cds-clickable-tile) .cds--tile--clickable *,:host(cds-clickable-tile) .cds--tile--clickable ::after,:host(cds-clickable-tile) .cds--tile--clickable ::before{box-sizing:inherit}.cds--tile--clickable:hover,.cds--tile--selectable:hover{background:var(--cds-layer-hover)}.cds--tile--clickable,:host(cds-clickable-tile) .cds--tile--clickable{color:var(--cds-text-primary,#161616);text-decoration:none}.cds--tile--clickable:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px;text-decoration:none}@media screen and (prefers-contrast){.cds--tile--clickable:focus{outline-style:dotted}}.cds--tile--clickable:focus .cds--tile__checkmark,.cds--tile--clickable:hover .cds--tile__checkmark{opacity:1}.cds--tile--expandable::-moz-focus-inner{border:0}.cds--tile--clickable:active,.cds--tile--clickable:hover,.cds--tile--clickable:visited,.cds--tile--clickable:visited:hover{color:var(--cds-text-primary,#161616);text-decoration:none}.cds--tile--clickable.cds--link--disabled,.cds--tile--clickable:hover.cds--link--disabled{display:block;padding:var(--cds-layout-density-padding-inline-local);background-color:var(--cds-layer);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds--tile--clickable .cds--tile--icon,.cds--tile--clickable.cds--link--disabled .cds--tile--disabled-icon{position:absolute;inset-block-end:var(--cds-layout-density-padding-inline-local);inset-inline-end:var(--cds-layout-density-padding-inline-local)}.cds--tile--clickable .cds--tile--icon{fill:var(--cds-icon-interactive,#0f62fe)}.cds--tile--clickable.cds--link--disabled .cds--tile--disabled-icon{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--tile--clickable.cds--link--disabled .cds--tile--icon{display:none}.cds--tile--selectable{border:1px solid transparent;padding-inline-end:calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem)}.cds--tile__checkmark{position:absolute;border:none;background:0 0;block-size:1rem;inset-block-start:var(--cds-layout-density-padding-inline-local);inset-inline-end:var(--cds-layout-density-padding-inline-local);transition:110ms cubic-bezier(.2,0,.38,.9);opacity:0}.cds--tile__checkmark svg{border-radius:50%;fill:var(--cds-icon-secondary,#525252)}.cds--tile__checkmark:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--tile__checkmark:focus{outline-style:dotted}}.cds--tile__checkmark--persistent{opacity:1}.cds--tile__chevron,:host(cds-selectable-tile) .cds--tile__chevron{position:absolute;display:flex;align-items:center;justify-content:center;block-size:calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);inline-size:calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);inset-block-end:0;inset-inline-end:0}.cds--tile__chevron svg,:host(cds-selectable-tile) .cds--tile__chevron svg{fill:var(--cds-icon-primary,#161616);transform-origin:center;transition:110ms cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){.cds--tile__chevron svg,:host(cds-selectable-tile) .cds--tile__chevron svg{transition:none}}@media screen and (-ms-high-contrast:active),screen and (prefers-contrast){.cds--tile__chevron svg,:host(cds-selectable-tile) .cds--tile__chevron svg{fill:ButtonText}}.cds--tile__chevron--interactive{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;inline-size:100%;position:absolute;display:flex;align-items:center;justify-content:center;block-size:calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);inline-size:calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);inset-block-end:0;inset-inline-end:0}.cds--tile__chevron--interactive *,.cds--tile__chevron--interactive ::after,.cds--tile__chevron--interactive ::before{box-sizing:inherit}.cds--tile__chevron--interactive::-moz-focus-inner{border:0}.cds--tile__chevron--interactive:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}.cds--tile__chevron--interactive:hover{background-color:var(--cds-layer-hover);cursor:pointer}.cds--tile--expandable,:host(cds-expandable-tile){position:relative;overflow:hidden;border:0;color:inherit;cursor:pointer;font-family:inherit;font-size:inherit;inline-size:100%;text-align:start;transition:max-height 150ms cubic-bezier(.2,0,.38,.9);font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px)}.cds--tile--expandable:hover{background:var(--cds-layer-hover)}.cds--tile--expandable.cds--tile--expandable--interactive{border:none;cursor:default;transition:max-height 150ms cubic-bezier(.2,0,.38,.9)}.cds--tile--expandable.cds--tile--expandable--interactive:hover{background-color:var(--cds-layer)}.cds--tile--expandable.cds--tile--expandable--interactive:focus{outline:0}.cds--tile--expandable--interactive:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--tile--expandable--interactive:focus{outline-style:dotted}}.cds--tile-content__below-the-fold,:host(cds-expandable-tile) ::slotted(cds-tile-below-the-fold-content){display:block;opacity:0;transition:opacity 110ms cubic-bezier(.2,0,.38,.9),visibility 110ms cubic-bezier(.2,0,.38,.9);visibility:hidden}.cds--tile--is-expanded,:host(cds-expandable-tile[expanded]){overflow:visible;transition:max-height 110ms cubic-bezier(.2,0,.38,.9)}.cds--tile--is-expanded .cds--tile__chevron svg,:host(cds-expandable-tile[expanded]) .cds--tile__chevron svg{transform:rotate(180deg)}.cds--tile--is-expanded .cds--tile-content__below-the-fold,:host(cds-expandable-tile) .cds--tile--is-expanded ::slotted(cds-tile-below-the-fold-content),:host(cds-expandable-tile):host(cds-expandable-tile[expanded]) ::slotted(cds-tile-below-the-fold-content),:host(cds-expandable-tile[expanded]) .cds--tile-content__below-the-fold{opacity:1;transition:opacity 110ms cubic-bezier(.2,0,.38,.9),visibility 110ms cubic-bezier(.2,0,.38,.9);visibility:inherit}@media not all and (resolution >= 0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent){.cds--tile--is-expanded .cds--tile-content__below-the-fold,:host(cds-expandable-tile) .cds--tile--is-expanded ::slotted(cds-tile-below-the-fold-content),:host(cds-expandable-tile):host(cds-expandable-tile[expanded]) ::slotted(cds-tile-below-the-fold-content),:host(cds-expandable-tile[expanded]) .cds--tile-content__below-the-fold{overflow-y:auto}}}.cds--tile--is-selected{border:1px solid var(--cds-layer-selected-inverse,#161616)}.cds--tile--is-selected .cds--tile__checkmark{opacity:1}.cds--tile--is-selected .cds--tile__checkmark svg{fill:var(--cds-icon-primary,#161616)}@media screen and (-ms-high-contrast:active),screen and (prefers-contrast){.cds--tile--is-selected .cds--tile__checkmark svg{fill:ButtonText}}.cds--tile-content{block-size:100%;inline-size:100%}.cds--tile-input{position:absolute;overflow:hidden;padding:0;border:0;margin:-1px;block-size:1px;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.cds--tile-input:focus+.cds--tile,.cds--tile-input:focus+:host(cds-expandable-tile),.cds--tile-input:focus+:host(cds-tile){outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--tile-input:focus+.cds--tile,.cds--tile-input:focus+:host(cds-expandable-tile),.cds--tile-input:focus+:host(cds-tile){outline-style:dotted}}.cds--tile--disabled.cds--tile--selectable{background-color:var(--cds-layer);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds--tile--disabled.cds--tile--selectable.cds--tile--light{background-color:var(--cds-layer-02,#fff)}.cds--tile--disabled.cds--tile--is-selected{border-color:var(--cds-border-disabled,#c6c6c6)}.cds--tile--disabled .cds--tile__checkmark svg{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--tile--clickable .cds--tile--slug-icon,.cds--tile--expandable>div>.cds--slug,.cds--tile>.cds--slug,:host(cds-expandable-tile)>.cds--slug,:host(cds-expandable-tile)>div>.cds--slug,:host(cds-tile)>.cds--slug{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}.cds--tile.cds--tile--selectable>.cds--slug{inset-inline-end:2.5rem}.cds--tile.cds--tile--selectable.cds--tile--radio>.cds--slug{inset-inline-end:1rem;transition:inset-inline-end 110ms cubic-bezier(.2,0,.38,.9)}.cds--tile.cds--tile--selectable.cds--tile--radio.cds--tile--is-selected>.cds--slug{inset-inline-end:2.5rem}.cds--tile.cds--tile--clickable>.cds--slug{pointer-events:none}.cds--tile--slug.cds--tile{background:linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)) 0,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,rgba(255,255,255,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) border-box;border:1px solid transparent;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1)),0 4px 8px 0 var(--cds-ai-drop-shadow,rgba(15,98,254,.1))}.cds--tile--slug.cds--tile--expandable:hover{background:linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)) 0,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,rgba(255,255,255,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) border-box}.cds--tile--slug.cds--tile--clickable::before,.cds--tile--slug.cds--tile--selectable::after,.cds--tile--slug.cds--tile--selectable::before{position:absolute;display:block;block-size:100%;content:\"\";inline-size:100%;inset-block-start:0;inset-inline-start:0;opacity:0;transition:opacity 110ms cubic-bezier(.2,0,.38,.9)}.cds--tile--slug.cds--tile--clickable::before,.cds--tile--slug.cds--tile--selectable::before{background:linear-gradient(to top,var(--cds-ai-aura-hover-start,rgba(69,137,255,.32)) 0,15%,var(--cds-ai-aura-hover-end,rgba(255,255,255,0)) 50%) padding-box,linear-gradient(to top,var(--cds-ai-aura-hover-background,#edf5ff),var(--cds-ai-aura-hover-background,#edf5ff)) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-ai-aura-hover-background,#edf5ff),var(--cds-ai-aura-hover-background,#edf5ff)) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1)),0 4px 10px 2px var(--cds-ai-drop-shadow,rgba(15,98,254,.1))}.cds--tile--slug.cds--tile--clickable:hover::before,.cds--tile--slug.cds--tile--selectable:hover::before{opacity:1}.cds--tile--slug.cds--tile--clickable:focus,.cds--tile--slug.cds--tile--selectable:focus,.cds--tile-input:focus+.cds--tile--slug.cds--tile{outline-offset:-1px}.cds--tile--slug.cds--tile--selectable::after{background:linear-gradient(to top,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,rgba(255,255,255,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer),var(--cds-layer)) padding-box,linear-gradient(to bottom,var(--cds-border-inverse,#161616),var(--cds-border-inverse,#161616)) border-box,linear-gradient(to top,var(--cds-layer),var(--cds-layer)) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1)),0 4px 8px 0 var(--cds-ai-drop-shadow,rgba(15,98,254,.1))}.cds--tile--slug.cds--tile--selectable:hover::after{opacity:0}.cds--tile--slug.cds--tile--is-selected::after{opacity:1}.cds--tile--slug.cds--tile--is-selected{border-color:var(--cds-border-inverse,#161616)}.cds--tile--slug.cds--tile--clickable .cds--tile-content,.cds--tile--slug.cds--tile--selectable .cds--tile-content{position:relative;cursor:pointer}.cds--tile--slug.cds--tile--clickable .cds--tile-content,.cds--tile--slug.cds--tile--is-selected .cds--slug,.cds--tile--slug.cds--tile--selectable .cds--tile-content,.cds--tile--slug.cds--tile--selectable>.cds--tile__checkmark{z-index:1}.cds--tile--slug.cds--tile--selectable .cds--slug:has(>.cds--popover--open){z-index:2}.cds--tile--slug.cds--tile--selectable>.cds--slug,.cds--tile--slug.cds--tile--selectable>.cds--tile__checkmark{z-index:1}.cds--tile--expandable:has(.cds--slug>.cds--popover--open),:has(.cds--slug>.cds--popover--open):host(cds-expandable-tile){overflow:visible}.cds--tile--clickable .cds--tile--slug-icon rect{stroke:var(--cds-icon-primary,#161616)}.cds--tile--clickable .cds--tile--slug-icon path{fill:var(--cds-icon-primary,#161616)}.cds--tile--slug-rounded,.cds--tile--slug-rounded.cds--tile--clickable::before,.cds--tile--slug-rounded.cds--tile--selectable::after,.cds--tile--slug-rounded.cds--tile--selectable::before,:host(cds-clickable-tile[slug][has-rounded-corners]),:host(cds-expandable-tile[slug][has-rounded-corners]),:host(cds-selectable-tile[slug][has-rounded-corners]),:host(cds-tile[slug][has-rounded-corners]){border-radius:.5rem}.cds--tile--slug-rounded .cds--tile__chevron,:host(cds-clickable-tile[slug][has-rounded-corners]) .cds--tile__chevron,:host(cds-expandable-tile[slug][has-rounded-corners]) .cds--tile__chevron,:host(cds-selectable-tile[slug][has-rounded-corners]) .cds--tile__chevron,:host(cds-tile[slug][has-rounded-corners]) .cds--tile__chevron{border-end-end-radius:.5rem}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--tile--is-selected .cds--tile__checkmark svg,.cds--tile__checkmark svg,.cds--tile__chevron svg,:host(cds-selectable-tile) .cds--tile__chevron svg{fill:ButtonText}}.cds--link,:host(cds-tile) ::slotted(.cds--link){box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:inline-flex;color:var(--cds-link-text-color,var(--cds-link-primary,#0f62fe));outline:0;text-decoration:none;transition:color 70ms cubic-bezier(.2,0,.38,.9)}.cds--link *,.cds--link ::after,.cds--link ::before,:host(cds-tile) ::slotted(.cds--link) *,:host(cds-tile) ::slotted(.cds--link) ::after,:host(cds-tile) ::slotted(.cds--link) ::before{box-sizing:inherit}.cds--link:hover,:host(cds-tile) :hover::slotted(.cds--link){color:var(--cds-link-hover-text-color,var(--cds-link-primary-hover,#0043ce));text-decoration:underline}.cds--link:active,.cds--link:active:visited,.cds--link:active:visited:hover,:host(cds-tile) :active::slotted(.cds--link){outline:1px solid var(--cds-focus,#0f62fe);color:var(--cds-link-text-color,var(--cds-link-primary,#0f62fe));outline-color:var(--cds-link-focus-text-color,var(--cds-focus,#0f62fe));text-decoration:underline}@media screen and (prefers-contrast){.cds--link:active,.cds--link:active:visited,.cds--link:active:visited:hover,:host(cds-tile) :active::slotted(.cds--link){outline-style:dotted}}.cds--link:focus,:host(cds-tile) :focus::slotted(.cds--link){outline:1px solid var(--cds-focus,#0f62fe);outline-color:var(--cds-link-focus-text-color,var(--cds-focus,#0f62fe));text-decoration:underline}@media screen and (prefers-contrast){.cds--link:focus,:host(cds-tile) :focus::slotted(.cds--link){outline-style:dotted}}.cds--link:visited,:host(cds-tile) :visited::slotted(.cds--link){color:var(--cds-link-text-color,var(--cds-link-primary,#0f62fe))}.cds--link:visited:hover,:host(cds-tile) :visited:hover::slotted(.cds--link){color:var(--cds-link-hover-text-color,var(--cds-link-primary-hover,#0043ce))}.cds--link--disabled,.cds--link--disabled:hover{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed;font-weight:400;text-decoration:none}.cds--link--disabled *,.cds--link--disabled ::after,.cds--link--disabled ::before,.cds--link--disabled:hover *,.cds--link--disabled:hover ::after,.cds--link--disabled:hover ::before{box-sizing:inherit}.cds--link.cds--link--visited:visited,:host(cds-tile) .cds--link--visited:visited::slotted(.cds--link){color:var(--cds-link-visited-text-color,var(--cds-link-visited,#8a3ffc))}.cds--link.cds--link--visited:visited:hover,:host(cds-tile) .cds--link--visited:visited:hover::slotted(.cds--link){color:var(--cds-link-hover-text-color,var(--cds-link-primary-hover,#0043ce))}.cds--link.cds--link--inline,:host(cds-tile) .cds--link--inline::slotted(.cds--link){display:inline;text-decoration:underline}.cds--link--disabled.cds--link--inline{text-decoration:underline}.cds--link--sm,.cds--link--sm.cds--link--disabled:hover{font-size:var(--cds-helper-text-01-font-size,.75rem);line-height:var(--cds-helper-text-01-line-height,1.33333);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px)}.cds--link--lg,.cds--link--lg.cds--link--disabled:hover{font-size:var(--cds-body-compact-02-font-size,1rem);font-weight:var(--cds-body-compact-02-font-weight,400);line-height:var(--cds-body-compact-02-line-height,1.375);letter-spacing:var(--cds-body-compact-02-letter-spacing,0)}.cds--link__icon{display:inline-flex;align-self:center;margin-inline-start:.5rem}@keyframes cds--hide-feedback{0%{opacity:1;visibility:inherit}100%{opacity:0;visibility:hidden}}@keyframes cds--show-feedback{0%{opacity:0;visibility:hidden}100%{opacity:1;visibility:inherit}}@keyframes cds--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}100%{opacity:.3;transform:scaleX(0);transform-origin:left}}input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover{box-shadow:0 0 0 1000px var(--cds-field) inset;-webkit-text-fill-color:var(--cds-text-primary,#161616)}.cds--fieldset{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline}.cds--fieldset *,.cds--fieldset ::after,.cds--fieldset ::before{box-sizing:inherit}.cds--form-item{font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start}.cds--label{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);display:inline-block;color:var(--cds-text-secondary,#525252);font-weight:400;line-height:1rem;margin-block-end:.5rem;vertical-align:baseline}.cds--label html{font-size:100%}.cds--label body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--label code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--label strong{font-weight:600}.cds--label .cds--toggletip-label{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label--no-margin{margin-block-end:0}.cds--label+.cds--tooltip{position:relative;inset-block-start:.2rem;inset-inline-start:.5rem}.cds--label+.cds--tooltip .cds--tooltip__trigger{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;inline-size:100%;display:flex;align-items:center;justify-content:center;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label+.cds--tooltip .cds--tooltip__trigger *,.cds--label+.cds--tooltip .cds--tooltip__trigger ::after,.cds--label+.cds--tooltip .cds--tooltip__trigger ::before{box-sizing:inherit}.cds--label+.cds--tooltip .cds--tooltip__trigger::-moz-focus-inner{border:0}.cds--label+.cds--tooltip .cds--tooltip__trigger:focus{outline:1px solid var(--cds-focus,#0f62fe)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg{fill:var(--cds-icon-secondary,#525252)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg :hover{fill:var(--cds-icon-primary,#161616)}.cds--label+.cds--toggletip{inset-block-start:.2rem;inset-inline-start:.5rem}.cds--label.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;block-size:.875rem;inline-size:4.6875rem}.cds--label.cds--skeleton:active,.cds--label.cds--skeleton:focus,.cds--label.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--label.cds--skeleton::before{position:absolute;animation:3s ease-in-out cds--skeleton infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:\"\";inline-size:100%;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--label.cds--skeleton::before{animation:none}}input[type=number]{font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif}.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused,.cds--combo-box--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline:2px solid var(--cds-support-error,#da1e28);outline-offset:-2px}@media screen and (prefers-contrast){.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused,.cds--combo-box--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline-style:dotted}}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper--warn~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box--warning~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--number__input-wrapper--warning~.cds--form-requirement,.cds--select--warning .cds--select-input__wrapper~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper--warn~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper--warning>.cds--text-input~.cds--form-requirement,.cds--text-input__field-wrapper--warning~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker--warning~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{display:block;overflow:visible;font-weight:400;max-block-size:12.5rem}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{color:var(--cds-text-error,#da1e28)}.cds--form--fluid .cds--text-input__field-wrapper--warning,.cds--form--fluid .cds--text-input__field-wrapper[data-invalid]{display:block}.cds--form--fluid input[data-invalid]{outline:0}.cds--form--fluid .cds--form-requirement{padding:.5rem 2.5rem .5rem 1rem;margin:0}input:not(output,[data-invalid]):-moz-ui-invalid{box-shadow:none}.cds--form-requirement{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);display:none;overflow:hidden;margin:.25rem 0 0;max-block-size:0}.cds--form-requirement html{font-size:100%}.cds--form-requirement body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--form-requirement code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--form-requirement strong{font-weight:600}.cds--select--inline .cds--form__helper-text{margin-block-start:0}.cds--form__helper-text{font-size:var(--cds-helper-text-01-font-size,.75rem);line-height:var(--cds-helper-text-01-line-height,1.33333);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);z-index:0;color:var(--cds-text-secondary,#525252);inline-size:100%;margin-block-start:.25rem;opacity:1}.cds--form__helper-text--disabled,.cds--label--disabled{color:var(--cds-text-disabled,rgba(22,22,22,.25))}fieldset[disabled] .cds--form__helper-text,fieldset[disabled] .cds--label{color:var(--cds-text-disabled,rgba(22,22,22,.25))}:host(cds-tile){--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}:host(cds-tile-group){background:0 0}:host(cds-tile-group) fieldset{border:none}:host(cds-clickable-tile){--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px;display:grid;outline:0}:host(cds-clickable-tile) .cds--link--disabled{display:block}:host(cds-clickable-tile) .cds--tile,:host(cds-clickable-tile) :host(cds-expandable-tile),:host(cds-clickable-tile) :host(cds-tile){padding:1rem;outline:.125rem solid transparent}:host(cds-clickable-tile) .cds--tile--clickable{display:block;transition:150ms cubic-bezier(.2,0,.38,.9)}:host(cds-clickable-tile) .cds--tile--clickable:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){:host(cds-clickable-tile) .cds--tile--clickable:focus{outline-style:dotted}}:host(cds-clickable-tile):hover .cds--tile--clickable{color:inherit}:host(cds-clickable-tile) ::slotted(cds-slug){pointer-events:none}:host(cds-radio-tile){--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px;display:block;margin-block-end:.5rem;outline:0}:host(cds-selectable-tile){--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px;position:relative;display:content;outline:0}:host(cds-radio-tile) .cds--tile-input:checked~.cds--tile--selectable .cds--tile__checkmark,:host(cds-selectable-tile) .cds--tile-input:checked~.cds--tile--selectable .cds--tile__checkmark{opacity:1}:host(cds-clickable-tile) ::slotted(*),:host(cds-selectable-tile) ::slotted(*){position:relative;z-index:1;cursor:pointer}:host(cds-expandable-tile){--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}:host(cds-expandable-tile) .cds-ce--expandable-tile--below-the-fold-content{max-block-size:0;transition:max-height 110ms cubic-bezier(.2,0,.38,.9)}:host(cds-expandable-tile[expanded]) ::slotted(cds-tile-below-the-fold-content){opacity:1;transition:110ms cubic-bezier(.2,0,.38,.9);visibility:visible}:host(cds-expandable-tile[with-interactive]){cursor:default;transition:max-height 150ms cubic-bezier(.2,0,.38,.9)}:host(cds-expandable-tile[with-interactive]):hover{background-color:var(--cds-layer)}:host(cds-expandable-tile[with-interactive]):focus{outline:0}:host(cds-expandable-tile:not([with-interactive])) .cds--tile__chevron{border:none;background:0 0;cursor:pointer;outline:0}:host(cds-clickable-tile[slug]) .cds--tile,:host(cds-clickable-tile[slug]) :host(cds-expandable-tile),:host(cds-clickable-tile[slug]) :host(cds-tile),:host(cds-expandable-tile[slug]),:host(cds-selectable-tile[slug]) .cds--tile,:host(cds-selectable-tile[slug]) :host(cds-expandable-tile),:host(cds-selectable-tile[slug]) :host(cds-tile),:host(cds-tile[slug]){background:linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)) 0,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,rgba(255,255,255,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) border-box;border:1px solid transparent;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1)),0 24px 40px -24px var(--cds-ai-drop-shadow,rgba(15,98,254,.1))}:host(cds-clickable-tile) ::slotted(cds-slug),:host(cds-expandable-tile) ::slotted(cds-slug),:host(cds-selectable-tile) ::slotted(cds-slug),:host(cds-tile) ::slotted(cds-slug){position:absolute;inset-block-start:1rem;inset-inline-end:1rem}:host(cds-selectable-tile) ::slotted(cds-slug){inset-inline-end:2.5rem}:host(cds-expandable-tile[slug]):hover{background:linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)) 0,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,rgba(255,255,255,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) border-box}:host(cds-clickable-tile[slug]) .cds--tile::before,:host(cds-selectable-tile[slug]) .cds--tile::after,:host(cds-selectable-tile[slug]) .cds--tile::before{position:absolute;display:block;block-size:100%;content:\"\";inline-size:100%;inset-block-start:0;inset-inline-start:0;opacity:0;transition:opacity 110ms cubic-bezier(.2,0,.38,.9)}:host(cds-clickable-tile[slug]) .cds--tile::before,:host(cds-selectable-tile[slug]) .cds--tile::before{background:linear-gradient(to top,var(--cds-ai-aura-hover-start,rgba(69,137,255,.32)) 0,15%,var(--cds-ai-aura-hover-end,rgba(255,255,255,0)) 50%) padding-box,linear-gradient(to top,var(--cds-ai-aura-hover-background,#edf5ff),var(--cds-ai-aura-hover-background,#edf5ff)) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-ai-aura-hover-background,#edf5ff),var(--cds-ai-aura-hover-background,#edf5ff)) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1))}:host(cds-clickable-tile[slug]) .cds--tile:hover::before,:host(cds-selectable-tile[slug]) .cds--tile:hover::before{opacity:1}:host(cds-selectable-tile[slug]) .cds--tile--is-selected{border:1px solid var(--cds-layer-selected-inverse,#161616)}:host(cds-selectable-tile[slug]) .cds--tile--is-selected .cds--tile__checkmark{z-index:1}:host(cds-selectable-tile[slug]) .cds--tile--is-selected::after{background:linear-gradient(to top,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,rgba(255,255,255,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer),var(--cds-layer)) padding-box,linear-gradient(to bottom,var(--cds-border-inverse,#161616),var(--cds-border-inverse,#161616)) border-box,linear-gradient(to top,var(--cds-layer),var(--cds-layer)) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1))}:host(cds-expandable-tile[slug]){overflow:visible}:host(cds-clickable-tile[slug][has-rounded-corners]) .cds--tile__chevron,:host(cds-expandable-tile[slug][has-rounded-corners]) .cds--tile__chevron,:host(cds-selectable-tile[slug][has-rounded-corners]) .cds--tile__chevron,:host(cds-tile[slug][has-rounded-corners]) .cds--tile__chevron{border-end-end-radius:.5rem}",
|
|
12
12
|
]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tile.js","names":["LitElement","html","property","prefix","TILE_COLOR_SCHEME","styles","carbonElement","customElement","CDSTile","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","key","value","_handleSlotChange","target","hasContent","assignedNodes","filter","elem","matches","undefined","slugItem","length","_hasSlug","Boolean","setAttribute","requestUpdate","decorators","attribute","reflect","REGULAR","type","updated","anchorTag","querySelector","classList","add","before","document","createElement","removeAttribute","render","_t","_","static"],"sources":["components/tile/tile.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TILE_COLOR_SCHEME };\n\n/**\n * Basic tile.\n *\n * @element cds-tile\n */\n@customElement(`${prefix}-tile`)\nclass CDSTile extends LitElement {\n /**\n * `true` if there is a slug.\n */\n protected _hasSlug = false;\n\n /**\n * Handles `slotchange` event.\n */\n protected _handleSlotChange({ target }: Event) {\n const hasContent = (target as HTMLSlotElement)\n .assignedNodes()\n .filter((elem) =>\n (elem as HTMLElement).matches !== undefined\n ? (elem as HTMLElement).matches(\n (this.constructor as typeof CDSTile).slugItem\n )\n : false\n );\n if (hasContent.length > 0) {\n this._hasSlug = Boolean(hasContent);\n (hasContent[0] as HTMLElement).setAttribute('size', 'xs');\n }\n this.requestUpdate();\n }\n\n /**\n * The color scheme.\n */\n @property({ attribute: 'color-scheme', reflect: true })\n colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n /**\n * Specify if the `Tile` component should be rendered with rounded corners.\n * Only valid when `slug` prop is present\n */\n @property({ type: Boolean, attribute: 'has-rounded-corners' })\n hasRoundedCorners = false;\n\n updated() {\n const anchorTag = this.querySelector('a');\n\n if (anchorTag) {\n anchorTag?.classList.add(`${prefix}--link`);\n anchorTag.before(document.createElement('br'));\n anchorTag.before(document.createElement('br'));\n }\n\n if (this._hasSlug) {\n this.setAttribute('slug', '');\n } else {\n this.removeAttribute('slug');\n }\n }\n\n render() {\n return html` <slot></slot\n ><slot name=\"slug\" @slotchange=\"${this._handleSlotChange}\"></slot>`;\n }\n\n /**\n * A selector that will return the slug item.\n */\n static get slugItem() {\n return `${prefix}-slug`;\n }\n\n static styles = styles;\n}\n\nexport default CDSTile;\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,UAAU,EAAEC,IAAI,QAAQ,KAAK;AACtC,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,iBAAiB,QAAQ,QAAQ;AAC1C,OAAOC,MAAM,MAAM,iBAAa;AAChC,SAASC,aAAa,IAAIC,aAAa,QAAQ,yCAAyC;AAExF,SAASH,iBAAiB;;AAE1B;AACA;AACA;AACA;AACA;AAJA,IAMMI,OAAO,GAAAC,SAAA,EADZF,aAAa,CAAC,GAAGJ,MAAM,OAAO,CAAC,aAAAO,WAAA,EAAAC,WAAA;EAAhC,MACMH,OAAO,SAAAG,WAAA,CAAoB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAoEjC;EAAC;IAAAI,CAAA,EApEKN,OAAO;IAAAO,CAAA;MAAAC,IAAA;MAAAC,GAAA;MAAAC,MAAA;QAAA,OAIU,KAAK;MAAA;IAAA;MAAAF,IAAA;MAAAC,GAAA;MAAAC,KAAA;MAH1B;AACF;AACA;;MAGE;AACF;AACA;MACE,
|
|
1
|
+
{"version":3,"file":"tile.js","names":["LitElement","html","property","prefix","TILE_COLOR_SCHEME","styles","carbonElement","customElement","CDSTile","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","key","value","_handleSlotChange","target","hasContent","assignedNodes","filter","elem","matches","undefined","slugItem","length","_hasSlug","Boolean","setAttribute","requestUpdate","decorators","attribute","reflect","REGULAR","type","updated","anchorTag","querySelector","classList","add","before","document","createElement","removeAttribute","render","_t","_","static"],"sources":["components/tile/tile.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TILE_COLOR_SCHEME };\n\n/**\n * Basic tile.\n *\n * @element cds-tile\n */\n@customElement(`${prefix}-tile`)\nclass CDSTile extends LitElement {\n /**\n * `true` if there is a slug.\n */\n protected _hasSlug = false;\n\n /**\n * Handles `slotchange` event.\n */\n protected _handleSlotChange({ target }: Event) {\n const hasContent = (target as HTMLSlotElement)\n .assignedNodes()\n .filter((elem) =>\n (elem as HTMLElement).matches !== undefined\n ? (elem as HTMLElement).matches(\n (this.constructor as typeof CDSTile).slugItem\n )\n : false\n );\n if (hasContent.length > 0) {\n this._hasSlug = Boolean(hasContent);\n (hasContent[0] as HTMLElement).setAttribute('size', 'xs');\n }\n this.requestUpdate();\n }\n\n /**\n * The color scheme.\n */\n @property({ attribute: 'color-scheme', reflect: true })\n colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n /**\n * Specify if the `Tile` component should be rendered with rounded corners.\n * Only valid when `slug` prop is present\n */\n @property({ type: Boolean, attribute: 'has-rounded-corners' })\n hasRoundedCorners = false;\n\n updated() {\n const anchorTag = this.querySelector('a');\n\n if (anchorTag) {\n anchorTag?.classList.add(`${prefix}--link`);\n anchorTag.before(document.createElement('br'));\n anchorTag.before(document.createElement('br'));\n }\n\n if (this._hasSlug) {\n this.setAttribute('slug', '');\n } else {\n this.removeAttribute('slug');\n }\n }\n\n render() {\n return html` <slot></slot\n ><slot name=\"slug\" @slotchange=\"${this._handleSlotChange}\"></slot>`;\n }\n\n /**\n * A selector that will return the slug item.\n */\n static get slugItem() {\n return `${prefix}-slug`;\n }\n\n static styles = styles;\n}\n\nexport default CDSTile;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -237,7 +237,7 @@ let CDSToggle = _decorate([customElement(`${prefix}-toggle`)], function (_initia
|
|
|
237
237
|
kind: "get",
|
|
238
238
|
static: true,
|
|
239
239
|
key: "eventChange",
|
|
240
|
-
value: function
|
|
240
|
+
value: function () {
|
|
241
241
|
return `${prefix}-toggle-changed`;
|
|
242
242
|
}
|
|
243
243
|
}, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle.js","names":["classMap","html","property","query","ifDefined","prefix","CDSCheckbox","TOGGLE_SIZE","styles","HostListener","HostListenerMixin","carbonElement","customElement","CDSToggle","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","decorators","key","value","_handleChange","checked","indeterminate","_checkboxNode","disabled","readOnly","eventChange","dispatchEvent","CustomEvent","bubbles","composed","detail","event","_renderCheckmark","size","SMALL","undefined","_t","_","attribute","reflect","type","Boolean","REGULAR","render","labelText","hideLabel","id","name","labelA","labelB","handleChange","inputClasses","toggleClasses","stateText","_t2","static"],"sources":["components/toggle/toggle.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport CDSCheckbox from '../checkbox/checkbox';\nimport { TOGGLE_SIZE } from './defs';\nimport styles from './toggle.scss';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TOGGLE_SIZE };\n\n/**\n * Basic toggle.\n *\n * @element cds-toggle\n * @slot label-text - The label text.\n * @slot checked-text - The text for the checked state.\n * @slot unchecked-text - The text for the unchecked state.\n * @fires cds-toggle-changed - The custom event fired after this changebox changes its checked state.\n */\n@customElement(`${prefix}-toggle`)\nclass CDSToggle extends HostListenerMixin(CDSCheckbox) {\n @query('button')\n protected _checkboxNode!: HTMLInputElement;\n\n /**\n * Handles `click` event on the `<button>` in the shadow DOM.\n */\n protected _handleChange() {\n const { checked, indeterminate } = this._checkboxNode;\n if (this.disabled || this.readOnly) {\n return;\n }\n this.checked = !checked;\n this.indeterminate = indeterminate;\n const { eventChange } = this.constructor as typeof CDSCheckbox;\n this.dispatchEvent(\n new CustomEvent(eventChange, {\n bubbles: true,\n composed: true,\n detail: {\n indeterminate,\n },\n })\n );\n }\n\n /**\n * Handles `keydown` event on the toggle button.\n */\n @HostListener('keydown')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n protected _handleKeydown = async (event: KeyboardEvent) => {\n const { key } = event;\n\n if (key === ' ') {\n this._handleChange();\n }\n };\n\n protected _renderCheckmark() {\n if (this.size !== TOGGLE_SIZE.SMALL) {\n return undefined;\n }\n return html`\n <svg\n class=\"${prefix}--toggle__check\"\n width=\"6px\"\n height=\"5px\"\n viewBox=\"0 0 6 5\">\n <path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\" />\n </svg>\n `;\n }\n\n /**\n * The text for the checked state.\n */\n @property({ attribute: 'label-a' })\n labelA = '';\n\n /**\n * Hide label text.\n */\n @property({ reflect: true, type: Boolean })\n hideLabel = false;\n\n /**\n * Read only boolean.\n */\n @property({ reflect: true, attribute: 'read-only', type: Boolean })\n readOnly = false;\n\n /**\n * Toggle size.\n */\n @property({ reflect: true })\n size = TOGGLE_SIZE.REGULAR;\n\n /**\n * The text for the unchecked state.\n */\n @property({ attribute: 'label-b' })\n labelB = '';\n\n render() {\n const {\n checked,\n disabled,\n labelText,\n hideLabel,\n id,\n name,\n size,\n labelA,\n labelB,\n value,\n _handleChange: handleChange,\n } = this;\n const inputClasses = classMap({\n [`${prefix}--toggle__appearance`]: true,\n [`${prefix}--toggle__appearance--${size}`]: size,\n });\n const toggleClasses = classMap({\n [`${prefix}--toggle__switch`]: true,\n [`${prefix}--toggle__switch--checked`]: checked,\n });\n const stateText = checked ? labelA : labelB;\n return html`\n <button\n class=\"${prefix}--toggle__button\"\n role=\"switch\"\n type=\"button\"\n aria-checked=${checked}\n aria-lable=${labelText}\n .checked=\"${checked}\"\n name=\"${ifDefined(name)}\"\n value=\"${ifDefined(value)}\"\n ?disabled=${disabled}\n id=\"${id}\"></button>\n <label for=\"${id}\" class=\"${prefix}--toggle__label\">\n <span class=\"${prefix}--toggle__label-text\">${labelText}</span>\n <div class=\"${inputClasses}\">\n <div class=\"${toggleClasses}\" @click=${handleChange}>\n ${this._renderCheckmark()}\n </div>\n <span\n ?hidden=\"${hideLabel}\"\n class=\"${prefix}--toggle__text\"\n aria-hidden=\"true\"\n >${stateText}</span\n >\n </div>\n </label>\n `;\n }\n\n /**\n * The name of the custom event fired after this changebox changes its checked state.\n */\n static get eventChange() {\n return `${prefix}-toggle-changed`;\n }\n\n static styles = styles;\n}\n\nexport default CDSToggle;\n"],"mappings":";;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,QAAQ,QAAQ,6BAA6B;AACtD,SAASC,IAAI,QAAQ,KAAK;AAC1B,SAASC,QAAQ,EAAEC,KAAK,QAAQ,mBAAmB;AACnD,SAASC,SAAS,QAAQ,8BAA8B;AACxD,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,WAAW,MAAM,sBAAsB;AAC9C,SAASC,WAAW,QAAQ,QAAQ;AACpC,OAAOC,MAAM,MAAM,mBAAe;AAClC,OAAOC,YAAY,MAAM,wCAAwC;AACjE,OAAOC,iBAAiB,MAAM,oCAAoC;AAClE,SAASC,aAAa,IAAIC,aAAa,QAAQ,yCAAyC;AAExF,SAASL,WAAW;;AAEpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARA,IAUMM,SAAS,GAAAC,SAAA,EADdF,aAAa,CAAC,GAAGP,MAAM,SAAS,CAAC,aAAAU,WAAA,EAAAC,kBAAA;EAAlC,MACMH,SAAS,SAAAG,kBAAA,CAAwC;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAgJvD;EAAC;IAAAI,CAAA,EAhJKN,SAAS;IAAAO,CAAA;MAAAC,IAAA;MAAAC,UAAA,GACZnB,KAAK,CAAC,QAAQ,CAAC;MAAAoB,GAAA;MAAAC,KAAA;IAAA;MAAAH,IAAA;MAAAE,GAAA;MAAAC,KAAA;MAGhB;AACF;AACA;MACE,
|
|
1
|
+
{"version":3,"file":"toggle.js","names":["classMap","html","property","query","ifDefined","prefix","CDSCheckbox","TOGGLE_SIZE","styles","HostListener","HostListenerMixin","carbonElement","customElement","CDSToggle","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","decorators","key","value","_handleChange","checked","indeterminate","_checkboxNode","disabled","readOnly","eventChange","dispatchEvent","CustomEvent","bubbles","composed","detail","event","_renderCheckmark","size","SMALL","undefined","_t","_","attribute","reflect","type","Boolean","REGULAR","render","labelText","hideLabel","id","name","labelA","labelB","handleChange","inputClasses","toggleClasses","stateText","_t2","static"],"sources":["components/toggle/toggle.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport CDSCheckbox from '../checkbox/checkbox';\nimport { TOGGLE_SIZE } from './defs';\nimport styles from './toggle.scss';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TOGGLE_SIZE };\n\n/**\n * Basic toggle.\n *\n * @element cds-toggle\n * @slot label-text - The label text.\n * @slot checked-text - The text for the checked state.\n * @slot unchecked-text - The text for the unchecked state.\n * @fires cds-toggle-changed - The custom event fired after this changebox changes its checked state.\n */\n@customElement(`${prefix}-toggle`)\nclass CDSToggle extends HostListenerMixin(CDSCheckbox) {\n @query('button')\n protected _checkboxNode!: HTMLInputElement;\n\n /**\n * Handles `click` event on the `<button>` in the shadow DOM.\n */\n protected _handleChange() {\n const { checked, indeterminate } = this._checkboxNode;\n if (this.disabled || this.readOnly) {\n return;\n }\n this.checked = !checked;\n this.indeterminate = indeterminate;\n const { eventChange } = this.constructor as typeof CDSCheckbox;\n this.dispatchEvent(\n new CustomEvent(eventChange, {\n bubbles: true,\n composed: true,\n detail: {\n indeterminate,\n },\n })\n );\n }\n\n /**\n * Handles `keydown` event on the toggle button.\n */\n @HostListener('keydown')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n protected _handleKeydown = async (event: KeyboardEvent) => {\n const { key } = event;\n\n if (key === ' ') {\n this._handleChange();\n }\n };\n\n protected _renderCheckmark() {\n if (this.size !== TOGGLE_SIZE.SMALL) {\n return undefined;\n }\n return html`\n <svg\n class=\"${prefix}--toggle__check\"\n width=\"6px\"\n height=\"5px\"\n viewBox=\"0 0 6 5\">\n <path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\" />\n </svg>\n `;\n }\n\n /**\n * The text for the checked state.\n */\n @property({ attribute: 'label-a' })\n labelA = '';\n\n /**\n * Hide label text.\n */\n @property({ reflect: true, type: Boolean })\n hideLabel = false;\n\n /**\n * Read only boolean.\n */\n @property({ reflect: true, attribute: 'read-only', type: Boolean })\n readOnly = false;\n\n /**\n * Toggle size.\n */\n @property({ reflect: true })\n size = TOGGLE_SIZE.REGULAR;\n\n /**\n * The text for the unchecked state.\n */\n @property({ attribute: 'label-b' })\n labelB = '';\n\n render() {\n const {\n checked,\n disabled,\n labelText,\n hideLabel,\n id,\n name,\n size,\n labelA,\n labelB,\n value,\n _handleChange: handleChange,\n } = this;\n const inputClasses = classMap({\n [`${prefix}--toggle__appearance`]: true,\n [`${prefix}--toggle__appearance--${size}`]: size,\n });\n const toggleClasses = classMap({\n [`${prefix}--toggle__switch`]: true,\n [`${prefix}--toggle__switch--checked`]: checked,\n });\n const stateText = checked ? labelA : labelB;\n return html`\n <button\n class=\"${prefix}--toggle__button\"\n role=\"switch\"\n type=\"button\"\n aria-checked=${checked}\n aria-lable=${labelText}\n .checked=\"${checked}\"\n name=\"${ifDefined(name)}\"\n value=\"${ifDefined(value)}\"\n ?disabled=${disabled}\n id=\"${id}\"></button>\n <label for=\"${id}\" class=\"${prefix}--toggle__label\">\n <span class=\"${prefix}--toggle__label-text\">${labelText}</span>\n <div class=\"${inputClasses}\">\n <div class=\"${toggleClasses}\" @click=${handleChange}>\n ${this._renderCheckmark()}\n </div>\n <span\n ?hidden=\"${hideLabel}\"\n class=\"${prefix}--toggle__text\"\n aria-hidden=\"true\"\n >${stateText}</span\n >\n </div>\n </label>\n `;\n }\n\n /**\n * The name of the custom event fired after this changebox changes its checked state.\n */\n static get eventChange() {\n return `${prefix}-toggle-changed`;\n }\n\n static styles = styles;\n}\n\nexport default CDSToggle;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -277,7 +277,7 @@ let CDSToggletip = _decorate([customElement(`${prefix}-toggletip`)], function (_
|
|
|
277
277
|
kind: "get",
|
|
278
278
|
static: true,
|
|
279
279
|
key: "selectorToggletipContent",
|
|
280
|
-
value: function
|
|
280
|
+
value: function () {
|
|
281
281
|
return `.${prefix}--popover-content`;
|
|
282
282
|
}
|
|
283
283
|
|
|
@@ -288,7 +288,7 @@ let CDSToggletip = _decorate([customElement(`${prefix}-toggletip`)], function (_
|
|
|
288
288
|
kind: "get",
|
|
289
289
|
static: true,
|
|
290
290
|
key: "selectorToggletipCaret",
|
|
291
|
-
value: function
|
|
291
|
+
value: function () {
|
|
292
292
|
return `.${prefix}--popover-caret`;
|
|
293
293
|
}
|
|
294
294
|
|
|
@@ -299,7 +299,7 @@ let CDSToggletip = _decorate([customElement(`${prefix}-toggletip`)], function (_
|
|
|
299
299
|
kind: "get",
|
|
300
300
|
static: true,
|
|
301
301
|
key: "selectorToggletipButton",
|
|
302
|
-
value: function
|
|
302
|
+
value: function () {
|
|
303
303
|
return `.${prefix}--toggletip-button`;
|
|
304
304
|
}
|
|
305
305
|
}, {
|