@iamproperty/components 5.5.1-beta-1 → 5.5.1-beta-4

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;
@@ -373,6 +373,18 @@ input[maxlength] + span {
 
   border-color: var(--colour-danger)!important;
 }
+
+
+.was-validated select:is(:invalid, .is-invalid, [aria-invalid],:-internal-autofill-selected) {
+
+  $form-select-indicator-new: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m2 5 6 6 6-6'/></svg>") !default;
+
+  background: escape-svg($form-select-indicator-new) right var(--input-padding-block, 0.75rem) top var(--input-padding-block, 0.75rem) / var(--input-lh, 1.25rem) var(--input-lh, 1.25rem) no-repeat,
+              linear-gradient(to left, var(--colour-primary-theme), var(--colour-primary-theme) 100%) right top / calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem)) calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.8rem) + var(--input-lh, 1.25rem)) no-repeat,
+              escape-svg($icon-error) right var(--input-padding-block, 3.5rem) top var(--input-padding-block, 0.75rem) / var(--input-lh, 1.25rem) var(--input-lh, 1.25rem) no-repeat;
+  padding-right: 6rem!important;
+}
+
 .was-validated input:is(:invalid, .is-invalid,[aria-invalid],:-internal-autofill-selected) {
 
   background-image: escape-svg($icon-error);
@@ -457,25 +469,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 +535,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 +584,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 +608,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 +616,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 +639,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 +668,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 +684,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 +696,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 +713,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 +721,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;
@@ -769,12 +781,13 @@ select[multiple]::-webkit-scrollbar-thumb {
 select {
   $form-select-indicator-new: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m2 5 6 6 6-6'/></svg>") !default;
 
-  background: escape-svg($form-select-indicator-new) right var(--input-padding-block, 0.75rem) top var(--input-padding-block, 0.75rem)/var(--input-lh, 1.25rem) var(--input-lh, 1.25rem) no-repeat,
-              linear-gradient(to left, var(--colour-primary-theme), var(--colour-primary-theme) 100%) right top/calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem)) calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem)) no-repeat;
+  background: escape-svg($form-select-indicator-new) right var(--input-padding-block, 0.75rem) top var(--input-padding-block, 0.75rem) / var(--input-lh, 1.25rem) var(--input-lh, 1.25rem) no-repeat,
+              linear-gradient(to left, var(--colour-primary-theme), var(--colour-primary-theme) 100%) right top / calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem)) calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.8rem) + var(--input-lh, 1.25rem)) no-repeat;
   
   padding-right: calc(var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-lh, 1.25rem))!important;
   option {font-size: 1.2em;}
 
+  box-shadow: inset -2px 0px 0px var(--colour-primary-theme);
   
   max-width: $select-max-width;
 
@@ -814,7 +827,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,13 +871,13 @@ 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);
   max-width: $input-max-width;
 
-  :is(input:not([type="range"]),select) {
+  :is(input:not([type="range"]),select,textarea) {
     margin-top: rem(8);
     margin-bottom: 0!important;
   }
@@ -1030,6 +1043,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/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

package/assets/ts/components/chart/chart.component.ts

@@ -0,0 +1,98 @@
+// @ts-nocheck
+import {setupChart,setEventObservers,setEventHandlers} from "../../modules/chart";
+
+class iamChart extends HTMLElement {
+
+  constructor(){
+    super();
+    this.attachShadow({ mode: 'open'});
+
+    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
+    const loadCSS = `@import "${assetLocation}/css/components/charts.css";`;
+    const chartID = `chart-${Date.now()+(Math.floor(Math.random() * 100) + 1)}`;
+    const chartType = this.hasAttribute('data-type') ? this.getAttribute('data-type') : 'column';
+    const availableTypes = this.hasAttribute('data-types') ? this.getAttribute('data-types').split(',') : [];
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @import "${assetLocation}/css/core.min.css";
+    ${loadCSS}
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <div class="chart__outer">
+      <div class="chart__key"></div>
+
+      <div class="chart__options">
+        <span>Chart Type</span>
+      </div>
+
+      <div class="chart__wrapper">
+        <div class="chart__yaxis"></div>
+        <div class="chart">
+        <div class="chart__lines"></div>
+        <div class="chart__guidelines"></div>
+        </div>
+      </div>
+    </div>`;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
+
+    const element = this;
+    const orginalTable =  this.querySelector('table');
+    const newTable = orginalTable.cloneNode(true);
+    const chart = this.shadowRoot.querySelector('.chart');
+    const chartOuter = this.shadowRoot.querySelector('.chart__outer');
+    
+
+    chart.appendChild(newTable);
+
+    if(!this.classList.contains('chart--no-animate'))
+      chartOuter.classList.add('chart--animate');
+
+    setupChart(this,chartOuter,newTable);
+    setEventObservers(this,chartOuter);
+    
+    
+    const options = {
+      rootMargin: '50px',
+      threshold: 0.1
+    }
+
+    let callback = (entries:any) => {
+
+      entries.forEach((entry:any) => {
+        
+        if(entry.intersectionRatio > 0){
+
+
+          chartOuter.classList.add('animating');
+          chartOuter.classList.add('inview');
+          intObserver.unobserve(entry.target);
+
+          let rowCount = entry.target.querySelectorAll('tbody tr').length;
+          let animationTime = 2000 + (rowCount*100);
+          
+
+          setTimeout(function() {
+            chartOuter.classList.remove('animating');
+          }, animationTime);
+
+        }
+      });
+    };
+  
+    const intObserver = new IntersectionObserver(callback, options);
+    intObserver.observe(element);
+  }
+
+  attributeChangedCallback(attrName, oldVal, newVal) {
+    
+
+  }
+}
+
+export default iamChart;

package/assets/ts/components/fileupload/fileupload.component.ts

@@ -32,7 +32,7 @@ class iamFileupload extends HTMLElement {
       <div class="drop-area"></div>
       <hr/>
       <slot></slot>
-      <div class="files"></div>
+      <div class="files"><slot name="files"></slot></div>
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));

package/assets/ts/components/inline-edit/README.md

@@ -0,0 +1,30 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/nav/nav.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-nav`))
+    window.customElements.define(`iam-nav`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
+```
+<iam-inline-edit id="inlineEdit" data-autosave>
+  <label >Optional label
+    <input type="text" name="text" value="Placeholder text" />
+  </label>
+</iam-inline-edit>
+```
+
+```
+
+**Properties**
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| data-autosave  | Flag | - | Allows the input field to dispatch the autosave event when unfocusing the input field |