s4y-ui 5.3.1 → 5.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/s4y-ui.mjs +31 -3
- package/fesm2022/s4y-ui.mjs.map +1 -1
- package/lib/components/dynamic-dialog/dynamic-dialog.component.d.ts +4 -2
- package/lib/components/dynamic-dialog/dynamic-dialog.ref.d.ts +6 -1
- package/lib/components/dynamic-dialog/dynamic-dialog.service.d.ts +7 -6
- package/lib/components/dynamic-dialog/dynamic-dialog.tokens.d.ts +1 -1
- package/package.json +1 -1
package/fesm2022/s4y-ui.mjs
CHANGED
|
@@ -3384,6 +3384,7 @@ class DynamicDialogRef {
|
|
|
3384
3384
|
isClosing = false;
|
|
3385
3385
|
_container;
|
|
3386
3386
|
_opts;
|
|
3387
|
+
_contentComponentRef;
|
|
3387
3388
|
constructor(overlayRef) {
|
|
3388
3389
|
this.overlayRef = overlayRef;
|
|
3389
3390
|
this.afterOpened$ = this._afterOpened.asObservable();
|
|
@@ -3466,6 +3467,15 @@ class DynamicDialogRef {
|
|
|
3466
3467
|
}
|
|
3467
3468
|
this.overlayRef.dispose();
|
|
3468
3469
|
}
|
|
3470
|
+
_attachContentComponent(componentRef) {
|
|
3471
|
+
this._contentComponentRef = componentRef;
|
|
3472
|
+
}
|
|
3473
|
+
getComponent() {
|
|
3474
|
+
return this._contentComponentRef?.instance;
|
|
3475
|
+
}
|
|
3476
|
+
hasComponent() {
|
|
3477
|
+
return !!this._contentComponentRef;
|
|
3478
|
+
}
|
|
3469
3479
|
_attachForButtonUpdates(container, opts) {
|
|
3470
3480
|
this._container = container;
|
|
3471
3481
|
this._opts = opts;
|
|
@@ -3538,10 +3548,17 @@ class DynamicDialogComponent {
|
|
|
3538
3548
|
footerTemplate;
|
|
3539
3549
|
contentTemplate;
|
|
3540
3550
|
templateContext;
|
|
3551
|
+
portalOutlet;
|
|
3541
3552
|
constructor(ref, dialogOptions) {
|
|
3542
3553
|
this.ref = ref;
|
|
3543
3554
|
this.dialogOptions = dialogOptions;
|
|
3544
3555
|
}
|
|
3556
|
+
ngAfterViewInit() {
|
|
3557
|
+
if (this.portalOutlet?.attachedRef) {
|
|
3558
|
+
console.log();
|
|
3559
|
+
this.ref._attachContentComponent(this.portalOutlet.attachedRef);
|
|
3560
|
+
}
|
|
3561
|
+
}
|
|
3545
3562
|
get data() {
|
|
3546
3563
|
return this.injectedData;
|
|
3547
3564
|
}
|
|
@@ -3550,7 +3567,12 @@ class DynamicDialogComponent {
|
|
|
3550
3567
|
return;
|
|
3551
3568
|
this.okLoading = true;
|
|
3552
3569
|
try {
|
|
3553
|
-
const
|
|
3570
|
+
const component = this.ref.getComponent();
|
|
3571
|
+
const out = await toHandlerResult(this.dialogOptions?.onOk?.({
|
|
3572
|
+
data: this.injectedData,
|
|
3573
|
+
ref: this.ref,
|
|
3574
|
+
component,
|
|
3575
|
+
}));
|
|
3554
3576
|
if (out === false)
|
|
3555
3577
|
return;
|
|
3556
3578
|
const result = out === true || typeof out === 'undefined' ? undefined : out;
|
|
@@ -3566,9 +3588,11 @@ class DynamicDialogComponent {
|
|
|
3566
3588
|
return;
|
|
3567
3589
|
// this.cancelLoading = true;
|
|
3568
3590
|
try {
|
|
3591
|
+
const component = this.ref.getComponent();
|
|
3569
3592
|
const out = await toHandlerResult(this.dialogOptions?.onCancel?.({
|
|
3570
3593
|
data: this.injectedData,
|
|
3571
3594
|
ref: this.ref,
|
|
3595
|
+
component,
|
|
3572
3596
|
}));
|
|
3573
3597
|
if (out === false)
|
|
3574
3598
|
return; // NÃO fecha
|
|
@@ -3580,7 +3604,7 @@ class DynamicDialogComponent {
|
|
|
3580
3604
|
}
|
|
3581
3605
|
}
|
|
3582
3606
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicDialogComponent, deps: [{ token: DynamicDialogRef }, { token: DYNAMIC_DIALOG_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
|
|
3583
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DynamicDialogComponent, isStandalone: true, selector: "s4y-dynamic-dialog", inputs: { contentPortal: "contentPortal", headerTemplate: "headerTemplate", footerTemplate: "footerTemplate", contentTemplate: "contentTemplate", templateContext: "templateContext" }, host: { attributes: { "role": "dialog", "aria-modal": "true", "tabindex": "-1" }, properties: { "attr.aria-labelledby": "'s4y-dialog-title'" }, classAttribute: "s4y-dialog" }, ngImport: i0, template: "<article class=\"s4y-dialog\" role=\"dialog\" aria-modal=\"true\">\r\n @if (headerTemplate) {\r\n <header\r\n class=\"s4y-dialog-header\"\r\n [class.s4y-centered-header]=\"dialogOptions?.centeredHeader\"\r\n [ngStyle]=\"dialogOptions?.headerStyle\"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"templateContext\"\r\n >\r\n </ng-container>\r\n </header>\r\n } @else if (dialogOptions?.title || dialogOptions?.description) {\r\n <header\r\n class=\"s4y-dialog-header\"\r\n [class.s4y-centered-header]=\"dialogOptions?.centeredHeader\"\r\n [ngStyle]=\"dialogOptions?.headerStyle\"\r\n >\r\n <h2 class=\"s4y-dialog-header__title\">{{ dialogOptions?.title }}</h2>\r\n <p class=\"s4y-dialog-header__description\">\r\n {{ dialogOptions?.description }}\r\n </p>\r\n </header>\r\n }\r\n\r\n @if (dialogOptions?.closable || dialogOptions?.closable == undefined) {\r\n <button class=\"s4y-dialog-close-btn\" (click)=\"ref.closeAnimated(undefined, 'close')\" aria-label=\"Fechar\">\r\n ×\r\n </button>\r\n }\r\n\r\n <section class=\"s4y-dialog__body\" [ngStyle]=\"dialogOptions?.bodyStyle\">\r\n @if (contentTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"contentTemplate\"\r\n [ngTemplateOutletContext]=\"templateContext\"\r\n >\r\n </ng-container>\r\n } @else {\r\n <ng-template\r\n cdkPortalOutlet\r\n [cdkPortalOutlet]=\"contentPortal\"\r\n ></ng-template>\r\n }\r\n </section>\r\n\r\n @let cancelBtnOptions = this.dialogOptions?.cancelBtnOptions;\r\n @let okBtnOptions = this.dialogOptions?.okBtnOptions;\r\n\r\n @if (!(dialogOptions?.hideFooter ?? false)) {\r\n <footer\r\n class=\"flex gap-1 s4y-dialog__footer\"\r\n [ngStyle]=\"dialogOptions?.footerStyle\"\r\n >\r\n @if (footerTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"footerTemplate\"\r\n [ngTemplateOutletContext]=\"templateContext\"\r\n >\r\n </ng-container>\r\n } @else {\r\n @if (cancelBtnOptions?.text) {\r\n <button\r\n (click)=\"onCancel()\"\r\n [loading]=\"cancelLoading || (cancelBtnOptions?.loading ?? false)\"\r\n [fullWidth]=\"cancelBtnOptions?.fullWidth ?? false\"\r\n s4yButton\r\n [variant]=\"cancelBtnOptions?.variant ?? 'gray'\"\r\n [outlined]=\"cancelBtnOptions?.outlined ?? true\"\r\n [disabled]=\"cancelBtnOptions?.disabled ?? false\"\r\n [size]=\"cancelBtnOptions?.size ?? 'small'\"\r\n >\r\n {{ cancelBtnOptions?.text ?? \"Cancelar\" }}\r\n </button>\r\n }\r\n @if (okBtnOptions?.text) {\r\n <button\r\n (click)=\"onOk()\"\r\n [loading]=\"okLoading || (okBtnOptions?.loading ?? false)\"\r\n [fullWidth]=\"okBtnOptions?.fullWidth ?? false\"\r\n s4yButton\r\n [variant]=\"okBtnOptions?.variant ?? 'primary'\"\r\n [outlined]=\"okBtnOptions?.outlined ?? false\"\r\n [disabled]=\"okBtnOptions?.disabled ?? false\"\r\n [size]=\"okBtnOptions?.size ?? 'small'\"\r\n >\r\n {{ okBtnOptions?.text ?? \"Ok\" }}\r\n </button>\r\n }\r\n }\r\n </footer>\r\n }\r\n</article>\r\n", styles: [".s4y-dialog{display:flex;flex-direction:column;max-height:90dvh;overflow:hidden;position:relative}.s4y-dialog-header{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;padding-bottom:1.4rem;gap:.4rem}.s4y-centered-header{align-items:center}.s4y-dialog-action{display:flex;align-items:center;justify-content:space-between;width:100%}.s4y-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:1rem;padding-top:1.4rem;flex-shrink:0}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-dialog__footer{flex-direction:column-reverse}.s4y-dialog__footer button{width:100%}}.s4y-dialog-header__title{font-size:1.8rem;color:var(--primary-color)}.s4y-dialog-header__description{font-size:2rem;font-size:1.4rem;font-weight:400;color:var(--gray-700)}.s4y-dialog__body{flex:1 1 auto;min-height:0;overflow-y:auto}.s4y-dialog-close-btn{padding:0rem 1.4rem;cursor:pointer;font-size:2rem;position:absolute;right:0;top:0;transition:.5 ease}.s4y-dialog-close-btn:hover{background-color:var(--gray-200);border-radius:var(--radius)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: ButtonComponent, selector: "button[s4yButton], a[s4yButton]", inputs: ["disabled", "outlined", "loading", "size", "variant", "fullWidth", "iconAligned"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [] });
|
|
3607
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DynamicDialogComponent, isStandalone: true, selector: "s4y-dynamic-dialog", inputs: { contentPortal: "contentPortal", headerTemplate: "headerTemplate", footerTemplate: "footerTemplate", contentTemplate: "contentTemplate", templateContext: "templateContext" }, host: { attributes: { "role": "dialog", "aria-modal": "true", "tabindex": "-1" }, properties: { "attr.aria-labelledby": "'s4y-dialog-title'" }, classAttribute: "s4y-dialog" }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true }], ngImport: i0, template: "<article class=\"s4y-dialog\" role=\"dialog\" aria-modal=\"true\">\r\n @if (headerTemplate) {\r\n <header\r\n class=\"s4y-dialog-header\"\r\n [class.s4y-centered-header]=\"dialogOptions?.centeredHeader\"\r\n [ngStyle]=\"dialogOptions?.headerStyle\"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"templateContext\"\r\n >\r\n </ng-container>\r\n </header>\r\n } @else if (dialogOptions?.title || dialogOptions?.description) {\r\n <header\r\n class=\"s4y-dialog-header\"\r\n [class.s4y-centered-header]=\"dialogOptions?.centeredHeader\"\r\n [ngStyle]=\"dialogOptions?.headerStyle\"\r\n >\r\n <h2 class=\"s4y-dialog-header__title\">{{ dialogOptions?.title }}</h2>\r\n <p class=\"s4y-dialog-header__description\">\r\n {{ dialogOptions?.description }}\r\n </p>\r\n </header>\r\n }\r\n\r\n @if (dialogOptions?.closable || dialogOptions?.closable == undefined) {\r\n <button class=\"s4y-dialog-close-btn\" (click)=\"ref.closeAnimated(undefined, 'close')\" aria-label=\"Fechar\">\r\n ×\r\n </button>\r\n }\r\n\r\n <section class=\"s4y-dialog__body\" [ngStyle]=\"dialogOptions?.bodyStyle\">\r\n @if (contentTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"contentTemplate\"\r\n [ngTemplateOutletContext]=\"templateContext\"\r\n >\r\n </ng-container>\r\n } @else {\r\n <ng-template\r\n cdkPortalOutlet\r\n [cdkPortalOutlet]=\"contentPortal\"\r\n ></ng-template>\r\n }\r\n </section>\r\n\r\n @let cancelBtnOptions = this.dialogOptions?.cancelBtnOptions;\r\n @let okBtnOptions = this.dialogOptions?.okBtnOptions;\r\n\r\n @if (!(dialogOptions?.hideFooter ?? false)) {\r\n <footer\r\n class=\"flex gap-1 s4y-dialog__footer\"\r\n [ngStyle]=\"dialogOptions?.footerStyle\"\r\n >\r\n @if (footerTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"footerTemplate\"\r\n [ngTemplateOutletContext]=\"templateContext\"\r\n >\r\n </ng-container>\r\n } @else {\r\n @if (cancelBtnOptions?.text) {\r\n <button\r\n (click)=\"onCancel()\"\r\n [loading]=\"cancelLoading || (cancelBtnOptions?.loading ?? false)\"\r\n [fullWidth]=\"cancelBtnOptions?.fullWidth ?? false\"\r\n s4yButton\r\n [variant]=\"cancelBtnOptions?.variant ?? 'gray'\"\r\n [outlined]=\"cancelBtnOptions?.outlined ?? true\"\r\n [disabled]=\"cancelBtnOptions?.disabled ?? false\"\r\n [size]=\"cancelBtnOptions?.size ?? 'small'\"\r\n >\r\n {{ cancelBtnOptions?.text ?? \"Cancelar\" }}\r\n </button>\r\n }\r\n @if (okBtnOptions?.text) {\r\n <button\r\n (click)=\"onOk()\"\r\n [loading]=\"okLoading || (okBtnOptions?.loading ?? false)\"\r\n [fullWidth]=\"okBtnOptions?.fullWidth ?? false\"\r\n s4yButton\r\n [variant]=\"okBtnOptions?.variant ?? 'primary'\"\r\n [outlined]=\"okBtnOptions?.outlined ?? false\"\r\n [disabled]=\"okBtnOptions?.disabled ?? false\"\r\n [size]=\"okBtnOptions?.size ?? 'small'\"\r\n >\r\n {{ okBtnOptions?.text ?? \"Ok\" }}\r\n </button>\r\n }\r\n }\r\n </footer>\r\n }\r\n</article>\r\n", styles: [".s4y-dialog{display:flex;flex-direction:column;max-height:90dvh;overflow:hidden;position:relative}.s4y-dialog-header{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;padding-bottom:1.4rem;gap:.4rem}.s4y-centered-header{align-items:center}.s4y-dialog-action{display:flex;align-items:center;justify-content:space-between;width:100%}.s4y-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:1rem;padding-top:1.4rem;flex-shrink:0}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-dialog__footer{flex-direction:column-reverse}.s4y-dialog__footer button{width:100%}}.s4y-dialog-header__title{font-size:1.8rem;color:var(--primary-color)}.s4y-dialog-header__description{font-size:2rem;font-size:1.4rem;font-weight:400;color:var(--gray-700)}.s4y-dialog__body{flex:1 1 auto;min-height:0;overflow-y:auto}.s4y-dialog-close-btn{padding:0rem 1.4rem;cursor:pointer;font-size:2rem;position:absolute;right:0;top:0;transition:.5 ease}.s4y-dialog-close-btn:hover{background-color:var(--gray-200);border-radius:var(--radius)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: ButtonComponent, selector: "button[s4yButton], a[s4yButton]", inputs: ["disabled", "outlined", "loading", "size", "variant", "fullWidth", "iconAligned"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [] });
|
|
3584
3608
|
}
|
|
3585
3609
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicDialogComponent, decorators: [{
|
|
3586
3610
|
type: Component,
|
|
@@ -3604,12 +3628,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3604
3628
|
type: Input
|
|
3605
3629
|
}], templateContext: [{
|
|
3606
3630
|
type: Input
|
|
3631
|
+
}], portalOutlet: [{
|
|
3632
|
+
type: ViewChild,
|
|
3633
|
+
args: [CdkPortalOutlet, { static: false }]
|
|
3607
3634
|
}] } });
|
|
3608
3635
|
|
|
3609
3636
|
class DynamicDialogService {
|
|
3610
3637
|
overlay = inject(Overlay);
|
|
3611
3638
|
rootInjector = inject(Injector);
|
|
3612
|
-
open(component, opts
|
|
3639
|
+
open(component, opts) {
|
|
3640
|
+
opts = opts ?? {};
|
|
3613
3641
|
const overlayRef = this.overlay.create(this.buildOverlayConfig(opts));
|
|
3614
3642
|
overlayRef.updateSize({
|
|
3615
3643
|
width: opts.width ?? 'auto',
|