@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/sass/foundations/root.scss

@@ -1,7 +1,6 @@
-@use "../func" as *;
+@use '../func' as *;
 
 #{$root} {
-
   @media (prefers-reduced-motion: no-preference) {
     scroll-behavior: smooth;
   }
@@ -14,30 +13,27 @@
 
   // Add in media query based updates to the global vars like updating the heading 1 font size
   @include media-breakpoint-up(sm) {
-    
     @each $var, $value in $varsSM {
       #{$var}: #{$value};
     }
   }
 
   @include media-breakpoint-up(md) {
-    
     @each $var, $value in $varsMD {
       #{$var}: #{$value};
     }
   }
 
   @media screen and (min-width: 36em) {
-    @each $var, $value in map-get($vars-responsive,"sm") {
+    @each $var, $value in map-get($vars-responsive, 'sm') {
       #{'--'+$var}: #{$value};
     }
   }
   @media screen and (min-width: 62em) {
-    @each $var, $value in map-get($vars-responsive,"md") {
+    @each $var, $value in map-get($vars-responsive, 'md') {
       #{'--'+$var}: #{$value};
     }
   }
-  
 
   // Wider colours
   @each $colour, $value in $wider-colours {
@@ -60,7 +56,7 @@
   --card-bottom-padding: 2rem;
   --card-left-padding: 1rem;
   --card-border-radius: #{rem(8)};
-  --card-box-shadow: #{rem(2)} #{rem(3)} #{rem(6)} rgba(0,0,0,0.2);
+  --card-box-shadow: #{rem(2)} #{rem(3)} #{rem(6)} rgba(0, 0, 0, 0.2);
   --nav-height: #{rem(96)};
   --code-color: #d63384;
 
@@ -79,17 +75,17 @@
     --padding-inline: 5.25rem;
 
     &:has(.nav--large) {
-      --container-max-width: #{rem(1920)}!important;
-      --padding-inline: #{rem(56)}!important;
-      --container-padding-x-md: #{rem(56)}!important;
-      --container-padding-md: var(--container-padding-top) var(--container-padding-x-md) var(--container-padding-bottom) var(--container-padding-x-md);
+      --container-max-width: #{rem(1920)} !important;
+      --padding-inline: #{rem(56)} !important;
+      --container-padding-x-md: #{rem(56)} !important;
+      --container-padding-md: var(--container-padding-top) var(--container-padding-x-md) var(--container-padding-bottom)
+        var(--container-padding-x-md);
       --container-padding: var(--container-padding-md);
     }
   }
 }
 
 .reset-colours {
-
   @each $color, $value in $theme-colors {
     --colour-#{$color}: #{$value};
   }
@@ -99,7 +95,6 @@
 // Dark mode; functional colours get updated
 @include dark-mode() {
   #{$root} {
-    
     @each $color, $value in $dark-mode-colors {
       --colour-#{$color}: #{$value};
     }
@@ -108,10 +103,11 @@
 }
 
 @include light-mode() {
-
   // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
-  html:not(.dark-theme) [class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.invert-colours) {
-
+  html:not(.dark-theme)
+    [class*='bg-']:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(
+      .bg-canvas-2
+    ):not(.invert-colours) {
     @each $color, $value in $theme-colors {
       --colour-#{$color}: #{$value};
     }
@@ -121,9 +117,10 @@
   }
 
   // Override the colours when on a dark background, similiar to dark mode but on a module level
-  [class*="bg-"]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert),
+  [class*='bg-']:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(
+      .bg-canvas
+    ):not(.bg-canvas-2):not(.prevent-invert),
   .invert-colours {
-    
     @include invert-colours();
 
     color: #{$colour-inverted};
@@ -131,25 +128,20 @@
 }
 
 @include dark-mode() {
-
   // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
-  [class*="bg-"]:not(.bg-canvas):not(.bg-canvas-2):not(.bg-light) {
-
+  [class*='bg-']:not(.bg-canvas):not(.bg-canvas-2):not(.bg-light) {
     @include reset-colours();
     --colour-body: #{$primary};
     color: var(--colour-body);
   }
 
   @each $color, $value in $theme-colors {
-
-    .bg-#{$color}[class*="gradient-"] {
-
+    .bg-#{$color}[class*='gradient-'] {
       background-color: var(--colour-#{$color}-theme) !important;
     }
   }
-  
-  [class*="bg-"][class*="gradient-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger) {
 
+  [class*='bg-'][class*='gradient-']:not(.bg-primary):not(.bg-dark):not(.bg-danger) {
     @each $color, $value in $theme-colors {
       --colour-#{$color}: #{$value};
     }
@@ -158,17 +150,15 @@
     color: var(--colour-body);
   }
 
-  [class*="bg-"][class*="gradient-"]:not(.bg-info):not(.bg-success):not(.bg-warning):not(.prevent-invert) {
-    
+  [class*='bg-'][class*='gradient-']:not(.bg-info):not(.bg-success):not(.bg-warning):not(.prevent-invert) {
     @include invert-colours();
 
     color: #{$colour-inverted};
   }
 }
 
-
 @media (forced-colors: active) {
   #{$root} {
     --contrast-outline-width: 1px;
   }
-}
+}

package/assets/sass/helpers/dynamic.scss

@@ -1,15 +1,15 @@
 body.js-enabled .js-hide {
-  display: none!important;
+  display: none !important;
 }
 
 body:not(.js-enabled) .js-show {
-  display: none!important;
+  display: none !important;
 }
 
 :host-context(body.js-enabled) .js-hide {
-  display: none!important;
+  display: none !important;
 }
 
 :host-context(body:not(.js-enabled)) .js-show {
-  display: none!important;
-}
+  display: none !important;
+}

package/assets/sass/helpers/line-clamp.scss

@@ -6,7 +6,6 @@
   overflow: hidden;
 }
 
-
 .line-clamp--2 {
   -webkit-line-clamp: 2;
 }
@@ -21,4 +20,4 @@
 
 .line-clamp--5 {
   -webkit-line-clamp: 5;
-}
+}

package/assets/sass/helpers/max-height.scss

@@ -1,9 +1,7 @@
-: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){
-  
-  &:not(iam-table):not(.table__wrapper){
-
-    padding-inline: var(--mh-padding-inline,0);
-    margin-inline: calc(var(--mh-padding-inline,0) * -1);
+: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) {
+  &:not(iam-table):not(.table__wrapper) {
+    padding-inline: var(--mh-padding-inline, 0);
+    margin-inline: calc(var(--mh-padding-inline, 0) * -1);
   }
 
   &::before {
@@ -20,75 +18,69 @@
   }
 }
 
-:is(.mh-sm,.mh-md,.mh-lg){
-
+:is(.mh-sm, .mh-md, .mh-lg) {
   overflow: auto;
   overscroll-behavior: contain;
 
   &::before {
-    content: "";
+    content: '';
   }
 }
 
 .mh-sm {
-  max-height: calc(#{rem(200)} - var(--mh-modifier,0rem));
+  max-height: calc(#{rem(200)} - var(--mh-modifier, 0rem));
 }
 
 .mh-md {
-  max-height: calc(#{rem(400)} - var(--mh-modifier,0rem));
+  max-height: calc(#{rem(400)} - var(--mh-modifier, 0rem));
 }
 
 .mh-lg {
-  max-height: calc(#{rem(600)} - var(--mh-modifier,0rem));
+  max-height: calc(#{rem(600)} - var(--mh-modifier, 0rem));
 }
 
-
 @include media-breakpoint-up(sm) {
-
-  :is(.mh-sm-sm,.mh-sm-md,.mh-sm-lg){
-
+  :is(.mh-sm-sm, .mh-sm-md, .mh-sm-lg) {
     overflow: auto;
     overscroll-behavior: contain;
-  
+
     &::before {
-      content: "";
+      content: '';
     }
   }
-  
+
   .mh-sm-sm {
-    max-height: calc(#{rem(200)} - var(--mh-modifier,0rem));
+    max-height: calc(#{rem(200)} - var(--mh-modifier, 0rem));
   }
-  
+
   .mh-sm-md {
-    max-height: calc(#{rem(400)} - var(--mh-modifier,0rem));
+    max-height: calc(#{rem(400)} - var(--mh-modifier, 0rem));
   }
-  
+
   .mh-sm-lg {
-    max-height: calc(#{rem(600)} - var(--mh-modifier,0rem));
+    max-height: calc(#{rem(600)} - var(--mh-modifier, 0rem));
   }
 }
 
 @include media-breakpoint-up(md) {
-
-  :is(.mh-md-sm,.mh-md-md,.mh-md-lg){
-
+  :is(.mh-md-sm, .mh-md-md, .mh-md-lg) {
     overflow: auto;
     overscroll-behavior: contain;
-  
+
     &::before {
-      content: "";
+      content: '';
     }
   }
-  
+
   .mh-md-sm {
-    max-height: calc(#{rem(200)} - var(--mh-modifier,0rem));
+    max-height: calc(#{rem(200)} - var(--mh-modifier, 0rem));
   }
-  
+
   .mh-md-md {
-    max-height: calc(#{rem(400)} - var(--mh-modifier,0rem));
+    max-height: calc(#{rem(400)} - var(--mh-modifier, 0rem));
   }
-  
+
   .mh-md-lg {
-    max-height: calc(#{rem(600)} - var(--mh-modifier,0rem));
+    max-height: calc(#{rem(600)} - var(--mh-modifier, 0rem));
   }
-}
+}

package/assets/sass/helpers/wider-colours.scss

@@ -1,11 +1,8 @@
-
-
 @each $colour, $value in $wider-colours {
-
   .wider-colour-#{$colour} {
     --wider-colour: var(--wider-colour-#{$colour});
     --wider-colour-hover: var(--wider-colour-#{$colour}-hover);
     --wider-colour-active: var(--wider-colour-#{$colour}-active);
-    color: #262626!important;
+    color: #262626 !important;
   }
-}
+}

package/assets/sass/main.scss

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-@use "_fonts";
-@use "_corefiles";
-@import "_components";
-@import "_print";
+@use '_fonts';
+@use '_corefiles';
+@import '_components';
+@import '_print';

package/assets/sass/templates/auth.scss

@@ -1,8 +1,6 @@
-@use "../_func" as *;
-
+@use '../_func' as *;
 
 body:has(.template--auth) {
-
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -18,15 +16,12 @@ body:has(.template--auth) {
     --brand-size: #{rem(64)};
   }
 
-
   display: flex;
   flex-wrap: wrap;
   max-width: rem(1280);
   margin-inline: auto;
 
-
   main {
-
     display: flex;
     flex-direction: column;
     min-height: 100vh;
@@ -46,9 +41,7 @@ body:has(.template--auth) {
     }
   }
 
-
   aside {
-
     display: none;
 
     @include media-breakpoint-up(md) {
@@ -63,12 +56,10 @@ body:has(.template--auth) {
 
     background-color: var(--colour-primary-theme);
 
-    @include light-mode(){
-    
+    @include light-mode() {
       background-color: #e9f9fd;
     }
 
-
     > figure {
       position: relative;
       display: block;
@@ -81,23 +72,27 @@ body:has(.template--auth) {
       rotate: -5deg;
 
       &:after {
-        content: "";
+        content: '';
         position: absolute;
         display: block;
-        
+
         right: -2rem;
         left: -2rem;
         bottom: -1rem;
         height: 50%;
-        
+
         rotate: -5deg;
-        background: linear-gradient(0deg, rgba(0,49,60,1) 0%, rgba(28,182,226,0.45) 40%, rgba(28,182,226,0) 100%);
+        background: linear-gradient(
+          0deg,
+          rgba(0, 49, 60, 1) 0%,
+          rgba(28, 182, 226, 0.45) 40%,
+          rgba(28, 182, 226, 0) 100%
+        );
         opacity: 0.9;
       }
     }
 
     img {
-      
       margin-inline: rem(-24);
       min-width: calc(100% + rem(24) + rem(24));
       margin-top: rem(-12);
@@ -107,6 +102,4 @@ body:has(.template--auth) {
       rotate: 5deg;
     }
   }
-
 }
-

package/assets/sass/templates/form.scss

@@ -1,56 +1,45 @@
-@use "../_func" as *;
+@use '../_func' as *;
 
 body:has(.template--form) {
-  
-  @include light-mode(){
-    
+  @include light-mode() {
     background-color: #e9f9fd;
   }
 }
 
 .template--form {
-
   --input-max-width: #{rem(450)};
   --select-max-width: #{rem(500)};
 
-  @supports selector(:has(*)){
-
-    label:has(> :is(.suffix,.prefix)) {
-
+  @supports selector(:has(*)) {
+    label:has(> :is(.suffix, .prefix)) {
       --input-max-width: #{rem(500)};
       max-width: var(--input-max-width);
     }
-    div:has(> :is(.suffix,.prefix)) {
-
+    div:has(> :is(.suffix, .prefix)) {
       --input-max-width: #{rem(500)};
       max-width: var(--input-max-width);
     }
   }
 
-
-
   // Make H2's look like H3's
   :is(h2, .h2) {
-    font-size: rem(map-get($heading-sizes,"h3_fs"));
-    line-height: rem(map-get($heading-sizes,"h3_lh"));
-    padding-bottom: rem(map-get($heading-sizes,"h3_pb"));
+    font-size: rem(map-get($heading-sizes, 'h3_fs'));
+    line-height: rem(map-get($heading-sizes, 'h3_lh'));
+    padding-bottom: rem(map-get($heading-sizes, 'h3_pb'));
     max-width: var(--content-max-width);
-  
+
     @include media-breakpoint-up(sm) {
-  
-      font-size: rem(map-get($heading-sizes,"h3_fs_sm"));
-      line-height: rem(map-get($heading-sizes,"h3_lh_sm"));
-      padding-bottom: rem(map-get($heading-sizes,"h3_pb_sm"));
+      font-size: rem(map-get($heading-sizes, 'h3_fs_sm'));
+      line-height: rem(map-get($heading-sizes, 'h3_lh_sm'));
+      padding-bottom: rem(map-get($heading-sizes, 'h3_pb_sm'));
     }
   }
 
-  @include light-mode(){
-    
+  @include light-mode() {
     background-color: #e9f9fd;
   }
 
   .form-panel {
-
     display: block;
     padding: 2rem;
     box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
@@ -58,15 +47,13 @@ body:has(.template--form) {
     margin-bottom: 1.5rem;
     outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
     width: 100%;
-    
-    @include media-breakpoint-up(sm) {
 
+    @include media-breakpoint-up(sm) {
       max-width: calc(100% - 5rem); // Guess
       margin-inline: auto;
     }
 
     @include media-breakpoint-up(md) {
-
       max-width: rem(924); // Guess
       border-radius: 0.5rem;
       padding-inline: rem(94);
@@ -75,14 +62,14 @@ body:has(.template--form) {
     }
 
     > *:last-child {
-      margin-bottom: 0!important;
+      margin-bottom: 0 !important;
     }
   }
 
   @include media-breakpoint-up(md) {
     .container--form {
       padding-inline: 0;
-      max-width: rem(924)!important;
+      max-width: rem(924) !important;
     }
   }
 

package/assets/ts/components/_global.ts

@@ -3,38 +3,35 @@ export const trackComponentRegistered = (componentName: string) => {
   // Data layer Web component created
   window.dataLayer = window.dataLayer || [];
   window.dataLayer.push({
-    "event": "customElementRegistered",
-    "element": componentName
+    event: 'customElementRegistered',
+    element: componentName,
   });
 };
 
-export const trackComponent = (component:any, componentName:string, trackEvents:any) => {
-
+export const trackComponent = (component: any, componentName: string, trackEvents: any) => {
   // Data layer Web component created
   window.dataLayer = window.dataLayer || [];
   window.dataLayer.push({
-    "event": "customElementAdded",
-    "element": componentName
+    event: 'customElementAdded',
+    element: componentName,
   });
 
-  trackEvents.forEach((eventName:string) => {
-    component.addEventListener(eventName, function(event:any){
-
-      let eventDetails = {
-        "event": eventName,
-        "element": componentName,
-        "target": event.target
+  trackEvents.forEach((eventName: string) => {
+    component.addEventListener(eventName, function (event: any) {
+      const eventDetails = {
+        event: eventName,
+        element: componentName,
+        target: event.target,
       };
 
-      Object.keys(event.detail).forEach((eventKey:string) => {
-
+      Object.keys(event.detail).forEach((eventKey: string) => {
         const eventDetail = event.detail[eventKey];
         eventDetails[eventKey] = eventDetail;
       });
-      
+
       window.dataLayer.push(eventDetails);
     });
   });
 
   return true;
-};
+};

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

@@ -1,20 +1,26 @@
-// @ts-nocheck
-
 // Data layer Web component created
+declare global {
+  interface Window {
+    dataLayer: Array<object>;
+  }
+}
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
-  "event": "customElementRegistered",
-  "element": "accordion"
+  event: 'customElementRegistered',
+  element: 'accordion',
 });
 
 class iamAccordion extends HTMLElement {
-
-  constructor(){
+  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`;
+    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 template = document.createElement('template');
     template.innerHTML = `
@@ -33,22 +39,20 @@ class iamAccordion extends HTMLElement {
     </style>
       <slot></slot>
     `;
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
+    this.shadowRoot?.appendChild(template.content.cloneNode(true));
   }
 
-	connectedCallback() {
-
-    if(!this.classList.contains('accordion--keep-open')){
-
-      const details: NodeListOf<HTMLElement> = this.querySelectorAll(":scope > details");
+  connectedCallback(): void {
+    if (!this.classList.contains('accordion--keep-open')) {
+      const details: NodeListOf<HTMLElement> = this.querySelectorAll(':scope > details');
 
       // Add the toggle listeners.
       details.forEach((targetDetail) => {
-        targetDetail.addEventListener("toggle", () => {
+        targetDetail.addEventListener('toggle', () => {
           // Close all the details that are not targetDetail.
           details.forEach((detail) => {
             if (detail !== targetDetail && targetDetail.hasAttribute('open')) {
-              detail.removeAttribute("open");
+              detail.removeAttribute('open');
             }
           });
         });
@@ -57,4 +61,4 @@ class iamAccordion extends HTMLElement {
   }
 }
 
-export default iamAccordion;
+export default iamAccordion;

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

@@ -15,7 +15,7 @@ import('../node_modules/@iamproperty/components/assets/js/components/actionbar/a
 
 ```
 <iam-actionbar data-selectall data-search>
-  
+
   <div class="dialog__wrapper">
     <button class="btn btn-action mb-0 me-0">Quick filter</button>
     <dialog class="dialog--list">
@@ -45,11 +45,12 @@ import('../node_modules/@iamproperty/components/assets/js/components/actionbar/a
 
 </iam-actionbar>
 ```
+
 **Properties**
 
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| data-selectall | - | - | Optional flag to include the select all button |
-| data-search | - | - | Optional flag to include the search button and functionality |
-| data-switchviews | - | - | Optional flag to include the switch views buttons |
-| data-view | String | square | Required if you have the above flag set. Can be set to wither 'square','list' or 'small'. |
+| Option           | Type   | Default Value | Description                                                                               |
+| ---------------- | ------ | ------------- | ----------------------------------------------------------------------------------------- |
+| data-selectall   | -      | -             | Optional flag to include the select all button                                            |
+| data-search      | -      | -             | Optional flag to include the search button and functionality                              |
+| data-switchviews | -      | -             | Optional flag to include the switch views buttons                                         |
+| data-view        | String | square        | Required if you have the above flag set. Can be set to wither 'square','list' or 'small'. |