@iamproperty/components 7.0.0 → 7.1.0--beta2

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

@@ -1,16 +1,19 @@
-@use "../_func.scss" as *;
-@use "charts.module.scss" as *;
-
-
+@use '../_func.scss' as *;
+@use 'charts.module.scss' as *;
 
 // #region Hide data sets
-.chart__outer > input[type="checkbox"]:not(:checked) ~ .chart__wrapper table tbody tr td:not(:first-child) {
+.chart__outer > input[type='checkbox']:not(:checked) ~ .chart__wrapper table tbody tr td:not(:first-child) {
   //display: none;
 }
 
 @for $i from 1 to 10 {
-  
-  .chart__outer > input[type="checkbox"]:nth-of-type(#{$i}):not(:checked) ~ .chart__wrapper table tbody tr td:not(:first-child):nth-child(#{$i+1}) {
+  .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;
   }
@@ -19,11 +22,10 @@
 
 // #region Bar chart (Horizontal)
 :host(.chart--horizontal) .chart__outer {
-
   tbody {
     --chart-direction: 90deg;
-  --chart-day-bg-pos: calc(var(--single-day) * 7) 100%;
-  --bar-gap: 0;
+    --chart-day-bg-pos: calc(var(--single-day) * 7) 100%;
+    --bar-gap: 0;
   }
 
   .chart__guidelines {
@@ -36,29 +38,26 @@
       border-left: 1px dashed #eee;
       width: 0;
 
-      span{
+      span {
         display: block;
         font-size: var(--label-size);
         position: absolute;
         top: 100%;
-        transform: translate(-50%,0.2em);
+        transform: translate(-50%, 0.2em);
         opacity: 1;
-      } 
+      }
     }
   }
 
   .chart__yaxis {
-
     display: none;
   }
 
   table {
-
     padding-top: 0;
   }
 
   table tbody {
-
     flex-direction: column;
     position: relative;
   }
@@ -69,21 +68,23 @@
     margin-bottom: 0.5rem;
     padding: 0;
 
-    td { // part=value
-      
+    td {
+      // part=value
+
       height: var(--bar-height, #{rem(24)});
       bottom: 0;
       left: var(--bottom, 0%);
-      width: var(--comparison,var(--percent));
+      width: var(--comparison, var(--percent));
       max-width: 100%;
       border-top-left-radius: 0;
       border-bottom-right-radius: 4px;
     }
 
-    td:first-child { // part=xaxis-label
+    td:first-child {
+      // part=xaxis-label
       position: static;
       transform: none;
-      display: block!important;
+      display: block !important;
       height: var(--bar-height, #{rem(24)});
       line-height: var(--bar-height, #{rem(24)});
       max-width: var(--xaxis-max-width, none);
@@ -104,35 +105,31 @@
     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 {
-
-      position: absolute;
-      //transform: translate(-100%, -50%)!important;
-      display: block !important;
-      max-height: 1.5rem;
-      z-index: var(--index-above);
-      top: 0%;
-      left: auto!important;
-      right: 100%!important;
-      padding-right: 0.5em;
-      width: fit-content;
+    position: absolute;
+    //transform: translate(-100%, -50%)!important;
+    display: block !important;
+    max-height: 1.5rem;
+    z-index: var(--index-above);
+    top: 0%;
+    left: auto !important;
+    right: 100% !important;
+    padding-right: 0.5em;
+    width: fit-content;
   }
 
-  
   .chart__spacer span {
-    display: none!important;
+    display: none !important;
   }
-
 }
 // #endregion
 
@@ -145,12 +142,11 @@
     align-items: center;
 
     td {
-      border-radius: 0!important;
+      border-radius: 0 !important;
     }
   }
 }
 :host(.chart--stacked.chart--horizontal) .chart__wrapper table tbody tr {
-  
   flex-direction: row;
 
   &::after {
@@ -164,7 +160,7 @@
     height: fit-content;
     margin: 0;
     bottom: 50%;
-    left: calc(var(--percent) + .5rem);
+    left: calc(var(--percent) + 0.5rem);
     transform: translate(0, 50%);
   }
 
@@ -177,28 +173,28 @@
 // #region animation
 
 #{'.chart--animate.animating.inview'} {
-
   --animation-left: 2s;
 
-  table tbody tr td:not(:first-child){
-
-    transition: height 2s ease-out, width 2s ease-out, bottom 2s ease-out, left var(--animation-left) ease-out;
+  table tbody tr td:not(:first-child) {
+    transition:
+      height 2s ease-out,
+      width 2s ease-out,
+      bottom 2s ease-out,
+      left var(--animation-left) ease-out;
     transition-delay: calc(var(--row-index) * 0.1s);
   }
 }
 
 #{'.chart--animate:not(.inview)'} {
-
   table tbody tr td:not(:first-child) {
-    --bottom: var(--min-bottom, 0%)!important;
-    --percent: 0%!important;
-    --axis: 0%!important;
-    --comparison: 0%!important;
+    --bottom: var(--min-bottom, 0%) !important;
+    --percent: 0% !important;
+    --axis: 0% !important;
+    --comparison: 0% !important;
   }
 }
 
 .chart--animate.animating {
-
   table tbody tr td:not(:first-child) {
     overflow: hidden;
   }
@@ -206,49 +202,39 @@
 
 // #endregion
 
-
 // #region Display data modifier class
 :host(.chart--display-data) {
   table tbody tr {
-
     td:not(:first-child) {
-      
       &:after {
-
         content: attr(data-value);
 
-
         position: absolute;
-        opacity: 1!important;
+        opacity: 1 !important;
         //z-index: var(--index-above);
         bottom: 100%;
         left: 50%;
 
-        transform: translate(-50%,0);
-        
-        display: block!important;
+        transform: translate(-50%, 0);
+
+        display: block !important;
         height: fit-content;
-        
-        margin: 0;
 
-        
+        margin: 0;
       }
     }
   }
 }
 
-
 :host(.chart--display-data.chart--horizontal) {
   table tbody tr td:not(:first-child) {
     &:after {
-
       bottom: 50%;
       left: calc(100% + 0.5rem);
-      transform: translate(0,50%);
+      transform: translate(0, 50%);
     }
   }
 
-  
   .chart__wrapper[data-longest-value]:after {
     display: block;
     content: attr(data-longest-value);
@@ -267,9 +253,7 @@
 }
 // #endregion
 
-
 :host(.chart--fit-content:not(.chart--horizontal)) {
-
   width: 100%;
   display: block;
 
@@ -278,23 +262,23 @@
   }
 
   table {
-    width: fit-content!important;
+    width: fit-content !important;
     padding-top: 0;
-    height: var(--chart-height-resp,#{rem(120)});
+    height: var(--chart-height-resp, #{rem(120)});
   }
 
   tbody {
     position: relative;
   }
 
-  [part="group"]{
+  [part='group'] {
     min-width: fit-content;
     width: fit-content;
     max-width: fit-content;
     padding-right: var(--fc-group-width, #{rem(16)});
   }
 
-  [part="value"]{
+  [part='value'] {
     min-width: var(--fc-value-width, #{rem(12)});
     width: var(--fc-value-width, #{rem(12)});
     max-width: var(--fc-value-width, #{rem(12)});
@@ -304,40 +288,30 @@
 :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)});
+
+  table {
+    height: var(--chart-height-lg-set, #{rem(120)});
   }
-  
 }
 
 .chart__wrapper {
-      
-
   @container (min-width: #{em($device-xs-width,16)}) {
     --fc-group-width: #{rem(22)};
     --fc-value-width: #{rem(24)};
-
   }
 }
 
-
 // #region tooltip
 button.tooltip {
-  
-
-  &:after{
-
-    content: "?";
+  &:after {
+    content: '?';
     margin-left: 0.25rem;
     display: inline-block;
     border: 1px solid currentColor;
   }
-
 }
 
 .tooltip__content[popover] {
-
   //display: block;
   z-index: var(--index-floating);
   background: var(--colour-primary);
@@ -345,13 +319,12 @@ button.tooltip {
   padding: rem(24);
 
   border-radius: 0.5rem;
-  box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11); 
-
+  box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
 
   white-space: normal;
-//transform: none;
+  //transform: none;
   //inset: auto;
-  
+
   position: fixed;
   //inset-area: bottom center;
   //position-area: bottom center;
@@ -363,16 +336,14 @@ button.tooltip {
 
   //left: anchor(center);
 
-
-    inset-area: bottom center;
-    
+  inset-area: bottom center;
 
   overflow: visible;
 
-  width: calc(anchor-size(width) + var(--container-padding-x) + var(--container-padding-x) + #{rem(24)})!important;
+  width: calc(anchor-size(width) + var(--container-padding-x) + var(--container-padding-x) + #{rem(24)}) !important;
 
   &::after {
-    content: "";
+    content: '';
     position: absolute;
     bottom: 100%;
     left: 50%;
@@ -384,6 +355,4 @@ button.tooltip {
   }
 }
 
-
-
-// #endregion
+// #endregion

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

@@ -1,29 +1,27 @@
-@use "../_func.scss" as *;
-@use "card.module.scss" as *;
-@use "../elements/dialog.scss" as *;
-@use "../elements/popover.scss" as *;
-@use "../elements/buttons.scss" as *;
+@use '../_func.scss' as *;
+@use 'card.module.scss' as *;
+@use '../elements/dialog.scss' as *;
+@use '../elements/popover.scss' as *;
+@use '../elements/buttons.scss' as *;
 
 :host {
   --card-right-padding: 1rem;
   //--card-head-height: 10rem;
   --card-icon-right: 1rem;
-
 }
 
-:host(:is(:hover,:focus,.hover):not(.prevent-hover)) {
+:host(:is(:hover, :focus, .hover):not(.prevent-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;
 }
 
-:host(:is(:active,.active):not(.prevent-hover)) {
-  --card-icon-right: var(--card-icon-right-overide,0.5rem);
+:host(:is(:active, .active):not(.prevent-hover)) {
+  --card-icon-right: var(--card-icon-right-overide, 0.5rem);
   outline: none;
 }
 
-:host(.prevent-hover){
-
+:host(.prevent-hover) {
   pointer-events: none;
 
   * {
@@ -34,10 +32,10 @@
 // #region Right arrow
 :host(.show-icon) .card__body {
   --card-right-padding: 3.5rem;
-  
+
   &:before,
   &:after {
-    content: "";
+    content: '';
     position: absolute;
     right: var(--card-icon-right);
     bottom: var(--card-bottom-padding);
@@ -49,11 +47,11 @@
 
   &:after {
     background: var(--colour-primary-theme);
-    mask-image: var(--icon,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,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%;
@@ -61,10 +59,8 @@
   }
 }
 
-:host(:is(:hover,:focus,.hover):not(.prevent-hover):not([class*="colour-"])) {
-  
+:host(:is(:hover, :focus, .hover):not(.prevent-hover):not([class*='colour-'])) {
   .card__body {
-
     &:before {
       background: var(--hover-icon-bg, var(--colour-primary-theme));
     }
@@ -74,8 +70,7 @@
   }
 }
 
-:host(:is(:active, .active):not(.prevent-hover):not([class*="colour-"])){
-
+:host(:is(:active, .active):not(.prevent-hover):not([class*='colour-'])) {
   .card__body:before {
     background: var(--hover-icon-bg, var(--colour-primary-theme));
   }
@@ -88,7 +83,6 @@
 // #region illustration
 .card__body {
   &:has(.card__illustration) {
-
     align-items: center;
     display: flex;
 
@@ -108,21 +102,20 @@
         height: 100%;
         object-fit: contain;
       }
-    }    
+    }
   }
 }
 
 // #endregion
 
 // #region border left
-:host([class*="colour-"]) {
-  
-  border-left: rem(12) solid var(--colour,var(--colour-primary));
+:host([class*='colour-']) {
+  border-left: rem(12) solid var(--colour, var(--colour-primary));
 }
 // #endregion
 
 // #region secondary button
-slot[name="secondary"] {
+slot[name='secondary'] {
   display: block;
   position: absolute;
   top: 0.5rem;
@@ -131,17 +124,15 @@ slot[name="secondary"] {
   z-index: 999;
 }
 
-::slotted([slot="secondary"]:not(:hover,:focus,:active,.hover)) {
-
-  background: none!important;
-  color: var(--colour-btn)!important;
+::slotted([slot='secondary']:not(:hover, :focus, :active, .hover)) {
+  background: none !important;
+  color: var(--colour-btn) !important;
 }
 // #endregion
 
 // #region checkbox
-::slotted([slot="checkbox"]){
-
-  position: absolute!important;
+::slotted([slot='checkbox']) {
+  position: absolute !important;
   top: 0.5rem;
   right: 0.5rem;
   width: rem(32);
@@ -160,15 +151,12 @@ slot[name="secondary"] {
   left: auto;
   z-index: 999;
 
-
   > .btn:before {
-    content: "\f142";
-    font-family: "Font Awesome 6 Pro";
+    content: '\f142';
+    font-family: 'Font Awesome 6 Pro';
   }
 
-
   > [popover] {
-    
     display: var(--menu-display, none);
     position: fixed;
     top: anchor(top);
@@ -178,15 +166,13 @@ slot[name="secondary"] {
     margin: 0 0 0 #{rem(4)};
     padding: rem(16);
 
-
     &::backdrop {
       display: none;
     }
   }
 
   > [popover]:popover-open {
-
-    display: block!important;
+    display: block !important;
   }
 
   &:has([popover]:popover-open) > button {
@@ -197,33 +183,32 @@ slot[name="secondary"] {
     margin: 0;
     anchor-name: --anchor-el;
 
-    &:not(:hover,:focus,:focus-within,:active){
-        
+    &:not(:hover, :focus, :focus-within, :active) {
       background: var(--ellipsis-bg);
     }
   }
 }
 
-::slotted([slot="btns"]){
+::slotted([slot='btns']) {
   border: none !important;
   margin: 0 !important;
-  display: block!important;
+  display: block !important;
   width: fit-content;
 }
-::slotted([slot="primary-action"]){
+::slotted([slot='primary-action']) {
   overflow: hidden;
   background-color: transparent;
   text-indent: -300%;
-  position: absolute!important;
+  position: absolute !important;
   inset: 0;
-  margin: 0!important;
+  margin: 0 !important;
   z-index: 99;
   border: none;
 }
-:host(:not(.prevent-hover)) ::slotted([slot="primary-action"]:is(:hover,:focus,.hover)) {
+:host(:not(.prevent-hover)) ::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;
+  border-radius: var(--card-border-radius) !important;
 }
 // #endregion