@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/sass/components/actionbar.scss

@@ -1,7 +1,7 @@
-@use "../_func.scss" as *;
+@use '../_func.scss' as *;
 
 :host {
-  background-color: #FCFCFC;
+  background-color: #fcfcfc;
 }
 
 .actionbar__wrapper {
@@ -14,28 +14,27 @@
 // #region View states (Default, search, selected)
 .views,
 .selectall,
-slot[name="selectall"] {
+slot[name='selectall'] {
   display: block;
-  position: absolute!important;
+  position: absolute !important;
   top: 50%;
   left: rem(24);
   margin-left: 0;
-  
+
   @include media-breakpoint-up(sm) {
     left: rem(32);
   }
 
-  transform: translate(0,-50%);
+  transform: translate(0, -50%);
   z-index: 10;
 
-  .btn-action:not(:last-child){
-    margin-right: rem(4)!important;
+  .btn-action:not(:last-child) {
+    margin-right: rem(4) !important;
   }
 }
 
 .selectall,
-slot[name="selectall"] {
-  
+slot[name='selectall'] {
   width: rem(40);
   overflow: hidden;
 
@@ -44,7 +43,6 @@ slot[name="selectall"] {
   }
 
   @include media-breakpoint-up(sm) {
-
     width: auto;
     overflow: visible;
   }
@@ -59,8 +57,7 @@ slot[name="selectall"] {
   margin: 0 0 0 rem(16);
 }
 
-:is(.actionbar,.actionbar--selected,.actionbar--search){
-  
+:is(.actionbar, .actionbar--selected, .actionbar--search) {
   border-top-left-radius: var(--actionbar-radius, #{rem(10)});
   border-top-right-radius: var(--actionbar-radius, #{rem(10)});
   padding: 0 rem(24);
@@ -68,7 +65,7 @@ slot[name="selectall"] {
   justify-content: flex-end;
   align-items: center;
   height: rem(68);
-  
+
   @supports selector(:has(*)) {
     position: absolute;
   }
@@ -80,34 +77,29 @@ slot[name="selectall"] {
 }
 
 .actionbar {
-
   display: flex;
 }
 
 .actionbar--selected {
-
   background-color: var(--colour-canvas);
 
   @include light-mode {
-    
-    background-color: #E6EAEC;
+    background-color: #e6eaec;
   }
 
   display: flex;
-  
+
   @supports selector(:has(*)) {
-  opacity: 0;
+    opacity: 0;
   }
   pointer-events: none;
 }
 
 .actionbar--search {
-
   background-color: var(--colour-canvas);
-  
-  @include light-mode {
 
-    background-color: #E6EAEC;
+  @include light-mode {
+    background-color: #e6eaec;
   }
   display: flex;
   z-index: 2;
@@ -118,34 +110,29 @@ slot[name="selectall"] {
 
 // Show selected bar
 .actionbar {
-
-  opacity: var(--selectall-actionbar-opacity,1);
-  pointer-events: var(--selectall-actionbar-pe,all);
+  opacity: var(--selectall-actionbar-opacity, 1);
+  pointer-events: var(--selectall-actionbar-pe, all);
 }
 
 .actionbar--selected {
-
-  opacity: var(--selectall-opacity,0);
-  pointer-events: var(--selectall-pe,none);
+  opacity: var(--selectall-opacity, 0);
+  pointer-events: var(--selectall-pe, none);
 }
 
 .selectall:has(input:checked) ~ .actionbar,
 .selectall:has(input:indeterminate) ~ .actionbar {
-  
   opacity: 0;
   pointer-events: none;
 }
 
 .selectall:has(input:checked) ~ .actionbar--selected,
 .selectall:has(input:indeterminate) ~ .actionbar--selected {
-  
   opacity: 1;
   pointer-events: all;
 }
 
 // Show search bar
 .actionbar--search.show {
-  
   opacity: 1;
   pointer-events: all;
 }
@@ -157,37 +144,36 @@ slot[name="selectall"] {
 // #endregion
 
 // #region Slotted elements
-::slotted(.btn){
-  margin-top: 0!important;
-  margin-bottom: 0!important;
-  margin-left: rem(16)!important;
-  margin-right: 0!important;
+::slotted(.btn) {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  margin-left: rem(16) !important;
+  margin-right: 0 !important;
 }
 
-::slotted(.btn:not(.btn-action)){
+::slotted(.btn:not(.btn-action)) {
   order: 2;
 }
 
 // buttons only for single items
-::slotted([data-single]){
+::slotted([data-single]) {
   pointer-events: none;
   opacity: 0.5;
 }
 
-:host([data-selected="1"]) ::slotted([data-single]){
+:host([data-selected='1']) ::slotted([data-single]) {
   pointer-events: all;
   opacity: 1;
 }
 
-::slotted(hr){
+::slotted(hr) {
   height: rem(32);
-  color: #9D9D9D!important;
+  color: #9d9d9d !important;
   width: 1px;
   display: none;
   margin-left: 1rem !important;
-  
-  @include container-up(md) {
 
+  @include container-up(md) {
     display: block;
   }
 }
@@ -195,7 +181,6 @@ slot[name="selectall"] {
 
 // #region safe area
 .safe-area {
-
   display: flex;
   flex-wrap: nowrap;
   justify-content: flex-end;
@@ -203,12 +188,10 @@ slot[name="selectall"] {
   width: rem(210);
 
   @include container-up(sm) {
-
     width: rem(450);
   }
 
   @include container-up(md) {
-
     width: rem(750);
   }
 
@@ -221,42 +204,36 @@ slot[name="selectall"] {
 }
 
 :host([data-large-safe-area]) .safe-area {
-  
   width: rem(260);
 
   @include container-up(sm) {
-
     width: rem(620);
   }
 
   @include container-up(md) {
-
     width: rem(1048);
   }
-
 }
 
 :host([data-switchviews]) .safe-area {
-  
   width: rem(144);
 }
 // #endregion
 
-// #region overflow dialog 
-::slotted(.btn-compact[slot="selected-overflow"]),
-::slotted(.btn-compact[slot="overflow"]) {
-
-  max-width: none!important;
-  text-indent: 0!important;
-  width: auto!important;
-  text-align: left!important;
-  padding-left: 0!important;
-  background: none!important;
-  border: none!important;
+// #region overflow dialog
+::slotted(.btn-compact[slot='selected-overflow']),
+::slotted(.btn-compact[slot='overflow']) {
+  max-width: none !important;
+  text-indent: 0 !important;
+  width: auto !important;
+  text-align: left !important;
+  padding-left: 0 !important;
+  background: none !important;
+  border: none !important;
 
   &:before {
-    position: static!important;
-    line-height: inherit!important;
+    position: static !important;
+    line-height: inherit !important;
   }
 }
 
@@ -267,39 +244,36 @@ slot[name="selectall"] {
 // #endregion
 
 // #region Search bar
-.actionbar--search .btn{
-
+.actionbar--search .btn {
   margin: 0;
-  margin-left: rem(-12)!important;
-  margin-right: auto!important;
+  margin-left: rem(-12) !important;
+  margin-right: auto !important;
 }
 
 .search-wrapper {
   width: calc(100% - #{rem(44 + 8)});
-  max-width: rem(350)!important;
-  margin: 0!important;
+  max-width: rem(350) !important;
+  margin: 0 !important;
 
   @include container-up(md) {
-
-    max-width: rem(450)!important;
+    max-width: rem(450) !important;
   }
 
   input {
     padding-top: rem(8);
     padding-bottom: rem(8);
 
-    min-height: rem(40)!important;
-    max-height: rem(40)!important;
+    min-height: rem(40) !important;
+    max-height: rem(40) !important;
   }
 
-  :is(.prefix,.suffix) {
-    
-    padding: rem(8)!important;
-    min-height: rem(40)!important;
-    max-height: rem(40)!important;
-    min-width: rem(40)!important;
-    max-width: rem(40)!important;
-    line-height: rem(40 - 8 - 8)!important;
+  :is(.prefix, .suffix) {
+    padding: rem(8) !important;
+    min-height: rem(40) !important;
+    max-height: rem(40) !important;
+    min-width: rem(40) !important;
+    max-width: rem(40) !important;
+    line-height: rem(40 - 8 - 8) !important;
   }
 }
 // #endregion

package/assets/sass/components/address-lookup.scss

@@ -3,26 +3,24 @@
   display: block;
 }
 
-input[name="postcode"] {
-  border-color: var(--error-border,var(--colour-primary))!important;
+input[name='postcode'] {
+  border-color: var(--error-border, var(--colour-primary)) !important;
 }
 
-:is([name="postcode"]):is(:focus,.focus):not(:disabled) {
-  border-color: var(--colour-info)!important;
+:is([name='postcode']):is(:focus, .focus):not(:disabled) {
+  border-color: var(--colour-info) !important;
 }
 
-div:has(input[name="postcode"]) .suffix {
-
-  border-color: var(--error-border,var(--colour-primary))!important;
+div:has(input[name='postcode']) .suffix {
+  border-color: var(--error-border, var(--colour-primary)) !important;
 }
 
 .invalid-feedback {
-  display: var(--error-display,none)!important;
+  display: var(--error-display, none) !important;
 }
 
 .optional {
-  
-  display: var(--req-display,inline-block)!important;
+  display: var(--req-display, inline-block) !important;
 }
 
 .pre-filled p {
@@ -32,4 +30,4 @@ div:has(input[name="postcode"]) .suffix {
   border: none;
   background: none;
   cursor: pointer;
-}
+}

package/assets/sass/components/applied-filters.scss

@@ -1,9 +1,8 @@
-@use "../_func.scss" as *;
+@use '../_func.scss' as *;
 
 .applied-filters {
-
   &:not(.applied-filters--compact):not(:empty):before {
-    content: "Applied filters";
+    content: 'Applied filters';
     font-weight: bold;
     font-size: rem(18);
     line-height: rem(22);
@@ -12,16 +11,13 @@
   }
 }
 
-
 :host(.applied-filters--hide-title) {
-
   .applied-filters:before {
     display: none;
   }
 }
 :host(.applied-filters--show-set) {
-
   .tag--not-set {
     display: none;
   }
-}
+}