@iamproperty/components 7.2.2--beta3 → 7.4.0

package/assets/ts/components/card/card.component.ts

@@ -32,6 +32,20 @@ class iamCard extends HTMLElement {
     const cardComponent = this;
     const cardBody = cardComponent.shadowRoot.querySelector('.card__body');
 
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+
+    if (!window.customElements.get(`iam-menu`)) {
+      import(/* @vite-ignore */ `${assetLocation}/js/components/menu/menu.component.js`)
+        .then((module) => {
+          window.customElements.define(`iam-menu`, module.default);
+        })
+        .catch((err) => {
+          console.log(err.message);
+        });
+    }
+
     setupCard(cardComponent);
 
     // Add Illustration HTML
@@ -51,22 +65,19 @@ class iamCard extends HTMLElement {
 
     // Add the dialog wrapper HTML
     if (cardComponent.querySelector('[slot="btns"]')) {
-      cardComponent.shadowRoot.innerHTML += `<div class="dialog__wrapper">
-      <button class="btn btn-secondary btn-compact fa-ellipsis-vertical" popovertarget="actions" title="Further actions" type="button">Open further actions</button>
-      <div class="dialog--fix dialog--list" id="actions" popover>
+      cardComponent.shadowRoot.innerHTML += `<div class="menu__wrapper">
+      <button class="btn btn-secondary btn-compact fa-ellipsis-vertical m-0" popovertarget="actions" style="anchor-name: --anchor-el;" title="Further actions" type="button">Open further actions</button>
+      <iam-menu class="dialog--fix dialog--list" id="actions" style="position-anchor: --anchor-el;" popover>
         <slot name="btns"></slot>
-      </div>
+      </iam-menu>
     </div>`;
 
       // safari and firefox anchor fix for cards
       if (!CSS.supports('top', 'anchor(top)')) {
-
-
         const actionButton = this.shadowRoot?.querySelector('[popovertarget="actions"]');
         const actionPopover = this.shadowRoot?.querySelector('[popover]');
 
         actionButton?.addEventListener('click', (event) => {
-
           this.style.setProperty('overflow', 'visible');
           this.style.setProperty('z-index', '999999');
 
@@ -76,18 +87,15 @@ class iamCard extends HTMLElement {
 
           actionPopover.style.setProperty('display', 'block');
           actionPopover.style.setProperty('top', top + 'px');
-          actionPopover.style.setProperty('left', (left - 100) + 'px');
+          actionPopover.style.setProperty('left', left - 100 + 'px');
         });
 
-        document.addEventListener("scroll", (event) => {
-
+        document.addEventListener('scroll', (event) => {
           actionPopover.style.setProperty('display', 'none');
         });
-
       }
     }
 
-
     // Make sure slotted buttons and links have correct button classes
     Array.from(cardComponent.querySelectorAll('[slot="btns"]')).forEach((button) => {
       button.classList.add('btn');
@@ -107,8 +115,8 @@ class iamCard extends HTMLElement {
       });
     }
 
-    if (cardComponent.shadowRoot.querySelector('.dialog__wrapper')) {
-      const element = cardComponent.shadowRoot.querySelector('.dialog__wrapper');
+    if (cardComponent.shadowRoot.querySelector('.menu__wrapper')) {
+      const element = cardComponent.shadowRoot.querySelector('.menu__wrapper');
 
       element.addEventListener('mouseenter', () => {
         cardComponent.classList.add('prevent-hover');

package/assets/ts/components/collapsible-side/collapsible-side.component.ts

@@ -30,6 +30,7 @@ class iamCollapsibleSideMenu extends HTMLElement {
 
         <div class="side-menu" part="side-menu">
           <button class="btn btn-compact fa-chevron-right btn-secondary btn-sm btn-collapse" part="btn">Open or close Collapsible menu</button>
+          
           <div class="side-menu-content closed" part="side-menu-content">
             <slot name="menu"></slot>
           </div>
@@ -41,35 +42,55 @@ class iamCollapsibleSideMenu extends HTMLElement {
 
       </div>
     `;
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+    if (this.shadowRoot) {
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
   }
 
   connectedCallback(): void {
+    if (!this.shadowRoot) return;
+
+    const container = this.shadowRoot.querySelector('.container');
     const sideMenu = this.shadowRoot.querySelector('.side-menu');
     const sideMenuContent = this.shadowRoot.querySelector('.side-menu-content');
     const mainContent = this.shadowRoot.querySelector('.main-content');
     const button = this.shadowRoot.querySelector('.side-menu > .btn');
 
+    if (!sideMenu || !sideMenuContent || !mainContent || !button) return;
+
     // Load external CSS if needed
-    if (this.hasAttribute('data-css'))
-      this.shadowRoot
-        .querySelector('.styles')
-        .insertAdjacentHTML('beforeend', `@import "${this.getAttribute('data-css')}";`);
+    if (this.hasAttribute('data-css')) {
+      const styles = this.shadowRoot.querySelector('.styles') as HTMLStyleElement;
+      if (styles) {
+        styles.insertAdjacentHTML('beforeend', `@import "${this.getAttribute('data-css')}";`);
+      }
+    }
 
-    // Set sde nav title
-    if (!this.hasAttribute('data-title')) this.setAttribute('data-title', 'configuration');
+    // Set side nav title
+    if (!this.hasAttribute('data-title')) {
+      this.setAttribute('data-title', 'configuration');
+    }
 
     sideMenuContent.insertAdjacentHTML('afterbegin', `<span class="h3">${this.getAttribute('data-title')}</span>`);
     mainContent.insertAdjacentHTML('afterbegin', `<span class="h3">${this.getAttribute('data-title')}</span>`);
 
-    if (this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)')) {
-      this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)').classList.add('h4');
-      this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)').classList.add('main-content__title');
+    const titleElement = this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)') as HTMLElement;
+    if (titleElement) {
+      titleElement.classList.add('h4', 'main-content__title');
     }
 
     if (this.hasAttribute('open') && window.innerWidth > 992) {
       sideMenu.classList.add('open');
-      button.setAttribute('aria-expanded', true);
+      button.setAttribute('aria-expanded', 'true');
+    }
+
+    if (this.hasAttribute('inline')) {
+      container.classList.add('inline');
+    }
+
+    if (this.hasAttribute('menu-right')) {
+      sideMenu.classList.add('menu-right');
     }
 
     // Open the menu
@@ -79,7 +100,7 @@ class iamCollapsibleSideMenu extends HTMLElement {
 
         setTimeout(function () {
           sideMenu.classList.add('open');
-          button.setAttribute('aria-expanded', true);
+          button.setAttribute('aria-expanded', 'true');
         }, 100);
       } else {
         sideMenu.classList.remove('open');
@@ -122,6 +143,26 @@ class iamCollapsibleSideMenu extends HTMLElement {
           }, 1000); // Delay until its close so the animation is broken
       }
     });
+
+    const sideMenuParentGroups = this.querySelectorAll('.parent');
+    const sideMenuParentGroupsTopLinks = this.querySelectorAll('.parent > li:first-of-type');
+
+    sideMenuParentGroupsTopLinks?.forEach((parentLink) => {
+      parentLink.addEventListener('click', () => {
+        if (!parentLink || !parentLink.parentElement) return false; // make sure elements exist
+
+        if (parentLink.parentElement.classList.contains('reveal')) {
+          parentLink.parentElement.classList.remove('reveal'); // remove if clicking a revealed parent
+        } else {
+          // remove other reveals and add reveal to this one
+          sideMenuParentGroups?.forEach((parentGroup) => {
+            parentGroup.classList.remove('reveal');
+          });
+
+          parentLink.parentElement.classList.add('reveal');
+        }
+      });
+    });
   }
 }
 

package/assets/ts/components/content/content.component.ts

@@ -0,0 +1,78 @@
+class iamContent extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+
+    const loadCSS = `@import "${assetLocation}/css/components/content.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${loadCSS}
+
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <div class="content__container">
+      <slot></slot>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const component = this;
+    const url = this.getAttribute('data-url');
+
+    const registerComponents = (contentComponent): void => {
+      const components = ['card', 'marketing', 'notification'];
+
+      const assetLocation = document.body.hasAttribute('data-assets-location')
+        ? document.body.getAttribute('data-assets-location')
+        : '/assets';
+
+      // Load components - Each component will load once the first of its type has been loaded
+      components.forEach((component) => {
+        if (component == 'notification') {
+          document.querySelectorAll('[data-notification]').forEach((element) => {
+            element.outerHTML = element.outerHTML
+              .replace(/<div/g, '<iam-notification')
+              .replace(/<\/div>/g, '</iam-notification>');
+          });
+        }
+
+        if (contentComponent.getElementsByTagName(`iam-${component}`).length === 0) return;
+
+        import(/* @vite-ignore */ `${assetLocation}/js/components/${component}/${component}.component.js`)
+          .then((module) => {
+            if (!window.customElements.get(`iam-${component}`))
+              window.customElements.define(`iam-${component}`, module.default);
+          })
+          .catch((err) => {
+            console.log(err.message);
+          });
+      });
+    };
+
+    if (url) {
+      const newXHRRequest = new XMLHttpRequest();
+      newXHRRequest.open('GET', url, true);
+
+      newXHRRequest.onload = function (): void {
+        if (this.status === 200) {
+          const response = JSON.parse(this.responseText);
+          component.innerHTML = `${response.content.rendered}`;
+
+          registerComponents(component);
+        }
+      };
+
+      newXHRRequest.send();
+    }
+  }
+}
+
+export default iamContent;

package/assets/ts/components/marketing/marketing.component.ts

@@ -16,7 +16,7 @@ class iamMarketing extends HTMLElement {
     const coreCSS = document.body.hasAttribute('data-core-css')
       ? document.body.getAttribute('data-core-css')
       : `${assetLocation}/css/core.min.css`;
-    const loadCSS = `@import "${assetLocation}/css/components/marketing.css";`;
+    const loadCSS = `@import "${assetLocation}/css/components/marketing.component.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `

package/assets/ts/components/menu/menu.component.ts

@@ -24,9 +24,14 @@ class iamMenu extends HTMLElement {
     const menuID = this.hasAttribute('id') ? this.getAttribute('id') : false;
     const menuButton = document.querySelector(`[popovertarget="${menuID}"]`);
 
-    const menuInner = this.shadowRoot.querySelector('.menu--inner');
-    const topLevelmenuItems = this.querySelectorAll(':scope > a, :scope > button, :scope > details > summary');
-    const menuItems = this.querySelectorAll('a, button');
+    let topLevelmenuItems = this.querySelectorAll(':scope > a, :scope > button, :scope > details > summary');
+    let menuItems = this.querySelectorAll('a, button');
+
+    if (this.closest('.menu__wrapper')) {
+      menuItems = this.shadowRoot.querySelector('slot').assignedElements({ flatten: true });
+      topLevelmenuItems = menuItems;
+    }
+
     const subMenus = this.querySelectorAll('details');
 
     let subNextIndex;
@@ -34,188 +39,172 @@ class iamMenu extends HTMLElement {
 
     // Set the needed CSS styles to connect the ID attribute to the anchor name
     if (menuID && menuButton) {
-      menuInner?.setAttribute('role', 'menu');
+      this.setAttribute('role', 'menu');
       this.style['position-anchor'] = `--${menuID}`;
 
       menuButton?.setAttribute('aria-haspopup', 'true');
       menuButton?.style['anchor-name'] = `--${menuID}`;
       menuButton?.setAttribute('aria-controls', menuID);
+    }
 
-      subMenus.forEach((item, index) => {
-        item.setAttribute('role', 'menu');
-      });
-
-      menuItems.forEach((item, index) => {
-        item.setAttribute('role', 'menuitem');
-        item.setAttribute('tabindex', '0');
-
-        if (index == 0) {
-          item.setAttribute('autofocus', true);
-        }
-      });
-
-      this.addEventListener('keydown', (event) => {
-        if (event && event.target instanceof HTMLElement && event.target.closest('a, button, summary')) {
-          const activeItem = document.activeElement;
-          const prevIndex = Array.from(topLevelmenuItems).indexOf(activeItem) - 1;
-          const nextIndex = Array.from(topLevelmenuItems).indexOf(activeItem) + 1;
-
-          switch (
-            event.keyCode // change to event.key to key to use the above variable
-          ) {
-            case 27: // Esc
-              if (activeItem.closest('details')) {
-                event.stopPropagation();
-                event.preventDefault();
-                activeItem.closest('details').removeAttribute('open');
-                activeItem.closest('details').querySelector(':scope summary').focus();
-              } else {
-                event.stopPropagation();
-                menuButton.focus();
-              }
-
-              break;
-            case 32: // Space
-            case 13: // Enter
-              if (activeItem.matches('summary') && !activeItem.parentElement.matches('details[open]')) {
-                activeItem.parentElement.setAttribute('open', true);
-                const subMenuItems = activeItem
-                  .closest('details')
-                  .querySelectorAll('a, button, :scope details > summary');
-                Array.from(subMenuItems)[0].focus();
-              }
-
-              break;
-            case 35: // end
-              event.stopPropagation();
-              event.preventDefault();
-
-              this.querySelector('details[open]').removeAttribute('open');
-              Array.from(menuItems)[menuItems.length - 1].focus();
-
-              break;
-            case 36: // home
-              event.stopPropagation();
-              event.preventDefault();
-
-              this.querySelector('details[open]').removeAttribute('open');
-              Array.from(menuItems)[0].focus();
-
-              break;
-            case 38: // up
+    menuItems.forEach((item, index) => {
+      item.setAttribute('role', 'menuitem');
+      item.setAttribute('tabindex', '0');
+
+      if (index == 0) {
+        item.setAttribute('autofocus', true);
+      }
+    });
+
+    this.addEventListener('keydown', (event) => {
+      if (event && event.target instanceof HTMLElement && event.target.closest('a, button, summary')) {
+        const activeItem = document.activeElement;
+        const prevIndex = Array.from(topLevelmenuItems).indexOf(activeItem) - 1;
+        const nextIndex = Array.from(topLevelmenuItems).indexOf(activeItem) + 1;
+
+        switch (
+          event.keyCode // change to event.key to key to use the above variable
+        ) {
+          case 27: // Esc
+            if (activeItem.closest('details')) {
               event.stopPropagation();
               event.preventDefault();
-
-              if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {
-                if (Array.from(topLevelmenuItems)[prevIndex] != undefined)
-                  Array.from(topLevelmenuItems)[prevIndex].focus();
-                else Array.from(topLevelmenuItems)[topLevelmenuItems.length - 1].focus();
-              } else if (activeItem.closest('details')) {
-                const subMenuItems = activeItem
-                  .closest('details')
-                  .querySelectorAll('a, button, :scope details > summary');
-                subPrevIndex = Array.from(subMenuItems).indexOf(activeItem) - 1;
-
-                if (Array.from(subMenuItems)[subPrevIndex] != undefined) Array.from(subMenuItems)[subPrevIndex].focus();
-                else Array.from(subMenuItems)[subMenuItems.length - 1].focus();
-              }
-
-              break;
-            case 40: // down
+              activeItem.closest('details').removeAttribute('open');
+              activeItem.closest('details').querySelector(':scope summary').focus();
+            } else {
               event.stopPropagation();
-              event.preventDefault();
-
-              if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {
-                if (Array.from(topLevelmenuItems)[nextIndex] != undefined)
-                  Array.from(topLevelmenuItems)[nextIndex].focus();
-                else Array.from(topLevelmenuItems)[0].focus();
-              } else if (activeItem.closest('details')) {
-                const subMenuItems = activeItem
-                  .closest('details')
-                  .querySelectorAll('a, button, :scope details > summary');
-                subNextIndex = Array.from(subMenuItems).indexOf(activeItem) + 1;
-
-                if (Array.from(subMenuItems)[subNextIndex] != undefined) Array.from(subMenuItems)[subNextIndex].focus();
-                else Array.from(subMenuItems)[0].focus();
-              }
-
-              break;
-          }
+              menuButton.focus();
+            }
+
+            break;
+          case 32: // Space
+          case 13: // Enter
+            break;
+          case 35: // end
+            event.stopPropagation();
+            event.preventDefault();
+
+            this.querySelector('details[open]').removeAttribute('open');
+            Array.from(menuItems)[menuItems.length - 1].focus();
+
+            break;
+          case 36: // home
+            event.stopPropagation();
+            event.preventDefault();
+
+            this.querySelector('details[open]').removeAttribute('open');
+            Array.from(menuItems)[0].focus();
+
+            break;
+          case 38: // up
+            event.stopPropagation();
+            event.preventDefault();
+
+            if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {
+              if (Array.from(topLevelmenuItems)[prevIndex] != undefined)
+                Array.from(topLevelmenuItems)[prevIndex].focus();
+              else Array.from(topLevelmenuItems)[topLevelmenuItems.length - 1].focus();
+            } else if (activeItem.closest('details')) {
+              const subMenuItems = activeItem
+                .closest('details')
+                .querySelectorAll('a, button, :scope details > summary');
+              subPrevIndex = Array.from(subMenuItems).indexOf(activeItem) - 1;
+
+              if (Array.from(subMenuItems)[subPrevIndex] != undefined) Array.from(subMenuItems)[subPrevIndex].focus();
+              else Array.from(subMenuItems)[subMenuItems.length - 1].focus();
+            }
+
+            break;
+          case 40: // down
+            event.stopPropagation();
+            event.preventDefault();
+
+            if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {
+              if (Array.from(topLevelmenuItems)[nextIndex] != undefined)
+                Array.from(topLevelmenuItems)[nextIndex].focus();
+              else Array.from(topLevelmenuItems)[0].focus();
+            } else if (activeItem.closest('details')) {
+              const subMenuItems = activeItem
+                .closest('details')
+                .querySelectorAll('a, button, :scope details > summary');
+              subNextIndex = Array.from(subMenuItems).indexOf(activeItem) + 1;
+
+              if (Array.from(subMenuItems)[subNextIndex] != undefined) Array.from(subMenuItems)[subNextIndex].focus();
+              else Array.from(subMenuItems)[0].focus();
+            }
+
+            break;
+        }
+      }
+    });
+
+    this.addEventListener('toggle', (e) => {
+      const updateEvent = new CustomEvent(e.newState, { detail: { id: this.getAttribute('id'), target: e.target } });
+      this.dispatchEvent(updateEvent);
+
+      // Fix the focus
+      if (this.closest('.menu__wrapper')) {
+        menuItems[0].focus();
+      }
+
+      if (this.hasAttribute('popover-open')) {
+        e.preventDefault();
+        this.removeAttribute('popover-open');
+        this.hidePopover();
+      }
+
+      if (this.matches(':popover-open') && document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)) {
+        document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)?.setAttribute('aria-pressed', 'true');
+        document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)?.classList.add('active');
+      } else {
+        document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)?.removeAttribute('aria-pressed');
+        document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)?.classList.remove('active');
+      }
+    });
+
+    this.addEventListener('click', (event) => {
+      if (
+        event &&
+        event.target instanceof HTMLElement &&
+        event.target.closest('button:has(+ iam-menu:not([popover]))')
+      ) {
+        const button = event.target.closest('button:has(+ iam-menu)');
+
+        button?.classList.toggle('open');
+      } else if (event && event.target instanceof HTMLElement && event.target.closest('button.selectable')) {
+        const button = event.target.closest('button.selectable');
+        if (this.hasAttribute('multiple')) {
+          button.classList.toggle('selected');
+        } else if (button?.classList.contains('selected')) {
+          this.querySelectorAll('.selected').forEach((item) => {
+            item.classList.remove('selected');
+          });
+        } else {
+          this.querySelectorAll('.selected').forEach((item) => {
+            item.classList.remove('selected');
+          });
+          button.classList.add('selected');
+        }
+      }
+    });
+
+    // safari and firefox anchor fix for cards
+    if (!CSS.supports('top', 'anchor(top)')) {
+      document.addEventListener('click', (event) => {
+        if (event.originalTarget && event.originalTarget.matches('[popovertarget]')) {
+          const button = event.originalTarget;
+          const popoverID = button.getAttribute('popovertarget');
+          const popover = document.getElementById(popoverID);
+
+          const viewportOffset = button.getBoundingClientRect();
+          const top = viewportOffset.top;
+          const left = viewportOffset.left;
+
+          popover.style.setProperty('top', top + 'px');
+          popover.style.setProperty('left', left + button.clientWidth + 'px');
         }
       });
     }
-
-    // insert extra CSS to help style inline details and summary items to allow collapsible sub menus
-    if (this.querySelector('details') && !document.getElementById('menuGlobalStyles'))
-      document.head.insertAdjacentHTML(
-        'beforeend',
-        `<style id="menuGlobalStyles">
-iam-menu details > * {
-  background: unset !important;
-  border: unset !important;
-  color: inherit!important;
-  font-weight: inherit!important;
-  font-family: inherit!important;
-  font-size: 1rem!important;
-  display: block!important;
-  margin: var(--menu-item-margin, 0 0 0.25rem 0)!important;
-  padding: var(--menu-item-padding, 0)!important;
-  width: var(--menu-item-width, 100%)!important;
-  text-align: var(--menu-item-text-align, left)!important;
-  cursor: var(--menu-item-cursor, pointer)!important;
-}
-iam-menu details > *:after,
-iam-menu details > *:not(summary):before {
-  display: none!important;
-}
-iam-menu details :is(button,a) {
-  padding-inline-start: var(--menu-dialog-offset,1rem)!important;
-}
-iam-menu details :is(button,a):last-child {
-  margin-block-end: var(--menu-dialog-offset,1rem)!important;
-}
-iam-menu details summary {
-  padding: 0 !important;
-  margin: var(--menu-item-margin, 0 0 0.25rem 0)!important;
-}
-iam-menu details summary:before {
-  text-align: center;
-  display: inline-block!important;
-  vertical-align: bottom;
-  float: right;
-  color: inherit;
-  height: 1em;
-  width: 1em;
-}
-
-iam-menu details summary[class*="fa-"]:before {
-  font-family: var(--fa-font-family, "Font Awesome 6 Pro");
-}
-
-iam-menu details summary:not([class*="fa-"]:before {
-  --icon-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3e%3cpath d='M6.5,2l9,9-9,9' style='fill:none;stroke:%23000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px'/%3e%3c/svg%3e");  
-  
-  content: ""!important;
-  height: 1.2rem;
-  width: 1.2rem;
-  background: var(--colour-primary-theme);
-  mask-image: var(--icon, var(--icon-arrow));
-  mask-size: 50%;
-  mask-repeat: no-repeat;
-  mask-position: 50% 50%;
-  -webkit-mask-image: var(--icon, var(--icon-arrow));
-  -webkit-mask-size: 50%;
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: 50% 50%;
-  z-index: 2;
-  display: inline-block;
-  vertical-align: bottom;
-  float: right;
-  rotate: 90deg;
-  color: inherit;
-}
-</style>`
-      );
   }
 }