@iamproperty/components 7.6.3--beta3 → 7.6.3

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

@@ -20,252 +20,233 @@
 }
 
 @layer components {
-dialog[open] {
-  //overflow-y: hidden;
-  width: 90vw;
-  max-width: rem(324); // col-width*4
+  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;
+    //height: 90vh;
+    max-height: min(90vh, #{rem(752)});
+    overscroll-behavior: contain;
+    overflow-y: hidden;
 
-  @media screen and (min-width: 36em) {
-    --dialog-padding: 2rem;
-    min-width: rem(335);
-    width: fit-content;
-    max-width: rem(686);
-  }
+    @media screen and (min-width: 36em) {
+      --dialog-padding: 2rem;
+      min-width: rem(335);
+      width: fit-content;
+      max-width: rem(686);
+    }
 
-  @media screen and (min-width: 62em) {
-    min-width: rem(454);
-    width: fit-content;
-    max-width: rem(736);
-  }
+    @media screen and (min-width: 62em) {
+      min-width: rem(454);
+      width: fit-content;
+      max-width: rem(736);
+    }
 
-  &::before {
-    content: "";
-    top: 0.75rem;
-    bottom: auto;
-    left: 0;
-    right: 0.5rem;
-    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;
-  }
+    &::before {
+      content: "";
+      top: 0.75rem;
+      bottom: auto;
+      left: 0;
+      right: 0.5rem;
+      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;
+    .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;
+      .fa-circle {
+        display: none;
+      }
     }
-  }
 
 
-  // Close button
-  > button:first-child {
+    // Close button
+    > button:first-child {
 
-    position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
-    z-index: var(--index-floating);
-    margin: 0;
+      position: absolute;
+      top: 0.5rem;
+      right: 0.5rem;
+      z-index: var(--index-floating);
+      margin: 0;
 
-    &:not(:hover,:focus,:active){
-      background-color: var(--colour-canvas);
-    }
+      &:not(:hover,:focus,:active){
+        background-color: var(--colour-canvas);
+      }
 
-    @container (min-width: 36em) {
-      top: calc(var(--dialog-padding) - 0.75rem);
-      right: calc(var(--dialog-padding) - 0.75rem);
+      @container (min-width: 36em) {
+        top: calc(var(--dialog-padding) - 0.75rem);
+        right: calc(var(--dialog-padding) - 0.75rem);
+      }
+      
     }
     
-  }
-  
 
-  &:has(.youtube-embed) {
-    padding: 0 !important;
-  }
+    &:has(.youtube-embed) {
+      padding: 0 !important;
+    }
 
-  &.dialog--fullwidth {
-    max-width: rem(1112);
-  }
+    &.dialog--fullwidth {
+      max-width: rem(1112);
+    }
 
-  .btn-group {
-    display: none;
+    .btn__group {
+      display: none;
+    }
   }
-}
-}
-// Size variants
-// small
-@media screen and (min-width: 36em) {
+  // Size variants
+  // small
+  @media screen and (min-width: 36em) {
 
-  :host(.modal--sm) dialog[open] {
-    
-      min-width: rem(335);
-      width: rem(335);
-      max-width: rem(335);
+    :host(.modal--sm) dialog[open] {
+      
+        min-width: rem(335);
+        width: rem(335);
+        max-width: rem(335);
+    }
   }
-}
 
-@media screen and (min-width: 62em) {
+  @media screen and (min-width: 62em) {
 
-  :host(.modal--sm) dialog[open] {
-      min-width: rem(454);
-      width: rem(454);
-      max-width: rem(454);
+    :host(.modal--sm) dialog[open] {
+        min-width: rem(454);
+        width: rem(454);
+        max-width: rem(454);
+    }
   }
-}
 
-// large
-@media screen and (min-width: 36em) {
+  // large
+  @media screen and (min-width: 36em) {
 
-  :host(.modal--lg) dialog[open] {
-      min-width: rem(686);
-      width: rem(686);
-      max-width: rem(686);
+    :host(.modal--lg) dialog[open] {
+        min-width: rem(686);
+        width: rem(686);
+        max-width: rem(686);
+    }
   }
-}
 
-@media screen and (min-width: 62em) {
+  @media screen and (min-width: 62em) {
 
-  :host(.modal--lg) dialog[open] {
-      min-width: rem(736);
-      width: rem(736);
-      max-width: rem(736);
+    :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;
-}
+  dialog::backdrop {
+    background: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(4px);
+    overscroll-behavior: contain;
+  }
 
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
 
-::-webkit-scrollbar-track {
-  background-color: transparent;
-  border-top: 4px solid transparent;
-}
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-top: 4px solid transparent;
+  }
 
-::-webkit-scrollbar-thumb {
-  background-color: #c1c1c1;
-  width: 6px;
-  border-radius: 3px;
-}
+  ::-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;
-}
+  ::slotted(p:last-child){
+    padding-bottom: 0!important;
+  }
+  ::slotted(p:last-child){
+    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: 1.5rem;
-    line-height: 1;
-    color: var(--colour-heading);
-        margin-inline: auto;
+  // #region transactional
+  :host(:is([data-type="transactional"],[data-type="acknowledgement"])) dialog[open] {
+    text-align: center;
 
-    @media screen and (min-width: 62em) {
-      font-size: 4rem;
-      height: 4rem;
-      width: 4rem;
-    }
+    .scroll > .fa-circle {
+      display: var(--fa-display, block);
+      line-height: 1;
+      font-size: 3rem;
+      height: 3rem;
+      width: 3rem;
+      margin-top: 0;
+      margin-bottom: 1.5rem;
+      line-height: 1;
+      color: var(--colour-heading);
+          margin-inline: auto;
 
-    &:has(> i) {
-      position: relative;
-    }
+      @media screen and (min-width: 62em) {
+        font-size: 4rem;
+        height: 4rem;
+        width: 4rem;
+      }
 
-    > i:before {
-      position: absolute;
-      top: 0;
-      left: 50%;
-      transform: scale(0.5) translate(-100%, 0);
-    }
-  }
+      &:has(> i) {
+        position: relative;
+      }
 
-  > button:first-child {
+      > i:before {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: scale(0.5) translate(-100%, 0);
+      }
+    }
 
-    display: none;
-  }
-  
-  .btn-group {
-    display: flex;
-    justify-content: center;
-    gap: var(--gap);
-    padding-top: 2rem;
+    > button:first-child {
 
-    button {
-      margin: 0;
+      display: none;
     }
-  }
-
-  @container (max-width: 36em) {
-    .btn-group {
+    
+    .btn__group {
       display: flex;
-      flex-direction: column-reverse;
-      button {
-        display: block;
-        width: 100%;
-        max-width: 100%;
-        min-width: 100%;
-        text-align: center;
-      }
+      justify-content: center;
+      padding-top: 2rem;
     }
   }
-}
-
 
-:host([data-type="acknowledgement"]) dialog[open] {
+  :host([data-type="acknowledgement"]) dialog[open] {
 
-  .btn-group [data-cancel] {
-    display: none;
+    .btn__group [data-cancel] {
+      display: none;
+    }
   }
-}
-// #endregion
+  // #endregion
+
+}

package/assets/sass/components/rating.component.css

@@ -0,0 +1,212 @@
+@layer components {
+
+  :host {
+    padding-bottom: 0!important;
+    display: block!important;
+
+    --fill-colour: var(--colour, var(--colour-success));
+    --star-size: 2.5rem; /* control the size*/
+    --outline-default: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path d='M320.1 32C329.1 32 337.4 37.1 341.5 45.1L415 189.3L574.9 214.7C583.8 216.1 591.2 222.4 594 231C596.8 239.6 594.5 249 588.2 255.4L473.7 369.9L499 529.8C500.4 538.7 496.7 547.7 489.4 553C482.1 558.3 472.4 559.1 464.4 555L320.1 481.6L175.8 555C167.8 559.1 158.1 558.3 150.8 553C143.5 547.7 139.8 538.8 141.2 529.8L166.4 369.9L52 255.4C45.6 249 43.4 239.6 46.2 231C49 222.4 56.3 216.1 65.3 214.7L225.2 189.3L298.8 45.1C302.9 37.1 311.2 32 320.2 32zM320.1 108.8L262.3 222C258.8 228.8 252.3 233.6 244.7 234.8L119.2 254.8L209 344.7C214.4 350.1 216.9 357.8 215.7 365.4L195.9 490.9L309.2 433.3C316 429.8 324.1 429.8 331 433.3L444.3 490.9L424.5 365.4C423.3 357.8 425.8 350.1 431.2 344.7L521 254.8L395.5 234.8C387.9 233.6 381.4 228.8 377.9 222L320.1 108.8z'/></svg>");
+    
+    --mask-default: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path d='M341.5 45.1C337.4 37.1 329.1 32 320.1 32C311.1 32 302.8 37.1 298.7 45.1L225.1 189.3L65.2 214.7C56.3 216.1 48.9 222.4 46.1 231C43.3 239.6 45.6 249 51.9 255.4L166.3 369.9L141.1 529.8C139.7 538.7 143.4 547.7 150.7 553C158 558.3 167.6 559.1 175.7 555L320.1 481.6L464.4 555C472.4 559.1 482.1 558.3 489.4 553C496.7 547.7 500.4 538.8 499 529.8L473.7 369.9L588.1 255.4C594.5 249 596.7 239.6 593.9 231C591.1 222.4 583.8 216.1 574.8 214.7L415 189.3L341.5 45.1z'/></svg>");
+
+  }
+
+  :host(.rating--sm){
+    --star-size: 1.5rem; /* control the size*/
+  }
+  :host(.rating--lg){
+    --star-size: 4rem; /* control the size*/
+  }
+
+  .wrapper:not(.show) {
+    display: none!important;
+  }
+  .wrapper:has(input[type="range"][max="2"]) {
+    --steps: 2;
+  }
+  .wrapper:has(input[type="range"][max="3"]) {
+    --steps: 3;
+  }
+  .wrapper:has(input[type="range"][max="4"]) {
+    --steps: 4;
+  }
+  .wrapper:has(input[type="range"][max="5"]) {
+    --steps: 5;
+  }
+  .wrapper:has(input[type="range"][max="6"]) {
+    --steps: 6;
+  }
+  .wrapper:has(input[type="range"][max="7"]) {
+    --steps: 7;
+  }
+  .wrapper:has(input[type="range"][max="8"]) {
+    --steps: 8;
+  }
+  .wrapper:has(input[type="range"][max="9"]) {
+    --steps: 9;
+  }
+  .wrapper:has(input[type="range"][max="10"]) {
+    --steps: 10;
+  }
+  
+  .wrapper:has(input[type="range"]) {
+
+    padding: 0!important;
+    margin: 0!important;
+    height: var(--star-size);
+    width: calc(var(--star-size)*var(--steps));
+    position: relative;
+    display: inline-flex;
+
+    &:after {
+      content: "";
+      position: absolute;
+      inset: 0;
+
+      background-color: var(--fill-colour);
+      mask-image:var(--outline, var(--outline-default));
+    
+      mask-size: var(--star-size);
+      pointer-events: none;
+    }
+
+    &:before {
+      content: "";
+      
+      width: 100%;
+      height: calc(var(--star-size));
+      background-color: var(--fill-colour);
+      mask-image: var(--mask,var(--mask-default));
+      mask-size: var(--star-size);
+
+      flex-grow: 1;
+      flex-shrink: 1;
+    }
+  }
+
+  @supports not (d:attr(d type(*))) {
+    .wrapper input[type="range"] {
+
+      &[min="1"]{
+        --offset: 1;
+      }
+      &[min="2"]{
+        --offset: 2;
+      }
+      &[min="3"]{
+        --offset: 3;
+      }
+      &[min="4"]{
+        --offset: 4;
+      }
+      &[min="5"]{
+        --offset: 5;
+      }
+      &[min="6"]{
+        --offset: 6;
+      }
+      &[min="7"]{
+        --offset: 7;
+      }
+      &[min="8"]{
+        --offset: 8;
+      }
+      &[min="9"]{
+        --offset: 9;
+      }
+    }
+  }
+  @supports (d:attr(d type(*))) {
+    .wrapper input[type="range"] {
+      --offset: attr(min type(<number>),0);
+    }
+  }
+
+  .wrapper input[type="range"] {
+
+    position: static;
+    flex-grow: 0;
+    flex-shrink: 0;
+    height: var(--star-size);
+    box-sizing: border-box;
+    appearance: none;
+    mask-image: var(--mask,var(--mask-default));
+    mask-size: var(--star-size);
+    mask-position: calc(var(--star-size)*var(--offset,0)) 0;
+    border-radius: 0;
+    background-color: transparent;
+    padding: 0;
+    margin: 0;
+    width: calc(var(--star-size)*calc(var(--steps) - var(--offset,0)));
+
+    &:not([disabled]){
+      cursor: pointer;
+    }
+  }
+
+
+  .wrapper input[type=range]::-webkit-slider-runnable-track {
+    background: transparent;
+    height: initial;
+    border-radius: 0;
+  }
+
+  .wrapper input[type='range']::-moz-range-track {
+
+    background: transparent;
+    height: initial;
+    border-radius: 0;
+  }
+
+  .wrapper input[type="range"]::-webkit-slider-thumb{
+    
+    outline: none!important;
+    -webkit-appearance: none;
+    appearance: none;
+    margin: 0;
+    background-color: var(--colour, var(--colour-success));
+    border-radius: 0%;
+    position: relative;
+    z-index: 99;
+    pointer-events: all;
+    overflow: visible;
+    width: 1px;
+    height: var(--star-size);
+    border-image-source: linear-gradient(90deg, var(--fill-colour) 50%, var(--colour-canvas) 0px);
+    border-image-slice: 0 fill;
+    border-image-width: 1px;
+    border-image-outset: 0 50rem;
+    border-image-repeat: stretch;
+  }
+
+  .wrapper input[type="range"]::-moz-range-thumb {
+    outline: none!important;
+    -webkit-appearance: none;
+    appearance: none;
+    margin: 0;
+    background-color: var(--colour, var(--colour-success));
+    border-radius: 0%;
+    position: relative;
+    z-index: 99;
+    pointer-events: all;
+    overflow: visible;
+    width: 1px;
+    height: var(--star-size);
+    border-image-source: linear-gradient(90deg, var(--colour, var(--colour-success)) 50%, var(--colour-canvas) 0px);
+    border-image-slice: 0 fill;
+    border-image-width: 1px;
+    border-image-outset: 0 50rem;
+    border-image-repeat: stretch;
+  }
+
+  .wrapper:has(input[type="range"]:not([disabled])):is(:hover,:active,:focus,:focus-within) {
+    --fill-colour:  oklch(from var(--colour, var(--colour-success)) calc(l - 0.05) c h);
+  }
+
+  .wrapper:has(input[type="range"]:focus-visible) {
+    outline: 1px solid var(--colour-info);
+    border-radius: 0.25rem;
+  }
+
+}

package/assets/sass/elements/button__group.css

@@ -13,19 +13,40 @@
       white-space: normal;
     }
 
-    
+
+    .btn-secondary {
+      order: 2;
+    }
+    .btn-primary {
+      order: 1;
+    }
   }
-  @container (min-width: 62em) {
+  @container (min-width: 36em) {
     .btn__group {
       flex-direction: row;
       column-gap: var(--gap);
 
       .btn {
+          
+        max-width: fit-content;
+        white-space: nowrap;
+      }
+
         
-      max-width: fit-content;
-      white-space: nowrap;
+      .btn-secondary {
+        order: 1;
+      }
+      .btn-primary {
+        order: 2;
       }
     }
+    .btn__group.text-end {
+      justify-content: flex-end;
+    }
+    iam-modal .btn__group:last-child .btn,
+    dialog .btn__group:last-child .btn {
+      margin-bottom: 0;
+    }
   }
 }