carbon-components-angular 5.9.2 → 5.10.0

package/docs/documentation/images/coverage-badge-documentation.svg

@@ -4,6 +4,6 @@
         <rect id="svg_2" height="20" width="40" y="0" x="92" stroke-width="1.5" stroke="#dab226" fill="#dab226" rx="7" ry="7"/>
         <rect id="svg_3" height="20" width="22" y="0" x="92" stroke-width="1.5" stroke="#dab226" fill="#dab226"/>
         <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="12" id="svg_4" y="14" x="6" stroke-width="0" stroke="#5d5d5d" fill="#ffffff">documentation</text>
-        <text xml:space="preserve" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="12" id="svg_5" y="14" x="112" stroke-width="0" stroke="#5d5d5d" fill="#ffffff" style="text-anchor: middle">33%</text>
+        <text xml:space="preserve" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="12" id="svg_5" y="14" x="112" stroke-width="0" stroke="#5d5d5d" fill="#ffffff" style="text-anchor: middle">32%</text>
     </g>
 </svg>

package/docs/documentation/interfaces/ExpandableTileTranslations.html

@@ -187,9 +187,10 @@
 	Component,
 	Input,
 	ElementRef,
-	AfterContentInit
+	AfterViewInit,
+	ViewChild
 } from "@angular/core";
-import { I18n, Overridable } from "carbon-components-angular/i18n";
+import { I18n } from "carbon-components-angular/i18n";
 import { merge } from "carbon-components-angular/utils";
 
 export interface ExpandableTileTranslations {
@@ -201,6 +202,7 @@ export interface ExpandableTileTranslations {
 	selector: "cds-expandable-tile, ibm-expandable-tile",
 	template: `
 		<button
+			*ngIf="!interactive"
 			class="cds--tile cds--tile--expandable"
 			[ngClass]="{
 				'cds--tile--is-expanded' : expanded,
@@ -208,32 +210,67 @@ export interface ExpandableTileTranslations {
 			}"
 			[ngStyle]="{'max-height': expandedHeight + 'px'}"
 			type="button"
-			(click)="onClick()">
-			<div class="cds--tile__chevron">
-				<svg *ngIf="!expanded" width="12" height="7" viewBox="0 0 12 7" [attr.title]="expand.subject | async" role="img">
-					<title>{{expand.subject | async}}</title>
-					<path fill-rule="nonzero" d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z"/>
-				</svg>
-				<svg *ngIf="expanded" width="12" height="7" viewBox="0 0 12 7" [attr.title]="collapse.subject | async" role="img">
-					<title>{{collapse.subject | async}}</title>
-					<path fill-rule="nonzero" d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z"/>
-				</svg>
-			</div>
-			<div class="cds--tile-content">
-				<ng-content select=".cds--tile-content__above-the-fold"></ng-content>
-				<ng-content select=".cds--tile-content__below-the-fold"></ng-content>
-			</div>
+			(click)="onClick()"
+			[attr.aria-expanded]="expanded"
+			[attr.title]="(expanded ? collapse.subject : expand.subject) | async">
+				<ng-container *ngTemplateOutlet="expandableTileContent"></ng-container>
 		</button>
+
+		<div
+			*ngIf="interactive"
+			class="cds--tile cds--tile--expandable cds--tile--expandable--interactive"
+			[ngClass]="{
+				'cds--tile--is-expanded' : expanded,
+				'cds--tile--light': theme === 'light'
+			}"
+			[ngStyle]="{'max-height': expandedHeight + 'px'}"
+			[attr.title]="(expanded ? collapse.subject : expand.subject) | async">
+			<ng-container *ngTemplateOutlet="expandableTileContent"></ng-container>
+		</div>
+
+		<ng-template #chevronIcon>
+			<svg cdsIcon="chevron--down" size="16"></svg>
+		</ng-template>
+
+		<ng-template #expandableTileContent>
+			<div #container>
+				<div class="cds--tile-content">
+					<ng-content select="[cdsAboveFold],[ibmAboveFold],.cds--tile-content__above-the-fold"></ng-content>
+				</div>
+				<div *ngIf="!interactive" class="cds--tile__chevron">
+					<ng-container *ngTemplateOutlet="chevronIcon"></ng-container>
+				</div>
+				<button
+					*ngIf="interactive"
+					class="cds--tile__chevron cds--tile__chevron--interactive"
+					type="button"
+					(click)="onClick()"
+					[attr.aria-expanded]="expanded"
+					[attr.aria-label]="(expanded ? collapse.subject : expand.subject) | async">
+					<ng-container *ngTemplateOutlet="chevronIcon"></ng-container>
+				</button>
+				<div class="cds--tile-content">
+					<ng-content select="[cdsBelowFold],[ibmBelowFold],.cds--tile-content__below-the-fold"></ng-content>
+				</div>
+			</div>
+		</ng-template>
 	`
 })
-export class ExpandableTile implements AfterContentInit {
+export class ExpandableTile implements AfterViewInit {
 	/**
 	 * @deprecated since v5 - Use `cdsLayer` directive instead
 	 * Set to `"light"` to apply the light style
 	 */
 	@Input() theme: "light" | "dark" = "dark";
 
+	/**
+	 * Controls the expanded state
+	 */
 	@Input() expanded = false;
+	/**
+	 * Controls the interactive state
+	 */
+	@Input() interactive = false;
 	/**
 	 * Expects an object that contains some or all of:
 	 * ```
@@ -250,21 +287,22 @@ export class ExpandableTile implements AfterContentInit {
 		this.collapse.override(valueWithDefaults.COLLAPSE);
 	}
 
+	@ViewChild("container") tileContainer: ElementRef;
+
 	tileMaxHeight = 0;
 	currentExpandedHeight = 0;
-	element = this.elementRef.nativeElement;
 
 	expand = this.i18n.getOverridable("TILES.EXPAND");
 	collapse = this.i18n.getOverridable("TILES.COLLAPSE");
 
-	constructor(protected i18n: I18n, protected elementRef: ElementRef) {}
+	constructor(protected i18n: I18n, protected element: ElementRef) {}
 
-	ngAfterContentInit() {
+	ngAfterViewInit() {
 		this.updateMaxHeight();
 	}
 
 	get expandedHeight() {
-		const tile = this.element.querySelector(".cds--tile");
+		const tile = this.element.nativeElement.querySelector(".cds--tile");
 		const tilePadding
 			= parseInt(getComputedStyle(tile).paddingBottom, 10) + parseInt(getComputedStyle(tile).paddingTop, 10);
 		const expandedHeight = this.tileMaxHeight + tilePadding;
@@ -276,9 +314,9 @@ export class ExpandableTile implements AfterContentInit {
 
 	updateMaxHeight() {
 		if (this.expanded) {
-			this.tileMaxHeight = this.element.querySelector(".cds--tile-content").getBoundingClientRect().height;
+			this.tileMaxHeight = this.tileContainer.nativeElement.getBoundingClientRect().height;
 		} else {
-			this.tileMaxHeight = this.element.querySelector(".cds--tile-content__above-the-fold").getBoundingClientRect().height;
+			this.tileMaxHeight = this.element.nativeElement.querySelector(".cds--tile-content__above-the-fold").getBoundingClientRect().height;
 		}
 	}
 

package/docs/documentation/js/menu-wc.js

@@ -1348,13 +1348,13 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                 <a href="modules/TilesModule.html" data-type="entity-link" >TilesModule</a>
                                     <li class="chapter inner">
                                         <div class="simple menu-toggler" data-bs-toggle="collapse" ${ isNormalMode ?
-                                            'data-bs-target="#components-links-module-TilesModule-9b5159f1be2d4f3d9e70a3c922b614e93039264d551c08fa2d7b007b19deb0bcbefa4ba6e9128ae3024316a6f57cb2afd6635691e9352fe5211d1eb6280d8b80"' : 'data-bs-target="#xs-components-links-module-TilesModule-9b5159f1be2d4f3d9e70a3c922b614e93039264d551c08fa2d7b007b19deb0bcbefa4ba6e9128ae3024316a6f57cb2afd6635691e9352fe5211d1eb6280d8b80"' }>
+                                            'data-bs-target="#components-links-module-TilesModule-be7553ce1e8f3f4af7b5c76a38e25875159e6018a7cb3ef453ce2d303ded9093c80f01a10b61e0946cf14dbf5bfda4d2001a22b54f258517e46946f2058954f6"' : 'data-bs-target="#xs-components-links-module-TilesModule-be7553ce1e8f3f4af7b5c76a38e25875159e6018a7cb3ef453ce2d303ded9093c80f01a10b61e0946cf14dbf5bfda4d2001a22b54f258517e46946f2058954f6"' }>
                                             <span class="icon ion-md-cog"></span>
                                             <span>Components</span>
                                             <span class="icon ion-ios-arrow-down"></span>
                                         </div>
-                                        <ul class="links collapse" ${ isNormalMode ? 'id="components-links-module-TilesModule-9b5159f1be2d4f3d9e70a3c922b614e93039264d551c08fa2d7b007b19deb0bcbefa4ba6e9128ae3024316a6f57cb2afd6635691e9352fe5211d1eb6280d8b80"' :
-                                            'id="xs-components-links-module-TilesModule-9b5159f1be2d4f3d9e70a3c922b614e93039264d551c08fa2d7b007b19deb0bcbefa4ba6e9128ae3024316a6f57cb2afd6635691e9352fe5211d1eb6280d8b80"' }>
+                                        <ul class="links collapse" ${ isNormalMode ? 'id="components-links-module-TilesModule-be7553ce1e8f3f4af7b5c76a38e25875159e6018a7cb3ef453ce2d303ded9093c80f01a10b61e0946cf14dbf5bfda4d2001a22b54f258517e46946f2058954f6"' :
+                                            'id="xs-components-links-module-TilesModule-be7553ce1e8f3f4af7b5c76a38e25875159e6018a7cb3ef453ce2d303ded9093c80f01a10b61e0946cf14dbf5bfda4d2001a22b54f258517e46946f2058954f6"' }>
                                             <li class="link">
                                                 <a href="components/ClickableTile.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules" >ClickableTile</a>
                                             </li>
@@ -1372,6 +1372,23 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                             </li>
                                         </ul>
                                     </li>
+                                <li class="chapter inner">
+                                    <div class="simple menu-toggler" data-bs-toggle="collapse" ${ isNormalMode ?
+                                        'data-bs-target="#directives-links-module-TilesModule-be7553ce1e8f3f4af7b5c76a38e25875159e6018a7cb3ef453ce2d303ded9093c80f01a10b61e0946cf14dbf5bfda4d2001a22b54f258517e46946f2058954f6"' : 'data-bs-target="#xs-directives-links-module-TilesModule-be7553ce1e8f3f4af7b5c76a38e25875159e6018a7cb3ef453ce2d303ded9093c80f01a10b61e0946cf14dbf5bfda4d2001a22b54f258517e46946f2058954f6"' }>
+                                        <span class="icon ion-md-code-working"></span>
+                                        <span>Directives</span>
+                                        <span class="icon ion-ios-arrow-down"></span>
+                                    </div>
+                                    <ul class="links collapse" ${ isNormalMode ? 'id="directives-links-module-TilesModule-be7553ce1e8f3f4af7b5c76a38e25875159e6018a7cb3ef453ce2d303ded9093c80f01a10b61e0946cf14dbf5bfda4d2001a22b54f258517e46946f2058954f6"' :
+                                        'id="xs-directives-links-module-TilesModule-be7553ce1e8f3f4af7b5c76a38e25875159e6018a7cb3ef453ce2d303ded9093c80f01a10b61e0946cf14dbf5bfda4d2001a22b54f258517e46946f2058954f6"' }>
+                                        <li class="link">
+                                            <a href="directives/ExpandableTileAboveFoldDirective.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules" >ExpandableTileAboveFoldDirective</a>
+                                        </li>
+                                        <li class="link">
+                                            <a href="directives/ExpandableTileBelowFoldDirective.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules" >ExpandableTileBelowFoldDirective</a>
+                                        </li>
+                                    </ul>
+                                </li>
                             </li>
                             <li class="link">
                                 <a href="modules/TimePickerModule.html" data-type="entity-link" >TimePickerModule</a>