npm - @scania/tegel - Versions diffs - 0.0.1-beta.9 → 0.0.4 - Mend

@scania/tegel 0.0.1-beta.9 → 0.0.4

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.

Files changed (897) hide show

package/dist/components/dropdown-option.js ADDED Viewed

@@ -0,0 +1,102 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+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}";
+const DropdownOption = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.selectOption = createEvent(this, "selectOption", 7);
+    this.innerValue = undefined;
+    this.selected = false;
+    this.disabled = false;
+    this.value = undefined;
+  }
+  changeFocusHandler() {
+    this.host.focus();
+  }
+  removeFocusHandler() {
+    this.host.blur();
+  }
+  onKeyDown(event) {
+    if (event.code === 'Enter') {
+      this.selectOptionHandler({
+        value: this.value,
+        label: this.host.innerText,
+        parent: this.host.parentNode,
+      });
+    }
+  }
+  componentWillLoad() {
+    this.innerValue = this.value;
+    this.isMultiSelectOption = this.host
+      .closest('sdds-dropdown')
+      .classList.contains('sdds-dropdown-multiselect');
+  }
+  selectOptionHandler(value) {
+    if (!this.disabled) {
+      const listOptions = value.parent.childNodes;
+      this.selectOption.emit(value);
+      if (!this.isMultiSelectOption) {
+        listOptions.forEach((optionEl) => {
+          // TODO: fix and enable rule
+          // eslint-disable-next-line no-param-reassign
+          optionEl.selected = false;
+        });
+      }
+      const optionCheckbox = this.host.shadowRoot.querySelector('input');
+      if (this.selected) {
+        this.selected = false;
+        if (optionCheckbox) {
+          optionCheckbox.checked = false;
+        }
+      }
+      else {
+        this.selected = true;
+        if (optionCheckbox) {
+          optionCheckbox.checked = true;
+        }
+      }
+    }
+  }
+  render() {
+    return (h(Host, { onClick: (ev) => {
+        if (this.isMultiSelectOption) {
+          ev.stopPropagation();
+        }
+        return this.selectOptionHandler({
+          value: this.value,
+          label: this.host.innerText,
+          parent: ev.target.parentNode,
+        });
+      }, class: {
+        'selected': this.selected,
+        'sdds-dropdown-option-disabled': this.disabled,
+      }, tabindex: "-1", "aria-disabled": this.disabled }, this.isMultiSelectOption && (h("div", { class: "sdds-checkbox-item sdds-option-checkbox" }, h("label", { class: "sdds-form-label" }, h("input", { class: "sdds-form-input", type: "checkbox", checked: this.selected, disabled: this.disabled })))), h("span", { class: "sdds-option-label" }, h("slot", null)), !this.isMultiSelectOption && (h("span", { class: "sdds-option-checkmark" }, h("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 3L4 6L9 1", stroke: "currentColor", "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
+  }
+  get host() { return this; }
+  static get style() { return dropdownCss; }
+}, [1, "sdds-dropdown-option", {
+    "selected": [4],
+    "disabled": [4],
+    "value": [513],
+    "innerValue": [32]
+  }, [[1, "mouseover", "changeFocusHandler"], [1, "mouseout", "removeFocusHandler"], [0, "keydown", "onKeyDown"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-dropdown-option"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-dropdown-option":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DropdownOption);
+      }
+      break;
+  } });
+}
+export { DropdownOption as D, defineCustomElement as d };
+//# sourceMappingURL=dropdown-option.js.map

package/dist/components/dropdown-option.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"dropdown-option.js","mappings":";;AAAA,MAAM,WAAW,GAAG,43kCAA43kC;;MCiBn4kC,cAAc;;;;;;;oBAOG,KAAK;oBAGL,KAAK;;;EAgBjC,kBAAkB;IAChB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;GACnB;EAGD,kBAAkB;IAChB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;GAClB;EAGD,SAAS,CAAC,KAAoB;IAC5B,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;MAC1B,IAAI,CAAC,mBAAmB,CAAC;QACvB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS;QAC1B,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU;OAC7B,CAAC,CAAC;KACJ;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;IAC7B,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,IAAI;OACjC,OAAO,CAAC,eAAe,CAAC;OACxB,SAAS,CAAC,QAAQ,CAAC,2BAA2B,CAAC,CAAC;GACpD;EAED,mBAAmB,CAAC,KAAK;IACvB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC;MAC5C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAC9B,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE;QAC7B,WAAW,CAAC,OAAO,CAAC,CAAC,QAAQ;;;UAG3B,QAAQ,CAAC,QAAQ,GAAG,KAAK,CAAC;SAC3B,CAAC,CAAC;OACJ;MACD,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;MAEnE,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,cAAc,EAAE;UAClB,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;SAChC;OACF;WAAM;QACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,cAAc,EAAE;UAClB,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;SAC/B;OACF;KACF;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,OAAO,EAAE,CAAC,EAAE;QACV,IAAI,IAAI,CAAC,mBAAmB,EAAE;UAC5B,EAAE,CAAC,eAAe,EAAE,CAAC;SACtB;QACD,OAAO,IAAI,CAAC,mBAAmB,CAAC;UAC9B,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS;UAC1B,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU;SAC7B,CAAC,CAAC;OACJ,EACD,KAAK,EAAE;QACL,UAAU,EAAE,IAAI,CAAC,QAAQ;QACzB,+BAA+B,EAAE,IAAI,CAAC,QAAQ;OAC/C,EACD,QAAQ,EAAC,IAAI,mBACE,IAAI,CAAC,QAAQ,IAE3B,IAAI,CAAC,mBAAmB,KACvB,WAAK,KAAK,EAAC,yCAAyC,IAClD,aAAO,KAAK,EAAC,iBAAiB,IAC5B,aACE,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACI,CACJ,CACP,EACD,YAAM,KAAK,EAAC,mBAAmB,IAC7B,eAAQ,CACH,EACN,CAAC,IAAI,CAAC,mBAAmB,KACxB,YAAM,KAAK,EAAC,uBAAuB,IACjC,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,EACV,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,IAElC,YACE,CAAC,EAAC,cAAc,EAChB,MAAM,EAAC,cAAc,kBACR,MAAM,oBACJ,OAAO,qBACN,OAAO,GACvB,CACE,CACD,CACR,CACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/dropdown/dropdown.scss?tag=sdds-dropdown-option&encapsulation=shadow","./src/components/dropdown/dropdown-option/dropdown-option.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import './dropdown-core';\n@import './dropdown-vars.scss';\n@import '../../global/scania-fonts-vars.scss';\n\n@import '../checkbox/checkbox.scss';\n@import '../../mixins/box-sizing';\n\n:host,\n::slotted(*) {\n color: var(--sdds-grey-958);\n box-sizing: border-box;\n @include sdds-box-sizing;\n}\n\n:host,\n::slotted(*) {\n --sdds-dropdown-label-outside: var(--sdds-dropdown-label-outside);\n --sdds-dropdown-label-outside-text-decoration: none;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-grey-958);\n box-sizing: border-box;\n}\n\n:host {\n position: relative;\n z-index: auto;\n\n &::part(dropdown-filter-disabled) {\n cursor: not-allowed;\n caret-color: transparent;\n pointer-events: none;\n color: var(--sdds-grey-400);\n border: none;\n\n &::placeholder {\n color: var(--sdds-grey-400);\n }\n }\n}\n\n.sdds-dropdown {\n position: relative;\n display: flex;\n flex-flow: column wrap;\n width: 100%;\n border: 0;\n\n &,\n * {\n box-sizing: border-box;\n }\n\n .sdds-dropdown-toggle {\n @include dropdown-wrapper;\n\n display: flex;\n align-items: center;\n\n &-lg {\n padding: 20px 16px;\n }\n\n &-md {\n padding: 16px;\n }\n\n &-sm {\n padding: 12px 16px;\n }\n\n &.sdds-dropdown-toggle-label-inside {\n &-lg {\n padding: 20px 16px 16px;\n }\n\n &-md {\n padding: 16px 16px 12px;\n }\n }\n }\n\n .sdds-dropdown-toggle--selected:not(:focus) {\n border-bottom: 1px solid var(--sdds-dropdown-border-not-focused);\n }\n\n .sdds-dropdown-arrow {\n width: 20px;\n position: absolute;\n right: 16px;\n color: inherit;\n transform: rotate(0);\n transition: transform ease 250ms;\n }\n\n .sdds-dropdown-placeholder {\n color: var(--sdds-grey-700);\n }\n\n .sdds-dropdown-label {\n display: grid;\n width: calc(100% - 25px);\n }\n\n .sdds-dropdown-label-container {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &.sdds-dropdown.sdds-dropdown-sm {\n .sdds-dropdown-label-container--label-inside {\n padding-bottom: 12px;\n }\n }\n\n .sdds-dropdown-filter {\n border: 0;\n outline: none;\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-dropdown-link);\n width: 100%;\n background: transparent;\n\n &:focus {\n outline: none;\n }\n\n &::placeholder {\n color: var(--sdds-grey-700);\n opacity: 1;\n }\n }\n\n .sdds-dropdown-menu {\n z-index: z(dropdown);\n\n @include sdds-scrollbar;\n\n background-color: var(--sdds-dropdown-background);\n position: absolute;\n top: 100%;\n left: 0;\n min-width: 100%;\n max-height: 360px; // max 7 option items, then add scroll\n border-color: transparent;\n border-style: solid;\n border-width: 0 1px 1px;\n box-shadow: 0 2px 3px 0 rgb(0 0 0 / 10%);\n border-left-color: var(--sdds-dropdown-border);\n border-right-color: var(--sdds-dropdown-border);\n overflow-x: hidden;\n overflow-y: auto;\n transform: scaleY(0);\n transform-origin: top;\n transition: transform 250ms ease;\n }\n\n // Size lg\n &.sdds-dropdown-lg {\n .sdds-dropdown-toggle {\n height: 56px;\n }\n }\n\n // Size md\n &.sdds-dropdown-md {\n .sdds-dropdown-toggle {\n height: 48px;\n }\n }\n\n // Size sm\n &.sdds-dropdown-sm {\n .sdds-dropdown-toggle {\n height: 40px;\n }\n }\n}\n\n:host(.sdds-dropdown--open-upwards) {\n .sdds-dropdown {\n .sdds-dropdown-menu {\n top: auto;\n bottom: 100%;\n box-shadow: 0 -1px 3px 0 rgb(0 0 0 / 10%);\n transform-origin: bottom;\n }\n }\n}\n\n:host(.sdds-dropdown--open-upwards[label-position='outside']) {\n span.sdds-dropdown-menu {\n bottom: calc(100% - 24px);\n }\n}\n\n:host([disabled='true']) {\n cursor: not-allowed;\n\n .sdds-dropdown {\n .sdds-dropdown-toggle {\n pointer-events: none;\n color: var(--sdds-dropdown-option-disabled-color);\n border: none;\n padding: 0 16px;\n\n .sdds-dropdown-placeholder {\n color: var(--sdds-dropdown-placeholder);\n }\n\n .sdds-dropdown-label-inside {\n color: var(--sdds-dropdown-label-inside);\n }\n\n &:focus {\n &::before {\n content: none;\n }\n }\n }\n }\n}\n\n:host(.sdds-dropdown--error) {\n .sdds-dropdown {\n .sdds-dropdown-toggle {\n border-color: var(--sdds-negative);\n\n &:focus {\n &::before {\n border-color: var(--sdds-negative);\n }\n }\n }\n }\n\n .sdds-dropdown-helper {\n color: var(--sdds-negative);\n\n .sdds-dropdown-error-icon {\n display: flex;\n }\n }\n}\n\n// dropdown option\n:host {\n ::slotted(sdds-dropdown-option) {\n display: flex;\n padding: var(--sdds-spacing-element-16);\n background-color: var(--sdds-dropdown-background);\n border-top: 1px solid transparent;\n border-bottom: 1px solid var(--sdds-dropdown-border);\n opacity: 0;\n visibility: hidden;\n cursor: pointer;\n box-sizing: border-box;\n color: var(--sdds-dropdown-option-color);\n }\n\n ::slotted(sdds-dropdown-option:last-child) {\n border-bottom-color: transparent;\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n }\n\n ::slotted(sdds-dropdown-option:hover),\n ::slotted(sdds-dropdown-option:focus) {\n background-color: var(--sdds-dropdown-background-hover);\n }\n\n ::slotted(sdds-dropdown-option:hover:not(:focus):not(sdds-dropdown-option.selected)) {\n background-color: var(--sdds-dropdown-background-hover);\n }\n\n ::slotted(sdds-dropdown-option:hover:focus) {\n outline: none;\n }\n\n ::slotted(sdds-dropdown-option:focus) {\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n ::slotted(sdds-dropdown-option.sdds-dropdown--selected),\n ::slotted(sdds-dropdown-option.selected),\n ::slotted(sdds-dropdown-option.active),\n ::slotted(sdds-dropdown-option:active) {\n background-color: var(--sdds-dropdown-background-hover);\n border-top: 1px solid var(--sdds-dropdown-border);\n border-bottom: 1px solid var(--sdds-dropdown-border);\n }\n\n ::slotted(sdds-dropdown-option.sdds-option--no-result) {\n cursor: not-allowed;\n pointer-events: none;\n }\n\n ::slotted(sdds-dropdown-option.sdds-dropdown-option-disabled),\n ::slotted(sdds-dropdown-option.selected.sdds-dropdown-option-disabled) {\n cursor: not-allowed;\n color: var(--sdds-dropdown-option-disabled-color);\n background-color: var(--sdds-dropdown-background-disabled);\n }\n}\n\n:host(.sdds-dropdown--open-upwards) {\n ::slotted(sdds-dropdown-option:first-child) {\n border-radius: 4px 4px 0 0;\n }\n\n ::slotted(sdds-dropdown-option:last-child) {\n border-radius: 0;\n border-bottom: 1px solid var(--sdds-dropdown-border);\n }\n}\n\n.sdds-option-label {\n margin: auto 0;\n display: flex;\n align-content: center;\n text-decoration: none;\n flex-grow: 2;\n}\n\n.sdds-option-checkmark {\n color: inherit;\n opacity: 0;\n transition: opacity 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);\n margin-left: var(--sdds-spacing-element-16);\n\n path {\n color: var(--sdds-dropdown-option-color);\n }\n}\n\n:host([size='sm']) {\n ::slotted(sdds-dropdown-option) {\n padding: var(--sdds-spacing-element-12) var(--sdds-spacing-element-16);\n }\n}\n\n:host(.sdds-dropdown--open) {\n .sdds-dropdown {\n .sdds-dropdown-toggle {\n box-shadow: 0 -1px 3px -1px rgb(0 0 0 / 10%);\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n\n // TODO: what is this? it doesnt seem to do anything.\n &.is-filter {\n &::before {\n content: ' ';\n position: absolute;\n z-index: 2;\n bottom: 0;\n left: 0;\n width: 100%;\n border-bottom: 1px solid var(--sdds-blue-400);\n }\n }\n }\n\n .sdds-dropdown-arrow {\n transform: rotate(180deg);\n }\n\n .sdds-dropdown-menu {\n transform: scaleY(1);\n }\n }\n\n ::slotted(sdds-dropdown-option) {\n visibility: visible;\n opacity: 1;\n }\n}\n\n:host(.selected) {\n .sdds-option-checkmark {\n opacity: 1;\n }\n}\n\n.sdds-dropdown-label-inside {\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-dropdown-label-inside);\n position: absolute;\n transition: transform 250ms ease, color 200ms ease;\n width: calc(100% - 63px);\n overflow: hidden;\n text-overflow: ellipsis;\n transform: translate(0, -10px);\n font-size: 10px;\n}\n\n.sdds-dropdown-label-container.sdds-dropdown-label-container--label-inside {\n .sdds-dropdown-placeholder {\n display: block;\n padding-top: 4px;\n }\n}\n\n.sdds-dropdown-lg {\n .sdds-dropdown-label-inside {\n display: block;\n top: 16px;\n }\n}\n\n.sdds-dropdown-md {\n .sdds-dropdown-label-inside {\n display: block;\n top: 12px;\n }\n}\n\n.sdds-dropdown.sdds-dropdown-sm {\n .sdds-dropdown-label-inside {\n display: none;\n }\n}\n\n.sdds-dropdown-multiselect-result {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.sdds-option-checkbox {\n margin-right: 8px;\n}\n\n.sdds-form-label {\n display: flex;\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Element,\n Host,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\n\n@Component({\n tag: 'sdds-dropdown-option',\n styleUrl: './../dropdown.scss',\n shadow: true,\n})\nexport class DropdownOption {\n @Element() host: HTMLElement;\n\n // Used as a fallback if value prop is not recognized to match handleClick\n @State() innerValue: string;\n\n /** Selected set to true if selected */\n @Prop() selected: boolean = false;\n\n /** Sets option to disabled state if true */\n @Prop() disabled: boolean = false;\n\n /** Value is a unique string that will be used for application logic */\n @Prop({ reflect: true }) value: string;\n\n @Event({\n eventName: 'selectOption',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n selectOption: EventEmitter<any>;\n\n isMultiSelectOption: boolean;\n\n @Listen('mouseover')\n changeFocusHandler() {\n this.host.focus();\n }\n\n @Listen('mouseout')\n removeFocusHandler() {\n this.host.blur();\n }\n\n @Listen('keydown')\n onKeyDown(event: KeyboardEvent) {\n if (event.code === 'Enter') {\n this.selectOptionHandler({\n value: this.value,\n label: this.host.innerText,\n parent: this.host.parentNode,\n });\n }\n }\n\n componentWillLoad() {\n this.innerValue = this.value;\n this.isMultiSelectOption = this.host\n .closest('sdds-dropdown')\n .classList.contains('sdds-dropdown-multiselect');\n }\n\n selectOptionHandler(value) {\n if (!this.disabled) {\n const listOptions = value.parent.childNodes;\n this.selectOption.emit(value);\n if (!this.isMultiSelectOption) {\n listOptions.forEach((optionEl) => {\n // TODO: fix and enable rule\n // eslint-disable-next-line no-param-reassign\n optionEl.selected = false;\n });\n }\n const optionCheckbox = this.host.shadowRoot.querySelector('input');\n\n if (this.selected) {\n this.selected = false;\n if (optionCheckbox) {\n optionCheckbox.checked = false;\n }\n } else {\n this.selected = true;\n if (optionCheckbox) {\n optionCheckbox.checked = true;\n }\n }\n }\n }\n\n render() {\n return (\n <Host\n onClick={(ev) => {\n if (this.isMultiSelectOption) {\n ev.stopPropagation();\n }\n return this.selectOptionHandler({\n value: this.value,\n label: this.host.innerText,\n parent: ev.target.parentNode,\n });\n }}\n class={{\n 'selected': this.selected,\n 'sdds-dropdown-option-disabled': this.disabled,\n }}\n tabindex=\"-1\"\n aria-disabled={this.disabled}\n >\n {this.isMultiSelectOption && (\n <div class=\"sdds-checkbox-item sdds-option-checkbox\">\n <label class=\"sdds-form-label\">\n <input\n class=\"sdds-form-input\"\n type=\"checkbox\"\n checked={this.selected}\n disabled={this.disabled}\n />\n </label>\n </div>\n )}\n <span class=\"sdds-option-label\">\n <slot />\n </span>\n {!this.isMultiSelectOption && (\n <span class=\"sdds-option-checkmark\">\n <svg\n width=\"10\"\n height=\"7\"\n viewBox=\"0 0 10 7\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1 3L4 6L9 1\"\n stroke=\"currentColor\"\n stroke-width=\"1.25\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/dropdown.js ADDED Viewed

@@ -0,0 +1,305 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+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}";
+const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.inputSearch = createEvent(this, "inputSearch", 7);
+    this.modeVariant = undefined;
+    this.placeholder = undefined;
+    this.defaultOption = undefined;
+    this.selectedOption = undefined;
+    this.disabled = undefined;
+    this.type = 'default';
+    this.size = 'lg';
+    this.inline = false;
+    this.labelPosition = 'no-label';
+    this.label = undefined;
+    this.state = 'default';
+    this.helper = '';
+    this.openDirection = 'auto';
+    this.optionValues = [];
+    this.optionLabels = [];
+    this.open = false;
+    this.node = undefined;
+    this.selectedLabel = '';
+    this.selectedValue = '';
+    this.selectedValuesArray = [];
+    this.selectedLabelsArray = [];
+    this.dropdownUniqueClass = '';
+    this.openUpwards = false;
+    this.dropdownMenuHeight = 0;
+    this.dropdownMenuSelector = undefined;
+    this.listItemIndex = -1;
+    this.listItemArray = undefined;
+  }
+  componentWillLoad() {
+    // If default option is set, update the default selectedLabel value
+    // this.host.children is a HTMLCollection type, cannot use forEach
+    this.listItemArray = Array.from(this.host.children);
+    this.listItemArray.map((listItem) => {
+      this.optionValues.push(listItem.value);
+      this.optionLabels.push(listItem.innerText.trim());
+    });
+    this.setOptionFromOutside(this.defaultOption);
+    if (this.size === 'small') {
+      this.size = 'sm';
+      console.warn('size="small" is deprecated, use size="sm" instead');
+    }
+    if (this.size === 'medium') {
+      this.size = 'md';
+      console.warn('size="medium" is deprecated, use size="md" instead');
+    }
+    if (this.size === 'large') {
+      this.size = 'lg';
+      console.warn('size="large" is deprecated, use size="lg" instead');
+    }
+  }
+  setOptionFromOutside(optionValue) {
+    if (optionValue) {
+      this.deselectAll();
+      // TODO
+      // eslint-disable-next-line no-param-reassign
+      optionValue = optionValue.split(',');
+      for (let i = 0; i < this.host.children.length; i++) {
+        // Todo - specify type
+        const el = this.host.children[i];
+        if (optionValue.includes(el.value.trim())) {
+          this.selectedLabelsArray = [...this.selectedLabelsArray, el.textContent.trim()];
+          this.selectedValuesArray = [...this.selectedValuesArray, el.value];
+          this.selectedLabel = el.textContent;
+          this.selectedValue = el.value;
+          el.setAttribute('selectedLabel', 'true');
+          el.setAttribute('selected', 'true');
+        }
+        else {
+          el.setAttribute('selectedLabel', 'false');
+          el.setAttribute('selected', 'false');
+        }
+      }
+    }
+  }
+  changeSelectedOption() {
+    if (this.selectedValuesArray.includes(this.selectedOption)) {
+      this.resetOption();
+    }
+    this.setOptionFromOutside(this.selectedOption);
+    this.host.setAttribute('selected-option', '');
+  }
+  handleDocClick(ev) {
+    // To stop bubble click
+    ev.stopPropagation();
+    const target = ev ? ev.composedPath()[0] : window.event.target[0];
+    if (this.node !== undefined && this.node.contains(target)) {
+      if (typeof this.textInput !== 'undefined' || this.textInput === null) {
+        this.textInput.focus();
+      }
+    }
+    else {
+      this.tabbingLabelReset();
+      this.open = false;
+    }
+  }
+  keyListener(ev) {
+    if (!this.disabled) {
+      switch (ev.key) {
+        case 'ArrowDown':
+          if (this.open) {
+            ev.preventDefault();
+            if (this.listItemIndex < this.listItemArray.length - 1) {
+              this.listItemIndex++;
+            }
+            else {
+              this.listItemIndex = 0;
+            }
+            this.listItemArray[this.listItemIndex].focus();
+          }
+          break;
+        case 'ArrowUp':
+          if (this.open) {
+            ev.preventDefault();
+            if (this.listItemIndex > 0) {
+              this.listItemIndex--;
+            }
+            else {
+              this.listItemIndex = this.listItemArray.length - 1;
+            }
+            this.listItemArray[this.listItemIndex].focus();
+          }
+          break;
+        case 'Tab':
+          this.open = false;
+          break;
+        case 'Escape':
+          this.open = false;
+          this.node.focus();
+          break;
+      }
+    }
+  }
+  handleClick() {
+    this.open = this.open === false;
+    if (this.openDirection === 'auto') {
+      this.dropdownMenuHeight = this.dropdownMenuSelector.offsetHeight;
+      const distanceToBottom = this.host.getBoundingClientRect().top;
+      const viewportHeight = window.innerHeight;
+      this.openUpwards = distanceToBottom + this.dropdownMenuHeight + 57 > viewportHeight;
+      // If summary of dropdown menu height and its distance to the bottom is more than viewport height, open menu upwards
+      // Additional 57px is added as compensation for dropdown element own input/button height
+      // It is added on handleClick due to possible dynamic injection of data when component is already rendered
+    }
+    else {
+      this.openUpwards = this.openDirection === 'up';
+    }
+  }
+  tabbingLabelReset() {
+    if (typeof this.textInput !== 'undefined' || this.textInput === null) {
+      if (!this.selectedLabel && this.selectedLabel.length <= 0) {
+        this.textInput.value = '';
+        this.inputSearch.emit('');
+      }
+      if (this.selectedLabel !== this.textInput.value) {
+        this.textInput.value = this.selectedLabel;
+      }
+    }
+  }
+  selectOptionHandler(event) {
+    this.open = this.type === 'multiselect';
+    if (this.type !== 'multiselect') {
+      this.selectedLabel = event.detail.label;
+      this.selectedValue = event.detail.value;
+      this.tabbingLabelReset();
+    }
+    else {
+      if (this.selectedValuesArray.includes(event.detail.value)) {
+        const itemIndex = this.selectedValuesArray.indexOf(event.detail.value);
+        this.selectedValuesArray = this.selectedValuesArray.filter((_value, index) => index !== itemIndex);
+        this.selectedLabelsArray = this.selectedLabelsArray.filter((_value, index) => index !== itemIndex);
+      }
+      else {
+        this.selectedValuesArray = [...this.selectedValuesArray, event.detail.value];
+        this.selectedLabelsArray = [...this.selectedLabelsArray, event.detail.label.trim()];
+      }
+    }
+  }
+  handleSearch(ev) {
+    const searchTerm = ev.target.value;
+    this.inputSearch.emit(searchTerm);
+    this.open = true;
+  }
+  deselectAll() {
+    this.selectedLabel = '';
+    this.selectedValue = '';
+    this.selectedLabelsArray = [];
+    this.selectedValuesArray = [];
+    this.listItemArray = this.listItemArray.map((optionItem) => (Object.assign(Object.assign({}, optionItem), { selected: false })));
+  }
+  async resetOption() {
+    this.deselectAll();
+    this.open = false;
+    if (this.defaultOption) {
+      this.setOptionFromOutside(this.defaultOption);
+    }
+  }
+  render() {
+    return (h(Host, { class: `
+        ${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}
+        ${this.open && !this.disabled ? 'sdds-dropdown--open' : ''}
+        ${this.type === 'multiselect' ? 'sdds-dropdown-multiselect' : ''}
+        ${this.inline ? 'sdds-dropdown-inline' : ''}
+        ${this.selectedLabel.length > 0 || this.selectedLabel === ''
+        ? 'sdds-dropdown--selected'
+        : ''}
+        ${this.state === 'error' ? 'sdds-dropdown--error' : ''}
+        ${this.openUpwards ? 'sdds-dropdown--open-upwards' : ''}
+        ${this.labelPosition === 'inside' && this.selectedLabelsArray.length > 0
+        ? 'sdds-dropdown--label-inside-position'
+        : ''}
+       `, "selected-value": this.selectedValue, "selected-text": this.selectedLabel, "multi-selected-values": JSON.stringify(this.selectedValuesArray), "multi-selected-labels": JSON.stringify(this.selectedLabelsArray) }, h("span", { class: `sdds-dropdown sdds-dropdown-${this.size}` }, this.labelPosition === 'outside' && this.label.length > 0 ? (h("span", { class: "sdds-dropdown-label-outside" }, this.label)) : (''), h("button", { part: this.disabled ? 'dropdown-filter-disabled' : '', disabled: this.disabled, tabindex: this.disabled ? '-1' : null, class: `sdds-dropdown-toggle ${this.selectedValue === 'filter' ? 'is-filter' : ''} ${this.selectedValue !== '' || this.selectedLabelsArray.length > 0
+        ? 'sdds-dropdown-toggle--selected'
+        : ''}
+                ${this.labelPosition === 'inside' && this.selectedValue !== '' && this.size !== 'sm'
+        ? `sdds-dropdown-toggle-label-inside-${this.size}`
+        : `sdds-dropdown-toggle-${this.size}`}`, type: "button", onClick: () => this.handleClick(), ref: (node) => (this.node = node) }, h("span", { class: "sdds-dropdown-label" }, this.type === 'filter' ? (h("input", { part: this.disabled ? 'dropdown-filter-disabled' : '', disabled: this.disabled, tabindex: "-1", ref: (inputEl) => (this.textInput = inputEl), class: "sdds-dropdown-filter", type: "text", placeholder: this.placeholder, value: this.selectedLabel, onInput: (event) => this.handleSearch(event), autoComplete: "off" })) : (h("span", { class: {
+        'sdds-dropdown-label-container': true,
+        'sdds-dropdown-label-container--label-inside': this.labelPosition === 'inside' &&
+          this.size !== 'sm' &&
+          (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0),
+      } }, this.size !== 'sm' &&
+      (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0) &&
+      this.labelPosition === 'inside' &&
+      this.label.length > 0 && (h("span", { class: "sdds-dropdown-label-inside" }, this.label)), h("span", { class: `sdds-dropdown-label-main ${(this.selectedLabel.length === 0 ||
+        (this.labelPosition === 'inside' && this.label.length < 0)) &&
+        'sdds-dropdown-placeholder'}` }, this.selectedLabel.length > 0 &&
+      this.type !== 'multiselect' &&
+      this.selectedLabel, this.type === 'multiselect' && (h("span", { class: "sdds-dropdown-multiselect-result" }, this.labelPosition !== 'inside' &&
+      this.selectedLabelsArray.toString().length < 1 &&
+      this.placeholder, this.selectedLabelsArray.toString().length > 0 &&
+      this.selectedLabelsArray.toString().split(',').join(', '))), !this.selectedLabel &&
+      this.labelPosition === 'inside' &&
+      this.size !== 'sm' &&
+      this.label, !this.selectedLabel &&
+      this.type !== 'multiselect' &&
+      this.labelPosition !== 'inside' &&
+      this.placeholder, !this.selectedLabel &&
+      this.size === 'sm' &&
+      this.labelPosition === 'inside' &&
+      this.placeholder)))), h("svg", { class: "sdds-dropdown-arrow", width: "12", height: "7", viewBox: "0 0 12 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 1L6 6L11 1", stroke: "currentColor", "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { class: "sdds-dropdown-menu",
+      // Need to have reference in order to calc height and distance from bottom
+      ref: (dropdownMenu) => (this.dropdownMenuSelector = dropdownMenu) }, h("slot", null))), h("p", { class: "sdds-dropdown-helper" }, h("svg", { class: "sdds-dropdown-error-icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 4C9.37 4 3.996 9.374 3.996 16.004S9.371 28.007 16 28.007c6.63 0 12.004-5.374 12.004-12.003C28.004 9.374 22.629 4 16 4ZM2 16.004c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14Z", fill: "currentColor" }), h("path", { d: "M14.803 14.47V10h2.376v4.47l-.352 4.295h-1.672l-.352-4.295Zm-.053 5.632h2.5v2.394h-2.5v-2.394Z", fill: "currentColor" })), h("span", null, this.helper))));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "selectedOption": ["changeSelectedOption"]
+  }; }
+  static get style() { return dropdownCss; }
+}, [1, "sdds-dropdown", {
+    "modeVariant": [1, "mode-variant"],
+    "placeholder": [1],
+    "defaultOption": [1, "default-option"],
+    "selectedOption": [1, "selected-option"],
+    "disabled": [4],
+    "type": [1],
+    "size": [1],
+    "inline": [4],
+    "labelPosition": [1, "label-position"],
+    "label": [1],
+    "state": [1],
+    "helper": [1],
+    "openDirection": [1, "open-direction"],
+    "optionValues": [32],
+    "optionLabels": [32],
+    "open": [32],
+    "node": [32],
+    "selectedLabel": [32],
+    "selectedValue": [32],
+    "selectedValuesArray": [32],
+    "selectedLabelsArray": [32],
+    "dropdownUniqueClass": [32],
+    "openUpwards": [32],
+    "dropdownMenuHeight": [32],
+    "dropdownMenuSelector": [32],
+    "listItemIndex": [32],
+    "listItemArray": [32],
+    "resetOption": [64]
+  }, [[4, "click", "handleDocClick"], [0, "keydown", "keyListener"], [0, "selectOption", "selectOptionHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-dropdown"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-dropdown":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Dropdown);
+      }
+      break;
+  } });
+}
+export { Dropdown as D, defineCustomElement as d };
+//# sourceMappingURL=dropdown.js.map