@obliczeniowo/elementary
Version:
Library made in Angular version 20
339 lines (329 loc) • 21.4 kB
JavaScript
import * as i2$1 from '@obliczeniowo/elementary/icons';
import { IconsModule } from '@obliczeniowo/elementary/icons';
import * as i1 from '@obliczeniowo/elementary/buttons';
import { ButtonsModule } from '@obliczeniowo/elementary/buttons';
import * as i0 from '@angular/core';
import { EventEmitter, TemplateRef, ViewContainerRef, ViewChild, Output, Component, Injector, Injectable, input, NgModule } from '@angular/core';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import { Subject } from 'rxjs';
import * as i2 from '@angular/cdk/overlay';
import { OverlayConfig, GlobalPositionStrategy, Overlay, OverlayModule } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
class DialogOverlayRef {
overlay;
content;
data;
afterClosed = new Subject();
constructor(overlay, content, data // pass data to modal
) {
this.overlay = overlay;
this.content = content;
this.data = data;
overlay.backdropClick().subscribe(() => this._close('backdropClick', undefined));
}
close(data) {
this._close('close', data);
}
_close(type, data) {
const overlayContainer = this.overlay.hostElement?.parentElement;
if (overlayContainer) {
DialogComponent.onClose(overlayContainer);
}
this.overlay.dispose();
this.afterClosed.next({
type,
data
});
this.afterClosed.complete();
}
}
class DialogComponent {
ref;
overlayContainer;
static dialogsCount = 0;
static onOpen() {
DialogComponent.dialogsCount++;
}
static onClose(overlayContainer) {
if (DialogComponent.dialogsCount) {
DialogComponent.dialogsCount--;
}
if (!DialogComponent.dialogsCount) {
overlayContainer.classList.remove('modal');
}
}
closed = new EventEmitter();
afterClosed = new Subject();
contentType;
content;
context;
viewContainerRef;
component;
constructor(ref, overlayContainer) {
this.ref = ref;
this.overlayContainer = overlayContainer;
DialogComponent.onOpen();
}
close() {
this._close('close', undefined);
this.closed.emit();
}
ngOnInit() {
this.content = this.ref.content;
if (typeof this.content === 'string') {
this.contentType = 'string';
}
else if (this.content instanceof TemplateRef) {
this.contentType = 'template';
this.context = {
close: this.close.bind(this.ref)
};
}
else {
this.contentType = 'component';
this.createComponent(this.content);
}
this.overlayContainer.getContainerElement().classList.add('modal');
}
ngOnDestroy() {
this._close('close');
this.ref?.close();
}
get template() {
return this.content;
}
createComponent(component) {
this.component = this.viewContainerRef.createComponent(component, {
injector: this.viewContainerRef.injector
});
return this.component;
}
_close(type, data) {
DialogComponent.onClose(this.overlayContainer.getContainerElement());
this.closed.emit();
this.ref.overlay.dispose();
this.afterClosed.next({
type,
data
});
this.afterClosed.complete();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DialogComponent, deps: [{ token: DialogOverlayRef }, { token: i2.OverlayContainer }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: DialogComponent, isStandalone: false, selector: "obl-dialog", outputs: { closed: "closed" }, viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: ["viewContainerRef"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"dialog modal-content\">\n <ng-container #viewContainerRef></ng-container>\n\n @if (contentType === 'template') {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n ></ng-container>\n } @else if(contentType === 'string') {\n {{ content }}\n }\n</div>\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:host{align-items:center;flex-direction:column;justify-content:center;display:flex;width:100%}:host .dialog{background-color:var(--obl-dialog-background);display:flex;width:100%;max-width:calc(100% - 40px);max-height:calc(100% - 40px)}\n"], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DialogComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-dialog', standalone: false, template: "<div class=\"dialog modal-content\">\n <ng-container #viewContainerRef></ng-container>\n\n @if (contentType === 'template') {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n ></ng-container>\n } @else if(contentType === 'string') {\n {{ content }}\n }\n</div>\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:host{align-items:center;flex-direction:column;justify-content:center;display:flex;width:100%}:host .dialog{background-color:var(--obl-dialog-background);display:flex;width:100%;max-width:calc(100% - 40px);max-height:calc(100% - 40px)}\n"] }]
}], ctorParameters: () => [{ type: DialogOverlayRef }, { type: i2.OverlayContainer }], propDecorators: { closed: [{
type: Output
}], viewContainerRef: [{
type: ViewChild,
args: ['viewContainerRef', { read: ViewContainerRef }]
}] } });
class DialogHeaderComponent {
closeAction = new EventEmitter();
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: DialogHeaderComponent, isStandalone: false, selector: "obl-dialog-header", outputs: { closeAction: "closeAction" }, ngImport: i0, template: "<h2>\n <ng-content select=\"title\"></ng-content>\n</h2>\n<button oblButton (click)=\"closeAction.emit()\">\n <obl-icon name=\"cancel\"></obl-icon>\n</button>\n", styles: [":host{display:flex;flex-direction:row;width:100%;background-color:#3a3a3a;box-sizing:border-box}:host h2{width:calc(100% - 40px);margin:0 0 0 40px;text-align:center;padding:0;display:flex;justify-content:center;align-items:center;color:#fff;font-size:16px}:host .obl-button{--obl-default-icon-color: white;--obl-button-background-color: red;--obl-button-background-hover-color: #f75353}\n"], dependencies: [{ kind: "directive", type: i1.ButtonDirective, selector: "oblButton, [oblButton]", inputs: ["oblButton", "icon", "blockWhenLoading", "loading", "toggle", "selected", "link", "target"], exportAs: ["oblButton"] }, { kind: "component", type: i2$1.IconComponent, selector: "obl-icon", inputs: ["name", "width"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DialogHeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-dialog-header', standalone: false, template: "<h2>\n <ng-content select=\"title\"></ng-content>\n</h2>\n<button oblButton (click)=\"closeAction.emit()\">\n <obl-icon name=\"cancel\"></obl-icon>\n</button>\n", styles: [":host{display:flex;flex-direction:row;width:100%;background-color:#3a3a3a;box-sizing:border-box}:host h2{width:calc(100% - 40px);margin:0 0 0 40px;text-align:center;padding:0;display:flex;justify-content:center;align-items:center;color:#fff;font-size:16px}:host .obl-button{--obl-default-icon-color: white;--obl-button-background-color: red;--obl-button-background-hover-color: #f75353}\n"] }]
}], propDecorators: { closeAction: [{
type: Output
}] } });
class DialogService {
overlay;
injector;
constructor(overlay, injector) {
this.overlay = overlay;
this.injector = injector;
}
open(content, options) {
const configs = new OverlayConfig({
...{
hasBackdrop: true,
panelClass: ['modal', 'is-active'],
backdropClass: 'modal-background',
width: '500px',
maxHeight: '100vh',
maxWidth: '100vw',
positionStrategy: new GlobalPositionStrategy(),
},
...options?.config
});
const overlayRef = this.overlay.create(configs);
const dialogOverlayRef = new DialogOverlayRef(overlayRef, content, options?.data);
const injector = this.createInjector(dialogOverlayRef, this.injector);
overlayRef.attach(new ComponentPortal(DialogComponent, null, injector));
return dialogOverlayRef;
}
createInjector(ref, inj) {
return Injector.create({
providers: [
{
provide: Overlay,
useValue: this.overlay
},
{
provide: DialogOverlayRef,
useValue: ref
}
],
parent: inj
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DialogService, deps: [{ token: i2.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DialogService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DialogService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [{ type: i2.Overlay }, { type: i0.Injector }] });
/**
* A simple dialog wrapper to use with ng-content to make a job done
*
* @example
*
* <obl-dialog-wrapper header="I want to play a game" #dialogWrapper>
* <div style="padding: 10px">Life or die make your choice</div>
* <div style="display: flex; justify-content: flex-end; padding: 10px; background-color: aliceblue;">
* <button oblButton (click)="dialogWrapper.close()">Life</button>
* <button oblButton (click)="dialogWrapper.close()">Die</button>
* </div>
* </obl-dialog-wrapper>
*
* <button (click)="dialogWrapper.open()" oblButton>Open dialog things</button>
*/
class DialogWrapperComponent {
dialog;
header = input.required();
closed = new EventEmitter();
cancel = new EventEmitter();
template;
data;
opened = false;
dialogRef;
constructor(dialog) {
this.dialog = dialog;
}
ngOnInit() {
}
ngOnDestroy() {
this.dialogRef?.close();
}
open(config) {
this.dialogRef = this.dialog.open(this.template, {
config: {
...{
width: '400px'
},
...config
}
});
this.opened = true;
this.data = config?.data;
}
close() {
this.dialogRef?.close();
this.closed.emit();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DialogWrapperComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: DialogWrapperComponent, isStandalone: false, selector: "obl-dialog-wrapper", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed", cancel: "cancel" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<ng-template #dialog>\n <div class=\"content\">\n <obl-dialog-header (closeAction)=\"close(); cancel.emit()\">\n <ng-container ngProjectAs=\"title\">\n {{ header() }}\n </ng-container>\n </obl-dialog-header>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".content{width:100%}\n"], dependencies: [{ kind: "component", type: DialogHeaderComponent, selector: "obl-dialog-header", outputs: ["closeAction"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DialogWrapperComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-dialog-wrapper', standalone: false, template: "<ng-template #dialog>\n <div class=\"content\">\n <obl-dialog-header (closeAction)=\"close(); cancel.emit()\">\n <ng-container ngProjectAs=\"title\">\n {{ header() }}\n </ng-container>\n </obl-dialog-header>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".content{width:100%}\n"] }]
}], ctorParameters: () => [{ type: DialogService }], propDecorators: { closed: [{
type: Output
}], cancel: [{
type: Output
}], template: [{
type: ViewChild,
args: ['dialog']
}] } });
/**
* Just message dialog that you can use by HTML:
*
* @example
*
* <obl-message-dialog header="I want to play a game" #message>
* <ng-container message>
* Live or die make your choice
* </ng-container>
* <ng-container buttons>
* <button oblButton (click)="message.close()">Live</button>
* <button oblButton (click)="message.close()">Die</button>
* </ng-container>
* </obl-message-dialog>
*
* <button (click)="message.open({ width: '600px' })" oblButton>Open dialog things</button>
*/
class MessageDialogComponent {
header = input.required();
dialog;
data;
open(config) {
this.dialog.open(config);
this.data = config?.data;
}
close() {
this.dialog.close();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: MessageDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: MessageDialogComponent, isStandalone: false, selector: "obl-message-dialog", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogWrapperComponent, descendants: true }], ngImport: i0, template: "<obl-dialog-wrapper [header]=\"header()\" #dialogWrapper>\n <div class=\"obl-dialog-message\" style=\"padding: 20px 10px 10px 10px;\">\n <ng-content select=\"[message]\"></ng-content>\n </div>\n <div class=\"obl-dialog-buttons\">\n <ng-content select=\"[buttons]\"></ng-content>\n </div>\n</obl-dialog-wrapper>", styles: [".obl-dialog-buttons{display:flex;justify-content:flex-end;padding:10px;background-color:#f3f3f3}.obl-dialog-message{padding:20px 10px 10px}\n"], dependencies: [{ kind: "component", type: DialogWrapperComponent, selector: "obl-dialog-wrapper", inputs: ["header"], outputs: ["closed", "cancel"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: MessageDialogComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-message-dialog', standalone: false, template: "<obl-dialog-wrapper [header]=\"header()\" #dialogWrapper>\n <div class=\"obl-dialog-message\" style=\"padding: 20px 10px 10px 10px;\">\n <ng-content select=\"[message]\"></ng-content>\n </div>\n <div class=\"obl-dialog-buttons\">\n <ng-content select=\"[buttons]\"></ng-content>\n </div>\n</obl-dialog-wrapper>", styles: [".obl-dialog-buttons{display:flex;justify-content:flex-end;padding:10px;background-color:#f3f3f3}.obl-dialog-message{padding:20px 10px 10px}\n"] }]
}], propDecorators: { dialog: [{
type: ViewChild,
args: [DialogWrapperComponent]
}] } });
class DialogsModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DialogsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: DialogsModule, declarations: [DialogComponent,
DialogHeaderComponent,
DialogWrapperComponent,
MessageDialogComponent], imports: [CommonModule,
OverlayModule,
ButtonsModule,
IconsModule], exports: [DialogComponent,
DialogHeaderComponent,
DialogWrapperComponent,
MessageDialogComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DialogsModule, imports: [CommonModule,
OverlayModule,
ButtonsModule,
IconsModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: DialogsModule, decorators: [{
type: NgModule,
args: [{
declarations: [
DialogComponent,
DialogHeaderComponent,
DialogWrapperComponent,
MessageDialogComponent,
],
imports: [
CommonModule,
OverlayModule,
ButtonsModule,
IconsModule
],
exports: [
DialogComponent,
DialogHeaderComponent,
DialogWrapperComponent,
MessageDialogComponent,
],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { DialogComponent, DialogHeaderComponent, DialogService, DialogWrapperComponent, DialogsModule, MessageDialogComponent };
//# sourceMappingURL=obliczeniowo-elementary-dialogs.mjs.map