@progress/kendo-angular-layout - npm Package Compare versions

Comparing version 0.13.1 to 0.14.0

dist/npm/js/layout.module.d.ts

@@ -13,2 +13,4 @@ /**
  * - `TabstripTabComponent`—The `TabstripTab` component class.
+ * - `TabContentDirective`&mdash; The tab content directive used on `<template>` tag.
+ * - `TabTitleDirective`&mdash; The tab title directive used on `<template>` tag
  *
@@ -15,0 +17,0 @@ * @example

dist/npm/js/layout.module.js

@@ -74,2 +74,4 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 	var tabstrip_tab_component_1 = __webpack_require__(11);
+	var tab_content_directive_1 = __webpack_require__(12);
+	var tab_title_directive_1 = __webpack_require__(13);
 	var exportedModules = [
@@ -81,3 +83,5 @@ panelbar_component_1.PanelBarComponent,
 	    tabstrip_component_1.TabstripComponent,
-	    tabstrip_tab_component_1.TabstripTabComponent
+	    tabstrip_tab_component_1.TabstripTabComponent,
+	    tab_content_directive_1.TabContentDirective,
+	    tab_title_directive_1.TabTitleDirective
 	];
@@ -99,2 +103,4 @@ var declarations = exportedModules.concat([
 	 * - `TabstripTabComponent`—The `TabstripTab` component class.
+	 * - `TabContentDirective`&mdash; The tab content directive used on `<template>` tag.
+	 * - `TabTitleDirective`&mdash; The tab title directive used on `<template>` tag
 	 *
@@ -198,4 +204,16 @@ * @example
 
+/***/ },
+/* 12 */
+/***/ function(module, exports) {
+
+	module.exports = require("./tabstrip/tab-content.directive");
+
+/***/ },
+/* 13 */
+/***/ function(module, exports) {
+
+	module.exports = require("./tabstrip/tab-title.directive");
+
 /***/ }
 /******/ ])));
 //# sourceMappingURL=layout.module.js.map

dist/npm/js/layout.module.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"LayoutModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[[{"__symbolic":"reference","module":"./panelbar/panelbar.component","name":"PanelBarComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-item.component","name":"PanelBarItemComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-content.component","name":"PanelBarContentComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-item-template.directive","name":"PanelBarItemTemplateDirective"},{"__symbolic":"reference","module":"./tabstrip/tabstrip.component","name":"TabstripComponent"},{"__symbolic":"reference","module":"./tabstrip/tabstrip-tab.component","name":"TabstripTabComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-template-context.directive","name":"PanelBarTemplateContextDirective"}]],"exports":[[{"__symbolic":"reference","module":"./panelbar/panelbar.component","name":"PanelBarComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-item.component","name":"PanelBarItemComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-content.component","name":"PanelBarContentComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-item-template.directive","name":"PanelBarItemTemplateDirective"},{"__symbolic":"reference","module":"./tabstrip/tabstrip.component","name":"TabstripComponent"},{"__symbolic":"reference","module":"./tabstrip/tabstrip-tab.component","name":"TabstripTabComponent"}]],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}]}]}]}}}
+{"__symbolic":"module","version":1,"metadata":{"LayoutModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[[{"__symbolic":"reference","module":"./panelbar/panelbar.component","name":"PanelBarComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-item.component","name":"PanelBarItemComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-content.component","name":"PanelBarContentComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-item-template.directive","name":"PanelBarItemTemplateDirective"},{"__symbolic":"reference","module":"./tabstrip/tabstrip.component","name":"TabstripComponent"},{"__symbolic":"reference","module":"./tabstrip/tabstrip-tab.component","name":"TabstripTabComponent"},{"__symbolic":"reference","module":"./tabstrip/tab-content.directive","name":"TabContentDirective"},{"__symbolic":"reference","module":"./tabstrip/tab-title.directive","name":"TabTitleDirective"},{"__symbolic":"reference","module":"./panelbar/panelbar-template-context.directive","name":"PanelBarTemplateContextDirective"}]],"exports":[[{"__symbolic":"reference","module":"./panelbar/panelbar.component","name":"PanelBarComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-item.component","name":"PanelBarItemComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-content.component","name":"PanelBarContentComponent"},{"__symbolic":"reference","module":"./panelbar/panelbar-item-template.directive","name":"PanelBarItemTemplateDirective"},{"__symbolic":"reference","module":"./tabstrip/tabstrip.component","name":"TabstripComponent"},{"__symbolic":"reference","module":"./tabstrip/tabstrip-tab.component","name":"TabstripTabComponent"},{"__symbolic":"reference","module":"./tabstrip/tab-content.directive","name":"TabContentDirective"},{"__symbolic":"reference","module":"./tabstrip/tab-title.directive","name":"TabTitleDirective"}]],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}]}]}]}}}

dist/npm/js/main.d.ts

@@ -10,2 +10,4 @@ export { PanelBarComponent } from './panelbar/panelbar.component';
 export { TabstripTabComponent } from './tabstrip/tabstrip-tab.component';
+export { TabContentDirective } from './tabstrip/tab-content.directive';
+export { TabTitleDirective } from './tabstrip/tab-title.directive';
 export { LayoutModule } from './layout.module';

dist/npm/js/main.js

@@ -47,3 +47,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(12);
+	module.exports = __webpack_require__(14);
 
@@ -99,2 +99,14 @@
 /* 12 */
+/***/ function(module, exports) {
+
+	module.exports = require("./tabstrip/tab-content.directive");
+
+/***/ },
+/* 13 */
+/***/ function(module, exports) {
+
+	module.exports = require("./tabstrip/tab-title.directive");
+
+/***/ },
+/* 14 */
 /***/ function(module, exports, __webpack_require__) {
@@ -113,3 +125,3 @@
 	exports.PanelBarTemplateContextDirective = panelbar_template_context_directive_1.PanelBarTemplateContextDirective;
-	var panelbar_expand_mode_1 = __webpack_require__(13);
+	var panelbar_expand_mode_1 = __webpack_require__(15);
 	exports.PanelBarExpandMode = panelbar_expand_mode_1.PanelBarExpandMode;
@@ -120,3 +132,7 @@ var tabstrip_component_1 = __webpack_require__(10);
 	exports.TabstripTabComponent = tabstrip_tab_component_1.TabstripTabComponent;
-	var layout_module_1 = __webpack_require__(14);
+	var tab_content_directive_1 = __webpack_require__(12);
+	exports.TabContentDirective = tab_content_directive_1.TabContentDirective;
+	var tab_title_directive_1 = __webpack_require__(13);
+	exports.TabTitleDirective = tab_title_directive_1.TabTitleDirective;
+	var layout_module_1 = __webpack_require__(16);
 	exports.LayoutModule = layout_module_1.LayoutModule;
@@ -126,3 +142,3 @@
 /***/ },
-/* 13 */
+/* 15 */
 /***/ function(module, exports) {
@@ -133,3 +149,3 @@
 /***/ },
-/* 14 */
+/* 16 */
 /***/ function(module, exports) {
@@ -136,0 +152,0 @@

dist/npm/js/main.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./panelbar/panelbar.component","export":["PanelBarComponent"]},{"from":"./panelbar/panelbar-item.component","export":["PanelBarItemComponent"]},{"from":"./panelbar/panelbar-content.component","export":["PanelBarContentComponent"]},{"from":"./panelbar/panelbar-item-template.directive","export":["PanelBarItemTemplateDirective"]},{"from":"./panelbar/panelbar-template-context.directive","export":["PanelBarTemplateContextDirective"]},{"from":"./panelbar/panelbar-expand-mode","export":["PanelBarExpandMode"]},{"from":"./panelbar/panelbar-item-model","export":["PanelBarItemModel"]},{"from":"./tabstrip/tabstrip.component","export":["TabstripComponent"]},{"from":"./tabstrip/tabstrip-tab.component","export":["TabstripTabComponent"]},{"from":"./layout.module","export":["LayoutModule"]}]}
+{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./panelbar/panelbar.component","export":["PanelBarComponent"]},{"from":"./panelbar/panelbar-item.component","export":["PanelBarItemComponent"]},{"from":"./panelbar/panelbar-content.component","export":["PanelBarContentComponent"]},{"from":"./panelbar/panelbar-item-template.directive","export":["PanelBarItemTemplateDirective"]},{"from":"./panelbar/panelbar-template-context.directive","export":["PanelBarTemplateContextDirective"]},{"from":"./panelbar/panelbar-expand-mode","export":["PanelBarExpandMode"]},{"from":"./panelbar/panelbar-item-model","export":["PanelBarItemModel"]},{"from":"./tabstrip/tabstrip.component","export":["TabstripComponent"]},{"from":"./tabstrip/tabstrip-tab.component","export":["TabstripTabComponent"]},{"from":"./tabstrip/tab-content.directive","export":["TabContentDirective"]},{"from":"./tabstrip/tab-title.directive","export":["TabTitleDirective"]},{"from":"./layout.module","export":["LayoutModule"]}]}

dist/npm/js/panelbar/panelbar-content.component.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(15);
+	module.exports = __webpack_require__(17);
 
@@ -61,3 +61,3 @@
 
-/***/ 15:
+/***/ 17:
 /***/ function(module, exports, __webpack_require__) {
@@ -64,0 +64,0 @@

dist/npm/js/panelbar/panelbar-expand-mode.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(16);
+	module.exports = __webpack_require__(18);
 
@@ -54,3 +54,3 @@
 
-/***/ 16:
+/***/ 18:
 /***/ function(module, exports) {
@@ -57,0 +57,0 @@

dist/npm/js/panelbar/panelbar-item-model.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(17);
+	module.exports = __webpack_require__(19);
 
@@ -54,3 +54,3 @@
 
-/***/ 17:
+/***/ 19:
 /***/ function(module, exports) {
@@ -57,0 +57,0 @@

dist/npm/js/panelbar/panelbar-item-template.directive.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(18);
+	module.exports = __webpack_require__(20);
 
@@ -61,3 +61,3 @@
 
-/***/ 18:
+/***/ 20:
 /***/ function(module, exports, __webpack_require__) {
@@ -64,0 +64,0 @@

dist/npm/js/panelbar/panelbar-item.component.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(19);
+	module.exports = __webpack_require__(21);
 
@@ -61,3 +61,3 @@
 
-/***/ 19:
+/***/ 21:
 /***/ function(module, exports, __webpack_require__) {
@@ -79,4 +79,4 @@
 	var core_1 = __webpack_require__(3);
-	var panelbar_service_1 = __webpack_require__(20);
-	var panelbar_content_component_1 = __webpack_require__(21);
+	var panelbar_service_1 = __webpack_require__(22);
+	var panelbar_content_component_1 = __webpack_require__(23);
 	/**
@@ -400,3 +400,3 @@ * @hidden
 
-/***/ 20:
+/***/ 22:
 /***/ function(module, exports) {
@@ -408,3 +408,3 @@
 
-/***/ 21:
+/***/ 23:
 /***/ function(module, exports) {
@@ -411,0 +411,0 @@

dist/npm/js/panelbar/panelbar-template-context.directive.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(22);
+	module.exports = __webpack_require__(24);
 
@@ -61,3 +61,3 @@
 
-/***/ 22:
+/***/ 24:
 /***/ function(module, exports, __webpack_require__) {
@@ -64,0 +64,0 @@

dist/npm/js/panelbar/panelbar.component.js

@@ -43,13 +43,13 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 /************************************************************************/
-/******/ ([
-/* 0 */
+/******/ ({
+
+/***/ 0:
 /***/ function(module, exports, __webpack_require__) {
 
-	module.exports = __webpack_require__(23);
+	module.exports = __webpack_require__(25);
 
 
 /***/ },
-/* 1 */,
-/* 2 */,
-/* 3 */
+
+/***/ 3:
 /***/ function(module, exports) {
@@ -60,19 +60,4 @@
 /***/ },
-/* 4 */,
-/* 5 */,
-/* 6 */,
-/* 7 */,
-/* 8 */,
-/* 9 */,
-/* 10 */,
-/* 11 */,
-/* 12 */,
-/* 13 */,
-/* 14 */,
-/* 15 */,
-/* 16 */,
-/* 17 */,
-/* 18 */,
-/* 19 */,
-/* 20 */
+
+/***/ 22:
 /***/ function(module, exports) {
@@ -83,5 +68,4 @@
 /***/ },
-/* 21 */,
-/* 22 */,
-/* 23 */
+
+/***/ 25:
 /***/ function(module, exports, __webpack_require__) {
@@ -100,8 +84,8 @@
 	var core_1 = __webpack_require__(3);
-	__webpack_require__(24);
-	var keys_1 = __webpack_require__(29);
-	var panelbar_expand_mode_1 = __webpack_require__(30);
-	var panelbar_item_component_1 = __webpack_require__(31);
-	var panelbar_service_1 = __webpack_require__(20);
-	var panelbar_item_template_directive_1 = __webpack_require__(32);
+	__webpack_require__(26);
+	var keys_1 = __webpack_require__(31);
+	var panelbar_expand_mode_1 = __webpack_require__(32);
+	var panelbar_item_component_1 = __webpack_require__(33);
+	var panelbar_service_1 = __webpack_require__(22);
+	var panelbar_item_template_directive_1 = __webpack_require__(34);
 	/**
@@ -524,3 +508,4 @@ * Represents the Kendo UI PanelBar component for Angular.
 /***/ },
-/* 24 */
+
+/***/ 26:
 /***/ function(module, exports) {
@@ -531,7 +516,4 @@
 /***/ },
-/* 25 */,
-/* 26 */,
-/* 27 */,
-/* 28 */,
-/* 29 */
+
+/***/ 31:
 /***/ function(module, exports) {
@@ -542,3 +524,4 @@
 /***/ },
-/* 30 */
+
+/***/ 32:
 /***/ function(module, exports) {
@@ -549,3 +532,4 @@
 /***/ },
-/* 31 */
+
+/***/ 33:
 /***/ function(module, exports) {
@@ -556,3 +540,4 @@
 /***/ },
-/* 32 */
+
+/***/ 34:
 /***/ function(module, exports) {
@@ -563,3 +548,4 @@
 /***/ }
-/******/ ])));
+
+/******/ })));
 //# sourceMappingURL=panelbar.component.js.map

dist/npm/js/panelbar/panelbar.service.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(33);
+	module.exports = __webpack_require__(35);
 
@@ -61,3 +61,3 @@
 
-/***/ 33:
+/***/ 35:
 /***/ function(module, exports, __webpack_require__) {
@@ -76,3 +76,3 @@
 	var core_1 = __webpack_require__(3);
-	var Subject_1 = __webpack_require__(34);
+	var Subject_1 = __webpack_require__(36);
 	/**
@@ -108,3 +108,3 @@ * @hidden
 
-/***/ 34:
+/***/ 36:
 /***/ function(module, exports) {
@@ -111,0 +111,0 @@

dist/npm/js/tabstrip/tabstrip-tab.component.d.ts

 import { AfterContentInit } from '@angular/core';
+import { TabContentDirective } from './tab-content.directive';
+import { TabTitleDirective } from './tab-title.directive';
 /**
@@ -8,6 +10,2 @@ * Represents the Kendo UI Tabstrip Tab component for Angular.
     /**
-     * @hidden
-     */
-    id: string;
-    /**
      * Sets the title of a tab. Used as an attribute on a Tab.
@@ -28,7 +26,5 @@ */
     selected: boolean;
+    tabContent: TabContentDirective;
+    tabTitle: TabTitleDirective;
     ngAfterContentInit(): void;
-    readonly tabId: string;
-    readonly tabPanelId: string;
-    readonly h: any;
-    readonly className: string;
 }

dist/npm/js/tabstrip/tabstrip-tab.component.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(35);
+	module.exports = __webpack_require__(39);
 
@@ -61,3 +61,3 @@
 
-/***/ 35:
+/***/ 39:
 /***/ function(module, exports, __webpack_require__) {
@@ -76,3 +76,4 @@
 	var core_1 = __webpack_require__(3);
-	var nextId = 0;
+	var tab_content_directive_1 = __webpack_require__(40);
+	var tab_title_directive_1 = __webpack_require__(41);
 	/**
@@ -84,7 +85,2 @@ * Represents the Kendo UI Tabstrip Tab component for Angular.
 	        this.active = false;
-	        /**
-	         * @hidden
-	         */
-	        //https://github.com/ng-bootstrap/ng-bootstrap/commit/b06d56c0878410e2ce92d0562bf6eb14449bbf54
-	        this.id = "default-" + nextId++;
 	    }
@@ -94,38 +90,5 @@ TabstripTabComponent.prototype.ngAfterContentInit = function () {
 	    };
-	    Object.defineProperty(TabstripTabComponent.prototype, "tabId", {
-	        get: function () {
-	            return 'k-tabstip-tab-' + this.id;
-	        },
-	        enumerable: true,
-	        configurable: true
-	    });
-	    Object.defineProperty(TabstripTabComponent.prototype, "tabPanelId", {
-	        get: function () {
-	            return 'k-tabstip-tabpanel-' + this.id;
-	        },
-	        enumerable: true,
-	        configurable: true
-	    });
-	    Object.defineProperty(TabstripTabComponent.prototype, "h", {
-	        get: function () {
-	            return this.height;
-	        },
-	        enumerable: true,
-	        configurable: true
-	    });
-	    Object.defineProperty(TabstripTabComponent.prototype, "className", {
-	        get: function () {
-	            var classes = 'k-content';
-	            return this.active ? classes + ' k-state-active' : classes;
-	        },
-	        enumerable: true,
-	        configurable: true
-	    });
 	    __decorate([
 	        core_1.Input(), 
 	        __metadata('design:type', String)
-	    ], TabstripTabComponent.prototype, "id", void 0);
-	    __decorate([
-	        core_1.Input(), 
-	        __metadata('design:type', String)
 	    ], TabstripTabComponent.prototype, "title", void 0);
@@ -145,24 +108,13 @@ __decorate([
 	    __decorate([
-	        core_1.HostBinding('style.height'), 
-	        __metadata('design:type', Object)
-	    ], TabstripTabComponent.prototype, "h", null);
+	        core_1.ContentChild(tab_content_directive_1.TabContentDirective), 
+	        __metadata('design:type', tab_content_directive_1.TabContentDirective)
+	    ], TabstripTabComponent.prototype, "tabContent", void 0);
 	    __decorate([
-	        core_1.HostBinding('class'), 
-	        __metadata('design:type', String)
-	    ], TabstripTabComponent.prototype, "className", null);
+	        core_1.ContentChild(tab_title_directive_1.TabTitleDirective), 
+	        __metadata('design:type', tab_title_directive_1.TabTitleDirective)
+	    ], TabstripTabComponent.prototype, "tabTitle", void 0);
 	    TabstripTabComponent = __decorate([
 	        core_1.Component({
-	            animations: [
-	                core_1.trigger('state', [
-	                    core_1.state('active', core_1.style({
-	                        opacity: '1'
-	                    })),
-	                    core_1.state('inactive', core_1.style({
-	                        opacity: '0'
-	                    })),
-	                    core_1.transition('inactive => active', core_1.animate('400ms ease-in'))
-	                ])
-	            ],
 	            selector: 'kendo-tabstrip-tab',
-	            template: "<div\n            [@state]=\"active ? 'active' : 'inactive'\"\n            [id]=\"tabPanelId\"\n            role=\"tabpanel\"\n            [attr.aria-hidden]=\"!active\"\n            [attr.aria-expanded]=\"active\"\n            [attr.aria-labelledby]=\"tabId\"\n            [attr.aria-disabled]=\"disabled\"\n        >\n            <ng-content></ng-content>\n        </div>"
+	            template: ""
 	        }), 
@@ -176,2 +128,16 @@ __metadata('design:paramtypes', [])
 
+/***/ },
+
+/***/ 40:
+/***/ function(module, exports) {
+
+	module.exports = require("./tab-content.directive");
+
+/***/ },
+
+/***/ 41:
+/***/ function(module, exports) {
+
+	module.exports = require("./tab-title.directive");
+
 /***/ }
@@ -178,0 +144,0 @@

dist/npm/js/tabstrip/tabstrip-tab.component.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"TabstripTabComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["state",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["active",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":"1"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["inactive",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":"0"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["inactive => active",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["400ms ease-in"]}]}]]}],"selector":"kendo-tabstrip-tab","template":"<div\n            [@state]=\"active ? 'active' : 'inactive'\"\n            [id]=\"tabPanelId\"\n            role=\"tabpanel\"\n            [attr.aria-hidden]=\"!active\"\n            [attr.aria-expanded]=\"active\"\n            [attr.aria-labelledby]=\"tabId\"\n            [attr.aria-disabled]=\"disabled\"\n        >\n            <ng-content></ng-content>\n        </div>"}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"h":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.height"]}]}],"className":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class"]}]}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"TabstripTabComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"kendo-tabstrip-tab","template":""}]}],"members":{"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tabContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./tab-content.directive","name":"TabContentDirective"}]}]}],"tabTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./tab-title.directive","name":"TabTitleDirective"}]}]}],"ngAfterContentInit":[{"__symbolic":"method"}]}}}}

dist/npm/js/tabstrip/tabstrip.component.d.ts

@@ -8,2 +8,3 @@ import '@telerik/kendo-theme-default/styles/packages/layout';
 export declare class TabstripComponent {
+    animate: boolean;
     /**
@@ -14,2 +15,6 @@ * Sets the height of the Tabstrip.
     /**
+     * Enables tab animation.
+     */
+    animations: boolean;
+    /**
      * Fires each time the user selects a tab.
@@ -21,6 +26,2 @@ * The event data contains the index of the selected tab and its title.
     tabs: QueryList<TabstripTabComponent>;
-    /**
-     * @hidden
-     */
-    activeDescendant: string;
     private keyBinding;
@@ -34,7 +35,7 @@ /**
      */
-    onFocus(): void;
+    tabPanelId(id: number): string;
     /**
      * @hidden
      */
-    onBlur(): void;
+    tabId(id: number): string;
     protected selectTab(selectedIndex: number): void;
@@ -41,0 +42,0 @@ protected tabItemClass(tab: TabstripTabComponent): Object;

dist/npm/js/tabstrip/tabstrip.component.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(36);
+	module.exports = __webpack_require__(42);
 
@@ -61,3 +61,3 @@
 
-/***/ 24:
+/***/ 26:
 /***/ function(module, exports) {
@@ -69,3 +69,3 @@
 
-/***/ 29:
+/***/ 31:
 /***/ function(module, exports) {
@@ -77,3 +77,3 @@
 
-/***/ 36:
+/***/ 42:
 /***/ function(module, exports, __webpack_require__) {
@@ -91,6 +91,6 @@
 	};
-	__webpack_require__(24);
+	__webpack_require__(26);
 	var core_1 = __webpack_require__(3);
-	var tabstrip_tab_component_1 = __webpack_require__(37);
-	var keys_1 = __webpack_require__(29);
+	var tabstrip_tab_component_1 = __webpack_require__(43);
+	var keys_1 = __webpack_require__(31);
 	/**
@@ -102,3 +102,8 @@ * Represents the Kendo UI Tabstrip component for Angular.
 	        var _this = this;
+	        this.animate = false;
 	        /**
+	         * Enables tab animation.
+	         */
+	        this.animations = true;
+	        /**
 	         * Fires each time the user selects a tab.
@@ -108,6 +113,2 @@ * The event data contains the index of the selected tab and its title.
 	        this.select = new core_1.EventEmitter();
-	        /**
-	         * @hidden
-	         */
-	        this.activeDescendant = "";
 	        this.keyBinding = (_a = {},
@@ -152,14 +153,4 @@ _a[keys_1.Keys.left] = function (selectedIndex) { return _this.prevNavigatableIndex(selectedIndex); },
 	     */
-	    TabstripComponent.prototype.onFocus = function () {
-	        var enabledTabs = this.tabs.filter(function (tab) { return !tab.disabled; });
-	        if (!enabledTabs.length) {
-	            return;
-	        }
-	        var activeTabs = enabledTabs.filter(function (tab) { return tab.active; });
-	        if (activeTabs.length) {
-	            this.activeDescendant = activeTabs[0].tabId;
-	        }
-	        else {
-	            this.activeDescendant = enabledTabs[0].tabId;
-	        }
+	    TabstripComponent.prototype.tabPanelId = function (id) {
+	        return 'k-tabstip-tabpanel-' + id;
 	    };
@@ -169,6 +160,7 @@ /**
 	     */
-	    TabstripComponent.prototype.onBlur = function () {
-	        this.activeDescendant = "";
+	    TabstripComponent.prototype.tabId = function (id) {
+	        return 'k-tabstip-tab-' + id;
 	    };
 	    TabstripComponent.prototype.selectTab = function (selectedIndex) {
+	        this.animate = this.animations ? true : false;
 	        var tab = this.tabs.toArray()[selectedIndex];
@@ -251,2 +243,6 @@ if (!tab || !!tab.disabled) {
 	    __decorate([
+	        core_1.Input(), 
+	        __metadata('design:type', Boolean)
+	    ], TabstripComponent.prototype, "animations", void 0);
+	    __decorate([
 	        core_1.Output(), 
@@ -265,4 +261,15 @@ __metadata('design:type', core_1.EventEmitter)
 	        core_1.Component({
+	            animations: [
+	                core_1.trigger('state', [
+	                    core_1.state('active', core_1.style({
+	                        opacity: 1
+	                    })),
+	                    core_1.transition('void => active', [
+	                        core_1.style({ opacity: 0 }),
+	                        core_1.animate('400ms ease-in')
+	                    ])
+	                ])
+	            ],
 	            selector: 'kendo-tabstrip',
-	            template: "\n        <ul\n            class=\"k-reset k-tabstrip-items k-tabstrip-top\"\n            role=\"tablist\"\n            (focus)=\"onFocus()\"\n            (blur)=\"onBlur()\"\n            (keydown)=\"onKeyDown($event)\"\n            [tabIndex]=\"0\"\n            [attr.aria-active]=\"activeDescendant\"\n        >\n            <li *ngFor=\"let tab of tabs; let idx = index;\" (click)=\"selectTab(idx)\"\n                [ngClass]=\"tabItemClass(tab)\"\n                role=\"tab\"\n                [id]=\"tab.tabId\"\n                [attr.aria-selected]=\"tab.active\"\n                [attr.aria-controls]=\"tab.tabPanelId\"\n                [attr.aria-disabled]=\"tab.disabled\"\n            ><span class=\"k-link\">{{ tab.title }}</span></li>\n        </ul>\n        <ng-content></ng-content>\n    "
+	            template: "\n        <ul\n            class=\"k-reset k-tabstrip-items k-tabstrip-top\"\n            role=\"tablist\"\n            (keydown)=\"onKeyDown($event)\"\n            [tabIndex]=\"0\"\n        >\n            <li *ngFor=\"let tab of tabs; let idx = index;\" (click)=\"selectTab(idx)\"\n                [ngClass]=\"tabItemClass(tab)\"\n                role=\"tab\"\n                [id]=\"tab.tabId\"\n                [attr.aria-selected]=\"tab.active\"\n                [attr.aria-controls]=\"tab.tabPanelId\"\n                [attr.aria-disabled]=\"tab.disabled\"\n            ><span class=\"k-link\">{{ tab.title }}<template [ngTemplateOutlet]=\"tab.tabTitle?.templateRef\"></template></span></li>\n        </ul>\n        <template ngFor let-tab [ngForOf]=\"tabs\" let-i=\"index\">\n            <div\n                [@state]=\"tab.active && animate ? 'active' : 'inactive'\"\n                *ngIf=\"tab.active\"\n                class=\"k-content k-state-active\"\n                [ngStyle]=\"{'height': tab.height}\"\n                role=\"tabpanel\"\n                [id]=\"tabPanelId(i)\"\n                [attr.aria-hidden]=\"!tab.active\"\n                [attr.aria-expanded]=\"tab.active\"\n                [attr.aria-labelledby]=\"tabId(i)\"\n                [attr.aria-disabled]=\"tab.disabled\"\n            >\n                <template [ngTemplateOutlet]=\"tab.tabContent.templateRef\"></template>\n            </div>\n        </template>\n    "
 	        }), 
@@ -278,3 +285,3 @@ __metadata('design:paramtypes', [])
 
-/***/ 37:
+/***/ 43:
 /***/ function(module, exports) {
@@ -281,0 +288,0 @@

dist/npm/js/tabstrip/tabstrip.component.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"TabstripComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"kendo-tabstrip","template":"\n        <ul\n            class=\"k-reset k-tabstrip-items k-tabstrip-top\"\n            role=\"tablist\"\n            (focus)=\"onFocus()\"\n            (blur)=\"onBlur()\"\n            (keydown)=\"onKeyDown($event)\"\n            [tabIndex]=\"0\"\n            [attr.aria-active]=\"activeDescendant\"\n        >\n            <li *ngFor=\"let tab of tabs; let idx = index;\" (click)=\"selectTab(idx)\"\n                [ngClass]=\"tabItemClass(tab)\"\n                role=\"tab\"\n                [id]=\"tab.tabId\"\n                [attr.aria-selected]=\"tab.active\"\n                [attr.aria-controls]=\"tab.tabPanelId\"\n                [attr.aria-disabled]=\"tab.disabled\"\n            ><span class=\"k-link\">{{ tab.title }}</span></li>\n        </ul>\n        <ng-content></ng-content>\n    "}]}],"members":{"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"select":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"className":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class"]}]}],"tabs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./tabstrip-tab.component","name":"TabstripTabComponent"}]}]}],"onKeyDown":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"selectTab":[{"__symbolic":"method"}],"tabItemClass":[{"__symbolic":"method"}],"firstNavigatableIndex":[{"__symbolic":"method"}],"lastNavigatableIndex":[{"__symbolic":"method"}],"prevNavigatableIndex":[{"__symbolic":"method"}],"nextNavigatableIndex":[{"__symbolic":"method"}],"emitEvent":[{"__symbolic":"method"}],"deactivateAll":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"TabstripComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["state",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["active",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => active",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["400ms ease-in"]}]]}]]}],"selector":"kendo-tabstrip","template":"\n        <ul\n            class=\"k-reset k-tabstrip-items k-tabstrip-top\"\n            role=\"tablist\"\n            (keydown)=\"onKeyDown($event)\"\n            [tabIndex]=\"0\"\n        >\n            <li *ngFor=\"let tab of tabs; let idx = index;\" (click)=\"selectTab(idx)\"\n                [ngClass]=\"tabItemClass(tab)\"\n                role=\"tab\"\n                [id]=\"tab.tabId\"\n                [attr.aria-selected]=\"tab.active\"\n                [attr.aria-controls]=\"tab.tabPanelId\"\n                [attr.aria-disabled]=\"tab.disabled\"\n            ><span class=\"k-link\">{{ tab.title }}<template [ngTemplateOutlet]=\"tab.tabTitle?.templateRef\"></template></span></li>\n        </ul>\n        <template ngFor let-tab [ngForOf]=\"tabs\" let-i=\"index\">\n            <div\n                [@state]=\"tab.active && animate ? 'active' : 'inactive'\"\n                *ngIf=\"tab.active\"\n                class=\"k-content k-state-active\"\n                [ngStyle]=\"{'height': tab.height}\"\n                role=\"tabpanel\"\n                [id]=\"tabPanelId(i)\"\n                [attr.aria-hidden]=\"!tab.active\"\n                [attr.aria-expanded]=\"tab.active\"\n                [attr.aria-labelledby]=\"tabId(i)\"\n                [attr.aria-disabled]=\"tab.disabled\"\n            >\n                <template [ngTemplateOutlet]=\"tab.tabContent.templateRef\"></template>\n            </div>\n        </template>\n    "}]}],"members":{"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"animations":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"select":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"className":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class"]}]}],"tabs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./tabstrip-tab.component","name":"TabstripTabComponent"}]}]}],"onKeyDown":[{"__symbolic":"method"}],"tabPanelId":[{"__symbolic":"method"}],"tabId":[{"__symbolic":"method"}],"selectTab":[{"__symbolic":"method"}],"tabItemClass":[{"__symbolic":"method"}],"firstNavigatableIndex":[{"__symbolic":"method"}],"lastNavigatableIndex":[{"__symbolic":"method"}],"prevNavigatableIndex":[{"__symbolic":"method"}],"nextNavigatableIndex":[{"__symbolic":"method"}],"emitEvent":[{"__symbolic":"method"}],"deactivateAll":[{"__symbolic":"method"}]}}}}

package.json

 {
   "name": "@progress/kendo-angular-layout",
   "description": "Layout Package for Angular 2",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "publishConfig": {
@@ -6,0 +6,0 @@ "registry": "https://registry.npm.telerik.com"

New alerts

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

400549

increased by5.14%

Number of package files

64

increased by14.29%

Lines of code

4105

increased by6.98%

Worsened metrics

Number of low supply chain risk alerts

2

increased by100%

No dependency changes