@scania/tegel 0.0.6 → 0.0.8

package/dist/esm/sdds-side-menu-dropdown.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, F as Fragment, H as Host, g as getElement } from './index-2d8c4bc9.js';
+import { r as registerInstance, h, F as Fragment, H as Host, g as getElement } from './index-54c55e8d.js';
 
-const sideMenuDropdownCss = ":host{display:block}:host .wrapper{display:flex;flex-direction:column}:host .dropdown-icon{margin-left:auto;transition:all 0.2s ease-in-out}:host .state-open .dropdown-icon{transform:rotateZ(180deg)}:host .state-open .menu{display:block}:host .state-collapsed .menu{--side-menu-width:68px;position:absolute;left:var(--side-menu-width);box-shadow:var(--sdds-nav-dropdown-menu-box);background-color:var(--sdds-header-app-launcher-menu-background)}:host .state-collapsed .menu .heading-collapsed{all:unset;box-sizing:border-box;padding:16px 24px 15px;min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls)}:host :not(.state-collapsed) .menu ::slotted(sdds-side-menu-dropdown-list){width:100%}:host .menu{display:none;flex-direction:column}";
+const sideMenuDropdownCss = ":host{display:block}:host .wrapper{display:flex;flex-direction:column}:host .dropdown-icon{margin-left:auto;transition:all 0.2s ease-in-out}:host .state-open .dropdown-icon{transform:rotateZ(180deg)}:host .state-open .menu{display:block}:host .state-collapsed .menu{--side-menu-width:68px;position:absolute;left:var(--side-menu-width);box-shadow:var(--sdds-nav-dropdown-menu-box);background-color:var(--sdds-grey-958)}:host .state-collapsed .menu .heading-collapsed{all:unset;box-sizing:border-box;padding:16px 24px 15px;min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls)}:host :not(.state-collapsed) .menu ::slotted(sdds-side-menu-dropdown-list){width:100%}:host .menu{display:none;flex-direction:column}";
 
 const SideMenuDropdown = class {
   constructor(hostRef) {
@@ -45,7 +45,6 @@ const SideMenuDropdown = class {
   }
   connectedCallback() {
     this.sideMenuEl = this.host.closest('sdds-side-menu');
-    this.collapsed = this.sideMenuEl.collapsed;
     this.open = this.defaultOpen;
   }
   render() {
@@ -62,5 +61,3 @@ const SideMenuDropdown = class {
 SideMenuDropdown.style = sideMenuDropdownCss;
 
 export { SideMenuDropdown as sdds_side_menu_dropdown };
-
-//# sourceMappingURL=sdds-side-menu-dropdown.entry.js.map

package/dist/esm/sdds-side-menu-item.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-2d8c4bc9.js';
-import { d as dfs } from './utils-a3c1c64a.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-54c55e8d.js';
+import { h as dfs } from './utils-9ac24735.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(--sdds-sidebar-side-menu-background-cover);font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-sidebar-side-menu-single-item-color)}:host .component ::slotted(a:focus-visible),:host .component ::slotted(button:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button){cursor:pointer;background-color:var(--sdds-sidebar-item-state-hover)}: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(--sdds-sidebar-side-menu-single-subitem-selected-border-color);padding-left:20px;background-color:var(--sdds-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 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(--sdds-sidebar-side-menu-background-cover);font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-sidebar-side-menu-single-item-color);cursor:pointer}:host .component sdds-icon{color:red !important}:host .component ::slotted(a:focus-visible),:host .component ::slotted(button:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button){background-color:var(--sdds-sidebar-item-state-hover)}:host .component:active ::slotted(a),:host .component:active ::slotted(button){background-color:var(--sdds-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(--sdds-sidebar-side-menu-single-subitem-selected-border-color);padding-left:20px;background-color:var(--sdds-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 SddsSideMenuItem = class {
   constructor(hostRef) {
@@ -39,18 +39,16 @@ const SddsSideMenuItem = class {
     }
   }
   connectedCallback() {
-    var _a;
     // 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('sdds-side-menu');
-    this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
   }
   componentDidLoad() {
     this.slotEl = this.host.shadowRoot.querySelector('slot');
     this.updateSlottedElements();
     this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
   }
-  collapsedSideMenuEventHandeler(event) {
+  collapseSideMenuEventHandler(event) {
     this.collapsed = event.detail.collapsed;
     this.updateSlottedElements();
   }
@@ -67,5 +65,3 @@ const SddsSideMenuItem = class {
 SddsSideMenuItem.style = sideMenuItemCss;
 
 export { SddsSideMenuItem as sdds_side_menu_item };
-
-//# sourceMappingURL=sdds-side-menu-item.entry.js.map

package/dist/esm/sdds-side-menu-overlay.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-2d8c4bc9.js';
+import { r as registerInstance, h, H as Host } from './index-54c55e8d.js';
 
 const sideMenuOverlayCss = ":host{position:absolute;width:100%;height:100%;background-color:black;transition:opacity 0.4s linear;opacity:0}";
 
@@ -13,5 +13,3 @@ const SideMenuOverlay = class {
 SideMenuOverlay.style = sideMenuOverlayCss;
 
 export { SideMenuOverlay as sdds_side_menu_overlay };
-
-//# sourceMappingURL=sdds-side-menu-overlay.entry.js.map

package/dist/esm/sdds-side-menu-user-image_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-2d8c4bc9.js';
+import { r as registerInstance, h, H as Host } from './index-54c55e8d.js';
 
 const sideMenuUserImageCss = ":host img,:host ::slotted(*){width:34px;height:34px;border-radius:50%}";
 
@@ -29,5 +29,3 @@ const SideMenuUserLabel = class {
 SideMenuUserLabel.style = sideMenuUserLabelCss;
 
 export { SideMenuUserImage as sdds_side_menu_user_image, SideMenuUserLabel as sdds_side_menu_user_label };
-
-//# sourceMappingURL=sdds-side-menu-user-image_2.entry.js.map

package/dist/esm/sdds-side-menu-user.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-2d8c4bc9.js';
+import { r as registerInstance, h, H as Host } from './index-54c55e8d.js';
 
 const sideMenuUserCss = ":host{display:flex;align-items:center;gap:12px;height:68px}:host sdds-side-menu-user-image{margin-left:-4px}";
 
@@ -17,5 +17,3 @@ const SideMenuUser = class {
 SideMenuUser.style = sideMenuUserCss;
 
 export { SideMenuUser as sdds_side_menu_user };
-
-//# sourceMappingURL=sdds-side-menu-user.entry.js.map

package/dist/esm/sdds-side-menu.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-2d8c4bc9.js';
-import { d as dfs, b as isFocusable } from './utils-a3c1c64a.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-54c55e8d.js';
+import { h as dfs, j as isFocusable } from './utils-9ac24735.js';
 
 const sideMenuCss = ":host([open]){pointer-events:auto;z-index:301}: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(--sdds-sidebar-side-menu-bottom-menu-border-top)}:host .wrapper ::slotted([slot=end]){border-top:1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top)}:host .wrapper .sdds-side-menu-list-end{margin-top:68px}:host .state-closed{display:none}:host .state-open slot[name=overlay]::slotted(sdds-side-menu-overlay){opacity:0.4}:host .state-open slot[name=close-button]::slotted(sdds-side-menu-close-button){opacity:1}:host .state-open .sdds-side-menu-wrapper{transform:scaleY(1)}:host .state-upper-slot-empty .sdds-side-menu-list-upper{display:none}:host .state-upper-slot-empty .sdds-side-menu-list-end{margin-top:0}:host .state-upper-slot-empty ::slotted([slot=end]){border-top:none;border-bottom:1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top)}@media (min-width: 992px){:host([persistent]){pointer-events:auto;position:static;width:272px;height:auto;border-right:1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top)}:host([persistent]) .wrapper slot[name=overlay]::slotted(sdds-side-menu-overlay){display:none}:host([persistent]) .wrapper slot[name=close-button]::slotted(sdds-side-menu-close-button){display:none}:host([persistent]) .wrapper .sdds-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 .sdds-side-menu-wrapper{display:flex;justify-content:space-between;flex-direction:column;flex-grow:1;background-color:var(--sdds-sidebar-side-menu-background-cover);transition:transform 250ms ease;transform-origin:top;transform:scaleY(0);overflow-y:auto}aside .sdds-side-menu-wrapper::-webkit-scrollbar{width:4px;background-color:inherit}aside .sdds-side-menu-wrapper::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-300)}aside .sdds-side-menu-wrapper ::-webkit-scrollbar-button{height:0;width:0}";
 
@@ -9,7 +9,9 @@ const INITIALIZE_ANIMATION_DELAY = 500;
 const SddsSideMenu = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.collapsedEventEmitter = createEvent(this, "sddsSideMenuCollapsed", 7);
+    this.sddsCollapse = createEvent(this, "sddsCollapse", 7);
+    this.internalSddsCollapse = createEvent(this, "internalSddsCollapse", 6);
+    this.internalSddsSideMenuPropChange = createEvent(this, "internalSddsSideMenuPropChange", 6);
     this.handleMatchesLgBreakpointChange = (e) => {
       const isBelowLg = !e.matches;
       if (isBelowLg) {
@@ -23,14 +25,13 @@ const SddsSideMenu = class {
     this.isClosed = true;
     this.isOpen = false;
     this.isClosing = false;
+    this.isCollapsed = false;
     this.isOpening = false;
   }
   connectedCallback() {
-    this.collapsedEventEmitter.emit({
-      collapsed: this.collapsed,
-    });
     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);
@@ -53,9 +54,12 @@ const SddsSideMenu = class {
     }
   }
   onCollapsedChange(newVal) {
-    this.collapsedEventEmitter.emit({
+    /** Emits the internal collapse event when the prop has changed. */
+    this.internalSddsSideMenuPropChange.emit({
+      changed: ['collapsed'],
       collapsed: newVal,
     });
+    this.isCollapsed = newVal;
   }
   onIsOpenChange(newVal) {
     if (newVal) {
@@ -63,6 +67,9 @@ const SddsSideMenu = class {
       firstFocusableElement.focus();
     }
   }
+  collapsedSideMenuEventHandler(event) {
+    this.collapsed = event.detail.collapsed;
+  }
   async setOpening() {
     this.isClosed = false;
     await new Promise((resolve) => {
@@ -102,5 +109,3 @@ const SddsSideMenu = class {
 SddsSideMenu.style = sideMenuCss;
 
 export { SddsSideMenu as sdds_side_menu };
-
-//# sourceMappingURL=sdds-side-menu.entry.js.map

package/dist/esm/sdds-slider.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-2d8c4bc9.js';
+import { r as registerInstance, c as createEvent, h } from './index-54c55e8d.js';
 
-const sliderCss = ":root,.sdds-mode-light{--sdds-slider-label-color:var(--sdds-grey-958);--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-slider-disabled:var(--sdds-grey-400);--sdds-slider-value-tooltip-background:var(--sdds-grey-800);--sdds-slider-value-tooltip-color:var(--sdds-white)}.sdds-mode-dark{--sdds-slider-label-color:var(--sdds-grey-100);--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-disabled:var(--sdds-grey-700);--sdds-slider-value-tooltip-background:var(--sdds-grey-200);--sdds-slider-value-tooltip-color:var(--sdds-grey-958)}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-value.min-value{padding-left:0px}.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;border-radius:4px 4px 0 0}.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);padding-bottom:16px;transform:translateY(-100%)}.sdds-slider label.offset{padding-bottom:34px}.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-slider-value-tooltip-background);color:var(--sdds-slider-value-tooltip-color)}.sdds-slider .sdds-slider__value svg{color:var(--sdds-slider-value-tooltip-background);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-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-disabled)}.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-value{color:var(--sdds-slider-disabled)}.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-disabled);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-disabled)}.sdds-slider.disabled .sdds-slider__value-dividers .sdds-slider__value-divider span{color:var(--sdds-slider-disabled)}.sdds-slider.disabled .sdds-slider__scrubber{pointer-events:none}.sdds-slider.disabled .sdds-slider__scrubber .sdds-slider__scrubber-inner{background-color:var(--sdds-slider-disabled);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 .sdds-slider__controls .sdds-slider__control{cursor:default}.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus sdds-icon,.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus sdds-icon{color:var(--sdds-slider-controls-color)}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control{cursor:default}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus sdds-icon,.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus sdds-icon{color:var(--sdds-slider-disabled)}";
+const sliderCss = "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-value.min-value{padding-left:0}.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;border-radius:4px 4px 0 0}.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);padding-bottom:16px;transform:translateY(-100%)}.sdds-slider label.offset{padding-bottom:34px}.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-slider-value-tooltip-background);color:var(--sdds-slider-value-tooltip-color)}.sdds-slider .sdds-slider__value svg{color:var(--sdds-slider-value-tooltip-background);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-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-disabled)}.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-value{color:var(--sdds-slider-disabled)}.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-disabled);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-disabled)}.sdds-slider.disabled .sdds-slider__value-dividers .sdds-slider__value-divider span{color:var(--sdds-slider-disabled)}.sdds-slider.disabled .sdds-slider__scrubber{pointer-events:none}.sdds-slider.disabled .sdds-slider__scrubber .sdds-slider__scrubber-inner{background-color:var(--sdds-slider-disabled);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 .sdds-slider__controls .sdds-slider__control{cursor:default}.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus sdds-icon,.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus sdds-icon{color:var(--sdds-slider-controls-color)}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control{cursor:default}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus sdds-icon,.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus sdds-icon{color:var(--sdds-slider-disabled)}";
 
 const Slider = class {
   constructor(hostRef) {
@@ -52,9 +52,13 @@ const Slider = class {
   handleKeydown(event) {
     switch (event.key) {
       case 'ArrowLeft':
+      case 'ArrowDown':
+      case '-':
         this.stepLeft();
         break;
       case 'ArrowRight':
+      case 'ArrowUp':
+      case '+':
         this.stepRight();
         break;
     }
@@ -90,6 +94,24 @@ const Slider = class {
     }
     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();
@@ -104,25 +126,11 @@ const Slider = class {
       console.warn('Slider component: Unsupported event!');
     this.supposedValueSlot = -1;
     if (this.useSnapping && numTicks > 0) {
-      const trackWidth = this.getTrackWidth();
-      const distanceBetweenTicks = Math.round(trackWidth / (numTicks + 1));
-      localLeft = Math.round(localLeft / distanceBetweenTicks) * distanceBetweenTicks;
-      let scrubberPositionPX = 0;
-      if (localLeft >= 0 && localLeft <= trackWidth) {
-        scrubberPositionPX = localLeft;
-      }
-      else if (localLeft > trackWidth) {
-        scrubberPositionPX = trackWidth;
-      }
-      else if (localLeft < 0) {
-        scrubberPositionPX = 0;
-      }
-      this.supposedValueSlot = Math.round(scrubberPositionPX / distanceBetweenTicks);
+      localLeft = this.updateSupposedValueSlot(localLeft);
     }
     this.scrubberLeft = this.constrainScrubber(localLeft);
     this.scrubberElement.style.left = `${this.scrubberLeft}px`;
     this.updateValue();
-    this.updateTrack();
   }
   updateTrack() {
     const trackWidth = this.getTrackWidth();
@@ -134,15 +142,18 @@ const Slider = class {
   }
   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.supposedValueSlot > 0) {
+    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) {
@@ -176,6 +187,7 @@ const Slider = class {
     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() {
@@ -241,18 +253,7 @@ const Slider = class {
     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;
@@ -263,10 +264,25 @@ const Slider = class {
       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();
     }
-    this.calculateScrubberLeftFromValue(currentValue);
-    this.updateTrack();
-    this.updateValue();
   }
   stepLeft() {
     this.controlsStep(-parseInt(this.step));
@@ -284,18 +300,8 @@ const Slider = class {
       }
       this.tickValues.push(this.getMax());
     }
-    if (this.disabled) {
-      this.disabledState = true;
-    }
-    else {
-      this.disabledState = false;
-    }
-    if (this.readOnly) {
-      this.readonlyState = true;
-    }
-    else {
-      this.readonlyState = false;
-    }
+    this.disabledState = this.disabled;
+    this.readonlyState = this.readOnly;
     this.useInput = false;
     this.useControls = false;
     if (this.controls) {
@@ -347,5 +353,3 @@ const Slider = class {
 Slider.style = sliderCss;
 
 export { Slider as sdds_slider };
-
-//# sourceMappingURL=sdds-slider.entry.js.map

package/dist/esm/sdds-spinner.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-2d8c4bc9.js';
+import { r as registerInstance, h } from './index-54c55e8d.js';
 
 const spinnerCss = ":root,html{--sdds-spinner-background:var(--sdds-blue-400);--sdds-spinner-background-inverted:var(--sdds-white);--sdds-spinner-speed:1.8s;--sdds-spinner-speed-lg:2s;--sdds-spinner-radius-xs:8px;--sdds-spinner-radius-sm:12px;--sdds-spinner-radius-md:26px;--sdds-spinner-radius-lg:42px;--sdds-spinner-radius:var(--sdds-spinner-radius-lg);--sdds-spinner-stroke-width-xs:3px;--sdds-spinner-stroke-width-sm:4px;--sdds-spinner-stroke-width-md:6px;--sdds-spinner-stroke-width-lg:8px;--sdds-spinner-stroke-width:var(--sdds-spinner-stroke-width-lg);--PI:3.14159265358979}:host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}.sdds-spinner-svg{width:calc(var(--sdds-spinner-radius) * 2);height:calc(var(--sdds-spinner-radius) * 2);transform:scale(-1, 1) rotate(-90deg)}.sdds-spinner-svg-xs{--sdds-spinner-radius:var(--sdds-spinner-radius-xs);--sdds-spinner-stroke-width:var(--sdds-spinner-stroke-width-xs);--sdds-spinner-animation-speed:var(--sdds-spinner-speed)}.sdds-spinner-svg-sm{--sdds-spinner-radius:var(--sdds-spinner-radius-sm);--sdds-spinner-stroke-width:var(--sdds-spinner-stroke-width-sm);--sdds-spinner-animation-speed:var(--sdds-spinner-speed)}.sdds-spinner-svg-md{--sdds-spinner-radius:var(--sdds-spinner-radius-md);--sdds-spinner-stroke-width:var(--sdds-spinner-stroke-width-md);--sdds-spinner-animation-speed:var(--sdds-spinner-speed)}.sdds-spinner-svg-lg{--sdds-spinner-radius:var(--sdds-spinner-radius-lg);--sdds-spinner-stroke-width:var(--sdds-spinner-stroke-width-lg);--sdds-spinner-animation-speed:var(--sdds-spinner-speed-lg)}.sdds-spinner-circle{cx:var(--sdds-spinner-radius);cy:var(--sdds-spinner-radius);r:calc(var(--sdds-spinner-radius) - var(--sdds-spinner-stroke-width) / 2);stroke-width:var(--sdds-spinner-stroke-width);fill:none;--sdds-spinner-stroke-dash:calc((2 * var(--PI)) * var(--sdds-spinner-radius));stroke-dasharray:var(--sdds-spinner-stroke-dash);stroke-width:var(--sdds-spinner-stroke-width);animation:dash var(--sdds-spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite}.sdds-spinner-circle-standard{stroke:var(--sdds-spinner-background)}.sdds-spinner-circle-inverted{stroke:var(--sdds-spinner-background-inverted)}@keyframes dash{from{stroke-dashoffset:calc(-1 * var(--sdds-spinner-stroke-dash))}to{stroke-dashoffset:var(--sdds-spinner-stroke-dash)}}";
 
@@ -15,5 +15,3 @@ const Spinner = class {
 Spinner.style = spinnerCss;
 
 export { Spinner as sdds_spinner };
-
-//# sourceMappingURL=sdds-spinner.entry.js.map

package/dist/esm/sdds-stepper-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-2d8c4bc9.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-54c55e8d.js';
 
 const sddsStepperItemCss = ":host{position:relative;display:table-cell}:host sdds-icon{line-height:1}:host [role=listItem]{display:flex;justify-content:start;flex-direction:row;align-items:center;gap:8px}:host [role=listItem].text-below{flex-direction:column}:host [role=listItem].lg{padding:0 20px;font:var(--sdds-detail-01);letter-spacing:var(--sdds-detail-01-ls)}:host [role=listItem].lg .content-container{height:30px;min-width:30px}:host [role=listItem].lg.vertical::after{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:36px;width:1px;top:40px;left:36px}:host [role=listItem].lg.horizontal::after{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 24px);right:0;top:18px}:host [role=listItem].lg.horizontal::before{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;right:calc(50% + 24px);left:0;top:18px}:host [role=listItem].lg.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:auto;right:-10px}:host [role=listItem].lg.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:-10px;right:auto}:host [role=listItem].sm{padding:0 20px;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls)}:host [role=listItem].sm .content-container{height:24px;min-width:24px}:host [role=listItem].sm.vertical::after{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listItem].sm.vertical::before{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listItem].sm.horizontal::after{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 16px + 8px);right:0;top:13px}:host [role=listItem].sm.horizontal::before{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:0;right:calc(50% + 24px);top:13px}:host [role=listItem].sm.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:auto;right:-10px}:host [role=listItem].sm.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:-10px;right:auto}:host [role=listItem] .content-container{border-radius:100px;border:1px solid var(--sdds-stepper-icon-background);display:flex;justify-content:center;align-items:center;position:relative}:host [role=listItem] .content-container.error{border-color:var(--sdds-negative);color:var(--sdds-negative)}:host [role=listItem] .content-container.success{background-color:var(--sdds-positive);border-color:var(--sdds-positive);color:var(--sdds-white)}:host [role=listItem] .content-container.upcoming{background-color:transparent;border-color:var(--sdds-stepper-label-border-color-upcoming);color:var(--sdds-stepper-label-text-color-upcoming);opacity:var(--sdds-stepper-label-text-opacity-upcoming)}:host [role=listItem] .label{text-align:center}:host [role=listItem] .label.lg{font:var(--sdds-detail-01);letter-spacing:var(--sdds-detail-01-ls)}:host [role=listItem] .label.sm{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls)}:host [role=listItem] .label.upcoming{color:var(--sdds-stepper-label-text-color-upcoming);opacity:var(--sdds-stepper-label-text-opacity-upcoming)}:host(.last) [role=listItem].sm::after,:host(.last) [role=listItem].lg::after{display:none}:host(.last) [role=listItem].sm.vertical::before{display:none}:host(.first) [role=listItem].sm::before,:host(.first) [role=listItem].lg::before{display:none}";
 
@@ -42,5 +42,3 @@ const SddsStepper = class {
 SddsStepper.style = sddsStepperItemCss;
 
 export { SddsStepper as sdds_stepper_item };
-
-//# sourceMappingURL=sdds-stepper-item.entry.js.map

package/dist/esm/sdds-stepper.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-2d8c4bc9.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-54c55e8d.js';
 
 const sddsStepperCss = ":host [role=list]{display:flex;justify-content:space-evenly;min-width:100%}:host [role=list]:not(.text-position-aside){display:table;table-layout:fixed;width:100%;list-style:none}:host [role=list].vertical{height:100%;display:flex;flex-direction:column;justify-content:unset;gap:52px}:host [role=list].vertical.sm{gap:36px}";
 
@@ -61,5 +61,3 @@ const SddsStepper = class {
 SddsStepper.style = sddsStepperCss;
 
 export { SddsStepper as sdds_stepper };
-
-//# sourceMappingURL=sdds-stepper.entry.js.map

package/dist/esm/sdds-table-body-row-expandable.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-2d8c4bc9.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-54c55e8d.js';
 
 const tableBodyRowExpandableCss = ":host{box-sizing:border-box;display:contents}:host *{box-sizing:border-box}:host .sdds-table__row,:host .sdds-table__row-extend{display:table-row;border-bottom:1px solid var(--sdds-data-table-divider);background-color:var(--sdds-data-table-body-row-background);transition:background-color 200ms ease;color:var(--sdds-data-table-color)}:host .sdds-table__row:hover,:host .sdds-table__row-extend:hover{background-color:var(--sdds-data-table-body-row-background-hover)}:host .sdds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:46px;cursor:pointer;padding:0 16px;position:relative}:host .sdds-table__expand-control-container .sdds-table__expand-input{all:unset;position:absolute;top:0;left:0;width:100%;height:100%;position:absolute;cursor:pointer}:host .sdds-table__expand-control-container .sdds-table__expand-input:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .sdds-table__expand-control-container .sdds-expendable-row-icon{height:16px;width:16px;transition:transform 200ms ease;transform:rotate(0)}:host .sdds-table__row-expand{display:none;transition:background-color 200ms ease}:host .sdds-table__row-expand .sdds-table__cell-expand{padding:16px 16px 16px 66px;color:var(--sdds-data-table-color)}:host(.sdds-table__row-expand--active) .sdds-table__row{background-color:var(--sdds-data-table-body-row-background-selected)}:host(.sdds-table__row-expand--active) .sdds-table__expand-control-container .sdds-expendable-row-icon{transform:rotate(180deg)}:host(.sdds-table__row-expand--active) .sdds-table__row-expand{background-color:var(--sdds-data-table-body-row-background-selected);display:table-row}:host(.sdds-table__compact) .sdds-table__expand-control-container{height:30px}:host(.sdds-table__compact) .sdds-table__row-expand .sdds-table__cell-expand{padding:8px 16px 8px 66px}:host(.sdds-table--divider) .sdds-table__cell--expand{border-right:1px solid var(--sdds-data-table-divider)}";
 
@@ -76,5 +76,3 @@ const TableBodyRowExpandable = class {
 TableBodyRowExpandable.style = tableBodyRowExpandableCss;
 
 export { TableBodyRowExpandable as sdds_table_body_row_expandable };
-
-//# sourceMappingURL=sdds-table-body-row-expandable.entry.js.map

package/dist/esm/sdds-table-body.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-2d8c4bc9.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-54c55e8d.js';
 
 const tableBodyCss = ":host,sdds-table-body{box-sizing:border-box;display:table-row-group}:host *,sdds-table-body *{box-sizing:border-box}:host .sdds-table__info-message,sdds-table-body .sdds-table__info-message{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--sdds-data-table-color);padding:var(--sdds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}";
 
@@ -83,8 +83,6 @@ const TableBody = class {
       this.internalSddsMainCheckboxChange.emit([this.tableId, this.mainCheckboxStatus]);
       this.selectedDataExporter();
     };
-    this.disableFilteringFunction = false;
-    this.disableSortingFunction = false;
     this.bodyData = undefined;
     this.enableDummyData = false;
     this.jsonData = JSON.stringify(jsonData);
@@ -148,21 +146,19 @@ const TableBody = class {
     };
   }
   sortData(keyValue, sortingDirection) {
-    if (!this.disableSortingFunction) {
-      if (this.enableMultiselect) {
-        // Uncheck all checkboxes as state of checkbox is lost on sorting. Do it only in case multiSelect is True.
-        this.uncheckAll();
-      }
-      // use spread operator to make enable sorting and modifying array, same as using .slice()
-      this.bodyDataManipulated = [...this.bodyDataManipulated];
-      this.bodyDataManipulated.sort(TableBody.compareValues(keyValue, sortingDirection));
+    if (this.enableMultiselect) {
+      // Uncheck all checkboxes as state of checkbox is lost on sorting. Do it only in case multiSelect is True.
+      this.uncheckAll();
     }
+    // use spread operator to make enable sorting and modifying array, same as using .slice()
+    this.bodyDataManipulated = [...this.bodyDataManipulated];
+    this.bodyDataManipulated.sort(TableBody.compareValues(keyValue, sortingDirection));
   }
   // Listen to sortColumnData from data-table-header-element - TODO
   updateOptionsContent(event) {
-    const [receivedID, receivedKeyValue, receivedSortingDirection] = event.detail;
-    if (this.tableId === receivedID) {
-      this.sortData(receivedKeyValue, receivedSortingDirection);
+    const { tableId, columnKey, sortingDirection } = event.detail;
+    if (this.tableId === tableId) {
+      this.sortData(columnKey, sortingDirection);
     }
   }
   headCheckboxListener(event) {
@@ -176,74 +172,54 @@ const TableBody = class {
     this.bodyCheckBoxClicked();
   }
   searchFunction(searchTerm) {
-    if (!this.disableFilteringFunction) {
-      /*
-      // Logic for filtering JSON data on all columns
-      // Really nice solution, do not delete, might be needed in future
-      // Reason to go with upper one is not to lose selected state on checkboxes
-      if (searchTerm.length > 0) {
-        this.bodyDataManipulated = this.bodyDataOriginal.filter((option) =>
-          Object.keys(option).some(
-            (key) =>
-              String(option[key] ?? '')
-                .toLowerCase()
-                .indexOf(searchTerm) >= 0
-          )
-        );
-      } else {
-        this.bodyDataManipulated = this.bodyDataOriginal;
+    // grab all rows in body
+    const dataRowsFiltering = this.host.querySelectorAll('sdds-table-body-row');
+    if (searchTerm.length > 0) {
+      if (this.enablePaginationTableBody) {
+        this.tempPaginationDisable = true;
       }
-  */
-      // grab all rows in body
-      const dataRowsFiltering = this.host.querySelectorAll('sdds-table-body-row');
-      if (searchTerm.length > 0) {
-        if (this.enablePaginationTableBody) {
-          this.tempPaginationDisable = true;
-        }
-        dataRowsFiltering.forEach((item) => {
-          const cells = item.querySelectorAll('sdds-body-cell');
-          const cellValuesArray = [];
-          // go through cells and save cell-values in array
-          cells.forEach((cellItem) => {
-            const cellValue = cellItem.getAttribute('cell-value').toLowerCase();
-            cellValuesArray.push(cellValue);
-          });
-          // iterate over array of values and see if one matches search string
-          const matchCounter = cellValuesArray.find((element) => element.includes(searchTerm));
-          // if matches, show parent row, otherwise hide the row
-          if (matchCounter) {
-            item.classList.remove('sdds-table__row--hidden');
-          }
-          else {
-            item.classList.add('sdds-table__row--hidden');
-          }
+      dataRowsFiltering.forEach((item) => {
+        const cells = item.querySelectorAll('sdds-body-cell');
+        const cellValuesArray = [];
+        // go through cells and save cell-values in array
+        cells.forEach((cellItem) => {
+          const cellValue = cellItem.getAttribute('cell-value').toLowerCase();
+          cellValuesArray.push(cellValue);
         });
-        this.disableAllSorting = true;
-        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;
-      }
-      else {
-        if (this.enablePaginationTableBody) {
-          this.tempPaginationDisable = false;
+        // iterate over array of values and see if one matches search string
+        const matchCounter = cellValuesArray.find((element) => element.includes(searchTerm));
+        // if matches, show parent row, otherwise hide the row
+        if (matchCounter) {
+          item.classList.remove('sdds-table__row--hidden');
         }
-        // Check if pagination is ON in order to prevent showing all rows
-        if (this.enablePaginationTableBody) ;
         else {
-          dataRowsFiltering.forEach((item) => {
-            item.classList.remove('sdds-table__row--hidden');
-          });
+          item.classList.add('sdds-table__row--hidden');
         }
-        this.disableAllSorting = false;
-        this.internalSddsSortingChange.emit([this.tableId, this.disableAllSorting]);
+      });
+      this.disableAllSorting = true;
+      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;
+    }
+    else {
+      if (this.enablePaginationTableBody) {
+        this.tempPaginationDisable = false;
       }
+      // If pagination is NOT enabled, we show all rows.
+      if (!this.enablePaginationTableBody) {
+        dataRowsFiltering.forEach((item) => {
+          item.classList.remove('sdds-table__row--hidden');
+        });
+      }
+      this.disableAllSorting = false;
+      this.internalSddsSortingChange.emit([this.tableId, this.disableAllSorting]);
     }
   }
-  // Listen to sddsFilter from tableToolbar component
+  /** Listens to internalSddsFilter from tableToolbar component */
   sddsFilterListener(event) {
-    if (this.tableId === event.detail[0]) {
-      this.searchFunction(event.detail[1]);
+    if (this.tableId === event.detail.tableId) {
+      this.searchFunction(event.detail.query);
     }
   }
   connectedCallback() {
@@ -282,5 +258,3 @@ const TableBody = class {
 TableBody.style = tableBodyCss;
 
 export { TableBody as sdds_table_body };
-
-//# sourceMappingURL=sdds-table-body.entry.js.map