@iamproperty/components 6.0.0 → 6.1.0--beta2

package/assets/sass/components/carousel.scss

@@ -1,258 +0,0 @@
-@use "../_func" as *;
-
-// #region default carousel
-.carousel {
-
-  .carousel__wrapper {
-
-    position: relative;
-  }
-
-  .carousel__inner {
-
-    --gutter-x: #{$grid-gutter-width};
-    overflow: auto;
-    scroll-snap-type: x mandatory;
-  }
-
-  .col > *:last-child {
-    margin-bottom: 0;
-    padding-bottom: 0;
-  }
-}
-
-
-// #endregion
-
-// #region Remove the scrollbar
-.carousel__inner {
-  // FireFox
-  scrollbar-width: none;
-  // IE10+
-  -ms-overflow-style: none;
-}
-
-.carousel__inner::-webkit-scrollbar {
-  // Chrome, Safari, Edge
-  display: none;
-}
-// #endregion
-
-// #region Direction button
-.btn-next, 
-.btn-prev {
-  --marker-bg: var(--colour-secondary);
-  text-indent: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  background: var(--marker-bg);
-  border-radius: 100%;
-  width: rem(36);
-  max-width: rem(36);
-  height: rem(36);
-  text-indent: -300rem;
-  overflow: hidden;
-  border: none;
-  position: relative;
-  margin: 0 rem(8);
-  padding: 0;
-
-  position: absolute;
-  top: 50%;
-  left: 0rem;
-  transform: translate(0,-50%);
-
-  &:disabled {
-    opacity: 0.8;
-    pointer-events: none;
-  }
-
-  &:after {
-    content: "";
-    position: absolute;
-    right: 0;
-    top: 0;
-    height: 100%;
-    width: 100%;
-    background: currentColor;
-    mask-image: escape-svg($accordion-button-icon);
-    mask-size: 50%;
-    mask-repeat: no-repeat;
-    mask-position: 50% 60%;
-    -webkit-mask-image: escape-svg($accordion-button-icon);
-    -webkit-mask-size: 50%;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: 55% 50%;
-    transform: rotate(0deg);
-  }
-
-  &:hover,
-  &:focus {
-
-    background: var(--colour-warning);
-    color: var(--colour-hover);
-    border-radius: 100%;
-  }
-
-  &:active {
-    border-radius: 100%;
-  }
-}
-
-.btn-next {
-  left: auto;
-  right: 0;
-
-  @include media-breakpoint-up(md) {
-
-    margin-right: rem(-48);
-  }
-}
-
-.btn-prev {
-
-  @include media-breakpoint-up(md) {
-
-    margin-left: rem(-48);
-  }
-
-  &:after {
-
-    transform: rotate(180deg);
-  }
-}
-
-
-
-
-
-// #endregion
-
-// #region carousel controls/pips
-.carousel .carousel__controls {
-  overflow: hidden;
-  margin-inline: auto;
-    
-  &:not(.thumbnails){
-    text-align: center;
-    max-width: 30rem;
-  }
-
-  &.thumbnails {
-    margin-block-start: 2rem;
-  }
-
-  @include media-breakpoint-up(sm) {
-    width: 100%;
-  }
-
-  button {
-    padding: 0;
-    margin: 0 0.2rem 0.2rem;
-    border: 3px solid var(--colour-canvas);
-    border-radius: 4px;
-
-    &.has-thumbnail {
-      height: 4.625rem;
-
-      img {
-        height: 100%;
-        width: auto;
-      }
-    }
-  }
-
-  button:not(.has-thumbnail) {
-    width: 1rem;
-    height: 1rem;
-    min-height: 1rem;
-    border-radius: 50%;
-    text-indent: -50rem;
-    overflow: hidden;
-    background: var(--colour-primary-theme);
-    margin: 0 0.5rem 0.5rem 0.5rem;
-    border: none;
-    
-    &:before {
-      display: none;
-    }
-  }
-
-  button:first-child:last-child {
-    display: none;
-  }
-}
-
-.carousel__controls > button[aria-current] {
-  --colour-active-thumbnail: var(--colour-info); 
-  border-color: var(--colour-active-thumbnail);
-
-  &:not(.has-thumbnail) {
-    background: var(--colour-success);
-  }
-}
-
-// #endregion
-
-// #region Hide buttons and pips
-.carousel.hide-btns .carousel__wrapper > .btn {
-  display: none;
-}
-
-.carousel.hide-controls .carousel__controls {
-  display: none;
-}
-
-@include media-breakpoint-up(sm) {
-
-  [data-row-class*="cols-sm-2"] .carousel__controls > button:not(:nth-child(odd)),
-  [data-row-class*="cols-sm-3"] .carousel__controls > button:not(:nth-child(3n+1)),
-  [data-row-class*="cols-sm-4"] .carousel__controls > button:not(:nth-child(4n+1)),
-  [data-row-class*="cols-sm-5"] .carousel__controls > button:not(:nth-child(5n+1)),
-  [data-row-class*="cols-sm-6"] .carousel__controls > button:not(:nth-child(6n+1)) {
-    display: none;
-  }
-
-  // Make sure that we dont just have one pip showing
-  [data-row-class*="cols-sm-2"] .carousel__controls:has(button:first-child:nth-last-child(2)),
-  [data-row-class*="cols-sm-3"] .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3))),
-  [data-row-class*="cols-sm-4"] .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3), button:first-child:nth-last-child(4))),
-  [data-row-class*="cols-sm-5"] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5))),
-  [data-row-class*="cols-sm-6"] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5),button:first-child:nth-last-child(6))),
-  [data-row-class*="cols-sm-2"] .carousel__controls:has(button:first-child:nth-last-child(2)) ~ .btn,
-  [data-row-class*="cols-sm-3"] .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3))) ~ .btn,
-  [data-row-class*="cols-sm-4"] .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3), button:first-child:nth-last-child(4))) ~ .btn,
-  [data-row-class*="cols-sm-5"] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5))) ~ .btn,
-  [data-row-class*="cols-sm-6"] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5),button:first-child:nth-last-child(6))) ~ .btn {
-    display: none;
-  }
-}
-
-@include media-breakpoint-up(md) {
-  .carousel__controls > button {
-    display: inline-block!important;
-  }
-
-  [data-row-class*="cols-md-2"] .carousel__controls > button:not(:nth-child(odd)),
-  [data-row-class*="cols-md-3"] .carousel__controls > button:not(:nth-child(3n+1)),
-  [data-row-class*="cols-md-4"] .carousel__controls > button:not(:nth-child(4n+1)),
-  [data-row-class*="cols-md-5"] .carousel__controls > button:not(:nth-child(5n+1)),
-  [data-row-class*="cols-md-6"] .carousel__controls > button:not(:nth-child(6n+1)) {
-    display: none!important;
-  }
-
-  // Make sure that we dont just have one pip showing
-  [data-row-class*="cols-md-2"] .carousel__controls:has(button:first-child:nth-last-child(2)),
-  [data-row-class*="cols-md-3"] .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3))),
-  [data-row-class*="cols-md-4"] .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3), button:first-child:nth-last-child(4))),
-  [data-row-class*="cols-md-5"] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5))),
-  [data-row-class*="cols-md-6"] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5),button:first-child:nth-last-child(6))),
-  [data-row-class*="cols-md-2"] .carousel__controls:has(button:first-child:nth-last-child(2)) ~ .btn,
-  [data-row-class*="cols-md-3"] .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3))) ~ .btn,
-  [data-row-class*="cols-md-4"] .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3), button:first-child:nth-last-child(4))) ~ .btn,
-  [data-row-class*="cols-md-5"] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5))) ~ .btn,
-  [data-row-class*="cols-md-6"] .carousel__controls:has(:is(button:first-child:nth-last-child(2),button:first-child:nth-last-child(3),button:first-child:nth-last-child(4),button:first-child:nth-last-child(5),button:first-child:nth-last-child(6))) ~ .btn {
-    display: none;
-  }
-}
-// #endregion

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);
-});

package/assets/ts/components/barchart/README.md

@@ -1,37 +0,0 @@
-```
-<iam-chart>
-  <table>
-    <thead>
-      <tr>
-        <th>Issue</th>
-        <th>Democrat</th>
-        <th>Republican</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr><td>Inflation</td><td>45%</td><td>18%</td></tr><tr><td>Abortion</td><td>12%</td><td>43%</td></tr>
-      <tr><td>Gun policy</td><td>8%</td><td>14%</td></tr><tr><td>Immigration</td><td>15%</td><td>5%</td></tr>
-      <tr><td>Crime</td><td>13%</td><td>10%</td></tr>
-    </tbody>
-  </table>
-</iam-chart>
-```
-
-**To do**
-
-- Animation
-- Add more chart types
-- optimise code
-- change key
-- Fill in readme with class and attributes
-- flout
-
-**Note**
-
-
-**Properties**
-
-
-**Class modifiers**
-
-- .chart--no-animate turns of the animation

package/assets/ts/components/card/README.md

@@ -1,39 +0,0 @@
-**Add the below to your initialise script**
-
-```
-import('../node_modules/@iamproperty/components/assets/js/components/card/card.component.min').then(module => { // Might need to update the path
-
-  if (!window.customElements.get(`iam-card`))
-    window.customElements.define(`iam-card`, module.default);
-
-}).catch((err) => {
-  console.log(err.message);
-});
-```
-
-**Add the below HTML code to where you want the component to live.**
-
-```
-<a href="/link-url">
-  <iam-card>Link content</iam-card>
-</a>
-```
-
-**Note**
-
-The card component needs to be wrapped with a link or a button, this is required to give the card any functionality.
-
-**Properties**
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| data-total | Int | - | Optional total number , usually use on the filter card type |
-| data-image | image url | - | Optional image url to create a card header with an image as its background |
-
-**Class modifiers**
-
-- Adding a class of **.card--filter** will implement the filter card design. 
-- Adding a class of **.colour-danger** will add a left hand border with the danger colour (See status card). This works with all of the theme
-- Adding a class of **.border-o** will remove the box-shadow of the card and make some minor sizing adjustments. 
-- Adding a class like **.colour-warning** will update the colour of the left berder for the card. The theme colours will be avialable to use.
-- Adding a class of **.card--flag** will add a card to the top right corner. 

package/assets/ts/dynamic.ts

@@ -1,107 +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 table from '../js/modules/table'
-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 iamNotification from './components/notification/notification.component'
-
-const components = ['accordion','header','tabs', 'table','card','pagination','filterlist', 'applied-filters', 'nav', 'marketing'];
-const prefix = "iam"
-const options = {
-  rootMargin: '50px',
-  threshold: 0.1
-}
-const componentExt = ".component.min.js";
-
-// Load components - Each component will load once the first of its type has been loaded
-components.forEach((component) => {
-
-  console.log(component)
-  
-  if(document.getElementsByTagName(`${prefix}-${component}`).length === 0)
-    return;
-
-  let callback = (entries:any) => {
-    entries.forEach((entry:any) => {
-      
-      if(entry.intersectionRatio > 0){
-
-        console.log(component)
-        
-        import(`./components/${component}/${component}${componentExt}`).then(module => {
-          if (!window.customElements.get(`${prefix}-${component}`))
-            window.customElements.define(`${prefix}-${component}`, module.default);
-        }).catch((err) => {
-          console.log(err.message);
-        });  
-
-        intObserver.unobserve(entry.target);
-      }
-    });
-  };
-
-  const intObserver = new IntersectionObserver(callback, options);
-  intObserver.observe(document.getElementsByTagName(`${prefix}-${component}`)[0]);
-});
-
-
-// Attach classes to dom elements
-document.addEventListener("DOMContentLoaded", function() {
-
-  createDataLayer();
-  
-  // Global stuff
-  helpers.addBodyClasses(document.body);
-  helpers.addGlobalEvents(document.body);
-  //helpers.checkElements(document.body);
-  extendDialogs(document.body);
-  extendInputs(document.body);
-
-  
-  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) => {
-
-    console.log(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);
-});

package/assets/ts/flat-components.ts

@@ -1,106 +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 * as tableModule from './modules/table'
-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 tabs from '../js/modules/tabs'
-import filterlist from '../js/modules/filterlist'
-import createPaginationButttons from '../js/modules/pagination'
-import setupNotification from '../js/modules/notification'
-
-// Attach classes to dom elements
-document.addEventListener("DOMContentLoaded", function() {
-
-  createDataLayer();
-
-  // Global stuff
-  helpers.addBodyClasses(document.body);
-  helpers.addGlobalEvents(document.body);
-  //helpers.checkElements(document.body);
-  extendDialogs(document.body);
-  extendInputs(document.body);
-
-  // ANav
-  Array.from(document.querySelectorAll('.nav')).forEach((arrayElement) => {
-    nav(arrayElement);
-  });
-
-  // Advanced tables
-  Array.from(document.querySelectorAll('table')).forEach((arrayElement) => {
-
-    tableModule.addTableEventListeners(arrayElement);
-    tableModule.createMobileButton(arrayElement);
-    tableModule.addDataAttributes(arrayElement);
-
-
-    if(arrayElement.closest('.table--cta')){
-
-      const largestWidth = tableModule.getLargestLastColWidth(arrayElement);
-      arrayElement.closest('.table--cta').style.setProperty("--cta-width", `${largestWidth}rem`);
-    }
-  });
-
-  // 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);
-  });
-  // Tabs
-  Array.from(document.querySelectorAll('.tabs')).forEach((arrayElement) => {
-    tabs(arrayElement);
-  });
-
-  // filterlist
-  Array.from(document.querySelectorAll('.iam-filterlist')).forEach((arrayElement) => {
-    if(arrayElement.hasAttribute('data-input') && document.querySelector(arrayElement.getAttribute('data-input')))
-      filterlist(arrayElement.querySelector('ul'),document.querySelector(arrayElement.getAttribute('data-input')));
-  });
-  
-
-  // notification
-  Array.from(document.querySelectorAll('.iam-notification')).forEach((arrayElement) => {
-    if(arrayElement.hasAttribute('data-type'))
-      setupNotification(arrayElement);
-  });
-  
-  Array.from(document.querySelectorAll('.pagination__wrapper')).forEach((arrayElement) => {
-
-
-    const params = new URLSearchParams(window.location.search);
-    arrayElement.setAttribute('data-page', (params.has('page') ? params.get('page') : 1));
-    arrayElement.setAttribute('data-show', (params.has('show') ? params.get('show') : 15));
-    arrayElement.setAttribute('data-increment', 15);
-    arrayElement.setAttribute('data-pages', Math.ceil(arrayElement.getAttribute('data-total') / arrayElement.getAttribute('data-show')));
-
-    createPaginationButttons(arrayElement,arrayElement);
-  });
-
-
-  window.addEventListener('hashchange', function() {
-
-    const hash = location.hash.replace('#','');
-    const label = document.querySelector(`label[for="${hash}"]`);
-
-    if (label instanceof HTMLElement)
-      label.click();
-
-  }, false);
-});