@swisspost/design-system-components 9.0.0-next.9 → 10.0.0-next.37

package/dist/cjs/post-tooltip-f833d51d.js

@@ -0,0 +1,73 @@
+'use strict';
+
+const index = require('./index-b60129c4.js');
+const _package = require('./package-8121f093.js');
+const checkType = require('./check-type-cdbf6d29.js');
+require('./breakpoints-cdf1b747.js');
+
+const postTooltipCss = ":host{display:none}:host([open]){display:block}post-popovercontainer[arrow]::after{position:absolute;content:\"\";inset:-13px;z-index:-1}post-popovercontainer>div{padding:var(--post-core-dimension-4) var(--post-core-dimension-8);max-width:200px;min-height:32px}";
+const PostTooltipStyle0 = postTooltipCss;
+
+const PostTooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.placement = 'top';
+        this.arrow = false;
+        this.animation = null;
+        this.open = false;
+    }
+    validateOpen() {
+        checkType.checkType(this, 'open', 'boolean', 'The "open" property of the post-tooltip must be a boolean.');
+    }
+    connectedCallback() {
+        this.validateOpen();
+    }
+    componentDidLoad() {
+        if (!this.host.id) {
+            console.error(
+            /*prettier-ignore*/
+            'No id set: <post-tooltip> must have an id, linking it to it\'s target element with a <post-tooltip-trigger> element.');
+        }
+    }
+    /**
+     * Programmatically display the tooltip.
+     * @param target An element where the tooltip should be shown
+     */
+    async show(target) {
+        if (this.open)
+            return;
+        this.popoverRef.show(target);
+    }
+    /**
+     * Programmatically hide this tooltip.
+     */
+    async hide() {
+        this.popoverRef.hide();
+    }
+    /**
+     * Toggle tooltip display.
+     * @param target An element where the tooltip should be shown
+     * @param [force] Pass true to always show or false to always hide
+     */
+    async toggle(target, force) {
+        this.popoverRef.toggle(target, force);
+    }
+    /**
+     * Set the open state based on the toggle event.
+     * @param e Popovercontainer toggle event
+     */
+    handleToggle(e) {
+        this.open = e.detail;
+    }
+    render() {
+        const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
+        return (index.h(index.Host, { key: 'd6a76533f22e354ff89f15c1e9a10e20fe471579', "data-version": _package.version, role: "tooltip" }, index.h("post-popovercontainer", { key: '60076aaa184ae98e9e813400cc2d03f5add274df', safeSpace: 'trapezoid', class: popoverClass, arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, index.h("slot", { key: '1d5ea42696cc60a8a84ff0ecc29e82152d028ba4' }))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": ["validateOpen"]
+    }; }
+};
+PostTooltip.style = PostTooltipStyle0;
+
+exports.PostTooltip = PostTooltip;