@iamproperty/components 6.0.0 → 6.1.0--beta

package/assets/sass/components/card.scss

@@ -1,606 +0,0 @@
-@use "../_func.scss" as *;
-
-// #region Default card
-.card {
-  --card-icon-right: 1rem;
-  box-shadow: var(--card-box-shadow);
-  border-radius: var(--card-border-radius);
-  position: relative;
-  font-weight: bold;
-  font-size: rem(18);
-  line-height: rem(24);
-  color: var(--colour-primary);
-  min-height: 100%;
-  width: 100%;
-  text-align: left;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  z-index: 0;
-  background: var(--colour-canvas-2);
-  outline: 2px solid var(--outline-colour,--colour-canvas-2);
-  outline-offset: -2px;
-
-  > *:not(.btn-compact) {
-    min-width: 100%;
-  }
-
-  &.border-0 {
-    box-shadow: none;
-    --card-left-padding: 0rem;
-    outline-offset: 1px!important;
-  }
-
-  &__body {
-    position: relative;
-    padding: var(--card-top-padding) var(--card-right-padding) 0 var(--card-left-padding);
-    z-index: -1;
-  }
-
-  &__footer {
-    margin-top: auto;
-    padding: 0 var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);
-  }
-
-  &:is(:hover,:focus) {
-    .link:after {
-      width: 50%;
-    }
-  }
-
-  &:has(.card__footer .link) {
-    &:before,
-    &:after {
-      display: none;
-    }
-  }
-
-  &:not(:has(.dialog__wrapper)){
-
-    &:before,
-    &:after {
-      content: "";
-      position: absolute;
-      right: var(--card-icon-right);
-      bottom: var(--card-bottom-padding);
-      height: rem(24);
-      width: rem(24);
-      background: var(--colour-warning);
-      border-radius: 50%;
-    }
-
-    &:after {
-      background: var(--colour-primary-theme);
-      mask-image: var(--icon,var(--icon-arrow));
-      mask-size: 50%;
-      mask-repeat: no-repeat;
-      mask-position: 50% 50%;
-      -webkit-mask-image: var(--icon,var(--icon-arrow));
-      -webkit-mask-size: 50%;
-      -webkit-mask-repeat: no-repeat;
-      -webkit-mask-position: 50% 50%;
-      z-index: 2;
-    }
-
-    &:is(:hover,:focus,.hover) {
-      --hover-outline-colour-default: var(--colour, var(--colour-primary));
-      outline: 2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));
-      outline-offset: -2px;
-    }
-    
-    // Update arrow cololur
-    &:not([class*="colour-"]):is(:hover,:focus,.hover,:active, .active) {
-
-      &:before {
-        background: var(--hover-icon-bg, var(--colour-primary-theme));
-      }
-      &:after {
-        background: var(--hover-icon-colour, #ffffff);
-      }
-    }
-
-    &:is(:active, .active){
-      --card-icon-right: var(--card-icon-right-overide,0.5rem);
-      outline: none;
-    }
-
-    &:is(:active){
-      background: #FCFCFC;
-    }
-    
-  }
-  
-  span{
-    display: block;
-    font-weight: bold;
-    padding-top: rem(24);
-    font-size: rem(16);
-  }
-
-  &:has(.card__illustration) .card__body {
-
-    align-items: center;
-    display: flex;
-
-    .card__illustration {
-      height: rem(64);
-      width: rem(64);
-      margin-right: rem(24);
-      margin-top: rem(-20);
-      margin-bottom: rem(-20);
-      position: relative;
-
-      img {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-      }
-    }    
-  }
-
-  
-  .card__total {
-    font-size: rem(48);
-    line-height: rem(48);
-    padding-right: rem(16);
-    margin-top: 0.5rem;
-  }
-
-  &.card--has-icon:not(.card--secondary):not(.card--filter) { 
-    display: flex;
-    align-items: center;
-
-    &:before,
-    &:after {
-      top: calc(50% - 0.75rem);
-      bottom: auto;
-    }
-  }
-
-  &.card--has-icon:not(.card--secondary):not(.card--filter) .card__body {
-    padding-left: 4rem;
-    margin-block: auto;
-    padding-bottom: var(--card-bottom-padding);
-  }
-  &.card--has-icon:not(.card--secondary):not(.card--filter) .card__footer {
-    padding: 0;
-    display: none;
-  }
-}
-
-::slotted(i){
-  font-size: rem(24)!important;
-  margin: -3px var(--card-icon-right) 0 0!important;
-  vertical-align: middle!important;
-}
-::slotted(i:not(.fa-light):not(.fa-bold)){
-  font-weight: 400!important;
-}
-
-::slotted(span:not(.badge)){
-  display: block!important;
-  font-weight: normal!important;
-  font-size: rem(16)!important;
-}
-::slotted(small){
-  padding-top: rem(16)!important;
-  display: block!important;
-  font-weight: normal!important;
-  padding-bottom: 0!important;
-  color: var(--colour-body);
-}
-::slotted(span:not(.badge):not([class*="pt-"])){
-  padding-top: rem(24)!important;
-}
-// #endregion
-
-// #region card bages
-.card__head .card__badges {
-  
-  position: absolute;
-  top: 1rem;
-  text-align: left;
-  left: 1rem;
-  z-index: 9;
-}
-
-.card__body .card__badges.card__badges--inline {
-  
-  margin-top: -1rem;
-  min-height: 1rem;
-}
-.card__body .card__badges:not(.card__badges--inline) {
-  
-  position: absolute;
-  top: 0.5rem;
-  text-align: left;
-  right: 0.75rem;
-  z-index: 9;
-}
-
-// #endregion
-
-// #region border left
-.card[class*="colour-"],
-.card--filter {
-  
-  border-left: rem(12) solid var(--colour,var(--colour-primary));
-}
-// #endregion
-
-//#region Filter card
-.card--filter {
-  --top-padding: #{rem(24)};
-  --right-padding: 1rem;
-  --bottom-padding: #{rem(24)};
-  --left-padding: 1rem;
-
-  //border-left: rem(12) solid var(--colour,var(--colour-primary));
-
-  &:has(.card__total) .card__body{
-
-    align-items: center;
-    display: flex;
-  }
-
-  &:before,
-  &:after {
-    display: none;
-  }
-
-  &:is(:hover,:focus,.hover) {
-    outline: none;
-      
-    :is(.card__body,.card__footer) {
-      background: #EEEEEE;
-    }
-  }
-
-  &:is(:checked, .checked,:active, .active){
-    outline: 2px solid var(--colour,var(--colour-primary));
-    outline-offset: -2px;
-
-    .card__body {
-      background: none;
-    }
-    .card__footer {
-      background: none;
-    }
-  }
-
-  &.card--has-icon {
-    --bottom-padding: #{rem(16)};
-    border: none;
-  }
-
-  .icon {
-    font-size: rem(18)!important;
-    height: rem(18)!important;
-    margin: 0 0 0.5rem 0!important;
-    font-weight: 400!important;
-    display: block!important;
-  }
-    
-  .card__total {
-    margin-top: 0;
-    order: -1;
-  }
-}
-
-@include dark-mode() {
-  .card--filter {
-
-    .card__body {
-      background: none!important;
-    }
-
-    &:is(:hover,:focus,.hover, :active, .active):not(:checked,.checked){ 
-      outline: 2px solid var(--colour, var(--colour-primary))!important;
-      outline-offset: -2px;
-    }
-  }
-}
-
-.card--filter ::slotted(i) {
-  display: block !important;
-  font-size: rem(18)!important;
-  margin: 0 0 0.5rem 0!important;
-}
-// #endregion
-
-// #region card with an image
-.card:has(.card__head) {
-  .card__head {
-    padding-bottom: 0;
-    padding-top: var(--img-height, 27%);
-    position: relative;
-    overflow: hidden;
-    background: rgba(0,0,0,0.1);
-    z-index: -1;
-
-    > img {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 102%;
-      height: 102%;
-      object-fit: cover;
-    }
-  }
-}
-
-.card.card--lg-image:has(.card__head) .card__head{
-  
-  padding-top: 55%;
-}
-// #endregion
-
-
-:host([data-selected]) .card {
-  //background-color: yellow!important;
-
-  &:before,
-  &:after {
-    display: none!important;
-  }
-}
-
-// #region card with a flag 
-:host(.card--flag) {
-  position: relative;
-  
-  &:after {
-    content: "\f024";
-    font-family: "Font Awesome 6 Pro";
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    font-size: rem(16);
-    line-height: 1;
-    height: rem(16);
-    width: rem(16);
-    display: inline-block;
-    font-weight: normal;
-    color: var(--colour, var(--colour-primary));
-  }
-}
-// #endregion
-
-
-//#region Dashboard card
-.card--secondary {
-
-  --card-top-padding: #{rem(16)};
-  --card-bottom-padding: #{rem(24)};
-
-  &:before,
-  &:after {
-    display: none;
-  }
-}
-
-.card--secondary .btn-compact {
-  position: absolute;
-  top: 0;
-  right: 0;
-  margin: 0.5rem 0.5rem 0 0;
-  z-index: 99;
-}
-
-// For docs
-.card--secondary.secondary-hover {
-
-  outline: 2px solid var(--colour, var(--colour-primary));
-  outline-offset: -2px;
-
-  .btn-compact {
-    background-color: var(--colour);
-    color: var(--colour-primary-theme);
-    border-color: rgba(0, 0, 0, 0) !important;
-  }
-}
-
-.card--secondary:has(.btn-compact:is(:hover, :focus, :active)) {
-
-  .btn-compact {
-    pointer-events: all;
-  }
-}
-
-.card--secondary ::slotted(i) {
-  display: block !important;
-  font-size: rem(40)!important;
-  margin: 0.5rem 0 0.5rem 0!important;
-  line-height: rem(40);
-}
-// #endregion
-
-//#region Record card 
-
-
-
-.card--record:has(.card__head) {
-  --img-height: 40%;
-
-  &:before,
-  &:after {
-    display: none;
-  }
-
-  .card__head {
-    background: transparent;
-    position: relative;
-
-  }
-}
-
-:host([data-record="business"]) {
-  --record-icon: '\f54f';
-  --record-colour: var(--wider-colour-2);
-}
-:host([data-record="page"]) {
-  --record-icon: '\f15c';
-  --record-colour: var(--wider-colour-3);
-}
-:host([data-record="contact"]) {
-  --record-icon: "\f2b9";
-  --record-colour: var(--wider-colour-4);
-}
-:host([data-record="lettings"]) {
-  --record-icon: "";
-  --record-icon-font: Font Awesome Kit;
-  --record-colour: var(--wider-colour-5);
-}
-
-:host([data-record="sales"]) {
-  --record-icon: "";
-  --record-icon-font: Font Awesome Kit;
-  --record-colour: var(--wider-colour-7);
-}
-:host([data-record="landlord"]) {
-  --record-icon: "";
-  --record-icon-font: Font Awesome Kit;
-  --record-colour: var(--wider-colour-8);
-}
-
-:host([data-record="contractor"]) {
-  --record-icon: "\f82c";
-  --record-colour: var(--wider-colour-9);
-}
-
-:host([data-record="vendor"]) {
-  --record-icon: "";
-  --record-icon-font: Font Awesome Kit;
-  --record-colour: var(--wider-colour-13);
-}
-
-:host([data-record="tenant"]) {
-  --record-icon: "\e1b0";
-  --record-colour: var(--wider-colour-6);
-}
-:host([data-record="sales-applicant"]) {
-  --record-icon: "";
-  --record-icon-font: Font Awesome Kit;
-  --record-colour: var(--wider-colour-10);
-}
-
-:host([data-record]) .card--record:has(.card__head) {
-
-  .card__head {
-    background: transparent;
-    position: relative;
-
-    &:before {
-      font-family: var(--record-icon-font,"Font Awesome 6 Pro");
-      font-weight: normal;
-      font-size: rem(24);
-      content: var(--record-icon);
-      display: block;
-      position: absolute;
-      top: auto;
-      left: 50%;
-      bottom: 0;
-      background-color: var(--record-colour);
-      border-radius: 50%;
-      height: rem(64);
-      line-height: rem(64);
-      width: rem(64);
-      text-align: center;
-      transform: translate(-50%,0);
-    }
-
-  }
-}
-
-
-slot[name="btns"] {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: flex-end;
-  margin-right: calc(var(--card-right-padding) * -1);
-
-  margin-bottom: calc(var(--card-bottom-padding) * -1);
-  padding-right: 1rem;
-  padding-bottom: 1rem;
-
-  pointer-events: none;
-}
-
-::slotted([slot="btns"]){
-  
-  pointer-events: all;
-  margin: 0!important;
-}
-
-//#endregion
-
-.dialog__wrapper {
-  position: absolute;
-  right: 1rem;
-  bottom: 2rem;
-  min-width: 3rem !important;
-  left: auto;
-  z-index: 999;
-
-  > dialog {
-    
-    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;
-    }
-  }
-
-  > dialog:popover-open {
-
-    display: block!important;
-  }
-
-  &:has(dialog:popover-open) > button {
-    background-color: var(--colour);
-  }
-
-  > button {
-    margin: 0;
-    anchor-name: --anchor-el;
-
-    &:not(:hover,:focus,:focus-within,:active){
-        
-      background: var(--ellipsis-bg);
-    }
-  }
-}
-::slotted([slot="actions"]){
-  border: none !important;
-  margin: 0 !important;
-  display: block!important;
-  width: fit-content;
-}
-::slotted([slot="primary-action"]){
-  overflow: hidden;
-  background-color: transparent;
-  text-indent: -300%;
-  position: absolute!important;
-  inset: 0;
-  margin: 0!important;
-  z-index: 99;
-  border: none;
-}
-::slotted([slot="primary-action"]:is(:hover,:focus,.hover)) {
-  --hover-outline-colour-default: var(--colour, var(--colour-primary));
-  outline: 2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));
-  outline-offset: -2px;
-  border-radius: var(--card-border-radius)!important;
-}

package/assets/ts/bundle.ts

@@ -1,94 +0,0 @@
-// @ts-nocheck
-// Modules
-import * as helpers from '../js/modules/helpers'
-import extendDialogs from '../js/modules/dialogs'
-import createDataLayer from '../js/modules/data-layer'
-import extendInputs from '../js/modules/inputs';
-import nav from '../js/modules/nav'
-import testimonial from '../js/modules/testimonial'
-import carousel from '../js/modules/carousel'
-import form from '../js/modules/form'
-import youtubeVideo from '../js/modules/youtubevideo'
-import iamHeader from './components/header/header.component'
-import iamAccordion from './components/accordion/accordion.component'
-import iamTabs from './components/tabs/tabs.component'
-import iamTable from './components/table/table.component'
-import iamCard from './components/card/card.component'
-import iamAppliedFilters from './components/applied-filters/applied-filters.component'
-import iamPagination from './components/pagination/pagination.component'
-import iamFilterlist from './components/filterlist/filterlist.component'
-import iamNotification from './components/notification/notification.component'
-
-// Attach classes to dom elements
-document.addEventListener("DOMContentLoaded", function() {
-
-  createDataLayer();
-  // Global stuff
-  helpers.addBodyClasses(document.body);
-  helpers.addGlobalEvents(document.body);
-  extendDialogs(document.body);
-  extendInputs(document.body);
-  //helpers.checkElements(document.body);
-
-  if (!window.customElements.get(`iam-header`))
-    window.customElements.define(`iam-header`, iamHeader);
-
-  if (!window.customElements.get(`iam-accordion`))
-    window.customElements.define(`iam-accordion`, iamAccordion);
-
-  if (!window.customElements.get(`iam-tabs`))
-    window.customElements.define(`iam-tabs`, iamTabs);
-
-  if (!window.customElements.get(`iam-table`))
-    window.customElements.define(`iam-table`, iamTable);
-
-  if (!window.customElements.get(`iam-card`))
-    window.customElements.define(`iam-card`, iamCard);
-  
-  if (!window.customElements.get(`iam-filterlist`))
-    window.customElements.define(`iam-filterlist`, iamFilterlist);
-
-  if (!window.customElements.get(`iam-pagination`))
-    window.customElements.define(`iam-pagination`, iamPagination);
-
-  if (!window.customElements.get(`iam-applied-filters`))
-    window.customElements.define(`iam-applied-filters`, iamAppliedFilters);
-
-  if (!window.customElements.get(`iam-notification`))
-    window.customElements.define(`iam-notification`, iamNotification);
-
-  // ANav
-  Array.from(document.querySelectorAll('.nav')).forEach((arrayElement) => {
-    nav(arrayElement);
-  });
-
-
-
-  // Testimonial
-  Array.from(document.querySelectorAll('.testimonial')).forEach((arrayElement) => {
-    testimonial(arrayElement);
-  });
-  // Carousel
-  Array.from(document.querySelectorAll('.carousel')).forEach((arrayElement) => {
-    carousel(arrayElement);
-  });
-  // Form
-  Array.from(document.querySelectorAll('form')).forEach((arrayElement) => {
-    form(arrayElement);
-  });
-  // YouTube videos
-  Array.from(document.querySelectorAll('.youtube-embed')).forEach((arrayElement) => {
-    new youtubeVideo(arrayElement);
-  });
-
-
-  window.addEventListener('hashchange', function() {
-
-    const hash = location.hash.replace('#','');
-    const label = document.querySelector(`label[for="${hash}"]`);
-
-    if (label instanceof HTMLElement)
-      label.click();
-
-  }, false);
-});