@iamproperty/components 5.4.2-beta1 → 5.4.2-beta3

package/package.json

@@ -5,7 +5,7 @@
     "name": "iamproperty"
   },
   "private": false,
-  "version": "5.4.2-beta1",
+  "version": "5.4.2-beta3",
   "scripts": {
     "bootstrap": "copyfiles -u 2 node_modules/bootstrap/**/* assets/bootstrap",
     "dev": "npm run copy && node local_modules/delete-assets.js && vite --host",

package/src/components/Accordion/Accordion.vue

@@ -17,7 +17,7 @@ export default {
 
     this.$nextTick(function () {
       
-      import(`../../../assets/js/components/accordion/accordion.component${import.meta.env.DEV == "development" ? '.min' : ''}.js`).then(module => {
+      import(`../../../assets/js/components/accordion/accordion.component.min.js`).then(module => {
 
         if (!window.customElements.get(`iam-accordion`))
           window.customElements.define(`iam-accordion`, module.default);

package/src/components/Accordion/AccordionItem.vue

@@ -1,6 +1,6 @@
 <template>
   <details :id="createID(title)">
-    <summary :classList="`${titlecolour?`bg-${titlecolour}`:''}`">{{title}}<span v-if="badge" :class="`badge bg-${badgecolour}`">{{badge}}</span></summary>
+    <summary>{{title}}<span v-if="badge" :class="`badge bg-${badgecolour}`">{{badge}}</span></summary>
     <slot></slot>
   </details>
 </template>

package/src/components/Actionbar/Actionbar.vue

@@ -13,7 +13,7 @@ export default {
 
     this.$nextTick(function () {
       
-      import(`../../../assets/js/components/actionbar/actionbar.component${import.meta.env.DEV == "development" ? '.min' : ''}.js`).then(module => {
+      import(`../../../assets/js/components/actionbar/actionbar.component.min.js`).then(module => {
 
         if (!window.customElements.get(`iam-actionbar`))
           window.customElements.define(`iam-actionbar`, module.default);

package/assets/css/components/accordion.css

@@ -1 +0,0 @@
-:host{--accordion-indent: 0.75rem;--accordion-right-padding: 3rem;--accordion-y-padding: 1rem;--accordion-icon-size: 1.875rem;--accordion-icon-top: 0.75rem;margin-bottom:2rem;border-top:1px solid var(--colour-border)}@media screen and (min-width: 62em){:host{--accordion-right-padding: 6rem;--accordion-y-padding: 2rem;--accordion-icon-size: 3rem;--accordion-icon-top: 1.25rem}}::slotted(details){background-color:rgba(0,0,0,0) !important;border-bottom:1px solid var(--colour-border) !important;margin-bottom:0 !important}/*# sourceMappingURL=accordion.css.map */

package/assets/css/components/accordion.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../sass/components/accordion.scss","../../sass/_functions/mixins.scss"],"names":[],"mappings":"AAGA,MACE,4BACA,gCACA,4BACA,gCACA,8BAUA,mBACE,0CCbA,oCDHJ,MASI,gCACA,4BACA,4BACA,+BAOJ,mBACE,0CACA,wDACA","file":"accordion.css"}

package/assets/css/components/accordion.global.css

@@ -1 +0,0 @@
-.accordion-header{padding:var(--accordion-y-padding) var(--accordion-right-padding) var(--accordion-y-padding) var(--accordion-indent);color:var(--colour-heading);text-align:left;background-color:rgba(0,0,0,0);overflow-anchor:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease;--marker-bg: var(--colour-secondary);cursor:pointer;position:relative;max-width:100%}@media(prefers-reduced-motion: reduce){.accordion-header{transition:none}}.accordion-header .badge{vertical-align:bottom;margin-left:.5em;margin-right:.5em;margin-bottom:.1em}.accordion-header:before,.accordion-header:after{content:"";position:absolute;right:var(--accordion-indent);top:var(--accordion-icon-top);margin-top:var(--accordion-icon-size-half);width:var(--accordion-icon-size);height:var(--accordion-icon-size)}.accordion-header:before{text-indent:100%;white-space:nowrap;overflow:hidden;background:var(--marker-bg);border-radius:100%}.accordion-header::after{background:currentColor;mask-image:var(--icon-arrow);mask-size:50%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:50%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;transition:transform .2s ease-in-out;transform:rotate(90deg)}@media(prefers-reduced-motion: reduce){.accordion-header::after{transition:none}}@media(forced-colors: active){.accordion-header::after{content:"►";mask-image:none;-webkit-mask-image:none}}.accordion-header:hover,.accordion-header:focus{--marker-bg: var(--colour-warning);color:var(--colour-hover)}.accordion-header:hover{z-index:var(--index-focus)}.accordion-header:focus{z-index:var(--index-focus);border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}[open]>summary>.accordion-header{color:var(--colour-heading);background-color:rgba(0,0,0,0)}[open]>summary>.accordion-header::after{transform:rotate(-90deg)}.accordion-header[class*=bg-] .accordion-button{border-bottom:1px solid var(--colour-border);margin-bottom:-1px}.accordion-header[class*=bg-] .accordion-button:before{background:none !important}.accordion-header[class*=bg-]:hover .accordion-button{opacity:.8}.accordion-header[class*=bg-]+.accordion-body{padding-top:2rem}.accordion-header{margin-bottom:0}.accordion-header~*{text-align:left;padding-inline:var(--accordion-indent)}/*# sourceMappingURL=accordion.global.css.map */

package/assets/css/components/accordion.global.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../sass/components/accordion.global.scss","../../sass/_functions/variables.scss","../../bootstrap/scss/mixins/_transition.scss","../../bootstrap/scss/_variables.scss"],"names":[],"mappings":"CAEA,kBAEE,qHACA,4BACA,gBACA,iBC+doB,cD9dpB,qBEQI,WFPJ,2IAEA,qCAIA,eACA,kBACA,eEGI,uCFlBN,kBEmBQ,iBFFN,yBACE,sBACA,iBACA,kBACA,mBAIF,iDAGE,WACA,kBACA,8BACA,8BACA,2CACA,iCACA,kCAGF,yBACE,iBACA,mBACA,gBACA,4BACA,mBAMF,yBACE,wBACA,6BACA,cACA,sBACA,sBAEA,qCACA,sBACA,8BACA,8BE5CE,WF8CF,0BACA,wBE3CE,uCF8BJ,yBE7BM,iBF6CJ,8BAhBF,yBAiBI,YACA,gBACA,yBAKJ,gDAGE,mCACA,0BAGF,wBACE,2BAGF,wBACE,2BACA,aGkvBoC,QHjvBpC,UACA,WG8nB4B,kCH3nB9B,iCACE,4BACA,iBCgZyB,cD9YzB,wCAEE,yBAQJ,gDAEE,6CACA,mBAEA,uDACE,2BAIJ,sDACE,WAGF,8CAEE,iBAKJ,kBACE,gBAGF,oBACE,gBACA,eCgXyB","file":"accordion.global.css"}

package/assets/js/modules/accordion.js

@@ -1,30 +0,0 @@
-// @ts-nocheck
-function accordion(accordionElement) {
-    // Add classes to help with CSS 
-    let details = accordionElement.querySelectorAll('details');
-    let summaries = accordionElement.querySelectorAll('summary');
-    details.forEach((detail) => {
-        detail.classList.add('accordion-item');
-    });
-    summaries.forEach((summary) => {
-        summary.classList.add('accordion-header');
-        summary.classList.add('accordion-button');
-        summary.classList.add('h4');
-    });
-    // Fetch all the details element.
-    if (!accordionElement.classList.contains('accordion--keep-open')) {
-        const details = accordionElement.querySelectorAll(":scope > details");
-        // Add the onclick listeners.
-        details.forEach((targetDetail) => {
-            targetDetail.addEventListener("click", () => {
-                // Close all the details that are not targetDetail.
-                details.forEach((detail) => {
-                    if (detail !== targetDetail) {
-                        detail.removeAttribute("open");
-                    }
-                });
-            });
-        });
-    }
-}
-export default accordion;

package/assets/sass/components/accordion.global.scss

@@ -1,135 +0,0 @@
-@use "../_func.scss" as *;
-
-.accordion-header {
-
-  padding: $accordion-button-padding-y var(--accordion-right-padding) $accordion-button-padding-y $accordion-button-padding-x;
-  color: var(--colour-heading);
-  text-align: left; // Reset button style
-  background-color: $accordion-button-bg;
-  overflow-anchor: none;
-  @include transition($accordion-transition);
-
-  --marker-bg: var(--colour-secondary);
-
-
-
-  cursor: pointer;
-  position: relative;
-  max-width: 100%;
-
-  .badge {
-    vertical-align: bottom;
-    margin-left: 0.5em;
-    margin-right: 0.5em;
-    margin-bottom: 0.1em;
-  }
-
-
-  &:before,
-  &:after {
-
-    content: "";
-    position: absolute;
-    right: var(--accordion-indent);
-    top: var(--accordion-icon-top);
-    margin-top: var(--accordion-icon-size-half);
-    width: var(--accordion-icon-size);
-    height: var(--accordion-icon-size);
-  }
-
-  &:before {
-    text-indent: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    background: var(--marker-bg);
-    border-radius: 100%;
-
-
-  }
-
-  // Accordion icon
-  &::after {
-    background: currentColor;
-    mask-image: escape-svg($accordion-button-icon);
-    mask-size: 50%;
-    mask-repeat: no-repeat;
-    mask-position: 50% 50%;
-  
-    -webkit-mask-image: escape-svg($accordion-button-icon);
-    -webkit-mask-size: 50%;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: 50% 50%;
-
-    @include transition($accordion-icon-transition);
-    transform: rotate(90deg);
-
-
-    @media (forced-colors: active) {
-      content: "\25BA";
-      mask-image: none;
-      -webkit-mask-image: none;
-    }
-
-  }
-
-  &:hover,
-  &:focus {
-
-    --marker-bg: var(--colour-warning);
-    color: var(--colour-hover);
-  }
-
-  &:hover {
-    z-index: var(--index-focus);
-  }
-
-  &:focus {
-    z-index: var(--index-focus);
-    border-color: $accordion-button-focus-border-color;
-    outline: 0;
-    box-shadow: $accordion-button-focus-box-shadow;
-  }
-
-  [open] > summary > & {
-    color: var(--colour-heading);
-    background-color: $accordion-button-active-bg;
-    
-    &::after {
-      
-      transform: rotate(-90deg);
-    }
-  }
-}
-
-// #region Coloured summary
-.accordion-header[class*="bg-"] {
-
-  .accordion-button {
-
-    border-bottom: 1px solid var(--colour-border);
-    margin-bottom: -1px;
-
-    &:before {
-      background: none!important;
-    }
-  }
-
-  &:hover .accordion-button {
-    opacity: 0.8;
-  }
-
-  & + .accordion-body {
-
-    padding-top: 2rem;
-  }
-}
-// #endregion
-
-.accordion-header {
-  margin-bottom: 0;
-}
-
-.accordion-header ~ * {
-  text-align: left;
-  padding-inline: $accordion-body-padding-x;
-}

package/assets/sass/components/accordion.scss

@@ -1,27 +0,0 @@
-@use "../_func.scss" as *;
-
-// Accordion
-:host {
-  --accordion-indent: 0.75rem;
-  --accordion-right-padding: 3rem;
-  --accordion-y-padding: 1rem;
-  --accordion-icon-size: #{rem(30)};
-  --accordion-icon-top: #{rem(12)};
-
-  @include media-breakpoint-up(md) {
-    //--accordion-indent: 1rem;
-    --accordion-right-padding: 6rem;
-    --accordion-y-padding: 2rem;
-    --accordion-icon-size: #{rem(48)};
-    --accordion-icon-top: #{rem(20)};
-  }  
-  
-  margin-bottom: 2rem;
-    border-top: $accordion-border-width solid $accordion-border-color;
-}
-
-::slotted(details) {
-  background-color: $accordion-bg!important;
-  border-bottom: $accordion-border-width solid $accordion-border-color!important;
-  margin-bottom: 0!important;
-}

package/assets/ts/modules/accordion.ts

@@ -1,38 +0,0 @@
-// @ts-nocheck
-function accordion(accordionElement: Element) {
-
-  // Add classes to help with CSS 
-  let details = accordionElement.querySelectorAll('details');
-  let summaries = accordionElement.querySelectorAll('summary');
-  
-  details.forEach((detail) => {
-    detail.classList.add('accordion-item');
-  });
-
-  summaries.forEach((summary) => {
-    summary.classList.add('accordion-header');
-    summary.classList.add('accordion-button');
-    summary.classList.add('h4');
-  });
-  
-
-  // Fetch all the details element.
-  if(!accordionElement.classList.contains('accordion--keep-open')){
-
-    const details: NodeListOf<HTMLElement> = accordionElement.querySelectorAll(":scope > details");
-
-    // Add the onclick listeners.
-    details.forEach((targetDetail) => {
-      targetDetail.addEventListener("click", () => {
-        // Close all the details that are not targetDetail.
-        details.forEach((detail) => {
-          if (detail !== targetDetail) {
-            detail.removeAttribute("open");
-          }
-        });
-      });
-    });
-  }
-}
-
-export default accordion