@chat21/chat21-web-widget 5.1.0-rc21 → 5.1.0-rc22

package/CHANGELOG.md

@@ -6,6 +6,11 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.1.0-rc22
+- **changed**: footer UI if fullscreenMode is enabled
+- **changed**: buttons alignment if fullscreenMode is enabled
+- **changed**: animation while increase/descrease widget size
+
 # 5.1.0-rc21
 - **bug-fixed**: shadow is visible while decrease widget size
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.1.0-rc21",
+  "version": "5.1.0-rc22",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

package/src/app/component/conversation-detail/conversation/conversation.component.scss

@@ -13,6 +13,38 @@
     bottom: var(--chat-footer-height) !important
 }
 
+:host-context(#chat21-conversations.full-screen-mode){
+    --button-in-msg-padding: 10px 16px;
+    #chat21-footer{
+        left: 20%;
+        right: 20%;
+    }
+
+    chat-conversation-content ::ng-deep{
+        .attachment_container,
+        .buttons-wrapper {
+            justify-content: flex-start;
+        }
+
+        .button-in-message{
+            padding: 14px 22px !important
+        }
+
+    }
+
+    chat-conversation-footer ::ng-deep {
+        .textarea-container {
+            padding: 8px 24px;
+            background-color: var(--chat-footer-background-color);
+            border-radius: 28px;
+        }
+        #hiddenFooter,
+        #emoji-mart-container {
+            bottom: calc(100% + 10px)
+        }
+    }
+}
+
 // ============= CSS #chat21-conversation-component ================= //
 #chat21-conversation-component {
     // background-color: #ffffff;
@@ -89,6 +121,7 @@
     left: 0px;
     right: 0px;
     margin: 0px;
+    margin: 12px 8px;
     // padding: 0;
     
     // box-shadow: 0 -1px 0px 0px $trasp-light-gray;

package/src/app/component/conversation-detail/conversation/conversation.component.ts

@@ -1022,7 +1022,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     var tiledeskDiv = this.g.windowContext.window.document.getElementById('tiledeskdiv') 
     tiledeskDiv.classList.remove('increaseSize')
     tiledeskDiv.classList.remove('decreaseSize')
-    tiledeskDiv.classList.remove('fullscreen')
+    tiledeskDiv.classList.remove('top')
 
     this.onCloseWidget.emit();
   }
@@ -1078,18 +1078,15 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     if(mode==='max'){
       tiledeskDiv.classList.add('increaseSize')
       tiledeskDiv.classList.remove('decreaseSize')
-      tiledeskDiv.classList.remove('fullscreen')
-      this.g.fullscreenMode = false
+      tiledeskDiv.classList.remove('top')
     }else if(mode==='min'){
       tiledeskDiv.classList.add('decreaseSize')
       tiledeskDiv.classList.remove('increaseSize')
-      tiledeskDiv.classList.remove('fullscreen')
-      this.g.fullscreenMode = false
-    }else if(mode=== 'fullscreen'){
-      tiledeskDiv.classList.add('fullscreen')
+      tiledeskDiv.classList.remove('top')
+    }else if(mode=== 'top'){
+      tiledeskDiv.classList.add('top')
       tiledeskDiv.classList.remove('increaseSize')
       tiledeskDiv.classList.remove('decreaseSize')
-      this.g.fullscreenMode = true
 
     }
     this.isMenuShow = false;
@@ -1132,8 +1129,8 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       case HEADER_MENU_OPTION.MINIMIZE:
         this.onWidgetSizeChange('min')
         break;
-      case HEADER_MENU_OPTION.FULLSCREEN:
-        this.onWidgetSizeChange('fullscreen')
+      case HEADER_MENU_OPTION.TOP:
+        this.onWidgetSizeChange('top')
         break;
     }
   }

package/src/app/component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.html

@@ -1,7 +1,9 @@
 <div class="audio-recorder">
   <button *ngIf="audioUrl" (click)="deleteRecording()">
     <span class="v-align-center">
-      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm80-160h80v-360h-80v360Zm160 0h80v-360h-80v360Z"/></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+        <path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm80-160h80v-360h-80v360Zm160 0h80v-360h-80v360Z"/>
+      </svg>
       <!-- <i class="material-icons">delete_outline</i> -->
     </span>
   </button>

package/src/app/component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.scss

@@ -1,19 +1,10 @@
-
-@font-face {
-    font-family: 'Material Icons';
-    src: url('https://fonts.googleapis.com/icon?family=Material+Icons');
-  }
-  
-  .material-icons.mic_none::before {
-    content: 'mic_none';
-  }
-
 .audio-recorder {
     text-align: center;
     margin: 0px;
     display: inline-flex;
     align-items: center;
-    justify-content: center;
+    // justify-content: center;
+    justify-content: space-between;
     height: 100%;
     width: 100%;
     float: left;
@@ -22,8 +13,8 @@
 
 ::ng-deep chat-audio.test {
   display: flex;
-  width: 80%;
-  margin: 8px 0;
+  width: 90%;
+  // margin: 8px 0;
   pointer-events: auto;
   border-radius: var(--chat-footer-border-radius);
   background-color: var(--chat-footer-background-color);
@@ -52,10 +43,9 @@ button {
     background-color: transparent;
     color: var(--icon-fill-color);
     fill: var(--icon-fill-color);
-    height: var(--chat-footer-height);
+    // height: var(--chat-footer-height);
 
     display: flex;
-    align-self: flex-end;
     // margin: 0 8px;
     width: 34px;
     text-align: center;
@@ -75,6 +65,7 @@ button {
     justify-content: center;
     align-items: center;
     padding: 0px;
+    z-index: 0;
   }
   
   .mic-button svg {

package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.html

@@ -27,8 +27,8 @@
         <!-- ICON ATTACHMENT -->
         <label *ngIf="showAttachmentFooterButton" tabindex="1502" aria-label="allegati" for="chat21-file" class="chat21-textarea-button" [class.active]="!isFilePendingToUpload && !hideTextReply" id="chat21-start-upload-doc">
             <span class="v-align-center">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24" viewBox="0 0 24 24" >
-                    <path d="M18.4,13.2l-2.6,4.5c-1.5,2.6-4.9,3.6-7.6,2c-2.6-1.5-3.6-4.9-2-7.6l3.9-6.7c1.1-1.9,3.6-2.6,5.5-1.5 c1.9,1.1,2.6,3.6,1.5,5.5l-3.3,5.7c-0.7,1.3-2.3,1.7-3.6,1c-1.3-0.7-1.7-2.3-1-3.6l2-3.4c0.2-0.3,0.6-0.5,1-0.3s0.5,0.6,0.3,1 l-2,3.4c-0.3,0.5-0.2,1.1,0.3,1.5c0.4,0.4,1.1,0.4,1.5,0c0.1-0.1,0.2-0.2,0.2-0.3l3.3-5.7c0.7-1.2,0.3-2.8-1-3.5 c-1.2-0.7-2.8-0.3-3.5,1l-3.9,6.7C6.4,14.9,7,17.4,9,18.5c1.9,1.1,4.4,0.5,5.6-1.5l2.6-4.5c0.2-0.3,0.6-0.5,1-0.3 C18.5,12.5,18.6,12.9,18.4,13.2L18.4,13.2z"/>
+                <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M9.9,22.7c0,0-.1,0-.2,0-1.9.3-3.7-.2-5.2-1.4-3-2.3-3.6-6.4-1.4-9.5L9.5,2.5c.4-.5,1.1-.6,1.6-.3.5.4.6,1.1.3,1.6l-6.5,9.4c-1.4,2-1,4.8.9,6.3,1,.8,2.2,1.1,3.5.9,1.3-.2,2.4-.9,3.1-1.9l6-8.7c.9-1.2.6-3-.6-3.9-.6-.5-1.4-.6-2.1-.5-.8.1-1.4.5-1.9,1.1l-5.8,8.2c-.3.5-.2,1.1.2,1.5.2.2.5.3.8.2.3,0,.6-.2.7-.4l4.7-6.2c.4-.5,1.1-.6,1.6-.2.5.4.6,1.1.2,1.6l-4.7,6.2c-.5.7-1.4,1.2-2.3,1.3-.9.1-1.8-.2-2.5-.7-1.4-1.1-1.6-3.1-.6-4.6l5.8-8.2c.8-1.1,2-1.9,3.4-2.1,1.4-.2,2.7.1,3.8,1,2.2,1.7,2.7,4.8,1.1,7.1l-6,8.7c-1.1,1.5-2.6,2.5-4.4,2.8h0Z"/>
                 </svg>
             </span>
              <input
@@ -47,11 +47,16 @@
         <!-- ICON EMOJII -->
         <label *ngIf="showEmojiFooterButton" tabindex="1504" aria-label="emojii" for="chat21-emojii" class="chat21-textarea-button" [class.active]="!isFilePendingToUpload && !hideTextReply" id="chat21-emoticon-picker" (click)="onEmojiiPickerClicked()">
             <span class="v-align-center">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-                    <path d="M0,0H20.57V20.57H0V0Z" fill="none"/>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+                    <path stroke-width=".4px" stroke="currentColor" d="M12,20.8c-5.1,0-9.3-4.2-9.3-9.3S6.9,2.2,12,2.2s9.3,4.2,9.3,9.3-4.2,9.3-9.3,9.3ZM12,3.6c-4.4,0-7.9,3.6-7.9,7.9s3.6,7.9,7.9,7.9,7.9-3.6,7.9-7.9-3.6-7.9-7.9-7.9Z"/>
+                    <path stroke-width=".4px" stroke="currentColor" d="M12,17.2c-2.7,0-4.3-1.9-4.6-2.3-.2-.3-.2-.7.1-1s.7-.2,1,.1c.1.2,1.4,1.8,3.5,1.8s2.2,0,3.5-1.8c.2-.3.7-.4,1-.1s.4.7.1,1c-1.7,2.2-4.1,2.3-4.6,2.3Z"/>
+                    <path d="M8.7,10.9c-.9,0-1.6-.7-1.6-1.6s.7-1.6,1.6-1.6,1.6.7,1.6,1.6-.7,1.6-1.6,1.6Z"/>
+                    <path d="M15.5,10.9c-.9,0-1.6-.7-1.6-1.6s.7-1.6,1.6-1.6,1.6.7,1.6,1.6-.7,1.6-1.6,1.6Z"/>
+
+                    <!-- <path d="M0,0H20.57V20.57H0V0Z" fill="none"/>
                     <circle cx="15.02" cy="9.86" r="1.29"/>
                     <circle cx="9.02" cy="9.86" r="1.29"/>
-                    <path d="M12.02,15.43c-1.27,0-2.36-.69-2.96-1.71h-1.43c.69,1.76,2.39,3,4.39,3s3.7-1.24,4.39-3h-1.43c-.6,1.02-1.69,1.71-2.96,1.71Zm0-12C7.28,3.43,3.45,7.27,3.45,12s3.83,8.57,8.56,8.57,8.58-3.84,8.58-8.57S16.75,3.43,12.01,3.43Zm0,15.43c-3.79,0-6.86-3.07-6.86-6.86s3.07-6.86,6.86-6.86,6.86,3.07,6.86,6.86-3.07,6.86-6.86,6.86Z"/>
+                    <path d="M12.02,15.43c-1.27,0-2.36-.69-2.96-1.71h-1.43c.69,1.76,2.39,3,4.39,3s3.7-1.24,4.39-3h-1.43c-.6,1.02-1.69,1.71-2.96,1.71Zm0-12C7.28,3.43,3.45,7.27,3.45,12s3.83,8.57,8.56,8.57,8.58-3.84,8.58-8.57S16.75,3.43,12.01,3.43Zm0,15.43c-3.79,0-6.86-3.07-6.86-6.86s3.07-6.86,6.86-6.86,6.86,3.07,6.86,6.86-3.07,6.86-6.86,6.86Z"/> -->
                 </svg>
             </span>
         </label>
@@ -85,8 +90,8 @@
     <!-- ICON SEND -->
     <div *ngIf="(textInputTextArea !== '' && !isStopRec) || !showAudioRecorderFooterButton" tabindex="-1" class="chat21-textarea-button" [class.disabled]="showAlertEmoji || showAlertUrl" [class.active]="textInputTextArea && !hideTextReply" id="chat21-button-send" (click)="onSendPressed($event)">
         <span class="v-align-center">
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  height="24" width="24" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
-                <path d="M1.8,18.9V1.7L22,10.3L1.8,18.9z M3.9,15.6l12.6-5.4L3.9,4.9v3.7l6.4,1.6l-6.4,1.6V15.6z M3.9,15.6V4.9v7V15.6z"/>
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  height="24" width="24" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" fill="currentColor">
+                <path class="cls-1" d="M1.8,20.6V3.4l20.2,8.6L1.8,20.6ZM3.9,17.3l12.6-5.4L3.9,6.6v3.7l6.4,1.6-6.4,1.6v3.8ZM3.9,17.3V6.6v10.7Z"/>
             </svg>
         </span>
     </div>
@@ -107,7 +112,7 @@
 <!-- EMOJII PICKER-->
 <div [style.visibility]="isEmojiiPickerShow?'visible':'hidden'"  class="emoji-container"  id="emoji-mart-container" #emoji_mart_container>
     <!-- <ng-container #emojii_container></ng-container> -->
-    <emoji-mart id="emoji-mart"
+        <emoji-mart id="emoji-mart"
         *ngIf="showEmojiPicker"
         class="emoji-mart"
         [showPreview]="emojiiOptions?.showPreview"

package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.scss

@@ -6,9 +6,8 @@
     display: flex;
     // width: 100%;
     align-items: center;
-    gap: 8px;
     justify-content: space-between;
-    margin: 0px 8px;
+    gap: 8px;
 
     //if attachment icon OR emoji icon is not in DOM -> increment textarea width
     &:has(:not(#chat21-start-upload-doc), :not(#chat21-emoticon-picker)) .visible-text-area {
@@ -23,15 +22,15 @@
 
 .icons-container{
     display: flex;
-    align-self: flex-end;
+    // align-self: flex-end;
     // margin-left: 8px;
     // margin-right: 8px;
-    gap: 8px;
+    gap: 4px;
 }
 
 .visible-text-area {
     width: 70%;
-    margin: 8px 0px;
+    // margin: 12px 0px;
     pointer-events: auto;
     border-radius: var(--chat-footer-border-radius);
     background-color: var(--chat-footer-background-color);
@@ -44,9 +43,10 @@
 }
 
 .chat21-textarea-button {
-    fill: var(--icon-fill-color);
+    // fill: var(--icon-fill-color);
+    color: var(--icon-fill-color);
     pointer-events: auto;
-    height: var(--chat-footer-height);
+    // height: var(--chat-footer-height);
     bottom: 22px;
     opacity: 0.3;
     cursor: initial;
@@ -206,7 +206,7 @@ textarea:active{
 
 #chat21-button-send {
     display: flex;
-    align-self: flex-end;
+    // align-self: flex-end;
     // margin: 0 8px;
     width: 34px;
     text-align: center;
@@ -218,7 +218,7 @@ textarea:active{
     width: 34px;
     text-align: center;
     justify-content: center;
-    height: var(--chat-footer-height);
+    // height: var(--chat-footer-height);
     &.active{
         width: 100%;
     }
@@ -392,20 +392,20 @@ textarea:active{
 
 
 .emoji-container {
-    height: 312px;
+    height: 319px;
     position: absolute;
     overflow: hidden;
-    width: 89%;
+    width: 338px;
     bottom: 100%;
     z-index: 10;
     left: 10px;
-    box-shadow: 0px -15px 20px -13px rgba(0, 0, 0 , 0.38);
-    -webkit-box-shadow: 0px -15px 20px -13px rgba(0, 0, 0 , 0.38);
+    box-shadow: 0 -4px 14px -13px rgba(0, 0, 0 , 0.38);
+    -webkit-box-shadow: 0 -4px 14px -13px rgba(0, 0, 0 , 0.38);
 }
 .emoji-mart {
     position: absolute;
     // bottom: 40px;
     // left: 10px;
     border: none;
-    margin: -2px -2px 0px;
+    // margin: -2px -2px 0px;
 }

package/src/app/component/conversation-detail/conversation-header/conversation-header.component.html

@@ -132,7 +132,7 @@
         <span class="label-menu-item">{{ translationMap?.get('MAXIMIZE') }}</span>
     </div>
     <!-- ICON MINIMIZE -->
-    <div class="c21-header-button c21-right" *ngIf="heightStatus==='max' || heightStatus==='full' || fullscreenMode" (click)="onChangeSize('min')">
+    <div class="c21-header-button c21-right" *ngIf="heightStatus==='max' || heightStatus==='top' || fullscreenMode" (click)="onChangeSize('min')">
         <svg role="img" aria-labelledby="altIconTitle" class="icon-menu" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
             width="17" height="17" viewBox="0 0 17 17">
             <path d="M13.59 5.31h-1.7l3.3-3.3-1.2-1.2-3.3 3.3v-1.7a.85.85 0 1 0-1.7 0v4.6h4.6a.85.85 0 1 0 0-1.7M1.57 9.84c0 .47.38.85.85.85h1.7l-3.3 3.3 1.2 1.2 3.3-3.3v1.7a.85.85 0 1 0 1.7 0v-4.6h-4.6a.85.85 0 0 0-.85.85" fill="currentColor"></path>
@@ -141,8 +141,8 @@
         <span class="label-menu-item">{{ translationMap?.get('MINIMIZE') }}</span>
     </div>
 
-    <!-- FULLSCREEN -->
-    <div class="c21-header-button c21-right" *ngIf="heightStatus!=='full' && !fullscreenMode" (click)="onChangeSize('full')">
+    <!-- ICON TOP -->
+    <!-- <div class="c21-header-button c21-right" *ngIf="heightStatus!=='top' && !fullscreenMode" (click)="onChangeSize('top')">
         <svg  role="img" aria-labelledby="altIconTitle" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
             width="17" height="17" viewBox="0 0 17 17">
             <path fill="currentColor" d="M6.5,8.3l-2.8,2.8v-1.7c0-.5-.4-.9-.9-.9s-.8.4-.8.9v4.6h4.6c.5,0,.8-.4.8-.9s-.4-.8-.8-.8h-1.7l2.8-2.8-1.2-1.2ZM9.4,2c-.5,0-.8.4-.8.8s.4.9.8.9h1.7l-2.8,2.8,1.2,1.2,2.8-2.8v1.7c0,.5.4.8.8.8s.9-.4.9-.8V2h-4.6Z"/>
@@ -150,7 +150,7 @@
             <title id="altIconTitle">{{ translationMap?.get('FULLSCREEN') }}</title>
         </svg>
         <span class="label-menu-item">{{ translationMap?.get('FULLSCREEN') }}</span>
-    </div>
+    </div> -->
 
     <!-- ICON LOGOUT -->
     <div class="c21-header-button c21-right"  *ngIf="!hideSignOutOptionMenu" (click)="signOut()">

package/src/app/component/conversation-detail/conversation-header/conversation-header.component.ts

@@ -110,7 +110,7 @@ export class ConversationHeaderComponent implements OnInit, OnChanges {
     this.heightStatus = status
     if(status === 'min') this.onMenuOptionClick.emit(HEADER_MENU_OPTION.MINIMIZE)
     if(status === 'max') this.onMenuOptionClick.emit(HEADER_MENU_OPTION.MAXIMIZE)
-    if(status === 'full') this.onMenuOptionClick.emit(HEADER_MENU_OPTION.FULLSCREEN)
+    if(status === 'top') this.onMenuOptionClick.emit(HEADER_MENU_OPTION.TOP)
     this.onMenuOptionShow.emit(false)
   }
   toggleSound() {

package/src/app/component/message/buttons/action-button/action-button.component.scss

@@ -5,12 +5,13 @@
     --hoverTextColor: #{var(--blue)};
     --buttonFontSize: #{var(--button-in-msg-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
+    --padding: #{var(--button-in-msg-padding)};
     --fontFamily: #{var(--button-in-msg-font-family)};
 }
 
 .button-in-msg {
-    padding: 8px 16px!important;
-    position: relative;
+    padding: var(--padding);
+    // position: relative;
     max-width: var(--max-width);
     min-width: inherit;
     cursor: pointer;

package/src/app/component/message/buttons/link-button/link-button.component.scss

@@ -5,11 +5,12 @@
     --hoverTextColor: #{var(--blue)};
     --buttonFontSize: #{var(--button-in-msg-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
+    --padding: #{var(--button-in-msg-padding)};
     --font-family: #{var(--button-in-msg-font-family)};
 }
 
 .button-in-msg {
-    padding: 8px 16px!important;
+    padding: var(--padding);
     position: relative;
     max-width: var(--max-width);
     min-width: inherit;

package/src/app/component/message/buttons/text-button/text-button.component.scss

@@ -5,13 +5,14 @@
     --hoverTextColor: #{var(--blue)};
     --buttonFontSize: #{var(--button-in-msg-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
+    --padding: #{var(--button-in-msg-padding)};
     --font-family: #{var(--button-in-msg-font-family)};
 }
 
 
 .button-in-msg {
 
-    padding: 8px 16px!important;
+    padding: var(--padding);
     position: relative;
     max-width: var(--max-width);
     min-width: inherit;

package/src/app/sass/_variables.scss

@@ -22,12 +22,13 @@
     --button-in-msg-font-size: 15px;
     --button-in-msg-font-family: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
     --button-in-msg-max-width: 280px;
+    --button-in-msg-padding: 8px 16px;
 
     --max-width-images: 230px; //change also MAX_WIDTH_IMAGES in constants.ts
 
     --bkg-color-info-message: rgba(24, 119, 242, 0.1);
 
-    --chat-footer-height: 56px;
+    --chat-footer-height: 64px;
     --chat-footer-logo-height: 30px;
     --chat-footer-border-radius: 16px;
     --chat-footer-background-color: #f6f7fb;

package/src/app/utils/constants.ts

@@ -74,6 +74,6 @@ export const HEADER_MENU_OPTION = {
     RESTART     :   'restart',
     MAXIMIZE    :   'maximize',
     MINIMIZE    :   'minimize',
-    FULLSCREEN  :   'fullscreen'
+    TOP  :          'top'
 }
 

package/src/iframe-style.css

@@ -34,10 +34,7 @@
     
 }
 
-
 #tiledeskdiv.fullscreen {
-    /* transition: width 1s, height 1s; */
-    /* transition: all 0.5s ease-in !important; */
     right: 0px;
     left: 0px;
     top: 0px;
@@ -45,6 +42,17 @@
     width: 100%;
     height: 100%;  
 }
+
+#tiledeskdiv.top {
+    /* transition: width 1s, height 1s; */
+    /* transition: all 0.5s ease-in !important; */
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: var(--iframeMaxWidth);
+    height: var(--iframeMaxHeight);
+    transform: translate(-50%, -50%);  
+}
  
 
 @keyframes right-animate {
@@ -106,14 +114,14 @@
 }
 
 #tiledesk-container.open #tiledeskdiv.decreaseSize {
-    transition: all 0.5s ease-in;
+    transition: width 200ms, height 200ms, max-height 200ms, transform 300ms cubic-bezier(0, 1.2, 1, 1), opacity 83ms ease-out;
     width: var(--iframeMinWidth);
     height: var(--iframeMinHeight);
 }
 
 #tiledesk-container.open #tiledeskdiv.increaseSize {
     /* transition: width 1s, height 1s; */
-    transition: all 0.5s ease-in;
+    transition: width 200ms, height 200ms, max-height 200ms, transform 300ms cubic-bezier(0, 1.2, 1, 1), opacity 83ms ease-out;
     width: var(--iframeMaxWidth);
     height: var(--iframeMaxHeight);
 }