@iamproperty/components 5.4.2-beta3 → 5.5.0

package/assets/sass/_elements.scss

@@ -17,3 +17,5 @@
 
 @import "elements/badge.scss";
 @import "elements/details.scss";
+
+@import "elements/progress.scss";

package/assets/sass/_functions/utilities.scss

@@ -13,7 +13,8 @@ $utilities: map-merge(
       class: mw,
       values: (
         100: 100%,
-        fit-content: fit-content
+        fit-content: fit-content,
+        content: var(--content-max-width)
       )
     ),
     "min-width": (
@@ -129,6 +130,7 @@ $utilities: map-merge(
         "secondary": var(--colour-secondary),
         "info": var(--colour-info),
         "success": var(--colour-success),
+        "complete": var(--colour-complete),
         "warning": var(--colour-warning),
         "danger": var(--colour-danger),
         "light": var(--colour-light),

package/assets/sass/_functions/variables.scss

@@ -448,11 +448,14 @@ $icon-arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' wid
 $icon-close: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
 $icon-question: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path d='M14 21.5v-3c0-0.281-0.219-0.5-0.5-0.5h-3c-0.281 0-0.5 0.219-0.5 0.5v3c0 0.281 0.219 0.5 0.5 0.5h3c0.281 0 0.5-0.219 0.5-0.5zM18 11c0-2.859-3-5-5.688-5-2.547 0-4.453 1.094-5.797 3.328-0.141 0.219-0.078 0.5 0.125 0.656l2.063 1.563c0.078 0.063 0.187 0.094 0.297 0.094 0.141 0 0.297-0.063 0.391-0.187 0.734-0.938 1.047-1.219 1.344-1.437 0.266-0.187 0.781-0.375 1.344-0.375 1 0 1.922 0.641 1.922 1.328 0 0.812-0.422 1.219-1.375 1.656-1.109 0.5-2.625 1.797-2.625 3.313v0.562c0 0.281 0.219 0.5 0.5 0.5h3c0.281 0 0.5-0.219 0.5-0.5v0c0-0.359 0.453-1.125 1.188-1.547 1.188-0.672 2.812-1.578 2.812-3.953zM24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z'/></svg>");
 
+$icon-new-tab: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M304 24c0 13.3 10.7 24 24 24H430.1L207 271c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l223-223V184c0 13.3 10.7 24 24 24s24-10.7 24-24V24c0-13.3-10.7-24-24-24H328c-13.3 0-24 10.7-24 24zM72 32C32.2 32 0 64.2 0 104V440c0 39.8 32.2 72 72 72H408c39.8 0 72-32.2 72-72V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V440c0 13.3-10.7 24-24 24H72c-13.3 0-24-10.7-24-24V104c0-13.3 10.7-24 24-24H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H72z'/></svg>");
+
 
 $vars: map-merge((
   --icon-arrow: #{escape-svg($icon-arrow)},
   --icon-close: #{escape-svg($icon-close)},
-  --icon-question: #{escape-svg($icon-question)}
+  --icon-question: #{escape-svg($icon-question)},
+  --icon-new-tab: #{escape-svg($icon-new-tab)}
 ), $vars);
 // #endregion
 

package/assets/sass/_utilities.scss

@@ -13,6 +13,7 @@
 // Helpers
 @import "helpers/max-height.scss";
 @import "helpers/dynamic.scss";
+@import "helpers/line-clamp.scss";
 
 // Utilities
 @import "../bootstrap/scss/utilities/_api.scss";

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

@@ -150,6 +150,7 @@ iam-actionbar {
   display: block;
   max-width: 100%;
   text-align: left;
+  padding: 0;
 
   &:before {
     position: static;

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

@@ -55,3 +55,9 @@ iam-card {
 
 
 // #endregion
+
+
+a[target="_blank"] iam-card::part(card) {
+
+  --icon: var(--icon-new-tab);
+}

package/assets/sass/components/card.scss

@@ -13,13 +13,18 @@
   min-height: 100%;
   width: 100%;
   text-align: left;
-  display: block;
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
   z-index: 0;
   background: var(--colour-canvas-2);
   outline: 2px solid var(--colour-canvas-2);
   outline-offset: -2px;
 
+  > *:not(.btn-compact) {
+    min-width: 100%;
+  }
+
   &.border-0 {
     box-shadow: none;
     --card-left-padding: 0rem;
@@ -28,10 +33,28 @@
 
   &__body {
     position: relative;
-    padding: var(--card-top-padding) var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);
+    padding: var(--card-top-padding) var(--card-right-padding) 0 var(--card-left-padding);
     z-index: -1;
   }
 
+  &__footer {
+    margin-top: auto;
+    padding: 0 var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);
+  }
+
+  &:is(:hover,:focus) {
+    .link:after {
+      width: 50%;
+    }
+  }
+
+  &:has(.card__footer .link) {
+    &:before,
+    &:after {
+      display: none;
+    }
+  }
+
   &:before,
   &:after {
     content: "";
@@ -46,11 +69,11 @@
 
   &:after {
     background: var(--colour-primary-theme);
-    mask-image: var(--icon-arrow);
+    mask-image: var(--icon,var(--icon-arrow));
     mask-size: 50%;
     mask-repeat: no-repeat;
     mask-position: 50% 50%;
-    -webkit-mask-image: var(--icon-arrow);
+    -webkit-mask-image: var(--icon,var(--icon-arrow));
     -webkit-mask-size: 50%;
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-position: 50% 50%;
@@ -144,13 +167,12 @@
 
   &.card--has-icon:not(.card--secondary):not(.card--filter) .card__body {
     padding-left: 4rem;
-    min-height: 100%;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    inset: 0;
-    align-items: flex-start;
-    justify-content: center;
+    margin-block: auto;
+    padding-bottom: var(--card-bottom-padding);
+  }
+  &.card--has-icon:not(.card--secondary):not(.card--filter) .card__footer {
+    padding: 0;
+    display: none;
   }
 }
 
@@ -166,9 +188,11 @@
 ::slotted(span:not(.badge)){
   display: block!important;
   font-weight: normal!important;
-  padding-top: rem(24)!important;
   font-size: rem(16)!important;
 }
+::slotted(span:not(.badge):not([class*="pt-"])){
+  padding-top: rem(24)!important;
+}
 // #endregion
 
 // #region card bages
@@ -222,7 +246,7 @@
   &:is(:hover,:focus,.hover) {
     outline: none;
       
-    .card__body {
+    :is(.card__body,.card__footer) {
       background: #EEEEEE;
     }
   }
@@ -303,23 +327,6 @@
 }
 // #endregion
 
-//#region card with a footer
-.card:has(.card__footer){
-
-  &:after {
-    display: none;
-  }
-
-  .card__footer {
-    position: relative;
-    background: #ffffff;
-    padding: var(--card-top-padding) var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);
-    z-index: -1;
-    display: block;
-  }
-}
-//#endregion
-
 
 :host([data-selected]) .card {
   //background-color: yellow!important;

package/assets/sass/components/nav.scss

@@ -250,7 +250,7 @@
     }
   }
 
-  ::slotted(a:not([slot="logo"]):not(.btn-compact)) {
+  ::slotted(a:not([slot="logo"]):not(.btn-compact):not(.btn-primary)) {
     display: block!important;
     line-height: rem(20)!important;
     padding: rem(24) 0!important;
@@ -281,7 +281,7 @@
     padding-bottom: rem(48);
   }
 
-  ::slotted(.btn:not(.btn-compact)) {
+  ::slotted(.btn:not(.btn-compact):not(.btn-primary)) {
 
     display: block!important;
     margin: 0 0 rem(24) 0!important;
@@ -431,7 +431,7 @@
     margin-right: 0!important;
   }
 
-  ::slotted(a:not([slot="logo"]):not(.btn-compact)) {
+  ::slotted(a:not([slot="logo"]):not(.btn-compact):not(.btn-primary)) {
 
     font-size: rem(16)!important;
     font-weight: normal!important;

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

@@ -65,6 +65,7 @@ iam-table {
       padding: var(--wrapper-padding);
       box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
       border-radius: rem(8);
+      height: auto;
 
       & + tr {
         margin-top: rem(32);
@@ -160,7 +161,7 @@ iam-table {
       }
     }
 
-    .dialog__wrapper {
+    .dialog__wrapper:not([slot="overflow"]) {
       margin-top: -0.5rem;
       margin-left: -1rem;
       z-index: 10;
@@ -216,6 +217,7 @@ iam-table {
       text-align: right;
       background: linear-gradient(90deg, transparent 0%, var(--row-bg) 1.25rem);
       cursor: default;
+      padding-bottom: 0;
 
       @media screen and (prefers-color-scheme: dark) {
         
@@ -224,6 +226,7 @@ iam-table {
       a {
         white-space: nowrap;
         padding-right: 0.2rem;
+        padding-bottom: 0;
       }
     }
 
@@ -425,6 +428,10 @@ iam-table {
     }
   }
 
+  tr:has([type="checkbox"]:checked){
+    height: 3.5rem;
+  }
+
   tr:has([type="checkbox"]:checked){
     --row-bg: #E0E0E0;
 
@@ -586,7 +593,11 @@ iam-table.table--fullwidth:not([data-expandable]) {
     }
 
     tr {
-      
+
+      &:has(.td--fixed) {
+        height: 3.5rem;
+      }
+
       &:is(:hover,:focus) .td--fixed{
         background: linear-gradient(90deg, var(--row-bg) calc(100% - 1.5rem), transparent 100%);
       }
@@ -597,6 +608,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/elements/details.scss

@@ -1,4 +1,4 @@
-details {
+details:not(.details--revert) {
 
   --inline-padding: #{rem(2)};
   --border-radius: #{rem(8)} #{rem(8)} 0 0;

package/assets/sass/elements/progress.scss

@@ -0,0 +1,71 @@
+@use "../_func" as *;
+
+:is(label,.label):has(progress){
+  position: relative;
+  max-width: $input-max-width;
+  margin-bottom: 2rem;
+
+  padding-right: 3rem;
+}
+
+progress {
+  border-radius: rem(5);
+  display: block;
+  margin-top: rem(8);
+  width: calc(100% + 3rem);
+  height: rem(8);
+  margin-left: 0;
+  border: none;
+}
+
+progress:before {
+  content: attr(value)'%';
+  vertical-align: 0;
+  line-height: 1;
+  
+  /*Position text over the progress bar */
+  position:absolute;
+  top: auto;
+  left:auto;
+  right:0;
+  bottom: rem(16);
+  color: var(--colour-heading);
+  font-weight: bold;
+}
+
+progress::-webkit-progress-bar {
+  background-color: var(--colour-light);
+  border-radius: rem(5);
+}
+progress::-webkit-progress-value {
+  background-color: var(--colour, var(--colour-info));
+  border-radius: rem(5);
+}
+
+
+
+
+progress::-moz-progress-bar {
+  /* style rules */
+}
+
+
+// #region inline progress
+
+:is(label, .label):has(.progress--inline){ 
+
+  font-size: 1rem;
+color: var(--colour-body);
+  
+  
+  progress.progress--inline {
+
+    width: 100%;
+  
+    &:before {
+      bottom: -0.25em;
+    }
+  }
+}
+
+// #endregion

package/assets/sass/elements/table.element.scss

@@ -46,7 +46,7 @@ th {
 
 thead {
   tr {
-
+    
     border-bottom: var(--border-width) solid currentColor;
     @include var(border-color,--colour-primary);
   }

package/assets/sass/helpers/line-clamp.scss

@@ -0,0 +1,24 @@
+.line-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  text-overflow: hidden;
+  overflow: hidden;
+}
+
+
+.line-clamp--2 {
+  -webkit-line-clamp: 2;
+}
+
+.line-clamp--3 {
+  -webkit-line-clamp: 3;
+}
+
+.line-clamp--4 {
+  -webkit-line-clamp: 4;
+}
+
+.line-clamp--5 {
+  -webkit-line-clamp: 5;
+}

package/assets/ts/components/actionbar/actionbar.component.ts

@@ -293,7 +293,7 @@ class iamActionbar extends HTMLElement {
       // If the wrapper width is small we want to reduce the btn sizes by adding or removing btn-compact classes
       if (wrapperWidth < 576) {
         
-        Array.from(that.querySelectorAll(':scope > .btn:not(.js-updated), :scope > .dialog__wrapper > .btn:first-child:not(.js-updated)')).forEach((element,index) => {
+        Array.from(that.querySelectorAll(':scope > .btn:not(.js-updated), :scope > .dialog__wrapper > .btn[class*="fa-"]:first-child:not(.js-updated)')).forEach((element,index) => {
 
           element.className = element.className.replace(' btn-compact',' _btn-compact');
           element.classList.add('btn-compact');

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

@@ -32,7 +32,7 @@ class iamCard extends HTMLElement {
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
-    <div class="card ${classList}" tabindex="0" role="button">
+    <div class="card ${classList}" tabindex="0" part="card">
       ${this.hasAttribute('data-image') ? `<div class="card__head"><img src="${this.getAttribute('data-image')}" alt="" loading="lazy" /><div class="card__badges"><slot name="badges"></slot></div></div>` : ''}
       <div class="card__body">
       ${!this.hasAttribute('data-image') ? `<div class="card__badges"><slot name="badges"></slot></div>` : ''}
@@ -42,7 +42,10 @@ class iamCard extends HTMLElement {
       </div>
       ${this.hasAttribute('data-add-link') ? `<button class="btn btn-compact btn-secondary fa-plus">Add property</button>` : ''}
       <slot name="checkbox"></slot>
-      ${this.hasAttribute('data-cta') ? `<div class="card__footer"><span class="link">${this.getAttribute('data-cta')}</span></div>` : ''}
+      <div class="card__footer">
+        <slot name="footer"></slot>
+        ${this.hasAttribute('data-cta') ? `<span class="link d-inline-block pt-0 mb-0">${this.getAttribute('data-cta')}</span>` : ''}
+      </div>
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));

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

@@ -166,6 +166,12 @@ class iamNav extends HTMLElement {
       }
     });
     
+
+    this.querySelectorAll('details').forEach(function(element){
+      
+      element.classList.add('details--revert');
+    });
+
     // Has secondary link
     if(this.querySelector('a[slot="secondary"]')){
       menu.classList.add('has-secondary');

package/dist/components.es.js

@@ -69,7 +69,7 @@ const Ia = /* @__PURE__ */ p(O, [["render", K]]), G = (t) => t.charAt(0).toUpper
     this.$nextTick(function() {
       import(
         /* @vite-ignore */
-        "./table.component.min-9e5411a6.mjs"
+        "./table.component.min-8e19e6b9.mjs"
       ).then((t) => {
         window.customElements.get("iam-table") || window.customElements.define("iam-table", t.default);
       }).catch((t) => {
@@ -544,7 +544,7 @@ const Te = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      import("./accordion.component.min-19e47673.mjs").then((t) => {
+      import("./accordion.component.min-b9d23879.mjs").then((t) => {
         window.customElements.get("iam-accordion") || window.customElements.define("iam-accordion", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -655,7 +655,7 @@ const Ba = /* @__PURE__ */ p(Re, [["render", Be]]), Oe = {
     this.$nextTick(function() {
       import(
         /* @vite-ignore */
-        "./card.component.min-993fe43a.mjs"
+        "./card.component.min-7fc40c2b.mjs"
       ).then((t) => {
         window.customElements.get("iam-card") || window.customElements.define("iam-card", t.default);
       }).catch((t) => {
@@ -715,7 +715,7 @@ const Ua = /* @__PURE__ */ p(We, [["render", Ke]]), Ge = {
   },
   mounted() {
     this.$nextTick(function() {
-      T(/* @__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-08b4d160.mjs") }), "../../../assets/js/components/header/header.component.js").then((t) => {
+      T(/* @__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-1aa6ab3d.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);
@@ -1111,7 +1111,7 @@ const Qa = /* @__PURE__ */ p(vt, [["render", Mt]]), Ct = {
   name: "Nav",
   mounted() {
     this.$nextTick(function() {
-      import("./nav.component.min-4708faf5.mjs").then((t) => {
+      import("./nav.component.min-59dc3615.mjs").then((t) => {
         window.customElements.get("iam-nav") || window.customElements.define("iam-nav", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1231,7 +1231,7 @@ const ea = {
   name: "Tabs",
   mounted() {
     this.$nextTick(function() {
-      T(/* @__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-69e80b83.mjs") }), "../../../assets/js/components/tabs/tabs.component.js").then((t) => {
+      T(/* @__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-14d49880.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);
@@ -1361,7 +1361,7 @@ function pa(t, a, e, i, o, n) {
 }
 const ai = /* @__PURE__ */ p(ra, [["render", pa]]);
 /*!
-  * iamKey v5.4.2-beta3
+  * iamKey v5.5.0
   * Copyright 2022-2024 iamproperty
   */
 function ha(t, a) {
@@ -1457,7 +1457,7 @@ function ga(t, a, e, i, o, n) {
 }
 const ii = /* @__PURE__ */ p(ba, [["render", ga]]);
 /*!
-  * iamKey v5.4.2-beta3
+  * iamKey v5.5.0
   * Copyright 2022-2024 iamproperty
   */
 function ya(t, a) {
@@ -1627,7 +1627,7 @@ const ni = /* @__PURE__ */ p(La, [["render", Sa]]), qa = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      import("./actionbar.component.min-6fb0551f.mjs").then((t) => {
+      import("./actionbar.component.min-40bcd9a4.mjs").then((t) => {
         window.customElements.get("iam-actionbar") || window.customElements.define("iam-actionbar", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1642,7 +1642,7 @@ function Ea(t, a, e, i, o, n) {
 }
 const oi = /* @__PURE__ */ p(qa, [["render", Ea]]);
 /*!
-  * iamKey v5.4.2-beta3
+  * iamKey v5.5.0
   * Copyright 2022-2024 iamproperty
   */
 class z extends HTMLElement {
@@ -1782,7 +1782,7 @@ function ja(t, a, e, i, o, n) {
 }
 const li = /* @__PURE__ */ p(Ca, [["render", ja]]);
 /*!
-  * iamKey v5.4.2-beta3
+  * iamKey v5.5.0
   * Copyright 2022-2024 iamproperty
   */
 window.dataLayer = window.dataLayer || [], window.dataLayer.push({ event: "customElementRegistered", element: "collapsible side menu" });