@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
|
@@ -352,10 +352,10 @@ class NggContextMenuComponent {
|
|
|
352
352
|
}
|
|
353
353
|
}
|
|
354
354
|
NggContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggContextMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
355
|
-
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 <
|
|
355
|
+
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]" }] });
|
|
356
356
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggContextMenuComponent, decorators: [{
|
|
357
357
|
type: Component,
|
|
358
|
-
args: [{ selector: 'ngg-context-menu', template: "<gds-context-menu\n *nggCoreElement\n data-testid=\"context-menu\"\n [placement]=\"placement\"\n [open]=\"isActive\"\n>\n <
|
|
358
|
+
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" }]
|
|
359
359
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { direction: [{
|
|
360
360
|
type: Input
|
|
361
361
|
}], menuItems: [{
|
|
@@ -434,7 +434,6 @@ class NggDatepickerComponent {
|
|
|
434
434
|
if (newValue !== this._value) {
|
|
435
435
|
this._value = newValue || undefined;
|
|
436
436
|
}
|
|
437
|
-
console.log('value', this._value);
|
|
438
437
|
}
|
|
439
438
|
get min() {
|
|
440
439
|
var _a;
|
|
@@ -447,8 +446,8 @@ class NggDatepickerComponent {
|
|
|
447
446
|
return maxDate ? maxDate : new Date(new Date().getFullYear() + 10, 0, 1);
|
|
448
447
|
}
|
|
449
448
|
writeValue(value) {
|
|
450
|
-
console.log('writeValue', value);
|
|
451
449
|
this.value = value;
|
|
450
|
+
this._cdr.detectChanges();
|
|
452
451
|
}
|
|
453
452
|
registerOnChange(fn) {
|
|
454
453
|
this.onChangeFn = fn;
|
|
@@ -564,7 +563,6 @@ class NggDropdownComponent {
|
|
|
564
563
|
this.loop = false;
|
|
565
564
|
this.display = 'label';
|
|
566
565
|
this.useValue = 'value';
|
|
567
|
-
this.options = [];
|
|
568
566
|
this._multiSelect = false;
|
|
569
567
|
this._searchable = false;
|
|
570
568
|
this.valueChange = new EventEmitter();
|
|
@@ -606,6 +604,14 @@ class NggDropdownComponent {
|
|
|
606
604
|
registerTransitionalStyles();
|
|
607
605
|
}
|
|
608
606
|
//
|
|
607
|
+
set options(value) {
|
|
608
|
+
this._options = value;
|
|
609
|
+
this.texts = Object.assign(Object.assign({}, this.texts), { select: this.displayTextByValue(this._value) });
|
|
610
|
+
}
|
|
611
|
+
get options() {
|
|
612
|
+
return this._options;
|
|
613
|
+
}
|
|
614
|
+
//
|
|
609
615
|
set multiSelect(value) {
|
|
610
616
|
this._multiSelect = this.convertToBoolean(value);
|
|
611
617
|
}
|
|
@@ -658,6 +664,7 @@ class NggDropdownComponent {
|
|
|
658
664
|
}
|
|
659
665
|
writeValue(value) {
|
|
660
666
|
this.value = value;
|
|
667
|
+
this._cdr.detectChanges();
|
|
661
668
|
}
|
|
662
669
|
registerOnChange(fn) {
|
|
663
670
|
this.onChangeFn = fn;
|
|
@@ -670,7 +677,7 @@ class NggDropdownComponent {
|
|
|
670
677
|
}
|
|
671
678
|
}
|
|
672
679
|
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 });
|
|
673
|
-
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",
|
|
680
|
+
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: [
|
|
674
681
|
{
|
|
675
682
|
provide: NG_VALUE_ACCESSOR,
|
|
676
683
|
useExisting: NggDropdownComponent,
|
|
@@ -703,8 +710,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
703
710
|
type: Input
|
|
704
711
|
}], label: [{
|
|
705
712
|
type: Input
|
|
706
|
-
}], options: [{
|
|
707
|
-
type: Input
|
|
708
713
|
}], valid: [{
|
|
709
714
|
type: Input
|
|
710
715
|
}], invalid: [{
|
|
@@ -717,6 +722,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
717
722
|
type: Input
|
|
718
723
|
}], fixedPlacement: [{
|
|
719
724
|
type: Input
|
|
725
|
+
}], options: [{
|
|
726
|
+
type: Input
|
|
720
727
|
}], multiSelect: [{
|
|
721
728
|
type: Input
|
|
722
729
|
}], searchable: [{
|
|
@@ -906,7 +913,7 @@ class NggModalComponent {
|
|
|
906
913
|
allowTouchMove: (el) => {
|
|
907
914
|
// Allow touchmove for elements inside modal, its required for scroll to work on iOS devices
|
|
908
915
|
return this.ref.nativeElement.contains(el);
|
|
909
|
-
}
|
|
916
|
+
},
|
|
910
917
|
});
|
|
911
918
|
}
|
|
912
919
|
else {
|
|
@@ -914,7 +921,9 @@ class NggModalComponent {
|
|
|
914
921
|
enableBodyScroll(this.ref.nativeElement);
|
|
915
922
|
}
|
|
916
923
|
}
|
|
917
|
-
get open() {
|
|
924
|
+
get open() {
|
|
925
|
+
return this.isOpen;
|
|
926
|
+
}
|
|
918
927
|
ngOnInit() {
|
|
919
928
|
if (this._isOpen && this.trapFocus)
|
|
920
929
|
this.enableFocusTrap();
|
|
@@ -962,10 +971,10 @@ class NggModalComponent {
|
|
|
962
971
|
}
|
|
963
972
|
}
|
|
964
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 });
|
|
965
|
-
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 });
|
|
966
975
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalComponent, decorators: [{
|
|
967
976
|
type: Component,
|
|
968
|
-
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"] }]
|
|
969
978
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ConfigurableFocusTrapFactory }]; }, propDecorators: { modalType: [{
|
|
970
979
|
type: Input
|
|
971
980
|
}], header: [{
|
|
@@ -1015,21 +1024,29 @@ class NggModalHeaderComponent {
|
|
|
1015
1024
|
}
|
|
1016
1025
|
NggModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1017
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: `
|
|
1018
|
-
<h3 data-testid="modal-header-text">{{header}}</h3>
|
|
1019
|
-
<button
|
|
1020
|
-
|
|
1021
|
-
|
|
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>
|
|
1022
1035
|
</button>
|
|
1023
|
-
|
|
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"] });
|
|
1024
1037
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalHeaderComponent, decorators: [{
|
|
1025
1038
|
type: Component,
|
|
1026
1039
|
args: [{ selector: '[ngg-modal-header]', template: `
|
|
1027
|
-
<h3 data-testid="modal-header-text">{{header}}</h3>
|
|
1028
|
-
<button
|
|
1029
|
-
|
|
1030
|
-
|
|
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>
|
|
1031
1048
|
</button>
|
|
1032
|
-
|
|
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"] }]
|
|
1033
1050
|
}], propDecorators: { header: [{
|
|
1034
1051
|
type: Input
|
|
1035
1052
|
}], closed: [{
|
|
@@ -1057,15 +1074,43 @@ class NggModalFooterComponent {
|
|
|
1057
1074
|
}
|
|
1058
1075
|
NggModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1059
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: `
|
|
1060
|
-
<button
|
|
1061
|
-
|
|
1062
|
-
|
|
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"] }] });
|
|
1063
1094
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModalFooterComponent, decorators: [{
|
|
1064
1095
|
type: Component,
|
|
1065
1096
|
args: [{ selector: '[ngg-modal-footer]', template: `
|
|
1066
|
-
<button
|
|
1067
|
-
|
|
1068
|
-
|
|
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"] }]
|
|
1069
1114
|
}], propDecorators: { dismissLabel: [{
|
|
1070
1115
|
type: Input
|
|
1071
1116
|
}], confirmLabel: [{
|