@updevs/components 1.0.0-alpha.5 → 1.0.0-alpha.8

package/popover/ng-package.json

@@ -1,7 +0,0 @@
-{
-    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
-    "dest": "../../../../node_modules/@updevs/components/popover",
-    "lib": {
-        "entryFile": "src/index.ts"
-    }
-}

package/popover/src/popover.component.html

@@ -1,20 +0,0 @@
-<div class="popover-arrow upd-popover-arrow -{{placement}}"></div>
-<ng-container *ngIf="!!title || !!titleTemplate">
-    <h3 *ngIf="title; else titleTpl" [innerHTML]="title" class="popover-header"></h3>
-    <ng-template #titleTpl>
-        <div class="popover-header">
-            <ng-template [ngTemplateOutlet]="titleTemplate!"></ng-template>
-        </div>
-    </ng-template>
-</ng-container>
-<div class="popover-body">
-    <ng-container *ngIf="!!text; else contentTpl">
-        <span [innerHTML]="text"></span>
-    </ng-container>
-    <ng-template #contentTpl>
-        <ng-container *ngIf="!template; else customContentTpl">
-            <ng-content></ng-content>
-        </ng-container>
-        <ng-template #customContentTpl [ngTemplateOutlet]="template!"></ng-template>
-    </ng-template>
-</div>

package/popover/src/popover.component.scss

@@ -1,8 +0,0 @@
-.upd-popover {
-    position: absolute;
-    margin: 0;
-}
-
-.upd-popover-arrow {
-    position: absolute;
-}

package/popover/src/popover.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PopoverComponent } from './popover.component';
-
-describe('PopoverComponent', () => {
-  let component: PopoverComponent;
-  let fixture: ComponentFixture<PopoverComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ PopoverComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(PopoverComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/popover/src/popover.component.ts

@@ -1,53 +0,0 @@
-import { Component, Input, HostBinding, SimpleChanges, OnInit, OnChanges, ViewEncapsulation, TemplateRef } from '@angular/core';
-import { TopBottomLeftRightType } from '@updevs/sdk/types';
-
-@Component({
-    selector: 'upd-popover',
-    templateUrl: './popover.component.html',
-    styleUrls: ['./popover.component.scss'],
-    encapsulation: ViewEncapsulation.None
-})
-export class PopoverComponent implements OnInit, OnChanges {
-    @HostBinding('class') classes = '';
-    @HostBinding('attr.data-popper-placement') popperPlacement = '';
-    @HostBinding('role') readonly role = 'tooltip';
-
-    @Input() title?: string;
-    @Input() text?: string;
-    @Input() titleTemplate?: TemplateRef<any>;
-    @Input() template?: TemplateRef<any>;
-    @Input() placement: TopBottomLeftRightType = 'top';
-    @Input() customClasses?: string;
-
-    get isVisible(): boolean {
-        return this._isVisible;
-    }
-
-    private _isVisible = false;
-
-    ngOnInit(): void {
-        this.updateClasses();
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        this.updateClasses();
-    }
-
-    setVisible(isVisible: boolean): void {
-        this._isVisible = isVisible;
-        this.updateClasses();
-    }
-
-    private updateClasses(): void {
-        this.popperPlacement = this.placement;
-        this.classes = [
-            'popover',
-            'bs-popover-auto',
-            !this._isVisible ? 'fade' : '',
-            this._isVisible ? 'show' : '',
-            'upd-popover',
-            `-${this.placement}`,
-            ...(this.customClasses?.split(' ') || [])
-        ].join(' ');
-    }
-}

package/popover/src/popover.directive.spec.ts

@@ -1,8 +0,0 @@
-import { PopoverDirective } from './popover.directive';
-
-describe('PopoverDirective', () => {
-  it('should create an instance', () => {
-    const directive = new PopoverDirective();
-    expect(directive).toBeTruthy();
-  });
-});

package/popover/src/popover.directive.ts

@@ -1,128 +0,0 @@
-import {
-    Directive,
-    Input,
-    TemplateRef,
-    ViewContainerRef,
-    Renderer2,
-    ElementRef,
-    Injector,
-    NgZone,
-    ComponentRef,
-    HostListener
-} from '@angular/core';
-import { TopBottomLeftRightType } from '@updevs/sdk/types';
-import { PositioningService, ComputePositionResult, DynamicComponentLoaderService } from '@updevs/sdk/layout';
-
-import { PopoverComponent } from './popover.component';
-
-@Directive({
-    selector: '[updPopover]'
-})
-export class PopoverDirective {
-    @Input('updPopover') text?: string;
-    @Input('updPopoverTitle') title?: string;
-    @Input('updPopoverTitleTemplate') popoverTitleTemplate?: TemplateRef<any>;
-    @Input('updPopoverTemplate') popoverTemplate?: TemplateRef<any>;
-    @Input('updPopoverPlacement') placement: TopBottomLeftRightType = 'top';
-    @Input('updPopoverCustomClasses') customClasses?: string;
-    /**
-     * This makes the popover behave like a tooltip.
-     * It means it'll show/hide depending on whether the mouse is over or not the element.
-     */
-    @Input('updPopoverActAsTooltip') actAsTooltip = false;
-
-    private popoverComponentRef?: ComponentRef<PopoverComponent>;
-
-    constructor(
-        private elementRef: ElementRef,
-        private renderer: Renderer2,
-        private viewContainerRef: ViewContainerRef,
-        private ngZone: NgZone,
-        private injector: Injector,
-        private positioningService: PositioningService,
-        private dynamicComponentLoaderService: DynamicComponentLoaderService
-    ) {
-    }
-
-    @HostListener('mouseenter')
-    onMouseEnter(): void {
-        if (this.actAsTooltip) {
-            this.initPopover();
-        }
-    }
-
-    @HostListener('mouseleave')
-    onMouseLeave(): void {
-        if (this.actAsTooltip) {
-            this.disposePopover();
-        }
-    }
-
-    @HostListener('click')
-    onClick(): void {
-        if (!this.actAsTooltip) {
-            if (this.popoverComponentRef?.instance.isVisible) {
-                this.disposePopover();
-            } else {
-                this.initPopover();
-            }
-        }
-    }
-
-    private initPopover(): void {
-        this.setupPopover();
-        this.popoverComponentRef!.instance.setVisible(true);
-        this.ngZone.runOutsideAngular(() =>
-            this.positioningService
-                .computePosition(this.elementRef, this.popoverComponentRef!.location, { placement: this.placement })
-                .subscribe(resp => this.updatePosition(resp))
-        );
-    }
-
-    private disposePopover(): void {
-        this.viewContainerRef.clear();
-        this.popoverComponentRef!.instance.setVisible(false);
-    }
-
-    private setupPopover(): void {
-        this.viewContainerRef.clear();
-
-        this.popoverComponentRef = this.dynamicComponentLoaderService.load(PopoverComponent, this.viewContainerRef, this.injector);
-        this.popoverComponentRef!.instance.title = this.title;
-        this.popoverComponentRef!.instance.text = this.text;
-        this.popoverComponentRef!.instance.titleTemplate = this.popoverTitleTemplate;
-        this.popoverComponentRef!.instance.template = this.popoverTemplate;
-        this.popoverComponentRef!.instance.placement = this.placement;
-        this.popoverComponentRef!.instance.customClasses = this.customClasses;
-    }
-
-    private updatePosition(result: ComputePositionResult): void {
-        const nativeElement = this.popoverComponentRef!.location.nativeElement;
-        const arrowElement = this.popoverComponentRef!.location.nativeElement.querySelector('.popover-arrow');
-        const popoverBox = nativeElement.getBoundingClientRect();
-        const arrowBox = arrowElement.getBoundingClientRect();
-
-        switch (this.placement) {
-            case 'top':
-                this.renderer.setStyle(nativeElement, 'top', `${result.y - arrowBox.height}px`);
-                this.renderer.setStyle(nativeElement, 'left', `${result.x}px`);
-                this.renderer.setStyle(arrowElement, 'left', `${(popoverBox.width / 2) - (arrowBox.width / 2)}px`);
-                break;
-            case 'bottom':
-                this.renderer.setStyle(nativeElement, 'top', `${result.y + arrowBox.height}px`);
-                this.renderer.setStyle(nativeElement, 'left', `${result.x}px`);
-                this.renderer.setStyle(arrowElement, 'left', `${(popoverBox.width / 2) - (arrowBox.width / 2)}px`);
-                break;
-            case 'left':
-                this.renderer.setStyle(nativeElement, 'top', `${result.y}px`);
-                this.renderer.setStyle(nativeElement, 'left', `${result.x - arrowBox.width}px`);
-                this.renderer.setStyle(arrowElement, 'top', `${(popoverBox.height / 2) - (arrowBox.height / 2)}px`);
-                break;
-            case 'right':
-                this.renderer.setStyle(nativeElement, 'top', `${result.y}px`);
-                this.renderer.setStyle(nativeElement, 'left', `${result.x + arrowBox.width}px`);
-                this.renderer.setStyle(arrowElement, 'top', `${(popoverBox.height / 2) - (arrowBox.height / 2)}px`);
-                break;
-        }
-    }
-}

package/popover/src/upd-popover.module.ts

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { PopoverComponent } from './popover.component';
-import { PopoverDirective } from './popover.directive';
-
-@NgModule({
-    imports: [
-        CommonModule
-    ],
-    declarations: [
-        PopoverComponent,
-        PopoverDirective
-    ],
-    exports: [
-        PopoverComponent,
-        PopoverDirective
-    ]
-})
-export class UpdPopoverModule {}

package/src/lib/upd-components.module.ts

@@ -1,6 +0,0 @@
-import { NgModule } from '@angular/core';
-
-@NgModule({
-    imports: []
-})
-export class UpdComponentsModule {}

package/tsconfig.lib.json

@@ -1,14 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-    "extends": "../../../tsconfig.json",
-    "compilerOptions": {
-        "outDir": "../../../dist/updevs/components",
-        "declaration": true,
-        "declarationMap": true,
-        "inlineSources": true,
-        "types": []
-    },
-    "exclude": [
-        "**/*.spec.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"
-  ]
-}