@spicainternational/ngx-sds-components 5.1.0 → 5.2.0

package/fesm2020/spicainternational-ngx-sds-components-src-lib-tooltip.mjs

@@ -0,0 +1,205 @@
+import * as i0 from '@angular/core';
+import { Component, Directive, Input, HostListener, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class SdsTooltipComponent {
+    constructor() {
+        this.tooltip = '';
+        this.left = 0;
+        this.top = 0;
+        this.visible = false;
+        this.position = 'above';
+        this.theme = 'dark';
+    }
+    ngOnInit() { }
+}
+SdsTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SdsTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsTooltipComponent, selector: "sds-tooltip", ngImport: i0, template: "<div class=\"sds-tooltip\"\r\n    [ngClass]=\"['sds-tooltip-' + position, 'sds-tooltip-' + theme]\"\r\n    [class.sds-tooltip-visible]=\"visible\"\r\n    [style.left.px]=\"left\"\r\n    [style.top.px]=\"top\"\r\n    >\r\n    <small>\r\n        {{ tooltip }}\r\n    </small>\r\n</div>\r\n", styles: [".sds-tooltip{position:fixed;background-color:#000;border-radius:4px;color:#fff;padding:3px 6px;max-width:15rem;z-index:1070;opacity:0}.sds-tooltip:before{content:\"\";width:0;height:0;position:absolute}.sds-tooltip-visible{opacity:1;transition:opacity .3s}.sds-tooltip-light{background-color:#fff;color:#000}.sds-tooltip-light:before{border:5px solid white}.sds-tooltip-dark{background-color:#000;color:#fff}.sds-tooltip-dark:before{border:5px solid black}.sds-tooltip-below{transform:translate(-50%);margin-top:.5rem}.sds-tooltip-below:before{border-left-color:transparent;border-right-color:transparent;border-top:none;left:calc(50% - 5px);top:-5px}.sds-tooltip-above{transform:translate(-50%,calc(-100% - .5rem));margin-bottom:.5rem}.sds-tooltip-above:before{border-left-color:transparent;border-right-color:transparent;border-bottom:none;left:calc(50% - 5px);bottom:-5px}.sds-tooltip-left{transform:translate(calc(-100% - .5rem),-50%)}.sds-tooltip-left:before{border-top-color:transparent;border-bottom-color:transparent;border-right:none;right:-5px;top:calc(50% - 5px)}.sds-tooltip-right{transform:translateY(-50%);margin-left:.5rem}.sds-tooltip-right:before{border-top-color:transparent;border-bottom-color:transparent;border-left:none;left:-5px;top:calc(50% - 5px)}.sds-tooltip-dynamic{margin-left:20px}.sds-tooltip-dynamic:before{display:none}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-tooltip', template: "<div class=\"sds-tooltip\"\r\n    [ngClass]=\"['sds-tooltip-' + position, 'sds-tooltip-' + theme]\"\r\n    [class.sds-tooltip-visible]=\"visible\"\r\n    [style.left.px]=\"left\"\r\n    [style.top.px]=\"top\"\r\n    >\r\n    <small>\r\n        {{ tooltip }}\r\n    </small>\r\n</div>\r\n", styles: [".sds-tooltip{position:fixed;background-color:#000;border-radius:4px;color:#fff;padding:3px 6px;max-width:15rem;z-index:1070;opacity:0}.sds-tooltip:before{content:\"\";width:0;height:0;position:absolute}.sds-tooltip-visible{opacity:1;transition:opacity .3s}.sds-tooltip-light{background-color:#fff;color:#000}.sds-tooltip-light:before{border:5px solid white}.sds-tooltip-dark{background-color:#000;color:#fff}.sds-tooltip-dark:before{border:5px solid black}.sds-tooltip-below{transform:translate(-50%);margin-top:.5rem}.sds-tooltip-below:before{border-left-color:transparent;border-right-color:transparent;border-top:none;left:calc(50% - 5px);top:-5px}.sds-tooltip-above{transform:translate(-50%,calc(-100% - .5rem));margin-bottom:.5rem}.sds-tooltip-above:before{border-left-color:transparent;border-right-color:transparent;border-bottom:none;left:calc(50% - 5px);bottom:-5px}.sds-tooltip-left{transform:translate(calc(-100% - .5rem),-50%)}.sds-tooltip-left:before{border-top-color:transparent;border-bottom-color:transparent;border-right:none;right:-5px;top:calc(50% - 5px)}.sds-tooltip-right{transform:translateY(-50%);margin-left:.5rem}.sds-tooltip-right:before{border-top-color:transparent;border-bottom-color:transparent;border-left:none;left:-5px;top:calc(50% - 5px)}.sds-tooltip-dynamic{margin-left:20px}.sds-tooltip-dynamic:before{display:none}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
+class TooltipDirective {
+    constructor(elementRef, appRef, componentFactoryResolver, 
+    //   private viewContainerRef: ViewContainerRef,
+    injector) {
+        this.elementRef = elementRef;
+        this.appRef = appRef;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.injector = injector;
+        this.tooltip = '';
+        this.position = 'above';
+        this.theme = 'dark';
+        this.showDelay = 0;
+        this.hideDelay = 0;
+        this.componentRef = null;
+        // this.renderer2.listen('window', 'scroll', (_) => {
+        //     console.log('scroll');
+        //     this.setHideTooltipTimeout();
+        // });
+    }
+    onMouseEnter() {
+        this.initializeTooltip();
+    }
+    onMouseLeave() {
+        this.setHideTooltipTimeout();
+    }
+    // @HostListener("window:scroll", [])
+    // onWindowScroll() {
+    //     console.log('scroll');
+    //     this.setHideTooltipTimeout();
+    // }
+    // @HostListener('window:scroll') onScroll(e: Event): void {
+    //     console.log((e.target as Element).scrollTop);
+    //  }
+    //  @HostListener('scroll') onScrollHost(e: Event): void {
+    //     console.log((e.target as Element).scrollTop);
+    //  }
+    onMouseMove($event) {
+        if (this.componentRef !== null && this.position === 'dynamic') {
+            this.componentRef.instance.left = $event.clientX;
+            this.componentRef.instance.top = $event.clientY;
+            this.componentRef.instance.tooltip = this.tooltip;
+        }
+    }
+    onTouchStart($event) {
+        $event.preventDefault();
+        window.clearTimeout(this.touchTimeout);
+        this.touchTimeout = window.setTimeout(this.initializeTooltip.bind(this), 500);
+    }
+    onTouchEnd() {
+        window.clearTimeout(this.touchTimeout);
+        this.setHideTooltipTimeout();
+    }
+    initializeTooltip() {
+        if (this.componentRef === null) {
+            window.clearInterval(this.hideDelay);
+            const componentFactory = this.componentFactoryResolver.resolveComponentFactory(SdsTooltipComponent);
+            this.componentRef = componentFactory.create(this.injector);
+            this.appRef.attachView(this.componentRef.hostView);
+            const [tooltipDOMElement] = this.componentRef.hostView.rootNodes;
+            this.setTooltipComponentProperties();
+            document.body.appendChild(tooltipDOMElement);
+            this.showTimeout = window.setTimeout(this.showTooltip.bind(this), this.showDelay);
+        }
+    }
+    setTooltipComponentProperties() {
+        if (this.componentRef !== null) {
+            this.componentRef.instance.tooltip = this.tooltip;
+            this.componentRef.instance.position = this.position;
+            this.componentRef.instance.theme = this.theme;
+            const { left, right, top, bottom } = this.elementRef.nativeElement.getBoundingClientRect();
+            switch (this.position) {
+                case 'below': {
+                    this.componentRef.instance.left = Math.round((right - left) / 2 + left);
+                    this.componentRef.instance.top = Math.round(bottom);
+                    break;
+                }
+                case 'above': {
+                    this.componentRef.instance.left = Math.round((right - left) / 2 + left);
+                    this.componentRef.instance.top = Math.round(top);
+                    break;
+                }
+                case 'right': {
+                    this.componentRef.instance.left = Math.round(right);
+                    this.componentRef.instance.top = Math.round(top + (bottom - top) / 2);
+                    break;
+                }
+                case 'left': {
+                    this.componentRef.instance.left = Math.round(left);
+                    this.componentRef.instance.top = Math.round(top + (bottom - top) / 2);
+                    break;
+                }
+                default: {
+                    break;
+                }
+            }
+        }
+    }
+    showTooltip() {
+        if (this.componentRef !== null) {
+            this.componentRef.instance.visible = true;
+        }
+    }
+    setHideTooltipTimeout() {
+        this.hideTimeout = window.setTimeout(this.destroy.bind(this), this.hideDelay);
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    destroy() {
+        if (this.componentRef !== null) {
+            window.clearInterval(this.showTimeout);
+            window.clearInterval(this.hideDelay);
+            this.appRef.detachView(this.componentRef.hostView);
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+    }
+}
+TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.1", type: TooltipDirective, selector: "[sdsTooltip]", inputs: { tooltip: "tooltip", position: "position", theme: "theme", showDelay: "showDelay", hideDelay: "hideDelay" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "mousemove": "onMouseMove($event)", "touchstart": "onTouchStart($event)", "touchend": "onTouchEnd()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sdsTooltip]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }]; }, propDecorators: { tooltip: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], showDelay: [{
+                type: Input
+            }], hideDelay: [{
+                type: Input
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onMouseMove: [{
+                type: HostListener,
+                args: ['mousemove', ['$event']]
+            }], onTouchStart: [{
+                type: HostListener,
+                args: ['touchstart', ['$event']]
+            }], onTouchEnd: [{
+                type: HostListener,
+                args: ['touchend']
+            }] } });
+
+class SdsTooltipModule {
+}
+SdsTooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SdsTooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTooltipModule, declarations: [SdsTooltipComponent,
+        TooltipDirective], imports: [CommonModule], exports: [TooltipDirective] });
+SdsTooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTooltipModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTooltipModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SdsTooltipComponent,
+                        TooltipDirective
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        TooltipDirective
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdsTooltipModule, TooltipDirective };
+//# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-tooltip.mjs.map

package/fesm2020/spicainternational-ngx-sds-components-src-lib-tooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-tooltip.mjs","sources":["../../../projects/ngx-sds-components/src/lib/tooltip/components/tooltip.component.ts","../../../projects/ngx-sds-components/src/lib/tooltip/components/tooltip.component.html","../../../projects/ngx-sds-components/src/lib/tooltip/tooltip.directive.ts","../../../projects/ngx-sds-components/src/lib/tooltip/tooltip.module.ts","../../../projects/ngx-sds-components/src/lib/tooltip/spicainternational-ngx-sds-components-src-lib-tooltip.ts"],"sourcesContent":["import { Component, OnInit } from '@angular/core';\r\nimport { TooltipPosition, TooltipTheme } from '../tooltip.types';\r\n\r\n@Component({\r\n    selector: 'sds-tooltip',\r\n    templateUrl: './tooltip.component.html',\r\n    styleUrls: ['./tooltip.component.scss'],\r\n})\r\nexport class SdsTooltipComponent implements OnInit {\r\n\r\n    public tooltip: string = '';\r\n    public left: number = 0;\r\n    public top: number = 0;\r\n    public visible: boolean = false;\r\n\r\n    public position: TooltipPosition = 'above';\r\n    public theme: TooltipTheme = 'dark';\r\n\r\n\r\n\r\n    constructor() {}\r\n\r\n    ngOnInit(): void {}\r\n}\r\n","<div class=\"sds-tooltip\"\r\n    [ngClass]=\"['sds-tooltip-' + position, 'sds-tooltip-' + theme]\"\r\n    [class.sds-tooltip-visible]=\"visible\"\r\n    [style.left.px]=\"left\"\r\n    [style.top.px]=\"top\"\r\n    >\r\n    <small>\r\n        {{ tooltip }}\r\n    </small>\r\n</div>\r\n","import {\r\n    ApplicationRef,\r\n    ComponentFactoryResolver,\r\n    ComponentRef,\r\n    Directive,\r\n    ElementRef,\r\n    EmbeddedViewRef,\r\n    HostListener,\r\n    Injector,\r\n    Input,\r\n    Renderer2,\r\n    ViewContainerRef,\r\n} from '@angular/core';\r\nimport { SdsTooltipComponent } from './components/tooltip.component';\r\nimport { TooltipPosition, TooltipTheme } from './tooltip.types';\r\n\r\n@Directive({\r\n    selector: '[sdsTooltip]',\r\n})\r\nexport class TooltipDirective {\r\n    @Input() tooltip = '';\r\n    @Input() position: TooltipPosition = 'above';\r\n    @Input() theme: TooltipTheme = 'dark';\r\n    @Input() showDelay = 0;\r\n    @Input() hideDelay = 0;\r\n\r\n    private componentRef: ComponentRef<any> | null = null;\r\n    private showTimeout?: number;\r\n    private hideTimeout?: number;\r\n    private touchTimeout?: number;\r\n\r\n\r\n    constructor(\r\n        private elementRef: ElementRef,\r\n        private appRef: ApplicationRef,\r\n        private componentFactoryResolver: ComponentFactoryResolver,\r\n        //   private viewContainerRef: ViewContainerRef,\r\n        private injector: Injector,\r\n        // private renderer2: Renderer2\r\n    ) {\r\n        // this.renderer2.listen('window', 'scroll', (_) => {\r\n        //     console.log('scroll');\r\n        //     this.setHideTooltipTimeout();\r\n        // });\r\n    }\r\n\r\n    @HostListener('mouseenter')\r\n    onMouseEnter(): void {\r\n        this.initializeTooltip();\r\n    }\r\n\r\n    @HostListener('mouseleave')\r\n    onMouseLeave(): void {\r\n        this.setHideTooltipTimeout();\r\n    }\r\n\r\n    // @HostListener(\"window:scroll\", [])\r\n    // onWindowScroll() {\r\n    //     console.log('scroll');\r\n    //     this.setHideTooltipTimeout();\r\n    // }\r\n\r\n    // @HostListener('window:scroll') onScroll(e: Event): void {\r\n    //     console.log((e.target as Element).scrollTop);\r\n    //  }\r\n\r\n    //  @HostListener('scroll') onScrollHost(e: Event): void {\r\n    //     console.log((e.target as Element).scrollTop);\r\n    //  }\r\n\r\n    @HostListener('mousemove', ['$event'])\r\n    onMouseMove($event: MouseEvent): void {\r\n        if (this.componentRef !== null && this.position === 'dynamic') {\r\n            this.componentRef.instance.left = $event.clientX;\r\n            this.componentRef.instance.top = $event.clientY;\r\n            this.componentRef.instance.tooltip = this.tooltip;\r\n        }\r\n    }\r\n\r\n    @HostListener('touchstart', ['$event'])\r\n    onTouchStart($event: TouchEvent): void {\r\n        $event.preventDefault();\r\n        window.clearTimeout(this.touchTimeout);\r\n        this.touchTimeout = window.setTimeout(this.initializeTooltip.bind(this), 500);\r\n    }\r\n\r\n    @HostListener('touchend')\r\n    onTouchEnd(): void {\r\n        window.clearTimeout(this.touchTimeout);\r\n        this.setHideTooltipTimeout();\r\n    }\r\n\r\n    private initializeTooltip() {\r\n        if (this.componentRef === null) {\r\n            window.clearInterval(this.hideDelay);\r\n            const componentFactory = this.componentFactoryResolver.resolveComponentFactory(SdsTooltipComponent);\r\n            this.componentRef = componentFactory.create(this.injector);\r\n\r\n            this.appRef.attachView(this.componentRef.hostView);\r\n            const [tooltipDOMElement] = (this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes;\r\n\r\n            this.setTooltipComponentProperties();\r\n\r\n            document.body.appendChild(tooltipDOMElement);\r\n            this.showTimeout = window.setTimeout(this.showTooltip.bind(this), this.showDelay);\r\n        }\r\n    }\r\n\r\n    private setTooltipComponentProperties() {\r\n        if (this.componentRef !== null) {\r\n            this.componentRef.instance.tooltip = this.tooltip;\r\n            this.componentRef.instance.position = this.position;\r\n            this.componentRef.instance.theme = this.theme;\r\n\r\n            const { left, right, top, bottom } = this.elementRef.nativeElement.getBoundingClientRect();\r\n\r\n            switch (this.position) {\r\n                case 'below': {\r\n                    this.componentRef.instance.left = Math.round((right - left) / 2 + left);\r\n                    this.componentRef.instance.top = Math.round(bottom);\r\n                    break;\r\n                }\r\n                case 'above': {\r\n                    this.componentRef.instance.left = Math.round((right - left) / 2 + left);\r\n                    this.componentRef.instance.top = Math.round(top);\r\n                    break;\r\n                }\r\n                case 'right': {\r\n                    this.componentRef.instance.left = Math.round(right);\r\n                    this.componentRef.instance.top = Math.round(top + (bottom - top) / 2);\r\n                    break;\r\n                }\r\n                case 'left': {\r\n                    this.componentRef.instance.left = Math.round(left);\r\n                    this.componentRef.instance.top = Math.round(top + (bottom - top) / 2);\r\n                    break;\r\n                }\r\n                default: {\r\n                    break;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    private showTooltip() {\r\n        if (this.componentRef !== null) {\r\n            this.componentRef.instance.visible = true;\r\n        }\r\n    }\r\n\r\n    private setHideTooltipTimeout() {\r\n        this.hideTimeout = window.setTimeout(this.destroy.bind(this), this.hideDelay);\r\n    }\r\n\r\n    ngOnDestroy(): void {\r\n        this.destroy();\r\n    }\r\n\r\n    destroy(): void {\r\n        if (this.componentRef !== null) {\r\n            window.clearInterval(this.showTimeout);\r\n            window.clearInterval(this.hideDelay);\r\n            this.appRef.detachView(this.componentRef.hostView);\r\n            this.componentRef.destroy();\r\n            this.componentRef = null;\r\n        }\r\n    }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsTooltipComponent } from '../tooltip/components/tooltip.component';\r\nimport { TooltipDirective } from './tooltip.directive';\r\nimport { TooltipPosition, TooltipTheme } from './tooltip.types';\r\n\r\n\r\n\r\n@NgModule({\r\n  declarations: [\r\n    SdsTooltipComponent,\r\n    TooltipDirective\r\n  ],\r\n  imports: [\r\n    CommonModule\r\n  ],\r\n  exports: [\r\n    TooltipDirective\r\n  ]\r\n})\r\nexport class SdsTooltipModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2020/spicainternational-ngx-sds-components.mjs

@@ -10,6 +10,7 @@ export * from '@spicainternational/ngx-sds-components/src/lib/pane';
 export * from '@spicainternational/ngx-sds-components/src/lib/quick-info';
 export * from '@spicainternational/ngx-sds-components/src/lib/segmented-control';
 export * from '@spicainternational/ngx-sds-components/src/lib/side-bar';
+export * from '@spicainternational/ngx-sds-components/src/lib/tooltip';
 
 /*
  * Public API Surface of ngx-sds-components

package/fesm2020/spicainternational-ngx-sds-components.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components.mjs","sources":["../../../projects/ngx-sds-components/src/public-api.ts","../../../projects/ngx-sds-components/src/spicainternational-ngx-sds-components.ts"],"sourcesContent":["/*\r\n * Public API Surface of ngx-sds-components\r\n */\r\n\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/app-switcher';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/avatar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/callout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/color-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-pipes';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/modal';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/navigation';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/pane';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/quick-info';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/segmented-control';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/side-bar';","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;AAAA;;AAEG;;ACFH;;AAEG"}
+{"version":3,"file":"spicainternational-ngx-sds-components.mjs","sources":["../../../projects/ngx-sds-components/src/public-api.ts","../../../projects/ngx-sds-components/src/spicainternational-ngx-sds-components.ts"],"sourcesContent":["/*\r\n * Public API Surface of ngx-sds-components\r\n */\r\n\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/app-switcher';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/avatar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/callout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/color-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-pipes';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/modal';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/navigation';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/pane';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/quick-info';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/segmented-control';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/side-bar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/tooltip';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA;;AAEG;;ACFH;;AAEG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spicainternational/ngx-sds-components",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "Spica design system angular components.",
   "peerDependencies": {
     "@angular/common": ">=10.0.0",
@@ -131,6 +131,14 @@
       "es2015": "./fesm2015/spicainternational-ngx-sds-components-src-lib-side-bar.mjs",
       "node": "./fesm2015/spicainternational-ngx-sds-components-src-lib-side-bar.mjs",
       "default": "./fesm2020/spicainternational-ngx-sds-components-src-lib-side-bar.mjs"
+    },
+    "./src/lib/tooltip": {
+      "types": "./src/lib/tooltip/spicainternational-ngx-sds-components-src-lib-tooltip.d.ts",
+      "esm2020": "./esm2020/src/lib/tooltip/spicainternational-ngx-sds-components-src-lib-tooltip.mjs",
+      "es2020": "./fesm2020/spicainternational-ngx-sds-components-src-lib-tooltip.mjs",
+      "es2015": "./fesm2015/spicainternational-ngx-sds-components-src-lib-tooltip.mjs",
+      "node": "./fesm2015/spicainternational-ngx-sds-components-src-lib-tooltip.mjs",
+      "default": "./fesm2020/spicainternational-ngx-sds-components-src-lib-tooltip.mjs"
     }
   },
   "sideEffects": false

package/public-api.d.ts

@@ -10,3 +10,4 @@ export * from '@spicainternational/ngx-sds-components/src/lib/pane';
 export * from '@spicainternational/ngx-sds-components/src/lib/quick-info';
 export * from '@spicainternational/ngx-sds-components/src/lib/segmented-control';
 export * from '@spicainternational/ngx-sds-components/src/lib/side-bar';
+export * from '@spicainternational/ngx-sds-components/src/lib/tooltip';

package/src/lib/date-picker/date-picker.model.d.ts

@@ -23,4 +23,5 @@ export declare class PeriodPickerDateRange {
 export interface PeriodPickerTranslations {
     cancel: string;
     apply: string;
+    custom: string;
 }

package/src/lib/tooltip/components/tooltip.component.d.ts

@@ -0,0 +1,15 @@
+import { OnInit } from '@angular/core';
+import { TooltipPosition, TooltipTheme } from '../tooltip.types';
+import * as i0 from "@angular/core";
+export declare class SdsTooltipComponent implements OnInit {
+    tooltip: string;
+    left: number;
+    top: number;
+    visible: boolean;
+    position: TooltipPosition;
+    theme: TooltipTheme;
+    constructor();
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdsTooltipComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdsTooltipComponent, "sds-tooltip", never, {}, {}, never, never>;
+}

package/src/lib/tooltip/package.json

@@ -0,0 +1,10 @@
+{
+  "module": "../../../fesm2015/spicainternational-ngx-sds-components-src-lib-tooltip.mjs",
+  "es2020": "../../../fesm2020/spicainternational-ngx-sds-components-src-lib-tooltip.mjs",
+  "esm2020": "../../../esm2020/src/lib/tooltip/spicainternational-ngx-sds-components-src-lib-tooltip.mjs",
+  "fesm2020": "../../../fesm2020/spicainternational-ngx-sds-components-src-lib-tooltip.mjs",
+  "fesm2015": "../../../fesm2015/spicainternational-ngx-sds-components-src-lib-tooltip.mjs",
+  "typings": "spicainternational-ngx-sds-components-src-lib-tooltip.d.ts",
+  "sideEffects": false,
+  "name": "@spicainternational/ngx-sds-components/src/lib/tooltip"
+}

package/src/lib/tooltip/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './tooltip.module';
+export * from './tooltip.directive';

package/src/lib/tooltip/spicainternational-ngx-sds-components-src-lib-tooltip.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@spicainternational/ngx-sds-components/src/lib/tooltip" />
+export * from './public-api';

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

@@ -0,0 +1,32 @@
+import { ApplicationRef, ComponentFactoryResolver, ElementRef, Injector } from '@angular/core';
+import { TooltipPosition, TooltipTheme } from './tooltip.types';
+import * as i0 from "@angular/core";
+export declare class TooltipDirective {
+    private elementRef;
+    private appRef;
+    private componentFactoryResolver;
+    private injector;
+    tooltip: string;
+    position: TooltipPosition;
+    theme: TooltipTheme;
+    showDelay: number;
+    hideDelay: number;
+    private componentRef;
+    private showTimeout?;
+    private hideTimeout?;
+    private touchTimeout?;
+    constructor(elementRef: ElementRef, appRef: ApplicationRef, componentFactoryResolver: ComponentFactoryResolver, injector: Injector);
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    onMouseMove($event: MouseEvent): void;
+    onTouchStart($event: TouchEvent): void;
+    onTouchEnd(): void;
+    private initializeTooltip;
+    private setTooltipComponentProperties;
+    private showTooltip;
+    private setHideTooltipTimeout;
+    ngOnDestroy(): void;
+    destroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TooltipDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TooltipDirective, "[sdsTooltip]", never, { "tooltip": "tooltip"; "position": "position"; "theme": "theme"; "showDelay": "showDelay"; "hideDelay": "hideDelay"; }, {}, never>;
+}

package/src/lib/tooltip/tooltip.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./components/tooltip.component";
+import * as i2 from "./tooltip.directive";
+import * as i3 from "@angular/common";
+export declare class SdsTooltipModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdsTooltipModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SdsTooltipModule, [typeof i1.SdsTooltipComponent, typeof i2.TooltipDirective], [typeof i3.CommonModule], [typeof i2.TooltipDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SdsTooltipModule>;
+}

package/src/lib/tooltip/tooltip.types.d.ts

@@ -0,0 +1,2 @@
+export declare type TooltipPosition = 'above' | 'below' | 'left' | 'right' | 'dynamic';
+export declare type TooltipTheme = 'dark' | 'light';