angular2-bootstrap-confirm - npm Package Compare versions

Comparing version 0.5.2 to 0.6.0

angular2-bootstrap-confirm.d.ts

 import { Confirm } from './src/confirm.directive';
 import { ConfirmOptions } from './src/confirmOptions.provider';
 import { Position } from './src/position.provider';
+import { Focus } from './src/focus.directive';
 export * from './src/confirm.directive';
 export { ConfirmOptions } from './src/confirmOptions.provider';
 export * from './src/position.provider';
+export * from './src/focus.directive';
 declare var _default: {
     providers: (typeof ConfirmOptions | typeof Position)[];
-    directives: typeof Confirm[];
+    directives: (typeof Confirm | typeof Focus)[];
 };
 export default _default;

angular2-bootstrap-confirm.js

@@ -62,12 +62,14 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	var confirm_directive_1 = __webpack_require__(1);
-	var confirmOptions_provider_1 = __webpack_require__(6);
-	var position_provider_1 = __webpack_require__(7);
+	var confirmOptions_provider_1 = __webpack_require__(7);
+	var position_provider_1 = __webpack_require__(8);
+	var focus_directive_1 = __webpack_require__(6);
 	__export(__webpack_require__(1));
-	var confirmOptions_provider_2 = __webpack_require__(6);
+	var confirmOptions_provider_2 = __webpack_require__(7);
 	exports.ConfirmOptions = confirmOptions_provider_2.ConfirmOptions;
-	__export(__webpack_require__(7));
+	__export(__webpack_require__(8));
+	__export(__webpack_require__(6));
 	Object.defineProperty(exports, "__esModule", { value: true });
 	exports.default = {
 	    providers: [confirmOptions_provider_1.ConfirmOptions, position_provider_1.Position],
-	    directives: [confirm_directive_1.Confirm]
+	    directives: [confirm_directive_1.Confirm, focus_directive_1.Focus]
 	};
@@ -96,4 +98,4 @@
 	var confirmPopover_component_1 = __webpack_require__(4);
-	var confirmOptions_provider_1 = __webpack_require__(6);
-	var position_provider_1 = __webpack_require__(7);
+	var confirmOptions_provider_1 = __webpack_require__(7);
+	var position_provider_1 = __webpack_require__(8);
 	/**
@@ -216,2 +218,5 @@ * All properties can be set on the directive as attributes like so (use the `ConfirmOptions` provider to configure them globally):
 	                    _this.onCancel();
+	                },
+	                onAfterViewInit: function () {
+	                    _this.positionPopover();
 	                }
@@ -229,3 +234,4 @@ });
 	                'popoverClass',
-	                'appendToBody'
+	                'appendToBody',
+	                'customTemplate'
 	            ];
@@ -248,9 +254,2 @@ optionalParams.forEach(function (param) {
 	                }
-	                var originalAfterViewInit = popover.instance.ngAfterViewInit;
-	                popover.instance.ngAfterViewInit = function () {
-	                    if (originalAfterViewInit) {
-	                        originalAfterViewInit.call(popover.instance);
-	                    }
-	                    _this.positionPopover();
-	                };
 	                _this.isOpenChange.emit(true);
@@ -266,3 +265,3 @@ return popover;
 	                var popover = popoverComponent.location.nativeElement.children[0];
-	                var popoverPosition = _this.position.positionElements(_this.elm.nativeElement, popoverComponent.location.nativeElement.children[0], _this.placement || _this.defaultOptions.placement, _this.appendToBody || _this.defaultOptions.appendToBody);
+	                var popoverPosition = _this.position.positionElements(_this.elm.nativeElement, popover, _this.placement || _this.defaultOptions.placement, _this.appendToBody || _this.defaultOptions.appendToBody);
 	                _this.renderer.setElementStyle(popover, 'top', popoverPosition.top + "px");
@@ -353,2 +352,6 @@ _this.renderer.setElementStyle(popover, 'left', popoverPosition.left + "px");
 	    __decorate([
+	        core_1.Input(), 
+	        __metadata('design:type', core_1.TemplateRef)
+	    ], Confirm.prototype, "customTemplate", void 0);
+	    __decorate([
 	        core_1.Output(), 
@@ -432,3 +435,4 @@ __metadata('design:type', core_1.EventEmitter)
 	var common_1 = __webpack_require__(5);
-	var confirmOptions_provider_1 = __webpack_require__(6);
+	var focus_directive_1 = __webpack_require__(6);
+	var confirmOptions_provider_1 = __webpack_require__(7);
 	/**
@@ -438,33 +442,15 @@ * @private
 	var ConfirmPopover = (function () {
-	    function ConfirmPopover(renderer, options) {
-	        this.renderer = renderer;
+	    function ConfirmPopover(options) {
 	        this.options = options;
 	    }
 	    ConfirmPopover.prototype.ngAfterViewInit = function () {
-	        var focusButton;
-	        if (this.options.focusButton === 'confirm') {
-	            focusButton = this.confirmButton;
-	        }
-	        else if (this.options.focusButton === 'cancel') {
-	            focusButton = this.cancelButton;
-	        }
-	        if (focusButton) {
-	            this.renderer.invokeElementMethod(focusButton.nativeElement, 'focus', []);
-	        }
+	        this.options.onAfterViewInit();
 	    };
-	    __decorate([
-	        core_1.ViewChild('confirmButton'), 
-	        __metadata('design:type', core_1.ElementRef)
-	    ], ConfirmPopover.prototype, "confirmButton", void 0);
-	    __decorate([
-	        core_1.ViewChild('cancelButton'), 
-	        __metadata('design:type', core_1.ElementRef)
-	    ], ConfirmPopover.prototype, "cancelButton", void 0);
 	    ConfirmPopover = __decorate([
 	        core_1.Component({
 	            styles: ["\n    .popover {\n      display: block;\n    }\n  "],
-	            directives: [common_1.NgIf],
-	            template: "\n    <div [class]=\"'popover ' + options.placement + ' popover-' + options.placement + ' ' + options.popoverClass\">\n      <div class=\"popover-arrow arrow\"></div>\n      <h3 class=\"popover-title\" [innerHTML]=\"options.title\"></h3>\n      <div class=\"popover-content\">\n        <p [innerHTML]=\"options.message\"></p>\n        <div class=\"row\">\n          <div\n            class=\"col-xs-6\"\n            [class.col-xs-offset-3]=\"options.hideCancelButton\"\n            *ngIf=\"!options.hideConfirmButton\">\n            <button\n              #confirmButton\n              [class]=\"'btn btn-block btn-' + options.confirmButtonType\"\n              (click)=\"options.onConfirm()\"\n              [innerHtml]=\"options.confirmText\">\n            </button>\n          </div>\n          <div\n            class=\"col-xs-6\"\n            [class.col-xs-offset-3]=\"options.hideConfirmButton\"\n            *ngIf=\"!options.hideCancelButton\">\n            <button\n              #cancelButton\n              [class]=\"'btn btn-block btn-' + options.cancelButtonType\"\n              (click)=\"options.onCancel()\"\n              [innerHtml]=\"options.cancelText\">\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  "
+	            directives: [common_1.NgIf, common_1.NgTemplateOutlet, focus_directive_1.Focus],
+	            template: "\n    <template\n      *ngIf=\"options.customTemplate\"\n      [ngTemplateOutlet]=\"options.customTemplate\"\n      [ngOutletContext]=\"{options: options}\">\n    </template>\n    <div\n      *ngIf=\"!options.customTemplate\"\n      [class]=\"'popover ' + options.placement + ' popover-' + options.placement + ' ' + options.popoverClass\">\n      <div class=\"popover-arrow arrow\"></div>\n      <h3 class=\"popover-title\" [innerHTML]=\"options.title\"></h3>\n      <div class=\"popover-content\">\n        <p [innerHTML]=\"options.message\"></p>\n        <div class=\"row\">\n          <div\n            class=\"col-xs-6\"\n            [class.col-xs-offset-3]=\"options.hideCancelButton\"\n            *ngIf=\"!options.hideConfirmButton\">\n            <button\n              mwl-focus\n              [focusOn]=\"options.focusButton === 'confirm'\"\n              [class]=\"'btn btn-block btn-' + options.confirmButtonType\"\n              (click)=\"options.onConfirm()\"\n              [innerHtml]=\"options.confirmText\">\n            </button>\n          </div>\n          <div\n            class=\"col-xs-6\"\n            [class.col-xs-offset-3]=\"options.hideConfirmButton\"\n            *ngIf=\"!options.hideCancelButton\">\n            <button\n              mwl-focus\n              [focusOn]=\"options.focusButton === 'cancel'\"\n              [class]=\"'btn btn-block btn-' + options.cancelButtonType\"\n              (click)=\"options.onCancel()\"\n              [innerHtml]=\"options.cancelText\">\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  "
 	        }), 
-	        __metadata('design:paramtypes', [core_1.Renderer, confirmOptions_provider_1.PopoverConfirmOptions])
+	        __metadata('design:paramtypes', [confirmOptions_provider_1.PopoverConfirmOptions])
 	    ], ConfirmPopover);
@@ -487,2 +473,45 @@ return ConfirmPopover;
 	"use strict";
+	var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+	    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	    return c > 3 && r && Object.defineProperty(target, key, r), r;
+	};
+	var __metadata = (this && this.__metadata) || function (k, v) {
+	    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+	};
+	var core_1 = __webpack_require__(2);
+	/**
+	 * A helper directive to focus buttons. You will only need this if using a custom template
+	 */
+	var Focus = (function () {
+	    function Focus(renderer, elm) {
+	        this.renderer = renderer;
+	        this.elm = elm;
+	    }
+	    Focus.prototype.ngOnChanges = function (changes) {
+	        if (changes.focusOn && this.focusOn === true) {
+	            this.renderer.invokeElementMethod(this.elm.nativeElement, 'focus', []);
+	        }
+	    };
+	    __decorate([
+	        core_1.Input(), 
+	        __metadata('design:type', Boolean)
+	    ], Focus.prototype, "focusOn", void 0);
+	    Focus = __decorate([
+	        core_1.Directive({
+	            selector: '[mwl-focus]'
+	        }), 
+	        __metadata('design:paramtypes', [core_1.Renderer, core_1.ElementRef])
+	    ], Focus);
+	    return Focus;
+	}());
+	exports.Focus = Focus;
+
+
+/***/ },
+/* 7 */
+/***/ function(module, exports, __webpack_require__) {
+
+	"use strict";
 	var __extends = (this && this.__extends) || function (d, b) {
@@ -579,3 +608,3 @@ for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
 /***/ },
-/* 7 */
+/* 8 */
 /***/ function(module, exports, __webpack_require__) {
@@ -582,0 +611,0 @@

CHANGELOG.md

@@ -5,2 +5,12 @@ # Change Log
 
+<a name="0.6.0"></a>
+# [0.6.0](https://github.com/mattlewis92/angular2-bootstrap-confirm/compare/v0.5.2...v0.6.0) (2016-06-25)
+
+
+### Features
+
+* **customTemplate:** allow a custom template to be used for the popover ([ce7fec6](https://github.com/mattlewis92/angular2-bootstrap-confirm/commit/ce7fec6)), closes [#6](https://github.com/mattlewis92/angular2-bootstrap-confirm/issues/6)
+
+
+
 <a name="0.5.2"></a>
@@ -7,0 +17,0 @@ ## [0.5.2](https://github.com/mattlewis92/angular2-bootstrap-confirm/compare/v0.5.1...v0.5.2) (2016-06-23)

package.json

 {
   "name": "angular2-bootstrap-confirm",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "An angular2 bootstrap confirmation popover",
@@ -57,3 +57,3 @@ "main": "./angular2-bootstrap-confirm.js",
     "jasmine-core": "~2.4.1",
-    "karma": "~1.0.0",
+    "karma": "~0.13.22",
     "karma-coverage": "~1.0.0",
@@ -60,0 +60,0 @@ "karma-jasmine": "~1.0.2",

src/confirm.directive.d.ts

@@ -1,2 +0,2 @@
-import { EventEmitter, ViewContainerRef, ComponentRef, OnDestroy, ElementRef, OnChanges, OnInit, ComponentResolver, Renderer } from '@angular/core';
+import { EventEmitter, ViewContainerRef, ComponentRef, OnDestroy, ElementRef, OnChanges, OnInit, ComponentResolver, Renderer, TemplateRef } from '@angular/core';
 import { ConfirmPopover } from './confirmPopover.component';
@@ -84,2 +84,13 @@ import { ConfirmOptions } from './confirmOptions.provider';
     /**
+     * A reference to a <template> tag that if set will override the popovers template. Use like so:
+     * <template #customTemplate let-options="options">
+     *   <div [class]="'popover ' + options.placement" style="display: block">
+     *     My custom template
+     *   </div>
+     * </template>
+     *
+     * Then pass customTemplate to the mwl-confirm directive like so `[customTemplate]="customTemplate"`
+     */
+    customTemplate: TemplateRef<any>;
+    /**
      * Will emit when the popover is opened or closed
@@ -86,0 +97,0 @@ */

src/confirmOptions.provider.d.ts

@@ -0,1 +1,2 @@
+import { TemplateRef } from '@angular/core';
 /**
@@ -69,2 +70,4 @@ * Use this for configuring the confirmation popover defaults
     onCancel: Function;
+    onAfterViewInit: Function;
+    customTemplate: TemplateRef<any>;
 }

src/confirmPopover.component.d.ts

@@ -1,2 +0,2 @@
-import { AfterViewInit, ElementRef, Renderer } from '@angular/core';
+import { AfterViewInit } from '@angular/core';
 import { PopoverConfirmOptions } from './confirmOptions.provider';
@@ -7,8 +7,5 @@ /**
 export declare class ConfirmPopover implements AfterViewInit {
-    private renderer;
     private options;
-    confirmButton: ElementRef;
-    cancelButton: ElementRef;
-    constructor(renderer: Renderer, options: PopoverConfirmOptions);
+    constructor(options: PopoverConfirmOptions);
     ngAfterViewInit(): void;
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

94409

increased by4.15%

Number of package files

15

increased by7.14%

Lines of code

1154

increased by4.62%

No dependency changes