@scania/tegel 0.0.7 → 0.0.8

package/dist/collection/components/side-menu/webcomponent/side-menu-dropdown/side-menu-dropdown.js

@@ -41,7 +41,6 @@ export class SideMenuDropdown {
   }
   connectedCallback() {
     this.sideMenuEl = this.host.closest('sdds-side-menu');
-    this.collapsed = this.sideMenuEl.collapsed;
     this.open = this.defaultOpen;
   }
   render() {
@@ -132,7 +131,7 @@ export class SideMenuDropdown {
   static get elementRef() { return "host"; }
   static get listeners() {
     return [{
-        "name": "sddsSideMenuCollapsed",
+        "name": "internalSddsSideMenuPropChange",
         "method": "collapsedSideMenuEventHandler",
         "target": "body",
         "capture": false,

package/dist/collection/components/side-menu/webcomponent/side-menu-dropdown-list/side-menu-dropdown-list.js

@@ -8,7 +8,6 @@ export class SideMenuDropdownList {
   }
   connectedCallback() {
     this.sideMenuEl = this.host.closest('sdds-side-menu');
-    this.collapsed = this.sideMenuEl.collapsed;
   }
   render() {
     return (h(Host, { role: "list" }, h("div", { class: {
@@ -35,7 +34,7 @@ export class SideMenuDropdownList {
   static get elementRef() { return "host"; }
   static get listeners() {
     return [{
-        "name": "sddsSideMenuCollapsed",
+        "name": "internalSddsSideMenuPropChange",
         "method": "collapsedSideMenuEventHandler",
         "target": "body",
         "capture": false,

package/dist/collection/components/side-menu/webcomponent/side-menu-dropdown-list-item/side-menu-dropdown-list-item.css

@@ -26,7 +26,12 @@
 }
 :host .component ::slotted(a:hover),
 :host .component ::slotted(button:hover) {
-  background-color: var(--sdds-nav-item-background-hover);
+  background-color: var(--sdds-header-nav-item-dropdown-opened-background-hover);
+  cursor: pointer;
+}
+:host .component ::slotted(a:active),
+:host .component ::slotted(button:active) {
+  background-color: var(--sdds-header-nav-item-dropdown-opened-background-active) !important;
   cursor: pointer;
 }
 :host .component ::slotted(a:focus-visible) {
@@ -37,7 +42,7 @@
 :host .component.component-selected ::slotted(button) {
   border-left: 4px solid var(--sdds-nav-item-border-color-active);
   padding-left: 20px;
-  background-color: var(--sdds-nav-item-background-selected);
+  background-color: var(--sdds-header-nav-item-dropdown-opened-background-selected);
 }
 :host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(a),
 :host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(button) {

package/dist/collection/components/side-menu/webcomponent/side-menu-dropdown-list-item/side-menu-dropdown-list-item.js

@@ -5,12 +5,11 @@ export class SideMenuDropdownListItem {
     this.dropdownHasIcon = false;
     this.collapsed = false;
   }
-  collapsedSideMenuEventHandeler(event) {
+  collapseSideMenuEventHandler(event) {
     this.collapsed = event.detail.collapsed;
   }
   connectedCallback() {
     this.sideMenuEl = this.host.closest('sdds-side-menu');
-    this.collapsed = this.sideMenuEl.collapsed;
   }
   componentDidLoad() {
     var _a;
@@ -74,8 +73,8 @@ export class SideMenuDropdownListItem {
   static get elementRef() { return "host"; }
   static get listeners() {
     return [{
-        "name": "sddsSideMenuCollapsed",
-        "method": "collapsedSideMenuEventHandeler",
+        "name": "internalSddsSideMenuPropChange",
+        "method": "collapseSideMenuEventHandler",
         "target": "body",
         "capture": false,
         "passive": false

package/dist/collection/components/side-menu/webcomponent/side-menu-item/side-menu-item.css

@@ -19,6 +19,10 @@
   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) {
@@ -27,9 +31,12 @@
 }
 :host .component:hover ::slotted(a),
 :host .component:hover ::slotted(button) {
-  cursor: pointer;
   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;

package/dist/collection/components/side-menu/webcomponent/side-menu-item/side-menu-item.js

@@ -35,18 +35,16 @@ export class SddsSideMenuItem {
     }
   }
   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();
   }
@@ -118,8 +116,8 @@ export class SddsSideMenuItem {
   static get elementRef() { return "host"; }
   static get listeners() {
     return [{
-        "name": "sddsSideMenuCollapsed",
-        "method": "collapsedSideMenuEventHandeler",
+        "name": "internalSddsSideMenuPropChange",
+        "method": "collapseSideMenuEventHandler",
         "target": "body",
         "capture": false,
         "passive": false

package/dist/collection/components/side-menu/webcomponent/side-menu.js

@@ -18,14 +18,13 @@ export class SddsSideMenu {
     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);
@@ -48,9 +47,12 @@ export class SddsSideMenu {
     }
   }
   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) {
@@ -58,6 +60,9 @@ export class SddsSideMenu {
       firstFocusableElement.focus();
     }
   }
+  collapsedSideMenuEventHandler(event) {
+    this.collapsed = event.detail.collapsed;
+  }
   async setOpening() {
     this.isClosed = false;
     await new Promise((resolve) => {
@@ -113,7 +118,7 @@ export class SddsSideMenu {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If the side menu is open or not."
+          "text": "Applicable only for mobile. If the Side Menu is open or not."
         },
         "attribute": "open",
         "reflect": true,
@@ -131,7 +136,7 @@ export class SddsSideMenu {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If the side menu should always be shown on desktop screens to the side."
+          "text": "Applicable only for desktop. If the Side Menu should always be shown."
         },
         "attribute": "persistent",
         "reflect": true,
@@ -149,7 +154,7 @@ export class SddsSideMenu {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If the side menu is collapsed. Only a persistent desktop menu can be collapsed."
+          "text": "If the Side Menu is collapsed. Only a persistent desktop menu can be collapsed.\nNOTE: Only use this if you have prevented the automatic collapsing with preventDefault on the sddsCollapse event."
         },
         "attribute": "collapsed",
         "reflect": true,
@@ -163,27 +168,74 @@ export class SddsSideMenu {
       "isClosed": {},
       "isOpen": {},
       "isClosing": {},
+      "isCollapsed": {},
       "isOpening": {}
     };
   }
   static get events() {
     return [{
-        "method": "collapsedEventEmitter",
-        "name": "sddsSideMenuCollapsed",
+        "method": "sddsCollapse",
+        "name": "sddsCollapse",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Broadcasts collapsed state to child components."
+          "text": "Event that is emitted when the Side Menu is collapsed."
+        },
+        "complexType": {
+          "original": "CollapseEvent",
+          "resolved": "{ collapsed: boolean; }",
+          "references": {
+            "CollapseEvent": {
+              "location": "local",
+              "path": "/Users/johnny/dev/scania/tegel/core/src/components/side-menu/webcomponent/side-menu.tsx"
+            }
+          }
+        }
+      }, {
+        "method": "internalSddsCollapse",
+        "name": "internalSddsCollapse",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Broadcasts collapsed state to child components."
+            }],
+          "text": ""
         },
         "complexType": {
-          "original": "CollapsedEvent",
-          "resolved": "CollapsedEvent",
+          "original": "CollapseEvent",
+          "resolved": "{ collapsed: boolean; }",
           "references": {
-            "CollapsedEvent": {
+            "CollapseEvent": {
               "location": "local",
-              "path": "/Users/johnny/dev/scania/sdds/tegel/src/components/side-menu/webcomponent/side-menu.tsx"
+              "path": "/Users/johnny/dev/scania/tegel/core/src/components/side-menu/webcomponent/side-menu.tsx"
+            }
+          }
+        }
+      }, {
+        "method": "internalSddsSideMenuPropChange",
+        "name": "internalSddsSideMenuPropChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Broadcasts collapsed state to child components."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "InternalSddsSideMenuPropChange",
+          "resolved": "{ changed: \"collapsed\"[]; } & Partial<Props>",
+          "references": {
+            "InternalSddsSideMenuPropChange": {
+              "location": "local",
+              "path": "/Users/johnny/dev/scania/tegel/core/src/components/side-menu/webcomponent/side-menu.tsx"
             }
           }
         }
@@ -202,4 +254,13 @@ export class SddsSideMenu {
         "methodName": "onIsOpenChange"
       }];
   }
+  static get listeners() {
+    return [{
+        "name": "internalSddsCollapse",
+        "method": "collapsedSideMenuEventHandler",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/slider/slider.css

@@ -1,38 +1,3 @@
-: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%;
@@ -90,7 +55,7 @@ sdds-slider input[type=range].sdds-slider-native-element {
   letter-spacing: var(--sdds-detail-02-ls);
 }
 .sdds-slider .sdds-slider__input-values .sdds-slider__input-value.min-value {
-  padding-left: 0px;
+  padding-left: 0;
 }
 .sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper {
   background-color: var(--sdds-slider-inputfield-background);

package/dist/collection/components/slider/slider.js

@@ -47,9 +47,13 @@ export class Slider {
   handleKeydown(event) {
     switch (event.key) {
       case 'ArrowLeft':
+      case 'ArrowDown':
+      case '-':
         this.stepLeft();
         break;
       case 'ArrowRight':
+      case 'ArrowUp':
+      case '+':
         this.stepRight();
         break;
       default:
@@ -87,6 +91,24 @@ export class Slider {
     }
     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();
@@ -101,25 +123,11 @@ export class Slider {
       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();
@@ -131,15 +139,18 @@ export class Slider {
   }
   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) {
@@ -173,6 +184,7 @@ export class Slider {
     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() {
@@ -238,18 +250,7 @@ export class Slider {
     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;
@@ -260,10 +261,25 @@ export class Slider {
       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));
@@ -281,18 +297,8 @@ export class Slider {
       }
       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) {

package/dist/collection/components/spinner/spinner.js

@@ -32,7 +32,7 @@ export class Spinner {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Size of spinner"
+          "text": "Size of the Spinner"
         },
         "attribute": "size",
         "reflect": false,
@@ -50,7 +50,7 @@ export class Spinner {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Variant of spinner"
+          "text": "Variant of the Spinner"
         },
         "attribute": "variant",
         "reflect": false,

package/dist/collection/components/stepper/sdds-stepper.js

@@ -168,7 +168,7 @@ export class SddsStepper {
           "references": {
             "InternalSddsStepperPropChange": {
               "location": "local",
-              "path": "/Users/johnny/dev/scania/sdds/tegel/src/components/stepper/sdds-stepper.tsx"
+              "path": "/Users/johnny/dev/scania/tegel/core/src/components/stepper/sdds-stepper.tsx"
             }
           }
         }

package/dist/collection/components/tabs/inline-tabs/inline-tabs.js

@@ -34,7 +34,7 @@ export class InlineTabsFullbleed {
       this.children = this.children.map((item, index) => {
         item.addEventListener('click', () => {
           const sddsChangeEvent = this.sddsChange.emit({
-            selectedTabIndex: this.children.indexOf(item)
+            selectedTabIndex: this.children.indexOf(item),
           });
           if (!sddsChangeEvent.defaultPrevented) {
             if (!item.disabled) {

package/dist/collection/components/toast/sdds-toast.js

@@ -49,11 +49,11 @@ export class SddsToast {
     this.hasSubheader = undefined;
     this.hasLink = undefined;
   }
-  /** Hides the toast. */
+  /** Hides the Toast. */
   async hideToast() {
     this.handleClose();
   }
-  /** Shows the toast. */
+  /** Shows the Toast. */
   async showToast() {
     this.handleShow();
   }
@@ -98,7 +98,7 @@ export class SddsToast {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "ID for the toast. Randomly generated if not specified."
+          "text": "ID for the Toast. Randomly generated if not specified."
         },
         "attribute": "toast-id",
         "reflect": false,
@@ -150,7 +150,7 @@ export class SddsToast {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Type of toast."
+          "text": "Type of Toast."
         },
         "attribute": "type",
         "reflect": false,
@@ -168,7 +168,7 @@ export class SddsToast {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Hides the toast."
+          "text": "Hides the Toast."
         },
         "attribute": "hidden",
         "reflect": false,
@@ -186,7 +186,7 @@ export class SddsToast {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "ARIA role for the toast."
+          "text": "ARIA role for the Toast."
         },
         "attribute": "toast-role",
         "reflect": false,
@@ -209,7 +209,7 @@ export class SddsToast {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Sends unique toast identifier component is closed."
+          "text": "Sends unique Toast identifier when component is closed."
         },
         "complexType": {
           "original": "{\n    toastId: string;\n  }",
@@ -232,7 +232,7 @@ export class SddsToast {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Hides the toast.",
+          "text": "Hides the Toast.",
           "tags": []
         }
       },
@@ -248,7 +248,7 @@ export class SddsToast {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Shows the toast.",
+          "text": "Shows the Toast.",
           "tags": []
         }
       }