Merge branch 'feat/card-label', remote-tracking branch 'origin' into design/conv-card

app/javascript/dashboard/assets/scss/_foundation-settings.scss

@@ -249,7 +249,7 @@ $button-background-hover: scale-color($button-background, $lightness: -15%);
 $button-color: $white;
 $button-color-alt: $white;
 $button-radius: var(--border-radius-normal);
-$button-sizes: (tiny: var(--font-size-micro),
+$button-sizes: (tiny: var(--font-size-mini),
   small: var(--font-size-mini),
   default: var(--font-size-small),
   large: var(--font-size-medium));

app/javascript/dashboard/assets/scss/widgets/_buttons.scss

@@ -155,7 +155,6 @@ $default-button-height: 4.0rem;
   // Sizes
   &.tiny {
     height: var(--space-medium);
-    letter-spacing: 0.15px;
 
     .icon+.button__content {
       padding-left: var(--space-micro);
@@ -199,6 +198,10 @@ $default-button-height: 4.0rem;
     height: auto;
     margin: 0;
     padding: 0;
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 
 }

app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss

@@ -3,12 +3,10 @@
   0%,
   100% {
     transform: translateX(0);
-    opacity: 1;
   }
 
   50% {
     transform: translateX(-1px);
-    opacity: .8;
   }
 }
 
@@ -21,7 +19,7 @@
   position: relative;
 
   &.active {
-    animation: left-shift-animation 0.3s linear;
+    animation: left-shift-animation 0.25s ease-in-out;
     box-shadow: var(--shadow-small);
 
     +.conversation::after {

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -90,6 +90,7 @@
     align-items: center;
     justify-content: space-between;
     padding: $zero $zero $space-micro;
+    margin-left: var(--space-small);
 
     .page-title {
       margin-bottom: $zero;

app/javascript/dashboard/assets/scss/widgets/_tabs.scss

@@ -34,6 +34,7 @@
 // Tab chat type
 .tab--chat-type {
   @include flex;
+  margin-left: var(--space-minus-small);
 
   .tabs-title {
     a {
@@ -47,7 +48,7 @@
 
 .tabs-title {
   flex-shrink: 0;
-  margin: $zero $space-slab;
+  margin: $zero $space-small;
 
   .badge {
     background: $color-background;

app/javascript/dashboard/components/ChatList.vue

@@ -780,7 +780,6 @@ export default {
 }
 
 .conversations-list {
-  padding-top: var(--space-small);
   // Prevent the list from scrolling if the submenu is opened
   &.is-context-menu-open {
     overflow: hidden !important;

app/javascript/dashboard/components/ui/Label.vue

@@ -4,7 +4,7 @@
       <fluent-icon :icon="icon" size="12" class="label--icon" />
     </span>
     <span
-      v-if="variant === 'smooth'"
+      v-if="variant === 'smooth' && title && !icon"
       :style="{ background: color }"
       class="label-color-dot"
     />
@@ -125,6 +125,9 @@ export default {
 
   .label--icon {
     cursor: pointer;
+  }
+
+  .label-color-dot {
     margin-right: var(--space-smaller);
   }
 
@@ -143,10 +146,10 @@ export default {
   /* Color Schemes */
   &.primary {
     background: var(--w-100);
-    color: var(--w-900);
+    color: var(--w-800);
     border: 1px solid var(--w-200);
     a {
-      color: var(--w-900);
+      color: var(--w-800);
     }
     .label-color-dot {
       background: var(--w-600);
@@ -154,10 +157,10 @@ export default {
   }
   &.secondary {
     background: var(--s-100);
-    color: var(--s-900);
+    color: var(--s-800);
     border: 1px solid var(--s-200);
     a {
-      color: var(--s-900);
+      color: var(--s-800);
     }
     .label-color-dot {
       background: var(--s-600);
@@ -165,10 +168,10 @@ export default {
   }
   &.success {
     background: var(--g-100);
-    color: var(--g-900);
+    color: var(--g-800);
     border: 1px solid var(--g-200);
     a {
-      color: var(--g-900);
+      color: var(--g-800);
     }
     .label-color-dot {
       background: var(--g-600);
@@ -176,10 +179,10 @@ export default {
   }
   &.alert {
     background: var(--r-100);
-    color: var(--r-900);
+    color: var(--r-800);
     border: 1px solid var(--r-200);
     a {
-      color: var(--r-900);
+      color: var(--r-800);
     }
     .label-color-dot {
       background: var(--r-600);
@@ -187,13 +190,13 @@ export default {
   }
   &.warning {
     background: var(--y-100);
-    color: var(--y-900);
+    color: var(--y-800);
     border: 1px solid var(--y-200);
     a {
-      color: var(--y-900);
+      color: var(--y-800);
     }
     .label-color-dot {
-      background: var(--y-900);
+      background: var(--y-800);
     }
   }
 
@@ -221,7 +224,8 @@ export default {
 }
 
 .label-action--button {
-  margin-bottom: var(--space-minus-micro);
+  display: flex;
+  margin-right: var(--space-smaller);
 }
 
 .label-color-dot {
@@ -230,11 +234,13 @@ export default {
   height: var(--space-one);
   border-radius: var(--border-radius-small);
   margin-right: var(--space-smaller);
+  box-shadow: var(--shadow-small);
 }
 .label.small .label-color-dot {
   width: var(--space-small);
   height: var(--space-small);
   border-radius: var(--border-radius-small);
-  margin-right: var(--space-smaller);
+  margin-right: var(--space-micro);
+  box-shadow: var(--shadow-small);
 }
 </style>

app/javascript/dashboard/components/widgets/InboxName.vue

@@ -1,12 +1,12 @@
 <template>
   <woot-button
-    v-tooltip.bottom="$t('CONVERSATION.CARD.GOTO_INBOX')"
+    :title="$t('CONVERSATION.CARD.GOTO_INBOX')"
     class="inbox--icon"
     variant="link"
     size="tiny"
     color-scheme="secondary"
     :icon="computedInboxClass"
-    class-names="copy-icon"
+    class-names="inbox"
     @click="onClick"
   >
     {{ inbox.name }}
@@ -40,3 +40,8 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.inbox.button.clear.secondary {
+  color: var(--s-600);
+}
+</style>

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="conversationCard"
     class="conversation"
     :class="{
       active: isActiveChat,
@@ -24,7 +25,6 @@
     <thumbnail
       v-if="bulkActionCheck"
       :src="currentContact.thumbnail"
-      :badge="inboxBadge"
       class="sender-thumbnail"
       :username="currentContact.name"
       :status="currentContact.availability_status"
@@ -37,7 +37,7 @@
         <div class="conversation-meta">
           <inbox-name v-if="showInboxName" :inbox="inbox" />
           <woot-button
-            v-tooltip.bottom="$t('CONVERSATION.CARD.COPY_LINK')"
+            :title="$t('CONVERSATION.CARD.COPY_LINK')"
             class="conversation__id"
             variant="link"
             size="tiny"
@@ -51,7 +51,6 @@
         </div>
         <woot-label
           v-if="showAssignee"
-          v-tooltip="$t('AGENT_MGMT.MULTI_SELECTOR.TITLE.AGENT')"
           icon="headset"
           small
           :title="assigneeName"
@@ -62,6 +61,14 @@
         <h4 class="text-block-title conversation--user">
           {{ currentContact.name }}
         </h4>
+        <img
+          v-if="badgeSrc"
+          v-tooltip.right="$t(`CONVERSATION.VIA_TOOLTIP.${badgeTooltipKey}`)"
+          class="source-badge"
+          :style="badgeStyle"
+          :src="`/integrations/channels/badges/${badgeSrc}.png`"
+          alt="Badge"
+        />
       </div>
 
       <div class="content">
@@ -116,15 +123,33 @@
         </div>
       </div>
       <div v-if="activeLabels.length" class="footer">
-        <woot-label
+        <div class="overflow-wrap">
-          v-for="label in activeLabels"
+          <div class="labels-wrap" :class="{ expand: showAllLabels }">
-          :key="label.id"
+            <woot-label
-          :title="label.title"
+              v-for="label in activeLabels"
-          :description="label.description"
+              :key="label.id"
-          :color="label.color"
+              :title="label.title"
-          variant="smooth"
+              :description="label.description"
-          small
+              :color="label.color"
-        />
+              variant="smooth"
+              small
+            />
+            <woot-button
+              v-if="showExpandLabelButton"
+              :title="
+                showAllLabels
+                  ? $t('CONVERSATION.CARD.HIDE_LABELS')
+                  : $t('CONVERSATION.CARD.SHOW_LABELS')
+              "
+              class="remaining-labels"
+              :color-scheme="isActiveChat ? 'primary' : 'secondary'"
+              :variant="isActiveChat ? '' : 'hollow'"
+              :icon="showAllLabels ? 'chevron-left' : 'chevron-right'"
+              size="tiny"
+              @click="onShowLabels"
+            />
+          </div>
+        </div>
       </div>
     </div>
 
@@ -233,6 +258,8 @@ export default {
     return {
       hovered: false,
       showContextMenu: false,
+      showAllLabels: false,
+      showExpandLabelButton: false,
       contextMenu: {
         x: null,
         y: null,
@@ -349,8 +376,126 @@ export default {
       });
       return frontendURL(path);
     },
+    badgeTooltipKey() {
+      return {
+        instagram_direct_message: 'INSTAGRAM_DM',
+        facebook: 'FB_DM',
+        'twitter-tweet': 'TWITTER_TWEET',
+        'twitter-dm': 'TWITTER_DM',
+        whatsapp: 'WHATSAPP',
+        sms: 'SMS',
+        'Channel::Line': 'LINE',
+        'Channel::Telegram': 'TELEGRAM',
+        'Channel::WebWidget': 'WEB_WIDGET',
+      }[this.inboxBadge];
+    },
+    badgeSrc() {
+      return {
+        instagram_direct_message: 'instagram-dm',
+        facebook: 'messenger',
+        'twitter-tweet': 'twitter-tweet',
+        'twitter-dm': 'twitter-dm',
+        whatsapp: 'whatsapp',
+        sms: 'sms',
+        'Channel::Line': 'line',
+        'Channel::Telegram': 'telegram',
+        'Channel::WebWidget': '',
+      }[this.inboxBadge];
+    },
+    badgeStyle() {
+      const size = 10;
+      const badgeSize = `${size + 2}px`;
+      const borderRadius = `${size / 2}px`;
+      return { width: badgeSize, height: badgeSize, borderRadius };
+    },
+    remainingLabel() {
+      const { label } = this.chat;
+      const { name } = this.activeLabel;
+      return label.filter(l => l.name !== name);
+    },
+  },
+  watch: {
+    activeLabels() {
+      const footer = this.$refs.conversationCard.querySelector('.footer');
+      const labelsWrap = this.$refs.conversationCard.querySelector(
+        '.labels-wrap'
+      );
+      const labels = this.$refs.conversationCard.querySelectorAll('.label');
+
+      if (!footer || !labelsWrap || this.activeLabels.length === 0) {
+        return;
+      }
+
+      Array.from(labels).forEach(label => {
+        label.classList.remove('hidden');
+      });
+
+      this.showExpandLabelButton =
+        footer.offsetWidth - 24 < labelsWrap.scrollWidth;
+      if (!this.showExpandLabelButton) return;
+
+      const labelsWrapWidth = footer.scrollWidth;
+      let currentIndex = 0;
+      let labelsWidth = 0;
+      if (labels.length === 0) return;
+
+      do {
+        if (labelsWidth + 80 < labelsWrapWidth) {
+          labelsWidth += Array.from(labels)[currentIndex].offsetWidth + 8;
+          currentIndex += 1;
+        } else {
+          break;
+        }
+      } while (currentIndex < labels.length);
+
+      Array.from(labels).forEach((label, index) => {
+        if (index >= currentIndex) {
+          label.classList.add('hidden');
+        } else {
+          label.classList.remove('hidden');
+        }
+      });
+    },
+  },
+  mounted() {
+    this.collapseLabels();
   },
   methods: {
+    collapseLabels() {
+      const footer = this.$refs.conversationCard.querySelector('.footer');
+      const labelsWrap = this.$refs.conversationCard.querySelector(
+        '.labels-wrap'
+      );
+      const labels = this.$refs.conversationCard.querySelectorAll('.label');
+
+      if (!footer || !labelsWrap || this.activeLabels.length === 0) {
+        return;
+      }
+
+      const labelsWrapWidth = footer.scrollWidth;
+      let currentIndex = 0;
+      let labelsWidth = 0;
+      this.showExpandLabelButton =
+        footer.offsetWidth - 24 < labelsWrap.scrollWidth;
+
+      if (!this.showExpandLabelButton) return;
+      do {
+        if (labelsWidth + 80 < labelsWrapWidth) {
+          labelsWidth += Array.from(labels)[currentIndex].offsetWidth + 8;
+          currentIndex += 1;
+        } else {
+          break;
+        }
+      } while (currentIndex < labels.length);
+
+      Array.from(labels).forEach((label, index) => {
+        if (index >= currentIndex) {
+          label.classList.add('hidden');
+        } else {
+          label.classList.remove('hidden');
+        }
+      });
+    },
     cardClick(chat) {
       const { activeInbox } = this;
       const path = conversationUrl({
@@ -405,6 +550,10 @@ export default {
         snoozedUntil
       );
     },
+    onShowLabels(e) {
+      e.stopPropagation();
+      this.showAllLabels = !this.showAllLabels;
+    },
     async onAssignAgent(agent) {
       this.$emit('assign-agent', agent, [this.chat.id]);
       this.closeContextMenu();
@@ -428,8 +577,8 @@ export default {
 .conversation {
   display: flex;
   position: relative;
-  border-radius: var(--border-radius-medium);
+  border-radius: var(--border-radius-small);
-  margin: var(--space-smaller) var(--space-small) 0;
+  margin: var(--space-smaller);
   padding: var(--space-small);
   cursor: pointer;
   position: relative;
@@ -438,7 +587,7 @@ export default {
   &::after {
     content: '';
     right: 0;
-    top: -5px;
+    top: -3.5px;
     width: calc(100% - 40px);
     position: absolute;
     border-top: 1px solid var(--s-50);
@@ -451,19 +600,9 @@ export default {
     }
   }
 
-  &.active {
-    background: var(--w-25);
-    border: 1px solid var(--w-200);
-  }
-
   &.active::after {
     border-top-color: transparent;
   }
-  &.unread-chat {
-    .message__content {
-      font-weight: var(--font-weight-medium);
-    }
-  }
 
   &.compact {
     padding-left: 0;
@@ -479,23 +618,6 @@ export default {
   min-width: 0;
   margin-left: var(--space-small);
 }
-.message__content {
-  display: flex;
-  align-items: center;
-  color: var(--color-body);
-  flex-grow: 0;
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-normal);
-  height: var(--font-size-medium);
-  line-height: var(--font-size-medium);
-  margin: 0;
-  max-width: 100%;
-  width: auto;
-  .fluent-icon {
-    flex-shrink: 0;
-    margin-right: var(--space-micro);
-  }
-}
 .meta {
   display: flex;
   flex-grow: 1;
@@ -537,10 +659,40 @@ export default {
 .footer {
   display: flex;
   align-items: center;
-  flex-flow: row wrap;
+  margin-top: var(--space-smaller);
 
-  .label {
+  .hidden {
+    display: none;
+  }
+
+  .remaining-labels {
+    height: var(--space-two);
+    position: sticky;
+    flex-shrink: 0;
+    right: 0;
     margin-bottom: var(--space-smaller);
+    margin-right: var(--space-medium);
+  }
+}
+
+.labels-wrap {
+  display: flex;
+  align-items: center;
+  height: var(--space-medium);
+  overflow: hidden;
+  min-width: 0;
+  flex-shrink: 1;
+  &.expand {
+    height: auto;
+    overflow: visible;
+    flex-flow: row wrap;
+    .hidden {
+      display: inline-flex;
+    }
+
+    .label {
+      margin-bottom: var(--space-smaller);
+    }
   }
 }
 
@@ -577,22 +729,11 @@ export default {
   /* color: var(--s-800); */
 }
 
-.footer {
-  display: flex;
-  align-items: center;
-  flex-flow: row wrap;
-  margin-top: var(--space-smaller);
-
-  .label {
-    margin-bottom: var(--space-smaller);
-  }
-}
-
 .conversation-meta {
   display: flex;
 }
 .conversation__id {
-  margin-left: var(--space-small);
+  margin-left: var(--space-smaller);
 }
 
 .message--attachment-icon {
@@ -618,12 +759,89 @@ export default {
 }
 
 .badge {
-  min-width: var(--space-normal);
+  min-width: 1.4rem;
-  height: var(--space-normal);
+  height: 1.4rem;
-  line-height: var(--space-normal);
+  display: flex;
-  padding: 0 var(--space-micro);
+  padding: 0;
-  text-align: center;
+  align-items: center;
+  justify-content: center;
   border-radius: var(--space-medium);
   font-weight: var(--font-weight-bold);
 }
+
+.source-badge {
+  border: 1px solid var(--s-50);
+  margin-left: var(--space-smaller);
+  filter: grayscale(100%);
+  opacity: 0.7;
+
+  &:hover {
+    filter: grayscale(0);
+    opacity: 1;
+  }
+}
+
+.overflow-wrap {
+  display: flex;
+  width: 100%;
+}
+
+.copy-icon.button.clear.secondary {
+  color: var(--s-600);
+}
+
+.conversation.unread-chat,
+.conversation.active {
+  background: var(--w-25);
+
+  .conversation--user {
+    font-weight: var(--font-weight-bold);
+  }
+  .conversation--message {
+    font-weight: var(--font-weight-medium);
+  }
+}
+.conversation.active {
+  background: var(--w-500);
+
+  .conversation--user {
+    color: var(--white);
+  }
+  .conversation-meta {
+    color: var(--w-25);
+  }
+  .conversation__id {
+    color: var(--w-25);
+  }
+
+  .button.secondary.inbox,
+  .button.conversation__id,
+  .time-ago,
+  .message--attachment-icon,
+  .last-message-icon {
+    color: var(--w-75);
+  }
+  .conversation--message {
+    color: var(--w-25);
+  }
+
+  .labels-wrap .label {
+    background: var(--w-600);
+    color: var(--w-75);
+    border-color: var(--w-600);
+    .label-color-dot {
+      border: 1px solid var(--w-100);
+    }
+  }
+
+  .assignee-label {
+    background: var(--w-600);
+    color: var(--w-75);
+    border-color: var(--w-600);
+  }
+
+  .source-badge {
+    border-color: var(--w-200);
+  }
+}
 </style>

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -21,7 +21,7 @@
           />
         </h3>
         <div class="conversation--header--actions">
-          <inbox-name :inbox="inbox" class="margin-right-small" />
+          <inbox-name :inbox="inbox" class="inbox-name" />
           <span
             v-if="isSnoozed"
             class="snoozed--display-text margin-right-small"
@@ -208,4 +208,8 @@ export default {
 .hmac-warning__icon {
   color: var(--y-600);
 }
+
+.button.inbox-name {
+  margin-right: var(--space-small);
+}
 </style>

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -156,7 +156,21 @@
     },
     "CARD": {
       "COPY_LINK": "Copy link",
-      "GOTO_INBOX": "Goto inbox"
+      "GOTO_INBOX": "Goto inbox",
+      "SHOW_LABELS": "Show labels",
+      "HIDE_LABELS": "Hide labels",
+      "AGENT_TOOLTIP": "Right click to change agent"
+    },
+    "VIA_TOOLTIP": {
+      "INSTAGRAM_DM": "Via instagram DM",
+      "FB_DM": "Via facebook DM",
+      "TWITTER_TWEET": "Via tweet",
+      "TWITTER_DM": "Via twitter DM",
+      "WHATSAPP": "Via WhatsApp",
+      "SMS": "Via SMS",
+      "LINE": "Via Line",
+      "TELEGRAM": "Via telegram",
+      "WEB_WIDGET": "Via live chat"
     }
   },
   "EMAIL_TRANSCRIPT": {

app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue

@@ -153,14 +153,15 @@ export default {
 <style lang="scss" scoped>
 .search-wrap {
   position: relative;
+  margin-top: var(--space-smaller);
 }
 
 .search {
   display: flex;
   padding: 0;
   border-bottom: 1px solid transparent;
-  padding: var(--space-one) var(--space-normal) var(--space-smaller)
+  padding: var(--space-small);
-    var(--space-normal);
+  height: 4rem;
 
   &:hover {
     .search--icon {

app/javascript/shared/assets/stylesheets/colors.scss

@@ -86,8 +86,8 @@
   // Common color aliases
   --color-woot: var(--w-500);
 
-  --color-heading: #1f2d3d;
+  --color-heading: var(--s-900);
-  --color-body: #3c4858;
+  --color-body: var(--s-700);
 
   --color-border: var(--s-75);
   --color-border-light: var(--s-50);

app/javascript/shared/components/FluentIcon/dashboard-icons.json

@@ -111,7 +111,7 @@
   "microphone-pause-outline": "M14,19H18V5H14M6,19H10V5H6V19Z",
   "microphone-play-outline": "M8,5.14V19.14L19,12.14L8,5.14Z",
   "navigation-outline": "M3 17h18a1 1 0 0 1 .117 1.993L21 19H3a1 1 0 0 1-.117-1.993L3 17h18H3Zm0-6l18-.002a1 1 0 0 1 .117 1.993l-.117.007L3 13a1 1 0 0 1-.117-1.993L3 11l18-.002L3 11Zm0-6h18a1 1 0 0 1 .117 1.993L21 7H3a1 1 0 0 1-.117-1.993L3 5h18H3Z",
-  "number-symbol-outline": "M10.987 2.89a.75.75 0 1 0-1.474-.28L8.494 7.999 3.75 8a.75.75 0 1 0 0 1.5l4.46-.002-.946 5-4.514.002a.75.75 0 0 0 0 1.5l4.23-.002-.967 5.116a.75.75 0 1 0 1.474.278l1.02-5.395 5.474-.002-.968 5.119a.75.75 0 1 0 1.474.278l1.021-5.398 4.742-.002a.75.75 0 1 0 0-1.5l-4.458.002.946-5 4.512-.002a.75.75 0 1 0 0-1.5l-4.229.002.966-5.104a.75.75 0 0 0-1.474-.28l-1.018 5.385-5.474.002.966-5.107Zm-1.25 6.608 5.474-.003-.946 5-5.474.002.946-5Z",
+  "number-symbol-outline": "M10.985 3.165a1 1 0 0 0-1.973-.33l-.86 5.163L3.998 8a1 1 0 1 0 .002 2l3.817-.002-.667 4L3 14a1 1 0 1 0 0 2l3.817-.002-.807 4.838a1 1 0 1 0 1.973.329l.862-5.167 4.975-.003-.806 4.84a1 1 0 1 0 1.972.33l.862-5.17L20 15.992a1 1 0 0 0 0-2l-3.819.001.667-4.001L21 9.99a1 1 0 0 0 0-2l-3.818.002.804-4.827a1 1 0 1 0-1.972-.33l-.86 5.159-4.975.003.806-4.832Zm-1.14 6.832 4.976-.003-.667 4.001-4.976.002.667-4Z",
   "open-outline": "M6.25 4.5A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .966.783 1.75 1.75 1.75h11.5a1.75 1.75 0 0 0 1.75-1.75v-4a.75.75 0 0 1 1.5 0v4A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h4a.75.75 0 0 1 0 1.5h-4ZM13 3.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-1.5 0V5.56l-5.22 5.22a.75.75 0 0 1-1.06-1.06l5.22-5.22h-4.69a.75.75 0 0 1-.75-.75Z",
   "panel-sidebar-outline": "M4.75 4A2.75 2.75 0 0 0 2 6.75v10.5A2.75 2.75 0 0 0 4.75 20h14.5A2.75 2.75 0 0 0 22 17.25V6.75A2.75 2.75 0 0 0 19.25 4H4.75ZM9 18.5v-13h10.25c.69 0 1.25.56 1.25 1.25v10.5c0 .69-.56 1.25-1.25 1.25H9ZM5.5 3.5h4M5.5 5.5h4M5.5 7.5h4M5.5 9.5h4",
   "panel-contract-outline": "M14.193 14.751a.75.75 0 0 0 1.059.056l2.5-2.25a.75.75 0 0 0 0-1.114l-2.5-2.25a.75.75 0 0 0-1.004 1.115l1.048.942H11.75a.75.75 0 1 0 0 1.5h3.546l-1.048.942a.75.75 0 0 0-.055 1.06ZM2 6.75A2.75 2.75 0 0 1 4.75 4h14.5A2.75 2.75 0 0 1 22 6.75v10.5A2.75 2.75 0 0 1 19.25 20H4.75A2.75 2.75 0 0 1 2 17.25V6.75ZM9 5.5v13h10.25c.69 0 1.25-.56 1.25-1.25V6.75c0-.69-.56-1.25-1.25-1.25H9Z",