@design-system-rte/angular 0.2.1 → 0.2.2

package/src/lib/components/tooltip/tooltip.directive.stories.ts

@@ -1,218 +0,0 @@
-import { TAB_KEY } from "@design-system-rte/core/constants/keyboard.constants";
-import { Meta, StoryObj } from "@storybook/angular";
-import { within, userEvent, expect, waitFor } from "@storybook/test";
-
-import { TooltipDirective } from "./tooltip.directive";
-
-const meta: Meta<TooltipDirective> = {
-  title: "Tooltip",
-  component: TooltipDirective,
-  tags: ["autodocs"],
-  argTypes: {
-    rteTooltip: {
-      control: "text",
-      defaultValue: "Tooltip Text",
-    },
-    rteTooltipPosition: {
-      control: "select",
-      options: ["auto", "top", "bottom", "left", "right"],
-      defaultValue: "top",
-    },
-    rteTooltipAlignment: {
-      control: "select",
-      options: ["start", "center", "end"],
-      defaultValue: "center",
-    },
-    rteTooltipArrow: {
-      control: "boolean",
-      defaultValue: true,
-    },
-  },
-  parameters: {
-    layout: "centered",
-  },
-};
-export default meta;
-type Story = StoryObj<TooltipDirective>;
-
-const mockHost = (tooltipDirectives: string) => `
-<div style="
-    text-decoration: underline;
-    text-decoration-color: #BF4C00;
-    text-decoration-thickness: 2px;
-    text-underline-offset: 4px;
-    color: #BF4C00;
-    font-weight: bold;
-"
-    ${tooltipDirectives}
->
-    Hover Me!
-</div>
-`;
-
-export const Default: Story = {
-  args: {
-    rteTooltip: "Tooltip",
-    rteTooltipPosition: "top",
-    rteTooltipAlignment: "center",
-    rteTooltipArrow: true,
-  },
-  render: (args) => ({
-    props: args,
-    declarations: [TooltipDirective],
-    template: mockHost(`
-            [rteTooltip]="rteTooltip"
-            [rteTooltipPosition]="rteTooltipPosition"
-            [rteTooltipAlignment]="rteTooltipAlignment"
-            [rteTooltipArrow]="rteTooltipArrow"
-        `),
-  }),
-};
-
-export const Position: Story = {
-  args: Default.args,
-  render: (args) => ({
-    props: args,
-    declarations: [TooltipDirective],
-    template: `
-        <div style="display: flex; flex-direction: column; align-items: center; gap: 16px;">
-            ${mockHost(`
-                rteTooltipPosition="top"
-                [rteTooltip]="rteTooltip"
-                [rteTooltipAlignment]="rteTooltipAlignment"
-                [rteTooltipArrow]="rteTooltipArrow"
-            `)}
-            ${mockHost(`
-                rteTooltipPosition="bottom"
-                [rteTooltip]="rteTooltip"
-                [rteTooltipAlignment]="rteTooltipAlignment"
-                [rteTooltipArrow]="rteTooltipArrow"
-            `)}
-            ${mockHost(`
-                rteTooltipPosition="left"
-                [rteTooltip]="rteTooltip"
-                [rteTooltipAlignment]="rteTooltipAlignment"
-                [rteTooltipArrow]="rteTooltipArrow"
-            `)}
-            ${mockHost(`
-                rteTooltipPosition="right"
-                [rteTooltip]="rteTooltip"
-                [rteTooltipAlignment]="rteTooltipAlignment"
-                [rteTooltipArrow]="rteTooltipArrow"
-            `)}
-        </div>
-        `,
-  }),
-};
-
-export const Alignment: Story = {
-  args: Default.args,
-  render: (args) => ({
-    props: args,
-    declarations: [TooltipDirective],
-    template: `
-        <div style="display: flex; flex-direction: column; align-items: center; gap: 16px;">
-            ${mockHost(`
-                rteTooltipAlignment="start"
-                [rteTooltipPosition]="rteTooltipPosition"
-                [rteTooltip]="rteTooltip"
-                [rteTooltipArrow]="rteTooltipArrow"
-            `)}
-            ${mockHost(`
-                rteTooltipAlignment="center"
-                [rteTooltipPosition]="rteTooltipPosition"
-                [rteTooltip]="rteTooltip"
-                [rteTooltipArrow]="rteTooltipArrow"
-            `)}
-            ${mockHost(`
-                rteTooltipAlignment="end"
-                [rteTooltipPosition]="rteTooltipPosition"
-                [rteTooltip]="rteTooltip"
-                [rteTooltipArrow]="rteTooltipArrow"
-            `)}
-        </div>
-        `,
-  }),
-};
-
-export const Arrow: Story = {
-  args: Default.args,
-  render: (args) => ({
-    props: args,
-    declarations: [TooltipDirective],
-    template: `
-        <div style="display: flex; gap: 8;">
-            ${mockHost(`
-                [rteTooltipArrow]="true"
-                [rteTooltipPosition]="rteTooltipPosition"
-                [rteTooltip]="rteTooltip"
-            `)}
-            ${mockHost(`
-                [rteTooltipArrow]="false"
-                [rteTooltipPosition]="rteTooltipPosition"
-                [rteTooltip]="rteTooltip"
-            `)}
-        </div>
-        `,
-  }),
-};
-
-export const AutoPlacement: Story = {
-  args: Default.args,
-  render: (args) => ({
-    props: args,
-    declarations: [TooltipDirective],
-    template: `
-        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
-            <div style="display: flex; align-items: flex-start; justify-content: flex-start; gap: 8px; border: 1px solid red; width: 75px; height: 250px;">
-                ${mockHost(`
-                    rteTooltipPosition="auto"
-                    [rteTooltip]="rteTooltip"
-                `)}
-            </div>
-
-            <div style="display: flex; align-items: center; justify-content: flex-start; gap: 8px; border: 1px solid red; width: 250px; height: 50px;">
-                ${mockHost(`
-                    rteTooltipPosition="auto"
-                    [rteTooltip]="rteTooltip"
-                `)}
-            </div>
-
-            <div style="display: flex; align-items: flex-end; justify-content: flex-end; gap: 8px; border: 1px solid red; width: 75px; height: 250px;">
-                ${mockHost(`
-                    rteTooltipPosition="auto"
-                    [rteTooltip]="rteTooltip"
-                `)}
-            </div>
-
-            <div style="display: flex; align-items: center; justify-content: flex-end; gap: 8px; border: 1px solid red; width: 250px; height: 50px;">
-                ${mockHost(`
-                    rteTooltipPosition="auto"
-                    [rteTooltip]="rteTooltip"
-                `)}
-            </div>
-        </div>
-        `,
-  }),
-};
-
-export const KeyboardInteraction: Story = {
-  args: Default.args,
-  render: (args) => ({
-    props: args,
-    declarations: [TooltipDirective],
-    template: `
-        <div style="display: flex; gap: 8px;">
-            ${mockHost(`[rteTooltip]="rteTooltip"`)}
-        </div>
-        `,
-  }),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const tooltipHost = canvas.getByText("Hover Me!");
-    await userEvent.keyboard(TAB_KEY);
-    const tooltip = await canvas.findByRole("tooltip");
-    expect(tooltipHost).toHaveFocus();
-    await waitFor(() => expect(tooltip).toBeVisible());
-  },
-};

package/src/lib/components/tooltip/tooltip.directive.ts

@@ -1,187 +0,0 @@
-import {
-  ChangeDetectorRef,
-  ComponentRef,
-  Directive,
-  ElementRef,
-  HostListener,
-  inject,
-  input,
-  Renderer2,
-  ViewContainerRef,
-} from "@angular/core";
-import { getAutoPlacement } from "@design-system-rte/core/components/utils/auto-placement";
-
-import { TooltipComponent } from "./tooltip.component";
-
-interface TooltipXBound {
-  position: "left" | "right";
-  offset: number;
-}
-
-interface TooltipYBound {
-  position: "top" | "bottom";
-  offset: number;
-}
-
-interface TooltipBounds {
-  x: TooltipXBound;
-  y: TooltipYBound;
-}
-
-const TOOLTIP_GAP = 8;
-
-@Directive({
-  selector: "[rteTooltip]",
-  standalone: true,
-})
-export class TooltipDirective {
-  readonly rteTooltip = input.required<string>();
-  readonly rteTooltipPosition = input("auto");
-  readonly rteTooltipAlignment = input("center");
-  readonly rteTooltipArrow = input(true);
-
-  private tooltipRef: ComponentRef<TooltipComponent> | null = null;
-  private hostElement: HTMLElement;
-
-  private elementRef = inject(ElementRef);
-  private viewContainerRef = inject(ViewContainerRef);
-  private renderer = inject(Renderer2);
-  private cdr = inject(ChangeDetectorRef);
-
-  @HostListener("mouseenter")
-  onMouseEnter(): void {
-    this.showTooltip();
-  }
-
-  @HostListener("mouseleave")
-  onMouseLeave(): void {
-    this.hideTooltip();
-  }
-
-  @HostListener("focus")
-  onFocus(): void {
-    this.showTooltip();
-  }
-
-  @HostListener("blur")
-  onBlur(): void {
-    this.hideTooltip();
-  }
-
-  constructor() {
-    this.hostElement = this.elementRef.nativeElement;
-    this.hostElement.setAttribute("tabindex", "0");
-  }
-
-  showTooltip(): void {
-    if (this.tooltipRef) {
-      this.tooltipRef.destroy();
-    }
-
-    this.tooltipRef = this.viewContainerRef.createComponent(TooltipComponent);
-    this.assignDirectiveToComponent();
-    this.appendComponentToHost();
-    this.cdr.detectChanges();
-
-    if (this.tooltipRef) {
-      const tooltipElement = this.tooltipRef.location.nativeElement;
-      this.renderer.setStyle(tooltipElement, "opacity", "0");
-      this.positionTooltip();
-
-      this.renderer.setStyle(tooltipElement, "opacity", "1");
-    }
-  }
-
-  private assignDirectiveToComponent(): void {
-    if (this.tooltipRef) {
-      const tooltipElement = this.tooltipRef.location.nativeElement;
-      const position =
-        this.rteTooltipPosition() === "auto"
-          ? getAutoPlacement(this.hostElement, tooltipElement, "top")
-          : this.rteTooltipPosition();
-
-      this.tooltipRef.setInput("label", this.rteTooltip());
-      this.tooltipRef.setInput("position", position);
-      this.tooltipRef.setInput("alignment", this.rteTooltipAlignment());
-      this.tooltipRef.setInput("arrow", this.rteTooltipArrow());
-    }
-  }
-
-  private appendComponentToHost(): void {
-    if (this.tooltipRef) {
-      this.renderer.appendChild(this.elementRef.nativeElement, this.tooltipRef.location.nativeElement);
-    }
-  }
-
-  private positionTooltip(): void {
-    if (this.tooltipRef) {
-      const tooltipElement = this.tooltipRef.location.nativeElement;
-
-      const bounds = this.getTooltipPosition(this.hostElement, this.tooltipRef);
-
-      this.renderer.setStyle(this.hostElement, "position", "relative");
-
-      this.renderer.setStyle(tooltipElement, bounds.x.position, `${bounds.x.offset}px`);
-      this.renderer.setStyle(tooltipElement, bounds.y.position, `${bounds.y.offset}px`);
-    }
-  }
-
-  private getTooltipPosition(host: HTMLElement, tooltip: ComponentRef<TooltipComponent>): TooltipBounds {
-    return {
-      x: this.getTooltipXBound(host, tooltip),
-      y: this.getTooltipYBound(host, tooltip),
-    };
-  }
-
-  private getTooltipXBound(host: HTMLElement, tooltip: ComponentRef<TooltipComponent>): TooltipXBound {
-    return {
-      position: tooltip.instance.position() === "right" ? "right" : "left",
-      offset: this.getTooltipXOffset(host, tooltip),
-    };
-  }
-
-  private getTooltipXOffset(host: HTMLElement, tooltip: ComponentRef<TooltipComponent>): number {
-    const hostRect = host.getBoundingClientRect();
-    if (tooltip.instance.position() === "left") {
-      return -tooltip.location.nativeElement.querySelector(".tooltip").offsetWidth - TOOLTIP_GAP;
-    }
-    if (tooltip.instance.position() === "right") {
-      return -TOOLTIP_GAP;
-    }
-    return hostRect.width / 2;
-  }
-
-  private getTooltipYBound(host: HTMLElement, tooltip: ComponentRef<TooltipComponent>): TooltipYBound {
-    return {
-      position: tooltip.instance.position() === "bottom" ? "bottom" : "top",
-      offset: this.getTooltipYOffset(host, tooltip),
-    };
-  }
-
-  private getTooltipYOffset(host: HTMLElement, tooltip: ComponentRef<TooltipComponent>): number {
-    const hostRect = host.getBoundingClientRect();
-
-    if (tooltip.instance.position() === "top") {
-      return -tooltip.location.nativeElement.querySelector(".tooltip").offsetHeight - TOOLTIP_GAP;
-    }
-    if (tooltip.instance.position() === "bottom") {
-      return -TOOLTIP_GAP;
-    }
-    return hostRect.height / 2;
-  }
-
-  private hideTooltip(): void {
-    if (this.tooltipRef) {
-      const tooltipElement = this.tooltipRef.location.nativeElement;
-
-      this.renderer.setStyle(tooltipElement, "opacity", "0");
-
-      setTimeout(() => {
-        if (this.tooltipRef) {
-          this.tooltipRef.destroy();
-          this.tooltipRef = null;
-        }
-      }, 200);
-    }
-  }
-}

package/tsconfig.lib.json

@@ -1,22 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  },
-  "exclude": [
-    "**/*.spec.ts"
-  ],
-  "files": ["typings.d.ts"],
-  "include": [
-    "src/**/*.ts",
-    "src/types.d.ts"
-  ]
-}

package/tsconfig.lib.prod.json

@@ -1,10 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,14 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}