@iamproperty/components 5.7.1-beta4 → 5.7.1-beta6

package/assets/sass/components/barchart.component.scss

@@ -12,6 +12,7 @@
   
   .chart__outer > input[type="checkbox"]:nth-of-type(#{$i}):not(:checked) ~ .chart__wrapper table tbody tr td:not(:first-child):nth-child(#{$i+1}) {
     display: none;
+    opacity: 0;
   }
 }
 // #endregion
@@ -85,6 +86,13 @@
       display: block!important;
       height: var(--bar-height, #{rem(24)});
       line-height: var(--bar-height, #{rem(24)});
+      max-width: var(--xaxis-max-width, none);
+
+      > *:not([popover]) {
+        max-width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
     }
   }
 
@@ -96,11 +104,14 @@
     opacity: 0;
     pointer-events: none;
     white-space: nowrap;
+    
+    width: var(--xaxis-max-width, none);
   }
 
   &:has(td .tooltip) .chart__wrapper[data-longest-label]:before {
   
     padding-right: 2em;
+    width: calc(var(--xaxis-max-width, none) - 1rem);
   }
 
   .chart__wrapper[data-longest-label] table tbody tr td:first-child {
@@ -114,7 +125,7 @@
       left: auto!important;
       right: 100%!important;
       padding-right: 0.5em;
-    
+      width: fit-content;
   }
 
   
@@ -126,7 +137,7 @@
 // #endregion
 
 // #region stacked
-.chart--stacked .chart__wrapper {
+:host(.chart--stacked) .chart__wrapper {
   table tbody tr {
     --bar-gap: 0;
     flex-direction: column-reverse;
@@ -138,6 +149,29 @@
     }
   }
 }
+:host(.chart--stacked.chart--horizontal) .chart__wrapper table tbody tr {
+  
+  flex-direction: row;
+
+  &::after {
+    content: attr(data-numeric);
+    position: absolute;
+    opacity: 1 !important;
+    bottom: 100%;
+    left: 50%;
+    transform: translate(-50%, 0);
+    display: block !important;
+    height: fit-content;
+    margin: 0;
+    bottom: 50%;
+    left: calc(var(--percent) + .5rem);
+    transform: translate(0, 50%);
+  }
+
+  td:after {
+    content: none;
+  }
+}
 // #endregion
 
 // #region animation
@@ -236,9 +270,13 @@
 
 :host(.chart--fit-content:not(.chart--horizontal)) {
 
-  width: fit-content;
+  width: 100%;
   display: block;
 
+  .chart__wrapper {
+    width: fit-content;
+  }
+
   table {
     width: fit-content!important;
     padding-top: 0;
@@ -263,13 +301,23 @@
   }
 }
 
-.chart__outer {
+:host(.chart--fit-content:not(.chart--horizontal).chart--no-scale) {
+  --fc-group-width: #{rem(22)};
+  --fc-value-width: #{rem(24)};
+  
+  table{
+    height: var(--chart-height-lg-set,#{rem(120)});
+  }
+  
+}
+
+.chart__wrapper {
       
-  @container (min-width: 36em) {
+
+  @container (min-width: #{em($device-xs-width,16)}) {
     --fc-group-width: #{rem(22)};
     --fc-value-width: #{rem(24)};
-    
-    
+
   }
 }
 

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

@@ -4,6 +4,8 @@
 
 iam-card {
 
+  margin-bottom: 1.5rem;
+  display: block;
 
   @supports not selector(:has(*)) {
       
@@ -67,6 +69,10 @@ iam-card {
   }
 }
 
+:is(a, button, label) iam-card{
+  margin-bottom: 0!important;
+}
+
 
 [data-select-container]:has([type="checkbox"]:checked) iam-card {
 
@@ -93,4 +99,4 @@ iam-card {
 a[target="_blank"] iam-card::part(card) {
 
   --icon: var(--icon-new-tab);
-}
+}

package/assets/sass/components/card.scss

@@ -55,59 +55,61 @@
     }
   }
 
-  &:before,
-  &:after {
-    content: "";
-    position: absolute;
-    right: var(--card-icon-right);
-    bottom: var(--card-bottom-padding);
-    height: rem(24);
-    width: rem(24);
-    background: var(--colour-warning);
-    border-radius: 50%;
-  }
+  &:not(:has(.dialog__wrapper)){
 
-  &:after {
-    background: var(--colour-primary-theme);
-    mask-image: var(--icon,var(--icon-arrow));
-    mask-size: 50%;
-    mask-repeat: no-repeat;
-    mask-position: 50% 50%;
-    -webkit-mask-image: var(--icon,var(--icon-arrow));
-    -webkit-mask-size: 50%;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: 50% 50%;
-    z-index: 2;
-  }
+    &:before,
+    &:after {
+      content: "";
+      position: absolute;
+      right: var(--card-icon-right);
+      bottom: var(--card-bottom-padding);
+      height: rem(24);
+      width: rem(24);
+      background: var(--colour-warning);
+      border-radius: 50%;
+    }
 
-  &:is(:hover,:focus,.hover) {
-    --hover-outline-colour-default: var(--colour, var(--colour-primary));
-    outline: 2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));
-    outline-offset: -2px;
-  }
-  
-  // Update arrow cololur
-  &:not([class*="colour-"]):is(:hover,:focus,.hover,:active, .active) {
+    &:after {
+      background: var(--colour-primary-theme);
+      mask-image: var(--icon,var(--icon-arrow));
+      mask-size: 50%;
+      mask-repeat: no-repeat;
+      mask-position: 50% 50%;
+      -webkit-mask-image: var(--icon,var(--icon-arrow));
+      -webkit-mask-size: 50%;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: 50% 50%;
+      z-index: 2;
+    }
 
-    &:before {
-      background: var(--hover-icon-bg, var(--colour-primary-theme));
+    &:is(:hover,:focus,.hover) {
+      --hover-outline-colour-default: var(--colour, var(--colour-primary));
+      outline: 2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));
+      outline-offset: -2px;
     }
-    &:after {
-      background: var(--hover-icon-colour, #ffffff);
+    
+    // Update arrow cololur
+    &:not([class*="colour-"]):is(:hover,:focus,.hover,:active, .active) {
+
+      &:before {
+        background: var(--hover-icon-bg, var(--colour-primary-theme));
+      }
+      &:after {
+        background: var(--hover-icon-colour, #ffffff);
+      }
     }
-  }
 
-  &:is(:active, .active){
-    --card-icon-right: var(--card-icon-right-overide,0.5rem);
-    outline: none;
-  }
+    &:is(:active, .active){
+      --card-icon-right: var(--card-icon-right-overide,0.5rem);
+      outline: none;
+    }
 
-  &:is(:active){
-    background: #FCFCFC;
+    &:is(:active){
+      background: #FCFCFC;
+    }
+    
   }
   
-
-  
   span{
     display: block;
     font-weight: bold;
@@ -534,4 +536,71 @@ slot[name="btns"] {
   margin: 0!important;
 }
 
-//#endregion
+//#endregion
+
+.dialog__wrapper {
+  position: absolute;
+  right: 1rem;
+  bottom: 2rem;
+  min-width: 3rem !important;
+  left: auto;
+  z-index: 999;
+
+  > dialog {
+    
+    display: var(--menu-display, none);
+    position: fixed;
+    top: anchor(top);
+    position-anchor: --anchor-el;
+    left: anchor(right);
+    right: auto;
+    margin: 0 0 0 #{rem(4)};
+    padding: rem(16);
+
+
+    &::backdrop {
+      display: none;
+    }
+  }
+
+  > dialog:popover-open {
+
+    display: block!important;
+  }
+
+  &:has(dialog:popover-open) > button {
+    background-color: var(--colour);
+  }
+
+  > button {
+    margin: 0;
+    anchor-name: --anchor-el;
+
+    &:not(:hover,:focus,:focus-within,:active){
+        
+      background: var(--ellipsis-bg);
+    }
+  }
+}
+::slotted([slot="actions"]){
+  border: none !important;
+  margin: 0 !important;
+  display: block!important;
+  width: fit-content;
+}
+::slotted([slot="primary-action"]){
+  overflow: hidden;
+  background-color: transparent;
+  text-indent: -300%;
+  position: absolute!important;
+  inset: 0;
+  margin: 0!important;
+  z-index: 99;
+  border: none;
+}
+::slotted([slot="primary-action"]:is(:hover,:focus,.hover)) {
+  --hover-outline-colour-default: var(--colour, var(--colour-primary));
+  outline: 2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));
+  outline-offset: -2px;
+  border-radius: var(--card-border-radius)!important;
+}

package/assets/sass/components/charts.config.scss

@@ -27,9 +27,9 @@ iam-barchart:not(.chart--horizontal)::part(chart-key) {
   order: 3;
 }
 
-iam-barchart:not(.chart--horizontal)::part(key),
-iam-barchart:not(.chart--horizontal)::part(key-checked),
-iam-barchart:not(.chart--horizontal)::part(key-unchecked) {
+iam-barchart::part(key),
+iam-barchart::part(key-checked),
+iam-barchart::part(key-unchecked) {
 
   --key-border-radius: 50%;
   --btn-border-width: 1px;
@@ -46,21 +46,22 @@ iam-barchart:not(.chart--horizontal)::part(key-unchecked) {
   color: var(--colour-heading);
 }
 
-iam-barchart:not(.chart--horizontal)::part(key):is(:hover, :focus, .hover, :focus-within):not([disabled],:active, .active),
-iam-barchart:not(.chart--horizontal)::part(key-checked):is(:hover, :focus, .hover, :focus-within):not([disabled],:active, .active),
-iam-barchart:not(.chart--horizontal)::part(key-unchecked):is(:hover, :focus, .hover, :focus-within):not([disabled],:active, .active) {
+iam-barchart::part(key):is(:hover, :focus, .hover, :focus-within):not([disabled],:active, .active),
+iam-barchart::part(key-checked):is(:hover, :focus, .hover, :focus-within):not([disabled],:active, .active),
+iam-barchart::part(key-unchecked):is(:hover, :focus, .hover, :focus-within):not([disabled],:active, .active) {
   background: var(--colour-btn-action-hover-bg);
 }
-iam-barchart:not(.chart--horizontal)::part(key):is(:hover, :focus, .hover, :focus-within),
-iam-barchart:not(.chart--horizontal)::part(key-checked):is(:hover, :focus, .hover, :focus-within),
-iam-barchart:not(.chart--horizontal)::part(key-unchecked):is(:hover, :focus, .hover, :focus-within){
+iam-barchart::part(key):is(:hover, :focus, .hover, :focus-within),
+iam-barchart::part(key-checked):is(:hover, :focus, .hover, :focus-within),
+iam-barchart::part(key-unchecked):is(:hover, :focus, .hover, :focus-within){
   background: var(--colour-btn-action-hover-bg);
 }
 
-iam-barchart:not(.chart--horizontal)::part(key-unchecked) {
+iam-barchart::part(key-unchecked) {
     
   opacity: 0.25;
 }
+
 iam-barchart::part(tooltip) {
   text-decoration: none!important;
 }
@@ -76,4 +77,8 @@ iam-barchart::part(tooltip):after{
   color: var(--colour-primary);
   border: none;
 
+}
+
+iam-barchart{
+  //--xaxis-max-width: 3rem;
 }

package/assets/sass/components/charts.module.scss

@@ -91,18 +91,19 @@ $chart-height-lg: #{rem(200)}!default;
 ::slotted(table) {
   display: none!important;
 }
-
+:host {
+  container-type: inline-size; 
+  margin-bottom: 2rem;
+  display: block;
+}
 .chart__outer {
 
-  container-type: inline-size;
   display: flex;
   flex-direction: column;
 
   font-weight: var(--chart-font-weight, bold);;
   color: var(--chart-text-color, black);
 
-  margin-bottom: 2rem;
-
 
   > * {
     display: block;
@@ -142,7 +143,7 @@ $chart-height-lg: #{rem(200)}!default;
   --yaxis-last-point-transform: translate(0,-50%);
   --bar-gap: min(10%, 0.75rem);
 
-  @container (max-width: 36em) {
+  @container (min-width: #{em($device-xs-width,16)}) {
 
     :has(tr:nth-child(5) td:nth-child(4)),
     :has(tr:nth-child(10)){
@@ -152,17 +153,7 @@ $chart-height-lg: #{rem(200)}!default;
       --yaxis-last-point-transform: translate(0,-100%);
       --bar-gap: 0;
     }
-  }
-
-  @container (max-width: 63em) {
-    :has(tr:nth-child(10)){
-        
-      --bar-gap: 0;
-    }
-  }
 
-  @container (min-width: 36em) {
-    
     .chart__wrapper {
       --chart-height-resp: var(--chart-height-lg-set);
       --pie-size: calc(33.333% - 1.4rem);
@@ -172,8 +163,12 @@ $chart-height-lg: #{rem(200)}!default;
       --yaxis-last-point-transform: translate(0,-50%);
     }
   }
-  
-  @container (min-width: 62em) {
+
+  @container (min-width: #{em($device-sm-width,16)}) {
+    :has(tr:nth-child(10)){
+        
+      --bar-gap: 0;
+    }
 
     .chart__wrapper {
       
@@ -448,7 +443,7 @@ $chart-height-lg: #{rem(200)}!default;
         font-size: var(--label-size);
         text-align: center;
 
-        @container (min-width: 62em) {
+        @container (min-width: #{em($device-sm-width,16)}) {
     
           display: block;
         }
@@ -479,6 +474,12 @@ $chart-height-lg: #{rem(200)}!default;
         position: relative;
         padding: 0;
         background: var(--chart-colour);
+
+        @media screen and (prefers-color-scheme: dark) {
+          
+          background: color-mix(in oklab, var(--chart-colour), black 20%);
+        }
+
         border-top-right-radius: 4px;
         border-top-left-radius: 4px;
 
@@ -538,7 +539,7 @@ $chart-height-lg: #{rem(200)}!default;
     }
 
     // change the look of chart when crowded
-    @container (max-width: 36em) {
+    @container (min-width: #{em($device-sm-width,16)}) {
       tbody:has(tr:nth-child(5) td:nth-child(4)) tr,
       tbody:has(tr:nth-child(10)) tr {
 
@@ -577,7 +578,7 @@ $chart-height-lg: #{rem(200)}!default;
       }
     }
     // Hide labels when it gets crowded
-    @container (min-width: 36em) {
+    @container (min-width: #{em($device-xs-width,16)}) {
 
       tbody:has(tr:nth-child(25)){
         tr td:first-child {

package/assets/sass/elements/admin-panel.scss

@@ -1,7 +1,7 @@
 @use "../_func" as *;
 
 .admin-panel {
-  --padding-x: #{rem(32)};
+  --padding-x: #{rem(24)};
   --padding-top: #{rem(16)};
   --padding-bottom: #{rem(24)};
   --mh-modifier: #{rem(56 + 16)};

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

@@ -30,6 +30,12 @@
 
   border-radius: rem(6);
   padding: 0 rem(8);
+
+  &--rounded {
+    border-radius: 1rem;
+    min-width: 1.625rem;
+    padding: 0;
+  }
 }
 
 .tag {

package/assets/sass/elements/dialog.scss

@@ -7,8 +7,7 @@ body:not(.js-enabled) dialog:not([open]):target {
 }
 
 // #region Default styling of both modals and popovers
-dialog[open] {
-
+dialog {
   --dialog-padding: #{rem(24)};
 
   --mh-padding-inline: var(--dialog-padding);
@@ -22,7 +21,12 @@ dialog[open] {
   border-radius: rem(10);
   padding: var(--dialog-padding);
   outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+}
+
 
+dialog[open] {
+
+  
   display: flex;
   flex-direction: column;
 

package/assets/ts/components/barchart/barchart.component.ts

@@ -19,7 +19,6 @@ class iamBarChart extends HTMLElement {
     <style>
     ${loadCSS}
     </style>
-    <slot name="before"></slot>
     <div class="chart__outer" part="outer">
       <div class="chart__key" part="chart-key"></div>
       <div class="chart__wrapper" part="wrapper">
@@ -29,8 +28,7 @@ class iamBarChart extends HTMLElement {
         </div>
       </div>
       <div class="chart__spacer"><span part="spacer"></span</div>
-    </div>
-    <slot name="after"></slot>`;
+    </div>`;
 
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
@@ -51,7 +49,7 @@ class iamBarChart extends HTMLElement {
 
     chart.appendChild(clonedTable);
 
-    addClasses(chartComponent);
+    addClasses(chartComponent, chartOuter);
 
 
     const barCount = chart.querySelectorAll('td:not(:first-child)').length;
@@ -59,11 +57,18 @@ class iamBarChart extends HTMLElement {
     if(barCount < 10){
 
       chartComponent.classList.add('chart--fit-content');
+      //chartComponent.classList.add('chart--display-data');
+    }
+
+    if(barCount < 5){
+
+      chartComponent.classList.add('chart--no-scale');
+      //chartComponent.classList.add('chart--display-data');
     }
 
     setupChart(chartComponent,chartOuter,clonedTable);
     setEventObservers(chartComponent,chartOuter);
-    setEventListener(chartOuter);
+    setEventListener(chartComponent,chartOuter);
     setLongestLabel(chartOuter);
     setLongestValue(chartOuter);
 

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

@@ -14,7 +14,7 @@ class iamCard extends HTMLElement {
     super();
     this.attachShadow({ mode: 'open'});
 
-    if(this.querySelector('*:not(.badge):not(small):not(.btn) > [class*="fa-"]:not(.btn)'))
+    if(this.querySelector('*:not(.badge):not(small):not(.btn):not(button) > [class*="fa-"]:not(.btn)'))
       this.classList.add('card--has-icon');
 
     let classList = this.classList.toString();
@@ -45,6 +45,7 @@ class iamCard extends HTMLElement {
 
   const createCardConent () {
 
+    // TODO split this out a bit
     return `${this.hasAttribute('data-image') || this.hasAttribute('data-record') ? `<div class="card__head">${this.hasAttribute('data-image') ? `<img src="${this.getAttribute('data-image')}" alt="" loading="lazy" />` : ``} <div class="card__badges"><slot name="badges"></slot></div></div>` : ''}
     <div class="card__body" part="body">
     ${!this.hasAttribute('data-image') && this.querySelector('[slot="badges"]') && this.querySelector('[slot="checkbox"]') ? `<div class="card__badges card__badges--inline"><slot name="badges"></slot></div>` : ''}
@@ -55,6 +56,13 @@ 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>
+    <slot name="primary-action"></slot>
+    <div class="dialog__wrapper d-none">
+      <button class="btn btn-secondary btn-compact fa-ellipsis-vertical" popovertarget="actions" title="${this.hasAttribute('data-menu-title') ? this.getAttribute('data-menu-title') : 'Further actions'}">Lorum ipsum</button>
+      <dialog class="dialog--fix dialog--list" id="actions" popover>
+        <slot name="actions"></slot>
+      </dialog>
+    </div>
     <div class="card__footer" part="footer">
       <slot name="footer"></slot>
       <slot name="btns"></slot>
@@ -66,11 +74,34 @@ class iamCard extends HTMLElement {
     this.classList.add('loaded');
 
     // Mimic clicking the parent node so the focus and target events can be on the card
-    const parentNode = this.parentNode.closest('a, button, label, router-link')
+    const component = this;
+    const parentNode = component.parentNode.closest('a, button, label, router-link');
     const card = this.shadowRoot.querySelector('.card')
     const btnCompact =  this.shadowRoot.querySelector('.btn-compact');
     const recordType = this.hasAttribute('data-record') ? this.getAttribute('data-record') : '';
 
+
+    // Add the actions slot to the buttons and links to move them into a dialog warpper
+    const actionsWrapper = this.shadowRoot.querySelector('.dialog__wrapper');
+    let buttons = component.querySelectorAll('button[slot="actions"],a[slot="actions"]');
+    if(buttons.length){
+
+      const actionsWrapper = this.shadowRoot.querySelector('.dialog__wrapper');
+      const actionsDialog = this.shadowRoot.querySelector('.dialog__wrapper dialog');
+      const actionsBtn = actionsWrapper.querySelector('button');
+
+      actionsWrapper.classList.remove('d-none');
+
+      Array.from(buttons).forEach((button,index)=>{
+
+        button.classList.add('btn');
+        button.classList.add('btn-action');
+      });
+    }
+    else {
+      actionsWrapper.remove();
+    }
+
     /* 
       If the parentNode is actually just a div, 
       we don't want to look for anything or add events 
@@ -209,7 +240,7 @@ class iamCard extends HTMLElement {
         if(oldVal != newVal){
           let classList = this.classList.toString();
               
-          if(this.querySelector('*:not(.badge):not(small):not(.btn) > [class*="fa-"]:not(.btn)'))
+          if(this.querySelector('*:not(.badge):not(small):not(.btn):not(button) > [class*="fa-"]:not(.btn)'))
             classList += ' card--has-icon';
 
           this.shadowRoot.querySelector('.card').setAttribute('class',`card ${classList}`);