@iamproperty/components 7.7.1--beta6 → 7.7.1--beta8

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

@@ -1,421 +1,421 @@
-@use '../_func' as *;
-
-@use '../elements/prefix' as *;
-@use '../elements/forms' as *;
-@use '../elements/buttons' as *;
-@use '../elements/badge-tag' as *;
-@use '../elements/dialog' as *;
-@use '../elements/popover' as *;
-
-@use '../utilities/margins' as *;
-@use '../utilities/visually-hidden' as *;
-@use '../utilities/display' as *;
-
-:host {
-  background-color: #fcfcfc;
-}
-
-.actionbar__wrapper {
-  position: relative;
-  z-index: 10;
-  height: 4.25rem; /* 68 */
-  container-type: inline-size;
-}
-
-/* #region View states (Default, search, selected) */
-.views,
-.selectall,
-slot[name='selectall'] {
-  display: block;
-  position: absolute !important;
-  top: 50%;
-  left: 1.5rem;
-  margin-left: 0;
-  transform: translate(0, -50%);
-  z-index: 10;
-
-  @media screen and (min-width: 36em) {
-    left: 2rem;
-  }
-
-  .btn-action:not(:last-child) {
-    margin-right: 0.25rem !important;
-  }
-}
-
-:host([data-view="square"]) .views [data-view="square"],
-:host([data-view="list"]) .views [data-view="list"],
-:host([data-view="small"]) .views [data-view="small"] {
-
-  background: #e9f9fd;
-  outline: 1px solid #1ebee6;
-}
-
-.selectall,
-slot[name='selectall'] {
-  width: 2.5rem;
-  overflow: hidden;
-
-  label {
-    height: 2.5rem;
-  }
-
-  @media screen and (min-width: 36em) {
-    width: auto;
-    overflow: visible;
-  }
-}
-
-.actionbar [data-search] {
-  display: none;
-}
-
-:host([data-search]) .actionbar [data-search] {
-  display: block;
-  margin: 0 0 0 1rem;
-}
-
-:is(.actionbar, .actionbar--selected, .actionbar--search) {
-  border-top-left-radius: var(--actionbar-radius, 0.625rem);
-  border-top-right-radius: var(--actionbar-radius, 0.625rem);
-  padding: 0 1rem;
-  flex-wrap: nowrap;
-  justify-content: flex-end;
-  align-items: center;
-  height: 4.25rem; /* 68 */
-  inset: 0;
-
-  @supports selector(:has(*)) {
-    position: absolute;
-  }
-
-  @media screen and (min-width: 36em) {
-    padding: 0 1.5rem;
-  }
-}
-
-.actionbar {
-  display: flex;
-}
-
-.actionbar--selected {
-  background-color: var(--colour-canvas);
-  pointer-events: none;
-  display: flex;
-  background-color: #e6eaec;
-
-  @supports selector(:has(*)) {
-    opacity: 0;
-  }
-}
-
-.actionbar--search {
-  background-color: var(--colour-canvas);
-
-  display: flex;
-  z-index: 2;
-  position: relative;
-  opacity: 0;
-  pointer-events: none;
-  background-color: #e6eaec;
-}
-
-/*  Show selected bar */
-.actionbar {
-  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);
-}
-
-.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;
-}
-
-.actionbar__wrapper:has(.actionbar--search.show) > *:not(.actionbar--search.show) {
-  opacity: 0;
-  pointer-events: none;
-}
-/* #endregion */
-
-/* #region Slotted elements */
-::slotted(.btn) {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  margin-left: 1rem !important;
-  margin-right: 0 !important;
-  place-self: unset !important;
-}
-
-::slotted(.btn:not(.btn-action)) {
-  order: 2;
-}
-
-::slotted(:not([slot])) {
-  align-self: center !important;
-  margin-block: 0;
-}
-
-/*  buttons only for single items */
-::slotted([data-single]) {
-  pointer-events: none;
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-:host([data-selected='1']) ::slotted([data-single]) {
-  pointer-events: all;
-  opacity: 1;
-  cursor: pointer;
-}
-
-::slotted(hr) {
-  height: 2rem;
-  color: #9d9d9d !important;
-  width: 1px;
-  display: none;
-  margin-left: 1rem !important;
-
-  @media screen and (min-width: 62em) {
-    display: block;
-  }
-}
-/* #endregion */
-
-/* #region safe area */
-.safe-area {
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: flex-end;
-  align-items: center;
-  width: 13.125rem; /* 210 */
-
-  overflow: visible;
-  position: relative;
-
-  @media screen and (min-width: 36em) {
-    width: 28.125rem; /* (450) */
-  }
-
-  @media screen and (min-width: 62em) {
-    width: 46.875rem; /* (750) */
-  }
-
-  .body {
-    display: contents;
-  }
-}
-
-:host([data-large-safe-area]) .safe-area {
-  width: 16.25rem; /* (260) */
-
-  @media screen and (min-width: 36em) {
-    width: 38.75rem; /*(620) */
-  }
-
-  @media screen and (min-width: 62em) {
-    width: 65.5rem; /* (1048) */
-  }
-}
-
-:host([data-switchviews]) .safe-area {
-  width: 9rem; /* (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;
-
-  &:before {
-    position: static !important;
-    line-height: inherit !important;
-  }
-}
-
-.menu__wrapper .dialog-overflow {
-  margin-left: 0.5rem;
-  margin-right: -0.5rem;
-}
-/* #endregion */
-
-/* #region Search bar */
-.actionbar--search .btn {
-  margin: 0;
-  margin-left: -0.75rem !important;
-  margin-right: auto !important;
-}
-
-.show .search-wrapper {
-  width: calc(100% - 3.25rem); /* 44 + 8 */
-  max-width: 21.875rem!important; /* (350) */
-  margin: 0 !important;
-
-  @media screen and (min-width: 62em) {
-    max-width: 28.125rem!important; /* (450) */
-  }
-
-  input {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-
-    min-height: 2.5rem !important;
-    max-height: 2.5rem !important;
-  }
-
-  :is(.prefix, .suffix) {
-    padding: 0.5rem !important;
-    min-height: 2.5rem !important;
-    max-height: 2.5rem !important;
-    min-width: 2.5rem !important;
-    max-width: 2.5rem !important;
-    line-height: 1.5rem!important; /* 40 - 8 - 8 */
-    pointer-events: all !important;
-  }
-  .empty {
-    position: absolute;
-    bottom: 0.25rem;
-    right: 3rem;
-    margin: 0;
-    aspect-ratio: 1 / 1;
-
-    width: 2rem;
-    height: 2rem;
-
-    text-align: center;
-    line-height: 1;
-
-    &:not(:hover, :focus) {
-      border-color: transparent;
-      background-color: transparent;
-    }
-
-    i {
-      font-size: 1.5rem;
-    }
-  }
-}
-/* #endregion */
-
-/* #region filter columns */
-.filter-columns,
-.checklist-btns {
-  display: none;
-}
-
-:host([data-filter-columns]) .filter-columns {
-  display: block;
-}
-
-:host([data-filter-columns-save]) .filter-columns {
-  display: block;
-}
-
-:host([data-filter-columns-save]) .checklist-btns {
-  display: block;
-  text-align: right;
-  padding-top: 0.5rem;
-
-  #saveColumns {
-    margin-left: 0.25rem;
-  }
-  #saveColumns:not(:hover, :focus, :active) {
-    background-color: var(--colour-warning);
-  }
-  #saveColumns:is(:hover, :focus, :active) {
-    background-color: transparent;
-    color: var(--colour-heading);
-    border-color: var(--colour-warning);
-  }
-  #cancelColumns:not(:hover, :focus, :active) {
-    border-color: var(--colour-border);
-  }
-}
-
-.fa-table-columns:has(+ iam-menu input:not(:checked)) {
-  overflow: visible;
-  text-indent: -200vw;
-
-  &:after {
-    content: ' ';
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    background-color: var(--colour-info);
-    height: 1rem;
-    width: 1rem;
-    border-radius: 50%;
-    mask-image:unset;
-    -webkit-mask-image:unset;
-  }
-}
-
-:host([data-filter-columns-save]) .fa-table-columns:after {
-  display: none !important;
-}
-
-@for $i from 1 through 30 {
-  :host([data-filter-columns-save][data-hide-col#{$i}]) .fa-table-columns:after {
-    display: block !important;
-  }
-}
-
-.no-columns {
-  display: none;
-}
-
-:host([data-filter-columns]),
-:host([data-filter-columns-save]) {
-  position: relative;
-}
-
-:host([data-filter-columns][data-columns-shown='0']) .actionbar__wrapper + .no-columns,
-:host([data-filter-columns-save][data-columns-shown='0']) .actionbar__wrapper + .no-columns {
-  display: flex;
-  padding: 2rem 2rem 0 2rem;
-  text-align: center;
-  background: white;
-  flex-direction: column;
-  justify-content: center;
-  min-height: 15rem;
-}
-
-::slotted(.tag){
-  margin-bottom: 0!important;
-}
-
-slot[name="filters"]{
-  
-  display: none;
-  
-  @media screen and (min-width: 62em) {
-    display: contents;
-  }
-}
-
-/* #endregion */
+@use '../_func' as *;
+
+@use '../elements/prefix' as *;
+@use '../elements/forms' as *;
+@use '../elements/buttons' as *;
+@use '../elements/badge-tag' as *;
+@use '../elements/dialog' as *;
+@use '../elements/popover' as *;
+
+@use '../utilities/margins' as *;
+@use '../utilities/visually-hidden' as *;
+@use '../utilities/display' as *;
+
+:host {
+  background-color: #fcfcfc;
+}
+
+.actionbar__wrapper {
+  position: relative;
+  z-index: 10;
+  height: 4.25rem; /* 68 */
+  container-type: inline-size;
+}
+
+/* #region View states (Default, search, selected) */
+.views,
+.selectall,
+slot[name='selectall'] {
+  display: block;
+  position: absolute !important;
+  top: 50%;
+  left: 1.5rem;
+  margin-left: 0;
+  transform: translate(0, -50%);
+  z-index: 10;
+
+  @media screen and (min-width: 36em) {
+    left: 2rem;
+  }
+
+  .btn-action:not(:last-child) {
+    margin-right: 0.25rem !important;
+  }
+}
+
+:host([data-view="square"]) .views [data-view="square"],
+:host([data-view="list"]) .views [data-view="list"],
+:host([data-view="small"]) .views [data-view="small"] {
+
+  background: #e9f9fd;
+  outline: 1px solid #1ebee6;
+}
+
+.selectall,
+slot[name='selectall'] {
+  width: 2.5rem;
+  overflow: hidden;
+
+  label {
+    height: 2.5rem;
+  }
+
+  @media screen and (min-width: 36em) {
+    width: auto;
+    overflow: visible;
+  }
+}
+
+.actionbar [data-search] {
+  display: none;
+}
+
+:host([data-search]) .actionbar [data-search] {
+  display: block;
+  margin: 0 0 0 1rem;
+}
+
+:is(.actionbar, .actionbar--selected, .actionbar--search) {
+  border-top-left-radius: var(--actionbar-radius, 0.625rem);
+  border-top-right-radius: var(--actionbar-radius, 0.625rem);
+  padding: 0 1rem;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  align-items: center;
+  height: 4.25rem; /* 68 */
+  inset: 0;
+
+  @supports selector(:has(*)) {
+    position: absolute;
+  }
+
+  @media screen and (min-width: 36em) {
+    padding: 0 1.5rem;
+  }
+}
+
+.actionbar {
+  display: flex;
+}
+
+.actionbar--selected {
+  background-color: var(--colour-canvas);
+  pointer-events: none;
+  display: flex;
+  background-color: #e6eaec;
+
+  @supports selector(:has(*)) {
+    opacity: 0;
+  }
+}
+
+.actionbar--search {
+  background-color: var(--colour-canvas);
+
+  display: flex;
+  z-index: 2;
+  position: relative;
+  opacity: 0;
+  pointer-events: none;
+  background-color: #e6eaec;
+}
+
+/*  Show selected bar */
+.actionbar {
+  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);
+}
+
+.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;
+}
+
+.actionbar__wrapper:has(.actionbar--search.show) > *:not(.actionbar--search.show) {
+  opacity: 0;
+  pointer-events: none;
+}
+/* #endregion */
+
+/* #region Slotted elements */
+::slotted(.btn) {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  margin-left: 1rem !important;
+  margin-right: 0 !important;
+  place-self: unset !important;
+}
+
+::slotted(.btn:not(.btn-action)) {
+  order: 2;
+}
+
+::slotted(:not([slot])) {
+  align-self: center !important;
+  margin-block: 0;
+}
+
+/*  buttons only for single items */
+::slotted([data-single]) {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+:host([data-selected='1']) ::slotted([data-single]) {
+  pointer-events: all;
+  opacity: 1;
+  cursor: pointer;
+}
+
+::slotted(hr) {
+  height: 2rem;
+  color: #9d9d9d !important;
+  width: 1px;
+  display: none;
+  margin-left: 1rem !important;
+
+  @media screen and (min-width: 62em) {
+    display: block;
+  }
+}
+/* #endregion */
+
+/* #region safe area */
+.safe-area {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  align-items: center;
+  width: 13.125rem; /* 210 */
+
+  overflow: visible;
+  position: relative;
+
+  @media screen and (min-width: 36em) {
+    width: 28.125rem; /* (450) */
+  }
+
+  @media screen and (min-width: 62em) {
+    width: 46.875rem; /* (750) */
+  }
+
+  .body {
+    display: contents;
+  }
+}
+
+:host([data-large-safe-area]) .safe-area {
+  width: 16.25rem; /* (260) */
+
+  @media screen and (min-width: 36em) {
+    width: 38.75rem; /*(620) */
+  }
+
+  @media screen and (min-width: 62em) {
+    width: 65.5rem; /* (1048) */
+  }
+}
+
+:host([data-switchviews]) .safe-area {
+  width: 9rem; /* (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;
+
+  &:before {
+    position: static !important;
+    line-height: inherit !important;
+  }
+}
+
+.menu__wrapper .dialog-overflow {
+  margin-left: 0.5rem;
+  margin-right: -0.5rem;
+}
+/* #endregion */
+
+/* #region Search bar */
+.actionbar--search .btn {
+  margin: 0;
+  margin-left: -0.75rem !important;
+  margin-right: auto !important;
+}
+
+.show .search-wrapper {
+  width: calc(100% - 3.25rem); /* 44 + 8 */
+  max-width: 21.875rem!important; /* (350) */
+  margin: 0 !important;
+
+  @media screen and (min-width: 62em) {
+    max-width: 28.125rem!important; /* (450) */
+  }
+
+  input {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+
+    min-height: 2.5rem !important;
+    max-height: 2.5rem !important;
+  }
+
+  :is(.prefix, .suffix) {
+    padding: 0.5rem !important;
+    min-height: 2.5rem !important;
+    max-height: 2.5rem !important;
+    min-width: 2.5rem !important;
+    max-width: 2.5rem !important;
+    line-height: 1.5rem!important; /* 40 - 8 - 8 */
+    pointer-events: all !important;
+  }
+  .empty {
+    position: absolute;
+    bottom: 0.25rem;
+    right: 3rem;
+    margin: 0;
+    aspect-ratio: 1 / 1;
+
+    width: 2rem;
+    height: 2rem;
+
+    text-align: center;
+    line-height: 1;
+
+    &:not(:hover, :focus) {
+      border-color: transparent;
+      background-color: transparent;
+    }
+
+    i {
+      font-size: 1.5rem;
+    }
+  }
+}
+/* #endregion */
+
+/* #region filter columns */
+.filter-columns,
+.checklist-btns {
+  display: none;
+}
+
+:host([data-filter-columns]) .filter-columns {
+  display: block;
+}
+
+:host([data-filter-columns-save]) .filter-columns {
+  display: block;
+}
+
+:host([data-filter-columns-save]) .checklist-btns {
+  display: block;
+  text-align: right;
+  padding-top: 0.5rem;
+
+  #saveColumns {
+    margin-left: 0.25rem;
+  }
+  #saveColumns:not(:hover, :focus, :active) {
+    background-color: var(--colour-warning);
+  }
+  #saveColumns:is(:hover, :focus, :active) {
+    background-color: transparent;
+    color: var(--colour-heading);
+    border-color: var(--colour-warning);
+  }
+  #cancelColumns:not(:hover, :focus, :active) {
+    border-color: var(--colour-border);
+  }
+}
+
+.fa-table-columns:has(+ iam-menu input:not(:checked)) {
+  overflow: visible;
+  text-indent: -200vw;
+
+  &:after {
+    content: ' ';
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: var(--colour-info);
+    height: 1rem;
+    width: 1rem;
+    border-radius: 50%;
+    mask-image:unset;
+    -webkit-mask-image:unset;
+  }
+}
+
+:host([data-filter-columns-save]) .fa-table-columns:after {
+  display: none !important;
+}
+
+@for $i from 1 through 30 {
+  :host([data-filter-columns-save][data-hide-col#{$i}]) .fa-table-columns:after {
+    display: block !important;
+  }
+}
+
+.no-columns {
+  display: none;
+}
+
+:host([data-filter-columns]),
+:host([data-filter-columns-save]) {
+  position: relative;
+}
+
+:host([data-filter-columns][data-columns-shown='0']) .actionbar__wrapper + .no-columns,
+:host([data-filter-columns-save][data-columns-shown='0']) .actionbar__wrapper + .no-columns {
+  display: flex;
+  padding: 2rem 2rem 0 2rem;
+  text-align: center;
+  background: white;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 15rem;
+}
+
+::slotted(.tag){
+  margin-bottom: 0!important;
+}
+
+slot[name="filters"]{
+  
+  display: none;
+  
+  @media screen and (min-width: 62em) {
+    display: contents;
+  }
+}
+
+/* #endregion */