@haiilo/catalyst 2.1.0 → 2.1.1

package/dist/cjs/cat-alert_22.cjs.entry.js

@@ -6452,13 +6452,14 @@ CatToggle.style = catToggleCss;
 
 const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
 
-const catTooltipCss = ":host{display:contents}:host([hidden]){display:none}.tooltip{position:absolute;font-size:0.875rem;line-height:1rem;font-weight:500;background-color:rgb(var(--cat-bg-tooltip, 0, 0, 0));border-radius:var(--cat-border-radius-m, 0.25rem);color:rgb(var(--cat-font-color-tooltip, 255, 255, 255));transition:opacity 0.25s linear, visibility 0.25s linear;visibility:hidden;opacity:0;box-shadow:rgba(0, 0, 0, 0.08) 0 1px 8px 0;z-index:200;max-width:20rem}.tooltip-show{opacity:1;visibility:visible}.tooltip-round{border-radius:10rem}.tooltip-s{padding:0.375rem 0.5rem}.tooltip-s.tooltip-round{padding:0.375rem 0.75rem}.tooltip-m{padding:0.75rem}.tooltip-m.tooltip-round{padding:0.75rem 1rem}.tooltip-l{padding:1rem}.tooltip-l.tooltip-round{padding:1rem 1.5rem}.tooltip-trigger{display:inline-block}.tooltip-trigger:focus{outline:none}";
+const catTooltipCss = ":host{display:contents}:host([hidden]){display:none}.tooltip{position:absolute;font-size:0.875rem;line-height:1rem;font-weight:500;background-color:rgb(var(--cat-bg-tooltip, 0, 0, 0));border-radius:var(--cat-border-radius-m, 0.25rem);color:rgb(var(--cat-font-color-tooltip, 255, 255, 255));transition:opacity 0.25s linear, visibility 0.25s linear;visibility:hidden;opacity:0;box-shadow:rgba(0, 0, 0, 0.08) 0 1px 8px 0;z-index:200;max-width:20rem}.tooltip-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.tooltip-show{opacity:1;visibility:visible}.tooltip-round{border-radius:10rem}.tooltip-s{padding:0.375rem 0.5rem}.tooltip-s.tooltip-round{padding:0.375rem 0.75rem}.tooltip-m{padding:0.75rem}.tooltip-m.tooltip-round{padding:0.75rem 1rem}.tooltip-l{padding:1rem}.tooltip-l.tooltip-round{padding:1rem 1.5rem}.tooltip-trigger{display:inline-block}.tooltip-trigger:focus{outline:none}";
 
 let nextUniqueId = 0;
 const CatTooltip = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.id = `cat-tooltip-${nextUniqueId++}`;
+    this.hidden = false;
     /**
      * The content of the tooltip.
      */
@@ -6517,6 +6518,9 @@ const CatTooltip = class {
       (_g = this.trigger) === null || _g === void 0 ? void 0 : _g.addEventListener('mouseleave', this.hideListener.bind(this));
     }
   }
+  componentWillRender() {
+    this.hidden = !this.content || this.disabled;
+  }
   disconnectedCallback() {
     var _a, _b, _c, _d, _e, _f;
     if (isTouchDevice) {
@@ -6532,11 +6536,12 @@ const CatTooltip = class {
     }
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { ref: el => (this.triggerElement = el), "aria-describedby": this.id, class: "tooltip-trigger" }, index.h("slot", null)), this.content && !this.disabled && (index.h("div", { ref: el => (this.tooltip = el), id: this.id, class: {
+    return (index.h(index.Host, null, index.h("div", { ref: el => (this.triggerElement = el), "aria-describedby": this.id, class: "tooltip-trigger" }, index.h("slot", null)), index.h("div", { ref: el => (this.tooltip = el), id: this.id, "aria-hidden": this.hidden, class: {
         tooltip: true,
+        'tooltip-hidden': this.hidden,
         'tooltip-round': this.round,
         [`tooltip-${this.size}`]: Boolean(this.size)
-      } }, this.content))));
+      } }, this.content)));
   }
   get isTabbable() {
     return firstTabbable.firstTabbable(this.trigger);
@@ -6559,8 +6564,7 @@ const CatTooltip = class {
   showListener() {
     window.clearTimeout(this.hideTimeout);
     this.showTimeout = window.setTimeout(() => {
-      var _a;
-      (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.add('tooltip-show');
+      this.showTooltip();
     }, this.showDelay);
   }
   hideListener() {
@@ -6573,8 +6577,7 @@ const CatTooltip = class {
   touchStartListener(event) {
     event.stopPropagation();
     this.touchTimeout = window.setTimeout(() => {
-      var _a;
-      (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.add('tooltip-show');
+      this.showTooltip();
     }, this.longTouchDuration);
   }
   touchEndListener() {
@@ -6586,6 +6589,10 @@ const CatTooltip = class {
     var _a;
     (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.remove('tooltip-show');
   }
+  showTooltip() {
+    var _a;
+    !this.hidden && ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.add('tooltip-show'));
+  }
 };
 CatTooltip.OFFSET = 4;
 CatTooltip.style = catTooltipCss;