bbj-screen-widget 2.4.60 → 2.4.62

package/core/package.json

@@ -1,11 +1,3 @@
-{
-  "main": "../bundles/bbj-screen-widget-core.umd.js",
-  "module": "../fesm2015/bbj-screen-widget-core.js",
-  "es2015": "../fesm2015/bbj-screen-widget-core.js",
-  "esm2015": "../esm2015/core/bbj-screen-widget-core.js",
-  "fesm2015": "../fesm2015/bbj-screen-widget-core.js",
-  "typings": "bbj-screen-widget-core.d.ts",
-  "metadata": "bbj-screen-widget-core.metadata.json",
-  "sideEffects": false,
-  "name": "bbj-screen-widget/core"
+{
+    "ngPackage": {}
 }

package/core/src/service/baidu-map.service.ts

@@ -0,0 +1,107 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { LazyService } from '@delon/util';
+
+declare const BMap;
+declare const BMapGL;
+
+@Injectable({ providedIn: 'root' })
+export class BaiduMapService {
+  private loadMapPromise: Promise<any>;
+  private loadMapGLPromise: Promise<any>;
+  private loadMarkerClustererPromise: Promise<any>;
+  private loadMarkerClustererGLPromise: Promise<any>;
+  private loadMapVGLPromise: Promise<any>;
+  private ak = 'hyaNdQpNwKB440Xtm8QqQqwneuRfJ59U';
+  constructor(public lazy: LazyService) {}
+
+  loadScript(url: string, callback: string) {
+    return new Promise<void>((resolve) => {
+      (window as any)[callback] = () => {
+        resolve();
+        delete window[callback];
+      };
+      var script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.src = url + `&ak=${this.ak}&callback=${callback}`;
+      document.body.appendChild(script);
+    });
+  }
+
+  loadMap(): Promise<any> {
+    if (typeof BMap !== 'undefined') {
+      return Promise.resolve();
+    }
+    if (!this.loadMapPromise) {
+      this.loadMapPromise = this.loadScript('https://api.map.baidu.com/api?v=3.0', 'loadBMapCallback');
+    }
+    return this.loadMapPromise;
+  }
+
+  loadMapGL(): Promise<any> {
+    if (typeof BMapGL !== 'undefined') {
+      return Promise.resolve();
+    }
+    if (!this.loadMapGLPromise) {
+      this.loadMapGLPromise = this.loadScript(
+        'https://api.map.baidu.com/api?type=webgl&v=1.0',
+        'loadBMapGLCallback',
+      ).then(() => {
+        // 百度地图重写了contains方法，当参数为null时会报错，这里把它重写回来
+        HTMLElement.prototype.contains = function (e) {
+          if (e) {
+            if (e == this) {
+              return true;
+            }
+            while ((e = e.parentNode)) {
+              if (e == this) {
+                return true;
+              }
+            }
+          }
+          return false;
+        };
+      });
+    }
+    return this.loadMapGLPromise;
+  }
+
+  // loadMarkerClusterer() {
+  //   if (!this.loadMarkerClustererPromise) {
+  //     this.loadMarkerClustererPromise = Promise.all([
+  //       this.lazy.loadScript('assets/js/BMap/MarkerClusterer_min.js'),
+  //       this.lazy.loadScript('assets/js/BMap/TextIconOverlay_min.js'),
+  //     ]);
+  //   }
+  //   return this.loadMarkerClustererPromise;
+  // }
+
+  // loadMarkerClustererGL() {
+  //   if (!this.loadMarkerClustererGLPromise) {
+  //     this.loadMarkerClustererGLPromise = Promise.all([
+  //       this.lazy.loadScript('assets/js/BMapGL/MarkerClusterer_min.js'),
+  //       this.lazy.loadScript('assets/js/BMapGL/TextIconOverlay_min.js'),
+  //     ]);
+  //   }
+  //   return this.loadMarkerClustererGLPromise;
+  // }
+
+  loadMapVGL() {
+    if (!this.loadMapVGLPromise) {
+      this.loadMapVGLPromise = this.lazy.loadScript('assets/js/BMapGL/mapvgl.min.js');
+      this.loadMapVGLPromise.catch((e) => {
+        console.error(e);
+        this.loadMapGLPromise = null;
+      });
+    }
+    return this.loadMapVGLPromise;
+  }
+
+  async localCity() {
+    await this.loadMapGL();
+    return new Promise<any>((resolve) => {
+      const myCity = new BMapGL.LocalCity();
+      myCity.get(resolve);
+    });
+  }
+}

package/karma.conf.js

@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/screen-widget'),
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,59 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/screen-widget",
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "umdModuleIds": {
+      "@delon/util": "@delon/util",
+      "@delon/util/other":"@delon/util/other",
+      "@fullcalendar/angular": "@fullcalendar/angular",
+      "@fullcalendar/daygrid": "@fullcalendar/daygrid",
+      "@fullcalendar/timegrid": "@fullcalendar/timegrid",
+      "@fullcalendar/resource-timeline":"@fullcalendar/resource-timeline",
+      "@fullcalendar/interaction": "@fullcalendar/interaction",
+      "date-fns": "date-fns",
+      "date-fns/fp":"date-fns/fp",
+      "echarts": "echarts",
+      "ngx-echarts": "ngx-echarts",
+      "ng-zorro-antd/button": "ng-zorro-antd/button",
+      "ng-zorro-antd/checkbox": "ng-zorro-antd/checkbox",
+      "ng-zorro-antd/core/highlight":"ng-zorro-antd/core/highlight",
+      "ng-zorro-antd/core/no-animation":"ng-zorro-antd/core/no-animation",
+      "ng-zorro-antd/core/resize-observers":"ng-zorro-antd/core/resize-observers",
+      "ng-zorro-antd/core/transition-patch": "ng-zorro-antd/core/transition-patch",
+      "ng-zorro-antd/core/wave": "ng-zorro-antd/core/wave",
+      "ng-zorro-antd/date-picker": "ng-zorro-antd/date-picker",
+      "ng-zorro-antd/dropdown":"ng-zorro-antd/dropdown",
+      "ng-zorro-antd/icon": "ng-zorro-antd/icon",
+      "ng-zorro-antd/input": "ng-zorro-antd/input",
+      "ng-zorro-antd/i18n":"ng-zorro-antd/i18n",
+      "ng-zorro-antd/message": "ng-zorro-antd/message",
+      "ng-zorro-antd/pipes":"ng-zorro-antd/pipes",
+      "ng-zorro-antd/rate": "ng-zorro-antd/rate",
+      "ng-zorro-antd/radio": "ng-zorro-antd/radio",
+      "ng-zorro-antd/select": "ng-zorro-antd/select",
+      "ng-zorro-antd/slider": "ng-zorro-antd/slider",
+      "ng-zorro-antd/space":"ng-zorro-antd/space",
+      "ng-zorro-antd/table": "ng-zorro-antd/table",
+      "ng-zorro-antd/tabs": "ng-zorro-antd/tabs",
+      "ng-zorro-antd/time-picker": "ng-zorro-antd/time-picker",
+      "ng-zorro-antd/tooltip":"ng-zorro-antd/tooltip",
+      "ng-zorro-antd/tree": "ng-zorro-antd/tree",
+      "ng-zorro-antd/upload": "ng-zorro-antd/upload",
+      "swiper/angular":"swiper/angular",
+      "swiper/core":"swiper/core",
+      "bbj-widget-base": "bbj-widget-base",
+      "util": "util",
+      "uuid":"uuid"
+    }
+  },
+  "assets": ["src/assets"],
+  "allowedNonPeerDependencies": [
+    "@fullcalendar/angular",
+    "@fullcalendar/daygrid",
+    "@fullcalendar/interaction",
+    "@fullcalendar/resource-timeline",
+    "@fullcalendar/timegrid",
+    "swiper"
+  ]
+}

package/package.json

@@ -1,14 +1,13 @@
 {
   "name": "bbj-screen-widget",
-  "version": "2.4.60",
+  "version": "2.4.62",
   "dependencies": {
     "@fullcalendar/angular": "~5.5.0",
     "@fullcalendar/daygrid": "~5.5.0",
     "@fullcalendar/interaction": "~5.5.0",
     "@fullcalendar/resource-timeline": "~5.5.0",
     "@fullcalendar/timegrid": "~5.5.0",
-    "swiper": "11.2.6",
-    "tslib": "^2.0.0"
+    "swiper":"11.2.6"
   },
   "peerDependencies": {
     "@angular/common": "^11.0.0",
@@ -18,13 +17,5 @@
     "echarts": "^5.0.1",
     "echarts-gl": "^2.0.0",
     "echarts-liquidfill": "^3.0.0"
-  },
-  "main": "bundles/bbj-screen-widget.umd.js",
-  "module": "fesm2015/bbj-screen-widget.js",
-  "es2015": "fesm2015/bbj-screen-widget.js",
-  "esm2015": "esm2015/bbj-screen-widget.js",
-  "fesm2015": "fesm2015/bbj-screen-widget.js",
-  "typings": "bbj-screen-widget.d.ts",
-  "metadata": "bbj-screen-widget.metadata.json",
-  "sideEffects": false
-}
+  }
+}

package/src/lib/announcement/announcement.component.html

@@ -0,0 +1,3 @@
+<ng-container *ngIf="data[0]">
+    {{data[0].content}}
+</ng-container>

package/src/lib/announcement/announcement.component.less

@@ -0,0 +1,5 @@
+:host {
+    height: 100%;
+    overflow: auto;
+    display: block;
+}

package/src/lib/announcement/announcement.component.spec.ts

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

package/src/lib/announcement/announcement.component.ts

@@ -0,0 +1,55 @@
+import { Component, OnInit, ElementRef } from '@angular/core';
+import { Widget, Property, Data } from 'bbj-widget-base';
+
+@Component({
+  selector: 'sc-announcement',
+  templateUrl: './announcement.component.html',
+  styleUrls: ['./announcement.component.less'],
+})
+@Widget('公告', { group: 'component', image: 'assets/img/screen/announcement.png', icon: 'iconmokuai' })
+export class AnnouncementComponent implements OnInit {
+  @Property('显示图标', { type: 'boolean' })
+  headIconDisplay = true;
+  @Property('内边距', { ui: { widget: 'myGrid' } })
+  padding: any = {
+    top: 30,
+    right: 24,
+    bottom: 30,
+    left: 24,
+  };
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = {
+    family: '',
+    color: '#333333',
+    weight: 'normal',
+    size: 13,
+    space: 0,
+    lineHeight: '',
+  };
+  @Property('图标', { ui: { hidden: true } })
+  icon = 'sound';
+  @Data({
+    properties: {
+      content: { type: 'string', title: '公告内容' },
+    },
+  })
+  data = [
+    {
+      content:
+        '陆十三,男，共产党员，村小组长。多年来，他始终怀着对党、对人民无比热爱的赤诚之心，热衷于社会公益慈善事业，尽心竭力地为人民群众做好事实事，通过自身捐款、社会筹款等多种途径融资，为贫困山区、失学儿童送去…',
+    },
+  ];
+  constructor(private element: ElementRef) {}
+
+  ngOnInit() {
+    if (this.padding) {
+      this.element.nativeElement.style.padding = `${this.padding.top}px ${this.padding.right}px ${this.padding.bottom}px ${this.padding.left}px`;
+      this.element.nativeElement.style.fontSize = this.font.size + 'px';
+      this.element.nativeElement.style.fontFamily = this.font.family;
+      this.element.nativeElement.style.color = this.font.color;
+      this.element.nativeElement.style.fontWeight = this.font.weight;
+      this.element.nativeElement.style.letterSpacing = this.font.space + 'px';
+      this.element.nativeElement.style.lineHeight = this.font.lineHeight + 'px';
+    }
+  }
+}

package/src/lib/announcement/announcement.module.ts

@@ -0,0 +1,19 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import { AnnouncementComponent } from './announcement.component';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+
+@NgModule({
+  declarations: [
+    AnnouncementComponent
+  ],
+  imports: [
+    CommonModule,
+    WidgetBaseModule
+  ]
+})
+export class AnnouncementModule {
+  constructor(private widgetService:WidgetService){
+    widgetService.register(AnnouncementComponent);
+  }
+}

package/src/lib/audio/audio.component.html

@@ -0,0 +1,6 @@
+<ng-container [ngSwitch]="_type">
+  <img *ngSwitchCase="'image'" [src]="_src" />
+  <audio *ngSwitchCase="'audio'" [src]="_src" controls="controls" [ngStyle]="style"></audio>
+  <sc-video-player *ngSwitchCase="'flv'" [type]="'flv'" [src]="_src"></sc-video-player>
+  <video #video *ngSwitchCase="'video'" [src]="_src" controls="controls" autoplay [ngStyle]="style"></video>
+</ng-container>

package/src/lib/audio/audio.component.less

@@ -0,0 +1,12 @@
+:host{
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+video,
+audio,
+img {
+  width: 100%;
+  height: 100%;
+}

package/src/lib/audio/audio.component.spec.ts

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

package/src/lib/audio/audio.component.ts

@@ -0,0 +1,167 @@
+import { Component, ElementRef, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from '@angular/core';
+import { LazyService } from '@delon/util';
+import { Widget, Property, Data } from 'bbj-widget-base';
+import { FileUrlService } from '../shared/service/file-url.service';
+declare const flvjs;
+@Component({
+  selector: 'sc-audio',
+  templateUrl: './audio.component.html',
+  styleUrls: ['./audio.component.less'],
+})
+@Widget('音频', { group: 'audio', icon: 'icontupian' })
+export class AudioComponent implements OnInit, OnChanges{
+  @Property('', {
+    min: 1,
+    type: 'string',
+    ui: { widget: 'radio', spanLabel: 0, spanControl: 24 },
+    enum: [
+      { value: 'video', label: '视频' },
+      { value: 'audio', label: '音频' },
+      { value: 'auto', label: '自动' },
+    ],
+  })
+  type = 'video';
+  @Property('', {
+    min: 1,
+    ui: {
+      widget: 'myUploadAudio',
+      spanLabel: 0,
+      spanControl: 24,
+      list: [
+        { name: '无', value: null },
+        { name: '测试一号', value: 'https://xiche.oss-cn-beijing.aliyuncs.com/video/20180417154421.mp4' },
+        { name: '测试二号', value: 'https://xiche.oss-cn-beijing.aliyuncs.com/video/20180508102521.mp4' },
+      ],
+    },
+  })
+  src: string;
+  @Property('透明度', { ui: { widget: 'myRange', min: 0, max: 1, step: 0.1 } })
+  opacity = 1;
+  @Property('阴影', { ui: { widget: 'myShadow' } })
+  shadow: any = { color: '', X: 0, Y: 0, Z: 0 };
+  @Data({
+    properties: {
+      src: { title: '视频/音频地址', type: 'string' },
+    },
+  })
+  data: any[];
+  _src: string;
+
+  @Property('视频格式', {
+    enum: [
+      { label: 'MP4', value: 'mp4' },
+      { label: 'flv', value: 'flv' },
+    ],
+    ui: { visibleIf: { type: ['video'] }, widget: 'select' },
+  })
+  videoType: string;
+
+  @Property('是否有声音', { ui: { visibleIf: { videoType: ['flv'] } } })
+  hasAudio: boolean;
+  style: any;
+  @ViewChild('video')
+  video: ElementRef;
+  flvPlayer: any;
+  obj: any;
+  // loadFlvPromise: Promise<any>;
+  _type: string;
+  // destroyed: boolean;
+  constructor( private fileUrlService: FileUrlService) {}
+
+  ngOnInit() {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.style = {
+      opacity: this.opacity,
+      boxShadow: this.shadow.color + ' ' + this.shadow.X + 'px ' + this.shadow.Y + 'px ' + this.shadow.Z + 'px',
+    };
+    if (changes.type || changes.videoType || changes.src || changes.data) {
+      this.reset();
+    }
+  }
+
+  async reset() {
+    this._src = null;
+    let url: string;
+    if (this.data && this.data.length && this.data[0].src) {
+      url = this.data[0].src;
+    } else {
+      url = this.src;
+    }
+    url = this.fileUrlService.getUrl(url);
+    if (this.type === 'auto' && url && url.includes('.')) {
+      const ext = url.substring(url.lastIndexOf('.') + 1);
+      switch (ext) {
+        case 'png':
+        case 'jpg':
+          this._type = 'image';
+          break;
+        case 'mp4':
+          this._type = 'video';
+          break;
+        case 'mp3':
+          this._type = 'audio';
+          break;
+      }
+    } else {
+      this._type = this.type;
+      if (this._type === 'video' && this.videoType === 'flv') {
+        this._type = 'flv';
+      }
+    }
+    this._src = url;
+    // if (url) {
+    //   if (this._type === 'video' && this.videoType === 'flv') {
+    //     const obj = new Object();
+    //     this.obj = obj;
+    //     await this.loadFlv();
+    //     if (this.obj === obj && !this.destroyed) {
+    //       this.destroyFlv();
+    //       // 防止异步操作先后顺序问题
+    //       this.flvPlayer = flvjs.createPlayer(
+    //         {
+    //           type: 'flv',
+    //           url,
+    //           hasAudio: this.hasAudio === true,
+    //           hasVideo: true,
+    //           isLive: true,
+    //           withCredentials: false,
+    //         },
+    //         {
+    //           enableWorker: false,
+    //           lazyLoadMaxDuration: 3 * 60,
+    //           seekType: 'range',
+    //         },
+    //       );
+    //       this.flvPlayer.attachMediaElement(this.video.nativeElement);
+    //       console.log('load');
+    //       this.flvPlayer.load();
+    //     }
+    //   } else {
+    //     this._src = url;
+    //   }
+    // }
+  }
+
+  // loadFlv() {
+  //   if (this.loadFlvPromise == null) {
+  //     this.loadFlvPromise = this.lazy.loadScript('assets/js/flv.min.js');
+  //   }
+  //   return this.loadFlvPromise;
+  // }
+
+  // destroyFlv() {
+  //   if (this.flvPlayer) {
+  //     console.log('destroy');
+  //     this.flvPlayer.unload();
+  //     this.flvPlayer.detachMediaElement();
+  //     this.flvPlayer.destroy();
+  //     this.flvPlayer = null;
+  //   }
+  // }
+
+  // ngOnDestroy(): void {
+  //   this.destroyFlv();
+  //   this.destroyed = true;
+  // }
+}

package/src/lib/audio/audio.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AudioComponent } from './audio.component';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+import { VideoPlayerModule } from '../shared/component/video-player/video-player.module';
+
+@NgModule({
+  declarations: [AudioComponent],
+  imports: [CommonModule, WidgetBaseModule, VideoPlayerModule],
+})
+export class AudioModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(AudioComponent);
+  }
+}

package/src/lib/background/background.component.html

@@ -0,0 +1 @@
+<div [ngStyle]="style" [style.backgroundImage]="'url(' + image + ')'" class="background"></div>

package/src/lib/background/background.component.less

@@ -0,0 +1,6 @@
+.background {
+  width: 100%;
+  height: 100%;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}

package/src/lib/background/background.component.spec.ts

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

package/src/lib/background/background.component.ts

@@ -0,0 +1,33 @@
+import { Component, ElementRef, HostBinding, HostListener, OnInit } from '@angular/core';
+import { Property, Widget } from 'bbj-widget-base';
+
+@Component({
+  selector: 'sc-background',
+  templateUrl: './background.component.html',
+  styleUrls: ['./background.component.less'],
+})
+@Widget('图片', { group: 'background', icon: 'iconbeijing' })
+export class BackgroundComponent implements OnInit {
+  @Property('', { min: 1, ui: { widget: 'myUpload', spanLabel: 0, spanControl: 24 } })
+  image: string;
+  @Property('透明度', { ui: { widget: 'myRange', min: 0, max: 1, step: 0.1 } })
+  opacity = 1;
+  @Property('阴影', { ui: { widget: 'myShadow' } })
+  shadow: any = { color: '', X: 0, Y: 0, Z: 0 };
+  style: any;
+  type: string;
+  @Property('响应鼠标事件', { type: 'boolean', default: true })
+  pointerEvents = false;
+
+  constructor(private ele: ElementRef) {}
+
+  ngOnInit() {
+    this.style = {
+      opacity: this.opacity,
+      boxShadow: this.shadow.color + ' ' + this.shadow.X + 'px ' + this.shadow.Y + 'px ' + this.shadow.Z + 'px',
+    };
+    if (this.pointerEvents === false) {
+      this.ele.nativeElement.style.pointerEvents = 'none';
+    }
+  }
+}