-
+ @switch (fileItem.state) {
+ @case ('edit') {
+
+ @if (isInvalidText) {
+
+ }
+
+
+ }
+ @case ('upload') {
+
+
+
+
+
+ }
+ @case ('complete') {
+
+
+
+ }
+ }
+ @if (fileItem.invalid) {
+
-
-
-
-
-
+ }
`
})
export class FileComponent implements OnDestroy {
diff --git a/src/file-uploader/stories/drag-drop.component.ts b/src/file-uploader/stories/drag-drop.component.ts
index 952498d3fe..07add6779f 100644
--- a/src/file-uploader/stories/drag-drop.component.ts
+++ b/src/file-uploader/stories/drag-drop.component.ts
@@ -21,13 +21,14 @@ import * as fileType from "file-type";
(filesChange)="onDropped($event)"
[disabled]="disabled">
-
+ @if (files && files.size > 0) {
+
+ }
`
})
export class DragAndDropStory {
diff --git a/src/file-uploader/stories/uploader-form.component.ts b/src/file-uploader/stories/uploader-form.component.ts
index e6f9e5b9dd..3e89474611 100644
--- a/src/file-uploader/stories/uploader-form.component.ts
+++ b/src/file-uploader/stories/uploader-form.component.ts
@@ -17,13 +17,14 @@ import { FileItem } from "../";
[(ngModel)]="model"
[disabled]="disabled">
-
+ @if (model && model.size > 0) {
+
+ }
`
})
diff --git a/src/file-uploader/stories/uploader-reactive-form.component.ts b/src/file-uploader/stories/uploader-reactive-form.component.ts
index 918debf866..941a95d78f 100644
--- a/src/file-uploader/stories/uploader-reactive-form.component.ts
+++ b/src/file-uploader/stories/uploader-reactive-form.component.ts
@@ -29,13 +29,14 @@ import {
[disabled]="disabled"
formControlName="files">
-
+ @if (formGroup.get('files').value && formGroup.get('files').value.size > 0) {
+
+ }
`
})
diff --git a/src/file-uploader/stories/uploader.component.ts b/src/file-uploader/stories/uploader.component.ts
index 3571532ae1..dfdb2e8a15 100644
--- a/src/file-uploader/stories/uploader.component.ts
+++ b/src/file-uploader/stories/uploader.component.ts
@@ -18,9 +18,11 @@ import { FileItem } from "../";
[fileItemSize]="fileItemSize"
[disabled]="disabled">
-
+ @if (files && files.size > 0) {
+
+ }
`
})
export class FileUploaderStory {
diff --git a/src/icon/stories/many-icons-demo.component.ts b/src/icon/stories/many-icons-demo.component.ts
index 5bcbc15d90..5923dcbf03 100644
--- a/src/icon/stories/many-icons-demo.component.ts
+++ b/src/icon/stories/many-icons-demo.component.ts
@@ -7,13 +7,17 @@ import { IconService } from "../";
selector: "app-demo-many-icon",
template: `
-
- |
-
- name: {{icon.name}}
- size: {{icon.size}}
- |
-
+ @for (group of groupedIcons; track group) {
+
+ @for (icon of group; track icon) {
+ |
+
+ name: {{icon.name}}
+ size: {{icon.size}}
+ |
+ }
+
+ }
`,
styles: [
diff --git a/src/inline-loading/inline-loading.component.ts b/src/inline-loading/inline-loading.component.ts
index d9f19f36e2..580598dc24 100644
--- a/src/inline-loading/inline-loading.component.ts
+++ b/src/inline-loading/inline-loading.component.ts
@@ -31,37 +31,49 @@ export enum InlineLoadingState {
@Component({
selector: "cds-inline-loading, ibm-inline-loading",
template: `
-
-
-
+ @if (state !== InlineLoadingState.Hidden) {
+
+ @switch (state) {
+ @case (InlineLoadingState.Inactive || InlineLoadingState.Active) {
+
+
+
+ }
+ @case (InlineLoadingState.Finished) {
+
+ }
+ @case (InlineLoadingState.Error) {
+
+ }
+ }
-
-
-
-
{{loadingText}}
-
{{successText}}
-
{{errorText}}
+ }
+ @switch(state) {
+ @case(InlineLoadingState.Inactive || InlineLoadingState.Active) {
+
{{loadingText}}
+ }
+ @case(InlineLoadingState.Finished) {
+
{{successText}}
+ }
+ @case(InlineLoadingState.Error) {
+
{{errorText}}
+ }
+ }
`
})
export class InlineLoading {
diff --git a/src/input/label.component.ts b/src/input/label.component.ts
index b5f74d327e..fb684586eb 100644
--- a/src/input/label.component.ts
+++ b/src/input/label.component.ts
@@ -37,15 +37,16 @@ import { PasswordInput } from "./password.directive";
selector: "cds-label, ibm-label",
template: `
-
+
-
+
-
-
+
+ @switch (type) {
+ @case ('TextArea') {
-
-
+ }
+ @case ('TextInput') {
-
-
+ }
+ @case ('PasswordInput') {
+
-
-
-
-
-
+ }
+ @default {
+
+ }
+ }
-
-
-
-
-
- {{helperText}}
-
-
-
- {{invalidText}}
-
-
-
- {{warnText}}
-
+ @if (invalid) {
+
+ } @else if (warn) {
+
+ }
+
+ @if (invalid) {
+
+ @if (isTemplate(invalidText)) {
+
+ } @else {
+ {{invalidText}}
+ }
+
+ } @else if (warn) {
+
+ @if (isTemplate(warnText)) {
+
+ } @else {
+ {{warnText}}
+ }
+
+ } @else if(helperText && !skeleton) {
+
+ @if (isTemplate(helperText)) {
+
+ } @else {
+ {{helperText}}
+ }
+
+ }
`
})
diff --git a/src/input/password-input-label.component.ts b/src/input/password-input-label.component.ts
index ff26b75128..cf2843e9e3 100644
--- a/src/input/password-input-label.component.ts
+++ b/src/input/password-input-label.component.ts
@@ -31,103 +31,125 @@ import { BaseIconButton } from "carbon-components-angular/button";
@Component({
selector: "cds-password-label, ibm-password-label",
template: `
-
+ @if (skeleton) {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ invalidText }}
-
-
-
- {{ warnText }}
-
-
-
-
-
+ } @else {
+
+
- {{ helperText }}
-
-
-
-
- {{ invalidText }}
-
-
+ class="cds--text-input__field-wrapper"
+ [ngClass]="{
+ 'cds--text-input__field-wrapper--warning': warn
+ }"
+ [attr.data-invalid]="invalid ? true : null"
+ #wrapper>
+ @if (invalid) {
+
+ } @else if (warn) {
+
+ }
+
+
+
+
+
+
-
-
-
- `
+ @if (!fluid) {
+ @if (invalid) {
+
+ @if (isTemplate(invalidText)) {
+
+ } @else {
+ {{ invalidText }}
+ }
+
+ } @else if (warn) {
+
+ @if (isTemplate(warnText)) {
+
+ } @else {
+ {{ warnText }}
+ }
+
+ } @else if(helperText && !skeleton) {
+
+ @if (isTemplate(helperText)) {
+
+ } @else {
+ {{ helperText }}
+ }
+
+ }
+ }
+
+ }
+ `
})
/**
* Represents the Password Input Label Component.
diff --git a/src/input/text-input-label.component.ts b/src/input/text-input-label.component.ts
index 6d1c761641..0c43bd358a 100644
--- a/src/input/text-input-label.component.ts
+++ b/src/input/text-input-label.component.ts
@@ -29,78 +29,101 @@ import {
@Component({
selector: "cds-text-label, ibm-text-label",
template: `
-
+ @if (skeleton) {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{invalidText}}
-
-
-
- {{warnText}}
-
-
-
-
-
+ 'cds--label--disabled': disabled
+ }">
+ @if (labelTemplate) {
+
+ } @else {
+
+ }
+
+
- {{helperText}}
-
-
-
-
- {{warnText}}
-
-
-
+ @if (!fluid) {
+ @if (invalid) {
+
+ @if (isTemplate(invalidText)) {
+
+ } @else {
+ {{ invalidText }}
+ }
+
+ } @else if (warn) {
+
+ @if (isTemplate(warnText)) {
+
+ } @else {
+ {{ warnText }}
+ }
+
+ } @else if(helperText) {
+
+ @if (isTemplate(helperText)) {
+
+ } @else {
+ {{ helperText }}
+ }
+
+ }
+ }
+ }
`
})
export class TextInputLabelComponent implements AfterViewInit, AfterContentInit {
diff --git a/src/input/textarea-label.component.ts b/src/input/textarea-label.component.ts
index 3221fe07c3..470e2b4fbc 100644
--- a/src/input/textarea-label.component.ts
+++ b/src/input/textarea-label.component.ts
@@ -31,11 +31,10 @@ import { TextArea } from "./text-area.directive";
@Component({
selector: "cds-textarea-label, ibm-textarea-label",
template: `
-
+ @if (skeleton) {
-
-
+ } @else {
-
-
-
-
-
-
-
-
-
-
- {{invalidText}}
-
+ @if(!fluid) {
+ @if (invalid) {
-
-
- {{warnText}}
-
+ } @else if (warn) {
-
-
+ }
+ }
+ @if (textAreaTemplate) {
+
+ } @else {
+
+ }
+
+ @if (fluid) {
+
+ @if (invalid) {
+
+ @if (isTemplate(invalidText)) {
+
+ } @else {
+ {{ invalidText }}
+ }
+
+
+ } @else if (warn) {
+
+ @if (isTemplate(warnText)) {
+
+ } @else {
+ {{ warnText }}
+ }
+
+
+ }
+ }
- {{helperText}}
-
-
-
- {{invalidText}}
-
-
-
- {{warnText}}
-
-
-
-
+ @if (!fluid) {
+ @if (invalid) {
+
+ @if (isTemplate(invalidText)) {
+
+ } @else {
+ {{ invalidText }}
+ }
+
+ } @else if (warn) {
+
+ @if (isTemplate(warnText)) {
+
+ } @else {
+ {{ warnText }}
+ }
+
+ } @else if(helperText) {
+
+ @if (isTemplate(helperText)) {
+
+ } @else {
+ {{ helperText }}
+ }
+
+ }
+ }
+ }
`
})
export class TextareaLabelComponent implements AfterViewInit {
diff --git a/src/layer/layer.spec.ts b/src/layer/layer.spec.ts
index aedd9ef449..51c7cac64e 100644
--- a/src/layer/layer.spec.ts
+++ b/src/layer/layer.spec.ts
@@ -51,7 +51,6 @@ describe("Layer", () => {
it("should have additional user provided classes", () => {
let fixture: ComponentFixture = TestBed.createComponent(TestNestedLayerComponent);
- console.log(fixture.debugElement);
fixture.detectChanges();
const directiveEl = fixture.debugElement.query(By.directive(LayerDirective)).nativeElement;
diff --git a/src/modal/alert-modal.component.ts b/src/modal/alert-modal.component.ts
index c11ad3b40b..8a43d03bbf 100644
--- a/src/modal/alert-modal.component.ts
+++ b/src/modal/alert-modal.component.ts
@@ -62,17 +62,19 @@ import { BaseModal } from "./base-modal.class";
-
-
-
-
-
+ @if (buttons.length > 0) {
+
+ @for (button of buttons; track button.id; let i = $index) {
+
+ }
+
+ }
`
})
diff --git a/src/modal/modal-footer.component.ts b/src/modal/modal-footer.component.ts
index 88ab6b2f28..909508d4b9 100644
--- a/src/modal/modal-footer.component.ts
+++ b/src/modal/modal-footer.component.ts
@@ -4,7 +4,7 @@ import { Component } from "@angular/core";
selector: "cds-modal-footer, ibm-modal-footer",
template: `
`
})
diff --git a/src/modal/modal-header.component.ts b/src/modal/modal-header.component.ts
index bf035b2648..6944dadf55 100644
--- a/src/modal/modal-header.component.ts
+++ b/src/modal/modal-header.component.ts
@@ -21,18 +21,19 @@ import { I18n } from "carbon-components-angular/i18n";
selector: "cds-modal-header, ibm-modal-header",
template: `
diff --git a/src/modal/modal.component.ts b/src/modal/modal.component.ts
index 8a8249b6f8..b2c926525b 100644
--- a/src/modal/modal.component.ts
+++ b/src/modal/modal.component.ts
@@ -95,7 +95,7 @@ export class ModalDemo {
style="z-index:1;"
[attr.aria-label]="ariaLabel"
#modal>
-
+
`
diff --git a/src/modal/overlay.component.ts b/src/modal/overlay.component.ts
index 5aadda9258..b48ad8ed31 100644
--- a/src/modal/overlay.component.ts
+++ b/src/modal/overlay.component.ts
@@ -25,7 +25,7 @@ import {
}"
(click)="overlayClick($event)"
#overlay>
-
+
`
})
diff --git a/src/notification/actionable-notification.component.ts b/src/notification/actionable-notification.component.ts
index 804b63a73a..d1a2364d06 100644
--- a/src/notification/actionable-notification.component.ts
+++ b/src/notification/actionable-notification.component.ts
@@ -19,48 +19,53 @@ import { BaseNotification } from "./base-notification.component";
selector: "cds-actionable-notification, ibm-actionable-notification",
template: `
-
+ @if (notificationObj.type) {
+
+ }
-
-
-
+ @if (!notificationObj.template) {
+
+
+
+ @for (link of notificationObj.links; track link.href) {
+
{{link.text}}
+ }
+
+ }
+
-
+ @if (!notificationObj.actionsTemplate) {
+ @for (action of notificationObj.actions; track action) {
+
+ }
+ }
+
+ @if (!isCloseHidden) {
-
-
-
+ }
`
})
export class ActionableNotification extends BaseNotification {
diff --git a/src/notification/notification.component.ts b/src/notification/notification.component.ts
index 9c7ed7f3c7..80907246e6 100644
--- a/src/notification/notification.component.ts
+++ b/src/notification/notification.component.ts
@@ -19,28 +19,32 @@ import { BaseNotification } from "./base-notification.component";
selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification",
template: `
-
+ @if (notificationObj.type) {
+
+ }
-
-
-
-
-
+ @if (!notificationObj.template) {
+
+
+
+
+ }
+
-
+ @if (!isCloseHidden) {
+
+ }
`
})
export class Notification extends BaseNotification {
diff --git a/src/notification/toast.component.ts b/src/notification/toast.component.ts
index 88c92b0b0d..fb1e7beacd 100644
--- a/src/notification/toast.component.ts
+++ b/src/notification/toast.component.ts
@@ -19,28 +19,32 @@ import { BaseNotification } from "./base-notification.component";
@Component({
selector: "cds-toast, ibm-toast",
template: `
-
+ @if (notificationObj.type) {
+
+ }
-
-
-
-
-
-
+ @if (!notificationObj.template) {
+
+
+
+
+
+ }
+
-
+ @if (!isCloseHidden) {
+
+ }
`
})
export class Toast extends BaseNotification implements OnInit {
diff --git a/src/number-input/number.component.ts b/src/number-input/number.component.ts
index 8f6642eb06..125e5f6896 100644
--- a/src/number-input/number.component.ts
+++ b/src/number-input/number.component.ts
@@ -38,7 +38,9 @@ export class NumberChange {
@Component({
selector: "cds-number, ibm-number",
template: `
-
+ @if (skeleton && label) {
+
+ }
-
+ @if (!skeleton && label) {
+
+ }
-
-
-
-
-
-
- {{helperText}}
-
-
-
- {{invalidText}}
-
-
-
+ @if (fluid) {
+
+ }
+ @if (invalid) {
+
+ @if (isTemplate(invalidText)) {
+
+ } @else {
+ {{invalidText}}
+ }
+
+ } @else if (warn) {
+
+ @if (isTemplate(warnText)) {
+
+ } @else {
+ {{warnText}}
+ }
+
+ } @else if(helperText && !fluid) {
+
+ @if (isTemplate(helperText)) {
+
+ } @else {
+ {{helperText}}
+ }
+
+ }
`,
providers: [
diff --git a/src/pagination/pagination-nav/pagination-nav.component.ts b/src/pagination/pagination-nav/pagination-nav.component.ts
index 7fc4f2814c..fc0d658b74 100644
--- a/src/pagination/pagination-nav/pagination-nav.component.ts
+++ b/src/pagination/pagination-nav/pagination-nav.component.ts
@@ -7,7 +7,7 @@ import {
HostBinding
} from "@angular/core";
-import { I18n, Overridable } from "carbon-components-angular/i18n";
+import { I18n } from "carbon-components-angular/i18n";
import { ExperimentalService } from "carbon-components-angular/experimental";
import { merge } from "carbon-components-angular/utils";
import { range } from "carbon-components-angular/common";
@@ -63,36 +63,41 @@ export interface PaginationNavTranslations {
-
-
-
-
-
-
-
-
-
-
+ @if (this.numOfItemsToShow >= 5 || (this.numOfItemsToShow <= 4 && currentPage <= 1)) {
+
+
+ }
+ @if (frontCuts) {
+
+
+ }
+ @for (page of getPages(); track page) {
+
+
+ }
+ @if (backCuts) {
+
+
+ }
+ @if (totalDataLength > 1) {
+
+
+ }
-
+ @if (count === 1) {
+
+ } @else if (count > 1) {
+
+ }
`
})
export class PaginationOverflow {
@@ -58,7 +63,8 @@ export class PaginationOverflow {
@Output() change = new EventEmitter
();
get countAsArray() {
- return [...Array(this.count)];
+ const rangeArray = range((this.count >= 0 ? this.count + 1 : 0), 1);
+ return rangeArray;
}
constructor(protected i18n: I18n) {}
diff --git a/src/pagination/pagination.component.spec.ts b/src/pagination/pagination.component.spec.ts
index c9f9c07645..244a86ea27 100644
--- a/src/pagination/pagination.component.spec.ts
+++ b/src/pagination/pagination.component.spec.ts
@@ -163,16 +163,16 @@ describe("Pagination", () => {
model.totalDataLength = 9;
wrapper.model = model;
fixture.detectChanges();
- expect(wrapper.pageOptions).toEqual(Array(2));
+ expect(wrapper.pageOptions.length).toEqual(2);
model.totalDataLength = 2;
fixture.detectChanges();
- expect(wrapper.pageOptions).toEqual(Array(1));
+ expect(wrapper.pageOptions.length).toEqual(1);
model.totalDataLength = 20;
fixture.detectChanges();
- expect(wrapper.pageOptions).toEqual(Array(4));
+ expect(wrapper.pageOptions.length).toEqual(4);
model.totalDataLength = 0;
fixture.detectChanges();
- expect(wrapper.pageOptions).toEqual(Array(1));
+ expect(wrapper.pageOptions.length).toEqual(1);
});
it("should replace the select with a number input when the pagination threshold is reached", () => {
diff --git a/src/pagination/pagination.component.ts b/src/pagination/pagination.component.ts
index 4d16fbe4c2..ac6f2b969d 100644
--- a/src/pagination/pagination.component.ts
+++ b/src/pagination/pagination.component.ts
@@ -6,9 +6,10 @@ import {
EventEmitter
} from "@angular/core";
-import { I18n, Overridable } from "carbon-components-angular/i18n";
+import { I18n } from "carbon-components-angular/i18n";
import { ExperimentalService } from "carbon-components-angular/experimental";
import { merge } from "carbon-components-angular/utils";
+import { range } from "carbon-components-angular/common";
export interface PaginationTranslations {
ITEMS_PER_PAGE: string;
@@ -51,143 +52,165 @@ export interface PaginationTranslations {
@Component({
selector: "cds-pagination, ibm-pagination",
template: `
-
diff --git a/src/patterns/forms/multi-step-form.stories.ts b/src/patterns/forms/multi-step-form.stories.ts
index 4a16a26488..ae6da09787 100644
--- a/src/patterns/forms/multi-step-form.stories.ts
+++ b/src/patterns/forms/multi-step-form.stories.ts
@@ -52,64 +52,66 @@ import {