@iamproperty/components 3.4.7 → 3.5.0

package/assets/sass/foundations/buttons.scss

@@ -0,0 +1,366 @@
+@use "../_func.scss" as *;
+
+// #region button primary
+.btn {
+
+  &:not(.btn-secondary)[class*="colour-"]{
+    --colour-btn-bg: var(--colour);
+    --colour-btn-border: var(--colour);
+  }
+
+  &:is(.colour-primary,.colour-dark,.colour-danger,.colour-black) {
+    --colour-btn: #{$colour-inverted};
+  }
+
+  display: inline-block;
+  font-weight: bold;
+  text-align: left;
+  text-decoration: none;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+
+  background: var(--colour-btn-bg);
+  border: 2px solid var(--colour-btn-border);
+  color: var(--colour-btn);
+
+  font-size: rem(18);
+  line-height: rem(24);
+  padding: calc(rem(12) - 2px) calc(rem(40) - 2px);
+  border-radius: rem(24);
+  margin-bottom: rem(24);
+  margin-right: rem(24);
+  transition: background .5s, color .5s;
+  height: auto;
+  max-width: fit-content;
+  appearance: none;
+  white-space: nowrap;
+
+  a:is(:hover, :focus, .hover, :focus-within):not([disabled],:active, .active) &,
+  &:is(:hover, :focus, .hover, :focus-within):not([disabled],:active, .active) {
+    outline: 0;
+    text-decoration: none;
+
+    background: var(--colour-btn-bg-hover);
+    color: var(--colour-btn-hover);
+    border-radius: rem(24);
+  }
+
+  a:is(:active, .active):not([disabled]) &,
+  &:is(:active, .active):not([disabled]) {
+    
+    filter: brightness(85%);
+    transition: background .1s, color .1s;
+    color: var(--colour-btn);
+    border-radius: rem(24);
+  }
+
+  a:disabled &,
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+// #endregion
+
+// #region secondary button
+.btn-secondary {
+
+  background: var(--colour-btn-secondary-bg);
+  border: 2px solid var(--colour-btn-secondary-border);
+  color: var(--colour-btn-secondary);
+}
+
+a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
+.btn-secondary:is(:hover, :focus, .hover, :focus-within, :active, .active):not([disabled]) {
+  background: var(--colour-btn-secondary-bg-hover);
+  color: var(--colour-btn-secondary-hover);
+}
+// #endregion
+
+// #region button with icon
+.btn {
+  &[class*="fa-"]:before {
+
+    font-family: "Font Awesome 6 Pro";
+    margin-right: 1rem;
+  }
+
+  [class*="fa-"]{
+    
+    font-family: "Font Awesome 6 Pro";
+    margin-right: 1rem;
+
+    font-style: inherit;
+    &:not(:first-child){
+      margin-left: 1rem;
+      margin-right: 0;
+    }
+  }
+}
+// #endregion
+
+// #region button with prompt 
+.btn.btn--prompt {
+  &:after {
+    content: "";
+    height: rem(24);
+    width: rem(16);
+    display: inline-block;
+    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%;
+    vertical-align: bottom;
+    margin-left: 1rem;
+  }
+
+  
+  a:is(:hover, :focus, .hover):not([disabled], :active, .active) &,
+  &:is(:hover, :focus, .hover):not([disabled], :active, .active) {
+    &:after {
+      margin-left: 1.5rem;
+      margin-right: -0.5rem;
+    }
+  }
+}
+// #endregion
+
+// #region button small and tag
+.btn.btn-sm {
+
+  padding: em(8) em(32);
+}
+// #endregion
+
+// #region btn compact
+.btn-compact {
+  padding: calc(rem(12) - 2px)!important;
+  margin-bottom: rem(8)!important;
+  margin-right: rem(8)!important;
+
+  text-align: center;
+  width: calc(rem(48) - 4px);
+  height: calc(rem(48) - 4px)!important;
+  text-indent: -300px;
+  overflow: hidden;
+
+  position: relative;
+
+  &:before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    text-indent: 0;
+    line-height: calc(3rem - 6px);
+    font-weight: 900;
+  }
+
+  &.btn-secondary {
+    
+    --colour-btn-border: transparent;
+    border-color: transparent;
+
+    &:not([class*="colour-"]){
+      --colour: var(--colour-light)
+    }
+  }
+
+  &.btn-secondary:is(:hover, :focus, .hover, :active, .active, :focus-within):not([disabled]) {
+    background-color: var(--colour);
+    color: var(--colour-primary);
+
+    &:is(.colour-primary,.colour-dark,.colour-danger,.colour-black) {
+      color: var(--colour-inverted);
+    }
+  }
+}
+// #endregion
+
+// #region btn with colour success
+.btn.colour-success {
+
+  --colour-btn-bg-hover: var(--colour);
+  --colour-btn-border-hover: var(--colour);
+  position: relative;
+  padding-left: rem(56);
+  padding-right: rem(56);
+
+  a:is(:hover, :focus, .hover):not([disabled], :active, .active) &,
+  &:is(:hover, :focus, .hover):not([disabled], :active, .active) {
+
+    padding-left: rem(40);
+    padding-right: rem(40);
+
+    &:before {
+      content: "\f00c";
+      font-family: "Font Awesome 6 Pro";
+      margin-right: 1rem;
+      font-style: inherit;
+      width: 1rem;
+      display: inline-block;
+      height: rem(24);
+      vertical-align: bottom;
+    }
+  }
+
+
+}
+// #endregion
+
+// #region Select as button
+
+.btn:has(select) {
+  position: relative;
+  padding-right: rem(56);
+
+  &:not(.mw-100){
+    max-width: rem(112 + 40 + 56);
+  }
+
+  select {
+    
+    padding: calc(rem(12) - 2px) calc(rem(40) - 2px);
+    margin: calc(rem(-12)) calc(rem(-40));
+    
+    padding-right: rem(56);
+    margin-right: rem(-56);
+    border-radius: rem(24);
+    appearance: none;
+    background: none;
+    border: none!important;
+    color: inherit;
+    display: block;
+    min-width: calc(100% + rem(40) + rem(56));
+    outline: none;
+    font-weight: bold;
+    
+    option {
+      padding: 0;
+      text-align: left;
+      color: var(--colour-primary);
+    }
+  }
+
+
+  &:after {
+    position: absolute;
+    top: rem(8);
+    right: rem(40);
+
+    content: "";
+    height: rem(24);
+    width: rem(16);
+    display: inline-block;
+    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%;
+    vertical-align: bottom;
+    margin-left: 1rem;
+    transform: rotate(90deg);
+    pointer-events: none;
+  }
+
+  &.active:after{
+    transform: rotate(-90deg);
+  }
+}
+
+.btn:has(select:focus):after{
+  transform: rotate(-90deg);
+}
+
+// #endregion
+
+
+
+// #region button that opens up a filter dialog
+.btn-filter {
+  &: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-filter);
+    mask-size: 100%;
+    mask-repeat: no-repeat;
+    mask-position: 50% 50%;
+    -webkit-mask-image: var(--icon-filter);
+    -webkit-mask-size: 100%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 50% 50%;
+
+  }
+}
+// #endregion
+
+
+// #region Rertiary Button
+
+.btn {
+
+  &.btn-tertiary {
+
+    background-color: transparent;
+    border: none;
+    color: var(--colour-link);
+    margin: 0 rem(24) rem(24) 0;
+    padding: 0;
+    font-size: rem(18);
+    line-height: rem(24);
+    min-height: rem(24);
+    position: relative;
+
+    &:not(.text-decoration-none):after {
+      position: absolute;
+      content: "";
+      top: 100%;
+      left: 50%;
+      height: 2px;
+      width: 100%;
+      transform: translate(-50%,0);
+      background: var(--colour-underline);
+      transition: width 0.5s;
+    }
+
+    [class*=fa-] {
+      margin-left: 0;
+      margin-right: 0.5rem;
+    }
+    [class*=fa-]:not(:first-child) {
+      margin-left: 0.5rem;
+      margin-right: 0;
+    }
+
+    &:is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) {
+
+      &:after {
+        width: 60%;
+      }
+    }
+    &:is(:active, .active):not([disabled]) {
+
+      color: var(--colour-active);
+    }
+  }
+
+}
+

package/assets/sass/foundations/links.scss

@@ -1,105 +1,103 @@
 @use "../_func.scss" as *;
 
-a,
+// global
+a {
+  color: var(--colour-link);
+
+  &:is(:hover, :focus, .hover, :focus-within) {
+
+    color: var(--colour-hover);
+  }   
+
+  &:is(:active, .active) {
+
+    color: var(--colour-active);
+  }
+}
+
+a:where(:not(.btn):not(:has(.card)):not(:has(iam-card))),
 .link {
-  @include var (color, --colour-link);
-  display: inline-block;
-  min-height: em(28);
-  margin-bottom: rem(16);
-  position: relative;
+  background-color: transparent;
   text-decoration: none;
-  background: none;
+  display: inline-block;
   border: none;
-  
-  &:not(.text-decoration-none):not(.btn):before {
-    content: '';
-    position: absolute;
-    left: 50%;
-    bottom: 0;
-    width: 100%;
-    height: 2px;
-    @include var(background-color,--colour-underline);
-    -webkit-transform: translateX(-50%);
-    -ms-transform: translateX(-50%);
-    transform: translateX(-50%);
-    -webkit-transition: .3s ease-in;
-    transition: .3s ease-in;
-  }
+  color: var(--colour-link);
+  margin: 0 rem(24) rem(24) 0;
+  padding: 0;
+  font-size: rem(18);
+  line-height: rem(24);
+  min-height: rem(24);
+  position: relative;
+  font-weight: bold;
 
-  &:not(.text-decoration-none):not(.btn):hover:before,
-  .card:hover &:before,
-  details[open] &:not(.text-decoration-none):not(.btn):before {
-    width: 0%;
+  &:not(.text-decoration-none){
+    &:after {
+      position: absolute;
+      content: "";
+      top: 100%;
+      left: 50%;
+      height: 2px;
+      width: 100%;
+      transform: translate(-50%,0);
+      background: var(--colour-underline);
+      transition: width 0.5s;
+    }
   }
 
-  &:is(:hover, :focus, .focus),
-  .card:hover &,
-  .card:focus &  {
-    @include var (color, --colour-hover);
+  [class*=fa-] {
+    margin-left: 0;
+    margin-right: 0.5rem;
   }
-
-  &:active,
-  &.active,
-  .card:active & {
-    @include var (color, --colour-active);
+  [class*=fa-]:not(:first-child) {
+    margin-left: 0.5rem;
+    margin-right: 0;
   }
 
-  &[target="_blank"]:not(.card):after,
-  &.card[target="_blank"] .btn:after {
-    
-    content: "";
-    height: 1em;    
-    width: 1em;
-    margin-left: 0.5em;
-    margin-right: -0.2em;
-    display: inline-block;
-    vertical-align: baseline;
-    margin-bottom: -0.15em;
-
-    mask-image: var(--icon-blank);
-    mask-size: 100% 100%;
-    mask-repeat: no-repeat;
-    mask-position: 0 0;
-  
-    -webkit-mask-image: var(--icon-blank);
-    -webkit-mask-size: 100% 100%;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: 0 0;
-    background-color: currentColor;
-  }
-  
+  &:is(:hover, :focus, .hover, :active, .active, :focus-within) {
+
+    &:after {
+      width: 60%;
+    }
+  }     
 }
+
 @include inline-text(){
-  a {
+  a:not(.btn) {
     min-height: none;
     display: inline;
-    margin-bottom: 0;
+    margin: 0;
+    text-decoration: underline;
+
+    &:after {
+      display: none;
+    }
+
+    [class*="fa-"]{
+      margin: 0;
+      display: inline;
+    }
+
     text-decoration: underline;
     text-underline-offset: 0.2em;
     text-decoration-thickness: 2px;
-    text-decoration-color: var(--colour-underline);
 
-    &:hover,
-    &:focus,
-    &:active{
+    &:is(:hover, :focus, .hover, :focus-within) {
 
+      color: var(--colour-hover);
       text-decoration: none;
-    }
-  
-    &:before {
+    }   
 
-      display: none;
-    }
+    &:is(:active, .active) {
 
-    &[target="_blank"]:after {
-      margin-left: 0.25em;
-      margin-right: 0.2em;
+      color: var(--colour-active);
+      text-decoration: none;
     }
   }
 }
 
-// Support card component
+// #region Support card component
 :is(a,button,label):has(.card, iam-card){
+
   &:before {
     display: none;
   }
@@ -109,6 +107,7 @@ a,
   display: flex;
   margin: 0 0 rem(24) 0;
   outline: none!important;
+  text-decoration: none;
 
   &:not(.d-inline-block){
       
@@ -122,4 +121,5 @@ a,
 
 .col > :is(a,button):has(.card, iam-card):first-child:last-child{
   min-height: calc(100% - rem(24));
-}
+}
+// #endregion

package/assets/sass/foundations/media.scss

@@ -1,6 +1,6 @@
 @use "../_func" as *;
 
-@import "../../../node_modules/bootstrap/scss/_images.scss";
+@import "../../bootstrap/scss/_images.scss";
 
 img {
   max-width: 100%;

package/assets/sass/foundations/reboot.scss

@@ -1,6 +1,6 @@
 @use "../_func" as *;
 
-@import "../../../node_modules/bootstrap/scss/_reboot.scss";
+@import "../../bootstrap/scss/_reboot.scss";
 
 /* Reset & Defaults - Most of the resets/normailization stuff is done by Bootstrap */
 html {
@@ -43,7 +43,8 @@ html {
 }
 
 body {
-
+  color-scheme: light dark;
+  @include var(background,--colour-canvas);
   @include var(font-family,--font-body);
   @include var(color,--colour-body);
   width: 100%;
@@ -69,9 +70,6 @@ div::-webkit-scrollbar-thumb {
 }
 //#endregion
 
-#app {
-}
-
 body > footer,
 body > #app > footer {
   position: sticky;

package/assets/sass/foundations/root.scss

@@ -1,6 +1,6 @@
 @use "../func" as *;
 
-@import "../../../node_modules/bootstrap/scss/_root.scss";
+@import "../../bootstrap/scss/_root.scss";
 
 :root {
   // Print out the $vars array setup in the variables file so they can be used as CSS vars
@@ -25,27 +25,15 @@
   }
 
   // Extra vars needed
-  --body-bg: white;
-  --colour-underline: var(--colour-primary);
-  --colour-heading: var(--colour-primary);
-  --alpha: var(--bg-opacity,1);
-  --#{$variable-prefix}gradient: #{$gradient};
   --content-max-width: #{$content-max-width};
+  
   --colour-brand: var(--colour-primary);
-
-  /* Button colours */
-  --btn-bg: var(--colour-warning);
-  --btn-text: var(--colour-primary);
-  --btn-hover-text: var(--colour-primary);
-  --btn-tertiary-bg: var(--colour-primary);
-  --btn-tertiary-hover-text: white;
+  
 }
 
 // Dark mode; functional colours get updated
 @media screen and (prefers-color-scheme: dark) {
   :root {
-    --body-bg: var(--colour-primary);
-    --colour-admin: var(--colour-primary);
     @include invert-colours();
   }
 
@@ -53,38 +41,27 @@
     color: #{$colour-inverted}!important;
   }
 
-  body .bg-white {
-    background-color: transparent!important;
-  }
+  
 }
 
 @media screen {
 
   // 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-primary):not(.bg-dark):not(.bg-danger):not(.bg-black):not(.invert-colours):not(.bg-white):not(.bg-admin) {
+  [class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.bg-canvas):not(.invert-colours) {
 
     @include reset-colours();
 
     --colour-body: var(--colour-primary);
     --colour-heading: var(--colour-primary);
     color: var(--colour-body);
-
-    --btn-bg: var(--colour-primary);
-    --btn-text: var(--colour-white);
     --colour-underline: var(--colour-primary);
-
-    .btn-secondary {
-
-      --btn-text: var(--colour-primary);
-    }
-    
   }
 
   
 
   // Slight colour adjustments on the light background to match brand guidelines
   .bg-light[class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.prevent-invert) {
-    --body-bg: var(--colour-light);
+    --colour-canvas: var(--colour-light);
     --colour-heading: var(--colour-dark);
     color: var(--colour-dark);
   }
@@ -96,6 +73,8 @@
   .bg-black:not(.prevent-invert),
   .invert-colours {
     
+    --btn-bg: #{$colour-inverted};
+
     @if $compatible != "true" {
       
       @include invert-colours();
@@ -103,6 +82,7 @@
     color: #{$colour-inverted};
   }
 
+
   // Only update the the colour of the underline on dark backgrounds except the primary as the secondary colour looks good on it
   .bg-dark:not(.prevent-invert),
   .bg-danger:not(.prevent-invert),

package/assets/sass/foundations/type.scss

@@ -11,7 +11,7 @@ small {
   @include font-size($small-font-size);
 }
 
-@import "../../../node_modules/bootstrap/scss/_type.scss";
+@import "../../bootstrap/scss/_type.scss";
 
 // #region headings
 %heading {

package/assets/ts/components/table/table.component.ts

@@ -84,6 +84,11 @@ class iamTable extends HTMLElement {
       createPaginationButttons(this,this.pagination);
     }
 
+    this.shadowRoot.querySelector('.table__wrapper').addEventListener("scroll", (event) => {
+
+      if(this.table.querySelector('dialog[open]'))
+        this.table.querySelector('dialog[open]').close();
+    });
   }