@scania/tegel 0.0.1-beta.7 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-e1c79686.js → index-b98965c7.js} +7 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/sdds-accordion-item.cjs.entry.js +21 -21
- package/dist/cjs/sdds-accordion.cjs.entry.js +12 -12
- package/dist/cjs/sdds-badges.cjs.entry.js +45 -46
- package/dist/cjs/sdds-banner.cjs.entry.js +79 -0
- package/dist/cjs/sdds-block.cjs.entry.js +32 -0
- package/dist/cjs/sdds-body-cell_2.cjs.entry.js +160 -160
- package/dist/cjs/sdds-breadcrumb-item.cjs.entry.js +25 -0
- package/dist/cjs/sdds-breadcrumb.cjs.entry.js +23 -0
- package/dist/cjs/sdds-button.cjs.entry.js +25 -24
- package/dist/cjs/sdds-card.cjs.entry.js +56 -0
- package/dist/cjs/sdds-checkbox.cjs.entry.js +55 -0
- package/dist/cjs/sdds-datetime.cjs.entry.js +78 -49
- package/dist/cjs/sdds-dropdown-filter.cjs.entry.js +83 -83
- package/dist/cjs/sdds-dropdown_2.cjs.entry.js +327 -321
- package/dist/cjs/sdds-header-cell.cjs.entry.js +130 -132
- package/dist/cjs/sdds-icon.cjs.entry.js +30 -30
- package/dist/cjs/sdds-inline-tab.cjs.entry.js +22 -0
- package/dist/cjs/sdds-inline-tabs-fullbleed.cjs.entry.js +89 -87
- package/dist/cjs/sdds-inline-tabs.cjs.entry.js +212 -202
- package/dist/cjs/sdds-link.cjs.entry.js +28 -0
- package/dist/cjs/sdds-message.cjs.entry.js +41 -0
- package/dist/cjs/sdds-modal.cjs.entry.js +42 -40
- package/dist/cjs/sdds-navigation-tabs.cjs.entry.js +89 -86
- package/dist/cjs/sdds-popover-canvas.cjs.entry.js +74 -66
- package/dist/cjs/sdds-popover-menu.cjs.entry.js +75 -65
- package/dist/cjs/sdds-radio-button.cjs.entry.js +32 -0
- package/dist/cjs/sdds-slider.cjs.entry.js +348 -327
- package/dist/cjs/sdds-spinner.cjs.entry.js +11 -11
- package/dist/cjs/sdds-table-body-row-expandable.cjs.entry.js +73 -72
- package/dist/cjs/sdds-table-body.cjs.entry.js +235 -235
- package/dist/cjs/sdds-table-footer.cjs.entry.js +155 -156
- package/dist/cjs/sdds-table-header.cjs.entry.js +90 -91
- package/dist/cjs/sdds-table-toolbar.cjs.entry.js +56 -57
- package/dist/cjs/sdds-table.cjs.entry.js +58 -59
- package/dist/cjs/sdds-textarea.cjs.entry.js +57 -44
- package/dist/cjs/sdds-textfield.cjs.entry.js +73 -64
- package/dist/cjs/sdds-toast.cjs.entry.js +86 -0
- package/dist/cjs/sdds-toggle.cjs.entry.js +44 -0
- package/dist/cjs/sdds-tooltip.cjs.entry.js +94 -85
- package/dist/cjs/tegel.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +12 -0
- package/dist/collection/components/accordion/accordion-item/accordion-item.css +30 -11
- package/dist/collection/components/accordion/accordion-item/accordion-item.js +142 -142
- package/dist/collection/components/accordion/accordion.css +2 -16
- package/dist/collection/components/accordion/accordion.js +62 -62
- package/dist/collection/components/accordion/accordion.stories.js +90 -0
- package/dist/collection/components/badge/badge.stories.js +102 -0
- package/dist/collection/components/badge/badges.css +2 -2
- package/dist/collection/components/badge/badges.js +147 -150
- package/dist/collection/components/banner/banner.stories.js +92 -0
- package/dist/collection/components/banner/sdds-banner.css +88 -0
- package/dist/collection/components/banner/sdds-banner.js +330 -0
- package/dist/collection/components/banner/sdds-banner.stories.js +129 -0
- package/dist/collection/components/block/block-native.stories.js +48 -0
- package/dist/collection/components/block/sdds-block.css +22 -0
- package/dist/collection/components/block/sdds-block.js +55 -0
- package/dist/collection/components/block/sdds-block.stories.js +48 -0
- package/dist/collection/components/breadcrumb/breadcrumb-component.css +30 -0
- package/dist/collection/components/breadcrumb/breadcrumb-item/breadcrumb-item.css +43 -0
- package/dist/collection/components/breadcrumb/breadcrumb-item/breadcrumb-item.js +83 -0
- package/dist/collection/components/breadcrumb/breadcrumb.js +22 -0
- package/dist/collection/components/breadcrumb/breadcrumb.stories.js +26 -0
- package/dist/collection/components/button/button-component.js +152 -151
- package/dist/collection/components/button/button-native.stories.js +187 -0
- package/dist/collection/components/button/button-webcomponent.stories.js +189 -0
- package/dist/collection/components/button/button.css +63 -51
- package/dist/collection/components/card/card.stories.js +167 -0
- package/dist/collection/components/card/sdds-card.css +78 -0
- package/dist/collection/components/card/sdds-card.js +276 -0
- package/dist/collection/components/card/sdds-card.stories.js +168 -0
- package/dist/collection/components/checkbox/checkbox.stories.js +54 -0
- package/dist/collection/components/checkbox/sdds-checkbox.css +95 -0
- package/dist/collection/components/checkbox/sdds-checkbox.js +239 -0
- package/dist/collection/components/checkbox/sdds-checkbox.stories.js +71 -0
- package/dist/collection/components/chips/chips.stories.js +106 -0
- package/dist/collection/components/data-table/native-table.stories.js +160 -0
- package/dist/collection/components/data-table/table/table.js +252 -253
- package/dist/collection/components/data-table/table-body/table-body.css +1 -1
- package/dist/collection/components/data-table/table-body/table-body.js +425 -425
- package/dist/collection/components/data-table/table-body-cell/table-body-cell.css +3 -3
- package/dist/collection/components/data-table/table-body-cell/table-body-cell.js +168 -169
- package/dist/collection/components/data-table/table-body-row/table-body-row.css +24 -45
- package/dist/collection/components/data-table/table-body-row/table-body-row.js +165 -164
- package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.css +23 -24
- package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.js +156 -155
- package/dist/collection/components/data-table/table-component-basic.stories.js +161 -0
- package/dist/collection/components/data-table/table-component-batch-actions.stories.js +128 -0
- package/dist/collection/components/data-table/table-component-bodydata.stories.js +58 -0
- package/dist/collection/components/data-table/table-component-custom-width.stories.js +197 -0
- package/dist/collection/components/data-table/table-component-event-listeners.stories.js +151 -0
- package/dist/collection/components/data-table/table-component-expandable-rows.stories.js +135 -0
- package/dist/collection/components/data-table/table-component-filtering.stories.js +137 -0
- package/dist/collection/components/data-table/table-component-multiselect.stories.js +158 -0
- package/dist/collection/components/data-table/table-component-pagination.stories.js +127 -0
- package/dist/collection/components/data-table/table-component-sorting.stories.js +126 -0
- package/dist/collection/components/data-table/table-footer/table-footer.css +9 -5
- package/dist/collection/components/data-table/table-footer/table-footer.js +354 -355
- package/dist/collection/components/data-table/table-header/table-header.css +22 -36
- package/dist/collection/components/data-table/table-header/table-header.js +152 -153
- package/dist/collection/components/data-table/table-header-cell/table-header-cell.css +9 -8
- package/dist/collection/components/data-table/table-header-cell/table-header-cell.js +317 -320
- package/dist/collection/components/data-table/table-toolbar/table-toolbar.css +7 -6
- package/dist/collection/components/data-table/table-toolbar/table-toolbar.js +141 -142
- package/dist/collection/components/datetime/datetime.css +68 -58
- package/dist/collection/components/datetime/datetime.js +344 -243
- package/dist/collection/components/datetime/datetime.stories.js +207 -0
- package/dist/collection/components/divider/divider.stories.js +133 -0
- package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.js +339 -339
- package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.stories.js +130 -0
- package/dist/collection/components/dropdown/dropdown-native.stories.js +90 -0
- package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js +185 -185
- package/dist/collection/components/dropdown/dropdown-wc-default.stories.js +167 -0
- package/dist/collection/components/dropdown/dropdown-wc-multiselect.stories.js +146 -0
- package/dist/collection/components/dropdown/dropdown.css +146 -86
- package/dist/collection/components/dropdown/dropdown.js +576 -553
- package/dist/collection/components/footer/footer.stories.js +117 -0
- package/dist/collection/components/header/header-all.stories.js +217 -0
- package/dist/collection/components/header/header-default.stories.js +47 -0
- package/dist/collection/components/header/header-inline.stories.js +113 -0
- package/dist/collection/components/header/header-search.stories.js +263 -0
- package/dist/collection/components/header/header-toolbar.stories.js +204 -0
- package/dist/collection/components/icon/icon-font.stories.js +57 -0
- package/dist/collection/components/icon/icon-web-component.stories.js +51 -0
- package/dist/collection/components/icon/icon.js +89 -89
- package/dist/collection/components/link/link.stories.js +45 -0
- package/dist/collection/components/link/sdds-link.css +36 -0
- package/dist/collection/components/link/sdds-link.js +121 -0
- package/dist/collection/components/link/sdds-link.stories.js +70 -0
- package/dist/collection/components/message/message.stories.js +108 -0
- package/dist/collection/components/message/sdds-message.css +70 -0
- package/dist/collection/components/message/sdds-message.js +135 -0
- package/dist/collection/components/message/sdds-message.stories.js +106 -0
- package/dist/collection/components/modal/modal-native.stories.js +129 -0
- package/dist/collection/components/modal/modal-webcomponent.stories.js +86 -0
- package/dist/collection/components/modal/modal.css +63 -37
- package/dist/collection/components/modal/modal.js +148 -146
- package/dist/collection/components/popover-canvas/popover-canvas.css +3 -3
- package/dist/collection/components/popover-canvas/popover-canvas.js +219 -190
- package/dist/collection/components/popover-canvas/popover-canvas.stories.js +89 -0
- package/dist/collection/components/popover-menu/popover-menu-icons.stories.js +121 -0
- package/dist/collection/components/popover-menu/popover-menu.css +2 -2
- package/dist/collection/components/popover-menu/popover-menu.js +220 -189
- package/dist/collection/components/popover-menu/popover-menu.stories.js +114 -0
- package/dist/collection/components/radio-button/radio-button-component.css +123 -0
- package/dist/collection/components/radio-button/radio-button-component.stories.js +91 -0
- package/dist/collection/components/radio-button/radio-button.js +160 -0
- package/dist/collection/components/radio-button/radio-button.stories.js +68 -0
- package/dist/collection/components/side-menu/side-menu.stories.js +182 -0
- package/dist/collection/components/slider/slider.css +56 -19
- package/dist/collection/components/slider/slider.js +721 -682
- package/dist/collection/components/slider/slider.stories.js +208 -0
- package/dist/collection/components/spinner/spinner.js +61 -61
- package/dist/collection/components/spinner/spinner.stories.js +59 -0
- package/dist/collection/components/stepper/stepper.stories.js +139 -0
- package/dist/collection/components/tabs/inline-tabs-default/inline-tab/inline-tab.css +3 -0
- package/dist/collection/components/tabs/inline-tabs-default/inline-tab/inline-tab.js +80 -0
- package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.css +21 -24
- package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.js +312 -302
- package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.stories.js +71 -0
- package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.css +36 -67
- package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.js +128 -126
- package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.js +46 -0
- package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css +22 -18
- package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js +128 -103
- package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.stories.js +32 -0
- package/dist/collection/components/textarea/textarea.css +60 -45
- package/dist/collection/components/textarea/textarea.js +394 -328
- package/dist/collection/components/textarea/textarea.stories.js +169 -0
- package/dist/collection/components/textfield/textfield.css +92 -84
- package/dist/collection/components/textfield/textfield.js +430 -350
- package/dist/collection/components/textfield/textfield.stories.js +239 -0
- package/dist/collection/components/toast/sdds-toast.css +102 -0
- package/dist/collection/components/toast/sdds-toast.js +256 -0
- package/dist/collection/components/toast/sdds-toast.stories.js +86 -0
- package/dist/collection/components/toast/toast.stories.js +129 -0
- package/dist/collection/components/toggle/sdds-toggle.css +104 -0
- package/dist/collection/components/toggle/sdds-toggle.js +261 -0
- package/dist/collection/components/toggle/sdds-toggle.stories.js +92 -0
- package/dist/collection/components/toggle/toggle.stories.js +72 -0
- package/dist/collection/components/tooltip/tooltip.css +3 -3
- package/dist/collection/components/tooltip/tooltip.js +229 -200
- package/dist/collection/components/tooltip/tooltip.stories.js +115 -0
- package/dist/collection/components/utility/colour/background-color.stories.js +96 -0
- package/dist/collection/components/utility/colour/text-color.stories.js +94 -0
- package/dist/collection/foundations-stories/colour/colour-brand.stories.js +38 -0
- package/dist/collection/foundations-stories/colour/colour-scales.stories.js +71 -0
- package/dist/collection/foundations-stories/colour/colour-semantic.stories.js +40 -0
- package/dist/collection/foundations-stories/grid/grid.stories.js +386 -0
- package/dist/collection/foundations-stories/spacing/spacing-element.stories.js +100 -0
- package/dist/collection/foundations-stories/spacing/spacing-layout.stories.js +94 -0
- package/dist/collection/foundations-stories/typography/typography-body.stories.js +16 -0
- package/dist/collection/foundations-stories/typography/typography-detail.stories.js +17 -0
- package/dist/collection/foundations-stories/typography/typography-headline.stories.js +39 -0
- package/dist/collection/foundations-stories/typography/typography-paragraph.stories.js +12 -0
- package/dist/collection/index.js +1 -1
- package/dist/collection/utils/utils.js +12 -12
- package/dist/components/dropdown-option.js +94 -94
- package/dist/components/dropdown.js +296 -289
- package/dist/components/icon.js +49 -49
- package/dist/components/index.d.ts +12 -0
- package/dist/components/index.js +12 -0
- package/dist/components/sdds-accordion-item.js +46 -46
- package/dist/components/sdds-accordion.js +29 -29
- package/dist/components/sdds-badges.js +66 -67
- package/dist/components/sdds-banner.d.ts +11 -0
- package/dist/components/sdds-banner.js +119 -0
- package/dist/components/sdds-block.d.ts +11 -0
- package/dist/components/sdds-block.js +48 -0
- package/dist/components/sdds-breadcrumb-item.d.ts +11 -0
- package/dist/components/sdds-breadcrumb-item.js +43 -0
- package/dist/components/sdds-breadcrumb.d.ts +11 -0
- package/dist/components/sdds-breadcrumb.js +37 -0
- package/dist/components/sdds-button.js +48 -47
- package/dist/components/sdds-card.d.ts +11 -0
- package/dist/components/sdds-card.js +84 -0
- package/dist/components/sdds-checkbox.d.ts +11 -0
- package/dist/components/sdds-checkbox.js +76 -0
- package/dist/components/sdds-datetime.js +112 -73
- package/dist/components/sdds-dropdown-filter.js +127 -127
- package/dist/components/sdds-header-cell.js +161 -164
- package/dist/components/sdds-inline-tab.d.ts +11 -0
- package/dist/components/sdds-inline-tab.js +40 -0
- package/dist/components/sdds-inline-tabs-fullbleed.js +108 -106
- package/dist/components/sdds-inline-tabs.js +236 -226
- package/dist/components/sdds-link.d.ts +11 -0
- package/dist/components/sdds-link.js +6 -0
- package/dist/components/sdds-link2.js +44 -0
- package/dist/components/sdds-message.d.ts +11 -0
- package/dist/components/sdds-message.js +67 -0
- package/dist/components/sdds-modal.js +68 -60
- package/dist/components/sdds-navigation-tabs.js +108 -104
- package/dist/components/sdds-popover-canvas.js +98 -87
- package/dist/components/sdds-popover-menu.js +99 -86
- package/dist/components/sdds-radio-button.d.ts +11 -0
- package/dist/components/sdds-radio-button.js +52 -0
- package/dist/components/sdds-slider.js +385 -357
- package/dist/components/sdds-spinner.js +27 -27
- package/dist/components/sdds-table-body-row-expandable.js +96 -95
- package/dist/components/sdds-table-body.js +281 -281
- package/dist/components/sdds-table-footer.js +186 -187
- package/dist/components/sdds-table-header.js +115 -116
- package/dist/components/sdds-table-toolbar.js +78 -79
- package/dist/components/sdds-table.js +81 -82
- package/dist/components/sdds-textarea.js +92 -73
- package/dist/components/sdds-textfield.js +109 -93
- package/dist/components/sdds-toast.d.ts +11 -0
- package/dist/components/sdds-toast.js +117 -0
- package/dist/components/sdds-toggle.d.ts +11 -0
- package/dist/components/sdds-toggle.js +69 -0
- package/dist/components/sdds-tooltip.js +117 -106
- package/dist/components/table-body-cell.js +95 -96
- package/dist/components/table-body-row.js +114 -113
- package/dist/esm/{index-b67b15a6.js → index-32571711.js} +7 -0
- package/dist/esm/loader.js +2 -2
- package/dist/esm/polyfills/core-js.js +0 -0
- package/dist/esm/polyfills/dom.js +0 -0
- package/dist/esm/polyfills/es5-html-element.js +0 -0
- package/dist/esm/polyfills/index.js +0 -0
- package/dist/esm/polyfills/system.js +0 -0
- package/dist/esm/sdds-accordion-item.entry.js +21 -21
- package/dist/esm/sdds-accordion.entry.js +12 -12
- package/dist/esm/sdds-badges.entry.js +45 -46
- package/dist/esm/sdds-banner.entry.js +75 -0
- package/dist/esm/sdds-block.entry.js +28 -0
- package/dist/esm/sdds-body-cell_2.entry.js +160 -160
- package/dist/esm/sdds-breadcrumb-item.entry.js +21 -0
- package/dist/esm/sdds-breadcrumb.entry.js +19 -0
- package/dist/esm/sdds-button.entry.js +25 -24
- package/dist/esm/sdds-card.entry.js +52 -0
- package/dist/esm/sdds-checkbox.entry.js +51 -0
- package/dist/esm/sdds-datetime.entry.js +78 -49
- package/dist/esm/sdds-dropdown-filter.entry.js +83 -83
- package/dist/esm/sdds-dropdown_2.entry.js +327 -321
- package/dist/esm/sdds-header-cell.entry.js +130 -132
- package/dist/esm/sdds-icon.entry.js +30 -30
- package/dist/esm/sdds-inline-tab.entry.js +18 -0
- package/dist/esm/sdds-inline-tabs-fullbleed.entry.js +89 -87
- package/dist/esm/sdds-inline-tabs.entry.js +212 -202
- package/dist/esm/sdds-link.entry.js +24 -0
- package/dist/esm/sdds-message.entry.js +37 -0
- package/dist/esm/sdds-modal.entry.js +42 -40
- package/dist/esm/sdds-navigation-tabs.entry.js +89 -86
- package/dist/esm/sdds-popover-canvas.entry.js +74 -66
- package/dist/esm/sdds-popover-menu.entry.js +75 -65
- package/dist/esm/sdds-radio-button.entry.js +28 -0
- package/dist/esm/sdds-slider.entry.js +348 -327
- package/dist/esm/sdds-spinner.entry.js +11 -11
- package/dist/esm/sdds-table-body-row-expandable.entry.js +73 -72
- package/dist/esm/sdds-table-body.entry.js +235 -235
- package/dist/esm/sdds-table-footer.entry.js +155 -156
- package/dist/esm/sdds-table-header.entry.js +90 -91
- package/dist/esm/sdds-table-toolbar.entry.js +56 -57
- package/dist/esm/sdds-table.entry.js +58 -59
- package/dist/esm/sdds-textarea.entry.js +57 -44
- package/dist/esm/sdds-textfield.entry.js +73 -64
- package/dist/esm/sdds-toast.entry.js +82 -0
- package/dist/esm/sdds-toggle.entry.js +40 -0
- package/dist/esm/sdds-tooltip.entry.js +94 -85
- package/dist/esm/tegel.js +2 -2
- package/dist/tegel/p-05d3cfc8.entry.js +1 -0
- package/dist/tegel/p-13a25c7f.entry.js +1 -0
- package/dist/tegel/p-13b783f1.js +2 -0
- package/dist/tegel/p-1dda8de9.entry.js +1 -0
- package/dist/tegel/p-2248b59e.entry.js +1 -0
- package/dist/tegel/p-232e5c9a.entry.js +1 -0
- package/dist/tegel/p-2375f0eb.entry.js +1 -0
- package/dist/tegel/p-29deedc6.entry.js +1 -0
- package/dist/tegel/p-2f52021b.entry.js +1 -0
- package/dist/tegel/p-3344582d.entry.js +1 -0
- package/dist/tegel/{p-040efb32.entry.js → p-4b14324d.entry.js} +1 -1
- package/dist/tegel/p-561fbe77.entry.js +1 -0
- package/dist/tegel/p-5a215722.entry.js +1 -0
- package/dist/tegel/p-5f7b1539.entry.js +1 -0
- package/dist/tegel/p-6f382b38.entry.js +1 -0
- package/dist/tegel/p-765e2719.entry.js +1 -0
- package/dist/tegel/p-76f60546.entry.js +1 -0
- package/dist/tegel/p-7a5244b6.entry.js +1 -0
- package/dist/tegel/p-816ff5f7.entry.js +1 -0
- package/dist/tegel/p-81d2d57b.entry.js +1 -0
- package/dist/tegel/p-87650f36.entry.js +1 -0
- package/dist/tegel/p-8e6f885c.entry.js +1 -0
- package/dist/tegel/p-8e9dcc20.entry.js +1 -0
- package/dist/tegel/p-997fc919.entry.js +1 -0
- package/dist/tegel/p-9a057c9a.entry.js +1 -0
- package/dist/tegel/p-9a95e92c.entry.js +1 -0
- package/dist/tegel/p-a75ff060.entry.js +1 -0
- package/dist/tegel/p-bf1216f9.entry.js +1 -0
- package/dist/tegel/p-bf597564.entry.js +1 -0
- package/dist/tegel/p-d2217bf0.entry.js +1 -0
- package/dist/tegel/p-e335137d.entry.js +1 -0
- package/dist/tegel/p-e34cce75.entry.js +1 -0
- package/dist/tegel/p-e55d09f2.entry.js +1 -0
- package/dist/tegel/p-ebbffa8a.entry.js +1 -0
- package/dist/tegel/{p-a5919930.entry.js → p-ed076d47.entry.js} +1 -1
- package/dist/tegel/p-ef887910.entry.js +1 -0
- package/dist/tegel/p-f4b70868.entry.js +1 -0
- package/dist/tegel/p-f52a0b63.entry.js +1 -0
- package/dist/tegel/p-f5bf214b.entry.js +1 -0
- package/dist/tegel/p-fd1b5923.entry.js +1 -0
- package/dist/tegel/tegel.css +13 -5
- package/dist/tegel/tegel.esm.js +1 -1
- package/dist/types/components/accordion/accordion-item/accordion-item.d.ts +17 -17
- package/dist/types/components/accordion/accordion.d.ts +7 -7
- package/dist/types/components/accordion/accordion.stories.d.ts +77 -0
- package/dist/types/components/badge/badge.stories.d.ts +66 -0
- package/dist/types/components/badge/badges.d.ts +16 -16
- package/dist/types/components/banner/banner.stories.d.ts +68 -0
- package/dist/types/components/banner/sdds-banner.d.ts +48 -0
- package/dist/types/components/banner/sdds-banner.stories.d.ts +109 -0
- package/dist/types/components/block/block-native.stories.d.ts +31 -0
- package/dist/types/components/block/sdds-block.d.ts +9 -0
- package/dist/types/components/block/sdds-block.stories.d.ts +32 -0
- package/dist/types/components/breadcrumb/breadcrumb-item/breadcrumb-item.d.ts +9 -0
- package/dist/types/components/breadcrumb/breadcrumb.d.ts +5 -0
- package/dist/types/components/breadcrumb/breadcrumb.stories.d.ts +12 -0
- package/dist/types/components/button/button-component.d.ts +18 -15
- package/dist/types/components/button/button-native.stories.d.ts +148 -0
- package/dist/types/components/button/button-webcomponent.stories.d.ts +147 -0
- package/dist/types/components/card/card.stories.d.ts +138 -0
- package/dist/types/components/card/sdds-card.d.ts +39 -0
- package/dist/types/components/card/sdds-card.stories.d.ts +139 -0
- package/dist/types/components/checkbox/checkbox.stories.d.ts +39 -0
- package/dist/types/components/checkbox/sdds-checkbox.d.ts +38 -0
- package/dist/types/components/checkbox/sdds-checkbox.stories.d.ts +40 -0
- package/dist/types/components/chips/chips.stories.d.ts +77 -0
- package/dist/types/components/data-table/native-table.stories.d.ts +133 -0
- package/dist/types/components/data-table/table/table.d.ts +47 -47
- package/dist/types/components/data-table/table-body/table-body.d.ts +54 -54
- package/dist/types/components/data-table/table-body-cell/table-body-cell.d.ts +24 -24
- package/dist/types/components/data-table/table-body-row/table-body-row.d.ts +27 -27
- package/dist/types/components/data-table/table-body-row-expandable/table-body-row-expandable.d.ts +27 -27
- package/dist/types/components/data-table/table-component-basic.stories.d.ts +101 -0
- package/dist/types/components/data-table/table-component-batch-actions.stories.d.ts +99 -0
- package/dist/types/components/data-table/table-component-bodydata.stories.d.ts +38 -0
- package/dist/types/components/data-table/table-component-custom-width.stories.d.ts +148 -0
- package/dist/types/components/data-table/table-component-event-listeners.stories.d.ts +88 -0
- package/dist/types/components/data-table/table-component-expandable-rows.stories.d.ts +88 -0
- package/dist/types/components/data-table/table-component-filtering.stories.d.ts +101 -0
- package/dist/types/components/data-table/table-component-multiselect.stories.d.ts +101 -0
- package/dist/types/components/data-table/table-component-pagination.stories.d.ts +101 -0
- package/dist/types/components/data-table/table-component-sorting.stories.d.ts +100 -0
- package/dist/types/components/data-table/table-footer/table-footer.d.ts +50 -50
- package/dist/types/components/data-table/table-header/table-header.d.ts +27 -27
- package/dist/types/components/data-table/table-header-cell/table-header-cell.d.ts +44 -45
- package/dist/types/components/data-table/table-toolbar/table-toolbar.d.ts +22 -22
- package/dist/types/components/datetime/datetime.d.ts +42 -32
- package/dist/types/components/datetime/datetime.stories.d.ts +127 -0
- package/dist/types/components/divider/divider.stories.d.ts +65 -0
- package/dist/types/components/dropdown/dropdown-filter/dropdown-filter.d.ts +42 -42
- package/dist/types/components/dropdown/dropdown-filter/dropdown-filter.stories.d.ts +73 -0
- package/dist/types/components/dropdown/dropdown-native.stories.d.ts +57 -0
- package/dist/types/components/dropdown/dropdown-option/dropdown-option.d.ts +19 -19
- package/dist/types/components/dropdown/dropdown-wc-default.stories.d.ts +129 -0
- package/dist/types/components/dropdown/dropdown-wc-multiselect.stories.d.ts +115 -0
- package/dist/types/components/dropdown/dropdown.d.ts +58 -56
- package/dist/types/components/footer/footer.stories.d.ts +45 -0
- package/dist/types/components/header/header-all.stories.d.ts +29 -0
- package/dist/types/components/header/header-default.stories.d.ts +29 -0
- package/dist/types/components/header/header-inline.stories.d.ts +29 -0
- package/dist/types/components/header/header-search.stories.d.ts +29 -0
- package/dist/types/components/header/header-toolbar.stories.d.ts +29 -0
- package/dist/types/components/icon/icon-font.stories.d.ts +38 -0
- package/dist/types/components/icon/icon-web-component.stories.d.ts +38 -0
- package/dist/types/components/icon/icon.d.ts +12 -12
- package/dist/types/components/link/link.stories.d.ts +33 -0
- package/dist/types/components/link/sdds-link.d.ts +13 -0
- package/dist/types/components/link/sdds-link.stories.d.ts +58 -0
- package/dist/types/components/message/message.stories.d.ts +69 -0
- package/dist/types/components/message/sdds-message.d.ts +14 -0
- package/dist/types/components/message/sdds-message.stories.d.ts +87 -0
- package/dist/types/components/modal/modal-native.stories.d.ts +59 -0
- package/dist/types/components/modal/modal-webcomponent.stories.d.ts +52 -0
- package/dist/types/components/modal/modal.d.ts +17 -16
- package/dist/types/components/popover-canvas/popover-canvas.d.ts +24 -18
- package/dist/types/components/popover-canvas/popover-canvas.stories.d.ts +25 -0
- package/dist/types/components/popover-menu/popover-menu-icons.stories.d.ts +27 -0
- package/dist/types/components/popover-menu/popover-menu.d.ts +24 -18
- package/dist/types/components/popover-menu/popover-menu.stories.d.ts +27 -0
- package/dist/types/components/radio-button/radio-button-component.stories.d.ts +39 -0
- package/dist/types/components/radio-button/radio-button.d.ts +26 -0
- package/dist/types/components/radio-button/radio-button.stories.d.ts +33 -0
- package/dist/types/components/side-menu/side-menu.stories.d.ts +42 -0
- package/dist/types/components/slider/slider.d.ts +86 -82
- package/dist/types/components/slider/slider.stories.d.ts +169 -0
- package/dist/types/components/spinner/spinner.d.ts +7 -7
- package/dist/types/components/spinner/spinner.stories.d.ts +37 -0
- package/dist/types/components/stepper/stepper.stories.d.ts +56 -0
- package/dist/types/components/tabs/inline-tabs-default/inline-tab/inline-tab.d.ts +6 -0
- package/dist/types/components/tabs/inline-tabs-default/inline-tabs.d.ts +40 -41
- package/dist/types/components/tabs/inline-tabs-default/inline-tabs.stories.d.ts +49 -0
- package/dist/types/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.d.ts +20 -20
- package/dist/types/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.d.ts +30 -0
- package/dist/types/components/tabs/navigation-tabs/navigation-tabs.d.ts +20 -18
- package/dist/types/components/tabs/navigation-tabs/navigation-tabs.stories.d.ts +13 -0
- package/dist/types/components/textarea/textarea.d.ts +48 -41
- package/dist/types/components/textarea/textarea.stories.d.ts +116 -0
- package/dist/types/components/textfield/textfield.d.ts +52 -42
- package/dist/types/components/textfield/textfield.stories.d.ts +180 -0
- package/dist/types/components/toast/sdds-toast.d.ts +36 -0
- package/dist/types/components/toast/sdds-toast.stories.d.ts +56 -0
- package/dist/types/components/toast/toast.stories.d.ts +69 -0
- package/dist/types/components/toggle/sdds-toggle.d.ts +34 -0
- package/dist/types/components/toggle/sdds-toggle.stories.d.ts +74 -0
- package/dist/types/components/toggle/toggle.stories.d.ts +55 -0
- package/dist/types/components/tooltip/tooltip.d.ts +24 -20
- package/dist/types/components/tooltip/tooltip.stories.d.ts +54 -0
- package/dist/types/components/utility/colour/background-color.stories.d.ts +58 -0
- package/dist/types/components/utility/colour/text-color.stories.d.ts +58 -0
- package/dist/types/components.d.ts +939 -48
- package/dist/types/foundations-stories/colour/colour-brand.stories.d.ts +13 -0
- package/dist/types/foundations-stories/colour/colour-scales.stories.d.ts +13 -0
- package/dist/types/foundations-stories/colour/colour-semantic.stories.d.ts +13 -0
- package/dist/types/foundations-stories/grid/grid.stories.d.ts +35 -0
- package/dist/types/foundations-stories/spacing/spacing-element.stories.d.ts +8 -0
- package/dist/types/foundations-stories/spacing/spacing-layout.stories.d.ts +8 -0
- package/dist/types/foundations-stories/typography/typography-body.stories.d.ts +8 -0
- package/dist/types/foundations-stories/typography/typography-detail.stories.d.ts +8 -0
- package/dist/types/foundations-stories/typography/typography-headline.stories.d.ts +21 -0
- package/dist/types/foundations-stories/typography/typography-paragraph.stories.d.ts +8 -0
- package/dist/types/index.d.ts +1 -1
- package/dist/types/utils/utils.d.ts +2 -2
- package/package.json +1 -1
- package/readme.md +41 -8
- 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-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-f2262a69.entry.js +0 -1
- package/dist/tegel/p-f2f7aa45.entry.js +0 -1
|
@@ -1,88 +1,88 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host } from './index-32571711.js';
|
|
2
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}";
|
|
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,.sdds-mode-light{--sdds-link-text-decoration:none;--sdds-dropdown-color:var(--sdds-grey-958);--sdds-dropdown-background:var(--sdds-grey-50);--sdds-dropdown-background-hover:var(--sdds-grey-100);--sdds-dropdown-background-disabled:var(--sdds-white);--sdds-dropdown-disabled:var(--sdds-grey-400);--sdds-dropdown-border:var(--sdds-grey-100);--sdds-dropdown-label-inside:var(--sdds-grey-700);--sdds-dropdown-label-outside:var(--sdds-grey-958);--sdds-dropdown-placeholder:var(--sdds-grey-700);--sdds-dropdown-border-not-focused:var(--sdds-grey-600);--sdds-dropdown-option-color:var(--sdds-grey-900);--sdds-dropdown-option-disabled-color:var(--sdds-grey-400)}:root .sdds-mode-variant-primary,.sdds-mode-light .sdds-mode-variant-primary{--sdds-dropdown-background:var(--sdds-grey-50);--sdds-dropdown-background-hover:var(--sdds-grey-100)}:root .sdds-mode-variant-secondary,.sdds-mode-light .sdds-mode-variant-secondary{--sdds-dropdown-background:var(--sdds-white);--sdds-dropdown-background-hover:var(--sdds-grey-50)}.sdds-mode-dark{--sdds-link-text-decoration:none;--sdds-dropdown-color:var(--sdds-grey-400);--sdds-dropdown-background:var(--sdds-grey-868);--sdds-dropdown-background-hover:var(--sdds-grey-800);--sdds-dropdown-background-disabled:var(--sdds-grey-900);--sdds-dropdown-disabled:var(--sdds-grey-800);--sdds-dropdown-border:var(--sdds-grey-800);--sdds-dropdown-label-inside:var(--sdds-grey-400);--sdds-dropdown-label-outside:var(--sdds-grey-100);--sdds-dropdown-placeholder:var(--sdds-grey-400);--sdds-dropdown-border-not-focused:var(--sdds-grey-600);--sdds-dropdown-option-color:var(--sdds-grey-50);--sdds-dropdown-option-disabled-color:var(--sdds-grey-800)}.sdds-mode-dark .sdds-mode-variant-primary{--sdds-dropdown-background:var(--sdds-grey-868);--sdds-dropdown-background-hover:var(--sdds-grey-800)}.sdds-mode-dark .sdds-mode-variant-secondary{--sdds-dropdown-background:var(--sdds-grey-900);--sdds-dropdown-background-hover:var(--sdds-grey-800)}.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-dropdown-label-inside)}.sdds-dropdown-label-outside{font:var(--sdds-detail-ex-05);letter-spacing:var(--sdds-detail-ex-05-ls);display:block;color:var(--sdds-dropdown-label-outside);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,.sdds-mode-light{--sdds-link-text-decoration:none;--sdds-dropdown-color:var(--sdds-grey-958);--sdds-dropdown-background:var(--sdds-grey-50);--sdds-dropdown-background-hover:var(--sdds-grey-100);--sdds-dropdown-background-disabled:var(--sdds-white);--sdds-dropdown-disabled:var(--sdds-grey-400);--sdds-dropdown-border:var(--sdds-grey-100);--sdds-dropdown-label-inside:var(--sdds-grey-700);--sdds-dropdown-label-outside:var(--sdds-grey-958);--sdds-dropdown-placeholder:var(--sdds-grey-700);--sdds-dropdown-border-not-focused:var(--sdds-grey-600);--sdds-dropdown-option-color:var(--sdds-grey-900);--sdds-dropdown-option-disabled-color:var(--sdds-grey-400)}:root .sdds-mode-variant-primary,.sdds-mode-light .sdds-mode-variant-primary{--sdds-dropdown-background:var(--sdds-grey-50);--sdds-dropdown-background-hover:var(--sdds-grey-100)}:root .sdds-mode-variant-secondary,.sdds-mode-light .sdds-mode-variant-secondary{--sdds-dropdown-background:var(--sdds-white);--sdds-dropdown-background-hover:var(--sdds-grey-50)}.sdds-mode-dark{--sdds-link-text-decoration:none;--sdds-dropdown-color:var(--sdds-grey-400);--sdds-dropdown-background:var(--sdds-grey-868);--sdds-dropdown-background-hover:var(--sdds-grey-800);--sdds-dropdown-background-disabled:var(--sdds-grey-900);--sdds-dropdown-disabled:var(--sdds-grey-800);--sdds-dropdown-border:var(--sdds-grey-800);--sdds-dropdown-label-inside:var(--sdds-grey-400);--sdds-dropdown-label-outside:var(--sdds-grey-100);--sdds-dropdown-placeholder:var(--sdds-grey-400);--sdds-dropdown-border-not-focused:var(--sdds-grey-600);--sdds-dropdown-option-color:var(--sdds-grey-50);--sdds-dropdown-option-disabled-color:var(--sdds-grey-800)}.sdds-mode-dark .sdds-mode-variant-primary{--sdds-dropdown-background:var(--sdds-grey-868);--sdds-dropdown-background-hover:var(--sdds-grey-800)}.sdds-mode-dark .sdds-mode-variant-secondary{--sdds-dropdown-background:var(--sdds-grey-900);--sdds-dropdown-background-hover:var(--sdds-grey-800)}: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-mode-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-background-hover:var(--sdds-blue-800);--sdds-checkbox-background-focus:var(--sdds-blue-800);--sdds-checkbox-disabled:var(--sdds-grey-400);--sdds-checkbox-background-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-background-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-mode-dark,.sdds-mode-light .sdds-mode-dark{--sdds-checkbox-color:var(--sdds-white);--sdds-checkbox-interaction-01:var(--sdds-white);--sdds-checkbox-interaction-02:var(--sdds-grey-958);--sdds-checkbox-background-hover:white;--sdds-checkbox-background-focus:white;--sdds-checkbox-disabled:white;--sdds-checkbox-background-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-background-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-4);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-background-hover);opacity:0.12}.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before{background-color:var(--sdds-checkbox-background-focus);opacity:0.24;transition:opacity 0.2s ease-in-out}.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-background-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-background-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}:host,::slotted(*){color:var(--sdds-grey-958);box-sizing:border-box;box-sizing:border-box}:host *,::slotted(*) *{box-sizing:border-box}:host,::slotted(*){--sdds-dropdown-label-outside:var(--sdds-dropdown-label-outside);--sdds-dropdown-label-outside-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-dropdown-color);display:flex;align-items:center;background-color:var(--sdds-dropdown-background);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-dropdown-border-not-focused);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-dropdown-border-not-focused)}.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-dropdown-border-not-focused)}.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-dropdown-link);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:100;background-color:var(--sdds-dropdown-background);position:absolute;top:100%;left:0;min-width:100%;max-height:360px;border-color:transparent;border-style:solid;border-width:0 1px 1px;box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.1);border-left-color:var(--sdds-dropdown-border);border-right-color:var(--sdds-dropdown-border);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-dropdown-option-disabled-color);border:none;padding:0 16px}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-placeholder{color:var(--sdds-dropdown-placeholder)}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-label-inside{color:var(--sdds-dropdown-label-inside)}: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-dropdown-background);border-top:1px solid transparent;border-bottom:1px solid var(--sdds-dropdown-border);opacity:0;visibility:hidden;cursor:pointer;box-sizing:border-box;color:var(--sdds-dropdown-option-color)}: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-background-hover)}:host ::slotted(sdds-dropdown-option:hover:not(:focus):not(sdds-dropdown-option.selected)){background-color:var(--sdds-dropdown-background-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-dropdown-background-hover);border-top:1px solid var(--sdds-dropdown-border);border-bottom:1px solid var(--sdds-dropdown-border)}: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-dropdown-option-disabled-color);background-color:var(--sdds-dropdown-background-disabled)}: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-dropdown-border)}.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)}.sdds-option-checkmark path{color:var(--sdds-dropdown-option-color)}: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-dropdown-label-inside);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
4
|
|
|
5
|
-
const DropdownFilter = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.dataOptions = [];
|
|
9
|
-
this.filteredContent = [];
|
|
10
|
-
this.searchTerm = '';
|
|
11
|
-
this.selectedOptionState = undefined;
|
|
12
|
-
this.dropdownRef = undefined;
|
|
13
|
-
this.placeholder = '';
|
|
14
|
-
this.label = undefined;
|
|
15
|
-
this.defaultOption = undefined;
|
|
16
|
-
this.selectedOption = undefined;
|
|
17
|
-
this.disabled = undefined;
|
|
18
|
-
this.size = 'lg';
|
|
19
|
-
this.inline = false;
|
|
20
|
-
this.labelPosition = 'no-label';
|
|
21
|
-
this.state = 'default';
|
|
22
|
-
this.helper = '';
|
|
23
|
-
this.data = undefined;
|
|
24
|
-
this.selectedLabel = 'no-selected';
|
|
25
|
-
this.selectedValue = 'no-selected';
|
|
26
|
-
}
|
|
27
|
-
componentWillLoad() {
|
|
28
|
-
this.parseData(this.data);
|
|
29
|
-
if (this.defaultOption) {
|
|
30
|
-
this.selectedOptionState = this.defaultOption;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
parseData(newValue) {
|
|
34
|
-
if (newValue)
|
|
35
|
-
this.dataOptions = JSON.parse(newValue);
|
|
36
|
-
this.filteredContent = this.dataOptions;
|
|
37
|
-
}
|
|
38
|
-
updateOptionsContent(event) {
|
|
39
|
-
this.searchTerm = event.detail;
|
|
40
|
-
this.findData();
|
|
41
|
-
}
|
|
42
|
-
selectOptionHandler(event) {
|
|
43
|
-
this.selectedOptionState = event.detail.value;
|
|
44
|
-
this.selectedLabel = event.detail.label;
|
|
45
|
-
this.selectedValue = event.detail.value;
|
|
46
|
-
// Reset list when search is done and user have selected one option
|
|
47
|
-
// To match with animation time for option list to fadeout first
|
|
48
|
-
setTimeout(() => {
|
|
49
|
-
this.filteredContent = this.dataOptions;
|
|
50
|
-
}, 200);
|
|
51
|
-
}
|
|
52
|
-
findData() {
|
|
53
|
-
const searchAsRegEx = new RegExp(this.searchTerm, 'gmi');
|
|
54
|
-
this.filteredContent = this.dataOptions.filter(option => {
|
|
55
|
-
if (option.label) {
|
|
56
|
-
const listItem = option.label.toLowerCase();
|
|
57
|
-
const searchResultList = listItem.match(searchAsRegEx);
|
|
58
|
-
if (searchResultList) {
|
|
59
|
-
return searchResultList;
|
|
60
|
-
}
|
|
61
|
-
this.selectedOptionState = null;
|
|
62
|
-
this.selectedLabel = 'no-result';
|
|
63
|
-
this.selectedValue = 'no-result';
|
|
64
|
-
}
|
|
65
|
-
});
|
|
66
|
-
}
|
|
67
|
-
setOptionsContent() {
|
|
68
|
-
const newList = this.filteredContent.map(obj => (h("sdds-dropdown-option", { tabindex: "0", value: obj.value, class: `${this.selectedOptionState === obj.value ? 'selected' : ''}` }, obj.label)));
|
|
69
|
-
if (newList.length > 0) {
|
|
70
|
-
return newList;
|
|
71
|
-
}
|
|
72
|
-
return (h("sdds-dropdown-option", { tabindex: "-1", value: "no-result", class: "sdds-option--no-result" }, "No result"));
|
|
73
|
-
}
|
|
74
|
-
/** Use this method to reset the dropdown. Then it will go back to its initial state. */
|
|
75
|
-
async resetOption() {
|
|
76
|
-
var _a;
|
|
77
|
-
await ((_a = this.dropdownRef) === null || _a === void 0 ? void 0 : _a.resetOption());
|
|
78
|
-
}
|
|
79
|
-
render() {
|
|
80
|
-
return (h(Host, { "selected-value": this.selectedValue, "selected-text": this.selectedLabel }, h("sdds-dropdown", { ref: el => (this.dropdownRef = el), exportparts: "dropdown-filter-disabled", size: this.size, label: this.label, disabled: this.disabled, labelPosition: this.labelPosition, helper: this.helper, state: this.state, placeholder: this.placeholder, defaultOption: this.defaultOption, selectedOption: this.selectedOption, type: "filter", tabindex: this.disabled ? '-1' : null }, this.setOptionsContent())));
|
|
81
|
-
}
|
|
82
|
-
static get watchers() { return {
|
|
83
|
-
"data": ["parseData"]
|
|
84
|
-
}; }
|
|
85
|
-
};
|
|
5
|
+
const DropdownFilter = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.dataOptions = [];
|
|
9
|
+
this.filteredContent = [];
|
|
10
|
+
this.searchTerm = '';
|
|
11
|
+
this.selectedOptionState = undefined;
|
|
12
|
+
this.dropdownRef = undefined;
|
|
13
|
+
this.placeholder = '';
|
|
14
|
+
this.label = undefined;
|
|
15
|
+
this.defaultOption = undefined;
|
|
16
|
+
this.selectedOption = undefined;
|
|
17
|
+
this.disabled = undefined;
|
|
18
|
+
this.size = 'lg';
|
|
19
|
+
this.inline = false;
|
|
20
|
+
this.labelPosition = 'no-label';
|
|
21
|
+
this.state = 'default';
|
|
22
|
+
this.helper = '';
|
|
23
|
+
this.data = undefined;
|
|
24
|
+
this.selectedLabel = 'no-selected';
|
|
25
|
+
this.selectedValue = 'no-selected';
|
|
26
|
+
}
|
|
27
|
+
componentWillLoad() {
|
|
28
|
+
this.parseData(this.data);
|
|
29
|
+
if (this.defaultOption) {
|
|
30
|
+
this.selectedOptionState = this.defaultOption;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
parseData(newValue) {
|
|
34
|
+
if (newValue)
|
|
35
|
+
this.dataOptions = JSON.parse(newValue);
|
|
36
|
+
this.filteredContent = this.dataOptions;
|
|
37
|
+
}
|
|
38
|
+
updateOptionsContent(event) {
|
|
39
|
+
this.searchTerm = event.detail;
|
|
40
|
+
this.findData();
|
|
41
|
+
}
|
|
42
|
+
selectOptionHandler(event) {
|
|
43
|
+
this.selectedOptionState = event.detail.value;
|
|
44
|
+
this.selectedLabel = event.detail.label;
|
|
45
|
+
this.selectedValue = event.detail.value;
|
|
46
|
+
// Reset list when search is done and user have selected one option
|
|
47
|
+
// To match with animation time for option list to fadeout first
|
|
48
|
+
setTimeout(() => {
|
|
49
|
+
this.filteredContent = this.dataOptions;
|
|
50
|
+
}, 200);
|
|
51
|
+
}
|
|
52
|
+
findData() {
|
|
53
|
+
const searchAsRegEx = new RegExp(this.searchTerm, 'gmi');
|
|
54
|
+
this.filteredContent = this.dataOptions.filter(option => {
|
|
55
|
+
if (option.label) {
|
|
56
|
+
const listItem = option.label.toLowerCase();
|
|
57
|
+
const searchResultList = listItem.match(searchAsRegEx);
|
|
58
|
+
if (searchResultList) {
|
|
59
|
+
return searchResultList;
|
|
60
|
+
}
|
|
61
|
+
this.selectedOptionState = null;
|
|
62
|
+
this.selectedLabel = 'no-result';
|
|
63
|
+
this.selectedValue = 'no-result';
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
setOptionsContent() {
|
|
68
|
+
const newList = this.filteredContent.map(obj => (h("sdds-dropdown-option", { tabindex: "0", value: obj.value, class: `${this.selectedOptionState === obj.value ? 'selected' : ''}` }, obj.label)));
|
|
69
|
+
if (newList.length > 0) {
|
|
70
|
+
return newList;
|
|
71
|
+
}
|
|
72
|
+
return (h("sdds-dropdown-option", { tabindex: "-1", value: "no-result", class: "sdds-option--no-result" }, "No result"));
|
|
73
|
+
}
|
|
74
|
+
/** Use this method to reset the dropdown. Then it will go back to its initial state. */
|
|
75
|
+
async resetOption() {
|
|
76
|
+
var _a;
|
|
77
|
+
await ((_a = this.dropdownRef) === null || _a === void 0 ? void 0 : _a.resetOption());
|
|
78
|
+
}
|
|
79
|
+
render() {
|
|
80
|
+
return (h(Host, { "selected-value": this.selectedValue, "selected-text": this.selectedLabel }, h("sdds-dropdown", { ref: el => (this.dropdownRef = el), exportparts: "dropdown-filter-disabled", size: this.size, label: this.label, disabled: this.disabled, labelPosition: this.labelPosition, helper: this.helper, state: this.state, placeholder: this.placeholder, defaultOption: this.defaultOption, selectedOption: this.selectedOption, type: "filter", tabindex: this.disabled ? '-1' : null }, this.setOptionsContent())));
|
|
81
|
+
}
|
|
82
|
+
static get watchers() { return {
|
|
83
|
+
"data": ["parseData"]
|
|
84
|
+
}; }
|
|
85
|
+
};
|
|
86
86
|
DropdownFilter.style = dropdownCss;
|
|
87
87
|
|
|
88
88
|
export { DropdownFilter as sdds_dropdown_filter };
|