@iamproperty/components 6.0.0 → 6.1.0--beta2

package/assets/sass/elements/modal.scss

@@ -0,0 +1,453 @@
+@use "sass:math";
+@use "../_func" as *;
+
+// #region modal styling
+*:not(.dialog__wrapper) > dialog[open] {
+
+}
+
+*:not(.dialog__wrapper) > dialog[open] {
+  overflow-y: hidden;
+  width: 90vw;
+  max-width: rem(324); // col-width*4
+
+  //height: 90vh;
+  max-height: min(90vh, #{rem(752)});
+  overscroll-behavior: contain;
+
+  // Close button
+  > form:first-child {
+    position: static;
+  }
+
+  > form:first-child button,
+  > button:first-child {
+    position: absolute;
+    top: var(--dialog-padding);
+    right: var(--dialog-padding);
+    z-index: var(--index-floating);
+
+    text-indent: 300%;
+    overflow: hidden;
+    border: none;
+    height: rem(20);
+    width: rem(20);
+    background: transparent;
+
+    &:after {
+      content: "";
+      top: 0;
+      left: 0;
+      position: absolute;
+      display: block;
+      height: rem(20);
+      width: rem(20);
+      z-index: var(--index-focus);
+      background: currentColor;
+      mask-image: var(--icon-close);
+      mask-size: 100%;
+      mask-repeat: no-repeat;
+      mask-position: 50% 50%;
+      -webkit-mask-image: var(--icon-close);
+      -webkit-mask-size: 100%;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: 50% 50%;
+    }
+
+    & + * {
+      padding-right: var(--dialog-padding);
+      margin-right: rem(20);
+      display: block;
+    }
+
+    & + span:not(.h1,.h2,.h3,.h4,.h5,.h6) {
+      padding-bottom: rem(8);
+      line-height: rem(19);
+    }
+
+    & + span:not(.h1,.h2,.h3,.h4,.h5,.h6) + * {
+      padding-right: var(--dialog-padding);
+      margin-right: rem(20);
+      display: block;
+    }
+
+    @media (forced-colors: active) {
+      text-indent: 0;
+      width: fit-content;
+
+      &:after {
+        display: none;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(sm) {
+    
+    --dialog-padding: #{rem(32)};
+    min-width: rem(335);
+    width: fit-content;
+    max-width: rem(686);
+  }
+  
+  @include media-breakpoint-up(md) {
+    
+    min-width: rem(454);
+    width: fit-content;
+    max-width: rem(736);
+  }
+
+  &:has(.youtube-embed){
+    padding: 0!important;
+  }
+
+  &.dialog--fullwidth {
+    max-width: rem(1112);
+  }
+
+  @media screen and (max-width: 36em) {
+
+    :is(form, fieldset, .btn--wrapper):has(> .btn:first-child, > .btn:last-child) .btn:not(.dialog__close) {
+      width: 100%;
+      max-width: 100%;
+      margin: 0;
+      display: block;
+      text-align: center;
+
+      &:not(:last-child) {
+        margin-bottom: 1rem!important;
+      }
+    }
+  }
+
+  .mh-lg {
+    padding-left: 1rem;
+    margin-left: -1rem;
+    padding-right: calc(var(--dialog-padding) - 10px);
+    margin-right: calc((var(--dialog-padding) * -1) + 10px);
+    margin-bottom: calc(var(--dialog-padding) * -1);
+
+    > *:last-child {
+      margin-bottom: 2rem!important;
+    }
+
+    > p:last-child {
+      padding-bottom: 0!important;
+    }
+  }
+}
+
+dialog::backdrop {
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(4px);
+  overscroll-behavior: contain;
+}
+// #endregion
+
+// #region Transactional 
+*:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement) {
+
+  text-align: center;
+
+
+  &:before {
+    content: "\f05a";
+    font-weight: 300;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    display: var(--fa-display,inline-block);
+    font-style: normal;
+    font-variant: normal;
+    line-height: 1;
+    text-rendering: auto;
+    font-family: "Font Awesome 6 Pro";
+    font-size: 3rem;
+    @include media-breakpoint-up(md) {
+      font-size: 4rem;
+    }
+    margin-top: 0;
+    margin-bottom: rem(24);
+    line-height: 1;
+    color: var(--colour-heading);
+    clear: both;
+  }
+
+  &:has(> i):before{
+
+    display: none;
+  }
+
+  &:has(> i) > i{
+
+    display: var(--fa-display,inline-block);
+    line-height: 1;
+    font-size: 3rem;
+    @include media-breakpoint-up(md) {
+      font-size: 4rem;
+    }
+    margin-top: 0;
+    margin-bottom: rem(24);
+    line-height: 1;
+    color: var(--colour-heading);
+    clear: both;
+
+    &:has(> i){
+      position: relative;
+    }
+
+    > i:before {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: scale(0.5) translate(-100%,0);
+    }
+  }
+
+  > form:first-child button,
+  > button:first-child {
+    display: none;
+
+    & + * {
+      padding-right: 0;
+      margin-right: 0;
+    }
+
+    & + span:not(.h1,.h2,.h3,.h4,.h5,.h6) + * {
+      padding-right: 0;
+      margin-right: 0;
+    }
+  }
+
+  form > :is(button,a) {
+    margin-bottom: 0;
+  }
+
+  @include media-breakpoint-up(sm) {
+
+    :is(button, .btn):has(~ :is(button, .btn):last-child),
+    :is(button, .btn):last-child {
+      min-width: calc(50% - 1rem);
+      text-align: center;
+    }
+  }
+}
+// #endregion
+
+// #region youTube video
+*:not(.dialog__wrapper) > dialog[open]:has(.youtube-embed){
+
+  display: block;
+
+  .mh-lg, .mh-lg:before {
+    display: contents;
+  }
+
+  @include media-breakpoint-up(sm) {
+    
+    min-width: rem(686);
+    max-width: rem(686);
+  }
+  
+  @include media-breakpoint-up(md) {
+    
+    min-width: rem(736);
+    max-width: rem(736);
+  }
+}
+// #endregion
+
+
+// #region admin panel dialog
+dialog:has(> .admin-panel) {
+
+  .dialog__close {
+    margin-top: -0.8rem;
+  }
+}
+dialog > .admin-panel {
+  margin: -1rem calc(var(--dialog-padding) * -1) calc(var(--dialog-padding) * -1) calc(var(--dialog-padding) * -1)!important;
+  padding-top: 0;
+
+  &:last-child {
+    
+    margin-bottom: calc(var(--dialog-padding) * -1);
+  }
+}
+
+// #endregion
+
+
+dialog:has(.embed){
+
+  width: calc(100% - 6rem) !important;
+  max-width: 50rem !important;
+  padding: 0;
+  aspect-ratio: 16 / 9;
+
+  .embed {
+    aspect-ratio: 16 / 9;
+    width: 100%;
+  }
+}
+
+
+// #region Multi step modal
+
+*:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open]{
+
+  padding: 0;
+
+  & > button:first-child {
+    top: calc(var(--dialog-padding) * 4)!important;
+  }
+
+  :is(.h1,.h2,.h3,.h4,.h5,.h6){
+    padding-right: calc(var(--dialog-padding) * 3);
+    padding-bottom: var(--dialog-padding);
+  }
+
+
+  iam-multi-step {
+    padding-inline: 0!important;
+  }
+
+  form {
+    overflow: auto;
+    padding-bottom: var(--dialog-padding);
+  
+    max-height: calc(min(90vh, 47rem) - 6rem);
+  }
+
+  fieldset {    
+
+    > :last-child {
+      margin-bottom: var(--dialog-padding)!important;
+    }
+
+    > p:last-child {
+      padding-bottom: 0!important;
+      margin-bottom: var(--dialog-padding)!important;
+    }
+  }
+
+  fieldset:not(.active) {
+    display: none;
+  }
+
+  @include media-breakpoint-up(sm) {
+    min-width: rem(452);
+    width: rem(452);
+    max-width: rem(452);
+
+    
+    & > button:first-child {
+      top: calc(var(--dialog-padding) * 3.25)!important;
+    }
+
+    .btn--wrapper {
+      margin-top: auto;
+      text-align: right;
+    }
+
+    form {
+      height: calc(100vh - 6rem);
+      padding-left: 0!important;
+      padding-right: var(--dialog-padding)!important;
+    }
+  }
+
+
+  @include media-breakpoint-up(md) {
+    min-width: rem(924);
+    width: rem(924);
+    max-width: rem(924);
+
+    & > button:first-child {
+      top: calc(var(--dialog-padding) * 1)!important;
+    }
+
+    @media (min-height: #{rem(500)}) {
+      height: rem(478);
+      max-height: rem(478);
+    }
+
+    form {
+      display: flex;
+      flex-direction: column;
+    }
+
+    fieldset {    
+      display: flex; 
+      flex-direction: column;
+      flex-grow: 1;
+      position: relative;
+  
+      overflow: auto;
+      margin-bottom: calc(var(--dialog-padding) * -1);
+      padding-right: calc(var(--dialog-padding) - 10px);
+      margin-right: calc((var(--dialog-padding) * -1) + 10px);
+  
+      max-height: rem(370);
+  
+      &::before {
+        content: "";
+        top: 100%;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: var(--dialog-padding);
+        min-height: var(--dialog-padding);
+        position: sticky;
+        display: block;
+        background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
+        z-index: 2;
+        margin-bottom: calc(var(--dialog-padding) * -1);;
+      }
+    }
+  }
+}
+
+// #endregion
+
+// #region mobile fullwidth view For multi step modal
+@media screen and (max-width: 36em) {
+
+  dialog[open]:has(iam-multi-step) {
+
+    min-width: 100%;
+    min-height: 100%;
+    border-radius: 0;
+    overflow-y: auto;
+
+    iam-multi-step {
+      padding-inline: 0!important;
+    }
+
+    form {
+      height: calc(100vh - 6rem);
+      padding-inline: var(--dialog-padding)!important;
+    }
+
+    .btn--wrapper {
+      padding-top: rem(64);
+    }
+  }
+
+  dialog[open]:has(iam-multi-step) {
+    
+    .mh-lg {
+      max-height: none!important;
+      overflow: visible;
+    }
+
+    &:before,
+    *:first-child {
+      margin-top: auto!important;
+    }
+
+    *:last-child {
+
+      margin-bottom: auto!important;
+    }
+  }
+}
+// #endregion

package/assets/sass/elements/popover.scss

@@ -0,0 +1,207 @@
+@use "sass:math";
+@use "../_func" as *;
+
+// #region popover styling
+.dialog__wrapper {
+
+  position: relative;
+  display: inline-block;
+  margin-bottom: calc(var(--btn-margin) - 0.25rem);
+
+
+  &:has(dialog[open],dialog:popover-open) > button {
+    background: var(--colour-btn-secondary-bg-hover);
+    color: var(--colour-btn-secondary-hover);
+    filter: brightness(85%);
+    transition: background 0.1s, color 0.1s;
+    //color: var(--colour-btn);
+    border-radius: 1.5rem;
+  }
+
+  > .btn:first-child {
+
+    margin-bottom: 0.25rem;
+
+    &:not(.btn-compact):not([class*="fa-"]):after {
+      content: "";
+    
+      display: inline-block;
+      margin-left: 1em;
+      margin-bottom: -0.15em;
+      height: 1em;
+      width: 1em;
+      z-index: var(--index-focus);
+      background: currentColor;
+      mask-image: var(--icon-arrow);
+      mask-size: 100%;
+      mask-repeat: no-repeat;
+      mask-position: 50% 50%;
+      -webkit-mask-image: var(--icon-arrow);
+      -webkit-mask-size: 100%;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: 50% 50%;
+
+      transform: rotate(90deg);
+    }
+
+    &[aria-expanded]:not([data-number]):after {
+
+      transform: rotate(270deg);
+    }
+  }
+
+  > :is(dialog[open],dialog:popover-open) {
+
+    left: 0;
+    top: 100%;
+    z-index: var(--index-floating);
+    min-width: rem(320);
+    border-radius: rem(16);
+    width: rem(320);
+    padding: rem(24);
+
+    @include media-breakpoint-up(sm) {
+      width: rem(335);
+    }
+    @include media-breakpoint-up(md) {
+      width: rem(360);
+    }
+
+    &.dialog--list {
+      
+      width: fit-content!important;
+
+      @include media-breakpoint-up(sm) {
+        width: max-content!important;
+      }
+
+      min-width: rem(140)!important;
+      max-width: rem(280)!important;
+      padding: rem(16);
+      margin: 0;
+
+      hr {
+        height: 2px;
+        background: var(--colour-border);
+        margin-left: -#{rem(16)};
+        margin-right: -#{rem(16)};
+        margin-block: 0.25rem;
+      }
+
+      .radio--tick {
+        margin-right: 0;
+        padding-left: 1.5rem;
+          margin-bottom: 0;
+
+        &:before {
+          left: 0;
+          font-size: 1em;
+          top: 0.75rem;
+        }
+      }
+
+      a {
+
+        padding: #{rem(6)};
+
+        &:not(:hover,:focus,:active){
+          border-color: transparent;
+        }
+        margin: 0;
+
+        &:after {
+          display: none;
+        }
+      }
+
+      .btn-action {
+        &:not(:hover,:focus,:active){
+          border-color: transparent;
+        }
+        margin: 0;
+      }
+
+    }
+
+    :is(dialog[open],dialog:popover-open) {
+      display: contents;
+    }
+  }
+
+  &.dialog__wrapper--right > :is(dialog[open],dialog:popover-open){
+
+    right: 0;
+    left: auto;
+  } 
+
+  &.dialog__wrapper--sm > :is(dialog[open],dialog:popover-open) {
+    
+    width: rem(239);
+  }
+
+  &.dialog__wrapper--lg > :is(dialog[open],dialog:popover-open) {
+    
+    width: rem(319);
+  }
+
+  @include media-breakpoint-up(sm) {
+    
+    &.dialog__wrapper--sm-left > dialog[open]{
+
+      left: 0;
+      right: auto;
+    }  
+    &.dialog__wrapper--sm-right > dialog[open]{
+
+      right: 0;
+      left: auto;
+    }
+    &.dialog__wrapper--sm > dialog[open] {
+      width: rem(265);
+    }
+    &.dialog__wrapper--lg > dialog[open] {
+      width: rem(452);
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    
+    &.dialog__wrapper--md-left > dialog[open]{
+
+      left: 0;
+      right: auto;
+    }  
+    &.dialog__wrapper--md-right > dialog[open]{
+
+      right: 0;
+      left: auto;
+    }
+    &.dialog__wrapper--sm > dialog[open] {
+      width: rem(266);
+    }
+    &.dialog__wrapper--lg > dialog[open] {
+      width: rem(454);
+    }
+  }
+}
+
+// Show hide the indidual or multiple label
+.dialog__wrapper :is(.empty, .individual) {
+  display: none;
+}
+
+@supports selector(:has(*)) {
+
+  .dialog__wrapper :is(.empty, .individual) {
+    display: inline;
+  }
+}
+
+.dialog__wrapper:has(input:checked) .empty,
+.dialog__wrapper:not(:has(input:checked)) .individual,
+.dialog__wrapper:has(input:checked ~ input:checked) .individual,
+.dialog__wrapper:not(:has(input:checked ~ input:checked)) .multiple {
+
+  display: none;
+}
+// #endregion

package/assets/sass/elements/table.element.scss

@@ -1,5 +1,40 @@
 @use "../_func.scss" as *;
 
+// #region reset
+table {
+  caption-side: bottom;
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: $table-cell-padding-y;
+  padding-bottom: $table-cell-padding-y;
+  color: $table-caption-color;
+  text-align: left;
+}
+
+// 1. Removes font-weight bold by inheriting
+// 2. Matches default `<td>` alignment by inheriting `text-align`.
+// 3. Fix alignment for Safari
+
+th {
+  font-weight: $table-th-font-weight; // 1
+  text-align: inherit; // 2
+  text-align: -webkit-match-parent; // 3
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+// #endregion
+
 // #region Default table
 table {
   --border-width: 2px;