@iamproperty/components 5.0.0 → 5.1.0-beta10

package/assets/sass/components/{nav-global.scss → nav.global.scss}

@@ -28,6 +28,7 @@ nav:has(iam-nav) {
 
   min-height: #{rem(96)};
   display: block;
+  position: relative;
 
   iam-nav {
     position: absolute;
@@ -554,7 +555,7 @@ iam-nav details {
 
     &.search-open {
 
-      > *:not([slot="logo"]):not([slot="secondary"]) {
+      > *:not([slot="logo"]):not([slot="secondary"]):not([slot="search"]) {
         display: none!important;
       }
     }

package/assets/sass/components/nav.scss

@@ -121,7 +121,6 @@
         display: inline-block;
         font-size: 1.2rem;
         margin-right: 1rem!important;
-        line-height: 1em;
       }
 
       i[class*=fa-] + i[class*=fa-] {
@@ -615,6 +614,13 @@
   }
 }
 
+::slotted(.nav--menu[data-open-title]){
+
+  &:before {
+    content: attr(data-open-title);
+  }
+}
+
 ::slotted(.nav--menu.open) {
   left: calc(100% - (#{rem(375)} - var(--scrollbar-width)) );
   -webkit-box-shadow: 0 6px 12px 0px rgba(0,0,0,0.2);

package/assets/sass/components/notification.global.scss

@@ -0,0 +1,41 @@
+@use "../_func" as *;
+
+.container.notification__holder {
+
+  position: fixed;
+  top: var(--nav-height);
+  left: 50%;
+  transform: translate(-50%,0);
+  bottom: 0;
+  z-index: 999999;
+  pointer-events: none;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  display: flex;
+  margin: 0;
+  width: 100%;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  flex-direction: column;
+  align-content: flex-end;
+  align-items: flex-end;
+
+  :is(.iam-notification, iam-notification) {
+    pointer-events: all;
+    margin: 0.5rem 0 0.5rem 0;
+  }
+
+  &.bottom {
+    flex-direction: column-reverse;
+  }
+
+  &.left {
+    align-content: flex-start;
+    align-items: flex-start;
+  }
+
+  &.middle {
+    align-content: space-around;
+    align-items: center;
+  }
+}

package/assets/sass/components/pagination.scss

@@ -41,6 +41,10 @@
     padding-left: rem(16);
     font-weight: bold;
   }
+
+  div:has(> select){
+    margin-bottom: 0;
+  }
 }
 
 .page-jump {

package/assets/sass/components/slider.scss

@@ -0,0 +1,121 @@
+@use "../_func" as *;
+
+.row {
+  align-items: center;
+}
+
+:is(.min, .max) {
+
+  max-width: fit-content;
+  line-height: 2rem;
+}
+
+.sliders {
+  position: relative;
+  padding: 0;
+}
+
+:host {
+  max-width: $input-max-width;
+  display: block;
+}
+
+// Track
+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) var(--percent, 0%), var(--track-colour) 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) var(--percent, 0%), var(--track-colour) var(--percent, 0%));
+}
+
+
+// Two input fields
+input[type="range"] + input[type="range"] {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 50%;
+}
+
+input[type="range"] + input[type="range"]::-webkit-slider-runnable-track {
+  
+  background: transparent;
+  pointer-events: none;
+  width: 200%;
+  margin-left: -100%;
+}
+
+@supports (-moz-appearance:none) {
+  input[type="range"] + input[type="range"] {
+    left: 0;
+    width: 100%;
+
+  
+  pointer-events: none;
+}
+
+} 
+
+input[type="range"] + input[type="range"]::-moz-range-track {
+  background: transparent;
+  pointer-events: none;
+}
+
+
+.input__wrapper {
+  display: flex;
+  
+  justify-content: flex-end;
+  --max-width: #{rem(100)};
+  --padding-top: 0.75rem;
+
+
+  > span {
+    display: none;
+  }
+
+  &[data-elements="2"]{
+
+    justify-content: space-between;
+    --max-width: calc(50% - #{rem(48)});
+    --padding-top: 2rem;
+    position: relative;
+
+    &:before {
+      content: "";
+      position: absolute;
+      width: rem(64);
+      height: 2px;
+      top: calc(50% - 1px);
+      left: calc(50% - #{rem(32)});
+      background-color: var(--colour-border);
+    }
+
+    span {
+      display: block;
+      position: absolute;
+      top: 0.5rem;
+      left: 1rem;
+      color: #9D9D9D;
+      font-size: 1rem;
+    }
+
+    span + span {
+      left: calc(50% + #{rem(64)});
+    }
+  
+  }
+}
+
+::slotted(input){
+  margin-top: 0!important;
+  padding-top: var(--padding-top)!important;
+  max-width: var(--max-width)!important;
+  -webkit-appearance: none!important;
+  appearance: none!important;
+  min-height: auto!important;
+  max-height: none!important;
+}

package/assets/sass/components/{table.extras.scss → table.global.scss}

@@ -513,6 +513,10 @@ iam-table.table--fullwidth:not([data-expandable]) {
       }
     }
 
+    tr:not(:has(p)) [data-expand-button] {
+      display: none;
+    }
+
     tr:not([data-view="full"]) td p {   
       display: -webkit-box;
       -webkit-box-orient: vertical;
@@ -566,7 +570,7 @@ iam-table.table--fullwidth:not([data-expandable]) {
       left: auto;
       top: auto;
       z-index: 3;
-      padding: 0;
+      padding: rem(4) 0 0 0;
       min-width: rem(48 + 24);
       height: calc(var(--row-height) - 2px);
       text-align: left;

package/assets/sass/components/table.scss

@@ -9,7 +9,7 @@
   background: white;
   padding: var(--wrapper-padding);
   box-shadow: 0px 6px 12px rgba(0,0,0,0.11);
-  border-radius: rem(8);
+  border-radius: rem(10);
   margin-bottom: rem(32);
   overflow: hidden;
 

package/assets/sass/components/tabs.scss

@@ -107,15 +107,12 @@
     }
     
     &:not(.disabled) {
-      &[aria-pressed="true"]:after,
-      &:active:after,
-      &.active:after {
+      &:is([aria-pressed="true"],:active,.current):after {
         transform: translate(-50%, 0) scale(1, 1);
       }
     }
 
-    &[aria-pressed="true"],
-    &.active {
+    &:is([aria-pressed="true"],.current) {
       pointer-events: none;
       outline: var(--contrast-outline-width, 0px) solid var(--colour-primary-theme)!important;
     }

package/assets/sass/core.scss

@@ -1,6 +1,5 @@
 @charset "UTF-8";
 
 @use "_fonts";
-@use "_corefiles";
-@use '../../assets/sass/components/nav-global.scss';
+@use "_corefiles.scss";
 @use "_print";

package/assets/sass/elements/admin-panel.scss

@@ -4,6 +4,11 @@
   --padding-x: #{rem(32)};
   --padding-top: #{rem(16)};
   --padding-bottom: #{rem(24)};
+  --mh-modifier: #{rem(56 + 16)};
+
+  --mh-padding-inline: var(--padding-x);
+
+
   display: block;
   padding: var(--padding-top) var(--padding-x) var(--padding-bottom) var(--padding-x);
   box-shadow: 0px 6px 12px rgba(0,0,0,0.11);
@@ -65,23 +70,20 @@
     padding-bottom: rem(24);
   }
 
-  > :is(.mh-sm,.mh-md,.mh-lg){
+  > :is(.mh-sm,.mh-md,.mh-lg,.mh-sm-sm,.mh-sm-md,.mh-sm-lg,.mh-md-sm,.mh-md-md,.mh-md-lg){
     overflow: auto;
-    
-    padding: 0 var(--padding-x);
-    margin: 0 calc(var(--padding-x) * -1) rem(24) calc(var(--padding-x) * -1);
 
     &:before {
       top: 100% !important;
     }
   }
 
-  > :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):first-child + :is(.mh-sm,.mh-md,.mh-lg){
+  > :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):first-child + :is(.mh-sm,.mh-md,.mh-lg,.mh-sm-sm,.mh-sm-md,.mh-sm-lg,.mh-md-sm,.mh-md-md,.mh-md-lg){
     padding-top: var(--padding-top);
     margin-top: calc(var(--padding-top) * -1);
   }
   
-  > :is(.mh-sm,.mh-md,.mh-lg):last-child{
+  > :is(.mh-sm,.mh-md,.mh-lg,.mh-sm-sm,.mh-sm-md,.mh-sm-lg,.mh-md-sm,.mh-md-md,.mh-md-lg):last-child{
     padding-bottom: var(--padding-bottom);
     margin-bottom: calc(var(--padding-bottom) * -1)!important;
 
@@ -99,7 +101,7 @@
   }
 }
 
-[class*="col"] .admin-panel:first-child:last-child:not(:has(.mh-sm,.mh-md,.mh-lg)) {
+[class*="col"] .admin-panel:first-child:last-child:not(:has(.mh-sm,.mh-md,.mh-lg,.mh-sm-sm,.mh-sm-md,.mh-sm-lg,.mh-md-sm,.mh-md-md,.mh-md-lg)) {
 
   min-height: calc(100% - #{rem(24)});
 }

package/assets/sass/elements/badge.scss

@@ -0,0 +1,29 @@
+@use "../_func" as *;
+
+.badge {
+
+  font-size: rem(12);
+  line-height: rem(26);
+  outline: 1px solid var(--colour-canvas);
+  outline-offset: -1px;
+  padding: 0 rem(10);
+  margin: 0;
+  display: inline-block;
+  text-align: center;
+  white-space: nowrap;
+
+  & + .badge {
+    margin-left: rem(6);
+  }
+  border-radius: 0.25rem;
+  
+  &:empty {
+    display: none;
+  }
+}
+
+// Quick fix for badges in buttons
+.btn .badge {
+  position: relative;
+  top: -1px;
+}

package/assets/sass/elements/container.scss

@@ -57,6 +57,23 @@
     }
   }
 }
+
+
+// replicate container padding-bottom
+main > .row {
+
+  padding-bottom: #{rem(16)};
+
+  &[class*="bg-"] {
+    padding-top: #{rem(48)};
+    padding-bottom: #{rem(32)};
+  }
+
+  &[class*="bg-"] + :is(.row, .container):not([class*="bg-"]) {
+
+    padding-top: #{rem(32)};
+  }
+}
 // #endregion
 
 // #region Circles

package/assets/sass/elements/dialog.scss

@@ -178,7 +178,7 @@ dialog::backdrop {
 // #endregion
 
 // #region Transactional 
-*:not(.dialog__wrapper) > dialog[open]:not(.dialog--multi):is(:has(button:last-child),:has(form:last-child > button:last-child)) {
+*:not(.dialog__wrapper) > dialog[open]:not(.dialog--multi):is(:has(:is(button,a):last-child),:has(form:last-child > :is(button,a):last-child)) {
 
   text-align: center;
 
@@ -252,14 +252,14 @@ dialog::backdrop {
     }
   }
 
-  button {
+  form > :is(button,a) {
     margin-bottom: 0;
   }
 
   @include media-breakpoint-up(sm) {
 
-    button:has( + button:last-child),
-    button:last-child {
+    :is(button, .btn):has(~ :is(button, .btn):last-child),
+    :is(button, .btn):last-child {
       min-width: calc(50% - 1rem);
       text-align: center;
     }

package/assets/sass/elements/forms.scss

@@ -20,7 +20,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
 // #endregion
 
 // #region input field
-:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),textarea,output,select:not(.select--minimal)) {
+:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),textarea,output,select:not(.select--minimal)) {
   display: block;
   width: 100%;
   display: block;
@@ -61,7 +61,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
   }
 }
 
-:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"])){
+:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"])){
 
   max-width: $input-max-width;
 }
@@ -102,7 +102,7 @@ div:has(> label:first-child):has(> input) {
   margin-bottom: rem(24);
 
 
-  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), output, .prefix, .suffix {
+  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), output, .prefix, .suffix {
     margin-bottom: 0!important;
   }
 
@@ -111,12 +111,12 @@ div:has(> label:first-child):has(> input) {
   align-items: center;
 
 
-  > *:not(input:not([type="checkbox"]):not([type="radio"]):not([type="file"])):not(output):not(.prefix):not(.suffix) {
+  > *:not(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"])):not(output):not(.prefix):not(.suffix) {
     flex-shrink: 0;
     width: 100%;
   }
 
-  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),textarea,output) {
+  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),textarea,output) {
     flex-shrink: 1;
     flex-grow: 1;
     width: 0;
@@ -310,14 +310,14 @@ div:has(> label:first-child):has(> input):has(> :is(.form-control-inline,.input-
     }
   }
 
-  .prefix ~ :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),textarea,output) {
+  .prefix ~ :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),textarea,output) {
     
     border-end-start-radius: 0!important;
     border-start-start-radius: 0!important;
   }
 
-  .suffix ~ :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),textarea,output),
-  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),textarea,output):has(~ .suffix) {
+  .suffix ~ :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),textarea,output),
+  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),textarea,output):has(~ .suffix) {
     order: 1;
     
     border-start-end-radius: 0!important;
@@ -367,7 +367,7 @@ input[maxlength] + span {
   background-repeat: no-repeat;
   background-position: right var(--input-padding-inline, #{rem(16)}) center;
   background-size: var(--input-lh, #{rem(20)}) var(--input-lh, #{rem(20)});;
-  padding-right: calc(var(--input-lh, #{rem(20)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}));
+  padding-right: calc(var(--input-lh, #{rem(20)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}))!important;
 }
 
 .was-validated *:not(button):is(:valid, .is-valid):not(.is-invalid) {
@@ -381,7 +381,7 @@ input[maxlength] + span {
   background-repeat: no-repeat;
   background-position: right var(--input-padding-inline, #{rem(16)}) center;
   background-size: var(--input-lh, #{rem(20)}) var(--input-lh, #{rem(20)});;
-  padding-right: calc(var(--input-lh, #{rem(20)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}));
+  padding-right: calc(var(--input-lh, #{rem(20)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}))!important;
 }
 
 .invalid-feedback {
@@ -484,8 +484,13 @@ label:has(input:is([type="radio"],[type="checkbox"])):not(:has(> iam-card)){
     top: rem(10 - 2);
     left: var(--outline-width);
   }
+  
+  &.btn:before {
+    opacity: 0;
+  }
 }
 
+
 input[type="radio"] + label:not(:has(> iam-card)),
 label:has(input[type="radio"]):not(:has(> iam-card)) {
 
@@ -736,7 +741,7 @@ select {
   background: escape-svg($form-select-indicator-new) right var(--input-padding-block, 0.75rem) top var(--input-padding-block, 0.75rem)/var(--input-lh, 1.25rem) var(--input-lh, 1.25rem) no-repeat,
               linear-gradient(to left, var(--colour-primary-theme), var(--colour-primary-theme) 100%) right top/calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem)) calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem)) no-repeat;
   
-  padding-right: calc(var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-lh, 1.25rem));
+  padding-right: calc(var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-lh, 1.25rem))!important;
   option {font-size: 1.2em;}
 
   
@@ -826,13 +831,15 @@ iam-fileupload {
 
   display: block;
   margin-bottom: rem(24);
+  max-width: $input-max-width;
 
-  :is(input,select) {
+  :is(input:not([type="range"]),select) {
     margin-top: rem(8);
     margin-bottom: 0!important;
   }
 
-  :is(input,select) ~ span:not(:is(.suffix,.prefix,.invalid-feedback)) {
+  :is(input,select) ~ span:not(:is(.suffix,.prefix,.invalid-feedback)),
+  span:has(> :is(input,select)) ~ span:not(:is(.suffix,.prefix,.invalid-feedback)) {
     all: initial;
     font-family: var(--font-body);
     color: var(--colour-body);
@@ -851,7 +858,7 @@ iam-fileupload {
     width: 100%;
   }
 
-  :is(.suffix,.prefix) {
+  :is(.suffix,.prefix):not(.mt-0) {
     margin: rem(8) 0 0 0!important;
   }
 }
@@ -886,3 +893,124 @@ iam-fileupload {
 }
 
 // #endregion
+
+// #region input range
+input[type="range"] {
+
+  --track-size: #{rem(8)};
+  --track-colour: var(--colour-light);
+  --thumb-colour: var(--colour-info);
+  --thumb-size: #{rem(24)};
+  width: 100%;
+  background: transparent;
+  cursor: pointer;
+  margin-top: rem(32);
+  margin-bottom: rem(32);
+  height: rem(32);
+  border-radius: 50%;
+  accent-color: var(--thumb-colour);
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+*:has(> input[type="range"]) {
+  position: relative;
+  padding-bottom: 6rem;
+  max-width: $input-max-width;
+}
+  
+label input[type=range] {
+  position: absolute;
+  top: 1.5rem;
+  left: 0;
+}
+
+
+// Track Styles 
+input[type="range"]::-webkit-slider-runnable-track {
+
+  background: var(--track-colour);
+  height: var(--track-size);
+  border-radius: 0.5rem;
+}
+
+input[type="range"]::-moz-range-track {
+  background: var(--track-colour);
+  height: var(--track-size);
+  border-radius: 0.5rem;
+}
+
+// Thumb Styles
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none; /* Override default look */
+  appearance: none;
+  margin-top: rem(-8); /* 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: 0.5rem solid rgba(30, 190, 231, .2);
+}
+
+input[type="range"]:active::-webkit-slider-thumb {
+  outline: 0.5rem solid rgba(30, 190, 231, .4);
+}
+
+input[type="range"]:hover::-moz-range-thumb,
+input[type="range"]:focus::-moz-range-thumb {
+  outline: 0.5rem solid rgba(30, 190, 231, .2);
+}
+input[type="range"]:focus::-moz-range-thumb {
+  outline: 0.5rem solid rgba(30, 190, 231, .4);
+}
+
+
+iam-slider input::-webkit-outer-spin-button,
+iam-slider input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+// #endregion
+
+// #region Date and time fields
+:is(input[type="date"],input[type="time"]) {
+  position: relative;
+}
+:is(input[type="date"],input[type="time"])::-webkit-calendar-picker-indicator {
+  background: transparent;
+  bottom: 0;
+  color: transparent;
+  cursor: pointer;
+  height: auto;
+  left: 8em;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: auto;
+  order: 3;
+}
+// #endregion

package/assets/sass/elements/links.scss

@@ -80,7 +80,8 @@ a:where(:not(.btn):not(.brand):not(:has(.card)):not(:has(iam-card))),
     text-decoration: underline;
     text-underline-offset: 0.2em;
     text-decoration-thickness: 2px;
-
+    font-size: inherit;
+    
     &:is(:hover, :focus, .hover, :focus-within) {
 
       color: var(--colour-hover);

package/assets/sass/elements/table.element.scss

@@ -40,7 +40,6 @@ table {
 }
 
 th {
-  padding-top: 0;
   font-weight: bold;
   @include var(color,--colour-heading);
 }
@@ -52,7 +51,7 @@ thead {
     @include var(border-color,--colour-primary);
   }
   th {
-    font-weight: bold;
+    padding-top: 0;
     vertical-align: bottom;
   }
 }

package/assets/sass/error.scss

@@ -3,4 +3,4 @@
 // Set mobile only variable so that the media query mixin doesn't print out non mobile rules
 @use "_func" as *;
 @import "_corefiles";
-@import '../../assets/sass/components/nav-global.scss';
+@import '../../assets/sass/components/nav.global.scss';