@iamproperty/components 7.3.0 → 7.5.0

package/assets/sass/components/calendar.config.scss

@@ -0,0 +1,423 @@
+@use '../_func' as *;
+
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@include layer('components', $layers) {
+  iam-calendar,
+  .event-colours {
+    --event-colour-1: var(--wider-colour-1);
+    --event-colour-2: var(--wider-colour-2);
+    --event-colour-3: var(--wider-colour-3);
+    --event-colour-4: var(--wider-colour-4);
+    --event-colour-5: var(--wider-colour-17);
+    --event-colour-6: var(--wider-colour-6);
+    --event-colour-7: var(--wider-colour-7);
+    --event-colour-8: var(--wider-colour-14);
+    --event-colour-9: var(--wider-colour-10);
+    --event-colour-10: var(--wider-colour-23);
+  }
+
+  @for $i from 1 to 10 {
+    iam-calendar:not(.calendar--multi) [data-event-type-enum='#{$i}'] {
+      --event-colour: var(--event-colour-#{$i});
+    }
+
+    iam-calendar.calendar--multi [data-calendar-enum='#{$i}'] {
+      --event-colour: var(--event-colour-#{$i});
+    }
+  }
+
+  iam-calendar {
+    margin-bottom: rem(16);
+  }
+
+  iam-calendar button {
+    --background-opacity: 100%;
+
+    display: block;
+    width: 100%;
+    //height:  rem(24);
+    border: none;
+    border-left: 4px solid color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 28%);
+    border-radius: 4px;
+    padding: rem(4);
+
+    font-size: rem(14);
+    line-height: rem(18);
+    margin-bottom: rem(8);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    text-align: left;
+    position: relative;
+    z-index: 1;
+
+    background: rgb(from var(--event-colour, var(--wider-colour-1)) r g b / var(--background-opacity));
+
+    &:hover {
+      background: color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 10%);
+    }
+    &:active {
+      background: color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 20%);
+    }
+
+    .tooltip__content {
+      display: none;
+    }
+
+    &:hover .tooltip__content {
+      display: block;
+      z-index: var(--index-floating);
+      position: absolute;
+
+      width: rem(250);
+      background: var(--colour-primary);
+      color: var(--colour-white);
+      padding: rem(12);
+      border-radius: 0.5rem;
+      box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
+      //top: auto;
+      //bottom: calc(100% + 0.25rem);
+      left: 50%;
+
+      //transform: translate(-50%,0);
+      font-size: rem(14);
+      line-height: 1.2;
+
+      white-space: normal;
+      z-index: 9999;
+      position: fixed;
+      bottom: anchor(top);
+      justify-self: anchor-center;
+      margin: 0.5rem;
+
+      > strong:first-child {
+        color: white;
+        display: block;
+        padding-bottom: 1rem;
+        color: inherit;
+      }
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: 100%;
+        bottom: auto;
+        left: 50%;
+        margin-left: -0.25rem;
+        border-width: 0.5rem;
+        border-style: solid;
+        border-color: var(--colour-primary) transparent transparent transparent;
+        margin-top: -1px;
+      }
+    }
+  }
+
+  iam-calendar.calendar--multi {
+    background: rgb(from var(--event-colour, var(--wider-colour-8)) r g b / var(--background-opacity));
+
+    &:hover {
+      background: rgb(from var(--event-colour-hover, var(--wider-colour-8-hover)) r g b / var(--background-opacity));
+    }
+    &:active {
+      background: rgb(from var(--event-colour-active, var(--wider-colour-8-active)) r g b / var(--background-opacity));
+    }
+  }
+
+  iam-calendar[data-hide-confirmed] button:not(.tentative, .cancelled) {
+    display: none !important;
+  }
+  iam-calendar[data-hide-unconfirmed] button.tentative {
+    display: none !important;
+  }
+  iam-calendar[data-hide-cancelled] button.cancelled {
+    display: none !important;
+  }
+
+  iam-calendar button.tentative {
+    --background-opacity: 40%;
+    border-top: 1px dashed var(--event-colour);
+    border-right: 1px dashed var(--event-colour);
+    border-bottom: 1px dashed var(--event-colour);
+    border-left: none;
+    padding-left: 0.5rem;
+
+    &:before {
+      content: '';
+      height: 100%;
+      width: 4px;
+      background-color: var(--event-colour);
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' viewBox='0 0 20 20'%3E%3Cg %3E%3Cpolygon fill='%23FFFFFF' points='20 10 10 0 0 0 20 20'/%3E%3Cpolygon fill='%23FFFFFF' points='0 10 0 20 10 20'/%3E%3C/g%3E%3C/svg%3E");
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  iam-calendar button.cancelled {
+    border-top: 2px solid var(--colour-danger);
+    border-right: 2px solid var(--colour-danger);
+    border-bottom: 2px solid var(--colour-danger);
+  }
+
+  iam-calendar button.repeat {
+    padding-right: 2rem;
+
+    &:after {
+      position: absolute;
+      top: 0;
+      right: rem(4);
+      content: '\f363';
+      font-family: 'Font Awesome 6 Pro';
+      font-weight: 300;
+      line-height: rem(26);
+    }
+  }
+
+  iam-calendar[data-view='month'] button {
+    margin-bottom: 1px;
+
+    > span {
+      display: block;
+      height: rem(18);
+      white-space: nowrap;
+
+      overflow: hidden;
+
+      text-overflow: ellipsis;
+    }
+
+    &[data-start] > span:before {
+      content: attr(data-start);
+      display: inline-block;
+      margin-right: rem(4);
+    }
+
+    /*
+    span:not(.tooltip__content) {
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: inherit;
+    }
+      */
+  }
+
+  iam-calendar:is([data-view='week'], [data-view='day']) button:not(.allday-event) {
+    height: var(--event-height, #{rem(17.5)});
+    line-height: rem(18) !important;
+    padding-top: rem(4) !important;
+    white-space: normal !important;
+
+    display: inline-flex !important; /* keep the inline nature of buttons */
+    align-items: flex-start !important;
+
+    width: var(--event-width, 100%) !important;
+    max-width: var(--event-max-width, 100%) !important;
+    margin-bottom: 0px !important;
+
+    > span:not(.tooltip__content) {
+      display: -webkit-box;
+      -webkit-line-clamp: var(--line-clamp, 2);
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: inherit;
+      max-height: 100%;
+    }
+  }
+
+  // resize
+  iam-calendar[data-resize]:is([data-view='week'], [data-view='day']) button:not(.allday-event) {
+    resize: vertical !important;
+  }
+
+  iam-calendar:is([data-view='week']) button.allday-event {
+    width: var(--event-width, 100%) !important;
+    max-width: var(--event-max-width, 100%) !important;
+  }
+
+  iam-calendar:is([data-view='week'], [data-view='day']) button.allday-event {
+    > span {
+      display: block;
+      height: rem(18);
+      //white-space: nowrap;
+
+      overflow: hidden;
+
+      text-overflow: ellipsis;
+    }
+
+    &[data-start] > span:before {
+      content: attr(data-start);
+      display: inline-block;
+      margin-right: rem(4);
+    }
+  }
+
+  iam-calendar:is([data-view='week'], [data-view='day']) button.resizing {
+    background: black !important;
+
+    .tooltip__content {
+      opacity: 0;
+    }
+  }
+  iam-calendar:is([data-view='week'], [data-view='day']) button:-webkit-drag {
+    .tooltip__content {
+      opacity: 0;
+    }
+  }
+
+  iam-calendar:is([data-view='week'], [data-view='day']) button.continued {
+    display: none !important;
+  }
+
+  // #endregion
+}
+
+.event-colours option {
+  //display: none;
+}
+
+.event-colours option[value='month'] {
+  display: flex;
+}
+
+.event-colours,
+.event-colours::picker(select) {
+  appearance: base-select;
+}
+
+.event-colours {
+  text-indent: -300%;
+  overflow: hidden;
+  position: relative;
+  width: 1.8rem;
+  border: none;
+  background-color: transparent;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0.4rem;
+    left: 0.4rem;
+    width: 1rem;
+    height: 1rem;
+    background: pink;
+    border-radius: 0.5rem;
+  }
+}
+
+.event-colours::picker-icon {
+  display: none;
+}
+
+.event-colours::picker(select) {
+  border-radius: 0.5rem;
+  border-color: var(--colour-border);
+  box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
+  padding: 0.5rem;
+  text-indent: 0;
+}
+
+.event-colours option {
+  padding-block: 0.25rem;
+  position: relative;
+  padding-left: 2rem;
+  font-weight: light;
+  border-left: 4px solid transparent;
+  margin-bottom: 0.25rem;
+  border-radius: 0.25rem;
+
+  &:checked {
+    background: rgb(from var(--event-colour) r g b / 40%);
+    border-left: 4px solid color-mix(in srgb, var(--event-colour), black 28%);
+  }
+
+  &:hover {
+    background: color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 10%);
+    border-left: 4px solid color-mix(in srgb, var(--event-colour), black 28%);
+  }
+  &:active {
+    background: color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 20%);
+    border-left: 4px solid color-mix(in srgb, var(--event-colour), black 28%);
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0.4rem;
+    left: 0.4rem;
+    width: 1rem;
+    height: 1rem;
+    background: pink;
+    border-radius: 0.5rem;
+  }
+}
+
+.event-colours option:before,
+.event-colours:has(option:checked):before {
+  background: color-mix(in srgb, var(--event-colour), black 28%);
+}
+
+.event-colours option[value='--wider-colour-1'],
+.event-colours:has(option[value='--wider-colour-1']:checked) {
+  --event-colour: var(--wider-colour-1);
+}
+
+.event-colours option[value='--wider-colour-2'],
+.event-colours:has(option[value='--wider-colour-2']:checked) {
+  --event-colour: var(--wider-colour-2);
+}
+
+.event-colours option[value='--wider-colour-3'],
+.event-colours:has(option[value='--wider-colour-3']:checked) {
+  --event-colour: var(--wider-colour-3);
+}
+
+.event-colours option[value='--wider-colour-4'],
+.event-colours:has(option[value='--wider-colour-4']:checked) {
+  --event-colour: var(--wider-colour-4);
+}
+
+.event-colours option[value='--wider-colour-17'],
+.event-colours:has(option[value='--wider-colour-17']:checked) {
+  --event-colour: var(--wider-colour-17);
+}
+
+.event-colours option[value='--wider-colour-6'],
+.event-colours:has(option[value='--wider-colour-6']:checked) {
+  --event-colour: var(--wider-colour-6);
+}
+
+.event-colours option[value='--wider-colour-7'],
+.event-colours:has(option[value='--wider-colour-7']:checked) {
+  --event-colour: var(--wider-colour-7);
+}
+
+.event-colours option[value='--wider-colour-14'],
+.event-colours:has(option[value='--wider-colour-14']:checked) {
+  --event-colour: var(--wider-colour-14);
+}
+
+.event-colours option[value='--wider-colour-10'],
+.event-colours:has(option[value='--wider-colour-10']:checked) {
+  --event-colour: var(--wider-colour-10);
+}
+
+.event-colours option[value='--wider-colour-23'],
+.event-colours:has(option[value='--wider-colour-23']:checked) {
+  --event-colour: var(--wider-colour-23);
+}
+
+.event-colours option:checked {
+  font-weight: bold;
+}
+
+.event-colours option::checkmark {
+  display: none;
+}

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

@@ -1,7 +1,9 @@
 @use '../_func.scss' as *;
 @use 'card.module.scss' as *;
 @use '../elements/dialog.scss' as *;
-@use '../elements/popover.scss' as *;
+@use '../elements/popover.scss' as * with (
+  $layers: 'false'
+);
 @use '../elements/buttons.scss' as *;
 
 :host {
@@ -143,7 +145,7 @@ slot[name='secondary'] {
 // #endregion
 
 // #region Multi-action card
-.dialog__wrapper {
+.menu__wrapper {
   position: absolute;
   right: 1rem;
   bottom: 2rem;
@@ -155,38 +157,6 @@ slot[name='secondary'] {
     content: '\f142';
     font-family: 'Font Awesome 6 Pro';
   }
-
-  > [popover] {
-    display: var(--menu-display, none);
-    position: fixed;
-    top: anchor(top);
-    position-anchor: --anchor-el;
-    left: anchor(right);
-    right: auto;
-    margin: 0 0 0 #{rem(4)};
-    padding: rem(16);
-
-    &::backdrop {
-      display: none;
-    }
-  }
-
-  > [popover]:popover-open {
-    display: block !important;
-  }
-
-  &:has([popover]:popover-open) > button {
-    background-color: var(--colour);
-  }
-
-  > button[popovertarget] {
-    margin: 0;
-    anchor-name: --anchor-el;
-
-    &:not(:hover, :focus, :focus-within, :active) {
-      background: var(--ellipsis-bg);
-    }
-  }
 }
 
 ::slotted([slot='btns']) {

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

@@ -564,6 +564,11 @@ input[type='range']:focus::-moz-range-thumb {
     display: block !important;
   }
 }
+
+:host(.hide-btns) .carousel__btns,
+:host(.hide-controls) .carousel__controls {
+  display: none;
+}
 // #endregion
 
 // #region thumbnails