@scania/tegel 0.0.1-beta.7 → 0.0.1-beta.9
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/package.json +1 -1
- package/readme.md +7 -8
- package/dist/cjs/index-e1c79686.js +0 -1912
- package/dist/cjs/index.cjs.js +0 -2
- package/dist/cjs/loader.cjs.js +0 -21
- package/dist/cjs/popper-11d5f714.js +0 -1801
- package/dist/cjs/sdds-accordion-item.cjs.entry.js +0 -34
- package/dist/cjs/sdds-accordion.cjs.entry.js +0 -21
- package/dist/cjs/sdds-badges.cjs.entry.js +0 -55
- package/dist/cjs/sdds-body-cell_2.cjs.entry.js +0 -173
- package/dist/cjs/sdds-button.cjs.entry.js +0 -36
- package/dist/cjs/sdds-datetime.cjs.entry.js +0 -66
- package/dist/cjs/sdds-dropdown-filter.cjs.entry.js +0 -92
- package/dist/cjs/sdds-dropdown_2.cjs.entry.js +0 -335
- package/dist/cjs/sdds-header-cell.cjs.entry.js +0 -141
- package/dist/cjs/sdds-icon.cjs.entry.js +0 -42
- package/dist/cjs/sdds-inline-tabs-fullbleed.cjs.entry.js +0 -96
- package/dist/cjs/sdds-inline-tabs.cjs.entry.js +0 -211
- package/dist/cjs/sdds-modal.cjs.entry.js +0 -49
- package/dist/cjs/sdds-navigation-tabs.cjs.entry.js +0 -95
- package/dist/cjs/sdds-popover-canvas.cjs.entry.js +0 -76
- package/dist/cjs/sdds-popover-menu.cjs.entry.js +0 -75
- package/dist/cjs/sdds-slider.cjs.entry.js +0 -336
- package/dist/cjs/sdds-spinner.cjs.entry.js +0 -21
- package/dist/cjs/sdds-table-body-row-expandable.cjs.entry.js +0 -81
- package/dist/cjs/sdds-table-body.cjs.entry.js +0 -289
- package/dist/cjs/sdds-table-footer.cjs.entry.js +0 -165
- package/dist/cjs/sdds-table-header.cjs.entry.js +0 -100
- package/dist/cjs/sdds-table-toolbar.cjs.entry.js +0 -66
- package/dist/cjs/sdds-table.cjs.entry.js +0 -69
- package/dist/cjs/sdds-textarea.cjs.entry.js +0 -61
- package/dist/cjs/sdds-textfield.cjs.entry.js +0 -82
- package/dist/cjs/sdds-tooltip.cjs.entry.js +0 -95
- package/dist/cjs/tegel.cjs.js +0 -19
- package/dist/collection/collection-manifest.json +0 -40
- package/dist/collection/components/accordion/accordion-item/accordion-item.css +0 -134
- package/dist/collection/components/accordion/accordion-item/accordion-item.js +0 -146
- package/dist/collection/components/accordion/accordion.css +0 -77
- package/dist/collection/components/accordion/accordion.js +0 -62
- package/dist/collection/components/badge/badges.css +0 -42
- package/dist/collection/components/badge/badges.js +0 -150
- package/dist/collection/components/button/button-component.js +0 -154
- package/dist/collection/components/button/button.css +0 -658
- package/dist/collection/components/data-table/table/table.css +0 -15
- package/dist/collection/components/data-table/table/table.js +0 -253
- package/dist/collection/components/data-table/table-body/table-body.css +0 -22
- package/dist/collection/components/data-table/table-body/table-body.js +0 -425
- package/dist/collection/components/data-table/table-body-cell/table-body-cell.css +0 -40
- package/dist/collection/components/data-table/table-body-cell/table-body-cell.js +0 -169
- package/dist/collection/components/data-table/table-body-row/table-body-row.css +0 -196
- package/dist/collection/components/data-table/table-body-row/table-body-row.js +0 -164
- package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.css +0 -79
- package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.js +0 -155
- package/dist/collection/components/data-table/table-footer/table-footer.css +0 -93
- package/dist/collection/components/data-table/table-footer/table-footer.js +0 -355
- package/dist/collection/components/data-table/table-header/table-header.css +0 -204
- package/dist/collection/components/data-table/table-header/table-header.js +0 -153
- package/dist/collection/components/data-table/table-header-cell/table-header-cell.css +0 -126
- package/dist/collection/components/data-table/table-header-cell/table-header-cell.js +0 -320
- package/dist/collection/components/data-table/table-toolbar/table-toolbar.css +0 -92
- package/dist/collection/components/data-table/table-toolbar/table-toolbar.js +0 -142
- package/dist/collection/components/datetime/datetime.css +0 -375
- package/dist/collection/components/datetime/datetime.js +0 -251
- package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.js +0 -339
- package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js +0 -185
- package/dist/collection/components/dropdown/dropdown.css +0 -891
- package/dist/collection/components/dropdown/dropdown.js +0 -554
- package/dist/collection/components/icon/icon.css +0 -16
- package/dist/collection/components/icon/icon.js +0 -89
- package/dist/collection/components/icon/iconsArray.js +0 -2
- package/dist/collection/components/modal/modal.css +0 -324
- package/dist/collection/components/modal/modal.js +0 -146
- package/dist/collection/components/popover-canvas/popover-canvas.css +0 -20
- package/dist/collection/components/popover-canvas/popover-canvas.js +0 -190
- package/dist/collection/components/popover-menu/popover-menu.css +0 -19
- package/dist/collection/components/popover-menu/popover-menu.js +0 -189
- package/dist/collection/components/slider/slider.css +0 -260
- package/dist/collection/components/slider/slider.js +0 -682
- package/dist/collection/components/spinner/spinner.css +0 -79
- package/dist/collection/components/spinner/spinner.js +0 -61
- package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.css +0 -159
- package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.js +0 -302
- package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.css +0 -172
- package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.js +0 -126
- package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css +0 -153
- package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js +0 -103
- package/dist/collection/components/textarea/textarea.css +0 -283
- package/dist/collection/components/textarea/textarea.js +0 -336
- package/dist/collection/components/textfield/textfield.css +0 -494
- package/dist/collection/components/textfield/textfield.js +0 -359
- package/dist/collection/components/tooltip/tooltip.css +0 -46
- package/dist/collection/components/tooltip/tooltip.js +0 -200
- package/dist/collection/index.js +0 -1
- package/dist/collection/stories/assets/code-brackets.svg +0 -1
- package/dist/collection/stories/assets/colors.svg +0 -1
- package/dist/collection/stories/assets/comments.svg +0 -1
- package/dist/collection/stories/assets/direction.svg +0 -1
- package/dist/collection/stories/assets/flow.svg +0 -1
- package/dist/collection/stories/assets/plugin.svg +0 -1
- package/dist/collection/stories/assets/repo.svg +0 -1
- package/dist/collection/stories/assets/stackalt.svg +0 -1
- package/dist/collection/utils/utils.js +0 -12
- package/dist/components/dropdown-option.js +0 -100
- package/dist/components/dropdown.js +0 -296
- package/dist/components/icon.js +0 -58
- package/dist/components/index.d.ts +0 -50
- package/dist/components/index.js +0 -30
- package/dist/components/popper.js +0 -1799
- package/dist/components/sdds-accordion-item.d.ts +0 -11
- package/dist/components/sdds-accordion-item.js +0 -60
- package/dist/components/sdds-accordion.d.ts +0 -11
- package/dist/components/sdds-accordion.js +0 -38
- package/dist/components/sdds-badges.d.ts +0 -11
- package/dist/components/sdds-badges.js +0 -76
- package/dist/components/sdds-body-cell.d.ts +0 -11
- package/dist/components/sdds-body-cell.js +0 -6
- package/dist/components/sdds-button.d.ts +0 -11
- package/dist/components/sdds-button.js +0 -58
- package/dist/components/sdds-datetime.d.ts +0 -11
- package/dist/components/sdds-datetime.js +0 -90
- package/dist/components/sdds-dropdown-filter.d.ts +0 -11
- package/dist/components/sdds-dropdown-filter.js +0 -138
- package/dist/components/sdds-dropdown-option.d.ts +0 -11
- package/dist/components/sdds-dropdown-option.js +0 -6
- package/dist/components/sdds-dropdown.d.ts +0 -11
- package/dist/components/sdds-dropdown.js +0 -6
- package/dist/components/sdds-header-cell.d.ts +0 -11
- package/dist/components/sdds-header-cell.js +0 -173
- package/dist/components/sdds-icon.d.ts +0 -11
- package/dist/components/sdds-icon.js +0 -6
- package/dist/components/sdds-inline-tabs-fullbleed.d.ts +0 -11
- package/dist/components/sdds-inline-tabs-fullbleed.js +0 -115
- package/dist/components/sdds-inline-tabs.d.ts +0 -11
- package/dist/components/sdds-inline-tabs.js +0 -235
- package/dist/components/sdds-modal.d.ts +0 -11
- package/dist/components/sdds-modal.js +0 -69
- package/dist/components/sdds-navigation-tabs.d.ts +0 -11
- package/dist/components/sdds-navigation-tabs.js +0 -113
- package/dist/components/sdds-popover-canvas.d.ts +0 -11
- package/dist/components/sdds-popover-canvas.js +0 -97
- package/dist/components/sdds-popover-menu.d.ts +0 -11
- package/dist/components/sdds-popover-menu.js +0 -96
- package/dist/components/sdds-slider.d.ts +0 -11
- package/dist/components/sdds-slider.js +0 -366
- package/dist/components/sdds-spinner.d.ts +0 -11
- package/dist/components/sdds-spinner.js +0 -37
- package/dist/components/sdds-table-body-row-expandable.d.ts +0 -11
- package/dist/components/sdds-table-body-row-expandable.js +0 -104
- package/dist/components/sdds-table-body-row.d.ts +0 -11
- package/dist/components/sdds-table-body-row.js +0 -6
- package/dist/components/sdds-table-body.d.ts +0 -11
- package/dist/components/sdds-table-body.js +0 -337
- package/dist/components/sdds-table-footer.d.ts +0 -11
- package/dist/components/sdds-table-footer.js +0 -196
- package/dist/components/sdds-table-header.d.ts +0 -11
- package/dist/components/sdds-table-header.js +0 -125
- package/dist/components/sdds-table-toolbar.d.ts +0 -11
- package/dist/components/sdds-table-toolbar.js +0 -88
- package/dist/components/sdds-table.d.ts +0 -11
- package/dist/components/sdds-table.js +0 -92
- package/dist/components/sdds-textarea.d.ts +0 -11
- package/dist/components/sdds-textarea.js +0 -90
- package/dist/components/sdds-textfield.d.ts +0 -11
- package/dist/components/sdds-textfield.js +0 -111
- package/dist/components/sdds-tooltip.d.ts +0 -11
- package/dist/components/sdds-tooltip.js +0 -116
- package/dist/components/table-body-cell.js +0 -102
- package/dist/components/table-body-row.js +0 -119
- package/dist/esm/index-b67b15a6.js +0 -1884
- package/dist/esm/index.js +0 -1
- package/dist/esm/loader.js +0 -17
- package/dist/esm/polyfills/core-js.js +0 -11
- package/dist/esm/polyfills/css-shim.js +0 -1
- package/dist/esm/polyfills/dom.js +0 -79
- package/dist/esm/polyfills/es5-html-element.js +0 -1
- package/dist/esm/polyfills/index.js +0 -34
- package/dist/esm/polyfills/system.js +0 -6
- package/dist/esm/popper-f860750c.js +0 -1799
- package/dist/esm/sdds-accordion-item.entry.js +0 -30
- package/dist/esm/sdds-accordion.entry.js +0 -17
- package/dist/esm/sdds-badges.entry.js +0 -51
- package/dist/esm/sdds-body-cell_2.entry.js +0 -168
- package/dist/esm/sdds-button.entry.js +0 -32
- package/dist/esm/sdds-datetime.entry.js +0 -62
- package/dist/esm/sdds-dropdown-filter.entry.js +0 -88
- package/dist/esm/sdds-dropdown_2.entry.js +0 -330
- package/dist/esm/sdds-header-cell.entry.js +0 -137
- package/dist/esm/sdds-icon.entry.js +0 -38
- package/dist/esm/sdds-inline-tabs-fullbleed.entry.js +0 -92
- package/dist/esm/sdds-inline-tabs.entry.js +0 -207
- package/dist/esm/sdds-modal.entry.js +0 -45
- package/dist/esm/sdds-navigation-tabs.entry.js +0 -91
- package/dist/esm/sdds-popover-canvas.entry.js +0 -72
- package/dist/esm/sdds-popover-menu.entry.js +0 -71
- package/dist/esm/sdds-slider.entry.js +0 -332
- package/dist/esm/sdds-spinner.entry.js +0 -17
- package/dist/esm/sdds-table-body-row-expandable.entry.js +0 -77
- package/dist/esm/sdds-table-body.entry.js +0 -285
- package/dist/esm/sdds-table-footer.entry.js +0 -161
- package/dist/esm/sdds-table-header.entry.js +0 -96
- package/dist/esm/sdds-table-toolbar.entry.js +0 -62
- package/dist/esm/sdds-table.entry.js +0 -65
- package/dist/esm/sdds-textarea.entry.js +0 -57
- package/dist/esm/sdds-textfield.entry.js +0 -78
- package/dist/esm/sdds-tooltip.entry.js +0 -91
- package/dist/esm/tegel.js +0 -17
- package/dist/index.cjs.js +0 -1
- package/dist/index.js +0 -1
- package/dist/node_modules/@types/jest/index.d.ts +0 -1512
- package/dist/tegel/index.esm.js +0 -0
- package/dist/tegel/p-040efb32.entry.js +0 -1
- package/dist/tegel/p-12ca5cfa.entry.js +0 -1
- package/dist/tegel/p-157e1618.js +0 -2
- package/dist/tegel/p-1fe61cf6.entry.js +0 -1
- package/dist/tegel/p-2f376504.entry.js +0 -1
- package/dist/tegel/p-44ced895.entry.js +0 -1
- package/dist/tegel/p-4880f03d.entry.js +0 -1
- package/dist/tegel/p-4aba73a3.entry.js +0 -1
- package/dist/tegel/p-4b58a02c.entry.js +0 -1
- package/dist/tegel/p-4cb85347.entry.js +0 -1
- package/dist/tegel/p-52031b5a.entry.js +0 -1
- package/dist/tegel/p-677baf7f.entry.js +0 -1
- package/dist/tegel/p-71797eaf.entry.js +0 -1
- package/dist/tegel/p-7373284c.entry.js +0 -1
- package/dist/tegel/p-7451779b.entry.js +0 -1
- package/dist/tegel/p-77aeea3b.entry.js +0 -1
- package/dist/tegel/p-8582d6a7.entry.js +0 -1
- package/dist/tegel/p-96021bd0.entry.js +0 -1
- package/dist/tegel/p-9d8caf51.entry.js +0 -1
- package/dist/tegel/p-a5919930.entry.js +0 -1
- package/dist/tegel/p-b01cface.entry.js +0 -1
- package/dist/tegel/p-bf896643.entry.js +0 -1
- package/dist/tegel/p-c311725c.entry.js +0 -1
- package/dist/tegel/p-cf72dfd9.entry.js +0 -1
- package/dist/tegel/p-d91caec6.entry.js +0 -1
- package/dist/tegel/p-e10eec33.entry.js +0 -1
- package/dist/tegel/p-ec26fc38.js +0 -1
- package/dist/tegel/p-f2262a69.entry.js +0 -1
- package/dist/tegel/p-f2f7aa45.entry.js +0 -1
- package/dist/tegel/tegel.css +0 -101
- package/dist/tegel/tegel.esm.js +0 -1
- package/dist/types/components/accordion/accordion-item/accordion-item.d.ts +0 -17
- package/dist/types/components/accordion/accordion.d.ts +0 -7
- package/dist/types/components/badge/badges.d.ts +0 -16
- package/dist/types/components/button/button-component.d.ts +0 -15
- package/dist/types/components/data-table/table/table.d.ts +0 -47
- package/dist/types/components/data-table/table-body/table-body.d.ts +0 -54
- package/dist/types/components/data-table/table-body-cell/table-body-cell.d.ts +0 -24
- package/dist/types/components/data-table/table-body-row/table-body-row.d.ts +0 -27
- package/dist/types/components/data-table/table-body-row-expandable/table-body-row-expandable.d.ts +0 -27
- package/dist/types/components/data-table/table-footer/table-footer.d.ts +0 -50
- package/dist/types/components/data-table/table-header/table-header.d.ts +0 -27
- package/dist/types/components/data-table/table-header-cell/table-header-cell.d.ts +0 -45
- package/dist/types/components/data-table/table-toolbar/table-toolbar.d.ts +0 -22
- package/dist/types/components/datetime/datetime.d.ts +0 -32
- package/dist/types/components/dropdown/dropdown-filter/dropdown-filter.d.ts +0 -42
- package/dist/types/components/dropdown/dropdown-option/dropdown-option.d.ts +0 -19
- package/dist/types/components/dropdown/dropdown.d.ts +0 -56
- package/dist/types/components/icon/icon.d.ts +0 -12
- package/dist/types/components/modal/modal.d.ts +0 -16
- package/dist/types/components/popover-canvas/popover-canvas.d.ts +0 -18
- package/dist/types/components/popover-menu/popover-menu.d.ts +0 -18
- package/dist/types/components/slider/slider.d.ts +0 -82
- package/dist/types/components/spinner/spinner.d.ts +0 -7
- package/dist/types/components/tabs/inline-tabs-default/inline-tabs.d.ts +0 -41
- package/dist/types/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.d.ts +0 -20
- package/dist/types/components/tabs/navigation-tabs/navigation-tabs.d.ts +0 -18
- package/dist/types/components/textarea/textarea.d.ts +0 -41
- package/dist/types/components/textfield/textfield.d.ts +0 -42
- package/dist/types/components/tooltip/tooltip.d.ts +0 -20
- package/dist/types/components.d.ts +0 -1752
- package/dist/types/global.d.ts +0 -2
- package/dist/types/index.d.ts +0 -1
- package/dist/types/stencil-public-runtime.d.ts +0 -1581
- package/dist/types/utils/utils.d.ts +0 -2
- package/loader/cdn.js +0 -3
- package/loader/index.cjs.js +0 -3
- package/loader/index.d.ts +0 -12
- package/loader/index.es2017.js +0 -3
- package/loader/index.js +0 -4
- package/loader/package.json +0 -11
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/stackalt</title><g id="illustration/stackalt" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFAE00" d="M23.8628277,0 L23.8628277,48 L3.32291648,36.2491883 L3.32155653,11.9499781 L23.8628277,0 Z M23.8670509,0 L44.408322,11.9499781 L44.4069621,36.2491883 L23.8670509,48 L23.8670509,0 Z" opacity=".196"/><path id="Rectangle-46-Copy-3" fill="#66BF3C" d="M15.8232279,19.1155258 L24.7368455,21.4714881 C29.6053842,22.7582937 33.4077423,26.5606518 34.694548,31.4291905 L37.0505103,40.3428082 C37.6150232,42.4786032 36.3412474,44.6676353 34.2054524,45.2321482 C33.5569474,45.4035549 32.87575,45.4091235 32.2245294,45.2483418 L23.3459013,43.0562718 C18.2976962,41.809906 14.3561301,37.8683399 13.1097642,32.8201348 L10.9176943,23.9415066 C10.3881737,21.7967682 11.6975664,19.6288529 13.8423049,19.0993322 C14.4935255,18.9385505 15.1747229,18.9441191 15.8232279,19.1155258 Z" opacity=".5" transform="translate(23.999997, 32.166058) rotate(-45.000000) translate(-23.999997, -32.166058)"/><path id="Rectangle-46-Copy-2" fill="#FFAE00" d="M15.8232279,11.2216893 L24.7368455,13.5776516 C29.6053842,14.8644572 33.4077423,18.6668153 34.694548,23.5353541 L37.0505103,32.4489717 C37.6150232,34.5847667 36.3412474,36.7737988 34.2054524,37.3383117 C33.5569474,37.5097184 32.87575,37.515287 32.2245294,37.3545053 L23.3459013,35.1624353 C18.2976962,33.9160695 14.3561301,29.9745034 13.1097642,24.9262983 L10.9176943,16.0476701 C10.3881737,13.9029317 11.6975664,11.7350164 13.8423049,11.2054957 C14.4935255,11.044714 15.1747229,11.0502826 15.8232279,11.2216893 Z" opacity=".5" transform="translate(23.999997, 24.272222) rotate(-45.000000) translate(-23.999997, -24.272222)"/><path id="Rectangle-46-Copy" fill="#FC521F" d="M15.8232279,3.32785281 L24.7368455,5.68381509 C29.6053842,6.97062075 33.4077423,10.7729788 34.694548,15.6415176 L37.0505103,24.5551352 C37.6150232,26.6909302 36.3412474,28.8799623 34.2054524,29.4444752 C33.5569474,29.6158819 32.87575,29.6214505 32.2245294,29.4606688 L23.3459013,27.2685988 C18.2976962,26.022233 14.3561301,22.0806669 13.1097642,17.0324618 L10.9176943,8.15383364 C10.3881737,6.00909519 11.6975664,3.84117987 13.8423049,3.31165925 C14.4935255,3.15087753 15.1747229,3.15644615 15.8232279,3.32785281 Z" opacity=".5" transform="translate(23.999997, 16.378385) rotate(-45.000000) translate(-23.999997, -16.378385)"/></g></svg>
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import prettier from 'prettier/standalone';
|
|
2
|
-
import parserBabel from 'prettier/parser-babel';
|
|
3
|
-
import parserHtml from 'prettier/parser-html';
|
|
4
|
-
const prettierOptions = {
|
|
5
|
-
bracketSameLine: false,
|
|
6
|
-
htmlWhitespaceSensitivity: 'ignore',
|
|
7
|
-
printWidth: 100,
|
|
8
|
-
};
|
|
9
|
-
export const formatHtmlPreview = (htmlStr) => prettier.format(htmlStr, Object.assign({ parser: 'html', plugins: [parserBabel, parserHtml] }, prettierOptions));
|
|
10
|
-
export function demoFormat(first, middle, last) {
|
|
11
|
-
return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
|
|
12
|
-
}
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
|
-
|
|
3
|
-
const dropdownCss = ":root{--sdds-headline-01:normal normal bold 40px/40px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-01-ls:0;--sdds-headline-02:normal normal bold 32px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-02-ls:-0.04em;--sdds-headline-03:normal normal bold 24px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-03-ls:-0.03em;--sdds-headline-04:normal normal bold 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-04-ls:-0.02em;--sdds-headline-05:normal normal bold 14px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-05-ls:-0.02em;--sdds-headline-06:normal normal bold 14px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-06-ls:-0.02em;--sdds-headline-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-07-ls:-0.01em;--sdds-paragraph-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-01-ls:-0.03em;--sdds-paragraph-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-02-ls:-0.01em;--sdds-body-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-01-ls:-0.02em;--sdds-body-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-02-ls:-0.02em;--sdds-detail-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-01-ls:-0.01em;--sdds-detail-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-02-ls:-0.01em;--sdds-detail-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-03-ls:-0.01em;--sdds-detail-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-04-ls:0.08em;--sdds-detail-04-tt:uppercase;--sdds-detail-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-05-ls:0;--sdds-detail-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-06-ls:0.08em;--sdds-detail-06-tt:uppercase;--sdds-detail-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-07-ls:0;--sdds-expressive-headline-01:normal normal bold 80px/80px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-01-ls:0;--sdds-expressive-headline-02:normal normal bold 56px/56px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-02-ls:0;--sdds-headline-ex-01:normal normal bold 40px/40px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-01-ls:0;--sdds-headline-ex-02:normal normal bold 32px/32px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-02-ls:-0.04em;--sdds-headline-ex-03:normal normal bold 24px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-03-ls:-0.03em;--sdds-headline-ex-04:normal normal bold 20px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-04-ls:-0.01em;--sdds-headline-ex-05:normal normal bold 16px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-05-ls:-0.02em;--sdds-headline-ex-06:normal normal bold 14px/16px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-06-ls:-0.02em;--sdds-headline-ex-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-ex-07-ls:-0.01em;--sdds-paragraph-ex-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-01-ls:-0.03em;--sdds-paragraph-ex-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-02-ls:-0.01em;--sdds-body-ex-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-01-ls:-0.02em;--sdds-body-ex-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-02-ls:-0.01em;--sdds-detail-ex-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-01-ls:-0.01em;--sdds-detail-ex-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-02-ls:-0.01em;--sdds-detail-ex-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-03-ls:-0.01em;--sdds-detail-ex-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-04-ls:0.08em;--sdds-detail-ex-04-tt:uppercase;--sdds-detail-ex-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-05-ls:0;--sdds-detail-ex-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-06-ls:0.08em;--sdds-detail-ex-06-tt:uppercase;--sdds-detail-ex-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-07-ls:0}:root,:host,::slotted(*),.sdds-theme-light{--sdds-link:var(--sdds-grey-958);--sdds-link-text-decoration:none;--sdds-dropdown-bg:var(--sdds-white);--sdds-dropdown-bg-hover:var(--sdds-grey-50)}:root .sdds-on-white-bg,:host .sdds-on-white-bg,::slotted(*) .sdds-on-white-bg,.sdds-theme-light .sdds-on-white-bg{--sdds-dropdown-bg:var(--sdds-grey-50);--sdds-dropdown-bg-hover:var(--sdds-grey-100)}.sdds-dropdown-helper{font:var(--sdds-detail-ex-05);letter-spacing:var(--sdds-detail-ex-05-ls);color:var(--sdds-grey-700);margin-top:var(--sdds-spacing-element-4);display:flex}.sdds-dropdown-helper .sdds-dropdown-error-icon{width:16px;height:16px;padding-right:9px;display:none}.sdds-dropdown-label-inside{font:var(--sdds-detail-ex-07);letter-spacing:var(--sdds-detail-ex-07-ls);color:var(--sdds-grey-700)}.sdds-dropdown-label-outside{font:var(--sdds-detail-ex-05);letter-spacing:var(--sdds-detail-ex-05-ls);display:block;color:var(--sdds-grey-958);margin-bottom:var(--sdds-spacing-element-8)}:root{--sdds-headline-01:normal normal bold 40px/40px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-01-ls:0;--sdds-headline-02:normal normal bold 32px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-02-ls:-0.04em;--sdds-headline-03:normal normal bold 24px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-03-ls:-0.03em;--sdds-headline-04:normal normal bold 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-04-ls:-0.02em;--sdds-headline-05:normal normal bold 14px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-05-ls:-0.02em;--sdds-headline-06:normal normal bold 14px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-06-ls:-0.02em;--sdds-headline-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-07-ls:-0.01em;--sdds-paragraph-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-01-ls:-0.03em;--sdds-paragraph-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-02-ls:-0.01em;--sdds-body-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-01-ls:-0.02em;--sdds-body-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-02-ls:-0.02em;--sdds-detail-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-01-ls:-0.01em;--sdds-detail-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-02-ls:-0.01em;--sdds-detail-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-03-ls:-0.01em;--sdds-detail-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-04-ls:0.08em;--sdds-detail-04-tt:uppercase;--sdds-detail-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-05-ls:0;--sdds-detail-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-06-ls:0.08em;--sdds-detail-06-tt:uppercase;--sdds-detail-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-07-ls:0;--sdds-expressive-headline-01:normal normal bold 80px/80px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-01-ls:0;--sdds-expressive-headline-02:normal normal bold 56px/56px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-02-ls:0;--sdds-headline-ex-01:normal normal bold 40px/40px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-01-ls:0;--sdds-headline-ex-02:normal normal bold 32px/32px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-02-ls:-0.04em;--sdds-headline-ex-03:normal normal bold 24px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-03-ls:-0.03em;--sdds-headline-ex-04:normal normal bold 20px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-04-ls:-0.01em;--sdds-headline-ex-05:normal normal bold 16px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-05-ls:-0.02em;--sdds-headline-ex-06:normal normal bold 14px/16px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-06-ls:-0.02em;--sdds-headline-ex-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-ex-07-ls:-0.01em;--sdds-paragraph-ex-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-01-ls:-0.03em;--sdds-paragraph-ex-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-02-ls:-0.01em;--sdds-body-ex-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-01-ls:-0.02em;--sdds-body-ex-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-02-ls:-0.01em;--sdds-detail-ex-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-01-ls:-0.01em;--sdds-detail-ex-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-02-ls:-0.01em;--sdds-detail-ex-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-03-ls:-0.01em;--sdds-detail-ex-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-04-ls:0.08em;--sdds-detail-ex-04-tt:uppercase;--sdds-detail-ex-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-05-ls:0;--sdds-detail-ex-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-06-ls:0.08em;--sdds-detail-ex-06-tt:uppercase;--sdds-detail-ex-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-07-ls:0}:root,:host,::slotted(*),.sdds-theme-light{--sdds-link:var(--sdds-grey-958);--sdds-link-text-decoration:none;--sdds-dropdown-bg:var(--sdds-white);--sdds-dropdown-bg-hover:var(--sdds-grey-50)}:root .sdds-on-white-bg,:host .sdds-on-white-bg,::slotted(*) .sdds-on-white-bg,.sdds-theme-light .sdds-on-white-bg{--sdds-dropdown-bg:var(--sdds-grey-50);--sdds-dropdown-bg-hover:var(--sdds-grey-100)}:root{--sdds-headline-01:normal normal bold 40px/40px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-01-ls:0;--sdds-headline-02:normal normal bold 32px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-02-ls:-0.04em;--sdds-headline-03:normal normal bold 24px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-03-ls:-0.03em;--sdds-headline-04:normal normal bold 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-04-ls:-0.02em;--sdds-headline-05:normal normal bold 14px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-05-ls:-0.02em;--sdds-headline-06:normal normal bold 14px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-06-ls:-0.02em;--sdds-headline-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-07-ls:-0.01em;--sdds-paragraph-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-01-ls:-0.03em;--sdds-paragraph-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-02-ls:-0.01em;--sdds-body-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-01-ls:-0.02em;--sdds-body-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-02-ls:-0.02em;--sdds-detail-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-01-ls:-0.01em;--sdds-detail-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-02-ls:-0.01em;--sdds-detail-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-03-ls:-0.01em;--sdds-detail-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-04-ls:0.08em;--sdds-detail-04-tt:uppercase;--sdds-detail-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-05-ls:0;--sdds-detail-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-06-ls:0.08em;--sdds-detail-06-tt:uppercase;--sdds-detail-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-07-ls:0;--sdds-expressive-headline-01:normal normal bold 80px/80px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-01-ls:0;--sdds-expressive-headline-02:normal normal bold 56px/56px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-02-ls:0;--sdds-headline-ex-01:normal normal bold 40px/40px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-01-ls:0;--sdds-headline-ex-02:normal normal bold 32px/32px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-02-ls:-0.04em;--sdds-headline-ex-03:normal normal bold 24px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-03-ls:-0.03em;--sdds-headline-ex-04:normal normal bold 20px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-04-ls:-0.01em;--sdds-headline-ex-05:normal normal bold 16px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-05-ls:-0.02em;--sdds-headline-ex-06:normal normal bold 14px/16px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-06-ls:-0.02em;--sdds-headline-ex-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-ex-07-ls:-0.01em;--sdds-paragraph-ex-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-01-ls:-0.03em;--sdds-paragraph-ex-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-02-ls:-0.01em;--sdds-body-ex-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-01-ls:-0.02em;--sdds-body-ex-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-02-ls:-0.01em;--sdds-detail-ex-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-01-ls:-0.01em;--sdds-detail-ex-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-02-ls:-0.01em;--sdds-detail-ex-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-03-ls:-0.01em;--sdds-detail-ex-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-04-ls:0.08em;--sdds-detail-ex-04-tt:uppercase;--sdds-detail-ex-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-05-ls:0;--sdds-detail-ex-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-06-ls:0.08em;--sdds-detail-ex-06-tt:uppercase;--sdds-detail-ex-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-07-ls:0}:root,.sdds-theme-light{--sdds-checkbox-color:var(--sdds-grey-900);--sdds-checkbox-interaction-01:var(--sdds-blue-800);--sdds-checkbox-interaction-02:var(--sdds-white);--sdds-checkbox-bg-hover:var(--sdds-blue-800);--sdds-checkbox-bg-focus:var(--sdds-blue-800);--sdds-checkbox-disabled:var(--sdds-grey-400);--sdds-checkbox-bg-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-bg-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-500);--sdds-checkbox-color-disabled-after:var(--sdds-grey-500)}:root .sdds-theme-dark,.sdds-theme-light .sdds-theme-dark{--sdds-checkbox-color:var(--sdds-white);--sdds-checkbox-interaction-01:var(--sdds-white);--sdds-checkbox-interaction-02:var(--sdds-grey-958);--sdds-checkbox-bg-hover:white;--sdds-checkbox-bg-focus:white;--sdds-checkbox-disabled:white;--sdds-checkbox-bg-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-bg-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-700);--sdds-checkbox-color-disabled-after:var(--sdds-grey-700)}.sdds-checkbox-item{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.sdds-checkbox-item *{box-sizing:border-box}.sdds-checkbox-item .sdds-form-input[type=checkbox]{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]+label{color:var(--sdds-checkbox-color);padding-left:var(--sdds-spacing-element-8);padding-top:var(--sdds-spacing-element-4);padding-bottom:var(--sdds-spacing-element-4);cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before,.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{content:\"\";position:absolute;box-sizing:border-box;border-radius:2px}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before{width:24px;height:24px;left:0;top:0}.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{border:1px solid var(--sdds-checkbox-interaction-01);background-color:var(--sdds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px}.sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before{background-color:var(--sdds-checkbox-bg-hover);opacity:0.12}.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before{background-color:var(--sdds-checkbox-bg-focus);opacity:0.24;animation:cb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled{cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled::after,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled::after{border-color:var(--sdds-checkbox-border-color-disabled-after)}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled+label,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled+label{color:var(--sdds-grey-600);cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled:hover::before,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled:hover::before{display:none}.sdds-form-input[type=checkbox]:checked::after{background-image:var(--sdds-checkbox-bg-img);background-color:var(--sdds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.sdds-form-input[type=checkbox]:checked:disabled:hover::before,.sdds-form-input[type=checkbox]:checked:disabled::before,.sdds-form-input[type=checkbox]:checked.disabled:hover::before,.sdds-form-input[type=checkbox]:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.sdds-form-input[type=checkbox]:checked:disabled::after,.sdds-form-input[type=checkbox]:checked.disabled::after{background-image:var(--sdds-checkbox-bg-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}@keyframes cb-focus{0%{transform:scale(0);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}:host,::slotted(*){color:var(--sdds-grey-958);box-sizing:border-box;box-sizing:border-box}:host *,::slotted(*) *{box-sizing:border-box}:host,::slotted(*){--sdds-link:var(--sdds-grey-958);--sdds-link-text-decoration:none;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-grey-958);box-sizing:border-box}:host{position:relative;z-index:auto}:host::part(dropdown-filter-disabled){cursor:not-allowed;caret-color:transparent;pointer-events:none;color:var(--sdds-grey-400);border:none}:host::part(dropdown-filter-disabled)::placeholder{color:var(--sdds-grey-400)}.sdds-dropdown{position:relative;display:flex;flex-flow:column wrap;width:100%;border:0}.sdds-dropdown,.sdds-dropdown *{box-sizing:border-box}.sdds-dropdown .sdds-dropdown-toggle{font:var(--sdds-detail-ex-02);letter-spacing:var(--sdds-detail-ex-02-ls);color:var(--sdds-grey-958);display:flex;align-items:center;background-color:var(--sdds-dropdown-bg);cursor:pointer;transition:box-shadow 0.1s ease-in, border-bottom-color 150ms ease;border-radius:4px 4px 0 0;border:none;border-bottom:1px solid var(--sdds-grey-400);box-shadow:none;width:100%;text-align:left;outline:none;padding:20px 16px;display:flex;align-items:center}.sdds-dropdown .sdds-dropdown-toggle:hover{border-bottom-color:var(--sdds-grey-600)}.sdds-dropdown .sdds-dropdown-toggle:focus::before{content:\" \";position:absolute;z-index:2;bottom:0;left:0;width:100%;border-bottom:2px solid var(--sdds-blue-400)}.sdds-dropdown .sdds-dropdown-toggle:active,.sdds-dropdown .sdds-dropdown-toggle.active .sdds-dropdown .sdds-dropdown-toggle.selected{border-bottom-color:var(--sdds-grey-800)}.sdds-dropdown .sdds-dropdown-toggle.is-filter{transition:border 0.1s ease-in 0.1s;cursor:text}.sdds-dropdown .sdds-dropdown-toggle-lg{padding:20px 16px}.sdds-dropdown .sdds-dropdown-toggle-md{padding:16px}.sdds-dropdown .sdds-dropdown-toggle-sm{padding:12px 16px}.sdds-dropdown .sdds-dropdown-toggle.sdds-dropdown-toggle-label-inside-lg{padding:20px 16px 16px}.sdds-dropdown .sdds-dropdown-toggle.sdds-dropdown-toggle-label-inside-md{padding:16px 16px 12px}.sdds-dropdown .sdds-dropdown-toggle--selected:not(:focus){border-bottom:1px solid var(--sdds-grey-800)}.sdds-dropdown .sdds-dropdown-arrow{width:20px;position:absolute;right:16px;color:inherit;transform:rotate(0);transition:transform ease 250ms}.sdds-dropdown .sdds-dropdown-placeholder{color:var(--sdds-grey-700)}.sdds-dropdown .sdds-dropdown-label{display:grid;width:calc(100% - 25px)}.sdds-dropdown .sdds-dropdown-label-container{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdds-dropdown.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-label-container--label-inside{padding-bottom:12px}.sdds-dropdown .sdds-dropdown-filter{border:0;outline:none;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-grey-958);width:100%;background:transparent}.sdds-dropdown .sdds-dropdown-filter:focus{outline:none}.sdds-dropdown .sdds-dropdown-filter::placeholder{color:var(--sdds-grey-700);opacity:1}.sdds-dropdown .sdds-dropdown-menu{z-index:10000;background-color:var(--sdds-white);position:absolute;top:100%;left:0;min-width:100%;max-height:360px;border-color:transparent;border-style:solid;border-width:0 1px;box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.1);border-left-color:var(--sdds-grey-100);border-right-color:var(--sdds-grey-100);overflow-x:hidden;overflow-y:auto;transform:scaleY(0);transform-origin:top;transition:transform 250ms ease}.sdds-dropdown .sdds-dropdown-menu::-webkit-scrollbar{width:4px;background-color:inherit}.sdds-dropdown .sdds-dropdown-menu::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-300)}.sdds-dropdown .sdds-dropdown-menu ::-webkit-scrollbar-button{height:0;width:0}.sdds-dropdown.sdds-dropdown-lg .sdds-dropdown-toggle{height:56px}.sdds-dropdown.sdds-dropdown-md .sdds-dropdown-toggle{height:48px}.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-toggle{height:40px}:host(.sdds-dropdown--open-upwards) .sdds-dropdown .sdds-dropdown-menu{top:auto;bottom:100%;box-shadow:0 -1px 3px 0 rgba(0, 0, 0, 0.1);transform-origin:bottom}:host(.sdds-dropdown--open-upwards[label-position=outside]) span.sdds-dropdown-menu{bottom:calc(100% - 24px)}:host([disabled=true]){cursor:not-allowed}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle{pointer-events:none;color:var(--sdds-grey-400);border:none;padding:0 16px}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-placeholder{color:var(--sdds-grey-400)}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-label-inside{color:var(--sdds-grey-400)}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle:focus::before{content:none}:host(.sdds-dropdown--error) .sdds-dropdown .sdds-dropdown-toggle{border-color:var(--sdds-negative)}:host(.sdds-dropdown--error) .sdds-dropdown .sdds-dropdown-toggle:focus::before{border-color:var(--sdds-negative)}:host(.sdds-dropdown--error) .sdds-dropdown-helper{color:var(--sdds-negative)}:host(.sdds-dropdown--error) .sdds-dropdown-helper .sdds-dropdown-error-icon{display:flex}:host ::slotted(sdds-dropdown-option){display:flex;padding:var(--sdds-spacing-element-16);background-color:var(--sdds-white);border-top:1px solid transparent;border-bottom:1px solid var(--sdds-grey-100);opacity:0;visibility:hidden;cursor:pointer;box-sizing:border-box}:host ::slotted(sdds-dropdown-option:last-child){border-bottom-color:transparent;border-bottom-left-radius:4px;border-bottom-right-radius:4px}:host ::slotted(sdds-dropdown-option:hover),:host ::slotted(sdds-dropdown-option:focus){background-color:var(--sdds-dropdown-bg-hover)}:host ::slotted(sdds-dropdown-option:hover:not(:focus):not(sdds-dropdown-option.selected)){background-color:var(--sdds-dropdown-bg-hover)}:host ::slotted(sdds-dropdown-option:hover:focus){outline:none}:host ::slotted(sdds-dropdown-option:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host ::slotted(sdds-dropdown-option.sdds-dropdown--selected),:host ::slotted(sdds-dropdown-option.selected),:host ::slotted(sdds-dropdown-option.active),:host ::slotted(sdds-dropdown-option:active){background-color:var(--sdds-grey-300);border-top:1px solid var(--sdds-grey-300);border-bottom:1px solid var(--sdds-grey-300)}:host ::slotted(sdds-dropdown-option.sdds-option--no-result){cursor:not-allowed;pointer-events:none}:host ::slotted(sdds-dropdown-option.sdds-dropdown-option-disabled),:host ::slotted(sdds-dropdown-option.selected.sdds-dropdown-option-disabled){cursor:not-allowed;color:var(--sdds-grey-400);background-color:var(--sdds-white)}:host(.sdds-dropdown--open-upwards) ::slotted(sdds-dropdown-option:first-child){border-radius:4px 4px 0 0}:host(.sdds-dropdown--open-upwards) ::slotted(sdds-dropdown-option:last-child){border-radius:0;border-bottom:1px solid var(--sdds-grey-300)}.sdds-option-label{margin:auto 0;display:flex;align-content:center;text-decoration:none;flex-grow:2}.sdds-option-checkmark{color:inherit;opacity:0;transition:opacity 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);margin-left:var(--sdds-spacing-element-16)}:host([size=sm]) ::slotted(sdds-dropdown-option){padding:var(--sdds-spacing-element-12) var(--sdds-spacing-element-16)}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-toggle{box-shadow:0 -1px 3px -1px rgba(0, 0, 0, 0.1);border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-toggle.is-filter::before{content:\" \";position:absolute;z-index:2;bottom:0;left:0;width:100%;border-bottom:1px solid var(--sdds-blue-400)}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-arrow{transform:rotate(180deg)}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-menu{transform:scaleY(1)}:host(.sdds-dropdown--open) ::slotted(sdds-dropdown-option){visibility:visible;opacity:1}:host(.selected) .sdds-option-checkmark{opacity:1}.sdds-dropdown-label-inside{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-grey-700);position:absolute;transition:transform 250ms ease, color 200ms ease;width:calc(100% - 63px);overflow:hidden;text-overflow:ellipsis;transform:translate(0, -10px);font-size:10px}.sdds-dropdown-label-container.sdds-dropdown-label-container--label-inside .sdds-dropdown-placeholder{display:block;padding-top:4px}.sdds-dropdown-lg .sdds-dropdown-label-inside{display:block;top:16px}.sdds-dropdown-md .sdds-dropdown-label-inside{display:block;top:12px}.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-label-inside{display:none}.sdds-dropdown-multiselect-result{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdds-option-checkbox{margin-right:8px}.sdds-form-label{display:flex}";
|
|
4
|
-
|
|
5
|
-
const DropdownOption = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
6
|
-
constructor() {
|
|
7
|
-
super();
|
|
8
|
-
this.__registerHost();
|
|
9
|
-
this.__attachShadow();
|
|
10
|
-
this.selectOption = createEvent(this, "selectOption", 7);
|
|
11
|
-
this.innerValue = undefined;
|
|
12
|
-
this.selected = false;
|
|
13
|
-
this.disabled = false;
|
|
14
|
-
this.value = undefined;
|
|
15
|
-
}
|
|
16
|
-
changeFocusHandler() {
|
|
17
|
-
this.host.focus();
|
|
18
|
-
}
|
|
19
|
-
removeFocusHandler() {
|
|
20
|
-
this.host.blur();
|
|
21
|
-
}
|
|
22
|
-
onKeyDown(event) {
|
|
23
|
-
if (event.code === 'Enter') {
|
|
24
|
-
this.selectOptionHandler({
|
|
25
|
-
value: this.value,
|
|
26
|
-
label: this.host.innerText,
|
|
27
|
-
parent: this.host.parentNode,
|
|
28
|
-
});
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
componentWillLoad() {
|
|
32
|
-
this.innerValue = this.value;
|
|
33
|
-
this.isMultiSelectOption = this.host
|
|
34
|
-
.closest('sdds-dropdown')
|
|
35
|
-
.classList.contains('sdds-dropdown-multiselect');
|
|
36
|
-
}
|
|
37
|
-
selectOptionHandler(value) {
|
|
38
|
-
if (!this.disabled) {
|
|
39
|
-
const listOptions = value.parent.childNodes;
|
|
40
|
-
this.selectOption.emit(value);
|
|
41
|
-
if (!this.isMultiSelectOption) {
|
|
42
|
-
listOptions.forEach((optionEl) => {
|
|
43
|
-
// TODO: fix and enable rule
|
|
44
|
-
// eslint-disable-next-line no-param-reassign
|
|
45
|
-
optionEl.selected = false;
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
const optionCheckbox = this.host.shadowRoot.querySelector('input');
|
|
49
|
-
if (this.selected) {
|
|
50
|
-
this.selected = false;
|
|
51
|
-
if (optionCheckbox) {
|
|
52
|
-
optionCheckbox.checked = false;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
else {
|
|
56
|
-
this.selected = true;
|
|
57
|
-
if (optionCheckbox) {
|
|
58
|
-
optionCheckbox.checked = true;
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
render() {
|
|
64
|
-
return (h(Host, { onClick: (ev) => {
|
|
65
|
-
if (this.isMultiSelectOption) {
|
|
66
|
-
ev.stopPropagation();
|
|
67
|
-
}
|
|
68
|
-
return this.selectOptionHandler({
|
|
69
|
-
value: this.value,
|
|
70
|
-
label: this.host.innerText,
|
|
71
|
-
parent: ev.target.parentNode,
|
|
72
|
-
});
|
|
73
|
-
}, class: {
|
|
74
|
-
'selected': this.selected,
|
|
75
|
-
'sdds-dropdown-option-disabled': this.disabled,
|
|
76
|
-
}, tabindex: "-1", "aria-disabled": this.disabled }, this.isMultiSelectOption && (h("div", { class: "sdds-checkbox-item sdds-option-checkbox" }, h("label", { class: "sdds-form-label" }, h("input", { class: "sdds-form-input", type: "checkbox", checked: this.selected, disabled: this.disabled })))), h("span", { class: "sdds-option-label" }, h("slot", null)), !this.isMultiSelectOption && (h("span", { class: "sdds-option-checkmark" }, h("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 3L4 6L9 1", stroke: "currentColor", "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
|
|
77
|
-
}
|
|
78
|
-
get host() { return this; }
|
|
79
|
-
static get style() { return dropdownCss; }
|
|
80
|
-
}, [1, "sdds-dropdown-option", {
|
|
81
|
-
"selected": [4],
|
|
82
|
-
"disabled": [4],
|
|
83
|
-
"value": [513],
|
|
84
|
-
"innerValue": [32]
|
|
85
|
-
}, [[1, "mouseover", "changeFocusHandler"], [1, "mouseout", "removeFocusHandler"], [0, "keydown", "onKeyDown"]]]);
|
|
86
|
-
function defineCustomElement() {
|
|
87
|
-
if (typeof customElements === "undefined") {
|
|
88
|
-
return;
|
|
89
|
-
}
|
|
90
|
-
const components = ["sdds-dropdown-option"];
|
|
91
|
-
components.forEach(tagName => { switch (tagName) {
|
|
92
|
-
case "sdds-dropdown-option":
|
|
93
|
-
if (!customElements.get(tagName)) {
|
|
94
|
-
customElements.define(tagName, DropdownOption);
|
|
95
|
-
}
|
|
96
|
-
break;
|
|
97
|
-
} });
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
export { DropdownOption as D, defineCustomElement as d };
|
|
@@ -1,296 +0,0 @@
|
|
|
1
|
-
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
|
-
|
|
3
|
-
const dropdownCss = ":root{--sdds-headline-01:normal normal bold 40px/40px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-01-ls:0;--sdds-headline-02:normal normal bold 32px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-02-ls:-0.04em;--sdds-headline-03:normal normal bold 24px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-03-ls:-0.03em;--sdds-headline-04:normal normal bold 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-04-ls:-0.02em;--sdds-headline-05:normal normal bold 14px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-05-ls:-0.02em;--sdds-headline-06:normal normal bold 14px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-06-ls:-0.02em;--sdds-headline-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-07-ls:-0.01em;--sdds-paragraph-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-01-ls:-0.03em;--sdds-paragraph-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-02-ls:-0.01em;--sdds-body-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-01-ls:-0.02em;--sdds-body-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-02-ls:-0.02em;--sdds-detail-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-01-ls:-0.01em;--sdds-detail-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-02-ls:-0.01em;--sdds-detail-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-03-ls:-0.01em;--sdds-detail-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-04-ls:0.08em;--sdds-detail-04-tt:uppercase;--sdds-detail-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-05-ls:0;--sdds-detail-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-06-ls:0.08em;--sdds-detail-06-tt:uppercase;--sdds-detail-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-07-ls:0;--sdds-expressive-headline-01:normal normal bold 80px/80px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-01-ls:0;--sdds-expressive-headline-02:normal normal bold 56px/56px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-02-ls:0;--sdds-headline-ex-01:normal normal bold 40px/40px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-01-ls:0;--sdds-headline-ex-02:normal normal bold 32px/32px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-02-ls:-0.04em;--sdds-headline-ex-03:normal normal bold 24px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-03-ls:-0.03em;--sdds-headline-ex-04:normal normal bold 20px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-04-ls:-0.01em;--sdds-headline-ex-05:normal normal bold 16px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-05-ls:-0.02em;--sdds-headline-ex-06:normal normal bold 14px/16px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-06-ls:-0.02em;--sdds-headline-ex-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-ex-07-ls:-0.01em;--sdds-paragraph-ex-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-01-ls:-0.03em;--sdds-paragraph-ex-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-02-ls:-0.01em;--sdds-body-ex-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-01-ls:-0.02em;--sdds-body-ex-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-02-ls:-0.01em;--sdds-detail-ex-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-01-ls:-0.01em;--sdds-detail-ex-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-02-ls:-0.01em;--sdds-detail-ex-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-03-ls:-0.01em;--sdds-detail-ex-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-04-ls:0.08em;--sdds-detail-ex-04-tt:uppercase;--sdds-detail-ex-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-05-ls:0;--sdds-detail-ex-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-06-ls:0.08em;--sdds-detail-ex-06-tt:uppercase;--sdds-detail-ex-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-07-ls:0}:root,:host,::slotted(*),.sdds-theme-light{--sdds-link:var(--sdds-grey-958);--sdds-link-text-decoration:none;--sdds-dropdown-bg:var(--sdds-white);--sdds-dropdown-bg-hover:var(--sdds-grey-50)}:root .sdds-on-white-bg,:host .sdds-on-white-bg,::slotted(*) .sdds-on-white-bg,.sdds-theme-light .sdds-on-white-bg{--sdds-dropdown-bg:var(--sdds-grey-50);--sdds-dropdown-bg-hover:var(--sdds-grey-100)}.sdds-dropdown-helper{font:var(--sdds-detail-ex-05);letter-spacing:var(--sdds-detail-ex-05-ls);color:var(--sdds-grey-700);margin-top:var(--sdds-spacing-element-4);display:flex}.sdds-dropdown-helper .sdds-dropdown-error-icon{width:16px;height:16px;padding-right:9px;display:none}.sdds-dropdown-label-inside{font:var(--sdds-detail-ex-07);letter-spacing:var(--sdds-detail-ex-07-ls);color:var(--sdds-grey-700)}.sdds-dropdown-label-outside{font:var(--sdds-detail-ex-05);letter-spacing:var(--sdds-detail-ex-05-ls);display:block;color:var(--sdds-grey-958);margin-bottom:var(--sdds-spacing-element-8)}:root{--sdds-headline-01:normal normal bold 40px/40px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-01-ls:0;--sdds-headline-02:normal normal bold 32px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-02-ls:-0.04em;--sdds-headline-03:normal normal bold 24px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-03-ls:-0.03em;--sdds-headline-04:normal normal bold 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-04-ls:-0.02em;--sdds-headline-05:normal normal bold 14px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-05-ls:-0.02em;--sdds-headline-06:normal normal bold 14px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-06-ls:-0.02em;--sdds-headline-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-07-ls:-0.01em;--sdds-paragraph-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-01-ls:-0.03em;--sdds-paragraph-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-02-ls:-0.01em;--sdds-body-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-01-ls:-0.02em;--sdds-body-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-02-ls:-0.02em;--sdds-detail-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-01-ls:-0.01em;--sdds-detail-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-02-ls:-0.01em;--sdds-detail-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-03-ls:-0.01em;--sdds-detail-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-04-ls:0.08em;--sdds-detail-04-tt:uppercase;--sdds-detail-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-05-ls:0;--sdds-detail-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-06-ls:0.08em;--sdds-detail-06-tt:uppercase;--sdds-detail-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-07-ls:0;--sdds-expressive-headline-01:normal normal bold 80px/80px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-01-ls:0;--sdds-expressive-headline-02:normal normal bold 56px/56px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-02-ls:0;--sdds-headline-ex-01:normal normal bold 40px/40px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-01-ls:0;--sdds-headline-ex-02:normal normal bold 32px/32px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-02-ls:-0.04em;--sdds-headline-ex-03:normal normal bold 24px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-03-ls:-0.03em;--sdds-headline-ex-04:normal normal bold 20px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-04-ls:-0.01em;--sdds-headline-ex-05:normal normal bold 16px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-05-ls:-0.02em;--sdds-headline-ex-06:normal normal bold 14px/16px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-06-ls:-0.02em;--sdds-headline-ex-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-ex-07-ls:-0.01em;--sdds-paragraph-ex-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-01-ls:-0.03em;--sdds-paragraph-ex-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-02-ls:-0.01em;--sdds-body-ex-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-01-ls:-0.02em;--sdds-body-ex-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-02-ls:-0.01em;--sdds-detail-ex-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-01-ls:-0.01em;--sdds-detail-ex-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-02-ls:-0.01em;--sdds-detail-ex-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-03-ls:-0.01em;--sdds-detail-ex-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-04-ls:0.08em;--sdds-detail-ex-04-tt:uppercase;--sdds-detail-ex-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-05-ls:0;--sdds-detail-ex-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-06-ls:0.08em;--sdds-detail-ex-06-tt:uppercase;--sdds-detail-ex-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-07-ls:0}:root,:host,::slotted(*),.sdds-theme-light{--sdds-link:var(--sdds-grey-958);--sdds-link-text-decoration:none;--sdds-dropdown-bg:var(--sdds-white);--sdds-dropdown-bg-hover:var(--sdds-grey-50)}:root .sdds-on-white-bg,:host .sdds-on-white-bg,::slotted(*) .sdds-on-white-bg,.sdds-theme-light .sdds-on-white-bg{--sdds-dropdown-bg:var(--sdds-grey-50);--sdds-dropdown-bg-hover:var(--sdds-grey-100)}:root{--sdds-headline-01:normal normal bold 40px/40px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-01-ls:0;--sdds-headline-02:normal normal bold 32px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-02-ls:-0.04em;--sdds-headline-03:normal normal bold 24px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-03-ls:-0.03em;--sdds-headline-04:normal normal bold 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-04-ls:-0.02em;--sdds-headline-05:normal normal bold 14px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-05-ls:-0.02em;--sdds-headline-06:normal normal bold 14px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-06-ls:-0.02em;--sdds-headline-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-07-ls:-0.01em;--sdds-paragraph-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-01-ls:-0.03em;--sdds-paragraph-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-02-ls:-0.01em;--sdds-body-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-01-ls:-0.02em;--sdds-body-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-02-ls:-0.02em;--sdds-detail-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-01-ls:-0.01em;--sdds-detail-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-02-ls:-0.01em;--sdds-detail-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-03-ls:-0.01em;--sdds-detail-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-04-ls:0.08em;--sdds-detail-04-tt:uppercase;--sdds-detail-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-05-ls:0;--sdds-detail-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-06-ls:0.08em;--sdds-detail-06-tt:uppercase;--sdds-detail-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-07-ls:0;--sdds-expressive-headline-01:normal normal bold 80px/80px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-01-ls:0;--sdds-expressive-headline-02:normal normal bold 56px/56px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-02-ls:0;--sdds-headline-ex-01:normal normal bold 40px/40px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-01-ls:0;--sdds-headline-ex-02:normal normal bold 32px/32px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-02-ls:-0.04em;--sdds-headline-ex-03:normal normal bold 24px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-03-ls:-0.03em;--sdds-headline-ex-04:normal normal bold 20px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-04-ls:-0.01em;--sdds-headline-ex-05:normal normal bold 16px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-05-ls:-0.02em;--sdds-headline-ex-06:normal normal bold 14px/16px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-06-ls:-0.02em;--sdds-headline-ex-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-ex-07-ls:-0.01em;--sdds-paragraph-ex-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-01-ls:-0.03em;--sdds-paragraph-ex-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-02-ls:-0.01em;--sdds-body-ex-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-01-ls:-0.02em;--sdds-body-ex-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-02-ls:-0.01em;--sdds-detail-ex-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-01-ls:-0.01em;--sdds-detail-ex-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-02-ls:-0.01em;--sdds-detail-ex-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-03-ls:-0.01em;--sdds-detail-ex-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-04-ls:0.08em;--sdds-detail-ex-04-tt:uppercase;--sdds-detail-ex-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-05-ls:0;--sdds-detail-ex-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-06-ls:0.08em;--sdds-detail-ex-06-tt:uppercase;--sdds-detail-ex-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-07-ls:0}:root,.sdds-theme-light{--sdds-checkbox-color:var(--sdds-grey-900);--sdds-checkbox-interaction-01:var(--sdds-blue-800);--sdds-checkbox-interaction-02:var(--sdds-white);--sdds-checkbox-bg-hover:var(--sdds-blue-800);--sdds-checkbox-bg-focus:var(--sdds-blue-800);--sdds-checkbox-disabled:var(--sdds-grey-400);--sdds-checkbox-bg-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-bg-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-500);--sdds-checkbox-color-disabled-after:var(--sdds-grey-500)}:root .sdds-theme-dark,.sdds-theme-light .sdds-theme-dark{--sdds-checkbox-color:var(--sdds-white);--sdds-checkbox-interaction-01:var(--sdds-white);--sdds-checkbox-interaction-02:var(--sdds-grey-958);--sdds-checkbox-bg-hover:white;--sdds-checkbox-bg-focus:white;--sdds-checkbox-disabled:white;--sdds-checkbox-bg-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-bg-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-700);--sdds-checkbox-color-disabled-after:var(--sdds-grey-700)}.sdds-checkbox-item{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.sdds-checkbox-item *{box-sizing:border-box}.sdds-checkbox-item .sdds-form-input[type=checkbox]{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]+label{color:var(--sdds-checkbox-color);padding-left:var(--sdds-spacing-element-8);padding-top:var(--sdds-spacing-element-4);padding-bottom:var(--sdds-spacing-element-4);cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before,.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{content:\"\";position:absolute;box-sizing:border-box;border-radius:2px}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before{width:24px;height:24px;left:0;top:0}.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{border:1px solid var(--sdds-checkbox-interaction-01);background-color:var(--sdds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px}.sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before{background-color:var(--sdds-checkbox-bg-hover);opacity:0.12}.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before{background-color:var(--sdds-checkbox-bg-focus);opacity:0.24;animation:cb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled{cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled::after,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled::after{border-color:var(--sdds-checkbox-border-color-disabled-after)}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled+label,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled+label{color:var(--sdds-grey-600);cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled:hover::before,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled:hover::before{display:none}.sdds-form-input[type=checkbox]:checked::after{background-image:var(--sdds-checkbox-bg-img);background-color:var(--sdds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.sdds-form-input[type=checkbox]:checked:disabled:hover::before,.sdds-form-input[type=checkbox]:checked:disabled::before,.sdds-form-input[type=checkbox]:checked.disabled:hover::before,.sdds-form-input[type=checkbox]:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.sdds-form-input[type=checkbox]:checked:disabled::after,.sdds-form-input[type=checkbox]:checked.disabled::after{background-image:var(--sdds-checkbox-bg-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}@keyframes cb-focus{0%{transform:scale(0);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}:host,::slotted(*){color:var(--sdds-grey-958);box-sizing:border-box;box-sizing:border-box}:host *,::slotted(*) *{box-sizing:border-box}:host,::slotted(*){--sdds-link:var(--sdds-grey-958);--sdds-link-text-decoration:none;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-grey-958);box-sizing:border-box}:host{position:relative;z-index:auto}:host::part(dropdown-filter-disabled){cursor:not-allowed;caret-color:transparent;pointer-events:none;color:var(--sdds-grey-400);border:none}:host::part(dropdown-filter-disabled)::placeholder{color:var(--sdds-grey-400)}.sdds-dropdown{position:relative;display:flex;flex-flow:column wrap;width:100%;border:0}.sdds-dropdown,.sdds-dropdown *{box-sizing:border-box}.sdds-dropdown .sdds-dropdown-toggle{font:var(--sdds-detail-ex-02);letter-spacing:var(--sdds-detail-ex-02-ls);color:var(--sdds-grey-958);display:flex;align-items:center;background-color:var(--sdds-dropdown-bg);cursor:pointer;transition:box-shadow 0.1s ease-in, border-bottom-color 150ms ease;border-radius:4px 4px 0 0;border:none;border-bottom:1px solid var(--sdds-grey-400);box-shadow:none;width:100%;text-align:left;outline:none;padding:20px 16px;display:flex;align-items:center}.sdds-dropdown .sdds-dropdown-toggle:hover{border-bottom-color:var(--sdds-grey-600)}.sdds-dropdown .sdds-dropdown-toggle:focus::before{content:\" \";position:absolute;z-index:2;bottom:0;left:0;width:100%;border-bottom:2px solid var(--sdds-blue-400)}.sdds-dropdown .sdds-dropdown-toggle:active,.sdds-dropdown .sdds-dropdown-toggle.active .sdds-dropdown .sdds-dropdown-toggle.selected{border-bottom-color:var(--sdds-grey-800)}.sdds-dropdown .sdds-dropdown-toggle.is-filter{transition:border 0.1s ease-in 0.1s;cursor:text}.sdds-dropdown .sdds-dropdown-toggle-lg{padding:20px 16px}.sdds-dropdown .sdds-dropdown-toggle-md{padding:16px}.sdds-dropdown .sdds-dropdown-toggle-sm{padding:12px 16px}.sdds-dropdown .sdds-dropdown-toggle.sdds-dropdown-toggle-label-inside-lg{padding:20px 16px 16px}.sdds-dropdown .sdds-dropdown-toggle.sdds-dropdown-toggle-label-inside-md{padding:16px 16px 12px}.sdds-dropdown .sdds-dropdown-toggle--selected:not(:focus){border-bottom:1px solid var(--sdds-grey-800)}.sdds-dropdown .sdds-dropdown-arrow{width:20px;position:absolute;right:16px;color:inherit;transform:rotate(0);transition:transform ease 250ms}.sdds-dropdown .sdds-dropdown-placeholder{color:var(--sdds-grey-700)}.sdds-dropdown .sdds-dropdown-label{display:grid;width:calc(100% - 25px)}.sdds-dropdown .sdds-dropdown-label-container{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdds-dropdown.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-label-container--label-inside{padding-bottom:12px}.sdds-dropdown .sdds-dropdown-filter{border:0;outline:none;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-grey-958);width:100%;background:transparent}.sdds-dropdown .sdds-dropdown-filter:focus{outline:none}.sdds-dropdown .sdds-dropdown-filter::placeholder{color:var(--sdds-grey-700);opacity:1}.sdds-dropdown .sdds-dropdown-menu{z-index:10000;background-color:var(--sdds-white);position:absolute;top:100%;left:0;min-width:100%;max-height:360px;border-color:transparent;border-style:solid;border-width:0 1px;box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.1);border-left-color:var(--sdds-grey-100);border-right-color:var(--sdds-grey-100);overflow-x:hidden;overflow-y:auto;transform:scaleY(0);transform-origin:top;transition:transform 250ms ease}.sdds-dropdown .sdds-dropdown-menu::-webkit-scrollbar{width:4px;background-color:inherit}.sdds-dropdown .sdds-dropdown-menu::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-300)}.sdds-dropdown .sdds-dropdown-menu ::-webkit-scrollbar-button{height:0;width:0}.sdds-dropdown.sdds-dropdown-lg .sdds-dropdown-toggle{height:56px}.sdds-dropdown.sdds-dropdown-md .sdds-dropdown-toggle{height:48px}.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-toggle{height:40px}:host(.sdds-dropdown--open-upwards) .sdds-dropdown .sdds-dropdown-menu{top:auto;bottom:100%;box-shadow:0 -1px 3px 0 rgba(0, 0, 0, 0.1);transform-origin:bottom}:host(.sdds-dropdown--open-upwards[label-position=outside]) span.sdds-dropdown-menu{bottom:calc(100% - 24px)}:host([disabled=true]){cursor:not-allowed}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle{pointer-events:none;color:var(--sdds-grey-400);border:none;padding:0 16px}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-placeholder{color:var(--sdds-grey-400)}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-label-inside{color:var(--sdds-grey-400)}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle:focus::before{content:none}:host(.sdds-dropdown--error) .sdds-dropdown .sdds-dropdown-toggle{border-color:var(--sdds-negative)}:host(.sdds-dropdown--error) .sdds-dropdown .sdds-dropdown-toggle:focus::before{border-color:var(--sdds-negative)}:host(.sdds-dropdown--error) .sdds-dropdown-helper{color:var(--sdds-negative)}:host(.sdds-dropdown--error) .sdds-dropdown-helper .sdds-dropdown-error-icon{display:flex}:host ::slotted(sdds-dropdown-option){display:flex;padding:var(--sdds-spacing-element-16);background-color:var(--sdds-white);border-top:1px solid transparent;border-bottom:1px solid var(--sdds-grey-100);opacity:0;visibility:hidden;cursor:pointer;box-sizing:border-box}:host ::slotted(sdds-dropdown-option:last-child){border-bottom-color:transparent;border-bottom-left-radius:4px;border-bottom-right-radius:4px}:host ::slotted(sdds-dropdown-option:hover),:host ::slotted(sdds-dropdown-option:focus){background-color:var(--sdds-dropdown-bg-hover)}:host ::slotted(sdds-dropdown-option:hover:not(:focus):not(sdds-dropdown-option.selected)){background-color:var(--sdds-dropdown-bg-hover)}:host ::slotted(sdds-dropdown-option:hover:focus){outline:none}:host ::slotted(sdds-dropdown-option:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host ::slotted(sdds-dropdown-option.sdds-dropdown--selected),:host ::slotted(sdds-dropdown-option.selected),:host ::slotted(sdds-dropdown-option.active),:host ::slotted(sdds-dropdown-option:active){background-color:var(--sdds-grey-300);border-top:1px solid var(--sdds-grey-300);border-bottom:1px solid var(--sdds-grey-300)}:host ::slotted(sdds-dropdown-option.sdds-option--no-result){cursor:not-allowed;pointer-events:none}:host ::slotted(sdds-dropdown-option.sdds-dropdown-option-disabled),:host ::slotted(sdds-dropdown-option.selected.sdds-dropdown-option-disabled){cursor:not-allowed;color:var(--sdds-grey-400);background-color:var(--sdds-white)}:host(.sdds-dropdown--open-upwards) ::slotted(sdds-dropdown-option:first-child){border-radius:4px 4px 0 0}:host(.sdds-dropdown--open-upwards) ::slotted(sdds-dropdown-option:last-child){border-radius:0;border-bottom:1px solid var(--sdds-grey-300)}.sdds-option-label{margin:auto 0;display:flex;align-content:center;text-decoration:none;flex-grow:2}.sdds-option-checkmark{color:inherit;opacity:0;transition:opacity 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);margin-left:var(--sdds-spacing-element-16)}:host([size=sm]) ::slotted(sdds-dropdown-option){padding:var(--sdds-spacing-element-12) var(--sdds-spacing-element-16)}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-toggle{box-shadow:0 -1px 3px -1px rgba(0, 0, 0, 0.1);border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-toggle.is-filter::before{content:\" \";position:absolute;z-index:2;bottom:0;left:0;width:100%;border-bottom:1px solid var(--sdds-blue-400)}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-arrow{transform:rotate(180deg)}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-menu{transform:scaleY(1)}:host(.sdds-dropdown--open) ::slotted(sdds-dropdown-option){visibility:visible;opacity:1}:host(.selected) .sdds-option-checkmark{opacity:1}.sdds-dropdown-label-inside{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-grey-700);position:absolute;transition:transform 250ms ease, color 200ms ease;width:calc(100% - 63px);overflow:hidden;text-overflow:ellipsis;transform:translate(0, -10px);font-size:10px}.sdds-dropdown-label-container.sdds-dropdown-label-container--label-inside .sdds-dropdown-placeholder{display:block;padding-top:4px}.sdds-dropdown-lg .sdds-dropdown-label-inside{display:block;top:16px}.sdds-dropdown-md .sdds-dropdown-label-inside{display:block;top:12px}.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-label-inside{display:none}.sdds-dropdown-multiselect-result{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdds-option-checkbox{margin-right:8px}.sdds-form-label{display:flex}";
|
|
4
|
-
|
|
5
|
-
const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
6
|
-
constructor() {
|
|
7
|
-
super();
|
|
8
|
-
this.__registerHost();
|
|
9
|
-
this.__attachShadow();
|
|
10
|
-
this.inputSearch = createEvent(this, "inputSearch", 7);
|
|
11
|
-
this.placeholder = undefined;
|
|
12
|
-
this.defaultOption = undefined;
|
|
13
|
-
this.selectedOption = undefined;
|
|
14
|
-
this.disabled = undefined;
|
|
15
|
-
this.type = 'default';
|
|
16
|
-
this.size = 'lg';
|
|
17
|
-
this.inline = false;
|
|
18
|
-
this.labelPosition = 'no-label';
|
|
19
|
-
this.label = undefined;
|
|
20
|
-
this.state = 'default';
|
|
21
|
-
this.helper = '';
|
|
22
|
-
this.openDirection = 'auto';
|
|
23
|
-
this.optionValues = [];
|
|
24
|
-
this.optionLabels = [];
|
|
25
|
-
this.open = false;
|
|
26
|
-
this.node = undefined;
|
|
27
|
-
this.selectedLabel = '';
|
|
28
|
-
this.selectedValue = '';
|
|
29
|
-
this.selectedValuesArray = [];
|
|
30
|
-
this.selectedLabelsArray = [];
|
|
31
|
-
this.dropdownUniqueClass = '';
|
|
32
|
-
this.openUpwards = false;
|
|
33
|
-
this.dropdownMenuHeight = 0;
|
|
34
|
-
this.dropdownMenuSelector = undefined;
|
|
35
|
-
this.listItemIndex = -1;
|
|
36
|
-
this.listItemArray = undefined;
|
|
37
|
-
}
|
|
38
|
-
componentWillLoad() {
|
|
39
|
-
// If default option is set, update the default selectedLabel value
|
|
40
|
-
// this.host.children is a HTMLCollection type, cannot use forEach
|
|
41
|
-
this.listItemArray = Array.from(this.host.children);
|
|
42
|
-
this.listItemArray.map((listItem) => {
|
|
43
|
-
this.optionValues.push(listItem.value);
|
|
44
|
-
this.optionLabels.push(listItem.innerText.trim());
|
|
45
|
-
});
|
|
46
|
-
this.setOptionFromOutside(this.defaultOption);
|
|
47
|
-
if (this.size === 'small') {
|
|
48
|
-
this.size = 'sm';
|
|
49
|
-
console.warn('size="small" is deprecated, use size="sm" instead');
|
|
50
|
-
}
|
|
51
|
-
if (this.size === 'medium') {
|
|
52
|
-
this.size = 'md';
|
|
53
|
-
console.warn('size="medium" is deprecated, use size="md" instead');
|
|
54
|
-
}
|
|
55
|
-
if (this.size === 'large') {
|
|
56
|
-
this.size = 'lg';
|
|
57
|
-
console.warn('size="large" is deprecated, use size="lg" instead');
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
setOptionFromOutside(optionValue) {
|
|
61
|
-
if (optionValue) {
|
|
62
|
-
this.deselectAll();
|
|
63
|
-
// TODO
|
|
64
|
-
// eslint-disable-next-line no-param-reassign
|
|
65
|
-
optionValue = optionValue.split(',');
|
|
66
|
-
for (let i = 0; i < this.host.children.length; i++) {
|
|
67
|
-
// Todo - specify type
|
|
68
|
-
const el = this.host.children[i];
|
|
69
|
-
if (optionValue.includes(el.value.trim())) {
|
|
70
|
-
this.selectedLabelsArray = [...this.selectedLabelsArray, el.textContent.trim()];
|
|
71
|
-
this.selectedValuesArray = [...this.selectedValuesArray, el.value];
|
|
72
|
-
this.selectedLabel = el.textContent;
|
|
73
|
-
this.selectedValue = el.value;
|
|
74
|
-
el.setAttribute('selectedLabel', 'true');
|
|
75
|
-
el.setAttribute('selected', 'true');
|
|
76
|
-
}
|
|
77
|
-
else {
|
|
78
|
-
el.setAttribute('selectedLabel', 'false');
|
|
79
|
-
el.setAttribute('selected', 'false');
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
changeSelectedOption() {
|
|
85
|
-
if (this.selectedValuesArray.includes(this.selectedOption)) {
|
|
86
|
-
this.resetOption();
|
|
87
|
-
}
|
|
88
|
-
this.setOptionFromOutside(this.selectedOption);
|
|
89
|
-
this.host.setAttribute('selected-option', '');
|
|
90
|
-
}
|
|
91
|
-
handleDocClick(ev) {
|
|
92
|
-
// To stop bubble click
|
|
93
|
-
ev.stopPropagation();
|
|
94
|
-
const target = ev ? ev.composedPath()[0] : window.event.target[0];
|
|
95
|
-
if (this.node !== undefined && this.node.contains(target)) {
|
|
96
|
-
if (typeof this.textInput !== 'undefined' || this.textInput === null) {
|
|
97
|
-
this.textInput.focus();
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
else {
|
|
101
|
-
this.tabbingLabelReset();
|
|
102
|
-
this.open = false;
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
keyListener(ev) {
|
|
106
|
-
if (!this.disabled) {
|
|
107
|
-
switch (ev.key) {
|
|
108
|
-
case 'ArrowDown':
|
|
109
|
-
if (this.open) {
|
|
110
|
-
ev.preventDefault();
|
|
111
|
-
if (this.listItemIndex < this.listItemArray.length - 1) {
|
|
112
|
-
this.listItemIndex++;
|
|
113
|
-
}
|
|
114
|
-
else {
|
|
115
|
-
this.listItemIndex = 0;
|
|
116
|
-
}
|
|
117
|
-
this.listItemArray[this.listItemIndex].focus();
|
|
118
|
-
}
|
|
119
|
-
break;
|
|
120
|
-
case 'ArrowUp':
|
|
121
|
-
if (this.open) {
|
|
122
|
-
ev.preventDefault();
|
|
123
|
-
if (this.listItemIndex > 0) {
|
|
124
|
-
this.listItemIndex--;
|
|
125
|
-
}
|
|
126
|
-
else {
|
|
127
|
-
this.listItemIndex = this.listItemArray.length - 1;
|
|
128
|
-
}
|
|
129
|
-
this.listItemArray[this.listItemIndex].focus();
|
|
130
|
-
}
|
|
131
|
-
break;
|
|
132
|
-
case 'Tab':
|
|
133
|
-
this.open = false;
|
|
134
|
-
break;
|
|
135
|
-
case 'Escape':
|
|
136
|
-
this.open = false;
|
|
137
|
-
this.node.focus();
|
|
138
|
-
break;
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
handleClick() {
|
|
143
|
-
this.open = this.open === false;
|
|
144
|
-
if (this.openDirection === 'auto') {
|
|
145
|
-
this.dropdownMenuHeight = this.dropdownMenuSelector.offsetHeight;
|
|
146
|
-
const distanceToBottom = this.host.getBoundingClientRect().top;
|
|
147
|
-
const viewportHeight = window.innerHeight;
|
|
148
|
-
this.openUpwards = distanceToBottom + this.dropdownMenuHeight + 57 > viewportHeight;
|
|
149
|
-
// If summary of dropdown menu height and its distance to the bottom is more than viewport height, open menu upwards
|
|
150
|
-
// Additional 57px is added as compensation for dropdown element own input/button height
|
|
151
|
-
// It is added on handleClick due to possible dynamic injection of data when component is already rendered
|
|
152
|
-
}
|
|
153
|
-
else {
|
|
154
|
-
this.openUpwards = this.openDirection === 'up';
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
tabbingLabelReset() {
|
|
158
|
-
if (typeof this.textInput !== 'undefined' || this.textInput === null) {
|
|
159
|
-
if (!this.selectedLabel && this.selectedLabel.length <= 0) {
|
|
160
|
-
this.textInput.value = '';
|
|
161
|
-
this.inputSearch.emit('');
|
|
162
|
-
}
|
|
163
|
-
if (this.selectedLabel !== this.textInput.value) {
|
|
164
|
-
this.textInput.value = this.selectedLabel;
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
selectOptionHandler(event) {
|
|
169
|
-
this.open = this.type === 'multiselect';
|
|
170
|
-
if (this.type !== 'multiselect') {
|
|
171
|
-
this.selectedLabel = event.detail.label;
|
|
172
|
-
this.selectedValue = event.detail.value;
|
|
173
|
-
this.tabbingLabelReset();
|
|
174
|
-
}
|
|
175
|
-
else {
|
|
176
|
-
if (this.selectedValuesArray.includes(event.detail.value)) {
|
|
177
|
-
const itemIndex = this.selectedValuesArray.indexOf(event.detail.value);
|
|
178
|
-
this.selectedValuesArray = this.selectedValuesArray.filter((_value, index) => index !== itemIndex);
|
|
179
|
-
this.selectedLabelsArray = this.selectedLabelsArray.filter((_value, index) => index !== itemIndex);
|
|
180
|
-
}
|
|
181
|
-
else {
|
|
182
|
-
this.selectedValuesArray = [...this.selectedValuesArray, event.detail.value];
|
|
183
|
-
this.selectedLabelsArray = [...this.selectedLabelsArray, event.detail.label.trim()];
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
}
|
|
187
|
-
handleSearch(ev) {
|
|
188
|
-
const searchTerm = ev.target.value;
|
|
189
|
-
this.inputSearch.emit(searchTerm);
|
|
190
|
-
this.open = true;
|
|
191
|
-
}
|
|
192
|
-
deselectAll() {
|
|
193
|
-
this.selectedLabel = '';
|
|
194
|
-
this.selectedValue = '';
|
|
195
|
-
this.selectedLabelsArray = [];
|
|
196
|
-
this.selectedValuesArray = [];
|
|
197
|
-
this.listItemArray = this.listItemArray.map((optionItem) => (Object.assign(Object.assign({}, optionItem), { selected: false })));
|
|
198
|
-
}
|
|
199
|
-
async resetOption() {
|
|
200
|
-
this.deselectAll();
|
|
201
|
-
this.open = false;
|
|
202
|
-
if (this.defaultOption) {
|
|
203
|
-
this.setOptionFromOutside(this.defaultOption);
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
render() {
|
|
207
|
-
return (h(Host, { class: {
|
|
208
|
-
'sdds-dropdown--open': this.open && !this.disabled,
|
|
209
|
-
'sdds-dropdown-multiselect': this.type === 'multiselect',
|
|
210
|
-
'sdds-dropdown-inline': this.inline,
|
|
211
|
-
'sdds-dropdown--selected': this.selectedLabel.length > 0 || this.selectedLabel === '',
|
|
212
|
-
'sdds-dropdown--error': this.state === 'error',
|
|
213
|
-
'sdds-dropdown--open-upwards': this.openUpwards,
|
|
214
|
-
'sdds-dropdown--label-inside-position': this.labelPosition === 'inside' && this.selectedLabelsArray.length > 0,
|
|
215
|
-
}, "selected-value": this.selectedValue, "selected-text": this.selectedLabel, "multi-selected-values": JSON.stringify(this.selectedValuesArray), "multi-selected-labels": JSON.stringify(this.selectedLabelsArray) }, h("span", { class: `sdds-dropdown sdds-dropdown-${this.size}` }, this.labelPosition === 'outside' && this.label.length > 0 ? (h("span", { class: "sdds-dropdown-label-outside" }, this.label)) : (''), h("button", { part: this.disabled ? 'dropdown-filter-disabled' : '', disabled: this.disabled, tabindex: this.disabled ? '-1' : null, class: `sdds-dropdown-toggle ${this.selectedValue === 'filter' ? 'is-filter' : ''} ${this.selectedValue !== '' || this.selectedLabelsArray.length > 0
|
|
216
|
-
? 'sdds-dropdown-toggle--selected'
|
|
217
|
-
: ''}
|
|
218
|
-
${this.labelPosition === 'inside' && this.selectedValue !== '' && this.size !== 'sm'
|
|
219
|
-
? `sdds-dropdown-toggle-label-inside-${this.size}`
|
|
220
|
-
: `sdds-dropdown-toggle-${this.size}`}`, type: "button", onClick: () => this.handleClick(), ref: (node) => (this.node = node) }, h("span", { class: "sdds-dropdown-label" }, this.type === 'filter' ? (h("input", { part: this.disabled ? 'dropdown-filter-disabled' : '', disabled: this.disabled, tabindex: "-1", ref: (inputEl) => (this.textInput = inputEl), class: "sdds-dropdown-filter", type: "text", placeholder: this.placeholder, value: this.selectedLabel, onInput: (event) => this.handleSearch(event), autoComplete: "off" })) : (h("span", { class: {
|
|
221
|
-
'sdds-dropdown-label-container': true,
|
|
222
|
-
'sdds-dropdown-label-container--label-inside': this.labelPosition === 'inside' &&
|
|
223
|
-
this.size !== 'sm' &&
|
|
224
|
-
(this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0),
|
|
225
|
-
} }, this.size !== 'sm' &&
|
|
226
|
-
(this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0) &&
|
|
227
|
-
this.labelPosition === 'inside' &&
|
|
228
|
-
this.label.length > 0 && (h("span", { class: "sdds-dropdown-label-inside" }, this.label)), h("span", { class: `sdds-dropdown-label-main ${(this.selectedLabel.length === 0 ||
|
|
229
|
-
(this.labelPosition === 'inside' && this.label.length < 0)) &&
|
|
230
|
-
'sdds-dropdown-placeholder'}` }, this.selectedLabel.length > 0 &&
|
|
231
|
-
this.type !== 'multiselect' &&
|
|
232
|
-
this.selectedLabel, this.type === 'multiselect' && (h("span", { class: "sdds-dropdown-multiselect-result" }, this.labelPosition !== 'inside' &&
|
|
233
|
-
this.selectedLabelsArray.toString().length < 1 &&
|
|
234
|
-
this.placeholder, this.selectedLabelsArray.toString().length > 0 &&
|
|
235
|
-
this.selectedLabelsArray.toString().split(',').join(', '))), !this.selectedLabel &&
|
|
236
|
-
this.labelPosition === 'inside' &&
|
|
237
|
-
this.size !== 'sm' &&
|
|
238
|
-
this.label, !this.selectedLabel &&
|
|
239
|
-
this.type !== 'multiselect' &&
|
|
240
|
-
this.labelPosition !== 'inside' &&
|
|
241
|
-
this.placeholder, !this.selectedLabel &&
|
|
242
|
-
this.size === 'sm' &&
|
|
243
|
-
this.labelPosition === 'inside' &&
|
|
244
|
-
this.placeholder)))), h("svg", { class: "sdds-dropdown-arrow", width: "12", height: "7", viewBox: "0 0 12 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 1L6 6L11 1", stroke: "currentColor", "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { class: "sdds-dropdown-menu",
|
|
245
|
-
// Need to have reference in order to calc height and distance from bottom
|
|
246
|
-
ref: (dropdownMenu) => (this.dropdownMenuSelector = dropdownMenu) }, h("slot", null))), h("p", { class: "sdds-dropdown-helper" }, h("svg", { class: "sdds-dropdown-error-icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 4C9.37 4 3.996 9.374 3.996 16.004S9.371 28.007 16 28.007c6.63 0 12.004-5.374 12.004-12.003C28.004 9.374 22.629 4 16 4ZM2 16.004c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14Z", fill: "currentColor" }), h("path", { d: "M14.803 14.47V10h2.376v4.47l-.352 4.295h-1.672l-.352-4.295Zm-.053 5.632h2.5v2.394h-2.5v-2.394Z", fill: "currentColor" })), h("span", null, this.helper))));
|
|
247
|
-
}
|
|
248
|
-
get host() { return this; }
|
|
249
|
-
static get watchers() { return {
|
|
250
|
-
"selectedOption": ["changeSelectedOption"]
|
|
251
|
-
}; }
|
|
252
|
-
static get style() { return dropdownCss; }
|
|
253
|
-
}, [1, "sdds-dropdown", {
|
|
254
|
-
"placeholder": [1],
|
|
255
|
-
"defaultOption": [1, "default-option"],
|
|
256
|
-
"selectedOption": [1, "selected-option"],
|
|
257
|
-
"disabled": [4],
|
|
258
|
-
"type": [1],
|
|
259
|
-
"size": [1],
|
|
260
|
-
"inline": [4],
|
|
261
|
-
"labelPosition": [1, "label-position"],
|
|
262
|
-
"label": [1],
|
|
263
|
-
"state": [1],
|
|
264
|
-
"helper": [1],
|
|
265
|
-
"openDirection": [1, "open-direction"],
|
|
266
|
-
"optionValues": [32],
|
|
267
|
-
"optionLabels": [32],
|
|
268
|
-
"open": [32],
|
|
269
|
-
"node": [32],
|
|
270
|
-
"selectedLabel": [32],
|
|
271
|
-
"selectedValue": [32],
|
|
272
|
-
"selectedValuesArray": [32],
|
|
273
|
-
"selectedLabelsArray": [32],
|
|
274
|
-
"dropdownUniqueClass": [32],
|
|
275
|
-
"openUpwards": [32],
|
|
276
|
-
"dropdownMenuHeight": [32],
|
|
277
|
-
"dropdownMenuSelector": [32],
|
|
278
|
-
"listItemIndex": [32],
|
|
279
|
-
"listItemArray": [32],
|
|
280
|
-
"resetOption": [64]
|
|
281
|
-
}, [[4, "click", "handleDocClick"], [0, "keydown", "keyListener"], [0, "selectOption", "selectOptionHandler"]]]);
|
|
282
|
-
function defineCustomElement() {
|
|
283
|
-
if (typeof customElements === "undefined") {
|
|
284
|
-
return;
|
|
285
|
-
}
|
|
286
|
-
const components = ["sdds-dropdown"];
|
|
287
|
-
components.forEach(tagName => { switch (tagName) {
|
|
288
|
-
case "sdds-dropdown":
|
|
289
|
-
if (!customElements.get(tagName)) {
|
|
290
|
-
customElements.define(tagName, Dropdown);
|
|
291
|
-
}
|
|
292
|
-
break;
|
|
293
|
-
} });
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
export { Dropdown as D, defineCustomElement as d };
|