@scania/tegel 0.0.8 → 0.0.10

package/dist/cjs/tds-side-menu-item.cjs.entry.js

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ee36ffa1.js');
+const utils = require('./utils-41de5fb2.js');
+
+const sideMenuItemCss = ":host{display:block}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:12px;padding:0 24px;border:none;background-color:var(--tds-sidebar-side-menu-background-cover);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color);cursor:pointer}:host .component tds-icon{color:red !important}:host .component ::slotted(a:focus-visible),:host .component ::slotted(button:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button){background-color:var(--tds-sidebar-item-state-hover)}:host .component:active ::slotted(a),:host .component:active ::slotted(button){background-color:var(--tds-sidemenu-item-state-active)}:host .component-collapsed ::slotted(a),:host .component-collapsed ::slotted(button){padding:0;display:flex;justify-content:center;align-items:center}:host .component-selected:not(:host .component-active) ::slotted(a),:host .component-selected:not(:host .component-active) ::slotted(button){border-left:4px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color);padding-left:20px;background-color:var(--tds-sidebar-item-state-selected)}@media (min-width: 992px){:host .component.component-collapsed ::slotted(a),:host .component.component-collapsed ::slotted(button){color:rgba(90, 90, 90, 0);overflow:hidden}}";
+
+const TdsSideMenuItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.selected = false;
+    this.active = false;
+    this.collapsed = false;
+  }
+  updateSlotted(searchPredicate, mutationCallback) {
+    const assignedElements = this.slotEl.assignedElements({ flatten: true });
+    const firstSlottedElement = assignedElements[0];
+    if (firstSlottedElement) {
+      const foundElement = utils.dfs(firstSlottedElement, searchPredicate);
+      if (foundElement) {
+        mutationCallback(foundElement);
+      }
+    }
+  }
+  /**
+   * This function is needed because we can't use CSS selectors to style something in the light dom
+   */
+  updateSlottedElements() {
+    if (this.slotEl) {
+      const isIconOrSvg = (element) => element.tagName.toLowerCase() === 'tds-icon' || element.tagName.toLowerCase() === 'svg';
+      const addIconClass = (element) => {
+        element.classList.add('__tds-side-menu-item-icon');
+        if (this.collapsed) {
+          element.classList.add('__tds-side-menu-item-icon-collapsed');
+        }
+        else {
+          element.classList.remove('__tds-side-menu-item-icon-collapsed');
+        }
+      };
+      this.updateSlotted(isIconOrSvg, addIconClass);
+    }
+  }
+  connectedCallback() {
+    // closest() will return null if side-menu-item is inside a shadowRoot that
+    // does not contain a side-menu. This is the case for the side-menu-dropdown.
+    this.sideMenuEl = this.host.closest('tds-side-menu');
+  }
+  componentDidLoad() {
+    this.slotEl = this.host.shadowRoot.querySelector('slot');
+    this.updateSlottedElements();
+    this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
+  }
+  collapseSideMenuEventHandler(event) {
+    this.collapsed = event.detail.collapsed;
+    this.updateSlottedElements();
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: {
+        'component': true,
+        'component-selected': this.selected,
+        'component-active': this.active,
+        'component-collapsed': this.collapsed,
+      } }, index.h("slot", null))));
+  }
+  get host() { return index.getElement(this); }
+};
+TdsSideMenuItem.style = sideMenuItemCss;
+
+exports.tds_side_menu_item = TdsSideMenuItem;

package/dist/cjs/tds-side-menu-overlay.cjs.entry.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ee36ffa1.js');
+
+const sideMenuOverlayCss = ":host{position:absolute;width:100%;height:100%;background-color:black;transition:opacity 0.4s linear;opacity:0}";
+
+const TdsSideMenuOverlay = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", null)));
+  }
+};
+TdsSideMenuOverlay.style = sideMenuOverlayCss;
+
+exports.tds_side_menu_overlay = TdsSideMenuOverlay;

package/dist/cjs/tds-side-menu-user-image_2.cjs.entry.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ee36ffa1.js');
+
+const sideMenuUserImageCss = ":host img,:host ::slotted(*){width:34px;height:34px;border-radius:50%}";
+
+const TdsSideMenuUserImage = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.src = undefined;
+    this.alt = undefined;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null), this.src && index.h("img", { src: this.src, alt: this.alt })));
+  }
+};
+TdsSideMenuUserImage.style = sideMenuUserImageCss;
+
+const sideMenuUserLabelCss = ":host{display:block;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color)}:host .subheading{color:var(--tds-grey-500)}";
+
+const TdsSideMenuUserLabel = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.heading = undefined;
+    this.subheading = undefined;
+  }
+  render() {
+    return (index.h(index.Host, null, this.heading, this.subheading && index.h("div", { class: "subheading" }, this.subheading)));
+  }
+};
+TdsSideMenuUserLabel.style = sideMenuUserLabelCss;
+
+exports.tds_side_menu_user_image = TdsSideMenuUserImage;
+exports.tds_side_menu_user_label = TdsSideMenuUserLabel;

package/dist/cjs/tds-side-menu-user.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ee36ffa1.js');
+
+const sideMenuUserCss = ":host{display:flex;align-items:center;gap:12px;height:68px}:host tds-side-menu-user-image{margin-left:-4px}";
+
+const TdsSideMenuUser = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.heading = undefined;
+    this.subheading = undefined;
+    this.imgSrc = undefined;
+    this.imgAlt = undefined;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("tds-side-menu-user-image", { src: this.imgSrc, alt: this.imgAlt }, index.h("slot", { name: "image" })), index.h("tds-side-menu-user-label", { heading: this.heading, subheading: this.subheading })));
+  }
+};
+TdsSideMenuUser.style = sideMenuUserCss;
+
+exports.tds_side_menu_user = TdsSideMenuUser;

package/dist/cjs/tds-side-menu.cjs.entry.js

@@ -0,0 +1,115 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ee36ffa1.js');
+const utils = require('./utils-41de5fb2.js');
+
+const sideMenuCss = ":host{pointer-events:none;display:block;position:fixed;top:0;width:100%;height:100%}:host .wrapper{height:inherit;}:host .wrapper slot:not([name])::slotted(*){border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .wrapper ::slotted([slot=end]){border-top:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .wrapper .tds-side-menu-list-end{margin-top:68px}:host .state-closed{display:none}:host .state-open slot[name=overlay]::slotted(tds-side-menu-overlay){opacity:0.4}:host .state-open slot[name=close-button]::slotted(tds-side-menu-close-button){opacity:1}:host .state-open .tds-side-menu-wrapper{transform:scaleY(1)}:host .state-upper-slot-empty .tds-side-menu-list-upper{display:none}:host .state-upper-slot-empty .tds-side-menu-list-end{margin-top:0}:host .state-upper-slot-empty ::slotted([slot=end]){border-top:none;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}@media (max-width: 992px){:host([open]){pointer-events:auto;z-index:301}}@media (min-width: 992px){:host([persistent]){pointer-events:auto;position:static;width:272px;height:auto;border-right:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host([persistent]) .wrapper slot[name=overlay]::slotted(tds-side-menu-overlay){display:none}:host([persistent]) .wrapper slot[name=close-button]::slotted(tds-side-menu-close-button){display:none}:host([persistent]) .wrapper .tds-side-menu-wrapper{transform:none}:host([persistent]) .menu{width:272px}:host([persistent]) .state-closed{display:block}:host([persistent]):host([collapsed]){width:69px}:host([persistent]):host([collapsed]) .menu{width:68px}:host([persistent]) slot[name=end]::slotted(*){display:none}}.menu{width:80%;height:inherit;position:relative;left:0;display:flex;flex-direction:column;justify-content:space-between}.menu *{padding:0;margin:0;box-sizing:border-box}@media (max-width: 384px){.menu{width:100%}}aside .tds-side-menu-wrapper{display:flex;justify-content:space-between;flex-direction:column;flex-grow:1;background-color:var(--tds-sidebar-side-menu-background-cover);transition:transform 250ms ease;transform-origin:top;transform:scaleY(0);overflow-y:auto}aside .tds-side-menu-wrapper::-webkit-scrollbar{width:4px;background-color:inherit}aside .tds-side-menu-wrapper::-webkit-scrollbar-thumb{background-color:var(--tds-grey-300)}aside .tds-side-menu-wrapper ::-webkit-scrollbar-button{height:0;width:0}";
+
+const GRID_LG_BREAKPOINT = '992px';
+const OPENING_ANIMATION_DURATION = 400;
+const INITIALIZE_ANIMATION_DELAY = 500;
+const TdsSideMenu = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.tdsCollapse = index.createEvent(this, "tdsCollapse", 7);
+    this.internalTdsCollapse = index.createEvent(this, "internalTdsCollapse", 6);
+    this.internalTdsSideMenuPropChange = index.createEvent(this, "internalTdsSideMenuPropChange", 6);
+    this.handleMatchesLgBreakpointChange = (e) => {
+      const isBelowLg = !e.matches;
+      if (isBelowLg) {
+        this.collapsed = false;
+      }
+    };
+    this.open = false;
+    this.persistent = false;
+    this.collapsed = false;
+    this.isUpperSlotEmpty = false;
+    this.isClosed = true;
+    this.isOpen = false;
+    this.isClosing = false;
+    this.isCollapsed = false;
+    this.isOpening = false;
+  }
+  connectedCallback() {
+    this.matchesLgBreakpointMq = window.matchMedia(`(min-width: ${GRID_LG_BREAKPOINT})`);
+    this.matchesLgBreakpointMq.addEventListener('change', this.handleMatchesLgBreakpointChange);
+    this.isCollapsed = this.collapsed;
+  }
+  componentDidLoad() {
+    setTimeout(() => this.onOpenChange(this.open), INITIALIZE_ANIMATION_DELAY);
+    const upperSlot = this.host.shadowRoot.querySelector('slot:not([name])');
+    const upperSlotElements = upperSlot.assignedElements();
+    const hasUpperSlotElements = (upperSlotElements === null || upperSlotElements === void 0 ? void 0 : upperSlotElements.length) > 0;
+    if (!hasUpperSlotElements) {
+      this.isUpperSlotEmpty = true;
+    }
+  }
+  disconnectedCallback() {
+    this.matchesLgBreakpointMq.removeEventListener('change', this.handleMatchesLgBreakpointChange);
+  }
+  async onOpenChange(newVal, oldVal) {
+    if (newVal && !oldVal) {
+      await this.setOpening();
+    }
+    if (!newVal && oldVal) {
+      await this.setClosing();
+    }
+  }
+  onCollapsedChange(newVal) {
+    /** Emits the internal collapse event when the prop has changed. */
+    this.internalTdsSideMenuPropChange.emit({
+      changed: ['collapsed'],
+      collapsed: newVal,
+    });
+    this.isCollapsed = newVal;
+  }
+  onIsOpenChange(newVal) {
+    if (newVal) {
+      const firstFocusableElement = utils.dfs(this.host, utils.isFocusable, true);
+      firstFocusableElement.focus();
+    }
+  }
+  collapsedSideMenuEventHandler(event) {
+    this.collapsed = event.detail.collapsed;
+  }
+  async setOpening() {
+    this.isClosed = false;
+    await new Promise((resolve) => {
+      setTimeout(resolve, 0);
+    });
+    this.isOpening = true;
+    await new Promise((resolve) => {
+      setTimeout(resolve, OPENING_ANIMATION_DURATION);
+    });
+    this.isOpening = false;
+    this.isOpen = true;
+  }
+  async setClosing() {
+    this.isOpen = false;
+    this.isClosing = true;
+    await new Promise((resolve) => {
+      setTimeout(resolve, OPENING_ANIMATION_DURATION);
+    });
+    this.isClosing = false;
+    this.isClosed = true;
+  }
+  render() {
+    return (index.h(index.Host, { role: "navigation" }, index.h("div", { class: {
+        'wrapper': true,
+        'state-upper-slot-empty': this.isUpperSlotEmpty,
+        'state-open': this.isOpen || this.isOpening,
+        'state-closed': this.isClosed,
+      } }, index.h("slot", { name: "overlay" }), index.h("aside", { class: `menu` }, index.h("slot", { name: "close-button" }), index.h("div", { class: "tds-side-menu-wrapper" }, index.h("ul", { class: `tds-side-menu-list tds-side-menu-list-upper` }, index.h("slot", null)), index.h("ul", { class: `tds-side-menu-list tds-side-menu-list-end` }, index.h("slot", { name: "end" }))), index.h("slot", { name: "sticky-end" })))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "open": ["onOpenChange"],
+    "collapsed": ["onCollapsedChange"],
+    "isOpening": ["onIsOpenChange"]
+  }; }
+};
+TdsSideMenu.style = sideMenuCss;
+
+exports.tds_side_menu = TdsSideMenu;

package/dist/cjs/tds-slider.cjs.entry.js

@@ -0,0 +1,356 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ee36ffa1.js');
+const utils = require('./utils-41de5fb2.js');
+
+const sliderCss = "tds-slider{box-sizing:border-box;width:100%}tds-slider *{box-sizing:border-box}tds-slider input[type=range].tds-slider-native-element{display:none}.tds-slider-wrapper{width:100%}.tds-slider-wrapper.read-only{pointer-events:none}.tds-slider{width:100%;display:flex;flex-wrap:nowrap;padding-top:65px}.tds-slider .tds-slider-inner{width:100%;height:20px;position:relative}.tds-slider .tds-slider__controls{position:relative;top:-25px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:pointer}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus{padding:18px 18px 18px 0}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus{padding:18px 0 18px 18px}.tds-slider .tds-slider__input-values{position:relative;top:-25px;display:flex;flex-wrap:nowrap;align-items:center}.tds-slider .tds-slider__input-values .tds-slider__input-value{user-select:none;padding:18px;color:var(--tds-grey-700);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}.tds-slider .tds-slider__input-values .tds-slider__input-value.min-value{padding-left:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper{background-color:var(--tds-slider-inputfield-background);display:flex;align-items:center;justify-content:center;border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-slider-input-inputfield-color);border:0;background-color:transparent;text-align:center;padding:12px;box-shadow:inset 0 -1px 0 var(--tds-slider-inputfield-box-shadow);border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:hover{box-shadow:inset 0 -1px 0 var(--tds-grey-600)}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:focus{box-shadow:inset 0 -2px 0 var(--tds-blue-400);outline:0}.tds-slider label{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);user-select:none;position:absolute;color:var(--tds-slider-label-color);padding-bottom:16px;transform:translateY(-100%)}.tds-slider label.offset{padding-bottom:34px}.tds-slider .tds-slider__value{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls);user-select:none;border-radius:4px;padding:8px;position:absolute;transform:translate(-50%, -100%);top:-24px;background-color:var(--tds-slider-value-tooltip-background);color:var(--tds-slider-value-tooltip-color)}.tds-slider .tds-slider__value svg{color:var(--tds-slider-value-tooltip-background);position:absolute;left:50%;transform:translateX(-50%);top:34px}.tds-slider .tds-slider__scrubber{position:absolute}.tds-slider .tds-slider__scrubber .tds-slider__scrubber-inner{width:20px;height:20px;border-radius:100%;background-color:var(--tds-slider-thumb-color);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.tds-slider .tds-slider__scrubber .tds-slider__scrubber-inner::before{content:\" \";display:none;width:48px;height:48px;background-color:var(--tds-slider-thumb-color);position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%, -50%)}.tds-slider .tds-slider__scrubber .tds-slider__scrubber-inner:hover::before{display:block;opacity:0.08}.tds-slider .tds-slider__scrubber .tds-slider__scrubber-inner.pressed{width:24px;height:24px}.tds-slider .tds-slider__scrubber .tds-slider__scrubber-inner.pressed::before{display:block;opacity:0.16 !important}.tds-slider .tds-slider__value-dividers-wrapper{position:relative;width:100%;pointer-events:none}.tds-slider .tds-slider__value-dividers{pointer-events:none;position:absolute;display:flex;justify-content:space-between;width:100%}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider{transform:translateY(-50%);height:16px;background-color:var(--tds-slider-divider-color);color:var(--tds-slider-divider-values-color);width:1px}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider span{display:block;user-select:none;color:var(-tds-grey-700);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);position:relative;top:-7px;left:50%;transform:translate(-50%, -100%);width:50px;text-align:center}.tds-slider .tds-slider__track{width:100%;height:2px;border-radius:1px;background-color:var(--tds-slider-track-color);position:relative}.tds-slider .tds-slider__track:focus{outline:0}.tds-slider .tds-slider__track:focus .tds-slider__scrubber .tds-slider__scrubber-inner{width:24px;height:24px}.tds-slider .tds-slider__track:focus .tds-slider__scrubber .tds-slider__scrubber-inner::before{display:block;opacity:0.08}.tds-slider .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-track-fill-color);border-radius:2px;height:4px;position:absolute;left:0;top:-1px}.tds-slider.disabled{cursor:not-allowed}.tds-slider.disabled>*{pointer-events:none}.tds-slider.disabled label{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus svg,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus svg{fill:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-value{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper{pointer-events:none}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{color:var(--tds-slider-disabled);pointer-events:none}.tds-slider.disabled .tds-slider__value{display:none}.tds-slider.disabled .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__scrubber{pointer-events:none}.tds-slider.disabled .tds-slider__scrubber .tds-slider__scrubber-inner{background-color:var(--tds-slider-disabled);cursor:default}.tds-slider.tds-slider-small .tds-slider__scrubber .tds-slider__scrubber-inner{width:16px;height:16px}.tds-slider.tds-slider-small .tds-slider__scrubber .tds-slider__scrubber-inner::before{width:40px;height:40px}.tds-slider.tds-slider-small .tds-slider__scrubber .tds-slider__scrubber-inner.pressed{width:20px;height:20px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-controls-color)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-disabled)}";
+
+const TdsSlider = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.tdsChange = index.createEvent(this, "tdsChange", 6);
+    this.wrapperElement = null;
+    this.scrubberElement = null;
+    this.scrubberInnerElement = null;
+    this.trackElement = null;
+    this.trackFillElement = null;
+    this.minusElement = null;
+    this.plusElement = null;
+    this.inputElement = null;
+    this.scrubberGrabbed = false;
+    this.scrubberLeft = 0;
+    this.tickValues = [];
+    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 = false;
+    this.disabled = false;
+    this.readOnly = false;
+    this.controls = false;
+    this.input = false;
+    this.step = '1';
+    this.name = '';
+    this.scrubberSize = 'lg';
+    this.snap = false;
+    this.sliderId = utils.generateUniqueId();
+  }
+  /** 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':
+      case 'ArrowDown':
+      case '-':
+        this.stepLeft();
+        break;
+      case 'ArrowRight':
+      case 'ArrowUp':
+      case '+':
+        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;
+    }
+    this.scrubberCore(event);
+  }
+  handleTouchMove(event) {
+    event.preventDefault();
+    if (!this.scrubberGrabbed) {
+      return;
+    }
+    this.scrubberCore(event);
+  }
+  updateSupposedValueSlot(localLeft) {
+    const numTicks = parseInt(this.ticks);
+    const trackWidth = this.getTrackWidth();
+    const distanceBetweenTicks = Math.round(trackWidth / (numTicks + 1));
+    const snappedLocalLeft = Math.round(localLeft / distanceBetweenTicks) * distanceBetweenTicks;
+    let scrubberPositionPX = 0;
+    if (snappedLocalLeft >= 0 && snappedLocalLeft <= trackWidth) {
+      scrubberPositionPX = snappedLocalLeft;
+    }
+    else if (snappedLocalLeft > trackWidth) {
+      scrubberPositionPX = trackWidth;
+    }
+    else if (snappedLocalLeft < 0) {
+      scrubberPositionPX = 0;
+    }
+    this.supposedValueSlot = Math.round(scrubberPositionPX / distanceBetweenTicks);
+    return snappedLocalLeft;
+  }
+  scrubberCore(event) {
+    const numTicks = parseInt(this.ticks);
+    const trackRect = this.trackElement.getBoundingClientRect();
+    let localLeft = 0;
+    if (event.type === 'mousemove') {
+      localLeft = event.clientX - trackRect.left;
+    }
+    else if (event.type === 'touchmove') {
+      localLeft = event.touches[0].clientX - trackRect.left;
+    }
+    else
+      console.warn('Slider component: Unsupported event!');
+    this.supposedValueSlot = -1;
+    if (this.useSnapping && numTicks > 0) {
+      localLeft = this.updateSupposedValueSlot(localLeft);
+    }
+    this.scrubberLeft = this.constrainScrubber(localLeft);
+    this.scrubberElement.style.left = `${this.scrubberLeft}px`;
+    this.updateValue();
+  }
+  updateTrack() {
+    const trackWidth = this.getTrackWidth();
+    const percentageFilled = (this.scrubberLeft / trackWidth) * 100;
+    this.trackFillElement.style.width = `${percentageFilled}%`;
+  }
+  dispatchChangeEvent() {
+    this.tdsChange.emit({ value: this.value });
+  }
+  updateValue() {
+    const trackWidth = this.getTrackWidth();
+    const numTicks = parseInt(this.ticks);
+    /* 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.useSnapping && numTicks) {
+      const supposedValue = this.tickValues[this.supposedValueSlot];
+      this.value = `${supposedValue}`;
+      this.calculateScrubberLeftFromValue(supposedValue);
+    }
+    else {
+      const percentage = this.scrubberLeft / trackWidth;
+      this.value = `${Math.trunc(this.getMin() + percentage * (this.getMax() - this.getMin()))}`;
+    }
+    this.updateTrack();
+    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.updateSupposedValueSlot(this.scrubberLeft);
+    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();
+      });
+      this.scrubberElement.addEventListener('touchstart', () => {
+        this.grabScrubber();
+      });
+      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() {
+    if (this.readonlyState) {
+      return;
+    }
+    this.scrubberGrabbed = true;
+    this.scrubberInnerElement.classList.add('pressed');
+  }
+  calculateInputSizeFromMax() {
+    return this.max.length;
+  }
+  controlsStep(delta) {
+    if (this.readonlyState || this.disabled) {
+      return;
+    }
+    const numTicks = parseInt(this.ticks);
+    /* 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.updateValue();
+    }
+    else {
+      const trackWidth = this.getTrackWidth();
+      const percentage = this.scrubberLeft / trackWidth;
+      let currentValue = this.getMin() + percentage * (this.getMax() - this.getMin());
+      currentValue += delta;
+      currentValue = Math.round(currentValue);
+      if (currentValue < this.getMin()) {
+        currentValue = this.getMin();
+      }
+      else if (currentValue > this.getMax()) {
+        currentValue = this.getMax();
+      }
+      this.value = `${currentValue}`;
+      this.calculateScrubberLeftFromValue(this.value);
+      this.updateValueForced(currentValue);
+      this.updateTrack();
+    }
+  }
+  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());
+    }
+    this.readonlyState = this.readOnly;
+    this.useInput = false;
+    this.useControls = false;
+    if (this.controls) {
+      this.useControls = true;
+    }
+    else if (this.input) {
+      this.useInput = true;
+    }
+    this.useSmall = this.scrubberSize === 'sm';
+    this.useSnapping = this.snap;
+    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.disabled = true;
+    }
+  }
+  render() {
+    return (index.h("div", { class: `tds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}` }, index.h("input", { class: "tds-slider-native-element", type: "range", value: this.value, name: this.name, min: this.min, max: this.max, disabled: this.disabled }), index.h("div", { class: `tds-slider ${this.disabled ? 'disabled' : ''} ${this.useSmall ? 'tds-slider-small' : ''}`, ref: (el) => {
+        this.wrapperElement = el;
+      } }, index.h("label", { class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (index.h("div", { class: "tds-slider__input-values" }, index.h("div", { ref: (el) => {
+        this.minusElement = el;
+      }, class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (index.h("div", { class: "tds-slider__controls" }, index.h("div", { ref: (el) => {
+        this.minusElement = el;
+      }, class: "tds-slider__control tds-slider__control-minus" }, index.h("tds-icon", { name: "minus", size: "16px" })))), index.h("div", { class: "tds-slider-inner" }, this.tickValues.length > 0 && (index.h("div", { class: "tds-slider__value-dividers-wrapper" }, index.h("div", { class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (index.h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && index.h("span", null, value))))))), index.h("div", { class: "tds-slider__track", ref: (el) => {
+        this.trackElement = el;
+      }, tabindex: this.disabled ? '-1' : '0' }, index.h("div", { class: "tds-slider__track-fill", ref: (el) => {
+        this.trackFillElement = el;
+      } }), index.h("div", { class: "tds-slider__scrubber", ref: (el) => {
+        this.scrubberElement = el;
+      } }, this.tooltip && (index.h("div", { class: "tds-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: "currentColor" })))), index.h("div", { class: "tds-slider__scrubber-inner", ref: (el) => {
+        this.scrubberInnerElement = el;
+      } })))), this.useInput && (index.h("div", { class: "tds-slider__input-values" }, index.h("div", { ref: (el) => {
+        this.minusElement = el;
+      }, class: "tds-slider__input-value" }, this.max), index.h("div", { class: "tds-slider__input-field-wrapper" }, index.h("input", { onFocus: (e) => {
+        if (this.readonlyState) {
+          e.preventDefault();
+          this.inputElement.blur();
+        }
+      }, size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, ref: (el) => {
+        this.inputElement = el;
+      } })))), this.useControls && (index.h("div", { class: "tds-slider__controls" }, index.h("div", { ref: (el) => {
+        this.plusElement = el;
+      }, class: "tds-slider__control tds-slider__control-plus" }, index.h("tds-icon", { name: "plus", size: "16px" })))))));
+  }
+};
+TdsSlider.style = sliderCss;
+
+exports.tds_slider = TdsSlider;

package/dist/cjs/tds-spinner.cjs.entry.js

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