@iamproperty/components 4.1.0-beta-2 → 4.1.0

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

@@ -0,0 +1,650 @@
+@use "../_func.scss" as *;
+
+// #region Container type
+*:has(> iam-table){
+  container-type: inline-size;
+}
+// #endregion
+
+// #region Basic table stuff
+iam-table {
+  
+  --hover-background: var(--colour-light);
+  --row-bg: var(--colour-canvas-2);
+  thead tr {
+    background: var(--row-bg);
+  }
+  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);
+    }
+
+    @include dark-mode(){
+      
+      --hover-background: var(--colour-canvas);
+
+      &:is(:hover,:focus-within,.hover) {
+        background: var(--row-bg);
+      }
+    }
+  }
+}
+// #endregion
+
+// #region Tables are only stacked on mobile
+@container (width < 23.4375em) {
+  iam-table:not(.table--fullwidth) {
+
+    thead {
+      display: none;
+    }
+
+    tbody {
+      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);
+
+      & + tr {
+        margin-top: rem(32);
+      }
+      
+      &:is(:hover,:focus,.hover) {
+        
+        --row-bg: var(--colour-canvas-2);
+
+      }
+    }
+
+    :is(td, th) {
+      display: block;
+      @include var(border-color,--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;
+    }
+
+    td:has([data-expand-button]) {
+      height: 0;
+      padding: 0;
+      position: relative;
+    }
+    td:has([data-expand-button]) + td {
+      border-top: none!important;
+      padding-top: 0!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;
+      }
+    }
+
+    tr[data-view="full"] {
+      [data-expand-button] {
+
+        &:before {
+            
+          content: "\f056";
+          font-weight: 900!important;
+        }
+      }
+    }
+
+    .dialog__wrapper {
+      margin-top: -0.5rem;
+      margin-left: -1rem;
+      z-index: 10;
+    }
+  }
+
+  iam-table:not(.table--fullwidth) tbody tr:not([data-view="full"]) {
+
+    td:not(.td--fixed) + td:not(.td--fixed) + td + td{
+      display: none;
+    }
+  }
+
+  iam-table.table--cta:not(.table--fullwidth) tr td:not(:first-child):last-child {
+    display: block!important;
+    position: static;
+    width: 100%;
+    min-width: 100%;
+    margin-left: 0;
+    padding-left: 0;
+    text-align: left;
+    min-height: 0;
+
+    &:after {
+      display: none;
+    }
+  }
+}
+// #endregion
+
+// #region CTA column
+@container (width > 23.4375em) {
+
+  iam-table.table--cta:not(.table--loading):has(tr:first-child td:first-child:last-child) {
+    padding-right: calc(var(--wrapper-padding) + 1.5rem);
+  }
+  
+  iam-table.table--cta:not(.table--loading):not(:has(tr:first-child td:first-child:last-child)) {
+
+    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) 1.25rem);
+      cursor: default;
+
+      @media screen and (prefers-color-scheme: dark) {
+        
+      background: linear-gradient(90deg, transparent 0%, var(--row-bg) 1.25rem);
+      }
+      a {
+        white-space: nowrap;
+        padding-right: 0.2rem;
+      }
+    }
+
+    tbody tr:hover > *:not(:first-child):last-child {
+      background: linear-gradient(90deg, transparent 0%, var(--row-bg) 1.25rem);
+    }
+  }
+}
+// #endregion
+
+// #region Max height tables
+iam-table:is(.mh-sm,.mh-md,.mh-lg):not(.table--cta) {
+
+  position: relative;
+
+  thead {
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    background-color: var(--row-bg);
+
+    &:before {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      background: var(--colour-primary);
+    }
+  }
+  tbody {
+    position: relative;
+
+    tr:first-child td {
+      border-top: 0;
+    }
+    tr:last-child td {
+      border-bottom: 0;
+    }
+
+  }
+}
+//#endregion
+
+// #region Statuses 
+table {
+    
+  :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"],
+    .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: 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="upcoming"]):after {
+
+    content: "\f024";
+    color: var(--colour-warning);
+  }
+
+  :is([data-content="warning"]):after {
+
+    content: "\f071";
+    color: var(--colour-warning);
+  }
+
+  :is([data-content="verified"],[data-content="completed"],[data-content="complete"]):after {
+    
+    content: "\f00c";
+    font-weight: normal;
+    color: var(--colour-complete);
+  }
+
+  .alert-status:not([data-content="0"]):not([data-content=""]):not(:empty):after {
+
+    content: "\f0f3";
+    color: var(--colour-primary);
+  }
+}
+// #endregion
+
+// #region filters 
+iam-table .table--filtered tbody tr:not(.filtered--show) {
+  display: none!important;
+}
+
+iam-table table:not(.table--filtered):not(.table--ajax) tbody tr:nth-child(15) ~ tr {
+  display: none;
+}
+// #endregion
+
+// #region Table with actionbar 
+
+iam-table {
+
+  input:is([type="radio"],[type="checkbox"]) + label {
+    padding-left: 0!important;
+    margin: 0!important;
+
+  
+    &:before,
+    &:after {
+      top: 0.75rem !important;
+      left: 0.25rem!important;
+    }
+  }
+
+  &:has([type="checkbox"]:checked) tr:has([type="checkbox"]){
+    
+    [type="checkbox"] {
+      width: 100vw;
+      height: 100%;
+      max-height: var(--row-height);
+      max-width: 100vw;
+      cursor: pointer;
+      pointer-events: all;
+      top: auto;
+      margin: 0;
+      margin-top: 0rem;
+    }
+  }
+
+  tr:has([type="checkbox"]:checked){
+    --row-bg: #E0E0E0;
+
+    @include dark-mode(){
+      --row-bg: #000000;
+    }
+  }
+}
+
+@container (width < 23.4375em) {
+
+  iam-table:has([slot="before"]) {
+
+    iam-actionbar {
+      @include light-mode(){
+        background-color: #e6eaec;
+      }
+    }
+    .actionbar__sticky + * {
+      margin-top: 0!important;
+    }
+  }
+
+  iam-table {
+
+    input:is([type="radio"],[type="checkbox"]) + label {
+      padding-left: 0!important;
+      margin: 0!important;
+      min-height: 2rem;
+    
+      &:before,
+      &:after {
+        top: 0.25rem !important;
+        left: 0!important;
+      }
+    }
+
+    &:has([type="checkbox"]:checked) tr:has([type="checkbox"]){
+    
+      [type="checkbox"] {
+        width: 100%;
+        height: 100%;
+        max-height: 100%;
+        max-width: 100%;
+        margin-top: -2rem;
+      }
+    }
+  }
+}
+// #endregion
+
+// #region Expandable tables
+iam-table.table--fullwidth:not([data-expandable]) {
+
+  th.expand-button-heading {
+    display: none;
+  }
+  td:has([data-expand-button]) {
+    display: none;
+  }
+}
+
+@container (width > 23.4375em) {
+
+  iam-table:not([data-expandable]) {
+
+    th.expand-button-heading {
+      display: none;
+    }
+    td.td--expand {
+      display: none;
+    }
+  }
+
+  iam-table[data-expandable]{
+
+    [data-expand-button]{
+      margin: 0;
+      &:before {
+
+        font-family: "Font Awesome 6 Pro";
+        content: "\f078";
+        font-weight: 500;
+      }
+    }
+
+    tr[data-view="full"] [data-expand-button]:before {
+    
+      content: "\f077";
+    }
+
+    tr:not([data-view="full"]) td p {
+
+      
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      overflow: hidden;
+    }
+  }
+}
+// #endregion
+
+// #region fixed columns
+@container (width < 23.4375em) {
+  
+  iam-table:not(.table--fullwidth) {
+    .td--fixed + td:not(.td--fixed){
+
+      border-top: none;
+    }
+  }
+}
+@container (width > 23.4375em) {
+
+  iam-table {
+
+    --width-adjust: 0px;
+
+    &:has([type="checkbox"]){
+
+      --width-adjust: -1rem;
+    }
+
+    .th--fixed {
+      min-width: calc(rem(48 + 24) + var(--width-adjust));
+      position: absolute;
+      padding: 0;
+
+      &:after {
+        top: auto;
+        left: 0;
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: calc(var(--row-height) - 2px);
+        background: linear-gradient(90deg, var(--row-bg) calc(100% - 1.5rem), transparent 100%);
+      }
+    }
+
+    .td--fixed {
+      position: absolute;
+      position: absolute;
+      left: auto;
+      top: auto;
+      z-index: 3;
+      padding: 0;
+      min-width: rem(48 + 24);
+      height: calc(var(--row-height) - 2px);
+      text-align: left;
+      background: linear-gradient(90deg, var(--row-bg) calc(100% - 1.5rem), transparent 100%);
+
+      &:has([open]){
+        z-index: 4;
+      }
+    }
+
+    tr {
+      
+      &:is(:hover,:focus) .td--fixed{
+        background: linear-gradient(90deg, var(--row-bg) calc(100% - 1.5rem), transparent 100%);
+      }
+        
+      &:has([data-expand-button]) {
+        height: calc(rem(74) - 2px);
+      }
+    }
+
+    .th--fixed + th:not(.th--fixed),
+    .td--fixed + td:not(.td--fixed){
+
+      padding-left: calc(rem(48 + 24) + var(--width-adjust));
+    }
+
+    .th--fixed:not(.expand-button-heading) + .th--fixed + th:not(.th--fixed),
+    .td--fixed:not(.td--expand) + .td--fixed + td:not(.td--fixed){
+
+      padding-left: calc(rem(48 + 4 + 48 + 24) + var(--width-adjust));
+    }
+
+    &[data-expandable] .th--fixed + .th--fixed + th:not(.th--fixed),
+    &[data-expandable] .td--fixed + .td--fixed + td:not(.td--fixed){
+
+      padding-left: calc(rem(48 + 4 + 48 + 24) + var(--width-adjust));
+    }
+
+    .th--fixed + .th--fixed,
+    .td--fixed + .td--fixed {
+      
+      padding-left: calc(rem(48 + 4) + var(--width-adjust));
+      min-width: calc(rem(48 + 4 + 48 + 24) + var(--width-adjust));
+    }
+
+    .th--fixed:has(+ .th--fixed),
+    .td--fixed:has(+ .td--fixed) {
+      min-width: calc(rem(48 + 4) + var(--width-adjust));
+      z-index: 5;
+    }
+
+    .dialog__wrapper{
+      z-index: 10;
+    }
+    .dialog__wrapper:has([open]){
+      z-index: 20;
+    }
+
+    &[data-expandable] input:is([type=radio],[type=checkbox])+label:before,
+    &[data-expandable] input:is([type=radio],[type=checkbox])+label:after {
+      left: 1.25rem !important;
+    }
+  }
+
+  iam-table:not([data-expandable]) {
+
+    th.expand-button-heading + th {
+      padding-left: 0!important
+    }
+    td.td--expand + td {
+      padding-left: 0!important
+    }
+    
+    th.expand-button-heading + .th--fixed {
+      min-width: calc(rem(48 + 24) + var(--width-adjust))!important
+    }
+    td.td--expand + .td--fixed {
+      min-width: calc(rem(48 + 24) + var(--width-adjust))!important
+    }
+  }
+}
+// #endregion