From 1f7e69b19566998edf1f2a1bb2e62d12ee053087 Mon Sep 17 00:00:00 2001
From: DhaaraniCIT <dhaaranieaswari@gmail.com>
Date: Thu, 6 Jun 2024 18:53:25 +0530
Subject: [PATCH] multi select css changes

---
 .../configuration-multi-select.component.html |  25 +---
 .../email-multi-select-field.component.html   |  48 +------
 .../multi-select/multi-select.component.html  |  63 +++++++++-
 .../multi-select/multi-select.component.scss  |  75 ++++++++++-
 .../multi-select/multi-select.component.ts    |  37 +++++-
 src/styles.scss                               | 117 +++++++++---------
 6 files changed, 239 insertions(+), 126 deletions(-)

diff --git a/src/app/shared/components/configuration/configuration-multi-select/configuration-multi-select.component.html b/src/app/shared/components/configuration/configuration-multi-select/configuration-multi-select.component.html
index 97e22195b..012de52ae 100644
--- a/src/app/shared/components/configuration/configuration-multi-select/configuration-multi-select.component.html
+++ b/src/app/shared/components/configuration/configuration-multi-select/configuration-multi-select.component.html
@@ -9,27 +9,10 @@ <h5 class="!tw-text-text-muted tw-text-14-px !tw-font-400 !tw-leading-4" [innerH
         </div>
     </div>
     <div class="tw-pl-34-px">
-        <p-multiSelect [options]="options" styleClass="tw-z-2 tw-py-8-px tw-px-12-px" [formControlName]="formControllerName" [defaultLabel]="placeholder" 
-        [ngClass]="[form.controls[formControllerName].invalid && isFieldMandatory ? 'error-box' : 'normal-box']" 
-        [dropdownIcon]="'pi pi-chevron-down ' + brandingConfig.brandId"
-        (onChange)="onMultiSelectChange()">
-            <ng-template let-value pTemplate="selectedItems" >
-                <div *ngIf="form.value[formControllerName]?.length>0" class="tw-flex">
-                    <p *ngFor="let name of value;let i = index">{{ name | titlecase | snakeCaseToSpaceCase }}<span *ngIf="i !== value?.length-1">,&nbsp;</span></p>
-                </div>
-                <div *ngIf="form.value[formControllerName]?.length === 0" class="tw-text-placeholder">
-                    {{ placeholder }}
-                </div>
-            </ng-template>
-            <ng-template let-memo let-index="index" pTemplate="item">
-                <!-- <div pDraggable="gens" pDroppable="gens" dragHandle=".barsHandle" (onDragStart)="onDragStart(index)" (onDrop)="onDrop(index)" >
-                    <p class="tw-text-sub-text-color tw-text-14-px">{{ gens | titlecase | snakeCaseToSpaceCase }}</p>
-                </div> -->
-                <div>
-                    <p class="tw-text-14-px">{{ memo | titlecase | snakeCaseToSpaceCase }}</p>
-                </div>
-            </ng-template>
-        </p-multiSelect>
+        <app-multi-select [form]="form" [options]="options" [isFieldMandatory]="isFieldMandatory" 
+            [formControllerName]="formControllerName" [placeholder]="placeholder" [isFilter]="false"
+            (multiSelectChange)="onMultiSelectChange()">
+        </app-multi-select>
         <div>
             <app-mandatory-error-message *ngIf="isFieldMandatory && form.controls[formControllerName].touched && form.value[formControllerName]?.length === 0" [listName]="mandatoryErrorListName" [customErrorMessage]="customErrorMessage"></app-mandatory-error-message>
         </div>
diff --git a/src/app/shared/components/configuration/email-multi-select-field/email-multi-select-field.component.html b/src/app/shared/components/configuration/email-multi-select-field/email-multi-select-field.component.html
index 96f1ce168..03f969b7e 100644
--- a/src/app/shared/components/configuration/email-multi-select-field/email-multi-select-field.component.html
+++ b/src/app/shared/components/configuration/email-multi-select-field/email-multi-select-field.component.html
@@ -9,48 +9,12 @@ <h5 class="!tw-text-text-muted tw-text-14-px tw-pt-8-px !tw-font-400 !tw-leading
         </div>
     </div>
     <div class="tw-pl-34-px">
-        <p-multiSelect [options]="emails" styleClass="tw-z-1 tw-py-8-px tw-px-12-px" [formControlName]="formControllerName" [defaultLabel]="placeholder" optionLabel="email" class="tw-text-sub-text-color"
-	    display="chip" [filter]="true" [filterBy]="'email,name'" [ngClass]="[form.controls[formControllerName].invalid && form.controls[formControllerName].touched ? 'error-box' : 'normal-box']">
-            <ng-template let-value pTemplate="selectedItems">
-                <div *ngIf="selectedEmail"
-                    class="tw-flex tw-text-12-px tw-h-22-px tw-rounded-12-px tw-text-slightly-normal-text-color tw-border-1-px tw-border-box-color tw-bg-white">
-                    <p class="tw-pt-2-px tw-pl-12-px tw-pr-6-px">{{ selectedEmail }}</p>
-                    <p class="tw-w-1-px tw-mr-8-px tw-bg-separator"></p>
-                    <app-svg-icon (iconClick)="removeEmail()" [svgSource]="'cross-small'" [width]="'12px'" [height]="'12px'"
-                        [styleClasses]="'tw-pr-10-px tw-pt-6-px tw-text-slightly-normal-text-color'"></app-svg-icon>
-                </div>
-                <div *ngIf="selectedEmail && form.value.email.length > 1" class="tw-pl-8-px">
-                    <p class="tw-flex tw-justify-center tw-items-center tw-p-5-px tw-h-24-px tw-w-24-px tw-bg-input-read-only-bg tw-text-12-px tw-text-text-muted tw-rounded-12-px">
-                        +{{ form.value.email.length - 1 }}
-                    </p>
-                </div>
-                <div *ngIf="!selectedEmail" class="tw-text-placeholder">
-                    Select Email Address
-                </div>
-            </ng-template>
-            <ng-template pTemplate="filter" let-options="options">
-                <div *ngIf="emails.length" class="p-inputgroup tw-p-6-px">
-                    <div class="p-input-icon-left">
-                        <i>
-                            <app-svg-icon [svgSource]="'search-medium'" [width]="'18px'" [height]="'18px'" [styleClasses]="brandingConfig.brandId === 'fyle' ? 'tw-text-search-focused-search-icon' : 'tw-text-search-focused-filled-border'" [isTextColorAllowed]="true"></app-svg-icon>
-                        </i>
-                        <input type="text" class="!tw-h-32-px !tw-w-288-px !tw-rounded-4-px" (keyup)="options.filter($event)" pInputText placeholder="Search by Name / Email" formControlName="search"/>
-                    </div>
-                </div>
-            </ng-template>
-            <ng-template let-user pTemplate="item">
-                <div>
-                    <span class="tw-text-sub-text-color tw-text-14-px">
-                        <span #textElement 
-                        [ngStyle]="{'white-space': 'nowrap', 'overflow': 'hidden', 'text-overflow': 'ellipsis', 'max-width': '16rem'}"
-                        [pTooltip]="isOverflowing(textElement) ? user.name : null" tooltipPosition="top">
-                        {{ user.name }}
-                        </span>
-                    </span>
-                    <p class="tw-pt-4-px tw-text-text-muted tw-text-12-px">{{ user.email }}</p>
-                </div>
-            </ng-template>
-        </p-multiSelect>
+        <app-multi-select
+            [form]="form" [formControllerName]="formControllerName"
+            [options]="emails" [optionLabel]="'email'" [displayAs]="'chip'"
+            [filterBy]="'email,name'" [isFilter]="true" [selectedValue]="selectedEmail"
+            [placeholder]="'Select Email Address'" (removeItem)="removeEmail()">
+        </app-multi-select>
         <div>
             <app-mandatory-error-message *ngIf="isFieldMandatory && form.controls[formControllerName].touched && !form.controls[formControllerName].valid && !form.controls[formControllerName].disabled" [listName]="mandatoryErrorListName" [customErrorMessage]="customErrorMessage"></app-mandatory-error-message>
         </div>
diff --git a/src/app/shared/components/input/multi-select/multi-select.component.html b/src/app/shared/components/input/multi-select/multi-select.component.html
index 559e4c231..b993518f4 100644
--- a/src/app/shared/components/input/multi-select/multi-select.component.html
+++ b/src/app/shared/components/input/multi-select/multi-select.component.html
@@ -1,5 +1,66 @@
 
 <div [formGroup]="form">
-    <p-multiSelect [optionDisabled]="disabledOption" [placeholder]="placeholder" [options]="options" styleClass="tw-z-2 tw-py-8-px tw-px-12-px" [formControlName]="formControllerName">
+    <p-multiSelect 
+        [optionDisabled]="disabledOption" 
+        [placeholder]="placeholder"
+        [options]="options" 
+        styleClass="tw-z-2 tw-py-8-px tw-px-12-px"
+        [ngClass]="[form.controls[formControllerName].invalid && isFieldMandatory ? 'error-box' : 'normal-box']"  
+        [formControlName]="formControllerName" [optionLabel]="optionLabel"
+        [dropdownIcon]="'pi pi-chevron-down ' + brandingConfig.brandId"
+        [display]="displayAs" [filter]="isFilter" [filterBy]="filterBy"
+        (onChange)="onMultiSelectChange($event)">
+        <ng-template let-value pTemplate="selectedItems" >
+            <div *ngIf="!isFilter">
+                <div *ngIf="form.value[formControllerName]?.length>0" class="tw-flex">
+                    <p *ngFor="let name of value;let i = index">{{ name | titlecase | snakeCaseToSpaceCase }}<span *ngIf="i !== value?.length-1">,&nbsp;</span></p>
+                </div>
+                <div *ngIf="form.value[formControllerName]?.length === 0" class="tw-text-placeholder">
+                    {{ placeholder }}
+                </div>
+            </div>
+            <div *ngIf="isFilter">
+                <div *ngIf="selectedValue"
+                    class="tw-flex tw-text-12-px tw-h-22-px tw-rounded-12-px tw-text-slightly-normal-text-color tw-border-1-px tw-border-box-color tw-bg-white">
+                    <p class="tw-pt-2-px tw-pl-12-px tw-pr-6-px">{{ selectedValue }}</p>
+                    <p class="tw-w-1-px tw-mr-8-px tw-bg-separator"></p>
+                    <app-svg-icon (iconClick)="removeIconClick()" [svgSource]="'cross-small'" [width]="'12px'" [height]="'12px'"
+                        [styleClasses]="'tw-pr-10-px tw-pt-6-px tw-text-slightly-normal-text-color'"></app-svg-icon>
+                </div>
+                <div *ngIf="selectedValue && form.value.email.length > 1" class="tw-pl-8-px">
+                    <p class="tw-flex tw-justify-center tw-items-center tw-p-5-px tw-h-24-px tw-w-24-px tw-bg-input-read-only-bg tw-text-12-px tw-text-text-muted tw-rounded-12-px">
+                        +{{ form.value.email.length - 1 }}
+                    </p>
+                </div>
+                <div *ngIf="!selectedValue" class="tw-text-placeholder">
+                    {{placeholder}}
+                </div>
+            </div>
+        </ng-template>
+        <ng-template *ngIf="isFilter" pTemplate="filter" let-options="options">
+            <div class="p-inputgroup tw-p-6-px">
+                <div class="p-input-icon-left">
+                    <i>
+                        <app-svg-icon [svgSource]="'search-medium'" [width]="'18px'" [height]="'18px'" [styleClasses]="brandingConfig.brandId === 'fyle' ? 'tw-text-search-focused-search-icon' : 'tw-text-search-focused-filled-border'" [isTextColorAllowed]="true"></app-svg-icon>
+                    </i>
+                    <input type="text" class="!tw-h-32-px !tw-w-288-px !tw-rounded-4-px" (keyup)="options.filter($event)" pInputText placeholder="Search by Name / Email" formControlName="search"/>
+                </div>
+            </div>
+        </ng-template>
+        <ng-template let-value let-index="index" pTemplate="item">
+            <div *ngIf="!isFilter">
+                <p class="tw-text-14-px">{{ value | titlecase | snakeCaseToSpaceCase }}</p>
+            </div>
+            <div *ngIf="isFilter">
+                <span class="tw-text-sub-text-color tw-text-14-px">
+                    <span #textElement 
+                    [ngStyle]="{'white-space': 'nowrap', 'overflow': 'hidden', 'text-overflow': 'ellipsis', 'max-width': '16rem'}"
+                    [pTooltip]="isOverflowing(textElement) ? value.name : null" tooltipPosition="top">
+                    {{ value.name }}
+                    </span>
+                </span>
+                <p class="tw-pt-4-px tw-text-text-muted tw-text-12-px">{{ value.email }}</p>
+            </div>
+        </ng-template>
     </p-multiSelect>
 </div>
diff --git a/src/app/shared/components/input/multi-select/multi-select.component.scss b/src/app/shared/components/input/multi-select/multi-select.component.scss
index fbef2a601..50b664521 100644
--- a/src/app/shared/components/input/multi-select/multi-select.component.scss
+++ b/src/app/shared/components/input/multi-select/multi-select.component.scss
@@ -1,3 +1,74 @@
-:host ::ng-deep .p-multiselect-label {
-    @apply tw-z-1 tw-w-270-px #{!important};
+.p-multiselect {
+    @apply tw-h-40-px tw-flex tw-items-center lg:tw-w-300-px md:tw-w-260-px tw-border tw-border-solid tw-border-select-default-border tw-rounded-4-px #{!important};
+
+    &.p-focus:not(.p-disabled) {
+        @apply tw-shadow-none tw-border-select-focused-border #{!important};
+    }
+
+    &.p-focus {
+        @apply tw-shadow-none #{!important};
+    }
+
+    .p-multiselect-trigger {
+        @apply tw-w-12-px #{!important};
+    }
+
+    .p-multiselect-label {
+        @apply tw-text-select-focused-text tw-text-14-px tw-p-0 tw-z-1 tw-w-270-px #{!important};
+
+        &.p-placeholder {
+            @apply tw-text-select-focused-placeholder-text #{!important};
+        }
+    }
+
+    .p-multiselect-close {
+        @apply tw-hidden #{!important};
+    }
+
+    .p-multiselect-panel {
+        @apply tw-w-300-px;
+
+        .p-multiselect-header {
+            @apply tw-border-none tw-p-0 #{!important};
+
+            .p-checkbox {
+                @apply tw-hidden;
+            }
+        }
+
+        .p-multiselect-items {
+            @apply tw-p-0 #{!important};
+
+            .p-multiselect-item {
+                @apply tw-text-14-px tw-text-dd-menu-item-default-text-color tw-px-12-px tw-py-6-px #{!important};
+
+                .p-checkbox {
+                    @apply tw-mb-0 #{!important};
+                }
+
+                &.p-highlight {
+                    @apply tw-text-14-px tw-text-dd-menu-item-default-text-color tw-bg-white tw-rounded-4-px #{!important};
+                }
+
+                &:not(.p-highlight):not(.p-disabled):hover,
+                &:focus,
+                &:hover {
+                    @apply tw-shadow-none tw-bg-dd-menu-item-hover-bg #{!important};
+                }
+
+                &:hover {
+                    @apply tw-shadow-none tw-bg-dd-menu-item-hover-bg tw-rounded-none #{!important};
+                }
+            }
+
+            .p-multiselect-empty-message {
+                @apply tw-py-24-px tw-flex tw-justify-center tw-text-slightly-normal-text-color tw-text-14-px tw-italic #{!important};
+            }
+        }
+    }
+    
+    .p-multiselect-filter-container {
+        @apply tw-hidden;
+    }
 }
+
diff --git a/src/app/shared/components/input/multi-select/multi-select.component.ts b/src/app/shared/components/input/multi-select/multi-select.component.ts
index 714a23e86..35ae53e05 100644
--- a/src/app/shared/components/input/multi-select/multi-select.component.ts
+++ b/src/app/shared/components/input/multi-select/multi-select.component.ts
@@ -1,12 +1,13 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormGroup } from '@angular/forms';
+import { brandingConfig } from 'src/app/branding/branding-config';
 
 @Component({
   selector: 'app-multi-select',
   templateUrl: './multi-select.component.html',
   styleUrls: ['./multi-select.component.scss']
 })
-export class MultiSelectComponent {
+export class MultiSelectComponent implements OnInit{
 
   @Input() form: FormGroup;
 
@@ -18,6 +19,38 @@ export class MultiSelectComponent {
 
   @Input() options: any[];
 
+  @Input() optionLabel: string;
+
+  @Input() displayAs: string;
+
+  @Input() isFilter: boolean = false;
+
+  @Input() filterBy: string;
+
+  @Input() isFieldMandatory: boolean = false;
+
+  @Input() selectedValue: string | null;
+
+  @Output() multiSelectChange = new EventEmitter();
+
+  @Output() removeItem = new EventEmitter();
+
+  readonly brandingConfig = brandingConfig;
+
   constructor() { }
 
+  onMultiSelectChange(value: any) {
+    this.multiSelectChange.emit();
+  }
+
+  removeIconClick() {
+    this.removeItem.emit();
+  }
+
+  isOverflowing(element: any): boolean {
+    return element.offsetWidth < element.scrollWidth;
+  }
+
+  ngOnInit(): void {}
+
 }
diff --git a/src/styles.scss b/src/styles.scss
index 9b4a22b35..62a32b5ec 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -7,6 +7,7 @@
 @import 'assets/themes/co/c1dl.scss';
 @import 'assets/themes/fyle/fdl.scss';
 @import './app/shared/components/input/toggle/toggle.component.scss';
+@import './app/shared/components/input/multi-select/multi-select.component.scss';
 
 
 
@@ -308,50 +309,50 @@ p {
     @apply tw-bg-bg-tertiary tw-p-6-px #{!important}
 }
 
-.p-multiselect {
-    @apply tw-h-40-px tw-flex tw-items-center lg:tw-w-300-px md:tw-w-260-px tw-border tw-border-solid tw-border-select-default-border tw-rounded-4-px #{!important};
-}
+// .p-multiselect {
+//     @apply tw-h-40-px tw-flex tw-items-center lg:tw-w-300-px md:tw-w-260-px tw-border tw-border-solid tw-border-select-default-border tw-rounded-4-px #{!important};
+// }
 
-.p-multiselect .p-multiselect-trigger {
-    @apply tw-w-12-px #{!important};
-}
+// .p-multiselect .p-multiselect-trigger {
+//     @apply tw-w-12-px #{!important};
+// }
 
-.p-multiselect .p-multiselect-label {
-    @apply tw-text-select-focused-text tw-text-14-px tw-p-0 #{!important};
-}
+// .p-multiselect .p-multiselect-label {
+//     @apply tw-text-select-focused-text tw-text-14-px tw-p-0 #{!important};
+// }
 
-.p-multiselect:not(.p-disabled).p-focus {
-    @apply tw-shadow-none #{!important};
-}
+// .p-multiselect:not(.p-disabled).p-focus {
+//     @apply tw-shadow-none #{!important};
+// }
 
-.p-multiselect.p-focus:not(.p-disabled) {
-    @apply tw-shadow-none tw-border-select-focused-border #{!important};
-}
+// .p-multiselect.p-focus:not(.p-disabled) {
+//     @apply tw-shadow-none tw-border-select-focused-border #{!important};
+// }
 
-.p-multiselect-panel .p-multiselect-header .p-checkbox {
-    @apply tw-hidden;
-}
+// .p-multiselect-panel .p-multiselect-header .p-checkbox {
+//     @apply tw-hidden;
+// }
 
-.p-multiselect-panel .p-multiselect-header,
-.p-multiselect-panel .p-multiselect-items {
-    @apply tw-p-0 #{!important};
-}
+// .p-multiselect-panel .p-multiselect-header,
+// .p-multiselect-panel .p-multiselect-items {
+//     @apply tw-p-0 #{!important};
+// }
 
-.p-multiselect-panel .p-multiselect-header {
-    @apply tw-border-none #{!important};
-}
+// .p-multiselect-panel .p-multiselect-header {
+//     @apply tw-border-none #{!important};
+// }
 
-.p-multiselect-filter-container {
-    @apply tw-hidden;
-}
+// .p-multiselect-filter-container {
+//     @apply tw-hidden;
+// }
 
-.p-multiselect-close {
-    @apply tw-hidden #{!important};
-}
+// .p-multiselect-close {
+//     @apply tw-hidden #{!important};
+// }
 
-.p-multiselect-panel {
-    @apply tw-w-300-px;
-}
+// .p-multiselect-panel {
+//     @apply tw-w-300-px;
+// }
 
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
     @apply tw-min-h-dropdown-option-height tw-py-6-px tw-px-12-px #{!important};
@@ -361,21 +362,21 @@ p {
     @apply tw-text-select-default-placeholder-text #{!important};
 }
 
-.p-multiselect .p-multiselect-label.p-placeholder {
-    @apply tw-text-select-focused-placeholder-text #{!important};
-}
+// .p-multiselect .p-multiselect-label.p-placeholder {
+//     @apply tw-text-select-focused-placeholder-text #{!important};
+// }
 
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item {
-    @apply tw-text-14-px tw-text-dd-menu-item-default-text-color tw-px-12-px tw-py-6-px #{!important};
-}
+// .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+//     @apply tw-text-14-px tw-text-dd-menu-item-default-text-color tw-px-12-px tw-py-6-px #{!important};
+// }
 
 .p-checkbox {
     @apply tw-h-[revert] tw-w-[revert] #{!important};
 }
 
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
-    @apply tw-mb-0 #{!important};
-}
+// .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
+//     @apply tw-mb-0 #{!important};
+// }
 
 .p-checkbox .p-checkbox-box {
     @apply tw-h-16-px tw-w-16-px tw-rounded-5-px tw-transition-none tw-border-[1.5px] tw-border-checkbox-icon-color #{!important};
@@ -385,21 +386,21 @@ p {
     @apply tw-border-[1.5px] #{!important};
 }
 
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
-    @apply tw-text-14-px tw-text-dd-menu-item-default-text-color tw-bg-white tw-rounded-4-px #{!important};
-}
+// .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+//     @apply tw-text-14-px tw-text-dd-menu-item-default-text-color tw-bg-white tw-rounded-4-px #{!important};
+// }
 
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
-    @apply tw-shadow-none tw-bg-dd-menu-item-hover-bg #{!important};
-}
+// .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
+//     @apply tw-shadow-none tw-bg-dd-menu-item-hover-bg #{!important};
+// }
 
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
-    @apply tw-shadow-none tw-bg-dd-menu-item-hover-bg #{!important};
-}
+// .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
+//     @apply tw-shadow-none tw-bg-dd-menu-item-hover-bg #{!important};
+// }
 
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item:hover {
-    @apply tw-shadow-none tw-bg-dd-menu-item-hover-bg tw-rounded-none #{!important};
-}
+// .p-multiselect-panel .p-multiselect-items .p-multiselect-item:hover {
+//     @apply tw-shadow-none tw-bg-dd-menu-item-hover-bg tw-rounded-none #{!important};
+// }
 
 .p-checkbox .p-checkbox-box.p-highlight {
     @apply tw-bg-checkbox-icon-selected-color tw-border-none tw-pb-checkbox-marked-icon-spacing #{!important};
@@ -413,9 +414,9 @@ p {
     @apply tw-border-sub-text-color #{!important};
 }
 
-.p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
-    @apply tw-py-24-px tw-flex tw-justify-center tw-text-slightly-normal-text-color tw-text-14-px tw-italic #{!important};
-}
+// .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+//     @apply tw-py-24-px tw-flex tw-justify-center tw-text-slightly-normal-text-color tw-text-14-px tw-italic #{!important};
+// }
 
 @mixin spinner($height, $width, $animation) {
     &.p-progress-spinner {