@vonage/vivid 3.0.0-next.11 → 3.0.0-next.110

package/tooltip/index.js

@@ -1,65 +1,81 @@
-import '../popup/index.js';
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
-import { s as styleInject } from '../shared/style-inject.es.js';
-import '../shared/web.dom-collections.iterator.js';
+import '../shared/es.promise.resolve.js';
+import { _ as __decorate, a as attr, b as __metadata, Y as __classPrivateFieldGet, h as html, g as getPrefix, d as designSystem } from '../shared/index.js';
+import { l as loadComponentsModules } from '../shared/index2.js';
+import { P as Popup } from '../shared/popup.js';
 import { c as classNames } from '../shared/class-names.js';
-import '../elevation/index.js';
-import '../button/index.js';
-import '../icon/index.js';
-import '../shared/icon.js';
-import '../shared/_has.js';
-import '../shared/when.js';
-import '../shared/index2.js';
-import '../shared/affix.js';
-import '../shared/apply-mixins.js';
-import '../shared/aria-global.js';
 import '../shared/es.object.assign.js';
+import '../shared/key-codes.js';
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n  pointer-events: none;\n}\n\n.tooltip {\n  width: var(--tooltip-inline-size, 240px);\n}\n.tooltip-text {\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  padding: 8px 12px;\n  color: var(--vvd-color-on-canvas);\n}";
-styleInject(css_248z);
+var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 04 Dec 2022 15:37:45 GMT\n */\n.control {\n  pointer-events: none;\n}\n\n.tooltip {\n  width: var(--tooltip-inline-size, 240px);\n}\n.tooltip-text {\n  padding: 8px 12px;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base-bold);\n}";
 
-class Tooltip extends FoundationElement {
+var _Tooltip_instances, _Tooltip_anchorUpdated, _Tooltip_addEventListener, _Tooltip_removeEventListener, _Tooltip_show, _Tooltip_hide;
+class Tooltip extends Popup {
   constructor() {
     super(...arguments);
-    this.text = '';
-    this.open = false;
+    _Tooltip_instances.add(this);
+    _Tooltip_show.set(this, () => {
+      this.open = true;
+    });
+    _Tooltip_hide.set(this, () => {
+      this.open = false;
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    __classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_anchorUpdated).call(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_removeEventListener).call(this);
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    __classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_anchorUpdated).call(this);
   }
-
 }
+_Tooltip_show = new WeakMap(), _Tooltip_hide = new WeakMap(), _Tooltip_instances = new WeakSet(), _Tooltip_anchorUpdated = function _Tooltip_anchorUpdated() {
+  __classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_removeEventListener).call(this);
+  __classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_addEventListener).call(this);
+}, _Tooltip_addEventListener = function _Tooltip_addEventListener() {
+  var _a, _b, _c, _d;
+  (_a = this.anchorEl) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseover', __classPrivateFieldGet(this, _Tooltip_show, "f"));
+  (_b = this.anchorEl) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseout', __classPrivateFieldGet(this, _Tooltip_hide, "f"));
+  (_c = this.anchorEl) === null || _c === void 0 ? void 0 : _c.addEventListener('focusin', __classPrivateFieldGet(this, _Tooltip_show, "f"));
+  (_d = this.anchorEl) === null || _d === void 0 ? void 0 : _d.addEventListener('focusout', __classPrivateFieldGet(this, _Tooltip_hide, "f"));
+}, _Tooltip_removeEventListener = function _Tooltip_removeEventListener() {
+  var _a, _b, _c, _d;
+  (_a = this.anchorEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseover', __classPrivateFieldGet(this, _Tooltip_show, "f"));
+  (_b = this.anchorEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseout', __classPrivateFieldGet(this, _Tooltip_hide, "f"));
+  (_c = this.anchorEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('focusin', __classPrivateFieldGet(this, _Tooltip_show, "f"));
+  (_d = this.anchorEl) === null || _d === void 0 ? void 0 : _d.removeEventListener('focusout', __classPrivateFieldGet(this, _Tooltip_hide, "f"));
+};
+__decorate([attr, __metadata("design:type", String)], Tooltip.prototype, "text", void 0);
 
-__decorate([attr({
-  mode: 'fromView'
-}), __metadata("design:type", Object)], Tooltip.prototype, "text", void 0);
-
-__decorate([attr({
-  mode: 'boolean'
-}), __metadata("design:type", Object)], Tooltip.prototype, "open", void 0);
-
-__decorate([attr, __metadata("design:type", String)], Tooltip.prototype, "corner", void 0);
-
-__decorate([attr, __metadata("design:type", String)], Tooltip.prototype, "anchor", void 0);
-
-let _2 = t => t,
-    _t;
-
-const getClasses = _ => classNames('control');
-
-const TooltipTemplate = () => html(_t || (_t = _2`
-<vwc-popup class="${0}" arrow alternate="true" 
-corner=${0} open=${0} anchor=${0}
+let _ = t => t,
+  _t;
+const getClasses = ({
+  open
+}) => classNames('control', ['open', Boolean(open)]);
+const TooltipTemplate = () => html(_t || (_t = _`
+<vwc-popup class="${0}" arrow alternate
+placement=${0} open=${0} anchor=${0}
   exportparts="vvd-theme-alternate">
-  <div class="tooltip">
+  <div class="tooltip" role="tooltip">
     <header part="vvd-theme-alternate" class="tooltip-header">
       <div class="tooltip-text">${0}</div>
     </header>
   </div>
-</vwc-popup>`), getClasses, x => x.corner, x => x.open, x => x.anchor, x => x.text);
+</vwc-popup>`), getClasses, x => x.placement, x => x.open, x => x.anchor, x => x.text);
 
+const prefix = getPrefix(import.meta.url);
 const vividTooltip = Tooltip.compose({
   baseName: 'tooltip',
   template: TooltipTemplate,
   styles: css_248z
 });
-designSystem.register(vividTooltip());
+(async () => {
+  await loadComponentsModules(['popup'], prefix);
+  designSystem.withPrefix(prefix).register(vividTooltip());
+})();
 
 export { vividTooltip };