@ipi-soft/ng-components
Version:
Custom Angular Components
291 lines (281 loc) • 17.2 kB
JavaScript
import * as i0 from '@angular/core';
import { PLATFORM_ID, Injectable, Inject, Component } from '@angular/core';
import { isPlatformBrowser, DOCUMENT } from '@angular/common';
import * as i1 from '@angular/cdk/a11y';
class UserAgentService {
constructor(platformId) {
this.platformId = platformId;
this.init();
}
getUserAgent() {
return this.userAgent;
}
init() {
if (isPlatformBrowser(this.platformId)) {
this.userAgent = navigator.userAgent;
}
else {
this.userAgent = undefined;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: UserAgentService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: UserAgentService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: UserAgentService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [{ type: Object, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }] });
var MobileOS;
(function (MobileOS) {
MobileOS[MobileOS["iOS"] = 0] = "iOS";
MobileOS[MobileOS["Android"] = 1] = "Android";
MobileOS[MobileOS["WindowsPhone"] = 2] = "WindowsPhone";
MobileOS[MobileOS["Other"] = 3] = "Other";
})(MobileOS || (MobileOS = {}));
class OSService {
constructor(userAgentService) {
this.userAgentService = userAgentService;
this.mobileOS = this.getMobileOS();
}
getMobileOS() {
const userAgent = this.userAgentService.getUserAgent();
if (!userAgent) {
return MobileOS.Other;
}
switch (true) {
case /windows phone/i.test(userAgent):
return MobileOS.WindowsPhone;
case /android/i.test(userAgent):
return MobileOS.Android;
case /iPad|iPhone|iPod/.test(userAgent):
return MobileOS.iOS;
default:
return MobileOS.Other;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: OSService, deps: [{ token: UserAgentService }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: OSService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: OSService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [{ type: UserAgentService }] });
var Theme;
(function (Theme) {
Theme[Theme["First"] = 0] = "First";
Theme[Theme["Second"] = 1] = "Second";
Theme[Theme["Third"] = 2] = "Third";
})(Theme || (Theme = {}));
class ThemeService {
constructor() {
this.currentTheme = Theme.First;
}
setTheme(theme) {
this.currentTheme = theme;
}
getTheme() {
return this.currentTheme;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
class ScrollBlockService {
constructor() {
this.isActivated = false;
this.previousStyles = {
position: '',
top: '',
height: '',
};
}
activate() {
if (this.isActivated) {
return;
}
this.isActivated = true;
this.previousStyles = this.getPreviousStyles();
const yOffset = window.scrollY;
document.body.style.position = 'fixed';
document.body.style.top = '-' + yOffset + 'px';
document.body.style.height = 'calc(100% + ' + yOffset + 'px)';
}
deactivate() {
if (!this.isActivated) {
return;
}
this.isActivated = false;
const top = Math.abs(parseInt(document.body.style.top));
document.body.style.position = this.previousStyles.position;
document.body.style.top = this.previousStyles.top;
document.body.style.height = this.previousStyles.height;
window.scrollTo(0, top);
}
getPreviousStyles() {
return {
position: document.body.style.position,
top: document.body.style.top,
height: document.body.style.height
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScrollBlockService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScrollBlockService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScrollBlockService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class OverlayService {
constructor(injector, focusTrapFactory, scrollBlockService, document) {
this.injector = injector;
this.focusTrapFactory = focusTrapFactory;
this.scrollBlockService = scrollBlockService;
this.document = document;
this.blockActivated = false;
this.overlayChildren = [];
}
get overlay() {
return this.overlayElement;
}
appendToOverlay(content, blockable = false) {
if (!this.overlayElement) {
this.createOverlay();
}
const overlayChild = {
element: content,
blockable
};
this.overlayElement.appendChild(overlayChild.element);
this.overlayChildren.push(overlayChild);
if (overlayChild.blockable && !this.blockActivated) {
this.scrollBlockService.activate();
this.blockActivated = true;
}
}
removeFromOverlay(content) {
if (!this.overlayElement) {
return;
}
const componentIndex = this.overlayChildren.findIndex(comp => comp.element === content);
if (componentIndex > -1) {
this.overlayChildren.splice(componentIndex, 1);
}
if (content.parentNode === this.overlayElement) {
this.overlayElement.removeChild(content);
}
if (!this.overlayChildren.some(comp => comp.blockable) && this.blockActivated) {
this.blockActivated = false;
this.scrollBlockService.deactivate();
}
if (this.overlayElement.childElementCount === 0) {
this.removeOverlay(this.overlayElement);
}
}
createOverlay() {
const overlayDiv = this.document.createElement('div');
overlayDiv.style.top = '0';
overlayDiv.style.left = '0';
overlayDiv.style.width = '100%';
overlayDiv.style.height = '100%';
overlayDiv.style.zIndex = '900';
overlayDiv.style.position = 'fixed';
overlayDiv.style.pointerEvents = 'none';
this.overlayElement = overlayDiv;
document.body.appendChild(overlayDiv);
this.focusTrap = this.focusTrapFactory.create(this.overlayElement);
this.focusTrap.focusInitialElementWhenReady();
}
removeOverlay(overlayElement) {
this.focusTrap.destroy();
overlayElement.remove();
this.overlayElement = null;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: OverlayService, deps: [{ token: i0.Injector }, { token: i1.FocusTrapFactory }, { token: ScrollBlockService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: OverlayService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: OverlayService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.FocusTrapFactory }, { type: ScrollBlockService }, { type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }] });
class IpiLoaderComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IpiLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: IpiLoaderComponent, isStandalone: true, selector: "ipi-loader", ngImport: i0, template: "<div class=\"backdrop\"></div>\n\n<div class=\"container\">\n <div class=\"spinner\">\n <span></span>\n <span></span>\n <span></span>\n <span></span>\n <span></span>\n <span></span>\n </div>\n</div>\n", styles: [".backdrop{width:100%;height:100%;position:fixed;top:0;left:0;background-color:var(--ipi-loader-backdrop-background, #0B1222);opacity:.1;pointer-events:all;z-index:999}.container{z-index:911;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:99}.spinner{position:relative;bottom:66px;right:44px;transform-style:preserve-3d}.spinner span{display:block;position:absolute;transform-origin:50% 100%}.spinner span:after{display:block;content:\"\";border-style:solid;border-color:transparent;border-width:67px 39px 0;backface-visibility:hidden}.spinner span:nth-child(1){transform:rotate3d(0,0,1,90deg)}.spinner span:nth-child(2){transform:rotate3d(0,0,1,150deg)}.spinner span:nth-child(3){transform:rotate3d(0,0,1,210deg)}.spinner span:nth-child(4){transform:rotate3d(0,0,1,270deg)}.spinner span:nth-child(5){transform:rotate3d(0,0,1,330deg)}.spinner span:nth-child(6){transform:rotate3d(0,0,1,390deg)}.spinner span:nth-child(1):after{border-top-color:rgb(var(--ipi-loader-color),.3);transform:rotate3d(.5,1,0,180deg);animation:split 2s .1111111111s ease infinite}.spinner span:nth-child(2):after{border-top-color:rgb(var(--ipi-loader-color),.4);transform:rotate3d(.5,1,0,180deg);animation:split 2s .2222222222s ease infinite}.spinner span:nth-child(3):after{border-top-color:rgb(var(--ipi-loader-color),.5);transform:rotate3d(.5,1,0,180deg);animation:split 2s .3333333333s ease infinite}.spinner span:nth-child(4):after{border-top-color:rgb(var(--ipi-loader-color),.6);transform:rotate3d(.5,1,0,180deg);animation:split 2s .4444444444s ease infinite}.spinner span:nth-child(5):after{border-top-color:rgb(var(--ipi-loader-color),.7);transform:rotate3d(.5,1,0,180deg);animation:split 2s .5555555556s ease infinite}.spinner span:nth-child(6):after{border-top-color:rgb(var(--ipi-loader-color),.8);transform:rotate3d(.5,1,0,180deg);animation:split 2s .6666666667s ease infinite}@keyframes split{0%{transform-origin:50% 100%;transform:rotate3d(.5,1,0,180deg)}25%{transform-origin:50% 100%;transform:rotateY(360deg)}50%{opacity:1;transform-origin:100% 0%;transform:rotateY(360deg)}75%{opacity:0;transform:rotate3d(.5,1,0,180deg)}to{opacity:1;transform:rotate3d(.5,1,0,180deg)}}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IpiLoaderComponent, decorators: [{
type: Component,
args: [{ selector: 'ipi-loader', template: "<div class=\"backdrop\"></div>\n\n<div class=\"container\">\n <div class=\"spinner\">\n <span></span>\n <span></span>\n <span></span>\n <span></span>\n <span></span>\n <span></span>\n </div>\n</div>\n", styles: [".backdrop{width:100%;height:100%;position:fixed;top:0;left:0;background-color:var(--ipi-loader-backdrop-background, #0B1222);opacity:.1;pointer-events:all;z-index:999}.container{z-index:911;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:99}.spinner{position:relative;bottom:66px;right:44px;transform-style:preserve-3d}.spinner span{display:block;position:absolute;transform-origin:50% 100%}.spinner span:after{display:block;content:\"\";border-style:solid;border-color:transparent;border-width:67px 39px 0;backface-visibility:hidden}.spinner span:nth-child(1){transform:rotate3d(0,0,1,90deg)}.spinner span:nth-child(2){transform:rotate3d(0,0,1,150deg)}.spinner span:nth-child(3){transform:rotate3d(0,0,1,210deg)}.spinner span:nth-child(4){transform:rotate3d(0,0,1,270deg)}.spinner span:nth-child(5){transform:rotate3d(0,0,1,330deg)}.spinner span:nth-child(6){transform:rotate3d(0,0,1,390deg)}.spinner span:nth-child(1):after{border-top-color:rgb(var(--ipi-loader-color),.3);transform:rotate3d(.5,1,0,180deg);animation:split 2s .1111111111s ease infinite}.spinner span:nth-child(2):after{border-top-color:rgb(var(--ipi-loader-color),.4);transform:rotate3d(.5,1,0,180deg);animation:split 2s .2222222222s ease infinite}.spinner span:nth-child(3):after{border-top-color:rgb(var(--ipi-loader-color),.5);transform:rotate3d(.5,1,0,180deg);animation:split 2s .3333333333s ease infinite}.spinner span:nth-child(4):after{border-top-color:rgb(var(--ipi-loader-color),.6);transform:rotate3d(.5,1,0,180deg);animation:split 2s .4444444444s ease infinite}.spinner span:nth-child(5):after{border-top-color:rgb(var(--ipi-loader-color),.7);transform:rotate3d(.5,1,0,180deg);animation:split 2s .5555555556s ease infinite}.spinner span:nth-child(6):after{border-top-color:rgb(var(--ipi-loader-color),.8);transform:rotate3d(.5,1,0,180deg);animation:split 2s .6666666667s ease infinite}@keyframes split{0%{transform-origin:50% 100%;transform:rotate3d(.5,1,0,180deg)}25%{transform-origin:50% 100%;transform:rotateY(360deg)}50%{opacity:1;transform-origin:100% 0%;transform:rotateY(360deg)}75%{opacity:0;transform:rotate3d(.5,1,0,180deg)}to{opacity:1;transform:rotate3d(.5,1,0,180deg)}}\n"] }]
}] });
class LoaderService {
constructor(overlayService) {
this.overlayService = overlayService;
this.viewContainerRef = null;
this.appContainerElement = null;
this.loaderRef = null;
}
/**
* Call this method globally in order to set a more global ViewContainerRef
* @param viewContainerRef - the Host Container Ref where we want the Loader to be attached. i.e the App Component or Layout Component
* @param appContainerElement - An optional app container selector. When provided it will set opacity 0.4 to that container when Loader is shown. Example - '.app-container'
*/
init(viewContainerRef, appContainerElement) {
this.viewContainerRef = viewContainerRef;
if (appContainerElement) {
this.appContainerElement = document.querySelector(appContainerElement);
}
}
show() {
if (this.viewContainerRef) {
if (this.loaderRef) {
return;
}
this.loaderRef = this.viewContainerRef.createComponent(IpiLoaderComponent);
this.setAppContainerOpacity('0.4');
this.overlayService.appendToOverlay(this.loaderRef.location.nativeElement, true);
}
}
hide() {
if (this.loaderRef) {
this.loaderRef.destroy();
this.setAppContainerOpacity('1');
this.overlayService.removeFromOverlay(this.loaderRef.location.nativeElement);
this.loaderRef = null;
}
}
setAppContainerOpacity(opacity) {
if (this.appContainerElement) {
this.appContainerElement.style.opacity = opacity;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: LoaderService, deps: [{ token: OverlayService }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: LoaderService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: LoaderService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: () => [{ type: OverlayService }] });
/**
* Generated bundle index. Do not edit.
*/
export { IpiLoaderComponent, LoaderService, MobileOS, OSService, OverlayService, ScrollBlockService, Theme, ThemeService };
//# sourceMappingURL=ipi-soft-ng-components-services.mjs.map