@iamproperty/components 5.4.2-beta4 → 5.5.1-beta-1

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/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/header.scss

@@ -62,7 +62,14 @@
 }
 
 
-
+:host(.header--contain) {
+  .header-banner {
+    padding-bottom: 2rem;
+  }
+  .header-banner > picture {
+    max-height: 100%;
+  }
+}
 
 
 

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

@@ -16,7 +16,6 @@ iam-table {
   }
   tbody tr {
     background: var(--row-bg);
-    height: 3.5rem;
 
     &:is(:hover,:focus-within,.hover) {
 
@@ -429,6 +428,10 @@ iam-table {
     }
   }
 
+  tr:has([type="checkbox"]:checked){
+    height: 3.5rem;
+  }
+
   tr:has([type="checkbox"]:checked){
     --row-bg: #E0E0E0;
 
@@ -591,6 +594,10 @@ 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%);
       }

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/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/address-lookup/address-lookup.component.ts

@@ -141,6 +141,15 @@ class iamAddressLookup extends HTMLElement {
       });
     }
 
+    if(this.hasAttribute('data-manual')){
+      lookupWrapper.classList.add('js-hide');
+      manualWrapper.classList.remove('js-hide');
+
+      Array.from(manualWrapper.querySelectorAll('[data-required]')).forEach((input, index) => {
+        input.setAttribute('required','true');
+      });
+    }
+      
     function openManualWrapper (){
       lookupWrapper.classList.add('js-hide');
       manualWrapper.classList.remove('js-hide');

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));