@iamproperty/components 6.0.0 → 6.1.0--beta2

package/assets/sass/_utilities.scss

@@ -1,13 +1,83 @@
 // Helpers
 //@import "../bootstrap/scss/helpers";
-@import "../bootstrap/scss/helpers/clearfix";
+.clearfix {
+  @include clearfix();
+}
+
 //@import "../bootstrap/scss/helpers/colored-links";
-@import "../bootstrap/scss/helpers/ratio";
-@import "../bootstrap/scss/helpers/position";
-@import "../bootstrap/scss/helpers/stacks";
-@import "../bootstrap/scss/helpers/visually-hidden";
+.ratio {
+  position: relative;
+  width: 100%;
+
+  &::before {
+    display: block;
+    padding-top: var(--#{$prefix}aspect-ratio);
+    content: "";
+  }
+
+  > * {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@each $key, $ratio in $aspect-ratios {
+  .ratio-#{$key} {
+    --#{$prefix}aspect-ratio: #{$ratio};
+  }
+}
+
+
+.fixed-top {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: $zindex-fixed;
+}
+
+.fixed-bottom {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $zindex-fixed;
+}
+
+// Responsive sticky top and bottom
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .sticky#{$infix}-top {
+      position: sticky;
+      top: 0;
+      z-index: $zindex-sticky;
+    }
+
+    .sticky#{$infix}-bottom {
+      position: sticky;
+      bottom: 0;
+      z-index: $zindex-sticky;
+    }
+  }
+}
+
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+  @include visually-hidden();
+}
+
+
 //@import "../bootstrap/scss/helpers/stretched-link";
-@import "../bootstrap/scss/helpers/text-truncation";
+
+.text-truncate {
+  @include text-truncate();
+}
+
 //@import "../bootstrap/scss/helpers/vr";
 
 // Helpers
@@ -17,4 +87,53 @@
 @import "helpers/wider-colours.scss";
 
 // Utilities
-@import "../bootstrap/scss/utilities/_api.scss";
+
+// Loop over each breakpoint
+@each $breakpoint in map-keys($grid-breakpoints) {
+
+  // Generate media query if needed
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    // Loop over each utility property
+    @each $key, $utility in $utilities {
+      // The utility can be disabled with `false`, thus check if the utility is a map first
+      // Only proceed if responsive media queries are enabled or if it's the base media query
+      @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
+        @include generate-utility($utility, $infix);
+      }
+    }
+  }
+}
+
+// RFS rescaling
+/*
+@media (min-width: $rfs-mq-value) {
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    @if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
+      // Loop over each utility property
+      @each $key, $utility in $utilities {
+        // The utility can be disabled with `false`, thus check if the utility is a map first
+        // Only proceed if responsive media queries are enabled or if it's the base media query
+        @if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") {
+          @include generate-utility($utility, $infix, true);
+        }
+      }
+    }
+  }
+}
+*/
+
+// Print utilities
+@media print {
+  @each $key, $utility in $utilities {
+    // The utility can be disabled with `false`, thus check if the utility is a map first
+    // Then check if the utility needs print styles
+    @if type-of($utility) == "map" and map-get($utility, print) == true {
+      @include generate-utility($utility, "-print");
+    }
+  }
+}
+

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