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

@scania/tegel 0.0.4 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1252) hide show

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

	@@ -1 +1 @@
1	- {"file":"sdds-slider.js","mappings":"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","names":[],"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-grey-800);\n color: var(--sdds-white);\n\n svg {\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-label-color-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-controls-color);\n }\n }\n }\n }\n\n .sdds-slider__input-values {\n .sdds-slider__input-value {\n color: var(--sdds-slider-controls-color);\n }\n\n .sdds-slider__input-field-wrapper {\n pointer-events: none;\n\n input.sdds-slider__input-field {\n color: var(--sdds-slider-controls-color);\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-track-fill-color);\n }\n }\n\n .sdds-slider__value-dividers {\n .sdds-slider__value-divider {\n span {\n color: var(--sdds-slider-track-fill-color);\n }\n }\n }\n\n .sdds-slider__scrubber {\n pointer-events: none;\n\n .sdds-slider__scrubber-inner {\n background: var(--sdds-slider-track-color);\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__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-controls-color);\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 = null;\n\n /* Sets the disabled state for the whole component /\n @Prop() disabled: boolean = null;\n\n /* Sets the read only state for the whole component /\n @Prop() readOnly: boolean = null;\n\n /* Decide to show the controls or not /\n @Prop() controls: boolean = null;\n\n /* Decide to show the input field or not /\n @Prop() input: boolean = null;\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() size: 'sm' \| '' = '';\n\n /* Snap to the ticks grid /\n @Prop() snap: boolean = null;\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 unique checkbox identifier and value when the slider has a change in value. /\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 !== null) {\n this.disabledState = true;\n } else {\n this.disabledState = false;\n }\n\n if (this.readOnly !== null) {\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 !== null) {\n this.useControls = true;\n } else if (this.input !== null) {\n this.useInput = true;\n }\n\n this.useSmall = false;\n\n if (this.size === 'sm') {\n this.useSmall = true;\n }\n\n this.useSnapping = false;\n\n if (this.snap !== null) {\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 id={this.sliderId}\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 !== null && (\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=\"#37414F\"\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"],"version":3}
1	+ {"file":"sdds-slider.js","mappings":"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","names":[],"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 &.min-value {\n padding-left: 0px;\n }\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 border-radius: 4px 4px 0 0;\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 padding-bottom: 16px;\n transform: translateY(-100%);\n\n &.offset {\n padding-bottom: 34px;\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 private wrapperElement: HTMLElement = null;\n\n private scrubberElement: HTMLElement = null;\n\n private scrubberInnerElement: HTMLElement = null;\n\n private trackElement: HTMLElement = null;\n\n private trackFillElement: HTMLElement = null;\n\n private minusElement: HTMLElement = null;\n\n private plusElement: HTMLElement = null;\n\n private inputElement: HTMLInputElement = null;\n\n private scrubberGrabbed: boolean = false;\n\n private scrubberLeft: number = 0;\n\n private tickValues: Array<number> = [];\n\n private disabledState: boolean = false;\n\n private readonlyState: boolean = false;\n\n private useControls: boolean = false;\n\n private useInput: boolean = false;\n\n private useSmall: boolean = false;\n\n private useSnapping: boolean = false;\n\n private supposedValueSlot: number = -1;\n\n private eventListenersAdded: boolean = false;\n\n private resizeObserverAdded: boolean = false;\n\n /* Sends the value of the slider when changed. /\n @Event({\n eventName: 'sddsChange',\n composed: true,\n cancelable: false,\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 this.scrubberCore(event);\n }\n\n @Listen('touchmove', { target: 'window' })\n handleTouchMove(event) {\n event.preventDefault();\n\n if (!this.scrubberGrabbed) {\n return;\n }\n\n this.scrubberCore(event);\n }\n\n scrubberCore(event) {\n const numTicks = parseInt(this.ticks);\n const trackRect = this.trackElement.getBoundingClientRect();\n let localLeft = 0;\n if (event.type === 'mousemove') {\n localLeft = event.clientX - trackRect.left;\n } else if (event.type === 'touchmove') {\n localLeft = event.touches[0].clientX - trackRect.left;\n } else console.warn('Slider component: Unsupported event!');\n\n this.supposedValueSlot = -1;\n\n if (this.useSnapping && numTicks > 0) {\n const trackWidth = this.getTrackWidth();\n const distanceBetweenTicks = Math.round(trackWidth / (numTicks + 1));\n localLeft = Math.round(localLeft / distanceBetweenTicks) distanceBetweenTicks;\n\n let scrubberPositionPX = 0;\n if (localLeft >= 0 && localLeft <= trackWidth) {\n scrubberPositionPX = localLeft;\n } else if (localLeft > trackWidth) {\n scrubberPositionPX = trackWidth;\n } else if (localLeft < 0) {\n scrubberPositionPX = 0;\n }\n this.supposedValueSlot = Math.round(scrubberPositionPX / distanceBetweenTicks);\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 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();\n });\n\n this.scrubberElement.addEventListener('touchstart', () => {\n this.grabScrubber();\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() {\n if (this.readonlyState) {\n return;\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 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 <label class={this.showTickNumbers && 'offset'}>{this.label}</label>\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 min-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 {this.tickValues.length > 0 && (\n <div class=\"sdds-slider__value-dividers-wrapper\">\n <div class=\"sdds-slider__value-dividers\">\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"],"version":3}

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

@@ -1,47 +1,55 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './icon.js';
-const sddsStepperItemCss = ":host{position:relative}:host sdds-icon{line-height:1}:host [role=listItem]{display:flex;justify-content:start;flex-direction:row;align-items:center;gap:8px}:host [role=listItem].text-below{flex-direction:column}:host [role=listItem].lg{padding:0 20px;font:var(--sdds-detail-01);letter-spacing:var(--sdds-detail-01-ls)}:host [role=listItem].lg .content-container{height:30px;width:30px}:host [role=listItem].lg.vertical::after{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:36px;width:1px;top:40px;left:36px}:host [role=listItem].lg.horizontal::after{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 24px);right:0;top:16px}:host [role=listItem].lg.horizontal::before{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;right:calc(50% + 24px);left:0;top:16px}:host [role=listItem].lg.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:auto;right:-10px}:host [role=listItem].lg.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:-10px;right:auto}:host [role=listItem].sm{padding:0 20px;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls)}:host [role=listItem].sm .content-container{height:24px;width:24px}:host [role=listItem].sm.vertical::after{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listItem].sm.vertical::before{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listItem].sm.horizontal::after{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 16px + 8px);right:0;top:13px}:host [role=listItem].sm.horizontal::before{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:0;right:calc(50% + 24px);top:13px}:host [role=listItem].sm.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:auto;right:-10px}:host [role=listItem].sm.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:-10px;right:auto}:host [role=listItem] .content-container{border-radius:100px;border:1px solid var(--sdds-stepper-icon-background);display:flex;justify-content:center;align-items:center;position:relative}:host [role=listItem] .content-container.error{border-color:var(--sdds-negative);color:var(--sdds-negative)}:host [role=listItem] .content-container.success{background-color:var(--sdds-positive);border-color:var(--sdds-positive);color:var(--sdds-white)}:host [role=listItem] .content-container.upcoming{background-color:transparent;border-color:var(--sdds-stepper-label-border-color-upcoming);color:var(--sdds-stepper-label-text-color-upcoming);opacity:var(--sdds-stepper-label-text-opacity-upcoming)}:host [role=listItem] .label{text-align:center}:host [role=listItem] .label.lg{font:var(--sdds-detail-01);letter-spacing:var(--sdds-detail-01-ls)}:host [role=listItem] .label.sm{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls)}:host [role=listItem] .label.upcoming{color:var(--sdds-stepper-label-text-color-upcoming);opacity:var(--sdds-stepper-label-text-opacity-upcoming)}:host(.last) [role=listItem].sm::after,:host(.last) [role=listItem].lg::after{display:none}:host(.last) [role=listItem].sm.vertical::before{display:none}:host(.first) [role=listItem].sm::before,:host(.first) [role=listItem].lg::before{display:none}";
+const sddsStepperItemCss = ":host{position:relative;display:table-cell}:host sdds-icon{line-height:1}:host [role=listItem]{display:flex;justify-content:start;flex-direction:row;align-items:center;gap:8px}:host [role=listItem].text-below{flex-direction:column}:host [role=listItem].lg{padding:0 20px;font:var(--sdds-detail-01);letter-spacing:var(--sdds-detail-01-ls)}:host [role=listItem].lg .content-container{height:30px;min-width:30px}:host [role=listItem].lg.vertical::after{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:36px;width:1px;top:40px;left:36px}:host [role=listItem].lg.horizontal::after{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 24px);right:0;top:18px}:host [role=listItem].lg.horizontal::before{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;right:calc(50% + 24px);left:0;top:18px}:host [role=listItem].lg.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:auto;right:-10px}:host [role=listItem].lg.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:-10px;right:auto}:host [role=listItem].sm{padding:0 20px;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls)}:host [role=listItem].sm .content-container{height:24px;min-width:24px}:host [role=listItem].sm.vertical::after{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listItem].sm.vertical::before{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listItem].sm.horizontal::after{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 16px + 8px);right:0;top:13px}:host [role=listItem].sm.horizontal::before{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:0;right:calc(50% + 24px);top:13px}:host [role=listItem].sm.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:auto;right:-10px}:host [role=listItem].sm.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:-10px;right:auto}:host [role=listItem] .content-container{border-radius:100px;border:1px solid var(--sdds-stepper-icon-background);display:flex;justify-content:center;align-items:center;position:relative}:host [role=listItem] .content-container.error{border-color:var(--sdds-negative);color:var(--sdds-negative)}:host [role=listItem] .content-container.success{background-color:var(--sdds-positive);border-color:var(--sdds-positive);color:var(--sdds-white)}:host [role=listItem] .content-container.upcoming{background-color:transparent;border-color:var(--sdds-stepper-label-border-color-upcoming);color:var(--sdds-stepper-label-text-color-upcoming);opacity:var(--sdds-stepper-label-text-opacity-upcoming)}:host [role=listItem] .label{text-align:center}:host [role=listItem] .label.lg{font:var(--sdds-detail-01);letter-spacing:var(--sdds-detail-01-ls)}:host [role=listItem] .label.sm{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls)}:host [role=listItem] .label.upcoming{color:var(--sdds-stepper-label-text-color-upcoming);opacity:var(--sdds-stepper-label-text-opacity-upcoming)}:host(.last) [role=listItem].sm::after,:host(.last) [role=listItem].lg::after{display:none}:host(.last) [role=listItem].sm.vertical::before{display:none}:host(.first) [role=listItem].sm::before,:host(.first) [role=listItem].lg::before{display:none}";
 const SddsStepper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.labelText = '';
+    this.index = undefined;
     this.state = 'upcoming';
     this.hideLabel = undefined;
     this.size = undefined;
-    this.iconSize = undefined;
-    this.direction = undefined;
+    this.orientation = undefined;
     this.labelPosition = undefined;
   }
+  /* Needs to be onload to do this on any updates. */
   componentWillLoad() {
     this.stepperEl = this.el.closest('sdds-stepper');
-    this.direction = this.stepperEl.direction;
+    this.orientation = this.stepperEl.orientation;
     this.labelPosition = this.stepperEl.labelPosition;
     this.size = this.stepperEl.size;
     this.hideLabel = this.stepperEl.hideLabels;
+    this.stepperId = this.stepperEl.stepperId;
   }
-  /** Method to set the width if the stepper item based on its siblings widht, used by the parent element. */
-  async setWidth(width) {
-    this.el.style.width = `${width}px`;
+  handlePropsChange(event) {
+    if (this.stepperId === event.detail.stepperId) {
+      event.detail.changed.forEach((changedProp) => {
+        if (typeof this[changedProp] === 'undefined') {
+          throw new Error(`Table prop is not supported: ${changedProp}`);
+        }
+        if (this[changedProp] === this.orientation && event.detail[changedProp] === 'vertical') {
+          this.labelPosition = 'aside';
+        }
+        this[changedProp] = event.detail[changedProp];
+      });
+    }
   }
   render() {
-    return (h(Host, null, h("div", { role: "listItem", class: `${this.size} ${this.direction} text-${this.labelPosition} ${this.hideLabel ? 'hide-labels' : ''}` }, h("div", { class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("sdds-icon", { name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("div", { class: "number sdds-detail-05" }, h("slot", null)))), !this.hideLabel && (h("div", { class: `label ${this.size} ${this.state}` }, this.labelText)))));
+    return (h(Host, null, h("div", { role: "listItem", class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabel ? 'hide-labels' : ''}` }, h("div", { class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("sdds-icon", { name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (this.index)), !this.hideLabel && (h("div", { class: `label ${this.size} ${this.state}` }, h("slot", { name: "label" }))))));
   }
   get el() { return this; }
   static get style() { return sddsStepperItemCss; }
 }, [1, "sdds-stepper-item", {
-    "labelText": [1, "label-text"],
+    "index": [1],
     "state": [1],
     "hideLabel": [32],
     "size": [32],
-    "iconSize": [32],
-    "direction": [32],
-    "labelPosition": [32],
-    "setWidth": [64]
-  }]);
+    "orientation": [32],
+    "labelPosition": [32]
+  }, [[16, "internalSddsPropsChange", "handlePropsChange"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/sdds-stepper-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-stepper-item.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,~~ynIAAynI~~;;~~MCOvoI~~,WAAW~~;;;;;qBAEM~~,~~EAAE;iBAGgC,~~UAAU;;;;;;;~~EAgBxE~~,iBAAiB;IACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;IACjD,IAAI,CAAC,~~SAAS~~,GAAG,IAAI,CAAC,SAAS,CAAC,~~SAAS~~,CAAC;~~IAC1C~~,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC;IAClD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAChC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;~~GAC5C;;EAID~~,MAAM,~~QAAQ~~,CAAC,KAAK;~~IAClB~~,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,~~IAAI~~,CAAC;~~GACpC~~;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,~~SAAS~~,SAAS,IAAI,CAAC,aAAa,~~IAC9D~~,IAAI,CAAC,SAAS,GAAG,aAAa,GAAG,EACnC,EAAE,IAEF,WAAK,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,oBAAoB,IAC1C,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,IACjD,iBACE,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,EACnD,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,GAAG,MAAM,GAAG,MAAM,GAC/B,KAEb,~~WAAK~~,KAAK,~~EAAC~~,~~uBAAuB,IAChC,eAAa,CACT,CACP,~~CACG,EACL,CAAC,IAAI,CAAC,SAAS,KACd,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,~~IAAG~~,IAAI,~~CAAC~~,~~SAAS~~,~~CAAO~~,~~CACvE~~,CACG,CACD,EACP;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["./src/components/stepper/stepper-item/sdds-stepper-item.scss?tag=sdds-stepper-item&encapsulation=shadow","./src/components/stepper/stepper-item/sdds-stepper-item.tsx"],"sourcesContent":["@mixin divider {\n content: ' ';\n position: absolute;\n background-color: var(--sdds-stepper-icon-step-background-after);\n opacity: 0.16;\n}\n\n:host {\n position: relative;\n\n sdds-icon {\n line-height: 1;\n }\n\n [role='listItem'] {\n display: flex;\n justify-content: start;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n\n &.text-below {\n flex-direction: column;\n }\n\n &.lg {\n padding: 0 20px;\n font: var(--sdds-detail-01);\n letter-spacing: var(--sdds-detail-01-ls);\n\n .content-container {\n height: 30px;\n width: 30px;\n }\n\n &.vertical {\n &::after {\n @include divider;\n\n height: 36px;\n width: 1px;\n top: 40px;\n left: 36px;\n }\n }\n\n &.horizontal {\n &::after {\n @include divider;\n\n height: 1px;\n left: calc(50% + 24px);\n right: 0;\n top: ~~16px~~;\n }\n\n &::before {\n @include divider;\n\n height: 1px;\n right: calc(50% + 24px);\n left: 0;\n top: ~~16px~~;\n }\n\n &.text-aside {\n &:not(.hide-labels) {\n &::after {\n @include divider;\n\n height: 1px;\n top: 16px;\n width: 10px;\n left: auto;\n right: -10px;\n }\n\n &::before {\n @include divider;\n\n height: 1px;\n top: 16px;\n width: 10px;\n left: -10px;\n right: auto;\n }\n }\n }\n }\n }\n\n &.sm {\n padding: 0 20px;\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n\n .content-container {\n height: 24px;\n width: 24px;\n }\n\n &.vertical {\n &::after {\n @include divider;\n\n height: 20px;\n width: 1px;\n top: 34px;\n left: 32px;\n }\n\n &::before {\n @include divider;\n\n height: 20px;\n width: 1px;\n top: 34px;\n left: 32px;\n }\n }\n\n &.horizontal {\n &::after {\n @include divider;\n\n height: 1px;\n left: calc(50% + 16px + 8px);\n right: 0;\n top: 13px;\n }\n\n &::before {\n @include divider;\n\n height: 1px;\n left: 0;\n right: calc(50% + 24px);\n top: 13px;\n }\n\n &.text-aside {\n &:not(.hide-labels) {\n &::after {\n @include divider;\n\n height: 1px;\n top: 13px;\n width: 10px;\n left: auto;\n right: -10px;\n }\n\n &::before {\n @include divider;\n\n height: 1px;\n top: 13px;\n width: 10px;\n left: -10px;\n right: auto;\n }\n }\n }\n }\n }\n\n .content-container {\n border-radius: 100px;\n border: 1px solid var(--sdds-stepper-icon-background);\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n\n &.error {\n border-color: var(--sdds-negative);\n color: var(--sdds-negative);\n }\n\n &.success {\n background-color: var(--sdds-positive);\n border-color: var(--sdds-positive);\n color: var(--sdds-white);\n }\n\n &.upcoming {\n background-color: transparent;\n border-color: var(--sdds-stepper-label-border-color-upcoming);\n color: var(--sdds-stepper-label-text-color-upcoming);\n opacity: var(--sdds-stepper-label-text-opacity-upcoming);\n }\n }\n\n .label {\n text-align: center;\n\n &.lg {\n font: var(--sdds-detail-01);\n letter-spacing: var(--sdds-detail-01-ls);\n }\n\n &.sm {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n }\n\n &.upcoming {\n color: var(--sdds-stepper-label-text-color-upcoming);\n opacity: var(--sdds-stepper-label-text-opacity-upcoming);\n }\n }\n }\n}\n\n:host(.last) {\n [role='listItem'] {\n &.sm,\n &.lg {\n &::after {\n display: none;\n }\n }\n }\n\n [role='listItem'] {\n &.sm {\n &.vertical {\n &::before {\n display: none;\n }\n }\n }\n }\n}\n\n:host(.first) {\n [role='listItem'] {\n &.sm,\n &.lg {\n &::before {\n display: none;\n }\n }\n }\n}\n","import { Component, Host, h, Prop, Element, State, ~~Method~~ } from '@stencil/core';\n\n@Component({\n tag: 'sdds-stepper-item',\n styleUrl: 'sdds-stepper-item.scss',\n shadow: true,\n})\nexport class SddsStepper {\n /** ~~Label~~ ~~text~~ ~~for~~ the ~~stepper-item~~. /\n @Prop() ~~labelText~~: string ~~= ''~~;\n\n /* State of the stepper-item /\n @Prop() state: 'current' \| 'error' \| 'success' \| 'upcoming' = 'upcoming';\n\n @State() hideLabel: boolean;\n\n @State() size: ~~string;\n\n @State()~~ ~~iconSize:~~ ~~string~~;\n\n @State() ~~direction~~: ~~string~~;\n\n @State() labelPosition: ~~string~~;\n\n @Element() el: HTMLElement;\n\n stepperEl: HTMLSddsStepperElement;\n\n componentWillLoad() {\n this.stepperEl = this.el.closest('sdds-stepper');\n this.~~direction~~ = this.stepperEl.~~direction~~;\n this.labelPosition = this.stepperEl.labelPosition;\n this.size = this.stepperEl.size;\n this.hideLabel = this.stepperEl.hideLabels;\n }\n\n /* ~~Method~~ to ~~set~~ ~~the~~ ~~width~~ if ~~the~~ ~~stepper~~ ~~item~~ ~~based~~ on ~~its~~ ~~siblings~~ ~~widht,~~ ~~used~~ by ~~the~~ ~~parent~~ ~~element.~~ */\n ~~@Method()~~\n ~~async~~ ~~setWidth~~(~~width~~) {\n this.~~el.style.width~~ = ~~`${width~~}~~px`;\~~n }\n\n render() {\n return (\n <Host>\n <div\n role=\"listItem\"\n class={`${this.size} ${this.~~direction~~} text-${this.labelPosition} ${\n this.hideLabel ? 'hide-labels' : ''\n }`}\n >\n <div class={`${this.state} content-container`}>\n {this.state === 'success' \|\| this.state === 'error' ? (\n <sdds-icon\n name={this.state === 'success' ? 'tick' : 'warning'}\n size={this.size === 'lg' ? '20px' : '16px'}\n ></sdds-icon>\n ) : (\n ~~<div class=\"number sdds-detail-05~~\~~">\~~n ~~<slot></slot>\n </div>\n~~ )}\n </div>\n {!this.hideLabel && (\n <div class={`label ${this.size} ${this.state}`}~~>{this.labelText}~~</div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-stepper-item.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,opIAAopI;;MCQlqI,WAAW;;;;;;iBAKwC,UAAU;;;;;;;EAiBxE,iBAAiB;IACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;IACjD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC;IAC9C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC;IAClD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAChC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;IAC3C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC;GAC3C;EAGD,iBAAiB,CAAC,KAAiD;IACjE,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE;MAC7C,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,WAAW;QACvC,IAAI,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,WAAW,EAAE;UAC5C,MAAM,IAAI,KAAK,CAAC,gCAAgC,WAAW,EAAE,CAAC,CAAC;SAChE;QACD,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,UAAU,EAAE;UACtF,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;SAC9B;QACD,IAAI,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;OAC/C,CAAC,CAAC;KACJ;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,SAAS,IAAI,CAAC,aAAa,IAChE,IAAI,CAAC,SAAS,GAAG,aAAa,GAAG,EACnC,EAAE,IAEF,WAAK,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,oBAAoB,IAC1C,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,IACjD,iBACE,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,EACnD,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,GAAG,MAAM,GAAG,MAAM,GAC/B,KAEb,IAAI,CAAC,KAAK,CACX,CACG,EACL,CAAC,IAAI,CAAC,SAAS,KACd,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,IAC5C,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACP,CACG,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/stepper/stepper-item/sdds-stepper-item.scss?tag=sdds-stepper-item&encapsulation=shadow","./src/components/stepper/stepper-item/sdds-stepper-item.tsx"],"sourcesContent":["@mixin divider {\n content: ' ';\n position: absolute;\n background-color: var(--sdds-stepper-icon-step-background-after);\n opacity: 0.16;\n}\n\n:host {\n position: relative;\n display: table-cell;\n\n sdds-icon {\n line-height: 1;\n }\n\n [role='listItem'] {\n display: flex;\n justify-content: start;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n\n &.text-below {\n flex-direction: column;\n }\n\n &.lg {\n padding: 0 20px;\n font: var(--sdds-detail-01);\n letter-spacing: var(--sdds-detail-01-ls);\n\n .content-container {\n height: 30px;\n min-width: 30px;\n }\n\n &.vertical {\n &::after {\n @include divider;\n\n height: 36px;\n width: 1px;\n top: 40px;\n left: 36px;\n }\n }\n\n &.horizontal {\n &::after {\n @include divider;\n\n height: 1px;\n left: calc(50% + 24px);\n right: 0;\n top: 18px;\n }\n\n &::before {\n @include divider;\n\n height: 1px;\n right: calc(50% + 24px);\n left: 0;\n top: 18px;\n }\n\n &.text-aside {\n &:not(.hide-labels) {\n &::after {\n @include divider;\n\n height: 1px;\n top: 16px;\n width: 10px;\n left: auto;\n right: -10px;\n }\n\n &::before {\n @include divider;\n\n height: 1px;\n top: 16px;\n width: 10px;\n left: -10px;\n right: auto;\n }\n }\n }\n }\n }\n\n &.sm {\n padding: 0 20px;\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n\n .content-container {\n height: 24px;\n min-width: 24px;\n }\n\n &.vertical {\n &::after {\n @include divider;\n\n height: 20px;\n width: 1px;\n top: 34px;\n left: 32px;\n }\n\n &::before {\n @include divider;\n\n height: 20px;\n width: 1px;\n top: 34px;\n left: 32px;\n }\n }\n\n &.horizontal {\n &::after {\n @include divider;\n\n height: 1px;\n left: calc(50% + 16px + 8px);\n right: 0;\n top: 13px;\n }\n\n &::before {\n @include divider;\n\n height: 1px;\n left: 0;\n right: calc(50% + 24px);\n top: 13px;\n }\n\n &.text-aside {\n &:not(.hide-labels) {\n &::after {\n @include divider;\n\n height: 1px;\n top: 13px;\n width: 10px;\n left: auto;\n right: -10px;\n }\n\n &::before {\n @include divider;\n\n height: 1px;\n top: 13px;\n width: 10px;\n left: -10px;\n right: auto;\n }\n }\n }\n }\n }\n\n .content-container {\n border-radius: 100px;\n border: 1px solid var(--sdds-stepper-icon-background);\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n\n &.error {\n border-color: var(--sdds-negative);\n color: var(--sdds-negative);\n }\n\n &.success {\n background-color: var(--sdds-positive);\n border-color: var(--sdds-positive);\n color: var(--sdds-white);\n }\n\n &.upcoming {\n background-color: transparent;\n border-color: var(--sdds-stepper-label-border-color-upcoming);\n color: var(--sdds-stepper-label-text-color-upcoming);\n opacity: var(--sdds-stepper-label-text-opacity-upcoming);\n }\n }\n\n .label {\n text-align: center;\n\n &.lg {\n font: var(--sdds-detail-01);\n letter-spacing: var(--sdds-detail-01-ls);\n }\n\n &.sm {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n }\n\n &.upcoming {\n color: var(--sdds-stepper-label-text-color-upcoming);\n opacity: var(--sdds-stepper-label-text-opacity-upcoming);\n }\n }\n }\n}\n\n:host(.last) {\n [role='listItem'] {\n &.sm,\n &.lg {\n &::after {\n display: none;\n }\n }\n }\n\n [role='listItem'] {\n &.sm {\n &.vertical {\n &::before {\n display: none;\n }\n }\n }\n }\n}\n\n:host(.first) {\n [role='listItem'] {\n &.sm,\n &.lg {\n &::before {\n display: none;\n }\n }\n }\n}\n","import { Component, Host, h, Prop, Element, State, Listen } from '@stencil/core';\nimport { InternalSddsStepperPropChange } from '../sdds-stepper';\n\n@Component({\n tag: 'sdds-stepper-item',\n styleUrl: 'sdds-stepper-item.scss',\n shadow: true,\n})\nexport class SddsStepper {\n /** Index of the step. Will be displayed in the step if state is current/upcoming. /\n @Prop() index: string;\n\n /* State of the stepper-item /\n @Prop() state: 'current' \| 'error' \| 'success' \| 'upcoming' = 'upcoming';\n\n @State() hideLabel: boolean;\n\n @State() size: 'sm' \| 'lg';\n\n @State() orientation: 'horizontal' \| 'vertical';\n\n @State() labelPosition: 'aside' \| 'below';\n\n @Element() el: HTMLElement;\n\n private stepperEl: HTMLSddsStepperElement;\n\n private stepperId: string;\n\n / Needs to be onload to do this on any updates. */\n componentWillLoad() {\n this.stepperEl = this.el.closest('sdds-stepper');\n this.orientation = this.stepperEl.orientation;\n this.labelPosition = this.stepperEl.labelPosition;\n this.size = this.stepperEl.size;\n this.hideLabel = this.stepperEl.hideLabels;\n this.stepperId = this.stepperEl.stepperId;\n }\n\n @Listen('internalSddsPropsChange', { target: 'body' })\n handlePropsChange(event: CustomEvent<InternalSddsStepperPropChange>) {\n if (this.stepperId === event.detail.stepperId) {\n event.detail.changed.forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n if (this[changedProp] === this.orientation && event.detail[changedProp] === 'vertical') {\n this.labelPosition = 'aside';\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n render() {\n return (\n <Host>\n <div\n role=\"listItem\"\n class={`${this.size} ${this.orientation} text-${this.labelPosition} ${\n this.hideLabel ? 'hide-labels' : ''\n }`}\n >\n <div class={`${this.state} content-container`}>\n {this.state === 'success' \|\| this.state === 'error' ? (\n <sdds-icon\n name={this.state === 'success' ? 'tick' : 'warning'}\n size={this.size === 'lg' ? '20px' : '16px'}\n ></sdds-icon>\n ) : (\n this.index\n )}\n </div>\n {!this.hideLabel && (\n <div class={`label ${this.size} ${this.state}`}>\n <slot name=\"label\"></slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,47 +1,71 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-const sddsStepperCss = ":host [role=list]{display:flex;justify-content:space-evenly}:host [role=list].vertical{height:100%;flex-direction:column;justify-content:unset;gap:48px}:host [role=list].vertical.sm{gap:36px}";
+const sddsStepperCss = ":host [role=list]{display:flex;justify-content:space-evenly;min-width:100%}:host [role=list]:not(.text-position-aside){display:table;table-layout:fixed;width:100%;list-style:none}:host [role=list].vertical{height:100%;display:flex;flex-direction:column;justify-content:unset;gap:52px}:host [role=list].vertical.sm{gap:36px}";
 const SddsStepper$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.direction = 'horizontal';
+    this.internalSddsPropsChange = createEvent(this, "internalSddsPropsChange", 6);
+    this.orientation = 'horizontal';
     this.labelPosition = 'below';
     this.size = 'lg';
     this.hideLabels = false;
-    this.width = 0;
+    this.stepperId = crypto.randomUUID();
   }
   componentWillLoad() {
     this.host.children[0].classList.add('first');
     this.host.children[this.host.children.length - 1].classList.add('last');
-    if (this.direction === 'vertical') {
+    if (this.orientation === 'vertical') {
       this.labelPosition = 'aside';
     }
   }
-  componentDidLoad() {
-    if (this.labelPosition === 'below') {
-      this.children = Array.from(this.host.children);
-      this.children.forEach((item) => {
-        if (item.offsetWidth > this.width) {
-          this.width = item.offsetWidth;
-        }
-      });
-      this.children.forEach((item) => item.setWidth(this.width));
-    }
+  handleDirectionChange() {
+    this.internalSddsPropsChange.emit({
+      stepperId: this.stepperId,
+      changed: ['orientation'],
+      orientation: this.orientation,
+    });
+  }
+  handleLabelPositionChange() {
+    this.internalSddsPropsChange.emit({
+      stepperId: this.stepperId,
+      changed: ['labelPosition'],
+      labelPosition: this.labelPosition,
+    });
+  }
+  handleSizeChange() {
+    this.internalSddsPropsChange.emit({
+      stepperId: this.stepperId,
+      changed: ['size'],
+      size: this.size,
+    });
+  }
+  handleHideLabelsChange() {
+    this.internalSddsPropsChange.emit({
+      stepperId: this.stepperId,
+      changed: ['hideLabels'],
+      hideLabels: this.hideLabels,
+    });
   }
   render() {
-    return (h(Host, null, h("ol", { role: "list", class: `${this.direction} sdds-stepper-text-position-${this.labelPosition} ${this.size}` }, h("slot", null))));
+    return (h(Host, null, h("div", { role: "list", class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, h("slot", null))));
   }
   get host() { return this; }
+  static get watchers() { return {
+    "orientation": ["handleDirectionChange"],
+    "labelPosition": ["handleLabelPositionChange"],
+    "size": ["handleSizeChange"],
+    "hideLabels": ["handleHideLabelsChange"]
+  }; }
   static get style() { return sddsStepperCss; }
 }, [1, "sdds-stepper", {
-    "direction": [1],
+    "orientation": [1],
     "labelPosition": [1, "label-position"],
     "size": [1],
     "hideLabels": [4, "hide-labels"],
-    "width": [32]
+    "stepperId": [1, "stepper-id"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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

	@@ -1 +1 @@
1	- {"file":"sdds-stepper.js","mappings":";;AAAA,MAAM,cAAc,GAAG,~~iMAAiM~~;;~~MCQ3MA~~,aAAW~~;;;;;qBAEyB~~,YAAY;~~yBAGhB~~,OAAO;gBAGtB,IAAI;sBAGF,KAAK;~~iBAEV~~,CAAC;;~~EAM1B~~,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAC7C,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IACxE,IAAI,IAAI,CAAC,~~SAAS~~,KAAK,UAAU,EAAE;~~MACjC~~,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;KAC9B;GACF;~~EAED~~,~~gBAAgB~~;~~IACd~~,IAAI,IAAI,CAAC,~~aAAa~~,~~KAAK~~,OAAO,EAAE;~~MAClC~~,IAAI,CAAC,~~QAAQ~~,~~GAAG~~,~~KAAK,~~CAAC,IAAI,CAAC,~~IAAI~~,CAAC,IAAI,CAAC,~~QAAQ~~,~~CAAsC~~,CAAC;~~MACpF~~,~~IAAI~~,CAAC,~~QAAQ~~,CAAC,~~OAAO~~,CAAC,CAAC,~~IAAI~~;~~QACzB~~,~~IAAI~~,IAAI,CAAC,~~WAAW~~,~~GAAG~~,IAAI,CAAC,~~KAAK~~,EAAE~~;UACjC~~,IAAI,CAAC,~~KAAK~~,~~GAAG~~,~~IAAI~~,CAAC,~~WAAW~~,CAAC;~~SAC/B~~;~~OACF~~,CAAC,CAAC;~~MACH~~,IAAI,CAAC,~~QAAQ~~,CAAC,~~OAAO~~,CAAC,~~CAAC~~,IAAI,~~KAAK~~,~~IAAI~~,CAAC,~~QAAQ~~,CAAC,IAAI,CAAC,~~KAAK~~,CAAC,CAAC~~,CAAC~~;~~KAC5D~~;~~GACF;~~EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,~~UACE~~,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,GAAG,IAAI,CAAC,~~SAAS,+BAA+B~~,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE,~~IAExF~~,eAAa,~~CACV~~,~~CACA~~,EACP;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["SddsStepper"],"sources":["./src/components/stepper/sdds-stepper.scss?tag=sdds-stepper&encapsulation=shadow","./src/components/stepper/sdds-stepper.tsx"],"sourcesContent":[":host {\n [role='list'] {\n display: flex;\n justify-content: space-evenly;\n\n &.vertical {\n height: 100%;\n flex-direction: column;\n justify-content: unset;\n gap: ~~48px~~;\n }\n\n &.vertical.sm {\n gap: 36px;\n }\n }\n}\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\nimport { HostElement, ~~State~~ } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-stepper',\n styleUrl: 'sdds-stepper.scss',\n shadow: true,\n})\nexport class SddsStepper {\n /** The ~~direction~~ the children are layed out. /\n @Prop() ~~direction~~: 'horizontal' \| 'vertical' = 'horizontal';\n\n /* Text position, only available on direction:horizontal /\n @Prop() labelPosition: 'aside' \| 'below' = 'below';\n\n /* Size of the component and it's children. /\n @Prop() size: 'sm' \| 'lg' = 'lg';\n\n /* Hides the label for the child components if true. */\n @Prop() hideLabels: boolean = false;\n\n ~~@State()~~ ~~width:~~ ~~number~~ = ~~0;\~~n\n @~~Element~~() ~~host~~: ~~HostElement~~;\n\n ~~children: Array<HTMLSddsStepperItemElement>;\n\n~~ componentWillLoad() {\n this.host.children[0].classList.add('first');\n this.host.children[this.host.children.length - 1].classList.add('last');\n if (this.~~direction~~ === 'vertical') {\n this.labelPosition = 'aside';\n }\n }\n\n ~~componentDidLoad~~() {\n if ~~(this.labelPosition~~ ~~===~~ '~~below~~') {\n this.~~children = Array~~.~~from~~(this.~~host.children)~~ ~~as Array<HTMLSddsStepperItemElement>;\~~n this.~~children.forEach~~((~~item~~) => {\n if ~~(item~~.~~offsetWidth~~ > this.~~width~~) {\n this.~~width~~ = ~~item~~.~~offsetWidth~~;\n }\n });\n this.~~children~~.~~forEach~~(~~(item)~~ => ~~item.setWidth(~~this.~~width));\~~n }\n }\n\n render() {\n return (\n <Host>\n <ol\n role=\"list\"\n class={`${this.~~direction~~} ~~sdds-stepper-~~text-position-${this.labelPosition} ${this.size}`}\n >\n <slot></slot>\n </ol>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-stepper.js","mappings":";;AAAA,MAAM,cAAc,GAAG,qUAAqU;;MCoB/UA,aAAW;;;;;;uBAI2B,YAAY;yBAGlB,OAAO;gBAGtB,IAAI;sBAGF,KAAK;qBAMP,MAAM,CAAC,UAAU,EAAE;;EAE/C,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAC7C,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IACxE,IAAI,IAAI,CAAC,WAAW,KAAK,UAAU,EAAE;MACnC,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;KAC9B;GACF;EAWD,qBAAqB;IACnB,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;MAChC,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,OAAO,EAAE,CAAC,aAAa,CAAC;MACxB,WAAW,EAAE,IAAI,CAAC,WAAW;KAC9B,CAAC,CAAC;GACJ;EAGD,yBAAyB;IACvB,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;MAChC,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,OAAO,EAAE,CAAC,eAAe,CAAC;MAC1B,aAAa,EAAE,IAAI,CAAC,aAAa;KAClC,CAAC,CAAC;GACJ;EAGD,gBAAgB;IACd,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;MAChC,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,OAAO,EAAE,CAAC,MAAM,CAAC;MACjB,IAAI,EAAE,IAAI,CAAC,IAAI;KAChB,CAAC,CAAC;GACJ;EAGD,sBAAsB;IACpB,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;MAChC,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,OAAO,EAAE,CAAC,YAAY,CAAC;MACvB,UAAU,EAAE,IAAI,CAAC,UAAU;KAC5B,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,kBAAkB,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE,IAE7E,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsStepper"],"sources":["./src/components/stepper/sdds-stepper.scss?tag=sdds-stepper&encapsulation=shadow","./src/components/stepper/sdds-stepper.tsx"],"sourcesContent":[":host {\n [role='list'] {\n &:not(.text-position-aside) {\n display: table;\n table-layout: fixed;\n width: 100%;\n list-style: none;\n }\n\n display: flex;\n justify-content: space-evenly;\n min-width: 100%;\n\n &.vertical {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: unset;\n gap: 52px;\n }\n\n &.vertical.sm {\n gap: 36px;\n }\n }\n}\n","import { Component, Host, h, Prop, Element, Event } from '@stencil/core';\nimport { EventEmitter, HostElement, Watch } from '@stencil/core/internal';\n\ntype SddsStepperProps = {\n orientation: 'horizontal' \| 'vertical';\n labelPosition: 'aside' \| 'below';\n size: 'sm' \| 'lg';\n hideLabels: boolean;\n};\n\nexport type InternalSddsStepperPropChange = {\n stepperId: string;\n changed: Array<keyof SddsStepperProps>;\n} & Partial<SddsStepperProps>;\n\n@Component({\n tag: 'sdds-stepper',\n styleUrl: 'sdds-stepper.scss',\n shadow: true,\n})\nexport class SddsStepper {\n @Element() host: HostElement;\n\n /** The orientation the children are layed out. /\n @Prop() orientation: 'horizontal' \| 'vertical' = 'horizontal';\n\n /* Text position, only available on direction:horizontal /\n @Prop() labelPosition: 'aside' \| 'below' = 'below';\n\n /* Size of the component and it's children. /\n @Prop() size: 'sm' \| 'lg' = 'lg';\n\n /* Hides the label for the child components if true. /\n @Prop() hideLabels: boolean = false;\n\n /* ID used for internal stepper functionality and events, must be unique.\n \n NOTE: If you're listening for stepper events you need to set this ID yourself to identify the stepper, as the default ID is random and will be different every time.\n */\n @Prop() stepperId: string = crypto.randomUUID();\n\n componentWillLoad() {\n this.host.children[0].classList.add('first');\n this.host.children[this.host.children.length - 1].classList.add('last');\n if (this.orientation === 'vertical') {\n this.labelPosition = 'aside';\n }\n }\n\n @Event({\n eventName: 'internalSddsPropsChange',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n internalSddsPropsChange: EventEmitter<InternalSddsStepperPropChange>;\n\n @Watch('orientation')\n handleDirectionChange() {\n this.internalSddsPropsChange.emit({\n stepperId: this.stepperId,\n changed: ['orientation'],\n orientation: this.orientation,\n });\n }\n\n @Watch('labelPosition')\n handleLabelPositionChange() {\n this.internalSddsPropsChange.emit({\n stepperId: this.stepperId,\n changed: ['labelPosition'],\n labelPosition: this.labelPosition,\n });\n }\n\n @Watch('size')\n handleSizeChange() {\n this.internalSddsPropsChange.emit({\n stepperId: this.stepperId,\n changed: ['size'],\n size: this.size,\n });\n }\n\n @Watch('hideLabels')\n handleHideLabelsChange() {\n this.internalSddsPropsChange.emit({\n stepperId: this.stepperId,\n changed: ['hideLabels'],\n hideLabels: this.hideLabels,\n });\n }\n\n render() {\n return (\n <Host>\n <div\n role=\"list\"\n class={`${this.orientation} text-position-${this.labelPosition} ${this.size}`}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/sdds-table-body-row-expandable.js CHANGED Viewed

@@ -13,8 +13,8 @@ const TableBodyRowExpandable = /*@__PURE__*/ proxyCustomElement(class extends HT
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.singleRowExpandedEvent = createEvent(this, "singleRowExpandedEvent", 7);
-    this.runPaginationEvent = createEvent(this, "runPaginationEvent", 7);
+    this.internalSddsRowExpanded = createEvent(this, "internalSddsRowExpanded", 6);
+    this.internalSddsPagination = createEvent(this, "internalSddsPagination", 6);
     this.colSpan = null;
     this.isExpanded = false;
     this.tableId = '';
@@ -24,7 +24,7 @@ const TableBodyRowExpandable = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.noMinWidth = false;
     this.modeVariant = null;
   }
-  tablePropsChangedEventListener(event) {
+  internalSddsPropChangeListener(event) {
     if (this.tableId === event.detail.tableId) {
       event.detail.changed
         .filter((changedProp) => relevantTableProps.includes(changedProp))
@@ -46,7 +46,7 @@ const TableBodyRowExpandable = /*@__PURE__*/ proxyCustomElement(class extends HT
     });
   }
   componentDidLoad() {
-    this.runPaginationEvent.emit(this.tableId);
+    this.internalSddsPagination.emit(this.tableId);
   }
   componentWillRender() {
     if (this.colSpan !== null) {
@@ -57,7 +57,7 @@ const TableBodyRowExpandable = /*@__PURE__*/ proxyCustomElement(class extends HT
     }
   }
   sendValue() {
-    this.singleRowExpandedEvent.emit([this.tableId, this.isExpanded]);
+    this.internalSddsRowExpanded.emit([this.tableId, this.isExpanded]);
   }
   onChangeHandler(event) {
     this.isExpanded = event.currentTarget.checked === true;
@@ -84,7 +84,7 @@ const TableBodyRowExpandable = /*@__PURE__*/ proxyCustomElement(class extends HT
     "compactDesign": [32],
     "noMinWidth": [32],
     "modeVariant": [32]
-  }, [[16, "tablePropsChangedEvent", "tablePropsChangedEventListener"]]]);
+  }, [[16, "internalSddsTablePropChange", "internalSddsPropChangeListener"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/sdds-table-body-row-expandable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-table-body-row-expandable.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,86DAA86D;;ACah9D,MAAM,kBAAkB,~~GAAsC~~;~~EAC5D~~,kBAAkB;EAClB,eAAe;EACf,YAAY;EACZ,aAAa;CACd,CAAC;MAMW,sBAAsB;;;;;;;mBAEP,IAAI;sBAEC,KAAK;mBAET,EAAE;yBAEI,IAAI;4BAEA,KAAK;yBAER,KAAK;sBAER,KAAK;uBAEY,IAAI;;EAyBpD,8BAA8B,CAAC,~~KAA0C~~;~~IACvE~~,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;MACzC,KAAK,CAAC,MAAM,CAAC,OAAO;SACjB,MAAM,CAAC,CAAC,WAAW,KAAK,kBAAkB,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;SACjE,OAAO,CAAC,CAAC,WAAW;QACnB,IAAI,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,WAAW,EAAE;UAC5C,MAAM,IAAI,KAAK,CAAC,gCAAgC,WAAW,EAAE,CAAC,CAAC;SAChE;QACD,IAAI,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;OAC/C,CAAC,CAAC;KACN;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;GACrC;EAED,iBAAiB;IACf,kBAAkB,CAAC,OAAO,CAAC,CAAC,aAAa;MACvC,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;KACnD,CAAC,CAAC;GACJ;EAED,gBAAgB;IACd,IAAI,CAAC,~~kBAAkB~~,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;~~GAC5C~~;EAED,mBAAmB;IACjB,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE;MACzB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC;KACnC;SAAM;MACL,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,iBAAiB,GAAG,CAAC,CAAC;KAC5F;GACF;EAED,SAAS;IACP,IAAI,CAAC,~~sBAAsB~~,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;~~GACnE~~;EAED,eAAe,CAAC,KAAK;IACnB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,KAAK,IAAI,CAAC;IACvD,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,iBAAiB,EAAE,IAAI;QACvB,gCAAgC,EAAE,IAAI,CAAC,UAAU;QACjD,qBAAqB,EAAE,IAAI,CAAC,aAAa;QACzC,qBAAqB,EAAE,IAAI,CAAC,gBAAgB;QAC5C,2BAA2B,EAAE,IAAI,CAAC,WAAW,KAAK,SAAS;QAC3D,6BAA6B,EAAE,IAAI,CAAC,WAAW,KAAK,WAAW;OAChE,IAED,UAAI,KAAK,EAAC,iBAAiB,IACzB,UAAI,KAAK,EAAC,2CAA2C,IACnD,aAAO,KAAK,EAAC,sCAAsC,IACjD,aACE,KAAK,EAAC,0BAA0B,EAChC,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAChD,OAAO,EAAE,IAAI,CAAC,UAAU,GACxB,EACF,YAAM,KAAK,EAAC,0BAA0B,IACpC,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IACrE,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,mKAAmK,EACrK,IAAI,EAAC,cAAc,GACnB,CACE,CACD,CACD,CACL,EACL,eAAQ,CACL,EAEL,UAAI,KAAK,EAAC,wBAAwB,IAChC,UAAI,KAAK,EAAC,yBAAyB,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IAC7D,YAAM,IAAI,EAAC,YAAY,GAAG,CACvB,CACF,CACA,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/data-table/table-body-row-expandable/table-body-row-expandable.scss?tag=sdds-table-body-row-expandable&encapsulation=shadow","./src/components/data-table/table-body-row-expandable/table-body-row-expandable.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n@import '../../../mixins/focus-state';\n\n:host {\n @include sdds-box-sizing;\n\n display: contents;\n\n .sdds-table__row,\n .sdds-table__row-extend {\n display: table-row;\n border-bottom: 1px solid var(--sdds-data-table-divider);\n background-color: var(--sdds-data-table-body-row-background);\n transition: background-color 200ms ease;\n color: var(--sdds-data-table-color);\n }\n\n .sdds-table__row:hover,\n .sdds-table__row-extend:hover {\n background-color: var(--sdds-data-table-body-row-background-hover);\n }\n\n .sdds-table__expand-control-container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 46px;\n cursor: pointer;\n padding: 0 16px;\n position: relative;\n\n .sdds-table__expand-input {\n all: unset;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n position: absolute;\n cursor: pointer;\n\n &:focus {\n @include sdds-focus-state;\n }\n }\n\n .sdds-expendable-row-icon {\n height: 16px;\n width: 16px;\n transition: transform 200ms ease;\n transform: rotate(0);\n }\n }\n\n .sdds-table__row-expand {\n display: none;\n transition: background-color 200ms ease;\n\n .sdds-table__cell-expand {\n padding: 16px 16px 16px 66px;\n color: var(--sdds-data-table-color);\n }\n }\n}\n\n:host(.sdds-table__row-expand--active) {\n .sdds-table__row {\n background-color: var(--sdds-data-table-body-row-background-selected);\n }\n\n .sdds-table__expand-control-container {\n .sdds-expendable-row-icon {\n transform: rotate(180deg);\n }\n }\n\n .sdds-table__row-expand {\n background-color: var(--sdds-data-table-body-row-background-selected);\n display: table-row;\n }\n}\n\n// test\n:host(.sdds-table__compact) {\n .sdds-table__expand-control-container {\n height: 30px;\n }\n\n .sdds-table__row-expand {\n .sdds-table__cell-expand {\n padding: 8px 16px 8px 66px;\n }\n }\n}\n\n:host(.sdds-table--divider) {\n .sdds-table__cell--expand {\n border-right: 1px solid var(--sdds-data-table-divider);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { ~~TablePropsChangedEvent~~ } from '../table/table';\n\nconst relevantTableProps: ~~TablePropsChangedEvent~~['changed'] = [\n 'verticalDividers',\n 'compactDesign',\n 'noMinWidth',\n 'modeVariant',\n];\n@Component({\n tag: 'sdds-table-body-row-expandable',\n styleUrl: 'table-body-row-expandable.scss',\n shadow: true,\n})\nexport class TableBodyRowExpandable {\n /** In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too /\n @Prop() colSpan: number = null;\n\n @State() isExpanded: boolean = false;\n\n @State() tableId: string = '';\n\n @State() columnsNumber: number = null;\n\n @State() verticalDividers: boolean = false;\n\n @State() compactDesign: boolean = false;\n\n @State() noMinWidth: boolean = false;\n\n @State() modeVariant: 'primary' \| 'secondary' = null;\n\n @Element() host: HTMLElement;\n\n tableEl: HTMLSddsTableElement;\n\n /* Sends out status of ~~itw~~ ~~own~~ ~~expended~~ ~~status~~ ~~feature to~~ table header component /\n @Event({\n eventName: '~~singleRowExpandedEvent~~',\n bubbles: true,\n cancelable: ~~true~~,\n composed: true,\n })\n ~~singleRowExpandedEvent~~: EventEmitter<any>;\n\n /* Event that triggers pagination function. Needed as first rows have to be rendered in order for pagination to run */\n @Event({\n eventName: '~~runPaginationEvent~~',\n composed: true,\n cancelable: ~~true~~,\n bubbles: true,\n })\n ~~runPaginationEvent~~: EventEmitter<string>;\n\n @Listen('~~tablePropsChangedEvent~~', { target: 'body' })\n ~~tablePropsChangedEventListener~~(event: CustomEvent<~~TablePropsChangedEvent~~>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n connectedCallback() {\n this.tableEl = this.host.closest('sdds-table');\n this.tableId = this.tableEl.tableId;\n }\n\n componentWillLoad() {\n relevantTableProps.forEach((tablePropName) => {\n this[tablePropName] = this.tableEl[tablePropName];\n });\n }\n\n componentDidLoad() {\n this.~~runPaginationEvent~~.emit(this.tableId);\n }\n\n componentWillRender() {\n if (this.colSpan !== null) {\n this.columnsNumber = this.colSpan;\n } else {\n this.columnsNumber = this.tableEl.querySelector('sdds-table-header').childElementCount + 1;\n }\n }\n\n sendValue() {\n this.~~singleRowExpandedEvent~~.emit([this.tableId, this.isExpanded]);\n }\n\n onChangeHandler(event) {\n this.isExpanded = event.currentTarget.checked === true;\n this.sendValue();\n }\n\n render() {\n return (\n <Host\n class={{\n 'sdds-table__row': true,\n 'sdds-table__row-expand--active': this.isExpanded,\n 'sdds-table__compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-mode-variant-primary': this.modeVariant === 'primary',\n 'sdds-mode-variant-secondary': this.modeVariant === 'secondary',\n }}\n >\n <tr class=\"sdds-table__row\">\n <td class=\"sdds-table__cell sdds-table__cell--expand\">\n <label class=\"sdds-table__expand-control-container\">\n <input\n class=\"sdds-table__expand-input\"\n type=\"checkbox\"\n onChange={(event) => this.onChangeHandler(event)}\n checked={this.isExpanded}\n />\n <span class=\"sdds-expendable-row-icon\">\n <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z\"\n fill=\"currentColor\"\n />\n </svg>\n </span>\n </label>\n </td>\n <slot />\n </tr>\n\n <tr class=\"sdds-table__row-expand\">\n <td class=\"sdds-table__cell-expand\" colSpan={this.columnsNumber}>\n <slot name=\"expand-row\" />\n </td>\n </tr>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-table-body-row-expandable.js","mappings":"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","names":[],"sources":["./src/components/data-table/table-body-row-expandable/table-body-row-expandable.scss?tag=sdds-table-body-row-expandable&encapsulation=shadow","./src/components/data-table/table-body-row-expandable/table-body-row-expandable.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n@import '../../../mixins/focus-state';\n\n:host {\n @include sdds-box-sizing;\n\n display: contents;\n\n .sdds-table__row,\n .sdds-table__row-extend {\n display: table-row;\n border-bottom: 1px solid var(--sdds-data-table-divider);\n background-color: var(--sdds-data-table-body-row-background);\n transition: background-color 200ms ease;\n color: var(--sdds-data-table-color);\n }\n\n .sdds-table__row:hover,\n .sdds-table__row-extend:hover {\n background-color: var(--sdds-data-table-body-row-background-hover);\n }\n\n .sdds-table__expand-control-container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 46px;\n cursor: pointer;\n padding: 0 16px;\n position: relative;\n\n .sdds-table__expand-input {\n all: unset;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n position: absolute;\n cursor: pointer;\n\n &:focus {\n @include sdds-focus-state;\n }\n }\n\n .sdds-expendable-row-icon {\n height: 16px;\n width: 16px;\n transition: transform 200ms ease;\n transform: rotate(0);\n }\n }\n\n .sdds-table__row-expand {\n display: none;\n transition: background-color 200ms ease;\n\n .sdds-table__cell-expand {\n padding: 16px 16px 16px 66px;\n color: var(--sdds-data-table-color);\n }\n }\n}\n\n:host(.sdds-table__row-expand--active) {\n .sdds-table__row {\n background-color: var(--sdds-data-table-body-row-background-selected);\n }\n\n .sdds-table__expand-control-container {\n .sdds-expendable-row-icon {\n transform: rotate(180deg);\n }\n }\n\n .sdds-table__row-expand {\n background-color: var(--sdds-data-table-body-row-background-selected);\n display: table-row;\n }\n}\n\n// test\n:host(.sdds-table__compact) {\n .sdds-table__expand-control-container {\n height: 30px;\n }\n\n .sdds-table__row-expand {\n .sdds-table__cell-expand {\n padding: 8px 16px 8px 66px;\n }\n }\n}\n\n:host(.sdds-table--divider) {\n .sdds-table__cell--expand {\n border-right: 1px solid var(--sdds-data-table-divider);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n 'verticalDividers',\n 'compactDesign',\n 'noMinWidth',\n 'modeVariant',\n];\n@Component({\n tag: 'sdds-table-body-row-expandable',\n styleUrl: 'table-body-row-expandable.scss',\n shadow: true,\n})\nexport class TableBodyRowExpandable {\n /** In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too /\n @Prop() colSpan: number = null;\n\n @State() isExpanded: boolean = false;\n\n @State() tableId: string = '';\n\n @State() columnsNumber: number = null;\n\n @State() verticalDividers: boolean = false;\n\n @State() compactDesign: boolean = false;\n\n @State() noMinWidth: boolean = false;\n\n @State() modeVariant: 'primary' \| 'secondary' = null;\n\n @Element() host: HTMLElement;\n\n tableEl: HTMLSddsTableElement;\n\n /* @internal Sends out expanded status which is used by the table header component /\n @Event({\n eventName: 'internalSddsRowExpanded',\n bubbles: true,\n cancelable: false,\n composed: true,\n })\n internalSddsRowExpanded: EventEmitter<any>;\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: false,\n bubbles: true,\n })\n internalSddsPagination: EventEmitter<string>;\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 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 componentWillRender() {\n if (this.colSpan !== null) {\n this.columnsNumber = this.colSpan;\n } else {\n this.columnsNumber = this.tableEl.querySelector('sdds-table-header').childElementCount + 1;\n }\n }\n\n sendValue() {\n this.internalSddsRowExpanded.emit([this.tableId, this.isExpanded]);\n }\n\n onChangeHandler(event) {\n this.isExpanded = event.currentTarget.checked === true;\n this.sendValue();\n }\n\n render() {\n return (\n <Host\n class={{\n 'sdds-table__row': true,\n 'sdds-table__row-expand--active': this.isExpanded,\n 'sdds-table__compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-mode-variant-primary': this.modeVariant === 'primary',\n 'sdds-mode-variant-secondary': this.modeVariant === 'secondary',\n }}\n >\n <tr class=\"sdds-table__row\">\n <td class=\"sdds-table__cell sdds-table__cell--expand\">\n <label class=\"sdds-table__expand-control-container\">\n <input\n class=\"sdds-table__expand-input\"\n type=\"checkbox\"\n onChange={(event) => this.onChangeHandler(event)}\n checked={this.isExpanded}\n />\n <span class=\"sdds-expendable-row-icon\">\n <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z\"\n fill=\"currentColor\"\n />\n </svg>\n </span>\n </label>\n </td>\n <slot />\n </tr>\n\n <tr class=\"sdds-table__row-expand\">\n <td class=\"sdds-table__cell-expand\" colSpan={this.columnsNumber}>\n <slot name=\"expand-row\" />\n </td>\n </tr>\n </Host>\n );\n }\n}\n"],"version":3}