@iamproperty/components 5.3.0-beta7 → 5.4.1

package/assets/sass/components/nav.scss

@@ -281,7 +281,7 @@
     padding-bottom: rem(48);
   }
 
-  ::slotted(button) {
+  ::slotted(.btn:not(.btn-compact)) {
 
     display: block!important;
     margin: 0 0 rem(24) 0!important;
@@ -296,7 +296,7 @@
     padding-bottom: rem(24);
   }
 
-  slot[name="actions"]::slotted(button){
+  slot[name="actions"]::slotted(.btn){
     margin-top: 0!important;
   }
 
@@ -331,7 +331,7 @@
       width: calc(100% - 4rem) !important
     }
   }
-  ::slotted(button) {
+  ::slotted(.btn) {
 
     width: auto!important;
   }
@@ -342,12 +342,14 @@
 @include media-breakpoint-up(md) {
 
   :host {
-    max-width: 100%!important;
-    padding: 0!important;
+    //max-width: 100%!important;
+    padding-block: 0!important;
   }
 
   :host > .container {
     padding-block: rem(24)!important;
+    padding-inline: 0!important;
+    max-width: 100%;
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
@@ -423,7 +425,7 @@
   }
 
   ::slotted(a:not([slot="logo"])),
-  ::slotted(button) {
+  ::slotted(.btn) {
 
     margin-bottom: 0!important;
     margin-right: 0!important;
@@ -444,7 +446,7 @@
     margin-left: rem(32)!important;
   }
 
-  ::slotted(button) {
+  ::slotted(.btn-primary) {
 
     margin-left: rem(48)!important;
   }
@@ -455,7 +457,7 @@
   }
 
   // Search bar
-  slot[name="actions"]::slotted(button) {
+  slot[name="actions"]::slotted(.btn) {
 
     margin-left: rem(12)!important;
   }
@@ -547,6 +549,7 @@
 
 // #region Menus
 ::slotted(.nav--menu) {
+  pointer-events: all;
   overscroll-behavior: contain;
   width: calc(#{rem(375)} - var(--scrollbar-width));
   background-color: var(--colour-canvas-2);
@@ -609,9 +612,6 @@
     }
   }
 
-  &:before {
-    content: attr(data-title);
-  }
 
   @include media-breakpoint-up(sm) {
 
@@ -621,10 +621,22 @@
   @include media-breakpoint-up(md) {
   
     height: calc(100vh - var(--nav-height));
-    top: 100%;
+    top: var(--nav-height);
   }
 }
 
+slot[name="menus"]{
+
+  position: absolute;
+  top: 0;
+  right: 0;
+display: block;
+  height: 100vh;
+overflow: hidden;
+pointer-events: none;
+  width: calc(#{rem(375)} - var(--scrollbar-width));
+}
+
 ::slotted(.nav--menu[data-open-title]){
 
   &:before {
@@ -668,3 +680,36 @@
   }
 }
 // #endregion
+
+
+// #region Compact button
+@media screen and (min-width: 62em) {
+  :host(.nav--btn-compact:not(.nav--large)) {
+    .btn-menu .btn {
+      padding: 0.5rem!important;
+
+      i {
+        margin-right: 0!important;
+      }
+      span {
+        display: none;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 62em) and (max-width: 90em) {
+  :host(.nav--btn-compact.nav--large) {
+    .btn-menu .btn {
+      padding: 0.5rem!important;
+
+      i {
+        margin-right: 0!important;
+      }
+      span {
+        display: none;
+      }
+    }
+  }
+}
+// #endregion

package/assets/sass/components/table.global.scss

@@ -592,7 +592,7 @@ iam-table.table--fullwidth:not([data-expandable]) {
       }
     }
 
-    .th--fixed + th:not(.th--fixed),
+
     .td--fixed + td:not(.td--fixed){
 
       padding-left: calc(rem(48 + 24) + var(--width-adjust));

package/assets/sass/{components/component.reset.scss → components.reset.scss}

@@ -1,10 +1,10 @@
 $darkModeLocal: 'false'!default;
 
-@use "../_func.scss" as * with (
+@use "_func.scss" as * with (
   $darkMode: $darkModeLocal
 );
 
-@use "../foundations/root.scss" with (
+@use "foundations/root.scss" with (
   $root: ":is(iam-card,iam-nav,iam-table,.iamkey)" // copied directory from iamkey repo
 );
 
@@ -15,7 +15,7 @@ a:has(iam-card) {
 
 :is(iam-card,iam-nav, iam-table, .iamkey) {
 
-  @import "../foundations/reboot.scss";
+  @import "foundations/reboot.scss";
   
   @include var(font-family,--font-body);
   @include var(color,--colour-body);
@@ -23,7 +23,7 @@ a:has(iam-card) {
   line-height: 1.2;
   min-height: 100%;
 
-  @import "../_elements.scss";
+  @import "_elements.scss";
 }
 
 :is(iam-table) {
@@ -34,7 +34,7 @@ a:has(iam-card) {
 
 
 :is(iam-card,iam-nav, iam-table, .iamkey) {
-  @import "../_utilities.scss";
+  @import "_utilities.scss";
 }
 
 body.js-enabled .js-hide {

package/assets/sass/elements/buttons.scss

@@ -133,12 +133,14 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
 // #region button with icon
 .btn {
   &[class*="fa-"]:before {
-
     font-family: "Font Awesome 6 Pro";
-    margin-right: 1rem;
     line-height: 1em;
   }
 
+  &:not(.btn-compact):before{
+    margin-right: 1rem;
+  }
+
   i[class*="fa-"]{
     
     font-family: "Font Awesome 6 Pro";

package/assets/sass/elements/container.scss

@@ -12,7 +12,7 @@
   width: 100%;
 
   &:not(.container-fluid) {
-    max-width: rem(1280);
+    max-width: var(--container-max-width);
   }
   
   .container:not(.container-xs-breakout) {

package/assets/sass/elements/dialog.scss

@@ -551,7 +551,7 @@ dialog::backdrop {
       transform: rotate(90deg);
     }
 
-    &[aria-expanded]:after {
+    &[aria-expanded]:not([data-number]):after {
 
       transform: rotate(270deg);
     }

package/assets/sass/foundations/reboot.scss

@@ -25,10 +25,18 @@ html {
     @media (min-width: #{em(1280)}) {
       font-size: 100%;
       font-size: vw(1280);
+
+      &:has(.nav--large) {
+        font-size: 100%;
+      }
     }
 
     @media (min-width: #{em(1440)}) {
       font-size: 112.5%;
+
+      &:has(.nav--large) {
+        font-size: 100%;
+      }
     }
 
     @media (min-width: #{em(1680)}) {
@@ -38,6 +46,15 @@ html {
     @media print {
       font-size: 16px;
     }
+
+    @media screen and (min-width: 120em) { // 1920
+
+      &:has(.nav--large) {
+  
+        font-size: vw(1920);
+      }
+    }
+
   }
 }
 
@@ -143,15 +160,9 @@ details {
 // Main grid setup to avoid having to use continaer divs
 
 *:not(.row) > main {
-  --padding-inline: 1.5rem;
-  --container-max-width: #{rem(1280)};
   --full-width-start: 0;
 
-  @include media-breakpoint-up(sm) {
-    --padding-inline: 2.5rem;
-  }
   @include media-breakpoint-up(md) {
-    --padding-inline: 5.25rem;
     --full-width-start: calc((100% - var(--container-max-width)) / 2);
   }
 

package/assets/sass/foundations/root.scss

@@ -44,6 +44,24 @@ $root: ':root'!default;
   --border-width: 1px;
   --border-style: solid;
   --border-color: var(--colour-border);
+
+  --container-max-width: #{rem(1280)};
+  --padding-inline: 1.5rem;
+
+  @include media-breakpoint-up(sm) {
+    --padding-inline: 2.5rem;
+  }
+  @include media-breakpoint-up(md) {
+    --padding-inline: 5.25rem;
+
+    &:has(.nav--large) {
+      --container-max-width: #{rem(1920)}!important;
+      --padding-inline: #{rem(56)}!important;
+      --container-padding-x-md: #{rem(56)}!important;
+      --container-padding-md: var(--container-padding-top) var(--container-padding-x-md) var(--container-padding-bottom) var(--container-padding-x-md);
+      --container-padding: var(--container-padding-md);
+    }
+  }
 }
 
 .reset-colours {

package/assets/ts/components/nav/nav.component.ts

@@ -24,6 +24,8 @@ class iamNav extends HTMLElement {
     @import "${coreCSS}";
     ${loadCSS}
     </style>
+    <style class="doc-styles">
+    </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
     <div class="container">
       <slot name="logo"></slot>
@@ -62,7 +64,7 @@ class iamNav extends HTMLElement {
 
     // Load external CSS if needed
     if(this.hasAttribute('data-css'))
-      this.shadowRoot.querySelector('.styles').insertAdjacentHTML('beforeend', `@import "${this.getAttribute('data-css')}";`);
+      this.shadowRoot.querySelector('.doc-styles').insertAdjacentHTML('beforeend', `@import "${this.getAttribute('data-css')}";`);
     
     const menuButton = this.shadowRoot.querySelector('.btn-menu');
     const menu = this.shadowRoot.querySelector('.menu');
@@ -76,8 +78,10 @@ class iamNav extends HTMLElement {
 
       switch(tagname){
         case "BUTTON":
-          element.setAttribute('slot','actions');
-          menu.classList.add('has-actions')
+          if(!element.hasAttribute('slot')){
+            element.setAttribute('slot','actions');
+            menu.classList.add('has-actions')
+          }
           break;
       }
 

package/dist/components.es.js

@@ -69,7 +69,7 @@ const Da = /* @__PURE__ */ p(B, [["render", K]]), G = (t) => t.charAt(0).toUpper
     this.$nextTick(function() {
       import(
         /* @vite-ignore */
-        "./table.component.min-711285c4.mjs"
+        "./table.component.min-41d56847.mjs"
       ).then((t) => {
         window.customElements.get("iam-table") || window.customElements.define("iam-table", t.default);
       }).catch((t) => {
@@ -549,7 +549,7 @@ const Te = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      S(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/accordion/accordion.component.js": () => import("./accordion.component-bd9af0d7.mjs"), "../../../assets/js/components/accordion/accordion.component.min.js": () => import("./accordion.component.min-a1bedca3.mjs") }), "../../../assets/js/components/accordion/accordion.component.js").then((t) => {
+      S(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/accordion/accordion.component.js": () => import("./accordion.component-bd9af0d7.mjs"), "../../../assets/js/components/accordion/accordion.component.min.js": () => import("./accordion.component.min-f9c97f13.mjs") }), "../../../assets/js/components/accordion/accordion.component.js").then((t) => {
         window.customElements.get("iam-accordion") || window.customElements.define("iam-accordion", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -662,7 +662,7 @@ const Ba = /* @__PURE__ */ p(Pe, [["render", Be]]), Ue = {
     this.$nextTick(function() {
       import(
         /* @vite-ignore */
-        "./card.component.min-fc499786.mjs"
+        "./card.component.min-623e7231.mjs"
       ).then((t) => {
         window.customElements.get("iam-card") || window.customElements.define("iam-card", t.default);
       }).catch((t) => {
@@ -717,7 +717,7 @@ const Wa = /* @__PURE__ */ p(Ke, [["render", Ge]]), Qe = {
   },
   mounted() {
     this.$nextTick(function() {
-      S(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/header/header.component.js": () => import("./header.component-cc8263fb.mjs"), "../../../assets/js/components/header/header.component.min.js": () => import("./header.component.min-5223e76d.mjs") }), "../../../assets/js/components/header/header.component.js").then((t) => {
+      S(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/header/header.component.js": () => import("./header.component-cc8263fb.mjs"), "../../../assets/js/components/header/header.component.min.js": () => import("./header.component.min-3b73e149.mjs") }), "../../../assets/js/components/header/header.component.js").then((t) => {
         window.customElements.get("iam-header") || window.customElements.define("iam-header", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1113,7 +1113,7 @@ const Ya = /* @__PURE__ */ p(_t, [["render", jt]]), Ct = {
   name: "Nav",
   mounted() {
     this.$nextTick(function() {
-      import("./nav.component.min-1f3de17d.mjs").then((t) => {
+      import("./nav.component.min-73c30d3c.mjs").then((t) => {
         window.customElements.get("iam-nav") || window.customElements.define("iam-nav", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1233,7 +1233,7 @@ const ta = {
   name: "Tabs",
   mounted() {
     this.$nextTick(function() {
-      S(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/tabs/tabs.component.js": () => import("./tabs.component-1dfbdb3b.mjs"), "../../../assets/js/components/tabs/tabs.component.min.js": () => import("./tabs.component.min-2b05cd66.mjs") }), "../../../assets/js/components/tabs/tabs.component.js").then((t) => {
+      S(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/tabs/tabs.component.js": () => import("./tabs.component-1dfbdb3b.mjs"), "../../../assets/js/components/tabs/tabs.component.min.js": () => import("./tabs.component.min-1c724df1.mjs") }), "../../../assets/js/components/tabs/tabs.component.js").then((t) => {
         window.customElements.get("iam-tabs") || window.customElements.define("iam-tabs", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1363,7 +1363,7 @@ function ha(t, a, e, i, o, n) {
 }
 const ii = /* @__PURE__ */ p(la, [["render", ha]]);
 /*!
-  * iamKey v5.3.0-beta7
+  * iamKey v5.4.1
   * Copyright 2022-2024 iamproperty
   */
 function fa(t, a) {
@@ -1459,7 +1459,7 @@ function ya(t, a, e, i, o, n) {
 }
 const si = /* @__PURE__ */ p(ga, [["render", ya]]);
 /*!
-  * iamKey v5.3.0-beta7
+  * iamKey v5.4.1
   * Copyright 2022-2024 iamproperty
   */
 function va(t, a) {
@@ -1629,7 +1629,7 @@ const oi = /* @__PURE__ */ p(Sa, [["render", qa]]), Ea = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      S(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/actionbar/actionbar.component.js": () => import("./actionbar.component-151b3ba4.mjs"), "../../../assets/js/components/actionbar/actionbar.component.min.js": () => import("./actionbar.component.min-eb4f4bc2.mjs") }), "../../../assets/js/components/actionbar/actionbar.component.js").then((t) => {
+      S(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/actionbar/actionbar.component.js": () => import("./actionbar.component-151b3ba4.mjs"), "../../../assets/js/components/actionbar/actionbar.component.min.js": () => import("./actionbar.component.min-de36476a.mjs") }), "../../../assets/js/components/actionbar/actionbar.component.js").then((t) => {
         window.customElements.get("iam-actionbar") || window.customElements.define("iam-actionbar", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1644,7 +1644,7 @@ function Ta(t, a, e, i, o, n) {
 }
 const ri = /* @__PURE__ */ p(Ea, [["render", Ta]]);
 /*!
-  * iamKey v5.3.0-beta7
+  * iamKey v5.4.1
   * Copyright 2022-2024 iamproperty
   */
 class z extends HTMLElement {
@@ -1784,7 +1784,7 @@ function Na(t, a, e, i, o, n) {
 }
 const di = /* @__PURE__ */ p(Ca, [["render", Na]]);
 /*!
-  * iamKey v5.3.0-beta7
+  * iamKey v5.4.1
   * Copyright 2022-2024 iamproperty
   */
 window.dataLayer = window.dataLayer || [], window.dataLayer.push({ event: "customElementRegistered", element: "collapsible side menu" });