@iamproperty/components 6.0.0 → 6.1.0--beta2

package/assets/sass/elements/type.scss

@@ -7,9 +7,11 @@ mark {
   background-color: $mark-bg;
 }
 
-@import "../../bootstrap/scss/_type.scss";
+//@import "../../bootstrap/scss/_type.scss";
 
 // #region headings
+
+
 %heading {
   --line-height: #{$headings-line-height};
   // From bootstrap reboot
@@ -97,6 +99,7 @@ mark {
 // #endregion
 
 p {
+  margin-top: 0;
   font-size: rem(map-get($heading-sizes,"body_fs"));
   line-height: rem(map-get($heading-sizes,"body_lh"));
   padding-bottom: rem(map-get($heading-sizes,"body_end_pb"));
@@ -108,7 +111,7 @@ p:has(+ p) {
   padding-bottom: rem(map-get($heading-sizes,"body_pb"));
 }
 
-@include is('.lead, .strapline'){
+:is(.lead, .strapline){
   font-size: rem(map-get($heading-sizes,"lead_fs"));
   line-height: rem(map-get($heading-sizes,"lead_lh"));
   padding-bottom: rem(map-get($heading-sizes,"lead_pb"));
@@ -126,8 +129,41 @@ small,
   font-weight: normal;
 }
 
+
+sub,
+sup {
+  position: relative;
+  font-size: .75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub { bottom: -.25em; }
+sup { top: -.5em; }
+
+
+abbr[title] {
+  text-decoration: underline dotted; // 1
+  cursor: help; // 2
+  text-decoration-skip-ink: none; // 3
+}
+
+
+// Address
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+
+blockquote {
+}
+
 blockquote {
 
+  margin: 0;
   quotes: "“" "”" "‘" "’";
   padding-bottom: rem(48);
   overflow: hidden;

package/assets/sass/error.scss

@@ -2,5 +2,36 @@
 
 // Set mobile only variable so that the media query mixin doesn't print out non mobile rules
 @use "_func" as *;
+
+@include layer('reset') {
+
+  html {
+    --font-body: arial, sans-serif!important;
+    --font-heading: arial, sans-serif!important;
+  }
+}
+
 @import "_corefiles";
-@import '../../assets/sass/components/nav.global.scss';
+
+@include layer('elements') {
+.h1 {
+  --line-height: #{rem(map-get($heading-sizes,"h1_lh"))};
+
+  font-size: rem(map-get($heading-sizes,"h1_fs"));
+  padding-bottom: rem(map-get($heading-sizes,"h1_pb"));
+  font-weight: 900;
+
+  @include media-breakpoint-up(sm) {
+
+    font-size: rem(map-get($heading-sizes,"h1_fs_sm"));
+    --line-height: #{rem(map-get($heading-sizes,"h1_lh_sm"))};
+    padding-bottom: rem(map-get($heading-sizes,"h1_pb_sm"));
+  }
+}
+}
+
+@include layer('utilities') {
+  .gradient-primary {
+    background-image: linear-gradient(var(--gradient-direction), var(--colour-primary-theme) 0, var(--colour-primary-theme) 20%, transparent 100%) !important;
+  }
+}

package/assets/sass/foundations/bs_grid.scss

@@ -0,0 +1,33 @@
+// Row
+//
+// Rows contain your columns.
+
+@if $enable-grid-classes {
+  .row {
+    @include make-row();
+
+    > * {
+      @include make-col-ready();
+    }
+  }
+}
+
+@if $enable-cssgrid {
+  .grid {
+    display: grid;
+    grid-template-rows: repeat(var(--#{$prefix}rows, 1), 1fr);
+    grid-template-columns: repeat(var(--#{$prefix}columns, #{$grid-columns}), 1fr);
+    gap: var(--#{$prefix}gap, #{$grid-gutter-width});
+
+    @include make-cssgrid();
+  }
+}
+
+
+// Columns
+//
+// Common styles for small and large grid columns
+
+@if $enable-grid-classes {
+  @include make-grid-columns();
+}

package/assets/sass/foundations/grid.scss

@@ -0,0 +1,270 @@
+@use 'sass:math';
+@use 'sass:map';
+@use "../_func" as *;
+
+// #region Main grid setup
+body {
+  --excess-space: calc((100% - var(--max-width, #{$max-width})) / 2);
+  --col-size: calc((100% - max(0%,var(--excess-space)) - max(0%,var(--excess-space)) - var(--gutter, #{$gutter}) - var(--gutter, #{$gutter}) - (var(--gap, #{$gap}) * (#{$columns - 1}))) / #{$columns});
+  column-gap: var(--gap, #{$gap});
+  display: grid;
+  margin-inline: 0;
+  width: 100%;
+  $templateColumns: '';
+  @for $i from 1 to $columns {
+    $templateColumns: $templateColumns + 'var(--col-size) [col-'+$i+'-end col-'+($i+1)+'-start] '
+  }
+  grid-template-columns: [full-width-start container-start] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
+                          [content-start col-1-start]
+                          #{$templateColumns}
+                          var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap})) [container-end full-width-end];
+
+  @media screen and (min-width: #{em($max-width-px * $max-scale-up)}) {
+    grid-template-columns: [full-width-start] calc(var(--excess-space) - var(--gap, #{$gap}))
+                          [container-start] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
+                          [content-start col-1-start]
+                          #{$templateColumns}
+                          var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap})) [container-end] calc(var(--excess-space) - var(--gap, #{$gap})) [full-width-end];
+  }
+
+  grid-template-rows: auto;
+  align-content: start;
+  justify-content: center;
+
+  & * {
+    grid-column: content;
+
+    &:where(button):not(:has(.card)){
+        
+      max-width: fit-content;
+      place-self: start;
+    }
+
+    &:is(div){
+        
+      min-height: -webkit-fill-available;
+      align-content: start;
+    }
+  }
+}
+
+div:has(main) {
+  display: contents!important;
+}
+
+:is(nav, main, footer) {
+  display: grid;
+  grid-column: full-width!important;
+  grid-template-columns: subgrid;
+}
+
+*:not(.row)>main:not(:has(.container:last-child)):not(:has(iam-collapsible-side:last-child)) {
+  padding-bottom: 1rem;
+}
+
+main > :is(.full-width, [class*="bg-"]:has(.container), iam-header, iam-collapsible-side, iam-notification) {
+  grid-column: full-width;
+}
+
+[class*="bg-"]:not([class*=col-]):has(.container) {
+  display: grid;
+  grid-column: full-width;
+  grid-template-columns: subgrid;
+}
+// #endregion
+
+// #region grid mixins
+@mixin grid-utilities($br: ""){
+  .#{$br}inline-start {
+    justify-self: start;
+  }
+  
+  .#{$br}block-start {
+    align-self: start;
+  }
+
+  .#{$br}inline-center {
+    justify-self: center;
+  }
+  
+  .#{$br}block-center {
+    align-self: center;
+  }
+
+  .#{$br}inline-end {
+    justify-self: end;
+  }
+  
+  .#{$br}block-end {
+    align-self: end;
+  }
+
+  .#{$br}display-contents {
+    display: contents;
+  }
+  
+  .#{$br}display-none {
+    display: none;
+  }
+  
+  .#{$br}display-block {
+    display: block;
+  }
+      
+  .#{$br}display-grid {
+    display: grid;
+  }
+      
+  .#{$br}flow-dense { // Apply to a wrapper div of the items
+    grid-auto-flow: dense;
+  }
+
+  @for $i from 0 to $grid-utility-count {
+
+    .#{$br}order-#{$i+1} {
+      order: #{$i+1};
+    }
+  }
+}
+
+@mixin grid-columns($br: ""){
+
+  *:not(:where(main)):has(> [class*="#{$br}col-"]){
+    display: grid;
+    grid-template-columns: subgrid;
+  }
+
+  .#{$br}col-start-auto {
+    --col-start: auto;
+  }
+  
+  @for $i from 0 to $columns {
+
+    .#{$br}col-start-#{$i+1} {
+      --col-start: col-#{$i+1}-start!important;
+    }
+
+    .#{$br}col-end-#{$i+1} {
+      --col-end: col-#{$i+1}-end;
+    }
+        
+    .#{$br}col-span-#{$i+1} {
+      --col-end: span #{$i+1};
+    }
+  }
+}
+
+@mixin grid-rows($br: ""){
+
+  // Assign how many rows an item takes
+  @for $i from 0 to $grid-utility-count {
+    
+    .#{$br}row-span-#{$i+1} {
+      --row-span: #{$i+1};
+    }
+  }
+
+  // Move the item to a set row
+  @for $i from 0 to $rows-per-page {
+    
+    .#{$br}row-start-#{$i+1} {
+      --row-start: #{$i+1};
+    }
+  }
+}
+// #endregion
+
+@if $enable-new-grid == "true" {
+
+// #region Grid utility classes
+*:has([class*="order-"]) > *:not([class*="order-"]) {
+  order: 99;
+}
+
+
+@include grid-utilities();
+@each $br, $value in $breakpoints {
+  @include breakpoint($br){
+    @include grid-utilities(#{$br+'-'});
+  }
+}
+// #endregion
+
+// #region Create the columns
+:is([class*="col-start-"], [class*="col-end-"], [class*="col-span-"]) {
+  grid-column: var(--col-start, col-1-start) / var(--col-end, col-#{$columns}-end);
+}
+
+*:not(:where(html, body)):has(:is([class*="cols-"], [class*="col-start-"], [class*="col-end-"], [class*="col-span-"])){
+
+  display: grid;
+  grid-template-columns: subgrid;    
+
+  [class*="col-"]:not([class*="col-start-auto"]) {
+  
+    --col-start: col-1;   
+  }
+
+  [class*="col-"] [class*="col-"] {
+  
+    --col-start: auto;   
+  }
+
+  * {
+    grid-column: var(--col-start, col-1-start) / var(--col-end, col-#{$columns}-end);
+  }
+}
+
+
+@include grid-columns();
+@each $br, $value in $breakpoints {
+  @include breakpoint($br){
+    @include grid-columns(#{$br+'-'});
+  }
+}
+// #endregion
+
+// #region Create rows
+:where([class*="row-"],[class*="rows-"]) {
+  grid-row: var(--row-start, auto) / span var(--row-span, 1);
+}
+
+
+@include grid-rows();
+@each $br, $value in $breakpoints {
+  @include breakpoint($br){
+    @include grid-rows(#{$br+'-'});
+  }
+}
+// #endregion
+
+// #region Create the Columns wrappers
+[class*="cols-"]:not(.row) {
+  display: grid;
+  grid-template-columns: subgrid;
+}
+
+@for $i from 1 to math.floor(math.div($columns,2)) + 1 {
+  
+  $count: math.div($columns,$i);
+
+  .cols-#{$i} > * {
+    grid-column: auto / span #{math.floor($count)};
+  }
+}
+
+@each $br, $value in $breakpoints {
+  @include breakpoint($br){
+    @for $i from 1 to math.floor(math.div($columns,2)) + 1 {
+  
+      $count: math.div($columns,$i);
+
+      .#{$br}-cols-#{$i} > * {
+        grid-column: auto / span #{math.floor($count)};
+      }
+    }
+  }
+}
+// #endregion
+
+}

package/assets/sass/foundations/reboot.scss

@@ -1,9 +1,66 @@
 @use "sass:math";
 @use "../_func" as *;
 
-@import "../../bootstrap/scss/_reboot.scss";
 
-/* Reset & Defaults - Most of the resets/normailization stuff is done by Bootstrap */
+// Code
+pre,
+code,
+kbd,
+samp {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 1rem;
+}
+
+pre {
+  display: block;
+  margin-top: 0; // 1
+  margin-bottom: 1rem; // 2
+  overflow: auto; // 3
+  font-size: rem(14);
+  color: $pre-color;
+
+  // Account for some code outputs that place code tags in pre tags
+  code {
+    font-size: inherit;
+    color: inherit;
+    word-break: normal;
+  }
+}
+
+code {
+  font-size: rem(14);
+  color: #d63384;
+  word-wrap: break-word;
+
+  // Streamline the style when inside anchors to avoid broken underline and more
+  a > & {
+    color: inherit;
+  }
+}
+
+kbd {
+  padding: .1875rem .375rem;
+  font-size: rem(14);
+
+  kbd {
+    padding: 0;
+    font-size: 1rem;
+    font-weight: normal;
+  }
+}
+
+
+
+
+
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Reset & Defaults */
 html {
 
   -webkit-font-smoothing: antialiased; // Fix for Safari/iOS
@@ -59,6 +116,7 @@ html {
 }
 
 body {
+  margin: 0; // 1
   color-scheme: light dark;
   @include var(background,--colour-canvas);
   @include var(font-family,--font-body);
@@ -66,8 +124,11 @@ body {
   width: 100%;
   line-height: 1.2;
   min-height: 100%;
+  -webkit-text-size-adjust: 100%; // 3
+  -webkit-tap-highlight-color: rgba($black, 0); // 4
 }
 
+
 // #region scrollbars
 :is(div,form,fieldset,textarea)::-webkit-scrollbar {
   width: 10px;
@@ -128,6 +189,14 @@ hr {
   }
 }
 
+[hidden] {
+  display: none !important;
+}
+
+form {
+  display: contents;
+}
+
 input[type="search" i]::-webkit-search-cancel-button {
 
   appearance: none;
@@ -156,50 +225,3 @@ details summary > * {
 details {
   width: 100%;
 }
-
-// Main grid setup to avoid having to use continaer divs
-
-*:not(.row) > main {
-  --full-width-start: 0;
-
-  @include media-breakpoint-up(md) {
-    --full-width-start: calc((100% - var(--container-max-width)) / 2);
-  }
-
-  display: grid;
-  margin-left: auto;
-  margin-right: auto;
-  width: 100%;
-  
-  grid-template-columns:
-  [full-width-start] var(--full-width-start)
-  [container-start] var(--padding-inline)
-  [content-start] min(
-  100% - (var(--padding-inline) * 2),
-  calc(var(--container-max-width) - (var(--padding-inline) * 2))
-  )
-  [content-end]
-  var(--padding-inline) [container-end]
-  var(--full-width-start) [full-width-end];
-
-  &:not(:has(.container:last-child)):not(:has(iam-collapsible-side:last-child)){
-    padding-bottom: 1rem;
-  }
-}
-
-main > :not(.full-width, .container, iam-header, iam-collapsible-side, [class*="bg-"]) {
-  grid-column: content;
-}
-
-
-main > :is(.full-width, .container, iam-header) {
-  grid-column: container;
-}
-
-main > :is(.full-width, [class*="bg-"], iam-collapsible-side) {
-  grid-column: full-width;
-}
-
-.row > .col {
-  min-height: var(--min-height,0);
-}

package/assets/sass/foundations/root.scss

@@ -1,10 +1,11 @@
 @use "../func" as *;
 
-//@import "../../bootstrap/scss/_root.scss";
+#{$root} {
 
-$root: ':root'!default;
+  @media (prefers-reduced-motion: no-preference) {
+    scroll-behavior: smooth;
+  }
 
-#{$root} {
   // Print out the $vars array setup in the variables file so they can be used as CSS vars
   // Custom variable values only support SassScript inside `#{}`.
   @each $var, $value in $vars {
@@ -26,6 +27,18 @@ $root: ':root'!default;
     }
   }
 
+  @media screen and (min-width: 36em) {
+    @each $var, $value in map-get($vars-responsive,"sm") {
+      #{'--'+$var}: #{$value};
+    }
+  }
+  @media screen and (min-width: 62em) {
+    @each $var, $value in map-get($vars-responsive,"md") {
+      #{'--'+$var}: #{$value};
+    }
+  }
+  
+
   // Wider colours
   @each $colour, $value in $wider-colours {
     --wider-colour-#{$colour}: #{$value};

package/assets/ts/components/barchart/barchart.component.ts

@@ -16,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">