@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.
120 lines (114 loc) • 6.4 kB
JavaScript
import * as i0 from '@angular/core';
import { viewChild, effect, Component, InjectionToken, inject, ApplicationRef, EnvironmentInjector, createComponent, Injector, Injectable } from '@angular/core';
import { randomString } from '@koalarx/utils/KlString';
class DialogContent {
dialogElement = viewChild('dialog');
constructor() {
effect(() => {
const dialog = this.dialogElement();
if (dialog) {
dialog.nativeElement.showModal();
}
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DialogContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.6", type: DialogContent, isStandalone: true, selector: "kl-dialog-content", viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog #dialog class=\"modal\">\n <div class=\"modal-box bg-base-200 border-4 border-neutral-200 dark:border-neutral-900 rounded-lg shadow-sm\">\n <ng-content select=\"[header]\" />\n <ng-content select=\"[content]\" />\n\n <div class=\"modal-action\">\n <ng-content select=\"[actions]\" />\n </div>\n </div>\n</dialog>\n" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DialogContent, decorators: [{
type: Component,
args: [{ selector: 'kl-dialog-content', template: "<dialog #dialog class=\"modal\">\n <div class=\"modal-box bg-base-200 border-4 border-neutral-200 dark:border-neutral-900 rounded-lg shadow-sm\">\n <ng-content select=\"[header]\" />\n <ng-content select=\"[content]\" />\n\n <div class=\"modal-action\">\n <ng-content select=\"[actions]\" />\n </div>\n </div>\n</dialog>\n" }]
}], ctorParameters: () => [] });
const DIALOG_CONFIG = new InjectionToken('DialogConfig');
const DIALOG_DATA = new InjectionToken('DialogData');
const DIALOG_APP_REF = new InjectionToken('DialogAppRef');
const DIALOG_AFTER_CLOSE_TRIGGER = new InjectionToken('DialogAfterCloseTrigger');
class Dialog {
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-dialog-container .dialog-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: DIALOG_CONFIG, useValue: config },
{ provide: DIALOG_APP_REF, useValue: this.appRef },
{
provide: DIALOG_REF_TOKEN,
useValue: () => componentRef,
},
{ provide: DIALOG_DATA, useValue: config?.data },
{
provide: DIALOG_AFTER_CLOSE_TRIGGER,
useValue: (trigger) => {
if (config?.afterClosed &&
(config.afterClosed.trigger === trigger ||
typeof trigger === 'object')) {
config.afterClosed.callback(trigger);
}
},
},
{
provide: DialogRef,
deps: [
DIALOG_CONFIG,
DIALOG_APP_REF,
DIALOG_REF_TOKEN,
DIALOG_AFTER_CLOSE_TRIGGER,
DIALOG_DATA,
],
},
],
}),
});
this.appRef.attachView(componentRef.hostView);
componentRef.changeDetectorRef.detectChanges();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Dialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Dialog, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Dialog, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
const DIALOG_REF_TOKEN = new InjectionToken('DialogRefToken');
class DialogRef {
appRef = inject(DIALOG_APP_REF);
componentRef = inject(DIALOG_REF_TOKEN);
afterCloseTrigger = inject(DIALOG_AFTER_CLOSE_TRIGGER);
dismiss(afterCloseTrigger) {
this.componentRef().destroy();
this.appRef.detachView(this.componentRef().hostView);
if (afterCloseTrigger) {
this.afterCloseTrigger(afterCloseTrigger);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DialogRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DialogRef });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DialogRef, decorators: [{
type: Injectable
}] });
/**
* Generated bundle index. Do not edit.
*/
export { DIALOG_AFTER_CLOSE_TRIGGER, DIALOG_APP_REF, DIALOG_CONFIG, DIALOG_DATA, DIALOG_REF_TOKEN, Dialog, DialogContent, DialogRef };
//# sourceMappingURL=koalarx-ui-shared-components-dialog.mjs.map