@iamproperty/components 5.0.0 → 5.1.0-beta10

package/assets/sass/components/carousel.scss

@@ -2,7 +2,6 @@
 
 // #region default carousel
 .carousel {
-  padding-bottom: 3rem;
 
   .carousel__wrapper {
 
@@ -14,45 +13,31 @@
     --gutter-x: #{$grid-gutter-width};
     overflow: auto;
     scroll-snap-type: x mandatory;
-    margin-right: calc(var(--gutter-x) * -.5);
-    margin-left: calc(var(--gutter-x) * -.5);   
-
-    > .row {
-      flex-wrap: nowrap;
-      margin: 0;
-
-      > .col {
-        padding-top: rem(36);
-        padding-bottom: rem(24);
-        scroll-snap-align: start;
-        scroll-padding: calc(var(--gutter-x) * -1);
-      }
-    }
   }
 
-  .carousel__item > *:last-child {
+  .col > *:last-child {
     margin-bottom: 0;
     padding-bottom: 0;
   }
 }
+
+
 // #endregion
 
 // #region Remove the scrollbar
-body.js-enabled .carousel__inner {
+.carousel__inner {
   // FireFox
   scrollbar-width: none;
   // IE10+
   -ms-overflow-style: none;
 }
 
-body.js-enabled .carousel__inner::-webkit-scrollbar {
+.carousel__inner::-webkit-scrollbar {
   // Chrome, Safari, Edge
   display: none;
 }
 // #endregion
 
-
-
 // #region Direction button
 .btn-next, 
 .btn-prev {
@@ -63,13 +48,8 @@ body.js-enabled .carousel__inner::-webkit-scrollbar {
   background: var(--marker-bg);
   border-radius: 100%;
   width: rem(36);
+  max-width: rem(36);
   height: rem(36);
-
-  @include media-breakpoint-up(md) {
-
-    width: rem(48);
-    height: rem(48);
-  }
   text-indent: -300rem;
   overflow: hidden;
   border: none;
@@ -77,6 +57,11 @@ body.js-enabled .carousel__inner::-webkit-scrollbar {
   margin: 0 rem(8);
   padding: 0;
 
+  position: absolute;
+  top: 50%;
+  left: 0rem;
+  transform: translate(0,-50%);
+
   &:disabled {
     opacity: 0.8;
     pointer-events: none;
@@ -114,194 +99,136 @@ body.js-enabled .carousel__inner::-webkit-scrollbar {
   }
 }
 
+.btn-next {
+  left: auto;
+  right: 0;
+
+  @include media-breakpoint-up(md) {
+
+    margin-right: rem(-48);
+  }
+}
+
 .btn-prev {
+
+  @include media-breakpoint-up(md) {
+
+    margin-left: rem(-48);
+  }
+
   &:after {
 
     transform: rotate(180deg);
   }
 }
-// #endregion
 
 
-// #region carousel controls/pips
-.carousel:not(.hide-controls) {
-  padding-bottom: 4.5rem!important;
-}
 
-.carousel.hide-controls .carousel__controls {
-  display: none;
-}
 
+
+// #endregion
+
+// #region carousel controls/pips
 .carousel .carousel__controls {
-  position: absolute;
+
   text-align: center;
-  width: auto;
-  left: 0;
-  width: calc(100% + 2rem);
-  margin-left: -1rem;
-  margin-right: -1rem;
-  bottom: -3rem;
-
-  a {
+  width: 10rem;
+  max-height: 1rem;
+  overflow: hidden;
+  margin-inline: auto;
+    
+  @include media-breakpoint-up(sm) {
+    width: 100%;
+  }
+
+  button {
     width: 1rem;
     height: 1rem;
     min-height: 1rem;
     border-radius: 50%;
     text-indent: -50rem;
     overflow: hidden;
-    background: currentColor;
+    background: var(--colour-primary-theme);
     padding: 0;
     margin: 0 0.5rem 0.5rem 0.5rem;
+    border: none;
 
     &:before {
       display: none;
     }
   }
 
-  a:first-child:last-child {
+  button:first-child:last-child {
     display: none;
   }
 }
 
-.carousel .carousel__controls > a:nth-child(10) ~ a {
+.carousel__controls > button[aria-current] {
 
-  display: none;
+  background: var(--colour-success);
 }
+
 // #endregion
 
-// #region Carousel buttons
+// #region Hide buttons and pips
 .carousel.hide-btns .carousel__wrapper > .btn {
   display: none;
 }
 
-.carousel:not(.hide-btns) .carousel__inner {
-
-  margin-left: rem(28);
-  margin-right: rem(28);
-}
-
-.carousel .carousel__wrapper > .btn {
-  position: absolute;
-  top: 50%;
-  left: -1.25rem;
-  transform: translate(0,-50%);
-
-  &.btn-next {
-    left: auto;
-    right: -1.25rem;
-  }
-
-  @include media-breakpoint-up(md) {
-
-    margin-left: -1rem;
-    margin-right: -1rem;
-  }
-}
-
-
-// #endregion
-
-.carousel .carousel__inner > .row > .col:first-child {
-  margin-left: 0!important;
+.carousel.hide-controls .carousel__controls {
+  display: none;
 }
 
 @include media-breakpoint-up(sm) {
 
-  .carousel .carousel__controls > a:nth-child(10) ~ a {
-
-    display: inline-block;
-  }
-
-  .carousel .carousel__inner > .row[class*="row-cols-sm-"] > .col{
-    scroll-snap-align: unset;
-  }
-
-  .carousel .carousel__inner > .row-cols-sm-2 > .col:nth-child(odd),
-  .carousel .carousel__inner > .row-cols-sm-3 > .col:nth-child(3n+1),
-  .carousel .carousel__inner > .row-cols-sm-4 > .col:nth-child(4n+1),
-  .carousel .carousel__inner > .row-cols-sm-5 > .col:nth-child(5n+1),
-  .carousel .carousel__inner > .row-cols-sm-6 > .col:nth-child(6n+1) {
-    scroll-snap-align: start;
-
-    body:not(.js-enabled) & {
-      margin-left: 4rem;
-    }
-  }
-
-  .carousel .carousel__controls.cols-sm-2 > a:not(:nth-child(odd)),
-  .carousel .carousel__controls.cols-sm-3 > a:not(:nth-child(3n+1)),
-  .carousel .carousel__controls.cols-sm-4 > a:not(:nth-child(4n+1)),
-  .carousel .carousel__controls.cols-sm-5 > a:not(:nth-child(5n+1)),
-  .carousel .carousel__controls.cols-sm-6 > a:not(:nth-child(6n+1)) {
+  [data-row-class*="cols-sm-2"] .carousel__controls > button:not(:nth-child(odd)),
+  [data-row-class*="cols-sm-3"] .carousel__controls > button:not(:nth-child(3n+1)),
+  [data-row-class*="cols-sm-4"] .carousel__controls > button:not(:nth-child(4n+1)),
+  [data-row-class*="cols-sm-5"] .carousel__controls > button:not(:nth-child(5n+1)),
+  [data-row-class*="cols-sm-6"] .carousel__controls > button:not(:nth-child(6n+1)) {
     display: none;
   }
 
   // Make sure that we dont just have one pip showing
-  .carousel .carousel__controls.cols-sm-2 > a:first-child:nth-last-child(2),
-  .carousel .carousel__controls.cols-sm-3 > :is(a:first-child:nth-last-child(2), a:first-child:nth-last-child(3)),
-  .carousel .carousel__controls.cols-sm-4 > :is(a:first-child:nth-last-child(2), a:first-child:nth-last-child(3), a:first-child:nth-last-child(4)),
-  .carousel .carousel__controls.cols-sm-5 > :is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5)),
-  .carousel .carousel__controls.cols-sm-6 > :is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5),a:first-child:nth-last-child(6)) {
-    display: none;
-  }
-
-  // Hide buttons if not needed
-  .carousel.hide-sm-btns .carousel__wrapper > .btn {
+  [data-row-class*="cols-sm-2"] .carousel__controls:has(button:first-child:nth-last-child(2)),
+  [data-row-class*="cols-sm-3"] .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3))),
+  [data-row-class*="cols-sm-4"] .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3), button:first-child:nth-last-child(4))),
+  [data-row-class*="cols-sm-5"] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5))),
+  [data-row-class*="cols-sm-6"] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5),button:first-child:nth-last-child(6))),
+  [data-row-class*="cols-sm-2"] .carousel__controls:has(button:first-child:nth-last-child(2)) ~ .btn,
+  [data-row-class*="cols-sm-3"] .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3))) ~ .btn,
+  [data-row-class*="cols-sm-4"] .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3), button:first-child:nth-last-child(4))) ~ .btn,
+  [data-row-class*="cols-sm-5"] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5))) ~ .btn,
+  [data-row-class*="cols-sm-6"] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5),button:first-child:nth-last-child(6))) ~ .btn {
     display: none;
   }
-
-  .carousel.hide-sm-btns .carousel__inner {
-
-    margin-left: 0;
-    margin-right: 0;
-  }
 }
 
 @include media-breakpoint-up(md) {
-
-  .carousel .carousel__inner > .row[class*="row-cols-md-"] > .col{
-    scroll-snap-align: unset;
-    margin-left: 0;
+  .carousel__controls > button {
+    display: inline-block!important;
   }
-  
-  .carousel .carousel__inner > .row-cols-md-2 > .col:nth-child(odd),
-  .carousel .carousel__inner > .row-cols-md-3 > .col:nth-child(3n+1),
-  .carousel .carousel__inner > .row-cols-md-4 > .col:nth-child(4n+1),
-  .carousel .carousel__inner > .row-cols-md-5 > .col:nth-child(5n+1),
-  .carousel .carousel__inner > .row-cols-md-6 > .col:nth-child(6n+1) {
-    scroll-snap-align: start;
-    
-    body:not(.js-enabled) & {
 
-      margin-left: calc(50vw);
-    }
-  }
-
-  .carousel .carousel__controls.cols-md-2 > a:not(:nth-child(odd)),
-  .carousel .carousel__controls.cols-md-3 > a:not(:nth-child(3n+1)),
-  .carousel .carousel__controls.cols-md-4 > a:not(:nth-child(4n+1)),
-  .carousel .carousel__controls.cols-md-5 > a:not(:nth-child(5n+1)),
-  .carousel .carousel__controls.cols-md-6 > a:not(:nth-child(6n+1)) {
-    display: none;
+  [data-row-class*="cols-md-2"] .carousel__controls > button:not(:nth-child(odd)),
+  [data-row-class*="cols-md-3"] .carousel__controls > button:not(:nth-child(3n+1)),
+  [data-row-class*="cols-md-4"] .carousel__controls > button:not(:nth-child(4n+1)),
+  [data-row-class*="cols-md-5"] .carousel__controls > button:not(:nth-child(5n+1)),
+  [data-row-class*="cols-md-6"] .carousel__controls > button:not(:nth-child(6n+1)) {
+    display: none!important;
   }
 
   // Make sure that we dont just have one pip showing
-  .carousel .carousel__controls.cols-md-2 > a:first-child:nth-last-child(2),
-  .carousel .carousel__controls.cols-md-3 > :is(a:first-child:nth-last-child(2), a:first-child:nth-last-child(3)),
-  .carousel .carousel__controls.cols-md-4 > :is(a:first-child:nth-last-child(2), a:first-child:nth-last-child(3), a:first-child:nth-last-child(4)),
-  .carousel .carousel__controls.cols-md-5 > :is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5)),
-  .carousel .carousel__controls.cols-md-6 > :is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5),a:first-child:nth-last-child(6)) {
-    display: none;
-  }
-
-  // Hide buttons when not needed
-  .carousel.hide-md-btns .carousel__wrapper > .btn {
+  [data-row-class*="cols-md-2"] .carousel__controls:has(button:first-child:nth-last-child(2)),
+  [data-row-class*="cols-md-3"] .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3))),
+  [data-row-class*="cols-md-4"] .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3), button:first-child:nth-last-child(4))),
+  [data-row-class*="cols-md-5"] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5))),
+  [data-row-class*="cols-md-6"] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5),button:first-child:nth-last-child(6))),
+  [data-row-class*="cols-md-2"] .carousel__controls:has(button:first-child:nth-last-child(2)) ~ .btn,
+  [data-row-class*="cols-md-3"] .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3))) ~ .btn,
+  [data-row-class*="cols-md-4"] .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3), button:first-child:nth-last-child(4))) ~ .btn,
+  [data-row-class*="cols-md-5"] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5))) ~ .btn,
+  [data-row-class*="cols-md-6"] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5),button:first-child:nth-last-child(6))) ~ .btn {
     display: none;
   }
-
-  .carousel.hide-md-btns .carousel__inner {
-
-    margin-left: 0;
-    margin-right: 0;
-  }
-}
+}
+// #endregion

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

@@ -0,0 +1,120 @@
+@use 'sass:math';
+@use "../_func" as *;
+
+// #region Undefined web components
+:is(*):not(:defined):not(iam-nav):not(iam-pagination):not(iam-carousel) {
+  display: block;
+  padding: rem(24);
+  margin-bottom: rem(24);
+  border-radius: rem(8);
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 80rem;
+}
+
+main > :is(*):not(:defined):not(iam-carousel) {
+
+  padding: var(--container-padding);
+  padding-top: 1rem;
+}
+
+@include media-breakpoint-up(md) {
+      
+  main > :is(*):not(:defined):not(iam-carousel) {
+    max-width: 100%!important;
+    padding-inline: calc(50% - #{rem(math.div(1112,2))});
+  }
+
+  iam-header:not(:defined) {
+    min-height: rem(470);
+  }
+}
+
+:is(iam-notification,iam-card):not(:defined) {
+  box-shadow: var(--card-box-shadow);
+  border-radius: var(--card-border-radius);
+  padding: var(--card-top-padding) var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);
+}
+
+// carousel
+iam-carousel {
+
+  margin-inline: calc(var(--container-padding-x) * -1);
+  margin-bottom: 5rem;
+  overflow: auto;
+  display: block;
+
+  > .row {
+    
+    flex-wrap: nowrap!important;
+    margin-inline-end: 0;
+    padding-inline-start: var(--container-padding-x);
+    padding-inline-end: var(--container-padding-x);
+
+    .col:last-child{
+      padding-inline-end: var(--container-padding-x);
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+
+    margin-inline: calc(-0.5 * $grid-gutter-width);
+
+    > .row {
+        
+      padding-inline: 0;
+      margin-inline: 0;
+
+      .col:last-child{
+        padding-inline-end: calc(0.5 * $grid-gutter-width);
+      }
+    }
+  }
+}
+
+
+
+
+// For extra file
+iam-carousel:defined {
+  
+  overflow: visible;
+}
+iam-carousel > .row .col {
+  scroll-snap-align: start;
+  scroll-margin-left: calc(var(--container-padding-x) - calc(0.5 * $grid-gutter-width));
+}
+
+
+@include media-breakpoint-up(sm) {
+
+  iam-carousel > .row[class*="row-cols-sm-"] > .col{
+    scroll-snap-align: unset;
+  }
+
+  iam-carousel > .row-cols-sm-2 > .col:nth-child(odd),
+  iam-carousel > .row-cols-sm-3 > .col:nth-child(3n+1),
+  iam-carousel > .row-cols-sm-4 > .col:nth-child(4n+1),
+  iam-carousel > .row-cols-sm-5 > .col:nth-child(5n+1),
+  iam-carousel > .row-cols-sm-6 > .col:nth-child(6n+1) {
+    scroll-snap-align: start;
+  }
+}
+
+@include media-breakpoint-up(md) {
+
+  iam-carousel > .row[class*="row-cols-md-"] > .col{
+    scroll-snap-align: unset;
+    margin-left: 0;
+    scroll-margin-left: 0;
+  }
+  
+  iam-carousel > .row-cols-md-2 > .col:nth-child(odd),
+  iam-carousel > .row-cols-md-3 > .col:nth-child(3n+1),
+  iam-carousel > .row-cols-md-4 > .col:nth-child(4n+1),
+  iam-carousel > .row-cols-md-5 > .col:nth-child(5n+1),
+  iam-carousel > .row-cols-md-6 > .col:nth-child(6n+1) {
+    scroll-snap-align: start;
+
+  }
+}

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

@@ -28,10 +28,8 @@ a:has(iam-card) {
   display: block;
 }
 
-@import "../components/card-global.scss";
-@import "../components/nav-global.scss";
 
-:is(iam-card,iam-nav, iam-table) {
+:is(iam-card,iam-nav, iam-table, .iamkey) {
   @import "../_utilities.scss";
 }
 

package/assets/sass/components/fileupload.scss

@@ -57,7 +57,7 @@
 
       background: var(--colour-canvas-2);
       border-color: var(--colour-canvas-2);
-      color: var(--colour-white);
+      color: var(--colour-body);
     }
 
     

package/assets/sass/components/header.scss

@@ -1,74 +1,77 @@
 @use "../_func" as *;
 
-.header-banner {
-  background: linear-gradient(180deg,var(--colour-secondary) 0, var(--colour-info) 100%);
+:host{
+  padding-top: 0!important;
   margin-bottom: rem(32);
-  position: relative;
-  overflow: hidden;
-  max-width: 100%!important;
+  background-color: transparent!important;
+}
 
+.header-banner {
+  
+  padding-top: rem(44);
 
+  max-width: rem(1920);
+  
+  min-height: rem(400);
+  margin-inline: auto;
+  display: block;
 
   @include media-breakpoint-up(md) {
-    min-height: rem(470);
+    padding-top: rem(84);
   }
 
-  > .container {
-    padding-bottom: 0;
-    position: relative;
-  }
+  position: relative;
+  height: auto;
 
-  .breadcrumb {
-    
-    margin-top: rem(24);
-    margin-bottom: -0.5rem;
+  > picture {
+  
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    pointer-events: none;
+    overflow: hidden;
+    min-height: rem(400);
+    max-height: rem(400);
 
-    @include media-breakpoint-up(md) {
+    &:after {
+      content: "";
+      display: block;
       position: absolute;
-      top: 0;
-      left: rem(60);
+      z-index: -1;
+      inset: 0;
+      background: linear-gradient(300deg, rgba(30,190,230,1) 0%, rgba(0,49,60,1) 100%);
+      opacity: 0.85;
     }
-  }
-
-  &__inner {
-    
-    @include reset-colours();
-
-    color: var(--colour-body);
-    background: white;
-    padding: rem(32);
-    margin: rem(30) 0;
-    position: relative;
-    z-index: var(--index-above);
-    
-    @include media-breakpoint-up(md) {
-      max-width: rem(600);
-      margin: rem(112) 0 rem(80) 0;
-      padding: rem(56) rem(64);
-    }
-
-    > *:last-child {
-      padding-bottom: 0;
-      margin-bottom: 0;
-    }
-  }
 
-  picture img {
-    display: none;
-    @include media-breakpoint-up(md) {
-      display: block;
-      position: absolute;
-      top: -0.5%;
-      left: 40%;
-      height: 101%;
-      object-fit: cover;
-      width: 60%;
-      pointer-events: none;
+    img {
+        display: block;
+        position: absolute;
+        z-index: -2;
+        inset: 0;
+        object-fit: cover;
+        object-position: 50% 50%;
+        width: 100%;
+        height: 100%;
     }
   }
 
+  
 }
 
+
+
+
+
+
+
+
+
+
+
+
 // Web component CSS
 ::slotted(.breadcrumb){
   margin-top: rem(24)!important;

package/assets/sass/components/marketing.scss

@@ -0,0 +1,64 @@
+@use "../_func.scss" as *;
+
+
+$isComponent: "true"!default;
+
+
+@mixin iamMarketing(){
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 2rem;
+  max-width: 40rem;
+  min-width: 100%;
+  padding: 2rem;
+  border-radius: 0.5rem;
+  text-align: center;
+  align-items: flex-end;
+  padding-top: 33%;
+}
+
+figure {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+
+    &:after {
+    content: "";
+
+      inset: 0;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    background-image: linear-gradient(15deg, #00313c 0%, #03404f 28.7%, #03404f 31.5%, #044353 60.099999999999994%, #1bb1dc 83.2%, rgba(28, 182, 226, 0.486) 100%);
+    opacity: 0.85;
+    z-index: 1;
+  }
+}
+
+img {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  max-height: auto;
+  z-index: 2;
+  -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
+  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
+  mix-blend-mode: multiply;
+}
+
+:host {
+@include iamMarketing();
+}
+
+@include slotted('*',$isComponent) {
+  position: relative;
+  z-index: 2;
+  text-align: center;
+}
+