@progress/kendo-angular-layout 7.0.0-next.202204060717 → 7.0.1-dev.202205020614

package/common/preventable-event.d.ts

@@ -0,0 +1,28 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export declare class PreventableEvent {
+    private prevented;
+    /**
+     * Prevents the default action for a specified event.
+     * In this way, the source component suppresses
+     * the built-in behavior that follows the event.
+     */
+    preventDefault(): void;
+    /**
+     * Returns `true` if the event was prevented
+     * by any of its subscribers.
+     *
+     * @returns `true` if the default action was prevented.
+     * Otherwise, returns `false`.
+     */
+    isDefaultPrevented(): boolean;
+    /**
+     * @hidden
+     */
+    constructor(args?: any);
+}

package/esm2015/avatar/avatar.component.js

@@ -8,6 +8,10 @@ import { getStylingClasses, mapShapeToRounded } from '../common/util';
 import { packageMetadata } from '../package-metadata';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
+const DEFAULT_ROUNDED = 'full';
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_THEME_COLOR = 'primary';
+const DEFAULT_FILL_MODE = 'solid';
 /**
  * Displays images, icons or initials representing people or other entities.
  */
@@ -20,10 +24,10 @@ export class AvatarComponent {
          * Sets a border to the avatar.
          */
         this.border = false;
-        this._themeColor = 'primary';
-        this._size = 'medium';
-        this._fillMode = 'solid';
-        this._rounded = 'full';
+        this._themeColor = DEFAULT_THEME_COLOR;
+        this._size = DEFAULT_SIZE;
+        this._fillMode = DEFAULT_FILL_MODE;
+        this._rounded = DEFAULT_ROUNDED;
         validatePackage(packageMetadata);
     }
     /**
@@ -53,12 +57,13 @@ export class AvatarComponent {
      * * `small`
      * * `medium` (Default)
      * * `large`
-     *
+     * * `none`
      */
     set size(size) {
         if (size !== this._size) {
-            this.handleClasses('size', size);
-            this._size = size === null ? null : size || 'medium';
+            const newSize = size ? size : DEFAULT_SIZE;
+            this.handleClasses('size', newSize);
+            this._size = newSize;
         }
     }
     get size() {
@@ -73,13 +78,13 @@ export class AvatarComponent {
      * * `medium`
      * * `large`
      * * `full` (Default)
-     * * null
-     *
+     * * `none`
      */
     set rounded(rounded) {
         if (rounded !== this._rounded) {
-            this.handleClasses('rounded', rounded);
-            this._rounded = rounded === null ? null : rounded || 'full';
+            const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+            this.handleClasses('rounded', newRounded);
+            this._rounded = newRounded;
         }
     }
     get rounded() {
@@ -101,10 +106,12 @@ export class AvatarComponent {
      * * `dark`— Applies coloring based on dark theme color.
      * * `light`— Applies coloring based on light theme color.
      * * `inverse`— Applies coloring based on inverted theme color.
+     * * `none`— Removes the styling associated with the theme color.
      */
     set themeColor(themeColor) {
         if (themeColor !== this._themeColor) {
-            this._themeColor = themeColor === null ? null : (themeColor || 'primary');
+            const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR;
+            this._themeColor = newThemeColor;
             this.handleFillModeAndThemeColorClasses(this.fillMode, this.themeColor);
         }
     }
@@ -117,12 +124,12 @@ export class AvatarComponent {
      * The possible values are:
      * * `solid` (Default)
      * * `outline`
-     * * null
-     *
+     * * `none`
      */
     set fillMode(fillMode) {
         if (fillMode !== this.fillMode) {
-            this._fillMode = fillMode === null ? null : (fillMode || 'solid');
+            const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+            this._fillMode = newFillMode;
             this.handleFillModeAndThemeColorClasses(this.fillMode, this.themeColor);
         }
     }
@@ -210,11 +217,11 @@ export class AvatarComponent {
         });
         classesToRemove.forEach((cl => this.renderer.removeClass(wrapperElement, cl)));
         // add fill if needed
-        if (fill !== null) {
+        if (fill !== 'none') {
             this.renderer.addClass(wrapperElement, `k-avatar-${fill}`);
         }
         // add theme color class if fill and theme color
-        if (fill !== null && themeColor !== null) {
+        if (fill !== 'none' && themeColor !== 'none') {
             this.renderer.addClass(wrapperElement, `k-avatar-${fill}-${themeColor}`);
         }
     }

package/esm2015/common/preventable-event.js

@@ -0,0 +1,34 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export class PreventableEvent {
+    /**
+     * @hidden
+     */
+    constructor(args) {
+        this.prevented = false;
+        Object.assign(this, args);
+    }
+    /**
+     * Prevents the default action for a specified event.
+     * In this way, the source component suppresses
+     * the built-in behavior that follows the event.
+     */
+    preventDefault() {
+        this.prevented = true;
+    }
+    /**
+     * Returns `true` if the event was prevented
+     * by any of its subscribers.
+     *
+     * @returns `true` if the default action was prevented.
+     * Otherwise, returns `false`.
+     */
+    isDefaultPrevented() {
+        return this.prevented;
+    }
+}

package/esm2015/common/util.js

@@ -64,12 +64,12 @@ export const getStylingClasses = (componentType, stylingOption, previousValue, n
         case 'size':
             return {
                 toRemove: `k-${componentType}-${SIZES[previousValue]}`,
-                toAdd: newValue ? `k-${componentType}-${SIZES[newValue]}` : null
+                toAdd: newValue !== 'none' ? `k-${componentType}-${SIZES[newValue]}` : ''
             };
         case 'rounded':
             return {
                 toRemove: `k-rounded-${ROUNDNESS[previousValue]}`,
-                toAdd: newValue ? `k-rounded-${ROUNDNESS[newValue]}` : null
+                toAdd: newValue !== 'none' ? `k-rounded-${ROUNDNESS[newValue]}` : ''
             };
         default:
             break;
@@ -78,7 +78,7 @@ export const getStylingClasses = (componentType, stylingOption, previousValue, n
 /**
  * @hidden
  */
-export const mapShapeToRounded = (shape) => SHAPE_TO_ROUNDED[shape] || null;
+export const mapShapeToRounded = (shape) => SHAPE_TO_ROUNDED[shape] || 'none';
 /**
  * @hidden
  */

package/esm2015/expansionpanel/expansionpanel.component.js

@@ -299,7 +299,7 @@ export class ExpansionPanelComponent {
     }
 }
 ExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExpansionPanelComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i2.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Component });
-ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: { title: "title", subtitle: "subtitle", disabled: "disabled", expanded: "expanded", expandIcon: "expandIcon", collapseIcon: "collapseIcon", animation: "animation" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse" }, host: { listeners: { "blur": "onComponentBlur()", "focus": "onComponentFocus()" }, properties: { "class.k-expander": "this.hostClass", "attr.aria-expanded": "this.expandedClass", "class.k-expanded": "this.expandedClass", "class.k-state-focus": "this.focusClass", "attr.aria-disabled": "this.disabledClass", "class.k-state-disabled": "this.disabledClass", "attr.dir": "this.direction", "attr.tabindex": "this.tabindex" } }, providers: [
+ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: { title: "title", subtitle: "subtitle", disabled: "disabled", expanded: "expanded", expandIcon: "expandIcon", collapseIcon: "collapseIcon", animation: "animation" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse" }, host: { listeners: { "blur": "onComponentBlur()", "focus": "onComponentFocus()" }, properties: { "class.k-expander": "this.hostClass", "class.k-expanded": "this.expandedClass", "class.k-state-focus": "this.focusClass", "attr.aria-disabled": "this.disabledClass", "class.k-state-disabled": "this.disabledClass", "attr.dir": "this.direction", "attr.tabindex": "this.tabindex" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -308,6 +308,8 @@ ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
     ], queries: [{ propertyName: "titleTemplate", first: true, predicate: ExpansionPanelTitleDirective, descendants: true }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], exportAs: ["kendoExpansionPanel"], ngImport: i0, template: `
         <div
             [class.k-expander-header]="true"
+            [attr.aria-expanded]="expanded && !disabled"
+            role="button"
             (click)="onHeaderClick($event)">
             <ng-container *ngIf="!titleTemplate">
                 <div *ngIf="title" class="k-expander-title">{{ title }}</div>
@@ -345,6 +347,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     template: `
         <div
             [class.k-expander-header]="true"
+            [attr.aria-expanded]="expanded && !disabled"
+            role="button"
             (click)="onHeaderClick($event)">
             <ng-container *ngIf="!titleTemplate">
                 <div *ngIf="title" class="k-expander-title">{{ title }}</div>
@@ -400,9 +404,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: HostBinding,
                 args: ['class.k-expander']
             }], expandedClass: [{
-                type: HostBinding,
-                args: ['attr.aria-expanded']
-            }, {
                 type: HostBinding,
                 args: ['class.k-expanded']
             }], focusClass: [{

package/esm2015/main.js

@@ -8,6 +8,7 @@ export { PanelBarContentDirective } from './panelbar/panelbar-content.directive'
 export { PanelBarItemTemplateDirective } from './panelbar/panelbar-item-template.directive';
 export { PanelBarItemTitleDirective } from './panelbar/panelbar-item-title.directive';
 export { PanelBarExpandMode } from './panelbar/panelbar-expand-mode';
+export * from './panelbar/events';
 export { SplitterComponent } from './splitter/splitter.component';
 export { SplitterPaneComponent } from './splitter/splitter-pane.component';
 export { TabStripComponent } from './tabstrip/tabstrip.component';

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1649229369,
+    publishDate: 1651472017,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/esm2015/panelbar/events/collapse-event.js

@@ -0,0 +1,10 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PreventableEvent } from '../../common/preventable-event';
+/**
+ * Arguments for the `collapse` event of the PanelBar.
+ */
+export class PanelBarCollapseEvent extends PreventableEvent {
+}

package/esm2015/panelbar/events/expand-event.js

@@ -0,0 +1,10 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PreventableEvent } from '../../common/preventable-event';
+/**
+ * Arguments for the `expand` event of the PanelBar.
+ */
+export class PanelBarExpandEvent extends PreventableEvent {
+}

package/esm2015/panelbar/events/select-event.js

@@ -0,0 +1,10 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PreventableEvent } from '../../common/preventable-event';
+/**
+ * Arguments for the `select` event of the PanelBar.
+ */
+export class PanelBarSelectEvent extends PreventableEvent {
+}

package/esm2015/panelbar/events/state-change-event.js

@@ -0,0 +1,9 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Arguments for the `stateChange` event of the PanelBar.
+ */
+export class PanelBarStateChangeEvent {
+}

package/esm2015/panelbar/events.js

@@ -0,0 +1,8 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export { PanelBarCollapseEvent } from './events/collapse-event';
+export { PanelBarExpandEvent } from './events/expand-event';
+export { PanelBarSelectEvent } from './events/select-event';
+export { PanelBarStateChangeEvent } from './events/state-change-event';

package/esm2015/panelbar/panelbar-item.component.js

@@ -262,7 +262,22 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     [src]="imageUrl"
                     alt="">
                 <ng-container *ngIf="!titleTemplate"><span class="k-panelbar-item-text">{{title}}</span></ng-container>
-                <ng-template *ngIf="titleTemplate" [ngTemplateOutlet]="titleTemplate"></ng-template>
+                <ng-template *ngIf="titleTemplate"
+                [ngTemplateOutlet]="titleTemplate"
+                [ngTemplateOutletContext]="{
+                    item: {
+                        title: title,
+                        id: id,
+                        icon: icon,
+                        iconClass: iconClass,
+                        imageUrl: imageUrl,
+                        selected: selected,
+                        expanded: expanded,
+                        disabled: disabled,
+                        focused: focused,
+                        content: content
+                    }
+                }"></ng-template>
                 <span *ngIf="hasChildItems || hasContent"
                     class="k-icon k-panelbar-toggle"
                     [ngClass]="{'k-i-arrow-chevron-up k-panelbar-collapse': expanded, 'k-i-arrow-chevron-down k-panelbar-expand': !expanded}">
@@ -388,7 +403,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     [src]="imageUrl"
                     alt="">
                 <ng-container *ngIf="!titleTemplate"><span class="k-panelbar-item-text">{{title}}</span></ng-container>
-                <ng-template *ngIf="titleTemplate" [ngTemplateOutlet]="titleTemplate"></ng-template>
+                <ng-template *ngIf="titleTemplate"
+                [ngTemplateOutlet]="titleTemplate"
+                [ngTemplateOutletContext]="{
+                    item: {
+                        title: title,
+                        id: id,
+                        icon: icon,
+                        iconClass: iconClass,
+                        imageUrl: imageUrl,
+                        selected: selected,
+                        expanded: expanded,
+                        disabled: disabled,
+                        focused: focused,
+                        content: content
+                    }
+                }"></ng-template>
                 <span *ngIf="hasChildItems || hasContent"
                     class="k-icon k-panelbar-toggle"
                     [ngClass]="{'k-i-arrow-chevron-up k-panelbar-collapse': expanded, 'k-i-arrow-chevron-down k-panelbar-expand': !expanded}">