@unipin/angular-applet 18.9.7 → 21.0.1

package/fesm2022/unipin-angular-applet-tabs.mjs

@@ -0,0 +1,142 @@
+import * as i0 from '@angular/core';
+import { input, signal, computed, effect, Component, Directive } from '@angular/core';
+import { up } from '@unipin/angular-applet/common';
+import { cva } from 'class-variance-authority';
+
+const tabsVariants = cva(`
+    flex mb-2 w-max p-1 rounded-lg
+    [&>.tabs-trigger]:px-2.5 [&>.tabs-trigger]:py-1.5 [&>.tabs-trigger]:text-sm [&>.tabs-trigger]:transition-colors [&>.tabs-trigger]:cursor-pointer
+  `, {
+    variants: {
+        variant: {
+            default: `
+          bg-gray-100 
+          [&>.tabs-trigger]:data-[state=active]:bg-white [&>.tabs-trigger]:data-[state=active]:shadow-lg [&>.tabs-trigger]:data-[state=active]:rounded-lg [&>.tabs-trigger]:hover:opacity-[60%]
+        `,
+            underline: `
+          bg-none 
+          [&>.tabs-trigger]:border-b-2 [&>.tabs-trigger]:border-transparent [&>.tabs-trigger]:hover:text-primary [&>.tabs-trigger]:text-gray-500 [&>.tabs-trigger]:data-[state=active]:border-primary [&>.tabs-trigger]:data-[state=active]:text-primary
+        `,
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+
+class UpTabsComponent {
+    constructor() {
+        this.size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.inlineStyle = input('', ...(ngDevMode ? [{ debugName: "inlineStyle", alias: 'class' }] : [{ alias: 'class' }]));
+        this.defaultActiveTab = input(null, ...(ngDevMode ? [{ debugName: "defaultActiveTab", alias: 'default' }] : [{ alias: 'default' }]));
+        this.activeTab = signal(null, ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+        this.tabsClass = computed(() => {
+            return up(tabsVariants({
+                variant: this.variant()
+            }), this.inlineStyle());
+        }, ...(ngDevMode ? [{ debugName: "tabsClass" }] : []));
+        effect(() => {
+            if (this.activeTab() === null &&
+                this.defaultActiveTab()) {
+                this.activeTab.set(this.defaultActiveTab());
+            }
+        });
+    }
+    setActive(tab) {
+        this.activeTab.set(tab);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: UpTabsComponent, isStandalone: true, selector: "up-tabs", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, inlineStyle: { classPropertyName: "inlineStyle", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, defaultActiveTab: { classPropertyName: "defaultActiveTab", publicName: "default", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div [class]="tabsClass()">
+      <ng-content select="[upTabsTrigger]" />
+    </div>
+
+    <ng-content select="[upTabsContent]" />
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpTabsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'up-tabs',
+                    template: `
+    <div [class]="tabsClass()">
+      <ng-content select="[upTabsTrigger]" />
+    </div>
+
+    <ng-content select="[upTabsContent]" />
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], inlineStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], defaultActiveTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "default", required: false }] }] } });
+
+class UpTabsContentDirective {
+    constructor(parent) {
+        this.parent = parent;
+        this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.inlineStyle = input('', ...(ngDevMode ? [{ debugName: "inlineStyle", alias: 'class' }] : [{ alias: 'class' }]));
+        this.isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+        this.tabsContentClass = computed(() => {
+            return up('block', this.inlineStyle());
+        }, ...(ngDevMode ? [{ debugName: "tabsContentClass" }] : []));
+        effect(() => {
+            if (!this.parent) {
+                return;
+            }
+            this.isActive.set(this.parent.activeTab() === this.value());
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpTabsContentDirective, deps: [{ token: UpTabsComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0", type: UpTabsContentDirective, isStandalone: true, selector: "[upTabsContent]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, inlineStyle: { classPropertyName: "inlineStyle", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "hidden": "!isActive()", "class": "tabsContentClass()" } }, exportAs: ["upTabsContent"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpTabsContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    exportAs: 'upTabsContent',
+                    selector: '[upTabsContent]',
+                    host: {
+                        '[hidden]': '!isActive()',
+                        '[class]': 'tabsContentClass()',
+                    }
+                }]
+        }], ctorParameters: () => [{ type: UpTabsComponent }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], inlineStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class UpTabsTriggerDirective {
+    constructor(parent) {
+        this.parent = parent;
+        this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+        this.tabsTriggerClass = computed(() => up('tabs-trigger'), ...(ngDevMode ? [{ debugName: "tabsTriggerClass" }] : []));
+        effect(() => {
+            if (!this.parent)
+                return;
+            this.isActive.set(this.parent.activeTab() === this.value());
+        });
+    }
+    activate() {
+        this.parent?.setActive(this.value());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpTabsTriggerDirective, deps: [{ token: UpTabsComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0", type: UpTabsTriggerDirective, isStandalone: true, selector: "[upTabsTrigger]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "activate()" }, properties: { "class": "tabsTriggerClass()", "attr.data-state": "isActive()? 'active' : 'inactive'" } }, exportAs: ["upTabsTrigger"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpTabsTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    exportAs: 'upTabsTrigger',
+                    selector: '[upTabsTrigger]',
+                    host: {
+                        '(click)': 'activate()',
+                        '[class]': 'tabsTriggerClass()',
+                        '[attr.data-state]': `isActive()? 'active' : 'inactive'`,
+                    }
+                }]
+        }], ctorParameters: () => [{ type: UpTabsComponent }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UpTabsComponent, UpTabsContentDirective, UpTabsTriggerDirective };
+//# sourceMappingURL=unipin-angular-applet-tabs.mjs.map

package/fesm2022/unipin-angular-applet-tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"unipin-angular-applet-tabs.mjs","sources":["../../../projects/unipin-angular/tabs/variants/tabs.variant.ts","../../../projects/unipin-angular/tabs/components/tabs.component.ts","../../../projects/unipin-angular/tabs/directives/tabs-content.directive.ts","../../../projects/unipin-angular/tabs/directives/tabs-trigger.directive.ts","../../../projects/unipin-angular/tabs/unipin-angular-applet-tabs.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const tabsVariants = cva(\n  `\n    flex mb-2 w-max p-1 rounded-lg\n    [&>.tabs-trigger]:px-2.5 [&>.tabs-trigger]:py-1.5 [&>.tabs-trigger]:text-sm [&>.tabs-trigger]:transition-colors [&>.tabs-trigger]:cursor-pointer\n  `,\n  {\n    variants: {\n      variant: {\n        default: `\n          bg-gray-100 \n          [&>.tabs-trigger]:data-[state=active]:bg-white [&>.tabs-trigger]:data-[state=active]:shadow-lg [&>.tabs-trigger]:data-[state=active]:rounded-lg [&>.tabs-trigger]:hover:opacity-[60%]\n        `,\n        underline: `\n          bg-none \n          [&>.tabs-trigger]:border-b-2 [&>.tabs-trigger]:border-transparent [&>.tabs-trigger]:hover:text-primary [&>.tabs-trigger]:text-gray-500 [&>.tabs-trigger]:data-[state=active]:border-primary [&>.tabs-trigger]:data-[state=active]:text-primary\n        `,\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n);\n\nexport type TabsVariants = VariantProps<typeof tabsVariants>;\n","import { Component, computed, effect, input, InputSignal, signal, WritableSignal } from '@angular/core';\nimport type { ClassValue } from 'clsx';\nimport { up } from '@unipin/angular-applet/common';\nimport { tabsVariants } from '../variants/tabs.variant';\n\n@Component({\n  standalone: true,\n  selector: 'up-tabs',\n  template: `\n    <div [class]=\"tabsClass()\">\n      <ng-content select=\"[upTabsTrigger]\" />\n    </div>\n\n    <ng-content select=\"[upTabsContent]\" />\n  `,\n})\nexport class UpTabsComponent {\n\n  public readonly size: InputSignal<'sm' | 'md' | 'lg'> = input<'sm' | 'md' | 'lg'>('md');\n  public readonly variant: InputSignal<'underline' | 'default'> = input<'underline' | 'default'>('default');\n\n  public readonly inlineStyle: InputSignal<ClassValue> = input<ClassValue>('', { alias: 'class' });\n  public readonly defaultActiveTab: InputSignal<string | null> = input<string | null>(null, { alias: 'default' });\n\n  public readonly activeTab: WritableSignal<string | null> = signal<string | null>(null);\n  public readonly tabsClass = computed(\n    () => {\n      return up(\n        tabsVariants(\n          {\n            variant: this.variant()\n          }\n        ),\n        this.inlineStyle()\n      );\n    }\n  );\n\n  constructor() {\n    effect(\n      () => {\n        if (\n          this.activeTab() === null && \n          this.defaultActiveTab()\n        ) {\n          this.activeTab.set(this.defaultActiveTab());\n        }\n      }\n    );\n  }\n\n  public setActive(tab: string): void{\n    this.activeTab.set(tab);\n  }\n}\n","import { computed, Directive, effect, input, InputSignal, signal, WritableSignal } from '@angular/core';\nimport { ClassValue } from 'clsx';\nimport { up } from '@unipin/angular-applet/common';\nimport { UpTabsComponent } from '../components/tabs.component';\n\n@Directive({\n  standalone: true,\n  exportAs: 'upTabsContent',\n  selector: '[upTabsContent]',\n  host: {\n    '[hidden]': '!isActive()',\n    '[class]': 'tabsContentClass()',\n  }\n})\nexport class UpTabsContentDirective {\n\n  public readonly value: InputSignal<string> = input.required<string>();\n  public readonly inlineStyle: InputSignal<ClassValue> = input<ClassValue>('', { alias: 'class' });\n\n  public readonly isActive: WritableSignal<boolean> = signal(false);\n  public readonly tabsContentClass = computed(\n    () => {\n      return up('block', this.inlineStyle());\n    }\n  );\n\n  constructor(\n    protected readonly parent: UpTabsComponent\n  ) {\n    effect(\n      () => {\n        if (!this.parent) {\n          return;\n        }\n        \n        this.isActive.set(\n          this.parent.activeTab() === this.value()\n        );\n      }\n    );\n  }\n}\n","import { computed, Directive, effect, input, signal } from '@angular/core';\nimport { up } from '@unipin/angular-applet/common';\nimport { UpTabsComponent } from '../components/tabs.component';\n\n@Directive({\n  standalone: true,\n  exportAs: 'upTabsTrigger',\n  selector: '[upTabsTrigger]',\n  host: {\n    '(click)': 'activate()',\n    '[class]': 'tabsTriggerClass()',\n    '[attr.data-state]': `isActive()? 'active' : 'inactive'`,\n  }\n})\nexport class UpTabsTriggerDirective {\n  \n  public readonly value = input.required<string>();\n  \n  public readonly isActive = signal(false);\n  public readonly tabsTriggerClass = computed(() => up('tabs-trigger'));\n\n  constructor(\n    protected readonly parent: UpTabsComponent\n  ) {\n    effect(\n      () => {\n        if (!this.parent) return;\n        this.isActive.set(this.parent.activeTab() === this.value());\n      }\n    );\n  }\n\n  public activate(): void{\n    this.parent?.setActive(this.value());\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.UpTabsComponent"],"mappings":"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"}

package/fesm2022/unipin-angular-applet-tooltip.mjs

@@ -0,0 +1,118 @@
+import * as i0 from '@angular/core';
+import { input, Inject, Directive } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+class UpTooltipDirective {
+    constructor(doc, renderer, el) {
+        this.doc = doc;
+        this.renderer = renderer;
+        this.el = el;
+        /**
+         * Input variable specifying the text displayed in the tooltip helper, which provides a hint to the user about the purpose of the element.
+         * @type {InputSignal<string>}
+         * @default ''
+         */
+        this.toolTipText = input.required(...(ngDevMode ? [{ debugName: "toolTipText" }] : []));
+        /**
+         * Input variable specifying the position of the tooltip relative to the host element.
+         * @type {InputSignal<string>}
+         * @default 'top'
+         */
+        this.position = input('top', ...(ngDevMode ? [{ debugName: "position" }] : []));
+        this._winListener = [];
+        this._hostListener = [];
+        this._tooltipElement = null;
+    }
+    ngOnInit() {
+        this._hostListener.push(this.renderer.listen(this.el.nativeElement, 'mouseenter', () => {
+            if (this._tooltipElement) {
+                this.renderer.removeClass(this._tooltipElement, 'invisible');
+                return;
+            }
+            this._tooltipElement = this.renderer.createElement('span');
+            this.renderer.setAttribute(this._tooltipElement, 'class', 'fixed z-[10000] text-white max-w-xs text-xs w-max whitespace-normal bg-[#2D3336] rounded-lg px-2 py-1 break-words pointer-events-none');
+            this.renderer.appendChild(this._tooltipElement, this.renderer.createText(this.toolTipText()));
+            this.renderer.appendChild(this.doc.body, this._tooltipElement);
+            this.positionTooltip();
+            this._winListener.push(this.renderer.listen('window', 'scroll', () => this.positionTooltip()), this.renderer.listen('window', 'resize', () => this.positionTooltip()));
+        }), this.renderer.listen(this.el.nativeElement, 'mouseleave', () => {
+            this.hideTooltip();
+        }));
+    }
+    ngOnDestroy() {
+        this.hideTooltip();
+        for (const off of this._hostListener) {
+            try {
+                off();
+            }
+            catch { }
+        }
+        this._hostListener.length = 0;
+        for (const off of this._winListener) {
+            try {
+                off();
+            }
+            catch { }
+        }
+        this._winListener.length = 0;
+    }
+    hideTooltip() {
+        if (this._tooltipElement) {
+            this.renderer.addClass(this._tooltipElement, 'invisible');
+        }
+    }
+    positionTooltip() {
+        if (!this._tooltipElement) {
+            return;
+        }
+        const hostRect = this.el.nativeElement.getBoundingClientRect();
+        const tooltipEl = this._tooltipElement;
+        const tooltipRect = tooltipEl.getBoundingClientRect();
+        const gap = 8;
+        let top = 0;
+        let left = 0;
+        switch (this.position()) {
+            case 'top':
+                top = hostRect.top - tooltipRect.height - gap;
+                left = hostRect.left + (hostRect.width - tooltipRect.width) / 2;
+                break;
+            case 'left':
+                top = hostRect.top + (hostRect.height - tooltipRect.height) / 2;
+                left = hostRect.left - tooltipRect.width - gap;
+                break;
+            case 'right':
+                top = hostRect.top + (hostRect.height - tooltipRect.height) / 2;
+                left = hostRect.right + gap;
+                break;
+            default:
+                top = hostRect.bottom + gap;
+                left = hostRect.left + (hostRect.width - tooltipRect.width) / 2;
+                break;
+        }
+        const margin = 4;
+        left = Math.max(margin, Math.min(left, this.doc.defaultView?.innerWidth ?? 0 - tooltipRect.width - margin));
+        top = Math.max(margin, Math.min(top, this.doc.defaultView?.innerHeight ?? 0 - tooltipRect.height - margin));
+        this.renderer.setStyle(tooltipEl, 'top', `${Math.round(top)}px`);
+        this.renderer.setStyle(tooltipEl, 'left', `${Math.round(left)}px`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpTooltipDirective, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0", type: UpTooltipDirective, isStandalone: true, selector: "[upTooltip]", inputs: { toolTipText: { classPropertyName: "toolTipText", publicName: "toolTipText", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["upTooltip"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    exportAs: 'upTooltip',
+                    selector: '[upTooltip]',
+                }]
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { toolTipText: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolTipText", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UpTooltipDirective };
+//# sourceMappingURL=unipin-angular-applet-tooltip.mjs.map

package/fesm2022/unipin-angular-applet-tooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"unipin-angular-applet-tooltip.mjs","sources":["../../../projects/unipin-angular/tooltip/tooltip.directive.ts","../../../projects/unipin-angular/tooltip/unipin-angular-applet-tooltip.ts"],"sourcesContent":["import { Directive, ElementRef, Renderer2, OnInit, OnDestroy, input, Inject } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\n\n@Directive({\n  standalone: true,\n  exportAs: 'upTooltip',\n  selector: '[upTooltip]',\n})\nexport class UpTooltipDirective implements OnInit, OnDestroy {\n\n  /**\n   * Input variable specifying the text displayed in the tooltip helper, which provides a hint to the user about the purpose of the element.\n   * @type {InputSignal<string>}\n   * @default ''\n   */\n  public readonly toolTipText = input.required<string>();\n  \n  /**\n   * Input variable specifying the position of the tooltip relative to the host element.\n   * @type {InputSignal<string>}\n   * @default 'top'\n   */\n  public readonly position = input<'top' | 'right' | 'bottom' | 'left'>('top');\n  \n  protected _winListener: Array<() => void> = [];\n  protected _hostListener: Array<() => void> = [];\n  protected _tooltipElement: HTMLElement | null = null;\n\n  constructor(\n    @Inject(DOCUMENT) protected readonly doc: Document,\n    protected readonly renderer: Renderer2,\n    protected readonly el: ElementRef<HTMLElement>,\n  ) {}\n\n  public ngOnInit(): void{\n    this._hostListener.push(\n      this.renderer.listen(\n        this.el.nativeElement, \n        'mouseenter', \n        () => {\n          if (this._tooltipElement) {\n            this.renderer.removeClass(this._tooltipElement, 'invisible');\n            return;\n          }\n          this._tooltipElement = this.renderer.createElement('span');\n          \n          this.renderer.setAttribute(\n            this._tooltipElement, \n            'class', \n            'fixed z-[10000] text-white max-w-xs text-xs w-max whitespace-normal bg-[#2D3336] rounded-lg px-2 py-1 break-words pointer-events-none'\n          );\n\n          this.renderer.appendChild(\n            this._tooltipElement, \n            this.renderer.createText(\n              this.toolTipText()\n            )\n          );\n          this.renderer.appendChild(this.doc.body, this._tooltipElement);\n  \n          this.positionTooltip();        \n          this._winListener.push(\n            this.renderer.listen('window', 'scroll', () => this.positionTooltip()),\n            this.renderer.listen('window', 'resize', () => this.positionTooltip())\n          );\n        }\n      ),\n      \n      this.renderer.listen(\n        this.el.nativeElement, \n        'mouseleave', \n        () => {\n          this.hideTooltip();\n        }\n      )\n    );\n  }\n\n  public ngOnDestroy(): void{\n    this.hideTooltip();\n\n    for (const off of this._hostListener) {\n      try { \n        off(); \n      } catch {}\n    }\n    this._hostListener.length = 0;\n\n    for (const off of this._winListener) {\n      try { \n        off(); \n      } catch {}\n    }\n    this._winListener.length = 0;\n  }\n\n  protected hideTooltip(): void{\n    if (this._tooltipElement) {\n      this.renderer.addClass(this._tooltipElement, 'invisible');\n    }\n  }\n\n  protected positionTooltip(): void{\n    if (!this._tooltipElement) {\n      return;\n    }\n\n    const hostRect = this.el.nativeElement.getBoundingClientRect();\n    const tooltipEl = this._tooltipElement as HTMLElement;\n    const tooltipRect = tooltipEl.getBoundingClientRect();\n\n    const gap = 8;\n    let top = 0;\n    let left = 0;\n\n    switch (this.position()) {\n      case 'top':\n        top = hostRect.top - tooltipRect.height - gap;\n        left = hostRect.left + (hostRect.width - tooltipRect.width) / 2;\n        break;\n\n      case 'left':\n        top = hostRect.top + (hostRect.height - tooltipRect.height) / 2;\n        left = hostRect.left - tooltipRect.width - gap;\n        break;\n\n      case 'right':\n        top = hostRect.top + (hostRect.height - tooltipRect.height) / 2;\n        left = hostRect.right + gap;\n        break;\n\n      default:\n        top = hostRect.bottom + gap;\n        left = hostRect.left + (hostRect.width - tooltipRect.width) / 2;\n        break;\n    }\n\n    const margin = 4;\n    left = Math.max(\n      margin, \n      Math.min(\n        left, \n        this.doc.defaultView?.innerWidth?? 0 - tooltipRect.width - margin\n      )\n    );\n    \n    top = Math.max(\n      margin, \n      Math.min(\n        top, \n        this.doc.defaultView?.innerHeight?? 0 - tooltipRect.height - margin\n      )\n    );\n    this.renderer.setStyle(tooltipEl, 'top', `${ Math.round(top) }px`);\n    this.renderer.setStyle(tooltipEl, 'left', `${ Math.round(left) }px`);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAQa,kBAAkB,CAAA;AAoB7B,IAAA,WAAA,CACuC,GAAa,EAC/B,QAAmB,EACnB,EAA2B,EAAA;QAFT,IAAA,CAAA,GAAG,GAAH,GAAG;QACrB,IAAA,CAAA,QAAQ,GAAR,QAAQ;QACR,IAAA,CAAA,EAAE,GAAF,EAAE;AArBvB;;;;AAIG;AACa,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAC,QAAQ,sDAAU;AAEtD;;;;AAIG;AACa,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAsC,KAAK,oDAAC;QAElE,IAAA,CAAA,YAAY,GAAsB,EAAE;QACpC,IAAA,CAAA,aAAa,GAAsB,EAAE;QACrC,IAAA,CAAA,eAAe,GAAuB,IAAI;IAMjD;IAEI,QAAQ,GAAA;QACb,IAAI,CAAC,aAAa,CAAC,IAAI,CACrB,IAAI,CAAC,QAAQ,CAAC,MAAM,CAClB,IAAI,CAAC,EAAE,CAAC,aAAa,EACrB,YAAY,EACZ,MAAK;AACH,YAAA,IAAI,IAAI,CAAC,eAAe,EAAE;gBACxB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,eAAe,EAAE,WAAW,CAAC;gBAC5D;YACF;YACA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC;AAE1D,YAAA,IAAI,CAAC,QAAQ,CAAC,YAAY,CACxB,IAAI,CAAC,eAAe,EACpB,OAAO,EACP,uIAAuI,CACxI;YAED,IAAI,CAAC,QAAQ,CAAC,WAAW,CACvB,IAAI,CAAC,eAAe,EACpB,IAAI,CAAC,QAAQ,CAAC,UAAU,CACtB,IAAI,CAAC,WAAW,EAAE,CACnB,CACF;AACD,YAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC;YAE9D,IAAI,CAAC,eAAe,EAAE;AACtB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CACpB,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC,EACtE,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC,CACvE;AACH,QAAA,CAAC,CACF,EAED,IAAI,CAAC,QAAQ,CAAC,MAAM,CAClB,IAAI,CAAC,EAAE,CAAC,aAAa,EACrB,YAAY,EACZ,MAAK;YACH,IAAI,CAAC,WAAW,EAAE;QACpB,CAAC,CACF,CACF;IACH;IAEO,WAAW,GAAA;QAChB,IAAI,CAAC,WAAW,EAAE;AAElB,QAAA,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,aAAa,EAAE;AACpC,YAAA,IAAI;AACF,gBAAA,GAAG,EAAE;YACP;YAAE,MAAM,EAAC;QACX;AACA,QAAA,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC;AAE7B,QAAA,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE;AACnC,YAAA,IAAI;AACF,gBAAA,GAAG,EAAE;YACP;YAAE,MAAM,EAAC;QACX;AACA,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;IAC9B;IAEU,WAAW,GAAA;AACnB,QAAA,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,WAAW,CAAC;QAC3D;IACF;IAEU,eAAe,GAAA;AACvB,QAAA,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YACzB;QACF;QAEA,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,EAAE;AAC9D,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,eAA8B;AACrD,QAAA,MAAM,WAAW,GAAG,SAAS,CAAC,qBAAqB,EAAE;QAErD,MAAM,GAAG,GAAG,CAAC;QACb,IAAI,GAAG,GAAG,CAAC;QACX,IAAI,IAAI,GAAG,CAAC;AAEZ,QAAA,QAAQ,IAAI,CAAC,QAAQ,EAAE;AACrB,YAAA,KAAK,KAAK;gBACR,GAAG,GAAG,QAAQ,CAAC,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,GAAG;AAC7C,gBAAA,IAAI,GAAG,QAAQ,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK,IAAI,CAAC;gBAC/D;AAEF,YAAA,KAAK,MAAM;AACT,gBAAA,GAAG,GAAG,QAAQ,CAAC,GAAG,GAAG,CAAC,QAAQ,CAAC,MAAM,GAAG,WAAW,CAAC,MAAM,IAAI,CAAC;gBAC/D,IAAI,GAAG,QAAQ,CAAC,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,GAAG;gBAC9C;AAEF,YAAA,KAAK,OAAO;AACV,gBAAA,GAAG,GAAG,QAAQ,CAAC,GAAG,GAAG,CAAC,QAAQ,CAAC,MAAM,GAAG,WAAW,CAAC,MAAM,IAAI,CAAC;AAC/D,gBAAA,IAAI,GAAG,QAAQ,CAAC,KAAK,GAAG,GAAG;gBAC3B;AAEF,YAAA;AACE,gBAAA,GAAG,GAAG,QAAQ,CAAC,MAAM,GAAG,GAAG;AAC3B,gBAAA,IAAI,GAAG,QAAQ,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK,IAAI,CAAC;gBAC/D;;QAGJ,MAAM,MAAM,GAAG,CAAC;AAChB,QAAA,IAAI,GAAG,IAAI,CAAC,GAAG,CACb,MAAM,EACN,IAAI,CAAC,GAAG,CACN,IAAI,EACJ,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,UAAU,IAAG,CAAC,GAAG,WAAW,CAAC,KAAK,GAAG,MAAM,CAClE,CACF;AAED,QAAA,GAAG,GAAG,IAAI,CAAC,GAAG,CACZ,MAAM,EACN,IAAI,CAAC,GAAG,CACN,GAAG,EACH,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,WAAW,IAAG,CAAC,GAAG,WAAW,CAAC,MAAM,GAAG,MAAM,CACpE,CACF;AACD,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,SAAS,EAAE,KAAK,EAAE,CAAA,EAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAE,CAAA,EAAA,CAAI,CAAC;AAClE,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,SAAS,EAAE,MAAM,EAAE,CAAA,EAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAE,CAAA,EAAA,CAAI,CAAC;IACtE;AAnJW,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,kBAqBnB,QAAQ,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGArBP,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAlB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAL9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,WAAW;AACrB,oBAAA,QAAQ,EAAE,aAAa;AACxB,iBAAA;;0BAsBI,MAAM;2BAAC,QAAQ;;;AC7BpB;;AAEG;;;;"}