@iamproperty/components 5.7.1-beta6 → 6.1.0--beta

package/assets/sass/elements/popover.scss

@@ -0,0 +1,207 @@
+@use "sass:math";
+@use "../_func" as *;
+
+// #region popover styling
+.dialog__wrapper {
+
+  position: relative;
+  display: inline-block;
+  margin-bottom: calc(var(--btn-margin) - 0.25rem);
+
+
+  &:has(dialog[open],dialog:popover-open) > button {
+    background: var(--colour-btn-secondary-bg-hover);
+    color: var(--colour-btn-secondary-hover);
+    filter: brightness(85%);
+    transition: background 0.1s, color 0.1s;
+    //color: var(--colour-btn);
+    border-radius: 1.5rem;
+  }
+
+  > .btn:first-child {
+
+    margin-bottom: 0.25rem;
+
+    &:not(.btn-compact):not([class*="fa-"]):after {
+      content: "";
+    
+      display: inline-block;
+      margin-left: 1em;
+      margin-bottom: -0.15em;
+      height: 1em;
+      width: 1em;
+      z-index: var(--index-focus);
+      background: currentColor;
+      mask-image: var(--icon-arrow);
+      mask-size: 100%;
+      mask-repeat: no-repeat;
+      mask-position: 50% 50%;
+      -webkit-mask-image: var(--icon-arrow);
+      -webkit-mask-size: 100%;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: 50% 50%;
+
+      transform: rotate(90deg);
+    }
+
+    &[aria-expanded]:not([data-number]):after {
+
+      transform: rotate(270deg);
+    }
+  }
+
+  > :is(dialog[open],dialog:popover-open) {
+
+    left: 0;
+    top: 100%;
+    z-index: var(--index-floating);
+    min-width: rem(320);
+    border-radius: rem(16);
+    width: rem(320);
+    padding: rem(24);
+
+    @include media-breakpoint-up(sm) {
+      width: rem(335);
+    }
+    @include media-breakpoint-up(md) {
+      width: rem(360);
+    }
+
+    &.dialog--list {
+      
+      width: fit-content!important;
+
+      @include media-breakpoint-up(sm) {
+        width: max-content!important;
+      }
+
+      min-width: rem(140)!important;
+      max-width: rem(280)!important;
+      padding: rem(16);
+      margin: 0;
+
+      hr {
+        height: 2px;
+        background: var(--colour-border);
+        margin-left: -#{rem(16)};
+        margin-right: -#{rem(16)};
+        margin-block: 0.25rem;
+      }
+
+      .radio--tick {
+        margin-right: 0;
+        padding-left: 1.5rem;
+          margin-bottom: 0;
+
+        &:before {
+          left: 0;
+          font-size: 1em;
+          top: 0.75rem;
+        }
+      }
+
+      a {
+
+        padding: #{rem(6)};
+
+        &:not(:hover,:focus,:active){
+          border-color: transparent;
+        }
+        margin: 0;
+
+        &:after {
+          display: none;
+        }
+      }
+
+      .btn-action {
+        &:not(:hover,:focus,:active){
+          border-color: transparent;
+        }
+        margin: 0;
+      }
+
+    }
+
+    :is(dialog[open],dialog:popover-open) {
+      display: contents;
+    }
+  }
+
+  &.dialog__wrapper--right > :is(dialog[open],dialog:popover-open){
+
+    right: 0;
+    left: auto;
+  } 
+
+  &.dialog__wrapper--sm > :is(dialog[open],dialog:popover-open) {
+    
+    width: rem(239);
+  }
+
+  &.dialog__wrapper--lg > :is(dialog[open],dialog:popover-open) {
+    
+    width: rem(319);
+  }
+
+  @include media-breakpoint-up(sm) {
+    
+    &.dialog__wrapper--sm-left > dialog[open]{
+
+      left: 0;
+      right: auto;
+    }  
+    &.dialog__wrapper--sm-right > dialog[open]{
+
+      right: 0;
+      left: auto;
+    }
+    &.dialog__wrapper--sm > dialog[open] {
+      width: rem(265);
+    }
+    &.dialog__wrapper--lg > dialog[open] {
+      width: rem(452);
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    
+    &.dialog__wrapper--md-left > dialog[open]{
+
+      left: 0;
+      right: auto;
+    }  
+    &.dialog__wrapper--md-right > dialog[open]{
+
+      right: 0;
+      left: auto;
+    }
+    &.dialog__wrapper--sm > dialog[open] {
+      width: rem(266);
+    }
+    &.dialog__wrapper--lg > dialog[open] {
+      width: rem(454);
+    }
+  }
+}
+
+// Show hide the indidual or multiple label
+.dialog__wrapper :is(.empty, .individual) {
+  display: none;
+}
+
+@supports selector(:has(*)) {
+
+  .dialog__wrapper :is(.empty, .individual) {
+    display: inline;
+  }
+}
+
+.dialog__wrapper:has(input:checked) .empty,
+.dialog__wrapper:not(:has(input:checked)) .individual,
+.dialog__wrapper:has(input:checked ~ input:checked) .individual,
+.dialog__wrapper:not(:has(input:checked ~ input:checked)) .multiple {
+
+  display: none;
+}
+// #endregion

package/assets/sass/foundations/reboot.scss

@@ -196,10 +196,10 @@ main > :is(.full-width, .container, iam-header) {
   grid-column: container;
 }
 
-main > :is(.full-width, [class*="bg-"], iam-collapsible-side) {
+main > :is(.full-width, [class*="bg-"]:has(.container), iam-collapsible-side) {
   grid-column: full-width;
 }
 
 .row > .col {
   min-height: var(--min-height,0);
-}
+}

package/assets/sass/foundations/root.scss

@@ -2,7 +2,6 @@
 
 //@import "../../bootstrap/scss/_root.scss";
 
-$root: ':root'!default;
 
 #{$root} {
   // Print out the $vars array setup in the variables file so they can be used as CSS vars

package/assets/ts/components/_global.ts

@@ -0,0 +1,40 @@
+// @ts-nocheck
+export const trackComponentRegistered = (componentName: string) => {
+  // Data layer Web component created
+  window.dataLayer = window.dataLayer || [];
+  window.dataLayer.push({
+    "event": "customElementRegistered",
+    "element": componentName
+  });
+};
+
+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
+  });
+
+  trackEvents.forEach((eventName:string) => {
+    component.addEventListener(eventName, function(event:any){
+
+      let eventDetails = {
+        "event": eventName,
+        "element": componentName,
+        "target": event.target
+      };
+
+      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/barchart/barchart.component.ts

@@ -1,9 +1,8 @@
 // @ts-nocheck
 import {addClasses,setupChart,setEventListener,setEventObservers,setLongestLabel,setLongestValue,createTooltips} from "../../modules/chart.module";
+import {trackComponent, trackComponentRegistered} from "../_global";
 
-
-// TODO: tooltip
-// TODO: responsive 'fit-content' classes done through JS
+trackComponentRegistered("iam-barchart");
 
 class iamBarChart extends HTMLElement {
 
@@ -17,6 +16,8 @@ class iamBarChart extends HTMLElement {
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    
     ${loadCSS}
     </style>
     <div class="chart__outer" part="outer">
@@ -36,34 +37,24 @@ class iamBarChart extends HTMLElement {
 	connectedCallback() {
 
     const chartComponent = this;
-    
     const chartID = `chart-${Date.now()+(Math.floor(Math.random() * 100) + 1)}`;
-    
     const orginalTable =  this.querySelector('table');
     const clonedTable = orginalTable.cloneNode(true);
-
-
     const chart = this.shadowRoot.querySelector('.chart');
     const chartOuter = this.shadowRoot.querySelector('.chart__outer');
-    
+    const barCount = chart.querySelectorAll('td:not(:first-child)').length;
 
     chart.appendChild(clonedTable);
-
     addClasses(chartComponent, chartOuter);
 
-
-    const barCount = chart.querySelectorAll('td:not(:first-child)').length;
-
-    if(barCount < 10){
+    if(barCount <= 10){
 
       chartComponent.classList.add('chart--fit-content');
-      //chartComponent.classList.add('chart--display-data');
     }
 
-    if(barCount < 5){
+    if(barCount <= 5){
 
       chartComponent.classList.add('chart--no-scale');
-      //chartComponent.classList.add('chart--display-data');
     }
 
     setupChart(chartComponent,chartOuter,clonedTable);
@@ -71,8 +62,9 @@ class iamBarChart extends HTMLElement {
     setEventListener(chartComponent,chartOuter);
     setLongestLabel(chartOuter);
     setLongestValue(chartOuter);
-
     createTooltips(chartOuter);
+
+    trackComponent(chartComponent,"iam-barchart",['view-change']);
   }
 
   attributeChangedCallback(attrName, oldVal, newVal) {