@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/sass/components/inline-edit.preload.scss

@@ -1,32 +1,24 @@
-@use "../_func" as *;
+@use '../_func' as *;
 
 iam-inline-edit {
-
   .optional-text {
     display: none;
   }
 
   label,
   textarea {
-    margin: 0;;
+    margin: 0;
   }
 }
 
-
 iam-inline-edit:focus-within {
   position: relative;
   z-index: 99;
   --display-status: none;
 }
 
-
-
-
-
-
 // Inactive state
 iam-inline-edit:defined:not(:focus-within):not([data-saving]):not(.was-validated:has(:invalid)) {
-  
   --display-btns: none;
 
   input,
@@ -43,13 +35,11 @@ iam-inline-edit:defined:not(:focus-within):not([data-saving]):not(.was-validated
 
 iam-inline-edit:defined:focus-within:has(select),
 iam-inline-edit:defined[data-saving]:has(select) {
-
   --display-btns: none;
 }
 
 // Hover state
 iam-inline-edit:defined:not(:focus-within):not([data-saving]):not(.was-validated:has(:invalid)):hover {
-  
   input,
   textarea,
   select {
@@ -58,50 +48,44 @@ iam-inline-edit:defined:not(:focus-within):not([data-saving]):not(.was-validated
   }
 }
 
-
 // Multi select
 
-iam-inline-edit:has(iam-multiselect label[slot=checked]) {
+iam-inline-edit:has(iam-multiselect label[slot='checked']) {
   --display-btns: none;
 }
 
-iam-inline-edit:not(:focus-within) iam-multiselect:has(label[slot=checked]) {
+iam-inline-edit:not(:focus-within) iam-multiselect:has(label[slot='checked']) {
   --display-button: none;
 }
 
-iam-inline-edit iam-multiselect .tag[slot="checked"]{
-
+iam-inline-edit iam-multiselect .tag[slot='checked'] {
   outline: none;
 }
 
-
 // Error message
 
-iam-inline-edit.was-validated label:has(:is(input:not([type=radio]):not([type=checkbox]), select)):has(:is(:invalid, .is-invalid)):after {
-
+iam-inline-edit.was-validated
+  label:has(:is(input:not([type='radio']):not([type='checkbox']), select)):has(:is(:invalid, .is-invalid)):after {
   position: absolute;
-    right: 0;
-    bottom: 100%;
-    padding: 0.85rem;
-    width: min-content;
-    white-space: nowrap;
-    
-
-    color: var(--colour-heading);
-
-    display: block;
-    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
-    background: var(--colour-canvas-2);
-    border-radius: 0.5rem;
-    margin: 0 0 -1rem 0;
-    outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+  right: 0;
+  bottom: 100%;
+  padding: 0.85rem;
+  width: min-content;
+  white-space: nowrap;
+
+  color: var(--colour-heading);
+
+  display: block;
+  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
+  background: var(--colour-canvas-2);
+  border-radius: 0.5rem;
+  margin: 0 0 -1rem 0;
+  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
 }
 
-
 // #region preview element
 
 iam-inline-edit:has(.preview) {
-
   position: relative;
 
   label {
@@ -110,7 +94,6 @@ iam-inline-edit:has(.preview) {
   }
 
   .preview {
-
     position: absolute;
     top: 0;
     left: 0;
@@ -127,14 +110,11 @@ iam-inline-edit:has(.preview) {
     }
   }
 
-  &:hover, &:focus {
-
-
+  &:hover,
+  &:focus {
     .preview {
-        
       border: none;
       background: var(--colour-light);
-
     }
   }
 
@@ -148,5 +128,4 @@ iam-inline-edit:has(.preview) {
   }
 }
 
-
-// #endregion
+// #endregion

package/assets/sass/components/inline-edit.scss

@@ -1,7 +1,6 @@
-@use "../_func" as *;
+@use '../_func' as *;
 
 :host {
-  
   max-width: var(--input-max-width, 50rem);
   display: block;
   font-weight: normal;
@@ -9,7 +8,8 @@
   position: relative;
 }
 
-.btns, .status {
+.btns,
+.status {
   justify-content: flex-end;
   gap: 0.5rem;
   position: absolute;
@@ -18,7 +18,6 @@
 }
 
 .btns {
-  
   display: var(--display-btns, flex);
   justify-content: flex-end;
 }
@@ -29,4 +28,4 @@
 
 .btn-action {
   margin: 0;
-}
+}

package/assets/sass/components/marketing.scss

@@ -1,10 +1,8 @@
-@use "../_func.scss" as *;
+@use '../_func.scss' as *;
 
+$isComponent: 'true' !default;
 
-$isComponent: "true"!default;
-
-
-@mixin iamMarketing(){
+@mixin iamMarketing() {
   display: flex;
   position: relative;
   overflow: hidden;
@@ -27,14 +25,22 @@ figure {
   top: 0;
   left: 0;
 
-    &:after {
-    content: "";
+  &:after {
+    content: '';
 
-      inset: 0;
+    inset: 0;
     height: 100%;
     width: 100%;
     position: absolute;
-    background-image: linear-gradient(15deg, #00313c 0%, #03404f 28.7%, #03404f 31.5%, #044353 60.099999999999994%, #1bb1dc 83.2%, rgba(28, 182, 226, 0.486) 100%);
+    background-image: linear-gradient(
+      15deg,
+      #00313c 0%,
+      #03404f 28.7%,
+      #03404f 31.5%,
+      #044353 60.099999999999994%,
+      #1bb1dc 83.2%,
+      rgba(28, 182, 226, 0.486) 100%
+    );
     opacity: 0.85;
     z-index: 1;
   }
@@ -47,18 +53,17 @@ img {
   width: 100%;
   max-height: auto;
   z-index: 2;
-  -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
+  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
+  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
   mix-blend-mode: multiply;
 }
 
 :host {
-@include iamMarketing();
+  @include iamMarketing();
 }
 
-@include slotted('*',$isComponent) {
+@include slotted('*', $isComponent) {
   position: relative;
   z-index: 2;
   text-align: center;
 }
-

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

@@ -1,36 +1,36 @@
-@use "../_func.scss" as *;
+@use '../_func.scss' as *;
 
-*, *:before, *:after {
+*,
+*:before,
+*:after {
   box-sizing: border-box;
 }
 
-// #region Multi 
+// #region Multi
 
 :host {
-
   --dialog-padding: 1.5rem;
   box-sizing: border-box;
-  padding-top: calc(var(--dialog-padding) * 4); 
+  padding-top: calc(var(--dialog-padding) * 4);
   display: block;
   position: relative;
-  margin-right: 0!important;
+  margin-right: 0 !important;
   min-height: 100%;
   padding-left: var(--dialog-padding);
-  
+
   @include media-breakpoint-up(md) {
     padding-top: var(--dialog-padding);
-    padding-left: calc(var(--dialog-padding) + #{rem(282)})!important;
-    display: flex; 
+    padding-left: calc(var(--dialog-padding) + #{rem(282)}) !important;
+    display: flex;
     flex-direction: column;
   }
 }
 
-
 // #region steps
 .steps {
   width: 100%;
   position: absolute;
-  top:0;
+  top: 0;
   left: 0;
   padding: var(--dialog-padding);
   counter-reset: section;
@@ -38,9 +38,8 @@
   justify-content: space-between;
   background-color: var(--colour-primary);
 
-  &:before {   
-
-    content: "";
+  &:before {
+    content: '';
     position: absolute;
     top: calc(50% - 1px);
     left: var(--dialog-padding);
@@ -49,11 +48,16 @@
     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%);
+    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;
@@ -86,7 +90,6 @@
     }
 
     &:not(.active):not(.valid) {
-      
       pointer-events: none;
 
       &:before {
@@ -103,9 +106,7 @@
   }
 
   @include dark-mode() {
-
     button {
-      
       color: rgba($color: #000000, $alpha: 0.5);
 
       &.active {
@@ -117,32 +118,25 @@
     }
   }
 
-  
   @include media-breakpoint-up(md) {
-    
-      width: rem(282);
-      height: 100%;
-      flex-direction: column;
-      justify-content: center;
-
-      &:before {
-        display: none;
-      }
+    width: rem(282);
+    height: 100%;
+    flex-direction: column;
+    justify-content: center;
 
-      button {
-        margin-block: 0.5rem;
-        width: 100%;
-        text-indent: 0;
-        text-align: left;
-        padding-left: 2rem;
-        font-size: rem(18);
-        outline-width: 1px;
-      }
-    
+    &: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/multiselect.preload.scss

@@ -1,12 +1,12 @@
-@use "../_func" as *;
+@use '../_func' as *;
 
-iam-multiselect .tag[slot="checked"]{
+iam-multiselect .tag[slot='checked'] {
   margin-bottom: rem(8);
   order: var(--order, 1);
   margin-inline: rem(3);
 }
 
-iam-multiselect .tag:not([slot="checked"]){
+iam-multiselect .tag:not([slot='checked']) {
   display: block;
   width: 100%;
   max-width: 100%;
@@ -17,8 +17,8 @@ iam-multiselect .tag:not([slot="checked"]){
   outline: none;
   padding-block: 0.5rem;
 
-  &:not(:hover,:focus,:active,:focus-within){
-    background: none!important;
+  &:not(:hover, :focus, :active, :focus-within) {
+    background: none !important;
   }
 
   &::after {
@@ -26,19 +26,16 @@ iam-multiselect .tag:not([slot="checked"]){
   }
 }
 
-iam-multiselect:has(label:not([slot="checked"]):not([slot="notmatched"])) {
-
+iam-multiselect:has(label:not([slot='checked']):not([slot='notmatched'])) {
   --display-panel: block;
 }
 
-iam-multiselect:has(label[slot="checked"]) {
-
+iam-multiselect:has(label[slot='checked']) {
   --display-button: block;
 }
 
 @include dark-mode() {
-  iam-multiselect :is(.tag,.badge):not([slot="checked"]){
-
+  iam-multiselect :is(.tag, .badge):not([slot='checked']) {
     color: var(--colour-heading);
   }
-}
+}

package/assets/sass/components/multiselect.scss

@@ -1,7 +1,6 @@
-@use "../_func" as *;
+@use '../_func' as *;
 
 .outer {
-  
   position: relative;
   max-width: var(--input-max-width, 50rem);
   display: block;
@@ -13,12 +12,11 @@ label {
 }
 
 .wrapper {
-
   margin-bottom: rem(24);
   max-width: var(--input-max-width, 50rem);
 
   &:after {
-    content: "";
+    content: '';
     display: block;
     position: absolute;
     top: 100%;
@@ -28,7 +26,6 @@ label {
   }
 
   input {
-    
     margin-bottom: rem(8);
   }
 
@@ -43,13 +40,12 @@ label {
     display: none;
   }
 
-  &.was-validated .feedback{
+  &.was-validated .feedback {
     display: block;
   }
 }
 
 .wrapper.filled {
-  
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -63,7 +59,7 @@ label {
   border: 2px solid var(--colour-primary);
   border-radius: rem(8);
 
-  &:is(:focus-within,.focus-within):not(:disabled) {
+  &:is(:focus-within, .focus-within):not(:disabled) {
     border-color: var(--colour-info);
     outline: 0;
     box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
@@ -76,17 +72,17 @@ label {
     display: inline-block;
     width: 0;
     flex-grow: 1;
-    padding: 0 rem(8) 0 0!important;
+    padding: 0 rem(8) 0 0 !important;
     margin-inline: rem(3);
     order: 999;
     margin-bottom: rem(8);
   }
 
   .feedback {
-    display: none!important;
+    display: none !important;
   }
 
-  &:is(:focus,.focus):not(:disabled) {
+  &:is(:focus, .focus):not(:disabled) {
     border-color: var(--colour-info);
     outline: 0;
     box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
@@ -94,7 +90,6 @@ label {
 }
 
 button {
-  
   position: absolute;
   top: 0.75rem;
   right: 0.5rem;
@@ -126,32 +121,34 @@ button {
   }
 }
 
-
 .wrapper:is(:focus-within) .dropdown {
-
   display: var(--display-panel, none);
 }
 
-.wrapper .dropdown:hover {
-
-  display: var(--display-panel, none);
+@media (hover: hover) {
+  .wrapper .dropdown:hover {
+    display: var(--display-panel, none);
+  }
 }
 
+@media (hover: none) {
+  :host-context(.hover) .wrapper .dropdown {
+    display: block;
+  }
+}
 
 // Inline edit
 :host-context(:focus-within) {
   input {
-    background-color: none!important;
+    background-color: none !important;
   }
 }
 :host-context(iam-inline-edit) {
-
   display: block;
   --display-btns: none;
 
   label:hover + .outer:not(:focus-within) .wrapper:not([data-mousedown]),
-  .outer:not(:focus-within) .wrapper:not([data-mousedown]):hover{
-    
+  .outer:not(:focus-within) .wrapper:not([data-mousedown]):hover {
     background-color: var(--colour-light);
 
     input {
@@ -167,8 +164,7 @@ button {
     margin-bottom: 0;
   }
 
-  .wrapper:not(.filled):not(:focus-within):not([data-mousedown]){
-
+  .wrapper:not(.filled):not(:focus-within):not([data-mousedown]) {
     input {
       border: none;
       background: none;
@@ -187,4 +183,4 @@ button {
     border: none;
     padding-left: 0;
   }
-}
+}

package/assets/sass/components/nav.docs.scss

@@ -1,28 +1,21 @@
-@use "../_func" as *;
-
+@use '../_func' as *;
 
 :host {
   background: red;
 }
 
-
 @media screen and (max-width: 62em) {
   :host {
-
     pointer-events: none;
     z-index: 99;
     position: relative;
     margin-bottom: 38rem;
-
   }
 
   .btn-menu {
-
-    
-    width: rem(24)!important;
-    text-indent: -300px!important;
-    padding-right: 0!important;
-
+    width: rem(24) !important;
+    text-indent: -300px !important;
+    padding-right: 0 !important;
 
     i {
       display: none;
@@ -43,8 +36,8 @@
     top: rem(96);
     left: auto;
     right: 0;
-    -webkit-box-shadow: 0 6px 12px 0px rgba(0,0,0,0.2);
-    box-shadow: 0 6px 12px 0px rgba(0,0,0,0.2);
+    -webkit-box-shadow: 0 6px 12px 0px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 6px 12px 0px rgba(0, 0, 0, 0.2);
     //height: auto;
     width: 100%;
     max-width: calc(23.4375rem - var(--scrollbar-width));
@@ -57,7 +50,6 @@
 
 @include media-breakpoint-up(md) {
   :host {
-
     position: relative;
   }
-}
+}