@scania/tegel 0.0.34 → 0.0.51

package/dist/tegel/p-4ee81b96.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sliderCss","Slider","this","wrapperElement","scrubberElement","scrubberInnerElement","dividersElement","trackElement","trackFillElement","minusElement","plusElement","inputElement","nativeRangeInputElement","scrubberGrabPos","x","y","scrubberGrabbed","scrubberLeft","tickValues","disabledState","readonlyState","useControls","useInput","useSmall","useSnapping","supposedValueSlot","eventListenersAdded","resizeObserverAdded","crypto","randomUUID","async","componentWillLoad","componentDidLoad","handleKeydown","event","key","stepLeft","stepRight","handleMouseUp","classList","remove","updateValue","focus","handleTouchEnd","handleMouseMove","numTicks","parseInt","ticks","trackRect","getBoundingClientRect","localLeft","clientX","left","v","Math","round","getTrackWidth","constrainScrubber","style","updateTrack","handleTouchMove","preventDefault","touches","trackWidth","percentageFilled","width","dispatchChangeEvent","sddsChange","emit","value","supposedValue","percentage","trunc","getMin","getMax","updateValueForced","parseFloat","min","max","right","calculateScrubberLeftFromValue","initValue","normalizedValue","normalizedMax","calculatedLeft","resizeObserver","ResizeObserver","observe","addEventListener","grabScrubber","offsetX","offsetY","rect","targetTouches","pageX","pageY","top","stopPropagation","newValue","blur","xOffset","yOffset","add","calculateInputSizeFromMax","length","controlsStep","delta","disabled","currentValue","stepDir","step","i","push","readOnly","controls","input","size","snap","console","warn","render","h","class","ref","el","type","name","id","sliderId","label","map","showTickNumbers","tabindex","tooltip","height","viewBox","fill","xmlns","d","onFocus","e"],"sources":["./src/components/slider/slider.scss?tag=sdds-slider","./src/components/slider/slider.tsx"],"sourcesContent":["@import 'slider-theme-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.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}","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"],"mappings":"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"}

package/dist/tegel/p-58cfea69.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as s,H as d,g as a}from"./p-1b74896d.js";const l=":host(.sdds-table__header-cell){box-sizing:border-box;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);display:table-cell;text-align:left;color:var(--sdds-data-table-color);background-color:var(--sdds-data-table-header-background);border-bottom:1px solid var(--sdds-data-table-header-background-hover);padding:0;height:48px;min-width:192px;box-sizing:border-box;vertical-align:middle;overflow:hidden;transition:background-color 200ms ease}:host(.sdds-table__header-cell) *{box-sizing:border-box}:host(.sdds-table__header-cell) .sdds-table__header-text{padding:0 16px;margin:0}:host(.sdds-table__header-cell--sortable) .sdds-table__header-button{display:flex;align-items:center;gap:8px;justify-content:start;flex-direction:row;width:100%;height:100%;padding:0 16px;background-color:transparent;border:none;cursor:pointer;transition:background-color 200ms ease}:host(.sdds-table__header-cell--sortable) .sdds-table__header-button:focus{outline:2px solid var(--sdds-data-table-header-btn-focus);outline-offset:-2px}:host(.sdds-table__header-cell--sortable) .sdds-table__header-button:focus .sdds-table__header-button-icon{opacity:1}:host(.sdds-table__header-cell--sortable) .sdds-table__header-button .sdds-table__header-button-text{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);text-align:left;color:var(--sdds-data-table-header-btn-color)}:host(.sdds-table__header-cell--sortable) .sdds-table__header-button .sdds-table__header-button-icon{flex:0 0 16px;height:16px;opacity:0;transform-origin:center;transition:opacity 200ms ease-in, transform 200ms ease;fill:var(--sdds-data-table-color)}:host(.sdds-table__header-cell--sortable) .sdds-table__header-button:hover .sdds-table__header-button-icon{opacity:1}:host(.sdds-table__header-cell--right-align) .sdds-table__header-button{text-align:right;justify-content:end;flex-direction:row-reverse}:host(.sdds-table__header-cell--is-sorted) .sdds-table__header-button{background-color:var(--sdds-data-table-header-btn-background)}:host(.sdds-table__header-cell--is-sorted) .sdds-table__header-button:hover{background-color:var(--sdds-data-table-header-btn-background-hover)}:host(.sdds-table__header-cell--is-sorted) .sdds-table__header-button .sdds-table__header-button-icon{opacity:1}:host(.sdds-table__header-cell--is-sorted) .sdds-table__header-button .sdds-table__header-button-icon--rotate{transform:rotate(180deg)}:host(.sdds-table--compact){height:33px}:host(.sdds-table--divider){border-right:1px solid var(--sdds-data-table-divider)}:host(.sdds-table--divider:last-of-type){border-right:none}:host(.sdds-table--no-min-width){min-width:unset}:host(.sdds-table__header-cell:first-of-type){border-top-left-radius:4px}:host(.sdds-table__header-cell:last-of-type){border-top-right-radius:4px}:host(.sdds-table--extra-column:first-of-type){border-top-left-radius:0}:host(.sdds-table--toolbar-available){border-radius:0}:host(.sdds-table--extra-column.sdds-table--toolbar-available){border-radius:0}:host(.sdds-table__header-cell.sdds-table--toolbar-available:first-of-type){border-top-left-radius:0}:host(.sdds-table__header-cell.sdds-table--toolbar-available:last-of-type){border-top-right-radius:0}";const i=["enableMultiselect","enableExpandableRows","compactDesign","noMinWidth","verticalDividers"];const o=class{constructor(d){e(this,d);this.sortColumnDataEvent=t(this,"sortColumnDataEvent",7);this.textAlignEvent=t(this,"textAlignEvent",7);this.headCellHoverEvent=t(this,"headCellHoverEvent",7);this.sortButtonClick=e=>{if(this.sortingDirection!=="asc"){this.sortingDirection="asc"}else{this.sortingDirection="desc"}this.sortedByMyKey=true;this.sortColumnDataEvent.emit([this.tableId,e,this.sortingDirection])};this.headerCellContent=()=>{if(this.sortable&&!this.disableSortingBtn){return s("button",{class:"sdds-table__header-button",onClick:()=>this.sortButtonClick(this.columnKey)},s("span",{class:"sdds-table__header-button-text",style:{textAlign:this.textAlignState}},this.columnTitle),this.sortingDirection===""&&s("svg",{class:"sdds-table__header-button-icon",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 12 15"},s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M8.45 13.67V4.62a.5.5 0 0 1 1 0v9.05h-1Z"}),s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M6.07 10.28a.5.5 0 0 1 .7.08l2.1 2.66a.1.1 0 0 0 .15 0l2.09-2.66a.5.5 0 1 1 .78.62l-2.08 2.66a1.1 1.1 0 0 1-1.73 0l-2.1-2.66a.5.5 0 0 1 .1-.7ZM3.55.4v9.04a.5.5 0 1 1-1 0V.39h1Z"}),s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M5.93 3.78a.5.5 0 0 1-.7-.08l-2.1-2.66a.1.1 0 0 0-.15 0L.89 3.7a.5.5 0 0 1-.78-.62L2.19.42a1.1 1.1 0 0 1 1.73 0l2.1 2.66a.5.5 0 0 1-.1.7Z"})),this.sortingDirection!==""&&s("svg",{class:`sdds-table__header-button-icon ${this.sortingDirection==="desc"?"sdds-table__header-button-icon--rotate":""}`,fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32"},s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M17 2.974a1 1 0 0 0-2 0v24.3l-9.312-9.312a1 1 0 0 0-1.414 1.414l9.887 9.888a2.6 2.6 0 0 0 3.677 0l9.888-9.888a1 1 0 0 0-1.414-1.414L17 27.274v-24.3Z"})))}return s("p",{class:"sdds-table__header-text",style:{textAlign:this.textAlignState}},this.columnTitle)};this.onHeadCellHover=e=>{this.headCellHoverEvent.emit([this.tableId,e])};this.columnKey=undefined;this.columnTitle=undefined;this.customWidth=undefined;this.sortable=false;this.textAlign=undefined;this.textAlignState=undefined;this.sortingDirection="";this.sortedByMyKey=false;this.disableSortingBtn=false;this.verticalDividers=false;this.compactDesign=false;this.noMinWidth=false;this.enableMultiselect=false;this.enableToolbarDesign=false;this.tableId="";this.enableExpandableRows=false}tablePropsChangedEventListener(e){if(this.tableId===e.detail.tableId){e.detail.changed.filter((e=>i.includes(e))).forEach((t=>{if(typeof this[t]==="undefined"){throw new Error(`Table prop is not supported: ${t}`)}this[t]=e.detail[t]}))}}sortingSwitcherEventListener(e){const[t,s]=e.detail;if(this.tableId===t){this.disableSortingBtn=s}}updateOptionsContent(e){if(this.tableId===e.detail[0]){if(this.columnKey!==e.detail[1]){this.sortedByMyKey=false;setTimeout((()=>{this.sortingDirection=""}),200)}}}enableMultiselectEventListener(e){if(this.tableId===e.detail[0])[,this.enableMultiselect]=e.detail}connectedCallback(){this.tableEl=this.host.closest("sdds-table");this.tableId=this.tableEl.tableId}componentWillLoad(){i.forEach((e=>{this[e]=this.tableEl[e]}))}componentWillRender(){if(this.textAlign==="right"||this.textAlign==="end"){this.textAlignState="right"}else{this.textAlignState="left"}this.textAlignEvent.emit([this.tableId,this.columnKey,this.textAlignState]);this.enableToolbarDesign=this.host.closest("sdds-table").getElementsByTagName("sdds-table-toolbar").length>=1}render(){return s(d,{class:{"sdds-table__header-cell":true,"sdds-table__header-cell--sortable":this.sortable,"sdds-table__header-cell--is-sorted":this.sortedByMyKey,"sdds-table__header-cell--custom-width":this.customWidth!=="","sdds-table__header-cell--right-align":this.textAlignState==="right","sdds-table--compact":this.compactDesign,"sdds-table--divider":this.verticalDividers,"sdds-table--no-min-width":this.noMinWidth,"sdds-table--extra-column":this.enableMultiselect||this.enableExpandableRows,"sdds-table--toolbar-available":this.enableToolbarDesign},style:{width:this.customWidth},onMouseOver:()=>this.onHeadCellHover(this.columnKey),onMouseLeave:()=>this.onHeadCellHover("")},this.headerCellContent())}get host(){return a(this)}};o.style=l;export{o as sdds_header_cell};
-//# sourceMappingURL=p-58cfea69.entry.js.map

package/dist/tegel/p-58cfea69.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tableHeaderCellCss","relevantTableProps","TableHeaderCell","this","sortButtonClick","key","sortingDirection","sortedByMyKey","sortColumnDataEvent","emit","tableId","headerCellContent","sortable","disableSortingBtn","h","class","onClick","columnKey","style","textAlign","textAlignState","columnTitle","fill","xmlns","viewBox","d","onHeadCellHover","headCellHoverEvent","tablePropsChangedEventListener","event","detail","changed","filter","changedProp","includes","forEach","Error","sortingSwitcherEventListener","receivedID","receivedSortingStatus","updateOptionsContent","setTimeout","enableMultiselectEventListener","enableMultiselect","connectedCallback","tableEl","host","closest","componentWillLoad","tablePropName","componentWillRender","textAlignEvent","enableToolbarDesign","getElementsByTagName","length","render","Host","customWidth","compactDesign","verticalDividers","noMinWidth","enableExpandableRows","width","onMouseOver","onMouseLeave"],"sources":["./src/components/data-table/table-header-cell/table-header-cell.scss?tag=sdds-header-cell&encapsulation=shadow","./src/components/data-table/table-header-cell/table-header-cell.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__header-cell) {\n  @include sdds-box-sizing;\n\n  font: var(--sdds-headline-07);\n  letter-spacing: var(--sdds-headline-07-ls);\n  display: table-cell;\n  text-align: left;\n  color: var(--sdds-data-table-color);\n  background-color: var(--sdds-data-table-header-background);\n  border-bottom: 1px solid var(--sdds-data-table-header-background-hover);\n  padding: 0;\n  height: 48px;\n  min-width: 192px;\n  box-sizing: border-box;\n  vertical-align: middle;\n  overflow: hidden;\n  transition: background-color 200ms ease;\n\n  .sdds-table__header-text {\n    padding: 0 16px;\n    margin: 0;\n  }\n}\n\n:host(.sdds-table__header-cell--sortable) {\n  .sdds-table__header-button {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    justify-content: start;\n    flex-direction: row;\n    width: 100%;\n    height: 100%;\n    padding: 0 16px;\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    transition: background-color 200ms ease;\n\n    &:focus {\n      outline: 2px solid var(--sdds-data-table-header-btn-focus);\n      outline-offset: -2px;\n\n      .sdds-table__header-button-icon {\n        opacity: 1;\n      }\n    }\n\n    .sdds-table__header-button-text {\n      font: var(--sdds-headline-07);\n      letter-spacing: var(--sdds-headline-07-ls);\n      text-align: left;\n      color: var(--sdds-data-table-header-btn-color);\n    }\n\n    .sdds-table__header-button-icon {\n      /* not to shrink on lot of text */\n      flex: 0 0 16px;\n      height: 16px;\n      opacity: 0;\n      transform-origin: center;\n      transition: opacity 200ms ease-in, transform 200ms ease;\n      fill: var(--sdds-data-table-color);\n    }\n\n    &:hover {\n      .sdds-table__header-button-icon {\n        opacity: 1;\n      }\n    }\n  }\n}\n\n:host(.sdds-table__header-cell--right-align) {\n  .sdds-table__header-button {\n    text-align: right;\n    justify-content: end;\n    flex-direction: row-reverse;\n  }\n}\n\n:host(.sdds-table__header-cell--is-sorted) {\n  .sdds-table__header-button {\n    background-color: var(--sdds-data-table-header-btn-background);\n\n    &:hover {\n      background-color: var(--sdds-data-table-header-btn-background-hover);\n    }\n\n    .sdds-table__header-button-icon {\n      opacity: 1;\n    }\n\n    .sdds-table__header-button-icon--rotate {\n      transform: rotate(180deg);\n    }\n  }\n}\n\n:host(.sdds-table--compact) {\n  height: 33px;\n}\n\n:host(.sdds-table--divider) {\n  border-right: 1px solid var(--sdds-data-table-divider);\n}\n\n:host(.sdds-table--divider:last-of-type) {\n  border-right: none;\n}\n\n:host(.sdds-table--no-min-width) {\n  min-width: unset;\n}\n\n// border-radius style control\n// it depends id multiselect si on or off, same for if toolbar is there or not\n:host(.sdds-table__header-cell:first-of-type) {\n  border-top-left-radius: 4px;\n}\n\n:host(.sdds-table__header-cell:last-of-type) {\n  border-top-right-radius: 4px;\n}\n\n:host(.sdds-table--extra-column:first-of-type) {\n  border-top-left-radius: 0;\n}\n\n:host(.sdds-table--toolbar-available) {\n  border-radius: 0;\n}\n\n:host(.sdds-table--extra-column.sdds-table--toolbar-available) {\n  border-radius: 0;\n}\n\n:host(.sdds-table__header-cell.sdds-table--toolbar-available:first-of-type) {\n  border-top-left-radius: 0;\n}\n\n:host(.sdds-table__header-cell.sdds-table--toolbar-available:last-of-type) {\n  border-top-right-radius: 0;\n}\n","import {\n  Component,\n  Prop,\n  h,\n  Host,\n  Event,\n  EventEmitter,\n  State,\n  Listen,\n  Element,\n} from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n  'enableMultiselect',\n  'enableExpandableRows',\n  'compactDesign',\n  'noMinWidth',\n  'verticalDividers',\n];\n\n@Component({\n  tag: 'sdds-header-cell',\n  styleUrl: 'table-header-cell.scss',\n  shadow: true,\n})\nexport class TableHeaderCell {\n  /** Value of column key, usually comes from JSON, needed for sorting */\n  @Prop({ reflect: true }) columnKey: string;\n\n  /** Text that displays in column cell */\n  @Prop({ reflect: true }) columnTitle: string;\n\n  /** In case noMinWidth setting, user has to specify width value for each column, for example \"150px\" */\n  @Prop({ reflect: true }) customWidth: string;\n\n  /** If passed as prop, enables sorting on that column */\n  @Prop() sortable: boolean = false;\n\n  /** Setting for text align, default is left, but user can pass \"right\" as string - useful for numeric values */\n  @Prop({ reflect: true }) textAlign: string;\n\n  @State() textAlignState: string;\n\n  @State() sortingDirection: string = '';\n\n  @State() sortedByMyKey: boolean = false;\n\n  @State() disableSortingBtn: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() enableMultiselect: boolean = false;\n\n  @State() enableToolbarDesign: boolean = false;\n\n  @State() tableId: string = '';\n\n  @State() enableExpandableRows: boolean = false;\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  /** Sends unique table identifier,column key and sorting direction to the sdds-table-body component */\n  @Event({\n    eventName: 'sortColumnDataEvent',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sortColumnDataEvent: EventEmitter<any>;\n\n  /** Sends unique table identifier, column key and text align value so the body cells with same key take the same text alignment as header cell */\n  @Event({\n    eventName: 'textAlignEvent',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  textAlignEvent: EventEmitter<any>;\n\n  /** Sends unique table identifier, column key so the body cells with the same key change background when user hovers over header cell */\n  @Event({\n    eventName: 'headCellHoverEvent',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  headCellHoverEvent: EventEmitter<any>;\n\n  @Listen('tablePropsChangedEvent', { target: 'body' })\n  tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  // Listen to parent data-table if sorting is allowed\n  @Listen('sortingSwitcherEvent', { target: 'body' })\n  sortingSwitcherEventListener(event: CustomEvent<any>) {\n    const [receivedID, receivedSortingStatus] = event.detail;\n    if (this.tableId === receivedID) {\n      this.disableSortingBtn = receivedSortingStatus;\n    }\n  }\n\n  // target is set to body so other instances of same component \"listen\" and react to the change\n  @Listen('sortColumnDataEvent', { target: 'body' })\n  updateOptionsContent(event: CustomEvent<any>) {\n    if (this.tableId === event.detail[0]) {\n      // grab only value at position 1 as it is the \"key\"\n      if (this.columnKey !== event.detail[1]) {\n        this.sortedByMyKey = false;\n        // To sync with CSS transition timing\n        setTimeout(() => {\n          this.sortingDirection = '';\n        }, 200);\n      }\n    }\n  }\n\n  @Listen('enableMultiselectEvent', { target: 'body' })\n  enableMultiselectEventListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail[0]) [, this.enableMultiselect] = event.detail;\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  componentWillRender() {\n    // enable only right or left text align\n    if (this.textAlign === 'right' || this.textAlign === 'end') {\n      this.textAlignState = 'right';\n    } else {\n      this.textAlignState = 'left';\n    }\n    // To enable body cells text align per rules set in head cell\n    this.textAlignEvent.emit([this.tableId, this.columnKey, this.textAlignState]);\n\n    this.enableToolbarDesign =\n      this.host.closest('sdds-table').getElementsByTagName('sdds-table-toolbar').length >= 1;\n  }\n\n  sortButtonClick = (key) => {\n    // Toggling direction of sorting as we only use one button for sorting\n    if (this.sortingDirection !== 'asc') {\n      this.sortingDirection = 'asc';\n    } else {\n      this.sortingDirection = 'desc';\n    }\n    // Setting to true we can set enable CSS class for \"active\" state of column\n    this.sortedByMyKey = true;\n    // Use array to send both key and sorting direction\n    this.sortColumnDataEvent.emit([this.tableId, key, this.sortingDirection]);\n  };\n\n  headerCellContent = () => {\n    if (this.sortable && !this.disableSortingBtn) {\n      return (\n        <button\n          class=\"sdds-table__header-button\"\n          onClick={() => this.sortButtonClick(this.columnKey)}\n        >\n          <span class=\"sdds-table__header-button-text\" style={{ textAlign: this.textAlignState }}>\n            {this.columnTitle}\n          </span>\n\n          {this.sortingDirection === '' && (\n            <svg\n              class=\"sdds-table__header-button-icon\"\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 12 15\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M8.45 13.67V4.62a.5.5 0 0 1 1 0v9.05h-1Z\"\n              />\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M6.07 10.28a.5.5 0 0 1 .7.08l2.1 2.66a.1.1 0 0 0 .15 0l2.09-2.66a.5.5 0 1 1 .78.62l-2.08 2.66a1.1 1.1 0 0 1-1.73 0l-2.1-2.66a.5.5 0 0 1 .1-.7ZM3.55.4v9.04a.5.5 0 1 1-1 0V.39h1Z\"\n              />\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M5.93 3.78a.5.5 0 0 1-.7-.08l-2.1-2.66a.1.1 0 0 0-.15 0L.89 3.7a.5.5 0 0 1-.78-.62L2.19.42a1.1 1.1 0 0 1 1.73 0l2.1 2.66a.5.5 0 0 1-.1.7Z\"\n              />\n            </svg>\n          )}\n          {/* First icon is arrow down as first set direction is ascending, clicking it again rotates the icon as we set descending order */}\n          {this.sortingDirection !== '' && (\n            <svg\n              class={`sdds-table__header-button-icon ${\n                this.sortingDirection === 'desc' ? 'sdds-table__header-button-icon--rotate' : ''\n              }`}\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 32 32\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M17 2.974a1 1 0 0 0-2 0v24.3l-9.312-9.312a1 1 0 0 0-1.414 1.414l9.887 9.888a2.6 2.6 0 0 0 3.677 0l9.888-9.888a1 1 0 0 0-1.414-1.414L17 27.274v-24.3Z\"\n              />\n            </svg>\n          )}\n        </button>\n      );\n    }\n    return (\n      <p class=\"sdds-table__header-text\" style={{ textAlign: this.textAlignState }}>\n        {this.columnTitle}\n      </p>\n    );\n  };\n\n  onHeadCellHover = (key) => {\n    this.headCellHoverEvent.emit([this.tableId, key]);\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table__header-cell': true,\n          'sdds-table__header-cell--sortable': this.sortable,\n          'sdds-table__header-cell--is-sorted': this.sortedByMyKey,\n          'sdds-table__header-cell--custom-width': this.customWidth !== '',\n          'sdds-table__header-cell--right-align': this.textAlignState === 'right',\n          'sdds-table--compact': this.compactDesign,\n          'sdds-table--divider': this.verticalDividers,\n          'sdds-table--no-min-width': this.noMinWidth,\n          'sdds-table--extra-column': this.enableMultiselect || this.enableExpandableRows,\n          'sdds-table--toolbar-available': this.enableToolbarDesign,\n        }}\n        style={{ width: this.customWidth }}\n        // Calling actions from here to enable hover functionality for both sortable and un-sortable tables\n        onMouseOver={() => this.onHeadCellHover(this.columnKey)}\n        onMouseLeave={() => this.onHeadCellHover('')}\n      >\n        {this.headerCellContent()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/tegel/p-591dfbcd.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as s,h as t,H as a,g as i}from"./p-1b74896d.js";const d=":host,.sdds-table{border-collapse:collapse;display:table;box-sizing:border-box}:host *,.sdds-table *{box-sizing:border-box}:host(.sdds-table--responsive),.sdds-table--responsive{width:100%}";const n=class{constructor(t){e(this,t);this.tablePropsChangedEvent=s(this,"tablePropsChangedEvent",7);this.verticalDividers=false;this.compactDesign=false;this.noMinWidth=undefined;this.enableMultiselect=false;this.enableExpandableRows=false;this.enableResponsive=false;this.modeVariant=null;this.tableId=crypto.randomUUID()}emitTablePropsChangedEvent(e,s){this.tablePropsChangedEvent.emit({tableId:this.tableId,changed:[e],[e]:s})}enableMultiselectChanged(e){this.emitTablePropsChangedEvent("enableMultiselect",e)}enableExpandableRowsChanged(e){this.emitTablePropsChangedEvent("enableExpandableRows",e)}compactDesignChanged(e){this.emitTablePropsChangedEvent("compactDesign",e)}verticalDividersChanged(e){this.emitTablePropsChangedEvent("verticalDividers",e)}noMinWidthChanged(e){this.emitTablePropsChangedEvent("noMinWidth",e)}modeVariantChanged(e){this.emitTablePropsChangedEvent("modeVariant",e)}render(){return t(a,{class:{"sdds-table--responsive":this.enableResponsive}},t("table",{class:{"sdds-table":true,"sdds-table--compact":this.compactDesign,"sdds-table--divider":this.verticalDividers,"sdds-table--no-min-width":this.noMinWidth,"sdds-table--responsive":this.enableResponsive}},t("slot",null)))}get host(){return i(this)}static get watchers(){return{enableMultiselect:["enableMultiselectChanged"],enableExpandableRows:["enableExpandableRowsChanged"],compactDesign:["compactDesignChanged"],verticalDividers:["verticalDividersChanged"],noMinWidth:["noMinWidthChanged"],modeVariant:["modeVariantChanged"]}}};n.style=d;export{n as sdds_table};
-//# sourceMappingURL=p-591dfbcd.entry.js.map

package/dist/tegel/p-591dfbcd.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tableCss","Table","crypto","randomUUID","emitTablePropsChangedEvent","changedValueName","changedValue","this","tablePropsChangedEvent","emit","tableId","changed","enableMultiselectChanged","newValue","enableExpandableRowsChanged","compactDesignChanged","verticalDividersChanged","noMinWidthChanged","modeVariantChanged","render","h","Host","class","enableResponsive","compactDesign","verticalDividers","noMinWidth"],"sources":["./src/components/data-table/table/table.scss?tag=sdds-table&encapsulation=shadow","./src/components/data-table/table/table.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host,\n.sdds-table {\n  border-collapse: collapse;\n  display: table;\n  @include sdds-box-sizing;\n}\n\n:host(.sdds-table--responsive),\n.sdds-table--responsive {\n  width: 100%;\n}\n","// https://stackoverflow.com/questions/63051941/how-to-pass-data-as-array-of-object-in-stencil-js\n// https://medium.com/@scottmgerstl/passing-an-object-or-array-to-stencil-dd62b7d92641\n\nimport { Component, Prop, h, Host, Event, EventEmitter, Element, Watch } from '@stencil/core';\n\ntype Props = {\n  verticalDividers: boolean;\n  compactDesign: boolean;\n  noMinWidth: boolean;\n  enableMultiselect: boolean;\n  enableExpandableRows: boolean;\n  enableResponsive: boolean;\n  modeVariant: 'primary' | 'secondary' | null;\n};\n\nexport type TablePropsChangedEvent = {\n  tableId: string;\n  changed: Array<keyof Props>;\n} & Partial<Props>;\n\n@Component({\n  tag: 'sdds-table',\n  styleUrl: 'table.scss',\n  shadow: true,\n})\nexport class Table {\n  /** Enables style with vertical dividers between columns */\n  @Prop({ reflect: true }) verticalDividers: boolean = false;\n\n  /** Enables style where data-table toolbar, rows and footer are less high */\n  @Prop({ reflect: true }) compactDesign: boolean = false;\n\n  /** Enables to customise width on data-table columns */\n  @Prop({ reflect: true }) noMinWidth: boolean;\n  // TODO: Due to unknown reason, one of this items has to be left as is. If all are false, it seems like emitting is not properly done and it affects other events in data table. Try setting it and observe text-align set on header cell\n\n  /** Enables multiselect feature of data-table */\n  @Prop({ reflect: true }) enableMultiselect: boolean = false;\n\n  /** Enables extended row feature of data-table */\n  @Prop({ reflect: true }) enableExpandableRows: boolean = false;\n\n  /** Enables table to take 100% available width with equal spacing of columns */\n  @Prop({ reflect: true }) enableResponsive: boolean = false;\n\n  /** Variant of the component, based on current mode. */\n  @Prop({ reflect: true }) modeVariant: 'primary' | 'secondary' = null;\n\n  /** ID used for internal table functionality and events, must be unique.\n   *\n   * **NOTE**: If you're listening for table events you need to set this ID yourself to identify the table, as the default ID is random and will be different every time.\n   */\n  @Prop() tableId: string = crypto.randomUUID();\n\n  @Element() host: HTMLElement;\n\n  /** Broadcasts changes to the tables props */\n  @Event({\n    eventName: 'tablePropsChangedEvent',\n    bubbles: true,\n    composed: true,\n    cancelable: true,\n  })\n  tablePropsChangedEvent: EventEmitter<TablePropsChangedEvent>;\n\n  emitTablePropsChangedEvent(changedValueName: keyof Props, changedValue: Props[keyof Props]) {\n    this.tablePropsChangedEvent.emit({\n      tableId: this.tableId,\n      changed: [changedValueName],\n      [changedValueName]: changedValue,\n    });\n  }\n\n  @Watch('enableMultiselect')\n  enableMultiselectChanged(newValue: boolean) {\n    this.emitTablePropsChangedEvent('enableMultiselect', newValue);\n  }\n\n  @Watch('enableExpandableRows')\n  enableExpandableRowsChanged(newValue: boolean) {\n    this.emitTablePropsChangedEvent('enableExpandableRows', newValue);\n  }\n\n  @Watch('compactDesign')\n  compactDesignChanged(newValue: boolean) {\n    this.emitTablePropsChangedEvent('compactDesign', newValue);\n  }\n\n  @Watch('verticalDividers')\n  verticalDividersChanged(newValue: boolean) {\n    this.emitTablePropsChangedEvent('verticalDividers', newValue);\n  }\n\n  @Watch('noMinWidth')\n  noMinWidthChanged(newValue: boolean) {\n    this.emitTablePropsChangedEvent('noMinWidth', newValue);\n  }\n\n  @Watch('modeVariant')\n  modeVariantChanged(newValue: 'primary' | 'secondary' | null) {\n    this.emitTablePropsChangedEvent('modeVariant', newValue);\n  }\n\n  render() {\n    return (\n      <Host class={{ 'sdds-table--responsive': this.enableResponsive }}>\n        <table\n          class={{\n            'sdds-table': true,\n            'sdds-table--compact': this.compactDesign,\n            'sdds-table--divider': this.verticalDividers,\n            'sdds-table--no-min-width': this.noMinWidth,\n            'sdds-table--responsive': this.enableResponsive,\n          }}\n        >\n          <slot />\n        </table>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAW,gM,MCyBJC,EAAK,M,8GAEqC,M,mBAGH,M,iDAOI,M,0BAGG,M,sBAGJ,M,iBAGW,K,aAMtCC,OAAOC,Y,CAajCC,2BAA2BC,EAA+BC,GACxDC,KAAKC,uBAAuBC,KAAK,CAC/BC,QAASH,KAAKG,QACdC,QAAS,CAACN,GACVA,CAACA,GAAmBC,G,CAKxBM,yBAAyBC,GACvBN,KAAKH,2BAA2B,oBAAqBS,E,CAIvDC,4BAA4BD,GAC1BN,KAAKH,2BAA2B,uBAAwBS,E,CAI1DE,qBAAqBF,GACnBN,KAAKH,2BAA2B,gBAAiBS,E,CAInDG,wBAAwBH,GACtBN,KAAKH,2BAA2B,mBAAoBS,E,CAItDI,kBAAkBJ,GAChBN,KAAKH,2BAA2B,aAAcS,E,CAIhDK,mBAAmBL,GACjBN,KAAKH,2BAA2B,cAAeS,E,CAGjDM,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,CAAE,yBAA0Bf,KAAKgB,mBAC5CH,EAAA,SACEE,MAAO,CACL,aAAc,KACd,sBAAuBf,KAAKiB,cAC5B,sBAAuBjB,KAAKkB,iBAC5B,2BAA4BlB,KAAKmB,WACjC,yBAA0BnB,KAAKgB,mBAGjCH,EAAA,c"}

package/dist/tegel/p-5b615b67.entry.js

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

package/dist/tegel/p-5b615b67.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tableBodyCellCss","relevantTableProps","TableBodyCell","tablePropsChangedEventListener","event","this","tableId","detail","changed","filter","changedProp","includes","forEach","Error","headCellHoverEventListener","receivedID","receivedKeyValue","activeSorting","cellKey","textAlignEventListener","receivedKey","receivedTextAlign","textAlignState","connectedCallback","tableEl","host","closest","componentWillLoad","tablePropName","render","h","Host","class","compactDesign","verticalDividers","noMinWidth","disablePadding","style","textAlign","cellValue","tableBodyRowCss","TableBodyRow","bodyCheckBoxClicked","row","bodyCheckBoxStatus","currentTarget","checked","classList","add","remove","bodyRowToTable","emit","bodyCheckBoxStatusUpdater","status","mainCheckBoxStatus","headCheckboxListener","updateBodyCheckboxesEventListener","receivedBodyCheckboxStatus","componentDidLoad","runPaginationEvent","modeVariant","enableMultiselect","type","onChange"],"sources":["./src/components/data-table/table-body-cell/table-body-cell.scss?tag=sdds-body-cell&encapsulation=shadow","./src/components/data-table/table-body-cell/table-body-cell.tsx","./src/components/data-table/table-body-row/table-body-row.scss?tag=sdds-table-body-row&encapsulation=shadow","./src/components/data-table/table-body-row/table-body-row.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__body-cell) {\n  @include sdds-box-sizing;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  display: table-cell;\n  box-sizing: border-box;\n  color: var(--sdds-data-table-color);\n  padding: var(--sdds-spacing-element-16);\n  min-width: 192px;\n  vertical-align: top;\n  background-color: transparent;\n  transition: background-color 200ms ease;\n}\n\n:host(.sdds-table__body-cell--no-padding) {\n  padding: 0;\n}\n\n:host(.sdds-table__body-cell--hover) {\n  background-color: var(--sdds-data-table-body-cell-background-hover);\n}\n\n:host(.sdds-table__compact) {\n  padding: var(--sdds-spacing-element-8) var(--sdds-spacing-element-16);\n}\n\n:host(.sdds-table--divider) {\n  border-right: 1px solid var(--sdds-data-table-divider);\n}\n\n:host(.sdds-table--divider:last-of-type) {\n  border-right: none;\n}\n\n:host(.sdds-table--no-min-width) {\n  min-width: unset;\n}\n","import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n  'verticalDividers',\n  'compactDesign',\n  'noMinWidth',\n];\n@Component({\n  tag: 'sdds-body-cell',\n  styleUrl: 'table-body-cell.scss',\n  shadow: true,\n})\nexport class TableBodyCell {\n  /** Value that will be presented as text inside a cell */\n  @Prop({ reflect: true }) cellValue: string | number;\n\n  /** Passing same cell key for all body cells which is used in head cell enables features of text align and hovering */\n  @Prop({ reflect: true }) cellKey: any;\n\n  /** Disables internal padding. Useful when passing other components to cell. */\n  @Prop({ reflect: true }) disablePadding: boolean = false;\n\n  @State() textAlignState: string;\n\n  @State() activeSorting: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() whiteBackground: boolean = false;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  @Listen('tablePropsChangedEvent', { target: 'body' })\n  tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  // Listen to headKey from data-table-header-element\n  @Listen('headCellHoverEvent', { target: 'body' })\n  headCellHoverEventListener(event: CustomEvent<any>) {\n    const [receivedID, receivedKeyValue] = event.detail;\n\n    if (this.tableId === receivedID) {\n      this.activeSorting = this.cellKey === receivedKeyValue;\n    }\n  }\n\n  // Listen to textAlignEvent from data-table-header-element\n  @Listen('textAlignEvent', { target: 'body' })\n  textAlignEventListener(event: CustomEvent<any>) {\n    const [receivedID, receivedKey, receivedTextAlign] = event.detail;\n\n    if (this.tableId === receivedID) {\n      if (this.cellKey === receivedKey) {\n        this.textAlignState = receivedTextAlign;\n      }\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table__body-cell': true,\n          'sdds-table__body-cell--hover': this.activeSorting,\n          'sdds-table__compact': this.compactDesign,\n          'sdds-table--divider': this.verticalDividers,\n          'sdds-table--no-min-width': this.noMinWidth,\n          'sdds-table__body-cell--no-padding': this.disablePadding,\n        }}\n        style={{ textAlign: this.textAlignState }}\n      >\n        {this.cellValue}\n        <slot />\n      </Host>\n    );\n  }\n}\n","/* As checkbox is not a web component, we have to import them here in order to have styles available - shadow DOM is a reason */\n@import '../../checkbox/checkbox';\n@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__row) {\n  @include sdds-box-sizing;\n\n  display: table-row;\n  border-bottom: 1px solid var(--sdds-data-table-divider);\n  background-color: var(--sdds-data-table-body-row-background);\n  transition: background-color 200ms ease;\n  color: var(--sdds-data-table-color);\n\n  .sdds-table__body-cell--checkbox {\n    min-width: 48px;\n    width: 48px;\n    padding: 0;\n  }\n}\n\n:host(.sdds-table__row:hover) {\n  background-color: var(--sdds-data-table-body-row-background-hover);\n}\n\n:host(.sdds-table__row--selected) {\n  background-color: var(--sdds-data-table-body-row-background-active);\n}\n\n:host(.sdds-table__row--selected:hover) {\n  background-color: var(--sdds-data-table-body-row-background-active-hover);\n}\n\n:host(.sdds-table__row--hidden) {\n  display: none;\n}\n\n:host(.sdds-table__row--expended) {\n  width: 100%;\n  background-color: pink;\n}\n\n:host {\n  // Extra rule for label use in data-data-table\n  .sdds-form-label--data-table {\n    width: 100%;\n    height: 48px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n  }\n}\n\n:host(.sdds-table__compact) {\n  .sdds-form-label--data-table {\n    height: 32px;\n  }\n}\n\n:host(.sdds-table--divider) {\n  .sdds-table__body-cell--checkbox {\n    border-right: 1px solid var(--sdds-data-table-divider);\n  }\n}\n","import { Component, Element, h, Host, State, Event, EventEmitter, Listen } from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n  'enableMultiselect',\n  'verticalDividers',\n  'compactDesign',\n  'modeVariant',\n];\n\n@Component({\n  tag: 'sdds-table-body-row',\n  styleUrl: 'table-body-row.scss',\n  shadow: true,\n})\nexport class TableBodyRow {\n  @State() enableMultiselect: boolean = false;\n\n  @State() bodyCheckBoxStatus: boolean = false;\n\n  @State() mainCheckBoxStatus: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() modeVariant: 'primary' | 'secondary' = null;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  bodyCheckBoxClicked(event) {\n    const row = this.host;\n    this.bodyCheckBoxStatus = event.currentTarget.checked;\n    if (this.bodyCheckBoxStatus === true) {\n      row.classList.add('sdds-table__row--selected');\n    } else {\n      row.classList.remove('sdds-table__row--selected');\n    }\n    this.bodyRowToTable.emit(this.bodyCheckBoxStatus);\n  }\n\n  bodyCheckBoxStatusUpdater(status) {\n    this.mainCheckBoxStatus = status;\n    this.bodyCheckBoxStatus = this.mainCheckBoxStatus;\n    const row = this.host;\n    if (this.bodyCheckBoxStatus === true) {\n      row.classList.add('sdds-table__row--selected');\n    } else {\n      row.classList.remove('sdds-table__row--selected');\n    }\n    this.bodyRowToTable.emit(this.bodyCheckBoxStatus);\n  }\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  /** Send status of single row to the parent, sdds-table component that hold logic for data export and main checkbox control */\n  @Event({\n    eventName: 'bodyRowToTable',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  bodyRowToTable: EventEmitter<boolean>;\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('mainCheckboxSelectedEvent', { target: 'body' })\n  headCheckboxListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail[0]) {\n      this.bodyCheckBoxStatusUpdater(event.detail[1]);\n    }\n  }\n\n  @Listen('updateBodyCheckboxesEvent', { target: 'body' })\n  updateBodyCheckboxesEventListener(event: CustomEvent<any>) {\n    const [receivedID, receivedBodyCheckboxStatus] = event.detail;\n    if (this.tableId === receivedID) {\n      this.bodyCheckBoxStatusUpdater(receivedBodyCheckboxStatus);\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  componentDidLoad() {\n    this.runPaginationEvent.emit(this.tableId);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table__row': true,\n          'sdds-table__compact': this.compactDesign,\n          'sdds-table--divider': this.verticalDividers,\n          'sdds-mode-variant-primary': this.modeVariant === 'primary',\n          'sdds-mode-variant-secondary': this.modeVariant === 'secondary',\n        }}\n      >\n        {this.enableMultiselect && (\n          <td class=\"sdds-table__body-cell sdds-table__body-cell--checkbox\">\n            <div class=\"sdds-checkbox-item\">\n              <label class=\"sdds-form-label sdds-form-label--data-table\">\n                <input\n                  class=\"sdds-form-input\"\n                  type=\"checkbox\"\n                  onChange={(event) => this.bodyCheckBoxClicked(event)}\n                  checked={this.bodyCheckBoxStatus}\n                />\n              </label>\n            </div>\n          </td>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/tegel/p-650d5e31.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as s,H as a,g as o}from"./p-1b74896d.js";const i='.sdds-navigation-tabs{box-sizing:border-box;background-color:var(--sdds-navigation-tabs-background);position:relative;display:flex;}.sdds-navigation-tabs *{box-sizing:border-box}.sdds-navigation-tabs::after{content:" ";display:block;border-bottom:1px solid var(--sdds-navigation-tabs-horizontal-divider-background);opacity:var(--sdds-navigation-tabs-horizontal-divider-opacity);left:0;right:0;bottom:0;position:absolute}.sdds-navigation-tabs-wrapper{display:flex;flex-wrap:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none}.sdds-navigation-tabs-wrapper::-webkit-scrollbar{display:none}.sdds-navigation-tabs-forward{cursor:pointer;width:48px;height:100%;border:0;position:absolute;right:0;top:0;background-color:var(--sdds-navigation-tabs-scroll-btn-background);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sdds-navigation-tabs-forward__show{opacity:1;pointer-events:all}.sdds-navigation-tabs-forward:hover{background-color:var(--sdds-navigation-tabs-scroll-btn-background-hover);text-decoration:none}.sdds-navigation-tabs-forward:active{background-color:var(--sdds-navigation-tabs-scroll-btn-background-active)}.sdds-navigation-tabs-forward:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-navigation-tabs-back{cursor:pointer;width:48px;height:100%;border:0;position:absolute;left:0;top:0;background-color:var(--sdds-navigation-tabs-scroll-btn-background);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sdds-navigation-tabs-back__show{opacity:1;pointer-events:all}.sdds-navigation-tabs-back:hover{background-color:var(--sdds-navigation-tabs-scroll-btn-background-hover)}.sdds-navigation-tabs-back:active{background-color:var(--sdds-navigation-tabs-scroll-btn-background-active)}.sdds-navigation-tabs-back:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}::slotted(.sdds-navigation-tabs-tab){font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-navigation-tabs-tab-color);opacity:0.6;padding:26px 0;margin-right:32px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out;white-space:nowrap;background-color:transparent;border:0}::slotted(.sdds-navigation-tabs-tab)::after{content:" ";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0;margin-right:auto;height:2px;background-color:var(--sdds-navigation-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out;z-index:1}::slotted(.sdds-navigation-tabs-tab:first-child){margin-left:32px}::slotted(.sdds-navigation-tabs-tab:last-child){margin-right:32px}::slotted(.sdds-navigation-tabs-tab:hover){color:var(--sdds-navigation-tabs-tab-color-hover);opacity:1}::slotted(.sdds-navigation-tabs-tab:hover)::after{width:100%}::slotted(.sdds-navigation-tabs-tab:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px;color:var(--sdds-navigation-tabs-tab-color-focus);opacity:1}::slotted(.sdds-navigation-tabs-tab:focus)::after{width:0}::slotted(.sdds-navigation-tabs-tab-active){color:var(--sdds-navigation-tabs-tab-color-active);opacity:1}::slotted(.sdds-navigation-tabs-tab-active)::after{width:100%;background-color:var(--sdds-navigation-tabs-tab-indicator-background-active)}::slotted(.sdds-navigation-tabs-tab-active:focus)::after{width:100%}::slotted(.sdds-navigation-tabs-tab-disabled){color:var(--sdds-navigation-tabs-tab-color-disabled);opacity:var(--sdds-navigation-tabs-tab-color-opacity-disabled);pointer-events:none}';const n=class{constructor(s){t(this,s);this.navWrapperElement=null;this.componentWidth=0;this.buttonsWidth=0;this.scrollWidth=0;this.buttonWidth=0;this.tabs=[];this.showLeftScroll=false;this.showRightScroll=false;this.modeVariant=null}componentDidRender(){this.calculateButtonWidth()}componentDidLoad(){const t=new ResizeObserver((t=>{t.forEach((t=>{const s=t.contentRect.width;let a=0;const o=Array.from(this.host.children);o.forEach((t=>{const s=window.getComputedStyle(t);a+=t.clientWidth+parseFloat(s.marginLeft)+parseFloat(s.marginRight);t.classList.add("sdds-navigation-tabs-tab")}));this.componentWidth=s;this.buttonsWidth=a;this.scrollWidth=a-s;if(this.buttonsWidth>this.componentWidth){this.evaluateScrollButtons()}else{this.showLeftScroll=false;this.showRightScroll=false}}))}));t.observe(this.navWrapperElement);this.calculateButtonWidth()}calculateButtonWidth(){let t=0;const s=Array.from(this.host.children);s.forEach((s=>{const a=window.getComputedStyle(s);const o=s.clientWidth+parseFloat(a.marginLeft)+parseFloat(a.marginRight);if(o>t){t=o}}));this.buttonWidth=t}scrollRight(){const t=this.navWrapperElement.scrollLeft;this.navWrapperElement.scrollLeft=t+this.buttonWidth;this.evaluateScrollButtons()}scrollLeft(){const t=this.navWrapperElement.scrollLeft;this.navWrapperElement.scrollLeft=t-this.buttonWidth;this.evaluateScrollButtons()}evaluateScrollButtons(){const t=this.navWrapperElement.scrollLeft;if(t>=this.scrollWidth){this.showRightScroll=false}else{this.showRightScroll=true}if(t<=0){this.showLeftScroll=false}else{this.showLeftScroll=true}}render(){return s(a,{class:`${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}`},s("div",{class:"sdds-navigation-tabs"},s("div",{class:"sdds-navigation-tabs-wrapper",ref:t=>{this.navWrapperElement=t}},s("slot",null)),s("div",{class:"sdds-navigation-tabs-navigation"},s("button",{class:`sdds-navigation-tabs-forward ${this.showRightScroll?"sdds-navigation-tabs-forward-show":""}`,onClick:()=>this.scrollRight(),disabled:!this.showRightScroll},s("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z",fill:"#0D0F13"}))),s("button",{class:`sdds-navigation-tabs-back ${this.showLeftScroll?"sdds-navigation-tabs-back-show":""}`,onClick:()=>this.scrollLeft(),disabled:!this.showLeftScroll},s("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z",fill:"#0D0F13"}))))))}get host(){return o(this)}};n.style=i;export{n as sdds_navigation_tabs};
-//# sourceMappingURL=p-650d5e31.entry.js.map

package/dist/tegel/p-650d5e31.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["navigationTabsCss","NavigationTabs","this","navWrapperElement","componentWidth","buttonsWidth","scrollWidth","buttonWidth","componentDidRender","calculateButtonWidth","componentDidLoad","resizeObserver","ResizeObserver","entries","forEach","entry","contentRect","width","navButtons","Array","from","host","children","navButton","style","window","getComputedStyle","clientWidth","parseFloat","marginLeft","marginRight","classList","add","evaluateScrollButtons","showLeftScroll","showRightScroll","observe","best","scrollRight","scroll","scrollLeft","render","h","Host","class","modeVariant","ref","el","onClick","disabled","height","viewBox","fill","xmlns","d"],"sources":["./src/components/tabs/navigation-tabs/navigation-tabs.scss?tag=sdds-navigation-tabs&encapsulation=shadow","./src/components/tabs/navigation-tabs/navigation-tabs.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n\n\n.sdds-navigation-tabs {\n  @include sdds-box-sizing;\n\n  background-color: var(--sdds-navigation-tabs-background);\n  position: relative;\n  display: flex;\n\n  &::after {\n    content: ' ';\n    display: block;\n    border-bottom: 1px solid var(--sdds-navigation-tabs-horizontal-divider-background);\n    opacity: var(--sdds-navigation-tabs-horizontal-divider-opacity);\n    left: 0;\n    right: 0;\n    bottom: 0;\n    position: absolute;\n  }\n\n  &-wrapper {\n    display: flex;\n    flex-wrap: nowrap;\n    width: 100%;\n    overflow-x: scroll;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  &-forward {\n    cursor: pointer;\n    width: 48px;\n    height: 100%;\n    border: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    background-color: var(--sdds-navigation-tabs-scroll-btn-background);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    pointer-events: none;\n\n    &__show {\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:hover {\n      background-color: var(--sdds-navigation-tabs-scroll-btn-background-hover);\n      text-decoration: none;\n    }\n\n    &:active {\n      background-color: var(--sdds-navigation-tabs-scroll-btn-background-active);\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n  }\n\n  &-back {\n    cursor: pointer;\n    width: 48px;\n    height: 100%;\n    border: 0;\n    position: absolute;\n    left: 0;\n    top: 0;\n    background-color: var(--sdds-navigation-tabs-scroll-btn-background);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    pointer-events: none;\n\n    &__show {\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:hover {\n      background-color: var(--sdds-navigation-tabs-scroll-btn-background-hover);\n    }\n\n    &:active {\n      background-color: var(--sdds-navigation-tabs-scroll-btn-background-active);\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n  }\n\n  /* tab */\n  ::slotted(&-tab) {\n    //fixme: headline-07 has a line-height that is not matching old storybook\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    color: var(--sdds-navigation-tabs-tab-color);\n    opacity:0.6;\n    padding: 26px 0;\n    margin-right: 32px;\n    text-decoration: none;\n    display: block;\n    position: relative;\n    transition: color 0.15s ease-in-out;\n    white-space: nowrap;\n    background-color: transparent;\n    border: 0;\n\n    &::after {\n      content: ' ';\n      position: absolute;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      margin-left: auto;\n      width: 0;\n      margin-right: auto;\n      height: 2px;\n      background-color: var(--sdds-navigation-tabs-tab-indicator-background-hover);\n      transition: width 0.15s ease-in-out;\n      z-index: 1;\n    }\n  }\n\n  ::slotted(&-tab:first-child) {\n    margin-left: 32px;\n  }\n\n  ::slotted(&-tab:last-child) {\n    margin-right: 32px;\n  }\n\n  /* tab states */\n  ::slotted(&-tab:hover) {\n    color: var(--sdds-navigation-tabs-tab-color-hover);\n    opacity: 1;\n\n    &::after {\n      width: 100%;\n    }\n  }\n\n  ::slotted(&-tab:focus) {\n    @include sdds-focus-state;\n\n    color: var(--sdds-navigation-tabs-tab-color-focus);\n    opacity: 1;\n\n    &::after {\n      width: 0;\n    }\n  }\n\n  ::slotted(&-tab-active) {\n    color: var(--sdds-navigation-tabs-tab-color-active);\n    opacity:1;\n\n    &::after {\n      width: 100%;\n\n      background-color: var(--sdds-navigation-tabs-tab-indicator-background-active);\n    }\n  }\n\n  ::slotted(&-tab-active:focus)::after {\n    width: 100%;\n  }\n\n  ::slotted(&-tab-disabled) {\n    color: var(--sdds-navigation-tabs-tab-color-disabled);\n    opacity: var(--sdds-navigation-tabs-tab-color-opacity-disabled);\n    pointer-events: none;\n  }\n}\n","import { Component, Host, State, Element, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-navigation-tabs',\n  styleUrl: 'navigation-tabs.scss',\n  shadow: true,\n})\nexport class NavigationTabs {\n  @Element() host: HTMLElement;\n\n  @State() tabs: Array<any> = []; // array with metadata for slotted children\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n  \n   /** Variant of the tabs, primary= on white, secondary= on grey50 */\n   @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n  componentWidth: number = 0; // visible width of this component\n\n  buttonsWidth: number = 0; // total width of all nav items combined\n\n  scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n  buttonWidth: number = 0; // current calculated width of the largest nav button\n\n  componentDidRender() {\n    this.calculateButtonWidth();\n  }\n\n  componentDidLoad() {\n    const resizeObserver = new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        const componentWidth = entry.contentRect.width;\n        let buttonsWidth = 0;\n\n        const navButtons = Array.from(this.host.children);\n        navButtons.forEach((navButton: HTMLElement) => {\n          const style = window.getComputedStyle(navButton);\n          buttonsWidth +=\n            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n          navButton.classList.add('sdds-navigation-tabs-tab');\n        });\n\n        this.componentWidth = componentWidth;\n        this.buttonsWidth = buttonsWidth;\n        this.scrollWidth = buttonsWidth - componentWidth;\n\n        if (this.buttonsWidth > this.componentWidth) {\n          this.evaluateScrollButtons();\n        } else {\n          this.showLeftScroll = false;\n          this.showRightScroll = false;\n        }\n      });\n    });\n\n    resizeObserver.observe(this.navWrapperElement);\n\n    this.calculateButtonWidth();\n  }\n\n  calculateButtonWidth() {\n    let best = 0;\n    const navButtons = Array.from(this.host.children);\n    navButtons.forEach((navButton: HTMLElement) => {\n      const style = window.getComputedStyle(navButton);\n      const width =\n        navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n      if (width > best) {\n        best = width;\n      }\n    });\n\n    this.buttonWidth = best;\n  }\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  evaluateScrollButtons() {\n    const scroll = this.navWrapperElement.scrollLeft;\n\n    if (scroll >= this.scrollWidth) {\n      this.showRightScroll = false;\n    } else {\n      this.showRightScroll = true;\n    }\n\n    if (scroll <= 0) {\n      this.showLeftScroll = false;\n    } else {\n      this.showLeftScroll = true;\n    }\n  }\n\n  render() {\n    return (\n      <Host  class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n        <div class=\"sdds-navigation-tabs\">\n          <div\n            class=\"sdds-navigation-tabs-wrapper\"\n            ref={(el) => {\n              this.navWrapperElement = el as HTMLElement;\n            }}\n          >\n            <slot />\n          </div>\n          <div class=\"sdds-navigation-tabs-navigation\">\n            <button\n              class={`sdds-navigation-tabs-forward ${\n                this.showRightScroll ? 'sdds-navigation-tabs-forward-show' : ''\n              }`}\n              onClick={() => this.scrollRight()}\n              disabled={!this.showRightScroll}\n            >\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z\"\n                  fill=\"#0D0F13\"\n                ></path>\n              </svg>\n            </button>\n            <button\n              class={`sdds-navigation-tabs-back ${\n                this.showLeftScroll ? 'sdds-navigation-tabs-back-show' : ''\n              }`}\n              onClick={() => this.scrollLeft()}\n              disabled={!this.showLeftScroll}\n            >\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z\"\n                  fill=\"#0D0F13\"\n                ></path>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAoB,m7G,MCObC,EAAc,M,yBAYzBC,KAAAC,kBAAiC,KAEjCD,KAAAE,eAAyB,EAEzBF,KAAAG,aAAuB,EAEvBH,KAAAI,YAAsB,EAEtBJ,KAAAK,YAAsB,E,UAjBM,G,oBAEO,M,qBAEC,M,iBAGY,I,CAYhDC,qBACEN,KAAKO,sB,CAGPC,mBACE,MAAMC,EAAiB,IAAIC,gBAAgBC,IACzCA,EAAQC,SAASC,IACf,MAAMX,EAAiBW,EAAMC,YAAYC,MACzC,IAAIZ,EAAe,EAEnB,MAAMa,EAAaC,MAAMC,KAAKlB,KAAKmB,KAAKC,UACxCJ,EAAWJ,SAASS,IAClB,MAAMC,EAAQC,OAAOC,iBAAiBH,GACtClB,GACEkB,EAAUI,YAAcC,WAAWJ,EAAMK,YAAcD,WAAWJ,EAAMM,aAE1EP,EAAUQ,UAAUC,IAAI,2BAA2B,IAGrD9B,KAAKE,eAAiBA,EACtBF,KAAKG,aAAeA,EACpBH,KAAKI,YAAcD,EAAeD,EAElC,GAAIF,KAAKG,aAAeH,KAAKE,eAAgB,CAC3CF,KAAK+B,uB,KACA,CACL/B,KAAKgC,eAAiB,MACtBhC,KAAKiC,gBAAkB,K,IAEzB,IAGJxB,EAAeyB,QAAQlC,KAAKC,mBAE5BD,KAAKO,sB,CAGPA,uBACE,IAAI4B,EAAO,EACX,MAAMnB,EAAaC,MAAMC,KAAKlB,KAAKmB,KAAKC,UACxCJ,EAAWJ,SAASS,IAClB,MAAMC,EAAQC,OAAOC,iBAAiBH,GACtC,MAAMN,EACJM,EAAUI,YAAcC,WAAWJ,EAAMK,YAAcD,WAAWJ,EAAMM,aAE1E,GAAIb,EAAQoB,EAAM,CAChBA,EAAOpB,C,KAIXf,KAAKK,YAAc8B,C,CAGrBC,cACE,MAAMC,EAASrC,KAAKC,kBAAkBqC,WACtCtC,KAAKC,kBAAkBqC,WAAaD,EAASrC,KAAKK,YAElDL,KAAK+B,uB,CAGPO,aACE,MAAMD,EAASrC,KAAKC,kBAAkBqC,WACtCtC,KAAKC,kBAAkBqC,WAAaD,EAASrC,KAAKK,YAElDL,KAAK+B,uB,CAGPA,wBACE,MAAMM,EAASrC,KAAKC,kBAAkBqC,WAEtC,GAAID,GAAUrC,KAAKI,YAAa,CAC9BJ,KAAKiC,gBAAkB,K,KAClB,CACLjC,KAAKiC,gBAAkB,I,CAGzB,GAAII,GAAU,EAAG,CACfrC,KAAKgC,eAAiB,K,KACjB,CACLhC,KAAKgC,eAAiB,I,EAI1BO,SACE,OACEC,EAACC,EAAI,CAAEC,MAAO,GAAG1C,KAAK2C,cAAgB,KAAO,qBAAqB3C,KAAK2C,cAAe,MACpFH,EAAA,OAAKE,MAAM,wBACTF,EAAA,OACEE,MAAM,+BACNE,IAAMC,IACJ7C,KAAKC,kBAAoB4C,CAAiB,GAG5CL,EAAA,cAEFA,EAAA,OAAKE,MAAM,mCACTF,EAAA,UACEE,MAAO,gCACL1C,KAAKiC,gBAAkB,oCAAsC,KAE/Da,QAAS,IAAM9C,KAAKoC,cACpBW,UAAW/C,KAAKiC,iBAEhBO,EAAA,OACEzB,MAAM,KACNiC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,8BAENX,EAAA,oBACY,UAAS,YACT,UACVY,EAAE,4WACFF,KAAK,cAIXV,EAAA,UACEE,MAAO,6BACL1C,KAAKgC,eAAiB,iCAAmC,KAE3Dc,QAAS,IAAM9C,KAAKsC,aACpBS,UAAW/C,KAAKgC,gBAEhBQ,EAAA,OACEzB,MAAM,KACNiC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,8BAENX,EAAA,oBACY,UAAS,YACT,UACVY,EAAE,kXACFF,KAAK,gB"}

package/dist/tegel/p-7abe1300.entry.js

@@ -1,2 +0,0 @@
-import{r as s,c as t,h as e,H as i,g as r}from"./p-1b74896d.js";const h=[{truck:"L-series",driver:"Sonya Bruce",country:"Brazil",mileage:123987},{truck:"P-series",driver:"Guerra Bowman",country:"Sweden",mileage:2000852},{truck:"G-series",driver:"Ferrell Wallace",country:"Germany",mileage:564},{truck:"R-series",driver:"Cox Burris",country:"Spain",mileage:1789357},{truck:"S-series",driver:"Montgomery Cervantes",country:"Croatia",mileage:65},{truck:"L-series",driver:"Sheryl Nielsen",country:"Greece",mileage:365784},{truck:"G-series",driver:"Benton Gomez",country:"France",mileage:80957}];const a=":host,sdds-table-body{box-sizing:border-box;display:table-row-group}:host *,sdds-table-body *{box-sizing:border-box}:host .sdds-table__info-message,sdds-table-body .sdds-table__info-message{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--sdds-data-table-color);padding:var(--sdds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}";const o=["enableMultiselect","enableExpandableRows"];const l=class{constructor(e){s(this,e);this.sortingSwitcherEvent=t(this,"sortingSwitcherEvent",7);this.updateBodyCheckboxesEvent=t(this,"updateBodyCheckboxesEvent",7);this.updateMainCheckboxEvent=t(this,"updateMainCheckboxEvent",7);this.uncheckAll=()=>{this.mainCheckboxStatus=false;this.updateMainCheckboxEvent.emit([this.tableId,this.mainCheckboxStatus]);this.updateBodyCheckboxesEvent.emit([this.tableId,this.mainCheckboxStatus])};this.selectedDataExporter=()=>{const s=this.host.getElementsByClassName("sdds-table__row--selected");this.multiselectArray=[];for(let t=0;t<s.length;t++){const e=s[t].getElementsByTagName("sdds-body-cell");const i={};for(let s=0;s<e.length;s++){const t=e[s].getAttribute("cell-key");const r=e[s].getAttribute("cell-value");i[t]=r}this.multiselectArray.push(i)}this.multiselectArrayJSON=JSON.stringify(this.multiselectArray)};this.bodyCheckBoxClicked=()=>{const s=this.host.getElementsByClassName("sdds-table__row").length;const t=this.host.getElementsByClassName("sdds-table__row--selected").length;this.mainCheckboxStatus=s===t;this.updateMainCheckboxEvent.emit([this.tableId,this.mainCheckboxStatus]);this.selectedDataExporter()};this.disableFilteringFunction=false;this.disableSortingFunction=false;this.bodyData=undefined;this.enableDummyData=false;this.dummyData=JSON.stringify(h);this.rowsPerPage=1;this.enableMultiselect=false;this.enablePaginationTableBody=false;this.enableExpandableRows=true;this.innerBodyData=[];this.bodyDataManipulated=[];this.bodyDataOriginal=[];this.multiselectArray=[];this.multiselectArrayJSON=undefined;this.mainCheckboxStatus=false;this.columnsNumber=0;this.disableAllSorting=false;this.numberOfPages=0;this.paginationValue=1;this.tempPaginationDisable=false;this.showNoResultsMessage=false;this.tableId=""}arrayDataWatcher(s){if(typeof s==="string"){this.innerBodyData=JSON.parse(s)}else{this.innerBodyData=s}this.bodyDataManipulated=[...this.innerBodyData];this.bodyDataOriginal=[...this.innerBodyData]}tablePropsChangedEventListener(s){if(this.tableId===s.detail.tableId){s.detail.changed.filter((s=>o.includes(s))).forEach((t=>{if(typeof this[t]==="undefined"){throw new Error(`Table prop is not supported: ${t}`)}this[t]=s.detail[t]}))}}static compareValues(s,t="asc"){return function e(i,r){if(!i.hasOwnProperty(s)||!r.hasOwnProperty(s)){return 0}const h=typeof i[s]==="string"?i[s].toUpperCase():i[s];const a=typeof r[s]==="string"?r[s].toUpperCase():r[s];let o=0;if(h>a){o=1}else if(h<a){o=-1}return t==="desc"?o*-1:o}}sortData(s,t){if(!this.disableSortingFunction){if(this.enableMultiselect){this.uncheckAll()}this.bodyDataManipulated=[...this.bodyDataManipulated];this.bodyDataManipulated.sort(l.compareValues(s,t))}}updateOptionsContent(s){const[t,e,i]=s.detail;if(this.tableId===t){this.sortData(e,i)}}headCheckboxListener(s){if(this.tableId===s.detail[0]){[,this.mainCheckboxStatus]=s.detail;this.selectedDataExporter()}}bodyCheckboxListener(){this.bodyCheckBoxClicked()}searchFunction(s){if(!this.disableFilteringFunction){const t=this.host.querySelectorAll("sdds-table-body-row");if(s.length>0){if(this.enablePaginationTableBody){this.tempPaginationDisable=true}t.forEach((t=>{const e=t.querySelectorAll("sdds-body-cell");const i=[];e.forEach((s=>{const t=s.getAttribute("cell-value").toLowerCase();i.push(t)}));const r=i.find((t=>t.includes(s)));if(r){t.classList.remove("sdds-table__row--hidden")}else{t.classList.add("sdds-table__row--hidden")}}));this.disableAllSorting=true;this.sortingSwitcherEvent.emit([this.tableId,this.disableAllSorting]);const e=this.host.querySelectorAll(".sdds-table__row--hidden");this.showNoResultsMessage=e.length===t.length}else{if(this.enablePaginationTableBody){this.tempPaginationDisable=false}if(this.enablePaginationTableBody);else{t.forEach((s=>{s.classList.remove("sdds-table__row--hidden")}))}this.disableAllSorting=false;this.sortingSwitcherEvent.emit([this.tableId,this.disableAllSorting])}}}tableFilteringTermListener(s){if(this.tableId===s.detail[0]){this.searchFunction(s.detail[1])}}connectedCallback(){this.tableEl=this.host.closest("sdds-table");this.tableId=this.tableEl.tableId}componentWillLoad(){o.forEach((s=>{this[s]=this.tableEl[s]}));if(this.enableDummyData){this.bodyData=this.dummyData}else if(this.bodyData){this.arrayDataWatcher(this.bodyData)}}componentWillRender(){const s=this.host.parentElement.querySelector("sdds-table-header").children.length;if(this.enableMultiselect||this.enableExpandableRows){this.columnsNumber=s+1}else{this.columnsNumber=s}}render(){return e(i,{"data-selected-rows":this.multiselectArrayJSON},this.bodyDataManipulated.map((s=>e("sdds-table-body-row",null,Object.keys(s).map((t=>e("sdds-body-cell",{"cell-key":t,"cell-value":s[t]})))))),this.showNoResultsMessage&&e("tr",null,e("td",{class:"sdds-table__info-message",colSpan:this.columnsNumber},"Unfortunately, no data matches your search term 😕")),e("slot",null))}get host(){return r(this)}static get watchers(){return{bodyData:["arrayDataWatcher"]}}};l.style=a;export{l as sdds_table_body};
-//# sourceMappingURL=p-7abe1300.entry.js.map

package/dist/tegel/p-7abe1300.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tableBodyCss","relevantTableProps","TableBody","this","uncheckAll","mainCheckboxStatus","updateMainCheckboxEvent","emit","tableId","updateBodyCheckboxesEvent","selectedDataExporter","selectedRows","host","getElementsByClassName","multiselectArray","j","length","rowCells","getElementsByTagName","selectedObject","i","currentCellKey","getAttribute","currentCellValue","push","multiselectArrayJSON","JSON","stringify","bodyCheckBoxClicked","numberOfRows","numberOfRowsSelected","dummyData","arrayDataWatcher","newValue","innerBodyData","parse","bodyDataManipulated","bodyDataOriginal","tablePropsChangedEventListener","event","detail","changed","filter","changedProp","includes","forEach","Error","static","key","order","innerSort","a","b","hasOwnProperty","varA","toUpperCase","varB","comparison","sortData","keyValue","sortingDirection","disableSortingFunction","enableMultiselect","sort","compareValues","updateOptionsContent","receivedID","receivedKeyValue","receivedSortingDirection","headCheckboxListener","bodyCheckboxListener","searchFunction","searchTerm","disableFilteringFunction","dataRowsFiltering","querySelectorAll","enablePaginationTableBody","tempPaginationDisable","item","cells","cellValuesArray","cellItem","cellValue","toLowerCase","matchCounter","find","element","classList","remove","add","disableAllSorting","sortingSwitcherEvent","dataRowsHidden","showNoResultsMessage","tableFilteringTermListener","connectedCallback","tableEl","closest","componentWillLoad","tablePropName","enableDummyData","bodyData","componentWillRender","headerColumnsNo","parentElement","querySelector","children","enableExpandableRows","columnsNumber","render","h","Host","map","row","Object","keys","cellData","class","colSpan"],"sources":["./src/components/data-table/table-body/table-body.scss?tag=sdds-table-body","./src/components/data-table/table-body/table-body.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host,\nsdds-table-body {\n  @include sdds-box-sizing;\n\n  display: table-row-group;\n\n  .sdds-table__info-message {\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    display: table-cell;\n    box-sizing: border-box;\n    color: var(--sdds-data-table-color);\n    padding: var(--sdds-spacing-element-16);\n    min-width: 192px;\n    vertical-align: top;\n    background-color: transparent;\n    transition: background-color 200ms ease;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport dummyData from './dummy-data.json';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n  'enableMultiselect',\n  'enableExpandableRows',\n];\n\n@Component({\n  tag: 'sdds-table-body',\n  styleUrl: 'table-body.scss',\n  shadow: false,\n})\nexport class TableBody {\n  /** Disables inbuilt filtering logic, leaving user an option to create own filter functionality while listening to events from sdds-table-toolbar component for search term */\n  @Prop() disableFilteringFunction: boolean = false;\n\n  /** Disables inbuilt sorting logic, leaving user an option to create own sorting functionality while listening to events from sdds-header-cell component for sorting */\n  @Prop() disableSortingFunction: boolean = false;\n\n  /** Prop to pass JSON string which enables automatic rendering of table rows and cells  */\n  @Prop() bodyData: any;\n\n  /** Prop for showcase of rendering JSON in body-data, just for presentation purposes */\n  @Prop() enableDummyData: boolean = false;\n\n  @State() dummyData: any = JSON.stringify(dummyData);\n\n  @Element() host: HTMLElement;\n\n  @State() rowsPerPage: number = 1;\n\n  @State() enableMultiselect: boolean = false;\n\n  @State() enablePaginationTableBody: boolean = false;\n\n  @State() enableExpandableRows: boolean = true;\n\n  @State() innerBodyData = [];\n\n  @State() bodyDataManipulated = [];\n\n  @State() bodyDataOriginal = [];\n\n  @State() multiselectArray = [];\n\n  @State() multiselectArrayJSON: string;\n\n  @State() mainCheckboxStatus: boolean = false;\n\n  @State() columnsNumber: number = 0;\n\n  @State() disableAllSorting: boolean = false;\n\n  @State() numberOfPages: number = 0;\n\n  @State() paginationValue: number = 1;\n\n  @State() tempPaginationDisable: boolean = false;\n\n  @State() showNoResultsMessage: boolean = false;\n\n  @State() tableId: string = '';\n\n  tableEl: HTMLSddsTableElement;\n\n  @Watch('bodyData')\n  arrayDataWatcher(newValue: string) {\n    if (typeof newValue === 'string') {\n      this.innerBodyData = JSON.parse(newValue);\n    } else {\n      this.innerBodyData = newValue;\n    }\n    this.bodyDataManipulated = [...this.innerBodyData];\n    this.bodyDataOriginal = [...this.innerBodyData];\n  }\n\n  /** Event that sends unique table identifier and enable/disable status for sorting functionality */\n  @Event({\n    eventName: 'sortingSwitcherEvent',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sortingSwitcherEvent: EventEmitter<any>;\n\n  /** Sends unique table identifier and mainCheckbox status to all rows when multiselect feature is enabled */\n  @Event({\n    eventName: 'updateBodyCheckboxesEvent',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  updateBodyCheckboxesEvent: EventEmitter<any>;\n\n  /** Sends unique table identifier and status if mainCheckbox should change its state based on selection status of single rows when multiselect feature is used */\n  @Event({\n    eventName: 'updateMainCheckboxEvent',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  updateMainCheckboxEvent: EventEmitter<any>;\n\n  @Listen('tablePropsChangedEvent', { target: 'body' })\n  tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  static compareValues(key, order = 'asc') {\n    return function innerSort(a, b) {\n      // eslint-disable-next-line no-prototype-builtins\n      if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {\n        // property doesn't exist on either object\n        return 0;\n      }\n\n      const varA = typeof a[key] === 'string' ? a[key].toUpperCase() : a[key];\n      const varB = typeof b[key] === 'string' ? b[key].toUpperCase() : b[key];\n\n      let comparison = 0;\n      if (varA > varB) {\n        comparison = 1;\n      } else if (varA < varB) {\n        comparison = -1;\n      }\n      return order === 'desc' ? comparison * -1 : comparison;\n    };\n  }\n\n  uncheckAll = () => {\n    this.mainCheckboxStatus = false;\n    this.updateMainCheckboxEvent.emit([this.tableId, this.mainCheckboxStatus]);\n    this.updateBodyCheckboxesEvent.emit([this.tableId, this.mainCheckboxStatus]);\n  };\n\n  sortData(keyValue, sortingDirection) {\n    if (!this.disableSortingFunction) {\n      if (this.enableMultiselect) {\n        // Uncheck all checkboxes as state of checkbox is lost on sorting. Do it only in case multiSelect is True.\n        this.uncheckAll();\n      }\n\n      // use spread operator to make enable sorting and modifying array, same as using .slice()\n      this.bodyDataManipulated = [...this.bodyDataManipulated];\n      this.bodyDataManipulated.sort(TableBody.compareValues(keyValue, sortingDirection));\n    }\n  }\n\n  // Listen to sortColumnData from data-table-header-element\n  @Listen('sortColumnDataEvent', { target: 'body' })\n  updateOptionsContent(event: CustomEvent<any>) {\n    const [receivedID, receivedKeyValue, receivedSortingDirection] = event.detail;\n    if (this.tableId === receivedID) {\n      this.sortData(receivedKeyValue, receivedSortingDirection);\n    }\n  }\n\n  selectedDataExporter = () => {\n    const selectedRows = this.host.getElementsByClassName('sdds-table__row--selected');\n\n    this.multiselectArray = [];\n    for (let j = 0; j < selectedRows.length; j++) {\n      const rowCells = selectedRows[j].getElementsByTagName('sdds-body-cell');\n      const selectedObject = {};\n      for (let i = 0; i < rowCells.length; i++) {\n        const currentCellKey = rowCells[i].getAttribute('cell-key');\n        const currentCellValue = rowCells[i].getAttribute('cell-value');\n        selectedObject[currentCellKey] = currentCellValue;\n      }\n      this.multiselectArray.push(selectedObject);\n    }\n    this.multiselectArrayJSON = JSON.stringify(this.multiselectArray);\n  };\n\n  @Listen('mainCheckboxSelectedEvent', { target: 'body' })\n  headCheckboxListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail[0]) {\n      [, this.mainCheckboxStatus] = event.detail;\n      this.selectedDataExporter();\n    }\n  }\n\n  bodyCheckBoxClicked = () => {\n    const numberOfRows = this.host.getElementsByClassName('sdds-table__row').length;\n\n    const numberOfRowsSelected = this.host.getElementsByClassName(\n      'sdds-table__row--selected',\n    ).length;\n\n    this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;\n\n    this.updateMainCheckboxEvent.emit([this.tableId, this.mainCheckboxStatus]);\n\n    this.selectedDataExporter();\n  };\n\n  // No need to read the value, event is here just to trigger another function\n  @Listen('bodyRowToTable', { target: 'body' })\n  bodyCheckboxListener() {\n    this.bodyCheckBoxClicked();\n  }\n\n  searchFunction(searchTerm) {\n    if (!this.disableFilteringFunction) {\n      /*\n      // Logic for filtering JSON data on all columns\n      // Really nice solution, do not delete, might be needed in future\n      // Reason to go with upper one is not to lose selected state on checkboxes\n      if (searchTerm.length > 0) {\n        this.bodyDataManipulated = this.bodyDataOriginal.filter((option) =>\n          Object.keys(option).some(\n            (key) =>\n              String(option[key] ?? '')\n                .toLowerCase()\n                .indexOf(searchTerm) >= 0\n          )\n        );\n      } else {\n        this.bodyDataManipulated = this.bodyDataOriginal;\n      }\n  */\n\n      // grab all rows in body\n      const dataRowsFiltering = this.host.querySelectorAll('sdds-table-body-row');\n\n      if (searchTerm.length > 0) {\n        if (this.enablePaginationTableBody) {\n          this.tempPaginationDisable = true;\n        }\n\n        dataRowsFiltering.forEach((item) => {\n          const cells = item.querySelectorAll('sdds-body-cell');\n          const cellValuesArray = [];\n\n          // go through cells and save cell-values in array\n          cells.forEach((cellItem) => {\n            const cellValue = cellItem.getAttribute('cell-value').toLowerCase();\n            cellValuesArray.push(cellValue);\n          });\n\n          // iterate over array of values and see if one matches search string\n          const matchCounter = cellValuesArray.find((element) => element.includes(searchTerm));\n\n          // if matches, show parent row, otherwise hide the row\n          if (matchCounter) {\n            item.classList.remove('sdds-table__row--hidden');\n          } else {\n            item.classList.add('sdds-table__row--hidden');\n          }\n        });\n\n        this.disableAllSorting = true;\n        this.sortingSwitcherEvent.emit([this.tableId, this.disableAllSorting]);\n\n        const dataRowsHidden = this.host.querySelectorAll('.sdds-table__row--hidden');\n\n        // If same, info message will be shown\n        this.showNoResultsMessage = dataRowsHidden.length === dataRowsFiltering.length;\n      } else {\n        if (this.enablePaginationTableBody) {\n          this.tempPaginationDisable = false;\n        }\n\n        // Check if pagination is ON in order to prevent showing all rows\n        if (this.enablePaginationTableBody) {\n          // TODO: EMIT PAGINATION\n        } else {\n          dataRowsFiltering.forEach((item) => {\n            item.classList.remove('sdds-table__row--hidden');\n          });\n        }\n\n        this.disableAllSorting = false;\n        this.sortingSwitcherEvent.emit([this.tableId, this.disableAllSorting]);\n      }\n    }\n  }\n\n  // Listen to tableFilteringTerm from tableToolbar component\n  @Listen('tableFilteringTerm', { target: 'body' })\n  tableFilteringTermListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail[0]) {\n      this.searchFunction(event.detail[1]);\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    if (this.enableDummyData) {\n      this.bodyData = this.dummyData;\n    } else if (this.bodyData) {\n      this.arrayDataWatcher(this.bodyData);\n    }\n  }\n\n  componentWillRender() {\n    const headerColumnsNo =\n      this.host.parentElement.querySelector('sdds-table-header').children.length;\n\n    // multiselect and expended features requires one extra column for controls...\n    if (this.enableMultiselect || this.enableExpandableRows) {\n      this.columnsNumber = headerColumnsNo + 1;\n    } else {\n      this.columnsNumber = headerColumnsNo;\n    }\n  }\n\n  render() {\n    return (\n      <Host data-selected-rows={this.multiselectArrayJSON}>\n        {this.bodyDataManipulated.map((row) => (\n          <sdds-table-body-row>\n            {Object.keys(row).map((cellData) => (\n              <sdds-body-cell cell-key={cellData} cell-value={row[cellData]}></sdds-body-cell>\n            ))}\n          </sdds-table-body-row>\n        ))}\n        {this.showNoResultsMessage && (\n          <tr>\n            <td class=\"sdds-table__info-message\" colSpan={this.columnsNumber}>\n              Unfortunately, no data matches your search term &#128533;\n            </td>\n          </tr>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/tegel/p-7e41ac2c.entry.js.map

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

package/dist/tegel/p-847f81ac.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["accordionCss","Accordion","render","h","Host","class","this","divider","modeVariant"],"sources":["./src/components/accordion/accordion.scss?tag=sdds-accordion&encapsulation=shadow","./src/components/accordion/accordion.tsx"],"sourcesContent":["@import '../../mixins/focus-state';\n@import '../../mixins/disabled-style';\n@import '../../mixins/box-sizing';\n\n:host {\n  display: block;\n  @include sdds-box-sizing;\n\n  .sdds-accordion-header-icon-start,\n  .sdds-accordion-header-icon-end {\n    position: relative;\n  }\n}\n\n:host(:focus) {\n  @include sdds-focus-state;\n\n  .sdds-accordion-item {\n    .sdds-accordion-header-icon-start,\n    .sdds-accordion-header-icon-end {\n      background-color: var(--sdds-accordion-background-focus);\n      outline: none;\n\n      &::after {\n        border-color: var(--sdds-accordion-border-focus);\n      }\n    }\n  }\n\n  .disabled {\n    @include disabledStyle;\n  }\n}\n\n:host(:active) {\n  .sdds-accordion-header-icon-start,\n  .sdds-accordion-header-icon-end {\n    background-color: var(--sdds-accordion-background-active);\n    outline: none;\n  }\n\n  .disabled {\n    @include disabledStyle;\n  }\n}\n\n:host(:last-child) {\n  border-bottom: 1px solid var(--sdds-accordion-border);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: true,\n})\nexport class Accordion {\n  /** Enable or disable divider lines between items */\n  @Prop() divider: boolean = true;\n\n  /** Set the variant of the the accordion. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  render() {\n    return (\n      <Host\n        class={`sdds-accordion ${this.divider ? 'sdds-accordion-divider' : ''} ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAe,irD,MCORC,EAAS,M,sCAEO,K,iBAGoB,I,CAE/CC,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,kBAAkBC,KAAKC,QAAU,yBAA2B,MAAMD,KAAKE,cAAgB,KAAO,qBAAqBF,KAAKE,cAAe,MAE9IL,EAAA,a"}

package/dist/tegel/p-991b5017.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tooltipCss","Tooltip","this","offsetSkidding","offsetDistance","componentDidLoad","target","_a","referenceEl","document","querySelector","selector","thisValue","popperInstance","createPopper","tooltip","placement","modifiers","name","enabled","phase","fn","state","border","options","offset","showTooltip","show","hideTooltip","addEventListener","mouseOverTooltip","disconnectedCallback","destroy","render","h","ref","el","class","text"],"sources":["./src/components/tooltip/tooltip.scss?tag=sdds-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import './tooltip-theme-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-tooltip {\n  @include sdds-box-sizing;\n\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  color: var(--sdds-tooltip-color);\n  background-color: var(--sdds-tooltip-background);\n  border-radius: 4px;\n  padding: 8px;\n  word-wrap: break-word;\n  max-width: 192px;\n  z-index: z(tooltip);\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 200ms ease-in, visibility 200ms ease-in;\n\n  &.sdds-tooltip-top-left {\n    border-radius: 0 4px 4px;\n  }\n\n  &.sdds-tooltip-top-right {\n    border-radius: 4px 0 4px 4px;\n  }\n\n  &.sdds-tooltip-bottom-right {\n    border-radius: 4px 4px 0;\n  }\n\n  &.sdds-tooltip-bottom-left {\n    border-radius: 4px 4px 4px 0;\n  }\n}\n\n.sdds-tooltip-show {\n  opacity: 1;\n  visibility: visible;\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n  tag: 'sdds-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  /** In case tooltip contains only text, no HTML, text can be passed by this prop */\n  @Prop() text: string = '';\n\n  /** The CSS-selector for an element that will trigger the tooltip */\n  @Prop() selector: string = '';\n\n  /** Element that will trigger the tooltip (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Allow mouse over tooltip. Useful when tooltip contains clickable elements like link or button. */\n  @Prop() mouseOverTooltip: boolean = false;\n\n  /** Prop in control of showing and hiding prop */\n  @Prop({ mutable: true }) show: boolean = false;\n\n  /** Placement of tooltip. */\n  @Prop() placement: Placement = 'bottom';\n\n  @State() popperInstance: Instance;\n\n  @State() target: any;\n\n  border: string;\n\n  offsetSkidding: number = 0;\n\n  offsetDistance: number = 8;\n\n  tooltip!: HTMLInputElement;\n\n  componentDidLoad() {\n    this.target = this.referenceEl ?? document.querySelector(this.selector);\n\n    const thisValue = this;\n    this.popperInstance = createPopper(this.target, this.tooltip, {\n      placement: thisValue.placement,\n      modifiers: [\n        {\n          name: 'positionCalc',\n          enabled: true,\n          phase: 'main',\n          fn({ state }) {\n            if (state.placement === 'bottom-start' || state.placement === 'right-start') {\n              thisValue.border = 'top-left';\n            } else if (state.placement === 'bottom-end' || state.placement === 'left-start') {\n              thisValue.border = 'top-right';\n            } else if (state.placement === 'top-end' || state.placement === 'left-end') {\n              thisValue.border = 'bottom-right';\n            } else if (state.placement === 'top-start' || state.placement === 'right-end') {\n              thisValue.border = 'bottom-left';\n            } else if (state.placement === 'bottom' || state.placement === 'top') {\n              thisValue.border = 'default';\n            }\n          },\n        },\n        {\n          name: 'offset',\n          options: {\n            offset: [this.offsetSkidding, this.offsetDistance],\n          },\n        },\n      ],\n    });\n\n    const showTooltip = () => {\n      this.show = true;\n    };\n\n    const hideTooltip = () => {\n      this.show = false;\n    };\n\n    // For tabbing over element\n    this.target.addEventListener('focusin', () => {\n      showTooltip();\n    });\n\n    this.target.addEventListener('focusout', () => {\n      hideTooltip();\n    });\n\n    // For hovering over element with selector\n    this.target.addEventListener('mouseenter', () => {\n      showTooltip();\n    });\n\n    this.target.addEventListener('mouseleave', () => {\n      hideTooltip();\n    });\n\n    // For hovering over tooltip itself:\n    if (this.mouseOverTooltip === true) {\n      this.tooltip.addEventListener('mouseenter', () => {\n        showTooltip();\n      });\n\n      this.tooltip.addEventListener('mouseleave', () => {\n        hideTooltip();\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    this.popperInstance?.destroy();\n  }\n\n  /* Slot on line 118 is added to support adding HTML elements to component */\n  render() {\n    return (\n      <span\n        ref={(el) => {\n          this.tooltip = el as HTMLInputElement;\n        }}\n        class={`sdds-tooltip sdds-tooltip-${this.border} ${this.show ? 'sdds-tooltip-show' : ''}`}\n      >\n        {this.text}\n        <slot />\n      </span>\n    );\n  }\n}\n"],"mappings":"+EAAA,MAAMA,EAAa,44B,MCSNC,EAAO,M,yBAyBlBC,KAAAC,eAAyB,EAEzBD,KAAAE,eAAyB,E,UAzBF,G,cAGI,G,iDAMS,M,UAGK,M,eAGV,S,oDAc/BC,mB,MACEH,KAAKI,QAASC,EAAAL,KAAKM,eAAW,MAAAD,SAAA,EAAAA,EAAIE,SAASC,cAAcR,KAAKS,UAE9D,MAAMC,EAAYV,KAClBA,KAAKW,eAAiBC,EAAaZ,KAAKI,OAAQJ,KAAKa,QAAS,CAC5DC,UAAWJ,EAAUI,UACrBC,UAAW,CACT,CACEC,KAAM,eACNC,QAAS,KACTC,MAAO,OACPC,IAAGC,MAAEA,IACH,GAAIA,EAAMN,YAAc,gBAAkBM,EAAMN,YAAc,cAAe,CAC3EJ,EAAUW,OAAS,U,MACd,GAAID,EAAMN,YAAc,cAAgBM,EAAMN,YAAc,aAAc,CAC/EJ,EAAUW,OAAS,W,MACd,GAAID,EAAMN,YAAc,WAAaM,EAAMN,YAAc,WAAY,CAC1EJ,EAAUW,OAAS,c,MACd,GAAID,EAAMN,YAAc,aAAeM,EAAMN,YAAc,YAAa,CAC7EJ,EAAUW,OAAS,a,MACd,GAAID,EAAMN,YAAc,UAAYM,EAAMN,YAAc,MAAO,CACpEJ,EAAUW,OAAS,S,IAIzB,CACEL,KAAM,SACNM,QAAS,CACPC,OAAQ,CAACvB,KAAKC,eAAgBD,KAAKE,qBAM3C,MAAMsB,EAAc,KAClBxB,KAAKyB,KAAO,IAAI,EAGlB,MAAMC,EAAc,KAClB1B,KAAKyB,KAAO,KAAK,EAInBzB,KAAKI,OAAOuB,iBAAiB,WAAW,KACtCH,GAAa,IAGfxB,KAAKI,OAAOuB,iBAAiB,YAAY,KACvCD,GAAa,IAIf1B,KAAKI,OAAOuB,iBAAiB,cAAc,KACzCH,GAAa,IAGfxB,KAAKI,OAAOuB,iBAAiB,cAAc,KACzCD,GAAa,IAIf,GAAI1B,KAAK4B,mBAAqB,KAAM,CAClC5B,KAAKa,QAAQc,iBAAiB,cAAc,KAC1CH,GAAa,IAGfxB,KAAKa,QAAQc,iBAAiB,cAAc,KAC1CD,GAAa,G,EAKnBG,uB,OACExB,EAAAL,KAAKW,kBAAc,MAAAN,SAAA,SAAAA,EAAEyB,S,CAIvBC,SACE,OACEC,EAAA,QACEC,IAAMC,IACJlC,KAAKa,QAAUqB,CAAsB,EAEvCC,MAAO,6BAA6BnC,KAAKqB,UAAUrB,KAAKyB,KAAO,oBAAsB,MAEpFzB,KAAKoC,KACNJ,EAAA,a"}

package/dist/tegel/p-9cf4bc66.entry.js

@@ -1,2 +0,0 @@
-import{r as s,c as n,h as i,H as e,g as d}from"./p-1b74896d.js";const r=":root,.sdds-mode-light{--sdds-link:var(--sdds-blue-500);--sdds-link-hover:var(--sdds-blue-400);--sdds-link-focus:var(--sdds-blue-400);--sdds-link-visited:var(--sdds-grey-900);--sdds-link-disabled:var(--sdds-grey-400)}.sdds-mode-dark{--sdds-link:var(--sdds-blue-300);--sdds-link-hover:var(--sdds-blue-400);--sdds-link-focus:var(--sdds-blue-400);--sdds-link-visited:var(--sdds-blue-400);--sdds-link-disabled:var(--sdds-grey-800)}:host(.hide){display:none;visibility:hidden}:host(.error){background-color:var(--sdds-banner-background-error)}:host(.information){background-color:var(--sdds-banner-background-info)}:host{display:flex;background-color:var(--sdds-banner-background-default);z-index:400}:host .banner-icon{padding-left:20px;padding-top:14px;padding-right:12px;color:var(--sdds-banner-prefix-default-color)}:host .banner-icon.error{color:var(--sdds-banner-prefix-error-color)}:host .banner-icon.information{color:var(--sdds-banner-prefix-info-color)}:host .banner-content{color:var(--sdds-banner-text-color);display:flex;flex-direction:column;flex-grow:1;padding:16px 0}:host .banner-content.no-icon{padding-left:16px}:host .banner-content .banner-header{font:var(--sdds-headline-06);letter-spacing:var(--sdds-headline-06-ls)}:host .banner-content .banner-subheader{margin-top:4px;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}:host .banner-content sdds-link{width:fit-content;margin-top:16px}:host .banner-close{color:var(--sdds-banner-x-color)}:host .banner-close button{padding-right:16px;padding-top:14px;background-color:transparent;border:none}:host .banner-close button:hover{cursor:pointer}:host .banner-close button:focus{outline:none}:host .banner-close button:focus sdds-icon{outline:2px solid var(--sdds-link-focus)}";const t=class{constructor(i){s(this,i);this.sddsClose=n(this,"sddsClose",7);this.handleClose=()=>{const s=this.sddsClose.emit({bannerId:this.bannerId,hidden:this.hidden});if(!s.defaultPrevented){this.hidden=true}};this.icon=undefined;this.header=undefined;this.subheader=undefined;this.linkText=undefined;this.href=undefined;this.linkTarget="_self";this.linkRel="noopener";this.type="none";this.bannerId=crypto.randomUUID();this.persistent=false;this.hidden=false}async hideBanner(){const s=this.sddsClose.emit({bannerId:this.bannerId,hidden:this.hidden});if(!s.defaultPrevented){this.hidden=true}return{bannerId:this.bannerId,hidden:true}}async showBanner(){const s=this.sddsClose.emit({bannerId:this.bannerId,hidden:this.hidden});if(!s.defaultPrevented){this.hidden=false}return{bannerId:this.bannerId,hidden:false}}connectedCallback(){if(this.type==="error"){this.icon="error"}else if(this.type==="information"){this.icon="info"}}render(){return i(e,{role:"banner","aria-hidden":`${this.hidden}`,"aria-live":this.host.getAttribute("aria-live")?this.host.getAttribute("aria-live"):"polite","aria-atomic":this.host.getAttribute("aria-atomic"),class:`${this.type} ${this.hidden?"hide":"show"}`},this.icon&&i("div",{class:`banner-icon ${this.type}`},i("sdds-icon",{name:this.icon,size:"20px"})),i("div",{class:`banner-content ${this.type} ${!this.icon?"no-icon":""}`},this.header&&i("span",{class:`banner-header`},this.header),this.subheader&&i("span",{class:`banner-subheader`},this.subheader),this.linkText&&this.href&&i("sdds-link",{"link-href":this.href,rel:this.linkRel,"link-target":this.linkTarget},this.linkText)),!this.persistent&&i("div",{class:`banner-close`},i("button",{onClick:()=>{this.handleClose()}},i("sdds-icon",{name:"cross",size:"20px"}))))}get host(){return d(this)}};t.style=r;export{t as sdds_banner};
-//# sourceMappingURL=p-9cf4bc66.entry.js.map

package/dist/tegel/p-9cf4bc66.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sddsBannerCss","SddsBanner","this","handleClose","sddsCloseEvent","sddsClose","emit","bannerId","hidden","defaultPrevented","crypto","randomUUID","async","connectedCallback","type","icon","render","h","Host","role","host","getAttribute","class","name","size","header","subheader","linkText","href","rel","linkRel","linkTarget","persistent","onClick"],"sources":["./src/components/banner/sdds-banner.scss?tag=sdds-banner&encapsulation=shadow","./src/components/banner/sdds-banner.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import '../../mixins/box-sizing';\n@import '../link/link-theme-vars.scss';\n\n:host(.hide) {\n  display: none;\n  visibility: hidden;\n}\n\n:host(.error) {\n  background-color: var(--sdds-banner-background-error);\n}\n\n:host(.information) {\n  background-color: var(--sdds-banner-background-info);\n}\n\n:host {\n  display: flex;\n  background-color: var(--sdds-banner-background-default);\n  z-index: z(banner);\n\n  .banner-icon {\n    padding-left: 20px;\n    padding-top: 14px;\n    padding-right: 12px;\n    color: var(--sdds-banner-prefix-default-color);\n\n    &.error {\n      color: var(--sdds-banner-prefix-error-color);\n    }\n\n    &.information {\n      color: var(--sdds-banner-prefix-info-color);\n    }\n  }\n\n  .banner-content {\n    color: var(--sdds-banner-text-color);\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    padding: 16px 0;\n\n    &.no-icon {\n      padding-left: 16px;\n    }\n\n    .banner-header {\n      font: var(--sdds-headline-06);\n      letter-spacing: var(--sdds-headline-06-ls);\n    }\n\n    .banner-subheader {\n      margin-top: 4px;\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n    }\n\n    sdds-link {\n      width: fit-content;\n      margin-top: 16px;\n    }\n  }\n\n  .banner-close {\n    color: var(--sdds-banner-x-color);\n\n    button {\n      padding-right: 16px;\n      padding-top: 14px;\n      background-color: transparent;\n      border: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n\n      &:focus {\n        outline: none;\n\n        sdds-icon {\n          outline: 2px solid var(--sdds-link-focus);\n        }\n      }\n    }\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Method, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-banner',\n  styleUrl: 'sdds-banner.scss',\n  shadow: true,\n})\nexport class SddsBanner {\n  /** Name of the icon for the component. For error and information type the icon is predefined. */\n  @Prop() icon: string;\n\n  /** Header text. */\n  @Prop() header: string;\n\n  /** Subheader text. */\n  @Prop() subheader: string;\n\n  /** Link text. */\n  @Prop() linkText: string;\n\n  /** Href for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() linkTarget: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n  @Prop() linkRel: string = 'noopener';\n\n  /** Type of banner */\n  @Prop() type: 'error' | 'information' | 'none' = 'none';\n\n  /** ID used for internal table functionality and events, must be unique.\n   *\n   * **NOTE**: If you're listening for banner close events you need to set this ID yourself to identify the banner, as the default ID is random and will be different every time.\n   */\n  @Prop() bannerId: string = crypto.randomUUID();\n\n  /** Removes the close button on the banner. */\n  @Prop() persistent: boolean = false;\n\n  /** Hides the banner */\n  @Prop() hidden = false;\n\n  @Element() host: HostElement;\n\n  /** Sends unique banner identifier when the close button is pressed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<{\n    bannerId: string;\n    hidden: boolean;\n  }>;\n\n  /** Hides the banner. */\n  @Method()\n  async hideBanner() {\n    const sddsCloseEvent = this.sddsClose.emit({\n      bannerId: this.bannerId,\n      hidden: this.hidden,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n    return {\n      bannerId: this.bannerId,\n      hidden: true,\n    };\n  }\n\n  /** Shows the banner */\n  @Method()\n  async showBanner() {\n    const sddsCloseEvent = this.sddsClose.emit({\n      bannerId: this.bannerId,\n      hidden: this.hidden,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = false;\n    }\n    return {\n      bannerId: this.bannerId,\n      hidden: false,\n    };\n  }\n\n  connectedCallback() {\n    if (this.type === 'error') {\n      this.icon = 'error';\n    } else if (this.type === 'information') {\n      this.icon = 'info';\n    }\n  }\n\n  handleClose = () => {\n    const sddsCloseEvent = this.sddsClose.emit({\n      bannerId: this.bannerId,\n      hidden: this.hidden,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        role=\"banner\"\n        aria-hidden={`${this.hidden}`}\n        aria-live={\n          this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite'\n        }\n        aria-atomic={this.host.getAttribute('aria-atomic')}\n        class={`${this.type} ${this.hidden ? 'hide' : 'show'}`}\n      >\n        {this.icon && (\n          <div class={`banner-icon ${this.type}`}>\n            <sdds-icon name={this.icon} size=\"20px\"></sdds-icon>\n          </div>\n        )}\n        <div class={`banner-content ${this.type} ${!this.icon ? 'no-icon' : ''}`}>\n          {this.header && <span class={`banner-header`}>{this.header}</span>}\n          {this.subheader && <span class={`banner-subheader`}>{this.subheader}</span>}\n          {this.linkText && this.href && (\n            <sdds-link link-href={this.href} rel={this.linkRel} link-target={this.linkTarget}>\n              {this.linkText}\n            </sdds-link>\n          )}\n        </div>\n        {!this.persistent && (\n          <div class={`banner-close`}>\n            <button\n              onClick={() => {\n                this.handleClose();\n              }}\n            >\n              <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n            </button>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAgB,guD,MCQTC,EAAU,M,8DA2FrBC,KAAAC,YAAc,KACZ,MAAMC,EAAiBF,KAAKG,UAAUC,KAAK,CACzCC,SAAUL,KAAKK,SACfC,OAAQN,KAAKM,SAEf,IAAKJ,EAAeK,iBAAkB,CACpCP,KAAKM,OAAS,I,kIAhF4C,Q,aAGpC,W,UAGuB,O,cAMtBE,OAAOC,a,gBAGJ,M,YAGb,K,CAkBjBC,mBACE,MAAMR,EAAiBF,KAAKG,UAAUC,KAAK,CACzCC,SAAUL,KAAKK,SACfC,OAAQN,KAAKM,SAEf,IAAKJ,EAAeK,iBAAkB,CACpCP,KAAKM,OAAS,I,CAEhB,MAAO,CACLD,SAAUL,KAAKK,SACfC,OAAQ,K,CAMZI,mBACE,MAAMR,EAAiBF,KAAKG,UAAUC,KAAK,CACzCC,SAAUL,KAAKK,SACfC,OAAQN,KAAKM,SAEf,IAAKJ,EAAeK,iBAAkB,CACpCP,KAAKM,OAAS,K,CAEhB,MAAO,CACLD,SAAUL,KAAKK,SACfC,OAAQ,M,CAIZK,oBACE,GAAIX,KAAKY,OAAS,QAAS,CACzBZ,KAAKa,KAAO,O,MACP,GAAIb,KAAKY,OAAS,cAAe,CACtCZ,KAAKa,KAAO,M,EAchBC,SACE,OACEC,EAACC,EAAI,CACHC,KAAK,SAAQ,cACA,GAAGjB,KAAKM,SAAQ,YAE3BN,KAAKkB,KAAKC,aAAa,aAAenB,KAAKkB,KAAKC,aAAa,aAAe,SAAQ,cAEzEnB,KAAKkB,KAAKC,aAAa,eACpCC,MAAO,GAAGpB,KAAKY,QAAQZ,KAAKM,OAAS,OAAS,UAE7CN,KAAKa,MACJE,EAAA,OAAKK,MAAO,eAAepB,KAAKY,QAC9BG,EAAA,aAAWM,KAAMrB,KAAKa,KAAMS,KAAK,UAGrCP,EAAA,OAAKK,MAAO,kBAAkBpB,KAAKY,SAASZ,KAAKa,KAAO,UAAY,MACjEb,KAAKuB,QAAUR,EAAA,QAAMK,MAAO,iBAAkBpB,KAAKuB,QACnDvB,KAAKwB,WAAaT,EAAA,QAAMK,MAAO,oBAAqBpB,KAAKwB,WACzDxB,KAAKyB,UAAYzB,KAAK0B,MACrBX,EAAA,yBAAsBf,KAAK0B,KAAMC,IAAK3B,KAAK4B,QAAO,cAAe5B,KAAK6B,YACnE7B,KAAKyB,YAIVzB,KAAK8B,YACLf,EAAA,OAAKK,MAAO,gBACVL,EAAA,UACEgB,QAAS,KACP/B,KAAKC,aAAa,GAGpBc,EAAA,aAAWM,KAAK,QAAQC,KAAK,W"}

package/dist/tegel/p-af6e7c14.entry.js

@@ -1,2 +0,0 @@
-import{r as l,h as s,H as e,g as t}from"./p-1b74896d.js";const i='.sdds-inline-tabs-fullbleed{box-sizing:border-box;display:flex;position:relative;}.sdds-inline-tabs-fullbleed *{box-sizing:border-box}.sdds-inline-tabs-fullbleed::after{content:" ";display:block;border-bottom:1px solid var(--sdds-inline-tabs-fullbleed-horizontal-divider-background);opacity:var(--sdds-inline-tabs-fullbleed-horizontal-divider-opacity);left:0;right:0;bottom:0;position:absolute}.sdds-inline-tabs-fullbleed-wrapper{display:flex;flex-wrap:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none}.sdds-inline-tabs-fullbleed-wrapper::-webkit-scrollbar{display:none}.sdds-inline-tabs-fullbleed--forward,.sdds-inline-tabs-fullbleed--back{cursor:pointer;width:48px;height:100%;border:0;position:absolute;right:0;top:0;background-color:var(--sdds-inline-tabs-fullbleed-scroll-btn-background);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sdds-inline-tabs-fullbleed--forward__show,.sdds-inline-tabs-fullbleed--back__show{opacity:1;pointer-events:all}.sdds-inline-tabs-fullbleed--forward:hover,.sdds-inline-tabs-fullbleed--back:hover{background-color:var(--sdds-inline-tabs-fullbleed-scroll-btn-background-hover)}.sdds-inline-tabs-fullbleed--forward:active,.sdds-inline-tabs-fullbleed--back:active{background-color:var(--sdds-inline-tabs-fullbleed-scroll-btn-background-active)}.sdds-inline-tabs-fullbleed--forward:focus,.sdds-inline-tabs-fullbleed--back:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-inline-tabs-fullbleed--forward svg,.sdds-inline-tabs-fullbleed--back svg{fill:var(--sdds-inline-tabs-scroll-btn-color)}.sdds-inline-tabs-fullbleed-centered{justify-content:center}::slotted(.sdds-inline-tabs-fullbleed--tab){font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-inline-tabs-fullbleed-tab-color);opacity:0.6;padding:16px 0;margin-right:32px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out;white-space:nowrap;text-align:left}::slotted(.sdds-inline-tabs-fullbleed--tab)::after{content:" ";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0;margin-right:auto;height:2px;background-color:var(--sdds-inline-tabs-fullbleed-tab-indicator-background-hover);transition:width 0.15s ease-in-out;z-index:1}::slotted(.sdds-inline-tabs-fullbleed--tab__active){color:var(--sdds-inline-tabs-fullbleed-tab-color-active);opacity:1}::slotted(.sdds-inline-tabs-fullbleed--tab__active)::after{width:100%;background-color:var(--sdds-inline-tabs-fullbleed-tab-indicator-background-active)}::slotted(.sdds-inline-tabs-fullbleed--tab:first-child){margin-left:32px}::slotted(.sdds-inline-tabs-fullbleed--tab:last-child){margin-right:32px}::slotted(.sdds-inline-tabs-fullbleed--tab:hover){color:var(--sdds-inline-tabs-fullbleed-tab-color-hover);opacity:1}::slotted(.sdds-inline-tabs-fullbleed--tab:hover)::after{width:100%}::slotted(.sdds-inline-tabs-fullbleed--tab:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px;color:var(--sdds-inline-tabs-fullbleed-tab-color-focus);opacity:1}::slotted(.sdds-inline-tabs-fullbleed--tab:focus)::after{width:0}::slotted(.sdds-inline-tabs-fullbleed--tab__active:focus)::after{width:100%}::slotted(.sdds-inline-tabs-fullbleed--tab__disabled){color:var(--sdds-inline-tabs-fullbleed-tab-color-disabled);pointer-events:none;opacity:var(--sdds-inline-tabs-fullbleed-tab-color-opacity-disabled)}.sdds-inline-tabs-fullbleed{background-color:var(--sdds-inline-tabs-fullbleed-tab-background)}.sdds-inline-tabs-fullbleed .sdds-inline-tabs-fullbleed--forward{background-color:var(--sdds-inline-tabs-fullbleed-tab-background)}.sdds-inline-tabs-fullbleed .sdds-inline-tabs-fullbleed--back{background-color:var(--sdds-inline-tabs-fullbleed-tab-background)}';const d=class{constructor(s){l(this,s);this.navWrapperElement=null;this.componentWidth=0;this.buttonsWidth=0;this.scrollWidth=0;this.buttonWidth=0;this.modeVariant=null;this.tabs=[];this.showLeftScroll=false;this.showRightScroll=false}componentDidRender(){this.calculateButtonWidth()}componentDidLoad(){const l=new ResizeObserver((l=>{l.forEach((l=>{const s=l.contentRect.width;let e=0;const t=Array.from(this.host.children);t.forEach((l=>{const s=window.getComputedStyle(l);e+=l.clientWidth+parseFloat(s.marginLeft)+parseFloat(s.marginRight);l.classList.add("sdds-inline-tabs-fullbleed--tab")}));this.componentWidth=s;this.buttonsWidth=e;this.scrollWidth=e-s;if(this.buttonsWidth>this.componentWidth){this.evaluateScrollButtons()}else{this.showLeftScroll=false;this.showRightScroll=false}}))}));l.observe(this.navWrapperElement);this.calculateButtonWidth()}calculateButtonWidth(){let l=0;const s=Array.from(this.host.children);s.forEach((s=>{const e=window.getComputedStyle(s);const t=s.clientWidth+parseFloat(e.marginLeft)+parseFloat(e.marginRight);if(t>l){l=t}}));this.buttonWidth=l}scrollRight(){const l=this.navWrapperElement.scrollLeft;this.navWrapperElement.scrollLeft=l+this.buttonWidth;this.evaluateScrollButtons()}scrollLeft(){const l=this.navWrapperElement.scrollLeft;this.navWrapperElement.scrollLeft=l-this.buttonWidth;this.evaluateScrollButtons()}evaluateScrollButtons(){const l=this.navWrapperElement.scrollLeft;if(l>=this.scrollWidth){this.showRightScroll=false}else{this.showRightScroll=true}if(l<=0){this.showLeftScroll=false}else{this.showLeftScroll=true}}render(){return s(e,{class:`${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}`},s("div",{class:`sdds-inline-tabs-fullbleed`},s("div",{class:"sdds-inline-tabs-fullbleed-wrapper",ref:l=>{this.navWrapperElement=l}},s("slot",null)),s("div",{class:"sdds-inline-tabs-fullbleed-navigation"},s("button",{class:`sdds-inline-tabs-fullbleed--forward ${this.showRightScroll?"sdds-inline-tabs-fullbleed--back__show":""}`,onClick:()=>this.scrollRight(),disabled:!this.showRightScroll},s("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"},s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z"}))),s("button",{class:`sdds-inline-tabs-fullbleed--back ${this.showLeftScroll?"sdds-inline-tabs-fullbleed--back__show":""}`,onClick:()=>this.scrollLeft(),disabled:!this.showLeftScroll},s("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"},s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z"}))))))}get host(){return t(this)}};d.style=i;export{d as sdds_inline_tabs_fullbleed};
-//# sourceMappingURL=p-af6e7c14.entry.js.map

package/dist/tegel/p-af6e7c14.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["inlineTabsFullbleedCss","InlineTabsFullbleed","this","navWrapperElement","componentWidth","buttonsWidth","scrollWidth","buttonWidth","componentDidRender","calculateButtonWidth","componentDidLoad","resizeObserver","ResizeObserver","entries","forEach","entry","contentRect","width","navButtons","Array","from","host","children","navButton","style","window","getComputedStyle","clientWidth","parseFloat","marginLeft","marginRight","classList","add","evaluateScrollButtons","showLeftScroll","showRightScroll","observe","best","scrollRight","scroll","scrollLeft","render","h","Host","class","modeVariant","ref","el","onClick","disabled","height","viewBox","fill","xmlns","d"],"sources":["./src/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.scss?tag=sdds-inline-tabs-fullbleed&encapsulation=shadow","./src/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n\n.sdds-inline-tabs-fullbleed {\n  @include sdds-box-sizing;\n\n  display: flex;\n  position: relative;\n\n  &::after {\n    content: ' ';\n    display: block;\n    border-bottom: 1px solid var(--sdds-inline-tabs-fullbleed-horizontal-divider-background);\n    opacity: var(--sdds-inline-tabs-fullbleed-horizontal-divider-opacity);\n    left: 0;\n    right: 0;\n    bottom: 0;\n    position: absolute;\n  }\n\n  &-wrapper {\n    display: flex;\n    flex-wrap: nowrap;\n    width: 100%;\n    overflow-x: scroll;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  &--forward,\n  &--back {\n    cursor: pointer;\n    width: 48px;\n    height: 100%;\n    border: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    pointer-events: none;\n\n    &__show {\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:hover {\n      background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background-hover);\n    }\n\n    &:active {\n      background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background-active);\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n    svg{\n      fill:var(--sdds-inline-tabs-scroll-btn-color);\n    }\n  }\n\n  &-centered {\n    justify-content: center;\n  }\n\n  /* tab */\n  ::slotted(&--tab) {\n    //fixme: headline-07 has a line-height that is not matching old storybook\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    color: var(--sdds-inline-tabs-fullbleed-tab-color);\n    opacity: 0.6;\n    padding: 16px 0;\n    margin-right: 32px;\n    text-decoration: none;\n    display: block;\n    position: relative;\n    transition: color 0.15s ease-in-out;\n    white-space: nowrap;\n    text-align: left;\n\n    &::after {\n      content: ' ';\n      position: absolute;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      margin-left: auto;\n      width: 0;\n      margin-right: auto;\n      height: 2px;\n      background-color: var(--sdds-inline-tabs-fullbleed-tab-indicator-background-hover);\n      transition: width 0.15s ease-in-out;\n      z-index: 1;\n    }\n  }\n  \n  ::slotted(&--tab__active) {\n    color: var(--sdds-inline-tabs-fullbleed-tab-color-active);\n    opacity:1;\n\n    &::after {\n      width: 100%;\n      background-color: var(--sdds-inline-tabs-fullbleed-tab-indicator-background-active);\n    }\n  }\n\n  ::slotted(&--tab:first-child) {\n    margin-left: 32px;\n  }\n\n  ::slotted(&--tab:last-child) {\n    margin-right: 32px;\n  }\n\n  /* tab states */\n  ::slotted(&--tab:hover) {\n    color: var(--sdds-inline-tabs-fullbleed-tab-color-hover);\n    opacity:1;\n\n    &::after {\n      width: 100%;\n    }\n  }\n\n  ::slotted(&--tab:focus) {\n    @include sdds-focus-state;\n\n    color: var(--sdds-inline-tabs-fullbleed-tab-color-focus);\n    opacity:1;\n    \n    &::after {\n      width: 0;\n    }\n  }\n\n  ::slotted(&--tab__active:focus)::after {\n    width: 100%;\n  }\n\n  ::slotted(&--tab__disabled) {\n    color: var(--sdds-inline-tabs-fullbleed-tab-color-disabled);\n    pointer-events: none;\n    opacity: var(--sdds-inline-tabs-fullbleed-tab-color-opacity-disabled);\n  }\n}\n\n.sdds-inline-tabs-fullbleed {\n  background-color: var(--sdds-inline-tabs-fullbleed-tab-background);\n\n  .sdds-inline-tabs-fullbleed--forward {\n    background-color: var(--sdds-inline-tabs-fullbleed-tab-background);\n  }\n\n  .sdds-inline-tabs-fullbleed--back {\n    background-color: var(--sdds-inline-tabs-fullbleed-tab-background);\n  }\n}\n","import { Component, Host, State, Element, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-inline-tabs-fullbleed',\n  styleUrl: 'inline-tabs-fullbleed.scss',\n  shadow: true,\n})\nexport class InlineTabsFullbleed {\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  @Element() host: HTMLElement;\n\n  @State() tabs: Array<any> = []; // array with metadata for slotted children\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n\n  navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n  componentWidth: number = 0; // visible width of this component\n\n  buttonsWidth: number = 0; // total width of all nav items combined\n\n  scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n  buttonWidth: number = 0; // current calculated width of the largest nav button\n\n  componentDidRender() {\n    this.calculateButtonWidth();\n  }\n\n  componentDidLoad() {\n    const resizeObserver = new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        const componentWidth = entry.contentRect.width;\n        let buttonsWidth = 0;\n\n        const navButtons = Array.from(this.host.children);\n        navButtons.forEach((navButton: HTMLElement) => {\n          const style = window.getComputedStyle(navButton);\n          buttonsWidth +=\n            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n          navButton.classList.add('sdds-inline-tabs-fullbleed--tab');\n        });\n\n        this.componentWidth = componentWidth;\n        this.buttonsWidth = buttonsWidth;\n        this.scrollWidth = buttonsWidth - componentWidth;\n\n        if (this.buttonsWidth > this.componentWidth) {\n          this.evaluateScrollButtons();\n        } else {\n          this.showLeftScroll = false;\n          this.showRightScroll = false;\n        }\n      });\n    });\n\n    resizeObserver.observe(this.navWrapperElement);\n\n    this.calculateButtonWidth();\n  }\n\n  calculateButtonWidth() {\n    let best = 0;\n    const navButtons = Array.from(this.host.children);\n    navButtons.forEach((navButton: HTMLElement) => {\n      const style = window.getComputedStyle(navButton);\n      const width =\n        navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n      if (width > best) {\n        best = width;\n      }\n    });\n\n    this.buttonWidth = best;\n  }\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  evaluateScrollButtons() {\n    const scroll = this.navWrapperElement.scrollLeft;\n\n    if (scroll >= this.scrollWidth) {\n      this.showRightScroll = false;\n    } else {\n      this.showRightScroll = true;\n    }\n\n    if (scroll <= 0) {\n      this.showLeftScroll = false;\n    } else {\n      this.showLeftScroll = true;\n    }\n  }\n\n  render() {\n    return (\n      <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n        <div class={`sdds-inline-tabs-fullbleed`}>\n          <div\n            class=\"sdds-inline-tabs-fullbleed-wrapper\"\n            ref={(el) => {\n              this.navWrapperElement = el as HTMLElement;\n            }}\n          >\n            <slot />\n          </div>\n          <div class=\"sdds-inline-tabs-fullbleed-navigation\">\n            <button\n              class={`sdds-inline-tabs-fullbleed--forward ${\n                this.showRightScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''\n              }`}\n              onClick={() => this.scrollRight()}\n              disabled={!this.showRightScroll}\n            >\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z\"\n                ></path>\n              </svg>\n            </button>\n            <button\n              class={`sdds-inline-tabs-fullbleed--back ${\n                this.showLeftScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''\n              }`}\n              onClick={() => this.scrollLeft()}\n              disabled={!this.showLeftScroll}\n            >\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z\"\n                ></path>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAyB,mqH,MCOlBC,EAAmB,M,yBAY9BC,KAAAC,kBAAiC,KAEjCD,KAAAE,eAAyB,EAEzBF,KAAAG,aAAuB,EAEvBH,KAAAI,YAAsB,EAEtBJ,KAAAK,YAAsB,E,iBAlByB,K,UAInB,G,oBAEO,M,qBAEC,K,CAYpCC,qBACEN,KAAKO,sB,CAGPC,mBACE,MAAMC,EAAiB,IAAIC,gBAAgBC,IACzCA,EAAQC,SAASC,IACf,MAAMX,EAAiBW,EAAMC,YAAYC,MACzC,IAAIZ,EAAe,EAEnB,MAAMa,EAAaC,MAAMC,KAAKlB,KAAKmB,KAAKC,UACxCJ,EAAWJ,SAASS,IAClB,MAAMC,EAAQC,OAAOC,iBAAiBH,GACtClB,GACEkB,EAAUI,YAAcC,WAAWJ,EAAMK,YAAcD,WAAWJ,EAAMM,aAE1EP,EAAUQ,UAAUC,IAAI,kCAAkC,IAG5D9B,KAAKE,eAAiBA,EACtBF,KAAKG,aAAeA,EACpBH,KAAKI,YAAcD,EAAeD,EAElC,GAAIF,KAAKG,aAAeH,KAAKE,eAAgB,CAC3CF,KAAK+B,uB,KACA,CACL/B,KAAKgC,eAAiB,MACtBhC,KAAKiC,gBAAkB,K,IAEzB,IAGJxB,EAAeyB,QAAQlC,KAAKC,mBAE5BD,KAAKO,sB,CAGPA,uBACE,IAAI4B,EAAO,EACX,MAAMnB,EAAaC,MAAMC,KAAKlB,KAAKmB,KAAKC,UACxCJ,EAAWJ,SAASS,IAClB,MAAMC,EAAQC,OAAOC,iBAAiBH,GACtC,MAAMN,EACJM,EAAUI,YAAcC,WAAWJ,EAAMK,YAAcD,WAAWJ,EAAMM,aAE1E,GAAIb,EAAQoB,EAAM,CAChBA,EAAOpB,C,KAIXf,KAAKK,YAAc8B,C,CAGrBC,cACE,MAAMC,EAASrC,KAAKC,kBAAkBqC,WACtCtC,KAAKC,kBAAkBqC,WAAaD,EAASrC,KAAKK,YAElDL,KAAK+B,uB,CAGPO,aACE,MAAMD,EAASrC,KAAKC,kBAAkBqC,WACtCtC,KAAKC,kBAAkBqC,WAAaD,EAASrC,KAAKK,YAElDL,KAAK+B,uB,CAGPA,wBACE,MAAMM,EAASrC,KAAKC,kBAAkBqC,WAEtC,GAAID,GAAUrC,KAAKI,YAAa,CAC9BJ,KAAKiC,gBAAkB,K,KAClB,CACLjC,KAAKiC,gBAAkB,I,CAGzB,GAAII,GAAU,EAAG,CACfrC,KAAKgC,eAAiB,K,KACjB,CACLhC,KAAKgC,eAAiB,I,EAI1BO,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,GAAG1C,KAAK2C,cAAgB,KAAO,qBAAqB3C,KAAK2C,cAAe,MACnFH,EAAA,OAAKE,MAAO,8BACVF,EAAA,OACEE,MAAM,qCACNE,IAAMC,IACJ7C,KAAKC,kBAAoB4C,CAAiB,GAG5CL,EAAA,cAEFA,EAAA,OAAKE,MAAM,yCACTF,EAAA,UACEE,MAAO,uCACL1C,KAAKiC,gBAAkB,yCAA2C,KAEpEa,QAAS,IAAM9C,KAAKoC,cACpBW,UAAW/C,KAAKiC,iBAEhBO,EAAA,OACEzB,MAAM,KACNiC,OAAO,KACPC,QAAQ,YACRC,KAAK,eACLC,MAAM,8BAENX,EAAA,oBACY,UAAS,YACT,UACVY,EAAE,gXAIRZ,EAAA,UACEE,MAAO,oCACL1C,KAAKgC,eAAiB,yCAA2C,KAEnEc,QAAS,IAAM9C,KAAKsC,aACpBS,UAAW/C,KAAKgC,gBAEhBQ,EAAA,OACEzB,MAAM,KACNiC,OAAO,KACPC,QAAQ,YACRC,KAAK,eACLC,MAAM,8BAENX,EAAA,oBACY,UAAS,YACT,UACVY,EAAE,wX"}