@pega/angular-sdk-overrides 0.23.1

package/lib/widget/feed-container/feed-container.component.html

@@ -0,0 +1,137 @@
+<div>
+  <div style="text-align: left">
+    <h3>Pulse</h3>
+
+    <div class="psdk-pulse-divider"></div>
+
+    <br />
+    <div class="psdk-pulse">
+      <div class="psdk-avatar-big">{{ this.currentUserInitials$ }}</div>
+      <mat-form-field class="psdk-full-width">
+        <textarea matInput rows="5" id="pulseMessage" placeholder="Start a conversation" type="text" (change)="messageChange($event)"></textarea>
+      </mat-form-field>
+    </div>
+  </div>
+</div>
+
+<mat-grid-list cols="2" rowHeight="6.25rem">
+  <mat-grid-tile> </mat-grid-tile>
+  <mat-grid-tile>
+    <button mat-raised-button color="primary" (click)="postClick()">Post</button>
+  </mat-grid-tile>
+</mat-grid-list>
+
+<div *ngFor="let pulseMessage of pulseMessages$; let odd = odd" style="text-align: left" [style.background-color]="odd ? 'white' : '#eeeeee'">
+  <div class="psdk-pulse-divider"></div>
+  <br />
+  <div class="psdk-pulse">
+    <div class="psdk-avatar-big">{{ pulseMessage.displayPostedByInitials }}</div>
+    <div class="psdk-pulse-message-group">
+      <div class="psdk-pulse-message-by">{{ pulseMessage.displayPostedBy }}</div>
+      <div class="psdk-pulse-message-time">{{ pulseMessage.displayPostedTime }}</div>
+    </div>
+  </div>
+  <div class="psdk-pulse-message-text">{{ pulseMessage.message }}</div>
+  <div class="psdk-pulse-message-actions">
+    <div class="psdk-pulse-message-action-group">
+      <button mat-button (click)="commentClick(pulseMessage.ID)">
+        <img class="psdk-comment-svg-icon" src="{{ svgComment$ }}" />
+        <label class="psdk-pulse-message-like-label"
+          >Comment <span *ngIf="pulseMessage?.replies.length > 0"> | {{ pulseMessage.replies.length }}</span></label
+        >
+      </button>
+    </div>
+    <div class="psdk-pulse-message-action-like">
+      <div *ngIf="pulseMessage?.likeCount; else notLiked">
+        <button *ngIf="pulseMessage?.likedByMe == 'true'" mat-button (click)="likeClick(pulseMessage.ID, pulseMessage.ID, true, 'top')">
+          <!-- <mat-icon class="psdk-icon-liked-by-me" svgIcon="thumb-up" mastListIcon ></mat-icon> -->
+          <img class="psdk-liked-by-me-svg-icon" src="{{ svgLikedByMe$ }}" />
+          <label class="psdk-pulse-message-like-label">Like | {{ pulseMessage.likeCount }}</label>
+        </button>
+        <button *ngIf="pulseMessage?.likedByMe != 'true'" mat-button (click)="likeClick(pulseMessage.ID, pulseMessage.ID, false, 'top')">
+          <!-- <mat-icon class="psdk-icon" svgIcon="thumb-up-outline" mastListIcon ></mat-icon> -->
+          <img class="psdk-like-svg-icon" src="{{ svgLike$ }}" />
+          <label class="psdk-pulse-message-like-label">Like | {{ pulseMessage.likeCount }}</label>
+        </button>
+      </div>
+      <ng-template #notLiked>
+        <button mat-button (click)="likeClick(pulseMessage.ID, pulseMessage.ID, false, 'top')">
+          <!-- <mat-icon class="psdk-icon" svgIcon="thumb-up-outline" mastListIcon ></mat-icon> -->
+          <img class="psdk-like-svg-icon" src="{{ svgLike$ }}" />
+          <label class="psdk-pulse-message-like-label">Like</label>
+        </button>
+      </ng-template>
+    </div>
+  </div>
+
+  <div *ngIf="pulseMessage?.replies" class="psdk-pulse-reply">
+    <div *ngFor="let replyMessage of pulseMessage.replies" class="psdk-pulse-reply-align">
+      <div class="psdk-pulse-divider"></div>
+      <br />
+      <div class="psdk-pulse-reply-group">
+        <div class="psdk-avatar">{{ replyMessage.displayPostedByInitials }}</div>
+        <div class="psdk-pulse-reply-by">{{ replyMessage.displayPostedBy }}</div>
+        <div class="psdk-pulse-reply-message">{{ replyMessage.message }}</div>
+      </div>
+      <div class="psdk-pulse-reply-actions">
+        <button mat-button (click)="commentClick(pulseMessage.ID)" class="psdk-pulse-reply-comment">
+          <img class="psdk-comment-svg-icon" src="{{ svgComment$ }}" />
+        </button>
+        <div *ngIf="replyMessage?.likeCount; else replyNotLiked">
+          <button
+            *ngIf="replyMessage?.likedByMe === 'true'"
+            mat-button
+            (click)="likeClick(pulseMessage.ID, replyMessage.ID, true, 'reply')"
+            class="psdk-pulse-reply-like"
+          >
+            <img class="psdk-liked-by-me-svg-icon" src="{{ svgLikedByMe$ }}" />
+          </button>
+          <button
+            *ngIf="replyMessage?.likedByMe != 'true'"
+            mat-button
+            (click)="likeClick(pulseMessage.ID, replyMessage.ID, false, 'reply')"
+            class="psdk-pulse-reply-like"
+          >
+            <img class="psdk-like-svg-icon" src="{{ svgLike$ }}" />
+          </button>
+          <label class="psdk-pulse-reply-like-label">Like | {{ replyMessage.likeCount }}</label>
+        </div>
+        <ng-template #replyNotLiked>
+          <button
+            *ngIf="replyMessage?.likedByMe != 'true'"
+            mat-button
+            (click)="likeClick(pulseMessage.ID, replyMessage.ID, false, 'reply')"
+            class="psdk-pulse-reply-like"
+          >
+            <img class="psdk-like-svg-icon" src="{{ svgLike$ }}" />
+          </button>
+        </ng-template>
+
+        <div class="psdk-pulse-reply-time">{{ replyMessage.displayPostedTime }}</div>
+      </div>
+      <br />
+    </div>
+
+    <div *ngIf="showReplyComment$[pulseMessage.ID] == true">
+      <div class="psdk-pulse-divider"></div>
+      <br />
+      <div class="psdk-pulse-comment-group">
+        <div class="psdk-avatar">{{ this.currentUserInitials$ }}</div>
+        <mat-form-field class="psdk-full-width">
+          <textarea
+            matInput
+            rows="5"
+            id="pulseMessage"
+            placeholder="Add a comment"
+            type="text"
+            (change)="newCommentChange($event, pulseMessage.ID)"
+          ></textarea>
+        </mat-form-field>
+        <button mat-button (click)="postCommentClick(pulseMessage.ID)" class="psdk-pulse-comment-post">
+          <img class="psdk-send-svg-icon" src="{{ svgSend$ }}" />
+        </button>
+      </div>
+    </div>
+  </div>
+  <br />
+</div>

package/lib/widget/feed-container/feed-container.component.scss

@@ -0,0 +1,188 @@
+@import '@pega/angular-sdk-components/_shared/styles.scss';
+
+.psdk-pulse-divider {
+  border-bottom: 0.0625rem solid $app-neutral-light-color;
+}
+
+.psdk-full-width {
+  width: 100%;
+  padding-left: 0.625rem;
+}
+
+.psdk-icon {
+  padding: 0rem 0.125rem;
+  min-width: unset;
+  display: inline-block;
+}
+
+.psdk-icon-liked-by-me {
+  padding: 0rem 0.125rem;
+  min-width: unset;
+  display: inline-block;
+  color: $app-primary-color;
+}
+
+.psdk-send-svg-icon {
+  width: 1.4rem;
+}
+
+.psdk-comment-svg-icon {
+  width: 1.4rem;
+  padding: 0rem 0.3215rem;
+}
+
+.psdk-like-svg-icon {
+  width: 1.4rem;
+  padding: 0rem 0.3215rem;
+}
+
+.psdk-liked-by-me-svg-icon {
+  width: 1.4rem;
+  padding: 0rem 0.3215rem;
+  filter: $app-primary-color-filter;
+}
+
+.psdk-avatar {
+  margin: 0rem;
+  padding: 0rem;
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  max-width: 2.5rem;
+  max-height: 2.5rem;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  display: flex;
+  background: $app-primary-color;
+  color: white;
+  font-weight: bold;
+  font-size: 1.25rem;
+}
+
+.psdk-avatar-big {
+  margin: 0rem;
+  padding: 0rem;
+  min-width: 3.125rem;
+  min-height: 3.125rem;
+  max-width: 3.125rem;
+  max-height: 3.125rem;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  display: flex;
+  background: $app-primary-color;
+  color: white;
+  font-weight: bold;
+  font-size: 1.5625rem;
+}
+
+.psdk-pulse {
+  display: inline-flex;
+  width: 100%;
+  padding-bottom: 0.625rem;
+}
+
+.psdk-pulse-message-group {
+  display: flex;
+  flex-direction: column;
+  padding-left: 0.625rem;
+}
+
+.psdk-pulse-message-by {
+  margin-bottom: 0rem;
+  font-weight: bold;
+  font-size: 0.9375rem;
+}
+
+.psdk-pulse-message-time {
+  color: #aaaaaa;
+}
+
+.psdk-pulse-message-text {
+  white-space: pre-line;
+}
+
+.psdk-pulse-message-actions {
+  display: flex;
+  flex-direction: row;
+  padding-top: 1.25rem;
+}
+
+.psdk-pulse-message-action-group {
+  flex-basis: 15em;
+}
+
+.psdk-pulse-message-action-like {
+  flex-basis: 15em;
+}
+
+.psdk-pulse-message-like-label {
+  vertical-align: middle;
+}
+
+.psdk-pulse-reply {
+  padding-left: 1.25rem;
+}
+
+.psdk-pulse-reply-align {
+  text-align: left;
+}
+
+.psdk-pulse-reply-group {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.psdk-pulse-reply-by {
+  padding: 0rem 0.625rem;
+  font-weight: bold;
+  font-size: 0.9375rem;
+}
+
+.psdk-pulse-reply-message {
+  background-color: #dddddd;
+  border-radius: 0.625rem;
+  padding: 0rem 1.25rem;
+  white-space: pre-line;
+}
+
+.psdk-pulse-reply-actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-left: 3.125rem;
+}
+
+.psdk-pulse-reply-comment {
+  padding: 0rem;
+  min-width: 1.875rem;
+}
+
+.psdk-pulse-reply-like {
+  padding: 0rem;
+  min-width: 1.875rem;
+}
+
+.psdk-pulse-reply-like-label {
+  vertical-align: middle;
+  padding-right: 0.3125rem;
+}
+
+.psdk-pulse-reply-time {
+  color: #aaaaaa;
+  padding-left: 0.625rem;
+}
+
+.psdk-pulse-comment-group {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.psdk-pulse-comment-post {
+  padding: 0rem;
+  min-width: 1.875rem;
+}

package/lib/widget/feed-container/feed-container.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { FeedContainerComponent } from './feed-container.component';
+
+describe('FeedContainerComponent', () => {
+  let component: FeedContainerComponent;
+  let fixture: ComponentFixture<FeedContainerComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [FeedContainerComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FeedContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});