@scania/tegel 0.0.1-beta.9 → 0.0.4

package/dist/cjs/sdds-popover-canvas.cjs.entry.js

@@ -0,0 +1,86 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-18eb94f0.js');
+const popper = require('./popper-11d5f714.js');
+
+const popoverCanvasCss = ":host{box-sizing:border-box;min-width:160px;min-height:160px;color:var(--sdds-popover-canvas-color);background-color:var(--sdds-popover-canvas-background);padding:16px;box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:800;display:none}:host *{box-sizing:border-box}:host(.sdds-popover-canvas-show){opacity:1;display:block}";
+
+const PopoverCanvas = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.selector = '';
+    this.referenceEl = undefined;
+    this.show = false;
+    this.placement = 'auto';
+    this.offsetSkidding = 0;
+    this.offsetDistance = 8;
+    this.renderedShowValue = false;
+    this.popperInstance = undefined;
+    this.target = undefined;
+  }
+  handleOutsideClick() {
+    if (this.show) {
+      this.show = false;
+    }
+  }
+  componentDidLoad() {
+    var _a;
+    this.target = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
+    this.renderedShowValue = this.show;
+    this.popperInstance = popper.createPopper(this.target, this.popoverCanvasElement, {
+      placement: this.placement,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [this.offsetSkidding, this.offsetDistance],
+          },
+        },
+      ],
+    });
+    const showCanvas = () => {
+      this.show = true;
+    };
+    const hideCanvas = () => {
+      this.show = false;
+    };
+    this.target.addEventListener('mousedown', (event) => {
+      event.stopPropagation();
+      if (this.show) {
+        hideCanvas();
+      }
+      else {
+        showCanvas();
+      }
+    });
+    this.popoverCanvasElement.addEventListener('mousemove', (event) => {
+      event.stopPropagation();
+    });
+    this.popoverCanvasElement.addEventListener('mousedown', (event) => {
+      event.stopPropagation();
+    });
+  }
+  componentDidRender() {
+    if (this.show && !this.renderedShowValue) {
+      // Here we update the popper position since its position is wrong
+      // before it is rendered.
+      this.popperInstance.update();
+    }
+    this.renderedShowValue = this.show;
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+  render() {
+    return (index.h(index.Host, { class: `sdds-popover-canvas ${this.show ? 'sdds-popover-canvas-show' : ''}` }, index.h("slot", null)));
+  }
+  get popoverCanvasElement() { return index.getElement(this); }
+};
+PopoverCanvas.style = popoverCanvasCss;
+
+exports.sdds_popover_canvas = PopoverCanvas;
+
+//# sourceMappingURL=sdds-popover-canvas.cjs.entry.js.map

package/dist/cjs/sdds-popover-canvas.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"sdds-popover-canvas.entry.cjs.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,GAAGA,mBAAY,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,QACEC,QAACC,UAAI,IAAC,KAAK,EAAE,uBAAuB,IAAI,CAAC,IAAI,GAAG,0BAA0B,GAAG,EAAE,EAAE,IAC/ED,qBAAa,CACR,EACP;GACH;;;;;;;","names":["createPopper","h","Host"],"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}

package/dist/cjs/sdds-popover-menu.cjs.entry.js

@@ -0,0 +1,87 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-18eb94f0.js');
+const popper = require('./popper-11d5f714.js');
+
+const popoverMenuCss = ":host{box-sizing:border-box;overflow:hidden;width:160px;background-color:var(--sdds-popover-menu-background);padding:16px;box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;display:none;z-index:800}:host *{box-sizing:border-box}:host(.sdds-popover-menu-show){opacity:1;display:block}";
+
+const PopoverMenu = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.selector = '';
+    this.referenceEl = undefined;
+    this.show = false;
+    this.placement = 'auto';
+    this.offsetSkidding = 0;
+    this.offsetDistance = 8;
+    this.renderedShowValue = false;
+    this.popperInstance = undefined;
+    this.target = undefined;
+  }
+  handleOutsideClick() {
+    if (this.show) {
+      this.show = false;
+    }
+  }
+  componentDidLoad() {
+    var _a;
+    this.target = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
+    this.renderedShowValue = this.show;
+    this.popperInstance = popper.createPopper(this.target, this.popoverMenuElement, {
+      strategy: 'fixed',
+      placement: this.placement,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [this.offsetSkidding, this.offsetDistance],
+          },
+        },
+      ],
+    });
+    const showMenu = () => {
+      this.show = true;
+    };
+    const hideMenu = () => {
+      this.show = false;
+    };
+    this.target.addEventListener('mousedown', (event) => {
+      event.stopPropagation();
+      if (this.show) {
+        hideMenu();
+      }
+      else {
+        showMenu();
+      }
+    });
+    this.popoverMenuElement.addEventListener('mousemove', (event) => {
+      event.stopPropagation();
+    });
+    this.popoverMenuElement.addEventListener('mousedown', (event) => {
+      event.stopPropagation();
+    });
+  }
+  componentDidRender() {
+    if (this.show && !this.renderedShowValue) {
+      // Here we update the popper position since its position is wrong
+      // before it is rendered.
+      this.popperInstance.update();
+    }
+    this.renderedShowValue = this.show;
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+  render() {
+    return (index.h(index.Host, { class: `sdds-popover-menu ${this.show ? 'sdds-popover-menu-show' : ''}` }, index.h("slot", null)));
+  }
+  get popoverMenuElement() { return index.getElement(this); }
+};
+PopoverMenu.style = popoverMenuCss;
+
+exports.sdds_popover_menu = PopoverMenu;
+
+//# sourceMappingURL=sdds-popover-menu.cjs.entry.js.map

package/dist/cjs/sdds-popover-menu.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"sdds-popover-menu.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,oUAAoU;;MCS9U,WAAW;;;oBAIK,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,GAAGA,mBAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAAE;MACvE,QAAQ,EAAE,OAAO;MACjB,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,QAAQ,GAAG;MACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;KAClB,CAAC;IAEF,MAAM,QAAQ,GAAG;MACf,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,QAAQ,EAAE,CAAC;OACZ;WAAM;QACL,QAAQ,EAAE,CAAC;OACZ;KACF,CAAC,CAAC;IAEH,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK;MAC1D,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB,CAAC,CAAC;IAEH,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK;MAC1D,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,QACEC,QAACC,UAAI,IAAC,KAAK,EAAE,qBAAqB,IAAI,CAAC,IAAI,GAAG,wBAAwB,GAAG,EAAE,EAAE,IAC3ED,qBAAa,CACR,EACP;GACH;;;;;;;","names":["createPopper","h","Host"],"sources":["./src/components/popover-menu/popover-menu.scss?tag=sdds-popover-menu&encapsulation=shadow","./src/components/popover-menu/popover-menu.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n@import '../../mixins/z-index';\n\n:host {\n  @include sdds-box-sizing;\n\n  overflow: hidden;\n  width: 160px;\n  background-color: var(--sdds-popover-menu-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  display: none;\n  z-index: z(tooltip);\n}\n\n:host(.sdds-popover-menu-show) {\n  opacity: 1;\n  display: block;\n}\n","import { Component, Element, Host, 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-menu',\n  styleUrl: 'popover-menu.scss',\n  shadow: true,\n})\nexport class PopoverMenu {\n  @Element() popoverMenuElement!: 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 Menu should be visible from the start */\n  @Prop() show: boolean = false;\n\n  /** Decides the placement of the Popover Menu */\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.popoverMenuElement, {\n      strategy: 'fixed',\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 showMenu = () => {\n      this.show = true;\n    };\n\n    const hideMenu = () => {\n      this.show = false;\n    };\n\n    this.target.addEventListener('mousedown', (event) => {\n      event.stopPropagation();\n\n      if (this.show) {\n        hideMenu();\n      } else {\n        showMenu();\n      }\n    });\n\n    this.popoverMenuElement.addEventListener('mousemove', (event) => {\n      event.stopPropagation();\n    });\n\n    this.popoverMenuElement.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-menu ${this.show ? 'sdds-popover-menu-show' : ''}`}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/sdds-radio-button.cjs.entry.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-18eb94f0.js');
+
+const radioButtonComponentCss = ".sc-sdds-radio-button:root,.sdds-mode-light.sc-sdds-radio-button{--sdds-radio-button-color:var(--sdds-grey-958);--sdds-radio-button-interaction-01:var(--sdds-blue-800);--sdds-radio-button-interaction-02:var(--sdds-white);--sdds-radio-button-background-hover:var(--sdds-blue-800);--sdds-radio-button-background-focus:var(--sdds-blue-800);--sdds-radio-button-disabled:var(--sdds-grey-600);--sdds-radio-button-border-color-disabled-after:var(--sdds-grey-700);--sdds-radio-button-color-disabled-after:var(--sdds-grey-700);--sdds-radio-button-color-disabled-before:var(--sdds-grey-700)}.sdds-mode-dark.sc-sdds-radio-button{--sdds-radio-button-color:var(--sdds-white);--sdds-radio-button-interaction-01:var(--sdds-white);--sdds-radio-button-interaction-02:var(--sdds-grey-958);--sdds-radio-button-background-hover:var(--sdds-white);--sdds-radio-button-background-focus:var(--sdds-white);--sdds-radio-button-disabled:var(--sdds-grey-600);--sdds-radio-button-border-color-disabled-after:var(--sdds-grey-700);--sdds-radio-button-color-disabled-after:var(--sdds-grey-700)}.sdds-radio-button.sc-sdds-radio-button{box-sizing:border-box;display:flex;align-items:center;margin-left:-4px;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-radio-button-color)}.sdds-radio-button.sc-sdds-radio-button *.sc-sdds-radio-button{box-sizing:border-box}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button{appearance:none;outline:none;margin:0;border:0;width:24px;height:24px;border-radius:50%;position:relative;cursor:pointer}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button+label.sc-sdds-radio-button{padding:var(--sdds-spacing-element-4) 0 var(--sdds-spacing-element-4) var(--sdds-spacing-element-4);cursor:pointer}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::after{content:\"\";position:absolute;border-radius:50%;box-sizing:border-box}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::before{width:24px;height:24px;left:0;top:0}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::after{border:1px solid var(--sdds-radio-button-interaction-01);background-color:var(--sdds-radio-button-interaction-02);width:16px;height:16px;left:4px;top:4px}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:hover::before{background-color:var(--sdds-radio-button-background-hover);opacity:0.12}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:focus::before{background-color:var(--sdds-radio-button-background-focus);opacity:0.24;animation:rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button{cursor:not-allowed}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled::after,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button::after{border-color:var(--sdds-radio-button-border-color-disabled-after);background-color:var(--sdds-radio-button-interaction-02)}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled+label.sc-sdds-radio-button,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button+label.sc-sdds-radio-button{color:var(--sdds-radio-button-disabled);cursor:not-allowed}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled:hover::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button:hover::before{display:none;opacity:1}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked::after{border:4px solid var(--sdds-radio-button-interaction-01)}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked:disabled:hover::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked:disabled::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked.disabled:hover::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid var(--sdds-radio-button-color-disabled-before);box-sizing:content-box}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked:disabled::after,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked.disabled::after{border:4px solid var(--sdds-radio-button-interaction-02);background-color:var(--sdds-radio-button-color-disabled-after);left:5px;top:5px}@keyframes rb-focus{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:0.24}}";
+
+const RadioButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sddsChange = index.createEvent(this, "sddsChange", 7);
+    this.name = undefined;
+    this.value = undefined;
+    this.radioId = crypto.randomUUID();
+    this.checked = false;
+    this.required = false;
+    this.disabled = false;
+  }
+  render() {
+    return (index.h("div", { class: "sdds-radio-button" }, index.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: () => {
+        this.sddsChange.emit({
+          radioId: this.radioId,
+          value: this.value,
+        });
+      } }), index.h("label", { htmlFor: this.radioId }, index.h("slot", null))));
+  }
+  get host() { return index.getElement(this); }
+};
+RadioButton.style = radioButtonComponentCss;
+
+exports.sdds_radio_button = RadioButton;
+
+//# sourceMappingURL=sdds-radio-button.cjs.entry.js.map

package/dist/cjs/sdds-radio-button.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"sdds-radio-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,uBAAuB,GAAG,smKAAsmK;;MCSznK,WAAW;;;;;;mBAiBI,MAAM,CAAC,UAAU,EAAE;mBAGD,KAAK;oBAGrB,KAAK;oBAGL,KAAK;;EAgBjC,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,mBAAmB,IAC5BA,mBACA,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,EACLA,mBAAO,OAAO,EAAE,IAAI,CAAC,OAAO,IAC1BA,qBAAa,CACP,CACF,EACR;GACH;;;;;;;","names":["h"],"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/cjs/sdds-slider.cjs.entry.js

@@ -0,0 +1,359 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-18eb94f0.js');
+
+const sliderCss = ":root,.sdds-mode-light{--sdds-slider-label-color:var(--sdds-grey-958);--sdds-slider-label-color-disabled:var(--sdds-grey-400);--sdds-slider-thumb-color:var(--sdds-blue-800);--sdds-slider-divider-color:var(--sdds-grey-400);--sdds-slider-track-color:var(--sdds-grey-400);--sdds-slider-track-fill-color:var(--sdds-blue-800);--sdds-slider-input-inputfield-color:var(--sdds-grey-700);--sdds-slider-inputfield-color:var(--sdds-grey-400);--sdds-slider-controls-color:var(--sdds-grey-958);--sdds-slider-inputfield-background:var(--sdds-white);--sdds-slider-inputfield-box-shadow:var(--sdds-grey-400);--sdds-slider-divider-values-color:var(--sdds-grey-958)}.sdds-mode-dark{--sdds-slider-label-color:var(--sdds-grey-100);--sdds-slider-label-color-disabled:var(--sdds-grey-700);--sdds-slider-thumb-color:var(--sdds-grey-100);--sdds-slider-divider-color:var(--sdds-grey-700);--sdds-slider-track-color:var(--sdds-grey-700);--sdds-slider-track-fill-color:var(--sdds-grey-100);--sdds-slider-inputfield-color:var(--sdds-grey-700);--sdds-slider-input-inputfield-color:var(--sdds-grey-400);--sdds-slider-controls-color:var(--sdds-grey-100);--sdds-slider-inputfield-background:var(--sdds-grey-900);--sdds-slider-inputfield-box-shadow:var(--sdds-grey-800);--sdds-slider-divider-values-color:var(--sdds-grey-100)}sdds-slider{box-sizing:border-box;width:100%}sdds-slider *{box-sizing:border-box}sdds-slider input[type=range].sdds-slider-native-element{display:none}.sdds-slider-wrapper{width:100%}.sdds-slider-wrapper.read-only{pointer-events:none}.sdds-slider{width:100%;display:flex;flex-wrap:nowrap;padding-top:65px}.sdds-slider .sdds-slider-inner{width:100%;height:20px;position:relative}.sdds-slider .sdds-slider__controls{position:relative;top:-25px}.sdds-slider .sdds-slider__controls .sdds-slider__control{cursor:pointer}.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus{padding:18px 18px 18px 0}.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus{padding:18px 0 18px 18px}.sdds-slider .sdds-slider__input-values{position:relative;top:-25px;display:flex;flex-wrap:nowrap;align-items:center}.sdds-slider .sdds-slider__input-values .sdds-slider__input-value{user-select:none;padding:18px;color:var(--sdds-grey-700);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper{background-color:var(--sdds-slider-inputfield-background);display:flex;align-items:center;justify-content:center}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-slider-input-inputfield-color);border:0;background-color:transparent;text-align:center;padding:12px;box-shadow:inset 0 -1px 0 var(--sdds-slider-inputfield-box-shadow);border-radius:4px 4px 0 0}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field:hover{box-shadow:inset 0 -1px 0 var(--sdds-grey-600)}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field:focus{box-shadow:inset 0 -2px 0 var(--sdds-blue-400);outline:0}.sdds-slider label{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);user-select:none;position:absolute;color:var(--sdds-slider-label-color);top:-16px;transform:translateY(-100%)}.sdds-slider label.offset{top:-35px}.sdds-slider .sdds-slider__value{font:var(--sdds-detail-01);letter-spacing:var(--sdds-detail-01-ls);user-select:none;border-radius:4px;padding:8px;position:absolute;transform:translate(-50%, -100%);top:-24px;background-color:var(--sdds-grey-800);color:var(--sdds-white)}.sdds-slider .sdds-slider__value svg{position:absolute;left:50%;transform:translateX(-50%);top:34px}.sdds-slider .sdds-slider__scrubber{position:absolute}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner{width:20px;height:20px;border-radius:100%;background-color:var(--sdds-slider-thumb-color);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner::before{content:\" \";display:none;width:48px;height:48px;background-color:var(--sdds-slider-thumb-color);position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%, -50%)}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner:hover::before{display:block;opacity:0.08}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed{width:24px;height:24px}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed::before{display:block;opacity:0.16 !important}.sdds-slider .sdds-slider__value-dividers-wrapper{position:relative;width:100%;pointer-events:none}.sdds-slider .sdds-slider__value-dividers{pointer-events:none;position:absolute;display:flex;justify-content:space-between;width:100%}.sdds-slider .sdds-slider__value-dividers .sdds-slider__value-divider{transform:translateY(-50%);height:16px;background-color:var(--sdds-slider-divider-color);color:var(--sdds-slider-divider-values-color);width:1px}.sdds-slider .sdds-slider__value-dividers .sdds-slider__value-divider span{display:block;user-select:none;color:var(-sdds-grey-700);font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);position:relative;top:-7px;left:50%;transform:translate(-50%, -100%);width:50px;text-align:center}.sdds-slider .sdds-slider__track{width:100%;height:2px;border-radius:1px;background-color:var(--sdds-slider-track-color);position:relative}.sdds-slider .sdds-slider__track:focus{outline:0}.sdds-slider .sdds-slider__track:focus .sdds-slider__scrubber .sdds-slider__scrubber-inner{width:24px;height:24px}.sdds-slider .sdds-slider__track:focus .sdds-slider__scrubber .sdds-slider__scrubber-inner::before{display:block;opacity:0.08}.sdds-slider .sdds-slider__track .sdds-slider__track-fill{background-color:var(--sdds-slider-track-fill-color);border-radius:2px;height:4px;position:absolute;left:0;top:-1px}.sdds-slider.disabled{cursor:not-allowed}.sdds-slider.disabled>*{pointer-events:none}.sdds-slider.disabled label{color:var(--sdds-slider-label-color-disabled)}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control{cursor:default}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus svg,.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus svg{fill:var(--sdds-slider-controls-color)}.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-value{color:var(--sdds-slider-controls-color)}.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper{pointer-events:none}.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field{color:var(--sdds-slider-controls-color);pointer-events:none}.sdds-slider.disabled .sdds-slider__value{display:none}.sdds-slider.disabled .sdds-slider__track .sdds-slider__track-fill{background-color:var(--sdds-slider-track-fill-color)}.sdds-slider.disabled .sdds-slider__value-dividers .sdds-slider__value-divider span{color:var(--sdds-slider-track-fill-color)}.sdds-slider.disabled .sdds-slider__scrubber{pointer-events:none}.sdds-slider.disabled .sdds-slider__scrubber .sdds-slider__scrubber-inner{background:var(--sdds-slider-track-color);cursor:default}.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner{width:16px;height:16px}.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner::before{width:40px;height:40px}.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed{width:20px;height:20px}.sdds-slider__controls .sdds-slider__control{cursor:default}.sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus svg,.sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus svg{fill:var(--sdds-slider-controls-color)}";
+
+const Slider = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sddsChange = index.createEvent(this, "sddsChange", 7);
+    this.wrapperElement = null;
+    this.scrubberElement = null;
+    this.scrubberInnerElement = null;
+    this.dividersElement = null;
+    this.trackElement = null;
+    this.trackFillElement = null;
+    this.minusElement = null;
+    this.plusElement = null;
+    this.inputElement = null;
+    this.nativeRangeInputElement = null;
+    this.scrubberGrabPos = { x: 0, y: 0 };
+    this.scrubberGrabbed = false;
+    this.scrubberLeft = 0;
+    this.tickValues = [];
+    this.disabledState = false;
+    this.readonlyState = false;
+    this.useControls = false;
+    this.useInput = false;
+    this.useSmall = false;
+    this.useSnapping = false;
+    this.supposedValueSlot = -1;
+    this.eventListenersAdded = false;
+    this.resizeObserverAdded = false;
+    this.label = '';
+    this.value = '0';
+    this.min = '0';
+    this.max = '100';
+    this.ticks = '0';
+    this.showTickNumbers = false;
+    this.tooltip = null;
+    this.disabled = null;
+    this.readOnly = null;
+    this.controls = null;
+    this.input = null;
+    this.step = '1';
+    this.name = '';
+    this.size = '';
+    this.snap = null;
+    this.sliderId = crypto.randomUUID();
+  }
+  /** Public method to re-initialise the slider if some configuration props are changed */
+  async reset() {
+    // @TODO: maybe refactor to use watch-decorators instead
+    this.componentWillLoad();
+    this.componentDidLoad();
+  }
+  handleKeydown(event) {
+    switch (event.key) {
+      case 'ArrowLeft':
+        this.stepLeft();
+        break;
+      case 'ArrowRight':
+        this.stepRight();
+        break;
+    }
+  }
+  handleMouseUp() {
+    if (!this.scrubberGrabbed) {
+      return;
+    }
+    this.scrubberGrabbed = false;
+    this.scrubberInnerElement.classList.remove('pressed');
+    this.updateValue();
+    this.trackElement.focus();
+  }
+  handleTouchEnd() {
+    if (!this.scrubberGrabbed) {
+      return;
+    }
+    this.scrubberGrabbed = false;
+    this.scrubberInnerElement.classList.remove('pressed');
+    this.updateValue();
+    this.trackElement.focus();
+  }
+  handleMouseMove(event) {
+    if (!this.scrubberGrabbed) {
+      return;
+    }
+    const numTicks = parseInt(this.ticks);
+    const trackRect = this.trackElement.getBoundingClientRect();
+    let localLeft = event.clientX - trackRect.left;
+    this.supposedValueSlot = -1;
+    if (this.useSnapping && numTicks > 0) {
+      const v = Math.round(this.getTrackWidth() / (numTicks + 1));
+      localLeft = Math.round(localLeft / v) * v;
+      this.supposedValueSlot = Math.round(localLeft / v);
+    }
+    this.scrubberLeft = this.constrainScrubber(localLeft);
+    this.scrubberElement.style.left = `${this.scrubberLeft}px`;
+    this.updateValue();
+    this.updateTrack();
+  }
+  handleTouchMove(event) {
+    event.preventDefault();
+    if (!this.scrubberGrabbed) {
+      return;
+    }
+    const numTicks = parseInt(this.ticks);
+    const trackRect = this.trackElement.getBoundingClientRect();
+    let localLeft = event.touches[0].clientX - trackRect.left;
+    this.supposedValueSlot = -1;
+    if (this.useSnapping && numTicks > 0) {
+      const v = Math.round(this.getTrackWidth() / (numTicks + 1));
+      localLeft = Math.round(localLeft / v) * v;
+      this.supposedValueSlot = Math.round(localLeft / v);
+    }
+    this.scrubberLeft = this.constrainScrubber(localLeft);
+    this.scrubberElement.style.left = `${this.scrubberLeft}px`;
+    this.updateValue();
+    this.updateTrack();
+  }
+  updateTrack() {
+    const trackWidth = this.getTrackWidth();
+    const percentageFilled = (this.scrubberLeft / trackWidth) * 100;
+    this.trackFillElement.style.width = `${percentageFilled}%`;
+  }
+  dispatchChangeEvent() {
+    this.sddsChange.emit({ value: this.value });
+  }
+  updateValue() {
+    const trackWidth = this.getTrackWidth();
+    /* if snapping (supposedValueSlot > 0) is enabled, make sure we display the supposed value (instead of maybe getting a -1/+1 depending on rounding)  */
+    if (this.supposedValueSlot > 0) {
+      const supposedValue = this.tickValues[this.supposedValueSlot];
+      this.value = `${supposedValue}`;
+    }
+    else {
+      const percentage = this.scrubberLeft / trackWidth;
+      this.value = `${Math.trunc(this.getMin() + percentage * (this.getMax() - this.getMin()))}`;
+    }
+    this.dispatchChangeEvent();
+  }
+  updateValueForced(value) {
+    this.value = value;
+    this.dispatchChangeEvent();
+  }
+  getMin() {
+    return parseFloat(this.min);
+  }
+  getMax() {
+    return parseFloat(this.max);
+  }
+  constrainScrubber(x) {
+    const width = this.getTrackWidth();
+    if (x < 0) {
+      return 0;
+    }
+    if (x > width) {
+      return width;
+    }
+    return x;
+  }
+  getTrackWidth() {
+    const trackRect = this.trackElement.getBoundingClientRect();
+    return trackRect.right - trackRect.left;
+  }
+  calculateScrubberLeftFromValue(value) {
+    const initValue = value;
+    const trackWidth = this.getTrackWidth();
+    const normalizedValue = initValue - this.getMin();
+    const normalizedMax = this.getMax() - this.getMin();
+    const calculatedLeft = (normalizedValue / normalizedMax) * trackWidth;
+    this.scrubberLeft = calculatedLeft;
+    this.scrubberElement.style.left = `${this.scrubberLeft}px`;
+  }
+  componentDidLoad() {
+    if (!this.resizeObserverAdded) {
+      this.resizeObserverAdded = true;
+      const resizeObserver = new ResizeObserver(( /* entries */) => {
+        this.calculateScrubberLeftFromValue(this.value);
+        this.updateTrack();
+      });
+      resizeObserver.observe(this.wrapperElement);
+    }
+    if (!this.eventListenersAdded) {
+      this.eventListenersAdded = true;
+      this.scrubberElement.addEventListener('mousedown', (event) => {
+        event.preventDefault();
+        this.grabScrubber(event.offsetX, event.offsetY);
+      });
+      this.scrubberElement.addEventListener('touchstart', (event) => {
+        const rect = this.scrubberElement.getBoundingClientRect();
+        const x = event.targetTouches[0].pageX - rect.left;
+        const y = event.targetTouches[0].pageY - rect.top;
+        this.grabScrubber(x, y);
+      });
+      if (this.useControls) {
+        this.minusElement.addEventListener('click', () => {
+          this.stepLeft();
+        });
+        this.plusElement.addEventListener('click', () => {
+          this.stepRight();
+        });
+      }
+      if (this.inputElement) {
+        this.inputElement.addEventListener('keydown', (event) => {
+          event.stopPropagation();
+          if (event.key === 'Enter') {
+            let newValue = parseInt(this.inputElement.value);
+            if (newValue < this.getMin()) {
+              newValue = this.getMin();
+            }
+            else if (newValue > this.getMax()) {
+              newValue = this.getMax();
+            }
+            this.calculateScrubberLeftFromValue(newValue);
+            this.updateValueForced(newValue);
+            this.updateTrack();
+            this.inputElement.blur();
+            this.wrapperElement.focus();
+          }
+        });
+      }
+    }
+    this.calculateScrubberLeftFromValue(this.value);
+    this.updateTrack();
+  }
+  grabScrubber(xOffset, yOffset) {
+    if (this.readonlyState) {
+      return;
+    }
+    this.scrubberGrabPos = {
+      x: xOffset,
+      y: yOffset,
+    };
+    this.scrubberGrabbed = true;
+    this.scrubberInnerElement.classList.add('pressed');
+  }
+  calculateInputSizeFromMax() {
+    return this.max.length;
+  }
+  controlsStep(delta) {
+    if (this.readonlyState || this.disabled) {
+      return;
+    }
+    const trackWidth = this.getTrackWidth();
+    const percentage = this.scrubberLeft / trackWidth;
+    const numTicks = parseInt(this.ticks);
+    let currentValue = this.getMin() + percentage * (this.getMax() - this.getMin());
+    currentValue += delta;
+    if (currentValue < this.getMin()) {
+      currentValue = this.getMin();
+    }
+    else if (currentValue > this.getMax()) {
+      currentValue = this.getMax();
+    }
+    this.value = `${currentValue}`;
+    /* if snapping is enabled, instead just increment or decrement the current "fixed" value from our ticknumber array */
+    if (this.useSnapping && numTicks > 0) {
+      const stepDir = delta > 0 ? 1 : -1;
+      this.supposedValueSlot += stepDir;
+      if (this.supposedValueSlot < 0) {
+        this.supposedValueSlot = 0;
+      }
+      else if (this.supposedValueSlot > numTicks + 1) {
+        this.supposedValueSlot = numTicks + 1;
+      }
+    }
+    this.calculateScrubberLeftFromValue(currentValue);
+    this.updateTrack();
+    this.updateValue();
+  }
+  stepLeft() {
+    this.controlsStep(-parseInt(this.step));
+  }
+  stepRight() {
+    this.controlsStep(parseInt(this.step));
+  }
+  componentWillLoad() {
+    const numTicks = parseInt(this.ticks);
+    if (numTicks > 0) {
+      this.tickValues = [this.getMin()];
+      const step = (this.getMax() - this.getMin()) / (numTicks + 1);
+      for (let i = 1; i < numTicks + 1; i++) {
+        this.tickValues.push(this.getMin() + Math.round(step * i));
+      }
+      this.tickValues.push(this.getMax());
+    }
+    if (this.disabled !== null) {
+      this.disabledState = true;
+    }
+    else {
+      this.disabledState = false;
+    }
+    if (this.readOnly !== null) {
+      this.readonlyState = true;
+    }
+    else {
+      this.readonlyState = false;
+    }
+    this.useInput = false;
+    this.useControls = false;
+    if (this.controls !== null) {
+      this.useControls = true;
+    }
+    else if (this.input !== null) {
+      this.useInput = true;
+    }
+    this.useSmall = false;
+    if (this.size === 'sm') {
+      this.useSmall = true;
+    }
+    this.useSnapping = false;
+    if (this.snap !== null) {
+      this.useSnapping = true;
+    }
+    const min = this.getMin();
+    const max = this.getMax();
+    if (min > max) {
+      console.warn('min-prop must have a higher value than max-prop for the component to work correctly.');
+      this.disabledState = true;
+    }
+  }
+  render() {
+    return (index.h("div", { class: `sdds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}` }, index.h("input", { ref: (el) => {
+        this.nativeRangeInputElement = el;
+      }, class: "sdds-slider-native-element", type: "range", value: this.value, name: this.name, min: this.min, max: this.max, disabled: this.disabled, id: this.sliderId }), index.h("div", { class: `sdds-slider ${this.disabledState ? 'disabled' : ''} ${this.useSmall ? 'sdds-slider-small' : ''}`, ref: (el) => {
+        this.wrapperElement = el;
+      } }, this.useInput && (index.h("div", { class: "sdds-slider__input-values" }, index.h("div", { ref: (el) => {
+        this.minusElement = el;
+      }, class: "sdds-slider__input-value" }, this.min))), this.useControls && (index.h("div", { class: "sdds-slider__controls" }, index.h("div", { ref: (el) => (this.minusElement = el), class: "sdds-slider__control sdds-slider__control-minus" }, index.h("sdds-icon", { name: "minus", size: "16px" })))), index.h("div", { class: "sdds-slider-inner" }, index.h("label", { class: this.tickValues.length > 0 && 'offset' }, this.label), this.tickValues.length > 0 && (index.h("div", { class: "sdds-slider__value-dividers-wrapper" }, index.h("div", { ref: (el) => {
+        this.dividersElement = el;
+      }, class: "sdds-slider__value-dividers" }, this.tickValues.map((value) => (index.h("div", { class: "sdds-slider__value-divider" }, this.showTickNumbers && index.h("span", null, value))))))), index.h("div", { class: "sdds-slider__track", ref: (el) => {
+        this.trackElement = el;
+      }, tabindex: this.disabled ? '-1' : '0' }, index.h("div", { class: "sdds-slider__track-fill", ref: (el) => {
+        this.trackFillElement = el;
+      } }), index.h("div", { class: "sdds-slider__scrubber", ref: (el) => {
+        this.scrubberElement = el;
+      } }, this.tooltip !== null && (index.h("div", { class: "sdds-slider__value" }, this.value, index.h("svg", { width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "#37414F" })))), index.h("div", { class: "sdds-slider__scrubber-inner", ref: (el) => {
+        this.scrubberInnerElement = el;
+      } })))), this.useInput && (index.h("div", { class: "sdds-slider__input-values" }, index.h("div", { ref: (el) => {
+        this.minusElement = el;
+      }, class: "sdds-slider__input-value" }, this.max), index.h("div", { class: "sdds-slider__input-field-wrapper" }, index.h("input", { onFocus: (e) => {
+        if (this.readonlyState) {
+          e.preventDefault();
+          this.inputElement.blur();
+        }
+      }, size: this.calculateInputSizeFromMax(), class: "sdds-slider__input-field", value: this.value, ref: (el) => {
+        this.inputElement = el;
+      } })))), this.useControls && (index.h("div", { class: "sdds-slider__controls" }, index.h("div", { ref: (el) => (this.plusElement = el), class: "sdds-slider__control sdds-slider__control-plus" }, index.h("sdds-icon", { name: "plus", size: "16px" })))))));
+  }
+};
+Slider.style = sliderCss;
+
+exports.sdds_slider = Slider;
+
+//# sourceMappingURL=sdds-slider.cjs.entry.js.map