@swisspost/design-system-components 9.0.0-next.8 → 9.0.0

package/dist/collection/components/post-tag/post-tag.js

@@ -30,7 +30,7 @@ export class PostTag {
         this.setClasses();
     }
     render() {
-        return (h(Host, { key: 'e2d95e10853f66d7b05768b80a0350e0bc05051d', "data-version": version }, h("div", { key: '72bac44cca9c4197e9042e6a4896f235d057a5c9', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '1b54b8a89320306aa09fe1e50dffd453b44fc587', class: "tag-text" }, h("slot", { key: '52f4f5b2d62f8ae245c7b472cdbc9f5202b554c1' })))));
+        return (h(Host, { key: '20c4c9dc37c9db3d4372090fb374bf2eea0cdb07', "data-version": version }, h("div", { key: '9bef44d17e73969a1fc3cfe580c6347958da89dc', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '2bc158a3bd9981960053ab4ffc9f69419cd38af3', class: "tag-text" }, h("slot", { key: 'fabe72ce90e9a6e06fa62c748731de44f1c7f6b7' })))));
     }
     static get is() { return "post-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -93,7 +93,7 @@ export class PostTag {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the icon `name` inside of the component.\n<span className=\"banner banner-sm banner-info\">If not set the icon will not show up.</span>\nTo learn which icons are available, please visit our <a href=\"/?path=/docs/5704bdc4-c5b5-45e6-b123-c54d01fce2f1--docs\">icon library</a>."
+                    "text": "Defines the icon `name` inside of the component.\n<span className=\"alert alert-sm alert-info\">If not set the icon will not show up.</span>\nTo learn which icons are available, please visit our <a href=\"/?path=/docs/5704bdc4-c5b5-45e6-b123-c54d01fce2f1--docs\">icon library</a>."
                 },
                 "attribute": "icon",
                 "reflect": false,

package/dist/collection/components/post-tooltip/post-tooltip.css

@@ -1 +1 @@
-:host{--post-contrast-color: #fff;--post-bg-rgb: 51, 51, 51}post-popovercontainer{padding:.25rem .5rem;max-width:13.5rem;min-height:1rem}post-popovercontainer[arrow]::after{position:absolute;content:"";inset:-13px;z-index:-1}
+:host{display:none;--post-contrast-color: #fff;--post-bg-rgb: 51, 51, 51}:host([open]){display:block}post-popovercontainer[arrow]::after{position:absolute;content:"";inset:-13px;z-index:-1}post-popovercontainer>div{padding:.25rem .5rem;max-width:200px;min-height:32px}

package/dist/collection/components/post-tooltip/post-tooltip.js

@@ -1,220 +1,56 @@
 import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
-import isFocusable from "ally.js/is/focusable";
-import "long-press-event";
-import { getAttributeObserver } from "../../utils/attribute-observer";
-import { checkEmptyOrType } from "../../utils/index";
-const OPEN_DELAY = 650; // matches HTML title delay
-/**
- * @slot default - Slot for the content of the tooltip.
- */
-/**
- * Track how many instances remain on the page. Used for removing global event listeners
- */
-let tooltipInstances = 0;
-let hideTooltipTimeout = null;
-const tooltipTargetAttribute = 'data-tooltip-target';
-const tooltipTargetAttributeSelector = `[${tooltipTargetAttribute}]`;
-let globalCurrentTarget;
-let tooltipTimeout = null;
-/**
- * Global event listener to show tooltips. This is globalized so that triggers that are rendered
- * async will still work without the need to set listeners on the element itself
- *
- * This handler manages both pointer and focus events to properly trigger tooltips.
- * If the event is a focus event (e.g., keyboard navigation), pointer events are ignored to avoid
- * interference with tooltip behavior.
- * @param e Event
- * @returns
- */
-const globalInterestHandler = (e) => {
-    const targetElement = e.target.closest(tooltipTargetAttributeSelector);
-    globalCurrentTarget = targetElement;
-    if (!targetElement || !('getAttribute' in targetElement)) {
-        clearTimeout(tooltipTimeout);
-        return;
-    }
-    const tooltipTarget = targetElement.getAttribute(tooltipTargetAttribute);
-    if (!tooltipTarget || tooltipTarget === '')
-        return;
-    const tooltip = document.getElementById(tooltipTarget);
-    // Determine if the tooltip was triggered by a focus event
-    const triggeredByFocus = e.type === 'focusin';
-    void (tooltip === null || tooltip === void 0 ? void 0 : tooltip.show(targetElement, triggeredByFocus));
-    if (hideTooltipTimeout) {
-        window.clearTimeout(hideTooltipTimeout);
-        hideTooltipTimeout = null;
-    }
-};
-/**
- * Global event listener to hide tooltips. This is globalized so that triggers that are rendered
- * async will still work without the need to set listeners on the element itself
- * @param e Event
- * @returns
- */
-const globalInterestLostHandler = (e) => {
-    const targetElement = e.target.closest(tooltipTargetAttributeSelector);
-    if (!targetElement || !('getAttribute' in targetElement))
-        return;
-    const tooltipTarget = targetElement.getAttribute(tooltipTargetAttribute);
-    if (!tooltipTarget || tooltipTarget === '')
-        return;
-    const tooltip = document.getElementById(tooltipTarget);
-    globalHideTooltip(tooltip);
-};
-/**
- * Start the hiding process through a timeout to give other interest events a chance to
- * intervene and cancel the hide event.
- * @param {HTMLPostTooltipElement} tooltip
- */
-const globalHideTooltip = (tooltip) => {
-    hideTooltipTimeout = window.setTimeout(() => {
-        tooltip.hide();
-        hideTooltipTimeout = null;
-    }, 42);
-};
-/**
- * Patch some accessibility features that are hard to remember or understand
- * @param {HTMLElement} trigger
- */
-const patchAccessibilityFeatures = (trigger) => {
-    const describedBy = trigger.getAttribute('aria-describedby');
-    const id = trigger.getAttribute(tooltipTargetAttribute);
-    // Add tooltip to aria-describedby
-    if (!(describedBy === null || describedBy === void 0 ? void 0 : describedBy.includes(id))) {
-        const newDescribedBy = describedBy ? `${describedBy} ${id}` : id;
-        trigger.setAttribute('aria-describedby', newDescribedBy);
-    }
-    // Make element focusable
-    if (!isFocusable(trigger)) {
-        trigger.setAttribute('tabindex', '0');
-    }
-};
-// Initialize a mutation observer for patching accessibility features
-const triggerObserver = getAttributeObserver(tooltipTargetAttribute, patchAccessibilityFeatures);
+import { checkType } from "../../utils/index";
 export class PostTooltip {
     constructor() {
-        this.wasOpenedByFocus = false;
         this.placement = 'top';
-        this.arrow = true;
-        this.delayed = false;
-    }
-    validateDelayed() {
-        checkEmptyOrType(this.delayed, 'boolean', 'The post-tooltip "delayed" property should be a boolean.');
+        this.arrow = false;
+        this.animation = null;
+        this.open = false;
     }
-    connectedCallback() {
-        this.validateDelayed();
+    validateOpen() {
+        checkType(this.open, 'boolean', 'The "open" property of the post-tooltip must be a boolean.');
     }
     componentDidLoad() {
         if (!this.host.id) {
-            throw new Error(
+            console.error(
             /*prettier-ignore*/
-            'No id set: <post-tooltip> must have an id, linking it to it\'s target element using the data-tooltip-target attribute.');
+            'No id set: <post-tooltip> must have an id, linking it to it\'s target element with a <post-tooltip-trigger> element.');
         }
     }
     /**
-     * Add interest event listeners, but only once, and start
-     * the accessibility patcher
+     * Programmatically display the tooltip.
+     * @param target An element where the tooltip should be shown
      */
-    componentWillLoad() {
-        if (tooltipInstances === 0) {
-            // This is the first tooltip on the page, add event listeners
-            document.addEventListener('pointerover', globalInterestHandler);
-            document.addEventListener('pointerout', globalInterestLostHandler);
-            document.addEventListener('focusin', globalInterestHandler);
-            document.addEventListener('focusout', globalInterestLostHandler);
-            document.addEventListener('long-press', globalInterestHandler);
-            // Initially run the accessibility patcher on all triggers
-            document.querySelectorAll('[data-tooltip-target]').forEach(patchAccessibilityFeatures);
-            // Start watching for future triggers
-            triggerObserver.observe(document.body, {
-                subtree: true,
-                childList: true,
-                attributeFilter: [tooltipTargetAttribute],
-            });
-        }
-        tooltipInstances++;
+    async show(target) {
+        if (this.open)
+            return;
+        this.popoverRef.show(target);
     }
     /**
-     * Remove a bunch of event listeners if the tooltip gets removed from the DOM
-     * and disconnect the accessibility patcher
-     */
-    disconnectedCallback() {
-        tooltipInstances--;
-        if (tooltipInstances <= 0) {
-            // The last tooltip has been removed, stop listening for these kind of events
-            document.removeEventListener('pointerover', globalInterestHandler);
-            document.removeEventListener('pointerout', globalInterestLostHandler);
-            document.removeEventListener('focusin', globalInterestHandler);
-            document.removeEventListener('focusout', globalInterestLostHandler);
-            document.removeEventListener('long-press', globalInterestHandler);
-            triggerObserver.disconnect();
-        }
-    }
-    /**
-     * Programmatically display the tooltip
-     * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
-     * @param triggeredByFocus A boolean indicating if the tooltip was triggered by a focus event.
-     */
-    async show(target, triggeredByFocus = false) {
-        const showTooltip = () => {
-            // If focus or pointer event is not on the button anymore, don't show the tooltip
-            if (globalCurrentTarget !== target)
-                return;
-            // Determine if the tooltip was opened by a focus event
-            this.wasOpenedByFocus = triggeredByFocus;
-            // Disable pointer events if triggered by focus, otherwise enable them
-            if (this.wasOpenedByFocus) {
-                this.host.style.pointerEvents = 'none';
-            }
-            else {
-                this.host.style.pointerEvents = 'auto';
-            }
-            this.popoverRef.show(target);
-        };
-        if (this.delayed) {
-            tooltipTimeout = setTimeout(() => {
-                showTooltip();
-            }, OPEN_DELAY);
-        }
-        else {
-            showTooltip();
-        }
-    }
-    /**
-     * Programmatically hide this tooltip
+     * Programmatically hide this tooltip.
      */
     async hide() {
         this.popoverRef.hide();
     }
     /**
-     * Toggle tooltip display
-     * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
-     * @param force Pass true to always show or false to always 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);
     }
     /**
-     * Pointer or focus is on the tooltip, stop the tooltip from disappearing
+     * Set the open state based on the toggle event.
+     * @param e Popovercontainer toggle event
      */
-    handleInterest() {
-        if (hideTooltipTimeout) {
-            window.clearTimeout(hideTooltipTimeout);
-            hideTooltipTimeout = null;
-        }
-    }
-    /**
-     * Pointer or focus left the tooltip, initiate the hiding process
-     * Re-enable pointer events when the tooltip is no longer in focus or hovered
-     */
-    handleInterestLost() {
-        globalHideTooltip(this);
-        this.host.style.pointerEvents = 'auto';
+    handleToggle(e) {
+        this.open = e.detail;
     }
     render() {
-        const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
-        return (h(Host, { key: 'accf9ab04bcac0d6ed46818dc00e9110f936e593', "data-version": version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: 'e31610624b6833e78de7cb6ec52fb3fc5ca02d49', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: '206925925cc51d3b0eb4f2c0b1e8ca65ab3fd8c4' }))));
+        const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
+        return (h(Host, { key: '42d4dbfacdfd2aa9d00c8555cfb672e71013d455', "data-version": version, role: "tooltip" }, h("post-popovercontainer", { key: '781b9a2a90d6e1d7dc1fe233d68787cdc96d1b2a', safeSpace: 'trapezoid', class: popoverClass, arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: '895559a810d2ec11e5078c0334f4e8f9c73533e5' }))));
     }
     static get is() { return "post-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -248,7 +84,7 @@ export class PostTooltip {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.\nTooltips are automatically flipped to the opposite side if there is not enough available space and are shifted\ntowards the viewport if they would overlap edge boundaries."
+                    "text": "Defines the position of the tooltip relative to its trigger.\nTooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.\nFor supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement)."
                 },
                 "attribute": "placement",
                 "reflect": false,
@@ -266,15 +102,33 @@ export class PostTooltip {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Wheter or not to display a little pointer arrow"
+                    "text": "Whether or not to display a little pointer arrow"
                 },
                 "attribute": "arrow",
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
-            "delayed": {
-                "type": "boolean",
+            "animation": {
+                "type": "string",
                 "mutable": false,
+                "complexType": {
+                    "original": "'pop-in' | null",
+                    "resolved": "\"pop-in\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Choose a tooltip animation"
+                },
+                "attribute": "animation",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -284,10 +138,10 @@ export class PostTooltip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the tooltip is displayed a few milliseconds after it is triggered"
+                    "text": "Indicates the open state of the tooltip"
                 },
-                "attribute": "delayed",
-                "reflect": false,
+                "attribute": "open",
+                "reflect": true,
                 "defaultValue": "false"
             }
         };
@@ -296,15 +150,11 @@ export class PostTooltip {
         return {
             "show": {
                 "complexType": {
-                    "signature": "(target: HTMLElement, triggeredByFocus?: boolean) => Promise<void>",
+                    "signature": "(target: HTMLElement) => Promise<void>",
                     "parameters": [{
                             "name": "target",
                             "type": "HTMLElement",
-                            "docs": "An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
-                        }, {
-                            "name": "triggeredByFocus",
-                            "type": "boolean",
-                            "docs": "A boolean indicating if the tooltip was triggered by a focus event."
+                            "docs": "An element where the tooltip should be shown"
                         }],
                     "references": {
                         "Promise": {
@@ -319,13 +169,10 @@ export class PostTooltip {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Programmatically display the tooltip",
+                    "text": "Programmatically display the tooltip.",
                     "tags": [{
                             "name": "param",
-                            "text": "target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
-                        }, {
-                            "name": "param",
-                            "text": "triggeredByFocus A boolean indicating if the tooltip was triggered by a focus event."
+                            "text": "target An element where the tooltip should be shown"
                         }]
                 }
             },
@@ -342,7 +189,7 @@ export class PostTooltip {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Programmatically hide this tooltip",
+                    "text": "Programmatically hide this tooltip.",
                     "tags": []
                 }
             },
@@ -352,7 +199,7 @@ export class PostTooltip {
                     "parameters": [{
                             "name": "target",
                             "type": "HTMLElement",
-                            "docs": "An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
+                            "docs": "An element where the tooltip should be shown"
                         }, {
                             "name": "force",
                             "type": "boolean",
@@ -371,10 +218,10 @@ export class PostTooltip {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Toggle tooltip display",
+                    "text": "Toggle tooltip display.",
                     "tags": [{
                             "name": "param",
-                            "text": "target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
+                            "text": "target An element where the tooltip should be shown"
                         }, {
                             "name": "param",
                             "text": "force Pass true to always show or false to always hide"
@@ -386,8 +233,8 @@ export class PostTooltip {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "delayed",
-                "methodName": "validateDelayed"
+                "propName": "open",
+                "methodName": "validateOpen"
             }];
     }
 }

package/dist/collection/components/post-tooltip-trigger/post-tooltip-trigger.css

@@ -0,0 +1 @@
+post-tooltip-trigger{vertical-align:top}

package/dist/collection/components/post-tooltip-trigger/post-tooltip-trigger.js

@@ -0,0 +1,230 @@
+import { h, Host } from "@stencil/core";
+import { checkType } from "../../utils/index";
+import "long-press-event";
+import { version } from "../../../../package";
+import isFocusable from "ally.js/is/focusable";
+const TRIGGER_EVENTS = ['pointerenter', 'pointerleave', 'focusin', 'focusout', 'long-press'];
+/**
+ * @slot default - Content to trigger the tooltip. Can contain any focusable element or will be made focusable automatically.
+ */
+export class PostTooltipTrigger {
+    constructor() {
+        /**
+         * Reference to the element inside the host that will act as the trigger.
+         */
+        this.trigger = null;
+        /**
+         * Timeout ID for the delay.
+         */
+        this.delayTimeout = null;
+        this.for = undefined;
+        this.delay = 0;
+        this.boundTriggerHandler = this.handleTriggerEvent.bind(this);
+        this.boundTooltipHandler = this.handleTooltipEvent.bind(this);
+    }
+    validateControlFor() {
+        checkType(this.for, // The actual property value
+        'string', // The expected type
+        'The "for" property must be a string' // A meaningful error message
+        );
+    }
+    get tooltip() {
+        const ref = document.getElementById(this.for);
+        return (ref === null || ref === void 0 ? void 0 : ref.localName) === 'post-tooltip'
+            ? ref
+            : null;
+    }
+    componentDidLoad() {
+        this.setupTrigger();
+        this.attachListeners();
+        this.attachTooltipListeners();
+    }
+    disconnectedCallback() {
+        this.removeListeners();
+        this.removeTooltipListeners();
+        this.cleanupTrigger();
+        if (this.delayTimeout) {
+            clearTimeout(this.delayTimeout);
+            this.delayTimeout = null;
+        }
+    }
+    handleSlotChange() {
+        this.cleanupTrigger();
+        this.setupTrigger();
+    }
+    cleanupTrigger() {
+        if (this.trigger) {
+            const describedBy = this.trigger.getAttribute('aria-describedby') || '';
+            if (describedBy.includes(this.for)) {
+                const newDescribedBy = describedBy
+                    .split(' ')
+                    .filter(id => id !== this.for)
+                    .join(' ');
+                if (newDescribedBy) {
+                    this.trigger.setAttribute('aria-describedby', newDescribedBy);
+                }
+                else {
+                    this.trigger.removeAttribute('aria-describedby');
+                }
+            }
+            this.trigger = null;
+        }
+    }
+    setupTrigger() {
+        this.trigger = this.host.querySelector('*');
+        if (this.trigger) {
+            if (!isFocusable(this.trigger)) {
+                this.trigger.setAttribute('tabindex', '0');
+            }
+            const describedBy = this.trigger.getAttribute('aria-describedby') || '';
+            if (!describedBy.includes(this.for)) {
+                this.trigger.setAttribute('aria-describedby', `${describedBy} ${this.for}`.trim());
+            }
+        }
+        else {
+            console.warn('No content found in the post-tooltip-trigger slot. Please insert a focusable element or content that can receive focus.');
+        }
+    }
+    attachListeners() {
+        TRIGGER_EVENTS.forEach(event => {
+            this.host.addEventListener(event, this.boundTriggerHandler);
+        });
+    }
+    removeListeners() {
+        TRIGGER_EVENTS.forEach(event => {
+            this.host.removeEventListener(event, this.boundTriggerHandler);
+        });
+    }
+    attachTooltipListeners() {
+        if (this.tooltip) {
+            this.tooltip.addEventListener('pointerenter', this.boundTooltipHandler);
+            this.tooltip.addEventListener('pointerleave', this.boundTooltipHandler);
+        }
+    }
+    removeTooltipListeners() {
+        if (this.tooltip) {
+            this.tooltip.removeEventListener('pointerenter', this.boundTooltipHandler);
+            this.tooltip.removeEventListener('pointerleave', this.boundTooltipHandler);
+        }
+    }
+    handleTriggerEvent(event) {
+        switch (event.type) {
+            case 'pointerenter':
+            case 'focusin':
+            case 'long-press':
+                this.handleEnter();
+                break;
+            case 'pointerleave':
+            case 'focusout':
+                this.handleLeave(event);
+                break;
+        }
+    }
+    handleTooltipEvent(event) {
+        switch (event.type) {
+            case 'pointerenter':
+                this.handleEnter();
+                break;
+            case 'pointerleave':
+                this.handleLeave(event);
+                break;
+        }
+    }
+    handleEnter() {
+        if (this.delayTimeout) {
+            clearTimeout(this.delayTimeout);
+            this.delayTimeout = null;
+        }
+        this.interestHandler();
+    }
+    handleLeave(event) {
+        const newTarget = event.relatedTarget;
+        if ((this.tooltip && newTarget && this.tooltip.contains(newTarget)) ||
+            (newTarget === this.trigger)) {
+            return;
+        }
+        this.interestLostHandler();
+    }
+    interestHandler() {
+        var _a;
+        if (this.delay > 0) {
+            this.delayTimeout = window.setTimeout(() => {
+                var _a;
+                (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.show(this.trigger);
+                this.delayTimeout = null;
+            }, this.delay);
+        }
+        else {
+            (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.show(this.trigger);
+        }
+    }
+    interestLostHandler() {
+        var _a;
+        if (this.delayTimeout) {
+            clearTimeout(this.delayTimeout);
+            this.delayTimeout = null;
+        }
+        (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.hide();
+    }
+    render() {
+        return (h(Host, { key: 'a37c76972c4db24292fa95ddacf097055dea70f0', "data-version": version }, h("slot", { key: '51de3cd7dedfc1c5fe5ef86fbf0ab953d07945cb', onSlotchange: () => this.handleSlotChange() })));
+    }
+    static get is() { return "post-tooltip-trigger"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-tooltip-trigger.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-tooltip-trigger.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "for": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of the tooltip element that this trigger is linked to."
+                },
+                "attribute": "for",
+                "reflect": true
+            },
+            "delay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Delay (in milliseconds) before the tooltip is shown."
+                },
+                "attribute": "delay",
+                "reflect": false,
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "for",
+                "methodName": "validateControlFor"
+            }];
+    }
+}