@scania/tegel 0.0.10 → 0.0.12

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

@@ -1,101 +1,62 @@
-import { h } from '@stencil/core';
-import { createPopper } from '@popperjs/core';
+import { h, Host } from '@stencil/core';
+import { inheritAttributes } from '../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the tooltip contents.
+ */
 export class TdsTooltip {
   constructor() {
     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';
-    this.popperInstance = undefined;
-    this.target = undefined;
-  }
-  /** Method to update the Tooltip. Will reevaluate the Tooltips position. */
-  async updateTooltip() {
-    var _a;
-    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
-  }
-  componentDidLoad() {
-    var _a;
-    this.target = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
-    const thisValue = this;
-    this.popperInstance = createPopper(this.target, this.tooltip, {
-      placement: thisValue.placement,
-      modifiers: [
-        {
-          name: 'positionCalc',
-          enabled: true,
-          phase: 'main',
-          fn({ state }) {
-            if (state.placement === 'bottom-start' || state.placement === 'right-start') {
-              thisValue.border = 'top-left';
-            }
-            else if (state.placement === 'bottom-end' || state.placement === 'left-start') {
-              thisValue.border = 'top-right';
-            }
-            else if (state.placement === 'top-end' || state.placement === 'left-end') {
-              thisValue.border = 'bottom-right';
-            }
-            else if (state.placement === 'top-start' || state.placement === 'right-end') {
-              thisValue.border = 'bottom-left';
-            }
-            else if (state.placement === 'bottom' || state.placement === 'top') {
-              thisValue.border = 'default';
-            }
-          },
-        },
-        {
-          name: 'offset',
-          options: {
-            offset: [this.offsetSkidding, this.offsetDistance],
-          },
-        },
-      ],
-    });
-    const showTooltip = () => {
-      this.show = true;
-    };
-    const hideTooltip = () => {
-      this.show = false;
-    };
-    // For tabbing over element
-    this.target.addEventListener('focusin', () => {
-      showTooltip();
-    });
-    this.target.addEventListener('focusout', () => {
-      hideTooltip();
-    });
-    // For hovering over element with selector
-    this.target.addEventListener('mouseenter', () => {
-      showTooltip();
-    });
-    this.target.addEventListener('mouseleave', () => {
-      hideTooltip();
-    });
-    // For hovering over Tooltip itself:
-    if (this.mouseOverTooltip === true) {
-      this.tooltip.addEventListener('mouseenter', () => {
-        showTooltip();
-      });
-      this.tooltip.addEventListener('mouseleave', () => {
-        hideTooltip();
-      });
-    }
   }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.host, ['style', 'class']);
   }
   render() {
-    return (h("span", { ref: (el) => {
-        this.tooltip = el;
-      }, class: `tds-tooltip tds-tooltip-${this.border} ${this.show ? 'tds-tooltip-show' : ''}` }, this.text, h("slot", null)));
+    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))));
   }
   static get is() { return "tds-tooltip"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["tooltip.scss"]
@@ -224,30 +185,5 @@ export class TdsTooltip {
       }
     };
   }
-  static get states() {
-    return {
-      "popperInstance": {},
-      "target": {}
-    };
-  }
-  static get methods() {
-    return {
-      "updateTooltip": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Method to update the Tooltip. Will reevaluate the Tooltips position.",
-          "tags": []
-        }
-      }
-    };
-  }
+  static get elementRef() { return "host"; }
 }

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

@@ -114,8 +114,8 @@ const ComponentTooltip = ({ tooltipPosition, mouseOverTooltip, text, slot }) =>
    <!-- The 'referenceEl' prop can be used instead of 'selector',
     which might be preferable in frameworks like React -->
    <tds-tooltip
+      id="tooltip-1"
       placement="${positionLookup[tooltipPosition]}"
-      selector="#button-1"
       text="${text}"
       mouse-over-tooltip="${mouseOverTooltip}">
       ${slot}
@@ -124,5 +124,13 @@ const ComponentTooltip = ({ tooltipPosition, mouseOverTooltip, text, slot }) =>
     <!-- Demo button for presentation purposes -->
     <tds-button size= 'sm' id="button-1" text='Hover me'></tds-button>
    </div>
+   <script>
+   (() => {
+     const tooltip = document.getElementById('tooltip-1');
+     const button = document.getElementById('button-1');
+
+     tooltip.referenceEl = button;
+    })();
+   </script>
   `);
 export const Default = ComponentTooltip.bind({});

package/dist/collection/stories/patterns/navigation/navigation-fewitems.stories.js

@@ -165,7 +165,7 @@ const Template = () => formatHtmlPreview(`
 
         <tds-header-dropdown slot="end" placement="end" no-dropdown-icon class="demo-hide demo-lg-show" selected>
           <img slot="icon" src="https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg" alt="User menu."/>
-          <tds-header-dropdown-list type="lg">
+          <tds-header-dropdown-list size="lg">
             <tds-header-dropdown-list-user
               header="Name Nameson"
               subheader="Company name">

package/dist/collection/stories/patterns/navigation/navigation-manyitems.stories.js

@@ -75,7 +75,7 @@ const Template = ({ dummyHtml }) => formatHtmlPreview(`
           height: calc(100vh - var(--app-bar-height));
           position: sticky;
           top: var(--app-bar-height);
-          left: 0px;
+          left: 0;
         }
       }
 
@@ -135,7 +135,7 @@ const Template = ({ dummyHtml }) => formatHtmlPreview(`
       
       <tds-header-dropdown slot="end" placement="end" no-dropdown-icon class="demo-hide demo-xs-show">
         <img slot="icon" src="https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg" alt="User menu."/>
-        <tds-header-dropdown-list type="lg">
+        <tds-header-dropdown-list size="lg">
           <tds-header-dropdown-list-user
             header="Name Nameson"
             subheader="Company name">
@@ -159,7 +159,7 @@ const Template = ({ dummyHtml }) => formatHtmlPreview(`
     <div class="demo-wrap-side-menu-and-main">
       <!-- Note: the "persistent" property keeps the menu open on desktop -->
       <tds-side-menu id="demo-side-menu" aria-label="Side menu" persistent>
-        <tds-side-menu-overlay slot="overlay" onclick="demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);"></tds-side-menu-overlay>
+        <tds-side-menu-overlay slot="overlay"></tds-side-menu-overlay>
 
         <tds-side-menu-close-button slot="close-button" onclick="demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);"></tds-side-menu-close-button>
 
@@ -231,6 +231,7 @@ const Template = ({ dummyHtml }) => formatHtmlPreview(`
       </tds-side-menu>
 
       <main class="tds-u-h-100 tds-u-p3" style="box-sizing: border-box;">
+      <button class='tds-u-absolute tds-u-right0' onclick='console.log("Button clicked")'>Test button</button>
         <p>If there are more than a few buttons and/or links in the Header, they might not fit on medium size screens. 
         <br/>In that case they should be placed in a persistent side menu — which is always visible on large screens.</p>
 

package/dist/collection/stories/patterns/navigation/navigation-user-menu.stories.js

@@ -84,7 +84,7 @@ const Template = () => formatHtmlPreview(`
         
         <tds-header-dropdown slot="end" class="demo-hide demo-xs-show" no-dropdown-icon selected>
           <img slot="icon" src="https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg" alt="User menu."/>
-          <tds-header-dropdown-list type="lg">
+          <tds-header-dropdown-list size="lg">
             <tds-header-dropdown-list-user
               header="Name Nameson"
               subheader="Company name">

package/dist/collection/stories/tegel.stories.js

@@ -37,7 +37,7 @@ export const TegelDesignSystem = {
                 </style>
 
                 <tds-banner type="information" icon="information" header="We are moving away from the sdds prefix!">
-                <tds-link slot="banner-link">
+                <tds-link slot="bottom">
                     <a target="_self" href="?path=/story/intro-announcements--prefix-change">
                         Read more here!
                     </a>

package/dist/components/header-dropdown-list-item.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const headerDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:var(--tds-header-list-item-md-height);width:100%}:host .component{height:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border:none;display:flex;align-items:center;height:100%;padding:0 24px;width:100%;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-nav-dropdown-item-background);color:var(--tds-header-nav-item-dropdown-opened-color)}:host .component ::slotted(a:hover){background-color:var(--tds-nav-item-background-hover);cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component-selected{background-color:var(--tds-nav-item-background-selected);padding-right:4px;border-left-width:4px;border-left-style:solid;border-left-color:var(--tds-nav-item-border-color-active)}:host .component-selected ::slotted(a),:host .component-selected ::slotted(button){background-color:var(--tds-nav-item-background-selected)}:host(:not(:last-child)){border-bottom:1px solid var(--tds-nav-dropdown-item-border-color)}:host([type=lg]){height:var(--tds-header-height)}:host([type=lg]) ::slotted(a),:host([type=lg]) ::slotted(button){padding:0 16px;color:var(--tds-header-app-launcher-item-color)}";
+const headerDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:var(--tds-header-list-item-md-height);width:100%}:host .component{height:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border:none;display:flex;align-items:center;height:100%;padding:0 24px;width:100%;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-nav-dropdown-item-background);color:var(--tds-header-nav-item-dropdown-opened-color)}:host .component ::slotted(a:hover){background-color:var(--tds-nav-item-background-hover);cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component-selected{background-color:var(--tds-nav-item-background-selected);padding-right:4px;border-left-width:4px;border-left-style:solid;border-left-color:var(--tds-nav-item-border-color-active)}:host .component-selected ::slotted(a),:host .component-selected ::slotted(button){background-color:var(--tds-nav-item-background-selected)}:host(:not(:last-child)){border-bottom:1px solid var(--tds-nav-dropdown-item-border-color)}:host([size=lg]){height:var(--tds-header-height)}:host([size=lg]) ::slotted(a),:host([size=lg]) ::slotted(button){padding:0 16px;color:var(--tds-header-app-launcher-item-color)}";
 
 const TdsHeaderDropdownListItem = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDropdownListItem extends HTMLElement {
   constructor() {
@@ -8,7 +8,7 @@ const TdsHeaderDropdownListItem = /*@__PURE__*/ proxyCustomElement(class TdsHead
     this.__registerHost();
     this.__attachShadow();
     this.selected = false;
-    this.type = 'md';
+    this.size = 'md';
   }
   render() {
     return (h(Host, null, h("div", { class: {
@@ -20,7 +20,7 @@ const TdsHeaderDropdownListItem = /*@__PURE__*/ proxyCustomElement(class TdsHead
   static get style() { return headerDropdownListItemCss; }
 }, [1, "tds-header-dropdown-list-item", {
     "selected": [4],
-    "type": [513]
+    "size": [513]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/header-dropdown-list.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { e as getPreviousNestedChildOfSiblingsMatching, j as isHeadingElement } from './utils.js';
+import { j as getPreviousNestedChildOfSiblingsMatching, k as isHeadingElement } from './utils.js';
 
-const headerDropdownListCss = ":host{display:block;width:190px;padding:0;margin:0;list-style:none;border-radius:none;background-color:var(--tds-header-app-launcher-menu-bg)}@media all and (max-width: 384px){:host{width:100vw}}:host([type=lg]){width:320px}";
+const headerDropdownListCss = ":host{display:block;width:190px;padding:0;margin:0;list-style:none;border-radius:unset;background-color:var(--tds-header-app-launcher-menu-bg)}@media all and (max-width: 384px){:host{width:100vw}}:host([size=lg]){width:320px}";
 
 const TdsHeaderDropdownList = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDropdownList extends HTMLElement {
   constructor() {
@@ -10,16 +10,16 @@ const TdsHeaderDropdownList = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDr
     this.__attachShadow();
     // A Map to store the slots and their associated slotchange listeners.
     this.slotListeners = new Map();
-    this.type = 'md';
+    this.size = 'md';
     this.headingElement = undefined;
   }
   componentWillLoad() {
     const { children } = this.host;
-    // Set the type prop for each child, if they have such a property
+    // Set the size prop for each child, if they have such a property
     for (let i = 0; i < children.length; i++) {
       const child = children[i];
-      if ('type' in child) {
-        child.type = this.type;
+      if ('size' in child) {
+        child.size = this.size;
       }
     }
     let listRoot = this.host;
@@ -79,7 +79,7 @@ const TdsHeaderDropdownList = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDr
   get host() { return this; }
   static get style() { return headerDropdownListCss; }
 }, [1, "tds-header-dropdown-list", {
-    "type": [513],
+    "size": [513],
     "headingElement": [32]
   }]);
 function defineCustomElement() {

package/dist/components/popover-canvas.js

@@ -1,33 +1,14 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as createPopper } from './popper.js';
+import { e as inheritAttributes } from './utils.js';
+import { d as defineCustomElement$1 } from './popover-core.js';
 
-const popoverCanvasCss = ":host{box-sizing:border-box;color:var(--tds-popover-canvas-color);background-color:var(--tds-popover-canvas-background);box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:800;display:none}:host *{box-sizing:border-box}:host(.tds-popover-canvas-show){display:block}";
+const popoverCanvasCss = ".tds-popover-canvas.sc-tds-popover-canvas{box-sizing:border-box;display:inline-block;color:var(--tds-popover-canvas-color);background-color:var(--tds-popover-canvas-background);box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:900}.tds-popover-canvas.sc-tds-popover-canvas *.sc-tds-popover-canvas{box-sizing:border-box}";
 
 const TdsPopoverCanvas = /*@__PURE__*/ proxyCustomElement(class TdsPopoverCanvas extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.__attachShadow();
-    this.initialize = (referenceEl) => {
-      this.popperInstance = createPopper(referenceEl, this.host, {
-        placement: this.placement,
-        modifiers: [
-          {
-            name: 'offset',
-            options: {
-              offset: [this.offsetSkidding, this.offsetDistance],
-            },
-          },
-          ...this.modifiers,
-        ],
-      });
-      if (this.show === null) {
-        referenceEl.addEventListener('click', (event) => {
-          event.stopPropagation();
-          this.isShown = !this.isShown;
-        });
-      }
-    };
+    this.inheritedAttributes = [];
     this.selector = '';
     this.referenceEl = undefined;
     this.show = null;
@@ -35,94 +16,44 @@ const TdsPopoverCanvas = /*@__PURE__*/ proxyCustomElement(class TdsPopoverCanvas
     this.offsetSkidding = 0;
     this.offsetDistance = 8;
     this.modifiers = [];
-    this.renderedShowValue = false;
-    this.popperInstance = undefined;
-    this.target = undefined;
-    this.isShown = false;
-  }
-  onShowChange(newValue) {
-    this.isShown = newValue;
-  }
-  onReferenceElChange(newValue, oldValue) {
-    var _a;
-    if (newValue !== oldValue) {
-      (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
-      if (newValue) {
-        this.initialize(newValue);
-      }
-    }
-  }
-  onAnyClick(event) {
-    if (this.isShown && this.show === null) {
-      // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
-      const isClickOutside = !event.composedPath().includes(this.host);
-      if (isClickOutside) {
-        this.isShown = false;
-      }
-    }
-  }
-  connectedCallback() {
-    if (this.show !== null) {
-      this.isShown = this.show;
-    }
-  }
-  componentDidLoad() {
-    var _a;
-    if (this.selector || this.referenceEl) {
-      const referenceEl = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
-      if (referenceEl) {
-        this.initialize(referenceEl);
-      }
-      else {
-        console.error(`Could not initialize popover-canvas: element with selector '${this.selector}' not found.`);
-      }
-    }
   }
-  componentDidRender() {
-    if (this.isShown && !this.renderedShowValue) {
-      // Here we update the popper position since its position is wrong
-      // before it is rendered.
-      this.popperInstance.update();
-    }
-    this.renderedShowValue = this.isShown;
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.host, ['style', 'class']);
   }
   render() {
-    return (h(Host, { class: `tds-popover-canvas ${this.isShown ? 'tds-popover-canvas-show' : ''}` }, h("slot", null)));
+    var _a;
+    return (h(Host, null, h("tds-popover-core", Object.assign({}, this.inheritedAttributes, { class: {
+        'tds-popover-canvas': true,
+        [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
+      }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, modifiers: this.modifiers, trigger: 'click' }), h("div", null, h("slot", null)))));
   }
   get host() { return this; }
-  static get watchers() { return {
-    "show": ["onShowChange"],
-    "referenceEl": ["onReferenceElChange"]
-  }; }
   static get style() { return popoverCanvasCss; }
-}, [1, "tds-popover-canvas", {
+}, [6, "tds-popover-canvas", {
     "selector": [1],
     "referenceEl": [16],
     "show": [4],
     "placement": [1],
     "offsetSkidding": [2, "offset-skidding"],
     "offsetDistance": [2, "offset-distance"],
-    "modifiers": [16],
-    "renderedShowValue": [32],
-    "popperInstance": [32],
-    "target": [32],
-    "isShown": [32]
-  }, [[8, "click", "onAnyClick"]]]);
+    "modifiers": [16]
+  }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["tds-popover-canvas"];
+  const components = ["tds-popover-canvas", "tds-popover-core"];
   components.forEach(tagName => { switch (tagName) {
     case "tds-popover-canvas":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, TdsPopoverCanvas);
       }
       break;
+    case "tds-popover-core":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
   } });
 }