@iamproperty/components 7.5.1--beta8 → 7.5.1--beta10

package/assets/sass/_functions/mixins.scss

@@ -5,6 +5,7 @@
 @use 'sass:string';
 
 @use 'variables' as *;
+@use 'functions' as *;
 
 // Utility generator
 // Used to generate utilities & print utilities
@@ -588,3 +589,55 @@
     @content;
   }
 }
+@mixin input {
+  display: block;
+    width: 100%;
+    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)});
+    color: var(--colour-heading);
+    background-color: var(--colour-canvas-2);
+    background-clip: padding-box;
+    border: 2px solid var(--colour-primary);
+    appearance: none; // Fix appearance for date inputs in Safari
+    border-radius: rem(8);
+    margin-bottom: rem(24);
+    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
+    );
+
+    &:is(textarea) {
+      max-height: 100%;
+    }
+
+    // Customize the `:focus` state to imitate native WebKit styles.
+    &:is(:focus, .focus):not(:disabled) {
+      border-color: var(--colour-info);
+      outline: 0;
+    }
+
+    &:is(:focus, .focus):not(:disabled):not(:invalid) {
+      box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
+    }
+    // Add some height to date inputs on iOS
+    // https://github.com/twbs/bootstrap/issues/23307
+    // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
+    &::-webkit-date-and-time-value {
+      // Multiply line-height by 1em if it has no unit
+      height: if(math.unit($input-line-height) == '', $input-line-height * 1em, $input-line-height);
+    }
+
+    // Disabled inputs
+    &:disabled {
+      background-color: #ccd6d8;
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+}

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

@@ -174,11 +174,13 @@ slot[name='selectall'] {
 ::slotted([data-single]) {
   pointer-events: none;
   opacity: 0.5;
+  cursor: not-allowed;
 }
 
 :host([data-selected='1']) ::slotted([data-single]) {
   pointer-events: all;
   opacity: 1;
+  cursor: pointer;
 }
 
 ::slotted(hr) {
@@ -341,12 +343,17 @@ slot[name='selectall'] {
   #saveColumns:not(:hover, :focus, :active) {
     background-color: var(--colour-warning);
   }
+  #saveColumns:is(:hover, :focus, :active) {
+    background-color: transparent;
+    color: var(--colour-heading);
+    border-color: var(--colour-warning);
+  }
   #cancelColumns:not(:hover, :focus, :active) {
     border-color: var(--colour-border);
   }
 }
 
-.fa-table-columns:has(+ dialog input:not(:checked)) {
+.fa-table-columns:has(+ iam-menu input:not(:checked)) {
   overflow: visible;
   text-indent: -200vw;
 

package/assets/sass/components/address-lookup.component.scss

@@ -1,6 +1,7 @@
 @use '../_func.scss' as *;
 
 @use '../elements/forms.scss' as *;
+@use '../elements/prefix.scss' as *;
 @use '../elements/buttons.scss' as *;
 @use '../elements/links.scss' as *;
 

package/assets/sass/components/table-basic.global.scss

@@ -484,12 +484,6 @@ table {
     }
   }
 
-  @container (width > 23.4375em) {
-    tr:has([type='checkbox']:checked) {
-      height: calc(4.625rem - 2px);
-    }
-  }
-
   tr:has([type='checkbox']:hover, [type='checkbox']:focus):not(:has(.tag)) {
     --row-bg: #eeeeee;
   }

package/assets/sass/elements/feature.scss

@@ -0,0 +1,53 @@
+@use '../_func' as *;
+
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@include layer('elements', $layers) {
+  
+
+  .feature {
+
+    background-color: var(--colour-canvas-2);
+    border: 1px solid var(--colour-border);
+    border-radius: 0.5rem;
+    padding: 1rem 1rem 1rem 1rem;
+
+    strong {
+      display: block;
+      padding-bottom: 0.2em;
+    }
+  }
+
+  .feature[class*="fa-"] {
+
+    padding-left: 4rem;
+    position: relative;
+    
+    &:before {
+      position: absolute;
+      inset: 1rem;
+      content: var(--fa);
+      font-family: "Font Awesome 6 Pro";
+      display: block;
+
+      background-color: var(--colour-success);
+      border-radius: 50%;
+      padding: 0;
+      height: 2rem;
+      line-height: 2rem;
+      width: 2rem;
+      text-align: center;
+    }
+  }
+
+  .feature[class*="fa-rocket"] {
+
+    &:before {
+      
+      padding-right: 0.1rem;
+    }
+  }
+
+}

package/assets/sass/elements/forms.scss

@@ -3,6 +3,9 @@
 
 @use '../_func' as *;
 
+@use 'input' as *;
+
+
 $icon-error: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d='M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-8.8 0-16 7.2-16 16V272c0 8.8 7.2 16 16 16s16-7.2 16-16V144c0-8.8-7.2-16-16-16zm24 224a24 24 0 1 0 -48 0 24 24 0 1 0 48 0z' fill='#dc3545'/></svg>");
 
 $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d='M441 103c9.4 9.4 9.4 24.6 0 33.9L177 401c-9.4 9.4-24.6 9.4-33.9 0L7 265c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l119 119L407 103c9.4-9.4 24.6-9.4 33.9 0z' fill='#0f9d58' /></svg>");
@@ -20,8 +23,6 @@ $optionalText: 'true' !default;
   }
 
   // 1. Remove the margin in Firefox and Safari
-
-  input,
   select,
   optgroup,
   textarea {
@@ -50,26 +51,7 @@ $optionalText: 'true' !default;
     }
   }
 
-  // Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
-  // See https://stackoverflow.com/a/54997118
-
-  [list]:not([type='date']):not([type='datetime-local']):not([type='month']):not([type='week']):not(
-      [type='time']
-    )::-webkit-calendar-picker-indicator {
-    display: none !important;
-  }
-
-  // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
-  //    controls in Android 4.
-  // 2. Correct the inability to style clickable types in iOS and Safari.
-  // 3. Opinionated: add "hand" cursor to non-disabled button elements.
-
-  // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
-
-  ::-moz-focus-inner {
-    padding: 0;
-    border-style: none;
-  }
+  
 
   // 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
 
@@ -91,97 +73,6 @@ $optionalText: 'true' !default;
     border: 0; // 2
   }
 
-  // 1. By using `float: left`, the legend will behave like a block element.
-  //    This way the border of a fieldset wraps around the legend if present.
-  // 2. Fix wrapping bug.
-  //    See https://github.com/twbs/bootstrap/issues/29712
-
-  legend {
-    float: left; // 1
-    width: 100%;
-    padding: 0;
-    margin-bottom: $legend-margin-bottom;
-    @include font-size($legend-font-size);
-    font-weight: $legend-font-weight;
-    line-height: inherit;
-
-    + * {
-      clear: left; // 2
-    }
-  }
-
-  // Fix height of inputs with a type of datetime-local, date, month, week, or time
-  // See https://github.com/twbs/bootstrap/issues/18842
-
-  ::-webkit-datetime-edit-fields-wrapper,
-  ::-webkit-datetime-edit-text,
-  ::-webkit-datetime-edit-minute,
-  ::-webkit-datetime-edit-hour-field,
-  ::-webkit-datetime-edit-day-field,
-  ::-webkit-datetime-edit-month-field,
-  ::-webkit-datetime-edit-year-field {
-    padding: 0;
-  }
-
-  ::-webkit-inner-spin-button {
-    height: auto;
-  }
-
-  // 1. Correct the outline style in Safari.
-  // 2. This overrides the extra rounded corners on search inputs in iOS so that our
-  //    `.form-control` class can properly style them. Note that this cannot simply
-  //    be added to `.form-control` as it's not specific enough. For details, see
-  //    https://github.com/twbs/bootstrap/issues/11586.
-
-  [type='search'] {
-    outline-offset: -2px; // 1
-    -webkit-appearance: textfield; // 2
-  }
-
-  // 1. A few input types should stay LTR
-  // See https://rtlstyling.com/posts/rtl-styling#form-inputs
-  // 2. RTL only output
-  // See https://rtlcss.com/learn/usage-guide/control-directives/#raw
-
-  /* rtl:raw:
-[type="tel"],
-[type="url"],
-[type="email"],
-[type="number"] {
-  direction: ltr;
-}
-*/
-
-  // Remove the inner padding in Chrome and Safari on macOS.
-
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-
-  // Remove padding around color pickers in webkit browsers
-
-  ::-webkit-color-swatch-wrapper {
-    padding: 0;
-  }
-
-  ::-moz-color-swatch {
-    border-radius: 0;
-    border: none;
-  }
-
-  ::-webkit-color-swatch {
-    border-radius: 0;
-    border: none;
-  }
-
-  // 1. Inherit font family and line height for file input buttons
-  // 2. Correct the inability to style clickable types in iOS and Safari.
-
-  ::file-selector-button {
-    font: inherit; // 1
-    -webkit-appearance: button; // 2
-  }
-
   // Correct element displays
 
   output {
@@ -232,73 +123,13 @@ $optionalText: 'true' !default;
 
   // #region input field
   :is(
-    input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
-    textarea,
-    output,
     select:not(.select--minimal, .btn)
   ) {
-    display: block;
-    width: 100%;
-    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)});
-    color: var(--colour-heading);
-    background-color: var(--colour-canvas-2);
-    background-clip: padding-box;
-    border: 2px solid var(--colour-primary);
-    appearance: none; // Fix appearance for date inputs in Safari
-    border-radius: rem(8);
-    margin-bottom: rem(24);
-    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
-    );
-
-    &:is(textarea) {
-      max-height: 100%;
-    }
-
-    // Customize the `:focus` state to imitate native WebKit styles.
-    &:is(:focus, .focus):not(:disabled) {
-      border-color: var(--colour-info);
-      outline: 0;
-    }
-
-    &:is(:focus, .focus):not(:disabled):not(:invalid) {
-      box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
-    }
-    // Add some height to date inputs on iOS
-    // https://github.com/twbs/bootstrap/issues/23307
-    // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
-    &::-webkit-date-and-time-value {
-      // Multiply line-height by 1em if it has no unit
-      height: if(math.unit($input-line-height) == '', $input-line-height * 1em, $input-line-height);
-    }
-
-    // Disabled inputs
-    &:disabled {
-      background-color: #ccd6d8;
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
+    
+    @include input();
   }
 
-  input[type='color'] {
-
-    padding: 0!important;
-    max-width: 3rem!important;
-  }
-  
   [disabled] :is(
-    input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
-    textarea,
-    output,
     select:not(.select--minimal, .btn)
   ) {
       background-color: #ccd6d8;
@@ -312,18 +143,6 @@ $optionalText: 'true' !default;
       cursor: not-allowed;
       pointer-events: none;
   }
-
-  :is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range'])) {
-    max-width: $input-max-width;
-  }
-
-  textarea {
-    --textarea-height-scale: 3;
-    min-height: calc(
-      var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) +
-        (var(--input-lh, #{rem(20)}) * var(--textarea-height-scale)) + 4px
-    ) !important;
-  }
   // #endregion
 
   // #region legend
@@ -1221,6 +1040,10 @@ $optionalText: 'true' !default;
     }
   }
 
+  &:has(input:is([name$="Alt"]):not([data-value],[data-placeholder])) .empty {
+    display: none;
+  }
+
   label:after,
   .hint-text {
     position: absolute;

package/assets/sass/elements/input.scss

@@ -0,0 +1,177 @@
+@use 'sass:map';
+@use 'sass:math';
+
+@use '../_func' as *;
+
+
+@layer elements {
+
+  input {
+    margin: 0; // 1
+    font-family: inherit;
+    @include font-size(inherit);
+    line-height: inherit;
+  }
+
+  // Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
+  // See https://stackoverflow.com/a/54997118
+
+  [list]:not([type='date']):not([type='datetime-local']):not([type='month']):not([type='week']):not(
+      [type='time']
+    )::-webkit-calendar-picker-indicator {
+    display: none !important;
+  }
+
+  // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+  //    controls in Android 4.
+  // 2. Correct the inability to style clickable types in iOS and Safari.
+  // 3. Opinionated: add "hand" cursor to non-disabled button elements.
+
+  // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
+
+  ::-moz-focus-inner {
+    padding: 0;
+    border-style: none;
+  }
+
+  // 1. By using `float: left`, the legend will behave like a block element.
+  //    This way the border of a fieldset wraps around the legend if present.
+  // 2. Fix wrapping bug.
+  //    See https://github.com/twbs/bootstrap/issues/29712
+
+  legend {
+    float: left; // 1
+    width: 100%;
+    padding: 0;
+    margin-bottom: $legend-margin-bottom;
+    @include font-size($legend-font-size);
+    font-weight: $legend-font-weight;
+    line-height: inherit;
+
+    + * {
+      clear: left; // 2
+    }
+  }
+
+  // Fix height of inputs with a type of datetime-local, date, month, week, or time
+  // See https://github.com/twbs/bootstrap/issues/18842
+
+  ::-webkit-datetime-edit-fields-wrapper,
+  ::-webkit-datetime-edit-text,
+  ::-webkit-datetime-edit-minute,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-year-field {
+    padding: 0;
+  }
+
+  ::-webkit-inner-spin-button {
+    height: auto;
+  }
+
+  // 1. Correct the outline style in Safari.
+  // 2. This overrides the extra rounded corners on search inputs in iOS so that our
+  //    `.form-control` class can properly style them. Note that this cannot simply
+  //    be added to `.form-control` as it's not specific enough. For details, see
+  //    https://github.com/twbs/bootstrap/issues/11586.
+
+  [type='search'] {
+    outline-offset: -2px; // 1
+    -webkit-appearance: textfield; // 2
+  }
+
+  // 1. A few input types should stay LTR
+  // See https://rtlstyling.com/posts/rtl-styling#form-inputs
+  // 2. RTL only output
+  // See https://rtlcss.com/learn/usage-guide/control-directives/#raw
+
+  /* rtl:raw:
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+  direction: ltr;
+}
+*/
+
+  // Remove the inner padding in Chrome and Safari on macOS.
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  // Remove padding around color pickers in webkit browsers
+
+  ::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  ::-moz-color-swatch {
+    border-radius: 0;
+    border: none;
+  }
+
+  ::-webkit-color-swatch {
+    border-radius: 0;
+    border: none;
+  }
+
+  // 1. Inherit font family and line height for file input buttons
+  // 2. Correct the inability to style clickable types in iOS and Safari.
+
+  ::file-selector-button {
+    font: inherit; // 1
+    -webkit-appearance: button; // 2
+  }
+
+
+  
+
+  // #region input field
+  :is(
+    input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
+    textarea,
+    output
+  ) {
+    @include input();
+  }
+
+  input[type='color'] {
+
+    padding: 0!important;
+    max-width: 3rem!important;
+  }
+  
+  [disabled] :is(
+    input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
+    textarea,
+    output,
+    select:not(.select--minimal, .btn)
+  ) {
+      background-color: #ccd6d8;
+      opacity: 0.4;
+      cursor: not-allowed;
+      pointer-events: none;
+  }
+
+  [disabled] label {
+
+      cursor: not-allowed;
+      pointer-events: none;
+  }
+
+  :is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range'])) {
+    max-width: $input-max-width;
+  }
+
+  textarea {
+    --textarea-height-scale: 3;
+    min-height: calc(
+      var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) +
+        (var(--input-lh, #{rem(20)}) * var(--textarea-height-scale)) + 4px
+    ) !important;
+  }
+  // #endregion
+
+}

package/assets/sass/elements/links.scss

@@ -72,6 +72,12 @@ $darkMode: 'true' !default;
       }
     }
 
+    &:not(.text-decoration-none).text-underline-plain {
+      &:after {
+        background: currentColor;
+      }
+    }
+
     [class*='fa-'] {
       margin-left: 0;
       margin-right: 0.5rem;
@@ -94,7 +100,7 @@ $darkMode: 'true' !default;
   }
 
   @include inline-text() {
-    a:not(.btn) {
+    a:not(.btn):not(.link) {
       min-height: none;
       display: inline;
       margin: 0;

package/assets/ts/components/darkmode/darkmode.component.ts

@@ -34,14 +34,18 @@ class iamDarkMode extends HTMLElement {
 
     const storedTheme = localStorage.getItem('user-theme');
 
+    console.log(storedTheme);
+
     // Work from local storage first then look at the media preferences
     label?.innerHTML = `<input type="checkbox" name="dark-mode"  /> Light mode`;
     if (storedTheme == 'dark-theme') {
       label?.innerHTML = `<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode`;
       label?.classList.add('dark-theme');
+      document.documentElement.className = 'dark-theme';
     } else if (storedTheme == 'light-theme') {
       label?.innerHTML = `<input type="checkbox" name="dark-mode"  /> Light mode`;
       label?.classList.remove('dark-theme');
+      document.documentElement.className = 'light-theme';
     }
 
     const hasDarkPreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -51,8 +55,6 @@ class iamDarkMode extends HTMLElement {
     }
 
     this.addEventListener('click', (event) => {
-      console.log(label?.querySelector('input:checked'));
-
       if (label?.querySelector('input:checked')) {
         label?.innerHTML = `<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode`;
         localStorage.setItem('user-theme', 'dark-theme');
@@ -70,6 +72,7 @@ class iamDarkMode extends HTMLElement {
       if (matches) {
         label?.innerHTML = `<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode`;
         label?.classList.add('dark-theme');
+        document.documentElement.className = 'dark-theme';
       }
     });
 
@@ -77,6 +80,7 @@ class iamDarkMode extends HTMLElement {
       if (matches) {
         label?.innerHTML = `<input type="checkbox" name="dark-mode"  /> Light mode`;
         label?.classList.remove('dark-theme');
+        document.documentElement.className = 'light-theme';
       }
     });
   }