@iamproperty/components 7.7.1--beta5 → 7.7.1--beta7

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

@@ -34,7 +34,7 @@
   border: 0 !important;
 }
 
-// #region FA icons
+/* #region FA icons */
 .fa-regular,
 .far {
   font-weight: 400;
@@ -85,9 +85,9 @@
 .fa-clock {
   --fa: '\f017';
 }
-// #endregion
+/* #endregion */
 
-// #region controls
+/* #region controls */
 
 #view[data-views] option {
   display: none;
@@ -186,7 +186,7 @@ div:has(> select) #view {
   display: inline-block;
   position: relative;
   margin-bottom: 0.5625rem; /* 9 */
-  //margin-right: auto;
+  /* margin-right: auto; */
 
   input {
     position: absolute;
@@ -317,9 +317,9 @@ hr {
     margin-left: 0.5rem;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region settings
+/* #region settings */
 
 #workday {
   display: flex;
@@ -344,9 +344,9 @@ hr {
   text-align: center;
 }
 
-// #endregion
+/* #endregion */
 
-// To do setup CSS vars
+/*  To do setup CSS vars */
 :host {
   --columnHeadingFontSide: 0.875rem; /* 14/16 */
   --columnHeadingLineHeight: 1.5rem;
@@ -400,7 +400,7 @@ time.column-header {
   display: inline-block;
 }
 
-// #region month view
+/* #region month view */
 .calendar__controls:has(select :is(option[value='month'], option[value='year']):checked)
   ~ .calendar__wrapper
   :is(#calendar, .month-wrapper) {
@@ -449,7 +449,7 @@ time.column-header {
     overflow-x: visible;
     overflow-y: clip;
     aspect-ratio: unset;
-    //padding-top: 100%;
+    /* padding-top: 100%; */
     position: relative;
   }
 
@@ -555,7 +555,7 @@ time.column-header {
     height: 50rem;
 
     > tbody > tr > td {
-      //pointer-events: none;
+      /* pointer-events: none; */
       overflow: visible;
     }
 
@@ -653,9 +653,9 @@ time.column-header {
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #region week view
+/* #region week view */
 
 .calendar__controls:has(select option[value='week']:checked) ~ .calendar__wrapper {
   #week-view-header {
@@ -673,7 +673,7 @@ time.column-header {
       background-color: white;
     }
 
-    // Only show the all day row
+    /*  Only show the all day row */
     .table--day > tbody > tr:not(.allday) {
       display: none;
     }
@@ -730,7 +730,7 @@ time.column-header {
         line-height: calc(var(--columnHeadingLineHeight) - 1px) !important;
         background-color: var(--colour-canvas);
         border: 1px solid var(--colour-border);
-        //border-right: 0;
+        /* border-right: 0; */
         text-indent: -300%;
         overflow: hidden;
       }
@@ -857,7 +857,7 @@ time.column-header {
       table-layout: fixed;
     }
 
-    // Only show the selected week
+    /*  Only show the selected week */
     > table > thead,
     > table > tbody > tr:not(:has(.selected)) {
       display: none !important;
@@ -889,7 +889,7 @@ time.column-header {
       td:has(slot) {
         font-size: var(--columnHeadingFontSide);
         color: var(--colour-heading);
-        //white-space: nowrap;
+        /* white-space: nowrap; */
         padding-inline: 0.25rem;
         height: var(--alldayHeight) !important;
         line-height: var(--alldayHeight) !important;
@@ -945,9 +945,9 @@ time.column-header {
     background: rgba(245, 245, 245, 1);
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Day view
+/* #region Day view */
 .calendar__controls:has(select option[value='day']:checked) ~ .calendar__wrapper {
   #week-view-corner {
     thead {
@@ -1000,7 +1000,7 @@ time.column-header {
       max-width: 100%;
       table-layout: fixed;
 
-      //border-collapse: separate;
+      /* border-collapse: separate; */
       border-collapse: separate;
       border-spacing: 0;
 
@@ -1063,9 +1063,9 @@ time.column-header {
   }
 }
 
-// #endregion
+/* #endregion */
 
-// #region Current time indicator
+/* #region Current time indicator */
 .calendar__controls:has(select :is(option[value='day'], option[value='week']):checked) ~ .calendar__wrapper {
   position: relative;
 
@@ -1075,7 +1075,7 @@ time.column-header {
 
   [data-hour][data-time] {
     position: relative;
-    //overflow: hidden;
+    /* overflow: hidden; */
     color: var(--colour-canvas);
   }
 
@@ -1118,9 +1118,9 @@ time.column-header {
     z-index: 98;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region List view
+/* #region List view */
 
 .calendar__controls:has(select option[value='list']:checked) ~ .calendar__wrapper #calendar > table,
 .calendar__controls:has(select option[value='month']:checked) ~ #split.calendar > table {
@@ -1186,9 +1186,9 @@ time.column-header {
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Year view
+/* #region Year view */
 
 .calendar__controls:has(select option[value='year']:checked) ~ .calendar__wrapper #calendar {
   display: none;
@@ -1199,7 +1199,7 @@ time.column-header {
 .calendar__controls:has(select option[value='year']:checked) ~ .calendar__wrapper #year-view {
   display: grid !important;
   grid-template-columns: 1fr 1fr;
-  //grid-template-rows: 1fr;
+  /* grid-template-rows: 1fr; */
   gap: 1rem;
   margin-bottom: 2rem;
 
@@ -1232,9 +1232,9 @@ time.column-header {
   }
 }
 
-// #endregion
+/* #endregion */
 
-// #region hide weekends
+/* #region hide weekends */
 
 :host([data-hide-weekends])
   .calendar__controls:has(select option[value='month']:checked)
@@ -1253,9 +1253,9 @@ time.column-header {
     display: none;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region scrollbars
+/* #region scrollbars */
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
@@ -1269,4 +1269,4 @@ time.column-header {
   background-color: #c1c1c1;
   width: 6px;
 }
-//#endregion
+/* #endregion */

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

@@ -38,7 +38,7 @@
 
     display: block;
     width: 100%;
-    //height:  1.5rem;
+    /* height:  1.5rem; */
     border: none;
     border-left: 4px solid color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 28%);
     border-radius: 4px;
@@ -78,11 +78,11 @@
       padding: 0.75rem;
       border-radius: 0.5rem;
       box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
-      //top: auto;
-      //bottom: calc(100% + 0.25rem);
+      /* top: auto; */
+      /* bottom: calc(100% + 0.25rem); */
       left: 50%;
 
-      //transform: translate(-50%,0);
+      /* transform: translate(-50%,0); */
       font-size: 0.875rem; /* 14/16 */
       line-height: 1.2;
 
@@ -231,7 +231,7 @@
     }
   }
 
-  // resize
+  /*  resize */
   iam-calendar[data-resize]:is([data-view='week'], [data-view='day']) button:not(.allday-event) {
     resize: vertical !important;
   }
@@ -245,7 +245,7 @@
     > span {
       display: block;
       height: 1.125rem; /* 18/16 */
-      //white-space: nowrap;
+      /* white-space: nowrap; */
 
       overflow: hidden;
 
@@ -276,11 +276,11 @@
     display: none !important;
   }
 
-  // #endregion
+  /* #endregion */
 }
 
 .event-colours option {
-  //display: none;
+  /* display: none; */
 }
 
 .event-colours option[value='month'] {

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

@@ -6,7 +6,7 @@
 
 :host {
   --card-right-padding: 1rem;
-  //--card-head-height: 10rem;
+  /* --card-head-height: 10rem; */
   --card-icon-right: 1rem;
 }
 
@@ -29,7 +29,7 @@
   }
 }
 
-// #region Right arrow
+/* #region Right arrow */
 :host(.show-icon) .card__body {
   --card-right-padding: 3.5rem;
 
@@ -59,6 +59,11 @@
   }
 }
 
+:host(.show-icon) .card__footer {
+  
+  --card-right-padding: 3.5rem;
+}
+
 :host(:is(:hover, :focus, .hover):not(.prevent-hover):not([class*='colour-'])) {
   .card__body {
     &:before {
@@ -78,9 +83,9 @@
     background: var(--hover-icon-colour, #ffffff);
   }
 }
-// #endregion
+/* #endregion */
 
-// #region illustration
+/* #region illustration */
 .card__body {
   &:has(.card__illustration) {
     align-items: center;
@@ -106,15 +111,15 @@
   }
 }
 
-// #endregion
+/* #endregion */
 
-// #region border left
+/* #region border left */
 :host([class*='colour-']) {
   border-left: 0.75rem solid var(--colour, var(--colour-primary));
 }
-// #endregion
+/* #endregion */
 
-// #region secondary button
+/* #region secondary button */
 slot[name='secondary'] {
   display: block;
   position: absolute;
@@ -128,9 +133,9 @@ slot[name='secondary'] {
   background: none !important;
   color: var(--colour-btn) !important;
 }
-// #endregion
+/* #endregion */
 
-// #region checkbox
+/* #region checkbox */
 ::slotted([slot='checkbox']) {
   position: absolute !important;
   top: 0.5rem;
@@ -140,9 +145,9 @@ slot[name='secondary'] {
   height: 2.5rem;
   overflow: hidden;
 }
-// #endregion
+/* #endregion */
 
-// #region Multi-action card
+/* #region Multi-action card */
 .menu__wrapper {
   position: absolute;
   right: 1rem;
@@ -179,4 +184,4 @@ slot[name='secondary'] {
   outline-offset: -2px;
   border-radius: var(--card-border-radius) !important;
 }
-// #endregion
+/* #endregion */

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

@@ -14,7 +14,7 @@
   font-size: 1.125rem; /* 18/16 */
   line-height: 1.5rem;
   color: var(--colour-primary);
-  //min-height: calc(100% - 2rem);
+  /* min-height: calc(100% - 2rem); */
   width: 100%;
   text-align: left;
   display: flex;
@@ -61,10 +61,10 @@
 }
 
 .card__body {
-  //position: relative;
+  /* position: relative; */
   padding: var(--card-head-top-padding) var(--card-right-padding) var(--card-head-bottom-padding)
     var(--card-left-padding);
-  //z-index: -1;
+  /* z-index: -1; */
 }
 
 .card__footer {
@@ -104,7 +104,7 @@
   margin-bottom: var(--card-footer-bottom-padding) !important;
 }
 
-// #region Show total number
+/* #region Show total number */
 .card__body:has(.card__total) {
   --card-head-top-padding: 1rem;
   --card-head-bottom-padding: 1.5rem;
@@ -133,9 +133,9 @@
   line-height: 2.5rem;
 }
 
-// #endregion
+/* #endregion */
 
-// #region badges
+/* #region badges */
 .card__head:has(img) ~ .card__badges {
   position: absolute;
   top: 0;
@@ -148,4 +148,7 @@
   padding: var(--card-badges-top-padding, 1rem) var(--card-right-padding) 0 var(--card-left-padding);
   margin-bottom: -1.5rem;
 }
-// #endregion
+.card__head:not(:has(img)) ~ .card__badges {
+  text-align: end;
+}
+/* #endregion */

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

@@ -7,7 +7,7 @@
   box-sizing: border-box;
 }
 
-// #region default carousel
+/* #region default carousel */
 
 :host {
   display: block;
@@ -167,23 +167,23 @@
   }
 }
 
-// #endregion
+/* #endregion */
 
-// #region Remove the scrollbar
+/* #region Remove the scrollbar */
 .carousel__inner {
-  // FireFox
+  /*  FireFox */
   scrollbar-width: none;
-  // IE10+
+  /*  IE10+ */
   -ms-overflow-style: none;
 }
 
 .carousel__inner::-webkit-scrollbar {
-  // Chrome, Safari, Edge
+  /*  Chrome, Safari, Edge */
   display: none;
 }
-// #endregion
+/* #endregion */
 
-// #region Direction button
+/* #region Direction button */
 
 .carousel__btns {
   text-align: center;
@@ -238,9 +238,9 @@
   }
 }
 
-// #endregion
+/* #endregion */
 
-// #region carousel controls/pips
+/* #region carousel controls/pips */
 .carousel .carousel__controls {
   overflow: hidden;
   margin-inline: auto;
@@ -298,9 +298,9 @@
     background: var(--colour-info);
   }
 }
-// #endregion
+/* #endregion */
 
-// #region progress bar
+/* #region progress bar */
 .carousel__progress {
   text-align: center;
   margin-bottom: 1rem;
@@ -326,7 +326,7 @@ input[type='range'] {
   appearance: none;
 }
 
-// Track Styles
+/*  Track Styles */
 input[type='range']::-webkit-slider-runnable-track {
   background: var(--track-colour);
   height: var(--track-size);
@@ -339,7 +339,7 @@ input[type='range']::-moz-range-track {
   border-radius: 0.5625rem; /* 9 */
 }
 
-// Extended track functionality
+/*  Extended track functionality */
 input[type='range']::-webkit-slider-runnable-track {
   background: linear-gradient(
     to right,
@@ -362,7 +362,7 @@ input[type='range']::-moz-range-track {
   );
 }
 
-// Thumb Styles
+/*  Thumb Styles */
 input[type='range']::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
   appearance: none;
@@ -387,7 +387,7 @@ input[type='range']::-moz-range-thumb {
   pointer-events: all;
 }
 
-// Focus Styles
+/*  Focus Styles */
 input[type='range']:focus {
   outline: none;
 }
@@ -409,9 +409,9 @@ input[type='range']:focus::-moz-range-thumb {
   outline: var(--thumb-size-outline) solid var(--thumb-colour);
 }
 
-// #endregion
+/* #endregion */
 
-// #region Hide buttons and pips
+/* #region Hide buttons and pips */
 .carousel__btns:has(~ .carousel__controls button:first-child:nth-child(1):last-child) {
   display: none;
 }
@@ -430,7 +430,7 @@ input[type='range']:focus::-moz-range-thumb {
     display: none;
   }
 
-  // Make sure that we dont just have one pip showing
+  /*  Make sure that we dont just have one pip showing */
   :host([data-smcols='2']) .carousel__controls:has(button:first-child:nth-last-child(2)),
   :host([data-smcols='3'])
     .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3))),
@@ -451,7 +451,7 @@ input[type='range']:focus::-moz-range-thumb {
     display: none;
   }
 
-  // Show slider
+  /*  Show slider */
   :host([data-smcols]) .carousel__controls {
     display: block;
   }
@@ -489,7 +489,7 @@ input[type='range']:focus::-moz-range-thumb {
     display: none !important;
   }
 
-  // Make sure that we dont just have one pip showing
+  /*  Make sure that we dont just have one pip showing */
   :host([data-mdcols='2']) .carousel__controls:has(button:first-child:nth-last-child(2)),
   :host([data-mdcols='3'])
     .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3))),
@@ -540,7 +540,7 @@ input[type='range']:focus::-moz-range-thumb {
     display: none !important;
   }
 
-  // Show slider
+  /*  Show slider */
   :host([data-mdcols]) .carousel__controls {
     display: block !important;
   }
@@ -569,9 +569,9 @@ input[type='range']:focus::-moz-range-thumb {
 :host(.hide-controls) .carousel__controls {
   display: none;
 }
-// #endregion
+/* #endregion */
 
-// #region thumbnails
+/* #region thumbnails */
 :host(.thumbnails) .carousel__controls {
   display: flex !important;
   flex-wrap: wrap;
@@ -620,12 +620,12 @@ input[type='range']:focus::-moz-range-thumb {
     display: none !important;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Turn carousel slide into image holder
+/* #region Turn carousel slide into image holder */
 ::slotted(div.image__wrapper) {
   width: 100%;
   aspect-ratio: var(--carousel-image-aspect-ratio, 3 / 2);
   position: relative;
 }
-// #endregion
+/* #endregion */

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

@@ -12,7 +12,7 @@
     }
   }
 
-  // Preload
+  /*  Preload */
   iam-carousel:not(:defined) {
     display: flex;
     flex-wrap: nowrap;
@@ -28,7 +28,7 @@
     }
   }
 
-  // #region Carousel inside of a admin panel
+  /* #region Carousel inside of a admin panel */
   .admin-panel:has(iam-carousel) {
     container-type: inline-size;
   }
@@ -56,9 +56,9 @@
       }
     }
   }
-  // #endregion
+  /* #endregion */
 
-  // #region carousel in dialog
+  /* #region carousel in dialog */
 
   dialog:has(iam-carousel) {
     container-type: inline-size;
@@ -80,5 +80,5 @@
       max-width: calc(100% - 4rem);
     }
   }
-  // #endregion
+  /* #endregion */
 }

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

@@ -81,6 +81,6 @@
   }
 
   iam-barchart {
-    //--xaxis-max-width: 3rem;
+    /* --xaxis-max-width: 3rem; */
   }
 }