@scania/tegel 0.0.6 → 0.0.8

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

@@ -25,12 +25,12 @@ export class RadioButton {
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
-      "$": ["radio-button-component.scss"]
+      "$": ["radio-button.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["radio-button-component.css"]
+      "$": ["radio-button.css"]
     };
   }
   static get properties() {
@@ -47,7 +47,7 @@ export class RadioButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Name of radio button, used for reference."
+          "text": "Name of Radio Button, used for reference."
         },
         "attribute": "name",
         "reflect": false
@@ -81,7 +81,7 @@ export class RadioButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Unique radio button identifier."
+          "text": "Unique Radio Button identifier."
         },
         "attribute": "radio-id",
         "reflect": false,
@@ -99,7 +99,7 @@ export class RadioButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Decides if the radio button is checked or not."
+          "text": "Decides if the Radio Button is checked or not."
         },
         "attribute": "checked",
         "reflect": true,
@@ -117,7 +117,7 @@ export class RadioButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Decides if the radio button is required or not."
+          "text": "Decides if the Radio Button is required or not."
         },
         "attribute": "required",
         "reflect": false,
@@ -135,7 +135,7 @@ export class RadioButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Decides if the radio button is disabled or not."
+          "text": "Decides if the Radio Button is disabled or not."
         },
         "attribute": "disabled",
         "reflect": false,
@@ -152,7 +152,7 @@ export class RadioButton {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Sends unique radio button identifier and status when it is checked. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing."
+          "text": "Sends unique Radio Button identifier and status when it is checked. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing."
         },
         "complexType": {
           "original": "{\n    radioId: string;\n    value: string;\n  }",
@@ -163,4 +163,3 @@ export class RadioButton {
   }
   static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=radio-button.js.map

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

@@ -19,4 +19,3 @@ export class SideMenuCloseButton {
   }
   static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=side-menu-close-button.js.map

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

@@ -1,9 +1,23 @@
 import { h, Host } from '@stencil/core';
 export class SideMenuCollapseButton {
   constructor() {
+    this.handleClick = () => {
+      /** Emit public event that the user can prevent. */
+      const sddsCollapseEvent = this.sddsCollapse.emit({
+        collapsed: !this.collapsed,
+      });
+      /** If the public event was not prevented. */
+      if (!sddsCollapseEvent.defaultPrevented) {
+        /** Emit internal event that is listened to by other side-menu components */
+        this.collapsed = !this.collapsed;
+        this.internalSddsCollapse.emit({
+          collapsed: this.collapsed,
+        });
+      }
+    };
     this.collapsed = false;
   }
-  collapsedSideMenuEventHandler(event) {
+  collapseSideMenuEventHandler(event) {
     this.collapsed = event.detail.collapsed;
   }
   connectedCallback() {
@@ -11,12 +25,14 @@ export class SideMenuCollapseButton {
     this.collapsed = this.sideMenuEl.collapsed;
   }
   render() {
-    return (h(Host, { role: "button", tabindex: "0" }, h("div", { class: {
+    return (h(Host, { role: "button", tabindex: "0", onClick: () => {
+        this.handleClick();
+      } }, h("div", { class: {
         'wrapper': true,
         'state-collapsed': this.collapsed,
       } }, h("sdds-side-menu-item", { class: {
         button: true,
-      } }, h("a", null, h("svg", { class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), "Collapse")))));
+      } }, h("a", null, h("svg", { class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), h("slot", null))))));
   }
   static get is() { return "sdds-side-menu-collapse-button"; }
   static get encapsulation() { return "shadow"; }
@@ -35,15 +51,60 @@ export class SideMenuCollapseButton {
       "collapsed": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "sddsCollapse",
+        "name": "sddsCollapse",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event that is broadcasted when the collapse button is clicked.\nPrevent it to disable automatic collapsing, and set the collapsed prop on the Side Menu yourself."
+        },
+        "complexType": {
+          "original": "CollapseEvent",
+          "resolved": "{ collapsed: boolean; }",
+          "references": {
+            "CollapseEvent": {
+              "location": "import",
+              "path": "../side-menu"
+            }
+          }
+        }
+      }, {
+        "method": "internalSddsCollapse",
+        "name": "internalSddsCollapse",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Event that is broadcasted when the internal collapse state changes. Contains the future of the collapse state."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "CollapseEvent",
+          "resolved": "{ collapsed: boolean; }",
+          "references": {
+            "CollapseEvent": {
+              "location": "import",
+              "path": "../side-menu"
+            }
+          }
+        }
+      }];
+  }
   static get elementRef() { return "host"; }
   static get listeners() {
     return [{
-        "name": "sddsSideMenuCollapsed",
-        "method": "collapsedSideMenuEventHandler",
+        "name": "internalSddsSideMenuPropChange",
+        "method": "collapseSideMenuEventHandler",
         "target": "body",
         "capture": false,
         "passive": false
       }];
   }
 }
-//# sourceMappingURL=side-menu-collapse-button.js.map

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

@@ -20,7 +20,7 @@
   position: absolute;
   left: var(--side-menu-width);
   box-shadow: var(--sdds-nav-dropdown-menu-box);
-  background-color: var(--sdds-header-app-launcher-menu-background);
+  background-color: var(--sdds-grey-958);
 }
 :host .state-collapsed .menu .heading-collapsed {
   all: unset;

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,
@@ -164,4 +163,3 @@ export class SideMenuDropdown {
       }];
   }
 }
-//# sourceMappingURL=side-menu-dropdown.js.map

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,
@@ -43,4 +42,3 @@ export class SideMenuDropdownList {
       }];
   }
 }
-//# sourceMappingURL=side-menu-dropdown-list.js.map

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,12 +73,11 @@ 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
       }];
   }
 }
-//# sourceMappingURL=side-menu-dropdown-list-item.js.map

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,12 +116,11 @@ 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
       }];
   }
 }
-//# sourceMappingURL=side-menu-item.js.map

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

@@ -16,4 +16,3 @@ export class SideMenuOverlay {
     };
   }
 }
-//# sourceMappingURL=side-menu-overlay.js.map

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

@@ -94,4 +94,3 @@ export class SideMenuUser {
     };
   }
 }
-//# sourceMappingURL=side-menu-user.js.map

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

@@ -60,4 +60,3 @@ export class SideMenuUserImage {
     };
   }
 }
-//# sourceMappingURL=side-menu-user-image.js.map

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

@@ -58,4 +58,3 @@ export class SideMenuUserLabel {
     };
   }
 }
-//# sourceMappingURL=side-menu-user-label.js.map

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,5 +254,13 @@ export class SddsSideMenu {
         "methodName": "onIsOpenChange"
       }];
   }
+  static get listeners() {
+    return [{
+        "name": "internalSddsCollapse",
+        "method": "collapsedSideMenuEventHandler",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }
-//# sourceMappingURL=side-menu.js.map

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);