();
@@ -268,6 +269,10 @@ export class CardViewComponent implements OnInit, OnDestroy {
this.showNoneOption = !this.showNoneOption;
}
+ toggleLabelForChips() {
+ this.showLabelForChips = !this.showLabelForChips;
+ }
+
reset() {
this.isEditable = true;
this.createCard();
diff --git a/lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.spec.ts b/lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.spec.ts
index db05e41a57..bb001e0e9c 100644
--- a/lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.spec.ts
+++ b/lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.spec.ts
@@ -115,6 +115,7 @@ describe('CardViewItemDispatcherComponent', () => {
const expectedCustomInput = 1;
const expectedDisplayNoneOption = false;
const expectedDisplayClearAction = false;
+ const expectedDisplayLabel = true;
component.ngOnChanges({
editable: new SimpleChange(true, expectedEditable, false),
@@ -122,7 +123,8 @@ describe('CardViewItemDispatcherComponent', () => {
property: new SimpleChange(null, expectedProperty, false),
customInput: new SimpleChange(0, expectedCustomInput, false),
displayNoneOption: new SimpleChange(true, expectedDisplayNoneOption, false),
- displayClearAction: new SimpleChange(true, expectedDisplayClearAction, false)
+ displayClearAction: new SimpleChange(true, expectedDisplayClearAction, false),
+ displayLabelForChips: new SimpleChange(false, expectedDisplayLabel, false)
});
const shinyCustomElementItemComponent = fixture.debugElement.query(By.css('whatever-you-want-to-have')).componentInstance;
@@ -132,6 +134,7 @@ describe('CardViewItemDispatcherComponent', () => {
expect(shinyCustomElementItemComponent.customInput).toBe(expectedCustomInput);
expect(shinyCustomElementItemComponent.displayNoneOption).toBe(expectedDisplayNoneOption);
expect(shinyCustomElementItemComponent.displayClearAction).toBe(expectedDisplayClearAction);
+ expect(shinyCustomElementItemComponent.displayLabelForChips).toBe(expectedDisplayLabel);
});
});
diff --git a/lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.ts b/lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.ts
index 761cc77f3a..138b7c098a 100644
--- a/lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.ts
+++ b/lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.ts
@@ -57,6 +57,9 @@ export class CardViewItemDispatcherComponent implements OnChanges {
@Input()
multiValueSeparator: string = DEFAULT_SEPARATOR;
+ @Input()
+ displayLabelForChips: boolean = false;
+
@ViewChild(CardViewContentProxyDirective, { static: true })
private content: CardViewContentProxyDirective;
@@ -110,6 +113,7 @@ export class CardViewItemDispatcherComponent implements OnChanges {
this.componentReference.instance.copyToClipboardAction = this.copyToClipboardAction;
this.componentReference.instance.useChipsForMultiValueProperty = this.useChipsForMultiValueProperty;
this.componentReference.instance.multiValueSeparator = this.multiValueSeparator;
+ this.componentReference.instance.displayLabelForChips = this.displayLabelForChips;
}
private proxy(methodName, ...args) {
diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
index 46ed9ef3b4..15912a2819 100644
--- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
+++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
@@ -54,6 +54,9 @@
+
+ {{ property.label | translate }}
+
{
expect(value).toBe('item1,item2,item3');
expect(valueChips).toBeNull();
});
+
+ it('should display the label for multi-valued chips if displayLabelForChips is true', async () => {
+ const cardViewTextItemObject = {
+ label: 'Text label',
+ value: ['item1', 'item2', 'item3'],
+ key: 'textkey',
+ default: ['FAKE-DEFAULT-KEY'],
+ editable: true,
+ multivalued: true
+ };
+
+ component.property = new CardViewTextItemModel(cardViewTextItemObject);
+ component.displayLabelForChips = true;
+ component.ngOnChanges({ property: new SimpleChange(null, null, true) });
+
+ fixture.detectChanges();
+ await fixture.whenStable();
+
+ const labelElement = fixture.debugElement.query(By.css(`.adf-property-label`));
+ expect(labelElement).not.toBeNull();
+ expect(labelElement.nativeElement.innerText).toBe('Text label');
+ });
+
+ it('should NOT display the label for multi-valued chips if displayLabelForChips is false', async () => {
+ const cardViewTextItemObject = {
+ label: 'Text label',
+ value: ['item1', 'item2', 'item3'],
+ key: 'textkey',
+ default: ['FAKE-DEFAULT-KEY'],
+ editable: true,
+ multivalued: true
+ };
+
+ component.property = new CardViewTextItemModel(cardViewTextItemObject);
+ component.displayLabelForChips = false;
+ component.ngOnChanges({ property: new SimpleChange(null, null, true) });
+
+ fixture.detectChanges();
+ await fixture.whenStable();
+
+ const labelElement = fixture.debugElement.query(By.css(`.adf-property-label`));
+ expect(labelElement).toBeNull();
+ });
});
describe('clickable', () => {
diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.stories.ts b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.stories.ts
index 45516e954c..a9348e9114 100644
--- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.stories.ts
+++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.stories.ts
@@ -75,6 +75,15 @@ export default {
type: { summary: 'string' },
defaultValue: { summary: ', ' }
}
+ },
+ displayLabelForChips: {
+ control: 'boolean',
+ description: 'Display label for chips property',
+ defaultValue: false,
+ table: {
+ type: { summary: 'boolean' },
+ defaultValue: { summary: false }
+ }
}
}
} as Meta;
@@ -110,7 +119,8 @@ chipsCardViewTextItem.args = {
multivalued: true,
icon: 'icon',
editable: true
- })
+ }),
+ displayLabelForChips: false
};
chipsCardViewTextItem.parameters = { layout: 'centered' };
@@ -143,3 +153,19 @@ defaultCardViewTextItem.args = {
})
};
defaultCardViewTextItem.parameters = { layout: 'centered' };
+
+export const displayLabelForChipsCardTextItem = template.bind({});
+displayLabelForChipsCardTextItem.args = {
+ property: new CardViewTextItemModel({
+ label: 'CardView Text Item - Multi-Valued Chips template',
+ value: ['Chip 1', 'Chip 2', 'Chip 3'],
+ key: 'multivalued',
+ default: 'default value',
+ multiline: true,
+ multivalued: true,
+ icon: 'icon',
+ editable: true
+ }),
+ displayLabelForChips: false
+};
+displayLabelForChipsCardTextItem.parameters = { layout: 'centered' };
diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts
index 11e53b54b3..3269731808 100644
--- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts
+++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts
@@ -58,6 +58,9 @@ export class CardViewTextItemComponent extends BaseCardView
+ [multiValueSeparator]="multiValueSeparator"
+ [displayLabelForChips]="displayLabelForChips">
diff --git a/lib/core/src/lib/card-view/components/card-view/card-view.component.spec.ts b/lib/core/src/lib/card-view/components/card-view/card-view.component.spec.ts
index ac69d0dd1f..5ec56e7999 100644
--- a/lib/core/src/lib/card-view/components/card-view/card-view.component.spec.ts
+++ b/lib/core/src/lib/card-view/components/card-view/card-view.component.spec.ts
@@ -25,19 +25,19 @@ import { TranslateModule } from '@ngx-translate/core';
import { CardViewSelectItemModel } from '../../models/card-view-selectitem.model';
import { of } from 'rxjs';
import { CardViewSelectItemOption } from '../../interfaces/card-view-selectitem-properties.interface';
+import { CardViewItem } from '../../interfaces/card-view-item.interface';
+import { CardViewItemDispatcherComponent } from '../card-view-item-dispatcher/card-view-item-dispatcher.component';
describe('CardViewComponent', () => {
let fixture: ComponentFixture;
let component: CardViewComponent;
- beforeEach(() => {
- TestBed.configureTestingModule({
- imports: [
- TranslateModule.forRoot(),
- CoreTestingModule
- ]
- });
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [TranslateModule.forRoot(), CoreTestingModule]
+ }).compileComponents();
+
fixture = TestBed.createComponent(CardViewComponent);
component = fixture.componentInstance;
});
@@ -226,4 +226,30 @@ describe('CardViewComponent', () => {
expect(currentOptions[0].innerHTML).toContain(options[0].label);
expect(currentOptions[1].innerHTML).toContain(options[1].label);
});
+
+ it('should show/hide the label for multivalued chip property based on displayLabelForChips input', () => {
+ const multiValueProperty: CardViewItem = new CardViewTextItemModel({
+ label: 'My Multivalue Label',
+ value: ['Value 1', 'Value 2', 'Value 3'],
+ key: 'multi-key'
+ });
+
+ component.properties = [multiValueProperty];
+ fixture.detectChanges();
+
+ const cardViewItemDispatcherComponent = getCardViewItemDispatcherComponent();
+
+ expect(cardViewItemDispatcherComponent.displayLabelForChips).toBe(false);
+
+ component.displayLabelForChips = true;
+ fixture.detectChanges();
+
+ expect(cardViewItemDispatcherComponent.displayLabelForChips).toBe(true);
+ });
+
+ function getCardViewItemDispatcherComponent() {
+ const cardViewItemDispatcherDebugElement = fixture.debugElement.query(By.directive(CardViewItemDispatcherComponent));
+ return cardViewItemDispatcherDebugElement.componentInstance as CardViewItemDispatcherComponent;
+ }
+
});
diff --git a/lib/core/src/lib/card-view/components/card-view/card-view.component.stories.ts b/lib/core/src/lib/card-view/components/card-view/card-view.component.stories.ts
index 7eb6275253..efa9052c17 100644
--- a/lib/core/src/lib/card-view/components/card-view/card-view.component.stories.ts
+++ b/lib/core/src/lib/card-view/components/card-view/card-view.component.stories.ts
@@ -57,6 +57,10 @@ export default {
multiValueSeparator: {
control: 'text',
defaultValue: ', '
+ },
+ displayLabelForChips: {
+ control: 'boolean',
+ defaultValue: false
}
}
} as Meta;
diff --git a/lib/core/src/lib/card-view/components/card-view/card-view.component.ts b/lib/core/src/lib/card-view/components/card-view/card-view.component.ts
index a57fcae03d..2c3f311e2a 100644
--- a/lib/core/src/lib/card-view/components/card-view/card-view.component.ts
+++ b/lib/core/src/lib/card-view/components/card-view/card-view.component.ts
@@ -57,4 +57,8 @@ export class CardViewComponent {
/** String separator between multi-value property items. */
@Input()
multiValueSeparator: string = DEFAULT_SEPARATOR;
+
+ /** Toggles whether or not to show label for multivalued chip property. */
+ @Input()
+ displayLabelForChips: boolean = false;
}