@iamproperty/components 5.0.0 → 5.1.0-beta

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/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/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;
@@ -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)) {
 
@@ -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);
@@ -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/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';

package/assets/sass/foundations/reboot.scss

@@ -141,3 +141,51 @@ details summary > * {
 details {
   width: 100%;
 }
+
+// Main grid setup to avoid having to use continaer divs
+main {
+  --padding-inline: 1.5rem;
+  --container-max-width: #{rem(1280)};
+  --full-width-start: 0;
+
+  @include media-breakpoint-up(sm) {
+    --padding-inline: 2.5rem;
+  }
+  @include media-breakpoint-up(md) {
+    --padding-inline: 5.25rem;
+    --full-width-start: calc((100% - var(--container-max-width)) / 2);
+  }
+
+  display: grid;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  
+  grid-template-columns:
+  [full-width-start] var(--full-width-start)
+  [container-start] var(--padding-inline)
+  [content-start] min(
+  100% - (var(--padding-inline) * 2),
+  calc(var(--container-max-width) - (var(--padding-inline) * 2))
+  )
+  [content-end]
+  var(--padding-inline) [container-end]
+  var(--full-width-start) [full-width-end];
+
+  &:not(:has(.container:last-child)){
+    padding-bottom: 1rem;
+  }
+}
+
+main > :not(.full-width, .container, iam-header, [class*="bg-"]) {
+  grid-column: content;
+}
+
+
+main > :is(.full-width, .container, iam-header) {
+  grid-column: container;
+}
+
+main > :is(.full-width, [class*="bg-"]) {
+  grid-column: full-width;
+}

package/assets/sass/main.scss

@@ -2,6 +2,5 @@
 
 @use "_fonts";
 @use "_corefiles";
-@import '../../assets/sass/components/nav-global.scss';
 @import "_components";
 @import "_print";

package/assets/sass/templates/form.scss

@@ -57,6 +57,7 @@ body:has(.template--form) {
     background-color: var(--colour-canvas-2);
     margin-bottom: 1.5rem;
     outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+    width: 100%;
     
     @include media-breakpoint-up(sm) {
 

package/assets/ts/components/accordion/accordion.component.ts

@@ -17,6 +17,7 @@ class iamAccordion extends HTMLElement {
     const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets'
     const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
     const loadCSS = `@import "${assetLocation}/css/components/accordion.css";`;
+    const loadExtraCSS = `@import "${assetLocation}/css/components/accordion.global.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
@@ -30,6 +31,10 @@ class iamAccordion extends HTMLElement {
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+    // insert extra CSS
+    if(!document.getElementById('accordionGlobal'))
+      document.head.insertAdjacentHTML('beforeend',`<style id="accordionGlobal">${loadExtraCSS}</style>`);
   }
 
 	connectedCallback() {

package/assets/ts/components/actionbar/actionbar.component.ts

@@ -45,6 +45,7 @@ class iamActionbar extends HTMLElement {
     const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets'
     const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
     const loadCSS = `@import "${assetLocation}/css/components/actionbar.css";`;
+    const loadExtraCSS = `@import "${assetLocation}/css/components/actionbar.global.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
@@ -96,6 +97,10 @@ class iamActionbar extends HTMLElement {
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+    // insert extra CSS
+    if(!document.getElementById('actionbarGlobal'))
+      document.head.insertAdjacentHTML('beforeend',`<style id="actionbarGlobal">${loadExtraCSS}</style>`);
   }
 
 	connectedCallback() {

package/assets/ts/components/address-lookup/address-lookup.component.ts

@@ -51,7 +51,7 @@ class iamAddressLookup extends HTMLElement {
       </div>
       <div class="pre-filled pb-2 js-hide">
         <strong class="title text-primary d-block"></strong>
-        <p><span class="pre-filled-address"></span><button class="text-primary text-decoration-none ms-1 cursor-pointer"><i class="fa-regular fa-pen-to-square"></i><span class="visually-hidden">Edit</span></button></p>
+        <p><span class="pre-filled-address"></span><button class="text-primary text-decoration-none ms-1 cursor-pointer"><i class="fa-regular fa-pen-to-square"></i><span class="visually-hidden">Edit</span></button><slot name="prefilled"></slot></p>
       </div>
     </div>
     `;

package/assets/ts/components/card/card.component.ts

@@ -22,6 +22,7 @@ class iamCard extends HTMLElement {
     const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets'
     const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
     const loadCSS = `@import "${assetLocation}/css/components/card.css";`;
+    const loadExtraCSS = `@import "${assetLocation}/css/components/card.global.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
@@ -43,6 +44,10 @@ class iamCard extends HTMLElement {
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
+    
+    // insert extra CSS
+    if(!document.getElementById('cardGlobal'))
+      document.head.insertAdjacentHTML('beforeend',`<style id="cardGlobal">${loadExtraCSS}</style>`);
   }
 
 	connectedCallback() {

package/assets/ts/components/nav/nav.component.ts

@@ -16,6 +16,7 @@ class iamNav extends HTMLElement {
     const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
     const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
     const loadCSS = `@import "${assetLocation}/css/components/nav.css";`;
+    const loadExtraCSS = `@import "${assetLocation}/css/components/nav.global.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
@@ -52,6 +53,10 @@ class iamNav extends HTMLElement {
     `;
 
     shadowRoot.appendChild(template.content.cloneNode(true));
+    
+    // insert extra CSS
+    if(!document.getElementById('navGlobal'))
+      document.head.insertAdjacentHTML('beforeend',`<style id="navGlobal">${loadExtraCSS}</style>`);
   }
 
 	connectedCallback() {

package/assets/ts/components/notification/notification.component.ts

@@ -17,6 +17,7 @@ class iamNotification extends HTMLElement {
     const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
     const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
     const loadCSS = `@import "${assetLocation}/css/components/notification.css";`;
+    const loadExtraCSS = `@import "${assetLocation}/css/components/notification.global.css";`;
 
     const buttons = this.querySelectorAll('a,button');
 
@@ -45,6 +46,9 @@ class iamNotification extends HTMLElement {
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
 
+    // insert extra CSS
+    if(!document.getElementById('notificationHolder'))
+      document.head.insertAdjacentHTML('beforeend',`<style id="notificationHolder">${loadExtraCSS}</style>`);
   }
 
 	connectedCallback() {

package/assets/ts/components/slider/README.md

@@ -0,0 +1,26 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/slider/slider.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-slider`))
+    window.customElements.define(`iam-slider`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
+```
+<label>Input field label <iam-slider><input type="number" name="percent" min="0" max="100" value="15" step="1" /></iam-slider></label>
+```
+
+**Note**
+
+The slider component is best put inside of a label and wrapped around an input field. The component is there to enhance the input field.
+
+**Properties**
+
+The properties of the slider are reflected by the attributes of the input field. So the min and max used to create the range are taken from the first input inside of the component.