@educarehq/solaris-ui 0.1.0 → 0.2.0

package/esm2022/lib/components/interaction/popover/model/popover-position.js

@@ -0,0 +1,145 @@
+function getBasePosition(placement, align) {
+    switch (placement) {
+        case 'bottom': {
+            if (align === 'start') {
+                return {
+                    originX: 'start',
+                    originY: 'bottom',
+                    overlayX: 'start',
+                    overlayY: 'top',
+                };
+            }
+            if (align === 'center') {
+                return {
+                    originX: 'center',
+                    originY: 'bottom',
+                    overlayX: 'center',
+                    overlayY: 'top',
+                };
+            }
+            return {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'top',
+            };
+        }
+        case 'top': {
+            if (align === 'start') {
+                return {
+                    originX: 'start',
+                    originY: 'top',
+                    overlayX: 'start',
+                    overlayY: 'bottom',
+                };
+            }
+            if (align === 'center') {
+                return {
+                    originX: 'center',
+                    originY: 'top',
+                    overlayX: 'center',
+                    overlayY: 'bottom',
+                };
+            }
+            return {
+                originX: 'end',
+                originY: 'top',
+                overlayX: 'end',
+                overlayY: 'bottom',
+            };
+        }
+        case 'right': {
+            if (align === 'start') {
+                return {
+                    originX: 'end',
+                    originY: 'top',
+                    overlayX: 'start',
+                    overlayY: 'top',
+                };
+            }
+            if (align === 'center') {
+                return {
+                    originX: 'end',
+                    originY: 'center',
+                    overlayX: 'start',
+                    overlayY: 'center',
+                };
+            }
+            return {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'bottom',
+            };
+        }
+        case 'left': {
+            if (align === 'start') {
+                return {
+                    originX: 'start',
+                    originY: 'top',
+                    overlayX: 'end',
+                    overlayY: 'top',
+                };
+            }
+            if (align === 'center') {
+                return {
+                    originX: 'start',
+                    originY: 'center',
+                    overlayX: 'end',
+                    overlayY: 'center',
+                };
+            }
+            return {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'bottom',
+            };
+        }
+    }
+}
+function toConnectedPosition(config) {
+    return {
+        originX: config.originX,
+        originY: config.originY,
+        overlayX: config.overlayX,
+        overlayY: config.overlayY,
+    };
+}
+export function getPrimaryPosition(placement, align) {
+    return toConnectedPosition(getBasePosition(placement, align));
+}
+function oppositePlacement(placement) {
+    switch (placement) {
+        case 'top':
+            return 'bottom';
+        case 'bottom':
+            return 'top';
+        case 'left':
+            return 'right';
+        case 'right':
+            return 'left';
+    }
+}
+function shiftedAlign(align) {
+    switch (align) {
+        case 'start':
+            return 'end';
+        case 'end':
+            return 'start';
+        case 'center':
+            return 'center';
+    }
+}
+export function getFallbackPositions(placement, align) {
+    const opposite = oppositePlacement(placement);
+    const shifted = shiftedAlign(align);
+    return [
+        toConnectedPosition(getBasePosition(opposite, align)),
+        toConnectedPosition(getBasePosition(placement, shifted)),
+        toConnectedPosition(getBasePosition(opposite, shifted)),
+        toConnectedPosition(getBasePosition(placement, 'center')),
+        toConnectedPosition(getBasePosition(opposite, 'center')),
+    ];
+}
+//# sourceMappingURL=popover-position.js.map

package/esm2022/lib/components/interaction/popover/model/popover-position.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-position.js","sourceRoot":"","sources":["../../../../../../../../../packages/angular/src/lib/components/interaction/popover/model/popover-position.ts"],"names":[],"mappings":"AAcA,SAAS,eAAe,CACtB,SAAkC,EAClC,KAA0B;IAE1B,QAAQ,SAAS,EAAE,CAAC;QAClB,KAAK,QAAQ,CAAC,CAAC,CAAC;YACd,IAAI,KAAK,KAAK,OAAO,EAAE,CAAC;gBACtB,OAAO;oBACL,OAAO,EAAE,OAAO;oBAChB,OAAO,EAAE,QAAQ;oBACjB,QAAQ,EAAE,OAAO;oBACjB,QAAQ,EAAE,KAAK;iBAChB,CAAC;YACJ,CAAC;YACD,IAAI,KAAK,KAAK,QAAQ,EAAE,CAAC;gBACvB,OAAO;oBACL,OAAO,EAAE,QAAQ;oBACjB,OAAO,EAAE,QAAQ;oBACjB,QAAQ,EAAE,QAAQ;oBAClB,QAAQ,EAAE,KAAK;iBAChB,CAAC;YACJ,CAAC;YACD,OAAO;gBACL,OAAO,EAAE,KAAK;gBACd,OAAO,EAAE,QAAQ;gBACjB,QAAQ,EAAE,KAAK;gBACf,QAAQ,EAAE,KAAK;aAChB,CAAC;QACJ,CAAC;QACD,KAAK,KAAK,CAAC,CAAC,CAAC;YACX,IAAI,KAAK,KAAK,OAAO,EAAE,CAAC;gBACtB,OAAO;oBACL,OAAO,EAAE,OAAO;oBAChB,OAAO,EAAE,KAAK;oBACd,QAAQ,EAAE,OAAO;oBACjB,QAAQ,EAAE,QAAQ;iBACnB,CAAC;YACJ,CAAC;YACD,IAAI,KAAK,KAAK,QAAQ,EAAE,CAAC;gBACvB,OAAO;oBACL,OAAO,EAAE,QAAQ;oBACjB,OAAO,EAAE,KAAK;oBACd,QAAQ,EAAE,QAAQ;oBAClB,QAAQ,EAAE,QAAQ;iBACnB,CAAC;YACJ,CAAC;YACD,OAAO;gBACL,OAAO,EAAE,KAAK;gBACd,OAAO,EAAE,KAAK;gBACd,QAAQ,EAAE,KAAK;gBACf,QAAQ,EAAE,QAAQ;aACnB,CAAC;QACJ,CAAC;QACD,KAAK,OAAO,CAAC,CAAC,CAAC;YACb,IAAI,KAAK,KAAK,OAAO,EAAE,CAAC;gBACtB,OAAO;oBACL,OAAO,EAAE,KAAK;oBACd,OAAO,EAAE,KAAK;oBACd,QAAQ,EAAE,OAAO;oBACjB,QAAQ,EAAE,KAAK;iBAChB,CAAC;YACJ,CAAC;YACD,IAAI,KAAK,KAAK,QAAQ,EAAE,CAAC;gBACvB,OAAO;oBACL,OAAO,EAAE,KAAK;oBACd,OAAO,EAAE,QAAQ;oBACjB,QAAQ,EAAE,OAAO;oBACjB,QAAQ,EAAE,QAAQ;iBACnB,CAAC;YACJ,CAAC;YACD,OAAO;gBACL,OAAO,EAAE,KAAK;gBACd,OAAO,EAAE,QAAQ;gBACjB,QAAQ,EAAE,OAAO;gBACjB,QAAQ,EAAE,QAAQ;aACnB,CAAC;QACJ,CAAC;QACD,KAAK,MAAM,CAAC,CAAC,CAAC;YACZ,IAAI,KAAK,KAAK,OAAO,EAAE,CAAC;gBACtB,OAAO;oBACL,OAAO,EAAE,OAAO;oBAChB,OAAO,EAAE,KAAK;oBACd,QAAQ,EAAE,KAAK;oBACf,QAAQ,EAAE,KAAK;iBAChB,CAAC;YACJ,CAAC;YACD,IAAI,KAAK,KAAK,QAAQ,EAAE,CAAC;gBACvB,OAAO;oBACL,OAAO,EAAE,OAAO;oBAChB,OAAO,EAAE,QAAQ;oBACjB,QAAQ,EAAE,KAAK;oBACf,QAAQ,EAAE,QAAQ;iBACnB,CAAC;YACJ,CAAC;YACD,OAAO;gBACL,OAAO,EAAE,OAAO;gBAChB,OAAO,EAAE,QAAQ;gBACjB,QAAQ,EAAE,KAAK;gBACf,QAAQ,EAAE,QAAQ;aACnB,CAAC;QACJ,CAAC;IACH,CAAC;AACH,CAAC;AAED,SAAS,mBAAmB,CAAC,MAA6B;IACxD,OAAO;QACL,OAAO,EAAE,MAAM,CAAC,OAAO;QACvB,OAAO,EAAE,MAAM,CAAC,OAAO;QACvB,QAAQ,EAAE,MAAM,CAAC,QAAQ;QACzB,QAAQ,EAAE,MAAM,CAAC,QAAQ;KAC1B,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,kBAAkB,CAChC,SAAkC,EAClC,KAA0B;IAE1B,OAAO,mBAAmB,CAAC,eAAe,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;AAChE,CAAC;AAED,SAAS,iBAAiB,CACxB,SAAkC;IAElC,QAAQ,SAAS,EAAE,CAAC;QAClB,KAAK,KAAK;YACR,OAAO,QAAQ,CAAC;QAClB,KAAK,QAAQ;YACX,OAAO,KAAK,CAAC;QACf,KAAK,MAAM;YACT,OAAO,OAAO,CAAC;QACjB,KAAK,OAAO;YACV,OAAO,MAAM,CAAC;IAClB,CAAC;AACH,CAAC;AAED,SAAS,YAAY,CAAC,KAA0B;IAC9C,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,OAAO;YACV,OAAO,KAAK,CAAC;QACf,KAAK,KAAK;YACR,OAAO,OAAO,CAAC;QACjB,KAAK,QAAQ;YACX,OAAO,QAAQ,CAAC;IACpB,CAAC;AACH,CAAC;AAED,MAAM,UAAU,oBAAoB,CAClC,SAAkC,EAClC,KAA0B;IAE1B,MAAM,QAAQ,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAEpC,OAAO;QACL,mBAAmB,CAAC,eAAe,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QACrD,mBAAmB,CAAC,eAAe,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QACxD,mBAAmB,CAAC,eAAe,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QACvD,mBAAmB,CAAC,eAAe,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QACzD,mBAAmB,CAAC,eAAe,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;KACzD,CAAC;AACJ,CAAC","sourcesContent":["import type { ConnectedPosition } from '@angular/cdk/overlay';\n\nimport type {\n  SolarisPopoverPlacement,\n  SolarisPopoverAlign,\n} from './popover.types';\n\ninterface PopoverPositionConfig {\n  originX: 'start' | 'center' | 'end';\n  originY: 'top' | 'center' | 'bottom';\n  overlayX: 'start' | 'center' | 'end';\n  overlayY: 'top' | 'center' | 'bottom';\n}\n\nfunction getBasePosition(\n  placement: SolarisPopoverPlacement,\n  align: SolarisPopoverAlign,\n): PopoverPositionConfig {\n  switch (placement) {\n    case 'bottom': {\n      if (align === 'start') {\n        return {\n          originX: 'start',\n          originY: 'bottom',\n          overlayX: 'start',\n          overlayY: 'top',\n        };\n      }\n      if (align === 'center') {\n        return {\n          originX: 'center',\n          originY: 'bottom',\n          overlayX: 'center',\n          overlayY: 'top',\n        };\n      }\n      return {\n        originX: 'end',\n        originY: 'bottom',\n        overlayX: 'end',\n        overlayY: 'top',\n      };\n    }\n    case 'top': {\n      if (align === 'start') {\n        return {\n          originX: 'start',\n          originY: 'top',\n          overlayX: 'start',\n          overlayY: 'bottom',\n        };\n      }\n      if (align === 'center') {\n        return {\n          originX: 'center',\n          originY: 'top',\n          overlayX: 'center',\n          overlayY: 'bottom',\n        };\n      }\n      return {\n        originX: 'end',\n        originY: 'top',\n        overlayX: 'end',\n        overlayY: 'bottom',\n      };\n    }\n    case 'right': {\n      if (align === 'start') {\n        return {\n          originX: 'end',\n          originY: 'top',\n          overlayX: 'start',\n          overlayY: 'top',\n        };\n      }\n      if (align === 'center') {\n        return {\n          originX: 'end',\n          originY: 'center',\n          overlayX: 'start',\n          overlayY: 'center',\n        };\n      }\n      return {\n        originX: 'end',\n        originY: 'bottom',\n        overlayX: 'start',\n        overlayY: 'bottom',\n      };\n    }\n    case 'left': {\n      if (align === 'start') {\n        return {\n          originX: 'start',\n          originY: 'top',\n          overlayX: 'end',\n          overlayY: 'top',\n        };\n      }\n      if (align === 'center') {\n        return {\n          originX: 'start',\n          originY: 'center',\n          overlayX: 'end',\n          overlayY: 'center',\n        };\n      }\n      return {\n        originX: 'start',\n        originY: 'bottom',\n        overlayX: 'end',\n        overlayY: 'bottom',\n      };\n    }\n  }\n}\n\nfunction toConnectedPosition(config: PopoverPositionConfig): ConnectedPosition {\n  return {\n    originX: config.originX,\n    originY: config.originY,\n    overlayX: config.overlayX,\n    overlayY: config.overlayY,\n  };\n}\n\nexport function getPrimaryPosition(\n  placement: SolarisPopoverPlacement,\n  align: SolarisPopoverAlign,\n): ConnectedPosition {\n  return toConnectedPosition(getBasePosition(placement, align));\n}\n\nfunction oppositePlacement(\n  placement: SolarisPopoverPlacement,\n): SolarisPopoverPlacement {\n  switch (placement) {\n    case 'top':\n      return 'bottom';\n    case 'bottom':\n      return 'top';\n    case 'left':\n      return 'right';\n    case 'right':\n      return 'left';\n  }\n}\n\nfunction shiftedAlign(align: SolarisPopoverAlign): SolarisPopoverAlign {\n  switch (align) {\n    case 'start':\n      return 'end';\n    case 'end':\n      return 'start';\n    case 'center':\n      return 'center';\n  }\n}\n\nexport function getFallbackPositions(\n  placement: SolarisPopoverPlacement,\n  align: SolarisPopoverAlign,\n): ConnectedPosition[] {\n  const opposite = oppositePlacement(placement);\n  const shifted = shiftedAlign(align);\n\n  return [\n    toConnectedPosition(getBasePosition(opposite, align)),\n    toConnectedPosition(getBasePosition(placement, shifted)),\n    toConnectedPosition(getBasePosition(opposite, shifted)),\n    toConnectedPosition(getBasePosition(placement, 'center')),\n    toConnectedPosition(getBasePosition(opposite, 'center')),\n  ];\n}\n"]}

package/esm2022/lib/components/interaction/popover/model/popover.types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=popover.types.js.map

package/esm2022/lib/components/interaction/popover/model/popover.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/angular/src/lib/components/interaction/popover/model/popover.types.ts"],"names":[],"mappings":"","sourcesContent":["export type SolarisPopoverPlacement = 'top' | 'right' | 'bottom' | 'left';\n\nexport type SolarisPopoverAlign = 'start' | 'center' | 'end';\n\nexport type SolarisPopoverAppearance = 'surface' | 'outline';\n\nexport type SolarisPopoverPadding = 'none' | 'sm' | 'md' | 'lg';\n\nexport type SolarisPopoverRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport type SolarisPopoverScrollStrategy = 'reposition' | 'close' | 'block';\n\nexport type SolarisPopoverAutoFocus = false | 'panel' | 'first-tabbable';\n"]}

package/esm2022/lib/components/interaction/popover/token/popover.tokens.js

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+export const SOLARIS_POPOVER_PANEL_DATA = new InjectionToken('SolarisPopoverPanelData');
+//# sourceMappingURL=popover.tokens.js.map

package/esm2022/lib/components/interaction/popover/token/popover.tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.tokens.js","sourceRoot":"","sources":["../../../../../../../../../packages/angular/src/lib/components/interaction/popover/token/popover.tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAe,MAAM,eAAe,CAAC;AAa5D,MAAM,CAAC,MAAM,0BAA0B,GACrC,IAAI,cAAc,CAA0B,yBAAyB,CAAC,CAAC","sourcesContent":["import { InjectionToken, TemplateRef } from '@angular/core';\n\nexport interface SolarisPopoverPanelData {\n  contentTemplate: TemplateRef<unknown>;\n  appearance: string;\n  padding: string;\n  radius: string;\n  role: string | undefined | null;\n  panelId: string;\n  autoFocus: string | boolean;\n  connectedSide?: 'top' | 'bottom';\n}\n\nexport const SOLARIS_POPOVER_PANEL_DATA =\n  new InjectionToken<SolarisPopoverPanelData>('SolarisPopoverPanelData');\n"]}

package/esm2022/lib/components/interaction/tooltip/component/tooltip-panel.component.js

@@ -0,0 +1,23 @@
+import { Component, inject, ChangeDetectorRef } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { SolarisIconComponent } from '../../../icon';
+import { SOLARIS_TOOLTIP_PANEL_DATA, } from '../token/tooltip.tokens';
+import * as i0 from "@angular/core";
+export class SolarisTooltipPanelComponent {
+    data = inject(SOLARIS_TOOLTIP_PANEL_DATA);
+    cdr = inject(ChangeDetectorRef);
+    updatePlacement(placement, arrowClass) {
+        this.data.placement = placement;
+        this.data.arrowClass = arrowClass;
+        this.cdr.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisTooltipPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisTooltipPanelComponent, isStandalone: true, selector: "solaris-tooltip-panel", host: { classAttribute: "solaris-tooltip-panel" }, ngImport: i0, template: "<div\n  class=\"solaris-tooltip-panel__container\"\n  [attr.data-appearance]=\"data.appearance\"\n  [attr.data-size]=\"data.size\"\n  [attr.data-radius]=\"data.radius\"\n  [attr.data-placement]=\"data.placement\"\n  [id]=\"data.panelId\"\n  [style.max-width]=\"data.maxWidth\"\n>\n  @if (data.arrow) {\n    <div class=\"solaris-tooltip-panel__arrow {{ data.arrowClass }}\"></div>\n  }\n\n  <div class=\"solaris-tooltip-panel__content\">\n    @if (data.icon) {\n      <solaris-icon\n        [name]=\"data.icon\"\n        [decorative]=\"data.iconDecorative\"\n        class=\"solaris-tooltip-panel__icon\"\n      />\n    }\n\n    <div class=\"solaris-tooltip-panel__text\">\n      @if (data.title) {\n        <div class=\"solaris-tooltip-panel__title\">{{ data.title }}</div>\n      }\n\n      @if (data.body) {\n        <div class=\"solaris-tooltip-panel__body\">{{ data.body }}</div>\n      }\n\n      @if (data.contentTemplate) {\n        <ng-container [ngTemplateOutlet]=\"data.contentTemplate\" />\n      }\n    </div>\n  </div>\n\n  @if (data.closeable) {\n    <button\n      class=\"solaris-tooltip-panel__close\"\n      type=\"button\"\n      (click)=\"data.close()\"\n      attr.aria-label=\"{{ data.closeLabel }}\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n</div>\n", styles: [".solaris-tooltip-panel{--solaris-tooltip-max-width: 32rem;--solaris-tooltip-border-width: 0px;--solaris-tooltip-border-color: transparent;--solaris-tooltip-gap: var(--solaris-spacing-5);--solaris-tooltip-shadow: var(--solaris-shadow-sm);--solaris-tooltip-radius: var(--solaris-radius-md);--solaris-tooltip-color: var(--solaris-text-default);--solaris-tooltip-icon-size: var(--solaris-font-size-md);--solaris-tooltip-arrow-size: var(--solaris-font-size-xs);--solaris-tooltip-padding-block: var(--solaris-spacing-3);--solaris-tooltip-padding-inline: var(--solaris-spacing-5);--solaris-tooltip-background: var(--solaris-surface-raised);--solaris-tooltip-offset: calc(var(--solaris-spacing-1) / 2);outline:none;display:block}.solaris-tooltip-panel__container{--solaris-tooltip-background: var(--solaris-surface-raised);display:flex;outline:none;overflow:visible;position:relative;word-break:normal;white-space:normal;box-sizing:border-box;align-items:flex-start;gap:var(--solaris-tooltip-gap);color:var(--solaris-tooltip-color);box-shadow:var(--solaris-tooltip-shadow);line-height:var(--solaris-line-height-md);max-width:var(--solaris-tooltip-max-width);border-radius:var(--solaris-tooltip-radius);background:var(--solaris-tooltip-background);padding-block:var(--solaris-tooltip-padding-block);padding-inline:var(--solaris-tooltip-padding-inline);border:var(--solaris-tooltip-border-width) solid var(--solaris-tooltip-border-color)}.solaris-tooltip-panel__arrow{--solaris-tooltip-arrow-outer-size: calc( var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-border-width, 0px) + var(--solaris-tooltip-border-width, 0px) );width:0;height:0;position:absolute;pointer-events:none}.solaris-tooltip-panel__arrow:before,.solaris-tooltip-panel__arrow:after{width:0;height:0;content:\"\";position:absolute;border-style:solid}.solaris-tooltip-arrow--bottom{left:50%;transform:translate(-50%);bottom:calc(0px - var(--solaris-tooltip-border-width, 0px))}.solaris-tooltip-arrow--bottom:before,.solaris-tooltip-arrow--bottom:after{left:50%;transform:translate(-50%);top:calc(0px - var(--solaris-tooltip-border-width, 0px))}.solaris-tooltip-arrow--bottom:before{border-width:var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size) 0;border-color:var(--solaris-tooltip-border-color) transparent transparent}.solaris-tooltip-arrow--bottom:after{border-width:var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size) 0;border-color:var(--solaris-tooltip-background) transparent transparent}.solaris-tooltip-arrow--top{left:50%;transform:translate(-50%);top:calc(0px - var(--solaris-tooltip-border-width, 0px))}.solaris-tooltip-arrow--top:before,.solaris-tooltip-arrow--top:after{left:50%;transform:translate(-50%);bottom:calc(0px - var(--solaris-tooltip-border-width, 0px))}.solaris-tooltip-arrow--top:before{border-width:0 var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size);border-color:transparent transparent var(--solaris-tooltip-border-color)}.solaris-tooltip-arrow--top:after{border-width:0 var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size);border-color:transparent transparent var(--solaris-tooltip-background)}.solaris-tooltip-arrow--right{top:50%;transform:translateY(-50%);right:calc(0px - var(--solaris-tooltip-border-width, 0px))}.solaris-tooltip-arrow--right:before,.solaris-tooltip-arrow--right:after{top:50%;transform:translateY(-50%);left:calc(0px - var(--solaris-tooltip-border-width, 0px))}.solaris-tooltip-arrow--right:before{border-width:var(--solaris-tooltip-arrow-outer-size) 0 var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size);border-color:transparent transparent transparent var(--solaris-tooltip-border-color)}.solaris-tooltip-arrow--right:after{border-width:var(--solaris-tooltip-arrow-size) 0 var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size);border-color:transparent transparent transparent var(--solaris-tooltip-background)}.solaris-tooltip-arrow--left{top:50%;transform:translateY(-50%);left:calc(0px - var(--solaris-tooltip-border-width, 0px))}.solaris-tooltip-arrow--left:before,.solaris-tooltip-arrow--left:after{top:50%;transform:translateY(-50%);right:calc(0px - var(--solaris-tooltip-border-width, 0px))}.solaris-tooltip-arrow--left:before{border-width:var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size) 0;border-color:transparent var(--solaris-tooltip-border-color) transparent transparent}.solaris-tooltip-arrow--left:after{border-width:var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size) 0;border-color:transparent var(--solaris-tooltip-background) transparent transparent}.solaris-tooltip-panel__container[data-placement=top-start] .solaris-tooltip-arrow--bottom,.solaris-tooltip-panel__container[data-placement=bottom-start] .solaris-tooltip-arrow--top{left:calc(var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-radius));transform:none}.solaris-tooltip-panel__container[data-placement=top-end] .solaris-tooltip-arrow--bottom,.solaris-tooltip-panel__container[data-placement=bottom-end] .solaris-tooltip-arrow--top{left:auto;right:calc(var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-radius));transform:none}.solaris-tooltip-panel__container[data-placement=left-start] .solaris-tooltip-arrow--right,.solaris-tooltip-panel__container[data-placement=right-start] .solaris-tooltip-arrow--left{top:calc(var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-radius));transform:none}.solaris-tooltip-panel__container[data-placement=left-end] .solaris-tooltip-arrow--right,.solaris-tooltip-panel__container[data-placement=right-end] .solaris-tooltip-arrow--left{top:auto;bottom:calc(var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-radius));transform:none}.solaris-tooltip-panel__content{flex:1;min-width:0;display:flex;align-items:flex-start;gap:var(--solaris-tooltip-gap)}.solaris-tooltip-panel__icon{flex-shrink:0;display:inline-flex;margin-top:var(--solaris-tooltip-offset);font-size:var(--solaris-tooltip-icon-size);width:var(--solaris-tooltip-icon-size);height:var(--solaris-tooltip-icon-size)}.solaris-tooltip-panel__text{min-width:0;display:flex;gap:var(--solaris-tooltip-offset);flex-direction:column}.solaris-tooltip-panel__title{overflow:hidden;font-weight:var(--solaris-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis}.solaris-tooltip-panel__body{word-break:normal;white-space:normal}.solaris-tooltip-panel__close{opacity:.7;border:none;flex-shrink:0;color:inherit;cursor:pointer;background:none;padding:0;border-radius:50%;align-items:center;display:inline-flex;margin-top:var(--solaris-tooltip-offset);justify-content:center;font-size:var(--solaris-tooltip-icon-size);transition:opacity var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard);width:var(--solaris-tooltip-icon-size);height:var(--solaris-tooltip-icon-size)}.solaris-tooltip-panel__close:hover,.solaris-tooltip-panel__close:focus-visible{opacity:1}.solaris-tooltip-panel__container[data-appearance=outline]{--solaris-tooltip-border-color: var(--solaris-border-default);--solaris-tooltip-border-width: var(--solaris-border-width-sm);background:var(--solaris-tooltip-background);border:var(--solaris-tooltip-border-width) solid var(--solaris-tooltip-border-color)}.solaris-tooltip-panel__container[data-appearance=surface]{--solaris-tooltip-border-width: 0px;--solaris-tooltip-border-color: transparent;border:0;background:var(--solaris-tooltip-background)}.solaris-tooltip-panel__container[data-appearance=inverse]{--solaris-tooltip-border-width: 0px;--solaris-tooltip-border-color: transparent;--solaris-tooltip-background: var(--solaris-text-default);border:0;color:var(--solaris-surface-raised);background:var(--solaris-tooltip-background)}.solaris-tooltip-panel__container[data-size=sm]{padding-block:var(--solaris-spacing-2);padding-inline:var(--solaris-spacing-5);font-size:var(--solaris-font-size-xs);--solaris-tooltip-arrow-size: var(--solaris-font-size-2xs)}.solaris-tooltip-panel__container[data-size=md]{padding-block:var(--solaris-spacing-3);padding-inline:var(--solaris-spacing-6);font-size:var(--solaris-font-size-sm);--solaris-tooltip-arrow-size: var(--solaris-font-size-xs)}.solaris-tooltip-panel__container[data-size=lg]{padding-block:var(--solaris-spacing-4);padding-inline:var(--solaris-spacing-8);font-size:var(--solaris-font-size-md);--solaris-tooltip-arrow-size: var(--solaris-font-size-md)}.solaris-tooltip-panel__container[data-size=sm] .solaris-tooltip-panel__icon,.solaris-tooltip-panel__container[data-size=sm] .solaris-tooltip-panel__close{font-size:var(--solaris-tooltip-icon-size);width:var(--solaris-tooltip-icon-size);height:var(--solaris-tooltip-icon-size)}.solaris-tooltip-panel__container[data-size=md] .solaris-tooltip-panel__icon,.solaris-tooltip-panel__container[data-size=md] .solaris-tooltip-panel__close{font-size:var(--solaris-font-size-xl);width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-tooltip-panel__container[data-size=lg] .solaris-tooltip-panel__icon,.solaris-tooltip-panel__container[data-size=lg] .solaris-tooltip-panel__close{font-size:var(--solaris-font-size-2xl);width:var(--solaris-font-size-2xl);height:var(--solaris-font-size-2xl)}.solaris-tooltip-panel__container[data-radius=sm]{border-radius:var(--solaris-radius-sm)}.solaris-tooltip-panel__container[data-radius=md]{border-radius:var(--solaris-radius-md)}.solaris-tooltip-panel__container[data-radius=lg]{border-radius:var(--solaris-radius-lg)}@media(prefers-reduced-motion:reduce){.solaris-tooltip-panel__close{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisTooltipPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-tooltip-panel', standalone: true, imports: [NgTemplateOutlet, SolarisIconComponent], host: {
+                        class: 'solaris-tooltip-panel',
+                    }, template: "<div\n  class=\"solaris-tooltip-panel__container\"\n  [attr.data-appearance]=\"data.appearance\"\n  [attr.data-size]=\"data.size\"\n  [attr.data-radius]=\"data.radius\"\n  [attr.data-placement]=\"data.placement\"\n  [id]=\"data.panelId\"\n  [style.max-width]=\"data.maxWidth\"\n>\n  @if (data.arrow) {\n    <div class=\"solaris-tooltip-panel__arrow {{ data.arrowClass }}\"></div>\n  }\n\n  <div class=\"solaris-tooltip-panel__content\">\n    @if (data.icon) {\n      <solaris-icon\n        [name]=\"data.icon\"\n        [decorative]=\"data.iconDecorative\"\n        class=\"solaris-tooltip-panel__icon\"\n      />\n    }\n\n    <div class=\"solaris-tooltip-panel__text\">\n      @if (data.title) {\n        <div class=\"solaris-tooltip-panel__title\">{{ data.title }}</div>\n      }\n\n      @if (data.body) {\n        <div class=\"solaris-tooltip-panel__body\">{{ data.body }}</div>\n      }\n\n      @if (data.contentTemplate) {\n        <ng-container [ngTemplateOutlet]=\"data.contentTemplate\" />\n      }\n    </div>\n  </div>\n\n  @if (data.closeable) {\n    <button\n      class=\"solaris-tooltip-panel__close\"\n      type=\"button\"\n      (click)=\"data.close()\"\n      attr.aria-label=\"{{ data.closeLabel }}\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n</div>\n", styles: [".solaris-tooltip-panel{--solaris-tooltip-max-width: 32rem;--solaris-tooltip-border-width: 0px;--solaris-tooltip-border-color: transparent;--solaris-tooltip-gap: var(--solaris-spacing-5);--solaris-tooltip-shadow: var(--solaris-shadow-sm);--solaris-tooltip-radius: var(--solaris-radius-md);--solaris-tooltip-color: var(--solaris-text-default);--solaris-tooltip-icon-size: var(--solaris-font-size-md);--solaris-tooltip-arrow-size: var(--solaris-font-size-xs);--solaris-tooltip-padding-block: var(--solaris-spacing-3);--solaris-tooltip-padding-inline: var(--solaris-spacing-5);--solaris-tooltip-background: var(--solaris-surface-raised);--solaris-tooltip-offset: calc(var(--solaris-spacing-1) / 2);outline:none;display:block}.solaris-tooltip-panel__container{--solaris-tooltip-background: var(--solaris-surface-raised);display:flex;outline:none;overflow:visible;position:relative;word-break:normal;white-space:normal;box-sizing:border-box;align-items:flex-start;gap:var(--solaris-tooltip-gap);color:var(--solaris-tooltip-color);box-shadow:var(--solaris-tooltip-shadow);line-height:var(--solaris-line-height-md);max-width:var(--solaris-tooltip-max-width);border-radius:var(--solaris-tooltip-radius);background:var(--solaris-tooltip-background);padding-block:var(--solaris-tooltip-padding-block);padding-inline:var(--solaris-tooltip-padding-inline);border:var(--solaris-tooltip-border-width) solid var(--solaris-tooltip-border-color)}.solaris-tooltip-panel__arrow{--solaris-tooltip-arrow-outer-size: calc( var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-border-width, 0px) + var(--solaris-tooltip-border-width, 0px) );width:0;height:0;position:absolute;pointer-events:none}.solaris-tooltip-panel__arrow:before,.solaris-tooltip-panel__arrow:after{width:0;height:0;content:\"\";position:absolute;border-style:solid}.solaris-tooltip-arrow--bottom{left:50%;transform:translate(-50%);bottom:calc(0px - var(--solaris-tooltip-border-width, 0px))}.solaris-tooltip-arrow--bottom:before,.solaris-tooltip-arrow--bottom:after{left:50%;transform:translate(-50%);top:calc(0px - var(--solaris-tooltip-border-width, 0px))}.solaris-tooltip-arrow--bottom:before{border-width:var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size) 0;border-color:var(--solaris-tooltip-border-color) transparent transparent}.solaris-tooltip-arrow--bottom:after{border-width:var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size) 0;border-color:var(--solaris-tooltip-background) transparent transparent}.solaris-tooltip-arrow--top{left:50%;transform:translate(-50%);top:calc(0px - var(--solaris-tooltip-border-width, 0px))}.solaris-tooltip-arrow--top:before,.solaris-tooltip-arrow--top:after{left:50%;transform:translate(-50%);bottom:calc(0px - var(--solaris-tooltip-border-width, 0px))}.solaris-tooltip-arrow--top:before{border-width:0 var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size);border-color:transparent transparent var(--solaris-tooltip-border-color)}.solaris-tooltip-arrow--top:after{border-width:0 var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size);border-color:transparent transparent var(--solaris-tooltip-background)}.solaris-tooltip-arrow--right{top:50%;transform:translateY(-50%);right:calc(0px - var(--solaris-tooltip-border-width, 0px))}.solaris-tooltip-arrow--right:before,.solaris-tooltip-arrow--right:after{top:50%;transform:translateY(-50%);left:calc(0px - var(--solaris-tooltip-border-width, 0px))}.solaris-tooltip-arrow--right:before{border-width:var(--solaris-tooltip-arrow-outer-size) 0 var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size);border-color:transparent transparent transparent var(--solaris-tooltip-border-color)}.solaris-tooltip-arrow--right:after{border-width:var(--solaris-tooltip-arrow-size) 0 var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size);border-color:transparent transparent transparent var(--solaris-tooltip-background)}.solaris-tooltip-arrow--left{top:50%;transform:translateY(-50%);left:calc(0px - var(--solaris-tooltip-border-width, 0px))}.solaris-tooltip-arrow--left:before,.solaris-tooltip-arrow--left:after{top:50%;transform:translateY(-50%);right:calc(0px - var(--solaris-tooltip-border-width, 0px))}.solaris-tooltip-arrow--left:before{border-width:var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size) var(--solaris-tooltip-arrow-outer-size) 0;border-color:transparent var(--solaris-tooltip-border-color) transparent transparent}.solaris-tooltip-arrow--left:after{border-width:var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size) var(--solaris-tooltip-arrow-size) 0;border-color:transparent var(--solaris-tooltip-background) transparent transparent}.solaris-tooltip-panel__container[data-placement=top-start] .solaris-tooltip-arrow--bottom,.solaris-tooltip-panel__container[data-placement=bottom-start] .solaris-tooltip-arrow--top{left:calc(var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-radius));transform:none}.solaris-tooltip-panel__container[data-placement=top-end] .solaris-tooltip-arrow--bottom,.solaris-tooltip-panel__container[data-placement=bottom-end] .solaris-tooltip-arrow--top{left:auto;right:calc(var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-radius));transform:none}.solaris-tooltip-panel__container[data-placement=left-start] .solaris-tooltip-arrow--right,.solaris-tooltip-panel__container[data-placement=right-start] .solaris-tooltip-arrow--left{top:calc(var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-radius));transform:none}.solaris-tooltip-panel__container[data-placement=left-end] .solaris-tooltip-arrow--right,.solaris-tooltip-panel__container[data-placement=right-end] .solaris-tooltip-arrow--left{top:auto;bottom:calc(var(--solaris-tooltip-arrow-size) + var(--solaris-tooltip-radius));transform:none}.solaris-tooltip-panel__content{flex:1;min-width:0;display:flex;align-items:flex-start;gap:var(--solaris-tooltip-gap)}.solaris-tooltip-panel__icon{flex-shrink:0;display:inline-flex;margin-top:var(--solaris-tooltip-offset);font-size:var(--solaris-tooltip-icon-size);width:var(--solaris-tooltip-icon-size);height:var(--solaris-tooltip-icon-size)}.solaris-tooltip-panel__text{min-width:0;display:flex;gap:var(--solaris-tooltip-offset);flex-direction:column}.solaris-tooltip-panel__title{overflow:hidden;font-weight:var(--solaris-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis}.solaris-tooltip-panel__body{word-break:normal;white-space:normal}.solaris-tooltip-panel__close{opacity:.7;border:none;flex-shrink:0;color:inherit;cursor:pointer;background:none;padding:0;border-radius:50%;align-items:center;display:inline-flex;margin-top:var(--solaris-tooltip-offset);justify-content:center;font-size:var(--solaris-tooltip-icon-size);transition:opacity var(--solaris-motion-duration-fast) var(--solaris-motion-easing-standard);width:var(--solaris-tooltip-icon-size);height:var(--solaris-tooltip-icon-size)}.solaris-tooltip-panel__close:hover,.solaris-tooltip-panel__close:focus-visible{opacity:1}.solaris-tooltip-panel__container[data-appearance=outline]{--solaris-tooltip-border-color: var(--solaris-border-default);--solaris-tooltip-border-width: var(--solaris-border-width-sm);background:var(--solaris-tooltip-background);border:var(--solaris-tooltip-border-width) solid var(--solaris-tooltip-border-color)}.solaris-tooltip-panel__container[data-appearance=surface]{--solaris-tooltip-border-width: 0px;--solaris-tooltip-border-color: transparent;border:0;background:var(--solaris-tooltip-background)}.solaris-tooltip-panel__container[data-appearance=inverse]{--solaris-tooltip-border-width: 0px;--solaris-tooltip-border-color: transparent;--solaris-tooltip-background: var(--solaris-text-default);border:0;color:var(--solaris-surface-raised);background:var(--solaris-tooltip-background)}.solaris-tooltip-panel__container[data-size=sm]{padding-block:var(--solaris-spacing-2);padding-inline:var(--solaris-spacing-5);font-size:var(--solaris-font-size-xs);--solaris-tooltip-arrow-size: var(--solaris-font-size-2xs)}.solaris-tooltip-panel__container[data-size=md]{padding-block:var(--solaris-spacing-3);padding-inline:var(--solaris-spacing-6);font-size:var(--solaris-font-size-sm);--solaris-tooltip-arrow-size: var(--solaris-font-size-xs)}.solaris-tooltip-panel__container[data-size=lg]{padding-block:var(--solaris-spacing-4);padding-inline:var(--solaris-spacing-8);font-size:var(--solaris-font-size-md);--solaris-tooltip-arrow-size: var(--solaris-font-size-md)}.solaris-tooltip-panel__container[data-size=sm] .solaris-tooltip-panel__icon,.solaris-tooltip-panel__container[data-size=sm] .solaris-tooltip-panel__close{font-size:var(--solaris-tooltip-icon-size);width:var(--solaris-tooltip-icon-size);height:var(--solaris-tooltip-icon-size)}.solaris-tooltip-panel__container[data-size=md] .solaris-tooltip-panel__icon,.solaris-tooltip-panel__container[data-size=md] .solaris-tooltip-panel__close{font-size:var(--solaris-font-size-xl);width:var(--solaris-font-size-xl);height:var(--solaris-font-size-xl)}.solaris-tooltip-panel__container[data-size=lg] .solaris-tooltip-panel__icon,.solaris-tooltip-panel__container[data-size=lg] .solaris-tooltip-panel__close{font-size:var(--solaris-font-size-2xl);width:var(--solaris-font-size-2xl);height:var(--solaris-font-size-2xl)}.solaris-tooltip-panel__container[data-radius=sm]{border-radius:var(--solaris-radius-sm)}.solaris-tooltip-panel__container[data-radius=md]{border-radius:var(--solaris-radius-md)}.solaris-tooltip-panel__container[data-radius=lg]{border-radius:var(--solaris-radius-lg)}@media(prefers-reduced-motion:reduce){.solaris-tooltip-panel__close{transition:none}}\n"] }]
+        }] });
+//# sourceMappingURL=tooltip-panel.component.js.map

package/esm2022/lib/components/interaction/tooltip/component/tooltip-panel.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-panel.component.js","sourceRoot":"","sources":["../../../../../../../../../packages/angular/src/lib/components/interaction/tooltip/component/tooltip-panel.component.ts","../../../../../../../../../packages/angular/src/lib/components/interaction/tooltip/component/tooltip-panel.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,OAAO,EACL,0BAA0B,GAE3B,MAAM,yBAAyB,CAAC;;AAYjC,MAAM,OAAO,4BAA4B;IAC9B,IAAI,GAA4B,MAAM,CAAC,0BAA0B,CAAC,CAAC;IAC3D,GAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;IAEjD,eAAe,CAAC,SAAiB,EAAE,UAAkB;QACnD,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAChC,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAClC,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;IAC1B,CAAC;wGARU,4BAA4B;4FAA5B,4BAA4B,oICpBzC,syCAgDA,wgTDnCY,gBAAgB,oJAAE,oBAAoB;;4FAOrC,4BAA4B;kBAVxC,SAAS;+BACE,uBAAuB,cACrB,IAAI,WACP,CAAC,gBAAgB,EAAE,oBAAoB,CAAC,QAG3C;wBACJ,KAAK,EAAE,uBAAuB;qBAC/B","sourcesContent":["import { Component, inject, ChangeDetectorRef } from '@angular/core';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\n\r\nimport { SolarisIconComponent } from '../../../icon';\r\n\r\nimport {\r\n  SOLARIS_TOOLTIP_PANEL_DATA,\r\n  type SolarisTooltipPanelData,\r\n} from '../token/tooltip.tokens';\r\n\r\n@Component({\r\n  selector: 'solaris-tooltip-panel',\r\n  standalone: true,\r\n  imports: [NgTemplateOutlet, SolarisIconComponent],\r\n  templateUrl: './tooltip-panel.component.html',\r\n  styleUrls: ['./tooltip-panel.component.scss'],\r\n  host: {\r\n    class: 'solaris-tooltip-panel',\r\n  },\r\n})\r\nexport class SolarisTooltipPanelComponent {\r\n  readonly data: SolarisTooltipPanelData = inject(SOLARIS_TOOLTIP_PANEL_DATA);\r\n  private readonly cdr = inject(ChangeDetectorRef);\r\n\r\n  updatePlacement(placement: string, arrowClass: string): void {\r\n    this.data.placement = placement;\r\n    this.data.arrowClass = arrowClass;\r\n    this.cdr.markForCheck();\r\n  }\r\n}\r\n","<div\n  class=\"solaris-tooltip-panel__container\"\n  [attr.data-appearance]=\"data.appearance\"\n  [attr.data-size]=\"data.size\"\n  [attr.data-radius]=\"data.radius\"\n  [attr.data-placement]=\"data.placement\"\n  [id]=\"data.panelId\"\n  [style.max-width]=\"data.maxWidth\"\n>\n  @if (data.arrow) {\n    <div class=\"solaris-tooltip-panel__arrow {{ data.arrowClass }}\"></div>\n  }\n\n  <div class=\"solaris-tooltip-panel__content\">\n    @if (data.icon) {\n      <solaris-icon\n        [name]=\"data.icon\"\n        [decorative]=\"data.iconDecorative\"\n        class=\"solaris-tooltip-panel__icon\"\n      />\n    }\n\n    <div class=\"solaris-tooltip-panel__text\">\n      @if (data.title) {\n        <div class=\"solaris-tooltip-panel__title\">{{ data.title }}</div>\n      }\n\n      @if (data.body) {\n        <div class=\"solaris-tooltip-panel__body\">{{ data.body }}</div>\n      }\n\n      @if (data.contentTemplate) {\n        <ng-container [ngTemplateOutlet]=\"data.contentTemplate\" />\n      }\n    </div>\n  </div>\n\n  @if (data.closeable) {\n    <button\n      class=\"solaris-tooltip-panel__close\"\n      type=\"button\"\n      (click)=\"data.close()\"\n      attr.aria-label=\"{{ data.closeLabel }}\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n</div>\n"]}