@pega/angular-sdk-overrides 0.23.1 → 0.23.3

package/lib/field/dropdown/dropdown.component.ts

@@ -160,7 +160,7 @@ export class DropdownComponent implements OnInit, OnDestroy {
     this.componentReference = (this.pConn$.getStateProps() as any).value;
 
     // @ts-ignore - parameter “contextName” for getDataObject method should be optional
-    const optionsList = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject());
+    const optionsList = [...this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject())];
     optionsList?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
     this.options$ = optionsList;
     if (this.value$ === '' && !this.bReadonly$) {

package/lib/field/list-view-action-buttons/list-view-action-buttons.component.scss

@@ -1 +0,0 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';

package/lib/field/rich-text/rich-text.component.ts

@@ -4,7 +4,7 @@ import { FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
-import handleEvent from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface RichTextProps extends PConnFieldProps {

package/lib/field/semantic-link/semantic-link.component.scss

@@ -7,7 +7,7 @@
 }
 
 .psdk-label {
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--app-label-color);
   margin: 8px 0px;
 }
 

package/lib/field/text/text.component.scss

@@ -25,6 +25,6 @@
 }
 
 .psdk-details-fields-label {
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--app-label-color);
   margin: 8px 0px;
 }

package/lib/field/user-reference/user-reference.component.scss

@@ -1,8 +1,6 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .psdk-user-reference {
   font-size: 0.8rem;
-  color: $app-neutral-color;
+  color: var(--app-neutral-color);
 }
 .psdk-single {
   flex: 1;

package/lib/infra/Containers/flow-container/flow-container.component.scss

@@ -1,33 +1 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
-h2 {
-  font-size: 1.1rem;
-}
-
-h5 {
-  font-size: 0.8rem;
-}
-
-.psdk-case-view-divider {
-  border-bottom: 0.0625rem solid $app-neutral-light-color;
-}
-
-.psdk-flow-container-top {
-  background-color: $app-form-color;
-  padding: 0rem 0.625rem;
-  border-radius: 0.3125rem;
-}
-.psdk-flow-container {
-  padding-left: 2.1875rem;
-}
-
-.psdk-message-card {
-  margin: 10px;
-}
-
-.psdk-icon {
-  width: 1.6rem;
-  display: inline-block;
-  padding: 0rem 0.6rem;
-  filter: $app-primary-color-filter;
-}
+/* moved the flow-conatiner component styles to containerStyles file */

package/lib/infra/Containers/modal-view-container/modal-view-container.component.scss

@@ -1,29 +1 @@
-.psdk-dialog-background {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  background-color: rgba(100, 100, 100, 0.4);
-  position: fixed;
-  z-index: 999;
-  top: 0px;
-  left: 0px;
-}
-
-.psdk-modal-view-container-top {
-  display: block;
-  margin: auto;
-  min-width: 650px;
-  background-color: white;
-  border: 1px solid black;
-  border-radius: 10px;
-  padding: 20px;
-  box-shadow: 0 0 10px 3px #777;
-  overflow-y: auto;
-}
-
-.psdk-dialog-float {
-  position: absolute;
-}
+/* moved the modal-view-container component styles to containerStyles file */

package/lib/infra/Containers/view-container/view-container.component.scss

@@ -1,7 +1 @@
-h3 {
-  margin-left: 0.8rem;
-}
-
-.psdk-view-container-top {
-  padding: 0;
-}
+/* moved the view-container component styles to containerStyles file */

package/lib/infra/action-buttons/action-buttons.component.scss

@@ -1 +0,0 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';

package/lib/infra/assignment-card/assignment-card.component.scss

@@ -1,7 +1,5 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .psdk-case-view-divider {
-  border-bottom: 0.0625rem solid $app-neutral-light-color;
+  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
 }
 
 .psdk-flow-container {

package/lib/infra/multi-step/multi-step.component.scss

@@ -1,7 +1,5 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .psdk-case-view-divider {
-  border-bottom: 0.0625rem solid $app-neutral-light-color;
+  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
 }
 
 .psdk-icon {
@@ -10,21 +8,21 @@
 }
 
 .psdk-icon-current {
-  color: $app-primary-color;
+  color: var(--app-primary-color);
 }
 
 .psdk-icon-not-current {
-  color: $app-neutral-color;
+  color: var(--app-neutral-color);
 }
 
 .psdk-current-svg-icon {
   width: 1rem;
-  filter: $app-primary-color-filter;
+  filter: var(--app-primary-color-filter);
 }
 
 .psdk-not-current-svg-icon {
   width: 1rem;
-  filter: $app-neutral-color-filter;
+  filter: var(--app-neutral-color-filter);
 }
 
 mat-vertical-stepper {
@@ -37,16 +35,16 @@ mat-horizontal-stepper {
 .psdk-sub-step-current {
   padding-left: 0.625rem;
   font-weight: bold;
-  color: rgba(0, 0, 0, 0.87);
+  color: var(--app-label-selected-color);
 }
 
 .psdk-sub-step-not-current {
   padding-left: 0.625rem;
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--app-label-color);
 }
 
 .psdk-flow-container-top {
-  background-color: $app-form-color;
+  background-color: var(--app-form-color);
   padding: 0rem 0.625rem;
   border-radius: 0.3125rem;
 }
@@ -83,8 +81,8 @@ mat-horizontal-stepper {
 
 .psdk-vertical-step-icon {
   margin-right: 12px;
-  background-color: $app-neutral-color;
-  color: #fff;
+  background-color: var(--app-neutral-color);
+  color: var(--app-form-color);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -97,13 +95,13 @@ mat-horizontal-stepper {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: #fff;
+  color: var(--app-form-color);
 }
 
 .psdk-vertical-step-icon-selected {
   margin-right: 12px;
-  background-color: $app-primary-color;
-  color: #fff;
+  background-color: var(--app-primary-color);
+  color: var(--app-form-color);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -112,7 +110,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-vertical-step-label {
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--app-label-color);
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
@@ -124,7 +122,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-vertical-step-label-selected {
-  color: rgba(0, 0, 0, 0.87);
+  color: var(--app-label-selected-color);
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
@@ -154,7 +152,7 @@ mat-horizontal-stepper {
   border-left-style: solid;
   top: -16px;
   bottom: -16px;
-  border-left-color: rgba(0, 0, 0, 0.12);
+  border-left-color: var(--app-multi-step-border-color);
 }
 
 .psdk-horizontal-stepper {
@@ -183,8 +181,8 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-icon {
-  background-color: $app-neutral-color;
-  color: #fff;
+  background-color: var(--app-neutral-color);
+  color: var(--app-form-color);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -204,8 +202,8 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-icon-selected {
-  background-color: $app-primary-color;
-  color: #fff;
+  background-color: var(--app-primary-color);
+  color: var(--app-form-color);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -217,7 +215,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-label {
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--app-label-color);
   display: inline-block;
   min-width: 50px;
   vertical-align: middle;
@@ -227,7 +225,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-label-selected {
-  color: rgba(0, 0, 0, 0.87);
+  color: var(--app-label-selected-color);
   display: inline-block;
   min-width: 50px;
   vertical-align: middle;
@@ -237,7 +235,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-line {
-  border-top-color: rgba(0, 0, 0, 0.12);
+  border-top-color: var(--app-multi-step-border-color);
   border-top-width: 1px;
   border-top-style: solid;
   flex: auto;

package/lib/infra/navbar/navbar.component.scss

@@ -1,5 +1,3 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 // Things related to movement
 $transition-slow: 0.5s !default;
 $transition-medium: 0.3s !default;
@@ -7,7 +5,7 @@ $transition-fast: 0.1s !default;
 $natural-ease: cubic-bezier(0.4, 0.6, 0.1, 1) !default;
 
 .psdk-nav-divider {
-  border-bottom: 0.0625rem solid invert($app-nav-bg, 15%);
+  border-bottom: 0.0625rem solid var(--app-divider-color);
   width: 100%;
   align-items: center;
 }
@@ -25,7 +23,7 @@ $natural-ease: cubic-bezier(0.4, 0.6, 0.1, 1) !default;
 
 // background color white
 .psdk-nav-svg-icon {
-  filter: $app-white-color-filter;
+  filter: var(--app-white-color-filter);
   width: 1.6rem;
   padding-right: 0.625rem;
 }
@@ -44,10 +42,10 @@ $natural-ease: cubic-bezier(0.4, 0.6, 0.1, 1) !default;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  background: $app-nav-bg;
-  width: $app-nav-width;
+  background: var(--app-nav-bg);
+  width: var(--app-nav-width);
   height: 100%;
-  color: invert($app-nav-bg, 100%);
+  color: var(--app-nav-color);
   overflow-y: auto;
   overflow-x: hidden;
   white-space: nowrap;
@@ -56,17 +54,17 @@ $natural-ease: cubic-bezier(0.4, 0.6, 0.1, 1) !default;
 }
 
 .psdk-appshell-nav:hover {
-  width: $app-nav-width-expanded;
+  width: var(--app-nav-width-expanded);
 }
 
 .psdk-appshell-topnav {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  background: $app-nav-bg;
-  width: $app-nav-width;
+  background: var(--app-nav-bg);
+  width: var(--app-nav-width);
   height: 15%;
-  color: invert($app-nav-bg, 100%);
+  color: var(--app-nav-color);
   overflow: hidden;
   white-space: nowrap;
   transition: width $transition-medium $natural-ease;
@@ -77,10 +75,10 @@ $natural-ease: cubic-bezier(0.4, 0.6, 0.1, 1) !default;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  background: $app-nav-bg;
-  width: $app-nav-width;
+  background: var(--app-nav-bg);
+  width: var(--app-nav-width);
   height: 50%;
-  color: invert($app-nav-bg, 100%);
+  color: var(--app-nav-color);
   overflow: hidden;
   white-space: nowrap;
   transition: width $transition-medium $natural-ease;
@@ -106,7 +104,7 @@ $natural-ease: cubic-bezier(0.4, 0.6, 0.1, 1) !default;
 
 .psdk-nav-button-span {
   padding: 0 1rem;
-  color: invert($app-nav-bg, 100%);
+  color: var(--app-nav-color);
 }
 
 .psdk-nav-oper-avatar {
@@ -121,8 +119,8 @@ $natural-ease: cubic-bezier(0.4, 0.6, 0.1, 1) !default;
   align-items: center;
   text-align: center;
   display: inline-flex;
-  background: $app-neutral-color;
-  color: white;
+  background: var(--app-neutral-color);
+  color: var(--app-form-color);
   font-weight: normal;
   font-size: 1rem;
 }
@@ -142,7 +140,7 @@ mat-list-item {
   height: auto !important;
 
   &:hover {
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: var(--app-label-color);
   }
 
   .flex-box {

package/lib/infra/root-container/root-container.component.scss

@@ -1,5 +1,3 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .progress-box {
   display: flex;
   flex-direction: column;
@@ -7,7 +5,7 @@
   align-items: center;
   height: 100%;
   width: 100%;
-  background-color: whitesmoke;
+  background-color: var(--app-background-color);
   position: fixed;
   z-index: 99999;
   top: 0rem;

package/lib/infra/stages/stages.component.scss

@@ -1,5 +1,3 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .psdk-stages {
   padding: 0.625rem 0rem;
 }
@@ -15,21 +13,21 @@
   padding: 0.3125rem;
   font-weight: bold;
   font-size: 1.3rem;
-  color: $app-neutral-color;
+  color: var(--app-neutral-color);
 }
 
 .psdk-stages-past {
-  color: $app-primary-color;
+  color: var(--app-primary-color);
   padding-right: 0.3125rem;
 }
 
 .psdk-stages-present {
-  color: $app-secondary-color;
+  color: var(--app-secondary-color);
   padding-right: 0.3125rem;
 }
 
 .psdk-stages-future {
-  color: $app-neutral-color;
+  color: var(--app-neutral-color);
   padding-right: 0.3125rem;
 }
 
@@ -38,7 +36,7 @@
 }
 
 .psdk-stages-divider {
-  border-bottom: 0.0625rem solid $app-neutral-light-color;
+  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
 }
 
 .psdk-stages-full {
@@ -46,7 +44,7 @@
 }
 
 .psdk-stages-divider {
-  border-bottom: 0.0625rem solid $app-neutral-light-color;
+  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
 }
 
 .psdk-stages-icon {
@@ -57,9 +55,9 @@
 
 .psdk-stages-bar {
   margin: 1rem 0rem;
-  background-color: rgb(255, 255, 255);
+  background-color: var(--app-form-color);
   border-radius: 0.5rem;
-  border: 0.0625rem solid $app-neutral-light-color;
+  border: 0.0625rem solid var(--app-neutral-light-color);
   overflow: hidden;
   height: 2rem;
   display: flex;
@@ -94,16 +92,17 @@
 }
 
 .psdk-stages-inner-past {
-  color: black;
+  color: var(--app-inverse-form-color);
   font-size: 1rem;
 }
 
 .psdk-stages-inner-present {
-  color: $app-primary-color;
+  color: var(--app-primary-color);
   font-weight: bold;
   font-size: 1rem;
 }
+
 .psdk-stages-inner-future {
-  color: $app-neutral-color;
+  color: var(--app-neutral-color);
   font-size: 1rem;
 }

package/lib/template/app-shell/app-shell.component.scss

@@ -1,16 +1,14 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .appshell-top {
-  background-color: $app-background-color;
+  background-color: var(--app-background-color);
 }
 
 .appshell-top-wss {
-  background-color: $app-background-color;
+  background-color: var(--app-background-color);
 }
 
 .appshell-main {
   position: relative;
-  margin-left: $app-nav-width;
+  margin-left: var(--app-nav-width);
   min-height: 100vh;
   display: block;
 }
@@ -34,7 +32,7 @@
   align-items: center;
   height: 100%;
   width: 100%;
-  background-color: whitesmoke;
+  background-color: var(--app-background-color);
   position: fixed;
   z-index: 999;
   top: 0rem;

package/lib/template/case-summary/case-summary.component.scss

@@ -1,5 +1,3 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .psdk-case-summary-info-box {
   display: flex;
   flex-direction: row;
@@ -32,8 +30,8 @@
 }
 
 .psdk-status {
-  background-color: $app-primary-color;
-  color: white;
+  background-color: var(--app-primary-color);
+  color: var(--app-form-color);
   padding: 0;
   margin-top: 0.625rem;
   width: fit-content;

package/lib/template/case-view/case-view.component.scss

@@ -1,5 +1,3 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 h1 {
   font-size: 1.1rem;
   line-height: 1.3rem;
@@ -29,14 +27,14 @@ h1 {
 }
 
 .psdk-case-icon-div {
-  background-color: $app-primary-dark-color;
+  background-color: var(--app-primary-dark-color);
   border-radius: 1rem;
   padding: 0.5rem 0.3rem 0.3rem 0.3rem;
 }
 .psdk-case-svg-icon {
   width: 2rem;
   padding: 0rem 0.3125rem;
-  filter: $app-white-color-filter;
+  filter: var(--app-white-color-filter);
 }
 
 .psdk-case-view-info-box {
@@ -51,7 +49,7 @@ h1 {
   float: left;
   padding: 0rem 0.3125rem 0rem 0rem;
   height: 100%; /* Should be removed. Only for demonstration */
-  background-color: $app-form-color;
+  background-color: var(--app-form-color);
 }
 
 .psdk-case-view-main {
@@ -91,13 +89,13 @@ h1 {
 }
 
 .psdk-case-view-divider {
-  border-bottom: 0.0625rem solid $app-neutral-light-color;
+  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
 }
 
 .psdk-status {
   padding: 0.3125rem 0.3125rem;
-  background-color: $app-primary-color;
-  color: white;
+  background-color: var(--app-primary-color);
+  color: var(--app-form-color);
   width: fit-content;
   margin: 0.625rem;
 }

package/lib/template/default-form/default-form.component.scss

@@ -1,5 +1,3 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .psdk-default-form-one-column {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));

package/lib/template/field-group-list/field-group-list.component.scss

@@ -1,5 +1,5 @@
 .psdk-details-fields-label {
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--app-label-color);
   margin: 8px 0px;
 }