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

@scania/tegel 0.0.34 → 0.0.52

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

package/dist/tegel/p-b65ffb92.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["dropdownCss","Dropdown","componentWillLoad","this","listItemArray","Array","from","host","children","map","listItem","optionValues","push","value","optionLabels","innerText","trim","setOptionFromOutside","defaultOption","size","console","warn","optionValue","deselectAll","split","i","length","el","includes","selectedLabelsArray","textContent","selectedValuesArray","selectedLabel","selectedValue","setAttribute","changeSelectedOption","selectedOption","resetOption","handleDocClick","ev","stopPropagation","target","composedPath","window","event","node","undefined","contains","textInput","focus","tabbingLabelReset","open","keyListener","disabled","key","preventDefault","listItemIndex","handleClick","openDirection","dropdownMenuHeight","dropdownMenuSelector","offsetHeight","distanceToBottom","getBoundingClientRect","top","viewportHeight","innerHeight","openUpwards","inputSearch","emit","selectOptionHandler","type","detail","label","itemIndex","indexOf","filter","_value","index","handleSearch","searchTerm","optionItem","Object","assign","selected","async","render","h","Host","class","modeVariant","inline","state","labelPosition","JSON","stringify","part","tabindex","onClick","ref","inputEl","placeholder","onInput","autoComplete","toString","join","width","height","viewBox","fill","xmlns","d","stroke","dropdownMenu","helper","DropdownOption","changeFocusHandler","removeFocusHandler","blur","onKeyDown","code","parent","parentNode","innerValue","isMultiSelectOption","closest","classList","listOptions","childNodes","selectOption","forEach","optionEl","optionCheckbox","shadowRoot","querySelector","checked"],"sources":["./src/components/dropdown/dropdown.scss?tag=sdds-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx","./src/components/dropdown/dropdown.scss?tag=sdds-dropdown-option&encapsulation=shadow","./src/components/dropdown/dropdown-option/dropdown-option.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import './dropdown-core';\n@import './dropdown-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","@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 Host,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\n\n@Component({\n tag: 'sdds-dropdown-option',\n styleUrl: './../dropdown.scss',\n shadow: true,\n})\nexport class DropdownOption {\n @Element() host: HTMLElement;\n\n // Used as a fallback if value prop is not recognized to match handleClick\n @State() innerValue: string;\n\n /** Selected set to true if selected */\n @Prop() selected: boolean = false;\n\n /** Sets option to disabled state if true */\n @Prop() disabled: boolean = false;\n\n /** Value is a unique string that will be used for application logic */\n @Prop({ reflect: true }) value: string;\n\n @Event({\n eventName: 'selectOption',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n selectOption: EventEmitter<any>;\n\n isMultiSelectOption: boolean;\n\n @Listen('mouseover')\n changeFocusHandler() {\n this.host.focus();\n }\n\n @Listen('mouseout')\n removeFocusHandler() {\n this.host.blur();\n }\n\n @Listen('keydown')\n onKeyDown(event: KeyboardEvent) {\n if (event.code === 'Enter') {\n this.selectOptionHandler({\n value: this.value,\n label: this.host.innerText,\n parent: this.host.parentNode,\n });\n }\n }\n\n componentWillLoad() {\n this.innerValue = this.value;\n this.isMultiSelectOption = this.host\n .closest('sdds-dropdown')\n .classList.contains('sdds-dropdown-multiselect');\n }\n\n selectOptionHandler(value) {\n if (!this.disabled) {\n const listOptions = value.parent.childNodes;\n this.selectOption.emit(value);\n if (!this.isMultiSelectOption) {\n listOptions.forEach((optionEl) => {\n // TODO: fix and enable rule\n // eslint-disable-next-line no-param-reassign\n optionEl.selected = false;\n });\n }\n const optionCheckbox = this.host.shadowRoot.querySelector('input');\n\n if (this.selected) {\n this.selected = false;\n if (optionCheckbox) {\n optionCheckbox.checked = false;\n }\n } else {\n this.selected = true;\n if (optionCheckbox) {\n optionCheckbox.checked = true;\n }\n }\n }\n }\n\n render() {\n return (\n <Host\n onClick={(ev) => {\n if (this.isMultiSelectOption) {\n ev.stopPropagation();\n }\n return this.selectOptionHandler({\n value: this.value,\n label: this.host.innerText,\n parent: ev.target.parentNode,\n });\n }}\n class={{\n 'selected': this.selected,\n 'sdds-dropdown-option-disabled': this.disabled,\n }}\n tabindex=\"-1\"\n aria-disabled={this.disabled}\n >\n {this.isMultiSelectOption && (\n <div class=\"sdds-checkbox-item sdds-option-checkbox\">\n <label class=\"sdds-form-label\">\n <input\n class=\"sdds-form-input\"\n type=\"checkbox\"\n checked={this.selected}\n disabled={this.disabled}\n />\n </label>\n </div>\n )}\n <span class=\"sdds-option-label\">\n <slot />\n </span>\n {!this.isMultiSelectOption && (\n <span class=\"sdds-option-checkmark\">\n <svg\n width=\"10\"\n height=\"7\"\n viewBox=\"0 0 10 7\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1 3L4 6L9 1\"\n stroke=\"currentColor\"\n stroke-width=\"1.25\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/tegel/p-b72c66f3.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as s,h as o,H as i,g as t}from"./p-1b74896d.js";import{c as e}from"./p-ec26fc38.js";const n=":host{box-sizing:border-box;min-width:160px;min-height:160px;color:var(--sdds-popover-canvas-color);background-color:var(--sdds-popover-canvas-background);padding:16px;box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:800;display:none}:host *{box-sizing:border-box}:host(.sdds-popover-canvas-show){opacity:1;display:block}";const d=class{constructor(o){s(this,o);this.selector="";this.referenceEl=undefined;this.show=false;this.placement="auto";this.offsetSkidding=0;this.offsetDistance=8;this.renderedShowValue=false;this.popperInstance=undefined;this.target=undefined}handleOutsideClick(){if(this.show){this.show=false}}componentDidLoad(){var s;this.target=(s=this.referenceEl)!==null&&s!==void 0?s:document.querySelector(this.selector);this.renderedShowValue=this.show;this.popperInstance=e(this.target,this.popoverCanvasElement,{placement:this.placement,modifiers:[{name:"offset",options:{offset:[this.offsetSkidding,this.offsetDistance]}}]});const o=()=>{this.show=true};const i=()=>{this.show=false};this.target.addEventListener("mousedown",(s=>{s.stopPropagation();if(this.show){i()}else{o()}}));this.popoverCanvasElement.addEventListener("mousemove",(s=>{s.stopPropagation()}));this.popoverCanvasElement.addEventListener("mousedown",(s=>{s.stopPropagation()}))}componentDidRender(){if(this.show&&!this.renderedShowValue){this.popperInstance.update()}this.renderedShowValue=this.show}disconnectedCallback(){var s;(s=this.popperInstance)===null\|\|s===void 0?void 0:s.destroy()}render(){return o(i,{class:`sdds-popover-canvas ${this.show?"sdds-popover-canvas-show":""}`},o("slot",null))}get popoverCanvasElement(){return t(this)}};d.style=n;export{d as sdds_popover_canvas};
2	- //# sourceMappingURL=p-b72c66f3.entry.js.map

package/dist/tegel/p-b72c66f3.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["popoverCanvasCss","PopoverCanvas","handleOutsideClick","this","show","componentDidLoad","target","_a","referenceEl","document","querySelector","selector","renderedShowValue","popperInstance","createPopper","popoverCanvasElement","placement","modifiers","name","options","offset","offsetSkidding","offsetDistance","showCanvas","hideCanvas","addEventListener","event","stopPropagation","componentDidRender","update","disconnectedCallback","destroy","render","h","Host","class"],"sources":["./src/components/popover-canvas/popover-canvas.scss?tag=sdds-popover-canvas&encapsulation=shadow","./src/components/popover-canvas/popover-canvas.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n@import '../../mixins/z-index';\n\n:host {\n @include sdds-box-sizing;\n\n min-width: 160px;\n min-height: 160px;\n color: var(--sdds-popover-canvas-color);\n background-color: var(--sdds-popover-canvas-background);\n padding: 16px;\n box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 10%);\n border-radius: 4px;\n z-index: z(tooltip);\n display: none;\n}\n\n:host(.sdds-popover-canvas-show) {\n opacity: 1;\n display: block;\n}\n","import { Component, Host, Element, Listen, h, Prop, State } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n tag: 'sdds-popover-canvas',\n styleUrl: 'popover-canvas.scss',\n shadow: true,\n})\nexport class PopoverCanvas {\n @Element() popoverCanvasElement!: HTMLElement;\n\n /** The CSS-selector for an element that will trigger the popover */\n @Prop() selector: string = '';\n\n /** Element that will trigger the popover (takes priority over selector) */\n @Prop() referenceEl: HTMLElement;\n\n /** Decides if the Popover Canvas should be visible from the start */\n @Prop() show: boolean = false;\n\n /** Decides the placement of the Popover Canvas */\n @Prop() placement: Placement = 'auto';\n\n /** Sets the offset skidding */\n @Prop() offsetSkidding: number = 0;\n\n /** Sets the offset distance */\n @Prop() offsetDistance: number = 8;\n\n @State() renderedShowValue: boolean = false;\n\n @State() popperInstance: Instance;\n\n @State() target: any;\n\n @Listen('mousedown', { target: 'window' })\n handleOutsideClick() {\n if (this.show) {\n this.show = false;\n }\n }\n\n componentDidLoad() {\n this.target = this.referenceEl ?? document.querySelector(this.selector);\n this.renderedShowValue = this.show;\n\n this.popperInstance = createPopper(this.target, this.popoverCanvasElement, {\n placement: this.placement,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [this.offsetSkidding, this.offsetDistance],\n },\n },\n ],\n });\n\n const showCanvas = () => {\n this.show = true;\n };\n\n const hideCanvas = () => {\n this.show = false;\n };\n\n this.target.addEventListener('mousedown', (event) => {\n event.stopPropagation();\n\n if (this.show) {\n hideCanvas();\n } else {\n showCanvas();\n }\n });\n\n this.popoverCanvasElement.addEventListener('mousemove', (event) => {\n event.stopPropagation();\n });\n\n this.popoverCanvasElement.addEventListener('mousedown', (event) => {\n event.stopPropagation();\n });\n }\n\n componentDidRender() {\n if (this.show && !this.renderedShowValue) {\n // Here we update the popper position since its position is wrong\n // before it is rendered.\n this.popperInstance.update();\n }\n this.renderedShowValue = this.show;\n }\n\n disconnectedCallback() {\n this.popperInstance?.destroy();\n }\n\n render() {\n return (\n <Host class={`sdds-popover-canvas ${this.show ? 'sdds-popover-canvas-show' : ''}`}>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"6FAAA,MAAMA,EAAmB,qX,MCSZC,EAAa,M,uCAIG,G,qCAMH,M,eAGO,O,oBAGE,E,oBAGA,E,uBAEK,M,oDAOtCC,qBACE,GAAIC,KAAKC,KAAM,CACbD,KAAKC,KAAO,K,EAIhBC,mB,MACEF,KAAKG,QAASC,EAAAJ,KAAKK,eAAW,MAAAD,SAAA,EAAAA,EAAIE,SAASC,cAAcP,KAAKQ,UAC9DR,KAAKS,kBAAoBT,KAAKC,KAE9BD,KAAKU,eAAiBC,EAAaX,KAAKG,OAAQH,KAAKY,qBAAsB,CACzEC,UAAWb,KAAKa,UAChBC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAACjB,KAAKkB,eAAgBlB,KAAKmB,qBAM3C,MAAMC,EAAa,KACjBpB,KAAKC,KAAO,IAAI,EAGlB,MAAMoB,EAAa,KACjBrB,KAAKC,KAAO,KAAK,EAGnBD,KAAKG,OAAOmB,iBAAiB,aAAcC,IACzCA,EAAMC,kBAEN,GAAIxB,KAAKC,KAAM,CACboB,G,KACK,CACLD,G,KAIJpB,KAAKY,qBAAqBU,iBAAiB,aAAcC,IACvDA,EAAMC,iBAAiB,IAGzBxB,KAAKY,qBAAqBU,iBAAiB,aAAcC,IACvDA,EAAMC,iBAAiB,G,CAI3BC,qBACE,GAAIzB,KAAKC,OAASD,KAAKS,kBAAmB,CAGxCT,KAAKU,eAAegB,Q,CAEtB1B,KAAKS,kBAAoBT,KAAKC,I,CAGhC0B,uB,OACEvB,EAAAJ,KAAKU,kBAAc,MAAAN,SAAA,SAAAA,EAAEwB,S,CAGvBC,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,uBAAuBhC,KAAKC,KAAO,2BAA6B,MAC3E6B,EAAA,a"}

package/dist/tegel/p-bd0af26a.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as s,h as t,H as l}from"./p-1b74896d.js";const n=":host{display:block}";const o=class{constructor(t){s(this,t);this.label=undefined;this.disabled=false;this.default=false}render(){return t(l,null,t("slot",null))}};o.style=n;export{o as sdds_inline_tab};
2	- //# sourceMappingURL=p-bd0af26a.entry.js.map

package/dist/tegel/p-bd0af26a.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["inlineTabCss","InlineTabsChild","render","h","Host"],"sources":["./src/components/tabs/inline-tabs-default/inline-tab/inline-tab.scss?tag=sdds-inline-tab&encapsulation=shadow","./src/components/tabs/inline-tabs-default/inline-tab/inline-tab.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-inline-tab',\n styleUrl: 'inline-tab.scss',\n shadow: true,\n})\nexport class InlineTabsChild {\n @Prop() label: string;\n\n @Prop() disabled: boolean = false;\n\n @Prop() default: boolean = false;\n\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAe,uB,MCORC,EAAe,M,4DAGE,M,aAED,K,CAE3BC,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,a"}

package/dist/tegel/p-c037d66f.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["tableToolbarCss","relevantTableProps","TableToolbar","tablePropsChangedEventListener","event","this","tableId","detail","changed","filter","changedProp","includes","forEach","Error","connectedCallback","tableEl","host","closest","componentWillLoad","tablePropName","searchFunction","searchTerm","currentTarget","value","toLowerCase","sddsTableSearchBar","parentElement","tableFilteringTerm","emit","length","classList","add","remove","render","h","Host","class","compactDesign","tableTitle","enableFiltering","type","onKeyUp","fill","xmlns","viewBox","d","name"],"sources":["./src/components/data-table/table-toolbar/table-toolbar.scss?tag=sdds-table-toolbar&encapsulation=shadow","./src/components/data-table/table-toolbar/table-toolbar.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host {\n @include sdds-box-sizing;\n\n display: table-caption;\n position: relative;\n background-color: var(--sdds-data-table-toolbar-background);\n color: var(--sdds-data-table-color);\n padding: 0 var(--sdds-spacing-element-16);\n height: 64px;\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n\n .sdds-table__upper-bar-flex {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: space-between;\n }\n\n .sdds-table__title {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n padding-top: var(--sdds-spacing-element-16);\n text-align: left;\n }\n\n .sdds-table__actionbar {\n display: flex;\n align-self: center;\n gap: 8px;\n }\n\n .sdds-table__searchbar {\n display: flex;\n align-self: center;\n position: relative;\n height: 40px;\n width: 40px;\n border-radius: 4px 4px 0 0;\n transition: background-color 250ms ease, width 250ms ease;\n overflow: hidden;\n background-color: transparent;\n\n &::after {\n content: '';\n width: 100%;\n height: 2px;\n position: absolute;\n bottom: 0;\n background-color: var(--sdds-blue-400);\n transform: scaleX(0);\n transition: transform 150ms ease;\n }\n\n &:focus-within {\n &::after {\n transform: scaleX(100%);\n }\n }\n\n &:focus-within,\n &.sdds-table__searchbar--active {\n width: 208px;\n background-color: var(--sdds-data-table-toolbar-searchbar-background);\n\n &:hover {\n background-color: var(--sdds-data-table-toolbar-searchbar-background);\n }\n }\n\n .sdds-table__searchbar-input {\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-data-table-color);\n z-index: 1;\n width: 100%;\n height: 100%;\n border: none;\n padding: 0 36px 0 16px;\n background-color: transparent;\n outline: none;\n cursor: pointer;\n\n :focus {\n background-color: var(--sdds-data-table-toolbar-searchbar-background);\n }\n }\n\n &:hover {\n background-color: var(--sdds-data-table-toolbar-searchbar-background-hover);\n }\n\n .sdds-table__searchbar-icon {\n z-index: 0;\n position: absolute;\n right: 9px;\n top: 9px;\n width: 20px;\n height: 20px;\n }\n }\n}\n\n:host(.sdds-table--compact) {\n height: 56px;\n}\n","import {\n Component,\n h,\n Host,\n Prop,\n Event,\n EventEmitter,\n Listen,\n State,\n Element,\n} from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n 'compactDesign',\n 'noMinWidth',\n 'verticalDividers',\n];\n\n@Component({\n tag: 'sdds-table-toolbar',\n styleUrl: 'table-toolbar.scss',\n shadow: true,\n})\nexport class TableToolbar {\n /** Adds title to the data-table */\n @Prop({ reflect: true }) tableTitle: string = '';\n\n /** Enables preview of searchbar */\n @Prop({ reflect: true }) enableFiltering: boolean = false;\n\n @State() verticalDividers: boolean = false;\n\n @State() compactDesign: boolean = false;\n\n @State() noMinWidth: boolean = false;\n\n @State() whiteBackground: boolean = false;\n\n @State() tableId: string = '';\n\n @Element() host: HTMLElement;\n\n tableEl: HTMLSddsTableElement;\n\n /** Used for sending users input to main parent <sdds-table> component */\n @Event({\n eventName: 'tableFilteringTerm',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n tableFilteringTerm: EventEmitter<any>;\n\n @Listen('tablePropsChangedEvent', { target: 'body' })\n tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n connectedCallback() {\n this.tableEl = this.host.closest('sdds-table');\n this.tableId = this.tableEl.tableId;\n }\n\n componentWillLoad() {\n relevantTableProps.forEach((tablePropName) => {\n this[tablePropName] = this.tableEl[tablePropName];\n });\n }\n\n searchFunction(event) {\n const searchTerm = event.currentTarget.value.toLowerCase();\n const sddsTableSearchBar = event.currentTarget.parentElement;\n\n this.tableFilteringTerm.emit([this.tableId, searchTerm]);\n\n if (searchTerm.length > 0) {\n sddsTableSearchBar.classList.add('sdds-table__searchbar--active');\n } else {\n sddsTableSearchBar.classList.remove('sdds-table__searchbar--active');\n }\n }\n\n render() {\n return (\n <Host class={this.compactDesign ? 'sdds-table--compact' : ''}>\n <div class=\"sdds-table__upper-bar-flex\">\n <caption class=\"sdds-table__title\">{this.tableTitle}</caption>\n <div class=\"sdds-table__actionbar\">\n {this.enableFiltering && (\n <div class=\"sdds-table__searchbar\">\n <input\n class=\"sdds-table__searchbar-input\"\n type=\"text\"\n onKeyUp={(event) => this.searchFunction(event)}\n />\n <span class=\"sdds-table__searchbar-icon\">\n <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12.942 1.985c-6.051 0-10.957 4.905-10.957 10.957 0 6.051 4.906 10.957 10.957 10.957 2.666 0 5.109-.952 7.008-2.534l8.332 8.331a1 1 0 1 0 1.414-1.414l-8.331-8.331a10.912 10.912 0 0 0 2.534-7.01c0-6.05-4.905-10.956-10.957-10.956ZM3.985 12.942a8.957 8.957 0 1 1 17.914 0 8.957 8.957 0 0 1-17.914 0Z\"\n fill=\"currentColor\"\n />\n </svg>\n </span>\n </div>\n )}\n <slot name=\"sdds-table__actionbar\" />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAkB,2nECaxB,MAAMC,EAAwD,CAC5D,gBACA,aACA,oB,MAQWC,EAAY,M,gGAEuB,G,qBAGM,M,sBAEf,M,mBAEH,M,gBAEH,M,qBAEK,M,aAET,E,CAgB3BC,+BAA+BC,GAC7B,GAAIC,KAAKC,UAAYF,EAAMG,OAAOD,QAAS,CACzCF,EAAMG,OAAOC,QACVC,QAAQC,GAAgBT,EAAmBU,SAASD,KACpDE,SAASF,IACR,UAAWL,KAAKK,KAAiB,YAAa,CAC5C,MAAM,IAAIG,MAAM,gCAAgCH,I,CAElDL,KAAKK,GAAeN,EAAMG,OAAOG,EAAY,G,EAKrDI,oBACET,KAAKU,QAAUV,KAAKW,KAAKC,QAAQ,cACjCZ,KAAKC,QAAUD,KAAKU,QAAQT,O,CAG9BY,oBACEjB,EAAmBW,SAASO,IAC1Bd,KAAKc,GAAiBd,KAAKU,QAAQI,EAAc,G,CAIrDC,eAAehB,GACb,MAAMiB,EAAajB,EAAMkB,cAAcC,MAAMC,cAC7C,MAAMC,EAAqBrB,EAAMkB,cAAcI,cAE/CrB,KAAKsB,mBAAmBC,KAAK,CAACvB,KAAKC,QAASe,IAE5C,GAAIA,EAAWQ,OAAS,EAAG,CACzBJ,EAAmBK,UAAUC,IAAI,gC,KAC5B,CACLN,EAAmBK,UAAUE,OAAO,gC,EAIxCC,SACE,OACEC,EAACC,EAAI,CAACC,MAAO/B,KAAKgC,cAAgB,sBAAwB,IACxDH,EAAA,OAAKE,MAAM,8BACTF,EAAA,WAASE,MAAM,qBAAqB/B,KAAKiC,YACzCJ,EAAA,OAAKE,MAAM,yBACR/B,KAAKkC,iBACJL,EAAA,OAAKE,MAAM,yBACTF,EAAA,SACEE,MAAM,8BACNI,KAAK,OACLC,QAAUrC,GAAUC,KAAKe,eAAehB,KAE1C8B,EAAA,QAAME,MAAM,8BACVF,EAAA,OAAKQ,KAAK,OAAOC,MAAM,6BAA6BC,QAAQ,aAC1DV,EAAA,oBACY,UAAS,YACT,UACVW,EAAE,2SACFH,KAAK,oBAMfR,EAAA,QAAMY,KAAK,4B"}

package/dist/tegel/p-c5b3ef65.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["spinnerCss","Spinner","render","h","role","class","this","size","variant"],"sources":["./src/components/spinner/spinner.scss?tag=sdds-spinner","./src/components/spinner/spinner.tsx"],"sourcesContent":["@import './spinner-theme-vars.scss';\n@import '../../mixins/box-sizing';\n\n:host {\n @include sdds-box-sizing;\n\n display: block;\n}\n\n.sdds-spinner-svg {\n width: calc(var(--sdds-spinner-radius) * 2);\n height: calc(var(--sdds-spinner-radius) * 2);\n transform: scale(-1, 1) rotate(-90deg);\n\n &-xs {\n --sdds-spinner-radius: var(--sdds-spinner-radius-xs);\n --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-xs);\n --sdds-spinner-animation-speed: var(--sdds-spinner-speed);\n }\n\n &-sm {\n --sdds-spinner-radius: var(--sdds-spinner-radius-sm);\n --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-sm);\n --sdds-spinner-animation-speed: var(--sdds-spinner-speed);\n }\n\n &-md {\n --sdds-spinner-radius: var(--sdds-spinner-radius-md);\n --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-md);\n --sdds-spinner-animation-speed: var(--sdds-spinner-speed);\n }\n\n &-lg {\n --sdds-spinner-radius: var(--sdds-spinner-radius-lg);\n --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-lg);\n --sdds-spinner-animation-speed: var(--sdds-spinner-speed-lg);\n }\n}\n\n.sdds-spinner-circle {\n cx: var(--sdds-spinner-radius);\n cy: var(--sdds-spinner-radius);\n r: calc(var(--sdds-spinner-radius) - (var(--sdds-spinner-stroke-width) / 2));\n stroke-width: var(--sdds-spinner-stroke-width);\n fill: none;\n\n //Calculation for lenght of dash\n --sdds-spinner-stroke-dash: calc((2 * var(--PI)) * var(--sdds-spinner-radius));\n\n stroke-dasharray: var(--sdds-spinner-stroke-dash);\n stroke-width: var(--sdds-spinner-stroke-width);\n animation: dash var(--sdds-spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;\n\n &-standard {\n stroke: var(--sdds-spinner-background);\n }\n\n &-inverted {\n stroke: var(--sdds-spinner-background-inverted);\n }\n}\n\n@keyframes dash {\n from {\n stroke-dashoffset: calc(-1 * var(--sdds-spinner-stroke-dash));\n }\n\n to {\n stroke-dashoffset: var(--sdds-spinner-stroke-dash);\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-spinner',\n styleUrl: 'spinner.scss',\n shadow: false,\n})\nexport class Spinner {\n /** Size of spinner */\n @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'lg';\n\n /** Variant of spinner */\n @Prop() variant: 'standard' | 'inverted' = 'standard';\n\n render() {\n return (\n <div aria-live=\"assertive\" role=\"status\" aria-label=\"loading\">\n <svg class={`sdds-spinner-svg sdds-spinner-svg-${this.size}`} aria-hidden=\"true\">\n <circle class={`sdds-spinner-circle sdds-spinner-circle-${this.variant}`} />\n </svg>\n </div>\n );\n }\n}\n"],"mappings":"2CAAA,MAAMA,EAAa,gxE,MCONC,EAAO,M,mCAEwB,K,aAGC,U,CAE3CC,SACE,OACEC,EAAA,mBAAe,YAAYC,KAAK,SAAQ,aAAY,WAClDD,EAAA,OAAKE,MAAO,qCAAqCC,KAAKC,OAAM,cAAc,QACxEJ,EAAA,UAAQE,MAAO,2CAA2CC,KAAKE,a"}

package/dist/tegel/p-cea5bfcd.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as s,c as t,h as d,H as e,g as a}from"./p-1b74896d.js";const o=":host{box-sizing:border-box;display:contents}:host *{box-sizing:border-box}:host .sdds-table__row,:host .sdds-table__row-extend{display:table-row;border-bottom:1px solid var(--sdds-data-table-divider);background-color:var(--sdds-data-table-body-row-background);transition:background-color 200ms ease;color:var(--sdds-data-table-color)}:host .sdds-table__row:hover,:host .sdds-table__row-extend:hover{background-color:var(--sdds-data-table-body-row-background-hover)}:host .sdds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:46px;cursor:pointer;padding:0 16px;position:relative}:host .sdds-table__expand-control-container .sdds-table__expand-input{all:unset;position:absolute;top:0;left:0;width:100%;height:100%;position:absolute;cursor:pointer}:host .sdds-table__expand-control-container .sdds-table__expand-input:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .sdds-table__expand-control-container .sdds-expendable-row-icon{height:16px;width:16px;transition:transform 200ms ease;transform:rotate(0)}:host .sdds-table__row-expand{display:none;transition:background-color 200ms ease}:host .sdds-table__row-expand .sdds-table__cell-expand{padding:16px 16px 16px 66px;color:var(--sdds-data-table-color)}:host(.sdds-table__row-expand--active) .sdds-table__row{background-color:var(--sdds-data-table-body-row-background-selected)}:host(.sdds-table__row-expand--active) .sdds-table__expand-control-container .sdds-expendable-row-icon{transform:rotate(180deg)}:host(.sdds-table__row-expand--active) .sdds-table__row-expand{background-color:var(--sdds-data-table-body-row-background-selected);display:table-row}:host(.sdds-table__compact) .sdds-table__expand-control-container{height:30px}:host(.sdds-table__compact) .sdds-table__row-expand .sdds-table__cell-expand{padding:8px 16px 8px 66px}:host(.sdds-table--divider) .sdds-table__cell--expand{border-right:1px solid var(--sdds-data-table-divider)}";const l=["verticalDividers","compactDesign","noMinWidth","modeVariant"];const n=class{constructor(d){s(this,d);this.singleRowExpandedEvent=t(this,"singleRowExpandedEvent",7);this.runPaginationEvent=t(this,"runPaginationEvent",7);this.colSpan=null;this.isExpanded=false;this.tableId="";this.columnsNumber=null;this.verticalDividers=false;this.compactDesign=false;this.noMinWidth=false;this.modeVariant=null}tablePropsChangedEventListener(s){if(this.tableId===s.detail.tableId){s.detail.changed.filter((s=>l.includes(s))).forEach((t=>{if(typeof this[t]==="undefined"){throw new Error(`Table prop is not supported: ${t}`)}this[t]=s.detail[t]}))}}connectedCallback(){this.tableEl=this.host.closest("sdds-table");this.tableId=this.tableEl.tableId}componentWillLoad(){l.forEach((s=>{this[s]=this.tableEl[s]}))}componentDidLoad(){this.runPaginationEvent.emit(this.tableId)}componentWillRender(){if(this.colSpan!==null){this.columnsNumber=this.colSpan}else{this.columnsNumber=this.tableEl.querySelector("sdds-table-header").childElementCount+1}}sendValue(){this.singleRowExpandedEvent.emit([this.tableId,this.isExpanded])}onChangeHandler(s){this.isExpanded=s.currentTarget.checked===true;this.sendValue()}render(){return d(e,{class:{"sdds-table__row":true,"sdds-table__row-expand--active":this.isExpanded,"sdds-table__compact":this.compactDesign,"sdds-table--divider":this.verticalDividers,"sdds-mode-variant-primary":this.modeVariant==="primary","sdds-mode-variant-secondary":this.modeVariant==="secondary"}},d("tr",{class:"sdds-table__row"},d("td",{class:"sdds-table__cell sdds-table__cell--expand"},d("label",{class:"sdds-table__expand-control-container"},d("input",{class:"sdds-table__expand-input",type:"checkbox",onChange:s=>this.onChangeHandler(s),checked:this.isExpanded}),d("span",{class:"sdds-expendable-row-icon"},d("svg",{fill:"none",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32"},d("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z",fill:"currentColor"}))))),d("slot",null)),d("tr",{class:"sdds-table__row-expand"},d("td",{class:"sdds-table__cell-expand",colSpan:this.columnsNumber},d("slot",{name:"expand-row"}))))}get host(){return a(this)}};n.style=o;export{n as sdds_table_body_row_expandable};
2	- //# sourceMappingURL=p-cea5bfcd.entry.js.map

package/dist/tegel/p-cea5bfcd.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["tableBodyRowExpandableCss","relevantTableProps","TableBodyRowExpandable","tablePropsChangedEventListener","event","this","tableId","detail","changed","filter","changedProp","includes","forEach","Error","connectedCallback","tableEl","host","closest","componentWillLoad","tablePropName","componentDidLoad","runPaginationEvent","emit","componentWillRender","colSpan","columnsNumber","querySelector","childElementCount","sendValue","singleRowExpandedEvent","isExpanded","onChangeHandler","currentTarget","checked","render","h","Host","class","compactDesign","verticalDividers","modeVariant","type","onChange","fill","xmlns","viewBox","d","name"],"sources":["./src/components/data-table/table-body-row-expandable/table-body-row-expandable.scss?tag=sdds-table-body-row-expandable&encapsulation=shadow","./src/components/data-table/table-body-row-expandable/table-body-row-expandable.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n@import '../../../mixins/focus-state';\n\n:host {\n @include sdds-box-sizing;\n\n display: contents;\n\n .sdds-table__row,\n .sdds-table__row-extend {\n display: table-row;\n border-bottom: 1px solid var(--sdds-data-table-divider);\n background-color: var(--sdds-data-table-body-row-background);\n transition: background-color 200ms ease;\n color: var(--sdds-data-table-color);\n }\n\n .sdds-table__row:hover,\n .sdds-table__row-extend:hover {\n background-color: var(--sdds-data-table-body-row-background-hover);\n }\n\n .sdds-table__expand-control-container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 46px;\n cursor: pointer;\n padding: 0 16px;\n position: relative;\n\n .sdds-table__expand-input {\n all: unset;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n position: absolute;\n cursor: pointer;\n\n &:focus {\n @include sdds-focus-state;\n }\n }\n\n .sdds-expendable-row-icon {\n height: 16px;\n width: 16px;\n transition: transform 200ms ease;\n transform: rotate(0);\n }\n }\n\n .sdds-table__row-expand {\n display: none;\n transition: background-color 200ms ease;\n\n .sdds-table__cell-expand {\n padding: 16px 16px 16px 66px;\n color: var(--sdds-data-table-color);\n }\n }\n}\n\n:host(.sdds-table__row-expand--active) {\n .sdds-table__row {\n background-color: var(--sdds-data-table-body-row-background-selected);\n }\n\n .sdds-table__expand-control-container {\n .sdds-expendable-row-icon {\n transform: rotate(180deg);\n }\n }\n\n .sdds-table__row-expand {\n background-color: var(--sdds-data-table-body-row-background-selected);\n display: table-row;\n }\n}\n\n// test\n:host(.sdds-table__compact) {\n .sdds-table__expand-control-container {\n height: 30px;\n }\n\n .sdds-table__row-expand {\n .sdds-table__cell-expand {\n padding: 8px 16px 8px 66px;\n }\n }\n}\n\n:host(.sdds-table--divider) {\n .sdds-table__cell--expand {\n border-right: 1px solid var(--sdds-data-table-divider);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n 'verticalDividers',\n 'compactDesign',\n 'noMinWidth',\n 'modeVariant',\n];\n@Component({\n tag: 'sdds-table-body-row-expandable',\n styleUrl: 'table-body-row-expandable.scss',\n shadow: true,\n})\nexport class TableBodyRowExpandable {\n /** In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too */\n @Prop() colSpan: number = null;\n\n @State() isExpanded: boolean = false;\n\n @State() tableId: string = '';\n\n @State() columnsNumber: number = null;\n\n @State() verticalDividers: boolean = false;\n\n @State() compactDesign: boolean = false;\n\n @State() noMinWidth: boolean = false;\n\n @State() modeVariant: 'primary' | 'secondary' = null;\n\n @Element() host: HTMLElement;\n\n tableEl: HTMLSddsTableElement;\n\n /** Sends out status of itw own expended status feature to table header component */\n @Event({\n eventName: 'singleRowExpandedEvent',\n bubbles: true,\n cancelable: true,\n composed: true,\n })\n singleRowExpandedEvent: EventEmitter<any>;\n\n /** Event that triggers pagination function. Needed as first rows have to be rendered in order for pagination to run */\n @Event({\n eventName: 'runPaginationEvent',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n runPaginationEvent: EventEmitter<string>;\n\n @Listen('tablePropsChangedEvent', { target: 'body' })\n tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n connectedCallback() {\n this.tableEl = this.host.closest('sdds-table');\n this.tableId = this.tableEl.tableId;\n }\n\n componentWillLoad() {\n relevantTableProps.forEach((tablePropName) => {\n this[tablePropName] = this.tableEl[tablePropName];\n });\n }\n\n componentDidLoad() {\n this.runPaginationEvent.emit(this.tableId);\n }\n\n componentWillRender() {\n if (this.colSpan !== null) {\n this.columnsNumber = this.colSpan;\n } else {\n this.columnsNumber = this.tableEl.querySelector('sdds-table-header').childElementCount + 1;\n }\n }\n\n sendValue() {\n this.singleRowExpandedEvent.emit([this.tableId, this.isExpanded]);\n }\n\n onChangeHandler(event) {\n this.isExpanded = event.currentTarget.checked === true;\n this.sendValue();\n }\n\n render() {\n return (\n <Host\n class={{\n 'sdds-table__row': true,\n 'sdds-table__row-expand--active': this.isExpanded,\n 'sdds-table__compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-mode-variant-primary': this.modeVariant === 'primary',\n 'sdds-mode-variant-secondary': this.modeVariant === 'secondary',\n }}\n >\n <tr class=\"sdds-table__row\">\n <td class=\"sdds-table__cell sdds-table__cell--expand\">\n <label class=\"sdds-table__expand-control-container\">\n <input\n class=\"sdds-table__expand-input\"\n type=\"checkbox\"\n onChange={(event) => this.onChangeHandler(event)}\n checked={this.isExpanded}\n />\n <span class=\"sdds-expendable-row-icon\">\n <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z\"\n fill=\"currentColor\"\n />\n </svg>\n </span>\n </label>\n </td>\n <slot />\n </tr>\n\n <tr class=\"sdds-table__row-expand\">\n <td class=\"sdds-table__cell-expand\" colSpan={this.columnsNumber}>\n <slot name=\"expand-row\" />\n </td>\n </tr>\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAA4B,+6DCalC,MAAMC,EAAwD,CAC5D,mBACA,gBACA,aACA,e,MAOWC,EAAsB,M,4JAEP,K,gBAEK,M,aAEJ,G,mBAEM,K,sBAEI,M,mBAEH,M,gBAEH,M,iBAEiB,I,CAyBhDC,+BAA+BC,GAC7B,GAAIC,KAAKC,UAAYF,EAAMG,OAAOD,QAAS,CACzCF,EAAMG,OAAOC,QACVC,QAAQC,GAAgBT,EAAmBU,SAASD,KACpDE,SAASF,IACR,UAAWL,KAAKK,KAAiB,YAAa,CAC5C,MAAM,IAAIG,MAAM,gCAAgCH,I,CAElDL,KAAKK,GAAeN,EAAMG,OAAOG,EAAY,G,EAKrDI,oBACET,KAAKU,QAAUV,KAAKW,KAAKC,QAAQ,cACjCZ,KAAKC,QAAUD,KAAKU,QAAQT,O,CAG9BY,oBACEjB,EAAmBW,SAASO,IAC1Bd,KAAKc,GAAiBd,KAAKU,QAAQI,EAAc,G,CAIrDC,mBACEf,KAAKgB,mBAAmBC,KAAKjB,KAAKC,Q,CAGpCiB,sBACE,GAAIlB,KAAKmB,UAAY,KAAM,CACzBnB,KAAKoB,cAAgBpB,KAAKmB,O,KACrB,CACLnB,KAAKoB,cAAgBpB,KAAKU,QAAQW,cAAc,qBAAqBC,kBAAoB,C,EAI7FC,YACEvB,KAAKwB,uBAAuBP,KAAK,CAACjB,KAAKC,QAASD,KAAKyB,Y,CAGvDC,gBAAgB3B,GACdC,KAAKyB,WAAa1B,EAAM4B,cAAcC,UAAY,KAClD5B,KAAKuB,W,CAGPM,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACL,kBAAmB,KACnB,iCAAkChC,KAAKyB,WACvC,sBAAuBzB,KAAKiC,cAC5B,sBAAuBjC,KAAKkC,iBAC5B,4BAA6BlC,KAAKmC,cAAgB,UAClD,8BAA+BnC,KAAKmC,cAAgB,cAGtDL,EAAA,MAAIE,MAAM,mBACRF,EAAA,MAAIE,MAAM,6CACRF,EAAA,SAAOE,MAAM,wCACXF,EAAA,SACEE,MAAM,2BACNI,KAAK,WACLC,SAAWtC,GAAUC,KAAK0B,gBAAgB3B,GAC1C6B,QAAS5B,KAAKyB,aAEhBK,EAAA,QAAME,MAAM,4BACVF,EAAA,OAAKQ,KAAK,OAAOC,MAAM,6BAA6BC,QAAQ,aAC1DV,EAAA,oBACY,UAAS,YACT,UACVW,EAAE,oKACFH,KAAK,qBAMfR,EAAA,cAGFA,EAAA,MAAIE,MAAM,0BACRF,EAAA,MAAIE,MAAM,0BAA0Bb,QAASnB,KAAKoB,eAChDU,EAAA,QAAMY,KAAK,iB"}

package/dist/tegel/p-d3d8828b.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as s,c as e,h as d}from"./p-1b74896d.js";const o='.sdds-toggle-webcomponent.sc-sdds-toggle .toggle-headline.sc-sdds-toggle{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-toggle-headline);margin-bottom:12px}.sdds-toggle-webcomponent.sc-sdds-toggle .toggle-headline.disabled.sc-sdds-toggle{color:var(--sdds-toggle-headline-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle{margin:0;width:44px;height:24px;position:relative;display:inline-block;vertical-align:middle}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle::after,.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle::before{content:"";position:absolute;box-sizing:border-box;transition:all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle::before{width:44px;height:24px;border-radius:16px;background-color:var(--sdds-toggle-off-slider);left:0}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle::after{width:16px;height:16px;background-color:var(--sdds-toggle-switch);border-radius:50%;left:4px;top:4px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:focus{outline:none}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:focus::before{background-color:var(--sdds-toggle-off-slider-focus);border:1px solid var(--sdds-toggle-off-border-focus)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:checked::before{background-color:var(--sdds-toggle-on-slider);border:1px solid var(--sdds-toggle-on-border-focus)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:checked::after{left:24px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:disabled::before{background-color:var(--sdds-toggle-slider-disabled);border:1px solid var(--sdds-toggle-slider-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:disabled::after{background-color:var(--sdds-toggle-switch-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:disabled:checked::before{background-color:var(--sdds-toggle-on-slider-disabled);border:1px solid var(--sdds-toggle-on-slider-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:disabled:checked::after{background-color:var(--sdds-toggle-switch-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle{width:28px;height:16px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle::before{width:28px;height:16px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle::after{width:8px;height:8px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle:checked::before{background-color:var(--sdds-toggle-on-slider)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle:checked::after{left:16px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle:disabled::before{background-color:var(--sdds-toggle-slider-disabled);border:1px solid var(--sdds-toggle-slider-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle:disabled::after{background-color:var(--sdds-toggle-switch-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle label.sc-sdds-toggle{display:inline-block;vertical-align:middle;font:var(--sdds-detail-01);letter-spacing:var(--sdds-detail-01-ls);color:var(--sdds-toggle-label-color);padding-left:8px}.sdds-toggle-webcomponent.sc-sdds-toggle label.disabled.sc-sdds-toggle{color:var(--sdds-toggle-label-color-disabled)}';const t=class{constructor(d){s(this,d);this.sddsToggleChangeEvent=e(this,"sddsToggleChangeEvent",7);this.checked=false;this.required=false;this.ariaLabelledby=undefined;this.ariaDescribedby=undefined;this.size="lg";this.name=undefined;this.label=undefined;this.headline=undefined;this.disabled=false;this.toggleId=crypto.randomUUID()}async toggle(){this.checked=!this.checked;return{toggleId:this.toggleId,checked:this.checked}}render(){return d("div",{class:"sdds-toggle-webcomponent"},this.headline&&d("div",{class:`toggle-headline ${this.disabled?"disabled":""}`},this.headline),d("input",{"aria-labelledby":this.ariaLabelledby,"aria-describedby":this.ariaDescribedby,onChange:()=>{this.checked=!this.checked;this.sddsToggleChangeEvent.emit({toggleId:this.toggleId,checked:this.checked})},class:`${this.size}`,checked:this.checked,disabled:this.disabled,required:this.required,type:"checkbox",name:this.name,id:this.toggleId,role:"switch"}),d("label",{class:`${this.disabled?"disabled":""}`,htmlFor:this.toggleId},d("slot",null)))}};t.style=o;export{t as sdds_toggle};
2	- //# sourceMappingURL=p-d3d8828b.entry.js.map

package/dist/tegel/p-d3d8828b.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["sddsToggleCss","SddsToggle","crypto","randomUUID","async","this","checked","toggleId","render","h","class","headline","disabled","ariaLabelledby","ariaDescribedby","onChange","sddsToggleChangeEvent","emit","size","required","type","name","id","role","htmlFor"],"sources":["./src/components/toggle/sdds-toggle.scss?tag=sdds-toggle&encapsulation=scoped","./src/components/toggle/sdds-toggle.tsx"],"sourcesContent":[".sdds-toggle-webcomponent {\n .toggle-headline {\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-toggle-headline);\n margin-bottom: 12px;\n\n &.disabled {\n color: var(--sdds-toggle-headline-disabled);\n }\n }\n\n input[type='checkbox'] {\n margin: 0;\n width: 44px;\n height: 24px;\n position: relative;\n display: inline-block;\n vertical-align: middle;\n\n &::after,\n &::before {\n content: '';\n position: absolute;\n box-sizing: border-box;\n transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);\n }\n\n &::before {\n /* Slider */\n width: 44px;\n height: 24px;\n border-radius: 16px;\n background-color: var(--sdds-toggle-off-slider);\n left: 0;\n }\n\n /* Switch */\n &::after {\n width: 16px;\n height: 16px;\n background-color: var(--sdds-toggle-switch);\n border-radius: 50%;\n left: 4px;\n top: 4px;\n }\n\n &:focus {\n outline: none;\n\n &::before {\n background-color: var(--sdds-toggle-off-slider-focus);\n border: 1px solid var(--sdds-toggle-off-border-focus);\n }\n }\n\n &:checked {\n &::before {\n background-color: var(--sdds-toggle-on-slider);\n border: 1px solid var(--sdds-toggle-on-border-focus);\n }\n\n &::after {\n left: calc(44px - 20px);\n }\n }\n\n &:disabled {\n &::before {\n background-color: var(--sdds-toggle-slider-disabled);\n border: 1px solid var(--sdds-toggle-slider-disabled);\n }\n\n &::after {\n background-color: var(--sdds-toggle-switch-disabled);\n }\n }\n\n &:disabled:checked {\n &::before {\n background-color: var(--sdds-toggle-on-slider-disabled);\n border: 1px solid var(--sdds-toggle-on-slider-disabled);\n }\n\n &::after {\n background-color: var(--sdds-toggle-switch-disabled);\n }\n }\n\n &.sm {\n width: 28px;\n height: 16px;\n\n &::before {\n width: 28px;\n height: 16px;\n }\n\n &::after {\n width: 8px;\n height: 8px;\n }\n\n &:checked {\n &::before {\n background-color: var(--sdds-toggle-on-slider);\n }\n\n &::after {\n left: calc(44px - 28px); // slider width - switch width - padding\n }\n }\n\n &:disabled {\n &::before {\n background-color: var(--sdds-toggle-slider-disabled);\n border: 1px solid var(--sdds-toggle-slider-disabled);\n }\n\n &::after {\n background-color: var(--sdds-toggle-switch-disabled);\n }\n }\n }\n }\n\n label {\n display: inline-block;\n vertical-align: middle;\n font: var(--sdds-detail-01);\n letter-spacing: var(--sdds-detail-01-ls);\n color: var(--sdds-toggle-label-color);\n padding-left: 8px;\n\n &.disabled {\n color: var(--sdds-toggle-label-color-disabled);\n }\n }\n}\n","import { Component, h, Prop, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n tag: 'sdds-toggle',\n styleUrl: 'sdds-toggle.scss',\n shadow: false,\n scoped: true,\n})\nexport class SddsToggle {\n /** Sets the toggle as checked */\n @Prop({ reflect: true }) checked: boolean = false;\n\n /** Make the toggle required */\n @Prop() required: boolean = false;\n\n /** Aria-labelledby for the toggles input element. */\n @Prop() ariaLabelledby: string;\n\n /** Aria-describedby for the toggles input element. */\n @Prop() ariaDescribedby: string;\n\n /** Size of the toggle */\n @Prop() size: 'sm' | 'lg' = 'lg';\n\n /** Name of the toggles input element */\n @Prop() name: string;\n\n /** Label for the toggle */\n @Prop() label: string;\n\n /** Headline for the toggle */\n @Prop() headline: string;\n\n /** Sets the toggle in a disabled state */\n @Prop() disabled: boolean = false;\n\n /** ID of the toggles input element, if not specifed it's randomly generated */\n @Prop() toggleId: string = crypto.randomUUID();\n\n /** Toggles the toggle. */\n @Method()\n async toggle() {\n this.checked = !this.checked;\n return {\n toggleId: this.toggleId,\n checked: this.checked,\n };\n }\n\n /** Sends unique toggle identifier and status when it is toggled. */\n @Event({\n eventName: 'sddsToggleChangeEvent',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsToggleChangeEvent: EventEmitter<{\n toggleId: string;\n checked: boolean;\n }>;\n\n render() {\n return (\n <div class=\"sdds-toggle-webcomponent\">\n {this.headline && (\n <div class={`toggle-headline ${this.disabled ? 'disabled' : ''}`}>{this.headline}</div>\n )}\n <input\n aria-labelledby={this.ariaLabelledby}\n aria-describedby={this.ariaDescribedby}\n onChange={() => {\n this.checked = !this.checked;\n this.sddsToggleChangeEvent.emit({\n toggleId: this.toggleId,\n checked: this.checked,\n });\n }}\n class={`${this.size}`}\n checked={this.checked}\n disabled={this.disabled}\n required={this.required}\n type=\"checkbox\"\n name={this.name}\n id={this.toggleId}\n role=\"switch\"\n />\n <label class={`${this.disabled ? 'disabled' : ''}`} htmlFor={this.toggleId}>\n <slot></slot>\n </label>\n </div>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAgB,wmH,MCQTC,EAAU,M,mGAEuB,M,cAGhB,M,uEASA,K,+EAYA,M,cAGDC,OAAOC,Y,CAIlCC,eACEC,KAAKC,SAAWD,KAAKC,QACrB,MAAO,CACLC,SAAUF,KAAKE,SACfD,QAASD,KAAKC,Q,CAgBlBE,SACE,OACEC,EAAA,OAAKC,MAAM,4BACRL,KAAKM,UACJF,EAAA,OAAKC,MAAO,mBAAmBL,KAAKO,SAAW,WAAa,MAAOP,KAAKM,UAE1EF,EAAA,2BACmBJ,KAAKQ,eAAc,mBAClBR,KAAKS,gBACvBC,SAAU,KACRV,KAAKC,SAAWD,KAAKC,QACrBD,KAAKW,sBAAsBC,KAAK,CAC9BV,SAAUF,KAAKE,SACfD,QAASD,KAAKC,SACd,EAEJI,MAAO,GAAGL,KAAKa,OACfZ,QAASD,KAAKC,QACdM,SAAUP,KAAKO,SACfO,SAAUd,KAAKc,SACfC,KAAK,WACLC,KAAMhB,KAAKgB,KACXC,GAAIjB,KAAKE,SACTgB,KAAK,WAEPd,EAAA,SAAOC,MAAO,GAAGL,KAAKO,SAAW,WAAa,KAAMY,QAASnB,KAAKE,UAChEE,EAAA,c"}

package/dist/tegel/p-d42d3400.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as s,h as i,H as t,g as n}from"./p-1b74896d.js";const a=':host{outline:0 !important;box-sizing:border-box}:host {box-sizing:border-box}.sdds-inline-tabs{overflow:hidden;outline:0}.sdds-inline-tabs-header{position:relative}.sdds-inline-tabs-main{background-color:var(--sdds-inline-tabs-main-background);padding:24px 24px 48px}.sdds-inline-tabs-wrapper{display:flex;overflow-x:scroll;scrollbar-width:none}.sdds-inline-tabs-wrapper::-webkit-scrollbar{display:none}.sdds-inline-tabs--forward,.sdds-inline-tabs--back{cursor:pointer;width:48px;height:100%;border:0;position:absolute;top:0;background-color:var(--sdds-inline-tabs-scroll-btn-background);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sdds-inline-tabs--forward__show,.sdds-inline-tabs--back__show{opacity:1;pointer-events:all}.sdds-inline-tabs--forward:hover,.sdds-inline-tabs--back:hover{background-color:var(--sdds-inline-tabs-scroll-btn-background-hover)}.sdds-inline-tabs--forward:active,.sdds-inline-tabs--back:active{background-color:var(--sdds-inline-tabs-scroll-btn-background-active)}.sdds-inline-tabs--forward:focus,.sdds-inline-tabs--back:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-inline-tabs--forward svg,.sdds-inline-tabs--back svg{fill:var(--sdds-inline-tabs-scroll-btn-color)}.sdds-inline-tabs--back{left:0}.sdds-inline-tabs--forward{right:0}.sdds-inline-tabs--tab{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);cursor:pointer;border:0;color:var(--sdds-inline-tabs-tab-color);background-color:var(--sdds-inline-tabs-tab-background);padding:16px;min-width:142px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out;white-space:nowrap;flex-shrink:0;text-align:left;outline:none}.sdds-inline-tabs--tab>{opacity:0.6}.sdds-inline-tabs--tab:not(:last-child){border-right:1px solid var(--sdds-inline-tabs-tab-border-color)}.sdds-inline-tabs--tab::after{content:" ";position:absolute;top:0;right:0;left:0;margin-left:auto;width:0;margin-right:auto;height:2px;background-color:var(--sdds-inline-tabs-tab-indicator-background);transition:width 0.15s ease-in-out}.sdds-inline-tabs--tab:hover{background-color:var(--sdds-inline-tabs-tab-background-hover);color:var(--sdds-inline-tabs-tab-color-hover);text-decoration:none}.sdds-inline-tabs--tab:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-inline-tabs--tab__active{background-color:var(--sdds-inline-tabs-tab-background-active);color:var(--sdds-inline-tabs-tab-color-active);cursor:initial;border-right:1px solid transparent !important}.sdds-inline-tabs--tab__active>{opacity:1}.sdds-inline-tabs--tab__active:hover{background-color:var(--sdds-inline-tabs-tab-background-active)}.sdds-inline-tabs--tab__active::after{width:calc(100% + 2px);left:-1px;background-color:var(--sdds-inline-tabs-tab-indicator-background-active)}.sdds-inline-tabs--tab__active::before{content:" ";background-color:var(--sdds-inline-tabs-tab-background-active);width:1px;top:0;bottom:0;left:-1px;display:block;position:absolute}.sdds-inline-tabs--tab__active:first-child:focus::before{left:0}.sdds-inline-tabs--tab:disabled,.sdds-inline-tabs--tab__disabled{cursor:initial;color:var(--sdds-navigation-tabs-tab-color-disabled);pointer-events:none}.sdds-inline-tabs--tab:disabled>,.sdds-inline-tabs--tab__disabled>*{opacity:0.16}.sdds-inline-tabs--tab__active{background-color:var(--sdds-inline-tabs-tab-background-active)}.sdds-inline-tabs-main{background-color:var(--sdds-inline-tabs-main-background)}';function e(s){return s.replace(/\s/g,"-").replace(/[^a-z0-9-]/gi,"").toLowerCase()}const d=class{constructor(i){s(this,i);this.startingTab=null;this.navWrapperElement=null;this.tabWrapperElement=null;this.componentWidth=0;this.buttonsWidth=0;this.scrollWidth=0;this.useAutoHeight=false;this.defaultTab="";this.autoHeight=false;this.modeVariant=null;this.tabs=[];this.buttonWidth=0;this.tabHeight=0;this.showLeftScroll=false;this.showRightScroll=false}async showTab(s){this.switchToTab(s)}componentWillLoad(){this.initComponent()}initComponent(s=true){if(this.autoHeight){this.useAutoHeight=true}this.tabs=Array.from(this.host.children).map(((s,i)=>{const t=s.label?s.label:s.getAttribute("name")\|\|`Tab ${i+1}`;const n=e(t);if(s.default){this.startingTab=n}let a=false;if(s.disabled){a=true}return{name:t,key:n,element:s,disabled:a,visible:true,initialDisplay:window.getComputedStyle(s).display}}));if(s){this.setInitialState()}this.tabs=Array.from(this.tabs)}calculateButtonWidth(){const s=this.navWrapperElement.querySelectorAll("button.sdds-inline-tabs--tab");let i=0;Array.from(s).forEach((s=>{const t=s.style.width;s.style.width="";const n=s.clientWidth;s.style.width=t;if(s.clientWidth>i){i=n}}));this.buttonWidth=i}calculateTabHeight(){let s=0;this.tabs.forEach(((i,t)=>{const n=this.tabs[t];const a=n.element.style.display;n.element.style.display="";const e=n.element.clientHeight;n.element.style.display=a;if(e>s){s=e}}));this.tabHeight=s}componentDidRender(){this.calculateTabHeight();this.calculateButtonWidth()}componentDidLoad(){const s=new MutationObserver((()=>{const s=this.tabs.find((s=>s.visible));this.initComponent(false);this.calculateTabHeight();this.calculateButtonWidth();if(s){this.switchToTab(s.key)}}));const i=new ResizeObserver((s=>{s.forEach((s=>{const i=s.contentRect.width;let t=0;const n=s.target.querySelectorAll("button.sdds-inline-tabs--tab");Array.from(n).forEach((s=>{t+=s.clientWidth}));this.componentWidth=i;this.buttonsWidth=t;this.scrollWidth=t-i;if(this.buttonsWidth>this.componentWidth){this.evaluateScrollButtons()}else{this.showLeftScroll=false;this.showRightScroll=false}this.calculateTabHeight()}))}));s.observe(this.host,{childList:true,attributes:true});i.observe(this.navWrapperElement);this.calculateButtonWidth();this.calculateTabHeight()}setInitialState(){if(this.defaultTab){this.startingTab=this.defaultTab}this.tabs.forEach(((s,i)=>{if(this.startingTab){if(s.key!==this.startingTab){this.hideTab(i)}}else{if(i>0){this.hideTab(i)}}}))}unhideTab(s){const i=this.tabs[s];i.element.style.display="";i.visible=true}hideTab(s){const i=this.tabs[s];i.element.style.display="none";i.visible=false}switchToTab(s){this.tabs.forEach(((i,t)=>{if(i.key===s){this.unhideTab(t)}else{this.hideTab(t)}}));this.tabs=Array.from(this.tabs)}scrollRight(){const s=this.navWrapperElement.scrollLeft;this.navWrapperElement.scrollLeft=s+this.buttonWidth;this.evaluateScrollButtons()}scrollLeft(){const s=this.navWrapperElement.scrollLeft;this.navWrapperElement.scrollLeft=s-this.buttonWidth;this.evaluateScrollButtons()}evaluateScrollButtons(){const s=this.navWrapperElement.scrollLeft;if(s>=this.scrollWidth){this.showRightScroll=false}else{this.showRightScroll=true}if(s<=0){this.showLeftScroll=false}else{this.showLeftScroll=true}}render(){const s={};if(this.useAutoHeight){s.height=`${this.tabHeight}px`}return i(t,{class:`${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}`},i("div",{class:`sdds-inline-tabs sdds-inline-tabs`},i("nav",{class:"sdds-inline-tabs-header"},i("div",{ref:s=>{this.navWrapperElement=s},class:"sdds-inline-tabs-wrapper"},this.tabs.map((s=>i("button",{style:{width:`${this.buttonWidth}px`},disabled:s.disabled,class:`sdds-inline-tabs--tab ${s.visible?"sdds-inline-tabs--tab__active":""}`,onClick:()=>this.switchToTab(s.key)},i("span",null,s.name))))),i("div",{class:"sdds-inline-tabs-header-navigation"},i("button",{class:`sdds-inline-tabs--forward ${this.showRightScroll?"sdds-inline-tabs--back__show":""}`,disabled:!this.showRightScroll,onClick:()=>this.scrollRight()},i("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z"}))),i("button",{class:`sdds-inline-tabs--back ${this.showLeftScroll?"sdds-inline-tabs--back__show":""}`,disabled:!this.showLeftScroll,onClick:()=>this.scrollLeft()},i("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z"}))))),i("div",{ref:s=>{this.tabWrapperElement=s},class:"sdds-inline-tabs-main",style:s},i("slot",null))))}get host(){return n(this)}};d.style=a;export{d as sdds_inline_tabs};
2	- //# sourceMappingURL=p-d42d3400.entry.js.map

package/dist/tegel/p-d42d3400.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["inlineTabsCss","generateKeyFromName","name","replace","toLowerCase","InlineTabs","this","startingTab","navWrapperElement","tabWrapperElement","componentWidth","buttonsWidth","scrollWidth","useAutoHeight","async","key","switchToTab","componentWillLoad","initComponent","createInitialState","autoHeight","tabs","Array","from","host","children","map","item","index","label","getAttribute","default","disabled","element","visible","initialDisplay","window","getComputedStyle","display","setInitialState","calculateButtonWidth","navButtons","querySelectorAll","best","forEach","navButton","oldStyle","style","width","clientWidth","buttonWidth","calculateTabHeight","_","tabIndex","tab","height","clientHeight","tabHeight","componentDidRender","componentDidLoad","mutationObserver","MutationObserver","visibleTab","find","resizeObserver","ResizeObserver","entries","entry","contentRect","target","evaluateScrollButtons","showLeftScroll","showRightScroll","observe","childList","attributes","defaultTab","hideTab","unhideTab","scrollRight","scroll","scrollLeft","render","h","Host","class","modeVariant","ref","el","onClick","viewBox","fill","xmlns","d"],"sources":["./src/components/tabs/inline-tabs-default/inline-tabs.scss?tag=sdds-inline-tabs&encapsulation=shadow","./src/components/tabs/inline-tabs-default/inline-tabs.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n\n:host {\n outline: 0 !important;\n @include sdds-box-sizing;\n}\n\n.sdds-inline-tabs {\n overflow: hidden;\n outline: 0;\n\n &-header {\n position: relative;\n }\n\n &-main {\n background-color: var(--sdds-inline-tabs-main-background);\n padding: 24px 24px 48px;\n }\n\n &-wrapper {\n display: flex;\n overflow-x: scroll;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n &--forward,\n &--back {\n cursor: pointer;\n width: 48px;\n height: 100%;\n border: 0;\n position: absolute;\n top: 0;\n background-color: var(--sdds-inline-tabs-scroll-btn-background);\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n pointer-events: none;\n\n &__show {\n opacity: 1;\n pointer-events: all;\n }\n\n &:hover {\n background-color: var(--sdds-inline-tabs-scroll-btn-background-hover);\n }\n\n &:active {\n background-color: var(--sdds-inline-tabs-scroll-btn-background-active);\n }\n\n &:focus {\n @include sdds-focus-state;\n }\n svg{\n fill:var(--sdds-inline-tabs-scroll-btn-color);\n }\n }\n\n &--back {\n left: 0;\n }\n\n &--forward {\n right: 0;\n }\n\n &--tab {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n cursor: pointer;\n border: 0;\n color: var(--sdds-inline-tabs-tab-color);\n background-color: var(--sdds-inline-tabs-tab-background);\n padding: 16px;\n min-width: 142px;\n text-decoration: none;\n display: block;\n position: relative;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;\n white-space: nowrap;\n flex-shrink: 0;\n text-align: left;\n outline: none;\n\n & > * {\n opacity: 0.6;\n }\n\n &:not(:last-child) {\n border-right: 1px solid var(--sdds-inline-tabs-tab-border-color);\n }\n\n &::after {\n content: ' ';\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n margin-left: auto;\n width: 0;\n margin-right: auto;\n height: 2px;\n background-color: var(--sdds-inline-tabs-tab-indicator-background);\n transition: width 0.15s ease-in-out;\n }\n\n &:hover {\n background-color: var(--sdds-inline-tabs-tab-background-hover);\n color: var(--sdds-inline-tabs-tab-color-hover);\n text-decoration: none;\n }\n\n &:focus {\n @include sdds-focus-state;\n }\n\n &__active {\n background-color: var(--sdds-inline-tabs-tab-background-active);\n color: var(--sdds-inline-tabs-tab-color-active);\n cursor: initial;\n border-right: 1px solid transparent !important;\n\n & > * {\n opacity: 1;\n }\n\n &:hover {\n background-color: var(--sdds-inline-tabs-tab-background-active);\n }\n\n &::after {\n width: calc(100% + 2px);\n left: -1px;\n background-color: var(--sdds-inline-tabs-tab-indicator-background-active);\n }\n\n &::before {\n content: ' ';\n background-color: var(--sdds-inline-tabs-tab-background-active);\n width: 1px;\n top: 0;\n bottom: 0;\n left: -1px;\n display: block;\n position: absolute;\n }\n\n &:first-child {\n &:focus {\n &::before {\n left: 0;\n }\n }\n }\n }\n\n &:disabled,\n &__disabled {\n cursor: initial;\n color: var(--sdds-navigation-tabs-tab-color-disabled);\n pointer-events: none;\n\n & > * {\n opacity: 0.16;\n }\n }\n }\n}\n\n .sdds-inline-tabs--tab__active {\n background-color: var(--sdds-inline-tabs-tab-background-active);\n }\n\n .sdds-inline-tabs-main {\n background-color: var(--sdds-inline-tabs-main-background);\n }\n","import { Component, Host, State, Element, Prop, h, Method } from '@stencil/core';\n\nfunction generateKeyFromName(name: string) {\n return name\n .replace(/\\s/g, '-')\n .replace(/[^a-z0-9-]/gi, '')\n .toLowerCase();\n}\n\n@Component({\n tag: 'sdds-inline-tabs',\n styleUrl: 'inline-tabs.scss',\n shadow: true,\n})\nexport class InlineTabs {\n @Element() host: HTMLElement;\n\n /** either use this (default-tab=\"...\") or read attribute \"default\" from one of the slotted children. */\n @Prop() defaultTab: string = '';\n\n /** different height settings. right now only supports \"auto\", otherwise ignored */\n @Prop() autoHeight: boolean = false;\n\n /** Variant of the tabs, primary= on white, secondary= on grey50 */\n @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n /** array with metadata for slotted children */\n @State() tabs: Array<any> = [];\n\n /** current calculated width of each nav button (calculated from the largest one) */\n @State() buttonWidth: number = 0;\n\n /** current calculated tab height (calculated from the one with the most height) */\n @State() tabHeight: number = 0;\n\n @State() showLeftScroll: boolean = false;\n\n @State() showRightScroll: boolean = false;\n\n /** used for switching to a tab programmatically */\n @Method()\n async showTab(key: string) {\n this.switchToTab(key);\n }\n\n startingTab: string = null; // name of the tab to show by default (infered from either \"default-tab\"-prop (on component) or \"default\"-prop (on a slotted child)\n\n navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n tabWrapperElement: HTMLElement = null; // reference to container with slotted children\n\n componentWidth: number = 0; // visible width of this component\n\n buttonsWidth: number = 0; // total width of all nav items combined\n\n scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n useAutoHeight: boolean = false; // set height for slotted children or not\n\n componentWillLoad() {\n this.initComponent();\n }\n\n initComponent(createInitialState = true) {\n if (this.autoHeight) {\n this.useAutoHeight = true;\n }\n\n this.tabs = Array.from(this.host.children).map((item: HTMLSddsInlineTabElement, index) => {\n const name = item.label ? item.label : item.getAttribute('name') || `Tab ${index + 1}`;\n const key = generateKeyFromName(name);\n if (item.default) {\n this.startingTab = key;\n }\n let disabled = false;\n if (item.disabled) {\n disabled = true;\n }\n return {\n name,\n key,\n element: item,\n disabled,\n visible: true,\n initialDisplay: window.getComputedStyle(item).display,\n };\n });\n\n if (createInitialState) {\n this.setInitialState();\n }\n this.tabs = Array.from(this.tabs);\n }\n\n calculateButtonWidth() {\n const navButtons = this.navWrapperElement.querySelectorAll('button.sdds-inline-tabs--tab');\n let best = 0;\n Array.from(navButtons).forEach((navButton: HTMLElement) => {\n const oldStyle = navButton.style.width;\n // eslint-disable-next-line no-param-reassign\n navButton.style.width = '';\n const width = navButton.clientWidth;\n // eslint-disable-next-line no-param-reassign\n navButton.style.width = oldStyle;\n\n if (navButton.clientWidth > best) {\n best = width;\n }\n });\n\n this.buttonWidth = best;\n }\n\n calculateTabHeight() {\n let best = 0;\n this.tabs.forEach((_, tabIndex) => {\n const tab = this.tabs[tabIndex];\n // TODO: add comment on what this does\n const oldStyle = tab.element.style.display;\n tab.element.style.display = '';\n const height = tab.element.clientHeight;\n tab.element.style.display = oldStyle;\n\n if (height > best) {\n best = height;\n }\n });\n\n this.tabHeight = best;\n }\n\n componentDidRender() {\n this.calculateTabHeight();\n this.calculateButtonWidth();\n }\n\n componentDidLoad() {\n const mutationObserver = new MutationObserver((/* mutations, observer */) => {\n const visibleTab = this.tabs.find((tab) => tab.visible);\n this.initComponent(false);\n this.calculateTabHeight();\n this.calculateButtonWidth();\n if (visibleTab) {\n this.switchToTab(visibleTab.key);\n }\n });\n\n const resizeObserver = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n const componentWidth = entry.contentRect.width;\n let buttonsWidth = 0;\n\n const navButtons = entry.target.querySelectorAll('button.sdds-inline-tabs--tab');\n Array.from(navButtons).forEach((navButton: HTMLElement) => {\n buttonsWidth += navButton.clientWidth;\n });\n\n this.componentWidth = componentWidth;\n this.buttonsWidth = buttonsWidth;\n this.scrollWidth = buttonsWidth - componentWidth;\n\n if (this.buttonsWidth > this.componentWidth) {\n this.evaluateScrollButtons();\n } else {\n this.showLeftScroll = false;\n this.showRightScroll = false;\n }\n\n this.calculateTabHeight();\n });\n });\n\n mutationObserver.observe(this.host, {\n childList: true,\n attributes: true,\n });\n\n resizeObserver.observe(this.navWrapperElement);\n\n this.calculateButtonWidth();\n this.calculateTabHeight();\n }\n\n setInitialState() {\n if (this.defaultTab) {\n this.startingTab = this.defaultTab;\n }\n\n this.tabs.forEach((tab, index) => {\n if (this.startingTab) {\n if (tab.key !== this.startingTab) {\n this.hideTab(index);\n }\n } else {\n if (index > 0) {\n this.hideTab(index);\n }\n }\n });\n }\n\n unhideTab(tabIndex) {\n const tab = this.tabs[tabIndex];\n tab.element.style.display = '';\n tab.visible = true;\n }\n\n hideTab(tabIndex) {\n const tab = this.tabs[tabIndex];\n tab.element.style.display = 'none';\n tab.visible = false;\n }\n\n switchToTab(key: string) {\n this.tabs.forEach((tab, index) => {\n if (tab.key === key) {\n this.unhideTab(index);\n } else {\n this.hideTab(index);\n }\n });\n\n this.tabs = Array.from(this.tabs);\n }\n\n scrollRight() {\n const scroll = this.navWrapperElement.scrollLeft;\n this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;\n\n this.evaluateScrollButtons();\n }\n\n scrollLeft() {\n const scroll = this.navWrapperElement.scrollLeft;\n this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;\n\n this.evaluateScrollButtons();\n }\n\n evaluateScrollButtons() {\n const scroll = this.navWrapperElement.scrollLeft;\n\n if (scroll >= this.scrollWidth) {\n this.showRightScroll = false;\n } else {\n this.showRightScroll = true;\n }\n\n if (scroll <= 0) {\n this.showLeftScroll = false;\n } else {\n this.showLeftScroll = true;\n }\n }\n\n render() {\n const style: Record<string, string> = {};\n if (this.useAutoHeight) {\n style.height = `${this.tabHeight}px`;\n }\n\n return (\n <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n <div class={`sdds-inline-tabs sdds-inline-tabs`}>\n <nav class=\"sdds-inline-tabs-header\">\n <div\n ref={(el) => {\n this.navWrapperElement = el as HTMLDivElement;\n }}\n class=\"sdds-inline-tabs-wrapper\"\n >\n {this.tabs.map((tab) => (\n <button\n style={{ width: `${this.buttonWidth}px` }}\n disabled={tab.disabled}\n class={`sdds-inline-tabs--tab ${\n tab.visible ? 'sdds-inline-tabs--tab__active' : ''\n }`}\n onClick={() => this.switchToTab(tab.key)}\n >\n <span>{tab.name}</span>\n </button>\n ))}\n </div>\n <div class=\"sdds-inline-tabs-header-navigation\">\n <button\n class={`sdds-inline-tabs--forward ${\n this.showRightScroll ? 'sdds-inline-tabs--back__show' : ''\n }`}\n disabled={!this.showRightScroll}\n onClick={() => this.scrollRight()}\n >\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z\"\n />\n </svg>\n </button>\n <button\n class={`sdds-inline-tabs--back ${\n this.showLeftScroll ? 'sdds-inline-tabs--back__show' : ''\n }`}\n disabled={!this.showLeftScroll}\n onClick={() => this.scrollLeft()}\n >\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z\"\n />\n </svg>\n </button>\n </div>\n </nav>\n <div\n ref={(el) => {\n this.tabWrapperElement = el as HTMLElement;\n }}\n class=\"sdds-inline-tabs-main\"\n style={style}\n >\n <slot />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/tegel/p-df17ed7c.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as d,h as s,H as o,g as a}from"./p-1b74896d.js";const l=":root,.sdds-mode-light{--sdds-modal-backdrop:rgba(0 0 0 / 40%);--sdds-modal-background:var(--sdds-white);--sdds-modal-text:var(--sdds-grey-958);--sdds-modal-icon:var(--sdds-black);--sdds-modal-icon-native:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='black'/%3E%3C/svg%3E%0A\");--sdds-modal-scrollbar:var(--sdds-grey-300);--sdds-modal-scrollbar-track:var(--sdds-grey-300);--sdds-modal-scrollbar-thumb:var(--sdds-grey-500)}.sdds-mode-dark{--sdds-modal-backdrop:rgba(0 0 0 / 40%);--sdds-modal-background:var(--sdds-grey-900);--sdds-modal-text:var(--sdds-grey-50);--sdds-modal-icon:var(--sdds-white);--sdds-modal-icon-native:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='white'/%3E%3C/svg%3E%0A\");--sdds-modal-scrollbar:var(--sdds-grey-300);--sdds-modal-scrollbar-track:var(--sdds-grey-300);--sdds-modal-scrollbar-thumb:var(--sdds-grey-500)}.sdds-modal{box-sizing:border-box;background-color:var(--sdds-modal-background);margin:auto;position:relative;border-radius:4px;padding:16px;max-height:85vh;overflow-y:auto;}.sdds-modal {box-sizing:border-box}.sdds-modal::-webkit-scrollbar{width:5px;background-color:var(--sdds-grey-300);border-radius:0 1em 1em 0}.sdds-modal::-webkit-scrollbar-track{background-color:var(--sdds-grey-300);border-radius:0 1em 1em 0}.sdds-modal::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-500);border-radius:0 1em 1em 0}.sdds-modal__actions-sticky{overflow:hidden}.sdds-modal__actions-sticky .sdds-modal-body{font:var(--sdds-body-01);letter-spacing:var(--sdds-body-01-ls);padding-bottom:96px;margin:0 -16px 0 0;max-height:calc(85vh - 36px);overflow-y:auto}.sdds-modal__actions-sticky .sdds-modal-actions{position:absolute;bottom:-1px;left:0;right:0;background-color:var(--sdds-modal-background);padding:var(--sdds-spacing-element-16);display:flex;gap:16px}.sdds-modal__actions-static .sdds-modal-actions{background-color:var(--sdds-modal-background);display:flex;gap:16px}@media (min-width: 320px){.sdds-modal-xs{width:100%}.sdds-modal-sm{width:100%}.sdds-modal-md{width:100%}.sdds-modal-lg{width:100%}}@media (min-width: 672px){.sdds-modal-xs{width:75%}.sdds-modal-sm{width:62.5%}.sdds-modal-md{width:75%}.sdds-modal-lg{width:100%}}@media (min-width: 1056px){.sdds-modal-xs{width:31.25%}.sdds-modal-sm{width:43.75%}.sdds-modal-md{width:62.5%}.sdds-modal-lg{width:75%}}@media (min-width: 1312px){.sdds-modal-xs{width:31.25%}.sdds-modal-sm{width:37.5%}.sdds-modal-md{width:62.5%}.sdds-modal-lg{width:75%}}@media (min-width: 1584px){.sdds-modal-xs{width:25%}.sdds-modal-sm{width:37.5%}.sdds-modal-md{width:50%}.sdds-modal-lg{width:75%}}@media (max-width: 320px){.sdds-modal-md,.sdds-modal-lg,.sdds-modal-sm{height:100%}.sdds-modal-md slot[name=sdds-modal-actions]::slotted(),.sdds-modal-lg slot[name=sdds-modal-actions]::slotted(),.sdds-modal-sm slot[name=sdds-modal-actions]::slotted(){display:flex}}.sdds-modal-header{display:flex;padding-bottom:var(--sdds-spacing-element-8);position:sticky;top:0;background-color:var(--sdds-modal-background);z-index:1}.sdds-modal-header::before{content:\" \";position:absolute;height:16px;top:-16px;width:100%;background-color:var(--sdds-modal-background)}.sdds-modal-headline{color:var(--sdds-modal-text);font:var(--sdds-headline-05);letter-spacing:var(--sdds-headline-05-ls);margin:0;flex:1;color:var(--sdds-modal-text)}.sdds-modal-body{color:var(--sdds-modal-text);font:var(--sdds-body-01);letter-spacing:var(--sdds-body-01-ls);padding-bottom:40px;overflow-y:visible;padding-right:16px;}.sdds-modal-body::-webkit-scrollbar{width:5px;background-color:var(--sdds-grey-300)}.sdds-modal-body::-webkit-scrollbar-track{background-color:var(--sdds-grey-300)}.sdds-modal-body::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-500)}@media (min-width: 1056px){.sdds-modal-body{padding-right:64px}}.sdds-modal-backdrop{box-sizing:border-box;left:0;top:0;position:fixed;height:100%;width:100%;z-index:600;background-color:var(--sdds-modal-backdrop);padding:0 16px}.sdds-modal-backdrop *{box-sizing:border-box}@media (max-width: 320px){.sdds-modal-backdrop{padding:0}}.sdds-modal-backdrop.show{display:flex}.sdds-modal-backdrop.hide{display:none}button.sdds-modal-close{background-color:transparent;border:0;padding:0;appearance:unset}.sdds-modal-close{display:inline-block;height:auto;color:var(--sdds-modal-icon);cursor:pointer}.sdds-modal-close:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}@media (min-width: 320px){.sdds-modal-close{margin-left:var(--sdds-spacing-element-16)}}@media (min-width: 1056px){.sdds-modal-close{margin-left:var(--sdds-spacing-element-48)}}.sdds-modal-close-btn{display:inline-block;height:auto;background-repeat:no-repeat;cursor:pointer}@media (min-width: 320px){.sdds-modal-close-btn{margin-left:var(--sdds-spacing-element-16)}}@media (min-width: 1056px){.sdds-modal-close-btn{margin-left:var(--sdds-spacing-element-48)}}.sdds-modal-close-btn svg{fill:var(--sdds-modal-icon)}.sdds-modal-overflow{overflow:hidden}:host{left:0;top:0;position:fixed;height:100%;width:100%;z-index:600;background-color:var(--sdds-modal-backdrop);padding:0 16px}@media (max-width: 320px){:host{padding:0}}:host.show{display:flex}:host.hide{display:none}:host .sdds-modal-close{border:none;background-color:transparent}:host .sdds-modal-close-btn{border:none;background-color:transparent}:host(.show){display:flex}:host(.hide){display:none}";const i=class{constructor(s){d(this,s);this.prevent=false;this.size="md";this.actions="static";this.open=false}async openModal(){this.open=true}setDissmissButtons(){const d=this.el.querySelectorAll("[data-dismiss-modal]");[...Array.from(d),this.closeButtonEl].forEach((d=>{d.addEventListener("click",(()=>{this.open=false}))}))}handleClick(d){const s=d.composedPath();const o=s[0];if(o.classList[0]==="sdds-modal-close"\|\|o.classList[0]==="sdds-modal-backdrop"&&this.prevent===false){this.open=false}}componentDidRender(){this.setDissmissButtons()}render(){return s(o,{onClick:d=>{this.handleClick(d)},class:`sdds-modal-backdrop ${this.open?"show":"hide"}`},s("div",{class:`sdds-modal ${this.actions?`sdds-modal__actions-${this.actions}`:""} ${this.size?`sdds-modal-${this.size}`:""} `},s("div",{class:"sdds-modal-header"},s("slot",{name:"sdds-modal-headline"}),s("button",{class:"sdds-modal-close","aria-label":"close",ref:d=>{this.closeButtonEl=d}},s("sdds-icon",{name:"cross",size:"20px"}))),s("div",{class:"sdds-modal-body"},s("slot",{name:"sdds-modal-body"})),s("div",{class:"sdds-modal-actions"},s("slot",{name:"sdds-modal-actions"}))))}get el(){return a(this)}};i.style=l;export{i as sdds_modal};
2	- //# sourceMappingURL=p-df17ed7c.entry.js.map

package/dist/tegel/p-df17ed7c.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["modalCss","Modal","async","this","open","setDissmissButtons","nodes","el","querySelectorAll","Array","from","closeButtonEl","forEach","addEventListener","handleClick","e","targetList","composedPath","target","classList","prevent","componentDidRender","render","h","Host","onClick","event","class","actions","size","name","ref"],"sources":["./src/components/modal/modal.scss?tag=sdds-modal&encapsulation=shadow","./src/components/modal/modal.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import 'modal-theme-vars';\n@import '../../mixins/box-sizing';\n@import '../../mixins/focus-state';\n\n//TODO: Find a way to create a mixin in spacings that can be used for screen size in rem\n//Media rules doesn't calculate correct with using rem\n// Screen breakpoints\n$screen-s: 320px; //320px\n$screen-md: 672px; // 672px\n$screen-l: 1056px; //1056px\n$screen-xl: 1312px; //1312px\n$screen-xxl: 1584px; //1584px\n\n$modals: (\n $screen-s: (\n xs: 100%,\n sm: 100%,\n md: 100%,\n lg: 100%,\n ),\n $screen-md: (\n xs: 75%,\n sm: 62.5%,\n md: 75%,\n lg: 100%,\n ),\n $screen-l: (\n xs: 31.25%,\n sm: 43.75%,\n md: 62.5%,\n lg: 75%,\n ),\n $screen-xl: (\n xs: 31.25%,\n sm: 37.5%,\n md: 62.5%,\n lg: 75%,\n ),\n $screen-xxl: (\n xs: 25%,\n sm: 37.5%,\n md: 50%,\n lg: 75%,\n ),\n);\n\n/* MIXINS */\n\n@mixin modal-scroll-inner {\n /* SCROLL STUFF */\n\n /* width */\n &::-webkit-scrollbar {\n width: 5px;\n background-color: var(--sdds-grey-300);\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background-color: var(--sdds-grey-300);\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background-color: var(--sdds-grey-500);\n }\n}\n\n@mixin modal-scroll-outer {\n /* SCROLL STUFF */\n\n /* width */\n &::-webkit-scrollbar {\n width: 5px;\n background-color: var(--sdds-grey-300);\n border-radius: 0 1em 1em 0;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background-color: var(--sdds-grey-300);\n border-radius: 0 1em 1em 0;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background-color: var(--sdds-grey-500);\n border-radius: 0 1em 1em 0;\n }\n}\n\n@mixin modal-host {\n left: 0;\n top: 0;\n position: fixed;\n height: 100%;\n width: 100%;\n z-index: z(modal);\n background-color: var(--sdds-modal-backdrop);\n padding: 0 16px;\n\n @media (max-width: $screen-s) {\n padding: 0;\n }\n\n &.show {\n display: flex;\n }\n\n &.hide {\n display: none;\n }\n}\n\n@mixin modal-header {\n display: flex;\n padding-bottom: var(--sdds-spacing-element-8);\n position: sticky;\n top: 0;\n background-color: var(--sdds-modal-background);\n z-index: 1;\n\n &::before {\n content: ' ';\n position: absolute;\n height: 16px;\n top: -16px;\n width: 100%;\n background-color: var(--sdds-modal-background);\n }\n}\n\n@mixin modal-headline {\n color: var(--sdds-modal-text);\n font: var(--sdds-headline-05);\n letter-spacing: var(--sdds-headline-05-ls);\n margin: 0;\n flex: 1;\n}\n\n@mixin modal-body {\n color: var(--sdds-modal-text);\n font: var(--sdds-body-01);\n letter-spacing: var(--sdds-body-01-ls);\n padding-bottom: 40px;\n overflow-y: visible;\n padding-right: 16px;\n @include modal-scroll-inner;\n\n @media (min-width: $screen-l) {\n padding-right: 64px;\n }\n}\n\n/* MODAL STYLING */\n\n.sdds-modal {\n @include sdds-box-sizing;\n\n background-color: var(--sdds-modal-background);\n margin: auto;\n position: relative;\n border-radius: 4px;\n padding: 16px;\n max-height: 85vh;\n overflow-y: auto;\n\n @include modal-scroll-outer;\n\n &__actions-sticky {\n overflow: hidden;\n\n .sdds-modal-body {\n font: var(--sdds-body-01);\n letter-spacing: var(--sdds-body-01-ls);\n padding-bottom: 96px;\n margin: 0 -16px 0 0;\n max-height: calc(85vh - 36px);\n overflow-y: auto;\n }\n\n .sdds-modal-actions {\n position: absolute;\n bottom: -1px;\n left: 0;\n right: 0;\n background-color: var(--sdds-modal-background);\n padding: var(--sdds-spacing-element-16);\n display: flex;\n gap: 16px;\n }\n }\n\n &__actions-static {\n .sdds-modal-actions {\n background-color: var(--sdds-modal-background);\n display: flex;\n gap: 16px;\n }\n }\n}\n\n//Width of modals in different breakpoints\n@each $screen, $modals in $modals {\n @media (min-width: $screen) {\n @each $modal, $value in $modals {\n .sdds-modal-#{$modal} {\n width: $value;\n }\n }\n }\n}\n\n@media (max-width: $screen-s) {\n .sdds-modal-md,\n .sdds-modal-lg,\n .sdds-modal-sm {\n height: 100%;\n\n slot[name='sdds-modal-actions']::slotted(*) {\n display: flex;\n }\n }\n}\n\n/* MODAL SUBELEMENTS */\n\n.sdds-modal-header {\n @include modal-header;\n}\n\n.sdds-modal-headline {\n @include modal-headline;\n\n color: var(--sdds-modal-text);\n}\n\n.sdds-modal-body {\n @include modal-body;\n}\n\n.sdds-modal-backdrop {\n @include sdds-box-sizing;\n @include modal-host;\n}\n\nbutton.sdds-modal-close {\n background-color: transparent;\n border: 0;\n padding: 0;\n appearance: unset;\n}\n\n.sdds-modal-close {\n display: inline-block;\n height: auto;\n color: var(--sdds-modal-icon);\n cursor: pointer;\n\n &:focus {\n @include sdds-focus-state;\n }\n\n @media (min-width: $screen-s) {\n margin-left: var(--sdds-spacing-element-16);\n }\n\n @media (min-width: $screen-l) {\n margin-left: var(--sdds-spacing-element-48);\n }\n}\n\n//web component with nested svg\n.sdds-modal-close-btn {\n display: inline-block;\n height: auto;\n background-repeat: no-repeat;\n cursor: pointer;\n\n @media (min-width: $screen-s) {\n margin-left: var(--sdds-spacing-element-16);\n }\n\n @media (min-width: $screen-l) {\n margin-left: var(--sdds-spacing-element-48);\n }\n\n svg {\n fill: var(--sdds-modal-icon);\n }\n}\n\n.sdds-modal-overflow {\n overflow: hidden;\n}\n\n/* WEB COMPONENT STUFF */\n\n:host {\n @include modal-host;\n\n .sdds-modal-close {\n border: none;\n background-color: transparent;\n }\n\n .sdds-modal-close-btn {\n border: none;\n background-color: transparent;\n }\n}\n\n:host(.show) {\n display: flex;\n}\n\n:host(.hide) {\n display: none;\n}\n","import { Component, h, Host, Prop, Element, Method } from '@stencil/core';\n\n@Component({\n tag: 'sdds-modal',\n styleUrl: 'modal.scss',\n shadow: true,\n})\nexport class Modal {\n /** Disables closing modal on clicking on overlay area. */\n @Prop() prevent: boolean = false;\n\n /** Size of modal */\n @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'md';\n\n /** Sticky or Static Actions */\n @Prop() actions: 'sticky' | 'static' = 'static';\n\n /* Opens or closes the modal. */\n @Prop() open: boolean = false;\n\n @Element() el: HTMLElement;\n\n closeButtonEl: HTMLElement;\n\n /** Shows the modal */\n @Method()\n async openModal() {\n this.open = true;\n }\n\n setDissmissButtons() {\n const nodes = this.el.querySelectorAll('[data-dismiss-modal]');\n\n [...Array.from(nodes), this.closeButtonEl].forEach((el) => {\n el.addEventListener('click', () => {\n this.open = false;\n });\n });\n }\n\n handleClick(e) {\n const targetList = e.composedPath();\n const target = targetList[0];\n if (\n target.classList[0] === 'sdds-modal-close' ||\n (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)\n ) {\n this.open = false;\n }\n }\n\n componentDidRender() {\n this.setDissmissButtons();\n }\n\n render() {\n return (\n <Host\n onClick={(event) => {\n this.handleClick(event);\n }}\n class={`sdds-modal-backdrop ${this.open ? 'show' : 'hide'}`}\n >\n <div\n class={`sdds-modal ${this.actions ? `sdds-modal__actions-${this.actions}` : ''} ${\n this.size ? `sdds-modal-${this.size}` : ''\n } `}\n >\n <div class=\"sdds-modal-header\">\n <slot name=\"sdds-modal-headline\"></slot>\n <button\n class=\"sdds-modal-close\"\n aria-label=\"close\"\n ref={(el) => {\n this.closeButtonEl = el as HTMLElement;\n }}\n >\n <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n </button>\n </div>\n\n <div class=\"sdds-modal-body\">\n <slot name=\"sdds-modal-body\"></slot>\n </div>\n\n <div class=\"sdds-modal-actions\">\n <slot name=\"sdds-modal-actions\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAW,++M,MCOJC,EAAK,M,sCAEW,M,UAGe,K,aAGH,S,UAGf,K,CAQxBC,kBACEC,KAAKC,KAAO,I,CAGdC,qBACE,MAAMC,EAAQH,KAAKI,GAAGC,iBAAiB,wBAEvC,IAAIC,MAAMC,KAAKJ,GAAQH,KAAKQ,eAAeC,SAASL,IAClDA,EAAGM,iBAAiB,SAAS,KAC3BV,KAAKC,KAAO,KAAK,GACjB,G,CAINU,YAAYC,GACV,MAAMC,EAAaD,EAAEE,eACrB,MAAMC,EAASF,EAAW,GAC1B,GACEE,EAAOC,UAAU,KAAO,oBACvBD,EAAOC,UAAU,KAAO,uBAAyBhB,KAAKiB,UAAY,MACnE,CACAjB,KAAKC,KAAO,K,EAIhBiB,qBACElB,KAAKE,oB,CAGPiB,SACE,OACEC,EAACC,EAAI,CACHC,QAAUC,IACRvB,KAAKW,YAAYY,EAAM,EAEzBC,MAAO,uBAAuBxB,KAAKC,KAAO,OAAS,UAEnDmB,EAAA,OACEI,MAAO,cAAcxB,KAAKyB,QAAU,uBAAuBzB,KAAKyB,UAAY,MAC1EzB,KAAK0B,KAAO,cAAc1B,KAAK0B,OAAS,OAG1CN,EAAA,OAAKI,MAAM,qBACTJ,EAAA,QAAMO,KAAK,wBACXP,EAAA,UACEI,MAAM,mBAAkB,aACb,QACXI,IAAMxB,IACJJ,KAAKQ,cAAgBJ,CAAiB,GAGxCgB,EAAA,aAAWO,KAAK,QAAQD,KAAK,WAIjCN,EAAA,OAAKI,MAAM,mBACTJ,EAAA,QAAMO,KAAK,qBAGbP,EAAA,OAAKI,MAAM,sBACTJ,EAAA,QAAMO,KAAK,yB"}

package/dist/tegel/p-e7332a61.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,c as d,h as s,H as o,g as t}from"./p-1b74896d.js";const r=":root,.sdds-mode-light{--sdds-checkbox-color:var(--sdds-grey-900);--sdds-checkbox-interaction-01:var(--sdds-blue-800);--sdds-checkbox-interaction-02:var(--sdds-white);--sdds-checkbox-background-hover:var(--sdds-blue-800);--sdds-checkbox-background-focus:var(--sdds-blue-800);--sdds-checkbox-disabled:var(--sdds-grey-400);--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-500);--sdds-checkbox-color-disabled-after:var(--sdds-grey-500)}:root .sdds-mode-dark,.sdds-mode-light .sdds-mode-dark{--sdds-checkbox-color:var(--sdds-white);--sdds-checkbox-interaction-01:var(--sdds-white);--sdds-checkbox-interaction-02:var(--sdds-grey-958);--sdds-checkbox-background-hover:white;--sdds-checkbox-background-focus:white;--sdds-checkbox-disabled:white;--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-700);--sdds-checkbox-color-disabled-after:var(--sdds-grey-700)}.sdds-checkbox-item{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.sdds-checkbox-item {box-sizing:border-box}.sdds-checkbox-item .sdds-form-input[type=checkbox]{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]+label{color:var(--sdds-checkbox-color);padding-left:var(--sdds-spacing-element-4);padding-top:var(--sdds-spacing-element-4);padding-bottom:var(--sdds-spacing-element-4);cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before,.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{content:\"\";position:absolute;box-sizing:border-box;border-radius:2px}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before{width:24px;height:24px;left:0;top:0}.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{border:1px solid var(--sdds-checkbox-interaction-01);background-color:var(--sdds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px}.sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:0.12}.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before{background-color:var(--sdds-checkbox-background-focus);opacity:0.24;transition:opacity 0.2s ease-in-out}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled{cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled::after,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled::after{border-color:var(--sdds-checkbox-border-color-disabled-after)}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled+label,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled+label{color:var(--sdds-grey-600);cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled:hover::before,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled:hover::before{display:none}.sdds-form-input[type=checkbox]:checked::after{background-image:var(--sdds-checkbox-background-img);background-color:var(--sdds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.sdds-form-input[type=checkbox]:checked:disabled:hover::before,.sdds-form-input[type=checkbox]:checked:disabled::before,.sdds-form-input[type=checkbox]:checked.disabled:hover::before,.sdds-form-input[type=checkbox]:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.sdds-form-input[type=checkbox]:checked:disabled::after,.sdds-form-input[type=checkbox]:checked.disabled::after{background-image:var(--sdds-checkbox-background-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}:host{box-sizing:border-box;display:table-header-group}:host {box-sizing:border-box}:host .sdds-table__header-cell--checkbox{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);display:table-cell;text-align:left;color:var(--sdds-data-table-color);background-color:var(--sdds-data-table-header-background);border-bottom:1px solid var(--sdds-data-table-divider);height:48px;box-sizing:border-box;overflow:hidden;transition:background-color 200ms ease;min-width:unset;width:48px;padding:0;border-top-left-radius:4px}:host .sdds-form-label--data-table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host .sdds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:48px;cursor:pointer}:host .sdds-table__expand-control-container .sdds-table__expand-input{display:none}:host .sdds-table__expand-control-container .sdds-expandable-row-icon{height:20px;width:20px;transition:transform 200ms ease;transform:rotate(0)}:host .sdds-table__expand-control-container .sdds-expandable-row-icon--opened{transform:rotate(180deg)}:host ::slotted(sdds-header-cell:hover){background-color:var(--sdds-data-table-header-background-hover)}:host(.sdds-table--compact) .sdds-table__header-cell--checkbox{height:32px}:host(.sdds-table--compact) .sdds-form-label--data-table{height:32px}:host(.sdds-table--divider) .sdds-table__header-cell--checkbox{border-right:1px solid var(--sdds-data-table-divider)}:host(.sdds-table--toolbar-available) .sdds-table__header-cell--checkbox{border-top-left-radius:0}";const a=["enableMultiselect","enableExpandableRows","verticalDividers","compactDesign","noMinWidth"];const c=class{constructor(s){e(this,s);this.mainCheckboxSelectedEvent=d(this,"mainCheckboxSelectedEvent",7);this.enableMultiselect=false;this.enableExpandableRows=false;this.mainCheckboxSelected=false;this.mainExpendSelected=false;this.verticalDividers=false;this.compactDesign=false;this.noMinWidth=false;this.whiteBackground=false;this.enableToolbarDesign=false;this.tableId=""}tablePropsChangedEventListener(e){if(this.tableId===e.detail.tableId){e.detail.changed.filter((e=>a.includes(e))).forEach((d=>{if(typeof this[d]==="undefined"){throw new Error(`Table prop is not supported: ${d}`)}this[d]=e.detail[d]}))}}updateMainCheckboxEventListener(e){const[d,s]=e.detail;if(this.tableId===d){this.mainCheckboxSelected=s}}singleRowExpandedEventListener(e){if(this.tableId===e.detail[0]){setTimeout((()=>{this.bodyExpandClicked()}),100)}}bodyExpandClicked(){const e=this.host.parentElement.querySelector("sdds-table-body").getElementsByClassName("sdds-table__row-extend--active").length;const d=this.host.parentElement.querySelector("sdds-table-body").getElementsByTagName("sdds-table-body-row-expendable").length;if(d===e){this.mainExpendSelected=true}else{this.mainExpendSelected=false}}connectedCallback(){this.tableEl=this.host.closest("sdds-table");this.tableId=this.tableEl.tableId}componentWillLoad(){a.forEach((e=>{this[e]=this.tableEl[e]}))}componentWillRender(){this.enableToolbarDesign=this.host.closest("sdds-table").getElementsByTagName("sdds-table-toolbar").length>=1}headCheckBoxClicked(e){this.mainCheckboxSelected=e.currentTarget.checked;this.mainCheckboxSelectedEvent.emit([this.tableId,this.mainCheckboxSelected])}render(){return s(o,{class:{"sdds-table--compact":this.compactDesign,"sdds-table--divider":this.verticalDividers,"sdds-table--toolbar-available":this.enableToolbarDesign}},s("tr",null,this.enableMultiselect&&s("th",{class:"sdds-table__header-cell sdds-table__header-cell--checkbox"},s("div",{class:"sdds-checkbox-item"},s("label",{class:"sdds-form-label sdds-form-label--data-table"},s("input",{class:"sdds-form-input",type:"checkbox",onChange:e=>this.headCheckBoxClicked(e),checked:this.mainCheckboxSelected})))),this.enableExpandableRows&&s("th",{class:"sdds-table__header-cell sdds-table__header-cell--checkbox"}),s("slot",null)))}get host(){return t(this)}};c.style=r;export{c as sdds_table_header};
2	- //# sourceMappingURL=p-e7332a61.entry.js.map

package/dist/tegel/p-e7332a61.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["tableHeaderCss","relevantTableProps","TableHeaderRow","tablePropsChangedEventListener","event","this","tableId","detail","changed","filter","changedProp","includes","forEach","Error","updateMainCheckboxEventListener","receivedID","receivedMainCheckboxStatus","mainCheckboxSelected","singleRowExpandedEventListener","setTimeout","bodyExpandClicked","numberOfExtendRowsActive","host","parentElement","querySelector","getElementsByClassName","length","numberOfExtendRows","getElementsByTagName","mainExpendSelected","connectedCallback","tableEl","closest","componentWillLoad","tablePropName","componentWillRender","enableToolbarDesign","headCheckBoxClicked","currentTarget","checked","mainCheckboxSelectedEvent","emit","render","h","Host","class","compactDesign","verticalDividers","enableMultiselect","type","onChange","e","enableExpandableRows"],"sources":["./src/components/data-table/table-header/table-header.scss?tag=sdds-table-header&encapsulation=shadow","./src/components/data-table/table-header/table-header.tsx"],"sourcesContent":["/* As checkbox is not a web component, we have to import them here in order to have styles available - shadow DOM is a reason */\n@import '../../checkbox/checkbox';\n@import '../../../mixins/box-sizing';\n\n:host {\n @include sdds-box-sizing;\n\n display: table-header-group;\n\n .sdds-table__header-cell--checkbox {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n display: table-cell;\n text-align: left;\n color: var(--sdds-data-table-color);\n background-color: var(--sdds-data-table-header-background);\n border-bottom: 1px solid var(--sdds-data-table-divider);\n height: 48px;\n box-sizing: border-box;\n\n // To fix issues with border-radius propagating up from button\n overflow: hidden;\n transition: background-color 200ms ease;\n min-width: unset;\n width: 48px;\n padding: 0;\n border-top-left-radius: 4px;\n }\n\n // Extra rule for label use in data-data-table\n .sdds-form-label--data-table {\n width: 100%;\n height: 48px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n }\n\n .sdds-table__expand-control-container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 48px;\n cursor: pointer;\n\n .sdds-table__expand-input {\n display: none;\n }\n\n .sdds-expandable-row-icon {\n height: 20px;\n width: 20px;\n transition: transform 200ms ease;\n transform: rotate(0);\n }\n\n .sdds-expandable-row-icon--opened {\n transform: rotate(180deg);\n }\n }\n\n ::slotted(sdds-header-cell:hover) {\n background-color: var(--sdds-data-table-header-background-hover);\n }\n}\n\n:host(.sdds-table--compact) {\n .sdds-table__header-cell--checkbox {\n height: 32px;\n }\n\n // Extra rule for label use in data-data-table\n .sdds-form-label--data-table {\n height: 32px;\n }\n}\n\n:host(.sdds-table--divider) {\n .sdds-table__header-cell--checkbox {\n border-right: 1px solid var(--sdds-data-table-divider);\n }\n}\n\n:host(.sdds-table--toolbar-available) {\n .sdds-table__header-cell--checkbox {\n border-top-left-radius: 0;\n }\n}\n","import { Component, h, Host, State, Event, EventEmitter, Listen, Element } from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n 'enableMultiselect',\n 'enableExpandableRows',\n 'verticalDividers',\n 'compactDesign',\n 'noMinWidth',\n];\n\n@Component({\n tag: 'sdds-table-header',\n styleUrl: 'table-header.scss',\n shadow: true,\n})\nexport class TableHeaderRow {\n @State() enableMultiselect: boolean = false;\n\n @State() enableExpandableRows: boolean = false;\n\n @State() mainCheckboxSelected: boolean = false;\n\n @State() mainExpendSelected: boolean = false;\n\n @State() verticalDividers: boolean = false;\n\n @State() compactDesign: boolean = false;\n\n @State() noMinWidth: boolean = false;\n\n @State() whiteBackground: boolean = false;\n\n @State() enableToolbarDesign: boolean = false;\n\n @State() tableId: string = '';\n\n @Element() host: HTMLElement;\n\n tableEl: HTMLSddsTableElement;\n\n /** Send status of main checkbox in header to the parent, sdds-table component */\n @Event({\n eventName: 'mainCheckboxSelectedEvent',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n mainCheckboxSelectedEvent: EventEmitter<any>;\n\n @Listen('tablePropsChangedEvent', { target: 'body' })\n tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n @Listen('updateMainCheckboxEvent', { target: 'body' })\n updateMainCheckboxEventListener(event: CustomEvent<any>) {\n const [receivedID, receivedMainCheckboxStatus] = event.detail;\n if (this.tableId === receivedID) {\n this.mainCheckboxSelected = receivedMainCheckboxStatus;\n }\n }\n\n @Listen('singleRowExpandedEvent', { target: 'body' })\n singleRowExpandedEventListener(event: CustomEvent<any>) {\n if (this.tableId === event.detail[0]) {\n // TODO: Improve this logic. Why we get late repose in DOM?\n setTimeout(() => {\n this.bodyExpandClicked();\n }, 100);\n }\n }\n\n bodyExpandClicked() {\n const numberOfExtendRowsActive = this.host.parentElement\n .querySelector('sdds-table-body')\n .getElementsByClassName('sdds-table__row-extend--active').length;\n const numberOfExtendRows = this.host.parentElement\n .querySelector('sdds-table-body')\n .getElementsByTagName('sdds-table-body-row-expendable').length;\n\n if (numberOfExtendRows === numberOfExtendRowsActive) {\n this.mainExpendSelected = true;\n } else {\n this.mainExpendSelected = false;\n }\n }\n\n connectedCallback() {\n this.tableEl = this.host.closest('sdds-table');\n this.tableId = this.tableEl.tableId;\n }\n\n componentWillLoad() {\n relevantTableProps.forEach((tablePropName) => {\n this[tablePropName] = this.tableEl[tablePropName];\n });\n }\n\n componentWillRender() {\n this.enableToolbarDesign =\n this.host.closest('sdds-table').getElementsByTagName('sdds-table-toolbar').length >= 1;\n }\n\n headCheckBoxClicked(event) {\n this.mainCheckboxSelected = event.currentTarget.checked;\n this.mainCheckboxSelectedEvent.emit([this.tableId, this.mainCheckboxSelected]);\n }\n\n render() {\n return (\n <Host\n class={{\n 'sdds-table--compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-table--toolbar-available': this.enableToolbarDesign,\n }}\n >\n <tr>\n {this.enableMultiselect && (\n <th class=\"sdds-table__header-cell sdds-table__header-cell--checkbox\">\n <div class=\"sdds-checkbox-item\">\n <label class=\"sdds-form-label sdds-form-label--data-table\">\n <input\n class=\"sdds-form-input\"\n type=\"checkbox\"\n onChange={(e) => this.headCheckBoxClicked(e)}\n checked={this.mainCheckboxSelected}\n />\n </label>\n </div>\n </th>\n )}\n {this.enableExpandableRows && (\n <th class=\"sdds-table__header-cell sdds-table__header-cell--checkbox\"></th>\n )}\n <slot></slot>\n </tr>\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAiB,g6MCGvB,MAAMC,EAAwD,CAC5D,oBACA,uBACA,mBACA,gBACA,c,MAQWC,EAAc,M,qHACa,M,0BAEG,M,0BAEA,M,wBAEF,M,sBAEF,M,mBAEH,M,gBAEH,M,qBAEK,M,yBAEI,M,aAEb,E,CAgB3BC,+BAA+BC,GAC7B,GAAIC,KAAKC,UAAYF,EAAMG,OAAOD,QAAS,CACzCF,EAAMG,OAAOC,QACVC,QAAQC,GAAgBT,EAAmBU,SAASD,KACpDE,SAASF,IACR,UAAWL,KAAKK,KAAiB,YAAa,CAC5C,MAAM,IAAIG,MAAM,gCAAgCH,I,CAElDL,KAAKK,GAAeN,EAAMG,OAAOG,EAAY,G,EAMrDI,gCAAgCV,GAC9B,MAAOW,EAAYC,GAA8BZ,EAAMG,OACvD,GAAIF,KAAKC,UAAYS,EAAY,CAC/BV,KAAKY,qBAAuBD,C,EAKhCE,+BAA+Bd,GAC7B,GAAIC,KAAKC,UAAYF,EAAMG,OAAO,GAAI,CAEpCY,YAAW,KACTd,KAAKe,mBAAmB,GACvB,I,EAIPA,oBACE,MAAMC,EAA2BhB,KAAKiB,KAAKC,cACxCC,cAAc,mBACdC,uBAAuB,kCAAkCC,OAC5D,MAAMC,EAAqBtB,KAAKiB,KAAKC,cAClCC,cAAc,mBACdI,qBAAqB,kCAAkCF,OAE1D,GAAIC,IAAuBN,EAA0B,CACnDhB,KAAKwB,mBAAqB,I,KACrB,CACLxB,KAAKwB,mBAAqB,K,EAI9BC,oBACEzB,KAAK0B,QAAU1B,KAAKiB,KAAKU,QAAQ,cACjC3B,KAAKC,QAAUD,KAAK0B,QAAQzB,O,CAG9B2B,oBACEhC,EAAmBW,SAASsB,IAC1B7B,KAAK6B,GAAiB7B,KAAK0B,QAAQG,EAAc,G,CAIrDC,sBACE9B,KAAK+B,oBACH/B,KAAKiB,KAAKU,QAAQ,cAAcJ,qBAAqB,sBAAsBF,QAAU,C,CAGzFW,oBAAoBjC,GAClBC,KAAKY,qBAAuBb,EAAMkC,cAAcC,QAChDlC,KAAKmC,0BAA0BC,KAAK,CAACpC,KAAKC,QAASD,KAAKY,sB,CAG1DyB,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACL,sBAAuBxC,KAAKyC,cAC5B,sBAAuBzC,KAAK0C,iBAC5B,gCAAiC1C,KAAK+B,sBAGxCO,EAAA,UACGtC,KAAK2C,mBACJL,EAAA,MAAIE,MAAM,6DACRF,EAAA,OAAKE,MAAM,sBACTF,EAAA,SAAOE,MAAM,+CACXF,EAAA,SACEE,MAAM,kBACNI,KAAK,WACLC,SAAWC,GAAM9C,KAAKgC,oBAAoBc,GAC1CZ,QAASlC,KAAKY,0BAMvBZ,KAAK+C,sBACJT,EAAA,MAAIE,MAAM,8DAEZF,EAAA,c"}

package/dist/tegel/p-ef70c653.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as d,h as s,H as n,g as r}from"./p-1b74896d.js";const o=":root,.sdds-mode-light{--sdds-btn-primary-background:var(--sdds-blue-600);--sdds-btn-primary-color:var(--sdds-white);--sdds-btn-primary-border-color:transparent;--sdds-btn-primary-background-hover:var(--sdds-blue-500);--sdds-btn-primary-color-hover:var(--sdds-white);--sdds-btn-primary-border-color-hover:transparent;--sdds-btn-primary-background-active:var(--sdds-blue-700);--sdds-btn-primary-color-active:var(--sdds-white);--sdds-btn-primary-border-color-active:transparent;--sdds-btn-primary-background-focus:var(--sdds-blue-400);--sdds-btn-primary-color-focus:var(--sdds-white);--sdds-btn-primary-border-color-focus:var(--sdds-blue-600);--sdds-btn-primary-outline-color-focus:var(--sdds-blue-600);--sdds-btn-primary-background-disabled-primary:var(--sdds-grey-50);--sdds-btn-primary-background-disabled-secondary:var(--sdds-white);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary);--sdds-btn-primary-color-disabled:var(--sdds-grey-400);--sdds-btn-primary-border-color-disabled:transparent;--sdds-btn-icon-primary-fill:var(--sdds-grey-50);--sdds-btn-icon-primary-color:var(--sdds-grey-50);--sdds-btn-secondary-background:transparent;--sdds-btn-secondary-color:var(--sdds-black);--sdds-btn-secondary-border-color:rgb(0 0 0 / 38%);--sdds-btn-secondary-background-hover:var(--sdds-blue-500);--sdds-btn-secondary-color-hover:var(--sdds-white);--sdds-btn-secondary-border-color-hover:var(--sdds-blue-500);--sdds-btn-secondary-background-active:transparent;--sdds-btn-secondary-color-active:var(--sdds-black);--sdds-btn-secondary-border-color-active:rgb(0 0 0 / 87%);--sdds-btn-secondary-background-focus:transparent;--sdds-btn-secondary-color-focus:var(--sdds-black);--sdds-btn-secondary-border-color-focus:var(--sdds-blue-300);--sdds-btn-secondary-outline-color:rgb(0 0 0 / 38%);--sdds-btn-secondary-background-disabled:transparent;--sdds-btn-secondary-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-secondary-border-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-icon-secondary-fill:var(--sdds-black);--sdds-btn-icon-secondary-color:var(--sdds-black);--sdds-btn-icon-secondary-fill-hover:var(--sdds-grey-50);--sdds-btn-icon-secondary-color-hover:var(--sdds-grey-50);--sdds-btn-icon-secondary-fill-focus:var(--sdds-black);--sdds-btn-icon-secondary-color-focus:var(--sdds-black);--sdds-btn-ghost-background:transparent;--sdds-btn-ghost-color:var(--sdds-black);--sdds-btn-ghost-border-color:transparent;--sdds-btn-ghost-background-hover:transparent;--sdds-btn-ghost-color-hover:var(--sdds-black);--sdds-btn-ghost-border-color-hover:rgb(0 0 0 / 60%);--sdds-btn-ghost-outline-color-hover:rgb(0 0 0 / 60%);--sdds-btn-ghost-background-active:transparent;--sdds-btn-ghost-color-active:var(--sdds-black);--sdds-btn-ghost-border-color-active:rgb(0 0 0 / 87%);--sdds-btn-ghost-background-focus:transparent;--sdds-btn-ghost-color-focus:var(--sdds-black);--sdds-btn-ghost-border-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-outline-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-background-disabled:transparent;--sdds-btn-ghost-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-ghost-border-color-disabled:transparent;--sdds-btn-icon-ghost-fill:var(--sdds-black);--sdds-btn-icon-ghost-color:var(--sdds-black);--sdds-btn-danger-background:var(--sdds-negative);--sdds-btn-danger-color:var(--sdds-white);--sdds-btn-danger-border-color:transparent;--sdds-btn-danger-background-hover:var(--sdds-red-600);--sdds-btn-danger-color-hover:var(--sdds-white);--sdds-btn-danger-border-color-hover:transparent;--sdds-btn-danger-background-active:var(--sdds-red-700);--sdds-btn-danger-color-active:var(--sdds-white);--sdds-btn-danger-border-color-active:transparent;--sdds-btn-danger-background-focus:var(--sdds-red-400);--sdds-btn-danger-color-focus:var(--sdds-white);--sdds-btn-danger-border-color-focus:var(--sdds-red-400);--sdds-btn-danger-outline-color-focus:var(--sdds-red-700);--sdds-btn-danger-background-disabled-primary:var(--sdds-grey-50);--sdds-btn-danger-background-disabled-secondary:var(--sdds-white);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-danger-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-danger-border-color-disabled:transparent;--sdds-btn-icon-danger-fill:var(--sdds-white);--sdds-btn-icon-danger-color:var(--sdds-white)}:root .sdds-mode-variant-primary,.sdds-mode-light .sdds-mode-variant-primary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary)}:root .sdds-mode-variant-secondary,.sdds-mode-light .sdds-mode-variant-secondary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-secondary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-secondary)}.sdds-mode-dark{--sdds-btn-primary-background:var(--sdds-blue-400);--sdds-btn-primary-background-hover:var(--sdds-blue-500);--sdds-btn-primary-background-active:var(--sdds-blue-300);--sdds-btn-primary-background-focus:var(--sdds-blue-600);--sdds-btn-primary-border-color-focus:var(--sdds-blue-400);--sdds-btn-primary-outline-color-focus:var(--sdds-blue-400);--sdds-btn-primary-background-disabled-primary:var(--sdds-grey-900);--sdds-btn-primary-background-disabled-secondary:var(--sdds-grey-868);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary);--sdds-btn-primary-color-disabled:var(--sdds-grey-600);--sdds-btn-icon-primary-fill:var(--sdds-grey-50);--sdds-btn-icon-primary-color:var(--sdds-grey-50);--sdds-btn-secondary-background:transparent;--sdds-btn-secondary-color:var(--sdds-white);--sdds-btn-secondary-border-color:var(--sdds-white);--sdds-btn-secondary-background-hover:var(--sdds-blue-500);--sdds-btn-secondary-color-hover:var(--sdds-white);--sdds-btn-secondary-border-color-hover:var(--sdds-blue-500);--sdds-btn-secondary-background-active:transparent;--sdds-btn-secondary-color-active:var(--sdds-white);--sdds-btn-secondary-border-color-active:var(--sdds-white);--sdds-btn-secondary-background-focus:transparent;--sdds-btn-secondary-color-focus:var(--sdds-white);--sdds-btn-secondary-border-color-focus:var(--sdds-blue-300);--sdds-btn-secondary-outline-color:var(--sdds-white);--sdds-btn-secondary-outline-color-focus:var(--sdds-blue-300);--sdds-btn-secondary-background-disabled:transparent;--sdds-btn-secondary-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-secondary-border-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-icon-secondary-fill:var(--sdds-grey-50);--sdds-btn-icon-secondary-color:var(--sdds-grey-50);--sdds-btn-ghost-background:transparent;--sdds-btn-ghost-color:var(--sdds-white);--sdds-btn-ghost-border-color:transparent;--sdds-btn-ghost-background-hover:transparent;--sdds-btn-ghost-color-hover:var(--sdds-white);--sdds-btn-ghost-border-color-hover:rgb(255 255 255 / 41%);--sdds-btn-ghost-outline-color-hover:rgb(255 255 255 / 41%);--sdds-btn-ghost-background-active:transparent;--sdds-btn-ghost-color-active:var(--sdds-white);--sdds-btn-ghost-border-color-active:rgb(255 255 255 / 87%);--sdds-btn-ghost-background-focus:transparent;--sdds-btn-ghost-color-focus:var(--sdds-white);--sdds-btn-ghost-border-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-outline-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-background-disabled:transparent;--sdds-btn-ghost-color-disabled:rgb(255 255 255/ 38%);--sdds-btn-ghost-border-color-disabled:transparent;--sdds-btn-icon-ghost-fill:var(--sdds-grey-50);--sdds-btn-icon-ghost-color:var(--sdds-grey-50);--sdds-btn-danger-background:var(--sdds-negative);--sdds-btn-danger-color:var(--sdds-white);--sdds-btn-danger-border-color:transparent;--sdds-btn-danger-background-hover:var(--sdds-red-600);--sdds-btn-danger-color-hover:var(--sdds-white);--sdds-btn-danger-border-color-hover:transparent;--sdds-btn-danger-background-active:var(--sdds-red-700);--sdds-btn-danger-color-active:var(--sdds-white);--sdds-btn-danger-border-color-active:transparent;--sdds-btn-danger-background-focus:var(--sdds-red-400);--sdds-btn-danger-color-focus:var(--sdds-white);--sdds-btn-danger-border-color-focus:var(--sdds-red-400);--sdds-btn-danger-outline-color-focus:var(--sdds-red-700);--sdds-btn-danger-background-disabled-primary:var(--sdds-grey-900);--sdds-btn-danger-background-disabled-secondary:var(--sdds-grey-868);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-danger-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-danger-border-color-disabled:transparent;--sdds-btn-icon-danger-fill:var(--sdds-white);--sdds-btn-icon-danger-color:var(--sdds-white)}.sdds-mode-dark .sdds-mode-variant-primary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary)}.sdds-mode-dark .sdds-mode-variant-secondary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-secondary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-secondary)}.sdds-on-white-bg{--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-secondary-disabled);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-secondary-disabled)}.sdds-btn-lg:not(.sdds-btn-only-icon) i.sdds-btn-icon{position:relative}.sdds-btn-lg:not(.sdds-btn-only-icon) i.sdds-btn-icon::before{font-size:20px;line-height:1;position:absolute;right:0}.sdds-btn-lg.sdds-btn-only-icon i.sdds-btn-icon::before{font-size:20px;line-height:1.25}.sdds-btn-md:not(.sdds-btn-only-icon) i.sdds-btn-icon{position:relative}.sdds-btn-md:not(.sdds-btn-only-icon) i.sdds-btn-icon::before{font-size:20px;line-height:1;position:absolute;right:0}.sdds-btn-md.sdds-btn-only-icon i.sdds-btn-icon::before{font-size:20px;line-height:1.25}.sdds-btn-sm:not(.sdds-btn-only-icon) i.sdds-btn-icon{position:relative}.sdds-btn-sm:not(.sdds-btn-only-icon) i.sdds-btn-icon::before{font-size:16px;line-height:1;position:absolute;right:0}.sdds-btn-sm.sdds-btn-only-icon i.sdds-btn-icon::before{font-size:16px;line-height:1.25}.sdds-btn.sdds-btn-primary .sdds-btn-icon{fill:var(--sdds-btn-primary-icon-fill);color:var(--sdds-btn-primary-icon-color);font-size:16px}.sdds-btn{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:flex;align-items:center;border-radius:4px;border:none;box-shadow:none;position:relative;text-decoration:none;cursor:pointer;height:56px;padding:var(--sdds-spacing-element-20);border:1px solid}.sdds-btn *{box-sizing:border-box}.sdds-btn:disabled,.sdds-btn.disabled{cursor:unset}.sdds-btn:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn span.sdds-btn-text+.sdds-btn-icon{margin-left:var(--sdds-spacing-element-16);width:20px;height:20px;line-height:0}.sdds-btn.sdds-btn-xs{padding:var(--sdds-spacing-element-4) var(--sdds-spacing-element-8);height:24px;font-size:12px;border-radius:2px}.sdds-btn.sdds-btn-xs:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-sm{padding:var(--sdds-spacing-element-12);height:40px}.sdds-btn.sdds-btn-sm.sdds-btn-only-icon{padding:11px}.sdds-btn.sdds-btn-sm:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-sm span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:var(--sdds-spacing-element-24);width:16px;height:16px}.sdds-btn.sdds-btn-sm.sdds-btn-fullbleed span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:var(--sdds-spacing-element-12)}.sdds-btn.sdds-btn-md{padding:var(--sdds-spacing-element-16);height:48px}.sdds-btn.sdds-btn-md.sdds-btn-only-icon{padding:13px}.sdds-btn.sdds-btn-md:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-md span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:var(--sdds-spacing-element-20)}.sdds-btn.sdds-btn-md.sdds-btn-fullbleed span.sdds-btn-text+.sdds-btn-icon{margin-left:var(--sdds-spacing-element-16)}.sdds-btn.sdds-btn-lg{padding:var(--sdds-spacing-element-20);height:56px}.sdds-btn.sdds-btn-lg.sdds-btn-only-icon{padding:17px}.sdds-btn.sdds-btn-lg:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-lg span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:28px}.sdds-btn.sdds-btn-lg.sdds-btn-fullbleed span.sdds-btn-text+.sdds-btn-icon{margin-left:var(--sdds-spacing-element-16)}.sdds-btn.sdds-btn-fullbleed{width:inherit;display:flex;justify-content:center}.sdds-btn.sdds-btn-fullbleed .sdds-btn-icon,.sdds-btn.sdds-btn-fullbleed.sdds-btn-icon{margin-left:var(--sdds-spacing-element-8)}.sdds-btn span.sdds-btn-text{align-self:baseline}.sdds-btn.sdds-btn-primary{background:var(--sdds-btn-primary-background);border-color:var(--sdds-btn-primary-border-color);color:var(--sdds-btn-primary-color);outline-color:var(--sdds-btn-primary-outline-color)}.sdds-btn.sdds-btn-primary .sdds-btn-icon{fill:var(--sdds-btn-icon-primary-fill);color:var(--sdds-btn-icon-primary-fill);fill:var(--sdds-btn-icon-primary-color);color:var(--sdds-btn-icon-primary-color);font-size:16px}.sdds-btn.sdds-btn-primary:hover{background:var(--sdds-btn-primary-background-hover);border-color:var(--sdds-btn-primary-border-color-hover);color:var(--sdds-btn-primary-color-hover);outline-color:var(--sdds-btn-primary-outline-color-hover)}.sdds-btn.sdds-btn-primary:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-primary-fill-hover);color:var(--sdds-btn-icon-primary-fill-hover);fill:var(--sdds-btn-icon-primary-color-hover);color:var(--sdds-btn-icon-primary-color-hover)}.sdds-btn.sdds-btn-primary:focus{background:var(--sdds-btn-primary-background-focus);border-color:var(--sdds-btn-primary-border-color-focus);color:var(--sdds-btn-primary-color-focus);outline-color:var(--sdds-btn-primary-outline-color-focus)}.sdds-btn.sdds-btn-primary:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-primary-fill-focus);color:var(--sdds-btn-icon-primary-fill-focus);fill:var(--sdds-btn-icon-primary-color-focus);color:var(--sdds-btn-icon-primary-color-focus)}.sdds-btn.sdds-btn-primary:active,.sdds-btn.sdds-btn-primary.active{background:var(--sdds-btn-primary-background-active);border-color:var(--sdds-btn-primary-border-color-active);color:var(--sdds-btn-primary-color-active);outline-color:var(--sdds-btn-primary-outline-color-active)}.sdds-btn.sdds-btn-primary.disabled,.sdds-btn.sdds-btn-primary:disabled{cursor:not-allowed;background:var(--sdds-btn-primary-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-primary-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-primary-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-primary-outline-color-disabled)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary{background:var(--sdds-btn-secondary-background);border-color:var(--sdds-btn-secondary-border-color);color:var(--sdds-btn-secondary-color);outline-color:var(--sdds-btn-secondary-outline-color)}.sdds-btn.sdds-btn-secondary .sdds-btn-icon{fill:var(--sdds-btn-icon-secondary-fill);color:var(--sdds-btn-icon-secondary-fill);fill:var(--sdds-btn-icon-secondary-color);color:var(--sdds-btn-icon-secondary-color);font-size:16px}.sdds-btn.sdds-btn-secondary:hover{background:var(--sdds-btn-secondary-background-hover);border-color:var(--sdds-btn-secondary-border-color-hover);color:var(--sdds-btn-secondary-color-hover);outline-color:var(--sdds-btn-secondary-outline-color-hover)}.sdds-btn.sdds-btn-secondary:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-secondary-fill-hover);color:var(--sdds-btn-icon-secondary-fill-hover);fill:var(--sdds-btn-icon-secondary-color-hover);color:var(--sdds-btn-icon-secondary-color-hover)}.sdds-btn.sdds-btn-secondary:focus{background:var(--sdds-btn-secondary-background-focus);border-color:var(--sdds-btn-secondary-border-color-focus);color:var(--sdds-btn-secondary-color-focus);outline-color:var(--sdds-btn-secondary-outline-color-focus)}.sdds-btn.sdds-btn-secondary:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-secondary-fill-focus);color:var(--sdds-btn-icon-secondary-fill-focus);fill:var(--sdds-btn-icon-secondary-color-focus);color:var(--sdds-btn-icon-secondary-color-focus)}.sdds-btn.sdds-btn-secondary:active,.sdds-btn.sdds-btn-secondary.active{background:var(--sdds-btn-secondary-background-active);border-color:var(--sdds-btn-secondary-border-color-active);color:var(--sdds-btn-secondary-color-active);outline-color:var(--sdds-btn-secondary-outline-color-active)}.sdds-btn.sdds-btn-secondary.disabled,.sdds-btn.sdds-btn-secondary:disabled{cursor:not-allowed;background:var(--sdds-btn-secondary-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-secondary-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-secondary-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-secondary-outline-color-disabled)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost{background:var(--sdds-btn-ghost-background);border-color:var(--sdds-btn-ghost-border-color);color:var(--sdds-btn-ghost-color);outline-color:var(--sdds-btn-ghost-outline-color)}.sdds-btn.sdds-btn-ghost .sdds-btn-icon{fill:var(--sdds-btn-icon-ghost-fill);color:var(--sdds-btn-icon-ghost-fill);fill:var(--sdds-btn-icon-ghost-color);color:var(--sdds-btn-icon-ghost-color);font-size:16px}.sdds-btn.sdds-btn-ghost:hover{background:var(--sdds-btn-ghost-background-hover);border-color:var(--sdds-btn-ghost-border-color-hover);color:var(--sdds-btn-ghost-color-hover);outline-color:var(--sdds-btn-ghost-outline-color-hover)}.sdds-btn.sdds-btn-ghost:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-ghost-fill-hover);color:var(--sdds-btn-icon-ghost-fill-hover);fill:var(--sdds-btn-icon-ghost-color-hover);color:var(--sdds-btn-icon-ghost-color-hover)}.sdds-btn.sdds-btn-ghost:focus{background:var(--sdds-btn-ghost-background-focus);border-color:var(--sdds-btn-ghost-border-color-focus);color:var(--sdds-btn-ghost-color-focus);outline-color:var(--sdds-btn-ghost-outline-color-focus)}.sdds-btn.sdds-btn-ghost:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-ghost-fill-focus);color:var(--sdds-btn-icon-ghost-fill-focus);fill:var(--sdds-btn-icon-ghost-color-focus);color:var(--sdds-btn-icon-ghost-color-focus)}.sdds-btn.sdds-btn-ghost:active,.sdds-btn.sdds-btn-ghost.active{background:var(--sdds-btn-ghost-background-active);border-color:var(--sdds-btn-ghost-border-color-active);color:var(--sdds-btn-ghost-color-active);outline-color:var(--sdds-btn-ghost-outline-color-active)}.sdds-btn.sdds-btn-ghost.disabled,.sdds-btn.sdds-btn-ghost:disabled{cursor:not-allowed;background:var(--sdds-btn-ghost-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-ghost-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-ghost-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-ghost-outline-color-disabled)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger{background:var(--sdds-btn-danger-background);border-color:var(--sdds-btn-danger-border-color);color:var(--sdds-btn-danger-color);outline-color:var(--sdds-btn-danger-outline-color)}.sdds-btn.sdds-btn-danger .sdds-btn-icon{fill:var(--sdds-btn-icon-danger-fill);color:var(--sdds-btn-icon-danger-fill);fill:var(--sdds-btn-icon-danger-color);color:var(--sdds-btn-icon-danger-color);font-size:16px}.sdds-btn.sdds-btn-danger:hover{background:var(--sdds-btn-danger-background-hover);border-color:var(--sdds-btn-danger-border-color-hover);color:var(--sdds-btn-danger-color-hover);outline-color:var(--sdds-btn-danger-outline-color-hover)}.sdds-btn.sdds-btn-danger:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-danger-fill-hover);color:var(--sdds-btn-icon-danger-fill-hover);fill:var(--sdds-btn-icon-danger-color-hover);color:var(--sdds-btn-icon-danger-color-hover)}.sdds-btn.sdds-btn-danger:focus{background:var(--sdds-btn-danger-background-focus);border-color:var(--sdds-btn-danger-border-color-focus);color:var(--sdds-btn-danger-color-focus);outline-color:var(--sdds-btn-danger-outline-color-focus)}.sdds-btn.sdds-btn-danger:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-danger-fill-focus);color:var(--sdds-btn-icon-danger-fill-focus);fill:var(--sdds-btn-icon-danger-color-focus);color:var(--sdds-btn-icon-danger-color-focus)}.sdds-btn.sdds-btn-danger:active,.sdds-btn.sdds-btn-danger.active{background:var(--sdds-btn-danger-background-active);border-color:var(--sdds-btn-danger-border-color-active);color:var(--sdds-btn-danger-color-active);outline-color:var(--sdds-btn-danger-outline-color-active)}.sdds-btn.sdds-btn-danger.disabled,.sdds-btn.sdds-btn-danger:disabled{cursor:not-allowed;background:var(--sdds-btn-danger-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-danger-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-danger-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-danger-outline-color-disabled)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}i.sdds-btn-icon[slot=icon]{line-height:1}:host(sdds-button){display:flex;align-items:center}:host(sdds-button) ::slotted([slot=icon]){width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button) .sdds-btn-sm ::slotted([slot=icon]){width:var(--sdds-spacing-element-16);height:var(--sdds-spacing-element-16)}:host(sdds-button[fullbleed]){width:inherit;justify-content:center}:host(sdds-button[only-icon]) .sdds-btn-sm{padding:11px}:host(sdds-button[only-icon]) .sdds-btn-md{padding:13px}:host(sdds-button[only-icon]) .sdds-btn-lg{padding:17px}:host(sdds-button:not([only-icon])){display:flex;align-items:center}:host(sdds-button:not([only-icon])) .sdds-btn-sm ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-24);width:var(--sdds-spacing-element-16);height:var(--sdds-spacing-element-16)}:host(sdds-button:not([only-icon])) .sdds-btn-sm.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-12)}:host(sdds-button:not([only-icon])) .sdds-btn-md ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-20);width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button:not([only-icon])) .sdds-btn-md.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-16)}:host(sdds-button:not([only-icon])) .sdds-btn-lg ::slotted([slot=icon]){margin-left:28px;width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button:not([only-icon])) .sdds-btn-lg.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-16)}";const t=class{constructor(s){d(this,s);this.text="";this.type="primary";this.size="lg";this.disabled=false;this.fullbleed=false;this.modeVariant=null;this.onlyIcon=false}componentWillLoad(){if(this.text===""){this.onlyIcon=true;this.host.setAttribute("only-icon","")}}render(){return s(n,{class:`${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}`},s("button",{class:`sdds-btn sdds-btn-${this.type} \n ${`sdds-btn-${this.size}`}\n ${this.disabled?"disabled":""}\n ${this.fullbleed?"sdds-btn-fullbleed":""}\n ${this.onlyIcon?"sdds-btn-only-icon":""}`},s("span",{class:"sdds-btn-text"},this.text),s("slot",{name:"icon"})))}get host(){return r(this)}};t.style=o;export{t as sdds_button};
2	- //# sourceMappingURL=p-ef70c653.entry.js.map

package/dist/tegel/p-ef70c653.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["buttonCss","SddsButton","componentWillLoad","this","text","onlyIcon","host","setAttribute","render","h","Host","class","modeVariant","type","size","disabled","fullbleed","name"],"sources":["./src/components/button/button.scss?tag=sdds-button&encapsulation=shadow","./src/components/button/button-component.tsx"],"sourcesContent":["@import './button-theme-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-on-white-bg {\n --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-secondary-disabled);\n --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-secondary-disabled);\n}\n\n$btn-lg-height: 56px;\n$btn-md-height: 48px;\n$btn-sm-height: 40px;\n$btn-xs-height: 24px;\n$btn-sm-only-icon-padding: 11px;\n$btn-md-only-icon-padding: 13px;\n$btn-lg-only-icon-padding: 17px;\n$types: (primary, secondary, ghost, danger);\n$props: (background, border-color, color, outline-color);\n$iconProps: (fill, color);\n\n@mixin button-base {\n @include sdds-box-sizing;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n display: flex;\n align-items: center;\n border-radius: 4px;\n border: none;\n box-shadow: none;\n position: relative;\n text-decoration: none;\n cursor: pointer;\n}\n\n.sdds-btn-lg {\n &:not(.sdds-btn-only-icon) {\n i.sdds-btn-icon {\n position: relative;\n\n &::before {\n font-size: 20px;\n line-height: 1;\n position: absolute;\n right: 0;\n }\n }\n }\n\n &.sdds-btn-only-icon {\n i.sdds-btn-icon::before {\n font-size: 20px;\n line-height: 1.25;\n }\n }\n}\n\n.sdds-btn-md {\n &:not(.sdds-btn-only-icon) {\n i.sdds-btn-icon {\n position: relative;\n\n &::before {\n font-size: 20px;\n line-height: 1;\n position: absolute;\n right: 0;\n }\n }\n }\n\n &.sdds-btn-only-icon {\n i.sdds-btn-icon::before {\n font-size: 20px;\n line-height: 1.25;\n }\n }\n}\n\n.sdds-btn-sm {\n &:not(.sdds-btn-only-icon) {\n i.sdds-btn-icon {\n position: relative;\n\n &::before {\n font-size: 16px;\n line-height: 1;\n position: absolute;\n right: 0;\n }\n }\n }\n\n &.sdds-btn-only-icon {\n i.sdds-btn-icon::before {\n font-size: 16px;\n line-height: 1.25;\n }\n }\n}\n\n.sdds-btn.sdds-btn-primary .sdds-btn-icon {\n fill: var(--sdds-btn-primary-icon-fill);\n color: var(--sdds-btn-primary-icon-color);\n font-size: 16px;\n}\n\n.sdds-btn {\n @include button-base;\n\n height: $btn-lg-height;\n padding: var(--sdds-spacing-element-20);\n border: 1px solid;\n\n &:disabled,\n &.disabled {\n cursor: unset;\n }\n\n &:focus {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n span.sdds-btn-text + .sdds-btn-icon {\n margin-left: var(--sdds-spacing-element-16);\n width: 20px;\n height: 20px;\n line-height: 0;\n }\n\n &.sdds-btn-xs {\n padding: var(--sdds-spacing-element-4) var(--sdds-spacing-element-8);\n height: $btn-xs-height;\n font-size: 12px;\n border-radius: 2px;\n\n &:focus {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n }\n\n &.sdds-btn-sm {\n padding: var(--sdds-spacing-element-12);\n height: $btn-sm-height;\n\n &.sdds-btn-only-icon {\n padding: $btn-sm-only-icon-padding;\n }\n\n &:focus {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n span.sdds-btn-text + .sdds-btn-icon {\n margin: unset;\n margin-left: var(--sdds-spacing-element-24);\n width: 16px;\n height: 16px;\n }\n\n &.sdds-btn-fullbleed {\n span.sdds-btn-text + .sdds-btn-icon {\n margin: unset;\n margin-left: var(--sdds-spacing-element-12);\n }\n }\n }\n\n &.sdds-btn-md {\n padding: var(--sdds-spacing-element-16);\n height: $btn-md-height;\n\n &.sdds-btn-only-icon {\n padding: $btn-md-only-icon-padding;\n }\n\n &:focus {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n span.sdds-btn-text + .sdds-btn-icon {\n margin: unset;\n margin-left: var(--sdds-spacing-element-20);\n }\n\n &.sdds-btn-fullbleed {\n span.sdds-btn-text + .sdds-btn-icon {\n margin-left: var(--sdds-spacing-element-16);\n }\n }\n }\n\n &.sdds-btn-lg {\n padding: var(--sdds-spacing-element-20);\n height: $btn-lg-height;\n\n &.sdds-btn-only-icon {\n padding: $btn-lg-only-icon-padding;\n }\n\n &:focus {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n span.sdds-btn-text + .sdds-btn-icon {\n margin: unset;\n margin-left: 28px;\n }\n\n &.sdds-btn-fullbleed {\n span.sdds-btn-text + .sdds-btn-icon {\n margin-left: var(--sdds-spacing-element-16);\n }\n }\n }\n\n &.sdds-btn-fullbleed {\n width: inherit;\n display: flex;\n justify-content: center;\n\n .sdds-btn-icon,\n &.sdds-btn-icon {\n margin-left: var(--sdds-spacing-element-8);\n }\n }\n\n span.sdds-btn-text {\n align-self: baseline;\n }\n\n @each $type in $types {\n &.sdds-btn-#{$type} {\n @each $prop in $props {\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop});\n }\n\n .sdds-btn-icon {\n @each $prop in $iconProps {\n fill: var(--sdds-btn-icon-#{$type}-#{$prop});\n color: var(--sdds-btn-icon-#{$type}-#{$prop});\n }\n\n font-size: 16px; //16px\n }\n\n &:hover {\n @each $prop in $props {\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-hover);\n }\n\n .sdds-btn-icon {\n @each $prop in $iconProps {\n fill: var(--sdds-btn-icon-#{$type}-#{$prop}-hover);\n color: var(--sdds-btn-icon-#{$type}-#{$prop}-hover);\n }\n }\n }\n\n &:focus {\n @each $prop in $props {\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-focus);\n }\n\n .sdds-btn-icon {\n @each $prop in $iconProps {\n fill: var(--sdds-btn-icon-#{$type}-#{$prop}-focus);\n color: var(--sdds-btn-icon-#{$type}-#{$prop}-focus);\n }\n }\n }\n\n &:active,\n &.active {\n @each $prop in $props {\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-active);\n }\n }\n\n &.disabled,\n &:disabled {\n @each $prop in $props {\n cursor: not-allowed;\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-disabled);\n\n .sdds-btn-icon,\n &.sdds-btn-icon {\n color: var(--sdds-grey-300);\n }\n }\n }\n }\n }\n}\n\ni.sdds-btn-icon[slot='icon'] {\n line-height: 1;\n}\n\n:host(sdds-button) {\n display: flex;\n align-items: center;\n\n ::slotted([slot='icon']) {\n width: var(--sdds-spacing-element-20);\n height: var(--sdds-spacing-element-20);\n }\n\n .sdds-btn-sm {\n ::slotted([slot='icon']) {\n width: var(--sdds-spacing-element-16);\n height: var(--sdds-spacing-element-16);\n }\n }\n}\n\n:host(sdds-button[fullbleed]) {\n width: inherit;\n justify-content: center;\n}\n\n:host(sdds-button[only-icon]) {\n .sdds-btn-sm {\n padding: $btn-sm-only-icon-padding;\n }\n\n .sdds-btn-md {\n padding: $btn-md-only-icon-padding;\n }\n\n .sdds-btn-lg {\n padding: $btn-lg-only-icon-padding;\n }\n}\n\n:host(sdds-button:not([only-icon])) {\n display: flex;\n align-items: center;\n\n .sdds-btn-sm {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-24);\n width: var(--sdds-spacing-element-16);\n height: var(--sdds-spacing-element-16);\n }\n\n &.sdds-btn-fullbleed {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-12);\n }\n }\n }\n\n .sdds-btn-md {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-20);\n width: var(--sdds-spacing-element-20);\n height: var(--sdds-spacing-element-20);\n }\n\n &.sdds-btn-fullbleed {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-16);\n }\n }\n }\n\n .sdds-btn-lg {\n ::slotted([slot='icon']) {\n // TODO - This should be a var value\n margin-left: 28px;\n width: var(--sdds-spacing-element-20);\n height: var(--sdds-spacing-element-20);\n }\n\n &.sdds-btn-fullbleed {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-16);\n }\n }\n }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-button',\n styleUrl: 'button.scss',\n shadow: true,\n})\nexport class SddsButton {\n // TODO: Make this mandatory prop. Send warning to user if empty and it is not icon only version of button.\n /** Text inside a button */\n @Prop() text: string = '';\n\n /** Type of button */\n @Prop() type: 'primary' | 'secondary' | 'ghost' | 'danger' = 'primary';\n\n @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'lg';\n\n /** Control for disabled state of component */\n @Prop() disabled: boolean = false;\n\n /** When enabled, makes button take 100% width */\n @Prop() fullbleed: boolean = false;\n\n /** Set the mode variant of the the button. */\n @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n @State() onlyIcon: boolean = false;\n\n @Element() host: HostElement;\n\n componentWillLoad() {\n if (this.text === '') {\n this.onlyIcon = true;\n this.host.setAttribute('only-icon', '');\n }\n }\n\n render() {\n return (\n <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n <button\n class={`sdds-btn sdds-btn-${this.type} \n ${`sdds-btn-${this.size}`}\n ${this.disabled ? 'disabled' : ''}\n ${this.fullbleed ? 'sdds-btn-fullbleed' : ''}\n ${this.onlyIcon ? 'sdds-btn-only-icon' : ''}`}\n >\n <span class=\"sdds-btn-text\">{this.text}</span>\n <slot name=\"icon\" />\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAY,y1yB,MCQLC,EAAU,M,mCAGE,G,UAGsC,U,UAEnB,K,cAGd,M,eAGC,M,iBAGkB,K,cAElB,K,CAI7BC,oBACE,GAAIC,KAAKC,OAAS,GAAI,CACpBD,KAAKE,SAAW,KAChBF,KAAKG,KAAKC,aAAa,YAAa,G,EAIxCC,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,GAAGR,KAAKS,cAAgB,KAAO,qBAAqBT,KAAKS,cAAe,MACrFH,EAAA,UACEE,MAAO,qBAAqBR,KAAKU,kBAC/B,YAAYV,KAAKW,mBACjBX,KAAKY,SAAW,WAAa,eAC7BZ,KAAKa,UAAY,qBAAuB,eACxCb,KAAKE,SAAW,qBAAuB,MAEzCI,EAAA,QAAME,MAAM,iBAAiBR,KAAKC,MAClCK,EAAA,QAAMQ,KAAK,U"}

package/dist/types/components/breadcrumb/breadcrumb-item/breadcrumb-item.d.ts DELETED Viewed

@@ -1,9 +0,0 @@
-export declare class SddsBreadcrumbItem {
-  /** Boolean for the current link */
-  current: boolean;
-  /** Href for the link */
-  href: string;
-  /** Toggle the disabled state for the breadcrumb */
-  disabled: boolean;
-  render(): any;
-}

package/dist/types/components/tabs/inline-tabs-default/inline-tab/inline-tab.d.ts DELETED Viewed

@@ -1,6 +0,0 @@
-export declare class InlineTabsChild {
-  label: string;
-  disabled: boolean;
-  default: boolean;
-  render(): any;
-}