@sebgroup/green-angular 1.8.5 → 1.9.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/modal/index.mjs +3 -1
- package/esm2020/lib/modal/modal-footer.directive.mjs +16 -0
- package/esm2020/lib/modal/modal-header.directive.mjs +16 -0
- package/esm2020/lib/modal/modal.component.mjs +16 -4
- package/esm2020/lib/modal/modal.module.mjs +13 -3
- package/fesm2015/sebgroup-green-angular.mjs +51 -5
- package/fesm2015/sebgroup-green-angular.mjs.map +1 -1
- package/fesm2020/sebgroup-green-angular.mjs +51 -5
- package/fesm2020/sebgroup-green-angular.mjs.map +1 -1
- package/lib/modal/index.d.ts +2 -0
- package/lib/modal/modal-footer.directive.d.ts +8 -0
- package/lib/modal/modal-header.directive.d.ts +8 -0
- package/lib/modal/modal.component.d.ts +7 -1
- package/lib/modal/modal.module.d.ts +5 -3
- package/package.json +1 -1
|
@@ -947,6 +947,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
947
947
|
}]
|
|
948
948
|
}] });
|
|
949
949
|
|
|
950
|
+
class NggModalHeaderDirective {
|
|
951
|
+
constructor(viewContainerRef) {
|
|
952
|
+
this.viewContainerRef = viewContainerRef;
|
|
953
|
+
}
|
|
954
|
+
}
|
|
955
|
+
NggModalHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModalHeaderDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
956
|
+
NggModalHeaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: NggModalHeaderDirective, selector: "[nggModalHeader]", ngImport: i0 });
|
|
957
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModalHeaderDirective, decorators: [{
|
|
958
|
+
type: Directive,
|
|
959
|
+
args: [{
|
|
960
|
+
selector: '[nggModalHeader]'
|
|
961
|
+
}]
|
|
962
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
|
|
963
|
+
|
|
964
|
+
class NggModalFooterDirective {
|
|
965
|
+
constructor(viewContainerRef) {
|
|
966
|
+
this.viewContainerRef = viewContainerRef;
|
|
967
|
+
}
|
|
968
|
+
}
|
|
969
|
+
NggModalFooterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModalFooterDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
970
|
+
NggModalFooterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: NggModalFooterDirective, selector: "[nggModalFooter]", ngImport: i0 });
|
|
971
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModalFooterDirective, decorators: [{
|
|
972
|
+
type: Directive,
|
|
973
|
+
args: [{
|
|
974
|
+
selector: '[nggModalFooter]'
|
|
975
|
+
}]
|
|
976
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
|
|
977
|
+
|
|
950
978
|
class NggModalComponent {
|
|
951
979
|
constructor(ref, configurableFocusTrapFactory) {
|
|
952
980
|
this.ref = ref;
|
|
@@ -1038,10 +1066,10 @@ class NggModalComponent {
|
|
|
1038
1066
|
}
|
|
1039
1067
|
}
|
|
1040
1068
|
NggModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModalComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component });
|
|
1041
|
-
NggModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NggModalComponent, selector: "ngg-modal", inputs: { modalType: "modalType", header: "header", confirmLabel: "confirmLabel", dismissLabel: "dismissLabel", size: "size", trapFocus: "trapFocus", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange", closed: "closed", confirm: "confirm", dismiss: "dismiss" }, host: { properties: { "class.open": "this.open" } }, viewQueries: [{ propertyName: "backdropRef", first: true, predicate: ["backdrop"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n <aside data-testid=\"modal\" *ngSwitchCase=\"'slideout'\" role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n <
|
|
1069
|
+
NggModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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 <aside data-testid=\"modal\" *ngSwitchCase=\"'slideout'\" role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </aside>\n <main data-testid=\"modal\" *ngSwitchCase=\"'takeover'\" role=\"dialog\" aria-modal=\"true\">\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </main>\n <section data-testid=\"modal\" *ngSwitchDefault role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </section>\n <ng-template #contentTemplate>\n <ng-container *ngIf=\"!hideHeader\">\n <header *ngIf=\"!modalHeaderContent; else headerContentTemplate\" ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></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 *ngIf=\"!modalFooterContent; else footerContentTemplate\" ngg-modal-footer data-testid=\"modal-footer\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></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 #backdrop data-testid=\"modal-backdrop\" class=\"backdrop\" (click)=\"this.handleBackdropClick($event)\" [attr.aria-hidden]=\"true\"></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-backdrop)}: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 });
|
|
1042
1070
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModalComponent, decorators: [{
|
|
1043
1071
|
type: Component,
|
|
1044
|
-
args: [{ selector: 'ngg-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n <aside data-testid=\"modal\" *ngSwitchCase=\"'slideout'\" role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n <
|
|
1072
|
+
args: [{ selector: 'ngg-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n <aside data-testid=\"modal\" *ngSwitchCase=\"'slideout'\" role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </aside>\n <main data-testid=\"modal\" *ngSwitchCase=\"'takeover'\" role=\"dialog\" aria-modal=\"true\">\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </main>\n <section data-testid=\"modal\" *ngSwitchDefault role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </section>\n <ng-template #contentTemplate>\n <ng-container *ngIf=\"!hideHeader\">\n <header *ngIf=\"!modalHeaderContent; else headerContentTemplate\" ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></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 *ngIf=\"!modalFooterContent; else footerContentTemplate\" ngg-modal-footer data-testid=\"modal-footer\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></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 #backdrop data-testid=\"modal-backdrop\" class=\"backdrop\" (click)=\"this.handleBackdropClick($event)\" [attr.aria-hidden]=\"true\"></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-backdrop)}: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"] }]
|
|
1045
1073
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ConfigurableFocusTrapFactory }]; }, propDecorators: { modalType: [{
|
|
1046
1074
|
type: Input
|
|
1047
1075
|
}], header: [{
|
|
@@ -1052,6 +1080,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1052
1080
|
type: Input
|
|
1053
1081
|
}], size: [{
|
|
1054
1082
|
type: Input
|
|
1083
|
+
}], hideHeader: [{
|
|
1084
|
+
type: Input
|
|
1085
|
+
}], hideFooter: [{
|
|
1086
|
+
type: Input
|
|
1055
1087
|
}], trapFocus: [{
|
|
1056
1088
|
type: Input
|
|
1057
1089
|
}], isOpen: [{
|
|
@@ -1070,6 +1102,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1070
1102
|
}], backdropRef: [{
|
|
1071
1103
|
type: ViewChild,
|
|
1072
1104
|
args: ['backdrop']
|
|
1105
|
+
}], modalHeaderContent: [{
|
|
1106
|
+
type: ContentChild,
|
|
1107
|
+
args: [NggModalHeaderDirective]
|
|
1108
|
+
}], modalFooterContent: [{
|
|
1109
|
+
type: ContentChild,
|
|
1110
|
+
args: [NggModalFooterDirective]
|
|
1073
1111
|
}] } });
|
|
1074
1112
|
class NggModalHeaderComponent {
|
|
1075
1113
|
constructor() {
|
|
@@ -1146,10 +1184,14 @@ const DECLARATIONS = [
|
|
|
1146
1184
|
NggModalComponent,
|
|
1147
1185
|
NggModalHeaderComponent,
|
|
1148
1186
|
NggModalBodyComponent,
|
|
1149
|
-
NggModalFooterComponent
|
|
1187
|
+
NggModalFooterComponent,
|
|
1188
|
+
NggModalHeaderDirective,
|
|
1189
|
+
NggModalFooterDirective
|
|
1150
1190
|
];
|
|
1151
1191
|
const EXPORTS = [
|
|
1152
1192
|
NggModalComponent,
|
|
1193
|
+
NggModalHeaderDirective,
|
|
1194
|
+
NggModalFooterDirective
|
|
1153
1195
|
];
|
|
1154
1196
|
class NggModalModule {
|
|
1155
1197
|
}
|
|
@@ -1157,7 +1199,11 @@ NggModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version:
|
|
|
1157
1199
|
NggModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NggModalModule, declarations: [NggModalComponent,
|
|
1158
1200
|
NggModalHeaderComponent,
|
|
1159
1201
|
NggModalBodyComponent,
|
|
1160
|
-
NggModalFooterComponent
|
|
1202
|
+
NggModalFooterComponent,
|
|
1203
|
+
NggModalHeaderDirective,
|
|
1204
|
+
NggModalFooterDirective], imports: [A11yModule, CommonModule], exports: [NggModalComponent,
|
|
1205
|
+
NggModalHeaderDirective,
|
|
1206
|
+
NggModalFooterDirective] });
|
|
1161
1207
|
NggModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModalModule, imports: [A11yModule, CommonModule] });
|
|
1162
1208
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggModalModule, decorators: [{
|
|
1163
1209
|
type: NgModule,
|
|
@@ -1635,5 +1681,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1635
1681
|
* Generated bundle index. Do not edit.
|
|
1636
1682
|
*/
|
|
1637
1683
|
|
|
1638
|
-
export { NggAccordionComponent, NggAccordionListItemComponent, NggAccordionModule, NggBadgeComponent, NggBadgeModule, NggButtonComponent, NggButtonModule, NggContextMenuComponent, NggContextMenuModule, NggDatepickerComponent, NggDatepickerModule, NggDropdownButtonDirective, NggDropdownComponent, NggDropdownModule, NggDropdownOptionDirective, NggInPageWizardModule, NggInPageWizardStepCardComponent, NggModalBodyComponent, NggModalComponent, NggModalFooterComponent, NggModalHeaderComponent, NggModalModule, NggModule, NggOnScrollDirective, NggPaginationComponent, NggPaginationModule, NggProgressCircleComponent, NggProgressCircleModule, NggSegmentedControlComponent, NggSegmentedControlModule, NggSharedModule, NggSliderComponent, NggSliderModule, ON_SCROLL_TOKEN, dateValidator };
|
|
1684
|
+
export { NggAccordionComponent, NggAccordionListItemComponent, NggAccordionModule, NggBadgeComponent, NggBadgeModule, NggButtonComponent, NggButtonModule, NggContextMenuComponent, NggContextMenuModule, NggDatepickerComponent, NggDatepickerModule, NggDropdownButtonDirective, NggDropdownComponent, NggDropdownModule, NggDropdownOptionDirective, NggInPageWizardModule, NggInPageWizardStepCardComponent, NggModalBodyComponent, NggModalComponent, NggModalFooterComponent, NggModalFooterDirective, NggModalHeaderComponent, NggModalHeaderDirective, NggModalModule, NggModule, NggOnScrollDirective, NggPaginationComponent, NggPaginationModule, NggProgressCircleComponent, NggProgressCircleModule, NggSegmentedControlComponent, NggSegmentedControlModule, NggSharedModule, NggSliderComponent, NggSliderModule, ON_SCROLL_TOKEN, dateValidator };
|
|
1639
1685
|
//# sourceMappingURL=sebgroup-green-angular.mjs.map
|