@scania/tegel 0.0.4 → 0.0.5

package/dist/components/sdds-popover-canvas.js.map

@@ -1 +1 @@
-{"file":"sdds-popover-canvas.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,oXAAoX;;MCShY,aAAa;;;;;oBAIG,EAAE;;gBAML,KAAK;qBAGE,MAAM;0BAGJ,CAAC;0BAGD,CAAC;6BAEI,KAAK;;;;EAO3C,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;GACF;EAED,gBAAgB;;IACd,IAAI,CAAC,MAAM,GAAG,MAAA,IAAI,CAAC,WAAW,mCAAI,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxE,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC;IAEnC,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,oBAAoB,EAAE;MACzE,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,SAAS,EAAE;QACT;UACE,IAAI,EAAE,QAAQ;UACd,OAAO,EAAE;YACP,MAAM,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC;WACnD;SACF;OACF;KACF,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG;MACjB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;KAClB,CAAC;IAEF,MAAM,UAAU,GAAG;MACjB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB,CAAC;IAEF,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK;MAC9C,KAAK,CAAC,eAAe,EAAE,CAAC;MAExB,IAAI,IAAI,CAAC,IAAI,EAAE;QACb,UAAU,EAAE,CAAC;OACd;WAAM;QACL,UAAU,EAAE,CAAC;OACd;KACF,CAAC,CAAC;IAEH,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK;MAC5D,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB,CAAC,CAAC;IAEH,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK;MAC5D,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB,CAAC,CAAC;GACJ;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;;;MAGxC,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;KAC9B;IACD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC;GACpC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;GAChC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,uBAAuB,IAAI,CAAC,IAAI,GAAG,0BAA0B,GAAG,EAAE,EAAE,IAC/E,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/popover-canvas/popover-canvas.scss?tag=sdds-popover-canvas&encapsulation=shadow","./src/components/popover-canvas/popover-canvas.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n@import '../../mixins/z-index';\n\n:host {\n  @include sdds-box-sizing;\n\n  min-width: 160px;\n  min-height: 160px;\n  color: var(--sdds-popover-canvas-color);\n  background-color: var(--sdds-popover-canvas-background);\n  padding: 16px;\n  box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 10%);\n  border-radius: 4px;\n  z-index: z(tooltip);\n  display: none;\n}\n\n:host(.sdds-popover-canvas-show) {\n  opacity: 1;\n  display: block;\n}\n","import { Component, Host, Element, Listen, h, Prop, State } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n  tag: 'sdds-popover-canvas',\n  styleUrl: 'popover-canvas.scss',\n  shadow: true,\n})\nexport class PopoverCanvas {\n  @Element() popoverCanvasElement!: HTMLElement;\n\n  /** The CSS-selector for an element that will trigger the popover */\n  @Prop() selector: string = '';\n\n  /** Element that will trigger the popover (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Decides if the Popover Canvas should be visible from the start */\n  @Prop() show: boolean = false;\n\n  /** Decides the placement of the Popover Canvas */\n  @Prop() placement: Placement = 'auto';\n\n  /** Sets the offset skidding */\n  @Prop() offsetSkidding: number = 0;\n\n  /** Sets the offset distance */\n  @Prop() offsetDistance: number = 8;\n\n  @State() renderedShowValue: boolean = false;\n\n  @State() popperInstance: Instance;\n\n  @State() target: any;\n\n  @Listen('mousedown', { target: 'window' })\n  handleOutsideClick() {\n    if (this.show) {\n      this.show = false;\n    }\n  }\n\n  componentDidLoad() {\n    this.target = this.referenceEl ?? document.querySelector(this.selector);\n    this.renderedShowValue = this.show;\n\n    this.popperInstance = createPopper(this.target, this.popoverCanvasElement, {\n      placement: this.placement,\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [this.offsetSkidding, this.offsetDistance],\n          },\n        },\n      ],\n    });\n\n    const showCanvas = () => {\n      this.show = true;\n    };\n\n    const hideCanvas = () => {\n      this.show = false;\n    };\n\n    this.target.addEventListener('mousedown', (event) => {\n      event.stopPropagation();\n\n      if (this.show) {\n        hideCanvas();\n      } else {\n        showCanvas();\n      }\n    });\n\n    this.popoverCanvasElement.addEventListener('mousemove', (event) => {\n      event.stopPropagation();\n    });\n\n    this.popoverCanvasElement.addEventListener('mousedown', (event) => {\n      event.stopPropagation();\n    });\n  }\n\n  componentDidRender() {\n    if (this.show && !this.renderedShowValue) {\n      // Here we update the popper position since its position is wrong\n      // before it is rendered.\n      this.popperInstance.update();\n    }\n    this.renderedShowValue = this.show;\n  }\n\n  disconnectedCallback() {\n    this.popperInstance?.destroy();\n  }\n\n  render() {\n    return (\n      <Host class={`sdds-popover-canvas ${this.show ? 'sdds-popover-canvas-show' : ''}`}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-popover-canvas.js","mappings":"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","names":[],"sources":["./src/components/popover-canvas/popover-canvas.scss?tag=sdds-popover-canvas&encapsulation=shadow","./src/components/popover-canvas/popover-canvas.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n@import '../../mixins/z-index';\n\n:host {\n  @include sdds-box-sizing;\n\n  color: var(--sdds-popover-canvas-color);\n  background-color: var(--sdds-popover-canvas-background);\n  box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 10%);\n  border-radius: 4px;\n  z-index: z(tooltip);\n  display: none;\n}\n\n:host(.sdds-popover-canvas-show) {\n  display: block;\n}\n","import { Component, Host, Element, Listen, h, Prop, State, Watch } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n  tag: 'sdds-popover-canvas',\n  styleUrl: 'popover-canvas.scss',\n  shadow: true,\n})\nexport class PopoverCanvas {\n  @Element() host!: HTMLSddsPopoverCanvasElement;\n\n  /** The CSS-selector for an element that will trigger the popover */\n  @Prop() selector: string = '';\n\n  /** Element that will trigger the popover (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Controls wether the popover is shown or not. If this is set hiding and showing\n   * will be decided by this prop and will need to be controlled from the outside.\n   */\n  @Prop() show: boolean = null;\n\n  /** Decides the placement of the Popover Canvas. See https://popper.js.org/docs/v2/constructors/#placement */\n  @Prop() placement: Placement = 'auto';\n\n  /** Sets the offset skidding */\n  @Prop() offsetSkidding: number = 0;\n\n  /** Sets the offset distance */\n  @Prop() offsetDistance: number = 8;\n\n  /** Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/ */\n  @Prop() modifiers: Object[] = [];\n\n  @State() renderedShowValue: boolean = false;\n\n  @State() popperInstance: Instance;\n\n  @State() target: any;\n\n  @State() isShown: boolean = false;\n\n  @Watch('show')\n  onShowChange(newValue: boolean) {\n    this.isShown = newValue;\n  }\n\n  @Watch('referenceEl')\n  onReferenceElChange(newValue: HTMLElement, oldValue: HTMLElement) {\n    if (newValue !== oldValue) {\n      this.popperInstance?.destroy();\n\n      if (newValue) {\n        this.initialize(newValue);\n      }\n    }\n  }\n\n  @Listen('click', { target: 'window' })\n  onAnyClick(event: MouseEvent) {\n    if (this.isShown && this.show === null) {\n      // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/\n      const isClickOutside = !event.composedPath().includes(this.host as any);\n      if (isClickOutside) {\n        this.isShown = false;\n      }\n    }\n  }\n\n  initialize = (referenceEl) => {\n    this.popperInstance = createPopper(referenceEl, this.host, {\n      placement: this.placement,\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [this.offsetSkidding, this.offsetDistance],\n          },\n        },\n        ...this.modifiers,\n      ],\n    });\n\n    if (this.show === null) {\n      referenceEl.addEventListener('click', (event) => {\n        event.stopPropagation();\n        if (this.isShown) {\n          this.isShown = false;\n        } else {\n          this.isShown = true;\n        }\n      });\n    }\n  };\n\n  connectedCallback() {\n    if (this.show !== null) {\n      this.isShown = this.show;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.selector || this.referenceEl) {\n      const referenceEl = this.referenceEl ?? document.querySelector(this.selector);\n\n      if (referenceEl) {\n        this.initialize(referenceEl);\n      } else {\n        console.error(\n          `Could not initialize popover-canvas: element with selector '${this.selector}' not found.`,\n        );\n      }\n    }\n  }\n\n  componentDidRender() {\n    if (this.isShown && !this.renderedShowValue) {\n      // Here we update the popper position since its position is wrong\n      // before it is rendered.\n      this.popperInstance.update();\n    }\n    this.renderedShowValue = this.isShown;\n  }\n\n  disconnectedCallback() {\n    this.popperInstance?.destroy();\n  }\n\n  render() {\n    return (\n      <Host class={`sdds-popover-canvas ${this.isShown ? 'sdds-popover-canvas-show' : ''}`}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-radio-button.js

@@ -15,7 +15,11 @@ const RadioButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.disabled = false;
   }
   render() {
-    return (h("div", { class: "sdds-radio-button" }, h("input", { class: "sdds-form-input", type: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, "aria-describedby": this.host.getAttribute('aria-describedby'), required: this.required, disabled: this.disabled, onChange: () => {
+    return (h("div", { class: "sdds-radio-button" }, h("input", { class: "sdds-form-input", type: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked,
+      // REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMENT HAS BEEN MADE!
+      // aria-labelledby={this.ariaLabelledBy} 
+      // aria-describedby={this.host.getAttribute('aria-describedby')}
+      required: this.required, disabled: this.disabled, onChange: () => {
         this.sddsChange.emit({
           radioId: this.radioId,
           value: this.value,

package/dist/components/sdds-radio-button.js.map

@@ -1 +1 @@
-{"file":"sdds-radio-button.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,smKAAsmK;;MCSznK,WAAW;;;;;;;mBAiBI,MAAM,CAAC,UAAU,EAAE;mBAGD,KAAK;oBAGrB,KAAK;oBAGL,KAAK;;EAgBjC,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,mBAAmB,IAC5B,aACA,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,kBACP,IAAI,CAAC,OAAO,sBAIR,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAC5D,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE;QACR,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;UAClB,OAAO,EAAE,IAAI,CAAC,OAAO;UACrB,KAAK,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CAAA;OACH,GAAI,EACL,aAAO,OAAO,EAAE,IAAI,CAAC,OAAO,IAC1B,eAAa,CACP,CACF,EACR;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/radio-button/radio-button-component.scss?tag=sdds-radio-button&encapsulation=scoped","./src/components/radio-button/radio-button.tsx"],"sourcesContent":["@import './radio-button-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-radio-button {\n  @include sdds-box-sizing;\n\n  display: flex;\n  align-items: center;\n  margin-left: -4px;\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-radio-button-color);\n\n  .sdds-form-input[type='radio'] {\n    appearance: none;\n    outline: none;\n    margin: 0;\n    border: 0;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    position: relative;\n    cursor: pointer;\n\n    + label {\n      padding: var(--sdds-spacing-element-4) 0 var(--sdds-spacing-element-4)\n        var(--sdds-spacing-element-4);\n      cursor: pointer;\n    }\n\n    &::before,\n    &::after {\n      content: '';\n      position: absolute;\n      border-radius: 50%;\n      box-sizing: border-box;\n    }\n\n    &::before {\n      width: 24px;\n      height: 24px;\n      left: 0;\n      top: 0;\n    }\n\n    &::after {\n      border: 1px solid var(--sdds-radio-button-interaction-01);\n      background-color: var(--sdds-radio-button-interaction-02);\n      width: 16px;\n      height: 16px;\n      left: 4px;\n      top: 4px;\n    }\n\n    &:hover {\n      &::before {\n        background-color: var(--sdds-radio-button-background-hover);\n        opacity: 0.12;\n      }\n    }\n\n    &:focus {\n      &::before {\n        background-color: var(--sdds-radio-button-background-focus);\n        opacity: 0.24;\n        animation: rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;\n      }\n    }\n\n    &:disabled,\n    &.disabled {\n      cursor: not-allowed;\n\n      &::after {\n        border-color: var(--sdds-radio-button-border-color-disabled-after);\n        background-color: var(--sdds-radio-button-interaction-02);\n      }\n\n      + label {\n        color: var(--sdds-radio-button-disabled);\n        cursor: not-allowed;\n      }\n\n      &:hover {\n        &::before {\n          display: none;\n          opacity: 1;\n        }\n      }\n    }\n  }\n\n  .sdds-form-input[type='radio']:checked {\n    &::after {\n      border: 4px solid var(--sdds-radio-button-interaction-01);\n    }\n\n    &:disabled,\n    &.disabled {\n      &:hover::before,\n      &::before {\n        display: block;\n        width: 16px;\n        height: 16px;\n        left: 4px;\n        top: 4px;\n        border: 1px solid var(--sdds-radio-button-color-disabled-before);\n        box-sizing: content-box;\n      }\n\n      &::after {\n        border: 4px solid var(--sdds-radio-button-interaction-02);\n        background-color: var(--sdds-radio-button-color-disabled-after);\n        left: calc(4px + 1px);\n        top: calc(4px + 1px);\n      }\n    }\n  }\n\n  @keyframes rb-focus {\n    0% {\n      transform: scale(0);\n      opacity: 0;\n    }\n\n    100% {\n      transform: scale(1);\n      opacity: 0.24;\n    }\n  }\n}\n","import { Component, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-radio-button',\n  styleUrl: 'radio-button-component.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class RadioButton {\n\n  /** Name of radio button, used for reference. */\n  @Prop() name: string;\n\n  /** Value of input. */\n  @Prop() value: string;\n\n  /** REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMET HAS BEEN MADE! */\n\n  /** Label mainly used for accesibility tools. */\n  // @Prop() ariaLabelledBy: string;\n\n  /** Label mainly used for accesibility tools. */\n  // @Prop() ariaDescribedBy: string;\n\n  /** Unique radio button identifier. */\n  @Prop() radioId: string = crypto.randomUUID();\n  \n  /** Decides if the radio button is checked or not. */\n  @Prop({ reflect: true }) checked: boolean = false;\n  \n  /** Decides if the radio button is required or not. */\n  @Prop() required: boolean = false;\n  \n  /** Decides if the radio button is disabled or not. */\n  @Prop() disabled: boolean = false;\n\n  @Element() host: HostElement;\n\n  /** Sends unique radio button identifier and status when it is checked. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    radioId: string;\n    value: string;\n  }>;\n\n  render() {\n    return (\n      <div class=\"sdds-radio-button\">\n        <input \n        class=\"sdds-form-input\" \n        type=\"radio\" \n        name={this.name}\n        id={this.radioId} \n        value={this.value}\n        checked={this.checked} \n        aria-checked={this.checked} \n\n        // REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMENT HAS BEEN MADE!\n        // aria-labelledby={this.ariaLabelledBy} \n        aria-describedby={this.host.getAttribute('aria-describedby')}\n        required={this.required} \n        disabled={this.disabled}\n        onChange={() => {\n          this.sddsChange.emit({\n             radioId: this.radioId,\n             value: this.value,\n          })\n        }} />\n        <label htmlFor={this.radioId}>\n          <slot></slot>\n        </label>\n        </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-radio-button.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,smKAAsmK;;MCSznK,WAAW;;;;;;;mBAiBI,MAAM,CAAC,UAAU,EAAE;mBAGD,KAAK;oBAGrB,KAAK;oBAGL,KAAK;;EAgBjC,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,mBAAmB,IAC5B,aACA,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,kBACP,IAAI,CAAC,OAAO;;;;MAK1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE;QACR,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;UAClB,OAAO,EAAE,IAAI,CAAC,OAAO;UACrB,KAAK,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CAAA;OACH,GAAI,EACL,aAAO,OAAO,EAAE,IAAI,CAAC,OAAO,IAC1B,eAAa,CACP,CACF,EACR;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/radio-button/radio-button-component.scss?tag=sdds-radio-button&encapsulation=scoped","./src/components/radio-button/radio-button.tsx"],"sourcesContent":["@import './radio-button-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-radio-button {\n  @include sdds-box-sizing;\n\n  display: flex;\n  align-items: center;\n  margin-left: -4px;\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-radio-button-color);\n\n  .sdds-form-input[type='radio'] {\n    appearance: none;\n    outline: none;\n    margin: 0;\n    border: 0;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    position: relative;\n    cursor: pointer;\n\n    + label {\n      padding: var(--sdds-spacing-element-4) 0 var(--sdds-spacing-element-4)\n        var(--sdds-spacing-element-4);\n      cursor: pointer;\n    }\n\n    &::before,\n    &::after {\n      content: '';\n      position: absolute;\n      border-radius: 50%;\n      box-sizing: border-box;\n    }\n\n    &::before {\n      width: 24px;\n      height: 24px;\n      left: 0;\n      top: 0;\n    }\n\n    &::after {\n      border: 1px solid var(--sdds-radio-button-interaction-01);\n      background-color: var(--sdds-radio-button-interaction-02);\n      width: 16px;\n      height: 16px;\n      left: 4px;\n      top: 4px;\n    }\n\n    &:hover {\n      &::before {\n        background-color: var(--sdds-radio-button-background-hover);\n        opacity: 0.12;\n      }\n    }\n\n    &:focus {\n      &::before {\n        background-color: var(--sdds-radio-button-background-focus);\n        opacity: 0.24;\n        animation: rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;\n      }\n    }\n\n    &:disabled,\n    &.disabled {\n      cursor: not-allowed;\n\n      &::after {\n        border-color: var(--sdds-radio-button-border-color-disabled-after);\n        background-color: var(--sdds-radio-button-interaction-02);\n      }\n\n      + label {\n        color: var(--sdds-radio-button-disabled);\n        cursor: not-allowed;\n      }\n\n      &:hover {\n        &::before {\n          display: none;\n          opacity: 1;\n        }\n      }\n    }\n  }\n\n  .sdds-form-input[type='radio']:checked {\n    &::after {\n      border: 4px solid var(--sdds-radio-button-interaction-01);\n    }\n\n    &:disabled,\n    &.disabled {\n      &:hover::before,\n      &::before {\n        display: block;\n        width: 16px;\n        height: 16px;\n        left: 4px;\n        top: 4px;\n        border: 1px solid var(--sdds-radio-button-color-disabled-before);\n        box-sizing: content-box;\n      }\n\n      &::after {\n        border: 4px solid var(--sdds-radio-button-interaction-02);\n        background-color: var(--sdds-radio-button-color-disabled-after);\n        left: calc(4px + 1px);\n        top: calc(4px + 1px);\n      }\n    }\n  }\n\n  @keyframes rb-focus {\n    0% {\n      transform: scale(0);\n      opacity: 0;\n    }\n\n    100% {\n      transform: scale(1);\n      opacity: 0.24;\n    }\n  }\n}\n","import { Component, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-radio-button',\n  styleUrl: 'radio-button-component.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class RadioButton {\n\n  /** Name of radio button, used for reference. */\n  @Prop() name: string;\n\n  /** Value of input. */\n  @Prop() value: string;\n\n  /** REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMET HAS BEEN MADE! */\n\n  /** Label mainly used for accesibility tools. */\n  // @Prop() ariaLabelledBy: string;\n\n  /** Label mainly used for accesibility tools. */\n  // @Prop() ariaDescribedBy: string;\n\n  /** Unique radio button identifier. */\n  @Prop() radioId: string = crypto.randomUUID();\n  \n  /** Decides if the radio button is checked or not. */\n  @Prop({ reflect: true }) checked: boolean = false;\n  \n  /** Decides if the radio button is required or not. */\n  @Prop() required: boolean = false;\n  \n  /** Decides if the radio button is disabled or not. */\n  @Prop() disabled: boolean = false;\n\n  @Element() host: HostElement;\n\n  /** Sends unique radio button identifier and status when it is checked. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    radioId: string;\n    value: string;\n  }>;\n\n  render() {\n    return (\n      <div class=\"sdds-radio-button\">\n        <input \n        class=\"sdds-form-input\" \n        type=\"radio\" \n        name={this.name}\n        id={this.radioId} \n        value={this.value}\n        checked={this.checked} \n        aria-checked={this.checked} \n\n        // REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMENT HAS BEEN MADE!\n        // aria-labelledby={this.ariaLabelledBy} \n        // aria-describedby={this.host.getAttribute('aria-describedby')}\n        required={this.required} \n        disabled={this.disabled}\n        onChange={() => {\n          this.sddsChange.emit({\n             radioId: this.radioId,\n             value: this.value,\n          })\n        }} />\n        <label htmlFor={this.radioId}>\n          <slot></slot>\n        </label>\n        </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-slider.js

@@ -37,15 +37,15 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.max = '100';
     this.ticks = '0';
     this.showTickNumbers = false;
-    this.tooltip = null;
-    this.disabled = null;
-    this.readOnly = null;
-    this.controls = null;
-    this.input = null;
+    this.tooltip = false;
+    this.disabled = false;
+    this.readOnly = false;
+    this.controls = false;
+    this.input = false;
     this.step = '1';
     this.name = '';
-    this.size = '';
-    this.snap = null;
+    this.scrubberSize = 'lg';
+    this.snap = false;
     this.sliderId = crypto.randomUUID();
   }
   /** Public method to re-initialise the slider if some configuration props are changed */
@@ -307,7 +307,7 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.useInput = true;
     }
     this.useSmall = false;
-    if (this.size === 'sm') {
+    if (this.scrubberSize === 'sm') {
       this.useSmall = true;
     }
     this.useSnapping = false;
@@ -364,7 +364,7 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "input": [4],
     "step": [1],
     "name": [1],
-    "size": [1],
+    "scrubberSize": [1, "scrubber-size"],
     "snap": [4],
     "sliderId": [1, "slider-id"],
     "reset": [64]

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

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

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

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

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

@@ -1 +1 @@
-{"file":"sdds-table-body-row-expandable.js","mappings":"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","names":[],"sources":["./src/components/data-table/table-body-row-expandable/table-body-row-expandable.scss?tag=sdds-table-body-row-expandable&encapsulation=shadow","./src/components/data-table/table-body-row-expandable/table-body-row-expandable.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n@import '../../../mixins/focus-state';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: contents;\n\n  .sdds-table__row,\n  .sdds-table__row-extend {\n    display: table-row;\n    border-bottom: 1px solid var(--sdds-data-table-divider);\n    background-color: var(--sdds-data-table-body-row-background);\n    transition: background-color 200ms ease;\n    color: var(--sdds-data-table-color);\n  }\n\n  .sdds-table__row:hover,\n  .sdds-table__row-extend:hover {\n    background-color: var(--sdds-data-table-body-row-background-hover);\n  }\n\n  .sdds-table__expand-control-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 46px;\n    cursor: pointer;\n    padding: 0 16px;\n    position: relative;\n\n    .sdds-table__expand-input {\n      all: unset;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      position: absolute;\n      cursor: pointer;\n\n      &:focus {\n        @include sdds-focus-state;\n      }\n    }\n\n    .sdds-expendable-row-icon {\n      height: 16px;\n      width: 16px;\n      transition: transform 200ms ease;\n      transform: rotate(0);\n    }\n  }\n\n  .sdds-table__row-expand {\n    display: none;\n    transition: background-color 200ms ease;\n\n    .sdds-table__cell-expand {\n      padding: 16px 16px 16px 66px;\n      color: var(--sdds-data-table-color);\n    }\n  }\n}\n\n:host(.sdds-table__row-expand--active) {\n  .sdds-table__row {\n    background-color: var(--sdds-data-table-body-row-background-selected);\n  }\n\n  .sdds-table__expand-control-container {\n    .sdds-expendable-row-icon {\n      transform: rotate(180deg);\n    }\n  }\n\n  .sdds-table__row-expand {\n    background-color: var(--sdds-data-table-body-row-background-selected);\n    display: table-row;\n  }\n}\n\n// test\n:host(.sdds-table__compact) {\n  .sdds-table__expand-control-container {\n    height: 30px;\n  }\n\n  .sdds-table__row-expand {\n    .sdds-table__cell-expand {\n      padding: 8px 16px 8px 66px;\n    }\n  }\n}\n\n:host(.sdds-table--divider) {\n  .sdds-table__cell--expand {\n    border-right: 1px solid var(--sdds-data-table-divider);\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n  'verticalDividers',\n  'compactDesign',\n  'noMinWidth',\n  'modeVariant',\n];\n@Component({\n  tag: 'sdds-table-body-row-expandable',\n  styleUrl: 'table-body-row-expandable.scss',\n  shadow: true,\n})\nexport class TableBodyRowExpandable {\n  /** In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too */\n  @Prop() colSpan: number = null;\n\n  @State() isExpanded: boolean = false;\n\n  @State() tableId: string = '';\n\n  @State() columnsNumber: number = null;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() modeVariant: 'primary' | 'secondary' = null;\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  /** Sends out status of itw own expended status feature to table header component */\n  @Event({\n    eventName: 'singleRowExpandedEvent',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  singleRowExpandedEvent: EventEmitter<any>;\n\n  /** Event that triggers pagination function. Needed as first rows have to be rendered in order for pagination to run */\n  @Event({\n    eventName: 'runPaginationEvent',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  runPaginationEvent: EventEmitter<string>;\n\n  @Listen('tablePropsChangedEvent', { target: 'body' })\n  tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  componentDidLoad() {\n    this.runPaginationEvent.emit(this.tableId);\n  }\n\n  componentWillRender() {\n    if (this.colSpan !== null) {\n      this.columnsNumber = this.colSpan;\n    } else {\n      this.columnsNumber = this.tableEl.querySelector('sdds-table-header').childElementCount + 1;\n    }\n  }\n\n  sendValue() {\n    this.singleRowExpandedEvent.emit([this.tableId, this.isExpanded]);\n  }\n\n  onChangeHandler(event) {\n    this.isExpanded = event.currentTarget.checked === true;\n    this.sendValue();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table__row': true,\n          'sdds-table__row-expand--active': this.isExpanded,\n          'sdds-table__compact': this.compactDesign,\n          'sdds-table--divider': this.verticalDividers,\n          'sdds-mode-variant-primary': this.modeVariant === 'primary',\n          'sdds-mode-variant-secondary': this.modeVariant === 'secondary',\n        }}\n      >\n        <tr class=\"sdds-table__row\">\n          <td class=\"sdds-table__cell sdds-table__cell--expand\">\n            <label class=\"sdds-table__expand-control-container\">\n              <input\n                class=\"sdds-table__expand-input\"\n                type=\"checkbox\"\n                onChange={(event) => this.onChangeHandler(event)}\n                checked={this.isExpanded}\n              />\n              <span class=\"sdds-expendable-row-icon\">\n                <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z\"\n                    fill=\"currentColor\"\n                  />\n                </svg>\n              </span>\n            </label>\n          </td>\n          <slot />\n        </tr>\n\n        <tr class=\"sdds-table__row-expand\">\n          <td class=\"sdds-table__cell-expand\" colSpan={this.columnsNumber}>\n            <slot name=\"expand-row\" />\n          </td>\n        </tr>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-table-body-row-expandable.js","mappings":"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","names":[],"sources":["./src/components/data-table/table-body-row-expandable/table-body-row-expandable.scss?tag=sdds-table-body-row-expandable&encapsulation=shadow","./src/components/data-table/table-body-row-expandable/table-body-row-expandable.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n@import '../../../mixins/focus-state';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: contents;\n\n  .sdds-table__row,\n  .sdds-table__row-extend {\n    display: table-row;\n    border-bottom: 1px solid var(--sdds-data-table-divider);\n    background-color: var(--sdds-data-table-body-row-background);\n    transition: background-color 200ms ease;\n    color: var(--sdds-data-table-color);\n  }\n\n  .sdds-table__row:hover,\n  .sdds-table__row-extend:hover {\n    background-color: var(--sdds-data-table-body-row-background-hover);\n  }\n\n  .sdds-table__expand-control-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 46px;\n    cursor: pointer;\n    padding: 0 16px;\n    position: relative;\n\n    .sdds-table__expand-input {\n      all: unset;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      position: absolute;\n      cursor: pointer;\n\n      &:focus {\n        @include sdds-focus-state;\n      }\n    }\n\n    .sdds-expendable-row-icon {\n      height: 16px;\n      width: 16px;\n      transition: transform 200ms ease;\n      transform: rotate(0);\n    }\n  }\n\n  .sdds-table__row-expand {\n    display: none;\n    transition: background-color 200ms ease;\n\n    .sdds-table__cell-expand {\n      padding: 16px 16px 16px 66px;\n      color: var(--sdds-data-table-color);\n    }\n  }\n}\n\n:host(.sdds-table__row-expand--active) {\n  .sdds-table__row {\n    background-color: var(--sdds-data-table-body-row-background-selected);\n  }\n\n  .sdds-table__expand-control-container {\n    .sdds-expendable-row-icon {\n      transform: rotate(180deg);\n    }\n  }\n\n  .sdds-table__row-expand {\n    background-color: var(--sdds-data-table-body-row-background-selected);\n    display: table-row;\n  }\n}\n\n// test\n:host(.sdds-table__compact) {\n  .sdds-table__expand-control-container {\n    height: 30px;\n  }\n\n  .sdds-table__row-expand {\n    .sdds-table__cell-expand {\n      padding: 8px 16px 8px 66px;\n    }\n  }\n}\n\n:host(.sdds-table--divider) {\n  .sdds-table__cell--expand {\n    border-right: 1px solid var(--sdds-data-table-divider);\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n  'verticalDividers',\n  'compactDesign',\n  'noMinWidth',\n  'modeVariant',\n];\n@Component({\n  tag: 'sdds-table-body-row-expandable',\n  styleUrl: 'table-body-row-expandable.scss',\n  shadow: true,\n})\nexport class TableBodyRowExpandable {\n  /** In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too */\n  @Prop() colSpan: number = null;\n\n  @State() isExpanded: boolean = false;\n\n  @State() tableId: string = '';\n\n  @State() columnsNumber: number = null;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() modeVariant: 'primary' | 'secondary' = null;\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  /** @internal Sends out expanded status which is used by the table header component */\n  @Event({\n    eventName: 'internalSddsRowExpanded',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  internalSddsRowExpanded: EventEmitter<any>;\n\n  /** @internal Event that triggers pagination function. Needed as first rows have to be rendered in order for pagination to run */\n  @Event({\n    eventName: 'internalSddsPagination',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  internalSddsPagination: EventEmitter<string>;\n\n  @Listen('internalSddsTablePropChange', { target: 'body' })\n  internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  componentDidLoad() {\n    this.internalSddsPagination.emit(this.tableId);\n  }\n\n  componentWillRender() {\n    if (this.colSpan !== null) {\n      this.columnsNumber = this.colSpan;\n    } else {\n      this.columnsNumber = this.tableEl.querySelector('sdds-table-header').childElementCount + 1;\n    }\n  }\n\n  sendValue() {\n    this.internalSddsRowExpanded.emit([this.tableId, this.isExpanded]);\n  }\n\n  onChangeHandler(event) {\n    this.isExpanded = event.currentTarget.checked === true;\n    this.sendValue();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table__row': true,\n          'sdds-table__row-expand--active': this.isExpanded,\n          'sdds-table__compact': this.compactDesign,\n          'sdds-table--divider': this.verticalDividers,\n          'sdds-mode-variant-primary': this.modeVariant === 'primary',\n          'sdds-mode-variant-secondary': this.modeVariant === 'secondary',\n        }}\n      >\n        <tr class=\"sdds-table__row\">\n          <td class=\"sdds-table__cell sdds-table__cell--expand\">\n            <label class=\"sdds-table__expand-control-container\">\n              <input\n                class=\"sdds-table__expand-input\"\n                type=\"checkbox\"\n                onChange={(event) => this.onChangeHandler(event)}\n                checked={this.isExpanded}\n              />\n              <span class=\"sdds-expendable-row-icon\">\n                <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z\"\n                    fill=\"currentColor\"\n                  />\n                </svg>\n              </span>\n            </label>\n          </td>\n          <slot />\n        </tr>\n\n        <tr class=\"sdds-table__row-expand\">\n          <td class=\"sdds-table__cell-expand\" colSpan={this.columnsNumber}>\n            <slot name=\"expand-row\" />\n          </td>\n        </tr>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-table-body.js

@@ -57,13 +57,13 @@ const TableBody = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.sortingSwitcherEvent = createEvent(this, "sortingSwitcherEvent", 7);
-    this.updateBodyCheckboxesEvent = createEvent(this, "updateBodyCheckboxesEvent", 7);
-    this.updateMainCheckboxEvent = createEvent(this, "updateMainCheckboxEvent", 7);
+    this.internalSddsSortingChange = createEvent(this, "internalSddsSortingChange", 7);
+    this.internalSddsCheckboxChange = createEvent(this, "internalSddsCheckboxChange", 7);
+    this.internalSddsMainCheckboxChange = createEvent(this, "internalSddsMainCheckboxChange", 7);
     this.uncheckAll = () => {
       this.mainCheckboxStatus = false;
-      this.updateMainCheckboxEvent.emit([this.tableId, this.mainCheckboxStatus]);
-      this.updateBodyCheckboxesEvent.emit([this.tableId, this.mainCheckboxStatus]);
+      this.internalSddsMainCheckboxChange.emit([this.tableId, this.mainCheckboxStatus]);
+      this.internalSddsCheckboxChange.emit([this.tableId, this.mainCheckboxStatus]);
     };
     this.selectedDataExporter = () => {
       const selectedRows = this.host.getElementsByClassName('sdds-table__row--selected');
@@ -84,7 +84,7 @@ const TableBody = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       const numberOfRows = this.host.getElementsByClassName('sdds-table__row').length;
       const numberOfRowsSelected = this.host.getElementsByClassName('sdds-table__row--selected').length;
       this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;
-      this.updateMainCheckboxEvent.emit([this.tableId, this.mainCheckboxStatus]);
+      this.internalSddsMainCheckboxChange.emit([this.tableId, this.mainCheckboxStatus]);
       this.selectedDataExporter();
     };
     this.disableFilteringFunction = false;
@@ -120,7 +120,7 @@ const TableBody = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.bodyDataManipulated = [...this.innerBodyData];
     this.bodyDataOriginal = [...this.innerBodyData];
   }
-  tablePropsChangedEventListener(event) {
+  internalSddsPropChangeListener(event) {
     if (this.tableId === event.detail.tableId) {
       event.detail.changed
         .filter((changedProp) => relevantTableProps.includes(changedProp))
@@ -162,7 +162,7 @@ const TableBody = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.bodyDataManipulated.sort(TableBody.compareValues(keyValue, sortingDirection));
     }
   }
-  // Listen to sortColumnData from data-table-header-element
+  // Listen to sortColumnData from data-table-header-element - TODO
   updateOptionsContent(event) {
     const [receivedID, receivedKeyValue, receivedSortingDirection] = event.detail;
     if (this.tableId === receivedID) {
@@ -223,7 +223,7 @@ const TableBody = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           }
         });
         this.disableAllSorting = true;
-        this.sortingSwitcherEvent.emit([this.tableId, this.disableAllSorting]);
+        this.internalSddsSortingChange.emit([this.tableId, this.disableAllSorting]);
         const dataRowsHidden = this.host.querySelectorAll('.sdds-table__row--hidden');
         // If same, info message will be shown
         this.showNoResultsMessage = dataRowsHidden.length === dataRowsFiltering.length;
@@ -240,12 +240,12 @@ const TableBody = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           });
         }
         this.disableAllSorting = false;
-        this.sortingSwitcherEvent.emit([this.tableId, this.disableAllSorting]);
+        this.internalSddsSortingChange.emit([this.tableId, this.disableAllSorting]);
       }
     }
   }
-  // Listen to tableFilteringTerm from tableToolbar component
-  tableFilteringTermListener(event) {
+  // Listen to sddsFilter from tableToolbar component
+  sddsFilterListener(event) {
     if (this.tableId === event.detail[0]) {
       this.searchFunction(event.detail[1]);
     }
@@ -306,7 +306,7 @@ const TableBody = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "tempPaginationDisable": [32],
     "showNoResultsMessage": [32],
     "tableId": [32]
-  }, [[16, "tablePropsChangedEvent", "tablePropsChangedEventListener"], [16, "sortColumnDataEvent", "updateOptionsContent"], [16, "mainCheckboxSelectedEvent", "headCheckboxListener"], [16, "bodyRowToTable", "bodyCheckboxListener"], [16, "tableFilteringTerm", "tableFilteringTermListener"]]]);
+  }, [[16, "internalSddsTablePropChange", "internalSddsPropChangeListener"], [16, "sddsSortChange", "updateOptionsContent"], [16, "internalSddsMainCheckboxChange", "headCheckboxListener"], [16, "internalSddsRowChange", "bodyCheckboxListener"], [16, "sddsFilter", "sddsFilterListener"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/sdds-table-body.js.map

@@ -1 +1 @@
-{"file":"sdds-table-body.js","mappings":"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","names":[],"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"],"version":3}
+{"file":"sdds-table-body.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,YAAY,GAAG,6dAA6d;;ACelf,MAAM,kBAAkB,GAA2C;EACjE,mBAAmB;EACnB,sBAAsB;CACvB,CAAC;MAOW,SAAS;;;;;;;IA8HpB,eAAU,GAAG;MACX,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;MAChC,IAAI,CAAC,8BAA8B,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;MAClF,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;KAC/E,CAAC;IAwBF,yBAAoB,GAAG;MACrB,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,sBAAsB,CAAC,2BAA2B,CAAC,CAAC;MAEnF,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC;MAC3B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC5C,MAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;QACxE,MAAM,cAAc,GAAG,EAAE,CAAC;QAC1B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;UACxC,MAAM,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;UAC5D,MAAM,gBAAgB,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;UAChE,cAAc,CAAC,cAAc,CAAC,GAAG,gBAAgB,CAAC;SACnD;QACD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;OAC5C;MACD,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;KACnE,CAAC;IAUF,wBAAmB,GAAG;MACpB,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,sBAAsB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC;MAEhF,MAAM,oBAAoB,GAAG,IAAI,CAAC,IAAI,CAAC,sBAAsB,CAC3D,2BAA2B,CAC5B,CAAC,MAAM,CAAC;MAET,IAAI,CAAC,kBAAkB,GAAG,YAAY,KAAK,oBAAoB,CAAC;MAEhE,IAAI,CAAC,8BAA8B,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;MAElF,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B,CAAC;oCA7L0C,KAAK;kCAGP,KAAK;;2BAMZ,KAAK;qBAEd,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC;uBAIpB,CAAC;6BAEM,KAAK;qCAEG,KAAK;gCAEV,IAAI;yBAEpB,EAAE;+BAEI,EAAE;4BAEL,EAAE;4BAEF,EAAE;;8BAIS,KAAK;yBAEX,CAAC;6BAEI,KAAK;yBAEV,CAAC;2BAEC,CAAC;iCAEM,KAAK;gCAEN,KAAK;mBAEnB,EAAE;;EAK7B,gBAAgB,CAAC,QAAgB;IAC/B,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KAC3C;SAAM;MACL,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;KAC/B;IACD,IAAI,CAAC,mBAAmB,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC;IACnD,IAAI,CAAC,gBAAgB,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC;GACjD;EA8BD,8BAA8B,CAAC,KAA+C;IAC5E,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;MACzC,KAAK,CAAC,MAAM,CAAC,OAAO;SACjB,MAAM,CAAC,CAAC,WAAW,KAAK,kBAAkB,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;SACjE,OAAO,CAAC,CAAC,WAAW;QACnB,IAAI,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,WAAW,EAAE;UAC5C,MAAM,IAAI,KAAK,CAAC,gCAAgC,WAAW,EAAE,CAAC,CAAC;SAChE;QACD,IAAI,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;OAC/C,CAAC,CAAC;KACN;GACF;EAED,OAAO,aAAa,CAAC,GAAG,EAAE,KAAK,GAAG,KAAK;IACrC,OAAO,SAAS,SAAS,CAAC,CAAC,EAAE,CAAC;;MAE5B,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE;;QAEpD,OAAO,CAAC,CAAC;OACV;MAED,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,GAAG,CAAC,KAAK,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;MACxE,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,GAAG,CAAC,KAAK,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;MAExE,IAAI,UAAU,GAAG,CAAC,CAAC;MACnB,IAAI,IAAI,GAAG,IAAI,EAAE;QACf,UAAU,GAAG,CAAC,CAAC;OAChB;WAAM,IAAI,IAAI,GAAG,IAAI,EAAE;QACtB,UAAU,GAAG,CAAC,CAAC,CAAC;OACjB;MACD,OAAO,KAAK,KAAK,MAAM,GAAG,UAAU,GAAG,CAAC,CAAC,GAAG,UAAU,CAAC;KACxD,CAAC;GACH;EAQD,QAAQ,CAAC,QAAQ,EAAE,gBAAgB;IACjC,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE;MAChC,IAAI,IAAI,CAAC,iBAAiB,EAAE;;QAE1B,IAAI,CAAC,UAAU,EAAE,CAAC;OACnB;;MAGD,IAAI,CAAC,mBAAmB,GAAG,CAAC,GAAG,IAAI,CAAC,mBAAmB,CAAC,CAAC;MACzD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC;KACpF;GACF;;EAID,oBAAoB,CAAC,KAAuB;IAC1C,MAAM,CAAC,UAAU,EAAE,gBAAgB,EAAE,wBAAwB,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;IAC9E,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,EAAE;MAC/B,IAAI,CAAC,QAAQ,CAAC,gBAAgB,EAAE,wBAAwB,CAAC,CAAC;KAC3D;GACF;EAoBD,oBAAoB,CAAC,KAAuB;IAC1C,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;MACpC,GAAG,IAAI,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;MAC3C,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;GACF;;EAkBD,oBAAoB;IAClB,IAAI,CAAC,mBAAmB,EAAE,CAAC;GAC5B;EAED,cAAc,CAAC,UAAU;IACvB,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE;;;;;;;;;;;;;;;;;;;MAoBlC,MAAM,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;MAE5E,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;QACzB,IAAI,IAAI,CAAC,yBAAyB,EAAE;UAClC,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;SACnC;QAED,iBAAiB,CAAC,OAAO,CAAC,CAAC,IAAI;UAC7B,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;UACtD,MAAM,eAAe,GAAG,EAAE,CAAC;;UAG3B,KAAK,CAAC,OAAO,CAAC,CAAC,QAAQ;YACrB,MAAM,SAAS,GAAG,QAAQ,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,WAAW,EAAE,CAAC;YACpE,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;WACjC,CAAC,CAAC;;UAGH,MAAM,YAAY,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC;;UAGrF,IAAI,YAAY,EAAE;YAChB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC;WAClD;eAAM;YACL,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC;WAC/C;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAC9B,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;QAE5E,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,0BAA0B,CAAC,CAAC;;QAG9E,IAAI,CAAC,oBAAoB,GAAG,cAAc,CAAC,MAAM,KAAK,iBAAiB,CAAC,MAAM,CAAC;OAChF;WAAM;QACL,IAAI,IAAI,CAAC,yBAAyB,EAAE;UAClC,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC;SACpC;;QAGD,IAAI,IAAI,CAAC,yBAAyB,EAAE,CAEnC;aAAM;UACL,iBAAiB,CAAC,OAAO,CAAC,CAAC,IAAI;YAC7B,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC;WAClD,CAAC,CAAC;SACJ;QAED,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;QAC/B,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;OAC7E;KACF;GACF;;EAID,kBAAkB,CAAC,KAAuB;IACxC,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;MACpC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;KACtC;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;GACrC;EAED,iBAAiB;IACf,kBAAkB,CAAC,OAAO,CAAC,CAAC,aAAa;MACvC,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;KACnD,CAAC,CAAC;IAEH,IAAI,IAAI,CAAC,eAAe,EAAE;MACxB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC;KAChC;SAAM,IAAI,IAAI,CAAC,QAAQ,EAAE;MACxB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACtC;GACF;EAED,mBAAmB;IACjB,MAAM,eAAe,GACnB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC;;IAG7E,IAAI,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,oBAAoB,EAAE;MACvD,IAAI,CAAC,aAAa,GAAG,eAAe,GAAG,CAAC,CAAC;KAC1C;SAAM;MACL,IAAI,CAAC,aAAa,GAAG,eAAe,CAAC;KACtC;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,0BAAqB,IAAI,CAAC,oBAAoB,IAChD,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,GAAG,MAChC,+BACG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,MAC7B,kCAA0B,QAAQ,gBAAc,GAAG,CAAC,QAAQ,CAAC,GAAmB,CACjF,CAAC,CACkB,CACvB,CAAC,EACD,IAAI,CAAC,oBAAoB,KACxB,cACE,UAAI,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,mEAE3D,CACF,CACN,EACD,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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 { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['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  /** @internal Event that sends unique table identifier and enable/disable status for sorting functionality */\n  @Event({\n    eventName: 'internalSddsSortingChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  internalSddsSortingChange: EventEmitter<any>;\n\n  /** @internal Sends unique table identifier and mainCheckbox status to all rows when multiselect feature is enabled */\n  @Event({\n    eventName: 'internalSddsCheckboxChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  internalSddsCheckboxChange: EventEmitter<any>;\n\n  /** @internal 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: 'internalSddsMainCheckboxChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  internalSddsMainCheckboxChange: EventEmitter<any>;\n\n  @Listen('internalSddsTablePropChange', { target: 'body' })\n  internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  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.internalSddsMainCheckboxChange.emit([this.tableId, this.mainCheckboxStatus]);\n    this.internalSddsCheckboxChange.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 - TODO\n  @Listen('sddsSortChange', { 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('internalSddsMainCheckboxChange', { 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.internalSddsMainCheckboxChange.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('internalSddsRowChange', { 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.internalSddsSortingChange.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.internalSddsSortingChange.emit([this.tableId, this.disableAllSorting]);\n      }\n    }\n  }\n\n  // Listen to sddsFilter from tableToolbar component\n  @Listen('sddsFilter', { target: 'body' })\n  sddsFilterListener(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"],"version":3}