@iamproperty/components 5.5.0 → 5.5.1-beta-2

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

@@ -197,4 +197,13 @@
     pointer-events: none;
   }
 }
-// #endregion
+// #endregion
+@include media-breakpoint-up(sm) {
+  :host(.tabs--inline) .tabs__links {
+    margin: 0;
+    justify-content: center;
+  }
+  :host(.tabs--inline) .tabs__links__wrapper:after {
+    width: 100%;
+  }
+}

package/assets/sass/elements/badge-tag.scss

@@ -0,0 +1,82 @@
+@use "../_func" as *;
+
+:is(.badge, .tag) {
+
+  font-size: rem(16);
+  line-height: rem(26);
+  border: none!important;
+  outline: 1px solid var(--colour-canvas);
+  outline-offset: -1px;
+  padding: 0 rem(16);
+  border-radius: rem(16);
+  margin: 0;
+  display: inline-block;
+  text-align: center;
+  white-space: nowrap;
+  max-width: fit-content;
+  color: #262626!important;
+  position: relative;
+  background: var(--wider-colour, var(--wider-colour-1));
+  margin-bottom: 1rem;
+
+  &:has(:is(.badge, .tag)) {
+    margin-right: rem(6);
+  }
+  
+  &:empty {
+    display: none;
+  }
+}
+
+.tag {
+
+  &:after {
+    content: '\2715';
+    margin-left: 0.6em;
+    font-weight: bold;
+  }
+
+  &:is(:hover,:focus,.hover) {
+    background: var(--wider-colour-hover, var(--wider-colour-1-hover));
+  }
+
+  &:has(input:checked),
+  &:is(:active,.active) {
+    background: var(--wider-colour-active, var(--wider-colour-1-active));
+  }
+
+  &:has(input:disabled),
+  &:disabled {
+    
+    background: var(--wider-colour-1)!important;
+    color: #99adb1!important;
+  }
+}
+
+.tag.tag--toggle,
+.tag.tag--not-set {
+
+  background: var(--colour-canvas);
+  outline: 1px solid var(--colour-border);
+
+}
+
+.tag.tag--toggle {
+  
+  &:after {
+    display: none;
+  }
+  
+  &:has(input:checked),
+  &.selected {
+      
+    background: #E9F9FD;
+    outline: 1px solid #1EBEE6;
+  }
+}
+
+// Quick fix for badges in buttons
+.btn :is(.badge, .tag) {
+  position: relative;
+  top: -1px;
+}

package/assets/sass/elements/buttons.scss

@@ -113,7 +113,6 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
     margin-right: rem(6);
   }
 
-  
   a:is(:hover, :focus, .hover, :focus-within):not([disabled],:active, .active) &,
   &:is(:hover, :focus, .hover, :focus-within):not([disabled],:active, .active) {
     background: var(--colour-btn-action-hover-bg);
@@ -137,6 +136,19 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
     line-height: 1em;
   }
 
+  &.btn[class*='fa-after'] {
+    padding-right: 4rem;
+  }
+  &.btn[class*='fa-after']:before {
+
+    margin-right: 0;
+    margin-right: rem(6);
+    position: absolute;
+    right: 1.5rem;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+
   &:not(.btn-compact):before{
     margin-right: 1rem;
   }

package/assets/sass/elements/details.scss

@@ -1,10 +1,46 @@
-details:not(.details--revert) {
+
+details {
+
+  &:not([open]){
+      
+    padding-bottom: rem(32);
+  }
+
+  summary {
+
+    font-size: rem(18);
+    line-height: rem(21);
+    font-weight: normal;
+    color: var(--colour-heading);
+    display: block;
+
+    &:after {
+      content: "\f055";
+      display: inline-block;
+      margin-left: 0.5em;
+      line-height: 1em;
+      font-size: 1em;
+      font-family: "Font Awesome 6 Pro";
+    }
+  }
+
+  &[open] summary {
+    
+    margin-bottom: rem(16);
+  }
+
+}
+
+
+
+iam-accordion details {
 
   --inline-padding: #{rem(2)};
   --border-radius: #{rem(8)} #{rem(8)} 0 0;
   --icon-top: #{rem(14)};
   --line-height: #{rem(24)};
 
+
   *:not(iam-tabs) > &:not([open]){
     
     padding-bottom: rem(42);
@@ -19,7 +55,7 @@ details:not(.details--revert) {
 
   summary {
 
-    border-bottom: 1px solid var(--colour-border);
+  border-bottom: 1px solid var(--colour-border);
     padding-left: var(--inline-padding);
     padding-right: calc(var(--inline-padding) + #{rem(24)} + #{rem(24)});
     padding-block: rem(14)!important;
@@ -36,7 +72,11 @@ details:not(.details--revert) {
       all: unset!important;
     }
 
-    *:is(h1,h2,h4,h5,h6,.h1,.h2,.h4,.h5,.h6){
+    &::after {
+      display: none;
+    }
+
+    *:is(h1,h2,h4,h5,h6,.h1,.h2,.h4,.h5,.h6,.label){
       max-width: 100%;
       padding: 0;
       margin: 0;
@@ -60,7 +100,7 @@ details:not(.details--revert) {
     margin-bottom: 2rem;
   }
 
-  &[open] summary :is(h1,h2,h4,h5,h6,.h1,.h2,.h4,.h5,.h6) {
+  &[open] summary :is(h1,h2,h4,h5,h6,.h1,.h2,.h4,.h5,.h6, .label) {
 
     &:after {
       content: "\f056";
@@ -68,7 +108,7 @@ details:not(.details--revert) {
     }
   }
 
-  summary:not(:has(h1,h2,h4,h5,h6,.h1,.h2,.h4,.h5,.h6)) { // h3 purposelessly missed out
+  summary:not(:has(h1,h2,h4,h5,h6,.h1,.h2,.h4,.h5,.h6,.label)) { // h3 purposelessly missed out
 
     font-family: $headings-font-family;
     font-style: $headings-font-style;
@@ -88,12 +128,14 @@ details:not(.details--revert) {
 
     &:after {
       content: "\f055";
+      display: block;
       position: absolute;
       font-size: rem(24);
       top: calc((#{var(--line-height)} / 2) - #{rem(12)} + #{rem(14)});
       right: var(--inline-padding);
       width: rem(24);
       height: rem(24);
+      margin: 0;
       line-height: rem(24);
       font-weight: 300;
       font-family: "Font Awesome 6 Pro";
@@ -115,4 +157,51 @@ details:not(.details--revert) {
       font-weight: 900;
     }
   }
+}
+
+
+dialog iam-accordion details {
+
+  --inline-padding: var(--dialog-padding);
+
+  margin-inline: calc(var(--dialog-padding) * -1);
+  width: calc(100% + var(--dialog-padding) + var(--dialog-padding));
+
+
+  &:has(summary:is(:hover, :focus-visible)),
+  &[open] {
+    background: var(--colour-light);
+    overflow: hidden;
+  }
+
+  // Fix the border bottom issue
+  &:has(+ details[open]),
+  &:has(summary:is(:hover, :focus-visible)),
+  &:has(+ details summary:is(:hover, :focus-visible)),
+  &[open] {
+    border-bottom: 1px solid var(--colour-border);
+  }
+
+  &:has(+ details[open]) summary,
+  &:has(summary:is(:hover, :focus-visible)) summary,
+  &:has(+ details summary:is(:hover, :focus-visible)) summary,
+  &[open] summary {
+    border-bottom: 0;
+  }
+
+  &[open] summary {
+
+    margin-bottom: 1rem;
+  }
+ 
+  summary {
+    --inline-padding: 0;
+  }
+
+  padding-inline: var(--dialog-padding);
+
+  &::before {
+    content: "";
+
+  }
 }

package/assets/sass/elements/dialog.scss

@@ -11,6 +11,8 @@ dialog[open] {
 
   --dialog-padding: #{rem(24)};
 
+  --mh-padding-inline: var(--dialog-padding);
+
   width: fit-content;
   height: fit-content;  
   border: none;

package/assets/sass/elements/forms.scss

@@ -5,7 +5,7 @@ $icon-error: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' vie
 $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d='M441 103c9.4 9.4 9.4 24.6 0 33.9L177 401c-9.4 9.4-24.6 9.4-33.9 0L7 265c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l119 119L407 103c9.4-9.4 24.6-9.4 33.9 0z' fill='#0f9d58' /></svg>");
 
 // #region Form label
-:is(label,.label) {
+:is(label:not(.tag),.label) {
   font-size: rem(18);
   line-height: rem(21);
   margin-bottom: rem(8);
@@ -16,7 +16,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
 // #endregion
 
 // #region Optional text
-:is(label,.label) {
+:is(label:not(.tag),.label) {
 
   @if $optionalText == "true" {
     &:has(+ input:not(:disabled):not([readonly]):not(:required):not([type='radio']):not([type='checkbox']):not([type='file'])):after {
@@ -328,8 +328,8 @@ div:has(> label:first-child):has(> input):has(> :is(.form-control-inline,.input-
     border-start-start-radius: 0!important;
   }
 
-  .suffix ~ :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),textarea,output),
-  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),textarea,output):has(~ .suffix) {
+  .suffix ~ :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="date"]),textarea,output),
+  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="date"]),textarea,output):has(~ .suffix) {
     order: 1;
     
     border-start-end-radius: 0!important;
@@ -457,25 +457,25 @@ input:is([type="radio"],[type="checkbox"]) {
   pointer-events: none;
 }
 
-:is(div,fieldset,label):has(> input:is([type="radio"],[type="checkbox"])):not(:has(label input)) {
+:is(div,fieldset,label:not(.tag)):has(> input:is([type="radio"],[type="checkbox"])):not(:has(label input)) {
   position: relative;
   margin-bottom: rem(24);
 }
 
-:is(div,fieldset,label):has( > input[type="radio"]){
+:is(div,fieldset,label:not(.tag)):has( > input[type="radio"]){
 
   --border-radius: 50%;
   --outline-width: #{rem(8)};
 }
 
-:is(div,fieldset,label):has( > input[type="checkbox"]) {
+:is(div,fieldset,label:not(.tag)):has( > input[type="checkbox"]) {
 
   --border-radius: #{rem(4)};
   --outline-width: #{rem(4)};
 }
 
 input:is([type="radio"],[type="checkbox"]) + label:not(:has(> iam-card)),
-label:has(input:is([type="radio"],[type="checkbox"])):not(:has(> iam-card)){
+label:not(.tag):has(input:is([type="radio"],[type="checkbox"])):not(:has(> iam-card)){
 
   --tick-colour: transparent;
 
@@ -523,7 +523,7 @@ label:has(input:is([type="radio"],[type="checkbox"])):not(:has(> iam-card)){
 
 
 input[type="radio"] + label:not(:has(> iam-card)),
-label:has(input[type="radio"]):not(:has(> iam-card)) {
+label:not(.tag):has(input[type="radio"]):not(:has(> iam-card)) {
 
   &:after {
     content: ""!important;
@@ -572,13 +572,13 @@ label:has(input[type="radio"]):not(:has(> iam-card)) {
 
 // multiple radio's together
 :is(div,fieldset):has(> :is(input[type="radio"],input[type="checkbox"]):nth-of-type(2)) {
-  label:not(:has(> iam-card)) {
+  label:not(.tag):not(:has(> iam-card)) {
     margin-bottom: 0rem;
   }
 }
 
 input:is([type="radio"],[type="checkbox"]):checked + label,
-label:has(input:is([type="radio"],[type="checkbox"]):checked) {
+label:not(.tag):has(input:is([type="radio"],[type="checkbox"]):checked) {
 
   --tick-colour: var(--colour-info);
 
@@ -596,7 +596,7 @@ label:has(input:is([type="radio"],[type="checkbox"]):checked) {
 }
 
 input[type="checkbox"]:not([disabled]):checked + label,
-label:has(input[type="checkbox"]:not([disabled]):checked) {
+label:not(.tag):has(input[type="checkbox"]:not([disabled]):checked) {
 
   &:before {
     background: var(--colour-info)!important;
@@ -604,7 +604,7 @@ label:has(input[type="checkbox"]:not([disabled]):checked) {
 }
 
 input[type="checkbox"]:checked + label,
-label:has(input[type="checkbox"]:checked) {
+label:not(.tag):has(input[type="checkbox"]:checked) {
 
   &:after {
     content: "\f00c";
@@ -627,7 +627,7 @@ label:has(input[type="checkbox"]:checked) {
 }
 
 input[type="checkbox"]:indeterminate + label,
-label:has(input[type="checkbox"]:indeterminate) {
+label:not(.tag):has(input[type="checkbox"]:indeterminate) {
 
   &:before {
     background: var(--colour-info) !important;
@@ -656,13 +656,13 @@ label:has(input[type="checkbox"]:indeterminate) {
 
 
 input:is([type="radio"],[type="checkbox"]):checked:is(:focus,:hover,.focus) + label,
-label:has(input:is([type="radio"],[type="checkbox"]):checked:is(:focus,:hover,.focus)) {
+label:not(.tag):has(input:is([type="radio"],[type="checkbox"]):checked:is(:focus,:hover,.focus)) {
 
   --tick-colour: var(--colour-info);
 }
 
 input:is([type="radio"],[type="checkbox"]):is(:focus,:hover,.focus) + label,
-label:has(input:is([type="radio"],[type="checkbox"]):is(:focus,:hover,.focus)) {
+label:not(.tag):has(input:is([type="radio"],[type="checkbox"]):is(:focus,:hover,.focus)) {
 
   --tick-colour: var(--colour-muted);
 
@@ -672,7 +672,7 @@ label:has(input:is([type="radio"],[type="checkbox"]):is(:focus,:hover,.focus)) {
   }
 }
 input:is([type="radio"],[type="checkbox"]):is(:active,.active) + label,
-label:has(input:is([type="radio"],[type="checkbox"]):is(:active,.active)) {
+label:not(.tag):has(input:is([type="radio"],[type="checkbox"]):is(:active,.active)) {
 
   --tick-colour: var(--colour-light);
 
@@ -684,7 +684,7 @@ label:has(input:is([type="radio"],[type="checkbox"]):is(:active,.active)) {
 
 // Disabled
 input:is([type="radio"],[type="checkbox"]):disabled + label,
-label:has(input:is([type="radio"],[type="checkbox"]):disabled)  {
+label:not(.tag):has(input:is([type="radio"],[type="checkbox"]):disabled)  {
 
   opacity: 0.4;
   cursor: not-allowed;
@@ -701,7 +701,7 @@ label:has(input:is([type="radio"],[type="checkbox"]):disabled)  {
 }
 
 input[type="radio"][disabled]:checked + label,
-label:has(input[type="radio"][disabled]:checked) {
+label:not(.tag):has(input[type="radio"][disabled]:checked) {
   
   &:after {
     background-color: var(--colour-primary)!important;
@@ -709,7 +709,7 @@ label:has(input[type="radio"][disabled]:checked) {
 }
 
 input[type="checkbox"][disabled]:checked + label,
-label:has(input[type="checkbox"][disabled]:checked) {
+label:not(.tag):has(input[type="checkbox"][disabled]:checked) {
 
   &:before {
     background: #E0E0E0!important;
@@ -814,7 +814,7 @@ div:has(> select){
   border: none;
   display: inline-block;
   margin: 0;
-  padding: 0 calc(1.25em + 0.8ch) 0 0.25em;
+  padding: 0 calc(1.25em + 0.8ch) 0 0.25em!important;
   height: auto;
   cursor: pointer;
 
@@ -858,7 +858,7 @@ iam-fileupload {
 
 
 // #region label with input field in 
-:is(label, .label):has(:is(input,select)){
+:is(label:not(.tag), .label):has(:is(input,select)){
 
   display: block;
   margin-bottom: rem(24);
@@ -1030,6 +1030,10 @@ iam-slider input::-webkit-inner-spin-button {
 // #region Date and time fields
 :is(input[type="date"],input[type="time"]) {
   position: relative;
+  margin-right: -3rem;
+  padding-right: 3rem !important;
+  background-position: right 4rem center;
+  border-radius: 0.5rem !important;
 }
 :is(input[type="date"],input[type="time"])::-webkit-calendar-picker-indicator {
   background: transparent;

package/assets/sass/elements/tooltips.scss

@@ -46,10 +46,11 @@
 
 }
 
+abbr[title] {
+  text-underline-offset: 0.2em;
+}
 
-
-:is(abbr[title], .tooltip) {
-
+.tooltip {
   text-decoration: none;
   position: relative;
 

package/assets/sass/foundations/root.scss

@@ -26,6 +26,17 @@ $root: ':root'!default;
     }
   }
 
+  // Wider colours
+  @each $colour, $value in $wider-colours {
+    --wider-colour-#{$colour}: #{$value};
+  }
+  @each $colour, $value in $wider-colours-hover {
+    --wider-colour-#{$colour}-hover: #{$value};
+  }
+  @each $colour, $value in $wider-colours-active {
+    --wider-colour-#{$colour}-active: #{$value};
+  }
+
   // Extra vars needed
   --content-max-width: #{$content-max-width};
   --colour-brand: var(--colour-primary);

package/assets/sass/helpers/wider-colours.scss

@@ -0,0 +1,11 @@
+
+
+@each $colour, $value in $wider-colours {
+
+  .wider-colour-#{$colour} {
+    --wider-colour: var(--wider-colour-#{$colour});
+    --wider-colour-hover: var(--wider-colour-#{$colour}-hover);
+    --wider-colour-active: var(--wider-colour-#{$colour}-active);
+    color: #262626!important;
+  }
+}

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

@@ -214,6 +214,9 @@ class iamActionbar extends HTMLElement {
 
     // #region search
     const searchBar = this.shadowRoot.querySelector('.actionbar--search');
+    if(this.hasAttribute('data-search-value')){
+      this.shadowRoot.querySelector('#search').value = this.getAttribute('data-search-value');
+    }
 
     if(this.hasAttribute('data-search') && this.getAttribute('data-search') == 'show')
       searchBar.classList.add('show');
@@ -262,14 +265,22 @@ class iamActionbar extends HTMLElement {
       const screenWidth = document.documentElement.scrollWidth;
       let safeAreaWidth = 750;
       let elementMargin = 16;
+      let tabletSafeWidth = 450;
       let mobileSafeWidth = that.hasAttribute('data-switchviews') ? 144 : 210;
 
+      if(that.hasAttribute('data-large-safe-area')){
+
+        safeAreaWidth = 1048;
+        tabletSafeWidth = 620;
+        mobileSafeWidth = 260;
+      }
+
       // We need to modify the widths to mimic the CSS's scaling functionality
       let modifier = 1;
       if (screenWidth >= 992 && screenWidth <= 1280){
         modifier = screenWidth/1280;
       }
-      else if (screenWidth >= 576 && screenWidth <= 1280) {
+      else if (screenWidth >= 576 && screenWidth < 992) {
         modifier = screenWidth/768;
       }
       else if (screenWidth < 576) {
@@ -280,8 +291,8 @@ class iamActionbar extends HTMLElement {
       if (wrapperWidth >= 992 && wrapperWidth <= 1280){
         safeAreaWidth = safeAreaWidth*modifier;
       }
-      else if (wrapperWidth >= 576 && wrapperWidth <= 1280) {
-        safeAreaWidth = 450*modifier;
+      else if (wrapperWidth >= 576 && wrapperWidth < 992) {
+        safeAreaWidth = tabletSafeWidth*modifier;
       }
       else if (wrapperWidth < 576) {
         safeAreaWidth = mobileSafeWidth*modifier;

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/chart/README.md

@@ -0,0 +1,37 @@
+```
+<iam-chart>
+  <table>
+    <thead>
+      <tr>
+        <th>Issue</th>
+        <th>Democrat</th>
+        <th>Republican</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr><td>Inflation</td><td>45%</td><td>18%</td></tr><tr><td>Abortion</td><td>12%</td><td>43%</td></tr>
+      <tr><td>Gun policy</td><td>8%</td><td>14%</td></tr><tr><td>Immigration</td><td>15%</td><td>5%</td></tr>
+      <tr><td>Crime</td><td>13%</td><td>10%</td></tr>
+    </tbody>
+  </table>
+</iam-chart>
+```
+
+**To do**
+
+- Animation
+- Add more chart types
+- optimise code
+- change key
+- Fill in readme with class and attributes
+- flout
+
+**Note**
+
+
+**Properties**
+
+
+**Class modifiers**
+
+- .chart--no-animate turns of the animation