@iamproperty/components 5.1.0-beta6 → 5.1.0-beta8

package/assets/sass/_corefiles.scss

@@ -31,6 +31,7 @@
 
 @include layer('templates') {
   @import "templates/form.scss";
+  @import "templates/auth.scss";
 }
 
 @include layer('utilities') {

package/assets/sass/_elements.scss

@@ -15,4 +15,4 @@
   
 @import "elements/forms.scss";
 
-@import "../bootstrap/scss/_badge.scss";
+@import "elements/badge.scss";

package/assets/sass/_functions/mixins.scss

@@ -211,3 +211,19 @@
     --colour-#{$color}: #{$value};
   }
 }
+
+@mixin slotted($el, $isComponent:"true"){
+  
+  @if $isComponent == "true" {
+    ::slotted(#{$el}) {
+    
+      @content;
+    }
+  }
+  @else {
+    #{$el} {
+    
+      @content;
+    }
+  }
+}

package/assets/sass/_functions/utilities.scss

@@ -201,23 +201,6 @@ $utilities: map-merge(
 );
 // #endregion
 
-// #region Max height classes
-$utilities: map-merge(
-  $utilities,
-  (
-    "max-heights": (
-      property: max-height,
-      class: mh,
-      values: (
-        "sm": #{rem(200)},
-        "md": #{rem(400)},
-        "lg": #{rem(600)}
-      )
-    )
-  )
-);
-// #endregion
-
 // #region Max height classes
 $utilities: map-merge(
   $utilities,

package/assets/sass/_functions/variables.scss

@@ -39,6 +39,7 @@ $vars: map-merge((
   "--container-padding-top": 0,
   "--container-padding-bottom": #{rem(16)},
   "--container-padding-x": #{rem($container-padding-x)},
+  "--container-padding-x-sm": #{rem($container-padding-x-sm)},
   "--container-padding-x-md": #{rem($container-padding-x-md)},
   "--container-padding": $container-padding,
   "--container-padding-sm": $container-padding-sm,

package/assets/sass/components/card.scss

@@ -17,8 +17,8 @@
   overflow: hidden;
   z-index: 0;
   background: var(--colour-canvas-2);
-  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
-  outline-offset: -1px;
+  outline: 2px solid var(--colour-canvas-2);
+  outline-offset: -2px;
 
   &.border-0 {
     box-shadow: none;
@@ -131,7 +131,7 @@
   vertical-align: middle!important;
 }
 
-::slotted(span){
+::slotted(span:not(.badge)){
   display: block!important;
   font-weight: normal!important;
   padding-top: rem(24)!important;
@@ -139,6 +139,26 @@
 }
 // #endregion
 
+// #region card bages
+.card__badges {
+  position: absolute;
+  top: 0;
+  right: 0.25rem;
+  padding: 0.25rem;
+  z-index: 9;
+  text-align: right;
+  width: 1;
+}
+.card__head .card__badges {
+  
+  top: auto;
+  bottom: 0;
+  text-align: left;
+  left: 0.25rem;
+  right: auto;
+}
+// #endregion
+
 // #region border left
 .card[class*="colour-"],
 .card--filter {

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

@@ -2,7 +2,7 @@
 @use "../_func" as *;
 
 // #region Undefined web components
-:is(*):not(:defined):not(iam-nav):not(iam-pagination) {
+:is(*):not(:defined):not(iam-nav):not(iam-pagination):not(iam-carousel) {
   display: block;
   padding: rem(24);
   margin-bottom: rem(24);
@@ -12,7 +12,7 @@
   max-width: 80rem;
 }
 
-main > :is(*):not(:defined) {
+main > :is(*):not(:defined):not(iam-carousel) {
 
   padding: var(--container-padding);
   padding-top: 1rem;
@@ -20,7 +20,7 @@ main > :is(*):not(:defined) {
 
 @include media-breakpoint-up(md) {
       
-  main > :is(*):not(:defined) {
+  main > :is(*):not(:defined):not(iam-carousel) {
     max-width: 100%!important;
     padding-inline: calc(50% - #{rem(math.div(1112,2))});
   }
@@ -34,4 +34,87 @@ main > :is(*):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/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);
     }