@scania/tegel 1.3.3-event-types.0 → 1.4.0

package/dist/components/inheritAriaAttributes.js

@@ -6,57 +6,57 @@ import { i as inheritAttributes } from './inheritAttributes.js';
  * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes
  */
 const ariaAttributes = [
-  'role',
-  'aria-activedescendant',
-  'aria-atomic',
-  'aria-autocomplete',
-  'aria-braillelabel',
-  'aria-brailleroledescription',
-  'aria-busy',
-  'aria-checked',
-  'aria-colcount',
-  'aria-colindex',
-  'aria-colindextext',
-  'aria-colspan',
-  'aria-controls',
-  'aria-current',
-  'aria-describedby',
-  'aria-description',
-  'aria-details',
-  'aria-disabled',
-  'aria-errormessage',
-  'aria-expanded',
-  'aria-flowto',
-  'aria-haspopup',
-  'aria-hidden',
-  'aria-invalid',
-  'aria-keyshortcuts',
-  'aria-label',
-  'aria-labelledby',
-  'aria-level',
-  'aria-live',
-  'aria-multiline',
-  'aria-multiselectable',
-  'aria-orientation',
-  'aria-owns',
-  'aria-placeholder',
-  'aria-posinset',
-  'aria-pressed',
-  'aria-readonly',
-  'aria-relevant',
-  'aria-required',
-  'aria-roledescription',
-  'aria-rowcount',
-  'aria-rowindex',
-  'aria-rowindextext',
-  'aria-rowspan',
-  'aria-selected',
-  'aria-setsize',
-  'aria-sort',
-  'aria-valuemax',
-  'aria-valuemin',
-  'aria-valuenow',
-  'aria-valuetext',
+    'role',
+    'aria-activedescendant',
+    'aria-atomic',
+    'aria-autocomplete',
+    'aria-braillelabel',
+    'aria-brailleroledescription',
+    'aria-busy',
+    'aria-checked',
+    'aria-colcount',
+    'aria-colindex',
+    'aria-colindextext',
+    'aria-colspan',
+    'aria-controls',
+    'aria-current',
+    'aria-describedby',
+    'aria-description',
+    'aria-details',
+    'aria-disabled',
+    'aria-errormessage',
+    'aria-expanded',
+    'aria-flowto',
+    'aria-haspopup',
+    'aria-hidden',
+    'aria-invalid',
+    'aria-keyshortcuts',
+    'aria-label',
+    'aria-labelledby',
+    'aria-level',
+    'aria-live',
+    'aria-multiline',
+    'aria-multiselectable',
+    'aria-orientation',
+    'aria-owns',
+    'aria-placeholder',
+    'aria-posinset',
+    'aria-pressed',
+    'aria-readonly',
+    'aria-relevant',
+    'aria-required',
+    'aria-roledescription',
+    'aria-rowcount',
+    'aria-rowindex',
+    'aria-rowindextext',
+    'aria-rowspan',
+    'aria-selected',
+    'aria-setsize',
+    'aria-sort',
+    'aria-valuemax',
+    'aria-valuemin',
+    'aria-valuenow',
+    'aria-valuetext',
 ];
 /**
  * Returns an array of aria attributes that should be copied from
@@ -66,11 +66,11 @@ const ariaAttributes = [
  * Use this in instances where we manually specify aria attributes on the `<Host>` element.
  */
 const inheritAriaAttributes = (el, ignoreList) => {
-  let attributesToInherit = ariaAttributes;
-  if (ignoreList && ignoreList.length > 0) {
-    attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));
-  }
-  return inheritAttributes(el, attributesToInherit);
+    let attributesToInherit = ariaAttributes;
+    if (ignoreList && ignoreList.length > 0) {
+        attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));
+    }
+    return inheritAttributes(el, attributesToInherit);
 };
 
 export { inheritAriaAttributes as i };

package/dist/components/inheritAttributes.js

@@ -9,17 +9,17 @@
  * does not trigger a re-render.
  */
 const inheritAttributes = (el, attributes = []) => {
-  const attributeObject = {};
-  attributes.forEach((attr) => {
-    if (el.hasAttribute(attr)) {
-      const value = el.getAttribute(attr);
-      if (value !== null) {
-        attributeObject[attr] = el.getAttribute(attr);
-      }
-      el.removeAttribute(attr);
-    }
-  });
-  return attributeObject;
+    const attributeObject = {};
+    attributes.forEach((attr) => {
+        if (el.hasAttribute(attr)) {
+            const value = el.getAttribute(attr);
+            if (value !== null) {
+                attributeObject[attr] = el.getAttribute(attr);
+            }
+            el.removeAttribute(attr);
+        }
+    });
+    return attributeObject;
 };
 
 export { inheritAttributes as i };

package/dist/components/popover-canvas.js

@@ -5,56 +5,56 @@ import { d as defineCustomElement$1 } from './popover-core.js';
 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.inheritedAttributes = [];
-    this.selector = '';
-    this.referenceEl = undefined;
-    this.show = null;
-    this.placement = 'auto';
-    this.offsetSkidding = 0;
-    this.offsetDistance = 8;
-    this.modifiers = [];
-  }
-  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-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 style() { return popoverCanvasCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.inheritedAttributes = [];
+        this.selector = '';
+        this.referenceEl = undefined;
+        this.show = null;
+        this.placement = 'auto';
+        this.offsetSkidding = 0;
+        this.offsetDistance = 8;
+        this.modifiers = [];
+    }
+    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-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 style() { return popoverCanvasCss; }
 }, [6, "tds-popover-canvas", {
-    "selector": [1],
-    "referenceEl": [16],
-    "show": [4],
-    "placement": [1],
-    "offsetSkidding": [2, "offset-skidding"],
-    "offsetDistance": [2, "offset-distance"],
-    "modifiers": [16]
-  }]);
+        "selector": [1],
+        "referenceEl": [16],
+        "show": [4],
+        "placement": [1],
+        "offsetSkidding": [2, "offset-skidding"],
+        "offsetDistance": [2, "offset-distance"],
+        "modifiers": [16]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  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;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    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;
+    } });
 }
 defineCustomElement();
 

package/dist/components/popover-core.js

@@ -1792,193 +1792,193 @@ var createPopper = /*#__PURE__*/popperGenerator({
 }); // eslint-disable-next-line import/no-unused-modules
 
 const TdsPopoverCore = /*@__PURE__*/ proxyCustomElement(class TdsPopoverCore extends HTMLElement$1 {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.tdsShow = createEvent(this, "internalTdsShow", 0);
-    this.tdsClose = createEvent(this, "internalTdsClose", 0);
-    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);
-      }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.tdsShow = createEvent(this, "internalTdsShow", 0);
+        this.tdsClose = createEvent(this, "internalTdsClose", 0);
+        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;
     }
-  }
-  /* To enable initial loading of a component if user controls show prop*/
-  componentWillLoad() {
-    this.setIsShown(this.show);
-  }
-  /* To observe any change of show prop after an initial load */
-  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;
+    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);
+            }
+        }
     }
-    else {
-      this.target = this.selector ? document.querySelector(this.selector) : null;
+    /* To enable initial loading of a component if user controls show prop*/
+    componentWillLoad() {
+        this.setIsShown(this.show);
     }
-    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.`);
+    /* To observe any change of show prop after an initial load */
+    onShowChange(newValue) {
+        this.setIsShown(newValue);
     }
-    if (trigger === 'click' && this.show === null) {
-      this.target.addEventListener('click', this.onClickTarget);
+    onReferenceElChanged(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.initialize({ referenceEl: newValue, trigger: this.trigger });
     }
-    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);
-      }
+    onTriggerChanged(newValue) {
+        this.initialize({
+            referenceEl: this.referenceEl,
+            trigger: newValue,
+        });
     }
-  }
-  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();
+    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);
+            }
+        }
     }
-    this.renderedShowValue = this.isShown;
-  }
-  disconnectedCallback() {
-    this.cleanUp();
-  }
-  render() {
-    let hostStyle = {};
-    if (this.autoHide) {
-      hostStyle = { display: this.isShown ? 'block' : 'none' };
+    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();
     }
-    return (h(Host, { style: hostStyle }, h("slot", null)));
-  }
-  get host() { return this; }
-  static get watchers() { return {
-    "show": ["onShowChange"],
-    "referenceEl": ["onReferenceElChanged"],
-    "trigger": ["onTriggerChanged"]
-  }; }
+    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)));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "show": ["onShowChange"],
+        "referenceEl": ["onReferenceElChanged"],
+        "trigger": ["onTriggerChanged"]
+    }; }
 }, [6, "tds-popover-core", {
-    "selector": [1],
-    "referenceEl": [16],
-    "show": [4],
-    "placement": [1],
-    "offsetSkidding": [2, "offset-skidding"],
-    "offsetDistance": [2, "offset-distance"],
-    "modifiers": [16],
-    "trigger": [1],
-    "autoHide": [4, "auto-hide"],
-    "renderedShowValue": [32],
-    "popperInstance": [32],
-    "target": [32],
-    "isShown": [32]
-  }, [[8, "click", "onAnyClick"]], {
-    "show": ["onShowChange"],
-    "referenceEl": ["onReferenceElChanged"],
-    "trigger": ["onTriggerChanged"]
-  }]);
+        "selector": [1],
+        "referenceEl": [16],
+        "show": [4],
+        "placement": [1],
+        "offsetSkidding": [2, "offset-skidding"],
+        "offsetDistance": [2, "offset-distance"],
+        "modifiers": [16],
+        "trigger": [1],
+        "autoHide": [4, "auto-hide"],
+        "renderedShowValue": [32],
+        "popperInstance": [32],
+        "target": [32],
+        "isShown": [32]
+    }, [[8, "click", "onAnyClick"]], {
+        "show": ["onShowChange"],
+        "referenceEl": ["onReferenceElChanged"],
+        "trigger": ["onTriggerChanged"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tds-popover-core"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tds-popover-core":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TdsPopoverCore);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tds-popover-core"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tds-popover-core":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TdsPopoverCore);
+            }
+            break;
+    } });
 }
 defineCustomElement();