@iamproperty/components 7.5.0 → 7.5.1--beta1

package/package.json

@@ -5,7 +5,7 @@
     "name": "iamproperty"
   },
   "private": false,
-  "version": "7.5.0",
+  "version": "7.5.1--beta1",
   "scripts": {
     "temp": "rollup --environment COMPONENT:carousel --config rollup-component.config.cjs --sourcemap",
     "reload": "vite --host",
@@ -46,13 +46,13 @@
     "prettier": "prettier assets/ts assets/sass src docs --write"
   },
   "dependencies": {
-    "eslint": "^9.33.0",
+    "eslint": "^9.36.0",
     "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-vue": "^10.4.0",
     "globals": "^15.14.0",
     "js-cookie": "^3.0.5",
     "prettier": "^3.6.2",
-    "typescript-eslint": "^8.39.1",
+    "typescript-eslint": "^8.44.0",
     "unplugin-vue-markdown": "^28.3.1"
   },
   "devDependencies": {

package/src/components/PasswordIndicator/PasswordIndicator.vue

@@ -0,0 +1,23 @@
+<script setup>
+  import { onMounted } from 'vue';
+
+  const component = 'password-indicator';
+
+  onMounted(() => {
+
+    import(`../../../assets/js/components/${component}/${component}.component.min.js`)
+      .then((module) => {
+        if (!window.customElements.get(`iam-${component}`))
+          window.customElements.define(`iam-${component}`, module.default);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  });
+</script>
+
+<template>
+  <iam-password-indicator>
+    <slot></slot>
+  </iam-password-indicator>
+</template>

package/assets/css/components/tabs.css

@@ -1 +0,0 @@
-*:not(main):has(>iam-tabs){container-type:inline-size}iam-tabs{--colour-tab-underline: var(--colour-info)}iam-tabs details:not([open]){padding-bottom:0}iam-tabs .tabs__dropdown{display:none;width:fit-content}iam-tabs:is(.tabs--dropdown) .tabs__dropdown{display:block}iam-tabs:is(.tabs--dropdown)::part(wrapper){display:none}@container (min-width: 62em){iam-tabs:is(.tabs--dropdown) .tabs__dropdown{display:none}iam-tabs:is(.tabs--dropdown)::part(wrapper){display:block}}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%, 0);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:bold;font-family:var(--font-heading);font-size:1.125rem;cursor:pointer;margin:0;padding:1.5rem 1.5rem .5rem 1.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%, 0) scale(0, 0);background:var(--colour-tab-underline);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%, 0) scale(0.6, 1)}.tabs__links .link:not(.text-decoration-none):not(.btn):not(.disabled):is([aria-pressed=true],:active,.current):after{transform:translate(-50%, 0) scale(1, 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 2rem}.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:0.5rem;border-top-right-radius:0.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%}}/*# sourceMappingURL=tabs.css.map */

package/assets/css/components/tabs.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../sass/components/tabs.scss","../../sass/_functions/mixins.scss"],"names":[],"mappings":"AAMA,2BACE,2BAGF,SACE,2CAEA,6BACE,iBAGF,yBACE,aACA,kBAIA,6CACE,cAGF,4CACE,aAIJ,6BAEI,6CACE,aAGF,4CACE,eAMR,4BACE,aAIA,0BADF,yCAEI,kBACA,aACA,QACA,eAIJ,qDACE,iCAGF,wBACE,kBAEA,8CACE,kBACA,mBAEA,oDACE,WACA,SACA,kBACA,WACA,YACA,sCACA,6BACA,cACA,WAOF,8CACE,aAKN,qCACE,sFACA,8EAGF,aACE,6BACA,mBACA,kBACA,aACA,iBACA,WACA,iBACA,gBACA,gBAEA,gCACE,aAGF,mBACE,mBACA,wBACA,4CAGF,wDACE,gBACA,iBACA,gCACA,mBACA,eACA,SACA,mCACA,qBAEA,iEACE,mBACA,WAGF,mEACE,oBAGF,8DACE,kBACA,WACA,SACA,SACA,WACA,WACA,yCACA,uCACA,yBAIA,yPAGE,2CAKF,sHACE,yCAIJ,yFACE,oBACA,wFAKN,yBAEI,wDACE,6BAIJ,sBACE,sBAKJ,mDACE,UACA,0GAEA,8BACA,+BACA,aACA,sBACA,6CACA,gBACA,uEAEA,yDACE,aCwNE,oCDrON,mDAiBI,oBAGF,8FACE,SAEA,8BACA,WACA,kBACA,gBACA,YACA,6BACA,uCAEA,gHACE,oGAGF,+HACE,kCAGF,gIACE,6CAGF,oGACE,aCyLA,oCDjNJ,8FA4BI,SAEA,gHACE,uDAKN,0FACE,oBC4KE,oCDtKJ,kCACE,SACA,uBAGF,iDACE","file":"tabs.css"}

package/assets/sass/components/tabs.scss

@@ -1,254 +0,0 @@
-@use '../_func' as *;
-
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
-
-*:not(main):has(> iam-tabs) {
-  container-type: inline-size;
-}
-
-iam-tabs {
-  --colour-tab-underline: var(--colour-info);
-
-  details:not([open]) {
-    padding-bottom: 0;
-  }
-
-  .tabs__dropdown {
-    display: none;
-    width: fit-content;
-  }
-
-  &:is(.tabs--dropdown) {
-    .tabs__dropdown {
-      display: block;
-    }
-
-    &::part(wrapper) {
-      display: none;
-    }
-  }
-
-  @container (min-width: 62em) {
-    &:is(.tabs--dropdown) {
-      .tabs__dropdown {
-        display: none;
-      }
-
-      &::part(wrapper) {
-        display: block;
-      }
-    }
-  }
-}
-
-iam-tabs::part(next-button) {
-  display: none;
-}
-
-iam-tabs.tabs--guided::part(next-button) {
-  @container (width > 62em) {
-    position: absolute;
-    top: rem(150);
-    right: 0;
-    display: block;
-  }
-}
-
-iam-tabs.tabs--guided::part(next-button):not(:hover) {
-  background: var(--colour-success);
-}
-
-.tabs:not(.admin-panel) {
-  position: relative;
-
-  .tabs__links__wrapper {
-    position: relative;
-    margin: 0 auto 2rem;
-
-    &:after {
-      content: '';
-      left: 50%;
-      position: relative;
-      height: 1px;
-      width: 100vw;
-      background-color: var(--colour-border);
-      transform: translate(-50%, 0);
-      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, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
-  mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 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;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  .link {
-    white-space: nowrap;
-    scroll-snap-align: start;
-    scroll-margin-left: var(--container-padding);
-  }
-
-  .link:not(.text-decoration-none):not(.btn) {
-    --is-current: 0;
-    font-weight: bold;
-    font-family: var(--font-heading);
-    font-size: rem(18);
-    cursor: pointer;
-    margin: 0;
-    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
-    display: inline-block;
-
-    &.disabled {
-      cursor: not-allowed;
-      opacity: 0.4;
-    }
-
-    &:last-child {
-      margin-inline-end: 0;
-    }
-
-    &:after {
-      position: absolute;
-      content: '';
-      bottom: 0;
-      left: 50%; // half way across
-      height: 3px;
-      width: 100%;
-      transform: translate(-50%, 0) scale(0, 0); // translate pulls this left so it's centered
-      background: var(--colour-tab-underline);
-      transition: transform 0.4s;
-    }
-
-    &:not(.disabled) {
-      &:hover:after,
-      &:focus:after,
-      &.focus:after {
-        transform: translate(-50%, 0) scale(0.6, 1);
-      }
-    }
-
-    &:not(.disabled) {
-      &:is([aria-pressed='true'], :active, .current):after {
-        transform: translate(-50%, 0) scale(1, 1);
-      }
-    }
-
-    &: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 0.5rem 2rem;
-    }
-  }
-
-  .tabs__links__wrapper {
-    margin: 0 auto 2.5rem;
-  }
-}
-
-// #region admin-panel links
-.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: rem(8);
-  border-top-right-radius: rem(8);
-  display: flex;
-  flex-direction: column;
-  border-bottom: 1px solid var(--colour-border);
-  overflow: hidden;
-  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
-
-  &:after {
-    display: none;
-  }
-
-  @include media-breakpoint-up(sm, $mobileOnly) {
-    flex-direction: row;
-  }
-
-  .link:not(.text-decoration-none):not(.btn) {
-    margin: 0;
-    //margin-left: calc(var(--wrapper-padding) * -1);
-    padding: #{rem(16)} var(--padding-x);
-    width: 100%;
-    position: relative;
-    text-align: left;
-    flex-grow: 1;
-    --gradient-direction: -90deg;
-    background-color: var(--colour-success);
-
-    &:not([class*='bg-']) {
-      background-image: linear-gradient(var(--gradient-direction), var(--colour-info) 0, transparent 100%);
-    }
-
-    &:is(.current, [aria-pressed='true']) {
-      color: var(--colour-primary-theme);
-    }
-
-    &:not(.current, [aria-pressed='true']) {
-      background: var(--colour-canvas-2) !important;
-    }
-
-    &:after {
-      display: none;
-    }
-
-    @include media-breakpoint-up(sm, $mobileOnly) {
-      margin: 0;
-
-      &:not(:first-child) {
-        border-left: 1px solid var(--colour-border) !important;
-      }
-    }
-  }
-
-  .link:is(.current, [aria-pressed='true']) {
-    pointer-events: none;
-  }
-}
-
-// #endregion
-@include media-breakpoint-up(sm, $mobileOnly) {
-  :host(.tabs--inline) .tabs__links {
-    margin: 0;
-    justify-content: center;
-  }
-
-  :host(.tabs--inline) .tabs__links__wrapper:after {
-    width: 100%;
-  }
-}

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

@@ -1,31 +0,0 @@
-**Add the below to your initialise script**
-
-```
-import('../node_modules/@iamproperty/components/assets/js/components/accordion/accordion.component.min').then(module => { // Might need to update the path
-
-  if (!window.customElements.get(`iam-accordion`))
-    window.customElements.define(`iam-accordion`, module.default);
-
-}).catch((err) => {
-  console.log(err.message);
-});
-```
-
-**Add the below HTML code to where you want the component to live.**
-
-```
-<iam-accordion class="container">
-  <details id="question1" class="accordion-item">
-    <summary class="accordion-header accordion-button h4">Question 1</summary>
-    <p>Answer </p>
-  </details>
-  <details class="accordion-item">
-    <summary class="accordion-header accordion-button h4">Question 2</summary>
-    <p>Answer </p>
-  </details>
-</iam-accordion>
-```
-
-### Class modifiers
-
-- Adding a class of **.accordion--keep-open** to the accordion will stop the items from closing when another one is opened.

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

@@ -1,28 +0,0 @@
-**Add the below to your initialise script**
-
-```
-import('../node_modules/@iamproperty/components/assets/js/components/fileupload/fileupload.component.min').then(module => { // Might need to update the path
-
-  if (!window.customElements.get(`iam-fileupload`))
-    window.customElements.define(`iam-fileupload`, module.default);
-
-}).catch((err) => {
-  console.log(err.message);
-});
-```
-
-**Add the below HTML code to where you want the component to live.**
-
-```
-<iam-fileupload data-maxsize="500"><input type="file" name="files[]" multiple="multiple" accept=".pdf, .csv, .jpg, .png" /></iam-fileupload>
-```
-
-**Properties**
-
-| Option       | Type | Default Value | Description                                                                  |
-| ------------ | ---- | ------------- | ---------------------------------------------------------------------------- |
-| data-maxsize | Int  | -             | Blocks files from being added that is larger than the max size given in kb's |
-
-**Class modifiers**
-
-- Adding a class of **.fileupload--drag-drop** will add a droppable area for the user to drag files into and drop.