@iamproperty/components 7.5.1--beta6 → 7.5.1--beta7

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

@@ -0,0 +1,102 @@
+@use '../func' as *;
+@use '../elements/prefix.scss' as *;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+.wrapper {
+  display: flex;
+  margin-top: 0.5rem;
+}
+
+:host {
+  display: block;
+  max-width: var(--input-max-width, 50rem);
+}
+
+:host(:not(.mb-0)) {
+  //margin-bottom: 1.5rem;
+}
+
+::slotted(input) {
+  margin: 0!important;
+}
+
+::slotted(input.has-prefix) {
+  margin: 0!important;
+  border-start-start-radius: 0!important;
+  border-end-start-radius: 0!important;
+}
+
+::slotted(input.has-suffix) {
+  border-start-end-radius: 0!important;
+  border-end-end-radius: 0!important;
+}
+
+// #region colors
+::slotted(input[type='color']) {
+  width: 3rem !important;
+  flex-shrink: 0 !important;
+  flex-grow: 0 !important;
+  border-start-end-radius: 0 !important;
+  border-end-end-radius: 0 !important;
+  padding: 0 !important;
+  overflow: hidden;
+}
+
+::slotted(input[type='color'])::-webkit-color-swatch{
+  border-radius: 0;
+  border: none;
+}
+
+::slotted(output) {
+  border-left: none !important;
+  border-end-start-radius: 0 !important;
+  border-start-start-radius: 0 !important;
+  margin: 0 !important;
+}
+// #endregion
+
+// #region 
+@layer elements {
+::slotted(select:is([slot="prefix"],[slot="suffix"])){
+
+  --option-colour: red;
+
+  //--input-padding-block: 0;
+
+  margin: 0!important;
+
+  padding-top: 0!important;
+  padding-left: 0.25rem!important;
+  padding-bottom: 0!important;
+  padding-right: 2rem!important;
+  
+  margin-right: 0rem !important;
+  border: none !important;
+  //color: white;
+  height: 100%!important;
+  max-height: 100%!important;
+  min-height: 100%!important;
+
+  $form-select-indicator-new: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m2 5 6 6 6-6'/></svg>") !default;
+
+  background: escape-svg($form-select-indicator-new)!important;
+  background-position: center right!important;
+  background-size: 1.25rem!important;
+  background-repeat: no-repeat!important;
+  background-color: var(--colour-primary)!important;
+  color: var(--colour-white)!important;
+
+  field-sizing: content!important;
+}
+}
+// #endregion
+
+
+.suffix[role="button"] {
+  cursor: pointer;
+}

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

@@ -0,0 +1,269 @@
+@use '../_func.scss' as *;
+@use '../elements/dialog.scss' as *;
+@use '../elements/buttons.scss' as *;
+
+:host{
+  
+  overscroll-behavior: contain;
+
+  display: block;
+  container-type: inline-size;
+
+}
+
+::slotted(dialog) {
+  display: contents!important;
+}
+
+::slotted(button) {
+  margin: 0!important;
+}
+
+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;
+  overflow-y: hidden;
+
+  @include media-breakpoint-up(sm, $mobileOnly) {
+    --dialog-padding: #{rem(32)};
+    min-width: rem(335);
+    width: fit-content;
+    max-width: rem(686);
+  }
+
+  @include media-breakpoint-up(md, $mobileOnly) {
+    min-width: rem(454);
+    width: fit-content;
+    max-width: rem(736);
+  }
+
+  &::before {
+    content: "";
+    top: 0.75rem;
+    bottom: auto;
+    left: 0;
+    right: 6px;
+    height: calc(var(--dialog-padding) - 0.75rem);
+    position: absolute;
+    display: block;
+    background: linear-gradient(0deg, transparent 0%, var(--colour-canvas-2) 100%);
+    z-index: 2;
+  }
+  
+  &::after {
+    content: "";
+    top: auto;
+    bottom: 0.75rem;
+    left: 0;
+    right: 6px;
+    height: calc(var(--dialog-padding) - 0.75rem);
+    position: absolute;
+    display: block;
+    background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
+    z-index: 2;
+  }
+
+  .scroll {
+    margin-inline: calc(var(--dialog-padding) * -1);
+    margin-block: calc(calc(var(--dialog-padding) - 0.75rem) * -1);
+    padding-inline: var(--dialog-padding);
+    padding-block: calc(var(--dialog-padding) - 0.75rem);
+    height: 100%;
+    max-height: 100%;
+    overflow: auto;
+    overscroll-behavior: contain;
+    position: relative;
+    z-index: 1;
+
+    .fa-circle {
+      display: none;
+    }
+  }
+
+
+  // Close button
+  > button:first-child {
+
+    position: absolute;
+    top: calc(var(--dialog-padding) - 0.75rem);
+    right: 6px;
+    z-index: var(--index-floating);
+    margin: 0;
+
+    &:not(:hover,:focus,:active){
+      background-color: Canvas;
+    }
+
+    @container (min-width: 36em) {
+      right: calc(var(--dialog-padding) - 0.75rem);
+    }
+    
+  }
+  
+
+  &:has(.youtube-embed) {
+    padding: 0 !important;
+  }
+
+  &.dialog--fullwidth {
+    max-width: rem(1112);
+  }
+
+  .btn-group {
+    display: none;
+  }
+}
+
+// Size variants
+// small
+@include media-breakpoint-up(sm, $mobileOnly) {
+
+  :host(.modal--sm) dialog[open] {
+    
+      min-width: rem(335);
+      width: rem(335);
+      max-width: rem(335);
+  }
+}
+
+@include media-breakpoint-up(md, $mobileOnly) {
+
+  :host(.modal--sm) dialog[open] {
+      min-width: rem(454);
+      width: rem(454);
+      max-width: rem(454);
+  }
+}
+
+// large
+@include media-breakpoint-up(sm, $mobileOnly) {
+
+  :host(.modal--lg) dialog[open] {
+      min-width: rem(686);
+      width: rem(686);
+      max-width: rem(686);
+  }
+}
+
+@include media-breakpoint-up(md, $mobileOnly) {
+
+  :host(.modal--lg) dialog[open] {
+      min-width: rem(736);
+      width: rem(736);
+      max-width: rem(736);
+  }
+}
+
+
+
+
+dialog::backdrop {
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(4px);
+  overscroll-behavior: contain;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+  border-top: 4px solid transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #c1c1c1;
+  width: 6px;
+  border-radius: 3px;
+}
+
+::slotted(p:last-child){
+  padding-bottom: 0!important;
+}
+::slotted(p:last-of-type){
+  padding-bottom: 0!important;
+}
+::slotted(:last-child){
+  margin-bottom: 0!important;
+}
+
+// #region transactional
+:host(:is([data-type="transactional"],[data-type="acknowledgement"])) dialog[open] {
+  text-align: center;
+
+  .scroll > .fa-circle {
+    display: var(--fa-display, block);
+    line-height: 1;
+    font-size: 3rem;
+    height: 3rem;
+    width: 3rem;
+    margin-top: 0;
+    margin-bottom: rem(24);
+    line-height: 1;
+    color: var(--colour-heading);
+        margin-inline: auto;
+
+    @include media-breakpoint-up(md, $mobileOnly) {
+      font-size: 4rem;
+      height: 4rem;
+      width: 4rem;
+    }
+
+    &:has(> i) {
+      position: relative;
+    }
+
+    > i:before {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: scale(0.5) translate(-100%, 0);
+    }
+  }
+
+  > button:first-child {
+
+    display: none;
+  }
+  
+  .btn-group {
+    display: flex;
+    justify-content: center;
+    gap: var(--gap);
+    padding-top: 2rem;
+
+    button {
+      margin: 0;
+    }
+  }
+
+  @container (max-width: 36em) {
+    .btn-group {
+      display: flex;
+      flex-direction: column-reverse;
+      button {
+        display: block;
+        width: 100%;
+        max-width: 100%;
+        min-width: 100%;
+        text-align: center;
+      }
+    }
+  }
+}
+
+
+:host([data-type="acknowledgement"]) dialog[open] {
+
+  .btn-group [data-cancel] {
+    display: none;
+  }
+}
+// #endregion

package/assets/sass/components/multi-step-modal.component.scss

@@ -0,0 +1,255 @@
+@use '../_func.scss' as *;
+@use '../elements/dialog.scss' as *;
+
+@use '../elements/buttons.scss' as *;
+
+$darkMode: 'true' !default;
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+// #region Multi
+
+dialog[open] {
+  --dialog-padding: 1.5rem;
+  box-sizing: border-box;
+  padding-top: calc(var(--dialog-padding) * 4);
+  //display: block;
+  //position: relative;
+  //margin-right: 0 !important;
+  //min-height: 100%;
+  padding-left: var(--dialog-padding);
+
+  @include media-breakpoint-up(md, $mobileOnly) {
+    padding-top: var(--dialog-padding);
+    padding-left: calc(var(--dialog-padding) + #{rem(282)}) !important;
+    //display: flex;
+    flex-direction: column;
+  }
+}
+
+
+::slotted(dialog) {
+  display: contents!important;
+}
+
+::slotted(button) {
+  margin: 0!important;
+}
+
+
+
+// #region Multi step modal
+
+  dialog[open] {
+    padding: 6rem rem(24) 0 rem(24);
+
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      min-width: rem(452);
+      width: rem(452);
+      max-width: rem(452);
+    }
+
+    @include media-breakpoint-up(md, $mobileOnly) {
+      min-width: rem(924);
+      width: rem(924);
+      max-width: rem(924);
+    padding: 0;
+
+      @media (min-height: #{rem(500)}) {
+        height: rem(478);
+        max-height: rem(478);
+      }
+    }
+
+    > button:first-child {
+
+      position: absolute;
+      top: 5rem;
+      right: 6px;
+      z-index: var(--index-floating);
+      margin: 0;
+
+      &:not(:hover,:focus,:active){
+        background-color: Canvas;
+      }
+
+      @include media-breakpoint-up(md, $mobileOnly) {
+
+        top: calc(var(--dialog-padding) - 0.75rem);
+        right: calc(var(--dialog-padding) - 0.75rem);
+      }
+      
+    }
+  
+  }
+
+  // #endregion
+
+  // #region mobile fullwidth view For multi step modal
+  @media screen and (max-width: 36em) {
+    dialog[open] {
+      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] {
+      .mh-lg {
+        max-height: none !important;
+        overflow: visible;
+      }
+
+      &:before,
+      *:first-child {
+        margin-top: auto !important;
+      }
+
+      *:last-child {
+        margin-bottom: auto !important;
+      }
+    }
+  }
+  // #endregion
+
+
+
+
+
+
+
+
+
+
+
+// #region steps
+.steps {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: var(--dialog-padding);
+  counter-reset: section;
+  display: flex;
+  justify-content: space-between;
+  background-color: var(--colour-primary);
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: calc(50% - 1px);
+    left: var(--dialog-padding);
+    z-index: 2;
+    width: calc(100% - var(--dialog-padding) - var(--dialog-padding));
+    height: 2px;
+    background: currentColor;
+    z-index: 1;
+    background: linear-gradient(
+      90deg,
+      var(--colour-success) 0%,
+      var(--colour-success) var(--progress, 0%),
+      rgba(255, 255, 255, 0.5) var(--progress, 0%),
+      rgba(255, 255, 255, 0.5) 100%
+    );
+  }
+
+  button {
+    position: relative;
+    background: transparent;
+    border: none;
+    color: rgba($color: #ffffff, $alpha: 0.5);
+    height: rem(24);
+    line-height: rem(24);
+    width: rem(24);
+    text-indent: 300%;
+    overflow: hidden;
+    z-index: 2;
+    background-color: var(--colour-primary);
+    outline: 0.5rem solid var(--colour-primary);
+    cursor: pointer;
+
+    &:before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      counter-increment: section;
+      content: counter(section);
+
+      border: 1px solid currentColor;
+      height: rem(24);
+      line-height: rem(24);
+      width: rem(24);
+      text-align: center;
+      display: inline-block;
+      text-indent: 0;
+      border-radius: 50%;
+    }
+
+    &:not(.active):not(.valid) {
+      pointer-events: none;
+
+      &:before {
+        opacity: 0.5;
+      }
+    }
+
+    &.active {
+      color: var(--colour-white);
+    }
+    &.valid {
+      color: var(--colour-success);
+    }
+  }
+
+  @container style(--theme: dark) {
+    button {
+      color: rgba($color: #000000, $alpha: 0.5);
+
+      &.active {
+        color: black;
+      }
+      &.valid {
+        color: var(--colour-complete);
+      }
+    }
+  }
+
+  @include media-breakpoint-up(md, $mobileOnly) {
+    width: rem(282);
+    height: 100%;
+    flex-direction: column;
+    justify-content: center;
+
+    &:before {
+      display: none;
+    }
+
+    button {
+      margin-block: 0.5rem;
+      width: 100%;
+      text-indent: 0;
+      text-align: left;
+      padding-left: 2rem;
+      font-size: rem(18);
+      outline-width: 1px;
+    }
+  }
+}
+// #endregion

package/assets/sass/components/multi-step-modal.global.scss

@@ -0,0 +1,92 @@
+@use '../_func.scss' as *;
+
+// #region Multi step modal
+@layer components {
+  iam-multi-step-modal {
+    
+
+    :is(.h1, .h2, .h3, .h4, .h5, .h6) {
+      padding-right: calc(var(--dialog-padding) * 3);
+      padding-bottom: var(--dialog-padding);
+    }
+
+    form {
+      overflow: auto;
+      padding-bottom: var(--dialog-padding);
+        padding-top: 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, $mobileOnly) {
+
+
+      .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, $mobileOnly) {
+
+      form {
+        display: flex;
+        flex-direction: column;
+      }
+
+      fieldset {
+
+        &.active {
+          
+          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