@iamproperty/components 3.7.8--beta-2 → 3.7.8

package/assets/sass/_forms.scss

@@ -2,7 +2,7 @@
 
 //@import "../bootstrap/scss/forms/_labels";
 //@import "../bootstrap/scss/forms/_form-control";
-@import "../bootstrap/scss/forms/_form-select";
+//@import "../bootstrap/scss/forms/_form-select";
 @import "../bootstrap/scss/forms/_form-check";
 @import "../bootstrap/scss/forms/_form-range";
 @import "../bootstrap/scss/forms/_input-group";

package/assets/sass/components/dialog.scss

@@ -156,6 +156,8 @@ dialog[open] {
   }
 
   .mh-lg {
+    padding-left: 1rem;
+    margin-left: -1rem;
     padding-right: calc(var(--dialog-padding) - 10px);
     margin-right: calc((var(--dialog-padding) * -1) + 10px);
     margin-bottom: calc(var(--dialog-padding) * -1);
@@ -439,7 +441,7 @@ dialog::backdrop {
 
     margin-bottom: 0.25rem;
 
-    &:after {
+    &:not(.btn-compact):after {
       content: "";
     
       display: inline-block;

package/assets/sass/components/fileupload.scss

@@ -0,0 +1,156 @@
+@use "../_func" as *;
+// #region file upload field
+
+.file-upload {
+  max-width: rem(400)!important;
+  padding-bottom: rem(16);
+
+  .drop-area > input {
+    display: none;
+  }
+
+  .file-upload__title {
+    margin-top: 0; // 1
+    margin-bottom: $headings-margin-bottom;
+    font-family: $headings-font-family;
+    font-style: $headings-font-style;
+    font-weight: $headings-font-weight;
+    line-height: $headings-line-height;
+    color: $headings-color;
+    clear: both;
+    display: block;
+    padding-bottom: 2rem;
+
+    font-size: rem(map-get($heading-sizes,"h4_fs"));
+    line-height: rem(map-get($heading-sizes,"h4_lh"));
+    padding-bottom: rem(map-get($heading-sizes,"h4_pb"));
+    max-width: var(--content-max-width);
+  }
+
+  .helper-text {
+    max-width: rem(270);
+  }
+}
+
+.files {
+
+  span {
+    display: block;
+    width: 100%;
+    padding: var(--input-padding-block, #{rem(12)}) var(--input-padding-inline, #{rem(16)});
+    font-size: var(--input-fs, #{rem(16)});
+    line-height: var(--input-lh, #{rem(20)});
+    border: 2px solid var(--colour-primary-theme);
+    appearance: none; // Fix appearance for date inputs in Safari
+    border-radius: rem(8);
+    margin-bottom: rem(16);
+    color: var(--colour-primary);
+    border-color: #D8D8D8;
+    background: #D8D8D8;
+    max-width: rem(400)!important;
+    position: relative;
+
+
+
+    
+    @media screen and (prefers-color-scheme: dark) {
+
+      background: var(--colour-canvas-2);
+      border-color: var(--colour-canvas-2);
+      color: var(--colour-white);
+    }
+
+    
+    @media (forced-colors: active) {
+
+      padding-right: 5rem;
+
+      button {
+        padding: 0;
+        width: 3.7rem!important;
+        text-indent: 0% !important;
+
+        &:after {
+          display: none!important;
+        }
+      }
+    }
+
+    button {
+      position: absolute;
+      top: calc(50% - #{rem(9)});
+      right: rem(14);
+      z-index: var(--index-floating);
+      text-indent: 300%;
+      overflow: hidden;
+      border: none;
+      height: rem(18);
+      width: rem(18);
+      background: transparent;
+
+      &:after {
+        content: "";
+        top: 0;
+        left: 0;
+        position: absolute;
+        display: block;
+        height: rem(18);
+        width: rem(18);
+        z-index: var(--index-focus);
+        background: currentColor;
+        mask-image: var(--icon-close);
+        mask-size: 100%;
+        mask-repeat: no-repeat;
+        mask-position: 50% 50%;
+        -webkit-mask-image: var(--icon-close);
+        -webkit-mask-size: 100%;
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: 50% 50%;
+      }
+    }
+  }
+}
+
+:host(.fileupload--drag-drop) .file-upload {
+  
+  max-width: rem(800)!important;
+  
+  .helper-text {
+
+    max-width: rem(800)!important;
+  }
+
+  .drop-area > input {
+    display: block;
+    min-height: rem(200);
+    border: 2px dashed var(--colour-primary-theme);
+    color: transparent;
+    position: relative;
+    padding: rem(24) rem(32) rem(24) rem(32);
+    user-select: none;
+
+    &.focus {
+      
+      border: 2px solid var(--colour-info);
+    }
+  }
+
+  .drop-area {
+    position: relative;
+  }
+
+  .drop-area::before {
+    content: "Drag and drop files here or click to upload";
+    position: absolute;
+    inset: rem(24) rem(32) rem(24) rem(32);
+    z-index: 1;
+    pointer-events: none;
+  }
+  
+  ::file-selector-button {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+  }
+}
+// #endregion

package/assets/sass/components/forms.scss

@@ -9,14 +9,14 @@ label {
   color: var(--colour-heading);
   display: block;
 
-  &:has(+ input:not(:disabled):not([readonly]):not(:required):not([type='radio'])):after {
+  &:has(+ input:not(:disabled):not([readonly]):not(:required):not([type='radio']):not([type='file'])):after {
     content: " (Optional)";
   }
 }
 // #endregion
 
 // #region input field
-:is(input,textarea,output) {
+:is(input,textarea,output,select) {
   display: block;
   width: 100%;
   max-width: $content-max-width;
@@ -35,15 +35,6 @@ label {
   min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
   max-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
 
-  // TODO: review later
-  &[type="file"] {
-    overflow: hidden; // prevent pseudo element button overlap
-
-    &:not(:disabled):not([readonly]) {
-      cursor: pointer;
-    }
-  }
-
   // Customize the `:focus` state to imitate native WebKit styles.
   &:is(:focus,.focus):not(:disabled) {
     border-color: var(--colour-info);
@@ -66,26 +57,6 @@ label {
     cursor: not-allowed;
   }
 
-  // File input buttons theming
-  &::file-selector-button {
-    padding: $input-padding-y $input-padding-x;
-    margin: (-$input-padding-y) (-$input-padding-x);
-    margin-inline-end: $input-padding-x;
-    color: $form-file-button-color;
-    @include gradient-bg($form-file-button-bg);
-    pointer-events: none;
-    border-color: inherit;
-    border-style: solid;
-    border-width: 0;
-    border-inline-end-width: $input-border-width;
-    border-radius: 0; // stylelint-disable-line property-disallowed-list
-    @include transition($btn-transition);
-  }
-
-  &:hover:not(:disabled):not([readonly])::file-selector-button {
-    background-color: $form-file-button-hover-bg;
-  }
-
 }
 
 textarea {
@@ -374,9 +345,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
 // #endregion
 
 // #region radio field 
-
-
-input[type="radio"] {
+input:is([type="radio"],[type="checkbox"]) {
   position: absolute;
   top: 0;
   left: 0;
@@ -386,11 +355,22 @@ input[type="radio"] {
   margin: 0;
 }
 
-div:has(> input[type="radio"]) {
+div:has(> input:is([type="radio"],[type="checkbox"])) {
   position: relative;
 }
 
-input[type="radio"] + label:not(:has(> iam-card)) {
+div:has( > input[type="radio"]){
+
+  --border-radius: 50%;
+  --outline-width: #{rem(8)};
+}
+div:has( > input[type="checkbox"]) {
+
+  --border-radius: #{rem(6)};
+  --outline-width: #{rem(4)};
+}
+
+input:is([type="radio"],[type="checkbox"]) + label:not(:has(> iam-card)) {
 
   --tick-colour: transparent;
 
@@ -408,7 +388,7 @@ input[type="radio"] + label:not(:has(> iam-card)) {
   &:before {
     content: "";
     border: 2px solid var(--colour-primary);
-    border-radius: 50%;
+    border-radius: var(--border-radius);
     height: rem(24);
     width: rem(24);
     display: inline-block;
@@ -416,11 +396,14 @@ input[type="radio"] + label:not(:has(> iam-card)) {
     top: rem(10 - 2);
     left: 0;
   }
-  
+}
+
+input[type="radio"] + label:not(:has(> iam-card)) {
+
   &:after {
     content: ""!important;
     background: var(--colour-info);
-    border-radius: 50%;
+    border-radius: var(--border-radius);
     height: rem(14);
     width: rem(14);
     display: none;
@@ -444,18 +427,15 @@ input[type="radio"] + label:not(:has(> iam-card)) {
       outline: none!important;
       left: 0.25rem;
     }
-    
-
     &:after {
       display: none;
     }
   }
 }
 
-
 @media (forced-colors: active) {
 
-  input[type="radio"]:not(:checked) + label.radio--tick:not(:has(> iam-card)) {
+  input:is([type="radio"],[type="checkbox"]):not(:checked) + label.radio--tick:not(:has(> iam-card)) {
 
     &:before {
     
@@ -464,14 +444,13 @@ input[type="radio"] + label:not(:has(> iam-card)) {
   }
 }
 
-div:has(> input[type="radio"]:nth-of-type(2)) {
-  label {
+div:has(> :is(input[type="radio"],input[type="checkbox"]):nth-of-type(2)) {
+  label:not(:has(> iam-card)):not(:last-of-type) {
     margin-bottom: 0rem;
   }
-  margin-bottom: rem(24);
 }
 
-input[type="radio"]:checked + label {
+input:is([type="radio"],[type="checkbox"]):checked + label {
 
   --tick-colour: var(--colour-info);
 
@@ -488,31 +467,59 @@ input[type="radio"]:checked + label {
   }
 }
 
-input[type="radio"]:checked:is(:focus,:hover,.focus) + label {
+input[type="checkbox"]:not([disabled]):checked + label {
+
+  &:before {
+    background: var(--colour-info)!important;
+  }
+}
+input[type="checkbox"]:checked + label {
+
+  &:after {
+    content: "\f00c";
+    position: absolute;
+    font-size: 1em;
+    line-height: 1;
+    color: var(--colour-primary-theme);
+    font-family: "Font Awesome 6 Pro";
+    font-weight: bold;
+    height: rem(24);
+    width: rem(24);
+    line-height: rem(26);
+    background: none !important;
+    border: none!important;
+    outline: none!important;
+    top: rem(10 - 2);
+    left: 0;
+    text-align: center;
+  }
+}
+
+input:is([type="radio"],[type="checkbox"]):checked:is(:focus,:hover,.focus) + label {
 
   --tick-colour: var(--colour-info);
 }
-input[type="radio"]:is(:focus,:hover,.focus) + label {
+input:is([type="radio"],[type="checkbox"]):is(:focus,:hover,.focus) + label {
 
   --tick-colour: var(--colour-muted);
 
   &:before {
     background: var(--colour-light);
-    outline: rem(8) solid var(--colour-light);
+    outline: var(--outline-width) solid var(--colour-light);
   }
 }
-input[type="radio"]:is(:active,.active) + label {
+input:is([type="radio"],[type="checkbox"]):is(:active,.active) + label {
 
   --tick-colour: var(--colour-light);
 
   &:before {
     background: #E0E0E0;
-    outline: rem(8) solid #E0E0E0;
+    outline: var(--outline-width) solid #E0E0E0;
   }
 }
 
 // Disabled
-input[type="radio"]:disabled + label {
+input:is([type="radio"],[type="checkbox"]):disabled + label {
 
   opacity: 0.4;
   cursor: not-allowed;
@@ -526,44 +533,26 @@ input[type="radio"]:disabled + label {
     outline: none!important;
     border-color: var(--colour-primary)!important;
   }
+}
+
+input[type="radio"][disabled]:checked + label {
   
   &:after {
     background-color: var(--colour-primary)!important;
   }
 }
-// #endregion
-
-// #region checkbox
-.form-check {
-
-  overflow: hidden;
-
-  input,
-  label {
-    cursor: pointer;
-  }
 
-  input:not([disabled]) + label:hover,
-  input:not([disabled]):hover + label,
-  input:not([disabled]):focus + label {
+input[type="checkbox"][disabled]:checked + label {
 
-    color: var(--colour-hover);
-    border-color: var(--colour-hover);
+  &:before {
+    background: #E0E0E0!important;
+    border-color: #E0E0E0!important;
   }
 }
-.form-check + .form-check {
-  margin-top: -0.5rem;
-}
-
-.form-check-label {
-  float: left;
-}
+// #endregion
 
-.form-check-label + .form-check-input {
+// #region checkbox
 
-  margin-left: 1rem;
-  margin-right: 0.5rem;
-}
 
 // #endregion
 
@@ -610,71 +599,45 @@ select[multiple]::-webkit-scrollbar-thumb {
 }
 // #endregion
 
+// #region Select
 
+select {
+  $form-select-indicator-new: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m2 5 6 6 6-6'/></svg>") !default;
 
-// #region large upload field
-
-.form-control__wrapper.form-control--lrg-file {
-  aspect-ratio: 4/2;
-  border: 1px dashed var(--colour-selected);
-  position: relative;
-
-  .icon {
-    position: absolute;
-    top: 50%;
-    left:50%;
-    transform: translate(-50%,calc(-50% - 1rem));
-    color: var(--colour-muted);
-    font-size: 5rem;
-    height: 1em;
-    width: 1em;
-    pointer-events: none;
-  }
+  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));
+  
+  option {font-size: 1.2em;}
 
-  > label {
-    
-    position: absolute;
-    top: calc(50% + 2rem);
-    left:50%;
-    transform: translate(-50%,-50%);
-    width: 100%;
-    text-align: center;
+  &[multiple],
+  &[size]:not([size="1"]) {
+    background: none;
+    max-height: none!important;
   }
 
-  > input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    opacity: 0;
+  &:disabled {
+    color: $form-select-disabled-color;
+    background-color: $form-select-disabled-bg;
+    border-color: $form-select-disabled-border-color;
   }
 
-  .file-uploaded & {
-    border: 3px solid var(--colour-success);
-    border-radius: 50%;
-    aspect-ratio: 1;
-    margin-inline: auto;
-    max-width: 10rem;
-
-    > label {
-      content: "File uploaded";
-    }
+  // Remove outline from select box in FF
+  &:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 $form-select-color;
   }
 }
+// #endregion
 
-.file-upload__add {
-  display: none;
-
-  .file-uploaded & {
-    display: block;
-    margin-inline: auto;
-    color: var(--colour-muted);
-    font-size: rem(14);
-    text-align: center;
-    margin-top: -1rem;
-    margin-bottom: 1rem;
-    cursor: pointer;
+// #region file upload
+iam-fileupload {
+  
+  input {
+    display: none;
   }
+
 }
+
 // #endregion

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

@@ -0,0 +1,13 @@
+```
+<iam-fileupload data-maxsize="500"><input type="file" name="files[]" multiple="multiple" accept=".pdf, .csv, .jpg, .png" /></iam-fileupload>
+```
+
+**Properties**
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| data-maxsize | Int | - | Blocks files from being added that is larger than the max size given in kb's |
+
+**Class modifiers**
+
+- Adding a class of **.fileupload--drag-drop** will add a droppable area for the user to drag files into and drop.

package/assets/ts/components/fileupload/fileupload.component.ts

@@ -0,0 +1,55 @@
+// @ts-nocheck
+import fileupload from "../../modules/fileupload";
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "fileupload"
+});
+
+class iamFileupload extends HTMLElement {
+
+  constructor(){
+    super();
+    this.attachShadow({ mode: 'open'});
+
+    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/fileupload.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @import "${coreCSS}";
+    ${loadCSS}
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <div class="file-upload">
+      <span class="file-upload__title">Upload file</span>
+      <p class="helper-text"></p>
+      <button class="btn btn-primary"><slot name="btn"></slot> Upload document</button>
+      <div class="drop-area"></div>
+      <hr/>
+      <slot></slot>
+      <div class="files"></div>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
+
+    this.innerHTML += '<i class="fa-regular fa-arrow-up-from-bracket me-2" aria-hidden="true" slot="btn"></i>';
+    
+    const wrapper = this.shadowRoot.querySelector('.file-upload');
+    const input = this.querySelector('input');
+    const helperText = this.shadowRoot.querySelector('.helper-text');
+
+    helperText.innerHTML = `${this.hasAttribute('data-maxsize') ? `Max file size is ${this.getAttribute('data-maxsize')}kb. ` : '' }${ input.hasAttribute('accept') ? `Supported file types are ${input.getAttribute('accept')}` : '' }`;
+
+    fileupload(this,wrapper);
+  }
+}
+
+export default iamFileupload;