@ascentgl/ads-ui 0.0.48 → 0.0.50
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.
|
@@ -5691,12 +5691,38 @@ var ModalPanelClass;
|
|
|
5691
5691
|
ModalPanelClass["Confirmation"] = "ads-confirmation";
|
|
5692
5692
|
})(ModalPanelClass || (ModalPanelClass = {}));
|
|
5693
5693
|
class AdsModalComponent {
|
|
5694
|
-
constructor(dialogRef, registry, data) {
|
|
5694
|
+
constructor(dialogRef, registry, renderer, elRef, data) {
|
|
5695
5695
|
this.dialogRef = dialogRef;
|
|
5696
5696
|
this.registry = registry;
|
|
5697
|
+
this.renderer = renderer;
|
|
5698
|
+
this.elRef = elRef;
|
|
5697
5699
|
this.data = data;
|
|
5700
|
+
/** @ignore */
|
|
5701
|
+
this.defaultHeaderPadding = '24px 0 16px 24px';
|
|
5702
|
+
/** @ignore */
|
|
5703
|
+
this.defaultContentPadding = '0 24px 24px 24px';
|
|
5704
|
+
/** @ignore */
|
|
5705
|
+
this.defaultActionPadding = '24px';
|
|
5698
5706
|
this.registry.register(adsIconCross);
|
|
5699
5707
|
}
|
|
5708
|
+
/** @ignore */
|
|
5709
|
+
ngAfterViewInit() {
|
|
5710
|
+
const dialogTitle = this.elRef.nativeElement.querySelector('.mat-mdc-dialog-title');
|
|
5711
|
+
if (dialogTitle) {
|
|
5712
|
+
const headerPadding = this.data.headerPadding || this.defaultHeaderPadding;
|
|
5713
|
+
this.renderer.setStyle(dialogTitle, 'padding', headerPadding);
|
|
5714
|
+
}
|
|
5715
|
+
const dialogContent = this.elRef.nativeElement.querySelector('.mat-mdc-dialog-content');
|
|
5716
|
+
if (dialogContent) {
|
|
5717
|
+
const contentPadding = this.data.contentPadding || this.defaultContentPadding;
|
|
5718
|
+
this.renderer.setStyle(dialogContent, 'padding', contentPadding);
|
|
5719
|
+
}
|
|
5720
|
+
const dialogFooter = this.elRef.nativeElement.querySelector('.mat-mdc-dialog-actions');
|
|
5721
|
+
if (dialogFooter) {
|
|
5722
|
+
const footerPadding = this.data.actionsPadding || this.defaultActionPadding;
|
|
5723
|
+
this.renderer.setStyle(dialogFooter, 'padding', footerPadding);
|
|
5724
|
+
}
|
|
5725
|
+
}
|
|
5700
5726
|
onCancel() {
|
|
5701
5727
|
this.dialogRef.close(false);
|
|
5702
5728
|
}
|
|
@@ -5706,13 +5732,13 @@ class AdsModalComponent {
|
|
|
5706
5732
|
onClose() {
|
|
5707
5733
|
this.dialogRef.close();
|
|
5708
5734
|
}
|
|
5709
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsModalComponent, deps: [{ token: i1$4.MatDialogRef }, { token: i1.AdsIconRegistry }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5710
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsModalComponent, isStandalone: false, selector: "ads-modal", ngImport: i0, template: "<div mat-dialog-title>\n @if (data.headerTemplate) {\n <ng-container *ngTemplateOutlet=\"data.headerTemplate; context: { data: data.templateData }\" />\n }\n {{ data.title }}\n <div class=\"cross-icon-container\">\n <ads-icon name=\"cross\" size=\"xxs\" stroke=\"iconPrimary\" (click)=\"onClose()\" />\n </div>\n</div>\n\n<div mat-dialog-content>\n @if (data.contentTemplate) {\n <ng-container *ngTemplateOutlet=\"data.contentTemplate; context: { data: data.templateData }\" />\n }\n {{ data.content }}\n</div>\n\n<div mat-dialog-actions>\n @if (data.actionsTemplate) {\n <ng-container *ngTemplateOutlet=\"data.actionsTemplate; context: { data: data.templateData }\" />\n } @else {\n @if (!data.hideCancel) {\n
|
|
5735
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsModalComponent, deps: [{ token: i1$4.MatDialogRef }, { token: i1.AdsIconRegistry }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5736
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsModalComponent, isStandalone: false, selector: "ads-modal", ngImport: i0, template: "<div mat-dialog-title>\n @if (data.headerTemplate) {\n <ng-container *ngTemplateOutlet=\"data.headerTemplate; context: { data: data.templateData }\" />\n }\n {{ data.title }}\n <div class=\"cross-icon-container\">\n <ads-icon name=\"cross\" size=\"xxs\" stroke=\"iconPrimary\" (click)=\"onClose()\" />\n </div>\n</div>\n\n<div mat-dialog-content>\n @if (data.contentTemplate) {\n <ng-container *ngTemplateOutlet=\"data.contentTemplate; context: { data: data.templateData }\" />\n }\n {{ data.content }}\n</div>\n\n<div mat-dialog-actions>\n @if (data.actionsTemplate) {\n <ng-container *ngTemplateOutlet=\"data.actionsTemplate; context: { data: data.templateData }\" />\n } @else {\n <div class=\"actions-container\">\n @if (!data.hideCancel) {\n <ads-button variant=\"secondary\" (click)=\"onCancel()\">\n @if (data.cancelButtonText) {\n {{ data.cancelButtonText }}\n } @else {\n {{ 'Cancel' }}\n }\n </ads-button>\n }\n <ads-button variant=\"primary\" (click)=\"onSubmit()\">\n @if (data.confirmButtonText) {\n {{ data.confirmButtonText }}\n } @else {\n {{ 'Save' }}\n }\n </ads-button>\n </div>\n }\n</div>\n", styles: ["::ng-deep .mat-mdc-dialog-surface{--mdc-dialog-container-shape: 10px;--mdc-dialog-container-color: var(--color-white)}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title{display:flex;justify-content:space-between;--mdc-dialog-subhead-color: var(--color-dark);--mdc-dialog-subhead-line-height: 26px;--mdc-dialog-subhead-size: 20px;--mdc-dialog-subhead-weight: 600}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title:before{content:none}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .cross-icon-container{display:flex;align-items:center;padding-right:16px}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .cross-icon-container ads-icon,::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .cross-icon-container ads-icon>svg{cursor:pointer;width:16px!important;height:16px!important}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-container .mat-mdc-dialog-title+.mat-mdc-dialog-content{padding-top:8px}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-content{letter-spacing:normal!important;--mdc-dialog-supporting-text-color: var(--color-medium);--mdc-dialog-supporting-text-line-height: 21px;--mdc-dialog-supporting-text-size: 16px;--mdc-dialog-supporting-text-weight: 400}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions{border-top:1px solid var(--color-light);display:block}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions .actions-container{gap:16px;display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: AdsButtonComponent, selector: "ads-button", inputs: ["id", "variant", "disabled", "size", "type"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
5711
5737
|
}
|
|
5712
5738
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsModalComponent, decorators: [{
|
|
5713
5739
|
type: Component,
|
|
5714
|
-
args: [{ selector: 'ads-modal', standalone: false, template: "<div mat-dialog-title>\n @if (data.headerTemplate) {\n <ng-container *ngTemplateOutlet=\"data.headerTemplate; context: { data: data.templateData }\" />\n }\n {{ data.title }}\n <div class=\"cross-icon-container\">\n <ads-icon name=\"cross\" size=\"xxs\" stroke=\"iconPrimary\" (click)=\"onClose()\" />\n </div>\n</div>\n\n<div mat-dialog-content>\n @if (data.contentTemplate) {\n <ng-container *ngTemplateOutlet=\"data.contentTemplate; context: { data: data.templateData }\" />\n }\n {{ data.content }}\n</div>\n\n<div mat-dialog-actions>\n @if (data.actionsTemplate) {\n <ng-container *ngTemplateOutlet=\"data.actionsTemplate; context: { data: data.templateData }\" />\n } @else {\n @if (!data.hideCancel) {\n
|
|
5715
|
-
}], ctorParameters: () => [{ type: i1$4.MatDialogRef }, { type: i1.AdsIconRegistry }, { type: undefined, decorators: [{
|
|
5740
|
+
args: [{ selector: 'ads-modal', standalone: false, template: "<div mat-dialog-title>\n @if (data.headerTemplate) {\n <ng-container *ngTemplateOutlet=\"data.headerTemplate; context: { data: data.templateData }\" />\n }\n {{ data.title }}\n <div class=\"cross-icon-container\">\n <ads-icon name=\"cross\" size=\"xxs\" stroke=\"iconPrimary\" (click)=\"onClose()\" />\n </div>\n</div>\n\n<div mat-dialog-content>\n @if (data.contentTemplate) {\n <ng-container *ngTemplateOutlet=\"data.contentTemplate; context: { data: data.templateData }\" />\n }\n {{ data.content }}\n</div>\n\n<div mat-dialog-actions>\n @if (data.actionsTemplate) {\n <ng-container *ngTemplateOutlet=\"data.actionsTemplate; context: { data: data.templateData }\" />\n } @else {\n <div class=\"actions-container\">\n @if (!data.hideCancel) {\n <ads-button variant=\"secondary\" (click)=\"onCancel()\">\n @if (data.cancelButtonText) {\n {{ data.cancelButtonText }}\n } @else {\n {{ 'Cancel' }}\n }\n </ads-button>\n }\n <ads-button variant=\"primary\" (click)=\"onSubmit()\">\n @if (data.confirmButtonText) {\n {{ data.confirmButtonText }}\n } @else {\n {{ 'Save' }}\n }\n </ads-button>\n </div>\n }\n</div>\n", styles: ["::ng-deep .mat-mdc-dialog-surface{--mdc-dialog-container-shape: 10px;--mdc-dialog-container-color: var(--color-white)}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title{display:flex;justify-content:space-between;--mdc-dialog-subhead-color: var(--color-dark);--mdc-dialog-subhead-line-height: 26px;--mdc-dialog-subhead-size: 20px;--mdc-dialog-subhead-weight: 600}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title:before{content:none}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .cross-icon-container{display:flex;align-items:center;padding-right:16px}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .cross-icon-container ads-icon,::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .cross-icon-container ads-icon>svg{cursor:pointer;width:16px!important;height:16px!important}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-container .mat-mdc-dialog-title+.mat-mdc-dialog-content{padding-top:8px}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-content{letter-spacing:normal!important;--mdc-dialog-supporting-text-color: var(--color-medium);--mdc-dialog-supporting-text-line-height: 21px;--mdc-dialog-supporting-text-size: 16px;--mdc-dialog-supporting-text-weight: 400}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions{border-top:1px solid var(--color-light);display:block}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions .actions-container{gap:16px;display:flex;justify-content:flex-end}\n"] }]
|
|
5741
|
+
}], ctorParameters: () => [{ type: i1$4.MatDialogRef }, { type: i1.AdsIconRegistry }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
5716
5742
|
type: Inject,
|
|
5717
5743
|
args: [MAT_DIALOG_DATA]
|
|
5718
5744
|
}] }] });
|