@iamproperty/components 5.0.0 → 5.1.0-beta10

package/assets/js/tests/slider.spec.js

@@ -0,0 +1,20 @@
+// @ts-nocheck
+import '@testing-library/jest-dom';
+import "expect-puppeteer";
+import iamSlider from "../components/slider/slider.component.js";
+describe('The slider component', () => {
+    if (!window.customElements.get(`iam-slider`))
+        window.customElements.define(`iam-slider`, iamSlider);
+    test('should always show the minimum and maximum values that it can be set', () => {
+        document.body.innerHTML = `<label>Input field label <iam-slider><input type="number" name="percent" min="0" max="100" value="15" step="1" /></iam-slider></label>`;
+        let component = document.querySelector('iam-slider');
+        expect(component.shadowRoot.innerHTML).toContain('<div class="col min pe-2">0</div>');
+        expect(component.shadowRoot.innerHTML).toContain('<div class="col max ps-2">100</div>');
+    });
+    test('should always have a secondary way of inputing the value i.e. a number input field', () => {
+        document.body.innerHTML = `<label>Input field label <iam-slider><input type="number" name="percent" min="0" max="100" value="15" step="1" /></iam-slider></label>`;
+        let component = document.querySelector('iam-slider');
+        expect(component.querySelectorAll('input[type="number"]').length).toEqual(1);
+        expect(component.shadowRoot.querySelectorAll('input[type="range"]').length).toEqual(1);
+    });
+});

package/assets/sass/_components.scss

@@ -1,15 +1,9 @@
-@use "components/card.scss";
-@use "components/nav.scss";
 @use "components/header.scss";
 @use "components/testimonial.scss";
-@use "components/accordion.scss";
-@use "components/notification";
 @use "components/carousel.scss";
 @use "components/property-searchbar.scss";
-@use "components/tabs.scss";
 @use "components/charts.scss";
 @use "components/timeline.scss";
 @use "components/snapshot.scss";
 @use "components/stepper.scss";
 
-@use "components/pagination.scss";

package/assets/sass/_corefiles.scss

@@ -16,101 +16,22 @@
 
 @include layer('components') {
 
-// #region Undefined web components
-:is(*):not(:defined):not(iam-nav):not(iam-pagination) {
-  display: block;
-  padding: rem(24);
-  margin-bottom: rem(24);
-  border-radius: rem(8);
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 80rem;
-}
-
-main > :is(*):not(:defined) {
-
-  padding: var(--container-padding);
-  padding-top: 1rem;
-}
-
-@include media-breakpoint-up(md) {
+  // Make sure the first 
+  main {
+    position: relative;
     
-  main > :is(*):not(:defined) {
-    max-width: 100%!important;
-    padding-inline: calc(50% - #{rem(math.div(1112,2))});
-  }
-
-  iam-header:not(:defined) {
-    min-height: rem(470);
-  }
-}
-
-:is(iam-notification,iam-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);
-}
-
-main {
-  position: relative;
-  
-  > *:first-child {
-    padding-top: 2rem;
+    > *:first-child {
+      padding-top: 2rem;
+    }
   }
-}
-
-.container.notification__holder {
-
-  position: fixed;
-  top: var(--nav-height);
-  left: 50%;
-  transform: translate(-50%,0);
-  
-  bottom: 0;
-  z-index: 999999;
-  pointer-events: none;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  display: flex;
-  margin: 0;
-  width: 100%;
-  //max-width: rem(454);
-  flex-wrap: wrap;
-  align-content: flex-start;
-  flex-direction: column;
-  align-content: flex-end;
-  align-items: flex-end;
-
-  :is(.iam-notification, iam-notification) {
-    pointer-events: all;
-    margin: 0.5rem 0 0.5rem 0;
-  }
-
-  &.bottom {
-    flex-direction: column-reverse;
-  }
-
-  &.left {
-    align-content: flex-start;
-    align-items: flex-start;
-  }
-
-  &.middle {
-    align-content: space-around;
-    align-items: center;
-  }
-}
-// #endregion
 
-  @import "components/tabs.scss";
-  @import "components/accordion.scss";
-  @import "components/card-global.scss";
-  @import "components/actionbar-global.scss";
-  // Bootstrap elements
+  // Deal with preloaded state of native components
+  @import "components/component.native.scss";
 }
 
 @include layer('templates') {
   @import "templates/form.scss";
+  @import "templates/auth.scss";
 }
 
 @include layer('utilities') {

package/assets/sass/_elements.scss

@@ -13,7 +13,6 @@
 @import "elements/dialog.scss";
 @import "elements/admin-panel.scss";
   
-@import "../bootstrap/scss/forms/_form-range";
 @import "elements/forms.scss";
 
-@import "../bootstrap/scss/_badge.scss";
+@import "elements/badge.scss";

package/assets/sass/_functions/mixins.scss

@@ -211,3 +211,19 @@
     --colour-#{$color}: #{$value};
   }
 }
+
+@mixin slotted($el, $isComponent:"true"){
+  
+  @if $isComponent == "true" {
+    ::slotted(#{$el}) {
+    
+      @content;
+    }
+  }
+  @else {
+    #{$el} {
+    
+      @content;
+    }
+  }
+}

package/assets/sass/_functions/utilities.scss

@@ -201,23 +201,6 @@ $utilities: map-merge(
 );
 // #endregion
 
-// #region Max height classes
-$utilities: map-merge(
-  $utilities,
-  (
-    "max-heights": (
-      property: max-height,
-      class: mh,
-      values: (
-        "sm": #{rem(200)},
-        "md": #{rem(400)},
-        "lg": #{rem(600)}
-      )
-    )
-  )
-);
-// #endregion
-
 // #region Max height classes
 $utilities: map-merge(
   $utilities,

package/assets/sass/_functions/variables.scss

@@ -39,6 +39,7 @@ $vars: map-merge((
   "--container-padding-top": 0,
   "--container-padding-bottom": #{rem(16)},
   "--container-padding-x": #{rem($container-padding-x)},
+  "--container-padding-x-sm": #{rem($container-padding-x-sm)},
   "--container-padding-x-md": #{rem($container-padding-x-md)},
   "--container-padding": $container-padding,
   "--container-padding-sm": $container-padding-sm,

package/assets/sass/components/accordion.global.scss

@@ -0,0 +1,135 @@
+@use "../_func.scss" as *;
+
+.accordion-header {
+
+  padding: $accordion-button-padding-y var(--accordion-right-padding) $accordion-button-padding-y $accordion-button-padding-x;
+  color: var(--colour-heading);
+  text-align: left; // Reset button style
+  background-color: $accordion-button-bg;
+  overflow-anchor: none;
+  @include transition($accordion-transition);
+
+  --marker-bg: var(--colour-secondary);
+
+
+
+  cursor: pointer;
+  position: relative;
+  max-width: 100%;
+
+  .badge {
+    vertical-align: bottom;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+    margin-bottom: 0.1em;
+  }
+
+
+  &:before,
+  &:after {
+
+    content: "";
+    position: absolute;
+    right: var(--accordion-indent);
+    top: var(--accordion-icon-top);
+    margin-top: var(--accordion-icon-size-half);
+    width: var(--accordion-icon-size);
+    height: var(--accordion-icon-size);
+  }
+
+  &:before {
+    text-indent: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    background: var(--marker-bg);
+    border-radius: 100%;
+
+
+  }
+
+  // Accordion icon
+  &::after {
+    background: currentColor;
+    mask-image: escape-svg($accordion-button-icon);
+    mask-size: 50%;
+    mask-repeat: no-repeat;
+    mask-position: 50% 50%;
+  
+    -webkit-mask-image: escape-svg($accordion-button-icon);
+    -webkit-mask-size: 50%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 50% 50%;
+
+    @include transition($accordion-icon-transition);
+    transform: rotate(90deg);
+
+
+    @media (forced-colors: active) {
+      content: "\25BA";
+      mask-image: none;
+      -webkit-mask-image: none;
+    }
+
+  }
+
+  &:hover,
+  &:focus {
+
+    --marker-bg: var(--colour-warning);
+    color: var(--colour-hover);
+  }
+
+  &:hover {
+    z-index: var(--index-focus);
+  }
+
+  &:focus {
+    z-index: var(--index-focus);
+    border-color: $accordion-button-focus-border-color;
+    outline: 0;
+    box-shadow: $accordion-button-focus-box-shadow;
+  }
+
+  [open] > summary > & {
+    color: var(--colour-heading);
+    background-color: $accordion-button-active-bg;
+    
+    &::after {
+      
+      transform: rotate(-90deg);
+    }
+  }
+}
+
+// #region Coloured summary
+.accordion-header[class*="bg-"] {
+
+  .accordion-button {
+
+    border-bottom: 1px solid var(--colour-border);
+    margin-bottom: -1px;
+
+    &:before {
+      background: none!important;
+    }
+  }
+
+  &:hover .accordion-button {
+    opacity: 0.8;
+  }
+
+  & + .accordion-body {
+
+    padding-top: 2rem;
+  }
+}
+// #endregion
+
+.accordion-header {
+  margin-bottom: 0;
+}
+
+.accordion-header ~ * {
+  text-align: left;
+  padding-inline: $accordion-body-padding-x;
+}

package/assets/sass/components/accordion.scss

@@ -1,7 +1,7 @@
 @use "../_func.scss" as *;
 
 // Accordion
-:is(.accordion, iam-accordion) {
+:host {
   --accordion-indent: 0.75rem;
   --accordion-right-padding: 3rem;
   --accordion-y-padding: 1rem;
@@ -14,200 +14,14 @@
     --accordion-y-padding: 2rem;
     --accordion-icon-size: #{rem(48)};
     --accordion-icon-top: #{rem(20)};
-  }
-}
-
-.accordion-header {
-
-  padding: $accordion-button-padding-y var(--accordion-right-padding) $accordion-button-padding-y $accordion-button-padding-x;
-  color: var(--colour-heading);
-  text-align: left; // Reset button style
-  background-color: $accordion-button-bg;
-  overflow-anchor: none;
-  @include transition($accordion-transition);
-
-  --marker-bg: var(--colour-secondary);
-
-
-
-  cursor: pointer;
-  position: relative;
-  max-width: 100%;
-
-  .badge {
-    vertical-align: bottom;
-    margin-left: 0.5em;
-    margin-right: 0.5em;
-    margin-bottom: 0.1em;
-  }
-
-
-  &:before,
-  &:after {
-
-    content: "";
-    position: absolute;
-    right: var(--accordion-indent);
-    top: var(--accordion-icon-top);
-    margin-top: var(--accordion-icon-size-half);
-    width: var(--accordion-icon-size);
-    height: var(--accordion-icon-size);
-  }
-
-  &:before {
-    text-indent: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    background: var(--marker-bg);
-    border-radius: 100%;
-
-
-  }
-
-  // Accordion icon
-  &::after {
-    background: currentColor;
-    mask-image: escape-svg($accordion-button-icon);
-    mask-size: 50%;
-    mask-repeat: no-repeat;
-    mask-position: 50% 50%;
+  }  
   
-    -webkit-mask-image: escape-svg($accordion-button-icon);
-    -webkit-mask-size: 50%;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: 50% 50%;
-
-    @include transition($accordion-icon-transition);
-    transform: rotate(90deg);
-
-
-    @media (forced-colors: active) {
-      content: "\25BA";
-      mask-image: none;
-      -webkit-mask-image: none;
-    }
-
-  }
-
-  &:hover,
-  &:focus {
-
-    --marker-bg: var(--colour-warning);
-    color: var(--colour-hover);
-  }
-
-  &:hover {
-    z-index: var(--index-focus);
-  }
-
-  &:focus {
-    z-index: var(--index-focus);
-    border-color: $accordion-button-focus-border-color;
-    outline: 0;
-    box-shadow: $accordion-button-focus-box-shadow;
-  }
-
-  [open] > summary > & {
-    color: var(--colour-heading);
-    background-color: $accordion-button-active-bg;
-    
-    &::after {
-      
-      transform: rotate(-90deg);
-    }
-  }
-}
-
-// #region Coloured summary
-.accordion-header[class*="bg-"] {
-
-  .accordion-button {
-
-    border-bottom: 1px solid var(--colour-border);
-    margin-bottom: -1px;
-
-    &:before {
-      background: none!important;
-    }
-  }
-
-  &:hover .accordion-button {
-    opacity: 0.8;
-  }
-
-  & + .accordion-body {
-
-    padding-top: 2rem;
-  }
-}
-// #endregion
-
-
-
-.accordion-header {
-  margin-bottom: 0;
-}
-
-.accordion-item {
-  background-color: $accordion-bg;
-  border-bottom: $accordion-border-width solid $accordion-border-color;
   margin-bottom: 2rem;
-
-  &:first-of-type {
     border-top: $accordion-border-width solid $accordion-border-color;
-  }
-
-  & + .accordion-item {
-    margin-top: -2rem;
-  }
 }
 
-.accordion-item summary ~ * {
-  text-align: left;
-  padding: 0 $accordion-body-padding-x;
+::slotted(details) {
+  background-color: $accordion-bg!important;
+  border-bottom: $accordion-border-width solid $accordion-border-color!important;
+  margin-bottom: 0!important;
 }
-
-// #region Straight edge
-.accordion--straight {
-  > details > summary:not([class*="bg-"]) > .accordion-button,
-  > details > .accordion-item summary ~ * {
-    padding-left: 0!important;
-  }
-
-  .accordion-item summary ~ * {
-    padding-right: 0!important;
-  }
-}
-// #endregion
-
-// #region Child accordion
-.accordion .accordion {
-
-  &:first-child {
-
-    padding-top: 1rem;
-  }
-
-  &:last-child {
-
-    padding-bottom: 2rem;
-  }
-
-  .accordion-button {
-    padding: 1rem 3rem 1rem var(--accordion-indent);
-
-    &:before,
-    &:after {
-      top: 0.75rem;
-      height: 2rem;
-      width: 2rem;
-      right: 0.5rem;
-    }
-    &:before {
-      background-color: var(--colour-light);
-    }
-  }
-}
-// #endregion
-
-

package/assets/sass/components/{actionbar-global.scss → actionbar.global.scss}

@@ -15,6 +15,7 @@ iam-actionbar {
   border-top-left-radius: rem(10);
   border-top-right-radius: rem(10);
 
+  --actionbar-radius: 0;
 }
 // #endregion
 
@@ -129,7 +130,7 @@ iam-actionbar[data-view="small"] ~ [data-view="small"] {
 // #endregion 
 
 // #region Child elements
-
+iam-actionbar {
 .actionbar__text {
 
   font-size: rem(18);
@@ -157,4 +158,5 @@ button[slot="selected-overflow"] {
 
   display: contents;
 }
+}
 // #endregion

package/assets/sass/components/actionbar.scss

@@ -53,8 +53,8 @@
 
 :is(.actionbar,.actionbar--selected,.actionbar--search){
   
-  border-top-left-radius: rem(10);
-  border-top-right-radius: rem(10);
+  border-top-left-radius: var(--actionbar-radius, #{rem(10)});
+  border-top-right-radius: var(--actionbar-radius, #{rem(10)});
   padding: 0 rem(24);
   flex-wrap: nowrap;
   justify-content: flex-end;

package/assets/sass/components/{card-global.scss → card.global.scss}

@@ -1,26 +1,5 @@
 @use "../_func.scss" as *;
 
-// #region card with a flag 
-iam-card.card--flag {
-  position: relative;
-  
-  &:after {
-    content: "\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 cards with an added checkbox for actionbars
 
 iam-card {
@@ -38,8 +17,8 @@ iam-card {
     > input:is([type=radio], [type=checkbox]) + label {
         
       position: absolute!important;
-      top: 0;
-      right: 0;
+      top: 0.5rem;
+      right: 0.5rem;
       width: rem(32);
       padding-left: rem(32);
       margin: rem(4) rem(8)!important;

package/assets/sass/components/card.scss

@@ -17,8 +17,8 @@
   overflow: hidden;
   z-index: 0;
   background: var(--colour-canvas-2);
-  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
-  outline-offset: -1px;
+  outline: 2px solid var(--colour-canvas-2);
+  outline-offset: -2px;
 
   &.border-0 {
     box-shadow: none;
@@ -131,7 +131,7 @@
   vertical-align: middle!important;
 }
 
-::slotted(span){
+::slotted(span:not(.badge)){
   display: block!important;
   font-weight: normal!important;
   padding-top: rem(24)!important;
@@ -139,6 +139,26 @@
 }
 // #endregion
 
+// #region card bages
+.card__badges {
+  position: absolute;
+  top: 0;
+  right: 0.25rem;
+  padding: 0.25rem;
+  z-index: 9;
+  text-align: right;
+  width: 1;
+}
+.card__head .card__badges {
+  
+  top: auto;
+  bottom: 0;
+  text-align: left;
+  left: 0.25rem;
+  right: auto;
+}
+// #endregion
+
 // #region border left
 .card[class*="colour-"],
 .card--filter {
@@ -278,3 +298,24 @@
     display: none!important;
   }
 }
+
+// #region card with a flag 
+:host(.card--flag) {
+  position: relative;
+  
+  &:after {
+    content: "\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