npm - @scania/tegel - Versions diffs - 0.0.51 → 0.0.61 - Mend

@scania/tegel 0.0.51 → 0.0.61

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

package/dist/components/dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dropdown.js","mappings":"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","names":[],"sources":["./src/components/dropdown/dropdown.scss?tag=sdds-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.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 {\n Component,\n h,\n Prop,\n State,\n Element,\n Listen,\n Host,\n Event,\n EventEmitter,\n Watch,\n Method,\n} from '@stencil/core';\n\n@Component({\n tag: 'sdds-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: true,\n})\nexport class Dropdown {\n textInput?: HTMLInputElement;\n\n /** Set the variant of the dropdown. /\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n /* Placeholder text for dropdown with no selectedLabel item /\n @Prop() placeholder: string;\n\n /* Add the value of the option as string 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 /* Set to true for disabled states /\n @Prop() disabled: boolean = false;\n\n /* `Controls type of dropdown. /\n @Prop() type: 'default' \| 'multiselect' \| 'filter' = 'default';\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 /* Controls position of label /\n @Prop() labelPosition: 'no-label' \| 'inside' \| 'outside' = 'no-label';\n\n /* Label text for label inside & outside /\n @Prop() label: string;\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 /* Direction that the dropdown will open. Default is auto. */\n @Prop() openDirection: 'down' \| 'up' \| 'auto' = 'auto';\n\n @State() optionValues: Array<any> = [];\n\n @State() optionLabels: Array<any> = [];\n\n @State() open: boolean = false;\n\n @State() node: HTMLElement;\n\n @State() selectedLabel: string = '';\n\n @State() selectedValue: string = '';\n\n @State() selectedValuesArray: Array<any> = [];\n\n @State() selectedLabelsArray: Array<any> = [];\n\n @State() dropdownUniqueClass: string = '';\n\n @State() openUpwards: boolean = false;\n\n @State() dropdownMenuHeight: number = 0;\n\n @State() dropdownMenuSelector: HTMLElement;\n\n @State() listItemIndex: any = -1;\n\n @State() listItemArray: any;\n\n @State() listItemObject: any;\n\n @Element() host: HTMLElement;\n\n componentWillLoad() {\n // If default option is set, update the default selectedLabel value\n // this.host.children is a HTMLCollection type, cannot use forEach\n this.listItemObject = this.host.children;\n this.listItemArray = Array.from(this.listItemObject);\n this.listItemArray.map((listItem) => {\n this.optionValues.push(listItem.value);\n this.optionLabels.push(listItem.innerText.trim());\n });\n this.setOptionFromOutside(this.defaultOption);\n\n if (this.size === 'small') {\n this.size = 'sm';\n console.warn('size=\"small\" is deprecated, use size=\"sm\" instead');\n }\n if (this.size === 'medium') {\n this.size = 'md';\n console.warn('size=\"medium\" is deprecated, use size=\"md\" instead');\n }\n if (this.size === 'large') {\n this.size = 'lg';\n console.warn('size=\"large\" is deprecated, use size=\"lg\" instead');\n }\n }\n\n setOptionFromOutside(optionValue) {\n if (optionValue) {\n this.deselectAll();\n // TODO\n // eslint-disable-next-line no-param-reassign\n optionValue = optionValue.split(',');\n for (let i = 0; i < this.host.children.length; i++) {\n // Todo - specify type\n const el: any = this.host.children[i];\n if (optionValue.includes(el.value.trim())) {\n this.selectedLabelsArray = [...this.selectedLabelsArray, el.textContent.trim()];\n this.selectedValuesArray = [...this.selectedValuesArray, el.value];\n this.selectedLabel = el.textContent;\n this.selectedValue = el.value;\n el.setAttribute('selectedLabel', 'true');\n el.setAttribute('selected', 'true');\n } else {\n el.setAttribute('selectedLabel', 'false');\n el.setAttribute('selected', 'false');\n }\n }\n }\n }\n\n @Watch('selectedOption')\n changeSelectedOption() {\n if (this.selectedValuesArray.includes(this.selectedOption)) {\n this.resetOption();\n }\n this.setOptionFromOutside(this.selectedOption);\n this.host.setAttribute('selected-option', '');\n }\n\n @Listen('click', { target: 'document' })\n handleDocClick(ev) {\n // To stop bubble click\n ev.stopPropagation();\n const target = ev ? ev.composedPath()[0] : window.event.target[0];\n if (this.node !== undefined && this.node.contains(target)) {\n if (typeof this.textInput !== 'undefined' \|\| this.textInput === null) {\n this.textInput.focus();\n }\n } else {\n this.tabbingLabelReset();\n this.open = false;\n }\n }\n\n @Listen('keydown')\n keyListener(ev: KeyboardEvent) {\n if (!this.disabled) {\n switch (ev.key) {\n case 'ArrowDown':\n if (this.open) {\n ev.preventDefault();\n if (this.listItemIndex < this.listItemArray.length - 1) {\n this.listItemIndex++;\n } else {\n this.listItemIndex = 0;\n }\n (this.listItemObject[this.listItemIndex] as HTMLElement).focus();\n }\n break;\n case 'ArrowUp':\n if (this.open) {\n ev.preventDefault();\n if (this.listItemIndex > 0) {\n this.listItemIndex--;\n } else {\n this.listItemIndex = this.listItemArray.length - 1;\n }\n (this.listItemObject[this.listItemIndex] as HTMLElement).focus();\n }\n break;\n\n case 'Tab':\n this.open = false;\n break;\n\n case 'Escape':\n this.open = false;\n this.node.focus();\n break;\n\n default:\n break;\n }\n }\n }\n\n handleClick() {\n this.open = this.open === false;\n if (this.openDirection === 'auto') {\n this.dropdownMenuHeight = this.dropdownMenuSelector.offsetHeight;\n const distanceToBottom = this.host.getBoundingClientRect().top;\n const viewportHeight = window.innerHeight;\n this.openUpwards = distanceToBottom + this.dropdownMenuHeight + 57 > viewportHeight;\n // If summary of dropdown menu height and its distance to the bottom is more than viewport height, open menu upwards\n // Additional 57px is added as compensation for dropdown element own input/button height\n // It is added on handleClick due to possible dynamic injection of data when component is already rendered\n } else {\n this.openUpwards = this.openDirection === 'up';\n }\n }\n\n tabbingLabelReset() {\n if (typeof this.textInput !== 'undefined' \|\| this.textInput === null) {\n if (!this.selectedLabel && this.selectedLabel.length <= 0) {\n this.textInput.value = '';\n this.inputSearch.emit('');\n }\n if (this.selectedLabel !== this.textInput.value) {\n this.textInput.value = this.selectedLabel;\n }\n }\n }\n\n @Listen('internalSddsSelect')\n selectOptionHandler(event: CustomEvent<any>) {\n this.open = this.type === 'multiselect';\n if (this.type !== 'multiselect') {\n this.selectedLabel = event.detail.label;\n this.selectedValue = event.detail.value;\n this.tabbingLabelReset();\n } else {\n if (this.selectedValuesArray.includes(event.detail.value)) {\n const itemIndex = this.selectedValuesArray.indexOf(event.detail.value);\n this.selectedValuesArray = this.selectedValuesArray.filter(\n (_value, index) => index !== itemIndex,\n );\n this.selectedLabelsArray = this.selectedLabelsArray.filter(\n (_value, index) => index !== itemIndex,\n );\n } else {\n this.selectedValuesArray = [...this.selectedValuesArray, event.detail.value];\n this.selectedLabelsArray = [...this.selectedLabelsArray, event.detail.label.trim()];\n }\n }\n }\n\n @Event({\n eventName: 'inputSearch',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n inputSearch: EventEmitter<any>;\n\n handleSearch(ev) {\n const searchTerm = ev.target.value;\n this.inputSearch.emit(searchTerm);\n this.open = true;\n }\n\n deselectAll() {\n this.selectedLabel = '';\n this.selectedValue = '';\n this.selectedLabelsArray = [];\n this.selectedValuesArray = [];\n this.listItemArray = this.listItemArray.map((optionItem) => ({\n ...optionItem,\n selected: false,\n }));\n }\n\n @Method() async resetOption() {\n this.deselectAll();\n this.open = false;\n\n if (this.defaultOption) {\n this.setOptionFromOutside(this.defaultOption);\n }\n }\n\n render() {\n return (\n <Host\n class={`\n ${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}\n ${this.open && !this.disabled ? 'sdds-dropdown--open' : ''}\n ${this.type === 'multiselect' ? 'sdds-dropdown-multiselect' : ''}\n ${this.inline ? 'sdds-dropdown-inline' : ''}\n ${\n this.selectedLabel.length > 0 \|\| this.selectedLabel === ''\n ? 'sdds-dropdown--selected'\n : ''\n }\n ${this.state ? 'sdds-dropdown--error' : ''}\n ${this.openUpwards ? 'sdds-dropdown--open-upwards' : ''}\n ${\n this.labelPosition === 'inside' && this.selectedLabelsArray.length > 0\n ? 'sdds-dropdown--label-inside-position'\n : ''\n }\n `}\n selected-value={this.selectedValue}\n selected-text={this.selectedLabel}\n multi-selected-values={JSON.stringify(this.selectedValuesArray)}\n multi-selected-labels={JSON.stringify(this.selectedLabelsArray)}\n >\n <span class={`sdds-dropdown sdds-dropdown-${this.size}`}>\n {this.labelPosition === 'outside' && this.label.length > 0 ? (\n <span class=\"sdds-dropdown-label-outside\">{this.label}</span>\n ) : (\n ''\n )}\n <button\n part={this.disabled ? 'dropdown-filter-disabled' : ''}\n disabled={this.disabled}\n tabindex={this.disabled ? '-1' : null}\n class={`sdds-dropdown-toggle ${this.selectedValue === 'filter' ? 'is-filter' : ''} ${\n this.selectedValue !== '' \|\| this.selectedLabelsArray.length > 0\n ? 'sdds-dropdown-toggle--selected'\n : ''\n }\n ${\n this.labelPosition === 'inside' && this.selectedValue !== '' && this.size !== 'sm'\n ? `sdds-dropdown-toggle-label-inside-${this.size}`\n : `sdds-dropdown-toggle-${this.size}`\n }`}\n type=\"button\"\n onClick={() => this.handleClick()}\n ref={(node) => (this.node = node)}\n >\n <span class=\"sdds-dropdown-label\">\n {this.type === 'filter' ? (\n <input\n part={this.disabled ? 'dropdown-filter-disabled' : ''}\n disabled={this.disabled}\n tabindex=\"-1\"\n ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n class=\"sdds-dropdown-filter\"\n type=\"text\"\n placeholder={this.placeholder}\n value={this.selectedLabel}\n onInput={(event) => this.handleSearch(event)}\n autoComplete=\"off\"\n />\n ) : (\n <span\n class={{\n 'sdds-dropdown-label-container': true,\n 'sdds-dropdown-label-container--label-inside':\n this.labelPosition === 'inside' &&\n this.size !== 'sm' &&\n (this.selectedLabel.length > 0 \|\| this.selectedLabelsArray.length > 0),\n }}\n >\n {this.size !== 'sm' &&\n (this.selectedLabel.length > 0 \|\| this.selectedLabelsArray.length > 0) &&\n this.labelPosition === 'inside' &&\n this.label.length > 0 && (\n <span class=\"sdds-dropdown-label-inside\">{this.label}</span>\n )}\n <span\n class={`sdds-dropdown-label-main ${\n (this.selectedLabel.length === 0 \|\|\n (this.labelPosition === 'inside' && this.label.length < 0)) &&\n 'sdds-dropdown-placeholder'\n }`}\n >\n {this.selectedLabel.length > 0 &&\n this.type !== 'multiselect' &&\n this.selectedLabel}\n\n {this.type === 'multiselect' && (\n <span class=\"sdds-dropdown-multiselect-result\">\n {this.labelPosition !== 'inside' &&\n this.selectedLabelsArray.toString().length < 1 &&\n this.placeholder}\n {this.selectedLabelsArray.toString().length > 0 &&\n this.selectedLabelsArray.toString().split(',').join(', ')}\n </span>\n )}\n {!this.selectedLabel &&\n this.labelPosition === 'inside' &&\n this.size !== 'sm' &&\n this.label}\n\n {!this.selectedLabel &&\n this.type !== 'multiselect' &&\n this.labelPosition !== 'inside' &&\n this.placeholder}\n\n {!this.selectedLabel &&\n this.size === 'sm' &&\n this.labelPosition === 'inside' &&\n this.placeholder}\n </span>\n </span>\n )}\n </span>\n <svg\n class=\"sdds-dropdown-arrow\"\n width=\"12\"\n height=\"7\"\n viewBox=\"0 0 12 7\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1 1L6 6L11 1\"\n stroke=\"currentColor\"\n stroke-width=\"1.25\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <span\n class=\"sdds-dropdown-menu\"\n // Need to have reference in order to calc height and distance from bottom\n ref={(dropdownMenu) => (this.dropdownMenuSelector = dropdownMenu)}\n >\n <slot />\n </span>\n </span>\n <p class=\"sdds-dropdown-helper\">\n <svg\n class=\"sdds-dropdown-error-icon\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 32 32\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M16 4C9.37 4 3.996 9.374 3.996 16.004S9.371 28.007 16 28.007c6.63 0 12.004-5.374 12.004-12.003C28.004 9.374 22.629 4 16 4ZM2 16.004c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M14.803 14.47V10h2.376v4.47l-.352 4.295h-1.672l-.352-4.295Zm-.053 5.632h2.5v2.394h-2.5v-2.394Z\"\n fill=\"currentColor\"\n />\n </svg>\n <span>{this.helper}</span>\n </p>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"dropdown.js","mappings":"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","names":[],"sources":["./src/components/dropdown/dropdown.scss?tag=sdds-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.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 {\n Component,\n h,\n Prop,\n State,\n Element,\n Listen,\n Host,\n Event,\n EventEmitter,\n Watch,\n Method,\n} from '@stencil/core';\n\n@Component({\n tag: 'sdds-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: true,\n})\nexport class Dropdown {\n textInput?: HTMLInputElement;\n\n /** Set the variant of the dropdown. /\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n /* Placeholder text for dropdown with no selectedLabel item /\n @Prop() placeholder: string;\n\n /* Add the value of the option as string 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 /* Set to true for disabled states /\n @Prop() disabled: boolean = false;\n\n /* `Controls type of dropdown. /\n @Prop() type: 'default' \| 'multiselect' \| 'filter' = 'default';\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 /* Controls position of label /\n @Prop() labelPosition: 'no-label' \| 'inside' \| 'outside' = 'no-label';\n\n /* Label text for label inside & outside /\n @Prop() label: string;\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 /* Direction that the dropdown will open. Default is auto. /\n @Prop() openDirection: 'down' \| 'up' \| 'auto' = 'auto';\n\n @State() optionValues: Array<any> = [];\n\n @State() optionLabels: Array<any> = [];\n\n @State() open: boolean = false;\n\n @State() node: HTMLElement;\n\n @State() selectedLabel: string = '';\n\n @State() selectedValue: string = '';\n\n @State() selectedValuesArray: Array<any> = [];\n\n @State() selectedLabelsArray: Array<any> = [];\n\n @State() dropdownUniqueClass: string = '';\n\n @State() openUpwards: boolean = false;\n\n @State() dropdownMenuHeight: number = 0;\n\n @State() dropdownMenuSelector: HTMLElement;\n\n @State() listItemIndex: any = -1;\n\n @State() listItemArray: any;\n\n @State() listItemObject: any;\n\n @Element() host: HTMLElement;\n\n componentWillLoad() {\n // If default option is set, update the default selectedLabel value\n // this.host.children is a HTMLCollection type, cannot use forEach\n this.listItemObject = this.host.children;\n this.listItemArray = Array.from(this.listItemObject);\n this.listItemArray.map((listItem) => {\n this.optionValues.push(listItem.value);\n this.optionLabels.push(listItem.innerText.trim());\n });\n this.setOptionFromOutside(this.defaultOption);\n\n if (this.size === 'small') {\n this.size = 'sm';\n console.warn('size=\"small\" is deprecated, use size=\"sm\" instead');\n }\n if (this.size === 'medium') {\n this.size = 'md';\n console.warn('size=\"medium\" is deprecated, use size=\"md\" instead');\n }\n if (this.size === 'large') {\n this.size = 'lg';\n console.warn('size=\"large\" is deprecated, use size=\"lg\" instead');\n }\n }\n\n setOptionFromOutside(optionValue) {\n if (optionValue) {\n this.deselectAll();\n // TODO\n // eslint-disable-next-line no-param-reassign\n optionValue = optionValue.split(',');\n for (let i = 0; i < this.host.children.length; i++) {\n // Todo - specify type\n const el: any = this.host.children[i];\n if (optionValue.includes(el.value.trim())) {\n this.selectedLabelsArray = [...this.selectedLabelsArray, el.textContent.trim()];\n this.selectedValuesArray = [...this.selectedValuesArray, el.value];\n this.selectedLabel = el.textContent;\n this.selectedValue = el.value;\n el.setAttribute('selectedLabel', 'true');\n el.setAttribute('selected', 'true');\n } else {\n el.setAttribute('selectedLabel', 'false');\n el.setAttribute('selected', 'false');\n }\n }\n }\n }\n\n @Watch('selectedOption')\n changeSelectedOption() {\n if (this.selectedValuesArray.includes(this.selectedOption)) {\n this.resetOption();\n }\n this.setOptionFromOutside(this.selectedOption);\n this.host.setAttribute('selected-option', '');\n }\n\n @Listen('click', { target: 'document' })\n handleDocClick(ev) {\n // To stop bubble click\n ev.stopPropagation();\n const target = ev ? ev.composedPath()[0] : window.event.target[0];\n if (this.node !== undefined && this.node.contains(target)) {\n if (typeof this.textInput !== 'undefined' \|\| this.textInput === null) {\n this.textInput.focus();\n }\n } else {\n this.tabbingLabelReset();\n this.open = false;\n }\n }\n\n @Listen('keydown')\n keyListener(ev: KeyboardEvent) {\n if (!this.disabled) {\n switch (ev.key) {\n case 'ArrowDown':\n if (this.open) {\n ev.preventDefault();\n if (this.listItemIndex < this.listItemArray.length - 1) {\n this.listItemIndex++;\n } else {\n this.listItemIndex = 0;\n }\n (this.listItemObject[this.listItemIndex] as HTMLElement).focus();\n }\n break;\n case 'ArrowUp':\n if (this.open) {\n ev.preventDefault();\n if (this.listItemIndex > 0) {\n this.listItemIndex--;\n } else {\n this.listItemIndex = this.listItemArray.length - 1;\n }\n (this.listItemObject[this.listItemIndex] as HTMLElement).focus();\n }\n break;\n\n case 'Tab':\n this.open = false;\n break;\n\n case 'Escape':\n this.open = false;\n this.node.focus();\n break;\n\n default:\n break;\n }\n }\n }\n\n handleClick() {\n this.open = this.open === false;\n if (this.openDirection === 'auto') {\n this.dropdownMenuHeight = this.dropdownMenuSelector.offsetHeight;\n const distanceToBottom = this.host.getBoundingClientRect().top;\n const viewportHeight = window.innerHeight;\n this.openUpwards = distanceToBottom + this.dropdownMenuHeight + 57 > viewportHeight;\n // If summary of dropdown menu height and its distance to the bottom is more than viewport height, open menu upwards\n // Additional 57px is added as compensation for dropdown element own input/button height\n // It is added on handleClick due to possible dynamic injection of data when component is already rendered\n } else {\n this.openUpwards = this.openDirection === 'up';\n }\n }\n\n tabbingLabelReset() {\n if (typeof this.textInput !== 'undefined' \|\| this.textInput === null) {\n if (!this.selectedLabel && this.selectedLabel.length <= 0) {\n this.textInput.value = '';\n this.internalSddsSearch.emit('');\n }\n if (this.selectedLabel !== this.textInput.value) {\n this.textInput.value = this.selectedLabel;\n }\n }\n }\n\n @Listen('internalSddsSelect')\n selectOptionHandler(event: CustomEvent<any>) {\n this.open = this.type === 'multiselect';\n if (this.type !== 'multiselect') {\n this.selectedLabel = event.detail.label;\n this.selectedValue = event.detail.value;\n this.tabbingLabelReset();\n } else {\n if (this.selectedValuesArray.includes(event.detail.value)) {\n const itemIndex = this.selectedValuesArray.indexOf(event.detail.value);\n this.selectedValuesArray = this.selectedValuesArray.filter(\n (_value, index) => index !== itemIndex,\n );\n this.selectedLabelsArray = this.selectedLabelsArray.filter(\n (_value, index) => index !== itemIndex,\n );\n } else {\n this.selectedValuesArray = [...this.selectedValuesArray, event.detail.value];\n this.selectedLabelsArray = [...this.selectedLabelsArray, event.detail.label.trim()];\n }\n }\n }\n\n /* @internal Search event that is emitted to the sdds-dropdown-filter */\n @Event({\n eventName: 'internalSddsSearch',\n composed: true,\n cancelable: false,\n bubbles: true,\n })\n internalSddsSearch: EventEmitter<any>;\n\n handleSearch(ev) {\n const searchTerm = ev.target.value;\n this.internalSddsSearch.emit(searchTerm);\n this.open = true;\n }\n\n deselectAll() {\n this.selectedLabel = '';\n this.selectedValue = '';\n this.selectedLabelsArray = [];\n this.selectedValuesArray = [];\n this.listItemArray = this.listItemArray.map((optionItem) => ({\n ...optionItem,\n selected: false,\n }));\n }\n\n @Method() async resetOption() {\n this.deselectAll();\n this.open = false;\n\n if (this.defaultOption) {\n this.setOptionFromOutside(this.defaultOption);\n }\n }\n\n render() {\n return (\n <Host\n class={`\n ${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}\n ${this.open && !this.disabled ? 'sdds-dropdown--open' : ''}\n ${this.type === 'multiselect' ? 'sdds-dropdown-multiselect' : ''}\n ${this.inline ? 'sdds-dropdown-inline' : ''}\n ${\n this.selectedLabel.length > 0 \|\| this.selectedLabel === ''\n ? 'sdds-dropdown--selected'\n : ''\n }\n ${this.state ? 'sdds-dropdown--error' : ''}\n ${this.openUpwards ? 'sdds-dropdown--open-upwards' : ''}\n ${\n this.labelPosition === 'inside' && this.selectedLabelsArray.length > 0\n ? 'sdds-dropdown--label-inside-position'\n : ''\n }\n `}\n selected-value={this.selectedValue}\n selected-text={this.selectedLabel}\n multi-selected-values={JSON.stringify(this.selectedValuesArray)}\n multi-selected-labels={JSON.stringify(this.selectedLabelsArray)}\n >\n <span class={`sdds-dropdown sdds-dropdown-${this.size}`}>\n {this.labelPosition === 'outside' && this.label.length > 0 ? (\n <span class=\"sdds-dropdown-label-outside\">{this.label}</span>\n ) : (\n ''\n )}\n <button\n part={this.disabled ? 'dropdown-filter-disabled' : ''}\n disabled={this.disabled}\n tabindex={this.disabled ? '-1' : null}\n class={`sdds-dropdown-toggle ${this.selectedValue === 'filter' ? 'is-filter' : ''} ${\n this.selectedValue !== '' \|\| this.selectedLabelsArray.length > 0\n ? 'sdds-dropdown-toggle--selected'\n : ''\n }\n ${\n this.labelPosition === 'inside' && this.selectedValue !== '' && this.size !== 'sm'\n ? `sdds-dropdown-toggle-label-inside-${this.size}`\n : `sdds-dropdown-toggle-${this.size}`\n }`}\n type=\"button\"\n onClick={() => this.handleClick()}\n ref={(node) => (this.node = node)}\n >\n <span class=\"sdds-dropdown-label\">\n {this.type === 'filter' ? (\n <input\n part={this.disabled ? 'dropdown-filter-disabled' : ''}\n disabled={this.disabled}\n tabindex=\"-1\"\n ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n class=\"sdds-dropdown-filter\"\n type=\"text\"\n placeholder={this.placeholder}\n value={this.selectedLabel}\n onInput={(event) => this.handleSearch(event)}\n autoComplete=\"off\"\n />\n ) : (\n <span\n class={{\n 'sdds-dropdown-label-container': true,\n 'sdds-dropdown-label-container--label-inside':\n this.labelPosition === 'inside' &&\n this.size !== 'sm' &&\n (this.selectedLabel.length > 0 \|\| this.selectedLabelsArray.length > 0),\n }}\n >\n {this.size !== 'sm' &&\n (this.selectedLabel.length > 0 \|\| this.selectedLabelsArray.length > 0) &&\n this.labelPosition === 'inside' &&\n this.label.length > 0 && (\n <span class=\"sdds-dropdown-label-inside\">{this.label}</span>\n )}\n <span\n class={`sdds-dropdown-label-main ${\n (this.selectedLabel.length === 0 \|\|\n (this.labelPosition === 'inside' && this.label.length < 0)) &&\n 'sdds-dropdown-placeholder'\n }`}\n >\n {this.selectedLabel.length > 0 &&\n this.type !== 'multiselect' &&\n this.selectedLabel}\n\n {this.type === 'multiselect' && (\n <span class=\"sdds-dropdown-multiselect-result\">\n {this.labelPosition !== 'inside' &&\n this.selectedLabelsArray.toString().length < 1 &&\n this.placeholder}\n {this.selectedLabelsArray.toString().length > 0 &&\n this.selectedLabelsArray.toString().split(',').join(', ')}\n </span>\n )}\n {!this.selectedLabel &&\n this.labelPosition === 'inside' &&\n this.size !== 'sm' &&\n this.label}\n\n {!this.selectedLabel &&\n this.type !== 'multiselect' &&\n this.labelPosition !== 'inside' &&\n this.placeholder}\n\n {!this.selectedLabel &&\n this.size === 'sm' &&\n this.labelPosition === 'inside' &&\n this.placeholder}\n </span>\n </span>\n )}\n </span>\n <svg\n class=\"sdds-dropdown-arrow\"\n width=\"12\"\n height=\"7\"\n viewBox=\"0 0 12 7\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1 1L6 6L11 1\"\n stroke=\"currentColor\"\n stroke-width=\"1.25\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <span\n class=\"sdds-dropdown-menu\"\n // Need to have reference in order to calc height and distance from bottom\n ref={(dropdownMenu) => (this.dropdownMenuSelector = dropdownMenu)}\n >\n <slot />\n </span>\n </span>\n <p class=\"sdds-dropdown-helper\">\n <svg\n class=\"sdds-dropdown-error-icon\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 32 32\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M16 4C9.37 4 3.996 9.374 3.996 16.004S9.371 28.007 16 28.007c6.63 0 12.004-5.374 12.004-12.003C28.004 9.374 22.629 4 16 4ZM2 16.004c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M14.803 14.47V10h2.376v4.47l-.352 4.295h-1.672l-.352-4.295Zm-.053 5.632h2.5v2.394h-2.5v-2.394Z\"\n fill=\"currentColor\"\n />\n </svg>\n <span>{this.helper}</span>\n </p>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/header-dropdown-list-item.js ADDED Viewed

@@ -0,0 +1,41 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+const headerDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:var(--sdds-header-list-item-md-height);width:100%}:host .component{height:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border:none;display:flex;align-items:center;height:100%;padding:0 24px;width:100%;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);background-color:var(--sdds-header-nav-item-dropdown-opened-background);color:var(--sdds-header-nav-item-dropdown-opened-color)}:host .component ::slotted(a:hover){background-color:var(--sdds-nav-item-background-hover);cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .component-selected{background-color:var(--sdds-nav-item-background-selected);padding-right:4px;border-left-width:4px;border-left-style:solid;border-left-color:var(--sdds-nav-item-border-color-active)}:host .component-selected ::slotted(a),:host .component-selected ::slotted(button){background-color:var(--sdds-nav-item-background-selected)}:host(:not(:last-child)){border-bottom:1px solid var(--sdds-nav-dropdown-item-border-color)}:host([type=lg]){height:var(--sdds-header-height)}:host([type=lg]) ::slotted(a),:host([type=lg]) ::slotted(button){padding:0 16px;color:var(--sdds-header-app-launcher-item-color)}";
+const HeaderDropdownListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.selected = false;
+    this.type = 'md';
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        'component': true,
+        'component-selected': this.selected,
+      } }, h("slot", null))));
+  }
+  get host() { return this; }
+  static get style() { return headerDropdownListItemCss; }
+}, [1, "sdds-header-dropdown-list-item", {
+    "selected": [4],
+    "type": [513]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-header-dropdown-list-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-header-dropdown-list-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HeaderDropdownListItem);
+      }
+      break;
+  } });
+}
+export { HeaderDropdownListItem as H, defineCustomElement as d };
+//# sourceMappingURL=header-dropdown-list-item.js.map

package/dist/components/header-dropdown-list-item.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"header-dropdown-list-item.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,ozCAAozC;;MCOz0C,sBAAsB;;;;;oBAIL,KAAK;gBAGY,IAAI;;EAEjD,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;QACjB,oBAAoB,EAAE,IAAI,CAAC,QAAQ;OACpC,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-dropdown-list-item/header-dropdown-list-item.scss?tag=sdds-header-dropdown-list-item&encapsulation=shadow","./src/components/header/webcomponent/header-dropdown-list-item/header-dropdown-list-item.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n\n:host {\n display: block;\n box-sizing: border-box;\n height: var(--sdds-header-list-item-md-height);\n width: 100%;\n\n .component {\n height: 100%;\n\n ::slotted(a),\n ::slotted(button) {\n all: unset;\n box-sizing: border-box;\n border: none;\n display: flex;\n align-items: center;\n height: 100%;\n padding: 0 24px;\n width: 100%;\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n background-color: var(--sdds-header-nav-item-dropdown-opened-background);\n color: var(--sdds-header-nav-item-dropdown-opened-color);\n }\n\n ::slotted(a:hover) {\n background-color: var(--sdds-nav-item-background-hover);\n cursor: pointer;\n }\n\n ::slotted(a:focus-visible) {\n @include sdds-focus-state;\n }\n\n &-selected {\n background-color: var(--sdds-nav-item-background-selected);\n padding-right: 4px;\n border-left-width: 4px;\n border-left-style: solid;\n border-left-color: var(--sdds-nav-item-border-color-active);\n\n ::slotted(a),\n ::slotted(button) {\n background-color: var(--sdds-nav-item-background-selected);\n }\n }\n }\n}\n\n:host(:not(:last-child)) {\n border-bottom: 1px solid var(--sdds-nav-dropdown-item-border-color);\n}\n\n:host([type='lg']) {\n height: var(--sdds-header-height);\n\n ::slotted(a),\n ::slotted(button) {\n padding: 0 16px;\n color: var(--sdds-header-app-launcher-item-color);\n }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-header-dropdown-list-item',\n styleUrl: 'header-dropdown-list-item.scss',\n shadow: true,\n})\nexport class HeaderDropdownListItem {\n @Element() host: HTMLElement;\n\n /** If the link should appear selected. */\n @Prop() selected: boolean = false;\n\n /** The type of the list. */\n @Prop({ reflect: true }) type: 'md' | 'lg' = 'md';\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'component': true,\n 'component-selected': this.selected,\n }}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/header-dropdown-list.js ADDED Viewed

@@ -0,0 +1,101 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getPreviousNestedChildOfSiblingsMatching, a as isHeadingElement } from './utils.js';
+const headerDropdownListCss = ":host{display:block;width:190px;padding:0;margin:0;list-style:none;border-radius:none;background-color:var(--sdds-header-app-launcher-menu-bg)}@media all and (max-width: 384px){:host{width:100vw}}:host([type=lg]){width:320px}";
+const HeaderDropdownList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    // A Map to store the slots and their associated slotchange listeners.
+    this.slotListeners = new Map();
+    this.type = 'md';
+    this.headingElement = undefined;
+  }
+  componentWillLoad() {
+    const { children } = this.host;
+    // Set the type prop for each child, if they have such a property
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if ('type' in child) {
+        child.type = this.type;
+      }
+    }
+    let listRoot = this.host;
+    if (this.host.parentElement.tagName.toLowerCase() === 'sdds-header-launcher-list') {
+      listRoot = this.host.parentElement;
+    }
+    const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, isHeadingElement);
+    if (headingEl) {
+      this.headingElement = headingEl;
+    }
+    else {
+      console.warn('Heading element for list not found');
+    }
+  }
+  componentDidLoad() {
+    this.host.shadowRoot.querySelectorAll('slot').forEach((slot) => {
+      // Add the slotchange event listener.
+      const onSlotChange = (e) => {
+        this.processAssignedElements(e.target);
+      };
+      slot.addEventListener('slotchange', onSlotChange);
+      onSlotChange({ target: slot });
+      // Store the slot and its listener in the Map.
+      this.slotListeners.set(slot, onSlotChange);
+    });
+  }
+  processAssignedElements(slot) {
+    const nodes = slot.assignedElements();
+    nodes.forEach((node) => {
+      // Add a listitem role to the assigned element if needed.
+      if (node.tagName.toLowerCase() !== 'li' &&
+        node.tagName.toLowerCase() !== 'slot' &&
+        node.getAttribute('role') !== 'listitem') {
+        node.setAttribute('role', 'listitem');
+      }
+      // If the assigned element is a slot, process its assigned elements recursively.
+      if (node.tagName.toLowerCase() === 'slot') {
+        this.processAssignedElements(node);
+      }
+    });
+  }
+  disconnectedCallback() {
+    this.slotListeners.forEach((listener, slot) => {
+      // Remove the slotchange event listener and delete the entry from the Map.
+      slot.removeEventListener('slotchange', listener);
+      this.slotListeners.delete(slot);
+    });
+  }
+  render() {
+    var _a;
+    const attributes = {
+      'role': 'list',
+      'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
+    };
+    return (h(Host, Object.assign({}, attributes), h("slot", null)));
+  }
+  get host() { return this; }
+  static get style() { return headerDropdownListCss; }
+}, [1, "sdds-header-dropdown-list", {
+    "type": [513],
+    "headingElement": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-header-dropdown-list"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-header-dropdown-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HeaderDropdownList);
+      }
+      break;
+  } });
+}
+export { HeaderDropdownList as H, defineCustomElement as d };
+//# sourceMappingURL=header-dropdown-list.js.map

package/dist/components/header-dropdown-list.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"header-dropdown-list.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,mOAAmO;;MCWpP,kBAAkB;;;;;;IAIrB,kBAAa,GAAwC,IAAI,GAAG,EAAE,CAAC;gBAE1B,IAAI;;;EAIjD,iBAAiB;IACf,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC;;IAG/B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;MACxC,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAQ,CAAC;MAEjC,IAAI,MAAM,IAAI,KAAK,EAAE;QACnB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;OACxB;KACF;IAED,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;IACzB,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,2BAA2B,EAAE;MACjF,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;KACpC;IAED,MAAM,SAAS,GAAG,wCAAwC,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;IAEvF,IAAI,SAAS,EAAE;MACb,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;KACjC;SAAM;MACL,OAAO,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;KACpD;GACF;EAED,gBAAgB;IACd,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,IAAqB;;MAE1E,MAAM,YAAY,GAAkB,CAAC,CAAQ;QAC3C,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,MAAyB,CAAC,CAAC;OAC3D,CAAC;MAEF,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;MAElD,YAAY,CAAC,EAAE,MAAM,EAAE,IAAI,EAAsB,CAAC,CAAC;;MAGnD,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;KAC5C,CAAC,CAAC;GACJ;EAED,uBAAuB,CAAC,IAAqB;IAC3C,MAAM,KAAK,GAAc,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACjD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAa;;MAE1B,IACE,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,IAAI;QACnC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,MAAM;QACrC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,UAAU,EACxC;QACA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;OACvC;;MAGD,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,MAAM,EAAE;QACzC,IAAI,CAAC,uBAAuB,CAAC,IAAuB,CAAC,CAAC;OACvD;KACF,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,QAAuB,EAAE,IAAqB;;MAExE,IAAI,CAAC,mBAAmB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;MACjD,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;KACjC,CAAC,CAAC;GACJ;EAED,MAAM;;IACJ,MAAM,UAAU,GAAG;MACjB,MAAM,EAAE,MAAM;MACd,iBAAiB,EAAE,MAAA,IAAI,CAAC,cAAc,0CAAE,EAAE;KAC3C,CAAC;IAEF,QACE,EAAC,IAAI,oBAAK,UAAU,GAClB,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-dropdown-list/header-dropdown-list.scss?tag=sdds-header-dropdown-list&encapsulation=shadow","./src/components/header/webcomponent/header-dropdown-list/header-dropdown-list.tsx"],"sourcesContent":["@import '../../../../global/_variables.scss';\n\n:host {\n display: block;\n width: 190px;\n\n @media all and (max-width: $media-fullwidth) {\n width: 100vw;\n }\n\n padding: 0;\n margin: 0;\n list-style: none;\n border-radius: none;\n background-color: var(--sdds-header-app-launcher-menu-bg);\n}\n\n:host([type='lg']) {\n width: 320px;\n}\n","import { Component, Element, Host, h, Prop, State } from '@stencil/core';\nimport {\n getPreviousNestedChildOfSiblingsMatching,\n isHeadingElement,\n} from '../../../../utils/utils';\n\n@Component({\n tag: 'sdds-header-dropdown-list',\n styleUrl: 'header-dropdown-list.scss',\n shadow: true,\n})\nexport class HeaderDropdownList {\n @Element() host: HTMLElement;\n\n // A Map to store the slots and their associated slotchange listeners.\n private slotListeners: Map<HTMLSlotElement, EventListener> = new Map();\n\n @Prop({ reflect: true }) type: 'lg' | 'md' = 'md';\n\n @State() headingElement: HTMLElement;\n\n componentWillLoad() {\n const { children } = this.host;\n\n // Set the type prop for each child, if they have such a property\n for (let i = 0; i < children.length; i++) {\n const child = children[i] as any;\n\n if ('type' in child) {\n child.type = this.type;\n }\n }\n\n let listRoot = this.host;\n if (this.host.parentElement.tagName.toLowerCase() === 'sdds-header-launcher-list') {\n listRoot = this.host.parentElement;\n }\n\n const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, isHeadingElement);\n\n if (headingEl) {\n this.headingElement = headingEl;\n } else {\n console.warn('Heading element for list not found');\n }\n }\n\n componentDidLoad() {\n this.host.shadowRoot.querySelectorAll('slot').forEach((slot: HTMLSlotElement) => {\n // Add the slotchange event listener.\n const onSlotChange: EventListener = (e: Event) => {\n this.processAssignedElements(e.target as HTMLSlotElement);\n };\n\n slot.addEventListener('slotchange', onSlotChange);\n\n onSlotChange({ target: slot } as unknown as Event);\n\n // Store the slot and its listener in the Map.\n this.slotListeners.set(slot, onSlotChange);\n });\n }\n\n processAssignedElements(slot: HTMLSlotElement): void {\n const nodes: Element[] = slot.assignedElements();\n nodes.forEach((node: Element) => {\n // Add a listitem role to the assigned element if needed.\n if (\n node.tagName.toLowerCase() !== 'li' &&\n node.tagName.toLowerCase() !== 'slot' &&\n node.getAttribute('role') !== 'listitem'\n ) {\n node.setAttribute('role', 'listitem');\n }\n\n // If the assigned element is a slot, process its assigned elements recursively.\n if (node.tagName.toLowerCase() === 'slot') {\n this.processAssignedElements(node as HTMLSlotElement);\n }\n });\n }\n\n disconnectedCallback() {\n this.slotListeners.forEach((listener: EventListener, slot: HTMLSlotElement) => {\n // Remove the slotchange event listener and delete the entry from the Map.\n slot.removeEventListener('slotchange', listener);\n this.slotListeners.delete(slot);\n });\n }\n\n render() {\n const attributes = {\n 'role': 'list',\n 'aria-labelledby': this.headingElement?.id,\n };\n\n return (\n <Host {...attributes}>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/header-item.js ADDED Viewed

@@ -0,0 +1,76 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as dfs } from './utils.js';
+import { d as defineCustomElement$1 } from './core-header-item.js';
+const headerItemCss = ":host ::slotted(button),:host ::slotted(a){all:unset;box-sizing:border-box;background-color:var(--sdds-header-background);border-right:1px solid var(--sdds-header--basic-element-border);width:100%;height:100%;cursor:pointer;padding:0 24px;display:flex;align-items:center;gap:8px}:host ::slotted(button) *,:host ::slotted(a) *{box-sizing:border-box}:host ::slotted(button:hover),:host ::slotted(a:hover){background-color:var(--sdds-header--basic-element-background-hover)}:host ::slotted(button:focus-visible),:host ::slotted(a:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .component-active ::slotted(button),:host .component-active ::slotted(a){background-color:var(--sdds-header--basic-element-background-open);color:var(--sdds-header-nav-item-dropdown-opened-color);border-color:var(--sdds-header--basic-element-border-open)}:host .component-selected:not(.component-active) ::slotted(button),:host .component-selected:not(.component-active) ::slotted(a){background-color:var(--sdds-header--basic-element-background-selected);padding-top:4px;border-bottom-style:solid;border-bottom-width:4px;border-bottom-color:var(--sdds-nav-item-border-color-active)}";
+const HeaderItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.active = false;
+    this.selected = false;
+  }
+  updateSlotted(searchPredicate, mutationCallback) {
+    const assignedElements = this.slotEl.assignedElements({ flatten: true });
+    const firstSlottedElement = assignedElements[0];
+    if (firstSlottedElement) {
+      const foundElement = dfs(firstSlottedElement, searchPredicate);
+      if (foundElement) {
+        mutationCallback(foundElement);
+      }
+    }
+  }
+  /**
+   * This function is needed because we can't use CSS selectors to style something in the light dom
+   */
+  updateSlottedElements() {
+    if (this.slotEl) {
+      const isIconOrSvg = (element) => element.tagName.toLowerCase() === 'sdds-icon' || element.tagName.toLowerCase() === 'svg';
+      const addIconClass = (element) => element.classList.add('__sdds-header-item-icon');
+      this.updateSlotted(isIconOrSvg, addIconClass);
+      const isImage = (element) => element.tagName.toLowerCase() === 'img';
+      const addImageClass = (element) => element.classList.add('__sdds-header-item-image');
+      this.updateSlotted(isImage, addImageClass);
+    }
+  }
+  componentDidLoad() {
+    this.slotEl = this.host.shadowRoot.querySelector('slot');
+    this.updateSlottedElements();
+    this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
+  }
+  render() {
+    return (h(Host, null, h("sdds-core-header-item", { class: {
+        'component-active': this.active,
+        'component-selected': this.selected,
+      } }, h("slot", null))));
+  }
+  get host() { return this; }
+  static get style() { return headerItemCss; }
+}, [1, "sdds-header-item", {
+    "active": [4],
+    "selected": [4]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-header-item", "sdds-core-header-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-header-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HeaderItem);
+      }
+      break;
+    case "sdds-core-header-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+export { HeaderItem as H, defineCustomElement as d };
+//# sourceMappingURL=header-item.js.map

package/dist/components/header-item.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"header-item.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,uqCAAuqC;;MCQhrC,UAAU;;;;;kBAKK,KAAK;oBAGH,KAAK;;EAIjC,aAAa,CACX,eAAkD,EAClD,gBAAgD;IAEhD,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IACzE,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,CAAC,CAAgB,CAAC;IAC/D,IAAI,mBAAmB,EAAE;MACvB,MAAM,YAAY,GAAG,GAAG,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;MAC/D,IAAI,YAAY,EAAE;QAChB,gBAAgB,CAAC,YAAY,CAAC,CAAC;OAChC;KACF;GACF;;;;EAKD,qBAAqB;IACnB,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,MAAM,WAAW,GAAG,CAAC,OAAO,KAC1B,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,WAAW,IAAI,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC;MAC3F,MAAM,YAAY,GAAG,CAAC,OAAO,KAAK,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC;MACnF,IAAI,CAAC,aAAa,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;MAE9C,MAAM,OAAO,GAAG,CAAC,OAAO,KAAK,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC;MACrE,MAAM,aAAa,GAAG,CAAC,OAAO,KAAK,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,0BAA0B,CAAC,CAAC;MACrF,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;KAC5C;GACF;EAED,gBAAgB;IACd,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IACzD,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC7B,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;GACxE;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,6BACE,KAAK,EAAE;QACL,kBAAkB,EAAE,IAAI,CAAC,MAAM;QAC/B,oBAAoB,EAAE,IAAI,CAAC,QAAQ;OACpC,IAED,eAAa,CACS,CACnB,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-item/header-item.scss?tag=sdds-header-item&encapsulation=shadow","./src/components/header/webcomponent/header-item/header-item.tsx"],"sourcesContent":["@import '../../../../mixins/box-sizing';\n@import '../../../../mixins/focus-state';\n\n:host {\n ::slotted(button),\n ::slotted(a) {\n all: unset;\n @include sdds-box-sizing;\n\n background-color: var(--sdds-header-background);\n border-right: 1px solid var(--sdds-header--basic-element-border);\n width: 100%;\n height: 100%;\n cursor: pointer;\n padding: 0 24px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n ::slotted(button:hover),\n ::slotted(a:hover) {\n background-color: var(--sdds-header--basic-element-background-hover);\n }\n\n ::slotted(button:focus-visible),\n ::slotted(a:focus-visible) {\n @include sdds-focus-state;\n }\n\n .component-active {\n ::slotted(button),\n ::slotted(a) {\n background-color: var(--sdds-header--basic-element-background-open);\n color: var(--sdds-header-nav-item-dropdown-opened-color);\n border-color: var(--sdds-header--basic-element-border-open);\n }\n }\n\n .component-selected:not(.component-active) {\n ::slotted(button),\n ::slotted(a) {\n background-color: var(--sdds-header--basic-element-background-selected);\n padding-top: 4px;\n border-bottom-style: solid;\n border-bottom-width: 4px;\n border-bottom-color: var(--sdds-nav-item-border-color-active);\n }\n }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { dfs } from '../../../../utils/utils';\n\n@Component({\n tag: 'sdds-header-item',\n styleUrl: 'header-item.scss',\n shadow: true,\n})\nexport class HeaderItem {\n @Element() host: HTMLElement;\n\n /** If the button should appear active. Can be used when the button is\n * triggering a dropdown, and the dropdown is open, for example. */\n @Prop() active: boolean = false;\n\n /** If the button should appear selected. */\n @Prop() selected: boolean = false;\n\n private slotEl: HTMLSlotElement;\n\n updateSlotted(\n searchPredicate: (element: HTMLElement) => boolean,\n mutationCallback: (element: HTMLElement) => void,\n ) {\n const assignedElements = this.slotEl.assignedElements({ flatten: true });\n const firstSlottedElement = assignedElements[0] as HTMLElement;\n if (firstSlottedElement) {\n const foundElement = dfs(firstSlottedElement, searchPredicate);\n if (foundElement) {\n mutationCallback(foundElement);\n }\n }\n }\n\n /**\n * This function is needed because we can't use CSS selectors to style something in the light dom\n */\n updateSlottedElements() {\n if (this.slotEl) {\n const isIconOrSvg = (element) =>\n element.tagName.toLowerCase() === 'sdds-icon' || element.tagName.toLowerCase() === 'svg';\n const addIconClass = (element) => element.classList.add('__sdds-header-item-icon');\n this.updateSlotted(isIconOrSvg, addIconClass);\n\n const isImage = (element) => element.tagName.toLowerCase() === 'img';\n const addImageClass = (element) => element.classList.add('__sdds-header-item-image');\n this.updateSlotted(isImage, addImageClass);\n }\n }\n\n componentDidLoad() {\n this.slotEl = this.host.shadowRoot.querySelector('slot');\n this.updateSlottedElements();\n this.slotEl.addEventListener('slotchange', this.updateSlottedElements);\n }\n\n render() {\n return (\n <Host>\n <sdds-core-header-item\n class={{\n 'component-active': this.active,\n 'component-selected': this.selected,\n }}\n >\n <slot></slot>\n </sdds-core-header-item>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/header-launcher-button.js ADDED Viewed

@@ -0,0 +1,57 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { i as inheritAriaAttributes } from './utils.js';
+import { d as defineCustomElement$3 } from './core-header-item.js';
+import { d as defineCustomElement$2 } from './header-item.js';
+import { d as defineCustomElement$1 } from './icon.js';
+const headerLauncherButtonCss = ":host{display:block}:host sdds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:all 0.2s ease-in-out}";
+const HeaderLauncherButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.active = false;
+  }
+  render() {
+    this.ariaAttributes = Object.assign(Object.assign({}, this.ariaAttributes), inheritAriaAttributes(this.host));
+    const buttonProps = Object.assign({}, this.ariaAttributes);
+    return (h(Host, null, h("sdds-header-item", { active: this.active }, h("button", Object.assign({}, buttonProps), h("sdds-icon", { class: "icon", name: "bento", size: "20px" })))));
+  }
+  get host() { return this; }
+  static get style() { return headerLauncherButtonCss; }
+}, [1, "sdds-header-launcher-button", {
+    "active": [4]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-header-launcher-button", "sdds-core-header-item", "sdds-header-item", "sdds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-header-launcher-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HeaderLauncherButton);
+      }
+      break;
+    case "sdds-core-header-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "sdds-header-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "sdds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+export { HeaderLauncherButton as H, defineCustomElement as d };
+//# sourceMappingURL=header-launcher-button.js.map

package/dist/components/header-launcher-button.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"header-launcher-button.js","mappings":";;;;;;AAAA,MAAM,uBAAuB,GAAG,mJAAmJ;;MCQtK,oBAAoB;;;;;kBAKd,KAAK;;EAItB,MAAM;IACJ,IAAI,CAAC,cAAc,mCAAQ,IAAI,CAAC,cAAc,GAAK,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAE,CAAC;IACtF,MAAM,WAAW,qBACZ,IAAI,CAAC,cAAc,CACvB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,wBAAkB,MAAM,EAAE,IAAI,CAAC,MAAM,IACnC,8BAAY,WAAW,GACrB,iBAAW,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa,CACtD,CACQ,CACd,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-launcher-button/header-launcher-button.scss?tag=sdds-header-launcher-button&encapsulation=shadow","./src/components/header/webcomponent/header-launcher-button/header-launcher-button.tsx"],"sourcesContent":[":host {\n display: block;\n\n sdds-header-item {\n display: block; // launcher button is always visible, regular header buttons are not.\n }\n\n .icon {\n position: relative;\n margin-left: -6px;\n left: 3px;\n transition: all 0.2s ease-in-out;\n }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { Attributes, inheritAriaAttributes } from '../../../../utils/utils';\n\n@Component({\n tag: 'sdds-header-launcher-button',\n styleUrl: 'header-launcher-button.scss',\n shadow: true,\n})\nexport class HeaderLauncherButton {\n @Element() host: HTMLElement;\n\n /** If the button should appear active. Can be used when the button is\n * triggering a dropdown, and the dropdown is open, for example. */\n @Prop() active = false;\n\n private ariaAttributes: Attributes;\n\n render() {\n this.ariaAttributes = { ...this.ariaAttributes, ...inheritAriaAttributes(this.host) };\n const buttonProps = {\n ...this.ariaAttributes,\n };\n\n return (\n <Host>\n <sdds-header-item active={this.active}>\n <button {...buttonProps}>\n <sdds-icon class=\"icon\" name=\"bento\" size=\"20px\"></sdds-icon>\n </button>\n </sdds-header-item>\n </Host>\n );\n }\n}\n"],"version":3}