@iamproperty/components 5.5.1-beta-2 → 5.5.1-beta-5

package/assets/sass/_components.scss

@@ -4,6 +4,8 @@
 @use 'components/nav.preload';
 @use 'components/card.preload';
 @use 'components/carousel.preload';
+@use 'components/multiselect.preload';
+@use 'components/inline-edit.preload';
 
 // #region Undefined web components
 main > :is(*):not(:defined):not(iam-carousel) {
@@ -28,4 +30,7 @@ main > :is(*):not(:defined):not(iam-carousel) {
 iam-search input:not(.is-invalid):not(:invalid) {
   background: none!important;
 }
+iam-search .optional-text {
+  display: none!important;
+}
 

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

@@ -170,3 +170,13 @@ button[slot="selected-overflow"] {
 }
 }
 // #endregion
+
+// Select all done with vue
+
+
+iam-actionbar:has(.selectall input:checked) {
+  --selectall-opacity: 1;
+  --selectall-pe: all;
+  --selectall-actionbar-opactiy: 0;
+  --selectall-action-pe: none;
+}

package/assets/sass/components/actionbar.scss

@@ -13,10 +13,13 @@
 
 // #region View states (Default, search, selected)
 .views,
-.selectall {
+.selectall,
+slot[name="selectall"] {
+  display: block;
   position: absolute!important;
   top: 50%;
   left: rem(24);
+  margin-left: 0;
   
   @include media-breakpoint-up(sm) {
     left: rem(32);
@@ -30,7 +33,8 @@
   }
 }
 
-.selectall {
+.selectall,
+slot[name="selectall"] {
   
   width: rem(40);
   overflow: hidden;
@@ -113,12 +117,25 @@
 }
 
 // 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 {
   
@@ -140,7 +157,7 @@
 // #endregion
 
 // #region Slotted elements
-::slotted(*:not([slot="overflow"])){
+::slotted(.btn){
   margin-top: 0!important;
   margin-bottom: 0!important;
   margin-left: rem(16)!important;

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

@@ -0,0 +1,98 @@
+@use "../_func" as *;
+
+iam-inline-edit {
+
+  .optional-text {
+    display: none;
+  }
+
+  label,
+  textarea {
+    margin: 0;;
+  }
+}
+
+
+iam-inline-edit:focus-within {
+
+
+  --display-status: none;
+}
+
+
+
+
+
+
+// Inactive state
+iam-inline-edit:defined:not(:focus-within):not([data-saving]):not(.was-validated:has(:invalid)) {
+  
+  --display-btns: none;
+
+  input,
+  textarea,
+  select {
+    border: none;
+    background: none;
+    margin-left: -1rem;
+    width: calc(100% + 1rem);
+    max-width: calc(100% + 1rem);
+    box-shadow: none;
+  }
+}
+
+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 {
+    border: none;
+    background: var(--colour-light);
+  }
+}
+
+
+// Multi select
+
+iam-inline-edit:has(iam-multiselect label[slot=checked]) {
+  --display-btns: none;
+}
+
+iam-inline-edit:not(:focus-within) iam-multiselect:has(label[slot=checked]) {
+  --display-button: none;
+}
+
+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 {
+
+  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);
+}

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

@@ -0,0 +1,32 @@
+@use "../_func" as *;
+
+:host {
+  
+  max-width: var(--input-max-width, 50rem);
+  display: block;
+  font-weight: normal;
+  margin-bottom: 2rem;
+  position: relative;
+}
+
+.btns, .status {
+  justify-content: flex-end;
+  gap: 0.5rem;
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  right: 0;
+}
+
+.btns {
+  
+  display: var(--display-btns, flex);
+  justify-content: flex-end;
+}
+
+.status {
+  display: var(--display-status, flex);
+}
+
+.btn-action {
+  margin: 0;
+}

package/assets/sass/components/multiselect.preload.scss

@@ -0,0 +1,37 @@
+@use "../_func" as *;
+
+iam-multiselect .tag[slot="checked"]{
+  margin-bottom: rem(8);
+  order: var(--order, 1);
+  margin-inline: rem(3);
+}
+
+iam-multiselect .tag:not([slot="checked"]){
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+  text-align: left;
+  border-radius: 0;
+  padding-inline: 1rem;
+  outline: none;
+  padding-block: 0.5rem;
+
+  &:not(:hover,:focus,:active,:focus-within){
+    background: none!important;
+  }
+
+  &::after {
+    display: none;
+  }
+}
+
+iam-multiselect:has(label:not([slot="checked"]):not([slot="notmatched"])) {
+
+  --display-panel: block;
+}
+
+iam-multiselect:has(label[slot="checked"]) {
+
+  --display-button: block;
+}

package/assets/sass/components/multiselect.scss

@@ -0,0 +1,186 @@
+@use "../_func" as *;
+
+.outer {
+  
+  position: relative;
+  max-width: var(--input-max-width, 50rem);
+  display: block;
+}
+
+label {
+  margin-bottom: 0;
+  padding-bottom: 0.5rem;
+}
+
+.wrapper {
+
+  margin-bottom: rem(24);
+  max-width: var(--input-max-width, 50rem);
+
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    height: 1rem;
+  }
+
+  input {
+    
+    margin-bottom: rem(8);
+  }
+
+  .feedback {
+    position: absolute;
+    right: 0;
+    bottom: 100%;
+    padding: 0.85rem;
+    width: min-content;
+    white-space: nowrap;
+    margin-bottom: 0.5rem;
+    display: none;
+  }
+
+  &.was-validated .feedback{
+    display: block;
+  }
+}
+
+.wrapper.filled {
+  
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  min-height: calc(0.75rem + 0.75rem + 1.25rem + 4px);
+  padding: #{rem(8)} #{rem(32)} #{rem(0)} #{rem(13)};
+  font-size: var(--input-fs, #{rem(16)});
+  line-height: var(--input-lh, #{rem(20)});
+  color: var(--colour-body);
+  background-color: var(--colour-canvas-2);
+  border: 2px solid var(--colour-primary);
+  border-radius: rem(8);
+
+  &: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);
+  }
+
+  input {
+    all: unset;
+    font-size: rem(16);
+    line-height: rem(26);
+    display: inline-block;
+    width: 0;
+    flex-grow: 1;
+    padding: 0 rem(8) 0 0!important;
+    margin-inline: rem(3);
+    order: 999;
+    margin-bottom: rem(8);
+  }
+
+  .feedback {
+    display: none!important;
+  }
+
+  &: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);
+  }
+}
+
+button {
+  
+  position: absolute;
+  top: 0.75rem;
+  right: 0.5rem;
+  border: none;
+  background: none;
+  padding-inline: 0.5rem;
+  display: var(--display-button, none);
+
+  &:after {
+    content: '\2715';
+    font-weight: bold;
+  }
+}
+
+.dropdown {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  padding: 0;
+  left: 0;
+  width: 100%;
+  margin: 0;
+  z-index: 99;
+  display: none;
+  max-height: rem(244) !important;
+  overflow: auto;
+
+  &:before {
+    display: none;
+  }
+}
+
+
+
+.wrapper:is(:hover, :focus-within) .dropdown {
+
+  display: var(--display-panel, none);
+}
+
+
+// Inline edit
+:host-context(:focus-within) {
+  input {
+    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{
+    
+    background-color: var(--colour-light);
+
+    input {
+      background-color: var(--colour-light);
+    }
+
+    .dropdown {
+      display: none;
+    }
+  }
+
+  .wrapper {
+    margin-bottom: 0;
+  }
+
+  .wrapper:not(.filled):not(:focus-within):not([data-mousedown]){
+
+    input {
+      border: none;
+      background: none;
+      margin-left: -1rem;
+      width: calc(100% + 1rem);
+      max-width: calc(100% + 1rem);
+      box-shadow: none;
+    }
+
+    .dropdown {
+      display: none;
+    }
+  }
+  .wrapper.filled:not(:focus-within):not([data-mousedown]) {
+    background: none;
+    border: none;
+    padding-left: 0;
+  }
+}

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

@@ -140,6 +140,8 @@ iam-nav {
 
 
 iam-nav details {
+
+  padding-bottom: 0;
   
   > summary {
 

package/assets/sass/elements/admin-panel.scss

@@ -5,10 +5,7 @@
   --padding-top: #{rem(16)};
   --padding-bottom: #{rem(24)};
   --mh-modifier: #{rem(56 + 16)};
-
   --mh-padding-inline: var(--padding-x);
-
-
   display: block;
   padding: var(--padding-top) var(--padding-x) var(--padding-bottom) var(--padding-x);
   box-shadow: 0px 6px 12px rgba(0,0,0,0.11);

package/assets/sass/elements/badge-tag.scss

@@ -19,7 +19,7 @@
   background: var(--wider-colour, var(--wider-colour-1));
   margin-bottom: 1rem;
 
-  &:has(:is(.badge, .tag)) {
+  &:has(+ :is(.badge, .tag)) {
     margin-right: rem(6);
   }
   
@@ -36,11 +36,10 @@
     font-weight: bold;
   }
 
-  &:is(:hover,:focus,.hover) {
+  &:is(:hover,:focus,.hover,:focus-within, :focus-visible) {
     background: var(--wider-colour-hover, var(--wider-colour-1-hover));
   }
 
-  &:has(input:checked),
   &:is(:active,.active) {
     background: var(--wider-colour-active, var(--wider-colour-1-active));
   }
@@ -53,8 +52,9 @@
   }
 }
 
-.tag.tag--toggle,
-.tag.tag--not-set {
+.tag.tag--not-set,
+iam-multiselect:not(:defined) .tag,
+.tag.tag--toggle {
 
   background: var(--colour-canvas);
   outline: 1px solid var(--colour-border);
@@ -66,6 +66,16 @@
   &:after {
     display: none;
   }
+
+  &:is(:hover,:focus) {
+    
+    background: #EEEEEE;
+  }
+  
+  &:is(:active) {
+    
+    background: #E0E0E0;
+  }
   
   &:has(input:checked),
   &.selected {

package/assets/sass/elements/forms.scss

@@ -373,6 +373,18 @@ input[maxlength] + span {
 
   border-color: var(--colour-danger)!important;
 }
+
+
+.was-validated select:is(:invalid, .is-invalid, [aria-invalid],:-internal-autofill-selected) {
+
+  $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) right var(--input-padding-block, 0.75rem) top var(--input-padding-block, 0.75rem) / var(--input-lh, 1.25rem) var(--input-lh, 1.25rem) no-repeat,
+              linear-gradient(to left, var(--colour-primary-theme), var(--colour-primary-theme) 100%) right top / calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem)) calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.8rem) + var(--input-lh, 1.25rem)) no-repeat,
+              escape-svg($icon-error) right var(--input-padding-block, 3.5rem) top var(--input-padding-block, 0.75rem) / var(--input-lh, 1.25rem) var(--input-lh, 1.25rem) no-repeat;
+  padding-right: 6rem!important;
+}
+
 .was-validated input:is(:invalid, .is-invalid,[aria-invalid],:-internal-autofill-selected) {
 
   background-image: escape-svg($icon-error);
@@ -769,12 +781,13 @@ select[multiple]::-webkit-scrollbar-thumb {
 select {
   $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) right var(--input-padding-block, 0.75rem) top var(--input-padding-block, 0.75rem)/var(--input-lh, 1.25rem) var(--input-lh, 1.25rem) no-repeat,
-              linear-gradient(to left, var(--colour-primary-theme), var(--colour-primary-theme) 100%) right top/calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem)) calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem)) no-repeat;
+  background: escape-svg($form-select-indicator-new) right var(--input-padding-block, 0.75rem) top var(--input-padding-block, 0.75rem) / var(--input-lh, 1.25rem) var(--input-lh, 1.25rem) no-repeat,
+              linear-gradient(to left, var(--colour-primary-theme), var(--colour-primary-theme) 100%) right top / calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem)) calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.8rem) + var(--input-lh, 1.25rem)) no-repeat;
   
   padding-right: calc(var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-lh, 1.25rem))!important;
   option {font-size: 1.2em;}
 
+  box-shadow: inset -2px 0px 0px var(--colour-primary-theme);
   
   max-width: $select-max-width;
 
@@ -864,7 +877,7 @@ iam-fileupload {
   margin-bottom: rem(24);
   max-width: $input-max-width;
 
-  :is(input:not([type="range"]),select) {
+  :is(input:not([type="range"]),select,textarea) {
     margin-top: rem(8);
     margin-bottom: 0!important;
   }

package/assets/ts/components/actionbar/actionbar.component.ts

@@ -56,7 +56,9 @@ class iamActionbar extends HTMLElement {
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
     <div class="actionbar__wrapper">
+    
       <div class="actionbar">
+        <slot name="selectall"></slot>
         <div class="safe-area">
           <slot></slot>
           <div class="body">

package/assets/ts/components/inline-edit/README.md

@@ -0,0 +1,30 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/nav/nav.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-nav`))
+    window.customElements.define(`iam-nav`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
+```
+<iam-inline-edit id="inlineEdit" data-autosave>
+  <label >Optional label
+    <input type="text" name="text" value="Placeholder text" />
+  </label>
+</iam-inline-edit>
+```
+
+```
+
+**Properties**
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| data-autosave  | Flag | - | Allows the input field to dispatch the autosave event when unfocusing the input field |