@db-ux/wc-core-components 1.0.0-test-13b991d

package/dist/collection/utils/index.js

@@ -0,0 +1,167 @@
+export const uuid = () => {
+    var _a, _b;
+    if (typeof window !== 'undefined') {
+        if ((_a = window.crypto) === null || _a === void 0 ? void 0 : _a.randomUUID) {
+            return window.crypto.randomUUID();
+        }
+        else if ((_b = window.crypto) === null || _b === void 0 ? void 0 : _b.getRandomValues) {
+            return window.crypto.getRandomValues(new Uint32Array(3)).join('-');
+        }
+    }
+    return Math.random().toString().substring(2);
+};
+export const addAttributeToChildren = (element, attribute) => {
+    const children = element.children;
+    Object.values(children).forEach((child) => {
+        child.setAttribute(attribute.key, attribute.value);
+        if (child.children.length > 0) {
+            addAttributeToChildren(child, attribute);
+        }
+    });
+};
+export const cls = (...args) => {
+    let result = '';
+    for (const arg of args) {
+        if (arg) {
+            if (typeof arg === 'string') {
+                result += `${arg} `;
+            }
+            else {
+                for (const key in arg) {
+                    if (arg[key]) {
+                        result += `${key} `;
+                    }
+                }
+            }
+        }
+    }
+    return result.trim();
+};
+const reactHtmlAttributes = ['suppressHydrationWarning', 'suppressContentEditableWarning', 'translate', 'title', 'tabIndex', 'style', 'spellCheck', 'nonce', 'lang', 'hidden', 'draggable', 'dir', 'contextMenu', 'contentEditable', 'autoFocus', 'accessKey', 'is', 'inputMode', 'unselectable', 'security', 'results', 'vocab', 'typeof', 'rev', 'resource', 'rel', 'property', 'inlist', 'datatype', 'content', 'about', 'role', 'radioGroup', 'color'];
+export const filterPassingProps = (props, propsPassingFilter) => Object.keys(props).filter(key => (key.startsWith('data-') || key.startsWith('aria-') || key.startsWith('default') || key.startsWith('auto') || key.startsWith('item') || key.startsWith('on') || reactHtmlAttributes.includes(key)) && !propsPassingFilter.includes(key)).reduce((obj, key) => {
+    return Object.assign(Object.assign({}, obj), { [key]: props[key] });
+}, {});
+export const getRootProps = (props, rooProps) => {
+    return Object.keys(props).filter(key => rooProps.includes(key)).reduce((obj, key) => {
+        return Object.assign(Object.assign({}, obj), { [key]: props[key] });
+    }, {});
+};
+export const visibleInVX = (el) => {
+    const { left, right } = el.getBoundingClientRect();
+    const { innerWidth } = window;
+    return left >= 0 && right <= innerWidth;
+};
+export const visibleInVY = (el) => {
+    const { top, bottom } = el.getBoundingClientRect();
+    const { innerHeight } = window;
+    return top >= 0 && bottom <= innerHeight;
+};
+export const isInView = (el) => {
+    var _a;
+    const { top, bottom, left, right } = el.getBoundingClientRect();
+    const { innerHeight, innerWidth } = window;
+    let outTop = top < 0;
+    let outBottom = bottom > innerHeight;
+    let outLeft = left < 0;
+    let outRight = right > innerWidth;
+    // We need to check if it was already outside
+    const outsideY = el.hasAttribute('data-outside-vy');
+    const outsideX = el.hasAttribute('data-outside-vx');
+    const parentRect = (_a = el === null || el === void 0 ? void 0 : el.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    if (parentRect) {
+        if (outsideY) {
+            const position = el.getAttribute('data-outside-vy');
+            if (position === 'top') {
+                outTop = parentRect.top - (bottom - parentRect.bottom) < 0;
+            }
+            else {
+                outBottom = parentRect.bottom + (parentRect.top - top) > innerHeight;
+            }
+        }
+        if (outsideX) {
+            const position = el.getAttribute('data-outside-vx');
+            if (position === 'left') {
+                outLeft = parentRect.left - (right - parentRect.right) < 0;
+            }
+            else {
+                outRight = parentRect.right + (parentRect.left - left) > innerWidth;
+            }
+        }
+    }
+    return {
+        outTop,
+        outBottom,
+        outLeft,
+        outRight
+    };
+};
+export const handleDataOutside = (el) => {
+    const { outTop, outBottom, outLeft, outRight } = isInView(el);
+    let dataOutsidePair = {};
+    if (outTop || outBottom) {
+        dataOutsidePair = {
+            vy: outTop ? 'top' : 'bottom'
+        };
+        el.setAttribute('data-outside-vy', dataOutsidePair.vy);
+    }
+    else {
+        el.removeAttribute('data-outside-vy');
+    }
+    if (outLeft || outRight) {
+        dataOutsidePair = Object.assign(Object.assign({}, dataOutsidePair), { vx: outRight ? 'right' : 'left' });
+        el.setAttribute('data-outside-vx', dataOutsidePair.vx);
+    }
+    else {
+        el.removeAttribute('data-outside-vx');
+    }
+    return dataOutsidePair;
+};
+export const isArrayOfStrings = (value) => Array.isArray(value) && value.every(item => typeof item === 'string');
+const appleOs = ['Mac', 'iPhone', 'iPad', 'iPod'];
+export const hasVoiceOver = () => typeof window !== 'undefined' && appleOs.some(os => window.navigator.userAgent.includes(os));
+export const delay = (fn, ms) => new Promise(() => setTimeout(fn, ms));
+/**
+ * Some frameworks like stencil would not add "true" as value for a prop
+ * if it is used in a framework like angular e.g.: [disabled]="myDisabledProp"
+ * @param originBool Some boolean to convert to string
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const getBooleanAsString = (originBool) => {
+    if (originBool) {
+        return String(originBool);
+    }
+    return originBool;
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const getHideProp = (show) => {
+    if (show === undefined || show === null) {
+        return undefined;
+    }
+    return getBooleanAsString(!show);
+};
+export const stringPropVisible = (givenString, showString) => {
+    if (showString === undefined) {
+        return !!givenString;
+    }
+    else {
+        return showString && givenString;
+    }
+};
+export default {
+    getRootProps,
+    filterPassingProps,
+    cls,
+    addAttributeToChildren,
+    uuid,
+    visibleInVX,
+    visibleInVY,
+    isInView,
+    handleDataOutside,
+    isArrayOfStrings,
+    hasVoiceOver,
+    delay,
+    getBooleanAsString,
+    getHideProp,
+    stringPropVisible
+};
+//# sourceMappingURL=index.js.map

package/dist/collection/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"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","sourcesContent":["export const uuid = () => {\n  if (typeof window !== 'undefined') {\n    if (window.crypto?.randomUUID) {\n      return window.crypto.randomUUID();\n    } else if (window.crypto?.getRandomValues) {\n      return window.crypto.getRandomValues(new Uint32Array(3)).join('-');\n    }\n  }\n  return Math.random().toString().substring(2);\n};\nexport const addAttributeToChildren = (element: Element, attribute: {\n  key: string;\n  value: string;\n}) => {\n  const children = element.children;\n  Object.values(children).forEach((child: Element) => {\n    child.setAttribute(attribute.key, attribute.value);\n    if (child.children.length > 0) {\n      addAttributeToChildren(child, attribute);\n    }\n  });\n};\nexport type ClassNameArg = string | {\n  [key: string]: boolean | undefined;\n} | undefined;\nexport const cls = (...args: ClassNameArg[]) => {\n  let result = '';\n  for (const arg of args) {\n    if (arg) {\n      if (typeof arg === 'string') {\n        result += `${arg} `;\n      } else {\n        for (const key in arg) {\n          if (arg[key]) {\n            result += `${key} `;\n          }\n        }\n      }\n    }\n  }\n  return result.trim();\n};\nconst reactHtmlAttributes = ['suppressHydrationWarning', 'suppressContentEditableWarning', 'translate', 'title', 'tabIndex', 'style', 'spellCheck', 'nonce', 'lang', 'hidden', 'draggable', 'dir', 'contextMenu', 'contentEditable', 'autoFocus', 'accessKey', 'is', 'inputMode', 'unselectable', 'security', 'results', 'vocab', 'typeof', 'rev', 'resource', 'rel', 'property', 'inlist', 'datatype', 'content', 'about', 'role', 'radioGroup', 'color'];\nexport const filterPassingProps = (props: Record<string, unknown>, propsPassingFilter: string[]): Record<string, unknown> => Object.keys(props).filter(key => (key.startsWith('data-') || key.startsWith('aria-') || key.startsWith('default') || key.startsWith('auto') || key.startsWith('item') || key.startsWith('on') || reactHtmlAttributes.includes(key)) && !propsPassingFilter.includes(key)).reduce((obj: Record<string, unknown>, key: string) => {\n  return {\n    ...obj,\n    [key]: props[key]\n  };\n}, {});\nexport const getRootProps = (props: Record<string, unknown>, rooProps: string[]): Record<string, unknown> => {\n  return Object.keys(props).filter(key => rooProps.includes(key)).reduce((obj: Record<string, unknown>, key: string) => {\n    return {\n      ...obj,\n      [key]: props[key]\n    };\n  }, {});\n};\nexport const visibleInVX = (el: Element) => {\n  const {\n    left,\n    right\n  } = el.getBoundingClientRect();\n  const {\n    innerWidth\n  } = window;\n  return left >= 0 && right <= innerWidth;\n};\nexport const visibleInVY = (el: Element) => {\n  const {\n    top,\n    bottom\n  } = el.getBoundingClientRect();\n  const {\n    innerHeight\n  } = window;\n  return top >= 0 && bottom <= innerHeight;\n};\nexport const isInView = (el: Element) => {\n  const {\n    top,\n    bottom,\n    left,\n    right\n  } = el.getBoundingClientRect();\n  const {\n    innerHeight,\n    innerWidth\n  } = window;\n  let outTop = top < 0;\n  let outBottom = bottom > innerHeight;\n  let outLeft = left < 0;\n  let outRight = right > innerWidth;\n\n  // We need to check if it was already outside\n  const outsideY = el.hasAttribute('data-outside-vy');\n  const outsideX = el.hasAttribute('data-outside-vx');\n  const parentRect = el?.parentElement?.getBoundingClientRect();\n  if (parentRect) {\n    if (outsideY) {\n      const position = el.getAttribute('data-outside-vy');\n      if (position === 'top') {\n        outTop = parentRect.top - (bottom - parentRect.bottom) < 0;\n      } else {\n        outBottom = parentRect.bottom + (parentRect.top - top) > innerHeight;\n      }\n    }\n    if (outsideX) {\n      const position = el.getAttribute('data-outside-vx');\n      if (position === 'left') {\n        outLeft = parentRect.left - (right - parentRect.right) < 0;\n      } else {\n        outRight = parentRect.right + (parentRect.left - left) > innerWidth;\n      }\n    }\n  }\n  return {\n    outTop,\n    outBottom,\n    outLeft,\n    outRight\n  };\n};\nexport interface DBDataOutsidePair {\n  vx?: 'left' | 'right';\n  vy?: 'top' | 'bottom';\n}\nexport const handleDataOutside = (el: Element): DBDataOutsidePair => {\n  const {\n    outTop,\n    outBottom,\n    outLeft,\n    outRight\n  } = isInView(el);\n  let dataOutsidePair: DBDataOutsidePair = {};\n  if (outTop || outBottom) {\n    dataOutsidePair = {\n      vy: outTop ? 'top' : 'bottom'\n    };\n    el.setAttribute('data-outside-vy', dataOutsidePair.vy!);\n  } else {\n    el.removeAttribute('data-outside-vy');\n  }\n  if (outLeft || outRight) {\n    dataOutsidePair = {\n      ...dataOutsidePair,\n      vx: outRight ? 'right' : 'left'\n    };\n    el.setAttribute('data-outside-vx', dataOutsidePair.vx!);\n  } else {\n    el.removeAttribute('data-outside-vx');\n  }\n  return dataOutsidePair;\n};\nexport const isArrayOfStrings = (value: unknown): value is string[] => Array.isArray(value) && value.every(item => typeof item === 'string');\nconst appleOs = ['Mac', 'iPhone', 'iPad', 'iPod'];\nexport const hasVoiceOver = (): boolean => typeof window !== 'undefined' && appleOs.some(os => window.navigator.userAgent.includes(os));\nexport const delay = (fn: () => void, ms: number) => new Promise(() => setTimeout(fn, ms));\n\n/**\n * Some frameworks like stencil would not add \"true\" as value for a prop\n * if it is used in a framework like angular e.g.: [disabled]=\"myDisabledProp\"\n * @param originBool Some boolean to convert to string\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const getBooleanAsString = (originBool?: boolean): any => {\n  if (originBool) {\n    return String(originBool);\n  }\n  return originBool;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const getHideProp = (show?: boolean): any => {\n  if (show === undefined || show === null) {\n    return undefined;\n  }\n  return getBooleanAsString(!show);\n};\nexport const stringPropVisible = (givenString?: string, showString?: boolean) => {\n  if (showString === undefined) {\n    return !!givenString;\n  } else {\n    return showString && givenString;\n  }\n};\nexport default {\n  getRootProps,\n  filterPassingProps,\n  cls,\n  addAttributeToChildren,\n  uuid,\n  visibleInVX,\n  visibleInVY,\n  isInView,\n  handleDataOutside,\n  isArrayOfStrings,\n  hasVoiceOver,\n  delay,\n  getBooleanAsString,\n  getHideProp,\n  stringPropVisible\n}"]}

package/dist/collection/utils/navigation.js

@@ -0,0 +1,137 @@
+import { handleDataOutside } from "./index";
+export const isEventTargetNavigationItem = (event) => {
+    var _a, _b;
+    const { target } = event;
+    return Boolean(!((_a = target === null || target === void 0 ? void 0 : target.classList) === null || _a === void 0 ? void 0 : _a.contains('db-navigation-item-expand-button')) && ((_b = target === null || target === void 0 ? void 0 : target.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains('db-navigation-item')));
+};
+export class NavigationItemSafeTriangle {
+    constructor(element, subNavigation) {
+        var _a;
+        this.parentSubNavigation = null;
+        this.initialized = false;
+        this.mouseX = 0;
+        this.mouseY = 0;
+        this.element = element;
+        this.subNavigation = subNavigation;
+        if (!this.element || !this.subNavigation) {
+            return;
+        }
+        this.parentSubNavigation = (_a = this.element) === null || _a === void 0 ? void 0 : _a.closest('.db-sub-navigation');
+        /*
+         * only initiate if:
+         * 1. item is not at root navigation level
+         * 2. item is not in the mobile navigation / within db-drawer
+         */
+        if (this.parentSubNavigation && !this.element.closest('.db-drawer')) {
+            this.init();
+        }
+    }
+    init() {
+        var _a, _b, _c;
+        const parentElementWidth = (_b = (_a = this.parentSubNavigation) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0;
+        // the triangle has the width of the sub-navigation, current nav-item can be wider.
+        // so the width of the triangle must be adapted to a possibly wider nav-item.
+        (_c = this.element) === null || _c === void 0 ? void 0 : _c.style.setProperty('--db-navigation-item-inline-size', `${parentElementWidth}px`);
+        this.initialized = true;
+    }
+    enableFollow() {
+        var _a, _b;
+        if (!this.initialized || this.triangleData || !this.element || !this.subNavigation) {
+            return;
+        }
+        const dataOutsidePair = handleDataOutside(this.subNavigation);
+        const itemRect = this.element.getBoundingClientRect();
+        const parentElementWidth = (_b = (_a = this.parentSubNavigation) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0;
+        this.triangleData = {
+            itemRect,
+            parentElementWidth,
+            subNavigationHeight: this.subNavigation.getBoundingClientRect().height,
+            padding: (parentElementWidth - itemRect.width) / 2,
+            outsideVX: dataOutsidePair.vx,
+            outsideVY: dataOutsidePair.vy
+        };
+    }
+    disableFollow() {
+        this.triangleData = undefined;
+    }
+    getTriangleTipX() {
+        if (!this.triangleData)
+            return 0;
+        if (this.triangleData.outsideVX === 'right') {
+            // vertical flipped triangle needs an inverted x pos
+            return this.triangleData.itemRect.width - this.mouseX;
+        }
+        // triangle stops shrinking from 75% x pos
+        return Math.min(this.mouseX, this.triangleData.itemRect.width * 0.75);
+    }
+    getTriangleTipY() {
+        if (!this.triangleData)
+            return 0;
+        // padding must be added to the y pos of the tip so that the y pos matches the cursor
+        const mouseYLimited = Math.max(Math.min(this.mouseY, this.triangleData.itemRect.height), 0) + this.triangleData.padding;
+        if (this.triangleData.outsideVY === 'bottom') {
+            // add offset to tip y pos to match corrected sub-navigation y pos
+            return mouseYLimited + (this.triangleData.subNavigationHeight - this.triangleData.padding * 2 - this.triangleData.itemRect.height);
+        }
+        return mouseYLimited;
+    }
+    hasMouseEnteredSubNavigation() {
+        if (!this.triangleData) {
+            return false;
+        }
+        const isSubNavigationOnLeftSide = this.triangleData.outsideVX === 'right';
+        if (isSubNavigationOnLeftSide && this.mouseX < -1 * this.triangleData.padding) {
+            return true;
+        }
+        if (!isSubNavigationOnLeftSide && this.mouseX > this.triangleData.parentElementWidth - this.triangleData.padding) {
+            return true;
+        }
+        return false;
+    }
+    getTriangleCoordinates(variant) {
+        if (!this.triangleData) {
+            return;
+        }
+        if (variant === 'fill-gap') {
+            const itemHeight = `${this.triangleData.itemRect.height + 2 * this.triangleData.padding}px`;
+            const xStart = `${this.triangleData.parentElementWidth - this.triangleData.padding}px`;
+            return {
+                lb: `${xStart} ${itemHeight}`,
+                lt: `${xStart} 0`,
+                rt: '100% 0',
+                rb: `100% ${itemHeight}`
+            };
+        }
+        const tipX = this.getTriangleTipX();
+        const tipY = this.getTriangleTipY();
+        const lb = `${tipX}px ${tipY}px`;
+        const lt = `${tipX}px ${tipY}px`;
+        return {
+            lb,
+            lt,
+            rt: '100% 0',
+            rb: '100% 100%'
+        };
+    }
+    followByMouseEvent(event) {
+        if (!this.initialized || !this.triangleData || !this.element || !this.subNavigation) {
+            return;
+        }
+        this.mouseX = event.clientX - this.triangleData.itemRect.left;
+        this.mouseY = event.clientY - this.triangleData.itemRect.top;
+        const isOverSubNavigation = this.hasMouseEnteredSubNavigation();
+        const coordinates = this.getTriangleCoordinates(isOverSubNavigation ? 'fill-gap' : 'safe-triangle');
+        if (!coordinates) {
+            return;
+        }
+        this.element.style.setProperty('--db-navigation-item-clip-path', `polygon(${coordinates.lb}, ${coordinates.lt}, ${coordinates.rt}, ${coordinates.rb})`);
+        if (isOverSubNavigation) {
+            this.triangleData = undefined;
+        }
+    }
+}
+export default {
+    isEventTargetNavigationItem,
+    NavigationItemSafeTriangle
+};
+//# sourceMappingURL=navigation.js.map

package/dist/collection/utils/navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../src/utils/navigation.ts"],"names":[],"mappings":"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","sourcesContent":["import { handleDataOutside } from './index';\nexport type TriangleData = {\n  itemRect: DOMRect;\n  parentElementWidth: number;\n  subNavigationHeight: number;\n  padding: number;\n  outsideVX: 'left' | 'right' | undefined;\n  outsideVY: 'top' | 'bottom' | undefined;\n};\nexport const isEventTargetNavigationItem = (event: unknown): boolean => {\n  const {\n    target\n  } = (event as {\n    target: HTMLElement;\n  });\n  return Boolean(!target?.classList?.contains('db-navigation-item-expand-button') && target?.parentElement?.classList.contains('db-navigation-item'));\n};\nexport class NavigationItemSafeTriangle {\n  private readonly element: HTMLElement | null;\n  private readonly subNavigation: Element | null;\n  private readonly parentSubNavigation: Element | null = null;\n  private triangleData?: TriangleData;\n  private initialized: boolean = false;\n  private mouseX: number = 0;\n  private mouseY: number = 0;\n  constructor(element: HTMLElement | null, subNavigation: Element | null) {\n    this.element = element;\n    this.subNavigation = subNavigation;\n    if (!this.element || !this.subNavigation) {\n      return;\n    }\n    this.parentSubNavigation = this.element?.closest('.db-sub-navigation');\n\n    /*\n     * only initiate if:\n     * 1. item is not at root navigation level\n     * 2. item is not in the mobile navigation / within db-drawer\n     */\n    if (this.parentSubNavigation && !this.element.closest('.db-drawer')) {\n      this.init();\n    }\n  }\n  private init() {\n    const parentElementWidth = this.parentSubNavigation?.getBoundingClientRect().width ?? 0;\n\n    // the triangle has the width of the sub-navigation, current nav-item can be wider.\n    // so the width of the triangle must be adapted to a possibly wider nav-item.\n    this.element?.style.setProperty('--db-navigation-item-inline-size', `${parentElementWidth}px`);\n    this.initialized = true;\n  }\n  public enableFollow() {\n    if (!this.initialized || this.triangleData || !this.element || !this.subNavigation) {\n      return;\n    }\n    const dataOutsidePair = handleDataOutside(this.subNavigation);\n    const itemRect = this.element.getBoundingClientRect();\n    const parentElementWidth = this.parentSubNavigation?.getBoundingClientRect().width ?? 0;\n    this.triangleData = {\n      itemRect,\n      parentElementWidth,\n      subNavigationHeight: this.subNavigation.getBoundingClientRect().height,\n      padding: (parentElementWidth - itemRect.width) / 2,\n      outsideVX: dataOutsidePair.vx,\n      outsideVY: dataOutsidePair.vy\n    };\n  }\n  public disableFollow() {\n    this.triangleData = undefined;\n  }\n  private getTriangleTipX(): number {\n    if (!this.triangleData) return 0;\n    if (this.triangleData.outsideVX === 'right') {\n      // vertical flipped triangle needs an inverted x pos\n      return this.triangleData.itemRect.width - this.mouseX;\n    }\n\n    // triangle stops shrinking from 75% x pos\n    return Math.min(this.mouseX, this.triangleData.itemRect.width * 0.75);\n  }\n  private getTriangleTipY(): number {\n    if (!this.triangleData) return 0;\n\n    // padding must be added to the y pos of the tip so that the y pos matches the cursor\n    const mouseYLimited = Math.max(Math.min(this.mouseY, this.triangleData.itemRect.height), 0) + this.triangleData.padding;\n    if (this.triangleData.outsideVY === 'bottom') {\n      // add offset to tip y pos to match corrected sub-navigation y pos\n      return mouseYLimited + (this.triangleData.subNavigationHeight - this.triangleData.padding * 2 - this.triangleData.itemRect.height);\n    }\n    return mouseYLimited;\n  }\n  private hasMouseEnteredSubNavigation(): boolean {\n    if (!this.triangleData) {\n      return false;\n    }\n    const isSubNavigationOnLeftSide = this.triangleData.outsideVX === 'right';\n    if (isSubNavigationOnLeftSide && this.mouseX < -1 * this.triangleData.padding) {\n      return true;\n    }\n    if (!isSubNavigationOnLeftSide && this.mouseX > this.triangleData.parentElementWidth - this.triangleData.padding) {\n      return true;\n    }\n    return false;\n  }\n  private getTriangleCoordinates(variant: 'safe-triangle' | 'fill-gap'): undefined | {\n    lb: string;\n    lt: string;\n    rt: string;\n    rb: string;\n  } {\n    if (!this.triangleData) {\n      return;\n    }\n    if (variant === 'fill-gap') {\n      const itemHeight = `${this.triangleData.itemRect.height + 2 * this.triangleData.padding}px`;\n      const xStart = `${this.triangleData.parentElementWidth - this.triangleData.padding}px`;\n      return {\n        lb: `${xStart} ${itemHeight}`,\n        lt: `${xStart} 0`,\n        rt: '100% 0',\n        rb: `100% ${itemHeight}`\n      };\n    }\n    const tipX = this.getTriangleTipX();\n    const tipY = this.getTriangleTipY();\n    const lb = `${tipX}px ${tipY}px`;\n    const lt = `${tipX}px ${tipY}px`;\n    return {\n      lb,\n      lt,\n      rt: '100% 0',\n      rb: '100% 100%'\n    };\n  }\n  public followByMouseEvent(event: MouseEvent) {\n    if (!this.initialized || !this.triangleData || !this.element || !this.subNavigation) {\n      return;\n    }\n    this.mouseX = event.clientX - this.triangleData.itemRect.left;\n    this.mouseY = event.clientY - this.triangleData.itemRect.top;\n    const isOverSubNavigation = this.hasMouseEnteredSubNavigation();\n    const coordinates = this.getTriangleCoordinates(isOverSubNavigation ? 'fill-gap' : 'safe-triangle');\n    if (!coordinates) {\n      return;\n    }\n    this.element.style.setProperty('--db-navigation-item-clip-path', `polygon(${coordinates.lb}, ${coordinates.lt}, ${coordinates.rt}, ${coordinates.rb})`);\n    if (isOverSubNavigation) {\n      this.triangleData = undefined;\n    }\n  }\n}\nexport default {\n  isEventTargetNavigationItem,\n  NavigationItemSafeTriangle\n}"]}