@iamproperty/components 7.8.2--beta6 → 7.8.2--beta7

package/assets/sass/components/nav.docs.scss

@@ -1,54 +0,0 @@
-@use '../_func' as *;
-
-:host {
-  background: red;
-}
-
-@media screen and (max-width: 62em) {
-  :host {
-    pointer-events: none;
-    z-index: 99;
-    position: relative;
-    margin-bottom: 38rem;
-  }
-
-  .btn-menu {
-    width: 1.5rem !important;
-    text-indent: -300px !important;
-    padding-right: 0 !important;
-
-    i {
-      display: none;
-    }
-
-    i + i {
-      display: inline;
-    }
-  }
-
-  .menu__outer {
-    display: contents;
-  }
-  .menu {
-    /* position: relative; */
-    position: absolute;
-    top: 6rem; /* 96 */
-    left: auto;
-    right: 0;
-    -webkit-box-shadow: 0 6px 12px 0px rgba(0, 0, 0, 0.2);
-    box-shadow: 0 6px 12px 0px rgba(0, 0, 0, 0.2);
-    /* height: auto; */
-    width: 100%;
-    max-width: calc(23.4375rem);
-    transition: none;
-  }
-  .menu.closed * {
-    display: block !important;
-  }
-}
-
-@media screen and (min-width: 62em) {
-  :host {
-    position: relative;
-  }
-}

package/assets/sass/components/std-nav-standalone.component.scss

@@ -1,229 +0,0 @@
-@use '../_func' as *;
-
-
-@use '../elements/type';
-@use '../elements/links';
-@use '../elements/buttons';
-@use '../elements/details';
-@use '../elements/dropdown';
-
-@use '../elements/container';
-
-@use '../components/nav.global';
-
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-:host {
-  grid-column: full-width !important;
-  display: block;
-  width: 100%;
-  z-index: 999999;
-  position: relative;
-}
-
-.wrapper {
-  display: contents;
-
-  &:has(.container){
-
-    display: block;
-    background: var(--colour-light);
-  }
-}
-
-.container {
-  //display: contents;
-  position: relative;
-
-  z-index: 9999;
-      z-index: 999999;
-
-    padding-bottom: 0;
-
-  > details {
-
-    padding-bottom: 0;
-
-    > summary {
-      text-align: end;
-      line-height: 2rem;
-    }
-  }
-}
-
-@media screen and (max-width: 62em) {
-  .iam-nav {
-    background-color: transparent;
-    padding: 0;
-    top: 2rem!important;
-  }
-  
-  .iam-nav a {
-      display: block !important;
-      line-height: 1.25rem !important;
-      padding: 1.5rem 0 !important;
-      margin: 0 !important;
-      flex-shrink: 0;
-      font-size: 1rem !important;
-      font-weight: normal !important;
-  }
-
-  .iam-nav a:after {
-    content: "";
-    display: block;
-    height: 2px;
-    width: 100% !important;
-    background-color: var(--colour-border) !important;
-    top: calc(100% - 2px) !important;
-  }
-}
-
-@media screen and (min-width: 62em) {
-
-  .container {
-    background: var(--colour-light);
-
-    > details {
-
-      display: block;
-
-      &::details-content {
-        
-        display: block;
-        content-visibility: visible;
-      }
-
-      summary {
-        display: none;
-      }
-    }
-  }
-
-  .iam-nav {
-    padding: 0;
-    text-align: right;
-    background: var(--colour-light);
-    padding-top: .5rem !important;
-    padding-bottom: .5rem !important;
-  }
-  .iam-nav > details{
-    display: inline-block;
-    position: relative;
-    width: auto;
-
-    summary {
-      display: inline-block;
-      margin-left: 1.5rem;
-      margin-bottom: 0!important;
-
-      &:after {
-        display: none;
-      }
-    }
-
-    div {
-      text-align: left;
-
-      a {
-        white-space: nowrap;
-        text-decoration: none;
-
-        font-size: 1rem !important;
-        line-height: 1.5rem !important;
-        margin: 0;
-        padding: var(--option-padding) !important;
-
-      }
-
-      .lead {
-        --colour-heading: var(--colour-body);
-        font-size: 0.87rem !important;
-        line-height: 1.5rem !important;
-        margin: 0;
-        padding: var(--option-padding) !important;
-      }
-      a:after {
-        width: 0;
-      }
-
-      .section:has(a:not([href=null])) + .section {
-        border-top: 1px solid var(--colour-border);
-        display: block;
-        padding-top: 0.5rem;
-        margin-top: 0.5rem;
-      }
-    }
-    
-  }
-
-  .iam-nav > details::details-content {
-    display: none;
-  }
-
-  .iam-nav > details[open]::details-content {
-    display: block;
-    background: var(--dropdown-bg);
-    margin-block: var(--dropdown-margin-block);
-    padding: var(--dropdown-padding);
-    border-radius: var(--dropdown-border-radius);
-    box-shadow: var(--dropdown-box-shadow);
-
-    position: absolute;
-    top: calc(100% + 0.5rem);
-    left: 1.5rem;
-  }
-
-  .iam-nav > a {
-    font-size: 0.875rem !important;
-    margin-bottom: 0;
-
-    &:after {
-      top: calc(100% - 0.25em) !important;
-    }
-  }
-
-
-  .iam-nav > a {
-    font-size: 1rem !important;
-    font-weight: normal !important;
-
-    &:after {
-      display: none;
-    }
-  }
-
-  .iam-nav > a {
-    margin-left: 2rem !important;
-    margin-right: 0rem !important;
-  }
-
-}
-
-
-@media screen and (min-width: 62em) {
-    .backdrop {
-        content: "";
-        display: block;
-        position: absolute;
-        top: 100%;
-        left: 0;
-        height: calc(100vh - 2rem)!important;
-        width: 100%;
-        z-index: -1;
-        pointer-events: none;
-        transition: background .5s;
-    }
-}
-
-@media screen and (min-width: 62em) {
-  .wrapper:has([name="megamenu"][open]) + .backdrop {
-      pointer-events: all;
-      background: rgba(0, 0, 0, .2);
-      backdrop-filter: blur(2px);
-  }
-}

package/assets/ts/components/std-nav-standalone/std-nav-standalone.component.ts

@@ -1,94 +0,0 @@
-import {populateNav,loadNavData,loadUserData,setEnabledLinks} from '../../modules/nav';
-import Cookies from '../../../../node_modules/js-cookie/dist/js.cookie.mjs';
-
-// Data layer Web component created
-declare global {
-  interface Window {
-    dataLayer: Array<object>;
-  }
-}
-
-class iamSTDNavStandalone 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/std-nav-standalone.component.css";`;
-    
-    const template = document.createElement('template');
-    template.innerHTML = `
-    <style id="styles">
-    ${loadCSS}
-
-    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
-    </style>
-    <div class="wrapper">
-      <slot></slot>
-    </div>
-    <div class="backdrop" part="backdrop"></div>
-    `;
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
-  }
-
-  defaultToStandalone = ():void => {
-    const defaultContent = this.innerHTML;
-    this.wrapper.innerHTML = `<div class="container">${defaultContent}</div>`;
-  }
-
-  transformToStandalone = (data):void => {
-
-    this.wrapper.innerHTML = `<div class="container"><details><summary>Products</summary><div class="iam-nav">${populateNav(data)}</div></details></div>`;
-  
-    // Set links and details to secondary slot
-    Array.from(this.wrapper.querySelectorAll('.iam-nav > a, .iam-nav > details')).forEach((element) => {
-
-      element.setAttribute('slot','secondary');
-    });
-
-  }
-
-  async connectedCallback(): void {
-    
-    const component = this;
-    this.wrapper = this.shadowRoot?.querySelector('.wrapper');
-    this.defaultToStandalone();
-    
-    const data = await loadNavData(Cookies).then(
-      (data) => {
-        if(typeof data == 'string'){
-          
-          return data;
-        }
-
-        this.transformToStandalone(data);
-
-        return true;
-      }
-    );
-
-    const userData = await loadUserData(Cookies).then(
-      (data) => {
-
-        setEnabledLinks(component,data);
-
-        Array.from(document.querySelectorAll('[data-user-data]')).forEach((element) => {
-
-          const dataVar = element.getAttribute('data-user-data');
-
-          if(data.attributes[dataVar])
-            element.innerHTML = data.attributes[dataVar];
-        });
-
-        return true;
-      }
-    );
-  }
-}
-
-export default iamSTDNavStandalone;