diff --git a/projects/v3/src/app/components/description/description.component.html b/projects/v3/src/app/components/description/description.component.html
index cd8253c03..3358f9fcf 100644
--- a/projects/v3/src/app/components/description/description.component.html
+++ b/projects/v3/src/app/components/description/description.component.html
@@ -1,5 +1,5 @@
-
+
@@ -26,7 +26,7 @@
(keydown.space)="openShut(); $event.preventDefault()"
[attr.aria-expanded]="!isTruncating"
[attr.aria-controls]="name"
- [attr.aria-label]="isTruncating ? 'Show more content' : 'Show less content'"
+ [attr.aria-label]="isTruncating ? ('Show more of ' + (ariaLabel || 'content')) : ('Show less of ' + (ariaLabel || 'content'))"
i18n-aria-label
class="ion-focusable">
diff --git a/projects/v3/src/app/components/description/description.component.ts b/projects/v3/src/app/components/description/description.component.ts
index ce5be61fe..9f9cfe6d4 100644
--- a/projects/v3/src/app/components/description/description.component.ts
+++ b/projects/v3/src/app/components/description/description.component.ts
@@ -1,37 +1,26 @@
-import { Component, Input, ViewChild, ElementRef, AfterViewInit, OnChanges, SimpleChange, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
+import { Component, Input, ViewChild, ElementRef, AfterViewInit, OnChanges, SimpleChanges, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
import { BrowserStorageService } from '@v3/services/storage.service';
@Component({
selector: 'app-description',
templateUrl: 'description.component.html',
styleUrls: ['./description.component.scss'],
- encapsulation: ViewEncapsulation.ShadowDom,
- /*animations: [
- trigger('truncation', [
- state('show', style({
- 'max-height': '1000px !important',
- })),
- state('hide', style({
- 'max-height': '90px !important',
- })),
- transition('* <=> *', [
- animate('0.5s ease-in-out')
- ])
- ]),
- ]*/
+ encapsulation: ViewEncapsulation.None,
})
-export class DescriptionComponent implements OnChanges {
+export class DescriptionComponent implements OnChanges, AfterViewInit {
heightLimit = 145; // more accurately adjusted
isTruncating: boolean;
heightExceeded: boolean;
elementHeight: number;
hasBeenTruncated: boolean; // prevent onChange replace the collapsed content
- @Input() name; // unique identity of parent element
- @Input() content;
- @Input() isInPopup;
+ @Input() name: string; // unique identity of parent element
+ @Input() content: SafeHtml;
+ @Input() isInPopup: boolean;
@Input() nonCollapsible?: boolean;
- @Output() hasExpanded? = new EventEmitter();
+ @Input() ariaLabel?: string;
+ @Output() hasExpanded? = new EventEmitter();
@ViewChild('description') descriptionRef: ElementRef;
constructor(
@@ -40,43 +29,40 @@ export class DescriptionComponent implements OnChanges {
this.hasBeenTruncated = false;
}
- ngOnChanges(changes: { [propKey: string]: SimpleChange}) {
- // reset to default
- if (this.hasBeenTruncated === false) {
+ ngOnChanges(changes: SimpleChanges) {
+ if (changes.content && !changes.content.firstChange) {
+ this.hasBeenTruncated = false;
this.isTruncating = false;
this.heightExceeded = false;
+ this.calculateHeight();
}
+ }
- this.content = changes.content.currentValue;
+ ngAfterViewInit() {
this.calculateHeight();
}
calculateHeight(): void {
- if (this.nonCollapsible === true) {
+ if (this.nonCollapsible === true || !this.storage.getUser().truncateDescription) {
return;
}
- if (!this.storage.getUser().truncateDescription) {
- return;
- }
- setTimeout(
- () => {
+ setTimeout(() => {
+ if (this.descriptionRef?.nativeElement) {
this.elementHeight = this.descriptionRef.nativeElement.clientHeight;
this.heightExceeded = this.elementHeight >= this.heightLimit;
- if (this.heightExceeded) {
+ if (this.heightExceeded && !this.hasBeenTruncated) {
this.isTruncating = true;
this.hasBeenTruncated = true;
}
- },
- 700
- );
+ }
+ }, 300); // Reduced timeout
}
openShut(): void {
this.isTruncating = !this.isTruncating;
this.hasExpanded.emit(!this.isTruncating);
- return;
}
}
diff --git a/projects/v3/src/app/components/multi-team-member-selector/multi-team-member-selector.component.html b/projects/v3/src/app/components/multi-team-member-selector/multi-team-member-selector.component.html
index a890deb84..6b1f9bda7 100644
--- a/projects/v3/src/app/components/multi-team-member-selector/multi-team-member-selector.component.html
+++ b/projects/v3/src/app/components/multi-team-member-selector/multi-team-member-selector.component.html
@@ -46,7 +46,7 @@
-
+
-