@scania/tegel 0.0.72 → 1.0.0

package/dist/components/tds-toggle.js

@@ -0,0 +1,66 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { g as generateUniqueId } from './utils.js';
+
+const toggleCss = ".tds-toggle.sc-tds-toggle .toggle-headline.sc-tds-toggle{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-toggle-headline);margin-bottom:12px}.tds-toggle.sc-tds-toggle .toggle-headline.disabled.sc-tds-toggle{color:var(--tds-toggle-headline-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle{appearance:initial;margin:0;width:44px;height:24px;position:relative;display:inline-block;vertical-align:middle}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle::after,.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle::before{content:\"\";position:absolute;box-sizing:border-box;transition:all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle::before{width:44px;height:24px;border-radius:16px;background-color:var(--tds-toggle-off-slider);left:0}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle::after{width:16px;height:16px;background-color:var(--tds-toggle-switch);border-radius:50%;left:4px;top:4px}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:focus{outline:none}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:focus::before{background-color:var(--tds-toggle-off-slider-focus);border:1px solid var(--tds-toggle-off-border-focus)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:checked::before{background-color:var(--tds-toggle-on-slider);border:1px solid var(--tds-toggle-on-border-focus)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:checked::after{left:24px}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled::before{background-color:var(--tds-toggle-slider-disabled);border:1px solid var(--tds-toggle-slider-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled::after{background-color:var(--tds-toggle-switch-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled:checked::before{background-color:var(--tds-toggle-on-slider-disabled);border:1px solid var(--tds-toggle-on-slider-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled:checked::after{background-color:var(--tds-toggle-switch-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle{width:28px;height:16px}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle::before{width:28px;height:16px}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle::after{width:8px;height:8px}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:checked::before{background-color:var(--tds-toggle-on-slider)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:checked::after{left:16px}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:disabled::before{background-color:var(--tds-toggle-slider-disabled);border:1px solid var(--tds-toggle-slider-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:disabled::after{background-color:var(--tds-toggle-switch-disabled)}.tds-toggle.sc-tds-toggle label.sc-tds-toggle{display:inline-block;vertical-align:middle;font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls);color:var(--tds-toggle-label-color);padding-left:8px}.tds-toggle.sc-tds-toggle label.disabled.sc-tds-toggle{color:var(--tds-toggle-label-color-disabled)}";
+
+const TdsToggle$1 = /*@__PURE__*/ proxyCustomElement(class TdsToggle extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.tdsToggle = createEvent(this, "tdsToggle", 6);
+    this.handleToggle = () => {
+      this.checked = !this.checked;
+      this.tdsToggle.emit({
+        toggleId: this.toggleId,
+        checked: this.checked,
+      });
+    };
+    this.checked = false;
+    this.required = false;
+    this.size = 'lg';
+    this.name = undefined;
+    this.headline = undefined;
+    this.disabled = false;
+    this.toggleId = generateUniqueId();
+  }
+  /** Toggles the Toggle. */
+  async toggle() {
+    this.checked = !this.checked;
+    return {
+      toggleId: this.toggleId,
+      checked: this.checked,
+    };
+  }
+  render() {
+    return (h("div", { class: "tds-toggle" }, this.headline && (h("div", { class: `toggle-headline ${this.disabled ? 'disabled' : ''}` }, this.headline)), h("input", { "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), h("label", { class: `${this.disabled ? 'disabled' : ''}`, htmlFor: this.toggleId }, h("slot", { name: "label" }))));
+  }
+  get host() { return this; }
+  static get style() { return toggleCss; }
+}, [6, "tds-toggle", {
+    "checked": [516],
+    "required": [4],
+    "size": [1],
+    "name": [1],
+    "headline": [1],
+    "disabled": [4],
+    "toggleId": [1, "toggle-id"],
+    "toggle": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-toggle"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-toggle":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsToggle$1);
+      }
+      break;
+  } });
+}
+
+const TdsToggle = TdsToggle$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsToggle, defineCustomElement };

package/dist/components/tds-tooltip.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TdsTooltip extends Components.TdsTooltip, HTMLElement {}
+export const TdsTooltip: {
+  prototype: TdsTooltip;
+  new (): TdsTooltip;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/tds-tooltip.js

@@ -0,0 +1,93 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as inheritAttributes } from './utils.js';
+import { d as defineCustomElement$2 } from './popover-core.js';
+
+const tooltipCss = ".sc-tds-tooltip:root,.tds-mode-light.sc-tds-tooltip{--tds-tooltip-background:var(--tds-grey-800);--tds-tooltip-color:var(--tds-white)}.tds-mode-dark.sc-tds-tooltip{--tds-tooltip-background:var(--tds-grey-200);--tds-tooltip-color:var(--tds-grey-958)}.tds-tooltip.sc-tds-tooltip{box-sizing:border-box;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-tooltip-color);background-color:var(--tds-tooltip-background);border-radius:4px;padding:8px;word-wrap:break-word;max-width:192px;z-index:900;opacity:0;visibility:hidden;transition:opacity 200ms ease-in, visibility 200ms ease-in}.tds-tooltip.sc-tds-tooltip *.sc-tds-tooltip{box-sizing:border-box}.tds-tooltip.tds-tooltip-top-left.sc-tds-tooltip{border-radius:0 4px 4px}.tds-tooltip.tds-tooltip-top-right.sc-tds-tooltip{border-radius:4px 0 4px 4px}.tds-tooltip.tds-tooltip-bottom-right.sc-tds-tooltip{border-radius:4px 4px 0}.tds-tooltip.tds-tooltip-bottom-left.sc-tds-tooltip{border-radius:4px 4px 4px 0}.tds-tooltip-show.sc-tds-tooltip{opacity:1;visibility:visible}";
+
+const TdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class TdsTooltip extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.offsetSkidding = 0;
+    this.offsetDistance = 8;
+    this.popperjsExtraModifiers = [
+      {
+        name: 'positionCalc',
+        enabled: true,
+        phase: 'main',
+        fn: ({ state }) => {
+          if (state.placement === 'bottom-start' || state.placement === 'right-start') {
+            this.border = 'top-left';
+          }
+          else if (state.placement === 'bottom-end' || state.placement === 'left-start') {
+            this.border = 'top-right';
+          }
+          else if (state.placement === 'top-end' || state.placement === 'left-end') {
+            this.border = 'bottom-right';
+          }
+          else if (state.placement === 'top-start' || state.placement === 'right-end') {
+            this.border = 'bottom-left';
+          }
+          else if (state.placement === 'bottom' || state.placement === 'top') {
+            this.border = 'default';
+          }
+        },
+      },
+    ];
+    this.inheritedAttributes = [];
+    this.text = '';
+    this.selector = '';
+    this.referenceEl = undefined;
+    this.mouseOverTooltip = false;
+    this.show = false;
+    this.placement = 'bottom';
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.host, ['style', 'class']);
+  }
+  render() {
+    var _a;
+    return (h(Host, null, h("tds-popover-core", Object.assign({}, this.inheritedAttributes, { class: {
+        'tds-tooltip': true,
+        [`tds-tooltip-${this.border}`]: true,
+        [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
+        'tds-tooltip-show': this.show,
+      }, selector: this.selector, referenceEl: this.referenceEl, trigger: this.mouseOverTooltip ? 'hover-popover' : 'hover', modifiers: this.popperjsExtraModifiers, show: this.show, placement: this.placement, autoHide: false, onInternalTdsShow: () => {
+        this.show = true;
+      }, onInternalTdsClose: () => {
+        this.show = false;
+      } }), this.text, h("slot", null))));
+  }
+  get host() { return this; }
+  static get style() { return tooltipCss; }
+}, [6, "tds-tooltip", {
+    "text": [1],
+    "selector": [1],
+    "referenceEl": [16],
+    "mouseOverTooltip": [4, "mouse-over-tooltip"],
+    "show": [1028],
+    "placement": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-tooltip", "tds-popover-core"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-tooltip":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsTooltip$1);
+      }
+      break;
+    case "tds-popover-core":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const TdsTooltip = TdsTooltip$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsTooltip, defineCustomElement };

package/dist/components/utils.js

@@ -228,25 +228,6 @@ const appendHiddenInput = (element, name, value, disabled, additionalAttributes)
   input.name = name;
   input.value = 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.
- */
-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.
@@ -473,31 +454,36 @@ const updateListChildrenRoles = (targetNode) => {
     }
   });
 };
-function isFocusable(element) {
-  if (!element || element.nodeType !== Node.ELEMENT_NODE) {
-    return false;
-  }
-  const focusableSelectors = [
-    'a[href]',
-    'area[href]',
-    'input:not([disabled]):not([type="hidden"])',
-    'select:not([disabled])',
-    'textarea:not([disabled])',
-    'button:not([disabled])',
-    '[tabindex]:not([tabindex="-1"])',
-  ];
-  // Check if the element matches any of the focusable elements selectors
-  if (focusableSelectors.some((selector) => element.matches(selector))) {
-    return true;
-  }
-  // Check if the element is contenteditable
-  if (element.hasAttribute('contenteditable')) {
-    const contentEditableValue = element.getAttribute('contenteditable').toLowerCase();
-    if (contentEditableValue === 'true' || contentEditableValue === '') {
-      return true;
-    }
-  }
-  return false;
+/**
+ * Checks if the provided element has a slotted element
+ * in the slot with the corresponding slotName
+ * @param slotName the name of the slot.
+ * @param element the element to look for the slot within.
+ */
+const hasSlot = (slotName, element) => !!element.querySelector(`[slot="${slotName}"]`);
+/**
+ * Generates a reasonably unique string ID based on current time (minutes, seconds, milliseconds) and random numbers.
+ *
+ * This function combines the current time and random numbers to generate
+ * a unique string ID. The function assumes that it won't be called frequently
+ * enough to generate two identical IDs within a millisecond, or that the random
+ * number generator will produce the same value twice in quick succession.
+ *
+ * Note: The IDs generated by this function are not globally unique and their length may vary.
+ * For truly unique and fixed-length IDs, consider using a more robust method such as UUID.
+ *
+ * @returns {string} A unique string ID.
+ */
+function generateUniqueId() {
+  const now = new Date();
+  const timeInMilliseconds = now.getMinutes() * 60000 + now.getSeconds() * 1000 + now.getMilliseconds(); // Get current time in milliseconds from the start of the hour
+  const randomNum1 = Math.floor(Math.random() * 1000000); // Random number between 0 and 999999
+  const randomNum2 = Math.floor(Math.random() * 1000000); // Another random number
+  // Convert to base 36 (using numbers and letters) and remove '0.' from the random number
+  const uniqueString = randomNum1.toString(36).substring(2) +
+    timeInMilliseconds.toString(36) +
+    randomNum2.toString(36).substring(2);
+  return uniqueString;
 }
 
-export { appendChildElement as a, appendHiddenInput as b, findPreviousFocusableItem as c, dfs as d, isHeadingElement as e, findNextFocusableItem as f, getPreviousNestedChildOfSiblingsMatching as g, isFocusable as h, inheritAriaAttributes as i, updateListChildrenRoles as u };
+export { appendHiddenInput as a, findPreviousFocusableItem as b, inheritAttributes as c, dfs as d, getPreviousNestedChildOfSiblingsMatching as e, findNextFocusableItem as f, generateUniqueId as g, hasSlot as h, inheritAriaAttributes as i, isHeadingElement as j, updateListChildrenRoles as u };