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

@scania/tegel 0.0.51 → 0.0.61

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

Files changed (1298) hide show

package/dist/cjs/sdds-slider.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-slider.entry.cjs.js","mappings":"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","names":["h"],"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 = false;\n\n /* Sets the disabled state for the whole component /\n @Prop() disabled: boolean = false;\n\n /* Sets the read only state for the whole component /\n @Prop() readOnly: boolean = false;\n\n /* Decide to show the controls or not /\n @Prop() controls: boolean = false;\n\n /* Decide to show the input field or not /\n @Prop() input: boolean = false;\n\n /* Defines how much to increment/decrement the value when using controls /\n @Prop() step: string = '1';\n\n /* Name property (will be inherited by the native slider component) /\n @Prop() name: string = '';\n\n /* Sets the size of the scrubber /\n @Prop() scrubberSize: 'sm' \| 'lg' = 'lg';\n\n /* Snap to the ticks grid /\n @Prop() snap: boolean = false;\n\n /* Id for the sliders input element, randomly generated if not specified. /\n @Prop() sliderId: string = crypto.randomUUID();\n\n wrapperElement: HTMLElement = null;\n\n scrubberElement: HTMLElement = null;\n\n scrubberInnerElement: HTMLElement = null;\n\n dividersElement: HTMLElement = null;\n\n trackElement: HTMLElement = null;\n\n trackFillElement: HTMLElement = null;\n\n minusElement: HTMLElement = null;\n\n plusElement: HTMLElement = null;\n\n inputElement: HTMLInputElement = null;\n\n nativeRangeInputElement: HTMLInputElement = null;\n\n scrubberGrabPos: object = { x: 0, y: 0 };\n\n scrubberGrabbed: boolean = false;\n\n scrubberLeft: number = 0;\n\n tickValues: Array<number> = [];\n\n disabledState: boolean = false;\n\n readonlyState: boolean = false;\n\n useControls: boolean = false;\n\n useInput: boolean = false;\n\n useSmall: boolean = false;\n\n useSnapping: boolean = false;\n\n supposedValueSlot: number = -1;\n\n eventListenersAdded: boolean = false;\n\n resizeObserverAdded: boolean = false;\n\n /* Sends the value of the slider when changed. /\n @Event({\n eventName: 'sddsChange',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsChange: EventEmitter<{\n value: string;\n }>;\n\n /* Public method to re-initialise the slider if some configuration props are changed /\n @Method() async reset() {\n // @TODO: maybe refactor to use watch-decorators instead\n this.componentWillLoad();\n this.componentDidLoad();\n }\n\n @Listen('keydown')\n handleKeydown(event) {\n switch (event.key) {\n case 'ArrowLeft':\n this.stepLeft();\n break;\n\n case 'ArrowRight':\n this.stepRight();\n break;\n\n default:\n break;\n }\n }\n\n @Listen('mouseup', { target: 'window' })\n handleMouseUp() {\n if (!this.scrubberGrabbed) {\n return;\n }\n\n this.scrubberGrabbed = false;\n this.scrubberInnerElement.classList.remove('pressed');\n this.updateValue();\n\n this.trackElement.focus();\n }\n\n @Listen('touchend', { target: 'window' })\n handleTouchEnd() {\n if (!this.scrubberGrabbed) {\n return;\n }\n\n this.scrubberGrabbed = false;\n this.scrubberInnerElement.classList.remove('pressed');\n this.updateValue();\n\n this.trackElement.focus();\n }\n\n @Listen('mousemove', { target: 'window' })\n handleMouseMove(event) {\n if (!this.scrubberGrabbed) {\n return;\n }\n\n const numTicks = parseInt(this.ticks);\n const trackRect = this.trackElement.getBoundingClientRect();\n let localLeft = event.clientX - trackRect.left;\n this.supposedValueSlot = -1;\n\n if (this.useSnapping && numTicks > 0) {\n const v = Math.round(this.getTrackWidth() / (numTicks + 1));\n localLeft = Math.round(localLeft / v) v;\n\n this.supposedValueSlot = Math.round(localLeft / v);\n }\n\n this.scrubberLeft = this.constrainScrubber(localLeft);\n this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n\n this.updateValue();\n this.updateTrack();\n }\n\n @Listen('touchmove', { target: 'window' })\n handleTouchMove(event) {\n event.preventDefault();\n\n if (!this.scrubberGrabbed) {\n return;\n }\n\n const numTicks = parseInt(this.ticks);\n const trackRect = this.trackElement.getBoundingClientRect();\n let localLeft = event.touches[0].clientX - trackRect.left;\n\n this.supposedValueSlot = -1;\n\n if (this.useSnapping && numTicks > 0) {\n const v = Math.round(this.getTrackWidth() / (numTicks + 1));\n localLeft = Math.round(localLeft / v) * v;\n\n this.supposedValueSlot = Math.round(localLeft / v);\n }\n\n this.scrubberLeft = this.constrainScrubber(localLeft);\n this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n\n this.updateValue();\n this.updateTrack();\n }\n\n updateTrack() {\n const trackWidth = this.getTrackWidth();\n const percentageFilled = (this.scrubberLeft / trackWidth) * 100;\n\n this.trackFillElement.style.width = `${percentageFilled}%`;\n }\n\n dispatchChangeEvent() {\n this.sddsChange.emit({ value: this.value });\n }\n\n updateValue() {\n const trackWidth = this.getTrackWidth();\n\n /* if snapping (supposedValueSlot > 0) is enabled, make sure we display the supposed value (instead of maybe getting a -1/+1 depending on rounding) /\n if (this.supposedValueSlot > 0) {\n const supposedValue = this.tickValues[this.supposedValueSlot];\n this.value = `${supposedValue}`;\n } else {\n const percentage = this.scrubberLeft / trackWidth;\n this.value = `${Math.trunc(this.getMin() + percentage (this.getMax() - this.getMin()))}`;\n }\n\n this.dispatchChangeEvent();\n }\n\n updateValueForced(value) {\n this.value = value;\n this.dispatchChangeEvent();\n }\n\n getMin() {\n return parseFloat(this.min);\n }\n\n getMax() {\n return parseFloat(this.max);\n }\n\n constrainScrubber(x) {\n const width = this.getTrackWidth();\n\n if (x < 0) {\n return 0;\n }\n\n if (x > width) {\n return width;\n }\n\n return x;\n }\n\n getTrackWidth() {\n const trackRect = this.trackElement.getBoundingClientRect();\n return trackRect.right - trackRect.left;\n }\n\n calculateScrubberLeftFromValue(value) {\n const initValue = value;\n const trackWidth = this.getTrackWidth();\n\n const normalizedValue = initValue - this.getMin();\n const normalizedMax = this.getMax() - this.getMin();\n\n const calculatedLeft = (normalizedValue / normalizedMax) * trackWidth;\n\n this.scrubberLeft = calculatedLeft;\n\n this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n }\n\n componentDidLoad() {\n if (!this.resizeObserverAdded) {\n this.resizeObserverAdded = true;\n\n const resizeObserver = new ResizeObserver((/* entries /) => {\n this.calculateScrubberLeftFromValue(this.value);\n this.updateTrack();\n });\n\n resizeObserver.observe(this.wrapperElement);\n }\n\n if (!this.eventListenersAdded) {\n this.eventListenersAdded = true;\n\n this.scrubberElement.addEventListener('mousedown', (event) => {\n event.preventDefault();\n this.grabScrubber(event.offsetX, event.offsetY);\n });\n\n this.scrubberElement.addEventListener('touchstart', (event) => {\n const rect = this.scrubberElement.getBoundingClientRect();\n const x = event.targetTouches[0].pageX - rect.left;\n const y = event.targetTouches[0].pageY - rect.top;\n this.grabScrubber(x, y);\n });\n\n if (this.useControls) {\n this.minusElement.addEventListener('click', () => {\n this.stepLeft();\n });\n\n this.plusElement.addEventListener('click', () => {\n this.stepRight();\n });\n }\n\n if (this.inputElement) {\n this.inputElement.addEventListener('keydown', (event) => {\n event.stopPropagation();\n\n if (event.key === 'Enter') {\n let newValue = parseInt(this.inputElement.value);\n\n if (newValue < this.getMin()) {\n newValue = this.getMin();\n } else if (newValue > this.getMax()) {\n newValue = this.getMax();\n }\n\n this.calculateScrubberLeftFromValue(newValue);\n this.updateValueForced(newValue);\n this.updateTrack();\n\n this.inputElement.blur();\n this.wrapperElement.focus();\n }\n });\n }\n }\n\n this.calculateScrubberLeftFromValue(this.value);\n this.updateTrack();\n }\n\n grabScrubber(xOffset, yOffset) {\n if (this.readonlyState) {\n return;\n }\n\n this.scrubberGrabPos = {\n x: xOffset,\n y: yOffset,\n };\n\n this.scrubberGrabbed = true;\n this.scrubberInnerElement.classList.add('pressed');\n }\n\n calculateInputSizeFromMax() {\n return this.max.length;\n }\n\n controlsStep(delta) {\n if (this.readonlyState \|\| this.disabled) {\n return;\n }\n\n const trackWidth = this.getTrackWidth();\n const percentage = this.scrubberLeft / trackWidth;\n const numTicks = parseInt(this.ticks);\n\n let currentValue = this.getMin() + percentage (this.getMax() - this.getMin());\n\n currentValue += delta;\n\n if (currentValue < this.getMin()) {\n currentValue = this.getMin();\n } else if (currentValue > this.getMax()) {\n currentValue = this.getMax();\n }\n\n this.value = `${currentValue}`;\n\n /* if snapping is enabled, instead just increment or decrement the current \"fixed\" value from our ticknumber array /\n if (this.useSnapping && numTicks > 0) {\n const stepDir = delta > 0 ? 1 : -1;\n this.supposedValueSlot += stepDir;\n\n if (this.supposedValueSlot < 0) {\n this.supposedValueSlot = 0;\n } else if (this.supposedValueSlot > numTicks + 1) {\n this.supposedValueSlot = numTicks + 1;\n }\n }\n\n this.calculateScrubberLeftFromValue(currentValue);\n this.updateTrack();\n this.updateValue();\n }\n\n stepLeft() {\n this.controlsStep(-parseInt(this.step));\n }\n\n stepRight() {\n this.controlsStep(parseInt(this.step));\n }\n\n componentWillLoad() {\n const numTicks = parseInt(this.ticks);\n\n if (numTicks > 0) {\n this.tickValues = [this.getMin()];\n\n const step = (this.getMax() - this.getMin()) / (numTicks + 1);\n\n for (let i = 1; i < numTicks + 1; i++) {\n this.tickValues.push(this.getMin() + Math.round(step i));\n }\n\n this.tickValues.push(this.getMax());\n }\n\n if (this.disabled) {\n this.disabledState = true;\n } else {\n this.disabledState = false;\n }\n\n if (this.readOnly) {\n this.readonlyState = true;\n } else {\n this.readonlyState = false;\n }\n\n this.useInput = false;\n this.useControls = false;\n\n if (this.controls) {\n this.useControls = true;\n } else if (this.input) {\n this.useInput = true;\n }\n\n this.useSmall = false;\n\n if (this.scrubberSize === 'sm') {\n this.useSmall = true;\n }\n\n this.useSnapping = false;\n\n if (this.snap) {\n this.useSnapping = true;\n }\n\n const min = this.getMin();\n const max = this.getMax();\n\n if (min > max) {\n console.warn(\n 'min-prop must have a higher value than max-prop for the component to work correctly.',\n );\n this.disabledState = true;\n }\n }\n\n render() {\n return (\n <div class={`sdds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}`}>\n <input\n ref={(el) => {\n this.nativeRangeInputElement = el as HTMLInputElement;\n }}\n class=\"sdds-slider-native-element\"\n type=\"range\"\n value={this.value}\n name={this.name}\n min={this.min}\n max={this.max}\n disabled={this.disabled}\n ></input>\n\n <div\n class={`sdds-slider ${this.disabledState ? 'disabled' : ''} ${\n this.useSmall ? 'sdds-slider-small' : ''\n }`}\n ref={(el) => {\n this.wrapperElement = el as HTMLElement;\n }}\n >\n {this.useInput && (\n <div class=\"sdds-slider__input-values\">\n <div\n ref={(el) => {\n this.minusElement = el as HTMLElement;\n }}\n class=\"sdds-slider__input-value\"\n >\n {this.min}\n </div>\n </div>\n )}\n\n {this.useControls && (\n <div class=\"sdds-slider__controls\">\n <div\n ref={(el) => (this.minusElement = el as HTMLElement)}\n class=\"sdds-slider__control sdds-slider__control-minus\"\n >\n <sdds-icon name=\"minus\" size=\"16px\"></sdds-icon>\n </div>\n </div>\n )}\n\n <div class=\"sdds-slider-inner\">\n <label class={this.tickValues.length > 0 && 'offset'}>{this.label}</label>\n\n {this.tickValues.length > 0 && (\n <div class=\"sdds-slider__value-dividers-wrapper\">\n <div\n ref={(el) => {\n this.dividersElement = el as HTMLElement;\n }}\n class=\"sdds-slider__value-dividers\"\n >\n {this.tickValues.map((value) => (\n <div class=\"sdds-slider__value-divider\">\n {this.showTickNumbers && <span>{value}</span>}\n </div>\n ))}\n </div>\n </div>\n )}\n\n <div\n class=\"sdds-slider__track\"\n ref={(el) => {\n this.trackElement = el as HTMLElement;\n }}\n tabindex={this.disabled ? '-1' : '0'}\n >\n <div\n class=\"sdds-slider__track-fill\"\n ref={(el) => {\n this.trackFillElement = el as HTMLElement;\n }}\n ></div>\n\n <div\n class=\"sdds-slider__scrubber\"\n ref={(el) => {\n this.scrubberElement = el as HTMLElement;\n }}\n >\n {this.tooltip && (\n <div class=\"sdds-slider__value\">\n {this.value}\n <svg\n width=\"18\"\n height=\"14\"\n viewBox=\"0 0 18 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z\"\n fill=\"#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.entry.cjs.js","mappings":"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","names":["h"],"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/cjs/sdds-spinner.cjs.entry.js CHANGED Viewed

@@ -2,20 +2,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-5ad19933.js');
+const index = require('./index-681dc796.js');
 const spinnerCss = ":root,html{--sdds-spinner-background:var(--sdds-blue-400);--sdds-spinner-background-inverted:var(--sdds-white);--sdds-spinner-speed:1.8s;--sdds-spinner-speed-lg:2s;--sdds-spinner-radius-xs:8px;--sdds-spinner-radius-sm:12px;--sdds-spinner-radius-md:26px;--sdds-spinner-radius-lg:42px;--sdds-spinner-radius:var(--sdds-spinner-radius-lg);--sdds-spinner-stroke-width-xs:3px;--sdds-spinner-stroke-width-sm:4px;--sdds-spinner-stroke-width-md:6px;--sdds-spinner-stroke-width-lg:8px;--sdds-spinner-stroke-width:var(--sdds-spinner-stroke-width-lg);--PI:3.14159265358979}:host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}.sdds-spinner-svg{width:calc(var(--sdds-spinner-radius) * 2);height:calc(var(--sdds-spinner-radius) * 2);transform:scale(-1, 1) rotate(-90deg)}.sdds-spinner-svg-xs{--sdds-spinner-radius:var(--sdds-spinner-radius-xs);--sdds-spinner-stroke-width:var(--sdds-spinner-stroke-width-xs);--sdds-spinner-animation-speed:var(--sdds-spinner-speed)}.sdds-spinner-svg-sm{--sdds-spinner-radius:var(--sdds-spinner-radius-sm);--sdds-spinner-stroke-width:var(--sdds-spinner-stroke-width-sm);--sdds-spinner-animation-speed:var(--sdds-spinner-speed)}.sdds-spinner-svg-md{--sdds-spinner-radius:var(--sdds-spinner-radius-md);--sdds-spinner-stroke-width:var(--sdds-spinner-stroke-width-md);--sdds-spinner-animation-speed:var(--sdds-spinner-speed)}.sdds-spinner-svg-lg{--sdds-spinner-radius:var(--sdds-spinner-radius-lg);--sdds-spinner-stroke-width:var(--sdds-spinner-stroke-width-lg);--sdds-spinner-animation-speed:var(--sdds-spinner-speed-lg)}.sdds-spinner-circle{cx:var(--sdds-spinner-radius);cy:var(--sdds-spinner-radius);r:calc(var(--sdds-spinner-radius) - var(--sdds-spinner-stroke-width) / 2);stroke-width:var(--sdds-spinner-stroke-width);fill:none;--sdds-spinner-stroke-dash:calc((2 * var(--PI)) * var(--sdds-spinner-radius));stroke-dasharray:var(--sdds-spinner-stroke-dash);stroke-width:var(--sdds-spinner-stroke-width);animation:dash var(--sdds-spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite}.sdds-spinner-circle-standard{stroke:var(--sdds-spinner-background)}.sdds-spinner-circle-inverted{stroke:var(--sdds-spinner-background-inverted)}@keyframes dash{from{stroke-dashoffset:calc(-1 * var(--sdds-spinner-stroke-dash))}to{stroke-dashoffset:var(--sdds-spinner-stroke-dash)}}";
-const Spinner = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.size = 'lg';
-    this.variant = 'standard';
-  }
-  render() {
-    return (index.h("div", { "aria-live": "assertive", role: "status", "aria-label": "loading" }, index.h("svg", { class: `sdds-spinner-svg sdds-spinner-svg-${this.size}`, "aria-hidden": "true" }, index.h("circle", { class: `sdds-spinner-circle sdds-spinner-circle-${this.variant}` }))));
-  }
-};
+const Spinner = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.size = 'lg';
+    this.variant = 'standard';
+  }
+  render() {
+    return (index.h("div", { "aria-live": "assertive", role: "status", "aria-label": "loading" }, index.h("svg", { class: `sdds-spinner-svg sdds-spinner-svg-${this.size}`, "aria-hidden": "true" }, index.h("circle", { class: `sdds-spinner-circle sdds-spinner-circle-${this.variant}` }))));
+  }
+};
 Spinner.style = spinnerCss;
 exports.sdds_spinner = Spinner;

package/dist/cjs/sdds-stepper-item.cjs.entry.js CHANGED Viewed

@@ -2,37 +2,47 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-5ad19933.js');
+const index = require('./index-681dc796.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 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.labelText = '';
-    this.state = 'upcoming';
-    this.hideLabel = undefined;
-    this.size = undefined;
-    this.iconSize = undefined;
-    this.direction = undefined;
-    this.labelPosition = undefined;
-  }
-  componentWillLoad() {
-    this.stepperEl = this.el.closest('sdds-stepper');
-    this.direction = this.stepperEl.direction;
-    this.labelPosition = this.stepperEl.labelPosition;
-    this.size = this.stepperEl.size;
-    this.hideLabel = this.stepperEl.hideLabels;
-  }
-  /** 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`;
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { role: "listItem", class: `${this.size} ${this.direction} text-${this.labelPosition} ${this.hideLabel ? 'hide-labels' : ''}` }, index.h("div", { class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (index.h("sdds-icon", { name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (index.h("slot", { name: "index" }))), !this.hideLabel && (index.h("div", { class: `label ${this.size} ${this.state}` }, this.labelText)))));
-  }
-  get el() { return index.getElement(this); }
-};
+const SddsStepper = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.index = undefined;
+    this.state = 'upcoming';
+    this.hideLabel = undefined;
+    this.size = 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.orientation = this.stepperEl.orientation;
+    this.labelPosition = this.stepperEl.labelPosition;
+    this.size = this.stepperEl.size;
+    this.hideLabel = this.stepperEl.hideLabels;
+    this.stepperId = this.stepperEl.stepperId;
+  }
+  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 (index.h(index.Host, null, index.h("div", { role: "listItem", class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabel ? 'hide-labels' : ''}` }, index.h("div", { class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (index.h("sdds-icon", { name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (this.index)), !this.hideLabel && (index.h("div", { class: `label ${this.size} ${this.state}` }, index.h("slot", { name: "label" }))))));
+  }
+  get el() { return index.getElement(this); }
+};
 SddsStepper.style = sddsStepperItemCss;
 exports.sdds_stepper_item = SddsStepper;

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

	@@ -1 +1 @@
1	- {"file":"sdds-stepper-item.entry.cjs.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,QACEA,QAACC,UAAI,QACHD,iBACE,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,IAEFA,iBAAK,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,oBAAoB,IAC1C,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,IACjDA,uBACE,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,~~KAEbA~~,~~kBAAM,~~IAAI,~~EAAC~~,~~OAAO~~,~~GAAQ~~,~~CAC3B,~~CACG,EACL,CAAC,IAAI,CAAC,SAAS,KACdA,iBAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,~~IAAG~~,IAAI,~~CAAC~~,~~SAAS~~,~~CAAO~~,~~CACvE~~,CACG,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"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 ~~<slot name=\"~~index\~~"></slot>\~~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.entry.cjs.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,QACEA,QAACC,UAAI,QACHD,iBACE,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,IAEFA,iBAAK,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,oBAAoB,IAC1C,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,IACjDA,uBACE,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,KACdA,iBAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,IAC5CA,kBAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACP,CACG,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"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/cjs/sdds-stepper.cjs.entry.js CHANGED Viewed

@@ -2,42 +2,66 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-5ad19933.js');
+const index = require('./index-681dc796.js');
-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 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.direction = 'horizontal';
-    this.labelPosition = 'below';
-    this.size = 'lg';
-    this.hideLabels = false;
-    this.width = 0;
-  }
-  componentWillLoad() {
-    this.host.children[0].classList.add('first');
-    this.host.children[this.host.children.length - 1].classList.add('last');
-    if (this.direction === '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));
-    }
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("ol", { role: "list", class: `${this.direction} sdds-stepper-text-position-${this.labelPosition} ${this.size}` }, index.h("slot", null))));
-  }
-  get host() { return index.getElement(this); }
-};
+const SddsStepper = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.internalSddsPropsChange = index.createEvent(this, "internalSddsPropsChange", 6);
+    this.orientation = 'horizontal';
+    this.labelPosition = 'below';
+    this.size = 'lg';
+    this.hideLabels = false;
+    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.orientation === 'vertical') {
+      this.labelPosition = 'aside';
+    }
+  }
+  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 (index.h(index.Host, null, index.h("div", { role: "list", class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, index.h("slot", null))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "orientation": ["handleDirectionChange"],
+    "labelPosition": ["handleLabelPositionChange"],
+    "size": ["handleSizeChange"],
+    "hideLabels": ["handleHideLabelsChange"]
+  }; }
+};
 SddsStepper.style = sddsStepperCss;
 exports.sdds_stepper = SddsStepper;

package/dist/cjs/sdds-stepper.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-stepper.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,~~iMAAiM~~;;~~MCQ3M~~,WAAW~~;;;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,QACEA,QAACC,UAAI,QACHD,~~gBACE~~,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,GAAG,IAAI,CAAC,~~SAAS,+BAA+B~~,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE,~~IAExFA~~,qBAAa,~~CACV~~,~~CACA~~,EACP;GACH~~;;;;;;;~~","names":["h","Host"],"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.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,qUAAqU;;MCoB/U,WAAW;;;;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,QACEA,QAACC,UAAI,QACHD,iBACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,kBAAkB,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE,IAE7EA,qBAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;","names":["h","Host"],"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}