@sebgroup/green-angular 3.0.3 → 3.1.0
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/esm2020/lib/context-menu/context-menu.component.mjs +3 -3
- package/esm2020/lib/datepicker/datepicker.component.mjs +2 -3
- package/esm2020/lib/dropdown/dropdown.component.mjs +16 -5
- package/esm2020/lib/modal/modal.component.mjs +62 -24
- package/fesm2015/sebgroup-green-angular.mjs +73 -28
- package/fesm2015/sebgroup-green-angular.mjs.map +1 -1
- package/fesm2020/sebgroup-green-angular.mjs +76 -28
- package/fesm2020/sebgroup-green-angular.mjs.map +1 -1
- package/lib/context-menu/context-menu.component.d.ts +8 -1
- package/lib/dropdown/dropdown.component.d.ts +4 -2
- package/package.json +4 -3
|
@@ -350,10 +350,10 @@ class NggContextMenuComponent {
|
|
|
350
350
|
}
|
|
351
351
|
}
|
|
352
352
|
NggContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggContextMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
353
|
-
NggContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggContextMenuComponent, selector: "ngg-context-menu", inputs: { direction: "direction", menuItems: "menuItems", menuItemTemplate: "menuItemTemplate", menuAnchorTemplate: "menuAnchorTemplate", closeOnScroll: "closeOnScroll" }, outputs: { contextMenuItemClicked: "contextMenuItemClicked" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["contextMenuPopover"], descendants: true }, { propertyName: "anchor", first: true, predicate: ["contextMenuAnchor"], descendants: true }], ngImport: i0, template: "<gds-context-menu\n *nggCoreElement\n data-testid=\"context-menu\"\n [placement]=\"placement\"\n [open]=\"isActive\"\n>\n <
|
|
353
|
+
NggContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggContextMenuComponent, selector: "ngg-context-menu", inputs: { direction: "direction", menuItems: "menuItems", menuItemTemplate: "menuItemTemplate", menuAnchorTemplate: "menuAnchorTemplate", closeOnScroll: "closeOnScroll" }, outputs: { contextMenuItemClicked: "contextMenuItemClicked" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["contextMenuPopover"], descendants: true }, { propertyName: "anchor", first: true, predicate: ["contextMenuAnchor"], descendants: true }], ngImport: i0, template: "<gds-context-menu\n *nggCoreElement\n data-testid=\"context-menu\"\n [placement]=\"placement\"\n [open]=\"isActive\"\n>\n <div style=\"display: contents\" slot=\"trigger\">\n <ng-container\n [ngTemplateOutlet]=\"menuAnchorTemplate ?? defaultButtonTemplate\"\n >\n </ng-container>\n </div>\n <ng-container *ngFor=\"let menuItem of menuItems\">\n <gds-menu-item *nggCoreElement (click)=\"onItemClick(menuItem)\">\n <ng-container\n [ngTemplateOutlet]=\"menuItemTemplate ?? defaultMenuItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"\n >\n </ng-container>\n </gds-menu-item>\n </ng-container>\n</gds-context-menu>\n\n<ng-template #defaultMenuItemTemplate let-menuItem>\n <span>{{ menuItem.label }}</span>\n</ng-template>\n\n<ng-template #defaultButtonTemplate>\n <i class=\"sg-icon sg-icon-ellipsis\">Open context menu</i>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NggCoreElementDirective, selector: "[nggCoreElement]" }] });
|
|
354
354
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggContextMenuComponent, decorators: [{
|
|
355
355
|
type: Component,
|
|
356
|
-
args: [{ selector: 'ngg-context-menu', template: "<gds-context-menu\n *nggCoreElement\n data-testid=\"context-menu\"\n [placement]=\"placement\"\n [open]=\"isActive\"\n>\n <
|
|
356
|
+
args: [{ selector: 'ngg-context-menu', template: "<gds-context-menu\n *nggCoreElement\n data-testid=\"context-menu\"\n [placement]=\"placement\"\n [open]=\"isActive\"\n>\n <div style=\"display: contents\" slot=\"trigger\">\n <ng-container\n [ngTemplateOutlet]=\"menuAnchorTemplate ?? defaultButtonTemplate\"\n >\n </ng-container>\n </div>\n <ng-container *ngFor=\"let menuItem of menuItems\">\n <gds-menu-item *nggCoreElement (click)=\"onItemClick(menuItem)\">\n <ng-container\n [ngTemplateOutlet]=\"menuItemTemplate ?? defaultMenuItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"\n >\n </ng-container>\n </gds-menu-item>\n </ng-container>\n</gds-context-menu>\n\n<ng-template #defaultMenuItemTemplate let-menuItem>\n <span>{{ menuItem.label }}</span>\n</ng-template>\n\n<ng-template #defaultButtonTemplate>\n <i class=\"sg-icon sg-icon-ellipsis\">Open context menu</i>\n</ng-template>\n" }]
|
|
357
357
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { direction: [{
|
|
358
358
|
type: Input
|
|
359
359
|
}], menuItems: [{
|
|
@@ -430,7 +430,6 @@ class NggDatepickerComponent {
|
|
|
430
430
|
if (newValue !== this._value) {
|
|
431
431
|
this._value = newValue || undefined;
|
|
432
432
|
}
|
|
433
|
-
console.log('value', this._value);
|
|
434
433
|
}
|
|
435
434
|
get min() {
|
|
436
435
|
const minDate = this.options?.minDate;
|
|
@@ -441,8 +440,8 @@ class NggDatepickerComponent {
|
|
|
441
440
|
return maxDate ? maxDate : new Date(new Date().getFullYear() + 10, 0, 1);
|
|
442
441
|
}
|
|
443
442
|
writeValue(value) {
|
|
444
|
-
console.log('writeValue', value);
|
|
445
443
|
this.value = value;
|
|
444
|
+
this._cdr.detectChanges();
|
|
446
445
|
}
|
|
447
446
|
registerOnChange(fn) {
|
|
448
447
|
this.onChangeFn = fn;
|
|
@@ -558,7 +557,6 @@ class NggDropdownComponent {
|
|
|
558
557
|
this.loop = false;
|
|
559
558
|
this.display = 'label';
|
|
560
559
|
this.useValue = 'value';
|
|
561
|
-
this.options = [];
|
|
562
560
|
this._multiSelect = false;
|
|
563
561
|
this._searchable = false;
|
|
564
562
|
this.valueChange = new EventEmitter();
|
|
@@ -600,6 +598,17 @@ class NggDropdownComponent {
|
|
|
600
598
|
registerTransitionalStyles();
|
|
601
599
|
}
|
|
602
600
|
//
|
|
601
|
+
set options(value) {
|
|
602
|
+
this._options = value;
|
|
603
|
+
this.texts = {
|
|
604
|
+
...this.texts,
|
|
605
|
+
select: this.displayTextByValue(this._value),
|
|
606
|
+
};
|
|
607
|
+
}
|
|
608
|
+
get options() {
|
|
609
|
+
return this._options;
|
|
610
|
+
}
|
|
611
|
+
//
|
|
603
612
|
set multiSelect(value) {
|
|
604
613
|
this._multiSelect = this.convertToBoolean(value);
|
|
605
614
|
}
|
|
@@ -659,6 +668,7 @@ class NggDropdownComponent {
|
|
|
659
668
|
}
|
|
660
669
|
writeValue(value) {
|
|
661
670
|
this.value = value;
|
|
671
|
+
this._cdr.detectChanges();
|
|
662
672
|
}
|
|
663
673
|
registerOnChange(fn) {
|
|
664
674
|
this.onChangeFn = fn;
|
|
@@ -671,7 +681,7 @@ class NggDropdownComponent {
|
|
|
671
681
|
}
|
|
672
682
|
}
|
|
673
683
|
NggDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownComponent, deps: [{ token: Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
674
|
-
NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggDropdownComponent, selector: "ngg-dropdown", inputs: { id: "id", texts: "texts", loop: "loop", display: "display", useValue: "useValue", label: "label",
|
|
684
|
+
NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggDropdownComponent, selector: "ngg-dropdown", inputs: { id: "id", texts: "texts", loop: "loop", display: "display", useValue: "useValue", label: "label", valid: "valid", invalid: "invalid", compareWith: "compareWith", searchFilter: "searchFilter", syncPopoverWidth: "syncPopoverWidth", fixedPlacement: "fixedPlacement", options: "options", multiSelect: "multiSelect", searchable: "searchable", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, providers: [
|
|
675
685
|
{
|
|
676
686
|
provide: NG_VALUE_ACCESSOR,
|
|
677
687
|
useExisting: NggDropdownComponent,
|
|
@@ -702,8 +712,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
702
712
|
type: Input
|
|
703
713
|
}], label: [{
|
|
704
714
|
type: Input
|
|
705
|
-
}], options: [{
|
|
706
|
-
type: Input
|
|
707
715
|
}], valid: [{
|
|
708
716
|
type: Input
|
|
709
717
|
}], invalid: [{
|
|
@@ -716,6 +724,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
716
724
|
type: Input
|
|
717
725
|
}], fixedPlacement: [{
|
|
718
726
|
type: Input
|
|
727
|
+
}], options: [{
|
|
728
|
+
type: Input
|
|
719
729
|
}], multiSelect: [{
|
|
720
730
|
type: Input
|
|
721
731
|
}], searchable: [{
|
|
@@ -905,7 +915,7 @@ class NggModalComponent {
|
|
|
905
915
|
allowTouchMove: (el) => {
|
|
906
916
|
// Allow touchmove for elements inside modal, its required for scroll to work on iOS devices
|
|
907
917
|
return this.ref.nativeElement.contains(el);
|
|
908
|
-
}
|
|
918
|
+
},
|
|
909
919
|
});
|
|
910
920
|
}
|
|
911
921
|
else {
|
|
@@ -913,7 +923,9 @@ class NggModalComponent {
|
|
|
913
923
|
enableBodyScroll(this.ref.nativeElement);
|
|
914
924
|
}
|
|
915
925
|
}
|
|
916
|
-
get open() {
|
|
926
|
+
get open() {
|
|
927
|
+
return this.isOpen;
|
|
928
|
+
}
|
|
917
929
|
ngOnInit() {
|
|
918
930
|
if (this._isOpen && this.trapFocus)
|
|
919
931
|
this.enableFocusTrap();
|
|
@@ -959,10 +971,10 @@ class NggModalComponent {
|
|
|
959
971
|
}
|
|
960
972
|
}
|
|
961
973
|
NggModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component });
|
|
962
|
-
NggModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggModalComponent, selector: "ngg-modal", inputs: { modalType: "modalType", header: "header", confirmLabel: "confirmLabel", dismissLabel: "dismissLabel", size: "size", hideHeader: "hideHeader", hideFooter: "hideFooter", trapFocus: "trapFocus", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange", closed: "closed", confirm: "confirm", dismiss: "dismiss" }, host: { properties: { "class.open": "this.open" } }, queries: [{ propertyName: "modalHeaderContent", first: true, predicate: NggModalHeaderDirective, descendants: true }, { propertyName: "modalFooterContent", first: true, predicate: NggModalFooterDirective, descendants: true }], viewQueries: [{ propertyName: "backdropRef", first: true, predicate: ["backdrop"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n <div class=\"gds-dialog-wrapper\">\n <aside\n data-testid=\"modal\"\n *ngSwitchCase=\"'slideout'\"\n role=\"dialog\"\n aria-modal=\"true\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </aside>\n <main\n data-testid=\"modal\"\n *ngSwitchCase=\"'takeover'\"\n role=\"dialog\"\n aria-modal=\"true\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </main>\n <section\n data-testid=\"modal\"\n *ngSwitchDefault\n role=\"dialog\"\n aria-modal=\"true\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </section>\n <ng-template #contentTemplate>\n <ng-container *ngIf=\"!hideHeader\">\n <header\n *ngIf=\"!modalHeaderContent; else headerContentTemplate\"\n ngg-modal-header\n data-testid=\"modal-header\"\n [header]=\"header\"\n (closed)=\"this.handleCloseClick($event)\"\n ></header>\n </ng-container>\n <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n <ng-container *ngTemplateOutlet=\"bodyContentTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!hideFooter && (dismissLabel || confirmLabel)\">\n <footer\n *ngIf=\"!modalFooterContent; else footerContentTemplate\"\n ngg-modal-footer\n data-testid=\"modal-footer\"\n [dismissLabel]=\"dismissLabel\"\n [confirmLabel]=\"confirmLabel\"\n (dismiss)=\"this.handleDismiss($event)\"\n (confirm)=\"this.handleConfirm($event)\"\n ></footer>\n </ng-container>\n </ng-template>\n <ng-template #headerContentTemplate>\n <header data-testid=\"modal-header\">\n <ng-content select=\"[nggModalHeader]\"></ng-content>\n </header>\n </ng-template>\n <ng-template #bodyContentTemplate>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #footerContentTemplate>\n <footer data-testid=\"modal-footer\">\n <ng-content select=\"[nggModalFooter]\"></ng-content>\n </footer>\n </ng-template>\n
|
|
974
|
+
NggModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggModalComponent, selector: "ngg-modal", inputs: { modalType: "modalType", header: "header", confirmLabel: "confirmLabel", dismissLabel: "dismissLabel", size: "size", hideHeader: "hideHeader", hideFooter: "hideFooter", trapFocus: "trapFocus", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange", closed: "closed", confirm: "confirm", dismiss: "dismiss" }, host: { properties: { "class.open": "this.open" } }, queries: [{ propertyName: "modalHeaderContent", first: true, predicate: NggModalHeaderDirective, descendants: true }, { propertyName: "modalFooterContent", first: true, predicate: NggModalFooterDirective, descendants: true }], viewQueries: [{ propertyName: "backdropRef", first: true, predicate: ["backdrop"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n <div class=\"gds-dialog-wrapper\">\n <aside\n data-testid=\"modal\"\n *ngSwitchCase=\"'slideout'\"\n role=\"dialog\"\n aria-modal=\"true\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </aside>\n <main\n data-testid=\"modal\"\n *ngSwitchCase=\"'takeover'\"\n role=\"dialog\"\n aria-modal=\"true\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </main>\n <section\n data-testid=\"modal\"\n *ngSwitchDefault\n role=\"dialog\"\n aria-modal=\"true\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </section>\n <ng-template #contentTemplate>\n <ng-container *ngIf=\"!hideHeader\">\n <header\n *ngIf=\"!modalHeaderContent; else headerContentTemplate\"\n ngg-modal-header\n data-testid=\"modal-header\"\n [header]=\"header\"\n (closed)=\"this.handleCloseClick($event)\"\n ></header>\n </ng-container>\n <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n <ng-container *ngTemplateOutlet=\"bodyContentTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!hideFooter && (dismissLabel || confirmLabel)\">\n <footer\n *ngIf=\"!modalFooterContent; else footerContentTemplate\"\n ngg-modal-footer\n data-testid=\"modal-footer\"\n [dismissLabel]=\"dismissLabel\"\n [confirmLabel]=\"confirmLabel\"\n (dismiss)=\"this.handleDismiss($event)\"\n (confirm)=\"this.handleConfirm($event)\"\n ></footer>\n </ng-container>\n </ng-template>\n <ng-template #headerContentTemplate>\n <header data-testid=\"modal-header\">\n <ng-content select=\"[nggModalHeader]\"></ng-content>\n </header>\n </ng-template>\n <ng-template #bodyContentTemplate>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #footerContentTemplate>\n <footer data-testid=\"modal-footer\">\n <ng-content select=\"[nggModalFooter]\"></ng-content>\n </footer>\n </ng-template>\n <div\n #backdrop\n data-testid=\"modal-backdrop\"\n class=\"backdrop entered\"\n (click)=\"this.handleBackdropClick($event)\"\n [attr.aria-hidden]=\"true\"\n ></div>\n </div>\n</ng-container>\n", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(function () { return NggModalHeaderComponent; }), selector: "[ngg-modal-header]", inputs: ["header"], outputs: ["closed"] }, { kind: "component", type: i0.forwardRef(function () { return NggModalBodyComponent; }), selector: "[ngg-modal-body]" }, { kind: "component", type: i0.forwardRef(function () { return NggModalFooterComponent; }), selector: "[ngg-modal-footer]", inputs: ["dismissLabel", "confirmLabel"], outputs: ["dismiss", "confirm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
963
975
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalComponent, decorators: [{
|
|
964
976
|
type: Component,
|
|
965
|
-
args: [{ selector: 'ngg-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n <div class=\"gds-dialog-wrapper\">\n <aside\n data-testid=\"modal\"\n *ngSwitchCase=\"'slideout'\"\n role=\"dialog\"\n aria-modal=\"true\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </aside>\n <main\n data-testid=\"modal\"\n *ngSwitchCase=\"'takeover'\"\n role=\"dialog\"\n aria-modal=\"true\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </main>\n <section\n data-testid=\"modal\"\n *ngSwitchDefault\n role=\"dialog\"\n aria-modal=\"true\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </section>\n <ng-template #contentTemplate>\n <ng-container *ngIf=\"!hideHeader\">\n <header\n *ngIf=\"!modalHeaderContent; else headerContentTemplate\"\n ngg-modal-header\n data-testid=\"modal-header\"\n [header]=\"header\"\n (closed)=\"this.handleCloseClick($event)\"\n ></header>\n </ng-container>\n <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n <ng-container *ngTemplateOutlet=\"bodyContentTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!hideFooter && (dismissLabel || confirmLabel)\">\n <footer\n *ngIf=\"!modalFooterContent; else footerContentTemplate\"\n ngg-modal-footer\n data-testid=\"modal-footer\"\n [dismissLabel]=\"dismissLabel\"\n [confirmLabel]=\"confirmLabel\"\n (dismiss)=\"this.handleDismiss($event)\"\n (confirm)=\"this.handleConfirm($event)\"\n ></footer>\n </ng-container>\n </ng-template>\n <ng-template #headerContentTemplate>\n <header data-testid=\"modal-header\">\n <ng-content select=\"[nggModalHeader]\"></ng-content>\n </header>\n </ng-template>\n <ng-template #bodyContentTemplate>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #footerContentTemplate>\n <footer data-testid=\"modal-footer\">\n <ng-content select=\"[nggModalFooter]\"></ng-content>\n </footer>\n </ng-template>\n
|
|
977
|
+
args: [{ selector: 'ngg-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n <div class=\"gds-dialog-wrapper\">\n <aside\n data-testid=\"modal\"\n *ngSwitchCase=\"'slideout'\"\n role=\"dialog\"\n aria-modal=\"true\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </aside>\n <main\n data-testid=\"modal\"\n *ngSwitchCase=\"'takeover'\"\n role=\"dialog\"\n aria-modal=\"true\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </main>\n <section\n data-testid=\"modal\"\n *ngSwitchDefault\n role=\"dialog\"\n aria-modal=\"true\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </section>\n <ng-template #contentTemplate>\n <ng-container *ngIf=\"!hideHeader\">\n <header\n *ngIf=\"!modalHeaderContent; else headerContentTemplate\"\n ngg-modal-header\n data-testid=\"modal-header\"\n [header]=\"header\"\n (closed)=\"this.handleCloseClick($event)\"\n ></header>\n </ng-container>\n <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n <ng-container *ngTemplateOutlet=\"bodyContentTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!hideFooter && (dismissLabel || confirmLabel)\">\n <footer\n *ngIf=\"!modalFooterContent; else footerContentTemplate\"\n ngg-modal-footer\n data-testid=\"modal-footer\"\n [dismissLabel]=\"dismissLabel\"\n [confirmLabel]=\"confirmLabel\"\n (dismiss)=\"this.handleDismiss($event)\"\n (confirm)=\"this.handleConfirm($event)\"\n ></footer>\n </ng-container>\n </ng-template>\n <ng-template #headerContentTemplate>\n <header data-testid=\"modal-header\">\n <ng-content select=\"[nggModalHeader]\"></ng-content>\n </header>\n </ng-template>\n <ng-template #bodyContentTemplate>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #footerContentTemplate>\n <footer data-testid=\"modal-footer\">\n <ng-content select=\"[nggModalFooter]\"></ng-content>\n </footer>\n </ng-template>\n <div\n #backdrop\n data-testid=\"modal-backdrop\"\n class=\"backdrop entered\"\n (click)=\"this.handleBackdropClick($event)\"\n [attr.aria-hidden]=\"true\"\n ></div>\n </div>\n</ng-container>\n", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] }]
|
|
966
978
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ConfigurableFocusTrapFactory }]; }, propDecorators: { modalType: [{
|
|
967
979
|
type: Input
|
|
968
980
|
}], header: [{
|
|
@@ -1012,21 +1024,29 @@ class NggModalHeaderComponent {
|
|
|
1012
1024
|
}
|
|
1013
1025
|
NggModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1014
1026
|
NggModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggModalHeaderComponent, selector: "[ngg-modal-header]", inputs: { header: "header" }, outputs: { closed: "closed" }, ngImport: i0, template: `
|
|
1015
|
-
<h3 data-testid="modal-header-text">{{header}}</h3>
|
|
1016
|
-
<button
|
|
1017
|
-
|
|
1018
|
-
|
|
1027
|
+
<h3 data-testid="modal-header-text">{{ header }}</h3>
|
|
1028
|
+
<button
|
|
1029
|
+
data-testid="modal-close-button"
|
|
1030
|
+
class="close"
|
|
1031
|
+
(click)="this.handleClose($event)"
|
|
1032
|
+
>
|
|
1033
|
+
<span className="sr-only">Close</span>
|
|
1034
|
+
<i></i>
|
|
1019
1035
|
</button>
|
|
1020
|
-
|
|
1036
|
+
`, isInline: true, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] });
|
|
1021
1037
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalHeaderComponent, decorators: [{
|
|
1022
1038
|
type: Component,
|
|
1023
1039
|
args: [{ selector: '[ngg-modal-header]', template: `
|
|
1024
|
-
<h3 data-testid="modal-header-text">{{header}}</h3>
|
|
1025
|
-
<button
|
|
1026
|
-
|
|
1027
|
-
|
|
1040
|
+
<h3 data-testid="modal-header-text">{{ header }}</h3>
|
|
1041
|
+
<button
|
|
1042
|
+
data-testid="modal-close-button"
|
|
1043
|
+
class="close"
|
|
1044
|
+
(click)="this.handleClose($event)"
|
|
1045
|
+
>
|
|
1046
|
+
<span className="sr-only">Close</span>
|
|
1047
|
+
<i></i>
|
|
1028
1048
|
</button>
|
|
1029
|
-
|
|
1049
|
+
`, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] }]
|
|
1030
1050
|
}], propDecorators: { header: [{
|
|
1031
1051
|
type: Input
|
|
1032
1052
|
}], closed: [{
|
|
@@ -1054,15 +1074,43 @@ class NggModalFooterComponent {
|
|
|
1054
1074
|
}
|
|
1055
1075
|
NggModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1056
1076
|
NggModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggModalFooterComponent, selector: "[ngg-modal-footer]", inputs: { dismissLabel: "dismissLabel", confirmLabel: "confirmLabel" }, outputs: { dismiss: "dismiss", confirm: "confirm" }, ngImport: i0, template: `
|
|
1057
|
-
<button
|
|
1058
|
-
|
|
1059
|
-
|
|
1077
|
+
<button
|
|
1078
|
+
data-testid="modal-dismiss-button"
|
|
1079
|
+
*ngIf="dismissLabel"
|
|
1080
|
+
class="secondary"
|
|
1081
|
+
(click)="this.handleDismiss($event)"
|
|
1082
|
+
>
|
|
1083
|
+
{{ dismissLabel }}
|
|
1084
|
+
</button>
|
|
1085
|
+
<button
|
|
1086
|
+
data-testid="modal-confirm-button"
|
|
1087
|
+
*ngIf="confirmLabel"
|
|
1088
|
+
class="primary"
|
|
1089
|
+
(click)="this.handleConfirm($event)"
|
|
1090
|
+
>
|
|
1091
|
+
{{ confirmLabel }}
|
|
1092
|
+
</button>
|
|
1093
|
+
`, isInline: true, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
1060
1094
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalFooterComponent, decorators: [{
|
|
1061
1095
|
type: Component,
|
|
1062
1096
|
args: [{ selector: '[ngg-modal-footer]', template: `
|
|
1063
|
-
<button
|
|
1064
|
-
|
|
1065
|
-
|
|
1097
|
+
<button
|
|
1098
|
+
data-testid="modal-dismiss-button"
|
|
1099
|
+
*ngIf="dismissLabel"
|
|
1100
|
+
class="secondary"
|
|
1101
|
+
(click)="this.handleDismiss($event)"
|
|
1102
|
+
>
|
|
1103
|
+
{{ dismissLabel }}
|
|
1104
|
+
</button>
|
|
1105
|
+
<button
|
|
1106
|
+
data-testid="modal-confirm-button"
|
|
1107
|
+
*ngIf="confirmLabel"
|
|
1108
|
+
class="primary"
|
|
1109
|
+
(click)="this.handleConfirm($event)"
|
|
1110
|
+
>
|
|
1111
|
+
{{ confirmLabel }}
|
|
1112
|
+
</button>
|
|
1113
|
+
`, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] }]
|
|
1066
1114
|
}], propDecorators: { dismissLabel: [{
|
|
1067
1115
|
type: Input
|
|
1068
1116
|
}], confirmLabel: [{
|