npm - @scania/tegel - Versions diffs - 0.0.5 → 0.0.6 - Mend

@scania/tegel 0.0.5 → 0.0.6

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 (1107) hide show

package/dist/esm/sdds-datetime.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-datetime.entry.js","mappings":"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","names":[],"sources":["./src/components/datetime/datetime.scss?tag=sdds-datetime&encapsulation=shadow","./src/components/datetime/datetime.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n@mixin datetime-base {\n @include sdds-box-sizing;\n\n border-radius: 4px 4px 0 0;\n width: 100%;\n box-sizing: border-box;\n margin: 0;\n border: none;\n outline: none;\n height: 100%;\n color: var(--sdds-datetime-color);\n background-color: var(--sdds-datetime-background);\n\n &::placeholder {\n opacity: 1;\n color: var(--sdds-datetime-placeholder);\n }\n\n &:focus::placeholder {\n color: var(--sdds-datetime-placeholder-color-focus);\n }\n\n &:disabled {\n background-color: var(--sdds-datetime-background-disabled);\n color: var(--sdds-datetime-color-disabled);\n cursor: not-allowed;\n\n &::placeholder {\n color: var(--sdds-datetime-placeholder-disabled);\n }\n\n ~ .sdds-datetime-label-inside {\n color: var(--sdds-datetime-label-disabled);\n }\n }\n}\n\n// icons\n\n.sdds-datetime-input,\n.sdds-datetime-input-md,\n.sdds-datetime-input-sm {\n &[type='datetime-local'] {\n ~ .icon-time {\n display: none;\n }\n }\n\n &[type='date'] {\n ~ .icon-time {\n display: none;\n }\n }\n\n &[type='time'] {\n ~ .icon-datetime-local {\n display: none;\n }\n }\n}\n\n//Sizes\n.sdds-datetime-input {\n @include datetime-base;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);\n}\n\n.sdds-datetime-input-md {\n @include datetime-base;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n padding: var(--sdds-spacing-element-16);\n}\n\n.sdds-datetime-input-sm {\n @include datetime-base;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n padding: var(--sdds-spacing-element-16);\n}\n\n//Container for input field and prefix/suffix\n.sdds-datetime-container {\n border-radius: 4px 4px 0 0;\n display: flex;\n position: relative;\n height: 56px;\n box-sizing: border-box;\n background-color: var(--sdds-datetime-background);\n border-bottom: 1px solid var(--sdds-datetime-border-bottom);\n transition: border-bottom-color 200ms ease;\n\n &:hover {\n border-bottom-color: var(--sdds-datetime-border-bottom-hover);\n }\n\n .sdds-form-datetime-md & {\n height: 48px;\n }\n\n .sdds-form-datetime-sm & {\n height: 40px;\n }\n}\n\n.sdds-datetime-input-container {\n position: relative;\n width: 100%;\n\n .datetime-icon {\n height: 20px;\n width: 20px;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n right: 18px;\n pointer-events: none;\n\n path {\n fill: var(--sdds-datetime-icon);\n }\n }\n}\n\n.sdds-datetime-label {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n display: block;\n margin-bottom: var(--sdds-spacing-element-8);\n color: var(--sdds-datetime-label-color);\n}\n\n.sdds-datetime-label-inside {\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n position: absolute;\n pointer-events: none;\n color: var(--sdds-datetime-label-inside-color);\n left: 16px;\n}\n\n@mixin placeholder-label {\n &::placeholder {\n color: transparent;\n }\n\n &::input-placeholder {\n color: transparent;\n }\n\n &:placeholder {\n color: transparent;\n }\n\n ::placeholder {\n color: transparent;\n }\n\n //Input field in focus\n &:focus::placeholder {\n transition: color 0.35s ease;\n color: var(--sdds-datetime-placeholder-color-focus);\n }\n}\n\n@mixin label-inside-transition {\n transition: 0.1s ease all;\n}\n\n//Form control\n.sdds-form-datetime {\n display: block;\n min-width: 208px;\n\n &-nomin {\n min-width: auto;\n }\n}\n\n//datetime container with label inside\n//Handling position, focus and transition for label inside\n.sdds-form-datetime.sdds-datetime-container-label-inside {\n .sdds-datetime-input {\n padding-top: var(--sdds-spacing-element-24);\n padding-bottom: 15px;\n\n ~ .sdds-datetime-label-inside {\n top: 20px;\n }\n\n @include placeholder-label;\n }\n\n .sdds-datetime-input-md {\n padding-top: var(--sdds-spacing-element-20);\n padding-bottom: 11px;\n\n ~ .sdds-datetime-label-inside {\n top: 16px;\n }\n\n @include placeholder-label;\n }\n\n .sdds-datetime-input-sm {\n padding-top: var(--sdds-spacing-element-20);\n padding-bottom: 11px;\n\n ~ .sdds-datetime-label-inside {\n top: 16px;\n }\n\n @include placeholder-label;\n }\n\n &.sdds-datetime-focus,\n &.sdds-datetime-data {\n .sdds-datetime-input-sm ~ .sdds-datetime-label-inside {\n font: var(--sdds-detail-07);\n letter-spacing: var(--sdds-detail-07-ls);\n @include label-inside-transition;\n\n top: 8px;\n }\n\n .sdds-datetime-input-md ~ .sdds-datetime-label-inside {\n font: var(--sdds-detail-07);\n letter-spacing: var(--sdds-detail-07-ls);\n @include label-inside-transition;\n\n top: 8px;\n }\n\n .sdds-datetime-input ~ .sdds-datetime-label-inside {\n font: var(--sdds-detail-07);\n letter-spacing: var(--sdds-detail-07-ls);\n @include label-inside-transition;\n\n top: 12px;\n }\n }\n}\n\n//datetime bottom bar when in focus\n.sdds-datetime-bar {\n position: absolute;\n width: 100%;\n\n &::before,\n &::after {\n content: '';\n height: 2px;\n top: 54px;\n width: 0;\n position: absolute;\n background: var(--sdds-datetime-bar);\n transition: 0.35s ease all;\n\n .sdds-form-datetime-md & {\n top: 46px;\n }\n\n .sdds-form-datetime-sm & {\n top: 40px;\n }\n }\n\n &::before {\n left: 50%;\n }\n\n &::after {\n right: 50%;\n }\n\n .sdds-datetime-focus &::before,\n .sdds-datetime-focus &::after {\n width: 50%;\n }\n}\n\n//Helper text\n.sdds-datetime-helper {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n display: block;\n flex-basis: 100%;\n padding-top: var(--sdds-spacing-element-4);\n color: var(--sdds-datetime-helper);\n\n .sdds-helper {\n display: inline-flex;\n gap: 8px;\n }\n}\n\n//Disabled state\n.sdds-form-datetime-disabled {\n .sdds-datetime-container {\n border-bottom-color: transparent;\n }\n\n .datetime-icon {\n svg {\n path {\n fill: var(--sdds-datetime-icon-disabled);\n }\n }\n }\n\n .sdds-datetime-label {\n color: var(--sdds-datetime-label-disabled);\n cursor: not-allowed;\n }\n}\n\n//Success state\n.sdds-form-datetime-success {\n .sdds-datetime-container {\n border-bottom-color: var(--sdds-datetime-border-bottom-success);\n color: var(--sdds-datetime-color-success);\n }\n\n .sdds-datetime-bar {\n &::before,\n &::after {\n background: var(--sdds-datetime-bar-sucess);\n }\n }\n}\n\n//Error State\n.sdds-form-datetime-error {\n .sdds-datetime-helper {\n color: var(--sdds-datetime-helper-error);\n }\n\n .sdds-datetime-container {\n border-bottom-color: var(--sdds-datetime-border-bottom-error);\n }\n\n .sdds-datetime-bar {\n &::before,\n &::after {\n background: var(--sdds-datetime-bar-error);\n }\n }\n .datetime-icon path {\n fill: var(--sdds-datetime-icon-error);\n }\n}\n\n.sdds-datetime-textcounter {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n color: var(--sdds-datetime-textcounter);\n float: right;\n\n & .sdds-datetime-textcounter-divider {\n // font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n color: var(--sdds-datetime-textcounter-divider);\n }\n}\n\n/* datetime picker icon remove testing /\n\ninput[type='datetime-local']::-webkit-inner-spin-button,\ninput[type='datetime-local']::-webkit-calendar-picker-indicator {\n opacity: 0;\n}\n\ninput[type='date']::-webkit-inner-spin-button,\ninput[type='date']::-webkit-calendar-picker-indicator {\n opacity: 0;\n}\n\ninput[type='time']::-webkit-inner-spin-button,\ninput[type='time']::-webkit-calendar-picker-indicator {\n opacity: 0;\n}\n.sdds-mode-variant-primary {\n --sdds-datetime-background: var(--sdds-datetime-background-primary);\n}\n.sdds-mode-variant-secondary {\n --sdds-datetime-background: var(--sdds-datetime-background-secondary);\n}\n","import { Component, State, h, Prop, Listen, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'sdds-datetime',\n styleUrl: 'datetime.scss',\n shadow: true,\n})\nexport class Datetime {\n /* Textinput for focus state /\n textInput?: HTMLInputElement;\n\n /* Which input type, text, password or similar /\n @Prop({ reflect: true }) type: 'datetime-local' \| 'date' \| 'time' = 'datetime-local';\n\n /* Value of the input text /\n @Prop({ reflect: true }) value = '';\n\n /* Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM /\n @Prop() defaultValue: string \| 'none' = 'none';\n\n /* Set input in disabled state /\n @Prop() disabled: boolean = false;\n\n /* Size of the input /\n @Prop() size: 'sm' \| 'md' \| 'lg' = 'lg';\n\n /* Resets min width rule /\n @Prop() noMinWidth: boolean = false;\n\n /* Set the variant of the datetime component. /\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n /* Name property /\n @Prop() name = '';\n\n /* Error state of input /\n @Prop() state: string;\n\n /* Autofocus for input /\n @Prop() autofocus: boolean = false;\n\n /* Label text for the component /\n @Prop() label: string = '';\n\n /* Helper text for the component /\n @Prop() helper: string = '';\n\n /* Listen to the focus state of the input /\n @State() focusInput: boolean;\n\n /* Change event for the datetime /\n @Event({\n composed: true,\n bubbles: true,\n cancelable: true,\n })\n sddsChange: EventEmitter;\n\n /* Blur event for the datetime /\n @Event({\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsBlur: EventEmitter<FocusEvent>;\n\n /* Focus event for the datetime /\n @Event({\n eventName: 'sddsFocus',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsFocus: EventEmitter<FocusEvent>;\n\n getDefaultValue = () => {\n const dateTimeObj = {\n year: this.defaultValue.slice(0, 4),\n month: this.defaultValue.slice(5, 7),\n day: this.defaultValue.slice(8, 10),\n hours: this.defaultValue.slice(11, 13),\n minutes: this.defaultValue.slice(14, 16),\n };\n switch (this.type) {\n case 'datetime-local':\n return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}T${dateTimeObj.hours}:${dateTimeObj.minutes}`;\n case 'date':\n return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}`;\n case 'time':\n return `${this.defaultValue.slice(0, 2)}:${this.defaultValue.slice(3, 5)}`;\n default:\n throw new Error('Invalid type.');\n }\n };\n\n componentWillLoad() {\n if (this.defaultValue !== 'none') {\n this.value = this.getDefaultValue();\n }\n }\n\n // Listener if input enters focus state\n @Listen('focus')\n handleFocusIn() {\n this.focusInput = true;\n }\n\n // Listener if input leaves focus state\n @Listen('focusout')\n handleFocusOut() {\n this.focusInput = false;\n }\n\n // Data input event in value prop\n handleInput(e): void {\n this.value = e.target.value;\n this.sddsChange.emit(e);\n }\n\n // Change event isn't a composed:true by default in for input\n handleChange(e: Event): void {\n this.sddsChange.emit(e);\n }\n\n /* Set the input as focus when clicking the whole datetime with suffix/prefix /\n handleFocusClick(e): void {\n this.textInput.focus();\n this.sddsFocus.emit(e);\n }\n\n /* Set the input as focus when clicking the whole datetime with suffix/prefix */\n handleBlur(e): void {\n this.textInput.blur();\n this.sddsBlur.emit(e);\n }\n\n render() {\n let className = ' sdds-datetime-input';\n if (this.size === 'md') {\n className += `${className}-md`;\n }\n if (this.size === 'sm') {\n className += `${className}-sm`;\n }\n return (\n <div\n class={`\n ${this.noMinWidth ? 'sdds-form-datetime-nomin' : ''}\n ${this.focusInput ? 'sdds-form-datetime sdds-datetime-focus' : ' sdds-form-datetime'}\n ${this.value.length > 0 ? 'sdds-datetime-data' : ''}\n ${this.disabled ? 'sdds-form-datetime-disabled' : ''}\n ${this.size === 'md' ? 'sdds-form-datetime-md' : ''}\n ${this.size === 'sm' ? 'sdds-form-datetime-sm' : ''}\n ${\n this.state === 'error' \|\| this.state === 'success'\n ? `sdds-form-datetime-${this.state}`\n : ''\n }\n ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n `}\n >\n {this.label && (\n <label htmlFor={this.name} class=\"sdds-datetime-label\">\n {this.label}\n </label>\n )}\n <div\n onClick={(e) => this.handleFocusClick(e)}\n class=\"sdds-datetime-container sdds-datetime-container\"\n >\n <div class=\"sdds-datetime-input-container\">\n <input\n ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n class={className}\n type={this.type}\n disabled={this.disabled}\n value={this.value}\n autofocus={this.autofocus}\n name={this.name}\n onInput={(e) => this.handleInput(e)}\n onBlur={(e) => this.handleBlur(e)}\n onChange={(e) => this.handleChange(e)}\n />\n\n <div class=\"datetime-icon icon-datetime-local\">\n <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M23.625 2.977a1 1 0 1 0-2 0v2.985l-11.344.01V2.99a1 1 0 1 0-2 0v2.985H6.25a4.2 4.2 0 0 0-4.2 4.2V25.77a4.2 4.2 0 0 0 4.2 4.2h19.54a4.2 4.2 0 0 0 4.2-4.2V10.167a4.2 4.2 0 0 0-4.191-4.2l-2.174-.004V2.977ZM4.05 10.174a2.2 2.2 0 0 1 2.2-2.2l16.376-.013 3.17.006a2.2 2.2 0 0 1 2.195 2.2v1.847H4.05l-.001-1.84Zm0 3.84V25.77a2.2 2.2 0 0 0 2.2 2.2h19.54a2.2 2.2 0 0 0 2.2-2.2V14.014H4.05Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n\n <div class=\"datetime-icon icon-time\">\n <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n <path\n d=\"M17 7a1 1 0 1 0-2 0v8a2 2 0 0 0 2 2h6a1 1 0 1 0 0-2h-6V7Z\"\n fill=\"currentColor\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2ZM4 16C4 9.373 9.373 4 16 4s12 5.373 12 12-5.373 12-12 12S4 22.627 4 16Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n </div>\n <div class=\"sdds-datetime-bar\"></div>\n </div>\n\n <div class=\"sdds-datetime-helper\">\n {this.helper && (\n <div class=\"sdds-helper\">\n {this.state === 'error' && <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>}\n {this.helper}\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-datetime.entry.js","mappings":"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","names":[],"sources":["./src/components/datetime/datetime.scss?tag=sdds-datetime&encapsulation=scoped","./src/components/datetime/datetime.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n@mixin datetime-base {\n @include sdds-box-sizing;\n\n border-radius: 4px 4px 0 0;\n width: 100%;\n box-sizing: border-box;\n margin: 0;\n border: none;\n outline: none;\n height: 100%;\n color: var(--sdds-datetime-color);\n background-color: var(--sdds-datetime-background);\n\n &::placeholder {\n opacity: 1;\n color: var(--sdds-datetime-placeholder);\n }\n\n &:focus::placeholder {\n color: var(--sdds-datetime-placeholder-color-focus);\n }\n\n &:disabled {\n background-color: var(--sdds-datetime-background-disabled);\n color: var(--sdds-datetime-color-disabled);\n cursor: not-allowed;\n\n &::placeholder {\n color: var(--sdds-datetime-placeholder-disabled);\n }\n\n ~ .sdds-datetime-label-inside {\n color: var(--sdds-datetime-label-disabled);\n }\n }\n}\n\n// icons\n\n.sdds-datetime-input,\n.sdds-datetime-input-md,\n.sdds-datetime-input-sm {\n &[type='datetime-local'] {\n ~ .icon-time {\n display: none;\n }\n }\n\n &[type='date'] {\n ~ .icon-time {\n display: none;\n }\n }\n\n &[type='time'] {\n ~ .icon-datetime-local {\n display: none;\n }\n }\n}\n\n//Sizes\n.sdds-datetime-input {\n @include datetime-base;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);\n}\n\n.sdds-datetime-input-md {\n @include datetime-base;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n padding: var(--sdds-spacing-element-16);\n}\n\n.sdds-datetime-input-sm {\n @include datetime-base;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n padding: var(--sdds-spacing-element-16);\n}\n\n//Container for input field and prefix/suffix\n.sdds-datetime-container {\n border-radius: 4px 4px 0 0;\n display: flex;\n position: relative;\n height: 56px;\n box-sizing: border-box;\n background-color: var(--sdds-datetime-background);\n border-bottom: 1px solid var(--sdds-datetime-border-bottom);\n transition: border-bottom-color 200ms ease;\n\n &:hover {\n border-bottom-color: var(--sdds-datetime-border-bottom-hover);\n }\n\n .sdds-form-datetime-md & {\n height: 48px;\n }\n\n .sdds-form-datetime-sm & {\n height: 40px;\n }\n}\n\n.sdds-datetime-input-container {\n position: relative;\n width: 100%;\n\n .datetime-icon {\n height: 20px;\n width: 20px;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n right: 18px;\n pointer-events: none;\n\n path {\n fill: var(--sdds-datetime-icon);\n }\n }\n}\n\n.sdds-datetime-label {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n display: block;\n margin-bottom: var(--sdds-spacing-element-8);\n color: var(--sdds-datetime-label-color);\n}\n\n.sdds-datetime-label-inside {\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n position: absolute;\n pointer-events: none;\n color: var(--sdds-datetime-label-inside-color);\n left: 16px;\n}\n\n@mixin placeholder-label {\n &::placeholder {\n color: transparent;\n }\n\n &::input-placeholder {\n color: transparent;\n }\n\n &:placeholder {\n color: transparent;\n }\n\n ::placeholder {\n color: transparent;\n }\n\n //Input field in focus\n &:focus::placeholder {\n transition: color 0.35s ease;\n color: var(--sdds-datetime-placeholder-color-focus);\n }\n}\n\n@mixin label-inside-transition {\n transition: 0.1s ease all;\n}\n\n//Form control\n.sdds-form-datetime {\n display: block;\n min-width: 208px;\n background: unset;\n\n &-nomin {\n min-width: auto;\n }\n}\n\n//datetime container with label inside\n//Handling position, focus and transition for label inside\n.sdds-form-datetime.sdds-datetime-container-label-inside {\n .sdds-datetime-input {\n padding-top: var(--sdds-spacing-element-24);\n padding-bottom: 15px;\n\n ~ .sdds-datetime-label-inside {\n top: 20px;\n }\n\n @include placeholder-label;\n }\n\n .sdds-datetime-input-md {\n padding-top: var(--sdds-spacing-element-20);\n padding-bottom: 11px;\n\n ~ .sdds-datetime-label-inside {\n top: 16px;\n }\n\n @include placeholder-label;\n }\n\n .sdds-datetime-input-sm {\n padding-top: var(--sdds-spacing-element-20);\n padding-bottom: 11px;\n\n ~ .sdds-datetime-label-inside {\n top: 16px;\n }\n\n @include placeholder-label;\n }\n\n &.sdds-datetime-focus,\n &.sdds-datetime-data {\n .sdds-datetime-input-sm ~ .sdds-datetime-label-inside {\n font: var(--sdds-detail-07);\n letter-spacing: var(--sdds-detail-07-ls);\n @include label-inside-transition;\n\n top: 8px;\n }\n\n .sdds-datetime-input-md ~ .sdds-datetime-label-inside {\n font: var(--sdds-detail-07);\n letter-spacing: var(--sdds-detail-07-ls);\n @include label-inside-transition;\n\n top: 8px;\n }\n\n .sdds-datetime-input ~ .sdds-datetime-label-inside {\n font: var(--sdds-detail-07);\n letter-spacing: var(--sdds-detail-07-ls);\n @include label-inside-transition;\n\n top: 12px;\n }\n }\n}\n\n//datetime bottom bar when in focus\n.sdds-datetime-bar {\n position: absolute;\n width: 100%;\n\n &::before,\n &::after {\n content: '';\n height: 2px;\n top: 54px;\n width: 0;\n position: absolute;\n background: var(--sdds-datetime-bar);\n transition: 0.35s ease all;\n\n .sdds-form-datetime-md & {\n top: 46px;\n }\n\n .sdds-form-datetime-sm & {\n top: 40px;\n }\n }\n\n &::before {\n left: 50%;\n }\n\n &::after {\n right: 50%;\n }\n\n .sdds-datetime-focus &::before,\n .sdds-datetime-focus &::after {\n width: 50%;\n }\n}\n\n//Helper text\n.sdds-datetime-helper {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n display: block;\n flex-basis: 100%;\n padding-top: var(--sdds-spacing-element-4);\n color: var(--sdds-datetime-helper);\n\n .sdds-helper {\n display: inline-flex;\n gap: 8px;\n }\n}\n\n//Disabled state\n.sdds-form-datetime-disabled {\n .sdds-datetime-container {\n border-bottom-color: transparent;\n }\n\n .datetime-icon {\n sdds-icon {\n color: var(--sdds-datetime-icon-disabled);\n }\n }\n\n .sdds-datetime-label {\n color: var(--sdds-datetime-label-disabled);\n cursor: not-allowed;\n }\n}\n\n//Success state\n.sdds-form-datetime-success {\n .sdds-datetime-container {\n border-bottom-color: var(--sdds-datetime-border-bottom-success);\n color: var(--sdds-datetime-color-success);\n }\n\n .sdds-datetime-bar {\n &::before,\n &::after {\n background: var(--sdds-datetime-bar-sucess);\n }\n }\n}\n\n//Error State\n.sdds-form-datetime-error {\n .sdds-datetime-helper {\n color: var(--sdds-datetime-helper-error);\n }\n\n .sdds-datetime-container {\n border-bottom-color: var(--sdds-datetime-border-bottom-error);\n }\n\n .sdds-datetime-bar {\n &::before,\n &::after {\n background: var(--sdds-datetime-bar-error);\n }\n }\n\n .datetime-icon {\n sdds-icon {\n color: var(--sdds-datetime-icon-error);\n }\n }\n}\n\n.sdds-datetime-textcounter {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n color: var(--sdds-datetime-textcounter);\n float: right;\n\n & .sdds-datetime-textcounter-divider {\n // font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n color: var(--sdds-datetime-textcounter-divider);\n }\n}\n\n/* datetime picker icon remove testing /\n\ninput[type='datetime-local']::-webkit-inner-spin-button,\ninput[type='datetime-local']::-webkit-calendar-picker-indicator {\n opacity: 0;\n}\n\ninput[type='date']::-webkit-inner-spin-button,\ninput[type='date']::-webkit-calendar-picker-indicator {\n opacity: 0;\n}\n\ninput[type='time']::-webkit-inner-spin-button,\ninput[type='time']::-webkit-calendar-picker-indicator {\n opacity: 0;\n}\n\n.sdds-mode-variant-primary {\n --sdds-datetime-background: var(--sdds-datetime-background-primary);\n}\n\n.sdds-mode-variant-secondary {\n --sdds-datetime-background: var(--sdds-datetime-background-secondary);\n}\n","import { Component, State, h, Prop, Listen, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'sdds-datetime',\n styleUrl: 'datetime.scss',\n shadow: false,\n scoped: true,\n})\nexport class Datetime {\n /* Textinput for focus state /\n textInput?: HTMLInputElement;\n\n /* Which input type, text, password or similar /\n @Prop({ reflect: true }) type: 'datetime-local' \| 'date' \| 'time' = 'datetime-local';\n\n /* Value of the input text /\n @Prop({ reflect: true }) value = '';\n\n /* Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM /\n @Prop() defaultValue: string \| 'none' = 'none';\n\n /* Set input in disabled state /\n @Prop() disabled: boolean = false;\n\n /* Size of the input /\n @Prop() size: 'sm' \| 'md' \| 'lg' = 'lg';\n\n /* Resets min width rule /\n @Prop() noMinWidth: boolean = false;\n\n /* Set the variant of the datetime component. /\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n /* Name property /\n @Prop() name = '';\n\n /* Error state of input /\n @Prop() state: string;\n\n /* Autofocus for input /\n @Prop() autofocus: boolean = false;\n\n /* Label text for the component /\n @Prop() label: string = '';\n\n /* Helper text for the component /\n @Prop() helper: string = '';\n\n /* Listen to the focus state of the input /\n @State() focusInput: boolean;\n\n /* Change event for the datetime /\n @Event({\n eventName: 'sddsChange',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsChange: EventEmitter;\n\n /* Blur event for the datetime /\n @Event({\n eventName: 'sddsBlur',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsBlur: EventEmitter<FocusEvent>;\n\n /* Focus event for the datetime /\n @Event({\n eventName: 'sddsFocus',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsFocus: EventEmitter<FocusEvent>;\n\n getDefaultValue = () => {\n const dateTimeObj = {\n year: this.defaultValue.slice(0, 4),\n month: this.defaultValue.slice(5, 7),\n day: this.defaultValue.slice(8, 10),\n hours: this.defaultValue.slice(11, 13),\n minutes: this.defaultValue.slice(14, 16),\n };\n switch (this.type) {\n case 'datetime-local':\n return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}T${dateTimeObj.hours}:${dateTimeObj.minutes}`;\n case 'date':\n return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}`;\n case 'time':\n return `${this.defaultValue.slice(0, 2)}:${this.defaultValue.slice(3, 5)}`;\n default:\n throw new Error('Invalid type.');\n }\n };\n\n componentWillLoad() {\n if (this.defaultValue !== 'none') {\n this.value = this.getDefaultValue();\n }\n }\n\n // Listener if input enters focus state\n @Listen('focus')\n handleFocusIn() {\n this.focusInput = true;\n }\n\n // Listener if input leaves focus state\n @Listen('focusout')\n handleFocusOut() {\n this.focusInput = false;\n }\n\n // Data input event in value prop\n handleInput(e): void {\n this.value = e.target.value;\n this.sddsChange.emit(e);\n }\n\n // Change event isn't a composed:true by default in for input\n handleChange(e: Event): void {\n this.sddsChange.emit(e);\n }\n\n /* Set the input as focus when clicking the whole datetime with suffix/prefix /\n handleFocusClick(e): void {\n this.textInput.focus();\n this.sddsFocus.emit(e);\n }\n\n /* Set the input as focus when clicking the whole datetime with suffix/prefix */\n handleBlur(e): void {\n this.textInput.blur();\n this.sddsBlur.emit(e);\n }\n\n render() {\n let className = ' sdds-datetime-input';\n if (this.size === 'md') {\n className += `${className}-md`;\n }\n if (this.size === 'sm') {\n className += `${className}-sm`;\n }\n return (\n <div\n class={`\n ${this.noMinWidth ? 'sdds-form-datetime-nomin' : ''}\n ${this.focusInput ? 'sdds-form-datetime sdds-datetime-focus' : ' sdds-form-datetime'}\n ${this.value.length > 0 ? 'sdds-datetime-data' : ''}\n ${this.disabled ? 'sdds-form-datetime-disabled' : ''}\n ${this.size === 'md' ? 'sdds-form-datetime-md' : ''}\n ${this.size === 'sm' ? 'sdds-form-datetime-sm' : ''}\n ${\n this.state === 'error' \|\| this.state === 'success'\n ? `sdds-form-datetime-${this.state}`\n : ''\n }\n ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n `}\n >\n {this.label && (\n <label htmlFor={this.name} class=\"sdds-datetime-label\">\n {this.label}\n </label>\n )}\n <div\n onClick={(e) => this.handleFocusClick(e)}\n class=\"sdds-datetime-container sdds-datetime-container\"\n >\n <div class=\"sdds-datetime-input-container\">\n <input\n ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n class={className}\n type={this.type}\n disabled={this.disabled}\n value={this.value}\n autofocus={this.autofocus}\n name={this.name}\n onInput={(e) => this.handleInput(e)}\n onBlur={(e) => this.handleBlur(e)}\n onChange={(e) => this.handleChange(e)}\n />\n\n <div class=\"datetime-icon icon-datetime-local\">\n <sdds-icon size=\"20px\" name=\"calendar\"></sdds-icon>\n </div>\n\n <div class=\"datetime-icon icon-time\">\n <sdds-icon size=\"20px\" name=\"clock\"></sdds-icon>\n </div>\n </div>\n <div class=\"sdds-datetime-bar\"></div>\n </div>\n\n <div class=\"sdds-datetime-helper\">\n {this.helper && (\n <div class=\"sdds-helper\">\n {this.state === 'error' && <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>}\n {this.helper}\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/sdds-divider.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-fdfb114c.js';
+import { r as registerInstance, h, H as Host } from './index-2d8c4bc9.js';
 const dividerComponentCss = ".divider{box-sizing:border-box}.divider *{box-sizing:border-box}.divider.horizontal{background-color:var(--sdds-divider-background);width:100%;height:1px}.divider.vertical{background-color:var(--sdds-divider-background);height:100%;width:1px}";

package/dist/esm/sdds-dropdown-filter.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-fdfb114c.js';
+import { r as registerInstance, h, H as Host } from './index-2d8c4bc9.js';
-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-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);--sdds-dropdown-background-disabled:var(--sdds-grey-50)}: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-dropdown-background-disabled:var(--sdds-white)}.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-dropdown-background-disabled:var(--sdds-grey-868)}.sdds-mode-dark .sdds-mode-variant-secondary{--sdds-dropdown-background:var(--sdds-grey-900);--sdds-dropdown-background-hover:var(--sdds-grey-800);--sdds-dropdown-background-disabled:var(--sdds-grey-900)}.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-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-dropdown-disabled);border:none}:host::part(dropdown-filter-disabled)::placeholder{color:var(--sdds-dropdown-disabled)}.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 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-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);--sdds-dropdown-background-disabled:var(--sdds-dropdown-background)}: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-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-dropdown-background-disabled:var(--sdds-dropdown-background)}.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-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-background-opacity-hover:0.12;--sdds-checkbox-background-opacity-focus:0.24;--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:var(--sdds-grey-600);--sdds-checkbox-background-focus:var(--sdds-grey-600);--sdds-checkbox-background-opacity-hover:0.48;--sdds-checkbox-background-opacity-focus:0.72;--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}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before{width:24px;height:24px;left:0;top:0;border-radius:4px}.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;border-radius:2px}.sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:var(--sdds-checkbox-background-opacity-hover)}.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before{background-color:var(--sdds-checkbox-background-focus);opacity:var(--sdds-checkbox-background-opacity-focus);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(*){font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-grey-958);box-sizing:border-box}:host .sdds-dropdown-label-outside,::slotted(*) .sdds-dropdown-label-outside{color:var(--sdds-dropdown-label-outside);text-decoration:none}:host{position:relative;z-index:auto}:host::part(dropdown-filter-disabled){cursor:not-allowed;caret-color:transparent;pointer-events:none;color:var(--sdds-dropdown-disabled);border:none}:host::part(dropdown-filter-disabled)::placeholder{color:var(--sdds-dropdown-disabled)}.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 DropdownFilter = class {
   constructor(hostRef) {
@@ -14,6 +14,7 @@ const DropdownFilter = class {
     this.placeholder = '';
     this.label = undefined;
     this.defaultOption = undefined;
+    this.openDirection = 'auto';
     this.selectedOption = undefined;
     this.disabled = false;
     this.size = 'lg';
@@ -80,7 +81,7 @@ const DropdownFilter = class {
   render() {
     return (h(Host, { "selected-value": this.selectedValue, "selected-text": this.selectedLabel, class: `
       ${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}
-     ` }, h("sdds-dropdown", { ref: (el) => (this.dropdownRef = el), exportparts: "dropdown-filter-disabled", size: this.size, label: this.label, disabled: this.disabled, labelPosition: this.labelPosition, helper: this.helper, state: this.state, placeholder: this.placeholder, defaultOption: this.defaultOption, selectedOption: this.selectedOption, type: "filter", tabindex: this.disabled ? '-1' : null }, this.setOptionsContent())));
+     ` }, h("sdds-dropdown", { ref: (el) => (this.dropdownRef = el), exportparts: "dropdown-filter-disabled", size: this.size, label: this.label, disabled: this.disabled, labelPosition: this.labelPosition, helper: this.helper, state: this.state, placeholder: this.placeholder, defaultOption: this.defaultOption, selectedOption: this.selectedOption, type: "filter", tabindex: this.disabled ? '-1' : null, openDirection: this.openDirection }, this.setOptionsContent())));
   }
   static get watchers() { return {
     "data": ["parseData"]

package/dist/esm/sdds-dropdown-filter.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-dropdown-filter.entry.js","mappings":"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","names":[],"sources":["./src/components/dropdown/dropdown.scss?tag=sdds-dropdown-filter&encapsulation=shadow","./src/components/dropdown/dropdown-filter/dropdown-filter.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import './dropdown-core';\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-dropdown-disabled);\n border: none;\n\n &::placeholder {\n color: var(--sdds-dropdown-disabled);\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 { Component, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'sdds-dropdown-filter',\n shadow: true,\n styleUrl: './../dropdown.scss',\n})\nexport class DropdownFilter {\n @State() dataOptions = [];\n\n @State() filteredContent = [];\n\n @State() searchTerm = '';\n\n @State() selectedOptionState: any;\n\n @State() dropdownRef?: HTMLSddsDropdownElement;\n\n /** Set the variant of the dropdown. /\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n /* Placeholder text for dropdown with no selected item /\n @Prop() placeholder: string = '';\n\n /* Label for dropdown with no selected item /\n @Prop() label: string;\n\n /* Add the value of the option to set it as default /\n @Prop() defaultOption: string;\n\n /* Add the value of the option as string to set it as new selected value /\n @Prop() selectedOption: string;\n\n /* Add the value of the option to set it as default /\n @Prop() disabled: boolean = false;\n\n /* Controls the size of dropdown. 'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated /\n @Prop() size: 'sm' \| 'md' \| 'lg' \| 'small' \| 'medium' \| 'large' = 'lg';\n\n /* Set to true to make the width following the label text length /\n @Prop() inline: boolean = false;\n\n /* Position of label /\n @Prop() labelPosition: 'no-label' \| 'outside' = 'no-label';\n\n /* Support `error` state /\n @Prop() state: boolean = false;\n\n /* Add helper text in the bottom of dropdown /\n @Prop() helper: string = '';\n\n /* Data is an array of objects that contains label and value\n * `data = [{label:'Option 1', value:'opt-1'},{label:'Option 2', value:'opt-2'}]`\n /\n @Prop() data: string;\n\n @State() selectedLabel: string = 'no-selected';\n\n @State() selectedValue: string = 'no-selected';\n\n componentWillLoad() {\n this.parseData(this.data);\n\n if (this.defaultOption) {\n this.selectedOptionState = this.defaultOption;\n }\n }\n\n @Watch('data')\n parseData(newValue: string) {\n if (newValue) this.dataOptions = JSON.parse(newValue);\n this.filteredContent = this.dataOptions;\n }\n\n @Listen('inputSearch')\n updateOptionsContent(event: CustomEvent<any>) {\n this.searchTerm = event.detail;\n this.findData();\n }\n\n @Listen('internalSddsSelect')\n selectOptionHandler(event: CustomEvent<any>) {\n this.selectedOptionState = event.detail.value;\n this.selectedLabel = event.detail.label;\n this.selectedValue = event.detail.value;\n\n // Reset list when search is done and user have selected one option\n // To match with animation time for option list to fadeout first\n setTimeout(() => {\n this.filteredContent = this.dataOptions;\n }, 200);\n }\n\n findData() {\n const searchAsRegEx = new RegExp(this.searchTerm, 'gmi');\n this.filteredContent = this.dataOptions.filter((option) => {\n if (option.label) {\n const listItem = option.label.toLowerCase();\n const searchResultList = listItem.match(searchAsRegEx);\n if (searchResultList) {\n return searchResultList;\n }\n this.selectedOptionState = null;\n this.selectedLabel = 'no-result';\n this.selectedValue = 'no-result';\n }\n });\n }\n\n setOptionsContent() {\n const newList = this.filteredContent.map((obj) => (\n <sdds-dropdown-option\n tabindex=\"0\"\n value={obj.value}\n class={`${this.selectedOptionState === obj.value ? 'selected' : ''}`}\n >\n {obj.label}\n </sdds-dropdown-option>\n ));\n if (newList.length > 0) {\n return newList;\n }\n return (\n <sdds-dropdown-option tabindex=\"-1\" value=\"no-result\" class=\"sdds-option--no-result\">\n No result\n </sdds-dropdown-option>\n );\n }\n\n /* Use this method to reset the dropdown. Then it will go back to its initial state. */\n @Method() async resetOption() {\n await this.dropdownRef?.resetOption();\n }\n\n render() {\n return (\n <Host selected-value={this.selectedValue} selected-text={this.selectedLabel} class={`\n ${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}\n `}>\n <sdds-dropdown\n ref={(el) => (this.dropdownRef = el)}\n exportparts=\"dropdown-filter-disabled\"\n size={this.size}\n label={this.label}\n disabled={this.disabled}\n labelPosition={this.labelPosition}\n helper={this.helper}\n state={this.state}\n placeholder={this.placeholder}\n defaultOption={this.defaultOption}\n selectedOption={this.selectedOption}\n type=\"filter\"\n tabindex={this.disabled ? '-1' : null}\n >\n {this.setOptionsContent()}\n </sdds-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-dropdown-filter.entry.js","mappings":"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","names":[],"sources":["./src/components/dropdown/dropdown.scss?tag=sdds-dropdown-filter&encapsulation=shadow","./src/components/dropdown/dropdown-filter/dropdown-filter.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import './dropdown-core';\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 {\n color: var(--sdds-dropdown-label-outside);\n text-decoration: none;\n } \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-dropdown-disabled);\n border: none;\n\n &::placeholder {\n color: var(--sdds-dropdown-disabled);\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 { Component, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'sdds-dropdown-filter',\n shadow: true,\n styleUrl: './../dropdown.scss',\n})\nexport class DropdownFilter {\n @State() dataOptions = [];\n\n @State() filteredContent = [];\n\n @State() searchTerm = '';\n\n @State() selectedOptionState: any;\n\n @State() dropdownRef?: HTMLSddsDropdownElement;\n\n /** Set the variant of the dropdown. /\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n /* Placeholder text for dropdown with no selected item /\n @Prop() placeholder: string = '';\n\n /* Label for dropdown with no selected item /\n @Prop() label: string;\n\n /* Add the value of the option to set it as default /\n @Prop() defaultOption: string;\n\n /* Direction that the dropdown will open. Default is auto. /\n @Prop() openDirection: 'down' \| 'up' \| 'auto' = 'auto';\n\n /* Add the value of the option as string to set it as new selected value /\n @Prop() selectedOption: string;\n\n /* Add the value of the option to set it as default /\n @Prop() disabled: boolean = false;\n\n /* Controls the size of dropdown. 'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated /\n @Prop() size: 'sm' \| 'md' \| 'lg' \| 'small' \| 'medium' \| 'large' = 'lg';\n\n /* Set to true to make the width following the label text length /\n @Prop() inline: boolean = false;\n\n /* Position of label /\n @Prop() labelPosition: 'no-label' \| 'outside' = 'no-label';\n\n /* Support `error` state /\n @Prop() state: boolean = false;\n\n /* Add helper text in the bottom of dropdown /\n @Prop() helper: string = '';\n\n /* Data is an array of objects that contains label and value\n * `data = [{label:'Option 1', value:'opt-1'},{label:'Option 2', value:'opt-2'}]`\n /\n @Prop() data: string;\n\n @State() selectedLabel: string = 'no-selected';\n\n @State() selectedValue: string = 'no-selected';\n\n componentWillLoad() {\n this.parseData(this.data);\n\n if (this.defaultOption) {\n this.selectedOptionState = this.defaultOption;\n }\n }\n\n @Watch('data')\n parseData(newValue: string) {\n if (newValue) this.dataOptions = JSON.parse(newValue);\n this.filteredContent = this.dataOptions;\n }\n\n @Listen('internalSddsSearch')\n updateOptionsContent(event: CustomEvent<any>) {\n this.searchTerm = event.detail;\n this.findData();\n }\n\n @Listen('internalSddsSelect')\n selectOptionHandler(event: CustomEvent<any>) {\n this.selectedOptionState = event.detail.value;\n this.selectedLabel = event.detail.label;\n this.selectedValue = event.detail.value;\n\n // Reset list when search is done and user have selected one option\n // To match with animation time for option list to fadeout first\n setTimeout(() => {\n this.filteredContent = this.dataOptions;\n }, 200);\n }\n\n findData() {\n const searchAsRegEx = new RegExp(this.searchTerm, 'gmi');\n this.filteredContent = this.dataOptions.filter((option) => {\n if (option.label) {\n const listItem = option.label.toLowerCase();\n const searchResultList = listItem.match(searchAsRegEx);\n if (searchResultList) {\n return searchResultList;\n }\n this.selectedOptionState = null;\n this.selectedLabel = 'no-result';\n this.selectedValue = 'no-result';\n }\n });\n }\n\n setOptionsContent() {\n const newList = this.filteredContent.map((obj) => (\n <sdds-dropdown-option\n tabindex=\"0\"\n value={obj.value}\n class={`${this.selectedOptionState === obj.value ? 'selected' : ''}`}\n >\n {obj.label}\n </sdds-dropdown-option>\n ));\n if (newList.length > 0) {\n return newList;\n }\n return (\n <sdds-dropdown-option tabindex=\"-1\" value=\"no-result\" class=\"sdds-option--no-result\">\n No result\n </sdds-dropdown-option>\n );\n }\n\n /* Use this method to reset the dropdown. Then it will go back to its initial state. */\n @Method() async resetOption() {\n await this.dropdownRef?.resetOption();\n }\n\n render() {\n return (\n <Host\n selected-value={this.selectedValue}\n selected-text={this.selectedLabel}\n class={`\n ${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}\n `}\n >\n <sdds-dropdown\n ref={(el) => (this.dropdownRef = el)}\n exportparts=\"dropdown-filter-disabled\"\n size={this.size}\n label={this.label}\n disabled={this.disabled}\n labelPosition={this.labelPosition}\n helper={this.helper}\n state={this.state}\n placeholder={this.placeholder}\n defaultOption={this.defaultOption}\n selectedOption={this.selectedOption}\n type=\"filter\"\n tabindex={this.disabled ? '-1' : null}\n openDirection={this.openDirection}\n >\n {this.setOptionsContent()}\n </sdds-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}