npm - @scania/tegel - Versions diffs - 0.0.52 → 0.0.71-beta - Mend

@scania/tegel 0.0.52 → 0.0.71-beta

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

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

@@ -1 +0,0 @@

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

package/dist/tegel/p-1df2e987.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as s,c as d,h as i}from"./p-387e1798.js";const e=':root,.sdds-mode-light{--sdds-slider-label-color:var(--sdds-grey-958);--sdds-slider-thumb-color:var(--sdds-blue-800);--sdds-slider-divider-color:var(--sdds-grey-400);--sdds-slider-track-color:var(--sdds-grey-400);--sdds-slider-track-fill-color:var(--sdds-blue-800);--sdds-slider-input-inputfield-color:var(--sdds-grey-700);--sdds-slider-inputfield-color:var(--sdds-grey-400);--sdds-slider-controls-color:var(--sdds-grey-958);--sdds-slider-inputfield-background:var(--sdds-white);--sdds-slider-inputfield-box-shadow:var(--sdds-grey-400);--sdds-slider-divider-values-color:var(--sdds-grey-958);--sdds-slider-disabled:var(--sdds-grey-400);--sdds-slider-value-tooltip-background:var(--sdds-grey-800);--sdds-slider-value-tooltip-color:var(--sdds-white)}.sdds-mode-dark{--sdds-slider-label-color:var(--sdds-grey-100);--sdds-slider-thumb-color:var(--sdds-grey-100);--sdds-slider-divider-color:var(--sdds-grey-700);--sdds-slider-track-color:var(--sdds-grey-700);--sdds-slider-track-fill-color:var(--sdds-grey-100);--sdds-slider-inputfield-color:var(--sdds-grey-700);--sdds-slider-input-inputfield-color:var(--sdds-grey-400);--sdds-slider-controls-color:var(--sdds-grey-100);--sdds-slider-inputfield-background:var(--sdds-grey-900);--sdds-slider-inputfield-box-shadow:var(--sdds-grey-800);--sdds-slider-divider-values-color:var(--sdds-grey-100);--sdds-slider-disabled:var(--sdds-grey-700);--sdds-slider-value-tooltip-background:var(--sdds-grey-200);--sdds-slider-value-tooltip-color:var(--sdds-grey-958)}sdds-slider{box-sizing:border-box;width:100%}sdds-slider {box-sizing:border-box}sdds-slider input[type=range].sdds-slider-native-element{display:none}.sdds-slider-wrapper{width:100%}.sdds-slider-wrapper.read-only{pointer-events:none}.sdds-slider{width:100%;display:flex;flex-wrap:nowrap;padding-top:65px}.sdds-slider .sdds-slider-inner{width:100%;height:20px;position:relative}.sdds-slider .sdds-slider__controls{position:relative;top:-25px}.sdds-slider .sdds-slider__controls .sdds-slider__control{cursor:pointer}.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus{padding:18px 18px 18px 0}.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus{padding:18px 0 18px 18px}.sdds-slider .sdds-slider__input-values{position:relative;top:-25px;display:flex;flex-wrap:nowrap;align-items:center}.sdds-slider .sdds-slider__input-values .sdds-slider__input-value{user-select:none;padding:18px;color:var(--sdds-grey-700);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper{background-color:var(--sdds-slider-inputfield-background);display:flex;align-items:center;justify-content:center}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-slider-input-inputfield-color);border:0;background-color:transparent;text-align:center;padding:12px;box-shadow:inset 0 -1px 0 var(--sdds-slider-inputfield-box-shadow);border-radius:4px 4px 0 0}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field:hover{box-shadow:inset 0 -1px 0 var(--sdds-grey-600)}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field:focus{box-shadow:inset 0 -2px 0 var(--sdds-blue-400);outline:0}.sdds-slider label{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);user-select:none;position:absolute;color:var(--sdds-slider-label-color);top:-16px;transform:translateY(-100%)}.sdds-slider label.offset{top:-35px}.sdds-slider .sdds-slider__value{font:var(--sdds-detail-01);letter-spacing:var(--sdds-detail-01-ls);user-select:none;border-radius:4px;padding:8px;position:absolute;transform:translate(-50%, -100%);top:-24px;background-color:var(--sdds-slider-value-tooltip-background);color:var(--sdds-slider-value-tooltip-color)}.sdds-slider .sdds-slider__value svg{color:var(--sdds-slider-value-tooltip-background);position:absolute;left:50%;transform:translateX(-50%);top:34px}.sdds-slider .sdds-slider__scrubber{position:absolute}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner{width:20px;height:20px;border-radius:100%;background-color:var(--sdds-slider-thumb-color);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner::before{content:" ";display:none;width:48px;height:48px;background-color:var(--sdds-slider-thumb-color);position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%, -50%)}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner:hover::before{display:block;opacity:0.08}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed{width:24px;height:24px}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed::before{display:block;opacity:0.16 !important}.sdds-slider .sdds-slider__value-dividers-wrapper{position:relative;width:100%;pointer-events:none}.sdds-slider .sdds-slider__value-dividers{pointer-events:none;position:absolute;display:flex;justify-content:space-between;width:100%}.sdds-slider .sdds-slider__value-dividers .sdds-slider__value-divider{transform:translateY(-50%);height:16px;background-color:var(--sdds-slider-divider-color);color:var(--sdds-slider-divider-values-color);width:1px}.sdds-slider .sdds-slider__value-dividers .sdds-slider__value-divider span{display:block;user-select:none;color:var(-sdds-grey-700);font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);position:relative;top:-7px;left:50%;transform:translate(-50%, -100%);width:50px;text-align:center}.sdds-slider .sdds-slider__track{width:100%;height:2px;border-radius:1px;background-color:var(--sdds-slider-track-color);position:relative}.sdds-slider .sdds-slider__track:focus{outline:0}.sdds-slider .sdds-slider__track:focus .sdds-slider__scrubber .sdds-slider__scrubber-inner{width:24px;height:24px}.sdds-slider .sdds-slider__track:focus .sdds-slider__scrubber .sdds-slider__scrubber-inner::before{display:block;opacity:0.08}.sdds-slider .sdds-slider__track .sdds-slider__track-fill{background-color:var(--sdds-slider-track-fill-color);border-radius:2px;height:4px;position:absolute;left:0;top:-1px}.sdds-slider.disabled{cursor:not-allowed}.sdds-slider.disabled>{pointer-events:none}.sdds-slider.disabled label{color:var(--sdds-slider-disabled)}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control{cursor:default}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus svg,.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus svg{fill:var(--sdds-slider-disabled)}.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-value{color:var(--sdds-slider-disabled)}.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper{pointer-events:none}.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field{color:var(--sdds-slider-disabled);pointer-events:none}.sdds-slider.disabled .sdds-slider__value{display:none}.sdds-slider.disabled .sdds-slider__track .sdds-slider__track-fill{background-color:var(--sdds-slider-disabled)}.sdds-slider.disabled .sdds-slider__value-dividers .sdds-slider__value-divider span{color:var(--sdds-slider-disabled)}.sdds-slider.disabled .sdds-slider__scrubber{pointer-events:none}.sdds-slider.disabled .sdds-slider__scrubber .sdds-slider__scrubber-inner{background-color:var(--sdds-slider-disabled);cursor:default}.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner{width:16px;height:16px}.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner::before{width:40px;height:40px}.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed{width:20px;height:20px}.sdds-slider .sdds-slider__controls .sdds-slider__control{cursor:default}.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus sdds-icon,.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus sdds-icon{color:var(--sdds-slider-controls-color)}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control{cursor:default}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus sdds-icon,.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus sdds-icon{color:var(--sdds-slider-disabled)}';const r=class{constructor(i){s(this,i);this.sddsChange=d(this,"sddsChange",7);this.wrapperElement=null;this.scrubberElement=null;this.scrubberInnerElement=null;this.dividersElement=null;this.trackElement=null;this.trackFillElement=null;this.minusElement=null;this.plusElement=null;this.inputElement=null;this.nativeRangeInputElement=null;this.scrubberGrabPos={x:0,y:0};this.scrubberGrabbed=false;this.scrubberLeft=0;this.tickValues=[];this.disabledState=false;this.readonlyState=false;this.useControls=false;this.useInput=false;this.useSmall=false;this.useSnapping=false;this.supposedValueSlot=-1;this.eventListenersAdded=false;this.resizeObserverAdded=false;this.label="";this.value="0";this.min="0";this.max="100";this.ticks="0";this.showTickNumbers=false;this.tooltip=false;this.disabled=false;this.readOnly=false;this.controls=false;this.input=false;this.step="1";this.name="";this.scrubberSize="lg";this.snap=false;this.sliderId=crypto.randomUUID()}async reset(){this.componentWillLoad();this.componentDidLoad()}handleKeydown(s){switch(s.key){case"ArrowLeft":this.stepLeft();break;case"ArrowRight":this.stepRight();break}}handleMouseUp(){if(!this.scrubberGrabbed){return}this.scrubberGrabbed=false;this.scrubberInnerElement.classList.remove("pressed");this.updateValue();this.trackElement.focus()}handleTouchEnd(){if(!this.scrubberGrabbed){return}this.scrubberGrabbed=false;this.scrubberInnerElement.classList.remove("pressed");this.updateValue();this.trackElement.focus()}handleMouseMove(s){if(!this.scrubberGrabbed){return}const d=parseInt(this.ticks);const i=this.trackElement.getBoundingClientRect();let e=s.clientX-i.left;this.supposedValueSlot=-1;if(this.useSnapping&&d>0){const s=Math.round(this.getTrackWidth()/(d+1));e=Math.round(e/s)s;this.supposedValueSlot=Math.round(e/s)}this.scrubberLeft=this.constrainScrubber(e);this.scrubberElement.style.left=`${this.scrubberLeft}px`;this.updateValue();this.updateTrack()}handleTouchMove(s){s.preventDefault();if(!this.scrubberGrabbed){return}const d=parseInt(this.ticks);const i=this.trackElement.getBoundingClientRect();let e=s.touches[0].clientX-i.left;this.supposedValueSlot=-1;if(this.useSnapping&&d>0){const s=Math.round(this.getTrackWidth()/(d+1));e=Math.round(e/s)s;this.supposedValueSlot=Math.round(e/s)}this.scrubberLeft=this.constrainScrubber(e);this.scrubberElement.style.left=`${this.scrubberLeft}px`;this.updateValue();this.updateTrack()}updateTrack(){const s=this.getTrackWidth();const d=this.scrubberLeft/s100;this.trackFillElement.style.width=`${d}%`}dispatchChangeEvent(){this.sddsChange.emit({value:this.value})}updateValue(){const s=this.getTrackWidth();if(this.supposedValueSlot>0){const s=this.tickValues[this.supposedValueSlot];this.value=`${s}`}else{const d=this.scrubberLeft/s;this.value=`${Math.trunc(this.getMin()+d(this.getMax()-this.getMin()))}`}this.dispatchChangeEvent()}updateValueForced(s){this.value=s;this.dispatchChangeEvent()}getMin(){return parseFloat(this.min)}getMax(){return parseFloat(this.max)}constrainScrubber(s){const d=this.getTrackWidth();if(s<0){return 0}if(s>d){return d}return s}getTrackWidth(){const s=this.trackElement.getBoundingClientRect();return s.right-s.left}calculateScrubberLeftFromValue(s){const d=s;const i=this.getTrackWidth();const e=d-this.getMin();const r=this.getMax()-this.getMin();const t=e/ri;this.scrubberLeft=t;this.scrubberElement.style.left=`${this.scrubberLeft}px`}componentDidLoad(){if(!this.resizeObserverAdded){this.resizeObserverAdded=true;const s=new ResizeObserver((()=>{this.calculateScrubberLeftFromValue(this.value);this.updateTrack()}));s.observe(this.wrapperElement)}if(!this.eventListenersAdded){this.eventListenersAdded=true;this.scrubberElement.addEventListener("mousedown",(s=>{s.preventDefault();this.grabScrubber(s.offsetX,s.offsetY)}));this.scrubberElement.addEventListener("touchstart",(s=>{const d=this.scrubberElement.getBoundingClientRect();const i=s.targetTouches[0].pageX-d.left;const e=s.targetTouches[0].pageY-d.top;this.grabScrubber(i,e)}));if(this.useControls){this.minusElement.addEventListener("click",(()=>{this.stepLeft()}));this.plusElement.addEventListener("click",(()=>{this.stepRight()}))}if(this.inputElement){this.inputElement.addEventListener("keydown",(s=>{s.stopPropagation();if(s.key==="Enter"){let s=parseInt(this.inputElement.value);if(s<this.getMin()){s=this.getMin()}else if(s>this.getMax()){s=this.getMax()}this.calculateScrubberLeftFromValue(s);this.updateValueForced(s);this.updateTrack();this.inputElement.blur();this.wrapperElement.focus()}}))}}this.calculateScrubberLeftFromValue(this.value);this.updateTrack()}grabScrubber(s,d){if(this.readonlyState){return}this.scrubberGrabPos={x:s,y:d};this.scrubberGrabbed=true;this.scrubberInnerElement.classList.add("pressed")}calculateInputSizeFromMax(){return this.max.length}controlsStep(s){if(this.readonlyState\|\|this.disabled){return}const d=this.getTrackWidth();const i=this.scrubberLeft/d;const e=parseInt(this.ticks);let r=this.getMin()+i(this.getMax()-this.getMin());r+=s;if(r<this.getMin()){r=this.getMin()}else if(r>this.getMax()){r=this.getMax()}this.value=`${r}`;if(this.useSnapping&&e>0){const d=s>0?1:-1;this.supposedValueSlot+=d;if(this.supposedValueSlot<0){this.supposedValueSlot=0}else if(this.supposedValueSlot>e+1){this.supposedValueSlot=e+1}}this.calculateScrubberLeftFromValue(r);this.updateTrack();this.updateValue()}stepLeft(){this.controlsStep(-parseInt(this.step))}stepRight(){this.controlsStep(parseInt(this.step))}componentWillLoad(){const s=parseInt(this.ticks);if(s>0){this.tickValues=[this.getMin()];const d=(this.getMax()-this.getMin())/(s+1);for(let i=1;i<s+1;i++){this.tickValues.push(this.getMin()+Math.round(d*i))}this.tickValues.push(this.getMax())}if(this.disabled){this.disabledState=true}else{this.disabledState=false}if(this.readOnly){this.readonlyState=true}else{this.readonlyState=false}this.useInput=false;this.useControls=false;if(this.controls){this.useControls=true}else if(this.input){this.useInput=true}this.useSmall=false;if(this.scrubberSize==="sm"){this.useSmall=true}this.useSnapping=false;if(this.snap){this.useSnapping=true}const d=this.getMin();const i=this.getMax();if(d>i){console.warn("min-prop must have a higher value than max-prop for the component to work correctly.");this.disabledState=true}}render(){return i("div",{class:`sdds-slider-wrapper ${this.readonlyState?"read-only":""}`},i("input",{ref:s=>{this.nativeRangeInputElement=s},class:"sdds-slider-native-element",type:"range",value:this.value,name:this.name,min:this.min,max:this.max,disabled:this.disabled}),i("div",{class:`sdds-slider ${this.disabledState?"disabled":""} ${this.useSmall?"sdds-slider-small":""}`,ref:s=>{this.wrapperElement=s}},this.useInput&&i("div",{class:"sdds-slider__input-values"},i("div",{ref:s=>{this.minusElement=s},class:"sdds-slider__input-value"},this.min)),this.useControls&&i("div",{class:"sdds-slider__controls"},i("div",{ref:s=>this.minusElement=s,class:"sdds-slider__control sdds-slider__control-minus"},i("sdds-icon",{name:"minus",size:"16px"}))),i("div",{class:"sdds-slider-inner"},i("label",{class:this.tickValues.length>0&&"offset"},this.label),this.tickValues.length>0&&i("div",{class:"sdds-slider__value-dividers-wrapper"},i("div",{ref:s=>{this.dividersElement=s},class:"sdds-slider__value-dividers"},this.tickValues.map((s=>i("div",{class:"sdds-slider__value-divider"},this.showTickNumbers&&i("span",null,s)))))),i("div",{class:"sdds-slider__track",ref:s=>{this.trackElement=s},tabindex:this.disabled?"-1":"0"},i("div",{class:"sdds-slider__track-fill",ref:s=>{this.trackFillElement=s}}),i("div",{class:"sdds-slider__scrubber",ref:s=>{this.scrubberElement=s}},this.tooltip&&i("div",{class:"sdds-slider__value"},this.value,i("svg",{width:"18",height:"14",viewBox:"0 0 18 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i("path",{d:"M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z",fill:"currentColor"}))),i("div",{class:"sdds-slider__scrubber-inner",ref:s=>{this.scrubberInnerElement=s}})))),this.useInput&&i("div",{class:"sdds-slider__input-values"},i("div",{ref:s=>{this.minusElement=s},class:"sdds-slider__input-value"},this.max),i("div",{class:"sdds-slider__input-field-wrapper"},i("input",{onFocus:s=>{if(this.readonlyState){s.preventDefault();this.inputElement.blur()}},size:this.calculateInputSizeFromMax(),class:"sdds-slider__input-field",value:this.value,ref:s=>{this.inputElement=s}}))),this.useControls&&i("div",{class:"sdds-slider__controls"},i("div",{ref:s=>this.plusElement=s,class:"sdds-slider__control sdds-slider__control-plus"},i("sdds-icon",{name:"plus",size:"16px"})))))}};r.style=e;export{r as sdds_slider};
2	- //# sourceMappingURL=p-1df2e987.entry.js.map

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

@@ -1 +0,0 @@

- {"version":3,"names":["sliderCss","Slider","this","wrapperElement","scrubberElement","scrubberInnerElement","dividersElement","trackElement","trackFillElement","minusElement","plusElement","inputElement","nativeRangeInputElement","scrubberGrabPos","x","y","scrubberGrabbed","scrubberLeft","tickValues","disabledState","readonlyState","useControls","useInput","useSmall","useSnapping","supposedValueSlot","eventListenersAdded","resizeObserverAdded","crypto","randomUUID","async","componentWillLoad","componentDidLoad","handleKeydown","event","key","stepLeft","stepRight","handleMouseUp","classList","remove","updateValue","focus","handleTouchEnd","handleMouseMove","numTicks","parseInt","ticks","trackRect","getBoundingClientRect","localLeft","clientX","left","v","Math","round","getTrackWidth","constrainScrubber","style","updateTrack","handleTouchMove","preventDefault","touches","trackWidth","percentageFilled","width","dispatchChangeEvent","sddsChange","emit","value","supposedValue","percentage","trunc","getMin","getMax","updateValueForced","parseFloat","min","max","right","calculateScrubberLeftFromValue","initValue","normalizedValue","normalizedMax","calculatedLeft","resizeObserver","ResizeObserver","observe","addEventListener","grabScrubber","offsetX","offsetY","rect","targetTouches","pageX","pageY","top","stopPropagation","newValue","blur","xOffset","yOffset","add","calculateInputSizeFromMax","length","controlsStep","delta","disabled","currentValue","stepDir","step","i","push","readOnly","controls","input","scrubberSize","snap","console","warn","render","h","class","ref","el","type","name","size","label","map","showTickNumbers","tabindex","tooltip","height","viewBox","fill","xmlns","d","onFocus","e"],"sources":["./src/components/slider/slider.scss?tag=sdds-slider","./src/components/slider/slider.tsx"],"sourcesContent":["@import 'slider-vars';\n@import '../../mixins/box-sizing';\n\nsdds-slider {\n @include sdds-box-sizing;\n\n width: 100%;\n\n input[type='range'].sdds-slider-native-element {\n display: none;\n }\n}\n\n.sdds-slider-wrapper {\n width: 100%;\n\n &.read-only {\n pointer-events: none;\n }\n}\n\n.sdds-slider {\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n padding-top: 65px;\n\n .sdds-slider-inner {\n width: 100%;\n height: 20px;\n position: relative;\n }\n\n .sdds-slider__controls {\n position: relative;\n top: -25px;\n\n .sdds-slider__control {\n cursor: pointer;\n\n &.sdds-slider__control-minus {\n padding: 18px 18px 18px 0;\n }\n\n &.sdds-slider__control-plus {\n padding: 18px 0 18px 18px;\n }\n }\n }\n\n .sdds-slider__input-values {\n position: relative;\n top: -25px;\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n\n .sdds-slider__input-value {\n user-select: none;\n padding: 18px;\n color: var(--sdds-grey-700);\n\n //@include type-style('detail-02');\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n }\n\n .sdds-slider__input-field-wrapper {\n background-color: var(--sdds-slider-inputfield-background);\n display: flex;\n align-items: center;\n justify-content: center;\n\n input.sdds-slider__input-field {\n // @include type-style('detail-02');\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-slider-input-inputfield-color);\n border: 0;\n background-color: transparent;\n text-align: center;\n padding: 12px;\n box-shadow: inset 0 -1px 0 var(--sdds-slider-inputfield-box-shadow);\n border-radius: 4px 4px 0 0;\n\n &:hover {\n box-shadow: inset 0 -1px 0 var(--sdds-grey-600);\n }\n\n &:focus {\n box-shadow: inset 0 -2px 0 var(--sdds-blue-400);\n outline: 0;\n }\n }\n }\n }\n\n label {\n // @include type-style('detail-05');\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n user-select: none;\n position: absolute;\n color: var(--sdds-slider-label-color);\n top: -16px;\n transform: translateY(-100%);\n\n &.offset {\n top: -35px;\n }\n }\n\n .sdds-slider__value {\n // @include type-style('detail-01');\n font: var(--sdds-detail-01);\n letter-spacing: var(--sdds-detail-01-ls);\n user-select: none;\n border-radius: 4px;\n padding: 8px;\n position: absolute;\n transform: translate(-50%, -100%);\n top: -24px;\n background-color: var(--sdds-slider-value-tooltip-background);\n color: var(--sdds-slider-value-tooltip-color);\n\n svg {\n color: var(--sdds-slider-value-tooltip-background);\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n top: 34px;\n }\n }\n\n .sdds-slider__scrubber {\n position: absolute;\n\n .sdds-slider__scrubber-inner {\n width: 20px;\n height: 20px;\n border-radius: 100%;\n background-color: var(--sdds-slider-thumb-color);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n cursor: pointer;\n\n &::before {\n content: ' ';\n display: none;\n width: 48px;\n height: 48px;\n background-color: var(--sdds-slider-thumb-color);\n position: absolute;\n border-radius: 100%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n &:hover {\n &::before {\n display: block;\n opacity: 0.08;\n }\n }\n\n &.pressed {\n width: 24px;\n height: 24px;\n\n &::before {\n display: block;\n opacity: 0.16 !important;\n }\n }\n }\n }\n\n .sdds-slider__value-dividers-wrapper {\n position: relative;\n width: 100%;\n pointer-events: none;\n }\n\n .sdds-slider__value-dividers {\n pointer-events: none;\n position: absolute;\n display: flex;\n justify-content: space-between;\n width: 100%;\n\n .sdds-slider__value-divider {\n transform: translateY(-50%);\n height: 16px;\n background-color: var(--sdds-slider-divider-color);\n color: var(--sdds-slider-divider-values-color);\n width: 1px;\n\n span {\n display: block;\n user-select: none;\n color: var(-sdds-grey-700);\n\n // @include type-style('detail-05');\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n position: relative;\n top: -7px;\n left: 50%;\n transform: translate(-50%, -100%);\n width: 50px;\n text-align: center;\n }\n }\n }\n\n .sdds-slider__track {\n width: 100%;\n height: 2px;\n border-radius: 1px;\n background-color: var(--sdds-slider-track-color);\n position: relative;\n\n &:focus {\n outline: 0;\n\n .sdds-slider__scrubber {\n .sdds-slider__scrubber-inner {\n width: 24px;\n height: 24px;\n\n &::before {\n display: block;\n opacity: 0.08;\n }\n }\n }\n }\n\n .sdds-slider__track-fill {\n background-color: var(--sdds-slider-track-fill-color);\n border-radius: 2px;\n height: 4px;\n position: absolute;\n left: 0;\n top: -1px;\n }\n }\n\n &.disabled {\n // pointer-events: none;\n cursor: not-allowed;\n\n > * {\n pointer-events: none;\n }\n\n label {\n color: var(--sdds-slider-disabled);\n }\n\n .sdds-slider__controls {\n .sdds-slider__control {\n cursor: default;\n\n &.sdds-slider__control-minus,\n &.sdds-slider__control-plus {\n svg {\n fill: var(--sdds-slider-disabled);\n }\n }\n }\n }\n\n .sdds-slider__input-values {\n .sdds-slider__input-value {\n color: var(--sdds-slider-disabled);\n }\n\n .sdds-slider__input-field-wrapper {\n pointer-events: none;\n\n input.sdds-slider__input-field {\n color: var(--sdds-slider-disabled);\n pointer-events: none;\n }\n }\n }\n\n .sdds-slider__value {\n display: none;\n }\n\n .sdds-slider__track {\n .sdds-slider__track-fill {\n background-color: var(--sdds-slider-disabled);\n }\n }\n\n .sdds-slider__value-dividers {\n .sdds-slider__value-divider {\n span {\n color: var(--sdds-slider-disabled);\n }\n }\n }\n\n .sdds-slider__scrubber {\n pointer-events: none;\n\n .sdds-slider__scrubber-inner {\n background-color: var(--sdds-slider-disabled);\n cursor: default;\n }\n }\n }\n\n &.sdds-slider-small {\n .sdds-slider__scrubber {\n .sdds-slider__scrubber-inner {\n width: 16px;\n height: 16px;\n\n &::before {\n width: 40px;\n height: 40px;\n }\n\n &.pressed {\n width: 20px;\n height: 20px;\n }\n }\n }\n }\n}\n\n.sdds-slider {\n .sdds-slider__controls {\n .sdds-slider__control {\n cursor: default;\n\n &.sdds-slider__control-minus,\n &.sdds-slider__control-plus {\n sdds-icon {\n color: var(--sdds-slider-controls-color);\n }\n }\n }\n }\n\n &.disabled {\n .sdds-slider__controls {\n .sdds-slider__control {\n cursor: default;\n\n &.sdds-slider__control-minus,\n &.sdds-slider__control-plus {\n sdds-icon {\n color: var(--sdds-slider-disabled);\n }\n }\n }\n }\n }\n}\n","import { Component, h, Prop, Listen, EventEmitter, Event, Method } from '@stencil/core';\n\n@Component({\n tag: 'sdds-slider',\n styleUrl: 'slider.scss',\n shadow: false,\n})\nexport class Slider {\n /** Text for label */\n @Prop() label: string = '';\n\n /** Initial value */\n @Prop() value: string = '0';\n\n /** Minimum value */\n @Prop() min: string = '0';\n\n /** Maximum value */\n @Prop() max: string = '100';\n\n /** Number of tick markers (tick for min- and max-value will be added automatically) */\n @Prop() ticks: string = '0';\n\n /** Decide to show numbers above the tick markers or not */\n @Prop() showTickNumbers: boolean = false;\n\n /** Decide to show the tooltip or not */\n @Prop() tooltip: boolean = false;\n\n /** Sets the disabled state for the whole component */\n @Prop() disabled: boolean = false;\n\n /** Sets the read only state for the whole component */\n @Prop() readOnly: boolean = false;\n\n /** Decide to show the controls or not */\n @Prop() controls: boolean = false;\n\n /** Decide to show the input field or not */\n @Prop() input: boolean = false;\n\n /** Defines how much to increment/decrement the value when using controls */\n @Prop() step: string = '1';\n\n /** Name property (will be inherited by the native slider component) */\n @Prop() name: string = '';\n\n /** Sets the size of the scrubber */\n @Prop() scrubberSize: 'sm' | 'lg' = 'lg';\n\n /** Snap to the ticks grid */\n @Prop() snap: boolean = false;\n\n /** Id for the sliders input element, randomly generated if not specified. */\n @Prop() sliderId: string = crypto.randomUUID();\n\n wrapperElement: HTMLElement = null;\n\n scrubberElement: HTMLElement = null;\n\n scrubberInnerElement: HTMLElement = null;\n\n dividersElement: HTMLElement = null;\n\n trackElement: HTMLElement = null;\n\n trackFillElement: HTMLElement = null;\n\n minusElement: HTMLElement = null;\n\n plusElement: HTMLElement = null;\n\n inputElement: HTMLInputElement = null;\n\n nativeRangeInputElement: HTMLInputElement = null;\n\n scrubberGrabPos: object = { x: 0, y: 0 };\n\n scrubberGrabbed: boolean = false;\n\n scrubberLeft: number = 0;\n\n tickValues: Array<number> = [];\n\n disabledState: boolean = false;\n\n readonlyState: boolean = false;\n\n useControls: boolean = false;\n\n useInput: boolean = false;\n\n useSmall: boolean = false;\n\n useSnapping: boolean = false;\n\n supposedValueSlot: number = -1;\n\n eventListenersAdded: boolean = false;\n\n resizeObserverAdded: boolean = false;\n\n /** Sends the value of the slider when changed. */\n @Event({\n eventName: 'sddsChange',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsChange: EventEmitter<{\n value: string;\n }>;\n\n /** Public method to re-initialise the slider if some configuration props are changed */\n @Method() async reset() {\n // @TODO: maybe refactor to use watch-decorators instead\n this.componentWillLoad();\n this.componentDidLoad();\n }\n\n @Listen('keydown')\n handleKeydown(event) {\n switch (event.key) {\n case 'ArrowLeft':\n this.stepLeft();\n break;\n\n case 'ArrowRight':\n this.stepRight();\n break;\n\n default:\n break;\n }\n }\n\n @Listen('mouseup', { target: 'window' })\n handleMouseUp() {\n if (!this.scrubberGrabbed) {\n return;\n }\n\n this.scrubberGrabbed = false;\n this.scrubberInnerElement.classList.remove('pressed');\n this.updateValue();\n\n this.trackElement.focus();\n }\n\n @Listen('touchend', { target: 'window' })\n handleTouchEnd() {\n if (!this.scrubberGrabbed) {\n return;\n }\n\n this.scrubberGrabbed = false;\n this.scrubberInnerElement.classList.remove('pressed');\n this.updateValue();\n\n this.trackElement.focus();\n }\n\n @Listen('mousemove', { target: 'window' })\n handleMouseMove(event) {\n if (!this.scrubberGrabbed) {\n return;\n }\n\n const numTicks = parseInt(this.ticks);\n const trackRect = this.trackElement.getBoundingClientRect();\n let localLeft = event.clientX - trackRect.left;\n this.supposedValueSlot = -1;\n\n if (this.useSnapping && numTicks > 0) {\n const v = Math.round(this.getTrackWidth() / (numTicks + 1));\n localLeft = Math.round(localLeft / v) * v;\n\n this.supposedValueSlot = Math.round(localLeft / v);\n }\n\n this.scrubberLeft = this.constrainScrubber(localLeft);\n this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n\n this.updateValue();\n this.updateTrack();\n }\n\n @Listen('touchmove', { target: 'window' })\n handleTouchMove(event) {\n event.preventDefault();\n\n if (!this.scrubberGrabbed) {\n return;\n }\n\n const numTicks = parseInt(this.ticks);\n const trackRect = this.trackElement.getBoundingClientRect();\n let localLeft = event.touches[0].clientX - trackRect.left;\n\n this.supposedValueSlot = -1;\n\n if (this.useSnapping && numTicks > 0) {\n const v = Math.round(this.getTrackWidth() / (numTicks + 1));\n localLeft = Math.round(localLeft / v) * v;\n\n this.supposedValueSlot = Math.round(localLeft / v);\n }\n\n this.scrubberLeft = this.constrainScrubber(localLeft);\n this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n\n this.updateValue();\n this.updateTrack();\n }\n\n updateTrack() {\n const trackWidth = this.getTrackWidth();\n const percentageFilled = (this.scrubberLeft / trackWidth) * 100;\n\n this.trackFillElement.style.width = `${percentageFilled}%`;\n }\n\n dispatchChangeEvent() {\n this.sddsChange.emit({ value: this.value });\n }\n\n updateValue() {\n const trackWidth = this.getTrackWidth();\n\n /* if snapping (supposedValueSlot > 0) is enabled, make sure we display the supposed value (instead of maybe getting a -1/+1 depending on rounding) */\n if (this.supposedValueSlot > 0) {\n const supposedValue = this.tickValues[this.supposedValueSlot];\n this.value = `${supposedValue}`;\n } else {\n const percentage = this.scrubberLeft / trackWidth;\n this.value = `${Math.trunc(this.getMin() + percentage * (this.getMax() - this.getMin()))}`;\n }\n\n this.dispatchChangeEvent();\n }\n\n updateValueForced(value) {\n this.value = value;\n this.dispatchChangeEvent();\n }\n\n getMin() {\n return parseFloat(this.min);\n }\n\n getMax() {\n return parseFloat(this.max);\n }\n\n constrainScrubber(x) {\n const width = this.getTrackWidth();\n\n if (x < 0) {\n return 0;\n }\n\n if (x > width) {\n return width;\n }\n\n return x;\n }\n\n getTrackWidth() {\n const trackRect = this.trackElement.getBoundingClientRect();\n return trackRect.right - trackRect.left;\n }\n\n calculateScrubberLeftFromValue(value) {\n const initValue = value;\n const trackWidth = this.getTrackWidth();\n\n const normalizedValue = initValue - this.getMin();\n const normalizedMax = this.getMax() - this.getMin();\n\n const calculatedLeft = (normalizedValue / normalizedMax) * trackWidth;\n\n this.scrubberLeft = calculatedLeft;\n\n this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n }\n\n componentDidLoad() {\n if (!this.resizeObserverAdded) {\n this.resizeObserverAdded = true;\n\n const resizeObserver = new ResizeObserver((/* entries */) => {\n this.calculateScrubberLeftFromValue(this.value);\n this.updateTrack();\n });\n\n resizeObserver.observe(this.wrapperElement);\n }\n\n if (!this.eventListenersAdded) {\n this.eventListenersAdded = true;\n\n this.scrubberElement.addEventListener('mousedown', (event) => {\n event.preventDefault();\n this.grabScrubber(event.offsetX, event.offsetY);\n });\n\n this.scrubberElement.addEventListener('touchstart', (event) => {\n const rect = this.scrubberElement.getBoundingClientRect();\n const x = event.targetTouches[0].pageX - rect.left;\n const y = event.targetTouches[0].pageY - rect.top;\n this.grabScrubber(x, y);\n });\n\n if (this.useControls) {\n this.minusElement.addEventListener('click', () => {\n this.stepLeft();\n });\n\n this.plusElement.addEventListener('click', () => {\n this.stepRight();\n });\n }\n\n if (this.inputElement) {\n this.inputElement.addEventListener('keydown', (event) => {\n event.stopPropagation();\n\n if (event.key === 'Enter') {\n let newValue = parseInt(this.inputElement.value);\n\n if (newValue < this.getMin()) {\n newValue = this.getMin();\n } else if (newValue > this.getMax()) {\n newValue = this.getMax();\n }\n\n this.calculateScrubberLeftFromValue(newValue);\n this.updateValueForced(newValue);\n this.updateTrack();\n\n this.inputElement.blur();\n this.wrapperElement.focus();\n }\n });\n }\n }\n\n this.calculateScrubberLeftFromValue(this.value);\n this.updateTrack();\n }\n\n grabScrubber(xOffset, yOffset) {\n if (this.readonlyState) {\n return;\n }\n\n this.scrubberGrabPos = {\n x: xOffset,\n y: yOffset,\n };\n\n this.scrubberGrabbed = true;\n this.scrubberInnerElement.classList.add('pressed');\n }\n\n calculateInputSizeFromMax() {\n return this.max.length;\n }\n\n controlsStep(delta) {\n if (this.readonlyState || this.disabled) {\n return;\n }\n\n const trackWidth = this.getTrackWidth();\n const percentage = this.scrubberLeft / trackWidth;\n const numTicks = parseInt(this.ticks);\n\n let currentValue = this.getMin() + percentage * (this.getMax() - this.getMin());\n\n currentValue += delta;\n\n if (currentValue < this.getMin()) {\n currentValue = this.getMin();\n } else if (currentValue > this.getMax()) {\n currentValue = this.getMax();\n }\n\n this.value = `${currentValue}`;\n\n /* if snapping is enabled, instead just increment or decrement the current \"fixed\" value from our ticknumber array */\n if (this.useSnapping && numTicks > 0) {\n const stepDir = delta > 0 ? 1 : -1;\n this.supposedValueSlot += stepDir;\n\n if (this.supposedValueSlot < 0) {\n this.supposedValueSlot = 0;\n } else if (this.supposedValueSlot > numTicks + 1) {\n this.supposedValueSlot = numTicks + 1;\n }\n }\n\n this.calculateScrubberLeftFromValue(currentValue);\n this.updateTrack();\n this.updateValue();\n }\n\n stepLeft() {\n this.controlsStep(-parseInt(this.step));\n }\n\n stepRight() {\n this.controlsStep(parseInt(this.step));\n }\n\n componentWillLoad() {\n const numTicks = parseInt(this.ticks);\n\n if (numTicks > 0) {\n this.tickValues = [this.getMin()];\n\n const step = (this.getMax() - this.getMin()) / (numTicks + 1);\n\n for (let i = 1; i < numTicks + 1; i++) {\n this.tickValues.push(this.getMin() + Math.round(step * i));\n }\n\n this.tickValues.push(this.getMax());\n }\n\n if (this.disabled) {\n this.disabledState = true;\n } else {\n this.disabledState = false;\n }\n\n if (this.readOnly) {\n this.readonlyState = true;\n } else {\n this.readonlyState = false;\n }\n\n this.useInput = false;\n this.useControls = false;\n\n if (this.controls) {\n this.useControls = true;\n } else if (this.input) {\n this.useInput = true;\n }\n\n this.useSmall = false;\n\n if (this.scrubberSize === 'sm') {\n this.useSmall = true;\n }\n\n this.useSnapping = false;\n\n if (this.snap) {\n this.useSnapping = true;\n }\n\n const min = this.getMin();\n const max = this.getMax();\n\n if (min > max) {\n console.warn(\n 'min-prop must have a higher value than max-prop for the component to work correctly.',\n );\n this.disabledState = true;\n }\n }\n\n render() {\n return (\n <div class={`sdds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}`}>\n <input\n ref={(el) => {\n this.nativeRangeInputElement = el as HTMLInputElement;\n }}\n class=\"sdds-slider-native-element\"\n type=\"range\"\n value={this.value}\n name={this.name}\n min={this.min}\n max={this.max}\n disabled={this.disabled}\n ></input>\n\n <div\n class={`sdds-slider ${this.disabledState ? 'disabled' : ''} ${\n this.useSmall ? 'sdds-slider-small' : ''\n }`}\n ref={(el) => {\n this.wrapperElement = el as HTMLElement;\n }}\n >\n {this.useInput && (\n <div class=\"sdds-slider__input-values\">\n <div\n ref={(el) => {\n this.minusElement = el as HTMLElement;\n }}\n class=\"sdds-slider__input-value\"\n >\n {this.min}\n </div>\n </div>\n )}\n\n {this.useControls && (\n <div class=\"sdds-slider__controls\">\n <div\n ref={(el) => (this.minusElement = el as HTMLElement)}\n class=\"sdds-slider__control sdds-slider__control-minus\"\n >\n <sdds-icon name=\"minus\" size=\"16px\"></sdds-icon>\n </div>\n </div>\n )}\n\n <div class=\"sdds-slider-inner\">\n <label class={this.tickValues.length > 0 && 'offset'}>{this.label}</label>\n\n {this.tickValues.length > 0 && (\n <div class=\"sdds-slider__value-dividers-wrapper\">\n <div\n ref={(el) => {\n this.dividersElement = el as HTMLElement;\n }}\n class=\"sdds-slider__value-dividers\"\n >\n {this.tickValues.map((value) => (\n <div class=\"sdds-slider__value-divider\">\n {this.showTickNumbers && <span>{value}</span>}\n </div>\n ))}\n </div>\n </div>\n )}\n\n <div\n class=\"sdds-slider__track\"\n ref={(el) => {\n this.trackElement = el as HTMLElement;\n }}\n tabindex={this.disabled ? '-1' : '0'}\n >\n <div\n class=\"sdds-slider__track-fill\"\n ref={(el) => {\n this.trackFillElement = el as HTMLElement;\n }}\n ></div>\n\n <div\n class=\"sdds-slider__scrubber\"\n ref={(el) => {\n this.scrubberElement = el as HTMLElement;\n }}\n >\n {this.tooltip && (\n <div class=\"sdds-slider__value\">\n {this.value}\n <svg\n width=\"18\"\n height=\"14\"\n viewBox=\"0 0 18 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n )}\n\n <div\n class=\"sdds-slider__scrubber-inner\"\n ref={(el) => {\n this.scrubberInnerElement = el as HTMLElement;\n }}\n ></div>\n </div>\n </div>\n </div>\n\n {this.useInput && (\n <div class=\"sdds-slider__input-values\">\n <div\n ref={(el) => {\n this.minusElement = el as HTMLElement;\n }}\n class=\"sdds-slider__input-value\"\n >\n {this.max}\n </div>\n <div class=\"sdds-slider__input-field-wrapper\">\n <input\n onFocus={(e) => {\n if (this.readonlyState) {\n e.preventDefault();\n this.inputElement.blur();\n }\n }}\n size={this.calculateInputSizeFromMax()}\n class=\"sdds-slider__input-field\"\n value={this.value}\n ref={(el) => {\n this.inputElement = el as HTMLInputElement;\n }}\n />\n </div>\n </div>\n )}\n\n {this.useControls && (\n <div class=\"sdds-slider__controls\">\n <div\n ref={(el) => (this.plusElement = el as HTMLElement)}\n class=\"sdds-slider__control sdds-slider__control-plus\"\n >\n <sdds-icon name=\"plus\" size=\"16px\"></sdds-icon>\n </div>\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"],"mappings":"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"}

package/dist/tegel/p-1e196fff.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as c,c as e,h as s,g as d}from"./p-387e1798.js";const o='.sdds-checkbox-webcomponent.sc-sdds-checkbox{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-webcomponent.sc-sdds-checkbox *.sc-sdds-checkbox{box-sizing:border-box}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox+label.sc-sdds-checkbox{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-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox::after{content:"";position:absolute;box-sizing:border-box}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox::before{width:24px;height:24px;left:0;top:0;border-radius:4px}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox::after{border:1px solid var(--sdds-checkbox-interaction-01);background-color:var(--sdds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px;border-radius:2px}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:var(--sdds-checkbox-background-opacity-hover)}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:focus::before{background-color:var(--sdds-checkbox-background-focus);opacity:var(--sdds-checkbox-background-opacity-focus);transition:opacity 0.2s ease-in-out}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:disabled,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].disabled.sc-sdds-checkbox{cursor:not-allowed}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:disabled::after,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].disabled.sc-sdds-checkbox::after{border-color:var(--sdds-checkbox-border-color-disabled-after)}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:disabled+label.sc-sdds-checkbox,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].disabled.sc-sdds-checkbox+label.sc-sdds-checkbox{color:var(--sdds-grey-600);cursor:not-allowed}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:disabled:hover::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].disabled.sc-sdds-checkbox:hover::before{display:none}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-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-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:var(--sdds-checkbox-background-opacity-hover)}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked:disabled:hover::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked:disabled::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked.disabled:hover::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked:disabled::after,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-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)}';const b=class{constructor(s){c(this,s);this.sddsChange=e(this,"sddsChange",6);this.sddsFocus=e(this,"sddsFocus",6);this.sddsBlur=e(this,"sddsBlur",6);this.handleChange=()=>{this.checked=!this.checked;this.sddsChange.emit({checkboxId:this.checkboxId,checked:this.checked,value:this.value})};this.name=undefined;this.checkboxId=crypto.randomUUID();this.disabled=false;this.required=false;this.checked=false;this.value=undefined}async toggleCheckbox(){this.checked=!this.checked;return{checkboxId:this.checkboxId,checked:this.checked}}handleFocus(c){this.sddsFocus.emit(c)}handleBlur(c){this.sddsBlur.emit(c)}render(){return s("div",{class:"sdds-checkbox-webcomponent"},s("input",{"aria-checked":this.checked,"aria-required":this.required,"aria-describedby":this.host.getAttribute("aria-describedby"),"aria-labelledby":this.host.getAttribute("aria-labelledby"),required:this.required,type:"checkbox",name:this.name,value:this.value,id:this.checkboxId,checked:this.checked,disabled:this.disabled,onFocus:c=>this.handleFocus(c),onBlur:c=>this.handleBlur(c),onChange:()=>{this.handleChange()}}),s("label",{htmlFor:this.checkboxId},s("slot",{name:"label"})))}get host(){return d(this)}};b.style=o;export{b as sdds_checkbox};
2	- //# sourceMappingURL=p-1e196fff.entry.js.map

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

@@ -1 +0,0 @@

- {"version":3,"names":["sddsCheckboxCss","SddsCheckbox","this","handleChange","checked","sddsChange","emit","checkboxId","value","crypto","randomUUID","async","handleFocus","event","sddsFocus","handleBlur","sddsBlur","render","h","class","required","host","getAttribute","type","name","id","disabled","onFocus","onBlur","onChange","htmlFor"],"sources":["./src/components/checkbox/sdds-checkbox.scss?tag=sdds-checkbox&encapsulation=scoped","./src/components/checkbox/sdds-checkbox.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n.sdds-checkbox-webcomponent {\n @include sdds-box-sizing;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-checkbox-text);\n display: flex;\n align-items: center;\n margin-left: -4px;\n\n input[type='checkbox'] {\n appearance: none;\n outline: none;\n margin: 0;\n border: 0;\n border-radius: 2px;\n width: 24px;\n height: 24px;\n position: relative;\n cursor: pointer;\n\n + label {\n color: var(--sdds-checkbox-color);\n padding-left: var(--sdds-spacing-element-4);\n padding-top: var(--sdds-spacing-element-4);\n padding-bottom: var(--sdds-spacing-element-4);\n cursor: pointer;\n }\n\n &::before,\n &::after {\n content: '';\n position: absolute;\n box-sizing: border-box;\n }\n\n &::before {\n width: 24px;\n height: 24px;\n left: 0;\n top: 0;\n border-radius: 4px;\n }\n\n &::after {\n border: 1px solid var(--sdds-checkbox-interaction-01);\n background-color: var(--sdds-checkbox-interaction-02);\n width: 16px;\n height: 16px;\n left: 4px;\n top: 4px;\n border-radius: 2px;\n }\n\n &:hover {\n &::before {\n background-color: var(--sdds-checkbox-background-hover);\n opacity: var(--sdds-checkbox-background-opacity-hover);\n }\n }\n\n &:focus {\n &::before {\n background-color: var(--sdds-checkbox-background-focus);\n opacity: var(--sdds-checkbox-background-opacity-focus);\n transition: opacity 0.2s ease-in-out;\n }\n }\n\n &:disabled,\n &.disabled {\n cursor: not-allowed;\n\n &::after {\n border-color: var(--sdds-checkbox-border-color-disabled-after);\n }\n\n + label {\n color: var(--sdds-grey-600);\n cursor: not-allowed;\n }\n\n &:hover {\n &::before {\n display: none;\n }\n }\n }\n\n &:checked {\n &::after {\n background-image: var(--sdds-checkbox-background-img);\n background-color: var(--sdds-checkbox-interaction-01);\n background-repeat: no-repeat;\n background-position: center;\n }\n\n &:hover {\n &::before {\n background-color: var(--sdds-checkbox-background-hover);\n opacity: var(--sdds-checkbox-background-opacity-hover);\n }\n }\n\n &:disabled,\n &.disabled {\n &:hover::before,\n &::before {\n display: block;\n width: 16px;\n height: 16px;\n left: 4px;\n top: 4px;\n border: 1px solid #b0b7c4;\n }\n\n &::after {\n background-image: var(--sdds-checkbox-background-img-disabled);\n background-color: var(--sdds-checkbox-interaction-02);\n color: var(--sdds-checkbox-color-disabled-after);\n }\n }\n }\n }\n}\n","import { Component, h, Prop, Event, EventEmitter, Method, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-checkbox',\n styleUrl: 'sdds-checkbox.scss',\n shadow: false,\n scoped: true,\n})\nexport class SddsCheckbox {\n /** Name for the checkbox's input element. */\n @Prop() name: string;\n\n /** ID for the checkbox's input element. Randomly generated if not specified. */\n @Prop() checkboxId: string = crypto.randomUUID();\n\n /** Sets the checkbox in a disabled state */\n @Prop() disabled: boolean = false;\n\n /** Make the checkbox required */\n @Prop() required: boolean = false;\n\n /** Sets the checkbox as checked */\n @Prop({ reflect: true }) checked: boolean = false;\n\n /** Value for the checkbox */\n @Prop() value: string;\n\n @Element() host: HostElement;\n\n /** Toggles the checked value of the component. */\n @Method()\n async toggleCheckbox() {\n this.checked = !this.checked;\n return {\n checkboxId: this.checkboxId,\n checked: this.checked,\n };\n }\n\n /** Sends unique checkbox identifier and checked status when it is checked/unchecked. */\n @Event({\n eventName: 'sddsChange',\n composed: true,\n cancelable: false,\n bubbles: true,\n })\n sddsChange: EventEmitter<{\n checkboxId: string;\n checked: boolean;\n value?: string;\n }>;\n\n handleChange = () => {\n this.checked = !this.checked;\n this.sddsChange.emit({\n checkboxId: this.checkboxId,\n checked: this.checked,\n value: this.value,\n });\n };\n\n /** Focus event for the checkbox */\n @Event({\n eventName: 'sddsFocus',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsFocus: EventEmitter<FocusEvent>;\n\n /** Set the input as focus when clicking the whole textfield with suffix/prefix */\n handleFocus(event): void {\n this.sddsFocus.emit(event);\n }\n\n /** Blur event for the checkbox */\n @Event({\n eventName: 'sddsBlur',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsBlur: EventEmitter<FocusEvent>;\n\n /** Set the input as focus when clicking the whole textfield with suffix/prefix */\n handleBlur(event): void {\n this.sddsBlur.emit(event);\n }\n\n render() {\n return (\n <div class=\"sdds-checkbox-webcomponent\">\n <input\n aria-checked={this.checked}\n aria-required={this.required}\n aria-describedby={this.host.getAttribute('aria-describedby')}\n aria-labelledby={this.host.getAttribute('aria-labelledby')}\n required={this.required}\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n id={this.checkboxId}\n checked={this.checked}\n disabled={this.disabled}\n onFocus={(event) => this.handleFocus(event)}\n onBlur={(event) => this.handleBlur(event)}\n onChange={() => {\n this.handleChange();\n }}\n />\n <label htmlFor={this.checkboxId}>\n <slot name=\"label\"></slot>\n </label>\n </div>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAkB,gnI,MCSXC,EAAY,M,wIA4CvBC,KAAAC,aAAe,KACbD,KAAKE,SAAWF,KAAKE,QACrBF,KAAKG,WAAWC,KAAK,CACnBC,WAAYL,KAAKK,WACjBH,QAASF,KAAKE,QACdI,MAAON,KAAKM,OACZ,E,oCA7CyBC,OAAOC,a,cAGR,M,cAGA,M,aAGgB,M,qBAS5CC,uBACET,KAAKE,SAAWF,KAAKE,QACrB,MAAO,CACLG,WAAYL,KAAKK,WACjBH,QAASF,KAAKE,Q,CAoClBQ,YAAYC,GACVX,KAAKY,UAAUR,KAAKO,E,CAatBE,WAAWF,GACTX,KAAKc,SAASV,KAAKO,E,CAGrBI,SACE,OACEC,EAAA,OAAKC,MAAM,8BACTD,EAAA,wBACgBhB,KAAKE,QAAO,gBACXF,KAAKkB,SAAQ,mBACVlB,KAAKmB,KAAKC,aAAa,oBAAmB,kBAC3CpB,KAAKmB,KAAKC,aAAa,mBACxCF,SAAUlB,KAAKkB,SACfG,KAAK,WACLC,KAAMtB,KAAKsB,KACXhB,MAAON,KAAKM,MACZiB,GAAIvB,KAAKK,WACTH,QAASF,KAAKE,QACdsB,SAAUxB,KAAKwB,SACfC,QAAUd,GAAUX,KAAKU,YAAYC,GACrCe,OAASf,GAAUX,KAAKa,WAAWF,GACnCgB,SAAU,KACR3B,KAAKC,cAAc,IAGvBe,EAAA,SAAOY,QAAS5B,KAAKK,YACnBW,EAAA,QAAMM,KAAK,W"}

package/dist/tegel/p-2080db62.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,c as s,h as e,H as i,g as o}from"./p-387e1798.js";const l=":host{box-sizing:border-box;overflow:hidden;outline:0}:host *{box-sizing:border-box}:host .wrapper{display:flex;overflow-x:scroll;scrollbar-width:none;position:relative}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{z-index:201;right:0}:host .scroll-left-button{z-index:201;left:0}:host .scroll-right-button,:host .scroll-left-button{height:50px;color:var(--sdds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--sdds-folder-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--sdds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--sdds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--sdds-folder-tabs-scroll-btn-color)}";const h=class{constructor(e){t(this,e);this.sddsChange=s(this,"sddsChange",7);this.navWrapperElement=null;this.componentWidth=0;this.buttonsWidth=0;this.scrollWidth=0;this.addResizeObserver=()=>{const t=new ResizeObserver((t=>{t.forEach((t=>{const s=t.contentRect.width;let e=0;const i=Array.from(this.host.children);i.forEach((t=>{const s=window.getComputedStyle(t);e+=t.clientWidth+parseFloat(s.marginLeft)+parseFloat(s.marginRight)}));this.componentWidth=s;this.buttonsWidth=e;this.scrollWidth=e-s;if(this.buttonsWidth>this.componentWidth){this.evaluateScrollButtons()}else{this.showLeftScroll=false;this.showRightScroll=false}}))}));t.observe(this.navWrapperElement)};this.modeVariant=null;this.buttonWidth=0;this.showLeftScroll=false;this.showRightScroll=false;this.selectedTab=undefined;this.selectedTabIndex=undefined}calculateButtonWidth(){this.children=this.children.map((t=>{if(t.offsetWidth>this.buttonWidth){this.buttonWidth=t.offsetWidth}return t}));this.children.forEach((t=>{t.setTabWidth(this.buttonWidth)}))}scrollRight(){const t=this.navWrapperElement.scrollLeft;this.navWrapperElement.scrollLeft=t+this.buttonWidth;this.evaluateScrollButtons()}scrollLeft(){const t=this.navWrapperElement.scrollLeft;this.navWrapperElement.scrollLeft=t-this.buttonWidth;this.evaluateScrollButtons()}evaluateScrollButtons(){const t=this.navWrapperElement.scrollLeft;if(t>=this.scrollWidth){this.showRightScroll=false}else{this.showRightScroll=true}if(t<=0){this.showLeftScroll=false}else{this.showLeftScroll=true}}connectedCallback(){this.children=Array.from(this.host.children);this.children=this.children.map(((t,s)=>{t.addEventListener("click",(()=>{if(!t.disabled){this.children.forEach((t=>t.removeAttribute("selected")));t.setAttribute("selected","");this.selectedTab=t.innerHTML;this.selectedTabIndex=s}}));if(s===0){t.classList.add("first")}if(s===this.children.length-1){t.classList.add("last")}if(t.selected){this.selectedTab=t.innerHTML;this.selectedTabIndex=s}return t}))}componentDidLoad(){this.calculateButtonWidth()}componentDidUpdate(){this.calculateButtonWidth()}componentWillRender(){if(!this.selectedTab){this.children=Array.from(this.host.children);this.children=this.children.map(((t,s)=>{if(t.selected){this.selectedTab=t.innerHTML;this.selectedTabIndex=s}return t}))}}componentDidRender(){if(this.buttonsWidth>this.componentWidth){this.evaluateScrollButtons()}else{this.showLeftScroll=false;this.showRightScroll=false}this.addResizeObserver()}async selectTab(t){if(!this.children[t].disabled){this.children.forEach((t=>t.removeAttribute("selected")));this.children=this.children.map(((s,e)=>{if(e===t){s.setAttribute("selected","");this.selectedTab=s.innerHTML;this.selectedTabIndex=t}return s}))}return{selectedTab:this.selectedTab,selectedTabIndex:this.selectedTabIndex}}handleSelectedTabChange(){this.host.setAttribute("selected-tab",this.selectedTab)}handleSelectedTabIndexChange(){this.host.setAttribute("selected-tab-index",`${this.selectedTabIndex}`);this.sddsChange.emit({selectedTab:this.selectedTab,selectedTabIndex:this.selectedTabIndex})}render(){return e(i,{class:`${this.modeVariant?`sdds-mode-variant-${this.modeVariant}`:""}`},e("div",{ref:t=>{this.navWrapperElement=t},class:"wrapper",role:"list"},e("button",{class:`scroll-left-button ${this.showLeftScroll?"show":""}`,disabled:!this.showLeftScroll,onClick:()=>this.scrollLeft()},e("sdds-icon",{name:"chevron_left",size:"20px"})),e("slot",null),e("button",{class:`scroll-right-button ${this.showRightScroll?"show":""}`,disabled:!this.showRightScroll,onClick:()=>this.scrollRight()},e("sdds-icon",{name:"chevron_right",size:"20px"}))))}get host(){return o(this)}static get watchers(){return{selectedTab:["handleSelectedTabChange"],selectedTabIndex:["handleSelectedTabIndexChange"]}}};h.style=l;export{h as sdds_folder_tabs};
2	- //# sourceMappingURL=p-2080db62.entry.js.map

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

@@ -1 +0,0 @@

- {"version":3,"names":["folderTabsCss","InlineTabs","this","navWrapperElement","componentWidth","buttonsWidth","scrollWidth","addResizeObserver","resizeObserver","ResizeObserver","entries","forEach","entry","contentRect","width","navButtons","Array","from","host","children","navButton","style","window","getComputedStyle","clientWidth","parseFloat","marginLeft","marginRight","evaluateScrollButtons","showLeftScroll","showRightScroll","observe","calculateButtonWidth","map","tab","offsetWidth","buttonWidth","setTabWidth","scrollRight","scroll","scrollLeft","connectedCallback","item","index","addEventListener","disabled","element","removeAttribute","setAttribute","selectedTab","innerHTML","selectedTabIndex","classList","add","length","selected","componentDidLoad","componentDidUpdate","componentWillRender","componentDidRender","async","tabIndex","handleSelectedTabChange","handleSelectedTabIndexChange","sddsChange","emit","render","h","Host","class","modeVariant","ref","el","role","onClick","name","size"],"sources":["./src/components/tabs/folder-tabs/folder-tabs.scss?tag=sdds-folder-tabs&encapsulation=shadow","./src/components/tabs/folder-tabs/folder-tabs.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n@import '../../../mixins/z-index';\n\n:host {\n @include sdds-box-sizing;\n\n overflow: hidden;\n outline: 0;\n\n .wrapper {\n display: flex;\n overflow-x: scroll;\n scrollbar-width: none;\n position: relative;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n .scroll-right-button {\n z-index: calc(z(tab) + 1);\n right: 0;\n }\n\n .scroll-left-button {\n z-index: calc(z(tab) + 1);\n left: 0;\n }\n\n .scroll-right-button,\n .scroll-left-button {\n height: 50px;\n color: var(--sdds-folder-tabs-scroll-btn-color);\n cursor: pointer;\n border: 0;\n width: 0;\n background-color: var(--sdds-folder-tabs-scroll-btn-background);\n display: none;\n justify-content: center;\n align-items: center;\n opacity: 0;\n pointer-events: none;\n position: sticky;\n\n &.show {\n min-width: 48px;\n display: block;\n opacity: 1;\n pointer-events: all;\n }\n\n &:hover {\n background-color: var(--sdds-folder-tabs-scroll-btn-background-hover);\n }\n\n &:active {\n background-color: var(--sdds-folder-tabs-scroll-btn-background-active);\n }\n\n &:focus {\n @include sdds-focus-state;\n }\n\n svg {\n fill: var(--sdds-folder-tabs-scroll-btn-color);\n }\n }\n}\n","import {\n Component,\n Host,\n State,\n Element,\n Prop,\n h,\n Watch,\n Event,\n EventEmitter,\n Method,\n} from '@stencil/core';\n\n@Component({\n tag: 'sdds-folder-tabs',\n styleUrl: 'folder-tabs.scss',\n shadow: true,\n})\nexport class InlineTabs {\n /** Variant of the tabs, primary= on white, secondary= on grey50 */\n @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n @State() buttonWidth: number = 0;\n\n @State() showLeftScroll: boolean = false;\n\n @State() showRightScroll: boolean = false;\n\n @State() selectedTab: string;\n\n @State() selectedTabIndex: number;\n\n @Element() host: HTMLElement;\n\n navWrapperElement: HTMLElement = null; // reference to container with nav buttons\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 children: Array<HTMLSddsFolderTabsLinkElement | HTMLSddsFolderTabsButtonElement>;\n\n calculateButtonWidth() {\n this.children = this.children.map(\n (tab: HTMLSddsFolderTabsLinkElement | HTMLSddsFolderTabsButtonElement) => {\n if (tab.offsetWidth > this.buttonWidth) {\n this.buttonWidth = tab.offsetWidth;\n }\n return tab;\n },\n );\n this.children.forEach((tab) => {\n tab.setTabWidth(this.buttonWidth);\n });\n }\n\n scrollRight() {\n const scroll = this.navWrapperElement.scrollLeft;\n this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;\n this.evaluateScrollButtons();\n }\n\n scrollLeft() {\n const scroll = this.navWrapperElement.scrollLeft;\n this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;\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 addResizeObserver = () => {\n const resizeObserver = new ResizeObserver((entries) => {\n entries.forEach((entry) => {\n const componentWidth = entry.contentRect.width;\n let buttonsWidth = 0;\n\n const navButtons = Array.from(this.host.children);\n navButtons.forEach((navButton: HTMLElement) => {\n const style = window.getComputedStyle(navButton);\n buttonsWidth +=\n navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\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 });\n\n resizeObserver.observe(this.navWrapperElement);\n };\n\n connectedCallback() {\n this.children = Array.from(this.host.children) as Array<\n HTMLSddsFolderTabsLinkElement | HTMLSddsFolderTabsButtonElement\n >;\n this.children = this.children.map((item, index) => {\n item.addEventListener('click', () => {\n if (!item.disabled) {\n this.children.forEach((element) => element.removeAttribute('selected'));\n item.setAttribute('selected', '');\n this.selectedTab = item.innerHTML;\n this.selectedTabIndex = index;\n }\n });\n if (index === 0) {\n item.classList.add('first');\n }\n if (index === this.children.length - 1) {\n item.classList.add('last');\n }\n if (item.selected) {\n this.selectedTab = item.innerHTML;\n this.selectedTabIndex = index;\n }\n return item;\n });\n }\n\n componentDidLoad() {\n this.calculateButtonWidth();\n }\n\n componentDidUpdate() {\n this.calculateButtonWidth();\n }\n\n componentWillRender() {\n if (!this.selectedTab) {\n this.children = Array.from(this.host.children) as Array<\n HTMLSddsFolderTabsLinkElement | HTMLSddsFolderTabsButtonElement\n >;\n this.children = this.children.map((item, index) => {\n if (item.selected) {\n this.selectedTab = item.innerHTML;\n this.selectedTabIndex = index;\n }\n return item;\n });\n }\n }\n\n componentDidRender() {\n if (this.buttonsWidth > this.componentWidth) {\n this.evaluateScrollButtons();\n } else {\n this.showLeftScroll = false;\n this.showRightScroll = false;\n }\n this.addResizeObserver();\n }\n\n @Event({\n eventName: 'sddsChange',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsChange: EventEmitter<{\n selectedTab: string;\n selectedTabIndex: number;\n }>;\n\n /** Sets the passed tabindex as the selected tab. */\n @Method()\n async selectTab(tabIndex: number) {\n if (!this.children[tabIndex].disabled) {\n this.children.forEach((element) => element.removeAttribute('selected'));\n this.children = this.children.map((element, index) => {\n if (index === tabIndex) {\n element.setAttribute('selected', '');\n this.selectedTab = element.innerHTML;\n this.selectedTabIndex = tabIndex;\n }\n return element;\n });\n }\n return {\n selectedTab: this.selectedTab,\n selectedTabIndex: this.selectedTabIndex,\n };\n }\n\n @Watch('selectedTab')\n handleSelectedTabChange() {\n this.host.setAttribute('selected-tab', this.selectedTab);\n }\n\n @Watch('selectedTabIndex')\n handleSelectedTabIndexChange() {\n this.host.setAttribute('selected-tab-index', `${this.selectedTabIndex}`);\n this.sddsChange.emit({\n selectedTab: this.selectedTab,\n selectedTabIndex: this.selectedTabIndex,\n });\n }\n\n render() {\n return (\n <Host class={`${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}`}>\n <div\n ref={(el) => {\n this.navWrapperElement = el as HTMLDivElement;\n }}\n class=\"wrapper\"\n role=\"list\"\n >\n <button\n class={`scroll-left-button ${this.showLeftScroll ? 'show' : ''}`}\n disabled={!this.showLeftScroll}\n onClick={() => this.scrollLeft()}\n >\n <sdds-icon name=\"chevron_left\" size=\"20px\"></sdds-icon>\n </button>\n <slot></slot>\n <button\n class={`scroll-right-button ${this.showRightScroll ? 'show' : ''}`}\n disabled={!this.showRightScroll}\n onClick={() => this.scrollRight()}\n >\n <sdds-icon name=\"chevron_right\" size=\"20px\"></sdds-icon>\n </button>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

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

	@@ -1,2 +0,0 @@
1	- import{r as s,h as d,H as e,g as o,c as t}from"./p-387e1798.js";const r=":host(.sdds-table__body-cell){box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--sdds-data-table-color);padding:var(--sdds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}:host(.sdds-table__body-cell) {box-sizing:border-box}:host(.sdds-table__body-cell--no-padding){padding:0}:host(.sdds-table__body-cell--hover){background-color:var(--sdds-data-table-body-cell-background-hover)}:host(.sdds-table__compact){padding:var(--sdds-spacing-element-8) var(--sdds-spacing-element-16)}:host(.sdds-table--divider){border-right:1px solid var(--sdds-data-table-divider)}:host(.sdds-table--divider:last-of-type){border-right:none}:host(.sdds-table--no-min-width){min-width:unset}";const i=["verticalDividers","compactDesign","noMinWidth"];const c=class{constructor(d){s(this,d);this.cellValue=undefined;this.cellKey=undefined;this.disablePadding=false;this.textAlignState=undefined;this.activeSorting=false;this.verticalDividers=false;this.compactDesign=false;this.noMinWidth=false;this.whiteBackground=false;this.tableId=""}internalSddsPropChangeListener(s){if(this.tableId===s.detail.tableId){s.detail.changed.filter((s=>i.includes(s))).forEach((d=>{if(typeof this[d]==="undefined"){throw new Error(`Table prop is not supported: ${d}`)}this[d]=s.detail[d]}))}}internalSddsHoverListener(s){const[d,e]=s.detail;if(this.tableId===d){this.activeSorting=this.cellKey===e}}internalSddsTextAlignListener(s){const[d,e,o]=s.detail;if(this.tableId===d){if(this.cellKey===e){this.textAlignState=o}}}connectedCallback(){this.tableEl=this.host.closest("sdds-table");this.tableId=this.tableEl.tableId}componentWillLoad(){i.forEach((s=>{this[s]=this.tableEl[s]}))}render(){return d(e,{class:{"sdds-table__body-cell":true,"sdds-table__body-cell--hover":this.activeSorting,"sdds-table__compact":this.compactDesign,"sdds-table--divider":this.verticalDividers,"sdds-table--no-min-width":this.noMinWidth,"sdds-table__body-cell--no-padding":this.disablePadding},style:{textAlign:this.textAlignState}},this.cellValue,d("slot",null))}get host(){return o(this)}};c.style=r;const a=":root,.sdds-mode-light{--sdds-checkbox-color:var(--sdds-grey-900);--sdds-checkbox-interaction-01:var(--sdds-blue-800);--sdds-checkbox-interaction-02:var(--sdds-white);--sdds-checkbox-background-hover:var(--sdds-blue-800);--sdds-checkbox-background-focus:var(--sdds-blue-800);--sdds-checkbox-background-opacity-hover:0.12;--sdds-checkbox-background-opacity-focus:0.24;--sdds-checkbox-disabled:var(--sdds-grey-400);--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-500);--sdds-checkbox-color-disabled-after:var(--sdds-grey-500)}:root .sdds-mode-dark,.sdds-mode-light .sdds-mode-dark{--sdds-checkbox-color:var(--sdds-white);--sdds-checkbox-interaction-01:var(--sdds-white);--sdds-checkbox-interaction-02:var(--sdds-grey-958);--sdds-checkbox-background-hover:var(--sdds-grey-600);--sdds-checkbox-background-focus:var(--sdds-grey-600);--sdds-checkbox-background-opacity-hover:0.48;--sdds-checkbox-background-opacity-focus:0.72;--sdds-checkbox-disabled:white;--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-700);--sdds-checkbox-color-disabled-after:var(--sdds-grey-700)}.sdds-checkbox-item{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.sdds-checkbox-item {box-sizing:border-box}.sdds-checkbox-item .sdds-form-input[type=checkbox]{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]+label{color:var(--sdds-checkbox-color);padding-left:var(--sdds-spacing-element-4);padding-top:var(--sdds-spacing-element-4);padding-bottom:var(--sdds-spacing-element-4);cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before,.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{content:\"\";position:absolute;box-sizing:border-box}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before{width:24px;height:24px;left:0;top:0;border-radius:4px}.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{border:1px solid var(--sdds-checkbox-interaction-01);background-color:var(--sdds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px;border-radius:2px}.sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:var(--sdds-checkbox-background-opacity-hover)}.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before{background-color:var(--sdds-checkbox-background-focus);opacity:var(--sdds-checkbox-background-opacity-focus);transition:opacity 0.2s ease-in-out}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled{cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled::after,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled::after{border-color:var(--sdds-checkbox-border-color-disabled-after)}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled+label,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled+label{color:var(--sdds-grey-600);cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled:hover::before,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled:hover::before{display:none}.sdds-form-input[type=checkbox]:checked::after{background-image:var(--sdds-checkbox-background-img);background-color:var(--sdds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.sdds-form-input[type=checkbox]:checked:disabled:hover::before,.sdds-form-input[type=checkbox]:checked:disabled::before,.sdds-form-input[type=checkbox]:checked.disabled:hover::before,.sdds-form-input[type=checkbox]:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.sdds-form-input[type=checkbox]:checked:disabled::after,.sdds-form-input[type=checkbox]:checked.disabled::after{background-image:var(--sdds-checkbox-background-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}:host(.sdds-table__row){box-sizing:border-box;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) *{box-sizing:border-box}:host(.sdds-table__row) .sdds-table__body-cell--checkbox{min-width:48px;width:48px;padding:0}:host(.sdds-table__row:hover){background-color:var(--sdds-data-table-body-row-background-hover)}:host(.sdds-table__row--selected){background-color:var(--sdds-data-table-body-row-background-active)}:host(.sdds-table__row--selected:hover){background-color:var(--sdds-data-table-body-row-background-active-hover)}:host(.sdds-table__row--hidden){display:none}:host(.sdds-table__row--expended){width:100%;background-color:pink}:host .sdds-form-label--data-table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host(.sdds-table__compact) .sdds-form-label--data-table{height:32px}:host(.sdds-table--divider) .sdds-table__body-cell--checkbox{border-right:1px solid var(--sdds-data-table-divider)}";const b=["enableMultiselect","verticalDividers","compactDesign","modeVariant"];const l=class{constructor(d){s(this,d);this.internalSddsRowChange=t(this,"internalSddsRowChange",7);this.internalSddsPagination=t(this,"internalSddsPagination",7);this.enableMultiselect=false;this.bodyCheckBoxStatus=false;this.mainCheckBoxStatus=false;this.verticalDividers=false;this.compactDesign=false;this.noMinWidth=false;this.modeVariant=null;this.tableId=""}bodyCheckBoxClicked(s){const d=this.host;this.bodyCheckBoxStatus=s.currentTarget.checked;if(this.bodyCheckBoxStatus===true){d.classList.add("sdds-table__row--selected")}else{d.classList.remove("sdds-table__row--selected")}this.internalSddsRowChange.emit(this.bodyCheckBoxStatus)}bodyCheckBoxStatusUpdater(s){this.mainCheckBoxStatus=s;this.bodyCheckBoxStatus=this.mainCheckBoxStatus;const d=this.host;if(this.bodyCheckBoxStatus===true){d.classList.add("sdds-table__row--selected")}else{d.classList.remove("sdds-table__row--selected")}this.internalSddsRowChange.emit(this.bodyCheckBoxStatus)}internalSddsPropChangeListener(s){if(this.tableId===s.detail.tableId){s.detail.changed.filter((s=>b.includes(s))).forEach((d=>{if(typeof this[d]==="undefined"){throw new Error(`Table prop is not supported: ${d}`)}this[d]=s.detail[d]}))}}headCheckboxListener(s){if(this.tableId===s.detail[0]){this.bodyCheckBoxStatusUpdater(s.detail[1])}}internalSddsCheckboxChangeListener(s){const[d,e]=s.detail;if(this.tableId===d){this.bodyCheckBoxStatusUpdater(e)}}connectedCallback(){this.tableEl=this.host.closest("sdds-table");this.tableId=this.tableEl.tableId}componentWillLoad(){b.forEach((s=>{this[s]=this.tableEl[s]}))}componentDidLoad(){this.internalSddsPagination.emit(this.tableId)}render(){return d(e,{class:{"sdds-table__row":true,"sdds-table__compact":this.compactDesign,"sdds-table--divider":this.verticalDividers,"sdds-mode-variant-primary":this.modeVariant==="primary","sdds-mode-variant-secondary":this.modeVariant==="secondary"}},this.enableMultiselect&&d("td",{class:"sdds-table__body-cell sdds-table__body-cell--checkbox"},d("div",{class:"sdds-checkbox-item"},d("label",{class:"sdds-form-label sdds-form-label--data-table"},d("input",{class:"sdds-form-input",type:"checkbox",onChange:s=>this.bodyCheckBoxClicked(s),checked:this.bodyCheckBoxStatus})))),d("slot",null))}get host(){return o(this)}};l.style=a;export{c as sdds_body_cell,l as sdds_table_body_row};
2	- //# sourceMappingURL=p-23998948.entry.js.map

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

@@ -1 +0,0 @@

- {"version":3,"names":["tableBodyCellCss","relevantTableProps","TableBodyCell","internalSddsPropChangeListener","event","this","tableId","detail","changed","filter","changedProp","includes","forEach","Error","internalSddsHoverListener","receivedID","receivedKeyValue","activeSorting","cellKey","internalSddsTextAlignListener","receivedKey","receivedTextAlign","textAlignState","connectedCallback","tableEl","host","closest","componentWillLoad","tablePropName","render","h","Host","class","compactDesign","verticalDividers","noMinWidth","disablePadding","style","textAlign","cellValue","tableBodyRowCss","TableBodyRow","bodyCheckBoxClicked","row","bodyCheckBoxStatus","currentTarget","checked","classList","add","remove","internalSddsRowChange","emit","bodyCheckBoxStatusUpdater","status","mainCheckBoxStatus","headCheckboxListener","internalSddsCheckboxChangeListener","receivedBodyCheckboxStatus","componentDidLoad","internalSddsPagination","modeVariant","enableMultiselect","type","onChange"],"sources":["./src/components/data-table/table-body-cell/table-body-cell.scss?tag=sdds-body-cell&encapsulation=shadow","./src/components/data-table/table-body-cell/table-body-cell.tsx","./src/components/data-table/table-body-row/table-body-row.scss?tag=sdds-table-body-row&encapsulation=shadow","./src/components/data-table/table-body-row/table-body-row.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__body-cell) {\n @include sdds-box-sizing;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n display: table-cell;\n box-sizing: border-box;\n color: var(--sdds-data-table-color);\n padding: var(--sdds-spacing-element-16);\n min-width: 192px;\n vertical-align: top;\n background-color: transparent;\n transition: background-color 200ms ease;\n}\n\n:host(.sdds-table__body-cell--no-padding) {\n padding: 0;\n}\n\n:host(.sdds-table__body-cell--hover) {\n background-color: var(--sdds-data-table-body-cell-background-hover);\n}\n\n:host(.sdds-table__compact) {\n padding: var(--sdds-spacing-element-8) var(--sdds-spacing-element-16);\n}\n\n:host(.sdds-table--divider) {\n border-right: 1px solid var(--sdds-data-table-divider);\n}\n\n:host(.sdds-table--divider:last-of-type) {\n border-right: none;\n}\n\n:host(.sdds-table--no-min-width) {\n min-width: unset;\n}\n","import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n 'verticalDividers',\n 'compactDesign',\n 'noMinWidth',\n];\n@Component({\n tag: 'sdds-body-cell',\n styleUrl: 'table-body-cell.scss',\n shadow: true,\n})\nexport class TableBodyCell {\n /** Value that will be presented as text inside a cell */\n @Prop({ reflect: true }) cellValue: string | number;\n\n /** Passing same cell key for all body cells which is used in head cell enables features of text align and hovering */\n @Prop({ reflect: true }) cellKey: any;\n\n /** Disables internal padding. Useful when passing other components to cell. */\n @Prop({ reflect: true }) disablePadding: boolean = false;\n\n @State() textAlignState: string;\n\n @State() activeSorting: 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 @Listen('internalSddsPropChange', { target: 'body' })\n internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\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 to headKey from data-table-header-element\n @Listen('internalSddsHover', { target: 'body' })\n internalSddsHoverListener(event: CustomEvent<any>) {\n const [receivedID, receivedKeyValue] = event.detail;\n\n if (this.tableId === receivedID) {\n this.activeSorting = this.cellKey === receivedKeyValue;\n }\n }\n\n // Listen to internalSddsTextAlign from data-table-header-element\n @Listen('internalSddsTextAlign', { target: 'body' })\n internalSddsTextAlignListener(event: CustomEvent<any>) {\n const [receivedID, receivedKey, receivedTextAlign] = event.detail;\n\n if (this.tableId === receivedID) {\n if (this.cellKey === receivedKey) {\n this.textAlignState = receivedTextAlign;\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 render() {\n return (\n <Host\n class={{\n 'sdds-table__body-cell': true,\n 'sdds-table__body-cell--hover': this.activeSorting,\n 'sdds-table__compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-table--no-min-width': this.noMinWidth,\n 'sdds-table__body-cell--no-padding': this.disablePadding,\n }}\n style={{ textAlign: this.textAlignState }}\n >\n {this.cellValue}\n <slot />\n </Host>\n );\n }\n}\n","/* 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(.sdds-table__row) {\n @include sdds-box-sizing;\n\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 .sdds-table__body-cell--checkbox {\n min-width: 48px;\n width: 48px;\n padding: 0;\n }\n}\n\n:host(.sdds-table__row:hover) {\n background-color: var(--sdds-data-table-body-row-background-hover);\n}\n\n:host(.sdds-table__row--selected) {\n background-color: var(--sdds-data-table-body-row-background-active);\n}\n\n:host(.sdds-table__row--selected:hover) {\n background-color: var(--sdds-data-table-body-row-background-active-hover);\n}\n\n:host(.sdds-table__row--hidden) {\n display: none;\n}\n\n:host(.sdds-table__row--expended) {\n width: 100%;\n background-color: pink;\n}\n\n:host {\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\n:host(.sdds-table__compact) {\n .sdds-form-label--data-table {\n height: 32px;\n }\n}\n\n:host(.sdds-table--divider) {\n .sdds-table__body-cell--checkbox {\n border-right: 1px solid var(--sdds-data-table-divider);\n }\n}\n","import { Component, Element, h, Host, State, Event, EventEmitter, Listen } from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n 'enableMultiselect',\n 'verticalDividers',\n 'compactDesign',\n 'modeVariant',\n];\n\n@Component({\n tag: 'sdds-table-body-row',\n styleUrl: 'table-body-row.scss',\n shadow: true,\n})\nexport class TableBodyRow {\n @State() enableMultiselect: boolean = false;\n\n @State() bodyCheckBoxStatus: boolean = false;\n\n @State() mainCheckBoxStatus: boolean = false;\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 @State() tableId: string = '';\n\n @Element() host: HTMLElement;\n\n tableEl: HTMLSddsTableElement;\n\n bodyCheckBoxClicked(event) {\n const row = this.host;\n this.bodyCheckBoxStatus = event.currentTarget.checked;\n if (this.bodyCheckBoxStatus === true) {\n row.classList.add('sdds-table__row--selected');\n } else {\n row.classList.remove('sdds-table__row--selected');\n }\n this.internalSddsRowChange.emit(this.bodyCheckBoxStatus);\n }\n\n bodyCheckBoxStatusUpdater(status) {\n this.mainCheckBoxStatus = status;\n this.bodyCheckBoxStatus = this.mainCheckBoxStatus;\n const row = this.host;\n if (this.bodyCheckBoxStatus === true) {\n row.classList.add('sdds-table__row--selected');\n } else {\n row.classList.remove('sdds-table__row--selected');\n }\n this.internalSddsRowChange.emit(this.bodyCheckBoxStatus);\n }\n\n @Listen('internalSddsTablePropChange', { target: 'body' })\n internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\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 /** @internal Send status of single row to the parent, sdds-table component that hold logic for data export and main checkbox control */\n @Event({\n eventName: 'internalSddsRowChange',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n internalSddsRowChange: EventEmitter<boolean>;\n\n /** @internal Event that triggers pagination function. Needed as first rows have to be rendered in order for pagination to run */\n @Event({\n eventName: 'internalSddsPagination',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n internalSddsPagination: EventEmitter<string>;\n\n @Listen('internalSddsMainCheckboxSelect', { target: 'body' })\n headCheckboxListener(event: CustomEvent<any>) {\n if (this.tableId === event.detail[0]) {\n this.bodyCheckBoxStatusUpdater(event.detail[1]);\n }\n }\n\n @Listen('internalSddsCheckboxChange', { target: 'body' })\n internalSddsCheckboxChangeListener(event: CustomEvent<any>) {\n const [receivedID, receivedBodyCheckboxStatus] = event.detail;\n if (this.tableId === receivedID) {\n this.bodyCheckBoxStatusUpdater(receivedBodyCheckboxStatus);\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.internalSddsPagination.emit(this.tableId);\n }\n\n render() {\n return (\n <Host\n class={{\n 'sdds-table__row': true,\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 {this.enableMultiselect && (\n <td class=\"sdds-table__body-cell sdds-table__body-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={(event) => this.bodyCheckBoxClicked(event)}\n checked={this.bodyCheckBoxStatus}\n />\n </label>\n </div>\n </td>\n )}\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/tegel/p-29bcd369.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as d,h as s,H as r,g as o}from"./p-387e1798.js";const n=":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:var(--sdds-blue-700);--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 / 48%);--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-400);--sdds-btn-secondary-outline-color:rgb(0 0 0 / 38%);--sdds-btn-secondary-outline-color-focus:var(--sdds-blue-400);--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-color-focus:var(--sdds-black);--sdds-btn-icon-secondary-fill-focus:var(--sdds-black);--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-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:var(--sdds-red-700);--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-400);--sdds-btn-secondary-outline-color-focus:var(--sdds-blue-400);--sdds-btn-secondary-outline-color:var(--sdds-white);--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-color-focus:var(--sdds-white);--sdds-btn-icon-secondary-fill-focus:var(--sdds-white);--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:none}.sdds-btn:focus-visible{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-visible{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-visible{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-visible{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-visible{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-visible{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-visible .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-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-visible{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-visible .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:rgba(0, 0, 0, 0.38)}.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-visible{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-visible .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:rgba(0, 0, 0, 0.38)}.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-visible{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-visible .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)}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:100%;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(r,{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 o(this)}};t.style=n;export{t as sdds_button};
2	- //# sourceMappingURL=p-29bcd369.entry.js.map

package/dist/tegel/p-29bcd369.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-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 outline: none;\n }\n\n &:focus-visible {\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-visible {\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-visible {\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-visible {\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-visible {\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-visible {\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\n @if $type == 'ghost' or $type == 'secondary' {\n .sdds-btn-icon,\n &.sdds-btn-icon {\n color: rgb(0 0 0 / 38%);\n }\n } @else {\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: 100%;\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,u+tB,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/tegel/p-2c57f4bb.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as s,h as t,g as r}from"./p-387e1798.js";const e=":host{box-sizing:border-box}:host *{box-sizing:border-box}:host [role=list]{padding:0;margin:0;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:flex;flex-wrap:wrap;list-style-type:none}";const l=class{constructor(t){s(this,t)}connectedCallback(){this.el.children[this.el.children.length-1].classList.add("last")}render(){return t("nav",null,t("div",{role:"list",class:"sdds-breadcrumb"},t("slot",null)))}get el(){return r(this)}};l.style=e;export{l as sdds_breadcrumb};
2	- //# sourceMappingURL=p-2c57f4bb.entry.js.map

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

@@ -1 +0,0 @@

- {"version":3,"names":["sddsBreadcrumbCss","SddsBreadcrumb","connectedCallback","this","el","children","length","classList","add","render","h","role","class"],"sources":["./src/components/breadcrumb/sdds-breadcrumb.scss?tag=sdds-breadcrumb&encapsulation=shadow","./src/components/breadcrumb/sdds-breadcrumb.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n:host {\n @include sdds-box-sizing;\n\n [role='list'] {\n padding: 0;\n margin: 0;\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n display: flex;\n flex-wrap: wrap;\n list-style-type: none;\n }\n}\n","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'sdds-breadcrumb',\n styleUrl: 'sdds-breadcrumb.scss',\n shadow: true,\n})\nexport class SddsBreadcrumb {\n @Element() el: HTMLElement;\n\n connectedCallback() {\n this.el.children[this.el.children.length - 1].classList.add('last');\n }\n\n render() {\n return (\n <nav>\n <div role=\"list\" class={'sdds-breadcrumb'}>\n <slot></slot>\n </div>\n </nav>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAoB,sN,MCObC,EAAc,M,yBAGzBC,oBACEC,KAAKC,GAAGC,SAASF,KAAKC,GAAGC,SAASC,OAAS,GAAGC,UAAUC,IAAI,O,CAG9DC,SACE,OACEC,EAAA,WACEA,EAAA,OAAKC,KAAK,OAAOC,MAAO,mBACtBF,EAAA,c"}

package/dist/tegel/p-387e1798.js DELETED Viewed

@@ -1,3 +0,0 @@
-const t="tegel";let e;let n;let s;let l=false;let o=false;let c=false;let i=false;let f=false;const r=(t,e="")=>{{return()=>{}}};const u=(t,e)=>{{return()=>{}}};const a="{visibility:hidden}.hydrated{visibility:inherit}";const d={};const h="http://www.w3.org/2000/svg";const p="http://www.w3.org/1999/xhtml";const m=t=>t!=null;const $=t=>{t=typeof t;return t==="object"||t==="function"};function b(t){var e,n,s;return(s=(n=(e=t.head)===null||e===void 0?void 0:e.querySelector('meta[name="csp-nonce"]'))===null||n===void 0?void 0:n.getAttribute("content"))!==null&&s!==void 0?s:undefined}const y=(t,e,...n)=>{let s=null;let l=null;let o=false;let c=false;const i=[];const f=e=>{for(let n=0;n<e.length;n++){s=e[n];if(Array.isArray(s)){f(s)}else if(s!=null&&typeof s!=="boolean"){if(o=typeof t!=="function"&&!$(s)){s=String(s)}if(o&&c){i[i.length-1].t+=s}else{i.push(o?w(null,s):s)}c=o}}};f(n);if(e){if(e.name){l=e.name}{const t=e.className||e.class;if(t){e.class=typeof t!=="object"?t:Object.keys(t).filter((e=>t[e])).join(" ")}}}const r=w(t,null);r.l=e;if(i.length>0){r.o=i}{r.i=l}return r};const w=(t,e)=>{const n={u:0,h:t,t:e,p:null,o:null};{n.l=null}{n.i=null}return n};const g={};const v=t=>t&&t.h===g;const S=(t,e)=>{if(t!=null&&!$(t)){if(e&4){return t==="false"?false:t===""||!!t}if(e&2){return parseFloat(t)}if(e&1){return String(t)}return t}return t};const j=t=>vt(t).m;const k=(t,e,n)=>{const s=j(t);return{emit:t=>O(s,e,{bubbles:!!(n&4),composed:!!(n&2),cancelable:!!(n&1),detail:t})}};const O=(t,e,n)=>{const s=Ut.ce(e,n);t.dispatchEvent(s);return s};const C=new WeakMap;const M=(t,e,n)=>{let s=Rt.get(t);if(Lt&&n){s=s||new CSSStyleSheet;if(typeof s==="string"){s=e}else{s.replaceSync(e)}}else{s=e}Rt.set(t,s)};const R=(t,e,n,s)=>{var l;let o=T(e);const c=Rt.get(o);t=t.nodeType===11?t:Tt;if(c){if(typeof c==="string"){t=t.head||t;let e=C.get(t);let n;if(!e){C.set(t,e=new Set)}if(!e.has(o)){{{n=Tt.createElement("style");n.innerHTML=c}const e=(l=Ut.$)!==null&&l!==void 0?l:b(Tt);if(e!=null){n.setAttribute("nonce",e)}t.insertBefore(n,t.querySelector("link"))}if(e){e.add(o)}}}else if(!t.adoptedStyleSheets.includes(c)){t.adoptedStyleSheets=[...t.adoptedStyleSheets,c]}}return o};const P=t=>{const e=t.g;const n=t.m;const s=e.u;const l=r("attachStyles",e.v);const o=R(n.shadowRoot?n.shadowRoot:n.getRootNode(),e);if(s&10){n["s-sc"]=o;n.classList.add(o+"-h");if(s&2){n.classList.add(o+"-s")}}l()};const T=(t,e)=>"sc-"+t.v;const U=(t,e,n,s,l,o)=>{if(n!==s){let c=kt(t,e);let i=e.toLowerCase();if(e==="class"){const e=t.classList;const l=L(n);const o=L(s);e.remove(...l.filter((t=>t&&!o.includes(t))));e.add(...o.filter((t=>t&&!l.includes(t))))}else if(e==="style"){{for(const e in n){if(!s||s[e]==null){if(e.includes("-")){t.style.removeProperty(e)}else{t.style[e]=""}}}}for(const e in s){if(!n||s[e]!==n[e]){if(e.includes("-")){t.style.setProperty(e,s[e])}else{t.style[e]=s[e]}}}}else if(e==="ref"){if(s){s(t)}}else if(!c&&e[0]==="o"&&e[1]==="n"){if(e[2]==="-"){e=e.slice(3)}else if(kt(Pt,i)){e=i.slice(2)}else{e=i[2]+e.slice(3)}if(n){Ut.rel(t,e,n,false)}if(s){Ut.ael(t,e,s,false)}}else{const i=$(s);if((c||i&&s!==null)&&!l){try{if(!t.tagName.includes("-")){const l=s==null?"":s;if(e==="list"){c=false}else if(n==null||t[e]!=l){t[e]=l}}else{t[e]=s}}catch(t){}}if(s==null||s===false){if(s!==false||t.getAttribute(e)===""){{t.removeAttribute(e)}}}else if((!c||o&4||l)&&!i){s=s===true?"":s;{t.setAttribute(e,s)}}}}};const x=/\s/;const L=t=>!t?[]:t.split(x);const N=(t,e,n,s)=>{const l=e.p.nodeType===11&&e.p.host?e.p.host:e.p;const o=t&&t.l||d;const c=e.l||d;{for(s in o){if(!(s in c)){U(l,s,o[s],undefined,n,e.u)}}}for(s in c){U(l,s,o[s],c[s],n,e.u)}};const W=(t,o,f,r)=>{const u=o.o[f];let a=0;let d;let $;let b;if(!l){c=true;if(u.h==="slot"){if(e){r.classList.add(e+"-s")}u.u|=u.o?2:1}}if(u.t!==null){d=u.p=Tt.createTextNode(u.t)}else if(u.u&1){d=u.p=Tt.createTextNode("")}else{if(!i){i=u.h==="svg"}d=u.p=Tt.createElementNS(i?h:p,u.u&2?"slot-fb":u.h);if(i&&u.h==="foreignObject"){i=false}{N(null,u,i)}if(m(e)&&d["s-si"]!==e){d.classList.add(d["s-si"]=e)}if(u.o){for(a=0;a<u.o.length;++a){$=W(t,u,a,d);if($){d.appendChild($)}}}{if(u.h==="svg"){i=false}else if(d.tagName==="foreignObject"){i=true}}}{d["s-hn"]=s;if(u.u&(2|1)){d["s-sr"]=true;d["s-cr"]=n;d["s-sn"]=u.i||"";b=t&&t.o&&t.o[f];if(b&&b.h===u.h&&t.p){D(t.p,false)}}}return d};const D=(t,e)=>{Ut.u|=1;const n=t.childNodes;for(let t=n.length-1;t>=0;t--){const l=n[t];if(l["s-hn"]!==s&&l["s-ol"]){I(l).insertBefore(l,q(l));l["s-ol"].remove();l["s-ol"]=undefined;c=true}if(e){D(l,e)}}Ut.u&=~1};const E=(t,e,n,l,o,c)=>{let i=t["s-cr"]&&t["s-cr"].parentNode||t;let f;if(i.shadowRoot&&i.tagName===s){i=i.shadowRoot}for(;o<=c;++o){if(l[o]){f=W(null,n,o,t);if(f){l[o].p=f;i.insertBefore(f,q(e))}}}};const A=(t,e,n,s,l)=>{for(;e<=n;++e){if(s=t[e]){l=s.p;J(s);{o=true;if(l["s-ol"]){l["s-ol"].remove()}else{D(l,true)}}l.remove()}}};const F=(t,e,n,s)=>{let l=0;let o=0;let c=e.length-1;let i=e[0];let f=e[c];let r=s.length-1;let u=s[0];let a=s[r];let d;while(l<=c&&o<=r){if(i==null){i=e[++l]}else if(f==null){f=e[--c]}else if(u==null){u=s[++o]}else if(a==null){a=s[--r]}else if(H(i,u)){V(i,u);i=e[++l];u=s[++o]}else if(H(f,a)){V(f,a);f=e[--c];a=s[--r]}else if(H(i,a)){if(i.h==="slot"||a.h==="slot"){D(i.p.parentNode,false)}V(i,a);t.insertBefore(i.p,f.p.nextSibling);i=e[++l];a=s[--r]}else if(H(f,u)){if(i.h==="slot"||a.h==="slot"){D(f.p.parentNode,false)}V(f,u);t.insertBefore(f.p,i.p);f=e[--c];u=s[++o]}else{{d=W(e&&e[o],n,o,t);u=s[++o]}if(d){{I(i.p).insertBefore(d,q(i.p))}}}}if(l>c){E(t,s[r+1]==null?null:s[r+1].p,n,s,o,r)}else if(o>r){A(e,l,c)}};const H=(t,e)=>{if(t.h===e.h){if(t.h==="slot"){return t.i===e.i}return true}return false};const q=t=>t&&t["s-ol"]||t;const I=t=>(t["s-ol"]?t["s-ol"]:t).parentNode;const V=(t,e)=>{const n=e.p=t.p;const s=t.o;const l=e.o;const o=e.h;const c=e.t;let f;if(c===null){{i=o==="svg"?true:o==="foreignObject"?false:i}{if(o==="slot");else{N(t,e,i)}}if(s!==null&&l!==null){F(n,s,e,l)}else if(l!==null){if(t.t!==null){n.textContent=""}E(n,null,e,l,0,l.length-1)}else if(s!==null){A(s,0,s.length-1)}if(i&&o==="svg"){i=false}}else if(f=n["s-cr"]){f.parentNode.textContent=c}else if(t.t!==c){n.data=c}};const _=t=>{const e=t.childNodes;let n;let s;let l;let o;let c;let i;for(s=0,l=e.length;s<l;s++){n=e[s];if(n.nodeType===1){if(n["s-sr"]){c=n["s-sn"];n.hidden=false;for(o=0;o<l;o++){i=e[o].nodeType;if(e[o]["s-hn"]!==n["s-hn"]||c!==""){if(i===1&&c===e[o].getAttribute("slot")){n.hidden=true;break}}else{if(i===1||i===3&&e[o].textContent.trim()!==""){n.hidden=true;break}}}}_(n)}}};const z=[];const B=t=>{let e;let n;let s;let l;let c;let i;let f=0;const r=t.childNodes;const u=r.length;for(;f<u;f++){e=r[f];if(e["s-sr"]&&(n=e["s-cr"])&&n.parentNode){s=n.parentNode.childNodes;l=e["s-sn"];for(i=s.length-1;i>=0;i--){n=s[i];if(!n["s-cn"]&&!n["s-nr"]&&n["s-hn"]!==e["s-hn"]){if(G(n,l)){c=z.find((t=>t.S===n));o=true;n["s-sn"]=n["s-sn"]||l;if(c){c.j=e}else{z.push({j:e,S:n})}if(n["s-sr"]){z.map((t=>{if(G(t.S,n["s-sn"])){c=z.find((t=>t.S===n));if(c&&!t.j){t.j=c.j}}}))}}else if(!z.some((t=>t.S===n))){z.push({S:n})}}}}if(e.nodeType===1){B(e)}}};const G=(t,e)=>{if(t.nodeType===1){if(t.getAttribute("slot")===null&&e===""){return true}if(t.getAttribute("slot")===e){return true}return false}if(t["s-sn"]===e){return true}return e===""};const J=t=>{{t.l&&t.l.ref&&t.l.ref(null);t.o&&t.o.map(J)}};const K=(t,i)=>{const f=t.m;const r=t.g;const u=t.k||w(null,null);const a=v(i)?i:y(null,null,i);s=f.tagName;if(r.O){a.l=a.l||{};r.O.map((([t,e])=>a.l[e]=f[t]))}a.h=null;a.u|=4;t.k=a;a.p=u.p=f.shadowRoot||f;{e=f["s-sc"]}{n=f["s-cr"];l=(r.u&1)!==0;o=false}V(u,a);{Ut.u|=1;if(c){B(a.p);let t;let e;let n;let s;let l;let o;let c=0;for(;c<z.length;c++){t=z[c];e=t.S;if(!e["s-ol"]){n=Tt.createTextNode("");n["s-nr"]=e;e.parentNode.insertBefore(e["s-ol"]=n,e)}}for(c=0;c<z.length;c++){t=z[c];e=t.S;if(t.j){s=t.j.parentNode;l=t.j.nextSibling;n=e["s-ol"];while(n=n.previousSibling){o=n["s-nr"];if(o&&o["s-sn"]===e["s-sn"]&&s===o.parentNode){o=o.nextSibling;if(!o||!o["s-nr"]){l=o;break}}}if(!l&&s!==e.parentNode||e.nextSibling!==l){if(e!==l){if(!e["s-hn"]&&e["s-ol"]){e["s-hn"]=e["s-ol"].parentNode.nodeName}s.insertBefore(e,l)}}}else{if(e.nodeType===1){e.hidden=true}}}}if(o){_(a.p)}Ut.u&=~1;z.length=0}};const Q=(t,e)=>{if(e&&!t.C&&e["s-p"]){e["s-p"].push(new Promise((e=>t.C=e)))}};const X=(t,e)=>{{t.u|=16}if(t.u&4){t.u|=512;return}Q(t,t.M);const n=()=>Y(t,e);return Ht(n)};const Y=(t,e)=>{const n=r("scheduleUpdate",t.g.v);const s=t.R;let l;if(e){{t.u|=256;if(t.P){t.P.map((([t,e])=>st(s,t,e)));t.P=null}}{l=st(s,"componentWillLoad")}}{l=lt(l,(()=>st(s,"componentWillRender")))}n();return lt(l,(()=>Z(t,s,e)))};const Z=async(t,e,n)=>{const s=t.m;const l=r("update",t.g.v);const o=s["s-rc"];if(n){P(t)}const c=r("render",t.g.v);{tt(t,e)}if(o){o.map((t=>t()));s["s-rc"]=undefined}c();l();{const e=s["s-p"];const n=()=>et(t);if(e.length===0){n()}else{Promise.all(e).then(n);t.u|=4;e.length=0}}};const tt=(t,e,n)=>{try{e=e.render();{t.u&=~16}{t.u|=2}{{{K(t,e)}}}}catch(e){Ot(e,t.m)}return null};const et=t=>{const e=t.g.v;const n=t.m;const s=r("postUpdate",e);const l=t.R;const o=t.M;{st(l,"componentDidRender")}if(!(t.u&64)){t.u|=64;{ot(n)}{st(l,"componentDidLoad")}s();{t.T(n);if(!o){nt()}}}else{{st(l,"componentDidUpdate")}s()}{t.U(n)}{if(t.C){t.C();t.C=undefined}if(t.u&512){Ft((()=>X(t,false)))}t.u&=~(4|512)}};const nt=e=>{{ot(Tt.documentElement)}Ft((()=>O(Pt,"appload",{detail:{namespace:t}})))};const st=(t,e,n)=>{if(t&&t[e]){try{return t[e](n)}catch(t){Ot(t)}}return undefined};const lt=(t,e)=>t&&t.then?t.then(e):e();const ot=t=>t.classList.add("hydrated");const ct=(t,e)=>vt(t).L.get(e);const it=(t,e,n,s)=>{const l=vt(t);const o=l.m;const c=l.L.get(e);const i=l.u;const f=l.R;n=S(n,s.N[e][0]);const r=Number.isNaN(c)&&Number.isNaN(n);const u=n!==c&&!r;if((!(i&8)||c===undefined)&&u){l.L.set(e,n);if(f){if(s.W&&i&128){const t=s.W[e];if(t){t.map((t=>{try{f[t](n,c,e)}catch(t){Ot(t,o)}}))}}if((i&(2|16))===2){X(l,false)}}}};const ft=(t,e,n)=>{if(e.N){if(t.watchers){e.W=t.watchers}const s=Object.entries(e.N);const l=t.prototype;s.map((([t,[s]])=>{if(s&31||n&2&&s&32){Object.defineProperty(l,t,{get(){return ct(this,t)},set(n){it(this,t,n,e)},configurable:true,enumerable:true})}else if(n&1&&s&64){Object.defineProperty(l,t,{value(...e){const n=vt(this);return n.D.then((()=>n.R[t](...e)))}})}}));if(n&1){const n=new Map;l.attributeChangedCallback=function(t,e,s){Ut.jmp((()=>{const e=n.get(t);if(this.hasOwnProperty(e)){s=this[e];delete this[e]}else if(l.hasOwnProperty(e)&&typeof this[e]==="number"&&this[e]==s){return}this[e]=s===null&&typeof this[e]==="boolean"?false:s}))};t.observedAttributes=s.filter((([t,e])=>e[0]&15)).map((([t,s])=>{const l=s[1]||t;n.set(l,t);if(s[0]&512){e.O.push([t,l])}return l}))}}return t};const rt=async(t,e,n,s,l)=>{if((e.u&32)===0){{e.u|=32;l=Mt(n);if(l.then){const t=u();l=await l;t()}if(!l.isProxied){{n.W=l.watchers}ft(l,n,2);l.isProxied=true}const t=r("createInstance",n.v);{e.u|=8}try{new l(e)}catch(t){Ot(t)}{e.u&=~8}{e.u|=128}t();ut(e.R)}if(l.style){let t=l.style;const e=T(n);if(!Rt.has(e)){const s=r("registerStyles",n.v);M(e,t,!!(n.u&1));s()}}}const o=e.M;const c=()=>X(e,true);if(o&&o["s-rc"]){o["s-rc"].push(c)}else{c()}};const ut=t=>{{st(t,"connectedCallback")}};const at=t=>{if((Ut.u&1)===0){const e=vt(t);const n=e.g;const s=r("connectedCallback",n.v);if(!(e.u&1)){e.u|=1;{if(n.u&(4|8)){dt(t)}}{let n=t;while(n=n.parentNode||n.host){if(n["s-p"]){Q(e,e.M=n);break}}}if(n.N){Object.entries(n.N).map((([e,[n]])=>{if(n&31&&t.hasOwnProperty(e)){const n=t[e];delete t[e];t[e]=n}}))}{rt(t,e,n)}}else{mt(t,e,n.A);ut(e.R)}s()}};const dt=t=>{const e=t["s-cr"]=Tt.createComment("");e["s-cn"]=true;t.insertBefore(e,t.firstChild)};const ht=t=>{if((Ut.u&1)===0){const e=vt(t);const n=e.R;{if(e.F){e.F.map((t=>t()));e.F=undefined}}{st(n,"disconnectedCallback")}}};const pt=(t,e={})=>{var n;const s=r();const l=[];const o=e.exclude||[];const c=Pt.customElements;const i=Tt.head;const f=i.querySelector("meta[charset]");const u=Tt.createElement("style");const d=[];let h;let p=true;Object.assign(Ut,e);Ut.H=new URL(e.resourcesUrl||"./",Tt.baseURI).href;t.map((t=>{t[1].map((e=>{const n={u:e[0],v:e[1],N:e[2],A:e[3]};{n.N=e[2]}{n.A=e[3]}{n.O=[]}{n.W={}}const s=n.v;const i=class extends HTMLElement{constructor(t){super(t);t=this;jt(t,n);if(n.u&1){{{t.attachShadow({mode:"open"})}}}}connectedCallback(){if(h){clearTimeout(h);h=null}if(p){d.push(this)}else{Ut.jmp((()=>at(this)))}}disconnectedCallback(){Ut.jmp((()=>ht(this)))}componentOnReady(){return vt(this).q}};n.I=t[0];if(!o.includes(s)&&!c.get(s)){l.push(s);c.define(s,ft(i,n,1))}}))}));{u.innerHTML=l+a;u.setAttribute("data-styles","");const t=(n=Ut.$)!==null&&n!==void 0?n:b(Tt);if(t!=null){u.setAttribute("nonce",t)}i.insertBefore(u,f?f.nextSibling:i.firstChild)}p=false;if(d.length){d.map((t=>t.connectedCallback()))}else{{Ut.jmp((()=>h=setTimeout(nt,30)))}}s()};const mt=(t,e,n,s)=>{if(n){n.map((([n,s,l])=>{const o=bt(t,n);const c=$t(e,l);const i=yt(n);Ut.ael(o,s,c,i);(e.F=e.F||[]).push((()=>Ut.rel(o,s,c,i)))}))}};const $t=(t,e)=>n=>{try{{if(t.u&256){t.R[e](n)}else{(t.P=t.P||[]).push([e,n])}}}catch(t){Ot(t)}};const bt=(t,e)=>{if(e&4)return Tt;if(e&8)return Pt;if(e&16)return Tt.body;return t};const yt=t=>(t&2)!==0;const wt=t=>Ut.$=t;const gt=new WeakMap;const vt=t=>gt.get(t);const St=(t,e)=>gt.set(e.R=t,e);const jt=(t,e)=>{const n={u:0,m:t,g:e,L:new Map};{n.D=new Promise((t=>n.U=t))}{n.q=new Promise((t=>n.T=t));t["s-p"]=[];t["s-rc"]=[]}mt(t,n,e.A);return gt.set(t,n)};const kt=(t,e)=>e in t;const Ot=(t,e)=>(0,console.error)(t,e);const Ct=new Map;const Mt=(t,e,n)=>{const s=t.v.replace(/-/g,"_");const l=t.I;const o=Ct.get(l);if(o){return o[s]}
-/*!__STENCIL_STATIC_IMPORT_SWITCH__*/return import(`./${l}.entry.js${""}`).then((t=>{{Ct.set(l,t)}return t[s]}),Ot)};const Rt=new Map;const Pt=typeof window!=="undefined"?window:{};const Tt=Pt.document||{head:{}};const Ut={u:0,H:"",jmp:t=>t(),raf:t=>requestAnimationFrame(t),ael:(t,e,n,s)=>t.addEventListener(e,n,s),rel:(t,e,n,s)=>t.removeEventListener(e,n,s),ce:(t,e)=>new CustomEvent(t,e)};const xt=t=>Promise.resolve(t);const Lt=(()=>{try{new CSSStyleSheet;return typeof(new CSSStyleSheet).replaceSync==="function"}catch(t){}return false})();const Nt=[];const Wt=[];const Dt=(t,e)=>n=>{t.push(n);if(!f){f=true;if(e&&Ut.u&4){Ft(At)}else{Ut.raf(At)}}};const Et=t=>{for(let e=0;e<t.length;e++){try{t[e](performance.now())}catch(t){Ot(t)}}t.length=0};const At=()=>{Et(Nt);{Et(Wt);if(f=Nt.length>0){Ut.raf(At)}}};const Ft=t=>xt().then(t);const Ht=Dt(Wt,true);export{g as H,pt as b,k as c,j as g,y as h,xt as p,St as r,wt as s};
-//# sourceMappingURL=p-387e1798.js.map