@iamproperty/components 6.0.0 → 6.1.0--beta2

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

@@ -0,0 +1,605 @@
+@use "../_func" as *;
+@use "../elements/buttons.scss" as *;
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+// #region default carousel
+
+:host {
+
+  display: block;
+  overflow: visible;
+  container-type: inline-size; 
+}
+
+.carousel {
+
+  margin-inline: calc(var(--carousel-spacing,1.5rem) * -1);
+  margin-bottom: 2rem;
+  display: block;
+  overflow: visible;
+
+  .carousel__wrapper {
+
+    position: relative;
+    overflow-x: clip;
+  }
+
+  .carousel__inner {
+
+    --gutter-x: #{$grid-gutter-width};
+    overflow-x: auto;
+    padding-bottom: 1rem;
+    scroll-snap-type: x mandatory;
+  }
+
+  .carousel__content {
+    display: flex;
+    flex-wrap: nowrap!important;
+    margin-inline-end: 0;
+    padding-inline-start: var(--carousel-spacing,1.5rem);
+    padding-inline-end: var(--carousel-spacing,1.5rem);
+
+    margin-right: calc(-.5* var(--gutter-x));
+    margin-left: calc(-.5* var(--gutter-x));
+  }
+
+  .col > *:last-child {
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+}
+
+::slotted(div) {
+  scroll-snap-align: start;
+  scroll-margin-left: calc(var(--carousel-spacing,1.5rem) - .5rem);
+
+  flex-shrink: 0;
+  width: calc(100% + var(--last-item-extra, 0px));
+  
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+  margin-top: var(--gutter-y);
+}
+
+::slotted(div:last-child) {
+  
+  padding-inline-end: 1.5rem;
+  --last-item-extra: 1rem;
+}
+
+
+@container (min-width: 36em) {
+
+  .carousel {
+
+    margin-inline: calc(var(--carousel-spacing,2.5rem) * -1);
+
+    .carousel__content {
+
+      padding-inline-start: var(--carousel-spacing,2.5rem);
+      padding-inline-end: var(--carousel-spacing,2.5rem);    
+    }
+  }
+
+  :host([data-smcols]) ::slotted(div){
+    scroll-snap-align: unset;
+    flex: 0 0 auto;
+  }
+
+  :host([data-smcols="2"]) ::slotted(div){
+    width: calc(50% + var(--last-item-extra, 0px));
+  }
+
+  :host([data-smcols="3"]) ::slotted(div){
+    width: calc(33.3333333333% + var(--last-item-extra, 0px));
+  }
+  :host([data-smcols="4"]) ::slotted(div){
+    width: calc(25% + var(--last-item-extra, 0px));
+  }
+
+  :host([data-smcols="2"]) ::slotted(div:nth-child(odd)),
+  :host([data-smcols="3"]) ::slotted(div:nth-child(3n+1)),
+  :host([data-smcols="4"]) ::slotted(div:nth-child(4n+1)){
+    scroll-snap-align: start;
+  }
+
+  ::slotted(div) {
+    scroll-margin-left: calc(var(--carousel-spacing,2.5rem) - .5rem);
+  }
+
+  ::slotted(div:last-child) {
+    
+    padding-inline-end: 2.5rem;
+    --last-item-extra: 2rem;
+  }
+}
+
+@container (min-width: 62em) {
+
+  .carousel {
+    margin-inline: 0;
+    position: relative;
+  }
+  .carousel__wrapper {
+    
+    overflow: hidden;
+
+    margin-inline: calc(-0.5 * $grid-gutter-width);   
+  }
+  .carousel__inner {
+    
+    
+  }
+  .carousel__content {
+      
+    padding-inline: 0!important;
+    margin-inline: 0!important;
+  }
+
+  ::slotted(div) {
+    
+    margin-left: 0;
+    scroll-margin-left: 0;
+  }
+
+  ::slotted(div:last-child) {
+    padding-inline-end: calc(0.5 * $grid-gutter-width);
+    --last-item-extra: 0px;
+  }
+
+  
+  :host([data-mdcols]) ::slotted(div){
+    scroll-snap-align: unset;
+    flex: 0 0 auto;
+  }
+
+  :host([data-mdcols="2"]) ::slotted(div){
+    width: calc(50% + var(--last-item-extra, 0px));
+  }
+
+  :host([data-mdcols="3"]) ::slotted(div){
+    width: calc(33.3333333333% + var(--last-item-extra, 0px));
+  }
+  :host([data-mdcols="4"]) ::slotted(div){
+    width: calc(25% + var(--last-item-extra, 0px));
+  }
+  :host([data-mdcols="5"]) ::slotted(div){
+    width: calc(20% + var(--last-item-extra, 0px));
+  }
+  :host([data-mdcols="6"]) ::slotted(div){
+    width: calc(16.6666666667% + var(--last-item-extra, 0px));
+  }
+
+  :host([data-mdcols="2"]) ::slotted(div:nth-child(odd)),
+  :host([data-mdcols="3"]) ::slotted(div:nth-child(3n+1)),
+  :host([data-mdcols="4"]) ::slotted(div:nth-child(4n+1)),
+  :host([data-mdcols="5"]) ::slotted(div:nth-child(5n+1)),
+  :host([data-mdcols="6"]) ::slotted(div:nth-child(6n+1)){
+    scroll-snap-align: start;
+  }
+}
+
+
+// #endregion
+
+// #region Remove the scrollbar
+.carousel__inner {
+  // FireFox
+  scrollbar-width: none;
+  // IE10+
+  -ms-overflow-style: none;
+}
+
+.carousel__inner::-webkit-scrollbar {
+  // Chrome, Safari, Edge
+  display: none;
+}
+// #endregion
+
+// #region Direction button
+
+.carousel__btns {
+  text-align: center;
+  padding-bottom: 0.5rem;
+}
+
+.btn-next, 
+.btn-prev {
+
+  margin: 0!important;
+  
+  &:after {
+    content: "";
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    background: currentColor;
+    mask-image: escape-svg($accordion-button-icon);
+    mask-size: 50%;
+    mask-repeat: no-repeat;
+    mask-position: 50% 60%;
+    -webkit-mask-image: escape-svg($accordion-button-icon);
+    -webkit-mask-size: 50%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 55% 50%;
+    transform: rotate(0deg);
+  }
+
+}
+
+.btn-prev {
+
+  &:after {
+
+    transform: rotate(180deg);
+  }
+}
+
+
+@container (min-width: 62em) {
+
+  .carousel__btns {
+    padding-bottom: 0;
+  }
+  .btn-prev {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    margin: -2rem 0 0 -3rem!important;
+  }
+  .btn-next {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    margin: -2rem -3rem 0 0!important;
+  }
+}
+
+// #endregion
+
+// #region carousel controls/pips
+.carousel .carousel__controls {
+  overflow: hidden;
+  margin-inline: auto;
+  margin-bottom: 1rem;
+  text-align: center;
+  max-width: 30rem;
+  
+
+  @container (min-width: 36em) {
+    width: 100%;
+  }
+
+  button {
+    padding: 0;
+    margin: 0 0.2rem 0.2rem;
+    border: none;
+  }
+
+  button {
+    width: rem(8);
+    height: rem(8);
+    min-height: rem(8);
+    border-radius: 50%;
+    text-indent: -50rem;
+    overflow: hidden;
+    background: #A5ECFD;
+    margin-inline: rem(6);
+    cursor: pointer;
+    border: none;
+
+    &:hover {
+      background-color: var(--colour-info);
+    }
+
+    &:before {
+      display: none;
+    }
+  }
+
+  button:first-child:last-child {
+    display: none;
+  }
+}
+
+.carousel__controls > button[aria-current] {
+  --colour-active-thumbnail: var(--colour-info); 
+  border-color: var(--colour-active-thumbnail);
+  background: var(--colour-info);
+
+  width: rem(16);
+  height: rem(16);
+  min-height: rem(16);
+  margin-inline: rem(2);
+
+  &:hover {
+      background: var(--colour-info);
+  }
+}
+// #endregion
+
+// #region progress bar
+.carousel__progress {
+
+  text-align: center;
+  margin-bottom: 1rem;
+  display: none;
+}
+
+
+input[type="range"] {
+
+  --track-size: #{rem(8)};
+  --track-colour: #A5ECFD;
+  --thumb-colour: var(--colour-info);
+  --thumb-size: #{rem(16)};
+  --thumb-size-outline: #{rem(0)};
+  width: 90%;
+  max-width: rem(172);
+
+  background: transparent;
+  cursor: pointer;
+  margin: 0;
+  height: rem(16);
+  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: rem(9);
+}
+
+input[type="range"]::-moz-range-track {
+  background: var(--track-colour);
+  height: var(--track-size);
+  border-radius: rem(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: rem(-4); /* 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
+
+// #region Hide buttons and pips
+.carousel__btns:has(~ .carousel__controls button:first-child:nth-child(1):last-child){
+  display: none;
+}
+
+.carousel__controls:has(button:nth-child(5)){
+  display: none;
+}
+.carousel__controls:has(button:nth-child(5)) ~ .carousel__progress{
+  display: block;
+}
+
+@container (min-width: 36em) {
+
+  :host([data-smcols="2"]) .carousel__controls > button:not(:nth-child(odd)),
+  :host([data-smcols="3"]) .carousel__controls > button:not(:nth-child(3n+1)),
+  :host([data-smcols="4"]) .carousel__controls > button:not(:nth-child(4n+1)) {
+    display: none;
+  }
+
+  // Make sure that we dont just have one pip showing
+  :host([data-smcols="2"]) .carousel__controls:has(button:first-child:nth-last-child(2)),
+  :host([data-smcols="3"]) .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3))),
+  :host([data-smcols="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))),
+  :host([data-smcols="2"]) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
+  :host([data-smcols="3"]) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)), :host([data-smcols="3"]) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(3)),
+  :host([data-smcols="4"]) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)), :host([data-smcols="4"]) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(3)), :host([data-smcols="4"]) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(4)) {
+    display: none;
+  }
+
+  // Show slider
+  :host([data-smcols]) .carousel__controls{
+    display: block;
+  }
+  :host([data-smcols]) .carousel__controls ~ .carousel__progress{
+    display: none;
+  }
+  
+  :host([data-smcols="2"]) .carousel__controls:has(button:nth-child(10)),
+  :host([data-smcols="3"]) .carousel__controls:has(button:nth-child(15)),
+  :host([data-smcols="4"]) .carousel__controls:has(button:nth-child(20)){
+    display: none;
+  }
+
+  :host([data-smcols="2"]) .carousel__controls:has(button:nth-child(10)) ~ .carousel__progress,
+  :host([data-smcols="3"]) .carousel__controls:has(button:nth-child(15)) ~ .carousel__progress,
+  :host([data-smcols="4"]) .carousel__controls:has(button:nth-child(20)) ~ .carousel__progress{
+    display: block;
+  }
+}
+
+@container (min-width: 62em) {
+
+  :host([data-mdcols]) .carousel__controls > button {
+    display: inline-block!important;
+  }
+  
+  :host([data-mdcols]) .carousel__controls {
+    display: block!important;
+  }
+
+  :host([data-mdcols="2"]) .carousel__controls > button:not(:nth-child(odd)),
+  :host([data-mdcols="3"]) .carousel__controls > button:not(:nth-child(3n+1)),
+  :host([data-mdcols="4"]) .carousel__controls > button:not(:nth-child(4n+1)),
+  :host([data-mdcols="5"]) .carousel__controls > button:not(:nth-child(5n+1)),
+  :host([data-mdcols="6"]) .carousel__controls > button:not(:nth-child(6n+1)) {
+    display: none!important;
+  }
+
+  // Make sure that we dont just have one pip showing
+  :host([data-mdcols="2"]) .carousel__controls:has(button:first-child:nth-last-child(2)),
+  :host([data-mdcols="3"]) .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3))),
+  :host([data-mdcols="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))),
+  :host([data-mdcols="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))),
+  :host([data-mdcols="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))),
+  :host([data-mdcols="2"]) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
+  :host([data-mdcols="3"]) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)), :host([data-mdcols="3"]) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(3)),
+  :host([data-mdcols="4"]) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)), :host([data-mdcols="4"]) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(3)), :host([data-mdcols="4"]) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(4)) 
+  :host([data-mdcols="5"]) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)), :host([data-mdcols="5"]) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(3)), :host([data-mdcols="5"]) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(4)), :host([data-mdcols="5"]) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(5)),
+  :host([data-mdcols="6"]) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)), :host([data-mdcols="6"]) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(3)), :host([data-mdcols="6"]) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(4)), :host([data-mdcols="6"]) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(5)), :host([data-mdcols="6"]) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(6))
+  {
+  
+  display: none!important;
+  }
+
+  // Show slider
+  :host([data-mdcols]) .carousel__controls{
+    display: block!important;
+  }
+  :host([data-mdcols]) .carousel__controls ~ .carousel__progress{
+    display: none!important;
+  }
+  
+  :host([data-mdcols="2"]) .carousel__controls:has(button:nth-child(10)),
+  :host([data-mdcols="3"]) .carousel__controls:has(button:nth-child(15)),
+  :host([data-mdcols="4"]) .carousel__controls:has(button:nth-child(20)),
+  :host([data-mdcols="5"]) .carousel__controls:has(button:nth-child(25)),
+  :host([data-mdcols="6"]) .carousel__controls:has(button:nth-child(30)){
+    display: none!important;
+  }
+
+  :host([data-mdcols="2"]) .carousel__controls:has(button:nth-child(10)) ~ .carousel__progress,
+  :host([data-mdcols="3"]) .carousel__controls:has(button:nth-child(15)) ~ .carousel__progress,
+  :host([data-mdcols="4"]) .carousel__controls:has(button:nth-child(20)) ~ .carousel__progress,
+  :host([data-mdcols="5"]) .carousel__controls:has(button:nth-child(25)) ~ .carousel__progress,
+  :host([data-mdcols="6"]) .carousel__controls:has(button:nth-child(30)) ~ .carousel__progress{
+    display: block!important;
+  }
+}
+// #endregion
+
+// #region thumbnails 
+:host(.thumbnails) .carousel__controls {
+  display: flex!important;
+  flex-wrap: wrap;
+  max-width: 100%;
+  overflow: visible;
+
+  button {
+    padding: 0;
+    margin: 0 0.2rem 0.4rem;
+
+    width: 6rem;
+    height: auto;
+    aspect-ratio: var(--carousel-image-aspect-ratio,3 / 2);
+
+    border-radius: 0;
+    position: relative;
+    border-radius: rem(4);
+
+    img {
+      position: absolute;
+      inset: 0;
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+      margin: 0;
+    }
+    
+    &[aria-current] {
+      outline: 2px solid var(--colour-info);
+    }
+  }
+}
+
+:host(.thumbnails) .carousel {
+
+  .carousel__btns {
+    padding-bottom: .5rem;
+  }
+
+  .btn-next, 
+  .btn-prev {
+    
+    position: relative;
+    margin: 0!important;
+  }
+
+  .carousel__progress {
+    display: none!important;
+  }
+}
+// #endregion
+
+// #region Turn carousel slide into image holder
+::slotted(div.image__wrapper){
+  width: 100%;
+  aspect-ratio: var(--carousel-image-aspect-ratio,3 / 2);
+  position: relative;
+}
+// #endregion

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

@@ -0,0 +1,84 @@
+@use "../_func.scss" as *;
+
+iam-carousel:defined {
+
+  > div > *:last-child {
+    margin-bottom: 0!important;
+    padding-bottom: 0!important;
+  }
+}
+
+// Preload
+iam-carousel:not(:defined) {
+  
+  display: flex;
+  flex-wrap: nowrap;
+  overflow: auto;
+  margin-block-end: 2rem;    
+  overflow: auto;
+
+  & > * {
+    width: 100%;
+    display: block;
+    flex: 0 0 100%;
+    padding-inline-end: 1rem;
+  }
+}
+
+// #region Carousel inside of a admin panel
+.admin-panel:has(iam-carousel){
+
+  container-type: inline-size; 
+}
+
+.admin-panel:has(iam-carousel:last-child) iam-carousel::part(carousel) {
+  margin-bottom: -1.5rem;
+}
+
+@container (min-width: 62em) {
+  .admin-panel iam-carousel {
+
+    --carousel-spacing: 1.5rem;
+    margin-inline: -1.5rem;
+
+    & > div {
+      scroll-margin-left: 1.5rem;
+      --last-item-extra: -1.5rem;
+    }
+
+    & > div:first-child {
+      margin-left: 1.5rem;
+    }
+    & > div:last-child {
+      padding-inline-end: 2rem;
+      --last-item-extra: 1.5rem;
+    }
+  }
+
+}
+// #endregion
+
+// #region carousel in dialog 
+
+dialog:has(iam-carousel){
+
+  container-type: inline-size; 
+  --carousel-spacing: 2rem;
+
+  @include media-breakpoint-up(sm) {
+    min-width: rem(600);
+    max-width: rem(600);
+  }
+}
+
+dialog:has(iam-carousel:last-child){
+  iam-carousel::part(carousel) {
+    margin-bottom: 0!important;
+  }
+
+  iam-carousel::part(controls) {
+    margin-bottom: 0!important;
+    max-width: calc(100% - 4rem);
+  }
+}
+// #endregion

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

@@ -1,3 +1,6 @@
+@use "sass:math";
+@use "../_func" as *;
+
 iam-barchart {
 
   --chart-bar-alignment: left;

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

@@ -483,10 +483,12 @@ $chart-height-lg: #{rem(200)}!default;
         position: relative;
         padding: 0;
         background: var(--chart-colour);
-
-        @media screen and (prefers-color-scheme: dark) {
+        
+        & {
+          @media screen and (prefers-color-scheme: dark) {
           
-          background: color-mix(in oklab, var(--chart-colour), black 20%);
+            background: color-mix(in oklab, var(--chart-colour), black 20%);
+          }
         }
 
         border-top-right-radius: 4px;