@iamproperty/components 7.7.1--beta17 → 7.7.1--beta19

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

@@ -25,20 +25,683 @@
     }
   }
 
-  /* #region Carousel inside of a admin panel */
-  .admin-panel:has(iam-carousel) {
-    --hide-carousel-btns: 1;
+}
+
+
+
+@layer components {
+
+ 
+  iam-carousel {
+    --button-height: 3rem;
+    --marker-height: 1.25rem;
+    --marker-mb: 1rem;
+    padding-inline: 0.5rem;
+    margin-inline: -0.5rem;
+    padding-bottom: calc(1rem + var(--button-height) + var(--marker-height) + var(--marker-mb));
+
+    margin-bottom: var(--carousel-mb, 1.5rem);
+    scroll-padding: 0.5rem;
+    display: grid;
+    grid-auto-flow: column;
+    gap: var(--gap);
+    anchor-scope: all;
+    anchor-name: --carousel;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    scroll-marker-group: before;
+    scroll-behavior: smooth;
+    grid-auto-flow: column;
+    grid-auto-columns: calc((100% / var(--count,1)) - ((var(--gap) * (var(--count,1) - 1)) / var(--count,1)));
   }
 
-  .admin-panel:has(iam-carousel:last-child) {
-    --carousel-mb: 0rem;
+  /* #region items */
+
+  iam-carousel > * {
+
+    container-type: scroll-state;
+    grid-column: auto;
+    min-height: 100%;
+    margin: 0;
+    scroll-snap-align: start;
   }
+  /* #endregion */
 
-  
+  /* #region left and right buttons */
+  iam-carousel {
+    
+    &::scroll-button(*) {
+
+      cursor: pointer;
+      position-anchor: --carousel;
+      background: none;
+      border: none;
+    
+      font-size: 1rem !important;
+      padding: 0 !important;
+      margin-bottom: .5rem;
+      text-align: center;
+      width: var(--button-height);
+      height: var(--button-height);
+      align-content: center;
+      line-height: 1 !important;
+      overflow: hidden;
+      font-size: 1rem;
+      font-family: "Font Awesome 7 Pro" !important;
+      display: none;
+      position: absolute;
+      position-area: block-end center;
+      border-radius: 50%;
+      margin-top: calc((var(--button-height) + var(--marker-height) + var(--marker-mb)) * -1);
+
+    }
+
+    &::scroll-button(left) {
+
+      display: inline-block;
+      //left: anchor(left);
+      content: "\f053" / "Scroll left"!important;
+      margin-left: calc(var(--button-height) * -1) !important;
+    }
+
+    &::scroll-button(right) {
+
+      display: inline-block;
+      //right: anchor(right);
+      content: "\f054" / "Scroll right"!important;
+      margin-right: calc(var(--button-height) * -1) !important;
+    }
+    
+    &::scroll-button(*):disabled {
+      pointer-events: none;
+    }
+
+    &::scroll-button(*):is(:hover,:focus-visible) {
+      outline-offset: 5px;
+      background-color: var(--colour-light);
+      border-color: var(--colour);
+    }
+  }
   /* #endregion */
 
-  /* #region carousel in dialog */
+  /* #region left and right buttons on desktop */
+  iam-carousel-wrapper iam-carousel {
+    
+    @container (min-width: 62em) {
+      
+      --button-height: 0rem;
+
+      &::scroll-button(*) {
+        --button-height: 3rem;
+        margin-top: -1rem;
+      }
+      &::scroll-button(left) {
+        position-area: center inline-start;
+      }
+
+      &::scroll-button(right) {
+        position-area: center inline-end;
+      }
+    }
+  }
+  /* #endregion */
+
+  @container style(--hide-carousel-btns) {
+    iam-carousel {
+    
+      --button-height: 0rem;
+    }
+    iam-carousel::scroll-button(*) {
+    
+      display: none!important;
+    }
+  }
+
+  /* #region markers */
+  iam-carousel {
+    &::scroll-marker-group {
 
+      position: absolute;
+      position-anchor: --carousel;
+      container: marker-group / inline-size;
+      display: grid;
+      place-content: safe center;
+      box-sizing: border-box;
+      border-radius: var(--radius-round);
+      scrollbar-width: none;
+      scroll-behavior: smooth;
+      inline-size: 100%;
+      max-inline-size: 100cqi;
+      overflow-x: auto;
+      scroll-snap-type: x mandatory;
+      overscroll-behavior-x: contain;
+      grid-auto-columns: var(--marker-height); /* Magic number */
+      grid-auto-rows: var(--marker-height); /* Magic number */
+      
+      overflow-x: auto;
+      top: auto;
+      bottom: anchor(bottom);
+      grid-auto-flow: column;
+      justify-items: center;
+      align-items: center;
+      padding-block: 0;
+      margin-bottom: var(--marker-mb);
+      left: anchor(center);
+      transform: translate(-50%, 0);
+    }
+
+    
+    > *::scroll-marker {
+      content: "";
+      scroll-snap-align: start;
+      cursor: pointer;
+      text-decoration: none;
+      interactivity: auto;
+      //display: none;
+      width: .5rem;
+      aspect-ratio: 1;
+      border-radius: 50%;
+      overflow: hidden;
+      background: #a5ecfd; /* Magic colour */
+      cursor: pointer;
+      border: none;
+    }
+
+    > *::scroll-marker:target-current {
+
+      border-color: var(--colour-info);
+      background: var(--colour-info);
+      width: 1rem;
+      height: 1rem;
+      min-height: 1rem;
+      margin-inline: .125rem; /* Magic number */
+    }
+    
+  }
+  /* #endregion */
+
+  /* #region count the number of items and set variables to hide the controls/markers */
+  iam-carousel:has(> *:first-child:last-child) {
+    
+    --hide-buttons: 1;
+    --hide-markers: 1;
+  }
   
+  iam-carousel {
+    
+    @container (min-width: 36em) {
+      &[data-smcols='2']:not(:has(> *:nth-child(3))) {
+
+        --hide-buttons: 1;
+        --hide-markers: 1;
+
+        --button-height: 0rem;
+        --marker-height: 0rem;
+        --marker-mb: 0rem;
+      }
+      &[data-smcols='3']:not(:has(> *:nth-child(4))) {
+
+        --hide-buttons: 1;
+        --hide-markers: 1;
+
+        --button-height: 0rem;
+        --marker-height: 0rem;
+        --marker-mb: 0rem;
+      }
+    }
+
+    @container (min-width: 62em) {
+      &[data-mdcols='2']:not(:has(> *:nth-child(3))) {
+
+        --hide-buttons: 1;
+        --hide-markers: 1;
+
+        --button-height: 0rem;
+        --marker-height: 0rem;
+        --marker-mb: 0rem;
+      }
+      &[data-mdcols='3']:not(:has(> *:nth-child(4))) {
+
+        --hide-buttons: 1;
+        --hide-markers: 1;
+
+        --button-height: 0rem;
+        --marker-height: 0rem;
+        --marker-mb: 0rem;
+      }
+    }
+  }
+  /* #endregion */
+
+  /* #region change the item count via queries */
+  iam-carousel {
+    
+    @container (min-width: 36em) {
+      &[data-smcols='2'] {
+
+        --count: 2;
+      }
+      &[data-smcols='3'] {
+
+        --count: 3;
+      }
+    }
+
+    @container (min-width: 64em) {
+      &[data-mdcols='2'] {
+
+        --count: 2;
+      }
+      &[data-mdcols='3'] {
+
+        --count: 3;
+      }
+    }
+  }
+  /* #endregion */
+
+  /* #region carousel responsive to the count number variable */
+  iam-carousel {
+
+    > * {
+
+      @container style(--count) {
+
+        scroll-snap-align: unset;
+        
+        &::scroll-marker{
+
+          display: none;
+        }
+      }
+
+      @container not scroll-state(snapped: x) {
+        
+        --opacity: 0;
+      }
+      
+      @container style(--count: 2) {
+
+        &:nth-child(2n - 1) {
+          scroll-snap-align: start;
+          scroll-snap-stop: always;
+        }
+
+        &:nth-child(2n - 1)::scroll-marker{
+
+          display: block;
+        }
+      }
+
+      @container style(--count: 3) {
+
+        &:nth-child(3n - 2) {
+          scroll-snap-align: start;
+          scroll-snap-stop: always;
+        }
+
+        &:nth-child(3n - 2)::scroll-marker{
+
+          display: block;
+        }
+      }
+    } 
+  }
+
+  /* #endregion */
+
+  /* #region hide controls/markers */
+  iam-carousel {
+    
+    @container style(--hide-buttons) {
+
+      --button-height: 0rem;
+      
+      &::scroll-button(*) {
+        display: none;
+      }
+    }
+
+    @container style(--hide-markers) {
+
+      --marker-height: 0rem;
+      --marker-mb: 0rem;
+
+      &::scroll-marker-group {
+        display: none;
+      }
+    }
+  }
+  /* #endregion */
+
+  /* #region carousel inside of admin panel */
+  .admin-panel {
+    
+    --hide-buttons: 1;
+
+    &:has(iam-carousel){
+      
+      container-type: inline-size;
+    }
+
+    iam-carousel {
+        
+      --button-height: 0rem;
+      --marker-mb: 0rem;
+      margin-bottom: 0;
+    }
+  }
+  /* #endregion */
+
+
+  /* #region progress bar */
+  .carousel__controls {
+    display: none;
+    position: absolute;
+    position-anchor: --carousel;
+
+    top: auto;
+    left: anchor(left);
+    right: anchor(right);
+    min-height: 0;
+    width: auto;
+    bottom: anchor(bottom);
+    z-index: 99;
+  }
+
+  .carousel__progress {
+    margin-inline: auto;
+    text-align: center;
+    display: none;
+    padding-bottom: 0;
+    
+    input[type='range'] {
+      --track-size: 0.5rem;
+      --track-colour: #a5ecfd;
+      --thumb-colour: var(--colour-info);
+      --thumb-size: 1rem;
+      --thumb-size-outline: 0;
+      width: 90%;
+      max-width: 10.75rem; /* 172 */
+
+      background: transparent;
+      cursor: pointer;
+      margin: 0;
+      height: 1rem;
+      border-radius: 50%;
+      accent-color: var(--thumb-colour);
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
+    /*  Track Styles */
+    input[type='range']::-webkit-slider-runnable-track {
+      background: var(--track-colour);
+      height: var(--track-size);
+      border-radius: 0.5625rem; /* 9 */
+    }
+
+    input[type='range']::-moz-range-track {
+      background: var(--track-colour);
+      height: var(--track-size);
+      border-radius: 0.5625rem; /* 9 */
+    }
+
+    /*  Extended track functionality */
+    input[type='range']::-webkit-slider-runnable-track {
+      background: linear-gradient(
+        to right,
+        var(--track-colour),
+        var(--track-colour) var(--start-percent, 0%),
+        var(--thumb-colour) var(--start-percent, 0%),
+        var(--thumb-colour) calc(var(--percent, 0%)),
+        var(--track-colour) calc(var(--percent, 0%))
+      );
+    }
+
+    input[type='range']::-moz-range-track {
+      background: linear-gradient(
+        to right,
+        var(--track-colour),
+        var(--track-colour) var(--start-percent, 0%),
+        var(--thumb-colour) var(--start-percent, 0%),
+        var(--thumb-colour) calc(var(--percent, 0%)),
+        var(--track-colour) calc(var(--percent, 0%))
+      );
+    }
+
+    /*  Thumb Styles */
+    input[type='range']::-webkit-slider-thumb {
+      -webkit-appearance: none; /* Override default look */
+      appearance: none;
+      margin-top: -0.25rem; /* Centers thumb on the track */
+      background-color: var(--thumb-colour);
+      height: var(--thumb-size);
+      width: var(--thumb-size);
+      border-radius: 50%;
+      position: relative;
+      z-index: 99;
+      pointer-events: all;
+    }
+
+    input[type='range']::-moz-range-thumb {
+      border: none; /*Removes extra border that FF applies*/
+      background-color: var(--thumb-colour); /*Removes default border-radius that FF applies*/
+      height: var(--thumb-size);
+      width: var(--thumb-size);
+      border-radius: 50%;
+      position: relative;
+      z-index: 99;
+      pointer-events: all;
+    }
+
+    /*  Focus Styles */
+    input[type='range']:focus {
+      outline: none;
+    }
+
+    input[type='range']:hover::-webkit-slider-thumb,
+    input[type='range']:focus::-webkit-slider-thumb {
+      outline: var(--thumb-size-outline) solid var(--thumb-colour);
+    }
+
+    input[type='range']:active::-webkit-slider-thumb {
+      outline: var(--thumb-size-outline) solid var(--thumb-colour);
+    }
+
+    input[type='range']:hover::-moz-range-thumb,
+    input[type='range']:focus::-moz-range-thumb {
+      outline: var(--thumb-size-outline) solid var(--thumb-colour);
+    }
+    input[type='range']:focus::-moz-range-thumb {
+      outline: var(--thumb-size-outline) solid var(--thumb-colour);
+    }
+  }
+  /* #endregion */
+  @supports not selector(::scroll-marker-group) {
+    
+    iam-carousel {
+      --button-height: 0rem;
+      --marker-height: 0rem;
+      --marker-mb: 0rem;
+    }
+
+    .carousel__controls {
+      display: block;
+    }
+
+    .carousel__progress-xs {
+      display: block;
+    }
+
+    @container (min-width: 36em) {
+
+      .carousel__progress-xs {
+        display: none;
+      }
+      .carousel__progress-sm {
+        display: block;
+      }
+    }
+
+    @container (min-width: 62em) {
+
+      .carousel__progress-sm {
+        display: none;
+      }
+      .carousel__progress-md {
+        display: block;
+      }
+    }
+
+  }
+
+  @supports selector(::scroll-marker-group) {
+    
+
+    @container (max-width: 36em) {
+      iam-carousel:has(> *:nth-child(5)){
+        
+        --button-height: 0rem;
+        
+        --hide-buttons: 1;
+        --hide-markers: 1;
+        
+        .carousel__controls {
+          display: block;
+        }
+      }
+      iam-carousel:has(> *:nth-child(5)) + .carousel__progress {
+        display: block;
+      }
+    }
+
+    @container (min-width: 36em) {
+
+      .carousel__progress {
+        display: none;
+      }
+
+      iam-carousel[data-smcols="2"]:has(> *:nth-child(10)){
+        
+        --button-height: 0rem;
+        
+        --hide-buttons: 1;
+        --hide-markers: 1;
+
+        .carousel__controls {
+          display: block;
+        }
+      }
+      iam-carousel[data-smcols="2"]:has(> *:nth-child(10)) .carousel__progress-sm {
+        display: block;
+      }
+
+      iam-carousel[data-smcols="3"]:has(> *:nth-child(15)){
+        
+        --button-height: 0rem;
+        
+        --hide-buttons: 1;
+        --hide-markers: 1;
+
+        .carousel__controls {
+          display: block;
+        }
+      }
+      
+      iam-carousel[data-smcols="3"]:has(> *:nth-child(15)) .carousel__progress-sm {
+        display: block;
+      }
+    }
+
+    @container (min-width: 62em) {
+
+      .carousel__progress-sm {
+        display: none;
+      }
+
+      iam-carousel[data-mdcols="2"]:has(> *:nth-child(10)){
+        
+        --button-height: 0rem;
+        
+        --hide-buttons: 1;
+        --hide-markers: 1;
+
+        .carousel__controls {
+          display: block;
+        }
+      }
+      
+      iam-carousel[data-mdcols="2"]:has(> *:nth-child(10)) .carousel__progress-md {
+        display: block;
+      }
+
+      iam-carousel[data-mdcols="3"]:has(> *:nth-child(15)){
+        
+        --button-height: 0rem;
+        
+        --hide-buttons: 1;
+        --hide-markers: 1;
+
+        .carousel__controls {
+          display: block;
+        }
+      }
+      
+      iam-carousel[data-mdcols="3"]:has(> *:nth-child(15)) .carousel__progress-md {
+        display: block;
+      }
+    }
+
+  }
+
+
+  /* #region thumbnails */
+  iam-carousel.thumbnails {
+    
+    --hide-buttons: 1;
+    --hide-markers: 1;        
+    
+    .carousel__controls {
+      display: block;
+    }
+  }
+  .carousel__pips {
+    display: flex !important;
+    flex-wrap: nowrap;
+    max-width: 100%;
+    overflow: hidden;
+    height: 5rem;
+    overflow-x: auto;
+
+    button {
+      padding: 0;
+      margin: 0 0.2rem 0.4rem;
+
+      width: 6rem;
+      height: 4rem;
+      aspect-ratio: 3 / 2;
+
+      border-radius: 0;
+      position: relative;
+      border-radius: 0.25rem;
+
+      img {
+        position: absolute;
+        inset: 0;
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        margin: 0;
+      }
+
+      &[aria-current] {
+        outline: 2px solid var(--colour-info);
+      }
+    }
+  }
+
   /* #endregion */
 }

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

@@ -140,6 +140,11 @@ slot[name="badge"] {
   max-width: 4.75rem!important; /* TODO: magic number 1 column */
 }
 
+::slotted(img.panel-img--lg[slot="panel"]) {
+  
+  max-width: 14.25rem!important; /* TODO: magic number 2 column */
+}
+
 :host(.has-panel) slot[name="panel"]{
   container-type: inline-size;
     anchor-name: --anchor;