@cardboard-box/ngx-box
Version:
A collection of useful directives, components and services for angular
670 lines (648 loc) • 37.1 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, ViewChild, NgModule, Injectable, Directive, HostBinding, HostListener, EventEmitter, Output } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { lastValueFrom, catchError, of, tap } from 'rxjs';
import { saveAs } from 'file-saver';
import * as i1$1 from '@angular/common/http';
import { marked } from 'marked';
class MagicCircleComponent {
constructor() {
this.width = '100%';
this.height = '100%';
}
ngOnInit() {
}
style() {
const animate = this.spinSpeed ? `animation-duration: ${this.spinSpeed};` : '';
return `width: calc(${this.width} - 2px); height: calc(${this.height} - 2px); ${animate}`;
}
}
MagicCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: MagicCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
MagicCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: MagicCircleComponent, selector: "magic-circle", inputs: { width: "width", height: "height", spinSpeed: ["spin-speed", "spinSpeed"] }, ngImport: i0, template: "<div class=\"magic-wrapper\" [style]=\"style()\" [ngClass]=\"{ 'spin': !!spinSpeed }\">\n <ng-content></ng-content>\n</div>", styles: [":host{width:100%;height:100%;position:relative;display:flex}.magic-wrapper{margin:auto;overflow:hidden;padding:2px}.magic-wrapper.spin{animation:spin 10s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: MagicCircleComponent, decorators: [{
type: Component,
args: [{ selector: 'magic-circle', template: "<div class=\"magic-wrapper\" [style]=\"style()\" [ngClass]=\"{ 'spin': !!spinSpeed }\">\n <ng-content></ng-content>\n</div>", styles: [":host{width:100%;height:100%;position:relative;display:flex}.magic-wrapper{margin:auto;overflow:hidden;padding:2px}.magic-wrapper.spin{animation:spin 10s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { width: [{
type: Input
}], height: [{
type: Input
}], spinSpeed: [{
type: Input,
args: ['spin-speed']
}] } });
class RingComponent {
constructor() {
this._text = 'This is a magic circle. It is very magical, but its also pretty weird.';
this.width = '100%';
this.height = '100%';
this.color = '#fff';
this.innerWidth = '60px';
}
set text(value) { this._text = value; this.doText(); }
get text() { return this._text; }
ngAfterViewInit() {
this.doText();
}
ngOnInit() {
this.doText();
}
doText() {
if (!this.textEl)
return;
const el = this.textEl.nativeElement;
el.innerHTML = '';
const letters = this.text.split('');
if (letters.length == 0)
return;
letters.map((t, i) => {
const e = document.createElement('div');
e.classList.add('rotater');
e.style.cssText = this.textStyle(i, letters.length);
e.innerHTML = `<span>${t}</span>`;
el.appendChild(e);
return e;
});
}
textStyle(i, size) {
const rot = ((i + 1) / size) * 360;
return `height: calc(${this.width});
transform: rotate(${rot}deg);
position: absolute;
top: 0;
left: 50%;
transform-origin: center;`;
}
style() {
return `width: ${this.width}; height: ${this.height}; border-color: ${this.color}; color: ${this.color}`;
}
innerStyle() {
return `border-color: ${this.color}; color: ${this.color}; width: calc(100% - ${this.innerWidth}); height: calc(100% - ${this.innerWidth});`;
}
}
RingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: RingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
RingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: RingComponent, selector: "mc-ring", inputs: { width: "width", height: "height", color: "color", innerWidth: "innerWidth", text: "text" }, viewQueries: [{ propertyName: "textEl", first: true, predicate: ["textoutput"], descendants: true }], ngImport: i0, template: "<div class=\"ring\" [style]=\"style()\">\n <div class=\"text\" #textoutput></div>\n <div class=\"inner-ring\" [style]=\"innerStyle()\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [":host{width:100%;height:100%}.ring{position:relative;border:1px solid #fff;border-radius:50%}.ring .text{position:absolute;top:50%;left:50%;width:calc(100% - 5px);height:calc(100% - 5px);transform:translate(-50%,-50%) translate(-5px);font-size:18px;font-family:monospace}.ring .inner-ring{position:absolute;border:1px solid #fff;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: RingComponent, decorators: [{
type: Component,
args: [{ selector: 'mc-ring', template: "<div class=\"ring\" [style]=\"style()\">\n <div class=\"text\" #textoutput></div>\n <div class=\"inner-ring\" [style]=\"innerStyle()\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [":host{width:100%;height:100%}.ring{position:relative;border:1px solid #fff;border-radius:50%}.ring .text{position:absolute;top:50%;left:50%;width:calc(100% - 5px);height:calc(100% - 5px);transform:translate(-50%,-50%) translate(-5px);font-size:18px;font-family:monospace}.ring .inner-ring{position:absolute;border:1px solid #fff;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { width: [{
type: Input
}], height: [{
type: Input
}], color: [{
type: Input
}], innerWidth: [{
type: Input
}], textEl: [{
type: ViewChild,
args: ['textoutput']
}], text: [{
type: Input
}] } });
class SquareComponent {
constructor() {
this.width = 100;
this.height = 100;
this.color = '#fff';
}
get deg() {
if (this.rotate)
return this.rotate;
if (!this.total || !this.index)
return 0;
return 90 / this.total * this.index;
}
ngOnInit() {
}
style() {
const w = (Math.sqrt(Math.pow(this.width, 2) + Math.pow(this.height, 2)) / 2);
return `width: calc(${w}% - 10px);
height: calc(${w}% - 10px);
transform: translate(-50%, -50%) rotate(${this.deg}deg);
transform-origin: center center`;
}
}
SquareComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: SquareComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
SquareComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: SquareComponent, selector: "mc-square", inputs: { width: "width", height: "height", color: "color", rotate: "rotate", total: "total", index: "index" }, ngImport: i0, template: "<div class=\"square\" [style]=\"style()\">\n <ng-content></ng-content>\n</div>", styles: [":host{width:calc(100% - 5px);height:calc(100% - 5px);padding:5px}.square{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid #fff;padding:5px}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: SquareComponent, decorators: [{
type: Component,
args: [{ selector: 'mc-square', template: "<div class=\"square\" [style]=\"style()\">\n <ng-content></ng-content>\n</div>", styles: [":host{width:calc(100% - 5px);height:calc(100% - 5px);padding:5px}.square{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid #fff;padding:5px}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { width: [{
type: Input
}], height: [{
type: Input
}], color: [{
type: Input
}], rotate: [{
type: Input
}], total: [{
type: Input
}], index: [{
type: Input
}] } });
class IconComponent {
constructor() {
this.unsize = false;
this.fill = false;
this.spin = false;
}
}
IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: IconComponent, selector: "box-icon", inputs: { size: ["font-size", "size"], unsize: "unsize", fill: "fill", spin: "spin" }, ngImport: i0, template: "<span class=\"material-symbols-outlined\" \n [ngClass]=\"{ 'unsize': unsize || unsize === '', 'fill': fill || fill === '', 'spin': spin || spin === '' }\" \n [style.font-size]=\"size\">\n <ng-content></ng-content>\n</span>", styles: [":host{display:inline-block;height:100%;margin:0;padding:0;position:relative;transform:translateY(3.5px)}.material-symbols-outlined{display:inline-block;fill:currentColor;height:24px;width:24px;margin:0;padding:0;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 48}.material-symbols-outlined.fill{font-variation-settings:\"FILL\" 1,\"wght\" 400,\"GRAD\" 0,\"opsz\" 48}.unsize{height:unset;width:unset;font-size:inherit}.spin{animation:spin 2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: IconComponent, decorators: [{
type: Component,
args: [{ selector: 'box-icon', template: "<span class=\"material-symbols-outlined\" \n [ngClass]=\"{ 'unsize': unsize || unsize === '', 'fill': fill || fill === '', 'spin': spin || spin === '' }\" \n [style.font-size]=\"size\">\n <ng-content></ng-content>\n</span>", styles: [":host{display:inline-block;height:100%;margin:0;padding:0;position:relative;transform:translateY(3.5px)}.material-symbols-outlined{display:inline-block;fill:currentColor;height:24px;width:24px;margin:0;padding:0;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 48}.material-symbols-outlined.fill{font-variation-settings:\"FILL\" 1,\"wght\" 400,\"GRAD\" 0,\"opsz\" 48}.unsize{height:unset;width:unset;font-size:inherit}.spin{animation:spin 2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
}], propDecorators: { size: [{
type: Input,
args: ['font-size']
}], unsize: [{
type: Input,
args: ['unsize']
}], fill: [{
type: Input,
args: ['fill']
}], spin: [{
type: Input,
args: ['spin']
}] } });
class ContainerComponent {
constructor() {
this.loading = false;
this.handleScroll = false;
}
set notLoading(value) { this.loading = !value; }
get notLoading() { return !this.loading; }
}
ContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: ContainerComponent, selector: "box-container", inputs: { loading: "loading", loadingText: ["loading-text", "loadingText"], error: "error", handleScroll: ["handle-scroll", "handleScroll"], notLoading: ["not-loading", "notLoading"] }, ngImport: i0, template: "<main class=\"flex\">\n <section class=\"loading center\" *ngIf=\"loading\">\n <magic-circle spin-speed=\"20s\" width=\"100%\" height=\"100%\">\n <mc-ring [text]=\"loadingText || 'Some fancy stuff is happening... Sit tight...'\">\n <mc-square [total]=\"3\" [index]=\"0\"></mc-square>\n <mc-square [total]=\"3\" [index]=\"1\"></mc-square>\n <mc-square [total]=\"3\" [index]=\"2\">\n <mc-ring text=\"Loading... Loading... Loading...\">\n <mc-square [total]=\"3\" [index]=\"0\"></mc-square>\n <mc-square [total]=\"3\" [index]=\"1\"></mc-square>\n <mc-square [total]=\"3\" [index]=\"2\"></mc-square>\n </mc-ring>\n </mc-square>\n </mc-ring>\n </magic-circle>\n </section>\n <section class=\"error center\" *ngIf=\"error\">\n <h1><box-icon>warning</box-icon>An error occurred:</h1>\n <p>{{ error }}</p>\n </section>\n <section class=\"content\" *ngIf=\"!loading && !error\" [ngClass]=\"{ 'scroll': handleScroll || handleScroll === '' }\">\n <ng-content></ng-content>\n </section>\n</main>", styles: [".static-fill{position:fixed!important;top:0;left:0;width:100vw;height:100vh;overflow:hidden;display:flex;background-color:var(--bg-color);color:var(--text-color);margin:0;padding:0;font-family:Roboto}.flex{display:flex;flex-flow:row;overflow:hidden;color:var(--text-color);position:relative}.flex.row{flex-flow:column}.flex .fill{flex:1}.flex .center-vert{margin-top:auto;margin-bottom:auto}.flex .center-horz{margin-left:auto;margin-right:auto}.flex .center{margin:auto}.flex .pad-left{margin-left:auto}.flex .pad-right{margin-right:auto}\n", "main{position:absolute;width:100%;height:100%}main .loading{width:400px;height:400px;position:relative}main .error h1,main .error p{text-align:center}main .content{position:relative;width:100%;height:100%;overflow:hidden}main .content.scroll{overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MagicCircleComponent, selector: "magic-circle", inputs: ["width", "height", "spin-speed"] }, { kind: "component", type: RingComponent, selector: "mc-ring", inputs: ["width", "height", "color", "innerWidth", "text"] }, { kind: "component", type: SquareComponent, selector: "mc-square", inputs: ["width", "height", "color", "rotate", "total", "index"] }, { kind: "component", type: IconComponent, selector: "box-icon", inputs: ["font-size", "unsize", "fill", "spin"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: ContainerComponent, decorators: [{
type: Component,
args: [{ selector: 'box-container', template: "<main class=\"flex\">\n <section class=\"loading center\" *ngIf=\"loading\">\n <magic-circle spin-speed=\"20s\" width=\"100%\" height=\"100%\">\n <mc-ring [text]=\"loadingText || 'Some fancy stuff is happening... Sit tight...'\">\n <mc-square [total]=\"3\" [index]=\"0\"></mc-square>\n <mc-square [total]=\"3\" [index]=\"1\"></mc-square>\n <mc-square [total]=\"3\" [index]=\"2\">\n <mc-ring text=\"Loading... Loading... Loading...\">\n <mc-square [total]=\"3\" [index]=\"0\"></mc-square>\n <mc-square [total]=\"3\" [index]=\"1\"></mc-square>\n <mc-square [total]=\"3\" [index]=\"2\"></mc-square>\n </mc-ring>\n </mc-square>\n </mc-ring>\n </magic-circle>\n </section>\n <section class=\"error center\" *ngIf=\"error\">\n <h1><box-icon>warning</box-icon>An error occurred:</h1>\n <p>{{ error }}</p>\n </section>\n <section class=\"content\" *ngIf=\"!loading && !error\" [ngClass]=\"{ 'scroll': handleScroll || handleScroll === '' }\">\n <ng-content></ng-content>\n </section>\n</main>", styles: [".static-fill{position:fixed!important;top:0;left:0;width:100vw;height:100vh;overflow:hidden;display:flex;background-color:var(--bg-color);color:var(--text-color);margin:0;padding:0;font-family:Roboto}.flex{display:flex;flex-flow:row;overflow:hidden;color:var(--text-color);position:relative}.flex.row{flex-flow:column}.flex .fill{flex:1}.flex .center-vert{margin-top:auto;margin-bottom:auto}.flex .center-horz{margin-left:auto;margin-right:auto}.flex .center{margin:auto}.flex .pad-left{margin-left:auto}.flex .pad-right{margin-right:auto}\n", "main{position:absolute;width:100%;height:100%}main .loading{width:400px;height:400px;position:relative}main .error h1,main .error p{text-align:center}main .content{position:relative;width:100%;height:100%;overflow:hidden}main .content.scroll{overflow-y:auto}\n"] }]
}], propDecorators: { loading: [{
type: Input
}], loadingText: [{
type: Input,
args: ['loading-text']
}], error: [{
type: Input
}], handleScroll: [{
type: Input,
args: ['handle-scroll']
}], notLoading: [{
type: Input,
args: ['not-loading']
}] } });
const EXPORTS = [
MagicCircleComponent,
RingComponent,
SquareComponent
];
class MagicCircleModule {
}
MagicCircleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: MagicCircleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
MagicCircleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.3", ngImport: i0, type: MagicCircleModule, declarations: [MagicCircleComponent,
RingComponent,
SquareComponent], imports: [CommonModule,
ReactiveFormsModule,
FormsModule], exports: [MagicCircleComponent,
RingComponent,
SquareComponent] });
MagicCircleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: MagicCircleModule, imports: [CommonModule,
ReactiveFormsModule,
FormsModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: MagicCircleModule, decorators: [{
type: NgModule,
args: [{
declarations: [...EXPORTS],
exports: [...EXPORTS],
imports: [
CommonModule,
ReactiveFormsModule,
FormsModule
],
providers: []
}]
}] });
class ConfigurationService {
constructor() {
this._token = new LocalStorageVar('', 'auth-token');
}
get apiUrl() { return ''; }
get isProd() { return true; }
get token() { return this._token.value; }
set token(value) { this._token.value = value; }
get SkipAuthUrls() { return []; }
get corsFallback() { return ''; }
}
ConfigurationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: ConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
ConfigurationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: ConfigurationService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: ConfigurationService, decorators: [{
type: Injectable
}] });
class LocalStorageVar {
constructor(defValue, name, fun) {
this.defValue = defValue;
this.name = name;
this.fun = fun;
}
get value() {
const val = localStorage.getItem(this.name);
return this.convertType(val);
}
set value(item) {
if (item !== undefined)
localStorage.setItem(this.name, item);
else
localStorage.removeItem(this.name);
if (this.fun)
this.fun(item);
}
convertType(value) {
if (value === undefined || value === null) {
return this.defValue;
}
if (typeof this.defValue === 'number') {
return Number(value);
}
if (typeof this.defValue === 'boolean') {
return value === 'true';
}
return value;
}
}
class AuthInterceptor {
constructor(config) {
this.config = config;
}
intercept(req, next) {
const token = this.config.token;
for (const url of this.config.SkipAuthUrls) {
if (req.url.indexOf(url) !== -1)
return next.handle(req);
}
let headers = req.headers;
if (token) {
headers = headers.set('authorization', `Bearer ${token}`);
}
const r = req.clone({ headers });
return next.handle(r);
}
}
AuthInterceptor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: AuthInterceptor, deps: [{ token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Injectable });
AuthInterceptor.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: AuthInterceptor });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: AuthInterceptor, decorators: [{
type: Injectable
}], ctorParameters: function () { return [{ type: ConfigurationService }]; } });
class RxjsHttpResp {
constructor(_observable, _url, _isProd) {
this._isProd = _isProd;
this.url = _url;
this.observable = _observable;
this.rawObservable = _observable;
}
get promise() { return lastValueFrom(this.observable); }
error(handler, def) {
this.observable = this.observable
.pipe(catchError(err => {
console.error('Error occurred during XHR: ', {
url: this.url,
error: err,
default: def
});
handler(err);
return of(def);
}));
return this;
}
tap(handler) {
this.observable = this.observable.pipe(tap(t => handler(t)));
return this;
}
subscribe(handler) {
return this.observable.subscribe(t => {
if (!this._isProd)
console.log('XHR Request Result', {
url: this.url,
results: t
});
handler(t);
});
}
}
class HttpService {
constructor(http, config) {
this.http = http;
this.config = config;
}
fallback(url, group = 'fallback', referer) {
var path = encodeURIComponent(url);
let uri = `${this.config.corsFallback}/proxy?path=${path}&group=${group}`;
if (referer)
uri += `&referer=${encodeURIComponent(referer)}`;
return uri;
}
formatUrl(url) {
if (url.indexOf('https://') !== -1 ||
url.indexOf('http://') !== -1)
return url;
if (url.startsWith('/'))
url = url.substring(1);
return `${this.config.apiUrl}/${url}`;
}
get(url, options) {
let req = this.http.get(this.formatUrl(url), options);
return new RxjsHttpResp(req, url, this.config.isProd);
}
post(url, body, options) {
let req = this.http.post(this.formatUrl(url), body, options);
return new RxjsHttpResp(req, url, this.config.isProd);
}
put(url, body, options) {
let req = this.http.put(this.formatUrl(url), body, options);
return new RxjsHttpResp(req, url, this.config.isProd);
}
delete(url, options) {
let req = this.http.delete(this.formatUrl(url), options);
return new RxjsHttpResp(req, url, this.config.isProd);
}
download(url, body) {
const u = this.formatUrl(url);
const req = body ?
this.http.post(u, body, { observe: 'response', responseType: 'blob' }) :
this.http.get(u, { observe: 'response', responseType: 'blob' });
return req.pipe(tap(t => {
const filename = t.headers.get('content-disposition')
?.split(';')[1]
.split('filename')[1]
.split('=')[1]
.trim();
if (t.body)
saveAs(t.body, filename);
}));
}
}
HttpService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: HttpService, deps: [{ token: i1$1.HttpClient }, { token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Injectable });
HttpService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: HttpService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: HttpService, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}], ctorParameters: function () { return [{ type: i1$1.HttpClient }, { type: ConfigurationService }]; } });
class SubscriptionHandler {
constructor() {
this.subscriptions = [];
}
subscribe(obs, handler, error) {
let o = obs;
if (error) {
o = obs.pipe(catchError(err => {
console.error('An Error occurred', { err });
error(err);
return of(undefined);
}));
}
const sub = o.subscribe(t => handler(t));
this.subscriptions.push(sub);
return this;
}
unsubscribe() {
for (let sub of this.subscriptions)
sub.unsubscribe();
this.subscriptions = [];
}
}
class UtilitiesService {
all(data, pred) {
for (let i of data) {
if (!pred(i))
return false;
}
return true;
}
any(data, item) {
for (let i of data) {
if (i === item)
return true;
}
return false;
}
anyOf(data, want) {
for (let i of data) {
for (let w of want) {
if (w === i)
return true;
}
}
return false;
}
indexInBounds(data, next) {
if (next < 0)
return data.length - 1;
if (next >= data.length)
return 0;
return next;
}
ran(max, min = 0) {
return Math.floor(Math.random() * max) + min;
}
rand(data) {
return data[this.ran(data.length)];
}
}
UtilitiesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: UtilitiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
UtilitiesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: UtilitiesService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: UtilitiesService, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
class Subscribable {
constructor() {
this.subs = new SubscriptionHandler();
}
ngOnDestroy() {
this.subs.unsubscribe();
}
}
Subscribable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: Subscribable, deps: [], target: i0.ɵɵFactoryTarget.Component });
Subscribable.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: Subscribable, selector: "ng-component", ngImport: i0, template: '', isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: Subscribable, decorators: [{
type: Component,
args: [{ template: '' }]
}] });
class ImageFallbackDirective {
constructor(http) {
this.http = http;
this.group = 'fallback';
}
update() {
this.src = this.default || this.http.fallback(this.src || '', this.group, this.referer);
}
}
ImageFallbackDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: ImageFallbackDirective, deps: [{ token: HttpService }], target: i0.ɵɵFactoryTarget.Directive });
ImageFallbackDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.3", type: ImageFallbackDirective, selector: "img[fallback]", inputs: { src: "src", default: ["fallback", "default"], group: "group", referer: "referer" }, host: { listeners: { "error": "update()" }, properties: { "src": "this.src" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: ImageFallbackDirective, decorators: [{
type: Directive,
args: [{
selector: 'img[fallback]'
}]
}], ctorParameters: function () { return [{ type: HttpService }]; }, propDecorators: { src: [{
type: HostBinding,
args: ['src']
}, {
type: Input
}], default: [{
type: Input,
args: ['fallback']
}], group: [{
type: Input,
args: ['group']
}], referer: [{
type: Input,
args: ['referer']
}], update: [{
type: HostListener,
args: ['error']
}] } });
class ImageProxyDirective {
constructor(http) {
this.http = http;
this.group = 'anime';
}
set proxy(value) {
if (!value)
return;
this.src = this.http.fallback(value, this.group, this.referer);
}
}
ImageProxyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: ImageProxyDirective, deps: [{ token: HttpService }], target: i0.ɵɵFactoryTarget.Directive });
ImageProxyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.3", type: ImageProxyDirective, selector: "img[proxy]", inputs: { src: "src", group: "group", referer: "referer", proxy: "proxy" }, host: { properties: { "src": "this.src" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: ImageProxyDirective, decorators: [{
type: Directive,
args: [{
selector: 'img[proxy]'
}]
}], ctorParameters: function () { return [{ type: HttpService }]; }, propDecorators: { src: [{
type: HostBinding,
args: ['src']
}, {
type: Input
}], group: [{
type: Input
}], referer: [{
type: Input
}], proxy: [{
type: Input
}] } });
class MarkdownDirective {
constructor(host) {
this.host = host;
}
set markdown(content) {
if (this._current === content)
return;
this._current = content;
try {
this._marked = marked.parse(content || '');
}
catch { }
this.host.nativeElement.innerHTML = this._marked || this._current || '';
}
}
MarkdownDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: MarkdownDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
MarkdownDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.3", type: MarkdownDirective, selector: "[markdown]", inputs: { markdown: "markdown" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: MarkdownDirective, decorators: [{
type: Directive,
args: [{
selector: '[markdown]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { markdown: [{
type: Input
}] } });
class ObserverDirective {
constructor(element) {
this.element = element;
this.visible = new EventEmitter();
}
ngOnInit() {
this.observer = new IntersectionObserver((e) => {
e.forEach(entry => {
if (!entry.isIntersecting)
return;
this.visible.next(entry.target);
});
});
}
ngAfterViewInit() {
if (!this.observer)
return;
this.observer.observe(this.element.nativeElement);
}
ngOnDestroy() {
if (!this.observer)
return;
this.observer.disconnect();
this.observer = undefined;
}
}
ObserverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: ObserverDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
ObserverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.3", type: ObserverDirective, selector: "[observer]", outputs: { visible: "visible" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: ObserverDirective, decorators: [{
type: Directive,
args: [{
selector: '[observer]',
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { visible: [{
type: Output
}] } });
const DECLARATIONS = [
IconComponent,
ContainerComponent,
MarkdownDirective,
ObserverDirective,
ImageFallbackDirective,
ImageProxyDirective
];
class NgxBoxModule {
}
NgxBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgxBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.3", ngImport: i0, type: NgxBoxModule, declarations: [IconComponent,
ContainerComponent,
MarkdownDirective,
ObserverDirective,
ImageFallbackDirective,
ImageProxyDirective, ImageProxyDirective], imports: [CommonModule,
FormsModule,
MagicCircleModule], exports: [IconComponent,
ContainerComponent,
MarkdownDirective,
ObserverDirective,
ImageFallbackDirective,
ImageProxyDirective] });
NgxBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgxBoxModule, imports: [CommonModule,
FormsModule,
MagicCircleModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgxBoxModule, decorators: [{
type: NgModule,
args: [{
declarations: [
...DECLARATIONS,
ImageProxyDirective
],
imports: [
CommonModule,
FormsModule,
MagicCircleModule
],
exports: [
...DECLARATIONS
]
}]
}] });
/*
* Public API Surface of ngx-box
*/
/**
* Generated bundle index. Do not edit.
*/
export { AuthInterceptor, ConfigurationService, ContainerComponent, HttpService, IconComponent, ImageFallbackDirective, ImageProxyDirective, LocalStorageVar, MagicCircleComponent, MagicCircleModule, MarkdownDirective, NgxBoxModule, ObserverDirective, RingComponent, RxjsHttpResp, SquareComponent, Subscribable, SubscriptionHandler, UtilitiesService };
//# sourceMappingURL=cardboard-box-ngx-box.mjs.map