@scania/tegel 0.0.6 → 0.0.8

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) {
@@ -715,4 +721,3 @@ export class Slider {
       }];
   }
 }
-//# sourceMappingURL=slider.js.map

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,
@@ -59,4 +59,3 @@ export class Spinner {
     };
   }
 }
-//# sourceMappingURL=spinner.js.map

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"
             }
           }
         }
@@ -191,4 +191,3 @@ export class SddsStepper {
       }];
   }
 }
-//# sourceMappingURL=sdds-stepper.js.map

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

@@ -103,4 +103,3 @@ export class SddsStepper {
       }];
   }
 }
-//# sourceMappingURL=sdds-stepper-item.js.map

package/dist/collection/components/tabs/folder-tabs/folder-tab/sdds-folder-tab.js

@@ -107,4 +107,3 @@ export class SddsFolderTab {
     };
   }
 }
-//# sourceMappingURL=sdds-folder-tab.js.map

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

@@ -266,4 +266,3 @@ export class InlineTabs {
   }
   static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=folder-tabs.js.map

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

@@ -78,4 +78,3 @@ export class SddsInlineTab {
     };
   }
 }
-//# sourceMappingURL=sdds-inline-tab.js.map

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) {
@@ -256,4 +256,3 @@ export class InlineTabsFullbleed {
   }
   static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=inline-tabs.js.map

package/dist/collection/components/tabs/navigation-tabs/navigation-tab/sdds-navigation-tab.js

@@ -78,4 +78,3 @@ export class SddsNavigationTab {
     };
   }
 }
-//# sourceMappingURL=sdds-navigation-tab.js.map

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

@@ -246,4 +246,3 @@ export class NavigationTabs {
   }
   static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=navigation-tabs.js.map

package/dist/collection/components/textarea/textarea.js

@@ -421,4 +421,3 @@ export class Textarea {
       }];
   }
 }
-//# sourceMappingURL=textarea.js.map

package/dist/collection/components/textfield/textfield.js

@@ -427,4 +427,3 @@ export class Textfield {
       }];
   }
 }
-//# sourceMappingURL=textfield.js.map

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": []
         }
       }
@@ -256,4 +256,3 @@ export class SddsToast {
   }
   static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=sdds-toast.js.map

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

@@ -16,7 +16,7 @@ export class SddsToggle {
     this.disabled = false;
     this.toggleId = crypto.randomUUID();
   }
-  /** Toggles the toggle. */
+  /** Toggles the Toggle. */
   async toggle() {
     this.checked = !this.checked;
     return {
@@ -53,7 +53,7 @@ export class SddsToggle {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Sets the toggle as checked"
+          "text": "Sets the Toggle as checked"
         },
         "attribute": "checked",
         "reflect": true,
@@ -71,7 +71,7 @@ export class SddsToggle {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Make the toggle required"
+          "text": "Make the Toggle required"
         },
         "attribute": "required",
         "reflect": false,
@@ -89,7 +89,7 @@ export class SddsToggle {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Size of the toggle"
+          "text": "Size of the Toggle"
         },
         "attribute": "size",
         "reflect": false,
@@ -124,7 +124,7 @@ export class SddsToggle {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Headline for the toggle"
+          "text": "Headline for the Toggle"
         },
         "attribute": "headline",
         "reflect": false
@@ -141,7 +141,7 @@ export class SddsToggle {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Sets the toggle in a disabled state"
+          "text": "Sets the Toggle in a disabled state"
         },
         "attribute": "disabled",
         "reflect": false,
@@ -159,7 +159,7 @@ export class SddsToggle {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "ID of the toggles input element, if not specifed it's randomly generated"
+          "text": "ID of the Toggle's input element, if not specified it's randomly generated"
         },
         "attribute": "toggle-id",
         "reflect": false,
@@ -176,7 +176,7 @@ export class SddsToggle {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Sends unique toggle identifier and status when it is toggled."
+          "text": "Sends unique Toggle identifier and status when it is toggled."
         },
         "complexType": {
           "original": "{\n    toggleId: string;\n    checked: boolean;\n  }",
@@ -199,7 +199,7 @@ export class SddsToggle {
           "return": "Promise<{ toggleId: string; checked: boolean; }>"
         },
         "docs": {
-          "text": "Toggles the toggle.",
+          "text": "Toggles the Toggle.",
           "tags": []
         }
       }
@@ -207,4 +207,3 @@ export class SddsToggle {
   }
   static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=sdds-toggle.js.map

package/dist/collection/components/tooltip/tooltip.js

@@ -70,7 +70,7 @@ export class Tooltip {
     this.target.addEventListener('mouseleave', () => {
       hideTooltip();
     });
-    // For hovering over tooltip itself:
+    // For hovering over Tooltip itself:
     if (this.mouseOverTooltip === true) {
       this.tooltip.addEventListener('mouseenter', () => {
         showTooltip();
@@ -116,7 +116,7 @@ export class Tooltip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "In case tooltip contains only text, no HTML, text can be passed by this prop"
+          "text": "In case Tooltip contains only text, no HTML, text can be passed by this prop"
         },
         "attribute": "text",
         "reflect": false,
@@ -134,7 +134,7 @@ export class Tooltip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The CSS-selector for an element that will trigger the tooltip"
+          "text": "The CSS-selector for an element that will trigger the Tooltip"
         },
         "attribute": "selector",
         "reflect": false,
@@ -156,7 +156,7 @@ export class Tooltip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Element that will trigger the tooltip (takes priority over selector)"
+          "text": "Element that will trigger the Tooltip (takes priority over selector)"
         }
       },
       "mouseOverTooltip": {
@@ -171,7 +171,7 @@ export class Tooltip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Allow mouse over tooltip. Useful when tooltip contains clickable elements like link or button."
+          "text": "Allow mouse over Tooltip. Useful when Tooltip contains clickable elements like link or button."
         },
         "attribute": "mouse-over-tooltip",
         "reflect": false,
@@ -212,7 +212,7 @@ export class Tooltip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Placement of tooltip."
+          "text": "Placement of Tooltip."
         },
         "attribute": "placement",
         "reflect": false,
@@ -227,4 +227,3 @@ export class Tooltip {
     };
   }
 }
-//# sourceMappingURL=tooltip.js.map

package/dist/collection/index.js

@@ -1,2 +1 @@
 export * from './components';
-//# sourceMappingURL=index.js.map

package/dist/collection/utils/constants.js

@@ -0,0 +1 @@
+export const ComponentsFolder = 'Components';

package/dist/collection/utils/utils.js

@@ -21,14 +21,67 @@ export function demoFormat(first, middle, last) {
  * @param additionalAttributes Additional attributes that should be passed to the input.
  */
 export const appendHiddenInput = (element, name, value, disabled, additionalAttributes) => {
-  const input = element.ownerDocument.createElement('input');
-  input.type = 'hidden';
-  element.appendChild(input);
+  let input = element.querySelector('input');
+  if (!element.querySelector('input')) {
+    input = element.ownerDocument.createElement('input');
+    input.type = 'hidden';
+    if (additionalAttributes) {
+      additionalAttributes.forEach((attr) => input.setAttribute(attr.key, attr.value));
+    }
+    element.appendChild(input);
+  }
   input.disabled = disabled;
   input.name = name;
   input.value = value || '';
-  if (additionalAttributes) {
-    additionalAttributes.forEach((attr) => input.setAttribute(attr.key, attr.value));
+};
+/**
+ * Appends a child element to the supplied parentElement.
+ * @param parentElement The element on which the child element with be appended.
+ * @param tag Tag for the child element.
+ * @param attributes List of attributes to be added on the child element.
+ * @param slot Slot for the child element.
+ * @param id Id for the child element.
+ */
+export const appendChildElement = (parentElement, tag, attributes, slot, id) => {
+  if (!parentElement.querySelector(`#${id}`)) {
+    const childElement = parentElement.ownerDocument.createElement(tag);
+    attributes.forEach((attr) => {
+      childElement.setAttribute(attr.key, attr.value);
+    });
+    childElement.innerHTML = slot;
+    childElement.id = id;
+    parentElement.appendChild(childElement);
+  }
+};
+/**
+ * Find the next focusable element index in a list of focusable elements.
+ * @param items List of focusable elements, element with a attribute of disabled that is true will be skipped over.
+ * @param nextItemIndex The index in the list to start the search on.
+ */
+export const findNextFocusableItem = (items, nextItemIndex) => {
+  if (items[nextItemIndex] === undefined) {
+    return 0;
+  }
+  for (let index = nextItemIndex; index < items.length; index++) {
+    if (!items[index].disabled) {
+      return index;
+    }
+  }
+};
+/**
+ * Find the previous focusable element index in a list of focusable elements.
+ *
+ * @param items List of focusable elements, element with a attribute of disabled that is true will be skipped over.
+ * @param nextItemIndex The index in the list to start the search on.
+ */
+export const findPreviousFocusableItem = (items, previousItemIndex) => {
+  if (items[previousItemIndex] === undefined) {
+    return items.length - 1;
+  }
+  for (let index = previousItemIndex; index >= 0; index--) {
+    if (!items[index].disabled) {
+      return index;
+    }
   }
 };
 /**
@@ -283,4 +336,15 @@ export function isFocusable(element) {
   }
   return false;
 }
-//# sourceMappingURL=utils.js.map
+/**
+ * Disables click on a element by adding an event listener
+ * and then preventing default and stopping propogation.
+ * @param {Element} element The element where the click should be
+ * disabled.
+ * */
+export const disableClickOnElement = (element) => {
+  element.addEventListener('click', (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  });
+};

package/dist/components/core-header-item.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const coreHeaderItemCss = ":host{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-header-nav-item-color)}:host .item{all:unset;box-sizing:border-box;display:flex;justify-content:center;align-items:center;min-width:var(--sdds-header-height);height:var(--sdds-header-height);margin:0}:host .item *{box-sizing:border-box}:host slot{white-space:nowrap}:host ::slotted(svg){font-size:20px}";
 
-const CoreHeaderItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const CoreHeaderItem = /*@__PURE__*/ proxyCustomElement(class CoreHeaderItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -28,5 +28,3 @@ function defineCustomElement() {
 }
 
 export { CoreHeaderItem as C, defineCustomElement as d };
-
-//# sourceMappingURL=core-header-item.js.map