@koalarx/ui
Version:
Koala UI is a modern and accessible component library designed to speed up interface development in Angular projects. With simple integration and clear documentation, you can easily build robust and visually appealing applications.
119 lines (113 loc) • 6.4 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, InjectionToken, inject, ApplicationRef, EnvironmentInjector, createComponent, Injector, Injectable } from '@angular/core';
import { randomString } from '@koalarx/utils/KlString';
class SideWindowContent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SideWindowContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: SideWindowContent, isStandalone: true, selector: "kl-side-window-content", ngImport: i0, template: "<div class=\"fixed flex z-10000 bg-base-100/20 h-screen w-screen justify-end p-2\">\n <div class=\"w-auto h-full bg-base-200 rounded-xl shadow-2xl border-4 border-neutral-200 dark:border-neutral-900 animate-slide-in-left\">\n <ng-content />\n </div>\n</div>\n" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SideWindowContent, decorators: [{
type: Component,
args: [{ selector: 'kl-side-window-content', template: "<div class=\"fixed flex z-10000 bg-base-100/20 h-screen w-screen justify-end p-2\">\n <div class=\"w-auto h-full bg-base-200 rounded-xl shadow-2xl border-4 border-neutral-200 dark:border-neutral-900 animate-slide-in-left\">\n <ng-content />\n </div>\n</div>\n" }]
}] });
const SIDE_WINDOW_CONFIG = new InjectionToken('SideWindowConfig');
const SIDE_WINDOW_DATA = new InjectionToken('SideWindowData');
const SIDE_WINDOW_APP_REF = new InjectionToken('SideWindowAppRef');
const SIDE_WINDOW_AFTER_CLOSE_TRIGGER = new InjectionToken('SideWindowAfterCloseTrigger');
class SideWindow {
appRef = inject(ApplicationRef);
injector = inject(EnvironmentInjector);
generateElementId() {
let elementId;
do {
elementId = randomString(50, {
numbers: false,
lowercase: true,
uppercase: true,
specialCharacters: false,
});
} while (document.getElementById(elementId));
return elementId;
}
open(component, config) {
const main = document.querySelector('kl-side-window-container .side-window-container');
if (main) {
const elementId = this.generateElementId();
const container = main.appendChild(document.createElement('div'));
container.id = elementId;
const componentRef = createComponent(component, {
environmentInjector: this.injector,
hostElement: container,
elementInjector: Injector.create({
providers: [
{ provide: SIDE_WINDOW_CONFIG, useValue: config },
{ provide: SIDE_WINDOW_APP_REF, useValue: this.appRef },
{
provide: SIDE_WINDOW_REF_TOKEN,
useValue: () => componentRef,
},
{ provide: SIDE_WINDOW_DATA, useValue: config?.data },
{
provide: SIDE_WINDOW_AFTER_CLOSE_TRIGGER,
useValue: (trigger) => {
if (config?.afterClosed &&
(config.afterClosed.trigger === trigger ||
typeof trigger === 'object')) {
config.afterClosed.callback(trigger);
}
},
},
{
provide: SideWindowRef,
deps: [
SIDE_WINDOW_CONFIG,
SIDE_WINDOW_APP_REF,
SIDE_WINDOW_REF_TOKEN,
SIDE_WINDOW_AFTER_CLOSE_TRIGGER,
SIDE_WINDOW_DATA,
],
},
],
}),
});
this.appRef.attachView(componentRef.hostView);
componentRef.changeDetectorRef.detectChanges();
document.body.style.overflowY = 'hidden';
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SideWindow, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SideWindow, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SideWindow, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
const SIDE_WINDOW_REF_TOKEN = new InjectionToken('SideWindowRefToken');
class SideWindowRef {
appRef = inject(SIDE_WINDOW_APP_REF);
componentRef = inject(SIDE_WINDOW_REF_TOKEN);
afterCloseTrigger = inject(SIDE_WINDOW_AFTER_CLOSE_TRIGGER);
dismiss(afterCloseTrigger) {
const componentRef = this.componentRef();
componentRef.location.nativeElement
.querySelector('div div')
.classList.add('animate-slide-out-right');
document.body.style.overflowY = 'auto';
setTimeout(() => {
componentRef.destroy();
this.appRef.detachView(componentRef.hostView);
if (afterCloseTrigger) {
this.afterCloseTrigger(afterCloseTrigger);
}
}, 50);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SideWindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SideWindowRef });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SideWindowRef, decorators: [{
type: Injectable
}] });
/**
* Generated bundle index. Do not edit.
*/
export { SIDE_WINDOW_AFTER_CLOSE_TRIGGER, SIDE_WINDOW_APP_REF, SIDE_WINDOW_CONFIG, SIDE_WINDOW_DATA, SIDE_WINDOW_REF_TOKEN, SideWindow, SideWindowContent, SideWindowRef };
//# sourceMappingURL=koalarx-ui-shared-components-side-window.mjs.map