@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.6

package/dist/esm/ds-tooltip.entry.js

@@ -0,0 +1,180 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { B as registerInstance, I as createEvent, d as dsBrowser, E as h, F as Host, G as getElement } from './index-C6MVahkC.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
+import { a as autoUpdate, c as computePosition, s as shift, f as flip, o as offset } from './floating-ui.dom-BqY0KzJC.js';
+import { O as OneOf } from './one-of-CKPv0Nqm.js';
+import './create-validator-decorator-DovxquEu.js';
+
+const TOOLTIP_PLACEMENTS = ['top', 'right', 'bottom', 'left'];
+
+const tooltipHostCss = () => `:host{--_tooltip-position:var(--tooltip-position, var(--mod-tooltip-position, static));--_tooltip-top:var(--tooltip-top, var(--mod-tooltip-top));--_tooltip-right:var(--tooltip-right, var(--mod-tooltip-right));--_tooltip-bottom:var(--tooltip-bottom, var(--mod-tooltip-bottom));--_tooltip-left:var(--tooltip-left, var(--mod-tooltip-left));position:var(--_tooltip-position);top:var(--_tooltip-top);right:var(--_tooltip-right);bottom:var(--_tooltip-bottom);left:var(--_tooltip-left);--_tooltip-m:var(--tooltip-m, var(--mod-tooltip-m, 0));--_tooltip-my:var(--tooltip-my, var(--mod-tooltip-my));--_tooltip-mx:var(--tooltip-mx, var(--mod-tooltip-mx));--_tooltip-ml:var(--tooltip-ml, var(--mod-tooltip-ml));--_tooltip-mr:var(--tooltip-mr, var(--mod-tooltip-mr));--_tooltip-mt:var(--tooltip-mt, var(--mod-tooltip-mt));--_tooltip-mb:var(--tooltip-mb, var(--mod-tooltip-mb));margin:var(--_tooltip-m);margin-inline:var(--_tooltip-mx);margin-block:var(--_tooltip-my);margin-left:var(--_tooltip-ml);margin-right:var(--_tooltip-mr);margin-top:var(--_tooltip-mt);margin-bottom:var(--_tooltip-mb);--_tooltip-bg:var(--tooltip-bg, var(--mod-tooltip-bg, var(--ds-tooltip-bg)));--_tooltip-color:var(--tooltip-color, var(--mod-tooltip-color, var(--ds-tooltip-color)));--_tooltip-max-width:var(--tooltip-max-width, var(--mod-tooltip-max-width, auto));--_tooltip-radius:var(--tooltip-radius, var(--mod-tooltip-radius, var(--ds-tooltip-radius)));--_tooltip-shadow:var(--tooltip-shadow, var(--mod-tooltip-shadow, var(--ds-tooltip-shadow)));--_tooltip-px:var(--tooltip-px, var(--mod-tooltip-px, var(--ds-tooltip-px)));--_tooltip-py:var(--tooltip-py, var(--mod-tooltip-py, var(--ds-tooltip-py)));--_tooltip-font-family:var(--tooltip-font-family, var(--mod-tooltip-font-family, var(--ds-tooltip-font-family)));--_tooltip-font-size:var(--tooltip-font-size, var(--mod-tooltip-font-size, var(--ds-tooltip-font-size)));--_tooltip-line-height:var(--tooltip-line-height, var(--mod-tooltip-line-height, var(--ds-tooltip-line-height)));--_tooltip-z-index:var(--tooltip-z-index, var(--mod-tooltip-z-index, var(--ds-tooltip-z-index)))}:host{position:static;display:inline;z-index:var(--_tooltip-z-index)}::slotted(*){all:initial}[part=container]{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;opacity:0;visibility:hidden;pointer-events:none;-webkit-transform:translateY(-4px);transform:translateY(-4px);-webkit-transition:opacity 120ms cubic-bezier(0.4, 0, 1, 1),visibility 0ms linear 120ms,-webkit-transform 120ms cubic-bezier(0.4, 0, 1, 1);transition:opacity 120ms cubic-bezier(0.4, 0, 1, 1),visibility 0ms linear 120ms,-webkit-transform 120ms cubic-bezier(0.4, 0, 1, 1);transition:opacity 120ms cubic-bezier(0.4, 0, 1, 1),transform 120ms cubic-bezier(0.4, 0, 1, 1),visibility 0ms linear 120ms;transition:opacity 120ms cubic-bezier(0.4, 0, 1, 1),transform 120ms cubic-bezier(0.4, 0, 1, 1),visibility 0ms linear 120ms,-webkit-transform 120ms cubic-bezier(0.4, 0, 1, 1);will-change:opacity,transform;position:fixed;top:0;left:0;-webkit-box-sizing:border-box;box-sizing:border-box;width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:var(--_tooltip-max-width);background-color:var(--_tooltip-bg);border-radius:var(--_tooltip-radius);-webkit-box-shadow:var(--_tooltip-shadow);box-shadow:var(--_tooltip-shadow);color:var(--_tooltip-color);font-family:var(--_tooltip-font-family);font-size:var(--_tooltip-font-size);line-height:var(--_tooltip-line-height);z-index:var(--_tooltip-z-index)}:host([aria-hidden=false]) [part=container]{opacity:1;visibility:visible;pointer-events:auto;-webkit-transform:translate(0, 0);transform:translate(0, 0);-webkit-transition:opacity 200ms cubic-bezier(0, 0, 0.2, 1),visibility 0ms linear 0ms,-webkit-transform 200ms cubic-bezier(0, 0, 0.2, 1);transition:opacity 200ms cubic-bezier(0, 0, 0.2, 1),visibility 0ms linear 0ms,-webkit-transform 200ms cubic-bezier(0, 0, 0.2, 1);transition:opacity 200ms cubic-bezier(0, 0, 0.2, 1),transform 200ms cubic-bezier(0, 0, 0.2, 1),visibility 0ms linear 0ms;transition:opacity 200ms cubic-bezier(0, 0, 0.2, 1),transform 200ms cubic-bezier(0, 0, 0.2, 1),visibility 0ms linear 0ms,-webkit-transform 200ms cubic-bezier(0, 0, 0.2, 1)}[part=container][data-placement=top]{-webkit-transform:translateY(4px);transform:translateY(4px)}[part=container][data-placement=right]{-webkit-transform:translateX(-4px);transform:translateX(-4px)}[part=container][data-placement=left]{-webkit-transform:translateX(4px);transform:translateX(4px)}[part=content]{position:relative;padding-block:var(--_tooltip-py);padding-inline:var(--_tooltip-px);overflow-y:auto;max-height:calc(100svh - 8rem)}`;
+
+let tooltipIds = 0;
+const Tooltip = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsWillAnimate = createEvent(this, "dsWillAnimate");
+        this.dsDidAnimate = createEvent(this, "dsDidAnimate");
+        this.tooltipId = `ds-tooltip-${tooltipIds++}`;
+        /**
+         * Internal presented state
+         */
+        this.presented = false;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Id of the reference element. Defaults to the trigger element.
+         */
+        this.reference = '';
+        /**
+         * Preferred placement of the tooltip relative to the trigger.
+         */
+        this.placement = 'bottom';
+        /**
+         * Offset in pixels from the trigger element to the tooltip.
+         */
+        this.offset = 8;
+        /**
+         * Defines the maximum width of the tooltip content in pixels.
+         */
+        this.contentWidth = undefined;
+        /**
+         * When true, the tooltip is shown immediately on load without user interaction.
+         */
+        this.open = false;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    contentWidthChanged(newValue) {
+        if (newValue === undefined) {
+            this.el.style.removeProperty('--tooltip-max-width');
+        }
+        else {
+            this.el.style.setProperty('--tooltip-max-width', `${newValue}px`);
+        }
+    }
+    componentDidLoad() {
+        this.contentWidthChanged(this.contentWidth);
+        const trigger = this.triggerElement;
+        if (!trigger)
+            return;
+        trigger.setAttribute('aria-describedby', this.tooltipId);
+        trigger.addEventListener('mouseenter', () => this.present());
+        trigger.addEventListener('focus', () => this.present());
+        trigger.addEventListener('mouseleave', () => this.dismiss());
+        trigger.addEventListener('blur', () => this.dismiss());
+        if (this.open) {
+            this.present();
+        }
+    }
+    disconnectedCallback() {
+        if (this.cleanup) {
+            this.cleanup();
+        }
+        const trigger = this.triggerElement;
+        if (trigger) {
+            trigger.removeAttribute('aria-describedby');
+        }
+    }
+    /**
+     * INTERNAL METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * Shows the tooltip and positions it relative to the trigger element.
+     */
+    async present() {
+        const trigger = this.triggerElement;
+        if (!trigger || !this.containerEl)
+            return false;
+        this.dsWillAnimate.emit(true);
+        this.presented = true;
+        this.cleanup = autoUpdate(trigger, this.containerEl, () => this.update(), {
+            ancestorScroll: true,
+            ancestorResize: true,
+            elementResize: false,
+            layoutShift: true,
+            animationFrame: false,
+        });
+        this.dsDidAnimate.emit(true);
+        return true;
+    }
+    /**
+     * Hides the tooltip and cleans up the position updater.
+     */
+    async dismiss() {
+        if (!this.containerEl)
+            return false;
+        this.dsWillAnimate.emit(false);
+        if (this.cleanup) {
+            this.cleanup();
+            this.cleanup = undefined;
+        }
+        this.presented = false;
+        this.dsDidAnimate.emit(false);
+        return true;
+    }
+    /**
+     * Recomputes the tooltip position using floating-ui.
+     */
+    async update() {
+        const trigger = this.triggerElement;
+        if (!trigger || !this.containerEl)
+            return false;
+        const { x, y, placement } = await computePosition(trigger, this.containerEl, {
+            placement: this.placement,
+            strategy: 'fixed',
+            middleware: [
+                dsBrowser.hasWindow && !window.frameElement ? shift() : undefined,
+                flip(),
+                offset(this.offset),
+            ].filter(Boolean),
+        });
+        Object.assign(this.containerEl.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+        });
+        this.containerEl.dataset['placement'] = placement.split('-')[0];
+        return true;
+    }
+    /**
+     * GETTERS
+     * ------------------------------------------------------
+     */
+    get triggerElement() {
+        if (!dsBrowser.hasDocument)
+            return null;
+        return document.querySelector(`[id="${this.reference}"]`);
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        return (h(Host, { key: '4b6018fca5ddd89e53f8cefcc90af9ac530679dc', id: this.tooltipId, role: "tooltip", "aria-hidden": `${!this.presented}` }, h("div", { key: 'abb02eb66ea7991879fdbd8275e4638e050b3ec6', part: "container", ref: el => (this.containerEl = el) }, h("div", { key: '4087e11edcd4728524d59b08c173668d69d0d146', part: "content", "data-testid": "ds-tooltip-content" }, h("slot", { key: 'e50b739cabe6e2a2c892def29bbd860a38c60369' })))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "contentWidth": [{
+                "contentWidthChanged": 0
+            }]
+    }; }
+};
+__decorate([
+    Logger('tooltip'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Tooltip.prototype, "createLogger", null);
+__decorate([
+    OneOf(TOOLTIP_PLACEMENTS),
+    __metadata("design:type", String)
+], Tooltip.prototype, "placement", void 0);
+Tooltip.style = tooltipHostCss();
+
+export { Tooltip as ds_tooltip };

package/dist/esm/{field.util-BXxRO7CD.js → field.util-BjZzAi09.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { E as h, F as Host } from './index-CuwLeg-T.js';
+import { E as h, F as Host } from './index-C6MVahkC.js';
 import { a as ariaBooleanToString } from './aria-DYfTMCkl.js';
 import { I as I18nDsLabel } from './label.i18n-C7I7OlaM.js';