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

@scania/tegel 0.0.34 → 0.0.51

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 (910) 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 './dropdown-theme-vars.scss';\n@import '../../global/scania-fonts-vars.scss';\n\n@import '../checkbox/checkbox.scss';\n@import '../../mixins/box-sizing';\n\n:host,\n::slotted() {\n color: var(--sdds-grey-958);\n box-sizing: border-box;\n @include sdds-box-sizing;\n}\n\n:host,\n::slotted() {\n --sdds-dropdown-label-outside: var(--sdds-dropdown-label-outside);\n --sdds-dropdown-label-outside-text-decoration: none;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-grey-958);\n box-sizing: border-box;\n}\n\n:host {\n position: relative;\n z-index: auto;\n\n &::part(dropdown-filter-disabled) {\n cursor: not-allowed;\n caret-color: transparent;\n pointer-events: none;\n color: var(--sdds-grey-400);\n border: none;\n\n &::placeholder {\n color: var(--sdds-grey-400);\n }\n }\n}\n\n.sdds-dropdown {\n position: relative;\n display: flex;\n flex-flow: column wrap;\n width: 100%;\n border: 0;\n\n &,\n * {\n box-sizing: border-box;\n }\n\n .sdds-dropdown-toggle {\n @include dropdown-wrapper;\n\n display: flex;\n align-items: center;\n\n &-lg {\n padding: 20px 16px;\n }\n\n &-md {\n padding: 16px;\n }\n\n &-sm {\n padding: 12px 16px;\n }\n\n &.sdds-dropdown-toggle-label-inside {\n &-lg {\n padding: 20px 16px 16px;\n }\n\n &-md {\n padding: 16px 16px 12px;\n }\n }\n }\n\n .sdds-dropdown-toggle--selected:not(:focus) {\n border-bottom: 1px solid var(--sdds-dropdown-border-not-focused);\n }\n\n .sdds-dropdown-arrow {\n width: 20px;\n position: absolute;\n right: 16px;\n color: inherit;\n transform: rotate(0);\n transition: transform ease 250ms;\n }\n\n .sdds-dropdown-placeholder {\n color: var(--sdds-grey-700);\n }\n\n .sdds-dropdown-label {\n display: grid;\n width: calc(100% - 25px);\n }\n\n .sdds-dropdown-label-container {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &.sdds-dropdown.sdds-dropdown-sm {\n .sdds-dropdown-label-container--label-inside {\n padding-bottom: 12px;\n }\n }\n\n .sdds-dropdown-filter {\n border: 0;\n outline: none;\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-dropdown-link);\n width: 100%;\n background: transparent;\n\n &:focus {\n outline: none;\n }\n\n &::placeholder {\n color: var(--sdds-grey-700);\n opacity: 1;\n }\n }\n\n .sdds-dropdown-menu {\n z-index: z(dropdown);\n\n @include sdds-scrollbar;\n\n background-color: var(--sdds-dropdown-background);\n position: absolute;\n top: 100%;\n left: 0;\n min-width: 100%;\n max-height: 360px; // max 7 option items, then add scroll\n border-color: transparent;\n border-style: solid;\n border-width: 0 1px 1px;\n box-shadow: 0 2px 3px 0 rgb(0 0 0 / 10%);\n border-left-color: var(--sdds-dropdown-border);\n border-right-color: var(--sdds-dropdown-border);\n overflow-x: hidden;\n overflow-y: auto;\n transform: scaleY(0);\n transform-origin: top;\n transition: transform 250ms ease;\n }\n\n // Size lg\n &.sdds-dropdown-lg {\n .sdds-dropdown-toggle {\n height: 56px;\n }\n }\n\n // Size md\n &.sdds-dropdown-md {\n .sdds-dropdown-toggle {\n height: 48px;\n }\n }\n\n // Size sm\n &.sdds-dropdown-sm {\n .sdds-dropdown-toggle {\n height: 40px;\n }\n }\n}\n\n:host(.sdds-dropdown--open-upwards) {\n .sdds-dropdown {\n .sdds-dropdown-menu {\n top: auto;\n bottom: 100%;\n box-shadow: 0 -1px 3px 0 rgb(0 0 0 / 10%);\n transform-origin: bottom;\n }\n }\n}\n\n:host(.sdds-dropdown--open-upwards[label-position='outside']) {\n span.sdds-dropdown-menu {\n bottom: calc(100% - 24px);\n }\n}\n\n:host([disabled='true']) {\n cursor: not-allowed;\n\n .sdds-dropdown {\n .sdds-dropdown-toggle {\n pointer-events: none;\n color: var(--sdds-dropdown-option-disabled-color);\n border: none;\n padding: 0 16px;\n\n .sdds-dropdown-placeholder {\n color: var(--sdds-dropdown-placeholder);\n }\n\n .sdds-dropdown-label-inside {\n color: var(--sdds-dropdown-label-inside);\n }\n\n &:focus {\n &::before {\n content: none;\n }\n }\n }\n }\n}\n\n:host(.sdds-dropdown--error) {\n .sdds-dropdown {\n .sdds-dropdown-toggle {\n border-color: var(--sdds-negative);\n\n &:focus {\n &::before {\n border-color: var(--sdds-negative);\n }\n }\n }\n }\n\n .sdds-dropdown-helper {\n color: var(--sdds-negative);\n\n .sdds-dropdown-error-icon {\n display: flex;\n }\n }\n}\n\n// dropdown option\n:host {\n ::slotted(sdds-dropdown-option) {\n display: flex;\n padding: var(--sdds-spacing-element-16);\n background-color: var(--sdds-dropdown-background);\n border-top: 1px solid transparent;\n border-bottom: 1px solid var(--sdds-dropdown-border);\n opacity: 0;\n visibility: hidden;\n cursor: pointer;\n box-sizing: border-box;\n color: var(--sdds-dropdown-option-color);\n }\n\n ::slotted(sdds-dropdown-option:last-child) {\n border-bottom-color: transparent;\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n }\n\n ::slotted(sdds-dropdown-option:hover),\n ::slotted(sdds-dropdown-option:focus) {\n background-color: var(--sdds-dropdown-background-hover);\n }\n\n ::slotted(sdds-dropdown-option:hover:not(:focus):not(sdds-dropdown-option.selected)) {\n background-color: var(--sdds-dropdown-background-hover);\n }\n\n ::slotted(sdds-dropdown-option:hover:focus) {\n outline: none;\n }\n\n ::slotted(sdds-dropdown-option:focus) {\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n ::slotted(sdds-dropdown-option.sdds-dropdown--selected),\n ::slotted(sdds-dropdown-option.selected),\n ::slotted(sdds-dropdown-option.active),\n ::slotted(sdds-dropdown-option:active) {\n background-color: var(--sdds-dropdown-background-hover);\n border-top: 1px solid var(--sdds-dropdown-border);\n border-bottom: 1px solid var(--sdds-dropdown-border);\n }\n\n ::slotted(sdds-dropdown-option.sdds-option--no-result) {\n cursor: not-allowed;\n pointer-events: none;\n }\n\n ::slotted(sdds-dropdown-option.sdds-dropdown-option-disabled),\n ::slotted(sdds-dropdown-option.selected.sdds-dropdown-option-disabled) {\n cursor: not-allowed;\n color: var(--sdds-dropdown-option-disabled-color);\n background-color: var(--sdds-dropdown-background-disabled);\n }\n}\n\n:host(.sdds-dropdown--open-upwards) {\n ::slotted(sdds-dropdown-option:first-child) {\n border-radius: 4px 4px 0 0;\n }\n\n ::slotted(sdds-dropdown-option:last-child) {\n border-radius: 0;\n border-bottom: 1px solid var(--sdds-dropdown-border);\n }\n}\n\n.sdds-option-label {\n margin: auto 0;\n display: flex;\n align-content: center;\n text-decoration: none;\n flex-grow: 2;\n}\n\n.sdds-option-checkmark {\n color: inherit;\n opacity: 0;\n transition: opacity 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);\n margin-left: var(--sdds-spacing-element-16);\n\n path {\n color: var(--sdds-dropdown-option-color);\n }\n}\n\n:host([size='sm']) {\n ::slotted(sdds-dropdown-option) {\n padding: var(--sdds-spacing-element-12) var(--sdds-spacing-element-16);\n }\n}\n\n:host(.sdds-dropdown--open) {\n .sdds-dropdown {\n .sdds-dropdown-toggle {\n box-shadow: 0 -1px 3px -1px rgb(0 0 0 / 10%);\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n\n // TODO: what is this? it doesnt seem to do anything.\n &.is-filter {\n &::before {\n content: ' ';\n position: absolute;\n z-index: 2;\n bottom: 0;\n left: 0;\n width: 100%;\n border-bottom: 1px solid var(--sdds-blue-400);\n }\n }\n }\n\n .sdds-dropdown-arrow {\n transform: rotate(180deg);\n }\n\n .sdds-dropdown-menu {\n transform: scaleY(1);\n }\n }\n\n ::slotted(sdds-dropdown-option) {\n visibility: visible;\n opacity: 1;\n }\n}\n\n:host(.selected) {\n .sdds-option-checkmark {\n opacity: 1;\n }\n}\n\n.sdds-dropdown-label-inside {\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-dropdown-label-inside);\n position: absolute;\n transition: transform 250ms ease, color 200ms ease;\n width: calc(100% - 63px);\n overflow: hidden;\n text-overflow: ellipsis;\n transform: translate(0, -10px);\n font-size: 10px;\n}\n\n.sdds-dropdown-label-container.sdds-dropdown-label-container--label-inside {\n .sdds-dropdown-placeholder {\n display: block;\n padding-top: 4px;\n }\n}\n\n.sdds-dropdown-lg {\n .sdds-dropdown-label-inside {\n display: block;\n top: 16px;\n }\n}\n\n.sdds-dropdown-md {\n .sdds-dropdown-label-inside {\n display: block;\n top: 12px;\n }\n}\n\n.sdds-dropdown.sdds-dropdown-sm {\n .sdds-dropdown-label-inside {\n display: none;\n }\n}\n\n.sdds-dropdown-multiselect-result {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.sdds-option-checkbox {\n margin-right: 8px;\n}\n\n.sdds-form-label {\n display: flex;\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Element,\n 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 the dropdown. /\n @Prop() modeVariant: 'primary' \| 'secondary';\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;\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: string = 'default';\n\n /* Add helper text in the bottom of dropdown /\n @Prop() helper: string = '';\n\n /* Direction that the dropdown will open. By default set to 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 @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.listItemArray = Array.from(this.host.children);\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.listItemArray[this.listItemIndex].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.listItemArray[this.listItemIndex].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('selectOption')\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 === 'error' ? '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: 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}

package/dist/components/icon.js CHANGED Viewed

@@ -4,55 +4,55 @@ const iconsCollection = '[{"name":"arrow_diagonal","definition":"M24.444 22.143a
 const iconCss = ":host{display:inline-block;vertical-align:middle;line-height:0}:host,:host *,:host *::before,:host *::after{box-sizing:border-box}:host svg{height:1em;width:1em;fill:currentcolor}";
-const Icon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.setIcons = () => this.arrayOfIcons.map(element => {
-      if (element.name === this.name) {
-        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": `icon ${element.name}`, role: "img", style: { fontSize: this.size } }, h("title", null, `icon ${element.name}`), h("path", { fill: "currentColor", d: element.definition })));
-      }
-    });
-    this.name = 'arrow_diagonal';
-    this.size = '16px';
-    this.icons_object = iconsCollection;
-    this.arrayOfIcons = [];
-  }
-  componentWillLoad() {
-    this.arrayDataWatcher(this.icons_object);
-  }
-  arrayDataWatcher(newValue) {
-    if (typeof newValue === 'string') {
-      this.arrayOfIcons = JSON.parse(newValue);
-    }
-    else {
-      this.arrayOfIcons = newValue;
-    }
-    this.arrayOfIcons = [...this.arrayOfIcons];
-  }
-  render() {
-    return h(Host, null, this.setIcons());
-  }
-  static get style() { return iconCss; }
-}, [1, "sdds-icon", {
-    "name": [513],
-    "size": [513],
-    "icons_object": [32],
-    "arrayOfIcons": [32]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-icon":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Icon);
-      }
-      break;
-  } });
+const Icon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.setIcons = () => this.arrayOfIcons.map(element => {
+      if (element.name === this.name) {
+        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": `icon ${element.name}`, role: "img", style: { fontSize: this.size } }, h("title", null, `icon ${element.name}`), h("path", { fill: "currentColor", d: element.definition })));
+      }
+    });
+    this.name = 'arrow_diagonal';
+    this.size = '16px';
+    this.icons_object = iconsCollection;
+    this.arrayOfIcons = [];
+  }
+  componentWillLoad() {
+    this.arrayDataWatcher(this.icons_object);
+  }
+  arrayDataWatcher(newValue) {
+    if (typeof newValue === 'string') {
+      this.arrayOfIcons = JSON.parse(newValue);
+    }
+    else {
+      this.arrayOfIcons = newValue;
+    }
+    this.arrayOfIcons = [...this.arrayOfIcons];
+  }
+  render() {
+    return h(Host, null, this.setIcons());
+  }
+  static get style() { return iconCss; }
+}, [1, "sdds-icon", {
+    "name": [513],
+    "size": [513],
+    "icons_object": [32],
+    "arrayOfIcons": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-icon":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Icon);
+      }
+      break;
+  } });
 }
 export { Icon as I, defineCustomElement as d };

package/dist/components/index.d.ts CHANGED Viewed

@@ -25,15 +25,3 @@ export interface SetPlatformOptions {
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
 export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
-/**
- * Utility to define all custom elements within this package using the tag name provided in the component's source.
- * When defining each custom element, it will also check it's safe to define by:
- *
- * 1. Ensuring the "customElements" registry is available in the global context (window).
- * 2. Ensuring that the component tag name is not already defined.
- *
- * Use the standard [customElements.define()](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define)
- * method instead to define custom elements individually, or to provide a different tag name.
- */
-export declare const defineCustomElements: (opts?: any) => void;

package/dist/components/index.js CHANGED Viewed

@@ -1,98 +1,3 @@
-import { SddsAccordion } from './sdds-accordion.js';
-import { SddsAccordionItem } from './sdds-accordion-item.js';
-import { SddsBadges } from './sdds-badges.js';
-import { SddsBanner } from './sdds-banner.js';
-import { SddsBlock } from './sdds-block.js';
-import { SddsBodyCell } from './sdds-body-cell.js';
-import { SddsBreadcrumb } from './sdds-breadcrumb.js';
-import { SddsBreadcrumbItem } from './sdds-breadcrumb-item.js';
-import { SddsButton } from './sdds-button.js';
-import { SddsCard } from './sdds-card.js';
-import { SddsCheckbox } from './sdds-checkbox.js';
-import { SddsDatetime } from './sdds-datetime.js';
-import { SddsDropdown } from './sdds-dropdown.js';
-import { SddsDropdownFilter } from './sdds-dropdown-filter.js';
-import { SddsDropdownOption } from './sdds-dropdown-option.js';
-import { SddsHeaderCell } from './sdds-header-cell.js';
-import { SddsIcon } from './sdds-icon.js';
-import { SddsInlineTab } from './sdds-inline-tab.js';
-import { SddsInlineTabs } from './sdds-inline-tabs.js';
-import { SddsInlineTabsFullbleed } from './sdds-inline-tabs-fullbleed.js';
-import { SddsLink } from './sdds-link.js';
-import { SddsMessage } from './sdds-message.js';
-import { SddsModal } from './sdds-modal.js';
-import { SddsNavigationTabs } from './sdds-navigation-tabs.js';
-import { SddsPopoverCanvas } from './sdds-popover-canvas.js';
-import { SddsPopoverMenu } from './sdds-popover-menu.js';
-import { SddsRadioButton } from './sdds-radio-button.js';
-import { SddsSlider } from './sdds-slider.js';
-import { SddsSpinner } from './sdds-spinner.js';
-import { SddsTable } from './sdds-table.js';
-import { SddsTableBody } from './sdds-table-body.js';
-import { SddsTableBodyRow } from './sdds-table-body-row.js';
-import { SddsTableBodyRowExpandable } from './sdds-table-body-row-expandable.js';
-import { SddsTableFooter } from './sdds-table-footer.js';
-import { SddsTableHeader } from './sdds-table-header.js';
-import { SddsTableToolbar } from './sdds-table-toolbar.js';
-import { SddsTextarea } from './sdds-textarea.js';
-import { SddsTextfield } from './sdds-textfield.js';
-import { SddsToast } from './sdds-toast.js';
-import { SddsToggle } from './sdds-toggle.js';
-import { SddsTooltip } from './sdds-tooltip.js';
 export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
-const defineCustomElements = (opts) => {
-  if (typeof customElements !== 'undefined') {
-    [
-      SddsAccordion,
-      SddsAccordionItem,
-      SddsBadges,
-      SddsBanner,
-      SddsBlock,
-      SddsBodyCell,
-      SddsBreadcrumb,
-      SddsBreadcrumbItem,
-      SddsButton,
-      SddsCard,
-      SddsCheckbox,
-      SddsDatetime,
-      SddsDropdown,
-      SddsDropdownFilter,
-      SddsDropdownOption,
-      SddsHeaderCell,
-      SddsIcon,
-      SddsInlineTab,
-      SddsInlineTabs,
-      SddsInlineTabsFullbleed,
-      SddsLink,
-      SddsMessage,
-      SddsModal,
-      SddsNavigationTabs,
-      SddsPopoverCanvas,
-      SddsPopoverMenu,
-      SddsRadioButton,
-      SddsSlider,
-      SddsSpinner,
-      SddsTable,
-      SddsTableBody,
-      SddsTableBodyRow,
-      SddsTableBodyRowExpandable,
-      SddsTableFooter,
-      SddsTableHeader,
-      SddsTableToolbar,
-      SddsTextarea,
-      SddsTextfield,
-      SddsToast,
-      SddsToggle,
-      SddsTooltip,
-    ].forEach(cmp => {
-      if (!customElements.get(cmp.is)) {
-        customElements.define(cmp.is, cmp, opts);
-      }
-    });
-  }
-};
-export { defineCustomElements };
 //# sourceMappingURL=index.js.map

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

	@@ -1 +1 @@
1	- {"file":"index.js","mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":[],"sourcesContent":[],"version":3}
1	+ {"file":"index.js","mappings":"","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/sdds-accordion-item.js CHANGED Viewed

@@ -3,55 +3,55 @@ import { d as defineCustomElement$2 } from './icon.js';
 const accordionItemCss = ".sdds-accordion-item{box-sizing:border-box;list-style:none;color:var(--sdds-accordion-color);position:relative;border-top:1px solid var(--sdds-accordion-border)}.sdds-accordion-item *{box-sizing:border-box}.sdds-accordion-item button.sdds-accordion-header-icon-start,.sdds-accordion-item button.sdds-accordion-header-icon-end{all:unset}.sdds-accordion-item .sdds-accordion-header-icon-start,.sdds-accordion-item .sdds-accordion-header-icon-end,.sdds-accordion-item button.sdds-accordion-header-icon-start,.sdds-accordion-item button.sdds-accordion-header-icon-end{box-sizing:border-box;cursor:pointer;display:flex;align-items:center;width:100%;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);padding:var(--sdds-spacing-element-16);background-color:var(--sdds-accordion-background)}.sdds-accordion-item .sdds-accordion-header-icon-start *,.sdds-accordion-item .sdds-accordion-header-icon-end *,.sdds-accordion-item button.sdds-accordion-header-icon-start *,.sdds-accordion-item button.sdds-accordion-header-icon-end *{box-sizing:border-box}.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon,.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon,.sdds-accordion-item button.sdds-accordion-header-icon-start .sdds-accordion-icon,.sdds-accordion-item button.sdds-accordion-header-icon-end .sdds-accordion-icon{transform-origin:center;transition:transform 0.15s ease-in-out;color:var(--sdds-accordion-color)}.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon>sdds-icon,.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon>sdds-icon,.sdds-accordion-item button.sdds-accordion-header-icon-start .sdds-accordion-icon>sdds-icon,.sdds-accordion-item button.sdds-accordion-header-icon-end .sdds-accordion-icon>sdds-icon{display:block}.sdds-accordion-item .sdds-accordion-title{flex-grow:2}.sdds-accordion-item .sdds-accordion-panel{cursor:default;padding:var(--sdds-spacing-element-8) var(--sdds-spacing-layout-64) var(--sdds-spacing-element-32) var(--sdds-spacing-element-16);display:none;font:var(--sdds-detail-03);letter-spacing:var(--sdds-detail-03-ls)}.sdds-accordion-item .sdds-accordion-panel p{margin:0;padding:0}.sdds-accordion-item .sdds-accordion-panel--padding-reset{padding-right:var(--sdds-spacing-element-16)}.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon{margin:0 0 0 var(--sdds-spacing-element-32)}.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-title{order:1}.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon{order:0;margin:0 var(--sdds-spacing-element-16) 0 0}.sdds-accordion-item.disabled,.sdds-accordion-item.disabled .sdds-accordion-header-icon-end,.sdds-accordion-item.disabled .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled .sdds-accordion-panel{color:var(--sdds-accordion-color-disabled);cursor:not-allowed}.sdds-accordion-item.disabled .sdds-accordion-icon,.sdds-accordion-item.disabled .sdds-accordion-header-icon-end .sdds-accordion-icon,.sdds-accordion-item.disabled .sdds-accordion-header-icon-start .sdds-accordion-icon,.sdds-accordion-item.disabled .sdds-accordion-panel .sdds-accordion-icon{color:var(--sdds-accordion-color-disabled)}.sdds-accordion-item.disabled:hover,.sdds-accordion-item.disabled:hover *,.sdds-accordion-item.disabled:focus,.sdds-accordion-item.disabled:focus *,.sdds-accordion-item.disabled:active,.sdds-accordion-item.disabled:active *,.sdds-accordion-item.disabled.active,.sdds-accordion-item.disabled.active *{cursor:not-allowed}.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-end,.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-end,.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-end,.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-bg);outline:none;pointer-events:none}.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-start::after,.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-end::after,.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-start::after,.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-end::after,.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-start::after,.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-end::after,.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-start::after,.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-end::after{border-color:transparent}.sdds-accordion-item.expanded .sdds-accordion-panel{display:block;padding-bottom:31px}.sdds-accordion-item.expanded .sdds-accordion-icon{transform:rotate(180deg)}.sdds-accordion-item.expanded .sdds-accordion-header-icon-end .sdds-accordion-icon{margin-right:0;margin-left:var(--sdds-spacing-element-32)}.sdds-accordion-item.expanded .sdds-accordion-header-icon-start .sdds-accordion-icon{margin-left:0;margin-right:var(--sdds-spacing-element-16)}.sdds-accordion-item:focus{border-top:1px solid var(--sdds-accordion-border-focus)}.sdds-accordion-item[disabled=true]:focus{border-color:var(--sdds-accordion-border)}:host(:focus) .sdds-accordion-item{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start,:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-background-focus);outline:none}:host(:hover) .sdds-accordion-header-icon-start,:host(:hover) .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-background-hover)}:host(:active) .sdds-accordion-header-icon-start,:host(:active) .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-background-active);outline:none}";
-const AccordionItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.sddsToggle = createEvent(this, "sddsToggle", 7);
-    this.header = '';
-    this.expandIconPosition = 'end';
-    this.disabled = false;
-    this.expanded = false;
-    this.paddingReset = false;
-  }
-  openAccordion() {
-    this.expanded = !this.expanded;
-    this.sddsToggle.emit(this.expanded);
-  }
-  render() {
+const AccordionItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.sddsToggle = createEvent(this, "sddsToggle", 7);
+    this.header = '';
+    this.expandIconPosition = 'end';
+    this.disabled = false;
+    this.expanded = false;
+    this.paddingReset = false;
+  }
+  openAccordion() {
+    this.expanded = !this.expanded;
+    this.sddsToggle.emit(this.expanded);
+  }
+  render() {
     return (h(Host, null, h("div", { class: `sdds-accordion-item
         ${this.disabled ? 'disabled' : ''}
         ${this.expanded ? 'expanded' : ''}
         ` }, h("button", { type: "button", "aria-expanded": this.expanded, class: `sdds-accordion-header-icon-${this.expandIconPosition}`, onClick: () => this.openAccordion(), disabled: this.disabled }, h("div", { class: "sdds-accordion-title" }, this.header), h("div", { class: "sdds-accordion-icon" }, h("sdds-icon", { name: "chevron_down", size: "16px" }))), h("div", { class: `sdds-accordion-panel
             ${this.paddingReset ? 'sdds-accordion-panel--padding-reset ' : ''}
-            ` }, h("slot", null)))));
-  }
-  static get style() { return accordionItemCss; }
-}, [1, "sdds-accordion-item", {
-    "header": [1],
-    "expandIconPosition": [1, "expand-icon-position"],
-    "disabled": [4],
-    "expanded": [4],
-    "paddingReset": [4, "padding-reset"]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-accordion-item", "sdds-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-accordion-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, AccordionItem);
-      }
-      break;
-    case "sdds-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+            ` }, h("slot", null)))));
+  }
+  static get style() { return accordionItemCss; }
+}, [1, "sdds-accordion-item", {
+    "header": [1],
+    "expandIconPosition": [1, "expand-icon-position"],
+    "disabled": [4],
+    "expanded": [4],
+    "paddingReset": [4, "padding-reset"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-accordion-item", "sdds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-accordion-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, AccordionItem);
+      }
+      break;
+    case "sdds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
 }
 const SddsAccordionItem = AccordionItem;

package/dist/components/sdds-accordion.js CHANGED Viewed

@@ -2,34 +2,32 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 const accordionCss = ":host{display:block;box-sizing:border-box}:host *{box-sizing:border-box}:host .sdds-accordion-header-icon-start,:host .sdds-accordion-header-icon-end{position:relative}:host(:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start,:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-background-focus);outline:none}:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start::after,:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end::after{border-color:var(--sdds-accordion-border-focus)}:host(:focus) .disabled,:host(:focus) .disabled *{cursor:not-allowed}:host(:focus) .disabled .sdds-accordion-header-icon-start,:host(:focus) .disabled .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-bg);outline:none;pointer-events:none}:host(:focus) .disabled .sdds-accordion-header-icon-start::after,:host(:focus) .disabled .sdds-accordion-header-icon-end::after{border-color:transparent}:host(:active) .sdds-accordion-header-icon-start,:host(:active) .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-background-active);outline:none}:host(:active) .disabled,:host(:active) .disabled *{cursor:not-allowed}:host(:active) .disabled .sdds-accordion-header-icon-start,:host(:active) .disabled .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-bg);outline:none;pointer-events:none}:host(:active) .disabled .sdds-accordion-header-icon-start::after,:host(:active) .disabled .sdds-accordion-header-icon-end::after{border-color:transparent}:host(:last-child){border-bottom:1px solid var(--sdds-accordion-border)}";
-const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.divider = true;
-    this.modeVariant = null;
-  }
-  render() {
-    return (h(Host, { class: `sdds-accordion ${this.divider ? 'sdds-accordion-divider' : ''} ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
-  }
-  static get style() { return accordionCss; }
-}, [1, "sdds-accordion", {
-    "divider": [4],
-    "modeVariant": [1, "mode-variant"]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-accordion"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-accordion":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Accordion);
-      }
-      break;
-  } });
+const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.modeVariant = null;
+  }
+  render() {
+    return (h(Host, { class: `sdds-accordion ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
+  }
+  static get style() { return accordionCss; }
+}, [1, "sdds-accordion", {
+    "modeVariant": [1, "mode-variant"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-accordion"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-accordion":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Accordion);
+      }
+      break;
+  } });
 }
 const SddsAccordion = Accordion;

package/dist/components/sdds-accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-accordion.js","mappings":";;AAAA,MAAM,YAAY,GAAG,grDAAgrD;;MCOxrD,SAAS;;;;;~~mBAEO~~,IAAI~~;uBAGgB,IAAI~~;;EAEnD,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE,kBAAkB,IAAI,CAAC,~~OAAO,GAAG,wBAAwB,GAAG,EAAE,IAAI,IAAI,CAAC,~~WAAW,KAAK,IAAI,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAE,EAAE,EAAE,~~IAElJ~~,eAAa,CACR,EACP;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["./src/components/accordion/accordion.scss?tag=sdds-accordion&encapsulation=shadow","./src/components/accordion/accordion.tsx"],"sourcesContent":["@import '../../mixins/focus-state';\n@import '../../mixins/disabled-style';\n@import '../../mixins/box-sizing';\n\n:host {\n display: block;\n @include sdds-box-sizing;\n\n .sdds-accordion-header-icon-start,\n .sdds-accordion-header-icon-end {\n position: relative;\n }\n}\n\n:host(:focus) {\n @include sdds-focus-state;\n\n .sdds-accordion-item {\n .sdds-accordion-header-icon-start,\n .sdds-accordion-header-icon-end {\n background-color: var(--sdds-accordion-background-focus);\n outline: none;\n\n &::after {\n border-color: var(--sdds-accordion-border-focus);\n }\n }\n }\n\n .disabled {\n @include disabledStyle;\n }\n}\n\n:host(:active) {\n .sdds-accordion-header-icon-start,\n .sdds-accordion-header-icon-end {\n background-color: var(--sdds-accordion-background-active);\n outline: none;\n }\n\n .disabled {\n @include disabledStyle;\n }\n}\n\n:host(:last-child) {\n border-bottom: 1px solid var(--sdds-accordion-border);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-accordion',\n styleUrl: 'accordion.scss',\n shadow: true,\n})\nexport class Accordion {\n /** Enable or disable divider lines between items /\n @Prop() divider: boolean = true;\n\n /* Set the variant of the the accordion. */\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n render() {\n return (\n <Host\n class={`sdds-accordion ${this.~~divider ? 'sdds-accordion-divider' : ''} ${this.~~modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-accordion.js","mappings":";;AAAA,MAAM,YAAY,GAAG,grDAAgrD;;MCOxrD,SAAS;;;;;uBAE2B,IAAI;;EAEnD,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE,kBAAkB,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAE,EAAE,EAAE,IAElG,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/accordion/accordion.scss?tag=sdds-accordion&encapsulation=shadow","./src/components/accordion/accordion.tsx"],"sourcesContent":["@import '../../mixins/focus-state';\n@import '../../mixins/disabled-style';\n@import '../../mixins/box-sizing';\n\n:host {\n display: block;\n @include sdds-box-sizing;\n\n .sdds-accordion-header-icon-start,\n .sdds-accordion-header-icon-end {\n position: relative;\n }\n}\n\n:host(:focus) {\n @include sdds-focus-state;\n\n .sdds-accordion-item {\n .sdds-accordion-header-icon-start,\n .sdds-accordion-header-icon-end {\n background-color: var(--sdds-accordion-background-focus);\n outline: none;\n\n &::after {\n border-color: var(--sdds-accordion-border-focus);\n }\n }\n }\n\n .disabled {\n @include disabledStyle;\n }\n}\n\n:host(:active) {\n .sdds-accordion-header-icon-start,\n .sdds-accordion-header-icon-end {\n background-color: var(--sdds-accordion-background-active);\n outline: none;\n }\n\n .disabled {\n @include disabledStyle;\n }\n}\n\n:host(:last-child) {\n border-bottom: 1px solid var(--sdds-accordion-border);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-accordion',\n styleUrl: 'accordion.scss',\n shadow: true,\n})\nexport class Accordion {\n /** Set the variant of the the accordion. */\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n render() {\n return (\n <Host\n class={`sdds-accordion ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}