@scania/tegel 0.0.9 → 0.0.11

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

@@ -1,27 +1,11 @@
 import { Host, h } from '@stencil/core';
-import { createPopper } from '@popperjs/core';
+import { inheritAttributes } from '../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the contents of the popover.
+ */
 export class TdsPopoverCanvas {
   constructor() {
-    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;
@@ -29,66 +13,19 @@ export 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)))));
   }
   static get is() { return "tds-popover-canvas"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["popover-canvas.scss"]
@@ -123,7 +60,7 @@ export class TdsPopoverCanvas {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "HTMLElement",
+          "original": "HTMLElement | null",
           "resolved": "HTMLElement",
           "references": {
             "HTMLElement": {
@@ -132,7 +69,7 @@ export class TdsPopoverCanvas {
           }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "Element that will trigger the Popover (takes priority over selector)"
@@ -237,31 +174,5 @@ export class TdsPopoverCanvas {
       }
     };
   }
-  static get states() {
-    return {
-      "renderedShowValue": {},
-      "popperInstance": {},
-      "target": {},
-      "isShown": {}
-    };
-  }
   static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "show",
-        "methodName": "onShowChange"
-      }, {
-        "propName": "referenceEl",
-        "methodName": "onReferenceElChange"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "onAnyClick",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
 }

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

@@ -0,0 +1,92 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Popover Canvas`,
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+  },
+  argTypes: {
+    canvasPosition: {
+      name: 'Canvas position',
+      description: 'Sets the position of the Popover Canvas.',
+      control: {
+        type: 'select',
+      },
+      options: [
+        'Bottom',
+        'Bottom start',
+        'Bottom end',
+        'Top',
+        'Top start',
+        'Top end',
+        'Left',
+        'Left start',
+        'Left end',
+        'Right',
+        'Right start',
+        'Right end',
+        'Auto',
+      ],
+      table: {
+        defaultValue: { summary: 'auto' },
+      },
+    },
+  },
+  args: {
+    canvasPosition: 'Auto',
+  },
+};
+const ComponentPopoverCanvas = ({ canvasPosition }) => {
+  const canvasPosLookup = {
+    'Bottom': 'bottom',
+    'Bottom start': 'bottom-start',
+    'Bottom end': 'bottom-end',
+    'Top': 'top',
+    'Top start': 'top-start',
+    'Top end': 'top-end',
+    'Left': 'left',
+    'Left start': 'left-start',
+    'Left end': 'left-end',
+    'Right': 'right',
+    'Right start': 'right-start',
+    'Right end': 'right-end',
+    'Auto': 'auto',
+  };
+  return formatHtmlPreview(`
+      <style>
+        /* demo-wrapper and demo-styles is for demonstration purposes only */
+        .demo-wrapper {
+          display: flex;
+          flex-wrap; nowrap;
+          align-items: center;
+        }
+      </style>
+
+      <!-- The 'referenceEl' prop can be used instead of 'selector', 
+      wich might be preferable in frameworks like React -->
+      <tds-popover-canvas
+        placement="${canvasPosLookup[canvasPosition]}"
+        selector="#trigger"
+        class="tds-u-p2">
+        <h2 class="tds-headline-02 tds-u-mt0">A Popover Canvas!</h2>
+        <p class="tds-body-01">
+          Where you can put anything you want!
+        </p>  
+        <tds-link>
+          <a target="_blank" rel="noopener noreferrer" href="https://tegel.scania.com">Even links!</a>
+        </tds-link>
+      </tds-popover-canvas>
+
+      <!-- demo-wrapper code below is for demonstration purposes only -->
+      <div class="demo-wrapper">
+        <span class="tds-u-mr2">Click icon for Popover Canvas</span>
+        
+        <tds-button aria-label="menu" only-icon id="trigger" type="secondary" size="sm">
+          <tds-icon slot="icon" size="16px" name="kebab"></tds-icon>
+        </tds-button>
+      </div>
+    `);
+};
+export const Default = ComponentPopoverCanvas.bind({});

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

@@ -0,0 +1,390 @@
+import { Host, h, } from '@stencil/core';
+import { createPopper } from '@popperjs/core';
+export class TdsPopoverCore {
+  constructor() {
+    this.setIsShown = function setIsShown(isShown) {
+      if (typeof isShown === 'function') {
+        this.isShown = isShown(this.isShown);
+      }
+      else {
+        this.isShown = isShown;
+      }
+      if (this.isShown) {
+        this.tdsShow.emit();
+      }
+      else {
+        this.tdsClose.emit();
+      }
+    }.bind(this);
+    this.onClickTarget = function onClickTarget(event) {
+      event.stopPropagation();
+      this.setIsShown((isShown) => !isShown);
+    }.bind(this);
+    this.handleShow = function handleShow(event) {
+      event.stopPropagation();
+      this.setIsShown(true);
+    }.bind(this);
+    this.handleHide = function handleShow(event) {
+      event.stopPropagation();
+      this.setIsShown(false);
+    }.bind(this);
+    this.selector = '';
+    this.referenceEl = undefined;
+    this.show = null;
+    this.placement = 'auto';
+    this.offsetSkidding = 0;
+    this.offsetDistance = 8;
+    this.modifiers = [];
+    this.trigger = 'click';
+    this.autoHide = true;
+    this.renderedShowValue = false;
+    this.popperInstance = undefined;
+    this.target = undefined;
+    this.isShown = false;
+  }
+  onAnyClick(event) {
+    if (this.trigger === 'click' && 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.setIsShown(false);
+      }
+    }
+  }
+  onShowChange(newValue) {
+    this.setIsShown(newValue);
+  }
+  onReferenceElChanged(newValue, oldValue) {
+    if (newValue !== oldValue)
+      this.initialize({ referenceEl: newValue, trigger: this.trigger });
+  }
+  onTriggerChanged(newValue) {
+    this.initialize({
+      referenceEl: this.referenceEl,
+      trigger: newValue,
+    });
+  }
+  initialize({ referenceEl, trigger, }) {
+    this.cleanUp();
+    if (typeof referenceEl !== 'undefined') {
+      this.target = referenceEl;
+    }
+    else {
+      this.target = this.selector ? document.querySelector(this.selector) : null;
+    }
+    this.popperInstance = this.target
+      ? createPopper(this.target, this.host, {
+        strategy: 'fixed',
+        placement: this.placement,
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [this.offsetSkidding, this.offsetDistance],
+            },
+          },
+          ...this.modifiers,
+        ],
+      })
+      : null;
+    if (!this.popperInstance) {
+      console.error(`Could not initialize: reference element not found.`);
+    }
+    if (trigger === 'click' && this.show === null) {
+      this.target.addEventListener('click', this.onClickTarget);
+    }
+    if (trigger === 'hover' || trigger === 'hover-popover') {
+      // For tabbing over element
+      this.target.addEventListener('focusin', this.handleShow);
+      this.target.addEventListener('focusout', this.handleHide);
+      // For hovering over element with selector
+      this.target.addEventListener('mouseenter', this.handleShow);
+      this.target.addEventListener('mouseleave', this.handleHide);
+      // For hovering over Popover itself
+      if (trigger === 'hover-popover') {
+        this.host.addEventListener('mouseenter', this.handleShow);
+        this.host.addEventListener('mouseleave', this.handleHide);
+      }
+    }
+  }
+  cleanUp() {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    (_a = this.target) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.onClickTarget);
+    (_b = this.target) === null || _b === void 0 ? void 0 : _b.removeEventListener('focusin', this.handleShow);
+    (_c = this.target) === null || _c === void 0 ? void 0 : _c.removeEventListener('focusout', this.handleHide);
+    (_d = this.target) === null || _d === void 0 ? void 0 : _d.removeEventListener('mouseenter', this.handleShow);
+    (_e = this.target) === null || _e === void 0 ? void 0 : _e.removeEventListener('mouseleave', this.handleHide);
+    (_f = this.host) === null || _f === void 0 ? void 0 : _f.removeEventListener('mouseenter', this.handleShow);
+    (_g = this.host) === null || _g === void 0 ? void 0 : _g.removeEventListener('mouseleave', this.handleHide);
+    (_h = this.popperInstance) === null || _h === void 0 ? void 0 : _h.destroy();
+  }
+  componentDidLoad() {
+    this.initialize({
+      referenceEl: this.referenceEl,
+      trigger: this.trigger,
+    });
+  }
+  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() {
+    this.cleanUp();
+  }
+  render() {
+    let hostStyle = {};
+    if (this.autoHide) {
+      hostStyle = { display: this.isShown ? 'block' : 'none' };
+    }
+    return (h(Host, { style: hostStyle }, h("slot", null)));
+  }
+  static get is() { return "tds-popover-core"; }
+  static get encapsulation() { return "scoped"; }
+  static get properties() {
+    return {
+      "selector": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The CSS-selector for an element that will trigger the pop-over"
+        },
+        "attribute": "selector",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "referenceEl": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement | null",
+          "resolved": "HTMLElement",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Element that will trigger the pop-over (takes priority over selector)"
+        }
+      },
+      "show": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Decides if the Popover Menu should be visible from the start"
+        },
+        "attribute": "show",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Placement",
+          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "Placement": {
+              "location": "import",
+              "path": "@popperjs/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Decides the placement of the Popover Menu"
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "'auto'"
+      },
+      "offsetSkidding": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the offset skidding"
+        },
+        "attribute": "offset-skidding",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "offsetDistance": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the offset distance"
+        },
+        "attribute": "offset-distance",
+        "reflect": false,
+        "defaultValue": "8"
+      },
+      "modifiers": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Object[]",
+          "resolved": "Object[]",
+          "references": {
+            "Object": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/"
+        },
+        "defaultValue": "[]"
+      },
+      "trigger": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'click' | 'hover' | 'hover-popover'",
+          "resolved": "\"click\" | \"hover\" | \"hover-popover\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "What triggers the popover to show"
+        },
+        "attribute": "trigger",
+        "reflect": false,
+        "defaultValue": "'click'"
+      },
+      "autoHide": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Decides if the popover should hide automatically.\nAlternatevly it can be hidden externally based on emitted events."
+        },
+        "attribute": "auto-hide",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "renderedShowValue": {},
+      "popperInstance": {},
+      "target": {},
+      "isShown": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tdsShow",
+        "name": "internalTdsShow",
+        "bubbles": false,
+        "cancelable": false,
+        "composed": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Show event."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{}",
+          "resolved": "{}",
+          "references": {}
+        }
+      }, {
+        "method": "tdsClose",
+        "name": "internalTdsClose",
+        "bubbles": false,
+        "cancelable": false,
+        "composed": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Close event."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{}",
+          "resolved": "{}",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "show",
+        "methodName": "onShowChange"
+      }, {
+        "propName": "referenceEl",
+        "methodName": "onReferenceElChanged"
+      }, {
+        "propName": "trigger",
+        "methodName": "onTriggerChanged"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "onAnyClick",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -1,4 +1,4 @@
-:host {
+.tds-popover-menu {
   box-sizing: border-box;
   overflow: hidden;
   width: 160px;
@@ -6,14 +6,8 @@
   padding: 16px;
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
-  display: none;
   z-index: 800;
 }
-:host * {
+.tds-popover-menu * {
   box-sizing: border-box;
-}
-
-:host(.tds-popover-menu-show) {
-  opacity: 1;
-  display: block;
 }