dap-design-system 0.62.0 → 0.62.2

package/dist/components/tooltip/tooltip.component.d.ts

@@ -60,8 +60,10 @@ export default class DapDSTooltip extends DdsElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    private setTriggerExpanded;
     showTooltip(): Promise<void>;
     hideTooltip(): Promise<void>;
+    private readonly handleDocumentKeyDown;
     private readonly handleBlur;
     private readonly handleClick;
     private readonly handleFocus;

package/dist/components/tooltip/tooltip.component.js

@@ -1,38 +1,40 @@
-var g = (d, t, s) => new Promise((l, o) => {
-  var p = (h) => {
+var g = (a, e, t) => new Promise((h, s) => {
+  var p = (n) => {
     try {
-      u(s.next(h));
+      u(t.next(n));
     } catch (c) {
-      o(c);
+      s(c);
     }
-  }, n = (h) => {
+  }, l = (n) => {
     try {
-      u(s.throw(h));
+      u(t.throw(n));
     } catch (c) {
-      o(c);
+      s(c);
     }
-  }, u = (h) => h.done ? l(h.value) : Promise.resolve(h.value).then(p, n);
-  u((s = s.apply(d, t)).next());
+  }, u = (n) => n.done ? h(n.value) : Promise.resolve(n.value).then(p, l);
+  u((t = t.apply(a, e)).next());
 });
-import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
+import { clsx as f } from "../../node_modules/clsx/dist/clsx.js";
 import "../../node_modules/@lit/reactive-element/reactive-element.js";
 import "../../node_modules/lit-html/lit-html.js";
 import "../../node_modules/lit-element/lit-element.js";
 import { property as r } from "../../node_modules/@lit/reactive-element/decorators/property.js";
 import { state as v } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { html as f } from "../../node_modules/lit-html/static.js";
+import { html as m } from "../../node_modules/lit-html/static.js";
 import { DdsElement as y } from "../../internal/dds-hu-element.js";
-import b from "../popup/popup.component.js";
+import w from "../popup/popup.component.js";
 import T from "./tooltip.scss.js";
-import { unsafeCSS as w } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var O = Object.defineProperty, C = Object.getOwnPropertyDescriptor, i = (d, t, s, l) => {
-  for (var o = l > 1 ? void 0 : l ? C(t, s) : t, p = d.length - 1, n; p >= 0; p--)
-    (n = d[p]) && (o = (l ? n(t, s, o) : n(o)) || o);
-  return l && o && O(t, s, o), o;
+import { unsafeCSS as b } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var E = Object.defineProperty, O = Object.getOwnPropertyDescriptor, i = (a, e, t, h) => {
+  for (var s = h > 1 ? void 0 : h ? O(e, t) : e, p = a.length - 1, l; p >= 0; p--)
+    (l = a[p]) && (s = (h ? l(e, t, s) : l(s)) || s);
+  return h && s && E(e, t, s), s;
 };
-const $ = 8, a = class a extends y {
+const L = 8, d = class d extends y {
   constructor() {
-    super(...arguments), this.placement = "bottom", this.opened = !1, this.mode = "tooltip", this.noArrow = !1, this.floatingStrategy = "absolute", this.disableViewportAutoClose = !1, this._trigger = "hover focus", this.mouseOverTooltip = !1, this.handleBlur = () => {
+    super(...arguments), this.placement = "bottom", this.opened = !1, this.mode = "tooltip", this.noArrow = !1, this.floatingStrategy = "absolute", this.disableViewportAutoClose = !1, this._trigger = "hover focus", this.mouseOverTooltip = !1, this.handleDocumentKeyDown = (e) => {
+      e.key === "Escape" && this.opened && (e.preventDefault(), e.stopPropagation(), this.hideTooltip());
+    }, this.handleBlur = () => {
       this.hasTrigger("focus") && this.hideTooltip();
     }, this.handleClick = () => {
       this.hasTrigger("click") && (this.opened && !this.hasTrigger("focus") ? this.hideTooltip() : this.showTooltip());
@@ -42,10 +44,10 @@ const $ = 8, a = class a extends y {
       this.hasTrigger("hover") && this.showTooltip();
     }, this.handleMouseOut = () => {
       this.mouseOverTooltip || this.hasTrigger("hover") && this.hideTooltip();
-    }, this.hasTrigger = (t) => this.trigger.split(" ").includes(t);
+    }, this.hasTrigger = (e) => this.trigger.split(" ").includes(e);
   }
-  set trigger(t) {
-    this._trigger = t;
+  set trigger(e) {
+    this._trigger = e;
   }
   get trigger() {
     return this.mode ? this.mode === "toggle" ? "click" : this._trigger : "hover focus";
@@ -54,31 +56,27 @@ const $ = 8, a = class a extends y {
     super.connectedCallback(), this.addEventListener("blur", this.handleBlur, !0), this.addEventListener("focus", this.handleFocus, !0), this.addEventListener("click", this.handleClick), this.addEventListener("mouseover", this.handleMouseOver), this.addEventListener("mouseout", this.handleMouseOut);
   }
   disconnectedCallback() {
-    this.removeEventListener("blur", this.handleBlur, !0), this.removeEventListener("focus", this.handleFocus, !0), this.removeEventListener("click", this.handleClick), this.removeEventListener("mouseover", this.handleMouseOver), this.removeEventListener("mouseout", this.handleMouseOut), super.disconnectedCallback();
+    this.removeEventListener("blur", this.handleBlur, !0), this.removeEventListener("focus", this.handleFocus, !0), this.removeEventListener("click", this.handleClick), this.removeEventListener("mouseover", this.handleMouseOver), this.removeEventListener("mouseout", this.handleMouseOut), document.removeEventListener("keydown", this.handleDocumentKeyDown, !0), super.disconnectedCallback();
   }
-  firstUpdated(t) {
-    super.firstUpdated(t), this.setAttribute("role", "status");
+  firstUpdated(e) {
+    super.firstUpdated(e), this.setAttribute("role", "status"), this.setTriggerExpanded(!!this.opened), this.opened && document.addEventListener("keydown", this.handleDocumentKeyDown, !0);
+  }
+  setTriggerExpanded(e) {
+    const t = this.querySelector('[slot="trigger"]');
+    t && t.setAttribute("aria-expanded", String(e));
   }
   showTooltip() {
     return g(this, null, function* () {
-      if (this.opened)
-        return;
-      this.opened = !0;
-      const t = this.querySelector('[slot="trigger"]');
-      t && t.setAttribute("aria-expanded", "true");
+      this.opened || (this.opened = !0, this.setTriggerExpanded(!0), document.addEventListener("keydown", this.handleDocumentKeyDown, !0));
     });
   }
   hideTooltip() {
     return g(this, null, function* () {
-      if (!this.opened)
-        return;
-      this.opened = !1;
-      const t = this.querySelector('[slot="trigger"]');
-      t && t.setAttribute("aria-expanded", "false");
+      this.opened && (this.opened = !1, this.setTriggerExpanded(!1), document.removeEventListener("keydown", this.handleDocumentKeyDown, !0));
     });
   }
   render() {
-    return f`
+    return m`
       <dap-ds-popup
         part="base"
         role="tooltip"
@@ -87,14 +85,14 @@ const $ = 8, a = class a extends y {
           popup:base__popup,
           arrow:base__arrow
         "
-        class=${m("tooltip", {
+        class=${f("tooltip", {
       "tooltip--open": this.opened,
       "tooltip--tooltip": this.mode === "tooltip",
       "tooltip--toggle": this.mode === "toggle"
     })}
         ?opened=${this.opened}
         placement=${this.placement}
-        offset=${$}
+        offset=${L}
         floatingStrategy=${this.floatingStrategy}
         ?disableViewportAutoClose=${this.disableViewportAutoClose}
         ?hasArrow=${!this.noArrow}
@@ -106,43 +104,43 @@ const $ = 8, a = class a extends y {
           name="trigger"
           slot="trigger"
           aria-describedby="tooltip"></slot>
-        ${this.content ? f`${this.content}` : f`<slot></slot>`}
+        ${this.content ? m`${this.content}` : m`<slot></slot>`}
       </dap-ds-popup>
     `;
   }
 };
-a.tagName = "dap-ds-tooltip", a.dependencies = {
-  "dap-ds-popup": b
-}, a.styles = w(T);
-let e = a;
+d.tagName = "dap-ds-tooltip", d.dependencies = {
+  "dap-ds-popup": w
+}, d.styles = b(T);
+let o = d;
 i([
   r()
-], e.prototype, "content", 2);
+], o.prototype, "content", 2);
 i([
   r({ reflect: !0 })
-], e.prototype, "placement", 2);
+], o.prototype, "placement", 2);
 i([
   r({ type: Boolean, reflect: !0 })
-], e.prototype, "opened", 2);
+], o.prototype, "opened", 2);
 i([
   r()
-], e.prototype, "mode", 2);
+], o.prototype, "mode", 2);
 i([
   r({ type: Boolean, reflect: !0 })
-], e.prototype, "noArrow", 2);
+], o.prototype, "noArrow", 2);
 i([
   r({ reflect: !0 })
-], e.prototype, "floatingStrategy", 2);
+], o.prototype, "floatingStrategy", 2);
 i([
   r({ type: Boolean })
-], e.prototype, "disableViewportAutoClose", 2);
+], o.prototype, "disableViewportAutoClose", 2);
 i([
   r()
-], e.prototype, "trigger", 1);
+], o.prototype, "trigger", 1);
 i([
   v()
-], e.prototype, "mouseOverTooltip", 2);
+], o.prototype, "mouseOverTooltip", 2);
 export {
-  e as default
+  o as default
 };
 //# sourceMappingURL=tooltip.component.js.map

package/dist/components/tooltip/tooltip.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.component.js","sources":["../../../src/components/tooltip/tooltip.component.ts"],"sourcesContent":["import { clsx } from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { PopupPlacement } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport DapDSPopup from '../popup/popup.component'\nimport styles from './tooltip.scss?inline'\nexport type TooltipMode = 'tooltip' | 'toggle'\n\n/**\n * The distance in pixels between the tooltip and the trigger element.\n */\nconst TOOLTIP_OFFSET = 8\n\n/**\n * `dap-ds-tooltip`\n * @summary A tooltip is a container for tooltip content.\n * @element dap-ds-tooltip\n * @title - Tooltip\n *\n * @slot - The content of the tooltip.\n * @slot trigger - The trigger element of the tooltip.\n *\n * @csspart base - The main tooltip container.\n * @csspart trigger - The trigger element of the tooltip.\n * @csspart popup - The popup of the tooltip.\n * @csspart arrow - The arrow of the tooltip.\n *\n * @cssproperty --dds-tooltip-max-width - The maximum width of the tooltip before its content will wrap (default: 14rem)\n * @cssproperty --dds-tooltip-padding - The padding inside the tooltip (default: var(--dds-spacing-400))\n * @cssproperty --dds-tooltip-border-color - The border color of the tooltip (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-tooltip-bg-color - The background color of the tooltip (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-tooltip-text-color - The text color of the tooltip (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-tooltip-font-size - The font size of the tooltip text (default: var(--dds-font-sm))\n * @cssproperty --dds-tooltip-box-shadow - The box shadow of the tooltip (default: 0 8px 12px -2px rgb(0 0 0 / 8%), 0 2px 6px -2px rgb(0 0 0 / 6%))\n */\nexport default class DapDSTooltip extends DdsElement {\n  static tagName = 'dap-ds-tooltip'\n\n  static dependencies = {\n    'dap-ds-popup': DapDSPopup,\n  }\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** The content of the tooltip, supporting text only. */\n  @property() content: string\n\n  /** The position of the tooltip around the trigger element.\n   * @type { 'top' | 'right' | 'bottom' | 'left' }\n   */\n  @property({ reflect: true }) placement: PopupPlacement = 'bottom'\n\n  /** Sets the tooltip to opened by default (will still be closed on closing events). */\n  @property({ type: Boolean, reflect: true }) opened? = false\n\n  /** Sets the tooltip to toggle mode.\n   * @type { 'tooltip' | 'toggle' }\n   */\n  @property() mode?: TooltipMode = 'tooltip'\n\n  /** Hides the arrow of the tooltip. */\n  @property({ type: Boolean, reflect: true }) noArrow? = false\n\n  /** The floating strategy of the tooltip. Default is `absolute`. Can be `absolute` or `fixed`.\n   * @type { 'absolute' | 'fixed' }\n   */\n  @property({ reflect: true })\n  floatingStrategy: 'absolute' | 'fixed' = 'absolute'\n\n  /** Whether to keep popup open when trigger leaves viewport. */\n  @property({ type: Boolean }) disableViewportAutoClose: boolean = false\n\n  private _trigger: string = 'hover focus'\n\n  /** Sets custom trigger event (hover, focus, click). Default is `hover focus`. */\n  @property()\n  set trigger(value: string) {\n    this._trigger = value\n  }\n  get trigger() {\n    if (!this.mode) {\n      return 'hover focus'\n    }\n\n    if (this.mode === 'toggle') {\n      return 'click'\n    }\n\n    return this._trigger\n  }\n\n  /** @ignore */\n  @state() mouseOverTooltip: boolean = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.addEventListener('blur', this.handleBlur, true)\n    this.addEventListener('focus', this.handleFocus, true)\n    this.addEventListener('click', this.handleClick)\n    this.addEventListener('mouseover', this.handleMouseOver)\n    this.addEventListener('mouseout', this.handleMouseOut)\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('blur', this.handleBlur, true)\n    this.removeEventListener('focus', this.handleFocus, true)\n    this.removeEventListener('click', this.handleClick)\n    this.removeEventListener('mouseover', this.handleMouseOver)\n    this.removeEventListener('mouseout', this.handleMouseOut)\n    super.disconnectedCallback()\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n\n    this.setAttribute('role', 'status')\n  }\n\n  async showTooltip() {\n    if (this.opened) {\n      return\n    }\n\n    this.opened = true\n\n    const trigger = this.querySelector('[slot=\"trigger\"]')\n    if (trigger) {\n      trigger.setAttribute('aria-expanded', 'true')\n    }\n  }\n\n  async hideTooltip() {\n    if (!this.opened) {\n      return\n    }\n\n    this.opened = false\n\n    const trigger = this.querySelector('[slot=\"trigger\"]')\n    if (trigger) {\n      trigger.setAttribute('aria-expanded', 'false')\n    }\n  }\n\n  private readonly handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hideTooltip()\n    }\n  }\n\n  private readonly handleClick = () => {\n    if (this.hasTrigger('click')) {\n      this.opened && !this.hasTrigger('focus')\n        ? this.hideTooltip()\n        : this.showTooltip()\n    }\n  }\n\n  private readonly handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.showTooltip()\n    }\n  }\n\n  private readonly handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.showTooltip()\n    }\n  }\n\n  private readonly handleMouseOut = () => {\n    if (!this.mouseOverTooltip) {\n      if (this.hasTrigger('hover')) {\n        this.hideTooltip()\n      }\n    }\n  }\n\n  private readonly hasTrigger = (triggerType: string) => {\n    const triggers = this.trigger.split(' ')\n    return triggers.includes(triggerType)\n  }\n\n  render() {\n    return html`\n      <dap-ds-popup\n        part=\"base\"\n        role=\"tooltip\"\n        id=\"tooltip\"\n        exportparts=\"\n          popup:base__popup,\n          arrow:base__arrow\n        \"\n        class=${clsx('tooltip', {\n          'tooltip--open': this.opened,\n          'tooltip--tooltip': this.mode === 'tooltip',\n          'tooltip--toggle': this.mode === 'toggle',\n        })}\n        ?opened=${this.opened}\n        placement=${this.placement}\n        offset=${TOOLTIP_OFFSET}\n        floatingStrategy=${this.floatingStrategy}\n        ?disableViewportAutoClose=${this.disableViewportAutoClose}\n        ?hasArrow=${!this.noArrow}\n        @dds-close=${this.hideTooltip}\n        @dds-closed=${this.hideTooltip}\n        @dds-opened=${this.showTooltip}>\n        <slot\n          part=\"trigger\"\n          name=\"trigger\"\n          slot=\"trigger\"\n          aria-describedby=\"tooltip\"></slot>\n        ${this.content ? html`${this.content}` : html`<slot></slot>`}\n      </dap-ds-popup>\n    `\n  }\n}\n"],"names":["TOOLTIP_OFFSET","_DapDSTooltip","DdsElement","triggerType","value","_changedProperties","__async","trigger","html","clsx","DapDSPopup","unsafeCSS","styles","DapDSTooltip","__decorateClass","property","state"],"mappings":"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"}
+{"version":3,"file":"tooltip.component.js","sources":["../../../src/components/tooltip/tooltip.component.ts"],"sourcesContent":["import { clsx } from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { PopupPlacement } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport DapDSPopup from '../popup/popup.component'\nimport styles from './tooltip.scss?inline'\nexport type TooltipMode = 'tooltip' | 'toggle'\n\n/**\n * The distance in pixels between the tooltip and the trigger element.\n */\nconst TOOLTIP_OFFSET = 8\n\n/**\n * `dap-ds-tooltip`\n * @summary A tooltip is a container for tooltip content.\n * @element dap-ds-tooltip\n * @title - Tooltip\n *\n * @slot - The content of the tooltip.\n * @slot trigger - The trigger element of the tooltip.\n *\n * @csspart base - The main tooltip container.\n * @csspart trigger - The trigger element of the tooltip.\n * @csspart popup - The popup of the tooltip.\n * @csspart arrow - The arrow of the tooltip.\n *\n * @cssproperty --dds-tooltip-max-width - The maximum width of the tooltip before its content will wrap (default: 14rem)\n * @cssproperty --dds-tooltip-padding - The padding inside the tooltip (default: var(--dds-spacing-400))\n * @cssproperty --dds-tooltip-border-color - The border color of the tooltip (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-tooltip-bg-color - The background color of the tooltip (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-tooltip-text-color - The text color of the tooltip (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-tooltip-font-size - The font size of the tooltip text (default: var(--dds-font-sm))\n * @cssproperty --dds-tooltip-box-shadow - The box shadow of the tooltip (default: 0 8px 12px -2px rgb(0 0 0 / 8%), 0 2px 6px -2px rgb(0 0 0 / 6%))\n */\nexport default class DapDSTooltip extends DdsElement {\n  static tagName = 'dap-ds-tooltip'\n\n  static dependencies = {\n    'dap-ds-popup': DapDSPopup,\n  }\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** The content of the tooltip, supporting text only. */\n  @property() content: string\n\n  /** The position of the tooltip around the trigger element.\n   * @type { 'top' | 'right' | 'bottom' | 'left' }\n   */\n  @property({ reflect: true }) placement: PopupPlacement = 'bottom'\n\n  /** Sets the tooltip to opened by default (will still be closed on closing events). */\n  @property({ type: Boolean, reflect: true }) opened? = false\n\n  /** Sets the tooltip to toggle mode.\n   * @type { 'tooltip' | 'toggle' }\n   */\n  @property() mode?: TooltipMode = 'tooltip'\n\n  /** Hides the arrow of the tooltip. */\n  @property({ type: Boolean, reflect: true }) noArrow? = false\n\n  /** The floating strategy of the tooltip. Default is `absolute`. Can be `absolute` or `fixed`.\n   * @type { 'absolute' | 'fixed' }\n   */\n  @property({ reflect: true })\n  floatingStrategy: 'absolute' | 'fixed' = 'absolute'\n\n  /** Whether to keep popup open when trigger leaves viewport. */\n  @property({ type: Boolean }) disableViewportAutoClose: boolean = false\n\n  private _trigger: string = 'hover focus'\n\n  /** Sets custom trigger event (hover, focus, click). Default is `hover focus`. */\n  @property()\n  set trigger(value: string) {\n    this._trigger = value\n  }\n  get trigger() {\n    if (!this.mode) {\n      return 'hover focus'\n    }\n\n    if (this.mode === 'toggle') {\n      return 'click'\n    }\n\n    return this._trigger\n  }\n\n  /** @ignore */\n  @state() mouseOverTooltip: boolean = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.addEventListener('blur', this.handleBlur, true)\n    this.addEventListener('focus', this.handleFocus, true)\n    this.addEventListener('click', this.handleClick)\n    this.addEventListener('mouseover', this.handleMouseOver)\n    this.addEventListener('mouseout', this.handleMouseOut)\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('blur', this.handleBlur, true)\n    this.removeEventListener('focus', this.handleFocus, true)\n    this.removeEventListener('click', this.handleClick)\n    this.removeEventListener('mouseover', this.handleMouseOver)\n    this.removeEventListener('mouseout', this.handleMouseOut)\n    document.removeEventListener('keydown', this.handleDocumentKeyDown, true)\n    super.disconnectedCallback()\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n\n    this.setAttribute('role', 'status')\n\n    // Expose the collapsed state from the start, not only after the first open\n    this.setTriggerExpanded(!!this.opened)\n    if (this.opened) {\n      document.addEventListener('keydown', this.handleDocumentKeyDown, true)\n    }\n  }\n\n  private setTriggerExpanded(expanded: boolean) {\n    const trigger = this.querySelector('[slot=\"trigger\"]')\n    if (trigger) {\n      trigger.setAttribute('aria-expanded', String(expanded))\n    }\n  }\n\n  async showTooltip() {\n    if (this.opened) {\n      return\n    }\n\n    this.opened = true\n    this.setTriggerExpanded(true)\n    document.addEventListener('keydown', this.handleDocumentKeyDown, true)\n  }\n\n  async hideTooltip() {\n    if (!this.opened) {\n      return\n    }\n\n    this.opened = false\n    this.setTriggerExpanded(false)\n    document.removeEventListener('keydown', this.handleDocumentKeyDown, true)\n  }\n\n  // Escape dismisses the tooltip without moving focus or pointer (WCAG 1.4.13).\n  // Captured on document so it works for hover too, and stopped so an enclosing\n  // modal does not close on the same keypress.\n  private readonly handleDocumentKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape' && this.opened) {\n      event.preventDefault()\n      event.stopPropagation()\n      this.hideTooltip()\n    }\n  }\n\n  private readonly handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hideTooltip()\n    }\n  }\n\n  private readonly handleClick = () => {\n    if (this.hasTrigger('click')) {\n      this.opened && !this.hasTrigger('focus')\n        ? this.hideTooltip()\n        : this.showTooltip()\n    }\n  }\n\n  private readonly handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.showTooltip()\n    }\n  }\n\n  private readonly handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.showTooltip()\n    }\n  }\n\n  private readonly handleMouseOut = () => {\n    if (!this.mouseOverTooltip) {\n      if (this.hasTrigger('hover')) {\n        this.hideTooltip()\n      }\n    }\n  }\n\n  private readonly hasTrigger = (triggerType: string) => {\n    const triggers = this.trigger.split(' ')\n    return triggers.includes(triggerType)\n  }\n\n  render() {\n    return html`\n      <dap-ds-popup\n        part=\"base\"\n        role=\"tooltip\"\n        id=\"tooltip\"\n        exportparts=\"\n          popup:base__popup,\n          arrow:base__arrow\n        \"\n        class=${clsx('tooltip', {\n          'tooltip--open': this.opened,\n          'tooltip--tooltip': this.mode === 'tooltip',\n          'tooltip--toggle': this.mode === 'toggle',\n        })}\n        ?opened=${this.opened}\n        placement=${this.placement}\n        offset=${TOOLTIP_OFFSET}\n        floatingStrategy=${this.floatingStrategy}\n        ?disableViewportAutoClose=${this.disableViewportAutoClose}\n        ?hasArrow=${!this.noArrow}\n        @dds-close=${this.hideTooltip}\n        @dds-closed=${this.hideTooltip}\n        @dds-opened=${this.showTooltip}>\n        <slot\n          part=\"trigger\"\n          name=\"trigger\"\n          slot=\"trigger\"\n          aria-describedby=\"tooltip\"></slot>\n        ${this.content ? html`${this.content}` : html`<slot></slot>`}\n      </dap-ds-popup>\n    `\n  }\n}\n"],"names":["TOOLTIP_OFFSET","_DapDSTooltip","DdsElement","event","triggerType","value","_changedProperties","expanded","trigger","__async","html","clsx","DapDSPopup","unsafeCSS","styles","DapDSTooltip","__decorateClass","property","state"],"mappings":"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"}

package/dist/internal/mixin/labelableMixin.d.ts

@@ -1,5 +1,7 @@
 import { LitElement } from 'lit';
 import { PopupPlacement, Size } from '../../common/types';
+/** How a form label tooltip opens: `click` (click/Enter toggle) or `hover` (hover + keyboard focus). */
+export type TooltipTrigger = 'click' | 'hover';
 type Constructor<T = Record<string, unknown>> = {
     new (...args: any[]): T;
     prototype: T;
@@ -10,6 +12,7 @@ export interface LabelableElementInterface {
     description?: string;
     tooltip?: string;
     tooltipPlacement: PopupPlacement;
+    tooltipTrigger: TooltipTrigger;
     size: Size;
     required: boolean;
     requiredLabel: string;

package/dist/internal/mixin/labelableMixin.js

@@ -1,26 +1,26 @@
 import { clsx as d } from "../../node_modules/clsx/dist/clsx.js";
 import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { html as r } from "../../node_modules/lit-html/lit-html.js";
+import { html as a } from "../../node_modules/lit-html/lit-html.js";
 import "../../node_modules/lit-element/lit-element.js";
 import { property as e } from "../../node_modules/@lit/reactive-element/decorators/property.js";
 import { ifDefined as b } from "../../node_modules/lit-html/directives/if-defined.js";
 import "../../localization/localization.js";
 import { t as h } from "../../node_modules/i18next/dist/esm/i18next.js";
-var c = Object.defineProperty, o = (l, t, p, a) => {
+var c = Object.defineProperty, o = (l, t, p, r) => {
   for (var i = void 0, s = l.length - 1, n; s >= 0; s--)
     (n = l[s]) && (i = n(t, p, i) || i);
   return i && c(t, p, i), i;
 };
-const g = (l) => {
+const q = (l) => {
   class t extends l {
     constructor() {
-      super(...arguments), this.hideLabel = !1, this.tooltipPlacement = "bottom", this.size = "sm", this.optional = !1, this.optionalLabel = h("label.optional"), this.subtle = !1, this.required = !1, this.requiredLabel = "*", this.disabled = !1, this.tooltipAriaLabel = h("label.tooltip");
+      super(...arguments), this.hideLabel = !1, this.tooltipPlacement = "bottom", this.tooltipTrigger = "click", this.size = "sm", this.optional = !1, this.optionalLabel = h("label.optional"), this.subtle = !1, this.required = !1, this.requiredLabel = "*", this.disabled = !1, this.tooltipAriaLabel = h("label.tooltip");
     }
-    renderLabel(a, i) {
-      return r` <div class="label-container">
-      ${this.label && r`<dap-ds-form-label
+    renderLabel(r, i) {
+      return a` <div class="label-container">
+      ${this.label && a`<dap-ds-form-label
           part="label"
-          id=${a != null ? a : "label"}
+          id=${r != null ? r : "label"}
           exportparts="base: label-base, required: label-required, optional: label-optional"
           .size=${this.size}
           .required=${this.required}
@@ -35,10 +35,11 @@ const g = (l) => {
           for="input"
           label=${b(this.label)}></dap-ds-form-label>`}
       </dap-ds-form-label>
-      ${this.tooltip && r` <dap-ds-tooltip
+      ${this.tooltip && a` <dap-ds-tooltip
           part="tooltip"
           content=${this.tooltip}
-          mode="toggle"
+          mode=${this.tooltipTrigger === "hover" ? "tooltip" : "toggle"}
+          trigger=${this.tooltipTrigger === "hover" ? "hover focus" : "click"}
           placement=${this.tooltipPlacement}>
           <dap-ds-icon-button
             slot="trigger"
@@ -53,7 +54,7 @@ const g = (l) => {
           </dap-ds-icon-button>
         </dap-ds-tooltip>`}
     </div>
-    ${this.description && r`
+    ${this.description && a`
         <dap-ds-typography
           part="description"
           variant="description"
@@ -78,6 +79,8 @@ const g = (l) => {
     e()
   ], t.prototype, "tooltipPlacement"), o([
     e()
+  ], t.prototype, "tooltipTrigger"), o([
+    e()
   ], t.prototype, "size"), o([
     e({ type: Boolean, reflect: !0 })
   ], t.prototype, "optional"), o([
@@ -95,6 +98,6 @@ const g = (l) => {
   ], t.prototype, "tooltipAriaLabel"), t;
 };
 export {
-  g as LabelableMixin
+  q as LabelableMixin
 };
 //# sourceMappingURL=labelableMixin.js.map

package/dist/internal/mixin/labelableMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"labelableMixin.js","sources":["../../../src/internal/mixin/labelableMixin.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { CommonFormElementSize, PopupPlacement, Size } from '@/common/types'\nimport { t } from '@/localization/localization'\n\ntype Constructor<T = Record<string, unknown>> = {\n  new (...args: any[]): T\n  prototype: T\n}\n\nexport interface LabelableElementInterface {\n  label?: string\n  hideLabel: boolean\n  description?: string\n  tooltip?: string\n  tooltipPlacement: PopupPlacement\n  size: Size\n  required: boolean\n  requiredLabel: string\n  disabled: boolean\n  optional: boolean\n  optionalLabel: string\n  subtle: boolean\n  tooltipAriaLabel: string\n  renderLabel(id?: string, content?: unknown): unknown\n}\n\nexport const LabelableMixin = <T extends Constructor<LitElement>>(base: T) => {\n  class LabelableElement extends base {\n    @property() label?: string\n    // Visually hides the label WITHOUT removing it: the <label for=...> association is\n    // what names the control, so omitting the element would leave it unnamed.\n    @property({ type: Boolean, reflect: true }) hideLabel = false\n    @property() description?: string\n    @property() tooltip?: string\n    @property() tooltipPlacement: PopupPlacement = 'bottom'\n    @property() size: Size = 'sm'\n    @property({ type: Boolean, reflect: true }) optional = false\n    @property() optionalLabel = t('label.optional')\n    @property({ type: Boolean, reflect: true }) subtle = false\n    @property({ type: Boolean, reflect: true }) required = false\n    // Not localized like optionalLabel: the default is a glyph, not a word. Consumers\n    // who swap it for text supply their own localized string.\n    @property() requiredLabel = '*'\n    @property({ type: Boolean, reflect: true }) disabled = false\n    @property({ type: String }) tooltipAriaLabel = t('label.tooltip')\n\n    renderLabel(id?: string, content?: unknown) {\n      return html` <div class=\"label-container\">\n      ${\n        this.label &&\n        html`<dap-ds-form-label\n          part=\"label\"\n          id=${id ?? 'label'}\n          exportparts=\"base: label-base, required: label-required, optional: label-optional\"\n          .size=${this.size}\n          .required=${this.required}\n          .requiredLabel=${this.requiredLabel}\n          .disabled=${this.disabled}\n          .subtle=${this.subtle}\n          .optional=${this.optional}\n          .optionalLabel=${this.optionalLabel}\n          .hideLabel=${this.hideLabel}\n          class=${clsx('label')}\n          .noMargin=${!!this.description}\n          for=\"input\"\n          label=${ifDefined(this.label)}></dap-ds-form-label>`\n      }\n      </dap-ds-form-label>\n      ${\n        this.tooltip &&\n        html` <dap-ds-tooltip\n          part=\"tooltip\"\n          content=${this.tooltip}\n          mode=\"toggle\"\n          placement=${this.tooltipPlacement}>\n          <dap-ds-icon-button\n            slot=\"trigger\"\n            size=${this.size as 'xs' | 'sm' | 'md' | 'lg'}\n            iconSize=${this.size === 'xs' ? '16' : '22'}\n            clean\n            aria-label=${this.tooltipAriaLabel}>\n            <dap-ds-icon\n              name=\"information-line\"\n              aria-hidden=\"true\"\n              class=\"info-button\"></dap-ds-icon>\n          </dap-ds-icon-button>\n        </dap-ds-tooltip>`\n      }\n    </div>\n    ${\n      this.description &&\n      html`\n        <dap-ds-typography\n          part=\"description\"\n          variant=\"description\"\n          class=${clsx('input-description')}\n          size=${ifDefined(this.size as CommonFormElementSize)}\n          id=\"description\">\n          ${this.description}\n        </dap-ds-typography>\n      `\n    }\n      ${content}`\n    }\n  }\n\n  return LabelableElement as Constructor<LabelableElementInterface> & T\n}\n"],"names":["LabelableMixin","base","LabelableElement","t","id","content","html","clsx","ifDefined","__decorateClass","property"],"mappings":"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"}
+{"version":3,"file":"labelableMixin.js","sources":["../../../src/internal/mixin/labelableMixin.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { CommonFormElementSize, PopupPlacement, Size } from '@/common/types'\nimport { t } from '@/localization/localization'\n\n/** How a form label tooltip opens: `click` (click/Enter toggle) or `hover` (hover + keyboard focus). */\nexport type TooltipTrigger = 'click' | 'hover'\n\ntype Constructor<T = Record<string, unknown>> = {\n  new (...args: any[]): T\n  prototype: T\n}\n\nexport interface LabelableElementInterface {\n  label?: string\n  hideLabel: boolean\n  description?: string\n  tooltip?: string\n  tooltipPlacement: PopupPlacement\n  tooltipTrigger: TooltipTrigger\n  size: Size\n  required: boolean\n  requiredLabel: string\n  disabled: boolean\n  optional: boolean\n  optionalLabel: string\n  subtle: boolean\n  tooltipAriaLabel: string\n  renderLabel(id?: string, content?: unknown): unknown\n}\n\nexport const LabelableMixin = <T extends Constructor<LitElement>>(base: T) => {\n  class LabelableElement extends base {\n    @property() label?: string\n    // Visually hides the label WITHOUT removing it: the <label for=...> association is\n    // what names the control, so omitting the element would leave it unnamed.\n    @property({ type: Boolean, reflect: true }) hideLabel = false\n    @property() description?: string\n    @property() tooltip?: string\n    @property() tooltipPlacement: PopupPlacement = 'bottom'\n    /** How the tooltip opens: `click` (click/Enter, default) or `hover` (hover and keyboard focus). */\n    @property() tooltipTrigger: TooltipTrigger = 'click'\n    @property() size: Size = 'sm'\n    @property({ type: Boolean, reflect: true }) optional = false\n    @property() optionalLabel = t('label.optional')\n    @property({ type: Boolean, reflect: true }) subtle = false\n    @property({ type: Boolean, reflect: true }) required = false\n    // Not localized like optionalLabel: the default is a glyph, not a word. Consumers\n    // who swap it for text supply their own localized string.\n    @property() requiredLabel = '*'\n    @property({ type: Boolean, reflect: true }) disabled = false\n    @property({ type: String }) tooltipAriaLabel = t('label.tooltip')\n\n    renderLabel(id?: string, content?: unknown) {\n      return html` <div class=\"label-container\">\n      ${\n        this.label &&\n        html`<dap-ds-form-label\n          part=\"label\"\n          id=${id ?? 'label'}\n          exportparts=\"base: label-base, required: label-required, optional: label-optional\"\n          .size=${this.size}\n          .required=${this.required}\n          .requiredLabel=${this.requiredLabel}\n          .disabled=${this.disabled}\n          .subtle=${this.subtle}\n          .optional=${this.optional}\n          .optionalLabel=${this.optionalLabel}\n          .hideLabel=${this.hideLabel}\n          class=${clsx('label')}\n          .noMargin=${!!this.description}\n          for=\"input\"\n          label=${ifDefined(this.label)}></dap-ds-form-label>`\n      }\n      </dap-ds-form-label>\n      ${\n        this.tooltip &&\n        html` <dap-ds-tooltip\n          part=\"tooltip\"\n          content=${this.tooltip}\n          mode=${this.tooltipTrigger === 'hover' ? 'tooltip' : 'toggle'}\n          trigger=${this.tooltipTrigger === 'hover' ? 'hover focus' : 'click'}\n          placement=${this.tooltipPlacement}>\n          <dap-ds-icon-button\n            slot=\"trigger\"\n            size=${this.size as 'xs' | 'sm' | 'md' | 'lg'}\n            iconSize=${this.size === 'xs' ? '16' : '22'}\n            clean\n            aria-label=${this.tooltipAriaLabel}>\n            <dap-ds-icon\n              name=\"information-line\"\n              aria-hidden=\"true\"\n              class=\"info-button\"></dap-ds-icon>\n          </dap-ds-icon-button>\n        </dap-ds-tooltip>`\n      }\n    </div>\n    ${\n      this.description &&\n      html`\n        <dap-ds-typography\n          part=\"description\"\n          variant=\"description\"\n          class=${clsx('input-description')}\n          size=${ifDefined(this.size as CommonFormElementSize)}\n          id=\"description\">\n          ${this.description}\n        </dap-ds-typography>\n      `\n    }\n      ${content}`\n    }\n  }\n\n  return LabelableElement as Constructor<LabelableElementInterface> & T\n}\n"],"names":["LabelableMixin","base","LabelableElement","t","id","content","html","clsx","ifDefined","__decorateClass","property"],"mappings":"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"}