@scania/tegel 0.0.5 → 0.0.7

package/dist/collection/components/message/message.stories.js

@@ -95,7 +95,7 @@ const Template = ({ modeVariant, messageType, showExtendedMessage, noIcon, iconT
     : `sdds-message-icon-${messageType.toLowerCase()}`;
   const iconHtml = iconType === 'Native'
     ? `<i class="sdds-message-icon sdds-icon ${iconClass} ${nativeIconNameLookup[messageType]}"></i>`
-    : `<div><sdds-icon class="sdds-message-icon ${iconClass}" name="${nativeIconNameLookup[messageType]}" size="20"></sdds-icon></div>`;
+    : `<div class="sdds-message-icon ${iconClass}"><sdds-icon name="${nativeIconNameLookup[messageType]}" size="20"></sdds-icon></div>`;
   return formatHtmlPreview(`
     <style>
       .demo-wrapper {
@@ -111,7 +111,9 @@ const Template = ({ modeVariant, messageType, showExtendedMessage, noIcon, iconT
     : ''}
     <div class="demo-wrapper">
       <div class="sdds-message ${messageTypeClass} ${noIcon ? '' : 'sdds-message-icon-active'} ${showExtendedMessage ? 'sdds-message-extended-active' : ''} 
-      ${modeVariant === 'Inherit from parent' ? '' : `sdds-mode-variant-${modeVariant.toLowerCase()}`}">
+      ${modeVariant === 'Inherit from parent'
+    ? ''
+    : `sdds-mode-variant-${modeVariant.toLowerCase()}`}">
       ${noIcon ? '' : iconHtml}
       <h4 class="sdds-message-single">
         Single line message goes here.
@@ -124,4 +126,3 @@ const Template = ({ modeVariant, messageType, showExtendedMessage, noIcon, iconT
   `);
 };
 export const Native = Template.bind({});
-//# sourceMappingURL=message.stories.js.map

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

@@ -133,4 +133,3 @@ export class SddsMessage {
     };
   }
 }
-//# sourceMappingURL=sdds-message.js.map

package/dist/collection/components/message/sdds-message.stories.js

@@ -105,4 +105,3 @@ const Template = ({ modeVariant, messageType, header, extendedMessage, minimal,
     </div>
     `);
 export const WebComponent = Template.bind({});
-//# sourceMappingURL=sdds-message.stories.js.map

package/dist/collection/components/modal/modal-native.stories.js

@@ -135,4 +135,3 @@ const Template = ({ actions, size, headline, bodyText, showModal }) => formatHtm
   </script>
   `);
 export const Native = Template.bind({});
-//# sourceMappingURL=modal-native.stories.js.map

package/dist/collection/components/modal/modal-webcomponent.stories.js

@@ -95,4 +95,3 @@ const ModalTemplate = ({ actions, size, headline, bodyText, showModal }) => form
   </script>
   `);
 export const WebComponent = ModalTemplate.bind({});
-//# sourceMappingURL=modal-webcomponent.stories.js.map

package/dist/collection/components/modal/modal.js

@@ -15,7 +15,6 @@ export class Modal {
     this.initializeReferenceElement = (referenceEl) => {
       if (referenceEl) {
         referenceEl.addEventListener('click', (event) => {
-          event.stopPropagation();
           if (this.isShown) {
             this.handleClose(event);
           }
@@ -264,4 +263,3 @@ export class Modal {
   }
   static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=modal.js.map

package/dist/collection/components/popover-canvas/popover-canvas.js

@@ -270,4 +270,3 @@ export class PopoverCanvas {
       }];
   }
 }
-//# sourceMappingURL=popover-canvas.js.map

package/dist/collection/components/popover-canvas/popover-canvas.stories.js

@@ -89,4 +89,3 @@ const ComponentPopoverCanvas = ({ canvasPosition }) => {
     `);
 };
 export const Default = ComponentPopoverCanvas.bind({});
-//# sourceMappingURL=popover-canvas.stories.js.map

package/dist/collection/components/popover-menu/popover-menu-icons.stories.js

@@ -123,4 +123,3 @@ const Template = ({ menuPosition }) => {
     `);
 };
 export const WithIcons = Template.bind({});
-//# sourceMappingURL=popover-menu-icons.stories.js.map

package/dist/collection/components/popover-menu/popover-menu.js

@@ -218,4 +218,3 @@ export class PopoverMenu {
       }];
   }
 }
-//# sourceMappingURL=popover-menu.js.map

package/dist/collection/components/popover-menu/popover-menu.stories.js

@@ -116,4 +116,3 @@ const Template = ({ menuPosition }) => {
     `);
 };
 export const Default = Template.bind({});
-//# sourceMappingURL=popover-menu.stories.js.map

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

@@ -20,7 +20,7 @@ export default {
   },
   argTypes: {
     label: {
-      name: 'Label',
+      name: 'Label text',
       description: 'Sets the label for the radio button.',
       controls: {
         type: 'text',
@@ -61,7 +61,9 @@ const Template = ({ label, disabled }) => formatHtmlPreview(`
     ${disabled ? 'disabled' : ''}
     checked="true" 
   >
-    ${label} 1
+    <div slot="label">
+      ${label} 1
+    </div>
   </sdds-radio-button>
 
   <sdds-radio-button
@@ -71,7 +73,9 @@ const Template = ({ label, disabled }) => formatHtmlPreview(`
     required=false
     ${disabled ? 'disabled' : ''} 
   >
-    ${label} 2
+    <div slot="label">
+      ${label} 2
+    </div>
   </sdds-radio-button>
     
   </fieldset>
@@ -79,9 +83,8 @@ const Template = ({ label, disabled }) => formatHtmlPreview(`
   <!-- Script tag with eventlistener for demo purposes. -->
   <script>
   document.addEventListener('sddsChange', (event) => {
-    console.log('Radio button with id: ', event.detail.radioId, ' with value:', event.detail.value, ' was selected.')
+    console.log(event)
   })
   </script>
   `);
 export const WebComponent = Template.bind({});
-//# sourceMappingURL=radio-button-component.stories.js.map

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

@@ -1,6 +1,12 @@
 import { h } from '@stencil/core';
 export class RadioButton {
   constructor() {
+    this.handleChange = () => {
+      this.sddsChange.emit({
+        radioId: this.radioId,
+        value: this.value,
+      });
+    };
     this.name = undefined;
     this.value = undefined;
     this.radioId = crypto.randomUUID();
@@ -11,14 +17,9 @@ export class RadioButton {
   render() {
     return (h("div", { class: "sdds-radio-button" }, h("input", { class: "sdds-form-input", type: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked,
       // REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMENT HAS BEEN MADE!
-      // aria-labelledby={this.ariaLabelledBy} 
+      // aria-labelledby={this.ariaLabelledBy}
       // aria-describedby={this.host.getAttribute('aria-describedby')}
-      required: this.required, disabled: this.disabled, onChange: () => {
-        this.sddsChange.emit({
-          radioId: this.radioId,
-          value: this.value,
-        });
-      } }), h("label", { htmlFor: this.radioId }, h("slot", null))));
+      required: this.required, disabled: this.disabled, onChange: () => this.handleChange() }), h("label", { htmlFor: this.radioId }, h("slot", { name: "label" }))));
   }
   static get is() { return "sdds-radio-button"; }
   static get encapsulation() { return "scoped"; }
@@ -147,7 +148,7 @@ export class RadioButton {
         "method": "sddsChange",
         "name": "sddsChange",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
@@ -162,4 +163,3 @@ export class RadioButton {
   }
   static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=radio-button.js.map

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

@@ -18,7 +18,7 @@ export default {
   },
   argTypes: {
     label: {
-      name: 'Label',
+      name: 'Label text',
       description: 'Sets the label for the radio button.',
       control: {
         type: 'text',
@@ -69,4 +69,3 @@ const Template = ({ label, disabled }) => formatHtmlPreview(`
   </fieldset>
   `);
 export const Native = Template.bind({});
-//# sourceMappingURL=radio-button.stories.js.map

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

@@ -108,7 +108,7 @@ const Template = ({ showIcons, collapsed }) => {
           </li>
         </ul>
       </li>
-      <li class="sdds-sidebar-nav__item sdds-sidebar-nav__extended">
+      <li class="sdds-sidebar-nav__item sdds-sidebar-nav__item--selected sdds-sidebar-nav__extended">
       <button class="sdds-sidebar-nav__item-link">
       <div>
         <sdds-icon class="sdds-sidebar-nav__icon" name="truck" size="20px"></sdds-icon>
@@ -179,5 +179,4 @@ const Template = ({ showIcons, collapsed }) => {
 </script>
   `);
 };
-export const Default = Template.bind({});
-//# sourceMappingURL=side-menu.stories.js.map
+export const Native = Template.bind({});

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

@@ -0,0 +1,26 @@
+:host {
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+:host button {
+  height: 64px;
+  width: 100%;
+  text-align: left;
+  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);
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);
+}
+:host button:hover {
+  cursor: pointer;
+  background-color: var(--sdds-sidebar-item-state-hover);
+}
+:host button:focus-visible {
+  cursor: pointer;
+  border: 1px solid var(--sdds-sidebar-side-menu-single-subitem-selected-border-color);
+}

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

@@ -0,0 +1,21 @@
+import { h, Host } from '@stencil/core';
+import { inheritAriaAttributes } from '../../../../utils/utils';
+export class SideMenuCloseButton {
+  render() {
+    const buttonProps = Object.assign({ 'aria-label': 'Close' }, inheritAriaAttributes(this.host));
+    return (h(Host, null, h("button", Object.assign({}, buttonProps), h("sdds-icon", { name: "cross", size: "20px" }))));
+  }
+  static get is() { return "sdds-side-menu-close-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-close-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-close-button.css"]
+    };
+  }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,30 @@
+/*
+  Contains spacing variables for the layout
+*/
+/** The breakpoint at which the layout changes from fixed size to full-width. */
+:host {
+  position: sticky;
+  bottom: 0;
+  display: none;
+  height: 68px;
+  border-top: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);
+}
+:host .icon {
+  transform: rotateZ(90deg);
+  transition: all 0.2s ease-in-out;
+  width: 20px;
+  height: 20px;
+}
+:host .state-collapsed .icon {
+  transform: translateX(-50%) rotateZ(90deg) rotateX(180deg);
+  color: var(--sdds-sidebar-side-menu-single-item-color);
+  margin-left: 0;
+  position: absolute;
+  left: 50%;
+}
+
+@media (min-width: 992px) {
+  :host {
+    display: block;
+  }
+}

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

@@ -0,0 +1,48 @@
+import { h, Host } from '@stencil/core';
+export class SideMenuCollapseButton {
+  constructor() {
+    this.collapsed = false;
+  }
+  collapsedSideMenuEventHandler(event) {
+    this.collapsed = event.detail.collapsed;
+  }
+  connectedCallback() {
+    this.sideMenuEl = this.host.closest('sdds-side-menu');
+    this.collapsed = this.sideMenuEl.collapsed;
+  }
+  render() {
+    return (h(Host, { role: "button", tabindex: "0" }, 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")))));
+  }
+  static get is() { return "sdds-side-menu-collapse-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-collapse-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-collapse-button.css"]
+    };
+  }
+  static get states() {
+    return {
+      "collapsed": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "sddsSideMenuCollapsed",
+        "method": "collapsedSideMenuEventHandler",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,42 @@
+: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;
+}

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

@@ -0,0 +1,166 @@
+import { Fragment, h, Host } from '@stencil/core';
+export class SideMenuDropdown {
+  constructor() {
+    this.defaultOpen = false;
+    this.buttonLabel = undefined;
+    this.selected = false;
+    this.open = false;
+    this.hoverState = undefined;
+    this.collapsed = false;
+  }
+  collapsedSideMenuEventHandler(event) {
+    this.collapsed = event.detail.collapsed;
+  }
+  onEventPointerEnter() {
+    this.setHoverStateOpen();
+  }
+  onEventFocus() {
+    this.setHoverStateOpen();
+  }
+  onEventPointerLeave() {
+    this.setHoverStateClosed();
+  }
+  onEventBlur() {
+    this.setHoverStateClosed();
+  }
+  setHoverStateOpen() {
+    this.hoverState = { isHovered: true, updatedAt: Date.now() };
+  }
+  setHoverStateClosed() {
+    const leftAt = Date.now();
+    const toleranceInMilliseconds = 150;
+    setTimeout(() => {
+      if (this.hoverState.isHovered && this.hoverState.updatedAt < leftAt) {
+        this.hoverState = { isHovered: false, updatedAt: Date.now() };
+      }
+    }, toleranceInMilliseconds);
+  }
+  getIsOpenState() {
+    var _a;
+    return this.collapsed ? (_a = this.hoverState) === null || _a === void 0 ? void 0 : _a.isHovered : this.open;
+  }
+  connectedCallback() {
+    this.sideMenuEl = this.host.closest('sdds-side-menu');
+    this.collapsed = this.sideMenuEl.collapsed;
+    this.open = this.defaultOpen;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        'wrapper': true,
+        'state-open': this.getIsOpenState(),
+        'state-collapsed': this.collapsed,
+      } }, h("sdds-side-menu-item", { class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
+        this.open = !this.open;
+      } }, h("button", null, h("slot", { name: "button-icon" }), !this.collapsed && (h(Fragment, null, this.buttonLabel, h("slot", { name: "button-label" }), h("sdds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" }))))), h("div", { class: "menu" }, this.collapsed && (h("h3", { class: "heading-collapsed" }, this.buttonLabel, h("slot", { name: "button-label" }))), h("slot", null)))));
+  }
+  static get is() { return "sdds-side-menu-dropdown"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "defaultOpen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the dropdown should be open from the start."
+        },
+        "attribute": "default-open",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "buttonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The label of the button that opens the dropdown.\nThis is an alternative to the button-label slot."
+        },
+        "attribute": "button-label",
+        "reflect": false
+      },
+      "selected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the button that opens the dropdown should appear selected."
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "open": {},
+      "hoverState": {},
+      "collapsed": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "sddsSideMenuCollapsed",
+        "method": "collapsedSideMenuEventHandler",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "pointerenter",
+        "method": "onEventPointerEnter",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "focusin",
+        "method": "onEventFocus",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "pointerleave",
+        "method": "onEventPointerLeave",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "focusout",
+        "method": "onEventBlur",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,14 @@
+:host {
+  display: block;
+  width: 190px;
+}
+:host [role=list] {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  border-radius: none;
+  background-color: var(--sdds-header-app-launcher-menu-bg);
+}
+:host .state-collapsed ::slotted(*) {
+  border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);
+}

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

@@ -0,0 +1,45 @@
+import { Host, h } from '@stencil/core';
+export class SideMenuDropdownList {
+  constructor() {
+    this.collapsed = false;
+  }
+  collapsedSideMenuEventHandler(event) {
+    this.collapsed = event.detail.collapsed;
+  }
+  connectedCallback() {
+    this.sideMenuEl = this.host.closest('sdds-side-menu');
+    this.collapsed = this.sideMenuEl.collapsed;
+  }
+  render() {
+    return (h(Host, { role: "list" }, h("div", { class: {
+        'state-collapsed': this.collapsed,
+      } }, h("slot", null))));
+  }
+  static get is() { return "sdds-side-menu-dropdown-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-dropdown-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-dropdown-list.css"]
+    };
+  }
+  static get states() {
+    return {
+      "collapsed": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "sddsSideMenuCollapsed",
+        "method": "collapsedSideMenuEventHandler",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,45 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  height: 48px;
+  width: 100%;
+}
+:host .component {
+  height: 100%;
+  width: 100%;
+}
+:host .component ::slotted(a),
+:host .component ::slotted(button) {
+  all: unset;
+  box-sizing: border-box;
+  border-right: 1px solid var(--sdds-nav-item-border-color);
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 24px;
+  width: 100%;
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  background-color: var(--sdds-header-nav-item-dropdown-opened-background);
+  color: var(--sdds-header-nav-item-dropdown-opened-color);
+  border: none;
+}
+:host .component ::slotted(a:hover),
+:host .component ::slotted(button:hover) {
+  background-color: var(--sdds-nav-item-background-hover);
+  cursor: pointer;
+}
+:host .component ::slotted(a:focus-visible) {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+:host .component.component-selected ::slotted(a),
+: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);
+}
+:host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(a),
+:host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(button) {
+  padding-left: 56px;
+}