@iamproperty/components 7.1.0--beta7 → 7.2.1--beta1

package/assets/js/modules/file-upload.js

@@ -1,32 +0,0 @@
-// @ts-nocheck
-function fileupload(form, callback) {
-    const input = form.querySelector('[type="file"]');
-    const label = form.querySelector(`[for="${input.getAttribute('id')}"]`);
-    const add = form.querySelector('.file-upload__add');
-    form.querySelector('button').remove();
-    input.addEventListener('change', function (e) {
-        // prevent default to allow drop
-        const url = form.getAttribute('action');
-        const formData = new FormData(form);
-        input.setAttribute('disabled', 'disabled');
-        fetch(url, {
-            method: 'POST',
-            body: formData,
-        }).then(() => {
-            form.classList.add('file-uploaded');
-            label.innerHTML = 'File uploaded';
-            if (typeof callback == 'function')
-                callback();
-        });
-    }, false);
-    form.addEventListener('submit', function (e) {
-        // prevent default to allow drop
-        e.preventDefault();
-    }, false);
-    add.addEventListener('click', function (e) {
-        form.classList.remove('file-uploaded');
-        label.innerHTML = 'Select a file to upload';
-        input.removeAttribute('disabled');
-    }, false);
-}
-export default fileupload;

package/assets/ts/components.ts

@@ -1,62 +0,0 @@
-// @ts-nocheck
-const components = [
-  'accordion',
-  'header',
-  'table',
-  'tabs',
-  'card',
-  'filter-card',
-  'video-card',
-  'record-card',
-  'filterlist',
-  'applied-filters',
-  'pagination',
-  'notification',
-  'actionbar',
-  'nav',
-  'collapsible-side',
-  'address-lookup',
-  'fileupload',
-  'search',
-  'inline-edit',
-  'multiselect',
-  'multi-step',
-  'slider',
-  'carousel',
-  'marketing',
-  'barchart',
-];
-
-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) => {
-  if (document.getElementsByTagName(`${prefix}-${component}`).length === 0) return;
-
-  const 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]);
-});

package/assets/ts/modules/file-upload.ts

@@ -1,52 +0,0 @@
-// @ts-nocheck
-function fileupload(form, callback) {
-  const input = form.querySelector('[type="file"]');
-  const label = form.querySelector(`[for="${input.getAttribute('id')}"]`);
-  const add = form.querySelector('.file-upload__add');
-
-  form.querySelector('button').remove();
-
-  input.addEventListener(
-    'change',
-    function (e) {
-      // prevent default to allow drop
-
-      const url = form.getAttribute('action');
-      const formData = new FormData(form);
-
-      input.setAttribute('disabled', 'disabled');
-
-      fetch(url, {
-        method: 'POST',
-        body: formData,
-      }).then(() => {
-        form.classList.add('file-uploaded');
-        label.innerHTML = 'File uploaded';
-
-        if (typeof callback == 'function') callback();
-      });
-    },
-    false
-  );
-
-  form.addEventListener(
-    'submit',
-    function (e) {
-      // prevent default to allow drop
-      e.preventDefault();
-    },
-    false
-  );
-
-  add.addEventListener(
-    'click',
-    function (e) {
-      form.classList.remove('file-uploaded');
-      label.innerHTML = 'Select a file to upload';
-      input.removeAttribute('disabled');
-    },
-    false
-  );
-}
-
-export default fileupload;

package/dist/style.css

@@ -1 +0,0 @@
-@charset "UTF-8";.testimonial{--testimonial-padding: 1rem;--testimonial-spacing: 1rem}@media screen and (min-width: 62em){.testimonial{--testimonial-padding: 4rem;--testimonial-spacing: 2rem}}.testimonial>div:first-child{position:relative;overflow:hidden}.testimonial .circle{color:currentColor;position:absolute;top:-18rem;right:-8rem;font-size:28rem;border-width:4px}.testimonial__images{overflow:auto;scroll-snap-type:x mandatory;display:flex;-webkit-user-select:none;user-select:none;touch-action:pan-x;height:14.375rem}@media screen and (min-width: 36em){.testimonial__images{height:21.25rem}}@media screen and (min-width: 62em){.testimonial__images{min-height:100%;scroll-snap-type:y mandatory;flex-direction:column;touch-action:pan-y}}.testimonial__images img{scroll-snap-align:start;-webkit-user-select:none;user-select:none;pointer-events:none;flex-shrink:0}.testimonial .testimonial__controls{display:none}.testimonial.testimonial--multi .testimonial__controls{display:block;position:absolute;bottom:0;left:50%;transform:translate(-50%,50%)}@media screen and (min-width: 62em){.testimonial.testimonial--multi .testimonial__controls{left:auto;bottom:auto;right:0;top:50%;transform:rotate(90deg) translateY(-120%);transform-origin:center}}.testimonial h2{padding:2rem var(--testimonial-padding) 0 var(--testimonial-padding)}@media screen and (min-width: 36em){.testimonial h2{padding-top:3rem}}@media screen and (min-width: 62em){.testimonial h2{padding-top:9rem}}.testimonial__content{--display-none: none;margin:0 var(--testimonial-padding) var(--testimonial-spacing) var(--testimonial-padding);position:relative}@media screen and (min-width: 62em){.testimonial__content{--display-none: block}.testimonial__content blockquote:not(.largest){position:absolute;top:0}}.testimonial[data-show="1"] blockquote:not(:nth-child(1)){display:var(--display-none);opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none}.testimonial[data-show="2"] blockquote:not(:nth-child(2)){display:var(--display-none);opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none}.testimonial[data-show="3"] blockquote:not(:nth-child(3)){display:var(--display-none);opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none}.testimonial[data-show="4"] blockquote:not(:nth-child(4)){display:var(--display-none);opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none}.testimonial[data-show="5"] blockquote:not(:nth-child(5)){display:var(--display-none);opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none}.testimonial[data-show="6"] blockquote:not(:nth-child(6)){display:var(--display-none);opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none}.testimonial[data-show="7"] blockquote:not(:nth-child(7)){display:var(--display-none);opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none}.testimonial[data-show="8"] blockquote:not(:nth-child(8)){display:var(--display-none);opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none}.testimonial[data-show="9"] blockquote:not(:nth-child(9)){display:var(--display-none);opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none}.testimonial[data-show="10"] blockquote:not(:nth-child(10)){display:var(--display-none);opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none}.testimonial__after{padding:1rem var(--testimonial-padding) var(--testimonial-spacing) var(--testimonial-padding)}.testimonial__images::-webkit-scrollbar{display:none}.testimonial__images{-ms-overflow-style:none;scrollbar-width:none}.timeline{--breakpoint: (100% - 62rem);--pl: clamp(0rem, var(--breakpoint) * -1000, 4rem);--line-pos: clamp(1rem, var(--breakpoint) * 1000, 50%);--circle-pos: 1rem;--line-length: 100%;--img-order: 1;position:relative;padding-top:.25rem;padding-left:var(--pl);padding-bottom:1rem;width:100%;display:flex;justify-content:space-between;flex-direction:row;flex-wrap:wrap;align-items:flex-start}.timeline__container:not(.timeline--simple) .timeline{align-items:center}@media screen and (min-width: 62em){.timeline__container:not(.timeline--simple) .timeline{--img-order: 0;--circle-pos: 50%;--line-length: 50%}}.timeline:before{content:" ";display:block;background:black;width:4px;height:100%;position:absolute;top:0;left:var(--line-pos)}.timeline:after{content:" ";display:block;background:white;width:2rem;height:2rem;margin-top:-1rem;position:absolute;top:var(--circle-pos);left:var(--line-pos);margin-left:calc(-1rem + 2px);border:4px solid black;border-radius:50%}.timeline>*{max-width:28.75rem;order:1}.timeline>img{max-width:min(100%,28.75rem);margin-bottom:2rem}.timeline:nth-child(2n)>img{order:var(--img-order)}.timeline:first-child:before{top:var(--circle-pos);height:var(--line-length)}.timeline:last-child{padding-bottom:0;margin-bottom:2rem}.timeline:last-child:before{height:var(--line-length)}.timeline:last-child>img{margin-bottom:0}.property-searchbar fieldset{position:relative}@media screen and (min-width: 62em){.property-searchbar fieldset{position:relative;padding-right:1.5rem}.property-searchbar fieldset:after{content:"";position:absolute;top:0;right:.5rem;display:block;height:100%;width:1px;background-color:var(--colour-muted);opacity:.25}}.property-searchbar .form-control__wrapper{margin-bottom:1rem}@media screen and (min-width: 62em){.property-searchbar .form-control__wrapper{margin-bottom:0}}.property-searchbar .form-label,.property-searchbar label{font-size:.875rem;text-transform:uppercase}@media screen and (min-width: 62em){.property-searchbar .row .row .form-label{display:none}.property-searchbar .form-control,.property-searchbar .form-select{padding:.5rem 1.5rem .5rem .5rem}.property-searchbar .form-select{background-position:right .5rem center}}.property-searchbar .input--locations{padding-right:5.5rem}.property-searchbar .select--miles{position:absolute;bottom:0rem;right:.5rem;width:5rem}@media screen and (min-width: 62em){.property-searchbar .select--miles{right:1.5rem}}.property-searchbar .select--miles label{display:none}.property-searchbar .select--miles select{background-color:transparent;border-color:transparent}@media screen and (min-width: 62em){.property-searchbar .property-searchbar__btn{align-items:flex-end}}.property-searchbar button{margin-top:1rem;margin-bottom:1rem}@media screen and (min-width: 62em){.property-searchbar button{margin:0;padding-left:3.5rem;padding-right:3.5rem}}.property-searchbar--hero .property-searchbar{--colour-muted: #9d9d9d;--colour-body: #595959;--colour-border: #d8d8d8;--colour-link: var(--colour-primary-theme);--colour-brand: var(--colour-primary-theme);--colour-underline: var(--colour-secondary);--colour-heading: var(--colour-primary);--colour-focus: var(--colour-primary-theme);--colour-hover: var(--colour-primary-theme);--colour-active: var(--colour-primary-theme);--colour-selected: var(--colour-info);--colour-inverted: #fcfcfc;--colour-btn: var(--colour-primary-theme);--colour-btn-bg: var(--colour-warning);--colour-btn-border: var(--colour-warning);--colour-btn-bg-hover: transparent;--colour-btn-hover: var(--colour-primary-theme);--colour-btn-secondary: var(--colour-primary-theme);--colour-btn-secondary-border: var(--colour-primary-theme);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-primary-theme);--colour-btn-secondary-hover: var(--colour-inverted);--colour-canvas-2: white;--colour-btn-action-hover-bg: var(--colour-light);padding:1rem;background-color:#fff;width:100%;border-radius:.625rem;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.24);box-shadow:0 2px 4px #0000003d;position:relative}.property-searchbar--hero .property-searchbar .text-primary{color:var(--colour-primary)!important}@media screen and (min-width: 62em){.property-searchbar--hero .property-searchbar{border-radius:3rem;padding:1.5rem 2.5rem}.property-searchbar--hero .property-searchbar .form-label,.property-searchbar--hero .property-searchbar label{margin-bottom:0}.property-searchbar--hero .property-searchbar .form-control,.property-searchbar--hero .property-searchbar .form-select{margin-left:-.5rem;border:none;padding-top:.25rem;padding-bottom:.25rem}.property-searchbar--hero .property-searchbar .form-select{background-position:right 0rem center;padding-right:1rem}.property-searchbar--hero .property-searchbar .property-searchbar__btn{align-items:center}}.stepper{background:#f0f0f0;display:flex;flex-wrap:wrap;margin-bottom:2rem;border:1px solid var(--colour-canvas);overflow:hidden}@media screen and (min-width: 62em){.stepper{flex-wrap:nowrap;overflow-x:auto}}.stepper ol{margin:0;z-index:1;background:var(--colour-canvas);counter-reset:section;width:100%;overflow:auto}@media screen and (min-width: 36em){.stepper ol{display:flex;flex-grow:1;padding-right:calc(2rem + 1px);margin-top:-1px;margin-bottom:-1px;margin-right:calc(-2rem - 2px);clip-path:polygon(0 0,calc(100% - 2rem) 0,100% 50%,calc(100% - 2rem) 100%,0 100%)}}@media screen and (min-width: 62em){.stepper ol{overflow:initial}}.stepper ol li{width:100%;max-width:100%;background:var(--colour-canvas);padding:1px}@media screen and (min-width: 36em){.stepper ol li:first-child a{padding-left:1rem;clip-path:polygon(0 0,calc(100% - 2rem) 0,100% 50%,calc(100% - 2rem) 100%,0 100%)}}@media screen and (min-width: 62em){.stepper ol li:first-child a{padding-left:2rem}}.stepper ol li a{display:block;padding:1rem;text-decoration:none;background:var(--colour-muted);line-height:1;position:relative;color:var(--colour-primary)}@media screen and (min-width: 36em){.stepper ol li a{margin-right:-2rem;padding:2rem 3rem;clip-path:polygon(0 0,calc(100% - 2rem) 0,100% 50%,calc(100% - 2rem) 100%,0 100%,2rem 50%);display:flex;height:100%;vertical-align:baseline;justify-content:center;align-items:center}}.stepper ol li a span{position:relative;display:inline;padding-left:2.25rem}.stepper ol li a span:before{counter-increment:section;content:counter(section);display:block;position:absolute;top:50%;left:0;transform:translateY(-50%);margin-right:.5rem;font-size:.75em;border-radius:50%;border:2px solid currentColor;height:1.5rem;line-height:1.3rem;width:1.5rem;font-family:var(--font-heading);text-align:center}.stepper ol li a.bg-warning span:before,.stepper ol li a.bg-danger span:before{content:"!"}.stepper ol li a.bg-success span:before{content:"✓";text-indent:-.1em}.stepper ol li a[aria-current=step]{background:var(--colour-primary);color:#fff;pointer-events:none}.stepper ol li a:not([href]){pointer-events:none}.stepper ol li a[href]:hover{opacity:.6}.stepper ol li a[href]:active{opacity:.8}.stepper>span{width:100%;display:flex;padding:1rem;flex-shrink:0;margin:0;position:relative;z-index:0;align-items:center}.stepper>span.stepper__end{display:none}@media screen and (min-width: 62em){.stepper>span{width:max-content;padding:2rem}.stepper>span.stepper__end{padding-left:3.5rem;display:flex}}.snapshot>.row{padding-bottom:1rem}.snapshot>.row>.col{margin-bottom:1rem;min-width:9.375rem;position:relative}@media screen and (min-width: 36em){.snapshot>.row>.col:nth-child(8)~.col{max-width:25%}}@media screen and (min-width: 62em){.snapshot>.row>.col:nth-child(8)~.col{max-width:12.5%}}.snapshot__item{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:1rem}.snapshot__item:not([class*=bg-]){border:1px solid var(--colour-border)}.snapshot a{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0;z-index:1}.snapshot a:hover+.snapshot__item{opacity:.8}.snapshot__title{padding-bottom:1rem}.snapshot__title:after{content:":"}.snapshot .stat{text-decoration:none;margin-bottom:0}*:not(main):has(>iam-tabs){container-type:inline-size}iam-tabs details:not([open]){padding-bottom:0}iam-tabs::part(next-button){display:none}@container (width > 62em){iam-tabs.tabs--guided::part(next-button){position:absolute;top:9.375rem;right:0;display:block}}iam-tabs.tabs--guided::part(next-button):not(:hover){background:var(--colour-success)}.tabs:not(.admin-panel){position:relative}.tabs:not(.admin-panel) .tabs__links__wrapper{position:relative;margin:0 auto 2rem}.tabs:not(.admin-panel) .tabs__links__wrapper:after{content:"";left:50%;position:relative;height:1px;width:100vw;background-color:var(--colour-border);transform:translate(-50%);display:block;clear:both}.tabs.admin-panel .tabs__links__wrapper:after{display:none}.tabs:not(.admin-panel) .tabs__links{-webkit-mask-image:linear-gradient(to right,rgb(0,0,0) 90%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to right,rgb(0,0,0) 90%,rgba(0,0,0,0) 100%)}.tabs__links{scroll-snap-type:x mandatory;padding-bottom:3px;position:relative;display:flex;flex-wrap:nowrap;width:auto;margin:0 -1.5rem;overflow-y:clip;overflow-x:auto}.tabs__links::-webkit-scrollbar{display:none}.tabs__links .link{white-space:nowrap;scroll-snap-align:start;scroll-margin-left:var(--container-padding)}.tabs__links .link:not(.text-decoration-none):not(.btn){--is-current: 0;font-weight:700;font-family:var(--font-heading);font-size:1.125rem;cursor:pointer;margin:0;padding:1.5rem 1.5rem .5rem;display:inline-block}.tabs__links .link:not(.text-decoration-none):not(.btn).disabled{cursor:not-allowed;opacity:.4}.tabs__links .link:not(.text-decoration-none):not(.btn):last-child{margin-inline-end:0}.tabs__links .link:not(.text-decoration-none):not(.btn):after{position:absolute;content:"";bottom:0;left:50%;height:3px;width:100%;transform:translate(-50%) scale(0);background:var(--colour-info);transition:transform .4s}.tabs__links .link:not(.text-decoration-none):not(.btn):not(.disabled):hover:after,.tabs__links .link:not(.text-decoration-none):not(.btn):not(.disabled):focus:after,.tabs__links .link:not(.text-decoration-none):not(.btn):not(.disabled).focus:after{transform:translate(-50%) scaleX(.6)}.tabs__links .link:not(.text-decoration-none):not(.btn):not(.disabled):is([aria-pressed=true],:active,.current):after{transform:translate(-50%) scale(1)}.tabs__links .link:not(.text-decoration-none):not(.btn):is([aria-pressed=true],.current){pointer-events:none;outline:var(--contrast-outline-width, 0px) solid var(--colour-primary-theme)!important}@media (min-width: 576px){.tabs__links .link:not(.text-decoration-none):not(.btn){padding:2rem 2rem .5rem}.tabs__links__wrapper{margin:0 auto 2.5rem}}.admin-panel :is(.admin-panel__links,.tabs__links){padding:0;margin:calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);border-top-left-radius:.5rem;border-top-right-radius:.5rem;display:flex;flex-direction:column;border-bottom:1px solid var(--colour-border);overflow:hidden;outline:var(--contrast-outline-width, 0px) solid var(--colour-primary)}.admin-panel :is(.admin-panel__links,.tabs__links):after{display:none}@media screen and (min-width: 36em){.admin-panel :is(.admin-panel__links,.tabs__links){flex-direction:row}}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn){margin:0;padding:1rem var(--padding-x);width:100%;position:relative;text-align:left;flex-grow:1;--gradient-direction: -90deg;background-color:var(--colour-success)}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn):not([class*=bg-]){background-image:linear-gradient(var(--gradient-direction),var(--colour-info) 0,transparent 100%)}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn):is(.current,[aria-pressed=true]){color:var(--colour-primary-theme)}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn):not(.current,[aria-pressed=true]){background:var(--colour-canvas-2)!important}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn):after{display:none}@media screen and (min-width: 36em){.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn){margin:0}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn):not(:first-child){border-left:1px solid var(--colour-border)!important}}.admin-panel :is(.admin-panel__links,.tabs__links) .link:is(.current,[aria-pressed=true]){pointer-events:none}@media screen and (min-width: 36em){:host(.tabs--inline) .tabs__links{margin:0;justify-content:center}:host(.tabs--inline) .tabs__links__wrapper:after{width:100%}}

package/src/components/Table/Table.spec.js

@@ -1,47 +0,0 @@
-import { mount } from '@vue/test-utils';
-import Table from './Table.vue';
-
-describe('Table component', () => {
-  const test = mount(Table, {
-    propsData: {
-      fields: [{ key: 'name' }, { key: 'job' }, { key: 'address' }, { key: 'emergency_contact' }, { key: 'actions' }],
-      items: [
-        {
-          name: 'Derrick',
-          job: 'Electrician',
-          address: '5 King Street<br> London<br> London<br> SW20 0AL<br> United Kingdom',
-          emergency_contact: 'Susan',
-          actions: '<a href="#">View</a><br><a href="#">Point of Contact</a>',
-        },
-        {
-          name: 'Andrew',
-          job: 'Electrician',
-          address: '5 King Street<br> London<br> London<br> SW20 0AL<br> United Kingdom',
-          emergency_contact: 'Susan',
-          actions: '<a href="#">View</a><br><a href="#">Point of Contact</a>',
-        },
-        {
-          name: 'Rachel',
-          job: 'Electrician',
-          address: '5 King Street<br> London<br> London<br> SW20 0AL<br> United Kingdom',
-          emergency_contact: 'Susan',
-          actions: '<a href="#">View</a><br><a href="#">Point of Contact</a>',
-        },
-      ],
-      show: 2,
-    },
-  });
-
-  // On load
-  it('renders a thead', () => {
-    expect(test.find('thead').exists()).toBe(true);
-  });
-
-  it('renders a tbody', () => {
-    expect(test.find('tbody').exists()).toBe(true);
-  });
-
-  it('renders a table heading', () => {
-    expect(test.find('thead th').exists()).toBe(true);
-  });
-});