@iamproperty/components 5.3.0-beta4 → 5.3.0-beta6

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

@@ -103,6 +103,7 @@ iam-nav {
     padding: 0;
     text-decoration: none;
     min-width: min(var(--svg-width), 14rem);
+    margin-right: auto;
   }
 
   a:not([slot="logo"]):not(.btn):not(:has(iam-card)) {
@@ -582,13 +583,105 @@ iam-nav details {
 
 // #region Dual navbar in desktop
 @include media-breakpoint-up(md) {
-  iam-nav {
+  iam-nav:has([slot="dual"]) {
     .brand:has(~ [slot="dual"]) {
-      margin-right: rem(24);
+      margin-right: rem(24)!important;
+    }
+
+    *:not([slot="dual"]):has(+ [slot="dual"]) + [slot="dual"] {
+      margin-left: auto!important;
+    }
+
+    .btn[slot="dual"] {
+      margin-left: 0;
+    }
+
+    &::part(btn-menu) {
+      margin-left: 1rem!important;
+    }
+  }
+}
+// #endregion
+
+// #region compact menus on mobile
+iam-nav > .dialog__wrapper {
+
+  .dialog--list {
+
+    a {
+      font-size: 1rem;
+    }
+  }
+}
+
+@media screen and (max-width: 64em) {
+
+
+  iam-nav > .dialog__wrapper {
+
+    width: 100%;
+
+    .btn-compact {
+      display: none!important;
+    }
+    .dialog--list {
+      
+      display: contents!important;
+
+      a {
+        font-size: 1rem;
+      }
     }
+  }
+
+  iam-nav > a + :is(.dialog__wrapper, .btn-compact) {
+    margin-top: 1.5rem;
+  }
+
+  iam-nav > .dialog__wrapper .dialog--list a,
+  iam-nav .btn-compact {
+    --compact-size: 2rem;
+    all: unset;
+    display: block!important;
+    font-size: rem(14)!important;
+    line-height: rem(32)!important;
+    height: rem(32)!important;
+    min-height: rem(32)!important;
+    max-height: rem(32)!important;
+    width: 100%!important;
+    margin: 0!important;
+    cursor: pointer;
+    color: var(--colour-link);
+    font-weight: normal!important;
+
+
+    &:where(:hover,:focus,.selected,[aria-current=page]) {
+      text-decoration: underline;
+      text-underline-offset: 0.3em;
+      text-decoration-thickness: 2px;
+      text-decoration-color: var(--colour-underline);
+    }
+
+
+    &:before {
+      display: inline-block;
+      width: auto;
+      position: static;
+      margin-right: 0.5rem;
+      font-size: 0.875rem !important;
+      text-decoration: none!important;
+    }
+
+    &:after {
+      display: none;
+    }
+  }
+
+  iam-nav > .dialog__wrapper,
+  iam-nav .btn-compact {
 
-    *:not([slot="dual"]):has(+ [slot="dual"]) {
-      margin-right: auto;
+    &:has(+ *:not(.dialog__wrapper,.btn-compact)){
+      margin-bottom: 1.5rem!important;
     }
   }
 }

package/assets/sass/components/nav.scss

@@ -7,11 +7,6 @@
   align-items: center!important;
 }
 
-::slotted(.brand) {
-
-  margin-right: auto!important;
-}
-
 .btn-menu {
     
   padding: 0;
@@ -88,7 +83,7 @@
 
     width: fit-content;
     height: auto;
-    margin: 0 0 0 3rem!important;
+    margin: 0 0 0 3rem;
     padding: 0!important;
     text-indent: 0;
     padding-right: 0!important;
@@ -255,7 +250,7 @@
     }
   }
 
-  ::slotted(a:not([slot="logo"])) {
+  ::slotted(a:not([slot="logo"]):not(.btn-compact)) {
     display: block!important;
     line-height: rem(20)!important;
     padding: rem(24) 0!important;
@@ -434,9 +429,8 @@
     margin-right: 0!important;
   }
 
-  ::slotted(a:not([slot="logo"])) {
+  ::slotted(a:not([slot="logo"]):not(.btn-compact)) {
 
-    margin-left: rem(32)!important;
     font-size: rem(16)!important;
     font-weight: normal!important;
 
@@ -445,6 +439,11 @@
     }
   }
 
+  ::slotted(a:not([slot="logo"]):not([slot="dual"])) {
+
+    margin-left: rem(32)!important;
+  }
+
   ::slotted(button) {
 
     margin-left: rem(48)!important;
@@ -649,7 +648,7 @@
 }
 // #endregion
 
-// region compressed nav
+// #region compressed nav
 @include media-breakpoint-up(md) {
   :host(.nav--md-compressed) .buttons-holder button {
     margin-left: 1.5rem!important;

package/assets/sass/elements/buttons.scss

@@ -24,7 +24,7 @@
   }
 
   display: inline-block;
-  font-weight: bold!important;
+  font-weight: bold;
   text-align: left;
   text-decoration: none;
   vertical-align: middle;
@@ -275,6 +275,28 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
       color: var(--colour-inverted);
     }
   }
+
+  &[data-number] {
+    position: relative;
+  }
+  &[data-number]:after {
+    content: attr(data-number);
+    position: absolute;
+    top: 0.5em;
+    z-index: 99;
+    background: var(--colour-danger);
+    height: 1.5em;
+    width: 1.5em;
+    border-radius: 50%;
+    text-indent: 0;
+    left: 50%;
+    font-size: 0.5em;
+    line-height: 1.5em;
+    text-align: center;
+    color: white;
+    letter-spacing: -0.1em;
+    font-family: arial, sans-serif;
+  }
 }
 // #endregion
 

package/assets/sass/elements/dialog.scss

@@ -607,12 +607,27 @@ dialog::backdrop {
         }
       }
 
+      a {
+
+        padding: #{rem(6)};
+
+        &:not(:hover,:focus,:active){
+          border-color: transparent;
+        }
+        margin: 0;
+
+        &:after {
+          display: none;
+        }
+      }
+
       .btn-action {
         &:not(:hover,:focus,:active){
           border-color: transparent;
         }
         margin: 0;
       }
+
     }
 
     dialog[open] {

package/assets/sass/elements/icons.scss

@@ -21,6 +21,6 @@
   font-size: rem(40);
 }
 
-[class*="fa-"]:not(.fa-regular,.fa-light, .fa-solid ) {
+[class*="fa-"]:not(.fa-regular,.fa-light, .fa-solid, .btn) {
   font-weight: 400;
 }

package/assets/sass/foundations/reboot.scss

@@ -188,3 +188,7 @@ main > :is(.full-width, .container, iam-header) {
 main > :is(.full-width, [class*="bg-"]) {
   grid-column: full-width;
 }
+
+.row > .col {
+  min-height: var(--min-height,0);
+}

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

@@ -28,7 +28,7 @@ class iamNav extends HTMLElement {
     <div class="container">
       <slot name="logo"></slot>
       <div class="buttons-holder"></div>
-      <button class="btn-menu">Menu<i class="fa-regular fa-bars"></i><i class="fa-regular fa-xmark-large"></i></button>
+      <button class="btn-menu" part="btn-menu">Menu<i class="fa-regular fa-bars"></i><i class="fa-regular fa-xmark-large"></i></button>
 
       <div class="menu__outer">
         <div class="menu closed">
@@ -91,6 +91,7 @@ class iamNav extends HTMLElement {
         const button = document.createElement('button');
         button.setAttribute('slot',title);
         button.classList.add('btn-menu');
+        button.setAttribute('part','btn-menu');
         button.innerHTML = `<span class="btn btn-primary"><span>${title}</span><i class="${iconClass}"></i><i class="fa-regular fa-xmark-large"></i></span>`;
         buttonsHolder.insertAdjacentElement('beforeend',button);
 

package/assets/ts/components/search/search.component.ts

@@ -28,7 +28,9 @@ class iamSearch extends HTMLElement {
     input:not(.is-invalid):not(:invalid) {
       background: none!important;
     }
-
+    .optional-text {
+      display: none;
+    }
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
     <slot></slot>
@@ -83,7 +85,7 @@ class iamSearch extends HTMLElement {
     function checkMatch(){
       
       let match = datalist.querySelector(`option[value="${displayInputField.value}"]`);
-      let subMatch = datalist.querySelector(`option[value*='${displayInputField.value}' i]`);
+      let subMatch = datalist.querySelector(`option[value*="${displayInputField.value}" i]`);
 
       if(match){
         inputField.value = match.getAttribute('data-value');
@@ -145,8 +147,11 @@ class iamSearch extends HTMLElement {
               let actualValue = resolvePath(item, valueSchema, '');
               let displayValue = resolvePath(item, displaySchema, '').replace('\n',', ');
 
+              console.log(displayValue);
+
+
               if(!datalist.querySelector(`option[data-value="${actualValue}"]`))
-                listString += `<option value="${displayValue}" data-value='${actualValue}'></option>`;
+                listString += `<option value="${displayValue}" data-value="${actualValue}"></option>`;
             });
           }
           else if (typeof loopValues == 'object'){

package/dist/components.es.js

@@ -67,7 +67,7 @@ const Da = /* @__PURE__ */ p(B, [["render", K]]), G = (t) => t.charAt(0).toUpper
   },
   created() {
     this.$nextTick(function() {
-      import("./table.component.min-9a27ef63.mjs").then((t) => {
+      import("./table.component.min-c564d4e6.mjs").then((t) => {
         window.customElements.get("iam-table") || window.customElements.define("iam-table", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -546,7 +546,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-16770388.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-3cb41b0a.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);
@@ -657,7 +657,7 @@ const Ba = /* @__PURE__ */ p(Pe, [["render", Be]]), Ue = {
   name: "Card",
   mounted() {
     this.$nextTick(function() {
-      import("./card.component.min-b1d21795.mjs").then((t) => {
+      import("./card.component.min-1ba513e2.mjs").then((t) => {
         window.customElements.get("iam-card") || window.customElements.define("iam-card", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -711,7 +711,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-407a452d.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-a956d347.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);
@@ -1107,7 +1107,7 @@ const Ya = /* @__PURE__ */ p(_t, [["render", jt]]), Ct = {
   name: "Nav",
   mounted() {
     this.$nextTick(function() {
-      import("./nav.component.min-37dbccda.mjs").then((t) => {
+      import("./nav.component.min-b3e95848.mjs").then((t) => {
         window.customElements.get("iam-nav") || window.customElements.define("iam-nav", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1227,7 +1227,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-d6932688.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-74120d9b.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);
@@ -1357,7 +1357,7 @@ function ha(t, a, e, i, o, n) {
 }
 const ii = /* @__PURE__ */ p(la, [["render", ha]]);
 /*!
-  * iamKey v5.3.0-beta4
+  * iamKey v5.3.0-beta6
   * Copyright 2022-2024 iamproperty
   */
 function fa(t, a) {
@@ -1453,7 +1453,7 @@ function ya(t, a, e, i, o, n) {
 }
 const si = /* @__PURE__ */ p(ga, [["render", ya]]);
 /*!
-  * iamKey v5.3.0-beta4
+  * iamKey v5.3.0-beta6
   * Copyright 2022-2024 iamproperty
   */
 function va(t, a) {
@@ -1623,7 +1623,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-3f2c98c0.mjs"), "../../../assets/js/components/actionbar/actionbar.component.min.js": () => import("./actionbar.component.min-a007644d.mjs") }), "../../../assets/js/components/actionbar/actionbar.component.js").then((t) => {
+      S(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/actionbar/actionbar.component.js": () => import("./actionbar.component-3f2c98c0.mjs"), "../../../assets/js/components/actionbar/actionbar.component.min.js": () => import("./actionbar.component.min-15f1b85c.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);
@@ -1638,7 +1638,7 @@ function Ta(t, a, e, i, o, n) {
 }
 const ri = /* @__PURE__ */ p(Ea, [["render", Ta]]);
 /*!
-  * iamKey v5.3.0-beta4
+  * iamKey v5.3.0-beta6
   * Copyright 2022-2024 iamproperty
   */
 class z extends HTMLElement {
@@ -1778,7 +1778,7 @@ function Na(t, a, e, i, o, n) {
 }
 const di = /* @__PURE__ */ p(Ca, [["render", Na]]);
 /*!
-  * iamKey v5.3.0-beta4
+  * iamKey v5.3.0-beta6
   * Copyright 2022-2024 iamproperty
   */
 window.dataLayer = window.dataLayer || [], window.dataLayer.push({ event: "customElementRegistered", element: "collapsible side menu" });