@iamproperty/components 7.2.0 → 7.2.1--beta1

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

@@ -43,76 +43,6 @@ main > .actionbar__sticky-wrapper > .actionbar__sticky > iam-actionbar {
 }
 // #endregion
 
-// #region As part of the iam-table component
-iam-table iam-actionbar {
-  margin-left: 1.5rem;
-  margin-right: 1.5rem;
-}
-iam-table.table--fullwidth:has(iam-actionbar) {
-  padding-top: 0;
-}
-iam-table.table--fullwidth iam-actionbar {
-  margin: 0 -2rem 2rem -2rem;
-  box-shadow: none;
-  border-radius: 0;
-
-  @include light-mode($darkMode) {
-    background-color: #e6eaec;
-  }
-}
-
-.actionbar__sticky-wrapper {
-  container-type: inline-size;
-
-  @include media-breakpoint-up(sm, $mobileOnly) {
-    padding: 0 !important;
-  }
-}
-
-@container (width < 23.4375em) {
-  :is(iam-table, .actionbar__sticky-wrapper) > .actionbar__sticky {
-    display: block;
-    position: sticky;
-    left: 0;
-    top: calc(var(--sticky-padding) + #{rem(16)});
-    z-index: var(--index-menu);
-    pointer-events: none;
-
-    &:after {
-      content: '';
-      display: block;
-      width: 100%;
-      height: calc(100vh - #{rem(68 + 24 + 16)});
-      pointer-events: none;
-    }
-
-    & + * {
-      margin-top: calc(-100vh - -6.75rem);
-    }
-  }
-
-  :is(iam-table, .actionbar__sticky) > iam-actionbar {
-    pointer-events: all !important;
-    display: block;
-    border: none;
-    background: var(--colour-canvas-2);
-    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
-    border-radius: 0.5rem;
-    margin-bottom: rem(24);
-  }
-}
-
-@include container-up(sm) {
-  iam-table.table--fullwidth iam-actionbar,
-  iam-table iam-actionbar {
-    margin-left: -2rem;
-    margin-right: -2rem;
-    margin-top: 0;
-    margin-bottom: 2rem;
-  }
-}
-// #endregion
-
 // #region Switchview
 iam-actionbar ~ :is([data-view='square'], [data-view='list'], [data-view='small']) {
   display: none;

package/assets/sass/components/pagination.scss

@@ -22,8 +22,9 @@
     align-items: center;
   }
 
-  *:has(.prev:disabled):has(.next:disabled) {
+  &:has(.prev:disabled):has(.next:disabled) {
     display: none;
+    padding: 0;
   }
 }
 

package/assets/sass/components/table-basic.component.scss

@@ -0,0 +1,128 @@
+@use '../_func.scss' as *;
+
+@include max-height();
+
+$darkMode: 'true' !default;
+
+// #region Table container - Add via JS if needed, provides a safe space to scroll
+:host {
+  container-type: inline-size;
+  display: block;
+}
+
+.table__container {
+  --wrapper-padding: #{rem(32)};
+  --bg-colour: #ffffff;
+  display: block;
+  background: white;
+  padding: var(--wrapper-padding);
+  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
+  border-radius: rem(10);
+  margin-bottom: rem(32);
+  overflow: hidden;
+
+  &:before {
+    display: none !important;
+  }
+
+  @media screen and (prefers-color-scheme: dark) {
+    background: var(--colour-canvas-2);
+  }
+
+  @media (forced-colors: active) {
+    --wrapper-padding: 0;
+    background: var(--colour-canvas-2);
+  }
+}
+
+:host(.mh-sm) {
+  max-height: none !important;
+}
+:host(.mh-md) {
+  max-height: none !important;
+}
+:host(.mh-lg) {
+  max-height: none !important;
+}
+
+.table__wrapper {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
+}
+// #endregion
+
+// #region Tables are only stacked on mobile
+@container (width < 23.4375em) {
+  :host(:not(.table--fullwidth)) .table__container {
+    margin-left: -1.5rem;
+    margin-right: -1.5rem;
+    margin-bottom: 0;
+    background: var(--colour-canvas-2);
+    border-radius: 0;
+    background: none;
+    padding: 0;
+    box-shadow: none;
+    overflow: visible;
+
+    .table__wrapper {
+      overflow: hidden;
+      max-height: none !important;
+    }
+
+    ::slotted(table) {
+      overflow: visible !important;
+      margin-inline: 1.5rem;
+      margin-bottom: 1.5rem !important;
+      width: calc(100% - 3rem) !important;
+      display: block;
+    }
+
+    .table--cta {
+      border-bottom: 0;
+
+      &:after {
+        content: none;
+        display: none !important;
+      }
+    }
+  }
+}
+// #endregion
+
+// #region CTA column
+@container (width > 23.4375em) {
+  :host {
+    --cta-width: 8rem;
+  }
+
+  :host(.table--loading) {
+    --cta-width: 1.5rem !important;
+  }
+
+  .table--cta {
+    position: relative;
+  }
+
+  .table--cta .table__wrapper {
+    overflow-y: hidden;
+    margin-bottom: 0;
+  }
+}
+// #endregion
+
+// #region Max height tables
+.table__wrapper:is(.mh-sm, .mh-md, .mh-lg) {
+  position: relative;
+  overflow: auto;
+
+  &::before {
+    top: calc(100% - 1.2rem);
+    bottom: 2px;
+    height: 1.2rem;
+    border-bottom: 2px solid var(--colour-border);
+    margin-bottom: -1.2rem;
+  }
+}

package/assets/sass/components/table-basic.global.scss

@@ -0,0 +1,355 @@
+@use '../_func.scss' as *;
+
+$darkMode: 'true' !default;
+
+$selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
+
+// #region Basic table stuff
+:is(#{$selector}) {
+  --hover-background: var(--colour-light);
+  --row-bg: var(--colour-canvas-2);
+
+  table {
+    margin-bottom: 0;
+  }
+
+  td {
+    background-color: var(--row-bg);
+  }
+
+  tr td p {
+    min-width: 10rem;
+  }
+
+
+  tbody tr {
+    background: var(--row-bg);
+
+    &:is(:hover, :focus-within, .hover) {
+      --bg-colour-rgb: 238, 238, 238;
+      --row-bg: var(--hover-background);
+      background: var(--row-bg);
+    }
+  }
+
+  /*
+  &[data-expandable] [data-expand-button][aria-expanded] {
+    background-color: transparent;
+  }
+    */
+}
+// #endregion
+
+// #region Pagination
+:is(#{$selector}) table:has(tr.show) tbody tr:not(.show) {
+  display: none !important;
+}
+// #endregion
+
+// #region Tables are only stacked on mobile
+:is(#{$selector}):not(.table--fullwidth) {
+  td:has([data-expand-button]),
+  .expand-button-heading {
+    display: none;
+  }
+
+  @container (width < 23.4375em) {
+    &:not(.table--fullwidth) {
+      td:has([data-expand-button]) {
+        height: 0;
+        padding: 0;
+        position: relative;
+        display: block !important;
+      }
+      td:has([data-expand-button]) + td {
+        border-top: none !important;
+        padding-top: 0 !important;
+        padding-right: 3rem;
+      }
+      td:has([data-expand-button]) + .td--fixed + td {
+        border-top: none !important;
+      }
+
+      [data-expand-button] {
+        top: 0;
+        right: 0;
+        background: transparent !important;
+        border: none;
+        position: absolute;
+        overflow: hidden;
+        --compact-size: #{rem(32)};
+
+        &:before {
+          font-family: 'Font Awesome 6 Pro';
+          content: '\f055';
+          font-weight: 300 !important;
+          font-size: rem(28);
+          line-height: var(--compact-size) !important;
+        }
+
+        &[aria-expanded] {
+          &:before {
+            content: '\f056';
+            font-weight: 900 !important;
+          }
+        }
+      }
+    }
+  }
+
+  @container (width < 23.4375em) {
+    thead {
+      display: none;
+    }
+
+    tbody {
+      --status-pt: 2.5rem;
+
+      display: block;
+      overflow: visible;
+
+      tr td:first-child {
+        padding-top: 0;
+      }
+    }
+
+    tr {
+      display: block;
+      position: relative;
+      border: none;
+      background: var(--row-bg);
+      padding: var(--wrapper-padding);
+      box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
+      border-radius: rem(8);
+      height: auto;
+
+      & + tr {
+        margin-top: rem(32);
+      }
+
+      &:is(:hover, :focus, .hover) {
+        --row-bg: var(--colour-canvas-2);
+      }
+    }
+
+    td:has([data-expand-button]) {
+      display: block;
+    }
+
+    :is(td, th) {
+      display: block;
+      border-color: var(--colour-border);
+
+      padding-right: 0;
+
+      &:nth-child(1) {
+        border-top: none;
+      }
+
+      &[data-label]:not([data-label='']):before {
+        content: attr(data-label);
+        color: var(--colour-heading);
+        padding: 0 0 rem(6) 0;
+        margin-bottom: 0;
+        display: block;
+        font-weight: bold;
+      }
+    }
+
+    td:first-child::after {
+      top: 1.75rem !important;
+    }
+
+    td::after {
+      top: 2.5rem;
+    }
+
+    .td--fixed {
+      padding-right: 50%;
+    }
+
+    tbody tr td:not(:first-child) {
+      border-top: var(--border-width) solid currentColor;
+      border-color: var(--colour-border) !important;
+    }
+
+    tr:not([data-view='full']) td p {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      overflow: hidden;
+    }
+
+    tbody tr:not([data-view='full']) td:not(.td--fixed) + td:not(.td--fixed) + td + td {
+      display: none;
+    }
+  }
+}
+// #endregion
+
+// #region CTA column
+
+:is(#{$selector}):not(.table--fullwidth).table--cta {
+  @container (width < 23.4375em) {
+    tbody tr td:last-child {
+      display: block !important;
+    }
+  }
+}
+
+:is(#{$selector}).table--cta {
+  @container (width > 23.4375em) {
+    padding-right: calc(var(--wrapper-padding) + 1.5rem);
+
+    tr > th:nth-last-child(2),
+    tr > td:nth-last-child(2) {
+      padding-right: var(--cta-width);
+    }
+
+    tr > *:not(:first-child):last-child {
+      position: absolute;
+      left: calc(100% - var(--cta-width));
+      top: auto;
+      background: transparent;
+      width: var(--cta-width);
+      min-height: calc(var(--row-height) - 2px);
+      text-align: right;
+      background: linear-gradient(90deg, transparent 0%, var(--row-bg, var(--colour-canvs-2)) 1.25rem);
+      cursor: default;
+      padding-bottom: 0;
+
+      a {
+        white-space: nowrap;
+        padding-right: 0.2rem;
+        padding-bottom: 0;
+      }
+    }
+
+    tbody tr:hover > *:not(:first-child):last-child {
+      background: linear-gradient(90deg, transparent 0%, var(--row-bg, var(--colour-canvs-2)) 1.25rem);
+    }
+  }
+}
+// #endregion
+
+// #region Statuses
+table {
+  .hide-status:after {
+    display: none;
+  }
+
+  :not(.hide-status):is(
+      [data-content='low'],
+      [data-content='medium'],
+      [data-content='high'],
+      [data-content='unknown'],
+      [data-content='due'],
+      [data-content='overdue'],
+      [data-content='incomplete'],
+      [data-content='requires approval'],
+      [data-content='upcoming'],
+      [data-content='approval required'],
+      [data-content='warning'],
+      [data-content='verified'],
+      [data-content='not started'],
+      [data-content='to do'],
+      [data-content='on track'],
+      [data-content='completed'],
+      [data-content='complete'],
+      [data-content='successful'],
+      [data-content='failed'],
+      .alert-status:not([data-content='0']):not([data-content='']):not(:empty)
+    ) {
+    position: relative;
+    padding-left: 1.5rem;
+
+    &::before {
+      margin-left: -1.5rem !important;
+    }
+
+    &:after {
+      font-family: 'Font Awesome 6 Pro';
+      position: absolute;
+      top: var(--status-pt, 1rem);
+      left: 0;
+      font-size: rem(16);
+      line-height: 1;
+      height: rem(16);
+      width: rem(16);
+      display: inline-block;
+    }
+  }
+
+  [data-content='high']:after {
+    content: '\f325';
+    font-weight: normal;
+    color: var(--colour-danger);
+  }
+
+  [data-content='medium']:after {
+    content: '\f7a4';
+    font-weight: normal;
+    color: var(--colour-warning);
+  }
+
+  [data-content='low']:after {
+    content: '\e404';
+    font-weight: normal;
+    color: var(--colour-complete);
+  }
+
+  [data-content='unknown']:after {
+    content: '\e404';
+    font-weight: normal;
+    color: var(--colour-muted);
+  }
+
+  :is([data-content='overdue'], [data-content='due'], [data-content='incomplete']):after {
+    content: '\f024';
+    color: var(--colour-danger);
+  }
+
+  :is([data-content='not started'], [data-content='to do'], [data-content='on track']):after {
+    content: '\f024';
+    color: var(--colour-muted);
+  }
+
+  :is(
+      [data-content='requires approval'],
+      [data-content='approval required'],
+      [data-content='action required'],
+      [data-content='upcoming']
+    ):after {
+    content: '\f024';
+    color: var(--colour-warning);
+  }
+
+  :is([data-content='warning']):after {
+    content: '\f071';
+    color: var(--colour-warning);
+  }
+
+  :is(
+      [data-content='manually verified'],
+      [data-content='verified'],
+      [data-content='completed'],
+      [data-content='complete'],
+      [data-content='successful']
+    ):after {
+    content: '\f00c';
+    font-weight: normal;
+    color: var(--colour-complete);
+  }
+
+  :is([data-content='failed']):after {
+    content: '\f00d';
+    font-weight: normal;
+    color: var(--colour-danger);
+  }
+
+  .alert-status:not([data-content='0']):not([data-content='']):not(:empty):after {
+    content: '\f0f3';
+    color: var(--colour-primary);
+  }
+}
+// #endregion

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

@@ -1,127 +1,8 @@
 @use '../_func.scss' as *;
 
-// #region Table wrapper - Add via JS if needed, provides a safe space to scroll
-:host {
-  --wrapper-padding: #{rem(32)};
-  --bg-colour: #ffffff;
-  display: block;
-  background: white;
-  padding: var(--wrapper-padding);
-  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
-  border-radius: rem(10);
-  margin-bottom: rem(32);
-  overflow: hidden;
+$darkMode: 'true' !default;
 
-  &:before {
-    display: none !important;
-  }
-
-  @media screen and (prefers-color-scheme: dark) {
-    background: var(--colour-canvas-2);
-  }
-
-  @media (forced-colors: active) {
-    --wrapper-padding: 0;
-    background: var(--colour-canvas-2);
-  }
-}
-
-::slotted(table) {
-  margin-bottom: 0 !important;
-}
-
-.table__wrapper {
-  display: block;
-  width: 100%;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
-}
-// #endregion
-
-// #region Tables are only stacked on mobile
-@container (width < 23.4375em) {
-  :host(:not(.table--fullwidth)) {
-    margin-left: -1.5rem;
-    margin-right: -1.5rem;
-    margin-bottom: 0;
-    background: var(--colour-canvas-2);
-    border-radius: 0;
-
-    .table__wrapper:not(.table--fullwidth) {
-      overflow: hidden;
-      max-height: none !important;
-    }
-
-    background: none;
-    padding: 0;
-    box-shadow: none;
-    overflow: visible;
-
-    ::slotted(table) {
-      overflow: visible !important;
-      margin-inline: 1.5rem;
-      margin-bottom: 1.5rem !important;
-      width: calc(100% - 3rem) !important;
-      display: block;
-    }
-
-    .table--cta {
-      border-bottom: 0;
-
-      &:after {
-        content: none;
-        display: none !important;
-      }
-    }
-  }
-}
-// #endregion
-
-// #region CTA column
-@container (width > 23.4375em) {
-  :host {
-    --cta-width: 8rem;
-  }
-
-  :host(.table--loading) {
-    --cta-width: 1.5rem !important;
-  }
-
-  .table--cta {
-    position: relative;
-  }
-
-  .table--cta .table__wrapper {
-    overflow-y: hidden;
-    margin-bottom: 0;
-  }
-}
-// #endregion
-
-// #region Max height tables
-.table__wrapper:is(.mh-sm, .mh-md, .mh-lg) {
-  position: relative;
-
-  &::before {
-    top: calc(100% - 1.2rem);
-    bottom: 2px;
-    height: 1.2rem;
-    border-bottom: 2px solid var(--colour-border);
-    margin-bottom: -1.2rem;
-  }
-}
-
-// If table CTA class is set then undo max-height
-.table--cta > .table__wrapper:is(.mh-sm, .mh-md, .mh-lg) {
-  max-height: none;
-  position: static;
-
-  &::before {
-    display: none;
-  }
-}
-//#endregion
+@use './table-basic.component.scss';
 
 // #region Table with actionbar
 @container (width < 23.4375em) {
@@ -157,15 +38,3 @@
   }
 }
 // #endregion
-
-// #region pagination
-@container (width < 23.4375em) {
-  .pagination--table {
-    margin-inline: rem(24);
-    width: auto;
-  }
-  :host(.table--fullwidth) .pagination--table {
-    margin-inline: 0;
-  }
-}
-// #endregion