@tetacom/ng-components 1.5.5 → 1.6.0

package/component/modal/dialog/dialog.component.d.ts

@@ -1,19 +1,21 @@
-import { OnInit } from '@angular/core';
 import { CurrentModal } from '../model/current-modal';
-import { DynamicData } from '../../../common/contract/dynamic-data';
+import { DialogButtonType } from '../model/dialog-data';
 import * as i0 from "@angular/core";
-export declare class DialogComponent implements OnInit {
+export declare class DialogComponent {
     modal: CurrentModal;
-    private data;
-    message: string;
-    buttonText: string;
-    buttonIcon: string;
-    buttonPalette: string;
-    showCancelButton: boolean;
-    constructor(modal: CurrentModal, data: DynamicData);
+    title: string;
+    private _text;
+    get text(): string;
+    set text(value: string);
+    private _confirm;
+    get confirm(): DialogButtonType;
+    set confirm(value: DialogButtonType);
+    private _decline;
+    get decline(): null | DialogButtonType;
+    set decline(value: null | DialogButtonType);
+    constructor(modal: CurrentModal);
     cancel(): void;
     ok(): void;
-    ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DialogComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DialogComponent, "teta-dialog", never, { "message": { "alias": "message"; "required": false; }; "buttonText": { "alias": "buttonText"; "required": false; }; "buttonIcon": { "alias": "buttonIcon"; "required": false; }; "buttonPalette": { "alias": "buttonPalette"; "required": false; }; "showCancelButton": { "alias": "showCancelButton"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DialogComponent, "teta-dialog", never, { "title": { "alias": "title"; "required": true; }; "text": { "alias": "text"; "required": false; }; "confirm": { "alias": "confirm"; "required": false; }; "decline": { "alias": "decline"; "required": false; }; }, {}, never, never, true, never>;
 }

package/component/modal/dialog.service.d.ts

@@ -1,11 +1,12 @@
 import { ModalService } from './modal.service';
 import { Observable } from 'rxjs';
+import { DialogDataType } from './model/dialog-data';
 import * as i0 from "@angular/core";
 export declare class DialogService {
     private _modal;
     constructor(_modal: ModalService);
-    alert(message: string): void;
-    confirm(message: string, buttonText?: string, buttonIcon?: string, buttonPalette?: string): Observable<boolean>;
+    alert(title: string): void;
+    confirm(confirmDialogData: DialogDataType): Observable<boolean>;
     private createDialog;
     static ɵfac: i0.ɵɵFactoryDeclaration<DialogService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DialogService>;

package/component/modal/model/dialog-data.d.ts

@@ -0,0 +1,11 @@
+export interface DialogButtonType {
+    text: string;
+    palette?: string;
+    icon?: string;
+}
+export interface DialogDataType {
+    title: string;
+    text?: string;
+    confirm?: DialogButtonType;
+    decline?: DialogButtonType;
+}

package/fesm2022/tetacom-ng-components.mjs

@@ -3836,6 +3836,7 @@ class OnlyNumberDirective {
             return;
         }
         this.validateValue(e.clipboardData.getData('text/plain'));
+        this._elementRef.nativeElement.dispatchEvent(new Event('input'));
         e.preventDefault();
     }
     onKeyDown(e) {
@@ -5093,9 +5094,26 @@ class CurrentModal {
 }
 
 class DialogComponent {
-    constructor(modal, data) {
+    get text() {
+        return this._text;
+    }
+    set text(value) {
+        this._text = value || '';
+    }
+    get confirm() {
+        return this._confirm;
+    }
+    set confirm(value) {
+        this._confirm = value || { text: 'common.ok', palette: 'primary' };
+    }
+    get decline() {
+        return this._decline;
+    }
+    set decline(value) {
+        this._decline = value !== undefined ? value : { text: 'common.cancel', palette: 'text' };
+    }
+    constructor(modal) {
         this.modal = modal;
-        this.data = data;
     }
     cancel() {
         this.modal.close({
@@ -5107,22 +5125,20 @@ class DialogComponent {
             reason: ModalCloseReason.resolve,
         });
     }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DialogComponent, deps: [{ token: CurrentModal }, { token: DynamicData }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DialogComponent, isStandalone: true, selector: "teta-dialog", inputs: { message: "message", buttonText: "buttonText", buttonIcon: "buttonIcon", buttonPalette: "buttonPalette", showCancelButton: "showCancelButton" }, ngImport: i0, template: "<div class=\"padding-2 font-body-2\">\n  {{ message | transloco }}\n</div>\n<teta-toolbar class=\"justify-content-end\">\n  @if (showCancelButton) {\n    <button teta-button (click)=\"cancel()\" [palette]=\"'text'\" [view]=\"'ghost'\">\n      {{ 'common.cancel' | transloco }}\n    </button>\n  }\n\n  <button teta-button (click)=\"ok()\" [square]=\"!buttonText?.length\" [palette]=\"buttonPalette\">\n    @if (buttonIcon) {\n      <teta-icon [name]=\"buttonIcon\"></teta-icon>\n    }\n    @if (buttonText?.length > 0) {\n      {{ buttonText | transloco }}\n    }\n  </button>\n</teta-toolbar>\n", styles: [":host{display:flex;flex-direction:column;width:300px}\n"], dependencies: [{ kind: "component", type: ToolbarComponent, selector: "teta-toolbar", inputs: ["palette", "class"] }, { kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$2.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DialogComponent, deps: [{ token: CurrentModal }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DialogComponent, isStandalone: true, selector: "teta-dialog", inputs: { title: "title", text: "text", confirm: "confirm", decline: "decline" }, ngImport: i0, template: "<h3 class=\"padding-2 font-title-2\">\n  {{ title | transloco }}\n</h3>\n\n@if (text) {\n  <p class=\"padding-2 font-body-3\">\n    {{ text | transloco }}\n  </p>\n}\n\n<teta-toolbar class=\"justify-content-end\">\n  @if (decline) {\n    <button teta-button (click)=\"cancel()\" [palette]=\"decline?.palette || 'text'\" [view]=\"'ghost'\">\n      @if (decline?.icon) {\n        <teta-icon [name]=\"decline.icon\"></teta-icon>\n      }\n      @if (decline.text) {\n        {{ decline.text | transloco }}\n      }\n    </button>\n  }\n\n  <button teta-button (click)=\"ok()\" [palette]=\"confirm?.palette || 'primary'\">\n    @if (confirm?.icon) {\n      <teta-icon [name]=\"confirm.icon\"></teta-icon>\n    }\n    @if (confirm.text) {\n      {{ confirm.text | transloco }}\n    }\n  </button>\n</teta-toolbar>\n", styles: [":host{display:flex;flex-direction:column;width:300px}\n"], dependencies: [{ kind: "component", type: ToolbarComponent, selector: "teta-toolbar", inputs: ["palette", "class"] }, { kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$2.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-dialog', imports: [ToolbarComponent, ButtonComponent, IconComponent, TranslocoModule], template: "<div class=\"padding-2 font-body-2\">\n  {{ message | transloco }}\n</div>\n<teta-toolbar class=\"justify-content-end\">\n  @if (showCancelButton) {\n    <button teta-button (click)=\"cancel()\" [palette]=\"'text'\" [view]=\"'ghost'\">\n      {{ 'common.cancel' | transloco }}\n    </button>\n  }\n\n  <button teta-button (click)=\"ok()\" [square]=\"!buttonText?.length\" [palette]=\"buttonPalette\">\n    @if (buttonIcon) {\n      <teta-icon [name]=\"buttonIcon\"></teta-icon>\n    }\n    @if (buttonText?.length > 0) {\n      {{ buttonText | transloco }}\n    }\n  </button>\n</teta-toolbar>\n", styles: [":host{display:flex;flex-direction:column;width:300px}\n"] }]
-        }], ctorParameters: () => [{ type: CurrentModal }, { type: DynamicData }], propDecorators: { message: [{
-                type: Input
-            }], buttonText: [{
-                type: Input
-            }], buttonIcon: [{
+            args: [{ selector: 'teta-dialog', imports: [ToolbarComponent, ButtonComponent, IconComponent, TranslocoModule], template: "<h3 class=\"padding-2 font-title-2\">\n  {{ title | transloco }}\n</h3>\n\n@if (text) {\n  <p class=\"padding-2 font-body-3\">\n    {{ text | transloco }}\n  </p>\n}\n\n<teta-toolbar class=\"justify-content-end\">\n  @if (decline) {\n    <button teta-button (click)=\"cancel()\" [palette]=\"decline?.palette || 'text'\" [view]=\"'ghost'\">\n      @if (decline?.icon) {\n        <teta-icon [name]=\"decline.icon\"></teta-icon>\n      }\n      @if (decline.text) {\n        {{ decline.text | transloco }}\n      }\n    </button>\n  }\n\n  <button teta-button (click)=\"ok()\" [palette]=\"confirm?.palette || 'primary'\">\n    @if (confirm?.icon) {\n      <teta-icon [name]=\"confirm.icon\"></teta-icon>\n    }\n    @if (confirm.text) {\n      {{ confirm.text | transloco }}\n    }\n  </button>\n</teta-toolbar>\n", styles: [":host{display:flex;flex-direction:column;width:300px}\n"] }]
+        }], ctorParameters: () => [{ type: CurrentModal }], propDecorators: { title: [{
+                type: Input,
+                args: [{ required: true }]
+            }], text: [{
                 type: Input
-            }], buttonPalette: [{
+            }], confirm: [{
                 type: Input
-            }], showCancelButton: [{
+            }], decline: [{
                 type: Input
             }] } });
 
@@ -5300,19 +5316,19 @@ class DialogService {
     constructor(_modal) {
         this._modal = _modal;
     }
-    alert(message) {
-        this.createDialog(message, 'common.ok', null, 'primary', false);
+    alert(title) {
+        this.createDialog({ title, decline: null });
     }
-    confirm(message, buttonText = 'common.ok', buttonIcon = null, buttonPalette = 'primary') {
-        return this.createDialog(message, buttonText, buttonIcon, buttonPalette, true).pipe(map((result) => result.reason === ModalCloseReason.resolve));
+    confirm(confirmDialogData) {
+        return this.createDialog(confirmDialogData).pipe(map((result) => result.reason === ModalCloseReason.resolve));
     }
-    createDialog(message, buttonText = 'common.ok', buttonIcon = null, buttonPalette = 'primary', showCancelButton = true) {
+    createDialog(dialogData) {
+        const { title, text, confirm, decline } = dialogData;
         const dialog = this._modal.create(DialogComponent, {
-            message,
-            buttonText,
-            buttonIcon,
-            buttonPalette,
-            showCancelButton,
+            title,
+            text,
+            confirm,
+            decline,
         }, {
             esc: true,
             backdrop: true,