@spicainternational/ngx-sds-components 2.4.1 → 2.5.0

package/esm2020/src/lib/modal/dialog/dialog.component.mjs

@@ -0,0 +1,85 @@
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "../modal.component";
+import * as i2 from "@angular/common";
+export class SdsDialogComponent {
+    constructor() {
+        this.title = '';
+        this.size = 'md';
+        this.isOpen = false;
+        this.primaryButtonText = 'Primary button';
+        this.secondaryButtonText = 'Secondary button';
+        this.primaryButtonClass = 'btn-primary';
+        this.primaryClick = new EventEmitter();
+        this.secondaryButtonClass = 'btn-secondary';
+        this.secondaryClick = new EventEmitter();
+        this.showSecondaryButton = true;
+        this.showCloseButton = true;
+        this.showHeader = true;
+    }
+    ngOnChanges(changes) {
+        if (changes['isOpen']) {
+            if (this.isOpen) {
+                this.open();
+            }
+            else {
+                this.close();
+            }
+        }
+    }
+    ngOnInit() { }
+    open() {
+        if (this._modal != undefined) {
+            this._modal.open();
+        }
+    }
+    close() {
+        if (this._modal != undefined) {
+            this._modal.close();
+        }
+    }
+    onSecondaryClick() {
+        this.secondaryClick.emit();
+        this.close();
+    }
+    onPrimaryClick() {
+        this.primaryClick.emit();
+        this.close();
+    }
+}
+SdsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SdsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsDialogComponent, selector: "sds-dialog", inputs: { title: "title", closeText: "closeText", size: "size", isOpen: "isOpen", primaryButtonText: "primaryButtonText", secondaryButtonText: "secondaryButtonText", primaryButtonClass: "primaryButtonClass", secondaryButtonClass: "secondaryButtonClass", showSecondaryButton: "showSecondaryButton", showCloseButton: "showCloseButton", showHeader: "showHeader" }, outputs: { primaryClick: "primaryClick", secondaryClick: "secondaryClick" }, viewQueries: [{ propertyName: "_modal", first: true, predicate: ["modal"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<sds-modal\n    #modal\n    [modalTitle]=\"title\"\n    [size]=\"size\"\n    [closeText]=\"closeText\"\n    [showCloseButton]=\"showCloseButton\"\n    [showHeader]=\"showHeader\"\n>\n    <div>\n        <ng-content></ng-content>\n    </div>\n\n    <ng-container #footer ngProjectAs='footer'>\n        <button\n            *ngIf=\"showSecondaryButton\"\n            class=\"btn\"\n            [class]=\"secondaryButtonClass\"\n            (click)=\"onSecondaryClick()\"\n        >{{secondaryButtonText}}</button>\n        <button\n            class=\"btn\"\n            [class]=\"primaryButtonClass\"\n            (click)=\"onPrimaryClick()\"\n        >{{primaryButtonText}}</button>\n    </ng-container>\n</sds-modal>", styles: [""], components: [{ type: i1.SdsModalComponent, selector: "sds-modal", inputs: ["modalTitle", "showHeader", "showFooter", "closeText", "size", "modalDialogId", "showCloseButton"], outputs: ["modalOpen", "modalClose"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-dialog', template: "<sds-modal\n    #modal\n    [modalTitle]=\"title\"\n    [size]=\"size\"\n    [closeText]=\"closeText\"\n    [showCloseButton]=\"showCloseButton\"\n    [showHeader]=\"showHeader\"\n>\n    <div>\n        <ng-content></ng-content>\n    </div>\n\n    <ng-container #footer ngProjectAs='footer'>\n        <button\n            *ngIf=\"showSecondaryButton\"\n            class=\"btn\"\n            [class]=\"secondaryButtonClass\"\n            (click)=\"onSecondaryClick()\"\n        >{{secondaryButtonText}}</button>\n        <button\n            class=\"btn\"\n            [class]=\"primaryButtonClass\"\n            (click)=\"onPrimaryClick()\"\n        >{{primaryButtonText}}</button>\n    </ng-container>\n</sds-modal>", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                type: Input
+            }], closeText: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], isOpen: [{
+                type: Input
+            }], primaryButtonText: [{
+                type: Input
+            }], secondaryButtonText: [{
+                type: Input
+            }], primaryButtonClass: [{
+                type: Input
+            }], primaryClick: [{
+                type: Output
+            }], secondaryButtonClass: [{
+                type: Input
+            }], secondaryClick: [{
+                type: Output
+            }], showSecondaryButton: [{
+                type: Input
+            }], showCloseButton: [{
+                type: Input
+            }], showHeader: [{
+                type: Input
+            }], _modal: [{
+                type: ViewChild,
+                args: ['modal', { static: true }]
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlhbG9nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL21vZGFsL2RpYWxvZy9kaWFsb2cuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvbW9kYWwvZGlhbG9nL2RpYWxvZy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQXFCLE1BQU0sRUFBaUIsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBUXBILE1BQU0sT0FBTyxrQkFBa0I7SUFxQjNCO1FBcEJnQixVQUFLLEdBQVcsRUFBRSxDQUFDO1FBRW5CLFNBQUksR0FBOEIsSUFBSSxDQUFDO1FBQ3ZDLFdBQU0sR0FBWSxLQUFLLENBQUM7UUFFeEIsc0JBQWlCLEdBQVcsZ0JBQWdCLENBQUM7UUFDN0Msd0JBQW1CLEdBQVcsa0JBQWtCLENBQUM7UUFFakQsdUJBQWtCLEdBQVcsYUFBYSxDQUFDO1FBQzFDLGlCQUFZLEdBQXVCLElBQUksWUFBWSxFQUFFLENBQUM7UUFFdkQseUJBQW9CLEdBQVcsZUFBZSxDQUFDO1FBQzlDLG1CQUFjLEdBQXVCLElBQUksWUFBWSxFQUFFLENBQUM7UUFDekQsd0JBQW1CLEdBQVksSUFBSSxDQUFDO1FBRXBDLG9CQUFlLEdBQVksSUFBSSxDQUFDO1FBQ2hDLGVBQVUsR0FBWSxJQUFJLENBQUM7SUFJNUIsQ0FBQztJQUNoQixXQUFXLENBQUMsT0FBc0I7UUFDOUIsSUFBSSxPQUFPLENBQUMsUUFBUSxDQUFDLEVBQUU7WUFDbkIsSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFO2dCQUNiLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQzthQUNmO2lCQUFNO2dCQUNILElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQzthQUNoQjtTQUVKO0lBRUwsQ0FBQztJQUVELFFBQVEsS0FBVSxDQUFDO0lBR1osSUFBSTtRQUNQLElBQUksSUFBSSxDQUFDLE1BQU0sSUFBSSxTQUFTLEVBQUU7WUFDMUIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsQ0FBQztTQUN0QjtJQUNMLENBQUM7SUFFTSxLQUFLO1FBQ1IsSUFBSSxJQUFJLENBQUMsTUFBTSxJQUFJLFNBQVMsRUFBRTtZQUMxQixJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssRUFBRSxDQUFDO1NBQ3ZCO0lBQ0wsQ0FBQztJQUVNLGdCQUFnQjtRQUNuQixJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksRUFBRSxDQUFDO1FBQzNCLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUNqQixDQUFDO0lBRU0sY0FBYztRQUNqQixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ3pCLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUNqQixDQUFDOzsrR0F6RFEsa0JBQWtCO21HQUFsQixrQkFBa0IsNm1CQ1IvQiw4c0JBeUJZOzJGRGpCQyxrQkFBa0I7a0JBTDlCLFNBQVM7K0JBQ0ksWUFBWTswRUFLTixLQUFLO3NCQUFwQixLQUFLO2dCQUNVLFNBQVM7c0JBQXhCLEtBQUs7Z0JBQ1UsSUFBSTtzQkFBbkIsS0FBSztnQkFDVSxNQUFNO3NCQUFyQixLQUFLO2dCQUVVLGlCQUFpQjtzQkFBaEMsS0FBSztnQkFDVSxtQkFBbUI7c0JBQWxDLEtBQUs7Z0JBRVUsa0JBQWtCO3NCQUFqQyxLQUFLO2dCQUNXLFlBQVk7c0JBQTVCLE1BQU07Z0JBRVMsb0JBQW9CO3NCQUFuQyxLQUFLO2dCQUNXLGNBQWM7c0JBQTlCLE1BQU07Z0JBQ1MsbUJBQW1CO3NCQUFsQyxLQUFLO2dCQUVVLGVBQWU7c0JBQTlCLEtBQUs7Z0JBQ1UsVUFBVTtzQkFBekIsS0FBSztnQkFFd0MsTUFBTTtzQkFBbkQsU0FBUzt1QkFBQyxPQUFPLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkNoYW5nZXMsIE9uSW5pdCwgT3V0cHV0LCBTaW1wbGVDaGFuZ2VzLCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFNkc01vZGFsQ29tcG9uZW50IH0gZnJvbSAnLi4vbW9kYWwuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdzZHMtZGlhbG9nJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vZGlhbG9nLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9kaWFsb2cuY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgU2RzRGlhbG9nQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMge1xuICAgIEBJbnB1dCgpIHB1YmxpYyB0aXRsZTogc3RyaW5nID0gJyc7XG4gICAgQElucHV0KCkgcHVibGljIGNsb3NlVGV4dD86IHN0cmluZztcbiAgICBASW5wdXQoKSBwdWJsaWMgc2l6ZTogJ3NtJyB8ICdtZCcgfCAnbGcnIHwgJ3hsJyA9ICdtZCc7XG4gICAgQElucHV0KCkgcHVibGljIGlzT3BlbjogYm9vbGVhbiA9IGZhbHNlO1xuICAgIFxuICAgIEBJbnB1dCgpIHB1YmxpYyBwcmltYXJ5QnV0dG9uVGV4dDogc3RyaW5nID0gJ1ByaW1hcnkgYnV0dG9uJztcbiAgICBASW5wdXQoKSBwdWJsaWMgc2Vjb25kYXJ5QnV0dG9uVGV4dDogc3RyaW5nID0gJ1NlY29uZGFyeSBidXR0b24nO1xuXG4gICAgQElucHV0KCkgcHVibGljIHByaW1hcnlCdXR0b25DbGFzczogc3RyaW5nID0gJ2J0bi1wcmltYXJ5JztcbiAgICBAT3V0cHV0KCkgcHVibGljIHByaW1hcnlDbGljazogRXZlbnRFbWl0dGVyPHZvaWQ+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gICAgQElucHV0KCkgcHVibGljIHNlY29uZGFyeUJ1dHRvbkNsYXNzOiBzdHJpbmcgPSAnYnRuLXNlY29uZGFyeSc7ICAgIFxuICAgIEBPdXRwdXQoKSBwdWJsaWMgc2Vjb25kYXJ5Q2xpY2s6IEV2ZW50RW1pdHRlcjx2b2lkPiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgICBASW5wdXQoKSBwdWJsaWMgc2hvd1NlY29uZGFyeUJ1dHRvbjogYm9vbGVhbiA9IHRydWU7XG5cbiAgICBASW5wdXQoKSBwdWJsaWMgc2hvd0Nsb3NlQnV0dG9uOiBib29sZWFuID0gdHJ1ZTtcbiAgICBASW5wdXQoKSBwdWJsaWMgc2hvd0hlYWRlcjogYm9vbGVhbiA9IHRydWU7XG5cbiAgICBAVmlld0NoaWxkKCdtb2RhbCcsIHsgc3RhdGljOiB0cnVlIH0pIHByaXZhdGUgX21vZGFsOiBTZHNNb2RhbENvbXBvbmVudCB8IHVuZGVmaW5lZDtcblxuICAgIGNvbnN0cnVjdG9yKCkge31cbiAgICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgICAgIGlmIChjaGFuZ2VzWydpc09wZW4nXSkge1xuICAgICAgICAgICAgaWYgKHRoaXMuaXNPcGVuKSB7XG4gICAgICAgICAgICAgICAgdGhpcy5vcGVuKCk7XG4gICAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgICAgIHRoaXMuY2xvc2UoKTtcbiAgICAgICAgICAgIH1cblxuICAgICAgICB9XG5cbiAgICB9XG5cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHt9XG5cblxuICAgIHB1YmxpYyBvcGVuKCk6IHZvaWQge1xuICAgICAgICBpZiAodGhpcy5fbW9kYWwgIT0gdW5kZWZpbmVkKSB7XG4gICAgICAgICAgICB0aGlzLl9tb2RhbC5vcGVuKCk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBwdWJsaWMgY2xvc2UoKTogdm9pZCB7XG4gICAgICAgIGlmICh0aGlzLl9tb2RhbCAhPSB1bmRlZmluZWQpIHtcbiAgICAgICAgICAgIHRoaXMuX21vZGFsLmNsb3NlKCk7XG4gICAgICAgIH0gICAgICAgIFxuICAgIH1cblxuICAgIHB1YmxpYyBvblNlY29uZGFyeUNsaWNrKCk6IHZvaWQge1xuICAgICAgICB0aGlzLnNlY29uZGFyeUNsaWNrLmVtaXQoKTtcbiAgICAgICAgdGhpcy5jbG9zZSgpO1xuICAgIH1cblxuICAgIHB1YmxpYyBvblByaW1hcnlDbGljaygpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5wcmltYXJ5Q2xpY2suZW1pdCgpO1xuICAgICAgICB0aGlzLmNsb3NlKCk7XG4gICAgfSAgICBcblxuXG59XG5cblxuXG4iLCI8c2RzLW1vZGFsXG4gICAgI21vZGFsXG4gICAgW21vZGFsVGl0bGVdPVwidGl0bGVcIlxuICAgIFtzaXplXT1cInNpemVcIlxuICAgIFtjbG9zZVRleHRdPVwiY2xvc2VUZXh0XCJcbiAgICBbc2hvd0Nsb3NlQnV0dG9uXT1cInNob3dDbG9zZUJ1dHRvblwiXG4gICAgW3Nob3dIZWFkZXJdPVwic2hvd0hlYWRlclwiXG4+XG4gICAgPGRpdj5cbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgIDwvZGl2PlxuXG4gICAgPG5nLWNvbnRhaW5lciAjZm9vdGVyIG5nUHJvamVjdEFzPSdmb290ZXInPlxuICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICAqbmdJZj1cInNob3dTZWNvbmRhcnlCdXR0b25cIlxuICAgICAgICAgICAgY2xhc3M9XCJidG5cIlxuICAgICAgICAgICAgW2NsYXNzXT1cInNlY29uZGFyeUJ1dHRvbkNsYXNzXCJcbiAgICAgICAgICAgIChjbGljayk9XCJvblNlY29uZGFyeUNsaWNrKClcIlxuICAgICAgICA+e3tzZWNvbmRhcnlCdXR0b25UZXh0fX08L2J1dHRvbj5cbiAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgY2xhc3M9XCJidG5cIlxuICAgICAgICAgICAgW2NsYXNzXT1cInByaW1hcnlCdXR0b25DbGFzc1wiXG4gICAgICAgICAgICAoY2xpY2spPVwib25QcmltYXJ5Q2xpY2soKVwiXG4gICAgICAgID57e3ByaW1hcnlCdXR0b25UZXh0fX08L2J1dHRvbj5cbiAgICA8L25nLWNvbnRhaW5lcj5cbjwvc2RzLW1vZGFsPiJdfQ==

package/esm2020/src/lib/modal/modal.component.mjs

@@ -1,13 +1,15 @@
-import { Component, Input, Output, ViewChild, EventEmitter, } from '@angular/core';
+import { Component, Input, Output, ViewChild, EventEmitter, ContentChild, } from '@angular/core';
 import { faXmark } from '@fortawesome/pro-regular-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@fortawesome/angular-fontawesome";
 import * as i2 from "@angular/common";
 export class SdsModalComponent {
     constructor() {
+        this.headerContent = { nativeElement: undefined };
         this.showHeader = true;
         this.showFooter = true;
         this.size = 'md';
+        this.showCloseButton = true;
         this.modalOpen = new EventEmitter();
         this.modalClose = new EventEmitter();
         this.closeIcon = faXmark;
@@ -27,13 +29,13 @@ export class SdsModalComponent {
     }
 }
 SdsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsModalComponent, selector: "sds-modal", inputs: { modalTitle: "modalTitle", showHeader: "showHeader", showFooter: "showFooter", closeText: "closeText", size: "size", modalDialogId: "modalDialogId" }, outputs: { modalOpen: "modalOpen", modalClose: "modalClose" }, viewQueries: [{ propertyName: "_modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<div #modal class=\"modal\">\n    <div\n        class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\"\n        [id]=\"modalDialogId\"\n        [ngClass]=\"'modal-' + size\"\n        role=\"document\"\n    >\n        <div class=\"modal-content\">\n\n            <div *ngIf=\"showHeader\" class=\"modal-header\">\n                <ng-content select=\"[header]\"></ng-content>\n            </div>             \n\n            <div *ngIf=\"showHeader\" class=\"modal-header\">\n                <h5 class=\"modal-title\">{{modalTitle}}</h5>\n                <button \n                    type=\"button\" \n                    class=\"close\" \n                    [title]=\"closeText\"\n                    (click)=\"close()\">\n                    <fa-icon [icon]=\"closeIcon\"></fa-icon>\n                </button>\n                <ng-content select=\"[header]\"></ng-content>\n            </div>\n\n            <div class=\"modal-body\">\n                <ng-content></ng-content>\n            </div>\n\n            <div *ngIf=\"showFooter\" class=\"modal-footer\">\n                <ng-content select=\"[footer]\"></ng-content>\n            </div>            \n        </div>\n    </div>\n</div>", styles: [".modal{background:rgba(0,0,0,.5)}.modal.in{opacity:1}.modal.in .modal-dialog{transform:translate(0)}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SdsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsModalComponent, selector: "sds-modal", inputs: { modalTitle: "modalTitle", showHeader: "showHeader", showFooter: "showFooter", closeText: "closeText", size: "size", modalDialogId: "modalDialogId", showCloseButton: "showCloseButton" }, outputs: { modalOpen: "modalOpen", modalClose: "modalClose" }, queries: [{ propertyName: "headerContent", first: true, predicate: ["header"], descendants: true }], viewQueries: [{ propertyName: "_modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<div #modal class=\"modal\">\n    <div\n        class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\"\n        [id]=\"modalDialogId\"\n        [ngClass]=\"'modal-' + size\"\n        role=\"document\"\n    >\n        <div class=\"modal-content\">\n\n            <div *ngIf=\"showHeader && headerContent\" class=\"modal-header\">\n                <ng-content select='header'></ng-content>\n            </div>             \n\n            <div *ngIf=\"showHeader && !headerContent\" class=\"modal-header\">\n                <h5 class=\"modal-title\">{{modalTitle}}</h5>\n                <button \n                    *ngIf=\"showCloseButton\"\n                    type=\"button\" \n                    class=\"close\" \n                    [title]=\"closeText\"\n                    (click)=\"close()\">\n                    <fa-icon [icon]=\"closeIcon\"></fa-icon>\n                </button>\n            </div>\n\n            <div class=\"modal-body\">\n                <ng-content></ng-content>\n            </div>\n\n            <div *ngIf=\"showFooter\" class=\"modal-footer\">\n                <ng-content select=\"footer\"></ng-content>\n            </div>            \n        </div>\n    </div>\n</div>", styles: [".modal{background:rgba(0,0,0,.5)}.modal.in{opacity:1}.modal.in .modal-dialog{transform:translate(0)}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-modal', template: "<div #modal class=\"modal\">\n    <div\n        class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\"\n        [id]=\"modalDialogId\"\n        [ngClass]=\"'modal-' + size\"\n        role=\"document\"\n    >\n        <div class=\"modal-content\">\n\n            <div *ngIf=\"showHeader\" class=\"modal-header\">\n                <ng-content select=\"[header]\"></ng-content>\n            </div>             \n\n            <div *ngIf=\"showHeader\" class=\"modal-header\">\n                <h5 class=\"modal-title\">{{modalTitle}}</h5>\n                <button \n                    type=\"button\" \n                    class=\"close\" \n                    [title]=\"closeText\"\n                    (click)=\"close()\">\n                    <fa-icon [icon]=\"closeIcon\"></fa-icon>\n                </button>\n                <ng-content select=\"[header]\"></ng-content>\n            </div>\n\n            <div class=\"modal-body\">\n                <ng-content></ng-content>\n            </div>\n\n            <div *ngIf=\"showFooter\" class=\"modal-footer\">\n                <ng-content select=\"[footer]\"></ng-content>\n            </div>            \n        </div>\n    </div>\n</div>", styles: [".modal{background:rgba(0,0,0,.5)}.modal.in{opacity:1}.modal.in .modal-dialog{transform:translate(0)}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { _modal: [{
-                type: ViewChild,
-                args: ['modal', { static: false }]
+            args: [{ selector: 'sds-modal', template: "<div #modal class=\"modal\">\n    <div\n        class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\"\n        [id]=\"modalDialogId\"\n        [ngClass]=\"'modal-' + size\"\n        role=\"document\"\n    >\n        <div class=\"modal-content\">\n\n            <div *ngIf=\"showHeader && headerContent\" class=\"modal-header\">\n                <ng-content select='header'></ng-content>\n            </div>             \n\n            <div *ngIf=\"showHeader && !headerContent\" class=\"modal-header\">\n                <h5 class=\"modal-title\">{{modalTitle}}</h5>\n                <button \n                    *ngIf=\"showCloseButton\"\n                    type=\"button\" \n                    class=\"close\" \n                    [title]=\"closeText\"\n                    (click)=\"close()\">\n                    <fa-icon [icon]=\"closeIcon\"></fa-icon>\n                </button>\n            </div>\n\n            <div class=\"modal-body\">\n                <ng-content></ng-content>\n            </div>\n\n            <div *ngIf=\"showFooter\" class=\"modal-footer\">\n                <ng-content select=\"footer\"></ng-content>\n            </div>            \n        </div>\n    </div>\n</div>", styles: [".modal{background:rgba(0,0,0,.5)}.modal.in{opacity:1}.modal.in .modal-dialog{transform:translate(0)}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { headerContent: [{
+                type: ContentChild,
+                args: ['header']
             }], modalTitle: [{
                 type: Input
             }], showHeader: [{
@@ -46,9 +48,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 type: Input
             }], modalDialogId: [{
                 type: Input
+            }], showCloseButton: [{
+                type: Input
             }], modalOpen: [{
                 type: Output
             }], modalClose: [{
                 type: Output
+            }], _modal: [{
+                type: ViewChild,
+                args: ['modal', { static: false }]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvbW9kYWwvbW9kYWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvbW9kYWwvbW9kYWwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNILFNBQVMsRUFFVCxLQUFLLEVBRUwsTUFBTSxFQUVOLFNBQVMsRUFDVCxZQUFZLEdBQ2YsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLG9DQUFvQyxDQUFDOzs7O0FBTzdELE1BQU0sT0FBTyxpQkFBaUI7SUFpQjFCO1FBWGdCLGVBQVUsR0FBWSxJQUFJLENBQUM7UUFDM0IsZUFBVSxHQUFZLElBQUksQ0FBQztRQUUzQixTQUFJLEdBQThCLElBQUksQ0FBQztRQUd0QyxjQUFTLEdBQXVCLElBQUksWUFBWSxFQUFRLENBQUM7UUFDekQsZUFBVSxHQUF1QixJQUFJLFlBQVksRUFBUSxDQUFDO1FBRXBFLGNBQVMsR0FBRyxPQUFPLENBQUM7SUFFWixDQUFDO0lBRWhCLFFBQVEsS0FBVSxDQUFDO0lBRVosSUFBSTtRQUNQLElBQUksSUFBSSxDQUFDLE1BQU0sSUFBSSxTQUFTLEVBQUU7WUFDMUIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLE9BQU8sR0FBRyxPQUFPLENBQUM7WUFDbEQsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLEVBQUUsQ0FBQztTQUN6QjtJQUNMLENBQUM7SUFFTSxLQUFLO1FBQ1IsSUFBSSxJQUFJLENBQUMsTUFBTSxJQUFJLFNBQVMsRUFBRTtZQUMxQixJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsT0FBTyxHQUFHLE1BQU0sQ0FBQztZQUNqRCxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksRUFBRSxDQUFDO1NBQzFCO0lBQ0wsQ0FBQzs7OEdBakNRLGlCQUFpQjtrR0FBakIsaUJBQWlCLGlYQ2pCOUIsMnJDQWtDTTsyRkRqQk8saUJBQWlCO2tCQUw3QixTQUFTOytCQUNJLFdBQVc7MEVBSzBCLE1BQU07c0JBQXBELFNBQVM7dUJBQUMsT0FBTyxFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRTtnQkFJckIsVUFBVTtzQkFBekIsS0FBSztnQkFDVSxVQUFVO3NCQUF6QixLQUFLO2dCQUNVLFVBQVU7c0JBQXpCLEtBQUs7Z0JBQ1UsU0FBUztzQkFBeEIsS0FBSztnQkFDVSxJQUFJO3NCQUFuQixLQUFLO2dCQUNVLGFBQWE7c0JBQTVCLEtBQUs7Z0JBRVcsU0FBUztzQkFBekIsTUFBTTtnQkFDVSxVQUFVO3NCQUExQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICAgIENvbXBvbmVudCxcclxuICAgIEVsZW1lbnRSZWYsXHJcbiAgICBJbnB1dCxcclxuICAgIE9uSW5pdCxcclxuICAgIE91dHB1dCxcclxuICAgIFNpbXBsZUNoYW5nZXMsXHJcbiAgICBWaWV3Q2hpbGQsXHJcbiAgICBFdmVudEVtaXR0ZXIsXHJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IGZhWG1hcmsgfSBmcm9tICdAZm9ydGF3ZXNvbWUvcHJvLXJlZ3VsYXItc3ZnLWljb25zJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gICAgc2VsZWN0b3I6ICdzZHMtbW9kYWwnLFxyXG4gICAgdGVtcGxhdGVVcmw6ICcuL21vZGFsLmNvbXBvbmVudC5odG1sJyxcclxuICAgIHN0eWxlVXJsczogWycuL21vZGFsLmNvbXBvbmVudC5zY3NzJ10sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBTZHNNb2RhbENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgICBAVmlld0NoaWxkKCdtb2RhbCcsIHsgc3RhdGljOiBmYWxzZSB9KSBwcml2YXRlIF9tb2RhbDpcclxuICAgICAgICB8IEVsZW1lbnRSZWZcclxuICAgICAgICB8IHVuZGVmaW5lZDtcclxuXHJcbiAgICBASW5wdXQoKSBwdWJsaWMgbW9kYWxUaXRsZT86IHN0cmluZztcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzaG93SGVhZGVyOiBib29sZWFuID0gdHJ1ZTtcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzaG93Rm9vdGVyOiBib29sZWFuID0gdHJ1ZTtcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBjbG9zZVRleHQ/OiBzdHJpbmc7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgc2l6ZTogJ3NtJyB8ICdtZCcgfCAnbGcnIHwgJ3hsJyA9ICdtZCc7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgbW9kYWxEaWFsb2dJZD86IHN0cmluZztcclxuXHJcbiAgICBAT3V0cHV0KCkgcHVibGljIG1vZGFsT3BlbjogRXZlbnRFbWl0dGVyPHZvaWQ+ID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xyXG4gICAgQE91dHB1dCgpIHB1YmxpYyBtb2RhbENsb3NlOiBFdmVudEVtaXR0ZXI8dm9pZD4gPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XHJcblxyXG4gICAgcHVibGljIGNsb3NlSWNvbiA9IGZhWG1hcms7XHJcblxyXG4gICAgY29uc3RydWN0b3IoKSB7fVxyXG5cclxuICAgIG5nT25Jbml0KCk6IHZvaWQge31cclxuXHJcbiAgICBwdWJsaWMgb3BlbigpOiB2b2lkIHtcclxuICAgICAgICBpZiAodGhpcy5fbW9kYWwgIT0gdW5kZWZpbmVkKSB7XHJcbiAgICAgICAgICAgIHRoaXMuX21vZGFsLm5hdGl2ZUVsZW1lbnQuc3R5bGUuZGlzcGxheSA9ICdibG9jayc7XHJcbiAgICAgICAgICAgIHRoaXMubW9kYWxPcGVuLmVtaXQoKTtcclxuICAgICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIGNsb3NlKCk6IHZvaWQge1xyXG4gICAgICAgIGlmICh0aGlzLl9tb2RhbCAhPSB1bmRlZmluZWQpIHtcclxuICAgICAgICAgICAgdGhpcy5fbW9kYWwubmF0aXZlRWxlbWVudC5zdHlsZS5kaXNwbGF5ID0gJ25vbmUnO1xyXG4gICAgICAgICAgICB0aGlzLm1vZGFsQ2xvc2UuZW1pdCgpO1xyXG4gICAgICAgIH1cclxuICAgIH1cclxufVxyXG4iLCI8ZGl2ICNtb2RhbCBjbGFzcz1cIm1vZGFsXCI+XG4gICAgPGRpdlxuICAgICAgICBjbGFzcz1cIm1vZGFsLWRpYWxvZyBtb2RhbC1kaWFsb2ctY2VudGVyZWQgbW9kYWwtZGlhbG9nLXNjcm9sbGFibGVcIlxuICAgICAgICBbaWRdPVwibW9kYWxEaWFsb2dJZFwiXG4gICAgICAgIFtuZ0NsYXNzXT1cIidtb2RhbC0nICsgc2l6ZVwiXG4gICAgICAgIHJvbGU9XCJkb2N1bWVudFwiXG4gICAgPlxuICAgICAgICA8ZGl2IGNsYXNzPVwibW9kYWwtY29udGVudFwiPlxuXG4gICAgICAgICAgICA8ZGl2ICpuZ0lmPVwic2hvd0hlYWRlclwiIGNsYXNzPVwibW9kYWwtaGVhZGVyXCI+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2hlYWRlcl1cIj48L25nLWNvbnRlbnQ+XG4gICAgICAgICAgICA8L2Rpdj4gICAgICAgICAgICAgXG5cbiAgICAgICAgICAgIDxkaXYgKm5nSWY9XCJzaG93SGVhZGVyXCIgY2xhc3M9XCJtb2RhbC1oZWFkZXJcIj5cbiAgICAgICAgICAgICAgICA8aDUgY2xhc3M9XCJtb2RhbC10aXRsZVwiPnt7bW9kYWxUaXRsZX19PC9oNT5cbiAgICAgICAgICAgICAgICA8YnV0dG9uIFxuICAgICAgICAgICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCIgXG4gICAgICAgICAgICAgICAgICAgIGNsYXNzPVwiY2xvc2VcIiBcbiAgICAgICAgICAgICAgICAgICAgW3RpdGxlXT1cImNsb3NlVGV4dFwiXG4gICAgICAgICAgICAgICAgICAgIChjbGljayk9XCJjbG9zZSgpXCI+XG4gICAgICAgICAgICAgICAgICAgIDxmYS1pY29uIFtpY29uXT1cImNsb3NlSWNvblwiPjwvZmEtaWNvbj5cbiAgICAgICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbaGVhZGVyXVwiPjwvbmctY29udGVudD5cbiAgICAgICAgICAgIDwvZGl2PlxuXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwibW9kYWwtYm9keVwiPlxuICAgICAgICAgICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICAgICAgICAgIDwvZGl2PlxuXG4gICAgICAgICAgICA8ZGl2ICpuZ0lmPVwic2hvd0Zvb3RlclwiIGNsYXNzPVwibW9kYWwtZm9vdGVyXCI+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2Zvb3Rlcl1cIj48L25nLWNvbnRlbnQ+XG4gICAgICAgICAgICA8L2Rpdj4gICAgICAgICAgICBcbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG48L2Rpdj4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvbW9kYWwvbW9kYWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvbW9kYWwvbW9kYWwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNILFNBQVMsRUFFVCxLQUFLLEVBRUwsTUFBTSxFQUNOLFNBQVMsRUFDVCxZQUFZLEVBQ1osWUFBWSxHQUNmLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQzs7OztBQU83RCxNQUFNLE9BQU8saUJBQWlCO0lBb0IxQjtRQW5Cd0Isa0JBQWEsR0FBZSxFQUFFLGFBQWEsRUFBRSxTQUFTLEVBQUUsQ0FBQztRQUdqRSxlQUFVLEdBQVksSUFBSSxDQUFDO1FBQzNCLGVBQVUsR0FBWSxJQUFJLENBQUM7UUFFM0IsU0FBSSxHQUE4QixJQUFJLENBQUM7UUFFdkMsb0JBQWUsR0FBWSxJQUFJLENBQUM7UUFFL0IsY0FBUyxHQUF1QixJQUFJLFlBQVksRUFBUSxDQUFDO1FBQ3pELGVBQVUsR0FBdUIsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUVwRSxjQUFTLEdBQUcsT0FBTyxDQUFDO0lBTVosQ0FBQztJQUVoQixRQUFRLEtBQVUsQ0FBQztJQUVaLElBQUk7UUFDUCxJQUFJLElBQUksQ0FBQyxNQUFNLElBQUksU0FBUyxFQUFFO1lBQzFCLElBQUksQ0FBQyxNQUFNLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFDO1lBQ2xELElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxFQUFFLENBQUM7U0FDekI7SUFDTCxDQUFDO0lBRU0sS0FBSztRQUNSLElBQUksSUFBSSxDQUFDLE1BQU0sSUFBSSxTQUFTLEVBQUU7WUFDMUIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLE9BQU8sR0FBRyxNQUFNLENBQUM7WUFDakQsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztTQUMxQjtJQUNMLENBQUM7OzhHQXBDUSxpQkFBaUI7a0dBQWpCLGlCQUFpQiwwZkNqQjlCLHdzQ0FrQ007MkZEakJPLGlCQUFpQjtrQkFMN0IsU0FBUzsrQkFDSSxXQUFXOzBFQUtHLGFBQWE7c0JBQXBDLFlBQVk7dUJBQUMsUUFBUTtnQkFFTixVQUFVO3NCQUF6QixLQUFLO2dCQUNVLFVBQVU7c0JBQXpCLEtBQUs7Z0JBQ1UsVUFBVTtzQkFBekIsS0FBSztnQkFDVSxTQUFTO3NCQUF4QixLQUFLO2dCQUNVLElBQUk7c0JBQW5CLEtBQUs7Z0JBQ1UsYUFBYTtzQkFBNUIsS0FBSztnQkFDVSxlQUFlO3NCQUE5QixLQUFLO2dCQUVXLFNBQVM7c0JBQXpCLE1BQU07Z0JBQ1UsVUFBVTtzQkFBMUIsTUFBTTtnQkFLd0MsTUFBTTtzQkFBcEQsU0FBUzt1QkFBQyxPQUFPLEVBQUUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICAgIENvbXBvbmVudCxcclxuICAgIEVsZW1lbnRSZWYsXHJcbiAgICBJbnB1dCxcclxuICAgIE9uSW5pdCxcclxuICAgIE91dHB1dCxcclxuICAgIFZpZXdDaGlsZCxcclxuICAgIEV2ZW50RW1pdHRlcixcclxuICAgIENvbnRlbnRDaGlsZCxcclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgZmFYbWFyayB9IGZyb20gJ0Bmb3J0YXdlc29tZS9wcm8tcmVndWxhci1zdmctaWNvbnMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgICBzZWxlY3RvcjogJ3Nkcy1tb2RhbCcsXHJcbiAgICB0ZW1wbGF0ZVVybDogJy4vbW9kYWwuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vbW9kYWwuY29tcG9uZW50LnNjc3MnXSxcclxufSlcclxuZXhwb3J0IGNsYXNzIFNkc01vZGFsQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuICAgIEBDb250ZW50Q2hpbGQoJ2hlYWRlcicpIGhlYWRlckNvbnRlbnQ6IEVsZW1lbnRSZWYgPSB7IG5hdGl2ZUVsZW1lbnQ6IHVuZGVmaW5lZCB9O1xyXG5cclxuICAgIEBJbnB1dCgpIHB1YmxpYyBtb2RhbFRpdGxlPzogc3RyaW5nO1xyXG4gICAgQElucHV0KCkgcHVibGljIHNob3dIZWFkZXI6IGJvb2xlYW4gPSB0cnVlO1xyXG4gICAgQElucHV0KCkgcHVibGljIHNob3dGb290ZXI6IGJvb2xlYW4gPSB0cnVlO1xyXG4gICAgQElucHV0KCkgcHVibGljIGNsb3NlVGV4dD86IHN0cmluZztcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzaXplOiAnc20nIHwgJ21kJyB8ICdsZycgfCAneGwnID0gJ21kJztcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBtb2RhbERpYWxvZ0lkPzogc3RyaW5nO1xyXG4gICAgQElucHV0KCkgcHVibGljIHNob3dDbG9zZUJ1dHRvbjogYm9vbGVhbiA9IHRydWU7XHJcblxyXG4gICAgQE91dHB1dCgpIHB1YmxpYyBtb2RhbE9wZW46IEV2ZW50RW1pdHRlcjx2b2lkPiA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcclxuICAgIEBPdXRwdXQoKSBwdWJsaWMgbW9kYWxDbG9zZTogRXZlbnRFbWl0dGVyPHZvaWQ+ID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xyXG5cclxuICAgIHB1YmxpYyBjbG9zZUljb24gPSBmYVhtYXJrO1xyXG5cclxuXHJcbiAgICBAVmlld0NoaWxkKCdtb2RhbCcsIHsgc3RhdGljOiBmYWxzZSB9KSBwcml2YXRlIF9tb2RhbDogRWxlbWVudFJlZiB8IHVuZGVmaW5lZDtcclxuICAgIFxyXG5cclxuICAgIGNvbnN0cnVjdG9yKCkge31cclxuXHJcbiAgICBuZ09uSW5pdCgpOiB2b2lkIHt9XHJcblxyXG4gICAgcHVibGljIG9wZW4oKTogdm9pZCB7XHJcbiAgICAgICAgaWYgKHRoaXMuX21vZGFsICE9IHVuZGVmaW5lZCkge1xyXG4gICAgICAgICAgICB0aGlzLl9tb2RhbC5uYXRpdmVFbGVtZW50LnN0eWxlLmRpc3BsYXkgPSAnYmxvY2snO1xyXG4gICAgICAgICAgICB0aGlzLm1vZGFsT3Blbi5lbWl0KCk7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIHB1YmxpYyBjbG9zZSgpOiB2b2lkIHtcclxuICAgICAgICBpZiAodGhpcy5fbW9kYWwgIT0gdW5kZWZpbmVkKSB7XHJcbiAgICAgICAgICAgIHRoaXMuX21vZGFsLm5hdGl2ZUVsZW1lbnQuc3R5bGUuZGlzcGxheSA9ICdub25lJztcclxuICAgICAgICAgICAgdGhpcy5tb2RhbENsb3NlLmVtaXQoKTtcclxuICAgICAgICB9XHJcbiAgICB9XHJcbn1cclxuIiwiPGRpdiAjbW9kYWwgY2xhc3M9XCJtb2RhbFwiPlxuICAgIDxkaXZcbiAgICAgICAgY2xhc3M9XCJtb2RhbC1kaWFsb2cgbW9kYWwtZGlhbG9nLWNlbnRlcmVkIG1vZGFsLWRpYWxvZy1zY3JvbGxhYmxlXCJcbiAgICAgICAgW2lkXT1cIm1vZGFsRGlhbG9nSWRcIlxuICAgICAgICBbbmdDbGFzc109XCInbW9kYWwtJyArIHNpemVcIlxuICAgICAgICByb2xlPVwiZG9jdW1lbnRcIlxuICAgID5cbiAgICAgICAgPGRpdiBjbGFzcz1cIm1vZGFsLWNvbnRlbnRcIj5cblxuICAgICAgICAgICAgPGRpdiAqbmdJZj1cInNob3dIZWFkZXIgJiYgaGVhZGVyQ29udGVudFwiIGNsYXNzPVwibW9kYWwtaGVhZGVyXCI+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PSdoZWFkZXInPjwvbmctY29udGVudD5cbiAgICAgICAgICAgIDwvZGl2PiAgICAgICAgICAgICBcblxuICAgICAgICAgICAgPGRpdiAqbmdJZj1cInNob3dIZWFkZXIgJiYgIWhlYWRlckNvbnRlbnRcIiBjbGFzcz1cIm1vZGFsLWhlYWRlclwiPlxuICAgICAgICAgICAgICAgIDxoNSBjbGFzcz1cIm1vZGFsLXRpdGxlXCI+e3ttb2RhbFRpdGxlfX08L2g1PlxuICAgICAgICAgICAgICAgIDxidXR0b24gXG4gICAgICAgICAgICAgICAgICAgICpuZ0lmPVwic2hvd0Nsb3NlQnV0dG9uXCJcbiAgICAgICAgICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiIFxuICAgICAgICAgICAgICAgICAgICBjbGFzcz1cImNsb3NlXCIgXG4gICAgICAgICAgICAgICAgICAgIFt0aXRsZV09XCJjbG9zZVRleHRcIlxuICAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwiY2xvc2UoKVwiPlxuICAgICAgICAgICAgICAgICAgICA8ZmEtaWNvbiBbaWNvbl09XCJjbG9zZUljb25cIj48L2ZhLWljb24+XG4gICAgICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cIm1vZGFsLWJvZHlcIj5cbiAgICAgICAgICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgICAgPGRpdiAqbmdJZj1cInNob3dGb290ZXJcIiBjbGFzcz1cIm1vZGFsLWZvb3RlclwiPlxuICAgICAgICAgICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cImZvb3RlclwiPjwvbmctY29udGVudD5cbiAgICAgICAgICAgIDwvZGl2PiAgICAgICAgICAgIFxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbjwvZGl2PiJdfQ==

package/esm2020/src/lib/modal/modal.module.mjs

@@ -2,13 +2,19 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SdsModalComponent } from './modal.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { SdsDialogComponent } from './dialog/dialog.component';
 import * as i0 from "@angular/core";
-const components = [SdsModalComponent];
+const components = [
+    SdsModalComponent,
+    SdsDialogComponent
+];
 export class SdsModalModule {
 }
 SdsModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SdsModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalModule, declarations: [SdsModalComponent], imports: [CommonModule,
-        FontAwesomeModule], exports: [SdsModalComponent] });
+SdsModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalModule, declarations: [SdsModalComponent,
+        SdsDialogComponent], imports: [CommonModule,
+        FontAwesomeModule], exports: [SdsModalComponent,
+        SdsDialogComponent] });
 SdsModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalModule, imports: [[
             CommonModule,
             FontAwesomeModule
@@ -28,4 +34,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                     ]
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvbW9kYWwvbW9kYWwubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQ3RELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGtDQUFrQyxDQUFDOztBQUdyRSxNQUFNLFVBQVUsR0FBRyxDQUFDLGlCQUFpQixDQUFDLENBQUM7QUFhdkMsTUFBTSxPQUFPLGNBQWM7OzJHQUFkLGNBQWM7NEdBQWQsY0FBYyxpQkFiUCxpQkFBaUIsYUFNakMsWUFBWTtRQUNaLGlCQUFpQixhQVBELGlCQUFpQjs0R0FheEIsY0FBYyxZQVJoQjtZQUNQLFlBQVk7WUFDWixpQkFBaUI7U0FDbEI7MkZBS1UsY0FBYztrQkFaMUIsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUU7d0JBQ1osR0FBRyxVQUFVO3FCQUNkO29CQUNELE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUNaLGlCQUFpQjtxQkFDbEI7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLEdBQUcsVUFBVTtxQkFDaEI7aUJBQ0EiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IFNkc01vZGFsQ29tcG9uZW50IH0gZnJvbSAnLi9tb2RhbC5jb21wb25lbnQnO1xuaW1wb3J0IHsgRm9udEF3ZXNvbWVNb2R1bGUgfSBmcm9tICdAZm9ydGF3ZXNvbWUvYW5ndWxhci1mb250YXdlc29tZSc7XG5cblxuY29uc3QgY29tcG9uZW50cyA9IFtTZHNNb2RhbENvbXBvbmVudF07XG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtcbiAgICAuLi5jb21wb25lbnRzXG4gIF0sXG4gIGltcG9ydHM6IFtcbiAgICBDb21tb25Nb2R1bGUsXG4gICAgRm9udEF3ZXNvbWVNb2R1bGVcbiAgXSxcbiAgZXhwb3J0czogW1xuICAgIC4uLmNvbXBvbmVudHNcbl1cbn0pXG5leHBvcnQgY2xhc3MgU2RzTW9kYWxNb2R1bGUgeyB9XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvbW9kYWwvbW9kYWwubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQ3RELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBQ3JFLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDJCQUEyQixDQUFDOztBQUcvRCxNQUFNLFVBQVUsR0FBRztJQUNmLGlCQUFpQjtJQUNqQixrQkFBa0I7Q0FDckIsQ0FBQztBQWNGLE1BQU0sT0FBTyxjQUFjOzsyR0FBZCxjQUFjOzRHQUFkLGNBQWMsaUJBaEJ2QixpQkFBaUI7UUFDakIsa0JBQWtCLGFBUWxCLFlBQVk7UUFDWixpQkFBaUIsYUFWakIsaUJBQWlCO1FBQ2pCLGtCQUFrQjs0R0FlVCxjQUFjLFlBUmhCO1lBQ1AsWUFBWTtZQUNaLGlCQUFpQjtTQUNsQjsyRkFLVSxjQUFjO2tCQVoxQixRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRTt3QkFDWixHQUFHLFVBQVU7cUJBQ2Q7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLFlBQVk7d0JBQ1osaUJBQWlCO3FCQUNsQjtvQkFDRCxPQUFPLEVBQUU7d0JBQ1AsR0FBRyxVQUFVO3FCQUNoQjtpQkFDQSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgU2RzTW9kYWxDb21wb25lbnQgfSBmcm9tICcuL21vZGFsLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBGb250QXdlc29tZU1vZHVsZSB9IGZyb20gJ0Bmb3J0YXdlc29tZS9hbmd1bGFyLWZvbnRhd2Vzb21lJztcbmltcG9ydCB7IFNkc0RpYWxvZ0NvbXBvbmVudCB9IGZyb20gJy4vZGlhbG9nL2RpYWxvZy5jb21wb25lbnQnO1xuXG5cbmNvbnN0IGNvbXBvbmVudHMgPSBbXG4gICAgU2RzTW9kYWxDb21wb25lbnQsXG4gICAgU2RzRGlhbG9nQ29tcG9uZW50XG5dO1xuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtcbiAgICAuLi5jb21wb25lbnRzXG4gIF0sXG4gIGltcG9ydHM6IFtcbiAgICBDb21tb25Nb2R1bGUsXG4gICAgRm9udEF3ZXNvbWVNb2R1bGVcbiAgXSxcbiAgZXhwb3J0czogW1xuICAgIC4uLmNvbXBvbmVudHNcbl1cbn0pXG5leHBvcnQgY2xhc3MgU2RzTW9kYWxNb2R1bGUgeyB9XG4iXX0=

package/esm2020/src/lib/modal/public-api.mjs

@@ -1,3 +1,4 @@
 export * from './modal.module';
 export * from './modal.component';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL21vZGFsL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxnQkFBZ0IsQ0FBQztBQUMvQixjQUFjLG1CQUFtQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9tb2RhbC5tb2R1bGUnO1xyXG5leHBvcnQgKiBmcm9tICcuL21vZGFsLmNvbXBvbmVudCc7XHJcbiJdfQ==
+export * from './dialog/dialog.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL21vZGFsL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxnQkFBZ0IsQ0FBQztBQUMvQixjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMsMkJBQTJCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL21vZGFsLm1vZHVsZSc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbW9kYWwuY29tcG9uZW50JztcclxuZXhwb3J0ICogZnJvbSAnLi9kaWFsb2cvZGlhbG9nLmNvbXBvbmVudCc7XHJcbiJdfQ==

package/esm2020/src/lib/pane/pane.component.mjs

@@ -23,10 +23,10 @@ export class SdsPaneComponent {
     }
 }
 SdsPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsPaneComponent, selector: "sds-pane", inputs: { pages: "pages", contentWidthRem: "contentWidthRem" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pane border-left\">\n    <div class=\"pane-header\">\n        <ul>\n            <li \n                *ngFor=\"let page of pages\"\n                [class.active] = \"selectedPage === page\"\n                >\n                <div \n                    class=\"icon-container\"\n                    [title]=\"page.title\"\n                    (click) = \"showContent(page)\"\n                    >\n                    <fa-icon [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n                </div>\n            </li>\n        </ul>\n    </div>\n\n    <div \n        *ngIf=\"selectedPage\" \n        class=\"pane-content\"\n        [style.width.rem]=\"contentWidthRem\"\n        >\n        \n        <div class=\"page-header\">\n            <div class=\"title\">\n                {{selectedPage?.title}}\n            </div>\n\n            <button \n                class=\"btn ml-auto\"\n                (click)=\"hideContent()\"\n                >\n                <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </fa-icon>        \n            </button>  \n\n        </div>\n\n        <div class=\"page-content\">\n            <ng-container\n                [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n            >\n            </ng-container>            \n        </div>\n    </div>\n</div>", styles: [""], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+SdsPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsPaneComponent, selector: "sds-pane", inputs: { pages: "pages", contentWidthRem: "contentWidthRem" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pane border-left\">\n    <div class=\"pane-header\">\n        <ul>\n            <li \n                *ngFor=\"let page of pages\"\n                [class.active] = \"selectedPage === page\"\n                >\n                <div \n                    class=\"icon-container\"\n                    [title]=\"page.title\"\n                    (click) = \"showContent(page)\"\n                    >\n                    <fa-icon [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n                </div>\n            </li>\n        </ul>\n    </div>\n\n    <div \n        *ngIf=\"selectedPage\" \n        class=\"pane-content\"\n        [style.width.rem]=\"contentWidthRem\"\n        >\n        \n        <div class=\"page-header\">\n            <div class=\"title\">\n                {{selectedPage?.title}}\n            </div>\n\n            <button \n                class=\"btn btn-stealth ml-auto\"\n                (click)=\"hideContent()\"\n                >\n                <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </fa-icon>        \n            </button>  \n\n        </div>\n\n        <div class=\"page-container\">\n            <ng-container\n                [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n            >\n            </ng-container>            \n        </div>\n    </div>\n</div>", styles: [""], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsPaneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-pane', template: "<div class=\"pane border-left\">\n    <div class=\"pane-header\">\n        <ul>\n            <li \n                *ngFor=\"let page of pages\"\n                [class.active] = \"selectedPage === page\"\n                >\n                <div \n                    class=\"icon-container\"\n                    [title]=\"page.title\"\n                    (click) = \"showContent(page)\"\n                    >\n                    <fa-icon [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n                </div>\n            </li>\n        </ul>\n    </div>\n\n    <div \n        *ngIf=\"selectedPage\" \n        class=\"pane-content\"\n        [style.width.rem]=\"contentWidthRem\"\n        >\n        \n        <div class=\"page-header\">\n            <div class=\"title\">\n                {{selectedPage?.title}}\n            </div>\n\n            <button \n                class=\"btn ml-auto\"\n                (click)=\"hideContent()\"\n                >\n                <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </fa-icon>        \n            </button>  \n\n        </div>\n\n        <div class=\"page-content\">\n            <ng-container\n                [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n            >\n            </ng-container>            \n        </div>\n    </div>\n</div>", styles: [""] }]
+            args: [{ selector: 'sds-pane', template: "<div class=\"pane border-left\">\n    <div class=\"pane-header\">\n        <ul>\n            <li \n                *ngFor=\"let page of pages\"\n                [class.active] = \"selectedPage === page\"\n                >\n                <div \n                    class=\"icon-container\"\n                    [title]=\"page.title\"\n                    (click) = \"showContent(page)\"\n                    >\n                    <fa-icon [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n                </div>\n            </li>\n        </ul>\n    </div>\n\n    <div \n        *ngIf=\"selectedPage\" \n        class=\"pane-content\"\n        [style.width.rem]=\"contentWidthRem\"\n        >\n        \n        <div class=\"page-header\">\n            <div class=\"title\">\n                {{selectedPage?.title}}\n            </div>\n\n            <button \n                class=\"btn btn-stealth ml-auto\"\n                (click)=\"hideContent()\"\n                >\n                <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </fa-icon>        \n            </button>  \n\n        </div>\n\n        <div class=\"page-container\">\n            <ng-container\n                [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n            >\n            </ng-container>            \n        </div>\n    </div>\n</div>", styles: [""] }]
         }], ctorParameters: function () { return []; }, propDecorators: { pages: [{
                 type: Input
             }], contentWidthRem: [{
@@ -34,4 +34,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
             }], pageChange: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi9wYW5lL3BhbmUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvcGFuZS9wYW5lLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFHL0UsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLG9DQUFvQyxDQUFDOzs7O0FBTzdELE1BQU0sT0FBTyxnQkFBZ0I7SUFZekI7UUFUUyxvQkFBZSxHQUFXLEVBQUUsQ0FBQztRQUU1QixlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUduQyxxQkFBZ0IsR0FBWSxLQUFLLENBQUM7UUFFbEMsY0FBUyxHQUFHLE9BQU8sQ0FBQztJQUVaLENBQUM7SUFFaEIsUUFBUSxLQUFVLENBQUM7SUFFWixXQUFXLENBQUMsSUFBYztRQUM3QixJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQztRQUN6QixJQUFJLENBQUMsZ0JBQWdCLEdBQUcsSUFBSSxDQUFDO1FBQzdCLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQztJQUM1QyxDQUFDO0lBRU0sV0FBVztRQUNkLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxLQUFLLENBQUM7UUFDOUIsSUFBSSxDQUFDLFlBQVksR0FBRyxTQUFTLENBQUM7UUFDOUIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQzVDLENBQUM7OzZHQTFCUSxnQkFBZ0I7aUdBQWhCLGdCQUFnQix1SkNWN0IsMDJDQTZDTTsyRkRuQ08sZ0JBQWdCO2tCQUw1QixTQUFTOytCQUNJLFVBQVU7MEVBTVgsS0FBSztzQkFBYixLQUFLO2dCQUNHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBRUksVUFBVTtzQkFBbkIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFBhbmVQYWdlIH0gZnJvbSAnLi9wYW5lLm1vZGVsJztcblxuaW1wb3J0IHsgZmFYbWFyayB9IGZyb20gJ0Bmb3J0YXdlc29tZS9wcm8tcmVndWxhci1zdmctaWNvbnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3Nkcy1wYW5lJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vcGFuZS5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vcGFuZS5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBTZHNQYW5lQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICAgIEBJbnB1dCgpIHBhZ2VzPzogUGFuZVBhZ2VbXTtcbiAgICBASW5wdXQoKSBjb250ZW50V2lkdGhSZW06IG51bWJlciA9IDIwO1xuXG4gICAgQE91dHB1dCgpIHBhZ2VDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgICBwdWJsaWMgc2VsZWN0ZWRQYWdlPzogUGFuZVBhZ2U7XG4gICAgcHVibGljIGlzQ29udGVudFZpc2libGU6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAgIHB1YmxpYyBjbG9zZUljb24gPSBmYVhtYXJrO1xuXG4gICAgY29uc3RydWN0b3IoKSB7fVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7fVxuXG4gICAgcHVibGljIHNob3dDb250ZW50KHBhZ2U6IFBhbmVQYWdlKTogdm9pZHtcbiAgICAgICAgdGhpcy5zZWxlY3RlZFBhZ2UgPSBwYWdlO1xuICAgICAgICB0aGlzLmlzQ29udGVudFZpc2libGUgPSB0cnVlO1xuICAgICAgICB0aGlzLnBhZ2VDaGFuZ2UuZW1pdCh0aGlzLnNlbGVjdGVkUGFnZSk7XG4gICAgfVxuXG4gICAgcHVibGljIGhpZGVDb250ZW50KCk6IHZvaWR7XG4gICAgICAgIHRoaXMuaXNDb250ZW50VmlzaWJsZSA9IGZhbHNlO1xuICAgICAgICB0aGlzLnNlbGVjdGVkUGFnZSA9IHVuZGVmaW5lZDtcbiAgICAgICAgdGhpcy5wYWdlQ2hhbmdlLmVtaXQodGhpcy5zZWxlY3RlZFBhZ2UpO1xuICAgIH1cblxuXG59XG4iLCI8ZGl2IGNsYXNzPVwicGFuZSBib3JkZXItbGVmdFwiPlxuICAgIDxkaXYgY2xhc3M9XCJwYW5lLWhlYWRlclwiPlxuICAgICAgICA8dWw+XG4gICAgICAgICAgICA8bGkgXG4gICAgICAgICAgICAgICAgKm5nRm9yPVwibGV0IHBhZ2Ugb2YgcGFnZXNcIlxuICAgICAgICAgICAgICAgIFtjbGFzcy5hY3RpdmVdID0gXCJzZWxlY3RlZFBhZ2UgPT09IHBhZ2VcIlxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICA8ZGl2IFxuICAgICAgICAgICAgICAgICAgICBjbGFzcz1cImljb24tY29udGFpbmVyXCJcbiAgICAgICAgICAgICAgICAgICAgW3RpdGxlXT1cInBhZ2UudGl0bGVcIlxuICAgICAgICAgICAgICAgICAgICAoY2xpY2spID0gXCJzaG93Q29udGVudChwYWdlKVwiXG4gICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgPGZhLWljb24gW2ljb25dPVwicGFnZS5pY29uXCIgW2ZpeGVkV2lkdGhdPVwidHJ1ZVwiPiA8L2ZhLWljb24+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L2xpPlxuICAgICAgICA8L3VsPlxuICAgIDwvZGl2PlxuXG4gICAgPGRpdiBcbiAgICAgICAgKm5nSWY9XCJzZWxlY3RlZFBhZ2VcIiBcbiAgICAgICAgY2xhc3M9XCJwYW5lLWNvbnRlbnRcIlxuICAgICAgICBbc3R5bGUud2lkdGgucmVtXT1cImNvbnRlbnRXaWR0aFJlbVwiXG4gICAgICAgID5cbiAgICAgICAgXG4gICAgICAgIDxkaXYgY2xhc3M9XCJwYWdlLWhlYWRlclwiPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInRpdGxlXCI+XG4gICAgICAgICAgICAgICAge3tzZWxlY3RlZFBhZ2U/LnRpdGxlfX1cbiAgICAgICAgICAgIDwvZGl2PlxuXG4gICAgICAgICAgICA8YnV0dG9uIFxuICAgICAgICAgICAgICAgIGNsYXNzPVwiYnRuIG1sLWF1dG9cIlxuICAgICAgICAgICAgICAgIChjbGljayk9XCJoaWRlQ29udGVudCgpXCJcbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPGZhLWljb24gW2ljb25dPVwiY2xvc2VJY29uXCIgW2ZpeGVkV2lkdGhdPVwidHJ1ZVwiPiA8L2ZhLWljb24+ICAgICAgICBcbiAgICAgICAgICAgIDwvYnV0dG9uPiAgXG5cbiAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgPGRpdiBjbGFzcz1cInBhZ2UtY29udGVudFwiPlxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lclxuICAgICAgICAgICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0XT1cInNlbGVjdGVkUGFnZSAmJiBzZWxlY3RlZFBhZ2UuY29udGVudFRlbXBsYXRlID8gc2VsZWN0ZWRQYWdlLmNvbnRlbnRUZW1wbGF0ZSA6IG51bGxcIlxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgPC9uZy1jb250YWluZXI+ICAgICAgICAgICAgXG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuPC9kaXY+Il19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFuZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi9wYW5lL3BhbmUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvcGFuZS9wYW5lLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFHL0UsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLG9DQUFvQyxDQUFDOzs7O0FBTzdELE1BQU0sT0FBTyxnQkFBZ0I7SUFZekI7UUFUUyxvQkFBZSxHQUFXLEVBQUUsQ0FBQztRQUU1QixlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUduQyxxQkFBZ0IsR0FBWSxLQUFLLENBQUM7UUFFbEMsY0FBUyxHQUFHLE9BQU8sQ0FBQztJQUVaLENBQUM7SUFFaEIsUUFBUSxLQUFVLENBQUM7SUFFWixXQUFXLENBQUMsSUFBYztRQUM3QixJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQztRQUN6QixJQUFJLENBQUMsZ0JBQWdCLEdBQUcsSUFBSSxDQUFDO1FBQzdCLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQztJQUM1QyxDQUFDO0lBRU0sV0FBVztRQUNkLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxLQUFLLENBQUM7UUFDOUIsSUFBSSxDQUFDLFlBQVksR0FBRyxTQUFTLENBQUM7UUFDOUIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQzVDLENBQUM7OzZHQTFCUSxnQkFBZ0I7aUdBQWhCLGdCQUFnQix1SkNWN0IsdzNDQTZDTTsyRkRuQ08sZ0JBQWdCO2tCQUw1QixTQUFTOytCQUNJLFVBQVU7MEVBTVgsS0FBSztzQkFBYixLQUFLO2dCQUNHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBRUksVUFBVTtzQkFBbkIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFBhbmVQYWdlIH0gZnJvbSAnLi9wYW5lLm1vZGVsJztcblxuaW1wb3J0IHsgZmFYbWFyayB9IGZyb20gJ0Bmb3J0YXdlc29tZS9wcm8tcmVndWxhci1zdmctaWNvbnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3Nkcy1wYW5lJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vcGFuZS5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vcGFuZS5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBTZHNQYW5lQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICAgIEBJbnB1dCgpIHBhZ2VzPzogUGFuZVBhZ2VbXTtcbiAgICBASW5wdXQoKSBjb250ZW50V2lkdGhSZW06IG51bWJlciA9IDIwO1xuXG4gICAgQE91dHB1dCgpIHBhZ2VDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgICBwdWJsaWMgc2VsZWN0ZWRQYWdlPzogUGFuZVBhZ2U7XG4gICAgcHVibGljIGlzQ29udGVudFZpc2libGU6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAgIHB1YmxpYyBjbG9zZUljb24gPSBmYVhtYXJrO1xuXG4gICAgY29uc3RydWN0b3IoKSB7fVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7fVxuXG4gICAgcHVibGljIHNob3dDb250ZW50KHBhZ2U6IFBhbmVQYWdlKTogdm9pZHtcbiAgICAgICAgdGhpcy5zZWxlY3RlZFBhZ2UgPSBwYWdlO1xuICAgICAgICB0aGlzLmlzQ29udGVudFZpc2libGUgPSB0cnVlO1xuICAgICAgICB0aGlzLnBhZ2VDaGFuZ2UuZW1pdCh0aGlzLnNlbGVjdGVkUGFnZSk7XG4gICAgfVxuXG4gICAgcHVibGljIGhpZGVDb250ZW50KCk6IHZvaWR7XG4gICAgICAgIHRoaXMuaXNDb250ZW50VmlzaWJsZSA9IGZhbHNlO1xuICAgICAgICB0aGlzLnNlbGVjdGVkUGFnZSA9IHVuZGVmaW5lZDtcbiAgICAgICAgdGhpcy5wYWdlQ2hhbmdlLmVtaXQodGhpcy5zZWxlY3RlZFBhZ2UpO1xuICAgIH1cblxuXG59XG4iLCI8ZGl2IGNsYXNzPVwicGFuZSBib3JkZXItbGVmdFwiPlxuICAgIDxkaXYgY2xhc3M9XCJwYW5lLWhlYWRlclwiPlxuICAgICAgICA8dWw+XG4gICAgICAgICAgICA8bGkgXG4gICAgICAgICAgICAgICAgKm5nRm9yPVwibGV0IHBhZ2Ugb2YgcGFnZXNcIlxuICAgICAgICAgICAgICAgIFtjbGFzcy5hY3RpdmVdID0gXCJzZWxlY3RlZFBhZ2UgPT09IHBhZ2VcIlxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICA8ZGl2IFxuICAgICAgICAgICAgICAgICAgICBjbGFzcz1cImljb24tY29udGFpbmVyXCJcbiAgICAgICAgICAgICAgICAgICAgW3RpdGxlXT1cInBhZ2UudGl0bGVcIlxuICAgICAgICAgICAgICAgICAgICAoY2xpY2spID0gXCJzaG93Q29udGVudChwYWdlKVwiXG4gICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgPGZhLWljb24gW2ljb25dPVwicGFnZS5pY29uXCIgW2ZpeGVkV2lkdGhdPVwidHJ1ZVwiPiA8L2ZhLWljb24+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L2xpPlxuICAgICAgICA8L3VsPlxuICAgIDwvZGl2PlxuXG4gICAgPGRpdiBcbiAgICAgICAgKm5nSWY9XCJzZWxlY3RlZFBhZ2VcIiBcbiAgICAgICAgY2xhc3M9XCJwYW5lLWNvbnRlbnRcIlxuICAgICAgICBbc3R5bGUud2lkdGgucmVtXT1cImNvbnRlbnRXaWR0aFJlbVwiXG4gICAgICAgID5cbiAgICAgICAgXG4gICAgICAgIDxkaXYgY2xhc3M9XCJwYWdlLWhlYWRlclwiPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInRpdGxlXCI+XG4gICAgICAgICAgICAgICAge3tzZWxlY3RlZFBhZ2U/LnRpdGxlfX1cbiAgICAgICAgICAgIDwvZGl2PlxuXG4gICAgICAgICAgICA8YnV0dG9uIFxuICAgICAgICAgICAgICAgIGNsYXNzPVwiYnRuIGJ0bi1zdGVhbHRoIG1sLWF1dG9cIlxuICAgICAgICAgICAgICAgIChjbGljayk9XCJoaWRlQ29udGVudCgpXCJcbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPGZhLWljb24gW2ljb25dPVwiY2xvc2VJY29uXCIgW2ZpeGVkV2lkdGhdPVwidHJ1ZVwiPiA8L2ZhLWljb24+ICAgICAgICBcbiAgICAgICAgICAgIDwvYnV0dG9uPiAgXG5cbiAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgPGRpdiBjbGFzcz1cInBhZ2UtY29udGFpbmVyXCI+XG4gICAgICAgICAgICA8bmctY29udGFpbmVyXG4gICAgICAgICAgICAgICAgW25nVGVtcGxhdGVPdXRsZXRdPVwic2VsZWN0ZWRQYWdlICYmIHNlbGVjdGVkUGFnZS5jb250ZW50VGVtcGxhdGUgPyBzZWxlY3RlZFBhZ2UuY29udGVudFRlbXBsYXRlIDogbnVsbFwiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICA8L25nLWNvbnRhaW5lcj4gICAgICAgICAgICBcbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG48L2Rpdj4iXX0=

package/fesm2015/spicainternational-ngx-sds-components-src-lib-modal.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewChild, Input, Output, NgModule } from '@angular/core';
+import { EventEmitter, Component, ContentChild, Input, Output, ViewChild, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { faXmark } from '@fortawesome/pro-regular-svg-icons';
@@ -8,9 +8,11 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 class SdsModalComponent {
     constructor() {
+        this.headerContent = { nativeElement: undefined };
         this.showHeader = true;
         this.showFooter = true;
         this.size = 'md';
+        this.showCloseButton = true;
         this.modalOpen = new EventEmitter();
         this.modalClose = new EventEmitter();
         this.closeIcon = faXmark;
@@ -30,13 +32,13 @@ class SdsModalComponent {
     }
 }
 SdsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsModalComponent, selector: "sds-modal", inputs: { modalTitle: "modalTitle", showHeader: "showHeader", showFooter: "showFooter", closeText: "closeText", size: "size", modalDialogId: "modalDialogId" }, outputs: { modalOpen: "modalOpen", modalClose: "modalClose" }, viewQueries: [{ propertyName: "_modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<div #modal class=\"modal\">\n    <div\n        class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\"\n        [id]=\"modalDialogId\"\n        [ngClass]=\"'modal-' + size\"\n        role=\"document\"\n    >\n        <div class=\"modal-content\">\n\n            <div *ngIf=\"showHeader\" class=\"modal-header\">\n                <ng-content select=\"[header]\"></ng-content>\n            </div>             \n\n            <div *ngIf=\"showHeader\" class=\"modal-header\">\n                <h5 class=\"modal-title\">{{modalTitle}}</h5>\n                <button \n                    type=\"button\" \n                    class=\"close\" \n                    [title]=\"closeText\"\n                    (click)=\"close()\">\n                    <fa-icon [icon]=\"closeIcon\"></fa-icon>\n                </button>\n                <ng-content select=\"[header]\"></ng-content>\n            </div>\n\n            <div class=\"modal-body\">\n                <ng-content></ng-content>\n            </div>\n\n            <div *ngIf=\"showFooter\" class=\"modal-footer\">\n                <ng-content select=\"[footer]\"></ng-content>\n            </div>            \n        </div>\n    </div>\n</div>", styles: [".modal{background:rgba(0,0,0,.5)}.modal.in{opacity:1}.modal.in .modal-dialog{transform:translate(0)}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SdsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsModalComponent, selector: "sds-modal", inputs: { modalTitle: "modalTitle", showHeader: "showHeader", showFooter: "showFooter", closeText: "closeText", size: "size", modalDialogId: "modalDialogId", showCloseButton: "showCloseButton" }, outputs: { modalOpen: "modalOpen", modalClose: "modalClose" }, queries: [{ propertyName: "headerContent", first: true, predicate: ["header"], descendants: true }], viewQueries: [{ propertyName: "_modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<div #modal class=\"modal\">\n    <div\n        class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\"\n        [id]=\"modalDialogId\"\n        [ngClass]=\"'modal-' + size\"\n        role=\"document\"\n    >\n        <div class=\"modal-content\">\n\n            <div *ngIf=\"showHeader && headerContent\" class=\"modal-header\">\n                <ng-content select='header'></ng-content>\n            </div>             \n\n            <div *ngIf=\"showHeader && !headerContent\" class=\"modal-header\">\n                <h5 class=\"modal-title\">{{modalTitle}}</h5>\n                <button \n                    *ngIf=\"showCloseButton\"\n                    type=\"button\" \n                    class=\"close\" \n                    [title]=\"closeText\"\n                    (click)=\"close()\">\n                    <fa-icon [icon]=\"closeIcon\"></fa-icon>\n                </button>\n            </div>\n\n            <div class=\"modal-body\">\n                <ng-content></ng-content>\n            </div>\n\n            <div *ngIf=\"showFooter\" class=\"modal-footer\">\n                <ng-content select=\"footer\"></ng-content>\n            </div>            \n        </div>\n    </div>\n</div>", styles: [".modal{background:rgba(0,0,0,.5)}.modal.in{opacity:1}.modal.in .modal-dialog{transform:translate(0)}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-modal', template: "<div #modal class=\"modal\">\n    <div\n        class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\"\n        [id]=\"modalDialogId\"\n        [ngClass]=\"'modal-' + size\"\n        role=\"document\"\n    >\n        <div class=\"modal-content\">\n\n            <div *ngIf=\"showHeader\" class=\"modal-header\">\n                <ng-content select=\"[header]\"></ng-content>\n            </div>             \n\n            <div *ngIf=\"showHeader\" class=\"modal-header\">\n                <h5 class=\"modal-title\">{{modalTitle}}</h5>\n                <button \n                    type=\"button\" \n                    class=\"close\" \n                    [title]=\"closeText\"\n                    (click)=\"close()\">\n                    <fa-icon [icon]=\"closeIcon\"></fa-icon>\n                </button>\n                <ng-content select=\"[header]\"></ng-content>\n            </div>\n\n            <div class=\"modal-body\">\n                <ng-content></ng-content>\n            </div>\n\n            <div *ngIf=\"showFooter\" class=\"modal-footer\">\n                <ng-content select=\"[footer]\"></ng-content>\n            </div>            \n        </div>\n    </div>\n</div>", styles: [".modal{background:rgba(0,0,0,.5)}.modal.in{opacity:1}.modal.in .modal-dialog{transform:translate(0)}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { _modal: [{
-                type: ViewChild,
-                args: ['modal', { static: false }]
+            args: [{ selector: 'sds-modal', template: "<div #modal class=\"modal\">\n    <div\n        class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\"\n        [id]=\"modalDialogId\"\n        [ngClass]=\"'modal-' + size\"\n        role=\"document\"\n    >\n        <div class=\"modal-content\">\n\n            <div *ngIf=\"showHeader && headerContent\" class=\"modal-header\">\n                <ng-content select='header'></ng-content>\n            </div>             \n\n            <div *ngIf=\"showHeader && !headerContent\" class=\"modal-header\">\n                <h5 class=\"modal-title\">{{modalTitle}}</h5>\n                <button \n                    *ngIf=\"showCloseButton\"\n                    type=\"button\" \n                    class=\"close\" \n                    [title]=\"closeText\"\n                    (click)=\"close()\">\n                    <fa-icon [icon]=\"closeIcon\"></fa-icon>\n                </button>\n            </div>\n\n            <div class=\"modal-body\">\n                <ng-content></ng-content>\n            </div>\n\n            <div *ngIf=\"showFooter\" class=\"modal-footer\">\n                <ng-content select=\"footer\"></ng-content>\n            </div>            \n        </div>\n    </div>\n</div>", styles: [".modal{background:rgba(0,0,0,.5)}.modal.in{opacity:1}.modal.in .modal-dialog{transform:translate(0)}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { headerContent: [{
+                type: ContentChild,
+                args: ['header']
             }], modalTitle: [{
                 type: Input
             }], showHeader: [{
@@ -49,18 +51,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 type: Input
             }], modalDialogId: [{
                 type: Input
+            }], showCloseButton: [{
+                type: Input
             }], modalOpen: [{
                 type: Output
             }], modalClose: [{
                 type: Output
+            }], _modal: [{
+                type: ViewChild,
+                args: ['modal', { static: false }]
+            }] } });
+
+class SdsDialogComponent {
+    constructor() {
+        this.title = '';
+        this.size = 'md';
+        this.isOpen = false;
+        this.primaryButtonText = 'Primary button';
+        this.secondaryButtonText = 'Secondary button';
+        this.primaryButtonClass = 'btn-primary';
+        this.primaryClick = new EventEmitter();
+        this.secondaryButtonClass = 'btn-secondary';
+        this.secondaryClick = new EventEmitter();
+        this.showSecondaryButton = true;
+        this.showCloseButton = true;
+        this.showHeader = true;
+    }
+    ngOnChanges(changes) {
+        if (changes['isOpen']) {
+            if (this.isOpen) {
+                this.open();
+            }
+            else {
+                this.close();
+            }
+        }
+    }
+    ngOnInit() { }
+    open() {
+        if (this._modal != undefined) {
+            this._modal.open();
+        }
+    }
+    close() {
+        if (this._modal != undefined) {
+            this._modal.close();
+        }
+    }
+    onSecondaryClick() {
+        this.secondaryClick.emit();
+        this.close();
+    }
+    onPrimaryClick() {
+        this.primaryClick.emit();
+        this.close();
+    }
+}
+SdsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SdsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsDialogComponent, selector: "sds-dialog", inputs: { title: "title", closeText: "closeText", size: "size", isOpen: "isOpen", primaryButtonText: "primaryButtonText", secondaryButtonText: "secondaryButtonText", primaryButtonClass: "primaryButtonClass", secondaryButtonClass: "secondaryButtonClass", showSecondaryButton: "showSecondaryButton", showCloseButton: "showCloseButton", showHeader: "showHeader" }, outputs: { primaryClick: "primaryClick", secondaryClick: "secondaryClick" }, viewQueries: [{ propertyName: "_modal", first: true, predicate: ["modal"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<sds-modal\n    #modal\n    [modalTitle]=\"title\"\n    [size]=\"size\"\n    [closeText]=\"closeText\"\n    [showCloseButton]=\"showCloseButton\"\n    [showHeader]=\"showHeader\"\n>\n    <div>\n        <ng-content></ng-content>\n    </div>\n\n    <ng-container #footer ngProjectAs='footer'>\n        <button\n            *ngIf=\"showSecondaryButton\"\n            class=\"btn\"\n            [class]=\"secondaryButtonClass\"\n            (click)=\"onSecondaryClick()\"\n        >{{secondaryButtonText}}</button>\n        <button\n            class=\"btn\"\n            [class]=\"primaryButtonClass\"\n            (click)=\"onPrimaryClick()\"\n        >{{primaryButtonText}}</button>\n    </ng-container>\n</sds-modal>", styles: [""], components: [{ type: SdsModalComponent, selector: "sds-modal", inputs: ["modalTitle", "showHeader", "showFooter", "closeText", "size", "modalDialogId", "showCloseButton"], outputs: ["modalOpen", "modalClose"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-dialog', template: "<sds-modal\n    #modal\n    [modalTitle]=\"title\"\n    [size]=\"size\"\n    [closeText]=\"closeText\"\n    [showCloseButton]=\"showCloseButton\"\n    [showHeader]=\"showHeader\"\n>\n    <div>\n        <ng-content></ng-content>\n    </div>\n\n    <ng-container #footer ngProjectAs='footer'>\n        <button\n            *ngIf=\"showSecondaryButton\"\n            class=\"btn\"\n            [class]=\"secondaryButtonClass\"\n            (click)=\"onSecondaryClick()\"\n        >{{secondaryButtonText}}</button>\n        <button\n            class=\"btn\"\n            [class]=\"primaryButtonClass\"\n            (click)=\"onPrimaryClick()\"\n        >{{primaryButtonText}}</button>\n    </ng-container>\n</sds-modal>", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                type: Input
+            }], closeText: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], isOpen: [{
+                type: Input
+            }], primaryButtonText: [{
+                type: Input
+            }], secondaryButtonText: [{
+                type: Input
+            }], primaryButtonClass: [{
+                type: Input
+            }], primaryClick: [{
+                type: Output
+            }], secondaryButtonClass: [{
+                type: Input
+            }], secondaryClick: [{
+                type: Output
+            }], showSecondaryButton: [{
+                type: Input
+            }], showCloseButton: [{
+                type: Input
+            }], showHeader: [{
+                type: Input
+            }], _modal: [{
+                type: ViewChild,
+                args: ['modal', { static: true }]
             }] } });
 
-const components = [SdsModalComponent];
+const components = [
+    SdsModalComponent,
+    SdsDialogComponent
+];
 class SdsModalModule {
 }
 SdsModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SdsModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalModule, declarations: [SdsModalComponent], imports: [CommonModule,
-        FontAwesomeModule], exports: [SdsModalComponent] });
+SdsModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalModule, declarations: [SdsModalComponent,
+        SdsDialogComponent], imports: [CommonModule,
+        FontAwesomeModule], exports: [SdsModalComponent,
+        SdsDialogComponent] });
 SdsModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalModule, imports: [[
             CommonModule,
             FontAwesomeModule
@@ -85,5 +178,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SdsModalComponent, SdsModalModule };
+export { SdsDialogComponent, SdsModalComponent, SdsModalModule };
 //# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-modal.mjs.map

package/fesm2015/spicainternational-ngx-sds-components-src-lib-modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-modal.mjs","sources":["../../../projects/ngx-sds-components/src/lib/modal/modal.component.ts","../../../projects/ngx-sds-components/src/lib/modal/modal.component.html","../../../projects/ngx-sds-components/src/lib/modal/modal.module.ts","../../../projects/ngx-sds-components/src/lib/modal/spicainternational-ngx-sds-components-src-lib-modal.ts"],"sourcesContent":["import {\r\n    Component,\r\n    ElementRef,\r\n    Input,\r\n    OnInit,\r\n    Output,\r\n    SimpleChanges,\r\n    ViewChild,\r\n    EventEmitter,\r\n} from '@angular/core';\r\nimport { faXmark } from '@fortawesome/pro-regular-svg-icons';\r\n\r\n@Component({\r\n    selector: 'sds-modal',\r\n    templateUrl: './modal.component.html',\r\n    styleUrls: ['./modal.component.scss'],\r\n})\r\nexport class SdsModalComponent implements OnInit {\r\n    @ViewChild('modal', { static: false }) private _modal:\r\n        | ElementRef\r\n        | undefined;\r\n\r\n    @Input() public modalTitle?: string;\r\n    @Input() public showHeader: boolean = true;\r\n    @Input() public showFooter: boolean = true;\r\n    @Input() public closeText?: string;\r\n    @Input() public size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\r\n    @Input() public modalDialogId?: string;\r\n\r\n    @Output() public modalOpen: EventEmitter<void> = new EventEmitter<void>();\r\n    @Output() public modalClose: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n    public closeIcon = faXmark;\r\n\r\n    constructor() {}\r\n\r\n    ngOnInit(): void {}\r\n\r\n    public open(): void {\r\n        if (this._modal != undefined) {\r\n            this._modal.nativeElement.style.display = 'block';\r\n            this.modalOpen.emit();\r\n        }\r\n    }\r\n\r\n    public close(): void {\r\n        if (this._modal != undefined) {\r\n            this._modal.nativeElement.style.display = 'none';\r\n            this.modalClose.emit();\r\n        }\r\n    }\r\n}\r\n","<div #modal class=\"modal\">\n    <div\n        class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\"\n        [id]=\"modalDialogId\"\n        [ngClass]=\"'modal-' + size\"\n        role=\"document\"\n    >\n        <div class=\"modal-content\">\n\n            <div *ngIf=\"showHeader\" class=\"modal-header\">\n                <ng-content select=\"[header]\"></ng-content>\n            </div>             \n\n            <div *ngIf=\"showHeader\" class=\"modal-header\">\n                <h5 class=\"modal-title\">{{modalTitle}}</h5>\n                <button \n                    type=\"button\" \n                    class=\"close\" \n                    [title]=\"closeText\"\n                    (click)=\"close()\">\n                    <fa-icon [icon]=\"closeIcon\"></fa-icon>\n                </button>\n                <ng-content select=\"[header]\"></ng-content>\n            </div>\n\n            <div class=\"modal-body\">\n                <ng-content></ng-content>\n            </div>\n\n            <div *ngIf=\"showFooter\" class=\"modal-footer\">\n                <ng-content select=\"[footer]\"></ng-content>\n            </div>            \n        </div>\n    </div>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SdsModalComponent } from './modal.component';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\n\nconst components = [SdsModalComponent];\n@NgModule({\n  declarations: [\n    ...components\n  ],\n  imports: [\n    CommonModule,\n    FontAwesomeModule\n  ],\n  exports: [\n    ...components\n]\n})\nexport class SdsModalModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-modal.mjs","sources":["../../../projects/ngx-sds-components/src/lib/modal/modal.component.ts","../../../projects/ngx-sds-components/src/lib/modal/modal.component.html","../../../projects/ngx-sds-components/src/lib/modal/dialog/dialog.component.ts","../../../projects/ngx-sds-components/src/lib/modal/dialog/dialog.component.html","../../../projects/ngx-sds-components/src/lib/modal/modal.module.ts","../../../projects/ngx-sds-components/src/lib/modal/spicainternational-ngx-sds-components-src-lib-modal.ts"],"sourcesContent":["import {\r\n    Component,\r\n    ElementRef,\r\n    Input,\r\n    OnInit,\r\n    Output,\r\n    ViewChild,\r\n    EventEmitter,\r\n    ContentChild,\r\n} from '@angular/core';\r\nimport { faXmark } from '@fortawesome/pro-regular-svg-icons';\r\n\r\n@Component({\r\n    selector: 'sds-modal',\r\n    templateUrl: './modal.component.html',\r\n    styleUrls: ['./modal.component.scss'],\r\n})\r\nexport class SdsModalComponent implements OnInit {\r\n    @ContentChild('header') headerContent: ElementRef = { nativeElement: undefined };\r\n\r\n    @Input() public modalTitle?: string;\r\n    @Input() public showHeader: boolean = true;\r\n    @Input() public showFooter: boolean = true;\r\n    @Input() public closeText?: string;\r\n    @Input() public size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\r\n    @Input() public modalDialogId?: string;\r\n    @Input() public showCloseButton: boolean = true;\r\n\r\n    @Output() public modalOpen: EventEmitter<void> = new EventEmitter<void>();\r\n    @Output() public modalClose: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n    public closeIcon = faXmark;\r\n\r\n\r\n    @ViewChild('modal', { static: false }) private _modal: ElementRef | undefined;\r\n    \r\n\r\n    constructor() {}\r\n\r\n    ngOnInit(): void {}\r\n\r\n    public open(): void {\r\n        if (this._modal != undefined) {\r\n            this._modal.nativeElement.style.display = 'block';\r\n            this.modalOpen.emit();\r\n        }\r\n    }\r\n\r\n    public close(): void {\r\n        if (this._modal != undefined) {\r\n            this._modal.nativeElement.style.display = 'none';\r\n            this.modalClose.emit();\r\n        }\r\n    }\r\n}\r\n","<div #modal class=\"modal\">\n    <div\n        class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\"\n        [id]=\"modalDialogId\"\n        [ngClass]=\"'modal-' + size\"\n        role=\"document\"\n    >\n        <div class=\"modal-content\">\n\n            <div *ngIf=\"showHeader && headerContent\" class=\"modal-header\">\n                <ng-content select='header'></ng-content>\n            </div>             \n\n            <div *ngIf=\"showHeader && !headerContent\" class=\"modal-header\">\n                <h5 class=\"modal-title\">{{modalTitle}}</h5>\n                <button \n                    *ngIf=\"showCloseButton\"\n                    type=\"button\" \n                    class=\"close\" \n                    [title]=\"closeText\"\n                    (click)=\"close()\">\n                    <fa-icon [icon]=\"closeIcon\"></fa-icon>\n                </button>\n            </div>\n\n            <div class=\"modal-body\">\n                <ng-content></ng-content>\n            </div>\n\n            <div *ngIf=\"showFooter\" class=\"modal-footer\">\n                <ng-content select=\"footer\"></ng-content>\n            </div>            \n        </div>\n    </div>\n</div>","import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';\nimport { SdsModalComponent } from '../modal.component';\n\n@Component({\n    selector: 'sds-dialog',\n    templateUrl: './dialog.component.html',\n    styleUrls: ['./dialog.component.scss'],\n})\nexport class SdsDialogComponent implements OnInit, OnChanges {\n    @Input() public title: string = '';\n    @Input() public closeText?: string;\n    @Input() public size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n    @Input() public isOpen: boolean = false;\n    \n    @Input() public primaryButtonText: string = 'Primary button';\n    @Input() public secondaryButtonText: string = 'Secondary button';\n\n    @Input() public primaryButtonClass: string = 'btn-primary';\n    @Output() public primaryClick: EventEmitter<void> = new EventEmitter();\n\n    @Input() public secondaryButtonClass: string = 'btn-secondary';    \n    @Output() public secondaryClick: EventEmitter<void> = new EventEmitter();\n    @Input() public showSecondaryButton: boolean = true;\n\n    @Input() public showCloseButton: boolean = true;\n    @Input() public showHeader: boolean = true;\n\n    @ViewChild('modal', { static: true }) private _modal: SdsModalComponent | undefined;\n\n    constructor() {}\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes['isOpen']) {\n            if (this.isOpen) {\n                this.open();\n            } else {\n                this.close();\n            }\n\n        }\n\n    }\n\n    ngOnInit(): void {}\n\n\n    public open(): void {\n        if (this._modal != undefined) {\n            this._modal.open();\n        }\n    }\n\n    public close(): void {\n        if (this._modal != undefined) {\n            this._modal.close();\n        }        \n    }\n\n    public onSecondaryClick(): void {\n        this.secondaryClick.emit();\n        this.close();\n    }\n\n    public onPrimaryClick(): void {\n        this.primaryClick.emit();\n        this.close();\n    }    \n\n\n}\n\n\n\n","<sds-modal\n    #modal\n    [modalTitle]=\"title\"\n    [size]=\"size\"\n    [closeText]=\"closeText\"\n    [showCloseButton]=\"showCloseButton\"\n    [showHeader]=\"showHeader\"\n>\n    <div>\n        <ng-content></ng-content>\n    </div>\n\n    <ng-container #footer ngProjectAs='footer'>\n        <button\n            *ngIf=\"showSecondaryButton\"\n            class=\"btn\"\n            [class]=\"secondaryButtonClass\"\n            (click)=\"onSecondaryClick()\"\n        >{{secondaryButtonText}}</button>\n        <button\n            class=\"btn\"\n            [class]=\"primaryButtonClass\"\n            (click)=\"onPrimaryClick()\"\n        >{{primaryButtonText}}</button>\n    </ng-container>\n</sds-modal>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SdsModalComponent } from './modal.component';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\nimport { SdsDialogComponent } from './dialog/dialog.component';\n\n\nconst components = [\n    SdsModalComponent,\n    SdsDialogComponent\n];\n\n@NgModule({\n  declarations: [\n    ...components\n  ],\n  imports: [\n    CommonModule,\n    FontAwesomeModule\n  ],\n  exports: [\n    ...components\n]\n})\nexport class SdsModalModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.SdsModalComponent"],"mappings":"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"}

package/fesm2015/spicainternational-ngx-sds-components-src-lib-pane.mjs

@@ -26,10 +26,10 @@ class SdsPaneComponent {
     }
 }
 SdsPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsPaneComponent, selector: "sds-pane", inputs: { pages: "pages", contentWidthRem: "contentWidthRem" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pane border-left\">\n    <div class=\"pane-header\">\n        <ul>\n            <li \n                *ngFor=\"let page of pages\"\n                [class.active] = \"selectedPage === page\"\n                >\n                <div \n                    class=\"icon-container\"\n                    [title]=\"page.title\"\n                    (click) = \"showContent(page)\"\n                    >\n                    <fa-icon [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n                </div>\n            </li>\n        </ul>\n    </div>\n\n    <div \n        *ngIf=\"selectedPage\" \n        class=\"pane-content\"\n        [style.width.rem]=\"contentWidthRem\"\n        >\n        \n        <div class=\"page-header\">\n            <div class=\"title\">\n                {{selectedPage?.title}}\n            </div>\n\n            <button \n                class=\"btn ml-auto\"\n                (click)=\"hideContent()\"\n                >\n                <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </fa-icon>        \n            </button>  \n\n        </div>\n\n        <div class=\"page-content\">\n            <ng-container\n                [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n            >\n            </ng-container>            \n        </div>\n    </div>\n</div>", styles: [""], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+SdsPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsPaneComponent, selector: "sds-pane", inputs: { pages: "pages", contentWidthRem: "contentWidthRem" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pane border-left\">\n    <div class=\"pane-header\">\n        <ul>\n            <li \n                *ngFor=\"let page of pages\"\n                [class.active] = \"selectedPage === page\"\n                >\n                <div \n                    class=\"icon-container\"\n                    [title]=\"page.title\"\n                    (click) = \"showContent(page)\"\n                    >\n                    <fa-icon [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n                </div>\n            </li>\n        </ul>\n    </div>\n\n    <div \n        *ngIf=\"selectedPage\" \n        class=\"pane-content\"\n        [style.width.rem]=\"contentWidthRem\"\n        >\n        \n        <div class=\"page-header\">\n            <div class=\"title\">\n                {{selectedPage?.title}}\n            </div>\n\n            <button \n                class=\"btn btn-stealth ml-auto\"\n                (click)=\"hideContent()\"\n                >\n                <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </fa-icon>        \n            </button>  \n\n        </div>\n\n        <div class=\"page-container\">\n            <ng-container\n                [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n            >\n            </ng-container>            \n        </div>\n    </div>\n</div>", styles: [""], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsPaneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-pane', template: "<div class=\"pane border-left\">\n    <div class=\"pane-header\">\n        <ul>\n            <li \n                *ngFor=\"let page of pages\"\n                [class.active] = \"selectedPage === page\"\n                >\n                <div \n                    class=\"icon-container\"\n                    [title]=\"page.title\"\n                    (click) = \"showContent(page)\"\n                    >\n                    <fa-icon [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n                </div>\n            </li>\n        </ul>\n    </div>\n\n    <div \n        *ngIf=\"selectedPage\" \n        class=\"pane-content\"\n        [style.width.rem]=\"contentWidthRem\"\n        >\n        \n        <div class=\"page-header\">\n            <div class=\"title\">\n                {{selectedPage?.title}}\n            </div>\n\n            <button \n                class=\"btn ml-auto\"\n                (click)=\"hideContent()\"\n                >\n                <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </fa-icon>        \n            </button>  \n\n        </div>\n\n        <div class=\"page-content\">\n            <ng-container\n                [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n            >\n            </ng-container>            \n        </div>\n    </div>\n</div>", styles: [""] }]
+            args: [{ selector: 'sds-pane', template: "<div class=\"pane border-left\">\n    <div class=\"pane-header\">\n        <ul>\n            <li \n                *ngFor=\"let page of pages\"\n                [class.active] = \"selectedPage === page\"\n                >\n                <div \n                    class=\"icon-container\"\n                    [title]=\"page.title\"\n                    (click) = \"showContent(page)\"\n                    >\n                    <fa-icon [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n                </div>\n            </li>\n        </ul>\n    </div>\n\n    <div \n        *ngIf=\"selectedPage\" \n        class=\"pane-content\"\n        [style.width.rem]=\"contentWidthRem\"\n        >\n        \n        <div class=\"page-header\">\n            <div class=\"title\">\n                {{selectedPage?.title}}\n            </div>\n\n            <button \n                class=\"btn btn-stealth ml-auto\"\n                (click)=\"hideContent()\"\n                >\n                <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </fa-icon>        \n            </button>  \n\n        </div>\n\n        <div class=\"page-container\">\n            <ng-container\n                [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n            >\n            </ng-container>            \n        </div>\n    </div>\n</div>", styles: [""] }]
         }], ctorParameters: function () { return []; }, propDecorators: { pages: [{
                 type: Input
             }], contentWidthRem: [{

package/fesm2015/spicainternational-ngx-sds-components-src-lib-pane.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-pane.mjs","sources":["../../../projects/ngx-sds-components/src/lib/pane/pane.component.ts","../../../projects/ngx-sds-components/src/lib/pane/pane.component.html","../../../projects/ngx-sds-components/src/lib/pane/pane.module.ts","../../../projects/ngx-sds-components/src/lib/pane/spicainternational-ngx-sds-components-src-lib-pane.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { PanePage } from './pane.model';\n\nimport { faXmark } from '@fortawesome/pro-regular-svg-icons';\n\n@Component({\n    selector: 'sds-pane',\n    templateUrl: './pane.component.html',\n    styleUrls: ['./pane.component.scss'],\n})\nexport class SdsPaneComponent implements OnInit {\n\n    @Input() pages?: PanePage[];\n    @Input() contentWidthRem: number = 20;\n\n    @Output() pageChange = new EventEmitter();\n\n    public selectedPage?: PanePage;\n    public isContentVisible: boolean = false;\n\n    public closeIcon = faXmark;\n\n    constructor() {}\n\n    ngOnInit(): void {}\n\n    public showContent(page: PanePage): void{\n        this.selectedPage = page;\n        this.isContentVisible = true;\n        this.pageChange.emit(this.selectedPage);\n    }\n\n    public hideContent(): void{\n        this.isContentVisible = false;\n        this.selectedPage = undefined;\n        this.pageChange.emit(this.selectedPage);\n    }\n\n\n}\n","<div class=\"pane border-left\">\n    <div class=\"pane-header\">\n        <ul>\n            <li \n                *ngFor=\"let page of pages\"\n                [class.active] = \"selectedPage === page\"\n                >\n                <div \n                    class=\"icon-container\"\n                    [title]=\"page.title\"\n                    (click) = \"showContent(page)\"\n                    >\n                    <fa-icon [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n                </div>\n            </li>\n        </ul>\n    </div>\n\n    <div \n        *ngIf=\"selectedPage\" \n        class=\"pane-content\"\n        [style.width.rem]=\"contentWidthRem\"\n        >\n        \n        <div class=\"page-header\">\n            <div class=\"title\">\n                {{selectedPage?.title}}\n            </div>\n\n            <button \n                class=\"btn ml-auto\"\n                (click)=\"hideContent()\"\n                >\n                <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </fa-icon>        \n            </button>  \n\n        </div>\n\n        <div class=\"page-content\">\n            <ng-container\n                [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n            >\n            </ng-container>            \n        </div>\n    </div>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SdsPaneComponent } from '../pane/pane.component';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\n@NgModule({\n    declarations: [\n        SdsPaneComponent\n    ],\n    imports: [\n        CommonModule, \n        FontAwesomeModule\n    ],\n    exports: [\n        SdsPaneComponent\n    ],\n})\nexport class SdsPaneModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-pane.mjs","sources":["../../../projects/ngx-sds-components/src/lib/pane/pane.component.ts","../../../projects/ngx-sds-components/src/lib/pane/pane.component.html","../../../projects/ngx-sds-components/src/lib/pane/pane.module.ts","../../../projects/ngx-sds-components/src/lib/pane/spicainternational-ngx-sds-components-src-lib-pane.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { PanePage } from './pane.model';\n\nimport { faXmark } from '@fortawesome/pro-regular-svg-icons';\n\n@Component({\n    selector: 'sds-pane',\n    templateUrl: './pane.component.html',\n    styleUrls: ['./pane.component.scss'],\n})\nexport class SdsPaneComponent implements OnInit {\n\n    @Input() pages?: PanePage[];\n    @Input() contentWidthRem: number = 20;\n\n    @Output() pageChange = new EventEmitter();\n\n    public selectedPage?: PanePage;\n    public isContentVisible: boolean = false;\n\n    public closeIcon = faXmark;\n\n    constructor() {}\n\n    ngOnInit(): void {}\n\n    public showContent(page: PanePage): void{\n        this.selectedPage = page;\n        this.isContentVisible = true;\n        this.pageChange.emit(this.selectedPage);\n    }\n\n    public hideContent(): void{\n        this.isContentVisible = false;\n        this.selectedPage = undefined;\n        this.pageChange.emit(this.selectedPage);\n    }\n\n\n}\n","<div class=\"pane border-left\">\n    <div class=\"pane-header\">\n        <ul>\n            <li \n                *ngFor=\"let page of pages\"\n                [class.active] = \"selectedPage === page\"\n                >\n                <div \n                    class=\"icon-container\"\n                    [title]=\"page.title\"\n                    (click) = \"showContent(page)\"\n                    >\n                    <fa-icon [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n                </div>\n            </li>\n        </ul>\n    </div>\n\n    <div \n        *ngIf=\"selectedPage\" \n        class=\"pane-content\"\n        [style.width.rem]=\"contentWidthRem\"\n        >\n        \n        <div class=\"page-header\">\n            <div class=\"title\">\n                {{selectedPage?.title}}\n            </div>\n\n            <button \n                class=\"btn btn-stealth ml-auto\"\n                (click)=\"hideContent()\"\n                >\n                <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </fa-icon>        \n            </button>  \n\n        </div>\n\n        <div class=\"page-container\">\n            <ng-container\n                [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n            >\n            </ng-container>            \n        </div>\n    </div>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SdsPaneComponent } from '../pane/pane.component';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\n@NgModule({\n    declarations: [\n        SdsPaneComponent\n    ],\n    imports: [\n        CommonModule, \n        FontAwesomeModule\n    ],\n    exports: [\n        SdsPaneComponent\n    ],\n})\nexport class SdsPaneModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2020/spicainternational-ngx-sds-components-src-lib-modal.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewChild, Input, Output, NgModule } from '@angular/core';
+import { EventEmitter, Component, ContentChild, Input, Output, ViewChild, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { faXmark } from '@fortawesome/pro-regular-svg-icons';
@@ -8,9 +8,11 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 class SdsModalComponent {
     constructor() {
+        this.headerContent = { nativeElement: undefined };
         this.showHeader = true;
         this.showFooter = true;
         this.size = 'md';
+        this.showCloseButton = true;
         this.modalOpen = new EventEmitter();
         this.modalClose = new EventEmitter();
         this.closeIcon = faXmark;
@@ -30,13 +32,13 @@ class SdsModalComponent {
     }
 }
 SdsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsModalComponent, selector: "sds-modal", inputs: { modalTitle: "modalTitle", showHeader: "showHeader", showFooter: "showFooter", closeText: "closeText", size: "size", modalDialogId: "modalDialogId" }, outputs: { modalOpen: "modalOpen", modalClose: "modalClose" }, viewQueries: [{ propertyName: "_modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<div #modal class=\"modal\">\n    <div\n        class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\"\n        [id]=\"modalDialogId\"\n        [ngClass]=\"'modal-' + size\"\n        role=\"document\"\n    >\n        <div class=\"modal-content\">\n\n            <div *ngIf=\"showHeader\" class=\"modal-header\">\n                <ng-content select=\"[header]\"></ng-content>\n            </div>             \n\n            <div *ngIf=\"showHeader\" class=\"modal-header\">\n                <h5 class=\"modal-title\">{{modalTitle}}</h5>\n                <button \n                    type=\"button\" \n                    class=\"close\" \n                    [title]=\"closeText\"\n                    (click)=\"close()\">\n                    <fa-icon [icon]=\"closeIcon\"></fa-icon>\n                </button>\n                <ng-content select=\"[header]\"></ng-content>\n            </div>\n\n            <div class=\"modal-body\">\n                <ng-content></ng-content>\n            </div>\n\n            <div *ngIf=\"showFooter\" class=\"modal-footer\">\n                <ng-content select=\"[footer]\"></ng-content>\n            </div>            \n        </div>\n    </div>\n</div>", styles: [".modal{background:rgba(0,0,0,.5)}.modal.in{opacity:1}.modal.in .modal-dialog{transform:translate(0)}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SdsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsModalComponent, selector: "sds-modal", inputs: { modalTitle: "modalTitle", showHeader: "showHeader", showFooter: "showFooter", closeText: "closeText", size: "size", modalDialogId: "modalDialogId", showCloseButton: "showCloseButton" }, outputs: { modalOpen: "modalOpen", modalClose: "modalClose" }, queries: [{ propertyName: "headerContent", first: true, predicate: ["header"], descendants: true }], viewQueries: [{ propertyName: "_modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<div #modal class=\"modal\">\n    <div\n        class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\"\n        [id]=\"modalDialogId\"\n        [ngClass]=\"'modal-' + size\"\n        role=\"document\"\n    >\n        <div class=\"modal-content\">\n\n            <div *ngIf=\"showHeader && headerContent\" class=\"modal-header\">\n                <ng-content select='header'></ng-content>\n            </div>             \n\n            <div *ngIf=\"showHeader && !headerContent\" class=\"modal-header\">\n                <h5 class=\"modal-title\">{{modalTitle}}</h5>\n                <button \n                    *ngIf=\"showCloseButton\"\n                    type=\"button\" \n                    class=\"close\" \n                    [title]=\"closeText\"\n                    (click)=\"close()\">\n                    <fa-icon [icon]=\"closeIcon\"></fa-icon>\n                </button>\n            </div>\n\n            <div class=\"modal-body\">\n                <ng-content></ng-content>\n            </div>\n\n            <div *ngIf=\"showFooter\" class=\"modal-footer\">\n                <ng-content select=\"footer\"></ng-content>\n            </div>            \n        </div>\n    </div>\n</div>", styles: [".modal{background:rgba(0,0,0,.5)}.modal.in{opacity:1}.modal.in .modal-dialog{transform:translate(0)}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-modal', template: "<div #modal class=\"modal\">\n    <div\n        class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\"\n        [id]=\"modalDialogId\"\n        [ngClass]=\"'modal-' + size\"\n        role=\"document\"\n    >\n        <div class=\"modal-content\">\n\n            <div *ngIf=\"showHeader\" class=\"modal-header\">\n                <ng-content select=\"[header]\"></ng-content>\n            </div>             \n\n            <div *ngIf=\"showHeader\" class=\"modal-header\">\n                <h5 class=\"modal-title\">{{modalTitle}}</h5>\n                <button \n                    type=\"button\" \n                    class=\"close\" \n                    [title]=\"closeText\"\n                    (click)=\"close()\">\n                    <fa-icon [icon]=\"closeIcon\"></fa-icon>\n                </button>\n                <ng-content select=\"[header]\"></ng-content>\n            </div>\n\n            <div class=\"modal-body\">\n                <ng-content></ng-content>\n            </div>\n\n            <div *ngIf=\"showFooter\" class=\"modal-footer\">\n                <ng-content select=\"[footer]\"></ng-content>\n            </div>            \n        </div>\n    </div>\n</div>", styles: [".modal{background:rgba(0,0,0,.5)}.modal.in{opacity:1}.modal.in .modal-dialog{transform:translate(0)}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { _modal: [{
-                type: ViewChild,
-                args: ['modal', { static: false }]
+            args: [{ selector: 'sds-modal', template: "<div #modal class=\"modal\">\n    <div\n        class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\"\n        [id]=\"modalDialogId\"\n        [ngClass]=\"'modal-' + size\"\n        role=\"document\"\n    >\n        <div class=\"modal-content\">\n\n            <div *ngIf=\"showHeader && headerContent\" class=\"modal-header\">\n                <ng-content select='header'></ng-content>\n            </div>             \n\n            <div *ngIf=\"showHeader && !headerContent\" class=\"modal-header\">\n                <h5 class=\"modal-title\">{{modalTitle}}</h5>\n                <button \n                    *ngIf=\"showCloseButton\"\n                    type=\"button\" \n                    class=\"close\" \n                    [title]=\"closeText\"\n                    (click)=\"close()\">\n                    <fa-icon [icon]=\"closeIcon\"></fa-icon>\n                </button>\n            </div>\n\n            <div class=\"modal-body\">\n                <ng-content></ng-content>\n            </div>\n\n            <div *ngIf=\"showFooter\" class=\"modal-footer\">\n                <ng-content select=\"footer\"></ng-content>\n            </div>            \n        </div>\n    </div>\n</div>", styles: [".modal{background:rgba(0,0,0,.5)}.modal.in{opacity:1}.modal.in .modal-dialog{transform:translate(0)}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { headerContent: [{
+                type: ContentChild,
+                args: ['header']
             }], modalTitle: [{
                 type: Input
             }], showHeader: [{
@@ -49,18 +51,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 type: Input
             }], modalDialogId: [{
                 type: Input
+            }], showCloseButton: [{
+                type: Input
             }], modalOpen: [{
                 type: Output
             }], modalClose: [{
                 type: Output
+            }], _modal: [{
+                type: ViewChild,
+                args: ['modal', { static: false }]
+            }] } });
+
+class SdsDialogComponent {
+    constructor() {
+        this.title = '';
+        this.size = 'md';
+        this.isOpen = false;
+        this.primaryButtonText = 'Primary button';
+        this.secondaryButtonText = 'Secondary button';
+        this.primaryButtonClass = 'btn-primary';
+        this.primaryClick = new EventEmitter();
+        this.secondaryButtonClass = 'btn-secondary';
+        this.secondaryClick = new EventEmitter();
+        this.showSecondaryButton = true;
+        this.showCloseButton = true;
+        this.showHeader = true;
+    }
+    ngOnChanges(changes) {
+        if (changes['isOpen']) {
+            if (this.isOpen) {
+                this.open();
+            }
+            else {
+                this.close();
+            }
+        }
+    }
+    ngOnInit() { }
+    open() {
+        if (this._modal != undefined) {
+            this._modal.open();
+        }
+    }
+    close() {
+        if (this._modal != undefined) {
+            this._modal.close();
+        }
+    }
+    onSecondaryClick() {
+        this.secondaryClick.emit();
+        this.close();
+    }
+    onPrimaryClick() {
+        this.primaryClick.emit();
+        this.close();
+    }
+}
+SdsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SdsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsDialogComponent, selector: "sds-dialog", inputs: { title: "title", closeText: "closeText", size: "size", isOpen: "isOpen", primaryButtonText: "primaryButtonText", secondaryButtonText: "secondaryButtonText", primaryButtonClass: "primaryButtonClass", secondaryButtonClass: "secondaryButtonClass", showSecondaryButton: "showSecondaryButton", showCloseButton: "showCloseButton", showHeader: "showHeader" }, outputs: { primaryClick: "primaryClick", secondaryClick: "secondaryClick" }, viewQueries: [{ propertyName: "_modal", first: true, predicate: ["modal"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<sds-modal\n    #modal\n    [modalTitle]=\"title\"\n    [size]=\"size\"\n    [closeText]=\"closeText\"\n    [showCloseButton]=\"showCloseButton\"\n    [showHeader]=\"showHeader\"\n>\n    <div>\n        <ng-content></ng-content>\n    </div>\n\n    <ng-container #footer ngProjectAs='footer'>\n        <button\n            *ngIf=\"showSecondaryButton\"\n            class=\"btn\"\n            [class]=\"secondaryButtonClass\"\n            (click)=\"onSecondaryClick()\"\n        >{{secondaryButtonText}}</button>\n        <button\n            class=\"btn\"\n            [class]=\"primaryButtonClass\"\n            (click)=\"onPrimaryClick()\"\n        >{{primaryButtonText}}</button>\n    </ng-container>\n</sds-modal>", styles: [""], components: [{ type: SdsModalComponent, selector: "sds-modal", inputs: ["modalTitle", "showHeader", "showFooter", "closeText", "size", "modalDialogId", "showCloseButton"], outputs: ["modalOpen", "modalClose"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-dialog', template: "<sds-modal\n    #modal\n    [modalTitle]=\"title\"\n    [size]=\"size\"\n    [closeText]=\"closeText\"\n    [showCloseButton]=\"showCloseButton\"\n    [showHeader]=\"showHeader\"\n>\n    <div>\n        <ng-content></ng-content>\n    </div>\n\n    <ng-container #footer ngProjectAs='footer'>\n        <button\n            *ngIf=\"showSecondaryButton\"\n            class=\"btn\"\n            [class]=\"secondaryButtonClass\"\n            (click)=\"onSecondaryClick()\"\n        >{{secondaryButtonText}}</button>\n        <button\n            class=\"btn\"\n            [class]=\"primaryButtonClass\"\n            (click)=\"onPrimaryClick()\"\n        >{{primaryButtonText}}</button>\n    </ng-container>\n</sds-modal>", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                type: Input
+            }], closeText: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], isOpen: [{
+                type: Input
+            }], primaryButtonText: [{
+                type: Input
+            }], secondaryButtonText: [{
+                type: Input
+            }], primaryButtonClass: [{
+                type: Input
+            }], primaryClick: [{
+                type: Output
+            }], secondaryButtonClass: [{
+                type: Input
+            }], secondaryClick: [{
+                type: Output
+            }], showSecondaryButton: [{
+                type: Input
+            }], showCloseButton: [{
+                type: Input
+            }], showHeader: [{
+                type: Input
+            }], _modal: [{
+                type: ViewChild,
+                args: ['modal', { static: true }]
             }] } });
 
-const components = [SdsModalComponent];
+const components = [
+    SdsModalComponent,
+    SdsDialogComponent
+];
 class SdsModalModule {
 }
 SdsModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SdsModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalModule, declarations: [SdsModalComponent], imports: [CommonModule,
-        FontAwesomeModule], exports: [SdsModalComponent] });
+SdsModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalModule, declarations: [SdsModalComponent,
+        SdsDialogComponent], imports: [CommonModule,
+        FontAwesomeModule], exports: [SdsModalComponent,
+        SdsDialogComponent] });
 SdsModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsModalModule, imports: [[
             CommonModule,
             FontAwesomeModule
@@ -85,5 +178,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SdsModalComponent, SdsModalModule };
+export { SdsDialogComponent, SdsModalComponent, SdsModalModule };
 //# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-modal.mjs.map

package/fesm2020/spicainternational-ngx-sds-components-src-lib-modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-modal.mjs","sources":["../../../projects/ngx-sds-components/src/lib/modal/modal.component.ts","../../../projects/ngx-sds-components/src/lib/modal/modal.component.html","../../../projects/ngx-sds-components/src/lib/modal/modal.module.ts","../../../projects/ngx-sds-components/src/lib/modal/spicainternational-ngx-sds-components-src-lib-modal.ts"],"sourcesContent":["import {\r\n    Component,\r\n    ElementRef,\r\n    Input,\r\n    OnInit,\r\n    Output,\r\n    SimpleChanges,\r\n    ViewChild,\r\n    EventEmitter,\r\n} from '@angular/core';\r\nimport { faXmark } from '@fortawesome/pro-regular-svg-icons';\r\n\r\n@Component({\r\n    selector: 'sds-modal',\r\n    templateUrl: './modal.component.html',\r\n    styleUrls: ['./modal.component.scss'],\r\n})\r\nexport class SdsModalComponent implements OnInit {\r\n    @ViewChild('modal', { static: false }) private _modal:\r\n        | ElementRef\r\n        | undefined;\r\n\r\n    @Input() public modalTitle?: string;\r\n    @Input() public showHeader: boolean = true;\r\n    @Input() public showFooter: boolean = true;\r\n    @Input() public closeText?: string;\r\n    @Input() public size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\r\n    @Input() public modalDialogId?: string;\r\n\r\n    @Output() public modalOpen: EventEmitter<void> = new EventEmitter<void>();\r\n    @Output() public modalClose: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n    public closeIcon = faXmark;\r\n\r\n    constructor() {}\r\n\r\n    ngOnInit(): void {}\r\n\r\n    public open(): void {\r\n        if (this._modal != undefined) {\r\n            this._modal.nativeElement.style.display = 'block';\r\n            this.modalOpen.emit();\r\n        }\r\n    }\r\n\r\n    public close(): void {\r\n        if (this._modal != undefined) {\r\n            this._modal.nativeElement.style.display = 'none';\r\n            this.modalClose.emit();\r\n        }\r\n    }\r\n}\r\n","<div #modal class=\"modal\">\n    <div\n        class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\"\n        [id]=\"modalDialogId\"\n        [ngClass]=\"'modal-' + size\"\n        role=\"document\"\n    >\n        <div class=\"modal-content\">\n\n            <div *ngIf=\"showHeader\" class=\"modal-header\">\n                <ng-content select=\"[header]\"></ng-content>\n            </div>             \n\n            <div *ngIf=\"showHeader\" class=\"modal-header\">\n                <h5 class=\"modal-title\">{{modalTitle}}</h5>\n                <button \n                    type=\"button\" \n                    class=\"close\" \n                    [title]=\"closeText\"\n                    (click)=\"close()\">\n                    <fa-icon [icon]=\"closeIcon\"></fa-icon>\n                </button>\n                <ng-content select=\"[header]\"></ng-content>\n            </div>\n\n            <div class=\"modal-body\">\n                <ng-content></ng-content>\n            </div>\n\n            <div *ngIf=\"showFooter\" class=\"modal-footer\">\n                <ng-content select=\"[footer]\"></ng-content>\n            </div>            \n        </div>\n    </div>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SdsModalComponent } from './modal.component';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\n\nconst components = [SdsModalComponent];\n@NgModule({\n  declarations: [\n    ...components\n  ],\n  imports: [\n    CommonModule,\n    FontAwesomeModule\n  ],\n  exports: [\n    ...components\n]\n})\nexport class SdsModalModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;MAiBa,iBAAiB,CAAA;AAiB1B,IAAA,WAAA,GAAA;QAXgB,IAAU,CAAA,UAAA,GAAY,IAAI,CAAC;QAC3B,IAAU,CAAA,UAAA,GAAY,IAAI,CAAC;QAE3B,IAAI,CAAA,IAAA,GAA8B,IAAI,CAAC;AAGtC,QAAA,IAAA,CAAA,SAAS,GAAuB,IAAI,YAAY,EAAQ,CAAC;AACzD,QAAA,IAAA,CAAA,UAAU,GAAuB,IAAI,YAAY,EAAQ,CAAC;QAEpE,IAAS,CAAA,SAAA,GAAG,OAAO,CAAC;KAEX;AAEhB,IAAA,QAAQ,MAAW;IAEZ,IAAI,GAAA;AACP,QAAA,IAAI,IAAI,CAAC,MAAM,IAAI,SAAS,EAAE;YAC1B,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;AAClD,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;AACzB,SAAA;KACJ;IAEM,KAAK,GAAA;AACR,QAAA,IAAI,IAAI,CAAC,MAAM,IAAI,SAAS,EAAE;YAC1B,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;AACjD,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;AAC1B,SAAA;KACJ;;8GAjCQ,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,iBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,iXCjB9B,2rCAkCM,EAAA,MAAA,EAAA,CAAA,sNAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,QAAA,EAAA,YAAA,EAAA,SAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDjBO,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAL7B,SAAS;+BACI,WAAW,EAAA,QAAA,EAAA,2rCAAA,EAAA,MAAA,EAAA,CAAA,sNAAA,CAAA,EAAA,CAAA;0EAK0B,MAAM,EAAA,CAAA;sBAApD,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,OAAO,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAA;gBAIrB,UAAU,EAAA,CAAA;sBAAzB,KAAK;gBACU,UAAU,EAAA,CAAA;sBAAzB,KAAK;gBACU,UAAU,EAAA,CAAA;sBAAzB,KAAK;gBACU,SAAS,EAAA,CAAA;sBAAxB,KAAK;gBACU,IAAI,EAAA,CAAA;sBAAnB,KAAK;gBACU,aAAa,EAAA,CAAA;sBAA5B,KAAK;gBAEW,SAAS,EAAA,CAAA;sBAAzB,MAAM;gBACU,UAAU,EAAA,CAAA;sBAA1B,MAAM;;;AExBX,MAAM,UAAU,GAAG,CAAC,iBAAiB,CAAC,CAAC;MAa1B,cAAc,CAAA;;2GAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;4GAAd,cAAc,EAAA,YAAA,EAAA,CAbP,iBAAiB,CAAA,EAAA,OAAA,EAAA,CAMjC,YAAY;AACZ,QAAA,iBAAiB,aAPD,iBAAiB,CAAA,EAAA,CAAA,CAAA;AAaxB,cAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,EARhB,OAAA,EAAA,CAAA;YACP,YAAY;YACZ,iBAAiB;AAClB,SAAA,CAAA,EAAA,CAAA,CAAA;2FAKU,cAAc,EAAA,UAAA,EAAA,CAAA;kBAZ1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE;AACZ,wBAAA,GAAG,UAAU;AACd,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP,YAAY;wBACZ,iBAAiB;AAClB,qBAAA;AACD,oBAAA,OAAO,EAAE;AACP,wBAAA,GAAG,UAAU;AAChB,qBAAA;AACA,iBAAA,CAAA;;;AClBD;;AAEG;;;;"}
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-modal.mjs","sources":["../../../projects/ngx-sds-components/src/lib/modal/modal.component.ts","../../../projects/ngx-sds-components/src/lib/modal/modal.component.html","../../../projects/ngx-sds-components/src/lib/modal/dialog/dialog.component.ts","../../../projects/ngx-sds-components/src/lib/modal/dialog/dialog.component.html","../../../projects/ngx-sds-components/src/lib/modal/modal.module.ts","../../../projects/ngx-sds-components/src/lib/modal/spicainternational-ngx-sds-components-src-lib-modal.ts"],"sourcesContent":["import {\r\n    Component,\r\n    ElementRef,\r\n    Input,\r\n    OnInit,\r\n    Output,\r\n    ViewChild,\r\n    EventEmitter,\r\n    ContentChild,\r\n} from '@angular/core';\r\nimport { faXmark } from '@fortawesome/pro-regular-svg-icons';\r\n\r\n@Component({\r\n    selector: 'sds-modal',\r\n    templateUrl: './modal.component.html',\r\n    styleUrls: ['./modal.component.scss'],\r\n})\r\nexport class SdsModalComponent implements OnInit {\r\n    @ContentChild('header') headerContent: ElementRef = { nativeElement: undefined };\r\n\r\n    @Input() public modalTitle?: string;\r\n    @Input() public showHeader: boolean = true;\r\n    @Input() public showFooter: boolean = true;\r\n    @Input() public closeText?: string;\r\n    @Input() public size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\r\n    @Input() public modalDialogId?: string;\r\n    @Input() public showCloseButton: boolean = true;\r\n\r\n    @Output() public modalOpen: EventEmitter<void> = new EventEmitter<void>();\r\n    @Output() public modalClose: EventEmitter<void> = new EventEmitter<void>();\r\n\r\n    public closeIcon = faXmark;\r\n\r\n\r\n    @ViewChild('modal', { static: false }) private _modal: ElementRef | undefined;\r\n    \r\n\r\n    constructor() {}\r\n\r\n    ngOnInit(): void {}\r\n\r\n    public open(): void {\r\n        if (this._modal != undefined) {\r\n            this._modal.nativeElement.style.display = 'block';\r\n            this.modalOpen.emit();\r\n        }\r\n    }\r\n\r\n    public close(): void {\r\n        if (this._modal != undefined) {\r\n            this._modal.nativeElement.style.display = 'none';\r\n            this.modalClose.emit();\r\n        }\r\n    }\r\n}\r\n","<div #modal class=\"modal\">\n    <div\n        class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\"\n        [id]=\"modalDialogId\"\n        [ngClass]=\"'modal-' + size\"\n        role=\"document\"\n    >\n        <div class=\"modal-content\">\n\n            <div *ngIf=\"showHeader && headerContent\" class=\"modal-header\">\n                <ng-content select='header'></ng-content>\n            </div>             \n\n            <div *ngIf=\"showHeader && !headerContent\" class=\"modal-header\">\n                <h5 class=\"modal-title\">{{modalTitle}}</h5>\n                <button \n                    *ngIf=\"showCloseButton\"\n                    type=\"button\" \n                    class=\"close\" \n                    [title]=\"closeText\"\n                    (click)=\"close()\">\n                    <fa-icon [icon]=\"closeIcon\"></fa-icon>\n                </button>\n            </div>\n\n            <div class=\"modal-body\">\n                <ng-content></ng-content>\n            </div>\n\n            <div *ngIf=\"showFooter\" class=\"modal-footer\">\n                <ng-content select=\"footer\"></ng-content>\n            </div>            \n        </div>\n    </div>\n</div>","import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';\nimport { SdsModalComponent } from '../modal.component';\n\n@Component({\n    selector: 'sds-dialog',\n    templateUrl: './dialog.component.html',\n    styleUrls: ['./dialog.component.scss'],\n})\nexport class SdsDialogComponent implements OnInit, OnChanges {\n    @Input() public title: string = '';\n    @Input() public closeText?: string;\n    @Input() public size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n    @Input() public isOpen: boolean = false;\n    \n    @Input() public primaryButtonText: string = 'Primary button';\n    @Input() public secondaryButtonText: string = 'Secondary button';\n\n    @Input() public primaryButtonClass: string = 'btn-primary';\n    @Output() public primaryClick: EventEmitter<void> = new EventEmitter();\n\n    @Input() public secondaryButtonClass: string = 'btn-secondary';    \n    @Output() public secondaryClick: EventEmitter<void> = new EventEmitter();\n    @Input() public showSecondaryButton: boolean = true;\n\n    @Input() public showCloseButton: boolean = true;\n    @Input() public showHeader: boolean = true;\n\n    @ViewChild('modal', { static: true }) private _modal: SdsModalComponent | undefined;\n\n    constructor() {}\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes['isOpen']) {\n            if (this.isOpen) {\n                this.open();\n            } else {\n                this.close();\n            }\n\n        }\n\n    }\n\n    ngOnInit(): void {}\n\n\n    public open(): void {\n        if (this._modal != undefined) {\n            this._modal.open();\n        }\n    }\n\n    public close(): void {\n        if (this._modal != undefined) {\n            this._modal.close();\n        }        \n    }\n\n    public onSecondaryClick(): void {\n        this.secondaryClick.emit();\n        this.close();\n    }\n\n    public onPrimaryClick(): void {\n        this.primaryClick.emit();\n        this.close();\n    }    \n\n\n}\n\n\n\n","<sds-modal\n    #modal\n    [modalTitle]=\"title\"\n    [size]=\"size\"\n    [closeText]=\"closeText\"\n    [showCloseButton]=\"showCloseButton\"\n    [showHeader]=\"showHeader\"\n>\n    <div>\n        <ng-content></ng-content>\n    </div>\n\n    <ng-container #footer ngProjectAs='footer'>\n        <button\n            *ngIf=\"showSecondaryButton\"\n            class=\"btn\"\n            [class]=\"secondaryButtonClass\"\n            (click)=\"onSecondaryClick()\"\n        >{{secondaryButtonText}}</button>\n        <button\n            class=\"btn\"\n            [class]=\"primaryButtonClass\"\n            (click)=\"onPrimaryClick()\"\n        >{{primaryButtonText}}</button>\n    </ng-container>\n</sds-modal>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SdsModalComponent } from './modal.component';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\nimport { SdsDialogComponent } from './dialog/dialog.component';\n\n\nconst components = [\n    SdsModalComponent,\n    SdsDialogComponent\n];\n\n@NgModule({\n  declarations: [\n    ...components\n  ],\n  imports: [\n    CommonModule,\n    FontAwesomeModule\n  ],\n  exports: [\n    ...components\n]\n})\nexport class SdsModalModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.SdsModalComponent"],"mappings":"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"}

package/fesm2020/spicainternational-ngx-sds-components-src-lib-pane.mjs

@@ -26,10 +26,10 @@ class SdsPaneComponent {
     }
 }
 SdsPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsPaneComponent, selector: "sds-pane", inputs: { pages: "pages", contentWidthRem: "contentWidthRem" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pane border-left\">\n    <div class=\"pane-header\">\n        <ul>\n            <li \n                *ngFor=\"let page of pages\"\n                [class.active] = \"selectedPage === page\"\n                >\n                <div \n                    class=\"icon-container\"\n                    [title]=\"page.title\"\n                    (click) = \"showContent(page)\"\n                    >\n                    <fa-icon [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n                </div>\n            </li>\n        </ul>\n    </div>\n\n    <div \n        *ngIf=\"selectedPage\" \n        class=\"pane-content\"\n        [style.width.rem]=\"contentWidthRem\"\n        >\n        \n        <div class=\"page-header\">\n            <div class=\"title\">\n                {{selectedPage?.title}}\n            </div>\n\n            <button \n                class=\"btn ml-auto\"\n                (click)=\"hideContent()\"\n                >\n                <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </fa-icon>        \n            </button>  \n\n        </div>\n\n        <div class=\"page-content\">\n            <ng-container\n                [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n            >\n            </ng-container>            \n        </div>\n    </div>\n</div>", styles: [""], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+SdsPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsPaneComponent, selector: "sds-pane", inputs: { pages: "pages", contentWidthRem: "contentWidthRem" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pane border-left\">\n    <div class=\"pane-header\">\n        <ul>\n            <li \n                *ngFor=\"let page of pages\"\n                [class.active] = \"selectedPage === page\"\n                >\n                <div \n                    class=\"icon-container\"\n                    [title]=\"page.title\"\n                    (click) = \"showContent(page)\"\n                    >\n                    <fa-icon [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n                </div>\n            </li>\n        </ul>\n    </div>\n\n    <div \n        *ngIf=\"selectedPage\" \n        class=\"pane-content\"\n        [style.width.rem]=\"contentWidthRem\"\n        >\n        \n        <div class=\"page-header\">\n            <div class=\"title\">\n                {{selectedPage?.title}}\n            </div>\n\n            <button \n                class=\"btn btn-stealth ml-auto\"\n                (click)=\"hideContent()\"\n                >\n                <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </fa-icon>        \n            </button>  \n\n        </div>\n\n        <div class=\"page-container\">\n            <ng-container\n                [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n            >\n            </ng-container>            \n        </div>\n    </div>\n</div>", styles: [""], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsPaneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-pane', template: "<div class=\"pane border-left\">\n    <div class=\"pane-header\">\n        <ul>\n            <li \n                *ngFor=\"let page of pages\"\n                [class.active] = \"selectedPage === page\"\n                >\n                <div \n                    class=\"icon-container\"\n                    [title]=\"page.title\"\n                    (click) = \"showContent(page)\"\n                    >\n                    <fa-icon [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n                </div>\n            </li>\n        </ul>\n    </div>\n\n    <div \n        *ngIf=\"selectedPage\" \n        class=\"pane-content\"\n        [style.width.rem]=\"contentWidthRem\"\n        >\n        \n        <div class=\"page-header\">\n            <div class=\"title\">\n                {{selectedPage?.title}}\n            </div>\n\n            <button \n                class=\"btn ml-auto\"\n                (click)=\"hideContent()\"\n                >\n                <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </fa-icon>        \n            </button>  \n\n        </div>\n\n        <div class=\"page-content\">\n            <ng-container\n                [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n            >\n            </ng-container>            \n        </div>\n    </div>\n</div>", styles: [""] }]
+            args: [{ selector: 'sds-pane', template: "<div class=\"pane border-left\">\n    <div class=\"pane-header\">\n        <ul>\n            <li \n                *ngFor=\"let page of pages\"\n                [class.active] = \"selectedPage === page\"\n                >\n                <div \n                    class=\"icon-container\"\n                    [title]=\"page.title\"\n                    (click) = \"showContent(page)\"\n                    >\n                    <fa-icon [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n                </div>\n            </li>\n        </ul>\n    </div>\n\n    <div \n        *ngIf=\"selectedPage\" \n        class=\"pane-content\"\n        [style.width.rem]=\"contentWidthRem\"\n        >\n        \n        <div class=\"page-header\">\n            <div class=\"title\">\n                {{selectedPage?.title}}\n            </div>\n\n            <button \n                class=\"btn btn-stealth ml-auto\"\n                (click)=\"hideContent()\"\n                >\n                <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </fa-icon>        \n            </button>  \n\n        </div>\n\n        <div class=\"page-container\">\n            <ng-container\n                [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n            >\n            </ng-container>            \n        </div>\n    </div>\n</div>", styles: [""] }]
         }], ctorParameters: function () { return []; }, propDecorators: { pages: [{
                 type: Input
             }], contentWidthRem: [{

package/fesm2020/spicainternational-ngx-sds-components-src-lib-pane.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-pane.mjs","sources":["../../../projects/ngx-sds-components/src/lib/pane/pane.component.ts","../../../projects/ngx-sds-components/src/lib/pane/pane.component.html","../../../projects/ngx-sds-components/src/lib/pane/pane.module.ts","../../../projects/ngx-sds-components/src/lib/pane/spicainternational-ngx-sds-components-src-lib-pane.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { PanePage } from './pane.model';\n\nimport { faXmark } from '@fortawesome/pro-regular-svg-icons';\n\n@Component({\n    selector: 'sds-pane',\n    templateUrl: './pane.component.html',\n    styleUrls: ['./pane.component.scss'],\n})\nexport class SdsPaneComponent implements OnInit {\n\n    @Input() pages?: PanePage[];\n    @Input() contentWidthRem: number = 20;\n\n    @Output() pageChange = new EventEmitter();\n\n    public selectedPage?: PanePage;\n    public isContentVisible: boolean = false;\n\n    public closeIcon = faXmark;\n\n    constructor() {}\n\n    ngOnInit(): void {}\n\n    public showContent(page: PanePage): void{\n        this.selectedPage = page;\n        this.isContentVisible = true;\n        this.pageChange.emit(this.selectedPage);\n    }\n\n    public hideContent(): void{\n        this.isContentVisible = false;\n        this.selectedPage = undefined;\n        this.pageChange.emit(this.selectedPage);\n    }\n\n\n}\n","<div class=\"pane border-left\">\n    <div class=\"pane-header\">\n        <ul>\n            <li \n                *ngFor=\"let page of pages\"\n                [class.active] = \"selectedPage === page\"\n                >\n                <div \n                    class=\"icon-container\"\n                    [title]=\"page.title\"\n                    (click) = \"showContent(page)\"\n                    >\n                    <fa-icon [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n                </div>\n            </li>\n        </ul>\n    </div>\n\n    <div \n        *ngIf=\"selectedPage\" \n        class=\"pane-content\"\n        [style.width.rem]=\"contentWidthRem\"\n        >\n        \n        <div class=\"page-header\">\n            <div class=\"title\">\n                {{selectedPage?.title}}\n            </div>\n\n            <button \n                class=\"btn ml-auto\"\n                (click)=\"hideContent()\"\n                >\n                <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </fa-icon>        \n            </button>  \n\n        </div>\n\n        <div class=\"page-content\">\n            <ng-container\n                [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n            >\n            </ng-container>            \n        </div>\n    </div>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SdsPaneComponent } from '../pane/pane.component';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\n@NgModule({\n    declarations: [\n        SdsPaneComponent\n    ],\n    imports: [\n        CommonModule, \n        FontAwesomeModule\n    ],\n    exports: [\n        SdsPaneComponent\n    ],\n})\nexport class SdsPaneModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;MAUa,gBAAgB,CAAA;AAYzB,IAAA,WAAA,GAAA;QATS,IAAe,CAAA,eAAA,GAAW,EAAE,CAAC;AAE5B,QAAA,IAAA,CAAA,UAAU,GAAG,IAAI,YAAY,EAAE,CAAC;QAGnC,IAAgB,CAAA,gBAAA,GAAY,KAAK,CAAC;QAElC,IAAS,CAAA,SAAA,GAAG,OAAO,CAAC;KAEX;AAEhB,IAAA,QAAQ,MAAW;AAEZ,IAAA,WAAW,CAAC,IAAc,EAAA;AAC7B,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;AACzB,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KAC3C;IAEM,WAAW,GAAA;AACd,QAAA,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;AAC9B,QAAA,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;QAC9B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KAC3C;;6GA1BQ,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,gBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,uJCV7B,02CA6CM,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,QAAA,EAAA,YAAA,EAAA,SAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDnCO,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAL5B,SAAS;+BACI,UAAU,EAAA,QAAA,EAAA,02CAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA;0EAMX,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,eAAe,EAAA,CAAA;sBAAvB,KAAK;gBAEI,UAAU,EAAA,CAAA;sBAAnB,MAAM;;;MEEE,aAAa,CAAA;;0GAAb,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;2GAAb,aAAa,EAAA,YAAA,EAAA,CAVlB,gBAAgB,CAAA,EAAA,OAAA,EAAA,CAGhB,YAAY;AACZ,QAAA,iBAAiB,aAGjB,gBAAgB,CAAA,EAAA,CAAA,CAAA;AAGX,aAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,aAAa,EARb,OAAA,EAAA,CAAA;YACL,YAAY;YACZ,iBAAiB;AACpB,SAAA,CAAA,EAAA,CAAA,CAAA;2FAKQ,aAAa,EAAA,UAAA,EAAA,CAAA;kBAZzB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,YAAY,EAAE;wBACV,gBAAgB;AACnB,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACL,YAAY;wBACZ,iBAAiB;AACpB,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACL,gBAAgB;AACnB,qBAAA;AACJ,iBAAA,CAAA;;;AChBD;;AAEG;;;;"}
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-pane.mjs","sources":["../../../projects/ngx-sds-components/src/lib/pane/pane.component.ts","../../../projects/ngx-sds-components/src/lib/pane/pane.component.html","../../../projects/ngx-sds-components/src/lib/pane/pane.module.ts","../../../projects/ngx-sds-components/src/lib/pane/spicainternational-ngx-sds-components-src-lib-pane.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { PanePage } from './pane.model';\n\nimport { faXmark } from '@fortawesome/pro-regular-svg-icons';\n\n@Component({\n    selector: 'sds-pane',\n    templateUrl: './pane.component.html',\n    styleUrls: ['./pane.component.scss'],\n})\nexport class SdsPaneComponent implements OnInit {\n\n    @Input() pages?: PanePage[];\n    @Input() contentWidthRem: number = 20;\n\n    @Output() pageChange = new EventEmitter();\n\n    public selectedPage?: PanePage;\n    public isContentVisible: boolean = false;\n\n    public closeIcon = faXmark;\n\n    constructor() {}\n\n    ngOnInit(): void {}\n\n    public showContent(page: PanePage): void{\n        this.selectedPage = page;\n        this.isContentVisible = true;\n        this.pageChange.emit(this.selectedPage);\n    }\n\n    public hideContent(): void{\n        this.isContentVisible = false;\n        this.selectedPage = undefined;\n        this.pageChange.emit(this.selectedPage);\n    }\n\n\n}\n","<div class=\"pane border-left\">\n    <div class=\"pane-header\">\n        <ul>\n            <li \n                *ngFor=\"let page of pages\"\n                [class.active] = \"selectedPage === page\"\n                >\n                <div \n                    class=\"icon-container\"\n                    [title]=\"page.title\"\n                    (click) = \"showContent(page)\"\n                    >\n                    <fa-icon [icon]=\"page.icon\" [fixedWidth]=\"true\"> </fa-icon>\n                </div>\n            </li>\n        </ul>\n    </div>\n\n    <div \n        *ngIf=\"selectedPage\" \n        class=\"pane-content\"\n        [style.width.rem]=\"contentWidthRem\"\n        >\n        \n        <div class=\"page-header\">\n            <div class=\"title\">\n                {{selectedPage?.title}}\n            </div>\n\n            <button \n                class=\"btn btn-stealth ml-auto\"\n                (click)=\"hideContent()\"\n                >\n                <fa-icon [icon]=\"closeIcon\" [fixedWidth]=\"true\"> </fa-icon>        \n            </button>  \n\n        </div>\n\n        <div class=\"page-container\">\n            <ng-container\n                [ngTemplateOutlet]=\"selectedPage && selectedPage.contentTemplate ? selectedPage.contentTemplate : null\"\n            >\n            </ng-container>            \n        </div>\n    </div>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SdsPaneComponent } from '../pane/pane.component';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\n@NgModule({\n    declarations: [\n        SdsPaneComponent\n    ],\n    imports: [\n        CommonModule, \n        FontAwesomeModule\n    ],\n    exports: [\n        SdsPaneComponent\n    ],\n})\nexport class SdsPaneModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@spicainternational/ngx-sds-components",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "description": "Spica design system angular components.",
   "peerDependencies": {
     "@angular/common": ">=10.0.0",
     "@angular/core": ">=10.0.0",
-    "@spicainternational/sds-core": "^3.4.0",
+    "@spicainternational/sds-core": "^3.4.5",
     "@fortawesome/angular-fontawesome": "^0.10.2",
     "@fortawesome/fontawesome-svg-core": "^6.1.0",
     "@fortawesome/pro-light-svg-icons": "^6.1.0",

package/src/lib/modal/dialog/dialog.component.d.ts

@@ -0,0 +1,27 @@
+import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SdsDialogComponent implements OnInit, OnChanges {
+    title: string;
+    closeText?: string;
+    size: 'sm' | 'md' | 'lg' | 'xl';
+    isOpen: boolean;
+    primaryButtonText: string;
+    secondaryButtonText: string;
+    primaryButtonClass: string;
+    primaryClick: EventEmitter<void>;
+    secondaryButtonClass: string;
+    secondaryClick: EventEmitter<void>;
+    showSecondaryButton: boolean;
+    showCloseButton: boolean;
+    showHeader: boolean;
+    private _modal;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    open(): void;
+    close(): void;
+    onSecondaryClick(): void;
+    onPrimaryClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdsDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdsDialogComponent, "sds-dialog", never, { "title": "title"; "closeText": "closeText"; "size": "size"; "isOpen": "isOpen"; "primaryButtonText": "primaryButtonText"; "secondaryButtonText": "secondaryButtonText"; "primaryButtonClass": "primaryButtonClass"; "secondaryButtonClass": "secondaryButtonClass"; "showSecondaryButton": "showSecondaryButton"; "showCloseButton": "showCloseButton"; "showHeader": "showHeader"; }, { "primaryClick": "primaryClick"; "secondaryClick": "secondaryClick"; }, never, ["*"]>;
+}

package/src/lib/modal/modal.component.d.ts

@@ -1,20 +1,22 @@
-import { OnInit, EventEmitter } from '@angular/core';
+import { ElementRef, OnInit, EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class SdsModalComponent implements OnInit {
-    private _modal;
+    headerContent: ElementRef;
     modalTitle?: string;
     showHeader: boolean;
     showFooter: boolean;
     closeText?: string;
     size: 'sm' | 'md' | 'lg' | 'xl';
     modalDialogId?: string;
+    showCloseButton: boolean;
     modalOpen: EventEmitter<void>;
     modalClose: EventEmitter<void>;
     closeIcon: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    private _modal;
     constructor();
     ngOnInit(): void;
     open(): void;
     close(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdsModalComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdsModalComponent, "sds-modal", never, { "modalTitle": "modalTitle"; "showHeader": "showHeader"; "showFooter": "showFooter"; "closeText": "closeText"; "size": "size"; "modalDialogId": "modalDialogId"; }, { "modalOpen": "modalOpen"; "modalClose": "modalClose"; }, never, ["[header]", "[header]", "*", "[footer]"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdsModalComponent, "sds-modal", never, { "modalTitle": "modalTitle"; "showHeader": "showHeader"; "showFooter": "showFooter"; "closeText": "closeText"; "size": "size"; "modalDialogId": "modalDialogId"; "showCloseButton": "showCloseButton"; }, { "modalOpen": "modalOpen"; "modalClose": "modalClose"; }, ["headerContent"], ["header", "*", "footer"]>;
 }

package/src/lib/modal/modal.module.d.ts

@@ -1,9 +1,10 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./modal.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@fortawesome/angular-fontawesome";
+import * as i2 from "./dialog/dialog.component";
+import * as i3 from "@angular/common";
+import * as i4 from "@fortawesome/angular-fontawesome";
 export declare class SdsModalModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SdsModalModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SdsModalModule, [typeof i1.SdsModalComponent], [typeof i2.CommonModule, typeof i3.FontAwesomeModule], [typeof i1.SdsModalComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SdsModalModule, [typeof i1.SdsModalComponent, typeof i2.SdsDialogComponent], [typeof i3.CommonModule, typeof i4.FontAwesomeModule], [typeof i1.SdsModalComponent, typeof i2.SdsDialogComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SdsModalModule>;
 }

package/src/lib/modal/public-api.d.ts

@@ -1,2 +1,3 @@
 export * from './modal.module';
 export * from './modal.component';
+export * from './dialog/dialog.component';