@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/sass/components/table.scss

@@ -1,5 +1,4 @@
-@use "../_func.scss" as *;
-
+@use '../_func.scss' as *;
 
 // #region Table wrapper - Add via JS if needed, provides a safe space to scroll
 :host {
@@ -8,17 +7,16 @@
   display: block;
   background: white;
   padding: var(--wrapper-padding);
-  box-shadow: 0px 6px 12px rgba(0,0,0,0.11);
+  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
   border-radius: rem(10);
   margin-bottom: rem(32);
   overflow: hidden;
 
   &:before {
-    display: none!important;
+    display: none !important;
   }
 
   @media screen and (prefers-color-scheme: dark) {
-    
     background: var(--colour-canvas-2);
   }
 
@@ -29,7 +27,7 @@
 }
 
 ::slotted(table) {
-  margin-bottom: 0!important;
+  margin-bottom: 0 !important;
 }
 
 .table__wrapper {
@@ -43,17 +41,16 @@
 
 // #region Tables are only stacked on mobile
 @container (width < 23.4375em) {
-
   :host(:not(.table--fullwidth)) {
     margin-left: -1.5rem;
     margin-right: -1.5rem;
     margin-bottom: 0;
     background: var(--colour-canvas-2);
     border-radius: 0;
-  
+
     .table__wrapper:not(.table--fullwidth) {
       overflow: hidden;
-      max-height: none!important;
+      max-height: none !important;
     }
 
     background: none;
@@ -62,20 +59,19 @@
     overflow: visible;
 
     ::slotted(table) {
-
-      overflow: visible!important;
+      overflow: visible !important;
       margin-inline: 1.5rem;
-      margin-bottom: 1.5rem!important;
-      width: calc(100% - 3rem)!important;
+      margin-bottom: 1.5rem !important;
+      width: calc(100% - 3rem) !important;
       display: block;
     }
-      
+
     .table--cta {
       border-bottom: 0;
 
       &:after {
         content: none;
-        display: none !important;;
+        display: none !important;
       }
     }
   }
@@ -84,19 +80,15 @@
 
 // #region CTA column
 @container (width > 23.4375em) {
-
   :host {
-    
     --cta-width: 8rem;
   }
 
   :host(.table--loading) {
-    
-    --cta-width: 1.5rem!important;
+    --cta-width: 1.5rem !important;
   }
 
   .table--cta {
-    
     position: relative;
   }
 
@@ -108,8 +100,7 @@
 // #endregion
 
 // #region Max height tables
-.table__wrapper:is(.mh-sm,.mh-md,.mh-lg) {
-  
+.table__wrapper:is(.mh-sm, .mh-md, .mh-lg) {
   position: relative;
 
   &::before {
@@ -122,7 +113,7 @@
 }
 
 // If table CTA class is set then undo max-height
-.table--cta > .table__wrapper:is(.mh-sm,.mh-md,.mh-lg) {
+.table--cta > .table__wrapper:is(.mh-sm, .mh-md, .mh-lg) {
   max-height: none;
   position: static;
 
@@ -134,9 +125,8 @@
 
 // #region Table with actionbar
 @container (width < 23.4375em) {
-
   .table__wrapper.has-actionbar {
-    margin-top: calc(-100vh - -6.75rem)!important;
+    margin-top: calc(-100vh - -6.75rem) !important;
   }
 }
 // #endregion
@@ -152,11 +142,11 @@
   }
 
   &::after {
-    content: "Loading...";
+    content: 'Loading...';
     position: absolute;
     top: rem(100);
     left: 50%;
-    transform: translate(-50%,0);
+    transform: translate(-50%, 0);
     font-weight: bold;
     color: var(--colour-heading);
     font-size: 1.5rem;

package/assets/sass/components/tabs.scss

@@ -1,7 +1,6 @@
-@use "../_func" as *;
+@use '../_func' as *;
 
-*:not(main):has(> iam-tabs){
-  
+*:not(main):has(> iam-tabs) {
   container-type: inline-size;
 }
 
@@ -33,19 +32,18 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
   .tabs__links__wrapper {
     position: relative;
     margin: 0 auto 2rem;
-  
+
     &:after {
-      content: "";
+      content: '';
       left: 50%;
       position: relative;
       height: 1px;
       width: 100vw;
       background-color: var(--colour-border);
-      transform: translate(-50%,0);
+      transform: translate(-50%, 0);
       display: block;
       clear: both;
     }
-
   }
 }
 
@@ -57,9 +55,7 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
   }
 }
 
-
 .tabs__links {
-  
   scroll-snap-type: x mandatory;
 
   -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
@@ -75,7 +71,7 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
   margin: 0 -1.5rem;
   overflow-y: clip;
   overflow-x: auto;
-  
+
   &::-webkit-scrollbar {
     display: none;
   }
@@ -107,7 +103,7 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
 
     &:after {
       position: absolute;
-      content: "";
+      content: '';
       bottom: 0;
       left: 50%; // half way across
       height: 3px;
@@ -124,16 +120,16 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
         transform: translate(-50%, 0) scale(0.6, 1);
       }
     }
-    
+
     &:not(.disabled) {
-      &:is([aria-pressed="true"],:active,.current):after {
+      &:is([aria-pressed='true'], :active, .current):after {
         transform: translate(-50%, 0) scale(1, 1);
       }
     }
 
-    &:is([aria-pressed="true"],.current) {
+    &:is([aria-pressed='true'], .current) {
       pointer-events: none;
-      outline: var(--contrast-outline-width, 0px) solid var(--colour-primary-theme)!important;
+      outline: var(--contrast-outline-width, 0px) solid var(--colour-primary-theme) !important;
     }
   }
 }
@@ -150,10 +146,8 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
   }
 }
 
-
-// #region admin-panel links 
+// #region admin-panel links
 .admin-panel :is(.admin-panel__links, .tabs__links) {
-
   padding: 0;
   margin: calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);
 
@@ -168,9 +162,8 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
   &:after {
     display: none;
   }
-  
-  @include media-breakpoint-up(sm) {
 
+  @include media-breakpoint-up(sm) {
     flex-direction: row;
   }
 
@@ -183,18 +176,18 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
     text-align: left;
     flex-grow: 1;
     --gradient-direction: -90deg;
-    background-color:var(--colour-success);
+    background-color: var(--colour-success);
 
-    &:not([class*="bg-"]){
-      background-image: linear-gradient(var(--gradient-direction),  var(--colour-info) 0, transparent 100%);
+    &:not([class*='bg-']) {
+      background-image: linear-gradient(var(--gradient-direction), var(--colour-info) 0, transparent 100%);
     }
 
-    &:is(.current, [aria-pressed="true"]){
+    &:is(.current, [aria-pressed='true']) {
       color: var(--colour-primary-theme);
     }
 
-    &:not(.current, [aria-pressed="true"]){
-      background: var(--colour-canvas-2)!important;
+    &:not(.current, [aria-pressed='true']) {
+      background: var(--colour-canvas-2) !important;
     }
 
     &:after {
@@ -202,17 +195,15 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
     }
 
     @include media-breakpoint-up(sm) {
-
       margin: 0;
 
-      &:not(:first-child){
-          
-        border-left: 1px solid var(--colour-border)!important;
+      &:not(:first-child) {
+        border-left: 1px solid var(--colour-border) !important;
       }
     }
   }
 
-  .link:is(.current,[aria-pressed="true"]) {
+  .link:is(.current, [aria-pressed='true']) {
     pointer-events: none;
   }
 }
@@ -225,4 +216,4 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
   :host(.tabs--inline) .tabs__links__wrapper:after {
     width: 100%;
   }
-}
+}

package/assets/sass/components/testimonial.scss

@@ -1,7 +1,6 @@
-@use "../_func" as *;
+@use '../_func' as *;
 
 .testimonial {
-
   --testimonial-padding: 1rem;
   --testimonial-spacing: 1rem;
 
@@ -12,7 +11,6 @@
 
   // Circle
   > div:first-child {
-
     position: relative;
     overflow: hidden;
   }
@@ -35,11 +33,9 @@
     height: rem(230);
 
     @include media-breakpoint-up(sm) {
-
       height: rem(340);
     }
     @include media-breakpoint-up(md) {
-
       min-height: 100%;
       scroll-snap-type: y mandatory;
       flex-direction: column;
@@ -47,7 +43,6 @@
     }
 
     img {
-
       scroll-snap-align: start;
       user-select: none;
       pointer-events: none;
@@ -71,7 +66,7 @@
       bottom: auto;
       right: 0;
       top: 50%;
-      transform: rotate(90deg) translate(0,-120%);
+      transform: rotate(90deg) translate(0, -120%);
       transform-origin: center;
     }
   }
@@ -89,7 +84,6 @@
   }
 
   &__content {
-
     --display-none: none;
     margin: 0 var(--testimonial-padding) var(--testimonial-spacing) var(--testimonial-padding);
     position: relative;
@@ -106,8 +100,7 @@
 
   // Only show 1 blockquote at a time
   @for $i from 1 through 10 {
-
-    &[data-show="#{$i}"] blockquote:not(:nth-child(#{$i})) {
+    &[data-show='#{$i}'] blockquote:not(:nth-child(#{$i})) {
       display: var(--display-none);
       opacity: 0;
       user-select: none;
@@ -116,7 +109,6 @@
   }
 
   &__after {
-
     padding: 1rem var(--testimonial-padding) var(--testimonial-spacing) var(--testimonial-padding);
   }
 }
@@ -128,6 +120,6 @@
 
 /* Hide scrollbar for IE, Edge and Firefox */
 .testimonial__images {
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
-}
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}

package/assets/sass/components/timeline.scss

@@ -1,16 +1,14 @@
-@use "sass:math";
-@use "../_func" as *;
+@use 'sass:math';
+@use '../_func' as *;
 
 .timeline {
-
-  --breakpoint:(100% - #{rem(992)});
+  --breakpoint: (100% - #{rem(992)});
   --pl: clamp(0rem, var(--breakpoint) * -1000, 4rem);
   --line-pos: clamp(1rem, var(--breakpoint) * 1000, 50%);
   --circle-pos: 1rem;
   --line-length: 100%;
   --img-order: 1;
 
-
   position: relative;
   padding-top: rem(4);
   padding-left: var(--pl);
@@ -23,7 +21,6 @@
   align-items: flex-start;
 
   .timeline__container:not(.timeline--simple) & {
-
     align-items: center;
 
     @include media-breakpoint-up(md) {
@@ -34,7 +31,7 @@
   }
 
   &:before {
-    content: " ";
+    content: ' ';
     display: block;
     background: black;
     width: 4px;
@@ -45,7 +42,7 @@
   }
 
   &:after {
-    content: " ";
+    content: ' ';
     display: block;
     background: white;
     width: 2rem;
@@ -60,12 +57,12 @@
   }
 
   > * {
-    max-width: rem(math.div(1112,2) - 96);
+    max-width: rem(math.div(1112, 2) - 96);
     order: 1;
   }
 
   > img {
-    max-width: min(100%, #{rem(math.div(1112,2) - 96)});
+    max-width: min(100%, #{rem(math.div(1112, 2) - 96)});
     margin-bottom: 2rem;
   }
 
@@ -74,7 +71,6 @@
   }
 
   &:first-child {
-
     &:before {
       top: var(--circle-pos);
       height: var(--line-length);
@@ -93,4 +89,4 @@
       margin-bottom: 0;
     }
   }
-}
+}

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

@@ -1,6 +1,5 @@
-@use "../_func.scss" as *;
-@use "card.module.scss" as *;
-
+@use '../_func.scss' as *;
+@use 'card.module.scss' as *;
 
 :host {
   --card-right-padding: 1rem;
@@ -11,25 +10,22 @@
   --line-height: 2rem;
 }
 
-
 //video-card--top
 
-
-:host(:is([data-youtube],[data-vimeo]):not(.video-card--top)) .card__head {
+:host(:is([data-youtube], [data-vimeo]):not(.video-card--top)) .card__head {
   order: 2;
 }
 
-:host(:is([data-youtube],[data-vimeo])) .card__head {
-
+:host(:is([data-youtube], [data-vimeo])) .card__head {
   cursor: pointer;
   position: relative;
 
-  > *:not(img){
+  > *:not(img) {
     z-index: -1;
   }
 
   &:before {
-    content: "";
+    content: '';
     display: block;
     background-color: var(--video-btn-colour, var(--colour-success));
     height: 5rem;
@@ -42,11 +38,10 @@
   }
 
   &:after {
-
     $icon-play: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z'/></svg>");
     --icon: #{$icon-play};
 
-    content: "";
+    content: '';
     display: block;
     height: 2rem;
     width: 2rem;
@@ -65,7 +60,7 @@
     -webkit-mask-position: 50% 50%;
   }
 
-  &:is(:hover,:focus) {
+  &:is(:hover, :focus) {
     --video-btn-colour: var(--colour-canvas);
   }
   &:is(:active) {
@@ -77,4 +72,4 @@
   aspect-ratio: 1 / 1;
   display: block;
   width: 10rem;
-}
+}

package/assets/sass/components.reset.scss

@@ -1,8 +1,8 @@
 @charset "UTF-8";
 
-@use "_fonts";
-@use "_corefiles.scss" with (
-  $root: ":host", // copied directory from iamkey repo
-  $layers: "false"
+@use '_fonts';
+@use '_corefiles.scss' with (
+  $root: ':host',
+  // copied directory from iamkey repo
+  $layers: 'false'
 );
-

package/assets/sass/core.scss

@@ -1,5 +1,5 @@
 @charset "UTF-8";
 
-@use "_fonts";
-@use "_corefiles.scss";
-@use "_print";
+@use '_fonts';
+@use '_corefiles.scss';
+@use '_print';