@malva-ui/core 0.1.12

package/esm2022/toolbar/lib/toolbar/toolbar-widget.js

@@ -0,0 +1,106 @@
+import { Directive, inject } from '@angular/core';
+import { Toolbar, ToolbarWidget } from '@angular/aria/toolbar';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/aria/toolbar";
+/**
+ * Opt-in roving-focus behaviour for a `mlv-toolbar`, backed by
+ * `@angular/aria`'s headless `ngToolbar` pattern.
+ *
+ * Apply `mlvToolbarRoving` to the `<mlv-toolbar>` element and
+ * {@link MlvToolbarWidget} (`mlvToolbarWidget`) to each interactive
+ * child to turn the toolbar into a single Tab stop whose items are traversed
+ * with the arrow keys (plus `Home`/`End`), per the WAI-ARIA toolbar pattern:
+ *
+ * ```html
+ * <mlv-toolbar mlvToolbarRoving>
+ *   <button mlvButton mlvToolbarWidget>Save</button>
+ *   <button mlvButton mlvToolbarWidget>Print</button>
+ * </mlv-toolbar>
+ * ```
+ *
+ * This is **opt-in** on purpose: `mlv-toolbar` projects arbitrary content, so
+ * applying the aria toolbar pattern unconditionally would (a) require every
+ * consumer to annotate their children and (b) mark a widget-less toolbar as a
+ * focusable, `aria-disabled` element. Plain `mlv-toolbar` usage is therefore
+ * left completely untouched.
+ *
+ * The aria pattern's knobs are re-exposed so consumers can pin them where the
+ * element is used (a host directive's inputs cannot be set from the wrapper's
+ * own `host` metadata):
+ *
+ * - `orientation` (`'horizontal'` default) — arrow-key axis.
+ * - `wrap` (`true` default) — whether arrow navigation wraps at the ends.
+ * - `softDisabled` (`true` default) — keep disabled widgets focusable-but-inert
+ *   (`false` skips them during navigation).
+ * - `disabled` — disable the whole toolbar.
+ * - `value` / `valueChange` — selection model for toggle/radio-style toolbars
+ *   (an array of the selected widget values; see {@link MlvToolbarWidget}).
+ */
+export class MlvToolbarRoving {
+    /** @protected The host `ngToolbar` pattern instance. */
+    _toolbar = inject(Toolbar);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvToolbarRoving, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvToolbarRoving, isStandalone: true, selector: "mlv-toolbar[mlvToolbarRoving]", exportAs: ["mlvToolbarRoving"], hostDirectives: [{ directive: i1.Toolbar, inputs: ["orientation", "orientation", "wrap", "wrap", "disabled", "disabled", "softDisabled", "softDisabled", "value", "value"], outputs: ["valueChange", "valueChange"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvToolbarRoving, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'mlv-toolbar[mlvToolbarRoving]',
+                    exportAs: 'mlvToolbarRoving',
+                    hostDirectives: [
+                        {
+                            directive: Toolbar,
+                            inputs: ['orientation', 'wrap', 'disabled', 'softDisabled', 'value'],
+                            outputs: ['valueChange'],
+                        },
+                    ],
+                }]
+        }] });
+/**
+ * Marks an interactive element as a widget inside a
+ * {@link MlvToolbarRoving} (`mlvToolbarRoving`) toolbar, backed by
+ * `@angular/aria`'s `ngToolbarWidget`.
+ *
+ * The widget's `value` is exposed through the selector attribute itself, so a
+ * plain action button needs no extra binding and a selection-group button
+ * supplies its identity inline:
+ *
+ * ```html
+ * <!-- action buttons: value defaults to '' -->
+ * <button mlvButton mlvToolbarWidget>Save</button>
+ *
+ * <!-- toggle/radio group: distinct values feed the toolbar's [(value)] model -->
+ * <button mlvButton mlvToolbarWidget="left">Left</button>
+ * <button mlvButton mlvToolbarWidget="center">Center</button>
+ * ```
+ *
+ * **Deviation from the migration plan:** the plan called for synthesising the
+ * required `value` internally via `mlvNextId`. In `@angular/aria` 22.0.5
+ * `ngToolbarWidget.value` is a *required* input, and a wrapper directive cannot
+ * set its own host directive's input from the wrapper's `host` metadata (doing
+ * so raises `NG0950`). The value must therefore be supplied where the element
+ * is declared; exposing it through the selector alias keeps that ergonomic
+ * (omitted → `''`) without forcing every consumer to bind it.
+ */
+export class MlvToolbarWidget {
+    /** @protected The host `ngToolbarWidget` pattern instance. */
+    _widget = inject(ToolbarWidget);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvToolbarWidget, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvToolbarWidget, isStandalone: true, selector: "[mlvToolbarWidget]", exportAs: ["mlvToolbarWidget"], hostDirectives: [{ directive: i1.ToolbarWidget, inputs: ["value", "mlvToolbarWidget", "disabled", "disabled"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvToolbarWidget, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[mlvToolbarWidget]',
+                    exportAs: 'mlvToolbarWidget',
+                    hostDirectives: [
+                        {
+                            directive: ToolbarWidget,
+                            inputs: ['value: mlvToolbarWidget', 'disabled'],
+                        },
+                    ],
+                }]
+        }] });
+//# sourceMappingURL=toolbar-widget.js.map

package/esm2022/toolbar/lib/toolbar/toolbar-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-widget.js","sourceRoot":"","sources":["../../../../../../../libs/core/toolbar/src/lib/toolbar/toolbar-widget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;;;AAE/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAaH,MAAM,OAAO,gBAAgB;IAC3B,wDAAwD;IACrC,QAAQ,GAAG,MAAM,CAAa,OAAO,CAAC,CAAC;uGAF/C,gBAAgB;2FAAhB,gBAAgB;;2FAAhB,gBAAgB;kBAZ5B,SAAS;mBAAC;oBACT,8DAA8D;oBAC9D,QAAQ,EAAE,+BAA+B;oBACzC,QAAQ,EAAE,kBAAkB;oBAC5B,cAAc,EAAE;wBACd;4BACE,SAAS,EAAE,OAAO;4BAClB,MAAM,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,OAAO,CAAC;4BACpE,OAAO,EAAE,CAAC,aAAa,CAAC;yBACzB;qBACF;iBACF;;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAYH,MAAM,OAAO,gBAAgB;IAC3B,8DAA8D;IAC3C,OAAO,GAAG,MAAM,CAAmB,aAAa,CAAC,CAAC;uGAF1D,gBAAgB;2FAAhB,gBAAgB;;2FAAhB,gBAAgB;kBAX5B,SAAS;mBAAC;oBACT,8DAA8D;oBAC9D,QAAQ,EAAE,oBAAoB;oBAC9B,QAAQ,EAAE,kBAAkB;oBAC5B,cAAc,EAAE;wBACd;4BACE,SAAS,EAAE,aAAa;4BACxB,MAAM,EAAE,CAAC,yBAAyB,EAAE,UAAU,CAAC;yBAChD;qBACF;iBACF","sourcesContent":["import { Directive, inject } from '@angular/core';\nimport { Toolbar, ToolbarWidget } from '@angular/aria/toolbar';\n\n/**\n * Opt-in roving-focus behaviour for a `mlv-toolbar`, backed by\n * `@angular/aria`'s headless `ngToolbar` pattern.\n *\n * Apply `mlvToolbarRoving` to the `<mlv-toolbar>` element and\n * {@link MlvToolbarWidget} (`mlvToolbarWidget`) to each interactive\n * child to turn the toolbar into a single Tab stop whose items are traversed\n * with the arrow keys (plus `Home`/`End`), per the WAI-ARIA toolbar pattern:\n *\n * ```html\n * <mlv-toolbar mlvToolbarRoving>\n *   <button mlvButton mlvToolbarWidget>Save</button>\n *   <button mlvButton mlvToolbarWidget>Print</button>\n * </mlv-toolbar>\n * ```\n *\n * This is **opt-in** on purpose: `mlv-toolbar` projects arbitrary content, so\n * applying the aria toolbar pattern unconditionally would (a) require every\n * consumer to annotate their children and (b) mark a widget-less toolbar as a\n * focusable, `aria-disabled` element. Plain `mlv-toolbar` usage is therefore\n * left completely untouched.\n *\n * The aria pattern's knobs are re-exposed so consumers can pin them where the\n * element is used (a host directive's inputs cannot be set from the wrapper's\n * own `host` metadata):\n *\n * - `orientation` (`'horizontal'` default) — arrow-key axis.\n * - `wrap` (`true` default) — whether arrow navigation wraps at the ends.\n * - `softDisabled` (`true` default) — keep disabled widgets focusable-but-inert\n *   (`false` skips them during navigation).\n * - `disabled` — disable the whole toolbar.\n * - `value` / `valueChange` — selection model for toggle/radio-style toolbars\n *   (an array of the selected widget values; see {@link MlvToolbarWidget}).\n */\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: 'mlv-toolbar[mlvToolbarRoving]',\n  exportAs: 'mlvToolbarRoving',\n  hostDirectives: [\n    {\n      directive: Toolbar,\n      inputs: ['orientation', 'wrap', 'disabled', 'softDisabled', 'value'],\n      outputs: ['valueChange'],\n    },\n  ],\n})\nexport class MlvToolbarRoving<V> {\n  /** @protected The host `ngToolbar` pattern instance. */\n  protected readonly _toolbar = inject<Toolbar<V>>(Toolbar);\n}\n\n/**\n * Marks an interactive element as a widget inside a\n * {@link MlvToolbarRoving} (`mlvToolbarRoving`) toolbar, backed by\n * `@angular/aria`'s `ngToolbarWidget`.\n *\n * The widget's `value` is exposed through the selector attribute itself, so a\n * plain action button needs no extra binding and a selection-group button\n * supplies its identity inline:\n *\n * ```html\n * <!-- action buttons: value defaults to '' -->\n * <button mlvButton mlvToolbarWidget>Save</button>\n *\n * <!-- toggle/radio group: distinct values feed the toolbar's [(value)] model -->\n * <button mlvButton mlvToolbarWidget=\"left\">Left</button>\n * <button mlvButton mlvToolbarWidget=\"center\">Center</button>\n * ```\n *\n * **Deviation from the migration plan:** the plan called for synthesising the\n * required `value` internally via `mlvNextId`. In `@angular/aria` 22.0.5\n * `ngToolbarWidget.value` is a *required* input, and a wrapper directive cannot\n * set its own host directive's input from the wrapper's `host` metadata (doing\n * so raises `NG0950`). The value must therefore be supplied where the element\n * is declared; exposing it through the selector alias keeps that ergonomic\n * (omitted → `''`) without forcing every consumer to bind it.\n */\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: '[mlvToolbarWidget]',\n  exportAs: 'mlvToolbarWidget',\n  hostDirectives: [\n    {\n      directive: ToolbarWidget,\n      inputs: ['value: mlvToolbarWidget', 'disabled'],\n    },\n  ],\n})\nexport class MlvToolbarWidget<V> {\n  /** @protected The host `ngToolbarWidget` pattern instance. */\n  protected readonly _widget = inject<ToolbarWidget<V>>(ToolbarWidget);\n}\n"]}

package/esm2022/toolbar/lib/toolbar/toolbar.js

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, input, } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i0 from "@angular/core";
+export class MlvToolbar {
+    gap = input(0.25, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+    equalSize = input(false, { ...(ngDevMode ? { debugName: "equalSize" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MlvToolbar, isStandalone: true, selector: "mlv-toolbar", inputs: { gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, equalSize: { classPropertyName: "equalSize", publicName: "equalSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.gap.rem": "gap()", "class.mlv-toolbar--equal": "equalSize()" }, classAttribute: "mlv-toolbar" }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".mlv-toolbar{display:flex;flex-direction:row;align-items:center}.mlv-toolbar--equal>*:not(.mlv-toolbar-spacer){flex:1 1 0;min-width:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvToolbar, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-toolbar', template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-toolbar',
+                        '[style.gap.rem]': 'gap()',
+                        '[class.mlv-toolbar--equal]': 'equalSize()',
+                    }, styles: [".mlv-toolbar{display:flex;flex-direction:row;align-items:center}.mlv-toolbar--equal>*:not(.mlv-toolbar-spacer){flex:1 1 0;min-width:0}\n"] }]
+        }], propDecorators: { gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], equalSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "equalSize", required: false }] }] } });
+//# sourceMappingURL=toolbar.js.map

package/esm2022/toolbar/lib/toolbar/toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.js","sourceRoot":"","sources":["../../../../../../../libs/core/toolbar/src/lib/toolbar/toolbar.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,iBAAiB,EACjB,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;;AAc9D,MAAM,OAAO,UAAU;IACZ,GAAG,GAAG,KAAK,CAAC,IAAI;4EAAC,CAAC;IAClB,SAAS,GAAG,KAAK,CAAwB,KAAK,iFACrD,SAAS,EAAE,qBAAqB,GAChC,CAAC;uGAJQ,UAAU;2FAAV,UAAU,ucAVX,gBAAgB;;2FAUf,UAAU;kBAZtB,SAAS;+BACE,aAAa,YACb,gBAAgB,iBAEX,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,QACzC;wBACJ,KAAK,EAAE,aAAa;wBACpB,iBAAiB,EAAE,OAAO;wBAC1B,4BAA4B,EAAE,aAAa;qBAC5C","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  input,\n} from '@angular/core';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\n\n@Component({\n  selector: 'mlv-toolbar',\n  template: '<ng-content />',\n  styleUrl: './toolbar.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'mlv-toolbar',\n    '[style.gap.rem]': 'gap()',\n    '[class.mlv-toolbar--equal]': 'equalSize()',\n  },\n})\nexport class MlvToolbar {\n  readonly gap = input(0.25);\n  readonly equalSize = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n}\n"]}

package/esm2022/toolbar/malva-ui-core-toolbar.js

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=malva-ui-core-toolbar.js.map

package/esm2022/toolbar/malva-ui-core-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-toolbar.js","sourceRoot":"","sources":["../../../../../libs/core/toolbar/src/malva-ui-core-toolbar.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC","sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"]}

package/esm2022/tooltip/index.js

@@ -0,0 +1,4 @@
+export * from './lib/tooltip/tooltip';
+export * from './lib/tooltip/tooltip-panel';
+export * from './lib/tooltip/tooltip.types';
+//# sourceMappingURL=index.js.map

package/esm2022/tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/core/tooltip/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './lib/tooltip/tooltip';\nexport * from './lib/tooltip/tooltip-panel';\nexport * from './lib/tooltip/tooltip.types';\n"]}

package/esm2022/tooltip/lib/tooltip/tooltip-panel.js

@@ -0,0 +1,69 @@
+import { ChangeDetectionStrategy, Component, input, ViewEncapsulation, } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i0 from "@angular/core";
+/**
+ * Internal tooltip panel component.
+ *
+ * This component is not intended for direct consumer use — it is created
+ * programmatically by `MlvTooltip` and attached to a CDK overlay.
+ *
+ * Renders the floating tooltip panel with optional directional arrow.
+ * Placement and tone variant are controlled via inputs set by the directive.
+ */
+export class MlvTooltipPanel {
+    /** The text content to display inside the tooltip panel. */
+    content = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    /** The tone variant of the tooltip panel. */
+    tone = input('dark', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Whether the directional arrow is visible. */
+    showArrow = input(true, { ...(ngDevMode ? { debugName: "showArrow" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** The preferred placement of the tooltip relative to the trigger. */
+    placement = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    /** Unique ID for the tooltip panel, used by `aria-describedby` on the trigger. */
+    tooltipId = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltipId" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTooltipPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvTooltipPanel, isStandalone: true, selector: "mlv-tooltip-panel", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, tooltipId: { classPropertyName: "tooltipId", publicName: "tooltipId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      class="mlv-tooltip"
+      [class]="'mlv-tooltip--tone-' + tone()"
+      [class.mlv-tooltip--no-arrow]="!showArrow()"
+      [class.mlv-tooltip--placement-top]="placement() === 'top'"
+      [class.mlv-tooltip--placement-bottom]="placement() === 'bottom'"
+      [class.mlv-tooltip--placement-left]="placement() === 'left'"
+      [class.mlv-tooltip--placement-right]="placement() === 'right'"
+      role="tooltip"
+      [attr.id]="tooltipId()"
+    >
+      <span class="mlv-tooltip__content">{{ content() }}</span>
+      @if (showArrow()) {
+        <span class="mlv-tooltip__arrow" aria-hidden="true"></span>
+      }
+    </div>
+  `, isInline: true, styles: ["@keyframes mlv-tooltip-enter{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.mlv-tooltip,.mlv-tooltip *,.mlv-tooltip:before,.mlv-tooltip:after,[class^=mlv-tooltip__],[class*=\" mlv-tooltip__\"],[class^=mlv-tooltip--],[class*=\" mlv-tooltip--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}.mlv-tooltip{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-s)}.mlv-tooltip *{box-sizing:border-box}.mlv-tooltip{--mlv-tt-bg: var(--mlv-palette-neutral-900);--mlv-tt-color: var(--mlv-text-inverse);--mlv-tt-arrow-size: .375rem;position:relative;display:inline-flex;flex-direction:column;align-items:center;max-width:15rem;padding:var(--mlv-padding-xs);background-color:var(--mlv-tt-bg);color:var(--mlv-tt-color);border-radius:var(--mlv-radius-tooltip, var(--mlv-radius-m));font-weight:var(--mlv-font-weight-normal);line-height:var(--mlv-line-height-tight);word-break:break-word;z-index:var(--mlv-z-tooltip);box-shadow:var(--mlv-shadow-2);transform-origin:var(--mlv-tooltip-transform-origin, center);animation:mlv-tooltip-enter var(--mlv-duration-fast) var(--mlv-ease-out-strong) both}.mlv-tooltip--placement-top{--mlv-tooltip-transform-origin: center bottom}.mlv-tooltip--placement-bottom{--mlv-tooltip-transform-origin: center top}.mlv-tooltip--placement-left{--mlv-tooltip-transform-origin: right center}.mlv-tooltip--placement-right{--mlv-tooltip-transform-origin: left center}.mlv-tooltip__content{color:inherit;text-align:center}.mlv-tooltip__arrow{position:absolute;width:0;height:0}.mlv-tooltip--placement-bottom .mlv-tooltip__arrow{top:calc(var(--mlv-tt-arrow-size) * -1);left:50%;transform:translate(-50%);border-left:var(--mlv-tt-arrow-size) solid transparent;border-right:var(--mlv-tt-arrow-size) solid transparent;border-bottom:var(--mlv-tt-arrow-size) solid var(--mlv-tt-bg)}.mlv-tooltip--placement-top .mlv-tooltip__arrow{bottom:calc(var(--mlv-tt-arrow-size) * -1);left:50%;transform:translate(-50%);border-left:var(--mlv-tt-arrow-size) solid transparent;border-right:var(--mlv-tt-arrow-size) solid transparent;border-top:var(--mlv-tt-arrow-size) solid var(--mlv-tt-bg)}.mlv-tooltip--placement-left .mlv-tooltip__arrow{right:calc(var(--mlv-tt-arrow-size) * -1);top:50%;transform:translateY(-50%);border-top:var(--mlv-tt-arrow-size) solid transparent;border-bottom:var(--mlv-tt-arrow-size) solid transparent;border-left:var(--mlv-tt-arrow-size) solid var(--mlv-tt-bg)}.mlv-tooltip--placement-right .mlv-tooltip__arrow{left:calc(var(--mlv-tt-arrow-size) * -1);top:50%;transform:translateY(-50%);border-top:var(--mlv-tt-arrow-size) solid transparent;border-bottom:var(--mlv-tt-arrow-size) solid transparent;border-right:var(--mlv-tt-arrow-size) solid var(--mlv-tt-bg)}.mlv-tooltip--no-arrow .mlv-tooltip__arrow{display:none}.mlv-tooltip--tone-dark{--mlv-tt-bg: var(--mlv-palette-neutral-900);--mlv-tt-color: var(--mlv-text-inverse)}.mlv-tooltip--tone-light{--mlv-tt-bg: var(--mlv-background-base);--mlv-tt-color: var(--mlv-text-primary)}.mlv-tooltip--tone-primary{--mlv-tt-bg: var(--mlv-background-accent-1);--mlv-tt-color: var(--mlv-text-primary-on-accent-1)}.mlv-tooltip--tone-success{--mlv-tt-bg: var(--mlv-background-success-1);--mlv-tt-color: var(--mlv-text-on-success)}.mlv-tooltip--tone-warning{--mlv-tt-bg: var(--mlv-background-warning-1);--mlv-tt-color: var(--mlv-text-on-warning)}.mlv-tooltip--tone-danger{--mlv-tt-bg: var(--mlv-background-danger-1);--mlv-tt-color: var(--mlv-text-on-danger)}.mlv-tooltip--tone-info{--mlv-tt-bg: var(--mlv-background-info-1);--mlv-tt-color: var(--mlv-text-on-info)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTooltipPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-tooltip-panel', template: `
+    <div
+      class="mlv-tooltip"
+      [class]="'mlv-tooltip--tone-' + tone()"
+      [class.mlv-tooltip--no-arrow]="!showArrow()"
+      [class.mlv-tooltip--placement-top]="placement() === 'top'"
+      [class.mlv-tooltip--placement-bottom]="placement() === 'bottom'"
+      [class.mlv-tooltip--placement-left]="placement() === 'left'"
+      [class.mlv-tooltip--placement-right]="placement() === 'right'"
+      role="tooltip"
+      [attr.id]="tooltipId()"
+    >
+      <span class="mlv-tooltip__content">{{ content() }}</span>
+      @if (showArrow()) {
+        <span class="mlv-tooltip__arrow" aria-hidden="true"></span>
+      }
+    </div>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes mlv-tooltip-enter{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.mlv-tooltip,.mlv-tooltip *,.mlv-tooltip:before,.mlv-tooltip:after,[class^=mlv-tooltip__],[class*=\" mlv-tooltip__\"],[class^=mlv-tooltip--],[class*=\" mlv-tooltip--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}.mlv-tooltip{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-s)}.mlv-tooltip *{box-sizing:border-box}.mlv-tooltip{--mlv-tt-bg: var(--mlv-palette-neutral-900);--mlv-tt-color: var(--mlv-text-inverse);--mlv-tt-arrow-size: .375rem;position:relative;display:inline-flex;flex-direction:column;align-items:center;max-width:15rem;padding:var(--mlv-padding-xs);background-color:var(--mlv-tt-bg);color:var(--mlv-tt-color);border-radius:var(--mlv-radius-tooltip, var(--mlv-radius-m));font-weight:var(--mlv-font-weight-normal);line-height:var(--mlv-line-height-tight);word-break:break-word;z-index:var(--mlv-z-tooltip);box-shadow:var(--mlv-shadow-2);transform-origin:var(--mlv-tooltip-transform-origin, center);animation:mlv-tooltip-enter var(--mlv-duration-fast) var(--mlv-ease-out-strong) both}.mlv-tooltip--placement-top{--mlv-tooltip-transform-origin: center bottom}.mlv-tooltip--placement-bottom{--mlv-tooltip-transform-origin: center top}.mlv-tooltip--placement-left{--mlv-tooltip-transform-origin: right center}.mlv-tooltip--placement-right{--mlv-tooltip-transform-origin: left center}.mlv-tooltip__content{color:inherit;text-align:center}.mlv-tooltip__arrow{position:absolute;width:0;height:0}.mlv-tooltip--placement-bottom .mlv-tooltip__arrow{top:calc(var(--mlv-tt-arrow-size) * -1);left:50%;transform:translate(-50%);border-left:var(--mlv-tt-arrow-size) solid transparent;border-right:var(--mlv-tt-arrow-size) solid transparent;border-bottom:var(--mlv-tt-arrow-size) solid var(--mlv-tt-bg)}.mlv-tooltip--placement-top .mlv-tooltip__arrow{bottom:calc(var(--mlv-tt-arrow-size) * -1);left:50%;transform:translate(-50%);border-left:var(--mlv-tt-arrow-size) solid transparent;border-right:var(--mlv-tt-arrow-size) solid transparent;border-top:var(--mlv-tt-arrow-size) solid var(--mlv-tt-bg)}.mlv-tooltip--placement-left .mlv-tooltip__arrow{right:calc(var(--mlv-tt-arrow-size) * -1);top:50%;transform:translateY(-50%);border-top:var(--mlv-tt-arrow-size) solid transparent;border-bottom:var(--mlv-tt-arrow-size) solid transparent;border-left:var(--mlv-tt-arrow-size) solid var(--mlv-tt-bg)}.mlv-tooltip--placement-right .mlv-tooltip__arrow{left:calc(var(--mlv-tt-arrow-size) * -1);top:50%;transform:translateY(-50%);border-top:var(--mlv-tt-arrow-size) solid transparent;border-bottom:var(--mlv-tt-arrow-size) solid transparent;border-right:var(--mlv-tt-arrow-size) solid var(--mlv-tt-bg)}.mlv-tooltip--no-arrow .mlv-tooltip__arrow{display:none}.mlv-tooltip--tone-dark{--mlv-tt-bg: var(--mlv-palette-neutral-900);--mlv-tt-color: var(--mlv-text-inverse)}.mlv-tooltip--tone-light{--mlv-tt-bg: var(--mlv-background-base);--mlv-tt-color: var(--mlv-text-primary)}.mlv-tooltip--tone-primary{--mlv-tt-bg: var(--mlv-background-accent-1);--mlv-tt-color: var(--mlv-text-primary-on-accent-1)}.mlv-tooltip--tone-success{--mlv-tt-bg: var(--mlv-background-success-1);--mlv-tt-color: var(--mlv-text-on-success)}.mlv-tooltip--tone-warning{--mlv-tt-bg: var(--mlv-background-warning-1);--mlv-tt-color: var(--mlv-text-on-warning)}.mlv-tooltip--tone-danger{--mlv-tt-bg: var(--mlv-background-danger-1);--mlv-tt-color: var(--mlv-text-on-danger)}.mlv-tooltip--tone-info{--mlv-tt-bg: var(--mlv-background-info-1);--mlv-tt-color: var(--mlv-text-on-info)}\n"] }]
+        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], tooltipId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipId", required: true }] }] } });
+//# sourceMappingURL=tooltip-panel.js.map

package/esm2022/tooltip/lib/tooltip/tooltip-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-panel.js","sourceRoot":"","sources":["../../../../../../../libs/core/tooltip/src/lib/tooltip/tooltip-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;;AAG9D;;;;;;;;GAQG;AAyBH,MAAM,OAAO,eAAe;IAC1B,4DAA4D;IACnD,OAAO,GAAG,KAAK,CAAC,QAAQ;gFAAU,CAAC;IAE5C,6CAA6C;IACpC,IAAI,GAAG,KAAK,CAAiB,MAAM;6EAAC,CAAC;IAE9C,gDAAgD;IACvC,SAAS,GAAG,KAAK,CAAwB,IAAI,iFACpD,SAAS,EAAE,qBAAqB,GAChC,CAAC;IAEH,sEAAsE;IAC7D,SAAS,GAAG,KAAK,CAAsB,KAAK;kFAAC,CAAC;IAEvD,kFAAkF;IACzE,SAAS,GAAG,KAAK,CAAC,QAAQ;kFAAU,CAAC;uGAhBnC,eAAe;2FAAf,eAAe,stBAtBhB;;;;;;;;;;;;;;;;;GAiBT;;2FAKU,eAAe;kBAxB3B,SAAS;+BACE,mBAAmB,YACnB;;;;;;;;;;;;;;;;;GAiBT,iBAEc,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport type { MlvTooltipTone, MlvTooltipPlacement } from './tooltip.types';\n\n/**\n * Internal tooltip panel component.\n *\n * This component is not intended for direct consumer use — it is created\n * programmatically by `MlvTooltip` and attached to a CDK overlay.\n *\n * Renders the floating tooltip panel with optional directional arrow.\n * Placement and tone variant are controlled via inputs set by the directive.\n */\n@Component({\n  selector: 'mlv-tooltip-panel',\n  template: `\n    <div\n      class=\"mlv-tooltip\"\n      [class]=\"'mlv-tooltip--tone-' + tone()\"\n      [class.mlv-tooltip--no-arrow]=\"!showArrow()\"\n      [class.mlv-tooltip--placement-top]=\"placement() === 'top'\"\n      [class.mlv-tooltip--placement-bottom]=\"placement() === 'bottom'\"\n      [class.mlv-tooltip--placement-left]=\"placement() === 'left'\"\n      [class.mlv-tooltip--placement-right]=\"placement() === 'right'\"\n      role=\"tooltip\"\n      [attr.id]=\"tooltipId()\"\n    >\n      <span class=\"mlv-tooltip__content\">{{ content() }}</span>\n      @if (showArrow()) {\n        <span class=\"mlv-tooltip__arrow\" aria-hidden=\"true\"></span>\n      }\n    </div>\n  `,\n  styleUrl: './tooltip-panel.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MlvTooltipPanel {\n  /** The text content to display inside the tooltip panel. */\n  readonly content = input.required<string>();\n\n  /** The tone variant of the tooltip panel. */\n  readonly tone = input<MlvTooltipTone>('dark');\n\n  /** Whether the directional arrow is visible. */\n  readonly showArrow = input<boolean, BooleanInput>(true, {\n    transform: coerceBooleanProperty,\n  });\n\n  /** The preferred placement of the tooltip relative to the trigger. */\n  readonly placement = input<MlvTooltipPlacement>('top');\n\n  /** Unique ID for the tooltip panel, used by `aria-describedby` on the trigger. */\n  readonly tooltipId = input.required<string>();\n}\n"]}

package/esm2022/tooltip/lib/tooltip/tooltip.js

@@ -0,0 +1,352 @@
+import { DestroyRef, Directive, ElementRef, EnvironmentInjector, inject, input, NgZone, Renderer2, } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { mlvNextId } from '@malva-ui/cdk/utils';
+import { MlvTooltipPanel } from './tooltip-panel';
+import * as i0 from "@angular/core";
+/**
+ * Map of placement → CDK connected positions (preferred + opposite fallback).
+ * Offset of 6px provides clearance for the arrow.
+ */
+const TOOLTIP_POSITIONS = {
+    top: [
+        {
+            originX: 'center',
+            originY: 'top',
+            overlayX: 'center',
+            overlayY: 'bottom',
+            offsetY: -6,
+        },
+        {
+            originX: 'center',
+            originY: 'bottom',
+            overlayX: 'center',
+            overlayY: 'top',
+            offsetY: 6,
+        },
+    ],
+    bottom: [
+        {
+            originX: 'center',
+            originY: 'bottom',
+            overlayX: 'center',
+            overlayY: 'top',
+            offsetY: 6,
+        },
+        {
+            originX: 'center',
+            originY: 'top',
+            overlayX: 'center',
+            overlayY: 'bottom',
+            offsetY: -6,
+        },
+    ],
+    left: [
+        {
+            originX: 'start',
+            originY: 'center',
+            overlayX: 'end',
+            overlayY: 'center',
+            offsetX: -6,
+        },
+        {
+            originX: 'end',
+            originY: 'center',
+            overlayX: 'start',
+            overlayY: 'center',
+            offsetX: 6,
+        },
+    ],
+    right: [
+        {
+            originX: 'end',
+            originY: 'center',
+            overlayX: 'start',
+            overlayY: 'center',
+            offsetX: 6,
+        },
+        {
+            originX: 'start',
+            originY: 'center',
+            overlayX: 'end',
+            overlayY: 'center',
+            offsetX: -6,
+        },
+    ],
+};
+/**
+ * Derives effective tooltip placement from the CDK resolved position pair.
+ * Used to update the arrow direction when CDK flips to the fallback placement.
+ */
+function resolvePlacementFromPosition(pos) {
+    if (pos.overlayY === 'bottom')
+        return 'top';
+    if (pos.overlayY === 'top')
+        return 'bottom';
+    if (pos.overlayX === 'end')
+        return 'left';
+    return 'right';
+}
+/**
+ * Tooltip directive — attach to any element to show a tooltip on hover and focus.
+ *
+ * The tooltip content is passed as the directive binding value (`mlvTooltip`).
+ * The tooltip appears after `tooltipDelay` ms and disappears immediately on
+ * mouseleave, focusout, or Escape key.
+ *
+ * @example Basic usage
+ * ```html
+ * <button [mlvTooltip]="'Save changes'">Save</button>
+ * ```
+ *
+ * @example With options
+ * ```html
+ * <button
+ *   [mlvTooltip]="'Delete item'"
+ *   tooltipPlacement="bottom"
+ *   tooltipTone="danger"
+ *   [tooltipDelay]="500"
+ * >Delete</button>
+ * ```
+ *
+ * @example Disabled tooltip
+ * ```html
+ * <button [mlvTooltip]="'Info'" tooltipDisabled>Button</button>
+ * ```
+ *
+ * @example No arrow
+ * ```html
+ * <button [mlvTooltip]="'Info'" [tooltipArrow]="false">Button</button>
+ * ```
+ */
+export class MlvTooltip {
+    // ─── Injected services ────────────────────────────────────────────────────
+    /** @private Host element reference. */
+    _elementRef = inject((ElementRef));
+    /** @private CDK Overlay for creating floating panels. */
+    _overlay = inject(Overlay);
+    /** @private Environment injector, required for ComponentPortal creation. */
+    _injector = inject(EnvironmentInjector);
+    /** @private Renderer for DOM attribute manipulation. */
+    _renderer = inject(Renderer2);
+    /** @private Zone for running timer callbacks inside change detection. */
+    _ngZone = inject(NgZone);
+    /** @private DestroyRef for cleanup on directive destruction. */
+    _destroyRef = inject(DestroyRef);
+    // ─── Inputs ───────────────────────────────────────────────────────────────
+    /**
+     * The tooltip text content.
+     * This is also the directive selector binding: `[mlvTooltip]="'my text'"`.
+     */
+    mlvTooltip = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mlvTooltip" }] : /* istanbul ignore next */ []));
+    /** Preferred placement of the tooltip relative to the trigger. Defaults to `'top'`. */
+    tooltipPlacement = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltipPlacement" }] : /* istanbul ignore next */ []));
+    /** Tone variant of the tooltip panel. Defaults to `'dark'` (inverse/dark background). */
+    tooltipTone = input('dark', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltipTone" }] : /* istanbul ignore next */ []));
+    /**
+     * Delay in milliseconds before the tooltip appears after hover or focus.
+     * Defaults to `300`.
+     */
+    tooltipDelay = input(300, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltipDelay" }] : /* istanbul ignore next */ []));
+    /**
+     * When `true`, suppresses the tooltip entirely.
+     * Supports attribute syntax: `<element tooltipDisabled>`.
+     */
+    tooltipDisabled = input(false, { ...(ngDevMode ? { debugName: "tooltipDisabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * When `true` (default), renders a directional arrow pointing toward the trigger.
+     * Set to `false` to hide the arrow.
+     * Supports attribute syntax: `<element [tooltipArrow]="false">`.
+     */
+    tooltipArrow = input(true, { ...(ngDevMode ? { debugName: "tooltipArrow" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    // ─── Private state ────────────────────────────────────────────────────────
+    /**
+     * @private Reference to the dynamically created `MlvTooltipPanel` instance.
+     */
+    _componentRef = null;
+    /**
+     * @private CDK overlay reference managing the floating panel.
+     */
+    _overlayRef = null;
+    /**
+     * @private Timer handle for the `tooltipDelay` show timer.
+     */
+    _showTimer = null;
+    /**
+     * @private Timer handle for the grace-period hide timer. Gives the pointer
+     * time to travel from the trigger onto the tooltip panel (WCAG 1.4.13).
+     */
+    _hideTimer = null;
+    /**
+     * @private Grace period (ms) before hiding on mouseleave, allowing the pointer
+     * to reach the hoverable tooltip panel without it disappearing.
+     */
+    _hideDelay = 150;
+    /**
+     * @private Cleanup functions for the panel hover listeners, invoked on hide.
+     */
+    _panelListeners = [];
+    /**
+     * @private Stable unique ID for this tooltip instance, used by `aria-describedby`.
+     */
+    _tooltipId = mlvNextId('mlv-tooltip');
+    constructor() {
+        this._destroyRef.onDestroy(() => {
+            this._clearShowTimer();
+            this._clearHideTimer();
+            this._hide();
+        });
+    }
+    // ─── Protected host event handlers ────────────────────────────────────────
+    /** @protected Schedules tooltip display on mouseenter. */
+    _onMouseEnter() {
+        if (this.tooltipDisabled())
+            return;
+        this._clearHideTimer();
+        this._scheduleShow();
+    }
+    /**
+     * @protected Cancels pending show and schedules a delayed hide on mouseleave.
+     * The grace period lets the pointer move onto the tooltip panel without it
+     * disappearing (WCAG 1.4.13 — content on hover must be hoverable).
+     */
+    _onMouseLeave() {
+        this._clearShowTimer();
+        this._scheduleHide();
+    }
+    /** @protected Schedules tooltip display on focusin (keyboard users). */
+    _onFocusIn() {
+        if (this.tooltipDisabled())
+            return;
+        this._scheduleShow();
+    }
+    /** @protected Cancels pending show and hides tooltip on focusout. */
+    _onFocusOut() {
+        this._clearShowTimer();
+        this._hide();
+    }
+    /** @protected Cancels pending show and hides tooltip on Escape key. */
+    _onEscape() {
+        this._clearShowTimer();
+        this._hide();
+    }
+    // ─── Private implementation ───────────────────────────────────────────────
+    /**
+     * @private Schedules tooltip display after `tooltipDelay` ms inside NgZone.
+     */
+    _scheduleShow() {
+        this._clearShowTimer();
+        const delay = this.tooltipDelay();
+        this._showTimer = setTimeout(() => {
+            this._ngZone.run(() => this._show());
+        }, delay);
+    }
+    /**
+     * @private Clears the pending show timer if one is active.
+     */
+    _clearShowTimer() {
+        if (this._showTimer !== null) {
+            clearTimeout(this._showTimer);
+            this._showTimer = null;
+        }
+    }
+    /**
+     * @private Schedules the tooltip to hide after the `_hideDelay` grace period.
+     */
+    _scheduleHide() {
+        this._clearHideTimer();
+        this._hideTimer = setTimeout(() => {
+            this._ngZone.run(() => this._hide());
+        }, this._hideDelay);
+    }
+    /**
+     * @private Clears the pending hide timer if one is active.
+     */
+    _clearHideTimer() {
+        if (this._hideTimer !== null) {
+            clearTimeout(this._hideTimer);
+            this._hideTimer = null;
+        }
+    }
+    /**
+     * @private Creates the CDK overlay, attaches `MlvTooltipPanel`, and wires
+     * `aria-describedby` on the host element. If the tooltip is already visible
+     * this method is a no-op.
+     */
+    _show() {
+        if (this._overlayRef)
+            return;
+        const placement = this.tooltipPlacement();
+        const positions = TOOLTIP_POSITIONS[placement];
+        const positionStrategy = this._overlay
+            .position()
+            .flexibleConnectedTo(this._elementRef)
+            .withPositions(positions)
+            .withPush(false);
+        this._overlayRef = this._overlay.create({
+            positionStrategy,
+            scrollStrategy: this._overlay.scrollStrategies.reposition(),
+            panelClass: 'mlv-tooltip-overlay',
+        });
+        // Attach the component via a ComponentPortal with the environment injector
+        const portal = new ComponentPortal(MlvTooltipPanel, null, this._injector);
+        const componentRef = this._overlayRef.attach(portal);
+        componentRef.setInput('content', this.mlvTooltip());
+        componentRef.setInput('tone', this.tooltipTone());
+        componentRef.setInput('showArrow', this.tooltipArrow());
+        componentRef.setInput('placement', placement);
+        componentRef.setInput('tooltipId', this._tooltipId);
+        this._componentRef = componentRef;
+        // Update the arrow direction when CDK resolves the actual position
+        positionStrategy.positionChanges
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((change) => {
+            const resolvedPlacement = resolvePlacementFromPosition(change.connectionPair);
+            this._componentRef?.setInput('placement', resolvedPlacement);
+        });
+        // Keep the tooltip open while the pointer is over the panel, and hide it
+        // (after the grace period) once the pointer leaves the panel. This makes the
+        // hover content hoverable per WCAG 1.4.13.
+        const overlayEl = this._overlayRef.overlayElement;
+        this._panelListeners.push(this._renderer.listen(overlayEl, 'mouseenter', () => this._clearHideTimer()), this._renderer.listen(overlayEl, 'mouseleave', () => this._scheduleHide()));
+        // Wire aria-describedby for accessibility
+        this._renderer.setAttribute(this._elementRef.nativeElement, 'aria-describedby', this._tooltipId);
+    }
+    /**
+     * @private Disposes the CDK overlay, destroys the component reference, and
+     * removes `aria-describedby` from the host element.
+     */
+    _hide() {
+        this._clearHideTimer();
+        this._panelListeners.forEach((unlisten) => unlisten());
+        this._panelListeners = [];
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            this._overlayRef = null;
+        }
+        this._componentRef = null;
+        this._renderer.removeAttribute(this._elementRef.nativeElement, 'aria-describedby');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MlvTooltip, isStandalone: true, selector: "[mlvTooltip]", inputs: { mlvTooltip: { classPropertyName: "mlvTooltip", publicName: "mlvTooltip", isSignal: true, isRequired: true, transformFunction: null }, tooltipPlacement: { classPropertyName: "tooltipPlacement", publicName: "tooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, tooltipTone: { classPropertyName: "tooltipTone", publicName: "tooltipTone", isSignal: true, isRequired: false, transformFunction: null }, tooltipDelay: { classPropertyName: "tooltipDelay", publicName: "tooltipDelay", isSignal: true, isRequired: false, transformFunction: null }, tooltipDisabled: { classPropertyName: "tooltipDisabled", publicName: "tooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, tooltipArrow: { classPropertyName: "tooltipArrow", publicName: "tooltipArrow", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "_onMouseEnter()", "mouseleave": "_onMouseLeave()", "focusin": "_onFocusIn()", "focusout": "_onFocusOut()", "keydown.escape": "_onEscape()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTooltip, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvTooltip]',
+                    host: {
+                        '(mouseenter)': '_onMouseEnter()',
+                        '(mouseleave)': '_onMouseLeave()',
+                        '(focusin)': '_onFocusIn()',
+                        '(focusout)': '_onFocusOut()',
+                        '(keydown.escape)': '_onEscape()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { mlvTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "mlvTooltip", required: true }] }], tooltipPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPlacement", required: false }] }], tooltipTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTone", required: false }] }], tooltipDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipDelay", required: false }] }], tooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipDisabled", required: false }] }], tooltipArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipArrow", required: false }] }] } });
+//# sourceMappingURL=tooltip.js.map