@iamproperty/components 7.6.4--beta7 → 7.7.0

package/assets/sass/_elements.scss

@@ -5,26 +5,26 @@
 @use 'elements/media';
 @use 'elements/type';
 @use 'elements/hr';
-@use 'elements/lists.scss';
+@use 'elements/lists';
 @use 'elements/lists--tick-list';
 @use 'elements/lists--breadcrumbs';
 @use 'elements/lists--steps';
-@use 'elements/tooltips.scss';
-@use 'elements/container.scss';
-@use 'elements/table.element.scss';
-@use 'elements/links.scss';
+@use 'elements/tooltips';
+@use 'elements/container';
+@use 'elements/table.element';
+@use 'elements/links';
 @use 'elements/buttons';
-@use 'elements/dialog.scss';
-@use 'elements/popover.scss';
-@use 'elements/modal.scss';
-@use 'elements/admin-panel.scss';
-@use 'elements/prefix.scss';
-@use 'elements/forms.scss';
-@use 'elements/toggle-button.scss';
-@use 'elements/badge-tag.scss';
-@use 'elements/feature.scss';
-@use 'elements/details.scss';
-@use 'elements/progress.scss';
+@use 'elements/dialog';
+@use 'elements/popover';
+@use 'elements/modal';
+@use 'elements/admin-panel';
+@use 'elements/prefix';
+@use 'elements/forms';
+@use 'elements/toggle-button';
+@use 'elements/badge-tag';
+@use 'elements/feature';
+@use 'elements/details';
+@use 'elements/progress';
 @use 'elements/code';
 @use 'elements/highlight';
 @use 'elements/dropdown';

package/assets/sass/_functions/bs_mixins.scss

@@ -792,7 +792,7 @@ $new_utilities: map.merge(
   }
 
   .mh-sm {
-    max-height: calc(#{rem(200)} - var(--mh-modifier, 0rem));
+    max-height: calc(12.5rem - var(--mh-modifier, 0rem));
   }
 
   .mh-md {
@@ -818,7 +818,7 @@ $new_utilities: map.merge(
     }
 
     .mh-sm-sm {
-      max-height: calc(#{rem(200)} - var(--mh-modifier, 0rem));
+      max-height: calc(12.5rem - var(--mh-modifier, 0rem));
     }
 
     .mh-sm-md {
@@ -841,7 +841,7 @@ $new_utilities: map.merge(
     }
 
     .mh-md-sm {
-      max-height: calc(#{rem(200)} - var(--mh-modifier, 0rem));
+      max-height: calc(12.5rem - var(--mh-modifier, 0rem));
     }
 
     .mh-md-md {

package/assets/sass/_utilities.scss

@@ -3,9 +3,9 @@
 
 @use './utilities/font-awesome-iso-fallbacks';
 
-@use './utilities/clearfix.scss';
-@use './utilities/visually-hidden.scss';
-@use './utilities/text-truncate.scss';
+@use './utilities/clearfix';
+@use './utilities/visually-hidden';
+@use './utilities/text-truncate';
 @use './utilities/ratio';
 @use './utilities/fixed';
 @use './utilities/sticky';
@@ -32,3 +32,4 @@
 @use './utilities/rounded';
 @use './utilities/visible';
 @use './utilities/columns';
+@use './utilities/shadow';

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

@@ -1,14 +1,15 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
-@use '../elements/prefix.scss' as *;
-@use '../elements/forms.scss' as *;
-@use '../elements/buttons.scss' as *;
-@use '../elements/dialog.scss' as *;
-@use '../elements/popover.scss' as *;
+@use '../elements/prefix' as *;
+@use '../elements/forms' as *;
+@use '../elements/buttons' as *;
+@use '../elements/badge-tag' as *;
+@use '../elements/dialog' as *;
+@use '../elements/popover' as *;
 
-@use '../utilities/margins.scss' as *;
-@use '../utilities/visually-hidden.scss' as *;
-@use '../utilities/display.scss' as *;
+@use '../utilities/margins' as *;
+@use '../utilities/visually-hidden' as *;
+@use '../utilities/display' as *;
 
 :host {
   background-color: #fcfcfc;
@@ -17,7 +18,7 @@
 .actionbar__wrapper {
   position: relative;
   z-index: 10;
-  height: rem(68);
+  height: 4.25rem; /* 68 */
   container-type: inline-size;
 }
 
@@ -42,6 +43,14 @@ slot[name='selectall'] {
   }
 }
 
+:host([data-view="square"]) .views [data-view="square"],
+:host([data-view="list"]) .views [data-view="list"],
+:host([data-view="small"]) .views [data-view="small"] {
+
+  background: #e9f9fd;
+  outline: 1px solid #1ebee6;
+}
+
 .selectall,
 slot[name='selectall'] {
   width: 2.5rem;
@@ -67,13 +76,13 @@ slot[name='selectall'] {
 }
 
 :is(.actionbar, .actionbar--selected, .actionbar--search) {
-  border-top-left-radius: var(--actionbar-radius, #{rem(10)});
-  border-top-right-radius: var(--actionbar-radius, #{rem(10)});
-  padding: 0 1.5rem;
+  border-top-left-radius: var(--actionbar-radius, 0.625rem);
+  border-top-right-radius: var(--actionbar-radius, 0.625rem);
+  padding: 0 1rem;
   flex-wrap: nowrap;
   justify-content: flex-end;
   align-items: center;
-  height: rem(68);
+  height: 4.25rem; /* 68 */
   inset: 0;
 
   @supports selector(:has(*)) {
@@ -81,7 +90,7 @@ slot[name='selectall'] {
   }
 
   @media screen and (min-width: 36em) {
-    padding: 0 2rem;
+    padding: 0 1.5rem;
   }
 }
 
@@ -196,17 +205,17 @@ slot[name='selectall'] {
   flex-wrap: nowrap;
   justify-content: flex-end;
   align-items: center;
-  width: rem(210);
+  width: 13.125rem; /* 210 */
 
   overflow: visible;
   position: relative;
 
   @media screen and (min-width: 36em) {
-    width: rem(450);
+    width: 28.125rem; /* (450) */
   }
 
   @media screen and (min-width: 62em) {
-    width: rem(750);
+    width: 46.875rem; /* (750) */
   }
 
   .body {
@@ -215,19 +224,19 @@ slot[name='selectall'] {
 }
 
 :host([data-large-safe-area]) .safe-area {
-  width: rem(260);
+  width: 16.25rem; /* (260) */
 
   @media screen and (min-width: 36em) {
-    width: rem(620);
+    width: 38.75rem; /*(620) */
   }
 
   @media screen and (min-width: 62em) {
-    width: rem(1048);
+    width: 65.5rem; /* (1048) */
   }
 }
 
 :host([data-switchviews]) .safe-area {
-  width: rem(144);
+  width: 9rem; /* (144) */
 }
 // #endregion
 
@@ -262,12 +271,12 @@ slot[name='selectall'] {
 }
 
 .show .search-wrapper {
-  width: calc(100% - #{rem(44 + 8)});
-  max-width: rem(350) !important;
+  width: calc(100% - 3.25rem); /* 44 + 8 */
+  max-width: 21.875rem!important; /* (350) */
   margin: 0 !important;
 
   @media screen and (min-width: 62em) {
-    max-width: rem(450) !important;
+    max-width: 28.125rem!important; /* (450) */
   }
 
   input {
@@ -284,7 +293,7 @@ slot[name='selectall'] {
     max-height: 2.5rem !important;
     min-width: 2.5rem !important;
     max-width: 2.5rem !important;
-    line-height: rem(40 - 8 - 8) !important;
+    line-height: 1.5rem!important; /* 40 - 8 - 8 */
     pointer-events: all !important;
   }
   .empty {
@@ -361,6 +370,8 @@ slot[name='selectall'] {
     height: 1rem;
     width: 1rem;
     border-radius: 50%;
+    mask-image:unset;
+    -webkit-mask-image:unset;
   }
 }
 
@@ -407,6 +418,4 @@ slot[name="filters"]{
   }
 }
 
-
-
 // #endregion

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

@@ -1,4 +1,4 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 
 
@@ -7,8 +7,8 @@ iam-actionbar {
   --actionbar-radius: 0;
   background-color: #fcfcfc;
   display: block;
-  border-top-left-radius: rem(10);
-  border-top-right-radius: rem(10);
+  border-top-left-radius: 0.625rem; /* 10 */
+  border-top-right-radius: 0.625rem; /* 10 */
 
   @media (prefers-color-scheme: dark) {
     background-color: var(--colour-canvas);
@@ -38,7 +38,7 @@ main > .actionbar__sticky-wrapper > .actionbar__sticky > iam-actionbar {
   }
 
   @media screen and (min-width: 62em) {
-    padding-inline: calc(50% - #{rem(556)} - 2rem);
+    padding-inline: calc(50% - 34.75rem - 2rem); /* 556px */
   }
 }
 // #endregion
@@ -105,3 +105,11 @@ iam-actionbar:has(.selectall input:checked) {
   --selectall-actionbar-opactiy: 0;
   --selectall-action-pe: none;
 }
+
+// #region filters 
+
+iam-actionbar [slot="filters"]:not(:has(+[slot="filters"])) {
+  margin-inline-end: auto!important;
+}
+
+// #endregion

package/assets/sass/components/address-lookup.component.scss

@@ -1,11 +1,11 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
-@use '../elements/forms.scss' as *;
-@use '../elements/prefix.scss' as *;
-@use '../elements/buttons.scss' as *;
-@use '../elements/links.scss' as *;
+@use '../elements/forms' as *;
+@use '../elements/prefix' as *;
+@use '../elements/buttons' as *;
+@use '../elements/links' as *;
 
-@use '../utilities/margins.scss' as *;
+@use '../utilities/margins' as *;
 
 *,
 *::before,
@@ -76,7 +76,7 @@ input[name='postcode'] {
 .pre-filled {
   background-color: var(--colour-light);
   border-radius: 1rem;
-  max-width: rem(490);
+  max-width: 30.625rem; /* (490) */
 }
 
 .pre-filled .title:empty {

package/assets/sass/components/applied-filters.scss

@@ -1,5 +1,5 @@
-@use '../_func.scss' as *;
-@use '../elements/badge-tag.scss' as *;
+@use '../_func' as *;
+@use '../elements/badge-tag' as *;
 
 .applied-filters:not(:empty) {
   padding: 1px 1px 1rem 1px;

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

@@ -1,6 +1,6 @@
-@use '../_func.scss' as *;
-@use 'charts.module.scss' as *;
-@use '../elements/buttons.scss' as *;
+@use '../_func' as *;
+@use 'charts.module' as *;
+@use '../elements/buttons' as *;
 
 // #region Bar chart (Horizontal)
 :host(.chart--horizontal) .chart__outer {
@@ -275,17 +275,17 @@
 }
 
 :host(.chart--fit-content:not(.chart--horizontal).chart--no-scale) {
-  --fc-group-width: #{rem(22)};
+  --fc-group-width: 1.375rem; /* 22 */
   --fc-value-width: 1.5rem;
 
   table {
-    height: var(--chart-height-lg, #{rem(120)});
+    height: var(--chart-height-lg, 7.5rem); /* 120 */
   }
 }
 
 .chart__wrapper {
   @container (min-width: 36em) {
-    --fc-group-width: #{rem(22)};
+    --fc-group-width: 1.375rem; /* 22 */
     --fc-value-width: 1.5rem;
   }
 }

package/assets/sass/components/bento-grid.component.scss

@@ -1,4 +1,4 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 *,
 *::before,
@@ -24,7 +24,7 @@
 
   display: block;
   width: 100%;
-  min-height: rem(200);
+  min-height: 12.5rem; /* 200 */
 }
 
 @container (width > 54em) {

package/assets/sass/components/bento-grid.global.scss

@@ -1,4 +1,4 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 iam-bento-grid {
   details {
@@ -48,7 +48,7 @@ iam-bento-grid {
           margin-left: 0.5em;
           line-height: 1em;
           font-size: 1em;
-          font-family: 'Font Awesome 6 Pro';
+          font-family: 'Font Awesome 7 Pro';
         }
       }
 
@@ -63,7 +63,7 @@ iam-bento-grid {
         line-height: 1em;
         font-size: 0.5em;
 
-        font-family: 'Font Awesome 6 Pro';
+        font-family: 'Font Awesome 7 Pro';
         font-weight: 300;
       }
 

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

@@ -46,7 +46,7 @@
 
 [class*='fa-']:before {
   content: var(--fa);
-  font-family: 'Font Awesome 6 Pro';
+  font-family: 'Font Awesome 7 Pro';
   line-height: 1em;
 }
 
@@ -185,7 +185,7 @@ div:has(> select) #view {
 .calendar__datepicker {
   display: inline-block;
   position: relative;
-  margin-bottom: rem(9);
+  margin-bottom: 0.5625rem; /* 9 */
   //margin-right: auto;
 
   input {
@@ -208,7 +208,7 @@ div:has(> select) #view {
 
 .calendar__title {
   display: inline-block;
-  line-height: rem(36);
+  line-height: 2.25rem; /* 36 */
   margin-bottom: 0;
   color: var(--colour-primary);
   pointer-events: none;
@@ -291,7 +291,7 @@ hr {
 
   select:has(option[value='month']:checked) ~ .tag.tag--toggle {
     display: inline-block;
-    margin-bottom: rem(9);
+    margin-bottom: 0.5625rem; /* 9 */
     margin-right: 0;
     line-height: 2rem;
     order: 1;
@@ -352,7 +352,7 @@ hr {
   --columnHeadingLineHeight: 1.5rem;
   --columnHeadingFontWeight: bold;
 
-  --alldayHeight: #{rem(28)};
+  --alldayHeight: 1.75rem; /* 28 */
 
   background-color: var(--colour-canvas);
 }
@@ -394,7 +394,7 @@ time.column-header {
   width: 1.25rem;
   height: 1.25rem;
   line-height: 1.25rem;
-  margin-top: rem(2);
+  margin-top: 0.125rem; /* 2 */
   text-align: left;
   border-radius: 50%;
   display: inline-block;
@@ -702,7 +702,7 @@ time.column-header {
   margin-bottom: 2rem;
 
   @container (min-width: 36em) {
-    --side-panel-width: #{rem(72)};
+    --side-panel-width: 4.5rem; /* 72 */
   }
 
   #week-view-corner {
@@ -802,7 +802,7 @@ time.column-header {
 
     > tbody > tr > th,
     > tbody > tr > td {
-      height: rem(72);
+      height: 4.5rem; /* 72 */
     }
 
     > tbody > tr > td {
@@ -819,7 +819,7 @@ time.column-header {
     }
 
     > tbody > tr > td > span {
-      height: rem(17.5);
+      height: 1.09375rem; /* 17.5 */
       display: block;
 
       &.dragover {
@@ -977,7 +977,7 @@ time.column-header {
     max-width: 100%;
 
     @container (min-width: 36em) {
-      --side-panel-width: #{rem(72)};
+      --side-panel-width: 4.5rem; /* 72 */
     }
 
     > thead,
@@ -1025,7 +1025,7 @@ time.column-header {
       }
       tbody tr:first-child {
         position: sticky;
-        top: rem(26);
+        top: 1.625rem; /* 26 */
         border-collapse: collapse;
         background: var(--colour-canvas);
         z-index: 99;
@@ -1044,7 +1044,7 @@ time.column-header {
       tbody td {
         border-bottom: 1px solid var(--colour-border);
         border-right: 1px solid var(--colour-border);
-        height: rem(72);
+        height: 4.5rem; /* 72 */
 
         &:first-child {
           border-left: 1px solid var(--colour-border);
@@ -1207,12 +1207,12 @@ time.column-header {
 
   .month-wrapper table {
     height: var(--table-height);
-    font-size: rem(10);
+    font-size: 0.625rem; /* 10 */
     margin-bottom: 0;
 
     thead > tr > th,
     .column-header {
-      font-size: rem(10);
+      font-size: 0.625rem; /* 10 */
       line-height: 0.75rem;
     }
 

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

@@ -72,7 +72,7 @@
       z-index: var(--index-floating);
       position: absolute;
 
-      width: rem(250);
+      width: 15.625rem; /* 250 */
       background: var(--colour-primary);
       color: var(--colour-white);
       padding: 0.75rem;
@@ -170,9 +170,9 @@
       top: 0;
       right: 0.25rem;
       content: '\f363';
-      font-family: 'Font Awesome 6 Pro';
+      font-family: 'Font Awesome 7 Pro';
       font-weight: 300;
-      line-height: rem(26);
+      line-height: 1.625rem; /* 26 */
     }
   }
 
@@ -208,7 +208,7 @@
   }
 
   iam-calendar:is([data-view='week'], [data-view='day']) button:not(.allday-event) {
-    height: var(--event-height, #{rem(17.5)});
+    height: var(--event-height, 1.09375rem); /* 17.5 */
     line-height: 1.125rem !important;
     padding-top: 0.25rem !important;
     white-space: normal !important;

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

@@ -1,8 +1,8 @@
-@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' as *;
+@use 'card.module' as *;
+@use '../elements/dialog' as *;
+@use '../elements/popover' as *;
+@use '../elements/buttons' as *;
 
 :host {
   --card-right-padding: 1rem;
@@ -87,11 +87,11 @@
     display: flex;
 
     .card__illustration {
-      height: rem(64);
-      width: rem(64);
+      height: 4rem; /* 64 */
+      width: 4rem; /* 64 */
       margin-right: 1.5rem;
-      margin-top: rem(-20);
-      margin-bottom: rem(-20);
+      margin-top: -1.25rem; /* -20 */
+      margin-bottom: -1.25rem; /* -20 */
       position: relative;
 
       img {
@@ -153,7 +153,7 @@ slot[name='secondary'] {
 
   > .btn:before {
     content: '\f142';
-    font-family: 'Font Awesome 6 Pro';
+    font-family: 'Font Awesome 7 Pro';
   }
 }
 

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

@@ -1,4 +1,4 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 :host {
   --card-icon-right: 1rem;
@@ -117,7 +117,7 @@
   margin-top: 0.5rem;
 
   i {
-    font-family: var(--fa-style-family, 'Font Awesome 6 Pro');
+    font-family: var(--fa-style-family, 'Font Awesome 7 Pro');
     font-weight: var(--fa-style, 900);
 
     display: block !important;

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

@@ -1,5 +1,5 @@
 @use '../_func' as *;
-@use '../elements/buttons.scss' as *;
+@use '../elements/buttons' as *;
 
 *,
 *::before,
@@ -266,7 +266,7 @@
     text-indent: -50rem;
     overflow: hidden;
     background: #a5ecfd;
-    margin-inline: rem(6);
+    margin-inline: 0.375rem; /* 6 */
     cursor: pointer;
     border: none;
 
@@ -292,7 +292,7 @@
   width: 1rem;
   height: 1rem;
   min-height: 1rem;
-  margin-inline: rem(2);
+  margin-inline: 0.125rem; /* 2 */
 
   &:hover {
     background: var(--colour-info);
@@ -312,9 +312,9 @@ input[type='range'] {
   --track-colour: #a5ecfd;
   --thumb-colour: var(--colour-info);
   --thumb-size: 1rem;
-  --thumb-size-outline: #{rem(0)};
+  --thumb-size-outline: 0;
   width: 90%;
-  max-width: rem(172);
+  max-width: 10.75rem; /* 172 */
 
   background: transparent;
   cursor: pointer;
@@ -330,13 +330,13 @@ input[type='range'] {
 input[type='range']::-webkit-slider-runnable-track {
   background: var(--track-colour);
   height: var(--track-size);
-  border-radius: rem(9);
+  border-radius: 0.5625rem; /* 9 */
 }
 
 input[type='range']::-moz-range-track {
   background: var(--track-colour);
   height: var(--track-size);
-  border-radius: rem(9);
+  border-radius: 0.5625rem; /* 9 */
 }
 
 // Extended track functionality
@@ -366,7 +366,7 @@ input[type='range']::-moz-range-track {
 input[type='range']::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
   appearance: none;
-  margin-top: rem(-4); /* Centers thumb on the track */
+  margin-top: -0.25rem; /* Centers thumb on the track */
   background-color: var(--thumb-colour);
   height: var(--thumb-size);
   width: var(--thumb-size);

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

@@ -65,8 +65,8 @@
     --carousel-spacing: 2rem;
 
     @media screen and (min-width: 36em) {
-      min-width: rem(600);
-      max-width: rem(600);
+      min-width: 37.5rem; /* 600 */
+      max-width: 37.5rem; /* 600 */
     }
   }