@iamproperty/components 6.0.0 → 6.1.0--beta

package/assets/js/scripts.js

@@ -0,0 +1,17 @@
+// @ts-nocheck
+// Modules
+import * as helpers from '../js/modules/helpers.js';
+import extendDialogs from '../js/modules/dialogs.js';
+import createDataLayer from '../js/modules/data-layer.js';
+import extendInputs from '../js/modules/inputs.js';
+import createDynamicEvents from '../js/modules/dynamicEvents.js';
+// Attach classes to dom elements
+document.addEventListener("DOMContentLoaded", function () {
+    createDataLayer();
+    createDynamicEvents();
+    // Global stuff
+    helpers.addBodyClasses(document.body);
+    helpers.addGlobalEvents(document.body);
+    extendDialogs(document.body);
+    extendInputs(document.body);
+});

package/assets/js/tests/filterlist.spec.js

@@ -17,6 +17,6 @@ describe('addDataAttributes', () => {
     filterTheList(list, "Lucas");
     test('should add a class of d-none to each item except the one containing Lucas Myers', () => {
         expect(list.querySelectorAll('li:not(.d-none)').length).toEqual(1);
-        expect(list.querySelector('li:not(.d-none').textContent).toEqual('Lucas Myers');
+        expect(list.querySelector('li:not(.d-none)').textContent).toEqual('Lucas Myers');
     });
 });

package/assets/sass/_components.scss

@@ -2,10 +2,19 @@
 @use "_func" as *;
 
 @use 'components/nav.preload';
-@use 'components/card.preload';
 @use 'components/carousel.preload';
 @use 'components/multiselect.preload';
 @use 'components/inline-edit.preload';
+@use "components/charts.config.scss";
+
+ // Make sure the first 
+ main {
+  position: relative;
+  
+  > *:first-child {
+    padding-top: 2rem;
+  }
+}
 
 // #region Undefined web components
 main > :is(*):not(:defined):not(iam-carousel) {
@@ -26,6 +35,77 @@ main > :is(*):not(:defined):not(iam-carousel) {
   }
 }
 
+// #region Cards
+.card:not(:defined) {
+  box-shadow: var(--card-box-shadow);
+  border-radius: var(--card-border-radius);
+  padding: var(--card-top-padding) var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);
+}
+
+.row [class*="col"] > :is(label,button,a):has(.card:defined):first-child:last-child,
+.row [class*="col"] > .card:defined:first-child:last-child {
+  min-height: calc(100% - 2rem);
+  margin-bottom: 2rem!important;
+
+  .card:defined {
+    margin-bottom: 0!important;
+  }
+}
+
+iam-card:has([type=checkbox]:checked) {
+  --hover-outline-colour: var(--colour-info);
+  --outline-colour: var(--colour-info);
+}
+
+label:has(.card) {
+
+  padding: 0!important;
+  margin-right: 0!important;
+
+  &:before,
+  &:after {
+    display: none!important;
+  }
+
+  .optional-text {
+    display: none;
+  }
+
+  &:has(:checked) {
+    .card:defined {
+      outline: 2px solid var(--colour,var(--colour-primary));
+      outline-offset: -2px;
+    
+      ::part(body) {
+        background: none;
+      }
+      ::part(footer) {
+        background: none;
+      }
+    }
+  }
+}
+
+
+iam-filter-card:not(:has(i)){
+
+  border-left: 0.75rem solid var(--colour, var(--colour-primary));
+}
+
+.card .badge:not([class*="bg-"]):not([class*="wider-colour-"]){
+
+  background-color: var(--colour-canvas);
+  outline: 1px solid var(--colour-light);
+}
+
+
+a[target="_blank"] .card {
+
+  --icon: var(--icon-new-tab);
+}
+
+// #endregion
+
 // Search
 iam-search input:not(.is-invalid):not(:invalid) {
   background: none!important;

package/assets/sass/_corefiles.scss

@@ -4,8 +4,12 @@
 @layer reset, elements, components, templates, utilities, overrides;
 
 
+$root: ":root"!default;
+$layers: "true"!default;
+
 // Foundations
 @include layer('reset') {
+  
   @import "foundations/root.scss";
   @import "foundations/reboot.scss";
 }
@@ -16,19 +20,9 @@
 
 @include layer('components') {
 
-  // Make sure the first 
-  main {
-    position: relative;
-    
-    > *:first-child {
-      padding-top: 2rem;
-    }
-  }
-
   // Deal with preloaded state of native components
   @import "_components.scss";
 
-  @import "components/charts.config.scss";
 }
 
 @include layer('templates') {

package/assets/sass/_elements.scss

@@ -11,6 +11,8 @@
 @import "elements/links.scss";
 @import "elements/buttons";
 @import "elements/dialog.scss";
+@import "elements/popover.scss";
+@import "elements/modal.scss";
 @import "elements/admin-panel.scss";
   
 @import "elements/forms.scss";

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

@@ -0,0 +1,229 @@
+@use "../_func.scss" as *;
+@use "card.module.scss" as *;
+@use "../elements/dialog.scss" as *;
+@use "../elements/popover.scss" as *;
+@use "../elements/buttons.scss" as *;
+
+:host {
+  --card-right-padding: 1rem;
+  //--card-head-height: 10rem;
+  --card-icon-right: 1rem;
+
+}
+
+:host(:is(:hover,:focus,.hover):not(.prevent-hover)) {
+  --hover-outline-colour-default: var(--colour, var(--colour-primary));
+  outline: 2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));
+  outline-offset: -2px;
+}
+
+:host(:is(:active,.active):not(.prevent-hover)) {
+  --card-icon-right: var(--card-icon-right-overide,0.5rem);
+  outline: none;
+}
+
+:host(.prevent-hover){
+
+  pointer-events: none;
+
+  * {
+    pointer-events: all;
+  }
+}
+
+// #region Right arrow
+:host(.show-icon) .card__body {
+  --card-right-padding: 3.5rem;
+  
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    right: var(--card-icon-right);
+    bottom: var(--card-bottom-padding);
+    height: rem(24);
+    width: rem(24);
+    background: var(--colour-warning);
+    border-radius: 50%;
+  }
+
+  &:after {
+    background: var(--colour-primary-theme);
+    mask-image: var(--icon,var(--icon-arrow));
+    mask-size: 50%;
+    mask-repeat: no-repeat;
+    mask-position: 50% 50%;
+    -webkit-mask-image: var(--icon,var(--icon-arrow));
+    -webkit-mask-size: 50%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 50% 50%;
+    z-index: 2;
+  }
+}
+
+:host(:is(:hover,:focus,.hover):not(.prevent-hover):not([class*="colour-"])) {
+  
+  .card__body {
+
+    &:before {
+      background: var(--hover-icon-bg, var(--colour-primary-theme));
+    }
+    &:after {
+      background: var(--hover-icon-colour, #ffffff);
+    }
+  }
+}
+
+:host(:is(:active, .active):not(.prevent-hover):not([class*="colour-"])){
+
+  .card__body:before {
+    background: var(--hover-icon-bg, var(--colour-primary-theme));
+  }
+  .card__body:after {
+    background: var(--hover-icon-colour, #ffffff);
+  }
+}
+// #endregion
+
+// #region illustration
+.card__body {
+  &:has(.card__illustration) {
+
+    align-items: center;
+    display: flex;
+
+    .card__illustration {
+      height: rem(64);
+      width: rem(64);
+      margin-right: rem(24);
+      margin-top: rem(-20);
+      margin-bottom: rem(-20);
+      position: relative;
+
+      img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }    
+  }
+}
+
+// #endregion
+
+// #region border left
+:host([class*="colour-"]) {
+  
+  border-left: rem(12) solid var(--colour,var(--colour-primary));
+}
+// #endregion
+
+// #region secondary button
+slot[name="secondary"] {
+  display: block;
+  position: absolute;
+  top: 0.5rem;
+  right: 0;
+  margin: 0.5rem 0.5rem 0 0;
+  z-index: 999;
+}
+
+::slotted([slot="secondary"]:not(:hover,:focus,:active,.hover)) {
+
+  background: none!important;
+  color: var(--colour-btn)!important;
+}
+// #endregion
+
+// #region checkbox
+::slotted([slot="checkbox"]){
+
+  position: absolute!important;
+  top: 0.5rem;
+  right: 0.5rem;
+  width: rem(32);
+  height: rem(32);
+  height: rem(40);
+  overflow: hidden;
+}
+// #endregion
+
+// #region Multi-action card
+.dialog__wrapper {
+  position: absolute;
+  right: 1rem;
+  bottom: 2rem;
+  width: 3rem !important;
+  left: auto;
+  z-index: 999;
+
+
+  > .btn:before {
+    content: "\f142";
+    font-family: "Font Awesome 6 Pro";
+  }
+
+
+  > [popover] {
+    
+    display: var(--menu-display, none);
+    position: fixed;
+    top: anchor(top);
+    position-anchor: --anchor-el;
+    left: anchor(right);
+    right: auto;
+    margin: 0 0 0 #{rem(4)};
+    padding: rem(16);
+
+
+    &::backdrop {
+      display: none;
+    }
+  }
+
+  > [popover]:popover-open {
+
+    display: block!important;
+  }
+
+  &:has([popover]:popover-open) > button {
+    background-color: var(--colour);
+  }
+
+  > button[popovertarget] {
+    margin: 0;
+    anchor-name: --anchor-el;
+
+    &:not(:hover,:focus,:focus-within,:active){
+        
+      background: var(--ellipsis-bg);
+    }
+  }
+}
+
+::slotted([slot="btns"]){
+  border: none !important;
+  margin: 0 !important;
+  display: block!important;
+  width: fit-content;
+}
+::slotted([slot="primary-action"]){
+  overflow: hidden;
+  background-color: transparent;
+  text-indent: -300%;
+  position: absolute!important;
+  inset: 0;
+  margin: 0!important;
+  z-index: 99;
+  border: none;
+}
+:host(:not(.prevent-hover)) ::slotted([slot="primary-action"]:is(:hover,:focus,.hover)) {
+  --hover-outline-colour-default: var(--colour, var(--colour-primary));
+  outline: 2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));
+  outline-offset: -2px;
+  border-radius: var(--card-border-radius)!important;
+}
+// #endregion

package/assets/sass/components/card.module.scss

@@ -0,0 +1,154 @@
+@use "../_func.scss" as *;
+
+:host {
+  --card-icon-right: 1rem;
+  --card-head-top-padding: 2rem;
+  --card-head-bottom-padding: 2rem;
+  --card-footer-bottom-padding: 1.5rem;
+  --card-head-height: 6rem;
+
+  box-shadow: var(--card-box-shadow);
+  border-radius: var(--card-border-radius);
+  position: relative;
+  font-weight: bold;
+  font-size: rem(18);
+  line-height: rem(24);
+  color: var(--colour-primary);
+  //min-height: calc(100% - 2rem);
+  width: 100%;
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  z-index: 0;
+  background: var(--colour-canvas-2);
+  outline: 2px solid var(--outline-colour,--colour-canvas-2);
+  outline-offset: -2px;
+  margin-bottom: 2rem;
+
+  > * {
+    width: 100%;
+    box-sizing: border-box;;
+  }
+}
+
+:host-context(:is(a,label,button)) {
+  margin-bottom: 0!important;
+}
+
+:host(.border-0) {
+  box-shadow: none;
+  --card-left-padding: 0rem;
+  outline-offset: 1px!important;
+}
+
+.card__head:has(img) {
+  
+  min-height: var(--card-head-height);
+  position: relative;
+  overflow: hidden;
+  background: rgba(0,0,0,0.1);
+  z-index: -1;
+
+  > img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: -2px;
+    width: calc(100% + 4px);
+    height: calc(100% + 4px);
+    object-fit: cover;
+  }
+}
+
+.card__body {
+  //position: relative;
+  padding: var(--card-head-top-padding) var(--card-right-padding) var(--card-head-bottom-padding) var(--card-left-padding);
+  //z-index: -1;
+}
+
+.card__footer {
+  margin-top: 0;
+  padding: 0 var(--card-right-padding) 0 var(--card-left-padding);
+}
+
+::slotted(i){
+  font-size: rem(24)!important;
+  margin: -3px var(--card-icon-right) 0 0!important;
+  vertical-align: middle!important;
+}
+::slotted(i:not(.fa-light):not(.fa-bold)){
+  font-weight: 400!important;
+}
+
+::slotted(.badge){
+  margin-bottom: 0.375rem!important;
+}
+::slotted(span:not(.badge)){
+  display: block!important;
+  font-weight: normal!important;
+  font-size: rem(16)!important;
+}
+::slotted(small){
+  padding-top: rem(16)!important;
+  display: block!important;
+  font-weight: normal!important;
+  padding-bottom: 0!important;
+  color: var(--colour-body);
+}
+::slotted(span:not(.badge):not([class*="pt-"])){
+  padding-top: rem(24)!important;
+}
+
+::slotted(:is(a,button)[slot="footer"]){
+  margin-bottom: var(--card-footer-bottom-padding)!important;
+}
+
+// #region Show total number
+.card__body:has(.card__total) {
+  --card-head-top-padding: 1rem;
+  --card-head-bottom-padding: 1.5rem;
+}
+
+.card__total {
+  font-size: rem(48);
+  line-height: rem(48);
+  padding-right: rem(16);
+  margin-top: 0.5rem;
+
+  i {
+    font-family: var(--fa-style-family, "Font Awesome 6 Pro");
+    font-weight: var(--fa-style, 900);
+
+    display: block !important;
+    font-size: 2.5rem !important;
+    margin: .5rem 0 .5rem 0 !important;
+  }
+}
+
+::slotted([slot="total-icon"]) {
+  display: block !important;
+  font-size: 2.5rem !important;
+  margin: .5rem 0 .5rem 0 !important;
+  line-height: 2.5rem;
+}
+
+// #endregion
+
+
+// #region badges
+.card__head:has(img) ~ .card__badges {
+  
+  position: absolute;
+  top: 0;
+  text-align: left;
+  left: 0;
+  z-index: 9;
+}
+
+.card__badges {
+  
+  padding: var(--card-badges-top-padding, 1rem) var(--card-right-padding) 0 var(--card-left-padding);
+  margin-bottom: -1.5rem;
+}
+// #endregion

package/assets/sass/components/charts.config.scss

@@ -1,3 +1,6 @@
+@use "sass:math";
+@use "../_func" as *;
+
 iam-barchart {
 
   --chart-bar-alignment: left;

package/assets/sass/components/charts.module.scss

@@ -483,10 +483,12 @@ $chart-height-lg: #{rem(200)}!default;
         position: relative;
         padding: 0;
         background: var(--chart-colour);
-
-        @media screen and (prefers-color-scheme: dark) {
+        
+        & {
+          @media screen and (prefers-color-scheme: dark) {
           
-          background: color-mix(in oklab, var(--chart-colour), black 20%);
+            background: color-mix(in oklab, var(--chart-colour), black 20%);
+          }
         }
 
         border-top-right-radius: 4px;

package/assets/sass/components/filter-card.component.scss

@@ -0,0 +1,106 @@
+@use "../_func.scss" as *;
+@use "card.module.scss" as *;
+
+:host {
+
+  --top-padding: #{rem(24)};
+  --right-padding: 1rem;
+  --bottom-padding: #{rem(24)};
+  --left-padding: 1rem;
+
+  &:has(.card__total) .card__body{
+
+    align-items: center;
+    display: flex;
+  }
+
+  &:before,
+  &:after {
+    display: none;
+  }
+
+  &.card--has-icon {
+    --bottom-padding: #{rem(16)};
+    border: none;
+  }
+
+  .icon {
+    font-size: rem(18)!important;
+    height: rem(18)!important;
+    margin: 0 0 0.5rem 0!important;
+    font-weight: 400!important;
+    display: block!important;
+  }
+    
+  .card__total {
+    margin-top: 0;
+    order: -1;
+  }
+}
+
+
+:host(:is(:hover,:focus,.hover)) {
+
+  outline: none;
+    
+  :is(.card__body,.card__footer) {
+    background: #EEEEEE;
+  }
+}
+
+:host-context(:is(:checked, .checked)),
+:host(:is(:active, .active)) {
+
+  outline: 2px solid var(--colour,var(--colour-primary));
+  outline-offset: -2px;
+
+  .card__body {
+    background: none;
+  }
+  .card__footer {
+    background: none;
+  }
+}
+
+
+::slotted(i) {
+  display: block !important;
+  font-size: rem(18)!important;
+  margin: 0 0 0.5rem 0!important;
+}
+
+
+// #region card with a flag 
+:host(.card--flag) {
+  position: relative;
+  
+  &:after {
+    content: var(--card-flag-icon, "\f024");
+    font-family: "Font Awesome 6 Pro";
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    font-size: rem(16);
+    line-height: 1;
+    height: rem(16);
+    width: rem(16);
+    display: inline-block;
+    font-weight: normal;
+    color: var(--colour, var(--colour-primary));
+  }
+}
+// #endregion
+
+// #region Show total number
+.card__body:has(.card__total) {
+  --card-head-top-padding: 2rem;
+  --card-head-bottom-padding: 2rem;
+  display: flex;
+  align-items: center;
+}
+
+.card__total {
+  order: -1;
+}
+
+// #endregion

package/assets/sass/components/multiselect.preload.scss

@@ -34,4 +34,11 @@ iam-multiselect:has(label:not([slot="checked"]):not([slot="notmatched"])) {
 iam-multiselect:has(label[slot="checked"]) {
 
   --display-button: block;
+}
+
+@include dark-mode() {
+  iam-multiselect :is(.tag,.badge):not([slot="checked"]){
+
+    color: var(--colour-heading);
+  }
 }